/* assets/css/custom.css */

/* iPhone Notch Navbar Style */
.iphone-notch {
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}

.iphone-notch::before,
.iphone-notch::after {
  content: '';
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  background: transparent;
  pointer-events: none;
}

.iphone-notch::before {
  left: -20px;
  border-top-right-radius: 20px;
  box-shadow: 10px -10px 0 0 rgba(0, 0, 0, 0.4);
}

.iphone-notch::after {
  right: -20px;
  border-top-left-radius: 20px;
  box-shadow: -10px -10px 0 0 rgba(0, 0, 0, 0.4);
}

/* Animations */
@keyframes splitTextUp {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Toggle Bahasa ID <-> AR (gaya navbar) ===== */
/* Surface & radius disamakan dengan container menu navbar (#2d574f,
   rounded-lg); thumb = surface putih tipis seperti hover item menu,
   bahasa aktif ditandai bendera di dalam thumb. */
.af-lang-toggle {
  font-family: "Poppins", "Noto Naskh Arabic", sans-serif;
  cursor: pointer;
  border: none;
  background: transparent;
  white-space: nowrap;
  padding: 0;
  flex: none; /* jangan dipampatkan flex parent di layar sempit */
}
.af-switch-track {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: #2d574f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  padding: 3px;
  flex: none; /* ukuran tetap — label nowrap tidak boleh terpotong */
}
.af-switch-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.32rem 0.8rem;
  white-space: nowrap;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  transition: opacity 0.2s ease;
}
/* Huruf Arab intrinsik lebih kecil/ramping: besarkan agar setara "ID" */
.af-switch-label[data-af-label-ar] {
  font-family: "Noto Naskh Arabic", serif;
  font-size: 1.05rem;
  line-height: 1.25;
}
/* Label bahasa aktif memudar (tempatnya digantikan thumb bendera) */
.af-lang-toggle:not(.is-ar) .af-switch-label[data-af-label-id],
.af-lang-toggle.is-ar .af-switch-label[data-af-label-ar] {
  opacity: 0;
}
/* Thumb: surface putih tipis seperti hover item menu */
.af-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}
.af-lang-toggle.is-ar .af-switch-thumb { transform: translateX(100%); }
/* Bendera di dalam thumb: cross-fade mengikuti bahasa aktif */
.af-switch-thumb .af-switch-flag {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 50%;
  width: auto;
  border-radius: 2.5px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.af-lang-toggle:not(.is-ar) .af-switch-thumb .af-flag-id { opacity: 1; }
.af-lang-toggle.is-ar .af-switch-thumb .af-flag-ar { opacity: 1; }
/* Interaksi mengikuti pola tombol menu: hover lebih terang, tekan makin terang */
.af-lang-toggle:hover .af-switch-thumb { background: rgba(255, 255, 255, 0.14); }
.af-lang-toggle:active .af-switch-thumb { background: rgba(255, 255, 255, 0.2); }
.af-lang-toggle:focus-visible {
  outline: 2px solid rgba(180, 201, 53, 0.55);
  outline-offset: 3px;
  border-radius: 0.5rem;
}
/* Varian besar (menu mobile) */
.af-switch-lg .af-switch-label { padding: 0.45rem 1.2rem; font-size: 1rem; }
.af-switch-lg .af-switch-label[data-af-label-ar] { font-size: 1.2rem; }
.af-switch-lg .af-switch-thumb .af-switch-flag { height: 58%; }

/* ===== Mode Bahasa Arab (RTL) ===== */
/* Poppins tetap pertama: teks Latin tidak berubah, huruf Arab otomatis
   jatuh ke font Arab (browser pakai font pertama yang punya glifnya). */
html[dir="rtl"] body,
body.lang-ar {
  font-family: "Poppins", "Noto Naskh Arabic", "Amiri", system-ui, sans-serif;
}
body.lang-ar h1,
body.lang-ar h2,
body.lang-ar h3,
body.lang-ar h4,
body.lang-ar .font-bold,
body.lang-ar .font-extrabold {
  font-family: "Poppins", "Amiri", "Noto Naskh Arabic", serif;
}
/* Teks brand di samping logo (navbar & footer) saat mode Arab: font naskh yang
   lebih rapi, ukuran sedikit lebih besar agar seimbang dengan tinggi logo,
   line-height lega agar caret/diacritic tidak terpotong, dan tanpa
   letter-spacing (spasi tetap memisahkan hubungan antar huruf Arab). */
body.lang-ar .af-logo-top {
  font-family: "Noto Naskh Arabic", "Amiri", serif;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-align: right;
}
body.lang-ar .af-logo-name {
  font-family: "Noto Naskh Arabic", "Amiri", serif;
  font-size: 1.2rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-align: right;
}
@media (min-width: 768px) {
  body.lang-ar .af-logo-top { font-size: 0.95rem !important; }
  body.lang-ar .af-logo-name { font-size: 1.35rem !important; }
}
/* Daftar berbutir di jawaban FAQ (fasilitas): pada RTL geser indentasinya
   ke sisi kanan agar penanda list (bullet) tidak menempel di tepi */
body.lang-ar #faqModal .pl-5 {
  padding-left: 0 !important;
  padding-right: 1.25rem !important;
}
/* Navbar & hero dikunci LTR seperti biasa walau mode Arab aktif */
html[dir="rtl"] [data-i18n-ltr] {
  direction: ltr !important;
}
html[dir="rtl"] [data-i18n-ltr] .text-left { text-align: left !important; }
html[dir="rtl"] [data-i18n-ltr] .text-right { text-align: right !important; }
html[dir="rtl"] [data-i18n-ltr] .border-l-2 { border-left-width: 2px !important; border-right-width: 0 !important; }
html[dir="rtl"] [data-i18n-ltr] .pl-4 { padding-left: 1rem !important; padding-right: 0 !important; }
html[dir="rtl"] [data-i18n-ltr] .ml-auto { margin-left: auto !important; margin-right: 0 !important; }
html[dir="rtl"] [data-i18n-ltr] .-mr-2 { margin-right: -0.5rem !important; margin-left: 0 !important; }
/* Slider Kabar & Pengumuman dikunci LTR saat mode Arab agar arah slide dan animasi JS identik dengan mode Indonesia */
html[dir="rtl"] #kabar-track,
html[dir="rtl"] [data-kabar-slider] {
  direction: ltr !important;
}
/* Navbar & logo tetap seperti mode Indonesia (LTR terkunci), hanya teks brand
   di samping logo yang diubah saat mode Arab: kedua barisnya rata kanan agar
   awal baca "معهد" sejajar lurus dengan awal "الفرقان الإسلامي".
   Perataannya dipasang di rule .af-logo-top / .af-logo-name di atas. */
