/* ============================================================
   1. TOKEN WARNA
   ============================================================ */
:root{
  --biru-1:#2F9BF4;
  --biru-2:#1E7FD1;
  --kuning:#FFD23F;
  --krem:#FBF6EC;
  --navy:#1F3A3D;
  --hijau:#3FB871;
  --koral:#F08A72;

  --teks:#1F3A3D;
  --teks-lembut:#4C666A;
  --teks-samar:#7A9095;

  --accent:#2F9BF4;

  --kaca-isi: linear-gradient(145deg, rgba(255,255,255,.55), rgba(255,255,255,.14));
  --kaca-border: rgba(255,255,255,.62);
  --kaca-inset: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(255,255,255,.18);

  --bayang-1: 0 14px 34px rgba(18,62,96,.13);
  --bayang-2: 0 2px 8px rgba(18,62,96,.08);

  --r-besar:28px;
  --r-sedang:22px;
  --r-pill:999px;
  --dock-h:74px;
}



/* ============================================================
   2. DASAR
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:var(--teks);
  background-color:var(--krem);
  background-image:
    radial-gradient(1100px 680px at 8% -12%, rgba(47,155,244,.42), transparent 62%),
    radial-gradient(900px 620px at 102% -6%, rgba(255,210,63,.42), transparent 58%),
    radial-gradient(1000px 760px at 50% 118%, rgba(63,184,113,.34), transparent 62%),
    radial-gradient(760px 560px at 92% 76%, rgba(240,138,114,.22), transparent 62%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}


body.intro-lock{ overflow:hidden; }

h1,h2,h3,.font-judul{
  font-family:'Fredoka', 'Inter', system-ui, sans-serif;
  font-weight:700;
  letter-spacing:-.01em;
  margin:0;
}

button{ font:inherit; color:inherit; }

:focus-visible{
  outline:3px solid var(--biru-2);
  outline-offset:3px;
  border-radius:10px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   3. KACA CAIR
   ============================================================ */
.glass{
  position:relative;
  background:var(--kaca-isi);
  -webkit-backdrop-filter: blur(18px) saturate(1.75);
  backdrop-filter: blur(18px) saturate(1.75);
  border:1px solid var(--kaca-border);
  border-radius:var(--r-besar);
  box-shadow: var(--bayang-1), var(--bayang-2), var(--kaca-inset);
  isolation:isolate;
}
.glass::after{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: radial-gradient(240px circle at var(--x,50%) var(--y,0%),
              rgba(255,255,255,.55), rgba(255,255,255,0) 68%);
  opacity:0;
  transition:opacity .6s ease;
  z-index:2;
}
.glass.lit::after{ opacity:1; }

.kaca-ringan{
  background:linear-gradient(150deg, rgba(255,255,255,.66), rgba(255,255,255,.34));
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-sedang);
  box-shadow: var(--bayang-2), inset 0 1px 0 rgba(255,255,255,.85);
}


