/* =====================================================================
   EGYPTIAN ARABIC VOCABULARY — TAMPILAN
   Warna diambil dari foto header: pasir keemasan (pagi) & navy malam.
   Ganti warna cukup di dua blok token di bawah ini.
   ===================================================================== */

/* ---------- MODE PAGI ---------- */
:root {
  --bg: #F4EBDD;          /* latar halaman (pasir muda) */
  --bg-rgb: 244, 235, 221;
  --bg-2: #EFE2CC;        /* latar lembut: chip, tabel */
  --kartu: #FCF8F1;       /* kartu */
  --garis: #E6D6BE;
  --teks: #2E2219;        /* coklat tua */
  --teks-2: #6F5B47;
  --aksen: #8F5D2E;       /* amber pasir (tombol aktif) */
  --aksen-teks: #FFFFFF;
  --aksen-lembut: #F1E1C6;
  --emas: #C08A3E;        /* hiasan */
  --fusha: #3F5F82;
  --mesir: #A5502C;
  --madinah: #3D6B4C;
  --draf-bg: #F6EBC8;
  --draf-teks: #7A5A0E;
  --bahaya: #A33A2A;
  --sukses: #2F6B4F;
  --bayang: 0 8px 28px rgba(80, 52, 18, .10);
  --bayang-kecil: 0 2px 10px rgba(80, 52, 18, .07);
  --hero-teks: #2E2219;
  --loader-bg: #E6DAC4;   /* sama persis dengan latar video logo */

  --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-judul: 'Marcellus', 'Plus Jakarta Sans', Georgia, serif;
  --font-ar: 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  --lebar: 1080px;
  --radius: 18px;
  color-scheme: light;
}

/* ---------- MODE MALAM ---------- */
:root[data-tema="malam"] {
  --bg: #0A1730;
  --bg-rgb: 10, 23, 48;
  --bg-2: #142849;
  --kartu: #112240;
  --garis: #23395C;
  --teks: #ECE6D8;
  --teks-2: #A3AFC4;
  --aksen: #E2B672;
  --aksen-teks: #1B1508;
  --aksen-lembut: #2A3550;
  --emas: #E2B672;
  --fusha: #8FB4E0;
  --mesir: #E79B71;
  --madinah: #8AC49D;
  --draf-bg: rgba(226, 182, 114, .14);
  --draf-teks: #E8C68C;
  --bahaya: #F08A7A;
  --sukses: #8AC49D;
  --bayang: 0 10px 30px rgba(0, 0, 0, .35);
  --bayang-kecil: 0 2px 12px rgba(0, 0, 0, .28);
  --hero-teks: #F3EEE2;
  color-scheme: dark;
}

/* ---------- DASAR ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--teks);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color .5s ease, color .5s ease;
}
body.terkunci { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--aksen); }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.wadah { max-width: var(--lebar); margin: 0 auto; padding: 0 16px; }
.tersembunyi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lompat { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--aksen); color: var(--aksen-teks); padding: 8px 14px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.lompat:focus { top: 12px; }
html[lang="en"] [data-bahasa="id"].aktif-saja, html[lang="id"] [data-bahasa="en"].aktif-saja { display: none; }

/* Elemen yang warnanya ikut berganti saat ganti mode */
.kartu, .panel, .kotak-cari, .chip, .ubin, .menu button, .mini, .halaman, details.lipat, .formulir, .modal-isi {
  transition: background-color .5s ease, border-color .5s ease, color .5s ease;
}

