/* ============================================
   TOKO MURAH — UI Modern
   Tema: gradasi biru tua × kuning muda × purple
   Responsive: phone / tablet / laptop / desktop
   ============================================ */
:root {
    /* Warna inti yang bisa diubah admin dari Pengaturan (colour grading).
       Fallback = tema default; nilai asli di-inject live dari DB. */
    --brand-primary: #2f6bea;
    --brand-accent: #8b5cf6;
    --brand-bg-light: #e6ecff;
    --brand-bg-dark: #0c142e;
    --dark-1: #0c142e;
    --dark-2: #0e1836;
    --dark-3: #141327;
    --sky-50:  #f2f6ff;
    --sky-100: #e4ecff;
    --sky-200: #c3d4ff;
    --sky-300: #93b4fd;
    --sky-400: #5b8cf7;
    --sky-500: #2f6bea;
    --sky-600: #1d4ed8;
    --sky-700: #16339c;
    --navy-900: #101a4d;
    --navy-950: #0a1135;
    --violet-100: #f1eaff;
    --violet-200: #e0d1ff;
    --violet-300: #c7a9ff;
    --violet-400: #a471fb;
    --violet-500: #8b5cf6;
    --violet-600: #6d28d9;
    --lemon-100: #fff9db;
    --lemon-200: #fff3b0;
    --lemon-300: #ffe980;
    --lemon-400: #ffd94d;
    --lemon-500: #fbbf24;
    --lemon-600: #d97706;
    --ink-900: #131b4d;
    --ink-700: #2c3a7d;
    --ink-500: #56619b;
    --ink-300: #a3aad4;
    --card: rgba(255,255,255,.84);
    --shadow-sm: 0 1px 3px rgba(16,26,77,.08);
    --shadow-md: 0 10px 28px -10px rgba(16,26,77,.18);
    --shadow-lg: 0 24px 60px -22px rgba(29,78,216,.4);
    --radius: 18px;
    /* Gradasi utama: diwarnai dari --brand-primary & --brand-accent (colour grading) */
    --grad-brand: linear-gradient(115deg, var(--sky-700) 0%, var(--brand-primary) 30%, var(--brand-accent) 62%, #ffd94d 100%);
    --grad-brand-2: linear-gradient(135deg, var(--sky-700) 0%, var(--brand-primary) 55%, var(--brand-accent) 100%);
    --grad-soft: linear-gradient(135deg, #e4ecff 0%, #ece2ff 52%, #fff6d6 100%);
    --grad-hero: linear-gradient(160deg, #e2eaff 0%, #f1edff 42%, #fff8e1 100%);
    --grad-text: linear-gradient(100deg, var(--sky-700) 8%, var(--brand-accent) 48%, #d97706 96%);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* Emoji versi terbaru (Unicode 16) & konsisten di semua device —
   memakai Noto Color Emoji dari Google, jadi tidak ada emoji janggal/robek
   (sapu, kotak tua, dll) antar sistem operasi. */
@font-face {
    font-family:"Noto Color Emoji";
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("https://fonts.gstatic.com/s/notocoloremoji/v30/Yq6P-KqIXTD0t4D9z1ESnM3XzUvwWs.swoff2") format("woff2");
    unicode-range: U+1F000-1FAFF, U+1F900-1F9FF, U+2600-27BF, U+2B00-2BFF, U+FE0F, U+1F1E6-1F1FF;
}
:root { --emoji-font: "Noto Color Emoji", "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
body {
    font-family:"Plus Jakarta Sans", "Noto Color Emoji", system-ui, -apple-system, sans-serif;
    color: var(--ink-900);
    min-height:100vh;
    overflow-x:hidden;
    background:
        radial-gradient(1000px 560px at 88% -12%, var(--lemon-200) 0%, transparent 58%),
        radial-gradient(1100px 620px at 50% 118%, var(--violet-200) 0%, transparent 55%),
        radial-gradient(1200px 640px at -12% 8%, var(--sky-200) 0%, transparent 55%),
        linear-gradient(180deg, var(--brand-bg-light) 0%, #fdfefe 55%, #fffbe9 100%);
    background-attachment: fixed;
}
body::before {
    content:""; position:fixed; inset:0; z-index:-1; opacity:.45;
    background-image: radial-gradient(rgba(47,107,234,.10) 1px, transparent 1px);
    background-size: 26px 26px;
}
img { max-width:100%; }
button { touch-action:manipulation; }

/* ---------- EFEK BUTIRAN SALJU ---------- */
#snow-canvas {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 2147483000;
}

/* ---------- LAYOUT ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
section { padding: 72px 0; position: relative; }
.hidden, [hidden] { display: none !important; }

/* ---------- NAVBAR ---------- */
.nav {
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: blur(14px);
    background: rgba(255,255,255,.78);
    border-bottom: 1px solid rgba(2,119,189,.10);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; letter-spacing:-.02em; }
.brand-logo {
    width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
    background: var(--grad-brand-2); color:#fff; font-size:1.15rem;
    box-shadow: var(--shadow-md);
    overflow:hidden;
}
.brand small { display:block; font-size:.62rem; font-weight:600; color:var(--ink-500); letter-spacing:.08em; text-transform:uppercase; }
.nav-links { display:flex; gap:6px; align-items:center; }
.nav-link {
    padding:9px 16px; border-radius:12px; font-size:.9rem; font-weight:600; color:var(--ink-700);
    text-decoration:none; transition:.18s;
}
.nav-link:hover { background:var(--sky-100); color:var(--sky-600); }

/* ---------- BUTTONS ---------- */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 22px; border-radius:14px; border:none; cursor:pointer;
    font-family:inherit; font-size:.92rem; font-weight:700; text-decoration:none;
    transition:.2s; line-height:1;
}
.btn:active { transform: scale(.97); }
.btn-primary { background:var(--grad-brand-2); color:#fff; box-shadow: 0 10px 24px -10px rgba(29,78,216,.65); }
.btn-primary:hover { filter:brightness(1.06); transform:translateY(-1px); }
.btn-ghost { background:rgba(255,255,255,.85); color:var(--ink-700); border:1.5px solid var(--sky-200); }
.btn-ghost:hover { background:var(--sky-100); border-color:var(--sky-300); }
.btn-yellow { background:linear-gradient(120deg, var(--lemon-300), var(--lemon-500)); color:#5c4300; box-shadow:0 10px 24px -10px rgba(245,184,28,.55); }
.btn-danger { background:#fee2e2; color:#b91c1c; }
.btn-danger:hover { background:#fecaca; }
.btn-sm { padding:8px 14px; font-size:.8rem; border-radius:10px; }
.btn-lg { padding:15px 30px; font-size:1rem; border-radius:16px; }
.btn-block { width:100%; }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }

/* ---------- CARDS / GENERIC ---------- */
.card {
    background: var(--card);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.section-eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--lemon-100); color:#8a6400; border:1px solid var(--lemon-200);
    padding:6px 14px; border-radius:999px; font-size:.78rem; font-weight:700;
}
.section-title { font-size:clamp(1.6rem,3.4vw,2.3rem); font-weight:800; letter-spacing:-.03em; margin:14px 0 8px; }
.section-sub { color:var(--ink-500); font-size:.98rem; max-width:640px; }
.grad-text { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- HERO ---------- */
.hero { padding: 72px 0 56px; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.85); border:1px solid var(--sky-200);
    padding:7px 16px; border-radius:999px; font-size:.8rem; font-weight:700; color:var(--sky-600);
    box-shadow:var(--shadow-sm);
}
.hero-badge .dot { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.18); animation:pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 4px rgba(34,197,94,.18);} 50%{ box-shadow:0 0 0 7px rgba(34,197,94,.05);} }
.hero h1 { font-size:clamp(2rem,5vw,3.4rem); font-weight:800; letter-spacing:-.035em; line-height:1.12; margin:18px 0; }
.hero-sub { color:var(--ink-500); font-size:1.05rem; line-height:1.7; max-width:520px; }
.hero-cta { display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.hero-stats { display:flex; gap:34px; margin-top:38px; flex-wrap:wrap; }
.hero-stat b { font-size:1.45rem; font-weight:800; display:block; letter-spacing:-.02em; }
.hero-stat span { font-size:.8rem; color:var(--ink-500); font-weight:600; }
.hero-art { position:relative; }
.hero-orb { position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }
.hero-orb.a { width:340px; height:340px; background:var(--sky-300); top:-70px; right:-60px; }
.hero-orb.b { width:280px; height:280px; background:var(--lemon-300); bottom:-60px; left:-40px; }
.hero-glass {
    position:relative; border-radius:26px; padding:26px;
    background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.65));
    border:1px solid #fff; box-shadow:var(--shadow-lg);
    animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
.hero-glass-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:10px; flex-wrap:wrap; }
.hero-glass-head b { font-size:.95rem; }
.wallet-chip { display:flex; align-items:center; gap:10px; background:var(--grad-brand-2); color:#fff; padding:10px 16px; border-radius:14px; font-weight:700; font-size:.9rem; box-shadow:var(--shadow-md); }
.hero-demo-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.hero-demo { background:rgba(240,249,255,.9); border:1px solid var(--sky-100); border-radius:16px; padding:14px 10px; text-align:center; transition:.2s; }
.hero-demo:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.hero-demo .ic { font-size:1.5rem; }
.hero-demo b { display:block; font-size:.82rem; margin-top:6px; }
.hero-demo span { font-size:.68rem; color:var(--ink-500); }

/* Gambar utama website (diatur admin via Galeri Media → slot hero_image) */
.hero-image-wrap { position:relative; border-radius:26px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid #fff; }
.hero-image-wrap img { display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }

/* ---------- TICKER ---------- */
.ticker {
    overflow:hidden; white-space:nowrap;
    background:var(--grad-brand-2); color:#fff;
    padding:11px 0; font-size:.86rem; font-weight:600;
    border-radius:14px; box-shadow:var(--shadow-md);
}
.ticker-inner { display:inline-block; padding-left:100%; animation:ticker 22s linear infinite; }
@keyframes ticker { to { transform:translateX(-100%); } }

/* ---------- FEATURES ---------- */
.features-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px; }
.feature {
    padding:24px 20px; border-radius:var(--radius); transition:.25s;
    background:var(--card); border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow-sm);
}
.feature:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--sky-200); }
.feature .ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:1.35rem; background:var(--grad-soft); margin-bottom:14px; }
.feature b { display:block; font-size:.98rem; margin-bottom:6px; }
.feature p { font-size:.84rem; color:var(--ink-500); line-height:1.6; }

/* ---------- STEPS ---------- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px; counter-reset:step; }
.step {
    position:relative; padding:26px 20px 22px; border-radius:var(--radius);
    background:var(--card); border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow-sm);
    transition:.25s;
}
.step:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.step::before {
    counter-increment:step; content:counter(step);
    position:absolute; top:-16px; left:20px;
    width:36px; height:36px; border-radius:12px;
    background:var(--grad-brand-2); color:#fff; font-weight:800; font-size:1rem;
    display:grid; place-items:center; box-shadow:var(--shadow-md);
}
.step b { display:block; margin-bottom:6px; font-size:.95rem; }
.step p { font-size:.83rem; color:var(--ink-500); line-height:1.6; }

/* ---------- BANNER PROMO (landing + halaman user) ---------- */
.promo-strip { margin-top:34px; }
.promo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.promo-card {
    position:relative; display:block; border-radius:20px; overflow:hidden;
    box-shadow:var(--shadow-md); border:1px solid rgba(255,255,255,.9);
    text-decoration:none; transition:.25s; background:var(--grad-soft);
}
.promo-card:hover { transform:translateY(-4px) scale(1.01); box-shadow:var(--shadow-lg); }
.promo-card img { display:block; width:100%; aspect-ratio:3/1.4; object-fit:cover; }
.promo-card .promo-caption {
    position:absolute; left:0; right:0; bottom:0;
    padding:26px 16px 12px; color:#fff; font-weight:700; font-size:.88rem;
    background:linear-gradient(180deg, transparent, rgba(7,40,66,.72));
    text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.promo-card.no-img img { display:none; }
.promo-card.no-img { aspect-ratio:auto; padding:22px; font-weight:800; color:var(--sky-600); }


/* ---------- CAROUSEL BANNER PROMO (landing + halaman user) ---------- */
/* Slider 1 slide terlihat, geser otomatis tiap 4 detik, dot indicators di bawah. */
.promo-carousel { position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-md); background:var(--grad-soft); }
.promo-track { display:flex; transition:transform .55s cubic-bezier(.4,0,.2,1); }
.promo-slide { position:relative; flex:0 0 100%; display:block; text-decoration:none; }
.promo-slide img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.promo-slide .promo-caption {
    position:absolute; left:0; right:0; bottom:0; padding:26px 16px 12px;
    color:#fff; font-weight:700; font-size:.88rem;
    background:linear-gradient(180deg, transparent, rgba(7,40,66,.72));
    text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.promo-dots { display:flex; justify-content:center; gap:7px; padding:12px 0 4px; }
.promo-dot {
    width:9px; height:9px; border-radius:999px; border:none; padding:0; cursor:pointer;
    background:rgba(120,140,170,.45); transition:all .25s;
}
.promo-dot:hover { background:rgba(120,140,170,.75); }
.promo-dot.active { width:26px; background:var(--grad-brand-2); box-shadow:0 2px 8px rgba(47,107,234,.45); }
html[data-theme="dark"] .promo-dot { background:rgba(255,255,255,.22); }
html[data-theme="dark"] .promo-dot:hover { background:rgba(255,255,255,.4); }
@media (max-width:560px) { .promo-dot { width:8px; height:8px; } .promo-dot.active { width:20px; } }

/* ---------- GALERI MEDIA (landing) ---------- */
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:30px; }
.gallery-card {
    border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.9);
    box-shadow:var(--shadow-sm); transition:.22s; background:var(--grad-soft); position:relative;
}
.gallery-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.gallery-card img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; }
.gallery-card .g-title {
    position:absolute; left:0; right:0; bottom:0; padding:20px 10px 8px;
    color:#fff; font-size:.74rem; font-weight:700; text-align:center;
    background:linear-gradient(180deg, transparent, rgba(7,40,66,.7));
    text-shadow:0 1px 4px rgba(0,0,0,.45);
}

