/* ==========================================================================
   SDN UI - Design System PT Surya Digital Nusantara
   Dipakai bersama oleh: Dashboard, Marketplace (katalog), Detail Produk,
   Halaman Sukses. Tema terang & gelap memakai token warna yang sama.
   --------------------------------------------------------------------------
   Aturan tema (3 keadaan):
     1. :root                              -> palet TERANG (dasar penuh)
     2. @media (prefers-color-scheme:dark) -> ikut setelan perangkat,
        digembok :root:not([data-theme="light"]) agar pilihan manual menang
     3. :root[data-theme="dark"]           -> pilihan manual dari tombol
   Jangan pernah mendefinisikan warna HANYA di dalam blok media/[data-theme].
   ========================================================================== */

/* ---------- 1. TOKEN: PALET TERANG (dasar penuh) ---------- */
/* KONTRAS (WCAG 2.1 AA) -- sudah diaudit, jangan diubah tanpa dihitung ulang.
   Palet awal (warisan situs lama) punya 9 pasangan yang gagal di tema terang,
   antara lain teks putih di tombol biru hanya 4,10:1 dan judul putih di ujung
   terang gradasi hero hanya 2,77:1. Nilai sekarang sudah lolos semua:
     --sdn-primary   #0369a1  teks di putih 5,93 | putih di atasnya 5,93
     --sdn-success   #047857  harga di putih 5,48
     --sdn-accent-h  #b45309  lencana di accent-100 4,51
     --sdn-danger    #b91c1c  notifikasi di danger-50 5,91
     --sdn-hero-*    #075985 -> #0a72ab  judul 7,56..5,24 | paragraf .9 6,44..4,57

   ATURAN PENTING soal --sdn-faint (#748297, 3,90:1 di putih):
   token ini HANYA untuk IKON/dekorasi (ambang komponen UI 3:1). JANGAN dipakai
   untuk teks -- semua label kecil (tanggal, "Mulai dari", copyright, hint
   Ctrl /, placeholder) sengaja memakai --sdn-muted (4,76:1) supaya terbaca.
   Ambang: teks biasa 4,5:1, teks besar/tebal 3:1, ikon & batas komponen 3:1. */
:root {
    --sdn-canvas:      #eef2f7;
    --sdn-surface:     #ffffff;
    --sdn-surface-2:   #f8fafc;
    --sdn-surface-3:   #f1f5f9;
    --sdn-border:      #e2e8f0;
    --sdn-border-2:    #cbd5e1;

    --sdn-text:        #0f172a;
    --sdn-text-2:      #475569;
    --sdn-muted:       #64748b;
    --sdn-faint:       #748297;

    --sdn-primary:     #0369a1;
    --sdn-primary-h:   #075985;
    --sdn-primary-s:   #0ea5e9;
    --sdn-primary-50:  #f0f9ff;
    --sdn-primary-100: #e0f2fe;
    --sdn-primary-200: #bae6fd;
    --sdn-on-primary:  #ffffff;

    --sdn-accent:      #f59e0b;
    --sdn-accent-h:    #b45309;
    --sdn-accent-50:   #fffbeb;
    --sdn-accent-100:  #fef3c7;
    --sdn-on-accent:   #422006;

    --sdn-success:     #047857;
    --sdn-success-50:  #ecfdf5;
    --sdn-success-100: #d1fae5;
    --sdn-danger:      #b91c1c;
    --sdn-danger-50:   #fef2f2;
    --sdn-danger-100:  #fee2e2;

    --sdn-hero-from:      #075985;
    --sdn-hero-to:        #0a72ab;
    --sdn-hero-soft-from: #f0f9ff;
    --sdn-hero-soft-to:   #e0f2fe;
    --sdn-hero-soft-bd:   #bae6fd;

    --sdn-sh-xs: 0 1px 2px rgba(15,23,42,.05);
    --sdn-sh-sm: 0 2px 8px rgba(15,23,42,.05);
    --sdn-sh-md: 0 8px 24px rgba(15,23,42,.07);
    --sdn-sh-lg: 0 20px 45px rgba(15,23,42,.10);
    --sdn-sh-primary: 0 8px 22px rgba(3,105,161,.26);
    --sdn-ring: 0 0 0 4px rgba(3,105,161,.16);

    --sdn-r-sm: 10px;
    --sdn-r-md: 14px;
    --sdn-r-lg: 20px;
    --sdn-r-xl: 26px;
    --sdn-t: .22s cubic-bezier(.4,0,.2,1);

    --sdn-sidebar-w: 264px;
    --sdn-shell-max: 1480px;

    color-scheme: light;
}

/* ---------- 2. TOKEN: PALET GELAP ---------- */
/* Blok 2a: ikut setelan perangkat (hanya jika user tidak memilih "terang"). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --sdn-canvas:      #060d19;
        --sdn-surface:     #0d1a2d;
        --sdn-surface-2:   #122139;
        --sdn-surface-3:   #17293f;
        --sdn-border:      #1e3555;
        --sdn-border-2:    #2b4a70;

        --sdn-text:        #e9f1fb;
        --sdn-text-2:      #b9cbe2;
        --sdn-muted:       #90a6c2;
        --sdn-faint:       #6f87a5;

        --sdn-primary:     #38bdf8;
        --sdn-primary-h:   #7dd3fc;
        --sdn-primary-s:   #0ea5e9;
        --sdn-primary-50:  #0e2136;
        --sdn-primary-100: #12304c;
        --sdn-primary-200: #1b4b73;
        --sdn-on-primary:  #04121f;

        --sdn-accent:      #fbbf24;
        --sdn-accent-h:    #fcd34d;
        --sdn-accent-50:   #2a2110;
        --sdn-accent-100:  #3a2d13;
        --sdn-on-accent:   #1a1204;

        --sdn-success:     #34d399;
        --sdn-success-50:  #0d2a22;
        --sdn-success-100: #12463a;
        --sdn-danger:      #f87171;
        --sdn-danger-50:   #2d1416;
        --sdn-danger-100:  #45191c;

        --sdn-hero-from:      #0b2f52;
        --sdn-hero-to:        #10527f;
        --sdn-hero-soft-from: #0d1f36;
        --sdn-hero-soft-to:   #10294a;
        --sdn-hero-soft-bd:   #1e4a76;

        --sdn-sh-xs: 0 1px 2px rgba(0,0,0,.40);
        --sdn-sh-sm: 0 2px 10px rgba(0,0,0,.40);
        --sdn-sh-md: 0 10px 28px rgba(0,0,0,.45);
        --sdn-sh-lg: 0 22px 50px rgba(0,0,0,.55);
        --sdn-sh-primary: 0 8px 24px rgba(56,189,248,.22);
        --sdn-ring: 0 0 0 4px rgba(56,189,248,.20);

        color-scheme: dark;
    }
}

/* Blok 2b: pilihan manual "gelap" dari tombol, menang di kedua arah. */
:root[data-theme="dark"] {
    --sdn-canvas:      #060d19;
    --sdn-surface:     #0d1a2d;
    --sdn-surface-2:   #122139;
    --sdn-surface-3:   #17293f;
    --sdn-border:      #1e3555;
    --sdn-border-2:    #2b4a70;

    --sdn-text:        #e9f1fb;
    --sdn-text-2:      #b9cbe2;
    --sdn-muted:       #90a6c2;
    --sdn-faint:       #6f87a5;

    --sdn-primary:     #38bdf8;
    --sdn-primary-h:   #7dd3fc;
    --sdn-primary-s:   #0ea5e9;
    --sdn-primary-50:  #0e2136;
    --sdn-primary-100: #12304c;
    --sdn-primary-200: #1b4b73;
    --sdn-on-primary:  #04121f;

    --sdn-accent:      #fbbf24;
    --sdn-accent-h:    #fcd34d;
    --sdn-accent-50:   #2a2110;
    --sdn-accent-100:  #3a2d13;
    --sdn-on-accent:   #1a1204;

    --sdn-success:     #34d399;
    --sdn-success-50:  #0d2a22;
    --sdn-success-100: #12463a;
    --sdn-danger:      #f87171;
    --sdn-danger-50:   #2d1416;
    --sdn-danger-100:  #45191c;

    --sdn-hero-from:      #0b2f52;
    --sdn-hero-to:        #10527f;
    --sdn-hero-soft-from: #0d1f36;
    --sdn-hero-soft-to:   #10294a;
    --sdn-hero-soft-bd:   #1e4a76;

    --sdn-sh-xs: 0 1px 2px rgba(0,0,0,.40);
    --sdn-sh-sm: 0 2px 10px rgba(0,0,0,.40);
    --sdn-sh-md: 0 10px 28px rgba(0,0,0,.45);
    --sdn-sh-lg: 0 22px 50px rgba(0,0,0,.55);
    --sdn-sh-primary: 0 8px 24px rgba(56,189,248,.22);
    --sdn-ring: 0 0 0 4px rgba(56,189,248,.20);

    color-scheme: dark;
}

