/*
Theme Name:  TeFa Sinergi Digital
Theme URI:   https://smkn1tgt.my.id/
Author:      SMK Negeri 1 Tanah Grogot
Description: Tema responsif untuk website unit Teaching Factory SMK Negeri 1 Tanah Grogot. Tanpa framework CSS, tanpa jQuery, tanpa font dari CDN — semua aset dilayani dari server sendiri agar cepat dan tidak membocorkan data pengunjung ke pihak ketiga.
Version:     1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tefa
Tags:        education, business, responsive-layout, custom-menu, accessibility-ready
*/

/* =========================================================================
   1. Token desain
   ====================================================================== */
:root {
	--hijau-900: #04291c;
	--hijau-800: #063a28;
	--hijau-700: #005238;
	--hijau-600: #00694a;
	--hijau-100: #e4f1eb;
	--hijau-50:  #f2f8f5;

	--amber-600: #b96f05;
	--amber-500: #e08a06;
	--amber-100: #fdf1dc;

	--tinta:     #14201b;
	--tinta-70:  #4a5a52;
	--tinta-50:  #6e7e76;

	--garis:     #dde5e0;
	--garis-tipis: #eaefec;
	--kertas:    #ffffff;
	--kertas-2:  #f7faf8;

	--merah-600: #b3261e;
	--merah-50:  #fdecea;

	--radius-s: 8px;
	--radius:   14px;
	--radius-l: 22px;

	--bayang-1: 0 1px 2px rgba(4, 41, 28, .06);
	--bayang-2: 0 6px 24px -8px rgba(4, 41, 28, .18);

	--lebar:    1120px;
	--lebar-teks: 68ch;

	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

/* =========================================================================
   2. Reset seperlunya
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

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

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

a { color: var(--hijau-600); text-underline-offset: .18em; }
a:hover { color: var(--hijau-700); }

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem); }
h3 { font-size: 1.2rem; }
p, ul, ol { margin: 0 0 1.1em; }

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

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--amber-500);
	outline-offset: 2px;
	border-radius: 4px;
}

/* =========================================================================
   3. Utilitas tata letak
   ====================================================================== */
.tefa-wadah { width: min(100% - 2.5rem, var(--lebar)); margin-inline: auto; }
@media (max-width: 480px) { .tefa-wadah { width: min(100% - 1.75rem, var(--lebar)); } }

.tefa-bagian { padding-block: clamp(2.75rem, 1.5rem + 5vw, 4.75rem); }
.tefa-bagian--tipis { padding-block: clamp(2rem, 1.2rem + 3vw, 3rem); }
.tefa-bagian--warna { background: var(--kertas-2); }
.tefa-bagian--hijau { background: var(--hijau-50); }

.tefa-lewati {
	position: absolute; left: -9999px;
	background: var(--hijau-700); color: #fff;
	padding: .7rem 1.1rem; border-radius: 0 0 var(--radius-s) 0; z-index: 200;
}
.tefa-lewati:focus { left: 0; top: 0; }

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

/* =========================================================================
   4. Kepala bagian
   ====================================================================== */
.tefa-kepala-bagian { max-width: var(--lebar-teks); margin-bottom: 2rem; }
.tefa-kepala-bagian--tengah { margin-inline: auto; text-align: center; }

.tefa-label {
	display: inline-block;
	font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--amber-600); margin-bottom: .55rem;
}
.tefa-kepala-bagian p { color: var(--tinta-70); margin-bottom: 0; }

/* =========================================================================
   5. Tombol & lencana
   ====================================================================== */
