/* =============================================================
   main.css — gaya bersama untuk SELURUH halaman Lab Fisika
   -------------------------------------------------------------
   Urutan penulisan (jangan diacak, ini konvensi umum):
     1. TOKEN     — variabel warna, jarak, huruf
     2. RESET     — menyamakan bawaan browser
     3. DASAR     — tag polos: body, h1, a, dll
     4. TATA LETAK— container, seksi
     5. KOMPONEN  — header, hero, kartu, tombol, panel simulasi
     6. RESPONSIF — penyesuaian untuk layar kecil/besar
   ============================================================= */


/* ============ 1. TOKEN ======================================
   Semua warna dan ukuran ditaruh di satu tempat. Mau ganti
   warna situs? Ubah satu baris di sini, semua halaman ikut.
   Di dunia kerja ini disebut "design token".
   ============================================================ */
:root {
  /* Warna */
  --warna-utama:        #1d4ed8;
  --warna-utama-gelap:  #1e3a8a;
  --warna-utama-lembut: #eff4ff;
  --warna-aksen:        #f59e0b;

  --warna-teks:         #111827;
  --warna-teks-redup:   #4b5563;
  --warna-latar:        #ffffff;
  --warna-latar-lembut: #f6f7f9;
  --warna-garis:        #e5e7eb;

  /* Huruf: pakai huruf bawaan sistem — cepat, tidak perlu unduh */
  --font-utama: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-angka: ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Jarak — kelipatan yang konsisten bikin tampilan rapi sendiri */
  --jarak-1: 0.5rem;
  --jarak-2: 1rem;
  --jarak-3: 1.5rem;
  --jarak-4: 2.5rem;
  --jarak-5: 4rem;

  /* Lain-lain */
  --lebar-maks: 1100px;
  --sudut: 12px;
  --bayang: 0 1px 2px rgba(17, 24, 39, .06), 0 8px 24px rgba(17, 24, 39, .06);
}

/* Mode gelap otomatis: kalau HP/laptop pengunjung diset gelap,
   cukup token warnanya yang ditukar. Sisa CSS tidak diubah. */
@media (prefers-color-scheme: dark) {
  :root {
    --warna-utama:        #60a5fa;
    --warna-utama-gelap:  #93c5fd;
    --warna-utama-lembut: #16233d;
    --warna-teks:         #f3f4f6;
    --warna-teks-redup:   #9ca3af;
    --warna-latar:        #0f141c;
    --warna-latar-lembut: #161d28;
    --warna-garis:        #2a3444;
    --bayang: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  }
}


/* ============ 2. RESET ====================================== */
*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }

ul[class] { padding: 0; list-style: none; }

img, svg, canvas { max-width: 100%; display: block; }

input, button, select { font: inherit; color: inherit; }


/* ============ 3. DASAR ===================================== */
body {
  font-family: var(--font-utama);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--warna-teks);
  background: var(--warna-latar);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }

/* Header situs menempel di atas layar. Tanpa ini, judul yang
   dituju sebuah tautan akan tertutup header saat halaman melompat. */
h1, h2, h3, #isi { scroll-margin-top: 84px; }

h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
h3 { font-size: 1.15rem; }

p { max-width: 68ch; }

a { color: var(--warna-utama); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--warna-utama-gelap); }

/* Cincin fokus untuk pengguna keyboard — jangan pernah dihapus,
   ini yang dipakai orang yang tidak bisa memakai mouse. */