/* ---------- 3. DASAR ---------- */
*, *::before, *::after { box-sizing: border-box; }

body.sdn-body {
    margin: 0;
    padding: 0;
    background: var(--sdn-canvas);
    color: var(--sdn-text);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background-color var(--sdn-t), color var(--sdn-t);
}

/* `overflow-x: hidden` menjadikan <body> scroll container, dan itu MEMATIKAN
   position:sticky pada sidebar/topbar di dalamnya. `clip` menahan luapan
   horizontal yang sama TANPA membuat scroll container, jadi sticky tetap
   hidup. Browser lama yang belum kenal `clip` tetap dapat `hidden` di atas.

   Dipasang di <html> SEKALIGUS <body>: kalau hanya di body, nilainya
   dipropagasi ke viewport dan hasilnya tidak konsisten antar browser --
   di Chrome Android halaman masih bisa digeser ke samping.

   Ini JARING PENGAMAN, bukan solusi. Kalau ada yang meluap, perbaiki
   sumbernya (biasanya flex item yang menolak menyusut, atau grid track
   `1fr` yang mestinya `minmax(0,1fr)`). */
@supports (overflow: clip) {
    html { overflow-x: clip; }
    body.sdn-body { overflow-x: clip; }
}

.sdn-body img { max-width: 100%; }
.sdn-body a { color: inherit; }
.sdn-mono { font-family: 'Source Code Pro', ui-monospace, monospace; }

.sdn-body ::-webkit-scrollbar { width: 10px; height: 10px; }
.sdn-body ::-webkit-scrollbar-track { background: transparent; }
.sdn-body ::-webkit-scrollbar-thumb { background: var(--sdn-border-2); border-radius: 10px; border: 3px solid var(--sdn-canvas); }
.sdn-body ::-webkit-scrollbar-thumb:hover { background: var(--sdn-faint); }

.sdn-body :focus-visible { outline: 2px solid var(--sdn-primary); outline-offset: 2px; border-radius: 6px; }

.sdn-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
    .sdn-body *, .sdn-body *::before, .sdn-body *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ---------- 4. RANGKA APLIKASI (SHELL) ---------- */
/* Satu "jendela" membulat berisi sidebar + konten, seperti di referensi. */
.sdn-app {
    max-width: var(--sdn-shell-max);
    margin: 22px auto;
    background: var(--sdn-surface);
    border: 1px solid var(--sdn-border);
    border-radius: var(--sdn-r-xl);
    box-shadow: var(--sdn-sh-lg);
    display: grid;
    grid-template-columns: var(--sdn-sidebar-w) minmax(0, 1fr);
    align-items: stretch;
    min-height: calc(100vh - 44px);
}

/* CATATAN: .sdn-app sengaja TIDAK memakai overflow:hidden. Itu akan mematikan
   position:sticky pada .sdn-side dan .sdn-topbar di dalamnya. Sudut membulat
   "jendela" dibentuk lewat radius per-anak di bawah ini. */
.sdn-side { border-radius: var(--sdn-r-xl) 0 0 var(--sdn-r-xl); }
.sdn-main { border-radius: 0 var(--sdn-r-xl) var(--sdn-r-xl) 0; }
.sdn-topbar { border-radius: 0 var(--sdn-r-xl) 0 0; }

.sdn-main {
    min-width: 0;
    background: var(--sdn-surface-2);
    border-left: 1px solid var(--sdn-border);
    display: flex;
    flex-direction: column;
}

.sdn-content { padding: 26px 30px 60px; display: flex; flex-direction: column; gap: 26px; min-width: 0; }

/* ---------- 5. SIDEBAR ---------- */
.sdn-side {
    display: flex;
    flex-direction: column;
    padding: 24px 18px;
    gap: 18px;
    background: var(--sdn-surface);
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sdn-side::-webkit-scrollbar { width: 6px; }
.sdn-side::-webkit-scrollbar-thumb { background: var(--sdn-border); border: none; border-radius: 10px; }

.sdn-side-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 4px; text-decoration: none; }
.sdn-side-brand img { height: 46px; width: auto; object-fit: contain; }
.sdn-side-brand-fallback { display: flex; flex-direction: column; line-height: 1.1; }
.sdn-side-brand-fallback b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.4px; color: var(--sdn-primary); }
.sdn-side-brand-fallback span { font-size: .58rem; font-weight: 700; letter-spacing: .8px; color: var(--sdn-muted); text-transform: uppercase; }

.sdn-nav { display: flex; flex-direction: column; gap: 4px; }
.sdn-nav-item {
    display: flex; align-items: center; gap: 13px;
    padding: 11px 14px;
    border-radius: var(--sdn-r-md);
    text-decoration: none;
    color: var(--sdn-text-2);
    font-size: .875rem;
    font-weight: 600;
    transition: var(--sdn-t);
    cursor: pointer;
    border: none; background: transparent; width: 100%; text-align: left;
    font-family: inherit;
}
.sdn-nav-item i { font-size: 1rem; width: 20px; text-align: center; color: var(--sdn-faint); transition: var(--sdn-t); flex-shrink: 0; }
.sdn-nav-item:hover { background: var(--sdn-surface-3); color: var(--sdn-text); }
.sdn-nav-item:hover i { color: var(--sdn-primary); }
.sdn-nav-item.is-active {
    background: var(--sdn-primary);
    color: var(--sdn-on-primary);
    font-weight: 700;
    box-shadow: var(--sdn-sh-primary);
}
.sdn-nav-item.is-active i { color: var(--sdn-on-primary); }
.sdn-nav-item .sdn-nav-tail { margin-left: auto; font-size: .62rem; font-weight: 800; letter-spacing: .4px; }

.sdn-side-sep { height: 1px; background: var(--sdn-border); margin: 2px 6px; border: 0; }

/* Kotak informasi di sidebar */
.sdn-side-box {
    background: var(--sdn-surface-2);
    border: 1px solid var(--sdn-border);
    border-radius: var(--sdn-r-lg);
    padding: 15px;
}
.sdn-side-box-title { font-size: .62rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--sdn-muted); margin-bottom: 10px; }
.sdn-side-sector { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sdn-side-sector b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.3px; color: var(--sdn-text); text-transform: uppercase; }

