/*
  Beranda v3: urutan dan gaya meniru al-hamidiyah.sch.id (hero banner, Education Program, kartu program, Berita, Prestasi, Galeri, Testimoni),
  dengan warna YSMB. Titik pindah: @container halaman, 55,5 em = desktop.
*/

/* ---------- Judul bagian: tengah, tebal, garis empat warna ---------- */
.judul-bagian { text-align: center; margin-bottom: var(--jarak-6); }
.judul-bagian h2 { margin: 0; font-size: var(--teks-3xl); color: var(--warna-teks-merek); }
.judul-bagian::after { content: ""; display: block; width: 7rem; height: 6px; margin: var(--jarak-3) auto 0; border-radius: 3px; background: var(--garis-empat-warna); }
.judul-bagian--terang h2 { color: var(--warna-teks-di-pekat-putih); }
.bagian__aksi { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--jarak-3); margin-top: var(--jarak-6); }

/* =========================================================
   1. Hero slider penuh layar
   ========================================================= */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  height: calc(100svh - var(--tinggi-atas, 9.25rem)); min-height: 26rem;
}
.hero__bingkai { position: absolute; inset: 0; touch-action: pan-y; }
.hero__slide {
  --latar-1: var(--warna-merek); --latar-2: var(--warna-latar-pekat-2); --teks: var(--warna-teks-di-pekat-putih);
  --bentuk-1: var(--warna-limau); --bentuk-2: var(--warna-kuning); --bentuk-3: var(--warna-biru); --bentuk-4: var(--warna-oranye);
  --tombol-latar: var(--warna-kuning); --tombol-teks: var(--warna-teks-di-limau); --pola: var(--pola-terang); --opasitas-pola: .10;
  position: absolute; inset: 0; color: var(--teks);
  background: linear-gradient(135deg, var(--latar-1), var(--latar-2));
  opacity: 0; visibility: hidden; transition: opacity var(--transisi-fade), visibility 0s linear var(--transisi-fade);
}
.hero__slide.aktif { opacity: 1; visibility: visible; transition: opacity var(--transisi-fade), visibility 0s; z-index: 1; }
.hero__slide[data-warna="limau"] {
  --latar-1: var(--warna-limau-muda); --latar-2: #C5E19B; --teks: var(--warna-latar-pekat-3);
  --bentuk-1: var(--warna-merek); --bentuk-2: var(--warna-kuning); --bentuk-3: var(--warna-biru); --bentuk-4: var(--warna-oranye);
  --tombol-latar: var(--warna-merek); --tombol-teks: var(--warna-teks-di-pekat-putih); --pola: var(--pola-gelap); --opasitas-pola: .10;
}
.hero__slide[data-warna="biru"] {
  --latar-1: var(--warna-biru-pekat); --latar-2: var(--warna-biru-gelap); --teks: var(--warna-teks-di-pekat-putih);
  --bentuk-1: var(--warna-limau); --bentuk-2: var(--warna-kuning); --bentuk-3: var(--warna-biru-pucat); --bentuk-4: var(--warna-oranye);
  --tombol-latar: var(--warna-limau); --tombol-teks: var(--warna-teks-di-limau);
}
.hero__slide[data-warna="kuning"] {
  --latar-1: var(--warna-kuning-muda); --latar-2: #FFC94D; --teks: var(--warna-teks-kuning-gelap);
  --bentuk-1: var(--warna-merek); --bentuk-2: var(--warna-biru); --bentuk-3: var(--warna-limau); --bentuk-4: var(--warna-oranye);
  --tombol-latar: var(--warna-merek); --tombol-teks: var(--warna-teks-di-pekat-putih); --pola: var(--pola-gelap);
}
.hero__slide::before { content: ""; position: absolute; inset: 0; background: var(--pola) 0 0 / 72px; opacity: var(--opasitas-pola); pointer-events: none; }

/* Bentuk dekoratif berwarna */
.hero__hiasan i { position: absolute; display: block; }
.hero__hiasan i:nth-child(1) { width: 34cqi; aspect-ratio: 1; left: -12cqi; bottom: -16cqi; border-radius: 50%; background: var(--bentuk-1); }
.hero__hiasan i:nth-child(2) { width: 18cqi; aspect-ratio: 1; right: -5cqi; top: -7cqi; border-radius: 50%; border: 2.4cqi solid var(--bentuk-2); }
.hero__hiasan i:nth-child(3) { display: none; width: 6cqi; aspect-ratio: 1; left: 44cqi; top: 9%; border-radius: 50%; background: var(--bentuk-3); }
.hero__hiasan i:nth-child(4) { width: 9cqi; aspect-ratio: 1; right: 38cqi; bottom: 12%; border-radius: 22%; background: var(--bentuk-4); transform: rotate(18deg); opacity: .9; }

