/* ===== Token ===== */
:root {
  --hutan: #0b3d22;
  --hutan-dalam: #062214;
  --hijau: #0f7a3a;
  --emas: #c9a34a;
  --emas-muda: #ecdca8;
  --kertas: #f7f2e4;
  --putih: #fffdf7;
  --tinta: #1f2a23;
  --tinta-lembut: #5b665f;
  --garis: #e0d6b8;
  --bayangan: 0 14px 30px rgba(11, 61, 34, .08);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --arab: "Amiri", "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Pola bintang delapan (motif geometris pesantren) */
  --pola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='%23c9a34a' stroke-opacity='.17' stroke-width='1' d='M62 32 L44.01 36.98 L53.21 53.21 L36.98 44.01 L32 62 L27.02 44.01 L10.79 53.21 L19.99 36.98 L2 32 L19.99 27.02 L10.79 10.79 L27.02 19.99 L32 2 L36.98 19.99 L53.21 10.79 L44.01 27.02 Z'/%3E%3C/svg%3E");
  --latar-hutan: radial-gradient(ellipse at 50% 0%, #17603a 0%, var(--hutan) 60%, var(--hutan-dalam) 100%);
}

/* ===== Dasar ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--kertas); color: var(--tinta); font: 400 17px/1.6 var(--sans); overflow-x: hidden; }
a { color: var(--hijau); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--emas); outline-offset: 2px;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; color: var(--hutan); }
h1 { font-size: clamp(2rem, 5vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 1.8rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; max-width: 68ch; }
img { max-width: 100%; }

/* ===== Header ===== */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: var(--hutan); color: var(--putih);
  border-bottom: 2px solid var(--emas);
  box-shadow: 0 6px 18px rgba(6, 34, 20, .18);
}
.topbar .brand { font: 700 1.35rem/1 var(--serif); color: var(--putih); text-decoration: none; letter-spacing: .02em; }
.topbar .brand::before { content: "\2726"; color: var(--emas); margin-right: 8px; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.topbar nav a { color: #d7e3d9; text-decoration: none; padding: 6px 10px; border-radius: 4px; font-size: 15px; transition: background .2s, color .2s; }
.topbar nav a:hover { color: var(--putih); background: rgba(255, 255, 255, .08); }
.topbar .tombol-kecil { background: var(--emas); color: var(--hutan); font-weight: 600; }
.topbar .tombol-kecil:hover { background: var(--emas-muda); color: var(--hutan); }

/* ===== Tata letak ===== */
.wadah { flex: 1 0 auto; width: 100%; max-width: 1040px; margin: 0 auto; padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 40px) 48px; animation: halamanMasuk .7s .05s both; }
.wadah-penuh { max-width: none; padding: 0 0 8px; }
.wadah-penuh > section:not(.hero) { max-width: 1040px; margin: 0 auto 56px; padding: 0 clamp(16px, 4vw, 40px); }
body.keluar .wadah { animation: halamanKeluar .32s ease forwards; }
section { margin-bottom: 56px; }

/* ===== Tombol ===== */
button, .tombol {
  font: 600 16px var(--sans); padding: 10px 20px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--hijau); color: var(--putih); transition: background .2s, transform .15s; text-decoration: none; display: inline-block;
}
button:hover { background: var(--hutan); }
button:active, .tombol:active { transform: translateY(1px); }
.tombol { background: var(--emas); color: var(--hutan); border: 1px solid var(--emas); border-radius: 999px; padding: 12px 22px; }
.tombol:hover { background: var(--emas-muda); color: var(--hutan); }
.tombol-garis { background: transparent; color: var(--putih); border: 1px solid rgba(236, 220, 168, .7); }
.tombol-garis:hover { background: rgba(255, 255, 255, .08); color: var(--putih); }
.tombol-tolak { background: transparent; color: #8a2519; border: 1px solid #8a2519; }
.tombol-tolak:hover { background: #8a2519; color: var(--putih); }

/* ===== Beranda: hero ===== */
.hero {
  position: relative; overflow: hidden;
  text-align: center; margin: 0; padding: clamp(44px, 8vw, 84px) 20px clamp(52px, 7vw, 76px);
  background: var(--latar-hutan); color: var(--putih); border-bottom: 3px solid var(--emas);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--pola); background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(#000 0%, transparent 85%); mask-image: linear-gradient(#000 0%, transparent 85%);
}
.hero > * { position: relative; }
.bismillah { font: 700 clamp(1.5rem, 4vw, 2rem)/1.4 var(--arab); color: var(--emas-muda); margin: 0 auto 14px; direction: rtl; }
.hero .logo-pondok { width: min(210px, 56vw); height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35)); }
.hero h1 { color: var(--putih); margin: 18px 0 10px; }
.hero-teks { margin: 0 auto 26px; color: #cfe0d3; font-size: 1.08rem; }
.aksi-hero { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ===== Judul bagian ===== */
section > h2 { position: relative; padding-bottom: 10px; }
section > h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--emas), transparent);
}
.statistik { color: var(--tinta-lembut); margin-bottom: 14px; }
.statistik strong { color: var(--hutan); font-size: 1.1em; }
.kicker { font: 600 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hijau); margin: 0 0 4px; }

