/* Gaya kantor: tipografi tebal, satu warna latar cerah per bagian, tinta hitam, tombol kapsul. */
@font-face{font-family:Anton;src:url(/s/font/anton.woff2) format("woff2");font-display:swap}
@font-face{font-family:Bricolage;font-weight:800;src:url(/s/font/bricolage-grotesque-800.woff2) format("woff2");font-display:swap}
@font-face{font-family:Inter;font-weight:400;src:url(/s/font/inter-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:Inter;font-weight:700;src:url(/s/font/inter-700.woff2) format("woff2");font-display:swap}
:root{--tinta:#111;--salem:#ffb69e;--lime:#d3f25c;--krem:#f6efdc;--putih:#fffdf7;--abu:#6b655a;--hijau:#38d27a;--kuning:#ffd23f;--merah:#ff6b5a;--oranye:#ff7a45;--judul:Anton,Impact,"Arial Narrow",sans-serif;--display:Bricolage,"Arial Black",sans-serif;--hijau-tua:#1f4a37;--kobalt:#2748d8;--tomat:#e5412d}
*{box-sizing:border-box}
body{margin:0;background:var(--lime);color:var(--tinta);font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{font-family:var(--judul);font-weight:400;text-transform:uppercase;letter-spacing:.02em;margin:0}
h1{font-size:1.5rem;line-height:1}h2{font-size:1.35rem;margin:0 0 .6rem}h3{font-size:1rem;margin:0 0 .4rem}
a{color:inherit}
button,select,input{font:inherit;color:var(--tinta);background:var(--putih);border:2px solid var(--tinta);border-radius:999px;padding:.45rem 1rem}
button,.tombol{cursor:pointer;min-height:44px;font-weight:600;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
button:hover,.tombol:hover{background:var(--tinta);color:var(--putih)}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.kapsul.hitam,button.hitam{background:var(--tinta);color:var(--putih)}.kapsul.hitam:hover{background:var(--oranye);color:var(--tinta)}
.tombol{display:inline-flex;align-items:center;padding:0 1rem;border:2px solid var(--tinta);border-radius:999px;background:var(--putih);color:var(--tinta);text-decoration:none}
select{min-height:44px;border-radius:999px;padding-right:.6rem}
.redup{color:var(--abu)}.galat{color:#a3200f;min-height:1.4em;font-weight:600;margin:0}
.tag{display:inline-block;padding:.05rem .65rem;border:2px solid var(--tinta);border-radius:999px;background:var(--putih);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta)}
.tag.s-bekerja{background:var(--hijau)}.tag.s-menunggu{background:var(--kuning)}.tag.s-ditolak{background:var(--merah)}.tag.s-siaga{background:#d9d3c2}

/* header */
.atas{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;padding:.6rem 1rem;background:var(--lime);border-bottom:2px solid var(--tinta)}
.atas h1{flex:1 1 auto;order:0;font-size:1.7rem;display:flex;align-items:center;gap:.6rem}.atas>:not(h1){order:1;flex:none}.atas .redup{color:var(--tinta);font-weight:600}.pilih{display:flex;gap:.5rem;align-items:center;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}

/* papan 2D */
.isi{display:grid;gap:1.6rem;padding:1.2rem 1rem 2rem;max-width:1240px;margin:0 auto}
.kisi{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem}
.agen{display:flex;flex-direction:column;align-items:flex-start;text-align:left;border-radius:18px;background:var(--krem);text-transform:none;letter-spacing:0;font-weight:400;font-size:.9rem;border-left:12px solid var(--tinta)}
.agen strong{font-family:var(--judul);font-weight:400;text-transform:uppercase;font-size:1.15rem;letter-spacing:.02em}
.agen span{color:#3b372f;font-size:.82rem}.agen.s-bekerja{border-left-color:var(--hijau)}.agen.s-menunggu{border-left-color:var(--kuning)}.agen.s-siaga{border-left-color:#b8b2a2}
.agen:hover{background:var(--tinta);color:var(--putih)}.agen:hover span{color:#ddd}
.kolom{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem}
.kol{background:var(--krem);border:2px solid var(--tinta);border-radius:20px;padding:.8rem;display:flex;flex-direction:column;gap:.5rem}
.tiket{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;border-radius:14px;text-transform:none;letter-spacing:0;font-weight:400;font-size:.9rem}
.tiket strong{font-family:var(--judul);font-weight:400;letter-spacing:.03em}.tiket em{color:#3b372f;font-size:.8rem;font-style:normal}.tiket:hover em{color:#ddd}
.kabar{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.9rem}
.kabar li{background:var(--putih);border:2px solid var(--tinta);padding:.5rem .8rem;border-radius:14px}

/* panel detail */
.detail{position:fixed;inset:0 0 0 auto;width:min(560px,100%);background:var(--krem);border-left:2px solid var(--tinta);padding:1rem 1.2rem 2rem;overflow:auto;z-index:5}
.detail[hidden]{display:none}.detail h2{font-family:var(--display);text-transform:none;letter-spacing:-.02em;font-size:2.3rem;line-height:.95;margin:.8rem 0 .6rem}.detail h3{margin-top:1rem}.detail img{max-width:100%;border:2px solid var(--tinta);border-radius:14px;margin-top:.6rem}
.detail img.foto-klik{cursor:zoom-in}
.foto-layar{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;cursor:zoom-out;touch-action:none}
.foto-layar[hidden]{display:none}
.foto-layar img{max-width:100vw;max-height:100vh;max-width:100dvw;max-height:100dvh;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.foto-layar.foto-zoom{cursor:grab}
.foto-layar .foto-x{position:absolute;top:max(.8rem,env(safe-area-inset-top));right:max(.8rem,env(safe-area-inset-right));width:3rem;height:3rem;padding:0;border-radius:50%;font-size:2rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.foto-alat{position:absolute;top:calc(max(.8rem,env(safe-area-inset-top)) + 3.6rem);right:max(.8rem,env(safe-area-inset-right));display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.foto-alat button{min-width:3rem;height:3rem;padding:0 .5rem;border-radius:999px;font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.foto-alat button[hidden]{display:none}.foto-alat .foto-reset{font-size:.9rem}.foto-alat button:disabled{opacity:.4;cursor:default}
body.foto-terbuka{overflow:hidden}
.zoom3d{position:absolute;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:2}
.zoom3d button{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center;background:var(--krem)}
.zoom3d button:hover{background:var(--tinta);color:var(--krem)}
.md{white-space:pre-wrap;word-break:break-word;font:13px/1.55 ui-monospace,Menlo,monospace;background:var(--putih);border:2px solid var(--tinta);border-radius:14px;padding:.8rem;margin:.5rem 0}

/* login: latar limau polos, judul raksasa 3 baris, mata googly di tengah judul */
.masuk{background:var(--lime);min-height:100vh}
.login{max-width:1280px;margin:0 auto;padding:1.2rem 1.2rem 1.4rem;display:flex;flex-direction:column;gap:1rem;min-height:100vh;min-height:100dvh}
.kecil-atas{margin:0;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em}
.raksasa{position:relative;font-size:min(26vw,24vh);line-height:.8;letter-spacing:-.01em;display:flex;flex-direction:column;margin:0}
.raksasa span{display:block}
.baris-mata{display:flex;align-items:center;gap:.08em}.mata{height:.66em;width:auto;aspect-ratio:2/1;flex:none;pointer-events:none;overflow:visible}
.mata-putih{fill:var(--putih);stroke:var(--tinta);stroke-width:8}.pupil{fill:var(--tinta)}
#f{display:grid;gap:.9rem;width:min(420px,100%);margin-top:0}#f label{display:grid;gap:.3rem;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
#f input[name=sandi]{border-radius:999px;background:var(--putih);padding:.6rem 1.2rem;min-height:52px;text-transform:none;letter-spacing:.08em;font-size:1.05rem;font-weight:400}
#f button{min-height:56px;font-size:.95rem}

/* panel berwarna per bagian */
body.papan{background:var(--krem)}
body.papan .atas{background:var(--lime)}
.blok{border:2px solid var(--tinta);border-radius:28px;padding:1.1rem 1.2rem 1.3rem}
.blok.hijau{background:var(--hijau-tua);color:var(--krem)}.blok.kobalt{background:var(--kobalt);color:var(--putih)}.blok.krem{background:var(--krem)}.blok.salem{background:var(--salem)}
.blok h2{font-size:1.9rem;line-height:1}
.blok.hijau h2{color:#f2d3b8}
.blok.kobalt .kol h3{color:var(--tinta)}
/* garis tipis seperti cetakan (grain) di halaman papan dan login */
body.papan::before,body.masuk::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* kartu catatan: ceklis baca-saja */
.kartu-catatan h2{font-family:var(--display);font-size:1.15rem;text-transform:none;letter-spacing:0;line-height:1.15;margin-bottom:.4rem}
.kartu-catatan h3{margin-top:.8rem}
.ceklis{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.ceklis li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;line-height:1.3}
.kotak{flex:none;width:1.4rem;height:1.4rem;border:2.5px solid var(--tinta);border-radius:7px;background:var(--putih);margin-top:.05rem;position:relative}
.ceklis li.beres .kotak{background:var(--tinta)}.ceklis li.beres .kotak::after{content:"";position:absolute;left:.38rem;top:.08rem;width:.35rem;height:.7rem;border:solid var(--lime);border-width:0 3px 3px 0;transform:rotate(40deg)}
.ceklis li.beres .isi-ceklis{text-decoration:line-through;color:#5f5a4f}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tag.kosong{display:none}

/* kantor 3D */
.k3d{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#09090b}
.k3d .atas{flex:none}
.panggung{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto}
.adegan{position:relative;min-width:0;min-height:0;overflow:hidden}
#kanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.lapis-label{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lbl{position:absolute;left:0;top:0;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start;min-height:0;padding:.1rem .65rem .15rem;border-radius:999px;border:2px solid var(--tinta);background:var(--putih);color:var(--tinta);text-transform:none;letter-spacing:0;line-height:1.15;white-space:nowrap;will-change:transform}
.lbl:hover{background:var(--putih);color:var(--tinta);border-color:var(--oranye)}
.lbl strong{font-family:var(--judul);font-weight:400;text-transform:uppercase;font-size:13px;letter-spacing:.04em}.lbl span{font-size:10.5px;font-weight:500;color:#3b372f}
.lbl[data-status=hijau]{background:var(--hijau)}.lbl[data-status=kuning]{background:var(--kuning)}.lbl[data-status=merah]{background:var(--merah)}.lbl[data-status=hijau] span,.lbl[data-status=kuning] span,.lbl[data-status=merah] span{color:var(--tinta)}
.lbl.kecil{padding:0 .5rem;background:var(--krem)}.lbl.kecil strong{font-size:12px}.lbl.tenang{pointer-events:none;background:var(--kuning)}.lbl.tv{background:var(--lime)}
.info[hidden]{display:none}
.info{position:absolute;left:1rem;right:1rem;top:1rem;margin:0;padding:.8rem 1rem;background:var(--krem);border:2px solid var(--tinta);border-radius:18px;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.samping{overflow:auto;padding:.9rem;background:var(--krem);border-left:2px solid var(--tinta);display:flex;flex-direction:column;gap:1.2rem}
.kartu-kabar{background:var(--salem);border:2px solid var(--tinta);border-radius:22px;padding:.8rem}.kartu-kabar h2{font-size:1.3rem}
@media (max-width:760px){
  .atas{padding:.4rem .7rem;gap:.4rem}.atas h1{font-size:1.25rem}.atas .redup{display:none}
  .panggung{grid-template-columns:1fr;grid-template-rows:1fr minmax(100px,24vh)}
  .samping{border-left:0;border-top:2px solid var(--tinta);padding:.6rem}.samping h2{font-size:1.1rem}
  .lbl span{display:none}.lbl{padding:0 .5rem}
  .detail h2{font-size:2rem}
}

/* slot gambar Krea (T-007): tampil hanya kalau file ada */
.logo{height:40px;width:auto;display:block}.stiker{display:block;height:96px;width:auto;margin:.6rem 0}.tepar{height:24px;width:auto;vertical-align:middle;margin-right:.35rem}
.kosong-img{display:block;max-width:150px;height:auto;margin:.6rem auto 0}
.login .logo{position:absolute;right:1.2rem;top:1rem;height:44px;margin:0}
.maskot-login{display:block;height:min(17vh,150px);width:auto;margin:auto 0 0 auto;pointer-events:none}
.login{position:relative}
.tag img.tepar{display:inline-block}

/* login lebar: maskot di sisi kanan */
@media (min-width:900px){.maskot-login{position:absolute;right:5vw;bottom:1.4rem;height:min(62vh,560px);margin:0}}
/* label 3D dengan stiker */
.lbl{flex-direction:row;align-items:center;gap:.4rem}
.lbl-teks{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.stiker-kecil{height:44px;width:auto;flex:none;display:block;pointer-events:none}
.lbl .stiker-kecil{height:40px;margin:-6px 0 -4px -6px}
.stiker-besar{display:block;height:150px;width:auto;margin:.2rem 0 .4rem}
.agen .stiker-kecil,.tiket .stiker-kecil{height:48px;margin-bottom:.2rem}
.kabar li{display:flex;gap:.6rem;align-items:center}.kabar li .stiker-kecil{height:40px}
.berkas{display:flex;flex-wrap:wrap;gap:.4rem}.berkas code{font:12px ui-monospace,Menlo,monospace;text-transform:none;letter-spacing:0;font-weight:500}
/* header HP lebih tipis: judul + cabut di baris atas */
@media (max-width:760px){
  .atas h1{order:-2}.atas #keluar{order:-1}
  .atas .tombol,.atas button,.atas select{font-size:.7rem;padding:0 .7rem}
  .atas .pilih span{display:none}
  .atas{padding:.35rem .6rem;gap:.35rem}
}

/* panel samping berlaci (3D): tab Papan / Catatan / Kabar, selalu ada tombolnya */
.samping{width:360px;padding:0;gap:0;overflow:hidden;transition:width .2s}
.samping.tutup{width:58px}
.tab-bar{display:flex;flex-wrap:wrap;gap:.35rem;padding:.55rem;border-bottom:2px solid var(--tinta);background:var(--lime)}
.tab{min-height:44px;padding:0 .8rem;font-size:.72rem}
.tab.aktif{background:var(--tinta);color:var(--putih)}
.tab.lipat{margin-left:auto}
.tab-isi{flex:1;min-height:0;overflow:auto;padding:.8rem}
.tab-panel[hidden]{display:none}
.kolom.sempit{grid-template-columns:1fr;gap:.6rem}.kolom.sempit .kol{padding:.6rem;border-radius:16px}
.kecil-teks{margin:0;font-size:.8rem}
.samping.tutup .tab-bar{flex-direction:column;border-bottom:0;height:100%}
.samping.tutup .tab-bar .tab[data-tab]{display:none}.samping.tutup .tab.lipat{margin:0;writing-mode:vertical-rl;min-height:140px;padding:.6rem 0}
@media (max-width:760px){
  .panggung{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .samping{width:auto;border-left:0;border-top:2px solid var(--tinta);display:flex}
  .samping.tutup{width:auto}
  .samping .tab-isi{max-height:42vh}.samping.tutup .tab-isi{display:none}
  .samping.tutup .tab-bar{flex-direction:row;height:auto}.samping.tutup .tab-bar .tab[data-tab]{display:inline-flex;align-items:center}
  .samping.tutup .tab.lipat{writing-mode:horizontal-tb;min-height:44px;padding:0 .8rem;margin-left:auto}
  .tab-bar{flex-wrap:nowrap;padding:.35rem .5rem;gap:.3rem}.tab{padding:0 .6rem;font-size:.66rem}
  /* label 3D lebih kecil di HP: stiker kecil + nama saja */
  .lbl{padding:0 .4rem 0 .2rem}.lbl strong{font-size:11px}.lbl .stiker-kecil{height:28px;margin:-3px 0 -3px -2px}
}
/* login: judul dibatasi tinggi layar supaya tombol selalu kelihatan */
.raksasa{font-size:min(26vw,22vh,calc((100vh - 340px) / 2.4));font-size:min(26vw,22vh,calc((100dvh - 340px) / 2.4))}
.login{gap:.8rem}

/* nunggu kamu (user) dibedakan dari dicek agen */
.tag.s-nunggukamu{background:#ffb703;border-width:3px}
.kol.kol-nunggu{background:#fff1b8;border-width:3px}

/* kartu ringkasan: [agen] dicek agen, [kamu] nunggu kamu (baris disorot kuning seperti tag nunggu kamu) */
.ringkas{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.ringkas li{display:flex;gap:.5rem;align-items:flex-start;padding:.3rem .5rem;border-radius:10px;font-size:.95rem;line-height:1.3}
.tag.mini{flex:none;font-size:.62rem;padding:0 .5rem;line-height:1.5;margin-top:.1rem}.tag.mini.t-kamu{background:var(--tinta);color:#ffb703;border-color:var(--tinta)}.tag.mini.t-agen{background:var(--lime)}
.ringkas li.kamu{background:#ffb703;border:2px solid var(--tinta);font-weight:600}
.ringkas li.agen{background:var(--putih);border:2px solid var(--tinta)}

/* ciutkan/buka kolom dan kartu: judul jadi tombol, isi disembunyikan, jumlah tetap terlihat */
.kepala{display:block}
.kepala .tombol-ciut{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.5rem;min-height:44px;padding:.2rem .8rem;text-align:left;font:inherit;font-family:var(--judul);font-weight:400;font-size:inherit;letter-spacing:.02em;text-transform:uppercase;background:transparent;border-color:transparent;border-radius:14px;color:inherit}
.kepala .tombol-ciut:hover{background:var(--tinta);color:var(--putih);border-color:var(--tinta)}
.kepala .panah{font-size:.8em;flex:none}
.ciut-judul{min-width:0;overflow-wrap:anywhere}
.ciut>:not(.kepala){display:none}
.kol.ciut{align-self:start}
.kol .kepala{margin:-.3rem -.4rem 0}
.blok .kepala,.kartu-catatan .kepala{margin-left:-.8rem}
.blok.ciut h2{margin-bottom:0}.kartu-catatan.ciut h2{margin-bottom:0}
/* HP 360: tab boleh digulir ke samping, tombol buka/tutup tetap nempel di kanan */
.tab-bar{overflow-x:auto;scrollbar-width:none}.tab-bar::-webkit-scrollbar{display:none}
.tab{flex:none}
.tab.lipat{position:sticky;right:0}
.kol-ditunda{background:#e6e0cf}
@media (max-width:760px){.tab-bar{flex-wrap:nowrap}.tab{padding:0 .55rem}.tab.lipat{box-shadow:-8px 0 8px -4px var(--lime)}}

/* papan 2D layar lebar: 6 kolom sebaris, Ditunda tidak turun sendiri */
@media (min-width:1400px){.isi{max-width:1500px}.blok .kolom:not(.sempit){grid-template-columns:repeat(6,minmax(0,1fr))}}
/* HP 360: tombol tab tidak terpotong di bawah saat laci tertutup */
@media (max-width:760px){.samping{flex:none}.tab-bar{min-height:54px;flex:none}.samping.tutup .tab-bar{height:auto;overflow-y:hidden}.panggung{grid-template-rows:minmax(0,1fr) auto}.k3d{padding-bottom:env(safe-area-inset-bottom)}}
@media (max-width:760px){.samping.tutup .tab-bar{padding-top:.5rem;padding-bottom:.5rem}}
/* HP sempit: tab turun ke baris kedua, tombol buka/tutup tidak menimpa tab (T-026) */
@media(max-width:480px){.tab-bar{flex-wrap:wrap;overflow:visible}.tab.lipat{position:static}}

/* T-076: panel detail agen - progres tiket, potong teks, riwayat ringkas */
.tiket-w{margin:0 0 .5rem}.tiket-w .tiket{margin:0}.tiket .klip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.lengkap{margin:.25rem 0 0;padding:.1rem .7rem;font-size:.72rem;min-height:32px;border-radius:999px}
.progres{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;margin:.1rem 0 .4rem;padding:0}.progres li{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.1rem .55rem;border:2px solid var(--tinta);border-radius:999px;background:var(--putih);opacity:.5}
.progres li.lalu{opacity:1;background:#d9d3c2}.progres li.kini{opacity:1;background:var(--kuning);border-width:3px}
.kabar-tiket{font-size:.82rem;margin:.2rem 0 .6rem;color:#3b372f;overflow-wrap:anywhere}
.tag.s-nungguaudit{background:var(--kuning)}
.riwayat{display:block}
@media (max-width:760px),(pointer:coarse){.lengkap{min-height:44px;padding:.2rem 1rem}}
.lengkap[hidden]{display:none}