/*
Theme Name: iGamingZona
Theme URI: https://igamingzona.local/
Author: iGamingZona
Description: Tema acuan industri iGaming. Tampilan jurnal perdagangan: latar terang, judul berhuruf serif, tabel data, dan lencana status. Seluruh SEO on-page diurus tema ini; data acuan datang dari plugin iGamingZona.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: igamingzona
Tags: one-column, custom-logo, custom-menu, featured-images, full-width-template, translation-ready
*/

/* ==========================================================================
   1. Token warna dan huruf
   ========================================================================== */

:root {
	--tinta:        #0f1c2b;
	--tinta-lembut: #475c73;
	--tinta-pudar:  #6b7f94;
	--kertas:       #ffffff;
	--kertas-2:     #f4f7f9;
	--kertas-3:     #eaeff4;
	--garis:        #dde4ec;
	--garis-tegas:  #c3cedb;

	--biru:         #14489c;
	--biru-terang:  #1d5fc7;
	--biru-pudar:   #e8eefa;
	--bara:         #b4420e;
	--bara-pudar:   #fdeee6;

	--hijau:        #15614f;
	--hijau-pudar:  #e4f2ee;
	--merah:        #9c1733;
	--merah-pudar:  #fbe9ed;
	--kuning:       #7a5600;
	--kuning-pudar: #fbf2dd;

	/* Permukaan yang memang selalu gelap: bilah atas dan kaki situs.
	   Sengaja tidak ikut berubah pada mode gelap, karena logo GIF yang
	   dipasang di sana membawa latarnya sendiri dan harus cocok persis. */
	--tinta-tetap: #0f1c2b;

	--serif:  Georgia, 'Iowan Old Style', 'Times New Roman', Times, serif;
	--sans:   system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--mono:   ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;

	--bingkai: 1180px;
	--radius:  3px;
	--bayang:  0 1px 2px rgba(15, 28, 43, .06), 0 8px 24px -16px rgba(15, 28, 43, .18);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--tinta:        #e8edf3;
		--tinta-lembut: #a7b6c6;
		--tinta-pudar:  #8496a9;
		--kertas:       #0d151f;
		--kertas-2:     #121d2a;
		--kertas-3:     #1a2836;
		--garis:        #233445;
		--garis-tegas:  #32475c;

		--biru:         #8fb4f0;
		--biru-terang:  #a9c6f7;
		--biru-pudar:   #16243a;
		--bara:         #f0a279;
		--bara-pudar:   #2a1a12;

		--hijau:        #7fd0ba;
		--hijau-pudar:  #11261f;
		--merah:        #f4a0b2;
		--merah-pudar:  #2a1118;
		--kuning:       #e1bd6a;
		--kuning-pudar: #241c0c;

		--bayang:  0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .6);
	}
}

:root[data-theme='dark'] {
	--tinta:        #e8edf3;
	--tinta-lembut: #a7b6c6;
	--tinta-pudar:  #8496a9;
	--kertas:       #0d151f;
	--kertas-2:     #121d2a;
	--kertas-3:     #1a2836;
	--garis:        #233445;
	--garis-tegas:  #32475c;

	--biru:         #8fb4f0;
	--biru-terang:  #a9c6f7;
	--biru-pudar:   #16243a;
	--bara:         #f0a279;
	--bara-pudar:   #2a1a12;

	--hijau:        #7fd0ba;
	--hijau-pudar:  #11261f;
	--merah:        #f4a0b2;
	--merah-pudar:  #2a1118;
	--kuning:       #e1bd6a;
	--kuning-pudar: #241c0c;

	--bayang:  0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .6);
}

/* ==========================================================================
   2. Dasar
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	margin: 0;
	background: var(--kertas);
	color: var(--tinta);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.011em;
	margin: 0 0 .5em;
	color: var(--tinta);
	text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); }
h3 { font-size: 1.18rem; }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--biru);
	text-decoration-color: color-mix(in srgb, var(--biru) 35%, transparent);
	text-underline-offset: 2px;
}
a:hover { color: var(--biru-terang); text-decoration-color: currentColor; }

img, svg, video { max-width: 100%; height: auto; }

strong { font-weight: 650; }

hr {
	border: 0;
	border-top: 1px solid var(--garis);
	margin: 2.5rem 0;
}

:focus-visible {
	outline: 2px solid var(--biru);
	outline-offset: 2px;
	border-radius: 2px;
}

.igz-layar-saja {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.igz-lewati {
	position: absolute;
	top: -60px; left: 1rem;
	z-index: 100;
	background: var(--tinta);
	color: var(--kertas);
	padding: .6rem 1rem;
	border-radius: var(--radius);
}
.igz-lewati:focus { top: .6rem; }

.igz-bingkai {
	width: 100%;
	max-width: var(--bingkai);
	margin-inline: auto;
	padding-inline: 16px;
}

/* ==========================================================================
   3. Kepala situs
   ========================================================================== */