.hero__isi {
  position: relative; z-index: 1; height: 100%; width: 100%; max-width: var(--lebar-header-maks); margin-inline: auto;
  padding: calc(var(--sentuh-min) + var(--jarak-4) + 4px) var(--gutter) 0;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--jarak-3); align-items: start;
}
.hero__teks { max-width: 40rem; }
.hero__judul {
  margin: 0 0 var(--jarak-2); max-width: none; font-family: var(--huruf-judul); font-weight: 900; line-height: 1.04; letter-spacing: -.015em;
  font-size: clamp(1.9rem, 8.4cqi, 2.4rem); text-wrap: balance; color: var(--teks);
}
.hero__sub { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 var(--jarak-3); max-width: 32rem; font-size: var(--teks-m); font-weight: 400; line-height: 1.45; color: var(--teks); }
.hero__aksi { margin: 0; }
.hero__tombol { background: var(--tombol-latar); color: var(--tombol-teks); border-color: var(--tombol-latar); box-shadow: 0 6px 16px rgba(14, 47, 23, .28); min-height: var(--sentuh-min); font-weight: 700; }
.hero__tombol:hover { background: var(--tombol-latar); color: var(--tombol-teks); filter: brightness(1.08); }
.hero__tombol:focus-visible { outline-color: var(--fokus-cincin-terang); }

/* Foto berbentuk lengkung (mihrab) berbingkai putih, dengan bayangan warna di belakangnya */
.hero__foto { position: relative; margin: 0; width: min(100%, 24rem); height: 100%; justify-self: center; align-self: end; }
.hero__foto::before {
  content: ""; position: absolute; inset: 14px -14px 0 14px; border-radius: 999px 999px 0 0; background: var(--bentuk-2); opacity: .95;
}
.hero__foto img {
  position: relative; width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus-foto, 50% 50%);
  border: 6px solid var(--warna-latar-kartu); border-bottom: 0; border-radius: 999px 999px 0 0; background: var(--warna-latar-tenang);
  box-shadow: 0 12px 30px rgba(14, 47, 23, .35);
}
/* Gradasi di dasar foto: kontrol dan lencana di atasnya tetap terbaca */
.hero__foto::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 30%; pointer-events: none; z-index: 1;
  background: linear-gradient(to top, rgba(14, 47, 23, .75), rgba(14, 47, 23, 0));
}
.hero__foto .foto-contoh { z-index: 2; left: var(--jarak-3); bottom: var(--jarak-3); }

@container halaman (min-width: 55.5em) {
  .hero__hiasan i:nth-child(3) { display: block; }
  .hero__isi { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-rows: minmax(0, 1fr); gap: var(--jarak-6); align-items: center; padding: var(--jarak-5) var(--jarak-6) 0; }
  .hero__teks { align-self: center; padding-bottom: var(--jarak-8); }
  .hero__judul { font-size: clamp(2.8rem, 5.6cqi, 4.6rem); }
  .hero__sub { font-size: var(--teks-l); display: block; }
  .hero__foto { width: min(100%, 28rem); }
  .hero__foto .foto-contoh { left: var(--jarak-4); bottom: var(--jarak-4); }
}