.sdn-select {
    width: 100%;
    appearance: none;
    background-color: var(--sdn-surface);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid var(--sdn-border);
    color: var(--sdn-text);
    border-radius: var(--sdn-r-sm);
    padding: 9px 32px 9px 12px;
    font-family: inherit; font-size: .8rem; font-weight: 700;
    cursor: pointer; transition: var(--sdn-t);
}
.sdn-select:hover { border-color: var(--sdn-primary-200); }
.sdn-select:focus { outline: none; border-color: var(--sdn-primary); box-shadow: var(--sdn-ring); }

.sdn-side-foot { margin-top: auto; padding: 14px 8px 0; font-size: .68rem; font-weight: 600; color: var(--sdn-muted); line-height: 1.6; border-top: 1px solid var(--sdn-border); }

/* ---------- 6. TOPBAR ---------- */
.sdn-topbar {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 30px;
    background: color-mix(in srgb, var(--sdn-surface) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sdn-border);
}
@supports not (backdrop-filter: blur(4px)) { .sdn-topbar { background: var(--sdn-surface); } }

.sdn-burger, .sdn-topbar-brand { display: none; }
.sdn-burger {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: var(--sdn-r-sm);
    border: 1px solid var(--sdn-border);
    background: var(--sdn-surface);
    color: var(--sdn-text);
    font-size: 1.05rem; cursor: pointer;
    align-items: center; justify-content: center;
    transition: var(--sdn-t);
}
.sdn-burger:hover { background: var(--sdn-surface-3); border-color: var(--sdn-primary-200); }
.sdn-topbar-brand img { height: 30px; width: auto; }

/* Kotak pencarian */
.sdn-search { position: relative; flex: 1; min-width: 0; max-width: 620px; }
.sdn-search > i.sdn-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--sdn-faint); font-size: .9rem; pointer-events: none; }
.sdn-search input {
    width: 100%;
    padding: 11px 74px 11px 42px;
    border-radius: 50px;
    border: 1px solid var(--sdn-border);
    background: var(--sdn-surface-2);
    color: var(--sdn-text);
    font-family: inherit; font-size: .875rem; font-weight: 500;
    transition: var(--sdn-t);
}
.sdn-search input::placeholder { color: var(--sdn-muted); font-weight: 500; }
.sdn-search input:focus { outline: none; background: var(--sdn-surface); border-color: var(--sdn-primary); box-shadow: var(--sdn-ring); }
.sdn-kbd {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: .62rem; font-weight: 800; letter-spacing: .3px;
    color: var(--sdn-muted); background: var(--sdn-surface);
    border: 1px solid var(--sdn-border); border-radius: 6px;
    padding: 3px 7px; pointer-events: none;
}

.sdn-topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }

.sdn-icon-btn {
    position: relative;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--sdn-text-2);
    font-size: 1.02rem; cursor: pointer;
    text-decoration: none;
    transition: var(--sdn-t);
    font-family: inherit;
}
.sdn-icon-btn:hover { background: var(--sdn-surface-3); color: var(--sdn-primary); border-color: var(--sdn-border); }
.sdn-dot {
    position: absolute; top: 7px; right: 8px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--sdn-danger);
    border: 2px solid var(--sdn-surface);
}

