/*
 * Tampilan Akses News (Okt 2026): gaya bersih Reuters + Tempo.
 * - Latar putih, isi selebar 1200 px di tengah; pita bagian atas/menu/bawah selebar layar.
 * - Huruf Poppins, palet resmi dari paket logo: Navy Pers #0B2850, Merah Akses #D20713,
 *   Merah Terang #FF5A68 (aksen di latar gelap), Abu Media #6B7280, Kertas #F5F3F0.
 * - Motif bagian atas & bawah dari identitas media: gelembung "a" (ikon) dan garis miring merah (huruf k).
 * Dimuat setelah akses.css & style.css, jadi aturan di sini menimpa tampilan dasar.
 */

:root {
	--ak-navy: #0b2850;
	--ak-navy-tua: #071d3c;
	--ak-merah: #d20713;
	--ak-merah-terang: #ff5a68;
	--ak-abu: #6b7280;
	--ak-kertas: #f5f3f0;
	--ak-garis: #e6e3de;
	/* Isi selebar 1200 px di tengah layar; pita warna tetap selebar layar. */
	--ak-tepi: max(40px, calc((100% - 1200px) / 2 + 40px));
	/* Motif: gelembung ikon "a" + garis miring merah, sangat samar. */
	--ak-motif-terang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='130' viewBox='0 0 220 130'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(-8 46 44)' d='M22 18h46a10 10 0 0 1 10 10v26a10 10 0 0 1-10 10H42l-14 14V64h-6a10 10 0 0 1-10-10V28a10 10 0 0 1 10-10z' stroke='%230b2850' stroke-opacity='.07' stroke-width='3'/%3E%3Cpath d='M150 96l22-34' stroke='%23d20713' stroke-opacity='.12' stroke-width='6'/%3E%3Cpath transform='rotate(-8 170 30)' d='M160 14h20a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6h-10l-7 7v-7h-3a6 6 0 0 1-6-6V20a6 6 0 0 1 6-6z' stroke='%230b2850' stroke-opacity='.05' stroke-width='2.5'/%3E%3C/g%3E%3C/svg%3E");
	--ak-motif-terang-lembut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='130' viewBox='0 0 220 130'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(-8 46 44)' d='M22 18h46a10 10 0 0 1 10 10v26a10 10 0 0 1-10 10H42l-14 14V64h-6a10 10 0 0 1-10-10V28a10 10 0 0 1 10-10z' stroke='%230b2850' stroke-opacity='.022' stroke-width='3'/%3E%3Cpath d='M150 96l22-34' stroke='%23d20713' stroke-opacity='.04' stroke-width='6'/%3E%3Cpath transform='rotate(-8 170 30)' d='M160 14h20a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6h-10l-7 7v-7h-3a6 6 0 0 1-6-6V20a6 6 0 0 1 6-6z' stroke='%230b2850' stroke-opacity='.016' stroke-width='2.5'/%3E%3C/g%3E%3C/svg%3E");
	--ak-motif-gelap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='130' viewBox='0 0 220 130'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(-8 46 44)' d='M22 18h46a10 10 0 0 1 10 10v26a10 10 0 0 1-10 10H42l-14 14V64h-6a10 10 0 0 1-10-10V28a10 10 0 0 1 10-10z' stroke='%23ffffff' stroke-opacity='.06' stroke-width='3'/%3E%3Cpath d='M150 96l22-34' stroke='%23ff5a68' stroke-opacity='.16' stroke-width='6'/%3E%3Cpath transform='rotate(-8 170 30)' d='M160 14h20a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6h-10l-7 7v-7h-3a6 6 0 0 1-6-6V20a6 6 0 0 1 6-6z' stroke='%23ffffff' stroke-opacity='.05' stroke-width='2.5'/%3E%3C/g%3E%3C/svg%3E");
	/* Versi lebih samar untuk kaki halaman. */
	--ak-motif-lembut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='130' viewBox='0 0 220 130'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(-8 46 44)' d='M22 18h46a10 10 0 0 1 10 10v26a10 10 0 0 1-10 10H42l-14 14V64h-6a10 10 0 0 1-10-10V28a10 10 0 0 1 10-10z' stroke='%23ffffff' stroke-opacity='.03' stroke-width='3'/%3E%3Cpath d='M150 96l22-34' stroke='%23ff5a68' stroke-opacity='.07' stroke-width='6'/%3E%3Cpath transform='rotate(-8 170 30)' d='M160 14h20a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6h-10l-7 7v-7h-3a6 6 0 0 1-6-6V20a6 6 0 0 1 6-6z' stroke='%23ffffff' stroke-opacity='.025' stroke-width='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Huruf: Poppins di seluruh situs (menimpa "Source Sans 3" dari tampilan dasar) ---------- */
body,
body *:not(pre):not(code):not(kbd):not(samp):not(.iklan-kode) {
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}

/* ---------- Halaman: bersih tanpa bingkai, gradasi, atau pola matahari ---------- */
.ak-page { background: #fff; padding: 0; }
.ak-shell { max-width: none; background: transparent; box-shadow: none; }

/* ---------- Bar atas: tipis, navy tua ---------- */
.ak-top {
	height: 36px; background: var(--ak-navy-tua); padding: 0 var(--ak-tepi);
	font-size: 11px; font-weight: 600; letter-spacing: .08em;
}
.ak-sun-badge { display: none; }
.ak-top a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ak-top-time { color: var(--ak-merah-terang); }
.ak-top-tema { background: #ffffff1f; }
.ak-top-tema:hover, .ak-top-tema:focus-visible { background: #ffffff38; color: #fff; }

/* ---------- Kepala: logo di kiri, cari di kanan, motif samar ---------- */
.ak-head {
	height: 112px; padding: 0 var(--ak-tepi);
	grid-template-columns: auto minmax(0, 1fr) auto;
	/* Motif hanya di sisi kanan, memudar ke kiri supaya logo tetap bersih. */
	background: linear-gradient(90deg, #fff 38%, #ffffffd9 70%, #ffffff8c 100%), var(--ak-motif-terang) right -40px center / 220px 130px repeat-x, #fff;
	border-bottom: 1px solid var(--ak-garis);
}
.ak-head > .ak-loc { display: none; }
.ak-logo { justify-self: start; grid-column: 1; }
.ak-head > .ak-search { grid-column: 3; }
.ak-brand { display: inline-flex; line-height: 0; }
.ak-brand img { display: block; height: 74px; width: auto; max-width: none; }
.ak-brand .ak-logo-gelap { display: none; }
.ak-search { width: 280px; height: 42px; border: 1px solid #d6d3ce; border-radius: 6px; background: #fff; color: var(--ak-abu); }
.ak-search:focus-within { border-color: var(--ak-navy); box-shadow: 0 0 0 3px #0b28501a; }
.ak-icon-btn { color: var(--ak-navy); }

/* ---------- Menu rubrik: pita Navy Pers, garis merah di bawah (seperti mockup kartu pers) ---------- */
.ak-nav {
	height: 50px; padding: 0 var(--ak-tepi);
	background: var(--ak-navy); border-bottom: 3px solid var(--ak-merah);
	box-shadow: 0 4px 14px #0b28501f;
}
.ak-nav-home { width: 32px; height: 32px; border-radius: 6px; background: #ffffff14; color: #fff; margin-right: 10px; }
.ak-nav-home:hover { background: #ffffff29; }
.ak-nav-link { font-size: 13px; font-weight: 600; letter-spacing: .04em; border-top-width: 0; border-bottom-width: 3px; margin-bottom: -3px; }
.ak-nav-link:hover { color: #fff; border-bottom-color: #ffffff59; }
.ak-nav-link.active { border-bottom-color: #fff; }
.ak-drop-panel a:hover, .ak-drop-panel a.active { background: #f5f3f0; color: var(--ak-merah); }

/* ---------- Bar TERKINI: putih bersih, label merah ---------- */
.ak-ticker { padding: 0 var(--ak-tepi); height: 44px; background: #fff; border-bottom: 1px solid var(--ak-garis); }
.ak-ticker-label { border-radius: 2px; font-weight: 700; letter-spacing: .1em; font-size: 11px; }

/* ---------- Isi: selebar 1200 px di tengah ---------- */
@media (min-width: 861px) {
	.ak-dark { padding-left: var(--ak-tepi); padding-right: var(--ak-tepi); }
}
.about-page { max-width: 1200px; }

/* Judul bagian ("BERITA TERBARU"): tegas navy, garis tipis abu dengan potongan merah (gaya Reuters/Tempo). */
.ak-h2 {
	font-weight: 700 !important; font-size: 20px; letter-spacing: .02em; color: var(--f-text);
	border-bottom: 1px solid var(--f-line); position: relative; padding-bottom: 12px;
}
.ak-h2 span { color: var(--ak-merah); }
.ak-h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 3px; background: var(--ak-merah); }

/* Label rubrik: merah, kecil, sudut tegas. */
.ak-badge { background: var(--ak-merah); border-radius: 2px; font-weight: 700; letter-spacing: .08em; font-size: 10.5px; }

/* Judul berita sedikit lebih rapat (Poppins lebih lebar dari huruf lama). */
.ak-dark h1, .ak-dark h2, .ak-dark h3 { letter-spacing: -.005em; }

/* Kotak "Kirim Informasi & Hak Jawab": navy + motif. */
.ak-cta { background: var(--ak-navy) var(--ak-motif-gelap) right -30px top -20px / 220px 130px; border-radius: 8px; }
.ak-cta a { color: var(--ak-navy) !important; }

/* Tombol & chip memakai navy; aktif/hover merah. */
.ak-more { border-color: var(--ak-navy); border-radius: 6px; }
.ak-more:hover { background: var(--ak-navy); }
.ak-chip.active, .ak-chip:hover { background: var(--ak-navy); border-color: var(--ak-navy); }

/* ---------- Kaki halaman: Navy Pers + motif, logo versi latar gelap ---------- */
.ak-footer {
	padding: 52px 0 0;
	background: var(--ak-navy) var(--ak-motif-lembut) left top / 260px 154px;
	border-top: 4px solid var(--ak-merah); color: #dfe6ef;
}
.ak-footer-logo { background: transparent; padding: 0; border-radius: 0; }
.ak-footer .ak-brand img { height: 74px; } /* Sama dengan logo kepala. */
.ak-footer .ak-logo-terang { display: none; }
.ak-footer .ak-logo-gelap { display: block; }
.ak-footer-grid { padding-left: var(--ak-tepi); padding-right: var(--ak-tepi); }
.ak-footer h2 { color: #fff; }
.ak-footer a:hover { color: var(--ak-merah-terang); }
.ak-footer-bottom {
	margin: 0; padding: 16px var(--ak-tepi);
	background: var(--ak-navy-tua); color: #a9b6c8;
}
@media (max-width: 860px) {
	.ak-footer { padding: 32px 0 0; }
	.ak-footer-grid { padding-left: 16px; padding-right: 16px; }
	.ak-footer-bottom { margin: 0; padding: 16px; }
	.ak-footer .ak-brand img { height: 46px; }
}

/* ---------- HP ---------- */
@media (max-width: 860px) {
	.ak-head { height: 72px; padding: 0 8px; grid-template-columns: 44px minmax(0, 1fr) 88px; background-size: 160px 95px; }
	.ak-logo { justify-self: center; grid-column: 2; }
	.ak-brand img { height: 46px; }
	.ak-nav { padding: 0 4px 0 10px; height: 46px; }
	.ak-ticker { padding: 0 16px; }
}
@media (max-width: 360px) {
	.ak-brand img { height: 40px; }
}

/* ---------- Tema gelap: Navy Pers, aksen Merah Terang (sesuai versi logo latar gelap) ---------- */
html:not([data-ak-theme=light]) {
	--f-bg: #0a1f3d; --f-band: #08182f; --f-card: #12294a; --f-line: #1f3a60;
	--f-accent: #ff5a68; --f-blue: #ff5a68;
}
html:not([data-ak-theme=light]) .ak-page { background: var(--f-bg); }
html:not([data-ak-theme=light]) .ak-head { background: linear-gradient(90deg, var(--ak-navy) 38%, #0b2850d9 70%, #0b28508c 100%), var(--ak-motif-gelap) right -40px center / 220px 130px repeat-x, var(--ak-navy); border-bottom-color: #ffffff14; }
html:not([data-ak-theme=light]) .ak-head .ak-logo-terang { display: none; }
html:not([data-ak-theme=light]) .ak-head .ak-logo-gelap { display: block; }
html:not([data-ak-theme=light]) .ak-search { background: #ffffff0f; border-color: #ffffff2e; color: #c9d3e0; }
html:not([data-ak-theme=light]) .ak-search input { color: #fff; }
html:not([data-ak-theme=light]) .ak-icon-btn { color: #fff; }
html:not([data-ak-theme=light]) .ak-nav { background: var(--ak-navy-tua); }
html:not([data-ak-theme=light]) .ak-ticker { background: var(--f-band); border-bottom-color: var(--f-line); }
html:not([data-ak-theme=light]) .ak-h2 span { color: var(--ak-merah-terang); }
html:not([data-ak-theme=light]) .ak-h2::after { background: var(--ak-merah-terang); }
html:not([data-ak-theme=light]) .ak-footer { background-color: var(--ak-navy-tua); border-top-color: var(--ak-merah-terang); }
html:not([data-ak-theme=light]) .ak-footer-bottom { background: #051327; }

/* =====================================================================
 * Variasi tata letak (acuan Reuters + Tempo), supaya tidak serupa felanews.id
 * ===================================================================== */

/* Foto tanpa gambar (berita lama yang fotonya hilang): ikon gelembung "a" di latar Kertas. */
.ak-item-img, .ak-rubrik-img, .ak-related-img {
	background: url("../img/ikon-akses-192.png") center / 52px no-repeat, var(--ak-kertas);
}
html:not([data-ak-theme=light]) .ak-item-img,
html:not([data-ak-theme=light]) .ak-rubrik-img,
html:not([data-ak-theme=light]) .ak-related-img { background: url("../img/ikon-akses-gelap-192.png") center / 52px no-repeat, var(--f-card); }

.ak-foto-kosong { background: url("../img/ikon-akses-192.png") center / 72px no-repeat, var(--ak-kertas); }
.ak-foto-kosong::before { content: none; }
html:not([data-ak-theme=light]) .ak-foto-kosong { background: url("../img/ikon-akses-gelap-192.png") center / 72px no-repeat, var(--f-card); }

/* Sudut foto tegas (gaya kantor berita), bukan membulat. */
.ak-item-img, .ak-rubrik-main .ak-rubrik-img, .ak-rubrik-card .ak-rubrik-img, .ak-related-img,
.ak-figure-img, .ak-hero > .ak-foto { border-radius: 2px; }

/* Label rubrik ala Tempo: teks merah kapital kecil, tanpa kotak. */
.ak-badge {
	background: none; color: var(--ak-merah) !important; padding: 0; border-radius: 0;
	font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
}
html:not([data-ak-theme=light]) .ak-badge { color: var(--ak-merah-terang) !important; }

/* Judul bagian ala Reuters: garis navy tebal di ATAS, teks kapital kecil. */
.ak-h2 {
	font-size: 15px !important; letter-spacing: .1em; text-transform: uppercase;
	border-top: 3px solid var(--f-text); border-bottom: 0; padding: 12px 0 0; margin-bottom: 4px;
}
.ak-h2::after { content: none; }

/* Berita utama: foto lebar, judul besar DI BAWAH foto (bukan di atas foto seperti felanews.id). */
.ak-hero { height: auto; background: none; border-radius: 0; overflow: visible; }
.ak-hero > .ak-foto { height: 420px; overflow: hidden; }
.ak-hero-text { position: static; padding: 18px 0 0; background: none; gap: 10px; }
.ak-hero h1 { color: var(--f-text); font-size: 34px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.ak-hero:hover h1 { color: var(--ak-merah); }
.ak-hero .ak-meta { color: var(--f-muted); font-size: 13px; }

/* Daftar berita ala Reuters: teks di kiri, foto kecil di kanan, garis pemisah tipis. */
.ak-item { grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; padding: 22px 0; }
.ak-item-img { order: 2; height: 124px; }
.ak-item-text { justify-content: flex-start; gap: 8px; }
.ak-item-title { font-size: 19px; line-height: 1.35; }
.ak-item:hover .ak-item-title { color: var(--ak-merah); }

/* Berita Populer ala Tempo: angka merah tegak, garis tipis. */
.ak-rank-n { color: var(--ak-merah) !important; font-style: normal !important; font-weight: 700 !important; font-size: 26px !important; min-width: 44px; }
html:not([data-ak-theme=light]) .ak-rank-n { color: var(--ak-merah-terang) !important; }

/* Pilih Kabupaten/Kota: daftar dua kolom bergaris, bukan tombol bulat. */
.ak-aside-block .ak-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.ak-chip {
	border: 0; border-bottom: 1px solid var(--f-line); border-radius: 0; padding: 11px 0;
	font-size: 13.5px; font-weight: 500; display: flex; justify-content: space-between; align-items: center;
}
.ak-chip::after { content: "›"; color: var(--ak-merah); font-weight: 700; }
.ak-chip.active, .ak-chip:hover { background: none; border-color: var(--f-line); color: var(--ak-merah) !important; }

/* Tombol "Muat berita lainnya": persegi navy. */
.ak-more { border-radius: 2px; background: var(--ak-navy); color: #fff !important; border-color: var(--ak-navy); }
.ak-more:hover { background: var(--ak-merah); border-color: var(--ak-merah); }

/* Rubrik Daerah: kartu tanpa sudut membulat, judul navy. */
.ak-rubrik-main strong { font-size: 24px; }

@media (max-width: 860px) {
	.ak-hero { margin: 0; }
	.ak-hero > .ak-foto { height: 230px; margin: 0 -16px; width: auto; }
	.ak-hero-text { padding: 14px 0 0; }
	.ak-hero h1 { font-size: 22px; }
	.ak-item { grid-template-columns: minmax(0, 1fr) 112px; gap: 14px; padding: 16px 0; }
	.ak-item-img { height: 80px; }
	.ak-item-title { font-size: 15px; order: 0; }
}

/* =====================================================================
 * Kerangka gaya Tempo (Okt 2026): supaya berbeda dari felanews.id & tvonlinetidore.net
 * - Tanpa bar atas berwarna; tanggal & jam di baris logo.
 * - Menu rubrik PUTIH (teks navy, garis merah saat aktif), bukan pita berwarna.
 * - Berita utama: foto & judul berdampingan selebar halaman; Populer pindah ke kolom samping.
 * - Berita Terbaru di beranda berupa kartu dalam kisi.
 * - Kaki halaman terang (Kertas), bukan gelap.
 * ===================================================================== */

/* Bagian atas */
@media (min-width: 861px) {
	.ak-top { display: none; }
	.ak-head { display: flex; align-items: center; gap: 24px; height: 104px; }
	.ak-head > .ak-search { order: 3; width: 240px; }
	.ak-head-tanggal { order: 2; margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--ak-abu); white-space: nowrap; }
	.ak-head-m { order: 4; display: flex; }
	.ak-head-m .ak-icon-btn { display: inline-flex; width: 42px; height: 42px; border: 1px solid #d6d3ce; border-radius: 6px; }
}
@media (min-width: 861px) {
	.ak-head-m .ak-icon-btn[data-akses-cari] { display: none; } /* Komputer: kotak cari sudah tampil. */
}
@media (max-width: 860px) {
	.ak-head-tanggal { display: none; }
}

/* Menu rubrik putih */
.ak-nav {
	background: #fff; color: var(--ak-navy); height: 48px;
	border-top: 1px solid var(--ak-garis); border-bottom: 1px solid var(--ak-garis); box-shadow: none;
}
.ak-nav-home { background: var(--ak-kertas); color: var(--ak-navy); }
.ak-nav-home:hover { background: #ebe8e3; }
.ak-nav-link { color: var(--ak-navy); font-weight: 600; }
.ak-nav-link:hover { color: var(--ak-merah); border-bottom-color: transparent; }
.ak-nav-link.active { color: var(--ak-merah); border-bottom-color: var(--ak-merah); }

/* TERKINI: label teks merah, tanpa kotak */
.ak-ticker { background: var(--ak-kertas); border-bottom: 0; }
.ak-ticker-label { background: none; color: var(--ak-merah); padding: 0 14px 0 0; border-right: 2px solid var(--ak-merah); border-radius: 0; font-size: 12px; }

/* Berita utama berdampingan: foto kiri, judul + ringkasan kanan */
.ak-row-hero { display: block; }
.ak-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.ak-hero > .ak-foto { height: 440px; }
.ak-hero-text { padding: 0; gap: 14px; }
.ak-hero h1 { font-size: 36px; line-height: 1.18; }
.ak-hero-ringkas { color: var(--f-body); font-size: 16px; line-height: 1.6; }
.ak-hero-ringkas:empty { display: none; }

/* Berita Terbaru (beranda): kartu dalam kisi 2 kolom, berita pertama melebar */
.ak-kisi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.ak-kisi .ak-item { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; align-content: start; }
.ak-kisi .ak-item-img { order: -1; height: 190px; }
.ak-kisi .ak-item-title { font-size: 17px; }
.ak-kisi .ak-item:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.ak-kisi .ak-item:first-child .ak-item-img { height: 260px; }
.ak-kisi .ak-item:first-child .ak-item-title { font-size: 24px; }

/* Kaki halaman terang (Kertas) */
.ak-footer {
	background: var(--ak-kertas) var(--ak-motif-terang-lembut) left top / 260px 154px; color: var(--ak-navy);
	border-top: 3px solid var(--ak-merah);
}
.ak-footer .ak-logo-terang { display: block; }
.ak-footer .ak-logo-gelap { display: none; }
.ak-footer h2 { color: var(--ak-navy); }
.ak-footer a { color: var(--ak-navy); }
.ak-footer a:hover { color: var(--ak-merah); }
.ak-footer-info, .ak-footer-info li { color: #3c4a5c; }
.ak-footer-info strong { color: var(--ak-navy); }
.ak-footer .ak-social a, .ak-footer .ak-social span { background: #fff; color: var(--ak-navy) !important; border: 1px solid var(--ak-garis); opacity: 1; }
.ak-footer-bottom { background: var(--ak-navy); color: #c9d3e0; }
.ak-footer .ak-social svg, .ak-footer-info svg { color: var(--ak-navy) !important; opacity: 1 !important; }
html:not([data-ak-theme=light]) .ak-footer .ak-social svg, html:not([data-ak-theme=light]) .ak-footer-info svg { color: #fff !important; }

@media (max-width: 860px) {
	.ak-hero { grid-template-columns: 1fr; gap: 0; }
	.ak-hero > .ak-foto { height: 230px; }
	.ak-hero-text { padding: 14px 0 0; gap: 8px; }
	.ak-hero h1 { font-size: 22px; }
	.ak-hero-ringkas { font-size: 14px; }
	.ak-kisi { grid-template-columns: 1fr; }
	.ak-kisi .ak-item, .ak-kisi .ak-item:first-child { grid-template-columns: minmax(0, 1fr) 112px; gap: 14px; padding: 16px 0; }
	.ak-kisi .ak-item-img, .ak-kisi .ak-item:first-child .ak-item-img { order: 2; height: 80px; }
	.ak-kisi .ak-item-title, .ak-kisi .ak-item:first-child .ak-item-title { font-size: 15px; }
	.ak-kisi .ak-item:first-child { grid-template-columns: 1fr; }
	.ak-kisi .ak-item:first-child .ak-item-img { order: -1; height: 200px; }
	.ak-kisi .ak-item:first-child .ak-item-title { font-size: 18px; }
}

/* Tema gelap untuk kerangka baru */
html:not([data-ak-theme=light]) .ak-nav { background: var(--ak-navy); color: #fff; border-color: #ffffff14; }
html:not([data-ak-theme=light]) .ak-nav-link { color: #fff; }
html:not([data-ak-theme=light]) .ak-nav-link.active, html:not([data-ak-theme=light]) .ak-nav-link:hover { color: var(--ak-merah-terang); border-bottom-color: var(--ak-merah-terang); }
html:not([data-ak-theme=light]) .ak-nav-home { background: #ffffff14; color: #fff; }
html:not([data-ak-theme=light]) .ak-head-tanggal { color: #a9b6c8; }
html:not([data-ak-theme=light]) .ak-head-m .ak-icon-btn { border-color: #ffffff2e; }
html:not([data-ak-theme=light]) .ak-ticker { background: var(--f-band); }
html:not([data-ak-theme=light]) .ak-ticker-label { color: var(--ak-merah-terang); border-color: var(--ak-merah-terang); }
html:not([data-ak-theme=light]) .ak-footer { background: var(--ak-navy-tua) var(--ak-motif-lembut) left top / 260px 154px; color: #dfe6ef; }
html:not([data-ak-theme=light]) .ak-footer .ak-logo-terang { display: none; }
html:not([data-ak-theme=light]) .ak-footer .ak-logo-gelap { display: block; }
html:not([data-ak-theme=light]) .ak-footer h2, html:not([data-ak-theme=light]) .ak-footer a, html:not([data-ak-theme=light]) .ak-footer-info strong { color: #fff; }
html:not([data-ak-theme=light]) .ak-footer-info, html:not([data-ak-theme=light]) .ak-footer-info li { color: #c9d3e0; }
html:not([data-ak-theme=light]) .ak-footer .ak-social a, html:not([data-ak-theme=light]) .ak-footer .ak-social span { background: #ffffff0f; color: #fff; border-color: #ffffff1f; }

/* HP (permintaan pemilik, 4 Okt 2026): ikon ☰ di kiri tulisan BERANDA (baris menu);
 * baris logo: logo rata kiri, ikon cari & tema gelap di kanan. */
@media (max-width: 860px) {
	.ak-head > .ak-icon-btn[data-akses-menu] { display: none; }
	.ak-head { grid-template-columns: minmax(0, 1fr) 88px; padding: 0 6px 0 14px; }
	.ak-logo { grid-column: 1; grid-row: 1; justify-self: start; }
	.ak-head-m { grid-column: 2; grid-row: 1; justify-self: end; }
	.ak-nav-home { display: inline-flex; width: 32px; height: 32px; margin-right: 6px; }
}

/* ---------- Wadah "Utama" beranda (meniru tvonlinetidore.net, 4 Okt 2026) ----------
   Label "Utama" di kiri, Berita Utama bergantian (maks. 5, lihat aksesnews_daftar_berita_utama)
   di tengah, dan Berita Populer di kanan. */
.ak-wadah { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0 24px; border-top: 1px solid var(--f-line); padding: 12px 0 30px; }
.ak-wadah-kepala h2 { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 800; color: var(--f-text); }
.ak-wadah-kepala h2::before { content: ""; display: block; width: 36px; height: 4px; background: var(--ak-merah); margin-bottom: 8px; }
.ak-utama { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; min-width: 0; }
.ak-lead a { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.ak-lead-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ak-kertas); }
.ak-lead-img > .ak-foto { height: 100%; }
.ak-lead-teks { display: flex; flex-direction: column; gap: 10px; }
.ak-lead-judul { margin: 0; font-size: 34px; line-height: 1.12; font-weight: 800; color: var(--f-text); overflow-wrap: anywhere; }
.ak-lead a:hover .ak-lead-judul { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ak-kicker { color: var(--ak-merah); font-weight: 800; }
.ak-kicker::after { content: " /"; color: var(--f-muted); font-weight: 400; }
html:not([data-ak-theme=light]) .ak-kicker { color: var(--ak-merah-terang); }
.ak-lead-ringkas { color: var(--f-muted); font-size: 16px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ak-lead-ringkas:empty { display: none; }
.ak-lead-waktu { color: var(--f-muted); font-size: 12.5px; }
.ak-utama-samping { border-left: 1px solid var(--f-line); padding-left: 24px; min-width: 0; }
.ak-utama-samping .ak-h2 { font-size: 20px !important; font-weight: 800; line-height: 1.15; text-transform: none; letter-spacing: 0; border: 0; padding: 0 0 12px; margin: 0; color: var(--f-text); }
.ak-utama-samping .ak-h2::before { content: ""; display: block; width: 36px; height: 4px; background: var(--ak-merah); margin-bottom: 8px; }
.ak-utama-samping .ak-h2 span, html:not([data-ak-theme=light]) .ak-utama-samping .ak-h2 span { color: inherit; }
.ak-utama-samping .ak-rank { border-top: 1px solid var(--f-line); border-bottom: 0; align-items: center; }
.ak-utama-samping .ak-rank-n { color: var(--f-muted) !important; font-style: italic !important; font-weight: 300 !important; font-size: 40px !important; border-right: 1px solid var(--f-line); padding-right: 8px; }
html:not([data-ak-theme=light]) .ak-utama-samping .ak-rank-n { color: var(--f-muted) !important; }
.ak-utama-samping .ak-rank-t { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 1100px) { .ak-utama { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
@media (min-width: 861px) and (max-width: 1100px) { .ak-wadah { grid-template-columns: 150px minmax(0, 1fr); } }

/* Hanya Berita Utama yang tampil yang menentukan tinggi wadah; berita lain ditumpuk di atasnya (posisi absolut)
   untuk efek memudar. Dulu semua berita ikut menentukan tinggi, sehingga berita berjudul pendek menyisakan ruang
   kosong besar sebelum tombol panah. Perubahan tinggi saat berganti dibuat halus oleh skrip tema (meniru
   tvonlinetidore.net, 4 Okt 2026). */
.ak-lead-wadah { min-width: 0; align-self: start; } /* Tidak ikut ditarik setinggi kolom Berita Populer di komputer. */
.ak-lead-wadah[data-akses-siap] { position: relative; overflow: hidden; transition: height .45s ease; }
.ak-lead-wadah[data-akses-siap] > .ak-lead { position: absolute; top: 0; left: 0; right: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.ak-lead-wadah[data-akses-siap] > .ak-lead.aktif { position: relative; opacity: 1; visibility: visible; transition: opacity .6s ease; }
.ak-geser-kendali { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; } /* Tombol ‹ titik › di tengah (permintaan pemilik, 4 Okt 2026). */
.ak-geser-panah { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--f-line); background: transparent; color: var(--f-text); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; }
.ak-geser-panah:hover { border-color: var(--ak-merah); color: var(--ak-merah); }
.ak-geser-titik { display: flex; gap: 6px; }
.ak-geser-titik button { width: 26px; height: 4px; border: 0; padding: 0; border-radius: 2px; background: var(--f-line); cursor: pointer; }
.ak-geser-titik button[aria-current="true"] { background: var(--ak-merah); }
@media (prefers-reduced-motion: reduce) {
	.ak-lead-wadah[data-akses-siap],
	.ak-lead-wadah[data-akses-siap] > .ak-lead,
	.ak-lead-wadah[data-akses-siap] > .ak-lead.aktif { transition: none; }
}
@media (max-width: 860px) {
	.ak-wadah { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 24px; }
	.ak-wadah-kepala h2 { font-size: 20px; }
	.ak-utama { grid-template-columns: minmax(0, 1fr); }
	.ak-utama-samping { border-left: 0; padding-left: 0; border-top: 1px solid var(--f-line); padding-top: 14px; }
	.ak-lead-judul { font-size: 26px; }
}

/* Menu rubrik yang menempel di atas tidak tertutup bilah admin WordPress saat redaksi sedang masuk
   (bilah admin menempel 32 px; 46 px di layar ≤782 px; di layar ≤600 px ikut tergulir) (4 Okt 2026). */
.admin-bar .ak-nav { top: 32px; }
.admin-bar .ak-menu { top: 88px; max-height: calc(100vh - 88px); }
@media (max-width: 860px) {
	.admin-bar .ak-menu { top: 82px; max-height: calc(100vh - 82px); }
}
@media screen and (max-width: 782px) {
	.admin-bar .ak-nav { top: 46px; }
	.admin-bar .ak-menu { top: 96px; max-height: calc(100vh - 96px); }
}
@media screen and (max-width: 600px) {
	.admin-bar .ak-nav { top: 0; }
	.admin-bar .ak-menu { top: 50px; max-height: calc(100vh - 50px); }
}