/* ===== Daftar angkatan ===== */
.daftar-angkatan { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--garis); }
.daftar-angkatan li { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--garis); padding-right: 4px; }
.angkatan-utama {
  flex: 1; display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 18px;
  padding: 16px 8px; color: var(--tinta); text-decoration: none; border-radius: 10px; transition: background .25s;
}
.angkatan-utama:hover { background: rgba(15, 122, 58, .06); }
.angkatan-utama:hover .nama-angkatan { color: var(--hijau); }
.daftar-angkatan img { width: 72px; height: 72px; object-fit: contain; transition: transform .3s; }
.angkatan-utama:hover img { transform: scale(1.06); }
.nama-angkatan { font: 600 1.45rem/1.1 var(--serif); color: var(--hutan); }
.kode-angkatan { font-variant-numeric: tabular-nums; color: var(--tinta-lembut); font-size: 15px; }
.galeri-link {
  white-space: nowrap; padding: 7px 14px; border: 1px solid var(--emas); border-radius: 999px;
  color: var(--hutan); text-decoration: none; font-weight: 600; font-size: 14px; transition: background .2s;
}
.galeri-link:hover { background: var(--emas-muda); }

/* ===== Banner angkatan ===== */
.banner-angkatan {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: clamp(18px, 4vw, 30px); margin-bottom: 24px;
  background: var(--putih); border: 1px solid var(--garis); border-top: 4px solid var(--emas);
  border-radius: 14px; box-shadow: var(--bayangan);
}
.banner-angkatan img { width: 120px; height: 120px; object-fit: contain; }
.banner-angkatan h1 { margin: 0 0 6px; }
.banner-angkatan p { margin: 0; color: var(--tinta-lembut); }
.banner-angkatan a { font-weight: 600; }
.kosong { padding: 28px; text-align: center; border: 1px dashed var(--garis); border-radius: 14px; color: var(--tinta-lembut); background: var(--putih); }

.filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.filter input, .filter select, .form input, .form select, .form textarea {
  font: inherit; padding: 11px 13px; color: var(--tinta);
  background: var(--putih); border: 1px solid #bfb8a4; border-radius: 8px; min-width: 0; width: 100%;
}
.filter input[type=search] { flex: 1 1 220px; width: auto; }
.filter select { width: auto; }
.filter button { padding: 11px 20px; }

/* ===== Kartu anggota ===== */
.grid-anggota { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 20px; }
.kartu-anggota {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 10px;
  color: var(--tinta); text-decoration: none; border-radius: 14px; transition: background .25s, transform .25s;
}
.kartu-anggota:hover { background: var(--putih); transform: translateY(-3px); box-shadow: var(--bayangan); }
.kartu-anggota img {
  width: 112px; height: 112px; border-radius: 50%; object-fit: cover;
  background: #ece6d2; border: 3px solid var(--emas); padding: 3px;
}
.kartu-anggota strong { font: 600 1.2rem/1.2 var(--serif); color: var(--hutan); }
.kartu-anggota:hover strong { color: var(--hijau); }
.kartu-anggota span { font-size: 14px; color: var(--tinta-lembut); }