/* Tombol akun */
.sdn-account {
    display: flex; align-items: center; gap: 9px;
    padding: 4px 12px 4px 4px;
    border-radius: 50px;
    border: 1px solid transparent;
    text-decoration: none; color: var(--sdn-text);
    transition: var(--sdn-t); cursor: pointer;
    max-width: 210px;
}
.sdn-account:hover { background: var(--sdn-surface-3); border-color: var(--sdn-border); }
.sdn-avatar, .sdn-avatar-fb { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.sdn-avatar { border: 2px solid var(--sdn-primary-100); }
/* Gradasi sengaja primary -> primary-h (dua-duanya gelap), BUKAN ke
   primary-s: huruf inisial putih di atas #0ea5e9 hanya 2,77:1. */
.sdn-avatar-fb {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--sdn-primary), var(--sdn-primary-h));
    color: #fff; font-weight: 800; font-size: .85rem;
}
.sdn-account-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sdn-account-name { font-weight: 800; font-size: .82rem; color: var(--sdn-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdn-account-role { font-size: .66rem; font-weight: 700; color: var(--sdn-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.sdn-account-role.is-priority { color: var(--sdn-success); }

/* Tombol keranjang */
.sdn-cart-btn {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 9px 17px;
    border-radius: 50px;
    border: 1px solid var(--sdn-border);
    background: var(--sdn-surface-2);
    color: var(--sdn-text);
    font-family: inherit; font-size: .82rem; font-weight: 800;
    cursor: pointer; text-decoration: none;
    transition: var(--sdn-t);
}
.sdn-cart-btn i { color: var(--sdn-primary); font-size: 1rem; }
.sdn-cart-btn:hover { background: var(--sdn-primary-100); border-color: var(--sdn-primary-200); color: var(--sdn-primary-h); }
.sdn-badge-count {
    min-width: 20px; height: 20px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sdn-danger); color: #fff;
    font-size: .68rem; font-weight: 800; border-radius: 50px;
}

/* ---------- 7. TOMBOL, LENCANA, PIL ---------- */
.sdn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px;
    border-radius: var(--sdn-r-md);
    border: 1px solid transparent;
    font-family: inherit; font-size: .85rem; font-weight: 800;
    cursor: pointer; text-decoration: none;
    transition: var(--sdn-t);
    line-height: 1.2;
}
.sdn-btn:active { transform: translateY(1px); }
.sdn-btn--primary { background: var(--sdn-primary); color: var(--sdn-on-primary); box-shadow: var(--sdn-sh-primary); }
.sdn-btn--primary:hover { background: var(--sdn-primary-h); }
.sdn-btn--accent { background: var(--sdn-accent); color: var(--sdn-on-accent); box-shadow: 0 8px 22px rgba(245,158,11,.28); }
.sdn-btn--accent:hover { background: var(--sdn-accent-h); }
.sdn-btn--soft { background: var(--sdn-primary-100); color: var(--sdn-primary-h); border-color: transparent; }
.sdn-btn--soft:hover { background: var(--sdn-primary-200); }
.sdn-btn--ghost { background: var(--sdn-surface); color: var(--sdn-text-2); border-color: var(--sdn-border); }
.sdn-btn--ghost:hover { background: var(--sdn-surface-3); border-color: var(--sdn-border-2); color: var(--sdn-text); }
.sdn-btn--success { background: var(--sdn-success); color: #fff; box-shadow: 0 8px 22px rgba(5,150,105,.25); }
.sdn-btn--success:hover { filter: brightness(1.06); }
.sdn-btn--block { width: 100%; }
.sdn-btn--lg { padding: 14px 24px; font-size: .92rem; border-radius: var(--sdn-r-md); }

.sdn-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 50px;
    font-size: .62rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    background: var(--sdn-primary-100); color: var(--sdn-primary-h);
    width: max-content;
}
.sdn-tag--accent  { background: var(--sdn-accent-100);  color: var(--sdn-accent-h); }
.sdn-tag--success { background: var(--sdn-success-100); color: var(--sdn-success); }
.sdn-tag--danger  { background: var(--sdn-danger-100);  color: var(--sdn-danger); }
.sdn-tag--neutral { background: var(--sdn-surface-3);   color: var(--sdn-muted); }

.sdn-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.sdn-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 50px;
    border: 1px solid var(--sdn-border);
    background: var(--sdn-surface);
    color: var(--sdn-muted);
    font-family: inherit; font-size: .8rem; font-weight: 800;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: var(--sdn-t);
}
.sdn-pill:hover { border-color: var(--sdn-primary); color: var(--sdn-primary); background: var(--sdn-primary-50); }
.sdn-pill.is-active { background: var(--sdn-primary); border-color: var(--sdn-primary); color: var(--sdn-on-primary); box-shadow: var(--sdn-sh-primary); }
.sdn-pill.is-active:hover { background: var(--sdn-primary-h); color: var(--sdn-on-primary); }

/* Baris breadcrumb + aksi */
.sdn-subbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sdn-crumb { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; color: var(--sdn-muted); min-width: 0; flex-wrap: wrap; }
.sdn-crumb a { text-decoration: none; color: var(--sdn-muted); transition: var(--sdn-t); }
.sdn-crumb a:hover { color: var(--sdn-primary); }
.sdn-crumb i { font-size: .6rem; color: var(--sdn-faint); }
.sdn-crumb strong { color: var(--sdn-text); font-weight: 800; }

/* ---------- 8. HERO ---------- */
.sdn-hero {
    position: relative; overflow: hidden;
    border-radius: var(--sdn-r-xl);
    padding: 40px 44px;
    display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center;
}
.sdn-hero--brand {
    background: linear-gradient(120deg, var(--sdn-hero-from) 0%, var(--sdn-hero-to) 100%);
    color: #fff;
    box-shadow: var(--sdn-sh-primary);
}
.sdn-hero--soft {
    background: linear-gradient(120deg, var(--sdn-hero-soft-from) 0%, var(--sdn-hero-soft-to) 100%);
    border: 1px solid var(--sdn-hero-soft-bd);
    color: var(--sdn-text);
}
.sdn-hero-body { position: relative; z-index: 2; max-width: 620px; }
.sdn-hero-eyebrow { font-size: .92rem; font-weight: 600; opacity: .85; margin-bottom: 4px; }
.sdn-hero h1 { margin: 0 0 12px; font-size: clamp(1.6rem, 3.2vw, 2.35rem); font-weight: 800; letter-spacing: -.7px; line-height: 1.15; }
.sdn-hero p { margin: 0; font-size: .95rem; line-height: 1.65; opacity: .9; font-weight: 500; }
.sdn-hero--brand p { max-width: 560px; }
.sdn-hero-cta { margin-top: 22px; }
.sdn-hero-art { position: relative; z-index: 2; width: clamp(220px, 26vw, 340px); flex-shrink: 0; }
.sdn-hero-art svg { display: block; width: 100%; height: auto; }
.sdn-hero-glow {
    position: absolute; z-index: 1; pointer-events: none;
    width: 460px; height: 460px; border-radius: 50%;
    right: -120px; top: -180px;
    background: radial-gradient(circle, rgba(255,255,255,.16) 0%, transparent 68%);
}
.sdn-hero--soft .sdn-hero-glow { background: radial-gradient(circle, rgba(2,132,199,.10) 0%, transparent 68%); }

/* ---------- 9. JUDUL SECTION ---------- */
.sdn-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.sdn-sec-title { margin: 0; font-size: 1.08rem; font-weight: 800; letter-spacing: -.3px; color: var(--sdn-text); display: flex; align-items: center; gap: 9px; }
.sdn-sec-title i { color: var(--sdn-primary); font-size: 1rem; }
.sdn-sec-link { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800; color: var(--sdn-primary); text-decoration: none; transition: var(--sdn-t); }
.sdn-sec-link:hover { color: var(--sdn-primary-h); gap: 9px; }
.sdn-sec-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- 10. KARTU ---------- */
.sdn-card {
    background: var(--sdn-surface);
    border: 1px solid var(--sdn-border);
    border-radius: var(--sdn-r-lg);
    box-shadow: var(--sdn-sh-sm);
    transition: var(--sdn-t);
}
.sdn-card--pad { padding: 22px; }
a.sdn-card, .sdn-card--link { text-decoration: none; color: inherit; cursor: pointer; display: block; }
a.sdn-card:hover, .sdn-card--link:hover { transform: translateY(-3px); border-color: var(--sdn-primary-200); box-shadow: var(--sdn-sh-md); }

/* Ubin ikon berwarna */
.sdn-tile {
    width: 46px; height: 46px; border-radius: var(--sdn-r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
    background: var(--sdn-primary-100); color: var(--sdn-primary);
}
.sdn-tile--green  { background: var(--sdn-success-100); color: var(--sdn-success); }
.sdn-tile--orange { background: var(--sdn-accent-100);  color: var(--sdn-accent-h); }
.sdn-tile--red    { background: var(--sdn-danger-100);  color: var(--sdn-danger); }
.sdn-tile--sm { width: 36px; height: 36px; font-size: 1rem; border-radius: var(--sdn-r-sm); }

/* Kartu "Akses Cepat" */
.sdn-grid-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.sdn-quick {
    display: flex; flex-direction: column; gap: 12px;
    padding: 22px;
    background: var(--sdn-surface);
    border: 1px solid var(--sdn-border);
    border-radius: var(--sdn-r-lg);
    box-shadow: var(--sdn-sh-sm);
    text-decoration: none; color: inherit;
    transition: var(--sdn-t);
    min-width: 0;
}
.sdn-quick:hover { transform: translateY(-4px); border-color: var(--sdn-primary-200); box-shadow: var(--sdn-sh-md); }
.sdn-quick-name { font-size: 1.02rem; font-weight: 800; letter-spacing: -.3px; color: var(--sdn-text); line-height: 1.3; }
.sdn-quick-desc { font-size: .8rem; font-weight: 500; color: var(--sdn-muted); line-height: 1.55; flex: 1; }
.sdn-quick-go { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; color: var(--sdn-primary); margin-top: 2px; transition: var(--sdn-t); }
.sdn-quick:hover .sdn-quick-go { gap: 10px; }
.sdn-quick--danger { border-color: var(--sdn-danger-100); background: var(--sdn-danger-50); }
.sdn-quick--danger .sdn-quick-name, .sdn-quick--danger .sdn-quick-go { color: var(--sdn-danger); }

/* Kartu produk marketplace */
.sdn-grid-product { display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); gap: 18px; }
.sdn-prod {
    position: relative; display: flex; flex-direction: column; gap: 11px;
    padding: 20px 18px;
    background: var(--sdn-surface);
    border: 1px solid var(--sdn-border);
    border-radius: var(--sdn-r-lg);
    box-shadow: var(--sdn-sh-sm);
    cursor: pointer;
    transition: var(--sdn-t);
    text-decoration: none; color: inherit;
    min-width: 0;
}
.sdn-prod:hover { transform: translateY(-4px); border-color: var(--sdn-primary-200); box-shadow: var(--sdn-sh-md); }
.sdn-prod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sdn-prod-thumb {
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: var(--sdn-r-md); object-fit: cover;
    background: var(--sdn-surface-3);
    border: 1px solid var(--sdn-border);
}
.sdn-prod-flag { flex-shrink: 0; }
.sdn-prod-name {
    margin: 0; font-size: .92rem; font-weight: 800; line-height: 1.4; color: var(--sdn-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sdn-prod-desc {
    font-size: .76rem; font-weight: 500; color: var(--sdn-muted); line-height: 1.55; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sdn-prod-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 4px; }
.sdn-prod-price-lbl { font-size: .64rem; font-weight: 700; color: var(--sdn-muted); text-transform: uppercase; letter-spacing: .4px; }
.sdn-prod-price { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: .98rem; font-weight: 700; color: var(--sdn-success); line-height: 1.3; }
.sdn-prod-price small { font-size: .68rem; font-weight: 600; color: var(--sdn-muted); font-family: inherit; }
.sdn-prod-go {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: var(--sdn-r-sm);
    border: 1px solid var(--sdn-border);
    background: var(--sdn-surface-2);
    color: var(--sdn-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; cursor: pointer; transition: var(--sdn-t);
    font-family: inherit;
}
.sdn-prod-go:hover { background: var(--sdn-primary); border-color: var(--sdn-primary); color: var(--sdn-on-primary); }

/* Baris ringkas katalog (teaser dashboard) */
.sdn-mini { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--sdn-border); min-width: 0; }
.sdn-mini:last-child { border-bottom: none; padding-bottom: 0; }
.sdn-mini-info { min-width: 0; flex: 1; }
.sdn-mini-name { font-size: .82rem; font-weight: 700; color: var(--sdn-text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0 3px; }
.sdn-mini-price { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: .78rem; font-weight: 700; color: var(--sdn-success); }

/* Kartu berita */
.sdn-grid-news { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 18px; }
.sdn-news { display: flex; flex-direction: column; gap: 10px; padding: 20px; cursor: pointer; min-width: 0; }
.sdn-news-title { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.4; letter-spacing: -.2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sdn-news-excerpt { font-size: .8rem; color: var(--sdn-muted); line-height: 1.6; font-weight: 500; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sdn-news-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .72rem; font-weight: 700; color: var(--sdn-muted); margin-top: 2px; }

/* Kartu aksi mendatar */
.sdn-row-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px; cursor: pointer; }
.sdn-row-card-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sdn-row-card-name { font-weight: 800; font-size: .95rem; color: var(--sdn-text); margin-bottom: 3px; }
.sdn-row-card-desc { font-size: .78rem; color: var(--sdn-muted); font-weight: 500; line-height: 1.5; }
.sdn-row-card-go { color: var(--sdn-faint); flex-shrink: 0; transition: var(--sdn-t); }
.sdn-row-card:hover .sdn-row-card-go { color: var(--sdn-primary); transform: translateX(3px); }

/* Ajakan bantuan (blok penuh warna merek) */
.sdn-cta-help {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 24px; border-radius: var(--sdn-r-lg);
    background: linear-gradient(120deg, var(--sdn-hero-from), var(--sdn-hero-to));
    color: #fff; box-shadow: var(--sdn-sh-primary);
}
.sdn-cta-help b { display: block; font-size: 1.02rem; font-weight: 800; margin-bottom: 3px; }
.sdn-cta-help span { font-size: .82rem; opacity: .9; font-weight: 500; }
.sdn-cta-help-btn {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
    background: #fff; color: var(--sdn-hero-from);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; text-decoration: none; transition: var(--sdn-t);
}
.sdn-cta-help-btn:hover { transform: scale(1.08); }

/* ---------- 11. TICKER PENGUMUMAN ---------- */
.sdn-ticker {
    display: flex; align-items: center; gap: 0;
    background: var(--sdn-surface);
    border: 1px solid var(--sdn-border);
    border-radius: var(--sdn-r-md);
    box-shadow: var(--sdn-sh-sm);
    overflow: hidden; position: relative;
}
.sdn-ticker-label {
    display: flex; align-items: center; gap: 7px; flex-shrink: 0; z-index: 2;
    padding: 11px 16px; margin-right: 4px;
    background: var(--sdn-surface);
    border-right: 1px solid var(--sdn-border);
    font-size: .72rem; font-weight: 800; letter-spacing: .5px; color: var(--sdn-primary);
    white-space: nowrap;
}
.sdn-ticker-label i { color: var(--sdn-accent); }
.sdn-ticker-view {
    flex: 1; min-width: 0; overflow: hidden; position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 96%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 3%, #000 96%, transparent);
}
.sdn-ticker-track { display: inline-flex; align-items: center; white-space: nowrap; animation: sdnTicker 34s linear infinite; }
.sdn-ticker-view:hover .sdn-ticker-track { animation-play-state: paused; }
.sdn-ticker-item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px;
    font-size: .82rem; font-weight: 600; color: var(--sdn-text-2);
    text-decoration: none; border-right: 1px dashed var(--sdn-border);
    transition: var(--sdn-t);
}
.sdn-ticker-item:hover { color: var(--sdn-primary); }
@keyframes sdnTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 12. HALAMAN DETAIL PRODUK ---------- */
.sdn-detail { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 26px; align-items: start; }
.sdn-detail-main { min-width: 0; display: flex; flex-direction: column; gap: 22px; }

.sdn-detail-media {
    position: relative; overflow: hidden;
    border-radius: var(--sdn-r-lg);
    border: 1px solid var(--sdn-border);
    background: linear-gradient(140deg, var(--sdn-primary-50), var(--sdn-primary-100));
    min-height: 260px;
    display: flex; align-items: center; justify-content: center;
}
.sdn-detail-media img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; display: block; }
.sdn-detail-media > i { font-size: 5rem; color: var(--sdn-primary); opacity: .55; }
.sdn-detail-media .sdn-tag { position: absolute; top: 14px; left: 14px; background: var(--sdn-primary); color: var(--sdn-on-primary); }

/* Chip kepercayaan di bawah gambar */
.sdn-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sdn-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: var(--sdn-r-sm);
    background: var(--sdn-surface); border: 1px solid var(--sdn-border);
    font-size: .74rem; font-weight: 700; color: var(--sdn-text-2);
}
.sdn-chip i { color: var(--sdn-success); font-size: .85rem; }
.sdn-chip--soft { background: var(--sdn-success-50); border-color: transparent; color: var(--sdn-success); }

.sdn-detail-title { margin: 0 0 10px; font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 800; letter-spacing: -.6px; line-height: 1.25; }
.sdn-detail-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .8rem; font-weight: 600; color: var(--sdn-muted); padding-bottom: 18px; border-bottom: 1px solid var(--sdn-border); }
.sdn-detail-meta span { display: inline-flex; align-items: center; gap: 6px; }
.sdn-detail-meta .sdn-star { color: var(--sdn-accent); }
.sdn-detail-lead { font-size: .92rem; line-height: 1.75; color: var(--sdn-text-2); font-weight: 500; margin: 18px 0; }
.sdn-detail-price-lbl { font-size: .78rem; font-weight: 700; color: var(--sdn-muted); margin-bottom: 4px; }
.sdn-detail-price { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: clamp(1.6rem, 3.4vw, 2.1rem); font-weight: 700; color: var(--sdn-success); line-height: 1.2; }
.sdn-detail-price small { font-size: .82rem; font-weight: 600; color: var(--sdn-muted); font-family: 'Plus Jakarta Sans', sans-serif; }