.tefa-tombol {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .78rem 1.35rem;
	font-size: 1rem; font-weight: 600; font-family: inherit; line-height: 1.2;
	border: 1px solid transparent; border-radius: 999px;
	text-decoration: none; cursor: pointer;
	/* Label tombol tidak boleh patah di tengah frasa. Tanpa ini, "Pesan
	   sekarang" pecah menjadi beberapa baris begitu ruangnya menyempit, dan
	   pilnya berubah menjadi oval gemuk setinggi tiga baris. Lebih baik
	   tombolnya mempertahankan lebar dan elemen lain yang mengalah. */
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.tefa-tombol:hover { transform: translateY(-1px); }
.tefa-tombol:active { transform: translateY(0); }

.tefa-tombol--utama { background: var(--amber-500); color: #221200; box-shadow: var(--bayang-1); }
.tefa-tombol--utama:hover { background: #f39c13; color: #221200; box-shadow: var(--bayang-2); }

.tefa-tombol--hijau { background: var(--hijau-600); color: #fff; }
.tefa-tombol--hijau:hover { background: var(--hijau-700); color: #fff; }

.tefa-tombol--garis { background: transparent; color: var(--hijau-700); border-color: var(--garis); }
.tefa-tombol--garis:hover { background: var(--hijau-50); color: var(--hijau-700); border-color: var(--hijau-100); }

.tefa-tombol--terang { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.32); }
.tefa-tombol--terang:hover { background: rgba(255,255,255,.2); color: #fff; }

.tefa-tombol--kecil { padding: .5rem .95rem; font-size: .9rem; }

.tefa-lencana {
	display: inline-block; padding: .22rem .62rem;
	font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	border-radius: 999px; background: var(--hijau-100); color: var(--hijau-700);
}
.tefa-lencana--jasa  { background: var(--amber-100); color: var(--amber-600); }
.tefa-lencana--unggulan { background: var(--hijau-700); color: #fff; }

/* =========================================================================
   6. Kepala situs
   ====================================================================== */
.tefa-kepala {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,.94);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--garis-tipis);
}
.tefa-kepala__pita {
	background: var(--hijau-800); color: #cfe4da;
	font-size: .82rem;
}
.tefa-kepala__pita .tefa-wadah {
	display: flex; flex-wrap: wrap; gap: .35rem 1.4rem;
	align-items: center; justify-content: space-between; padding-block: .45rem;
}
.tefa-kepala__pita a { color: #fff; text-decoration: none; }
.tefa-kepala__pita a:hover { text-decoration: underline; }
.tefa-kepala__pita-kiri { display: flex; flex-wrap: wrap; gap: .25rem 1.2rem; }

/* Bilah kepala sengaja lebih lebar daripada wadah konten (1120px).
   Merek, sembilan butir navigasi, dan tombol ajakan tidak muat dalam 1120px;
   melebarkan bilahnya lebih baik daripada mengecilkan teks navigasi sampai
   sulit diklik. Konten di bawahnya tetap 1120px agar nyaman dibaca. */
.tefa-kepala__utama {
	width: min(100% - 2.5rem, 1280px);
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding-block: .8rem;
}

/* Blok merek tidak boleh ikut menyusut saat navigasi berebut ruang: kalau
   dibiarkan, nama unit dan nama sekolah pecah menjadi belasan baris dan
   tinggi kepala situs melonjak. Yang mengalah adalah navigasinya. */
.tefa-merek { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; text-decoration: none; color: inherit; }
/* Lambang bawaan berupa SVG persegi — ukurannya dipatok. */
.tefa-merek__tanda { flex: none; width: 46px; height: 46px; }

/* Logo unggahan hampir tidak pernah persegi. Memaksanya 46×46 membuat logo
   sekolah gepeng. Dua "max" berpasangan dengan dua "auto" adalah kombinasi
   yang membuat peramban menjaga rasio aslinya: yang mana pun lebih dulu
   menyentuh batas, sisi satunya ikut menyesuaikan. Batas lebar 160px menjaga
   agar logo panjang tidak mendesak navigasi keluar dari bilah kepala. */
img.tefa-merek__tanda {
	width: auto; height: auto;
	max-width: 160px; max-height: 46px;
	object-fit: contain;
}
.tefa-merek__nama { font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; line-height: 1.15; color: var(--hijau-700); white-space: nowrap; }
.tefa-merek__sub  { font-size: .76rem; color: var(--tinta-50); line-height: 1.3; white-space: nowrap; }

/* Navigasi */
.tefa-nav__daftar { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.tefa-nav__daftar a {
	display: block; padding: .5rem .58rem;
	font-size: .9rem; font-weight: 500; color: var(--tinta-70);
	text-decoration: none; border-radius: var(--radius-s); white-space: nowrap;
}
.tefa-nav__daftar a:hover { color: var(--hijau-700); background: var(--hijau-50); }
.tefa-nav__daftar .current-menu-item > a,
.tefa-nav__daftar .current_page_item > a { color: var(--hijau-700); font-weight: 700; }

/* Tombol ajakan dan tombol menu tidak ikut menyusut — merekalah yang paling
   sering diklik, dan navigasi punya lebih banyak ruang untuk mengalah. */
.tefa-kepala__aksi { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

.tefa-hamburger {
	display: none;
	width: 44px; height: 44px; padding: 0;
	align-items: center; justify-content: center;
	background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--radius-s);
	cursor: pointer; color: var(--hijau-700);
}
.tefa-hamburger:hover { background: var(--hijau-50); }
.tefa-hamburger__garis { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.tefa-hamburger__garis::before,
.tefa-hamburger__garis::after {
	content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
	transition: transform .2s ease, top .2s ease;
}
.tefa-hamburger__garis::before { top: -6px; }
.tefa-hamburger__garis::after  { top: 6px; }
.tefa-hamburger[aria-expanded="true"] .tefa-hamburger__garis { background: transparent; }
.tefa-hamburger[aria-expanded="true"] .tefa-hamburger__garis::before { top: 0; transform: rotate(45deg); }
.tefa-hamburger[aria-expanded="true"] .tefa-hamburger__garis::after  { top: 0; transform: rotate(-45deg); }

/* Ambang menu seluler sengaja setinggi 1180px, bukan 960px.
   Sembilan butir navigasi membutuhkan ±690px; ditambah blok merek dan tombol
   ajakan, barisnya baru benar-benar lega di atas 1180px. Di bawah itu menu
   ringkas jauh lebih rapi daripada navigasi yang berdesakan. */
@media (max-width: 1180px) {
	.tefa-hamburger { display: inline-flex; }
	.tefa-kepala__aksi .tefa-tombol { display: none; }

	.tefa-nav {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--kertas);
		border-bottom: 1px solid var(--garis);
		box-shadow: var(--bayang-2);
		max-height: calc(100dvh - 100%);
		overflow-y: auto;
	}
	.tefa-nav.tefa-nav--buka { display: block; }
	.tefa-nav__daftar { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.25rem 1.25rem; }
	.tefa-nav__daftar li { border-bottom: 1px solid var(--garis-tipis); }
	.tefa-nav__daftar li:last-child { border-bottom: 0; }
	.tefa-nav__daftar a { padding: .85rem .25rem; font-size: 1rem; }
	.tefa-nav__aksi-seluler { padding: 1rem 1.25rem 1.5rem; border-top: 1px solid var(--garis); }
	.tefa-nav__aksi-seluler .tefa-tombol { width: 100%; justify-content: center; }
}
@media (min-width: 1181px) { .tefa-nav__aksi-seluler { display: none; } }

/* Rentang sempit tepat di atas ambang menu ringkas: navigasi lengkap sudah
   tampil, tetapi lebarnya belum benar-benar lega. Baris nama sekolah di bawah
   nama unit disembunyikan supaya bilah kepala tidak meluber. Nama sekolah
   tetap tampil di kaki situs pada setiap halaman, jadi tidak ada informasi
   yang hilang dari situs. */
@media (min-width: 1181px) and (max-width: 1319px) {
	.tefa-merek__sub { display: none; }
}

/* =========================================================================
   7. Hero
   ====================================================================== */
.tefa-hero {
	position: relative; overflow: hidden;
	background: linear-gradient(155deg, var(--hijau-800) 0%, var(--hijau-900) 55%, #021a11 100%);
	color: #eaf4ef;
}
.tefa-hero::before {
	content: ""; position: absolute; inset: 0;
	background-image:
		radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0);
	background-size: 34px 34px;
	opacity: .5;
	mask-image: linear-gradient(to bottom right, #000 5%, transparent 62%);
	-webkit-mask-image: linear-gradient(to bottom right, #000 5%, transparent 62%);
}
.tefa-hero__isi {
	position: relative;
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
	padding-block: clamp(3rem, 2rem + 6vw, 5.5rem);
}
@media (max-width: 900px) { .tefa-hero__isi { grid-template-columns: 1fr; } }

.tefa-hero h1 { color: #fff; margin-bottom: .6rem; }
.tefa-hero__eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .32rem .85rem; margin-bottom: 1.1rem;
	background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
	border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	color: #ffd894;
}
.tefa-hero__teks { font-size: 1.08rem; color: #c8ded4; max-width: 54ch; }
.tefa-hero__aksi { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

.tefa-hero__angka {
	display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem;
	margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.14);
}
.tefa-hero__angka div strong { display: block; font-size: 1.6rem; color: #fff; line-height: 1.1; }
.tefa-hero__angka div span { font-size: .84rem; color: #a9c6b9; }

.tefa-kartu-cs {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: var(--radius-l);
	padding: 1.6rem;
	backdrop-filter: blur(6px);
}
.tefa-kartu-cs h2 { font-size: 1.12rem; color: #fff; margin-bottom: .2rem; }
.tefa-kartu-cs > p { font-size: .9rem; color: #a9c6b9; }
.tefa-kartu-cs dl { display: grid; gap: .85rem; margin: 1.2rem 0 1.4rem; }
.tefa-kartu-cs dt { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #8fb3a3; }
.tefa-kartu-cs dd { margin: .1rem 0 0; font-size: 1rem; color: #fff; word-break: break-word; }
.tefa-kartu-cs dd a { color: #ffd894; }
.tefa-kartu-cs .tefa-tombol { width: 100%; justify-content: center; }

/* =========================================================================
   8. Kisi & kartu
   ====================================================================== */
.tefa-kisi { display: grid; gap: 1.25rem; }
.tefa-kisi--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tefa-kisi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tefa-kisi--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 880px) { .tefa-kisi--3, .tefa-kisi--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tefa-kisi--2, .tefa-kisi--3, .tefa-kisi--4 { grid-template-columns: 1fr; } }

.tefa-kartu {
	display: flex; flex-direction: column;
	background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--radius);
	overflow: hidden; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.tefa-kartu:hover { box-shadow: var(--bayang-2); transform: translateY(-2px); border-color: var(--hijau-100); }
.tefa-kartu__gambar { position: relative; aspect-ratio: 4 / 3; background: var(--hijau-50); overflow: hidden; }
.tefa-kartu__gambar img { width: 100%; height: 100%; object-fit: cover; }
.tefa-kartu__isi { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.tefa-kartu__isi h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.tefa-kartu__isi h3 a { color: inherit; text-decoration: none; }
.tefa-kartu__isi h3 a:hover { color: var(--hijau-600); }
.tefa-kartu__ringkas { font-size: .93rem; color: var(--tinta-70); margin-bottom: 1rem; }
.tefa-kartu__kaki {
	margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--garis-tipis);
	display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
}
.tefa-kartu__harga { font-weight: 700; color: var(--hijau-700); font-size: .98rem; }
.tefa-kartu__meta { font-size: .82rem; color: var(--tinta-50); }

.tefa-kartu-polos {
	background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--radius); padding: 1.4rem;
}
.tefa-kartu-polos h3 { font-size: 1.05rem; }
.tefa-kartu-polos p:last-child { margin-bottom: 0; }
.tefa-kartu-polos__ikon {
	width: 42px; height: 42px; margin-bottom: .9rem;
	display: grid; place-items: center;
	background: var(--hijau-50); color: var(--hijau-600); border-radius: 12px;
}

/* Placeholder gambar */
.tefa-tanpa-gambar {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	background: repeating-linear-gradient(135deg, var(--hijau-50) 0 12px, #edf5f0 12px 24px);
	color: var(--hijau-600);
}

/* =========================================================================
   9. Langkah bernomor
   ====================================================================== */
.tefa-langkah { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: langkah; }
.tefa-langkah li {
	counter-increment: langkah;
	position: relative; padding: 1.15rem 1.3rem 1.15rem 3.9rem;
	background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--radius);
}
.tefa-langkah li::before {
	content: counter(langkah);
	position: absolute; left: 1.15rem; top: 1.15rem;
	width: 30px; height: 30px; display: grid; place-items: center;
	background: var(--hijau-600); color: #fff;
	border-radius: 50%; font-size: .92rem; font-weight: 700;
}
.tefa-langkah strong { display: block; margin-bottom: .15rem; }
.tefa-langkah p { margin: 0; font-size: .95rem; color: var(--tinta-70); }

/* =========================================================================
   10. Tabel identitas & tabel umum
   ====================================================================== */
.tefa-gulir-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tefa-tabel { width: 100%; border-collapse: collapse; font-size: .96rem; background: var(--kertas); }
.tefa-tabel th, .tefa-tabel td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--garis-tipis); vertical-align: top; }
.tefa-tabel tbody th { width: 34%; min-width: 190px; font-weight: 600; color: var(--tinta-70); background: var(--kertas-2); }
.tefa-tabel tr:last-child th, .tefa-tabel tr:last-child td { border-bottom: 0; }
.tefa-tabel--kotak { border: 1px solid var(--garis); border-radius: var(--radius); overflow: hidden; }

/* =========================================================================
   11. Galeri
   ====================================================================== */
.tefa-galeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 880px) { .tefa-galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tefa-galeri { grid-template-columns: 1fr; } }

.tefa-galeri__item {
	position: relative; display: block; overflow: hidden;
	border: 1px solid var(--garis); border-radius: var(--radius); background: var(--hijau-50);
}
.tefa-galeri__item img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; transition: transform .35s ease; }
.tefa-galeri__item:hover img { transform: scale(1.04); }
.tefa-galeri__ket {
	padding: .85rem 1rem; background: var(--kertas); border-top: 1px solid var(--garis-tipis);
}
.tefa-galeri__ket strong { display: block; font-size: .97rem; }
.tefa-galeri__ket span { font-size: .84rem; color: var(--tinta-50); }

/* =========================================================================
   12. Linimasa kegiatan
   ====================================================================== */
.tefa-linimasa { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tefa-linimasa li {
	position: relative; padding: 1.3rem 0 1.3rem 2.4rem;
	border-bottom: 1px solid var(--garis-tipis);
}
.tefa-linimasa li:last-child { border-bottom: 0; }
.tefa-linimasa li::before {
	content: ""; position: absolute; left: 4px; top: 1.85rem;
	width: 11px; height: 11px; border-radius: 50%;
	background: var(--kertas); border: 2px solid var(--hijau-600);
}
.tefa-linimasa li::after {
	content: ""; position: absolute; left: 9px; top: 2.6rem; bottom: -.4rem; width: 1px; background: var(--garis);
}
.tefa-linimasa li:last-child::after { display: none; }
.tefa-linimasa__tanggal { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-600); }
.tefa-linimasa h3 { font-size: 1.06rem; margin: .2rem 0 .3rem; }
.tefa-linimasa p { margin: 0; color: var(--tinta-70); font-size: .95rem; }
.tefa-linimasa__lokasi { display: inline-block; margin-top: .5rem; font-size: .84rem; color: var(--tinta-50); }

/* =========================================================================
   13. Formulir
   ====================================================================== */
.tefa-formulir {
	background: var(--kertas); border: 1px solid var(--garis);
	border-radius: var(--radius-l); padding: clamp(1.3rem, 1rem + 1.5vw, 2rem);
}
.tefa-formulir__kisi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.15rem; }
@media (max-width: 620px) { .tefa-formulir__kisi { grid-template-columns: 1fr; } }
.tefa-bidang--penuh { grid-column: 1 / -1; }

.tefa-bidang label { display: block; font-size: .89rem; font-weight: 600; margin-bottom: .35rem; }
.tefa-bidang label .tefa-wajib { color: var(--merah-600); }
.tefa-bidang__petunjuk { display: block; font-weight: 400; color: var(--tinta-50); font-size: .82rem; margin-top: .15rem; }

.tefa-formulir input[type="text"],
.tefa-formulir input[type="email"],
.tefa-formulir input[type="tel"],
.tefa-formulir input[type="number"],
.tefa-formulir select,
.tefa-formulir textarea {
	width: 100%; padding: .68rem .8rem;
	font-family: inherit; font-size: .97rem; color: var(--tinta);
	background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--radius-s);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.tefa-formulir textarea { min-height: 120px; resize: vertical; }
.tefa-formulir :is(input, select, textarea):focus {
	border-color: var(--hijau-600);
	box-shadow: 0 0 0 3px var(--hijau-100);
	outline: none;
}
.tefa-formulir__kaki { margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.tefa-formulir__kaki p { margin: 0; font-size: .84rem; color: var(--tinta-50); }

/* Perangkap bot — disembunyikan dari manusia, tetap terlihat oleh skrip. */
.tefa-jebakan { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.tefa-pesan { padding: 1rem 1.15rem; border-radius: var(--radius); margin-bottom: 1.4rem; border: 1px solid; }
.tefa-pesan--sukses { background: var(--hijau-50); border-color: var(--hijau-100); color: var(--hijau-700); }
.tefa-pesan--galat  { background: var(--merah-50); border-color: #f5c6c2; color: var(--merah-600); }
.tefa-pesan p:last-child { margin-bottom: 0; }
.tefa-pesan ul { margin: .5rem 0 0; padding-left: 1.2rem; }

/* =========================================================================
   14. Konten halaman
   ====================================================================== */
.tefa-judul-halaman { background: var(--hijau-50); border-bottom: 1px solid var(--hijau-100); }
.tefa-judul-halaman .tefa-wadah { padding-block: clamp(2rem, 1.4rem + 2.5vw, 3.25rem); }
.tefa-judul-halaman h1 { margin-bottom: .35rem; color: var(--hijau-900); }
.tefa-judul-halaman p { margin: 0; color: var(--tinta-70); max-width: var(--lebar-teks); }

.tefa-remah { font-size: .85rem; color: var(--tinta-50); margin-bottom: .75rem; }
.tefa-remah a { color: var(--tinta-70); text-decoration: none; }
.tefa-remah a:hover { text-decoration: underline; }
.tefa-remah span[aria-hidden] { margin-inline: .4rem; }

.tefa-isi > * { max-width: var(--lebar-teks); }
.tefa-isi > .tefa-kisi,
.tefa-isi > .tefa-galeri,
.tefa-isi > .tefa-formulir,
.tefa-isi > .tefa-langkah,
.tefa-isi > .tefa-linimasa,
.tefa-isi > .tefa-gulir-x,
.tefa-isi > .tefa-blok-lebar { max-width: none; }
.tefa-isi h2 { margin-top: 2.2rem; }
.tefa-isi h3 { margin-top: 1.6rem; }
.tefa-isi > *:first-child { margin-top: 0; }
.tefa-isi ul, .tefa-isi ol { padding-left: 1.3rem; }
.tefa-isi li { margin-bottom: .4rem; }
.tefa-isi blockquote {
	margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem;
	border-left: 3px solid var(--hijau-600); color: var(--tinta-70); font-style: italic;
}

/* =========================================================================
   15. Ajakan bertindak
   ====================================================================== */
.tefa-ajakan {
	background: linear-gradient(135deg, var(--hijau-700), var(--hijau-900));
	color: #fff; border-radius: var(--radius-l);
	padding: clamp(1.75rem, 1.2rem + 2.6vw, 2.9rem);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.tefa-ajakan h2 { color: #fff; margin-bottom: .3rem; }
.tefa-ajakan p { margin: 0; color: #bcd7ca; max-width: 52ch; }
.tefa-ajakan__aksi { display: flex; flex-wrap: wrap; gap: .7rem; }

/* =========================================================================
   16. Kaki situs
   ====================================================================== */
.tefa-kaki { background: var(--hijau-900); color: #a9c6b9; font-size: .93rem; margin-top: 0; }
.tefa-kaki a { color: #dcece4; text-decoration: none; }
.tefa-kaki a:hover { color: #fff; text-decoration: underline; }
.tefa-kaki__atas {
	display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 2rem;
	padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
@media (max-width: 880px) { .tefa-kaki__atas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tefa-kaki__atas { grid-template-columns: 1fr; } }
.tefa-kaki h2 { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: #7fa895; margin-bottom: .9rem; }
.tefa-kaki__merek { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem; }
/* Kaki situs berlatar hijau tua. Logo sekolah yang warnanya gelap akan lenyap
   di atasnya, jadi logo unggahan diberi alas putih. Lambang SVG bawaan tidak
   perlu — ia sudah membawa bidang gelapnya sendiri. */
.tefa-kaki__merek img.tefa-merek__tanda {
	background: #fff; border-radius: 9px; padding: 4px; box-sizing: content-box;
}
.tefa-kaki__merek strong { display: block; color: #fff; font-size: 1.02rem; line-height: 1.25; }
.tefa-kaki__merek span { font-size: .85rem; }
.tefa-kaki ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tefa-kaki address { font-style: normal; }
.tefa-kaki__bawah {
	border-top: 1px solid rgba(255,255,255,.1);
	padding-block: 1.15rem;
	display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
	font-size: .85rem;
}
.tefa-kaki__bawah ul { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }

/* =========================================================================
   17. Halaman 404 & pencarian
   ====================================================================== */
.tefa-kosong { text-align: center; padding: clamp(2.5rem, 2rem + 4vw, 5rem) 0; }
.tefa-kosong p { color: var(--tinta-70); max-width: 46ch; margin-inline: auto; }

.tefa-cari { display: flex; gap: .5rem; max-width: 420px; }
.tefa-cari input[type="search"] {
	flex: 1; padding: .62rem .8rem; font-family: inherit; font-size: .95rem;
	border: 1px solid var(--garis); border-radius: var(--radius-s); background: var(--kertas); color: var(--tinta);
}
.tefa-cari input[type="search"]:focus { border-color: var(--hijau-600); box-shadow: 0 0 0 3px var(--hijau-100); outline: none; }

/* =========================================================================
   18. Cetak
   ====================================================================== */
@media print {
	.tefa-kepala, .tefa-kaki, .tefa-ajakan, .tefa-hamburger, .tefa-formulir { display: none !important; }
	body { font-size: 12pt; color: #000; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}