/* belajar.mahireal.cloud — tema "Yuru Camp" (DESIGN.md v0.0.5) */
:root {
  --fire-500: #E8833A; --fire-600: #C96A28; --amber-400: #FFB23F;
  --cream-50: #FFF6E8; --cream-100: #FBEBD3; --wood-700: #7A5B3A;
  --pine-500: #4E7A3D; --pine-600: #3E6130;
  --night-800: #2C3550; --night-900: #1E2537;
  --blush-300: #F49AC1; --blush-100: #FDE8F1;
  --danger: #D9534F;
  --radius: 12px; --wood-border: 2px solid var(--wood-700);
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--cream-50); color: var(--night-800);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}
h1, h2, h3, .display { font-family: "Baloo 2", "Inter", system-ui, sans-serif; margin: 0 0 .5em; }
a { color: var(--fire-600); }
a:hover { color: var(--fire-500); }
:focus-visible { outline: 3px solid var(--amber-400); outline-offset: 2px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ===== Navbar (bal kayu) ===== */
.nav {
  background: var(--wood-700); color: var(--cream-50);
  box-shadow: 0 2px 0 var(--pine-600);
}
.nav .wrap { display: flex; align-items: center; gap: 18px; min-height: 60px; }
.nav .brand { font-family: "Baloo 2"; font-size: 1.25rem; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.nav .brand .flame { font-size: 1.1em; animation: flicker 1.6s ease-in-out infinite alternate; }
.nav nav { margin-left: auto; display: flex; gap: 16px; align-items: center; }
.nav a { color: var(--cream-100); text-decoration: none; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav a.lantern { position: relative; }
.nav a.lantern.active { background: var(--amber-400); color: var(--night-800); }
@keyframes flicker { from { transform: scale(1); } to { transform: scale(1.08) rotate(-2deg); } }

/* ===== Tombol ===== */
.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  font: 600 1rem "Baloo 2", Inter, sans-serif; color: #fff;
  background: linear-gradient(90deg, var(--fire-500), var(--amber-400));
  padding: 12px 24px; border-radius: var(--radius);
  box-shadow: 0 0 0 rgba(232,131,58,0); transition: box-shadow .2s, transform .18s, background .2s;
}
.btn:hover { background: var(--fire-600); box-shadow: 0 0 18px rgba(232,131,58,.45); transform: scale(1.02); }
.btn:active { transform: scale(.99); }
.btn.wood {
  background: var(--cream-100); color: var(--wood-700); border: var(--wood-border);
}
.btn.wood:hover { background: var(--cream-50); box-shadow: none; color: var(--night-800); }
.btn.small { padding: 8px 14px; font-size: .9rem; }
.btn.danger { background: var(--danger); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ===== Hero (malam Rin) ===== */
.hero {
  background: linear-gradient(180deg, var(--night-900), var(--night-800));
  color: var(--cream-50); position: relative; overflow: hidden;
}
.hero .wrap { padding: 72px 20px 84px; text-align: center; position: relative; }
.hero h1 { font-size: 2.6rem; line-height: 1.2; margin-bottom: 12px; }
.hero p.sub { font-size: 1.15rem; color: var(--cream-100); max-width: 640px; margin: 0 auto 28px; }
.hero .glow {
  position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%);
  width: 420px; height: 180px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,178,63,.35), transparent);
  animation: emberPulse 3.2s ease-in-out infinite alternate;
}
@keyframes emberPulse { from { opacity: .7; transform: translateX(-50%) scale(1); } to { opacity: 1; transform: translateX(-50%) scale(1.08); } }
.hero .campfire { font-size: 64px; line-height: 1; margin-bottom: 12px; animation: flicker 1.8s ease-in-out infinite alternate; }
.stars { position: absolute; inset: 0; opacity: .15; pointer-events: none;
  background-image: radial-gradient(#fff 1px, transparent 1.4px), radial-gradient(#fff 1px, transparent 1.4px);
  background-size: 130px 110px, 70px 90px; background-position: 10px 20px, 60px 40px; }
@media (prefers-reduced-motion: reduce) {
  .hero .glow, .hero .campfire, .nav .brand .flame { animation: none; }
}

/* ===== Kartu papan petunjuk ===== */
.signs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 34px 0; }
.sign {
  background: var(--cream-100); border: var(--wood-border); border-radius: var(--radius);
  padding: 22px; position: relative;
}
.sign:nth-child(odd)  { transform: rotate(-1deg); }
.sign:nth-child(even) { transform: rotate(1.2deg); }
.sign h3 { color: var(--fire-600); }
.sign::after {
  content: ""; position: absolute; top: -12px; left: 14px; width: 44px; height: 8px;
  background: var(--wood-700); border-radius: 4px; box-shadow: 0 3px 0 var(--pine-600);
}
.section { padding: 48px 0; }
.section.alt { background: var(--cream-100); }
.trees { background-image: repeating-linear-gradient(90deg, transparent 0 118px, rgba(78,122,61,.12) 118px 124px); }