/* Tab */
.sdn-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sdn-border); overflow-x: auto; scrollbar-width: none; }
.sdn-tabs::-webkit-scrollbar { display: none; }
.sdn-tab {
    position: relative; flex-shrink: 0;
    padding: 12px 18px; border: none; background: transparent;
    font-family: inherit; font-size: .85rem; font-weight: 800;
    color: var(--sdn-muted); cursor: pointer; transition: var(--sdn-t);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sdn-tab:hover { color: var(--sdn-text); }
.sdn-tab.is-active { color: var(--sdn-primary); border-bottom-color: var(--sdn-primary); }
.sdn-tabpanel { display: none; padding-top: 20px; font-size: .9rem; line-height: 1.8; color: var(--sdn-text-2); }
.sdn-tabpanel.is-active { display: block; animation: sdnFade .25s ease; }
@keyframes sdnFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Grid spesifikasi */
.sdn-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.sdn-spec {
    display: flex; align-items: center; gap: 13px;
    padding: 15px 17px;
    background: var(--sdn-surface); border: 1px solid var(--sdn-border);
    border-radius: var(--sdn-r-md);
    min-width: 0;
}
.sdn-spec-k { font-size: .72rem; font-weight: 800; color: var(--sdn-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.sdn-spec-v { font-size: .86rem; font-weight: 700; color: var(--sdn-text); line-height: 1.4; word-break: break-word; }

/* Kartu pemesanan (sticky) */
.sdn-order {
    position: sticky; top: 88px;
    background: var(--sdn-surface);
    border: 1px solid var(--sdn-border);
    border-radius: var(--sdn-r-lg);
    box-shadow: var(--sdn-sh-md);
    padding: 22px;
    display: flex; flex-direction: column; gap: 18px;
}
.sdn-order-title { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.3px; }
.sdn-field-lbl { font-size: .78rem; font-weight: 700; color: var(--sdn-text-2); margin-bottom: 9px; }

/* Pilihan durasi */
.sdn-durations { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.sdn-duration {
    padding: 11px 8px; border-radius: var(--sdn-r-sm);
    border: 1.5px solid var(--sdn-border);
    background: var(--sdn-surface);
    font-family: inherit; cursor: pointer; text-align: center;
    transition: var(--sdn-t); color: var(--sdn-text);
}
.sdn-duration b { display: block; font-size: .82rem; font-weight: 800; }
.sdn-duration span { display: block; font-size: .64rem; font-weight: 700; color: var(--sdn-success); margin-top: 2px; }
.sdn-duration:hover { border-color: var(--sdn-primary-200); background: var(--sdn-primary-50); }
.sdn-duration.is-active { border-color: var(--sdn-primary); background: var(--sdn-primary-50); box-shadow: var(--sdn-ring); }
.sdn-duration.is-active b { color: var(--sdn-primary-h); }

/* Penambah kuantitas */
.sdn-qty { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sdn-qty-ctrl { display: flex; align-items: center; gap: 4px; border: 1px solid var(--sdn-border); border-radius: 50px; padding: 3px; background: var(--sdn-surface-2); }
.sdn-qty-btn {
    width: 30px; height: 30px; border-radius: 50%;
    border: none; background: var(--sdn-surface); color: var(--sdn-primary);
    font-size: .78rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: var(--sdn-t); box-shadow: var(--sdn-sh-xs);
}
.sdn-qty-btn:hover { background: var(--sdn-primary); color: var(--sdn-on-primary); }
.sdn-qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.sdn-qty-input {
    width: 44px; border: none; background: transparent; text-align: center;
    font-family: inherit; font-size: .9rem; font-weight: 800; color: var(--sdn-text);
    -moz-appearance: textfield;
}
.sdn-qty-input::-webkit-outer-spin-button, .sdn-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sdn-order-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; border-top: 1px dashed var(--sdn-border); border-bottom: 1px dashed var(--sdn-border); }
.sdn-order-sum-k { font-size: .82rem; font-weight: 700; color: var(--sdn-muted); }
.sdn-order-sum-v { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 1.05rem; font-weight: 700; color: var(--sdn-success); }

.sdn-trusts { display: flex; flex-direction: column; gap: 13px; }
.sdn-trust { display: flex; align-items: center; gap: 11px; }
.sdn-trust i { color: var(--sdn-primary); font-size: .95rem; width: 20px; text-align: center; flex-shrink: 0; }
.sdn-trust b { display: block; font-size: .78rem; font-weight: 800; color: var(--sdn-text); }
.sdn-trust span { font-size: .7rem; color: var(--sdn-muted); font-weight: 500; }

/* ---------- 13. LACI KERANJANG ---------- */
.sdn-drawer {
    position: fixed; top: 0; right: 0; z-index: 3000;
    width: min(430px, 100%); height: 100vh; height: 100dvh;
    background: var(--sdn-surface);
    border-left: 1px solid var(--sdn-border);
    box-shadow: -14px 0 44px rgba(15,23,42,.16);
    display: flex; flex-direction: column;
    transform: translateX(102%);
    transition: transform .34s cubic-bezier(.4,0,.2,1);
    visibility: hidden;
}
.sdn-drawer.is-open { transform: none; visibility: visible; }
.sdn-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--sdn-border); flex-shrink: 0; }
.sdn-drawer-head h3 { margin: 0; font-size: 1.02rem; font-weight: 800; }
.sdn-drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px; background: var(--sdn-surface-2); }
.sdn-drawer-foot { padding: 20px 22px; border-top: 1px solid var(--sdn-border); background: var(--sdn-surface); flex-shrink: 0; max-height: 66vh; overflow-y: auto; }

.sdn-ci { display: flex; align-items: center; gap: 13px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--sdn-border); }
.sdn-ci:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sdn-ci-img { width: 52px; height: 52px; border-radius: var(--sdn-r-sm); object-fit: cover; background: var(--sdn-surface-3); flex-shrink: 0; }
.sdn-ci-info { flex: 1; min-width: 0; }
.sdn-ci-info h4 { margin: 0 0 3px; font-size: .85rem; font-weight: 800; line-height: 1.35; }
.sdn-ci-info p { margin: 0; font-size: .78rem; font-weight: 700; color: var(--sdn-success); font-family: 'Source Code Pro', ui-monospace, monospace; }
.sdn-ci-del { border: none; background: transparent; color: var(--sdn-faint); cursor: pointer; font-size: 1rem; padding: 6px; border-radius: 8px; transition: var(--sdn-t); }
.sdn-ci-del:hover { color: var(--sdn-danger); background: var(--sdn-danger-50); }

