/* ==========================================================================
   Swara — SOROTAN Geser (.sorot-carousel)  ·  berkas BARU
   Geser mendatar NATIF: overflow-x + scroll-snap (tanpa pustaka/font luar,
   tanpa !important). Dimuat SETELAH v5.css + intrinsic.css. Warna lewat
   variabel v5 (--navy/--gold/--card/--line/--ink/--muted) supaya mode gelap
   body.dark ikut benar.

   Markah dari renderer (TIDAK diubah berkas ini):
     .sorot-carousel > .sorot-track > article.sorot-slide > .sorot
     .sorot-carousel > .sorot-titik > button[data-ke="n"]
   Isi kartu = struktur .sorot v5 apa adanya (.shead/.sbody/.kicker/h2/
   .excerpt/.badge-media). Titik, panah, dan tombol papan-tombol ditambahkan
   sorotan-carousel.js; tanpa JS komponen tetap bisa diusap jari.

   Kartu yang tampak: 1 (<768px) · 2 (>=768px) · 3 (>=1366px)
   ========================================================================== */

/* 1. Wadah = kisi 2 baris: baris 1 trek kartu + panah (satu sel yang sama,
   jadi panah tegak-lurus di tengah kartu tanpa menggeser tata letak),
   baris 2 titik penunjuk. */
.sorot-carousel {
  --sorot-perbaris: 1;                /* diubah media query di bawah */
  --sorot-celah: var(--gap, 14px);    /* celah antar kartu = token intrinsic */
  --sorot-tepi: 18px;                 /* tepi = margin .sorot v5 */
  position: relative;
  margin: 12px var(--sorot-tepi) 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
}

/* 2. Trek geser: scroll-snap native (usap jari di HP, roda/trackpad di
   desktop), bilah gulir disembunyikan, gulir mendatar dikunci di trek. */
.sorot-carousel .sorot-track {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: stretch;
  gap: var(--sorot-celah);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0 8px;   /* ruang bayangan kartu (bukan tepi kiri-kanan) */
}

.sorot-carousel .sorot-track::-webkit-scrollbar { width: 0; height: 0; }

/* 3. Lebar slide = lebar trek / jumlah kartu per layar, dikurangi celah:
   tepi kartu selalu pas, tidak ada kartu terpotong separuh di ujung. */
.sorot-carousel .sorot-slide {
  flex: 0 0 calc((100% - (var(--sorot-perbaris) - 1) * var(--sorot-celah)) / var(--sorot-perbaris));
  min-width: 0;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

/* Margin .sorot bawaan v5 (4px 18px) dinolkan di dalam trek; kartu dibuat
   sama tinggi antar slide. */
.sorot-carousel .sorot-slide > .sorot {
  margin: 0;
  width: 100%;
  flex: 1 1 auto;
}

/* 4. Titik penunjuk */
.sorot-carousel .sorot-titik {
  grid-row: 2;
  grid-column: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.sorot-carousel .sorot-titik button {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s ease, transform .18s ease;
}

/* Sasaran jari: seluruh PITA titik setinggi 44px bisa ditekan.
   Tampilan titik tetap 10px — tap di antara/sekitar titik dibulatkan ke titik terdekat
   oleh skrip (resolusi jarak), jadi tidak ada sasaran yang saling menimpa. */
.sorot-carousel .sorot-titik {
  min-height: 44px;
  display: flex;
  align-items: center;
  touch-action: manipulation;
}

.sorot-carousel .sorot-titik button::after {
  content: "";
  position: absolute;
  inset: -6px;          /* cadangan untuk peramban tanpa skrip */
  border-radius: 50%;
}

.sorot-carousel .sorot-titik button:hover { background: var(--muted); }

.sorot-carousel .sorot-titik button.aktif,
.sorot-carousel .sorot-titik button[aria-current="true"] {
  background: var(--gold);
  transform: scale(1.25);
}

.sorot-carousel .sorot-titik button:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

.sorot-carousel:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 4px;
  border-radius: 14px;
}

/* 5. Panah geser (dipasang JS). Di HP sengaja tersembunyi — cukup usap jari.
   Chevron digambar dari border: tanpa ikon/font/gambar luar, dan ikut warna
   teks (currentColor) sehingga aman di mode gelap. */
.sorot-carousel .sorot-panah {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(22, 41, 77, .12);
  -webkit-tap-highlight-color: transparent;
  transition: background .18s ease, opacity .18s ease;
}

.sorot-carousel .sorot-panah::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateX(2px) rotate(45deg);
}

