/**
 * ── TAMPILAN PENGELOLA ISI MOIKAI ──────────────────────────────────────────
 *
 * Warna dan hurufnya diambil dari situs Moikai sendiri (app/globals.css), bukan
 * dari tema bawaan alat mana pun. Itu satu-satunya alasan halaman ini dibangun
 * sendiri alih-alih memakai CMS jadi: alat umum tidak tahu Moikai itu apa, dan
 * tampilannya sama untuk blog, toko, dan kedai kopi.
 *
 * Yang membuka halaman ini seorang direktur kedai kopi, bukan pemrogram. Jadi
 * aturannya satu: apa pun yang tidak dia butuhkan, tidak ditampilkan.
 */

:root {
  --sumi: #14100c;
  --sumi-soft: #2a231b;
  --kinari: #f7f1e6;
  --washi: #fdfaf4;
  --amber: #e6b54c;
  --amber-ink: #7a5200;
  --kraft: #c8a97e;
  --kayu: #4a3826;
  --kayu-soft: #6b5540;
  --bata: #9c3d1f;
  --hijau: #2f6b3a;

  --serif: "Fraunces", ui-serif, Georgia, serif;
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

  --sisi: 17rem;
}

* {
  box-sizing: border-box;
}

/**
 * ⛔⛔ JANGAN DIHAPUS. INI MEMPERBAIKI BUG YANG SUDAH TERJADI.
 *
 * Atribut `hidden` bekerja lewat `display: none` bawaan peramban, dan aturan
 * bawaan itu DIKALAHKAN oleh `display` apa pun yang ditulis di berkas ini.
 * `.masuk` dan `.rangka` dua-duanya `display: grid`, jadi keduanya tetap
 * tergambar walau sudah diberi `hidden` — layar masuk menumpuk di atas
 * formulir, halamannya bisa digulir ke bawah, dan tombolnya tertinggal
 * bertuliskan "Memeriksa..." padahal pemeriksaannya sudah selesai.
 *
 * ⚠ PELAJARAN YANG LEBIH PENTING DARI BARIS INI: saya sempat "memastikan" ini
 * benar dengan membaca atributnya lewat kode (`masuk.hidden === false`), dan
 * atributnya memang benar. Yang salah gambarnya. Memeriksa atribut BUKAN
 * memeriksa apa yang dilihat orang.
 */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--kinari);
  color: var(--sumi);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Logo ombak Moikai: PNG transparan dipakai sebagai masker di atas currentColor,
   persis seperti di situsnya, supaya satu berkas bisa berganti warna. */
.ombak {
  display: block;
  aspect-ratio: 720 / 337;
  background: currentColor;
  -webkit-mask: url("wave-mark.png") center / contain no-repeat;
  mask: url("wave-mark.png") center / contain no-repeat;
}

/* ── KERANGKA ─────────────────────────────────────────────────────────────*/

.rangka {
  display: grid;
  grid-template-columns: var(--sisi) 1fr;
  min-height: 100vh;
}

/* ── DAFTAR SAMPING ───────────────────────────────────────────────────────*/