/* ===== Galeri ===== */
.tambah-galeri { margin-bottom: 22px; }
.tambah-galeri summary { cursor: pointer; font-weight: 600; color: var(--hijau); padding: 6px 0; }
.tambah-galeri .kartu-form { margin-top: 10px; }
.grid-galeri { column-width: 230px; column-gap: 18px; }
.grid-galeri figure {
  break-inside: avoid; margin: 0 0 18px; overflow: hidden;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 14px; box-shadow: var(--bayangan);
}
.foto-galeri { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: none; cursor: zoom-in; }
.foto-galeri:hover { background: none; }
.foto-galeri img { width: 100%; display: block; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.foto-galeri:hover img { transform: scale(1.03); }
.grid-galeri figcaption { padding: 12px 14px 14px; display: grid; gap: 4px; font-size: 14px; }
.grid-galeri figcaption strong { font: 600 1.1rem/1.2 var(--serif); color: var(--hutan); }
.tandai-foto { color: var(--tinta-lembut); }
.hapus-foto { margin-top: 6px; }
.hapus-foto button { padding: 6px 12px; font-size: 14px; }

.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: 24px;
  background: rgba(6, 34, 20, .94); animation: munculTeks .3s both;
}
.lightbox figure { margin: 0; text-align: center; }
.lightbox img { max-width: min(960px, 92vw); max-height: 78vh; border-radius: 10px; border: 4px solid var(--emas-muda); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.lightbox figcaption { color: var(--emas-muda); margin-top: 12px; font: 500 1.1rem var(--serif); }
.lightbox .tutup { position: absolute; top: 10px; right: 14px; background: none; color: var(--putih); font-size: 40px; line-height: 1; padding: 4px 12px; }
.lightbox .tutup:hover { background: rgba(255, 255, 255, .1); }

/* ===== Profil ===== */
.profil {
  max-width: 600px; margin: 0 auto; padding: clamp(24px, 5vw, 40px);
  background: var(--putih); border: 1px solid var(--garis); border-top: 4px solid var(--emas); border-radius: 14px;
  text-align: center; box-shadow: var(--bayangan);
}
.foto-profil { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; border: 4px solid var(--emas); padding: 3px; background: var(--kertas); }
.profil h1 { margin: 18px 0 2px; }
.panggilan { font: italic 500 1.25rem var(--serif); color: var(--tinta-lembut); margin: 0 0 10px; }
.label-status { display: inline-block; font-size: 14px; padding: 3px 12px; border: 1px solid var(--hijau); color: var(--hijau); border-radius: 999px; }
.data-profil { list-style: none; padding: 0; margin: 24px 0; text-align: left; border-top: 1px solid var(--garis); }
.data-profil li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 2px; border-bottom: 1px solid var(--garis); }
.data-profil b { font-weight: 600; color: var(--tinta-lembut); }
.data-profil a { font-weight: 600; }
.kenangan { margin: 24px 0 0; padding: 4px 0 4px 18px; text-align: left; font: italic 500 1.2rem/1.5 var(--serif); color: var(--hutan); border-left: 3px solid var(--emas); }

/* ===== Formulir ===== */
.form { display: grid; gap: 16px; max-width: 560px; }
.form.lebar { max-width: 820px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; color: var(--tinta); }
.form input, .form select, .form textarea { font-weight: 400; font-size: 16px; }
.form input[type=file] { padding: 9px; background: var(--kertas); }
.form textarea { min-height: 110px; resize: vertical; }
.form button { justify-self: start; padding: 12px 24px; }
.form-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-dua label { min-width: 0; }
.kartu-form {
  background: var(--putih); border: 1px solid var(--garis); border-radius: 14px;
  padding: clamp(18px, 4vw, 30px); box-shadow: var(--bayangan);
}
.galat { margin: 0 0 14px; padding: 11px 14px; background: #f8e7e3; color: #7a1f14; border-left: 3px solid #b3261e; border-radius: 6px; }
.info { margin: 0 0 16px; padding: 11px 14px; background: #e6efe6; color: var(--hutan); border-left: 3px solid var(--hijau); border-radius: 6px; }

.sub-halaman { color: var(--tinta-lembut); margin: -6px 0 22px; }

/* ===== Halaman masuk ===== */
.kartu-masuk {
  max-width: 440px; margin: 0 auto; padding: clamp(26px, 5vw, 40px);
  background: var(--putih); border: 1px solid var(--garis); border-top: 4px solid var(--emas);
  border-radius: 16px; box-shadow: var(--bayangan); text-align: center;
}
.kartu-masuk .logo-kecil { width: 92px; height: auto; margin: 0 auto 8px; display: block; }
.kartu-masuk .sub { color: var(--tinta-lembut); margin: 0 auto 6px; }
.kartu-masuk .form { text-align: left; margin: 22px auto 0; }
.kartu-masuk .form button { width: 100%; justify-self: stretch; }
.kartu-masuk .bawah { margin: 20px 0 0; font-size: 15px; }

/* ===== Dashboard ===== */
.kartu-antrean { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--garis); }
.kartu-antrean img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--emas); flex-shrink: 0; }
.kartu-antrean strong { font: 600 1.25rem var(--serif); color: var(--hutan); }
.kartu-antrean small { color: var(--tinta-lembut); }
.kartu-antrean .kenangan { font-size: 1rem; margin-top: 8px; }
.aksi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tabel { width: 100%; border-collapse: collapse; background: var(--putih); border-radius: 10px; overflow: hidden; }
.tabel th, .tabel td { padding: 12px 10px; border-bottom: 1px solid var(--garis); text-align: left; }
.tabel th { font-weight: 600; color: var(--tinta-lembut); font-size: 14px; background: #f1ecdb; }

/* ===== Footer ===== */
.footer {
  position: relative; overflow: hidden; flex-shrink: 0;
  padding: 44px clamp(16px, 4vw, 40px) 0;
  background: var(--hutan-dalam); color: #cfe0d3; font-size: 15px; border-top: 3px solid var(--emas);
}
.footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--pola); background-size: 64px 64px; opacity: .6;
}
.footer > * { position: relative; }
.footer-isi {
  max-width: 1040px; margin: 0 auto; display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 32px; align-items: start;
}
.footer-kolom { display: grid; gap: 8px; align-content: start; }
.footer-kolom p { margin: 0; max-width: none; line-height: 1.55; }
.footer-kolom a { color: var(--emas-muda); text-decoration: none; width: max-content; }
.footer-kolom a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-logo { width: 60px; height: auto; margin-bottom: 4px; }
.footer-judul { font: 600 1.15rem/1.25 var(--serif); color: var(--putih); margin-bottom: 2px !important; }
.footer-wa {
  margin-top: 6px; padding: 8px 14px; border: 1px solid var(--emas); border-radius: 999px;
  color: var(--emas-muda) !important; font-weight: 600; width: max-content;
}
.footer-wa:hover { background: rgba(201, 163, 74, .12); }
.footer .donasi { margin: 0; max-width: none; }
.footer .donasi summary { cursor: pointer; list-style: revert; }
.footer .donasi img { margin: 8px 0; }
.footer-bawah {
  position: relative; max-width: 1040px; margin: 36px auto 0; padding: 16px 0 22px;
  border-top: 1px solid rgba(201, 163, 74, .3);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px;
  font-size: 14px; color: #9fbba7;
}
.footer-bawah p { margin: 0; max-width: none; }
.footer-bawah a { color: var(--emas-muda); }
.ke-atas { text-decoration: none; }
.ke-atas:hover { text-decoration: underline !important; }

