/*
  Halaman Beranda dan Bergabung (US-08).
  Butuh tokens-v2.css dan komponen-v2.css lebih dulu. Hanya token, tanpa hex baru.
  Slider, kartu, tombol, dan lencana "Foto contoh" memakai komponen yang sudah ada di komponen-v2.css (bagian 7, 8, 13).
  Berkas ini menambah: kepala bagian, pengantar + video, kartu agenda, program, galeri, ajakan, dan alur Bergabung.
  Tanpa animasi masuk. Satu-satunya gerak otomatis di Beranda adalah pergantian foto slider (fade 400 ms, dimatikan saat reduced motion).
*/

/* =========================================================
   1. Bagian dan kepala bagian
   ========================================================= */
.bagian__kepala {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--jarak-1) var(--jarak-5); margin-bottom: var(--jarak-5);
}
.bagian__kepala h2 { margin: 0; }
.bagian__semua {
  display: inline-flex; align-items: center; gap: var(--jarak-2); min-height: var(--sentuh-min);
  font-weight: var(--tebal-tegas);
}
.bagian__semua::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border-top: 3px solid currentColor; border-right: 3px solid currentColor; transform: rotate(45deg);
}

.tombol--besar { min-height: var(--sentuh-besar); padding-inline: var(--jarak-6); font-size: var(--teks-l); }

/* Pesan kosong yang ramah (bukan kotak putus-putus: itu bahasa visual penanda BELUM-ADA) */
.kosong {
  max-width: 44rem; padding: var(--jarak-5);
  background: var(--warna-latar-kartu); border: 1px solid var(--warna-garis); border-left: 8px solid var(--warna-merek);
  border-radius: var(--radius-sedang);
}
.kosong p { margin: 0 0 var(--jarak-3); }
.kosong p:last-child { margin-bottom: 0; }
.kosong__judul { font-family: var(--huruf-judul); font-size: var(--teks-l); font-weight: var(--tebal-judul); line-height: 1.3; }

/* Tempat yang sedang dimuat: tinggi dipesan supaya halaman tidak melompat. Tanpa JS tidak ada kotak kosong */
.js .isi-tempat[aria-busy="true"] { min-height: 11rem; background: var(--warna-latar-tenang); border-radius: var(--radius-besar); }
.bagian--tenang .isi-tempat[aria-busy="true"] { background: var(--warna-latar); }

/* =========================================================
   2. Slider: hanya yang belum ada di komponen-v2.css
   ========================================================= */
.slider { padding: 0; }
.slider__bingkai { width: 100%; touch-action: pan-y; }
/* Foto pertama tampil tanpa fade supaya gambar LCP tidak berkedip */
.slider__slide.aktif.awal { animation: none; }
/* Ponsel: foto lebih pendek (16:10) supaya judul pengantar (h1) hampir atau sudah terlihat di layar pertama 360x800 */
.slider__bingkai { aspect-ratio: 16 / 10; }
@container halaman (min-width: 35.5em) { .slider__bingkai { aspect-ratio: 21 / 9; max-height: 520px; } }

.slider__judul-bidang { padding: 0; min-height: 0; }
.slider__judul-isi {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--jarak-1) var(--jarak-5); padding-block: var(--jarak-4);
}
.slider__teks { flex: 1 1 18rem; min-width: 0; min-height: 1.75rem; }
.slider__judul { max-width: none; }
.slider__judul a { color: var(--warna-teks-di-pekat-putih); }
.slider__keterangan { max-width: var(--lebar-baris-maks); }
.slider__hitung { flex: none; margin: 0; font-size: var(--teks-s); font-weight: var(--tebal-tegas); color: var(--warna-teks-di-pekat-lembut); }
@container halaman (min-width: 35.5em) {
  .slider__judul { font-size: var(--teks-xl); }
  .slider__judul-isi { padding-block: var(--jarak-5); }
  .slider__teks { min-height: 2.25rem; }
}