.sorot-carousel .sorot-panah-kiri {
  justify-self: start;
  margin-inline-start: -14px;
}

.sorot-carousel .sorot-panah-kiri::before {
  transform: translateX(-2px) rotate(-135deg);
}

.sorot-carousel .sorot-panah-kanan {
  justify-self: end;
  margin-inline-end: -14px;
}

.sorot-carousel .sorot-panah:hover { background: var(--paper); }
.sorot-carousel .sorot-panah[disabled] { opacity: .35; cursor: default; }

.sorot-carousel .sorot-panah:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* 6. Titik henti lebar layar */
@media (min-width: 768px) {
  .sorot-carousel {
    --sorot-perbaris: 2;
    --sorot-tepi: var(--gutter, 24px);
    margin-top: 8px;
  }

  .sorot-carousel .sorot-panah { display: flex; }
}

@media (min-width: 1366px) {
  .sorot-carousel { --sorot-perbaris: 3; }
}

/* 7. Semua slide sudah tampak → panah & titik tak berguna (kelas dari JS) */
.sorot-carousel.sorot-padat .sorot-panah,
.sorot-carousel.sorot-padat .sorot-titik { display: none; }

/* 8. Mode gelap: titik perlu sedikit lebih terang di atas --paper gelap;
   warna lain sudah ikut variabel v5. */
body.dark .sorot-carousel .sorot-titik button { background: var(--muted); }

body.dark .sorot-carousel .sorot-titik button.aktif,
body.dark .sorot-carousel .sorot-titik button[aria-current="true"] {
  background: var(--gold);
}

body.dark .sorot-carousel .sorot-titik button:focus-visible,
body.dark .sorot-carousel:focus-visible { outline-color: var(--gold); }