.samping {
  background: var(--sumi);
  color: var(--kinari);
  padding: 1.75rem 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.merek {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.merek .ombak {
  height: 1.4rem;
  color: var(--amber);
}

.merek b {
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

.merek span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(247 241 230 / 0.5);
  margin-top: 0.1rem;
}

.kelompok + .kelompok {
  margin-top: 1.5rem;
}

.kelompok > p {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(247 241 230 / 0.45);
}

.kelompok button {
  display: block;
  padding: 0.45rem 0.7rem;
  margin-left: -0.7rem;
  border-radius: 6px;
  color: rgb(247 241 230 / 0.78);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.kelompok button:hover {
  color: var(--kinari);
  background: rgb(247 241 230 / 0.06);
}

.kelompok button[aria-current="page"] {
  background: rgb(230 181 76 / 0.14);
  color: var(--amber);
  font-weight: 600;
}

/* Bagian yang belum dibangun TIDAK disembunyikan. Menyembunyikannya membuat
   pemakai mengira situsnya cuma punya satu bagian; ditampilkan redup, ia
   mengatakan "ini akan ada" tanpa berpura-pura sudah ada. */
.kelompok button.belum {
  color: rgb(247 241 230 / 0.3);
  cursor: not-allowed;
}

.kelompok button.belum::after {
  content: "segera";
  float: right;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ── ISI ──────────────────────────────────────────────────────────────────*/

.isi {
  padding: 2rem 2.25rem 5rem;
  max-width: 78rem;
}

.kepala {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgb(200 169 126 / 0.5);
}

.kepala h1 {
  font-size: 1.85rem;
}

.kepala p {
  margin: 0.35rem 0 0;
  color: var(--kayu-soft);
  font-size: 0.9rem;
  max-width: 42rem;
}

/* ── TOMBOL ───────────────────────────────────────────────────────────────*/

.tombol {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 0.6rem 1.1rem;
  min-height: 2.75rem;
  cursor: pointer;
  transition: transform 0.14s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.tombol:active {
  transform: scale(0.975);
}

.tombol--utama {
  background: var(--amber);
  color: var(--sumi);
}

.tombol--utama:hover {
  background: #f0c463;
}

.tombol--garis {
  background: transparent;
  border-color: rgb(74 56 38 / 0.28);
  color: var(--kayu);
}

.tombol--garis:hover {
  border-color: var(--sumi);
  color: var(--sumi);
}

.tombol--bahaya {
  background: transparent;
  border-color: rgb(156 61 31 / 0.35);
  color: var(--bata);
  font-size: 0.82rem;
  /* Tulisannya lebih kecil dari tombol lain supaya tidak menarik perhatian,
     tapi sasaran sentuhnya tetap 44px: tombol Hapus yang meleset justru yang
     paling mahal akibatnya. */
  min-height: 2.75rem;
  padding: 0.35rem 0.9rem;
}

.tombol--bahaya:hover {
  background: rgb(156 61 31 / 0.08);
  border-color: var(--bata);
}

.tombol:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tombol:disabled:active {
  transform: none;
}

/* ── KARTU PROGRAM ────────────────────────────────────────────────────────*/

.daftar {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/**
 * ⚠ TANPA `overflow: hidden`, DAN ITU BUKAN KELALAIAN.
 *
 * Semula kartu ini memakai `overflow: hidden` supaya latar kepala kartunya
 * terpotong rapi mengikuti sudut membulat. Itu DIAM-DIAM MEMATIKAN pratinjau
 * yang menempel di dalamnya: elemen `position: sticky` berhenti bekerja begitu
 * ada induk yang memotong isinya, tanpa galat apa pun, dan pratinjaunya cuma
 * hilang tergulir ke atas seperti biasa.
 *
 * Sudut kepala kartunya sekarang dibulatkan sendiri, jadi hasilnya sama.
 */
.kartu {
  background: var(--washi);
  border: 1px solid rgb(200 169 126 / 0.55);
  border-radius: 10px;
}

/* Program yang dimatikan tetap terbaca, tapi jelas sedang tidak tayang.
   Diredupkan seluruhnya, bukan disembunyikan: menyembunyikannya membuat orang
   mengira programnya terhapus. */
.kartu[data-aktif="false"] {
  background: rgb(253 250 244 / 0.55);
}

.kartu[data-aktif="false"] .badan {
  opacity: 0.55;
}

.kartu-atas {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid rgb(200 169 126 / 0.4);
  background: rgb(200 169 126 / 0.1);
  /* 9px, bukan 10: satu piksel lebih kecil dari sudut kartunya, supaya
     latarnya tidak menyembul di luar garis tepi. */
  border-radius: 9px 9px 0 0;
}

/* Aturan `.kartu-judul` ada di bagian "KARTU YANG BISA DILIPAT" di bawah,
   karena judulnya sekarang tombol pelipat, bukan sekadar tulisan. Ditulis di
   dua tempat, yang di atas akan diam-diam dikalahkan dan membingungkan
   siapa pun yang mencarinya nanti. */

.badan {
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: 1.75rem;
  padding: 1.35rem 1.15rem 1.5rem;
  transition: opacity 0.2s ease;
}

@media (max-width: 68rem) {
  .badan {
    grid-template-columns: 1fr;
  }
}

/* ── SAKLAR ───────────────────────────────────────────────────────────────*/

.saklar {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
  font-size: 0.85rem;
  color: var(--kayu);
  white-space: nowrap;
}

.saklar input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.saklar i {
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgb(74 56 38 / 0.22);
  position: relative;
  transition: background-color 0.18s ease;
  flex: none;
}

.saklar i::after {
  content: "";
  position: absolute;
  top: 0.185rem;
  left: 0.2rem;
  width: 1.13rem;
  height: 1.13rem;
  border-radius: 50%;
  background: var(--washi);
  box-shadow: 0 1px 3px rgb(20 16 12 / 0.3);
  transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}

.saklar input:checked + i {
  background: var(--hijau);
}

.saklar input:checked + i::after {
  transform: translateX(1.08rem);
}

.saklar input:focus-visible + i {
  outline: 2px solid var(--amber-ink);
  outline-offset: 2px;
}

/* ── ISIAN ────────────────────────────────────────────────────────────────*/

.baris {
  margin-bottom: 1.1rem;
}

.baris > label,
.baris > .tajuk {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--kayu);
  margin-bottom: 0.1rem;
}

.baris .catatan {
  display: block;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--kayu-soft);
  margin-bottom: 0.45rem;
}

.opsional {
  font-weight: 500;
  color: var(--kayu-soft);
}

.dwibahasa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

@media (max-width: 46rem) {
  .dwibahasa {
    grid-template-columns: 1fr;
  }
}

.kotak {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.kotak span {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kayu-soft);
}

/* ⚠ DAFTARNYA DITULIS SATU-SATU, DAN HARUS DITAMBAH TIAP ADA JENIS ISIAN BARU.
   Sudah kejadian sekali: `input[type="time"]` di bagian Cabang tidak kena
   aturan ini dan tingginya cuma 24px sementara tetangganya 42px. Selektor
   `input` polos tidak dipakai karena akan ikut menimpa file, range, dan
   checkbox yang punya aturannya sendiri di bawah. */
input[type="text"],
input[type="time"],
textarea,
select {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--sumi);
  background: #fff;
  border: 1px solid rgb(200 169 126 / 0.75);
  border-radius: 5px;
  padding: 0.55rem 0.7rem;
  width: 100%;
  /* 44px. Halaman ini dipakai dari HP juga, dan 44px adalah ukuran paling kecil
     yang masih bisa ditekan dengan tepat memakai ibu jari. Sama dengan .tombol
     supaya isian dan tombol di satu baris tingginya seragam. */
  min-height: 2.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--amber-ink);
  box-shadow: 0 0 0 3px rgb(230 181 76 / 0.3);
}

textarea {
  resize: vertical;
  min-height: 4.5rem;
  line-height: 1.5;
}

/* ── PRATINJAU ────────────────────────────────────────────────────────────*/

/* ⚠ `.pratinjau > p` DULU MENANGKAP DUA-DUANYA: label di atas DAN catatan di
   bawah kartu, sehingga catatannya ikut tercetak huruf besar semua dan jadi
   sulit dibaca. Pemilih anak langsung memang murah ditulis, tapi ia menangkap
   apa pun yang ditambahkan kemudian. Sekarang labelnya punya kelas sendiri. */
.pratinjau-label {
  margin: 0 0 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kayu-soft);
}

/* Meniru "selebaran" di beranda: satu lembar kertas, dan tiap program adalah
   catatan tercetak di atasnya — bukan kotak di dalam kotak. */
.lembar {
  background: var(--kinari);
  border: 1px solid rgb(200 169 126 / 0.6);
  border-radius: 8px;
  padding: 0.9rem;
  display: flex;
  gap: 0.8rem;
}

.lembar-foto {
  width: 36%;
  flex: none;
  min-height: 4.5rem;
  border-radius: 6px;
  border: 1px solid rgb(200 169 126 / 0.4);
  background: rgb(200 169 126 / 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lembar-foto .ombak {
  height: 1.4rem;
  color: rgb(74 56 38 / 0.45);
}

.lembar-teks {
  min-width: 0;
  flex: 1;
}

.lembar-jenis {
  font-family: ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kayu-soft);
  margin: 0;
}

.lembar-nama {
  margin: 0.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}

.lembar-nama b {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.15;
}

.lembar-harga {
  background: var(--amber);
  color: var(--sumi);
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.lembar-isi {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--kayu);
}

.lembar-kaki {
  margin: 0.45rem 0 0;
  font-family: ui-monospace, monospace;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--kayu-soft);
}

/* Jam tampilan yang diturunkan dari jam buka dan jam tutup. Dicetak tepat di
   bawah kedua isiannya supaya penyunting melihat persis apa yang akan muncul di
   halaman, dan berubah jadi merah bata kalau urutannya terbalik. */
.pratinjau-jam {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--kayu-soft);
  min-height: 1.15rem;
}