.sdn-input, .sdn-textarea {
    width: 100%; padding: 11px 14px;
    border: 1px solid var(--sdn-border); border-radius: var(--sdn-r-sm);
    background: var(--sdn-surface-2); color: var(--sdn-text);
    font-family: inherit; font-size: .85rem; font-weight: 600;
    transition: var(--sdn-t);
}
.sdn-input::placeholder, .sdn-textarea::placeholder { color: var(--sdn-muted); font-weight: 500; }
.sdn-input:focus, .sdn-textarea:focus { outline: none; background: var(--sdn-surface); border-color: var(--sdn-primary); box-shadow: var(--sdn-ring); }
.sdn-textarea { resize: vertical; min-height: 64px; }

.sdn-overlay {
    position: fixed; inset: 0; z-index: 2500;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity var(--sdn-t), visibility var(--sdn-t);
}
.sdn-overlay.is-open { opacity: 1; visibility: visible; }

.sdn-empty { text-align: center; padding: 46px 20px; color: var(--sdn-muted); }
.sdn-empty i { font-size: 2.8rem; color: var(--sdn-border-2); display: block; margin-bottom: 14px; }
.sdn-empty p { margin: 0; font-size: .85rem; font-weight: 600; }

/* ---------- 14. NAVIGASI BAWAH (MOBILE) ---------- */
/* Titik henti 899px/portrait DISENGAJA sama persis dengan chat-widget.php dan
   company-info-widget.php. Kalau diubah di sini, tombol mengambang mereka akan
   bertabrakan lagi dengan bar ini (regresi yang pernah terjadi 18 Agu 2026). */
