/* DEX Blog v2 -- prototipe redesign (18 Okt 2026). Dipakai beranda & artikel; nanti menjadi aset child theme Divi.
   Token warna selaras situs DEX v2. Mode gelap: html[data-tema="gelap"]. */
:root {
	--b-bg: #F5F7FB; --b-kartu: #FFFFFF; --b-teks: #0F172A; --b-teks-2: #475569; --b-teks-3: #94A3B8;
	--b-garis: #E5EAF2; --b-isi: #F1F5F9; --b-aksen: #2563EB; --b-aksen-2: #1D4ED8; --b-aksen-bg: #EFF4FF;
	--b-naik: #16A34A; --b-turun: #DC2626; --b-emas: #F59E0B; --b-bayang: 0 18px 44px -24px rgba(15, 23, 42, .28);
	--b-radius: 18px; --b-lebar: 1240px;
}
html[data-tema="gelap"] {
	--b-bg: #0A1020; --b-kartu: #111A2E; --b-teks: #F1F5F9; --b-teks-2: #CBD5E1; --b-teks-3: #64748B;
	--b-garis: rgba(148, 163, 184, .16); --b-isi: rgba(148, 163, 184, .08); --b-aksen: #3B82F6; --b-aksen-2: #60A5FA;
	--b-aksen-bg: rgba(59, 130, 246, .14); --b-bayang: 0 18px 44px -24px rgba(0, 0, 0, .6);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--b-bg); color: var(--b-teks); font: 15px/1.6 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.b-wadah { max-width: var(--b-lebar); margin: 0 auto; padding: 0 20px; }
.b-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
button { font: inherit; cursor: pointer; }