/* Sedikit lebih gelap daripada kepala situs, supaya kedua bilah masih
   terbaca sebagai dua lapis dan tidak melebur jadi satu blok. */
.igz-bilah-atas {
	background: #0a1420;
	color: color-mix(in srgb, #fff 76%, #0a1420);
	font-size: .78rem;
	letter-spacing: .02em;
}
:root[data-theme='dark'] .igz-bilah-atas,
.igz-bilah-atas { border-bottom: 1px solid rgba(255, 255, 255, .08); }

.igz-bilah-atas-dalam {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.4rem;
	align-items: center;
	justify-content: space-between;
	min-height: 36px;
	padding-block: .35rem;
}
.igz-bilah-atas p { margin: 0; }
.igz-bilah-atas a { color: inherit; text-decoration: none; }
.igz-bilah-atas a:hover { color: #fff; text-decoration: underline; }
.igz-bilah-tautan { display: flex; gap: 1.1rem; flex-wrap: wrap; }

/* Kepala situs selalu biru tua, sama dengan kaki situs, pada kedua mode
   warna. Warnanya pekat dan tidak ikut berubah karena logo di dalamnya
   berupa GIF yang latarnya ikut tercetak di dalam berkas: kalau berbeda
   sedikit saja, kotak GIF-nya langsung terlihat. */
.igz-kepala {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--tinta-tetap);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.igz-kepala-dalam {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	min-height: 68px;
}

.igz-logo { display: flex; align-items: center; margin-right: auto; }
.igz-logo a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
/* Logo kepala memakai GIF 480x104 yang sudah berisi ruang kosong sendiri,
   jadi tingginya dibuat lebih besar daripada logo diam. */
.igz-logo img { display: block; width: auto; height: 46px; }
.igz-logo picture { display: block; }
.igz-logo-teks {
	font-family: var(--serif);
	font-size: 1.32rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--tinta);
}

.igz-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.igz-nav a {
	display: block;
	padding: .5rem .66rem;
	border-radius: var(--radius);
	color: color-mix(in srgb, #fff 88%, var(--tinta-tetap));
	font-size: .93rem;
	font-weight: 550;
	text-decoration: none;
	white-space: nowrap;
}
.igz-nav a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.igz-nav .current-menu-item > a,
.igz-nav .current_page_item > a {
	color: #fff;
	box-shadow: inset 0 -2px 0 var(--bara);
}

.igz-menu-tombol {
	display: none;
	width: 42px; height: 38px;
	padding: 0;
	background: none;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--radius);
	cursor: pointer;
}
.igz-menu-garis {
	display: block;
	width: 18px; height: 2px;
	margin: 3px auto;
	background: #fff;
}

@media (max-width: 1000px) {
	.igz-menu-tombol { display: block; }
	.igz-nav {
		display: none;
		position: absolute;
		left: 0; right: 0;
		top: 100%;
		background: var(--tinta-tetap);
		border-bottom: 1px solid rgba(255, 255, 255, .12);
		box-shadow: var(--bayang);
		padding: .5rem 16px 1rem;
	}
	.igz-nav.igz-buka { display: block; }
	.igz-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.igz-nav a { padding: .7rem .4rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
}

/* ==========================================================================
   4. Isi utama
   ========================================================================== */

.igz-isi { display: block; padding-block: 2rem 4rem; }
.igz-isi > .igz-bingkai > * + * { margin-top: 2rem; }

.igz-remah {
	font-size: .82rem;
	color: var(--tinta-pudar);
}
.igz-remah ol {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.igz-remah li + li::before {
	content: '/';
	margin-right: .55rem;
	color: var(--garis-tegas);
}
.igz-remah a { color: var(--tinta-lembut); text-decoration: none; }
.igz-remah a:hover { color: var(--biru); text-decoration: underline; }
.igz-remah [aria-current] { color: var(--tinta); }

/* Kepala halaman */

.igz-kepala-halaman { max-width: 760px; }
.igz-kepala-halaman.igz-lebar { max-width: none; }

.igz-kicker {
	display: inline-block;
	margin: 0 0 .7rem;
	padding: .2rem .5rem;
	background: var(--bara-pudar);
	color: var(--bara);
	border-radius: 2px;
	font-family: var(--sans);
	font-size: .72rem;
	font-weight: 650;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.igz-kicker a { color: inherit; text-decoration: none; }
.igz-kicker a:hover { text-decoration: underline; }

.igz-ringkas {
	font-size: 1.14rem;
	line-height: 1.6;
	color: var(--tinta-lembut);
	max-width: 68ch;
}

.igz-baris-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.2rem;
	margin-top: 1rem;
	padding-top: .9rem;
	border-top: 1px solid var(--garis);
	font-size: .82rem;
	color: var(--tinta-pudar);
}
.igz-baris-meta strong { color: var(--tinta-lembut); font-weight: 600; }

/* Tipografi isi panjang */

.igz-prosa { max-width: 72ch; }
.igz-prosa > * + * { margin-top: 1.1em; }
.igz-prosa h2 {
	margin-top: 2.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--garis);
}
.igz-prosa h3 { margin-top: 1.8rem; }
.igz-prosa ul, .igz-prosa ol { padding-left: 1.3rem; }
.igz-prosa li { margin-bottom: .45rem; }
.igz-prosa li::marker { color: var(--tinta-pudar); }

.igz-pengantar p:first-of-type {
	font-size: 1.1rem;
	color: var(--tinta-lembut);
}

.igz-bagian + .igz-bagian { margin-top: 0; }

.igz-langkah { counter-reset: igz; list-style: none; padding-left: 0; }
.igz-langkah > li {
	counter-increment: igz;
	position: relative;
	padding-left: 2.4rem;
	margin-bottom: .8rem;
}
.igz-langkah > li::before {
	content: counter(igz);
	position: absolute;
	left: 0; top: .1rem;
	width: 1.7rem; height: 1.7rem;
	display: grid;
	place-items: center;
	background: var(--biru-pudar);
	color: var(--biru);
	border-radius: 50%;
	font-size: .8rem;
	font-weight: 700;
}

.igz-catatan {
	margin: 1.6rem 0;
	padding: 1rem 1.1rem;
	background: var(--kertas-2);
	border-left: 3px solid var(--bara);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: .95rem;
	color: var(--tinta-lembut);
}

.igz-kutipan {
	margin: 1.8rem 0;
	padding-left: 1.2rem;
	border-left: 3px solid var(--garis-tegas);
}
.igz-kutipan blockquote { margin: 0; }
.igz-kutipan p {
	font-family: var(--serif);
	font-size: 1.16rem;
	line-height: 1.5;
}
.igz-kutipan figcaption {
	margin-top: .5rem;
	font-size: .82rem;
	color: var(--tinta-pudar);
}

/* Daftar isi */

.igz-isi-nav {
	margin: 2rem 0;
	padding: 1.1rem 1.3rem;
	background: var(--kertas-2);
	border: 1px solid var(--garis);
	border-radius: var(--radius);
}
.igz-isi-judul {
	font-family: var(--sans);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tinta-pudar);
	margin-bottom: .7rem;
}
.igz-isi-nav ol {
	columns: 2;
	column-gap: 2rem;
	margin: 0;
	padding-left: 1.1rem;
	font-size: .93rem;
}
.igz-isi-nav li { margin-bottom: .35rem; break-inside: avoid; }
@media (max-width: 640px) { .igz-isi-nav ol { columns: 1; } }

/* Dua kolom untuk halaman profil: tulisan di kiri, ringkasan di kanan. */

.igz-dua {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 2.8rem;
	align-items: start;
}
.igz-dua-utama { min-width: 0; }
.igz-dua-samping {
	position: sticky;
	top: 92px;
	min-width: 0;
}
.igz-dua-samping .igz-tabel-bungkus { margin-top: 0; }
.igz-dua-samping .igz-fakta { font-size: .87rem; }
.igz-dua-samping .igz-fakta th { width: 42%; }

@media (max-width: 1000px) {
	.igz-dua { grid-template-columns: 1fr; gap: 1.6rem; }
	.igz-dua-samping { position: static; }
}

.igz-samping-blok {
	margin-top: 1.6rem;
	padding: 1rem 1.1rem;
	background: var(--kertas-2);
	border: 1px solid var(--garis);
	border-radius: var(--radius);
}
.igz-samping-blok h2 {
	font-family: var(--sans);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tinta-pudar);
	margin-bottom: .7rem;
}
.igz-samping-blok ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .45rem;
	font-size: .88rem;
}
.igz-samping-blok a { text-decoration: none; }
.igz-samping-blok a:hover { text-decoration: underline; }