.pratinjau-jam[data-galat="true"] {
  color: var(--bata);
  font-weight: 600;
}

/* Badan formulir tanpa kartu di sekelilingnya, dipakai berkas yang isinya kata
   lepas semua. Padding kirinya dibuang supaya tidak terlihat menjorok mengikuti
   kartu yang tidak ada. */
.badan--telanjang {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

/* Kelompok tulisan di dalam satu kartu halaman: "Bagian paling atas halaman",
   "Formulir", dan seterusnya. Garis di kiri, bukan kotak: kotak di dalam kotak
   membuat kartunya terlihat seperti tumpukan yang harus dibongkar satu-satu. */
.kelompok-dalam {
  border-left: 2px solid rgb(200 169 126 / 0.5);
  padding-left: 0.95rem;
  margin: 0.2rem 0 0.4rem;
}

.kelompok-nama {
  margin: 0 0 0.55rem;
  font-family: var(--serif);
  font-size: 0.98rem;
  color: var(--kayu);
}

/* Bingkai foto kecil di sebelah isian keterangannya. Lebarnya dibatasi supaya
   foto tegak tidak memakan setengah layar formulir. */
.foto-kecil {
  margin-bottom: 0.9rem;
  max-width: 12rem;
  border: 1px solid rgb(200 169 126 / 0.5);
  border-radius: 8px;
  overflow: hidden;
  background: rgb(200 169 126 / 0.15);
}

.foto-kecil img {
  display: block;
  width: 100%;
  height: auto;
}

/* Dua keadaan yang bukan gambar: sedang diambil dari GitHub, dan gagal diambil.
   Keduanya jadi kotak bergaris putus-putus berisi kalimat — bukan ruang kosong
   yang terlihat seperti memang begitu adanya, dan bukan ikon gambar rusak.

   Yang gagal menyebut NAMA BERKASNYA, karena yang membacanya perlu tahu foto
   MANA yang belum ada: itulah yang harus dikirim ke pengembang. */
.foto-kecil--menunggu,
.foto-kecil--kosong {
  max-width: none;
  border-style: dashed;
  padding: 0.55rem 0.7rem;
  background: none;
}

.foto-kecil--menunggu .catatan,
.foto-kecil--kosong .catatan {
  margin: 0;
}

/* Larik: daftar yang butirnya berulang, seperti perjalanan tahunan di Tentang
   Kami atau kartu pendiri di Tim. */
.larik {
  margin: 0.2rem 0 0.4rem;
}

.larik-butir {
  border: 1px solid rgb(200 169 126 / 0.5);
  border-radius: 8px;
  padding: 0.9rem 1rem 1rem;
  margin-bottom: 0.75rem;
  background: rgb(253 250 244 / 0.6);
}

.larik-nomor {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kayu-soft);
}