/* ===== Pembuka: logo PMNH, lalu tirai terbelah dua ===== */
.intro { display: none; position: fixed; inset: 0; z-index: 100; place-items: center; color: var(--putih); }
.js .intro { display: grid; }
.tirai {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background-color: var(--hutan);
  background-image: radial-gradient(ellipse at 50% 35%, #17603a 0%, var(--hutan) 55%, var(--hutan-dalam) 100%), var(--pola);
  background-size: auto, 64px 64px;
  transition: transform 1.1s cubic-bezier(.77, 0, .18, 1);
  will-change: transform;
}
.tirai-kiri { left: 0; box-shadow: inset -2px 0 0 var(--emas); }
.tirai-kanan { right: 0; box-shadow: inset 2px 0 0 var(--emas); }
.intro.buka .tirai-kiri { transform: translateX(-100%); }
.intro.buka .tirai-kanan { transform: translateX(100%); }
.intro-inner {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 24px; text-align: center; transition: opacity .5s ease, transform .5s ease;
}
.intro.buka .intro-inner { opacity: 0; transform: scale(.98); }
.intro-logo { width: min(250px, 64vw); height: auto; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .4)); }
.intro-arab { margin: 4px 0 0; font: 700 clamp(1.4rem, 4vw, 1.8rem)/1.4 var(--arab); color: var(--emas-muda); direction: rtl; }
.intro-teks { margin: 0; font: 500 1.35rem/1.3 var(--serif); color: #d7e6da; }
.intro-tombol {
  margin-top: 10px; background: var(--emas); color: var(--hutan); font-weight: 700; font-size: 17px;
  padding: 14px 40px; border-radius: 999px; box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
.intro-tombol:hover { background: var(--emas-muda); }

/* ===== Salam angkatan: logo muncul saat berpindah ke halaman angkatan ===== */
.salam {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; color: var(--putih);
  background: var(--latar-hutan);
}
.salam::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--pola); background-size: 64px 64px; opacity: .8;
}
.salam-isi { position: relative; display: grid; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
.salam img { width: min(260px, 64vw); height: auto; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .45)); animation: logoMasuk .8s cubic-bezier(.2, .7, .2, 1) both; }
.salam p { margin: 0; font: 600 clamp(1.4rem, 4vw, 2.1rem)/1.2 var(--serif); color: var(--emas-muda); animation: munculTeks .6s .3s both; }
.salam-datang { animation: salamHilang .6s 1.25s forwards; pointer-events: none; }