/* Saat mode Arab, urutan item menu desktop pun dibaca dari kanan:
   Beranda paling kanan, lalu Berita, dst. — hanya urutan deret item yang
   dibalik (row-reverse), posisi pill maupun isi dropdown tetap persis
   seperti mode Indonesia. Menu mobile tidak disentuh (Sudah rtl dari CSS
   #mobileMenu). */
body.lang-ar #main-nav ul.flex:not(.flex-col) {
  flex-direction: row-reverse;
}
/* Panel menu hamburger mengikuti arah baca Arab saat mode aktif (teks rata kanan,
   dropdown caret pindah kiri). Pengecualian: toggle bahasa tetap LTR karena
   geometri thumb-nya bergantung posisi fisik kiri-kanan. */
body.lang-ar #mobileMenu {
  direction: rtl !important;
}
body.lang-ar #mobileMenu .text-left {
  text-align: right !important;
}
body.lang-ar #mobileMenu .af-lang-toggle,
body.lang-ar #mobileMenu .af-lang-toggle * {
  direction: ltr !important;
}
/* Indentasi sub-dropdown di menu mobile mengikuti sisi kanan saat mode Arab */
body.lang-ar #mobileMenu [id^="mob-drop-"] {
  padding-left: 0.5rem !important;
  padding-right: 1rem !important;
}
/* Longgar spasi baris agar harakat Arab tidak terpotong.
   Area LTR (navbar & hero) dikecualikan agar tampilannya identik dengan mode Indonesia. */