/* ==========================================================================
   5. Angka, tabel, lencana
   ========================================================================== */

.igz-angka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	margin: 1.8rem 0;
	background: var(--garis);
	border: 1px solid var(--garis);
	border-radius: var(--radius);
	overflow: hidden;
}
.igz-angka-sel {
	background: var(--kertas);
	padding: 1rem 1.1rem;
}
.igz-angka-nilai {
	display: block;
	font-family: var(--serif);
	font-size: 1.85rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
.igz-angka-label {
	display: block;
	margin-top: .25rem;
	font-size: .8rem;
	line-height: 1.4;
	color: var(--tinta-pudar);
}

.igz-tabel-bungkus { margin: 1.6rem 0; overflow-x: auto; }

.igz-tabel, .igz-fakta, .igz-status {
	width: 100%;
	border-collapse: collapse;
	font-size: .93rem;
}
.igz-tabel caption, .igz-fakta caption, .igz-status caption {
	caption-side: top;
	text-align: left;
	padding-bottom: .6rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--tinta-pudar);
}
.igz-tabel th, .igz-tabel td,
.igz-fakta th, .igz-fakta td,
.igz-status th, .igz-status td {
	padding: .66rem .8rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--garis);
}
.igz-tabel thead th, .igz-status thead th {
	background: var(--kertas-2);
	border-bottom: 2px solid var(--garis-tegas);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tinta-lembut);
	white-space: nowrap;
}
.igz-tabel tbody th, .igz-status tbody th { font-weight: 600; }
.igz-fakta th {
	width: 34%;
	background: var(--kertas-2);
	font-weight: 600;
	color: var(--tinta-lembut);
}
.igz-tabel tbody tr:hover, .igz-status tbody tr:hover { background: var(--kertas-2); }

