/*
 * ============================================================
 *  SEPUTAR BORNEO — TEMA "KANAL"
 * ============================================================
 *
 *  Arah desain 1a dari `redesign/SeputarBorneo Redesign.dc.html`:
 *  portal padat yang dikerjakan rapi. Jumlah berita per layar tetap
 *  tinggi, pola pindai tetap familiar bagi pembaca berita Indonesia,
 *  dan kelima unit iklan tetap masuk dalam alur — bukan ditempel.
 *
 *  Prinsip yang membedakannya dari tampilan lama:
 *
 *  1. HIERARKI. Dulu semua elemen berteriak sama keras. Sekarang ada
 *     satu headline utama yang tak terbantahkan, lalu rel samping,
 *     lalu grid, lalu sidebar.
 *  2. JUDUL UTUH. Tidak ada lagi `substr($judul, 0, 20)` yang memenggal
 *     kata di tengah. Judul mengalir penuh; `text-wrap: pretty` yang
 *     mengurus patahan barisnya.
 *  3. MENU BERTINGKAT. 14 daerah dan 24 Mitra Borneo tetap terlihat
 *     seluruhnya, tapi tersusun sebagai struktur, bukan daftar.
 *
 *  Berkas ini dimuat PALING AKHIR, setelah `bootstrap.min.css` dan
 *  `style.css`. Bootstrap sengaja dipertahankan karena halaman statis
 *  di `data/` dan isi artikel dari CMS memakai kelas gridnya. Seluruh
 *  kelas baru berprefiks `sb-` supaya tidak pernah bentrok, dan blok
 *  iklan di `style.css` (`.ad-slot`, `.ad-placeholder`, `.ad-popup`)
 *  sengaja dibiarkan utuh karena `js/main.js` bergantung padanya.
 */

/* ============================================================
   1. TOKEN
   ============================================================ */

:root {
	/* Warna */
	--sb-tinta:        #12151a;
	--sb-teks:         #4b5462;
	--sb-redup:        #6b7684;
	--sb-redup-2:      #8b95a1;
	--sb-redup-3:      #9aa4b0;

	--sb-garis:        #e2e5ea;
	--sb-garis-halus:  #eef1f4;
	--sb-garis-tegas:  #d7dde4;

	--sb-permukaan:    #ffffff;
	--sb-permukaan-2:  #f4f6f8;
	--sb-permukaan-3:  #f1f4f7;

	--sb-merah:        #c8102e;
	--sb-merah-tua:    #7d1420;
	--sb-merah-latar:  #fff5f6;
	--sb-merah-garis:  #f0d5d9;
	--sb-biru:         #0b4f8a;

	/*
	 * Teks paragraf footer (`.sb-kaki`). Dipisah dari `--sb-redup*` di atas
	 * karena token itu diukur untuk latar terang, sedangkan `.sb-kaki`
	 * selalu berlatar gelap (`--sb-tinta` / `#0c0e12`) di kedua skema warna.
	 * Nilai default ini terukur >= 7:1 (AAA teks normal) terhadap keduanya;
	 * lihat override di bagian 14 untuk skema gelap.
	 */
	--sb-kaki-teks:    #a3adb8;

	/* Huruf */
	--sb-f-judul: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--sb-f-teks:  'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	--sb-f-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Ritme */
	--sb-shell:   1180px;
	--sb-selak:   24px;
	--sb-radius:  3px;
}

/* ============================================================
   2. DASAR
   ============================================================ */

