/* STC XXI — Redesign layer (presentation only).
   Dimuat paling akhir. Tidak mengubah ID, class, atau logika JavaScript maupun backend. */

:root{
  --rd-radius:16px; --rd-radius-s:11px;
  --rd-gold:#c89b48; --rd-gold-hi:#edcb7a; --rd-gold-deep:#8e6b2c;
  --rd-emerald:#0f3b2e; --rd-emerald-2:#17563f;
  --rd-ease:cubic-bezier(.2,.7,.2,1);
  --rd-shadow:0 1px 2px #0b1f1812,0 10px 30px -12px #0b1f1826;
}
:root[data-theme=dark]{--rd-shadow:0 1px 2px #0000,0 14px 40px -14px #000a}

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{letter-spacing:0}
::selection{background:#c89b4866;color:inherit}

/* ---------- Tipografi judul ---------- */
#main h1,#main .ph-t,#ptitle{font-family:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;letter-spacing:-.01em}

/* ---------- Sidebar ---------- */
#side{background:linear-gradient(180deg,#0b2a20 0%,#06160f 60%,#041009 100%)!important;border-right:1px solid #ffffff0f!important;box-shadow:none!important}
#side .brand{padding:22px 22px 18px;border-bottom:1px solid #ffffff10}
#side .brand img{height:38px;width:auto}
#side .brand b{font-family:"Bodoni Moda",Georgia,serif;font-size:17px;font-weight:700;color:#f7f3e8}
#side .brand small{color:#9fbdb1;font-size:11.5px;letter-spacing:.02em}
#nav{padding:10px 12px 14px}
#nav .gh,#nav .nsec,#nav h6{font-size:10.5px;letter-spacing:.16em;color:#c9a55a!important;font-weight:700;padding:16px 12px 8px;text-transform:uppercase}
#nav a,#nav button{font-size:14px;font-weight:500;min-height:42px;border-radius:12px;margin:2px 0;width:100%;padding:9px 12px 9px 14px}
#nav a:hover,#side #nav button:hover{background:#ffffff0f!important;color:#fff!important;padding-left:16px}
#nav .active,#nav a.on,#nav [aria-current=page]{background:linear-gradient(100deg,#1d6a4d,#0f4534)!important;color:#fff!important;border:1px solid #2f8b65!important;box-shadow:0 8px 22px -10px #000c,inset 0 1px 0 #ffffff1a!important}
#side .sme{border-top:1px solid #ffffff10;padding:14px 16px}
#side .av{background:linear-gradient(135deg,#edcb7a,#a77a2c);color:#1c170b;font-weight:800}

/* ---------- Header ---------- */
#main>header{background:color-mix(in srgb,var(--bg) 78%,transparent)!important;backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid var(--bd);height:64px;padding:0 22px}
#ptitle{font-size:22px;font-weight:700;color:var(--ink)}
#psub{color:var(--mut);font-size:12.5px}
#clock{font-size:12.5px;color:var(--mut);font-weight:600;font-variant-numeric:tabular-nums}
#conn{border-radius:999px;font-size:12px;font-weight:700;padding:5px 11px;background:var(--g50);color:var(--gt)}

/* ---------- Konten & kartu ---------- */
#view{padding:clamp(16px,2.4vw,32px);max-width:1480px}
.card,.dq,.ds-big,.ds-list,.dact,.dc-b,.dx-panel,.dx-studio,.dx-q,.dx-k{
  border-radius:var(--rd-radius)!important;border:1px solid var(--bd)!important;box-shadow:var(--rd-shadow)}
.card:hover{transform:none}
.dx-hero{border-radius:22px!important;box-shadow:0 30px 60px -28px #03130f80}

/* ---------- Tombol ---------- */
.btn{min-height:42px;padding:0 18px;border-radius:var(--rd-radius-s);font-size:14px;font-weight:700;letter-spacing:.01em;transition:transform .18s var(--rd-ease),filter .18s,background-color .18s,box-shadow .18s}
.btn:not(.sec):not(:disabled):hover{transform:translateY(-1px);box-shadow:0 12px 24px -12px #b88a36aa}
.btn:not(.sec):active,.btn.sec:active{transform:translateY(0) scale(.985)}
.btn.sec{border-radius:var(--rd-radius-s);font-weight:650}
.btn:disabled{opacity:.6;cursor:not-allowed}
.thm{border-radius:var(--rd-radius-s);transition:background-color .2s,transform .2s var(--rd-ease)}
.thm:hover{transform:translateY(-1px)}

/* ---------- Input ---------- */
input,select,textarea{font-size:15px;min-height:44px;border-radius:var(--rd-radius-s)!important;transition:border-color .18s,box-shadow .18s,background-color .18s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--rd-gold)!important;box-shadow:0 0 0 4px #c89b4822}

/* ---------- Login — layout & sinematik ---------- */
#login{grid-template-columns:minmax(0,1.15fr) minmax(460px,.85fr)}
#login .lpane{padding:clamp(20px,2.6vw,48px)}
#login .lhero{padding:clamp(32px,4.4vw,72px)}
#login .lhero h1{font-family:"Bodoni Moda",Didot,Georgia,serif;font-weight:700;font-size:clamp(50px,6vw,96px);line-height:.94;letter-spacing:-.03em}
#login .lhero .sub{font-size:12.5px;letter-spacing:.28em;color:var(--rd-gold-hi)!important}
#login .lhero .tag{font-size:15px;color:#d8e7df!important}
#login .lpane{padding:clamp(24px,4vw,64px)}
#login .lbox{width:min(100%,440px);padding:clamp(28px,3vw,42px);border-radius:24px;border:1px solid #d6e3db;box-shadow:0 30px 80px -30px #0b382040}
:root[data-theme=dark] #login .lbox{border-color:#ffffff18}
#login .lbox .hello{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800}
#login .lbox h2{font-family:"Bodoni Moda",Didot,Georgia,serif;font-size:clamp(30px,2.8vw,40px);font-weight:600;letter-spacing:-.02em}
#login .lbox input{height:48px;font-size:15px}
#login #lbtn{height:52px;min-height:52px;font-size:15px;border-radius:14px;box-shadow:0 14px 28px -14px #b88a36b0}
#login .lfoot{font-size:12px;letter-spacing:.02em}

/* ---------- Mobile ---------- */
@media(max-width:800px){
  #main>header{height:auto;min-height:60px;padding:10px 14px;flex-wrap:wrap;gap:8px}
  #view{padding:12px 12px calc(var(--tabh,64px) + 20px)}
  #login .lbox{border-radius:20px;padding:24px 20px}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Perapian form login: kolom password lebih lebar, tombol Tampilkan rapi */
#login .lbox .pw{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}
#login .lbox .pw input{width:100%;min-width:0}
#login #tp{min-width:112px;height:48px;min-height:48px;border-radius:var(--rd-radius-s)}
#login .lbox h2{font-size:clamp(28px,2.4vw,36px);white-space:normal}


/* =========================================================
   DASHBOARD — bahasa visual baru (presentation only)
   ========================================================= */
:root{--rd-ink-soft:var(--mut)}

/* Salam & tanggal */
.dx-top{margin-bottom:4px}
.dx-top .dx-date,.dx-top small:first-child{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rd-gold-deep);font-weight:800}
:root[data-theme=dark] .dx-top .dx-date,:root[data-theme=dark] .dx-top small:first-child{color:var(--rd-gold-hi)}
.dx-top h1,.dx-top h2{font-family:"Bodoni Moda",Didot,Georgia,serif;font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.02em;margin:4px 0 0}
.dx-top .dx-status,.dx-top [class*=status]{border-radius:999px;padding:8px 14px;font-weight:650;box-shadow:var(--rd-shadow);border:1px solid var(--bd)}

/* Banner sinematik */
.dsl{border-radius:24px!important;border:1px solid #ffffff14!important;box-shadow:0 30px 70px -34px #03130fb0!important}
.dsl-s{min-height:clamp(260px,26vw,360px)!important;padding:clamp(28px,3.4vw,56px)!important}
.dsl-s.sc-a .dsl-x>small{font-size:11px!important;letter-spacing:.26em!important;color:var(--rd-gold-hi)!important;font-weight:800}
.dsl-s.sc-a .dsl-x>b{font-family:"Bodoni Moda",Didot,Georgia,serif!important;font-size:clamp(30px,3.6vw,54px)!important;line-height:1.02!important;letter-spacing:-.02em;max-width:14ch!important;text-shadow:0 6px 30px #0008}
.dsl-s.sc-a .dsl-x>span{font-size:15px!important;color:#e3efe8!important;margin-top:14px!important;max-width:46ch}
.dsl-s.sc-a:before{background:linear-gradient(90deg,#03120ff7 0%,#03120fc0 36%,#03120f10 78%),url("img/projector-hero-4k.webp") 68% center/cover no-repeat!important}
.dsl-d{bottom:18px!important}
.dsl-d button{width:8px;height:8px;border-radius:99px;background:#ffffff40;border:0;transition:all .3s var(--rd-ease)}
.dsl-d button.on,.dsl-d button[aria-current=true]{width:26px;background:var(--rd-gold-hi)}
.dsl-x-btn,.dsl-nav button{background:#03120f99!important;border:1px solid #ffffff26!important;backdrop-filter:blur(8px);color:#fff!important}

/* Chip kategori & pencarian */
.dsl-tabs button,.dx-tabs button{font-weight:650;font-size:13px;padding:8px 14px}
.dx-search,.dsr,[class*=dsr-box]{border-radius:16px!important;box-shadow:var(--rd-shadow);min-height:52px}

/* Label seksi */
.dx-sec .sh h2,.dx-sec h2{font-size:12px!important;letter-spacing:.16em!important;text-transform:uppercase;font-weight:800;color:var(--rd-ink-soft)!important;font-family:inherit!important}
.dx-sec .sh{border-bottom:1px solid var(--bd);padding-bottom:10px;margin-bottom:14px}
.lnk{font-weight:700;color:var(--rd-gold-deep)!important}
:root[data-theme=dark] .lnk{color:var(--rd-gold-hi)!important}

/* Catat cepat — kartu aksi */
.dx-q{position:relative;overflow:hidden;border-radius:18px!important;min-height:84px;padding:16px!important;gap:14px!important;background:var(--card)!important;transition:transform .25s var(--rd-ease),box-shadow .25s var(--rd-ease),border-color .25s}
.dx-q:hover{transform:translateY(-3px);box-shadow:0 22px 40px -22px #0b382055;border-color:color-mix(in srgb,var(--rd-gold) 60%,var(--bd))!important}
.dx-q i{width:44px!important;height:44px!important;border-radius:14px!important;background:linear-gradient(145deg,var(--g100),var(--g50))!important;color:var(--gt)!important;display:grid;place-items:center;flex:0 0 auto}
.dx-q b{font-size:15px;font-weight:750;color:var(--ink)}
.dx-q small{color:var(--mut);font-size:12.5px;line-height:1.4}
.dx-q:after{content:"→";position:absolute;right:16px;top:50%;transform:translate(6px,-50%);opacity:0;color:var(--rd-gold-deep);font-weight:800;transition:all .25s var(--rd-ease)}
.dx-q:hover:after{opacity:1;transform:translate(0,-50%)}

/* KPI */
.dx-k{border-radius:20px!important;padding:18px 18px 16px!important;min-height:132px;display:flex;flex-direction:column;gap:6px;transition:transform .25s var(--rd-ease),box-shadow .25s}
.dx-k:hover{transform:translateY(-3px);box-shadow:0 22px 40px -22px #0b382055}
.dx-k .l{font-size:13px;font-weight:650;color:var(--mut)}
.dx-k .n{font-family:"Bodoni Moda",Didot,Georgia,serif;font-size:clamp(34px,3.2vw,46px)!important;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.dx-k small{font-size:12px;color:var(--mut);margin-top:auto}
.dx-k.warn{background:linear-gradient(150deg,#fff3d6,#fffaf0)!important;border-color:#e8c76a!important}
:root[data-theme=dark] .dx-k.warn{background:linear-gradient(150deg,#2b2208,#171306)!important}
.dx-k.warn .n{color:#8a5a00}
:root[data-theme=dark] .dx-k.warn .n{color:var(--rd-gold-hi)}
.dx-k.good{background:linear-gradient(150deg,#0f3b2e,#0a2a20)!important;border-color:#1f6b50!important}
.dx-k.good .n,.dx-k.good .l,.dx-k.good small{color:#f1f7f3!important}
.dx-k.good .n{color:#fff!important}
.dx-k.good small{color:#a9d4c0!important}
.dx-ki{width:38px!important;height:38px!important;border-radius:12px!important;display:grid;place-items:center;background:#c89b481f!important;color:var(--gt)!important}
.dx-k.warn .dx-ki{background:#c89b4826!important;color:#8a5a00!important}
.dx-k.good .dx-ki{background:#ffffff1a!important;color:var(--rd-gold-hi)!important}

/* Kolom & kartu */
.dx-cols{gap:18px!important}
.dx-sec{border-radius:20px;background:var(--card);border:1px solid var(--bd);box-shadow:var(--rd-shadow);padding:18px 18px 16px}
.dx-sec.dsl-w{background:none;border:0;box-shadow:none;padding:0}

/* Aktivitas */
.dx-ai{border-radius:14px!important;padding:12px 14px!important;transition:background .2s,transform .2s var(--rd-ease)}
.dx-ai:hover{background:var(--g50)!important;transform:translateX(3px)}
.dx-ai .kat{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--g100);color:var(--gt)}
.dx-ai b{font-size:14.5px;font-weight:700}
.dx-ai small{font-size:12px;color:var(--mut)}

/* ATS */
.tk{border-radius:16px!important;border:1px solid var(--bd)!important;padding:12px!important;background:var(--card2)!important;box-shadow:none!important}
.tk-poster{border-radius:12px!important;box-shadow:0 12px 24px -12px #000a}
.tk b{font-family:"Bodoni Moda",Didot,Georgia,serif;font-size:17px;font-weight:700}
.tk .pri{border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.04em}

/* Pengumuman */
.dx-ann .card,.dx-ann article,.dx-ann .ann{border-radius:16px;border:1px solid var(--bd);background:var(--card2)}

/* Empty state */
.empty{border-radius:16px!important;border:1px dashed var(--bd2)!important;background:transparent!important;padding:28px 20px!important;text-align:center}
.empty b{display:block;font-family:"Bodoni Moda",Georgia,serif;font-size:18px;margin-bottom:4px}

@media(max-width:800px){
  .dsl-s.sc-a:before{background:linear-gradient(180deg,#03120fe6,#03120f99 60%,#03120fe6),url("img/projector-hero-4k.webp") 70% center/cover no-repeat!important}
  .dsl-s.sc-a .dsl-x>b{font-size:clamp(26px,7vw,34px)!important}
  .dx-q{min-height:72px}
  .dx-k .n{font-size:30px!important}
}

/* =========================================================
   DASHBOARD — rapikan tata letak, tidak ada area kosong
   Kolom kanan (Pengumuman) mengisi tinggi baris agar sejajar dengan kolom kiri (ATS).
   ========================================================= */
.dx-cols{align-items:stretch!important}
.dx-col{display:flex;flex-direction:column}
.dx-col>.dx-ann{flex:1 1 auto;display:flex;flex-direction:column}
.dx-ann>.card.ann,.dx-ann>.ann{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-start}
.dx-ann>.card.ann+.card.ann,.dx-ann>.ann+.ann{margin-top:12px}
.dx-ann .card.ann .ann-body,.dx-ann .card.ann p{flex:1}
/* Tidak ada kartu pengumuman: tampilkan kotak kosong dengan tinggi tetap agar tidak terlihat bolong */
.dx-ann>.empty{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start}

/* =========================================================
   Profil & keluar pindah ke sudut kanan atas (header)
   ========================================================= */
#main>header{display:flex;align-items:center;gap:12px}
#main>header .clk{margin-left:auto}
.uhead{display:flex;align-items:center;gap:10px;margin-left:14px;padding:6px 8px 6px 6px;border-radius:999px;background:var(--card);border:1px solid var(--bd);box-shadow:var(--rd-shadow)}
.uhead .sme{display:flex;align-items:center;gap:10px;border:0!important;padding:0!important;background:none!important}
.uhead .sme>div{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.uhead .sme b{color:var(--ink)!important;font-size:13px;font-weight:750}
.uhead .sme .badge{margin-top:3px;font-size:10px;padding:2px 8px}
.uhead .av{width:34px;height:34px;font-size:14px;flex:0 0 auto}
.uhead .sact{display:flex;gap:6px;padding-left:6px;border-left:1px solid var(--bd)}
.uhead .sact .btn{min-height:34px;height:34px;padding:0 12px;font-size:12.5px;border-radius:999px}
@media(max-width:900px){
  .uhead{margin-left:6px}
  .uhead .sme>div{display:none}
}
@media(max-width:600px){
  #main>header{flex-wrap:wrap}
  .uhead{margin-left:auto;padding:4px}
  .uhead .sact{border-left:0;padding-left:0}
  .uhead .sact .btn{padding:0 10px}
}

/* =========================================================
   Dashboard: kartu kapasitas mengisi tinggi baris (tanpa celah kosong)
   ========================================================= */
.dx-col>.dstu{flex:1 1 auto;display:flex;flex-direction:column}
.dx-col>.dstu>.dstu-b{flex:1 1 auto}
.dx-col>.dstu .dstu-grid{align-content:start}
.dx-col>.dchart{flex:1 1 auto;display:flex;flex-direction:column}
.dx-col>.dchart>.dc-b{flex:1 1 auto;display:flex;flex-direction:column}
.dx-col>.dchart .dc-k+*,.dx-col>.dchart>.dc-b>*:last-child{flex:1 1 auto}

/* Reset sisa gaya sidebar pada .sfoot setelah dipindah ke header */
.uhead .sfoot{position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:10px}
.uhead .sact .btn.sec{color:var(--txt)!important;background:var(--card2)!important;border:1px solid var(--bd2)!important;box-shadow:none!important}
.uhead .sact .btn.sec:hover{background:var(--g100)!important}
.uhead .sme b,.uhead .sme span{color:var(--ink)!important}
.uhead .sme .badge{color:var(--gold-ink)!important;background:#c89b4822!important}

/* =========================================================
   MOBILE / SMARTPHONE — tata letak responsif
   ========================================================= */
@media(max-width:800px){
  html,body{overflow-x:hidden;max-width:100%}
  #main{min-width:0;width:100%}
  #main>header{height:auto;min-height:0;padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:8px 10px;align-items:center}
  #main>header .hs{min-width:0}
  #main>header .hs small,#clock,#conn,#main>header .hlogo{display:none!important}
  #main>header #ptitle{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  #main>header .clk{margin-left:0;display:flex;gap:6px}
  #main>header .clk .bell{display:inline-flex}
  .uhead{grid-column:1/-1;margin:0;width:100%;justify-content:space-between;border-radius:16px;padding:6px 8px}
  .uhead .sact .btn{flex:1}
  .uhead .sact{flex:1;justify-content:flex-end}
  #phero{padding:0 12px}
  #view{padding:12px 12px calc(var(--tabh,64px) + 28px)}
  .dx{gap:14px}
  .dx-top h1,.dx-top h2,#main h1{font-size:26px}
  .dsl-s.sc-a .dsl-x>b{font-size:clamp(24px,7vw,32px)!important}
  .dsl-s{min-height:280px!important}
  .dsl-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin-inline:-2px;padding-bottom:2px}
  .dsl-tabs button{flex:0 0 auto;white-space:nowrap}
  .dx-qg,.dx-qa{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .dx-q{min-height:76px}
  .dx-kpi{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .dx-k{min-height:112px;padding:14px!important}
  .dx-k .n{font-size:30px!important}
  .dx-cols{grid-template-columns:minmax(0,1fr)!important;gap:14px}
  .dx-sec{padding:14px}
  .dstu-b.dstu-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #dac .dac-b,.dac-b{overflow-x:auto}
  .card,.dq,.ds-big,.ds-list{padding:14px}
  #tabs{box-shadow:0 -8px 24px -12px #0b382033}
}
@media(max-width:480px){
  .dx-qg,.dx-qa{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dx-k .l{font-size:12px}
  .uhead .sme{display:none}
}

/* ATS: poster tetap tampil di semua ukuran layar; info & hitung mundur tersusun rapi */
.tk-poster,.tk .poster img,.ats-card img.tk-poster{display:block;object-fit:cover;flex:0 0 auto}
@media(max-width:800px){
  .tk{display:grid!important;grid-template-columns:92px minmax(0,1fr)!important;gap:12px 14px;align-items:start}
  .tk .tk-poster{width:92px;height:138px;border-radius:12px;grid-row:1}
  .tk .tl{grid-column:2;grid-row:1;min-width:0}
  .tk .tr{grid-column:1/-1;grid-row:2}
  .tk .tl b{font-size:17px;line-height:1.2}
  .tk .tm{grid-template-columns:1fr 1fr;gap:8px}
}
@media(max-width:480px){
  .tk{grid-template-columns:76px minmax(0,1fr)!important;gap:10px 12px}
  .tk .tk-poster{width:76px;height:114px}
}
.dx-ann .card.ann .pri{align-self:flex-start}

/* LOGIN di HP: satu kolom, foto proyektor di atas, form di bawah */
@media(max-width:800px){
  #login{grid-template-columns:minmax(0,1fr)!important;min-height:100dvh;height:auto}
  #login .lhero{min-width:0;width:100%;min-height:auto!important;padding:22px 20px 24px!important;justify-content:flex-start}
  #login .lhero .lscene{position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:16/9!important;margin:0 0 18px!important;border-radius:16px!important}
  #login .lhero .llogo{width:110px;max-height:44px;margin-bottom:14px}
  #login .lhero h1{font-size:clamp(36px,11vw,50px)!important}
  #login .lhero .tag{display:block!important;font-size:13px;max-width:none}
  #login .lpane{min-width:0!important;width:100%;padding:18px 16px 32px!important;justify-content:center;align-items:flex-start}
  #login .lbox{width:100%!important;max-width:460px;margin:0 auto;padding:24px 20px!important;border-radius:20px!important}
  #login .lbox h2{font-size:28px!important}
}