/*
 * SMU Corporate — main.css
 * Design system "Premium Modern": biru #1F5060 + emas #F0B010.
 * Diekstrak dari static html/b.html (Phase 2) + tambahan konvensi WP.
 * Warna/font di-handle Tailwind config (lihat includes/enqueue.php).
 */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; color: #23262B; }

/* ===== 3D Bump Texture (feDiffuseLighting) — varian kunci ===== */
.texture-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27b%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.4%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeDiffuseLighting%20lighting-color%3D%27white%27%20surfaceScale%3D%272%27%3E%3CfeDistantLight%20azimuth%3D%2745%27%20elevation%3D%2755%27%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27200%27%20height%3D%27200%27%20filter%3D%27url%28%23b%29%27%20opacity%3D%270.55%27%2F%3E%3C%2Fsvg%3E');
    background-size: 200px 200px;
    pointer-events: none;
    z-index: 1;
}
.texture-overlay-gold::before {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27b%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.4%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeDiffuseLighting%20lighting-color%3D%27%23F0B010%27%20surfaceScale%3D%272%27%3E%3CfeDistantLight%20azimuth%3D%2745%27%20elevation%3D%2755%27%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27200%27%20height%3D%27200%27%20filter%3D%27url%28%23b%29%27%20opacity%3D%270.55%27%2F%3E%3C%2Fsvg%3E');
    background-size: 200px 200px;
}
.texture-overlay-blue::before {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27b%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.4%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeDiffuseLighting%20lighting-color%3D%27%231F5060%27%20surfaceScale%3D%272%27%3E%3CfeDistantLight%20azimuth%3D%2745%27%20elevation%3D%2755%27%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27200%27%20height%3D%27200%27%20filter%3D%27url%28%23b%29%27%20opacity%3D%270.55%27%2F%3E%3C%2Fsvg%3E');
    background-size: 200px 200px;
}
.texture-overlay-hero::before {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27b%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.4%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeDiffuseLighting%20lighting-color%3D%27%231F5060%27%20surfaceScale%3D%272%27%3E%3CfeDistantLight%20azimuth%3D%2745%27%20elevation%3D%2755%27%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27200%27%20height%3D%27200%27%20filter%3D%27url%28%23b%29%27%20opacity%3D%270.25%27%2F%3E%3C%2Fsvg%3E');
    background-size: 200px 200px;
}
/* varian putih tone-down (lebih halus) — opacity 0.3 */
.texture-overlay-soft::before {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27b%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.4%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeDiffuseLighting%20lighting-color%3D%27white%27%20surfaceScale%3D%272%27%3E%3CfeDistantLight%20azimuth%3D%2745%27%20elevation%3D%2755%27%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27200%27%20height%3D%27200%27%20filter%3D%27url%28%23b%29%27%20opacity%3D%270.3%27%2F%3E%3C%2Fsvg%3E');
    background-size: 200px 200px;
}

/* ===== Animated swoosh decorative elements ===== */
.swoosh {
    position: absolute;
    border-radius: 50%;
    opacity: 0.07;
    pointer-events: none;
}

/* ===== Custom scrollbar ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #153848; }
::-webkit-scrollbar-thumb { background: #F0B010; border-radius: 4px; }

/* ===== Hero diagonal clip ===== */
.hero-clip { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }
.section-clip-bottom { clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%); }
.section-clip-top { clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%); }

