/* PAWTROPOLITAN website v2 (Dex, 4 Nov 2026). HP dulu, lalu laptop. Palet & ukuran dari PANDUAN-GAYA v1 (Akiko).
   Font disimpan sendiri (OFL): Baloo 2 = judul/tombol/angka, Plus Jakarta Sans = isi. Tanpa Google Fonts, tanpa pelacak. */
@font-face { font-family: "Baloo 2"; src: url("fonts/baloo2-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  /* warna gelap hangat di semua perangkat (Levin 4 Nov: "bikin kayak kemarin warnanya agak gelap") */
  --krem: #1F1815; --kartu: #2C221E; --halus: #3A2D27; --tinta: #F6EDE4; --redup: #C2B1A5; --garis: #4A3B34;
  --merah: #F27A64; --merah-tua: #F27A64; --merah-lembut: #45291F; --oren: #FFA94D; --hijau: #86CF74;
  --kuning: #C9581A; --emas: #F2B33D; --koran: #2C221E;
  --bar: rgba(31, 24, 21, .94); --bayang: rgba(0, 0, 0, .4);
  --f-judul: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-isi: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 20px; --nav-h: 64px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--krem); color: var(--tinta);
  font-family: var(--f-isi); font-size: 16px; font-weight: 500; line-height: 1.6;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--merah-tua); font-weight: 700; }
h1, h2, h3, h4 { font-family: var(--f-judul); font-weight: 800; line-height: 1.15; margin: 0 0 .4em; text-wrap: balance; }
h2 { font-size: 30px; color: var(--merah); }
h3 { font-size: 21px; }
p { margin: 0 0 .8em; }
:focus-visible { outline: 3px solid var(--oren); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.redup { color: var(--redup); }
.kecil { font-size: 14px; }
.sub { color: var(--redup); margin-bottom: 18px; }
.wadah { width: min(1120px, 100%); margin: 0 auto; padding: 0 18px; }
.bagian { padding-top: 44px; padding-bottom: 8px; }
.lewati { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--kartu); padding: 12px 16px; border-radius: 12px; }
.lewati:focus { left: 8px; }

/* ---------- tombol (min 48 px; 1 tombol merah per layar) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 20px;
  border: 0; border-radius: 16px; background: var(--kartu); color: var(--tinta); text-decoration: none; cursor: pointer;
  font: 800 18px/1.1 var(--f-judul); box-shadow: 0 4px 0 var(--garis); transition: transform .08s, box-shadow .08s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--garis); }
.btn.utama { background: #E8604C; color: #fff; box-shadow: 0 4px 0 #B8432F; min-height: 56px; font-size: 20px; }
.btn.utama:active { box-shadow: none; transform: translateY(4px); }
.btn.gelap { background: var(--tinta); color: var(--krem); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.btn.besar { font-size: 20px; padding: 12px 28px; }
.btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.btn[disabled] { opacity: .45; cursor: default; }
.tombol-baris { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 8px; }

/* ---------- bar atas ---------- */
.bar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 18px 8px; background: var(--bar);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--garis);
}
.logo { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; text-decoration: none; color: var(--tinta); font: 800 22px var(--f-judul); }
.logo-tapak { width: 26px; height: 26px; fill: var(--merah); }
.nav-atas { display: none; gap: 4px; }
.nav-atas a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 14px; color: var(--tinta); text-decoration: none; font: 700 17px var(--f-judul); }
.nav-atas a:hover, .nav-atas a.aktif { background: var(--halus); }
.nav-atas a.nav-kota { background: #E8604C; color: #fff; margin-left: 6px; }
.nav-atas a.nav-kota:hover { background: #B8432F; }

/* ---------- nav bawah (HP) ---------- */
.nav-bawah {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--bar); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--garis);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-bawah a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: var(--nav-h);
  color: var(--redup); text-decoration: none; font: 700 12.5px var(--f-judul); -webkit-tap-highlight-color: transparent;
}
.nav-bawah svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nav-bawah a.aktif { color: var(--merah); }
.nav-bawah a.aktif svg { stroke-width: 2.6; }