.liquid{
  -webkit-backdrop-filter: blur(6px) saturate(1.6);
  backdrop-filter: blur(6px) saturate(1.6) url(#liquidFilter);
}

/* ============================================================
   4. LATAR BELAKANG
   ============================================================ */
.bg{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.aurora{ position:absolute; inset:0; }
.aurora-preset{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; }
.aurora-preset.active{ opacity:1; }

.aurora span{
  position:absolute;
  display:block;
  width:70vmax; height:70vmax;
  border-radius:50%;
  opacity:.30;
  will-change:transform;
}

/* preset per tab */
.aurora-preset[data-tab="beranda"] .a1{ left:-22vmax; top:-24vmax; background:radial-gradient(circle, rgba(47,155,244,.75), transparent 70%); }
.aurora-preset[data-tab="beranda"] .a2{ right:-26vmax; top:-16vmax; background:radial-gradient(circle, rgba(255,210,63,.72), transparent 70%); }
.aurora-preset[data-tab="beranda"] .a3{ left:16vmax; bottom:-32vmax; background:radial-gradient(circle, rgba(63,184,113,.62), transparent 70%); }

.aurora-preset[data-tab="aspirasi"] .a1{ left:-18vmax; top:-28vmax; background:radial-gradient(circle, rgba(255,210,63,.8), transparent 70%); }
.aurora-preset[data-tab="aspirasi"] .a2{ right:-30vmax; top:-10vmax; background:radial-gradient(circle, rgba(47,155,244,.7), transparent 70%); }
.aurora-preset[data-tab="aspirasi"] .a3{ left:22vmax; bottom:-30vmax; background:radial-gradient(circle, rgba(255,210,63,.55), transparent 70%); }

.aurora-preset[data-tab="event"] .a1{ left:-24vmax; top:-22vmax; background:radial-gradient(circle, rgba(63,184,113,.8), transparent 70%); }
.aurora-preset[data-tab="event"] .a2{ right:-22vmax; top:-14vmax; background:radial-gradient(circle, rgba(47,155,244,.6), transparent 70%); }
.aurora-preset[data-tab="event"] .a3{ left:10vmax; bottom:-28vmax; background:radial-gradient(circle, rgba(63,184,113,.6), transparent 70%); }

.aurora-preset[data-tab="tentang"] .a1{ left:-22vmax; top:-24vmax; background:radial-gradient(circle, rgba(31,58,61,.7), transparent 70%); }
.aurora-preset[data-tab="tentang"] .a2{ right:-24vmax; top:-18vmax; background:radial-gradient(circle, rgba(240,138,114,.6), transparent 70%); }
.aurora-preset[data-tab="tentang"] .a3{ left:18vmax; bottom:-30vmax; background:radial-gradient(circle, rgba(31,58,61,.5), transparent 70%); }

.doodles{ position:absolute; inset:0; }
.doodles .dw{
  position:absolute;
  will-change:transform;
  color:var(--navy);
  opacity:.16;
}

.doodles .dw svg{ display:block; width:100%; height:100%; }
.doodles .dw[data-layer="0"]{ opacity:.12; }
.doodles .dw[data-layer="1"]{ opacity:.16; }
.doodles .dw[data-layer="2"]{ opacity:.19; }

/* ============================================================
   5. INTRO
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(900px 600px at 50% 30%, rgba(47,155,244,.55), transparent 65%),
    radial-gradient(700px 500px at 80% 90%, rgba(255,210,63,.4), transparent 65%),
    #0E2230;
  cursor:pointer;
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.intro.out{ opacity:0; transform:scale(1.06); pointer-events:none; }

.intro-inner{ text-align:center; color:#fff; max-width:520px; }

.intro-logo{
  width:112px; height:112px; object-fit:contain;
  margin-bottom:22px;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.4));
  animation:mengapung 4.4s ease-in-out infinite;
}
@keyframes mengapung{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-10px) }
}
.intro h1{
  font-size:clamp(22px, 5.6vw, 34px);
  line-height:1.25;
  text-shadow:0 3px 16px rgba(0,0,0,.35);
}
.intro-hint{
  margin-top:26px;
  font-size:15px;
  letter-spacing:.04em;
  color:rgba(255,255,255,.86);
  animation:kedip 2.2s ease-in-out infinite;
}
@keyframes kedip{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }

.intro-ring{
  width:44px; height:44px; margin:26px auto 0;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  display:grid; place-items:center;
  animation:denyut 2.2s ease-in-out infinite;
}
@keyframes denyut{
  0%,100%{ transform:scale(1); border-color:rgba(255,255,255,.35) }
  50%{ transform:scale(1.14); border-color:rgba(255,255,255,.8) }
}

/* ============================================================
   6. NAVIGASI
   ============================================================ */
.tabnav{
  position:fixed;
  z-index:80;
  top:16px; left:50%;
  transform:translateX(-50%);
  display:flex; gap:2px;
  padding:6px;
  border-radius:var(--r-pill);
  background:linear-gradient(145deg, rgba(255,255,255,.6), rgba(255,255,255,.2));
  border:1px solid var(--kaca-border);
  box-shadow:var(--bayang-1), var(--bayang-2), var(--kaca-inset);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
  max-width:calc(100vw - 24px);
}


.tabnav .tab-indicator{
  position:absolute;
  top:6px; left:0;
  height:calc(100% - 12px);
  border-radius:var(--r-pill);
  background:linear-gradient(150deg, rgba(255,255,255,.95), rgba(255,255,255,.55));
  box-shadow:0 5px 16px rgba(30,127,209,.22), inset 0 1px 0 #fff;
  transition:transform .46s cubic-bezier(.22,1.35,.36,1), width .46s cubic-bezier(.22,1.35,.36,1);
  z-index:0;
  pointer-events:none;
}


.tabnav .tab{
  position:relative;
  z-index:1;
  border:0; background:transparent;
  padding:11px 18px;
  min-height:44px;
  border-radius:var(--r-pill);
  font-weight:600;
  font-size:14.5px;
  color:var(--teks-lembut);
  cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  transition:color .3s ease, transform .3s ease;
  white-space:nowrap;
}
.tabnav .tab[aria-selected="true"]{ color:var(--navy); }

.tabnav .tab .tab-ico{ font-size:15px; line-height:1; }

.tabnav .tab.locked{ color:var(--teks-samar); cursor:not-allowed; }
.tabnav .tab.locked .tab-ico{ opacity:.55; }

.tabnav .tab.shake{ animation:getar .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes getar{
  10%,90%{ transform:translateX(-2px) }
  20%,80%{ transform:translateX(4px) }
  30%,50%,70%{ transform:translateX(-6px) }
  40%,60%{ transform:translateX(6px) }
}

.tabnav .tab .lock-float{
  position:absolute;
  left:50%; top:-6px;
  transform:translateX(-50%);
  font-size:18px;
  opacity:0;
  pointer-events:none;
}
.tabnav .tab .lock-float.play{ animation:gembok 1.1s ease forwards; }
@keyframes gembok{
  0%{ opacity:0; transform:translate(-50%,8px) scale(.7) }
  30%{ opacity:1; transform:translate(-50%,-6px) scale(1.1) }
  70%{ opacity:1; transform:translate(-50%,-8px) scale(1) }
  100%{ opacity:0; transform:translate(-50%,-20px) scale(.9) }
}

.tabnav .tab.unlocked-now{ animation:nyala .7s ease; }
@keyframes nyala{
  0%{ transform:scale(1) }
  40%{ transform:scale(1.14); color:var(--biru-2) }
  100%{ transform:scale(1) }
}

@media (max-width: 760px){
  .tabnav{
    top:auto;
    bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    width:calc(100vw - 24px);
    max-width:460px;
    justify-content:space-between;
    padding:7px;
  }
  .tabnav .tab{
    flex:1 1 0;
    flex-direction:column;
    gap:3px;
    padding:8px 4px;
    font-size:11px;
    min-width:0;
  }
  .tabnav .tab .tab-ico{ font-size:19px; }
  .tabnav .tab .tab-lbl{ font-size:10.5px; letter-spacing:.01em; }
}

/* ============================================================
   7. LAYOUT
   ============================================================ */
#app{
  position:relative;
  z-index:1;
  max-width:1080px;
  margin:0 auto;
  padding:0 18px;
  padding-top:96px;
  padding-bottom:40px;
}
@media (max-width:760px){
  #app{ padding-top:26px; padding-bottom:calc(var(--dock-h) + 42px); }
}

.stage{ position:relative; }
.stage.animating{ overflow:hidden; transition:height .36s cubic-bezier(.4,0,.2,1); }

.panel{ display:block; }
.panel[hidden]{ display:none; }

.panel.leaving{ animation:keluar .25s cubic-bezier(.4,0,1,1) forwards; }
@keyframes keluar{
  to{ opacity:0; transform:translateX(calc(var(--dir,1) * -18px)) scale(.985); }
}
.panel.entering > *{
  animation:masuk .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes masuk{
  from{ opacity:0; transform:translateY(14px) }
  to{ opacity:1; transform:translateY(0) }
}

.progress{
  position:fixed; left:0; top:0; height:3px; width:100%;
  transform-origin:0 50%;
  transform:scaleX(0);
  background:linear-gradient(90deg, var(--biru-1), var(--kuning), var(--hijau));
  z-index:120;
  pointer-events:none;
  opacity:.9;
}

/* ============================================================
   8. BERANDA
   ============================================================ */
.hero{ text-align:center; padding:6px 0 20px; }

.logos{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(18px, 6vw, 52px);
  margin-bottom:22px;
}
.logos img{
  width:clamp(62px, 15vw, 88px);
  height:clamp(62px, 15vw, 88px);
  object-fit:contain;
  filter:drop-shadow(0 8px 20px rgba(18,62,96,.2));
  animation:masuk .6s cubic-bezier(.22,1,.36,1) both;
}
.logos img:last-child{ animation-delay:.08s; }

.hero-title{
  font-size:clamp(21px, 5.2vw, 40px);
  line-height:1.16;
  text-transform:uppercase;
  color:var(--navy);
  text-shadow:0 2px 0 rgba(255,255,255,.6);
  max-width:820px;
  margin:0 auto;
}


.hero-sub{
  margin:14px auto 0;
  max-width:520px;
  color:var(--teks-lembut);
  font-size:clamp(14.5px, 3.6vw, 17px);
  line-height:1.6;
}

.lanyard{
  position:relative;
  margin:44px auto 8px;
  width:min(300px, 78vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  touch-action:pan-y;
  transform-origin:50% 0;
  will-change:transform;
}
.lanyard-string{
  width:5px; height:88px;
  background:linear-gradient(180deg, rgba(31,58,61,.35), rgba(31,58,61,.75));
  box-shadow:0 2px 6px rgba(31,58,61,.2);
  border-radius:3px;
}

.idcard{
  width:100%;
  padding:26px 22px 22px;
  border-radius:26px;
  text-align:center;
  cursor:grab;
  touch-action:none;
  background:linear-gradient(150deg, rgba(255,255,255,.62), rgba(255,255,255,.22));
}
.idcard:active{ cursor:grabbing; }

.idcard::before{
  content:'';
  position:absolute; left:50%; top:-11px;
  width:64px; height:22px;
  transform:translateX(-50%);
  border-radius:8px;
  background:linear-gradient(150deg, rgba(255,255,255,.85), rgba(255,255,255,.4));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.idcard-logo{
  width:76px; height:76px; object-fit:contain;
  margin-bottom:12px;
}
.idcard-text{
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size:20px;
  color:var(--navy);
  margin:0;
}

.idcard-sub{
  margin:8px 0 0;
  font-size:12.5px;
  color:var(--teks-samar);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.stats{
  display:flex; justify-content:center; gap:clamp(26px, 10vw, 78px);
  margin:52px 0 10px;
  flex-wrap:wrap;
}
.stat{ display:flex; flex-direction:column; align-items:center; min-width:110px; }
.stat-num{
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size:clamp(38px, 11vw, 62px);
  line-height:1;
  color:var(--biru-2);
  font-variant-numeric:tabular-nums;
}
.stat:nth-child(2) .stat-num{ color:var(--hijau); }
.stat-label{
  margin-top:6px;
  font-size:13px;
  color:var(--teks-lembut);
  letter-spacing:.02em;
}

/* ============================================================
   9. SEGMENTED CONTROL
   ============================================================ */
.segmented{
  position:relative;
  display:inline-flex;
  padding:5px;
  border-radius:var(--r-pill);
  gap:2px;
  margin-bottom:20px;
  background:linear-gradient(145deg, rgba(255,255,255,.6), rgba(255,255,255,.22));
  border:1px solid var(--kaca-border);
  box-shadow:var(--bayang-2), var(--kaca-inset);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6);
}

.segmented .seg-indicator{
  position:absolute; top:5px; left:0;
  height:calc(100% - 10px);
  border-radius:var(--r-pill);
  background:linear-gradient(150deg, rgba(255,255,255,.95), rgba(255,255,255,.6));
  box-shadow:0 4px 14px rgba(30,127,209,.2), inset 0 1px 0 #fff;
  transition:transform .42s cubic-bezier(.22,1.3,.36,1), width .42s cubic-bezier(.22,1.3,.36,1);
  z-index:0; pointer-events:none;
}

.segmented button{
  position:relative; z-index:1;
  border:0; background:transparent;
  padding:11px 22px; min-height:44px;
  border-radius:var(--r-pill);
  font-weight:600; font-size:14.5px;
  color:var(--teks-lembut);
  cursor:pointer;
  transition:color .3s ease;
}
.segmented button[aria-selected="true"]{ color:var(--navy); }


/* ============================================================
   10. FORM & TOMBOL
   ============================================================ */
.panel-judul{
  font-size:clamp(20px, 4.6vw, 26px);
  color:var(--navy);
  margin-bottom:6px;
}


.panel-desk{
  color:var(--teks-lembut);
  font-size:14.5px;
  line-height:1.6;
  margin:0 0 22px;
}

.form-kaca{ padding:22px; border-radius:var(--r-besar); }

textarea{
  width:100%;
  min-height:158px;
  resize:vertical;
  padding:16px 17px;
  border-radius:18px;
  border:1px solid var(--kaca-border);
  background:rgba(255,255,255,.6);
  color:var(--teks);
  font:inherit;
  font-size:15.5px;
  line-height:1.6;
  transition:border-color .25s ease, box-shadow .25s ease;
}

textarea:focus{
  outline:none;
  border-color:var(--biru-1);
  box-shadow:0 0 0 4px rgba(47,155,244,.18);
}

.form-baris{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:12px; flex-wrap:wrap;
}
.penghitung{
  font-size:13px;
  color:var(--teks-samar);
  font-variant-numeric:tabular-nums;
}
.penghitung.hampir{ color:#C2791C; font-weight:600; }

.catatan-anonim{
  margin:16px 0 0;
  font-size:13px;
  color:var(--teks-lembut);
  background:rgba(63,184,113,.12);
  border:1px solid rgba(63,184,113,.3);
  padding:11px 14px;
  border-radius:14px;
  line-height:1.5;
}

.tombol{
  position:relative;
  overflow:hidden;
  border:0;
  border-radius:var(--r-pill);
  padding:14px 26px;
  min-height:48px;
  font-weight:700;
  font-size:15px;
  font-family:'Fredoka', sans-serif;
  cursor:pointer;
  background:linear-gradient(150deg, #FFDE6E, var(--kuning));
  color:#3A2A00;
  box-shadow:0 8px 20px rgba(214,166,20,.35), inset 0 1px 0 rgba(255,255,255,.75);
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, opacity .2s ease;
  will-change:transform;
}
.tombol:active{ transform:translateY(2px) scale(.985); box-shadow:0 3px 10px rgba(214,166,20,.3); }
.tombol[disabled]{ opacity:.6; cursor:progress; transform:none; }
@media (hover:hover){
  .tombol:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(214,166,20,.42), inset 0 1px 0 rgba(255,255,255,.75); }
}

.tombol.biru{
  background:linear-gradient(150deg, var(--biru-1), var(--biru-2));
  color:#fff;
  box-shadow:0 8px 20px rgba(30,127,209,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.tombol.netral{
  background:linear-gradient(150deg, rgba(255,255,255,.8), rgba(255,255,255,.5));
  color:var(--navy);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--bayang-2), inset 0 1px 0 #fff;
}

.tombol.kecil{ padding:9px 16px; min-height:40px; font-size:13.5px; }

.tombol .glow{
  position:absolute; inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),
              rgba(255,255,255,.85), rgba(255,255,255,0) 62%);
  opacity:0;
  transform:scale(.4);
  transition:opacity .6s ease, transform .6s ease;
}
.tombol.glow-on .glow{ opacity:.9; transform:scale(2.2); transition:opacity .35s ease, transform .35s ease; }

/* ============================================================
   11. DAFTAR & KARTU
   ============================================================ */
.list-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:14px; flex-wrap:wrap;
}
.list-hitung{ font-size:13.5px; color:var(--teks-samar); }

.list{ display:flex; flex-direction:column; gap:14px; }

.card{
  padding:18px 18px 14px;
  border-radius:var(--r-sedang);
  background:linear-gradient(150deg, rgba(255,255,255,.68), rgba(255,255,255,.4));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:var(--bayang-2), inset 0 1px 0 rgba(255,255,255,.85);
}

.card.reveal{ animation:masuk .5s cubic-bezier(.22,1,.36,1) both; }
.card.reveal:nth-child(1){ animation-delay:0s }
.card.reveal:nth-child(2){ animation-delay:.06s }
.card.reveal:nth-child(3){ animation-delay:.12s }
.card.reveal:nth-child(n+4){ animation-delay:.16s }

.card-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px; flex-wrap:wrap;
}
.card-date{ font-size:12.5px; color:var(--teks-samar); font-variant-numeric:tabular-nums; }

.card-isi{
  margin:0 0 14px;
  font-size:15.4px;
  line-height:1.62;
  color:var(--teks);
  white-space:pre-wrap;
  word-break:break-word;
}

.card-foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 13px;
  border-radius:var(--r-pill);
  font-size:12px; font-weight:700;
  letter-spacing:.02em;
  border:1px solid transparent;
}
.pill-hold{ background:rgba(255,210,63,.34); border-color:rgba(214,166,20,.35); color:#7A5A00; }
.pill-diproses{ background:rgba(47,155,244,.24); border-color:rgba(30,127,209,.32); color:#14588F; }
.pill-selesai{ background:rgba(63,184,113,.24); border-color:rgba(63,184,113,.4); color:#1D6E43; }
.pill-ditolak{ background:rgba(190,90,80,.2); border-color:rgba(190,90,80,.35); color:#8B3A32; }
.pill-open{ background:rgba(63,184,113,.24); border-color:rgba(63,184,113,.4); color:#1D6E43; }
.pill-locked{ background:rgba(120,130,140,.2); border-color:rgba(120,130,140,.3); color:#4E5A60; }


.vote-btn{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid rgba(30,127,209,.3);
  background:rgba(47,155,244,.14);
  color:var(--biru-2);
  border-radius:var(--r-pill);
  padding:9px 16px;
  min-height:44px;
  font-weight:700; font-size:14px;
  cursor:pointer;
  transition:transform .18s cubic-bezier(.22,1,.36,1), background .25s ease, color .25s ease;
}
.vote-btn:active{ transform:scale(.94); }
.vote-btn.voted{
  background:linear-gradient(150deg, var(--biru-1), var(--biru-2));
  color:#fff;
  border-color:transparent;
}
.vote-num{ font-variant-numeric:tabular-nums; display:inline-block; }
.vote-num.bump{ animation:bump .38s cubic-bezier(.22,1.4,.4,1); }
@keyframes bump{
  0%{ transform:scale(1) } 45%{ transform:scale(1.4) } 100%{ transform:scale(1) }
}

.status-select{
  border-radius:12px;
  border:1px solid var(--kaca-border);
  background:rgba(255,255,255,.75);
  color:var(--navy);
  padding:9px 12px;
  min-height:44px;
  font-size:13.5px; font-weight:600;
  cursor:pointer;
}


.admin-baris{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:12px; padding-top:12px;
  border-top:1px dashed rgba(120,150,160,.35);
}

.kosong{
  padding:38px 22px;
  text-align:center;
  border-radius:var(--r-sedang);
  border:1.5px dashed rgba(120,150,160,.42);
  color:var(--teks-lembut);
  font-size:14.6px;
  line-height:1.6;
}

.sk{
  border-radius:var(--r-sedang);
  height:118px;
  background:linear-gradient(100deg, rgba(255,255,255,.42) 30%, rgba(255,255,255,.78) 50%, rgba(255,255,255,.42) 70%);
  background-size:220% 100%;
  animation:shimmer 1.4s linear infinite;
  border:1px solid rgba(255,255,255,.6);
}

@keyframes shimmer{ from{ background-position:120% 0 } to{ background-position:-120% 0 } }

.offline-bar{
  display:none;
  align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
  padding:11px 16px;
  margin-bottom:16px;
  border-radius:16px;
  background:rgba(255,210,63,.24);
  border:1px solid rgba(214,166,20,.4);
  color:#6B4E00;
  font-size:13.5px;
  font-weight:600;
}
.offline-bar.tampil{ display:flex; }


/* ============================================================
   12. EVENT
   ============================================================ */
.event-list{ display:flex; flex-direction:column; gap:16px; }

.event-card{ padding:20px; border-radius:var(--r-besar); }

.event-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.event-nama{
  font-size:19px;
  color:var(--navy);
  word-break:break-word;
}


.event-toggle{
  border:1px solid rgba(30,127,209,.28);
  background:rgba(47,155,244,.12);
  color:var(--biru-2);
  border-radius:var(--r-pill);
  padding:9px 16px; min-height:42px;
  font-weight:600; font-size:13.5px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
}
.event-body{ overflow:hidden; }
.event-body[hidden]{ display:none; }
.event-body.anim{ animation:masuk .35s cubic-bezier(.22,1,.36,1) both; }

.event-form{ margin-top:16px; }
.event-form textarea{ min-height:110px; }

.event-locked-note{
  margin-top:16px;
  padding:12px 15px;
  border-radius:14px;
  background:rgba(120,130,140,.14);
  border:1px solid rgba(120,130,140,.26);
  color:var(--teks-lembut);
  font-size:13.5px;
  line-height:1.55;
}

.inline-rename{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin-top:12px;
}
.inline-rename input{
  flex:1 1 180px;
  padding:11px 14px;
  min-height:44px;
  border-radius:12px;
  border:1px solid var(--kaca-border);
  background:rgba(255,255,255,.7);
  color:var(--teks);
  font:inherit;
  font-size:14.5px;
}


/* ============================================================
   13. TENTANG
   ============================================================ */
.langkah{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px 22px;
  align-items:start;
  padding:22px 0;
  border-bottom:1px solid rgba(120,150,160,.2);
}
.langkah:last-of-type{ border-bottom:0; }
.langkah-ikon{
  width:76px; height:76px;
  flex:none;
  color:var(--biru-2);
  opacity:.9;
}
.langkah-ikon svg{ width:100%; height:100%; }
.langkah h3{
  font-size:18px;
  color:var(--navy);
  margin-bottom:6px;
  display:flex; align-items:center; gap:10px;
}

.langkah-num{
  display:inline-grid; place-items:center;
  width:26px; height:26px;
  border-radius:50%;
  background:linear-gradient(150deg, var(--biru-1), var(--biru-2));
  color:#fff; font-size:13px; font-weight:700;
  flex:none;
}
.langkah p{ margin:0; color:var(--teks-lembut); font-size:14.6px; line-height:1.65; }

.status-arti{
  margin-top:26px;
  padding:22px;
  border-radius:var(--r-besar);
}
.status-arti h3{ font-size:17px; color:var(--navy); margin-bottom:14px; }

.status-baris{
  display:flex; gap:12px; align-items:flex-start;
  padding:11px 0;
  border-bottom:1px dashed rgba(120,150,160,.25);
}
.status-baris:last-child{ border-bottom:0; }
.status-baris .pill{ flex:none; }
.status-baris p{ margin:0; font-size:14px; line-height:1.55; color:var(--teks-lembut); }

.anon-box{
  margin-top:22px;
  padding:20px 22px;
  border-radius:var(--r-besar);
  background:linear-gradient(150deg, rgba(47,155,244,.14), rgba(63,184,113,.12));
  border:1px solid rgba(47,155,244,.22);
}
.anon-box h3{ font-size:17px; color:var(--navy); margin-bottom:10px; }
.anon-box p{ margin:0; color:var(--teks-lembut); font-size:14.5px; line-height:1.65; }


/* ============================================================
   14. TOMBOL SETTINGS & MODAL
   ============================================================ */
.settings-btn{
  position:fixed;
  right:20px; bottom:20px;
  z-index:90;
  width:56px; height:56px;
  border-radius:50%;
  border:1px solid var(--kaca-border);
  background:linear-gradient(150deg, rgba(255,255,255,.7), rgba(255,255,255,.35));
  box-shadow:var(--bayang-1), var(--bayang-2), var(--kaca-inset);
  -webkit-backdrop-filter:blur(16px) saturate(1.7);
  backdrop-filter:blur(16px) saturate(1.7);
  font-size:24px;
  cursor:pointer;
  display:grid; place-items:center;
  transition:transform .2s cubic-bezier(.22,1,.36,1), background .3s ease, color .3s ease;
}

.settings-btn:active{ transform:scale(.9); }
.settings-btn.admin{
  background:linear-gradient(150deg, var(--navy), #2A5054);
  color:#fff;
}
@media (max-width:760px){
  .settings-btn{
    right:18px;
    bottom:calc(var(--dock-h) + 26px + env(safe-area-inset-bottom, 0px));
  }
}

.modal-back{
  position:fixed; inset:0;
  z-index:200;
  background:rgba(10,25,35,.4);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  display:grid;
  place-items:center;
  padding:20px;
  animation:modalIn .28s ease both;
}
.modal-back[hidden]{ display:none; }
@keyframes modalIn{ from{ opacity:0 } to{ opacity:1 } }
.modal{
  width:100%;
  max-width:440px;
  max-height:88vh;
  overflow:auto;
  padding:26px 22px;
  border-radius:var(--r-besar);
  animation:modalPop .4s cubic-bezier(.22,1.3,.36,1) both;
}
@keyframes modalPop{
  from{ opacity:0; transform:translateY(20px) scale(.94) }
  to{ opacity:1; transform:translateY(0) scale(1) }
}
.modal h2{ font-size:20px; margin-bottom:4px; color:var(--navy); }

.modal p.ket{ color:var(--teks-lembut); font-size:13.5px; margin:0 0 18px; line-height:1.55; }

.setting-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid rgba(120,150,160,.2);
}
.setting-row:last-of-type{ border-bottom:0; }
.setting-row .sr-label{ font-weight:600; font-size:14.5px; }
.setting-row .sr-desc{ font-size:12.5px; color:var(--teks-samar); margin-top:3px; }

.toggle{
  position:relative; flex:none;
  width:50px; height:30px;
  border-radius:15px;
  border:1px solid var(--kaca-border);
  background:rgba(150,170,180,.35);
  cursor:pointer;
  transition:background .3s ease;
}
.toggle::after{
  content:'';
  position:absolute; left:3px; top:50%;
  width:22px; height:22px;
  border-radius:50%;
  background:#fff;
  transform:translateY(-50%);
  transition:transform .3s cubic-bezier(.22,1.3,.36,1);
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.toggle.on{ background:var(--biru-1); }
.toggle.on::after{ transform:translate(20px, -50%); }

.modal input[type=password]{
  width:100%;
  padding:14px 16px;
  min-height:48px;
  border-radius:14px;
  border:1px solid var(--kaca-border);
  background:rgba(255,255,255,.7);
  color:var(--teks);
  font:inherit;
  font-size:15px;
  margin-bottom:16px;
}


.modal-actions{
  display:flex; gap:10px; justify-content:flex-end;
  margin-top:20px;
  flex-wrap:wrap;
}

/* ============================================================
   15. TOAST & CONFETTI
   ============================================================ */
.toast-wrap{
  position:fixed;
  left:50%; bottom:96px;
  transform:translateX(-50%);
  z-index:300;
  display:flex; flex-direction:column; gap:10px;
  align-items:center;
  pointer-events:none;
  max-width:calc(100vw - 32px);
}
@media (max-width:760px){
  .toast-wrap{ bottom:calc(var(--dock-h) + 28px + env(safe-area-inset-bottom, 0px)); }
}
.toast{
  padding:13px 20px;
  border-radius:var(--r-pill);
  background:linear-gradient(150deg, rgba(255,255,255,.82), rgba(255,255,255,.5));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 12px 30px rgba(18,62,96,.22), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(18px) saturate(1.7);
  backdrop-filter:blur(18px) saturate(1.7);
  font-size:14px;
  font-weight:600;
  color:var(--navy);
  max-width:440px;
  line-height:1.4;
  text-align:center;
  pointer-events:auto;
  animation:toastIn .38s cubic-bezier(.22,1.3,.36,1) both;
}

.toast.out{ animation:toastOut .35s ease forwards; }
.toast.err{ border-color:rgba(190,90,80,.55); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) scale(.94) } to{ opacity:1; transform:translateY(0) scale(1) } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(-8px) scale(.96) } }

.confetti{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:250;
  display:none;
}
.confetti.on{ display:block; }

/* ============================================================
   16. REDUCED MOTION & LITE
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

body.lite .glass{
  -webkit-backdrop-filter:blur(8px) saturate(1.4);
  backdrop-filter:blur(8px) saturate(1.4);
}
body.lite .tabnav,
body.lite .modal{
  -webkit-backdrop-filter:blur(8px) saturate(1.4);
  backdrop-filter:blur(8px) saturate(1.4);
}
body.lite .liquid{
  -webkit-backdrop-filter:blur(6px) saturate(1.5);
  backdrop-filter:blur(6px) saturate(1.5);
}
/* Logo: latar putih JPEG melebur ke krem */
.logos img,.idcard-logo{ mix-blend-mode:multiply; background:transparent; }