/* ---------------------------------------------------------------------------
 * Pembatas ayat di bawah gambar hero.
 *
 * Sebelumnya batas bawah foto hanya gradasi warna. Gradasi saja tidak
 * menyelesaikan apa pun: matanya tetap berhenti di sebuah garis yang tidak
 * berisi apa-apa. Pembatas yang patut adalah pembatas yang PUNYA ISI — di sini
 * satu ayat pilihan, dan gradasi tinggal menjadi peralihan menuju ke sana.
 *
 * Berkas ini hanya dimuat pada halaman yang benar-benar menampilkannya.
 * ------------------------------------------------------------------------- */

/* Huruf Utsmani.
 *
 * Amiri Quran (SIL OFL 1.1) dirancang khusus untuk teks Al-Qur'an bergaya
 * Utsmani seperti mushaf Madinah: bentuk hurufnya, tanda waqaf, dan letak
 * harakatnya mengikuti kaidah mushaf, bukan huruf Arab biasa yang dipaksa
 * menampung harakat.
 *
 * Dilayani sendiri (45 KB, satu berkas) — bukan dari Google Fonts. CSP situs
 * ini memakai font-src 'self', dan huruf dari pihak ketiga berarti setiap
 * pembaca ikut tercatat di server orang lain.
 *
 * font-display:swap supaya ayatnya langsung terbaca dengan huruf Arab bawaan
 * perangkat sambil huruf Utsmani-nya menyusul. */
@font-face {
  font-family: "Amiri Quran";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/vendor/quran/amiri-quran.woff2) format("woff2");
}

/* Pembatas menempel langsung di bawah foto.
 *
 * Beranda memberi jarak 62px di bawah foto untuk memisahkannya dari daftar
 * tulisan. Dengan pembatas ini, jarak itu justru menghasilkan pita kosong di
 * antara keduanya — dan pemisahnya jadi terlihat mengambang, bukan menyatu.
 * Berkas ini hanya dimuat ketika pembatasnya ada, jadi aman menimpanya di sini. */
.home .nature-banner.shell { margin-bottom: 0; }

.pembatas-ayat {
  position: relative;
  margin: -1px 0 54px;
  /* Tanpa jarak di atas: motifnya harus MENEMPEL pada tepi foto, seperti
     pelipit yang menggantung dari bidang di atasnya. Jarak untuk ayatnya
     diberikan pada .ayat-inner, bukan di sini — kalau tidak, akan ada pita
     kosong di antara foto dan motifnya. */
  padding: 0 0 32px;
  border-bottom: 1px solid var(--line);
  /* Warna rata. Gradasi di sini pernah dicoba dan hasilnya justru membuat
     pitanya terlihat mengambang; satu bidang warna yang tegas jauh lebih
     tenang dan lebih mudah dibaca. */
  background: color-mix(in srgb, var(--accent) 7%, var(--paper));
  overflow: hidden;
}
/* Garis tipis berwarna aksen di atasnya: inilah batas yang tegas, sementara
   gradasi foto di atas meluruh masuk ke dalamnya. */
.pembatas-ayat::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* --- motif arsitektur Islam ----------------------------------------------
 *
 * Gambarnya dipakai sebagai MASK, bukan sebagai gambar latar. Sebagai mask,
 * yang diambil hanya bentuknya; warnanya datang dari background-color di sini,
 * sehingga motifnya ikut warna aksen situs DAN ikut berubah sendiri di mode
 * gelap. Sebagai gambar latar, warnanya terkunci di dalam berkas SVG-nya dan
 * mode gelap akan menampilkan motif hitam di atas latar gelap.
 *
 * Karena itu seluruh aturannya dibungkus @supports: peramban yang tidak
 * mengenal mask akan mengabaikan blok ini sepenuhnya dan mendapat pembatas
 * tanpa motif — bukan sebatang balok warna aksen setinggi 38 piksel. */
