@font-face{font-family:"Stardos Stencil";src:url("../assets/fonts/StardosStencil-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Big Shoulders Stencil";src:url("../assets/fonts/BigShouldersStencil-800.woff") format("woff");font-weight:800;font-display:swap}
@font-face{font-family:"Anton";src:url("../assets/fonts/Anton-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
/* SlanKlub — "Potlot Rock UI"
   Street rock 'n roll Gang Potlot: panggung malam & aspal, peace blue (denim), rebel red (CTA/live).
   Sudut tegas 4–8px, header punchy, body bersih kontras tinggi. */
:root{
  --bg-potlot:#121212;
  --surface-potlot:#1F1F1F;
  --surface-potlot-light:#2A2A2A;
  --peace-blue:#1E88E5;
  --rebel-red:#D32F2F;
  --text-primary:#EDEDED;
  --text-muted:#9E9E9E;
  --border-potlot:#2C2C2C;
  --ok:#43A047;--warn:#F9A825;
  --r-sm:4px;--r:6px;--r-lg:8px;
  --display:"Big Shoulders Stencil","Anton",Impact,"Arial Narrow Bold",sans-serif;
  --stencil:"Stardos Stencil","Big Shoulders Stencil",Georgia,serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:#0b0b0b;color:var(--text-primary);font:15px/1.5 var(--body)}

/* ---------- Kanvas: aspal malam ---------- */
#phone{max-width:430px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:86px;overflow-x:hidden;
  background:
    radial-gradient(ellipse 90% 35% at 50% -5%, rgba(30,136,229,.10), transparent 70%),
    url("../assets/doodle.svg?v=2") 0 0/440px repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--bg-potlot)}
@media(min-width:600px){#phone{margin:20px auto;min-height:calc(100vh - 40px);border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--border-potlot),0 30px 80px #000}}

/* ---------- Header ---------- */
#bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 16px;
  background:rgba(18,18,18,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-potlot)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo img{width:36px;height:36px;display:block}
.wordmark{font-family:var(--display);font-size:21px;letter-spacing:.02em;line-height:1;color:var(--text-primary)}
.stamp{display:inline-block;font-family:var(--display);font-size:10px;letter-spacing:.1em;line-height:1;color:var(--rebel-red);
  border:1.5px solid var(--rebel-red);border-radius:var(--r-sm);padding:3px 5px 2px;transform:rotate(-4deg);margin-left:2px;opacity:.9}
#bar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.bell{position:relative;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);
  background:var(--surface-potlot);border:1px solid var(--border-potlot);color:var(--text-primary);text-decoration:none}
.bell svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bell .dot{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:var(--r-sm);background:var(--rebel-red);
  color:#fff;font:700 10px/18px var(--body);text-align:center;border:2px solid var(--bg-potlot)}
.hero-logo{display:block;width:120px;height:120px;margin:22px auto 10px}
#view{padding:16px}

/* ---------- Navigasi bawah ---------- */
#tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;display:flex;align-items:flex-end;
  padding:8px 6px calc(10px + env(safe-area-inset-bottom));z-index:9;
  background:rgba(18,18,18,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border-potlot)}
@media(min-width:600px){#tabs{position:absolute;bottom:0}}
#tabs a{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:8px;text-decoration:none;color:var(--text-muted);transition:color .2s}
#tabs a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#tabs a span{font-family:var(--display);font-size:11.5px;letter-spacing:.06em;line-height:1}
#tabs a.on{color:var(--peace-blue)}
#tabs a:not(.scan).on:before{content:"";position:absolute;top:-9px;left:30%;right:30%;height:3px;border-radius:0 0 var(--r-sm) var(--r-sm);background:var(--peace-blue);box-shadow:0 0 12px rgba(30,136,229,.6)}
#tabs a.scan b{width:52px;height:52px;margin-top:-28px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;color:#fff;
  background:var(--rebel-red);border:2px solid var(--bg-potlot);box-shadow:0 0 0 1px #8e1f1f,0 8px 20px rgba(211,47,47,.35);transform:rotate(45deg);transition:transform .2s}
#tabs a.scan b svg{transform:rotate(-45deg);width:24px;height:24px;stroke-width:2}
#tabs a.scan.on b{box-shadow:0 0 0 2px var(--peace-blue),0 8px 22px rgba(211,47,47,.45)}
#tabs a.scan span{margin-top:4px}
#tabs a.scan.on span{color:var(--text-primary)}

/* ---------- Tipografi ---------- */
h1,h2,h3{font-family:var(--stencil);font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--text-primary);line-height:1.05}
h1{font-size:30px;margin:6px 0 12px}
h2{font-size:19px;margin:24px 0 10px;display:flex;align-items:center;gap:10px}
h2:before{content:"";width:4px;height:18px;background:var(--rebel-red);border-radius:1px}
h2 a{margin-left:auto;font-family:var(--body);font-size:12px;letter-spacing:0;text-transform:none}
h3{font-size:16px;margin:10px 0 6px}
a{color:var(--peace-blue)}.mute{color:var(--text-muted)}.small{font-size:12px}.center{text-align:center;padding:30px 0}

/* ---------- Kartu ---------- */
.card{background:var(--surface-potlot);border:1px solid var(--border-potlot);border-radius:var(--r-lg);padding:14px;margin-bottom:12px}

/* Hero: kartu Slank.ID — panel arang dengan bingkai merah menyala */
.idcard{position:relative;border-radius:14px;padding:7px;
  background:linear-gradient(125deg,#0e0e0e 0%,#5a0b0b 14%,#e3191c 34%,#b51217 52%,#e3191c 70%,#5a0b0b 88%,#0e0e0e 100%);
  box-shadow:0 0 28px rgba(227,25,28,.28),0 16px 36px rgba(0,0,0,.55)}
.idcard-in{position:relative;overflow:hidden;min-height:214px;border-radius:9px;padding:16px 16px 14px;color:#fff;display:flex;flex-direction:column;
  background:radial-gradient(ellipse 85% 70% at 30% 25%,#2f3134 0%,#1e1f21 55%,#141515 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 0 24px rgba(0,0,0,.5)}
.idcard-in:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../assets/card-emblem.png?v=2") 54% 50%/74% auto no-repeat;opacity:.30;mix-blend-mode:screen}
.idcard-in>*{position:relative;z-index:1}
.id-top{display:flex;justify-content:space-between;align-items:center}
.id-tag{display:inline-block;background:#e3191c;color:#150707;font:400 13px/1 var(--display);letter-spacing:.05em;padding:6px 8px 5px;border-radius:5px;
  box-shadow:0 0 12px rgba(227,25,28,.35)}
.id-main{margin:auto 0 0;padding-top:26px}
.idcard .sid{font:400 33px/1.05 var(--display);letter-spacing:.01em;color:#fff;margin:0}
.idcard .nm{font:400 24px/1.1 var(--display);letter-spacing:.015em;text-transform:uppercase;margin-top:2px}
.idcard .row2{display:flex;justify-content:space-between;align-items:flex-end;margin-top:18px;gap:10px}
.id-meta{font:500 13.5px/1.55 var(--body);color:#f1f1f1}
.id-meta a{color:#ff8a80!important;font-weight:700}
.vbadge{width:17px;height:17px;vertical-align:-3px;margin-left:3px;color:#fff}
.id-qr{background:#fff;padding:6px;border-radius:7px;line-height:0;flex:none;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.id-qr img,.id-qr canvas{display:block;width:72px!important;height:72px!important}
.tier{display:inline-block;padding:4px 8px 3px;border-radius:var(--r-sm);font-family:var(--display);font-size:12.5px;letter-spacing:.06em;line-height:1;
  background:var(--surface-potlot-light);border:1px solid #3a3a3a;color:var(--text-primary)}
.tier.LOVE{background:var(--rebel-red);border-color:var(--rebel-red);color:#fff}
.tier.UNITY{background:var(--peace-blue);border-color:var(--peace-blue);color:#fff}
.tier.RESPECT{background:var(--text-primary);border-color:var(--text-primary);color:#121212}

.pill{display:inline-block;padding:2px 7px;border-radius:var(--r-sm);font-size:11px;font-weight:700;letter-spacing:.02em;background:var(--surface-potlot-light);color:#cfcfcf;border:1px solid #333}
.pill.ok{background:rgba(67,160,71,.14);color:#7fd483;border-color:rgba(67,160,71,.4)}
.pill.bad{background:rgba(211,47,47,.15);color:#ff8a80;border-color:rgba(211,47,47,.45)}
.pill.warn{background:rgba(249,168,37,.13);color:#ffd54f;border-color:rgba(249,168,37,.4)}
.pill.blue{background:rgba(30,136,229,.15);color:#90caf9;border-color:rgba(30,136,229,.45)}
.live{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 2px;border-radius:var(--r-sm);background:var(--rebel-red);color:#fff;
  font-family:var(--display);font-size:11.5px;letter-spacing:.08em;line-height:1}
.live:before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ---------- Tombol ---------- */
.btn{display:block;width:100%;border:0;border-radius:var(--r);padding:13px;cursor:pointer;text-align:center;text-decoration:none;
  font-family:var(--display);font-size:17px;letter-spacing:.04em;line-height:1.15;color:#fff;background:var(--rebel-red);
  box-shadow:0 4px 0 #8e1f1f;transition:transform .08s,box-shadow .08s,background .2s}
.btn:hover{background:#e53935}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8e1f1f}
.btn:disabled{background:var(--surface-potlot-light);color:#6f6f6f;box-shadow:none;cursor:not-allowed;transform:none}
.btn.sec{background:var(--surface-potlot-light);color:var(--text-primary);box-shadow:0 4px 0 #161616}
.btn.sm{display:inline-block;width:auto;padding:8px 14px 7px;font-size:13.5px;border-radius:var(--r-sm);box-shadow:0 3px 0 #8e1f1f}
.btn.sec.sm{box-shadow:0 3px 0 #161616}
.btn.ghost{background:transparent;border:1px solid var(--border-potlot);color:var(--text-muted);box-shadow:none}

input,select{width:100%;background:#171717;color:var(--text-primary);border:1px solid var(--border-potlot);border-radius:var(--r);padding:12px;font:inherit;margin:4px 0 10px}
input:focus,select:focus{outline:none;border-color:var(--peace-blue);box-shadow:0 0 0 3px rgba(30,136,229,.18)}
label{font-size:12px;color:var(--text-muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* ---------- Daftar, grid, media ---------- */
.list a.item,.list .item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border-potlot);text-decoration:none;color:inherit}
.list .item:last-child{border-bottom:0}.item .t{font-weight:700}.item .grow{flex:1;min-width:0}
.list a.item:active{background:var(--surface-potlot-light)}
.thumb{width:64px;height:64px;border-radius:var(--r);object-fit:cover;background:var(--surface-potlot-light);flex:none;border:1px solid var(--border-potlot);filter:grayscale(.2) contrast(1.1)}
.cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);background:var(--surface-potlot-light);border:1px solid var(--border-potlot);filter:grayscale(.15) contrast(1.1)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:var(--surface-potlot);border:1px solid var(--border-potlot);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;display:block;transition:border-color .2s}
.tile:active{border-color:var(--peace-blue)}
.tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--surface-potlot-light);filter:grayscale(.15) contrast(1.1)}
.tile div{padding:9px 10px;font-size:13px}
.progress{height:6px;background:var(--surface-potlot-light);border-radius:2px;overflow:hidden;margin:10px 0 8px}
.progress b{display:block;height:100%;border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 2px,transparent 2px 6px),linear-gradient(90deg,#1565C0,var(--peace-blue))}
.seg{display:flex;background:var(--surface-potlot);border:1px solid var(--border-potlot);border-radius:var(--r-lg);padding:4px;margin-bottom:12px}
.seg a{flex:1;text-align:center;padding:8px 8px 6px;border-radius:var(--r-sm);color:var(--text-muted);text-decoration:none;font-family:var(--display);font-size:14px;letter-spacing:.05em}
.seg a.on{background:var(--peace-blue);color:#fff}
.qrbox{background:#fff;border-radius:var(--r-lg);padding:16px;display:flex;justify-content:center;margin:12px auto;width:max-content;box-shadow:0 0 0 4px var(--peace-blue)}
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--border-potlot)}.kv:last-child{border:0}
#toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);background:var(--surface-potlot);border:1px solid var(--border-potlot);border-left:4px solid var(--peace-blue);
  color:var(--text-primary);padding:12px 16px;border-radius:var(--r);max-width:380px;width:calc(100% - 40px);display:none;z-index:20;box-shadow:0 12px 30px rgba(0,0,0,.6)}
#toast.bad{border-left-color:var(--rebel-red)}#toast.ok{border-left-color:var(--peace-blue)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--surface-potlot-light);border:1px solid #363636;color:var(--text-primary);border-radius:var(--r-sm);padding:6px 11px;font-size:12px;font-weight:700;cursor:pointer}
.chip:active{border-color:var(--peace-blue)}
.task{display:flex;gap:8px;align-items:center;padding:5px 0}
.task .d{width:20px;height:20px;border-radius:var(--r-sm);border:2px solid #4a4a4a;display:flex;align-items:center;justify-content:center;font-size:12px}
.task .d.y{background:var(--peace-blue);border-color:var(--peace-blue);color:#fff}
#reader{border-radius:var(--r-lg);overflow:hidden;background:#000;border:1px solid var(--border-potlot)}#reader *{color:#fff}

.card.accent-gold{border-color:var(--peace-blue);box-shadow:inset 3px 0 0 var(--peace-blue)}
.card.accent-warn{border-color:rgba(249,168,37,.5);box-shadow:inset 3px 0 0 var(--warn)}
.card.accent-ok{border-color:rgba(67,160,71,.5);box-shadow:inset 3px 0 0 var(--ok)}
/* Pemisah: jahitan denim */
.rug-rule{height:0;margin:20px 0;border-top:2px dashed rgba(30,136,229,.45)}

/* ---------- Foto band ---------- */
.band-hero{position:relative;margin:-16px -16px 6px;height:310px;overflow:hidden}
.band-hero .band{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:contrast(1.08) saturate(.9)}
.band-hero:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(18,18,18,.15) 0%,rgba(18,18,18,.25) 45%,rgba(18,18,18,.85) 80%,#121212 100%),
             linear-gradient(90deg,rgba(211,47,47,.18),transparent 35%,transparent 65%,rgba(30,136,229,.18))}
.band-hero .hero-logo{position:absolute;z-index:2;left:50%;bottom:6px;transform:translateX(-50%);width:104px;height:104px;margin:0;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.7))}
.feature{position:relative;display:block;min-height:240px;margin:14px 0 4px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border-potlot);text-decoration:none;color:var(--text-primary);box-shadow:inset 4px 0 0 var(--rebel-red),0 14px 34px rgba(0,0,0,.5)}
.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:contrast(1.08) saturate(.85)}
.feature:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,18,0) 15%,rgba(18,18,18,.55) 50%,rgba(18,18,18,.95) 88%)}
.feature-body{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:16px 16px 16px 20px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.feature-title{font-family:var(--display);font-size:28px;line-height:1.05;letter-spacing:.01em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.feature-meta{font-size:12.5px;color:#cfcfcf}
.feature .btn{margin-top:6px}

/* Pull-to-refresh */
#ptr{height:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font:700 12px/1 var(--body);
  letter-spacing:.06em;color:var(--peace-blue);background:var(--bg-potlot);transition:height .15s ease}

/* ---------- Tipografi stencil + tekstur aus halus ---------- */
.wordmark{font-family:var(--stencil);font-weight:700;letter-spacing:.04em;font-size:20px}
.idcard .sid{font-family:var(--stencil);font-weight:700;font-size:31px;letter-spacing:.02em}
.idcard .nm{font-family:var(--stencil);font-weight:700;font-size:22px;letter-spacing:.03em}
.feature-title{font-family:var(--stencil);font-weight:700;font-size:26px;letter-spacing:.02em}
#tabs a span,.btn,.id-tag,.tier,.live,.stamp,.seg a{font-weight:800}
h1,h2,.wordmark,.idcard .nm,.feature-title{
  -webkit-mask-image:url("../assets/distress.png");mask-image:url("../assets/distress.png");
  -webkit-mask-size:260px;mask-size:260px;-webkit-mask-repeat:repeat;mask-repeat:repeat}
h2:before{-webkit-mask-image:none;mask-image:none}