body.lang-ar p:not([data-i18n-ltr] *),
body.lang-ar li:not([data-i18n-ltr] *),
body.lang-ar a:not([data-i18n-ltr] *),
body.lang-ar span:not([data-i18n-ltr] *),
body.lang-ar h1:not([data-i18n-ltr] *),
body.lang-ar h2:not([data-i18n-ltr] *),
body.lang-ar h3:not([data-i18n-ltr] *) {
  line-height: 1.9;
}
/* Perataan logis: kiri<->kanan mengikuti arah */
html[dir="rtl"] .text-left { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }
html[dir="rtl"] .border-l-2 { border-left-width: 0 !important; border-right-width: 2px !important; }
html[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1rem !important; }
html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .-mr-2 { margin-right: 0 !important; margin-left: -0.5rem !important; }
html[dir="rtl"] .-mr-3 { margin-right: 0 !important; margin-left: -0.75rem !important; }
/* Dropdown header tetap di tengah layar saat RTL */
html[dir="rtl"] header .group > div[class*="left-1/2"] {
  left: 50% !important;
  right: auto !important;
}
/* Floating Action Menu (WhatsApp/FAQ): cermin ke kiri bawah saat mode Arab.
   Urutan ikon-teks mengikuti dir=rtl otomatis; label Latin diamankan <bdi>.
   align-items pakai flex-end: dalam kolom RTL, cross-start terbalik ke kanan,
   jadi flex-end + lebar wadah yang mengembang ke kanan memastikan tombol bulat
   dan card putih selalu menempel di TEPI KIRI (tombol tidak melompat). */
html[dir="rtl"] #floatingActionMenu {
  right: auto !important;
  left: 2.5rem !important;
  align-items: flex-end !important;
}
html[dir="rtl"] #floatingPopupMenu {
  transform-origin: bottom left !important;
  /* Ikon + label di dalam kartu tetap berpola LTR: ikon di kiri,
     label di sebelah kanannya — seperti mode Indonesia. Aman karena isi
     popup hanya ikon dan teks Latin yang sudah dibungkus <bdi>. */
  direction: ltr !important;
}
/* ===== Blok dwibahasa Profil Ma'had (af-lang-id / af-lang-ar) ===== */
.af-lang-ar[hidden],
.af-lang-id[hidden] {
  display: none !important;
}
.af-lang-ar {
  font-family: "Noto Naskh Arabic", "Amiri", "Poppins", serif;
}
.af-lang-ar p,
.af-lang-ar li {
  line-height: 2;
  text-align: justify;
  overflow-wrap: anywhere;
}
.af-lang-ar h3 {
  line-height: 1.8;
}
.af-lang-ar ul {
  padding-right: 1.25rem;
  padding-left: 0;
  list-style-position: outside;
}
.af-lang-ar ol {
  padding-right: 1.25rem;
  padding-left: 0;
  list-style-position: outside;
  list-style-type: arabic-indic;
}
.af-lang-ar bdi {
  unicode-bidi: isolate;
  direction: auto;
}

/* ===== Hero berbahasa Arab (mode Arab aktif) ===== */
/* Font mushaf KFGQPC Uthman Taha Naskh (self-host TTF, hanya glif Arab;
   teks Latin tetap jatuh ke font berikutnya dalam stack). */