/* ===== Kaset hymne: pojok kanan bawah, selalu di atas ===== */
.kaset {
  display: none; position: fixed; right: 16px; bottom: 16px; z-index: 200;
  flex-direction: column; align-items: stretch; gap: 0; width: 156px; padding: 8px 10px 7px;
  background: linear-gradient(160deg, #1d6b3f 0%, var(--hutan) 60%, var(--hutan-dalam) 100%);
  border: 2px solid var(--emas); border-radius: 12px;
  color: var(--putih); cursor: pointer; box-shadow: 0 10px 26px rgba(6, 34, 20, .45);
  transition: box-shadow .3s, transform .2s;
}
.js .kaset { display: flex; }
.kaset:hover { transform: translateY(-2px); }
.kaset.putar { box-shadow: 0 10px 30px rgba(201, 163, 74, .5); }
.kaset-label {
  display: block; padding: 3px 6px; text-align: center;
  font: 700 .95rem/1.1 var(--serif); color: var(--hutan); background: var(--kertas);
  border-radius: 4px; border: 1px solid var(--emas);
}
.kaset-jendela {
  display: flex; justify-content: space-between; align-items: center; height: 34px; margin: 7px 0 4px; padding: 0 9px;
  background: #0a1a10; border: 1px solid #000; border-radius: 4px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7);
}
.gulung {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--emas-muda);
  background: repeating-conic-gradient(#e9dca8 0 15deg, #1b1b1b 15deg 60deg);
  animation: putarGulung 1.4s linear infinite; animation-play-state: paused;
}
.kaset.putar .gulung { animation-play-state: running; }
.kaset-status { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--emas-muda); text-align: center; }
.kaset:focus-visible { outline: 2px solid var(--emas-muda); outline-offset: 3px; }

/* ===== Gerak ===== */
/* Hanya opacity: transform pada pembungkus halaman akan membuat pembuka (fixed) ikut tergeser */
@keyframes halamanMasuk { from { opacity: 0; } to { opacity: 1; } }
@keyframes halamanKeluar { to { opacity: 0; } }
@keyframes naik { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes logoMasuk { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes munculTeks { from { opacity: 0; } to { opacity: 1; } }
@keyframes putarGulung { to { transform: rotate(360deg); } }
@keyframes salamHilang { to { opacity: 0; visibility: hidden; } }
@keyframes salamTampil { to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .js .hero > * { opacity: 0; }
  .js.siap .hero > * { animation: naik .9s cubic-bezier(.2, .7, .2, 1) forwards; }
  .js.siap .hero > *:nth-child(2) { animation-delay: .12s; }
  .js.siap .hero > *:nth-child(3) { animation-delay: .22s; }
  .js.siap .hero > *:nth-child(4) { animation-delay: .32s; }
  .js.siap .hero > *:nth-child(5) { animation-delay: .42s; }
  .js.siap .daftar-angkatan li { animation: naik .6s forwards; }
  .intro-logo { animation: logoMasuk 1.4s .2s cubic-bezier(.2, .7, .2, 1) both; }
  .intro-arab { animation: munculTeks .9s .8s both; }
  .intro-teks { animation: munculTeks .9s 1s both; }
  .intro-tombol { animation: munculTeks .8s 1.5s both; }
  .grid-anggota .kartu-anggota { animation: naik .6s both; }
}

/* ===== Tampilan kecil (HP) ===== */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .tentang-isi { grid-template-columns: 1fr; gap: 20px; }
  .footer-isi { grid-template-columns: 1fr; gap: 26px; }
  .form-dua { grid-template-columns: 1fr; }
  .angkatan-utama { grid-template-columns: 56px 1fr; }
  .angkatan-utama img { width: 56px; height: 56px; }
  .angkatan-utama .kode-angkatan { grid-column: 2; margin-top: -10px; }
  .galeri-link { font-size: 13px; padding: 6px 11px; }
  .banner-angkatan img { width: 96px; height: 96px; }
  .kartu-anggota img { width: 96px; height: 96px; }
  .foto-profil { width: 136px; height: 136px; }
  .kaset { width: 136px; right: 12px; bottom: 12px; }
  .fab-tutup { display: none; }
}

/* ===== Gerak dikurangi: tanpa animasi, semua tampil ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .intro.buka { display: none; }
  .salam-datang { display: none; }
}

/* ===== Beranda: tentang, pesan, dan buku ucapan ===== */
.tentang-kepala { margin-bottom: 4px; }
.tentang-kepala .kicker { margin-bottom: 8px; }
.tentang h2 { max-width: 24ch; margin: 0; }
.tentang h2::after { display: none; }
.tentang-isi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: start; margin-top: 24px; }
.tentang-isi > p { margin: 6px 0 0; font-size: 1.08rem; color: var(--tinta-lembut); max-width: 44ch; }
.tujuan-daftar { list-style: none; margin: 0; padding: 0; counter-reset: tujuan; border-top: 1px solid var(--garis); }
.tujuan-daftar li {
  display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: 2px;
  padding: 16px 0; border-bottom: 1px solid var(--garis); counter-increment: tujuan;
}
.tujuan-daftar li::before {
  content: counter(tujuan, decimal-leading-zero); grid-row: span 2;
  font: 600 1.05rem/1.7 var(--serif); color: var(--emas);
}
.tujuan-daftar h3 { font-size: 1.2rem; margin: 0; }
.tujuan-daftar p { margin: 0; font-size: 15px; color: var(--tinta-lembut); max-width: none; }

