:root{--bg:#f2f3ef;--surface:#fff;--ink:#23272e;--muted:#6a707a;--line:#d9dbd5;--road:#2b2f36;--sign:#f2c230;--on-sign:#23272e;--sel:#1f6feb;--err:#c62828;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root{--bg:#181a1e;--surface:#22252b;--ink:#eceee9;--muted:#9aa0aa;--line:#363a42;--road:#0f1013;--sel:#5b9bff;--err:#e5534b}}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Barlow,system-ui,sans-serif}
a{color:inherit}
header.top{background:var(--road);color:#fff;padding:14px 20px;display:flex;align-items:center;gap:10px}
header.top i{width:34px;height:4px;background:var(--sign);display:inline-block;border-radius:2px}
header.top .brand{font:700 22px 'Barlow Condensed',Impact,sans-serif;letter-spacing:.02em;text-decoration:none}
header.top .sp{flex:1}
header.top a.small,header.top button{color:#fff;font-size:14px;text-decoration:underline;background:none;border:0;cursor:pointer;padding:0}
main{max-width:1100px;margin:0 auto;padding:24px 16px 110px}
h1{font:700 clamp(30px,6vw,46px)/1.05 'Barlow Condensed',Impact,sans-serif;margin:0 0 6px}
h2{font:700 24px/1.1 'Barlow Condensed',Impact,sans-serif;margin:0 0 10px}
.meta{color:var(--muted);margin:0 0 20px}
input,select,textarea,button{font:inherit;color:var(--ink)}
input,select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:7px 9px}
label{display:flex;flex-direction:column;font-size:13px;color:var(--muted);gap:4px}
button{cursor:pointer}
.btn{display:inline-block;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:7px 14px;text-decoration:none;color:var(--ink);font-size:16px}
.btn.go{background:var(--sign);border-color:var(--sign);color:var(--on-sign);font-weight:600}
.btn.danger{color:var(--err);border-color:var(--err)}
.btn[aria-disabled=true],.btn:disabled{opacity:.4;pointer-events:none}
:focus-visible{outline:3px solid var(--sel);outline-offset:2px}

/* Beranda */
.hl{max-width:560px;margin:0 auto}
.hero{text-align:center;margin:8px 0 22px}.hero .meta{margin:0}
.av{width:84px;height:84px;border-radius:50%;background:var(--road);color:var(--sign);display:grid;place-items:center;font:700 40px 'Barlow Condensed',Impact,sans-serif;margin:0 auto 10px;border:3px solid var(--sign)}
.hsec{margin-bottom:6px}
.hsec h2{margin:26px 0 10px;display:flex;align-items:center;gap:10px}
.hsec h2:before{content:"";width:22px;height:4px;background:var(--sign);border-radius:2px}
.lk{display:flex;align-items:center;gap:10px;width:100%;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--sign);border-radius:10px;padding:14px 16px;margin-bottom:10px;font-weight:600;text-decoration:none}
a.lk:hover{border-color:var(--road);border-left-color:var(--sign)}
.lk span.t{flex:1}
.th{flex:none;width:56px;height:56px;border-radius:8px;object-fit:cover;background:#555}
.th.ph{display:grid;place-items:center;color:var(--sign);background:var(--road);font:700 24px 'Barlow Condensed',sans-serif}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.chip{flex:none;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:6px 14px;text-decoration:none}
.chip.on{background:var(--sign);border-color:var(--sign);color:var(--on-sign);font-weight:600}

/* Galeri */
.bar{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:end;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px}
.tabs{display:flex;gap:4px;margin:20px 0 14px;border-bottom:2px solid var(--line)}
.tab{padding:10px 16px;font-weight:600;color:var(--muted);border-bottom:4px solid transparent;margin-bottom:-2px;text-decoration:none}
.tab[aria-current=page]{color:var(--ink);border-bottom-color:var(--sign)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.tile{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#555}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.pick{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:none}
.pick[aria-pressed=true]{outline:4px solid var(--sel);outline-offset:-4px}
.cap{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:13px;display:flex;justify-content:space-between;pointer-events:none}
.chk{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.35);display:grid;place-items:center;color:#fff;font-size:14px}
.pick[aria-pressed=true] .chk{background:var(--sel);border-color:var(--sel)}
.zoom{position:absolute;left:6px;top:6px;min-width:32px;height:32px;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;border-radius:6px;font-size:16px;text-decoration:none}
.zoom:hover{background:rgba(0,0,0,.8)}
.vid{position:absolute;left:8px;bottom:30px;background:rgba(0,0,0,.55);color:#fff;border-radius:4px;font-size:12px;padding:1px 7px;pointer-events:none}
.pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:22px 0}
.pager input{width:64px}
.foot{display:flex;justify-content:center}
.empty{padding:40px;text-align:center;color:var(--muted)}
.cart{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--road);color:#fff;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;align-items:center;box-shadow:0 -2px 10px rgba(0,0,0,.35);transform:translateY(110%)}
.cart.ready{transition:transform .2s}
.cart.on{transform:none}
dialog{border:0;border-radius:12px;max-width:420px;width:calc(100% - 32px);padding:22px;background:var(--surface);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.wam{white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px;max-height:240px;overflow:auto;font:14px/1.5 inherit;margin:0 0 12px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.note{font-size:13px;color:var(--muted)}
.err{color:var(--err)}
.flash{background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--sign);border-radius:8px;padding:10px 14px;margin-bottom:16px}
@media (prefers-reduced-motion:reduce){.cart{transition:none}}

/* Admin */
.adm main{max-width:900px}
.adm nav{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.adm nav a{font-weight:600}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px}
.card form{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.card .grow{flex:1 1 200px}
table{width:100%;border-collapse:collapse;font-size:15px}
td,th{padding:8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.thumbs button{border:0;padding:0;background:none}
.thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block}

/* Strip thumbnail di admin */
.mini{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;align-items:center}
.mini a{display:block;border-radius:4px;overflow:hidden;background:#555}
.mini img{display:block;width:64px;height:48px;object-fit:cover}
.mini .more{font-size:13px;color:var(--muted);padding:0 6px}
.flash{white-space:pre-wrap;overflow-wrap:anywhere}

/* Popup preview foto */
html.lb-open{overflow:hidden}
dialog.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:rgba(10,11,13,.95);color:#fff}
dialog.lb[open]{display:flex;align-items:center;justify-content:center}
dialog.lb::backdrop{background:transparent}
.lb [hidden]{display:none!important}
.lb figure{margin:0;width:100%;height:100%;display:flex;flex-direction:column;padding:calc(56px + env(safe-area-inset-top,0px)) 72px calc(14px + env(safe-area-inset-bottom,0px))}
.lb-stage{flex:1;min-height:0;display:grid;place-items:center;position:relative}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;opacity:0;transition:opacity .15s;user-select:none;-webkit-user-drag:none}
.lb-stage img.ok{opacity:1}
.lb-load,.lb-fail{position:absolute;color:#cfd3da;font-size:15px}
.lb figcaption{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding-top:10px;font-size:14px;color:#cfd3da}
.lb-cap{overflow-wrap:anywhere}
.lb-x,.lb-n{position:absolute;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center;line-height:1}
.lb-x:hover,.lb-n:hover{background:rgba(255,255,255,.28)}
.lb-x{top:calc(10px + env(safe-area-inset-top,0px));right:12px;width:44px;height:44px;font-size:20px}
.lb-n{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:30px;padding-bottom:4px}
.lb-p{left:12px}.lb-nx{right:12px}
.lb-n:disabled{opacity:.25;cursor:default}
@media (max-width:640px){
  .lb figure{padding-left:8px;padding-right:8px}
  .lb-n{width:40px;height:40px;font-size:26px;background:rgba(0,0,0,.45)}
  .lb-p{left:6px}.lb-nx{right:6px}
}
@media (prefers-reduced-motion:reduce){.lb-stage img{transition:none}}

/* Preview video di popup */
.lb-vid{display:none;max-width:100%;max-height:100%;border-radius:4px;background:#000}
.lb-stage.isv .lb-vid{display:block}
.lb-stage.isv img{display:none}
.mini a.v{position:relative}
.mini a.v::after{content:'▶';position:absolute;right:3px;bottom:2px;font-size:11px;color:#fff;text-shadow:0 0 3px #000}

/* Video diputar oleh Google Drive */
.lb-frame{display:none;border:0;border-radius:4px;background:#000;aspect-ratio:16/9;width:min(100%,calc((100vh - 170px) * 16 / 9));width:min(100%,calc((100dvh - 170px) * 16 / 9))}
.lb-stage.ise .lb-frame{display:block}
.lb-stage.ise img{display:none}