/* ---------- beranda ---------- */
/* HP: gambar kota utuh di atas, kartu kota naik menimpa sedikit (rasa diorama di atas meja) */
.hero { position: relative; }
.hero picture { display: block; overflow: hidden; background: #A5DB78; }
.hero picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 44% 58%; filter: contrast(1.1) saturate(1.15); }
.hero-isi {
  position: relative; z-index: 2; width: calc(100% - 32px); max-width: 560px; margin: -56px auto 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: center;
  padding: 20px 20px 24px; border-radius: 28px; background: var(--kartu); color: var(--tinta);
  border: 1px solid var(--garis); box-shadow: 0 6px 0 var(--garis), 0 18px 40px var(--bayang);
}
.sapa { margin: 0; font: 700 15px var(--f-judul); color: var(--redup); }
.hero h1 { margin: 0; font-size: clamp(38px, 11vw, 60px); color: var(--merah); letter-spacing: .3px; line-height: 1; }
.tagline { margin: 0; color: var(--redup); }
.populasi {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px auto 4px;
  padding: 8px 20px; border-radius: 999px; background: #1F1815; box-shadow: inset 0 0 0 1px #4A3B34; color: #fff;
}
.populasi b { font: 800 28px/1 var(--f-judul); color: #FFD27A; font-variant-numeric: tabular-nums; padding-top: 3px; }
.populasi-label { font: 700 13px/1 var(--f-judul); letter-spacing: 1.2px; }

.ringkas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
.kartu-kabar {
  min-width: 0;
  display: flex; align-items: center; gap: 14px; min-height: 80px; padding: 16px; border-radius: var(--r);
  background: var(--kartu); border: 1px solid var(--garis); box-shadow: 0 3px 0 var(--garis); color: var(--tinta); text-decoration: none; font-weight: 500;
}
.kartu-kabar b { display: block; font: 800 19px/1.25 var(--f-judul); }
.kartu-kabar .redup { font-size: 14px; }
.kecil-judul { display: block; font: 700 13px var(--f-judul); letter-spacing: .8px; text-transform: uppercase; color: var(--redup); }
.ikon { flex: none; width: 44px; height: 44px; padding: 9px; border-radius: 14px; background: var(--merah-lembut); fill: none; stroke: var(--merah); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.berita-utama .redup { color: var(--merah-tua); font-weight: 700; }
.baru-tiba-isi { min-width: 0; flex: 1; }
.pita { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pita-jalan { display: inline-flex; gap: 22px; white-space: nowrap; font: 800 17px var(--f-judul); animation: pita 40s linear infinite; padding-top: 2px; }
.pita-jalan span { display: inline-flex; align-items: center; gap: 6px; }
.pita-jalan img { width: 26px; height: 28px; object-fit: cover; object-position: 50% 15%; border-radius: 50%; background: var(--halus); }
@keyframes pita { to { transform: translateX(-50%); } }

/* ---------- cari KTPaw ---------- */
.form-cari { max-width: 640px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 20px; background: var(--kartu); border: 2px solid var(--garis); }
.form-cari:focus-within { border-color: var(--oren); }
.at { font: 800 22px var(--f-judul); color: var(--redup); }
.form-cari input { flex: 1; min-width: 0; min-height: 48px; border: 0; background: transparent; color: var(--tinta); font: 700 18px var(--f-isi); outline: none; }
.hasil { margin-top: 18px; }
.hasil img { width: 100%; max-width: 640px; border-radius: 18px; box-shadow: 0 8px 24px var(--bayang); }
.kotak-info { max-width: 640px; overflow-wrap: anywhere; display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 16px; border-radius: var(--r); background: var(--merah-lembut); border: 1px dashed var(--merah); }
.kotak-info img { flex: none; width: 72px; border-radius: 14px; background: var(--kartu); }
.kotak-info b { font: 800 19px/1.25 var(--f-judul); display: block; margin-bottom: 4px; }
.kotak-info p { margin: 0 0 6px; }

/* ---------- koran ---------- */
.koran { background: var(--koran); border-radius: 22px; border: 1px solid var(--garis); box-shadow: 0 6px 0 var(--garis); overflow: hidden; }
.koran-kepala { text-align: center; padding: 18px 18px 12px; border-bottom: 3px double var(--tinta); margin: 0 14px; }
.koran-edisi { display: flex; justify-content: space-between; gap: 10px; font: 700 13px var(--f-judul); letter-spacing: .6px; text-transform: uppercase; color: var(--redup); margin: 0; }
.koran-nama { font-size: clamp(30px, 8.5vw, 48px); color: var(--tinta); margin: 4px 0 0; letter-spacing: .5px; }
.koran-moto { margin: 0; font-size: 14px; color: var(--redup); font-style: italic; }
.koran-isi { display: grid; gap: 18px; padding: 18px; }
.koran-utama h3 { font-size: clamp(24px, 6.5vw, 34px); color: var(--merah); }
.koran-utama > p { font-size: 17px; }
.koran-berita { display: grid; gap: 12px; margin-top: 8px; }
.koran-berita article { padding-top: 12px; border-top: 1px solid var(--garis); }
.koran-berita h4 { font-size: 19px; margin-bottom: 4px; }
.koran-berita p { margin: 0; color: var(--tinta); }
.koran-samping { display: grid; gap: 12px; align-content: start; }
.rubrik { padding: 14px; border-radius: 16px; background: var(--halus); }
.rubrik h4 { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--merah-tua); margin-bottom: 4px; }
.rubrik h4 img { width: 40px; height: auto; }
.rubrik p { margin: 0; font-size: 15px; }
.rubrik.emas { background: color-mix(in srgb, var(--emas) 22%, var(--kartu)); }
.koran-angka { margin: 0; text-align: center; font: 700 14px var(--f-judul); color: var(--redup); }
.koran-kaki { display: flex; justify-content: space-between; gap: 10px; padding: 0 18px 18px; }
.koran-kaki[hidden] { display: none; }
.kecil-btn { font-size: 16px; padding: 8px 14px; }

/* ---------- pengumuman ---------- */
.pengumuman { display: grid; gap: 16px; }
.pengumuman > img { width: 100%; border-radius: var(--r); aspect-ratio: 3 / 2; object-fit: cover; }
.daftar-pengumuman { display: grid; gap: 12px; }
.gelembung { padding: 14px 16px; border-radius: 20px 20px 20px 6px; background: var(--kartu); border: 1px solid var(--garis); box-shadow: 0 3px 0 var(--garis); }
.gelembung header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.gelembung .dari { font: 800 15px var(--f-judul); color: var(--merah-tua); }
.gelembung small { color: var(--redup); font-size: 13px; }
.gelembung h3 { font-size: 19px; margin: 0 0 4px; }
.gelembung p { margin: 0; }
.label { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 800 12px/1.6 var(--f-judul); letter-spacing: .6px; text-transform: uppercase; background: var(--halus); color: var(--tinta); }
.label.penting { background: var(--oren); color: #3B2A25; }

/* ---------- radio ---------- */
.radio { padding: 18px; border-radius: 24px; background: var(--kartu); border: 1px solid var(--garis); box-shadow: 0 6px 0 var(--garis); }
.radio-kepala { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.radio-layar {
  position: relative; display: grid; gap: 2px; min-width: 170px; padding: 12px 16px; border-radius: 16px;
  background: #3B2A25; color: #FFD27A; font-family: var(--f-judul);
}
.radio-frek { font-weight: 800; font-size: 22px; letter-spacing: 2px; }
.radio-status { font-size: 14px; color: #F6EDE4; }
.radio-eq { display: flex; gap: 4px; align-items: flex-end; height: 18px; margin-top: 4px; }
.radio-eq i { width: 6px; height: 4px; border-radius: 3px; background: #7CC46A; }
.radio.main .radio-eq i { animation: eq .9s ease-in-out infinite alternate; }
.radio.main .radio-eq i:nth-child(2) { animation-delay: -.3s; } .radio.main .radio-eq i:nth-child(3) { animation-delay: -.6s; }
.radio.main .radio-eq i:nth-child(4) { animation-delay: -.15s; } .radio.main .radio-eq i:nth-child(5) { animation-delay: -.45s; }
@keyframes eq { from { height: 4px; } to { height: 18px; } }
.radio-teks h2 { margin: 0; }
.radio-teks p { margin: 0; }
.radio-kontrol { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.bulat-besar { min-height: 60px; padding: 10px 24px 10px 16px; border-radius: 999px; background: var(--oren); color: #3B2A25; box-shadow: 0 4px 0 #C9581A; }
.bulat-besar svg { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.volume { display: flex; align-items: center; gap: 10px; min-height: 48px; font: 700 15px var(--f-judul); color: var(--redup); }
.volume input { width: 160px; height: 48px; margin: 0; accent-color: var(--oren); }
.siaran { display: grid; gap: 10px; margin-bottom: 18px; }
.siaran details { border-radius: 16px; background: var(--halus); }
.siaran summary { display: flex; align-items: center; min-height: 52px; padding: 8px 16px; cursor: pointer; font: 800 17px var(--f-judul); list-style: none; }
.siaran summary::-webkit-details-marker { display: none; }
.siaran summary::before { content: ""; flex: none; width: 10px; height: 10px; margin-right: 12px; border-right: 3px solid var(--merah); border-bottom: 3px solid var(--merah); transform: rotate(-45deg); transition: transform .15s; }
.siaran details[open] summary::before { transform: rotate(45deg); }
.siaran p { margin: 0; padding: 0 16px 14px 38px; }
.lagu { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pilih-lagu { width: 100%; min-height: 56px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--garis); background: var(--kartu); color: var(--tinta); text-align: left; cursor: pointer; font: inherit; }
.pilih-lagu[aria-pressed="true"] { border-color: var(--merah); background: var(--merah-lembut); }
.pilih-lagu[aria-pressed="true"] span { color: var(--merah-tua); font-weight: 800; }
.lagu b { font-family: var(--f-judul); font-size: 17px; }
.lagu span { color: var(--redup); font-size: 14px; }

/* ---------- warga & klub ---------- */
.grid-warga { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.grid-warga button {
  width: 100%; min-height: 48px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 10px;
  border: 1px solid var(--garis); border-radius: 18px; background: var(--kartu); color: var(--tinta); cursor: pointer; font: inherit;
  box-shadow: 0 3px 0 var(--garis);
}
.grid-warga button:active { transform: translateY(2px); box-shadow: none; }
.grid-warga img { width: 84px; height: 84px; object-fit: contain; padding: 4px; border-radius: 14px; background: var(--halus); }
.grid-warga .u { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px var(--f-isi); }
.grid-warga .no { font: 800 12px var(--f-judul); color: var(--redup); }
.judul-klub { margin-top: 36px; }
.klub { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.klub li { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 18px; background: var(--kartu); border: 1px solid var(--garis); }
.klub img { width: 52px; height: 57px; object-fit: contain; border-radius: 12px; background: var(--halus); }
.klub .nama { font: 800 17px var(--f-judul); }
.klub .batang { height: 12px; border-radius: 999px; background: var(--halus); overflow: hidden; margin-top: 4px; }
.klub .batang span { display: block; height: 100%; border-radius: 999px; background: var(--hijau); min-width: 4px; }
.klub .angka { font: 800 22px var(--f-judul); font-variant-numeric: tabular-nums; }
.klub .kosong .angka { font-size: 14px; color: var(--redup); }
.klub .kosong .batang span { background: transparent; }

/* ---------- voting ---------- */
.voting { display: grid; gap: 10px; }
.vote { padding: 14px 16px; border-radius: 18px; background: var(--kartu); border: 1px solid var(--garis); }
.vote .atas { display: flex; justify-content: space-between; gap: 10px; font-family: var(--f-judul); font-size: 18px; }
.vote .ket { color: var(--redup); font-size: 15px; }
.vote .batang { height: 12px; border-radius: 999px; background: var(--halus); overflow: hidden; margin-top: 8px; }
.vote .batang span { display: block; height: 100%; background: var(--oren); border-radius: 999px; }

/* ---------- game segera hadir ---------- */
.game-sec { margin-top: 40px; padding-bottom: 36px; background: linear-gradient(180deg, #BFE3F7, #E9F5FC); color: #3B2A25; }
.game-sec h2 { color: #3B2A25; }
.game-sec .sub, .game-sec .redup { color: #5B4A42; }
.label-segera { display: inline-block; margin-bottom: 8px; padding: 4px 14px; border-radius: 999px; background: #3B2A25; color: #FFD27A; font: 800 14px var(--f-judul); letter-spacing: 1px; text-transform: uppercase; }
.game-grid { display: grid; gap: 14px; margin-bottom: 12px; }
.game-kartu { padding: 14px; border-radius: 22px; background: #fff; box-shadow: 0 5px 0 rgba(59,42,37,.12); }
.game-kartu h3 { margin-top: 12px; color: #E8604C; }
.game-kartu p { margin: 0; color: #3B2A25; }
.gudang { position: relative; height: 190px; border-radius: 16px; overflow: hidden; background: #E9B07A; }
.gudang-latar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.tikus { position: absolute; width: 92px; bottom: 18px; left: -100px; animation: lari 6s linear infinite; }
.tikus.t2 { width: 104px; bottom: 54px; animation-delay: -2s; animation-duration: 7.5s; }
.tikus.t3 { width: 84px; bottom: 96px; animation-delay: -4.2s; animation-duration: 5s; }
.keju { position: absolute; width: 46px; right: 16px; bottom: 16px; animation: goyang 1.6s ease-in-out infinite; }
@keyframes lari { to { left: calc(100% + 20px); } }
@keyframes goyang { 50% { transform: rotate(-8deg) translateY(-3px); } }
.pilih-sendiri { position: relative; height: 190px; border-radius: 16px; background: #FFF0D6; display: grid; place-items: center; overflow: hidden; }
.pilih-sendiri img { position: absolute; height: 170px; width: auto; bottom: 6px; opacity: 0; transform: scale(.9); transition: opacity .5s, transform .5s; }
.pilih-sendiri img.tampil { opacity: 1; transform: scale(1); }
.peta { height: 190px; border-radius: 16px; overflow: hidden; background: #A5DB78; }
.peta img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 55%; transform: scale(1.35); }
.salon { position: relative; height: 190px; border-radius: 16px; background: #F7CFE0; display: flex; align-items: center; justify-content: center; gap: 4px; }
.salon img { height: 150px; width: auto; }
.salon-panah { font: 800 34px var(--f-judul); color: #B8432F; }
.koin { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #F2B33D; color: #7A4A2E; font: 800 17px var(--f-judul); box-shadow: inset 0 -4px 0 rgba(122,74,46,.3); }

/* ---------- cara pindah & katalog ---------- */
.langkah { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 12px; }
.langkah li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--r); background: var(--kartu); border: 1px solid var(--garis); }
.langkah li > b { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--oren); color: #3B2A25; font: 800 22px var(--f-judul); }
.langkah h3 { font-size: 19px; margin-bottom: 2px; }
.langkah p { margin: 0; }
.contoh-komen, .komen code { font: 800 16px var(--f-isi); background: var(--halus); padding: 2px 8px; border-radius: 8px; }
.contoh-komen { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pilih-wrap h2 { margin-top: 10px; }
.pemilih { display: grid; gap: 18px; }
.pratinjau { padding: 16px; border-radius: 24px; background: var(--kartu); border: 1px solid var(--garis); text-align: center; align-self: start; }
.pratinjau img { width: 220px; margin: 0 auto; }
.pratinjau p { font: 800 19px var(--f-judul); margin: 6px 0 10px; }
.komen { display: grid; gap: 10px; }
.komen code { display: block; white-space: normal; padding: 12px; font-size: 17px; }
.langkah-pilih h3 { margin-top: 14px; font-size: 18px; }
.langkah-pilih small { color: var(--redup); font: 600 14px var(--f-isi); }
.grid-opsi { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.opsi {
  min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px;
  border-radius: 16px; border: 2px solid var(--garis); background: var(--kartu); color: var(--tinta); cursor: pointer; font: 700 14px/1.2 var(--f-isi);
}
.opsi.aktif { border-color: var(--merah); background: var(--merah-lembut); }
.opsi img { width: 64px; height: 70px; object-fit: contain; }
.jk { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jk .opsi { font: 800 17px var(--f-judul); }

/* ---------- footer ---------- */
.kaki { margin-top: 48px; padding: 28px 0 24px; background: #3B2A25; color: #F6EDE4; }
.kaki a { color: #FFD27A; }
.kaki-judul { font: 700 18px var(--f-judul); }
.sosial { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.sosial a { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; font-weight: 600; text-decoration: none; }
.kaki .kecil { color: #C2B1A5; }

/* ---------- laptop ---------- */
@media (min-width: 760px) {
  body { padding-bottom: 0; font-size: 17px; }
  .nav-bawah { display: none; }
  .nav-atas { display: flex; }
  h2 { font-size: 36px; }
  .bagian { padding-top: 64px; }
  .ringkas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1.25fr); margin-top: -44px; position: relative; z-index: 3; }
  .hero picture img { aspect-ratio: auto; height: min(78vh, 760px); min-height: 520px; object-position: 50% 55%; }
  .hero-isi { position: absolute; right: max(32px, calc((100vw - 1120px) / 2 + 18px)); top: 50%; transform: translateY(-58%); margin: 0; width: 480px; text-align: left; align-items: flex-start; padding: 28px; }
  .hero-isi .btn { align-self: stretch; }
  .populasi { margin-left: 0; }
  .koran-isi { grid-template-columns: 1.7fr 1fr; padding: 24px; gap: 28px; }
  .koran-berita { grid-template-columns: 1fr 1fr; }
  .pengumuman { grid-template-columns: 300px 1fr; align-items: start; gap: 20px; }
  .pengumuman > img { position: sticky; top: 88px; }
  .radio { padding: 28px; }
  .klub { grid-template-columns: 1fr 1fr; }
  .game-grid { grid-template-columns: repeat(2, 1fr); }
  .radio { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 0 40px; }
  .radio-kanan > h3:first-child { margin-top: 4px; }
  .langkah { grid-template-columns: repeat(3, 1fr); }
  .pemilih { grid-template-columns: 320px 1fr; }
  .pratinjau { position: sticky; top: 88px; }
  .sosial { grid-template-columns: repeat(3, max-content); gap: 8px 24px; }
}
@media (min-width: 760px) and (max-width: 1119px) {
  .hero picture img { object-position: 22% 55%; }   /* kartu lebih dekat ke tengah: geser kota supaya papan Pawlai Kota terlihat */
  .hero-isi { width: 380px; }
  .hero h1 { font-size: 46px; }
}
@media (min-width: 1100px) {
  .nav-atas a { padding: 0 16px; }
  .game-grid { grid-template-columns: repeat(4, 1fr); }
  .wadah { width: min(1240px, 100%); padding: 0 24px; }
  .hero-isi { right: max(32px, calc((100vw - 1240px) / 2 + 24px)); }
  .daftar-pengumuman { grid-template-columns: 1fr 1fr; }
  .koran-isi { grid-template-columns: 2.3fr 1fr; }
}
/* laptop: pita warna penuh selebar layar supaya halaman punya irama, KTPaw di tengah sebagai aksi utama */
@media (min-width: 760px) {
  #cari, #pengumuman, #warga, #pindah { position: relative; }
  #cari { margin-top: 48px; padding-top: 56px; padding-bottom: 60px; text-align: center; background: #33241B; box-shadow: 0 0 0 100vmax #33241B; clip-path: inset(0 -100vmax); }
  #cari .form-cari, #cari .hasil, #cari .kotak-info { margin-left: auto; margin-right: auto; }
  #cari .form-cari { background: var(--kartu); box-shadow: 0 5px 0 #4A3B34; }
  #cari .hasil img { margin: 0 auto; }
  #cari .tombol-baris { justify-content: center; }
  #cari .kotak-info { text-align: left; }
  #cari .sub, #cari .sub-paw { color: var(--redup); }
  #pengumuman { margin-top: 64px; padding-top: 56px; padding-bottom: 60px; background: #261D19; box-shadow: 0 0 0 100vmax #261D19; clip-path: inset(0 -100vmax); }
  #radio { padding-top: 64px; }
  #warga { margin-top: 64px; padding-top: 56px; padding-bottom: 60px; background: #1E2619; box-shadow: 0 0 0 100vmax #1E2619; clip-path: inset(0 -100vmax); }
  #warga .sub-paw, #warga .sub { color: var(--redup); }
  #warga .klub li, #warga .grid-warga button { border-color: #3B4A30; box-shadow: 0 3px 0 #3B4A30; }
  #warga .grid-warga img, #warga .klub img { background: #2C3524; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pita-jalan, .tikus, .keju, .radio.main .radio-eq i { animation: none !important; }
  .tikus.t1 { left: 20%; } .tikus.t2 { left: 50%; } .tikus.t3 { left: 30%; }
}

/* keterangan kecil di bawah judul nama paw (Levin 4 Nov: nama paw di menu & judul, tetap jelas) */
.sub-paw { margin: -6px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--redup); }
.koran-kepala .sub-paw, .radio-teks .sub-paw { margin-top: 2px; }
#voting-judul { margin: 4px 0 6px; font-size: 20px; }