.slider__kontrol { padding: 0; }
.slider__kontrol-isi { display: grid; gap: var(--jarak-1); padding-block: var(--jarak-3); grid-template-columns: minmax(0, 1fr); }
.slider__aksi { display: flex; align-items: stretch; gap: var(--jarak-2); }
.slider__aksi .slider__jeda { flex: 1; }
.slider__titik-daftar { justify-content: center; }
@container halaman (min-width: 35.5em) {
  .slider__kontrol-isi { display: flex; align-items: center; justify-content: space-between; gap: var(--jarak-5); }
  .slider__aksi { gap: var(--jarak-3); }
  .slider__aksi .slider__jeda { flex: none; min-width: 8rem; }
  .slider__panah { padding-inline: var(--jarak-4); }
  .slider__titik-daftar { justify-content: flex-end; }
}
/* Ikon Jeda (dua batang) dan Putar (segitiga) dari CSS, tidak bergantung pada warna saja: ada kata di sebelahnya */
.slider__jeda-ikon { flex: none; width: 14px; height: 16px; }
.slider__jeda[data-keadaan="jalan"] .slider__jeda-ikon {
  background:
    linear-gradient(currentColor 0 0) 0 0 / 4px 100% no-repeat,
    linear-gradient(currentColor 0 0) 100% 0 / 4px 100% no-repeat;
}
.slider__jeda[data-keadaan="henti"] .slider__jeda-ikon {
  width: 0; height: 0; border-block: 8px solid transparent; border-left: 14px solid currentColor;
}
/* Bila data slider kosong (08b 5.3): hijau pekat, slogan, tombol Gabung */
.slider-kosong { padding-block: var(--jarak-8); text-align: center; }
.slider-kosong__slogan { margin: 0 auto var(--jarak-5); max-width: 24ch; font-family: var(--huruf-judul); font-size: var(--teks-2xl); font-weight: var(--tebal-judul); line-height: 1.25; color: var(--warna-teks-di-pekat-putih); }

/* =========================================================
   3. Pengantar dan video
   ========================================================= */
/* Layar pertama (US-15). Ponsel dan tablet: foto, lalu pengantar. Desktop: foto di kiri (tinggi dibatasi 58vh),
   pengantar di kanan, jadi h1 dan tombol Gabung terlihat tanpa menggulir di 1280x800. Urutan DOM = urutan visual. */
.kenal { padding: var(--jarak-5) var(--gutter) var(--jarak-8); }
.kenal__teks { max-width: 40rem; margin-inline: auto; }
.kenal h1 {
  margin-bottom: var(--jarak-4); color: var(--warna-teks-merek);
  font-size: clamp(1.778rem, 1rem + 3vw, 3.056rem); line-height: 1.15;
}
.kenal .paragraf-pembuka { max-width: 34ch; margin-bottom: var(--jarak-5); }
.kenal__aksi { margin: 0; }
.kenal__aksi .tombol { width: 100%; }
@container halaman (min-width: 35.5em) { .kenal__aksi .tombol { width: auto; } }
@container halaman (min-width: 55.5em) {
  .hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .hero .slider__bingkai { aspect-ratio: 16 / 10; max-height: 58vh; }
  /* Tepi teks sejajar dengan isi header: lebar isi maksimum dibagi dua dari tengah layar */
  .hero .slider__judul-isi, .hero .slider__kontrol-isi {
    max-width: none; margin: 0;
    padding-inline: max(var(--gutter), calc((100cqw - var(--lebar-isi-maks)) / 2)) var(--jarak-5);
  }
  .hero .slider__judul-isi { padding-block: var(--jarak-4); }
  .kenal {
    display: flex; align-items: center;
    padding: var(--jarak-6) max(var(--gutter), calc((100cqw - var(--lebar-isi-maks)) / 2)) var(--jarak-6) var(--jarak-8);
  }
  .kenal__teks { margin-inline: 0; }
  .kenal h1 { font-size: var(--teks-3xl); }
}
/* Bagian video: terpisah dari layar pertama, tampil hanya bila ada video */
.bagian-video[hidden] { display: none; }
@container halaman (min-width: 55.5em) {
  .kenal__video { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--jarak-8); }
  .kenal__video .video__info { margin-top: 0; }
}

