/* Perbaikan tampilan untuk foto unggahan admin (ukurannya bebas, tidak seperti foto contoh template). */
img { max-width: 100%; height: auto; }
/* Gambar intro beranda: selalu pas kolom, sudut membulat, dipotong 16:9 dari atas
   (bingkai hitam di bawah foto kiriman WhatsApp ikut terpotong). */
.home-intro-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center top; border-radius: 14px; }
/* Gambar di dalam isi berita, unit, dan fasilitas. */
#page-content img, .units-content img, .icon-box img { max-width: 100%; height: auto; border-radius: 8px; }

/* Program Kami: kotak sebaris sama tinggi lewat flex (skrip "equalize" template dicabut karena
   menambah padding tiap kali jalan → kotak hijau 577 px kosong). Foto seragam 3:2. */
.program-baris > [class*="col-"] { display: flex; }
.program-baris .program-card { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; }
.program-baris .program-card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.program-baris .text-box { flex: 1; }
/* Program tanpa tautan bukan tombol: tidak ada efek sorot. */
.program-baris div.program-card .text-box { cursor: default; }
.program-baris div.program-card .text-box:hover { background: transparent; }
.program-baris div.program-card .text-box:hover i, .program-baris div.program-card .text-box:hover h3,
.program-baris div.program-card .text-box:hover p { color: #fff; }

/* Jadwal: kartu sebaris sama tinggi; keterangan miring memakai huruf situs. */
.jadwal-kartu { height: 100%; }
.jadwal-ket { font-style: italic; color: #6c757d; }

/* "Az-Zikra" tidak terpotong di tanda hubung pada judul besar. */
.tanpa-putus { white-space: nowrap; }

/* Header beranda kini putih biasa seperti halaman lain (bukan transparan di atas hero), jadi tidak ada
   lagi aturan logo putih/gradasi; hero mulai tepat di bawah header. */

/* HP: jarak bawah slider lebih rapat. */
@media (max-width: 767.98px) { .beranda-intro { padding-top: 56px !important; } }

/* Slider beranda: tinggi ditetapkan di CSS (nilainya sama dengan data-height-xs=360 dan data-height=600
   pada markup) supaya sebelum JS jalan tingginya sudah benar — tidak melompat dari 100vh ke 360 px
   (CLS) — dan tetap benar sesudah HP diputar. !important karena skrip template menulis tinggi sebagai
   style inline sekali saja saat muat. Desktop 600 px (dulu 760 px satu layar penuh di bawah header
   transparan; kini header putih di atasnya, hero sepadan hero UPZ yang 60vh). */
@media (max-width: 767.98px) {
  #slider.inspiro-slider, #slider.inspiro-slider .slide, #slider.inspiro-slider .flickity-viewport { height: 360px !important; }
}
@media (min-width: 768px) {
  #slider.inspiro-slider, #slider.inspiro-slider .slide, #slider.inspiro-slider .flickity-viewport { height: 600px !important; }
}

/* Video Terbaru (beranda): sampul 16:9 + tombol putar; pemutar YouTube dimuat saat diklik. */
.bagian-video .video-kartu { height: 100%; }
.bagian-video .video-putar { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; aspect-ratio: 16 / 9; }
.bagian-video .video-putar img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, opacity .3s ease; opacity: .9; }
.bagian-video .video-putar:hover img, .bagian-video .video-putar:focus-visible img { transform: scale(1.04); opacity: 1; }
.bagian-video .video-ikon { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0, 113, 93, .92); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.bagian-video .video-ikon::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -6px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.bagian-video .video-bingkai { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; }
.bagian-video h3 { margin: 14px 0 4px; font-size: 1rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bagian-video .video-tgl { margin: 0; font-size: .85rem; color: #6d7d78; }
/* Ikon Radio di kaki situs & halaman Kontak: hijau Az-Zikra (template hanya punya warna merek sosmed). */
.social-icons.social-icons-colored .social-radio a, .social-icons.social-icons-colored-hover .social-radio a:hover { background-color: #00715d; }

/* Kartu Instagram di bagian video: IG tidak memberi sampul tanpa izin resmi, jadi kotak bergradasi;
   diketuk -> sematan Instagram (lebih tinggi dari 16:9 karena memuat foto + keterangan). */
.bagian-video .video-ig { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; background: linear-gradient(135deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%); }
.bagian-video .video-ig-logo { font-size: 3rem; line-height: 1; }
.bagian-video .video-ig-teks { font-size: .9rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.bagian-video .video-bingkai-ig { aspect-ratio: auto; height: 560px; background: #fff; border: 1px solid #e6ebe9; }
/* Logo membawa width/height asli (269x82) untuk mencegah lompatan, tetapi ditampilkan 60 px tinggi di
   dalam header 80 px (jarak 10 px atas-bawah). Semula 82 px: memenuhi header sampai tepi dan terasa
   terlalu besar sejak header beranda jadi putih (keluhan user 17 Okt 2026). Lebar mengikuti rasio. */
/* display:block — sebagai inline, img ikut baseline teks #logo (font 40 px, line-height 80 px) dan
   turun ±8 px dari yang diminta; sebagai block, margin-top menentukan posisinya persis. */
#logo img { display: block; width: auto; height: 60px; margin-top: 10px; transition: height .3s ease, margin-top .3s ease; }
@media (max-width: 991.98px) { #header #logo > a img { max-height: 60px; height: 60px; margin-top: 10px; padding-bottom: 0; } }

/* Header lengket: skrip template memasang .header-sticky.sticky-active (header-inner jadi fixed) begitu
   digulir >200 px di layar ≥992 px. Saat itu header diperkecil jadi 60 px dengan logo 44 px, supaya bar
   putih yang terus menempel tidak memakan layar ketika membaca. Tinggi #header sendiri tetap 80 px agar
   isi halaman tidak melompat. */
#header.sticky-active .header-inner { height: 60px; line-height: 60px; }
#header.sticky-active .header-inner #logo, #header.sticky-active .header-inner #mainMenu-trigger { height: 60px; }
#header.sticky-active #logo img { height: 44px; margin-top: 8px; }

/* Hero statis beranda (tanpa skrip slider): template menyembunyikan teks slide (opacity 0) sampai
   skrip slider menganimasikannya. Di hero statis teks dan tombol langsung tampil. */
#slider.hero-statis .slide-captions > * { opacity: 1; }
#slider.hero-statis .slide { position: relative; }
#slider.hero-statis .slide .container { position: relative; z-index: 2; margin: auto; }

/* ---- Warisan Pendiri: KH. Muhammad Arifin Ilham (beranda & Tentang Kami, 27 Okt 2026) ---- */
.pendiri-bagian { padding: 80px 0; background: #f7f5ef; }
.pendiri-bagian--tentang { background: #fff; padding-bottom: 10px; }
.pendiri-foto { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); }
.pendiri-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 600; color: #00715d; margin-bottom: 8px; }
.pendiri-nama { margin-bottom: 16px; }
.pendiri-doa { font-size: .55em; font-weight: 400; font-style: italic; color: #6b6b6b; white-space: nowrap; }
.pendiri-tautan { font-weight: 600; color: #00715d; }
.pendiri-potret { display: block; width: 110px; height: 110px; margin: 0 auto 16px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
@media (max-width: 991.98px) { .pendiri-bagian { padding: 50px 0; } }
@media (max-width: 575.98px) { .pendiri-bagian .lead { font-size: 17px; line-height: 1.6; } .zikir-berikut { padding: 16px; } .zikir-berikut__tanggal { font-size: 20px; } }

/* Kotak "Zikir Akbar berikutnya" (tanggal dihitung dari jadwal "Ahad Pekan Ke-1"). */
.zikir-berikut { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; padding: 20px 22px; background: #fff; border-left: 4px solid #00715d; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, .06); }
.zikir-berikut__label { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #00715d; font-weight: 600; }
.zikir-berikut__tanggal { font-size: 22px; line-height: 1.3; color: #1f1f1f; }
.zikir-berikut__tempat { color: #555; }
.zikir-berikut__aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.zikir-berikut__aksi .btn { margin: 0; }
.zikir-berikut__catatan { color: #777; margin-top: 8px; }
.jadwal-berikut { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 20px; background: #e6f2ef; color: #00715d; font-size: 13px; font-weight: 600; }

/* Tombol WhatsApp melayang (Setelan > Kontak > whatsapp). Di HP hanya ikon bulat. */
.wa-melayang { position: fixed; right: 18px; bottom: 18px; z-index: 1000; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 14px; border-radius: 26px; background: #25d366; color: #fff !important; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.wa-melayang i { font-size: 26px; line-height: 1; }
.wa-melayang:hover, .wa-melayang:focus { background: #1ebe5a; color: #fff !important; }
@media (max-width: 575.98px) {
  .wa-melayang { width: 54px; height: 54px; padding: 0; justify-content: center; border-radius: 50%; }
  .wa-melayang__teks { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Tombol "ke atas" template dipindah ke atas tombol WA supaya tidak bertumpuk. */
body:has(.wa-melayang) #scrollTop { bottom: 84px !important; }