/**
 * Tabalien — Responsive Guard (Round 11, v1.6.0)
 * ---------------------------------------------------------------------------
 * Latar belakang (terukur 2026-11-12, Chrome + UA iPhone/Android asli):
 *
 *   Tema DelikWP bercabang lewat wp_is_mobile(). Markup desktop memakai
 *   .frame{min-width:1008px}, .frame .frame-widget{width:1100px} dan
 *   .container{width:1008px}. Tema hanya menetralkan angka-angka itu pada
 *   @media (min-width:768px) and (max-width:1100px) — di bawah 768 px tidak
 *   ada penolong sama sekali.
 *
 *   Cache Enabler disimpan dengan mobile_cache=0, jadi hanya ada SATU file
 *   cache per URL, dan pemanas cache memakai UA desktop. Akibatnya ponsel
 *   menerima markup desktop: beranda 360 px melebar 648 px, artikel 740 px.
 *
 * Perbaikan utama ada di tab-mobile-cache.php (varian cache -mobile).
 * Berkas ini adalah lapis pengaman: seandainya markup desktop tetap tersaji
 * di layar sempit — jendela desktop dipersempit, tablet ber-UA desktop, atau
 * varian cache belum sempat dipanaskan — layout tetap mengalir, bukan
 * meluber 648 px.
 *
 * Batas aman (sengaja ketat):
 *   1. Semua aturan tata letak diawali .tabaf-desktop-markup, kelas body yang
 *      hanya ditambahkan saat tema memakai markup desktop. Markup seluler
 *      (header-bar / popup-menu / .column12) tidak tersentuh sama sekali.
 *   2. Semua aturan berada di dalam @media (max-width:1008px). Pada 1009 px
 *      ke atas berkas ini tidak menghasilkan satu pun deklarasi aktif,
 *      jadi tampilan desktop tidak berubah sedikit pun.
 *   3. Tidak ada overflow:hidden pada body/html — meluber diperbaiki, bukan
 *      disembunyikan, supaya position:sticky tema tetap bekerja.
 *   4. Tinggi unit iklan tidak diubah (Adsense tetap utuh); yang dibatasi
 *      hanya lebarnya.
 *
 * @package Tabalien_Audit_Fixes
 */

/* ==========================================================================
   1. <= 1008 px — netralkan lebar mati milik markup desktop
   ========================================================================== */
