/*
Theme Name: Mahad Salim Batanghari
Theme URI: https://example.com
Author: Ma'had Salim Batanghari
Description: Tema ringan, responsif, dan mudah dibaca untuk Ma'had Salim Maula Abu Hudzaifah Batanghari. Tanpa plugin tambahan, tanpa file dari luar, sehingga cepat dibuka meski sinyal lemah.
Version: 1.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: mahad-salim
*/

/* =========================================================
   1. TOKEN WARNA & HURUF
   ========================================================= */
:root{
	--tinta:        #16192b;
	--tinta-lembut: #55596b;
	--kertas:       #f8f7f3;
	--kertas-tua:   #eeece4;
	--garis:        #d8d4c8;
	--biru:         #14265e;   /* navy utama, diambil dari wordmark logo */
	--biru-muda:    #1e3e8c;   /* untuk tautan */
	--biru-tua:     #0d1a44;   /* kaki halaman */
	--toska:        #2f8f82;   /* aksen khat kufi, dipakai terbatas */
	--emas:         #8f6520;   /* tombol di latar terang */
	--emas-terang:  #c9a049;   /* aksen di atas latar biru */
	--emas-tipis:   #e9dcbd;
	--putih:        #ffffff;

	--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--lebar: 68rem;
	--sela:  clamp(2.75rem, 7vw, 5.5rem);
	--radius: 3px;
}

/* =========================================================
   2. DASAR
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
	margin:0;
	background:var(--kertas);
	color:var(--tinta);
	font-family:var(--sans);
	font-size:1.0625rem;
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
}
@media (min-width:48rem){ body{ font-size:1.125rem; } }
@media (prefers-reduced-motion:reduce){
	html{ scroll-behavior:auto; }
	*{ animation:none !important; transition:none !important; }
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--biru-muda); text-underline-offset:.18em; text-decoration-thickness:.06em; }
a:hover{ color:var(--emas); }
:focus-visible{ outline:3px solid var(--emas); outline-offset:3px; }

h1,h2,h3,h4{
	font-family:var(--serif);
	font-weight:600;
	line-height:1.2;
	letter-spacing:-.01em;
	margin:0 0 .6em;
	color:var(--biru);
}
h1{ font-size:clamp(2rem,6vw,3.15rem); }
h2{ font-size:clamp(1.55rem,4.2vw,2.25rem); }
h3{ font-size:clamp(1.2rem,3vw,1.4rem); }
p,li{ max-width:64ch; }
p{ margin:0 0 1.1em; }

.wrap{ width:100%; max-width:var(--lebar); margin-inline:auto; padding-inline:1.25rem; }
.lewati{ position:absolute; left:-9999px; }
.lewati:focus{ left:1rem; top:1rem; z-index:99; background:var(--putih); padding:.7rem 1rem; }

/* =========================================================
   3. TOMBOL
   ========================================================= */
