/* =====================================================================
   STC XXI Technical Report - PENYEMPURNAAN UX (dimuat paling akhir)
   1) Akun pengguna hanya di sudut kanan atas header (nama + menu Profil / Keluar).
   2) Lebar sidebar dapat diubah pengguna (geser tepi kanan, tombol panah, klik ganda reset).
   3) Animasi saat scroll: konten muncul bertahap, bilah progres, bayangan header.
   4) Responsif: PC, tablet, smartphone; aman untuk notch & layar sentuh.
   Animasi otomatis nonaktif bila pengguna memilih "kurangi gerakan".
   ===================================================================== */

:root{--sbw:272px}

/* ---------- 1) AKUN DI SUDUT KANAN ATAS ---------- */
#main>header{position:sticky;top:0}
#main>header .uhead{position:relative;display:flex;align-items:center;flex:none;margin-left:14px;max-width:100%;
 padding:4px 6px 4px 4px;border-radius:999px;background:var(--card);border:1px solid var(--bd);box-shadow:var(--rd-shadow)}
#main>header .uh-tg{display:flex;align-items:center;gap:8px;min-height:40px;min-width:0;margin:0;padding:0 4px 0 0;
 background:none;border:0;border-radius:999px;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
#main>header .uh-tg:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#main>header .uhead .sme{display:flex;align-items:center;gap:10px;min-width:0;border:0;padding:0;background:none}
#main>header .uhead .av{width:34px;height:34px;font-size:14px;flex:0 0 auto}
#main>header .uh-who{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0}
#main>header .uh-who b{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:13px;font-weight:750}
#main>header .uh-who .badge{margin-top:3px;font-size:10px;padding:2px 8px}
#main>header .uh-chev{flex:none;width:16px;height:16px;color:var(--mut);transition:transform .2s ease}
#main>header .uhead.open .uh-chev{transform:rotate(180deg)}
#main>header .uhead .sact{display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:80;flex-direction:column;gap:6px;min-width:192px;padding:8px;
 background:var(--card);border:1px solid var(--bd);border-radius:16px;box-shadow:var(--sh2)}
#main>header .uhead.open .sact{display:flex;animation:uhIn .18s ease both}
#main>header .uhead .sact .btn{display:flex;align-items:center;justify-content:flex-start;line-height:1;width:100%;height:40px;min-height:40px;margin:0;padding:0 12px;border-radius:11px;font-size:13.5px}
#main>header .uhead .sact .btn.sec{color:var(--txt)!important;background:var(--card2)!important;border:1px solid var(--bd2)!important;box-shadow:none!important}
#main>header .uhead .sact .btn.sec:hover{background:var(--g100,var(--card2))!important}
@keyframes uhIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* tablet: nama disembunyikan agar header tetap muat */
@media(min-width:801px) and (max-width:1100px){#main>header .uh-who{display:none}}

/* smartphone: hanya avatar di kanan atas, di sebelah tombol tema & lonceng */
@media(max-width:800px){
 #main>header{grid-template-columns:minmax(0,1fr) auto auto;gap:6px 8px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
 #main>header .clk{margin-left:0;gap:6px}
 #main>header .uhead{grid-column:auto;margin:0;padding:3px;width:auto}
 #main>header .uh-tg{min-height:40px;padding:0}
 #main>header .uh-who,#main>header .uh-chev{display:none}
 #main>header .uhead .sact{min-width:190px}
}
@media(pointer:coarse){
 #main>header .thm,#main>header .bell{min-width:42px;min-height:42px;width:42px;height:42px}
 #main>header .uh-tg{min-width:40px;min-height:40px}
}

/* ---------- 2) LEBAR SIDEBAR DAPAT DIATUR ---------- */
#side{width:var(--sbw)}
#side .sb-rz{position:absolute;top:0;bottom:0;right:-7px;z-index:6;width:14px;margin:0;padding:0;border:0;background:none;
 display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-tap-highlight-color:transparent}