body.dark .sorot-carousel .sorot-panah {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

body.dark .sorot-carousel .sorot-panah:hover { background: #131a29; }

/* 9. prefers-reduced-motion: matikan geseran halus & transisi */
@media (prefers-reduced-motion: reduce) {
  .sorot-carousel .sorot-track { scroll-behavior: auto; }

  .sorot-carousel .sorot-titik button,
  .sorot-carousel .sorot-panah { transition: none; }
}

/* ------------------------------------------------------------------
   9. Penyesuaian integrasi (bukan bagian mockup awal):
      Di layar HP kartu sorotan terlalu tinggi sehingga BARIS TITIK PENUNJUK
      tertutup bilah navigasi bawah (terukur 647px pada 390x844, baris titik
      tertutup 65px). Kartu diringkas: gambar dibatasi, judul & potongan
      dibatasi jumlah barisnya. Sasaran: baris titik selalu terlihat penuh.
   ------------------------------------------------------------------ */
/* Gambar sorotan: kotak 4:3, gambar tampil UTUH di dalamnya (object-fit: contain) —
   TIDAK ada bagian yang terpotong, di ukuran layar mana pun. Sisi yang tidak terisi
   diberi latar kertas supaya tetap rapi. (Permintaan pemilik produk, 16 Okt 2026;
   menggantikan aturan gambar 16:8 + cover pada gaya dasar.) */
.sorot-carousel .sorot-slide .sorot .fotobox {
  position: relative;
  /* 16:9 — permintaan pemilik 16 Okt 2026 ("gambar kita coba 16:9 biar lebih pas mengisi
     halaman"); menggantikan 4:3. Foto tetap UTUH (contain) di dalam kotak 16:9. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--paper);
  background-size: cover;
  background-position: center;
}
/* Sisa ruang di dalam kotak 4:3 diisi salinan foto yang dikaburkan ->
   tidak ada bidang kosong menganggur, dan foto aslinya tetap UTUH. */
.sorot-carousel .sorot-slide .sorot .fotobox::before {
  content: "";
  position: absolute;
  inset: -12px;
  background: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(16px) brightness(.96) saturate(1.05);
  opacity: .62;
}
.sorot-carousel .sorot-slide .sorot .fotobox img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;      /* utuh, tanpa potong */
  display: block;
}

@media (max-width: 700px) {
  /* Titik penunjuk sudah di ATAS kartu, jadi tinggi kartu tidak lagi mengganggu:
     judul & potongan diberi ruang lebih lega (3 baris) supaya tidak terasa terpotong. */
  .sorot-carousel .sorot-slide .sorot h2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .sorot-carousel .sorot-slide .sorot .excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}

body.dark .sorot-carousel .sorot-slide .sorot > img { background: var(--paper); }

/* ------------------------------------------------------------------
   10. Titik penunjuk di ATAS kartu (layar HP).
       Sebab: dengan gambar 4:3 yang UTUH (tidak dipotong), kartu menjadi
       lebih tinggi sehingga baris titik di bawah kartu masuk ke bawah bilah
       navigasi (terukur tertutup 43px pada 390x844, 83px pada 360x740).
       Dengan titik di atas, posisinya tidak lagi bergantung tinggi kartu.
   ------------------------------------------------------------------ */
@media (max-width: 700px) {
  .sorot-carousel {
    display: flex;
    flex-direction: column;
  }
  .sorot-carousel .sorot-titik {
    order: -1;
    margin: 0 0 4px;
  }
}

/* ------------------------------------------------------------------
   11. Kerapatan kartu (permintaan pemilik: "tampilan masih banyak space kosong").
       Teks Recap sudah tidak lagi tampil di kartu beranda (dibaca di halaman
       peristiwa setelah diklik), jadi sisa ruang dirapatkan.
   ------------------------------------------------------------------ */
.sorot-carousel .sorot-slide .sorot { margin: 0; }
.sorot-carousel .sorot-slide .sorot .shead { padding: 8px 14px; }
.sorot-carousel .sorot-slide .sorot .sbody { padding: 12px 14px 13px; }
.sorot-carousel .sorot-slide .sorot h2 {
  font-size: 18px;
  line-height: 1.34;
  margin: 4px 0 10px;
}
.sorot-carousel .sorot-slide .sorot .badge-media { margin-top: 0; }

/* ------------------------------------------------------------------
   12. Kepadatan layar (§E.1) — hasil audit independen 16 Okt 2026:
       hanya 1 berita yang muat penuh di 390x844 (butuh >=3). Penyebab:
       baris titik 44px ikut mengalir + foto 4:3 setinggi 264px.
       Perbaikan tanpa melanggar keputusan pemilik (foto tetap 4:3, tidak dipotong):
       titik jadi lapisan di atas foto (tidak memakan tinggi), foto dibatasi
       tingginya tetapi TETAP 4:3 (lebarnya menyesuaikan, tengah, sisa sisi diisi
       salinan foto yang dikaburkan).
   ------------------------------------------------------------------ */
@media (max-width: 700px) {
  .sorot-carousel .sorot-titik {
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    min-height: 0;
    height: auto;
    z-index: 3;
    justify-content: center;
    margin: 0;
    padding: 0;
  }
  .sorot-carousel .sorot-titik button { width: 9px; height: 9px; box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
  .sorot-carousel .sorot-titik button::after { inset: -12px; }   /* area jari tetap lega */
  .sorot-carousel .sorot-titik button.aktif { transform: scale(1.35); }
  .sorot-carousel { position: relative; }

  /* foto: kotak 4:3, tinggi dibatasi 176px (lebar mengikuti = 235px), tetap utuh */
  .sorot-carousel .sorot-slide .sorot .fotobox {

    width: auto;
    margin: 0 auto;
    display: grid;
    place-items: center;
  }
  .sorot-carousel .sorot-slide .sorot .fotobox img { height: 100%; width: 100%; }
  .sorot-carousel .sorot-slide .sorot .sbody { padding: 9px 13px 10px; }
  .sorot-carousel .sorot-slide .sorot h2 { font-size: 16.5px; margin: 2px 0 6px; }
}

/* Foto kartu sorotan WAJIB mengisi kotak 16:9 (foto asli 4:3 -> tetap utuh dengan contain,
   sisa sisi kiri/kanan diisi salinan foto yang dikaburkan pada .fotobox). */
.sorot-carousel .sorot-slide .sorot .fotobox {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9 !important;   /* kotak 16:9 (permintaan pemilik) */
  height: auto !important;           /* menang atas aturan grid intrinsic.css */
  width: 100% !important;
  display: block;
}
.sorot-carousel .sorot-slide .sorot .fotobox img {
  position: absolute !important;   /* keluar dari aliran grid: aturan grid intrinsic.css
                                      (.sorot img {grid-column/grid-row}) tidak lagi menggeser tinggi */
  inset: 0 !important;
  height: 100% !important;
  width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block;
}