/*--------------------------------------------------------------
# AMP-specific CSS
File terpisah (bukan string PHP) supaya lebih mudah di-edit &
urutan cascade-nya TERJAMIN benar (di-enqueue dengan dependency
eksplisit ke 'styleku', lihat inc/amp-support.php) -- sebelumnya
beberapa override sempat tidak konsisten kena, diduga karena
urutan penyisipan via wp_add_inline_style() tidak selalu pasti
posisinya setelah digabung ulang oleh plugin AMP.

Struktur saat ini: SEMUA untuk AMP mobile (satu-satunya target
saat ini). Kalau nanti dibutuhkan AMP desktop dengan aturan
berbeda, buat file baru misalnya css/amp-desktop.css, enqueue
serupa (lihat inc/amp-support.php), dan pisahkan bagian yang
memang perlu berbeda ke sana -- jangan campur di file ini supaya
tetap mudah dibedakan mana utk mobile mana utk desktop.
--------------------------------------------------------------*/

/* ============================================================
 * BAGIAN A -- Komponen AMP (tata letak, TIDAK terikat dark/light)
 * ============================================================ */

/* Toggle buka/tutup Trending/Cari/Bagikan di menu bawah: CSS MURNI
   ("checkbox hack"), BUKAN lagi <amp-lightbox> + amp-bind ([open]
   binding tidak benar-benar bisa menutup lagi saat ikon yang sama
   diketuk ulang -- amp-lightbox ternyata tak mendukungnya). Checkbox
   tersembunyi + <label for="..."> sebagai pemicu (label mengklik
   checkbox = toggle otomatis oleh browser), kotak konten muncul lewat
   selector :checked ~ murni CSS, dijamin bekerja di semua browser
   tanpa bergantung dukungan komponen AMP tertentu.

   Karena kotak konten (.kbn-popup-panel) sekarang <div> BIASA (bukan
   <amp-lightbox>), TIDAK ADA lagi perilaku internal AMP yang bisa
   menambahkan jarak/posisi di luar kendali kita -- ini sekaligus
   menutup celah "ada jarak aneh antara menu & popup" yang pernah
   terjadi saat masih pakai amp-lightbox. */
.kbn-popup-checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.kbn-popup-panel {
	display: none;
}

#kbnSearchCheck:checked ~ #kbnSearchPopupPanel,
#kbnShareCheck:checked ~ #kbnSharePopupPanel,
#kbnTrendingCheck:checked ~ #kbnTrendingPopupPanel {
	display: block;
}

.kbn-popup-backdrop {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 100025;
	cursor: pointer;
}

#kbnSearchCheck:checked ~ #kbnSearchBackdrop,
#kbnShareCheck:checked ~ #kbnShareBackdrop,
#kbnTrendingCheck:checked ~ #kbnTrendingBackdrop {
	display: block;
}

/* Kartu konten popup: position:fixed LANGSUNG di sini (bukan
   position:absolute relatif ke .kbn-popup-panel) supaya tidak
   bergantung sama sekali pada bagaimana .kbn-popup-panel dirender. */
.kbn-popup-panel .kbn-amp-lightbox-inner {
	position: fixed;
	left: 0;
	right: 0;
	max-height: 75vh;
	overflow-y: auto;
	background: var(--bg-color-dua, #f5f5f6);
	border-radius: 16px 16px 0 0;
	padding: 20px 16px 24px;
	box-sizing: border-box;
	box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.18);
	z-index: 100030;
}

.kbn-amp-lightbox-inner {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 75vh;
	overflow-y: auto;
	background: var(--bg-color-dua, #f5f5f6);
	border-radius: 16px 16px 0 0;
	padding: 20px 16px 24px;
	box-sizing: border-box;
	box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.18);
}

/* Popup yang dipicu DARI menu bawah (Trending/Cari/Bagikan) harus
   berhenti TEPAT DI ATAS bar menu bawah yang fixed (bukan menimpanya
   ataupun menempel ke dasar layar). Nilai ini dicocokkan dengan tinggi
   nyata .kbn-bottom-nav-item (padding 8+10 + ikon 24 + gap 4 + label
   ~14 ≈ 60px) -- var(--kbn-bottom-nav-height) dari JS lama tak berlaku
   di AMP (JS di-dequeue), jadi pakai fallback yang sudah dicocokkan. */
.kbn-amp-lightbox-inner.kbn-above-bottom-nav {
	bottom: var(--kbn-bottom-nav-height, 60px);
}
.kbn-popup-panel .kbn-amp-lightbox-inner.kbn-above-bottom-nav {
	bottom: var(--kbn-bottom-nav-height, 60px);
}

