:root{--navy:#5B7292;--navyd:#3E5371;--pink:#F39AA0;--pinkd:#D8737A;--pinkl:#FDE6E7;--kuning:#FCC67C;--kuningd:#E3A951;--kuningl:#FEF0D8;--biru:#A5C0D5;--birul:#E4EDF4;--krem:#FDF9F0;--teks:#2E3A4D;--mut:#7C8799;--hijau:#6DB28F;--hijaul:#EAF6EF;--garis:#EEE7DA}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:Nunito,system-ui,sans-serif;color:var(--teks);background:#E9EFF5;overscroll-behavior:none}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
input{font:inherit}
.ar{font-family:Amiri,serif;font-weight:700;direction:rtl}
.h{font-family:Fredoka,Nunito,sans-serif;font-weight:600;color:var(--navyd)}
.mut{font-size:12.5px;color:var(--mut);font-weight:700}
#app{max-width:480px;margin:0 auto;min-height:100%;background:var(--krem);position:relative;display:flex;flex-direction:column;box-shadow:0 0 40px rgba(46,58,77,.08)}
.scr{flex:1;padding:16px 16px 96px;position:relative}
.scr.full{padding-bottom:24px}
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:70px;background:#fff;border-top:1px solid var(--garis);display:flex;justify-content:space-around;align-items:center;padding-bottom:env(safe-area-inset-bottom);z-index:20}
.nav a{font-size:11px;font-weight:800;color:#9AA5B5;text-align:center;text-decoration:none;min-width:64px}
.nav a i{display:block;font-style:normal;font-size:22px;filter:grayscale(1);opacity:.55;margin:0 auto 2px;width:48px;border-radius:14px;padding:1px 0}
.nav a.on{color:var(--navy)}.nav a.on i{filter:none;opacity:1;background:var(--birul)}
.card{background:#fff;border-radius:20px;padding:14px;box-shadow:0 3px 10px rgba(62,83,113,.08)}
.top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.back{width:40px;height:40px;border-radius:14px;background:#fff;display:grid;place-items:center;font-weight:900;font-size:18px;color:var(--navy);box-shadow:0 2px 6px rgba(0,0,0,.07);flex:none;text-decoration:none}
.pill{border-radius:20px;padding:5px 11px;font-size:12px;font-weight:900;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.btn{display:block;width:100%;border-radius:18px;padding:14px;text-align:center;font-family:Fredoka;font-weight:600;font-size:18px;color:#fff;background:var(--navy);box-shadow:0 4px 0 var(--navyd);text-decoration:none;transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--navyd)}
.btn.pink{background:var(--pink);box-shadow:0 4px 0 var(--pinkd)}
.btn.hijau{background:var(--hijau);box-shadow:0 4px 0 #4E9573}
.btn.putih{background:#fff;color:var(--navy);box-shadow:0 4px 0 #E3DACA}
.btn[disabled]{opacity:.45;pointer-events:none}
.bar{height:10px;border-radius:10px;background:#EDE6D8;overflow:hidden}.bar i{display:block;height:100%;background:var(--pink);border-radius:10px;transition:width .3s}
.soon{position:absolute;top:10px;right:10px;background:var(--kuning);color:var(--navyd);font-size:10.5px;font-weight:900;padding:3px 8px;border-radius:10px}
.kunci{opacity:.6;filter:grayscale(.4)}
/* beranda */
.lanjut{background:var(--navy);border-radius:24px;padding:18px;color:#fff;position:relative;overflow:hidden;text-decoration:none;display:block}
.lanjut:before{content:"";position:absolute;right:-24px;top:-24px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.08)}
.ring{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;flex:none}
.ring div{width:62px;height:62px;border-radius:50%;background:var(--navy);display:grid;place-items:center;font-size:36px}
.menu4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}
.menu4 a{text-align:center;text-decoration:none;color:var(--teks);font-size:12px;font-weight:800}
.menu4 a div{height:58px;border-radius:18px;display:grid;place-items:center;font-size:26px;margin-bottom:4px}
.hari{display:flex;justify-content:space-between;margin-top:10px}
.hari>div{text-align:center;font-size:11px;font-weight:800;color:var(--mut)}
.hari span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#F1ECE2;margin-top:3px;font-size:15px}
.hari span.on{background:var(--kuning)}
.hari span.today{background:#fff;border:3px solid var(--pink)}
/* peta */
.tempat{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;position:relative;margin-bottom:12px}
.tempat .ik{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:28px;flex:none}
/* jilid */
.halgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.halgrid a{aspect-ratio:1;border-radius:14px;background:#fff;display:grid;place-items:center;font-family:Fredoka;font-weight:600;font-size:18px;color:var(--navyd);text-decoration:none;box-shadow:0 3px 0 #E8E0D0;position:relative}
.halgrid a.done{background:var(--kuningl);box-shadow:0 3px 0 var(--kuningd)}
.halgrid a.done:after{content:"⭐";position:absolute;top:-6px;right:-4px;font-size:14px}
.halgrid a.lock{background:#F1ECE2;color:#B9B2A4;box-shadow:none}
.baris{display:flex;flex-direction:row-reverse;align-items:center;padding:4px 6px;border-radius:14px;border:2px solid transparent;cursor:pointer;transition:background .15s}
.baris.on{background:var(--birul);border-color:var(--navy)}
.baris .no{width:24px;color:#B0A99A;font-weight:900;font-size:12px;text-align:center}
.baris .isi{flex:1;display:flex;flex-direction:row-reverse;justify-content:space-around;font-size:44px;line-height:1.7}
.baris .isi span{padding:0 4px;border-radius:10px}
.baris .isi span.baru{color:var(--pinkd)}
/* games */
.gamecard{display:flex;gap:12px;align-items:center;padding:16px;border-radius:22px;text-decoration:none;color:inherit;position:relative;margin-bottom:12px;overflow:hidden}
.gamecard .em{font-size:44px;width:70px;height:70px;border-radius:20px;background:rgba(255,255,255,.6);display:grid;place-items:center;flex:none}
.sky{position:absolute;inset:0;background:linear-gradient(#BFD5E6,#E4EDF4 60%,#FDF9F0);overflow:hidden}
.balon{position:absolute;bottom:-160px;width:96px;height:112px;border-radius:50% 50% 48% 48%;display:grid;place-items:center;font-size:54px;color:#fff;cursor:pointer;animation:naik linear forwards;user-select:none}
.balon:after{content:"";position:absolute;bottom:-46px;left:47px;width:2px;height:46px;background:#9AA5B5}
.balon:before{content:"";position:absolute;left:20px;top:16px;width:18px;height:24px;border-radius:50%;background:rgba(255,255,255,.45)}
.balon.pop{animation:pop .25s forwards!important}
.balon.salah{animation-play-state:paused;filter:grayscale(.6)}
@keyframes naik{to{transform:translateY(calc(-100vh - 260px))}}
@keyframes pop{to{transform:scale(1.6);opacity:0}}
.kartu{aspect-ratio:3/4;border-radius:16px;position:relative;cursor:pointer;perspective:600px}
.kartu .in{position:absolute;inset:0;transition:transform .35s;transform-style:preserve-3d}
.kartu.buka .in,.kartu.cocok .in{transform:rotateY(180deg)}
.kartu .depan,.kartu .blkg{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;display:grid;place-items:center}
.kartu .blkg{background:var(--navy);box-shadow:0 4px 0 var(--navyd);color:#fff;font-family:Fredoka;font-size:26px}
.kartu .depan{background:#fff;border:3px solid var(--pink);transform:rotateY(180deg);text-align:center}
.kartu.cocok .depan{border-color:var(--hijau);background:var(--hijaul)}
.slot{width:72px;height:78px;border-radius:16px;display:grid;place-items:center;font-size:44px}
.slot.kosong{background:var(--birul);border:2px dashed var(--biru)}
.tile{height:70px;border-radius:16px;background:#fff;display:grid;place-items:center;font-size:40px;box-shadow:0 4px 0 #E3DACA;color:var(--navyd);transition:transform .08s}
.tile:active{transform:translateY(3px)}
.tile.pakai{background:#F1ECE2;color:#D5CCBB;box-shadow:none;pointer-events:none}
.umpan{border-radius:18px;padding:12px;display:flex;gap:10px;align-items:center;margin-top:14px}
.umpan img{width:48px;height:48px;border-radius:50%}
.goyang{animation:goyang .35s}
@keyframes goyang{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.modal{position:fixed;inset:0;background:rgba(46,58,77,.45);display:grid;place-items:center;z-index:50;padding:20px}
.modal .card{width:100%;max-width:360px;text-align:center;padding:22px}
.konfeti{position:fixed;top:-20px;font-size:22px;z-index:60;animation:jatuh 1.6s linear forwards;pointer-events:none}
@keyframes jatuh{to{transform:translateY(110vh) rotate(360deg)}}
.chip{display:inline-block;background:var(--pinkl);border-radius:10px;padding:0 10px;font-size:28px;margin:2px}
.field{width:100%;padding:13px 14px;border-radius:14px;border:2px solid var(--garis);background:#fff;font-size:16px;margin-top:6px;outline:none}
.field:focus{border-color:var(--biru)}
label.lbl{display:block;font-size:13px;font-weight:800;color:var(--navyd);margin-top:12px}
.err{color:#C9616A;font-size:13px;font-weight:800;margin-top:10px;min-height:18px}
.grafik{display:flex;align-items:flex-end;justify-content:space-between;height:110px;padding:0 4px}
.grafik>div{text-align:center;font-size:11px;font-weight:800;color:var(--mut)}
.grafik i{display:block;width:26px;border-radius:8px;background:var(--biru);margin:0 auto 3px}
.grafik i.today{background:var(--navy)}

/* Kebun Kurma */
.kebun{min-height:100vh;background:linear-gradient(#CFE2EF,#E4EDF4 45%,#F6E7C8 78%,#E9D3A6);position:relative;overflow:hidden}
.pohon{position:relative;height:560px;max-width:420px;margin:-20px auto 0}
.pohonSvg{position:absolute;inset:0;width:100%;height:100%}
.kurma{position:absolute;width:60px;margin-left:-30px;cursor:pointer;transform-origin:50% 0;animation:ayun 2.4s ease-in-out infinite alternate;transition:transform .65s cubic-bezier(.5,-.2,.7,1),opacity .65s;touch-action:manipulation;user-select:none;z-index:2}
.kurma .tangkai{width:3px;height:16px;background:#C9A35F;margin:0 auto}
.kurma .isi{height:74px;border-radius:50%/46%;background:radial-gradient(circle at 35% 28%,#B9783F,#8B4A1E 60%,#6E3612);display:grid;place-items:center;color:#FFF3DF;font-size:36px;box-shadow:0 4px 8px rgba(80,40,10,.3)}
.kurma.petik{animation:none;z-index:4}
.kurma.goyang .isi{animation:goyang .35s;filter:saturate(.5)}
@keyframes ayun{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.keranjang{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);text-align:center;z-index:3}
.kerIsi{position:absolute;left:50%;transform:translateX(-50%);bottom:38px;width:70px;display:flex;flex-wrap:wrap-reverse;justify-content:center;font-size:12px;line-height:1}

/* Menu 3 kolom, sertifikat, cetak */
.menu3{grid-template-columns:repeat(3,1fr)}
.menu3 a div{height:54px}
.sertif{background:#fff;border-radius:22px;padding:26px 22px;text-align:center;border:10px solid var(--kuningl);outline:3px dashed var(--pink);outline-offset:-20px;box-shadow:0 6px 20px rgba(91,114,146,.15)}
@media print{
 @page{size:A4 landscape;margin:12mm}
 .nav,.noprint,.modal,.konfeti{display:none!important}
 body,#app,.scr{background:#fff!important;box-shadow:none!important}
 .sertif{box-shadow:none;max-width:none;padding:40px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}