.sdn-mnav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    background: var(--sdn-surface);
    border-top: 1px solid var(--sdn-border);
    box-shadow: 0 -6px 22px rgba(15,23,42,.08);
    border-radius: 20px 20px 0 0;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    justify-content: space-around; align-items: stretch; gap: 4px;
}
.sdn-mnav-item {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 4px 2px; border-radius: var(--sdn-r-sm);
    color: var(--sdn-muted); text-decoration: none;
    font-size: .64rem; font-weight: 700; text-align: center;
    border: none; background: transparent; font-family: inherit; cursor: pointer;
    transition: var(--sdn-t);
}
.sdn-mnav-item i { font-size: 1.12rem; }
.sdn-mnav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sdn-mnav-item.is-active { color: var(--sdn-primary); }
.sdn-mnav-item:hover { color: var(--sdn-text); }

/* ---------- 15. RESPONSIF ---------- */

/* Layar menengah: rapatkan padding & sidebar */
@media (max-width: 1280px) {
    :root { --sdn-sidebar-w: 240px; }
    .sdn-content { padding: 22px 22px 56px; }
    .sdn-topbar { padding: 13px 22px; }
    .sdn-hero { padding: 34px 30px; }
}

/* Kartu pesanan tidak muat berdampingan -> tumpuk */
@media (max-width: 1140px) {
    .sdn-detail { grid-template-columns: 1fr; }
    .sdn-order { position: static; }
}

/* Sidebar jadi laci geser + tombol hamburger */
@media (max-width: 1099px), (orientation: portrait) {
    .sdn-app {
        /* minmax(0,1fr), BUKAN 1fr: track "1fr" berarti minmax(auto,1fr) dan
           masih boleh melar melebihi layar kalau ada isi yang keras kepala,
           yang bikin seluruh halaman bisa digeser ke samping. */
        grid-template-columns: minmax(0, 1fr);
        margin: 0;
        border-radius: 0;
        border-left: none; border-right: none; border-top: none;
        min-height: 100vh;
        box-shadow: none;
    }
    /* Sudut membulat "jendela" tidak berlaku lagi saat layar penuh. */
    .sdn-main { border-left: none; border-radius: 0; }
    .sdn-topbar { border-radius: 0; }

    .sdn-side {
        border-radius: 0;
        position: fixed; top: 0; left: 0; z-index: 3200;
        width: min(288px, 86vw); height: 100vh; height: 100dvh;
        max-height: none;
        border-right: 1px solid var(--sdn-border);
        box-shadow: 14px 0 44px rgba(15,23,42,.18);
        transform: translateX(-102%);
        transition: transform .32s cubic-bezier(.4,0,.2,1);
        visibility: hidden;
    }
    .sdn-side.is-open { transform: none; visibility: visible; }

    .sdn-burger { display: flex; }
    .sdn-topbar-brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
    /* flex-wrap WAJIB di sini: .sdn-search di bawah memakai flex-basis 100%
       untuk turun ke baris sendiri. Tanpa wrap, lebar 100% itu tetap dipaksa
       satu baris bersama hamburger + logo + tombol aksi, dan halaman jadi
       lebih lebar dari layar (bisa digeser ke samping). */
    .sdn-topbar { padding: 11px 16px; gap: 10px; flex-wrap: wrap; }
    .sdn-content { padding: 18px 16px 48px; gap: 20px; }

    /* Pencarian pindah ke baris sendiri agar tidak sesak */
    .sdn-search { order: 10; flex: 1 0 100%; min-width: 0; max-width: 100%; }
    .sdn-topbar-actions { margin-left: auto; }
    .sdn-kbd { display: none; }
    .sdn-search input { padding-right: 18px; }

    .sdn-hero { grid-template-columns: 1fr; padding: 28px 24px; text-align: left; }
    .sdn-hero-art { width: 100%; max-width: 300px; margin-top: 6px; }
    .sdn-hero-glow { right: -160px; top: -220px; }
}

/* Ponsel: navigasi bawah aktif */
@media (max-width: 899px), (orientation: portrait) {
    .sdn-mnav { display: flex; }
    /* Ruang untuk bar bawah + tombol mengambang chat/info perusahaan */
    .sdn-content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    .sdn-drawer-foot { max-height: 58vh; }
}

@media (max-width: 640px) {
    body.sdn-body { font-size: 14.5px; }
    .sdn-topbar { padding: 10px 13px; }
    .sdn-content { padding: 15px 13px calc(96px + env(safe-area-inset-bottom)); }
    .sdn-hero { padding: 24px 20px; border-radius: var(--sdn-r-lg); }
    .sdn-hero-art { max-width: 220px; }

    /* Baris pertama topbar harus muat di 360px TANPA membungkus.
       Hitungannya: hamburger 38 + logo 76 + 4 tombol 36 + jarak 8
       = 298px, sedangkan ruang di 360px = 360 - 26 (padding) = 334px. */
    .sdn-topbar { gap: 8px; }
    .sdn-burger { width: 38px; height: 38px; }
    .sdn-topbar-brand img { height: 26px; }
    .sdn-icon-btn { width: 36px; height: 36px; font-size: .95rem; }
    .sdn-topbar-actions { gap: 8px; }

    .sdn-account-info { display: none; }
    .sdn-account { padding: 2px; max-width: none; }
    .sdn-account > i.fa-chevron-down { display: none; }
    .sdn-avatar, .sdn-avatar-fb { width: 32px; height: 32px; }

    .sdn-cart-btn { padding: 0; width: 36px; height: 36px; justify-content: center; border-radius: 50%; }
    .sdn-cart-btn span.sdn-cart-label { display: none; }
    .sdn-cart-btn .sdn-badge-count { position: absolute; top: -4px; right: -4px; border: 2px solid var(--sdn-surface); }

    .sdn-grid-quick   { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 13px; }
    .sdn-grid-product { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 13px; }
    .sdn-grid-news    { grid-template-columns: 1fr; }
    .sdn-quick { padding: 16px; gap: 9px; }
    .sdn-quick-name { font-size: .92rem; }
    .sdn-prod { padding: 15px 14px; gap: 9px; }
    .sdn-prod-thumb { width: 40px; height: 40px; }
    .sdn-durations { grid-template-columns: 1fr; }
    .sdn-specs { grid-template-columns: 1fr; }
    .sdn-detail-media { min-height: 190px; }
    .sdn-detail-media > i { font-size: 3.4rem; }
    .sdn-subbar { gap: 10px; }
    .sdn-pills { width: 100%; }
    .sdn-pill { flex: 1; justify-content: center; }
}

/* Sangat sempit: cegah teks panjang mendorong layout */
@media (max-width: 380px) {
    .sdn-side-brand img { height: 38px; }
    .sdn-grid-quick, .sdn-grid-product { grid-template-columns: 1fr 1fr; }
    .sdn-mnav-item span { font-size: .58rem; }
}

/* Baris topbar + logo butuh 298px, jadi logo masih muat sampai lebar layar
   ~324px (298 + 26px padding). Di bawah itu logo disembunyikan supaya baris
   tidak membungkus -- identitas merek tetap ada di dalam laci sidebar.
   Menang atas display:flex di blok 1099px lewat urutan sumber. */
@media (max-width: 340px) {
    .sdn-topbar-brand { display: none; }
}

/* ---------- 16. UTILITAS ---------- */
.sdn-stack   { display: flex; flex-direction: column; gap: 14px; }
.sdn-split   { display: grid; grid-template-columns: 1.55fr 1fr; gap: 26px; align-items: start; }
.sdn-two-col { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 26px; align-items: start; }
@media (max-width: 1099px), (orientation: portrait) {
    .sdn-split, .sdn-two-col { grid-template-columns: 1fr; gap: 20px; }
}
.sdn-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sdn-muted { color: var(--sdn-muted); }
.sdn-hide  { display: none !important; }