.kbn-amp-lightbox-close {
	position: absolute;
	top: 8px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: rgba(128, 128, 128, 0.15);
	color: var(--font-color, #1a1a1a);
	font-size: 16px;
	line-height: 32px;
	text-align: center;
	padding: 0;
	cursor: pointer;
	z-index: 1;
}

/* Kotak popup search HEADER -- dulu <amp-lightbox> + on="tap:...open/close",
   TERNYATA kena bug yang sama seperti popup menu bawah (tidak bisa dibuka
   lagi setelah ditutup, lihat catatan checkbox-hack di atas & di
   inc/mobile-bottom-nav.php) -- sekarang diganti teknik checkbox-hack yang
   SAMA, markup & class-nya SUDAH universal (didefinisikan lengkap di
   style.css, dipakai AMP & non-AMP sekaligus), jadi TIDAK PERLU override
   apa pun lagi di sini. Blok ini sengaja dikosongkan (bukan dihapus)
   supaya riwayatnya jelas kalau ada yang mencari popup search header. */

/* Catatan & kotak salin-tautan -- dipakai bersama popup share ARTIKEL
   (kibaran_social_share(), inc/core.php) DAN popup "Bagikan" menu bawah.
   AMP tak mengizinkan JS kustom sama sekali, jadi "klik sekali langsung
   tersalin + toast" seperti non-AMP (navigator.clipboard.writeText())
   tak bisa direplikasi persis -- ini pendekatan AMP-safe terdekat: input
   readonly berisi link lengkap, disalin manual lewat ketuk-tahan
   (menu konteks bawaan browser/OS), tanpa JS sama sekali. */
.kbn-amp-share-note {
	margin: 8px 0 0;
	text-align: center;
	font-size: 12px;
	color: rgba(128, 128, 128, 0.8);
}

.kbn-amp-copy-link {
	margin-top: 14px;
}

.kbn-amp-copy-link-input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid rgba(128, 128, 128, 0.3);
	background: var(--warnaheader, #ffffff);
	color: var(--font-color, #1a1a1a);
	font-size: 13px;
}

/* Popup share ARTIKEL (ikon di samping ikon komentar) -- kartu SELALU
   terang (.pjs-in-popup putih, desain asli, tidak ikut dark mode),
   jadi tombol tutup & posisinya perlu diatur terpisah dari popup-popup
   lain yang gelap.

   position:fixed dipaksa eksplisit (bukan display:flex) -- pelajaran
   dari popup lain: amp-lightbox tampaknya mengabaikan display:flex
   pada dirinya sendiri, bikin konten jatuh ke posisi default (dulu
   nempel di atas, bukan di tengah). Ditengahkan via position:absolute
   + transform pada kartunya, tidak bergantung display milik lightbox. */
amp-lightbox.pjs-share-popup-amp {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100030;
}

amp-lightbox.pjs-share-popup-amp .pjs-in-popup {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 32px);
	max-width: 350px;
	max-height: 85vh;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 20px;
}

/* Kartu ini SELALU berlatar terang -- tombol tutup dipaksa gelap
   (bukan ikut var(--font-color), yang jadi putih di dark mode dan tak
   kelihatan di atas kartu putih). */
amp-lightbox.pjs-share-popup-amp .kbn-amp-lightbox-close {
	color: #1a1a1a !important;
	background: rgba(0, 0, 0, 0.08) !important;
}

/* Kotak salin-tautan di popup share ARTIKEL: baris tersendiri di
   bawah ikon-ikon sosial (bukan lagi sebaris di sampingnya). Warna
   dipaksa terang -- kartu ini SELALU terang, tak ikut dark mode,
   berbeda dari popup menu bawah yang memang ikut gelap. */
amp-lightbox.pjs-share-popup-amp .kbn-amp-copy-link {
	margin-top: 16px;
}
amp-lightbox.pjs-share-popup-amp .kbn-amp-copy-link-input {
	background: #f7f7f7 !important;
	color: #1a1a1a !important;
	border-color: rgba(0, 0, 0, 0.15) !important;
}

/* ============================================================
 * BAGIAN B -- Dark mode OTOMATIS (prefers-color-scheme)
 * Opsi A yang disepakati: ikut preferensi OS/browser, TANPA toggle
 * manual (JS custom tidak valid di AMP). Menyalin/melengkapi
 * variabel & selector dari style.css yang belum/tidak ikut variabel
 * dark mode (banyak warna kotak komentar & sidebar di-hardcode).
 * ============================================================ */
@media (prefers-color-scheme: dark) {
	:root {
		--font-color: #DAD9D8 !important;
		--font-color-black: #000 !important;
		--font-333: #DAD9D8 !important;
		--font-000: #fff !important;
		--font-404: #fff !important;
		--font-424: #fff !important;
		--bg-color: #181A1B !important;
		--bg-color-dua: #0C0D0D !important;
		--bg-color-tiga: #DAD9D8 !important;
		--bg-color-footer: #181A1B !important;
		--bg-banner-mobile-bawah: #181A1B !important;
		--bg-f7f: #0C0D0D !important;
		--heading-color: #818cab !important;
		--svg: invert(100%) sepia(0%) saturate(0%) hue-rotate(43deg) brightness(114%) contrast(100%) !important;
		--filter-none: invert(100%) sepia(0%) saturate(0%) hue-rotate(43deg) brightness(114%) contrast(100%) !important;
		--display: none !important;
		--border-video-box: #181A1B !important;
		--border-samar: #242525 !important;
		--border-eee: #242525 !important;
		--border-ddd: #242525 !important;
		--border-e6e: #242525 !important;
		--bg-f5f: #242525 !important;
		--filter-png: brightness(0) invert(1) !important;
		--font-color-marquee: #ffffff !important;
		--filter-logo-bawah: grayscale(0%) !important;
	}

	.single-kategori { color: #C0C0C0 !important; }
	#logo .kibaran-logo-light, #logo-footer .kibaran-logo-light { display: none !important; }
	#logo .kibaran-logo-dark, #logo-footer .kibaran-logo-dark { display: inline-block !important; }

	/* Kotak komentar: SAMA PERSIS dengan dark mode non-AMP -- kotak
	   komentar SENGAJA dibiarkan terang (kartu terang mengambang di
	   halaman gelap, desain asli tema), hanya judul yang diubah warnanya
	   supaya kontras di atas latar terang itu. Jangan tambah override
	   lain di sini -- itu sebabnya percobaan sebelumnya (bikin kotak
	   komentar ikut gelap) dibatalkan sesuai permintaan. */
	.comment-reply-title, .comments_title { color: #404040 !important; }

	/* --- Sidebar hamburger (<amp-sidebar>): --sidemenubackg TIDAK
	   PERNAH punya nilai dark mode (bahkan di versi non-AMP asli). --- */
	amp-sidebar.kbn-amp-hamburger-sidebar {
		background: #1c1d1e !important;
	}
	amp-sidebar.kbn-amp-hamburger-sidebar p.judul-menu {
		color: #C0C0C0 !important;
		border-bottom-color: #3a3b3c !important;
	}
	amp-sidebar.kbn-amp-hamburger-sidebar .close-button-hamburger {
		color: #C0C0C0 !important;
	}
	amp-sidebar.kbn-amp-hamburger-sidebar .mobile-menu-kiri li a {
		color: #C0C0C0 !important;
	}
	amp-sidebar.kbn-amp-hamburger-sidebar .copyright-mobile {
		color: #C0C0C0 !important;
	}

	/* --- Kotak pencarian (popup search header & menu bawah) ---
	   CATATAN: AMP MELARANG "!important" sama sekali (bukan cuma
	   diabaikan -- baris yang mengandungnya berisiko dibuang total
	   oleh plugin AMP supaya halaman tetap valid). Makanya di sini
	   TIDAK pakai !important -- menang lewat spesifisitas selector
	   yang sengaja dibuat lebih tinggi dari aturan dasarnya. */
	.kbn-search-form.kbn-search-form {
		border-color: rgba(255, 255, 255, 0.3);
	}
	.kbn-search-form.kbn-search-form:focus-within {
		border-color: rgba(255, 255, 255, 0.5);
	}
	input.kbn-search-input.kbn-search-input::placeholder {
		color: #ffffff;
		opacity: 1;
	}

	/* --- Tombol tutup (X) popup search header/bawah, share bawah,
	   trending, & drawer "lainnya" -- SEMUA ikut dark mode, jadi
	   dipaksa putih murni di sini. Disasar lewat ID kontainer
	   masing-masing (bukan cuma .kbn-amp-lightbox-close saja) supaya
	   TIDAK menimpa amp-lightbox.pjs-share-popup-amp .kbn-amp-lightbox-close
	   (popup share ARTIKEL, kartunya SELALU terang, tombolnya sengaja
	   tetap gelap -- lihat BAGIAN A). Selector berbasis ID sekaligus
	   lebih tahan terhadap pemangkasan/tree-shaking CSS otomatis AMP
	   dibanding class biasa. */
	#kbnHeaderSearchPopup .kbn-amp-lightbox-close,
	#kbnSearchPopupPanel .kbn-amp-lightbox-close,
	#kbnSharePopupPanel .kbn-amp-lightbox-close,
	#kbnTrendingPopupPanel .kbn-amp-lightbox-close,
	#kbnMoreSidebar .kbn-amp-lightbox-close {
		color: #ffffff;
	}
}

/* ============================================================
 * BAGIAN C -- Perbaikan posisi IKLAN PARALLAX (.parallxads-box)
 * di lebar TABLET, khusus AMP.
 *
 * .parallxads-box pakai position:fixed + left:0;right:0;margin:auto
 * supaya bisa "mengambang tetap" saat halaman di-scroll (efek
 * parallax) -- ini artinya ia ditengahkan berdasarkan LEBAR LAYAR
 * PENUH, bukan berdasarkan lebar kolom artikel.
 *
 * Di non-AMP hal ini dikoreksi ulang lewat JS (positionParallaxAds()
 * di script.js) yang menghitung posisi asli .parallxads lalu
 * menimpa left/width kotak iklan secara manual -- tapi skrip itu
 * ikut DILEPAS di AMP (lihat wp_dequeue_script('script') di
 * amp-support.php), AMP tak izinkan JS kustom sama sekali.
 *
 * Selama sidebar (#sidebar-single) masih tampil DI SAMPING artikel
 * (lebar tablet, sebelum #single-wrap ditumpuk jadi 1 kolom di
 * 750px lewat style.css), kolom artikel bergeser ke kiri sementara
 * kotak iklan tetap dihitung dari tengah layar PENUH -- makanya di
 * tablet iklan terlihat tidak sejajar dengan artikel, padahal di HP
 * (sidebar sudah ditumpuk ke bawah, artikel jadi selebar layar penuh)
 * kebetulan pas.
 *
 * Perbaikan (KHUSUS AMP): tumpuk #single-wrap (sidebar pindah ke
 * bawah artikel, bukan lagi di samping) mulai dari lebar tablet --
 * bukan cuma dari 750px seperti non-AMP -- sampai batas max-width
 * #single-wrap sendiri (1024px). Dengan begitu kolom artikel SELALU
 * selebar layar, sehingga pusat perhitungan .parallxads-box (yang
 * berbasis layar penuh) kembali cocok dengan pusat kolom artikel,
 * sama seperti yang sudah benar di tampilan HP. Tidak menyentuh
 * style.css supaya tampilan non-AMP (yang sudah dikoreksi oleh JS)
 * tidak ikut berubah. */
@media screen and (max-width: 1024px) {
	#single-wrap {
		flex-direction: column !important;
	}
	.single-article {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
		box-sizing: border-box !important;
	}
	#sidebar-single {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		box-sizing: border-box !important;
	}
}

