/* ============================================================
   E-Modul Interaktif "Tapa Gala" — palet terinspirasi lapangan
   tanah & rumput permainan tradisional itu sendiri.
   ============================================================ */
:root{
  --hijau-900:#0e3d28;
  --hijau-800:#155c3a;
  --hijau-700:#1c7a4a;
  --hijau-600:#249457;
  --hijau-100:#e6f4ea;
  --hijau-050:#f2f9f3;
  --tanah-100:#f4ecd8;
  --tanah-200:#e9dcb8;
  --kayu-garis:#8a6b3c;
  --kelincahan:#f08a3c;
  --kecepatan:#2e8ae6;
  --kerjasama:#3aa35a;
  --strategi:#7c5cd6;
  --sportivitas:#e04f5f;
  --ink:#1c2b23;
  --ink-soft:#4f6157;
  --white:#ffffff;
  --radius:16px;
  --shadow:0 8px 24px rgba(14,61,40,.10);
  --shadow-sm:0 2px 8px rgba(14,61,40,.08);
  font-size:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Poppins","Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--tanah-100);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 220px);
  min-height:100vh;
}
h1,h2,h3,h4{font-family:"Poppins",sans-serif; margin:0 0 .4em; color:var(--hijau-900); letter-spacing:-.01em}
p{line-height:1.65; color:var(--ink-soft)}
a{color:inherit}
.icon{display:inline-block; vertical-align:middle}

/* ---------- App shell ---------- */
.app-shell{
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  background:var(--tanah-100);
  position:relative;
  box-shadow:0 0 60px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
}