.larik-hapus {
  margin-top: 0.3rem;
}

/* Catatan penutup sebuah bagian: menerangkan apa yang TIDAK bisa dikerjakan di
   sini dan langkah berikutnya. Diberi garis atas supaya terbaca sebagai
   keterangan bagian, bukan sebagai bagian dari kartu terakhir. */
.catatan-bagian {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgb(200 169 126 / 0.5);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--kayu-soft);
  max-width: 46rem;
}

.pratinjau-catatan {
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--kayu-soft);
}

/* ── BILAH STATUS ─────────────────────────────────────────────────────────*/

.status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.status small {
  color: var(--kayu-soft);
  font-size: 0.8rem;
}

.belum-tersambung {
  margin: 1.5rem 0 0;
  border: 1px dashed rgb(200 169 126 / 0.9);
  background: rgb(230 181 76 / 0.08);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--kayu);
}

.belum-tersambung b {
  color: var(--sumi);
}

.tambah {
  margin-top: 1.25rem;
}

/* ── FOTO ─────────────────────────────────────────────────────────────────*/

.foto-kosong {
  border: 1px dashed rgb(200 169 126 / 0.9);
  background: rgb(200 169 126 / 0.08);
  border-radius: 8px;
  padding: 1.1rem;
  text-align: center;
}

.foto-kosong p {
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--kayu-soft);
}

/* Berkas asli disembunyikan; yang diklik tombol biasa, supaya tampilannya
   tidak ditentukan peramban. */