/* Kontrol: titik (carousel) dan satu tombol ikon jeda/putar */
.hero__kontrol {
  position: absolute; z-index: 3; left: 50%; top: var(--jarak-2); transform: translateX(-50%);
  display: flex; align-items: center; padding: 0 var(--jarak-1);
  background: rgba(14, 47, 23, .9); border: 2px solid rgba(255, 255, 255, .35); border-radius: var(--radius-pil);
  --fokus-cincin: var(--fokus-cincin-pekat); --fokus-halo: var(--fokus-halo-pekat);
}
@container halaman (min-width: 55.5em) {
  .hero__kontrol { left: max(var(--gutter), calc(50% - var(--lebar-header-maks) / 2 + var(--jarak-6))); transform: none; top: auto; bottom: var(--jarak-5); }
}
.hero__titik, .hero__jeda {
  position: relative; display: grid; place-items: center; min-width: var(--sentuh-min); height: var(--sentuh-min); padding: 0;
  background: transparent; border: 0; border-radius: 50%; color: var(--warna-teks-di-pekat-putih); cursor: pointer;
}
.hero__titik::before { content: ""; width: 12px; height: 12px; border-radius: 6px; background: var(--warna-teks-di-pekat-putih); opacity: .6; transition: width var(--transisi), opacity var(--transisi), background-color var(--transisi); }
.hero__titik:hover::before { opacity: 1; }
.hero__titik[aria-current="true"] { min-width: 60px; }
.hero__titik[aria-current="true"]::before { width: 32px; opacity: 1; background: var(--warna-kuning); }
.hero__jeda { margin-left: var(--jarak-1); border-left: 2px solid rgba(255, 255, 255, .3); border-radius: 0 var(--radius-pil) var(--radius-pil) 0; }
.hero__jeda:hover { background: rgba(255, 255, 255, .14); }
.hero--satu .hero__titik, .hero--satu .hero__jeda { display: none; }
.hero--diam .hero__jeda { display: none; }

/* =========================================================
   2. Tentang YSMB: latar limau muda berpola, kartu pilar
   ========================================================= */
.tentang { position: relative; isolation: isolate; overflow: hidden; background: var(--warna-limau-pucat); }
.tentang::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pola-gelap) 0 0 / 72px; opacity: .07; }
.tentang::after { content: ""; position: absolute; z-index: -1; width: 22rem; aspect-ratio: 1; right: -9rem; top: -9rem; border-radius: 50%; background: var(--warna-limau-muda); }
.tentang__cerita { max-width: 50rem; margin: 0 auto var(--jarak-6); text-align: center; }
.tentang__cerita h3 { font-size: var(--teks-xl); font-weight: 900; color: var(--warna-teks-merek); margin-bottom: var(--jarak-3); }
.tentang__cerita p { max-width: none; font-size: var(--teks-l); line-height: 1.6; margin-inline: auto; }
.pilar-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jarak-4); grid-template-columns: minmax(0, 1fr); }
@container halaman (min-width: 42.5em) { .pilar-daftar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jarak-5); } }
.pilar { background: var(--warna-latar-kartu); border-radius: var(--radius-xl); padding: var(--jarak-5); text-align: center; box-shadow: var(--bayang-kotak); border-top: 6px solid var(--warna-merek); }
.pilar:nth-child(2) { border-top-color: var(--warna-biru); }
.pilar:nth-child(3) { border-top-color: var(--warna-kuning); }
.pilar__ikon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: 0 auto var(--jarak-3); border-radius: 50%; background: var(--warna-merek); color: var(--warna-teks-di-pekat-putih); }
.pilar:nth-child(2) .pilar__ikon { background: var(--warna-biru-gelap); }
.pilar:nth-child(3) .pilar__ikon { background: var(--warna-kuning); color: var(--warna-teks-di-limau); }
.pilar__ikon svg { width: 2.2rem; height: 2.2rem; }
.pilar h3 { margin-bottom: var(--jarak-2); font-size: var(--teks-l); }
.pilar p { margin: 0 auto; }

/* =========================================================
   3. Program pembelajaran: kartu tinggi, dua tombol
   ========================================================= */
