@font-face{font-family:'Fredoka';font-weight:600;font-display:swap;src:url('../fonts/Fredoka-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-weight:700;font-display:swap;src:url('../fonts/Fredoka-Bold.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:400;font-display:swap;src:url('../fonts/Poppins-Regular.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:400;font-style:italic;font-display:swap;src:url('../fonts/Poppins-Italic.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:500;font-display:swap;src:url('../fonts/Poppins-Medium.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:700;font-display:swap;src:url('../fonts/Poppins-Bold.woff2') format('woff2')}
:root{
 --zm:1;--topbg:rgba(255,249,238,.95);--soft:#F1F4F8;--brown:#7a5200;--redink:#5b1a15;--redline:#F2B8B2;
 --navy:#12345B;--ink:#4A5B72;--line:#D8E0EA;--cream:#FFF9EE;--white:#fff;
 --blue5:#E8F2FF;--blue1:#CFE4FF;--blue:#0878F9;--blue7:#0752A6;
 --cyan5:#E0F7FB;--cyan:#24C4DF;--cyan7:#0B7080;
 --yel1:#FFF1C4;--yel:#FFC83D;--yel2:#FFEAB5;
 --green5:#E7F5E8;--green1:#DDF1DD;--green:#55B957;--green7:#2E7D32;
 --org5:#FFEBDA;--org1:#FCE0C8;--org:#F28B35;--org7:#B4560C;
 --red5:#FDE7E4;--red:#D9473D;--red7:#B3261E;
 --p5:var(--blue5);--p1:var(--blue1);--p:var(--blue);--p7:var(--blue7);
 /* skala: huruf 12/14/16/18/22/28, jarak 4/8/12/16/24/32/48, sudut 6/12/16/24 */
 --fs-xs:12px;--fs-sm:14px;--fs-md:16px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:28px;
 --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;
 --r-xs:6px;--r-sm:12px;--r-md:16px;--r-lg:24px;
 --r:16px;--w:920px;
}
[data-fam="1"]{--p5:var(--blue5);--p1:var(--blue1);--p:var(--blue);--p7:var(--blue7)}
[data-fam="2"]{--p5:var(--org5);--p1:var(--org1);--p:var(--org);--p7:var(--org7)}
[data-fam="3"]{--p5:var(--green5);--p1:var(--green1);--p:var(--green);--p7:var(--green7)}
[data-fam="4"]{--p5:var(--cyan5);--p1:#CDF0F6;--p:var(--cyan);--p7:var(--cyan7)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,sans-serif;font-size:var(--fs-md);line-height:1.6;color:var(--navy);background:var(--cream);padding-bottom:48px}
h1,h2,h3,h4{font-family:'Fredoka',system-ui,sans-serif;font-weight:700;line-height:1.18;letter-spacing:-.2px}
a{color:var(--blue7)}
img{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#12345B;padding:8px 16px;border-radius:12px;z-index:99}
.skip:focus{left:8px}
.top{position:sticky;top:0;z-index:20;background:var(--topbg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:8px 16px;padding-top:calc(8px + env(safe-area-inset-top))}
.brand img{height:38px;width:auto}
.topnav{display:none;gap:4px}
.topnav a,.bottom a{text-decoration:none;color:var(--ink);font-weight:500;padding:8px 16px;border-radius:999px;font-size:var(--fs-md)}
.topnav a[aria-current=page]{background:var(--blue1);color:var(--blue7)}
.bottom{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--white);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.bottom a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:var(--fs-xs);padding:4px 8px;min-width:60px}
.bottom svg{width:24px;height:24px;fill:var(--ink)}
.bottom a[aria-current=page]{color:var(--blue7)}.bottom a[aria-current=page] svg{fill:var(--blue7)}
main{max-width:var(--w);margin:0 auto;padding:16px 16px 24px;outline:none}
@media(min-width:820px){.topnav{display:flex}.bottom{display:none}body{padding-bottom:24px}main{padding:32px 24px 32px}}
.eyebrow{font-family:'Fredoka';font-weight:600;font-size:var(--fs-xs);letter-spacing:1.1px;text-transform:uppercase;color:var(--p7)}
h1{font-size:clamp(28px,6vw,42px)}
h2{font-size:clamp(22px,4.4vw,28px);margin:32px 0 12px}
h3{font-size:var(--fs-lg);margin:16px 0 8px}
.lead{color:var(--ink);font-size:var(--fs-lg);margin:8px 0 16px}
.card{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);padding:16px}
.pill{display:inline-block;border-radius:999px;padding:4px 12px;font-size:var(--fs-xs);font-weight:700;font-family:'Fredoka';letter-spacing:.4px}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:12px 24px;font-weight:700;background:var(--blue7);color:#fff;text-decoration:none;font-size:var(--fs-md)}
.btn.alt{background:var(--white);color:var(--blue7);border:2px solid var(--blue1)}
.btn:active{transform:translateY(1px)}
/* beranda */
.hero{background:linear-gradient(135deg,var(--blue7),#0A6FE0);color:#fff;border-radius:24px;padding:24px 24px;position:relative;overflow:hidden}
.hero h1{color:#fff}.hero p{color:#E8F2FF;margin:12px 0 16px;max-width:560px}
.hero .tag{display:inline-block;background:rgba(255,255,255,.18);border-radius:999px;padding:4px 12px;font-size:var(--fs-xs);font-weight:700;margin-bottom:12px}
.hero .btn{background:#fff;color:var(--blue7)}.hero .btn.alt{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.hero .row{display:flex;flex-wrap:wrap;gap:12px}
.janji{display:grid;gap:12px;margin-top:16px}
.janji div{background:var(--white);border:1.5px solid var(--line);border-radius:16px;padding:12px 16px;display:flex;gap:12px;align-items:flex-start}
.janji b{font-family:'Fredoka';background:var(--yel1);color:var(--brown);border-radius:50%;min-width:28px;height:28px;display:grid;place-items:center}
@media(min-width:700px){.janji{grid-template-columns:repeat(3,1fr)}}
.bagian{margin-top:24px;border-radius:24px;border:2px solid var(--p1);background:var(--p5);padding:16px}
.bagian h2{margin:4px 0 8px;color:var(--p7);font-size:var(--fs-xl)}
.bagian .lead{font-size:var(--fs-md);margin:0 0 12px}
.bab-list{display:grid;gap:12px}
@media(min-width:700px){.bab-list{grid-template-columns:1fr 1fr}}
.babrow{display:flex;gap:12px;align-items:center;background:var(--white);border:1.5px solid var(--line);border-radius:16px;padding:8px;text-decoration:none;color:inherit}
.babrow img{width:92px;height:62px;object-fit:cover;border-radius:12px;flex:none;background:var(--p1)}
.babrow .n{font-family:'Fredoka';font-weight:600;font-size:var(--fs-xs);color:var(--p7);letter-spacing:.8px;text-transform:uppercase}
.babrow .j{font-family:'Fredoka';font-weight:700;font-size:var(--fs-md);line-height:1.2}
.babrow small{color:var(--ink);font-size:var(--fs-xs)}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
@media(min-width:700px){.quick{grid-template-columns:repeat(4,1fr)}}
.quick a{background:var(--white);border:1.5px solid var(--line);border-radius:16px;padding:12px;text-decoration:none;color:var(--navy);font-weight:500;font-size:var(--fs-sm);text-align:center}
.note{background:var(--red5);border:1.5px solid var(--redline);color:var(--redink);border-radius:16px;padding:12px 16px;font-size:var(--fs-sm);margin-top:24px}
.note b{color:var(--red7)}
/* bab */
.chap-hero img{border-radius:24px;width:100%;aspect-ratio:300/116;object-fit:cover;margin:12px 0}
.topik-list{display:grid;gap:12px}
.topikrow{display:block;background:var(--white);border:1.5px solid var(--line);border-left:6px solid var(--p);border-radius:16px;padding:12px 16px;text-decoration:none;color:inherit}
.topikrow .n{font-family:'Fredoka';font-weight:600;font-size:var(--fs-xs);color:var(--p7);letter-spacing:.8px;text-transform:uppercase}
.topikrow .j{font-family:'Fredoka';font-weight:700;font-size:var(--fs-lg);line-height:1.2;margin:4px 0}
.topikrow small{color:var(--ink);display:block}
.ringkas{background:var(--white);border:1.5px solid var(--line);border-radius:16px;padding:8px 16px 8px 32px}
.ringkas li{margin:12px 0}
.refl{background:var(--yel1);border:2px solid var(--yel);border-radius:16px;padding:16px 16px;margin-top:16px}
.refl h3{margin:0 0 8px;color:var(--brown)}
textarea{width:100%;min-height:92px;border:1.5px solid var(--line);border-radius:12px;padding:12px 12px;margin-top:8px;resize:vertical;background:var(--white)}
.saved{font-size:var(--fs-xs);color:var(--green7);min-height:18px}
details.ref{background:var(--white);border:1.5px solid var(--line);border-radius:16px;padding:12px 16px;margin-top:12px}
details.ref summary{font-weight:700;cursor:pointer}
details.ref li{margin:12px 0;font-size:var(--fs-sm);word-break:break-word}
.limit{background:var(--soft);border-radius:16px;padding:12px 16px;font-size:var(--fs-sm);color:var(--ink);margin-top:12px}
/* topik */
.crumb{font-size:var(--fs-sm);margin-bottom:8px}
.crumb a{text-decoration:none}
.thead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.fav{border:2px solid var(--line);background:var(--white);border-radius:999px;width:46px;height:46px;display:grid;place-items:center;flex:none}
.fav svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2}
.fav[aria-pressed=true]{background:var(--yel1);border-color:var(--yel)}.fav[aria-pressed=true] svg{fill:#F2A900;stroke:var(--brown)}
.intinya{background:var(--p5);border:2px solid var(--p1);border-radius:16px;padding:12px 16px;margin:12px 0;display:flex;gap:12px}
.intinya .pill{background:var(--p7);color:#fff;height:fit-content;margin-top:4px}
.cols{display:grid;gap:12px;margin:16px 0}
@media(min-width:760px){.cols{grid-template-columns:repeat(3,1fr)}}
.col{background:var(--white);border:2px solid var(--c1);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.col .lab{font-family:'Fredoka';font-weight:700;color:#fff;background:var(--c);padding:8px 16px;font-size:var(--fs-sm);letter-spacing:.6px;text-transform:uppercase}
.col img{width:100%;aspect-ratio:49.1/32.5;object-fit:cover;background:var(--c1)}
.col p{padding:12px 16px 16px;font-size:var(--fs-md)}
.col.c0{--c:#B4560C;--c1:#F6C9A4}.col.c1{--c:#2E7D32;--c1:#B7DDB9}.col.c2{--c:#0752A6;--c1:#B5D4FA}
.box{border-radius:16px;padding:16px 16px;margin:16px 0;border:2px solid var(--line);background:var(--white)}
.box.niat{background:var(--yel1);border-color:var(--yel)}
.box.niat h3{color:var(--brown);margin-top:0}
.mf{border-radius:16px;overflow:hidden;border:2px solid var(--org);margin:16px 0;background:var(--white)}
.mf .hd{background:#B4560C;color:#fff;font-family:'Fredoka';font-weight:700;font-size:var(--fs-lg);padding:12px 16px}
.mf .m,.mf .f{padding:12px 16px;margin:12px;border-radius:12px}
.mf .m{background:var(--red5)}.mf .f{background:var(--green5)}
.mf .m b,.mf .f b{display:block;font-family:'Fredoka';letter-spacing:1px;font-size:var(--fs-sm)}
.mf .m b{color:var(--red7)}.mf .f b{color:var(--green7)}
.lvl{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.lvl span{border:1.5px solid var(--line);border-radius:999px;padding:4px 12px;font-size:var(--fs-xs);color:var(--ink)}
.lvl span.on{background:var(--p7);border-color:var(--p7);color:#fff;font-weight:700}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:12px 0}
.tile{background:var(--p5);border-radius:16px;padding:12px 12px;text-align:center}
.tile.hi{background:var(--p7);color:#fff}
.tile b{display:block;font-family:'Fredoka';font-size:var(--fs-xl);line-height:1.1}
.tile small{font-size:var(--fs-xs)}
.steps{list-style:none;counter-reset:s}
.steps li{display:flex;gap:12px;align-items:flex-start;margin:12px 0;counter-increment:s}
.steps label{display:flex;gap:12px;cursor:pointer;align-items:flex-start}
.steps input{margin-top:8px;width:20px;height:20px;accent-color:var(--green7);flex:none}
.steps input:checked+span{color:var(--ink);text-decoration:line-through}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.pn a{background:var(--white);border:1.5px solid var(--line);border-radius:16px;padding:12px 12px;text-decoration:none;color:inherit;font-size:var(--fs-sm)}
.pn a small{display:block;color:var(--ink);font-size:var(--fs-xs)}
.pn a:last-child{text-align:right}
.disc{font-size:var(--fs-sm);color:var(--ink);margin-top:24px;font-style:italic}
/* cari */
.search{display:flex;gap:8px;margin:12px 0}
.search input{flex:1;border:2px solid var(--line);border-radius:999px;padding:12px 16px;background:var(--white);font-size:var(--fs-md)}
mark{background:var(--yel);border-radius:6px;padding:0 4px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.chip{border:1.5px solid var(--line);background:var(--white);border-radius:999px;padding:8px 16px;font-size:var(--fs-sm);min-height:40px}
.chip[aria-pressed=true]{background:var(--blue7);border-color:var(--blue7);color:#fff}
.empty{text-align:center;color:var(--ink);padding:32px 12px}
/* info */
.prose p{margin:12px 0}.prose h3{margin-top:24px}
.gl dt{font-weight:700;margin-top:12px}.gl dd{color:var(--ink)}
.refs li{margin:12px 0 12px 24px;font-size:var(--fs-sm);word-break:break-word}

/* ---------- tema */
html[data-theme=hangat]{--cream:#FBF1DC;--white:#FFFBF2;--line:#E6D8BC;--topbg:rgba(251,241,220,.95);--soft:#F3E7CC;--blue5:#EDF1F4;--blue1:#D6E2EE;--yel1:#FBEBB8}
html[data-theme=gelap]{color-scheme:dark;--navy:#E8EEF7;--ink:#AEBBCF;--line:#2C3E57;--cream:#0B1A2E;--white:#13263F;--topbg:rgba(11,26,46,.95);--soft:#1B2F4A;--brown:#F5D58A;--redink:#FFD6D1;--redline:#7A3029;
 --blue5:#12304F;--blue1:#1F4670;--blue:#4DA3FF;--blue7:#8CC4FF;--cyan5:#0F3640;--cyan:#3CC9E2;--cyan7:#7FDCEC;
 --yel1:#3A3016;--yel:#E7B53A;--yel2:#4A3C18;--green5:#16301A;--green1:#1E4222;--green:#55B957;--green7:#8EDB91;
 --org5:#3C2312;--org1:#553116;--org:#F28B35;--org7:#FFB57A;--red5:#3E1A18;--red:#E36A60;--red7:#FF9C93}
html[data-theme=gelap] [data-fam="4"]{--p1:#164755}
html[data-theme=gelap] .col.c0{--c:#B4560C;--c1:#5a3417}html[data-theme=gelap] .col.c1{--c:#2E7D32;--c1:#25502a}html[data-theme=gelap] .col.c2{--c:#0752A6;--c1:#1c3f6b}
html[data-theme=gelap] .hero,html[data-theme=gelap] .tile.hi,html[data-theme=gelap] .lvl span.on,html[data-theme=gelap] .btn,html[data-theme=gelap] .intinya .pill,html[data-theme=gelap] .chip[aria-pressed=true]{--blue7:#0752A6;--p7:#0752A6;color:#fff}
html[data-theme=gelap] .btn.alt{color:var(--blue7)}
html[data-theme=gelap] img{filter:brightness(.92)}
html[data-theme=gelap] .hero .btn{color:#0752A6}html[data-theme=gelap] .hero .btn.alt{color:#fff}
main,.foot{zoom:var(--zm,1)}
html[data-motion=off] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ---------- header, hero gambar, Aa, kartu lanjut, footer */
.top .tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.top .topnav{margin-right:8px}
.iconbtn{display:grid;place-items:center;min-width:44px;height:44px;border-radius:50%;border:0;background:var(--blue1);color:var(--blue7);font-family:'Fredoka';font-weight:700;font-size:var(--fs-lg);text-decoration:none;line-height:1}
.iconbtn.dark{background:#0752A6;color:#fff}.iconbtn svg{width:22px;height:22px;fill:currentColor}
.iconbtn.aa{border-radius:16px;padding:0 12px}.iconbtn.aa small{font-size:var(--fs-sm)}
.hero.img{padding:0;background:var(--blue7)}
.hero.img .pic{width:100%;aspect-ratio:3/2;max-height:min(62vh,460px);object-fit:cover;object-position:50% 18%;display:block}
.hero.img .txt{padding:24px 24px 24px;position:relative;background:linear-gradient(135deg,#0752A6,#0A6FE0)}
.lanjut{display:flex;gap:12px;align-items:center;margin-top:16px;background:var(--white);border:2px solid var(--yel);border-radius:16px;padding:12px 16px;text-decoration:none;color:inherit}
.lanjut .ic{background:var(--yel1);border-radius:50%;width:40px;height:40px;display:grid;place-items:center;flex:none;font-size:var(--fs-lg)}
.lanjut small{display:block;color:var(--ink);font-size:var(--fs-xs)}.lanjut b{font-family:'Fredoka';font-size:var(--fs-md);line-height:1.2}
.act{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.act button,.act a{min-height:44px;border:2px solid var(--line);background:var(--white);border-radius:999px;padding:8px 16px;font-weight:600;font-size:var(--fs-sm);color:var(--navy);text-decoration:none;display:inline-flex;align-items:center}
.sheet{position:fixed;inset:0;z-index:50;background:rgba(10,25,45,.5);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet .in{background:var(--white);color:var(--navy);border-radius:24px 24px 0 0;width:100%;max-width:640px;padding:18px 18px calc(22px + env(safe-area-inset-bottom));max-height:86vh;overflow:auto;animation:up .2s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:768px){.sheet{align-items:center}.sheet .in{border-radius:24px}}
.sheet h3{font-size:var(--fs-lg);margin:0 0 4px}
.sheet .close{float:right;border:0;background:var(--blue1);border-radius:999px;padding:12px 16px;font-weight:700;color:var(--blue7);min-height:44px}
.foot strong{color:var(--navy)}
.rq{margin:12px 0}
@media(max-width:819px){.top .topnav{display:none}}
@media print{.top,.bottom,.foot{display:none}body{background:#fff}}
main:focus,main:focus-visible{outline:none}
.iconbtn.aa{display:inline-flex;align-items:baseline;justify-content:center;white-space:nowrap;padding-top:12px}.iconbtn.aa small{margin-left:4px}
/* ---------- tab topik, sambutan, kunci */
.seg{display:flex;gap:4px;background:var(--white);border:2px solid var(--line);border-radius:999px;padding:4px;margin:16px 0 4px;position:sticky;top:62px;z-index:5}
.seg button{flex:1;min-height:44px;border:0;background:transparent;border-radius:999px;font-weight:700;font-size:var(--fs-sm);color:var(--ink)}
.seg button[aria-selected=true]{background:#0752A6;color:#fff}
.tabp[hidden]{display:none}
.chip.lnk{text-decoration:none;color:var(--navy);display:inline-flex;align-items:center}
.cobacari{font-size:var(--fs-lg);margin:16px 0 8px}
.hero .searchbox{position:relative;margin:4px 0 16px;max-width:520px}
.hero .searchbox input{width:100%;font-size:var(--fs-md);padding:16px 16px 16px 48px;border-radius:999px;border:3px solid #fff;background:#fff;color:#12345B}
.hero .searchbox svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:22px;height:22px;fill:#4A5B72}
.lock{background:var(--white);border:2px solid var(--line);border-radius:24px;padding:16px;margin:16px 0;text-align:center;box-shadow:0 8px 24px rgba(18,52,91,.08)}
.lock h2{font-size:var(--fs-xl);margin:0 0 8px}.lock form{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.lock input{font:inherit;font-size:var(--fs-md);text-transform:uppercase;letter-spacing:1px;padding:12px 16px;border-radius:999px;border:2px solid var(--line);min-width:200px;text-align:center;background:var(--white);color:var(--navy)}
.lock .err{color:var(--red7);font-weight:500;margin-top:8px;min-height:1.4em}
.lockbtn{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
/* ---------- halaman PDF, daftar isi, peta */
.hlm{display:inline-block;font-family:'Fredoka';font-weight:600;font-size:var(--fs-xs);color:var(--ink);background:var(--soft);border-radius:999px;padding:4px 12px;margin-left:8px;vertical-align:middle;white-space:nowrap}
.dbi{list-style:none;counter-reset:d;display:grid;gap:8px}
.dbi li{counter-increment:d}
.dbi a{display:block;position:relative;text-decoration:none;color:inherit;background:var(--white);border:1.5px solid var(--line);border-radius:12px;padding:12px 12px 12px 48px}
.dbi a:before{content:counter(d);position:absolute;left:10px;top:10px;width:26px;height:26px;border-radius:50%;background:var(--p7);color:#fff;font-family:'Fredoka';font-weight:700;display:grid;place-items:center;font-size:var(--fs-sm)}
html[data-theme=gelap] .dbi a:before{background:#0752A6}
.dbi small{display:block;color:var(--ink);font-size:var(--fs-sm)}.dbi .hlm{margin:4px 0 0}
a.hl{color:inherit;text-decoration:none}
.tblw{overflow-x:auto;border:1.5px solid var(--line);border-radius:16px;background:var(--white)}
.peta{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.peta th{background:var(--p1);color:var(--navy);font-family:'Fredoka';text-align:left;padding:8px 12px;font-size:var(--fs-xs);letter-spacing:.6px;text-transform:uppercase}
.peta td{padding:8px 12px;border-top:1px solid var(--line);vertical-align:top}
@media(max-width:699px){.peta thead{display:none}.peta,.peta tbody,.peta tr,.peta td{display:block}.peta tr{padding:8px 0;border-top:6px solid var(--p1)}.peta td{border:0;padding:4px 12px}.peta td:before{content:attr(data-l);display:block;font-family:'Fredoka';font-size:var(--fs-xs);letter-spacing:.6px;text-transform:uppercase;color:var(--p7)}}
.toc,.toc ul{list-style:none;margin:0;padding:0}.toc ul{margin-left:16px;border-left:3px solid var(--p1,var(--line));padding-left:12px}
.toc li{margin:8px 0}.toc>li{margin:16px 0}.toc a{color:var(--navy);text-decoration:none}.toc a.gl{font-family:'Fredoka';font-size:var(--fs-lg)}
.toc li li a{display:inline-flex;gap:8px;align-items:center;min-height:32px}
.ck{width:18px;height:18px;border:2px solid var(--line);border-radius:50%;display:inline-grid;place-items:center;font-size:var(--fs-xs);flex:none;color:#fff}.ck.on{background:var(--green7);border-color:var(--green7)}
.sr{position:absolute;left:-999px}
.prog{display:block;height:10px;border-radius:6px;background:var(--line);overflow:hidden}.prog i{display:block;height:100%;background:var(--green);border-radius:6px}
.lanjut.prg{display:flex;justify-content:space-between;gap:16px;border-color:var(--line)}.lanjut.prg .prog{flex:1;max-width:45%}

.plist{display:grid;gap:12px;margin:16px 0}.pitem{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:var(--white);cursor:pointer;flex:1}
.pitem small{display:block;color:var(--ink);font-size:var(--fs-sm)}.pitem .av{width:44px;height:44px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}.pitem .av img{object-fit:contain}
.pitem2{display:flex;gap:8px;align-items:stretch}.btn.sm{padding:8px 12px;font-size:var(--fs-sm)}#anakf input[type=text],#anakf input[type=date]{width:100%;max-width:340px;padding:12px 12px;border:1px solid var(--line);border-radius:12px;font:inherit;background:var(--white);color:inherit}
.lanjut .ic img{display:block}
.pitem2 .btn.sm{align-self:center;border-radius:999px;width:auto;height:auto;min-width:0;padding:8px 16px;white-space:nowrap}

[data-fam="2"] .eyebrow,.eyebrow{color:var(--p7)}[data-fam="2"] .eyebrow{color:#9A4A0A}html[data-theme=gelap] [data-fam="2"] .eyebrow{color:var(--p7)}
.search input{min-width:0;width:100%;color:var(--navy)}
#anakf input[type=text],#anakf input[type=date]{color:var(--navy)}
#anakf input[type=radio]{width:24px;height:24px;vertical-align:middle;margin:0 4px 0 0}
.h3like{font-size:var(--fs-lg);margin:16px 0 8px}
.dbi .it{display:block;position:relative;background:var(--white);border:1.5px solid var(--line);border-radius:12px;padding:12px 12px 12px 48px}
.dbi .it:before{content:counter(d);position:absolute;left:10px;top:10px;width:26px;height:26px;border-radius:50%;background:var(--p7);color:#fff;font-family:'Fredoka';font-weight:700;display:grid;place-items:center;font-size:var(--fs-sm)}
html[data-theme=gelap] .dbi .it:before{background:#0752A6}
.benang{margin:16px 0;font-weight:600}
.crumb a{display:inline-block;padding:8px 0}
.kidbar{background:var(--white);border-color:var(--line)}
.kidbar button{background:var(--blue1);color:var(--blue7)}
/* utilitas kecil menggantikan gaya sebaris */
.mt0{margin-top:0}.m0{margin:0}.mt1{margin-top:var(--sp-1)}.mt2{margin-top:var(--sp-2)}.my2{margin:var(--sp-2) 0}.my3{margin:var(--sp-3) 0}
.fs-sm{font-size:var(--fs-sm)}.mute{color:var(--ink)}.pre{white-space:pre-wrap}
.boxh{margin:0 0 var(--sp-2);font-size:var(--fs-lg)}
/* ketahanan pada huruf terbesar dan layar sempit */
.babrow>span{min-width:0;overflow-wrap:anywhere}
.janji{grid-template-columns:minmax(0,1fr)}@media(min-width:700px){.janji{grid-template-columns:repeat(3,minmax(0,1fr))}}
.janji div>span{min-width:0}
.pn{grid-template-columns:repeat(2,minmax(0,1fr))}.pn a{overflow-wrap:anywhere}
.seg button{flex:1 1 auto;min-width:0;padding:0 var(--sp-3)}
.dbi{grid-template-columns:minmax(0,1fr)}.dbi a,.dbi .it{overflow-wrap:anywhere}
.toc li li a{max-width:100%;overflow-wrap:anywhere}.toc li{min-width:0}
/* footer: jarak dan keterbacaan */
.foot{max-width:var(--w);margin:var(--sp-5) auto 0;padding:var(--sp-5) var(--sp-4) calc(var(--sp-7) + 24px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:var(--fs-sm);line-height:1.6;color:var(--navy)}
.foot p{margin:0 0 var(--sp-3);font-size:var(--fs-sm)}.foot p:last-child{margin-bottom:0}
.foot .small{font-size:var(--fs-xs);opacity:.85}
@media(min-width:820px){.foot{padding:var(--sp-5) var(--sp-5) var(--sp-6)}}
.thead>div:first-child{min-width:0}.thead h1{overflow-wrap:anywhere}