/* ---------- CATATAN TRANSPARAN ---------- */
.notes-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px; }
.note-glass {
    border-radius:var(--radius); padding:24px;
    background:linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
    border:1px solid rgba(255,255,255,.75);
    backdrop-filter: blur(12px);
    box-shadow:var(--shadow-sm);
}
.note-glass.accent { background:linear-gradient(150deg, rgba(189,232,255,.55), rgba(255,246,214,.55)); }
.note-glass h3 { display:flex; align-items:center; gap:10px; font-size:1rem; margin-bottom:12px; }
.note-glass h3 .ic { width:34px; height:34px; border-radius:10px; background:var(--grad-soft); display:grid; place-items:center; font-size:1rem; }
.note-glass p { font-size:.86rem; color:var(--ink-700); line-height:1.75; }
.note-pre { white-space:pre-line; }

/* ---------- KONTAK ---------- */
.contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
.contact-card {
    display:flex; align-items:center; gap:14px; padding:18px; text-decoration:none;
    border-radius:var(--radius); transition:.22s; color:var(--ink-900);
    background:var(--card); border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow-sm);
}
.contact-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.contact-logo { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; flex-shrink:0; }
.contact-logo svg { width:24px; height:24px; fill:#fff; }
.contact-logo.wa { background:linear-gradient(135deg,#25d366,#128c7e); box-shadow:0 8px 18px -8px rgba(18,140,126,.7); }
.contact-logo.tg { background:linear-gradient(135deg,#41bce7,#1c7fb8); box-shadow:0 8px 18px -8px rgba(28,127,184,.7); }
.contact-logo.em { background:linear-gradient(135deg,var(--lemon-300),var(--lemon-500)); box-shadow:0 8px 18px -8px rgba(245,184,28,.6); }
.contact-logo.em svg { fill:#5c4300; }
.contact-card b { display:block; font-size:.95rem; }
.contact-card span { font-size:.8rem; color:var(--ink-500); }
.contact-label { display:inline-flex; align-items:center; margin-left:auto; font-size:.72rem; font-weight:700; padding:5px 10px; border-radius:999px; white-space:nowrap; }
.contact-card.wa .contact-label { background:#dcfce7; color:#15803d; }
.contact-card.tg .contact-label { background:#e0f2fe; color:#0369a1; }
.contact-card.em .contact-label { background:var(--lemon-100); color:#8a6400; }

/* ---------- FOOTER ---------- */
footer { border-top:1px solid rgba(2,119,189,.10); padding:36px 0 44px; margin-top:30px; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.footer-inner p { font-size:.84rem; color:var(--ink-500); }
.footer-links { display:flex; gap:16px; flex-wrap:wrap; }
.footer-links a { font-size:.84rem; color:var(--ink-700); text-decoration:none; font-weight:600; }
.footer-links a:hover { color:var(--sky-600); }

/* ============================================
   APP CUSTOMER
   ============================================ */
#app { max-width:1200px; margin:0 auto; padding:24px 20px 90px; }
.app-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:24px; flex-wrap:wrap; }

/* ---------- MENU SLIDE (dashboard user & admin) ----------
   Satu panel bersama: isinya dirender sesuai view aktif (customer/admin).
   Terinspirasi menu samping sederhana: tombol ☰, overlay, slide dari kiri. */
.menu-overlay {
    position:fixed; inset:0; z-index:998;
    background:rgba(7,12,32,.45); backdrop-filter:blur(2px);
    opacity:0; visibility:hidden; border:none; padding:0; cursor:pointer;
    transition:opacity .28s ease, visibility .28s ease;
}
.menu-overlay.active { opacity:1; visibility:visible; }
body.menu-open { overflow:hidden; }
.side-menu {
    position:fixed; top:0; left:0; bottom:0; z-index:999;
    width:250px; max-width:86vw;
    display:flex; flex-direction:column;
    padding:14px; overflow-y:auto;
    background:#fff;
    border-right:1px solid #eee;
    border-radius:0 20px 20px 0;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transform:translateX(-105%); visibility:hidden;
    transition:transform .3s cubic-bezier(.4,0,.2,1), visibility .3s;
}
.side-menu.active { transform:translateX(0); visibility:visible; }
.side-menu-head {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:2px 4px 16px; border-bottom:1px solid var(--sky-100); margin-bottom:14px;
}
.side-menu-close {
    width:34px; height:34px; flex-shrink:0; border:none; border-radius:10px;
    background:var(--sky-50); color:var(--ink-700); font-size:1rem; cursor:pointer; transition:.15s;
}
.side-menu-close:hover { background:var(--sky-100); }
.side-menu-items { display:flex; flex-direction:column; gap:4px; }
.menu-item {
    display:flex; align-items:center; gap:14px; width:100%;
    padding:13px 15px; margin:4px 0;
    border:none; border-radius:13px; background:transparent;
    color:var(--ink-500); font-family:inherit; font-size:14px; font-weight:500;
    text-align:left; cursor:pointer; transition:.2s ease;
}
.menu-item:hover { background:#f5f7fa; color:var(--ink-900); transform:translateX(2px); }
.menu-item.active { background:#111; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.12); }
.menu-item .menu-ic { width:24px; flex-shrink:0; display:grid; place-items:center; }
/* Ikon Lucide (vektor) — ukuran & ketebalan sesuai desain menu */
.menu-item .menu-ic svg { width:19px; height:19px; stroke-width:1.8; display:block; }
.menu-item-sm { padding:11px 15px; font-size:13px; font-weight:500; }
/* Logo toko kustom mengisi kotak brand (menu, header, footer) */
.brand-logo img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.menu-item-danger { color:#b91c1c; }
.menu-item-danger:hover { background:#fee2e2; }
.side-menu-foot {
    margin-top:auto; padding-top:14px; border-top:1px solid var(--sky-100);
    display:flex; flex-direction:column; gap:4px;
}
html[data-theme="dark"] .side-menu {
    background:linear-gradient(180deg, #101a3c 0%, #0d1531 100%);
    border-right-color:rgba(255,255,255,.08);
}
html[data-theme="dark"] .side-menu-close { background:rgba(255,255,255,.08); color:var(--ink-700); }
html[data-theme="dark"] .side-menu-close:hover { background:rgba(255,255,255,.16); }
html[data-theme="dark"] .menu-item { color:var(--ink-300); }
html[data-theme="dark"] .menu-item:hover { background:rgba(255,255,255,.06); color:var(--ink-900); }
html[data-theme="dark"] .menu-item.active { background:#fff; color:#111; }
html[data-theme="dark"] .menu-item-danger { color:#fda4af; }
html[data-theme="dark"] .menu-item-danger:hover { background:rgba(244,63,94,.15); }
html[data-theme="dark"] .side-menu-head { border-bottom-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .side-menu-foot { border-top-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .menu-overlay { background:rgba(2,6,23,.6); }
/* Profil kiri: tile yang bisa ditekan untuk membuka editor profil lengkap */
.profile-tile {
    display:flex; align-items:center; gap:12px; padding:8px 14px 8px 8px;
    border-radius:16px; border:1.5px solid var(--sky-100); background:rgba(255,255,255,.85);
    cursor:pointer; font-family:inherit; text-align:left; transition:.18s;
    box-shadow:var(--shadow-sm);
}
.profile-tile:hover { border-color:var(--sky-300); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.profile-tile:active { transform:translateY(0); }
.profile-meta { display:flex; flex-direction:column; min-width:0; }
.profile-meta b { font-size:.95rem; color:var(--ink-900); line-height:1.3; }
.profile-meta small { font-size:.72rem; font-weight:600; color:var(--ink-500); }
.avatar {
    width:46px; height:46px; border-radius:14px; object-fit:cover;
    background:var(--grad-soft); display:grid; place-items:center;
    font-weight:800; color:var(--sky-600); font-size:1.05rem; overflow:hidden;
    border:2px solid #fff; box-shadow:var(--shadow-sm); flex-shrink:0;
}
.avatar img { width:100%; height:100%; object-fit:cover; }
/* Aksi kanan-atas: tema, keluar, muat ulang (refresh di paling bawah/kanan) */
.head-actions { display:flex; align-items:center; gap:8px; }
/* Tombol tema terang/gelap — bulan saat terang, matahari saat gelap */
.btn-theme { position:relative; width:38px; height:34px; padding:0; overflow:hidden; }
.btn-theme .theme-ic { font-size:1.05rem; }
.btn-theme .theme-ic { position:absolute; inset:0; display:grid; place-items:center; transition:opacity .2s, transform .25s; }
.btn-theme .theme-ic-sun { opacity:0; transform:rotate(-60deg) scale(.6); }
html[data-theme="dark"] .btn-theme .theme-ic-sun { opacity:1; transform:rotate(0deg) scale(1); }
html[data-theme="dark"] .btn-theme .theme-ic-moon { opacity:0; transform:rotate(60deg) scale(.6); }
/* Pemisah visual antar bagian katalog: Operator vs Variasi Produk */
.pv-section-head {
    display:flex; align-items:center; gap:10px;
    margin:20px 0 4px; font-size:.82rem; font-weight:800;
    color:var(--sky-700); text-transform:uppercase; letter-spacing:.05em;
}
.pv-section-head::after { content:""; flex:1; height:1px; background:var(--sky-100); }
/* Grafik transaksi customer (canvas) + chip rentang hari */
.chart-panel { padding:20px 22px; }
.user-chart { display:block; width:100%; height:300px; }
.chart-note { margin-top:10px; font-size:.78rem; color:var(--ink-500); }
.chart-range { display:flex; gap:6px; }
.chart-range .chip { padding:7px 14px; font-size:.78rem; }
html[data-theme="dark"] .chart-note { color:var(--ink-500); }

/* Tab bar lama dihapus — navigasi via menu slide ☰ */

.shop-layout { display:grid; grid-template-columns:250px 1fr; gap:20px; align-items:start; }
.cat-panel { padding:18px; position:sticky; top:90px; }
.cat-panel h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-500); margin-bottom:12px; }
.cat-item {
    display:flex; align-items:center; gap:10px; width:100%;
    padding:10px 12px; border-radius:12px; border:none; background:transparent;
    font-family:inherit; font-weight:600; font-size:.88rem; color:var(--ink-700);
    cursor:pointer; transition:.15s; text-align:left;
}
.cat-item:hover { background:var(--sky-50); }
.cat-item.active { background:var(--grad-soft); color:var(--sky-600); }
.cat-item .em { font-size:1.1rem; }
.cat-count { margin-left:auto; font-size:.72rem; background:#fff; border:1px solid var(--sky-100); padding:2px 9px; border-radius:999px; color:var(--ink-500); }

.search-box { position:relative; margin-bottom:16px; }
.search-box input {
    width:100%; padding:13px 16px 13px 44px; border-radius:14px;
    border:1.5px solid var(--sky-200); font-family:inherit; font-size:.92rem;
    background:rgba(255,255,255,.85); outline:none; transition:.2s;
}
.search-box input:focus { border-color:var(--sky-400); box-shadow:0 0 0 4px rgba(47,107,234,.14); }
.search-box .ic { position:absolute; left:15px; top:50%; transform:translateY(-50%); opacity:.5; }

.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.product-card {
    background:var(--card); border:1.5px solid rgba(255,255,255,.9);
    border-radius:var(--radius); padding:16px; cursor:pointer; transition:.2s;
    box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px;
}
.product-card:hover { transform:translateY(-4px); border-color:var(--sky-300); box-shadow:var(--shadow-lg); }
.product-card.selected { border-color:var(--sky-500); box-shadow:0 0 0 3px rgba(139,92,246,.20); }
.product-thumb { height:92px; border-radius:12px; display:grid; place-items:center; background:var(--grad-soft); font-size:1.9rem; overflow:hidden; }
.product-thumb img { width:100%; height:100%; object-fit:cover; }
.product-card b { font-size:.85rem; line-height:1.35; min-height:2.4em; }
.product-price { font-weight:800; color:var(--sky-600); font-size:1rem; }

.order-panel { margin-top:20px; padding:22px; }
.order-panel h3 { font-size:1.05rem; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:.8rem; font-weight:700; color:var(--ink-700); margin-bottom:7px; }
.field input, .field select, .field textarea {
    width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--sky-200);
    font-family:inherit; font-size:.92rem; background:rgba(255,255,255,.9);
    outline:none; transition:.2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--sky-400); box-shadow:0 0 0 4px rgba(47,107,234,.14); }
.field .hint { font-size:.74rem; color:var(--ink-500); margin-top:5px; }
.order-summary { display:flex; justify-content:space-between; align-items:center; background:var(--grad-soft); border-radius:14px; padding:14px 16px; margin:16px 0; }
.order-summary b { font-size:1.1rem; color:var(--sky-600); }

.deposit-quick { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.quick-amt {
    padding:13px 6px; border-radius:12px; border:1.5px solid var(--sky-200); background:#fff;
    font-family:inherit; font-weight:700; font-size:.88rem; color:var(--ink-700); cursor:pointer; transition:.18s;
}
.quick-amt:hover { background:var(--sky-50); }
.quick-amt.active { background:var(--grad-brand-2); color:#fff; border-color:transparent; }
.method-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.method-item {
    padding:13px; border-radius:12px; border:1.5px solid var(--sky-200); background:#fff;
    cursor:pointer; text-align:center; transition:.18s;
}
.method-item:hover { background:var(--sky-50); }
.method-item.active { border-color:var(--sky-500); background:var(--sky-50); box-shadow:0 0 0 3px rgba(47,107,234,.16); }
.method-item .em { font-size:1.4rem; display:block; margin-bottom:4px; }
.method-item b { font-size:.8rem; display:block; }
.pay-box { margin-top:18px; padding:20px; border-radius:16px; background:var(--grad-soft); text-align:center; }
.pay-box img.qr { width:210px; height:210px; border-radius:14px; background:#fff; padding:8px; box-shadow:var(--shadow-md); }
.pay-num {
    font-family:ui-monospace,monospace; font-size:1.05rem; font-weight:700; letter-spacing:.05em;
    background:#fff; padding:10px 16px; border-radius:10px; display:inline-block; margin:8px 0;
    border:1px dashed var(--sky-300);
}
.pay-rows { text-align:left; margin-top:12px; font-size:.86rem; }
.pay-rows div { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px dashed rgba(2,132,199,.15); }
.pay-rows div:last-child { border:none; }
.pay-rows span { color:var(--ink-500); }
.pay-rows b { text-align:right; }

.tx-list { display:flex; flex-direction:column; gap:10px; }
.tx-item {
    display:flex; align-items:center; gap:14px; padding:15px 16px;
    background:var(--card); border:1px solid rgba(255,255,255,.9);
    border-radius:16px; box-shadow:var(--shadow-sm); cursor:pointer; transition:.18s;
    text-align:left; width:100%; border-left:4px solid var(--sky-300);
    font-family:inherit;
}
.tx-item:hover { transform:translateX(4px); box-shadow:var(--shadow-md); }
.tx-item.deposit { border-left-color:var(--lemon-400); }
.tx-icon { width:42px; height:42px; border-radius:12px; background:var(--grad-soft); display:grid; place-items:center; font-size:1.15rem; flex-shrink:0; overflow:hidden; }
.tx-icon img { width:100%; height:100%; object-fit:cover; }
.tx-main { flex:1; min-width:0; }
.tx-main b { display:block; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tx-main span { font-size:.75rem; color:var(--ink-500); }
.tx-side { text-align:right; }
.tx-side b { display:block; font-size:.92rem; }
.badge { display:inline-block; padding:4px 11px; border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.03em; }
.badge.processing { background:#fef9c3; color:#a16207; }
.badge.success, .badge.approved, .badge.paid { background:#dcfce7; color:#15803d; }
.badge.failed, .badge.rejected { background:#fee2e2; color:#b91c1c; }
.badge.expired { background:#e5e7eb; color:#4b5563; }
.badge.pending { background:#dbeafe; color:#1d4ed8; }

.modal-overlay {
    position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px;
    background:rgba(11,34,57,.45); backdrop-filter:blur(6px); animation:fadeIn .2s;
}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.modal {
    width:100%; max-width:460px; max-height:88vh; overflow-y:auto;
    background:#fff; border-radius:22px; padding:26px; position:relative;
    box-shadow:var(--shadow-lg); animation:pop .25s cubic-bezier(.2,1.2,.4,1);
}
@keyframes pop { from{ transform:scale(.92); opacity:0;} to{ transform:scale(1); opacity:1;} }
.modal-close {
    position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:10px;
    border:none; background:var(--sky-50); color:var(--ink-700); font-size:1rem; cursor:pointer;
}
.modal h3 { font-size:1.1rem; margin-bottom:4px; }
.modal .modal-sub { font-size:.8rem; color:var(--ink-500); margin-bottom:18px; }
.detail-rows div { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px dashed rgba(2,132,199,.15); font-size:.86rem; }
.detail-rows div:last-child { border:none; }
.detail-rows span { color:var(--ink-500); flex-shrink:0; }
.detail-rows b { text-align:right; word-break:break-word; }

.auth-wrap { min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth-card { width:100%; max-width:420px; padding:34px 30px; border-radius:24px; }
.auth-card h1 { font-size:1.5rem; letter-spacing:-.02em; margin-bottom:6px; }
.auth-card .sub { font-size:.88rem; color:var(--ink-500); margin-bottom:24px; }
.auth-switch { text-align:center; font-size:.85rem; color:var(--ink-500); margin-top:18px; }
.auth-switch a { color:var(--sky-600); font-weight:700; text-decoration:none; }
.alert { padding:12px 15px; border-radius:12px; font-size:.84rem; font-weight:600; margin-bottom:14px; }
.alert.err { background:#fee2e2; color:#b91c1c; }
.alert.ok { background:#dcfce7; color:#15803d; }

/* ============================================
   ADMIN
   ============================================ */
.admin-layout { max-width:1200px; margin:0 auto; padding:0 20px 90px; }
#admin .app-head { max-width:1200px; margin-left:auto; margin-right:auto; padding:0 20px; }
.admin-content { min-width:0; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.stat-card { padding:20px; border-radius:18px; background:var(--card); border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow-sm); }
.stat-card .ic { width:40px; height:40px; border-radius:12px; background:var(--grad-soft); display:grid; place-items:center; font-size:1.1rem; margin-bottom:12px; }
.stat-card b { font-size:1.35rem; font-weight:800; display:block; letter-spacing:-.02em; }
.stat-card span { font-size:.76rem; color:var(--ink-500); font-weight:600; }
.panel { padding:22px; margin-bottom:18px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.panel-head h3 { font-size:1.05rem; }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:.86rem; }
th { text-align:left; padding:10px 12px; color:var(--ink-500); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; border-bottom:1.5px solid var(--sky-100); white-space:nowrap; }
td { padding:11px 12px; border-bottom:1px solid var(--sky-50); vertical-align:middle; }
tr:hover td { background:rgba(240,249,255,.6); }
.p-thumb { width:44px; height:44px; border-radius:10px; object-fit:cover; background:var(--grad-soft); display:grid; place-items:center; font-size:1.2rem; overflow:hidden; }
.p-thumb img { width:100%; height:100%; object-fit:cover; }
.photo-picker { display:flex; gap:14px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.photo-preview {
    width:74px; height:74px; border-radius:14px; background:var(--grad-soft);
    display:grid; place-items:center; font-size:1.5rem; overflow:hidden; border:2px dashed var(--sky-300);
}
.photo-preview img { width:100%; height:100%; object-fit:cover; }
.photo-picker .hint { font-size:.74rem; color:var(--ink-500); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.form-grid .full { grid-column:1/-1; }
.check-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.check-item { display:flex; align-items:center; gap:9px; padding:12px; border:1.5px solid var(--sky-200); border-radius:12px; cursor:pointer; font-size:.85rem; font-weight:600; }
.check-item input { accent-color:var(--sky-500); width:16px; height:16px; }

/* ---- Konfigurasi sinkronisasi katalog ---- */
.sync-cat-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:9px; max-height:44vh; overflow-y:auto; padding:2px; margin-top:8px; }
.sync-cat-list .check-item { align-items:flex-start; }
.sync-cat-list .check-item span { display:block; line-height:1.45; }
.sync-cat-list .check-item small { font-weight:500; }
@media (max-width: 640px) { .sync-cat-list { grid-template-columns:1fr 1fr; max-height:52vh; } }
@media (max-width: 420px) { .sync-cat-list { grid-template-columns:1fr; } }

/* Grid kelola konten (banner) & galeri media (admin) */
.content-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.content-tile {
    border-radius:16px; overflow:hidden; background:var(--grad-soft);
    border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow-sm);
    display:flex; flex-direction:column;
}
.content-tile img { width:100%; aspect-ratio:3/1.4; object-fit:cover; display:block; }
.content-tile.gallery-tile img { aspect-ratio:1/1; }
.content-tile .tile-body { padding:12px; display:flex; flex-direction:column; gap:8px; flex:1; }
.content-tile .tile-body b { font-size:.86rem; line-height:1.35; }
.content-tile .tile-meta { font-size:.7rem; color:var(--ink-500); font-weight:600; }
.content-tile .tile-actions { display:flex; gap:6px; margin-top:auto; flex-wrap:wrap; }

#toast-zone { position:fixed; bottom:22px; right:22px; z-index:2000; display:flex; flex-direction:column; gap:10px; max-width:calc(100vw - 40px); }
.toast {
    padding:13px 18px; border-radius:14px; color:#fff; font-size:.86rem; font-weight:600;
    box-shadow:var(--shadow-lg); animation:toastIn .3s cubic-bezier(.2,1.2,.4,1); max-width:340px;
}
.toast.ok { background:linear-gradient(120deg,#10b981,#059669); }
.toast.err { background:linear-gradient(120deg,#f43f5e,#e11d48); }
@keyframes toastIn { from{ transform:translateY(14px); opacity:0;} to{ transform:translateY(0); opacity:1;} }

/* ============================================
   RESPONSIVE — semua perangkat
   ============================================ */

/* Laptop kecil / tablet landscape */
@media (max-width: 1100px) {
    .features-grid { grid-template-columns:repeat(2,1fr); }
    .gallery-grid { grid-template-columns:repeat(3,1fr); }
    .content-grid { grid-template-columns:repeat(2,1fr); }
}

/* Tablet portrait */
@media (max-width: 960px) {
    .hero { padding:48px 0 40px; }
    .hero-grid { grid-template-columns:1fr; gap:30px; }
    .hero-stats { gap:22px; }
    .steps { grid-template-columns:repeat(2,1fr); }
    .shop-layout { grid-template-columns:1fr; }
    .cat-panel { position:static; }
    .notes-grid { grid-template-columns:1fr; }
    .contact-grid { grid-template-columns:1fr; }
    .stat-grid { grid-template-columns:repeat(2,1fr); }
    .promo-grid { grid-template-columns:1fr; }
    .product-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}

/* Phone besar */
@media (max-width: 620px) {
    .wrap { padding:0 14px; }
    #app { padding:16px 14px 90px; }
    section { padding:44px 0; }
    .nav-inner { height:60px; }
    .brand { font-size:1rem; }
    .brand-logo { width:34px; height:34px; font-size:1rem; }
    .nav-links { gap:2px; }
    .nav-link { padding:8px 8px; font-size:.78rem; }
    .features-grid, .steps { grid-template-columns:1fr 1fr; gap:12px; }
    .deposit-quick, .method-grid { grid-template-columns:1fr 1fr; }
    .form-grid { grid-template-columns:1fr; }
    .check-grid { grid-template-columns:1fr 1fr; }
    .product-grid { grid-template-columns:1fr 1fr; }
    .gallery-grid { grid-template-columns:repeat(2,1fr); }
    .hero-stats { gap:16px; }
    .hero-stat b { font-size:1.2rem; }
    .profile-tile { padding:6px 10px 6px 6px; gap:10px; }
    .avatar { width:40px; height:40px; border-radius:12px; }
    .profile-meta small { display:none; }
    .head-actions { gap:6px; }
    .order-panel, .panel { padding:16px; }
    .stat-grid { gap:10px; }
    .stat-card { padding:14px; }
    .stat-card b { font-size:1.1rem; }
    .pay-box img.qr { width:170px; height:170px; }
    .contact-card { flex-wrap:wrap; }
    .contact-label { margin-left:0; width:100%; justify-content:center; }
    .modal { padding:20px 16px; }
    #toast-zone { left:14px; right:14px; bottom:14px; }
    .toast { max-width:100%; }
}

/* Phone kecil */
@media (max-width: 400px) {
    .product-grid { grid-template-columns:1fr; }
    .features-grid, .steps { grid-template-columns:1fr; }
    .check-grid { grid-template-columns:1fr; }
    .nav-link { display:none; }
    .hero-cta .btn { width:100%; }
}

/* ============ MEDIA CARD & SLOT BADGE (admin: kelola konten & galeri) ============ */
.media-card { position:relative; background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s ease,box-shadow .25s ease; display:flex; flex-direction:column; }
.media-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.media-card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:linear-gradient(135deg,var(--sky-100),var(--lemon-100)); }
.media-card.wide img { aspect-ratio:21/9; }
.media-title { position:absolute; bottom:52px; left:12px; right:12px; color:#fff; font-weight:700; font-size:.85rem; text-shadow:0 2px 8px rgba(15,23,42,.65); pointer-events:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-actions { display:flex; align-items:center; gap:6px; padding:10px 12px; flex-wrap:wrap; }
.slot-badge { display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:700; padding:4px 10px; border-radius:999px; background:linear-gradient(135deg,var(--sky-100),var(--lemon-100)); color:var(--sky-700); margin-right:auto; }
.slot-badge.off { background:#fee2e2; color:#b91c1c; }


/* ---------- POPUP GAMBAR UTAMA WEBSITE (foto informasi dari admin) ---------- */
.hero-popup { border-radius:18px; overflow:hidden; box-shadow:var(--shadow-md); background:var(--grad-soft); }
.hero-popup img { display:block; width:100%; max-height:60vh; object-fit:contain; background:#fff; }
.hero-popup-title { margin-top:12px; font-weight:700; color:var(--ink-700); text-align:center; }
/* Kartu media admin: klik = pratinjau besar */
.admin-hero-card img { cursor:zoom-in; }
/* Kartu Gambar Utama: foto tampil UTUH mengikuti rasio aslinya (maks 420px),
   tidak lagi dipaksa strip 21/9 sehingga foto potre tetap terlihat jelas. */
.admin-hero-card img { aspect-ratio:auto !important; max-height:420px; width:100%; object-fit:contain !important; background:#fff; }
/* Ikon SVG lucide di kartu statistik user (cth. wallet untuk Saldo Aktif) */
.stat-ic-lucide { color:var(--sky-600); }
.stat-ic-lucide svg { width:22px; height:22px; }
/* ---- TEMA IKON DASHBOARD (Lucide, kategori sama dengan menu sidebar) ---- */
/* Kartu statistik: ikon vektor berwarna brand, ukuran pas di kotak gradient */
.stat-card .ic svg, .stat-card .ic [data-lucide] { width:22px; height:22px; }
.stat-card .ic { color:var(--sky-600); }
/* Judul panel (h3/h4) & daftar transaksi: ikon mengikuti warna teks */
.panel h3 svg, .panel h3 [data-lucide], h3 svg, h3 [data-lucide],
h4 svg, h4 [data-lucide] { width:19px; height:19px; vertical-align:-3px; }
.tx-icon svg, .tx-icon [data-lucide] { width:20px; height:20px; color:var(--sky-600); }
/* Modal: judul & ikon info */
.modal h3 svg, .modal h3 [data-lucide] { width:19px; height:19px; vertical-align:-3px; }
/* Dark mode: ikon tetap kontras */
html[data-theme="dark"] .stat-card .ic { color:var(--sky-600); }
.media-card img.img-error { visibility:hidden; }
.media-card img.img-error::before { content:"⚠️ Gambar tidak dapat dimuat"; visibility:visible; display:grid; place-items:center; aspect-ratio:16/9; font-size:.8rem; color:var(--ink-500); }
/* Grid media admin (banner & semua media): tile persegi agar foto potret
   tidak terpotong ekstrem (penyebab "foto tidak terlihat" di galeri admin) */
.admin-media-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.admin-media-grid .media-card img { aspect-ratio:1/1; object-fit:cover; }
@media (max-width:640px) { .admin-media-grid { grid-template-columns:repeat(2,1fr); } }

/* Colour Grading (Pengaturan admin): baris picker + preset */
.color-row { display:flex; align-items:center; gap:8px; }
.color-row input[type="color"] { width:46px; height:38px; padding:2px; border:1.5px solid var(--sky-200); border-radius:10px; background:#fff; cursor:pointer; }
.color-row input[type="text"], .color-row input:not([type]) { flex:1; min-width:0; }
.preset-row { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 6px; }
/* Teks di atas tombol/chip warna utama mengikuti kontras warna pilihan admin */
.btn-primary, .chip.active, .pv-chip.active, .quick-amt.active, .ticker, .brand-logo { color: var(--on-primary, #fff); }



/* Layar sangat besar (desktop lebar / 4K) */
@media (min-width: 1600px) {
    .wrap { max-width:1480px; }
    .hero h1 { font-size:3.2rem; }
    .notes-grid, .features-grid { grid-template-columns:repeat(4,1fr); }
    .product-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
    .promo-grid { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
}

/* Aksesibilitas: hormati preferensi gerak minimal */
@media (prefers-reduced-motion: reduce) {
    .ticker-inner, .hero-glass { animation:none; }
    * { transition-duration:.01ms !important; }
}

/* ---- Ikon SVG vektor (kategori, metode bayar, hero) ---- */
.hero-demo .ic svg, .cat-svg svg, .method-svg svg { width:100%; height:100%; display:block; }
.hero-demo .ic { width:34px; height:34px; margin:0 auto; color:var(--sky-600); }
.hero-demo .ic svg { stroke-width:1.8; }
.cat-svg {
  width:26px; height:26px; flex:0 0 26px; border-radius:9px;
  display:inline-grid; place-items:center;
  background:var(--grad-soft); color:var(--sky-600); transition:.15s;
}
.cat-item.active .cat-svg { color:#fff; background:linear-gradient(120deg,var(--sky-500),var(--lemon-500)); }
.cat-item:hover .cat-svg { transform:scale(1.08); }
.method-svg { width:30px; height:30px; margin:0 auto 6px; color:var(--sky-600); display:block; }
.method-item.active .method-svg { color:var(--sky-500); }
/* Ikon kategori lebih besar saat jadi thumbnail produk (kartu user & tabel admin) */
.product-thumb .cat-svg, .p-thumb .cat-svg { width:42px; height:42px; border-radius:12px; }

/* ---- Chips aktivasi produk (Kategori → Operator → Jenis) ---- */
.chip-wrap { display:flex; flex-wrap:wrap; gap:10px; }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px; border-radius:14px; border:1.5px solid var(--sky-200);
  background:rgba(255,255,255,.9); cursor:pointer; font-family:inherit;
  font-size:.86rem; font-weight:700; color:var(--ink-700); transition:.18s;
}
.chip small { font-weight:700; color:var(--ink-500); font-size:.72rem; }
.chip:hover { border-color:var(--violet-300); background:var(--violet-100); transform:translateY(-1px); }
.chip.active {
  background:var(--grad-brand-2); color:#fff; border-color:transparent;
  box-shadow:0 8px 20px -8px rgba(29,78,216,.55);
}
.chip.active small { color:rgba(255,255,255,.85); }
.chip.static { cursor:default; flex-wrap:wrap; }
/* Dua tombol aksi aktivasi (tampilkan / sembunyikan) */
.activation-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.chip.static:hover { transform:none; background:rgba(255,255,255,.9); border-color:var(--sky-200); }











/* ============================================
   TAMPILAN KATALOG MENGIKUTI API PROVIDER
   Kategori (tab) → Operator (chip + logo) → Jenis → Info → Daftar produk
   ============================================ */
.pv-tabs { display:flex; flex-wrap:wrap; gap:4px 6px; margin-bottom:16px; padding:6px; background:rgba(255,255,255,.7); border:1px solid var(--sky-100); border-radius:14px; }
.pv-tab { padding:9px 14px; border-radius:10px; font-size:.86rem; font-weight:600; color:var(--ink-700); background:transparent; border:0; cursor:pointer; transition:.15s; }
.pv-tab:hover { background:var(--sky-50); }
.pv-tab.active { background:#fff; color:var(--sky-600); box-shadow:inset 0 -2px 0 var(--sky-600), var(--shadow-sm); }
.pv-chips { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.pv-chip { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1.5px solid var(--sky-100); background:rgba(255,255,255,.9); font-size:.88rem; font-weight:600; color:var(--ink-700); cursor:pointer; transition:.15s; text-align:left; }
.pv-chip:hover { border-color:var(--sky-300); background:var(--sky-50); }
.pv-chip.active { background:var(--grad-brand-2); border-color:transparent; color:#fff; box-shadow:0 8px 20px -10px rgba(29,78,216,.7); }
.pv-chip-sm { padding:8px 12px; font-size:.84rem; font-weight:500; border-radius:10px; }
.pv-chip-sm.active { background:var(--sky-50); border-color:var(--sky-500); color:var(--sky-700); box-shadow:none; font-weight:700; }
.pv-logo { width:26px; height:26px; border-radius:8px; object-fit:cover; flex-shrink:0; background:#fff; }
.pv-empty { grid-column:1/-1; text-align:center; padding:26px 12px; font-size:.9rem; color:var(--ink-500); }
.pv-info { margin:6px 0 16px; padding:14px 16px; border-radius:14px; background:var(--sky-50); border:1px solid var(--sky-100); }
.pv-info-title { font-weight:800; color:var(--sky-700); margin-bottom:6px; font-size:.9rem; }
#pvInfoText { white-space:pre-line; font-size:.88rem; line-height:1.6; color:var(--ink-700); }
.pv-table { padding:0; overflow:hidden; margin-bottom:18px; }
.pv-head, .pv-row { display:grid; grid-template-columns:minmax(0,1fr) 110px 96px; gap:12px; align-items:center; padding:12px 16px; }
.pv-head { background:var(--sky-50); font-size:.8rem; font-weight:700; color:var(--ink-500); text-transform:uppercase; letter-spacing:.04em; }
.pv-head small { text-transform:none; letter-spacing:0; font-weight:500; }
.pv-row { border-top:1px solid var(--sky-100); cursor:pointer; transition:background .12s; }
.pv-row:hover { background:var(--sky-50); }
.pv-row.selected { background:var(--grad-soft); box-shadow:inset 3px 0 0 var(--sky-500); }
.pv-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pv-main b { font-size:.92rem; line-height:1.35; }
.pv-kode { font-size:.78rem; color:var(--ink-500); }
.pv-kode code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--sky-700); background:var(--sky-50); padding:1px 6px; border-radius:6px; }
.pv-desc { font-size:.78rem; color:var(--ink-500); line-height:1.4; }
.pv-price { font-weight:800; color:var(--sky-600); font-size:.95rem; white-space:nowrap; }
.pv-status { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:700; }
.pv-status.on { background:#dcfce7; color:#15803d; }
.pv-status.off { background:#fee2e2; color:#b91c1c; }
@media (max-width:560px) {
    .pv-head, .pv-row { grid-template-columns:minmax(0,1fr) auto; gap:8px 10px; padding:12px; }
    .pv-head > :nth-child(3) { display:none; }
    .pv-row > :nth-child(3) { grid-column:1 / -1; }
    .pv-tab { padding:8px 10px; font-size:.82rem; }
}

/* Kelola Produk: filter + aksi massal tampil/sembunyi */

/* ============================================
   TEMA GELAP — navy pekat × oranye (toggle 🌙/☀️)
   Palet diambil dari referensi: latar navy dalam,
   aksen oranye hangat, teks putih lembut. Gradasi terbaik:
   hero navy → panel navy dengan cahaya oranye di tepi.
   ============================================ */
html[data-theme="dark"] {
    --sky-50:  #131e3e;
    --sky-100: #1a2750;
    --sky-200: #24356b;
    --sky-300: #37497f;
    --sky-400: #5d7bb8;
    --sky-500: #7fa3e8;
    --sky-600: #9db9f2;
    --sky-700: #c3d4ff;
    --violet-100: #1b2140;
    --violet-200: #2a2f52;
    --violet-300: #454a78;
    --ink-900: #eef2fb;
    --ink-700: #c7d0ea;
    --ink-500: #8e9ac0;
    --ink-300: #5b6690;
    --card: rgba(17, 26, 56, .88);
    --lemon-100: #2e2010;
    --lemon-200: #43300f;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
    --shadow-md: 0 10px 28px -10px rgba(0,0,0,.55);
    --shadow-lg: 0 24px 60px -22px rgba(0,0,0,.7);
    --grad-soft: linear-gradient(135deg, #16224a 0%, #1b1f45 52%, #26203f 100%);
    --grad-hero: linear-gradient(165deg, #0d1734 0%, #101c3f 45%, #1d1830 100%);
    --grad-brand-2: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
}
/* Latar utama: navy dalam dengan pendaran oranye hangat (sesuai referensi) */
html[data-theme="dark"] body {
    color: var(--ink-900);
    background:
        radial-gradient(1000px 560px at 88% -12%, rgba(249,115,22,.14) 0%, transparent 58%),
        radial-gradient(1100px 620px at 50% 118%, rgba(139,92,246,.10) 0%, transparent 55%),
        radial-gradient(1200px 640px at -12% 8%, rgba(37,99,235,.14) 0%, transparent 55%),
        linear-gradient(180deg, var(--dark-1) 0%, var(--dark-2) 55%, var(--dark-3) 100%);
}
html[data-theme="dark"] body::before {
    opacity:.18;
    background-image: radial-gradient(rgba(249,115,22,.35) 1px, transparent 1px);
}
html[data-theme="dark"] .nav { background: rgba(10,17,40,.82); border-bottom-color: rgba(255,255,255,.07); }
html[data-theme="dark"] .nav-link:hover { background: var(--sky-100); color: var(--sky-600); }
html[data-theme="dark"] .brand small { color: var(--ink-500); }
html[data-theme="dark"] .btn-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--ink-700); }
html[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.12); }
html[data-theme="dark"] .btn-danger { background: rgba(244,63,94,.16); color:#fda4af; }
html[data-theme="dark"] .btn-danger:hover { background: rgba(244,63,94,.26); }
html[data-theme="dark"] .card { border-color: rgba(255,255,255,.07); }
html[data-theme="dark"] .section-eyebrow { background: rgba(249,115,22,.12); color:#fdba74; border-color: rgba(249,115,22,.3); }
html[data-theme="dark"] .ticker { background: linear-gradient(120deg, #c2410c 0%, #ea580c 45%, #f59e0b 100%); }
html[data-theme="dark"] .cat-count { background: var(--sky-100); border-color: var(--sky-200); }
html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea {
    background: rgba(10,17,40,.7); color: var(--ink-900); border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] .field label { color: var(--ink-700); }
html[data-theme="dark"] .field input::placeholder, html[data-theme="dark"] .search-box input::placeholder { color: var(--ink-300); }
html[data-theme="dark"] .search-box input { background: rgba(10,17,40,.7); color: var(--ink-900); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .order-summary { color: var(--ink-900); }
html[data-theme="dark"] .modal { background: #131c3d; border: 1px solid rgba(255,255,255,.08); }
html[data-theme="dark"] .modal-close { background: var(--sky-100); color: var(--ink-700); }
html[data-theme="dark"] .detail-rows div { border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .alert.err { background: rgba(244,63,94,.14); color:#fda4af; }
html[data-theme="dark"] .alert.ok { background: rgba(16,185,129,.14); color:#6ee7b7; }
html[data-theme="dark"] th { border-bottom-color: var(--sky-200); }
html[data-theme="dark"] td { border-bottom-color: var(--sky-100); }
html[data-theme="dark"] tr:hover td { background: rgba(125,163,232,.07); }
html[data-theme="dark"] .avatar, html[data-theme="dark"] .photo-preview { border-color: var(--sky-300); }
html[data-theme="dark"] .profile-tile { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .profile-meta b { color: var(--ink-900); }
html[data-theme="dark"] .check-item { border-color: rgba(255,255,255,.14); color: var(--ink-700); }
html[data-theme="dark"] .chip, html[data-theme="dark"] .chip.static:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .chip:hover { background: rgba(249,115,22,.1); border-color: rgba(249,115,22,.4); }
html[data-theme="dark"] .chip.active { background: var(--grad-brand-2); }
html[data-theme="dark"] .pv-tabs { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .pv-tab.active { background: rgba(255,255,255,.08); color: var(--sky-600); box-shadow: inset 0 -2px 0 #f59e0b, var(--shadow-sm); }
html[data-theme="dark"] .pv-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .pv-chip:hover { border-color: rgba(249,115,22,.45); background: rgba(249,115,22,.08); }
html[data-theme="dark"] .pv-chip.active { background: var(--grad-brand-2); }
html[data-theme="dark"] .pv-section-head { color:#fdba74; }
html[data-theme="dark"] .pv-section-head::after { background: rgba(255,255,255,.1); }
html[data-theme="dark"] .pv-table { border-color: rgba(255,255,255,.07); }
html[data-theme="dark"] .pv-row { border-top-color: var(--sky-100); }
html[data-theme="dark"] .pv-row.selected { box-shadow: inset 3px 0 0 #f59e0b; }
html[data-theme="dark"] .pv-price { color:#fdba74; }
html[data-theme="dark"] .pv-status.on { background: rgba(16,185,129,.15); color:#6ee7b7; }
html[data-theme="dark"] .pv-status.off { background: rgba(244,63,94,.15); color:#fda4af; }
html[data-theme="dark"] .pv-kode code { background: var(--sky-100); }
html[data-theme="dark"] .slot-badge { background: var(--grad-soft); color: var(--sky-600); }
html[data-theme="dark"] .slot-badge.off { background: rgba(244,63,94,.15); color:#fda4af; }
html[data-theme="dark"] .pv-info { background: var(--sky-100); border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .pv-info-title { color:#fdba74; }
html[data-theme="dark"] #pvInfoText { color: var(--ink-700); }
html[data-theme="dark"] .photo-preview { background: var(--grad-soft); border-color: var(--sky-300); }
/* Gambar produk/logo di kartu tetap putih agar terlihat */
html[data-theme="dark"] .pv-logo, html[data-theme="dark"] .p-thumb { background:#fff; }

/* ---- PERBAIKAN KETERBACAAN MODE GELAP ----
   Semua permukaan yang memakai warna terang hardcoded diganti gelap,
   teks di atasnya ikut disesuaikan agar selalu terlihat. */
html[data-theme="dark"] .hero-badge { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--sky-600); }
html[data-theme="dark"] .hero-glass { background: linear-gradient(160deg, rgba(19,28,61,.94), rgba(15,23,50,.82)); border-color: rgba(255,255,255,.09); }
html[data-theme="dark"] .hero-demo { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .hero-demo b { color: var(--ink-900); }
html[data-theme="dark"] .hero-glass-head b { color: var(--ink-900); }
html[data-theme="dark"] .note-glass { background: linear-gradient(150deg, rgba(19,28,61,.6), rgba(15,23,50,.45)); border-color: rgba(255,255,255,.09); }
html[data-theme="dark"] .note-glass p, html[data-theme="dark"] .note-glass b { color: var(--ink-700); }
html[data-theme="dark"] .quick-amt { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: var(--ink-700); }
html[data-theme="dark"] .quick-amt:hover { background: rgba(255,255,255,.1); }
html[data-theme="dark"] .method-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .method-item:hover { background: rgba(255,255,255,.1); }
html[data-theme="dark"] .method-item.active { background: rgba(249,115,22,.12); }
html[data-theme="dark"] .stat-card { border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .pay-num { background: rgba(10,17,40,.75); color: var(--ink-900); border-color: var(--sky-300); }
/* Badge status: latar redup + teks terang, tetap jelas di gelap */
html[data-theme="dark"] .badge.processing { background: rgba(250,204,21,.14); color:#fde047; }
html[data-theme="dark"] .badge.success, html[data-theme="dark"] .badge.approved, html[data-theme="dark"] .badge.paid { background: rgba(16,185,129,.15); color:#6ee7b7; }
html[data-theme="dark"] .badge.failed, html[data-theme="dark"] .badge.rejected { background: rgba(244,63,94,.15); color:#fda4af; }
html[data-theme="dark"] .badge.expired { background: rgba(148,163,184,.15); color:#cbd5e1; }
html[data-theme="dark"] .badge.pending { background: rgba(125,163,232,.16); color:#bfdbfe; }
/* Kartu kontak & logo ikon tetap kontras */
html[data-theme="dark"] .contact-card.wa .contact-label { background: rgba(16,185,129,.13); color:#6ee7b7; }
html[data-theme="dark"] .contact-card.tg .contact-label { background: rgba(56,189,248,.13); color:#7dd3fc; }
html[data-theme="dark"] .contact-logo.em { background: linear-gradient(135deg,#f59e0b,#d97706); }
html[data-theme="dark"] .contact-logo.em svg { fill:#1a1205; }
/* Admin & tabel */
html[data-theme="dark"] .slot-badge.off { background: rgba(244,63,94,.15); color:#fda4af; }
html[data-theme="dark"] .pv-info { background: var(--sky-100); border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .pv-info-title { color:#fdba74; }
html[data-theme="dark"] #pvInfoText { color: var(--ink-700); }
html[data-theme="dark"] .photo-preview { background: var(--grad-soft); border-color: var(--sky-300); }
html[data-theme="dark"] .check-item { color: var(--ink-700); }
html[data-theme="dark"] .field label { color: var(--ink-700); }
/* Gambar produk/logo di kartu tetap putih agar terlihat */
html[data-theme="dark"] .pv-logo, html[data-theme="dark"] .p-thumb { background:#fff; }
/* Transisi halus antar tema */
body, .card, .modal, .btn-ghost, .profile-tile, .field input, .search-box input, .pv-chip, .chip, .pv-tab {
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}








/* ============================================
   NOTIFIKASI TELEGRAM — modal user & kolom admin
   ============================================ */
.tg-steps { display:grid; gap:10px; margin:4px 0 14px; text-align:left; }
.tg-step { display:flex; align-items:flex-start; gap:10px; background:var(--grad-soft); border-radius:14px; padding:10px 12px; font-size:.86rem; line-height:1.45; color:var(--ink-700); }
.tg-step-num { flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:var(--grad-brand-2); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.78rem; }
.tg-step code { background:var(--sky-100); border-radius:6px; padding:1px 6px; font-size:.8rem; }
.tg-bot-link { color:var(--sky-600); font-weight:700; text-decoration:underline; }
.tg-connected { display:flex; align-items:center; gap:12px; background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.35); color:#065f46; border-radius:14px; padding:12px 14px; margin:4px 0 14px; font-size:.9rem; }
.tg-connected svg { width:26px; height:26px; flex:0 0 26px; color:#059669; }
.tg-connected code { background:rgba(6,95,70,.1); border-radius:6px; padding:1px 6px; font-size:.82rem; }
html[data-theme="dark"] .tg-connected { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.3); color:#6ee7b7; }
html[data-theme="dark"] .tg-connected svg { color:#6ee7b7; }
html[data-theme="dark"] .tg-connected code { background:rgba(110,231,183,.12); }
html[data-theme="dark"] .tg-step { background:rgba(255,255,255,.05); color:var(--ink-700); }
html[data-theme="dark"] .tg-step code { background:var(--sky-100); }
.tg-chip { display:inline-block; background:var(--grad-soft); color:var(--sky-600); border-radius:999px; padding:3px 10px; font-size:.74rem; font-weight:600; white-space:nowrap; max-width:230px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
html[data-theme="dark"] .tg-chip { background:rgba(255,255,255,.07); color:var(--sky-600); }


/* ============================================
   KEUANGAN ADMIN — laporan bulanan untung/rugi
   ============================================ */
.fin-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.fin-period-nav { display:flex; align-items:center; gap:8px; background:var(--grad-soft); border-radius:999px; padding:6px 10px; }
.fin-period-label { font-weight:700; font-size:.95rem; color:var(--ink-900); min-width:150px; text-align:center; }
.fin-profit.untung { border:1px solid rgba(16,185,129,.4); background:linear-gradient(135deg, rgba(16,185,129,.08), rgba(255,255,255,0)); }
.fin-profit.rugi { border:1px solid rgba(225,29,72,.35); background:linear-gradient(135deg, rgba(225,29,72,.07), rgba(255,255,255,0)); }
.fin-profit-value { font-size:2rem; font-weight:800; margin:6px 0; }
.fin-profit.untung .fin-profit-value { color:#059669; }
.fin-profit.rugi .fin-profit-value { color:#e11d48; }
html[data-theme="dark"] .fin-profit.untung { background:linear-gradient(135deg, rgba(16,185,129,.12), rgba(255,255,255,0)); }
html[data-theme="dark"] .fin-profit.rugi { background:linear-gradient(135deg, rgba(244,63,94,.12), rgba(255,255,255,0)); }
html[data-theme="dark"] .fin-profit.untung .fin-profit-value { color:#6ee7b7; }
html[data-theme="dark"] .fin-profit.rugi .fin-profit-value { color:#fda4af; }
html[data-theme="dark"] .fin-period-label { color:var(--ink-900); }
html[data-theme="dark"] .fin-period-nav { background:rgba(255,255,255,.05); }

/* ============================================
   LAGU LATAR (bg_music) — panel & chip di Galeri Media
   ============================================ */
.music-chip { display:inline-flex; align-items:center; gap:8px; background:var(--grad-soft); color:var(--sky-700); border-radius:999px; padding:8px 16px; font-weight:700; font-size:.9rem; }
html[data-theme="dark"] .music-chip { background:rgba(255,255,255,.07); color:var(--sky-600); }
.media-card.music-card { justify-content:center; gap:10px; padding:18px 14px; min-height:150px; }
.music-preview { font-size:2rem; display:grid; place-items:center; }

/* ============================================
   PENCARIAN & SEO — panel admin
   ============================================ */
.seo-share-empty { display:grid; place-items:center; height:100%; min-height:160px; padding:16px; text-align:center; color:var(--ink-500); font-size:.85rem; }
.seo-icon-prev { width:72px; height:72px; }
.seo-icon-prev img { width:100%; height:100%; object-fit:contain; border-radius:12px; }
.seo-steps { margin:10px 0 4px; padding-left:20px; display:grid; gap:8px; font-size:.9rem; color:var(--ink-700); }
.seo-steps code { background:var(--sky-100); border-radius:6px; padding:1px 6px; font-size:.82rem; }
.seo-info { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; border-bottom:1px dashed var(--sky-100); font-size:.88rem; }
.seo-info:last-of-type { border-bottom:none; }
.seo-info span { color:var(--ink-500); flex:0 0 auto; }
.seo-info b { text-align:right; word-break:break-all; }
.seo-info code { background:var(--sky-100); border-radius:6px; padding:1px 6px; font-size:.8rem; }
html[data-theme="dark"] .seo-steps code, html[data-theme="dark"] .seo-info code { background:rgba(255,255,255,.07); }

/* ============================================
   BANNER PROMO DASHBOARD USER — slider atas katalog (gambar saja)
   ============================================ */
#userPromoStrip { margin:0 0 16px; }
#userPromoStrip .promo-carousel { border-radius:20px; }