/* ---------- Topbar ---------- */
.topbar{
  background:linear-gradient(120deg, var(--hijau-800), var(--hijau-700));
  color:#fff;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky; top:0; z-index:30;
  box-shadow:var(--shadow-sm);
}
.topbar .title{
  font-weight:600; font-size:.95rem; letter-spacing:.02em;
  display:flex; align-items:center; gap:8px; text-transform:uppercase;
}
.topbar a.iconbtn, .topbar button.iconbtn{
  background:rgba(255,255,255,.14); border:none; color:#fff; width:36px;height:36px;
  border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.topbar a.iconbtn:hover, .topbar button.iconbtn:hover{background:rgba(255,255,255,.26)}

/* ---------- Side / slide menu ---------- */
.overlay{position:fixed; inset:0; background:rgba(14,25,20,.5); opacity:0; pointer-events:none; transition:opacity .25s; z-index:40}
.overlay.open{opacity:1; pointer-events:auto}
.sidemenu{
  position:fixed; top:0; right:-300px; width:280px; height:100%;
  background:var(--hijau-900); color:#fff; z-index:50; padding:20px 16px;
  transition:right .28s ease; box-shadow:-10px 0 30px rgba(0,0,0,.25);
}
.sidemenu.open{right:0}
.sidemenu .close{background:rgba(255,255,255,.12); border:none; color:#fff; width:34px;height:34px;border-radius:9px; cursor:pointer; margin-bottom:18px}
.sidemenu nav a{
  display:flex; align-items:center; gap:10px;
  padding:12px 10px; border-radius:10px; color:#eaf5ec; text-decoration:none;
  font-size:.92rem; margin-bottom:4px;
}
.sidemenu nav a.active, .sidemenu nav a:hover{background:rgba(255,255,255,.12)}

/* ---------- Content ---------- */
.content{flex:1; padding:18px 16px 90px}

/* ---------- Cover / Hero ---------- */
.hero{
  background:linear-gradient(180deg,#bfe3ea 0%, #cdebd0 55%, var(--tanah-200) 55%, var(--tanah-100) 100%);
  padding:26px 20px 24px; text-align:center; border-radius:0 0 28px 28px;
}
.eyebrow{
  display:inline-block; background:var(--hijau-800); color:#fff; font-size:.72rem;
  letter-spacing:.14em; font-weight:600; padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
.hero h1{
  font-size:2.6rem; line-height:.95; font-weight:800; color:var(--hijau-900);
  text-shadow:0 3px 0 rgba(255,255,255,.5);
}
.hero .tagline{color:var(--hijau-800); font-weight:600; margin-top:6px}
.hero .subtag{color:var(--ink-soft); font-size:.88rem; margin-top:2px}

.field-scene{
  margin:18px auto 0; max-width:420px; border-radius:14px; overflow:hidden;
  border:3px solid #fff; box-shadow:var(--shadow);
}
.field-scene svg{display:block; width:100%; height:auto}

.badge-row{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:18px 0 6px}
.badge{
  background:#fff; border-radius:14px; padding:10px 10px 8px; width:84px; text-align:center;
  box-shadow:var(--shadow-sm); font-size:.68rem; font-weight:600; color:var(--ink-soft);
}
.badge .dot{
  width:34px; height:34px; border-radius:10px; margin:0 auto 6px; display:flex;
  align-items:center; justify-content:center; color:#fff;
}
.badge.kelincahan .dot{background:var(--kelincahan)}
.badge.kecepatan .dot{background:var(--kecepatan)}
.badge.kerjasama .dot{background:var(--kerjasama)}
.badge.strategi .dot{background:var(--strategi)}
.badge.sportivitas .dot{background:var(--sportivitas)}

.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  background:var(--hijau-700); color:#fff; border:none; padding:14px 26px;
  border-radius:14px; font-weight:700; font-size:.95rem; cursor:pointer; text-decoration:none;
  box-shadow:0 6px 16px rgba(28,122,74,.35);
}
.btn:hover{background:var(--hijau-800)}
.btn.block{display:flex; width:100%}
.btn.ghost{background:#fff; color:var(--hijau-800); border:1.5px solid var(--hijau-700); box-shadow:none}

/* ---------- Beranda ---------- */
.welcome-box h2{font-size:1.5rem}
.menu-list{display:flex; flex-direction:column; gap:10px; margin-top:16px}
.menu-item{
  display:flex; align-items:center; gap:12px; background:#fff; border-radius:14px;
  padding:14px; box-shadow:var(--shadow-sm); text-decoration:none; color:var(--ink);
  border:1px solid rgba(14,61,40,.06);
}
.menu-item:hover{border-color:var(--hijau-600)}
.menu-item .ico{
  width:38px;height:38px; border-radius:10px; background:var(--hijau-100); color:var(--hijau-800);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.menu-item .lbl{font-weight:600; font-size:.9rem}
.menu-item .go{margin-left:auto; color:var(--hijau-600)}

.tip-box{
  margin-top:18px; background:linear-gradient(135deg, var(--hijau-700), var(--hijau-800));
  color:#fff; border-radius:16px; padding:16px; display:flex; gap:12px;
}
.tip-box .ico{
  width:40px;height:40px; background:rgba(255,255,255,.18); border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.tip-box h4{color:#fff; font-size:.92rem; margin-bottom:4px}
.tip-box p{color:rgba(255,255,255,.88); font-size:.82rem; margin:0}

/* ---------- Generic page header ---------- */
.page-lead{
  background:#fdf7e3; border:1px solid #f0e2a8; border-radius:14px; padding:14px 16px; margin-bottom:16px;
}
.page-lead h3{font-size:1rem; margin-bottom:2px}

.step-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.step-list li{display:flex; gap:12px; align-items:flex-start}
.step-list .ico{
  width:34px;height:34px; border-radius:10px; background:var(--hijau-100); color:var(--hijau-800);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.step-list .txt{font-size:.88rem; color:var(--ink); line-height:1.5}
.step-list .txt b{display:block; font-size:.9rem; margin-bottom:1px}

.note-box{
  margin-top:16px; background:var(--hijau-100); border-radius:12px; padding:12px 14px;
  font-size:.85rem; color:var(--hijau-900); border:1px solid #cfe9d6;
}

/* ---------- Materi cards ---------- */
.material-photo{
  width:100%; border-radius:14px; overflow:hidden; margin:14px 0; box-shadow:var(--shadow-sm);
}
.material-photo svg{display:block; width:100%; height:auto}
.card-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.value-card{border-radius:14px; padding:14px; box-shadow:var(--shadow-sm)}
.value-card .ico{width:32px;height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; color:#fff}
.value-card h4{font-size:.88rem; margin-bottom:4px}
.value-card p{font-size:.76rem; margin:0; color:var(--ink-soft)}
.value-card.kelincahan{background:#fff3e8}
.value-card.kelincahan .ico{background:var(--kelincahan)}
.value-card.kecepatan{background:#e9f2fd}
.value-card.kecepatan .ico{background:var(--kecepatan)}
.value-card.kerjasama{background:#eaf7ee}
.value-card.kerjasama .ico{background:var(--kerjasama)}
.value-card.strategi{background:#f1ecfb}
.value-card.strategi .ico{background:var(--strategi)}

/* ---------- Cara permainan (tabs + field diagram) ---------- */
.subnav{display:flex; flex-direction:column; gap:4px; background:#fff; border-radius:14px; padding:10px; box-shadow:var(--shadow-sm); margin-bottom:14px}
.subnav a{display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:9px; text-decoration:none; color:var(--ink-soft); font-size:.85rem}
.subnav a.active{background:var(--hijau-100); color:var(--hijau-800); font-weight:600}
.field-diagram{margin:14px 0}
.field-diagram svg{width:100%; height:auto}
.field-caption{text-align:center; font-size:.78rem; color:var(--ink-soft); margin-top:6px}

/* ---------- Alur permainan steps grid ---------- */
.flow-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.flow-card{background:#fff; border-radius:14px; padding:12px; box-shadow:var(--shadow-sm)}
.flow-card .num{
  width:26px;height:26px; border-radius:8px; background:var(--hijau-700); color:#fff; font-weight:700;
  font-size:.8rem; display:flex; align-items:center; justify-content:center; margin-bottom:8px;
}
.flow-card svg.mini{width:100%; height:52px; margin-bottom:6px}
.flow-card p{font-size:.74rem; margin:0; color:var(--ink-soft); line-height:1.4}

/* ---------- Video ---------- */
.video-wrap{border-radius:16px; overflow:hidden; box-shadow:var(--shadow); background:#0d1f16}
.video-wrap video{width:100%; display:block; max-height:280px; background:#000}
.video-caption{margin-top:12px}

/* ---------- Evaluasi / quiz ---------- */
.quiz-progress{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.quiz-progress .pill{background:var(--hijau-800); color:#fff; font-size:.72rem; font-weight:700; padding:5px 12px; border-radius:999px}
.quiz-card{background:#fff; border-radius:16px; padding:16px; box-shadow:var(--shadow-sm)}
.quiz-card h3{font-size:1rem; margin-bottom:14px}
.option{
  display:flex; align-items:center; gap:10px; padding:12px 12px; border-radius:12px; border:1.5px solid #e6e0cc;
  margin-bottom:10px; cursor:pointer; font-size:.88rem; background:#fdfcf7;
}
.option input{accent-color:var(--hijau-700); width:18px; height:18px; flex-shrink:0}
.option:hover{border-color:var(--hijau-600)}
.option.selected{border-color:var(--hijau-700); background:var(--hijau-050)}
.option.correct{border-color:var(--kerjasama); background:#eaf7ee}
.option.incorrect{border-color:var(--sportivitas); background:#fdecee}

.quiz-panel{background:#fff; border-radius:14px; padding:14px; box-shadow:var(--shadow-sm); margin-top:14px}
.quiz-panel h4{font-size:.85rem; margin-bottom:10px}
.qnum-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.qnum{
  aspect-ratio:1; border-radius:9px; background:var(--hijau-100); color:var(--hijau-800); font-weight:700;
  font-size:.85rem; display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.qnum.done{background:var(--hijau-700); color:#fff}
.qnum.current{outline:2px solid var(--hijau-900); outline-offset:2px}

.result-card{background:#fff; border-radius:18px; padding:22px; text-align:center; box-shadow:var(--shadow)}
.result-card .score{font-size:2.6rem; font-weight:800; color:var(--hijau-800)}
.result-card .score span{font-size:1.1rem; color:var(--ink-soft); font-weight:600}

/* ---------- Refleksi ---------- */
textarea.reflect{
  width:100%; border-radius:12px; border:1.5px solid #e6e0cc; padding:12px; font-family:inherit;
  font-size:.88rem; resize:vertical; min-height:110px; background:#fdfcf7;
}
.rating-row{display:flex; gap:8px; margin:10px 0 16px}
.rating-row label{
  flex:1; text-align:center; padding:10px 0; border-radius:10px; border:1.5px solid #e6e0cc; cursor:pointer;
  font-size:.85rem; font-weight:600; color:var(--ink-soft);
}
.rating-row input{display:none}
.rating-row input:checked + span{color:var(--hijau-800)}
.rating-row label:has(input:checked){border-color:var(--hijau-700); background:var(--hijau-050); color:var(--hijau-800)}

/* ---------- Profil ---------- */
.profile-card{background:#fff; border-radius:16px; padding:20px; text-align:center; box-shadow:var(--shadow-sm)}
.avatar{
  width:84px;height:84px;border-radius:50%; margin:0 auto 12px; background:var(--hijau-100); color:var(--hijau-800);
  display:flex; align-items:center; justify-content:center;
}
.profile-meta{display:flex; flex-direction:column; gap:8px; margin-top:16px; text-align:left}
.profile-meta .row{display:flex; gap:10px; font-size:.85rem; padding:9px 0; border-bottom:1px dashed #e6e0cc}
.profile-meta .row b{color:var(--hijau-900); min-width:104px; display:inline-block}

/* ---------- Bottom pagination ---------- */
.pager{
  position:sticky; bottom:0; background:#fff; border-top:1px solid #eee2c4;
  padding:12px 16px; display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 -6px 16px rgba(0,0,0,.05);
}
.pager .navbtn{
  display:flex; align-items:center; gap:6px; background:var(--hijau-100); color:var(--hijau-800);
  border:none; border-radius:10px; padding:9px 14px; font-weight:600; font-size:.82rem; text-decoration:none;
  cursor:pointer;
}
.pager .navbtn.disabled{opacity:.35; pointer-events:none}
.pager .count{font-size:.78rem; color:var(--ink-soft); font-weight:600}

@media (max-width:380px){
  .hero h1{font-size:2.1rem}
  .card-grid, .flow-grid{grid-template-columns:1fr 1fr}
}