/* =====================================================================
   LAYAR LOADING
   ===================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 200; background: var(--loader-bg);
  display: grid; place-items: center; padding: 24px;
  transition: opacity .5s ease, visibility .5s; overflow: hidden;
}
.loader.selesai { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-isi { width: min(640px, 100%); text-align: center; color: #3A2D22; }
.loader-media { position: relative; width: 100%; aspect-ratio: 16 / 9; }
@media (max-width: 600px) { .loader-media { width: 150%; margin-left: -25%; } }
.loader-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* tepi video dibuat memudar supaya menyatu dengan latar */
  -webkit-mask-image: radial-gradient(ellipse 70% 72% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 72% at 50% 50%, #000 62%, transparent 100%);
}
.loader-logo { position: absolute; inset: 0; margin: auto; width: 62%; height: auto; animation: logoMasuk 1.6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes logoMasuk {
  0% { opacity: 0; transform: translateY(14px) scale(.96); }
  60% { opacity: 1; transform: translateY(-4px) scale(1); }
  100% { opacity: 1; transform: none; }
}
.loader-bar { width: min(260px, 70%); height: 4px; margin: 8px auto 0; border-radius: 99px; background: rgba(58, 45, 34, .14); overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 0; background: #8F5D2E; border-radius: inherit; transition: width .15s linear; }
.loader-angka { margin: 10px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; font-size: .95rem; color: #5A4634; }
.loader-gagal { margin-top: 16px; }
.loader-gagal p { margin: 0 0 10px; color: #5A4634; font-size: .95rem; }
.loader-gagal button { border: 0; background: #8F5D2E; color: #fff; font-weight: 700; padding: 10px 20px; border-radius: 12px; cursor: pointer; }

/* =====================================================================
   HEADER (foto piramida pagi / malam)
   ===================================================================== */
.hero { position: relative; overflow: hidden; min-height: 600px; display: flex; flex-direction: column; color: var(--hero-teks); }
.hero-foto { position: absolute; inset: 0; background: var(--bg-2); }
.hero-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 74% 40%;
  transition: opacity .9s ease; opacity: 0;
}
:root:not([data-tema="malam"]) .foto-pagi.siap, :root[data-tema="malam"] .foto-malam.siap { opacity: 1; }
/* Bagian bawah foto memudar ke warna halaman supaya menyatu */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(var(--bg-rgb), 1) 0%, rgba(var(--bg-rgb), .92) 30%, rgba(var(--bg-rgb), .35) 58%, rgba(var(--bg-rgb), 0) 78%),
    linear-gradient(to bottom, rgba(var(--bg-rgb), .45) 0%, rgba(var(--bg-rgb), 0) 22%);
  transition: background .5s ease;
}
.hero-atas { position: relative; z-index: 2; padding-top: max(12px, env(safe-area-inset-top)); }
.hero-atas-isi { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.merek { background: none; border: 0; padding: 4px; cursor: pointer; line-height: 0; border-radius: 10px; }
.merek img { width: 44px; height: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .18)); }

.alat { display: flex; gap: 8px; align-items: center; }
.tombol-tema, .tombol-bahasa {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px;
  border-radius: 999px; border: 1px solid rgba(var(--bg-rgb), .55);
  background: rgba(var(--bg-rgb), .72); color: var(--teks);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-weight: 700; font-size: .85rem; cursor: pointer;
}
.ikon-tema::before { content: "☀"; font-size: 1rem; }
:root[data-tema="malam"] .ikon-tema::before { content: "☾"; }
.tombol-bahasa span { opacity: .45; padding: 0 1px; }
.tombol-bahasa span + span::before { content: "|"; opacity: .5; margin-right: 6px; }
html[lang="id"] .tombol-bahasa [data-bahasa="id"], html[lang="en"] .tombol-bahasa [data-bahasa="en"] { opacity: 1; }

.hero-isi { position: relative; z-index: 1; margin-top: auto; padding: 120px 0 26px; }
.hero-ar { font-family: var(--font-ar); font-size: 1.6rem; line-height: 1.2; color: var(--mesir); margin: 0; text-align: left; }
.hero h1 {
  font-family: var(--font-judul); font-weight: 400; font-size: clamp(2.3rem, 8.4vw, 4.2rem);
  line-height: 1.02; letter-spacing: .005em; margin: 4px 0 0; max-width: 12ch; color: var(--hero-teks);
}
:root[data-tema="malam"] .hero h1 { text-shadow: 0 2px 22px rgba(0, 0, 0, .55); }
.hero-sub { margin: 12px 0 0; color: var(--teks-2); max-width: 44ch; font-size: 1.02rem; }
:root[data-tema="malam"] .hero-sub { color: #C9D2E2; }
.hero-kredit { margin: 6px 0 0; font-size: .92rem; color: var(--teks-2); }
:root[data-tema="malam"] .hero-kredit { color: #C9D2E2; }
.link-nama {
  background: none; border: 0; padding: 0; font-weight: 700; color: var(--hero-teks); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--emas); text-underline-offset: 3px; text-decoration-thickness: 2px;
}

.menu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.menu button {
  border: 1.5px solid var(--garis); background: rgba(var(--bg-rgb), .82); color: var(--teks);
  border-radius: 999px; padding: 9px 15px; font-weight: 700; font-size: .9rem; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.menu button:hover { border-color: var(--aksen); }
.menu button[aria-current="true"] { background: var(--aksen); border-color: var(--aksen); color: var(--aksen-teks); }
.menu .plus { display: inline-block; margin-left: 5px; transition: transform .15s; }
.menu button[aria-expanded="true"] .plus { transform: rotate(45deg); }
.menu-sub { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Jam Mesir / Indonesia / Saudi */
.jam { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.jam-item {
  background: rgba(var(--bg-rgb), .78); border: 1px solid var(--garis); border-radius: 12px;
  padding: 5px 11px; line-height: 1.25; min-width: 88px; color: var(--teks);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.jam-nama { display: block; font-size: .68rem; color: var(--teks-2); white-space: nowrap; }
.jam-waktu { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.jam-hari { font-size: .68rem; color: var(--teks-2); margin-left: 4px; }

@media (min-width: 820px) {
  .hero { min-height: 620px; }
  .hero::after {
    background:
      linear-gradient(to top, rgba(var(--bg-rgb), 1) 0%, rgba(var(--bg-rgb), 0) 34%),
      linear-gradient(to right, rgba(var(--bg-rgb), .94) 0%, rgba(var(--bg-rgb), .78) 34%, rgba(var(--bg-rgb), 0) 62%),
      linear-gradient(to bottom, rgba(var(--bg-rgb), .4) 0%, rgba(var(--bg-rgb), 0) 18%);
  }
  .hero-foto img { object-position: 70% 45%; }
  .hero-isi { padding: 60px 0 56px; margin-top: auto; margin-bottom: auto; }
  .label-tema::before { content: attr(data-label); }
}

/* Animasi masuk setelah loading */
.anim { opacity: 0; transform: translateY(14px); }
body.mulai .anim { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
body.mulai .anim:nth-child(2) { transition-delay: .06s; }
body.mulai .anim:nth-child(3) { transition-delay: .12s; }
body.mulai .anim:nth-child(4) { transition-delay: .18s; }
body.mulai .anim:nth-child(5) { transition-delay: .24s; }
body.mulai .anim:nth-child(7) { transition-delay: .3s; }

/* =====================================================================
   MENU RINGKAS (muncul saat header sudah lewat)
   ===================================================================== */
.mini {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  background: rgba(var(--bg-rgb), .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--garis); transform: translateY(-105%); transition: transform .22s ease, background-color .5s;
  padding-top: env(safe-area-inset-top);
}
.mini.tampil { transform: none; }
.mini-isi { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mini-menu { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.mini-menu::-webkit-scrollbar { display: none; }
.mini-menu button {
  flex: 0 0 auto; background: none; border: 0; padding: 13px 9px 11px; font-weight: 700; font-size: .86rem;
  color: var(--teks-2); border-bottom: 3px solid transparent; cursor: pointer;
}
.mini-menu button[aria-current="true"] { color: var(--teks); border-bottom-color: var(--aksen); }
.alat-kecil .tombol-tema, .alat-kecil .tombol-bahasa { height: 32px; padding: 0 9px; font-size: .78rem; background: var(--kartu); border-color: var(--garis); backdrop-filter: none; }

/* =====================================================================
   PENCARIAN & PANEL
   ===================================================================== */
main { padding-top: 6px; padding-bottom: 56px; position: relative; z-index: 2; }
.kotak-cari { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); padding: 16px; margin-bottom: 18px; box-shadow: var(--bayang); }
.kotak-cari label { display: block; font-weight: 700; margin-bottom: 8px; }
.baris-cari { display: flex; gap: 8px; }
.baris-cari input {
  flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--garis);
  background: var(--bg); font-size: 1rem;
}
.baris-cari input:focus { outline: none; border-color: var(--aksen); }
.baris-cari button { border: 0; border-radius: 12px; padding: 0 18px; background: var(--aksen); color: var(--aksen-teks); font-weight: 700; cursor: pointer; }
.bantuan { margin: 8px 0 0; font-size: .84rem; color: var(--teks-2); }

.panel { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); padding: 20px 16px 24px; scroll-margin-top: 64px; min-height: 320px; }
.panel:focus { outline: none; }
@media (min-width: 820px) { .panel { padding: 28px; } }
.panel h2 { font-family: var(--font-judul); font-weight: 400; font-size: 1.7rem; line-height: 1.2; margin: 0 0 6px; }
.panel h3 { font-size: 1.08rem; margin: 0; font-weight: 700; }
.lead { color: var(--teks-2); margin: 0 0 20px; max-width: 62ch; }
.bagian { margin-top: 30px; }
.bagian > h3 { margin-bottom: 10px; }
.panel.masuk > * { animation: panelMasuk .35s ease both; }
@keyframes panelMasuk { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Kotak situasi di Home */
.grid-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 820px) { .grid-sub { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ubin {
  text-align: left; background: var(--bg); border: 1px solid var(--garis); border-radius: 14px; padding: 14px;
  cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: transform .15s ease, border-color .2s, background-color .5s;
}
.ubin:hover { border-color: var(--aksen); transform: translateY(-2px); }
.ubin .ikon { font-size: 1.5rem; line-height: 1; }
.ubin strong { font-size: 1rem; line-height: 1.3; }
.ubin small { color: var(--teks-2); font-size: .8rem; line-height: 1.4; }
.ubin .jumlah { color: var(--mesir); font-weight: 700; font-size: .8rem; margin-top: auto; }

/* Penjelasan tiga bahasa */
.tiga-bahasa { display: grid; gap: 8px; }
.baris-bahasa { padding: 8px 0 8px 12px; border-left: 3px solid var(--warna); }
.baris-bahasa b { display: block; font-size: .9rem; color: var(--warna); }
.baris-bahasa span { font-size: .92rem; color: var(--teks-2); }
.fusha { --warna: var(--fusha); }
.mesir { --warna: var(--mesir); }
.saudi { --warna: var(--madinah); }

details.lipat { background: var(--bg); border: 1px solid var(--garis); border-radius: 14px; }
details.lipat > summary { cursor: pointer; padding: 14px 40px 14px 16px; font-weight: 700; list-style: none; position: relative; }
details.lipat > summary::-webkit-details-marker { display: none; }
details.lipat > summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: 400; font-size: 1.3rem; color: var(--teks-2); }
details.lipat[open] > summary::after { content: "\2212"; }
.isi-lipat { padding: 0 16px 16px; }
.tabel-baca { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabel-baca td { padding: 8px 6px; border-top: 1px solid var(--garis); vertical-align: top; }
.tabel-baca td:first-child { font-family: var(--font-ar); font-size: 1.25rem; white-space: nowrap; width: 34%; }

/* Chip sub */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; margin-bottom: 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px;
  border: 1.5px solid var(--garis); background: var(--bg-2); cursor: pointer; font-weight: 500; font-size: .88rem; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--aksen); border-color: var(--aksen); color: var(--aksen-teks); font-weight: 700; }

/* Tombol pilih Fusha / Mesir / Madinah */
.logat-pilih { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.logat-pilih button {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 10px;
  border: 1.5px solid var(--warna); background: var(--warna); color: var(--kartu); font-weight: 700; font-size: .9rem; cursor: pointer;
}
.logat-pilih button[aria-pressed="false"] { background: transparent; color: var(--warna); border-style: dashed; }
.info { font-size: .86rem; color: var(--teks-2); margin: 0 0 12px; }

/* =====================================================================
   KARTU KOSAKATA
   ===================================================================== */
.daftar { display: grid; gap: 12px; }
.kartu { background: var(--bg); border: 1px solid var(--garis); border-radius: 16px; padding: 14px 16px; position: relative; }
.kartu-kepala { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.kartu-kepala h3 { font-size: 1.1rem; line-height: 1.3; }
.kartu-terjemah { font-size: .84rem; color: var(--teks-2); margin: 1px 0 0; }
.kartu-asal { font-size: .76rem; color: var(--teks-2); margin: 3px 0 0; }
.tipe { font-size: .74rem; color: var(--teks-2); white-space: nowrap; }
.draf { display: inline-block; margin-top: 4px; font-size: .7rem; font-weight: 700; color: var(--draf-teks); background: var(--draf-bg); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.logat { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; padding: 7px 10px; border-left: 3px solid var(--warna); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--warna) 6%, transparent); }
.logat + .logat { margin-top: 6px; }
.logat-nama { font-size: .78rem; font-weight: 700; color: var(--warna); }
.logat-teks { text-align: right; min-width: 0; }
.ar { font-family: var(--font-ar); font-size: 1.65rem; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.lat { font-size: .86rem; font-style: italic; color: var(--teks-2); margin: 0; overflow-wrap: anywhere; }
.catatan { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--garis); font-size: .85rem; color: var(--teks-2); }
.kartu-bawah { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: .78rem; }
.kartu-bawah button { background: none; border: 0; padding: 4px 0; color: var(--teks-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: .78rem; }
.kartu-bawah button.edit { color: var(--aksen); font-weight: 700; text-decoration: none; }

@media (min-width: 900px) {
  .kartu { display: grid; grid-template-columns: 1.15fr repeat(var(--n, 3), 1fr); gap: 0 14px; align-items: start; }
  .kartu-kepala { flex-direction: column; justify-content: flex-start; margin: 0; }
  .logat { display: block; border-left: 0; border-top: 3px solid var(--warna); border-radius: 0 0 10px 10px; padding: 8px 6px 6px; text-align: center; }
  .logat + .logat { margin-top: 0; }
  .logat-teks { text-align: center; }
  .catatan, .kartu-bawah { grid-column: 1 / -1; }
}

/* Halaman (Sebelumnya / Berikutnya) */
.halaman {
  position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; margin-top: 16px; padding: 8px; background: var(--kartu);
  border: 1px solid var(--garis); border-radius: 16px; box-shadow: var(--bayang-kecil);
}
.halaman button { border: 1.5px solid var(--aksen); background: var(--aksen); color: var(--aksen-teks); border-radius: 12px; padding: 10px 12px; font-weight: 700; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.halaman button:disabled { background: transparent; color: var(--teks-2); border-color: var(--garis); cursor: default; }
.halaman-info { font-size: .75rem; color: var(--teks-2); text-align: center; line-height: 1.3; }
.halaman-info b { display: block; font-size: 1rem; color: var(--teks); }
.titik { display: flex; justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.titik button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: var(--garis); cursor: pointer; transition: width .2s; }
.titik button[aria-current="true"] { background: var(--aksen); width: 22px; border-radius: 999px; }
.daftar.geser-kiri { animation: masukKanan .22s ease-out; }
.daftar.geser-kanan { animation: masukKiri .22s ease-out; }
@keyframes masukKanan { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes masukKiri { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

.kosong { text-align: center; padding: 32px 18px; border: 1.5px dashed var(--garis); border-radius: 16px; background: var(--bg); }
.kosong svg { width: 32px; height: 32px; color: var(--emas); }
.kosong h3 { margin: 10px 0 4px; }
.kosong p { margin: 0 auto; color: var(--teks-2); max-width: 44ch; font-size: .94rem; }
.kosong .tombol-garis { margin-top: 14px; }

/* =====================================================================
   TENTANG SAYA & ADMINISTRASI
   ===================================================================== */
.profil { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.foto {
  width: 112px; height: 112px; border-radius: 50%; flex: 0 0 auto; background: var(--bg-2); display: grid; place-items: center;
  font-size: 2.4rem; font-weight: 800; overflow: hidden; border: 3px solid var(--kartu); outline: 1px solid var(--garis);
}
.foto img { width: 100%; height: 100%; object-fit: cover; }
.profil h2 { margin: 0; }
.profil dl { margin: 8px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: .92rem; }
.profil dt { color: var(--teks-2); }
.profil dd { margin: 0; }
.kontak { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.kontak a, .kontak span { display: inline-block; font-size: .88rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--bg-2); text-decoration: none; color: var(--teks); }
.cerita { max-width: 66ch; }
.cerita h3 { margin: 26px 0 8px; font-family: var(--font-judul); font-weight: 400; font-size: 1.25rem; }
.cerita p { margin: 0 0 12px; }

.peringatan { background: var(--draf-bg); border: 1px solid var(--garis); color: var(--draf-teks); border-radius: 12px; padding: 12px 14px; font-size: .9rem; margin-bottom: 22px; }
.tahap { margin-bottom: 24px; }
.tahap-judul { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.tahap-no { width: 30px; height: 30px; border-radius: 50%; background: var(--aksen); color: var(--aksen-teks); display: grid; place-items: center; font-size: .9rem; font-weight: 700; flex: 0 0 auto; }
.tahap-kosong { font-size: .9rem; color: var(--teks-2); border: 1.5px dashed var(--garis); border-radius: 12px; padding: 12px 14px; margin: 0; }
details.langkah { margin-bottom: 10px; }
.ringkas { display: block; font-weight: 400; font-size: .82rem; color: var(--teks-2); margin-top: 2px; }
.isi-lipat h4 { font-size: .84rem; margin: 14px 0 4px; color: var(--teks-2); }
.isi-lipat p, .isi-lipat ul { margin: 0; }
.isi-lipat ul { padding-left: 20px; }

/* =====================================================================
   FORMULIR (masukan & admin)
   ===================================================================== */
.formulir { display: grid; gap: 14px; max-width: 720px; }
.baris-form { display: grid; gap: 14px; }
@media (min-width: 640px) { .baris-form.dua { grid-template-columns: 1fr 1fr; } }
.isian { display: grid; gap: 6px; }
.isian > span { font-weight: 700; font-size: .9rem; }
.isian small { color: var(--teks-2); font-size: .8rem; }
.isian input, .isian select, .isian textarea {
  width: 100%; padding: 11px 13px; border-radius: 12px; border: 1.5px solid var(--garis);
  background: var(--bg); font-size: 16px; /* 16px: HP tidak auto-zoom */
}
.isian textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.isian input:focus, .isian select:focus, .isian textarea:focus { outline: none; border-color: var(--aksen); }
.isian input[dir="rtl"], .isian textarea[dir="rtl"] { font-family: var(--font-ar); font-size: 1.35rem; padding: 6px 13px; }
.isian.cek { display: flex; align-items: center; gap: 10px; }
.isian.cek input { width: 22px; height: 22px; accent-color: var(--aksen); }
.isian.cek span { font-weight: 500; }
fieldset.grup { border: 1px solid var(--garis); border-radius: 14px; padding: 12px 14px 14px; margin: 0; display: grid; gap: 12px; }
fieldset.grup legend { font-weight: 700; font-size: .86rem; padding: 0 6px; color: var(--warna, var(--teks)); }
.madu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* jebakan robot */
.tombol-utama, .tombol-garis, .tombol-bahaya {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 10px 18px; border-radius: 12px; font-weight: 700; cursor: pointer; text-decoration: none; font-size: .95rem;
}
.tombol-utama { border: 1.5px solid var(--aksen); background: var(--aksen); color: var(--aksen-teks); }
.tombol-utama:disabled { opacity: .55; cursor: wait; }
.tombol-garis { border: 1.5px solid var(--garis); background: var(--kartu); color: var(--teks); }
.tombol-garis:hover { border-color: var(--aksen); }
.tombol-bahaya { border: 1.5px solid var(--bahaya); background: transparent; color: var(--bahaya); }
.aksi-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pesan-ok { background: color-mix(in srgb, var(--sukses) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sukses) 35%, transparent); border-radius: 14px; padding: 16px; }
.pesan-ok h3 { color: var(--sukses); margin-bottom: 4px; }

/* =====================================================================
   FOOTER, TOMBOL KE ATAS, TOAST
   ===================================================================== */
footer { padding: 6px 0 calc(44px + env(safe-area-inset-bottom)); font-size: .86rem; color: var(--teks-2); }
footer p { margin: 0 0 6px; }
.bintang { display: block; width: 26px; height: 26px; color: var(--emas); margin-bottom: 10px; }
.footer-aksi { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 8px; }
.footer-aksi:empty { display: none; }
.tombol-trakteer {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 12px;
  background: #BE1E2D; color: #fff; font-weight: 700; text-decoration: none;
}
.footer-admin { margin-top: 14px; }
.link-kecil { background: none; border: 0; padding: 6px 0; color: var(--teks-2); font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: .8; }

#keAtas {
  position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 20; width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid var(--garis); background: var(--kartu); color: var(--teks); cursor: pointer;
  font-size: 1.2rem; opacity: 0; pointer-events: none; transition: opacity .2s; box-shadow: var(--bayang-kecil);
}
#keAtas.tampil { opacity: 1; pointer-events: auto; }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 150;
  max-width: min(92vw, 520px); background: var(--teks); color: var(--bg); padding: 12px 18px; border-radius: 14px;
  font-size: .92rem; font-weight: 500; box-shadow: var(--bayang); animation: toastMasuk .25s ease;
}
.toast.gagal { background: var(--bahaya); color: #fff; }
@keyframes toastMasuk { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* =====================================================================
   GERAKAN DIKURANGI (pengaturan aksesibilitas di HP/laptop)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .anim { opacity: 1; transform: none; }
}