@media (max-width: 640px) {
	.igz-tabel, .igz-status { font-size: .88rem; }
	.igz-tabel thead, .igz-status thead { display: none; }
	.igz-tabel tbody tr, .igz-status tbody tr {
		display: block;
		padding: .5rem 0;
		border-bottom: 1px solid var(--garis-tegas);
	}
	.igz-tabel tbody th, .igz-tabel tbody td,
	.igz-status tbody th, .igz-status tbody td {
		display: block;
		border: 0;
		padding: .22rem 0;
	}
	.igz-tabel tbody td::before, .igz-status tbody td::before {
		content: attr(data-label) ': ';
		font-size: .74rem;
		font-weight: 700;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: var(--tinta-pudar);
	}
	.igz-fakta th { width: auto; }
}

.igz-lencana {
	display: inline-flex;
	align-items: baseline;
	gap: .25rem;
	padding: .18rem .5rem;
	border-radius: 2px;
	font-size: .76rem;
	font-weight: 650;
	letter-spacing: .01em;
	white-space: nowrap;
}
.igz-lencana--ya       { background: var(--hijau-pudar);  color: var(--hijau); }
.igz-lencana--tidak    { background: var(--merah-pudar);  color: var(--merah); }
.igz-lencana--monopoli { background: var(--kuning-pudar); color: var(--kuning); }
.igz-lencana--terikat  { background: var(--biru-pudar);   color: var(--biru); }
.igz-lencana--sebagian { background: var(--kertas-3);     color: var(--tinta-lembut); }
.igz-lencana--belum    { background: var(--kertas-3);     color: var(--tinta-pudar); }
.igz-lencana--lain     { background: var(--kertas-3);     color: var(--tinta-lembut); }
.igz-lencana-produk { font-weight: 450; opacity: .8; }

/* ==========================================================================
   6. Kartu dan kisi
   ========================================================================== */

.igz-kisi {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 1px;
	background: var(--garis);
	border: 1px solid var(--garis);
	border-radius: var(--radius);
	overflow: hidden;
}