/* Video: sampul dulu, pemutar baru dimuat saat diklik (G7) */
.video__bingkai {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--warna-latar-pekat-2); border-radius: var(--radius-besar); box-shadow: var(--bayang-kartu);
}
.video__putar { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; display: block; }
.video__sampul { width: 100%; height: 100%; object-fit: cover; }
.video__ikon {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
  background: var(--warna-limau); border: 3px solid var(--warna-teks-di-limau);
  transition: background-color var(--transisi);
}
.video__ikon::after {
  content: ""; position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -9px;
  border-block: 13px solid transparent; border-left: 22px solid var(--warna-teks-di-limau);
}
.video__putar:hover .video__ikon { background: var(--warna-limau-hover); }
.video__label {
  position: absolute; left: var(--jarak-3); bottom: var(--jarak-3); display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 var(--jarak-3);
  background: var(--warna-latar-kartu); color: var(--warna-teks); border-radius: var(--radius-kecil);
  font-weight: var(--tebal-tegas); font-size: var(--teks-s);
}
/* Fokus pada tombol yang menutupi seluruh sampul: bingkai di dalam supaya tidak terpotong overflow */
.video__putar:focus-visible { outline-offset: -6px; box-shadow: inset 0 0 0 9px var(--fokus-halo); outline-color: var(--fokus-cincin); --fokus-cincin: var(--fokus-cincin-pekat); --fokus-halo: var(--fokus-halo-pekat); }
.video__pemutar { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__info { margin-top: var(--jarak-4); }
.video__judul { margin-bottom: var(--jarak-2); font-size: var(--teks-l); }
.video__ringkasan { margin-bottom: var(--jarak-2); }
.video__tautan { margin: 0; }
.video__tautan a { display: inline-flex; align-items: center; min-height: var(--sentuh-min); font-weight: var(--tebal-tegas); }

/* =========================================================
   4. Kartu kegiatan akan datang
   ========================================================= */
.kartu--agenda { height: auto; }
.kartu--agenda:hover { border-color: var(--warna-merek); }
.kartu__foto-bingkai--lebar { aspect-ratio: 16 / 9; }
.agenda { display: flex; flex-direction: column; align-items: flex-start; gap: var(--jarak-3); padding: var(--jarak-4); }
.agenda .kartu__isi { flex: 1; min-width: 0; width: 100%; padding: 0; }
.tanggal-blok {
  flex: none; display: flex; align-items: baseline; gap: var(--jarak-2);
  padding: var(--jarak-2) var(--jarak-4); text-align: center; line-height: 1.2;
  background: var(--warna-latar-pekat); color: var(--warna-teks-di-pekat-putih); border-radius: var(--radius-sedang);
}
.tanggal-blok__hari { font-family: var(--huruf-judul); font-size: var(--teks-xl); font-weight: var(--tebal-judul); line-height: 1.1; }
.tanggal-blok__bulan, .tanggal-blok__tahun { font-size: var(--teks-m); font-weight: var(--tebal-tegas); }
.agenda__rincian { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--jarak-1) var(--jarak-3); margin: var(--jarak-1) 0 0; }
.agenda__rincian dt { font-weight: var(--tebal-tegas); color: var(--warna-teks-lembut); }
.agenda__rincian dd { margin: 0; min-width: 0; }
.agenda .belum-ada { margin: 0; }

/* Berita dan agenda: judul kartu dan tautan membentang menutup kartu (komponen-v2.css bagian 8) */
.kartu--agenda .kartu__judul { margin-bottom: var(--jarak-1); }

/* =========================================================
   5. Tentang YSMB dan angka
   ========================================================= */
.tentang__kisi { display: grid; gap: var(--jarak-6); grid-template-columns: minmax(0, 1fr); }
.tentang__teks h2 { max-width: 20ch; }
.tentang__teks p { margin-bottom: 0; }
.angka { list-style: none; margin: 0; padding: 0; }
.angka li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--jarak-3);
  padding-block: var(--jarak-4); border-top: 2px solid var(--warna-garis-halus);
}
.angka li:last-child { border-bottom: 2px solid var(--warna-garis-halus); }
.angka__nilai { font-family: var(--huruf-judul); font-size: var(--teks-xl); font-weight: var(--tebal-judul); line-height: 1.2; color: var(--warna-teks-merek); }
.angka__ket { font-size: var(--teks-m); }
@container halaman (min-width: 55.5em) {
  .tentang__kisi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--jarak-10); }
}

