/* Situs Tinyfair versi 5 (arah seni v3 + etalase toko, 19 Okt 2026; RISET-V5.md). Arah seni: situs/DESIGN.md bagian "Arah seni v3".
   Bingkai studio netral dingin (kertas #F3F5F8, tinta #10131A) supaya warna setiap aplikasi yang memimpin.
   Warna aplikasi masuk lewat --app, --on-app (teks di atas warna aplikasi), --aksen dan --aksen-gelap (ikon, centang). */
@font-face{font-family:"Mona Sans";font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;
  src:url(huruf/mona-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mona Sans";font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;
  src:url(huruf/mona-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Nama bahasa Jepang dan Korea di kaki halaman: subset kecil, hanya enam huruf itu. */
@font-face{font-family:"Tinyfair CJK";font-weight:500;font-display:swap;src:url(huruf/noto-jp-subset.woff2) format('woff2');unicode-range:U+65E5,U+672C,U+8A9E}
@font-face{font-family:"Tinyfair CJK";font-weight:500;font-display:swap;src:url(huruf/noto-kr-subset.woff2) format('woff2');unicode-range:U+D55C,U+AD6D,U+C5B4}

:root{
  --paper:#F3F5F8;--surface:#FFFFFF;--sunken:#E8ECF1;--text:#10131A;--muted:#515867;--line:#DCE1E8;--line-kuat:#C3CAD5;
  --band:#10131A;--band-text:#F3F5F8;--band-muted:#AEB5C2;--band-line:#2A303B;
  --focus:#10131A;--r-panel:28px;--r-kartu:20px;--r-kecil:12px;--wrap:1200px;--gut:clamp(16px,4vw,40px);
  --bayang:0 30px 60px -24px rgba(16,19,26,.45),0 12px 24px -12px rgba(16,19,26,.28);
  --aksen-kini:var(--aksen,var(--text));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --paper:#0C0F14;--surface:#151921;--sunken:#1C212B;--text:#EEF1F5;--muted:#A2AAB7;--line:#262C37;--line-kuat:#39404D;
  --band:#151921;--band-text:#EEF1F5;--band-muted:#A2AAB7;--band-line:#2C3340;--focus:#EEF1F5;color-scheme:dark}
  :root:not([data-theme=light]) .app{--aksen-kini:var(--aksen-gelap,var(--text))}}
:root[data-theme=dark]{
  --paper:#0C0F14;--surface:#151921;--sunken:#1C212B;--text:#EEF1F5;--muted:#A2AAB7;--line:#262C37;--line-kuat:#39404D;
  --band:#151921;--band-text:#EEF1F5;--band-muted:#A2AAB7;--band-line:#2C3340;--focus:#EEF1F5;color-scheme:dark}
:root[data-theme=dark] .app{--aksen-kini:var(--aksen-gelap,var(--text))}
.app{--aksen-kini:var(--aksen,var(--text))}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:"Mona Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-stretch:100%;font-weight:420;
  background:var(--paper);color:var(--text);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
.lewati{position:absolute;left:-999px;top:8px;background:var(--text);color:var(--paper);padding:10px 14px;border-radius:10px;z-index:10}
.lewati:focus{left:8px}
.sr,.sr-titik{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
/* Suara merek: Mona Sans lebar (wdth 112-118) dan tebal untuk judul, lebar normal untuk teks. */
h1,h2,h3{font-weight:760;font-stretch:112%;letter-spacing:-.012em;word-spacing:.06em;line-height:1.04;text-wrap:balance}
p{text-wrap:pretty}
.angka{font-variant-numeric:tabular-nums}

/* Kepala */
.kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:780;font-stretch:118%;font-size:21px;
  letter-spacing:-.01em;min-height:44px}
.tanda{width:28px;height:28px;flex:none}
.nav{display:flex;align-items:center;gap:2px}
.nav a{text-decoration:none;font-size:15.5px;font-weight:540;padding:10px 12px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.nav a:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}
.tema{width:44px;height:44px;border-radius:12px;border:1px solid var(--line-kuat);background:var(--surface);color:var(--text);
  display:grid;place-items:center;cursor:pointer;margin-left:4px}
.tema svg{width:20px;height:20px}
@media (max-width:720px){.nav .opsional{display:none}}

/* Lencana Google Play (gambar resmi berbingkai transparan; margin negatif agar sejajar dengan teks) */
.lencana{display:inline-flex;align-items:center;height:56px;flex:none}
.lencana img{height:56px;width:auto;max-width:none;margin:0 -7px}
.lencana-besar,.lencana-besar img{height:64px}
.lencana-kecil,.lencana-kecil img{height:46px}
.lencana-kecil img{margin:0 -5px}
.lencana-segera{gap:12px;background:#000;color:#fff;border:1px solid #A6A6A6;border-radius:10px;padding:0 18px 0 14px;line-height:1.05;height:52px}
.lencana-segera svg{width:26px;height:26px;flex:none}
.lencana-segera span{display:flex;flex-direction:column}
.lencana-segera small{font-size:12px;font-weight:500}
.lencana-segera b{font-size:20px;font-weight:650}
.cek{list-style:none;display:grid;gap:8px}
.cek li{display:flex;gap:10px;align-items:flex-start}
.cek svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--aksen-kini)}

/* Ponsel: satu-satunya benda yang diberi bayangan (benda yang memang berdiri di atas panel) */
.ponsel{border-radius:34px;background:#0A0C10;padding:7px;box-shadow:var(--bayang)}
.ponsel img{border-radius:27px;width:100%;aspect-ratio:1080/2340;object-fit:cover;object-position:top}
.ikon-app{border-radius:22%;flex:none}

/* Panel warna aplikasi: bidang membulat berisi ponsel. Cahaya putih lembut di belakang ponsel memisahkan ponsel dari
   bidang warna (kedalaman), bukan hiasan. */
.panel{position:relative;overflow:hidden;border-radius:var(--r-panel);background:var(--app);color:var(--on-app);isolation:isolate}
.panel::before{content:"";position:absolute;z-index:-1;width:120%;aspect-ratio:1;left:-10%;top:28%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.26),rgba(255,255,255,0))}
.panel :focus-visible{outline-color:var(--on-app)}
.panggung{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:0}
.panggung .ponsel{width:200px;border-radius:34px 34px 0 0;padding-bottom:0}
.panggung .ponsel img{border-radius:27px 27px 0 0}
.panggung .ponsel-belakang{display:none}

/* Beranda versi 5: lihat blok "Beranda v5" di akhir berkas. */
.judul-bagian{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.judul-bagian h2{font-size:clamp(22px,2.6vw,34px)}
.judul-bagian p{color:var(--muted);font-size:15px}
.bagian{padding:26px 0}

/* Janji merek: satu-satunya pita gelap di halaman terang */
.janji{background:var(--band);color:var(--band-text);border-radius:var(--r-panel);padding:24px 20px;margin:8px 0 32px}
.janji h2{font-size:clamp(26px,3vw,40px);margin-bottom:20px;max-width:14em}
.janji ul{list-style:none;display:grid;gap:14px}
.janji li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.janji p{color:var(--band-muted);font-size:15.5px;line-height:1.45}
.janji p b{display:block;color:var(--band-text);font-weight:680;font-size:17px;margin-bottom:2px}
.glif{width:40px;height:40px}
.glif .kiri{fill:var(--band-text)}
.glif .kanan{fill:none}
.glif .lingkar{fill:none;stroke:var(--band-text);stroke-width:2.5}
.glif .titik{fill:var(--band)}
.glif .titik2{fill:var(--band-text)}

/* ============ Halaman aplikasi ============ */
.app-hero{padding:8px 0 10px}
.app-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.app-nama{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.app-nama img{width:60px;height:60px;box-shadow:0 8px 20px -10px rgba(16,19,26,.5)}
.app-nama span{display:flex;flex-direction:column;line-height:1.2}
.app-nama b{font-size:20px;font-weight:720;font-stretch:108%}
.app-nama small{font-size:14.5px;color:var(--muted)}
.rating{font-size:15px;font-weight:560;margin:-6px 0 12px}
.app-hero h1{font-size:clamp(36px,8.8vw,74px);font-weight:790;font-stretch:110%;letter-spacing:-.016em;word-spacing:.08em;line-height:1.02;margin-bottom:16px}
.app-hero .kalimat{color:var(--muted);font-size:clamp(17px,1.5vw,20px);max-width:30em;margin-bottom:16px}
.app-hero .cek{font-size:16px;margin-bottom:20px}
.app-hero .panggung{height:250px;padding-top:26px}
.app-hero .panggung .ponsel{width:210px}

.bagian-app{padding:26px 0}
.judul-app{font-size:clamp(24px,2.8vw,36px);margin-bottom:16px}

/* Karusel tangkapan layar: scroll-snap CSS, digeser dengan jari */
.galeri{position:relative;min-width:0}
.galeri-jalur{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;
  margin:0 calc(var(--gut) * -1);padding:4px var(--gut) 12px;scroll-padding:0 var(--gut);scrollbar-width:thin;overscroll-behavior-x:contain}
.galeri-jalur li{flex:0 0 auto;width:clamp(168px,46vw,236px);scroll-snap-align:start}
.galeri-jalur img{width:100%;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.galeri-jalur figcaption{font-size:14px;margin-top:8px;color:var(--muted);line-height:1.3}
.galeri-tombol{display:none;gap:10px;margin-top:8px}
.galeri-tombol button{width:48px;height:48px;border-radius:12px;border:1px solid var(--line-kuat);background:var(--surface);color:var(--text);cursor:pointer;
  display:grid;place-items:center}
.galeri-tombol button:disabled{opacity:.4;cursor:default}
.galeri-tombol svg{width:20px;height:20px}
.galeri.tanpa-geser .galeri-tombol{display:none}

/* Fitur: ikon garis dan satu kalimat */
.fitur-ikon{list-style:none;display:grid;gap:18px}
.fitur-ikon li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.fitur-ikon .bulat{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--app) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--app) 26%,var(--line))}
.fitur-ikon .ikon{width:22px;height:22px;color:var(--aksen-kini)}
.fitur-ikon p{color:var(--muted);font-size:16px}
.fitur-ikon b{color:var(--text);font-weight:680}

/* Free vs Pro dalam satu kartu */
.kartu-banding{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-kartu);padding:18px 14px 8px}
.banding{width:100%;border-collapse:collapse;font-size:15.5px}
.banding caption{caption-side:top;text-align:left;color:var(--muted);font-size:15px;margin-bottom:12px;padding:0 4px}
.banding th,.banding td{padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.banding tr:last-child th,.banding tr:last-child td{border-bottom:0}
.banding thead th{font-size:15px;font-weight:700;text-align:center;border-bottom:1px solid var(--line-kuat)}
.banding tbody th{text-align:left;font-weight:500;padding-left:4px}
.banding td{text-align:center;width:24%;line-height:1.25;font-variant-numeric:tabular-nums}
.banding th:last-child,.banding td:last-child{background:color-mix(in srgb,var(--app) 10%,var(--surface));font-weight:650}
.banding thead th:last-child{border-radius:10px 10px 0 0}
.banding tbody tr:last-child td:last-child{border-radius:0 0 10px 10px}
.banding .ya{display:inline-grid;color:var(--aksen-kini)}
.banding .ya svg{width:22px;height:22px}
.banding .tidak{color:var(--muted)}

/* Tanya jawab dan privasi, tertutup */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:17px;font-weight:640;padding:8px 0;min-height:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:10px;height:10px;flex:none;border-right:2.4px solid currentColor;border-bottom:2.4px solid currentColor;
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p,.faq details dd,.faq .langkah{color:var(--muted);font-size:16px}
.faq details>p{padding:0 0 18px;max-width:42em}
.faq .langkah{padding:0 0 18px 22px;display:grid;gap:6px}
.faq .langkah b{color:var(--text);font-weight:650}
.ringkas dt{font-weight:650;padding-top:6px}
.ringkas dd{padding:2px 0 8px}
.faq .izin{padding:4px 0 8px}
.faq .izin b{color:var(--text)}
.faq .tautan-penuh{padding-bottom:18px}
.faq .tautan-penuh a{color:var(--text);min-height:44px;display:inline-flex;align-items:center}
.tanya-lagi{color:var(--muted);font-size:15px;margin-top:14px}
.tanya-lagi a{color:var(--text);word-break:break-word}

/* Aplikasi lain: deretan ikon yang digeser */
.lain{border-top:1px solid var(--line)}
.lain-jalur{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;list-style:none;margin:0 calc(var(--gut) * -1);
  padding:2px var(--gut) 8px;scrollbar-width:none}
.lain-jalur li{flex:0 0 auto;scroll-snap-align:start}
.lain-jalur a{display:flex;flex-direction:column;align-items:center;gap:4px;width:96px;text-decoration:none;padding:6px 0;text-align:center}
.lain-jalur img{width:56px;height:56px;margin-bottom:4px}
.lain-jalur b{font-size:15px;font-weight:650}
.lain-jalur small{font-size:12.5px;color:var(--muted);line-height:1.2}
.lain-jalur a:hover b{text-decoration:underline}

/* Bar Play yang menempel di bawah layar HP (tersembunyi selama lencana di pembuka masih terlihat) */
.tempel{position:sticky;bottom:0;z-index:5;background:var(--surface);border-top:1px solid var(--line);
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));transition:transform .2s ease,visibility .2s}
.tempel.tersembunyi{transform:translateY(110%);visibility:hidden}
.tempel-isi{display:flex;align-items:center;gap:12px}
.tempel-isi .ikon-app{width:44px;height:44px}
.tempel-teks{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.tempel-teks b{font-size:17px;font-weight:700}
.tempel-teks small{font-size:13.5px;color:var(--muted)}

/* Kaki: permukaan terang bergaris atas (pita gelap hanya untuk janji) */
.kaki{background:var(--surface);color:var(--text);border-top:1px solid var(--line);padding:28px 0 24px;font-size:15px}
.kaki-atas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px}
.kaki .merek{font-size:24px;font-weight:780;font-stretch:118%;letter-spacing:-.035em;display:flex;align-items:center;gap:10px}
.kaki .merek svg{width:26px;height:26px}
.kaki p{color:var(--muted)}
.kaki .surel{color:var(--text);display:inline-flex;align-items:center;min-height:44px;word-break:break-word}
.kaki-privasi{margin-top:12px}
.kaki h2{font-size:15px;font-weight:560;font-stretch:100%;color:var(--muted);letter-spacing:0;margin-bottom:2px}
.kaki ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 18px}
.kaki li a{min-height:44px;display:inline-flex;align-items:center}
.kaki-bahasa{font-family:"Mona Sans","Tinyfair CJK",system-ui,sans-serif;margin-top:10px;font-size:14px}
.kaki-bawah{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:4px 24px;justify-content:space-between}