.igz-kartu {
	background: var(--kertas);
	padding: 1.15rem 1.2rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
.igz-kartu:hover { background: var(--kertas-2); }

.igz-kartu-kicker {
	margin: 0;
	font-size: .72rem;
	font-weight: 650;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--bara);
}
.igz-kartu-judul {
	margin: 0;
	font-size: 1.12rem;
	line-height: 1.3;
}
.igz-kartu-judul a { color: var(--tinta); text-decoration: none; }
.igz-kartu-judul a:hover { color: var(--biru); text-decoration: underline; }
.igz-kartu-teks {
	margin: 0;
	font-size: .91rem;
	line-height: 1.55;
	color: var(--tinta-lembut);
}
.igz-kartu-lencana {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
	margin-top: auto;
	padding-top: .3rem;
}
.igz-kartu-meta {
	margin: auto 0 0;
	padding: .7rem 0 0;
	border-top: 1px solid var(--garis);
	list-style: none;
	display: grid;
	gap: .22rem;
	font-size: .8rem;
}
.igz-kartu-meta li { display: flex; justify-content: space-between; gap: .8rem; }
.igz-meta-label { color: var(--tinta-pudar); }
.igz-meta-nilai { color: var(--tinta-lembut); font-weight: 550; text-align: right; }

.igz-kisi--topik { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.igz-kartu--kajian .igz-kartu-judul { font-family: var(--serif); font-size: 1.16rem; }

/* Blok wilayah/sektor pada halaman indeks */

.igz-wilayah-blok { margin-top: 3rem; }
.igz-wilayah-blok:first-of-type { margin-top: 2rem; }
.igz-wilayah-teks {
	max-width: 70ch;
	margin: 0 0 1.2rem;
	font-size: .95rem;
	color: var(--tinta-lembut);
}

.igz-kotak { margin-top: 2.6rem; }
.igz-kotak-kepala {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.2rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 1.1rem;
	padding-bottom: .7rem;
	border-bottom: 2px solid var(--tinta);
}
.igz-kotak-kepala h2 { margin: 0; }
.igz-kotak-sub {
	margin: .25rem 0 0;
	font-size: .82rem;
	color: var(--tinta-pudar);
}
.igz-kotak-semua {
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.igz-kotak-semua::after { content: ' \2192'; }

/* Pil penyaring */

.igz-pil-bilah {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 1.4rem 0 .5rem;
}
.igz-pil {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .34rem .7rem;
	background: var(--kertas-2);
	border: 1px solid var(--garis);
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 550;
	color: var(--tinta-lembut);
	text-decoration: none;
}
.igz-pil:hover { border-color: var(--biru); color: var(--biru); }
.igz-pil-kini {
	background: var(--tinta);
	border-color: var(--tinta);
	color: var(--kertas);
}
.igz-pil-angka {
	font-size: .74rem;
	font-variant-numeric: tabular-nums;
	color: var(--tinta-pudar);
}
.igz-pil-kini .igz-pil-angka { color: color-mix(in srgb, var(--kertas) 70%, transparent); }

.igz-tautan-tebar {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .6rem;
	margin: .6rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .9rem;
}
.igz-tautan-tebar li::after { content: ','; color: var(--tinta-pudar); }
.igz-tautan-tebar li:last-child::after { content: ''; }

.igz-subjudul {
	font-family: var(--sans);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tinta-pudar);
	margin: 1.6rem 0 .3rem;
}

/* ==========================================================================
   7. Beranda
   ========================================================================== */

.igz-sorot {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 2.4rem;
	align-items: start;
	padding-bottom: 2.4rem;
	border-bottom: 1px solid var(--garis);
}
@media (max-width: 900px) {
	.igz-sorot { grid-template-columns: 1fr; gap: 1.8rem; }
}
.igz-sorot h1 { margin-bottom: .6rem; }
.igz-sorot-teks { font-size: 1.1rem; color: var(--tinta-lembut); }

/* Dengan ilustrasi: kolom gambar sedikit lebih lebar dan rata tengah. */
.igz-sorot--gambar {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: 2rem;
}
.igz-sorot-gambar img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}
@media (max-width: 900px) {
	.igz-sorot--gambar { grid-template-columns: 1fr; }
	.igz-sorot--gambar .igz-sorot-gambar { order: -1; }
}