.foto-kosong input[type="file"],
.foto-ada input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Bingkai potong: gambar induk penuh, bagian di luar kotak diredupkan. */
/* ⚠ TINGGINYA DIBATASI, DAN LEBARNYA MENGIKUTI GAMBARNYA.
   Tanpa itu, foto HP tegak 1200×1600 tergambar setinggi lebih dari dua layar,
   dan penyunting tidak pernah melihat penggeser dan hasil potongannya
   bersamaan — padahal justru itu pekerjaannya di sini.

   `width: fit-content` penting: kotak sorotnya diposisikan dalam PERSEN dari
   bingkai ini, jadi bingkainya harus persis sebesar gambarnya. Kalau bingkainya
   lebih lebar dari gambarnya, kotak sorotnya menunjuk tempat yang salah. */
.bingkai {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--sumi);
  line-height: 0;
  width: fit-content;
  max-width: 100%;
}

.bingkai img {
  display: block;
  max-width: 100%;
  max-height: 17rem;
  width: auto;
  height: auto;
}

.bingkai-kotak {
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid var(--amber);
  border-radius: 3px;
  /* Bayangan raksasa ini yang meredupkan SELURUH bagian di luar kotak, tanpa
     perlu empat kotak penutup yang harus dihitung satu per satu. */
  box-shadow: 0 0 0 9999px rgb(20 16 12 / 0.62);
  pointer-events: none;
  transition: transform 0.06s linear;
}

.geser {
  margin-top: 0.7rem;
}

.geser input[type="range"] {
  width: 100%;
  accent-color: var(--amber-ink);
  min-height: 2.75rem;
}

.geser small {
  display: block;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--kayu-soft);
}

/* Hasil potongannya, di bawah kotak sorot.
   Kotak sorot menjawab "bagian mana yang diambil"; ini menjawab "jadinya
   bagaimana". Yang kedua itu yang akan dilihat tamu, jadi ia harus ada —
   penyunting tidak boleh diminta membayangkannya sendiri. */
.foto-hasil {
  margin-top: 0.9rem;
}

.foto-hasil img {
  display: block;
  max-width: 100%;
  width: auto;
  /* Dibatasi tingginya, bukan lebarnya: foto tegak berasio 4:5 akan setinggi
     tiga kali kartunya kalau cuma lebarnya yang dibatasi. */
  max-height: 13rem;
  border-radius: 8px;
  border: 1px solid rgb(200 169 126 / 0.5);
}

.foto-kaki {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.foto-kaki small {
  flex: 1;
  min-width: 8rem;
  font-size: 0.75rem;
  color: var(--kayu-soft);
  word-break: break-all;
}

.foto-galat {
  margin: 0.6rem 0 0;
  color: var(--bata);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Foto yang sudah terpilih, di dalam pratinjau kartu. */
.lembar-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}

.lembar-foto.ada {
  background: none;
  border: none;
  padding: 0;
  overflow: hidden;
}

/**
 * ⚠ PRATINJAU IKUT MENEMPEL SAAT DIGULIR.
 *
 * Kartu program itu tinggi — lima kolom tulisan dua bahasa, lalu pemilih foto
 * di bawahnya. Tanpa ini, penyunting yang sedang menggeser potongan foto di
 * bagian bawah kartu tidak bisa melihat pratinjaunya sama sekali, karena
 * pratinjau itu ada di kolom kanan yang sudah tergulir jauh ke atas. Pratinjau
 * yang tidak terlihat saat sedang dipakai sama saja dengan tidak ada.
 */
@media (min-width: 68rem) {
  .badan > div:last-child {
    position: sticky;
    top: 1.25rem;
    align-self: start;
  }
}

/* ── DAFTAR SAMPING IKUT MENGGULIR ────────────────────────────────────────
 *
 * Klien: "ketika di scroll jauh kebawah, sidebar nya mengikuti juga, agar jika
 * ingin mengubah dan klik sidebar tidak harus scroll keatas dulu."
 *
 * `height: 100vh` + `overflow-y: auto` dipasang bersamaan dan itu bukan
 * hiasan: tanpa keduanya, daftar yang lebih tinggi dari layar akan terpotong
 * dan bagian bawahnya jadi tidak bisa dijangkau sama sekali. Empat belas bagian
 * memang sudah mendekati tinggi layar laptop kecil.
 */
@media (min-width: 60rem) {
  .samping {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
}

/* ── KEPALA HALAMAN IKUT MENEMPEL ─────────────────────────────────────────
 *
 * Alasannya sama dengan daftar samping, dipakai pada tombol Terbitkan: kartu
 * yang terbuka itu tinggi, dan tombol yang cuma bisa dijangkau dengan menggulir
 * balik ke atas adalah tombol yang lupa ditekan.
 */
.kepala {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--kinari);
  padding-top: 1rem;
  margin-top: -1rem;
}

/* ── KARTU YANG BISA DILIPAT ──────────────────────────────────────────────
 *
 * Klien: "jangan semua langsung kebuka, tapi seperti list2 dulu nama2 judulnya
 * biar ga ribet."
 *
 * ⚠ YANG DIKLIK JUDULNYA, BUKAN SELURUH BARIS. Baris kepala kartu juga memuat
 * saklar "Sedang berjalan" dan tombol Hapus. Kalau seluruh baris yang membuka,
 * setiap kali seseorang mematikan program, kartunya ikut terbuka — dan setiap
 * penekanan Hapus harus dicegah merambat. Judulnya sendiri yang jadi tombol,
 * memenuhi ruang di antara keduanya, jadi sasarannya tetap lebar tanpa satu pun
 * masalah itu.
 */
.kartu-judul {
  font-family: var(--serif);
  font-size: 1.15rem;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  /* 44px, sama dengan tombol di sebelahnya. Ini tombol yang paling sering
     ditekan di seluruh halaman: tiap kartu dibuka lewat sini. */
  min-height: 2.75rem;
  padding: 0.4rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 6px;
  color: var(--sumi);
  text-align: left;
  cursor: pointer;
  font-weight: 600;
}

.kartu-judul:hover {
  background: rgb(200 169 126 / 0.18);
}

.kartu-judul:focus-visible {
  outline: 2px solid var(--amber-ink);
  outline-offset: 1px;
}

.kartu-judul span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Panah lipat, digambar CSS supaya tidak ada berkas gambar yang bisa hilang. */
.panah {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--kayu-soft);
  border-bottom: 2px solid var(--kayu-soft);
  transform: rotate(-45deg);
  transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
  margin-left: 0.15rem;
}

