:root{
  --cream-0:#FCF8F1; --cream-50:#FAF3E7; --cream-100:#F3E9D7; --cream-200:#E9DBBF;
  --ink-900:#2A2320; --ink-700:#55453B; --ink-500:#7A6A5F;
  --coral-100:#FBE0D3; --coral-500:#DD6B41; --coral-600:#C1552F;
  --teal-100:#D9EAEA; --teal-300:#63A2A0; --teal-500:#1F5C5C; --teal-600:#194A4A;
  --font-display:"Lora",Georgia,serif;
  --font-body:"Figtree","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream-50);color:var(--ink-900);font-family:var(--font-body);font-size:16px;line-height:1.6}
.wrap{display:flex;min-height:100vh;align-items:flex-start}

.sisi{width:290px;flex:0 0 290px;background:var(--teal-500);color:var(--cream-50);padding:28px 22px;position:sticky;top:0;height:100vh;overflow-y:auto}
.merek{font-family:var(--font-display);font-size:22px;line-height:1.2;margin:0 0 6px}
.merek-sub{font-size:13px;color:#BFD8D8;margin:0 0 26px}
.nav-item{display:block;width:100%;text-align:left;background:transparent;border:1px solid rgba(255,255,255,.18);color:inherit;
  border-radius:10px;padding:12px 14px;margin-bottom:10px;cursor:pointer;font:inherit;transition:.15s}
.nav-item:hover:not(.kunci){background:rgba(255,255,255,.08)}
.nav-item.aktif{background:var(--cream-50);color:var(--ink-900);border-color:var(--cream-50)}
.nav-item.kunci{opacity:.45;cursor:not-allowed}
.nav-nomor{font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.75}
.nav-nama{font-weight:600;font-size:15px}
.nav-tanggal{font-size:12px;opacity:.7}
.nav-tanda{float:right;font-size:12px}
.sisi-kaki{margin-top:26px;font-size:12px;color:#A9C6C6;line-height:1.5}
.sisi-kaki button{background:none;border:none;color:#A9C6C6;text-decoration:underline;cursor:pointer;font:inherit;padding:0}

.isi{flex:1;padding:40px 48px 90px;max-width:920px}
.kepala{border-bottom:1px solid var(--cream-200);padding-bottom:20px;margin-bottom:30px}
.kepala .kicker{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-600);font-weight:700}
.kepala h1{font-family:var(--font-display);font-size:34px;line-height:1.15;margin:6px 0 10px;font-weight:600}
.kepala p{margin:0 0 6px;color:var(--ink-700)}
.janji{background:var(--coral-100);border-radius:10px;padding:14px 16px;margin-top:14px;font-size:15px;color:#7d3a20}
.janji p{margin:0;color:inherit}
.janji p + p{margin-top:6px}

.bagian{background:#fff;border:1px solid var(--cream-200);border-radius:14px;padding:22px 24px;margin-bottom:18px}
.bagian.bacaan{background:var(--cream-100);border-style:dashed}
.bagian h2{font-family:var(--font-display);font-size:20px;font-weight:600;margin:0 0 10px}
.petunjuk{color:var(--ink-700);font-size:15px;white-space:pre-line;margin-bottom:14px}
.petunjuk:last-child{margin-bottom:0}
textarea,input[type=text]{width:100%;font:inherit;color:var(--ink-900);background:var(--cream-0);
  border:1px solid #DCCEBB;border-radius:10px;padding:12px 14px;resize:vertical}
textarea:focus,input:focus{outline:2px solid var(--coral-500);outline-offset:1px}
.jejak{font-size:13px;color:var(--ink-500);margin-top:8px}
.contoh-tombol{background:none;border:none;color:var(--teal-600);font:inherit;font-size:14px;cursor:pointer;padding:0;text-decoration:underline}
.contoh{display:none;margin-top:12px;background:var(--teal-100);border-left:3px solid var(--teal-300);
  border-radius:0 8px 8px 0;padding:12px 16px;font-size:14.5px;color:#173f3f;white-space:pre-line}
.contoh.buka{display:block}
.contoh .label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--teal-600);display:block;margin-bottom:6px}

.kartu{display:block;background:var(--coral-100);border:1px solid var(--coral-300,#F0A785);border-radius:14px;
  padding:18px 22px;margin-bottom:18px;text-decoration:none;color:#7d3a20;cursor:pointer}
.kartu:hover{background:#F9D3C0}
.kartu b{display:block;font-family:var(--font-display);font-size:19px;font-weight:600;margin-bottom:4px}
.kartu span{font-size:15px}
.kartu .panah{float:right;font-size:20px;line-height:1}

table.isian{width:100%;border-collapse:collapse;margin-top:6px}
table.isian th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500);
  font-weight:700;padding:0 6px 6px 0}
table.isian td{padding:0 6px 6px 0;vertical-align:top}
table.isian td.nomor{width:26px;color:var(--ink-500);padding-top:12px;font-size:14px}
table.isian input{background:var(--cream-0)}
.orang{margin-bottom:12px}
.orang-nama{display:block;font-size:13px;font-weight:600;color:var(--teal-600);margin-bottom:4px}
table.isian td.tetap{padding:0 6px 6px 0}
table.isian td.tetap span{display:block;background:var(--cream-100);border-radius:10px;padding:12px 14px;font-size:15px;color:var(--ink-700)}

.kaki-sesi{display:flex;gap:12px;align-items:center;margin-top:26px;flex-wrap:wrap}
.tombol{background:var(--coral-500);color:#fff;border:none;border-radius:999px;padding:13px 26px;font:inherit;font-weight:600;cursor:pointer}
.tombol:hover{background:var(--coral-600)}
.tombol.sepi{background:transparent;color:var(--teal-600);border:1px solid var(--teal-600)}
.status{font-size:14px;color:var(--ink-500)}
.status.kurang{color:var(--coral-600)}

.peta{background:#fff;border:2px solid var(--teal-500);border-radius:14px;padding:26px 28px;margin-top:26px}
.peta h2{font-family:var(--font-display);font-size:24px;margin:0 0 6px;font-weight:600}
.peta .petunjuk{margin-bottom:18px}
.peta-baris{display:grid;grid-template-columns:230px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--cream-200)}
.peta-baris .label{font-weight:600;color:var(--teal-600);font-size:14.5px}
.peta-baris .nilai{white-space:pre-line;font-size:15px}
.peta-baris .kosong{color:var(--coral-600);font-style:italic}

.tirai{position:fixed;inset:0;background:rgba(42,35,32,.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:20}
.tirai.buka{display:flex}
.tanya{background:#fff;border-radius:16px;padding:28px;max-width:460px}
.tanya h3{font-family:var(--font-display);font-size:21px;margin:0 0 10px;font-weight:600}
.tanya p{color:var(--ink-700);margin:0 0 20px}
.tanya .baris{display:flex;gap:10px;justify-content:flex-end}

@media (max-width:860px){
  .wrap{flex-direction:column}
  .sisi{width:100%;flex:none;height:auto;position:static}
  .isi{padding:26px 20px 70px}
  .peta-baris{grid-template-columns:1fr;gap:4px}
  table.isian, table.isian tbody, table.isian tr, table.isian td{display:block;width:100%}
  table.isian thead{display:none}
  table.isian td.nomor{padding:10px 0 2px}
}

/* --- layar masuk --- */
body.layar-masuk{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.kotak-masuk{background:#fff;border:1px solid var(--cream-200);border-radius:16px;padding:34px 32px;max-width:420px;width:100%}
.kotak-masuk .kicker{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-600);font-weight:700;margin:0}
.kotak-masuk h1{font-family:var(--font-display);font-size:27px;line-height:1.2;margin:8px 0 16px;font-weight:600}
.kotak-masuk .halo{font-size:17px;margin:0 0 4px}
.kotak-masuk .ket{color:var(--ink-700);margin:0 0 18px}
.kotak-masuk .galat{color:var(--coral-600);margin:0 0 14px}
.kotak-masuk form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.kotak-masuk .pin{width:130px;font-size:26px;letter-spacing:.32em;text-align:center;padding:10px 12px}

/* --- sisi: tautan, bukan tombol --- */
a.nav-item{text-decoration:none;color:inherit}
a.nav-item.aktif{color:var(--ink-900)}
span.nav-item{display:block}
.sisi-kaki a{color:#A9C6C6}

/* --- halaman pengurus --- */
.pengurus{max-width:1000px;margin:0 auto;padding:36px 24px 80px}
.pengurus h1{font-family:var(--font-display);font-size:30px;margin:0 0 4px;font-weight:600}
.pengurus .ket{color:var(--ink-700);margin:0 0 26px}
table.papan{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--cream-200);border-radius:12px;overflow:hidden}
table.papan th,table.papan td{padding:11px 13px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--cream-100)}
table.papan th{background:var(--teal-500);color:var(--cream-50);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
table.papan td.angka{text-align:center;width:62px}
table.papan tr:last-child td{border-bottom:none}
.diam{color:var(--coral-600);font-weight:600}
.gerak{color:var(--teal-600)}

/* --- panel pengurus: tambah peserta --- */
.pengurus .kicker{font-size:13px;margin:0 0 10px}
.pengurus .kicker a{color:var(--teal-600)}
.kabar{background:var(--teal-100);border-left:3px solid var(--teal-300);border-radius:0 8px 8px 0;
  padding:11px 15px;margin:0 0 18px;color:#173f3f}
.kartu-baru{background:#fff;border:2px solid var(--coral-500);border-radius:14px;padding:18px 22px;margin:0 0 20px}
.kartu-baru b{font-family:var(--font-display);font-size:19px;display:block;margin-bottom:8px}
.kartu-baru p{margin:0 0 8px}
.kartu-baru code{font-size:14.5px;background:var(--cream-100);padding:4px 8px;border-radius:6px;word-break:break-all}
form.tambah{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;background:#fff;
  border:1px solid var(--cream-200);border-radius:14px;padding:18px 20px;margin:0 0 12px}
form.tambah label{font-size:13px;color:var(--ink-500);font-weight:600}
form.tambah input[type=text],form.tambah select{font:inherit;color:var(--ink-900);background:var(--cream-0);
  border:1px solid #DCCEBB;border-radius:10px;padding:10px 12px;margin-top:5px;min-width:210px}
.tombol-kecil{background:transparent;border:1px solid var(--teal-600);color:var(--teal-600);
  border-radius:999px;padding:5px 13px;font:inherit;font-size:13px;cursor:pointer}
.tombol-kecil:hover{background:var(--teal-100)}
.tombol-kecil.bahaya{border-color:var(--coral-600);color:var(--coral-600)}
.tombol-kecil.bahaya:hover{background:var(--coral-100)}
td.aksi{white-space:nowrap}
td.aksi form{display:inline-block;margin:0 0 6px}
td.aksi form.hapus input{font:inherit;font-size:13px;background:var(--cream-0);border:1px solid #DCCEBB;
  border-radius:8px;padding:5px 8px;width:120px}
table.papan code{font-size:12.5px;word-break:break-all}
.ket.kecil{font-size:13px;color:var(--ink-500)}
.sesi-judul{font-family:var(--font-display);font-size:19px;font-weight:600;margin:28px 0 10px;
  padding-bottom:6px;border-bottom:1px solid var(--cream-200)}
.isian-lihat{background:#fff;border:1px solid var(--cream-200);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.isian-judul{display:block;font-size:13px;font-weight:700;color:var(--teal-600);margin-bottom:6px}
.isian-isi{white-space:pre-line;font-size:15px}
.isian-isi.kosong{color:var(--coral-600);font-style:italic}
table.papan td.tautan{min-width:250px}
table.papan td.tautan code{white-space:nowrap;word-break:normal;font-size:12.5px}
details.hapus-buka{margin-top:4px}
details.hapus-buka summary{cursor:pointer;font-size:13px;color:var(--coral-600);list-style:none}
details.hapus-buka summary::-webkit-details-marker{display:none}
details.hapus-buka summary:hover{text-decoration:underline}
details.hapus-buka form{display:block;margin-top:8px;background:var(--cream-100);border-radius:10px;padding:10px 12px;white-space:normal}
details.hapus-buka form p{margin:0 0 8px}