/* Dunia Sinar — ruang kelas SD: whiteboard, spidol, kertas tempel, keramik dinding, merah-putih seragam.
   Sengaja berbeda dari landing utama Arkafadu (krem & navy). */
:root{
  --papan:#FBFCFD; --alu:#C9CED4; --alu-gelap:#9AA1A9;
  --spidol-biru:#1F3A7A; --spidol-merah:#C62828; --spidol-hijau:#2E7D32; --tinta:#1A1F2B; --redup:#55607A;
  --dinding:#F5EEDF; --keramik:#A9CBB9; --keramik-gelap:#7FA996; --teal:#0B6E6A; --genteng:#B3542A; --kuning:#FFD54F;
  --f-tangan:'Patrick Hand','Comic Sans MS',cursive; --f-isi:'Plus Jakarta Sans','Segoe UI',Arial,sans-serif; --f-pixel:'Jersey 10','Courier New',monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--dinding);color:var(--tinta);font:16px/1.6 var(--f-isi);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--spidol-biru)}
:focus-visible{outline:3px solid var(--kuning);outline-offset:3px;border-radius:6px}
.wadah{max-width:1140px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
h1,h2,h3{margin:0;font-weight:400;line-height:1.05;text-wrap:balance}
p{margin:0}
.px{image-rendering:pixelated}
.pixel{font-family:var(--f-pixel);letter-spacing:1.5px;font-size:22px;line-height:1}
.spidol{font-family:var(--f-tangan)}
.merah{color:var(--spidol-merah)} .biru{color:var(--spidol-biru)}

/* tombol bergaya tutup spidol */
.tbl{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 22px;border-radius:12px;font-weight:800;text-decoration:none;border:2px solid var(--tinta);color:var(--tinta);background:#fff;box-shadow:0 3px 0 var(--tinta);transition:transform .1s, box-shadow .1s}
.tbl:hover{transform:translateY(1px);box-shadow:0 2px 0 var(--tinta)}
.tbl:active{transform:translateY(3px);box-shadow:none}
.tbl.merah{background:var(--spidol-merah);border-color:#7f1515;color:#fff;box-shadow:0 3px 0 #7f1515}
.tbl.kuning{background:var(--kuning);border-color:#8a6d00;box-shadow:0 3px 0 #8a6d00}
.tbl.garis-terang{background:transparent;color:#fff;border-color:#fff;box-shadow:0 3px 0 rgba(255,255,255,.5)}
.tbl.kecil{padding:7px 14px;font-size:14px;border-radius:10px}
@media (prefers-reduced-motion:reduce){.tbl{transition:none}}

/* kepala: pita merah-putih seperti seragam SD */
.atas{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:#fff;border-bottom:4px solid var(--spidol-merah);box-shadow:0 2px 0 #fff, 0 3px 0 rgba(0,0,0,.06)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:11;background:#fff}
.baris-atas{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:10px;flex-wrap:wrap}
.merek{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta)}
.merek b{display:block;font-family:var(--f-tangan);font-size:28px;line-height:1}
.merek small{display:block;font-size:12px;font-weight:700;color:var(--redup)}
.menu{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-weight:700;font-size:15px}
.menu a:not(.tbl){text-decoration:none;color:var(--tinta)}
.menu a:not(.tbl):hover{color:var(--spidol-merah)}

/* whiteboard pembuka */
.pembuka{padding-block:34px 26px;background:linear-gradient(var(--dinding) 0 70%, var(--keramik) 70% 100%)}
.papan{position:relative;background:linear-gradient(160deg,#fff 0%,var(--papan) 55%,#EEF2F5 100%);border:14px solid var(--alu);border-radius:6px;box-shadow:inset 0 0 0 2px var(--alu-gelap),0 18px 30px -18px rgba(0,0,0,.45);padding:34px 34px 46px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:30px;align-items:center}
.papan-isi{display:flex;flex-direction:column;gap:16px;min-width:0}
.papan h1{font-family:var(--f-tangan);font-size:clamp(42px,6vw,72px);color:var(--spidol-biru)}
.papan h1 u{text-decoration-color:var(--spidol-merah);text-decoration-thickness:5px;text-underline-offset:8px;color:var(--spidol-merah)}
.coret{white-space:nowrap;background:linear-gradient(transparent 60%,rgba(255,213,79,.6) 60%,rgba(255,213,79,.6) 92%,transparent 92%);padding:0 .08em}
.papan-isi > .spidol{font-size:24px;line-height:1.35;max-width:26em}
.aksi{display:flex;gap:12px;flex-wrap:wrap}
.catatan{font-size:14px;color:var(--redup)}
.baki{position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);width:min(420px,70%);height:14px;background:var(--alu);border-radius:3px;box-shadow:inset 0 -3px 0 var(--alu-gelap);display:flex;align-items:flex-start;justify-content:center;gap:18px;padding-top:2px}
.baki i{display:block;width:44px;height:8px;border-radius:4px}
.baki i.biru{background:var(--spidol-biru)} .baki i.merah{background:var(--spidol-merah)} .baki i.hitam{background:#222}
.baki b{display:block;width:52px;height:10px;border-radius:2px;background:#2b3550}

/* foto ditempel selotip */
.foto{position:relative;margin:0;background:#fff;padding:10px 10px 34px;box-shadow:0 10px 22px -10px rgba(0,0,0,.45)}
.foto img{display:block;width:100%;height:auto;aspect-ratio:1200/780;object-fit:cover}
.foto figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:20px;color:var(--spidol-merah)}
.foto::before,.foto::after{content:"";position:absolute;top:-12px;width:90px;height:26px;background:rgba(255,236,170,.75);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.foto::before{left:18px;transform:rotate(-6deg)} .foto::after{right:18px;transform:rotate(5deg)}
.miring-kiri{transform:rotate(-1.6deg)} .miring-kanan{transform:rotate(1.4deg)}

/* kertas tempel */
.tempel{background:var(--keramik);padding-block:30px 40px;background-image:linear-gradient(90deg,var(--keramik-gelap) 2px,transparent 2px),linear-gradient(var(--keramik-gelap) 2px,transparent 2px);background-size:56px 56px}
.kisi-tempel{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.kertas{padding:18px 18px 20px;box-shadow:0 8px 14px -8px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:4px}
.kertas:nth-child(odd){transform:rotate(-1.2deg)} .kertas:nth-child(even){transform:rotate(1deg)}
.kertas b{font-family:var(--f-tangan);font-size:56px;line-height:1;color:var(--tinta);font-variant-numeric:tabular-nums}
.kertas b small{font-size:30px}
.kertas span{font-weight:600;font-size:15px}
.kuning{background:#FFF59D} .hijau{background:#C8E6C9} .merah-muda{background:#FFCDD2} .biru-muda{background:#BBDEFB}

/* bagian */
.bagian{padding-block:56px}
.judul{font-family:var(--f-tangan);font-size:clamp(36px,4.6vw,52px);color:var(--spidol-biru);margin-bottom:10px}
.judul.terang{color:#fff}
.pengantar{max-width:44em;color:var(--redup);font-size:17px;margin-bottom:26px}
.denah{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start}
.ruang{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ruang li{display:flex;gap:14px;align-items:center;background:#fff;border:2px solid var(--tinta);border-radius:12px;padding:10px 14px;box-shadow:3px 3px 0 var(--genteng)}
.ruang .pixel{flex:none;min-width:58px;text-align:center;background:var(--teal);color:#fff;border-radius:8px;padding:6px 6px 4px;font-size:20px}
.ruang b{display:block;font-size:17px}
.ruang small{display:block;color:var(--redup);font-size:14px;line-height:1.4}
.foto-dua{display:grid;gap:30px}

.ubin{background:#fff;border-block:4px solid var(--keramik)}
.kisi-mapel{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.mapel{border:2px dashed var(--spidol-biru);border-radius:14px;padding:20px 22px;background:var(--papan)}
.mapel h3{font-family:var(--f-tangan);font-size:34px;color:var(--spidol-merah);margin-bottom:8px}
.mapel ul{margin:0;padding-left:20px;display:grid;gap:8px}
.sambung{margin-top:24px}

.teman{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px}
.teman li{background:#fff;border-radius:14px;padding:14px 10px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 6px 12px -8px rgba(0,0,0,.35)}
.teman img{width:96px;height:96px;display:block}
.teman span{font-size:24px;line-height:1}

.guru{background:var(--teal);color:#E6F4F1}
.dua{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:34px;align-items:center}
.langkah{margin:0;padding-left:22px;display:grid;gap:12px;font-size:17px}
.langkah b{color:#fff}
.kartu-guru{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.35);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}

.bawah{background:#fff;border-top:4px solid var(--spidol-merah);font-size:14px;color:var(--redup)}
.baris-bawah{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:20px}

@media (max-width:860px){
  .papan{grid-template-columns:1fr;padding:24px 20px 40px;border-width:10px}
  .denah,.dua{grid-template-columns:1fr}
  .menu a:not(.tbl){display:none}
}

/* menu kelas */
.tempel .judul{margin-bottom:18px}
.menu-kelas{text-decoration:none;color:var(--tinta);transition:transform .12s}
.menu-kelas:hover{transform:rotate(0) scale(1.02)}
@media (prefers-reduced-motion:reduce){.menu-kelas{transition:none}}
.mapel-chip{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mapel-chip i{font-style:normal;background:rgba(255,255,255,.7);border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700}
.menu-kelas.terkunci{filter:grayscale(.7);opacity:.75}
.paket-saya{margin:-8px 0 16px;font-weight:600}