:focus-visible {
  outline: 3px solid var(--warna-aksen);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Tautan "lompat ke isi": tersembunyi sampai di-Tab.
   Standar aksesibilitas yang dipakai situs profesional. */
.lewati {
  position: absolute;
  left: -9999px;
  top: var(--jarak-2);
  background: var(--warna-utama);
  color: #fff;
  padding: var(--jarak-1) var(--jarak-2);
  border-radius: 6px;
  z-index: 100;
}
.lewati:focus { left: var(--jarak-2); }


/* ============ 4. TATA LETAK ================================ */
.container {
  width: 100%;
  max-width: var(--lebar-maks);
  margin-inline: auto;
  padding-inline: var(--jarak-2);
}

.seksi { padding-block: var(--jarak-5); }
.seksi-lembut { background: var(--warna-latar-lembut); }

.seksi-judul { margin-bottom: var(--jarak-1); }
.seksi-ket { color: var(--warna-teks-redup); margin-bottom: var(--jarak-4); }

/* --- Irama vertikal untuk blok tulisan ---------------------
   Di bagian RESET semua margin dinolkan supaya kita yang pegang
   kendali. Di sini jaraknya dikembalikan, tapi dengan aturan.

   Polanya disebut "lobotomized owl" ( > * + * ): jarak hanya
   diberikan pada elemen yang PUNYA saudara di atasnya. Jadi
   elemen pertama tidak pernah kelebihan jarak di awal blok,
   dan kita tidak perlu menambal margin satu per satu.

   Judul diberi jarak atas lebih besar daripada paragraf, supaya
   ia terlihat menempel pada bagian yang dibukanya — bukan pada
   paragraf yang baru saja selesai. Ini prinsip kedekatan:
   jarak menandakan mana yang satu kelompok.
   ------------------------------------------------------------ */
.prosa > *            { margin-bottom: 0; }
.prosa > * + *        { margin-top: var(--jarak-2); }
.prosa > h2           { margin-top: var(--jarak-4); }
.prosa > h3           { margin-top: var(--jarak-3); }
.prosa > .lab,
.prosa > .papan-angka,
.prosa > .kotak-coba,
.prosa > .masukan,
.prosa > .rumus       { margin-top: var(--jarak-4); }

/* Antar butir daftar juga perlu bernapas sedikit */
.prosa li + li,
.kotak-coba li + li   { margin-top: 0.4rem; }

/* Jarak baris paragraf. 1,7 kira-kira batas atas yang masih nyaman;
   lebih dari itu barisnya mulai terasa berjauhan satu sama lain. */
.prosa p, .prosa li   { line-height: 1.7; }


/* ============ 5. KOMPONEN ================================== */

/* --- Header + navigasi --- */
.situs-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--warna-latar) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--warna-garis);
}
.header-isi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jarak-2);
  min-height: 64px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--warna-teks);
  text-decoration: none;
}
.logo svg { width: 28px; height: 28px; }

.nav-daftar { display: flex; gap: var(--jarak-3); align-items: center; }
.nav-daftar a {
  color: var(--warna-teks-redup);
  text-decoration: none;
  font-size: 0.98rem;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}
.nav-daftar a:hover { color: var(--warna-teks); }
/* Ditandai otomatis oleh main.js sesuai halaman yang dibuka */
.nav-daftar a[aria-current="page"] {
  color: var(--warna-utama);
  border-bottom-color: var(--warna-utama);
}

.nav-tombol {
  display: none;              /* hanya muncul di layar kecil */
  background: none;
  border: 1px solid var(--warna-garis);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}

/* --- Hero (bagian sambutan halaman utama) --- */
.hero { padding-block: var(--jarak-5) var(--jarak-4); }
.hero p.hero-lead {
  font-size: 1.15rem;
  color: var(--warna-teks-redup);
  margin-block: var(--jarak-2) var(--jarak-3);
}
.hero-aksi { display: flex; flex-wrap: wrap; gap: var(--jarak-2); }

/* --- Tombol --- */
.tombol {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .08s ease, background-color .15s ease;
}
.tombol:active { transform: translateY(1px); }
.tombol-utama { background: var(--warna-utama); color: #fff; }
.tombol-utama:hover { background: var(--warna-utama-gelap); color: #fff; }
.tombol-garis { border-color: var(--warna-garis); color: var(--warna-teks); }
.tombol-garis:hover { background: var(--warna-latar-lembut); color: var(--warna-teks); }

/* --- Grid kartu simulasi --- */
.kartu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--jarak-3);
}
.kartu {
  display: flex;
  flex-direction: column;
  background: var(--warna-latar);
  border: 1px solid var(--warna-garis);
  border-radius: var(--sudut);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.kartu:hover { transform: translateY(-3px); box-shadow: var(--bayang); }
.kartu-gambar {
  aspect-ratio: 16 / 9;
  background: var(--warna-utama-lembut);
  display: grid;
  place-items: center;
}
.kartu-gambar svg { width: 60%; height: 60%; }
.kartu-isi { padding: var(--jarak-2); display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.kartu-isi h3 { margin: 0; }
.kartu-isi h3 a { text-decoration: none; color: var(--warna-teks); }
.kartu-isi h3 a:hover { color: var(--warna-utama); }
.kartu-isi p { color: var(--warna-teks-redup); font-size: 0.95rem; margin: 0; }
.label {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--warna-utama-lembut);
  color: var(--warna-utama);
  font-size: 0.78rem;
  font-weight: 600;
}

/* --- Panel simulasi (dipakai ulang oleh SEMUA halaman simulasi) --- */
.lab {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--jarak-3);
  margin-block: var(--jarak-3);
}
.lab-panggung {
  background: var(--warna-latar-lembut);
  border: 1px solid var(--warna-garis);
  border-radius: var(--sudut);
  padding: var(--jarak-2);
}
.lab-panggung canvas { width: 100%; height: auto; border-radius: 8px; }