.grid-pesan { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.kartu-pesan {
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 20px;
  background: var(--putih); border: 1px solid var(--garis); border-left: 3px solid var(--emas);
  border-radius: 14px; color: var(--tinta); text-decoration: none; box-shadow: var(--bayangan);
  transition: transform .25s, box-shadow .25s;
}
.kartu-pesan:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(11, 61, 34, .14); }
.isi-pesan { margin: 0; font: italic 500 1.12rem/1.5 var(--serif); color: var(--hutan); max-width: none; }
.dari-pesan { font-size: 14px; color: var(--tinta-lembut); line-height: 1.4; }
.dari-pesan strong { color: var(--hutan); }

.buku-ucapan { max-width: 760px; margin: 0 auto 56px; padding: 0 clamp(16px, 4vw, 40px); }
.form-ucapan { margin-bottom: 22px; display: grid; gap: 12px; }
.form-ucapan label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.form-ucapan textarea { font: inherit; font-weight: 400; font-size: 16px; padding: 11px 13px; border: 1px solid #bfb8a4; border-radius: 8px; background: var(--putih); min-height: 90px; resize: vertical; }
.form-ucapan button { justify-self: start; }
.kosong-kecil { color: var(--tinta-lembut); }
.daftar-ucapan { display: grid; gap: 14px; }
.kartu-ucapan {
  padding: 18px 20px; background: var(--putih); border: 1px solid var(--garis);
  border-radius: 14px; box-shadow: var(--bayangan);
}
.isi-ucapan { margin: 0 0 12px; font: italic 500 1.1rem/1.55 var(--serif); color: var(--hutan); max-width: none; }
.kartu-ucapan .dari { display: flex; align-items: center; gap: 12px; margin: 0; max-width: none; font-size: 14px; }
.kartu-ucapan .dari img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--emas); }
.kartu-ucapan .dari small { color: var(--tinta-lembut); }

/* ===== Beranda: profil pondok, visi misi, motto, ajakan ===== */
.pondok { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pondok-foto { margin: 0; }
.pondok-foto img { width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid var(--garis); box-shadow: var(--bayangan); }
.pondok-teks h2 { margin-bottom: 14px; }
.pondok-teks p { color: var(--tinta-lembut); }
.fakta { display: grid; grid-template-columns: repeat(3, 1fr); margin: 26px 0 0; border-top: 1px solid var(--garis); }
.fakta div { padding: 16px 0 0; }
.fakta div + div { border-left: 1px solid var(--garis); padding-left: 18px; }
.fakta dt { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-lembut); }
.fakta dd { margin: 6px 0 0; font: 600 2rem/1 var(--serif); color: var(--hutan); }

.visi-misi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; }
.visi-misi h2 { margin-bottom: 12px; }
.visi-misi .kolom > p { color: var(--tinta-lembut); }
ol.huruf { list-style-type: lower-alpha; margin: 0; padding-left: 1.5em; color: var(--tinta-lembut); }
ol.huruf li { padding: 8px 0; border-bottom: 1px solid var(--garis); max-width: 62ch; }
ol.huruf li::marker { color: var(--emas); font-weight: 600; }


.ajakan { text-align: center; padding: 8px 0 0; }
.ajakan h2 { margin-bottom: 8px; }
.ajakan p { margin: 0 auto 22px; color: var(--tinta-lembut); }

.banner-daftar { margin-bottom: 28px; }

@media (max-width: 760px) {
  .pondok, .visi-misi { grid-template-columns: 1fr; gap: 28px; }
  .fakta dd { font-size: 1.6rem; }
}

/* ===== Tampilan HP: kaset disembunyikan, header ringkas, bagian tidak berantakan ===== */
@media (max-width: 640px) {
  .tentang-isi { grid-template-columns: 1fr; gap: 20px; }
  .footer-isi { grid-template-columns: 1fr; gap: 26px; }
  .tentang h2 { max-width: none; }
  .tujuan-daftar li { grid-template-columns: 36px 1fr; }
  .pondok, .visi-misi { grid-template-columns: 1fr; gap: 28px; }
  .fakta dd { font-size: 1.6rem; }
    .topbar { padding: 10px 14px; gap: 6px 10px; }
  .topbar .brand { font-size: 1.2rem; }
  .topbar nav { gap: 2px 2px; }
  .topbar nav a { padding: 5px 8px; font-size: 14px; }

  /* Kaset: hanya tab kecil di tepi kanan. Ketuk tab untuk membuka, ketuk lagi untuk memutar/jeda. */
  .kaset { right: 0; bottom: 84px; width: 150px; padding: 8px 10px; border-radius: 12px 0 0 12px; transform: translateX(calc(100% - 30px)); }
  .kaset:hover { transform: translateX(calc(100% - 30px)); }
  .kaset > * { opacity: 0; transition: opacity .25s; }
  .kaset::before {
    content: "\266A"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    font-size: 18px; color: var(--emas-muda);
  }
  .kaset.terbuka, .kaset.terbuka:hover { transform: none; }
  .kaset.terbuka > * { opacity: 1; }
  .kaset.terbuka::before { opacity: 0; }
}