.program-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jarak-5); grid-template-columns: minmax(0, 1fr); }
@container halaman (min-width: 35.5em) { .program-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container halaman (min-width: 60em) { .program-daftar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.program-kartu { --warna-kartu: var(--warna-merek); --teks-kartu: var(--warna-teks-merek);
  display: flex; flex-direction: column; height: 100%; background: var(--warna-latar-kartu); border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--bayang-kotak); border: 1px solid var(--warna-garis-halus); border-bottom: 6px solid var(--warna-kartu); }
.program-daftar > li:nth-child(4n+2) .program-kartu { --warna-kartu: var(--warna-biru); --teks-kartu: var(--warna-teks-biru); }
.program-daftar > li:nth-child(4n+3) .program-kartu { --warna-kartu: var(--warna-kuning); --teks-kartu: var(--warna-teks-kuning-gelap); }
.program-daftar > li:nth-child(4n+4) .program-kartu { --warna-kartu: var(--warna-limau); --teks-kartu: var(--warna-teks-merek-aktif); }
.program-kartu__foto { position: relative; aspect-ratio: 16 / 10; background: var(--warna-latar-tenang); }
.program-kartu__foto img { width: 100%; height: 100%; object-fit: cover; }
.program-kartu__isi { display: flex; flex-direction: column; flex: 1; padding: var(--jarak-4) var(--jarak-5) var(--jarak-5); }
.program-kartu :is(h2, h3) { font-size: var(--teks-l); font-weight: 900; color: var(--teks-kartu); margin-bottom: var(--jarak-2); }
.program-kartu__jadwal { margin: 0 0 var(--jarak-2); font-size: var(--teks-s); font-weight: 700; color: var(--warna-teks-lembut); }
.program-kartu__ringkas { margin: 0 0 var(--jarak-4); }
.program-kartu__aksi { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: var(--jarak-1); }
.program-kartu__aksi .tombol { width: 100%; }
.program-kartu__lanjut { display: inline-flex; align-items: center; min-height: var(--sentuh-min); font-weight: 700; }

/* =========================================================
   4. Berita
   ========================================================= */
.berita { background: var(--warna-latar-kartu); }
.berita-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jarak-5); grid-template-columns: minmax(0, 1fr); }
@container halaman (min-width: 35.5em) { .berita-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container halaman (min-width: 60em) { .berita-daftar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.berita-kartu { position: relative; height: 100%; display: flex; flex-direction: column; }
.berita-kartu__foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-besar); background: var(--warna-latar-tenang); }
.berita-kartu__foto img { width: 100%; height: 100%; object-fit: cover; }
.berita-kartu__tanggal { margin: var(--jarak-3) 0 var(--jarak-1); font-size: var(--teks-s); font-weight: 700; color: var(--warna-teks-lembut); }
.berita-kartu h3 { margin: 0 0 var(--jarak-2); font-size: var(--teks-l); line-height: 1.3; }
.berita-kartu h3 a { color: var(--warna-teks-merek); text-decoration: none; }
.berita-kartu h3 a::after { content: ""; position: absolute; inset: 0; }
.berita-kartu h3 a:hover { text-decoration: underline; }
.berita-kartu h3 a:focus-visible { outline: none; box-shadow: none; }
.berita-kartu:has(a:focus-visible) { outline: var(--fokus-lebar) solid var(--fokus-cincin); outline-offset: var(--fokus-jarak); border-radius: var(--radius-besar); }
.berita-kartu__ringkas { margin: 0; color: var(--warna-teks); }

/* =========================================================
   5. Capaian: hijau tua berpola, angka besar, ringkasan donasi
   ========================================================= */
.capaian { position: relative; isolation: isolate; overflow: hidden; background: var(--warna-latar-pekat-2); color: var(--warna-teks-di-pekat); }
.capaian::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pola-terang) 0 0 / 72px; opacity: .08; }
.capaian::after { content: ""; position: absolute; z-index: -1; width: 20rem; aspect-ratio: 1; left: -8rem; bottom: -8rem; border-radius: 50%; background: var(--warna-merek); }
.capaian-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jarak-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container halaman (min-width: 55.5em) { .capaian-daftar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jarak-5); } }
.capaian-angka { height: 100%; padding: var(--jarak-4); background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .22); border-radius: var(--radius-xl); text-align: center; }
.capaian-angka__nilai { display: block; font-family: var(--huruf-judul); font-weight: 900; line-height: 1.05; font-size: clamp(2.2rem, 11cqi, 3.4rem); color: var(--warna-kuning-teks); }
.capaian-angka__label { display: block; margin-top: var(--jarak-1); font-size: var(--teks-l); font-weight: 700; color: var(--warna-teks-di-pekat-putih); }
.capaian-angka__ket { margin: var(--jarak-1) auto 0; font-size: var(--teks-s); color: var(--warna-teks-di-pekat-lembut); }
.donasi-ringkas { margin-top: var(--jarak-6); display: grid; gap: var(--jarak-4); align-items: center; padding: var(--jarak-5); background: var(--warna-latar-kartu); color: var(--warna-teks); border-radius: var(--radius-xl); box-shadow: var(--bayang-kotak); border-left: 8px solid var(--warna-kuning); }
@container halaman (min-width: 42.5em) { .donasi-ringkas { grid-template-columns: minmax(0, 1fr) auto; } }
.donasi-ringkas h3 { margin-bottom: var(--jarak-2); color: var(--warna-teks-merek); font-size: var(--teks-xl); }
.donasi-ringkas p { margin: 0 0 var(--jarak-2); }
.donasi-ringkas dl { display: flex; flex-wrap: wrap; gap: var(--jarak-2) var(--jarak-6); margin: var(--jarak-2) 0 0; }
.donasi-ringkas dt { font-size: var(--teks-s); color: var(--warna-teks-lembut); font-weight: 700; }
.donasi-ringkas dd { margin: 0; font-size: var(--teks-xl); font-weight: 900; color: var(--warna-teks-merek); font-family: var(--huruf-judul); }