.lab-kendali {
  background: var(--warna-latar);
  border: 1px solid var(--warna-garis);
  border-radius: var(--sudut);
  padding: var(--jarak-2);
  display: flex;
  flex-direction: column;
  gap: var(--jarak-2);
}
.kendali { display: flex; flex-direction: column; gap: 0.35rem; }
.kendali label { font-weight: 600; font-size: 0.95rem; display: flex; justify-content: space-between; gap: var(--jarak-2); }
.kendali output { font-family: var(--font-angka); color: var(--warna-utama); }
.kendali input[type="range"] { width: 100%; accent-color: var(--warna-utama); }
.kendali select {
  padding: 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--warna-garis);
  background: var(--warna-latar);
}
.lab-aksi { display: flex; gap: var(--jarak-1); flex-wrap: wrap; }
.lab-aksi .tombol { padding: 0.55rem 1rem; font-size: 0.95rem; }

.papan-angka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--jarak-2);
  padding: 0;
  margin: 0;
}
.papan-angka > div {
  background: var(--warna-utama-lembut);
  border-radius: 8px;
  padding: var(--jarak-2);
}
.papan-angka dt { font-size: 0.85rem; color: var(--warna-teks-redup); }
.papan-angka dd {
  margin: 0.2rem 0 0;
  font-family: var(--font-angka);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--warna-utama);
}

/* --- Kotak "coba ini" di halaman simulasi --- */
.kotak-coba {
  border-left: 4px solid var(--warna-aksen);
  background: var(--warna-latar-lembut);
  border-radius: 0 var(--sudut) var(--sudut) 0;
  padding: var(--jarak-2) var(--jarak-3);
  margin-block: var(--jarak-3);
}
.kotak-coba h3 { margin-bottom: var(--jarak-1); }
.kotak-coba ul { padding-left: 1.1rem; list-style: disc; color: var(--warna-teks-redup); }

/* --- Rumus --- */
.rumus {
  font-family: var(--font-angka);
  font-size: 1.25rem;
  text-align: center;
  background: var(--warna-latar-lembut);
  border: 1px solid var(--warna-garis);
  border-radius: var(--sudut);
  padding: var(--jarak-3);
  margin-block: var(--jarak-2);
}

/* --- Kotak ajakan masukan (dipakai di akhir tiap halaman simulasi) ---
   Garis putus-putus dipakai supaya kotak ini terbaca sebagai
   "ajakan", bukan sebagai isi materi. */
.masukan {
  margin-top: var(--jarak-4);
  border: 1px dashed var(--warna-garis);
  border-radius: var(--sudut);
  background: var(--warna-latar-lembut);
  padding: var(--jarak-3);
}
.masukan h2, .masukan h3 { margin-top: 0; font-size: 1.15rem; }
.masukan p { color: var(--warna-teks-redup); margin-top: var(--jarak-1); }
.masukan-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jarak-1);
  margin-top: var(--jarak-2);
}
.masukan-aksi .tombol { padding: 0.55rem 1.1rem; font-size: 0.95rem; }

/* --- Remah roti (breadcrumb) --- */
.remah { font-size: 0.9rem; color: var(--warna-teks-redup); padding-top: var(--jarak-3); }
.remah a { color: var(--warna-teks-redup); }

/* --- Footer --- */
.situs-footer {
  border-top: 1px solid var(--warna-garis);
  background: var(--warna-latar-lembut);
  padding-block: var(--jarak-4);
  margin-top: var(--jarak-5);
  color: var(--warna-teks-redup);
  font-size: 0.95rem;
}
.footer-isi { display: flex; flex-wrap: wrap; gap: var(--jarak-3); justify-content: space-between; }


/* ============ 6. RESPONSIF =================================
   Ditulis "mobile-first": aturan di atas berlaku untuk HP,
   lalu di bawah ini ditambah untuk layar yang lebih lebar.
   ============================================================ */
@media (max-width: 720px) {
  .nav-tombol { display: block; }
  .nav-daftar {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--warna-latar);
    border-bottom: 1px solid var(--warna-garis);
    padding: var(--jarak-1) var(--jarak-2) var(--jarak-2);
  }
  .nav-daftar.terbuka { display: flex; }
  .nav-daftar a { padding-block: 0.75rem; border-bottom: 1px solid var(--warna-garis); }
}

@media (min-width: 900px) {
  /* Panggung simulasi di kiri, kendali di kanan */
  .lab { grid-template-columns: 1.6fr 1fr; align-items: start; }
}

/* Hormati pengguna yang mematikan animasi di pengaturan perangkatnya */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}