body.sb {
	margin: 0;
	background: var(--sb-permukaan);
	color: var(--sb-tinta);
	font-family: var(--sb-f-teks);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.sb a {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}

.sb a:hover,
.sb a:focus {
	color: var(--sb-merah);
}

/*
 * `style.css:16-22` membuang `outline` pada semua `a:focus`, yang
 * menghapus jejak fokus keyboard di seluruh situs. Dikembalikan di sini
 * dengan cincin fokus yang terlihat, hanya untuk navigasi keyboard.
 */
.sb a:focus-visible,
.sb button:focus-visible,
.sb input:focus-visible,
.sb [tabindex]:focus-visible {
	outline: 2px solid var(--sb-merah);
	outline-offset: 2px;
	border-radius: 2px;
}

.sb h1, .sb h2, .sb h3, .sb h4 {
	margin: 0;
	font-family: var(--sb-f-judul);
	font-weight: 700;
	letter-spacing: -.012em;
	color: var(--sb-tinta);
	text-wrap: pretty;
}

.sb p { margin: 0 0 1em; }
.sb img { max-width: 100%; }

.sb-shell {
	width: 100%;
	max-width: var(--sb-shell);
	margin: 0 auto;
	padding: 0 var(--sb-selak);
}

/* Hanya untuk pembaca layar. */
.sb-visual-sembunyi {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sb-lewati {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 18px;
	background: var(--sb-merah);
	color: #fff;
	font: 600 14px/1 var(--sb-f-teks);
}

.sb-lewati:focus {
	left: 0;
	color: #fff;
}

/* Kicker: label rubrik kecil di atas judul. */
.sb-kicker {
	display: inline-block;
	font: 700 10px/1 var(--sb-f-mono);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--sb-merah);
}

.sb-kicker--biru { color: var(--sb-biru); }
.sb-kicker:hover { color: var(--sb-tinta); }

.sb-meta {
	font: 500 11.5px/1.3 var(--sb-f-teks);
	color: var(--sb-redup-2);
}

/* ============================================================
   3. HEADER
   ============================================================ */

/* --- 3.1 Bilah utilitas --- */

.sb-utilitas {
	background: var(--sb-tinta);
	color: var(--sb-redup-3);
}

.sb-utilitas__isi {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 34px;
	font: 500 11.5px/1 var(--sb-f-teks);
}

.sb-utilitas__kiri,
.sb-utilitas__kanan {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.sb-utilitas__kiri { overflow: hidden; }
.sb-utilitas__tanggal { white-space: nowrap; }
.sb-utilitas__pisah { color: #5d6773; }
.sb-utilitas a:hover { color: #fff; }

.sb-sosial {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 4px;
}

.sb-sosial a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
}

.sb-sosial svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

/* --- 3.2 Masthead --- */

.sb-masthead {
	background: var(--sb-permukaan);
}

.sb-masthead__isi {
	display: flex;
	align-items: center;
	gap: 26px;
	padding-top: 18px;
	padding-bottom: 16px;
}

.sb-masthead__logo img {
	display: block;
	height: 50px;
	width: auto;
}

/*
 * Cadangan teks kalau berkas logo tidak ada di `img/`. Lebih baik nama
 * situs terbaca daripada ikon gambar rusak di masthead setiap halaman.
 * Lihat `include/layout_boot.php`.
 */
.sb-masthead__logo-teks {
	display: block;
	font-family: var(--sb-f-judul);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 50px;
	color: var(--sb-tinta);
}

.sb-cari {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	margin-left: auto;
	padding: 0 6px 0 13px;
	border: 1px solid var(--sb-garis-tegas);
	border-radius: 19px;
	background: var(--sb-permukaan);
	transition: border-color .15s ease;
}

.sb-cari:focus-within { border-color: var(--sb-tinta); }

.sb-cari__ikon {
	flex: none;
	width: 16px;
	height: 16px;
	fill: var(--sb-redup-3);
}

.sb-cari input {
	width: 190px;
	height: 100%;
	border: 0;
	background: none;
	font: 400 13.5px/1 var(--sb-f-teks);
	color: var(--sb-tinta);
	-webkit-appearance: none;
	appearance: none;
}

.sb-cari input::placeholder { color: var(--sb-redup-3); }
.sb-cari input:focus { outline: none; }

.sb-cari button {
	flex: none;
	height: 28px;
	padding: 0 14px;
	border: 0;
	border-radius: 14px;
	background: var(--sb-tinta);
	color: #fff;
	font: 600 12px/1 var(--sb-f-teks);
	cursor: pointer;
	transition: background .15s ease;
}

.sb-cari button:hover { background: var(--sb-merah); }

/* Tombol menu, hanya tampil di layar sempit. */
.sb-menu-tombol {
	display: none;
	flex: none;
	width: 42px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--sb-garis-tegas);
	border-radius: var(--sb-radius);
	background: none;
	cursor: pointer;
}

.sb-menu-tombol__garis,
.sb-menu-tombol__garis::before,
.sb-menu-tombol__garis::after {
	display: block;
	width: 18px;
	height: 2px;
	margin: 0 auto;
	background: var(--sb-tinta);
	transition: transform .18s ease, opacity .18s ease;
}

.sb-menu-tombol__garis::before,
.sb-menu-tombol__garis::after {
	content: "";
	position: relative;
}

.sb-menu-tombol__garis::before { top: -5px; }
.sb-menu-tombol__garis::after  { top: 3px; }

.sb-menu-tombol[aria-expanded="true"] .sb-menu-tombol__garis { background: transparent; }
.sb-menu-tombol[aria-expanded="true"] .sb-menu-tombol__garis::before { transform: translateY(5px) rotate(45deg); }
.sb-menu-tombol[aria-expanded="true"] .sb-menu-tombol__garis::after  { transform: translateY(-3px) rotate(-45deg); }

/* --- 3.3 Navigasi utama --- */

/*
 * Nav menempel di puncak layar saat digulir. Memakai `position: sticky`,
 * bukan kelas `.nav-sticky` + `position: fixed` seperti versi lama —
 * elemen tetap berada dalam alur, jadi konten tidak melompat setinggi
 * navbar begitu kelasnya berganti.
 */
.sb-nav {
	position: sticky;
	top: 0;
	z-index: 30;
	border-top: 2px solid var(--sb-tinta);
	border-bottom: 1px solid transparent;
	background: var(--sb-permukaan);
}

.sb-nav.is-lekat {
	border-bottom-color: var(--sb-garis);
	box-shadow: 0 2px 10px rgba(18, 21, 26, .07);
}

.sb-nav__isi {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
}

.sb-nav__tautan {
	padding: 12px 14px 11px;
	font: 600 13.5px/1 var(--sb-f-teks);
	color: var(--sb-tinta);
	white-space: nowrap;
	border-bottom: 3px solid transparent;
}

.sb-nav__tautan:hover,
.sb-nav__tautan.is-aktif {
	color: var(--sb-merah);
	border-bottom-color: var(--sb-merah);
}

/* --- 3.4 Rel daerah --- */

.sb-rel {
	background: var(--sb-permukaan-2);
	border-bottom: 1px solid var(--sb-garis);
}

/*
 * Dilipat oleh `js/main.js` (`initDaerah()`) saat init, kecuali sedang di
 * salah satu halaman daerah. Tanpa JS kelas ini tidak pernah terpasang,
 * jadi ke-14 tautan tetap terlihat dari server dan perayap (issue #17).
 */
.sb-rel.is-tutup { display: none; }

.sb-rel__isi {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding-top: 4px;
	padding-bottom: 4px;
}

.sb-rel__label {
	flex: none;
	font: 700 10px/1 var(--sb-f-mono);
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--sb-redup);
	padding: 6px 0;
}

.sb-rel__tautan {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 2px;
	min-width: 0;
}

.sb-rel__tautan a {
	padding: 6px 9px;
	font: 500 12px/1 var(--sb-f-teks);
	color: var(--sb-teks);
	white-space: nowrap;
}

.sb-rel__tautan a:hover,
.sb-rel__tautan a.is-aktif {
	color: var(--sb-merah);
}

.sb-rel__tautan a.is-aktif { font-weight: 700; }

/* --- 3.5 Ticker terkini --- */

.sb-ticker {
	background: var(--sb-merah-latar);
	border-bottom: 1px solid var(--sb-merah-garis);
}

.sb-ticker__isi {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 9px;
	padding-bottom: 9px;
}

.sb-ticker__label {
	flex: none;
	padding: 5px 8px;
	border-radius: 2px;
	background: var(--sb-merah);
	color: #fff;
	font: 700 10.5px/1 var(--sb-f-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.sb-ticker__jalur {
	flex: 1;
	min-width: 0;
	display: flex;
	gap: 10px;
	overflow: hidden;
	white-space: nowrap;
	font: 500 13px/1.4 var(--sb-f-teks);
	color: var(--sb-merah-tua);
	-webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
	mask-image: linear-gradient(to right, #000 88%, transparent);
}

/*
 * Butir ticker memakai lebar alaminya (`flex: none`), bukan menyusut
 * sampai terpotong. Kalau dibiarkan menyusut, tiga judul di layar sempit
 * terpangkas jadi "Bandara Tjili…" — persis pemenggalan judul yang
 * hendak dihilangkan desain ini. Kelebihannya ditutup mask di kanan,
 * dan di layar sempit jalurnya bisa digulir mendatar.
 */
.sb-ticker__jalur a { flex: none; }

.sb-ticker__jalur a + a::before {
	content: "·";
	margin-right: 10px;
	color: var(--sb-merah-garis);
}

.sb-ticker__semua {
	flex: none;
	font: 600 12px/1 var(--sb-f-teks);
	color: var(--sb-merah);
}

/* ============================================================
   4. IKLAN — menyelaraskan slot lama dengan lebar shell baru
   ============================================================
   Struktur `.ad-slot > .container > a` dan seluruh aturan tinggi di
   `style.css` sengaja tidak disentuh: kombinator anak langsung itu
   yang menjaga batas tinggi materi, dan `js/main.js` mencocokkan
   popup lewat substring `materi_iklan/` pada `src`. Di sini hanya
   lebar dan jarak yang diselaraskan.
*/

.sb .ad-slot > .container {
	max-width: var(--sb-shell);
	margin: 0 auto;
	padding: 0 var(--sb-selak);
}

.sb .ad-slot--banner {
	margin: 0;
	padding: 12px 0;
	background: var(--sb-permukaan-2);
	border-top: 1px solid var(--sb-garis);
	border-bottom: 1px solid var(--sb-garis);
}

.sb .ad-slot--leaderboard { margin: 0; }

/*
 * Varian banner yang berdiri di dalam kolom konten, bukan sebagai pita
 * selebar halaman. Aturan `flex` untuk beberapa materi berdampingan dari
 * `style.css` tetap berlaku karena `.ad-slot--banner` masih terpasang.
 */
.sb .ad-slot--kolom {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.sb .ad-slot--kolom > .container {
	max-width: none;
	padding: 0;
}

.sb .ad-slot--sidebar {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.sb .ad-placeholder {
	border: 1px dashed var(--sb-garis-tegas);
	border-radius: var(--sb-radius);
	background: var(--sb-permukaan);
	color: var(--sb-redup-3);
	font: 500 11px/1.4 var(--sb-f-teks);
	letter-spacing: .06em;
}

.sb .ad-slot--sidebar .ad-placeholder { min-height: 160px; }

/* ============================================================
   5. TATA LETAK HALAMAN
   ============================================================ */

.sb-halaman {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 32px;
	padding-top: 24px;
	padding-bottom: 32px;
}

.sb-halaman--penuh { grid-template-columns: minmax(0, 1fr); }

.sb-utama {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.sb-sisi {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* Judul bagian dengan garis tebal khas tema. */
.sb-bagian {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding-top: 10px;
	border-top: 2px solid var(--sb-tinta);
}

.sb-bagian__judul {
	font: 800 17px/1 var(--sb-f-judul);
	letter-spacing: -.012em;
}

.sb-bagian__tautan {
	margin-left: auto;
	font: 600 12px/1 var(--sb-f-teks);
	color: var(--sb-biru);
	white-space: nowrap;
}

/* ============================================================
   6. HEADLINE UTAMA
   ============================================================ */

.sb-lead {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 26px;
}

.sb-lead__utama {
	display: flex;
	flex-direction: column;
	gap: 11px;
	min-width: 0;
}

/*
 * Kotak rasio tetap. Arsip `foto_berita/` tidak punya turunan ukuran
 * apa pun dan rasio aslinya beragam (1.30:1, 1.41:1, ada yang potret),
 * sehingga markup lama yang memaksa `width:100%` di atas atribut
 * `height` membuat semua thumbnail gepeng sekaligus jadi sumber
 * pergeseran tata letak. Rasio dikunci di sini lalu `object-fit`
 * yang memotong.
 */
.sb-lead__foto {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--sb-radius);
	background: linear-gradient(135deg, #dfe4ea, #eef1f4);
}

.sb-lead__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.sb-lead__utama:hover .sb-lead__foto img { transform: scale(1.02); }

.sb-lead__jejak {
	display: flex;
	align-items: center;
	gap: 9px;
	font: 700 11px/1 var(--sb-f-mono);
	letter-spacing: .09em;
	text-transform: uppercase;
}

.sb-lead__jejak .sb-lead__cap { color: var(--sb-merah); }
.sb-lead__jejak .sb-lead__pisah { color: var(--sb-garis-tegas); }
.sb-lead__jejak a { color: var(--sb-redup); }

.sb-lead__judul {
	font: 800 34px/1.11 var(--sb-f-judul);
	letter-spacing: -.022em;
}

.sb-lead__dek {
	margin: 0;
	font: 400 15px/1.62 var(--sb-f-teks);
	color: var(--sb-teks);
}

.sb-lead__sisi {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* ============================================================
   7. KARTU
   ============================================================ */

.sb-kartu {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.sb-kartu__foto {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--sb-radius);
	background: linear-gradient(135deg, #e3e7ec, #f1f4f7);
}

.sb-kartu__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.sb-kartu:hover .sb-kartu__foto img { transform: scale(1.03); }

.sb-kartu__teks {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* Judul mengalir penuh — tidak pernah dipotong. */
.sb-kartu__judul {
	font: 700 15.5px/1.28 var(--sb-f-judul);
	letter-spacing: -.008em;
}

.sb-kartu__dek {
	margin: 0;
	font: 400 13.5px/1.55 var(--sb-f-teks);
	color: var(--sb-teks);
}

.sb-kartu--besar .sb-kartu__judul { font-size: 19px; line-height: 1.24; }
.sb-kartu--kecil .sb-kartu__judul { font-size: 14px; }

/* Kartu mendatar untuk daftar hasil pencarian. */
.sb-kartu--lebar {
	flex-direction: row;
	gap: 18px;
	align-items: flex-start;
}

.sb-kartu--lebar .sb-kartu__foto {
	flex: none;
	width: 210px;
	aspect-ratio: 3 / 2;
}

.sb-kartu--lebar .sb-kartu__judul { font-size: 19px; line-height: 1.24; }

.sb-daftar {
	display: flex;
	flex-direction: column;
}

.sb-daftar > .sb-kartu {
	padding: 20px 0;
	border-bottom: 1px solid var(--sb-garis);
}

.sb-daftar > .sb-kartu:first-child { padding-top: 4px; }

/* --- Kartu ringkas: thumbnail kecil di samping --- */

.sb-ringkas {
	display: flex;
	gap: 13px;
	padding: 13px 0;
	border-top: 1px solid var(--sb-garis);
	min-width: 0;
}

.sb-ringkas:first-child { border-top: 0; padding-top: 0; }

.sb-ringkas__foto {
	flex: none;
	width: 84px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--sb-radius);
	background: linear-gradient(135deg, #e3e7ec, #f1f4f7);
}

.sb-ringkas__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sb-ringkas__nomor {
	flex: none;
	width: 22px;
	font: 800 20px/1 var(--sb-f-judul);
	color: var(--sb-garis-tegas);
}

.sb-ringkas__teks {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.sb-ringkas__judul {
	font: 700 15px/1.28 var(--sb-f-judul);
	letter-spacing: -.008em;
}

.sb-ringkas--nomor .sb-ringkas__judul {
	font-family: var(--sb-f-teks);
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.34;
	letter-spacing: 0;
}

.sb-ringkas:hover .sb-ringkas__nomor { color: var(--sb-merah); }

/* --- Grid kartu --- */

.sb-grid {
	display: grid;
	gap: 22px 20px;
}

.sb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- Kolom rubrik --- */

.sb-kolom {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 2px solid var(--sb-tinta);
}

.sb-kolom__satu {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 14px 22px 0;
	border-left: 1px solid var(--sb-garis);
}

.sb-kolom__satu:first-child { padding-left: 0; border-left: 0; }
.sb-kolom__satu:last-child  { padding-right: 0; }

.sb-kolom__label {
	font: 700 10.5px/1 var(--sb-f-mono);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--sb-merah);
}

.sb-kolom__lain {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--sb-garis);
}

.sb-kolom__lain a {
	padding: 10px 0;
	border-bottom: 1px solid var(--sb-garis-halus);
	font: 600 13.5px/1.38 var(--sb-f-teks);
	color: var(--sb-tinta);
}

.sb-kolom__lain a:last-child { border-bottom: 0; }
.sb-kolom__lain a:hover { color: var(--sb-merah); }

/* ============================================================
   8. VIDEO
   ============================================================ */

.sb-video {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.sb-video__bingkai {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--sb-radius);
	background: linear-gradient(135deg, #2a2f36, #12151a);
}

.sb-video__bingkai iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.sb-video__judul {
	font: 700 14px/1.3 var(--sb-f-judul);
}

/* ============================================================
   9. SIDEBAR
   ============================================================ */

.sb-widget {
	min-width: 0;
}

.sb-tab {
	display: flex;
	border-bottom: 1px solid var(--sb-garis);
}

.sb-tab__tombol {
	padding: 10px 12px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	font: 600 12.5px/1 var(--sb-f-teks);
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--sb-redup-2);
	cursor: pointer;
}

.sb-tab__tombol[aria-selected="true"] {
	color: var(--sb-tinta);
	font-weight: 700;
	border-bottom-color: var(--sb-merah);
}

.sb-panel[hidden] { display: none; }

.sb-widget__judul {
	padding-bottom: 10px;
	border-bottom: 2px solid var(--sb-tinta);
	font: 800 15px/1 var(--sb-f-judul);
	letter-spacing: -.01em;
}

/*
 * Kartu direktori Mitra Borneo — 24 kanal, semuanya terlihat.
 *
 * Judul memakai putih dengan penanda merah, bukan teks merah di atas
 * tinta: `#c8102e` pada `#12151a` hanya mencapai rasio kontras sekitar
 * 3,2:1, di bawah ambang WCAG AA untuk teks kecil.
 */
.sb-mitra {
	padding: 18px;
	border-radius: var(--sb-radius);
	background: var(--sb-tinta);
	color: #ccd4dc;
}

.sb-mitra__judul {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 700 10px/1 var(--sb-f-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 10px;
}

.sb-mitra__judul::before {
	content: "";
	width: 14px;
	height: 3px;
	border-radius: 2px;
	background: var(--sb-merah);
}

.sb-mitra p {
	margin: 0 0 13px;
	font: 400 13px/1.55 var(--sb-f-teks);
	color: #ccd4dc;
}

.sb-mitra__daftar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sb-mitra__daftar a {
	padding: 6px 10px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .1);
	font: 600 11px/1 var(--sb-f-teks);
	color: #e6eaee;
}

.sb-mitra__daftar a:hover {
	background: var(--sb-merah);
	color: #fff;
}

/* Kotak buletin di sidebar. */
.sb-kotak {
	padding: 16px;
	border: 1px solid var(--sb-garis);
	border-radius: var(--sb-radius);
}

.sb-kotak h2 {
	font: 800 16px/1.2 var(--sb-f-judul);
	margin-bottom: 6px;
}

.sb-kotak p {
	margin: 0 0 12px;
	font: 400 12.5px/1.5 var(--sb-f-teks);
	color: var(--sb-redup);
}

/* Varian terang form buletin; versi gelapnya ada di blok footer. */
.sb-kotak .sb-buletin { margin-bottom: 0; }

.sb-kotak .sb-buletin input {
	border-color: var(--sb-garis-tegas);
	background: var(--sb-permukaan);
	color: var(--sb-tinta);
}

.sb-kotak .sb-buletin input::placeholder { color: var(--sb-redup-3); }

/* ============================================================
   10. HALAMAN ARTIKEL
   ============================================================ */

.sb-remah {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	/*
	 * Longhand disengaja (issue #18): `.sb-remah` juga memakai `.sb-shell`,
	 * yang menyetel `padding: 0 var(--sb-selak)`. Shorthand tiga-nilai di
	 * sini dulu ikut menimpa kiri/kanan jadi `0`, membuat remah menempel ke
	 * tepi sementara judul dan gambar artikel di sampingnya tetap berjarak.
	 */
	padding-top: 14px;
	font: 500 12px/1.4 var(--sb-f-teks);
	color: var(--sb-redup-2);
}

.sb-remah a { color: var(--sb-redup); }
.sb-remah span[aria-hidden] { color: var(--sb-garis-tegas); }

.sb-artikel { min-width: 0; }

.sb-artikel__cap {
	display: inline-block;
	margin-bottom: 12px;
	font: 700 11px/1 var(--sb-f-mono);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--sb-merah);
}

.sb-artikel__judul {
	font: 800 38px/1.13 var(--sb-f-judul);
	letter-spacing: -.022em;
	margin-bottom: 14px;
}

.sb-artikel__dek {
	margin: 0 0 16px;
	font: 400 18px/1.6 var(--sb-f-teks);
	color: var(--sb-teks);
}

.sb-artikel__baris {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding: 14px 0;
	border-top: 1px solid var(--sb-garis);
	border-bottom: 1px solid var(--sb-garis);
	font: 500 12.5px/1 var(--sb-f-teks);
	color: var(--sb-redup);
	margin-bottom: 22px;
}

.sb-artikel__penulis { color: var(--sb-tinta); font-weight: 600; }

.sb-bagi {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
}

.sb-bagi a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--sb-garis);
	border-radius: 50%;
	color: var(--sb-redup);
}

.sb-bagi a:hover {
	background: var(--sb-tinta);
	border-color: var(--sb-tinta);
	color: #fff;
}

.sb-bagi svg { width: 14px; height: 14px; fill: currentColor; }

.sb-artikel__gambar {
	margin: 0 0 22px;
}

.sb-artikel__gambar img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sb-radius);
	background: var(--sb-permukaan-3);
}

.sb-artikel__gambar figcaption {
	padding-top: 9px;
	font: 400 12.5px/1.5 var(--sb-f-teks);
	color: var(--sb-redup);
}

/*
 * ISI ARTIKEL — pengaturan pertama untuk keluaran WYSIWYG.
 *
 * `berita_red.isi_berita` adalah HTML CKEditor dari puluhan ribu baris
 * arsip dan selama ini tidak pernah punya aturan sama sekali: tanpa
 * ukuran huruf, tanpa lebar baca, tanpa `img{max-width}`. Akibatnya
 * elemen lebar apa pun — tabel tempelan, gambar berukuran piksel keras —
 * meluber horizontal di layar sempit. Blok di bawah menutup itu tanpa
 * menyentuh satu baris pun isi arsip.
 */
.sb-isi {
	max-width: 68ch;
	font: 400 17px/1.75 var(--sb-f-teks);
	color: #22272e;
	overflow-wrap: break-word;
}

.sb-isi > * { margin: 0 0 1.15em; }
.sb-isi p { margin: 0 0 1.15em; }

.sb-isi a {
	color: var(--sb-biru);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sb-isi a:hover { color: var(--sb-merah); }

.sb-isi h1, .sb-isi h2, .sb-isi h3, .sb-isi h4 {
	margin: 1.7em 0 .5em;
	line-height: 1.25;
}

.sb-isi h1, .sb-isi h2 { font-size: 24px; }
.sb-isi h3 { font-size: 20px; }
.sb-isi h4 { font-size: 17px; }

.sb-isi img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sb-radius);
}

.sb-isi figure { margin: 1.6em 0; }

.sb-isi figcaption {
	font: 400 13px/1.5 var(--sb-f-teks);
	color: var(--sb-redup);
	padding-top: 8px;
}

.sb-isi blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--sb-merah);
	font-style: italic;
	color: var(--sb-tinta);
}

.sb-isi ul, .sb-isi ol { padding-left: 1.4em; }
.sb-isi li { margin-bottom: .45em; }

/* Tabel tempelan digulir di dalam kotaknya sendiri, bukan mendorong halaman. */
.sb-isi table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 15px;
}

.sb-isi th, .sb-isi td {
	padding: 8px 12px;
	border: 1px solid var(--sb-garis);
	text-align: left;
}

.sb-isi th { background: var(--sb-permukaan-2); font-weight: 600; }

.sb-isi iframe,
.sb-isi video,
.sb-isi embed,
.sb-isi object {
	max-width: 100%;
	border-radius: var(--sb-radius);
}

.sb-isi pre {
	overflow-x: auto;
	padding: 14px 16px;
	border-radius: var(--sb-radius);
	background: var(--sb-permukaan-2);
	font-size: 14px;
}

/* Sisa gaya inline warisan yang tidak lagi relevan. */
.sb-isi font { font-size: inherit !important; font-family: inherit !important; }

/*
 * Halaman statis di `data/` (`about.php`, `pmc.php`, `disc.php`) masih
 * memakai `container` dan `col-md-12` milik Bootstrap di dalam isinya.
 * Isi berkas itu sengaja tidak disentuh, jadi gutter dan lebar maksimum
 * yang jadi rangkap dinetralkan di sini.
 */
.sb-statis .container,
.sb-statis [class^="col-"],
.sb-statis [class*=" col-"] {
	max-width: none;
	width: auto;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

/* Halaman statis memakai `h4`/`h6` sebagai judul bagian dan isi. */
.sb-statis h4 { font-size: 21px; margin: 1.7em 0 .5em; }
.sb-statis h4:first-child { margin-top: 0; }
.sb-statis h6 { font-size: inherit; font-weight: 400; line-height: inherit; }

/* ============================================================
   11. LISTING DAN PAGINASI
   ============================================================ */

.sb-judul-halaman {
	/* Longhand disengaja — sama alasannya dengan `.sb-remah` di atas. */
	padding-top: 22px;
	padding-bottom: 4px;
}

.sb-judul-halaman h1 {
	font: 800 30px/1.15 var(--sb-f-judul);
	letter-spacing: -.02em;
}

.sb-judul-halaman p {
	margin: 8px 0 0;
	font: 400 14px/1.5 var(--sb-f-teks);
	color: var(--sb-redup);
}

.sb-kosong {
	padding: 40px 24px;
	border: 1px dashed var(--sb-garis-tegas);
	border-radius: var(--sb-radius);
	text-align: center;
	color: var(--sb-redup);
}

.sb-kosong strong { color: var(--sb-tinta); }

.sb-paginasi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding-top: 8px;
}

.sb-paginasi a,
.sb-paginasi span {
	min-width: 36px;
	padding: 8px 11px;
	border: 1px solid var(--sb-garis);
	border-radius: var(--sb-radius);
	font: 600 13px/1 var(--sb-f-teks);
	color: var(--sb-teks);
	text-align: center;
}

.sb-paginasi a:hover {
	border-color: var(--sb-tinta);
	color: var(--sb-tinta);
}

.sb-paginasi .is-aktif {
	background: var(--sb-tinta);
	border-color: var(--sb-tinta);
	color: #fff;
}

.sb-paginasi .is-mati {
	color: var(--sb-garis-tegas);
	border-color: var(--sb-garis-halus);
}

/* ============================================================
   12. FOOTER
   ============================================================ */

.sb-kaki {
	margin-top: 40px;
	background: var(--sb-tinta);
	color: #8f9aa6;
}

.sb-kaki a { color: #c6ced6; }
.sb-kaki a:hover { color: #fff; }

/*
 * `p { color: #000000 }` di style.css berlaku untuk seluruh situs dan
 * selalu menang atas warna yang HANYA diwarisi dari `.sb-kaki` (elemen yang
 * cocok langsung selalu mengalahkan warisan, berapa pun spesifisitasnya) —
 * itu sebabnya alamat, teks buletin, dan hak cipta di footer sempat nyaris
 * tak terbaca (teks hitam di atas latar gelap). Baris ini menyetel warna
 * EKSPLISIT pada tiap <p> di footer supaya tidak lagi bergantung warisan.
 * `:not(.sb-notis)` mengecualikan pesan status buletin (sukses/galat) yang
 * sudah punya warna sendiri di bagian notifikasi.
 */
.sb-kaki p:not(.sb-notis) { color: var(--sb-kaki-teks); }

.sb-kaki__atas {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	gap: 30px;
	padding-top: 40px;
	padding-bottom: 34px;
}

.sb-kaki__merek-teks {
	display: block;
	font-family: var(--sb-f-judul);
	font-size: 22px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 14px;
}

.sb-kaki__merek img {
	display: block;
	height: 40px;
	width: auto;
	margin-bottom: 14px;
	background: #fff;
	padding: 6px 9px;
	border-radius: var(--sb-radius);
}

.sb-kaki__merek p {
	margin: 0 0 10px;
	max-width: 34ch;
	font: 400 12.5px/1.6 var(--sb-f-teks);
}

.sb-kaki__kontak {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, .09);
}

.sb-kaki__kolom {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font: 400 12.5px/1.5 var(--sb-f-teks);
	min-width: 0;
}

.sb-kaki__kolom h2 {
	margin-bottom: 4px;
	font: 700 10px/1 var(--sb-f-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
}

.sb-kaki__buletin p {
	margin: 0 0 10px;
	font: 400 12.5px/1.6 var(--sb-f-teks);
}

.sb-buletin {
	display: flex;
	gap: 6px;
	margin-bottom: 6px;
}

.sb-buletin input {
	flex: 1;
	min-width: 0;
	height: 34px;
	padding: 0 10px;
	border: 1px solid #39424c;
	border-radius: var(--sb-radius);
	background: #1b1f25;
	color: #fff;
	font: 400 12.5px/1 var(--sb-f-teks);
}

.sb-buletin input::placeholder { color: #6b7684; }

.sb-buletin button {
	flex: none;
	height: 34px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--sb-radius);
	background: var(--sb-merah);
	color: #fff;
	font: 600 12.5px/1 var(--sb-f-teks);
	cursor: pointer;
}

.sb-buletin button:hover { background: #a60d26; }

.sb-kaki__mitra-judul { margin-top: 20px; }

.sb-kaki__mitra {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.sb-kaki__mitra a {
	padding: 4px 8px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .07);
	font-size: 11px;
	line-height: 1.4;
}

.sb-kaki__mitra a:hover { background: var(--sb-merah); color: #fff; }

.sb-notis {
	margin: 0 0 10px;
	padding: 8px 11px;
	border-radius: var(--sb-radius);
	font: 500 12.5px/1.5 var(--sb-f-teks);
}

.sb-notis--sukses { background: rgba(46, 160, 90, .15); color: #7fd6a3; }
.sb-notis--galat  { background: rgba(200, 16, 46, .18); color: #ff9aa8; }

.sb-kaki__bawah {
	border-top: 1px solid rgba(255, 255, 255, .09);
	background: #0c0e12;
}

.sb-kaki__bawah-isi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	padding-top: 18px;
	padding-bottom: 18px;
	font: 400 12px/1.5 var(--sb-f-teks);
}

.sb-kaki__bawah-isi p { margin: 0; }

.sb-kaki__bawah-isi nav {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Tombol kembali ke atas. */
.sb-ke-atas {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 40;
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sb-tinta);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
}

.sb-ke-atas.is-tampil { display: flex; }
.sb-ke-atas:hover { background: var(--sb-merah); }
.sb-ke-atas svg { width: 22px; height: 22px; fill: currentColor; }

/* ============================================================
   13. RESPONSIF
   ============================================================
   Satu skala, tiga titik: 1080 / 860 / 620. Menggantikan empat nilai
   yang saling tumpang tindih pada `style.css` (575.98 / 767.98 / 768
   sebagai min sekaligus max / 768.98).
*/

@media (max-width: 1080px) {
	.sb-halaman { grid-template-columns: minmax(0, 1fr) 270px; gap: 26px; }
	.sb-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sb-lead__judul { font-size: 30px; }
	.sb-artikel__judul { font-size: 32px; }
}

@media (max-width: 860px) {
	:root { --sb-selak: 18px; }

	.sb-halaman {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.sb-lead { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.sb-grid--4,
	.sb-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.sb-kolom { grid-template-columns: minmax(0, 1fr); }

	.sb-kolom__satu {
		padding: 18px 0 0;
		border-left: 0;
		border-top: 1px solid var(--sb-garis);
	}

	.sb-kolom__satu:first-child { border-top: 0; padding-top: 14px; }

	.sb-utilitas__kiri .sb-utilitas__pisah,
	.sb-utilitas__kiri a { display: none; }

	.sb-masthead__isi {
		flex-wrap: wrap;
		gap: 14px;
		padding-top: 14px;
	}

	.sb-masthead__logo img { height: 40px; }
	.sb-cari { order: 3; width: 100%; margin-left: 0; }
	.sb-cari input { width: 100%; }
	.sb-menu-tombol { display: block; margin-left: auto; }

	/* Nav jadi panel yang dibuka tombol menu. */
	.sb-nav {
		display: none;
		border-top: 1px solid var(--sb-garis);
		border-bottom: 1px solid var(--sb-garis);
	}

	.sb-nav.is-buka { display: block; }

	.sb-nav__isi { flex-direction: column; padding-top: 4px; padding-bottom: 4px; }

	.sb-nav__tautan {
		padding: 11px 0;
		border-bottom: 1px solid var(--sb-garis-halus);
		border-left: 3px solid transparent;
	}

	.sb-nav__tautan:hover,
	.sb-nav__tautan.is-aktif {
		border-bottom-color: var(--sb-garis-halus);
		border-left-color: var(--sb-merah);
		padding-left: 10px;
	}

	/*
	 * Rel daerah melipat ke bawah label alih-alih digulir mendatar
	 * (issue #18). Sejak panel ini jadi opt-in (issue #17, dibuka lewat
	 * tautan "Daerah"), rel yang digulir tanpa penanda scrollbar
	 * menyembunyikan 11 dari 14 daerah tanpa jejak bahwa sisanya ada.
	 * Pembaca yang sengaja membuka panel ini mengharapkan bisa menelusuri
	 * semua daerah, jadi seluruhnya harus terlihat begitu dibuka.
	 */
	.sb-rel__isi {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
	}

	.sb-rel__tautan { flex-wrap: wrap; }

	.sb-ticker__semua { display: none; }

	.sb-ticker__jalur {
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.sb-ticker__jalur::-webkit-scrollbar { display: none; }

	.sb-artikel__judul { font-size: 27px; }
	.sb-artikel__dek { font-size: 16px; }
	.sb-isi { font-size: 16.5px; }

	.sb-kaki__atas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
}

@media (max-width: 620px) {
	.sb-grid--4,
	.sb-grid--3,
	.sb-grid--2 { grid-template-columns: minmax(0, 1fr); }

	/*
	 * Di bawah ~620px ragam panjang nama daerah (mis. "Kotawaringin Timur")
	 * membuat baris yang melipat bebas (flex-wrap) jadi tidak rata. Grid
	 * dua kolom tetap menampilkan semua 14 tanpa gulir, dengan lebar kolom
	 * konsisten kiri-kanan.
	 */
	.sb-rel__tautan {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2px 10px;
	}

	.sb-rel__tautan a {
		padding: 6px 4px;
		white-space: normal;
		line-height: 1.3;
	}

	.sb-lead__judul { font-size: 25px; }

	.sb-kartu--lebar { flex-direction: column; gap: 10px; }
	.sb-kartu--lebar .sb-kartu__foto { width: 100%; aspect-ratio: 16 / 9; }

	.sb-utilitas__isi { min-height: 32px; font-size: 11px; }
	.sb-utilitas__kanan a:not([aria-label]) { display: none; }

	.sb-artikel__judul { font-size: 23px; }
	.sb-kaki__atas { grid-template-columns: minmax(0, 1fr); }
	.sb-kaki__bawah-isi { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   14. PREFERENSI PENGGUNA DAN CETAK
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.sb *,
	.sb *::before,
	.sb *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

@media (prefers-color-scheme: dark) {
	/*
	 * Footer SENGAJA berlatar gelap di kedua skema — ini bukan bug yang
	 * perlu "diperbaiki" jadi terang saat perangkat memakai dark mode.
	 * Yang berubah hanya kontras teksnya: layar yang sudah diset ke dark
	 * mode biasanya juga diredupkan kecerahannya oleh pengguna, jadi teks
	 * footer dinaikkan sedikit lagi supaya tetap nyaman dibaca. Nilai baru
	 * ini tetap terukur >= 7:1 terhadap kedua latar footer (`--sb-tinta`
	 * dan `#0c0e12` pada `.sb-kaki__bawah`) — lihat catatan token di
	 * bagian 1.
	 */
	:root { --sb-kaki-teks: #b4bdc6; }
}

@media print {
	.sb-utilitas,
	.sb-nav,
	.sb-rel,
	.sb-ticker,
	.sb-sisi,
	.sb-kaki,
	.sb-ke-atas,
	.sb-cari,
	.sb-bagi,
	.ad-slot { display: none !important; }

	.sb-halaman { grid-template-columns: minmax(0, 1fr); }
	.sb-isi { max-width: none; font-size: 12pt; }
	.sb-isi a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}