/* =====================================================================
   STC XXI Technical Report - SIDEBAR "kartu melayang" (gaya video CSS Sidebar)
   Dimuat PALING AKHIR (setelah style-redesign.css). Hanya mengubah tampilan sidebar.
   Warna mengikuti tema hijau zamrud + emas dari style-redesign.css.
   Profil & tombol Keluar tetap di header (sesuai desain terbaru).
   Desktop : rail ikon ramping, melebar saat kursor di atasnya / fokus keyboard.
   Mobile  : tetap laci (drawer) yang dibuka dari tombol Menu.
   Menonaktifkan: hapus file ini, sidebar.js, dan 2 baris terkait di index.html
   (lalu kembalikan blok <aside> lama).
   ===================================================================== */

/* ---------- BASE (= keadaan melebar; dipakai juga di mobile) ---------- */
#side{background:transparent!important;border-right:0!important;box-shadow:none!important}
#side .scard{display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden;white-space:nowrap;
 background:linear-gradient(180deg,#0b2a20 0%,#06160f 60%,#041009 100%);color:#bdd4c8}

/* brand */
#side .brand{flex:none;align-items:flex-start;gap:6px;padding:16px 11px 12px;border-bottom:1px solid #ffffff10}
#side .brand img{width:92px;height:auto;transition:width .28s cubic-bezier(.2,.8,.2,1)}
#side .brand b,#side .brand small{display:block;max-height:44px;opacity:1;overflow:hidden;transition:opacity .2s .08s,max-height .28s}

/* pencarian menu */
#side .ssrch{flex:none;display:flex;align-items:center;gap:10px;height:38px;margin:12px 11px 4px;padding:0 10px;overflow:hidden;
 border:1px solid #ffffff1a;border-radius:12px;background:#ffffff0d;color:#8fb3a2;cursor:text;transition:border-color .16s,background .16s}
#side .ssrch:focus-within{border-color:#c89b48;background:#ffffff14}
#side .ssrch .ic{flex:none;width:18px;height:18px}
#side .ssrch input{flex:1;min-width:0;width:100%;height:100%;border:0;outline:0;background:transparent;box-shadow:none;
 padding:0;margin:0;min-height:0;font:inherit;font-size:13.5px;color:#e6f1ea;-webkit-appearance:none;appearance:none}
#side .ssrch input::placeholder{color:#7f9c90}
#side .ssrch input::-webkit-search-cancel-button{display:none}

/* daftar menu */
#side #nav{flex:1;min-height:0;padding:12px 11px 22px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
 -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 22px),transparent 100%);
 mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 22px),transparent 100%)}
#side #nav::-webkit-scrollbar{display:none}
#side #nav a{width:100%;gap:14px;min-height:38px;margin:0 0 2px;padding:0 9px;border:1px solid transparent;border-radius:12px;
 font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;transition:background .16s,color .16s,border-color .16s}
#side #nav a i{flex:none;width:20px;justify-content:center}
#side #nav a:hover{padding-left:9px}
#side #nav a.on::before{display:none}
#side #nav a.soon{opacity:.6}
#side .ng{margin:12px 10px 3px;padding:0;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
 color:#c9a55a;opacity:.95;height:auto;background:none;overflow:hidden;transition:font-size .2s,margin .28s}

/* aksi bawah: tema, profil, keluar */
#side .sbot{flex:none;display:flex;flex-wrap:wrap;gap:6px;padding:10px 11px 12px;border-top:1px solid #ffffff12}
#side .sbot .thm,#side .sbot .sbb{flex:1 1 36px;width:auto;min-width:36px;height:36px;min-height:36px;padding:0;margin:0;cursor:pointer;
 display:inline-flex;align-items:center;justify-content:center;border-radius:12px;
 background:#ffffff0d;color:#cfe3d8;border:1px solid #ffffff1f;box-shadow:none;transition:background .16s,border-color .16s,color .16s}
#side .sbot .thm[data-thm]{color:#cfe3d8}
#side .sbot .thm:hover,#side .sbot .sbb:hover{background:#ffffff1c;color:#f2d98e;border-color:#c89b48}
#side .sbot [data-proxy=logout]:hover{color:#ff8a80;border-color:#ff8a80}

/* sisa .sfoot (jika skrip pemindah ke header gagal) jangan merusak kartu */
#side .scard>.sfoot{flex:none}