/* =========================================================
   6. Program pembelajaran
   ========================================================= */
.program-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jarak-5) var(--jarak-8); grid-template-columns: minmax(0, 1fr); }
@container halaman (min-width: 42.5em) { .program-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.program { display: flex; align-items: flex-start; gap: var(--jarak-4); }
.program__foto {
  flex: none; width: 6.5rem; height: 5.5rem; object-fit: cover;
  background: var(--warna-latar-tenang); border-radius: var(--radius-sedang);
}
@container halaman (min-width: 35.5em) { .program__foto { width: 8rem; height: 6rem; } }
.program__isi { flex: 1; min-width: 0; }
.program__judul { margin-bottom: var(--jarak-1); font-size: var(--teks-l); }
.program__isi p { margin-bottom: var(--jarak-2); }
.program__lebih summary {
  display: inline-flex; align-items: center; gap: var(--jarak-2); min-height: var(--sentuh-min); cursor: pointer;
  color: var(--warna-teks-merek); font-weight: var(--tebal-tegas); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
  list-style: none;
}
.program__lebih summary::-webkit-details-marker { display: none; }
.program__lebih summary::after {
  content: ""; width: 9px; height: 9px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: rotate(45deg) translateY(-3px); transition: transform var(--transisi);
}
.program__lebih[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.program__lebih p { margin: 0 0 var(--jarak-2); }

/* =========================================================
   7. Cuplikan galeri: kisi statis, ketuk membuka halaman Galeri
   ========================================================= */
.galeri-kisi { 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: 55.5em) { .galeri-kisi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jarak-4); } }
.galeri-kisi__tautan { display: block; border-radius: var(--radius-sedang); overflow: hidden; border: 1px solid var(--warna-garis); box-shadow: var(--bayang-kartu); }
.galeri-kisi__tautan:hover { border-color: var(--warna-merek); }
.galeri-kisi .bingkai-foto { aspect-ratio: 4 / 3; background: var(--warna-latar-tenang); }
.galeri-kisi__foto { width: 100%; height: 100%; object-fit: cover; }
.galeri-kisi .foto-contoh { left: var(--jarak-1); bottom: var(--jarak-1); padding-inline: var(--jarak-2); }

/* =========================================================
   8. Ajakan bergabung: satu-satunya blok hijau pekat di Beranda
   ========================================================= */
.ajakan { padding-block: var(--jarak-8); }
.ajakan__atas { display: grid; gap: var(--jarak-5); grid-template-columns: minmax(0, 1fr); }
.ajakan__teks h2 { margin-bottom: var(--jarak-3); max-width: 22ch; }
.ajakan__teks p { margin: 0; max-width: 46ch; font-size: var(--teks-l); color: var(--warna-teks-di-pekat); }
.ajakan__aksi { margin: 0; }
.ajakan__aksi .tombol { width: 100%; }
.alasan { list-style: none; margin: var(--jarak-6) 0 0; padding: var(--jarak-5) 0 0; border-top: 1px solid var(--warna-garis-pekat); display: grid; gap: var(--jarak-4); grid-template-columns: minmax(0, 1fr); }
.alasan__judul { margin-bottom: var(--jarak-1); font-size: var(--teks-m); line-height: 1.3; }
.alasan p { margin: 0; color: var(--warna-teks-di-pekat); }
@container halaman (min-width: 35.5em) { .ajakan__aksi .tombol { width: auto; } }
@container halaman (min-width: 55.5em) {
  .ajakan { padding-block: var(--jarak-10); }
  .ajakan__atas { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--jarak-8); }
  .alasan { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jarak-6); }
}

/* =========================================================
   9. Bergabung: alur empat langkah dan tombol WhatsApp
   ========================================================= */