.tombol{
	display:inline-block;
	font-family:var(--sans);
	font-size:1rem;
	font-weight:600;
	line-height:1.2;
	padding:.85rem 1.5rem;
	border-radius:var(--radius);
	border:1.5px solid transparent;
	text-decoration:none;
	cursor:pointer;
}
.tombol-utama{ background:var(--emas); color:#fff; }
.tombol-utama:hover{ background:#6f4d15; color:#fff; }
.tombol-garis{ border-color:currentColor; background:transparent; color:var(--biru); }
.tombol-garis:hover{ background:var(--biru); color:#fff; border-color:var(--biru); }
.hero .tombol-garis{ color:#e7ebf7; }
.hero .tombol-garis:hover{ background:#e7ebf7; color:var(--biru); border-color:#e7ebf7; }

/* =========================================================
   4. KEPALA / NAVIGASI
   ========================================================= */
.kepala{
	position:sticky; top:0; z-index:40;
	background:var(--kertas);
	border-bottom:1px solid var(--garis);
}
.kepala-isi{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4.25rem; }
.merek{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--biru); }
.merek-tanda{ flex:0 0 auto; }
.merek-nama{ font-family:var(--serif); font-weight:600; font-size:1.05rem; line-height:1.15; }
.merek-sub{ display:block; font-family:var(--sans); font-size:.72rem; font-weight:500; color:var(--tinta-lembut); letter-spacing:.02em; }

.nav-tombol{
	background:none; border:1px solid var(--garis); border-radius:var(--radius);
	padding:.55rem .7rem; color:var(--biru); cursor:pointer; font-size:.95rem;
	display:flex; align-items:center; gap:.45rem;
}
.nav-tombol span{ font-weight:600; }
.nav-garis{ display:block; width:18px; height:1.5px; background:currentColor; position:relative; }
.nav-garis::before,.nav-garis::after{ content:""; position:absolute; left:0; width:18px; height:1.5px; background:currentColor; }
.nav-garis::before{ top:-5px; } .nav-garis::after{ top:5px; }

.nav ul{ list-style:none; margin:0; padding:0; }
.nav a{ display:block; text-decoration:none; color:var(--tinta); font-weight:500; }
.nav a:hover,.nav .current-menu-item>a{ color:var(--emas); }

@media (max-width:47.99rem){
	.nav{ display:none; border-top:1px solid var(--garis); padding:.5rem 0 1rem; }
	.nav.buka{ display:block; }
	.nav li{ border-bottom:1px solid var(--kertas-tua); }
	.nav a{ padding:.8rem .1rem; }
	.nav li:last-child{ border-bottom:0; }
	.nav li:last-child a{ color:var(--emas); font-weight:600; }
}
/* sub-menu */
.nav .sub-menu{ list-style:none; margin:0; padding:0; }

@media (max-width:47.99rem){
	.nav .sub-menu li{ border-bottom:0; }
	.nav .sub-menu a{ padding:.55rem .1rem .55rem 1.25rem; font-size:.94rem; color:var(--tinta-lembut); }
	.nav .menu-item-has-children > a{ padding-bottom:.35rem; }
}

@media (min-width:48rem){
	.nav .menu-item-has-children{ position:relative; }
	.nav .menu-item-has-children > a::after{ content:""; display:inline-block; margin-left:.4rem; border:.3rem solid transparent; border-top-color:currentColor; transform:translateY(.15rem); }
	.nav .sub-menu{
		position:absolute; top:100%; left:-.9rem; min-width:13rem;
		background:var(--putih); border:1px solid var(--garis); border-radius:var(--radius);
		box-shadow:0 10px 24px rgba(20,38,94,.12);
		padding:.4rem 0; display:none; z-index:60;
	}
	.nav .menu-item-has-children:hover > .sub-menu,
	.nav .menu-item-has-children:focus-within > .sub-menu{ display:block; }
	.nav .sub-menu a{ padding:.55rem .9rem; font-size:.94rem; white-space:nowrap; }
	.nav .sub-menu a:hover{ background:var(--kertas-tua); }
}

@media (min-width:48rem){
	.nav-tombol{ display:none; }
	.nav{ display:block !important; }
	.nav ul{ display:flex; align-items:center; gap:1.6rem; }
	.nav a{ font-size:.97rem; }
}

/* =========================================================
   5. HERO
   ========================================================= */
.hero{
	position:relative; overflow:hidden;
	background:var(--biru); color:#e7ebf7;
	padding:var(--sela) 0 calc(var(--sela) + .5rem);
}
.hero::after{ /* motif kufi geometris, kutipan dari bentuk logo */
	content:""; position:absolute; inset:0; pointer-events:none; opacity:.15;
	background-image:
		linear-gradient(var(--emas-terang) 1.5px, transparent 1.5px),
		linear-gradient(90deg, var(--emas-terang) 1.5px, transparent 1.5px);
	background-size:34px 34px;
	-webkit-mask-image:linear-gradient(105deg, transparent 42%, #000 100%);
	mask-image:linear-gradient(105deg, transparent 42%, #000 100%);
}
.hero-isi{ position:relative; z-index:1; max-width:44rem; }
.hero h1{ color:#fff; margin-bottom:.35em; }
.hero-teks{ font-size:1.12rem; color:#ccd4ea; max-width:40ch; }
.hero-aksi{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem; }
.hero-fakta{
	position:relative; z-index:1;
	margin-top:2.75rem; padding-top:1.5rem;
	border-top:1px solid rgba(201,160,73,.35);
	display:grid; gap:1.1rem;
}
@media (min-width:36rem){ .hero-fakta{ grid-template-columns:repeat(3,1fr); gap:1.5rem; } }
.hero-fakta div{ max-width:22ch; }
.hero-fakta dt{ font-family:var(--serif); font-size:1.15rem; color:#fff; }
.hero-fakta dd{ margin:.15rem 0 0; font-size:.92rem; color:#b6c0dd; line-height:1.5; }

/* =========================================================
   6. BAGIAN ISI
   ========================================================= */
.bagian{ padding:var(--sela) 0; border-bottom:1px solid var(--garis); }
.bagian:last-of-type{ border-bottom:0; }
.bagian-terang{ background:var(--kertas-tua); }
.bagian-judul{ margin-bottom:1.6rem; }
.bagian-judul p{ color:var(--tinta-lembut); margin:0; }

.dua-kolom{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:52rem){ .dua-kolom{ grid-template-columns:1.15fr .85fr; gap:3.5rem; } }
@media (min-width:36rem){
	.dua-kolom[style*="1fr 1fr"]{ grid-template-columns:1fr 1fr !important; gap:1.75rem 2.5rem; }
}

/* daftar poin bercentang */
.poin{ list-style:none; margin:0; padding:0; }
.poin li{ position:relative; padding-left:1.6rem; margin-bottom:.7rem; }
.poin li::before{
	content:""; position:absolute; left:0; top:.62em;
	width:.55rem; height:.55rem; background:var(--emas); transform:rotate(45deg);
}

/* kartu ringkas (dipakai terbatas) */
.kartu{ background:var(--putih); border:1px solid var(--garis); border-radius:var(--radius); padding:1.5rem; }
.kartu h3{ margin-bottom:.4rem; }
.kartu p:last-child{ margin-bottom:0; }

/* tingkatan / marhalah — urutan bertahap */
.tingkat{ list-style:none; margin:0; padding:0; counter-reset:t; }
.tingkat li{
	counter-increment:t;
	position:relative; padding:0 0 1.5rem 3.25rem; border-left:2px solid var(--garis); margin-left:1rem;
}
.tingkat li:last-child{ border-left-color:transparent; padding-bottom:0; }
.tingkat li::before{
	content:counter(t); position:absolute; left:-1.05rem; top:0;
	width:2.05rem; height:2.05rem; border-radius:50%;
	background:var(--biru); color:#fff; font-size:.9rem; font-weight:600;
	display:flex; align-items:center; justify-content:center; font-family:var(--sans);
}
.tingkat h3{ margin-bottom:.2rem; }
.tingkat .arab{ font-family:var(--serif); font-style:italic; color:var(--toska); font-size:.95rem; }
.tingkat p{ margin:.35rem 0 0; color:var(--tinta-lembut); }

/* jadwal PSB — urutan waktu */
.jadwal{ list-style:none; margin:0; padding:0; }
.jadwal li{ display:flex; flex-wrap:wrap; gap:.2rem 1rem; padding:.9rem 0; border-bottom:1px dashed var(--garis); }
.jadwal li:last-child{ border-bottom:0; }
.jadwal b{ flex:0 0 12rem; font-weight:600; }
.jadwal span{ color:var(--tinta-lembut); }

/* tabel biaya */
.tabel-bungkus{ overflow-x:auto; }
table.biaya{ width:100%; border-collapse:collapse; font-size:.98rem; }
table.biaya th,table.biaya td{ text-align:left; padding:.85rem .8rem; border-bottom:1px solid var(--garis); vertical-align:top; }
table.biaya thead th{ background:var(--biru); color:#fff; font-weight:600; font-size:.9rem; }
table.biaya td.nominal{ font-weight:700; white-space:nowrap; color:var(--biru); }
table.biaya tbody tr:nth-child(even){ background:rgba(255,255,255,.6); }

@media (max-width:34rem){
	table.biaya thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
	table.biaya tr{ display:block; padding:.9rem 0; border-bottom:1px solid var(--garis); }
	table.biaya tbody tr:nth-child(even){ background:transparent; }
	table.biaya th,table.biaya td{ display:block; border:0; padding:.1rem 0; }
	table.biaya th[scope="row"]{ font-size:.95rem; color:var(--tinta-lembut); font-weight:600; }
	table.biaya td.nominal{ font-size:1.25rem; font-family:var(--serif); margin:.1rem 0 .3rem; }
	table.biaya td:last-child{ font-size:.94rem; color:var(--tinta-lembut); }
}

/* tanya jawab */
.tanya{ border-top:1px solid var(--garis); }
.tanya details{ border-bottom:1px solid var(--garis); }
.tanya summary{
	cursor:pointer; padding:1.05rem 2rem 1.05rem 0; position:relative;
	font-weight:600; font-family:var(--serif); font-size:1.08rem; color:var(--biru); list-style:none;
}
.tanya summary::-webkit-details-marker{ display:none; }
.tanya summary::after{
	content:"+"; position:absolute; right:.25rem; top:.9rem;
	font-size:1.5rem; font-weight:400; color:var(--emas); line-height:1;
}
.tanya details[open] summary::after{ content:"–"; }
.tanya .jawab{ padding:0 0 1.15rem; color:var(--tinta-lembut); }
.tanya .jawab p:last-child{ margin-bottom:0; }

/* ajakan */
.ajakan{ background:var(--biru); color:#e7ebf7; padding:var(--sela) 0; }
.ajakan h2{ color:#fff; }
.ajakan p{ color:#c2cbe6; }
.ajakan .tombol-utama{ margin-top:.6rem; }

.catatan{ font-size:.92rem; color:var(--tinta-lembut); }

/* =========================================================
   7. HALAMAN & ARTIKEL BIASA
   ========================================================= */
.halaman{ padding:var(--sela) 0; }
.halaman-judul{ margin-bottom:2rem; padding-bottom:1.2rem; border-bottom:1px solid var(--garis); }
.isi-teks{ max-width:40rem; }
.isi-teks h2{ margin-top:2rem; }
.isi-teks blockquote{ margin:1.5rem 0; padding-left:1.2rem; border-left:3px solid var(--emas); color:var(--tinta-lembut); font-style:italic; }
.daftar-tulisan{ list-style:none; padding:0; margin:0; }
.daftar-tulisan li{ padding:1.2rem 0; border-bottom:1px solid var(--garis); }
.daftar-tulisan h2{ font-size:1.3rem; margin-bottom:.2rem; }
.daftar-tulisan time{ font-size:.88rem; color:var(--tinta-lembut); }

/* isi yang ditempel lewat editor laman */
.isi-teks .wp-block-table{ margin:1.6rem 0; overflow-x:auto; }
.isi-teks .wp-block-table table{ width:100%; border-collapse:collapse; font-size:.98rem; }
.isi-teks .wp-block-table th,
.isi-teks .wp-block-table td{ text-align:left; padding:.8rem; border-bottom:1px solid var(--garis); vertical-align:top; }
.isi-teks .wp-block-table thead th{ background:var(--biru); color:#fff; font-size:.9rem; }
.isi-teks .wp-block-separator{ border:0; border-top:1px solid var(--garis); margin:2.6rem 0; max-width:100%; }
.isi-teks ul.poin{ padding-left:0; }
.isi-teks .sorot{
	background:var(--kertas-tua); border-left:3px solid var(--emas);
	padding:1.2rem 1.4rem; margin:1.6rem 0; border-radius:var(--radius);
}
.isi-teks .sorot > :last-child{ margin-bottom:0; }

/* =========================================================
   8. KAKI
   ========================================================= */
.kaki{ background:var(--biru-tua); color:#aab3cd; padding:var(--sela) 0 2rem; font-size:.97rem; }
.kaki h2,.kaki h3{ color:#fff; font-size:1.1rem; }
.kaki a{ color:var(--emas-terang); }
.kaki a:hover{ color:#fff; }
.kaki-grid{ display:grid; gap:2rem; }
@media (min-width:44rem){ .kaki-grid{ grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem; } }
.kaki ul{ list-style:none; margin:0; padding:0; }
.kaki li{ margin-bottom:.5rem; }
.kaki-bawah{ margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid rgba(201,160,73,.22); font-size:.86rem; color:#8992ae; }

/* tombol WhatsApp mengambang */
.wa-apung{
	position:fixed; right:1rem; bottom:1rem; z-index:50;
	display:flex; align-items:center; gap:.5rem;
	background:#1f8a4c; color:#fff; text-decoration:none; font-weight:600; font-size:.95rem;
	padding:.8rem 1.1rem; border-radius:2rem; box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.wa-apung:hover{ background:#186c3c; color:#fff; }
@media (max-width:30rem){ .wa-apung span{ display:none; } .wa-apung{ padding:.9rem; } }

/* cetak */
@media print{
	.kepala,.wa-apung,.hero-aksi,.ajakan{ display:none; }
	body{ background:#fff; font-size:11pt; }
	.hero{ background:#fff; color:#000; }
	.hero h1,.hero-fakta dt{ color:#000; }
}