/*
 * Gaya pelengkap — hal yang tema asal TIDAK punya.
 *
 * Bukan tempat menambal tema.css. Aturannya satu: berkas ini hanya boleh berisi
 * gaya untuk hal yang memang tidak ada padanannya di KoranWP, dan setiap blok
 * wajib menyebutkan kenapa. Kalau tema sebenarnya punya gayanya dan gaya itu
 * tidak berlaku, yang salah adalah markup-nya — perbaiki di sana, jangan
 * ditimpa dari sini (STANDAR-KODE §1.2).
 *
 * Urutannya setelah tema.css, sehingga penambahan di sini tidak perlu menaikkan
 * spesifisitas maupun memakai !important.
 */

/* --- Kendali yang di tema berupa <div> ------------------------------------ */

/*
 * Pemilih mode, tombol reaksi, dan tombol tutup jendela berbagi dibangun tema
 * dari <div> ber-onclick — tidak dapat dijangkau keyboard dan tidak terbaca
 * sebagai kendali oleh pembaca layar. Kita memakai <button>, yang benar
 * (PRD §13), tetapi membawa gaya bawaan peramban: latar abu, garis tepi, dan
 * font berbeda. Yang dinetralkan di sini hanya gaya bawaan itu; seluruh
 * tampilan tetap datang dari tema.
 */
.idm-mode-tema,
.idm-mode-tema__item,
.idm-reaksi__item,
.idm-berbagi__popup-tutup {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  text-align: inherit;
}

/* --- Identitas berupa teks ------------------------------------------------ */

/*
 * Tema selalu mengandaikan logo gambar: `.header-brand img` diberi tinggi 40px,
 * sementara nama situs berupa teks (`.brand-title`) tidak punya satu aturan pun.
 * Di WordPress itu tidak terasa karena setiap pemasangan mengunggah logo.
 *
 * Produk ini tidak boleh mengandaikan itu. Klien baru berjalan sejak menit
 * pertama tanpa logo, dan tanpa aturan di bawah nama situs dirender dengan
 * warna teks bawaan di atas header gelap — praktis tidak terbaca.
 */
.idm-header__merek .idm-merek__judul {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--idm-warna-teks-atas-gelap);
}

.idm-header__merek .idm-merek__deskripsi {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--idm-warna-teks-atas-gelap-lemah);
}

.idm-footer__merek .idm-merek__judul {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--idm-warna-teks-atas-gelap);
}

.idm-footer__hak-cipta {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--idm-warna-teks-atas-gelap-lemah);
}

/* --- Slot iklan yang dikelola sendiri ------------------------------------- */

/*
 * `.idm-iklan__spanduk` (dulu `.banner`) di tema hanyalah kotak placeholder:
 * ::before-nya menutupi seluruh kotak. Tema tidak pernah memasang materi di
 * dalamnya — iklan mereka datang sebagai widget teks. Karena slot iklan di
 * produk ini memuat materinya sendiri, materinya butuh konteks penumpukan agar
 * berada DI ATAS placeholder, bukan tertimbun.
 */