.gabung__kisi { display: grid; gap: var(--jarak-6); align-items: start; grid-template-columns: minmax(0, 1fr); }
.gabung__langkah h2 { margin-bottom: var(--jarak-5); }
.langkah { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jarak-4); grid-template-columns: minmax(0, 1fr); }
.langkah__butir {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--jarak-4); align-items: start;
  padding: var(--jarak-4) var(--jarak-4) var(--jarak-5);
  background: var(--warna-latar-kartu); border: 1px solid var(--warna-garis); border-radius: var(--radius-besar); box-shadow: var(--bayang-kartu);
}
.langkah__nomor {
  display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--warna-merek); color: var(--warna-teks-di-pekat-putih);
  font-family: var(--huruf-judul); font-size: var(--teks-l); font-weight: var(--tebal-judul);
}
.langkah__judul { margin: 0 0 var(--jarak-1); font-size: var(--teks-l); line-height: 1.3; }
.langkah__isi { margin: 0; }

.gabung__panel { padding: var(--jarak-5); border-radius: var(--radius-besar); }
.gabung__panel h2 { margin-bottom: var(--jarak-3); font-size: var(--teks-xl); }
.gabung__panel p { max-width: none; }
.gabung__panel .tombol { width: 100%; }
.gabung__admin { margin: var(--jarak-3) 0 0; font-size: var(--teks-m); color: var(--warna-teks-di-pekat); }
.gabung__admin strong { color: var(--warna-teks-di-pekat-putih); }
.gabung__catatan { margin: var(--jarak-4) 0 0; padding-top: var(--jarak-4); border-top: 1px solid var(--warna-garis-pekat); color: var(--warna-teks-di-pekat); }
.gabung__catatan[hidden] { display: none; }
@container halaman (min-width: 55.5em) {
  .gabung__kisi { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--jarak-8); }
  .gabung__panel { position: sticky; top: calc(var(--tinggi-header-desktop) + var(--jarak-4)); }
}

/* Di blok hijau pekat, tautan putih umum (.blok-pekat a) tidak boleh mengalahkan teks HITAM wajib pada tombol limau */
.blok-pekat .tombol--aksen, .blok-pekat .tombol--aksen:hover { color: var(--warna-teks-di-limau); }

/* Tablet: kata "Sebelumnya/Berikutnya" baru tampil di desktop, supaya kontrol dan titik muat sebaris */
@container halaman (min-width: 35.5em) and (max-width: 55.49em) { .slider__panah-teks { display: none; } }
@container halaman (min-width: 35.5em) { .slider__kontrol-isi { flex-wrap: wrap; } }
.gabung__panel .tombol { padding-inline: var(--jarak-3); font-size: var(--teks-m); }
.gabung__admin strong { white-space: nowrap; }

/* T-02: huruf sangat besar (lebar kurang dari 16 em): kartu program satu kolom, kontrol slider boleh turun baris, galeri satu kolom */
@container halaman (max-width: 16em) {
  .kenal h1 { font-size: 1.6rem; }
  .program { flex-direction: column; }
  .program__foto { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .program__lebih summary { white-space: normal; }
  .slider__aksi, .slider__titik-daftar { flex-wrap: wrap; }
  .slider__panah, .slider__jeda { padding-inline: var(--jarak-2); }
  .galeri-kisi { grid-template-columns: minmax(0, 1fr); }
}

/* T-01: kontrol slider dibangun skrip. Sebelum itu ruangnya dipesan (tinggi mendekati hasil akhir di tiap lebar), supaya bagian
   pengantar (h1 dan tombol Gabung) tidak turun sekitar 150 px saat kontrol muncul. */
.js .slider:not(:has(.slider__kontrol))::after { content: ""; display: block; height: 9rem; background: var(--warna-latar-pekat); }
@container halaman (min-width: 35.5em) { .js .slider:not(:has(.slider__kontrol))::after { height: 5.4rem; } }
@container halaman (min-width: 55.5em) { .js .slider:not(:has(.slider__kontrol))::after { height: 10.4rem; } }
.js [data-tempat="daftar-langkah"] { min-height: calc(100svh - 6rem); }
@container halaman (min-width: 55.5em) { .js [data-tempat="daftar-langkah"] { min-height: 0; } }