@font-face{font-family:"Fredoka";src:url(/aset/Fredoka-Variable.ttf) format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:"Lilita One";src:url(/aset/LilitaOne-Regular.ttf) format("truetype");font-display:swap}
:root{--ink:#2B2140;--ink2:#5a4f6e;--bg:#FFF5FA;--card:#fff;--line:#f0dce8;
--sky:#3EC5FF;--skyD:#119FE0;--skyT:#e3f6ff;--grape:#A66BFF;--grapeD:#8045E0;--grapeT:#f1e8ff;
--mint:#2FD8A0;--mintD:#14AE7D;--mintT:#dcf9ee;--pink:#FF5FA2;--orange:#FF8A3D;--lemon:#FFD43B}
*{box-sizing:border-box;margin:0}
body{font-family:Fredoka,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
header.top{display:flex;align-items:center;gap:10px;padding:14px 0}
header.top a.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
header.top img{width:44px;height:44px;border-radius:50%}
.wordmark{font-family:"Lilita One";font-size:26px;color:var(--skyD);letter-spacing:.3px}
header.top .ig{margin-left:auto;font-weight:600;font-size:15px;text-decoration:none;padding:8px 14px;border-radius:999px;background:#fff;border:2px solid var(--line)}
.bunting{height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='18'%3E%3Cpath d='M0 0h30L15 18z' fill='%23FF5FA2'/%3E%3Cpath d='M30 0h30L45 18z' fill='%232FD8A0'/%3E%3Cpath d='M60 0h30L75 18z' fill='%23A66BFF'/%3E%3Cpath d='M90 0h30l-15 18z' fill='%23FF8A3D'/%3E%3Cpath d='M120 0h30l-15 18z' fill='%233EC5FF'/%3E%3C/svg%3E") repeat-x 0 0/150px 18px}
.hero{padding:28px 0 18px}
.hero h1{font-family:"Lilita One";font-weight:400;font-size:clamp(30px,6vw,52px);line-height:1.08;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--skyD)}
.hero p{font-size:18px;color:var(--ink2);margin-top:12px;max-width:52ch}
.tag{display:inline-block;align-self:flex-start;font-weight:600;font-size:13px;padding:4px 11px;border-radius:999px}
.t-kata{background:var(--skyT);color:#0b5f87}.t-inggris{background:var(--grapeT);color:#5a2bb0}.t-baik{background:var(--mintT);color:#0b6e4f}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 8px}
.chips button{font:600 15px Fredoka,sans-serif;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer}
.chips button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips button:focus-visible,a:focus-visible,video:focus-visible{outline:3px solid var(--skyD);outline-offset:2px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding:12px 0 40px}
@media(max-width:520px){.grid{grid-template-columns:1fr 1fr;gap:12px}}
.card{display:flex;flex-direction:column;background:var(--card);border-radius:20px;overflow:hidden;text-decoration:none;box-shadow:0 3px 0 var(--line);border:2px solid var(--line);transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.card .img{aspect-ratio:4/5;background:#eee center 30%/cover no-repeat;position:relative}
.card .play{position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;background:#fffffff0;display:grid;place-items:center;box-shadow:0 2px 6px #0002}
.card .play::after{content:"";border-left:13px solid var(--ink);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.card .txt{padding:10px 12px 14px;display:flex;flex-direction:column;gap:6px}
.card .judul{font-family:"Lilita One";font-size:21px;line-height:1.1;overflow-wrap:anywhere}
.card .inti{font-size:14px;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
footer{padding:28px 0 40px;color:var(--ink2);font-size:14px;border-top:2px solid var(--line);margin-top:10px}
footer b{font-family:"Lilita One";font-weight:400;color:var(--skyD);font-size:18px}
/* halaman tonton */
.tonton{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:28px;padding:10px 0 30px;align-items:start}
@media(max-width:820px){.tonton{grid-template-columns:1fr;gap:18px}}
.player{background:#000;border-radius:22px;overflow:hidden;aspect-ratio:9/16;max-height:78vh;margin:0 auto;width:100%;box-shadow:0 6px 0 var(--line)}
.player video{width:100%;height:100%;display:block;background:#000}
.info h1{font-family:"Lilita One";font-weight:400;font-size:clamp(34px,7vw,56px);line-height:1.05;margin:10px 0 6px;overflow-wrap:anywhere}
.box{background:#fff;border:2px solid var(--line);border-radius:18px;padding:14px 16px;margin-top:14px}
.box h2{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);font-weight:600;margin-bottom:4px}
.box p{font-size:18px}
.pairs{list-style:none;padding:0;display:grid;gap:6px}
.pairs li{font-size:18px}.pairs b{font-family:"Lilita One";font-weight:400;font-size:22px;color:var(--grapeD)}
.lembar{background:var(--skyT);border-color:#bfe8fb}
.nav{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:16px;padding:12px 18px;border-radius:999px;text-decoration:none;background:#fff;border:2px solid var(--line)}
.btn.utama{background:var(--ink);color:#fff;border-color:var(--ink)}
.sub{font-family:"Lilita One";font-weight:400;font-size:26px;margin:16px 0 4px}
.simple{padding:40px 0 60px;max-width:560px}
.simple h1{font-family:"Lilita One";font-weight:400;font-size:clamp(30px,6vw,46px);line-height:1.1}
.simple p{font-size:18px;color:var(--ink2);margin:12px 0 20px}

.paket{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:22px;background:#fff;border:2px solid var(--line);border-radius:24px;padding:18px;align-items:center;box-shadow:0 4px 0 var(--line)}
@media(max-width:640px){.paket{grid-template-columns:1fr}}
.paket img{width:100%;border-radius:14px;box-shadow:0 2px 10px #0001}
.paket h3{font-family:"Lilita One";font-weight:400;font-size:clamp(28px,5vw,40px);line-height:1.05;margin:6px 0}
.paket ul{padding-left:20px;margin:8px 0 14px;font-size:17px}
.harga{font-family:"Lilita One";font-size:28px;color:var(--ink)}
.segera{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:14px}
.segera div{background:#fff;border:2px dashed var(--line);border-radius:20px;padding:16px}
.segera b{font-family:"Lilita One";font-weight:400;font-size:22px;display:block;margin:6px 0 2px}
.segera span.k{font-size:14px;color:var(--ink2)}
.hari{list-style:none;padding:0;display:grid;gap:10px;margin:14px 0 24px}
.hari a{display:flex;align-items:center;gap:14px;background:#fff;border:2px solid var(--line);border-radius:18px;padding:10px 14px;text-decoration:none}
.hari img{width:56px;height:72px;object-fit:cover;object-position:center 30%;border-radius:10px}
.hari .n{font-size:13px;color:var(--ink2);font-weight:600}.hari .w{font-family:"Lilita One";font-size:22px;line-height:1.1}
.hari .cek{margin-left:auto;width:32px;height:32px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:18px;flex:none}
.hari a.done .cek{background:var(--mint);border-color:var(--mintD);color:#fff}
.progres{height:14px;background:#fff;border:2px solid var(--line);border-radius:999px;overflow:hidden;margin-top:12px}
.progres i{display:block;height:100%;background:var(--mint);width:0;transition:width .3s}
.btn.selesai[aria-pressed=true]{background:var(--mint);border-color:var(--mintD);color:#06392a}
.kunci{opacity:.75}
h2.judul-sesi{font-family:"Lilita One";font-weight:400;font-size:clamp(26px,5vw,34px);margin:30px 0 4px}
p.sesi{color:var(--ink2);font-size:17px}