.ayat-motif { height: 38px; }

@supports ((-webkit-mask-image: url(#m)) or (mask-image: url(#m))) {
  .ayat-motif {
    background-color: color-mix(in srgb, var(--accent) 62%, transparent);
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: auto 38px; mask-size: auto 38px;
  }
  .ayat-motif[data-motif="girih"]  { -webkit-mask-image: url(/assets/motif/girih.svg);  mask-image: url(/assets/motif/girih.svg) }
  .ayat-motif[data-motif="mihrab"] { -webkit-mask-image: url(/assets/motif/mihrab.svg); mask-image: url(/assets/motif/mihrab.svg) }
  .ayat-motif[data-motif="arabes"] { -webkit-mask-image: url(/assets/motif/arabes.svg); mask-image: url(/assets/motif/arabes.svg) }

  /* --- tirai ogee (dua lapis) ---------------------------------------------
   *
   * Motif ini punya DUA warna: bidang yang menggantung dari tepi foto, dan
   * garis hias di atasnya. Satu mask hanya bisa membawa satu warna, jadi
   * dipakai dua lapis yang saling menumpuk — dua berkas SVG dengan viewBox
   * yang sama persis, diulang dengan ukuran yang sama pula, sehingga garisnya
   * selalu jatuh tepat di atas bidangnya.
   *
   * Warnanya diturunkan dari warna aksen situs, bukan dipaku emas: bidangnya
   * aksen yang dipekatkan, garisnya warna terang hangat yang dicampur aksen.
   * Dengan begitu motifnya tetap terlihat seperti pelipit emas pada latar
   * gelap, tetapi ikut berubah bila warna aksennya diganti. */
  .ayat-motif[data-motif="tirai"] {
    position: relative;
    height: 76px;
    background-color: transparent;
    -webkit-mask-image: none; mask-image: none;
  }
  .ayat-motif[data-motif="tirai"]::before,
  .ayat-motif[data-motif="tirai"]::after {
    content: "";
    position: absolute; inset: 0;
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-position: left top; mask-position: left top;
    -webkit-mask-size: 120px 76px; mask-size: 120px 76px;
  }
  .ayat-motif[data-motif="tirai"]::before {
    background-color: color-mix(in srgb, var(--accent) 86%, #1c2a22);
    -webkit-mask-image: url(/assets/motif/tirai-bidang.svg);
    mask-image: url(/assets/motif/tirai-bidang.svg);
  }
  .ayat-motif[data-motif="tirai"]::after {
    background-color: color-mix(in srgb, var(--accent) 26%, #efdcb4);
    -webkit-mask-image: url(/assets/motif/tirai-garis.svg);
    mask-image: url(/assets/motif/tirai-garis.svg);
  }
}

/* Tirai menggantung dari tepi foto, jadi tidak boleh ada jarak di atasnya —
   dan pita di bawahnya ikut menyesuaikan tinggi tirainya. */
.ayat-motif[data-motif="tirai"] { margin-bottom: 6px; }

/* Lengkung mihrab berdiri di atas garis dasarnya, jadi ia diletakkan menempel
   ke atas — seperti serambi yang menggantung dari tepi foto. */
.ayat-motif[data-motif="mihrab"] { margin-bottom: 4px; }

/* Motif tanpa ayat: pitanya menjadi lebih ramping, karena tidak ada yang perlu
   diberi ruang di bawahnya. */
.pembatas-motif-saja { padding: 0 0 14px; }

.ayat-inner { display: grid; gap: 12px; justify-items: center; text-align: center; padding-top: 26px; }

/* Hiasan: tanda rub' el hizb (۞) yang memang dipakai di mushaf sebagai penanda
   bagian, diapit dua garis tipis — bentuk pembatas yang sudah dikenal orang,
   jadi maksudnya terbaca tanpa perlu dijelaskan. */
/* Kalau sudah ada motif di atas, hiasan garis ini tidak lagi diperlukan —
   dua hiasan bertumpuk membuat pembatasnya terasa ramai. */
.ayat-motif ~ .ayat-inner .ayat-hias { display: none; }

.ayat-hias {
  display: flex; align-items: center; gap: 14px;
  width: min(420px, 72%);
  font-family: "Amiri Quran", "Scheherazade New", serif;
  font-size: 24px; line-height: 1;
  color: color-mix(in srgb, var(--accent) 80%, transparent);
}
.ayat-hias::before, .ayat-hias::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: color-mix(in srgb, var(--accent) 32%, transparent);
}

/* --- baris ayat ---------------------------------------------------------- */
.ayat-jendela {
  width: 100%;
  overflow: hidden;
  /* Tepinya dipotong tegas, tanpa peluruhan. Pita motif di atas sudah menjadi
     bingkai yang jelas, jadi tidak ada lagi tepi yang perlu disamarkan. */
}
.ayat-arab {
  margin: 0;
  font-family: "Amiri Quran", "Scheherazade New", "Traditional Arabic", serif;
  font-size: clamp(25px, 3vw, 33.5px);
  line-height: 2.15;
  color: var(--ink);
  direction: rtl;
  unicode-bidi: isolate;
}
/* Ayat yang muat: berhenti di tengah, tidak bergerak sama sekali. Teks
   berjalan yang tidak perlu hanya mengganggu. */
.ayat-arab:not(.berjalan) { white-space: normal; padding-inline: 18px; }
/* Keadaan sesaat saat diukur: dipaksa satu baris supaya lebar sebenarnya
   terbaca. Tidak pernah terlihat pengunjung — dipasang dan dilepas dalam satu
   putaran kode yang sama. */
.ayat-arab.sedang-diukur { white-space: nowrap; }

/* Ayat yang tidak muat: berjalan pelan.
 *
 * Dua salinan berdampingan di dalam satu jalur selebar isinya. Saat jalur
 * bergeser tepat setengah lebarnya, salinan kedua persis menempati posisi awal
 * salinan pertama — perulangannya mulus tanpa lompatan.
 *
 * Arah geser ke KANAN, bukan ke kiri. Pada teks Arab, awal kalimat ada di tepi
 * kanan dan bagian yang belum terbaca tersembunyi di sebelah kiri; menggeser ke
 * kanan itulah yang memunculkannya, sesuai arah membacanya. */
.ayat-arab.berjalan { white-space: nowrap; }
.ayat-jalur {
  display: inline-flex;
  width: max-content;
  gap: 0;
  animation: ayat-geser var(--ayat-durasi, 30s) linear infinite;
}
.ayat-jalur > span { padding-inline: 28px; }
@keyframes ayat-geser {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
/* Berhenti saat disentuh, supaya ayat yang sedang dibaca bisa diselesaikan. */
.pembatas-ayat:hover .ayat-jalur,
.pembatas-ayat:focus-within .ayat-jalur { animation-play-state: paused; }

.ayat-arti {
  margin: 0;
  max-width: 760px;
  font: italic 17px/1.75 var(--prose, var(--serif));
  color: var(--muted);
  padding-inline: 20px;
}
.ayat-rujuk {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 12.5px/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.ayat-rujuk .ikon { font-size: 13.5px; opacity: .8; }

/* Sebagian orang merasa pusing oleh gerakan. Bagi mereka ayatnya diam dan
   bisa digeser sendiri — isinya tetap utuh, hanya cara membacanya berbeda. */
@media (prefers-reduced-motion: reduce) {
  .ayat-jalur { animation: none; }
  .ayat-jendela { overflow-x: auto; }
  .ayat-jalur > span:nth-child(2) { display: none; }
}

@media (max-width: 620px) {
  .pembatas-ayat { padding: 22px 0 24px; margin-bottom: 36px; }
  .ayat-arab { line-height: 2; }
  .ayat-arti { font-size: 16px; }
}