@font-face {
  font-family: "Uthman Taha Naskh";
  src: url("../fonts/UthmanTN_v2-0.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Judul besar hero -> Uthman Taha Naskh */
body.lang-ar [data-af-hero-title] {
  font-family: "Uthman Taha Naskh", "Noto Naskh Arabic", "Amiri", serif !important;
  /* letter-spacing wajib 0: jarak antar huruf merusak sambungan kaligrafi Arab */
  letter-spacing: 0 !important;
  /* beri ruang harakat agar tidak terpotong wrapper overflow-hidden tiap baris */
  line-height: 1.45 !important;
}
/* Ukuran judul versi Arab (font Arab tampak ramping; sesuaikan bila perlu) */
body.lang-ar [data-af-hero-title] { font-size: 3rem; }
@media (min-width: 768px) {
  body.lang-ar [data-af-hero-title] { font-size: 3.7rem; }
}
@media (min-width: 1024px) {
  body.lang-ar [data-af-hero-title] { font-size: 4.25rem; }
}

/* Subjudul hero -> naskh biasa (Noto Naskh Arabic) */
body.lang-ar [data-af-hero-sub] {
  font-family: "Noto Naskh Arabic", "Amiri", serif;
}
body.lang-ar [data-af-hero-sub] { font-size: 1.06rem; }
@media (min-width: 768px) {
  body.lang-ar [data-af-hero-sub] { font-size: 1.22rem; }
}

/* Arah teks hero mengikuti Arab: rata kanan (RTL) saat mode Arab.
   Selector ini menang atas html[dir=rtl] [data-i18n-ltr] .text-left di atas. */
html[dir="rtl"] [data-i18n-ltr] [data-af-hero-copy] {
  direction: rtl;
  text-align: right !important;
  /* Container hero tetap LTK, tarik blok teks hingga benar-benar ke tepi kanan */
  margin-left: auto;
  margin-right: 0;
}
html[dir="rtl"] [data-i18n-ltr] [data-af-hero-sub] {
  text-align: justify !important;
}
/* Cermin gradient: sisi gelap pindah ke kanan, tetap di belakang teks Arab */
html[dir="rtl"] [data-i18n-ltr] .bg-gradient-to-r {
  background-image: linear-gradient(to left, var(--tw-gradient-stops)) !important;
}
/* Overlay SVG baris aksen: kunci basis LTR agar anchor teks identik dengan
   placeholder <span> yang menyimpan lebar, terlepas dari konteks RTL. */
html[dir="rtl"] [data-af-hero-title] svg text {
  direction: ltr;
}

/* Panel "Selamat Datang di Program Pendidikan" (jenjang): teks Arab rata kanan
   mengikuti panel (panel sendiri sudah pindah kanan otomatis via RTL global).
   Hanya md+ — teks tetap rata tengah di mobile. */
@media (min-width: 768px) {
  html[dir="rtl"] [data-af-jenjang-head] {
    text-align: right !important;
  }
}

/* ===== Mobile: tunda render & layout section di bawah lipat =====
   content-visibility: auto membuat browser melewatkan styling/layout/paint
   untuk section yang belum masuk viewport — hemat main-thread HP entry-level.
   contain-intrinsic-size memberi perkiraan tinggi agar scrollbar tetap wajar;
   begitu section masuk viewport, tinggi asli dipakai (nilai `auto`) sehingga
   tidak menimbulkan CLS. Hanya mobile; desktop bisa ikut nanti bila perlu. */
@supports (content-visibility: auto) {
  @media (max-width: 768px) {
    .af-cv-section {
      content-visibility: auto;
      contain-intrinsic-size: auto 480px;
    }
  }
}
/* Priority Popup Compact Override */
#priority-popup {
  padding-top: 85px !important;
}
#priority-popup .popup-content {
  max-width: 320px !important;
  max-height: 55vh !important;
  width: auto !important;
  margin: auto !important;
}
#priority-popup img {
  max-width: 320px !important;
  max-height: 52vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}