/* =========================================================
   Platform Edukasi — komponen tambahan di atas style.css
   ========================================================= */

/* ---------- Palet meriah per jenjang ---------- */
:root {
  --sd-1: #FF7A45; --sd-2: #FF477E; --sd-bg: #FFF1EA;
  --smp-1: #12B8A6; --smp-2: #2F8FE0; --smp-bg: #E9FBF7;
  --sma-1: #7C5CFF; --sma-2: #B347FF; --sma-bg: #F3EEFF;
  --fun-yellow: #FFC93C;
}
.jenjang-sd { --j1: var(--sd-1); --j2: var(--sd-2); --jbg: var(--sd-bg); }
.jenjang-smp { --j1: var(--smp-1); --j2: var(--smp-2); --jbg: var(--smp-bg); }
.jenjang-sma { --j1: var(--sma-1); --j2: var(--sma-2); --jbg: var(--sma-bg); }

/* ---------- Submenu jenjang sebagai anak dari nav "Bank Soal" / "Olimpiade" ---------- */
.nav-dropdown { position: relative; display: inline-flex; padding-bottom: 10px; margin-bottom: -10px; }
.nav-dropdown > a::after { content: '\25BE'; font-size: .7em; margin-left: 5px; opacity: .6; }
.jenjang-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px;
  background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px; z-index: 200;
}
.nav-dropdown.open .jenjang-menu { display: block; }
.jenjang-menu a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-weight: 700; color: var(--navy-900); font-size: .88rem;
}
.jenjang-menu a:hover { background: var(--gray-50); }
.jenjang-menu .j-icon {
  width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .9rem;
  background: linear-gradient(135deg, var(--j1), var(--j2)); color: var(--white); flex-shrink: 0;
}
.jenjang-menu a small { display: block; font-weight: 500; color: var(--gray-500); font-size: .7rem; }

/* Dropdown jenjang ringkas di dalam konten (pengganti baris chip agar tidak memenuhi halaman) */
.jenjang-select-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.jenjang-select-row label { font-weight: 700; font-size: .85rem; color: var(--gray-700); }
.jenjang-select-row select {
  padding: 10px 34px 10px 14px; border-radius: 999px; border: 1.5px solid var(--gray-300); background: var(--white);
  font-weight: 700; font-size: .9rem; color: var(--navy-900); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338414f' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
.jenjang-select-row select:focus { outline: none; border-color: var(--navy-700); }

/* ---------- Banner meriah (hero berwarna dengan bentuk dekoratif) ---------- */
.fun-banner {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--j1, var(--sd-1)), var(--j2, var(--sd-2)));
  color: var(--white); padding: 44px 32px; margin-bottom: -46px;
}
.fun-banner::before, .fun-banner::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.18);
}
.fun-banner::before { width: 180px; height: 180px; top: -70px; right: -40px; }
.fun-banner::after { width: 120px; height: 120px; bottom: -60px; left: 10%; background: rgba(255,255,255,.12); }
.fun-banner .fun-shape { position: absolute; opacity: .9; }
.fun-banner h1 { color: var(--white); font-size: 1.9rem; margin-bottom: 6px; }
.fun-banner p { color: rgba(255,255,255,.9); max-width: 560px; }
.fun-banner-inner { position: relative; z-index: 2; }
.fun-shelf {
  position: relative; z-index: 3; background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 20px 24px; margin: 0 4px 32px;
}

/* Chip filter versi meriah (dipakai di atas fun-shelf) */
.fun-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.fun-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  border: 2px solid var(--gray-100); background: var(--white); font-weight: 700; font-size: .85rem; color: var(--gray-700);
  cursor: pointer; transition: all .15s ease;
}
.fun-chip:hover { border-color: var(--j1, var(--navy-700)); }
.fun-chip.active { border-color: transparent; background: linear-gradient(120deg, var(--j1, var(--navy-800)), var(--j2, var(--navy-700))); color: var(--white); box-shadow: var(--shadow-sm); }