/* ===== TKDN Badge ===== */
.tkdn-badge {
    background: linear-gradient(135deg, #C0392B, #E74C3C);
    color: #FFF;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ===== Gold shimmer ===== */
@keyframes goldShimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.gold-shimmer { animation: goldShimmer 3s ease-in-out infinite; }

/* ===== Floating ===== */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float-anim { animation: float 4s ease-in-out infinite; }

/* ===== Fade in on scroll ===== */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ===== Nav link underline ===== */
.nav-link { position: relative; transition: color 0.2s; }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #F0B010;
    transition: width 0.3s;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* ===== WP menu output (wp_nav_menu) — desktop & mobile ===== */
/* Desktop: <ul class="nav-desktop"><li class="menu-item"><a>… */
.nav-desktop {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-desktop .menu-item a {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: color 0.2s;
}
.nav-desktop .menu-item a:hover,
.nav-desktop .menu-item.current-menu-item > a,
.nav-desktop .menu-item.current_page_item > a { color: #F0B010; }

/* Mobile: <ul class="menu-mobile"> di dalam overlay */
.menu-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-mobile .menu-item a {
    color: #FFF;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: color 0.2s;
}
.menu-mobile .menu-item a:hover,
.menu-mobile .menu-item.current-menu-item > a { color: #F0B010; }

/* ===== Counter ===== */
.counter-value { font-variant-numeric: tabular-nums; }

/* ===== Hex bullet ===== */
.hex-bullet { position: relative; padding-left: 28px; }
.hex-bullet::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 14px;
    background: #F0B010;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* ===== Product card hover ===== */
.product-card { transition: transform 0.3s, box-shadow 0.3s; }
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(31, 80, 96, 0.15);
}

/* ===== News card hover ===== */
.news-card { transition: transform 0.3s, box-shadow 0.3s; }
.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(31, 80, 96, 0.15);
}
.news-card img { transition: transform 0.5s ease; }
.news-card:hover img { transform: scale(1.05); }

/* ===== Mobile menu slide ===== */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.35s ease;
}
.mobile-menu.open { transform: translateX(0); }

/* ===== Strength card border animation ===== */
.strength-card { position: relative; overflow: hidden; }
.strength-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: #F0B010;
    transition: height 0.4s ease;
}
.strength-card:hover::before { height: 100%; }

/* ===== Decorative thin border frame ===== */
.thin-frame {
    outline: 1px solid rgba(240, 176, 16, 0.15);
    outline-offset: 8px;
}

/* ===== Gradient text ===== */
.gradient-text {
    background: linear-gradient(135deg, #F0B010, #E0A008, #F0B010);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== Partner logo placeholder ===== */
.partner-placeholder {
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(240, 176, 16, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    transition: border-color 0.3s, background 0.3s;
}
.partner-placeholder:hover {
    border-color: rgba(240, 176, 16, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

/* ===== Article / entry-content typography (news detail, single post) =====
   Gutenberg-ready: markup sama dengan static news-detail (.article-content). */
.article-content p,
.entry-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(35, 38, 43, 0.85);
    margin-bottom: 1.5rem;
}
.article-content h2,
.entry-content h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: #153848;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}
.article-content h3,
.entry-content h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #1F5060;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.article-content ul,
.article-content ol,
.entry-content ul,
.entry-content ol {
    margin: 0 0 1.5rem 0;
    padding-left: 0;
    list-style: none;
}
.article-content ul li,
.entry-content ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 0.75rem;
    line-height: 1.7;
    color: rgba(35, 38, 43, 0.85);
}
.article-content ul li::before,
.entry-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 14px;
    height: 14px;
    background: #F0B010;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.article-content ol,
.entry-content ol { counter-reset: ol-counter; }
.article-content ol li,
.entry-content ol li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 0.75rem;
    line-height: 1.7;
    color: rgba(35, 38, 43, 0.85);
    counter-increment: ol-counter;
}
.article-content ol li::before,
.entry-content ol li::before {
    content: counter(ol-counter);
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    background: #FFF4D6;
    color: #E0A008;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.article-content blockquote,
.entry-content blockquote {
    border-left: 4px solid #F0B010;
    background: #FFF4D6;
    padding: 1.25rem 1.5rem;
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: #23262B;
    margin: 2rem 0;
    line-height: 1.7;
}
.article-content img,
.entry-content img {
    width: 100%;
    border-radius: 16px;
    margin: 2rem 0;
}
.article-content a,
.entry-content a {
    color: #1F5060;
    text-decoration: underline;
    text-decoration-color: rgba(240, 176, 16, 0.5);
    text-underline-offset: 3px;
    transition: color 0.2s;
}
.article-content a:hover,
.entry-content a:hover { color: #E0A008; }
.article-content strong,
.entry-content strong { font-weight: 700; color: #23262B; }

/* ===== WP Admin bar: navbar fixed jangan ketutup saat login ===== */
.admin-bar #navbar { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar #navbar { top: 46px; }
}

/* ===== Pattern helpers (Phase 8) =====
   Gradient via class (bukan inline style) agar aman untuk block validation. */
.bg-gradient-partner {
    background: linear-gradient(135deg, #1F5060, #153848);
}
.bg-gradient-gold-soft {
    background: linear-gradient(180deg, #FFF9EB 0%, #FFF4D6 50%, #FFF9EB 100%);
}
.bg-gradient-cta {
    background: linear-gradient(135deg, #153848, #1F5060);
}
/* Showcase grid gammita KARIMUN (markup via wp:html) */
.smu-showcase-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 200px;
    transition: transform 0.5s ease;
}
.smu-showcase-grid a:hover img,
.smu-showcase-grid .group:hover img { transform: scale(1.05); }


/* ===== Logo navbar — treatment "kertas/jeans" (12 Okt 2026, pilihan C) =====
   Tanpa glow putih; grain texture section di-mask ke bentuk logo + shadow tipis (firm).
   URL mask di-set inline via CSS var --smu-logo-mask (dari PHP, mengikuti custom_logo). */
.smu-logo-tex {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.smu-logo-tex > img {
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}
.smu-logo-tex::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27b%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.4%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeDiffuseLighting%20lighting-color%3D%27white%27%20surfaceScale%3D%272%27%3E%3CfeDistantLight%20azimuth%3D%2745%27%20elevation%3D%2755%27%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27200%27%20height%3D%27200%27%20filter%3D%27url%28%23b%29%27%20opacity%3D%270.55%27%2F%3E%3C%2Fsvg%3E');
    background-size: 200px 200px;
    opacity: 0.9;
    mix-blend-mode: multiply;
    -webkit-mask-image: var(--smu-logo-mask);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: var(--smu-logo-mask);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* ===== Hero + Kontak — dirender dari block pattern (Phase 11) ===== */
.smu-hero-bg { background: linear-gradient(135deg, #153848 0%, #1F5060 40%, #1A4A58 70%, #153848 100%); }
.smu-contact-bg { background: linear-gradient(135deg, #153848 0%, #1F5060 100%); }
.hero-logo img { width: 5rem; height: 5rem; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(240, 176, 16, 0.35)); }
.hero-photo img { width: 100%; height: 350px; object-fit: cover; }
@media (min-width: 768px) { .hero-photo img { height: 450px; } }

/* Hero CTA — samakan tinggi kedua tombol (flex items stretch, seperti static HTML) */
#hero p.m-0 { display: flex; }
#hero p.m-0 > a { flex: 1; display: flex; align-items: center; justify-content: center; }

/* ===== Section/komponen dari block native (Phase 11 audit) ===== */
.smu-vision-bg { background: linear-gradient(135deg, #153848 0%, #1F5060 50%, #1A4A58 100%); }
.smu-about-img { position: relative; margin: 0; border-radius: 1rem; overflow: hidden; }
.smu-about-img img { width: 100%; height: 350px; object-fit: cover; display: block; }
@media (min-width: 768px) { .smu-about-img img { height: 450px; } }
.smu-about-img::after { content: ''; position: absolute; inset: 0; background: rgba(31, 80, 96, 0.1); border-radius: 1rem; }
.product-img { position: relative; margin: 0; height: 14rem; overflow: hidden; }
.product-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
.product-card:hover .product-img img { transform: scale(1.05); }
.product-img::after { content: ''; position: absolute; inset: 0; background: rgba(31, 80, 96, 0.2); transition: background-color 0.3s; }
.product-card:hover .product-img::after { background: rgba(31, 80, 96, 0.1); }
.smu-showcase-img { margin: 0; height: 100%; }
.smu-showcase-img img { width: 100%; height: 100%; object-fit: cover; min-height: 200px; display: block; }

/* ===== SMU Icon Block (menggantikan pseudo-element — client pilih via sidebar) ===== */
.smu-icon { display: flex; align-items: center; justify-content: center; }
.smu-icon svg { display: block; }
.smu-icon--heading { width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; background-color: rgba(31, 80, 96, 0.1); color: #1F5060; margin-bottom: 1.25rem; transition: background-color 0.2s, color 0.2s; }
.smu-icon--heading svg { width: 1.75rem; height: 1.75rem; }
.group:hover .smu-icon--heading { background-color: #1F5060; color: #fff; }
.smu-icon--gold { width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; background-color: rgba(240, 176, 16, 0.1); color: #F0B010; margin-bottom: 1.5rem; }
.smu-icon--gold svg { width: 1.75rem; height: 1.75rem; }
.smu-icon--gold-indent { margin-left: 1rem; }
.smu-icon--chip-blue, .smu-icon--chip-gold, .smu-icon--chip-red { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; border: 2px solid #fff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); position: relative; z-index: 10; }
/* Chip menindih gambar (overlap 24px spt desain awal). Spesifisitas 0-2-0 utk menang dari core `> :first-child { margin-block-start: 0 }`. */
.smu-icon.smu-icon--chip-blue, .smu-icon.smu-icon--chip-gold, .smu-icon.smu-icon--chip-red { margin-top: -4.5rem; }
.smu-icon--chip-blue { background-color: rgba(31, 80, 96, 0.1); color: #1F5060; }
.smu-icon--chip-gold { background-color: #FFF4D6; color: #E0A008; }
.smu-icon--chip-red { background-color: #FEF2F2; color: #EF4444; }
.smu-icon--chip-blue svg, .smu-icon--chip-gold svg, .smu-icon--chip-red svg { width: 1.25rem; height: 1.25rem; }
.smu-icon--contact, .smu-icon--contact-dark { width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; flex-shrink: 0; color: #F0B010; }
.smu-icon--contact { background-color: rgba(255, 255, 255, 0.1); }
.smu-icon--contact-dark { background-color: #153848; }
.smu-icon--contact svg, .smu-icon--contact-dark svg { width: 1.5rem; height: 1.5rem; }
.smu-icon--stat { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; flex-shrink: 0; background-color: #FFF4D6; color: #E0A008; }
.smu-icon--stat svg { width: 1.25rem; height: 1.25rem; }
.smu-icon--quote { width: 2.5rem; height: 2.5rem; margin: 0 auto 1.5rem; color: rgba(240, 176, 16, 0.3); }
.smu-icon--quote svg { width: 100%; height: 100%; }

/* Keeper dari pass pseudo: bar kartu visi + garis tagline hero */
.smu-vision-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #F0B010; }
.hero-tagline { display: flex; align-items: center; gap: 0.75rem; }
.hero-tagline::before, .hero-tagline::after { content: ''; display: block; width: 3rem; height: 1px; background: rgba(240, 176, 16, 0.5); flex-shrink: 0; }