#side .sb-rz::after{content:"";width:2px;height:100%;background:#c89b4826;border-radius:2px;transition:background .18s,box-shadow .18s}
#side .sb-rz:hover::after,#side .sb-rz.drag::after{background:linear-gradient(180deg,transparent,#e1c476 18%,#e1c476 82%,transparent)}
#side .sb-rz:focus-visible{outline:none}
#side .sb-rz:focus-visible::after{background:#e1c476;box-shadow:0 0 0 3px #c89b4866}
body.sb-resizing,body.sb-resizing *{cursor:col-resize!important;user-select:none!important;-webkit-user-select:none!important}
@media(max-width:820px){
 #side{width:min(var(--sbw),86vw)}
 #side .sb-rz{right:0;width:18px}
}

/* ---------- 3) ANIMASI SAAT SCROLL ---------- */
#main>header .sprog{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
#main>header .sprog i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:0 50%;
 background:linear-gradient(90deg,#c89b48,#edcb7a 60%,#c89b48);will-change:transform}
#main>header{transition:box-shadow .3s ease}
#main>header.is-scrolled{box-shadow:0 14px 32px -22px #0b3820aa}

html.anim-ready .rv:not(.rv-in){opacity:0;transform:translate3d(0,26px,0)}
.rv.rv-in{opacity:1;transform:none;
 transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}

/* ---------- 4) RESPONSIF & KOMPATIBEL ---------- */
img,video,canvas,svg{max-width:100%}
#view{min-width:0}
#view table{max-width:100%}
@media(max-width:820px){
 #tabs{padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media(prefers-reduced-motion:reduce){
 html.anim-ready .rv:not(.rv-in){opacity:1;transform:none}
 .rv.rv-in{transition:none}
 #main>header .sprog{display:none}
 #main>header,#side .sb-rz::after,#main>header .uh-chev{transition:none!important}
 #main>header .uhead.open .sact{animation:none}
}

/* ---------- 5) MENU HP ---------- */
#side .sb-close{display:none;margin-left:auto;flex:none;width:36px;height:36px;padding:0;align-items:center;justify-content:center;border-radius:10px;border:1px solid #ffffff22;background:#ffffff0d;color:#dcebe3;cursor:pointer}
#side .sb-close .ic{width:18px;height:18px}
#side .sb-close:focus-visible{outline:2px solid #e1c476;outline-offset:2px}
@media(max-width:820px){
 #side .brand{position:relative}
 #side .sb-close{display:inline-flex;position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:9px}
}
#tabs a[aria-current=page]{color:var(--gt)}

#main>header .uhead .sact .btn[hidden]{display:none!important}

/* ---------- 8) NAVIGASI BAWAH: tombol "+" tepat di tengah ---------- */
@media(max-width:820px){
 #tabs{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;justify-items:center;align-items:center;overflow:visible;padding-left:6px;padding-right:6px}
 #tabs a{min-height:0;width:100%;height:100%;justify-content:center;padding:0;gap:3px}
 #tabs a.pl{justify-content:flex-end;font-size:11px;font-weight:700;font-style:normal;color:#0b5036;padding-bottom:2px;position:relative}
 #tabs a.pl em{font-style:normal}
 #tabs a.pl .pl-b{position:relative;width:58px;height:58px;margin-top:-34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:none;
  background:linear-gradient(135deg,#edcb7a,#b8913f);color:#06160f;border:4px solid var(--card);
  box-shadow:0 10px 22px -8px #b8913f99,0 0 0 1px #b8913f55;transition:transform .15s ease}
 #tabs a.pl .pl-b svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;display:block}
 #tabs a.pl:active .pl-b{transform:scale(.94)}
 #tabs a.pl[aria-expanded=true] .pl-b{transform:rotate(45deg)}
 #tabs a.pl:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:12px}
}
/* ---------- 8b) BALON "BUAT LAPORAN" dengan panah ke tombol + ---------- */
#nsheet{position:fixed;inset:0;z-index:29}
#nsheet.hidden{display:none}
#nsheet .nsh-shade{position:absolute;inset:0;background:#030d0878;animation:nsFade .2s ease both}
@keyframes nsFade{from{opacity:0}to{opacity:1}}
#nsheet .nsh-box{position:absolute;left:50%;bottom:calc(var(--tabh,64px) + 50px);width:min(316px,calc(100vw - 24px));
 max-height:min(430px,calc(100dvh - var(--tabh,64px) - 120px));overflow:auto;box-sizing:border-box;
 background:var(--card);color:var(--ink);border:1px solid var(--bd);border-radius:22px;padding:14px 14px 16px;
 box-shadow:var(--sh2);transform-origin:50% 100%;animation:nsPop .34s cubic-bezier(.2,.9,.25,1.18) both}
/* panah balon, menunjuk ke tombol + */
#nsheet .nsh-box::after{content:"";position:absolute;left:50%;bottom:-10px;width:20px;height:20px;background:var(--card);
 border-right:1px solid var(--bd);border-bottom:1px solid var(--bd);border-bottom-right-radius:5px;transform:translateX(-50%) rotate(45deg)}