/* ---------- DESKTOP: rail ikon -> melebar saat hover / fokus keyboard ---------- */
@media(min-width:821px){
 #side{width:92px;z-index:40;overflow:visible}
 #side .scard{position:absolute;left:14px;top:14px;bottom:14px;width:264px;height:auto;
  border:1px solid #ffffff14;border-radius:26px;
  box-shadow:0 24px 60px -18px #000c,0 2px 6px #0004;
  transition:width .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
 body.sb-off #side{margin-left:-92px}

 /* keadaan ramping (kursor tidak di atas sidebar) */
 #side:not(:hover):not(:has(:focus-visible)) .scard{width:64px;box-shadow:0 10px 30px -14px #0009}
 #side:not(:hover):not(:has(:focus-visible)) .brand img{width:40px}
 #side:not(:hover):not(:has(:focus-visible)) .brand b,
 #side:not(:hover):not(:has(:focus-visible)) .brand small{max-height:0;opacity:0;transition:opacity .1s,max-height .28s}
 #side:not(:hover):not(:has(:focus-visible)) .ng{font-size:0;height:1px;margin:7px 14px;background:#ffffff14}
 #side:not(:hover):not(:has(:focus-visible)) .sbot [data-proxy=prof]{display:none}
}

/* ---------- MOBILE: laci penuh, tampil melebar ---------- */
@media(max-width:820px){
 #side{background:linear-gradient(180deg,#0b2a20 0%,#06160f 60%,#041009 100%)!important;border-radius:0 24px 24px 0;overflow:hidden}
 #side .scard{border:0;border-radius:0;box-shadow:none;background:transparent;padding-top:env(safe-area-inset-top,0px)}
}

@media(prefers-reduced-motion:reduce){
 #side .scard,#side .brand img,#side .ng,#side .brand b,#side .brand small{transition:none!important}
}

/* ---------- NAMA WEBSITE selalu tampak di header ---------- */
#main>header{height:auto;min-height:64px}
.hsite{display:block;margin:0 0 2px;font-size:10.5px;font-weight:800;letter-spacing:.18em;line-height:1.2;text-transform:uppercase;
 color:var(--gold-lo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hsite i{font-style:normal;opacity:.6;margin:0 .7em}
.hsite .hsh{display:none}
@media(max-width:560px){
 .hsite{font-size:9.5px;letter-spacing:.12em}
 .hsite .hl{display:none}.hsite .hsh{display:inline}
}

/* ---------- SLIDE ATS: poster besar, tanpa ruang kosong ---------- */
.dsl-s.sc-c{isolation:isolate;background:#04140f}
.dsl-s.sc-c .dsl-bg{position:absolute;left:-40px;top:-40px;width:calc(100% + 80px);height:calc(100% + 80px);max-width:none;
 object-fit:cover;filter:blur(34px) saturate(1.3) brightness(.62);z-index:-2;pointer-events:none}
.dsl-s.sc-c::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,#03120ff7 0%,#03120fc4 36%,#03120f70 70%,#03120f99 100%)}
.dsl-s.sc-c .dsl-x{position:relative;z-index:1;max-width:min(54%,700px)}
.dsl-s.sc-c .dsl-x>small{font-size:11px;letter-spacing:.26em;color:var(--rd-gold-hi,#edcb7a);font-weight:800}
.dsl-s.sc-c .dsl-x>b{font:700 clamp(28px,3.6vw,56px)/1.05 "Bodoni Moda",Didot,Georgia,serif;letter-spacing:-.015em;text-shadow:0 6px 30px #0009}
.dsl-s.sc-c .dsl-x>span{margin-top:14px;font-size:clamp(14px,1.15vw,17px);color:#e3efe8;-webkit-line-clamp:3}
.dsl-s.sc-c .dsl-im{position:absolute;z-index:1;order:0;top:26px;height:calc(100% - 78px);width:auto;aspect-ratio:2/3;
 right:clamp(84px,14vw,260px);object-fit:cover;border-radius:14px;border:1px solid #e1c47699;box-shadow:0 24px 60px -14px #000d}
@media(max-width:800px){
 .dsl-s.sc-c{flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:440px!important}
 .dsl-s.sc-c{padding-bottom:50px!important}
 .dsl-s.sc-c .dsl-x{flex:0 0 auto;max-width:100%;width:100%;text-align:left}
 .dsl-s.sc-c .dsl-im{top:18px;right:auto;left:50%;transform:translateX(-50%);height:min(calc(100% - 190px),300px)}
 .dsl-s.sc-c::before{background:linear-gradient(180deg,#03120f55 0%,#03120fa0 45%,#03120ff2 100%)}
}