/* ==========================================================================
   KAMAR MOBILE SHELL v1
   Drawer navigasi, header mobile, dan bottom navigation untuk HP & tablet.
   SELURUH aturan di file ini dibungkus @media(max-width:1024px) atau
   @media(min-width:1025px) supaya TIDAK PERNAH menyentuh tampilan desktop.
   File ini harus di-load PALING TERAKHIR (setelah semua CSS lain).
   ========================================================================== */

@media (max-width: 1024px){

  /* --- Paksa grid sidebar+konten jadi 1 kolom, terlepas dari breakpoint
     bawaan tiap halaman (beberapa halaman baru collapse di 880/1000/1100px) --- */
  .split-app{
    grid-template-columns: 1fr !important;
  }

  /* --- Ubah sidebar jadi drawer off-canvas (nempel kiri, geser masuk/keluar) ---
     (position:fixed di sini otomatis mengeluarkan sidebar dari alur grid,
     jadi tidak perlu aturan "position:relative" terpisah yang tadinya malah
     menang duluan karena selector-nya lebih spesifik dan bikin sidebar
     "position:relative" dulu, mendorong .split-main turun ~1 layar penuh) --- */
  .split-sidebar{
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: 86vw;
    max-width: 340px;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform .28s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: calc(18px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    padding-left: calc(16px + env(safe-area-inset-left)) !important;
    box-shadow: 20px 0 60px rgba(0,0,0,.45);
    /* Latar aslinya cuma tint tipis (dibuat untuk nempel di atas background
       gelap yang sama), jadi kalau dipakai sebagai panel drawer yang berdiri
       sendiri, konten di belakangnya keliatan tembus. Kasih latar solid TAPI
       tetap pakai gradient tipis + aksen gold biar tidak flat/polos. */
    background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 60%), var(--panel, var(--bg, #0b0a08)) !important;
    border-right: 1px solid rgba(184,138,61,.28) !important;
  }
  html.kamar-drawer-open .split-sidebar{
    transform: translateX(0);
  }

  /* --- Backdrop gelap di belakang drawer --- */
  .kamar-drawer-backdrop{
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
  }
  html.kamar-drawer-open .kamar-drawer-backdrop{
    opacity: 1;
    pointer-events: auto;
  }

  /* --- Kunci scroll halaman belakang saat drawer terbuka --- */
  html.kamar-drawer-open body{
    overflow: hidden;
  }

  /* --- Baris judul di dalam drawer (nama akun + tombol tutup) --- */
  .kamar-drawer-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
  }
  .kamar-drawer-close-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    border: 1px solid rgba(244,223,144,.4);
    background: rgba(255,255,255,.12);
    color: inherit;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
  }
  /* --- FIX kontras: latar drawer selalu gelap (lihat komentar di .split-sidebar
     di atas), jadi tombol X butuh latar/garis yang cukup terang supaya tidak
     tenggelam. stroke-width ikon juga ditebalkan sedikit biar lebih jelas. --- */
  .kamar-drawer-close-btn svg{ width: 18px; height: 18px; }
  .kamar-drawer-close-btn svg path{ stroke-width: 2.4; }

  /* --- FIX: beberapa halaman (mis. admin-activation.html) nambahin class
     "kamar-v46-atelier" ke <body>, yang otomatis bikin SEMUA elemen
     <button> polos (termasuk tombol tutup drawer kita) ketiban style
     tombol emas besar dari kamar-luxury-atelier-v46.css /
     kamar-dashboard-identity-v2.css (keduanya pakai !important dengan
     specificity lebih tinggi dari class biasa). Class diulang 4x supaya
     specificity-nya menang telak tanpa perlu utak-atik file tema
     aslinya (yang memang tidak boleh disentuh). --- */
  .kamar-drawer-close-btn.kamar-drawer-close-btn.kamar-drawer-close-btn.kamar-drawer-close-btn{
    background: rgba(255,255,255,.12) !important;
    background-image: none !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    border: 1px solid rgba(244,223,144,.4) !important;
    color: inherit !important;
    font-weight: 400 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.3) !important;
  }

  /* --- FIX: panel dropdown notifikasi lonceng (#kamarNotifPanel29F) di
     desktop posisinya "position:absolute; right:0; width:360px" relatif ke
     div pembungkus kecil di sisi kiri header — di layar sempit ini bikin
     panel selebar 360px terpotong ke kiri layar. Di mobile/tablet, pindah
     jadi "fixed" relatif ke viewport supaya selalu pas di dalam layar. --- */
  .kamar-notif-panel{
    position: fixed !important;
    top: 84px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(420px, calc(100vh - 100px)) !important;
  }

  /* --- FIX: header global (dibangun kamar-global-header-script) selalu
     punya tombol teks "Beranda" yang linknya ("index.html") SAMA PERSIS
     dengan link logo brand di sebelahnya — jadi dobel. Karena bottom nav
     sudah selalu ada tombol "Beranda" sendiri (ke dashboard admin/member),
     tombol teks "Beranda" di header disembunyikan di mobile/tablet supaya
     header lebih ringkas: logo (=Beranda/situs utama), lonceng, Logout. */
  .kamar-global-actions > .kamar-global-btn:not(.kamar-global-logout){
    display: none !important;
  }

  /* --- Bottom navigation --- */
  .kamar-bottom-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    border-top: 1px solid var(--line, rgba(238,206,122,.18));
    background: rgba(7,7,6,.94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .kamar-bottom-nav a{
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    color: var(--muted, rgba(245,240,230,.66));
    font-size: 10.5px;
    font-weight: 800;
    padding: 6px 2px;
    border-radius: 12px;
    min-height: 44px;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transform: scale(1);
    transition: transform .16s cubic-bezier(.34,1.56,.64,1),
                background-color .18s ease,
                color .18s ease;
  }
  .kamar-bottom-nav a svg{
    width: 20px;
    height: 20px;
    transition: transform .16s cubic-bezier(.34,1.56,.64,1);
  }
  /* --- Efek tekan ala tab bar iOS: sedikit mengecil + latar nyala redup
     saat disentuh, balik lagi begitu jari dilepas --- */
  .kamar-bottom-nav a:active{
    transform: scale(.92);
    background: rgba(212,166,63,.16);
  }
  .kamar-bottom-nav a:active svg{
    transform: scale(.9);
  }
  .kamar-bottom-nav a.active{
    color: var(--gold, #f4df90);
    background: rgba(212,166,63,.13);
  }
  /* --- "Pop" halus untuk tab yang lagi aktif saat halaman baru dimuat --- */
  .kamar-bottom-nav a.active svg{
    animation: kamarNavPop .32s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes kamarNavPop{
    0%{ transform: scale(.8); }
    65%{ transform: scale(1.12); }
    100%{ transform: scale(1); }
  }

  /* --- Kasih jarak bawah supaya konten tidak ketutup bottom nav --- */
  body.kamar-has-bottom-nav{
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
}

/* Di atas 1024px (tablet landscape besar / laptop / desktop): sembunyikan
   semua elemen mobile-only supaya tidak pernah muncul di desktop. */
@media (min-width: 1025px){
  .kamar-bottom-nav,
  .kamar-drawer-backdrop,
  .kamar-drawer-close-btn{
    display: none !important;
  }
  /* Tombol "Beranda" di header cuma disembunyikan di mobile/tablet;
     di desktop tetap tampil seperti semula (tidak disentuh). */
}

/* Hormati preferensi pengguna yang mematikan animasi */
@media (prefers-reduced-motion: reduce){
  .split-sidebar,
  .kamar-drawer-backdrop,
  .kamar-bottom-nav a,
  .kamar-bottom-nav a svg{
    transition: none !important;
    animation: none !important;
  }
}

/* --- Tabel HTML (mis. affiliate-dashboard.html, admin-connection-check.html):
   di HP tabel lebar bisa terpotong/dorong layar melebar. Bikin scroll
   horizontal lokal di dalam tabelnya sendiri, bukan di seluruh halaman.
   Berlaku generik untuk elemen <table> apapun di halaman yang pakai shell
   ini, tidak perlu ubah HTML/markup tiap halaman satu-satu. --- */
@media (max-width: 1024px){
  table{
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- FIX (audit 2026-08-06): 5 halaman admin-affiliate-*.html pakai
   struktur .admin-shell > .admin-sidebar (BUKAN .split-app > .split-sidebar),
   dan admin-data-check.html pakai .layout > .sidebar. Tanpa baris ini,
   shell (CSS+JS) sudah ke-link tapi drawer/bottom-nav TIDAK PERNAH aktif di
   halaman-halaman itu karena grid-nya tidak collapse dan sidebar-nya tidak
   pernah jadi off-canvas drawer -- javascriptnya sudah dibetulkan duluan
   (kamar-mobile-shell.js) supaya bisa mendeteksi ketiga pola sidebar ini,
   sekarang giliran CSS-nya disamakan perlakuannya. --- */
@media (max-width: 1024px){
  .admin-shell,
  .layout{
    grid-template-columns: 1fr !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .admin-sidebar,
  .layout > .sidebar{
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: 86vw;
    max-width: 340px;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform .28s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: calc(18px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    padding-left: calc(16px + env(safe-area-inset-left)) !important;
    box-shadow: 20px 0 60px rgba(0,0,0,.45);
    background: var(--panel, var(--bg, #0b0a08)) !important;
    background-image: none !important;
  }
  html.kamar-drawer-open .admin-sidebar,
  html.kamar-drawer-open .layout > .sidebar{
    transform: translateX(0);
  }
}

/* --- FIX (feedback 2026-08-06 putaran 2): grid row admin (dipakai di
   admin-members.html & admin-internal.html, class .admin-row, di-generate
   oleh kamar-admin-online-29f.js) punya grid-template-columns tetap
   (1.3fr 1.3fr .8fr 1fr 1.4fr auto) TANPA !important. Situs sudah punya
   breakpoint sendiri @media(max-width:900px) tapi krn tanpa !important dan
   di-inject via JS belakangan, kadang kalah/telat -- nama panjang seperti
   "Mitra Uji Kamar" jadi kepecah satu kata per baris krn kolomnya jadi
   sangat sempit. Paksa 1 kolom penuh dgn !important supaya PASTI menang. --- */
@media (max-width: 1024px){
  .admin-row{
    grid-template-columns: 1fr !important;
  }
  .admin-row.header{
    display: none !important;
  }
}

/* --- FIX: hero 2 kolom di admin-license-requests.html (.license-hero, kolom
   kiri teks + kolom kanan panel kuota) SAMA SEKALI belum ada override mobile
   di halaman itu sendiri -- di HP kolom teks kiri diperas sampai nyaris 0px,
   bikin tiap kata deskripsi jadi baris sendiri-sendiri. Susun jadi 1 kolom
   (teks di atas, panel kuota di bawah), rapikan padding biar tidak terlalu
   menjulang ke bawah. --- */
@media (max-width: 1024px){
  .license-hero{
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    gap: 16px !important;
  }
  .hero-copy{
    max-width: 100% !important;
  }
  .hero{
    padding: 22px 18px !important;
  }
  .hero-panel{
    padding: 14px !important;
  }
  .hero-panel-row{
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .hero-badges,
  .hero-actions{
    gap: 8px !important;
    margin-top: 14px !important;
  }
  .hero-badges .chip,
  .quota-pill{
    font-size: 10.5px !important;
  }
}

/* --- FIX (feedback 2026-08-06 putaran 3), bug #1: drawer .admin-sidebar
   masih tembus/ghosting di 5 halaman admin-affiliate-*.html. Penyebab asli:
   kamar-dashboard-identity-v2.css punya rule KOMPOUND ".admin-shell
   .admin-sidebar{background:rgba(255,255,255,.72)!important}" -- specificity
   2 class (0,2,0) itu MENANG lawan rule saya yang cuma ".admin-sidebar"
   1 class (0,1,0), padahal sama-sama !important dan file saya di-load
   belakangan (urutan load cuma jadi penentu kalau specificity SAMA).
   Fix: naikkan specificity dengan mengulang class jadi (0,3,0), pasti
   menang, plus pakai warna solid langsung (bukan var custom property) biar
   tidak tergantung definisi variable di file manapun. --- */
@media (max-width: 1024px){
  .admin-sidebar.admin-sidebar.admin-sidebar,
  .split-sidebar.split-sidebar.split-sidebar{
    background: #0b0a08 !important;
    background-image: none !important;
  }
}

/* --- FIX bug #2: card header atas (logo + lonceng + logout) di dashboard
   admin & member kegedean di HP -- 2 baris terpisah (baris logo, baris
   aksi) dengan padding/gap lebar ala desktop, makan banyak layar pas di-
   scroll. Ubah jadi 1 baris kompak model nav-bar iOS: logo+nama kiri,
   lonceng+logout kanan, semua lebih kecil & rapat. --- */
@media (max-width: 1024px){
  .site-header{
    display: flex !important;
    grid-template-columns: unset !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 7px 10px !important;
    margin: 8px auto 0 !important;
    gap: 8px !important;
    min-height: 0 !important;
    text-align: left !important;
  }
  .site-header .brand{
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .site-header .brand img{
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
  }
  .site-header .brand span{
    font-size: 13.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 150px !important;
  }
  .site-header .kamar-global-actions,
  .site-header .header-actions{
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: auto !important;
  }
  .kamar-notif-btn{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
  }
  .kamar-global-logout,
  .site-header .kamar-global-btn,
  .site-header .btn{
    min-height: 30px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
  }
}


@media (max-width: 1024px){

/* --- Premium dark drawer polish for .split-sidebar (2026-08-14, additive, does not touch .admin-sidebar) --- */
.split-sidebar{
  background: radial-gradient(140% 60% at 0% 0%, rgba(244,223,144,.08), transparent 55%), linear-gradient(180deg,#171410 0%,#0b0a08 60%) !important;
}
.split-sidebar .brand-small{
  display: block !important;
  padding-bottom: 12px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid rgba(244,223,144,.2) !important;
}
.split-sidebar a{
  display: flex !important;
  align-items: center !important;
  padding: 11px 14px !important;
  margin: 2px 0 !important;
  border-left: 3px solid transparent !important;
  font-weight: 700 !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.split-sidebar a.active{
  background: rgba(244,223,144,.10) !important;
  border-left-color: var(--km-gold) !important;
  color: var(--km-gold) !important;
}
.split-sidebar a:hover{
  background: rgba(255,255,255,.05) !important;
  border-left-color: rgba(244,223,144,.35) !important;
}
.split-sidebar details.sidebar-group{
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.split-sidebar details.sidebar-group summary{
  padding: 11px 14px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  cursor: pointer !important;
}
.split-sidebar a[data-kamar-logout]{
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  color: #e28b8b !important;
}

}

/* --- FIX: tombol tutup drawer (X) cuma dipakai di mobile (sidebar jadi drawer
   slide-in), tapi di desktop sidebar sudah sticky/statis jadi tombol ini tidak
   ada gunanya. Sebelumnya rule .kamar-drawer-close-btn{display:none!important}
   di atas SELALU KALAH spesifisitas dari .kamar-v46-atelier button{display:
         inline-flex!important} (kamar-luxury-atelier-v46.css), jadi tombol tetap
   tampil sebagai kotak gradasi emas kosong (ikon X-nya svg width:18px cuma
   ada di dalam @media(max-width:1024px) di atas, jadi di desktop ikonnya 0px).
   Fix: sembunyikan tombol ini secara eksplisit >=1025px dengan selector yang
   spesifisitasnya sengaja dinaikkan (4x class) supaya menang lawan rule
   .kamar-v46-atelier button. Tidak menyentuh apa pun di dalam @media
   (max-width:1024px) di atas, jadi tidak mengubah perilaku mobile. --- */
@media (min-width: 1025px) {
     .kamar-drawer-close-btn.kamar-drawer-close-btn.kamar-drawer-close-btn.kamar-drawer-close-btn{
            display: none !important;
     }
}


/* ===== KAMAR MOBILE SHELL v2 (statis: tampil sejak render pertama, tanpa flash gaya lama) ===== */
/* KAMAR MOBILE SHELL v2 - floating glass bottom nav + drawer modern (<=1024px) */
@media (max-width:1024px){
html.kamar-drawer-open,html.kamar-drawer-open body{overflow:hidden!important}
html body.kamar-has-bottom-nav{padding-bottom:calc(104px + env(safe-area-inset-bottom))!important}

/* ===== BOTTOM NAV ===== */
html body .kamar-bottom-nav{position:fixed!important;left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;top:auto!important;width:auto!important;max-width:520px!important;margin:0 auto!important;height:68px!important;padding:6px!important;display:flex!important;align-items:stretch!important;gap:4px!important;border-radius:26px!important;background:linear-gradient(180deg,rgba(32,30,26,.82),rgba(11,11,12,.9))!important;-webkit-backdrop-filter:blur(24px) saturate(1.7)!important;backdrop-filter:blur(24px) saturate(1.7)!important;border:1px solid rgba(243,217,139,.2)!important;box-shadow:0 20px 44px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09)!important;z-index:9990!important;transform:none!important}
html body .kamar-bottom-nav a{flex:1 1 0!important;min-width:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;padding:0 2px!important;border-radius:20px!important;border:0!important;background:transparent!important;color:rgba(236,228,208,.52)!important;font-size:10px!important;font-weight:600!important;letter-spacing:.05em!important;text-decoration:none!important;position:relative!important;transition:background .35s cubic-bezier(.22,1,.36,1),color .25s,transform .2s,box-shadow .35s!important;-webkit-tap-highlight-color:transparent}
html body .kamar-bottom-nav a svg{width:22px!important;height:22px!important;transition:transform .35s cubic-bezier(.22,1,.36,1)!important}
html body .kamar-bottom-nav a span{line-height:1!important;white-space:nowrap}
html body .kamar-bottom-nav a:active{transform:scale(.93)!important}
html body .kamar-bottom-nav a.active{color:#1c1405!important;background:linear-gradient(145deg,#f8e4a8,#c9a24d)!important;box-shadow:0 8px 22px rgba(201,162,77,.38),inset 0 1px 0 rgba(255,255,255,.55)!important}
html body .kamar-bottom-nav a.active svg{transform:translateY(-1px) scale(1.08)!important}
html body .kamar-bottom-nav a.active span{font-weight:800!important}
html.kamar-drawer-open body .kamar-bottom-nav a:last-child{color:#1c1405!important;background:linear-gradient(145deg,#f8e4a8,#c9a24d)!important}

/* ===== DRAWER ===== */
html body .kamar-drawer-backdrop{position:fixed!important;inset:0!important;background:rgba(3,3,4,.6)!important;-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .35s ease,visibility .35s!important;z-index:10000!important}
html.kamar-drawer-open body .kamar-drawer-backdrop{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
html body .split-sidebar{position:fixed!important;top:0!important;left:0!important;bottom:0!important;right:auto!important;width:min(86vw,348px)!important;height:100dvh!important;max-height:none!important;margin:0!important;padding:0 0 34px!important;display:block!important;visibility:visible!important;opacity:1!important;border:0!important;border-right:1px solid rgba(243,217,139,.22)!important;border-radius:0 30px 30px 0!important;background:radial-gradient(130% 55% at 0 0,rgba(201,162,77,.2),transparent 62%),linear-gradient(180deg,#151514,#09090a)!important;box-shadow:34px 0 90px rgba(0,0,0,.65)!important;transform:translateX(-106%)!important;transition:transform .5s cubic-bezier(.22,1,.36,1)!important;z-index:10001!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(201,162,77,.45) transparent}
html body .split-sidebar::-webkit-scrollbar{width:4px}
html body .split-sidebar::-webkit-scrollbar-thumb{background:rgba(201,162,77,.4);border-radius:4px}
html.kamar-drawer-open body .split-sidebar{transform:translateX(0)!important}

html body .split-sidebar .kamar-drawer-head{position:sticky!important;top:0!important;z-index:5;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px;margin:0!important;padding:26px 20px 18px 24px!important;background:linear-gradient(180deg,#151514 72%,rgba(21,21,20,0))!important;border:0!important}
html body .split-sidebar .kamar-drawer-head .brand-small{margin:0!important;padding:0!important;border:0!important;font-size:12px!important;font-weight:800!important;letter-spacing:.26em!important;text-transform:uppercase;background:linear-gradient(90deg,#f8e4a8,#c9a24d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;line-height:1.2}
html body .split-sidebar .kamar-drawer-head .brand-small .kamar-drawer-role{display:block;margin-top:6px;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:none;-webkit-text-fill-color:rgba(236,228,208,.5);color:rgba(236,228,208,.5)}
html body .split-sidebar .kamar-drawer-close-btn{flex:0 0 auto;width:40px!important;height:40px!important;display:grid!important;place-items:center;padding:0!important;border-radius:50%!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(243,217,139,.25)!important;color:#f3d98b!important;transition:transform .25s,background .25s}
html body .split-sidebar .kamar-drawer-close-btn:active{transform:scale(.9) rotate(90deg)}
html body .split-sidebar .kamar-drawer-close-btn svg{width:18px!important;height:18px!important}

html body .split-sidebar .admin-menu-section,html body .split-sidebar .menu-section{margin:0!important;padding:20px 28px 8px!important;border:0!important;font-size:10.5px!important;font-weight:800!important;letter-spacing:.26em!important;text-transform:uppercase;color:rgba(201,162,77,.85)!important;background:none!important}
html body .split-sidebar a{display:flex!important;align-items:center!important;gap:10px;min-height:46px!important;margin:2px 14px!important;padding:0 16px!important;border-radius:15px!important;border:1px solid transparent!important;background:transparent!important;color:#ddd5c1!important;font-size:14.5px!important;font-weight:600!important;letter-spacing:.01em;text-decoration:none!important;position:relative;transition:background .25s,color .25s,border-color .25s,transform .15s!important}
html body .split-sidebar a:active{transform:scale(.98)}
html body .split-sidebar a.active{color:#f8e4a8!important;background:linear-gradient(90deg,rgba(201,162,77,.26),rgba(201,162,77,.05))!important;border-color:rgba(243,217,139,.3)!important;box-shadow:inset 3px 0 0 #e8c46a}
html body .split-sidebar details{margin:4px 0!important;border:0!important;background:none!important}
html body .split-sidebar summary{list-style:none!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:48px!important;margin:4px 14px!important;padding:0 16px!important;border-radius:15px!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.07)!important;color:#efe6cf!important;font-size:12px!important;font-weight:800!important;letter-spacing:.16em!important;text-transform:uppercase;cursor:pointer;transition:background .25s,border-color .25s}
html body .split-sidebar summary::-webkit-details-marker{display:none}
html body .split-sidebar summary::marker{content:''}
html body .split-sidebar summary::before{display:none!important}
html body .split-sidebar summary::after{content:''!important;width:8px!important;height:8px!important;margin:0 4px 3px 0!important;border-right:2px solid #c9a24d;border-bottom:2px solid #c9a24d;transform:rotate(45deg);transition:transform .3s cubic-bezier(.22,1,.36,1);background:none!important;font-size:0!important}
html body .split-sidebar details[open]>summary{background:rgba(201,162,77,.1)!important;border-color:rgba(243,217,139,.28)!important;color:#f8e4a8!important}
html body .split-sidebar details[open]>summary::after{transform:rotate(-135deg);margin-bottom:-2px!important}
html body .split-sidebar details a{margin-left:30px!important;min-height:42px!important;font-size:13.5px!important;color:#b9b19d!important;border-radius:0 13px 13px 0!important;border-left:1px solid rgba(243,217,139,.2)!important}
html body .split-sidebar details a.active{color:#f8e4a8!important;border-left-color:#e8c46a!important}
html body .split-sidebar hr,html body .split-sidebar .menu-divider{border:0!important;height:1px;margin:18px 24px!important;background:linear-gradient(90deg,transparent,rgba(243,217,139,.3),transparent)!important}

/* entrance stagger */
html.kamar-drawer-open body .split-sidebar>*{animation:kDrIn .55s cubic-bezier(.22,1,.36,1) both}
html.kamar-drawer-open body .split-sidebar>*:nth-child(2){animation-delay:.04s}
html.kamar-drawer-open body .split-sidebar>*:nth-child(3){animation-delay:.07s}
html.kamar-drawer-open body .split-sidebar>*:nth-child(4){animation-delay:.1s}
html.kamar-drawer-open body .split-sidebar>*:nth-child(5){animation-delay:.13s}
html.kamar-drawer-open body .split-sidebar>*:nth-child(6){animation-delay:.16s}
html.kamar-drawer-open body .split-sidebar>*:nth-child(n+7){animation-delay:.19s}
@keyframes kDrIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
/* v2.1 */
html body .split-app{grid-template-columns:minmax(0,1fr)!important}
html body .split-main{min-width:0!important;max-width:100%!important}
html body .split-sidebar .kamar-master-member-block{margin-top:6px}
html body .split-sidebar .kamar-master-member-block .brand-small{padding:16px 28px 8px!important;margin:0!important;border:0!important;font-size:10.5px!important;letter-spacing:.26em!important;font-weight:800!important;color:rgba(201,162,77,.85)!important;background:none!important}
html body .split-sidebar a.kamar-logout{color:#ff9d8f!important;background:rgba(255,90,70,.07)!important;border:1px solid rgba(255,120,100,.22)!important;box-shadow:none!important;margin-top:6px!important}
/* v2.2 */
html body main.split-shell>.split-app>.split-main{grid-template-columns:minmax(0,1fr)!important}
html body aside.split-sidebar.split-sidebar{padding:0 0 34px!important;border-radius:0 30px 30px 0!important;width:min(86vw,348px)!important;background:radial-gradient(130% 55% at 0 0,rgba(201,162,77,.2),transparent 62%),linear-gradient(180deg,#151514,#09090a)!important;border:0!important;border-right:1px solid rgba(243,217,139,.22)!important;top:0!important;left:0!important}
html body aside.split-sidebar .kamar-drawer-head{background:linear-gradient(180deg,#151514 72%,rgba(21,21,20,0))!important;border-radius:0!important}
html body aside.split-sidebar details,html body aside.split-sidebar .sidebar-group{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:0!important}
html body aside.split-sidebar summary{opacity:1!important;visibility:visible!important}
html body aside.split-sidebar .kamar-master-member-block{background:none!important;border:0!important;padding:0!important}
/* v2.3 */
html body aside.split-sidebar [class*="kamar-master-"] .brand-small:not(.kamar-drawer-role){padding:16px 28px 8px!important;margin:0!important;border:0!important;font-size:10.5px!important;letter-spacing:.26em!important;font-weight:800!important;color:rgba(201,162,77,.85)!important;background:none!important;text-transform:uppercase}
}
@media (max-width:1024px) and (prefers-reduced-motion:reduce){html body .split-sidebar,html body .kamar-drawer-backdrop{transition:none!important}html.kamar-drawer-open body .split-sidebar>*{animation:none!important}}



/* ===== anti-flash sidebar admin: sembunyikan isi sidebar lama sampai menu final dibangun (fallback 2.2s) ===== */
body.kamar-admin-desktop-v1 .split-sidebar>*{transition:opacity .18s ease}
body.kamar-admin-desktop-v1:not(.kmr-sb-ready) .split-sidebar>*{opacity:0;animation:kmrSbFallback 0s linear 2.2s forwards}
@keyframes kmrSbFallback{to{opacity:1}}