/* Kotak notifikasi sukses */
.sdn-alert {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 18px; border-radius: var(--sdn-r-md);
    background: var(--sdn-success-50); border: 1px solid var(--sdn-success-100);
    color: var(--sdn-success); font-size: .87rem; font-weight: 700;
}
.sdn-alert i { font-size: 1.05rem; }
.sdn-alert--err { background: var(--sdn-danger-50); border-color: var(--sdn-danger-100); color: var(--sdn-danger); }

/* Tabel/blok lebar wajib bisa digeser sendiri, bukan mendorong halaman */
.sdn-scroll-x { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

/* ---------- 17. WARNA ILUSTRASI HERO ---------- */
/* SVG hero memakai currentColor, jadi cukup set `color` pada wadahnya. */
.sdn-hero--brand .sdn-hero-art { color: #ffffff; }
.sdn-hero--soft  .sdn-hero-art { color: var(--sdn-primary); }

/* ---------- 18. CATATAN WIDGET LAMA ---------- */
/* Dropdown hasil pencarian global (public/assets/js/search-widget.js) menyuntik
   <style> sendiri saat dijalankan. Warnanya sudah diubah memakai token di file
   ini dengan pola var(--sdn-x, #warna-lama), jadi ikut tema gelap sekaligus
   tetap aman kalau suatu saat dimuat di halaman tanpa sdn-ui.css.
   Tidak ada override yang perlu ditulis di sini. */

/* ---------- 19. PENJAGA LEBAR ---------- */
/* Judul/nama produk bisa mengandung kata panjang tanpa spasi (URL, kode).
   Tanpa ini satu kata saja bisa melebarkan halaman di layar sempit. */
.sdn-hero h1,
.sdn-detail-title,
.sdn-prod-name,
.sdn-news-title,
.sdn-quick-name,
.sdn-crumb strong,
.sdn-ci-info h4 {
    overflow-wrap: anywhere;
}

/* Media tidak boleh melampaui kolomnya.
   JANGAN PERNAH menambahkan `height: auto` di sini. Blok ini berada di akhir
   file dengan spesifisitas yang sama (0,1,1) seperti `.sdn-topbar-brand img`,
   `.sdn-side-brand img`, dan `.sdn-prod-thumb`, jadi ia MENANG lewat urutan
   sumber dan membatalkan seluruh tinggi eksplisit -- logo lalu membesar
   sampai selebar bar (kejadian nyata 19 Agu 2026). `max-width` saja sudah
   cukup untuk menahan luapan; `img` bahkan sudah ditangani di bagian 3. */
.sdn-body svg, .sdn-body video { max-width: 100%; }

/* ---------- 20. HALAMAN OTENTIKASI ---------- */
/* Dipakai bersama oleh auth/login-view.php dan auth/reset-view.php. */
.auth-wrap {
    position: relative; overflow: hidden;
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px 20px;
}
.auth-blob { position: absolute; z-index: 0; width: 380px; height: 380px; border-radius: 50%; filter: blur(90px); opacity: .5; pointer-events: none; }
.auth-blob.b1 { background: var(--sdn-primary-s); top: -120px; left: -80px; }
.auth-blob.b2 { background: var(--sdn-primary);   top: -90px;  right: -90px; }
.auth-blob.b3 { background: var(--sdn-success);   bottom: -160px; left: 40%; opacity: .28; }

.auth-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 430px;
    background: var(--sdn-surface);
    border: 1px solid var(--sdn-border);
    border-radius: var(--sdn-r-xl);
    box-shadow: var(--sdn-sh-lg);
    padding: 34px 30px;
}
.auth-head { text-align: center; margin-bottom: 26px; }
.auth-logo { height: 44px; width: auto; object-fit: contain; margin-bottom: 16px; }
.auth-head h1 { margin: 0 0 6px; font-size: 1.32rem; font-weight: 800; letter-spacing: -.4px; }
.auth-head p { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--sdn-muted); font-weight: 500; }

.auth-field { margin-bottom: 15px; }
.auth-label { display: block; margin-bottom: 7px; font-size: .68rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--sdn-muted); }
.auth-input-wrap { position: relative; }
.auth-input-wrap > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--sdn-faint); font-size: .88rem; pointer-events: none; }
.auth-input {
    width: 100%; padding: 13px 15px 13px 42px;
    border: 1px solid var(--sdn-border); border-radius: var(--sdn-r-sm);
    background: var(--sdn-surface-2); color: var(--sdn-text);
    font-family: inherit; font-size: .88rem; font-weight: 600;
    transition: var(--sdn-t);
}
.auth-input::placeholder { color: var(--sdn-muted); font-weight: 500; }
.auth-input:focus { outline: none; background: var(--sdn-surface); border-color: var(--sdn-primary); box-shadow: var(--sdn-ring); }
select.auth-input {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center;
    padding-right: 36px;
}

.auth-sep { display: flex; align-items: center; gap: 14px; margin: 22px 0; }
.auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--sdn-border); }
.auth-sep span { font-size: .64rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--sdn-muted); }

/* Tombol Google mengikuti pedoman merek Google: latar putih, teks gelap,
   border netral. Warnanya SENGAJA tidak ikut token tema. */
.btn-google {
    width: 100%; padding: 12px;
    display: flex; align-items: center; justify-content: center; gap: 11px;
    background: #ffffff; color: #1f1f1f;
    border: 1px solid #747775; border-radius: var(--sdn-r-sm);
    font-family: inherit; font-size: .87rem; font-weight: 500;
    text-decoration: none; cursor: pointer; transition: var(--sdn-t);
}
.btn-google:hover { background: #f6f6f6; box-shadow: var(--sdn-sh-sm); }

.auth-foot { margin-top: 24px; text-align: center; font-size: .82rem; color: var(--sdn-muted); font-weight: 600; }
.auth-foot a { color: var(--sdn-primary); font-weight: 800; text-decoration: none; cursor: pointer; }
.auth-foot a:hover { text-decoration: underline; }

.auth-theme { position: absolute; top: 18px; right: 18px; z-index: 2; }
.auth-back  { position: absolute; top: 18px; left: 18px;  z-index: 2; }

.auth-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 15px; margin-bottom: 18px;
    border-radius: var(--sdn-r-sm); font-size: .82rem; font-weight: 700; line-height: 1.5;
}
.auth-alert.is-err { background: var(--sdn-danger-50);  border: 1px solid var(--sdn-danger-100);  color: var(--sdn-danger); }
.auth-alert.is-ok  { background: var(--sdn-success-50); border: 1px solid var(--sdn-success-100); color: var(--sdn-success); }

.auth-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(15,23,42,.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.auth-modal.modal-active { display: flex; animation: authFade .25s ease-out; }
@keyframes authFade { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
    .auth-card { padding: 28px 20px; border-radius: var(--sdn-r-lg); }
    .auth-blob { width: 260px; height: 260px; }
}

/* ---------- 21. UBIN PENGGANTI GAMBAR KERANJANG ---------- */
/* Dipakai saat item keranjang tidak punya gambar. Dulu di sini dipanggil
   ui-avatars.com -- satu request pihak ketiga per item, ikut mati kalau
   layanannya mati, dan nama produk terkirim ke luar. Sekarang lokal. */
.sdn-ci-img--ph {
    display: flex; align-items: center; justify-content: center;
    background: var(--sdn-primary-100);
    color: var(--sdn-primary);
    font-size: 1.1rem;
}