/* ---------- Kartu olimpiade versi meriah ---------- */
.olim-card.fun { padding: 0; overflow: hidden; border: none; box-shadow: var(--shadow-md); }
.olim-card.fun .olim-ribbon {
  padding: 20px 22px 34px; color: var(--white); position: relative; overflow: hidden;
}
.olim-card.fun .olim-ribbon::after {
  content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.16); top: -30px; right: -20px;
}
.olim-card.fun .olim-badge {
  width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.22); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 10px;
}
.olim-card.fun .olim-ribbon h3 { color: var(--white); margin: 0; font-size: 1.05rem; position: relative; z-index: 1; }
.olim-card.fun .olim-body { padding: 18px 22px 22px; margin-top: -18px; background: var(--white); border-radius: 18px 18px 0 0; position: relative; z-index: 1; }
.olim-card.fun .ribbon-osn { background: linear-gradient(135deg, #FFB020, #FF7A45); }
.olim-card.fun .ribbon-cambridge-checkpoint { background: linear-gradient(135deg, #2F8FE0, #12B8A6); }
.olim-card.fun .ribbon-igcse { background: linear-gradient(135deg, #7C5CFF, #B347FF); }
.jenjang-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.jenjang-pill.sd { background: #FFE3D4; color: #B84D1F; }
.jenjang-pill.smp { background: #CFF7EF; color: #0E7C6E; }
.jenjang-pill.sma { background: #E7DBFF; color: #5B34C7; }

/* ---------- Bentuk dekoratif kecil (bintang, titik) untuk mempermanis section ---------- */
.fun-dot { position: absolute; border-radius: 50%; }
.deco-star { filter: drop-shadow(0 2px 4px rgba(0,0,0,.1)); }

@media (max-width: 760px) {
  .fun-banner { margin-bottom: -60px; padding: 32px 20px 56px; }
  .fun-shelf { padding: 16px; }
}

/* ---------- Dashboard shell (siswa/guru/orangtua) ---------- */
.app-shell { min-height: 100vh; background: var(--gray-50); }
.app-content { max-width: 1100px; margin: 0 auto; padding: 32px 24px 64px; }
.app-nav .container { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.app-nav .nav-links { display: flex; gap: 4px; align-items: center; }
.app-nav .nav-links a { padding: 10px 14px; border-radius: 8px; font-weight: 600; font-size: .9rem; color: var(--navy-900); }
.app-nav .nav-links a:hover, .app-nav .nav-links a.active { background: var(--navy-100); color: var(--gold-600); }
.app-nav .nav-user { display: flex; align-items: center; gap: 12px; }
.role-badge { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: var(--navy-100); color: var(--navy-800); padding: 4px 10px; border-radius: 999px; }
.page-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.page-title-row h1 { margin: 0; font-size: 1.6rem; }
.page-title-row p.sub { margin: 4px 0 0; }

/* ---------- Breadcrumb picker (jenjang -> kurikulum -> mapel -> kelas -> bab) ---------- */
.picker-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.picker-steps .chip { padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--gray-300); background: var(--white); font-size: .85rem; font-weight: 600; color: var(--gray-700); }
.picker-steps .chip.active { border-color: var(--navy-800); background: var(--navy-900); color: var(--white); }
.option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.option-card { background: var(--white); border: 1.5px solid var(--gray-100); border-radius: var(--radius-md); padding: 18px; text-align: left; cursor: pointer; transition: all .15s ease; }
.option-card:hover { border-color: var(--navy-700); box-shadow: var(--shadow-sm); }
.option-card h4 { margin: 0 0 4px; font-size: 1rem; }
.option-card span { font-size: .8rem; color: var(--gray-500); }
.option-card.disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Bab list & mode picker ---------- */
.bab-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: 14px; flex-wrap: wrap; }
.bab-card .bab-info h4 { margin: 0 0 4px; }
.bab-card .bab-info span { font-size: .82rem; color: var(--gray-500); }
.bab-card .bab-actions { display: flex; gap: 10px; }

/* ---------- Quiz runner ---------- */
.quiz-wrap { max-width: 760px; margin: 0 auto; }
.quiz-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.quiz-progress { flex: 1; min-width: 160px; }
.quiz-progress-bar { height: 8px; border-radius: 999px; background: var(--gray-100); overflow: hidden; }
.quiz-progress-bar > div { height: 100%; background: var(--gold-500); transition: width .2s ease; }
.quiz-progress span { font-size: .78rem; color: var(--gray-500); }
.timer-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--navy-900); color: var(--white); padding: 10px 18px; border-radius: 999px; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.timer-badge.warning { background: #c0392b; }
.quiz-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 30px; }
.quiz-card .tag { margin-bottom: 14px; }
.quiz-question { font-size: 1.15rem; font-weight: 700; margin-bottom: 22px; line-height: 1.5; }
.quiz-options { display: flex; flex-direction: column; gap: 12px; }
.quiz-option { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); cursor: pointer; transition: all .15s ease; font-size: .95rem; }
.quiz-option:hover { border-color: var(--navy-700); }
.quiz-option.selected { border-color: var(--navy-800); background: var(--navy-100); font-weight: 700; }
.quiz-option.correct { border-color: #1e8a4c; background: #e3f6ea; font-weight: 700; }
.quiz-option.incorrect { border-color: #c0392b; background: #fdeaea; font-weight: 700; }
.quiz-option .letter { width: 28px; height: 28px; border-radius: 50%; background: var(--gray-100); color: var(--navy-800); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; flex-shrink: 0; }
.quiz-isian input { width: 100%; padding: 14px 16px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; }
.quiz-feedback { margin-top: 20px; padding: 16px 18px; border-radius: var(--radius-sm); font-size: .9rem; }
.quiz-feedback.correct { background: #e3f6ea; color: #1e8a4c; }
.quiz-feedback.incorrect { background: #fdeaea; color: #c0392b; }
.quiz-feedback p { color: inherit; margin: 6px 0 0; }
.quiz-nav { display: flex; justify-content: space-between; margin-top: 26px; gap: 12px; }
.quiz-nav-dots { display: flex; gap: 6px; flex-wrap: wrap; margin: 20px 0; }
.quiz-nav-dots button { width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--gray-300); background: var(--white); font-weight: 700; font-size: .78rem; cursor: pointer; color: var(--gray-700); }
.quiz-nav-dots button.answered { border-color: var(--gold-500); background: rgba(244,163,0,.12); }
.quiz-nav-dots button.current { border-color: var(--navy-800); background: var(--navy-900); color: var(--white); }

/* ---------- Result / review page ---------- */
.score-hero { text-align: center; padding: 40px 20px; background: linear-gradient(120deg, var(--navy-900), var(--navy-700)); color: var(--white); border-radius: var(--radius-lg); margin-bottom: 32px; }
.score-hero .score-number { font-size: 3.2rem; font-weight: 800; color: var(--gold-500); }
.score-hero p { color: var(--gray-300); }
.review-item { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-md); padding: 20px 22px; margin-bottom: 14px; }
.review-item .review-q { font-weight: 700; margin-bottom: 10px; }
.review-item .review-row { display: flex; gap: 8px; font-size: .88rem; margin-bottom: 4px; }
.review-item .review-row strong { min-width: 130px; flex-shrink: 0; }
.review-item.benar { border-left: 4px solid #1e8a4c; }
.review-item.salah { border-left: 4px solid #c0392b; }

/* ---------- Olimpiade catalog ---------- */
.olim-card { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-100); padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: all .15s ease; }
.olim-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.olim-card .price { font-size: 1.3rem; font-weight: 800; color: var(--navy-900); }
.olim-card .price span { font-size: .75rem; font-weight: 600; color: var(--gray-500); }
.olim-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--gray-500); }
.olim-meta span { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- Multi-file upload rows (reuse .doc-row from style.css) ---------- */
.doc-row input[type="file"] { font-size: .8rem; }
.doc-row.filled { border-color: #1e8a4c; background: #f2fbf5; }

/* ---------- Simple stat row for parent/guru dashboard ---------- */
.child-card { background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--gray-100); box-shadow: var(--shadow-sm); padding: 22px; margin-bottom: 16px; }
.child-card h3 { margin: 0 0 4px; }
.child-card .meta { font-size: .85rem; color: var(--gray-500); margin-bottom: 14px; }

.empty-state { text-align: center; padding: 48px 20px; color: var(--gray-500); }
.empty-state svg { width: 48px; height: 48px; margin-bottom: 12px; opacity: .5; }

.alert { padding: 14px 18px; border-radius: var(--radius-sm); font-size: .88rem; margin-bottom: 18px; }
.alert-error { background: #fdeaea; color: #c0392b; }
.alert-success { background: #e3f6ea; color: #1e8a4c; }
.alert-info { background: var(--navy-100); color: var(--navy-900); }

@media (max-width: 760px) {
  .quiz-card { padding: 20px; }
  .review-item .review-row { flex-direction: column; }
  .review-item .review-row strong { min-width: 0; }
}