.kartu[data-buka="true"] .panah {
  transform: rotate(45deg);
}

.kartu[data-buka="false"] .badan {
  display: none;
}

/* Kartu yang tertutup tidak butuh garis pemisah di bawah kepalanya. */
.kartu[data-buka="false"] .kartu-atas {
  border-bottom: 0;
  border-radius: 9px;
}

/* ── LAYAR MASUK ──────────────────────────────────────────────────────────*/

.masuk {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  background: var(--kinari);
}

.masuk-kotak {
  width: 100%;
  max-width: 27rem;
  background: var(--washi);
  border: 1px solid rgb(200 169 126 / 0.55);
  border-radius: 12px;
  padding: 2rem 1.75rem 1.75rem;
}

.masuk-kotak .ombak {
  height: 1.9rem;
  color: var(--amber-ink);
  margin-bottom: 1.1rem;
}

.masuk-kotak h1 {
  font-size: 1.5rem;
}

.masuk-ajak {
  margin: 0.5rem 0 1.4rem;
  color: var(--kayu-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.masuk-kotak .kotak {
  margin-bottom: 1rem;
}

.masuk-kotak button[type="submit"] {
  width: 100%;
}

.masuk-galat {
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem;
  border-radius: 6px;
  background: rgb(156 61 31 / 0.08);
  border: 1px solid rgb(156 61 31 / 0.35);
  color: var(--bata);
  font-size: 0.85rem;
  line-height: 1.5;
}

.masuk-bantuan {
  margin-top: 1.4rem;
  border-top: 1px solid rgb(200 169 126 / 0.5);
  padding-top: 1rem;
}

.masuk-bantuan summary {
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--amber-ink);
  min-height: 2.2rem;
  display: flex;
  align-items: center;
}

.masuk-bantuan ol {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--kayu);
}

.masuk-bantuan li {
  margin-bottom: 0.45rem;
}

.masuk-bantuan p {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--kayu);
  margin: 0.8rem 0 0;
}

.masuk-aman {
  margin: 1.2rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--kayu-soft);
}

/* ── BILAH SIMPAN ─────────────────────────────────────────────────────────*/

/* Perubahan yang belum tersimpan harus TERLIHAT, bukan cuma diketahui tombol.
   Tanpa penanda ini, penyunting menutup tab dan kehilangan pekerjaannya tanpa
   pernah tahu ada yang belum tersimpan. */
