/*
 * Gaya dasar situs publik.
 *
 * FASE 1: hanya reset minimal dan pengaturan kotak. Hasil merge desktop.css +
 * mobile.css tema KoranWP (5.793 baris) masuk di Fase 4, setelah nama kelasnya
 * ditransformasi lewat reference/peta-kelas.json.
 *
 * Tidak ada warna literal di sini — seluruhnya lewat token (lihat token.css).
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--idm-font-dasar);
  font-size: var(--idm-ukuran-dasar);
  line-height: var(--idm-tinggi-baris);
  color: var(--idm-warna-teks);
  background: var(--idm-warna-latar);
}

img,
picture,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Fokus wajib terlihat — tema asli menghapusnya, dan itu salah satu alasan
   tema lama tidak memenuhi WCAG AA (PRD §13). */
:focus-visible {
  outline: 2px solid var(--idm-warna-primer);
  outline-offset: 2px;
}

/*
 * `.idm-wadah` sengaja TIDAK didefinisikan di sini.
 *
 * Ia adalah kelas milik tema (dulu `.container`), dan tema.css sudah
 * menyetelnya di kedua media query: 1088px tetap di desktop, 100% dengan
 * padding 15px di mobile. Definisi kedua di berkas ini hanya menambahkan
 * `max-width` 1170px yang tidak pernah terpakai dan `padding-inline` yang
 * bersaing dengan padding tema — dua sumber kebenaran untuk satu kelas.
 *
 * Aturannya: dasar.css hanya menata elemen dan kelas milik produk. Kelas yang
 * berasal dari peta tema ditata di tema.css saja.
 */

/*
 * Tautan lewati-ke-konten: terlihat hanya saat menerima fokus keyboard.
 *
 * Memakai teknik pemotongan yang sama dengan .idm-u-hanya-pembaca-layar, bukan
 * `left:-9999px`. Yang terakhir menempatkan kotak elemen jauh di luar kiri
 * halaman, dan itu ikut terhitung sebagai luberan saat menelusuri kenapa
 * halaman bisa digeser ke samping — temuan palsu yang menyamarkan penyebab
 * sesungguhnya.
 */
.idm-u-lewati {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.idm-u-lewati:focus {
  position: fixed;
  width: auto;
  height: auto;
  margin: 0;
  clip-path: none;
  top: var(--idm-spasi-2);
  left: var(--idm-spasi-2);
  z-index: var(--idm-lapis-popup);
  padding: var(--idm-spasi-2) var(--idm-spasi-4);
  background: var(--idm-warna-latar);
  border: 2px solid var(--idm-warna-primer);
}

/*
 * Teks yang hanya dibaca teknologi bantu.
 *
 * Dipakai untuk label kolom isian yang di tema hanya punya placeholder.
 * Placeholder bukan nama yang sah bagi pembaca layar — ia hilang begitu
 * pengguna mengetik, dan sebagian pembaca layar tidak mengumumkannya sama
 * sekali. Labelnya tetap ada, hanya tidak menempati ruang.
 *
 * `clip-path` dengan lebar 1px, bukan `display:none` maupun `visibility:hidden`:
 * kedua yang terakhir mengeluarkan elemennya dari pohon aksesibilitas juga,
 * sehingga labelnya ikut hilang bagi yang membutuhkannya.
 */
.idm-u-hanya-pembaca-layar {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

/*
 * Titik penanda sorotan — BAWAANNYA TIDAK TAMPIL.
 *
 * Markupnya selalu dirender, tetapi ia navigasi untuk layar sempit dan tidak
 * setiap tema memakainya. Tema yang mau menampilkannya menyalakannya sendiri;
 * yang diam tidak berubah sedikit pun oleh kehadiran markup ini.
 *
 * `display: none`, bukan sekadar tak terlihat: dengan begitu ia keluar dari
 * pohon aksesibilitas, sehingga pembaca layar tidak menemukan dua daftar tab
 * yang mengendalikan panel yang sama.
 */
.idm-blok-sorotan__titik {
  display: none;
}

/*
 * Bilah berbagi di kepala artikel — BAWAANNYA TIDAK TAMPIL.
 *
 * Sama seperti titik penanda sorotan: markupnya selalu dirender, dan tema yang
 * memakainya menyalakannya sendiri. Tema yang diam tidak berubah sedikit pun
 * oleh kehadiran markup ini.
 */
.idm-artikel__berbagi {
  display: none;
}

/*
 * Kotak "Baca Juga" — tautan ke artikel lain di tengah tulisan.
 *
 * Digayakan di berkas BERSAMA, bukan per tema, dan itu disengaja: ia ISI
 * artikel, bukan perabot halaman. Kotak tanpa gaya di salah satu tema bukan
 * "tema yang belum menyesuaikan" melainkan cacat — penulis menyisipkannya dan
 * pembaca melihat dua baris teks telanjang di tengah paragraf.
 *
 * Tidak ada tema yang berubah karenanya: simpul ini baru, jadi belum ada satu
 * pun artikel yang memuatnya.
 *
 * Seluruh warnanya token. Kotak ini menonjol dengan warna situs, dan itu yang
 * membuatnya terbaca sebagai bagian dari terbitan alih-alih iklan sisipan.
 */
.idm-baca-juga {
  margin: 20px 0;
  padding: 14px 18px;
  border-left: 5px solid var(--idm-warna-primer);
  background: var(--idm-warna-latar-lemah);
}

.idm-baca-juga__label {
  margin: 0 0 4px;
  color: var(--idm-warna-primer);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}

.idm-baca-juga__tautan {
  display: block;
  color: var(--idm-warna-primer);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.idm-baca-juga__tautan:hover,
.idm-baca-juga__tautan:focus-visible {
  text-decoration: underline;
}

/*
 * Di dalam editor, kotaknya adalah simpul ATOM: ia dipilih utuh, bukan
 * disunting isinya. Penanda pilihannya diberi di sini supaya penulis melihat
 * batas yang jelas sebelum menekan hapus.
 */
.ProseMirror .idm-baca-juga.ProseMirror-selectednode {
  outline: 2px solid var(--idm-warna-primer);
  outline-offset: 2px;
}

/*
 * Pemisah halaman artikel bersambung.
 *
 * Di dalam EDITOR ia harus terlihat — penulis perlu tahu di mana halaman
 * berikutnya dimulai. Di situs publik ia tidak pernah tergambar: isinya sudah
 * dipotong pada penanda ini sebelum dirender, jadi yang tersisa hanya penanda
 * yang kebetulan berdiri di ujung halaman terakhir.
 */
.ProseMirror .idm-pemisah-halaman {
  height: 0;
  margin: 20px 0;
  border: 0;
  border-top: 2px dashed var(--idm-warna-garis);
}

.idm-artikel__article .idm-pemisah-halaman {
  display: none;
}