/* ===== Motto: pita hutan dengan empat kata emas ===== */
.motto {
  position: relative; overflow: hidden; text-align: center;
  padding: 30px 22px 26px; border-radius: 16px; border-top: 3px solid var(--emas);
  background: var(--latar-hutan); color: var(--putih); box-shadow: 0 16px 34px rgba(6, 34, 20, .22);
}
.motto::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--pola); background-size: 64px 64px; opacity: .85;
}
.motto > * { position: relative; }
.motto .kicker { color: var(--emas-muda); margin: 0 0 14px; }
.motto ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.motto li { padding: 8px 12px; font: 600 clamp(1.2rem, 2.6vw, 1.6rem)/1.2 var(--serif); color: var(--putih); }
.motto li + li { border-left: 1px solid rgba(201, 163, 74, .45); }
.motto li span { display: block; margin-bottom: 8px; font: 600 .75rem/1 var(--sans); letter-spacing: .24em; color: var(--emas); }
@media (max-width: 640px) {
  .motto { padding: 24px 14px 18px; }
  .motto ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motto li { padding: 12px 8px; font-size: 1.2rem; }
  .motto li:nth-child(2n+1) { border-left: 0; }
  .motto li:nth-child(n+3) { border-top: 1px solid rgba(201, 163, 74, .45); }
}

/* ===== Pengajuan angkatan dan kelola logo ===== */
.logo-admin { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.kartu-antrean .logo-admin { width: 64px; height: 64px; }
.form-logo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.form-logo input[type=file] { max-width: 220px; font-size: 14px; }
.tabel td img.logo-admin { display: block; }

/* ===== Admin: kata sandi sementara, tabel aksi, anggota ===== */
.sandi-baru { padding: 14px 16px; margin-bottom: 20px; background: #fbf6e6; border: 1px solid var(--garis); border-left: 4px solid var(--emas); border-radius: 10px; }
.sandi-baru p { margin: 0 0 6px; }
.sandi-baru code { font-size: 1.05rem; padding: 2px 8px; background: var(--putih); border: 1px solid var(--garis); border-radius: 6px; }
.aksi-tabel { white-space: nowrap; }
.aksi-tabel form { display: inline-block; margin: 2px 4px 2px 0; }
.aksi-tabel button { padding: 6px 10px; font-size: 14px; }
.aksi-tabel a { margin-right: 10px; font-weight: 600; }
.tabel-geser { overflow-x: auto; }

/* Dashboard admin */
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--garis); }
.dash-head h1 { margin: 0; }
.dash-head .sub-halaman { margin: 6px 0 0; }
.dash-menu { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-menu a { padding: 8px 14px; border: 1px solid var(--garis); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--hutan); background: var(--putih); }
.dash-menu a:hover { border-color: var(--emas); }
.angka-baris { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; }
.angka-baris > div { background: var(--putih); border: 1px solid var(--garis); border-top: 3px solid var(--emas); border-radius: 12px; padding: 16px 18px; }
.angka-baris span { display: block; font-size: 13px; color: var(--tinta-lembut); }
.angka-baris strong { display: block; font: 600 2rem/1.2 var(--serif); color: var(--hutan); }
.dash-bagian { margin-bottom: 36px; }
.bagian-judul { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bagian-judul h2 { margin: 0; font-size: 1.35rem; }
.lencana { background: var(--hutan); color: #fff; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.antrean-baris { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; background: var(--putih); border: 1px solid var(--garis); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.antrean-baris img { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; border: 2px solid var(--emas); }
.antrean-info strong { display: block; }
.antrean-info span, .antrean-info small { display: block; color: var(--tinta-lembut); font-size: 14px; }
.antrean-info .kenangan { font-size: 1rem; margin-top: 6px; }
.aksi-cepat { display: flex; gap: 8px; }
.aksi-cepat button { padding: 8px 14px; font-size: 14px; }
.bar { height: 8px; min-width: 120px; background: var(--kertas); border: 1px solid var(--garis); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--hijau), var(--emas)); }
.sebaran { width: 180px; }
.daftar-alasan { margin: 8px 0 0; padding-left: 20px; }
.foto-edit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.foto-edit img { width: 80px; height: 100px; object-fit: cover; border-radius: 8px; border: 2px solid var(--emas); }
.foto-edit label { flex: 1; min-width: 220px; }
@media (max-width: 640px) {
  .angka-baris { grid-template-columns: repeat(2, 1fr); }
  .antrean-baris { grid-template-columns: 48px 1fr; }
  .antrean-baris img { width: 48px; height: 48px; }
  .aksi-cepat { grid-column: 1 / -1; }
  .aksi-cepat button { flex: 1; }
  .sebaran { display: none; }
}