.idm-iklan__spanduk .idm-iklan__badan {
  position: relative;
  z-index: var(--idm-lapis-dasar);
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

/* --- Deretan kartu sorotan ------------------------------------------------ */

/*
 * Tata letak mendatar untuk `idm-blok-sorotan__kecil`.
 *
 * Tema tidak punya aturannya, dan itu bukan kelalaian: barisnya dibentuk slick
 * lewat `.slick-track { display:flex }` di slick.css — berkas yang sengaja
 * tidak ikut digabung karena PRD §14 mengganti slick. Yang hilang bersama slick
 * hanyalah pembentuk barisnya; seluruh gaya kartunya (rasio gambar 68%, judul
 * 14px terpotong tiga baris, padding 12px) tetap datang dari tema.
 *
 * Digulir, bukan dibungkus ke baris berikutnya: jumlah kartunya ditentukan
 * redaksi lewat `blok.konfigurasi.jumlah`, jadi barisnya harus tetap rapi pada
 * empat kartu maupun sepuluh. `scroll-snap` membuatnya berhenti pas di tepi
 * kartu, dan gulir mendatar bawaan peramban sudah mendukung sentuh, trackpad,
 * serta panah keyboard tanpa satu baris JavaScript pun.
 */
.idm-blok-sorotan__kecil {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  /* Bilah gulir disembunyikan; yang menunjukkan barisnya berlanjut adalah
     potongan kartu berikutnya di tepi kanan — lihat lebar kartu di bawah. */
  scrollbar-width: none;
}

.idm-blok-sorotan__kecil::-webkit-scrollbar {
  display: none;
}

/*
 * 32%, bukan 33,33%: tiga kartu penuh ditambah sepotong kartu keempat yang
 * mengintip di tepi. Pada 33,33% tiga kartu mengisi barisnya pas, dan kartu
 * selanjutnya hilang tanpa jejak — pembaca tidak punya alasan menduga barisnya
 * masih berlanjut, apalagi bilah gulirnya disembunyikan.
 */
.idm-blok-sorotan__kecil > .idm-blok-sorotan__item {
  flex: 0 0 32%;
  scroll-snap-align: start;
}

/*
 * Di bawah ambang desktop kartunya dibuat jauh lebih lebar dan sengaja
 * menyisakan potongan kartu berikutnya di tepi layar: itu satu-satunya petunjuk
 * bahwa barisnya masih berlanjut, karena bilah gulirnya disembunyikan.
 */
@media (max-width: 1119px) {
  .idm-blok-sorotan__kecil > .idm-blok-sorotan__item {
    flex-basis: 70%;
  }
}

/*
 * Pembungkus butir blok geser pada lebar desktop.
 *
 * Tema hanya mengenal `.slider-box` di stylesheet mobile — di desktop, butir
 * geser diharapkan menjadi anak LANGSUNG `.slider .widget-content`, yang sudah
 * berupa flex pembungkus. Situs ini merender satu markup untuk semua ukuran
 * (PRD keputusan #2), jadi pembungkusnya selalu ada dan harus meneruskan
 * perilaku flex itu ke dalam dirinya. Tanpa aturan ini, butir selebar sepertiga
 * di desktop menumpuk ke bawah alih-alih berjajar.
 */
@media (min-width: 1120px) {
  .idm-blok-geser__kotak {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
  }

  /*
   * TIGA kolom, bukan empat.
   *
   * Tema menyetel `width: 25%`. Pada kolom utama selebar 728px itu memberi tiap
   * kartu 187px, dan setelah padding tersisa sekitar 167px untuk teks — lebih
   * sempit daripada satu baris tanggal terbit, yang kini lengkap dengan hari
   * dan jam ("Kamis, 27 Agustus 2026 | 07:48 WIB", 12px, ±205px). Tanggalnya
   * pecah menjadi dua baris di SETIAP kartu.
   *
   * Diukur, bukan ditaksir: pada 25% tinggi elemen waktunya 41px — dua baris
   * dari tinggi baris 20,5px.
   *
   * Akibat sampingannya, dan ini keputusan redaksi bukan keputusan CSS: jumlah
   * kartu per blok datang dari `konfigurasi.jumlah`. Angka yang bukan kelipatan
   * tiga menyisakan baris terakhir yang tidak penuh — itu sah, dan yang
   * mengaturnya ada di page builder.
   */
  .idm-blok-geser .idm-blok-geser__item {
    width: 33.3333%;
  }

  /*
   * Tanggalnya 11px, bukan 12px milik tema — dan ini BUKAN kerapian.
   *
   * Tiga kolom saja ternyata belum cukup. Diuji pada seluruh 84 kombinasi hari
   * x bulan pada ruang teks 229px yang tersedia:
   *
   *   Minggu, 30 November 2026 | 22:30 WIB    229px  — mentok, nol sisa
   *   Minggu, 30 Desember 2026 | 22:30 WIB    229px  — mentok, nol sisa
   *   Minggu, 30 September 2026 | 22:30 WIB   PECAH jadi dua baris
   *
   * Satu dari 84 pecah dan dua lainnya persis di tepi. Cacat semacam itu tidak
   * muncul saat dilihat sekilas — ia menunggu hari Minggu di bulan September,
   * lalu terlihat seperti kerusakan acak.
   *
   * Satu piksel menutupnya dengan sisa yang nyaman, dan 11px masih ukuran yang
   * lazim untuk baris meta. Melebarkan kolom lebih jauh berarti dua kartu per
   * baris — terlalu longgar untuk blok yang isinya delapan.
   */
  .idm-blok-geser .idm-blok-geser__waktu {
    font-size: 11px;
  }
}

/*
 * Blok geser di lebar ponsel: tingginya mengikuti isi, bukan dipatok 240px.
 *
 * Tema mengunci `.idm-blok__isi` pada `height: 240px; overflow: hidden`, lalu
 * memberi kotak gulirnya `padding-bottom: 30px` dan mengembalikan 20px lewat
 * margin negatif. Susunan itu punya satu tujuan: mendorong bilah gulir mendatar
 * ke bawah garis potong supaya tidak terlihat. Ia peninggalan slick, yang
 * mengurus tinggi kartunya sendiri.
 *
 * Begitu label rubrik ditambahkan, 240px tidak lagi cukup. Terukur di 390px:
 * empat dari enam kartu kehilangan baris tanggalnya, terpotong 9px — dan hanya
 * yang judulnya tiga baris. Kartu pertama, yang biasa dipakai memeriksa, justru
 * termasuk yang selamat. Cacat yang hanya muncul pada sebagian kartu itulah
 * yang paling mudah dinyatakan tidak ada.
 *
 * Menaikkan angkanya hanya memindahkan batasnya ke judul yang lebih panjang
 * lagi. Yang dicabut karena itu bukan angkanya melainkan pematokannya; bilah
 * gulirnya disembunyikan dengan cara yang sudah dipakai deret gambar mini
 * sorotan, bukan dengan menyembunyikannya di balik garis potong.
 */
@media (max-width: 1119px) {
  .idm-blok-geser .idm-blok__isi {
    height: auto;
    overflow: visible;
    margin-bottom: 0;
  }

  .idm-blok-geser__kotak {
    padding-bottom: 0;
    scrollbar-width: none;
  }

  .idm-blok-geser__kotak::-webkit-scrollbar {
    display: none;
  }
}

/* --- Header pada lebar ponsel --------------------------------------------- */

/*
 * Kotak pencarian dilepas dari header ponsel.
 *
 * Bukan penyederhanaan sepihak: header ponsel di acuan memang hanya memuat
 * merek, pemilih mode, dan tombol menu — pencariannya pindah ke dalam drawer
 * (`.sidebarmenu-search`), dan komponen yang sama dipakai di kedua tempat.
 * Memaksakan ketiganya berjajar di 390px membuat nama situs, kotak isian, dan
 * tombol saling berdesakan sampai taglinenya tumpang tindih.
 */
@media (max-width: 1119px) {
  .idm-header__pencarian {
    display: none;
  }

  /*
   * Nama situs di ponsel. Tema tidak menatanya sama sekali — ia selalu
   * mengandaikan logo gambar setinggi 35px — sehingga ukuran desktop 24px
   * terbawa apa adanya dan mendorong tagline keluar dari baris 60px.
   */
  .idm-header__merek .idm-merek__judul {
    font-size: 17px;
  }

  .idm-header__merek .idm-merek__deskripsi {
    font-size: 10px;
  }
}

/*
 * Jarak kotak pencarian di dalam drawer.
 *
 * `.sidebarmenu-search` ada di peta kelas dan dipakai acuan, tapi tema tidak
 * pernah memberinya satu aturan pun — kotak isiannya menempel rapat ke tepi
 * layar. Warna dan bentuk kotaknya sendiri tetap dari tema: gaya
 * `.idm-pencarian__input` memang dibuat untuk latar gelap, dan latar drawer
 * kebetulan gelap yang sama dengan header.
 */
.idm-menu-sisi__pencarian {
  padding: 15px;
}

/*
 * Drawer menu dan tombolnya hanya ada di lebar mobile.
 *
 * Tema tidak perlu aturan ini karena ia menyajikan dua templat terpisah —
 * markup drawer memang tidak pernah dikirim ke peramban desktop. Situs ini
 * merender satu markup untuk semua ukuran (PRD keputusan #2), jadi keduanya
 * selalu ada di DOM dan harus disembunyikan sendiri di atas ambang. Tanpa ini,
 * `.idm-menu-sisi` yang tidak punya satu pun gaya desktop tampil sebagai blok
 * biasa di dalam header: kotak pencarian, daftar menu, dan ikon sosial
 * menumpuk di pojok kanan atas.
 */
@media (min-width: 1120px) {
  .idm-header__bilah,
  .idm-menu-sisi {
    display: none;
  }
}

/* ── Slot iklan responsif ──────────────────────────────────────────────────
 *
 * Tema mengunci lebar DAN tinggi slot lewat kelas ukuran (`idm-iklan--970x250`
 * dan empat saudaranya). Itu benar untuk materi yang persis seukuran slotnya,
 * dan salah untuk yang lain: materi berrasio berbeda ikut diregangkan ke tinggi
 * tetap itu, dan gambar yang lebih ramping tampak melar.
 *
 * Aturan di bawah membuat slot selebar wadahnya dengan tinggi mengikuti rasio
 * gambarnya sendiri. Ruangnya tetap terpesan sebelum gambar selesai dimuat —
 * Next menuliskan `width` dan `height` asli materinya, dan peramban menurunkan
 * `aspect-ratio` dari keduanya. Jadi tidak ada pergeseran tata letak meski
 * tingginya tidak lagi ditetapkan CSS.
 *
 * Milik produk, bukan porting: tema tidak punya varian ini. */
.idm-iklan__spanduk--responsif {
  width: 100%;
  height: auto;
}

/* Placeholder abu-abu tema digambar `::before` yang menutupi seluruh kotak.
 * Pada slot berukuran tetap ia menandai ruang yang sudah terpesan; di sini
 * tingginya mengikuti isi, sehingga yang tersisa hanyalah lapisan abu-abu di
 * belakang materi yang menembus pada gambar bertransparansi. */
.idm-iklan__spanduk--responsif::before {
  content: none;
}

.idm-iklan__spanduk--responsif .idm-iklan__badan,
.idm-iklan__spanduk--responsif img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tema mengunci tinggi gambar di zona papan atas:
 *
 *   .idm-papan-atas .idm-blok img { width: auto; height: 250px !important }
 *
 * Aturan itu benar untuk slot 970x250 warisan tema, dan mematikan seluruh
 * maksud varian ini — materi berrasio lain diperkecil sampai setinggi 250px
 * lalu dipusatkan, menyisakan pita kosong di kiri-kanannya.
 *
 * `!important` di sini bukan pilihan gaya melainkan satu-satunya jalan: nilai
 * ber-`!important` hanya dapat dikalahkan oleh `!important` lain, dan yang
 * menentukan pemenangnya adalah spesifisitas. Selektor ini 0-3-1 melawan
 * 0-2-1, dan sengaja dipersempit ke `--responsif` supaya slot berukuran tetap
 * tetap berperilaku persis seperti di tema. */
.idm-papan-atas .idm-blok.idm-iklan__spanduk--responsif img {
  width: 100% !important;
  height: auto !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Kereta sorotan
 *
 * Tema menyerahkan seluruh perilakunya ke slick, dan slick diganti (PRD §14).
 * Yang hilang bersamanya hanya tiga hal, dan ketiganya ditulis ulang di sini.
 * Seluruh gaya kartunya — rasio gambar, gradien judul, ukuran huruf — tetap
 * datang dari tema.
 * ────────────────────────────────────────────────────────────────────────── */

/*
 * Penanda gambar mini yang sedang tampil.
 *
 * Bentuknya bukan karangan: tema punya aturannya di
 * `reference/css/desktop.css:698` sebagai
 * `.headline-small .headline-item.slick-current:after` — garis 4px berwarna
 * primer di sisi atas kartu. Aturan itu tidak ikut tergabung karena kelas
 * `slick-current` berstatus `digantikan-pustaka` di peta kelas, jadi
 * bentuknya disalin ke sini dengan pengait yang kita punya sendiri.
 *
 * Pengaitnya `aria-selected` pada tautan di dalam kartu, lewat `:has()` —
 * bukan kelas baru. Keadaan aktifnya dengan begitu hanya hidup di SATU tempat,
 * yaitu atribut yang juga dibaca pembaca layar, sehingga tidak mungkin ada
 * kartu yang terlihat aktif tetapi tidak diumumkan aktif. Peramban tanpa
 * `:has()` kehilangan garisnya saja; keretanya tetap berfungsi penuh.
 */
.idm-blok-sorotan__kecil > .idm-blok-sorotan__item:has([aria-selected="true"])::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  border-top: 4px solid var(--idm-warna-primer);
}

/*
 * Seluruh kartu dapat diklik, jadi penunjuknya harus mengatakan begitu.
 * Dibatasi ke deret gambar mini: kartu di `__besar` bukan tombol, ia isi.
 */
.idm-blok-sorotan__kecil > .idm-blok-sorotan__item {
  cursor: pointer;
}

/*
 * Transisi masuk sorotan besar.
 *
 * `data-berpindah` baru dipasang komponen setelah perpindahan PERTAMA, jadi
 * gambar LCP tidak pernah ikut memudar masuk — menganimasikannya berarti
 * menunda titik yang sedang diukur demi hiasan yang tidak diminta.
 *
 * Animasinya berjalan sendiri setiap panel keluar dari `hidden`: elemen yang
 * kembali dirender memulai ulang animasinya, jadi tidak ada keadaan yang perlu
 * disetel ulang dari JavaScript.
 */
@keyframes idm-sorotan-muncul {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.idm-blok-sorotan__besar[data-berpindah] > .idm-blok-sorotan__item {
  animation: idm-sorotan-muncul 320ms ease-out;
}

/* Yang menyetel "kurangi gerak" tidak mendapat perpindahan otomatis sama
   sekali (dijaga komponennya), dan tidak juga transisi saat memilih sendiri. */
@media (prefers-reduced-motion: reduce) {
  .idm-blok-sorotan__besar[data-berpindah] > .idm-blok-sorotan__item {
    animation: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Sorotan: judul tanpa garis aksen kiri
 *
 * Tema memberi tiap judul sorotan `border-left` berwarna primer — 2px di
 * ponsel, 3px di desktop — beserta `padding-left` yang memberinya ruang.
 * Keduanya dicabut bersama-sama: melepas garisnya saja meninggalkan judul yang
 * menjorok 15px tanpa alasan yang terlihat.
 *
 * Disebut DUA KALI karena tema pun menuliskannya dua kali, dan yang desktop
 * lebih spesifik (`__besar` di depan). Satu selektor bergaya `__teks h2` saja
 * akan berlaku di ponsel dan diam-diam kalah di desktop.
 *
 * Tanggal ikut disebut: ia mendapat inden sendiri agar sejajar dengan judul
 * yang menjorok tadi — `margin-left: 15px` di ponsel dan `padding: 0 20px` di
 * desktop. Dibiarkan, ia menjadi satu-satunya baris yang masih menjorok. */
.idm-blok-sorotan__teks h2,
.idm-blok-sorotan__besar .idm-blok-sorotan__teks h2 {
  border-left: 0;
  padding-left: 0;
}

.idm-blok-sorotan__tanggal,
.idm-blok-sorotan__besar .idm-blok-sorotan__tanggal {
  margin-left: 0;
  padding-left: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Gambar mini: keterangan berlatar TERANG di bawah gambar
 *
 * Sebelumnya keterangan gambar mini adalah lapisan gelap: di desktop sebuah
 * panel bertulisan putih, di ponsel sebuah lapisan `position: absolute` yang
 * membentang MENUTUPI seluruh kartu. Yang kedua itu yang paling merugikan —
 * kartunya hanya 176×123 di lebar 390px, dan judul 18px setinggi 76px menutup
 * hampir dua pertiga gambar yang seharusnya menjadi alasan kartu itu ada.
 *
 * Sekarang keterangannya keluar dari lapisan gambar dan berdiri DI BAWAHNYA,
 * berlatar terang dengan teks gelap, dan berwarna primer saat disentuh
 * penunjuk. Gambarnya utuh, judulnya terbaca di atas latar yang tenang, dan
 * bentuknya sama di kedua lebar — sebelumnya ponsel dan desktop memakai dua
 * susunan yang berbeda.
 *
 * `position: static`, bukan `relative`: `top` dan `bottom` milik tema menjadi
 * tidak berlaku sama sekali, sehingga tidak ada yang perlu dinolkan satu per
 * satu. */
.idm-blok-sorotan__kecil .idm-blok-sorotan__teks {
  position: static;
  display: block;
  padding: 10px 12px 12px;
  background: var(--idm-warna-latar);
}

.idm-blok-sorotan__kecil .idm-blok-sorotan__teks h2 {
  font-weight: 600;
  line-height: 1.4;
  /* Tema mengunci tinggi judul ponsel di 126px demi lapisan gelapnya. Di luar
     lapisan itu, batas tinggi hanya menyisakan ruang kosong di bawah judul
     pendek. Yang membatasi panjangnya tetap ada — pemotongan tiga baris milik
     tema pada tautannya. */
  max-height: none;
  color: var(--idm-warna-teks);
}

/* Tautannya mewarisi, bukan menyetel warnanya sendiri: dengan begitu warna
   judul hanya ditulis di SATU tempat, dan keadaan tunjuk cukup menimpa satu
   deklarasi. Tema mengunci `color: #fff` pada tautan di dalam lapisan gelap;
   itu yang sedang ditimpa di sini. */
.idm-blok-sorotan__kecil .idm-blok-sorotan__teks a {
  color: inherit;
  transition: color 150ms ease;
}

.idm-blok-sorotan__kecil .idm-blok-sorotan__teks a:hover,
.idm-blok-sorotan__kecil .idm-blok-sorotan__teks a:focus-visible {
  color: var(--idm-warna-primer);
}

/* Mode gelap: latar terang di dalam blok yang gelap akan menyala seperti kartu
   iklan. Permukaannya ikut menggelap, dan warna tunjuknya berpindah ke aksen
   yang sudah lolos rasio kontras — primer klien bisa gelap, dan primer gelap
   di atas permukaan gelap tidak terlihat sama sekali. */
body.is-mode-gelap .idm-blok-sorotan__kecil .idm-blok-sorotan__teks {
  background: var(--idm-warna-permukaan-gelap);
}

body.is-mode-gelap .idm-blok-sorotan__kecil .idm-blok-sorotan__teks h2 {
  color: var(--idm-warna-teks-atas-gelap);
}

body.is-mode-gelap .idm-blok-sorotan__kecil .idm-blok-sorotan__teks a:hover,
body.is-mode-gelap .idm-blok-sorotan__kecil .idm-blok-sorotan__teks a:focus-visible {
  color: var(--idm-warna-primer-atas-gelap);
}

@media (prefers-color-scheme: dark) {
  body.is-mode-otomatis .idm-blok-sorotan__kecil .idm-blok-sorotan__teks {
    background: var(--idm-warna-permukaan-gelap);
  }

  body.is-mode-otomatis .idm-blok-sorotan__kecil .idm-blok-sorotan__teks h2 {
    color: var(--idm-warna-teks-atas-gelap);
  }

  body.is-mode-otomatis .idm-blok-sorotan__kecil .idm-blok-sorotan__teks a:hover,
  body.is-mode-otomatis .idm-blok-sorotan__kecil .idm-blok-sorotan__teks a:focus-visible {
    color: var(--idm-warna-primer-atas-gelap);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Hero di lebar ponsel: lapisan teks hanya menutupi SISI BAWAH gambar
 *
 * Tema membentangkan lapisan teks dari `top: 0` sampai `bottom: 0` — setinggi
 * seluruh gambar — lalu mengandalkan gradien agar bagian atasnya tembus
 * pandang. Hasilnya bekerja, tetapi ruang yang dipakainya jauh lebih besar
 * daripada teks di dalamnya: `padding-bottom: 35px` menyisakan pita mati di
 * bawah tanggal, dan judul 18px pada gambar setinggi 252px membuat sepertiga
 * bawah foto tertutup rata.
 *
 * `top: auto` membuat lapisannya setinggi ISINYA saja dan tetap menempel di
 * dasar gambar. Gradien tema ikut menyusut bersamanya, jadi tidak ada satu pun
 * nilai warna baru yang ditulis di sini — bidang foto di atasnya kembali
 * terlihat penuh.
 *
 * Padding atas 34px adalah zona pudarnya: tanpa itu baris pertama judul duduk
 * tepat di tepi gradien, tempat latarnya paling tipis dan huruf putih paling
 * sulit dibaca. */
@media (max-width: 1119px) {
  .idm-blok-sorotan__besar .idm-blok-sorotan__teks {
    top: auto;
    padding: 34px 15px 14px;
  }

  .idm-blok-sorotan__besar .idm-blok-sorotan__teks h2 {
    font-size: 16px;
  }

  /* Judul gambar mini, dan angkanya diukur bukan dipilih.
   *
   * Tema menyetel 18px untuk SELURUH judul sorotan — ukuran yang benar untuk
   * hero selebar layar, dan terlalu besar untuk kartu selebar 176px. Pada 18px
   * keterangannya setinggi 98px di atas gambar setinggi 123px: kartu yang
   * separuhnya teks. 13px membawanya ke sekitar 70px, sehingga gambar tetap
   * bagian terbesar kartunya. Desktop tidak ikut — di sana tema sudah memakai
   * 14px pada kartu selebar 233px, dan itu memang pas. */
  .idm-blok-sorotan__kecil .idm-blok-sorotan__teks h2 {
    font-size: 13px;
  }

  .idm-blok-sorotan__kecil .idm-blok-sorotan__teks {
    padding: 8px 10px 10px;
  }
}

/*
 * Lencana judul blok sorotan — dinaikkan di atas isi hero.
 *
 * Tema menatanya sebagai label mengambang di pojok kiri atas gambar hero
 * (`position:absolute; top:15px; left:15px`, latar warna primer, huruf putih)
 * dan memberinya `z-index: 1`. Angka itu tidak pernah teruji: gradien judul
 * hero `.idm-blok-sorotan__besar .idm-blok-sorotan__teks` membentang SELURUH
 * tinggi hero pada `z-index: 2`, jadi lencananya selalu tertimbun.
 *
 * Tidak pernah terlihat di tema aslinya karena widget headline di WordPress
 * sumber dipasang TANPA judul — `reference/html/01-beranda.desktop.html` hanya
 * memuat `<div class="widget headline"><div class="widget-content">`, tanpa
 * satu pun `widget-title`. Gaya lencananya ada, tetapi tidak pernah dirender,
 * sehingga tabrakan lapisannya tidak pernah muncul.
 *
 * Gejalanya sempat membingungkan: lencananya berkedip sesaat setiap kali
 * gambar mini diklik. Itu bukan lencananya yang muncul-hilang melainkan
 * panelnya — animasi masuk memberi `opacity` di bawah 1, yang membuat panel
 * menjadi konteks penumpukan sendiri dan sesaat turun ke bawah lencana.
 *
 * `pointer-events: none` supaya label yang tidak dapat diklik ini tidak
 * mencuri klik dari tautan hero yang kini ada di bawahnya.
 */
.idm-blok-sorotan .idm-blok__kepala {
  z-index: 3;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Judul blok: garis MENDATAR di samping judul, bukan garis tegak di tepi kiri
 *
 * Tema menandai tiap judul blok dengan `border-left` berwarna primer. Bentuk
 * itu bekerja, tetapi menempatkan penandanya di luar kolom teks: judulnya
 * menjorok 10px, sehingga tidak satu pun judul sejajar dengan isi blok yang
 * diumumkannya. Garis mendatar memindahkan penanda itu ke KANAN judul, tempat
 * ia mengisi sisa lebar dan sekaligus menjadi pemisah antar blok.
 *
 * Akibat sampingannya disengaja: `padding-left` ikut hilang, sehingga judul
 * kini rata dengan kolom isinya.
 *
 * ── Kenapa disasar lewat `.idm-konten`, bukan `.idm-blok__kepala` saja ──────
 *
 * Kelas yang sama dipakai di lima tempat yang tampilannya sudah berbeda-beda,
 * dan menyapu semuanya akan merusak empat di antaranya:
 *
 *   .idm-bilah-sisi        kolomnya ~300px. Sisa lebar setelah judul tinggal
 *                          sepotong pendek, dan garis sepanjang itu terbaca
 *                          sebagai patahan, bukan ornamen. Lihat aturan
 *                          tersendiri di bawah.
 *   .idm-blok-sorotan      judulnya lencana melayang di atas gambar hero, dan
 *                          di lebar ponsel `display: none`. Diikutkan lewat
 *                          `display: flex`, lencana itu MUNCUL di ponsel —
 *                          karena itu ia dikecualikan di dalam selektor, bukan
 *                          dikembalikan sesudahnya.
 *   .idm-blok-tag--populer judulnya duduk sebaris dengan deret tag, bukan di
 *                          atasnya.
 *   .idm-navigasi__daftar  judul blok di dalam drawer menu ponsel, berlatar
 *                          gelap.
 *   .idm-footer            disembunyikan sama sekali di desktop.
 *
 * Ketiga yang terakhir hidup di luar `.idm-konten`, jadi cukup lingkupnya yang
 * membatasi. Sorotan tidak — ia satu-satunya yang perlu disebut.
 *
 * ── Komentar ikut, dan itu bukan pelebaran lingkup ─────────────────────────
 *
 * `.idm-komentar__kepala` memang satu aturan yang sama dengan
 * `.idm-blok__kepala` di tema — keduanya ditulis dalam satu selektor. Bersama
 * `.idm-komentar__judul-balas`, ketiganya bertumpuk berurutan di halaman
 * artikel, tepat di bawah "Berita Terkait". Mengubah satu dan meninggalkan dua
 * lainnya menghasilkan tiga judul beruntun dengan dua bentuk berbeda.
 */
/* `:not(:where(…))`, bukan `:not(…):not(…)`, dan bedanya bukan gaya penulisan.
 *
 * `:not()` mewarisi spesifisitas argumennya, jadi dua rantai `:not` berkelas
 * menaikkan selektor ini menjadi (0,5,0) — cukup untuk MENGALAHKAN aturan mode
 * gelapnya sendiri di bawah, yang hanya (0,4,1). Akibatnya terlihat sebagai
 * satu garis yang tidak ikut berganti warna di mode gelap sementara dua
 * tetangganya berganti; tidak ada galat, dan penyebabnya tidak terbaca dari
 * aturan mana pun secara terpisah.
 *
 * `:where()` menyumbang spesifisitas NOL, sehingga selektor ini tetap (0,3,0)
 * dan urutan cascade kembali menjadi hal yang dapat dibaca. Ditemukan dengan
 * mengukur warna terhitung di mode gelap, bukan dari membaca CSS-nya. */
.idm-konten .idm-blok:not(:where(.idm-blok-sorotan, .idm-blok-tag--populer)) .idm-blok__kepala,
.idm-konten .idm-komentar__kepala,
.idm-konten .idm-komentar__judul-balas {
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 0;
  padding-left: 0;
}

/* Garisnya, sebagai `::after` — bukan elemen di markup.
 *
 * Ia murni ornamen: tidak dibaca, tidak diklik, dan tidak menambah makna bagi
 * pembaca layar. Menambahkannya ke `KepalaBlok` berarti setiap blok mengirim
 * satu elemen kosong ke setiap pembaca demi sebuah garis.
 *
 * ── Panjangnya TETAP, bukan mengisi sisa lebar ─────────────────────────────
 *
 * Versi pertama memakai `flex: 1` sehingga garisnya membentang sampai tepi
 * kolom — sekitar 560px di desktop. Hasilnya garis itu berhenti menjadi
 * pendamping judul dan berubah menjadi pembatas selebar halaman, dan judulnya
 * sendiri tenggelam di ujung kiri sebuah garis panjang.
 *
 * 120px kira-kira seperempat dari panjang sebelumnya, dan kira-kira selebar
 * satu judul pendek. Ia membaca sebagai aksen di samping judul, bukan sebagai
 * pemisah.
 *
 * `flex: 0 1 120px` — TIDAK tumbuh, tetapi boleh menyusut. Judul yang sangat
 * panjang di lebar ponsel akan menekan garisnya alih-alih mendorongnya keluar
 * tepi layar. `min-width: 0` yang mengizinkan penyusutan itu benar-benar
 * terjadi. */
.idm-konten
  .idm-blok:not(:where(.idm-blok-sorotan, .idm-blok-tag--populer))
  .idm-blok__kepala::after,
.idm-konten .idm-komentar__kepala::after,
.idm-konten .idm-komentar__judul-balas::after {
  content: "";
  flex: 0 1 120px;
  min-width: 0;
  height: 3px;
  background: var(--idm-warna-primer);
}

/* ── Bilah sisi: judul polos dengan garis rambut di bawahnya ────────────────
 *
 * Ornamen yang sama TIDAK dipakai di sini, dan alasannya lebar. Kolom sisi
 * hanya ~300px; sisa lebar setelah judul seperti "Terpopuler" tinggal sekitar
 * 180px, dan garis setebal 3px sepanjang itu terbaca sebagai patahan, bukan
 * sebagai ornamen. Yang lebih menentukan: kedua kolom berdampingan, dan
 * penanda yang identik membuat bilah sisi bersaing dengan kolom utama alih-alih
 * menopangnya.
 *
 * Tetapi polos tanpa apa pun juga salah. Blok di bilah sisi bertumpuk rapat —
 * Terpopuler, lalu Megapolitan, lalu Politik — dan tanpa penanda, batas antar
 * blok hanya ditandai jarak vertikal. Pada kolom yang panjang ketiganya
 * membaur. Garis rambut di BAWAH judul menutup itu tanpa memakai warna merek.
 *
 * ── Warnanya diturunkan dari `currentColor`, bukan dari token ──────────────
 *
 * `--idm-warna-garis` bernilai #e5e5e5 dan tidak punya padanan mode gelap;
 * dipakai apa adanya, garis ini menyala terang di atas permukaan #161616.
 * `color-mix` dengan `currentColor` membuatnya mengikuti warna teks yang
 * sedang berlaku — gelap di mode terang, terang di mode gelap — sehingga tidak
 * ada aturan mode gelap kedua yang harus dijaga tetap seiring.
 *
 * Baris `--idm-warna-garis` di atasnya adalah CADANGAN, bukan sisa: peramban
 * yang tidak mengenal `color-mix` membuang deklarasi kedua sebagai tidak sah
 * dan tetap mendapat garis.
 *
 * ── Garisnya menempel pada JUDUL, bukan pada kotak kepalanya ───────────────
 *
 * Versi pertama menaruh `border-bottom` di `.idm-blok__kepala`, yang sebuah
 * blok — jadi garisnya selalu selebar kolom sisi berapa pun panjang judulnya.
 * Itu membuatnya kembali menjadi pembatas, persis peran yang ingin dihindari
 * di kolom utama.
 *
 * Sekarang bordernya duduk di `.idm-blok__judul` yang di-`inline-block`,
 * sehingga panjangnya persis mengikuti katanya. `align-items: flex-start` di
 * kepala mencegah judul diregangkan kembali selebar kolom oleh flex. */
.idm-bilah-sisi .idm-blok:not(:where(.idm-blok-tag--populer)) .idm-blok__kepala {
  display: flex;
  align-items: flex-start;
  border-left: 0;
  padding-left: 0;
}

.idm-bilah-sisi .idm-blok:not(:where(.idm-blok-tag--populer)) .idm-blok__judul {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--idm-warna-garis);
  border-bottom-color: color-mix(in srgb, currentColor 18%, transparent);
}

/* Penanda tegak KEDUA pada judul komentar, khusus lebar ponsel.
 *
 * Di ponsel tema tidak memakai `border-left` untuk judul komentar melainkan
 * `::before` setinggi 20px — bentuk yang sama, dipasang dengan cara lain.
 * Melewatkannya menghasilkan judul yang membawa DUA penanda sekaligus: batang
 * tegak di kiri dan garis mendatar di kanan.
 *
 * Ditemukan dari potret di 390px, bukan dari membaca CSS-nya: `border-left`
 * pada elemen yang sama sudah 0, sehingga pemeriksaan yang hanya melihat
 * border melaporkan semuanya benar. */
.idm-konten .idm-komentar__kepala .idm-komentar__judul::before {
  content: none;
}

/* Mode gelap. Alasannya sama seperti label intisari: warna primer milik klien,
   dan primer gelap di atas permukaan gelap tidak terlihat sama sekali. Yang
   dibandingkan di sini bukan teks melainkan garis, tetapi ambang yang dipakai
   TokenWarna sudah lebih ketat daripada yang dibutuhkan sebuah garis. */
body.is-mode-gelap .idm-konten .idm-blok .idm-blok__kepala::after,
body.is-mode-gelap .idm-konten .idm-komentar__kepala::after,
body.is-mode-gelap .idm-konten .idm-komentar__judul-balas::after {
  background: var(--idm-warna-primer-atas-gelap);
}

@media (prefers-color-scheme: dark) {
  body.is-mode-otomatis .idm-konten .idm-blok .idm-blok__kepala::after,
  body.is-mode-otomatis .idm-konten .idm-komentar__kepala::after,
  body.is-mode-otomatis .idm-konten .idm-komentar__judul-balas::after {
    background: var(--idm-warna-primer-atas-gelap);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Teks di atas bilah berwarna klien
 *
 * Tema yang diporting dibuat untuk SATU situs berheader gelap, jadi teks di
 * atas header, navigasi, dan footer dikunci `#fff` di sebelas aturan. Produk
 * ini menjual kebebasan memilih warna — dan begitu klien memilih header putih,
 * taglinenya menjadi putih di atas putih dan tombol mode gelap lenyap.
 *
 * Terjadi sungguhan pada klien pertama, satu jam setelah layar pengaturan ada.
 *
 * Nilainya dihitung `TokenWarna.tsx` dari warna latar tiap bilah lewat
 * perbandingan rasio kontras WCAG, dan disuntikkan sebagai
 * `--idm-warna-teks-atas-{header,nav,footer}`. Bilah yang warnanya tidak
 * disetel klien tidak mendapat token itu sama sekali, sehingga `var(…, cadangan)`
 * di bawah jatuh ke perilaku tema yang selama ini benar.
 *
 * Ditulis di sini, bukan di tema.css: tema hasil generate dan akan tertimpa.
 * ────────────────────────────────────────────────────────────────────────── */

/* Token bilah dipetakan ke token "teks di atas bilah" yang sudah dipakai
   pelengkap ini untuk judul dan tagline. Satu tempat, bukan per-aturan. */
.idm-header {
  --idm-warna-teks-atas-gelap: var(--idm-warna-teks-atas-header, var(--idm-warna-teks-bilah));
  --idm-warna-teks-atas-gelap-lemah: var(
    --idm-warna-teks-atas-header-lemah,
    var(--idm-warna-teks-bilah-lemah)
  );
}

.idm-footer {
  --idm-warna-teks-atas-gelap: var(--idm-warna-teks-atas-footer, var(--idm-warna-teks-bilah));
  --idm-warna-teks-atas-gelap-lemah: var(
    --idm-warna-teks-atas-footer-lemah,
    var(--idm-warna-teks-bilah-lemah)
  );
}

/* Judul merek tanpa logo. Tema mewarnainya primer, yang bisa saja sewarna
   dengan latar header pilihan klien — nama situs yang hilang di setiap halaman
   adalah cacat yang paling mahal dari semuanya. */
.idm-header .idm-merek__judul a:not(:hover) {
  color: var(--idm-warna-teks-atas-header, var(--idm-warna-primer));
}

/* Tombol mode terang/gelap. Ikonnya digambar dengan `currentColor`, jadi satu
   deklarasi ini yang menentukan apakah ia terlihat sama sekali. */
.idm-header .idm-mode-tema {
  color: var(--idm-warna-teks-atas-header, var(--idm-warna-teks-bilah));
}

/* Pil ini punya latarnya SENDIRI (warna primer), jadi warnanya dihitung dari
   primer — bukan dari latar header. Memakai token header di sini salah dua kali:
   pada header putih dengan primer biru tua, teksnya menjadi gelap di atas biru
   tua. */
.idm-header__user ul li a {
  color: var(--idm-warna-teks-atas-primer, var(--idm-warna-teks-bilah));
}

/* Navigasi punya latarnya SENDIRI (`--idm-warna-latar-nav`), jadi tidak dapat
   ikut token header: klien yang memilih header putih dengan navigasi biru tua
   membutuhkan dua jawaban berbeda pada dua bilah yang bersentuhan. */
.idm-navigasi ul li a,
.idm-navigasi ul li .idm-navigasi__submenu li a,
.idm-navigasi ul li.is-baru::after,
.idm-navigasi__daftar .idm-blok__judul,
.idm-navigasi__daftar .idm-blok__teks,
.idm-navigasi__daftar ul.idm-navigasi__menu li a {
  color: var(--idm-warna-teks-atas-nav, var(--idm-warna-teks-bilah));
}

/* Ikon tombol mode terang/gelap.
 *
 * Tema menormalkannya dengan `filter: brightness(0) invert(1)` — dipaksa PUTIH
 * tanpa syarat — karena ikonnya data URI SVG yang sebagian strokenya dibakar
 * hitam dan sebagian memakai `currentColor`. Filter tidak dapat membaca warna,
 * jadi `color` di atas tidak menyentuhnya sama sekali: di header putih, ikonnya
 * putih di atas putih dan tombolnya tampak kosong.
 *
 * `invert(0)` berarti tetap hitam setelah `brightness(0)`, `invert(1)` berarti
 * putih. Angkanya dari TokenWarna, dan cadangannya 1 supaya bilah yang belum
 * disetel klien tetap berperilaku seperti tema. */
.idm-header .idm-mode-tema > * {
  filter: brightness(0) invert(var(--idm-ikon-header-invert, var(--idm-ikon-bilah-invert)));
}

/* Warna teks isi tidak boleh datang dari warna merek.
 *
 * Tema menyetel `body { color: var(--idm-warna-latar-nav-aktif) }` — warna
 * LATAR menu aktif dipakai sebagai warna TEKS seluruh halaman. Pada tema
 * aslinya nilai itu #333333, jadi kebetulan gelap dan terbaca, dan tidak ada
 * yang pernah menyadari asalnya.
 *
 * Runtuh begitu klien memilih warnanya sendiri. Menu aktif merah membuat
 * SETIAP paragraf, tanggal, ringkasan, dan keterangan gambar di seluruh situs
 * ikut merah — diukur di produksi: `body` berwarna rgb(230, 0, 0).
 *
 * Cacat yang sama persis dengan keluarga --idm-warna-teks-judul di bawah:
 * sebuah nilai yang dipilih untuk LATAR dipakai ulang sebagai warna TEKS.
 * Bedanya yang ini mengenai seluruh badan halaman, bukan judulnya saja.
 *
 * Warna baca memang bukan milik klien. Ia hanya mengikuti mode tampilan, dan
 * mode gelap sudah ditangani tema (`body.is-mode-gelap` dan
 * `body.is-mode-otomatis` di dalam prefers-color-scheme) dengan spesifisitas
 * yang tetap menang atas aturan di bawah ini. */
body {
  color: var(--idm-warna-teks);
}

/* Judul yang tema warnai dengan warna LATAR HEADER.
 *
 * Sepuluh aturan di tema memakai `color: var(--idm-warna-latar-header)` — judul
 * artikel, judul kartu di setiap blok, nama penulis, judul komentar, penomoran
 * halaman. Masuk akal pada tema aslinya (header #222, jadi judulnya gelap dan
 * senada merek), dan runtuh total begitu klien memilih header terang: SETIAP
 * judul di seluruh situs menjadi putih di atas kertas putih.
 *
 * `--idm-warna-teks-judul` dihitung TokenWarna: warna header dipakai selama
 * kontrasnya terhadap kertas >= 4,5:1, dan mundur ke warna teks biasa bila
 * tidak. Cadangannya warna header itu sendiri, supaya pemasangan yang belum
 * menyetel warna berperilaku persis seperti tema.
 *
 * Mode gelap TIDAK disentuh: tema sudah punya aturannya sendiri di sana, dan
 * spesifisitasnya (`body.is-mode-gelap …`) tetap menang atas yang di bawah. */
.idm-artikel__judul,
.idm-kredit__nama a,
.idm-kotak-penulis__nama,
.idm-halaman-404__deskripsi,
.idm-berbagi__label,
.idm-berbagi__judul,
.idm-blok-sosial__komentar,
.idm-komentar__judul-balas,
.idm-komentar__catatan,
.idm-komentar__moderasi,
.idm-pagination__index a,
.idm-blok-kisi .idm-blok-kisi__teks a,
.idm-blok-kisi-daftar__teks a,
.idm-blok-indeks .idm-blok-indeks__teks a,
.idm-blok-kolom__teks a,
.idm-blok-daftar__teks a,
.idm-blok-populer__teks a,
.idm-blok-terkait__item .idm-blok-terkait__teks a,
.idm-blok-geser .idm-blok-geser__teks a,
.idm-blok-topik__teks a,
.idm-blok-video .idm-blok-video__teks a {
  color: var(--idm-warna-teks-judul, var(--idm-warna-latar-header));
}

/* Penukaran logo mengikuti WARNA HEADER, bukan mode halaman.
 *
 * Tema menukar keduanya lewat `.is-mode-gelap`, dengan asumsi headernya ikut
 * gelap saat pembaca menyalakan mode gelap. Header di produk ini berwarna milik
 * klien dan TIDAK berubah antar-mode — jadi klien berheader putih mendapat logo
 * versi gelap (putih) di atas header yang tetap putih, dan logonya lenyap.
 *
 * `is-header-terang` dipasang Header.tsx bila latar headernya terang. Aturan
 * tema memakai `!important` pada penyembunyian, jadi pembatalannya harus
 * setara — dan spesifisitasnya lebih tinggi (0-3-0 melawan 0-2-0). */
.idm-header.is-header-terang .idm-header__merek .idm-merek__logo--terang {
  display: block !important;
}

.idm-header.is-header-terang .idm-header__merek .idm-merek__logo--gelap {
  display: none !important;
}

/* --- Ukuran logo -------------------------------------------------------- */

/* Tinggi logo header di desktop.
 *
 * Tema menyetel 35px di bawah ambang desktop dan 40px di atasnya. Klien pertama
 * meminta 60px: logonya memuat wordmark dan tagline dalam satu berkas, dan pada
 * 40px baris keduanya tidak terbaca.
 *
 * Hanya desktop yang diubah. Di lebar ponsel, header hanya setinggi 56px dan
 * logo 60px akan mendorong pencarian serta tombol mode keluar dari barisnya. */
@media (min-width: 1120px) {
  .idm-header__merek img {
    height: 60px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Bilah header: tanggal, pencarian, sosial, akun
 *
 * Tema hanya mengenal tiga bagian — merek, pencarian, dan "lainnya" yang berisi
 * pemilih mode. Tanggal, ikon sosial, dan tombol masuk adalah tambahan produk,
 * jadi gayanya milik kita. Yang SUDAH ada di tema tidak ditulis ulang:
 * `.idm-header__user` (pil berlatar primer) dipakai apa adanya.
 * ────────────────────────────────────────────────────────────────────────── */

/* Barisnya dibagi tiga, bukan disebar rata.
 *
 * `space-between` pada tiga anak berukuran sangat berbeda mendorong pencarian
 * menempel ke salah satu sisi setiap kali logo atau jumlah ikon berubah. Dengan
 * pencarian yang boleh tumbuh dan kedua sisi yang tidak, kotaknya selalu berada
 * di tengah ruang yang tersisa — berapa pun lebar logonya. */
@media (min-width: 1120px) {
  .idm-header__baris {
    gap: 20px;
  }

  .idm-header__merek {
    flex: 0 0 auto;
  }

  .idm-header__pencarian {
    flex: 1 1 auto;
    min-width: 180px;
    max-width: 420px;
  }

  .idm-header__lainnya {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

/* Tanggal hari ini.
 *
 * `min-width` memesan ruangnya sejak render pertama: isinya baru datang setelah
 * hidrasi (lihat TanggalHariIni.tsx), dan tanpa ruang terpesan seluruh baris
 * header bergeser saat tanggalnya muncul.
 *
 * Disembunyikan di bawah ambang desktop. Di lebar ponsel barisnya hanya cukup
 * untuk merek, pencarian, dan tombol menu; memaksa tanggal masuk ke sana
 * mendorong salah satunya keluar. */
.idm-header__tanggal {
  display: none;
}

@media (min-width: 1120px) {
  .idm-header__tanggal {
    display: block;
    flex: 0 0 auto;
    min-width: 170px;
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--idm-warna-teks-atas-header-lemah, var(--idm-warna-teks-bilah-lemah));
  }
}

/* Kotak pencarian berbentuk pil.
 *
 * Tema menyetel `border-radius: 10px` pada inputnya saja, sementara tombol cari
 * duduk di atasnya sebagai kotak persegi — sudut kanannya karena itu terlihat
 * terpotong. Yang diminta: membulat penuh di KEDUA sisi.
 *
 * 999px, bukan 50%: persentase pada elemen yang lebih lebar daripada tingginya
 * menghasilkan lengkung elips, bukan setengah lingkaran. */
.idm-pencarian__input {
  border-radius: 999px;
  /* Ruang untuk tombol cari yang duduk di dalamnya, supaya teks yang panjang
     tidak berjalan di bawah ikonnya. */
  padding-right: 44px;
}

/* Warna kotak pencarian mengikuti header.
 *
 * Tema menyetel latar `#0000003b` dan teks putih — benar di atas header gelap,
 * dan di atas header terang menghasilkan kotak abu-abu berisi teks putih yang
 * tidak terbaca. `color-mix` menurunkan warna teks header itu sendiri menjadi
 * latar tipis, jadi kontrasnya benar pada warna header apa pun. */
.idm-header__pencarian .idm-pencarian__input {
  color: var(--idm-warna-teks-atas-header, var(--idm-warna-teks-bilah));
  background: color-mix(
    in srgb,
    var(--idm-warna-teks-atas-header, var(--idm-warna-teks-bilah)) 8%,
    transparent
  );
  border-color: color-mix(
    in srgb,
    var(--idm-warna-teks-atas-header, var(--idm-warna-teks-bilah)) 22%,
    transparent
  );
}

.idm-header__pencarian .idm-pencarian__input::placeholder {
  color: var(--idm-warna-teks-atas-header-lemah, var(--idm-warna-teks-bilah-lemah));
}

.idm-header__pencarian .idm-pencarian__tombol {
  color: var(--idm-warna-teks-atas-header, var(--idm-warna-teks-bilah));
}

/* Ikon media sosial.
 *
 * 30px mengikuti ukuran lingkaran yang sudah dipakai blok sosial di sidebar,
 * supaya ikon yang sama tidak berukuran berbeda di dua tempat pada satu
 * halaman. Warnanya mengikuti header, bukan warna merek tiap jaringan: deretan
 * tujuh warna berbeda di sebelah tombol masuk membuat headernya ramai, dan
 * ikon merek berwarna penuh baru masuk akal di blok sosial yang memang
 * mengajak mengikuti. */
.idm-header__sosial {
  display: flex;
  align-items: center;
  gap: 2px;
}

.idm-header__sosial-tautan {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--idm-warna-teks-atas-header, var(--idm-warna-teks-bilah));
  transition: background 0.15s;
}

.idm-header__sosial-tautan:hover {
  background: color-mix(
    in srgb,
    var(--idm-warna-teks-atas-header, var(--idm-warna-teks-bilah)) 12%,
    transparent
  );
}

.idm-header__sosial-tautan svg {
  width: 17px;
  height: 17px;
}

/* Di bawah ambang desktop, sosial dan akun pindah ke laci menu: barisnya tidak
   cukup lebar untuk keduanya di samping pencarian. */
@media (max-width: 1119px) {
  .idm-header__sosial,
  .idm-header__user {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Halaman akun pembaca
 *
 * Tema tidak punya satu aturan pun untuk ini — instalasi WordPress sumber
 * memakai halaman masuk bawaan WordPress, yang tidak ikut tertangkap. Seluruh
 * gayanya karena itu milik produk, dan sengaja ditahan seminimal mungkin:
 * halaman ini bukan tempat berlama-lama.
 * ────────────────────────────────────────────────────────────────────────── */

.idm-akun {
  max-width: 380px;
  padding-top: 40px;
  padding-bottom: 60px;
}

.idm-akun__judul {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  color: var(--idm-warna-teks-judul, var(--idm-warna-teks));
}

.idm-akun__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.idm-akun__medan {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--idm-warna-teks-lemah);
}

.idm-akun__medan input {
  height: 42px;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--idm-warna-teks);
  background: var(--idm-warna-latar);
  border: 1px solid var(--idm-warna-garis);
  border-radius: 8px;
}

.idm-akun__medan input:focus {
  outline: none;
  border-color: var(--idm-warna-primer);
}

.idm-akun__tombol {
  height: 42px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--idm-warna-teks-atas-primer, var(--idm-warna-teks-bilah));
  background: var(--idm-warna-primer);
  border: 0;
  border-radius: 8px;
}

/* Tombol yang berupa TAUTAN: "Masuk dengan <gerbang>" dan "Daftar di
   <gerbang>". Keduanya navigasi tingkat atas ke gerbang Connect, bukan kiriman
   formulir, jadi elemennya <a> — dan <a> tidak memusatkan teksnya sendiri. */
.idm-akun__tombol--tautan {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.idm-akun__tombol:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Masuk dengan Google sengaja TIDAK memakai warna merek Google.
   Pedoman mereknya menuntut bentuk dan warna tombol yang tepat, dan tombol
   yang menyerupainya tanpa mematuhinya lebih buruk daripada tombol netral. */
.idm-akun__google {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  font-size: 14px;
  font-weight: 500;
  color: var(--idm-warna-teks);
  border: 1px solid var(--idm-warna-garis);
  border-radius: 8px;
}

.idm-akun__alih {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--idm-warna-teks-lemah);
}

.idm-akun__alih a {
  color: var(--idm-warna-primer);
  font-weight: 600;
}

.idm-akun__galat {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 8px;
  color: var(--idm-warna-galat);
  background: var(--idm-warna-galat-lemah);
}

.idm-akun__pesan {
  margin: 0;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 8px;
  color: var(--idm-warna-teks);
  background: var(--idm-warna-latar-lemah);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Permukaan yang tema gambari TEKS TERANG
 *
 * Empat aturan tema memakai `--idm-warna-latar-header` sebagai LATAR, bukan
 * sebagai teks: panel judul di blok video, blok sorotan, dan dua kelompok
 * permukaan mode gelap/otomatis. Semuanya mengandalkan asumsi yang sama —
 * headernya #222, jadi permukaannya gelap dan teks putih di atasnya terbaca.
 *
 * Klien yang memilih header putih mendapat panel PUTIH berisi teks PUTIH.
 * Terjadi dua kali, dan keduanya dilaporkan: panel judul di blok video, dan
 * kartu terpopuler di mode gelap.
 *
 * `--idm-warna-permukaan-gelap` dihitung TokenWarna: warna header selama teks
 * putih terbaca di atasnya, dan abu gelap netral begitu tidak. Header tetap
 * milik klien — yang dijamin hanya permukaan yang memang harus gelap.
 *
 * Cadangannya warna header itu sendiri, supaya pemasangan yang belum menyetel
 * warna berperilaku persis seperti tema.
 * ────────────────────────────────────────────────────────────────────────── */

.idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks,
.idm-blok-sorotan {
  background: var(--idm-warna-permukaan-gelap, var(--idm-warna-latar-header));
}

/* Mode GELAP: permukaan yang sama, tetapi selektor tema untuk mode ini lebih
 * spesifik daripada aturan di atas, jadi panel video harus ikut disebut ulang
 * di sini — kalau tidak, aturan tema yang menang dan panelnya kembali putih.
 *
 * Selektor tema untuk keadaan ini panjang, belasan kelas. Yang disebut ulang
 * hanya yang benar-benar tampil sebagai kartu berlatar; sisanya (input
 * formulir, popup) sudah berlatar gelap dari aturan lain. */
body.is-mode-gelap .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks,
body.is-mode-gelap .idm-blok-populer__item,
body.is-mode-gelap .idm-blok-populer__teks,
body.is-mode-gelap .idm-blok-kisi-daftar__item,
body.is-mode-gelap .idm-blok-terkait__item,
body.is-mode-gelap .idm-blok-topik__item,
body.is-mode-gelap .idm-blok-sosial,
body.is-mode-gelap .idm-blok-sosial__jaringan,
body.is-mode-gelap .idm-pagination,
body.is-mode-gelap .idm-berbagi__popup {
  background: var(--idm-warna-permukaan-gelap, var(--idm-warna-latar-header));
}

/* Mode OTOMATIS hanya gelap bila SISTEM pembaca gelap.
 *
 * Kelas `is-mode-otomatis` menempel di body sepanjang waktu — itu bawaannya —
 * jadi aturan tanpa media query di sini akan menggelapkan kartu terpopuler
 * pada mode terang juga, lengkap dengan teks gelap di atasnya. Tema
 * membungkusnya di `prefers-color-scheme: dark`, dan pembungkus itu bagian
 * dari maknanya, bukan pemanis. */
@media (prefers-color-scheme: dark) {
  body.is-mode-otomatis .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks,
  body.is-mode-otomatis .idm-blok-populer__item,
  body.is-mode-otomatis .idm-blok-populer__teks,
  body.is-mode-otomatis .idm-blok-kisi-daftar__item,
  body.is-mode-otomatis .idm-blok-terkait__item,
  body.is-mode-otomatis .idm-blok-topik__item,
  body.is-mode-otomatis .idm-blok-sosial,
  body.is-mode-otomatis .idm-blok-sosial__jaringan,
  body.is-mode-otomatis .idm-pagination,
  body.is-mode-otomatis .idm-berbagi__popup {
    background: var(--idm-warna-permukaan-gelap, var(--idm-warna-latar-header));
  }
}

/* Panel judul blok video: warnanya milik klien, teksnya menyesuaikan.
 *
 * Aturan permukaan gelap di atas sudah membuatnya terbaca, tetapi memaksanya
 * gelap membuang pilihan warna klien. Yang benar: pakai warnanya apa adanya —
 * bawaannya warna MENU, bukan hitam — dan hitung warna teks di atasnya.
 *
 * Disebut ulang di ketiga keadaan mode karena selektor tema untuk mode gelap
 * dan otomatis lebih spesifik daripada yang biasa; tanpa itu panelnya kembali
 * ke permukaan gelap begitu pembaca menyalakan mode gelap. */
.idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks,
body.is-mode-gelap .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks,
body.is-mode-otomatis .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks {
  background: var(--idm-warna-latar-video, var(--idm-warna-latar-nav));
}

.idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks a,
.idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks h2,
.idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__waktu {
  color: var(--idm-warna-teks-atas-video, var(--idm-warna-teks-bilah));
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Hero-2 di desktop: gambar mengikuti tinggi panel judulnya
 *
 * ── Cacat yang diperbaiki, dan kenapa ia lolos begitu lama ────────────────
 *
 * Tema mengunci gambar butir pertama sebagai kotak berasio tetap:
 * `width: 60%; padding-bottom: 34%; height: 0`. Persentase padding dihitung
 * dari LEBAR wadah, jadi tingginya selalu 247,5px pada kolom 728px — berapa
 * pun ukuran berkas gambarnya. Panelnya, sebaliknya, tumbuh mengikuti judul
 * sampai enam baris.
 *
 * Begitu judulnya melewati empat baris, panel menjadi lebih tinggi daripada
 * gambar dan item mengambil yang tertinggi; gambar meninggalkan celah kosong
 * di bawahnya. Dilaporkan dari PRODUKSI, dan diukur ulang di lokal dengan
 * memasang judul produksi ke halaman:
 *
 *   judul 49 karakter (data contoh)  item 748x248  gambar 248  panel 248  rata
 *   judul 87 karakter (produksi)     item 748x287  gambar 248  panel 287  +39
 *   judul 124 karakter (produksi)    item 748x287  gambar 248  panel 287  +39
 *
 * Ukuran berkasnya sama sekali tidak terlibat: materi produksi 768x432 sudah
 * 16:9, dan kotaknya 437x248 juga 16:9. Yang membuatnya tidak pernah terlihat
 * selama pengembangan adalah data contoh — judul seed panjangnya 49 karakter,
 * yang KEBETULAN menghasilkan panel setinggi 248px, sama persis dengan
 * gambarnya. Simetris karena kebetulan, bukan karena aturan.
 *
 * ── Bentuk perbaikannya ───────────────────────────────────────────────────
 *
 * `align-items: stretch` membuat gambar mengisi tinggi baris flex, dan
 * `<img>` di dalamnya sudah `object-fit: cover` sehingga yang bertambah adalah
 * pangkasan, bukan peregangan yang menggepengkan foto.
 *
 * `aspect-ratio` tetap diberikan sebagai LANTAI. Tanpa itu, kotak gambar tidak
 * punya tinggi sendiri sama sekali — isinya `<img>` yang absolut, jadi ia
 * menyumbang nol pada penentuan tinggi baris — dan pada judul yang sangat
 * pendek seluruh hero ikut memendek mengikuti panel.
 *
 * Angkanya 30/17, bukan 16/9: itu bentuk sederhana dari pasangan 60% dan 34%
 * milik tema, sehingga tinggi pada judul pendek tetap 247,5px persis seperti
 * sebelumnya. Memakai 16/9 akan menggeser hero 1,8px tanpa ada yang memintanya.
 */
@media (min-width: 1120px) {
  .idm-blok-video .idm-blok-video__item:first-child {
    align-items: stretch;
  }

  .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__gambar {
    height: auto;
    padding-bottom: 0;
    aspect-ratio: 30 / 17;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Tombol menu (hamburger) di lebar ponsel
 *
 * Dua hal di dalamnya dikunci PUTIH oleh tema, dan keduanya lenyap begitu klien
 * memilih header terang — di ponsel, itu berarti tidak ada cara membuka menu
 * sama sekali. Cacat yang paling mahal dari seluruh keluarga ini: yang hilang
 * bukan hiasan melainkan satu-satunya jalan ke navigasi.
 * ────────────────────────────────────────────────────────────────────────── */

/* 1. Tiga garisnya. Digambar sebagai latar pseudo-elemen, jadi `color` tidak
      menyentuhnya sama sekali. */
.idm-header .idm-navigasi__ikon-menu::after,
.idm-header .idm-navigasi__ikon-menu::before,
.idm-header .idm-navigasi__ikon-menu > i {
  background: var(--idm-warna-teks-atas-header, var(--idm-warna-teks-bilah));
}

/* 2. Lencana kaca pembesar yang menumpang di pojok tombol.
 *
 * Ia satu elemen berisi DUA hal: cakram berwarna header (`background-color`)
 * dan ikon ber-stroke putih (`background-image`). Filter tidak dapat memisahkan
 * keduanya — `invert` yang membuat ikonnya gelap juga menghitamkan cakramnya.
 *
 * Karena itu yang ditukar adalah gambarnya, bukan warnanya. Bentuknya SAMA
 * persis dengan milik tema (`reference` -> tema.css), hanya strokenya gelap,
 * dan hanya dipakai saat `is-header-terang` dipasang Header.tsx. */
.idm-header.is-header-terang .idm-navigasi__tombol-menu::before {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6.25' cy='6.25' r='5.25' stroke='%231a1a1a' stroke-width='1.8'/%3E%3Cpath d='m13 13-1.5-1.5' stroke='%231a1a1a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Perataan teks dan kotak intisari
 *
 * Keduanya lahir dari isi artikel, bukan dari tema. Perender API memancarkan
 * kelasnya dari daftar tertutup — tidak ada nilai CSS yang berasal dari
 * ketikan penulis.
 * ────────────────────────────────────────────────────────────────────────── */

.idm-artikel__body .idm-rata-center {
  text-align: center;
}

.idm-artikel__body .idm-rata-right {
  text-align: right;
}

/* Rata kanan-kiri tanpa pemenggalan kata menghasilkan celah lebar antar kata
   pada kolom sempit. `hyphens` menutup itu di peramban yang mendukungnya, dan
   diabaikan dengan aman di yang tidak. */
.idm-artikel__body .idm-rata-justify {
  text-align: justify;
  hyphens: auto;
}

/* Poin-poin di kepala artikel.
 *
 * Labelnya digambar di sini, bukan disimpan sebagai isi dokumen: dengan begitu
 * ia tidak dapat terhapus tanpa sengaja, tidak dapat berbeda antar artikel, dan
 * tidak perlu dirawat di dua tempat.
 *
 * ── Tanpa latar, tanpa garis tepi, tanpa bingkai ──────────────────────────
 *
 * Versi sebelumnya memberinya latar abu dan garis aksen di tepi kiri. Alasannya
 * masuk akal saat ditulis — menandai bagian ini sebagai satu kesatuan — tetapi
 * hasilnya justru sebaliknya: sebuah kotak berlatar di kepala artikel terbaca
 * sebagai sisipan, dan sisipan di posisi itu terbaca sebagai iklan. Persis yang
 * ingin dihindari garis aksennya.
 *
 * Yang menandainya sekarang adalah BUTIRNYA sendiri. Daftar berbulir sudah
 * merupakan bentuk yang berbeda dari paragraf di sekitarnya; ia tidak butuh
 * wadah untuk terbaca sebagai ringkasan. Yang tersisa hanya label kecil
 * berwarna primer di atasnya.
 *
 * Akibat sampingannya disengaja: bagian ini kini sejajar dengan kolom teks
 * artikel, bukan menjorok di dalam kotaknya sendiri.
 *
 * ── Jarak ATAS tetap ada, dan itu bukan hiasan ────────────────────────────
 *
 * Bagian ini hampir selalu menjadi hal pertama di tubuh artikel, tepat di bawah
 * gambar utama. Tanpa jarak, butir pertamanya menempel pada tepi bawah gambar
 * dan keduanya terbaca sebagai satu objek — paling terasa di lebar ponsel,
 * tempat gambarnya membentang selebar layar. Tanpa latar, jarak inilah
 * SATU-SATUNYA yang memisahkannya; dulu padding kotaknya ikut membantu. */
.idm-artikel__body .idm-intisari {
  margin: 26px 0 30px;
}

/* Label. Sebuah paragraf sungguhan di dalam dokumen, bukan `::before`:
   namanya milik klien dan disunting per artikel, jadi teksnya tidak boleh
   tinggal di CSS. Yang tersisa di sini hanya rupanya.

   ── Kapital penuh, dan lebih besar dari badan artikel ────────────────────

   Diminta klien, dan itu MEMBALIK keputusan sebelumnya. Yang tertulis di sini
   dulu berbunyi sebaliknya: huruf besar hanya di awal kata, dengan alasan
   kapital penuh mengubah nama pilihan redaksi menjadi label sistem. Alasan itu
   berlaku ketika labelnya kecil — 12px, lebih kecil dari badan artikel, tempat
   ia memang berperan sebagai keterangan.

   Peran itu yang berubah. Pada 18px, di atas badan 16px, label ini berhenti
   menjadi keterangan dan menjadi JUDUL bagian: hal pertama yang dibaca di
   kepala artikel, bukan penanda yang menempel pada sesuatu yang lain. Kapital
   penuh adalah bentuk yang benar untuk peran itu, dan ukurannya yang membuatnya
   terbaca sebagai pilihan, bukan sebagai cap mesin.

   `letter-spacing` kembali bersamanya, dan bukan sebagai hiasan: rangkaian
   kapital kehilangan siluet naik-turun yang dipakai mata untuk memisahkan
   kata, dan perenggangan tipis inilah yang menggantikannya. */
.idm-artikel__body .idm-intisari__label {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--idm-warna-primer);
}

.idm-artikel__body .idm-intisari ul {
  margin: 0;
  padding-left: 20px;
}

.idm-artikel__body .idm-intisari li {
  margin: 0 0 8px;
}

.idm-artikel__body .idm-intisari li:last-child {
  margin-bottom: 0;
}

/* Paragraf di dalam butir tidak boleh membawa jarak paragraf biasa: satu poin
   selalu satu baris pemikiran, bukan alinea. */
.idm-artikel__body .idm-intisari li p {
  margin: 0;
}

/* Mode gelap: hanya LABELNYA yang perlu diurus.
 *
 * Dulu bagian ini juga menukar latar dan garis tepinya, karena latar terang di
 * dalam artikel bermode gelap membuat kotaknya menyala seperti iklan. Keduanya
 * sudah tidak ada, jadi aturannya ikut dicabut — bukan dibiarkan sebagai
 * deklarasi yang tidak menyentuh apa pun.
 *
 * Yang tersisa tetap wajib: warna primer milik klien, dan primer gelap di atas
 * permukaan gelap tidak terbaca sama sekali. TokenWarna yang memutuskan
 * nilainya — angka itu sudah lolos rasio kontras. */
body.is-mode-gelap .idm-artikel__body .idm-intisari__label {
  color: var(--idm-warna-primer-atas-gelap);
}

@media (prefers-color-scheme: dark) {
  body.is-mode-otomatis .idm-artikel__body .idm-intisari__label {
    color: var(--idm-warna-primer-atas-gelap);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Bilah kategori di lebar ponsel
   ══════════════════════════════════════════════════════════════════════════

   Tema sudah menyiapkan barisnya sebagai deret yang dapat digeser — `.idm-navigasi
   ul` membawa `overflow-x: auto`, `flex-flow: nowrap`, dan butirnya `white-space:
   nowrap`. Yang tidak pernah bekerja adalah penggulirannya, dan sebabnya satu
   baris yang tidak ada: <ul> berada di dalam <nav> yang `display: flex`, sehingga
   ia menjadi item flex. Item flex bawaannya `min-width: auto` — ia menolak
   menyusut di bawah lebar isinya, jadi ia MELEBAR melewati layar alih-alih
   menggulir, dan `overflow-x` tidak pernah punya apa pun untuk digulirkan.

   Gejalanya dulu terbaca sebagai "kategorinya terpotong", dan jawabannya waktu
   itu menyembunyikan seluruh bilah. Yang benar adalah membuat <ul>-nya boleh
   menyusut. */
@media (max-width: 1119px) {
  .idm-navigasi nav {
    /* Tanpa ini <nav> sendiri yang melebar, dan yang tergulir jadi halamannya. */
    min-width: 0;
    flex: 1 1 auto;
    /* Margin negatif milik tema membuat bilah menabrak tepi wadah. Di ponsel
       itu justru yang diinginkan: butir pertama rata dengan tepi layar seperti
       pada portal berita lain. */
    margin: 0;
  }

  .idm-navigasi nav > ul {
    min-width: 0;
    flex: 1 1 auto;
    height: auto;
    padding: 0 4px;
    /* Gulir sentuh yang berhenti pada butir, bukan di tengah kata. */
    scroll-snap-type: x proximity;
    scroll-padding-left: 12px;
    -webkit-overflow-scrolling: touch;
    /* Bilah gulir disembunyikan, bukan dimatikan: yang menyatakan "masih ada
       lagi di kanan" adalah butir yang terpotong di tepi, bukan batang abu
       setebal 8px yang memakan tinggi bilah. */
    scrollbar-width: none;
  }

  .idm-navigasi nav > ul::-webkit-scrollbar {
    display: none;
  }

  .idm-navigasi nav > ul > li {
    scroll-snap-align: start;
  }

  /* Tinggi bilah mengikuti isinya. Tema menyetel `.idm-navigasi { height: 38px }`
     sementara <ul> di dalamnya 55px — selisih 17px yang membuat butir terakhir
     terpotong di bawah. */
  .idm-navigasi {
    height: auto;
  }

  .idm-navigasi ul li {
    height: 40px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Kaki halaman — DUA bentuk
   ══════════════════════════════════════════════════════════════════════════

   Ponsel   satu kolom terpusat: logo, alamat, ikon sosial, tautan.
   Desktop  merek (logo dan alamat) di kiri, sisanya di kanan.

   Bentuk kedua adalah rancangan tema, dan sempat dibuang seluruhnya: dengan
   kolom kiri yang hanya berisi logo, pembagian 30%/70% menyisakan ruang kosong
   besar di bawah logo sementara isi kanan berdesakan. Sejak alamat redaksi
   dapat dipasang sebagai blok, kolom kiri punya isi — dan pembagian itu menjadi
   benar lagi. Diminta klien 30 Agustus 2026.

   Urutan elemennya SAMA di kedua bentuk. Yang berubah hanya arah flexnya, jadi
   pembaca layar mendapat urutan baca yang sama di lebar mana pun. */
.idm-footer__kotak {
  display: flex;
  gap: 16px;
}

.idm-footer__zona {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 32px;
}

/* Zona yang belum diisi redaksi tidak boleh meninggalkan jarak. Tanpa ini kaki
   situs baru punya dua rongga kosong yang terlihat seperti kerusakan. */
.idm-footer__zona:empty {
  display: none;
}

.idm-footer__merek .idm-merek__judul {
  margin: 0;
}

/* Alamat berdiri di bawah logo, bukan menempel padanya. Berlaku di kedua
   bentuk kaki. */
.idm-footer__merek .idm-footer__zona:not(:empty) {
  margin-top: 12px;
}

/* `.idm-footer__lainnya` tidak lagi disebut: pembungkus itu dicabut bersama
   pemindahan menu kaki ke barisnya sendiri. Selektor yang tidak pernah cocok
   lagi dihapus, bukan ditinggalkan — aturan mati membuat pembaca berikutnya
   menduga ada elemen yang sebenarnya sudah tidak ada. Aturan tema untuk kelas
   itu masih tersisa di tema.css dan memang dibiarkan: berkas itu hasil
   generate, dan aturannya kini tidak cocok dengan apa pun. */
.idm-footer__zona .idm-blok {
  margin-bottom: 0;
}

/* Alamat redaksi ditulis berbaris, dan pergantian barisnya harus bertahan.
   Dikerjakan CSS, bukan dengan menerjemahkan teks menjadi <br> — yang terakhir
   berarti markup dari medan formulir, dan medan formulir tidak boleh menjadi
   jalur markup. */
/* 1,3 — lebih rapat daripada teks bacaan. Isinya alamat dan kontak: baris
   pendek yang dibaca sebagai SATU kesatuan, bukan alinea. Pada tinggi baris
   tubuh artikel, lima baris alamat merenggang sampai terbaca seperti lima hal
   yang tidak berhubungan. */
.idm-blok-teks .idm-blok__teks {
  line-height: 1.3;
}

/*
  Barisnya inline-flex, dan itu yang membuat ikon ikut ke tengah.

  Blok ini dipakai di kaki halaman (terpusat di ponsel, rata kiri di desktop),
  di drawer menu, dan kelak di sidebar — tiga konteks dengan perataan berbeda.
  Sebagai elemen blok, barisnya akan selalu selebar wadahnya dan ikonnya
  menempel di tepi kiri di mana pun. Sebagai inline-flex, ia selebar isinya dan
  ikut `text-align` wadahnya, tanpa satu aturan per konteks pun.
*/
.idm-blok-teks__baris {
  margin: 0;
}

.idm-blok-teks__isi {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-align: left;
}

/* Jarak antar kelompok datang dari baris kosong yang diketik redaksi — alamat,
   lalu kontak. Baris kosong itu TIDAK dirender sebagai baris; ia menjadi jarak
   di atas baris berikutnya. */
.idm-blok-teks__baris--berjarak {
  margin-top: 10px;
}

/* Ikon sedikit lebih kecil daripada tinggi barisnya supaya tidak menonjol dari
   teks, dan tidak pernah menyusut ketika barisnya panjang. */
.idm-blok-teks__ikon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Hak cipta menutup kaki, dipisah garis tipis dan bukan lagi menempel di bawah
   logo. Garisnya dari warna teks kaki itu sendiri supaya ikut benar pada kaki
   terang maupun gelap. */
/* Menu kaki: barisnya sendiri, terpusat, tepat di atas hak cipta.
 *
 * `justify-content` disebut karena tema menyusun daftar ini sebagai flex rata
 * kiri — benar ketika ia salah satu kolom di antara zona, salah begitu ia
 * menempati barisnya sendiri. Tanpa ini, menunya terpusat sebagai KOTAK tetapi
 * butirnya tetap menumpuk di tepi kiri kotak itu.
 *
 * `flex-wrap` supaya menu panjang turun ke baris kedua alih-alih mendorong
 * lebar kaki halaman. Di lebar ponsel aturan tersendiri sudah menyetelnya;
 * di sini ia berlaku untuk semua lebar, karena jumlah butirnya milik redaksi
 * dan tidak ada lebar yang aman diasumsikan. */
.idm-footer__menu {
  width: 100%;
  margin: 8px 0 0;
}

.idm-footer__menu .idm-navigasi__menu {
  justify-content: center;
  flex-wrap: wrap;
}

/* Hak cipta. TANPA garis pemisah — dicabut atas permintaan klien; yang
   memisahkannya dari menu di atasnya sekarang jarak, bukan guratan.
   `padding-top` tetap ada dan justru dinaikkan: ia yang menggantikan peran
   garis itu sebagai pemisah. */
.idm-footer__hak-cipta {
  width: 100%;
  margin: 4px 0 0;
  padding-top: 16px;
  opacity: 0.75;
  font-size: 12px;
  text-align: center;
}

/* ── Ponsel: satu kolom terpusat ────────────────────────────────────────── */
@media (max-width: 1119px) {
  .idm-footer__kotak {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
  }

  .idm-footer__merek,
  .idm-footer__isi {
    width: 100%;
  }

  .idm-footer__isi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  /* Logonya `display: block` — aturan tema yang sama dipakai logo header,
     tempat ia memang rata kiri. `text-align: center` tidak dapat menyentuh
     elemen blok, jadi yang memusatkannya harus margin otomatis. */
  .idm-footer__merek .idm-merek__logo {
    display: block;
    margin-inline: auto;
  }

  .idm-footer__zona {
    justify-content: center;
    width: 100%;
  }

  /* Tema merata-kanankan blok, ikon sosial, dan menu kaki. Ketiganya
     dikembalikan ke tengah. */
  .idm-footer .idm-blok-sosial,
  .idm-footer .idm-blok-sosial__kotak,
  .idm-footer .idm-navigasi__menu,
  .idm-footer .idm-blok-aplikasi .idm-blok__isi {
    justify-content: center;
  }

  .idm-footer__zona .idm-blok {
    text-align: center;
  }

  /* Deret tautan kaki membungkus, tidak menggulir. Barisnya pendek dan jarang
     dibaca; menggulirnya berarti separuh tautan tidak pernah terlihat. */
  .idm-footer .idm-navigasi__menu {
    flex-wrap: wrap;
  }
}

/* ── Desktop: merek di kiri, sisanya di kanan ───────────────────────────── */
@media (min-width: 1120px) {
  .idm-footer__kotak {
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
  }

  .idm-footer__merek {
    max-width: 38%;
  }

  .idm-footer__isi {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    max-width: 58%;
  }

  .idm-footer__zona {
    justify-content: flex-end;
  }

  .idm-footer__merek .idm-footer__zona {
    justify-content: flex-start;
  }

  .idm-footer__merek .idm-blok {
    text-align: left;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Drawer menu ponsel
   ══════════════════════════════════════════════════════════════════════════

   Panelnya memakai warna MENU, bukan warna header.

   Tema menyetel `.idm-menu-sisi { background: var(--bg-header) }` dengan asumsi
   headernya gelap — asumsi yang berlaku pada satu situs yang jadi asal tema.
   Klien produk ini memilih warna headernya sendiri, dan klien pertama memilih
   putih: panelnya menjadi putih sementara SATU-SATUNYA bagian yang berwarna
   adalah strip daftar kategori di tengahnya. Sisa layar kosong putih.

   Yang lain di dalam drawer sudah ditulis tema untuk latar berwarna — teks
   putih, lingkaran ikon sosial tembus pandang, blok teks putih. Jadi yang salah
   memang hanya satu deklarasi: latar panelnya. Warna menu dipilih karena drawer
   ini MEMANG menu — ia dan bilah kategori adalah satu hal yang sama, hanya beda
   bentuk. */
@media (max-width: 1119px) {
  .idm-menu-sisi {
    background: var(--idm-warna-latar-nav);
    color: var(--idm-warna-teks-atas-nav, var(--idm-warna-teks-bilah));
  }

  /* Strip berwarna di sekeliling daftar tidak lagi diperlukan: seluruh panel
     sudah berwarna. */
  .idm-navigasi__daftar ul.idm-navigasi__menu {
    background: transparent;
    padding: 6px 10px 14px;
  }

  .idm-navigasi__daftar ul.idm-navigasi__menu li a {
    padding: 9px 10px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  /* Medan pencarian di atas latar menu. Tema memberinya warna menu juga, jadi
     di dalam panel berwarna sama ia lenyap sepenuhnya. */
  .idm-menu-sisi .idm-pencarian__input {
    /* Putih tembus pandang: selubung netral di atas warna apa pun yang dipilih
       klien, bukan warna merek. */
    background: rgb(255 255 255 / 14%); /* izin-white-label: selubung netral */
    border-color: rgb(255 255 255 / 24%); /* izin-white-label: selubung netral */
  }

  /* Ikon sosial, tombol aplikasi, dan teks blok terpusat — susunan yang diminta
     klien dan yang dipakai contoh acuannya. Tema merata-kirikan ketiganya. */
  .idm-navigasi__daftar .idm-blok-sosial,
  .idm-navigasi__daftar .idm-blok-sosial__kotak,
  .idm-navigasi__daftar .idm-blok.idm-blok-aplikasi .idm-blok__isi {
    align-content: center;
    justify-content: center;
  }

  /* Judul blok sosial adalah wadah FLEX di tema (`justify-content: flex-start`),
     jadi `text-align` tidak menyentuhnya sama sekali — judulnya tetap menempel
     di tepi kiri layar tanpa satu piksel pun jarak. Yang memusatkannya harus
     sumbu utama flexnya sendiri. */
  .idm-navigasi__daftar .idm-blok-sosial .idm-blok-sosial__judul {
    justify-content: center;
    padding-inline: 15px;
  }

  .idm-navigasi__daftar .idm-blok__teks {
    text-align: center;
  }

  /* Isi drawer berhenti di atas tepi bawah layar, bukan menempel padanya. */
  .idm-menu-sisi__kotak {
    padding-bottom: 32px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Logo header di lebar ponsel
   ══════════════════════════════════════════════════════════════════════════

   Tema menyetel logo ponsel 35px sementara desktop 60px. Selisih itu masuk akal
   pada tema aslinya — logonya wordmark pendek, dan 35px sudah terbaca. Logo
   klien produk ini membawa lambang DAN teks dua baris di dalam satu berkas,
   sehingga pada 35px teks di bawah lambangnya menjadi garis abu yang tidak
   terbaca sama sekali.

   Disamakan dengan desktop: 60px.

   Tingginya `max-height`, bukan `height`. Logo klien boleh punya rasio apa pun,
   dan pada layar 320px logo selebar 257px akan mendorong tombol menu keluar
   layar. Dengan batas atas, peramban mengecilkannya sendiri secara proporsional
   ketika ruangnya memang tidak ada — dan tidak pernah memampatkannya. */
@media (max-width: 1119px) {
  :root {
    /* Tinggi baris merek. Dipakai dua kali, dan itu sebabnya ia variabel:
       drawer menu digantung tepat di bawah header, dan angka yang ditulis dua
       kali akan menyimpang pada perubahan berikutnya — drawer yang menutupi
       separuh logo, tanpa satu galat pun. */
    --idm-tinggi-merek-ponsel: 72px;
  }

  .idm-header__merek {
    height: var(--idm-tinggi-merek-ponsel);
  }

  .idm-header__merek img {
    height: auto;
    max-height: 60px;
    max-width: 100%;
  }

  /* +1px: garis bawah pada `.idm-wadah` header, yang ikut menambah tingginya. */
  .idm-menu-sisi {
    top: calc(var(--idm-tinggi-merek-ponsel) + 1px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Label kategori pada kartu
   ══════════════════════════════════════════════════════════════════════════ */

/*
  Lencana kategori sorotan: DI ATAS judul, bukan melayang di pojok gambar.

  Tema memasangnya `position: absolute; top: 15px; left: 15px` — melayang di
  sudut gambar, jauh dari judul yang dijelaskannya. Yang diminta klien adalah
  tepat di atas judul, di dalam lapisan gelap yang sama, sehingga rubrik dan
  judul terbaca sebagai satu kesatuan.

  Rupanya ditulis di sini, tidak diwarisi tema, dan itu bukan pilihan gaya:
  aturan tema untuk lencana ini seluruhnya berada di dalam media query PONSEL.
  Dipakai apa adanya, lencananya berlatar warna primer di ponsel dan tanpa latar
  sama sekali di desktop — terbaca sebagai teks putih yang menggantung di atas
  gambar.
*/
.idm-blok-sorotan__teks .idm-blok-sorotan__kategori {
  position: static;
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 5px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  background: var(--idm-warna-primer);
  /* Warna teksnya DIHITUNG dari warna primer klien, bukan dipatok putih.
     Tema mematoknya #fff karena primer situs asalnya gelap; klien yang memilih
     primer terang mendapat lencana putih di atas kuning. */
  color: var(--idm-warna-teks-atas-primer, var(--idm-warna-teks-bilah));
}

/*
  Huruf kategori mengikuti yang diketik redaksi.

  Tema memaksanya HURUF BESAR seluruhnya. Itu benar pada tema aslinya, yang
  rubriknya satu kata; pada rubrik seperti "Suara Mahasiswa" hasilnya berteriak,
  dan redaksi yang sudah menulis rubriknya dengan kapitalisasi tertentu tidak
  punya cara mengubahnya. Diminta klien 30 Agustus 2026: ikuti tulisan admin.
*/
/* Spesifisitasnya disamakan dengan aturan tema, bukan dinaikkan seenaknya:
   `.idm-blok-indeks .idm-blok-indeks__kategori` berdua kelas, jadi selektor
   satu kelas di sini kalah dan huruf besarnya bertahan — tanpa gejala apa pun
   selain kategori yang tetap berteriak di satu blok saja. */
.idm-blok-kisi .idm-blok-kisi__kategori,
.idm-blok-indeks .idm-blok-indeks__kategori,
.idm-blok-sorotan .idm-blok-sorotan__kategori {
  text-transform: none;
}

/* Kategori kini berdiri di ATAS judul, jadi jaraknya pindah ke bawah. Nilai
   tema (padding kanan 3px) dibuat untuk baris yang menempel pada tanggal di
   sebelahnya. */
.idm-blok-kisi__teks .idm-blok-kisi__kategori,
.idm-blok-indeks__teks .idm-blok-indeks__kategori {
  display: block;
  margin-bottom: 4px;
  padding: 0;
}

/*
 * Label rubrik pada blok GESER.
 *
 * Nilainya disebut lengkap di sini, tidak seperti kisi dan indeks yang cukup
 * ditimpa sebagian: tema tidak punya SATU PUN aturan untuk
 * `.idm-blok-geser__kategori`, karena blok ini memang tidak pernah menampilkan
 * rubrik di acuan. Tanpa aturan ini labelnya tampil sebagai teks tanpa gaya.
 *
 * Angkanya disalin dari `.idm-blok-kisi__kategori` — 11px/700 di ponsel,
 * 12px/600 di desktop — dan itu disengaja: kedua blok berdiri berdampingan di
 * beranda, dan dua bentuk label rubrik pada satu halaman terbaca sebagai dua
 * rancangan, bukan satu.
 *
 * `text-transform` tidak perlu dinolkan seperti pada kisi: yang memaksanya
 * huruf besar adalah aturan tema, dan blok ini tidak punya aturan tema.
 */
.idm-blok-geser .idm-blok-geser__kategori {
  display: block;
  margin-bottom: 4px;
  padding: 0;
  line-height: 1;
  font-size: 11px;
  font-weight: 700;
  color: var(--idm-warna-primer);
}

@media (min-width: 1120px) {
  .idm-blok-geser .idm-blok-geser__kategori {
    font-size: 12px;
    font-weight: 600;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Blok sorotan di lebar ponsel
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1119px) {
  /*
    Sorotan berdiri di dalam wadah, tidak lagi menembus tepi layar.

    Tema memberinya `margin: 0 -15px` — sama seperti belasan blok lain — supaya
    gambarnya memenuhi lebar layar. Hasilnya sorotan menempel di tepi sementara
    kartu di bawahnya menjorok ke dalam, dan halaman terbaca seperti dua
    rancangan yang ditumpuk. Diminta klien disamakan.
  */
  .idm-blok-sorotan {
    margin-inline: 0;
  }

  /*
    Latar blok mengikuti mode terang/gelap halaman.

    Blok ini diberi permukaan GELAP tetap — cerminan aturan tema yang memakai
    warna header sebagai latar panel sorotan. Itu benar selama sorotan menembus
    tepi layar dan gambarnya menutupi seluruh panel. Sejak blok ini berdiri di
    dalam wadah dengan gambar bersudut membulat, panel gelapnya menyembul di
    sekeliling gambar dan di bawah deret gambar mini — satu kotak hitam di
    tengah halaman putih.

    Transparan, bukan diberi warna sendiri: dengan begitu ia mengikuti latar
    halaman di kedua mode tanpa satu nilai warna pun ditulis di sini. Seluruh
    teks di dalamnya berdiri di atas gambar berlapis gradien, jadi tidak ada
    yang bergantung pada latar panel ini untuk terbaca.
  */
  .idm-blok-sorotan {
    background: transparent;
  }

  /*
    Sudut membulat dipasang pada ITEM, bukan pada gambarnya.

    Gambarnya memang sudah membulat, dan sudutnya tetap tampak siku: lapisan
    teks (`.idm-blok-sorotan__teks`) membentang menutupi seluruh item dan
    menimpa dua sudut bawah dengan gradien bersudut tajam. Yang perlu dipotong
    adalah itemnya, sekali, untuk seluruh isinya.
  */
  .idm-blok-sorotan__besar .idm-blok-sorotan__item {
    border-radius: 8px;
    overflow: hidden;
  }

  /*
    Strip gambar mini diganti TITIK PENANDA.

    Terukur di acuan pada 390px: `headline-small` tidak dirender sama sekali,
    dan navigasinya sebaris titik selebar 30px di bawah hero. Alasannya terbaca
    dari angkanya sendiri — lima gambar mini berjajar butuh lebih dari 360px,
    berapa pun kecil dibuatnya, sehingga apa pun yang menampilkannya di ponsel
    berakhir sebagai gulir mendatar atau kisi bertingkat.

    Yang hilang karenanya adalah judul berita lain yang tadinya terbaca sekilas.
    Gantinya geseran jari: hero bergeser mengikuti jempol, dan titiknya
    menunjukkan ada berapa dan sedang di mana.
  */
  .idm-blok-sorotan .idm-blok-sorotan__kecil {
    display: none;
  }

  /*
    Titik penanda. Terukur di acuan: deret setinggi 24px, tiap titik 30x10
    berujung bulat, yang aktif berwarna primer.

    Yang tidak aktif memakai warna teks lemah, dan itu keputusan sendiri —
    tangkapan acuan hanya memberi warna titik AKTIF. Yang penting bedanya
    terbaca tanpa mengandalkan warna saja: yang aktif juga lebih pekat.
  */
  /* Titik penanda RATA KIRI, sejajar tepi kartu.
   *
   * Terukur di acuan pada 390px: titik pertama mulai di x=15 — inset yang sama
   * dengan kartu hero — berjarak 10px satu sama lain, dan deretnya setinggi
   * 24px. Bukan di tengah: versi sebelumnya menaruhnya di tengah, dan itu
   * membuat penanda melayang lepas dari kartu yang ditandainya. */
  .idm-blok-sorotan__titik {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    height: 24px;
    margin-top: 5px;
  }

  /* Yang tidak aktif BULAT 10px, yang aktif PIL 30px — terukur, dan bedanya
   * bukan sekadar warna. Penanda yang hanya berbeda warna hilang bagi yang
   * tidak membedakan biru dari abu. */
  .idm-blok-sorotan__titik-butir {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--idm-warna-garis);
    cursor: pointer;
    transition: width 200ms;
  }

  @media (prefers-reduced-motion: reduce) {
    .idm-blok-sorotan__titik-butir {
      transition: none;
    }
  }

  .idm-blok-sorotan__titik-butir[aria-selected="true"],
  .idm-blok-sorotan__titik-butir[aria-current="true"] {
    width: 30px;
    background: var(--idm-warna-rubrik, var(--idm-warna-primer));
  }

  /*
    Hero PERSEGI, bukan 16:9.

    Terukur di acuan: kartu hero ponsel 286x286. Rasio itu bukan hiasan — ia
    memberi ruang tegak yang dibutuhkan judul 18px tiga baris untuk berdiri di
    atas gambar tanpa menutupi wajah di tengahnya, hal yang tidak muat pada
    kotak 16:9 selebar layar ponsel.
  */
  /* Kereta gulir mendatar — kartu berikutnya SENGAJA mengintip.
   *
   * Terukur di acuan pada 390px: kartu 286x286, celah 10px, kartu pertama mulai
   * di x=15, dan kartu berikutnya masuk layar 79px. Potongan itu bukan cacat
   * perataan melainkan satu-satunya petunjuk bahwa deretnya berlanjut — kereta
   * yang kartunya pas selebar layar terlihat persis seperti gambar diam.
   *
   * `calc(100% - 74px)`: lebar isi kotaknya 360px setelah padding 15px di dua
   * sisi, dan 360 - 74 = 286. Ditulis relatif supaya ikut benar di lebar layar
   * lain, bukan hanya di 390px.
   *
   * Gulir bawaan peramban, bukan transform: ia mengikuti jari sepanjang
   * gerakan, punya inersia, dan berhenti pada titik lekat tanpa satu baris
   * JavaScript pun. Yang dikerjakan JavaScript hanya membaca posisinya untuk
   * menyalakan titik penanda, dan menggulirkannya saat putar otomatis. */
  .idm-blok-sorotan__besar {
    display: flex;
    gap: 10px;
    /* Kotaknya MEMBLEED ke tepi layar lalu memberi inset 15px dari dalam.
     *
     * Wadah halaman sudah menyisihkan 15px di tiap sisi, jadi tanpa margin
     * negatif ini kartunya mulai di x=30 dan potongan kartu berikutnya
     * terpotong lagi 15px sebelum tepi layar — terukur, dan hasilnya selokan
     * putih yang tidak ada di acuan. Dengan margin negatif, kartu pertama tetap
     * mulai di 15 sementara potongan kartu berikutnya berlanjut sampai tepi. */
    margin-inline: -15px;
    padding-inline: 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 15px;
    scrollbar-width: none;
  }

  .idm-blok-sorotan__besar::-webkit-scrollbar {
    display: none;
  }

  .idm-blok-sorotan__besar > .idm-blok-sorotan__item {
    flex: 0 0 calc(100% - 74px);
    scroll-snap-align: start;
  }

  .idm-blok-sorotan__besar .idm-blok-sorotan__gambar {
    padding-bottom: 100%;
  }

  /* Judul hero ponsel, terukur 18px/600 di acuan. */
  .idm-blok-sorotan__besar .idm-blok-sorotan__teks h2 {
    font-size: 18px;
    font-weight: 600;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Blok Hero-2 di lebar ponsel: judul MASUK ke dalam gambar
   ══════════════════════════════════════════════════════════════════════════

   Butir pertama blok ini adalah hero kedua halaman, dan di desktop tema memang
   menyusunnya begitu: gambar di kiri, panel berwarna klien di kanan, keduanya
   sebaris. Di ponsel panel itu jatuh ke BAWAH gambar sebagai balok warna penuh
   selebar layar — bentuk yang tidak dipakai satu pun blok lain di halaman, dan
   yang membuat judulnya terbaca terlepas dari gambarnya.

   Disamakan dengan blok sorotan: judul berdiri di dalam gambar, di atas gradien
   gelap. Dua hero pada satu halaman yang bentuknya berbeda terbaca sebagai dua
   rancangan; disamakan, keduanya terbaca sebagai satu.

   Warna klien TIDAK dipakai sebagai latar panel di sini, dan itu tetap
   berlaku: warna apa pun yang dipilih klien harus tetap terbaca di atas gambar
   apa pun yang diunggah redaksi, dan itu tidak dapat dijamin. Gradien hitam
   bisa.

   Versi sebelumnya memindahkan warna itu ke garis aksen di kiri judul, "persis
   seperti pada sorotan". Sorotan sudah tidak punya garis itu, jadi alasannya
   ikut gugur — dan garis yang bertahan justru menghasilkan hal yang paling
   ingin dihindari bagian ini: dua hero pada satu halaman dengan bentuk yang
   berbeda. Lihat aturan pencabutannya di bawah. */
@media (max-width: 1119px) {
  .idm-blok-video .idm-blok-video__item:first-child {
    position: relative;
    /* 7px mengikuti radius yang sudah dipakai gambar blok ini di tema — bukan
       angka baru. Dipasang di item supaya gradiennya ikut terpotong. */
    border-radius: 7px;
    overflow: hidden;
  }

  .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    margin: 0;
    padding: 40px 14px 14px;
    /* Dua warna gradien sebagai variabel, bukan ditulis di dalam
       linear-gradient: baris gradien yang panjang dipecah pemformat menjadi
       beberapa baris, dan komentar izin white-label ikut terlepas dari baris
       warnanya. */
    --tirai-pekat: rgb(0 0 0 / 92%); /* izin-white-label: gradien netral di atas foto */
    --tirai-lembut: rgb(0 0 0 / 45%); /* izin-white-label: gradien netral di atas foto */
  }

  /*
    Latarnya disebut untuk KETIGA keadaan mode, dan itu wajib.

    Aturan warna panel di atas menyertakan varian `body.is-mode-gelap` dan
    `body.is-mode-otomatis` — satu kelas lebih spesifik daripada selektor biasa.
    Bawaan situs adalah mode otomatis, jadi selektor tanpa kelas mode KALAH
    sejak muatan pertama: gradiennya tidak pernah tampil dan panel birunya
    bertahan, sementara posisi dan paddingnya berubah — separuh perubahan yang
    terlihat seperti gaya yang saling bertabrakan.
  */
  .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks,
  body.is-mode-gelap .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks,
  body.is-mode-otomatis .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks {
    background: linear-gradient(to top, var(--tirai-pekat), var(--tirai-lembut) 55%, transparent);
  }

  /* TANPA garis aksen di kiri judul.
   *
   * Aturan ini ada bukan untuk menambahkan sesuatu melainkan untuk MENIADAKAN
   * inden yang tersisa: judul hero ini pernah membawa `border-left` berwarna
   * primer beserta `padding-left: 12px` yang memberinya ruang. Garisnya sudah
   * tidak ditulis lagi; paddingnya tidak boleh tertinggal, karena judul yang
   * menjorok tanpa garis terbaca sebagai kesalahan tata letak, bukan sebagai
   * rancangan.
   *
   * Ditulis eksplisit, bukan sekadar menghapus dua barisnya, supaya perubahan
   * ini tidak terbaca sebagai kelalaian oleh yang membacanya kelak. */
  .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks h2 {
    border-left: 0;
    padding-left: 0;
  }

  /* Teks di atas gradien hitam selalu terang. Token produk, bukan nilai
     literal: warna teks panel (--idm-warna-teks-atas-video) dihitung dari
     warna panel klien, dan panel itu sudah tidak ada di sini. */
  .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks a,
  .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks h2,
  .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__waktu {
    color: var(--idm-warna-teks-atas-gelap);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Kartu topik — deret poster tegak
   ══════════════════════════════════════════════════════════════════════════

   SELURUHNYA milik produk, tidak satu baris pun dari tema, dan itu keputusan
   sadar. Gaya topik di tema berbagi aturan yang sama persis dengan blok
   `kisi_daftar` — latar baris, titik penanda, padding, semuanya — sehingga
   memakainya menghasilkan dua blok yang tidak dapat dibedakan. Versi pertama
   memakainya dan ditolak klien dengan tepat.

   Karena itu tiga puluh empat aturan `idm-blok-topik__*` di tema.css memang
   tetap tidak berlaku. Itu bukan gaya yang hilang, melainkan rancangan yang
   tidak dipakai — dan nama elemen di sini sengaja berbeda supaya aturan itu
   tidak diam-diam menariknya kembali menjadi seragam.

   Bentuknya rasio TEGAK. Setiap blok lain di situs ini mendatar — 16:9, 2:1,
   atau baris teks — jadi tegak adalah satu-satunya bentuk yang belum terpakai,
   dan ia menjawab pertanyaan blok ini: bukan berita apa yang baru, melainkan
   apa yang sedang ramai tentang satu topik. */

/* Bloknya sendiri yang menjadi acuan ukur — lihat aturan kisi empat kolom di
   bawah. Yang menentukan bentuknya bukan lebar layar melainkan lebar ruang
   yang didapat blok ini: sidebar 300px di layar 1280px butuh deret yang
   digeser, kolom utama 728px di layar yang sama muat empat poster sekaligus. */
.idm-blok-topik {
  container-type: inline-size;
}

.idm-blok-topik__bilah {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

/* Nama topik sebagai lencana. Warnanya primer klien, teksnya dihitung dari
   warna itu — klien berprimer terang tidak mendapat tulisan putih di atas
   kuning. */
.idm-blok-topik__lencana {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 50em;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  background: var(--idm-warna-primer);
  color: var(--idm-warna-teks-atas-primer, var(--idm-warna-teks-bilah));
}

.idm-blok-topik__semua {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--idm-warna-primer);
}

/*
  Deret yang digeser, bukan kisi yang membungkus.

  Jumlah posternya ditentukan redaksi, dan blok ini dipakai di sidebar selebar
  300px maupun di kolom utama. Kisi yang membungkus menghasilkan tinggi yang
  berbeda-beda di tiap tempat; deret yang digeser selalu setinggi satu poster.
  Bilah gulirnya disembunyikan — yang menyatakan barisnya berlanjut adalah
  poster berikutnya yang terpotong di tepi.
*/
.idm-blok-topik__deret {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.idm-blok-topik__deret::-webkit-scrollbar {
  display: none;
}

/* Lebarnya berbatas dua arah supaya poster tidak menjadi kartu lebar di kolom
   utama maupun menciut di sidebar sempit. 46% menyisakan potongan poster
   berikutnya di tepi — itulah petunjuk bahwa deretnya masih berlanjut. */
.idm-blok-topik__poster {
  position: relative;
  flex: 0 0 clamp(132px, 46%, 168px);
  scroll-snap-align: start;
  border-radius: 10px;
  overflow: hidden;
  /* Tegak 3:4. Satu-satunya rasio yang belum dipakai blok mana pun. */
  aspect-ratio: 3 / 4;
}

.idm-blok-topik__foto {
  position: absolute;
  inset: 0;
  margin: 0;
}

/*
  Judul berdiri DI DALAM poster, di atas tirai gelap.

  Judul di bawah gambar akan mengembalikan bentuk kartu biasa — persis yang
  membuat versi pertama tidak dapat dibedakan dari blok lain. Tirainya hitam,
  bukan warna klien: yang harus dijamin adalah teks terang tetap terbaca di
  atas foto apa pun yang diunggah redaksi.
*/
.idm-blok-topik__nama {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  margin: 0;
  padding: 34px 12px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  --tirai-poster: rgb(0 0 0 / 90%); /* izin-white-label: tirai netral di atas foto */
  --tirai-poster-lembut: rgb(0 0 0 / 40%); /* izin-white-label: tirai netral di atas foto */

  background: linear-gradient(
    to top,
    var(--tirai-poster),
    var(--tirai-poster-lembut) 60%,
    transparent
  );
}

/* Empat baris cukup untuk judul berita terpanjang pada lebar poster ini;
   lebih dari itu menutupi fotonya sendiri. */
.idm-blok-topik__nama a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  color: var(--idm-warna-teks-atas-gelap);
}

/* Di lebar ponsel tema memberi blok ini `margin: 0 -15px` bersama belasan blok
   lain, sehingga posternya menempel di tepi layar sementara lencana topik di
   atasnya menjorok ke dalam — dua tepi kiri yang berbeda pada satu blok.
   Disamakan, seperti blok sorotan. */
@media (max-width: 1119px) {
  .idm-blok.idm-blok-topik {
    margin-inline: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Blok indeks di kolom sempit — satu aturan untuk ponsel DAN sidebar
   ══════════════════════════════════════════════════════════════════════════

   Tema menyusunnya sebagai baris: gambar 236px di kiri, judul di kanan. Itu
   benar di kolom utama selebar 728px dan runtuh di sidebar selebar 300px —
   gambar 236px ditambah jarak 15px menyisakan 49px untuk judul, sehingga
   `flex-wrap` melempar judulnya ke baris berikutnya. Yang terlihat: gambar
   rata kiri selebar dua pertiga kolom, lalu judul membentang penuh di bawahnya.
   Dua tepi kanan yang berbeda pada satu kartu.

   ── Container query, bukan media query ────────────────────────────────────

   Yang menentukan bukan lebar LAYAR melainkan lebar RUANG yang didapat blok
   ini. Sidebar 300px di layar 1280px butuh perlakuan yang sama dengan kolom
   penuh di layar 390px, dan media query tidak dapat menyatakan itu — versi
   sebelumnya menyetel gambar lewat `@media (max-width: 1119px)`, sehingga
   sidebar desktop tidak pernah tersentuh sama sekali.

   Bloknya sendiri yang menjadi acuan ukur. Peramban tanpa dukungan container
   query tetap mendapat susunan tema — bukan susunan yang rusak.

   ── Rasionya 1:1 di kolom sempit, dan itu MENGGANTI keputusan sebelumnya ──

   Aturan ini semula memakai 16:9 di mana pun, dengan alasan bahwa gambar
   dipangkas `cover` sehingga rasio yang berbeda antar tempat membuang bagian
   foto yang berbeda pula. Alasan itu masih benar, tetapi ia menyelesaikan
   masalah yang salah: yang tidak seragam justru rasionya sendiri.

   Ambang 420px membelah dunia menjadi dua tanpa ada yang menyadarinya. Terukur
   sebelum perubahan ini:

     layar 360 & 390px  wadah <=420  ->  16:9   (ponsel sungguhan)
     layar 430-768px    wadah  >420  ->  1:1    (aturan ponsel milik tema)

   Jadi ponsel Android mendapat 16:9 sementara lebar emulasi di atas 420px
   mendapat 1:1 — dua tampilan berbeda untuk blok yang sama, dan itulah yang
   dilaporkan klien. Yang diminta: 1:1 pada perangkat kecil.

   Disamakan ke 1:1, dan dengan begitu SELURUH kolom sempit sepakat: wadah di
   bawah 420px lewat aturan ini, dan 421px ke atas lewat aturan ponsel tema
   yang memang sudah 100x100. Kolom utama desktop (728px) tetap 16:9 seperti
   tema.

   Akibat yang disengaja dan perlu diketahui: bilah sisi desktop lebarnya 300px,
   jadi ia ikut aturan ini dan kini 1:1 juga. Container query memang tidak
   mengenal "perangkat" — ia mengenal RUANG, dan itu justru alasannya dipilih.
   Kolom 300px di layar 1280px punya persoalan yang sama dengan kolom penuh di
   layar 390px.

   Lebarnya `clamp`: 100px tetap menghasilkan gambar setinggi 56px di samping
   judul tiga baris — kartunya terbaca seperti daftar teks yang kebetulan
   berikon — sementara persen murni menghasilkan gambar 280px di kolom tablet
   yang jauh lebih tinggi daripada teks di sampingnya. */
.idm-blok-indeks {
  container-type: inline-size;
}

@container (max-width: 420px) {
  /* Spesifisitasnya disamakan dengan aturan tema (dua kelas). Dengan satu
     kelas, aturan tema menang dan gambarnya tetap 236px — tanpa gejala apa pun
     selain sidebar yang tetap ragged. */
  .idm-blok-indeks .idm-blok-indeks__gambar {
    /* Lebih sempit daripada versi 16:9 (dulu 38%). Pada rasio persegi, lebar
       yang sama berarti gambar yang jauh lebih TINGGI — 137px menjadi 137px,
       bukan 77px — dan kartunya berubah menjadi foto besar berkuping teks.
       30% menahannya di sekitar 110-120px, dekat dengan 100x100 milik tema
       pada wadah tepat di atas ambang ini, sehingga peralihannya tidak
       terlihat sebagai lompatan. */
    width: clamp(100px, 30%, 150px);
    margin-right: 12px;
    /*
      Tanpa ini rasionya diabaikan sepenuhnya.

      Butir indeks adalah wadah flex, dan tema tidak menyetel `align-items` di
      lebar desktop — jadi bawaannya `stretch`, dan gambar yang teregang setinggi
      barisnya punya tinggi PASTI. `aspect-ratio` hanya berlaku ketika salah satu
      sisinya belum ditentukan. Terukur: 120x108 alih-alih 120x68, dan tidak ada
      satu pun galat yang menyebutkannya.
    */
    align-self: flex-start;
    /* Menimpa `height: 0`, separuh trik padding-bottom milik tema. */
    height: auto;
    padding-bottom: 0;
    aspect-ratio: 1 / 1;
  }

  /* Judul tiga baris. Tanpa batas, kartu berjudul panjang menjadi jauh lebih
     tinggi daripada tetangganya — dan yang diminta justru barisan yang setara. */
  .idm-blok-indeks .idm-blok-indeks__teks h2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin-bottom: 6px;
    font-size: 15px;
  }
}

/*
  Kolom lebar: empat poster sebaris, bukan deret yang digeser.

  Deret yang digeser lahir untuk sidebar 300px, tempat hanya dua poster muat
  dan sisanya harus dapat dijangkau. Di kolom utama ruangnya cukup untuk empat
  sekaligus, dan menyembunyikan poster di balik gulir mendatar di sana berarti
  membuang ruang yang sudah ada.

  Jumlah posternya tetap milik redaksi lewat `konfigurasi.jumlah`: delapan
  artikel menjadi dua baris berisi empat, dua belas menjadi tiga baris. Yang
  ditetapkan di sini hanya berapa kolom per baris.

  Ambangnya 600px, bukan angka bulat sembarang: empat poster selebar 140px
  ditambah tiga jarak 12px membutuhkan 596px. Di bawah itu, poster menjadi
  terlalu sempit untuk judul empat baris dan deret yang digeser lebih baik.
*/
@container (min-width: 600px) {
  .idm-blok-topik__deret {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    /* Kisi tidak menggulir; `overflow` warisan deret akan memotong bayangan
       dan cincin fokus poster di tepi. */
    overflow: visible;
  }

  /* Lebar poster ditentukan jalur kisinya. `flex-basis` memang diabaikan di
     dalam wadah grid, tetapi disebut ulang supaya nilainya tidak terbaca
     seolah masih berlaku oleh yang membacanya nanti. */
  .idm-blok-topik__poster {
    flex: none;
  }

  /* Poster lebih lebar, jadi judulnya boleh sedikit lebih besar. */
  .idm-blok-topik__nama {
    font-size: 14px;
    padding: 40px 14px 14px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Slot iklan: sidebar dan dua slot melayang samping
   ══════════════════════════════════════════════════════════════════════════ */

/*
  Slot di sidebar: selebar kolomnya, setinggi materinya sendiri.

  Aturan slot spanduk membuat badannya setinggi wadah dan memusatkan isinya —
  benar untuk spanduk mendatar di papan atas, salah di sidebar tempat tinggi
  wadahnya justru ditentukan materi. Materi 160x600 dan 300x250 sama-sama muat
  tanpa satu setelan pun, karena rasionya dibawa gambarnya sendiri.
*/
.idm-bilah-sisi .idm-iklan__spanduk,
.idm-blok-iklan__lengket .idm-iklan__spanduk {
  width: 100%;
  height: auto;
  min-height: 0;
}

.idm-bilah-sisi .idm-iklan__spanduk .idm-iklan__badan,
.idm-blok-iklan__lengket .idm-iklan__spanduk .idm-iklan__badan {
  height: auto;
}

.idm-bilah-sisi .idm-iklan__spanduk img,
.idm-blok-iklan__lengket .idm-iklan__spanduk img {
  width: 100%;
  height: auto;
}

/*
  Dua slot melayang di kiri dan kanan badan halaman.

  Tema sudah menyediakan penempatannya — `position: fixed` pada jarak 710px
  dari titik tengah, selebar 160px — tetapi hanya di dalam media query desktop,
  dan tidak ada satu pun komponen yang pernah merendernya. Yang ditambahkan di
  sini hanya tiga hal yang tema tidak punya.

  Pertama: ia HARUS disembunyikan di bawah ambang desktop. Di sana tidak ada
  ruang kosong di samping badan halaman, dan slot melayang akan menimpa isi
  yang sedang dibaca.
*/
@media (max-width: 1119px) {
  .idm-blok-iklan__lengket {
    display: none;
  }
}

/* Wadah badan halaman: dari bawah navigasi sampai atas kaki halaman.
   Ia induk bagi rel iklan melayang, dan hanya itu tugasnya. */
.idm-badan {
  position: relative;
}

@media (min-width: 1120px) {
  /*
    Kedua: REL, bukan iklan. Iklannya sticky di dalam rel ini.

    Tema memakai `position: fixed` — diukur terhadap jendela, dan karena itu
    tidak mengenal batas elemen apa pun. Dua hal buruk lahir darinya:

      1. Iklan melintas bebas di atas header dan kaki halaman saat digulir.
         Diminta klien untuk berhenti di kedua garis itu.
      2. Versi sebelumnya memusatkannya ke tinggi JENDELA (`top: 50%` +
         `translateY(-50%)`). Titik pusatnya sama, tetapi tinggi materinya
         tidak — jadi begitu slot kiri dan kanan diisi materi berbeda ukuran,
         keduanya tidak pernah sejajar. Yang terlihat: satu iklan lebih tinggi
         daripada tetangganya, tanpa sebab yang tampak.

    Keduanya selesai oleh struktur, bukan oleh angka. Rel ini membentang PENUH
    di dalam `.idm-badan`, dan `position: sticky` tidak dapat melewati induknya
    — jadi batas atas dan bawahnya persis garis header dan garis footer, berapa
    pun tinggi keduanya kelak.

    `left/right: auto` disebut karena tema menyetel keduanya untuk `fixed`;
    tanpa dinolkan, rel kiri ikut membawa `right` warisan dan lebarnya melar.
  */
  .idm-blok-iklan__lengket {
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto;
    transform: none;
    overflow: visible;
    pointer-events: none;
  }

  .idm-blok-iklan__lengket-left {
    left: 50%;
    right: auto;
    margin-left: -710px;
  }

  .idm-blok-iklan__lengket-right {
    right: 50%;
    left: auto;
    margin-right: -710px;
  }

  /*
    Iklannya. `top: 24px` memberi jarak dari bilah navigasi yang lengket saat
    digulir; nilainya jarak visual, bukan tinggi header — batas sesungguhnya
    datang dari rel di atas.

    `max-height` menjaga materi yang lebih tinggi daripada layar tetap dapat
    dilihat seluruhnya: tanpa itu, bagian bawah materi 160x900 pada layar 800px
    tidak pernah terjangkau, karena sticky berhenti bergeser begitu menempel.

    `pointer-events` dikembalikan di sini — rel dimatikan supaya kolom kosong
    setinggi halaman di kiri dan kanan tidak mencuri klik dan sorotan teks dari
    isi yang ada di belakangnya.
  */
  .idm-blok-iklan__lengket-isi {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    pointer-events: auto;
  }

  /* Ketiga: ia tidak boleh menutupi apa pun ketika jendela menyempit. 1440px
     adalah lebar minimum yang menyisakan ruang di luar wadah 1088px ditambah
     dua slot 160px; di bawah itu slotnya akan bertumpuk dengan badan halaman. */
  @media (max-width: 1439px) {
    .idm-blok-iklan__lengket {
      display: none;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA "TOKOH" — pergeseran menuju acuan klien
   ═══════════════════════════════════════════════════════════════════════════

   Tema ini lahir sebagai salinan persis `koranwp`. Segala yang di ATAS baris
   ini adalah warisan itu, tidak disunting. Segala yang di BAWAH adalah
   pergeserannya menuju acuan.

   ── Kenapa di AKHIR berkas, bukan di awal ─────────────────────────────────

   Berkas ini bekerja dengan mengandalkan urutan muat, bukan spesifisitas —
   itu tertulis di komentar kepalanya. Pergeseran ini sempat ditaruh di awal,
   dan akibatnya empat dari tujuh aturannya kalah dari aturan warisan yang
   setara di bawahnya. Tidak ada galat; angkanya hanya tidak pernah bergerak.
   Ditaruh di akhir, tidak satu pun perlu menaikkan spesifisitas.

   ── Aturan yang mengikat ──────────────────────────────────────────────────

   `tema.css` di folder yang sama TIDAK disunting. Ia salinan hasil generate,
   dan `gabung-css.mjs` kini hanya menulis ke folder `koranwp`.

   ── Yang TIDAK dikerjakan di sini: warna merek ────────────────────────────

   Rubrik merah dan bilah navigasi biru pada acuan adalah warna MEREK klien.
   Produk ini sudah menyediakannya sebagai setelan (`warna.primer`,
   `warna.latar-nav`), jadi keduanya diketik di CMS. Menuliskannya di sini akan
   memanggangnya ke kode — dilarang PRD §2.3, digagalkan periksa:white-label.

   Yang di bawah hanya netral milik sistem visual, bukan identitas klien.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Netral acuan, diukur dari gaya terhitung situsnya — bukan dikira dari potret.
 *
 *   teks & judul     #14142b   (kita sebelumnya #1a1a1a)
 *   tanggal & meta   #a0a3bd   (kita sebelumnya #6b6b6b)
 *   permukaan abu    #f7f7fc   (kita sebelumnya #f5f5f5)
 *
 * Ketiganya biru-keunguan yang sangat gelap atau sangat terang, bukan abu
 * netral. Selisihnya kecil per elemen dan besar secara keseluruhan. */
:root {
  --idm-warna-teks: #14142b; /* izin-white-label: netral sistem visual, bukan warna merek klien */
  --idm-warna-teks-lemah: #a0a3bd; /* izin-white-label: netral sistem visual, bukan warna merek klien */
  --idm-warna-latar-lemah: #f7f7fc; /* izin-white-label: netral sistem visual, bukan warna merek klien */
  --idm-warna-garis: #d9dbe9; /* izin-white-label: netral sistem visual, bukan warna merek klien */
}

/* ── Kerangka: wadah 1100px dengan kolom 770 + 330 ────────────────────────
 *
 * Acuan memakai kisi sepersepuluh — 7/10 kolom utama, 3/10 bilah sisi. Punya
 * kita 1088 = 758 + 330, jadi yang berbeda hanya DUA BELAS piksel, dan bilah
 * sisinya sudah persis sama. Sesudahnya kolom teksnya 740px, sama dengan yang
 * terukur di acuan. */
/* Lebar wadah desktop, dipakai DUA tempat: wadah biasa dan wadah bilah
 * navigasi ketika ia melekat. Satu nilai, supaya keduanya tidak dapat
 * menyimpang — dan menyimpangnya persis yang dilaporkan klien. */
:root {
  --idm-lebar-wadah: 1100px;
}

@media (min-width: 1120px) {
  .idm-wadah {
    width: var(--idm-lebar-wadah);
  }

  .idm-konten {
    width: 770px;
  }
}

/* ── Kepala halaman: 60px + 42px ──────────────────────────────────────────
 *
 * Acuan menyusunnya dua baris, 102px seluruhnya. Punya kita 84 + 40. Yang 84
 * itu 60px isi ditambah padding 12px atas dan bawah — jadi menolkan paddingnya
 * menghasilkan 60px tepat, TANPA memaksa tinggi tetap yang akan memotong
 * isinya bila logo klien lebih tinggi. */
@media (min-width: 1120px) {
  .idm-header__baris {
    padding-top: 0;
    padding-bottom: 0;
  }

  .idm-navigasi {
    min-height: 42px;
  }
}

/* ── Judul seksi: 20px/600, memakai warna teks ────────────────────────────
 *
 * Tema mengunci 18px/700 dan warna #000 — hitam pekat, bukan warna teks
 * halaman. Acuan memakai 20px/600 dengan warna yang SAMA dengan teks badan,
 * dan itu yang membuat judulnya terbaca sebagai bagian dari halaman alih-alih
 * label yang ditempel. */
.idm-main .idm-blok__judul {
  font-size: 20px;
  font-weight: 600;
  color: var(--idm-warna-teks);
}

/* ── Blok indeks: gambar 190x114, meta 11px ───────────────────────────────
 *
 *   gambar    190x114 (1,667)   kita sebelumnya 236x132 (1,79)
 *   rubrik    11px/600          kita sebelumnya 12px/600
 *   tanggal   11px/400 #a0a3bd  kita sebelumnya 12px/500 #6c6c6c
 *   judul     18px/600          sudah sama
 *
 * Tinggi kartunya kebetulan sudah sama — 132px di kedua situs. */
@media (min-width: 1120px) {
  .idm-blok-indeks .idm-blok-indeks__gambar {
    width: 190px;
    /* Separuh trik rasio milik tema: tinggi nol, tinggi sebenarnya dari
       padding bawah. Nilainya piksel karena lebarnya pun tetap. */
    padding-bottom: 114px;
  }
}

.idm-blok-indeks .idm-blok-indeks__kategori {
  font-size: 11px;
}

.idm-blok-indeks .idm-blok-indeks__tanggal {
  font-size: 11px;
  font-weight: 400;
  color: var(--idm-warna-teks-lemah);
}

/* ── Blok sorotan ─────────────────────────────────────────────────────────
 *
 *   permukaan seksi   #14142b        kita sebelumnya #292929
 *   hero              740x416 (16:9) kita sebelumnya 740x488 (1,52)
 *   judul hero        24px/600       kita sebelumnya 28px/600
 *   tanggal hero      11px/400 putih kita sebelumnya 12px/500 #9b9b9b
 *   rubrik            11px/600       kita sebelumnya 11px/700
 *   kartu mini        185x182        kita sebelumnya 237x242
 *   latar kartu mini  #eff0f6        kita sebelumnya putih
 *
 * Jumlah kartu mini TIDAK disetel di sini. Acuan menampilkan empat, kita lima
 * — dan angka itu milik redaksi lewat konfigurasi.jumlah di page builder.
 * Yang diatur di sini hanya berapa yang muat sebaris.
 *
 * ── Kenapa latar seksi memakai token TEKS ───────────────────────────────
 *
 * Acuan memakai satu nilai untuk dua peran: #14142b sebagai warna tulisan di
 * seluruh halaman, dan sebagai permukaan gelap di balik hero. Menyebutnya
 * lewat token yang sudah ada menjaga keduanya tetap satu nilai.
 *
 * Token --idm-warna-permukaan-gelap TIDAK dipakai, dan itu bukan kelalaian:
 * nilainya disuntikkan TokenWarna sebagai gaya SEBARIS, dihitung dari warna
 * header klien, sehingga aturan dari berkas ini tidak akan pernah
 * memenangkannya. Yang ditimpa karena itu propertinya, bukan tokennya.
 *
 * ── Hanya DESKTOP ───────────────────────────────────────────────────────
 *
 * Terukur di acuan: seksi hero desktop berlatar #14142b, seksi hero ponsel
 * TRANSPARAN. Bedanya masuk akal begitu ukurannya dilihat — di desktop gambar
 * hero menutupi seluruh seksi sehingga permukaan gelapnya tidak pernah
 * terlihat, sedangkan di ponsel seksinya 315px sementara kartunya 286px, dan
 * sisanya menjadi pita gelap yang mengelilingi kereta.
 *
 * Versi pertama aturan ini tidak ber-media query dan berdiri SESUDAH aturan
 * ponsel yang menyetel transparan, sehingga ia menang di kedua lebar. Gejalanya
 * persis itu: latar gelap di sekeliling kereta ponsel. */
@media (min-width: 1120px) {
  .idm-blok-sorotan {
    background: var(--idm-warna-teks);
  }
}

@media (min-width: 1120px) {
  /* Hero 16:9. Tema memakai trik padding-bawah berpersen, jadi rasionya diatur
     lewat persen itu: 416/740 = 56,2%. */
  .idm-blok-sorotan__besar .idm-blok-sorotan__gambar {
    padding-bottom: 56.2%;
  }

  .idm-blok-sorotan__besar .idm-blok-sorotan__teks h2 {
    font-size: 24px;
  }

  /* Empat sebaris, bukan tiga, dan TANPA dikurangi jarak: acuan membagi 740px
     tepat empat menjadi 185px, dengan jaraknya datang dari padding di dalam
     kartu. Dikurangi jarak, hasilnya 179px dan strip-nya menyisakan celah di
     ujung kanan. */
  .idm-blok-sorotan__kecil > .idm-blok-sorotan__item {
    flex: 0 0 25%;
  }

  /* Gambar mini 1,667 seperti acuan (185x111), bukan 1,467 warisan tema.
     Rasio yang berbeda antar tempat berarti bagian foto yang terbuang ikut
     berbeda — wajah yang utuh di hero dapat terpotong di kartu mini. */
  .idm-blok-sorotan__kecil .idm-blok-sorotan__gambar {
    padding-bottom: 60%;
  }
}

.idm-blok-sorotan__besar .idm-blok-sorotan__tanggal {
  font-size: 11px;
  font-weight: 400;
  color: var(--idm-warna-teks-atas-gelap);
}

.idm-blok-sorotan__teks .idm-blok-sorotan__kategori {
  font-weight: 600;
}

/* Kartu mini berlatar abu-kebiruan, bukan putih. Nilainya sedikit lebih gelap
   daripada --idm-warna-latar-lemah (#f7f7fc), dan itu memang berbeda di acuan;
   disebut apa adanya supaya tidak ada yang mengira keduanya sama. */
.idm-blok-sorotan__kecil .idm-blok-sorotan__teks {
  background: #eff0f6; /* izin-white-label: netral sistem visual, bukan warna merek klien */
}

/* ── Blok geser (Pilihan Editor) ──────────────────────────────────────────
 *
 * Diukur di acuan pada 1280px:
 *
 *   kartu     236x251           kita sebelumnya 253x238
 *   gambar    226x128 (16:9)    kita sebelumnya 233x131 (rasio sudah sama)
 *   rubrik    11px/600 #124f98  kita sebelumnya 12px/600 warna primer
 *   judul     14px/600          sudah sama
 *   tanggal   11px/400 #a0a3bd  kita sebelumnya 11px/400 #6c6c6c
 *
 * ── Rubrik memakai warna MENU, bukan warna primer ───────────────────────
 *
 * Ini temuan, bukan selera. Di acuan, rubrik pada blok indeks berwarna merah
 * sementara pada blok ini biru — dan birunya sama persis dengan bilah
 * navigasi mereka. Dua warna merek dipakai untuk dua peran yang berbeda.
 *
 * Karena itu yang disebut di sini bukan angka melainkan token setelan klien:
 * warna.latar-nav. Menuliskan #124f98 akan memanggang warna merek satu klien
 * ke dalam tema yang dijual ke klien lain.
 *
 * ── Lebar kartu dihitung, bukan dipersenkan ─────────────────────────────
 *
 * Acuan memuat tiga kartu dalam 708px — yaitu 740px dikurangi 32px padding
 * keretanya. Sepertiga polos dari 740 menghasilkan 247px, dan kartunya jadi
 * lebih lebar daripada acuan. Dihitung dengan selisihnya, hasilnya 236px
 * tepat. */
@media (min-width: 1120px) {
  /* Margin negatif warisan tema dinolkan lebih dulu.

     Tema melebarkan wadah kereta ke luar kolomnya (margin: 0 -10px) supaya
     padding kartu tidak menyisakan celah di tepi. Akibatnya wadahnya 760px,
     bukan 740 — dan sepertiga darinya 243px, bukan 236px seperti acuan.
     Terukur, bukan disimpulkan: percobaan pertama menghasilkan 243 tepat. */
  .idm-blok-geser .idm-blok__isi {
    margin-left: 0;
    margin-right: 0;
  }

  .idm-blok-geser .idm-blok-geser__item {
    flex: 0 0 calc((100% - 32px) / 3);
    width: calc((100% - 32px) / 3);
    /* 5px, bukan 10px: acuan menyisakan sepuluh piksel untuk SELURUH kartu,
       sehingga gambarnya 226px di dalam kartu 236px. */
    padding-left: 5px;
    padding-right: 5px;
  }
}

.idm-blok-geser .idm-blok-geser__kategori {
  font-size: 11px;
  color: var(--idm-warna-latar-nav);
}

.idm-blok-geser .idm-blok-geser__waktu {
  color: var(--idm-warna-teks-lemah);
}

/* ── Warna rubrik datang dari KONFIGURASI BLOK ────────────────────────────
 *
 * Redaksi menyetelnya per blok di page builder; komponen menuliskannya
 * sebagai --idm-warna-rubrik pada akar blok. Yang di sini hanya menyatakan
 * urutan pilihannya: pakai warna blok bila ada, kalau tidak ikut warna
 * primer situs.
 *
 * Nilai cadangan ada di CSS, bukan di komponen. Kalau komponen yang memutuskan
 * warna cadangannya, warna itu berpindah dari data ke kode — dan tema kedua
 * tidak lagi dapat memilih cadangan yang berbeda.
 *
 * Aturan ini SENGAJA ditulis di kedua berkas tema, bukan di satu tempat
 * bersama. Berkas bersama dimuat sebelum tema, jadi aturannya akan kalah; dan
 * lapisan kelima yang dimuat sesudah tema akan membuat tema tidak lagi menjadi
 * kata terakhir atas tampilannya sendiri. Empat baris yang kembar lebih murah
 * daripada lapisan yang harus dijaga selamanya. */
.idm-blok-kisi .idm-blok-kisi__kategori,
.idm-blok-indeks .idm-blok-indeks__kategori,
.idm-blok-sorotan .idm-blok-sorotan__kategori {
  color: var(--idm-warna-rubrik, var(--idm-warna-primer));
}

.idm-blok-sorotan__teks .idm-blok-sorotan__kategori {
  background: var(--idm-warna-rubrik, var(--idm-warna-primer));
}

.idm-blok-geser .idm-blok-geser__kategori {
  color: var(--idm-warna-rubrik, var(--idm-warna-latar-nav));
}

/* ── Blok populer (Terpopuler) ────────────────────────────────────────────
 *
 * Diukur di acuan pada 1280px:
 *
 *   latar seksi   #f7f7fc      kita sebelumnya transparan
 *   kartu         298x83       kita sebelumnya 300x104
 *   angka         24px/600     kita sebelumnya 26px/700
 *   warna angka   #14142b      kita sebelumnya warna primer
 *   garis angka   13x2px       kita belum punya
 *   judul kartu   14px/600     sudah sama
 *
 * ── Angka berwarna TEKS, garisnya yang berwarna merek ───────────────────
 *
 * Ini kebalikan dari punya kita. Tema mewarnai angkanya dengan warna primer
 * dan tidak menggambar garis sama sekali; acuan menulis angkanya sewarna teks
 * biasa lalu menaruh batang pendek berwarna di bawahnya. Hasilnya daftar yang
 * terbaca sebagai peringkat, bukan sebagai sepuluh angka berwarna.
 *
 * Warna garisnya di acuan biru muda yang berbeda lagi dari biru menunya.
 * Yang dipakai di sini warna PRIMER situs — warna merek klien, dari setelan.
 * Menyalin angkanya berarti memanggang warna merek satu klien ke tema yang
 * dijual ke klien lain.
 *
 * Latar seksi memakai token permukaan abu yang sudah digeser ke #f7f7fc di
 * bagian atas berkas ini, jadi angkanya tidak ditulis dua kali. */
.idm-blok-populer {
  background: var(--idm-warna-latar-lemah);
}

.idm-blok-populer .idm-blok-populer__nomor {
  font-size: 24px;
  font-weight: 600;
  color: var(--idm-warna-teks);
  /* Jangkar bagi garis di bawahnya. Tanpa ini, garisnya berlabuh ke leluhur
     berposisi terdekat — yang bisa jadi seluruh kartunya. */
  position: relative;
}

.idm-blok-populer .idm-blok-populer__nomor::after {
  content: "";
  position: absolute;
  /* DI TENGAH angkanya, tepat di bawahnya.
   *
   * Versi pertama memakai `left: 0; bottom: 0` — garisnya menempel ke sudut
   * kiri-bawah kotak angka, bukan di bawah angkanya, dan pada angka dua digit
   * selisihnya makin terlihat. Acuan menaruhnya 15px dari tepi kiri kotak
   * selebar 45px, yaitu satu piksel dari titik tengahnya; ditulis sebagai
   * "tengah" supaya ia tetap benar berapa pun lebar kotaknya. */
  left: 50%;
  top: calc(100% + 2px);
  bottom: auto;
  transform: translateX(-50%);
  width: 13px;
  height: 2px;
  background: var(--idm-warna-primer);
}

/* Jumlah tayangan disembunyikan di tema ini.
 *
 * Acuan tidak menampilkannya sama sekali: kartunya hanya angka peringkat dan
 * judul, 83px; punya kita 104px karena satu baris tambahan. Itulah SELURUH
 * selisih tingginya — bukan padding.
 *
 * `display: none`, bukan disembunyikan secara visual: angka yang tidak
 * ditampilkan juga tidak perlu dibacakan pembaca layar. Datanya tetap ada dan
 * tetap dikirim API — yang berubah hanya keputusan tema ini untuk tidak
 * menggambarnya, dan tema lain tetap menggambarnya. */
.idm-blok-populer .idm-blok-populer__jumlah {
  display: none;
}

/* ── Blok indeks di lebar PONSEL: gambar di kanan, judul lebih dulu ───────
 *
 * Acuan menyajikan template ponsel yang BERBEDA dari desktopnya, dan kartu
 * daftar adalah tempat perbedaannya paling terasa:
 *
 *   desktop   gambar KIRI,  urutan rubrik -> judul -> tanggal
 *   ponsel    gambar KANAN, urutan judul -> (rubrik + tanggal sebaris)
 *
 * Produk ini merender SATU markup untuk semua lebar (PRD keputusan #2), jadi
 * keduanya harus lahir dari susunan yang sama. Seluruhnya dikerjakan CSS —
 * tidak satu baris markup pun berubah, dan tema koranwp tidak tersentuh.
 *
 * ── Bagaimana urutannya dibalik tanpa mengubah markup ───────────────────
 *
 * `row-reverse` memindahkan gambar ke kanan. Isi teksnya ditata grid dua
 * kolom: judul mengambil kedua kolom, rubrik dan tanggal mengisi baris di
 * bawahnya. Itu yang menghasilkan bentuk acuan tanpa satu pun pembungkus baru.
 *
 * Urutan BACA tidak ikut terbalik: pembaca layar mengikuti markup, dan di sana
 * rubrik tetap mendahului judul seperti di desktop. Yang berpindah hanya
 * letaknya di layar.
 *
 * Gambar 90x90, bukan 108: acuan memakai persegi tetap, bukan persentase. */
@media (max-width: 1119px) {
  .idm-blok-indeks .idm-blok-indeks__item {
    flex-direction: row-reverse;
    /* Jarak tegak kartu, terukur `15px 0` di acuan. Sisi kiri-kanannya tetap
     * 15px milik kita: di acuan gutter itu datang dari pembungkus, di sini dari
     * kartunya sendiri, dan hasil di layar sama. */
    padding-top: 15px;
    padding-bottom: 15px;
  }

  /* Tipografi kartu, terukur di acuan: rubrik 11px/600, judul 14px/600,
   * tanggal 11px/400. Angka acuannya pecahan (11.232 dan 14.224) karena
   * bersatuan rem di atas akar yang diskalakan — dibulatkan, sebab selisih
   * 0,2px tidak terlihat sementara satuan bulat terbaca saat disunting. */
  .idm-blok-indeks .idm-blok-indeks__kategori {
    font-weight: 600;
  }

  .idm-blok-indeks .idm-blok-indeks__teks h2 {
    grid-area: judul;
    font-size: 14px;
    font-weight: 600;
  }

  .idm-blok-indeks .idm-blok-indeks__gambar {
    width: 90px;
    /* Persegi, dan lebarnya tetap — jadi tingginya piksel, bukan persen. */
    padding-bottom: 90px;
    /* Jarak pindah ke sisi yang berlawanan bersama gambarnya. */
    margin-right: 0;
    margin-left: 12px;
  }

  /* Judul, lalu rubrik, lalu tanggal — masing-masing pada barisnya sendiri.
   *
   * Bentuk sebelumnya menaruh rubrik dan tanggal BERDAMPINGAN di bawah judul,
   * dan itu tidak muat. Terukur di 390px: kolom teks 258px, sementara tanggal
   * memakai 189px sebagai kalimat penuh — menyisakan 61px untuk rubrik yang
   * butuh 100px. Rubriknya karena itu selalu berelipsis: "Suara Mahasiswa"
   * tampil sebagai "Suara Mahasi…", dan nama rubrik yang terpotong berhenti
   * menjadi penanda "berita apa ini".
   *
   * Ditumpuk, keduanya utuh. Yang dikorbankan satu baris tinggi per kartu, dan
   * itu harga yang murah: rubrik dan tanggal sama-sama satu baris pendek,
   * sementara di lebar ini yang berlimpah memang ruang tegak.
   *
   * Diminta klien. Grid tetap dipakai, bukan dikembalikan ke aliran biasa —
   * `grid-area` pada ketiga anaknya yang menaruh judul di ATAS rubrik, padahal
   * di markup rubrik mendahului judul. Urutan baca tidak ikut berubah: pembaca
   * layar mengikuti markup, dan di sana rubrik tetap lebih dulu seperti di
   * desktop. Yang berpindah hanya letaknya di layar. */
  .idm-blok-indeks .idm-blok-indeks__teks {
    display: grid;
    /* Butir flex tidak menyusut di bawah lebar isinya kecuali disuruh. Tanpa
     * baris ini kartunya terukur 555px di viewport 390px, meluber ke kiri
     * (induknya `row-reverse`) tanpa satu pun galat. Tetap wajib walau kolomnya
     * kini tunggal: tanggal yang tidak terpotong tetap membawa lebar isi
     * sebesar kalimatnya. */
    min-width: 0;
    /* Satu kolom, dan `minmax(0, 1fr)` bukan `1fr` telanjang: `1fr` bermakna
     * `minmax(auto, 1fr)`, yang lantai minimumnya adalah lebar isi — persis
     * kebocoran yang dicegah `min-width` di atas, kembali lewat pintu lain. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "judul"
      "rubrik"
      "tanggal";
    justify-content: start;
    row-gap: 4px;
  }

  .idm-blok-indeks .idm-blok-indeks__kategori {
    grid-area: rubrik;
    min-width: 0;
    margin-bottom: 0;
  }

  .idm-blok-indeks .idm-blok-indeks__meta {
    grid-area: tanggal;
    margin-bottom: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Panah kereta blok geser
   ══════════════════════════════════════════════════════════════════════════

   Tema sudah menggambar panah ini — lingkaran putih 24px berbayang — TETAPI
   hanya di dalam `@media (min-width: 1120px)`, dan pada lebar itu deret
   kartunya muat seluruhnya sehingga panahnya tidak pernah dirender. Yang
   membutuhkannya justru lebar di bawahnya: terukur di 390px, deretnya 1.455px
   di dalam kotak 390px.

   Jadi bentuknya di sini bukan porting melainkan salinan rancangan tema itu
   sendiri ke lebar tempat ia benar-benar dipakai. Ukurannya sedikit lebih besar
   (32px, bukan 24px yang diperbesar `scale(1.3)`) karena di layar sentuh ia
   juga sasaran jari, dan 24px di bawah ambang sasaran sentuh mana pun. */

/* Tema menggambar panahnya sebagai GAMBAR LATAR pada `<svg>` kosong lalu
 * membalik warnanya. Kita menggambar jalurnya langsung — supaya panahnya punya
 * tinggi dari viewBox-nya sendiri — sehingga keduanya harus dimatikan: gambar
 * latarnya akan bertumpuk, dan pembalik warnanya akan membalik warna yang
 * sudah benar. */
.idm-blok-geser__panah svg {
  width: 8px;
  height: auto;
  margin: 0;
  background-image: none;
  filter: none;
}

@media (max-width: 1119px) {
  .idm-blok-geser__panah {
    position: absolute;
    /* Sejajar TENGAH GAMBAR, bukan tengah kartu: terukur 68px dari puncak
     * `__isi` pada 390px. Tengah kartu jatuh di antara judul dan tanggalnya,
     * dan panah yang melayang di atas teks menutupi bacaan. */
    top: 68px;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* Token, bukan putih tetap: lingkaran putih di mode gelap adalah dua
     * bercak terang di atas halaman gelap, dan panahnya sendiri memakai
     * `--idm-warna-teks` yang ikut membalik — hitam di atas putih di mode
     * terang, terang di atas permukaan gelap di mode gelap. */
    background-color: var(--idm-warna-latar);
    box-shadow: 0 1px 5px rgb(0 0 0 / 16%); /* izin-white-label: bayangan netral */
    color: var(--idm-warna-teks);
    cursor: pointer;
  }

  .idm-blok-geser__panah.idm-blok-geser__panah--kiri {
    left: 4px;
  }

  .idm-blok-geser__panah.idm-blok-geser__panah--kanan {
    right: 4px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Bingkai: ukuran badan, navigasi, dan warna judul
   ══════════════════════════════════════════════════════════════════════════

   Empat selisih yang tersisa setelah palet disetel dari pengaturan, seluruhnya
   terukur lewat `node tools/banding-tokoh.mjs --lebar 1280`. */

/* Badan 14px, bukan 16px.
 *
 * Ini ukuran dasar acuan, dan ia menentukan lebih dari sekadar teks paragraf:
 * setiap ukuran ber-em di tema dihitung darinya. Dipasang di `body`, bukan di
 * `html`, supaya `rem` tetap 16px — beberapa aturan tema memakai rem untuk
 * jarak, dan mengecilkannya akan menggeser tata letak yang sudah cocok. */
body {
  font-size: 14px;
}

/* Butir navigasi drawer: 14px/400 putih.
 *
 * Bobotnya 400 atas permintaan klien, dan itu MENYIMPANG dari acuan — di sana
 * terukur 600, dan 600 pula yang tertulis di sini sebelumnya. Alasan
 * menyimpangnya nyata: daftar drawer kita kini 16 butir, sebab rubrik yang
 * tidak masuk menu ikut disusulkan di bawahnya. Enam belas butir berkapital
 * penuh pada bobot tebal membuat seluruh daftar berteriak bersamaan, dan tidak
 * ada satu pun yang menonjol karena semuanya menonjol.
 *
 * Kapital dan perenggangan hurufnya TETAP — keduanya yang menjaga daftar ini
 * terbaca sebagai navigasi setelah bobotnya turun.
 *
 * Selektornya menyalin bentuk milik tema — `.idm-navigasi__daftar ul...`,
 * kekhususan (0,3,1) — bukan bentuk yang lebih ringkas. Versi pertama memakai
 * `.idm-navigasi .idm-navigasi__menu > li > a` (0,2,1), dan bobotnya tidak
 * pernah berlaku karena aturan tema lebih khusus.
 *
 * Bobotnya disetel DI SINI, bukan di aturan drawer pada kueri media di atas.
 * Aturan itu ditulis lebih dulu di berkas ini, jadi yang di sana akan kalah
 * oleh yang ini betapapun ia bermedia — dan dua aturan yang menyetel hal sama
 * lalu saling menimpa menurut urutan adalah cara paling andal membuat
 * penyuntingan berikutnya tidak berpengaruh tanpa sebab yang terlihat. */
.idm-navigasi__daftar ul.idm-navigasi__menu li a {
  font-size: 14px;
  font-weight: 400;
  color: var(--idm-warna-teks-bilah, #ffffff); /* izin-white-label: putih netral sebagai cadangan */
}

/* Judul kartu memakai token teks, bukan warna tetap.
 *
 * Tema menuliskan `#1a1a1a` dan `#000000` langsung di dua tempat ini, dan
 * keduanya lebih hitam daripada acuan (`#14142b`). Selisihnya kecil per piksel
 * tetapi terlihat begitu berdampingan dengan judul lain yang sudah memakai
 * token. */
.idm-blok-indeks .idm-blok-indeks__teks h2 a,
.idm-blok-populer .idm-blok-populer__teks h2,
.idm-blok-populer .idm-blok-populer__teks h2 a {
  color: var(--idm-warna-teks);
}

/* ══════════════════════════════════════════════════════════════════════════
   Baris selebar halaman
   ══════════════════════════════════════════════════════════════════════════

   Beranda kini deret baris (lib/baris-beranda.ts). Dua hal yang perlu diatur
   gaya, dan hanya dua. */

/* Kolom utama tidak boleh melebar saat barisnya tanpa sidebar.
 *
 * Tema memberinya `flex: 1`, dan itu BENAR selama sidebarnya ada — 1100 dikurangi
 * 330 memang menghasilkan 770 yang dituju. Yang salah hanya baris tanpa sidebar:
 * di sana ia membentang 1100px dan kartunya ikut melar, sehingga dua baris yang
 * isinya sejenis terlihat berbeda lebar.
 *
 * Karena itu yang disetel hanya baris tanpa sidebar, lewat `:has()`. Percobaan
 * pertama menyetel `flex-grow: 0` untuk SEMUA baris; `flex: 1` milik tema juga
 * membawa `flex-basis: 0%`, jadi tanpa grow kolomnya menyusut ke lebar isi —
 * terukur 557px pada baris bersidebar dan 0px pada baris tanpa sidebar. */
.idm-main__baris:not(:has(.idm-bilah-sisi)) .idm-konten {
  flex: 0 0 770px;
}

/* Baris lebar: satu blok, tanpa kolom.
 *
 * Selokan 15px-nya dipasang di sini, bukan diwarisi: wadah kita tidak berpadding
 * sementara kolom-kolomnya yang membawa selokan sendiri. Tanpa ini bloknya
 * selebar 1100px sementara acuan 1070px, dan tepi kirinya tidak lurus dengan
 * baris di atasnya. */
.idm-main__baris--penuh {
  display: block;
  padding: 0 15px;
}

/* Irama antar blok di baris lebar.
 *
 * Tema memberi setiap blok jarak bawah 20px, tetapi lewat DUA aturan yang
 * tidak saling menutup:
 *
 *   <= 1119px   .idm-main__baris .idm-blok            -> seluruh blok di baris
 *   >= 1120px   .idm-konten .idm-blok,
 *               .idm-bilah-sisi .idm-blok             -> hanya yang di kolom
 *
 * Baris lebar milik PRODUK: ia tidak punya `.idm-konten` maupun
 * `.idm-bilah-sisi`, karena memang tidak berkolom. Akibatnya ia jatuh tepat
 * di celah antara kedua aturan itu — bergaris rapi di ponsel, dan di desktop
 * menempel tanpa jarak sama sekali pada blok sesudahnya.
 *
 * Terukur di produksi 17 September 2026, beranda pada 1280px: jarak blok
 * topik ke blok indeks di bawahnya 0px, sementara setiap pasangan blok lain
 * berjarak 20px. Di 390px keduanya sudah 20px — itulah sebabnya cacat ini
 * hanya terlihat di desktop.
 *
 * Disetel untuk SEMUA lebar, bukan hanya di dalam `min-width: 1120px`. Di
 * ponsel nilainya sama dengan yang sudah diberikan tema, jadi tidak ada yang
 * berubah hari ini; yang didapat adalah baris ini tidak lagi bergantung pada
 * aturan tema yang kebetulan cukup luas.
 *
 * `>` disengaja: yang diberi jarak adalah blok yang MENJADI barisnya, bukan
 * blok yang kebetulan bersarang di dalam salah satunya. */
.idm-main__baris--penuh > .idm-blok {
  margin-bottom: 20px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Blok video: strip kartu poster di atas panel gelap
   ══════════════════════════════════════════════════════════════════════════

   Terukur di acuan (baris selebar halaman, 1070px):

     seksi        1070x342, padding 20px 30px 30px, judul 20px/600 putih
     kartu        260x236, latar putih, overflow tersembunyi
       gambar     260x129, latar gelap, ikon putar 32x32 di tengahnya
       kotak teks 260x107, padding 0 10px
         judul    14px/600, dua baris
         tanggal  11px/400

   Bentuk lama kita — satu kartu selebar kolom dengan gambar di kiri dan judul
   26px di kanan — lahir dari blok ini berdiri di kolom 740px. Ia baru masuk
   akal setelah blok video pindah ke baris lebar. */

.idm-blok-video {
  /* Panel video acuan #0e3d75 adalah warna primer yang digelapkan, bukan warna
   * kelima yang berdiri sendiri. Ditulis sebagai operasi atas token supaya ia
   * ikut berubah ketika klien mengganti warna situsnya — nilai tetap di sini
   * akan bertahan sebagai biru tua di situs yang warnanya sudah hijau. */
  --panel: color-mix(in srgb, var(--idm-warna-primer) 82%, #000); /* izin-white-label: netral */
  background-color: var(--panel);
  padding: 20px 30px 30px;
}

.idm-blok-video .idm-blok__judul {
  color: var(--idm-warna-teks-atas-gelap, #fff); /* izin-white-label: putih netral */
}

/* Deret mendatar. Selokan -15px menyamakan tepi kartu pertama dengan tepi
 * judul seksinya — tiap kartu membawa 15px sendiri di kiri dan kanan. */
.idm-blok-video .idm-blok__isi {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0 -15px;
  overflow-x: auto;
}

/* Kolom lentur, dan tinggi MINIMUM, bukan tinggi tetap. Tinggi tetap 236px
 * dengan `overflow:hidden` memotong baris waktu begitu judul mencapai tiga
 * baris; sebagai kolom, baris waktu didorong ke dasar kartu (lihat
 * `__waktu`) sehingga tanggal kelima kartu tetap sejajar, dan deret yang
 * meregang (`align-items: stretch` bawaan flex) menyamakan tinggi semuanya. */
.idm-blok-video .idm-blok-video__item {
  display: flex;
  flex-direction: column;
  flex: 0 0 260px;
  min-height: 236px;
  margin: 0 15px;
  overflow: hidden;
  background-color: var(--idm-warna-latar);
}

/* Tema menggambar rasio gambar dengan trik padding-bawah berpersen; di sini
 * tingginya tetap, jadi triknya dimatikan dan tingginya ditulis langsung. */
/* `margin: 0`: tema memberi gambar ini `margin-bottom: 10px` yang hanya
 * berlaku di bawah 1120px, sehingga jarak gambar ke judul 20px di ponsel dan
 * 10px di desktop. Jaraknya kini milik kotak teks saja.
 *
 * `border-radius: 0`: gambar rata tepi kartu persegi. Tema melengkungkan
 * keempat sudutnya 7px, jadi dua sudut bawahnya menggantung di tengah kartu —
 * dan kartu pertama, yang sudah disikukan, berbeda sendiri dari empat lainnya. */
.idm-blok-video .idm-blok-video__gambar,
.idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__gambar {
  width: 260px;
  height: 129px;
  margin: 0;
  padding-bottom: 0;
  border-radius: 0;
}

.idm-blok-video .idm-blok-video__teks h2 {
  color: var(--idm-warna-teks);
}

/* ══════════════════════════════════════════════════════════════════════════
   Tinggi kartu tetap — indeks 132px, geser 251px
   ══════════════════════════════════════════════════════════════════════════

   Kedua angka ini sempat dikira bergantung isi, dan itu keliru. Diukur pada
   acuan: KETIGA PULUH kartu `latest` tingginya persis 132px dan keenam kartu
   `editors` persis 251px — satu nilai unik masing-masing, bukan sebaran. Yang
   berubah-ubah di acuan justru kartu `most` (62, 83, 84), dan itu memang
   dibiarkan mengikuti isinya di sini juga.

   Tinggi tetap membuat baris kartu berjajar rata betapa pun panjang judulnya,
   dan itu yang membedakan halaman yang terlihat disusun dari halaman yang
   terlihat tumbuh sendiri. Judul yang tidak muat sudah dipotong tema lewat
   pembatas baris, jadi tidak ada teks yang hilang tanpa tanda.

   Hanya desktop: di ponsel kartunya bentuk lain sama sekali — gambar 90x90 di
   kanan dengan tinggi yang mengikuti isinya. */
@media (min-width: 1120px) {
  .idm-blok-indeks .idm-blok-indeks__item {
    height: 132px;
  }

  .idm-blok-geser .idm-blok-geser__item {
    height: 251px;
  }
}

/* Panel terpopuler bergaris tepi 1px.
 *
 * Selisih 2px pada lebar kartunya (300 vs 298) bukan salah hitung: di acuan,
 * pembungkus daftarnya membawa garis 1px, dan kartunya duduk di dalamnya.
 * Warnanya dari token, bukan nilai acuan — garis pemisah mengikuti tema situs,
 * bukan merek yang kebetulan diukur. */
.idm-blok-populer .idm-blok__isi {
  border: 1px solid var(--idm-warna-garis);
}

/* Kartu video pertama TIDAK diistimewakan.
 *
 * Tema menjadikan kartu pertama sebuah panel besar selebar bloknya — gambar 60%
 * di kiri, judul 26px di panel berwarna di kanan — dan bentuk itu benar selama
 * blok video berdiri di kolom 740px. Di baris selebar halaman ia merusak deret:
 * kartu pertama memakan satu baris sendiri dan empat sisanya turun ke bawahnya.
 * Acuan memperlakukan kelima kartunya sama persis.
 *
 * Selektornya menyalin bentuk milik tema, sampai ke `.idm-blok` yang mendahului
 * — tanpa itu kekhususannya (0,2,0) kalah dari milik tema (0,3,0), dan tidak
 * ada satu pun aturan di bawah ini yang berlaku. Terukur: deretnya tetap
 * membungkus dan gambar kartu pertama tetap 144x82. */
.idm-blok.idm-blok-video .idm-blok__isi {
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
  margin: 0 -15px;
}

/* Sisa bentuk "hero" ponsel (radius dan posisi relatif, di @media
 * max-width 1119px di atas) ikut dicabut: kartu pertama bersudut sama dengan
 * kartu lain. */
.idm-blok-video .idm-blok-video__item:first-child {
  width: auto;
  align-items: stretch;
  border-radius: 0;
}

.idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__gambar {
  width: 260px;
  height: 129px;
  padding-bottom: 0;
  border-radius: 0;
}

/* Kotak teks SATU aturan untuk kelima kartu.
 *
 * Kartu pertama dulu punya aturannya sendiri (`padding: 0 10px`), dan karena
 * selektornya lebih spesifik, jarak 10px antara gambar dan judul yang ditulis
 * untuk kartu lain tidak pernah sampai kepadanya. Kartu lain sebaliknya masih
 * membawa `margin-top: 10px` dari tema di atas padding itu. Hasil terukur:
 * judul kartu pertama menempel ke gambar (0px), kartu lain 20px. Disebut
 * berdampingan dalam satu daftar selektor supaya keduanya tidak dapat lagi
 * menyimpang.
 *
 * `position: static` mencabut bentuk "hero" ponsel (@media max-width 1119px
 * di atas), yang mengangkat kotak teks kartu pertama ke dasar gambar sebagai
 * lapisan absolut — di bawah 1120px judulnya menabrak baris waktu. */
.idm-blok-video .idm-blok-video__teks,
.idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks {
  position: static;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
  margin: 0;
  padding: 10px 10px 12px;
  border-radius: 0;
}

/* Tiga baris untuk SEMUA kartu. Tema memberi kartu pertama enam baris dan
 * 26px (bentuk panel besarnya); ukuran hurufnya sudah dicabut, batas barisnya
 * belum — judulnya sempat memanjang lima baris di kartu yang sama tingginya. */
.idm-blok-video .idm-blok-video__teks h2,
.idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  -webkit-line-clamp: 3;
}

/* Waktu terbit dan penghitung tayangan, dua baris tetap, di DASAR kartu.
 *
 * `margin-top: auto` mendorongnya ke bawah di dalam kolom, jadi tanggal kelima
 * kartu sejajar betapa pun beda panjang judulnya. 11px/400 terukur di acuan.
 *
 * Dua baris SELALU, bukan sebaris yang boleh membungkus. Sebaris, keduanya
 * mengisi kotak teks 240px nyaris persis (tanggal 185 + jarak 10 + tayangan
 * 45, terukur di literat.id): bulan yang lebih panjang atau satu digit
 * tayangan lagi menurunkan angkanya ke baris kedua di SATU kartu saja, dan
 * tanggal kartu itu naik dari deretnya. */
.idm-blok-video .idm-blok-video__waktu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 11px;
  font-weight: 400;
}

/* Panel berwarna kartu video pertama, dimatikan dengan benar.
 *
 * Percobaan sebelumnya menulis `background: transparent` dengan selektor
 * (0,3,0) dan tidak berlaku. Sebabnya kelas mode tampilan: aturan warisan
 * menuliskannya tiga kali — polos, `body.is-mode-gelap`, dan
 * `body.is-mode-otomatis` — dan mode bawaan pembaca adalah "otomatis", jadi
 * yang benar-benar menang selektor (0,4,0), bukan yang polos. Terukur: latar
 * kotak teksnya tetap #124f98.
 *
 * Karena itu ketiganya disebut ulang di sini, apa adanya. */
.idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks,
body.is-mode-gelap .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks,
body.is-mode-otomatis .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks {
  background: transparent;
}

.idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks a,
.idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks h2,
body.is-mode-gelap .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks a,
body.is-mode-gelap .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks h2,
body.is-mode-otomatis .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks a,
body.is-mode-otomatis .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__teks h2 {
  color: inherit;
}

/* Warna waktu SAMA untuk kelima kartu, di ketiga mode.
 *
 * Kartu pertama dulu mewarisi warna teks judul (`inherit` di atas pernah ikut
 * menyebutnya), sehingga tanggalnya hitam sementara kartu lain abu — terlihat
 * jelas begitu kelimanya sejajar. Warnanya token tanggal & meta acuan
 * (#a0a3bd, lihat "Netral acuan"), yang juga dipakai penghitung tayangan di
 * sebelahnya. */
.idm-blok-video .idm-blok-video__waktu,
.idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__waktu,
body.is-mode-gelap .idm-blok-video .idm-blok-video__waktu,
body.is-mode-gelap .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__waktu,
body.is-mode-otomatis .idm-blok-video .idm-blok-video__waktu,
body.is-mode-otomatis .idm-blok-video .idm-blok-video__item:first-child .idm-blok-video__waktu {
  color: var(--idm-warna-teks-lemah);
}

/* Gambar rata tepi kartu; hanya teksnya yang menjorok 10px, seperti acuan. */
.idm-blok-video .idm-blok-video__item {
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Ornamen judul blok: garis SESUDAH judul, sebaris dengannya
   ══════════════════════════════════════════════════════════════════════════

   Diminta klien, dan itu meluruskan bacaan saya atas acuan. Yang terukur di
   sana adalah sebuah `::after` selebar 20% setinggi 4px pada judulnya; saya
   menyimpulkan ia duduk DI BAWAH teks, padahal ia berdiri di SAMPINGNYA —
   sebaris, di tengah tinggi judulnya. Angka yang sama, bacaan yang keliru.

   Bentuk sebaris itu sendiri sudah ada di tema koranwp; yang berbeda hanya
   ukurannya. Karena itu yang ditulis di sini cuma selisihnya, dan bagian
   warisan berkas ini dibiarkan bekerja.

   Tebalnya 4px, bukan 3px seperti koranwp, dan panjangnya 180px, bukan 120px —
   keduanya terukur dari acuan. */

.idm-blok:not(:where(.idm-blok-sorotan)) .idm-blok__judul {
  /* Menyusut secukupnya, bukan selebar blok: garis di sampingnya baru dapat
   * berdiri kalau judulnya menyisakan ruang. */
  display: inline-block;
  width: auto;
}

/* Garis DI BAWAH judul dimatikan — bentuk yang sempat dipakai sebelum ini. */
.idm-blok:not(:where(.idm-blok-sorotan)) .idm-blok__judul::after {
  content: none;
}

/* Kepala blok kembali sebaris: judul di kiri, garis mengisi sesudahnya.
 *
 * Blok Terpopuler dikecualikan: judulnya rata tengah TANPA garis, dan itu
 * permintaan klien tersendiri — ia satu-satunya blok yang begitu. */
.idm-konten .idm-blok:not(:where(.idm-blok-sorotan, .idm-blok-tag--populer)) .idm-blok__kepala,
.idm-bilah-sisi .idm-blok:not(:where(.idm-blok-tag--populer, .idm-blok-populer)) .idm-blok__kepala {
  display: flex;
  align-items: center;
  gap: 16px;
}

.idm-konten
  .idm-blok:not(:where(.idm-blok-sorotan, .idm-blok-tag--populer))
  .idm-blok__kepala::after,
.idm-bilah-sisi
  .idm-blok:not(:where(.idm-blok-tag--populer, .idm-blok-populer))
  .idm-blok__kepala::after {
  content: "";
  flex: 0 1 180px;
  min-width: 0;
  height: 4px;
  background: var(--idm-warna-primer);
}

/* Bilah sisi memakai ornamen yang SAMA dengan kolom utama.
 *
 * Tema koranwp sengaja membedakannya — judul polos dengan garis rambut di
 * bawahnya — supaya kolom sisi tidak bersaing dengan kolom utama. Acuan tidak
 * membedakannya: garis 20% x 4px yang sama muncul juga di blok terpopuler.
 * Garis rambutnya karena itu dilepas di sini, dan hanya di sini. */
.idm-bilah-sisi .idm-blok .idm-blok__kepala {
  border-bottom: 0;
}

/* Lencana rubrik hero: teksnya harus KONTRAS dengan latarnya.
 *
 * Aturan warna rubrik per blok di atas mewarnai teks — benar untuk blok yang
 * menulis rubriknya sebagai teks polos (kisi, geser, indeks), salah untuk
 * sorotan: di sana rubriknya lencana, dan latarnya memakai warna yang sama.
 * Hasilnya teks berwarna sama persis dengan latarnya sendiri, dan namanya
 * lenyap. Terukur: teks "Suara Mahasiswa" dengan warna dan latar sama-sama
 * #124f98.
 *
 * Bukan akibat penggantian palet — dengan warna primer sebelumnya pun keduanya
 * sama. Lencana ini memang tidak pernah terbaca. */
.idm-blok-sorotan__teks .idm-blok-sorotan__kategori {
  color: var(--idm-warna-teks-atas-primer, var(--idm-warna-teks-bilah));
}

/* ══════════════════════════════════════════════════════════════════════════
   Blok Terpopuler: hanya JUDULNYA yang berlatar
   ══════════════════════════════════════════════════════════════════════════

   Terukur di acuan:

     seksi        latar #f7f7fc, padding 0 0 15px
     judul        20px/600, RATA TENGAH, padding 15px, tanpa garis di bawahnya
     pembungkus   latar putih, garis 1px, sudut membulat 10px
     kartu        tanpa latar sama sekali — tidak ada baris berselang warna

   Jadi warna tipisnya hanya terlihat sebagai pita di belakang judul dan tepi
   bawah bloknya; daftarnya sendiri berdiri di atas putih.

   Judul blok ini satu-satunya yang tidak bergaris. Aturan ornamen di berkas ini
   memasang garis 20% x 4px pada SETIAP judul blok, dan acuan pun menuliskannya
   di sini — tetapi menuliskannya sebagai elemen sebaris, sehingga lebarnya
   tidak pernah berlaku dan garisnya tidak pernah tergambar. Yang ditiru
   hasilnya, bukan cara penulisannya. */
.idm-blok-populer {
  padding: 0 0 15px;
}

/* Garis rambut di bawah judul bilah sisi — milik koranwp, dilepas di sini.
 *
 * Aturannya berkekhususan (0,3,0) dan menyasar `__judul`, bukan `__kepala`,
 * sehingga aturan pelepas yang sudah ada di atas (yang menyasar `__kepala`)
 * tidak menyentuhnya sama sekali. Itulah garis yang masih terlihat di bawah
 * judul Terpopuler, dan itu pula yang memangkas padding bawahnya jadi 8px. */
.idm-bilah-sisi .idm-blok:not(:where(.idm-blok-tag--populer)) .idm-blok__judul {
  display: block;
  padding-bottom: 0;
  border-bottom: 0;
}

.idm-bilah-sisi .idm-blok-populer .idm-blok__judul {
  text-align: center;
  /* Padding 15px di KEEMPAT sisi, dan tinggi barisnya 1,5 — dua-duanya terukur.
   * Aturan warisan memangkas sisi bawahnya jadi 8px demi memberi ruang bagi
   * garis ornamen; di sini garis itu tidak ada, jadi ruangnya tidak diperlukan
   * dan pitanya berdiri tidak simetris. */
  padding: 15px;
  line-height: 1.5;
}

.idm-bilah-sisi .idm-blok-populer .idm-blok__judul::after {
  content: none;
}

/* `.idm-blok` ikut disebut supaya kekhususannya menyamai aturan tema yang
 * menyetel sudutnya 7px — tanpa itu radiusnya tetap 7px, bukan 10px. */
.idm-blok.idm-blok-populer .idm-blok__isi {
  background: var(--idm-warna-latar);
  border-radius: 10px;
}

/* Kartu tanpa latar, termasuk baris genap.
 *
 * Tema memberi baris berselang warna. Di atas pembungkus putih itu terbaca
 * sebagai tabel, bukan sebagai peringkat — dan acuan memang tidak memakainya.
 * Kelas mode tampilan ikut disebut karena aturan warisan menuliskannya tiga
 * kali; tanpa itu latar mode "otomatis" yang menang. */
.idm-blok-populer .idm-blok-populer__item,
.idm-blok-populer .idm-blok-populer__teks,
body.is-mode-gelap .idm-blok-populer .idm-blok-populer__item,
body.is-mode-gelap .idm-blok-populer .idm-blok-populer__teks,
body.is-mode-otomatis .idm-blok-populer .idm-blok-populer__item,
body.is-mode-otomatis .idm-blok-populer .idm-blok-populer__teks {
  background: transparent;
}

.idm-blok-populer .idm-blok-populer__item {
  padding: 10px 15px;
}

/* Kotak angka dan kotak teks, terukur di acuan: angka 45x32 dengan jarak 3px ke
 * kanan, dan kotak teksnya tanpa padding sama sekali. Dua padding 10px yang
 * diwarisi kotak teks itulah yang membuat kartunya 103px alih-alih 83px. */
.idm-blok-populer .idm-blok-populer__nomor {
  flex: 0 0 45px;
  width: 45px;
  padding: 0 3px 0 0;
  line-height: 32px;
}

.idm-blok-populer .idm-blok-populer__teks {
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Blok geser di DESKTOP: tiga kartu sekaligus, sisanya digulir panah
   ══════════════════════════════════════════════════════════════════════════

   Terukur di acuan pada 1280px:

     seksi        740x324, padding 0 20px 15px
     kotak gulir  708x251, isinya terpotong
     kartu        236x251, berjarak 236 — tiga muat, enam ada
     panah        34x33 bulat, latar putih, ikon warna primer, berbayang,
                  4px dari tepi seksi dan sejajar tengah gambar

   Punya kita sudah berkartu 236x251 — yang berbeda cuma perilakunya: kotaknya
   MEMBUNGKUS, sehingga enam kartu jatuh menjadi dua baris tiga. Bentuk itu
   membuat blok "geser" tidak menggeser apa pun, dan panahnya tidak pernah
   muncul karena tidak ada yang meluap. */
@media (min-width: 1120px) {
  /* Jangkar bagi panah yang berposisi mutlak. Tema hanya memasangnya di lebar
   * ponsel, jadi tanpa baris ini panahnya berlabuh ke leluhur berposisi
   * terdekat — yang bisa jadi seluruh halaman. */
  .idm-blok-geser .idm-blok__isi {
    position: relative;
  }

  .idm-blok-geser .idm-blok-geser__kotak {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Lebar tampak 708px, yaitu TEPAT tiga kartu 236px.
     *
     * Tanpa padding ini kotaknya 740px dan kartu keempat menyembul 32px di
     * tepi kanan. Potongan itu benar di ponsel — di sana ia satu-satunya
     * petunjuk bahwa deretnya berlanjut — tetapi di sini petunjuk itu sudah
     * dipegang panah, dan yang diminta memang tiga kartu penuh. Acuan
     * mengukur sama: kotak gulirnya 708px di dalam seksi 740px.
     *
     * MARGIN, bukan padding. Peramban memotong isi yang meluap pada tepi kotak
     * PADDING, bukan tepi isinya — jadi dengan padding 16px, kartu keempat
     * tetap tergambar di pita 16px itu dan potongannya justru masih terlihat.
     * Margin menyempitkan kotaknya sungguhan, sehingga potongannya berhenti
     * tepat setelah kartu ketiga. */
    margin: 0 16px;
  }

  .idm-blok-geser .idm-blok-geser__kotak::-webkit-scrollbar {
    display: none;
  }

  /* Lebar kartu TETAP, bukan sepertiga kotak: begitu kotaknya berpadding,
   * "sepertiga" menjadi 225px dan kartunya tidak lagi seukuran acuan. */
  .idm-blok-geser .idm-blok-geser__item {
    flex: 0 0 236px;
    scroll-snap-align: start;
  }

  .idm-blok-geser__panah {
    position: absolute;
    /* Sejajar TENGAH GAMBAR, terukur 63px dari puncak kotak isi. Tengah blok
     * jatuh di antara judul dan tanggal, dan panah yang melayang di atas teks
     * menutupi bacaan. */
    top: 63px;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--idm-warna-latar);
    box-shadow: 0 1px 5px rgb(0 0 0 / 16%); /* izin-white-label: bayangan netral */
    color: var(--idm-warna-primer);
    cursor: pointer;
  }

  /* Menjorok keluar tepi kartu, seperti acuan: panah yang berdiri DI ATAS kartu
   * pertama menutupi wajah di gambarnya. */
  .idm-blok-geser__panah.idm-blok-geser__panah--kiri {
    left: -12px;
  }

  .idm-blok-geser__panah.idm-blok-geser__panah--kanan {
    right: -12px;
  }
}

/* Panah yang sedang mentok tetap TAMPAK SAMA.
 *
 * Terukur di acuan: panah kiri di awal deret membawa penanda "disabled" namun
 * warnanya, latarnya, dan kepekatannya persis sama dengan yang aktif — tidak
 * ada tanda visual apa pun. Peramban memudarkan tombol nonaktif secara bawaan,
 * jadi kepekatannya dikembalikan di sini.
 *
 * Yang berbeda cuma penunjuknya, dan itu disengaja: bentuknya boleh sama, tetapi
 * jari yang melayang di atasnya tetap berhak tahu bahwa tidak ada yang terjadi. */
.idm-blok-geser__panah:disabled {
  opacity: 1;
  cursor: default;
}

/* ══════════════════════════════════════════════════════════════════════════
   Halaman artikel
   ══════════════════════════════════════════════════════════════════════════

   Terukur di acuan, 1280px:

     judul          740x134, 32px/600, RATA TENGAH
     baris kredit   740x50, disusun ke tengah; avatar 50x50,
                    nama 14px/400 warna primer, tanggal 14px/400 #a0a3bd
     bilah berbagi  butir 42x32, tombol 32x32 bulat, latar #eff0f6,
                    ikon #6e7191, padding 13px 0
     peringatan     12px/400 merah, garis 1px merah, padding 10px 7px,
                    rata tengah */

.idm-artikel__judul {
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  /* Tema menuliskannya #1a1a1a, sedikit lebih hitam daripada teks lain di
   * halaman ini. Selisihnya kecil sendirian dan terlihat begitu judul berdiri
   * tepat di atas kredit yang memakai token. */
  color: var(--idm-warna-teks);
}

/* Kepala artikel disusun ke tengah, dan kredit + tanggal jadi SATU baris.
 *
 * Acuan menaruh avatar, nama, dan tanggal berjajar di tengah halaman; kita
 * menulis keduanya sebagai dua elemen bersaudara. Menyatukannya tidak butuh
 * markup baru — cukup kepalanya dijadikan flex yang membungkus, lalu remah
 * roti, judul, dan bilah berbagi diberi lebar penuh sehingga masing-masing
 * memakai barisnya sendiri. Yang tersisa berdampingan hanyalah kredit dan
 * tanggal, dan itu persis yang dituju.
 *
 * `order` dipakai karena urutan bacanya tidak boleh ikut berubah: di markup,
 * tanggal ditulis sebelum kredit — bentuk yang benar bagi pembaca layar dan
 * bagi halaman tanpa CSS. Yang bertukar hanya letaknya di layar. */
.idm-artikel__kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 6px;
}

.idm-artikel__kepala > .idm-remah-roti,
.idm-artikel__kepala > .idm-artikel__judul,
.idm-artikel__kepala > .idm-artikel__subjudul,
.idm-artikel__kepala > .idm-artikel__berbagi {
  width: 100%;
}

.idm-artikel__kepala > .idm-remah-roti {
  order: 1;
}

.idm-artikel__kepala > .idm-artikel__judul {
  order: 2;
}

.idm-artikel__kepala > .idm-artikel__subjudul {
  order: 3;
}

.idm-artikel__kepala > .idm-kredit {
  order: 4;
}

.idm-artikel__kepala > .idm-artikel__meta {
  order: 5;
}

.idm-artikel__kepala > .idm-artikel__berbagi {
  order: 6;
}

/* Kredit itu sendiri: satu foto di kiri namanya, bukan tumpukan foto.
 *
 * Selektornya menyertakan `.idm-artikel__kepala` supaya kekhususannya melampaui
 * aturan tema yang menyusunnya sebagai balok. */
.idm-artikel__kepala .idm-kredit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}

.idm-artikel__kepala .idm-kredit__isi {
  display: flex;
  margin: 0;
}

.idm-artikel__kepala .idm-kredit__kotak {
  text-align: left;
}

/* Sebutan peran ("Ditulis oleh") tidak dipakai acuan: dengan satu nama saja,
 * kalimatnya sudah jelas tanpa label. */
.idm-artikel__kepala .idm-kredit__label {
  display: none;
}

.idm-artikel__meta {
  margin: 0;
  text-align: center;
}

/* ── Bilah berbagi ──────────────────────────────────────────────────────── */

.idm-artikel__berbagi {
  display: flex;
  justify-content: center;
  padding: 13px 0;
}

.idm-artikel__berbagi-daftar {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.idm-artikel__berbagi-daftar > li {
  padding: 0 5px;
}

.idm-artikel__berbagi-tombol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: var(--idm-warna-latar-lemah);
  color: var(--idm-warna-teks-lemah);
  cursor: pointer;
}

.idm-artikel__berbagi-tombol svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Tautan yang alamatnya belum ada — sebelum hidrasi — tetap terlihat tetapi
 * tidak menjanjikan apa pun. */
.idm-artikel__berbagi-tombol[aria-disabled="true"],
.idm-artikel__berbagi-tombol:disabled {
  cursor: default;
  opacity: 1;
}

/* ── Kaki artikel ───────────────────────────────────────────────────────── */

/* Peringatan hak cipta. Merah, dan sengaja tidak lewat token: ia bukan warna
 * merek melainkan warna PERINGATAN, dan maknanya tidak boleh ikut berubah
 * ketika klien mengganti warna situsnya menjadi merah. */
.idm-artikel__hak-cipta {
  margin: 20px 0 0;
  padding: 10px 7px;
  border: 1px solid #ff0000; /* izin-white-label: merah peringatan */
  color: #ff0000; /* izin-white-label: merah peringatan */
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.idm-artikel__editor {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--idm-warna-teks);
}

/* ── Warna resmi jaringan pada tombol berbagi ──────────────────────────────
 *
 * Ikonnya putih di atas lingkaran berwarna milik jaringan masing-masing, sesuai
 * acuan. Nilainya heksadesimal langsung dan TIDAK lewat token, dan itu bukan
 * kelalaian: ini warna merek pihak ketiga, bukan warna klien. Menjadikannya
 * token berarti tombol Facebook ikut berubah ketika klien mengganti warna
 * situsnya — dan lingkaran hijau bertuliskan logo Facebook lebih buruk daripada
 * tidak berwarna sama sekali.
 *
 * Nilai-nilai ini juga alasan tombol salin tetap netral: tidak ada "warna
 * resmi" untuk menyalin tautan, dan mengarangnya hanya menambah satu warna
 * yang tidak berarti apa-apa. */
.idm-artikel__berbagi-tombol[data-jaringan] {
  color: #ffffff; /* izin-white-label: ikon putih di atas warna jaringan */
}

.idm-artikel__berbagi-tombol[data-jaringan="facebook"] {
  background: #1877f2; /* izin-white-label: warna resmi Facebook */
}

.idm-artikel__berbagi-tombol[data-jaringan="twitter"] {
  background: #000000; /* izin-white-label: warna resmi X */
}

.idm-artikel__berbagi-tombol[data-jaringan="whatsapp"] {
  background: #25d366; /* izin-white-label: warna resmi WhatsApp */
}

.idm-artikel__berbagi-tombol[data-jaringan="telegram"] {
  background: #229ed9; /* izin-white-label: warna resmi Telegram */
}

.idm-artikel__berbagi-tombol[data-jaringan="instagram"] {
  background: #e4405f; /* izin-white-label: warna resmi Instagram */
}

.idm-artikel__berbagi-tombol[data-jaringan="youtube"] {
  background: #ff0000; /* izin-white-label: warna resmi YouTube */
}

.idm-artikel__berbagi-tombol[data-jaringan="tiktok"] {
  background: #000000; /* izin-white-label: warna resmi TikTok */
}

/* Salin tautan tetap netral, dan sengaja: ia bukan jaringan. */
.idm-artikel__berbagi-tombol[data-jaringan="salin-tautan"] {
  background: var(--idm-warna-latar-lemah);
  color: var(--idm-warna-teks-lemah);
}

/* ── Inisial sebagai pengganti foto ─────────────────────────────────────── */

.idm-avatar__inisial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--idm-warna-primer);
  color: var(--idm-warna-teks-atas-primer, var(--idm-warna-teks-bilah));
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.5px;
}

/* Inisial di blok Kolom lebih besar, karena lingkarannya lebih besar.
 *
 * 16px dipilih untuk avatar kredit redaksi yang bergaris tengah 30px. Lingkaran
 * kolomnis 70px — lebih dari dua kali lipat — dan dua huruf 16px di dalamnya
 * mengambang di tengah ruang kosong, terbaca seperti gambar yang gagal dimuat
 * dan menyisakan teks alternatif. Diukur terhadap tingginya, bukan dikira:
 * 26px membuat tinggi hurufnya sepadan dengan foto yang digantikannya. */
/* Kotak penulis: lingkarannya 60px, jadi hurufnya di antara kredit (30px) dan
 * blok Kolom (70px). Latarnya sudah putih dari tema — inisial menimpanya penuh,
 * sehingga yang tersisa hanya bingkai dan bayangan yang sama seperti saat
 * fotonya ada. */
.idm-kotak-penulis__gambar .idm-avatar__inisial {
  font-size: 22px;
  letter-spacing: 1px;
}

.idm-blok-kolom__gambar .idm-avatar__inisial {
  font-size: 26px;
  letter-spacing: 1px;
}

/* Nama situs sesudah nama penulis: sama besar, tanpa tautan, sedikit lebih
 * ringan supaya nama penulisnya tetap yang pertama terbaca. */
.idm-kredit__situs {
  font-weight: 400;
}

/* ── Baris kredit: sejajar, ringkas ────────────────────────────────────────
 *
 * Tiga perbaikan kecil yang seluruhnya soal satu hal — baris ini harus terbaca
 * sebagai SATU kalimat, bukan tiga potongan yang kebetulan berdampingan. */

/* Nama dan tanggal sejajar.
 *
 * Terukur sebelum perbaikan: teks nama duduk di 265–286 sementara tanggal di
 * 260–280 — lebih rendah lima piksel. Sebabnya kotak meta membawa padding bawah
 * 10px, sehingga kotaknya 31px sementara teksnya 20px; perataan tengah
 * menyejajarkan KOTAK, dan teks di dalamnya tertinggal di atas. */
.idm-artikel__kepala > .idm-artikel__meta {
  padding: 0;
}

/* Durasi baca tidak ditampilkan.
 *
 * Diminta klien: barisnya sudah memuat nama, situs, dan waktu terbit, dan
 * "1 menit baca" menambah panjang tanpa menambah keterangan yang dicari
 * pembaca di kepala artikel. Angkanya tetap dihitung dan tetap tersimpan —
 * yang dimatikan hanya tampilannya, jadi tema lain tetap dapat memakainya. */
.idm-artikel__kepala .idm-artikel__durasi {
  display: none;
}

/* Tanggal lebih ringan daripada nama penulis: satu baris, dua tingkat
 * kepentingan. Aksennya cukup itu — nama yang tebal, waktu yang meredup. */
.idm-artikel__kepala > .idm-artikel__meta {
  color: var(--idm-warna-teks-lemah);
}

/* Jarak yang seragam di seluruh baris: 8px antara foto dan nama, dan 8px lagi
 * sebelum tanggal. Sebelumnya keduanya berbeda — 10px dan 6px — dan selisih
 * empat piksel itu cukup membuat barisnya terbaca miring. */
.idm-artikel__kepala {
  column-gap: 8px;
}

.idm-artikel__kepala .idm-kredit {
  gap: 8px;
}

/* ── Kepala artikel di lebar ponsel ────────────────────────────────────────
 *
 * Judulnya RATA KIRI dan lebih kecil, dan itu bukan penyederhanaan dari versi
 * desktop melainkan bentuk acuannya sendiri: terukur 22,8px/600 rata kiri di
 * 390px, melawan 32px rata tengah di 1280px.
 *
 * Masuk akal begitu panjang barisnya dihitung. Judul rata tengah terbaca rapi
 * selama ia dua atau tiga baris pendek; pada 360px judul yang sama memakan
 * lima baris, dan tepi kiri yang bergerigi di setiap baris memaksa mata mencari
 * awal baris berikutnya. Rata kiri mengembalikan satu tepi yang tetap.
 *
 * Kredit dan tanggalnya sudah bertumpuk dua baris di lebar ini — aturan
 * pembungkus flex di kepala mengurusnya sendiri, dan acuan mengukur sama. */
@media (max-width: 1119px) {
  .idm-artikel__judul {
    /* `start`, bukan `left` — hasilnya sama pada tulisan kiri-ke-kanan, tetapi
     * yang ini ikut benar bila situs kelak menyajikan bahasa kanan-ke-kiri.
     * Acuan pun terhitung `start`. */
    text-align: start;
    font-size: 23px;
  }

  /* Butir kepala kembali rata kiri: yang di tengah hanya bilah berbagi, seperti
   * acuan. */
  .idm-artikel__kepala {
    justify-content: flex-start;
  }

  .idm-artikel__kepala > .idm-artikel__berbagi {
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Artikel terkait: dua kolom kartu bergambar
   ══════════════════════════════════════════════════════════════════════════

   Terukur di acuan pada 1280px:

     seksi     740, judul 20px/600
     wadah     740x450 — sepuluh kartu, tanpa jarak antar-baris
     kartu     370x90, padding 0 15px 0 0
     gambar    120x72
     judul     220x78 mulai di 135 (jadi jarak 15px), 14px/600,
               tinggi baris 21px, dipotong 3 baris

   Bentuk lama kita daftar judul telanjang — terukur kartu 710x32 tanpa gambar
   sama sekali. Itu bentuk tema koranwp, dan di sana ia tetap. */

/* Blok ini tidak berpadding samping.
 *
 * Tema memberinya 15px di tiap sisi, sehingga isinya 710px di dalam kolom
 * 740px — dan kartu "setengah lebar" jadi 355px, bukan 370px seperti acuan.
 * Padding tegaknya dipertahankan: ia yang memberi jarak dari isi artikel di
 * atasnya. */
.idm-blok.idm-blok-terkait {
  padding-left: 0;
  padding-right: 0;
}

.idm-blok-terkait .idm-blok__isi {
  display: flex;
  flex-wrap: wrap;
}

/* Setengah lebar, bukan 370px tetap: bloknya juga dipakai di kolom yang lebih
 * sempit, dan lebar tetap akan meluber di sana. Pada kolom 740px hasilnya sama
 * dengan acuan. */
.idm-blok-terkait .idm-blok-terkait__item {
  display: flex;
  align-items: flex-start;
  flex: 0 0 50%;
  gap: 15px;
  height: 90px;
  padding: 0 15px 0 0;
  margin: 0;
}

.idm-blok-terkait .idm-blok-terkait__gambar {
  /* Jangkar bagi gambarnya. Tema menempatkan <img> secara mutlak di dalam kotak
   * ini; tanpa `position: relative` di sini ia berlabuh ke leluhur berposisi
   * terdekat — yaitu KARTUNYA — dan memenuhi seluruh kartu, menutupi judulnya.
   * Terukur: kotaknya benar 120x72 sementara gambarnya 370 lebar. */
  position: relative;
  flex: 0 0 120px;
  width: 120px;
  /* Tinggi tetap, bukan trik padding-bawah berpersen milik tema: kartunya
   * sendiri bertinggi tetap, jadi rasio yang mengambang justru membuat gambar
   * dan teks berhenti sejajar. */
  height: 72px;
  padding-bottom: 0;
  overflow: hidden;
}

.idm-blok-terkait .idm-blok-terkait__teks {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

.idm-blok-terkait .idm-blok-terkait__teks h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  /* Tiga baris, lalu dipotong. Tanpa batas ini judul panjang mendorong kartu
   * di sebelahnya dan barisnya berhenti rata. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Garis pemisah bawaan tema dilepas: pada kartu bergambar ia menggambar garis
 * di tengah kolom, bukan di antara butir daftar. */
.idm-blok-terkait .idm-blok-terkait__teks::after {
  content: none;
}

/* Blok terkait berdiri di atas latar halaman, tanpa pemisah antar-baris.
 *
 * Tema memberinya panel abu (#f1f1f1) dan garis bawah 1px pada tiap butir —
 * bentuk yang benar untuk DAFTAR judul, tempat garis itu satu-satunya yang
 * memisahkan satu judul dari judul berikutnya. Pada kartu bergambar dua kolom,
 * garis yang sama justru memotong kolom di tengah dan panel abunya membuat blok
 * ini terbaca seperti iklan sisipan. Acuan tidak memakai keduanya. */
.idm-blok.idm-blok-terkait {
  background: transparent;
}

.idm-blok-terkait .idm-blok-terkait__item {
  border-bottom: 0;
}

/* Judul kartu memakai token teks, seperti judul lain di tema ini. Tema
 * menuliskannya #1a1a1a — lebih hitam daripada teks di sekelilingnya. */
.idm-blok-terkait .idm-blok-terkait__teks h2,
.idm-blok-terkait .idm-blok-terkait__teks h2 a {
  color: var(--idm-warna-teks);
}

/* Satu kolom di lebar ponsel.
 *
 * "Setengah lebar" pada 390px menyisakan 180px per kartu; gambar 120px dan
 * jarak 15px sudah memakan 135, jadi judulnya tinggal 45px dan terpotong pada
 * kata pertama. Terukur: "Organisasi Kampus dan…" pada judul enam kata. */
@media (max-width: 1119px) {
  .idm-blok-terkait .idm-blok-terkait__item {
    flex: 0 0 100%;
    padding-right: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Blok topik: kolom per topik
   ══════════════════════════════════════════════════════════════════════════

   Terukur di acuan pada 1280px, di dalam baris selebar halaman:

     seksi   1070x561, padding 20px 0, judul seksi 20px/600
     kartu   256x465, berjarak 10px
     gambar  256x153
     nama    14px/600 warna aksen, tepat di bawah gambar
     judul   13px/600, satu per baris

   Empat kartu 256px berjajar butuh 1054px; itu sebabnya blok ini berdiri di
   baris selebar halaman, bukan di kolom utama 740px. */

.idm-blok-topik .idm-blok__isi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.idm-blok-topik .idm-blok-topik__kartu {
  /* Empat sekolom pada baris lebar, dan tetap masuk akal di kolom yang lebih
   * sempit: `1 1 256px` membiarkannya menyusut alih-alih meluber. */
  flex: 1 1 256px;
  min-width: 0;
  margin: 0;
}

.idm-blok-topik .idm-blok-topik__foto {
  display: block;
  position: relative;
  width: 100%;
  /* 153/256 = 59,8%. Trik padding-bawah dipertahankan supaya rasionya tetap
   * benar ketika kartunya menyusut. */
  padding-bottom: 59.8%;
  overflow: hidden;
}

/* Poster topik dirender UTUH, tidak dipotong.
 *
 * Dilaporkan klien: desain posternya bertipografi dan tercetak di tengah, dan
 * pemotongan memakan tulisannya. Pemotongannya terjadi dua kali — sekali saat
 * unggah (keempat varian di-`cover` ke rasio foto berita) dan sekali lagi di
 * sini lewat aturan tema `.idm-media__gambar img`. Yang pertama ditutup dengan
 * merender berkas asli; yang kedua ditutup aturan ini.
 *
 * Rasio kotaknya TETAP, tidak mengikuti posternya masing-masing seperti panji
 * halaman arsip: keempat kolom harus sama tinggi, dan kolom yang tingginya
 * mengikuti fotonya sendiri menghasilkan deret bergerigi. Konsekuensinya
 * diterima dengan sadar — poster yang rasionya jauh dari 1,67 menyisakan bidang
 * kosong di kiri-kanan, dan bidang kosong jauh lebih baik daripada judul yang
 * terpotong. */
.idm-blok-topik .idm-blok-topik__foto img {
  object-fit: contain;
}

/* Nama topik kembali ke aliran normal.
 *
 * Bagian warisan berkas ini masih menggambarnya sebagai tulisan MELAYANG di
 * dalam poster — `position: absolute` dengan gradien gelap di belakangnya —
 * karena begitulah rancangan blok ini sebelumnya. Tanpa dikembalikan, ia
 * berlabuh ke leluhur berposisi terdekat: terukur 1280px lebar, membentang
 * selebar layar dan sama sekali di luar kartunya.
 *
 * Gradien dan padding tebalnya ikut dilepas: keduanya hanya masuk akal di atas
 * foto. */
.idm-blok-topik .idm-blok-topik__nama {
  position: static;
  inset: auto;
  margin: 10px 0 0;
  padding: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.idm-blok-topik .idm-blok-topik__nama a {
  /* Satu baris cukup: ini nama topik, bukan judul berita. Pembatas empat baris
   * milik rancangan lama menyisakan ruang kosong di bawah setiap nama. */
  display: block;
  -webkit-line-clamp: none;
}

.idm-blok-topik .idm-blok-topik__nama a {
  /* Warna aksen rubrik, bukan warna primer: nama topik di acuan memakai warna
   * yang sama dengan label rubrik di kartu berita, dan keduanya memang menjawab
   * pertanyaan yang sama — "ini berita tentang apa". */
  color: var(--idm-warna-rubrik, var(--idm-warna-latar-aktif));
}

.idm-blok-topik .idm-blok-topik__daftar {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.idm-blok-topik .idm-blok-topik__daftar > li {
  margin-top: 10px;
}

.idm-blok-topik .idm-blok-topik__daftar a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--idm-warna-teks);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Kaki: menu dan hak cipta berbagi satu baris
   ══════════════════════════════════════════════════════════════════════════

   Terukur di acuan: baris bawah kaki setinggi 51px memuat menu di kiri (791px)
   dan hak cipta di kanan (339px). Punya kita menumpuk keduanya — menu terpusat
   selebar penuh, lalu hak cipta terpusat di bawahnya — dan itu permintaan klien
   LAIN, untuk tema koranwp. Di sana bentuknya tidak berubah.

   Keduanya sudah bersaudara di dalam `__kotak` yang membungkus, jadi tidak ada
   markup yang perlu diubah: cukup lebarnya dilepas dari 100% supaya keduanya
   muat berdampingan. */

/* Baris bawah kaki — HANYA DESKTOP.
 *
 * Di lebar ponsel kaki disusun menumpuk dan terpusat oleh tema, dan perataan
 * kanan di sana menyisakan baris terakhir hak cipta melayang sendirian di
 * kanan sementara semua yang di atasnya di tengah. */
@media (min-width: 1120px) {
  /* Menu dan hak cipta dipaksa turun BERSAMA lewat lebar dasarnya.
   *
   * Dua percobaan gagal sebelum ini, dan sebabnya sama: mereka mencoba mendorong
   * lewat sesuatu yang tidak menentukan pembungkusan.
   *
   *   lebar auto     ketiganya muat di satu baris (321 + 190 + 390 di dalam
   *                  1070), jadi yang turun justru hak ciptanya sendirian
   *   flex-grow      tidak menolong: peramban MENEMPATKAN butir dulu, baru
   *                  menumbuhkannya. Merek melebar jadi 407 dan barisnya tetap
   *                  memuat ketiganya.
   *
   * Yang menentukan pembungkusan adalah lebar DASAR. 50% + 50% berjumlah satu
   * baris penuh, jadi keduanya mustahil menyusul merek dan zona, dan mustahil
   * pula terpisah satu sama lain.
   *
   * Angkanya menentukan DUA hal sekaligus, dan itu sebabnya ia 58/42:
   *
   *   menu 58% terlalu lebar untuk menyusul merek dan zona di baris pertama
   *            (321 + 190 + 613 melampaui 1070), jadi ia turun — dan itulah
   *            satu-satunya cara memaksanya turun
   *   sisa 42% cukup untuk hak cipta dalam SATU baris; pada 40% ia terukur 42px
   *            tinggi, yaitu dua baris
   *
   * Pembagian rata 50/50 sempat dicoba dan gagal justru karena bagian pertamanya
   * PAS muat di baris atas: menu ikut naik ke sana, dan hak cipta tertinggal
   * sendirian di bawah. */
  .idm-footer .idm-footer__menu {
    flex: 0 0 calc(58% - 8px);
    /* Margin atas milik tema membuatnya turun 8px dari hak cipta di sebelahnya. */
    margin-top: 0;
    width: auto;
    text-align: left;
  }

  /* Butirnya ikut ke kiri, sejajar dengan baris alamat di atasnya.
   *
   * `text-align: left` pada pembungkus di atas tidak cukup, dan itu bukan soal
   * kekuatan selektor: daftarnya sendiri adalah kotak FLEX, dan perataan teks
   * tidak menyentuh penempatan butir flex. Yang menempatkannya adalah
   * `justify-content`, yang disetel ke tengah untuk bentuk ponsel — tempat
   * seluruh kaki halaman memang terpusat.
   *
   * Diminta klien: di desktop menu kaki berbagi baris dengan hak cipta yang
   * rata kanan, dan menu yang mengambang di tengah 58% pertama tidak sejajar
   * dengan apa pun — bukan dengan alamat di atasnya, bukan pula dengan hak
   * cipta di sebelahnya. */
  .idm-footer .idm-footer__menu .idm-navigasi__menu {
    justify-content: flex-start;
  }

  .idm-footer .idm-footer__hak-cipta {
    flex: 0 0 calc(42% - 8px);
    width: auto;
    /* Tema mendorongnya turun dengan margin atas — benar ketika ia berdiri di
     * barisnya sendiri, salah ketika ia berbagi baris dengan menu. */
    margin-top: 0;
    /* TANPA `margin-left: auto`. Sempat dipakai untuk mendorongnya ke kanan, dan
     * begitu lebarnya dipatok 50% ia berubah jadi perusak: margin otomatis
     * terhitung 535px, ikut mengisi baris, dan hak ciptanya terlempar ke baris
     * berikutnya — persis yang hendak dicegah. Yang menaruhnya di kanan sekarang
     * lebarnya sendiri; yang merapatkan teksnya ke tepi kanan `text-align`. */
    text-align: right;
    /* Padding atas milik tema masuk akal ketika ia berdiri di baris sendiri di
     * bawah menu; sebaris dengan menu, ia membuat keduanya tidak sejajar. */
    padding-top: 0;
    /* Terukur 14px di acuan; tema menuliskannya 12px. */
    font-size: 14px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Tipografi isi artikel
   ══════════════════════════════════════════════════════════════════════════

   Terukur di acuan: paragraf 16px/400 dengan tinggi baris 27px dan margin
   17px 0, dan butir daftar mengikutinya persis. Jarak antar-paragraf karena itu
   17px, bukan 34px — margin tegak yang bersebelahan SALING MELEBUR, dan 17
   atas melebur dengan 17 bawah menjadi satu 17.

   Punya kita 14px dengan tinggi baris 21px dan jarak 8px. Angka 14px itu bukan
   kekeliruan tersendiri: ia warisan ukuran badan yang memang 14px di acuan
   juga. Yang membedakan, acuan menaikkannya kembali menjadi 16px KHUSUS di
   dalam tubuh artikel — satu-satunya tempat di situs yang dibaca berparagraf
   panjang, dan satu-satunya tempat ukuran badan terasa terlalu kecil.

   Disetel di wadahnya supaya paragraf, daftar, dan apa pun yang menyusul
   mewarisi ukuran yang sama tanpa perlu didaftar satu per satu. */

.idm-artikel__article {
  font-size: 16px;
  line-height: 27px;
}

.idm-artikel__article p,
.idm-artikel__article ul,
.idm-artikel__article ol {
  margin: 17px 0;
}

/* Butir daftar tidak menambah jarak sendiri: yang berjarak adalah daftarnya,
 * dan butir yang ikut bermargin membuat daftar berbutir renggang sementara
 * paragraf di sekitarnya rapat. */
.idm-artikel__article li {
  margin: 0;
}

/* Tanggal kartu indeks tanpa tanda hubung di depannya.
 *
 * Tema menggambarnya lewat `::before` — bentuk yang benar ketika tanggal
 * menyusul nama rubrik pada satu baris ("Politik - Kamis, ..."). Sejak rubrik
 * berdiri di barisnya sendiri, tanda itu menggantung di depan tanggal tanpa
 * ada yang dipisahkannya. Acuan tidak memakainya. */
.idm-blok-indeks .idm-blok-indeks__tanggal::before {
  content: none;
}

/* Bilah reaksi diberi jarak dari kaki artikel.
 *
 * Ia berdiri tepat sesudah baris "Editor: …", dan tanpa jarak keduanya terbaca
 * seperti satu blok — nama editor menempel di bibir kotak abu. Diminta klien.
 * 28px kira-kira setinggi satu baris teks: cukup untuk memisahkan, tidak cukup
 * untuk memutus. */
.idm-artikel .idm-pagination {
  margin-top: 28px;
}

/* Paginasi artikel: nomor dan tombol "Selanjutnya" BERDAMPINGAN.
 *
 * Tema menyetel `justify-content: space-between` pada pembungkus nomornya,
 * sehingga tombol berikutnya terlempar ke tepi kanan blok — terukur 649px
 * jauhnya dari angka terakhir. Bentuk acuan menaruhnya tepat sesudah deret
 * angka, sebagai kelanjutan yang sama. */
.idm-pagination-artikel .idm-pagination-artikel__nomor {
  justify-content: flex-start;
  gap: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Baris atas header
   ══════════════════════════════════════════════════════════════════════════

   Terukur di acuan, 1280px: tanggal 13px warna teks lemah, lalu ikon pencarian
   24px, lalu lima tombol sosial 32px bulat berlatar #eff0f6 dengan ikon #6e7191.
   Tidak ada pemilih mode dan tidak ada tombol masuk.

   Ikon sosialnya SUDAH dirender komponen header; yang selama ini menahannya
   bukan gaya melainkan DATA — pengaturan grup `sosial` kosong, dan komponennya
   memang menolak menggambar pembungkus kosong. Isi tautannya di Pengaturan →
   Sosial, dan ikonnya muncul. */

/* Tanggal didekatkan ke kelompok kanan.
 *
 * Baris header memakai `justify-content: space-between` dengan tiga anak, dan
 * itu menaruh anak tengah tepat di tengah sisa ruang — sejauh mungkin dari
 * keduanya. Margin otomatis di kiri menyerap seluruh ruang kosong itu lebih
 * dulu, sehingga tanggal berhenti tepat sebelum ikon pencarian, bukan di
 * tengah baris. */
.idm-header__tanggal {
  margin-left: auto;
  margin-right: 24px;
  color: var(--idm-warna-teks-lemah);
}

/* ── Pencarian ringkas ────────────────────────────────────────────────────
 *
 * Ikonnya duduk di ujung kanan bersama ikon jaringan, bukan di kolom pencarian
 * di tengah baris — itu urusan markup dan dikerjakan di komponen headernya.
 * Yang tinggal di sini hanya bentuk ikon dan panel yang dibukanya.
 *
 * Panelnya BERPOSISI MUTLAK, menggantung di bawah ikon. Bila ia ikut mengalir
 * di dalam baris, membuka pencarian akan menggeser seluruh isi header ke kiri
 * — ikon jaringan berpindah tempat tepat ketika pembaca sedang membidik
 * salah satunya. */
.idm-pencarian-ringkas {
  position: relative;
  display: flex;
  align-items: center;
  /* Memisahkan ikon pencarian dari deret ikon jaringan. Tanpa ini keduanya
   * terbaca sebagai satu deret berisi enam tombol sejenis. */
  margin-right: 8px;
}

.idm-pencarian-ringkas .idm-pencarian__ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--idm-warna-teks);
}

.idm-pencarian-ringkas__panel {
  position: absolute;
  top: calc(100% + 8px);
  /* Ditambatkan ke KANAN, bukan kiri: ikonnya berdiri dekat tepi kanan header,
   * dan panel selebar 280px yang ditambatkan ke kiri akan menjulur keluar
   * halaman. */
  right: 0;
  z-index: var(--idm-lapis-popup);
  width: 280px;
  /* Setinggi bilah menu di bawahnya — terukur 42px. Panel yang lebih tinggi
   * dari bilah yang ditimpanya terbaca sebagai jendela yang mengambang lepas,
   * bukan sebagai kelanjutan header. 6 + 28 + 6, ditambah dua garis bingkai. */
  padding: 6px;
  border: 1px solid var(--idm-warna-garis);
  border-radius: 8px;
  background: var(--idm-warna-latar);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%); /* izin-white-label: bayangan netral */
}

/* Isian di dalam panel disetel ulang untuk latar TERANG.
 *
 * Bentuk bawaan kotak pencarian dirancang untuk drawer menu, yang berlatar
 * gelap: isiannya berlatar warna navigasi dengan teks putih dan pengganti teks
 * abu terang. Di dalam panel putih ini yang tampil adalah kotak abu tua berisi
 * teks putih — terbaca sebagai isian yang sedang dinonaktifkan.
 *
 * Padding 15px milik kotak juga dilepas: di drawer ia yang memberi jarak dari
 * tepi layar, sedangkan di sini panel sudah punya paddingnya sendiri, dan
 * keduanya bertumpuk menjadi bingkai kosong selebar 25px. */
.idm-pencarian-ringkas__panel .idm-pencarian__kotak {
  /* Tambatan bagi tombolnya. Tema menyetel ini hanya di dalam kueri media
   * lebar ponsel — tempat kotak pencarian aslinya hidup — sehingga di lebar
   * desktop tombol yang berposisi mutlak melompat ke pembungkus terdekat
   * berikutnya, yaitu panel, dan mendarat 10px di atas isiannya. */
  position: relative;
  padding: 0;
}

.idm-pencarian-ringkas__panel .idm-pencarian__input {
  width: 100%;
  height: 28px;
  padding-right: 34px;
  border-color: var(--idm-warna-garis);
  background: var(--idm-warna-latar);
  color: var(--idm-warna-teks);
}

.idm-pencarian-ringkas__panel .idm-pencarian__input::placeholder {
  color: var(--idm-warna-teks-lemah);
}

/* Kaca pembesar dipusatkan tegak terhadap isian, bukan ditambatkan ke tepi
 * atasnya. Tema menaruhnya pada jarak TETAP dari atas (15px) — angka yang benar
 * hanya selama isiannya setinggi bawaan. Begitu isian disusutkan, jarak tetap
 * apa pun meleset; setengah tinggi dikurangi setengah dirinya sendiri tidak. */
.idm-pencarian-ringkas__panel .idm-pencarian__tombol {
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  color: var(--idm-warna-teks-lemah);
}

/* ── Ikon sosial ──────────────────────────────────────────────────────────
 *
 * Bentuknya sama persis dengan tombol berbagi di kepala artikel — lingkaran
 * 32px berlatar tipis. Kesamaan itu disengaja: keduanya tombol jaringan, dan
 * dua bentuk berbeda untuk peran yang sama membuat halaman terbaca seperti
 * disusun dua orang. */
.idm-header__sosial {
  display: flex;
  align-items: center;
  gap: 10px;
}

.idm-header__sosial-tautan {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--idm-warna-latar-lemah);
  color: var(--idm-warna-teks-lemah);
}

.idm-header__sosial-tautan svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ── Yang tidak ada di acuan ──────────────────────────────────────────────
 *
 * Pemilih mode terang/gelap DISEMBUNYIKAN, bukan dihapus: markupnya tetap
 * dirender, tema koranwp tetap memakainya, dan menghapus aturan di bawah ini
 * mengembalikannya. Konsekuensinya: di tema ini pembaca tidak punya jalan
 * menyalakan mode gelap. Aturan mode gelap sendiri tetap ada dan tetap berlaku
 * bila peramban pembaca menyetel "kurangi cahaya".
 *
 * Tombol masuk (`.idm-header__user`) dulu ikut disembunyikan dengan alasan
 * yang sama — tidak ada di acuan — sehingga di tema ini pembaca tidak punya
 * pintu akun sama sekali. Dikembalikan 22 Oktober 2026 atas keputusan pemilik,
 * bersama akun pembaca lintas situs (gerbang Connect): pil di kepala situs pada
 * desktop, baris di laci menu pada ponsel. Di bawah ambang desktop pil ini
 * tetap disembunyikan aturan di atas — di sana laci yang membawanya. */
.idm-header__mode {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Subjudul dan kutipan di dalam tubuh artikel
   ══════════════════════════════════════════════════════════════════════════

   Tangga subjudul dinaikkan mengikuti badan yang kini 16px.

   Tema menuliskannya 18/16/14/12/10 — tangga yang benar ketika badan artikel
   masih 14px. Sejak badan naik ke 16px, tangga itu runtuh: h3 sama besar
   dengan paragraf biasa, dan h4 sampai h6 justru LEBIH KECIL. Subjudul yang
   lebih kecil dari kalimat di bawahnya berhenti berfungsi sebagai subjudul,
   dan editor kita menawarkan H2 sampai H4 — jadi h4 bukan kasus teoretis.

   Tidak ada angka acuan untuk ini: artikel acuan tidak memakai h2 maupun h3
   sama sekali. Yang dipakainya sebagai subjudul adalah paragraf yang
   ditebalkan — 16px berbobot 600. Itulah yang dijadikan LANTAI tangga ini:
   tingkat terkecil mendarat persis pada bentuk yang acuan pakai, dan tingkat
   di atasnya naik dari sana. */

.idm-artikel__article h2 {
  font-size: 22px;
  line-height: 1.35;
}

.idm-artikel__article h3 {
  font-size: 19px;
  line-height: 1.4;
}

.idm-artikel__article h4 {
  font-size: 17px;
  line-height: 1.45;
}

.idm-artikel__article h5,
.idm-artikel__article h6 {
  font-size: 16px;
  font-weight: 600;
  line-height: 27px;
}

/* Kutipan.
 *
 * Tombolnya ada di editor dan perendernya mengeluarkan <blockquote> telanjang,
 * tetapi tidak ada satu pun aturan untuknya — tidak di tema kita, dan tidak
 * juga di 46 berkas acuan: WordPress sumbernya tidak pernah menggayakan
 * kutipan. Yang tampil karena itu adalah bawaan peramban, yaitu blok bertakuk
 * 40px tanpa tanda apa pun yang membedakannya dari paragraf biasa.
 *
 * Karena tidak ada yang bisa ditiru, bentuknya dipilih: garis aksen di kiri,
 * huruf sedikit lebih besar, tanpa miring. Sesuai permintaan klien — minimalis
 * dengan sedikit aksen — dan tanpa warna baru, hanya token yang sudah ada. */
.idm-artikel__article blockquote {
  margin: 24px 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--idm-warna-primer);
  color: var(--idm-warna-teks);
  font-size: 17px;
  line-height: 29px;
}

.idm-artikel__article blockquote p {
  margin: 8px 0;
}

.idm-artikel__article blockquote p:first-child {
  margin-top: 0;
}

.idm-artikel__article blockquote p:last-child {
  margin-bottom: 0;
}

/* ── Header ponsel: tanpa ikon jaringan dan tanpa pencarian ───────────────
 *
 * Diminta klien, dan sejalan dengan acuan: barisnya hanya memuat logo dan
 * tombol menu. Ruang di lebar 390px habis lebih dulu — lima ikon jaringan
 * ditambah ikon pencarian memakan 230px dari baris yang juga harus memuat logo.
 *
 * Tidak ada yang hilang: tautan jaringan yang sama ada di kaki halaman, dan
 * drawer menu memuat kotak pencarian berisian penuh — bentuk yang justru lebih
 * enak dipakai di layar sentuh daripada panel yang menggantung. */
@media (max-width: 1119px) {
  .idm-header__sosial,
  .idm-pencarian-ringkas {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Komentar dan Terpopuler berdiri di dalam wadah, di lebar ponsel
   ══════════════════════════════════════════════════════════════════════════

   Kejadian yang sama untuk ketiga kalinya — sorotan dan topik sudah lebih
   dulu. Tema memberi belasan blok `margin: 0 -15px` di lebar ponsel, yang
   menarik tepinya keluar dari wadah sehingga isinya menembus tepi layar.
   Bentuk itu benar untuk blok yang isinya sebuah GAMBAR: foto yang memenuhi
   lebar layar memang bentuk yang dipakai portal berita.

   Kedua blok ini bukan gambar. Yang menembus tepi pada keduanya adalah PANEL
   berlatar — kotak "Tinggalkan Balasan" dan kartu Terpopuler — dan panel yang
   menempel di kedua tepi layar berhenti terbaca sebagai kartu; ia terbaca
   sebagai pita yang memotong halaman. Di atasnya, tubuh artikel dan bilah
   reaksi menjorok 15px ke dalam, jadi ada dua tepi kiri berbeda pada satu
   halaman. Diminta klien disamakan.

   Blok `terkait` sengaja DIBIARKAN. Ia juga menembus tepi, tetapi isinya sudah
   punya paddingnya sendiri sehingga kartunya tetap sejajar dengan teks
   artikel — yang menembus cuma pembungkus tak terlihat. */

@media (max-width: 1119px) {
  .idm-komentar,
  .idm-blok.idm-blok-populer {
    margin-inline: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Judul komentar memakai ornamen yang SAMA dengan judul blok
   ══════════════════════════════════════════════════════════════════════════

   Ketika ornamen kepala blok dinaikkan untuk tema ini — 4px setebal, 180px
   sepanjang, judul di kiri dan garis menyusul di sampingnya — dua judul
   TERTINGGAL: "Komentar" dan "Tinggalkan Balasan". Aturan barunya menyasar
   `.idm-blok__kepala`, dan keduanya bukan blok.

   Akibatnya tidak sekadar beda ukuran. Keduanya tetap berjalan di atas aturan
   warisan koranwp — garis 3px sepanjang 120px — dan yang lebih terlihat,
   `justify-content: space-between` milik tema tidak pernah dibatalkan pada
   keduanya. Judul menempel di tepi kiri, garisnya terlempar ke tepi kanan, dan
   di antaranya ruang kosong selebar setengah kolom. Persis yang hendak
   dihindari bentuk sebaris: garis itu berhenti menjadi pendamping judul.

   Latar abu `.idm-komentar__kepala` ikut dicabut. Tema memberinya pita abu
   selebar kolom dengan padding sendiri — bentuk yang masuk akal ketika judul
   komentar adalah kepala sebuah panel. Di sini ia satu dari tiga judul yang
   bertumpuk berurutan (Berita Terkait, Komentar, Tinggalkan Balasan), dan
   hanya yang tengah yang berpita abu.

   Ketiganya kini satu bentuk. */

.idm-konten .idm-komentar__kepala,
.idm-konten .idm-komentar__judul-balas {
  justify-content: flex-start;
  gap: 16px;
  padding: 0;
  background: none;
}

/* Garisnya yang MENGALAH ketika ruang kurang, bukan judulnya.
 *
 * "Tinggalkan Balasan" ditambah jarak dan garis 180px melampaui 360px yang ada
 * di lebar ponsel. Dengan faktor susut yang sama, kekurangannya dibagi rata:
 * garisnya memendek sedikit dan judulnya patah menjadi dua baris — lalu garis
 * itu menggantung di samping baris pertama, tidak sejajar dengan apa pun.
 *
 * Faktor susut yang besar membuat garis menyerap hampir seluruh kekurangan
 * sebelum judulnya tersentuh sama sekali. Judul adalah isi; garis hanya
 * ornamen, dan ornamen yang memaksa isinya patah sudah berhenti jadi ornamen.
 *
 * Disetel pada garisnya, bukan pada judulnya, dan itu bukan pilihan gaya
 * penulisan: judul di .idm-komentar__judul-balas bukan sebuah elemen melainkan
 * teks telanjang di dalam kotak flex — butir flex anonim, yang tidak dapat
 * disasar selektor mana pun. */
.idm-konten .idm-komentar__kepala::after,
.idm-konten .idm-komentar__judul-balas::after {
  flex: 0 999 180px;
  height: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Judul seksi: satu bentuk untuk SEMUA, termasuk yang bukan blok
   ══════════════════════════════════════════════════════════════════════════

   Tiga judul bertumpuk berurutan di kaki halaman artikel — Berita Terkait,
   Komentar, Tinggalkan Balasan — dan sampai sekarang ketiganya berbeda:

     Berita Terkait      15px/600 warna primer   (di desktop; di ponsel 20/600)
     Komentar            18px/700 hitam pekat    (di ponsel 16/700)
     Tinggalkan Balasan  18px/700 warna teks

   Bentuk yang benar sudah ada dan sudah terukur dari acuan: 20px/600 dengan
   warna teks halaman, dipakai setiap judul blok di kolom utama. Yang kurang
   hanya jangkauannya — aturannya menyasar `.idm-blok__judul`, sementara dua
   judul komentar bukan blok, dan judul Berita Terkait ditimpa aturan tema
   khusus desktop yang mengecilkannya dan mewarnainya primer.

   Warnanya lewat token, bukan angka: tema mengunci #000, dan hitam pekat bukan
   warna teks halaman ini. Sekaligus itu yang membuat judul mengikuti palet
   yang dipilih klien, bukan palet yang dibawa tema.

   Sorotan dan tag populer dikecualikan seperti pada ornamen garisnya: judul
   sorotan berdiri di atas gambar dengan bentuknya sendiri, dan judul tag
   populer duduk sebaris dengan deret tagnya. */

.idm-konten .idm-blok:not(:where(.idm-blok-sorotan, .idm-blok-tag--populer)) .idm-blok__judul,
.idm-konten .idm-komentar__kepala .idm-komentar__judul,
.idm-konten .idm-komentar__judul-balas {
  font-size: 20px;
  font-weight: 600;
  color: var(--idm-warna-teks);
}

/* ══════════════════════════════════════════════════════════════════════════
   Napas di kaki halaman versi ponsel
   ══════════════════════════════════════════════════════════════════════════

   Baris hak cipta terjepit: 18px di atasnya, 30px di bawahnya, sementara
   seluruh kaki halaman bernapas 30px dari tepi atas dan setiap barisnya
   berjarak sekitar 14px. Ia baris TERAKHIR di halaman, dan di ponsel tepi
   bawah layar bukan ruang kosong — di sanalah bilah peramban dan garis beranda
   berada. Baris terakhir yang mepet ke tepi terbaca seperti terpotong.

   Diminta klien. Angkanya menyeimbangkan, bukan sekadar menambah: ruang di
   atas hak cipta dinaikkan menjadi kira-kira sama dengan ruang di bawahnya,
   dan ruang bawah kaki dinaikkan melampaui padding atasnya justru karena tepi
   bawah layar sudah terpakai. */

@media (max-width: 1119px) {
  /* `footer.idm-footer`, bukan `.idm-footer`: tema menuliskan paddingnya
   * dengan nama elemen ikut disebut, dan selektor tanpa nama elemen kalah
   * betapapun ia ditulis belakangan. */
  footer.idm-footer {
    padding-bottom: 40px;
  }

  .idm-footer__hak-cipta {
    margin-top: 10px;
    padding-top: 18px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Label intisari: 16px/600
   ══════════════════════════════════════════════════════════════════════════

   Diminta klien, dan ini MEMBALIK angka yang ia minta sendiri pada 3 September
   — 18px/700. Komentar yang menyertainya ikut ditulis ulang, bukan dibiarkan
   berbunyi lain dari kodenya.

   Yang ditulis dulu: pada 18px di atas badan 16px, label ini berhenti menjadi
   keterangan dan menjadi JUDUL bagian. Pada 16px ia kembali sebesar badannya,
   jadi bukan lagi ukurannya yang membedakan — melainkan kapital penuh, bobot
   600, dan warnanya. Tiga penanda itu sudah cukup: label ini berdiri sendirian
   di atas daftar berbutir, dan tidak ada yang bisa dikira sebagai kalimat
   pertama artikel.

   Kapital penuh dan perenggangan hurufnya TIDAK ikut berubah — klien tidak
   memintanya, dan keduanya yang menahan bentuk label ini setelah ukurannya
   turun. */
.idm-artikel__body .idm-intisari__label {
  font-size: 16px;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   Nama penulis di baris kredit
   ══════════════════════════════════════════════════════════════════════════

   Bobot 500 dan warna primer, diminta klien.

   Dua aturan, bukan satu, dan itu bukan kerapian: namanya dibungkus <a> ketika
   penulisnya punya halaman sendiri, dan warna tautan di dalam kredit sudah
   disetel aturan lain di berkas ini — `--idm-warna-teks-judul`. Mewarnai hanya
   pembungkusnya menghasilkan warna yang berlaku pada penulis TANPA halaman dan
   diam-diam kalah pada yang punya. Cacat yang hanya muncul pada sebagian
   artikel adalah cacat yang paling lama tidak dilaporkan.

   Warnanya token, bukan angka: ia mengikuti warna utama yang dipilih klien di
   Pengaturan → Warna, dan berganti bersamanya. */
.idm-kredit .idm-kredit__nama,
.idm-kredit .idm-kredit__nama a {
  font-weight: 500;
  color: var(--idm-warna-primer);
}

/* ══════════════════════════════════════════════════════════════════════════
   Penghitung tayangan
   ══════════════════════════════════════════════════════════════════════════

   Ikon mata dan angkanya, di kartu blok maupun di kepala artikel. Tidak ada
   bentuk acuan untuk ini — tidak satu pun dari 46 berkas acuan memuat
   penghitung tayangan pada kartunya — jadi bentuknya dipilih: seukuran dan
   sewarna keterangan di sebelahnya, sehingga ia terbaca sebagai bagian dari
   baris meta, bukan sebagai lencana yang ditempel di atasnya.

   `inline-flex` supaya ikon dan angkanya tidak pernah terpisah baris, dan
   `vertical-align` menjajarkannya dengan teks di sampingnya — ikon 14px di
   dalam baris 11px akan menggantung tanpa itu. */
.idm-tayangan {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--idm-warna-teks-lemah);
  font-size: inherit;
  line-height: 1;
  vertical-align: middle;
}

.idm-tayangan svg {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
}

/* Baris meta kartu memuat dua keterangan sekarang, jadi ia perlu jarak dan
 * perlu boleh membungkus. Di kartu sempit tanggal dan tayangan tidak selalu
 * muat sebaris, dan yang membungkus jauh lebih baik daripada yang meluber. */
.idm-blok [class$="__meta"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

/* Di kepala artikel ia menyusul waktu dan durasi baca, jadi ia butuh pemisah
 * yang sama seperti keduanya. */
.idm-artikel__meta .idm-tayangan {
  margin-left: 8px;
}

/* Ukurannya SERAGAM di seluruh blok, bukan mewarisi induknya.
 *
 * `font-size: inherit` di atas benar untuk kepala artikel — di sana ia menyusul
 * waktu dan durasi baca yang seukuran. Di dalam kartu ia salah: baris meta tiap
 * blok mewarisi ukuran yang berbeda-beda, dan terukur ia menghasilkan lima
 * ukuran untuk satu hal yang sama — 11px di sorotan dan Terpopuler, 14px di
 * geser dan indeks, dan 18px di Berita Terkait, tempat ia mewarisi ukuran judul
 * kartu.
 *
 * 11px adalah ukuran yang sudah dipakai keterangan kartu — tanggal blok indeks,
 * rubriknya, dan baris jumlah di Terpopuler — sehingga penghitung ini berdiri
 * sebaris dengan tetangganya alih-alih menonjol di antaranya. Diminta klien. */
.idm-blok .idm-tayangan {
  font-size: 11px;
}

/* Ikonnya ikut diseragamkan, dan itu butuh kekhususan yang sama dengan tema.
 *
 * Tema memasang `.idm-blok-indeks .idm-blok-indeks__teks svg { height: 18px;
 * color: var(--primary) }` untuk ikon lain di kartu itu, dan aturan itu ikut
 * menangkap ikon mata: terukur 18px berwarna primer di blok indeks sementara
 * blok lain 13px berwarna teks lemah. Selektor satu kelas tidak dapat
 * mengalahkannya betapapun ia ditulis belakangan — kekhususannya (0,1,1) lawan
 * (0,2,1) — jadi yang di sini menyamakannya lebih dulu, lalu menang lewat
 * urutan berkas. */
.idm-blok .idm-tayangan svg {
  width: 1.15em;
  height: 1.15em;
  color: inherit;
}

/* Jarak dari waktu terbit di panel sorotan.
 *
 * Pembungkusnya bukan kotak flex — ia hanya `div` berisi `<time>` — jadi tidak
 * ada `gap` yang berlaku, dan terukur ikon matanya menempel tepat 0px di
 * belakang "WIB". Margin, bukan flex: mengubah `display` pembungkusnya
 * menyentuh tata letak panel sorotan yang sudah cocok. */
.idm-blok-sorotan__tanggal .idm-tayangan {
  margin-left: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Nomor halaman artikel bersambung: lingkaran, bukan lonjong
   ══════════════════════════════════════════════════════════════════════════

   Tema memberinya `padding: 8px 12px` dan `border-radius: 20px`, sehingga
   lebarnya mengikuti LEBAR HURUFNYA. Terukur: "1" menjadi 32x35 sementara "2"
   dan "3" menjadi 36x35 — ketiganya lonjong, dan yang pertama paling sempit
   karena angka satu memang glif tersempit. Dilaporkan klien pada halaman
   pertama, tetapi sebabnya berlaku pada semuanya.

   Kotak persegi berukuran tetap membuat lebarnya berhenti bergantung pada isi.
   `inline-flex` yang memusatkan angkanya, bukan padding — padding tidak dapat
   memusatkan glif yang lebarnya berbeda-beda.

   DILINGKUPI deret nomornya. Tombol "Selanjutnya" memakai kelas yang sama dan
   memang harus berbentuk pil memanjang; menyeragamkannya di luar lingkup ini
   akan memerasnya menjadi lingkaran 36px berisi satu kata terpotong. */
.idm-pagination-artikel__tautan .idm-artikel__halaman-nomor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
}

/* ══════════════════════════════════════════════════════════════════════════
   Gambar kartu berbentuk persegi di lebar ponsel
   ══════════════════════════════════════════════════════════════════════════

   Terukur di 390px sebelum ini: sorotan dan indeks sudah 1:1, sedangkan geser
   dan topik 1,67 serta artikel terkait 120x72 — juga 1,67. Diminta klien
   diseragamkan menjadi 1:1.

   ── DICABUT untuk `geser` dan `topik`, atas permintaan klien ───────────────

   Penyeragaman itu berlaku hanya beberapa hari. Klien melihat hasilnya di
   ponsel dan memintanya kembali seperti semula untuk kedua blok itu: "Pilihan
   Editor" (geser) dan "Topik Khusus" (topik) kembali ke rasio mendatarnya.

   Alasannya terbaca dari layarnya sendiri, dan sama untuk keduanya: kartunya
   selebar hampir seluruh layar, jadi 1:1 berarti gambar setinggi 390px —
   satu kartu memakan seluruh layar pertama, dan yang di sebelahnya tidak lagi
   terlihat terpotong di tepi. Deret yang digeser kehilangan satu-satunya
   petunjuk bahwa ia dapat digeser. Itu persis sebab yang sudah tertulis di
   bawah untuk `kisi_daftar` — hanya saja waktu itu ia tidak diberlakukan ke
   dua blok ini.

   Aturannya DIHAPUS, bukan ditimpa nilai lain: rasio mendatarnya sudah
   dinyatakan di tempat masing-masing (`padding-bottom: 59.8%` untuk topik),
   dan menimpanya di sini berarti dua tempat yang menentukan satu bentuk.

   `terkait` TETAP persegi — klien tidak menyebutnya, dan bentuknya memang
   berbeda: kartunya bertinggi tetap 90px, sehingga gambar 90x90 itulah yang
   membuat gambar dan judul sejajar.

   Blok `kisi_daftar` SENGAJA dibiarkan sejak awal, dengan alasan yang kini
   terbukti berlaku lebih luas: gambarnya selebar layar penuh — terukur
   390x195 — dan memaksanya persegi menghasilkan blok setinggi 390px yang
   menguasai seluruh layar. */

@media (max-width: 1119px) {
  .idm-blok-terkait .idm-blok-terkait__gambar {
    flex-basis: 90px;
    width: 90px;
    height: 90px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Bilah navigasi MELEKAT saat halaman digulir
   ══════════════════════════════════════════════════════════════════════════

   Diminta klien, untuk ponsel maupun desktop: menunya tidak boleh ikut
   tenggelam. Tema sudah menyiapkan bentuk melekatnya — `.idm-navigasi.is-lengket
   { position: sticky }` beserta aturan penyembunyian labelnya — tetapi hanya di
   dalam kueri media desktop, dan tidak ada satu pun kode yang pernah memasang
   kelas itu. Bentuk yang sudah jadi, tanpa saklarnya.

   Melekatnya diberikan TANPA kelas, sehingga ia berlaku di semua lebar dan
   tidak bergantung pada JavaScript sama sekali. Kelas `is-lengket` disisakan
   untuk hal yang memang tidak dapat ditanyakan CSS: apakah ia SEDANG menempel.

   `--idm-lapis-lengket` (10) di bawah lapis header (20) dan hamparan (30):
   bilah yang melayang harus menutupi isi halaman, tetapi tidak boleh menutupi
   drawer menu yang terbuka di atasnya. */
.idm-navigasi {
  position: sticky;
  top: 0;
  z-index: var(--idm-lapis-lengket);
}

/* Penanda setinggi nol yang dipakai pengamat. Ia tidak boleh menambah jarak
 * apa pun ke tata letak — yang dibutuhkan hanya posisinya. */
.idm-navigasi__penanda {
  height: 0;
}

/* ── Beranda: teks biasanya, ikon saat melekat ────────────────────────────
 *
 * Keduanya selalu ada di markup; yang berganti hanya mana yang terlihat.
 * Menukarnya lewat JavaScript berarti menu berkedip berganti bentuk tepat saat
 * pembaca menggulir.
 *
 * HANYA di desktop. Diminta klien begitu, dan alasannya terbaca dari bilahnya
 * sendiri: di ponsel deret kategori sudah digulir mendatar dan setiap butir
 * berebut ruang, sehingga satu butir yang menyusut tidak menolong siapa pun —
 * yang ada pembaca kehilangan kata "Beranda" tanpa mendapat ruang yang berarti. */
.idm-navigasi__beranda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Ikonnya menyusul, bukan mendahului: di lebar mana pun sebelum bilah menempel
 * yang dibaca adalah katanya, dan ikon di depan kata hanya mengulanginya. */
.idm-navigasi .idm-navigasi__ikon {
  display: none;
}

@media (min-width: 1120px) {
  .idm-navigasi.is-lengket .idm-navigasi__ikon {
    display: inline-flex;
    align-items: center;
  }

  .idm-navigasi.is-lengket .idm-navigasi__label-sembunyi {
    /* `clip-path`, bukan `display: none`: labelnya harus hilang dari layar
     * tetapi TETAP terbaca pembaca layar, supaya tautannya tidak berubah
     * menjadi tautan tanpa nama begitu halaman digulir. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Di lebar ponsel, navigasi menempel TEPAT DI BAWAH header.
 *
 * Tema membuat header ikut melekat di lebar ini — sticky, z-index 1000 —
 * sehingga navigasi yang juga menempel di tepi atas tertimbun seluruhnya.
 * Terukur: keduanya sama-sama di atas 0, header setinggi 73px menutupi
 * navigasi setinggi 40px, dan yang terlihat pembaca hanya headernya.
 *
 * Menaikkan z-index navigasi di atas header akan menyelesaikannya dengan cara
 * yang salah: navigasi menutupi header, dan tombol menu ponsel — satu-satunya
 * pintu ke pencarian dan ke rubrik yang tidak muat di bilah — ikut hilang
 * selama halaman digulir.
 *
 * Angkanya diukur JavaScript (lihat `PengamatLengket`) karena tinggi header
 * bergantung pada logo yang diunggah klien. 73px hanya CADANGAN untuk sesaat
 * sebelum pengukuran pertama, dan untuk pembaca tanpa JavaScript; ia terukur
 * pada pemasangan ini, bukan angka yang dikarang. */
@media (max-width: 1119px) {
  .idm-navigasi {
    top: var(--idm-tinggi-header, 73px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Bilah navigasi yang melekat memakai wadah yang SAMA
   ══════════════════════════════════════════════════════════════════════════

   Tema merancang bilah melekatnya membentang penuh: `.is-lengket .idm-wadah`
   disetel `width: 100%` dan daftarnya `justify-content: space-between`.
   Terukur di 1280px — wadah melebar dari 1100px menjadi 1280px dan butirnya
   ikut merenggang, sehingga menu terasa berubah bentuk tepat saat halaman
   digulir.

   Klien memintanya tetap sama. Yang diubah hanya dua deklarasi itu; sisa
   rancangan melekatnya — termasuk pergantian Beranda menjadi ikon — dibiarkan
   apa adanya.

   Lebarnya memakai variabel yang sama dengan wadah biasa, bukan angka yang
   disalin: dua angka kembar di dua tempat adalah cara termudah keduanya
   menyimpang lagi kelak. */
@media (min-width: 1120px) {
  .idm-navigasi.is-lengket .idm-wadah {
    width: var(--idm-lebar-wadah);
  }

  .idm-navigasi.is-lengket ul {
    justify-content: flex-start;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Blok menu
   ══════════════════════════════════════════════════════════════════════════

   Tipe blok baru, jadi tema tidak punya satu aturan pun untuknya — semuanya
   ditulis di sini, bukan dipinjam dari selektor lain yang kebetulan mirip.

   Diminta klien: kaki halaman acuan memuat dua kolom tautan rubrik di samping
   blok merek. Yang dipasang redaksi cukup SATU blok menu; dua kolomnya
   dikerjakan CSS lewat `columns`, bukan dengan dua blok berisi separuh rubrik
   masing-masing.

   Sebabnya bukan kerapian: dua blok separuh berarti rubrik ke-11 yang
   ditambahkan redaksi masuk ke kolom yang salah, dan yang membetulkannya harus
   memindahkan butir antar-blok setiap kali daftarnya berubah. Dengan `columns`
   pembagiannya dihitung ulang sendiri, di setiap lebar layar. */
.idm-blok-menu__daftar {
  margin: 0;
  padding: 0;
  list-style: none;
}

.idm-blok-menu__butir {
  /* `break-inside` menjaga satu tautan tidak terbelah antara dua kolom.
     Tanpanya, butir berlabel panjang dapat pecah di tengah kata. */
  break-inside: avoid;
  margin-bottom: 8px;
}

.idm-blok-menu__butir:last-child {
  margin-bottom: 0;
}

.idm-blok-menu__tautan {
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  color: inherit;
}

.idm-blok-menu__tautan:hover,
.idm-blok-menu__tautan:focus-visible {
  text-decoration: underline;
}

/* ── Di kaki halaman ───────────────────────────────────────────────────────

   Latar kaki gelap, jadi warnanya diambil dari token teks-di-atas-gelap yang
   sama dengan yang dipakai alamat redaksi di kolom sebelahnya. Bukan
   `--idm-warna-teks`: itu warna tulisan di atas kertas, dan di sini ia hilang
   sama sekali. */
.idm-footer .idm-blok-menu__tautan {
  color: var(--idm-warna-teks-atas-gelap-lemah);
}

.idm-footer .idm-blok-menu__tautan:hover,
.idm-footer .idm-blok-menu__tautan:focus-visible {
  color: var(--idm-warna-teks-atas-gelap);
}

/* ── Di ponsel, SELURUH zona Footer — Navigasi tidak ditampilkan ────────────

   Diminta klien, dan permintaannya sudah dua kali: mula-mula "blok menu kaki
   hanya di desktop", lalu "blok Footer Navigasi jangan muncul di mobile".
   Keduanya menuju hal yang sama, dan yang kedua lebih luas — karena itu
   aturannya kini menyasar ZONA, bukan tipe bloknya.

   Bedanya menentukan. Aturan lama hanya menyembunyikan `idm-blok-menu`,
   sehingga blok bertipe lain yang kelak dipasang redaksi di zona yang sama —
   sosial, teks, aplikasi — akan muncul lagi di ponsel tanpa ada yang meminta,
   dan tidak ada satu pun galat yang menunjukkannya. Menyasar zona membuat
   jaminannya berlaku untuk apa pun yang dipasang di sana.

   Aturan lama TETAP ADA di bawah, dan itu bukan kelalaian: ia menjaga hal yang
   berbeda — blok menu yang dipasang di zona kaki LAIN (Merek, Tautan). Klien
   menyebutkan batasnya dengan jelas: di ponsel, satu-satunya menu di kaki
   adalah menu kaki.

   Zona Merek dan Tautan TIDAK disentuh. Klien menyebutnya apa adanya: merek
   dan blok teks dibiarkan seperti sekarang.

   Yang tersisa di kaki versi ponsel karena itu menu redaksi — Redaksi, Pedoman
   Media Siber, Tentang Kami, Kontak — yang dirender komponen kaki sendiri
   sebagai baris terpusat, bukan sebagai blok.

   Alasannya bukan sekadar selera. Di ponsel kaki halaman menjadi satu kolom,
   sehingga sepuluh tautan rubrik berdiri sebagai sepuluh baris penuh: kaki
   halaman memanjang sampai melebihi satu layar, dan yang paling sering dicari
   di sana justru keempat tautan redaksi yang terdorong ke bawahnya. Rubriknya
   sendiri tidak hilang dari ponsel — semuanya sudah ada di drawer menu, satu
   ketukan dari mana pun, dan mengulangnya di kaki tidak menambah satu jalan
   pun yang belum ada.

   Disembunyikan lewat CSS, bukan dengan tidak merendernya. Situs ini dirender
   di server dan tidak tahu lebar layar pembacanya; merender bersyarat menuntut
   pengukuran di peramban, yang berarti kaki halaman berubah bentuk setelah
   halaman tampil. Yang disembunyikan pun sepuluh tautan teks — bukan gambar
   yang tetap terunduh diam-diam.

   'display: none' juga mencabutnya dari pembaca layar, dan itu memang yang
   diinginkan: menyisakannya terbaca sementara tak terlihat menghasilkan dua
   pengalaman kaki halaman yang berbeda pada perangkat yang sama. */
@media (max-width: 1119px) {
  /* Zona Footer — Navigasi, apa pun isinya. */
  .idm-footer__zona--navigasi {
    display: none;
  }

  /* Blok menu di zona kaki LAIN. Lihat catatan di atas. */
  .idm-footer .idm-blok-menu {
    display: none;
  }
}

/* Dua kolom hanya di desktop. Pada 390px dua kolom menyisakan sekitar 170px
   per kolom — cukup sempit untuk membuat label seperti "Entertainment"
   membungkus menjadi dua baris. Aturan ini tetap ditulis walau bloknya kini
   tersembunyi di sana: yang menyembunyikannya adalah keputusan tata letak
   kaki, bukan sifat bloknya, dan blok menu di sidebar tetap memakai gaya yang
   sama. */
@media (min-width: 1120px) {
  .idm-footer .idm-blok-menu__daftar {
    columns: 2;
    column-gap: 48px;
  }

  /* Isi bloknya rata kiri meski bloknya sendiri berdiri di tepi kanan kaki.
     Dua kolom tautan yang rata kanan tidak punya tepi bersama yang dapat
     dipindai mata — dan memindai tepi kiri adalah seluruh gunanya daftar. */
  .idm-footer .idm-blok-menu {
    text-align: left;
  }
}

/* Panji identitas rubrik dan topik.
   ---------------------------------------------------------------------------
   Tema tidak punya gaya apa pun untuk ini: gambar identitas kategori adalah
   hal yang memang tidak ada di tema asal, jadi aturannya milik produk dan
   ditulis di sini (bukan di tema.css, yang hasil generate).

   Rasionya 3:1, bukan 16:9. Panji rubrik hampir selalu berupa poster
   bertulisan — "PROFIL PEBISNIS", "PAHLAWAN NASIONAL" — dan pada 16:9 tulisan
   itu tenggelam di tengah bidang kosong. Tingginya dibatasi supaya panji tidak
   pernah mendorong daftar artikel keluar dari layar pertama. */
.idm-panji-taksonomi {
  position: relative;
  display: block;
  width: 100%;
  /* Cadangan saja. Komponennya menimpa rasio ini dengan rasio berkas aslinya
     bila dimensinya diketahui, sehingga tidak ada bilah kosong sama sekali. */
  aspect-ratio: 3 / 1;
  /* Tinggi dibatasi: panji tegak yang mengambil rasio aslinya bisa setinggi
     satu layar penuh dan mendorong daftar artikel keluar dari pandangan
     pertama. Dengan object-fit: contain, batas ini tidak memotong apa pun —
     ia hanya mengecilkan. */
  max-height: 320px;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 4px;
}

/* Panji dirender UTUH. Aturan tema `.idm-media__gambar img` menyetel
   object-fit: cover pada setiap gambar di dalam wadah bergaya; di sini yang
   benar justru sebaliknya, karena yang terpotong pada poster bertipografi
   adalah tulisannya. Komponennya juga menyetel ini sebaris, dan keduanya
   memang sengaja: yang sebaris menang atas tema, yang di sini menjaga bila
   markupnya kelak dipakai tanpa komponen itu. */
.idm-panji-taksonomi img {
  object-fit: contain;
}

/* Di ponsel panji dibiarkan lebih tinggi (2:1). Pada 390px, rasio 3:1
   menyisakan tinggi sekitar 120px — cukup untuk membuat poster bertulisan
   terpotong sampai tidak terbaca, yang justru membatalkan gunanya. */
@media (max-width: 767px) {
  .idm-panji-taksonomi {
    aspect-ratio: 2 / 1;
    margin-bottom: 16px;
  }
}

/* Keterangan dan kredit foto
   ---------------------------------------------------------------------------
   Tema menata `figcaption`-nya, tetapi tidak mengenal kredit foto sama sekali:
   di WordPress sumbernya kredit diketik redaksi ke dalam kalimat keterangan.
   Di sini keduanya kolom terpisah di pustaka media, jadi keduanya dirender
   sebagai dua elemen — dan kredit diberi bobot yang berbeda karena ia atribusi,
   bukan bagian dari kalimat yang menerangkan fotonya.

   Tidak ada warna yang disetel di sini. Warna teks keterangan datang dari tema
   dan berbeda di mode gelap; menuliskannya ulang berarti satu nilai yang harus
   diingat setiap kali palet tema berubah. `em` dan `opacity` menumpang pada
   nilai yang sudah benar. */
.idm-gambar__keterangan,
.idm-gambar__kredit {
  display: block;
}

.idm-gambar__kredit {
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.78;
}

/* Jarak hanya muncul bila keduanya ada. Foto yang hanya berkredit — di
   produksi jumlahnya lebih banyak daripada yang berketerangan — tidak
   menyisakan celah kosong di atas barisnya. */
.idm-gambar__keterangan + .idm-gambar__kredit {
  margin-top: 3px;
}