/* ---------- ticker ---------- */
.b-ticker { background: #0B1220; color: #E2E8F0; font-size: 12.5px; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.b-ticker-jalur { display: flex; gap: 28px; width: max-content; padding: 8px 0; animation: b-geser 60s linear infinite; }
.b-ticker:hover .b-ticker-jalur { animation-play-state: paused; }
.b-ticker a { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.b-ticker b { font-weight: 800; color: #fff; }
.b-ticker .naik { color: #4ADE80; } .b-ticker .turun { color: #F87171; }
.b-ticker-label { position: absolute; left: 0; z-index: 2; padding: 8px 14px; background: #2563EB; color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.b-ticker-bungkus { position: relative; }
@keyframes b-geser { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .b-ticker-jalur { animation: none; } }

/* ---------- header ---------- */
.b-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--b-kartu) 88%, transparent); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--b-garis); }
.b-header .b-wadah { display: flex; align-items: center; gap: 22px; height: 76px; }
.b-logo img { height: 46px; width: auto; } /* [18 Okt 2026] masukan: logo kurang besar (34 -> 46px) */
.b-logo .gelap, html[data-tema="gelap"] .b-logo .terang { display: none; }
html[data-tema="gelap"] .b-logo .gelap { display: block; }
.b-logo small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--b-aksen); text-transform: uppercase; margin: 2px 0 0 4px; }
.b-nav { display: flex; gap: 4px; margin-left: 8px; }
.b-nav a { padding: 8px 12px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--b-teks-2); }
.b-nav a:hover, .b-nav a.aktif { color: var(--b-teks); background: var(--b-isi); }
.b-header-kanan { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.b-ikon-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--b-garis); background: var(--b-kartu); color: var(--b-teks-2); display: grid; place-items: center; }
.b-ikon-btn:hover { color: var(--b-teks); background: var(--b-isi); }
.b-ikon-btn svg { width: 18px; height: 18px; }
.b-cari-btn { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; min-width: 220px; border-radius: 12px; border: 1px solid var(--b-garis); background: var(--b-isi); color: var(--b-teks-3); font-size: 13.5px; }
.b-cari-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.b-cari-btn kbd { margin-left: auto; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--b-garis); background: var(--b-kartu); font: 700 11px/1.6 inherit; }
.b-tombol { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; font-weight: 800; font-size: 14px; border: 1px solid transparent; }
.b-tombol.utama { background: var(--b-aksen); color: #fff; box-shadow: 0 10px 22px -12px rgba(37, 99, 235, .8); }
.b-tombol.utama:hover { background: var(--b-aksen-2); }
.b-tombol.garis { border-color: var(--b-garis); background: var(--b-kartu); }
.b-tombol.garis:hover { background: var(--b-isi); }
.b-menu-hp { display: none; }
@media (max-width: 1080px) { .b-cari-btn { min-width: 0; } .b-cari-btn span, .b-cari-btn kbd { display: none; } }
@media (max-width: 900px) {
	.b-nav, .b-header .b-tombol.garis { display: none; }
	.b-menu-hp { display: grid; }
	.b-nav.buka { display: flex; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; padding: 12px 20px 18px; background: var(--b-kartu); border-bottom: 1px solid var(--b-garis); box-shadow: var(--b-bayang); }
}

/* ---------- umum ---------- */
.b-bagian { padding: 34px 0; }
.b-judul-bagian { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.b-judul-bagian h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.b-judul-bagian p { margin: 2px 0 0; color: var(--b-teks-3); font-size: 13.5px; }
.b-tautan { color: var(--b-aksen); font-weight: 800; font-size: 14px; white-space: nowrap; }
.b-tautan:hover { text-decoration: underline; }
.b-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--b-aksen-bg); color: var(--b-aksen); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.b-chip.emas { background: #FEF3C7; color: #B45309; }
html[data-tema="gelap"] .b-chip.emas { color: #FBBF24; }
.b-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--b-teks-3); font-size: 12.5px; font-weight: 600; }
.b-meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

/* ---------- hero ---------- */
.b-hero { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 22px; padding-top: 28px; }
.b-sorot { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--b-kartu); border: 1px solid var(--b-garis); box-shadow: var(--b-bayang); }
.b-sorot-gbr { position: relative; aspect-ratio: 16 / 8.2; overflow: hidden; background: #0B1220; }
.b-sorot-gbr img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.b-sorot:hover .b-sorot-gbr img { transform: scale(1.03); }
.b-sorot-gbr .b-chip { position: absolute; left: 16px; top: 16px; }
.b-sorot-isi { padding: 22px 26px 24px; }
.b-sorot-isi h1, .b-sorot-isi h2 { margin: 0 0 8px; font-size: 26px; line-height: 1.3; letter-spacing: -.02em; }
.b-sorot:hover h1, .b-sorot:hover h2 { color: var(--b-aksen); }
.b-sorot-isi p { margin: 0 0 12px; color: var(--b-teks-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.b-tren { background: var(--b-kartu); border: 1px solid var(--b-garis); border-radius: 24px; padding: 20px; box-shadow: var(--b-bayang); }
.b-tren h3 { margin: 0 0 12px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.b-tren h3 svg { width: 18px; height: 18px; color: #F97316; }
.b-tren ol { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.b-tren li { counter-increment: t; border-top: 1px solid var(--b-garis); }
.b-tren li:first-child { border-top: 0; }
.b-tren a { display: grid; grid-template-columns: 34px 1fr 76px; gap: 12px; align-items: center; padding: 12px 0; }
.b-tren a::before { content: counter(t, decimal-leading-zero); font-size: 20px; font-weight: 800; color: var(--b-teks-3); }
.b-tren b { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.b-tren a:hover b { color: var(--b-aksen); }
.b-tren img { width: 76px; height: 54px; object-fit: cover; border-radius: 10px; }
@media (max-width: 960px) { .b-hero { grid-template-columns: 1fr; } .b-sorot-isi h1 { font-size: 22px; } }

/* ---------- filter & grid ---------- */
.b-filter { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; scrollbar-width: none; }
.b-filter button { flex: 0 0 auto; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--b-garis); background: var(--b-kartu); color: var(--b-teks-2); font-weight: 700; font-size: 13.5px; }
.b-filter button[aria-pressed="true"] { background: var(--b-teks); color: var(--b-kartu); border-color: var(--b-teks); }
.b-filter button span { opacity: .55; font-weight: 600; margin-left: 4px; }
.b-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .b-grid { grid-template-columns: 1fr; } }
.b-kartu { display: flex; flex-direction: column; background: var(--b-kartu); border: 1px solid var(--b-garis); border-radius: var(--b-radius); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.b-kartu:hover { transform: translateY(-4px); box-shadow: var(--b-bayang); }
.b-kartu-gbr { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--b-isi); }
.b-kartu-gbr img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.b-kartu:hover .b-kartu-gbr img { transform: scale(1.05); }
.b-kartu-gbr .b-chip { position: absolute; left: 12px; top: 12px; background: rgba(255, 255, 255, .92); color: #1D4ED8; }
.b-kartu-isi { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.b-kartu-isi h3 { margin: 0; font-size: 16.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.b-kartu:hover h3 { color: var(--b-aksen); }
.b-kartu-isi p { margin: 0; color: var(--b-teks-2); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.b-kartu-isi .b-meta { margin-top: auto; padding-top: 6px; }
.b-muat { display: flex; justify-content: center; margin-top: 24px; }
.b-kosong { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--b-teks-3); border: 1px dashed var(--b-garis); border-radius: var(--b-radius); }

/* ---------- populer + sisi ---------- */
.b-dua { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .b-dua { grid-template-columns: 1fr; } }
.b-daftar { display: grid; gap: 14px; }
.b-baris { display: grid; grid-template-columns: 200px 1fr; gap: 18px; padding: 14px; background: var(--b-kartu); border: 1px solid var(--b-garis); border-radius: var(--b-radius); transition: box-shadow .2s ease; }
.b-baris:hover { box-shadow: var(--b-bayang); }
.b-baris img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.b-baris h3 { margin: 6px 0 6px; font-size: 17px; line-height: 1.4; }
.b-baris:hover h3 { color: var(--b-aksen); }
.b-baris p { margin: 0 0 8px; color: var(--b-teks-2); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) { .b-baris { grid-template-columns: 1fr; } }
.b-sisi { display: grid; gap: 18px; position: sticky; top: 88px; }
.b-panel { background: var(--b-kartu); border: 1px solid var(--b-garis); border-radius: var(--b-radius); padding: 18px; }
.b-panel h3 { margin: 0 0 4px; font-size: 15.5px; }
.b-panel > p { margin: 0 0 12px; color: var(--b-teks-3); font-size: 12.5px; }
.b-harga { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.b-harga td { padding: 9px 0; border-top: 1px solid var(--b-garis); }
.b-harga tr:first-child td { border-top: 0; }
.b-harga td:nth-child(2) { text-align: right; font-weight: 700; }
.b-harga td:nth-child(3) { text-align: right; width: 76px; font-weight: 800; font-size: 12.5px; }
.b-harga .naik { color: var(--b-naik); } .b-harga .turun { color: var(--b-turun); }
.b-harga a { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.b-harga a small { color: var(--b-teks-3); font-weight: 600; }
.b-koin { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--b-aksen-bg); color: var(--b-aksen); font-size: 10px; font-weight: 800; }
.b-langganan form { display: flex; gap: 8px; margin-top: 10px; }
.b-langganan input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--b-garis); background: var(--b-isi); color: var(--b-teks); font: inherit; }
.b-langganan input:focus { outline: none; border-color: var(--b-aksen); box-shadow: 0 0 0 4px var(--b-aksen-bg); }
.b-langganan .ok { margin: 10px 0 0; color: var(--b-naik); font-weight: 700; font-size: 13px; }
.b-panel.cta { background: linear-gradient(140deg, #1D4ED8, #2563EB 55%, #0EA5E9); color: #fff; border: 0; }
.b-panel.cta p { color: rgba(255, 255, 255, .85); margin: 6px 0 14px; font-size: 13.5px; }
.b-panel.cta .b-tombol { background: #fff; color: #1D4ED8; }

/* ---------- kamus ---------- */
.b-kamus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .b-kamus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .b-kamus { grid-template-columns: 1fr; } }
.b-istilah { perspective: 900px; height: 150px; }
.b-istilah button { display: block; width: 100%; height: 100%; border: 0; padding: 0; background: none; color: inherit; text-align: left; }
.b-istilah .putar { position: relative; display: block; width: 100%; height: 100%; }
.b-istilah button:hover .muka { border-color: var(--b-aksen); }
.b-istilah .muka, .b-istilah .belakang { position: absolute; inset: 0; padding: 18px; border-radius: var(--b-radius); border: 1px solid var(--b-garis); background: var(--b-kartu); display: flex; flex-direction: column; transition: opacity .25s ease, transform .25s ease; }
.b-istilah .belakang { opacity: 0; transform: perspective(700px) rotateY(-90deg); pointer-events: none; }
.b-istilah button[aria-pressed="true"] .muka { opacity: 0; transform: perspective(700px) rotateY(90deg); }
.b-istilah button[aria-pressed="true"] .belakang { opacity: 1; transform: none; transition-delay: .18s; }
.b-istilah .muka b { font-size: 19px; margin-top: auto; }
.b-istilah .muka small { color: var(--b-teks-3); font-weight: 700; }
.b-istilah .belakang { background: var(--b-aksen-bg); font-size: 13.5px; color: var(--b-teks-2); }
.b-istilah .belakang b { color: var(--b-teks); margin-bottom: 6px; }

/* ---------- CTA lebar ---------- */
.b-ajak { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center; padding: 38px; border-radius: 28px; color: #fff; background: radial-gradient(600px 300px at 90% 0%, rgba(14, 165, 233, .55), transparent 60%), linear-gradient(135deg, #0B1220, #1E3A8A); }
.b-ajak h2 { margin: 0 0 8px; font-size: 28px; line-height: 1.25; letter-spacing: -.02em; }
.b-ajak p { margin: 0 0 18px; color: rgba(255, 255, 255, .8); }
.b-ajak .b-tombol.garis { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.b-ajak ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.b-ajak li { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); font-weight: 700; font-size: 14px; }
.b-ajak li svg { width: 20px; height: 20px; color: #4ADE80; flex: 0 0 20px; }
@media (max-width: 860px) { .b-ajak { grid-template-columns: 1fr; padding: 26px; } }

/* ---------- footer ---------- */
.b-footer { margin-top: 40px; padding: 40px 0 26px; background: var(--b-kartu); border-top: 1px solid var(--b-garis); color: var(--b-teks-2); font-size: 13.5px; }
.b-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px; }
.b-footer h4 { margin: 0 0 10px; color: var(--b-teks); font-size: 14px; }
.b-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.b-footer a:hover { color: var(--b-aksen); }
.b-footer-bawah { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--b-garis); color: var(--b-teks-3); font-size: 12.5px; }
.b-ojk { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--b-teks-2); font-weight: 700; }
.b-ojk svg { width: 18px; height: 18px; color: var(--b-naik); }
@media (max-width: 800px) { .b-footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- pencarian ---------- */
.b-cari { position: fixed; inset: 0; z-index: 100; display: none; padding: 80px 16px; background: rgba(5, 10, 25, .55); backdrop-filter: blur(4px); }
.b-cari.buka { display: block; }
.b-cari-kotak { max-width: 680px; margin: 0 auto; background: var(--b-kartu); border: 1px solid var(--b-garis); border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); overflow: hidden; }
.b-cari-kotak label { display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--b-garis); }
.b-cari-kotak label svg { width: 20px; height: 20px; color: var(--b-teks-3); }
.b-cari-kotak input { flex: 1; height: 60px; border: 0; background: none; color: var(--b-teks); font: inherit; font-size: 17px; outline: none; }
.b-cari-hasil { max-height: 60vh; overflow: auto; padding: 8px; }
.b-cari-hasil a { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 10px; border-radius: 12px; align-items: center; }
.b-cari-hasil a:hover, .b-cari-hasil a.pilih { background: var(--b-isi); }
.b-cari-hasil img { width: 72px; height: 48px; border-radius: 8px; object-fit: cover; }
.b-cari-hasil b { display: block; font-size: 14px; line-height: 1.4; }
.b-cari-hasil mark { background: rgba(250, 204, 21, .45); color: inherit; border-radius: 3px; }
.b-cari-hasil p { margin: 18px; color: var(--b-teks-3); text-align: center; }

/* ---------- artikel ---------- */
.b-progres { position: fixed; top: 0; left: 0; z-index: 60; height: 3px; width: 0; background: linear-gradient(90deg, #2563EB, #0EA5E9); }
.b-remah { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--b-teks-3); font-size: 13px; font-weight: 600; padding-top: 26px; }
.b-remah a:hover { color: var(--b-aksen); }
.b-artikel-kepala { max-width: 860px; margin: 14px auto 0; text-align: center; }
.b-artikel-kepala h1 { margin: 12px 0 14px; font-size: 40px; line-height: 1.2; letter-spacing: -.025em; }
.b-artikel-kepala .b-meta { justify-content: center; font-size: 13.5px; }
.b-penulis { display: inline-flex; align-items: center; gap: 8px; color: var(--b-teks); font-weight: 700; }
.b-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #2563EB, #0EA5E9); color: #fff; font-size: 12px; font-weight: 800; }
.b-bagikan { display: flex; justify-content: center; gap: 8px; margin: 18px 0 0; }
.b-bagikan button, .b-bagikan a { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--b-garis); background: var(--b-kartu); color: var(--b-teks-2); display: grid; place-items: center; }
.b-bagikan button:hover, .b-bagikan a:hover { color: var(--b-aksen); border-color: var(--b-aksen); }
.b-bagikan svg { width: 17px; height: 17px; }
.b-sampul { max-width: 1040px; margin: 26px auto 0; border-radius: 24px; overflow: hidden; box-shadow: var(--b-bayang); }
.b-tata-artikel { display: grid; grid-template-columns: 240px minmax(0, 720px) 280px; gap: 36px; justify-content: center; margin-top: 34px; }
@media (max-width: 1240px) { .b-tata-artikel { grid-template-columns: 220px minmax(0, 1fr); } .b-tata-artikel .b-kanan { display: none; } }
@media (max-width: 900px) { .b-tata-artikel { grid-template-columns: 1fr; } .b-toc-sisi { display: none; } .b-artikel-kepala h1 { font-size: 28px; } }
.b-toc-sisi, .b-kanan { position: sticky; top: 92px; align-self: start; }
.b-toc { font-size: 13.5px; }
.b-toc p { margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--b-teks-3); }
.b-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--b-garis); }
.b-toc a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; color: var(--b-teks-2); line-height: 1.45; }
.b-toc a.sub { padding-left: 26px; font-size: 13px; }
.b-toc a:hover { color: var(--b-teks); }
.b-toc a.aktif { color: var(--b-aksen); border-left-color: var(--b-aksen); font-weight: 700; }
.b-alat { display: flex; gap: 6px; margin-top: 18px; }
.b-alat button { height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--b-garis); background: var(--b-kartu); color: var(--b-teks-2); font-weight: 800; font-size: 13px; }
.b-konten { font-size: calc(17px * var(--b-skala, 1)); line-height: 1.8; color: var(--b-teks-2); }
.b-konten h2 { margin: 1.8em 0 .6em; font-size: 1.55em; line-height: 1.3; letter-spacing: -.015em; color: var(--b-teks); scroll-margin-top: 90px; }
.b-konten h3 { margin: 1.5em 0 .5em; font-size: 1.22em; color: var(--b-teks); scroll-margin-top: 90px; }
.b-konten p { margin: 0 0 1.1em; }
.b-konten strong { color: var(--b-teks); }
.b-konten a { color: var(--b-aksen); text-decoration: underline; text-underline-offset: 3px; }
.b-konten ul, .b-konten ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.b-konten li { margin: .35em 0; }
.b-konten li::marker { color: var(--b-aksen); }
.b-konten img { border-radius: 16px; margin: 1.4em auto; height: auto; }
.b-konten blockquote { margin: 1.5em 0; padding: 18px 22px; border-left: 4px solid var(--b-aksen); border-radius: 0 14px 14px 0; background: var(--b-aksen-bg); color: var(--b-teks); font-style: italic; }
.b-konten table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .9em; }
.b-konten th, .b-konten td { padding: 10px 12px; border: 1px solid var(--b-garis); }
.b-konten th { background: var(--b-isi); color: var(--b-teks); }
.b-ringkas { margin: 0 0 1.6em; padding: 18px 20px; border-radius: 16px; background: var(--b-isi); border: 1px solid var(--b-garis); font-size: .92em; }
.b-ringkas b { display: block; margin-bottom: 6px; color: var(--b-teks); font-size: .8em; letter-spacing: .08em; text-transform: uppercase; }
.b-ringkas ul { margin: 0; }
.b-sisip { display: flex; gap: 16px; align-items: center; margin: 2em 0; padding: 20px; border-radius: 18px; background: linear-gradient(135deg, var(--b-aksen-bg), transparent); border: 1px solid var(--b-garis); }
.b-sisip h4 { margin: 0 0 4px; color: var(--b-teks); font-size: 17px; }
.b-sisip p { margin: 0; font-size: 14px; }
.b-sisip .b-tombol { margin-left: auto; flex: 0 0 auto; text-decoration: none; color: #fff; }
@media (max-width: 600px) { .b-sisip { flex-direction: column; align-items: flex-start; } .b-sisip .b-tombol { margin-left: 0; } }
.b-reaksi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 30px 0; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--b-garis); background: var(--b-kartu); }
.b-reaksi b { margin-right: auto; }
.b-reaksi button { height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--b-garis); background: var(--b-kartu); color: var(--b-teks-2); font-weight: 700; }
.b-reaksi button[aria-pressed="true"] { background: var(--b-aksen); border-color: var(--b-aksen); color: #fff; }
.b-penulis-kotak { display: flex; gap: 16px; padding: 20px; border-radius: 18px; background: var(--b-kartu); border: 1px solid var(--b-garis); }
.b-penulis-kotak .b-avatar { width: 56px; height: 56px; font-size: 18px; flex: 0 0 56px; }
.b-penulis-kotak p { margin: 4px 0 0; color: var(--b-teks-2); font-size: 14px; }
.b-kanan .b-panel + .b-panel { margin-top: 16px; }
.b-harga-besar { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.b-atas { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 46px; height: 46px; border-radius: 14px; border: 0; background: var(--b-aksen); color: #fff; display: grid; place-items: center; box-shadow: var(--b-bayang); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; }
.b-atas.tampil { opacity: 1; transform: none; pointer-events: auto; }
.b-atas svg { width: 20px; height: 20px; }
.b-toast { position: fixed; left: 50%; bottom: 28px; z-index: 120; transform: translate(-50%, 16px); opacity: 0; padding: 11px 18px; border-radius: 12px; background: #0F172A; color: #fff; font-weight: 700; font-size: 13.5px; transition: .2s ease; pointer-events: none; }
.b-toast.tampil { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 600px) { .b-logo small { display: none; } .b-logo img { height: 36px; } .b-header .b-wadah { gap: 12px; } .b-header-kanan { gap: 6px; } }

/* ===================== Tema WordPress (child Divi) ===================== */
/* Divi memberi gaya global (font Open Sans, h1-h6 #333 + padding, p padding-bottom, a #2ea3f2, latar putih).
   Di area tampilan baru gaya itu dinetralkan; isi artikel buatan Divi Builder tetap memakai gayanya sendiri. */
html body.dex-blog { background: var(--b-bg) !important; color: var(--b-teks); font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.6; }
body.dex-blog #page-container, body.dex-blog #et-main-area { background: transparent; padding-top: 0 !important; }
body.dex-blog :is(.b-header, .b-footer, .b-main, .b-cari, .b-ticker) :is(h1, h2, h3, h4, h5, h6) { color: inherit; padding-bottom: 0; font-family: inherit; font-weight: 800; }
body.dex-blog :is(.b-header, .b-footer, .b-main, .b-cari) p { padding-bottom: 0; }
body.dex-blog :is(.b-header, .b-footer, .b-hero, .b-bagian, .b-artikel-kepala, .b-remah, .b-panel, .b-cari, .b-ticker, .b-arsip-kepala) a { color: inherit; }
body.dex-blog .b-tautan, body.dex-blog .b-konten a { color: var(--b-aksen); }
body.dex-blog .b-tombol.utama, body.dex-blog .b-sisip .b-tombol { color: #fff; }
body.dex-blog .b-panel.cta .b-tombol { color: #1D4ED8; }
body.dex-blog .b-kartu-isi h3, body.dex-blog .b-baris h3, body.dex-blog .b-tren b { color: var(--b-teks); }
body.dex-blog .b-kartu:hover h3, body.dex-blog .b-baris:hover h3, body.dex-blog .b-tren a:hover b, body.dex-blog .b-sorot:hover h1, .b-sorot:hover h2 { color: var(--b-aksen); }
body.dex-blog .b-konten { color: var(--b-teks-2); }
body.dex-blog .b-konten h2, body.dex-blog .b-konten h3, body.dex-blog .b-konten h4 { font-family: inherit; padding-bottom: 0; }
body.dex-blog .b-konten p { padding-bottom: 0; }
/* daftar isi plugin (Easy TOC) disembunyikan di desktop karena ada daftar isi samping; tetap tampil di HP */
@media (min-width: 901px) { body.dex-blog .b-konten #ez-toc-container { display: none; } }
/* halaman Divi biasa (glossary, event, promo): isi tetap terang agar modul Divi terbaca */
html[data-tema="gelap"] body.dex-blog.page:not(.home) #main-content { color: #333; }

/* arsip & pencarian */
.b-arsip-kepala { padding: 34px 0 22px; }
.b-arsip-kepala h1 { margin: 10px 0 8px; font-size: 34px; line-height: 1.2; letter-spacing: -.02em; }
.b-arsip-desk { color: var(--b-teks-2); max-width: 720px; }
.b-cari-halaman { display: flex; gap: 8px; max-width: 560px; margin: 12px 0 10px; }
.b-cari-halaman input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--b-garis); background: var(--b-kartu); color: var(--b-teks); font: inherit; }
.b-halaman { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 28px 0 10px; }
.b-halaman .page-numbers { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--b-garis); background: var(--b-kartu); color: var(--b-teks-2); display: inline-grid; place-items: center; font-weight: 700; }
.b-halaman .page-numbers.current { background: var(--b-aksen); border-color: var(--b-aksen); color: #fff; }
.b-halaman a.page-numbers:hover { border-color: var(--b-aksen); color: var(--b-aksen); }
.b-tag { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 0; }
.b-kartu-isi > .b-chip { align-self: flex-start; }
.b-sampul img { width: 100%; height: auto; }
.b-panel .b-tombol svg { width: 18px; height: 18px; }
/* komentar bawaan WP */
body.dex-blog #comments, body.dex-blog .comment-respond { margin-top: 28px; padding: 20px; border-radius: 18px; background: var(--b-kartu); border: 1px solid var(--b-garis); }
.b-footer-lama { display: none !important; } /* footer lama di isi halaman Divi (lihat dex-blog.js) */

/* [18 Okt 2026] SEO: judul situs (H1) di beranda */
.b-situs-kepala { padding: 26px 0 0; }
.b-situs-kepala h1 { margin: 0; font-size: 24px; line-height: 1.3; letter-spacing: -.02em; }
.b-situs-kepala p { margin: 4px 0 0; color: var(--b-teks-3); font-size: 14px; }
.b-hero { padding-top: 18px; }
.b-sorot-gbr img, .b-kartu-gbr img { height: 100%; } /* atribut width/height dari wp_get_attachment_image */
.b-baris img { height: auto; }
@media (max-width: 600px) { .b-situs-kepala h1 { font-size: 20px; } }