/* =====================================================================
   AMP: TOGGLE SUB-MENU MENU UTAMA MOBILE tanpa JS (checkbox + CSS murni)
   ---------------------------------------------------------------------
   Di halaman AMP seluruh JS tema dilepas, sehingga toggle sub-menu
   berbasis jQuery (.slideToggle di header.php) tidak jalan -> sub-menu
   tidak bisa dibuka. Walker khusus AMP (Kibaran_AMP_Nav_Walker, lihat
   inc/amp-support.php) mengganti <a> induk dengan pasangan:
     <input type="checkbox" class="kbn-amp-submenu-toggle"> + <label>
   sehingga menyentuh label membuka sub-menu lewat selektor :checked di
   bawah ini -- murni CSS, valid AMP. Semua pakai !important mengikuti
   konvensi file ini (lihat catatan enqueue di inc/amp-support.php).
   ===================================================================== */

/* Checkbox pemicu disembunyikan; label-lah yang disentuh pengguna. */
.menu-utama .kbn-amp-submenu-toggle {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* Label pembuka dibuat SEPERSIS <a> menu utama (lihat .menu-utama li a
   di style.css) agar tampilan tidak berubah dari versi non-AMP. */
.menu-utama > li.menu-item-has-children > .kbn-amp-submenu-label {
	text-decoration: none !important;
	font-family: 'Heebo', sans-serif !important;
	font-weight: 900 !important;
	font-size: 18px !important;
	color: var(--menuutama1) !important;
	display: inline-block !important;
	padding: 5px 10px 8px 10px !important;
	position: relative !important;
	text-align: center !important;
	margin-right: 10px !important;
	cursor: pointer !important;
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	user-select: none !important;
}

/* Panah dropdown pada label (menyalin .menu-item-has-children > a:after). */
.menu-utama > li.menu-item-has-children > .kbn-amp-submenu-label:after {
	content: url('../images/arrow-down.png') !important;
	position: absolute !important;
	right: -6px !important;
	top: 2px !important;
	width: 10px !important;
	filter: var(--filter-png) !important;
	display: inline-block !important;
	transition: transform 0.25s ease !important;
	transform-origin: center !important;
}

/* Saat sub-menu terbuka (checkbox tercentang): tampilkan overlay layar
   penuh (base rule mobile .menu-utama ul.sub-menu sudah position:fixed)
   dan putar panah 180deg. */
.menu-utama > li.menu-item-has-children > .kbn-amp-submenu-toggle:checked ~ ul.sub-menu {
	display: block !important;
}

.menu-utama > li.menu-item-has-children > .kbn-amp-submenu-toggle:checked ~ .kbn-amp-submenu-label:after {
	transform: rotate(180deg) !important;
}

/* Tombol tutup: hanya muncul saat sub-menu terbuka, mengambang di atas
   overlay (z-index overlay = 999999999, jadi ini harus lebih tinggi). */
.menu-utama .kbn-amp-submenu-close {
	display: none !important;
}

.menu-utama > li.menu-item-has-children > .kbn-amp-submenu-toggle:checked ~ .kbn-amp-submenu-close {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: fixed !important;
	top: 14px !important;
	right: 14px !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	background: var(--bg-color-dua) !important;
	color: var(--font-color) !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	z-index: 1000000000 !important;
	box-shadow: rgb(0 0 0 / 20%) 0 2px 6px 0 !important;
}

/* =====================================================================
   AMP: TOGGLE SUB-MENU SIDE MENU (hamburger / amp-sidebar) tanpa JS
   ---------------------------------------------------------------------
   Side menu (.mobile-menu-kiri) di non-AMP membuka sub-menu lewat JS
   (toggle class .active, lihat js/script.js). Di AMP JS dilepas -> tidak
   bisa dibuka. Walker Kibaran_AMP_Nav_Walker merender item induk sebagai
   checkbox + label, dan CSS di bawah ini membukanya sebagai accordion
   inline (bukan overlay layar-penuh seperti menu utama). Murni CSS,
   valid AMP.
   ===================================================================== */

/* Checkbox pemicu disembunyikan. */
.mobile-menu-kiri .kbn-amp-submenu-toggle {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* Label pembuka dibuat sama seperti tautan induk side menu
   (lihat .mobile-menu-kiri li a di style.css). */
.mobile-menu-kiri > li.menu-item-has-children > .kbn-amp-submenu-label {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	text-align: left !important;
	padding: 10px 0 !important;
	text-decoration: none !important;
	position: relative !important;
	box-sizing: border-box !important;
	color: var(--font-color) !important;
	cursor: pointer !important;
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	user-select: none !important;
}

/* PENANDA: karakter caret literal (▾) di dalam <label>, menandakan item
   punya sub-menu. Karena karakter ini bagian dari DOM (bukan CSS ::after
   atau file gambar), penanda PASTI tampil di AMP walau sanitizer CSS
   membuang aturan gaya. Warna mengikuti teks -> selalu terlihat di mode
   terang/gelap/otomatis. Item TANPA sub-menu tidak punya caret ini. */
.mobile-menu-kiri .kbn-amp-caret {
	display: inline-block !important;
	margin-left: 8px !important;
	font-size: 0.8em !important;
	line-height: 1 !important;
	color: var(--font-color) !important;
	transition: transform 0.25s ease !important;
	transform-origin: center !important;
}

/* Buka sub-menu (accordion inline) saat checkbox tercentang & putar caret
   (best-effort; jika rotasi dibuang sanitizer, caret tetap tampil). */
.mobile-menu-kiri > li.menu-item-has-children > .kbn-amp-submenu-toggle:checked ~ ul.sub-menu {
	display: block !important;
}

.mobile-menu-kiri > li.menu-item-has-children > .kbn-amp-submenu-toggle:checked ~ .kbn-amp-submenu-label .kbn-amp-caret {
	transform: rotate(180deg) !important;
}

/* Side menu = accordion inline, jadi tombol tutup layar-penuh (dipakai
   menu utama) TIDAK diperlukan di sini. */
.mobile-menu-kiri .kbn-amp-submenu-close {
	display: none !important;
}