/* ==========================================================================
   Belajar Seru — Slides
   Ported verbatim from the Claude Design source:
   design/"Belajar Seru Slides.dc.html"  → <helmet><style>
   Additions below the marked line only.
   ========================================================================== */

html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;height:100%;overflow:hidden;background-color:#f2eee1;color:#1e2a24;background-image:linear-gradient(#1e3c2d0d 1px,#0000 1px),linear-gradient(90deg,#1e3c2d0d 1px,#0000 1px);background-size:26px 26px;font-family:Nunito,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*,*:before,*:after{box-sizing:border-box}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:#1f8a5b}a:hover{color:#15503a}
@keyframes in-right{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes in-left{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes star-pop{0%{opacity:0;transform:scale(.3) rotate(-30deg)}60%{transform:scale(1.3) rotate(10deg)}to{opacity:1;transform:none}}
.fwd{animation:.42s cubic-bezier(.2,.9,.3,1.05) both in-right}
.back{animation:.42s cubic-bezier(.2,.9,.3,1.05) both in-left}
.rise{animation:.5s cubic-bezier(.2,.9,.3,1.05) both rise}
.d1{animation-delay:.06s}.d2{animation-delay:.13s}.d3{animation-delay:.2s}
.float-y{animation:3.6s ease-in-out infinite float-y}
.star-pop{animation:.5s ease-out both star-pop}
.press:active{transform:translate(3px,4px);box-shadow:none !important}
.lift{transition:transform .18s cubic-bezier(.2,.9,.3,1.2),box-shadow .18s}
.lift:hover{transform:translateY(-5px);box-shadow:0 14px 26px #283c322e}
.thin::-webkit-scrollbar{width:7px}.thin::-webkit-scrollbar-thumb{background:#cfc7b2;border-radius:99px}.thin::-webkit-scrollbar-track{background:0 0}
/* ---- slide typography: bigger, airier, fewer words per line ---- */
.body{font-size:clamp(16px,1.55vh + .5vw,21px);line-height:1.62;color:#1e2a24}
.body p{margin:0 0 .7em}
.body b,.body strong{color:var(--ink2,#14532d);font-weight:800}
.body ul{margin:.2em 0;padding:0;list-style:none;display:grid;gap:10px}
.body li{position:relative;padding-left:30px}
.body li:before{content:"";position:absolute;left:0;top:.52em;width:14px;height:14px;border-radius:7px 3px;background:var(--accent,#1f8a5b)}
.body h3.sec{display:none}
.body .tip,.body .ingat{border-radius:6px 20px 20px 6px;margin:14px 0 0;padding:13px 16px;font-size:.94em;line-height:1.5}
.body .tip{background:#fff6df;border:2px solid #f0c86a;border-left:7px solid #e8a317}
.body .ingat{background:#eaf7f0;border:2px solid #a9d9c1;border-left:7px solid var(--accent,#1f8a5b)}
.body .tip .t,.body .ingat .t{display:block;font-family:"Baloo 2",Nunito,sans-serif;font-size:.8em;font-weight:700;letter-spacing:.08em;margin-bottom:2px}
.body .tip .t{color:#9a6a00}.body .ingat .t{color:var(--ink2,#14532d)}
.body .grid2{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin:0}
.body .mini-card{border:2px solid #e0d9c6;background:#fff;border-radius:18px 5px;padding:11px 14px}
.body .mini-card .h{font-family:"Baloo 2",Nunito,sans-serif;font-weight:700;color:var(--ink2,#14532d)}
.body .mini-card .s{font-size:.9em;color:#5f6f66}
.body details.quiz{display:none}
.body .arab{direction:rtl;font-family:Amiri,serif;font-size:1.5em;line-height:2}
.media{display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;min-height:0}
.media .viz{background:#fff;border:3px solid #1e2a24;border-radius:26px 8px 26px 8px;padding:18px;box-shadow:5px 6px 0 #1e2a24;text-align:center;max-width:100%}
.media .viz svg{display:block;width:100%;height:auto;max-height:min(46vh,420px)}
.media>div{width:100%;display:flex;flex-direction:column;gap:14px;align-items:center}
.media .viz{width:100%}
.media .viz .cap{margin-top:10px;font-size:13px;color:#5f6f66}
.media table.mini{border-collapse:separate;border-spacing:0;border:3px solid #1e2a24;border-radius:20px;overflow:hidden;width:100%;font-size:clamp(13px,1.3vh,16px);box-shadow:5px 6px 0 #1e2a24;background:#fff}
.media table.mini th{background:var(--accent,#1f8a5b);color:#fff;text-align:left;padding:10px 13px;font-weight:800;font-size:.9em}
.media table.mini td{border-top:1px solid #e0d9c6;padding:10px 13px;vertical-align:top;background:#fff}
.media table.mini tr:nth-child(2n) td{background:#fbf9f2}
mark{background:#ffe28c;border-radius:3px}
@media (max-width:900px){.split{grid-template-columns:1fr !important}.media .viz svg{max-height:32vh}}
@media (max-width:860px){.weeks-row{flex-direction:column !important;overflow-y:auto}.weeks-row>button{flex:none !important;min-height:150px}}

/* ==== additions for the standalone build (not in the design source) ==== */

/* `.hide-sm` is used by the design markup but never given a rule there. */
@media (max-width:760px){.hide-sm{display:none}}

/* The design assumed React re-mounted the root; here one #app node lives for
   the whole session, so it has to carry the full-height layout itself. */
#app{height:100dvh}

/* Keyboard focus was invisible in the source. Cia navigates with arrows and
   Tab, so give focus a ring that matches the sticker-outline look. */
:focus-visible{outline:3px solid #1e2a24;outline-offset:3px;border-radius:4px}