.tombol--utama[data-berubah="true"]::after {
  content: " •";
}

.keluar {
  background: none;
  border: 0;
  padding: 0.3rem 0;
  font: inherit;
  font-size: 0.8rem;
  color: rgb(247 241 230 / 0.5);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.keluar:hover {
  color: var(--kinari);
}

.samping-kaki {
  margin-top: auto;
  padding-top: 1.5rem;
}

/* ── BUTIR DAFTAR SAMPING SEKARANG <button> ───────────────────────────────
 *
 * Ia berpindah bagian di halaman yang sama, bukan membuka alamat lain, jadi
 * <button> yang benar secara makna. Tapi peramban memberi tombol rupa bawaan
 * sendiri, dan tanpa baris-baris ini ia akan tampil sebagai kotak abu-abu
 * berhuruf kecil di tengah daftar yang gelap.
 */
.kelompok button {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  min-height: 2.4rem;
}

.kelompok button.belum {
  cursor: not-allowed;
}

.kelompok button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}

/* ── PEMILIH KATEGORI MENU ────────────────────────────────────────────────
 *
 * Bentuknya sengaja sama dengan penunjuk kategori di halaman Produk situsnya.
 * Penyunting yang sudah pernah melihat situsnya tidak perlu belajar susunan
 * kedua untuk mengurusnya.
 */
.kategori-rel {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 1.25rem 0 0.35rem;
  scrollbar-width: thin;
}

.kategori-chip {
  flex: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kayu);
  background: transparent;
  border: 1px solid rgb(200 169 126 / 0.7);
  border-radius: 999px;
  padding: 0 0.95rem;
  min-height: 2.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.kategori-chip:hover {
  border-color: var(--sumi);
  color: var(--sumi);
}

.kategori-chip[aria-current="true"] {
  background: var(--sumi);
  border-color: var(--sumi);
  color: var(--kinari);
}

/* Item menu tidak punya pratinjau di sampingnya, jadi isinya satu kolom penuh
   alih-alih kisi dua kolom milik kartu program. */
.badan--tunggal {
  display: block;
  max-width: 46rem;
}

/* ── PANDUAN ──────────────────────────────────────────────────────────────*/

.panduan {
  max-width: 42rem;
}

.panduan-bab {
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid rgb(200 169 126 / 0.5);
}

.panduan-bab:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.panduan-bab h2 {
  margin: 0 0 0.6rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--sumi);
}

.panduan-bab p {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--kayu);
}

.panduan-bab p:last-child {
  margin-bottom: 0;
}

.panduan-langkah {
  margin: 0;
  padding-left: 1.35rem;
}

.panduan-langkah li {
  margin-bottom: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--kayu);
}

.panduan-langkah li:last-child {
  margin-bottom: 0;
}

/* Satu blok per potongan, waktu sebuah foto dipakai dalam dua bentuk sekaligus
   (foto menu: memanjang di halaman Produk, persegi di kartu beranda). */
.varian + .varian {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed rgb(200 169 126 / 0.55);
}

.varian-nama {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kayu-soft);
}

/* Foto yang sudah terpasang di situs, ditampilkan selama belum ada yang baru
   dipilih. Rata kiri, bukan di tengah seperti keadaan "belum ada foto": yang
   ini bukan ajakan, ini keterangan. */
.foto-kosong--ada {
  text-align: left;
  align-items: flex-start;
}

.foto-kosong--ada .foto-kecil {
  margin-bottom: 0.5rem;
}

.foto-kosong--ada .pratinjau-label {
  margin: 0 0 0.6rem;
}

/* ── SUB-BAGIAN DI DALAM SATU HALAMAN ─────────────────────────────────────
   Satu halaman situs memuat beberapa hal sekaligus: halaman Produk memuat
   daftar menunya DAN tulisan judulnya. Tajuk ini yang memisahkan keduanya
   tanpa membuat penyunting merasa berpindah tempat. */
.sub-bagian {
  margin: 2.4rem 0 1rem;
  padding-top: 1.2rem;
  border-top: 2px solid rgb(200 169 126 / 0.55);
}

/* Yang pertama menempel pada judul halamannya, jadi tidak perlu garis dan
   tidak perlu jarak atas. */
.sub-bagian:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.sub-bagian h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--sumi);
}

.sub-bagian p {
  margin: 0.3rem 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--kayu-soft);
  max-width: 46rem;
}