/* ============ PAGE TRANSITION (native, zero-JS, aman & ringan) ============ */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:fadeOutPage .12s ease forwards;}
::view-transition-new(root){animation:fadeInPage .25s ease forwards;}
@keyframes fadeOutPage{to{opacity:0;}}
@keyframes fadeInPage{from{opacity:0;} to{opacity:1;}}

:root{
    /* ---- Editorial Dark: surface & material tokens ---- */
    --ink:#F2F1ED;
    --ink-soft:#98999E;
    --paper:#1D1E22;
    --surface:#1D1E22;
    --grey:#26272B;
    --grey-dark:#3A3B40;
    --nm-light:rgba(255,255,255,.04);
    --nm-dark:rgba(0,0,0,.5);
    --nm-dark-strong:rgba(0,0,0,.62);
    --nm-contact:rgba(0,0,0,.4);
    --nm-contact-light:rgba(255,255,255,.03);
    /* ---- Panel/card material tokens: Glassmorphism gelap — kaca buram tipis
       di atas charcoal, bukan solid flat — sesuai preferensi terbaru. ---- */
    --glass-bg:rgba(255,255,255,.055);
    --glass-bg-soft:rgba(255,255,255,.035);
    --glass-border:rgba(255,255,255,.14);
    --glass-blur:18px;
    --glass-blur-sm:11px;
    --lime:#6C8BFF;
    --lime-soft:#1C2540;
    --green:#3ECF8E;
    --green-soft:#123226;
    --danger:#F0605F;
    --danger-soft:#3A1E1F;
    --admin-blue:#6C8BFF;

    /* ---- Variabel tambahan yang bisa diubah lewat Admin > Appearance ---- */
    --secondary:#8FA3FF;
    --btn-bg:#F2F1ED;
    --navbar-bg:#1D1E22;
    --footer-bg:#151619;
    --footer-card:#1B1C20;
    --footer-link:#8C8D93;
    --link-color:#B5B6BC;
    --link-hover-color:#F2F1ED;
    --icon-color:#F2F1ED;
    --border-color:rgba(255,255,255,.09);

    --border:1px solid var(--glass-border);
    --border-thick:none;
    --ease:cubic-bezier(.4,0,.2,1);
    /* Editorial premium: shadow tipis & subtle saja — bukan neumorphism ganda.
       Formula lama tetap dipertahankan strukturnya (dipakai di banyak komponen)
       tapi nilainya diratakan jadi drop-shadow gelap yang halus. */
    --shadow:
        0 1px 2px rgba(0,0,0,.5),
        0 10px 28px rgba(0,0,0,.38);
    --shadow-sm:
        0 1px 2px rgba(0,0,0,.45),
        0 5px 16px rgba(0,0,0,.3);
    --shadow-lg:
        0 2px 4px rgba(0,0,0,.5),
        0 20px 48px rgba(0,0,0,.45);
    --shadow-inset:
        inset 0 1px 3px rgba(0,0,0,.55);
    --shadow-inset-sm:
        inset 0 1px 2px rgba(0,0,0,.45);
    --radius:14px;
    --radius-btn:10px;
    --radius-sm:10px;
    --font-display:'Barlow Condensed', sans-serif;
    --font-body:'Barlow Condensed', sans-serif;

    /* ---- Footer: dark minimalist, senada dengan palet utama ---- */
    --ftr-card-grad:linear-gradient(155deg, #1B1C20 0%, #151619 100%);
    --ftr-border:1px solid rgba(255,255,255,.07);
    --ftr-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.4);
    --ftr-shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.35);
    --ftr-glow:0 0 0 1px rgba(108,139,255,.25);
}

/* ---- Mobile: kedalaman tetap terasa tapi jarak/blur shadow dipadatkan supaya
   tidak melebar keluar kartu atau memicu scroll horizontal di layar kecil. ---- */
@media (max-width:640px){
    :root{
        --shadow:
            0 1px 2px rgba(0,0,0,.45),
            0 6px 18px rgba(0,0,0,.35);
        --shadow-sm:
            0 1px 2px rgba(0,0,0,.4),
            0 4px 10px rgba(0,0,0,.28);
        --shadow-lg:
            0 2px 4px rgba(0,0,0,.45),
            0 12px 30px rgba(0,0,0,.4);
        --shadow-inset:
            inset 0 1px 3px rgba(0,0,0,.5);
        --shadow-inset-sm:
            inset 0 1px 2px rgba(0,0,0,.4);
        --ftr-shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.35);
        --ftr-shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.3);
        --ck-shadow:1px 1px 2px rgba(163,177,198,.38), 5px 5px 11px rgba(163,177,198,.38), -1px -1px 2px rgba(255,255,255,.65), -5px -5px 11px rgba(255,255,255,.8), inset 1px 1px 0 rgba(255,255,255,.45);
        --ck-shadow-sm:1px 1px 2px rgba(163,177,198,.34), 4px 4px 9px rgba(163,177,198,.34), -4px -4px 9px rgba(255,255,255,.78), inset 1px 1px 0 rgba(255,255,255,.4);
        --ck-shadow-lg:1.5px 1.5px 3px rgba(163,177,198,.4), 8px 8px 17px rgba(163,177,198,.4), -8px -8px 16px rgba(255,255,255,.82), inset 1px 1px 0 rgba(255,255,255,.5);
        --ck-shadow-inset:inset 4px 4px 9px rgba(163,177,198,.34), inset -4px -4px 9px rgba(255,255,255,.75);
        --ck-shadow-inset-sm:inset 3px 3px 6px rgba(163,177,198,.32), inset -3px -3px 6px rgba(255,255,255,.72);
    }
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
    font-family:var(--font-body);
    background:var(--surface);
    color:var(--ink);
    font-size:11px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%; display:block;}
input, button, select, textarea, optgroup, option{font-family:inherit;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; letter-spacing:-0.005em; line-height:1.2; color:var(--ink);}
h1{font-size:26px;} h2{font-size:22px;} h3{font-size:16px;} h4{font-size:13px;}
p{font-size:11px; color:var(--ink-soft);}
:focus-visible{outline:2px solid var(--lime); outline-offset:2px; border-radius:6px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important;}}

svg.icon{
    width:16px; height:16px; min-width:16px; flex-shrink:0;
    display:inline-block; vertical-align:-3px;
}

.container{max-width:1200px; margin:0 auto; padding:0 16px;}

/* ============ NAVBAR ============ */
.navbar{
    position:sticky; top:0; z-index:100;
    /* isolation:isolate -> navbar SELALU jadi stacking context sendiri, jadi elemen
       apapun di dalam hero/section (animasi, transform, blur) tidak akan pernah bisa
       menimpa/menutupi navbar meski punya z-index tinggi di dalam konteksnya sendiri. */
    isolation:isolate;
    background:var(--navbar-bg);
    background:color-mix(in srgb, var(--navbar-bg) 78%, transparent);
    border-bottom:1px solid var(--glass-border);
    box-shadow:0 1px 0 rgba(255,255,255,.6), 0 2px 5px var(--nm-contact), 0 10px 22px var(--nm-dark);
    backdrop-filter:blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
    height:80px; display:flex; align-items:center;
    padding:0; width:100%;
}
.navbar .inner{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; max-width:100%; flex-wrap:nowrap;}
/* Di layar lebar (>1600px, saat nav-menu tampil sebagai 1 baris), inner navbar boleh
   melebihi max-width:1200px milik .container biasa — supaya 16 menu item punya ruang
   yang cukup dan tidak terpaksa berhimpitan. Container konten lain TIDAK terpengaruh
   karena selector ini hanya menyasar .navbar .inner. */
@media (min-width:1601px){
    .navbar .inner{max-width:1720px; padding:0 24px; margin:0 auto;}
}
.brand{
    display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700;
    font-size:22px; color:var(--ink); line-height:1; flex-shrink:0; white-space:nowrap;
    min-width:0; overflow:hidden; text-overflow:ellipsis;
}
.brand .brand-badge{
    width:44px; height:44px; min-width:44px; max-width:44px; height:44px; background:transparent; border:none;
    border-radius:0; object-fit:contain; padding:0; flex-shrink:0;
    box-shadow:none;
}

/* ---- Logo gambar "PERKASA HOSTING INDONESIA" (wordmark chrome/biru, rasio lebar ~3:1) ----
   Dipakai di navbar & footer. Tinggi tetap, lebar menyesuaikan (object-fit:contain)
   supaya logo tidak gepeng di layar manapun. */
.brand-logo-link{ transition:opacity .2s var(--ease); }
.brand-logo-link:hover, .brand-logo-link:focus-visible{ opacity:.85; }
.brand-logo-img{
    height:67px; width:auto; max-width:364px; object-fit:contain;
    display:block; flex-shrink:0;
}
.ftr-brand .brand .brand-logo-img{ height:59px; max-width:320px; }
/* overflow:visible + tiap <li> dikunci flex-shrink:0 supaya item TIDAK PERNAH dipaksa
   menyusut di bawah lebar kontennya sendiri (itu penyebab teks saling bertumpuk).
   Kalau baris ini benar-benar kehabisan ruang, breakpoint di bawah akan memindahkan
   seluruh menu ke hamburger — bukan mengecilkan/menghimpitkan teks. */
.nav-menu{display:flex; align-items:center; gap:6px; flex-wrap:nowrap; overflow:visible; position:relative; z-index:1;}
.nav-menu li{flex-shrink:0; list-style:none; margin:0; padding:0;}
/* Tombol/menu navbar DIKUNCI putih (#FFFFFF) supaya tidak pernah menyatu dengan
   background navbar yang gelap, apapun nilai --link-color/--lime dari Admin > Appearance. */
