/* =========================================================================
   Barazaki Konveksi — Design System
   Modern Corporate Premium + Modern E-commerce
   ========================================================================= */

:root{
    --radius-card: 14px;
    --radius-input: 10px;
    --radius-btn: 9px;
    --shadow-soft: 0 1px 2px rgba(16,42,67,.04), 0 2px 8px rgba(16,42,67,.05);
    --shadow-lift: 0 4px 16px rgba(16,42,67,.08);
    --border-subtle: #e7e9ee;
}

*{ scroll-behavior:smooth; }

body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
    letter-spacing:-0.011em;
}

h1,h2,h3,h4,h5{ letter-spacing:-0.02em; }

[data-animate]{ opacity:0; }

.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:9999px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    font-weight:600; font-size:.875rem; line-height:1.2;
    border-radius:var(--radius-btn);
    padding:.75rem 1.5rem;
    transition:background-color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
    white-space:nowrap;
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:#f59e0b; color:#0c0a09; box-shadow:var(--shadow-soft); }
.btn-primary:hover{ background:#fbbf24; }
.btn-secondary{ background:#fff; color:#0c0a09; border:1px solid var(--border-subtle); }
.btn-secondary:hover{ background:#f7f8fa; border-color:#d7dbe3; }
.btn-outline-inverse{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }
.btn-outline-inverse:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.55); }
.btn-ghost{ background:transparent; color:#292524; }
.btn-ghost:hover{ background:#f0f4f8; }
.btn-danger{ background:#fef2f2; color:#dc2626; }
.btn-danger:hover{ background:#fee2e2; }
.btn-sm{ padding:.5rem 1rem; font-size:.8125rem; }

/* ---------- Card ---------- */
.card{
    background:#fff;
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-soft);
}
.card-hover{ transition:box-shadow .2s ease, transform .2s ease; }
.card-hover:hover{ box-shadow:var(--shadow-lift); transform:translateY(-2px); }

/* ---------- Input ---------- */
.field{
    width:100%;
    padding:.7rem 1rem;
    border-radius:var(--radius-input);
    border:1px solid var(--border-subtle);
    font-size:.875rem;
    background:#fff;
    color:#0c0a09;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.field:focus{ outline:none; border-color:#d97706; box-shadow:0 0 0 3px rgba(217,119,6,.12); }
.field-error{ border-color:#f87171; }

/* ---------- Badge / Status ---------- */
.badge{
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.3rem .7rem; border-radius:9999px;
    font-size:.6875rem; font-weight:700; letter-spacing:.01em;
    white-space:nowrap;
}
.badge-dot::before{ content:''; width:5px; height:5px; border-radius:9999px; background:currentColor; }
.badge-success{ background:#ecfdf5; color:#059669; }
.badge-warning{ background:#fffbeb; color:#b45309; }
.badge-info{ background:#eff6ff; color:#2563eb; }
.badge-neutral{ background:#f1f4f8; color:#44403c; }
.badge-danger{ background:#fef2f2; color:#dc2626; }
.badge-primary{ background:#fff1e7; color:#b45309; }

/* ---------- Nav link (public navbar) ---------- */
.nav-link{
    position:relative; font-size:.875rem; font-weight:500; color:#292524;
    padding:.35rem 0; transition:color .15s ease;
}
.nav-link::after{
    content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
    background:#d97706; transition:right .2s ease; border-radius:2px;
}
.nav-link:hover{ color:#0c0a09; }
.nav-link:hover::after,
.nav-link.is-active::after{ right:0; }
.nav-link.is-active{ color:#b45309; font-weight:600; }

/* ---------- Sidebar link (dashboard) ---------- */
.side-link{
    display:flex; align-items:center; gap:.75rem;
    padding:.6rem .85rem; border-radius:10px;
    font-size:.8125rem; font-weight:500; color:#44403c;
    border-left:3px solid transparent;
    transition:background-color .15s ease, color .15s ease;
}
.side-link:hover{ background:#f4f6f9; color:#0c0a09; }
.side-link.is-active{ background:#fff1e7; color:#b45309; border-left-color:#d97706; font-weight:600; }
.dark .side-link{ color:#a8a29e; }
.dark .side-link:hover{ background:#1c1917; color:#f5f5f4; }
.dark .side-link.is-active{ background:rgba(217,119,6,.16); color:#fbbf24; }

.side-group-label{
    font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:#78716c; padding:1.1rem .85rem .4rem;
}
.dark .side-group-label{ color:#78716c; }

/* ---------- Table ---------- */
.table-modern{ width:100%; border-collapse:separate; border-spacing:0; font-size:.8125rem; }
.table-modern thead th{
    text-align:left; font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:#8496ab; padding:.85rem 1rem; border-bottom:1px solid var(--border-subtle);
}
.table-modern tbody td{ padding:.9rem 1rem; border-bottom:1px solid var(--border-subtle); color:#1c1917; }
.table-modern tbody tr:last-child td{ border-bottom:none; }
.table-modern tbody tr{ transition:background-color .12s ease; }
.table-modern tbody tr:hover{ background:#fafbfc; }
.dark .table-modern tbody td{ color:#e7e5e4; border-color:#292524; }
.dark .table-modern thead th{ color:#a8a29e; border-color:#292524; }
.dark .table-modern tbody tr:hover{ background:#171310; }

/* ---------- Stat card ---------- */
.stat-card{
    background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-card);
    padding:1.25rem; box-shadow:var(--shadow-soft);
}
.dark .stat-card{ background:#1c1917; border-color:#292524; }

/* ---------- Skeleton / loading ---------- */
.skeleton{ background:linear-gradient(90deg,#eef1f4 25%,#f5f5f4 37%,#eef1f4 63%); background-size:400% 100%; animation:skeleton-loading 1.4s ease infinite; border-radius:8px; }
@keyframes skeleton-loading{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }
.dark .skeleton{ background:linear-gradient(90deg,#1c1917 25%,#262119 37%,#1c1917 63%); background-size:400% 100%; }

.spinner{ width:1rem; height:1rem; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:9999px; animation:spin .6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =========================================================================
   DARK THEME — Tema Gelap Hitam + Kuning (default aktif di seluruh halaman)
   Override token warna dasar Tailwind (bg/text/border) untuk halaman publik
   yang belum memakai varian dark: per elemen (home, marketplace, auth, dll).
   Halaman dashboard sudah punya varian dark: sendiri di tiap komponen;
   blok ini menyelaraskan warnanya (hitam pekat + aksen kuning/amber).
   ========================================================================= */
.dark{ color-scheme: dark; }
.dark body{ background:#0c0a09; }

/* Permukaan (surface) */
.dark .bg-white{ background-color:#1c1917 !important; }
.dark .bg-white\/95{ background-color:rgba(28,25,23,.92) !important; }
.dark .bg-white\/90{ background-color:rgba(28,25,23,.9) !important; }
.dark .bg-gray-50{ background-color:#141110 !important; }
.dark .bg-gray-100{ background-color:#201b18 !important; }
.dark .bg-navy-50{ background-color:#0c0a09 !important; }

/* Teks */
.dark .text-navy-900,
.dark .text-navy-800,
.dark .text-navy-700{ color:#f5f5f4 !important; }
.dark .text-navy-600{ color:#e7e5e4 !important; }
.dark .text-navy-500,
.dark .text-navy-400,
.dark .text-navy-300{ color:#a8a29e !important; }
.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700{ color:#f5f5f4 !important; }
.dark .text-gray-600,
.dark .text-gray-500{ color:#a8a29e !important; }

/* Aksen kuning/amber — cerahkan varian gelap supaya tetap kontras di atas hitam */
.dark .text-primary-800,
.dark .text-primary-700,
.dark .text-primary-600{ color:#fbbf24 !important; }
.dark .bg-primary-50{ background-color:rgba(217,119,6,.15) !important; }
.dark .bg-primary-100{ background-color:rgba(217,119,6,.2) !important; }

/* Badge/status berwarna (emerald, amber literal, red, blue) — sebelumnya
   dibiarkan terang (mis. bg-emerald-50, bg-red-50) sehingga jadi "titik
   terlalu terang" yang mencolok di tengah tema gelap (contoh: kartu
   WhatsApp Support di halaman Bantuan, pil status di dashboard, dsb).
   Diselaraskan dengan pola yang sama seperti primary di atas: bg pekat
   bertransparansi rendah, teks dicerahkan supaya tetap kontras. */
.dark .bg-emerald-50{ background-color:rgba(5,150,105,.15) !important; }
.dark .bg-emerald-100{ background-color:rgba(5,150,105,.22) !important; }
.dark .text-emerald-800,
.dark .text-emerald-700,
.dark .text-emerald-600{ color:#34d399 !important; }
.dark .border-emerald-200,
.dark .border-emerald-300{ border-color:rgba(5,150,105,.4) !important; }

.dark .bg-amber-50{ background-color:rgba(217,119,6,.15) !important; }
.dark .bg-amber-100{ background-color:rgba(217,119,6,.2) !important; }
.dark .text-amber-800,
.dark .text-amber-700,
.dark .text-amber-600{ color:#fbbf24 !important; }
.dark .border-amber-200,
.dark .border-amber-300{ border-color:rgba(217,119,6,.4) !important; }

.dark .bg-red-50{ background-color:rgba(220,38,38,.15) !important; }
.dark .bg-red-100{ background-color:rgba(220,38,38,.22) !important; }
.dark .text-red-800,
.dark .text-red-700,
.dark .text-red-600{ color:#f87171 !important; }
.dark .border-red-200,
.dark .border-red-300{ border-color:rgba(220,38,38,.4) !important; }

.dark .bg-blue-50{ background-color:rgba(37,99,235,.15) !important; }
.dark .bg-blue-100{ background-color:rgba(37,99,235,.22) !important; }
.dark .text-blue-800,
.dark .text-blue-700,
.dark .text-blue-600{ color:#60a5fa !important; }
.dark .border-blue-200,
.dark .border-blue-300{ border-color:rgba(37,99,235,.4) !important; }

/* Border */
.dark .border-gray-50,
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300,
.dark .border-navy-100,
.dark .border-navy-200,
.dark .border-navy-300{ border-color:#292524 !important; }

/* Komponen umum */
.dark .card{ background:#1c1917; border-color:#292524; }
.dark .field{ background:#1c1917; color:#f5f5f4; border-color:#292524; }
.dark .field::placeholder{ color:#78716c; }
.dark .btn-secondary{ background:#1c1917; color:#f5f5f4; border-color:#292524; }
.dark .btn-secondary:hover{ background:#201b18; border-color:#44403c; }
.dark .btn-ghost{ color:#e7e5e4; }
.dark .btn-ghost:hover{ background:#201b18; }
.dark .nav-link{ color:#a8a29e; }
.dark .nav-link:hover{ color:#f5f5f4; }
.dark ::-webkit-scrollbar-thumb{ background:#44403c; }

/* ---------- Navbar transparan (khusus homepage, di atas hero) ---------- */
.nav-transparent{
    background:linear-gradient(to bottom, rgba(0,0,0,.42), rgba(0,0,0,0));
    border-bottom-color:transparent;
    box-shadow:none;
}

/* ---------- Navbar glass (saat scroll / halaman dalam) ---------- */
.nav-glass{
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:blur(16px) saturate(1.5);
    backdrop-filter:blur(16px) saturate(1.5);
    border-bottom:1px solid var(--border-subtle);
    box-shadow:0 12px 32px -20px rgba(12,10,9,.28);
}
.nav-glass::after{
    content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
    background:linear-gradient(90deg, transparent 6%, rgba(245,158,11,.55), transparent 94%);
    pointer-events:none;
}
.dark .nav-glass{
    background:rgba(12,10,9,.72);
    border-bottom-color:rgba(251,191,36,.16);
    box-shadow:0 14px 36px -20px rgba(0,0,0,.75);
}

/* Dropdown mobile: slide+fade halus tiap kali dibuka (restart saat display berubah) */
#mobile-menu{ animation:nav-drop .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes nav-drop{
    from{ opacity:0; transform:translateY(-10px); }
    to{ opacity:1; transform:translateY(0); }
}
.nav-transparent .nav-link{ color:#fff; }
.nav-transparent .nav-link:hover{ color:#fde68a; }
.nav-transparent .nav-link.is-active{ color:#fcd34d; }
.nav-transparent .nav-link::after{ background:#fcd34d; }
.nav-transparent .brand-title{ color:#fff; }
.nav-transparent .btn-ghost{ color:#fff; }
.nav-transparent .btn-ghost:hover{ background:rgba(255,255,255,.12); }
.nav-transparent #mobile-menu-btn{ color:#fff; }
.nav-transparent .navbar-icon{ color:#fff; }
.nav-transparent .navbar-icon:hover{ color:#fde68a; }

/* ---------- Logo klien bergerak (marquee) ---------- */
.client-marquee-track{
    animation: client-marquee 28s linear infinite;
}
.client-marquee-track:hover{ animation-play-state: paused; }
@keyframes client-marquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}

/* ---------- Bento Gallery (halaman /galeri) ---------- */
.bento-card{
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.bento-card:hover{
    transform: scale(1.02);
    box-shadow: 0 12px 28px -8px rgba(12,10,9,.45);
}
#bento-viewport{ padding-bottom: 4px; }
.gallery-filter-btn.is-active{
    background:#d97706; color:#fff; border-color:#d97706;
}

/* ---------- Tombol lensa preview di sudut card galeri ---------- */
.gallery-zoom-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:2rem; height:2rem; border-radius:9999px;
    color:#fff; background:rgba(20,17,16,.65);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border:1px solid rgba(251,191,36,.4);
    box-shadow:0 4px 14px -4px rgba(0,0,0,.5);
    opacity:.75;
    transition:opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
}
.gallery-zoom-btn:hover{
    opacity:1; transform:scale(1.12);
    background:rgba(217,119,6,.9); border-color:rgba(251,191,36,.7);
}
.gallery-zoom-btn:active{ transform:scale(.95); }

/* =========================================================================
   PREMIUM POLISH — lapisan desain modern (glass, glow, gradient border)
   Semua efek berbasis transform/opacity (GPU-friendly), tanpa aset/request
   baru dan tanpa mengubah markup fungsional halaman.
   ========================================================================= */

/* ---------- Section label ---------- */
.section-label{
    display:inline-flex; align-items:center; gap:.6rem;
    font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:#d97706;
}
.section-label::before{
    content:''; width:1.75rem; height:2px; border-radius:2px;
    background:linear-gradient(90deg, #f59e0b, rgba(245,158,11,.15));
}
.dark .section-label{ color:#fbbf24; }

/* ---------- Glass card ---------- */
.glass-card{
    position:relative;
    background:#fff;
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-soft);
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.dark .glass-card{
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.09);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.dark .glass-card:hover{
    background:rgba(255,255,255,.06);
    border-color:rgba(251,191,36,.4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 44px -18px rgba(0,0,0,.65);
}

/* ---------- Lift (hover naik) ---------- */
.lift:hover{ transform:translateY(-4px); }

/* ---------- Feature card (panah muncul saat hover) ---------- */
.feature-card::after{
    content:'';
    position:absolute; right:1.1rem; bottom:1.1rem;
    width:1.05rem; height:1.05rem;
    background:linear-gradient(135deg,#fcd34d,#f59e0b);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14m-6-6 6 6-6 6'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14m-6-6 6 6-6 6'/></svg>") center/contain no-repeat;
    opacity:0; transform:translate(-8px,8px);
    transition:opacity .3s ease, transform .3s ease;
}
.feature-card:hover::after{ opacity:1; transform:translate(0,0); }

/* ---------- Icon chip ---------- */
.icon-chip{
    display:flex; align-items:center; justify-content:center;
    width:3rem; height:3rem; border-radius:.9rem;
    background:linear-gradient(135deg, rgba(251,191,36,.16), rgba(245,158,11,.05));
    border:1px solid rgba(251,191,36,.28);
    color:#d97706;
    transition:transform .3s ease, box-shadow .3s ease;
}
.dark .icon-chip{ color:#fbbf24; }
.feature-card:hover .icon-chip,
.lift:hover .icon-chip{
    transform:translateY(-2px) scale(1.04);
    box-shadow:0 8px 22px -8px rgba(245,158,11,.5);
}

/* ---------- Statistik ---------- */
.stat-icon{
    width:3.5rem; height:3.5rem; border-radius:9999px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, rgba(251,191,36,.16), rgba(245,158,11,.04));
    border:1px solid rgba(251,191,36,.3);
    color:#fbbf24;
    transition:transform .3s ease, box-shadow .3s ease;
}
.lift:hover .stat-icon{ transform:translateY(-2px) scale(1.05); box-shadow:0 8px 24px -8px rgba(245,158,11,.55); }
.stat-value{
    background:linear-gradient(120deg, #fde68a 0%, #fbbf24 45%, #f59e0b 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Teks gradasi amber ---------- */
.text-gradient-amber{
    background:linear-gradient(100deg, #fde68a 0%, #fbbf24 50%, #f59e0b 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Hero ---------- */
.hero-title{ text-shadow:0 2px 28px rgba(0,0,0,.4); }
.hero-glow{
    position:absolute; border-radius:9999px; pointer-events:none;
    background:radial-gradient(circle, rgba(245,158,11,.28) 0%, rgba(245,158,11,.08) 45%, transparent 70%);
    filter:blur(30px);
}
.hero-badge{
    background:rgba(251,191,36,.08);
    border:1px solid rgba(251,191,36,.35);
    box-shadow:inset 0 0 18px -8px rgba(251,191,36,.45), 0 0 26px -10px rgba(245,158,11,.4);
}
.pulse-dot{ position:relative; }
.pulse-dot::before{
    content:''; position:absolute; inset:0; border-radius:9999px;
    background:inherit;
    animation:ping-soft 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping-soft{
    0%{ transform:scale(1); opacity:.8; }
    80%,100%{ transform:scale(2.6); opacity:0; }
}

/* ---------- Tombol ---------- */
.btn-shine{ position:relative; overflow:hidden; }
.btn-shine::after{
    content:''; position:absolute; top:0; left:-80%;
    width:45%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform:skewX(-20deg);
    transition:left .55s ease;
    pointer-events:none;
}
.btn-shine:hover::after{ left:135%; }
.btn-glow:hover{ box-shadow:0 0 30px -8px rgba(251,191,36,.55); border-color:rgba(251,191,36,.6); }

/* ---------- Gambar / media ---------- */
.media-frame{ position:relative; }
.media-frame img{ transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.media-frame:hover img{ transform:scale(1.06); }
.product-card:hover .media-frame img{ transform:scale(1.06); }
.media-frame::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(12,10,9,.55) 0%, transparent 45%);
    opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.media-frame:hover::after,
.product-card:hover .media-frame::after{ opacity:1; }
.media-zoom{
    position:absolute; right:.75rem; bottom:.75rem; z-index:1;
    width:2.25rem; height:2.25rem; border-radius:9999px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(251,191,36,.95); color:#0c0a09;
    opacity:0; transform:translateY(10px) scale(.85);
    transition:opacity .3s ease, transform .3s ease;
    pointer-events:none;
    box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
}
.media-frame:hover .media-zoom{ opacity:1; transform:translateY(0) scale(1); }
.chip-float{
    position:absolute; top:.75rem; left:.75rem; z-index:1;
    padding:.3rem .65rem; border-radius:9999px;
    font-size:.625rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    background:rgba(12,10,9,.55); color:#fde68a;
    border:1px solid rgba(255,255,255,.18);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.img-frame{ border-radius:20px; overflow:hidden; box-shadow:0 14px 36px -18px rgba(0,0,0,.45); }
.dark .img-frame{ border:1px solid rgba(255,255,255,.08); }

/* ---------- Product card ---------- */
.product-card:hover h3{ color:#b45309; }
.dark .product-card:hover h3{ color:#fbbf24 !important; }

/* ---------- Step (cara kerja) ---------- */
.step-badge{
    background:linear-gradient(135deg, #fcd34d, #f59e0b);
    color:#0c0a09; font-weight:800;
    box-shadow:0 0 18px -4px rgba(245,158,11,.6);
}
.step-line{ height:1px; background:linear-gradient(90deg, rgba(251,191,36,.55), rgba(251,191,36,.05)); }
.step-card::after{
    content:attr(data-no);
    position:absolute; top:.5rem; right:1rem;
    font-size:2.75rem; font-weight:800; line-height:1;
    color:transparent;
    background:linear-gradient(180deg, rgba(251,191,36,.3), rgba(251,191,36,0));
    -webkit-background-clip:text; background-clip:text;
    pointer-events:none; user-select:none;
}

/* ---------- Testimoni ---------- */
.testimonial-card::before{
    content:'\201C';
    position:absolute; top:.4rem; right:1.1rem;
    font-family:Georgia, 'Times New Roman', serif;
    font-size:3.4rem; line-height:1; font-weight:700;
    color:rgba(251,191,36,.22);
    pointer-events:none;
}
.avatar-ring{ box-shadow:0 0 0 2px rgba(251,191,36,.45), 0 0 0 5px rgba(251,191,36,.12); }

/* ---------- FAQ ---------- */
.faq-item{
    border:1px solid var(--border-subtle);
    background:#fff;
    transition:border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.dark .faq-item{ border-color:rgba(255,255,255,.09); background:rgba(255,255,255,.03); }
.faq-item.is-open{ border-color:rgba(217,119,6,.45); background:#fffbeb; }
.dark .faq-item.is-open{
    border-color:rgba(251,191,36,.45);
    background:rgba(251,191,36,.06);
    box-shadow:0 10px 30px -14px rgba(245,158,11,.25);
}
.dark .faq-item.is-open .faq-toggle{ color:#fbbf24 !important; }
.dark .faq-item.is-open .faq-toggle svg{ color:#fbbf24 !important; }

/* ---------- CTA panel ---------- */
.cta-panel{
    position:relative; overflow:hidden;
    border-radius:24px;
    background:linear-gradient(135deg, #1c1917 0%, #262119 55%, #33240e 100%);
    border:1px solid rgba(251,191,36,.3);
    box-shadow:0 24px 60px -24px rgba(0,0,0,.6);
}
.cta-panel::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:
        radial-gradient(620px 300px at 88% -10%, rgba(245,158,11,.3), transparent 62%),
        radial-gradient(520px 280px at 8% 112%, rgba(245,158,11,.18), transparent 62%);
}
.cta-panel::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
    background-size:22px 22px;
    -webkit-mask-image:radial-gradient(560px 320px at 50% 0%, black, transparent 78%);
    mask-image:radial-gradient(560px 320px at 50% 0%, black, transparent 78%);
}
.cta-panel > *{ position:relative; z-index:1; }

/* ---------- Footer ---------- */
.footer-divider{
    border-top:1px solid transparent;
    border-image:linear-gradient(90deg, transparent, rgba(251,191,36,.55), transparent) 1;
}
.footer-heading{ position:relative; padding-bottom:.55rem; }
.footer-heading::after{
    content:''; position:absolute; left:0; bottom:0;
    width:1.6rem; height:2px; border-radius:2px;
    background:linear-gradient(90deg, #fbbf24, rgba(251,191,36,0));
}
.social-btn{
    border:1px solid rgba(255,255,255,.12);
    transition:background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.social-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 24px -10px rgba(245,158,11,.65);
}

/* ---------- Float badge ---------- */
.float-badge{
    background:rgba(20,17,16,.8);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid rgba(251,191,36,.35);
    box-shadow:0 18px 44px -18px rgba(0,0,0,.7), 0 0 30px -10px rgba(245,158,11,.5);
}

/* ---------- Bento gallery (halaman galeri) ---------- */
.bento-card{
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .35s ease;
}
.bento-card:hover{
    border-color:rgba(251,191,36,.45);
    box-shadow:0 18px 44px -16px rgba(0,0,0,.55), 0 0 34px -14px rgba(245,158,11,.45);
}

/* ---------- Lightbox galeri ---------- */
#gallery-modal-image{
    border-radius:14px;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(251,191,36,.25);
}
#gallery-modal-caption{ text-shadow:0 2px 12px rgba(0,0,0,.6); }

/* ---------- Contact tint variants (glass card warna) ----------
   Tint super tipis + border warna; hover: glow senada. Tetap satu keluarga
   glass, cuma aksennya beda biar nggak monoton. */
.glass-card.tint-emerald{ background:rgba(16,185,129,.06); border-color:rgba(52,211,153,.26); }
.glass-card.tint-sky{ background:rgba(56,189,248,.06); border-color:rgba(56,189,248,.26); }
.glass-card.tint-amber{ background:rgba(251,191,36,.07); border-color:rgba(251,191,36,.32); }

.glass-card.tint-emerald:hover{
    background:rgba(16,185,129,.11); border-color:rgba(52,211,153,.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px -18px rgba(0,0,0,.65), 0 0 38px -12px rgba(16,185,129,.5);
}
.glass-card.tint-sky:hover{
    background:rgba(56,189,248,.11); border-color:rgba(56,189,248,.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px -18px rgba(0,0,0,.65), 0 0 38px -12px rgba(56,189,248,.5);
}
.glass-card.tint-amber:hover{
    background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px -18px rgba(0,0,0,.65), 0 0 38px -12px rgba(245,158,11,.55);
}

/* Judul kartu ikut senada warna tintnya (dark) */
.dark .glass-card.tint-emerald p.font-semibold{ color:#6ee7b7 !important; }
.dark .glass-card.tint-sky p.font-semibold{ color:#7dd3fc !important; }
.dark .glass-card.tint-amber p.font-semibold{ color:#fcd34d !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
    .pulse-dot::before{ animation:none; }
    .btn-shine::after{ display:none; }
    .lift, .glass-card, .media-frame img, .media-zoom, .feature-card::after, .icon-chip, .stat-icon, .social-btn{ transition:none; }
    #mobile-menu{ animation:none; }
}