@keyframes nsPop{from{opacity:0;transform:translate(-50%,14px) scale(.7)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
#nsheet .nsh-box h2{font:700 15px/1.2 "Bodoni Moda",Georgia,serif;margin:2px 4px 10px;color:var(--ink);letter-spacing:.01em}
#nsheet .nsh-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.nsi{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:92px;padding:11px;text-align:left;border-radius:16px;
 border:1px solid var(--bd);background:var(--card2);color:var(--ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
 animation:nsIn .34s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms + 90ms);transition:transform .15s ease,border-color .15s ease}
.nsi:active{transform:scale(.96)}
.nsi:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@keyframes nsIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
.nsi i{display:flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:10px;background:#c89b4822;color:var(--gold-ink)}
.nsi i .ic{width:17px;height:17px}
.nsi b{font-size:13px;line-height:1.25;font-weight:700}
.nsi small{font-size:11px;line-height:1.3;color:var(--mut)}
/* tombol + saat terbuka: berputar jadi X */
#tabs a.pl .pl-b{transition:transform .25s cubic-bezier(.2,.9,.3,1.3)}
@media(prefers-reduced-motion:reduce){#nsheet .nsh-shade,#nsheet .nsh-box,.nsi{animation:none}}

/* ---------- 9) HEADER HP: akun, lonceng, dan tema berukuran sama dan sejajar ---------- */
@media(max-width:800px){
 #main>header .uhead{width:42px;height:42px;min-width:42px;margin:0;padding:0;border:1.5px solid var(--gold);box-sizing:border-box;border-radius:999px;background:var(--card);box-shadow:var(--rd-shadow)}
 #main>header .uh-tg{width:100%;height:100%;min-height:0;padding:2px;justify-content:center;gap:0;box-sizing:border-box;border-radius:999px}
 #main>header .uh-tg .sme{width:100%;height:100%;justify-content:center}
 #main>header .uhead .av{width:100%;height:100%;flex:none;font-size:14px}
 #main>header .clk .bell,#main>header .clk .thm{width:42px;height:42px;min-width:42px;min-height:42px;box-sizing:border-box}
 #main>header .clk{align-items:center}
}

/* ---------- 10) PERBAIKAN BAR BAWAH HP: tidak ada celah hijau di bawah, label Buat terbaca ---------- */
@media(max-width:820px){
 #tabs{box-sizing:border-box;height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);bottom:0;background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}
 #tabs a{height:64px}
 #tabs a.pl{height:64px}
 #tabs a.pl em{color:var(--gt);font-style:normal}
}