/* Tema biru "stiker": latar #A8C5F8, kartu putih, garis tebal biru tua, bayangan keras.
   Dimuat SETELAH style.css, hanya di halaman publik. Panel admin tetap tema gelap. */
@font-face{font-family:'Chango';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/chango-latin-400-normal.woff2) format('woff2')}
:root{
  --bg:#A8C5F8; --panel:#FFFFFF; --panel2:#E4EDFC; --line:#5C7FCC; --ink:#14224D;
  --text:#14224D; --muted:#3A4A78; --blue:#14224D;
  --amber:#8A5A00; --mint:#0F6B46; --rose:#B3261E;
  --chunk:'Chango','Bricolage Grotesque',system-ui,sans-serif;
}
body{background-color:var(--bg);background-image:radial-gradient(rgba(255,255,255,.38) 2px,transparent 2.5px);background-size:28px 28px;color:var(--text)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn:focus-visible,.submit:focus-visible,.pkok:focus-visible{outline-offset:7px}          /* cincin di luar bayangan tombol, tidak menempel di garisnya */
.dlg:focus,.sheet:focus{outline:none}                                             /* kotak dialog menerima fokus saat dibuka, tanpa cincin */
::placeholder{color:#5A6893}
a:hover{opacity:1}

/* header & footer */
header.top{background:rgba(168,197,248,.96);border-bottom:3px solid var(--ink);backdrop-filter:blur(6px)}
.brand-logo{height:48px;max-width:62vw;width:auto;display:block}
footer.foot .brand-logo{height:36px}
footer.foot .muted a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.burger{background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.burger:active{transform:translateY(3px);box-shadow:none}
.menu{background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:0 6px 0 var(--ink)}
.menu a:hover{background:var(--panel2)}
.menu a.active{color:var(--ink);background:var(--bg);font-weight:700}
footer.foot{background:#fff;border-top:3px solid var(--ink)}
.band{background:var(--panel2);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}

/* judul */
.eyebrow{display:inline-flex;align-self:flex-start;align-items:center;background:#fff;color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:4px 14px;letter-spacing:.06em}
.h1,.h2{font-family:var(--chunk);font-weight:400;letter-spacing:0;line-height:1.15}
.h1{font-size:clamp(28px,6vw,48px)}
.h2{font-size:clamp(24px,4.6vw,36px)}
.hero h1{font-family:var(--chunk);font-weight:400;letter-spacing:0;line-height:1;font-size:clamp(60px,14vw,132px);color:#fff;-webkit-text-stroke:11px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 var(--ink);padding-bottom:8px}
.hero h1 span{color:var(--ink);-webkit-text-stroke:0;text-shadow:none}
.muted{color:var(--muted)}

/* tombol */
.btn{color:var(--ink);background:#fff;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--ink)}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.btn-blue,.btn-outline,.btn-ghost{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn:disabled{opacity:1;background:var(--panel2);color:#5A6893;border-color:var(--line);box-shadow:0 5px 0 var(--line);transform:none}
.cta{font-family:var(--chunk);font-weight:400;letter-spacing:0;font-size:22px}
.submit{background:var(--ink);color:#fff;border:3px solid var(--ink);box-shadow:0 4px 0 var(--line);transition:transform .08s,box-shadow .08s}
.submit:not(:disabled):hover{transform:translateY(2px);box-shadow:0 2px 0 var(--line)}
.submit:disabled{background:var(--panel2);color:#5A6893;border-color:var(--line);box-shadow:none}

/* kartu & panel */
.card,.acard{background:#fff;border:3px solid var(--ink);border-radius:28px;box-shadow:0 6px 0 var(--ink)}
.art{background:#fff;border:3px solid var(--ink);border-radius:40px 40px 40px 10px;box-shadow:0 8px 0 var(--ink);display:flex;align-items:center;justify-content:center;padding:36px}
.art img{width:100%;max-width:380px;height:auto;display:block;animation:kmbob 3.2s ease-in-out infinite}
@keyframes kmbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.art img{animation:none}}
.num{background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);font-family:var(--chunk);font-weight:400}
.bar{background:#fff;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
.bar .tot{color:var(--ink)}
.notice{background:#fff;border:2.5px dashed var(--ink)}
.notice b{color:var(--ink)}
.warn{background:#FFF3D6;border:2px solid #8A5A00;color:#5E3D00}
.sumrow{border-bottom:1.5px dashed var(--line)}
.sumrow.big span:last-child{color:var(--ink)}
.sheet{background:#fff;border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink)}
.sheet-h{background:var(--bg);border-bottom:3px solid var(--ink)}
.overlay,.pkov{background:rgba(20,34,77,.62)}
.dlg{background:#fff;border:3px solid var(--ink);box-shadow:0 8px 0 var(--ink);border-radius:30px}
.codebox{color:var(--ink);background:var(--panel2);border:2.5px dashed var(--ink)}
.badge{border-width:2px}
.b-pend{color:#5E3D00;background:#FFF3D6;border-color:#8A5A00}
.b-ok{color:#0F5B3C;background:#DDF5E8;border-color:#0F6B46}
.b-res{color:var(--ink);background:var(--panel2);border-color:var(--ink)}
.hint{color:#0F6B46}

/* formulir */
.field{background:#fff;color:var(--ink);border:2.5px solid var(--ink);color-scheme:light}
.field:focus{outline:3px solid var(--ink);outline-offset:2px}
.checkrow input{accent-color:var(--ink)}
.stepper button,.calnav{background:#fff;color:var(--ink);border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.stepper button:active,.calnav:active{transform:translateY(3px);box-shadow:none}
.contoh{color:#8A5A00}

/* picker unit, durasi, paket, jam */
.unit,.pk,.durbox,.mapopt,.fchip{background:#fff;color:var(--ink);border:2.5px solid var(--line)}
.unit small,.pk small{color:var(--muted)}
.pk small{color:var(--ink)}
.unit.on,.pk.on{background:var(--ink);color:#fff;border:2.5px solid var(--ink);box-shadow:0 4px 0 var(--line)}
.unit.on small{color:#C9D8FA}
.pk.on small{color:#fff}
.durbox.on{border-color:var(--ink);background:#fff;box-shadow:0 4px 0 var(--ink)}
.fchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pill{background:#fff;color:var(--ink);border:2px solid var(--line)}
.pill small{color:var(--muted)}
.pill.pend{background:#FFF3D6;border-color:#8A5A00;color:#5E3D00}
.pill.mine{border-color:var(--ink);color:var(--ink)}
.pill.pick{border-color:var(--ink);color:var(--ink)}
.pill.pick.ok{background:var(--ink);color:#fff}
.pill.pick.bad{border-color:var(--rose);color:var(--rose)}
.pill.none,.pill.pick.empty{color:var(--muted)}
.pickbtn svg{color:var(--ink)}
.mapcanvas{border:2.5px solid var(--ink)}
.mapopt:hover{border-color:var(--ink)}

/* pemilih tanggal & jam */
.pksheet{background:#fff;border:3px solid var(--ink);border-bottom:0;box-shadow:0 -4px 0 var(--ink)}
@media (min-width:600px){.pksheet{border-bottom:3px solid var(--ink);box-shadow:0 8px 0 var(--ink)}}
.pkgrab{background:var(--ink)}
.pkband{background:var(--bg);border:2.5px solid var(--ink)}
.pkitem{color:#5A6893}
.pkitem.on{color:var(--ink)}
.pksep{color:var(--ink)}
.pkok{background:var(--ink);color:#fff;border:3px solid var(--ink);box-shadow:0 3px 0 var(--line)}
.cday{color:var(--ink)}
.cday.today{border-color:var(--ink)}
.cday.on{background:var(--ink);color:#fff}
.cday.has::after{background:#8A5A00}
.cday.on.has::after{background:#fff}
.caldot{background:#8A5A00}

/* katalog game */
.gcard{background:#fff;border:3px solid var(--ink);border-radius:24px;box-shadow:0 5px 0 var(--ink)}
.gcover{background:var(--bg);color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;font-family:var(--chunk);font-weight:400;letter-spacing:0;border-bottom:3px solid var(--ink)}
.gtag{border:1.5px solid var(--line);color:var(--muted)}
.gunits{color:var(--ink);font-weight:700}

/* indikator muat */
.kmload i{background:var(--ink)}
.kmload span{background:#fff;color:var(--ink);border:2px solid var(--ink)}

@media (max-width:600px){.art{padding:22px;border-radius:32px 32px 32px 8px}.art img{max-width:250px}.hero{padding:36px 0 56px}}

/* halaman reschedule: satu kolom di tengah, selebar form isi data tapi cukup lega untuk pemilih jadwal */
.rs-page{max-width:880px}
.mapbox>.linkbtn{align-self:flex-start;color:var(--ink);font-size:14px;min-height:32px;padding:4px 0}
.mapres>.muted{line-height:1.5}