@media (max-width: 1008px) {

	/* Kerangka atas: .frame punya min-width:1008px, .frame-widget 1100px. */
	.tabaf-desktop-markup .frame {
		min-width: 0;
		width: 100%;
		max-width: 100%;
	}

	.tabaf-desktop-markup .frame .frame-wrapper,
	.tabaf-desktop-markup .frame .frame-box,
	.tabaf-desktop-markup .frame .frame-widget,
	.tabaf-desktop-markup .frame .frame-inner {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Pembungkus isi: .container{width:1008px}. Padding diatur per breakpoint
	   di bawah supaya tetap seirama dengan .grid-row yang bermargin negatif. */
	.tabaf-desktop-markup .container {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Billboard + parallax: 1008px / 982px / var(--widthparallaxdesktop). */
	.tabaf-desktop-markup .billboard,
	.tabaf-desktop-markup .billboard.parallax,
	.tabaf-desktop-markup .billboard.parallax .widget-parallax {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Kolom pencarian di bilah atas: .frame-search{width:380px}. */
	.tabaf-desktop-markup .frame .frame-search {
		width: 100%;
		max-width: 380px;
	}

	/* Laci menu: .frame-item.sidebarmenu{width:440px} — saat terbuka di layar
	   360 px ia sendiri meluber 80 px. */
	.tabaf-desktop-markup .frame-item.sidebarmenu {
		width: 100%;
		max-width: 440px;
		box-sizing: border-box;
	}

	/* Bilah kemajuan membaca dibuat selebar dokumen oleh skrip tema; kalau
	   dokumen sudah terlanjur meluber, ia ikut melebar (terukur 1100 px pada
	   viewport 360 px). Patokannya dikembalikan ke viewport. */
	.tabaf-desktop-markup .tabalien-reading-progress {
		left: 0;
		right: auto;
		width: 100% !important;
		max-width: 100vw !important;
	}

	/* Unit iklan: hanya lebar yang dibatasi, tinggi dibiarkan apa adanya. */
	.tabaf-desktop-markup .adsbox .widget,
	.tabaf-desktop-markup .banner.ads970250,
	.tabaf-desktop-markup .banner.ads72890 {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.tabaf-desktop-markup .adsbox ins,
	.tabaf-desktop-markup .adsbox iframe,
	.tabaf-desktop-markup .banner ins,
	.tabaf-desktop-markup .banner iframe {
		max-width: 100% !important;
	}

	/* Media tertanam dan blok lebar: gambar, video, iframe, tabel, pre. */
	.tabaf-desktop-markup img,
	.tabaf-desktop-markup video,
	.tabaf-desktop-markup iframe,
	.tabaf-desktop-markup embed,
	.tabaf-desktop-markup object,
	.tabaf-desktop-markup table,
	.tabaf-desktop-markup pre {
		max-width: 100%;
	}

	.tabaf-desktop-markup pre {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Tabel di badan artikel boleh digulir sendiri, tidak menyeret halaman.
	   display:block hanya di dalam .article-text/.article-body, bukan global,
	   supaya tabel tata letak milik widget tidak berubah. */
	.tabaf-desktop-markup .article-text table,
	.tabaf-desktop-markup .article-body table,
	.tabaf-desktop-markup .article-detail table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Kata/URL panjang di judul dan isi tidak boleh memaksa lebar dokumen. */
	.tabaf-desktop-markup .article-text,
	.tabaf-desktop-markup .article-detail,
	.tabaf-desktop-markup .widget,
	.tabaf-desktop-markup .media-title,
	.tabaf-desktop-markup .breadcrumb {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	/* Flex/Grid: anak tidak boleh lebih lebar dari induknya (min-width:auto
	   pada flex item adalah penyebab klasik luber di layar sempit). */
	.tabaf-desktop-markup .grid-row > *,
	.tabaf-desktop-markup .headline-related-content > * {
		min-width: 0;
	}
}

/* ==========================================================================
   2. <= 768 px — perpanjang blok 768-1100 milik tema ke bawah 768
   ========================================================================== */
@media (max-width: 768px) {

	.tabaf-desktop-markup .container {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Margin negatif harus tetap sepasangan dengan padding kolom:
	   20px padding kontainer - 12px margin = 8px, lalu +12px padding kolom
	   = 20px lagi. Tidak ada lebar yang hilang atau bertambah. */
	.tabaf-desktop-markup .grid-row,
	.tabaf-desktop-markup .headline-related-content {
		margin-left: -12px;
		margin-right: -12px;
	}

	.tabaf-desktop-markup .column12,
	.tabaf-desktop-markup .column20,
	.tabaf-desktop-markup .column3,
	.tabaf-desktop-markup .column4,
	.tabaf-desktop-markup .column5,
	.tabaf-desktop-markup .column6,
	.tabaf-desktop-markup .column7,
	.tabaf-desktop-markup .column8,
	.tabaf-desktop-markup .column9 {
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}

	/* Satu kolom: kolom utama dan sidebar menumpuk, bukan berdampingan. */
	.tabaf-desktop-markup .grid-row > .column8,
	.tabaf-desktop-markup .grid-row > .column7,
	.tabaf-desktop-markup .grid-row > .column6,
	.tabaf-desktop-markup .grid-row > .column5,
	.tabaf-desktop-markup .grid-row > .column4,
	.tabaf-desktop-markup .grid-row > .column3,
	.tabaf-desktop-markup .grid-row > .sidebar-box,
	.tabaf-desktop-markup .main-box,
	.tabaf-desktop-markup .sidebar-box {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}

	/* Sidebar lengket tidak berguna setelah menumpuk dan bisa menutupi isi. */
	.tabaf-desktop-markup .sidebar-box .widget:last-child {
		position: static;
		top: auto;
	}

	/* Bilah atas: cari menyisakan ruang untuk tombol menu (kiri) dan tombol
	   mode gelap (kanan) yang keduanya melayang di atasnya. */
	.tabaf-desktop-markup .frame .frame-search {
		max-width: calc(100% - 170px);
	}

	/* Submenu menggantung ke kanan (right:-8px) bisa melewati tepi layar. */
	.tabaf-desktop-markup .navigation .primary-menu li > .sub-menu {
		right: 0;
		max-width: calc(100vw - 24px);
	}

	/* Menu utama horizontal: .navigation ul dan .navigation .primary-menu nav
	   sama-sama flex tanpa wrap, jadi deretan tautan memaksa lebar dokumen
	   (terukur 565 px pada viewport 360 px). Dibuat membungkus, bukan dipotong,
	   supaya semua tautan tetap bisa dijangkau. */
	.tabaf-desktop-markup .navigation,
	.tabaf-desktop-markup .navigation .primary-menu,
	.tabaf-desktop-markup .navigation .primary-menu nav,
	.tabaf-desktop-markup .navigation .second-menu,
	.tabaf-desktop-markup .navigation ul {
		flex-wrap: wrap;
		height: auto;
		min-width: 0;
	}

	.tabaf-desktop-markup .navigation .primary-menu li,
	.tabaf-desktop-markup .navigation .second-menu li {
		height: auto;
	}

	.tabaf-desktop-markup .navigation .primary-menu li a {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* ==========================================================================
   3. <= 480 px — ponsel kecil (360 / 375 / 390 / 414 px)
   ========================================================================== */
@media (max-width: 480px) {

	.tabaf-desktop-markup .container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.tabaf-desktop-markup .frame .frame-search {
		max-width: calc(100% - 150px);
	}

	.tabaf-desktop-markup .frame .frame-input-search {
		padding-left: 10px;
		padding-right: 38px;
	}

	/* Laci menu selebar layar, tidak lagi 440 px. */
	.tabaf-desktop-markup .frame-item.sidebarmenu {
		max-width: 100%;
	}

	/* Judul panjang dan nama penulis tidak memaksa lebar. */
	.tabaf-desktop-markup .brand-title,
	.tabaf-desktop-markup .brand-description,
	.tabaf-desktop-markup .media-title,
	.tabaf-desktop-markup .article-title {
		overflow-wrap: break-word;
		word-wrap: break-word;
		hyphens: auto;
	}

	/* Logo kepala: 60px tingginya membuat lebar proporsional ~232px; di layar
	   360px itu masih muat, tetapi dibatasi agar aman bersama teks di sisinya. */
	.tabaf-desktop-markup .header-brand img {
		max-width: 100%;
		height: auto;
		max-height: 60px;
	}

	/* Baris berbagi artikel tetap satu baris dan bisa digulir, bukan luber. */
	.tabaf-desktop-markup .share-sticky .share-box ul {
		flex-wrap: wrap;
		row-gap: 8px;
	}
}

/* ==========================================================================
   4. Hormati prefers-reduced-motion untuk transisi laci menu
   ========================================================================== */
@media (max-width: 1008px) and (prefers-reduced-motion: reduce) {

	.tabaf-desktop-markup .frame-item.sidebarmenu {
		transition: none;
	}
}