.igz-panel {
	background: var(--kertas-2);
	border: 1px solid var(--garis);
	border-radius: var(--radius);
	padding: 1.3rem 1.4rem;
}
.igz-panel h2 {
	font-family: var(--sans);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tinta-pudar);
	margin-bottom: .9rem;
}
.igz-panel ol, .igz-panel ul { margin: 0; padding: 0; list-style: none; }
.igz-panel li + li { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--garis); }
.igz-panel a { font-weight: 600; text-decoration: none; }
.igz-panel a:hover { text-decoration: underline; }
.igz-panel-teks { margin: .2rem 0 0; font-size: .85rem; color: var(--tinta-pudar); }

.igz-tombol {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: 1.2rem;
	padding: .62rem 1.1rem;
	background: var(--tinta);
	color: var(--kertas);
	border-radius: var(--radius);
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
}
.igz-tombol:hover { background: var(--biru); color: var(--kertas); }
.igz-tombol--garis {
	background: none;
	color: var(--tinta);
	border: 1px solid var(--garis-tegas);
}
.igz-tombol--garis:hover { border-color: var(--biru); background: none; color: var(--biru); }

.igz-tombol-baris { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ==========================================================================
   8. Glosarium
   ========================================================================== */

.igz-huruf {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	margin: 1.6rem 0 2rem;
	padding: .8rem;
	background: var(--kertas-2);
	border: 1px solid var(--garis);
	border-radius: var(--radius);
}
.igz-huruf a {
	display: grid;
	place-items: center;
	width: 2rem; height: 2rem;
	border-radius: var(--radius);
	font-size: .88rem;
	font-weight: 650;
	text-decoration: none;
}
.igz-huruf a:hover { background: var(--tinta); color: var(--kertas); }

.igz-huruf-blok { margin-top: 2.4rem; }
.igz-huruf-judul {
	font-size: 1.6rem;
	margin-bottom: .6rem;
	padding-bottom: .4rem;
	border-bottom: 2px solid var(--tinta);
}
.igz-glosarium { margin: 0; }
.igz-glosarium-baris {
	display: grid;
	grid-template-columns: minmax(170px, 23%) 1fr;
	gap: .4rem 1.6rem;
	padding: .85rem 0;
	border-bottom: 1px solid var(--garis);
	scroll-margin-top: 90px;
}
.igz-glosarium dt {
	font-weight: 650;
	font-size: .98rem;
}
.igz-glosarium dd {
	margin: 0;
	font-size: .95rem;
	color: var(--tinta-lembut);
}
.igz-juga {
	display: block;
	font-size: .78rem;
	font-weight: 450;
	color: var(--tinta-pudar);
}
@media (max-width: 700px) {
	.igz-glosarium-baris { grid-template-columns: 1fr; gap: .2rem; }
}

/* ==========================================================================
   8b. Peta situs
   ========================================================================== */

.igz-peta-blok { margin-top: 2.4rem; }
.igz-peta-blok h2 {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--tinta);
}
.igz-peta-angka {
	font-family: var(--sans);
	font-size: .78rem;
	font-weight: 600;
	color: var(--tinta-pudar);
	font-variant-numeric: tabular-nums;
}
.igz-peta-catatan {
	margin: .6rem 0 0;
	font-size: .88rem;
	color: var(--tinta-pudar);
}
.igz-peta-daftar {
	columns: 3;
	column-gap: 2rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .93rem;
}
.igz-peta-daftar li {
	break-inside: avoid;
	margin-bottom: .4rem;
	padding-left: .9rem;
	text-indent: -.9rem;
}
.igz-peta-daftar li::before {
	content: '\2022';
	margin-right: .4rem;
	color: var(--garis-tegas);
}
@media (max-width: 900px) { .igz-peta-daftar { columns: 2; } }
@media (max-width: 560px) { .igz-peta-daftar { columns: 1; } }

/* ==========================================================================
   9. Tanya jawab
   ========================================================================== */

.igz-faq { margin-top: 2.8rem; }
.igz-faq h2 {
	padding-bottom: .7rem;
	border-bottom: 2px solid var(--tinta);
}
.igz-faq-baris { border-bottom: 1px solid var(--garis); }
.igz-faq-baris summary {
	display: flex;
	align-items: baseline;
	gap: .7rem;
	padding: .85rem 0;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}
.igz-faq-baris summary::-webkit-details-marker { display: none; }
.igz-faq-baris summary::before {
	content: '+';
	flex: none;
	width: 1.1rem;
	font-size: 1.1rem;
	font-weight: 400;
	color: var(--bara);
}
.igz-faq-baris[open] summary::before { content: '\2212'; }
.igz-faq-jawab {
	padding: 0 0 1rem 1.8rem;
	font-size: .95rem;
	color: var(--tinta-lembut);
	max-width: 72ch;
}