/* Kebijakan privasi dan halaman developer */
.dokumen{max-width:740px;padding:clamp(12px,4vw,44px) 0 clamp(48px,8vw,104px)}
.dokumen .tautan-balik{display:inline-flex;min-height:44px;align-items:center;font-size:15px;color:var(--muted);margin-bottom:8px}
.dokumen h1{font-size:clamp(34px,6vw,66px);font-weight:790;font-stretch:110%;letter-spacing:-.016em;word-spacing:.08em;margin-bottom:18px}
.dokumen h2{font-size:clamp(21px,2.2vw,27px);margin:38px 0 10px;padding-top:22px;border-top:1px solid var(--line)}
.dokumen h3{font-size:18px;margin:22px 0 8px}
.dokumen p,.dokumen dd,.dokumen li{color:var(--muted)}
.dokumen p+p{margin-top:12px}
.dokumen dt{font-weight:650;margin-top:16px}
.dokumen ul{padding-left:22px}
.dokumen pre{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px}

/* Lebar menengah: janji tiga kolom */
@media (min-width:720px){
  body{font-size:18px}
  .janji{padding:40px 40px 44px;margin-bottom:40px}
  .janji ul{gap:28px}
  .janji p{font-size:16px}
  .janji ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app-hero .panggung{height:380px;padding-top:40px}
  .app-hero .panggung .ponsel{width:270px}
  .galeri-tombol{display:flex}
  .bagian-app{padding:44px 0}
  .faq summary{font-size:18px}
  .bagian{padding:36px 0}
}
/* Lebar: ponsel bertumpuk, fitur dan Free vs Pro berdampingan */
@media (min-width:1024px){
  .panggung .ponsel-belakang{display:block;position:absolute;width:200px;opacity:.96}
  .panggung .ponsel-belakang.kiri{transform:translateX(-50%) translateY(56px) rotate(-6deg)}
  .panggung .ponsel-belakang.kanan{transform:translateX(50%) translateY(56px) rotate(6deg)}
  .panggung .ponsel-depan{position:relative;z-index:1}
  .app-hero{padding:32px 0 20px}
  .app-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
  .app-hero .panggung{height:560px;padding-top:56px}
  .app-hero .panggung .ponsel{width:290px}
  .app-hero .panggung .ponsel-belakang{width:240px}
  .lencana-besar,.lencana-besar img{height:72px}
  .lencana-besar img{margin:0 -9px}
  .banding td{width:28%}
  .app-dua{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .tanya{max-width:840px}
  .lain-jalur{margin:0;padding:2px 0 8px;flex-wrap:wrap}
  .tempel{display:none}
  .kaki{padding:40px 0 28px}
}
@media (prefers-reduced-motion:no-preference){
  .panggung .ponsel-depan{animation:naik .7s .1s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes naik{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}


/* ============ Beranda v5: etalase toko (19 Okt 2026, RISET-V5.md) ============
   HP: judul ringkas, sorotan yang digeser (satu kartu + intipan kartu berikutnya), daftar baris ikon + manfaat + Get,
   lalu ubin "Coming soon" empat sekolom. Layar lebar: panel sorotan + daftar pilihan di sampingnya, rak kartu berjendela. */
.pembuka{display:grid;gap:10px;padding:6px 0 18px}
.pembuka h1{font-size:clamp(31px,8.4vw,68px);font-weight:800;font-stretch:112%;letter-spacing:-.018em;word-spacing:.08em;line-height:1.02;max-width:11em}
.pengantar{color:var(--muted);font-size:clamp(15px,4.1vw,16px);line-height:1.45;max-width:30em}
.fakta{list-style:none;display:flex;flex-wrap:wrap;gap:4px clamp(12px,4vw,18px);margin-top:10px;font-size:14px;color:var(--muted)}
.fakta b{color:var(--text);font-weight:760;font-stretch:112%;font-size:15.5px;font-variant-numeric:tabular-nums}
.ikon-app{box-shadow:0 0 0 1px rgba(16,19,26,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .ikon-app{box-shadow:0 0 0 1px rgba(255,255,255,.14)}}
:root[data-theme=dark] .ikon-app{box-shadow:0 0 0 1px rgba(255,255,255,.14)}

.etalase{padding:4px 0 6px;display:flex;flex-direction:column}
.etalase-isi{order:0}
.etalase .judul-bagian{order:1;margin:12px 0 0}
.daftar-baris{order:2}
.sorot-jalur{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);
  padding:2px var(--gut) 14px;scroll-padding:0 var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
.sorot-jalur::-webkit-scrollbar{display:none}
.sorot{flex:0 0 calc(100% - 36px);max-width:400px;scroll-snap-align:start;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.sorot-jendela{display:block;position:relative;isolation:isolate;overflow:hidden;background:var(--app);height:156px;padding-top:20px}
.sorot-jendela::before{content:"";position:absolute;z-index:-1;width:120%;aspect-ratio:1;left:-10%;top:30%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.26),rgba(255,255,255,0))}
.sorot-jendela .ponsel{width:164px;border-radius:28px 28px 0 0;padding:6px 6px 0}
.sorot-jendela .ponsel img{border-radius:22px 22px 0 0}
.sorot-teks{display:flex;flex-direction:column;gap:8px;padding:14px 16px 12px;flex:1}
.sorot-nama{display:flex;align-items:center;gap:12px}
.sorot-nama .ikon-app{width:44px;height:44px}
.sorot-nama span{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.sorot-nama b{font-size:17px;font-weight:720;font-stretch:106%}
.sorot-nama small{font-size:13.5px;color:var(--muted)}
.sorot h3{font-size:20px;font-weight:750;line-height:1.14}
.sorot h3 a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin:-8px 0}
.sorot h3 a:hover{text-decoration:underline}
.sorot-kalimat,.sorot-cek{display:none}
.sorot-aksi{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:2px}
.sorot-detail{font-size:15px;font-weight:600;min-height:44px;display:inline-flex;align-items:center;text-align:right}
.pilih-daftar{display:none}

.daftar-baris{list-style:none;margin-top:4px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:2px 14px}
.baris{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px 0;
  border-bottom:1px solid var(--line)}
.baris:last-child{border-bottom:0}
.baris .ikon-app{width:56px;height:56px}
.baris-teks{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.baris-teks a{text-decoration:none;font-size:17px;font-weight:700;font-stretch:106%;line-height:1.25}
.baris-teks a::after{content:"";position:absolute;inset:0}
.baris:hover .baris-teks a{text-decoration:underline}
.baris-manfaat{font-size:14.5px;color:var(--muted)}
.baris-teks small{display:none;font-size:13px;color:var(--muted)}
.ambil{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:44px;text-decoration:none}
.ambil span{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 18px;border-radius:999px;
  background:var(--sunken);color:var(--text);font-weight:720;font-size:15px;letter-spacing:.01em}
.ambil:hover span{background:var(--line-kuat)}

.rak-segera{padding:22px 0 26px}
.kisi-segera{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 6px}
.segera a{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;text-decoration:none;padding:4px 0;min-height:44px}
.segera-jendela{display:none}
.segera .ikon-app{width:60px;height:60px}
.segera b{font-size:13.5px;font-weight:640;line-height:1.2;overflow-wrap:anywhere}
.segera small{display:none}
.segera a:hover b{text-decoration:underline}

@media (min-width:720px){
  .pembuka{padding:18px 0 22px}
  .pengantar{font-size:18px}
  .sorot{flex-basis:380px}
  .sorot-jendela{height:200px}
  .sorot-jendela .ponsel{width:190px}
  .daftar-baris{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;padding:4px 20px}
  .baris:nth-last-child(2):nth-child(odd){border-bottom:0}
  .baris-teks small{display:block}
  .kisi-segera{grid-template-columns:repeat(var(--n,7),minmax(0,1fr))}
}
@media (min-width:1024px){
  .pembuka{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:48px;padding:26px 0 24px}
  .etalase .judul-bagian{order:0;margin:0 0 14px}
  .etalase-isi{order:1}
  .pembuka-sisi{padding-bottom:6px}
  .etalase-isi{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:stretch}
  .sorot-jalur{display:block;overflow:visible;margin:0;padding:0}
  .sorot{display:none}
  .sorot.aktif{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);height:100%;min-height:460px;max-width:none;
    background:var(--app);color:var(--on-app);border:0;border-radius:var(--r-panel);position:relative;isolation:isolate}
  .sorot.aktif::before{content:"";position:absolute;z-index:-1;width:70%;aspect-ratio:1;right:-8%;top:18%;border-radius:50%;
    background:radial-gradient(closest-side,rgba(255,255,255,.24),rgba(255,255,255,0))}
  .sorot :focus-visible{outline-color:var(--on-app)}
  .sorot-jendela{order:2;background:transparent;height:auto;padding-top:56px;align-self:stretch}
  .sorot-jendela::before{display:none}
  .sorot-jendela .ponsel{width:230px}
  .sorot-jendela .ponsel-belakang{width:190px}
  .sorot-teks{order:1;padding:40px 8px 36px 40px;gap:12px;justify-content:center}
  .sorot-nama .ikon-app{width:56px;height:56px;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
  .sorot-nama b{font-size:19px}
  .sorot-nama small{color:var(--on-app);font-size:14.5px}
  .sorot h3{font-size:clamp(32px,3vw,44px);line-height:1.04;letter-spacing:-.016em;margin:6px 0 2px}
  .sorot-kalimat{display:block;font-size:17px;max-width:26em}
  .sorot-cek{display:grid;font-size:16px;margin-top:4px}
  .sorot-cek svg{color:var(--on-app)}
  .sorot-aksi{justify-content:flex-start;gap:22px;margin-top:14px}
  .sorot-aksi .lencana,.sorot-aksi .lencana img{height:56px}
  .sorot-aksi .lencana img{margin:0 -7px}
  .sorot-detail{color:var(--on-app);font-size:16px}
  .pilih-daftar{display:flex;flex-direction:column;justify-content:space-between;gap:4px;list-style:none}
  .pilih{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;text-align:left;
    padding:7px 12px;border-radius:16px;border:1px solid transparent;background:transparent;color:var(--text);font:inherit;
    cursor:pointer;min-height:58px}
  .pilih .ikon-app{width:44px;height:44px}
  .pilih span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
  .pilih b{font-size:16.5px;font-weight:700;font-stretch:106%}
  .pilih small{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pilih:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
  .pilih.aktif{background:var(--surface);border-color:var(--line)}
  .daftar-baris{display:none}
  .rak-segera{padding:40px 0 36px}
  .kisi-segera{gap:14px;grid-template-columns:repeat(min(var(--n,7),4),minmax(0,1fr))}
  .segera a{align-items:stretch;text-align:left;gap:0;padding:0 0 16px;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-kartu);overflow:hidden;height:100%}
  .segera a:hover{border-color:var(--line-kuat)}
  .segera-jendela{display:block;height:150px;overflow:hidden;padding-top:18px;background:color-mix(in srgb,var(--app) 16%,var(--surface))}
  .segera-jendela .ponsel{width:min(108px,78%);margin:0 auto;border-radius:20px 20px 0 0;padding:5px 5px 0;box-shadow:0 14px 28px -16px rgba(16,19,26,.55)}
  .segera-jendela .ponsel img{border-radius:16px 16px 0 0}
  .segera .ikon-app{width:52px;height:52px;margin:-26px 0 8px 14px;position:relative;border:3px solid var(--surface);box-sizing:content-box}
  .segera b{font-size:15.5px;padding:0 14px;font-weight:700;overflow-wrap:normal}
  .segera small{display:block;font-size:13px;color:var(--muted);line-height:1.3;padding:3px 14px 0}
}
@media (min-width:1280px){.kisi-segera{grid-template-columns:repeat(var(--n,7),minmax(0,1fr))}}
@media (max-width:420px){.nav a{padding:10px 8px}}
@media (max-width:380px){.nav a{padding:10px 5px;font-size:14.5px}.kepala{gap:6px}}
@media (max-width:349px){.nav a{white-space:normal;padding:10px 4px}.kepala{gap:4px}}
/* Panduan SEO (22 Okt 2026): dokumen 740 px, kotak jawaban, langkah bernomor, kartu aplikasi berwarna aplikasi */
.remah{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:15px;color:var(--muted);margin-bottom:6px}
.remah a{color:var(--muted);min-height:44px;display:inline-flex;align-items:center}
.panduan h1{font-size:clamp(32px,5.4vw,56px);line-height:1.06}
.panduan-meta{font-size:15px;margin-bottom:6px}
.panduan-bahasa a{display:inline-flex;min-height:44px;align-items:center;color:var(--text);font-weight:600}
.panduan-jawab{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--aksen-kini);border-radius:var(--r-kecil);padding:16px 18px}
.dokumen .panduan-jawab h2{margin:0 0 6px;padding:0;border:0;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.dokumen .panduan-jawab p{color:var(--text);font-size:18px}
.panduan-perlu{margin-bottom:4px}
.panduan-perlu b{color:var(--text)}
.panduan-perlu+ul{margin-bottom:18px}
.panduan-langkah{counter-reset:l;list-style:none;padding:0;display:grid;gap:14px}
.dokumen .panduan-langkah li{counter-increment:l;position:relative;padding-left:48px;min-height:34px}
.panduan-langkah li::before{content:counter(l);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-weight:700;font-size:16px;background:var(--text);color:var(--paper)}
.panduan-langkah b{color:var(--text)}
.panduan-app{margin:34px 0 8px;background:linear-gradient(var(--app),var(--app)) top/100% 6px no-repeat,var(--surface);border:1px solid var(--line);border-radius:var(--r-kartu);padding:26px 20px 20px;overflow:hidden}
.panduan-app-nama{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.panduan-app-nama .ikon-app{width:56px;height:56px;flex:none}
.panduan-app-nama span{display:flex;flex-direction:column}
.dokumen .panduan-app-nama b{color:var(--text);font-size:19px;line-height:1.25}
.panduan-app-nama small{font-size:14px;color:var(--muted)}
.panduan-app-aksi{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:14px}
.panduan-app-lagi{color:var(--text);font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.dokumen ul.panduan-lain{list-style:none;padding:0;display:grid;gap:0}
.panduan-lain li{border-top:1px solid var(--line)}
.panduan-lain li:last-child{border-bottom:1px solid var(--line)}
.panduan-lain a{display:flex;gap:14px;align-items:center;padding:12px 0;min-height:64px;text-decoration:none;color:var(--text)}
.panduan-lain .ikon-app{width:40px;height:40px;flex:none}
.panduan-lain span{display:flex;flex-direction:column}
.panduan-lain b{font-weight:620;line-height:1.3}
.panduan-lain small{font-size:14px;color:var(--muted)}
.panduan-indeks{margin-top:26px}
.panduan .faq summary{font-size:17px}
.panduan-app-tautan ul{list-style:none;padding:0}
.panduan-app-tautan a{display:inline-flex;min-height:44px;align-items:center;color:var(--text);font-weight:600}
.kaki-panduan a{display:inline-flex;min-height:44px;align-items:center;color:inherit;font-weight:600}

.panduan-video{margin:28px 0 8px}
.panduan-video ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
.panduan-video a{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-kartu);background:var(--surface);text-decoration:none;color:var(--text);min-height:56px}
.panduan-video a:hover,.panduan-video a:focus-visible{border-color:var(--app)}
.panduan-video-main{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#e62117;color:#fff;font-size:16px}
.panduan-video a span:last-child{display:flex;flex-direction:column;gap:2px}
.panduan-video small{color:var(--muted)}