/* Kisi kartu angkatan */
.kisi-angkatan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.kartu-angkatan {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 16px; padding: 26px 20px 20px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02); overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.kartu-angkatan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--hijau), var(--emas)); }
.kartu-angkatan:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -18px rgba(15,122,58,.45); border-color: var(--emas); }
.medali {
  width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 50% 35%, #fffdf6 0%, var(--kertas) 70%);
  border: 1px solid var(--garis); box-shadow: inset 0 0 0 6px #fff, 0 6px 18px -8px rgba(0,0,0,.25);
}
.medali img { width: 96px; height: 96px; object-fit: contain; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.kartu-angkatan:hover .medali img { transform: scale(1.08) rotate(-3deg); }
.kartu-isi { margin-top: 16px; }
.kode-badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--emas); border: 1px solid var(--emas); border-radius: 999px; padding: 2px 10px; }
.kartu-angkatan .nama-angkatan { font: 600 1.5rem/1.15 var(--serif); margin: 8px 0 2px; }
.kartu-angkatan .nama-angkatan a { color: var(--hutan); text-decoration: none; }
.kartu-angkatan .nama-angkatan a:hover { color: var(--hijau); }
.kartu-angkatan .kode-angkatan { margin: 0; font-size: 14px; color: var(--tinta-lembut); }
.kartu-tombol { display: flex; gap: 8px; margin-top: 18px; width: 100%; }
.kartu-tombol a { flex: 1; text-align: center; padding: 9px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; }
.kartu-tombol .tombol-kecil { background: var(--hutan); color: #fff; }
.kartu-tombol .tombol-kecil:hover { background: var(--hijau); }
.kartu-tombol .tombol-garis { background: transparent; color: var(--hutan); border: 1px solid var(--emas); }
.kartu-tombol .tombol-garis:hover { background: var(--emas-muda); }
@media (prefers-reduced-motion: no-preference) {
  .kartu-angkatan { animation: naik .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
  .medali img { animation: logoMasuk .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 80ms + 300ms); }
}
@media (max-width: 640px) {
  .kisi-angkatan { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .kartu-angkatan { padding: 20px 12px 16px; }
  .medali { width: 96px; height: 96px; }
  .medali img { width: 72px; height: 72px; }
  .kartu-angkatan .nama-angkatan { font-size: 1.2rem; }
  .kartu-tombol { flex-direction: column; }
}

/* Saran untuk pengembang */
.saran { background: var(--putih); border: 1px solid var(--garis); border-top: 3px solid var(--emas); border-radius: 16px; padding: 30px 28px; margin-bottom: 56px; }
.saran-kepala { margin-bottom: 18px; }
.saran-kepala h2 { margin: 0 0 6px; font-size: 1.6rem; }
.saran-kepala p:last-child { margin: 0; color: var(--tinta-lembut); }
.kotak-saran { max-width: none; }
.saran .info { margin: 0 0 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.saran-baris { grid-template-columns: 1fr; }
@media (max-width: 640px) { .saran { padding: 22px 18px; } }

/* Statistik pengunjung */
.kecil { font-size: 13px; color: var(--tinta-lembut); }
.angka-tiga { grid-template-columns: repeat(4, 1fr); }
.angka-baris small { display: block; margin-top: 4px; font-size: 13px; color: var(--tinta-lembut); }
.kartu-tren.tren-naik { border-top-color: var(--hijau); }
.kartu-tren.tren-naik small { color: var(--hijau); font-weight: 600; }
.kartu-tren.tren-turun { border-top-color: #8a2519; }
.kartu-tren.tren-turun small { color: #8a2519; font-weight: 600; }
.kartu-grafik { background: var(--putih); border: 1px solid var(--garis); border-radius: 12px; padding: 18px 18px 12px; margin-bottom: 16px; }
.grafik { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; align-items: end; height: 190px; }
.kolom-grafik { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.kolom-grafik .nilai { font-size: 12px; font-weight: 700; color: var(--hutan); min-height: 16px; }
.kolom-grafik i { display: block; width: 100%; max-width: 28px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--emas), var(--hijau)); }
.kolom-grafik small { font-size: 11px; color: var(--tinta-lembut); margin-top: 4px; }
.kartu-grafik .kecil { margin: 8px 0 0; text-align: right; }
@media (max-width: 640px) {
  .angka-tiga { grid-template-columns: repeat(2, 1fr); }
  .grafik { gap: 3px; height: 160px; }
  .kolom-grafik .nilai { display: none; }
  .kolom-grafik small { font-size: 9px; }
}

/* Petunjuk foto profil */
.petunjuk-foto { display: block; font-weight: 400; font-size: 14px; color: var(--tinta-lembut); margin-top: 6px; line-height: 1.5; }