/* =========================================================
   6. Galeri: mosaik berpinggir membulat
   ========================================================= */
.galeri { background: var(--warna-latar); }
.galeri-mosaik { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jarak-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container halaman (min-width: 42.5em) { .galeri-mosaik { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.galeri-mosaik li { position: relative; aspect-ratio: 1; border-radius: var(--radius-besar); overflow: hidden; background: var(--warna-latar-tenang); box-shadow: var(--bayang-kartu); }
@container halaman (min-width: 42.5em) { .galeri-mosaik li:nth-child(1) { grid-column: span 2; grid-row: span 2; } }
.galeri-mosaik img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   7. Testimoni: ornamen latar
   ========================================================= */
.testimoni { position: relative; isolation: isolate; overflow: hidden; background: var(--warna-limau-pucat); }
.testimoni::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pola-gelap) 0 0 / 72px; opacity: .08; }
.testimoni__hiasan i { position: absolute; z-index: -1; border-radius: 50%; }
.testimoni__hiasan i:nth-child(1) { width: 18rem; aspect-ratio: 1; left: -7rem; top: 3rem; background: var(--warna-limau-muda); }
.testimoni__hiasan i:nth-child(2) { width: 12rem; aspect-ratio: 1; right: -4rem; bottom: 2rem; border: 1.5rem solid var(--warna-kuning-muda); }
.testimoni__hiasan i:nth-child(3) { width: 3rem; aspect-ratio: 1; right: 14%; top: 2rem; background: var(--warna-biru); opacity: .85; }
.testimoni__geser { position: relative; touch-action: pan-y; }
.testimoni-kartu { display: none; margin: 0 auto; max-width: 52rem; padding: var(--jarak-5); background: var(--warna-latar-kartu); border-radius: var(--radius-xl); box-shadow: var(--bayang-kotak); text-align: center; }
.testimoni-kartu.aktif { display: grid; gap: var(--jarak-4); justify-items: center; align-items: center; }
@container halaman (min-width: 42.5em) { .testimoni-kartu.aktif { grid-template-columns: auto minmax(0, 1fr); text-align: left; justify-items: start; padding: var(--jarak-6); } }
.testimoni-kartu__foto { width: 8rem; height: 8rem; border-radius: 50%; overflow: hidden; border: 5px solid var(--warna-limau); background: var(--warna-latar-tenang); display: grid; place-items: center; }
.testimoni-kartu__foto img { width: 100%; height: 100%; object-fit: cover; }
.testimoni-kartu blockquote { margin: 0; position: relative; }
.testimoni-kartu blockquote p { margin: 0 0 var(--jarak-3); max-width: none; font-size: var(--teks-l); font-style: italic; line-height: 1.55; }
.testimoni-kartu figcaption { font-weight: 700; color: var(--warna-teks-merek); }
.testimoni-kartu figcaption small { display: block; font-size: var(--teks-s); font-weight: 400; color: var(--warna-teks-lembut); }
.testimoni__titik { display: flex; justify-content: center; flex-wrap: wrap; margin-top: var(--jarak-4); }
.testimoni__titik button { position: relative; display: grid; place-items: center; width: var(--sentuh-min); height: var(--sentuh-min); padding: 0; background: transparent; border: 0; cursor: pointer; }
.testimoni__titik button::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--warna-latar-kartu); border: 3px solid var(--warna-merek); }
.testimoni__titik button[aria-current="true"]::before { background: var(--warna-merek); width: 18px; height: 18px; }

/* ---------- Kerangka kosong dan galat ---------- */
.kosong-ramah { max-width: 36rem; margin: 0 auto; padding: var(--jarak-5); text-align: center; background: var(--warna-latar-kartu); border-radius: var(--radius-xl); box-shadow: var(--bayang-kartu); color: var(--warna-teks); }
.kosong-ramah p { margin-inline: auto; }
.bagian .galat { max-width: 36rem; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } }

.program-kartu__foto .bingkai-foto, .galeri-mosaik .bingkai-foto { height: 100%; }