.nav-menu a{
    display:inline-flex; align-items:center; gap:6px; padding:9px 12px; font-size:12px; font-weight:600; border-radius:10px;
    background:transparent; color:#FFFFFF !important; white-space:nowrap; flex-shrink:0;
    transition:box-shadow .25s var(--ease), background .25s var(--ease), opacity .25s var(--ease);
}
.nav-menu a:hover{box-shadow:var(--shadow-inset-sm); background:rgba(255,255,255,.08); opacity:1;}
.nav-menu a:focus-visible{outline:2px solid #FFFFFF; outline-offset:2px;}
.nav-menu a:active{box-shadow:var(--shadow-inset-sm);}
.nav-menu a:visited{color:#FFFFFF !important;}
.nav-badge{display:inline-flex; align-items:center; justify-content:center; min-width:15px; height:15px; padding:0 4px; border-radius:20px; background:var(--danger,#EF4444); color:#fff; font-size:9px; font-weight:800; margin-left:4px; vertical-align:middle;}
.nav-actions{display:flex; align-items:center; gap:8px; flex-shrink:0; position:relative; z-index:1;}
/* Tombol "Install App" di navbar: teks dikunci putih + background gelap solid,
   supaya kontras tetap terjaga walau --surface diubah dari Admin > Appearance. */
.nav-actions .btn{color:#FFFFFF !important;}
.nav-toggle{
    display:none; align-items:center; justify-content:center; flex-direction:column; gap:5px;
    width:40px; height:40px; border:none; background:transparent; box-shadow:none;
    padding:0; border-radius:10px; cursor:pointer; position:relative; z-index:1;
    transition:background-color .25s var(--ease), transform .2s var(--ease);
}
.nav-toggle-bar{
    display:block; height:2px; border-radius:2px; background:#FFFFFF;
    box-shadow:0 1px 1px rgba(255,255,255,.7), 0 -1px 1px rgba(163,177,198,.3);
    transition:width .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.nav-toggle-bar:nth-child(1){width:20px;}
.nav-toggle-bar:nth-child(2){width:26px;}
.nav-toggle-bar:nth-child(3){width:15px;}
.nav-toggle:hover .nav-toggle-bar{background:#FFFFFF;}
.nav-toggle:hover .nav-toggle-bar:nth-child(1){width:26px;}
.nav-toggle:hover .nav-toggle-bar:nth-child(3){width:20px;}
.nav-toggle:active{transform:scale(.92);}
.nav-toggle:active .nav-toggle-bar{background:#FFFFFF;}
.nav-toggle:focus-visible{outline:2px solid #FFFFFF; outline-offset:3px;}

/* ============ BUTTONS ============ */
/* Border eksplisit (bukan cuma andalkan box-shadow) supaya tombol TIDAK PERNAH
   "hilang"/putih-di-atas-putih walau warna tema surface & navbar dibuat sama oleh admin. */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    font-family:var(--font-body); font-weight:600; font-size:12px;
    padding:9px 16px; height:44px; border:var(--border); border-radius:var(--radius-btn);
    background:var(--glass-bg); color:var(--ink); cursor:pointer;
    box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(163,177,198,.08);
    backdrop-filter:blur(var(--glass-blur-sm)); -webkit-backdrop-filter:blur(var(--glass-blur-sm));
    position:relative; overflow:hidden;
    transition:box-shadow .25s var(--ease), transform .22s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn:hover{box-shadow:var(--shadow), inset 0 0 0 1px rgba(163,177,198,.08); transform:translateY(-1px); color:var(--ink);}
.btn:active{box-shadow:var(--shadow-inset); transform:translateY(0);}
.btn:focus-visible{color:var(--ink);}
.btn:visited{color:var(--ink);}
.btn:disabled{opacity:.55; cursor:not-allowed; box-shadow:var(--shadow-inset-sm); transform:none;}
.btn-primary{background:var(--btn-bg); color:#15161A; box-shadow:var(--shadow-sm);}
.btn-primary:hover{box-shadow:var(--shadow), 0 0 0 1px rgba(108,139,255,.35); color:#15161A; transform:translateY(-1px);}
.btn-primary:visited{color:#15161A;}
.btn-dark{background:var(--ink); color:var(--paper); box-shadow:var(--shadow-sm);}
.btn-dark:hover{color:var(--paper);}
.btn-sm{padding:8px 14px; font-size:11.5px; height:36px;}
.btn-block{width:100%;}
.btn svg{width:15px; height:15px;}
.nav-actions .btn{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm), inset 0 0 0 1px var(--nm-dark);}
.btn-ripple{
    position:absolute; border-radius:50%; background:rgba(255,255,255,.35); pointer-events:none;
    transform:scale(0); animation:rippleAnim .5s ease-out forwards;
}
@keyframes rippleAnim{to{transform:scale(2.6); opacity:0;}}

/* ============ CARDS ============ */
.card{
    position:relative;
    background:var(--glass-bg); border:var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:14px;
    backdrop-filter:blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
    transition:box-shadow .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
/* Garis highlight tipis di tepi atas — permukaan terasa punya "lipatan"/tepi
   terangkat, bukan cuma persegi dengan shadow di sekelilingnya. */
.card::before{
    content:""; position:absolute; top:1px; left:16px; right:16px; height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    pointer-events:none; border-radius:2px;
}
a.card:hover, .card.hoverable:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.card > svg.icon{width:22px; height:22px; min-width:22px;}
.card-flat{
    border:var(--border); border-radius:var(--radius-sm); padding:11px; background:var(--glass-bg-soft); box-shadow:var(--shadow-inset-sm);
    backdrop-filter:blur(var(--glass-blur-sm)); -webkit-backdrop-filter:blur(var(--glass-blur-sm));
}

/* ============ BADGE / TAG ============ */
.badge{
    display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700;
    padding:5px 10px; border:var(--border); border-radius:20px; background:var(--surface);
    box-shadow:var(--shadow-inset-sm); text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft);
}
.badge-lime{background:var(--lime-soft); color:var(--lime); box-shadow:none;}
.badge-green{background:var(--green-soft); color:var(--green); box-shadow:none;}

/* ============ SECTION LABEL ============ */
.section-label{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-body); font-weight:700; font-size:11px;
    text-transform:uppercase; letter-spacing:3px; color:var(--lime);
    margin-bottom:10px;
}
.section-label::before{content:""; display:inline-block; width:26px; height:2px; background:var(--lime); border-radius:2px; flex-shrink:0;}
.section-label.on-dark{color:var(--secondary);}
.section-label.on-dark::before{background:var(--secondary);}

/* ============ CORNER TAG ============ */
.tag-inline{
    display:inline-block; font-family:var(--font-display); font-weight:700; font-size:10px;
    text-transform:uppercase; letter-spacing:1.5px; color:var(--lime); border-bottom:2px solid var(--lime); padding-bottom:2px;
}
.corner-tag{
    position:absolute; top:-11px; left:14px; background:var(--surface); box-shadow:var(--shadow-sm);
    padding:4px 8px; font-family:var(--font-display); font-weight:700; font-size:10px; border-radius:8px;
    text-transform:uppercase; letter-spacing:1.5px; color:var(--lime);
}

/* ============ PREMIUM SIDEBAR ============ */
.sidebar-overlay{
    position:fixed; inset:0; background:rgba(46,52,64,.35); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .25s var(--ease); z-index:200;
}
.sidebar-overlay.open{opacity:1; pointer-events:auto;}
.premium-sidebar{
    position:fixed; top:0; right:0; height:100vh; width:clamp(240px, 76vw, 300px); max-width:300px;
    background:var(--surface); background:color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter:blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
    border-left:1px solid var(--glass-border); box-shadow:-8px 0 22px rgba(46,52,64,.12); z-index:201;
    display:flex; flex-direction:column; transform:translateX(100%);
    transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.premium-sidebar.open{transform:translateX(0);}
.sidebar-top{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:13px; box-shadow:0 1px 5px var(--nm-dark);}
.sidebar-profile{display:flex; align-items:center; gap:10px; min-width:0;}
.sidebar-avatar{
    width:36px; height:36px; border-radius:50%; background:var(--surface); border:none; box-shadow:var(--shadow-sm);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-display);
    color:var(--icon-color); font-size:14px; flex-shrink:0; overflow:hidden;
}
.sidebar-avatar img{width:100%; height:100%; object-fit:cover; display:block; border-radius:50%;}
.profile-avatar-preview{
    width:84px; height:84px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-sm);
    display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
    font-weight:700; font-family:var(--font-display); color:var(--icon-color); font-size:30px;
}
.profile-avatar-preview img{width:100%; height:100%; object-fit:cover; display:block;}
.sidebar-username{font-weight:700; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px;}
.sidebar-close{border:none; background:var(--surface); border-radius:10px; width:32px; height:32px; box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.sidebar-close:active{box-shadow:var(--shadow-inset-sm);}
.sidebar-body{flex:1; overflow-y:auto; padding:11px;}
.sidebar-section-title{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#9AA5B1; font-weight:700; margin:14px 6px 8px;}
.sidebar-section-title:first-child{margin-top:2px;}
/* Menu di drawer mobile (dibuka lewat hamburger navbar) — teks dikunci putih juga,
   supaya konsisten & tetap terlihat jelas di mobile, senada dengan fix navbar desktop. */
.sidebar-link{
    display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm);
    font-size:12px; font-weight:600; color:#FFFFFF !important; position:relative;
    transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.sidebar-link:hover{box-shadow:var(--shadow-inset-sm); background:rgba(255,255,255,.06);}
.sidebar-link:active{transform:scale(.98);}
.sidebar-link[style*="background:var(--grey)"]{font-weight:700; box-shadow:var(--shadow-inset-sm); background:rgba(255,255,255,.12)!important; color:#FFFFFF !important;}
/* Kecuali link Logout: tetap merah (danger) sebagai penanda aksi destruktif */
.sidebar-link[style*="color:var(--danger)"]{color:var(--danger) !important;}
.sidebar-footer{border-top:none; box-shadow:0 -1px 5px var(--nm-dark); padding:11px 13px; font-size:11px; color:var(--ink-soft);}
.sidebar-toko-status{display:flex; align-items:center; gap:7px; font-weight:700; margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em; font-size:10.5px;}
.status-dot{width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; box-shadow:0 0 0 3px var(--surface), var(--shadow-sm);}
.status-dot.status-buka{background:var(--green);}
.status-dot.status-maintenance{background:#F0A93B;}
.status-dot.status-tutup{background:var(--danger);}

/* ============ HERO ============ */
.hero{padding:32px 0 26px; border-bottom:none; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center;}
.hero-copy{min-width:0;}
.hero-visual{min-width:0;}
.hero .eyebrow{margin-bottom:9px;}
.hero h1{font-size:clamp(26px,5vw,42px); margin-bottom:11px;}
.hero p.lead{font-size:13px; max-width:560px; color:var(--ink-soft); margin-bottom:15px;}
.hero-actions{display:flex; gap:8px; flex-wrap:wrap;}
.hero-visual{
    border:var(--border); border-radius:var(--radius); background:var(--glass-bg);
    box-shadow:var(--shadow-lg); padding:14px;
    backdrop-filter:blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
}

/* ============ GRID / SECTIONS ============ */
section{padding:25px 0;}
.section-head{margin-bottom:16px; max-width:600px;}
.section-head .badge{margin-bottom:8px;}
.section-head h2{font-size:clamp(20px,3.5vw,30px); margin-bottom:6px;}
.section-head p{color:var(--ink-soft); font-size:12.5px;}
.grid{display:grid; gap:11px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}

/* ============ STAT ============ */
.stat-card{text-align:center; padding:14px 10px;}
.stat-card .num{font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--lime);}
.stat-card .label{font-size:12px; color:var(--ink-soft); margin-top:2px;}

/* ============ PRODUCT / TICKET CARD ============ */
.ticket{
    position:relative; border:var(--border); border-radius:var(--radius); background:var(--glass-bg);
    backdrop-filter:blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
    box-shadow:var(--shadow); padding:14px; display:flex; flex-direction:column; gap:8px;
}
.ticket::before, .ticket::after{
    content:""; position:absolute; width:14px; height:14px; background:var(--surface);
    border:none; box-shadow:var(--shadow-inset-sm); border-radius:50%; top:50%; transform:translateY(-50%);
}
.ticket::before{left:-8px;}
.ticket::after{right:-8px;}
.ticket .ticket-name{font-family:var(--font-display); font-weight:700; font-size:16px;}
.ticket .ticket-price{font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--lime);}
.ticket .ticket-specs{display:flex; flex-direction:column; gap:6px; font-size:12px; border-top:1px dashed var(--grey-dark); padding-top:10px; color:var(--ink-soft);}
.ticket .ticket-specs li{display:flex; align-items:center; gap:6px;}
.ticket .ticket-specs svg{width:13px; height:13px; flex-shrink:0;}

/* ============ STEP (Cara Order) ============ */
.step{display:flex; gap:10px; align-items:flex-start;}
.step .step-num{
    font-family:var(--font-display); font-weight:700; font-size:12px;
    width:30px; height:30px; border:var(--border); border-radius:50%; background:var(--surface); box-shadow:var(--shadow-sm); color:var(--icon-color);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.step h4{font-size:13px; margin-bottom:3px;}
.step p{font-size:12px; color:var(--ink-soft);}

/* ============ FORM ============ */
.form-wrap{max-width:420px; margin:0 auto;}
.field{margin-bottom:11px;}
.field label{display:block; font-size:12px; font-weight:700; margin-bottom:6px; color:var(--ink);}
.field input, .field select, .field textarea{
    width:100%; padding:9px 12px; font-size:12px; font-family:var(--font-body);
    border:var(--border); border-radius:var(--radius-sm); background:var(--glass-bg-soft); box-shadow:var(--shadow-inset-sm); color:var(--ink);
    transition:box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{box-shadow:var(--shadow-inset-sm), 0 0 0 1.5px rgba(14,165,233,.22); border-color:rgba(14,165,233,.3);}
.field-hint{font-size:11px; color:var(--ink-soft); margin-top:4px;}
.field-error{font-size:11px; color:var(--danger); margin-top:4px; font-weight:600;}

/* ============ ALERT / FLASH ============ */
.alert{
    border:var(--border); border-radius:var(--radius-sm); padding:10px 12px; font-size:12px; font-weight:600;
    margin-bottom:11px; display:flex; align-items:center; gap:8px; box-shadow:var(--shadow-inset-sm);
}
.alert-success{background:var(--green-soft); color:#0F7A54;}
.alert-error{background:var(--danger-soft); color:#C23C50;}
.alert svg{width:16px; height:16px; flex-shrink:0;}

/* ============ AUTH SYSTEM (Login / Register) — layered glass + deep neumorphism ============ */
/* Token khusus auth: depth jauh lebih kuat dari shadow global situs, dipakai TERBATAS
   di halaman login/register saja supaya tidak mengubah komponen lain di seluruh situs. */
:root{
    /* --auth-tint disamakan ke tema gelap "Editorial Dark" yang sudah dipakai di seluruh situs
       (dashboard, checkout, dll — lihat --paper/--surface #1D1E22 di atas). Sebelumnya masih
       gradient TERANG (#F7F9FB dst) peninggalan tema lama, jadi login/register kelihatan beda
       sendiri padahal kartu & komponen di dalamnya sudah pakai token warna gelap yang benar. */
    --auth-tint:linear-gradient(180deg, #1D1E22 0%, #1A1B1F 55%, #17181B 100%);
    --auth-raise-sm:6px 6px 14px var(--nm-dark-strong), -6px -6px 14px var(--nm-light), inset 1px 1px 0 rgba(255,255,255,.55), inset -1px -1px 0 rgba(163,177,198,.14);
    --auth-raise:11px 11px 24px var(--nm-dark-strong), -10px -10px 22px var(--nm-light), inset 1px 1px 0 rgba(255,255,255,.6), inset -1px -1px 0 rgba(163,177,198,.16);
    --auth-raise-lg:18px 18px 38px var(--nm-dark-strong), -16px -16px 34px var(--nm-light), inset 1px 1px 0 rgba(255,255,255,.65), inset -1px -1px 0 rgba(163,177,198,.18);
    --auth-inset:inset 8px 8px 16px var(--nm-dark-strong), inset -8px -8px 16px var(--nm-light);
    --auth-inset-sm:inset 5px 5px 10px var(--nm-dark-strong), inset -5px -5px 10px var(--nm-light);
}

/* Latar body juga ikut gelap (menghindari kilat putih di overscroll/sebelum CSS auth-page kebaca),
   sama seperti pola yang sudah dipakai untuk /checkout (lihat body:has(.checkout-page-pad)). */
body:has(.auth-page){background:var(--paper,#1D1E22);}

.auth-page{position:relative; padding:38px 0 56px; overflow:hidden; background:var(--auth-tint);}
.auth-bg-shapes{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.auth-shape{position:absolute; border-radius:50%; animation:authFloat 12s ease-in-out infinite; will-change:transform;}
/* Warna glow shape disamakan ke aksen biru-ungu + hijau situs saat ini (var(--lime)/var(--secondary)/
   var(--green)) — sebelumnya masih sky-blue/teal lama peninggalan tema terang. */
.auth-shape-1{width:460px; height:460px; top:-160px; left:-140px; background:radial-gradient(circle at 32% 32%, rgba(108,139,255,.22), rgba(108,139,255,0) 70%); filter:blur(10px); animation-duration:15s;}
.auth-shape-2{width:360px; height:360px; bottom:-120px; right:-100px; background:radial-gradient(circle at 60% 40%, rgba(62,207,142,.16), rgba(62,207,142,0) 70%); filter:blur(10px); animation-duration:17s; animation-delay:-4s;}
.auth-shape-3{width:220px; height:220px; top:46%; right:4%; background:radial-gradient(circle at 50% 50%, rgba(143,163,255,.2), rgba(143,163,255,0) 70%); filter:blur(8px); animation-duration:11s; animation-delay:-2s;}
.auth-shape-4{width:160px; height:160px; bottom:10%; left:3%; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.1), rgba(255,255,255,0) 70%); filter:blur(6px); animation-duration:13s; animation-delay:-7s;}
.auth-shape-grid{position:absolute; inset:0; opacity:.4; background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size:46px 46px; mask-image:radial-gradient(ellipse 70% 55% at 50% 30%, #000 0%, transparent 75%);}
@keyframes authFloat{0%,100%{transform:translate(0,0);} 50%{transform:translate(12px,-16px);}}


/* ---- Grid utama: editorial, bukan tumpukan card ---- */
.auth-shell{position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center;}
.auth-hero{min-width:0;}
.auth-hero .section-label{margin-bottom:16px;}
.auth-hero-title{font-size:clamp(26px,3.6vw,38px); margin-bottom:14px; line-height:1.16; letter-spacing:-.015em;}
.auth-hero-lead{font-size:13px; color:var(--ink-soft); max-width:440px; margin-bottom:30px; line-height:1.75;}

/* ---- Visual anchor: mockup dashboard mini kaca + neumorphic ---- */
.auth-visual{position:relative; width:100%; max-width:400px; margin:0 auto; padding:26px 30px;}
.auth-mockup{
    position:relative; z-index:2; border-radius:20px; overflow:hidden;
    background:var(--glass-bg); border:var(--border); box-shadow:var(--auth-raise-lg);
    backdrop-filter:blur(calc(var(--glass-blur) + 3px)) saturate(160%); -webkit-backdrop-filter:blur(calc(var(--glass-blur) + 3px)) saturate(160%);
}
.auth-mockup::before{content:""; position:absolute; top:0; left:16px; right:16px; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);}
.auth-mockup-bar{display:flex; align-items:center; gap:6px; padding:12px 14px; border-bottom:1px solid var(--glass-border); background:var(--glass-bg-soft);}
.auth-mockup-bar .dot{width:8px; height:8px; border-radius:50%; box-shadow:var(--auth-inset-sm);}
.auth-mockup-bar .dot-r{background:#F0A93B;} .auth-mockup-bar .dot-y{background:#EFD24D;} .auth-mockup-bar .dot-g{background:var(--green);}
.auth-mockup-url{margin-left:6px; font-size:9.5px; color:var(--ink-soft); font-family:'SFMono-Regular', Consolas, monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.auth-mockup-body{padding:16px;}
.auth-mockup-balance{
    display:flex; align-items:center; justify-content:space-between; padding:13px 14px; border-radius:14px;
    background:var(--surface); box-shadow:var(--auth-inset); margin-bottom:12px;
}
.auth-mockup-balance .label{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700; display:block; margin-bottom:3px;}
.auth-mockup-balance .val{font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ink);}
.auth-mockup-balance svg.icon{color:var(--icon-color); width:20px; height:20px;}
.auth-mockup-rows{display:flex; flex-direction:column; gap:8px; list-style:none;}
.auth-mockup-rows li{
    display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:11px;
    background:var(--glass-bg-soft); box-shadow:var(--auth-raise-sm); font-size:10.5px; color:var(--ink); font-weight:600;
}
.auth-mockup-rows li .status-dot{box-shadow:0 0 0 3px var(--surface), var(--auth-raise-sm); flex-shrink:0;}
.auth-mockup-rows li .tag{margin-left:auto; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft);}

/* ---- Chip kaca mengambang — tersusun rapi & simetris di 4 sudut ---- */
.auth-chip{
    position:absolute; z-index:3; display:flex; align-items:center; gap:9px; padding:9px 13px 9px 10px;
    border-radius:14px; background:var(--glass-bg); border:var(--border); box-shadow:var(--auth-raise-sm);
    backdrop-filter:blur(var(--glass-blur-sm)) saturate(150%); -webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(150%);
    animation:authFloat 8s ease-in-out infinite; white-space:nowrap;
}
.auth-chip-icon{width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--surface); box-shadow:var(--auth-raise-sm); color:var(--icon-color); flex-shrink:0;}
.auth-chip-icon svg{width:14px; height:14px;}
.auth-chip strong{display:block; font-size:10.5px; font-weight:800; color:var(--ink); line-height:1.3;}
.auth-chip span{display:block; font-size:9px; color:var(--ink-soft); font-weight:600;}
.auth-chip-tl{top:6px; left:-6px; animation-duration:9s;}
.auth-chip-tr{top:22px; right:-14px; animation-duration:10s; animation-delay:-3s;}
.auth-chip-bl{bottom:34px; left:-16px; animation-duration:11s; animation-delay:-5s;}
.auth-chip-br{bottom:6px; right:-4px; animation-duration:9.5s; animation-delay:-1.5s;}

/* ---- Kartu login/register: raised sangat jelas, tersusun rapi ---- */
.auth-card-wrap{min-width:0; display:flex; justify-content:center;}
.auth-card{
    width:100%; max-width:400px; padding:28px 26px; border-radius:20px;
    background:var(--glass-bg); border:var(--border); box-shadow:var(--auth-raise-lg);
    backdrop-filter:blur(calc(var(--glass-blur) + 5px)) saturate(165%); -webkit-backdrop-filter:blur(calc(var(--glass-blur) + 5px)) saturate(165%);
    position:relative;
}
.auth-card::before{content:""; position:absolute; top:1px; left:20px; right:20px; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); border-radius:2px;}
.auth-card-head{text-align:center; margin-bottom:20px;}
.auth-card-head .section-label{justify-content:center; margin-bottom:10px;}
.auth-card-head h1{font-size:19px;}
.auth-card-head p{font-size:11.5px; margin-top:6px; color:var(--ink-soft);}
.auth-card .field{margin-bottom:13px;}
.auth-card .field label{font-size:11.5px; letter-spacing:.01em;}
.auth-card .field input{
    background:var(--surface); box-shadow:var(--auth-inset); border:1px solid transparent; height:42px;
    transition:box-shadow .2s var(--ease);
}
.auth-card .field input:focus{box-shadow:var(--auth-inset), 0 0 0 2px rgba(14,165,233,.28); border-color:transparent;}
.auth-card .btn-primary{height:44px; border-radius:13px; font-weight:700; letter-spacing:.01em; box-shadow:var(--auth-raise); margin-top:2px;}
.auth-card .btn-primary:hover{box-shadow:var(--auth-raise-lg); transform:translateY(-1px);}
.auth-card .btn-primary:active{box-shadow:var(--auth-inset); transform:translateY(0);}
.auth-remember{display:flex; align-items:center; gap:8px; font-size:12px; margin-bottom:15px; cursor:pointer; color:var(--ink-soft);}
.auth-remember input{width:14px; height:14px;}
.auth-card-foot{text-align:center; font-size:12px; margin-top:16px; color:var(--ink-soft);}
.auth-card-foot a{font-weight:700; color:var(--lime); text-decoration:underline;}

@media (max-width:980px){
    .auth-shell{grid-template-columns:1fr; gap:0; justify-items:center;}
    /* Hero (badge, headline, deskripsi, mockup dashboard) hanya tampil di desktop/laptop */
    .auth-hero{display:none;}
    .auth-card-wrap{width:100%;}
}
@media (max-width:640px){
    .auth-page{padding:20px 0 30px;}
    .auth-card{padding:18px 16px; border-radius:16px; max-width:340px;}
    .auth-card-head{margin-bottom:14px;}
    .auth-card-head .section-label{font-size:8.5px; letter-spacing:1.8px; margin-bottom:8px;}
    .auth-card-head .section-label::before{width:16px;}
    .auth-card-head h1{font-size:14px;}
    .auth-card-head p{font-size:9px; margin-top:4px;}
    .auth-card .field{margin-bottom:9px;}
    .auth-card .field label{font-size:9.5px; margin-bottom:4px;}
    .auth-card .field input{height:34px; font-size:9.5px; padding:0 10px;}
    .auth-card .field-hint{font-size:8px;}
    .auth-card .btn-primary{height:36px; font-size:9.5px; border-radius:11px;}
    .auth-remember{font-size:9.5px; gap:6px; margin-bottom:11px;}
    .auth-remember input{width:12px; height:12px;}
    .auth-card-foot{font-size:9.5px; margin-top:12px;}
    .auth-shape-3, .auth-shape-4{display:none;}
}
@media (prefers-reduced-motion:reduce){.auth-shape, .auth-chip{animation:none!important;}}

/* ---- Navbar: menu halaman aktif terasa pressed pill, tetap teks putih terkunci
   (dibedakan lewat background pill, bukan lewat warna teks) supaya tidak pernah
   menyatu dengan background navbar. ---- */
.nav-menu a[style*="background:var(--grey)"]{
    background:rgba(255,255,255,.12) !important; box-shadow:var(--shadow-inset-sm); border-radius:999px; color:#FFFFFF !important;
}

/* ---- Transisi hero auth ke footer lebih halus (scoped, tidak ubah footer di halaman lain) ---- */
body:has(.auth-page) footer{position:relative; margin-top:0;}
body:has(.auth-page) footer::before{
    content:""; position:absolute; left:0; right:0; top:-46px; height:46px; pointer-events:none;
    background:linear-gradient(180deg, rgba(233,238,243,0), var(--footer-bg));
}

/* ============ ACCORDION (FAQ) ============ */
.accordion-item{
    border:var(--border); border-radius:var(--radius-sm); margin-bottom:8px; overflow:hidden; background:var(--glass-bg-soft); box-shadow:var(--shadow-sm);
    backdrop-filter:blur(var(--glass-blur-sm)); -webkit-backdrop-filter:blur(var(--glass-blur-sm));
}
.accordion-item summary{
    padding:13px 15px; font-weight:700; font-size:12.5px; cursor:pointer;
    display:flex; justify-content:space-between; align-items:center; list-style:none;
    background:transparent;
}
.accordion-item summary::-webkit-details-marker{display:none;}
.accordion-item[open]{box-shadow:var(--shadow-inset-sm);}
.accordion-item[open] summary{border-bottom:1px dashed var(--grey-dark);}
.accordion-item .accordion-body{padding:10px 13px; font-size:12px; color:var(--ink-soft);}
.accordion-item svg.chevron{width:15px; height:15px; transition:transform .25s var(--ease); color:var(--icon-color);}
.accordion-item[open] svg.chevron{transform:rotate(180deg);}

/* ============ REVIEW ============ */
.review-card{padding:13px;}
.review-card .stars{display:flex; gap:2px; margin-bottom:8px;}
.review-card .stars svg{width:13px; height:13px; fill:#F0A93B;}
.review-card p{font-size:12px; margin-bottom:10px; color:var(--ink-soft);}
.review-card .who{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700;}
.avatar{width:28px; height:28px; border-radius:50%; border:none; box-shadow:var(--shadow-sm); background:var(--surface); color:var(--icon-color); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;}

/* ============ TOPUP SALDO GRID ============ */
.topup-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:18px; align-items:start;}
@media (max-width:860px){
    .topup-grid{grid-template-columns:1fr;}
}

/* ============ JENIS SERVER (card selector Create Panel) ============ */
.server-type-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:6px;}
.server-type-card{
    display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
    padding:14px 8px; border:var(--border); border-radius:14px; cursor:pointer;
    background:var(--surface); box-shadow:var(--shadow-sm);
    transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.server-type-card input{position:absolute; opacity:0; width:0; height:0;}
.server-type-card svg.icon{width:24px; height:24px; color:var(--ink-soft);}
.server-type-card span{font-size:11px; font-weight:700;}
.server-type-card:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.server-type-card:has(input:checked){box-shadow:var(--shadow-inset); color:var(--lime);}
.server-type-card:has(input:checked) svg.icon{color:var(--icon-color);}
@media (max-width:640px){
    .server-type-grid{grid-template-columns:repeat(2,1fr);}
}

/* ============ MODAL ============ */
.modal-overlay{
    position:fixed; inset:0; background:rgba(46,52,64,.4); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    z-index:300; display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-box{
    background:var(--surface); border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg);
    padding:18px; max-width:360px; width:100%; text-align:center;
}
.btn-spinner{
    display:inline-block; width:14px; height:14px; border:2px solid rgba(46,52,64,.15); border-top-color:var(--icon-color);
    border-radius:50%; animation:spin .6s linear infinite; vertical-align:-2px; margin-right:4px;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============ CHECKOUT: payment method logo-chip & layout ============ */
.pay-logo{
    width:42px; height:28px; border-radius:8px; border:none; box-shadow:var(--shadow-inset-sm);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    font-family:var(--font-display); font-weight:700; font-size:9.5px; letter-spacing:.01em;
    color:#fff; text-align:center; line-height:1.1; padding:2px;
}
.pay-method-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.pay-method-card{
    position:relative; display:flex; align-items:center; gap:10px; cursor:pointer;
    padding:10px 12px 10px 16px; min-height:58px; box-sizing:border-box; width:100%;
    border:1.5px solid transparent; border-radius:var(--radius-sm); background:var(--glass-bg-soft); box-shadow:var(--shadow-sm);
    backdrop-filter:blur(var(--glass-blur-sm)); -webkit-backdrop-filter:blur(var(--glass-blur-sm));
    transition:box-shadow .22s var(--ease), transform .15s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease);
}
.pay-method-card:active{transform:scale(.98);}
/* Indikator selected: accent bar tipis di kiri card, TANPA bulatan/radio visual */
.pay-method-card::before{
    content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px;
    background:var(--lime); border-radius:3px; opacity:0; transform:scaleY(.4);
    transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.pay-method-card:has(input:checked),
.pay-method-card.is-selected{
    box-shadow:var(--shadow-inset);
    background:var(--lime-soft);
    border-color:rgba(14,165,233,.35);
}
.pay-method-card:has(input:checked)::before,
.pay-method-card.is-selected::before{opacity:1; transform:scaleY(1);}
.pay-method-card .pm-label{font-size:12px; font-weight:600; line-height:1.25; color:var(--ink-soft);}
/* Nama bank (grid VA) sedikit lebih tegas dibanding deskripsi QRIS supaya mudah dibaca sekilas */
.pay-method-grid .pm-label{font-weight:700; color:var(--ink);}
@media (min-width:640px){
    .checkout-container{max-width:600px;}
    .pay-method-grid{grid-template-columns:repeat(3,1fr);}
}

/* Card metode terkunci (VA di bawah minimum nominal): tetap terlihat tapi jelas non-aktif */
.pay-method-card.is-disabled{
    cursor:not-allowed; opacity:.45; filter:grayscale(.3);
}
.pay-method-card.is-disabled:active{transform:none;}
.pay-method-card.is-disabled::before{display:none;}

/* Pesan validasi minimum VA: elegan, tidak mengganggu layout */
.va-min-notice{
    display:flex; align-items:flex-start; gap:8px; margin-bottom:10px;
    padding:10px 12px; border-radius:var(--radius-sm); background:var(--danger-soft); color:#B43A50;
    font-size:12px; font-weight:600; line-height:1.4;
    box-shadow:var(--shadow-inset-sm);
}
.va-min-notice svg.icon{flex-shrink:0; margin-top:1px; color:#C23C50;}
.va-min-notice.shake{animation:vaNoticeShake .32s var(--ease);}
@keyframes vaNoticeShake{
    0%, 100%{transform:translateX(0);}
    25%{transform:translateX(-4px);}
    75%{transform:translateX(4px);}
}

/* ---- Panel "metode dipilih": muncul dengan animasi halus saat user memilih metode ---- */
.method-preview{
    display:flex; align-items:center; gap:10px; margin-top:0; max-height:0; opacity:0;
    padding:0 14px; overflow:hidden; border-radius:var(--radius-sm); background:var(--surface);
    box-shadow:none; border:1.5px solid transparent;
    transition:max-height .3s cubic-bezier(.16,1,.3,1), opacity .22s var(--ease), padding .3s var(--ease), margin-top .3s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.method-preview.show{
    max-height:72px; opacity:1; padding:12px 14px; margin-top:12px;
    box-shadow:var(--shadow-inset-sm); border-color:rgba(31,178,122,.3);
}
.method-preview-badge{
    width:38px; height:26px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:9.5px; color:#fff; text-align:center;
}
.method-preview-text{font-size:12.5px; color:var(--ink-soft);}
.method-preview-text strong{color:var(--ink); font-weight:800;}
.method-preview svg.icon{color:var(--green); margin-left:auto; flex-shrink:0;}

/* ---- Radio bawaan disembunyikan total secara visual (sr-only), tapi tetap ada & fungsional
   untuk form submit + aksesibilitas. Seleksi murni lewat klik card + style card di atas. ---- */
.pay-method-card input[type=radio]{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============ CHECKOUT v3: premium, compact, neumorphism super halus, full-width anti-overflow ============ */
/* Background halaman checkout: putih polos #FFFFFF (bukan off-white --surface), tanpa shadow/gradient.
   Card/komponen di dalamnya tetap pakai --surface + neumorphism seperti biasa (tidak diubah). */
body:has(.checkout-page-pad){background:#FFFFFF;}
.checkout-page-pad{padding-bottom:28px; padding-top:6px; position:relative; isolation:isolate;
    /* Token shadow versi checkout: neumorphism kuat & timbul jelas (multi-layer: contact + lift + rim highlight). */
    --ck-shadow:2px 2px 4px rgba(163,177,198,.5), 14px 14px 30px rgba(163,177,198,.48), -2px -2px 4px rgba(255,255,255,.8), -14px -14px 30px rgba(255,255,255,.92), inset 1.5px 1.5px 0 rgba(255,255,255,.7), inset -1px -1px 0 rgba(148,163,184,.14);
    --ck-shadow-sm:1.5px 1.5px 3px rgba(163,177,198,.44), 8px 8px 18px rgba(163,177,198,.42), -1.5px -1.5px 3px rgba(255,255,255,.75), -8px -8px 18px rgba(255,255,255,.9), inset 1px 1px 0 rgba(255,255,255,.55);
    --ck-shadow-lg:3px 3px 6px rgba(163,177,198,.52), 22px 22px 44px rgba(163,177,198,.5), -3px -3px 6px rgba(255,255,255,.82), -20px -20px 42px rgba(255,255,255,.95), inset 1.5px 1.5px 0 rgba(255,255,255,.75), inset -1.5px -1.5px 0 rgba(148,163,184,.14);
    --ck-shadow-inset:inset 8px 8px 16px rgba(163,177,198,.42), inset -8px -8px 16px rgba(255,255,255,.85);
    --ck-shadow-inset-sm:inset 5px 5px 10px rgba(163,177,198,.4), inset -5px -5px 10px rgba(255,255,255,.82);
    /* Token liquid-glass versi checkout: transparansi kuat + blur jelas + border kaca + highlight tepi. */
    --ck-glass-bg:rgba(255,255,255,.42);
    --ck-glass-bg-strong:rgba(255,255,255,.58);
    --ck-glass-bg-soft:rgba(255,255,255,.3);
    --ck-glass-border:rgba(255,255,255,.75);
    --ck-glass-blur:22px;
    --ck-glass-blur-sm:14px;
}
/* Ambient depth di belakang seluruh halaman: gradient radial lembut supaya glass punya sesuatu buat "ditembus". */
.checkout-page-pad::before{
    content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
    background:
        radial-gradient(560px 420px at 12% 0%, rgba(14,165,233,.08), transparent 60%),
        radial-gradient(520px 400px at 92% 18%, rgba(31,178,122,.07), transparent 60%),
        radial-gradient(600px 480px at 50% 100%, rgba(56,189,248,.06), transparent 65%);
}
/* Sheen kaca: highlight diagonal halus di lapisan atas tiap permukaan glass utama — reflection tanpa perlu ubah HTML.
   Catatan: .checkout-amount-v2 / .va-box-v2 / .checkout-info-box SENGAJA tidak lagi masuk daftar ini —
   elemen-elemen itu sudah diratakan (flatten) jadi bagian dari .checkout-card, bukan card/permukaan kaca terpisah lagi. */
.checkout-card, .checkout-summary, .method-preview.show,
.ckx-float, .ckx-live-panel, .ckx-badge-pill, .ckx-chip, .ckx-mini-icon, .qr-glass-frame{
    position:relative; isolation:isolate;
}
.checkout-card::after, .checkout-summary::after,
.method-preview.show::after, .ckx-float::after, .ckx-live-panel::after,
.ckx-badge-pill::after, .qr-glass-frame::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
    background:linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.1) 32%, transparent 58%);
    opacity:.75; mix-blend-mode:overlay;
}
/* Container full-bleed di mobile: card mentok ke ujung kiri-kanan layar, TANPA padding di container.
   Padding rapi buat teks/QRIS diambil dari padding internal card (.checkout-card / .checkout-summary), bukan dari sini. */
.checkout-container{
    width:100%; max-width:520px; margin:0 auto; padding:0; box-sizing:border-box;
}
.checkout-summary{
    display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
    border:1.5px solid var(--ck-glass-border); border-radius:var(--radius-sm); padding:14px 16px; box-sizing:border-box; width:100%; max-width:100%;
    background:var(--ck-glass-bg-soft); box-shadow:var(--ck-shadow-inset-sm); margin-bottom:14px;
    backdrop-filter:blur(var(--ck-glass-blur-sm)); -webkit-backdrop-filter:blur(var(--ck-glass-blur-sm));
}
/* Dipakai redirect-panel.php (detail kredensial panel) — dipertahankan, jangan dihapus */
.qr-box{background:#FFFFFF; padding:12px; border:var(--border); border-radius:14px; box-shadow:var(--shadow); display:inline-block;}
.va-box{
    border:var(--border); border-radius:var(--radius); padding:14px; background:var(--glass-bg); box-shadow:var(--shadow-sm);
}
.va-box .va-bank-row{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.va-box .va-number{
    font-size:18px; font-weight:700; font-family:var(--font-display); letter-spacing:.5px;
    background:var(--surface); box-shadow:var(--shadow-inset-sm); border-radius:10px; padding:10px 12px;
    display:flex; align-items:center; justify-content:space-between; gap:10px; word-break:break-all;
}
.checkout-card{
    width:100%; max-width:100%; margin:0 auto; box-sizing:border-box; overflow:hidden;
    border:1.5px solid var(--ck-glass-border); border-radius:calc(var(--radius-sm) + 6px); padding:14px;
    background:var(--ck-glass-bg-strong);
    /* Shadow KHUSUS card ini sengaja TIDAK pakai token --ck-shadow-lg (dipakai elemen lain di halaman
       checkout) karena token itu punya offset horizontal (x kiri/kanan) — di card full-width/full-bleed
       ini kelihatan sebagai warna/garis vertikal berbeda antara sisi kiri & kanan (highlight terang di
       kiri vs bayangan gelap di kanan). Di bawah ini: offset x = 0 (simetris kiri-kanan sama persis) +
       spread negatif supaya bayangan cuma tipis di bawah kartu, TIDAK melebar ke sisi kiri/kanan sama
       sekali — hasilnya rata/flat dan menyatu dengan background di kedua sisi.
    */
    box-shadow:
        0 10px 22px -8px rgba(163,177,198,.4),
        0 3px 8px -3px rgba(163,177,198,.28),
        inset 0 1px 0 rgba(255,255,255,.6);
    backdrop-filter:blur(var(--ck-glass-blur)); -webkit-backdrop-filter:blur(var(--ck-glass-blur));
    display:flex; flex-direction:column; gap:12px;
}
.checkout-order-row{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
    width:100%; max-width:100%;
}
.checkout-order-row .order-no{
    font-size:12px; color:var(--ink-soft); word-break:break-all; max-width:100%;
}
.checkout-order-row .order-no strong{display:block; font-size:13px; color:var(--ink); word-break:break-all;}
.status-chip{
    display:inline-flex; align-items:center; gap:6px; flex-shrink:0; white-space:nowrap; position:relative;
    height:36px; padding:0 13px; border-radius:var(--radius-sm); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
    border:1.5px solid rgba(31,178,122,.28); background:var(--green-soft); color:#0F7A54; box-shadow:var(--ck-shadow-inset-sm,none);
    transition:background .3s var(--ease);
}
.status-chip svg{width:12px; height:12px;}
.status-chip.failed{background:var(--danger-soft); color:#C23C50; border-color:rgba(210,60,86,.24);}
.status-chip.pending{
    background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.15)) , var(--surface);
    color:var(--ink); border-color:var(--ck-glass-border,rgba(255,255,255,.7));
    backdrop-filter:blur(var(--ck-glass-blur-sm,10px)); -webkit-backdrop-filter:blur(var(--ck-glass-blur-sm,10px));
}
.status-chip.pending svg{color:#C9922A; animation:ckxClockPulse 1.8s ease-in-out infinite;}
@keyframes ckxClockPulse{0%,100%{opacity:1;} 50%{opacity:.45;}}

/* Diratakan (flatten): bukan card terpisah lagi — cuma blok teks langsung di dalam .checkout-card,
   dipisah dari konten di bawahnya pakai divider tipis + spacing, bukan background/border/shadow sendiri. */
.checkout-amount-v2{
    text-align:center; width:100%; max-width:100%; box-sizing:border-box;
    padding:2px 0 16px; border-bottom:1px solid rgba(163,177,198,.2);
}
.checkout-amount-v2 .amt{
    font-family:var(--font-display); font-weight:800; letter-spacing:.01em; color:var(--ink);
    font-size:clamp(26px,7.5vw,34px); line-height:1.2; word-break:break-word;
}
.checkout-amount-v2 .timer-row{margin-top:6px; font-size:13px; color:var(--ink-soft); text-align:center;}
.checkout-amount-v2 .timer-row #countdown{font-weight:800; color:var(--danger); font-size:18px;}

/* ============ Area QRIS v2: "Satu Panel Menyatu" ============
   QRIS jadi fokus utama, tampil TANPA bingkai/frame supaya tetap tajam & gampang di-scan.
   SEMUA elemen di bawah (judul, QRIS, instruksi, nominal, order id, status, logo metode) langsung
   jadi bagian dari .checkout-card (1 CARD UTAMA) — tidak ada background/border/shadow/blur tambahan
   di sini. Pemisah antar-bagian pakai divider tipis + spacing + typography saja. */
.ckx-qris-panel{
    display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; max-width:100%; box-sizing:border-box;
    margin:0 auto; padding:16px 0 0;
}
.ckx-qris-head{display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;}
.ckx-qris-brand{font-family:var(--font-display); font-weight:800; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink);}
.ckx-qris-title-row{display:flex; align-items:center; gap:8px;}
.ckx-qris-title{font-size:12px; font-weight:700; color:var(--ink-soft);}
.pay-logo-sm{width:34px; height:22px; font-size:8px; border-radius:6px;}

.ckx-qris-stage{padding:2px 0;}
/* QRIS TANPA bingkai/frame: tidak ada background/border/shadow container terpisah lagi —
   yang tampil murni gambar QR-nya sendiri (background putih QR sudah baked-in langsung dari
   canvas-nya, quiet zone-nya pun sudah ikut baked-in via margin di qr-code-styling). overflow
   tetap hidden + line-height:0 supaya tidak ada celah/spasi aneh di sekitar canvas. */
.qr-box-v2{
    background:transparent; padding:0; border:none; border-radius:0; box-shadow:none;
    width:min(340px,86vw); height:min(340px,86vw); max-width:380px; max-height:380px; aspect-ratio:1/1;
    margin:0 auto; cursor:zoom-in;
    display:flex; align-items:center; justify-content:center; box-sizing:border-box; overflow:hidden; line-height:0;
    transition:transform .22s var(--ease);
}
.qr-box-v2:hover, .qr-box-v2:focus-visible{
    transform:scale(1.015);
    outline:none;
}
.qr-box-v2 img, .qr-box-v2 canvas{
    width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important;
    object-fit:contain; display:block; border-radius:0; border:none;
}
/* qrcode.js (khususnya di Safari/iOS) kadang menyisipkan <img> dengan style width/height PIXEL
   tertulis langsung di elemen (inline style, override lewat JS lib-nya) supaya bisa "tekan lama
   untuk simpan gambar". Inline style itu menang dibanding class biasa, jadi tanpa !important di atas,
   QR bisa dipaksa render di ukuran asli (440x440) dan KEPOTONG oleh overflow:hidden kotaknya —
   inilah penyebab utama "QRIS kepotong" di mobile. any-child guard di bawah jaga-jaga elemen lain
   yang mungkin disisipkan library (mis. <table> fallback browser lama).
*/
.qr-box-v2 > *{ max-width:100% !important; max-height:100% !important; }
.qr-box-v2 table{ width:100% !important; height:100% !important; border-collapse:collapse; }
.ckx-qris-hint{
    display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--ink-soft);
    text-align:center; max-width:280px; margin:0 auto; line-height:1.4; word-break:break-word;
}
.ckx-qris-hint svg{width:13px; height:13px; flex-shrink:0;}

/* Info pembayaran: rows compact, TANPA background/shadow sendiri — dipisah pakai divider tipis saja. */
.ckx-qris-meta{
    width:100%; max-width:100%; box-sizing:border-box; border-top:1px solid rgba(163,177,198,.2);
}
.ckx-qris-meta-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 2px; font-size:12px;}
.ckx-qris-meta-row + .ckx-qris-meta-row{border-top:1px solid rgba(163,177,198,.18);}
.ckx-qris-meta-row span{color:var(--ink-soft); font-weight:600;}
.ckx-qris-meta-row strong{color:var(--ink); font-weight:800; text-align:right; word-break:break-word;}
.ckx-qris-meta-mono{font-family:var(--font-display); letter-spacing:.01em;}
.ckx-qris-status-pill{display:inline-flex!important; align-items:center; gap:6px; color:var(--green)!important;}

/* bg-client-01.webp — dekorasi metode pembayaran DI BAWAH info, dipisah divider tipis, tanpa background sendiri. */
.ckx-qris-partners{width:100%; max-width:280px; margin:0 auto; padding:14px 0 0; border-top:1px solid rgba(163,177,198,.2);}
.ckx-qris-partners img{width:100%; height:auto; display:block; opacity:.9;}

.qr-save-btn, .qr-download-btn{padding:0 14px; font-size:11.5px;}
@media (max-width:420px){ .ckx-qris-panel{padding:14px 0 0;} }

/* ============ QRIS "QR-first" (redesain): tidak ada kartu order/nominal/countdown
   besar di atas QR lagi — QR langsung tampil begitu panel dibuka, lebih besar &
   lebih gampang di-scan, bingkai tetap kotak siku-siku (qr-box-v2 sudah border-radius:0).
   Tombol Download/Simpan persis di bawah QR, info pembayaran (nominal/order id/status/
   sisa waktu) diringkas jadi rows kecil paling bawah — bukan card terpisah. ============ */
.ckx-qris-panel--focus{padding-top:4px; gap:14px;}
.qr-box-v2--lg{
    width:clamp(270px, 74vw, 340px); height:clamp(270px, 74vw, 340px); padding:0;
}

/* ============ QRIS Checkout — ukuran relatif ke card + container glass premium ============
   KHUSUS halaman Checkout: di-scope pakai #qrisPanel (id unik, cuma ada di checkout.php) supaya
   halaman lain yang pakai komponen sama (mis. perpanjang-garansi.php) TIDAK ikut berubah.
   QR sendiri (canvas/data/logo di dalamnya) sama sekali tidak disentuh — cuma container di
   sekelilingnya + ukurannya yang diatur ulang di sini.

   1) UKURAN RELATIF KE CARD (bukan ke lebar layar/vw): .ckx-qris-stage dikasih width:100% biar
      jadi "containing block" yang benar, baru .qr-box-v2--lg dikasih width dalam PERSEN (70%)
      -> otomatis proporsional terhadap lebar card di device manapun, bukan cuma lebar viewport.
      min-width jadi jaring pengaman biar tetap gampang di-scan di HP sekecil apapun, max-width
      jadi batas atas biar rapi & tidak raksasa di desktop. aspect-ratio:1/1 menjamin QR SELALU
      persegi sempurna (tidak gepeng) berapapun lebarnya.
   2) CONTAINER GLASSMORPHISM TIPIS (bukan neumorphism): 1 lapis background translucent + 1
      border tipis + 1 shadow lembut + blur halus. QR putih (dengan quiet zone bawaan dari
      margin di qr-code-styling) "melayang" di dalamnya dengan padding yang seimbang. */
#qrisPanel{gap:12px;}
#qrisPanel .ckx-qris-stage{width:100%; display:flex; justify-content:center;}
#qrisPanel .qr-box-v2{
    background:linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border:1px solid var(--ck-glass-border, rgba(255,255,255,.14));
    border-radius:22px;
    box-shadow:0 16px 34px -16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    padding:clamp(12px,4vw,18px);
    transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
#qrisPanel .qr-box-v2:hover, #qrisPanel .qr-box-v2:focus-visible{
    transform:scale(1.012);
    box-shadow:0 20px 40px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
}
#qrisPanel .qr-box-v2 canvas{ border-radius:12px; }
#qrisPanel .qr-box-v2--lg{
    width:70%; min-width:212px; max-width:296px; height:auto; aspect-ratio:1/1;
}
#qrisPanel .ckx-qris-hint{margin-top:2px;}
#qrisPanel .ckx-qr-actions{margin-top:2px;}

.ckx-qris-meta--compact{margin-top:2px;}
.ckx-qris-status-inline{
    height:26px; padding:0 10px; font-size:10.5px; letter-spacing:.02em;
}
.ckx-qris-status-inline svg{width:11px; height:11px;}
.ckx-qris-countdown-inline{
    font-family:var(--font-display); font-weight:800; letter-spacing:.02em;
    color:var(--danger); font-size:15px;
}

/* Diratakan (flatten): bagian VA (Virtual Account) langsung jadi bagian .checkout-card, bukan card terpisah. */
.va-box-v2{
    width:100%; max-width:100%; box-sizing:border-box;
    padding:16px 0 0; text-align:left;
}
.va-box-v2 .va-bank-row{display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
.va-number-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 2px; width:100%; max-width:100%; box-sizing:border-box; flex-wrap:wrap;
    border-top:1px solid rgba(163,177,198,.2); border-bottom:1px solid rgba(163,177,198,.2);
}
.va-number-row .va-digits{
    font-size:clamp(15px,3.8vw,18px); font-weight:800; font-family:var(--font-display);
    letter-spacing:.4px; word-break:break-all; max-width:100%; text-align:left; flex:1; min-width:0; color:var(--ink);
}
.copy-icon-btn{
    width:34px; height:34px; flex-shrink:0; border:var(--border); border-radius:10px;
    background:var(--surface); box-shadow:var(--ck-shadow-sm); display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:box-shadow .25s var(--ease), transform .2s var(--ease);
    color:var(--icon-color);
}
.copy-icon-btn:hover{box-shadow:var(--ck-shadow);}
.copy-icon-btn:active{box-shadow:var(--ck-shadow-inset-sm); transform:scale(.94);}
.copy-icon-btn svg{width:14px; height:14px;}

/* Diratakan (flatten): pesan status "otomatis update" tidak lagi punya card/background sendiri —
   dipisah dari konten pembayaran di atasnya cukup pakai divider tipis. */
.checkout-info-box{
    display:flex; align-items:flex-start; gap:8px; width:100%; max-width:100%; box-sizing:border-box;
    padding:14px 0 0; border-top:1px solid rgba(163,177,198,.2);
    font-size:12.5px; color:var(--ink-soft); text-align:left;
}

.checkout-cancel-btn{
    width:100%; max-width:100%; box-sizing:border-box; height:44px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    border:1.5px solid var(--ck-glass-border); border-radius:var(--radius-sm); background:var(--ck-glass-bg); box-shadow:var(--ck-shadow-sm);
    backdrop-filter:blur(var(--ck-glass-blur-sm)); -webkit-backdrop-filter:blur(var(--ck-glass-blur-sm));
    font-weight:600; font-size:12px; color:var(--danger); cursor:pointer; transition:box-shadow .25s var(--ease), transform .2s var(--ease);
}
.checkout-cancel-btn:hover{box-shadow:var(--ck-shadow);}
.checkout-cancel-btn:active{box-shadow:var(--ck-shadow-inset); transform:scale(.98);}

/* ============ CHECKOUT: modal custom konfirmasi batal — v2 lebih premium & compact ============ */
.ck-modal-overlay{
    position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
    padding:20px; box-sizing:border-box;
    background:rgba(40,44,56,.32); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
    opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.ck-modal-overlay.show{opacity:1; pointer-events:auto;}
.ck-modal{
    width:100%; max-width:308px; box-sizing:border-box; text-align:center;
    background:#FFFFFF; border-radius:22px; padding:22px 20px 18px;
    border:1px solid rgba(31,41,55,.05);
    box-shadow:0 16px 40px -12px rgba(31,41,55,.16), 0 2px 6px rgba(31,41,55,.04);
    transform:scale(.94) translateY(6px); opacity:0;
    transition:transform .24s cubic-bezier(.16,1,.3,1), opacity .2s var(--ease);
}
.ck-modal-overlay.show .ck-modal{transform:scale(1) translateY(0); opacity:1;}
.ck-modal-icon{
    width:44px; height:44px; margin:0 auto 12px; border-radius:50%;
    background:#FFFFFF; color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    box-shadow:3px 3px 8px rgba(163,177,198,.24), -3px -3px 8px rgba(255,255,255,.78), inset 0 0 0 1px rgba(31,41,55,.04);
}
.ck-modal-icon svg.icon{width:18px; height:18px;}
.ck-modal-title{font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.55; margin-bottom:6px; text-wrap:balance;}
.ck-modal-desc{font-size:11.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:18px;}
.ck-modal-actions{display:flex; flex-direction:column; gap:8px;}
.ck-modal-btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    width:100%; border:none; border-radius:13px; cursor:pointer; box-sizing:border-box;
    font-family:var(--font-body); font-size:12px; font-weight:700;
    transition:box-shadow .2s var(--ease), transform .12s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.ck-modal-btn:active{transform:scale(.97);}
.ck-modal-btn svg.icon{width:14px; height:14px; flex-shrink:0;}
/* "Ehh nggak jadi" — aksi utama/positif: netral, neumorphism sangat halus, sedikit lebih tinggi */
.ck-modal-btn-neutral{
    height:46px; color:var(--ink); background:#FFFFFF;
    box-shadow:3px 3px 7px rgba(163,177,198,.22), -3px -3px 7px rgba(255,255,255,.75);
}
.ck-modal-btn-neutral:hover{box-shadow:4px 4px 9px rgba(163,177,198,.26), -4px -4px 9px rgba(255,255,255,.8);}
.ck-modal-btn-neutral:active{box-shadow:inset 3px 3px 6px rgba(163,177,198,.26), inset -3px -3px 6px rgba(255,255,255,.6);}
/* "Iyaa, batalin" — merah elegan bertekstur soft-tint, bukan merah menyala penuh, sedikit lebih pendek */
.ck-modal-btn-danger{
    height:40px; color:#C23150; background:rgba(210,60,86,.08);
    border:1px solid rgba(210,60,86,.16);
}
.ck-modal-btn-danger:hover{background:rgba(210,60,86,.13);}
.ck-modal-btn-danger:active{background:rgba(210,60,86,.18); transform:scale(.97);}
@media (min-width:480px){
    .ck-modal-actions{flex-direction:row-reverse;}
    .ck-modal-btn-danger{height:46px;}
}

/* Semua tombol di halaman checkout: tinggi ~42px, radius 12px, transisi halus + feedback tap */
.checkout-page-pad .btn{
    height:42px; border-radius:var(--radius-sm); padding:0 18px;
    box-shadow:var(--ck-shadow-sm);
    transition:box-shadow .25s var(--ease), transform .2s var(--ease);
}
.checkout-page-pad .btn:hover{box-shadow:var(--ck-shadow); transform:translateY(-1px);}
.checkout-page-pad .btn:active{box-shadow:var(--ck-shadow-inset); transform:scale(.98) translateY(0);}
.checkout-page-pad .btn-primary:hover{box-shadow:6px 6px 14px rgba(163,177,198,.34), -6px -6px 14px rgba(255,255,255,.8), 0 0 0 1px rgba(14,165,233,.22);}
.checkout-page-pad .btn-sm{height:42px; padding:0 16px;}
.checkout-page-pad .pay-method-card{
    box-shadow:var(--ck-shadow-sm); background:var(--ck-glass-bg-soft); border-color:var(--ck-glass-border);
    backdrop-filter:blur(var(--ck-glass-blur-sm)); -webkit-backdrop-filter:blur(var(--ck-glass-blur-sm));
}
.checkout-page-pad .pay-method-card:has(input:checked),
.checkout-page-pad .pay-method-card.is-selected{box-shadow:var(--ck-shadow-inset);}
.checkout-page-pad .method-preview.show{box-shadow:var(--ck-shadow-inset-sm);}

/* Di bawah 520px: card & summary FULL-BLEED nempel ujung layar (radius 0), padding internal
   tetap ada supaya konten (teks/QRIS) tidak mepet tepi. Ini yang menghapus pinggiran kiri-kanan. */
@media (max-width:520px){
    /* Sengaja TIDAK menghapus radius (border-radius:0) lagi: kartu glass/floating harus tetap terlihat
       "mengambang" bahkan di layar kecil, jadi cukup dirapatkan sedikit ke tepi via container. */
    .checkout-container{padding:0 8px;}
    .checkout-card{border-radius:18px;}
    .checkout-summary{border-radius:14px;}
}
@media (max-width:420px){
    .checkout-card{padding:14px; gap:12px;}
    .checkout-summary{padding:12px 14px;}
}

/* ============ CHECKOUT: header judul mengikuti skala normal situs (bukan dikecilkan paksa) ============ */
.checkout-head{margin-bottom:14px;}
.checkout-head h1{
    font-size:clamp(20px,4.5vw,26px); font-weight:800; letter-spacing:-0.01em;
    line-height:1.25; color:var(--ink); margin:0;
}

.checkout-summary-price{font-size:clamp(18px,4.5vw,21px); font-weight:800; letter-spacing:.01em; color:var(--ink); white-space:nowrap;}

/* Tombol "Bayar Sekarang" & "Simpan QR" dll: bagian normal dari alur konten (bukan floating/fixed). */
.checkout-cta-row{margin-top:2px;}

/* WhatsApp float dikecilkan ~13% supaya tidak dominan di halaman checkout, tetap posisi default (tidak fixed ke bar apapun). */
body:has(.checkout-page-pad) .wa-float{width:36px; height:36px;}
body:has(.checkout-page-pad) .wa-float svg{width:16px; height:16px;}

/* ============ CHECKOUT: loader neumorphism (2 detik sebelum halaman pembayaran) ============ */
.payment-loader{
    position:fixed; inset:0; z-index:9999; background:#FFFFFF;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
    opacity:1; transition:opacity .3s var(--ease);
}
.payment-loader.is-hidden{opacity:0; pointer-events:none;}
.nm-spinner{
    position:relative; width:64px; height:64px;
    animation:nmSpinnerRotate 1.2s ease-in-out infinite;
    will-change:transform;
}
.nm-spinner span{
    position:absolute; top:0; left:50%; width:6px; height:16px; margin-left:-3px;
    border-radius:6px; background:#C4CCD6; transform-origin:3px 32px;
}
.nm-spinner span:nth-child(1){transform:rotate(0deg); opacity:1; background:#9AA5B3; width:8px; height:8px; border-radius:50%; margin-left:-4px; transform-origin:4px 32px;}
.nm-spinner span:nth-child(2){transform:rotate(45deg); opacity:.85;}
.nm-spinner span:nth-child(3){transform:rotate(90deg); opacity:.7;}
.nm-spinner span:nth-child(4){transform:rotate(135deg); opacity:.55;}
.nm-spinner span:nth-child(5){transform:rotate(180deg); opacity:.4;}
.nm-spinner span:nth-child(6){transform:rotate(225deg); opacity:.3;}
.nm-spinner span:nth-child(7){transform:rotate(270deg); opacity:.22;}
.nm-spinner span:nth-child(8){transform:rotate(315deg); opacity:.15;}
@keyframes nmSpinnerRotate{
    0%{transform:rotate(0deg);}
    50%{transform:rotate(180deg);}
    100%{transform:rotate(360deg);}
}
.payment-loader .loader-text{font-size:12px; color:var(--ink-soft); font-weight:600; letter-spacing:.01em;}

/* Fade + slide-up halus untuk kartu halaman pembayaran (dikontrol via JS, bukan scroll) */
.checkout-fade-in{opacity:0; transform:translateY(14px);}
.checkout-fade-in.is-visible{
    opacity:1; transform:translateY(0);
    transition:opacity .3s var(--ease), transform .3s cubic-bezier(.16,1,.3,1);
}

/* ============================================================================
   CHECKOUT REDESIGN "ckx-" — Premium Neumorphism + Glassmorphism + Floating UI
   Layer tambahan khusus checkout.php. Tidak menyentuh komponen/warna/shadow
   dasar di atas — murni menambah struktur baru + reuse token var(--...) yang
   sudah ada supaya konsisten dengan identitas Perkasa Hosting Indonesia.
   ============================================================================ */

/* ---- Orbit layout: card utama di tengah, floating card di kiri/kanan (desktop) ---- */
.ckx-orbit{display:grid; grid-template-columns:1fr; justify-items:center;}
.ckx-orbit-side{display:none;}
@media (min-width:1180px){
    .ckx-orbit{grid-template-columns:216px minmax(0,600px) 216px; column-gap:26px; align-items:start;}
    .ckx-orbit-side{display:flex; flex-direction:column; gap:16px; padding-top:36px; position:sticky; top:90px;}
    .ckx-orbit-left{align-items:flex-end;}
    .ckx-orbit-right{align-items:flex-start;}
}

/* ---- Floating glass+neumorphic mini card ---- */
.ckx-float{
    display:flex; align-items:center; gap:9px; padding:11px 14px; width:100%; max-width:196px;
    border-radius:18px; background:var(--ck-glass-bg,var(--glass-bg)); border:1.5px solid var(--ck-glass-border,var(--glass-border));
    backdrop-filter:blur(var(--ck-glass-blur,var(--glass-blur))); -webkit-backdrop-filter:blur(var(--ck-glass-blur,var(--glass-blur)));
    box-shadow:var(--ck-shadow-sm,var(--shadow-sm)); box-sizing:border-box;
    position:relative; overflow:hidden; isolation:isolate;
    transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ckx-float-lg{max-width:210px; padding:13px 15px;}
/* shimmer halus yang menyapu border — properti background, tidak bentrok dgn animasi transform data-float */
.ckx-float::before{
    content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1px;
    background:linear-gradient(115deg, transparent 20%, rgba(14,165,233,.45) 45%, transparent 70%);
    background-size:220% 220%; opacity:.55;
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:ckxShimmer 5s linear infinite;
}
@keyframes ckxShimmer{0%{background-position:0% 0%;} 100%{background-position:220% 220%;}}
.ckx-float:hover{box-shadow:var(--ck-shadow-lg,var(--shadow-lg)); border-color:rgba(14,165,233,.4);}

.ckx-float-icon{
    width:32px; height:32px; min-width:32px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:var(--surface); box-shadow:var(--shadow-inset-sm); color:var(--icon-color);
    animation:ckxIconWiggle 5s ease-in-out infinite;
}
.ckx-float-icon svg{width:15px; height:15px;}
.ckx-float-icon-lime{background:var(--lime-soft,var(--surface)); color:var(--lime,var(--icon-color));}
.ckx-float-icon-green{background:var(--green-soft); color:var(--green);}
@keyframes ckxIconWiggle{0%,100%{transform:rotate(0deg);} 25%{transform:rotate(-8deg);} 75%{transform:rotate(8deg);}}
.ckx-float-body{min-width:0;}
.ckx-float-title{font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); display:block;}
.ckx-float-val{font-size:13px; font-weight:800; color:var(--ink); font-family:var(--font-display); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ckx-float-sub{font-size:10.5px; font-weight:600; color:var(--ink-soft); display:block;}

.ckx-mini-row{display:flex; gap:10px;}
.ckx-mini-icon{
    width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background:var(--ck-glass-bg-soft,var(--glass-bg-soft)); border:1.5px solid var(--ck-glass-border,var(--glass-border));
    backdrop-filter:blur(var(--ck-glass-blur-sm,var(--glass-blur-sm))); -webkit-backdrop-filter:blur(var(--ck-glass-blur-sm,var(--glass-blur-sm)));
    box-shadow:var(--shadow-inset-sm); color:var(--icon-color); opacity:.9;
    transition:box-shadow .3s var(--ease), opacity .3s var(--ease);
}
.ckx-mini-icon:hover{opacity:1; box-shadow:var(--shadow-sm);}
.ckx-mini-icon svg{width:16px; height:16px; animation:ckxIconWiggle 4.5s ease-in-out infinite;}

/* ---- Badge pill mengambang (klaim fitur singkat) ---- */
.ckx-badge-pill{
    display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:100px; width:fit-content; max-width:100%;
    background:var(--ck-glass-bg,var(--glass-bg)); border:1.5px solid var(--ck-glass-border,var(--glass-border));
    backdrop-filter:blur(var(--ck-glass-blur-sm,var(--glass-blur-sm))); -webkit-backdrop-filter:blur(var(--ck-glass-blur-sm,var(--glass-blur-sm)));
    box-shadow:var(--ck-shadow-sm,var(--shadow-sm)); font-size:10.5px; font-weight:800; color:var(--ink); white-space:nowrap;
}

/* ---- Orb ambient: gradient blur besar di belakang layout, kasih kesan "hidup"/depth ---- */
.ckx-orb{position:absolute; border-radius:50%; filter:blur(46px); z-index:-1; opacity:.35; pointer-events:none;}
.ckx-orb-1{width:260px; height:260px; top:-60px; left:2%; background:radial-gradient(circle, var(--icon-color), transparent 70%); animation:ckxOrbDrift 16s ease-in-out infinite;}
.ckx-orb-2{width:220px; height:220px; bottom:8%; right:3%; background:radial-gradient(circle, var(--green), transparent 70%); animation:ckxOrbDrift 20s ease-in-out infinite reverse;}
.ckx-orb-3{width:180px; height:180px; top:45%; left:48%; background:radial-gradient(circle, var(--secondary,var(--icon-color)), transparent 70%); opacity:.2; animation:ckxOrbDrift 24s ease-in-out infinite;}
@keyframes ckxOrbDrift{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(24px,-18px) scale(1.08);}}
@media (max-width:1179px){ .ckx-orb{opacity:.22;} .ckx-orb-1,.ckx-orb-2{width:180px; height:180px;} }

/* ---- Liquid glass sphere: dekorasi bola kaca mengambang (beda dari .ckx-orb yang cuma glow blur) —
   punya body kaca sendiri (bukan cuma cahaya), highlight cermin di sudut, buat kesan depth/3D layering. ---- */
.ckx-liquid-blob{
    position:absolute; border-radius:50%; pointer-events:none; z-index:-1;
    background:linear-gradient(135deg, rgba(255,255,255,.55), rgba(14,165,233,.12) 60%, rgba(255,255,255,.08));
    border:1px solid rgba(255,255,255,.55);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    box-shadow:inset -6px -6px 14px rgba(14,165,233,.1), inset 6px 6px 14px rgba(255,255,255,.5), 0 12px 30px -10px rgba(31,41,55,.14);
}
.ckx-liquid-blob::before{
    content:""; position:absolute; top:14%; left:18%; width:34%; height:24%; border-radius:50%;
    background:rgba(255,255,255,.85); filter:blur(3px);
}
.ckx-blob-a{width:64px; height:64px; top:-18px; right:8%; animation:ckxOrbDrift 14s ease-in-out infinite;}
.ckx-blob-b{width:38px; height:38px; bottom:6%; left:-8px; animation:ckxOrbDrift 18s ease-in-out infinite reverse;}
@media (max-width:1179px){ .ckx-liquid-blob{opacity:.5; display:none;} }
@media (min-width:1180px){ .ckx-liquid-blob{display:block;} }

/* ---- Unifikasi metode pembayaran (QRIS + VA satu alur, tanpa tab) ---- */
.ckx-methods-label{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; color:var(--ink); margin-bottom:10px;}
.ckx-methods-label svg{width:14px; height:14px; color:var(--icon-color);}
.ckx-method-qris{position:relative; min-height:64px; margin-bottom:16px;}
.ckx-method-badge{
    margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.03em; color:var(--green);
    background:var(--green-soft); padding:4px 9px; border-radius:100px; flex-shrink:0;
}
.ckx-methods-divider{display:flex; align-items:center; gap:10px; margin:16px 0 12px; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);}
.ckx-methods-divider::before, .ckx-methods-divider::after{content:""; flex:1; height:1px; background:rgba(148,163,184,.3);}


/* ---- Status dot berdenyut (Payment Gateway Online / QRIS siap) ---- */
.ckx-live-dot{width:8px; height:8px; min-width:8px; border-radius:50%; background:var(--green); position:relative;}
.ckx-live-dot::after{
    content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--green);
    animation:ckxPulseRing 1.8s ease-out infinite;
}
@keyframes ckxPulseRing{0%{transform:scale(.6); opacity:.9;} 100%{transform:scale(1.9); opacity:0;}}

/* ---- Live Payment glass panel ---- */
.ckx-live-panel{
    width:100%; max-width:196px; padding:14px; border-radius:18px; box-sizing:border-box;
    background:var(--ck-glass-bg,var(--glass-bg)); border:1.5px solid var(--ck-glass-border,var(--glass-border));
    backdrop-filter:blur(var(--ck-glass-blur,var(--glass-blur))); -webkit-backdrop-filter:blur(var(--ck-glass-blur,var(--glass-blur)));
    box-shadow:var(--ck-shadow-lg,var(--shadow-lg));
}

/* ---- Floating UI mengambang beneran: tiap card punya lintasan bob + rotasi mikro sendiri,
   kecepatan/fase berbeda lewat data-float="slow"/"fast" supaya tidak terlihat seragam/monoton. ---- */
@media (prefers-reduced-motion: no-preference){
    [data-float]{animation:ckxFloatBob 6s ease-in-out infinite;}
    [data-float="slow"]{animation-duration:8.5s; animation-delay:-2.4s;}
    [data-float="fast"]{animation-duration:4.2s; animation-delay:-1.1s;}
    .ckx-mini-icon[data-float]{animation-name:ckxFloatBobSm;}
}
@keyframes ckxFloatBob{
    0%,100%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-8px) rotate(-.6deg);}
}
@keyframes ckxFloatBobSm{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-5px);}
}
.ckx-live-panel-head{display:flex; align-items:center; gap:7px; margin-bottom:10px;}
.ckx-live-panel-head span{font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.ckx-live-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 0; border-top:1px solid rgba(148,163,184,.18);}
.ckx-live-row:first-of-type{border-top:none;}
.ckx-live-row-label{font-size:10.5px; color:var(--ink-soft); font-weight:600;}
.ckx-live-row-val{font-size:10.5px; color:var(--green); font-weight:800;}

/* ---- Mobile: floating jadi strip chip horizontal, tidak overlap konten penting ---- */
.ckx-mobile-strip{
    display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; margin-bottom:12px;
    scrollbar-width:none; -ms-overflow-style:none;
}
.ckx-mobile-strip::-webkit-scrollbar{display:none;}
.ckx-chip{
    flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:100px;
    background:var(--ck-glass-bg,var(--glass-bg)); border:1.5px solid var(--ck-glass-border,var(--glass-border));
    backdrop-filter:blur(var(--ck-glass-blur-sm,var(--glass-blur-sm))); -webkit-backdrop-filter:blur(var(--ck-glass-blur-sm,var(--glass-blur-sm)));
    box-shadow:var(--ck-shadow-sm,var(--shadow-sm)); font-size:11px; font-weight:700; color:var(--ink); white-space:nowrap;
}
.ckx-chip svg{width:13px; height:13px; color:var(--icon-color); flex-shrink:0;}
@media (min-width:1180px){ .ckx-mobile-strip{display:none;} }

/* ---- Nominal: fokus visual terbesar ---- */
.checkout-page-pad .checkout-summary-price{
    font-size:clamp(22px,5.4vw,26px); background:linear-gradient(120deg, var(--ink) 30%, var(--icon-color) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.checkout-page-pad .checkout-amount-v2 .amt{
    font-size:clamp(30px,8vw,40px); font-weight:800; font-family:var(--font-display); letter-spacing:-.01em;
    background:linear-gradient(120deg, var(--ink) 25%, var(--icon-color) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ---- Cara Top Up: step flow dengan connecting line ---- */
.ckx-steps-card{
    margin-top:20px; padding:20px 16px; border-radius:var(--radius); background:var(--glass-bg-soft);
    border:1px solid var(--glass-border); backdrop-filter:blur(var(--glass-blur-sm)); -webkit-backdrop-filter:blur(var(--glass-blur-sm));
    box-shadow:var(--ck-shadow,var(--shadow));
}
.ckx-steps-title{font-size:14px; font-weight:800; color:var(--ink); margin-bottom:16px; font-family:var(--font-display);}
.ckx-steps{display:flex; flex-direction:column; gap:0;}
.ckx-step{display:flex; gap:14px; position:relative; padding-bottom:22px;}
.ckx-step:last-child{padding-bottom:0;}
.ckx-step::before{
    content:""; position:absolute; left:19px; top:40px; bottom:0; width:2px;
    background:repeating-linear-gradient(to bottom, var(--icon-color) 0 4px, transparent 4px 9px); opacity:.4;
}
.ckx-step:last-child::before{display:none;}
.ckx-step-num{
    width:40px; height:40px; min-width:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background:var(--surface); box-shadow:var(--shadow-sm); font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--icon-color);
    position:relative; z-index:1;
}
.ckx-step-icon{position:absolute; bottom:-4px; right:-4px; width:18px; height:18px; border-radius:6px; background:var(--icon-color); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 5px rgba(14,165,233,.4);}
.ckx-step-icon svg{width:10px; height:10px;}
.ckx-step-body{padding-top:6px;}
.ckx-step-title{font-size:13px; font-weight:800; color:var(--ink); margin-bottom:2px;}
.ckx-step-desc{font-size:12px; color:var(--ink-soft); line-height:1.5;}
@media (min-width:760px){
    .ckx-steps{flex-direction:row; gap:8px;}
    .ckx-step{flex-direction:column; padding-bottom:0; flex:1; text-align:center; align-items:center; gap:10px;}
    .ckx-step::before{left:auto; top:20px; right:-50%; bottom:auto; width:calc(100% - 40px); height:2px; background:repeating-linear-gradient(to right, var(--icon-color) 0 4px, transparent 4px 9px);}
    .ckx-step-body{padding-top:0;}
}

/* ---- Payment Security card ---- */
.ckx-security-card{
    margin-top:14px; padding:18px 16px; border-radius:var(--radius); background:var(--surface);
    border:var(--border); box-shadow:var(--ck-shadow,var(--shadow));
}
.ckx-security-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.ckx-security-shield{
    width:44px; height:44px; min-width:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
    background:var(--green-soft); color:var(--green); box-shadow:var(--shadow-inset-sm); position:relative;
}
.ckx-security-shield::after{content:""; position:absolute; inset:-5px; border-radius:16px; border:1.5px solid var(--green); opacity:0; animation:ckxShieldGlow 2.6s ease-in-out infinite;}
@keyframes ckxShieldGlow{0%,100%{opacity:0; transform:scale(.94);} 50%{opacity:.5; transform:scale(1.04);}}
.ckx-security-shield svg{width:22px; height:22px;}
.ckx-security-head h3{font-size:14px; font-weight:800; color:var(--ink); font-family:var(--font-display);}
.ckx-security-head p{font-size:11.5px; color:var(--ink-soft); margin-top:1px;}
.ckx-security-list{display:grid; grid-template-columns:1fr; gap:10px;}
@media (min-width:520px){ .ckx-security-list{grid-template-columns:1fr 1fr;} }
.ckx-security-item{display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:12px; background:var(--surface); box-shadow:var(--shadow-inset-sm);}
.ckx-security-item svg{width:15px; height:15px; color:var(--green); flex-shrink:0;}
.ckx-security-item span{font-size:12px; font-weight:700; color:var(--ink);}

.ckx-qr-actions{display:flex; gap:8px; width:100%;}
.ckx-qr-actions .btn{flex:1;}

/* ---- Payment progress bar indeterminate (saat menunggu konfirmasi) ---- */
.ckx-progress-track{width:100%; height:4px; border-radius:4px; background:var(--grey); box-shadow:var(--shadow-inset-sm); overflow:hidden; margin-top:10px;}
.ckx-progress-bar{height:100%; width:38%; border-radius:4px; background:linear-gradient(90deg, var(--icon-color), var(--secondary)); animation:ckxProgressSlide 1.6s ease-in-out infinite;}
@keyframes ckxProgressSlide{0%{transform:translateX(-100%);} 100%{transform:translateX(360%);}}

/* ---- Lightbox "Perbesar QR" ---- */
.ckx-qr-lightbox{
    position:fixed; inset:0; z-index:400; background:rgba(46,52,64,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease);
}
.ckx-qr-lightbox.show{opacity:1; pointer-events:auto;}
.ckx-qr-lightbox-box{
    background:#FFFFFF; border-radius:20px; padding:22px; box-shadow:var(--shadow-lg); text-align:center;
    transform:scale(.92); transition:transform .3s var(--motion-spring, cubic-bezier(.34,1.56,.64,1));
    max-width:min(86vw,320px);
}
.ckx-qr-lightbox.show .ckx-qr-lightbox-box{transform:scale(1);}
.ckx-qr-lightbox-box img{width:100%; height:auto; border-radius:10px;}
.ckx-qr-lightbox-close{margin-top:14px; width:100%;}

/* ---- Toast notifikasi sukses ---- */
.ckx-toast{
    position:fixed; top:16px; left:50%; z-index:500; max-width:min(92vw,360px);
    display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:14px;
    background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
    box-shadow:var(--shadow-lg); font-size:12.5px; font-weight:700; color:var(--ink);
    transform:translate(-50%,-140%); opacity:0; transition:transform .4s var(--motion-spring, cubic-bezier(.34,1.56,.64,1)), opacity .3s var(--ease);
    pointer-events:none;
}
.ckx-toast.show{transform:translate(-50%,0); opacity:1;}
.ckx-toast-icon{width:26px; height:26px; min-width:26px; border-radius:50%; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center;}
.ckx-toast-icon svg{width:14px; height:14px;}

/* ---- Success burst: checkmark draw + glow lembut ---- */
.ckx-success-burst{position:relative; overflow:hidden;}
.ckx-success-burst::before{
    content:""; position:absolute; top:50%; left:20px; width:70px; height:70px; margin-top:-35px;
    border-radius:50%; background:radial-gradient(circle, rgba(31,178,122,.35) 0%, transparent 70%);
    animation:ckxSuccessGlow 1.4s ease-out 1;
}
@keyframes ckxSuccessGlow{0%{opacity:0; transform:scale(.4);} 40%{opacity:1;} 100%{opacity:0; transform:scale(1.6);}}
.ckx-check-draw{stroke-dasharray:40; stroke-dashoffset:40; animation:ckxCheckDraw .5s var(--ease) .1s forwards;}
@keyframes ckxCheckDraw{to{stroke-dashoffset:0;}}

/* ---- Notifikasi sukses pembayaran (modal tengah, tampil BERSAMAAN dengan audio pembayaran.mp3) ----
   Dipicu HANYA sekali per Order ID setelah status transaksi benar-benar "paid" terverifikasi backend
   (lihat script di checkout.php — cek localStorage per order_id supaya tidak berulang saat refresh/
   revisit). Pakai token desain yang sama dengan komponen lain (glass/shadow/radius) biar konsisten. */
.ckx-success-overlay{
    position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center;
    padding:20px; background:rgba(8,10,18,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    opacity:0; pointer-events:none; transition:opacity .28s var(--ease);
}
.ckx-success-overlay.show{opacity:1; pointer-events:auto;}
.ckx-success-card{
    width:100%; max-width:340px; text-align:center; box-sizing:border-box;
    background:var(--surface); border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg);
    padding:30px 24px 24px; transform:translateY(16px) scale(.96); transition:transform .32s var(--motion-spring, cubic-bezier(.34,1.56,.64,1));
}
.ckx-success-overlay.show .ckx-success-card{transform:translateY(0) scale(1);}
.ckx-success-icon{
    width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:var(--green-soft); color:var(--green);
    display:flex; align-items:center; justify-content:center; position:relative;
}
.ckx-success-icon::after{
    content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid var(--green); opacity:0;
    animation:ckxSuccessRing 1.6s ease-out .15s 1;
}
@keyframes ckxSuccessRing{0%{opacity:.9; transform:scale(.7);} 100%{opacity:0; transform:scale(1.35);}}
.ckx-success-icon svg{width:30px; height:30px;}
.ckx-success-card h3{margin:0 0 8px; font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--ink);}
.ckx-success-card p{margin:0 0 20px; font-size:13px; line-height:1.55; color:var(--ink-soft);}

/* ============ DASHBOARD: highlight card neumorphic putih (ganti card hitam/warna solid) ============ */
.dash-highlight-card{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-bottom:14px; padding:13px 14px; width:100%; box-sizing:border-box;
    background:var(--surface); border:var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.dash-highlight-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.dash-highlight-card:active{box-shadow:var(--shadow-inset); transform:translateY(0);}
.dash-highlight-left{display:flex; align-items:center; gap:12px; min-width:0;}
.dash-highlight-icon{
    width:36px; height:36px; min-width:36px; border-radius:10px;
    background:var(--surface); box-shadow:var(--shadow-inset-sm);
    display:flex; align-items:center; justify-content:center; color:var(--icon-color); flex-shrink:0;
}
.dash-highlight-icon.is-success{color:var(--green);}
.dash-highlight-icon.is-admin{color:var(--admin-blue);}
.dash-highlight-title{font-weight:800; font-size:13px; color:var(--ink); line-height:1.3;}
.dash-highlight-desc{font-size:11.5px; color:var(--ink-soft); margin-top:1px; line-height:1.3;}

/* ============ CTA ============ */
.cta-box{
    border:var(--border); border-radius:var(--radius); background:var(--surface); color:var(--ink);
    padding:20px 16px; text-align:center; box-shadow:var(--shadow-lg);
}
.cta-box h2{color:var(--ink); margin-bottom:8px;}
.cta-box .btn-primary{color:#15161A;}

/* ============ FOOTER (Dark Neumorphism + Soft Glassmorphism) ============ */
footer{
    position:relative; overflow:hidden; border-top:none; margin-top:14px; padding:44px 0 18px; color:#fff;
    background:
        radial-gradient(760px 360px at 12% -8%, rgba(14,165,233,.10), transparent 62%),
        radial-gradient(620px 320px at 92% 4%, rgba(34,211,238,.07), transparent 58%),
        var(--footer-bg);
}
footer h4{font-size:12.5px; margin-bottom:12px; color:#fff; font-weight:700; display:flex; align-items:center; gap:7px; letter-spacing:.01em;}
footer a{font-size:12.5px; color:var(--footer-link); margin-bottom:9px; display:block; transition:color .25s var(--ease), transform .2s var(--ease);}
footer a:hover{color:var(--link-hover-color); transform:translateX(2px);}
footer p{color:var(--footer-link);}

.ftr-dot{width:6px; height:6px; min-width:6px; border-radius:50%; background:var(--link-hover-color); box-shadow:0 0 6px rgba(34,211,238,.7);}

/* ---- Top area: brand + nav columns ---- */
.ftr-top{display:flex; flex-wrap:wrap; gap:34px 28px; margin-bottom:28px;}
.ftr-brand{flex:1 1 220px; max-width:280px;}
.ftr-brand .brand{color:#fff; margin-bottom:10px;}
.ftr-brand .brand .brand-badge{background:var(--footer-card); box-shadow:var(--ftr-shadow-sm);}
.ftr-tagline{font-size:12px; line-height:1.55; color:var(--footer-link); max-width:250px;}
.ftr-social{display:flex; gap:9px; margin-top:16px;}
.ftr-social a{
    width:32px; height:32px; border-radius:11px; background:var(--ftr-card-grad); border:var(--ftr-border);
    box-shadow:var(--ftr-shadow-sm); display:flex; align-items:center; justify-content:center;
    margin-bottom:0; color:var(--footer-link); transition:color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.ftr-social a:hover{color:var(--link-hover-color); box-shadow:var(--ftr-shadow-sm), var(--ftr-glow); transform:translateY(-2px);}
.ftr-social svg{width:14px; height:14px;}

.ftr-nav{flex:2 1 480px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px 18px;}
.ftr-col a:last-child{margin-bottom:0;}

/* ---- Kontak Kami ---- */
.ftr-contact{
    background:var(--ftr-card-grad); border:var(--ftr-border); border-radius:22px; box-shadow:var(--ftr-shadow);
    padding:18px 20px 20px; margin-bottom:20px;
}
.ftr-contact-title{margin-bottom:14px;}
.ftr-contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.ftr-contact-card{
    display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:16px;
    background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); box-shadow:var(--ftr-shadow-sm);
    margin-bottom:0; transition:box-shadow .25s var(--ease), transform .2s var(--ease), border-color .25s var(--ease);
}
.ftr-contact-card:hover{box-shadow:var(--ftr-shadow-sm), var(--ftr-glow); border-color:rgba(34,211,238,.3); transform:translateY(-2px);}
.ftr-contact-icon{
    width:38px; height:38px; min-width:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    box-shadow:var(--ftr-shadow-sm);
}
.ftr-contact-icon.is-wa{color:var(--green); background:rgba(31,178,122,.1);}
.ftr-contact-icon.is-mail{color:var(--link-hover-color); background:rgba(34,211,238,.08);}
.ftr-contact-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.ftr-contact-text strong{font-size:12.5px; color:#fff; margin:0;}
.ftr-contact-text span{font-size:11px; color:var(--footer-link); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ---- CTA banner ---- */
.ftr-cta{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    background:linear-gradient(120deg, rgba(14,165,233,.14), rgba(34,211,238,.05)), var(--ftr-card-grad);
    border:1px solid rgba(34,211,238,.22); border-radius:22px; padding:18px 22px; margin-bottom:26px;
    box-shadow:var(--ftr-shadow), 0 0 32px rgba(14,165,233,.10); margin-top:0;
    transition:box-shadow .25s var(--ease), transform .2s var(--ease);
}
.ftr-cta:hover{box-shadow:var(--ftr-shadow), 0 0 40px rgba(34,211,238,.18); transform:translateY(-1px);}
.ftr-cta strong{display:block; font-size:14.5px; color:#fff; font-family:var(--font-display); margin-bottom:2px;}
.ftr-cta > span:first-child span{font-size:12px; color:var(--footer-link);}
.ftr-cta-btn{
    display:inline-flex; align-items:center; gap:7px; background:var(--lime); color:#fff; font-weight:700;
    font-size:12.5px; padding:10px 16px; border-radius:12px; box-shadow:0 4px 14px rgba(14,165,233,.35);
    margin-bottom:0; white-space:nowrap;
}
.ftr-cta-btn svg{width:14px; height:14px;}

/* ---- Trust + payment strip ---- */
.ftr-meta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px; padding-bottom:18px; margin-bottom:14px; border-bottom:1px solid rgba(255,255,255,.06);}
.ftr-trust{display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--footer-link);}
.ftr-trust svg{width:16px; height:16px; color:var(--green); min-width:16px;}
.ftr-trust strong{color:#fff; font-weight:700;}
.ftr-pay{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.ftr-pay-label{font-size:11px; color:var(--footer-link); white-space:nowrap;}
.ftr-pay-chips{display:flex; flex-wrap:wrap; gap:6px;}
.ftr-pay-chip{
    width:34px; height:20px; border-radius:6px; box-shadow:var(--ftr-shadow-sm); display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:7.5px; color:#fff; letter-spacing:.01em;
}

footer .copyright{padding-top:0; font-size:11px; text-align:center; color:#7C8A9B;}
.ftr-owner-link{color:inherit; text-decoration:underline; display:inline; margin:0; transition:color .2s var(--ease);}
.ftr-owner-link:hover{color:var(--link-hover-color);}

@media (max-width:900px){
    .ftr-nav{grid-template-columns:repeat(3,1fr); flex-basis:100%;}
    .ftr-contact-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
    footer{padding:32px 0 14px;}
    .ftr-top{gap:24px; margin-bottom:20px;}
    .ftr-nav{grid-template-columns:1fr; gap:18px;}
    .ftr-contact{padding:16px 16px 18px; border-radius:20px;}
    .ftr-cta{flex-direction:column; align-items:stretch; text-align:left; padding:16px 18px;}
    .ftr-cta-btn{justify-content:center;}
    .ftr-meta{flex-direction:column; align-items:flex-start; gap:14px;}
}

/* ============ PWA INSTALL TOAST ============ */
.pwa-toast{
    position:fixed; left:16px; right:16px; bottom:16px; z-index:120;
    max-width:400px; margin:0 auto;
    background:var(--surface); border:var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-lg); padding:14px 16px;
    display:flex; align-items:center; gap:12px;
    transform:translateY(120%); opacity:0;
    transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .3s var(--ease);
}
.pwa-toast.show{transform:translateY(0); opacity:1;}
.pwa-toast .pwa-toast-icon{
    width:38px; height:38px; border-radius:11px; background:var(--surface); box-shadow:var(--shadow-inset-sm);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--icon-color);
}
.pwa-toast .pwa-toast-body{flex:1; min-width:0;}
.pwa-toast .pwa-toast-body strong{display:block; font-size:12.5px; margin-bottom:2px;}
.pwa-toast .pwa-toast-body span{font-size:11px; color:var(--ink-soft); display:block;}
.pwa-toast .pwa-toast-actions{display:flex; align-items:center; gap:6px; flex-shrink:0;}
.pwa-toast-close{
    border:none; background:var(--surface); box-shadow:var(--shadow-inset-sm); width:26px; height:26px;
    border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft); flex-shrink:0;
}

/* ============ COOKIE CONSENT ============ */
.cookie-consent{
    position:fixed; left:16px; right:16px; bottom:16px; z-index:160;
    max-width:480px; margin:0 auto;
    background:var(--surface); border:var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-lg); padding:18px 20px;
    display:flex; flex-direction:column; gap:12px;
    transform:translateY(130%); opacity:0;
    transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .35s var(--ease);
}
.cookie-consent.show{transform:translateY(0); opacity:1;}
.cookie-consent-head{display:flex; align-items:center; gap:10px;}
.cookie-consent-icon{
    width:36px; height:36px; border-radius:10px; background:var(--surface); box-shadow:var(--shadow-inset-sm);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--icon-color);
}
.cookie-consent-head strong{font-size:13.5px;}
.cookie-consent p{margin:0; font-size:12.5px; line-height:1.6; color:var(--ink-soft);}
.cookie-consent p a{color:var(--link-color); text-decoration:underline;}
.cookie-consent-actions{display:flex; gap:8px; flex-wrap:wrap;}
.cookie-consent-actions .btn{flex:1; justify-content:center; min-width:110px;}

/* ============ WEB PUSH PROMPT (sitewide, non-blocking) ============ */
.push-prompt{
    position:fixed; left:16px; bottom:calc(78px + env(safe-area-inset-bottom, 0px)); z-index:110;
    width:min(300px, calc(100vw - 32px));
    background:var(--surface); border:var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-lg); padding:14px 16px;
    display:flex; align-items:flex-start; gap:10px;
    transform:translateX(-130%); opacity:0;
    transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .35s var(--ease);
}
.push-prompt.show{transform:translateX(0); opacity:1;}
.push-prompt-icon{
    width:34px; height:34px; border-radius:10px; background:var(--surface); box-shadow:var(--shadow-inset-sm);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--icon-color);
}
.push-prompt-body{flex:1; min-width:0;}
.push-prompt-body strong{display:block; font-size:12.5px; margin-bottom:2px;}
.push-prompt-body span{font-size:11px; color:var(--ink-soft); display:block; margin-bottom:8px;}
.push-prompt-actions{display:flex; gap:6px;}
.push-prompt-close{
    border:none; background:var(--surface); box-shadow:var(--shadow-inset-sm); width:24px; height:24px;
    border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft); flex-shrink:0;
}
@media (max-width:640px){
    .push-prompt{bottom:calc(72px + env(safe-area-inset-bottom, 0px));}
}

/* ============ SCROLL TOP / LOADER ============ */
.back-to-top{
    position:fixed; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); right:16px; width:42px; height:42px; border:none;
    border-radius:14px; background:var(--surface); display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(46,52,64,.2); cursor:pointer; z-index:90; opacity:0; pointer-events:none; color:var(--icon-color);
    transition:opacity .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.back-to-top.show{opacity:1; pointer-events:auto;}
.back-to-top:hover{box-shadow:0 6px 16px rgba(46,52,64,.26), 0 0 0 1px rgba(14,165,233,.18), 0 0 16px rgba(14,165,233,.16); transform:translateY(-2px);}
.back-to-top:active{box-shadow:var(--shadow-inset-sm);}
.wa-float{
    position:fixed; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); left:16px; width:41px; height:41px; border:none;
    border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(46,52,64,.22), 0 0 0 1px rgba(31,178,122,.18), 0 0 14px rgba(31,178,122,.28); z-index:90; color:#fff;
    transition:box-shadow .25s var(--ease), transform .2s var(--ease);
}
.wa-float:hover{box-shadow:0 6px 16px rgba(46,52,64,.28), 0 0 0 1px rgba(31,178,122,.3), 0 0 20px rgba(31,178,122,.4); transform:translateY(-2px);}

/* ============ RESPONSIVE ============ */
html, body{overflow-x:hidden; max-width:100vw;}
img, svg, video, iframe, table{max-width:100%;}
* { min-width:0; }

/* Navbar: menu sudah berkembang jadi 16 item + logo + tombol Install App. Itu butuh ruang
   lebih lebar dari breakpoint lama (1180px) — makanya dulu teks saling bertumpuk di banyak
   resolusi laptop/desktop biasa. Sekarang breakpoint dinaikkan ke 1440px: di bawah itu,
   SELURUH menu (termasuk Login/Register/Profil) otomatis pindah ke hamburger/off-canvas
   sidebar yang sudah ada, supaya tidak pernah dipaksa muat 1 baris dan berhimpitan. Di atas
   1440px, menu tampil 1 baris dengan gap penuh karena ruang sudah pasti cukup. */
@media (max-width:1600px){
    .nav-menu{display:none;}
    .nav-toggle{display:flex;}
}
@media (max-width:991px){
    .hero-grid{grid-template-columns:1fr; text-align:left;}
    .hero-visual{order:2; margin-top:24px;}
    .navbar .inner{gap:8px;}
    .brand{font-size:19px; gap:8px;}
    .navbar{height:74px;}
    .brand-logo-img{height:56px; max-width:294px;}
}
@media (max-width:860px){
    .grid-5{grid-template-columns:repeat(3,1fr);}
    .grid-4{grid-template-columns:repeat(2,1fr);}
    .grid-3{grid-template-columns:repeat(2,1fr);}
    .grid-2{grid-template-columns:1fr;}
}
@media (max-width:768px){
    .hero-visual{display:none;}
    .hero-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
    form[style*="grid-template-columns"], div[style*="grid-template-columns"]{grid-template-columns:1fr!important;}
    .navbar{height:67px;}
    .brand{font-size:17px; gap:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .brand .brand-badge{width:37px; height:37px; min-width:37px; max-width:37px; border-radius:10px;}
    .brand-logo-img{height:48px; max-width:238px;}
    .nav-actions{gap:6px;}
    .nav-actions .btn{padding:7px 12px; font-size:11px; height:38px;}
    .nav-toggle{width:34px; height:34px; padding:0; gap:4px;}
    .nav-toggle-bar:nth-child(1){width:17px;}
    .nav-toggle-bar:nth-child(2){width:22px;}
    .nav-toggle-bar:nth-child(3){width:13px;}
    .grid-4, .grid-3{grid-template-columns:1fr 1fr;}
    .grid-5{grid-template-columns:1fr 1fr;}
    .hero{padding:22px 0 18px;}
    .container{padding:0 14px;}
    h1{font-size:clamp(22px,7vw,30px)!important;}
    table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}
}
@media (max-width:420px){
    .grid-4, .grid-3, .grid-5{grid-template-columns:1fr;}
    .brand{font-size:15px;}
    .brand .brand-badge{width:31px; height:31px; min-width:31px; border-radius:9px;}
    .navbar{height:61px;}
    .brand-logo-img{height:42px; max-width:196px;}
}

/* ============================================================
   OWNER / FOUNDER PORTFOLIO (/owner) — Neumorphism premium.
   Pakai token depth yang sama levelnya dengan halaman lain supaya
   terasa timbul jelas sejak pandangan pertama, tetap smooth & tidak
   berlebihan (bukan glow).
   ============================================================ */
.owner-page{
    --ow-shadow:6px 6px 15px rgba(163,177,198,.34), -6px -6px 15px rgba(255,255,255,.8), inset 1px 1px 0 rgba(255,255,255,.35);
    --ow-shadow-sm:4px 4px 10px rgba(163,177,198,.3), -4px -4px 10px rgba(255,255,255,.76), inset 1px 1px 0 rgba(255,255,255,.32);
    --ow-shadow-lg:11px 11px 23px rgba(163,177,198,.38), -11px -11px 23px rgba(255,255,255,.82), inset 1px 1px 0 rgba(255,255,255,.4);
    --ow-shadow-inset:inset 4px 4px 8px rgba(163,177,198,.3), inset -4px -4px 8px rgba(255,255,255,.72);
    --ow-shadow-inset-sm:inset 3px 3px 6px rgba(163,177,198,.28), inset -3px -3px 6px rgba(255,255,255,.68);
}
.owner-page p, .owner-page li, .owner-page a{font-size:12px;}

/* ---- Hero Owner ---- */
.owner-hero{padding:34px 0 22px;}
.owner-hero-inner{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.owner-avatar{
    width:104px; height:104px; min-width:104px; border-radius:28px; background:var(--surface);
    box-shadow:var(--ow-shadow-lg); display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:34px; color:var(--icon-color); flex-shrink:0;
}
.owner-hero h1{font-size:clamp(24px,4.5vw,38px); margin-bottom:6px;}
.owner-hero .owner-role{font-size:12px; color:var(--ink-soft); margin-bottom:10px; max-width:520px;}
.owner-hero-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.owner-hero-actions .btn{box-shadow:var(--ow-shadow-sm);}
.owner-hero-actions .btn:hover{box-shadow:var(--ow-shadow);}
.owner-hero-actions .btn:active{box-shadow:var(--ow-shadow-inset);}

/* ---- Card umum di halaman owner (shadow super halus) ---- */
.owner-page .card{box-shadow:var(--ow-shadow); transition:box-shadow .25s var(--ease), transform .25s var(--ease);}
.owner-page a.card:hover, .owner-page .card.hoverable:hover{box-shadow:var(--ow-shadow-lg); transform:translateY(-2px);}
.owner-page .cta-box{box-shadow:var(--ow-shadow-lg);}
.owner-page .accordion-item{box-shadow:var(--ow-shadow-sm);}
.owner-page .accordion-item[open]{box-shadow:var(--ow-shadow-inset-sm);}

/* ---- Timeline Perjalanan (vertical) ---- */
.owner-timeline{position:relative; padding-left:26px; margin-top:6px;}
.owner-timeline::before{content:""; position:absolute; left:7px; top:4px; bottom:4px; width:2px; background:var(--grey-dark); border-radius:2px;}
.owner-timeline-item{position:relative; padding-bottom:22px;}
.owner-timeline-item:last-child{padding-bottom:0;}
.owner-timeline-dot{
    position:absolute; left:-26px; top:2px; width:16px; height:16px; border-radius:50%;
    background:var(--surface); box-shadow:var(--ow-shadow-sm), 0 0 0 3px var(--surface);
    display:flex; align-items:center; justify-content:center;
}
.owner-timeline-dot::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--lime);}
.owner-timeline-year{
    display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:700;
    font-size:12px; color:var(--lime); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px;
}
.owner-timeline-item .card{padding:13px 14px;}
.owner-timeline-item h4{font-size:13.5px; margin-bottom:4px;}
.owner-timeline-item p{font-size:12px; color:var(--ink-soft); margin:0;}

/* ---- Milestone flow (ringkasan singkat, arah vertikal di mobile) ---- */
.owner-milestone-flow{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.owner-milestone-step{
    flex:1; min-width:150px; text-align:center; padding:14px 10px; border-radius:var(--radius);
    background:var(--surface); box-shadow:var(--ow-shadow-sm);
}
.owner-milestone-step .ms-year{font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--lime); margin-bottom:4px; display:block;}
.owner-milestone-step .ms-label{font-size:11.5px; color:var(--ink-soft);}
.owner-milestone-arrow{color:var(--ink-soft); flex-shrink:0; width:16px; height:16px;}
@media (max-width:768px){
    .owner-milestone-flow{flex-direction:column; align-items:stretch;}
    .owner-milestone-arrow{transform:rotate(90deg); align-self:center;}
}

/* ---- Owner profile card (ringkas) ---- */
.owner-profile-card{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
    padding:22px 18px; max-width:280px; margin:0 auto;
}
.owner-profile-card .owner-avatar{width:76px; height:76px; min-width:76px; font-size:24px; border-radius:22px; margin-bottom:8px;}
.owner-profile-card h3{font-size:16px; margin-bottom:2px;}
.owner-profile-card .role{font-size:11.5px; color:var(--lime); font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-bottom:2px;}
.owner-profile-card .brand-name{font-size:12px; color:var(--ink-soft); margin-bottom:12px;}

/* ---- Expertise grid item ikon lebih besar ---- */
.owner-expertise-card{text-align:center; padding:16px 10px;}
.owner-expertise-card svg.icon{width:22px; height:22px; color:var(--icon-color); margin-bottom:8px;}
.owner-expertise-card .label{font-size:12px; font-weight:700;}

/* ---- Storytelling ---- */
.owner-story p{font-size:12px; color:var(--ink-soft); margin-bottom:11px; line-height:1.75;}
.owner-story p:last-child{margin-bottom:0;}

@media (max-width:640px){
    .owner-hero{padding:22px 0 16px;}
    .owner-hero-inner{flex-direction:column; text-align:center; align-items:center;}
    .owner-hero .owner-role{margin-left:auto; margin-right:auto;}
    .owner-avatar{width:84px; height:84px; min-width:84px; font-size:28px; border-radius:22px;}
    .owner-hero-actions{justify-content:center;}
    .owner-timeline{padding-left:22px;}
    .owner-timeline-dot{left:-22px;}
}

/* ============ REDIRECT PANEL: dashboard kredensial premium, anti-overflow ============ */
.redirect-page-pad{padding-top:6px; padding-bottom:28px;}

.rp-card{
    width:100%; max-width:100%; box-sizing:border-box; overflow:hidden;
    border-radius:22px; padding:18px; background:var(--surface); box-shadow:var(--shadow-lg);
}
.rp-title{font-size:clamp(19px,4.5vw,23px); font-weight:800; color:var(--ink); margin:8px 0 14px; line-height:1.3;}

.rp-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.rp-status-badge{
    display:inline-flex; align-items:center; gap:5px; flex-shrink:0; height:26px; padding:0 11px;
    border-radius:9px; background:var(--green-soft); color:#0F7A54;
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
}
.rp-status-badge svg.icon{width:12px; height:12px;}

.rp-alert{
    display:flex; align-items:center; gap:8px; padding:11px 13px; border-radius:13px;
    background:var(--green-soft); color:#0F7A54; font-size:12.5px; font-weight:600; line-height:1.4;
    margin-bottom:14px;
}
.rp-alert svg.icon{width:16px; height:16px; flex-shrink:0;}
.rp-alert-error{background:var(--danger-soft); color:#C23C50; margin-bottom:14px;}

.rp-fields{display:flex; flex-direction:column; gap:9px;}
.rp-field{
    width:100%; max-width:100%; box-sizing:border-box; overflow:hidden;
    border-radius:14px; padding:11px 13px; background:var(--surface); box-shadow:var(--shadow-inset-sm);
}
.rp-field-label{
    font-size:11px; font-weight:600; color:var(--ink-soft); text-transform:uppercase;
    letter-spacing:.03em; margin-bottom:5px;
}
.rp-field-value{
    font-size:14px; font-weight:700; color:var(--ink); line-height:1.5;
    overflow-wrap:anywhere; word-break:break-word; max-width:100%;
}
.rp-field-value--inline{display:flex; align-items:center; gap:8px;}
.rp-field-value--inline svg.icon{width:15px; height:15px; flex-shrink:0;}

/* Baris value + tombol Salin: flex-wrap supaya tombol otomatis turun ke bawah, TIDAK PERNAH menutupi teks */
.rp-field-value-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%;}
.rp-field-value-row .rp-field-value{flex:1 1 170px; min-width:0;}
.rp-mono{font-family:'SFMono-Regular', Consolas, 'Courier New', monospace; letter-spacing:.2px; font-size:13.5px;}

.rp-copy-btn{
    flex-shrink:0; display:inline-flex; align-items:center; gap:5px;
    height:32px; padding:0 12px; border:none; border-radius:10px; cursor:pointer;
    font-family:var(--font-body); font-size:11.5px; font-weight:700; color:var(--ink);
    background:var(--surface); box-shadow:var(--shadow-sm);
    transition:box-shadow .2s var(--ease), transform .12s var(--ease), color .2s var(--ease);
}
.rp-copy-btn svg.icon{width:13px; height:13px;}
.rp-copy-btn:hover{box-shadow:var(--shadow);}
.rp-copy-btn:active{box-shadow:var(--shadow-inset); transform:scale(.96);}
.rp-copy-btn.is-copied{color:#0F7A54;}

.rp-meta{
    display:flex; flex-direction:column; gap:6px; margin-top:14px; padding-top:12px;
    border-top:1px solid rgba(31,41,55,.08); font-size:12px; color:var(--ink-soft);
}
.rp-meta-item{display:flex; align-items:flex-start; gap:8px; overflow-wrap:anywhere;}
.rp-meta-item svg.icon{width:14px; height:14px; flex-shrink:0; margin-top:2px;}

.rp-open-btn{margin-top:16px; height:46px; font-size:13px;}

/* ---- Status Garansi (di kartu detail panel) ---- */
.rp-garansi{
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
    margin-top:12px; padding:11px 13px; border-radius:13px; background:var(--surface); box-shadow:var(--shadow-inset-sm);
}
.rp-garansi-text{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:#0F7A54;}
.rp-garansi--habis .rp-garansi-text{color:#C23C50;}
.rp-garansi-text svg.icon{width:15px; height:15px; flex-shrink:0;}
.rp-garansi-btn{flex-shrink:0; height:32px; padding:0 12px; font-size:11.5px;}

/* ---- Status Garansi (di daftar semua panel aktif) ---- */
.rp-list-item-garansi{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:#0F7A54; margin-top:5px;}
.rp-list-item-garansi.rp-garansi--habis{color:#C23C50;}
.rp-list-item-garansi svg.icon{width:13px; height:13px; flex-shrink:0;}

/* ---- Daftar semua panel aktif (fallback tanpa ?order=) ---- */
.rp-list{display:flex; flex-direction:column; gap:9px;}
.rp-list-item{
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
    width:100%; max-width:100%; box-sizing:border-box; overflow:hidden;
    border-radius:14px; padding:12px 14px; background:var(--surface); box-shadow:var(--shadow-inset-sm);
}
.rp-list-item-info{min-width:0; flex:1 1 180px;}
.rp-list-item-name{font-size:13.5px; font-weight:700; color:var(--ink); overflow-wrap:anywhere;}
.rp-list-item-meta{font-size:11.5px; color:var(--ink-soft); margin-top:3px; overflow-wrap:anywhere; line-height:1.5;}
.rp-list-item-btn{flex-shrink:0;}

/* WhatsApp float dijauhkan dari tombol "Buka Panel" biar tidak saling menutupi */
body:has(.redirect-page-pad) .wa-float{width:38px; height:38px;}
body:has(.redirect-page-pad) .wa-float svg{width:17px; height:17px;}

@media (max-width:380px){
    .rp-card{padding:15px; border-radius:20px;}
    .rp-field{padding:10px 12px;}
    .rp-copy-btn{padding:0 10px; font-size:11px;}
}

/* ============ API DOCUMENTATION ============ */
.docs-page-pad{padding-top:0; padding-bottom:8px;}

/* ---- Masthead ---- */
.docs-hero{padding:26px 0 22px;}
.docs-hero-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px;}
.docs-badge-reseller{
    display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:800;
    font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#fff;
    background:linear-gradient(135deg, var(--lime), var(--secondary)); padding:6px 12px; border-radius:20px;
    box-shadow:var(--shadow-sm);
}
.docs-badge-reseller svg.icon{width:13px; height:13px;}
.docs-hero h1{font-size:clamp(24px,4vw,34px); margin-bottom:8px;}
.docs-hero p.lead{font-size:13px; color:var(--ink-soft); max-width:640px; margin-bottom:0;}
.docs-hero-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}

/* ---- Shell layout: sidebar + content ---- */
.docs-shell{display:grid; grid-template-columns:236px minmax(0,1fr); gap:26px; align-items:start; padding-bottom:40px;}
.docs-sidebar{
    position:sticky; top:72px; max-height:calc(100vh - 90px); overflow-y:auto;
    padding:14px; scrollbar-width:thin;
}
.docs-sidebar::-webkit-scrollbar{width:5px;}
.docs-sidebar::-webkit-scrollbar-thumb{background:var(--grey-dark); border-radius:4px;}
.docs-search-box{position:relative; margin-bottom:14px;}
.docs-search-box svg.icon{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ink-soft); width:14px; height:14px;}
.docs-search-box input{
    width:100%; padding:9px 12px 9px 32px; font-size:11.5px; font-family:var(--font-body);
    border:var(--border); border-radius:var(--radius-sm); background:var(--glass-bg-soft); box-shadow:var(--shadow-inset-sm); color:var(--ink);
}
.docs-search-box input:focus{box-shadow:var(--shadow-inset-sm), 0 0 0 1.5px rgba(14,165,233,.22); outline:none;}
.docs-nav-group-title{
    font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#9AA5B1; font-weight:700;
    margin:14px 6px 6px;
}
.docs-nav-group-title:first-child{margin-top:0;}
.docs-nav{display:flex; flex-direction:column; gap:1px;}
.docs-nav a{
    display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:10px;
    font-size:12px; font-weight:600; color:var(--ink-soft);
    transition:box-shadow .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.docs-nav a .docs-nav-dot{width:5px; height:5px; border-radius:50%; background:var(--grey-dark); flex-shrink:0; transition:background .2s var(--ease), transform .2s var(--ease);}
.docs-nav a:hover{color:var(--ink); box-shadow:var(--shadow-inset-sm);}
.docs-nav a.is-active{color:var(--lime); font-weight:800; box-shadow:var(--shadow-inset-sm); background:var(--lime-soft);}
.docs-nav a.is-active .docs-nav-dot{background:var(--lime); transform:scale(1.4);}
.docs-nav a.is-hidden{display:none;}
.docs-search-empty{display:none; font-size:11.5px; color:var(--ink-soft); padding:8px 10px;}
.docs-search-empty.show{display:block;}

/* ---- Mobile table-of-contents (details dropdown, sidebar hidden on mobile) ---- */
.docs-mobile-nav{display:none; margin-bottom:18px;}
.docs-mobile-nav summary{
    display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer;
    padding:12px 14px; border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm);
    font-family:var(--font-display); font-weight:700; font-size:13px; list-style:none;
}
.docs-mobile-nav summary::-webkit-details-marker{display:none;}
.docs-mobile-nav summary svg.chevron{width:15px; height:15px; transition:transform .25s var(--ease); color:var(--icon-color);}
.docs-mobile-nav[open] summary svg.chevron{transform:rotate(180deg);}
.docs-mobile-nav .docs-mobile-nav-body{margin-top:8px; padding:10px; border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-inset-sm);}

/* ---- Content column ---- */
.docs-content{min-width:0; max-width:800px;}
.docs-section{padding:0 0 34px; margin-bottom:34px; border-bottom:1px dashed var(--grey-dark); scroll-margin-top:93px;}
.docs-section:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.docs-section-eyebrow{
    display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700;
    font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--lime); margin-bottom:8px;
}
.docs-section h2{font-size:clamp(19px,3vw,25px); margin-bottom:10px; display:flex; align-items:center; gap:9px;}
.docs-section h2 svg.icon{width:19px; height:19px; color:var(--icon-color);}
.docs-section h3{font-size:14.5px; margin:20px 0 8px;}
.docs-section p{font-size:12.5px; color:var(--ink-soft); margin-bottom:11px; line-height:1.75;}
.docs-section ul.docs-list{display:flex; flex-direction:column; gap:7px; margin-bottom:11px;}
.docs-section ul.docs-list li{display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--ink-soft); line-height:1.6;}
.docs-section ul.docs-list li svg.icon{width:14px; height:14px; margin-top:2px; color:var(--green); flex-shrink:0;}

/* ---- Callout boxes: soft neumorphism putih/off-white, teks hitam & fixed
       (sengaja TIDAK pakai var(--surface)/var(--ink)/var(--shadow-inset-sm) supaya
       tidak ikut gelap kalau admin ganti Theme Settings ke warna gelap, dan supaya
       shadow-nya timbul lembut, bukan cekung/tebal seperti sebelumnya) ---- */
.docs-callout{
    display:flex; gap:10px; padding:14px 16px; border-radius:16px; margin:14px 0;
    background:#F7F8FA; box-shadow:5px 5px 12px rgba(163,177,198,.26), -5px -5px 12px rgba(255,255,255,.78), inset 1px 1px 0 rgba(255,255,255,.4);
    font-size:12.5px; line-height:1.7; color:#3C4450; border-left:3px solid transparent;
}
.docs-callout svg.icon{flex-shrink:0; margin-top:1px; width:16px; height:16px;}
.docs-callout strong{color:#161B22;}
.docs-callout-info{border-left-color:#0EA5E9;}
.docs-callout-info svg.icon{color:#0EA5E9;}
.docs-callout-warn{border-left-color:#D98A15;}
.docs-callout-warn svg.icon{color:#D98A15;}
.docs-callout-danger{border-left-color:#C23C50;}
.docs-callout-danger svg.icon{color:#C23C50;}
.docs-callout-success{border-left-color:#0F9D6C;}
.docs-callout-success svg.icon{color:#0F9D6C;}

/* ---- FAQ cards: soft neumorphism putih/off-white, warna tetap terang & fixed
       (sengaja TIDAK pakai var(--surface)/var(--ink) supaya tidak ikut jadi
       gelap kalau admin ganti Theme Settings ke warna gelap) ---- */
.faq-card{
    background:#F7F8FA; border-radius:16px; padding:16px 18px; margin:12px 0;
    box-shadow:5px 5px 12px rgba(163,177,198,.26), -5px -5px 12px rgba(255,255,255,.78), inset 1px 1px 0 rgba(255,255,255,.4);
}
.faq-card-q{font-size:14px; font-weight:800; color:#161B22; margin:0 0 7px; line-height:1.4;}
.faq-card-a{font-size:12.5px; color:#3C4450; line-height:1.7; margin:0;}

/* ---- Pricing table ---- */
.docs-table-wrap{border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); padding:6px; overflow-x:auto; margin:14px 0;}
table.docs-table{width:100%; border-collapse:collapse; min-width:560px; font-size:12px;}
table.docs-table th{
    text-align:left; font-family:var(--font-display); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
    color:var(--ink-soft); padding:11px 12px; border-bottom:1px solid var(--grey-dark); white-space:nowrap;
}
table.docs-table td{padding:11px 12px; border-bottom:1px solid var(--grey); color:var(--ink); vertical-align:middle;}
table.docs-table tbody tr:last-child td{border-bottom:none;}
table.docs-table tbody tr:hover{background:var(--lime-soft);}
table.docs-table td.docs-td-name{font-weight:700; display:flex; align-items:center; gap:7px; white-space:nowrap;}
table.docs-table td.docs-td-price{font-family:var(--font-display); font-weight:800; color:var(--lime); white-space:nowrap;}
table.docs-table td.docs-mono{font-family:'SFMono-Regular', Consolas, 'Courier New', monospace; font-size:11.5px; color:var(--ink-soft);}
.docs-best-value{
    display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:800; text-transform:uppercase;
    letter-spacing:.04em; color:#fff; background:var(--green); padding:2px 7px; border-radius:8px; flex-shrink:0;
}

/* ---- Endpoint block ---- */
.docs-endpoint{border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); padding:16px; margin:14px 0;}
.docs-endpoint-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;}
.docs-method{
    font-family:var(--font-display); font-weight:800; font-size:11px; padding:5px 10px; border-radius:8px;
    letter-spacing:.03em; flex-shrink:0;
}
.docs-method-get{background:var(--lime-soft); color:#0C6FA6;}
.docs-method-post{background:var(--green-soft); color:#0F7A54;}
.docs-endpoint-path{
    font-family:'SFMono-Regular', Consolas, 'Courier New', monospace; font-size:13px; font-weight:700;
    color:var(--ink); word-break:break-all;
}
.docs-endpoint-desc{font-size:12.5px; color:var(--ink-soft); margin-bottom:12px;}
.docs-endpoint-steps{counter-reset:docstep; display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.docs-endpoint-steps li{
    counter-increment:docstep; display:flex; align-items:flex-start; gap:9px; font-size:12px; color:var(--ink-soft); line-height:1.6;
}
.docs-endpoint-steps li::before{
    content:counter(docstep); flex-shrink:0; width:19px; height:19px; border-radius:50%; background:var(--surface);
    box-shadow:var(--shadow-sm); color:var(--icon-color); font-family:var(--font-display); font-weight:800; font-size:10px;
    display:flex; align-items:center; justify-content:center; margin-top:1px;
}

/* ---- Code block ---- */
.docs-code{
    border-radius:14px; overflow:hidden; margin:12px 0; background:#0D1721; box-shadow:var(--shadow-sm);
}
.docs-code-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px;
    background:#0A1119; border-bottom:1px solid rgba(255,255,255,.06);
}
.docs-code-lang{
    display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:700; font-size:10.5px;
    text-transform:uppercase; letter-spacing:.05em; color:#7FA8C9;
}
.docs-code-lang svg.icon{width:12px; height:12px;}
.docs-copy-btn{
    display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border:none; border-radius:8px;
    cursor:pointer; font-family:var(--font-body); font-size:10.5px; font-weight:700; color:#B9C8D6;
    background:rgba(255,255,255,.06); transition:background .2s var(--ease), color .2s var(--ease);
}
.docs-copy-btn:hover{background:rgba(255,255,255,.12); color:#fff;}
.docs-copy-btn.is-copied{color:#5FE3A4;}
.docs-copy-btn svg.icon{width:12px; height:12px;}
.docs-code pre{margin:0; padding:14px; overflow-x:auto;}
.docs-code code{
    font-family:'SFMono-Regular', Consolas, 'Courier New', monospace; font-size:11.8px; line-height:1.7;
    color:#D4E2EE; white-space:pre;
}
.tok-key{color:#7FC7FF;} .tok-str{color:#9FE39A;} .tok-num{color:#F0B266;}
.tok-bool{color:#F0B266;} .tok-kw{color:#C99BF0;} .tok-com{color:#5C7186; font-style:italic;} .tok-fn{color:#7FC7FF;} .tok-var{color:#F09B9B;}

/* ---- Language tabs (Example Integration) ---- */
.docs-tabs{display:flex; gap:6px; margin:14px 0 0; flex-wrap:wrap;}
.docs-tab-btn{
    font-family:var(--font-body); font-weight:700; font-size:11.5px; padding:8px 14px; border:none;
    border-radius:11px 11px 0 0; background:var(--surface); box-shadow:var(--shadow-sm); color:var(--ink-soft); cursor:pointer;
    transition:box-shadow .2s var(--ease), color .2s var(--ease);
}
.docs-tab-btn.is-active{color:var(--lime); box-shadow:var(--shadow-inset-sm); background:var(--lime-soft); font-weight:800;}
.docs-tab-panel{display:none;}
.docs-tab-panel.is-active{display:block;}

/* ---- API Key feature grid ---- */
.docs-key-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0;}
.docs-key-card{padding:14px; text-align:left;}
.docs-key-card svg.icon{width:18px; height:18px; color:var(--icon-color); margin-bottom:8px;}
.docs-key-card h4{font-size:12.5px; margin-bottom:3px;}
.docs-key-card p{font-size:11.5px; margin:0; color:var(--ink-soft);}
.docs-key-preview{margin-top:14px;}
.docs-key-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
    padding:12px 14px; border-radius:14px; background:var(--surface); box-shadow:var(--shadow-inset-sm); margin-bottom:8px;
}
.docs-key-row-label{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; font-weight:700; margin-bottom:3px;}
.docs-key-row-value{
    font-family:'SFMono-Regular', Consolas, 'Courier New', monospace; font-size:12.5px; font-weight:700; color:var(--ink);
    display:flex; align-items:center; gap:8px;
}
.docs-key-status{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#0F7A54;}
.docs-key-status .status-dot{background:var(--green);}

/* ---- Balance example ---- */
.docs-balance-flow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0;}
.docs-balance-step{flex:1; min-width:140px; text-align:center; padding:14px 10px; border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm);}
.docs-balance-step .bs-label{font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; display:block;}
.docs-balance-step .bs-val{font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--ink);}
.docs-balance-step.is-debit .bs-val{color:var(--danger);}
.docs-balance-step.is-final .bs-val{color:var(--green);}
.docs-balance-arrow{color:var(--ink-soft); flex-shrink:0; width:15px; height:15px;}
@media (max-width:600px){.docs-balance-arrow{transform:rotate(90deg);}}

/* ---- Error code table ---- */
.docs-error-code{
    font-family:var(--font-display); font-weight:800; font-size:12.5px; padding:3px 9px; border-radius:8px;
    display:inline-block; color:#fff;
}
.docs-error-4{background:#F0A93B;}
.docs-error-40{background:var(--danger);}
.docs-error-5{background:#6B7280;}

/* ---- Rate limit ---- */
.docs-limit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0;}
.docs-limit-card{text-align:center; padding:16px 10px;}
.docs-limit-card .num{font-family:var(--font-display); font-size:24px; font-weight:800; color:var(--lime);}
.docs-limit-card .label{font-size:11px; color:var(--ink-soft); margin-top:3px;}

/* ---- Changelog ---- */
.docs-changelog-item{display:flex; gap:12px; padding-bottom:16px; position:relative;}
.docs-changelog-item:not(:last-child)::before{content:""; position:absolute; left:5px; top:20px; bottom:0; width:1.5px; background:var(--grey-dark);}
.docs-changelog-dot{width:11px; height:11px; border-radius:50%; background:var(--lime); flex-shrink:0; margin-top:4px; box-shadow:0 0 0 3px var(--lime-soft);}
.docs-changelog-version{font-family:var(--font-display); font-weight:800; font-size:12.5px; color:var(--ink); margin-bottom:2px;}
.docs-changelog-date{font-size:10.5px; color:var(--ink-soft); font-weight:600; margin-left:8px;}
.docs-changelog-desc{font-size:12px; color:var(--ink-soft); margin-top:3px;}

@media (max-width:980px){
    .docs-shell{grid-template-columns:1fr;}
    .docs-sidebar{display:none;}
    .docs-mobile-nav{display:block;}
    .docs-key-grid{grid-template-columns:repeat(2,1fr);}
    .docs-limit-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
    .docs-key-grid{grid-template-columns:1fr;}
    .docs-hero-top{flex-direction:column; align-items:flex-start;}
}