/* ==========================================================================
   10. Penomoran dan tautan lanjut
   ========================================================================== */

.igz-penomoran {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	margin-top: 2rem;
}
.igz-hal-angka, .igz-hal-tombol {
	display: inline-grid;
	place-items: center;
	min-width: 2.2rem;
	height: 2.2rem;
	padding-inline: .6rem;
	border: 1px solid var(--garis);
	border-radius: var(--radius);
	font-size: .88rem;
	text-decoration: none;
	color: var(--tinta-lembut);
}
.igz-hal-angka:hover, .igz-hal-tombol:hover { border-color: var(--biru); color: var(--biru); }
.igz-hal-kini {
	background: var(--tinta);
	border-color: var(--tinta);
	color: var(--kertas);
	font-weight: 650;
}
.igz-hal-jeda { padding-inline: .3rem; color: var(--tinta-pudar); }

.igz-lanjut {
	margin-top: 3rem;
	padding-top: 1.6rem;
	border-top: 2px solid var(--tinta);
}

/* ==========================================================================
   11. Kaki situs
   ========================================================================== */

.igz-kaki {
	margin-top: 3rem;
	background: var(--tinta-tetap);
	color: color-mix(in srgb, #fff 80%, var(--tinta-tetap));
	font-size: .9rem;
}
.igz-kaki-dalam { padding-block: 2.6rem 1.4rem; }
.igz-kaki-kisi {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: 2rem;
}
@media (max-width: 860px) {
	.igz-kaki-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.igz-kaki-merek { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.igz-kaki-kisi { grid-template-columns: 1fr; }
}

.igz-kaki h2 {
	font-family: var(--sans);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: color-mix(in srgb, #fff 55%, var(--tinta-tetap));
	margin-bottom: .8rem;
}
.igz-kaki ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.igz-kaki a { color: inherit; text-decoration: none; }
.igz-kaki a:hover { color: #fff; text-decoration: underline; }
/* Logo kaki memakai GIF 480x104 yang sudah berisi ruang kosong sendiri,
   jadi tingginya dibuat lebih besar daripada logo diam. */
.igz-kaki-merek img {
	height: 48px;
	width: auto;
	margin-bottom: .7rem;
	margin-left: -4px;
}
.igz-kaki-merek p { color: color-mix(in srgb, #fff 62%, var(--tinta-tetap)); max-width: 42ch; font-size: .88rem; }

.igz-kaki-bawah {
	margin-top: 2rem;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.4rem;
	justify-content: space-between;
	font-size: .8rem;
	color: color-mix(in srgb, #fff 55%, var(--tinta-tetap));
}
.igz-kaki-bawah ul { display: flex; flex-wrap: wrap; gap: 1.1rem; }

/* ==========================================================================
   12. Halaman 404 dan hasil pencarian
   ========================================================================== */

.igz-kosong {
	padding: 2rem 0;
	color: var(--tinta-lembut);
}
.igz-cari {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.4rem 0;
}
.igz-cari input[type='search'] {
	flex: 1 1 260px;
	min-width: 0;
	padding: .6rem .8rem;
	background: var(--kertas);
	color: var(--tinta);
	border: 1px solid var(--garis-tegas);
	border-radius: var(--radius);
	font: inherit;
	font-size: .95rem;
}
.igz-cari button {
	padding: .6rem 1.1rem;
	background: var(--tinta);
	color: var(--kertas);
	border: 0;
	border-radius: var(--radius);
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
}
.igz-cari button:hover { background: var(--biru); }

.igz-hasil { margin-top: 1.6rem; display: grid; gap: 1.2rem; }
.igz-hasil article {
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--garis);
}
.igz-hasil h2 { font-size: 1.15rem; margin-bottom: .3rem; }
.igz-hasil p { margin: 0; font-size: .92rem; color: var(--tinta-lembut); }

/* ==========================================================================
   13. Cetak
   ========================================================================== */

@media print {
	.igz-bilah-atas, .igz-kepala, .igz-kaki, .igz-isi-nav, .igz-pil-bilah, .igz-penomoran { display: none; }
	body { font-size: 11pt; background: #fff; color: #000; }
	.igz-kisi { break-inside: avoid; }
	a { text-decoration: none; color: #000; }
	.igz-prosa { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}