/* ===== Form ===== */
form.stack { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
label { font-weight: 600; font-size: .95rem; }
input[type=text], input[type=email], input[type=password], input[type=url], textarea, select {
  width: 100%; padding: 11px 14px; border: var(--wood-border); border-radius: var(--radius);
  background: #fff; font: inherit; color: var(--night-800);
}
input:focus, textarea:focus { outline: 3px solid var(--amber-400); outline-offset: 1px; }
.card {
  background: var(--cream-100); border-radius: var(--radius); padding: 20px 22px;
  box-shadow: 0 2px 8px rgba(122,91,58,.12); border: 1px solid var(--cream-100);
}
.card + .card { margin-top: 14px; }
.err { background: var(--blush-100); border-left: 5px solid var(--danger); padding: 10px 14px; border-radius: 8px; }
.ok  { background: #E8F3E2; border-left: 5px solid var(--pine-500); padding: 10px 14px; border-radius: 8px; }
.mock-banner { background: var(--blush-100); border: 1px dashed var(--blush-300); color: var(--night-800); padding: 8px 14px; border-radius: 8px; font-size: .9rem; }

/* ===== Marshmallow loading ===== */
.roasting { display: none; align-items: center; gap: 10px; color: var(--wood-700); font-weight: 600; }
.roasting.on { display: inline-flex; }
.mallow { width: 16px; height: 16px; background: #fff; border: 2px solid var(--wood-700); border-radius: 40%;
  animation: roast 1s ease-in-out infinite alternate; }
@keyframes roast { from { transform: rotate(-14deg) translateY(0); background: #fff; } to { transform: rotate(10deg) translateY(-6px); background: var(--amber-400); } }
@media (prefers-reduced-motion: reduce) { .mallow { animation: none; } }

/* ===== Flashcard (kartu pos) ===== */
.postcard { background: #fff; border: var(--wood-border); border-radius: var(--radius); padding: 20px; position: relative; }
.postcard .stamp { position: absolute; top: 10px; right: 12px; border: 2px dashed var(--blush-300); color: var(--blush-300);
  font-size: .72rem; padding: 2px 8px; transform: rotate(6deg); border-radius: 4px; font-weight: 700; }
.flash-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ===== Kuis ===== */
.quiz-q { margin: 18px 0; }
.quiz-q .opsi label { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; padding: 8px; border-radius: 8px; }
.quiz-q .opsi label:hover { background: var(--cream-100); }

/* ===== Chat tutor ===== */
.chatlog { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; max-height: 420px; overflow-y: auto; }
.bubble { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: .95rem; }
.bubble.user { align-self: flex-end; background: var(--night-800); color: var(--cream-50); border-bottom-right-radius: 4px; }
.bubble.assistant { align-self: flex-start; background: var(--cream-100); border: 1px solid var(--blush-300); border-bottom-left-radius: 4px; }
.bubble .cita { font-size: .75rem; color: var(--wood-700); margin-top: 6px; }

/* ===== Streak & progres (jalur pendakian) ===== */
.trail { display: flex; align-items: center; gap: 6px; margin-top: 40px; }
.trail .flag { color: var(--fire-600); }
.trail .path { flex: 1; border-top: 3px dashed var(--fire-500); position: relative; }
.trail .tent { font-size: 26px; }
tr.streak-num { font-weight: 800; color: var(--fire-600); }

/* ===== Tabel daftar materi ===== */
table.materi { width: 100%; border-collapse: collapse; }
table.materi th { text-align: left; font-family: "Baloo 2"; color: var(--wood-700); border-bottom: var(--wood-border); padding: 8px; }
table.materi td { padding: 10px 8px; border-bottom: 1px dashed var(--wood-700); }
.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .78rem; font-weight: 700; }
.badge.pine { background: #E8F3E2; color: var(--pine-600); }
.badge.blush { background: var(--blush-100); color: #B04080; }
.badge.amber { background: #FFF3DC; color: var(--fire-600); }

/* ===== Tabs ===== */
.tabs { display: flex; gap: 4px; margin: 20px 0 0; flex-wrap: wrap; }
.tabs a { padding: 9px 16px; border-radius: 10px 10px 0 0; text-decoration: none; font-weight: 700;
  color: var(--wood-700); background: var(--cream-100); border: 1px solid var(--cream-100); }
.tabs a.active { background: #fff; color: var(--fire-600); border: 1px solid var(--wood-700); border-bottom-color: #fff; }
.tabpanel { background: #fff; border: 1px solid var(--wood-700); border-radius: 0 var(--radius) var(--radius) var(--radius); padding: 22px; }

/* ===== Footer malam Rin ===== */
footer.site { background: linear-gradient(180deg, var(--night-800), var(--night-900)); color: var(--cream-100);
  margin-top: 60px; padding: 34px 0 40px; position: relative; }
footer.site .wrap { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
footer.site a { color: var(--blush-300); text-decoration: none; margin-right: 14px; }
footer.site a:hover { text-decoration: underline; }
footer.site .camp { margin-left: auto; font-size: 22px; }

/* ===== Responsif ===== */
@media (max-width: 640px) {
  .hero h1 { font-size: 2rem; }
  .nav .wrap { flex-wrap: wrap; padding: 8px 20px; }
  .nav nav { width: 100%; justify-content: flex-start; margin-left: 0; }
  table.materi { display: block; overflow-x: auto; }
}