@import url("fonts.css");

/* ============================================================
   Template PA Lahat 2

   Warna dan proporsinya menyalin rancangan yang disetujui pimpinan.
   Rancangan itu memakai Tailwind + FontAwesome + Google Fonts dari CDN;
   ketiganya diblokir Content-Security-Policy situs ini, jadi tampilannya
   dibangun ulang di sini dengan CSS sendiri, font dari server sendiri,
   dan ikon SVG sebaris. Hasilnya sama di mata pengunjung, tanpa satu pun
   berkas dari luar.
   ============================================================ */

:root {
  /* --- Hijau Mahkamah Agung (disalin dari maGreen rancangan) --- */
  --h-50:  #eaf6f2;
  --h-100: #cbeee4;
  --h-600: #078761;
  --h-700: #056e4f;
  --h-800: #03523b;
  --h-900: #023727;

  /* --- Emas (maGold) --- */
  --emas-400: #facc15;
  --emas-500: #d4af37;
  --emas-600: #b89228;

  /* --- Abu (slate) --- */
  --abu-50:  #f8fafc;
  --abu-100: #f1f5f9;
  --abu-200: #e2e8f0;
  --abu-300: #cbd5e1;
  --abu-400: #94a3b8;
  --abu-500: #64748b;
  --abu-600: #475569;
  --abu-700: #334155;
  --abu-800: #1e293b;
  --abu-900: #0f172a;
  --abu-950: #020617;

  --putih: #ffffff;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Poppins, sama seperti template Badilum. Berkasnya dilayani dari
     server sendiri — lihat fonts.css. */
  --font-judul: 'Poppins', 'Montserrat', 'Inter', system-ui, sans-serif;

  --lebar: 1180px;
  --tepi: 16px;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-bulat: 999px;

  --bayang-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --bayang: 0 4px 12px rgba(15, 23, 42, .08);
  --bayang-lg: 0 12px 32px rgba(15, 23, 42, .12);

  /* --- Jembatan nama variabel dari template palahat ---
     Blok hero disalin apa adanya dari template lama supaya modul hero
     yang SAMA bekerja di kedua tampilan tanpa disunting dua kali.
     Nama variabelnya berbeda, jadi dipetakan di sini — satu tempat —
     bukan dengan mengubah blok yang disalin. Kalau nanti ada blok lain
     yang dipindahkan, tinggal tambah barisnya di sini. */
  --container-max: var(--lebar);
  --margin-mobile: var(--tepi);
  --margin-desktop: 24px;
  --surface: var(--abu-100);
  --surface-container-low: var(--abu-50);
  --outline-variant: var(--abu-200);
  --on-surface-variant: var(--abu-500);
  --primary-container: var(--h-700);
  --gold: var(--emas-500);
  --shadow-sm: var(--bayang-sm);
  --shadow: var(--bayang);
  --shadow-lg: var(--bayang-lg);
  --r-full: var(--r-bulat);
  --stack-sm: 8px;
  --stack-md: 16px;
  --gutter: 22px;
  --font-display: var(--font-judul);
  --surface-white: var(--putih);
  --on-surface: var(--abu-800);
  --inverse-surface: var(--abu-800);
  --primary: var(--h-800);
  --primary-fixed-dim: var(--h-100);
  --secondary: var(--emas-600);
  --stack-lg: 30px;
  --font-body: var(--font);
  --surface-subtle: var(--abu-50);
  --outline: var(--abu-400);
  --border-input: var(--abu-300);
  --error: #b91c1c;
  --error-container: #fee2e2;
  --on-error-container: #7f1d1d;
  --secondary-container: #fef3c7;
  --on-secondary-container: #78350f;
}

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

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

body {
  margin: 0;
  background: var(--abu-100);
  color: var(--abu-800);
  font-family: var(--font);
  /*
   * 13px. Acuan Badilum memakai 12,8px (0,8rem); sebelumnya template ini
   * 14px dan seluruh halaman terasa satu tingkat lebih besar dari acuannya.
   * Pengunjung yang butuh teks lebih besar tetap terlayani oleh pengatur
   * "Ukuran teks" di bilah atas.
   */
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/*
 * JANGAN tambahkan `display: block` di sini.
 *
 * Banyak artikel lama menyisipkan ikon kecil sebaris dengan teks
 * (<img src="images/icon/document_symbol.png"> lalu tautannya). Dengan
 * display:block ikon itu turun ke barisnya sendiri dan daftar jadi
 * berantakan. Aturan artikel yang dipindahkan dari template palahat juga
 * mengandalkan gambar bersifat inline. Blok dipasang per elemen saja.
 */
img { max-width: 100%; height: auto; }
svg { flex: none; }

/* Gambar yang memang berdiri sendiri sebagai blok */
.merek__logo,
.kaki__merek img,
.hero-art__gambar img,
.hero-art__lambang img,
.berita-kartu__media img { display: block; }

a { color: var(--h-700); text-decoration: none; }
a:hover { color: var(--h-900); text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-judul); font-weight: 700; color: var(--abu-800); line-height: 1.3; }

:focus-visible { outline: 3px solid var(--emas-500); outline-offset: 2px; }

.wadah {
  width: 100%;
  max-width: var(--lebar);
  margin-inline: auto;
  padding-inline: var(--tepi);
}

/* Tautan lompat — hanya terlihat saat difokus papan ketik */
.lewati {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--h-800); color: #fff;
  padding: 10px 18px; border-radius: 0 0 var(--r) 0;
}
.lewati:focus { left: 0; }

/* ============================================================
   1. Bilah atas
   ============================================================ */
.bilah-atas {
  background: var(--h-900);
  color: var(--abu-300);
  font-size: 12px;
  border-bottom: 1px solid var(--h-800);
}
.bilah-atas__isi {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px;
  padding-block: 7px;
}
.bilah-atas__kontak { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.bilah-atas__kontak a,
.bilah-atas__alamat { display: inline-flex; align-items: center; gap: 6px; color: var(--abu-300); }
.bilah-atas__kontak a:hover { color: var(--emas-400); text-decoration: none; }
.bilah-atas svg { width: 14px; height: 14px; color: var(--emas-400); }
.bilah-atas__alamat { display: none; }

.bilah-atas__alat { display: flex; align-items: center; gap: 12px; }

.skala-teks {
  display: flex; align-items: center; gap: 2px;
  background: var(--h-800); border: 1px solid var(--h-700);
  border-radius: var(--r-sm); padding: 1px 6px;
  font-size: 11px;
}
.skala-teks__label { color: var(--abu-400); margin-right: 4px; }
.skala-teks button {
  background: none; border: 0; cursor: pointer;
  color: var(--abu-300); font-weight: 700; font-family: inherit;
  padding: 2px 5px; border-radius: var(--r-sm);
}
.skala-teks button:hover,
.skala-teks button[aria-pressed="true"] { color: var(--emas-400); }

/* ============================================================
   2. Kepala / identitas
   ============================================================ */
.kepala {
  background: var(--putih);
  border-bottom: 1px solid var(--abu-200);
  box-shadow: var(--bayang-sm);
}
.kepala__isi {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
  padding-block: 14px;
}

.merek { display: flex; align-items: center; gap: 14px; color: inherit; }
.merek:hover { text-decoration: none; }
.merek__logo {
  width: 60px; height: 60px; flex: none;
  object-fit: contain;
}
.merek__teks { display: block; min-width: 0; }
.merek__induk {
  display: block;
  font-family: var(--font-judul);
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--abu-500);
}
.merek__nama {
  display: block;
  font-family: var(--font-judul);
  font-size: 20px; line-height: 1.2; font-weight: 800;
  letter-spacing: -.01em; text-transform: uppercase;
  color: var(--h-800);
  margin-top: 2px;
}
.merek__moto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 5px; }
.lencana-moto {
  background: var(--emas-500); color: var(--h-900);
  font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-sm);
}
.merek__jabaran { font-size: 11.5px; color: var(--abu-500); }

.kepala__kanan { display: flex; align-items: center; gap: 12px; }

.sertifikasi {
  display: flex; align-items: stretch; gap: 4px;
  background: var(--abu-50);
  border: 1px solid var(--abu-200);
  border-radius: var(--r-lg);
  padding: 8px 4px;
}
.sertifikasi__butir {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding-inline: 12px;
  text-align: center;
}
.sertifikasi__butir + .sertifikasi__butir { border-left: 1px solid var(--abu-200); }
.sertifikasi__butir svg { width: 20px; height: 20px; color: var(--emas-500); }
.sertifikasi__butir:nth-child(2) svg { color: var(--h-600); }

/* Lencana CCTV adalah tautan, bukan sekadar keterangan — jadi ia butuh
   tanda bahwa ia bisa ditekan, tidak seperti lencana WBK di sebelahnya. */
.sertifikasi__butir--tautan { transition: background .15s; }
.sertifikasi__butir--tautan:hover { background: var(--h-50); text-decoration: none; }
.sertifikasi__butir--tautan:hover strong { color: var(--h-800); }
.sertifikasi__butir--tautan:focus-visible { outline: 2px solid var(--h-600); outline-offset: -2px; }
.sertifikasi__butir strong { font-size: 10px; color: var(--abu-700); }
.sertifikasi__butir span { font-size: 9.5px; color: var(--abu-500); line-height: 1.2; }

.tombol-bulat {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--abu-100); color: var(--abu-700);
  border: 0; border-radius: var(--r-bulat);
  cursor: pointer;
  box-shadow: var(--bayang-sm);
  transition: background .15s;
}
.tombol-bulat:hover { background: var(--abu-200); }
.tombol-bulat svg { width: 18px; height: 18px; }

/* ============================================================
   3. Navigasi
   ============================================================ */
.navigasi {
  position: sticky; top: 0; z-index: 40;
  background: var(--h-800);
  color: #fff;
  border-top: 1px solid var(--h-700);
  box-shadow: var(--bayang);
}
.navigasi__isi { display: flex; align-items: center; }

.navigasi__tombol {
  display: none;
  align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer;
  color: var(--emas-400); font-family: inherit;
  font-size: 13px; font-weight: 700;
  padding-block: 11px;
}
.navigasi__tombol svg { width: 20px; height: 20px; }

/* Tombol panah pembuka submenu ditambahkan template.js ke SETIAP butir
   bersubmenu. Di desktop submenu dibuka dengan hover, jadi tombolnya
   disembunyikan — kalau tidak, muncul kotak kosong di sebelah tiap menu. */
.navigasi__buka { display: none; }

/* mod_menu memakai kelas tetap .mod-menu / .mod-menu__sub — jangan
   memakai pemilih struktural seperti "> ul", karena pratinjau posisi
   (?tp=1) menyisipkan pembungkus tambahan dan memutus pemilihnya. */
.navigasi .mod-menu {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-judul);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.navigasi .mod-menu > li { position: relative; }
.navigasi .mod-menu > li > a,
.navigasi .mod-menu > li > span {
  display: flex; align-items: center; gap: 5px;
  padding: 13px 12px;
  color: #fff; white-space: nowrap;
  transition: background .15s;
}
.navigasi .mod-menu > li > a:hover,
.navigasi .mod-menu > li > span:hover { background: var(--h-700); text-decoration: none; }
.navigasi .mod-menu > li.current > a,
.navigasi .mod-menu > li.active > a {
  background: var(--h-900); color: var(--emas-400);
  box-shadow: inset 0 -2px 0 var(--emas-400);
}

/* Tanda panah bawah pada butir bersubmenu */
.navigasi .mod-menu > li.parent > a::after,
.navigasi .mod-menu > li.parent > span::after {
  content: ''; width: 8px; height: 8px; flex: none;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .7;
}

.navigasi .mod-menu__sub {
  position: absolute; left: 0; top: 100%;
  min-width: 232px;
  list-style: none; margin: 0; padding: 6px 0;
  background: var(--putih); color: var(--abu-800);
  border: 1px solid var(--abu-200);
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: var(--bayang-lg);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 50;
}
/*
 * Tanpa `>` sesudah .mod-menu — berlaku untuk butir di kedalaman mana pun.
 *
 * Aturan lama berbunyi `.mod-menu > li:hover`, jadi yang bisa terbuka
 * hanya submenu milik butir tingkat satu. Submenu tingkat tiga bersarang
 * di dalam <li> tingkat dua — bukan anak langsung .mod-menu — sehingga
 * tidak pernah ada aturan yang menampakkannya. Markupnya sendiri sudah
 * lengkap sejak awal (45 butir tingkat tiga); yang hilang cuma CSS ini.
 */
.navigasi .mod-menu li:hover > .mod-menu__sub,
.navigasi .mod-menu li:focus-within > .mod-menu__sub {
  opacity: 1; visibility: visible; transform: none;
}
/* Patokan posisi submenu bersarang adalah <li> induknya, bukan bilah menu */
.navigasi .mod-menu__sub > li { position: relative; }
.navigasi .mod-menu__sub a,
.navigasi .mod-menu__sub span {
  display: block; padding: 8px 16px;
  color: var(--abu-700); font-weight: 500; font-size: 12.5px;
}
.navigasi .mod-menu__sub a:hover {
  background: var(--h-50); color: var(--h-800); text-decoration: none;
}

/* Submenu tingkat tiga membuka ke samping */
.navigasi .mod-menu__sub .mod-menu__sub { top: -6px; left: 100%; border-radius: var(--r); }
/* Kalau ruang di kanan tidak cukup, template.js memasang kelas ini dan
   submenunya membuka ke kiri supaya tidak terpotong tepi layar. */
.navigasi .mod-menu__sub .mod-menu__sub.ke-kiri { left: auto; right: 100%; }

/* Panah ke samping untuk butir bersubmenu di dalam submenu — panah ke
   bawah hanya benar untuk butir di bilah menu, yang membuka ke bawah. */
.navigasi .mod-menu__sub li.parent > a,
.navigasi .mod-menu__sub li.parent > span {
  display: flex; align-items: center; gap: 8px;
}
.navigasi .mod-menu__sub li.parent > a::after,
.navigasi .mod-menu__sub li.parent > span::after {
  content: ''; width: 7px; height: 7px; flex: none; margin-left: auto;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(-45deg);
  opacity: .55;
}

/* --- Tombol cari di ujung kanan bilah menu --- */
.navigasi__cari {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: auto; flex: none;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-bulat);
  padding: 6px 14px;
  color: #fff; cursor: pointer;
  font-family: var(--font-judul);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  transition: background .15s;
}
.navigasi__cari:hover { background: rgba(255, 255, 255, .2); }
.navigasi__cari svg { width: 15px; height: 15px; }

/* --- Pop-up pencarian --- */
.popup-cari { position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center; }
.popup-cari[hidden] { display: none; }
.popup-cari__tirai { position: absolute; inset: 0; background: rgba(2, 55, 39, .55); }
.popup-cari__kotak {
  position: relative;
  width: min(560px, calc(100% - 32px));
  margin-top: 14vh;
  background: var(--putih);
  border-radius: var(--r-xl);
  box-shadow: var(--bayang-lg);
  padding: 20px;
}
.popup-cari__kepala {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.popup-cari__kepala h2 { font-size: 16px; color: var(--h-800); }
.popup-cari__tutup {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: var(--abu-100); color: var(--abu-600);
  border: 0; border-radius: var(--r-bulat); cursor: pointer;
}
.popup-cari__tutup:hover { background: var(--abu-200); }
.popup-cari__tutup svg { width: 17px; height: 17px; }

/*
 * mod_finder membungkus isian dan tombolnya dalam .input-group yang
 * bawaannya menyusun keduanya berdampingan — akibatnya isian hanya
 * memakai separuh lebar kotak. Di sini keduanya ditumpuk: isian selebar
 * penuh, tombol di bawahnya.
 */
.popup-cari .input-group,
.popup-cari .mod-finder__search,
.popup-cari .com-finder__search { display: block; }

/*
 * div.awesomplete WAJIB ikut dijadikan block.
 *
 * Pelengkap-otomatis milik Joomla membungkus isian dengan div ini SETELAH
 * halaman dimuat, dan bawaannya inline-block — lebarnya menyusut mengikuti
 * isi. Akibatnya `width: 100%` pada isian menghitung 100% dari 221px
 * lebar bungkus itu, bukan dari lebar kotak pop-up (520px), sehingga
 * isian tampak jauh lebih pendek daripada tombolnya.
 *
 * Bungkusnya tidak terlihat di sumber halaman — hanya muncul di DOM
 * setelah JS berjalan.
 */
.popup-cari .awesomplete { display: block; width: 100%; }
.popup-cari label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; }

.popup-cari input[type="text"],
.popup-cari input[type="search"] {
  width: 100%;
  border: 1px solid var(--abu-300); border-radius: var(--r);
  padding: 11px 14px; font-family: inherit; font-size: 14px;
}
.popup-cari input:focus { outline: 0; border-color: var(--h-600); box-shadow: 0 0 0 3px var(--h-50); }
.popup-cari .btn,
.popup-cari button[type="submit"] {
  margin-top: 10px; width: 100%;
  background: var(--h-800); color: #fff;
  border: 0; border-radius: var(--r); padding: 11px 16px;
  font-family: var(--font-judul); font-weight: 700; font-size: 13px; cursor: pointer;
}
.popup-cari .btn:hover, .popup-cari button[type="submit"]:hover { background: var(--h-900); }

/* ============================================================
   3b. Hero (dipindahkan dari template palahat, tanpa perubahan
       agar modul hero yang sama tetap bekerja di kedua tampilan)
   ============================================================ */
/* ------------------------------------------------------------
   Hero berupa slide gambar (pengganti mod_sp_smart_slider lama).

   Modulnya cukup berisi daftar <img> polos; template.js yang
   menyusunnya jadi slider. Jadi petugas bisa menambah/menghapus
   slide lewat editor biasa tanpa menyentuh markup slider.

   Teks pada banner PA Lahat sudah menyatu di gambar, jadi tidak
   ada lapisan teks di atasnya — gambar ditampilkan apa adanya.
   ------------------------------------------------------------ */
.hero-slider {
  /*
   * Lebar hero disamakan dengan .container supaya sejajar dengan kartu
   * layanan di bawahnya. Sebelumnya hero selebar layar penuh, dan karena
   * banner berasio 3,56:1 tingginya ikut melar: 540px di layar 1920px,
   * 719px di 2560px — memakan hampir seluruh layar pertama.
   *
   * Efek sampingan yang menguntungkan: dua dari lima banner hanya
   * 1190px dan 1680px, jadi dulu diperbesar paksa sampai 161% dan
   * terlihat kabur. Pada lebar 1200px keduanya nyaris tidak diperbesar.
   *
   * --hero-pad dipakai ulang oleh tombol panah di bawah supaya tombolnya
   * duduk di atas GAMBAR, bukan melayang di area padding.
   */
  --hero-pad: var(--margin-mobile);

  position: relative;
  background: var(--surface);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--hero-pad);

  /*
   * Jarak ke header memakai MARGIN, bukan padding — dan itu disengaja.
   * Tombol panah dipusatkan dengan top: calc((100% - 68px) / 2), dan
   * "100%" itu tinggi .hero-slider sendiri. Padding-top akan ikut
   * terhitung di dalamnya sehingga tombol melorot setengah jarak;
   * margin berada di luar kotak, jadi perhitungan itu tetap benar.
   *
   * 16px = --stack-md. Sengaja lebih rapat daripada ritme .section
   * (32px): hero adalah blok pertama setelah header, dan jarak lebar di
   * situ membuat beranda terasa berlubang di bagian paling atas.
   */
  margin-top: var(--stack-md);

  /*
   * Sisa ruang di bawah gambar. 68px = 40px yang "dimakan" .quicklinks
   * (margin-top: -40px) + 28px strip untuk titik penanda.
   *
   * Dijadikan variabel karena tiga aturan bergantung padanya: padding
   * ini, pemusatan tombol panah, dan posisi strip titik. Di bawah 1220px
   * tindihannya tidak dipakai, jadi nilainya diturunkan di satu tempat
   * saja — dulu ketiganya harus diubah manual dan sempat tidak sinkron.
   *
   * Kontrol TIDAK boleh ditaruh di atas gambar: banner PA Lahat memuat
   * informasi sampai ke tepi bawah (alamat situs, nomor telepon, akun
   * media sosial), dan titik penanda sempat menutupinya.
   */
  --hero-sisa: 68px;
  padding-bottom: var(--hero-sisa);
}

/* Tanpa JS: tampilkan slide pertama saja, sisanya disembunyikan
   supaya halaman tidak jadi tumpukan lima banner. */
.hero-slider:not(.is-siap) > img:not(:first-of-type) { display: none; }
.hero-slider:not(.is-siap) > img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg);
}

/* Sudut membulat dipasang di __jendela, bukan di gambarnya: jendela sudah
   punya overflow:hidden untuk menyembunyikan slide di luar bingkai, jadi
   sudutnya tetap rapi walau track sedang bergeser. */
.hero-slider__jendela {
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.hero-slider__track {
  display: flex;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

.hero-slider__slide { flex: 0 0 100%; min-width: 0; }

.hero-slider__slide img {
  display: block;
  width: 100%;
  /* Semua banner berasio ~3.55:1. Rasio dikunci supaya tinggi blok
     tidak melonjak saat gambar berganti atau saat masih dimuat. */
  aspect-ratio: 1920 / 540;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
}

/* --- tombol maju/mundur --- */
.hero-slider__nav {
  position: absolute;
  /* dipusatkan pada GAMBAR, bukan pada blok slider yang punya strip bawah */
  top: calc((100% - var(--hero-sisa)) / 2);
  transform: translateY(-50%);
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--r-full);
  background: rgba(0, 0, 0, .38);
  color: #fff;
  cursor: pointer;
  transition: background .15s, opacity .15s;
  opacity: 0;
}
.hero-slider__nav svg { width: 22px; height: 22px; }
.hero-slider__nav--prev { left: calc(var(--hero-pad) + 14px); }
.hero-slider__nav--next { right: calc(var(--hero-pad) + 14px); }
.hero-slider__nav:hover { background: rgba(0, 0, 0, .62); }
.hero-slider:hover .hero-slider__nav,
.hero-slider:focus-within .hero-slider__nav { opacity: 1; }
.hero-slider__nav:focus-visible { opacity: 1; outline: 3px solid var(--gold); outline-offset: 2px; }

/* --- titik penanda + tombol jeda --- */
/* Strip kontrol di BAWAH gambar, di dalam ruang 28px yang disediakan
   padding-bottom. Warnanya dibuat untuk latar terang, bukan untuk di
   atas foto. */
.hero-slider__bar {
  position: absolute;
  left: var(--hero-pad); right: var(--hero-pad);
  bottom: calc(var(--hero-sisa) - 26px);
  height: 26px;
  z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

.hero-slider__titik {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: var(--r-full);
  background: var(--outline-variant);
  cursor: pointer;
  transition: background .15s, width .15s;
}
.hero-slider__titik:hover { background: var(--on-surface-variant); }
.hero-slider__titik[aria-selected="true"] { background: var(--primary-container); width: 26px; }
.hero-slider__titik:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.hero-slider__jeda {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 6px; padding: 0;
  border: 0; border-radius: var(--r-full);
  background: transparent;
  color: var(--on-surface-variant);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.hero-slider__jeda svg { width: 12px; height: 12px; }
.hero-slider__jeda:hover { background: var(--surface-container-low); color: var(--primary-container); }
.hero-slider__jeda:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

@media (max-width: 767.98px) {
  .hero-slider__nav { opacity: 1; width: 36px; height: 36px; }
  .hero-slider__nav svg { width: 18px; height: 18px; }
  .hero-slider__nav--prev { left: calc(var(--hero-pad) + 8px); }
  .hero-slider__nav--next { right: calc(var(--hero-pad) + 8px); }
}

/* Hormati setelan "kurangi animasi" pada sistem pengunjung:
   perpindahan langsung, dan putar-otomatis dimatikan di template.js. */
@media (prefers-reduced-motion: reduce) {
  .hero-slider__track { transition: none; }
}

/* ============================================================
   3c. Hero slider artikel

   Teksnya teks sungguhan di atas latar gradien, bukan menyatu di gambar.
   Konsekuensinya: terbaca pembaca layar, ikut membesar saat pengunjung
   menaikkan ukuran teks, dan terindeks mesin pencari.
   ============================================================ */
.hero-art {
  position: relative;
  background: linear-gradient(115deg, var(--h-900) 0%, var(--h-800) 45%, var(--h-700) 100%);
  color: #fff;
  overflow: hidden;
}

/* Tanpa JS: tampilkan slide pertama saja, sisanya disembunyikan supaya
   halaman tidak jadi tumpukan empat blok. */
.hero-art:not(.is-siap) > .hero-art__slide:not(:first-of-type) { display: none; }

.hero-art__jendela { overflow: hidden; }
.hero-art__rel {
  display: flex;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/*
 * Slide WAJIB selebar penuh, bukan dibatasi max-width.
 *
 * Sempat dipakai `max-width: var(--lebar); margin-inline: auto` di sini,
 * dan itu membuat tiap slide hanya 1180px sementara geseran rel memakai
 * persen dari lebar rel — akibatnya slide berikutnya menyembul di tepi
 * kanan dan perpindahannya meleset. Isinya dipusatkan lewat padding,
 * bukan dengan mengecilkan kotak slide-nya.
 */
.hero-art__slide {
  flex: 0 0 100%; min-width: 0;
  display: grid; gap: 22px;
  grid-template-columns: 1fr;
  align-items: center;
  padding-block: 34px 54px;
  padding-inline: max(var(--tepi), calc((100% - var(--lebar)) / 2 + var(--tepi)));
}

.hero-art__teks { min-width: 0; }
.hero-art__label {
  display: inline-block; margin-bottom: 10px;
  background: rgba(212, 175, 55, .18);
  border: 1px solid rgba(212, 175, 55, .45);
  border-radius: var(--r-bulat);
  padding: 3px 13px;
  font-family: var(--font-judul);
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--emas-400);
}
.hero-art__judul {
  font-size: 22px; line-height: 1.25; font-weight: 800;
  /* judul berita di situs ini sering sangat panjang — tanpa batas, satu
     slide bisa memakan enam baris dan tinggi hero melonjak */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-art__judul a { color: #fff; }
.hero-art__judul a:hover { color: var(--emas-400); text-decoration: none; }
.hero-art__ringkas {
  margin-top: 10px;
  font-size: 13px; line-height: 21px; color: rgba(255, 255, 255, .82);
  /* dibatasi supaya tinggi tiap slide tidak berbeda jauh */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-art__ringkas p { margin: 0; }
.hero-art__tombol {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  background: var(--emas-500); color: var(--h-900);
  padding: 10px 20px; border-radius: var(--r);
  font-family: var(--font-judul); font-weight: 800; font-size: 12px;
  transition: background .15s;
}
.hero-art__tombol:hover { background: var(--emas-400); color: var(--h-900); text-decoration: none; }
.hero-art__tombol svg { width: 15px; height: 15px; }

.hero-art__gambar {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
}
/*
 * contain, BUKAN cover.
 *
 * Sejak hero punya kategorinya sendiri, gambarnya dipilih sengaja oleh
 * petugas — bukan lagi apa pun yang kebetulan terpasang di berita
 * terbaru. cover memangkas sisi gambar yang bentuknya tidak persis
 * 16:10, dan yang terpotong justru bagian yang sengaja dipilih itu.
 *
 * Ukuran yang paling pas 1200x750 (16:10): pada ukuran itu gambarnya
 * memenuhi kotak tanpa sisa. Bentuk lain tetap tampil utuh, dengan
 * sisa kotak berupa latar bening yang sudah ada di aturan di atas.
 */
.hero-art__gambar img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; }
.hero-art__lambang {
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
}
.hero-art__lambang img { width: 88px; height: 88px; aspect-ratio: auto; object-fit: contain; opacity: .55; }

/* --- tombol maju/mundur --- */
.hero-art__nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; border-radius: var(--r-bulat);
  background: rgba(0, 0, 0, .32); color: #fff;
  cursor: pointer;
  opacity: 0; transition: opacity .15s, background .15s;
}
.hero-art__nav svg { width: 20px; height: 20px; }
.hero-art__nav--prev { left: 12px; }
.hero-art__nav--next { right: 12px; }
.hero-art__nav:hover { background: rgba(0, 0, 0, .58); }
.hero-art:hover .hero-art__nav,
.hero-art:focus-within .hero-art__nav { opacity: 1; }
.hero-art__nav:focus-visible { opacity: 1; }

/* --- titik penanda --- */
.hero-art__bar {
  position: absolute; left: 0; right: 0; bottom: 18px;
  z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.hero-art__titik {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: var(--r-bulat);
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: background .15s, width .15s;
}
.hero-art__titik:hover { background: rgba(255, 255, 255, .6); }
.hero-art__titik[aria-selected="true"] { background: var(--emas-400); width: 26px; }

@media (min-width: 768px) {
  .hero-art__slide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 30px; padding-block: 44px 58px; }
  .hero-art__judul { font-size: 28px; }
  .hero-art__ringkas { font-size: 14px; line-height: 23px; }
}

@media (min-width: 1024px) {
  .hero-art__judul { font-size: 33px; }
  .hero-art__slide { padding-block: 52px 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art__rel { transition: none; }
}

/* ============================================================
   4. Isi halaman
   ============================================================ */
.halaman { display: block; padding-bottom: 48px; }

.pesan-sistem:not(:has(joomla-alert, .alert)) { display: none; }
.pesan-sistem { padding-top: 16px; }

/* Remah navigasi. mod_breadcrumbs mengeluarkan <ol>, jadi tanpa aturan
   ini tampil sebagai daftar bernomor "1. Anda di sini: 2. Beranda". */
.remah { padding-top: 14px; font-size: 12px; }
.remah ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
  color: var(--abu-500);
}
.remah li { display: inline-flex; align-items: center; gap: 6px; }
.remah li + li::before {
  content: '›'; color: var(--abu-400); font-size: 14px; line-height: 1;
}
.remah a { color: var(--h-700); }
.remah .divider { display: none; }

.bagian { padding-block: 32px 8px; }

.judul-bagian {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
/* Pola Badilum: label kecil huruf kapital keemasan, lalu judul tebal
   berwarna identitas di bawahnya. Tanpa garis pemisah. */
.judul-bagian__label {
  display: block;
  font-family: var(--font-judul);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--emas-600);
  margin-bottom: 2px;
}
.judul-bagian h2 { font-size: 19px; font-weight: 800; color: var(--h-800); }
.judul-bagian p { margin: 3px 0 0; font-size: 12px; color: var(--abu-500); }
.judul-bagian__lainnya { font-size: 12px; font-weight: 700; color: var(--h-700); white-space: nowrap; }

/* --- Tata letak dua kolom --- */
/* gap 24px dan sidebar 330px tetap — angka persis dari template Badilum
   (.home-main-grid { grid-template-columns: 1fr 330px; gap: 24px }).
   Sebelumnya proporsional 8fr/4fr, yang membuat sidebar ~380px dan
   terasa terlalu lebar dibanding acuannya. */
.tata-letak { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
.tata-letak > * { min-width: 0; }
.kolom-utama, .kolom-sisi { display: flex; flex-direction: column; gap: 22px; }

/* --- Kartu (chrome modul "kartu") --- */
.kartu {
  background: var(--putih);
  border: 1px solid var(--abu-200);
  border-radius: var(--r-xl);
  box-shadow: var(--bayang-sm);
  padding: 20px;
}
.kartu__kepala {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--abu-200);
  padding-bottom: 12px; margin-bottom: 16px;
}
/*
 * Judul pengumuman di situs ini sering sangat panjang — satu judul bisa
 * memuat nomor surat lengkap dan menghabiskan tujuh baris di kolom
 * selebar 238px. Tanpa batas ini, kartu Pengumuman menarik tinggi
 * seluruh baris sampai 933px dan kartu di sebelahnya jadi separuh kosong.
 */
.baris-dua .mod-articles-title,
.kolom-sisi .mod-articles-title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: break-word;
}

.kartu__semua {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto; flex: none;
  font-family: var(--font-judul);
  font-size: 11px; font-weight: 700; color: var(--h-700);
  white-space: nowrap;
}
.kartu__semua svg { width: 13px; height: 13px; transition: transform .15s; }
.kartu__semua:hover { color: var(--h-900); text-decoration: none; }
.kartu__semua:hover svg { transform: translateX(3px); }
.kolom-sisi .kartu__semua { color: var(--emas-400); }
.kolom-sisi .kartu__semua:hover { color: #fff; }
/* Batang hijau kecil di kiri judul — penanda visual rancangan */
.kartu__kepala::before {
  content: ''; width: 4px; height: 22px; flex: none;
  background: var(--h-700); border-radius: var(--r-bulat);
}
.kartu__judul {
  font-size: 15px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--h-800);
}

/* Kartu di kolom kanan memakai kepala berwarna penuh, seperti widget
   sidebar Badilum — pembeda visual dengan kartu kolom utama. */
.kolom-sisi .kartu { padding: 0; overflow: hidden; }
.kolom-sisi .kartu__kepala {
  background: var(--h-800);
  border-bottom: 0; margin: 0;
  padding: 11px 16px;
}
.kolom-sisi .kartu__kepala::before { background: var(--emas-500); height: 16px; }
.kolom-sisi .kartu__judul { color: #fff; font-size: 13px; }
.kolom-sisi .kartu__isi { padding: 16px; }

/*
 * Kepala kartu samping yang punya tautan "lihat semua" dibuat membungkus.
 *
 * Kolom kanan hanya ±300px. Dengan judul dan tautan dipaksa satu baris,
 * judul sepanjang "Ucapan Selamat & Duka Cita" pecah jadi tiga baris
 * sempit yang berdesakan dengan tautannya. Dibungkus begini, judul
 * memakai lebar penuh dan tautannya turun rapi ke bawahnya.
 *
 * Hanya berlaku saat tautannya ADA — kartu tanpa tautan tetap satu baris.
 */
.kolom-sisi .kartu__kepala:has(.kartu__semua) { flex-wrap: wrap; row-gap: 6px; }
.kolom-sisi .kartu__kepala:has(.kartu__semua) .kartu__judul { flex: 1 1 auto; }
.kolom-sisi .kartu__kepala:has(.kartu__semua) .kartu__semua {
  /* Disejajarkan dengan judul, bukan dengan batang hijau di kirinya:
     4px batang + 10px gap = 14px. */
  margin-left: 14px;
  flex: 1 0 100%;
}

/* ============================================================
   5. Akses cepat layanan
   ============================================================ */
.akses-cepat .grid,
.akses-cepat .grid-5 {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.akses-cepat .qcard,
.kartu-akses {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--putih);
  border: 1px solid var(--abu-200);
  border-radius: var(--r-lg);
  padding: 14px 10px;
  text-align: center;
  color: var(--abu-800);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.akses-cepat .qcard:hover,
.kartu-akses:hover {
  border-color: var(--h-600);
  box-shadow: var(--bayang);
  transform: translateY(-2px);
  text-decoration: none;
}
.akses-cepat .qcard__icon,
.kartu-akses__ikon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: var(--h-100); color: var(--h-700);
  border-radius: var(--r-lg);
  box-shadow: var(--bayang-sm);
  transition: background .15s, color .15s;
}
.akses-cepat .qcard:hover .qcard__icon,
.kartu-akses:hover .kartu-akses__ikon { background: var(--h-700); color: var(--emas-400); }
.akses-cepat .qcard__icon svg,
.kartu-akses__ikon svg { width: 22px; height: 22px; }

.akses-cepat .qcard h3,
.kartu-akses__judul { font-size: 12px; font-weight: 700; margin: 0; color: var(--abu-800); }
.akses-cepat .qcard p,
.kartu-akses__ket {
  font-size: 10.5px; color: var(--abu-500); margin: 0;
  /* dibatasi satu baris supaya tinggi seluruh kartu seragam */
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   5a. Daftar layanan hukum
   ============================================================ */
.bagian--rapat { padding-block: 20px 8px; }

/*
 * PENTING: modul "Informasi Layanan" memakai <a class="kartu"> untuk tiap
 * butirnya, dan di template ini ".kartu" berarti kotak pembungkus modul.
 * Aturan di bawah mengembalikan butir-butir itu ke bentuknya sendiri —
 * tanpa ini, tiap layanan tampil sebagai kotak modul berpadding tebal.
 */
.kartu-menu {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kartu-menu .kartu {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: var(--putih);
  border: 1px solid var(--abu-200);
  border-radius: var(--r-lg);
  box-shadow: var(--bayang-sm);
  padding: 15px 11px;
  text-align: center;
  color: var(--abu-800);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kartu-menu .kartu:hover {
  border-color: var(--h-600); box-shadow: var(--bayang);
  transform: translateY(-2px); text-decoration: none;
}
.kartu-menu .kartu__ikon {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--h-100); color: var(--h-700);
  border-radius: var(--r);
  transition: background .15s, color .15s;
}
.kartu-menu .kartu:hover .kartu__ikon { background: var(--h-800); color: var(--emas-400); }
.kartu-menu .kartu__ikon svg { width: 21px; height: 21px; }
.kartu-menu .kartu__judul {
  font-size: 12px; font-weight: 700; margin: 0;
  letter-spacing: 0; text-transform: none; color: var(--abu-800);
}
.kartu-menu .kartu__ket {
  font-size: 10.5px; line-height: 15px; color: var(--abu-500); margin: 0;
}
/* Tombol "Selengkapnya" di dalam kartu tidak dipakai di tata letak ini —
   judul dan keterangannya sudah cukup, dan kartunya seluruhnya bisa diklik. */
.kartu-menu .kartu__tombol { display: none; }

/* ============================================================
   5c. Kartu berita tiga kolom
   ============================================================ */
/* auto-fit dengan minimum 150px: di kolom selebar ~500px muat tiga
   kartu, dan menyusut sendiri jadi dua atau satu saat ruangnya berkurang.
   Dipakai menggantikan jumlah kolom tetap karena kartu ini kini berada di
   kolom yang lebih sempit (berbagi baris dengan Pengumuman). */
.berita-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }

.berita-kartu {
  display: flex; flex-direction: column;
  background: var(--putih);
  border: 1px solid var(--abu-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.berita-kartu:hover { border-color: var(--h-600); box-shadow: var(--bayang); transform: translateY(-2px); }

.berita-kartu__media { display: block; background: var(--abu-100); }
.berita-kartu__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* rasio dikunci supaya tinggi ketiga kartu sama walau gambarnya beda */
  aspect-ratio: 16 / 10;
}
.berita-kartu__kosong {
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
  color: var(--abu-300);
}
.berita-kartu__kosong svg { width: 40px; height: 40px; }

.berita-kartu__isi { display: flex; flex-direction: column; gap: 6px; padding: 13px; flex: 1; }
.berita-kartu__tanggal { font-size: 11px; color: var(--abu-500); }
.berita-kartu__judul {
  font-size: 12.5px; line-height: 17px; font-weight: 700;
  /*
   * Kartu ini kini hanya ~137px karena berbagi baris dengan Pengumuman.
   * Judul berita di situs ini sering memuat kata panjang seperti
   * "menyelenggarakan" — tanpa break-word kata itu menembus tepi kartu.
   * Batas 4 baris menjaga tinggi ketiga kartu tetap berdekatan.
   */
  overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.berita-kartu__judul a { color: var(--abu-800); }
.berita-kartu__judul a:hover { color: var(--h-700); text-decoration: none; }
.berita-kartu__ringkas {
  font-size: 11px; line-height: 16px; color: var(--abu-500);
  /* dibatasi 3 baris agar ketiga kartu tetap sejajar */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.berita-kartu__ringkas p { margin: 0; }
.berita-kartu__lanjut {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: auto; padding-top: 8px;
  font-size: 11.5px; font-weight: 700; color: var(--h-700);
}
.berita-kartu__lanjut svg { width: 13px; height: 13px; transition: transform .15s; }
.berita-kartu__lanjut:hover { text-decoration: none; }
.berita-kartu:hover .berita-kartu__lanjut svg { transform: translateX(3px); }

/* ============================================================
   5d. Baris bawah: jadwal sidang + video
   ============================================================ */
/*
 * Dua kartu berdampingan. auto-fit, bukan repeat(2, 1fr): kalau salah
 * satu modul dimatikan, yang tersisa memakai lebar penuh sendiri tanpa
 * menyisakan kolom kosong.
 */
.baris-dua {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  /*
   * stretch, BUKAN start. Dengan start tiap kartu setinggi isinya
   * sendiri dan yang pendek meninggalkan lubang di sisi baris.
   * Dengan stretch keduanya sama tinggi; isian yang kurang panjang
   * diratakan tengah lewat aturan di bawah, jadi tidak terlihat
   * seperti ruang kosong yang menganga di bawahnya.
   */
  align-items: stretch;
}
.baris-dua > .kartu {
  margin: 0;
  display: flex; flex-direction: column;
}
.baris-dua > .kartu > .kartu__isi { flex: 1; }

/*
 * Kartu berita ikut memenuhi tinggi kotaknya, dan yang menyerap sisa
 * ruang adalah GAMBARNYA — bukan celah kosong di bawah teks. Tanpa ini,
 * saat kartu Pengumuman di sebelahnya lebih tinggi, bagian bawah kartu
 * Kabar menganga kosong sekitar 180px.
 */
.baris-dua .berita-grid { height: 100%; }
.baris-dua .berita-kartu { height: 100%; }
.baris-dua .berita-kartu__media { flex: 1; min-height: 86px; }
.baris-dua .berita-kartu__media img,
.baris-dua .berita-kartu__kosong { height: 100%; aspect-ratio: auto; }

/*
 * Di bawah 900px kartu berita menumpuk SATU per baris dengan gambar
 * lebar — pola yang dipakai acuan Badilum di ponsel.
 *
 * Sebelumnya auto-fit tetap memaksa dua kolom di layar 390px, dan kartu
 * selebar ~170px membuat judul terpotong tiga kata per baris. Penyamaan
 * tinggi juga dilepas di sini: saat menumpuk tidak ada pasangan di
 * sebelahnya, jadi meregangkan gambar hanya memboroskan layar.
 */
@media (max-width: 899.98px) {
  .berita-grid { grid-template-columns: 1fr; gap: 14px; }
  .baris-dua .berita-grid,
  .baris-dua .berita-kartu { height: auto; }
  .baris-dua .berita-kartu__media { flex: none; }
  .baris-dua .berita-kartu__media img,
  .baris-dua .berita-kartu__kosong { height: auto; aspect-ratio: 16 / 9; }
  .berita-kartu__judul { font-size: 13.5px; line-height: 19px; -webkit-line-clamp: 3; }
  .berita-kartu__ringkas { font-size: 12px; line-height: 18px; }
}

/* Baris "Kabar + Pengumuman": kiri lebih lebar, seperti Badilum.
   Proporsinya baru berlaku kalau ruangnya cukup untuk dua kolom —
   di bawah itu keduanya menumpuk sendiri lewat auto-fit di atas. */
@media (min-width: 900px) {
  .baris-dua--lebar-kiri { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/*
 * Modul video: pemutar di atas, daftar MENDATAR di bawahnya.
 *
 * Aslinya daftar itu menumpuk ke bawah di kolom samping. Di sini kartunya
 * selebar penuh, jadi daftar mendatar lebih pas — dan template.js
 * menjalankannya pelan dari kanan ke kiri, berhenti saat disentuh.
 */
.kolom-utama .video-blok { grid-template-columns: 1fr; gap: 16px; }
.kolom-utama .video-aktif__judul { font-size: 15px; line-height: 21px; }

.kolom-utama .video-daftar {
  display: flex;
  max-height: none;
  overflow-x: auto;
  gap: 12px;
  /*
   * Ruang atas-bawah WAJIB: overflow-x ikut memangkas luapan tegak,
   * jadi tanpa ini bayangan dan efek terangkat butirnya terpotong.
   */
  padding: 6px 2px 10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.kolom-utama .video-daftar::-webkit-scrollbar { display: none; }

.kolom-utama .video-daftar > li {
  flex: 0 0 auto;
  width: 208px;
  margin: 0;
  scroll-snap-align: start;
  border: 1px solid var(--outline-variant);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.kolom-utama .video-daftar li + li { border-top: 1px solid var(--outline-variant); }
.kolom-utama .video-daftar > li:hover {
  border-color: var(--h-100);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.kolom-utama .video-daftar > li.is-aktif {
  border-color: var(--primary-container);
  box-shadow: 0 0 0 1px var(--primary-container) inset;
  background: #fff;
}
/* Jepretan baru menyala setelah pengunjung mengambil alih — kalau aktif
   sejak awal, gerak otomatisnya tertarik balik ke titik jepret terdekat. */
.kolom-utama .video-daftar.is-manual { scroll-snap-type: x proximity; }

.kolom-utama .video-daftar > li > button {
  display: block;
  width: 100%; height: 100%;
  padding: 10px 11px;
  text-align: left;
  border-left: 0;
  background: none;
}
.kolom-utama .video-daftar > li.is-aktif > button { background: none; }

.kolom-utama .video-daftar__judul {
  font-size: 12px; line-height: 17px;
  overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  /*
   * Tinggi dipatok 2 baris supaya semua kartu sama tinggi walau judulnya
   * hanya satu baris — kalau tidak, tanggalnya naik-turun tak beraturan
   * saat daftar berjalan.
   */
  min-height: 34px;
}
.kolom-utama .video-daftar__tgl { font-size: 10.5px; margin-top: 4px; }

/*
 * Salinan TETAP bisa diklik — template.js meneruskan kliknya ke butir
 * asli. Sempat dipasang `pointer-events: none` di sini dan itu justru
 * membuat separuh daftar mati total saat ditekan.
 */

/* --- Kotak jadwal sidang ---
   Berisi ajakan dan tombol, BUKAN tabel: SIPP mengirim
   X-Frame-Options: SAMEORIGIN sehingga tidak bisa disematkan, dan
   menampilkan tabel tiruan berisi nomor perkara jelas berbahaya. */
.jadwal {
  text-align: center;
  /* dipusatkan tegak: kotaknya ikut tinggi kartu di sebelahnya, dan
     tanpa ini isinya menggantung di atas dengan ruang kosong di bawah */
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.jadwal__ikon {
  width: 62px; height: 62px; margin: 2px auto 12px;
  display: grid; place-items: center;
  background: var(--h-50); color: var(--h-700);
  border-radius: var(--r-bulat);
}
.jadwal__ikon svg { width: 30px; height: 30px; }
.jadwal__ajak { margin: 0 0 16px; font-size: 13px; line-height: 20px; color: var(--abu-600); }
.jadwal__tombol {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--h-800); color: #fff;
  padding: 11px 20px; border-radius: var(--r);
  font-family: var(--font-judul); font-weight: 700; font-size: 12.5px;
  transition: background .15s;
}
.jadwal__tombol:hover { background: var(--h-900); color: #fff; text-decoration: none; }
.jadwal__tombol svg { width: 15px; height: 15px; }
.jadwal__catatan {
  margin: 16px 0 0; padding-top: 12px;
  border-top: 1px dashed var(--abu-200);
  font-size: 11.5px; line-height: 17px; color: var(--abu-500);
}

/* ============================================================
   5e. Modul video (dipindahkan dari template palahat)

   Disalin apa adanya supaya modul mod_palahat_video yang SAMA bekerja
   di kedua tampilan. Variabel lamanya dipetakan di :root bagian atas.
   ============================================================ */
/* ============================================================
   Galeri video — pemutar besar + daftar playlist di samping.
   Sampul disimpan lokal; iframe YouTube baru dimuat saat ditekan.
   ============================================================ */
.video-blok { display: grid; gap: var(--gutter); grid-template-columns: 1fr; align-items: start; }
.video-blok > * { min-width: 0; }

.video-panggung {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--inverse-surface);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.video-panggung iframe { width: 100%; height: 100%; border: 0; display: block; }

.video-sampul {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
  position: relative;
}
.video-sampul img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; border-radius: 0; margin: 0;
}
.video-sampul::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45));
  transition: background .15s;
}
.video-sampul:hover::after { background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.55)); }

/* Tombol putar berbentuk segitiga dalam lingkaran, digambar dengan CSS */
.video-putar {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 66px; height: 66px; border-radius: var(--r-full);
  background: rgba(0, 74, 35, .88); border: 2px solid rgba(255,255,255,.85);
  z-index: 2; transition: transform .15s, background-color .15s;
}
.video-putar::before {
  content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}
.video-sampul:hover .video-putar { transform: translate(-50%, -50%) scale(1.08); background: var(--primary-container); }
.video-sampul:focus-visible .video-putar { outline: 3px solid var(--gold); outline-offset: 3px; }

.video-aktif__judul {
  font-family: var(--font-display);
  font-size: 17px; line-height: 25px; font-weight: 700;
  margin: var(--stack-sm) 0 0; color: var(--on-surface);
}

/* Daftar playlist di samping */
.video-daftar {
  list-style: none; margin: 0; padding: 0;
  max-height: 420px; overflow-y: auto;
  border: 1px solid var(--outline-variant); border-radius: var(--r-lg);
  background: var(--surface-white);
}
.video-daftar li + li { border-top: 1px solid var(--outline-variant); }
.video-daftar li.is-aktif { background: var(--surface-container-low); }
.video-daftar li.is-aktif button { color: var(--primary-container); }

/* Daftar hanya berisi judul + tanggal, tanpa thumbnail — jadi lebih banyak
   judul terbaca tanpa menggulir. Sampul besar tetap ada di pemutar; berkasnya
   diambil dari atribut data-sampul oleh template.js. */
.video-daftar button {
  display: block; width: 100%;
  padding: 11px 12px; border: 0; background: none; cursor: pointer;
  text-align: left; font: inherit; color: var(--on-surface);
  border-left: 3px solid transparent;
}
.video-daftar button:hover { background: var(--surface-container-low); color: var(--primary-container); }
.video-daftar li.is-aktif button { border-left-color: var(--primary-container); }
.video-daftar__judul { font-size: 13px; line-height: 18px; font-weight: 600; }
.video-daftar__tgl { display: block; font-size: 11px; font-weight: 600; color: var(--secondary); margin-top: 3px; }

@media (min-width: 900px) {
  .video-blok { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  /* Tinggi daftar dibatasi kira-kira setinggi pemutar (16:9) + judulnya,
     sisanya digulir — supaya kedua kolom seimbang, tidak menyisakan ruang kosong. */
  .video-daftar { max-height: 460px; }
}

/* Bilah gulir daftar dibuat tipis dan senada */
.video-daftar { scrollbar-width: thin; scrollbar-color: var(--outline-variant) transparent; }
.video-daftar::-webkit-scrollbar { width: 8px; }
.video-daftar::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: var(--r-full); }
.video-daftar::-webkit-scrollbar-track { background: transparent; }

/* Daftar tautan layanan (kolom kanan pita abu) */
.tautan-layanan { list-style: none; margin: 0; padding: 0; }
.tautan-layanan li { border-bottom: 1px solid var(--outline-variant); }
.tautan-layanan li:last-child { border-bottom: 0; }
.tautan-layanan a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; font-size: 14px; line-height: 21px; font-weight: 600;
  color: var(--on-surface);
}
.tautan-layanan a::before {
  content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary-fixed-dim);
}
.tautan-layanan a:hover { color: var(--primary-container); text-decoration: none; }
.tautan-layanan a:hover::before { background: var(--gold); }

/* Tautan "Lainnya →" di bawah seksi */
.mod-section__more { margin: var(--stack-md) 0 0; text-align: right; }
.mod-section__more a {
  font-size: 13px; font-weight: 600; color: var(--primary-container);
  display: inline-flex; align-items: center; gap: 6px;
}
.mod-section__more a:hover { color: var(--primary); text-decoration: none; gap: 9px; }

/* ============================================================
   5g. Modul daftar artikel (mod_articles)

   Dipakai Pengumuman dan Agenda Pimpinan. Dipindahkan dari template
   palahat apa adanya; markup mod-articles-* itu bawaan Joomla, sama di
   kedua tampilan.
   ============================================================ */
/* ============================================================
   Modul daftar artikel (mod_articles)
   ============================================================ */
.mod-section { margin-bottom: var(--stack-lg); }

.mod-articles-items { list-style: none; margin: 0; padding: 0; }
.mod-articles-items > li { padding: 0; margin: 0; border: 0; }
.mod-articles-items > li + li { margin-top: var(--stack-sm); }

.mod-articles-item {
  background: var(--surface-white);
  border: 1px solid var(--outline-variant);
  border-left: 3px solid var(--primary-fixed-dim);
  border-radius: var(--r);
  padding: 12px 14px;
  transition: border-left-color .15s, box-shadow .15s;
}
.mod-articles-item:hover { border-left-color: var(--gold); box-shadow: var(--shadow); }

/* 12,5px, bukan 15px. Pada 15px judul pengumuman justru lebih besar
   daripada judul berita di sebelahnya (13,5px) — timpang, dan membuat
   kartunya jauh lebih tinggi. Acuan Badilum di kisaran 12–13px. */
.mod-articles-title { font-size: 12.5px; line-height: 17.5px; font-weight: 700; margin: 0; }
.mod-articles-title a { color: var(--on-surface); }
.mod-articles-title a:hover { color: var(--primary-container); text-decoration: none; }

/* Baris info (tanggal dsb).
   Joomla bisa memakai dl.list-inline ATAU dl.list-unstyled tergantung parameter
   info_layout — keduanya harus ditangani, kalau tidak <dd> kena indentasi
   bawaan peramban ~40px sehingga tanggal terlihat menjorok tidak rata. */
.mod-articles-item dl,
.mod-articles-item .article-info {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin: 6px 0 0; padding: 0;
  font-size: 10.5px; line-height: 16px; color: var(--secondary); font-weight: 600;
}
.mod-articles-item dl dd {
  margin: 0; padding: 0;
  margin-inline-start: 0;   /* buang indentasi bawaan <dd> */
  display: inline-flex; align-items: center; gap: 5px;
}
.mod-articles-item dl dd::after { content: ''; }

/* <dt> hanya berisi label untuk pembaca layar. Kalau dibiarkan sebagai item flex
   ia tetap memakan satu jarak gap, sehingga tanggal terlihat menjorok.
   Dikeluarkan dari alur, tetap terbaca pembaca layar. */
.mod-articles-item dl dt {
  position: absolute; width: 1px; height: 1px;
  margin: 0; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}

/* Kelas font-ikon Joomla yang tidak dimuat template ini — jangan sisakan kotak kosong */
.mod-articles-item .icon-calendar,
.mod-articles-item .icon-user,
.mod-articles-item .icon-folder-open,
.mod-articles-item .icon-eye,
.mod-articles-item .icon-fw { display: none; }

.mod-articles-item p { font-size: 11.5px; line-height: 17px; color: var(--on-surface-variant); margin: 6px 0 0; }

/* Kartu berita bergambar */
.mod-articles-item .mod-articles-image,
.mod-articles-item figure { margin: 0 0 10px; }
.mod-articles-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r); display: block; }

.mod-articles-item .readmore,
.mod-articles-item .btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 5px 12px;
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--primary-container); border-radius: var(--r);
  color: var(--primary-container); background: transparent; text-decoration: none;
}
.mod-articles-item .readmore:hover { background: var(--primary-container); color: #fff; }

/* Sembunyikan label "Rincian" yang hanya untuk pembaca layar */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   5b. Widget kolom kanan
   ============================================================ */

/* --- Jam pelayanan ---
   Angkanya diambil dari modul "Alamat Kantor" yang sudah ada, BUKAN dari
   berkas rancangan — di sana jamnya 15.30, yang benar 16.30. */
.jam-daftar { list-style: none; margin: 0; padding: 0; }
.jam-daftar li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-block: 9px;
  border-bottom: 1px solid var(--abu-100);
}
.jam-daftar li:last-child { border-bottom: 0; }
.jam-daftar__hari { color: var(--abu-600); font-weight: 500; }
.jam-daftar__waktu {
  background: var(--abu-100); color: var(--abu-900);
  font-weight: 700; font-size: 12px;
  padding: 3px 9px; border-radius: var(--r-sm);
  white-space: nowrap;
}
.jam-daftar__waktu--libur { background: var(--h-50); color: var(--h-700); }
.jam-catatan {
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px dashed var(--abu-200);
  font-size: 11.5px; color: var(--abu-500);
}

/* --- Indeks pelayanan publik ---
   Angka sengaja kosong sampai user mengirim data resminya. Penanda
   "belum diisi" dibuat mencolok supaya tidak pernah dikira data asli. */
.indeks { display: grid; gap: 12px; }
.indeks__kotak {
  background: linear-gradient(150deg, var(--h-600), var(--h-800));
  color: #fff;
  border-radius: var(--r-lg);
  padding: 14px 12px;
  text-align: center;
}
.indeks__nama {
  display: block;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--h-100);
}
.indeks__angka {
  display: block; margin: 4px 0 2px;
  font-family: var(--font-judul);
  font-size: 26px; font-weight: 800; line-height: 1.1;
  color: var(--emas-400);
}
.indeks__persen { font-size: 12px; font-weight: 600; color: #fff; }
.indeks__periode { display: block; font-size: 9.5px; color: var(--h-100); }
.indeks__periode--kosong {
  display: inline-block; margin-top: 3px;
  background: rgba(255, 255, 255, .16);
  border: 1px dashed rgba(255, 255, 255, .5);
  border-radius: var(--r-sm);
  padding: 1px 7px;
  color: #fff; font-weight: 600;
}

/* --- Daftar tautan ---
 *
 * :not(.sosmed-baris) pada ketiganya. Aturan ini menyasar SEMUA <li><a>
 * di kartu samping, sedangkan daftar media sosial di bawah juga berupa
 * <li><a> — tanpa pengecualian ini tiap barisnya kebagian garis pemisah
 * dan tanda '›' nyasar di sebelah kiri ikonnya.
 */
.kolom-sisi .kartu__isi ul { list-style: none; margin: 0; padding: 0; }
.kolom-sisi .kartu__isi ul:not(.sosmed-daftar) li + li { border-top: 1px solid var(--abu-100); }
.kolom-sisi .kartu__isi li > a:not(.sosmed-baris) {
  display: flex; align-items: center; gap: 8px;
  padding-block: 8px;
  color: var(--abu-700); font-size: 12.5px;
}
.kolom-sisi .kartu__isi li > a:not(.sosmed-baris)::before {
  content: '›'; color: var(--emas-600); font-size: 15px; line-height: 1; flex: none;
}
.kolom-sisi .kartu__isi li > a:not(.sosmed-baris):hover { color: var(--h-700); text-decoration: none; }

/*
 * "Ikuti Kami" — daftar tegak, tiap baris menyebut alamat akunnya.
 *
 * Sebelumnya hanya deretan ikon tanpa keterangan: pengunjung harus
 * menebak akun mana yang dituju, dan nama akunnya baru terlihat setelah
 * situsnya terbuka. Susunan tegak memberi ruang untuk menuliskannya.
 *
 * Karena tegak, jumlah akun tidak lagi membatasi apa pun — menambah
 * akun baru hanya menambah satu baris, tidak menyempitkan yang lain.
 */
.sosmed-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.sosmed-baris {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  background: var(--abu-100);
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--abu-800);
  transition: background .15s, border-color .15s, color .15s;
}
.sosmed-baris:hover {
  background: var(--h-50); border-color: var(--h-100);
  color: var(--h-800); text-decoration: none;
}

.sosmed-baris__ikon {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: var(--h-800); color: #fff;
}
.sosmed-baris__ikon svg { width: 17px; height: 17px; }

/* min-width: 0 supaya nama akun yang panjang bisa dipangkas — tanpa ini
   kotak flex menolak menyusut dan barisnya melebar keluar kartu. */
.sosmed-baris__teks { display: grid; min-width: 0; }
.sosmed-baris__nama {
  font-family: var(--font-judul); font-weight: 700; font-size: 12.5px;
  color: var(--h-800); line-height: 17px;
}
.sosmed-baris__akun {
  font-size: 11.5px; color: var(--abu-600); line-height: 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Halaman Arsip Ucapan --- */
.arsip__saring {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  background: var(--abu-100);
  border: 1px solid var(--abu-200);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 22px;
}
.arsip__saring fieldset {
  display: contents;  /* fieldset tidak boleh jadi kotak flex sendiri */
  border: 0; margin: 0; padding: 0;
}
.arsip__saring-butir { display: grid; gap: 4px; }
.arsip__saring-butir label {
  font-family: var(--font-judul); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--abu-600);
}
.arsip__saring select,
.arsip__saring input[type="text"] {
  border: 1px solid var(--abu-300); border-radius: var(--r);
  background: #fff; padding: 8px 10px;
  font-family: inherit; font-size: 13px; color: var(--abu-800);
}
.arsip__saring select:focus,
.arsip__saring input:focus {
  outline: 0; border-color: var(--h-600); box-shadow: 0 0 0 3px var(--h-50);
}
.arsip__tombol {
  background: var(--h-800); color: #fff;
  border: 0; border-radius: var(--r);
  padding: 9px 18px; cursor: pointer;
  font-family: var(--font-judul); font-weight: 700; font-size: 12.5px;
}
.arsip__tombol:hover { background: var(--h-900); }

.arsip__daftar { list-style: none; margin: 0; padding: 0; }
.arsip__butir {
  border: 1px solid var(--abu-200);
  border-radius: var(--r-lg);
  padding: 15px 18px;
  transition: border-color .15s, box-shadow .15s;
}
.arsip__butir + .arsip__butir { margin-top: 12px; }
.arsip__butir:hover { border-color: var(--h-100); box-shadow: var(--shadow-sm); }

.arsip__judul {
  margin: 0;
  font-family: var(--font-judul); font-weight: 700;
  font-size: 15px; line-height: 21px;
}
.arsip__judul a { color: var(--h-800); }
.arsip__judul a:hover { color: var(--h-600); text-decoration: none; }
.arsip__tgl {
  display: block; margin-top: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--emas-600);
}
.arsip__cuplik {
  margin: 8px 0 0;
  font-size: 13px; line-height: 20px; color: var(--abu-600);
}
.arsip__kosong { color: var(--abu-600); font-size: 13px; }
.arsip__halaman { margin-top: 20px; }

@media (max-width: 599px) {
  /* Di ponsel tiap penyaring memakai lebar penuh — berdampingan membuat
     kotak pilihannya menyempit sampai teksnya terpotong. */
  .arsip__saring-butir { flex: 1 1 100%; }
  .arsip__tombol { width: 100%; }
}

/* --- Jadwal sidang dari SIPP --- */
/*
 * Tinggi penuh, dan panggungnya yang memuai.
 *
 * Kotak ini bersebelahan dengan Agenda Pimpinan yang jauh lebih tinggi,
 * dan tinggi keduanya disamakan oleh grid induk. Tanpa ini, isinya
 * mengumpul di atas dan menyisakan ruang putih kosong sedalam ratusan
 * piksel — terbaca seperti ada yang gagal dimuat.
 */
.sidang { display: flex; flex-direction: column; height: 100%; }

.sidang__kepala {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 9px; margin-bottom: 11px;
  border-bottom: 1px dashed var(--abu-200);
}
.sidang__tanggal {
  font-family: var(--font-judul); font-weight: 700; font-size: 13px; color: var(--h-800);
}
.sidang__jumlah {
  flex: none;
  background: var(--h-50); color: var(--h-800);
  border-radius: var(--r-full); padding: 2px 10px;
  font-family: var(--font-judul); font-weight: 700; font-size: 11px;
}

/*
 * Kartu ditumpuk, bukan dijejer — dan ditumpuk memakai grid.
 *
 * Semua kartu menempati sel grid yang SAMA, jadi panggung setinggi kartu
 * terpanjang dan tetap segitu waktu kartunya berganti. Ini menggantikan
 * cara lama (position:absolute + min-height patokan), yang punya dua
 * cacat sekaligus: tingginya harus ditebak, dan tebakan yang meleset
 * berakibat fatal ke dua arah — kalau kekecilan agenda panjang terpotong,
 * kalau kebesaran ada ruang kosong menganga di bawah kartu.
 *
 * Panjang agenda SIPP tidak bisa diketahui dari sini, jadi angka
 * patokan apa pun cuma menunggu giliran salah.
 */
.sidang__panggung { display: grid; flex: 1; align-content: stretch; }

.sidang-kartu {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease;
  background: var(--h-50);
  border: 1px solid var(--abu-200);
  border-left: 4px solid var(--h-700);
  border-radius: var(--r);
  padding: 12px 14px;
}
.sidang-kartu.is-aktif { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .sidang-kartu { transition: none; }
}

.sidang-kartu__nomor {
  margin: 0 0 8px;
  font-family: var(--font-judul); font-weight: 800;
  font-size: 14px; color: var(--h-900); letter-spacing: .01em;
}
.sidang-kartu__data { margin: 0; font-size: 11.5px; line-height: 16px; }
.sidang-kartu__data > div {
  display: grid; grid-template-columns: 62px 1fr; gap: 8px;
  padding: 2px 0;
}
.sidang-kartu__data dt { color: var(--abu-500); font-weight: 600; }
.sidang-kartu__data dd { margin: 0; color: var(--abu-800); }

.sidang__kendali {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 11px;
}
.sidang__nav {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: #fff; color: var(--h-800);
  border: 1px solid var(--abu-200); border-radius: var(--r-full);
  cursor: pointer;
}
.sidang__nav:hover { border-color: var(--h-600); background: var(--h-50); }
.sidang__nav:focus-visible { outline: 2px solid var(--h-600); outline-offset: 2px; }
.sidang__nav svg { width: 15px; height: 15px; }
.sidang__hitung {
  min-width: 54px; text-align: center;
  font-family: var(--font-judul); font-weight: 700; font-size: 12px; color: var(--abu-600);
}

.sidang-tombol {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px;
  background: var(--h-800); color: #fff;
  border-radius: var(--r); padding: 10px 16px;
  font-family: var(--font-judul); font-weight: 700; font-size: 12.5px;
}
.sidang-tombol:hover { background: var(--h-900); color: #fff; text-decoration: none; }
.sidang-tombol svg { width: 14px; height: 14px; }

.sidang__catatan {
  margin: 10px 0 0;
  font-size: 10.5px; line-height: 15px; color: var(--abu-500); text-align: center;
}

/* Tampilan cadangan saat SIPP tak terjangkau */
.sidang-kosong { text-align: center; padding: 6px 0; }
.sidang-kosong__ikon {
  display: grid; place-items: center; margin: 0 auto 10px;
  width: 52px; height: 52px; border-radius: var(--r-full);
  background: var(--h-50); color: var(--h-700);
}
.sidang-kosong__ikon svg { width: 25px; height: 25px; }
.sidang-kosong p { margin: 0 0 12px; font-size: 12.5px; line-height: 19px; color: var(--abu-600); }

/* --- Daftar lengkap pengumuman (pencarian + paginasi) --- */
.daftar-perkara__cari {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 12px;
}
.daftar-perkara__cari input[type="search"] {
  flex: 1 1 190px; min-width: 0;
  border: 1px solid var(--abu-300); border-radius: var(--r);
  padding: 9px 12px; font-family: inherit; font-size: 13px;
}
.daftar-perkara__cari input:focus {
  outline: 0; border-color: var(--h-600); box-shadow: 0 0 0 3px var(--h-50);
}
.daftar-perkara__cari button {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  background: var(--h-800); color: #fff;
  border: 0; border-radius: var(--r);
  padding: 9px 15px; cursor: pointer;
  font-family: var(--font-judul); font-weight: 700; font-size: 12.5px;
}
.daftar-perkara__cari button:hover { background: var(--h-900); }
.daftar-perkara__cari button svg { width: 15px; height: 15px; }
.daftar-perkara__hapus { font-size: 11.5px; color: var(--abu-500); }

.daftar-perkara__jumlah { margin: 0 0 12px; font-size: 12px; color: var(--abu-500); }
.daftar-perkara__jumlah strong { color: var(--h-800); font-size: 13px; }
.daftar-perkara__kosong {
  background: var(--abu-100); border: 1px dashed var(--abu-300);
  border-radius: var(--r); padding: 16px;
  font-size: 13px; color: var(--abu-600);
}

/*
 * Pengumuman yang sudah lewat TIDAK disembunyikan, hanya diredupkan dan
 * diberi lencana. Panggilan ghaib adalah catatan resmi — menghapusnya
 * dari daftar berarti menghilangkan jejaknya. Yang perlu dicegah hanya
 * salah baca: seseorang mengira sidangnya masih akan datang.
 */
.perkara--lewat { opacity: .72; }
.perkara--lewat::before { background: var(--abu-400); }
.perkara--lewat .perkara__kepala { background: var(--abu-100); }
.perkara__lencana--lewat { background: var(--abu-500); }

.daftar-perkara__halaman {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 5px; margin-top: 16px;
}
.daftar-perkara__halaman a,
.daftar-perkara__halaman span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 9px;
  border: 1px solid var(--abu-200); border-radius: var(--r);
  font-family: var(--font-judul); font-weight: 700; font-size: 12px;
  color: var(--abu-700); background: #fff;
}
.daftar-perkara__halaman a:hover {
  border-color: var(--h-600); color: var(--h-800); text-decoration: none;
}
.daftar-perkara__halaman .is-aktif {
  background: var(--h-800); border-color: var(--h-800); color: #fff;
}
.daftar-perkara__elipsis { border: 0; background: none; color: var(--abu-400); }

/* --- Custom Field di halaman artikel --- */

/*
 * Daftar field bawaan Joomla digambar sebagai <ul> berbulatan dengan
 * ukuran huruf mengikuti isi artikel — di sini jadi terlalu kecil dan
 * terbaca seperti catatan kaki, padahal justru DI SITULAH seluruh isi
 * pengumumannya berada.
 */
.fields-container {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; gap: 1px;
  background: var(--abu-200);
  border: 1px solid var(--abu-200);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.fields-container .field-entry {
  display: grid; grid-template-columns: 190px 1fr; gap: 14px;
  background: #fff;
  padding: 11px 16px;
  margin: 0;
}
.fields-container .field-label {
  font-family: var(--font-judul); font-weight: 700;
  font-size: 13.5px; color: var(--abu-600);
}
.fields-container .field-value { font-size: 14.5px; color: var(--abu-800); line-height: 22px; }

/* Tautan dokumen diangkat jadi tombol, bukan tautan biasa yang tenggelam
   di antara baris lain — itu yang paling sering dicari pengunjung. */
.fields-container .field-value a[href^="http"] {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--emas-500); color: var(--h-900);
  border-radius: var(--r);
  padding: 8px 15px;
  font-family: var(--font-judul); font-weight: 700; font-size: 13.5px;
  box-shadow: 0 2px 8px rgba(212, 168, 62, .25);
  transition: background .15s, transform .15s;
}
.fields-container .field-value a[href^="http"]::before {
  content: ''; width: 15px; height: 15px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M8 11l4 4 4-4M4 19h16'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M8 11l4 4 4-4M4 19h16'/%3E%3C/svg%3E") no-repeat center / contain;
}
.fields-container .field-value a[href^="http"]:hover {
  background: var(--emas-400); color: var(--h-900);
  text-decoration: none; transform: translateY(-1px);
}

@media (max-width: 599px) {
  /* Di layar sempit kolom label 190px menyisakan terlalu sedikit untuk
     nilai sepanjang nama pihak, jadi keduanya ditumpuk. */
  .fields-container .field-entry { grid-template-columns: 1fr; gap: 2px; padding: 10px 13px; }
  .fields-container .field-label { font-size: 12px; }
  .fields-container .field-value { font-size: 14px; }
}

/* --- Kontak & peta di kaki halaman (mod_palahat_kontak) --- */
.kontak-kaki__merek { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.kontak-kaki__merek img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.kontak-kaki__merek strong {
  display: block;
  font-family: var(--font-judul); font-size: 13px; color: var(--putih);
  line-height: 18px;
}
.kontak-kaki__merek span { font-size: 10px; color: var(--abu-400); letter-spacing: .05em; }

.kontak-kaki__daftar { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.kontak-kaki__daftar li { display: flex; gap: 9px; color: var(--abu-400); line-height: 1.6; }
.kontak-kaki__daftar svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--emas-400); }
.kontak-kaki__daftar a { color: var(--abu-300); }
.kontak-kaki__daftar a:hover { color: var(--emas-400); text-decoration: none; }

.kontak-kaki__peta {
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--abu-800);
  aspect-ratio: 16 / 11;
  background: var(--abu-900);
}
.kontak-kaki__peta iframe { width: 100%; height: 100%; border: 0; display: block; }

/*
 * Tombol arah dibuat menonjol dengan warna EMAS, bukan hijau.
 *
 * Kaki halaman berlatar hampir hitam dan seluruh tautannya abu-abu;
 * tombol hijau tua di sana nyaris tenggelam. Emas adalah satu-satunya
 * warna aksen situs ini yang benar-benar terbaca di atas latar gelap —
 * warna yang sama sudah dipakai untuk tombol "Unduh Panggilan", jadi
 * pengunjung mengenalinya sebagai "ini yang bisa ditekan".
 */
/*
 * Pemilihnya diawali .kaki — dan itu WAJIB, bukan sekadar kerapian.
 *
 * Kaki halaman punya aturan `.kaki a { color: var(--abu-400) }` yang
 * kekhususannya (0,1,1) mengalahkan `.kontak-kaki__arah` (0,1,0). Tanpa
 * awalan ini teks tombolnya jadi abu-abu di atas latar emas — terukur
 * kontras 1.22, praktis tidak terbaca sama sekali, padahal warnanya
 * sudah ditulis benar di aturan ini.
 */
.kaki .kontak-kaki__arah {
  display: flex; align-items: center; gap: 11px;
  margin-top: 11px;
  background: var(--emas-500); color: var(--h-900);
  border-radius: var(--r-lg);
  padding: 11px 15px;
  box-shadow: 0 4px 14px rgba(212, 168, 62, .22);
  transition: background .16s, transform .16s, box-shadow .16s;
}
.kaki .kontak-kaki__arah:hover {
  background: var(--emas-400); color: var(--h-900); text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(212, 168, 62, .34);
}
.kaki .kontak-kaki__arah:focus-visible { outline: 3px solid var(--putih); outline-offset: 2px; }

.kaki .kontak-kaki__arah-ikon {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: rgba(2, 55, 39, .16);
}
.kaki .kontak-kaki__arah-ikon svg { width: 17px; height: 17px; }
.kaki .kontak-kaki__arah strong {
  display: block;
  font-family: var(--font-judul); font-weight: 800; font-size: 13px;
  letter-spacing: .01em;
}
.kaki .kontak-kaki__arah small { display: block; font-size: 10.5px; opacity: .78; }

/* --- Pengumuman keperkaraan (panggilan ghaib & sisa panjar) --- */

/*
 * Tinggi jalur dipatok TIGA kartu, bukan dibiarkan mengikuti isi.
 *
 * Itulah yang membuat "maksimal 3 data" berarti tiga yang TERLIHAT
 * sekaligus, sementara sisanya tetap ada dan lewat satu per satu saat
 * daftarnya berjalan.
 */
.perkara-jalur {
  --perkara-tinggi: 372px;
  height: var(--perkara-tinggi);
  overflow: hidden;
  position: relative;
  /* Memudar di tepi atas-bawah supaya kartu yang terpotong terbaca
     sebagai "masih ada lagi", bukan sebagai kartu yang rusak. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.perkara-jalur__isi,
.perkara-jalur__salinan { display: grid; gap: 11px; }
.perkara-jalur__isi { will-change: transform; }

/* Mode daftar penuh — dipakai di halaman Pengumuman Keperkaraan */
.perkara-penuh { display: grid; gap: 12px; }

@media (min-width: 768px) {
  /* Di halaman penuh ruangnya selebar isi artikel, jadi dua kolom
     memangkas tinggi halaman hampir separuh tanpa menyempitkan kartu. */
  .perkara-penuh { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/*
 * Kartu dibuat menonjol lewat garis aksen kiri dan kepala berlatar,
 * bukan lewat bayangan tebal: blok ini berdampingan dengan kartu berita
 * di beranda, dan bayangan yang lebih berat akan membuatnya berkelahi
 * dengan kartu di sebelahnya alih-alih tampil rapi.
 */
.perkara {
  position: relative;
  border: 1px solid var(--abu-200);
  border-radius: var(--r);
  background: #fff;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.perkara::before {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: 4px; background: var(--h-700);
}
.perkara:hover {
  border-color: var(--h-100);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.perkara__kepala {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  background: var(--h-50);
  border-bottom: 1px solid var(--abu-200);
  padding: 7px 11px 7px 14px;
}
.perkara__judul {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-family: var(--font-judul); font-weight: 700;
  font-size: 12.5px; line-height: 17px;
}
.perkara__judul a { color: var(--h-900); }
.perkara__judul a:hover { color: var(--h-600); text-decoration: none; }

.perkara__lencana-grup { display: flex; flex-wrap: wrap; gap: 5px; flex: none; }
.perkara__lencana {
  display: inline-block;
  background: var(--h-800); color: #fff;
  border-radius: var(--r-full);
  padding: 3px 10px;
  font-family: var(--font-judul); font-weight: 700;
  font-size: 10px; letter-spacing: .03em; text-transform: uppercase;
  white-space: nowrap;
}

.perkara__data { margin: 0; padding: 7px 11px 8px 14px; font-size: 11.5px; line-height: 15px; }
.perkara__baris {
  display: grid; grid-template-columns: 86px 1fr; gap: 8px;
  padding: 2px 0;
}
.perkara__baris + .perkara__baris { border-top: 1px dashed var(--abu-100); }
.perkara__baris dt { color: var(--abu-500); font-weight: 600; }
.perkara__baris dd { margin: 0; color: var(--abu-800); }

.perkara__aksi { padding: 0 11px 10px 14px; }
.perkara__tombol {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--emas-500); color: var(--h-900);
  border-radius: var(--r);
  padding: 6px 11px;
  font-family: var(--font-judul); font-weight: 700; font-size: 11.5px;
  transition: background .15s;
}
.perkara__tombol:hover { background: var(--emas-600); color: var(--h-900); text-decoration: none; }
.perkara__tombol svg { width: 14px; height: 14px; }

/*
 * Ambangnya 359px, BUKAN 479px seperti sebelumnya.
 *
 * Pada 479px seluruh ponsel masa kini ikut kena, dan tiap baris data jadi
 * dua baris — terukur 39px per baris, padahal dua kolom cuma 19px. Untuk
 * 25 pengumuman itu berarti ribuan piksel gulir tambahan tanpa satu
 * keterangan pun bertambah.
 *
 * Di bawah 360px (ponsel lama seperti iPhone SE generasi pertama) dua
 * kolom memang terlalu sempit, jadi di sana barulah ditumpuk.
 */
@media (max-width: 359.98px) {
  .perkara__baris { grid-template-columns: 1fr; gap: 0; }
  .perkara__baris dt { font-size: 10.5px; }
}

/* --- Slider ucapan selamat / duka cita --- */

.ucapan-slider {
  /*
   * SATU tempat untuk mengubah bentuk bingkai gambar.
   *
   * Dipilih 4/5 (tegak) karena ucapan di sini berupa poster yang memuat
   * tulisan: pada bingkai selebar ±296px, poster 4:5 tergambar penuh
   * 296x370px dan tulisannya masih terbaca, sedangkan di bingkai persegi
   * poster yang sama menyusut jadi 237x296px.
   *
   * Ganti ke `1 / 1` kalau ucapannya kelak lebih sering berbentuk
   * persegi. Berapa pun nilainya, TINGGI KARTU TETAP SAMA untuk semua
   * ucapan — yang berubah hanya seberapa besar posternya tergambar.
   */
  --ucapan-rasio: 4 / 5;
}

/*
 * Slide ditumpuk, bukan dijejer.
 *
 * Panggungnya `position: relative` dan tiap slide `absolute`, kecuali
 * yang aktif. Yang aktif dibiarkan `relative` supaya DIALAH yang
 * menentukan tinggi panggung — kalau semuanya absolute, panggung
 * kehilangan tinggi dan kotaknya mengempis jadi nol.
 *
 * Karena susunan tiap slide persis sama (kotak gambar berbanding tetap,
 * judul dua baris, satu baris tanggal), tinggi itu selalu sama juga —
 * jadi kartunya tidak pernah melompat saat slide berganti.
 */
.ucapan-slider__panggung { position: relative; }

.ucapan-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease;
}
/* template.js sudah tidak menjalankan pergantian otomatis saat setelan
   "kurangi gerak" menyala; pudarnya pun ikut dimatikan supaya penekanan
   titik navigasi berpindah seketika, tanpa gerak sama sekali. */
@media (prefers-reduced-motion: reduce) {
  .ucapan-slide { transition: none; }
}
.ucapan-slide.is-aktif {
  position: relative;
  opacity: 1; visibility: visible;
}
/* Tanpa JS tidak ada kelas is-aktif yang berpindah, jadi slide pertama
   yang sudah ditandai di PHP tetap terlihat dan sisanya tersembunyi. */

.ucapan-slide__gambar {
  display: block; position: relative;
  aspect-ratio: var(--ucapan-rasio);
  margin-bottom: 11px;
  border-radius: var(--r); overflow: hidden;
  background: var(--abu-100);
  /* isolation: isolate mengurung latar buram di dalam kotak ini, jadi
     bayangan kartu di sekitarnya tidak ikut terkena. */
  isolation: isolate;
}

/*
 * object-fit: contain — BUKAN cover.
 *
 * cover memangkas sisi gambar agar memenuhi bingkai. Untuk poster ucapan
 * yang seluruh kalimatnya ada DI DALAM gambar, pemangkasan itu memotong
 * tulisannya. contain menjamin posternya selalu utuh; sisa bingkainya
 * diisi latar buram di bawah.
 */
.ucapan-slide__utama {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%;
  object-fit: contain;
}
.ucapan-slide__latar {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(18px) saturate(1.3) brightness(.92);
  /* Diperbesar sedikit supaya tepi yang memudar karena blur tidak
     menyisakan garis terang di pinggir kotak. */
  transform: scale(1.15);
}

.ucapan-slide__lambang {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--h-50);
}
.ucapan-slide__lambang img { width: 44%; max-width: 120px; opacity: .5; }

/*
 * Judul disembunyikan dari mata lewat kelas visually-hidden di HTML,
 * jadi tidak ada aturan tampilan untuk ia di sini. Aturan line-clamp
 * dan min-height yang dulu ada sudah tidak diperlukan: sekarang satu-
 * satunya isi slide adalah kotak gambar berbanding tetap, sehingga
 * tinggi tiap slide sudah pasti sama tanpa perlu dipatok.
 */

/* Kaki kartu — dipakai saat parameter modul posisi_semua = kaki */
.kartu__kaki {
  display: flex; justify-content: center;
  padding: 0 16px 14px;
}
.kolom-sisi .kartu__kaki { padding: 0 16px 15px; }
.kartu__semua--kaki {
  margin-left: 0;
  /* Warna emas hanya benar di kepala kartu samping yang berlatar hijau
     tua. Di kaki, latarnya putih — emas di atas putih terlalu pucat. */
  color: var(--h-700);
}
.kolom-sisi .kartu__semua--kaki { color: var(--h-700); }
.kolom-sisi .kartu__semua--kaki:hover { color: var(--h-900); }

.ucapan-slider__titik {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 12px;
}
.ucapan-titik {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: var(--r-full);
  background: var(--abu-300); cursor: pointer;
  transition: background .2s, width .2s;
}
.ucapan-titik.is-aktif { background: var(--h-700); width: 18px; }
.ucapan-titik:focus-visible { outline: 2px solid var(--h-600); outline-offset: 2px; }

/* --- Umpan berita dari situs lain --- */
.umpan { list-style: none; margin: 0; padding: 0; }
.umpan__butir + .umpan__butir { border-top: 1px solid var(--abu-200); }

.umpan__tautan {
  display: block; padding: 10px 0;
  color: var(--abu-800);
}
.umpan__butir:first-child .umpan__tautan { padding-top: 0; }
.umpan__butir:last-child .umpan__tautan { padding-bottom: 0; }
.umpan__tautan:hover { text-decoration: none; }
.umpan__tautan:hover .umpan__judul { color: var(--h-700); }

.umpan__judul {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  /*
   * Judul dibiarkan apa adanya — situs Mahkamah Agung menulisnya KAPITAL
   * SEMUA, dan itu memang terbaca lebih berat daripada kabar pengadilan
   * sendiri di atasnya.
   *
   * text-transform: lowercase sempat dipakai untuk meredamnya dan itu
   * KELIRU: judul MA penuh singkatan (WTP, BPK, LHP, KEPPH) yang ikut
   * jadi huruf kecil, dan `capitalize` menghasilkan "Opini Wtp Ke-14".
   * Judul kutipan dari lembaga lain tidak boleh diubah-ubah; yang
   * diredam cukup ukuran dan tebal hurufnya.
   */
  font-family: var(--font-judul); font-weight: 600;
  font-size: 12.5px; line-height: 18px;
  letter-spacing: .1px;
  transition: color .15s;
}
.umpan__tgl {
  display: block; margin-top: 4px;
  font-size: 11px; font-weight: 600; color: var(--emas-600);
}

/* --- Statistik pengunjung --- */
.kolom-sisi .mod-statistik .stat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-block: 7px;
  border-bottom: 1px solid var(--abu-100);
  font-size: 12.5px; color: var(--abu-600);
}
.kolom-sisi .mod-statistik .stat-row:last-child {
  border-bottom: 0; border-top: 2px solid var(--abu-200);
  margin-top: 4px; padding-top: 10px;
  font-weight: 700; color: var(--h-800);
}
.kolom-sisi .mod-statistik .stat-row span:last-child { font-weight: 700; color: var(--abu-900); }
.kolom-sisi .mod-statistik .stat-row:last-child span:last-child { color: var(--h-700); font-size: 15px; }

/* --- Kotak pencarian --- */
.kolom-sisi .kartu__isi input[type="text"],
.kolom-sisi .kartu__isi input[type="search"],
.panel-cari input[type="text"],
.panel-cari input[type="search"] {
  width: 100%;
  border: 1px solid var(--abu-300); border-radius: var(--r);
  padding: 9px 12px;
  font-family: inherit; font-size: 13px;
  background: var(--putih); color: var(--abu-800);
}
.kolom-sisi .kartu__isi input:focus,
.panel-cari input:focus { outline: 0; border-color: var(--h-600); box-shadow: 0 0 0 3px var(--h-50); }
.kolom-sisi .kartu__isi .btn,
.kolom-sisi .kartu__isi button[type="submit"] {
  margin-top: 8px; width: 100%;
  background: var(--h-800); color: #fff;
  border: 0; border-radius: var(--r);
  padding: 9px 14px;
  font-family: var(--font-judul); font-weight: 700; font-size: 12.5px;
  cursor: pointer;
}
.kolom-sisi .kartu__isi .btn:hover,
.kolom-sisi .kartu__isi button[type="submit"]:hover { background: var(--h-900); }

/* ============================================================
   5f. Isi halaman dalam — artikel, kontak, formulir, pencarian

   Dipindahkan dari template palahat apa adanya. Blok-blok ini hasil
   banyak perbaikan (gambar tunggal dirata-tengahkan, tabel bisa digeser,
   honeypot formulir kontak, dsb) yang tidak ada gunanya ditulis ulang.
   Variabel lamanya sudah dipetakan di :root bagian atas.
   ============================================================ */
/* ============================================================
   Artikel
   ============================================================ */
/* Judul halaman / artikel */
.page-header { margin-bottom: var(--stack-md); }
.page-header h1, .page-header h2 { font-size: 28px; line-height: 38px; margin: 0; }

/* Blok info artikel — dl bawaan Joomla dijadikan satu baris ringkas */
dl.article-info {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
  margin: 0 0 var(--stack-md); padding: 0 0 var(--stack-md);
  border-bottom: 1px solid var(--outline-variant);
  font-size: 13px; line-height: 20px; color: var(--on-surface-variant);
}
dl.article-info dt.article-info-term {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  margin: 0; padding: 0;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
dl.article-info dd {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 0;
}
dl.article-info dd.published time { color: var(--secondary); font-weight: 600; }
dl.article-info a { color: var(--primary-container); font-weight: 600; }

/* Ikon Joomla memakai font-ikon yang tidak dimuat template ini -> sembunyikan,
   kalau tidak muncul sebagai kotak kosong di sebelah tiap keterangan. */
dl.article-info [class^="icon-"],
dl.article-info [class*=" icon-"] { display: none; }

.article-header { margin-bottom: var(--stack-md); }
.article-title { font-size: 28px; line-height: 36px; margin-bottom: var(--stack-sm); }

.article-body,
.com-content-article__body { font-size: 16px; line-height: 27px; }
.article-body img,
.com-content-article__body img { border-radius: var(--r-lg); margin-block: var(--stack-md); }

/* Ikon kecil sebaris (lebar/tinggi ditulis di atribut, ≤ 48px) jangan diberi
   margin blok — kalau tidak, ikon terdorong ke atas teks dan barisnya renggang. */
.article-body img[width]:not([width="0"]),
.com-content-article__body img[width]:not([width="0"]) { vertical-align: middle; }
.article-body img[height^="1"], .article-body img[height^="2"], .article-body img[height^="3"], .article-body img[height^="4"],
.com-content-article__body img[height^="1"], .com-content-article__body img[height^="2"],
.com-content-article__body img[height^="3"], .com-content-article__body img[height^="4"] {
  margin-block: 0;
}
.article-body img[height]:not([height=""]):not([height^="1"]):not([height^="2"]):not([height^="3"]):not([height^="4"]),
.com-content-article__body img[height]:not([height=""]):not([height^="1"]):not([height^="2"]):not([height^="3"]):not([height^="4"]) {
  margin-block: var(--stack-md);
}

/* Gambar yang berdiri sendiri dalam satu paragraf dirata-tengahkan.
   Di situs lama perataan ini dibawa gaya inline (display:block; margin:auto)
   pada <img>, yang ikut terbuang saat pembersihan HTML migrasi — akibatnya
   783 paragraf gambar jadi rata kiri.

   Kelas .gambar-tunggal dipasang oleh template.js, BUKAN oleh pemilih CSS.
   Sebabnya: `p > img:only-child` tidak bisa dipakai — `:only-child` hanya
   menghitung ELEMEN, sehingga <p><img>teks…</p> ikut cocok dan ikon sebaris
   (35 paragraf, mis. artikel #140) ikut tergeser ke tengah. CSS tidak punya
   cara memeriksa simpul teks, jadi penyaringannya dilakukan di JS. */
.article-body p.gambar-tunggal > img,
.article-body p.gambar-tunggal > a > img,
.com-content-article__body p.gambar-tunggal > img,
.com-content-article__body p.gambar-tunggal > a > img {
  display: block;
  margin-inline: auto;
}

/* ------------------------------------------------------------
   Tab artikel — dipasang plugin konten palahattab, pengganti
   modul RokSprocket "tabs" dari situs Joomla 3 lama.
   ------------------------------------------------------------ */
.tab-artikel { margin-block: var(--stack-lg); }

.tab-artikel__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 2px solid var(--outline-variant);
  margin-bottom: var(--stack-lg);
}

.tab-artikel__tombol {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: var(--on-surface-variant);
  padding: 11px 18px;
  border-radius: var(--r) var(--r) 0 0;
  /* garis bawah aktif digambar di sini supaya menimpa garis .tab-artikel__bar */
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, background .15s, border-color .15s;
}

.tab-artikel__tombol:hover {
  color: var(--primary-container);
  background: var(--surface-container-low);
}

.tab-artikel__tombol[aria-selected="true"] {
  color: var(--primary-container);
  border-bottom-color: var(--primary-container);
}

.tab-artikel__tombol:focus-visible {
  outline: 2px solid var(--primary-container);
  outline-offset: -2px;
}

/* Tanpa JS semua panel tampil berurutan — masing-masing diberi judulnya
   sendiri lewat ::before supaya tetap terbaca. Kelas .is-siap dipasang JS. */
.tab-artikel:not(.is-siap) .tab-artikel__bar { display: none; }
.tab-artikel:not(.is-siap) .tab-artikel__panel[hidden] { display: block; }

@media (max-width: 575.98px) {
  .tab-artikel__bar { flex-wrap: nowrap; overflow-x: auto; }
  .tab-artikel__tombol { white-space: nowrap; }
}

/* ------------------------------------------------------------
   Daftar tautan dokumen — pengganti pola lama <p><img ikon><a>…</a></p>.
   Ikon digambar dengan CSS, jadi tidak bergantung berkas PNG.
   ------------------------------------------------------------ */
/* Daftar bertombol. Dua ragam, bedanya HANYA ikon:
     .daftar-dokumen  untuk tautan ke dokumen/prosedur
     .daftar-orang    untuk tautan ke profil orang                       */
:is(.daftar-dokumen, .daftar-orang) { list-style: none; margin: var(--stack-md) 0; padding: 0; }
:is(.daftar-dokumen, .daftar-orang) li + li { margin-top: 6px; }

:is(.daftar-dokumen, .daftar-orang) a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface-white);
  border: 1px solid var(--outline-variant);
  border-left: 3px solid var(--primary-fixed-dim);
  border-radius: var(--r);
  font-size: 15px; line-height: 22px; font-weight: 600;
  color: var(--on-surface);
  transition: border-left-color .15s, box-shadow .15s, background-color .15s;
}
:is(.daftar-dokumen, .daftar-orang) a:hover {
  border-left-color: var(--gold);
  background: var(--surface-container-low);
  color: var(--primary-container);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

/* Rangka ikon — warnanya dari background, jadi kedua ragam bisa
   memakai aturan hover yang sama persis. */
:is(.daftar-dokumen, .daftar-orang) a::before {
  content: ''; flex: none;
  background: var(--primary-container);
  opacity: .8;
}
:is(.daftar-dokumen, .daftar-orang) a:hover::before { background: var(--gold); opacity: 1; }

/* Ikon dokumen: persegi dengan sudut terlipat */
.daftar-dokumen a::before {
  width: 18px; height: 22px;
  clip-path: polygon(0 0, 68% 0, 100% 30%, 100% 100%, 0 100%);
}

/* Ikon orang: kepala + bahu.
   Dipakai sebagai mask, bukan background-image, supaya warnanya tetap
   ikut variabel tema seperti ikon dokumen — background-image tidak bisa
   diwarnai dari CSS. SVG-nya disematkan sebagai data: URI, jadi tidak
   ada berkas tambahan dan tetap lolos CSP (img-src 'self' data:). */
.daftar-orang a::before {
  width: 20px; height: 20px;
  -webkit-mask: var(--ikon-orang) center / contain no-repeat;
          mask: var(--ikon-orang) center / contain no-repeat;
}

/* Tanda panah di ujung kanan */
:is(.daftar-dokumen, .daftar-orang) a::after {
  content: '\203A'; margin-left: auto;
  font-size: 20px; line-height: 1; color: var(--outline);
  transition: transform .15s, color .15s;
}
:is(.daftar-dokumen, .daftar-orang) a:hover::after { color: var(--primary-container); transform: translateX(3px); }
.article-body h2,
.com-content-article__body h2 { font-size: 22px; line-height: 30px; margin-top: var(--stack-lg); }
.article-body h3,
.com-content-article__body h3 { font-size: 19px; line-height: 27px; margin-top: var(--stack-md); }
.article-body :is(ul, ol),
.com-content-article__body :is(ul, ol) { padding-left: 22px; margin-bottom: var(--stack-md); }
.article-body li,
.com-content-article__body li { margin-bottom: 6px; }
.article-body blockquote,
.com-content-article__body blockquote {
  margin: var(--stack-md) 0; padding: 12px 18px;
  border-left: 4px solid var(--primary-fixed-dim); background: var(--surface-subtle);
  border-radius: 0 var(--r) var(--r) 0;
}
.article-body iframe,
.com-content-article__body iframe { max-width: 100%; border: 0; border-radius: var(--r-lg); aspect-ratio: 16/9; height: auto; width: 100%; }

/* Tabel — striped, header tebal warna primary, bisa digeser di layar sempit */
.article-body table,
.com-content-article__body table,
table.table {
  width: 100%; border-collapse: collapse; margin-bottom: var(--stack-md);
  font-size: 14px; line-height: 21px;
}
.article-body table th,
.com-content-article__body table th,
table.table th {
  background: var(--surface-subtle); color: var(--primary-container);
  font-weight: 700; text-align: left; padding: 10px 12px;
  border-bottom: 2px solid var(--outline-variant);
}
.article-body table td,
.com-content-article__body table td,
table.table td { padding: 10px 12px; border-bottom: 1px solid var(--outline-variant); vertical-align: top; }
.article-body table tr:nth-child(even) td,
.com-content-article__body table tr:nth-child(even) td { background: var(--surface-subtle); }

/* Pembungkus geser dibuat oleh template.js */
.table-scroll { overflow-x: auto; margin-bottom: var(--stack-md); }
.table-scroll > table { margin-bottom: 0; }

/* ============================================================
   Halaman kontak / Kritik & Saran
   Lihat override di html/com_contact/contact/
   ============================================================ */
.kontak__intro {
  font-size: 16px; line-height: 26px;
  color: var(--on-surface-variant);
  background: var(--surface-subtle);
  border-left: 3px solid var(--primary-container);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--stack-md) var(--stack-lg);
  margin-bottom: var(--stack-lg);
  max-width: 78ch;
}
.kontak__intro p:last-child { margin-bottom: 0; }

.kontak__grid { display: grid; gap: var(--stack-lg); }
.kontak__grid > * { min-width: 0; }

@media (min-width: 860px) {
  /* Formulir mendapat porsi lebih besar; kartu kontak jadi pendamping.
     Ini juga yang membuat lebar kolom isian turun dari ±1.070px ke ±600px. */
  .kontak__grid--dua { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
}

/* ---- Kartu formulir ---- */
.kontak-form {
  background: var(--surface-white);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-lg);
  padding: var(--stack-lg);
}
.kontak-form__judul {
  font-size: 19px; line-height: 26px; margin: 0 0 6px;
  color: var(--primary);
}
/* Catatan "kolom bertanda bintang wajib diisi" berasal dari field bertipe
   spacer milik formulir com_contact — dibuat sebagai keterangan kecil,
   bukan label tebal seperti bawaannya. */
.kontak-form .field-spacer { margin-bottom: var(--stack-lg); }
.kontak-form .field-spacer .control-label { margin: 0; }
.kontak-form .field-spacer label {
  font-size: 13px; line-height: 20px; font-weight: 400;
  color: var(--on-surface-variant);
  margin: 0;
}
.kontak-form .field-spacer .controls { display: none; }
/* fieldset dipakai demi struktur, bukan tampilan — bingkai & legend
   bawaan peramban dimatikan supaya tidak muncul garis abu-abu tipis */
.kontak-form__grup { border: 0; margin: 0; padding: 0; min-width: 0; }
.kontak-form__grup > legend { display: none; }

.kontak-form .control-group + .control-group { margin-top: var(--stack-md); }
.kontak-form label { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.kontak-form .star, .kontak-form .required { color: #b3261e; }
.kontak-form textarea { min-height: 160px; resize: vertical; }

/* Kolom jebakan penahan bot.
   Disembunyikan dengan CSS, BUKAN type="hidden" — bot yang membaca HTML
   mentah tetap melihatnya sebagai isian biasa lalu mengisinya, dan itulah
   yang menandainya. Jangan ganti ke display:none saja: sebagian bot
   memeriksa properti itu. */
.kontak-form__jebakan {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.kontak-form__aksi { margin-top: var(--stack-lg); }
.kontak-form__aksi .btn { min-width: 170px; }

/* ---- Kartu informasi kontak ---- */
.kontak__info {
  background: var(--surface-subtle);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-lg);
  padding: var(--stack-lg);
}
.kontak__info-judul {
  font-size: 17px; line-height: 24px; margin: 0 0 var(--stack-md);
  color: var(--primary);
}

.kontak-item { display: flex; gap: 12px; align-items: flex-start; }
.kontak-item + .kontak-item {
  margin-top: var(--stack-md);
  padding-top: var(--stack-md);
  border-top: 1px solid var(--outline-variant);
}
.kontak-item__ikon {
  width: 20px; height: 20px; flex: none;
  margin-top: 2px; color: var(--primary-container);
}
.kontak-item__label {
  display: block;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 2px;
}
.kontak-item__isi { display: block; font-size: 15px; line-height: 23px; color: var(--on-surface); }
.kontak-item__isi a { color: var(--primary-container); font-weight: 600; }

/* ============================================================
   Formulir
   ============================================================ */
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=tel], input[type=url], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 10px 12px;
  font-family: var(--font-body); font-size: 15px; line-height: 22px; color: var(--on-surface);
  background: var(--surface-white);
  border: 1px solid var(--border-input); border-radius: var(--r);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary-container);
  box-shadow: 0 0 0 2px rgba(0,100,50,.18);
}
label { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .01em; margin-bottom: 6px; }

/* ============================================================
   Hasil pencarian (com_finder)
   ============================================================ */
.com-finder, .search-results, .result__item { min-width: 0; }
.com-finder :is(p, li, dd, a, span, mark), .result__item :is(p, a, span, mark) {
  overflow-wrap: anywhere; word-break: break-word;
}
mark, .highlight {
  background: #fff3cd; color: var(--on-secondary-container);
  padding: 0 2px; border-radius: 2px; font-weight: 600;
}
/* Di dalam judul hasil, sorotan cukup ditebalkan — blok kuning membuat judul berantakan */
.result__title-text mark { background: transparent; color: inherit; padding: 0; }

.search-pages-counter, .com-finder .counter { font-size: 14px; color: var(--on-surface-variant); }
.com-finder .term { font-weight: 700; color: var(--primary-container); }

.search-results { list-style: none; padding: 0; margin: 0; }

.result__item {
  padding: var(--stack-md) 0;
  border-bottom: 1px solid var(--outline-variant);
}
.result__item:last-child { border-bottom: 0; }

/* Judul harus tampil DULU dan paling menonjol; URL turun ke bawah, kecil dan redup.
   Bawaan Joomla menaruh <cite> di dalam <a> sehingga URL naik ke atas judul. */
.result__title { margin: 0 0 6px; font-size: 18px; line-height: 26px; font-weight: 700; }
.result__title-link { display: flex; flex-direction: column; gap: 3px; color: var(--on-surface); }
.result__title-link:hover { text-decoration: none; }
.result__title-text { order: 1; font-family: var(--font-display); color: var(--on-surface); }
.result__title-link:hover .result__title-text { color: var(--primary-container); }
.result__title-url {
  order: 2;
  font-size: 12px; font-style: normal; font-weight: 400; line-height: 17px;
  color: var(--primary-container); opacity: .75;
}

.result__description { margin: 0 0 6px; font-size: 14px; line-height: 22px; color: var(--on-surface-variant); }
.result__date { font-weight: 600; color: var(--secondary); margin-right: 6px; }
.result__taxonomy, .result__path {
  font-size: 12px; line-height: 18px; color: var(--on-surface-variant);
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none;
}
.result__taxonomy li { margin: 0; }

/* Panel pencarian lanjutan: rapikan, jangan mendominasi halaman */
.com-finder form fieldset { border: 0; padding: 0; margin: 0 0 var(--stack-md); }
.com-finder .form-inline, .com-finder .js-finder-searchform {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.com-finder .search-query, .com-finder input[type=text] { max-width: 380px; }
.com-finder .search-pages-counter { font-size: 14px; color: var(--on-surface-variant); margin-bottom: var(--stack-md); }

/* Kotak keterangan cara pakai — kecilkan agar hasil tidak terdorong jauh ke bawah */
.com-finder .search-explained, .com-finder .searchintro {
  font-size: 13px; line-height: 20px; color: var(--on-surface-variant);
  background: var(--surface-subtle); border: 1px solid var(--outline-variant);
  border-radius: var(--r); padding: 12px 14px; margin-bottom: var(--stack-md);
}
.com-finder .search-explained p { margin: 0 0 4px; }
.com-finder .search-explained p:last-child { margin-bottom: 0; }

.breadcrumb {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0; margin: 0 0 var(--stack-md); font-size: 13px; color: var(--on-surface-variant);
}
.breadcrumb li::after { content: '/'; margin-left: 8px; color: var(--outline-variant); }
.breadcrumb li:last-child::after { content: ''; }

.pagination {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none;
  padding: 0; margin: var(--stack-lg) 0 0; justify-content: center;
}
.pagination__wrapper { margin-top: var(--stack-lg); }
.pagination .page-item { display: flex; }

/* Hanya anak langsung <li class="page-item"> yang diberi kotak,
   supaya <span> di dalam tombol tidak ikut berbingkai. */
.pagination .page-item > a,
.pagination .page-item > span,
.pagination > li > a,
.pagination > li > span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; padding: 8px 13px;
  font-size: 14px; line-height: 20px;
  border: 1px solid var(--outline-variant); border-radius: var(--r);
  color: var(--on-surface-variant); background: var(--surface-white);
}
.pagination .page-link span { border: 0; background: none; padding: 0; min-width: 0; }
.pagination a:hover, .pagination a.page-link:hover {
  border-color: var(--primary-container); color: var(--primary-container);
  background: var(--surface-container-low); text-decoration: none;
}
.pagination .active .page-link,
.pagination .active span {
  background: var(--primary-container); border-color: var(--primary-container); color: #fff;
}
.pagination .disabled .page-link,
.pagination .disabled span { opacity: .4; cursor: not-allowed; }

/*
 * Joomla memakai kelas font-ikon (icon-angle-*) untuk tombol
 * Awal / Sebelumnya / Berikutnya / Akhir. Template ini tidak memuat font ikon,
 * jadi panahnya digambar dari karakter biasa — kalau tidak, tampil kotak kosong.
 */
.pagination [class^="icon-angle"],
.pagination [class*=" icon-angle"] { font-style: normal; line-height: 1; }
.pagination .icon-angle-double-left::before  { content: '\00AB'; }  /* « */
.pagination .icon-angle-left::before         { content: '\2039'; }  /* ‹ */
.pagination .icon-angle-right::before        { content: '\203A'; }  /* › */
.pagination .icon-angle-double-right::before { content: '\00BB'; }  /* » */
.pagination [class^="icon-angle"]::before,
.pagination [class*=" icon-angle"]::before { font-size: 17px; font-weight: 700; }

/* ---- Navigasi antar-artikel (Sebelumnya / Berikutnya) ----
   Strukturnya berbeda dari paginasi kategori: <nav class="pagenavigation">
   berisi <span class="pagination"> dengan dua <a>. Perlu aturan sendiri,
   kalau tidak kotaknya saling tumpuk. */
.pagenavigation { margin-top: var(--stack-lg); }
.pagenavigation .pagination {
  display: flex; justify-content: space-between; gap: var(--stack-md);
  margin: 0; padding: 0; border: 0;
}
.pagenavigation .pagination > a {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; max-width: 48%;
  padding: 9px 16px; font-size: 13px; font-weight: 600; line-height: 20px;
  border: 1px solid var(--outline-variant); border-radius: var(--r);
  background: var(--surface-white); color: var(--on-surface-variant);
}
.pagenavigation .pagination > a:hover {
  border-color: var(--primary-container); color: var(--primary-container);
  background: var(--surface-container-low); text-decoration: none;
}
.pagenavigation .pagination > a.next { margin-left: auto; }

/* span di dalam tombol jangan ikut berbingkai */
.pagenavigation .pagination > a span {
  border: 0; background: none; padding: 0; min-width: 0;
  display: inline; color: inherit;
}

/* Panah chevron juga memakai kelas font-ikon yang tidak dimuat template ini */
.pagenavigation [class^="icon-chevron"],
.pagenavigation [class*=" icon-chevron"] { font-style: normal; line-height: 1; }
.pagenavigation .icon-chevron-left::before  { content: '\2039'; font-size: 17px; font-weight: 700; }
.pagenavigation .icon-chevron-right::before { content: '\203A'; font-size: 17px; font-weight: 700; }

/* Wadah pesan sistem: tidak memakan ruang saat tidak ada pesan */
.pesan-sistem:not(:has(joomla-alert, .alert)) { display: none; }
.pesan-sistem { padding-top: var(--stack-md); }
.pesan-sistem joomla-alert { display: block; margin-bottom: var(--stack-md); }
.pesan-sistem .alert-heading { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.pesan-sistem .alert ul, .pesan-sistem joomla-alert ul { margin: 0; padding-left: 20px; }

.alert { padding: 12px 16px; border-radius: var(--r); border: 1px solid; margin-bottom: var(--stack-md); font-size: 14px; }
.alert-success { background: #e8f5ec; border-color: var(--primary-fixed-dim); color: var(--primary); }
.alert-info    { background: var(--surface-container-low); border-color: var(--outline-variant); color: var(--on-surface-variant); }
.alert-warning { background: #fff8e1; border-color: var(--secondary-container); color: var(--on-secondary-container); }
.alert-danger, .alert-error { background: var(--error-container); border-color: var(--error); color: var(--on-error-container); }

/* Modul generik di sidebar */
.moduletable { margin-bottom: var(--stack-lg); }
.moduletable > h3 {
  font-size: 16px; line-height: 24px; color: var(--primary-container);
  border-bottom: 2px solid var(--primary-container); padding-bottom: 6px; margin-bottom: var(--stack-md);
}
.moduletable ul { list-style: none; padding: 0; margin: 0; }
.moduletable ul li { border-bottom: 1px solid var(--outline-variant); }
.moduletable ul li:last-child { border-bottom: 0; }
.moduletable ul li a { display: block; padding: 9px 0; font-size: 14px; line-height: 20px; color: var(--on-surface-variant); }
.moduletable ul li a:hover { color: var(--primary-container); text-decoration: none; }

/* ============================================================
   5i. Halaman hasil pencarian (com_finder)

   Blok finder yang dipindahkan dari template palahat tidak menjangkau
   kelas-kelas ini, jadi kotak isian dan tombolnya masih tampil dengan
   gaya bawaan peramban dan judul hasilnya sebesar judul halaman.
   ============================================================ */
.com-finder__form { margin-bottom: 18px; }
.com-finder__search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.com-finder__search label { font-size: 12.5px; font-weight: 600; margin: 0; }
.com-finder__search .input-group { display: flex; gap: 8px; flex: 1 1 260px; }
.com-finder .js-finder-search-query {
  flex: 1; min-width: 0;
  border: 1px solid var(--abu-300); border-radius: var(--r);
  padding: 9px 13px; font-family: inherit; font-size: 13px;
}
.com-finder .js-finder-search-query:focus {
  outline: 0; border-color: var(--h-600); box-shadow: 0 0 0 3px var(--h-50);
}
.com-finder .btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--h-800); color: #fff;
  border: 0; border-radius: var(--r); padding: 9px 18px;
  font-family: var(--font-judul); font-weight: 700; font-size: 12.5px;
  cursor: pointer;
}
.com-finder .btn:hover { background: var(--h-900); }
.com-finder [class^="icon-"] { display: none; }

.com-finder__explained { font-size: 12.5px; color: var(--abu-500); margin-bottom: 14px; }

.com-finder__results-list { list-style: none; margin: 0; padding: 0; }
.com-finder .result__item {
  background: var(--putih);
  border: 1px solid var(--abu-200);
  border-left: 3px solid var(--h-100);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: border-left-color .15s, box-shadow .15s;
}
.com-finder .result__item:hover { border-left-color: var(--emas-500); box-shadow: var(--bayang-sm); }

.com-finder .result__title { margin: 0 0 5px; }
.com-finder .result__title-text {
  font-size: 14.5px; line-height: 20px; font-weight: 700; color: var(--abu-800);
}
.com-finder .result__title-link:hover .result__title-text { color: var(--h-700); }
/* Alamat lengkap disembunyikan: panjang, tidak terbaca, dan tidak
   membantu pengunjung memilih hasil mana yang dibuka. */
.com-finder .result__title-url { display: none; }
.com-finder .result__date { font-size: 10.5px; color: var(--emas-600); font-weight: 600; }
.com-finder .result__description { font-size: 12px; line-height: 18px; color: var(--abu-500); margin: 5px 0 0; }
.com-finder .term { background: var(--h-100); color: var(--h-900); padding: 0 3px; border-radius: 3px; }

/* ============================================================
   5h. Halaman kategori (com_content view=category layout=blog)

   Dipakai Berita, Pengumuman, Agenda Kegiatan, dan Galeri Foto.
   Sebelumnya sama sekali tidak bergaya di KEDUA template: judul artikel
   memakai ukuran judul halaman (28px, enam baris untuk judul panjang),
   isi ditampilkan penuh, dan antar-artikel tidak ada pemisah — halaman
   jadi satu dinding teks.
   ============================================================ */
.com-content-category-blog > .page-header { margin-bottom: 18px; }
.com-content-category-blog > .page-header h1,
.com-content-category-blog > .page-header h2 {
  font-size: 20px; font-weight: 800; color: var(--h-800);
}

.com-content-category-blog__items { display: grid; gap: 14px; }

.com-content-category-blog__item {
  background: var(--putih);
  border: 1px solid var(--abu-200);
  border-left: 3px solid var(--h-100);
  border-radius: var(--r);
  padding: 15px 16px;
  transition: border-left-color .15s, box-shadow .15s;
}
.com-content-category-blog__item:hover {
  border-left-color: var(--emas-500);
  box-shadow: var(--bayang-sm);
}

/* Judul tiap butir — bukan judul halaman, jadi jangan sebesar itu */
.com-content-category-blog__item .page-header { margin: 0 0 6px; }
.com-content-category-blog__item .page-header h2,
.com-content-category-blog__item .page-header h3 {
  font-size: 14.5px; line-height: 20px; font-weight: 700;
  overflow-wrap: break-word;
}
.com-content-category-blog__item .page-header a { color: var(--abu-800); }
.com-content-category-blog__item .page-header a:hover { color: var(--h-700); text-decoration: none; }

.com-content-category-blog__item .article-info {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 0 0 8px; padding: 0;
  font-size: 10.5px; color: var(--emas-600); font-weight: 600;
}
.com-content-category-blog__item .article-info dd { margin: 0; }
.com-content-category-blog__item .article-info dt { display: none; }
.com-content-category-blog__item [class^="icon-"] { display: none; }

/*
 * Ringkasan dibatasi tiga baris. Artikel di situs ini sering panjang dan
 * tanpa batas ini satu halaman kategori bisa memuat ribuan kata — bukan
 * daftar lagi, melainkan salinan seluruh artikelnya.
 */
.com-content-category-blog__item .item-content > * { margin: 0; }
.com-content-category-blog__item .item-content {
  font-size: 12px; line-height: 18px; color: var(--abu-500);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.com-content-category-blog__item .item-content img,
.com-content-category-blog__item .item-content table { display: none; }

.com-content-category-blog__item .readmore { margin-top: 10px; }
.com-content-category-blog__item .readmore a,
.com-content-category-blog__item .btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0;
  font-family: var(--font-judul);
  font-size: 11.5px; font-weight: 700; color: var(--h-700);
}
.com-content-category-blog__item .readmore a::after { content: '→'; }
.com-content-category-blog__item .readmore a:hover { color: var(--h-900); text-decoration: none; }

/*
 * Bagian "artikel lainnya" di bawah daftar utama. Bawaannya <ol>, jadi
 * tanpa aturan ini tampil sebagai daftar bernomor polos yang terlihat
 * seperti sisa markup, bukan bagian rancangan.
 */
.items-more { margin-top: 18px; }
.com-content-blog__links { list-style: none; margin: 0; padding: 0; }
.com-content-blog__link + .com-content-blog__link { border-top: 1px solid var(--abu-200); }
.com-content-blog__link a {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 2px;
  font-size: 12.5px; line-height: 18px; color: var(--abu-700);
}
.com-content-blog__link a::before {
  content: '›'; flex: none;
  color: var(--emas-600); font-size: 15px; line-height: 18px;
}
.com-content-blog__link a:hover { color: var(--h-700); text-decoration: none; }

/* --- Paginasi --- */
.pagination-wrapper, .com-content-category-blog .pagination {
  margin-top: 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  list-style: none; padding: 0;
}
.pagination-wrapper ul, .com-content-category-blog .pagination ul {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0;
}
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding-inline: 9px;
  background: var(--putih); border: 1px solid var(--abu-200);
  border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600; color: var(--abu-700);
}
.pagination a:hover { border-color: var(--h-600); color: var(--h-800); text-decoration: none; }
.pagination .active span, .pagination .active a {
  background: var(--h-800); border-color: var(--h-800); color: #fff;
}
.counter, .pagination .counter { width: 100%; text-align: center; font-size: 11px; color: var(--abu-500); }

/* ============================================================
   6. Kaki
   ============================================================ */
.kaki {
  background: var(--abu-950);
  color: var(--abu-300);
  border-top: 4px solid var(--emas-500);
  padding-top: 32px;
  font-size: 12.5px;
}
.kaki__baris {
  display: grid; gap: 26px;
  grid-template-columns: 1fr;
  padding-bottom: 26px;
}
.kaki__merek { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.kaki__merek img { width: 44px; height: 44px; object-fit: contain; }
.kaki__merek strong { display: block; color: var(--putih); font-size: 13px; text-transform: uppercase; }
.kaki__merek span { font-size: 10px; color: var(--abu-400); letter-spacing: .05em; }
.kaki__alamat { color: var(--abu-400); line-height: 1.9; margin: 0; }
.kaki__alamat svg { width: 13px; height: 13px; color: var(--emas-400); display: inline-block; vertical-align: -2px; }

/*
 * Nama pengadilan di modul kaki disembunyikan, BUKAN blok mereknya.
 *
 * Keduanya sama-sama menuliskan nama pengadilan, jadi salah satu memang
 * harus pergi. Yang dipertahankan blok merek di atasnya karena ia memuat
 * lambang, nama resmi lengkap dengan kelasnya, dan nama induk lembaga —
 * kalau blok itu yang dibuang, kaki halaman kehilangan lambang sekaligus
 * sebutan "Mahkamah Agung Republik Indonesia".
 *
 * Disembunyikan lewat CSS template ini, bukan dengan menyunting modulnya,
 * sebab modul yang sama masih dipakai template palahat lama.
 */
.kaki .footer-brand > div > strong { display: none; }

.kaki__judul {
  font-size: 13px; color: var(--putih);
  border-bottom: 1px solid var(--abu-800);
  padding-bottom: 8px; margin: 0 0 12px;
}

/*
 * Tombol pelipat kolom kaki.
 *
 * Di layar lebar ia dimatikan template.js dan tampil persis seperti
 * judul biasa: tanpa latar, tanpa kursor tangan, panahnya disembunyikan.
 * Jadi tidak ada yang berubah bagi pengguna desktop.
 */
.kaki__pelipat {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%;
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: left;
}
.kaki__pelipat:disabled { cursor: default; }
.kaki__pelipat svg { display: none; width: 15px; height: 15px; flex: none; }

@media (max-width: 767.98px) {
  /* Hanya berlaku saat template.js sudah memasang js-lipat — tanpa JS
     seluruh tautan kaki tetap terlihat dan bisa ditekan. */
  .kaki__grup.js-lipat .kaki__isi { display: none; }
  .kaki__grup.js-lipat.is-buka .kaki__isi { display: block; }

  .kaki__grup.js-lipat .kaki__judul {
    margin-bottom: 0;
    padding-block: 11px;
  }
  .kaki__grup.js-lipat.is-buka .kaki__judul { margin-bottom: 12px; }

  .kaki__grup.js-lipat .kaki__pelipat { cursor: pointer; }
  .kaki__grup.js-lipat .kaki__pelipat svg {
    display: block;
    color: var(--emas-400);
    transition: transform .2s;
  }
  .kaki__grup.js-lipat.is-buka .kaki__pelipat svg { transform: rotate(180deg); }
  .kaki__grup.js-lipat .kaki__pelipat:focus-visible {
    outline: 2px solid var(--emas-400); outline-offset: 3px;
  }

  /* Jarak antarkolom dirapatkan: saat terlipat, ketiganya jadi deretan
     baris judul — celah 22px membuatnya terlihat tak berhubungan. */
  .kaki__baris { gap: 0; }
  .kaki__kolom + .kaki__kolom { margin-top: 0; }
}

.kaki ul { list-style: none; margin: 0; padding: 0; }
.kaki li + li { margin-top: 5px; }
.kaki a { color: var(--abu-400); }
.kaki a:hover { color: var(--emas-400); text-decoration: none; }

/*
 * Rata tengah. Dulu space-between karena ada dua isi — teks hak cipta di
 * kiri dan tautan PPID di kanan. Setelah PPID dilepas, space-between
 * menyisakan satu teks yang terdampar di tepi kiri.
 */
.kaki__bawah {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 14px;
  border-top: 1px solid var(--abu-900);
  padding-block: 18px;
  text-align: center;
  color: var(--abu-500); font-size: 11.5px;
}
.kaki__bawah p { margin: 0; }
.kaki__bawah a { color: var(--abu-400); }
.kaki__bawah a:hover { color: var(--emas-400); text-decoration: none; }

/*
 * Modul "Alamat Kantor" (#227) dipakai BERSAMA oleh template palahat,
 * dan di sana logo besar serta jam pelayanan memang diinginkan. Di sini
 * keduanya berlebih: lambang sudah tampil di baris merek kaki, dan jam
 * pelayanan sudah punya kartunya sendiri di kolom kanan.
 *
 * Disembunyikan lewat CSS, bukan dengan membuat modul terpisah, supaya
 * alamat dan nomor telepon tetap punya SATU sumber. Menyalinnya jadi
 * modul kedua berarti setiap perubahan nomor harus dikerjakan dua kali —
 * dan daftar tempat yang harus diubah bersamaan sudah panjang.
 */
.kaki .footer-brand > img { display: none; }
.kaki .jam-layanan { display: none; }

/*
 * Sempat dicoba dua kolom untuk memendekkan kaki. Dibatalkan: kolomnya
 * jadi ~110px dan nama panjang seperti "Badan Pengawasan MA-RI" pecah
 * jadi dua baris — lebih berantakan daripada masalah yang dipecahkan.
 * Tingginya dipangkas dengan MENGURANGI isi daftar, bukan memampatkannya.
 */

/* --- Peta lokasi di kaki --- */
.kaki__peta { margin-top: 14px; }
.kaki__peta iframe {
  width: 100%; height: 150px;
  border: 1px solid var(--abu-800); border-radius: var(--r);
  display: block;
  /* peta OSM berlatar terang; sedikit diredupkan agar tidak menyilaukan
     di kaki yang gelap, dan pulih penuh saat disorot */
  filter: saturate(.85) brightness(.94);
  transition: filter .2s;
}
.kaki__peta:hover iframe { filter: none; }
.kaki__peta-tombol {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px;
  background: var(--h-800); color: #fff;
  border-radius: var(--r); padding: 8px 14px;
  font-family: var(--font-judul); font-size: 11.5px; font-weight: 700;
}
.kaki__peta-tombol:hover { background: var(--h-700); color: #fff; text-decoration: none; }
.kaki__peta-tombol svg { width: 14px; height: 14px; }

/* ============================================================
   6b. Menu mengambang Aksesibilitas & Masukan
       (dipindahkan dari template palahat, ditambah tautan masukan)
   ============================================================ */
/* ============================================================
   Panel aksesibilitas — dibangun sendiri, tanpa layanan luar
   ============================================================ */
.akses { position: fixed; left: 20px; bottom: 20px; z-index: 95; }

.akses__tombol {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-full);
  background: var(--primary); color: #fff;
  border: 2px solid rgba(255,255,255,.85); box-shadow: var(--shadow-lg);
  cursor: pointer;
}
.akses__tombol svg { width: 24px; height: 24px; }
.akses__tombol:hover { background: var(--primary-container); }
.akses__tombol[aria-expanded="true"] { background: var(--primary-container); }

.akses__panel {
  position: absolute; left: 0; bottom: 54px;
  width: 230px; padding: 14px;
  background: var(--surface-white);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.akses__panel[hidden] { display: none; }

.akses__judul {
  margin: 0 0 12px; font-family: var(--font-display);
  font-size: 14px; font-weight: 700; color: var(--primary);
}
.akses__grup { margin-bottom: 12px; }
.akses__ket { display: block; font-size: 12px; font-weight: 600; color: var(--on-surface-variant); margin-bottom: 6px; }

.akses__pilihan { display: flex; gap: 6px; }
.akses__pilihan button {
  flex: 1; padding: 8px 0;
  background: var(--surface-container-low); color: var(--on-surface);
  border: 1px solid var(--outline-variant); border-radius: var(--r);
  font-family: var(--font-body); font-weight: 700; cursor: pointer;
}
.akses__pilihan button:nth-child(1) { font-size: 13px; }
.akses__pilihan button:nth-child(2) { font-size: 15px; }
.akses__pilihan button:nth-child(3) { font-size: 17px; }
.akses__pilihan button:hover { border-color: var(--primary-container); }
.akses__pilihan button[aria-pressed="true"] {
  background: var(--primary-container); border-color: var(--primary-container); color: #fff;
}

.akses__saklar, .akses__reset {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--outline-variant); border-radius: var(--r);
  background: var(--surface-container-low); color: var(--on-surface);
  font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer;
}
.akses__saklar:hover, .akses__reset:hover { border-color: var(--primary-container); color: var(--primary-container); }
.akses__saklar[aria-pressed="true"] {
  background: var(--inverse-surface); border-color: var(--inverse-surface); color: #fff;
}
.akses__reset { font-weight: 500; color: var(--on-surface-variant); }

@media (max-width: 575.98px) {
  .akses { left: 14px; bottom: 14px; }
  .akses__tombol { width: 40px; height: 40px; }
  .akses__panel { width: 210px; }
}

/* ---- Skala huruf yang dipilih pengunjung ----
   Memakai `zoom` pada <body>, bukan mengalikan font-size tiap elemen.
   Alasannya: ukuran di stylesheet ini ditulis dalam piksel, sehingga
   mengubah font-size akar tidak berpengaruh, sedangkan mengalikan em
   di setiap elemen akan berantai dan menggandakan ukuran secara liar.
   `zoom` menskalakan tata letak secara proporsional, jadi tidak ada
   yang pecah — dan tombol pun ikut membesar, itu justru membantu. */
html[data-skala-teks="1.15"] body { zoom: 1.15; }
html[data-skala-teks="1.3"] body  { zoom: 1.3; }

/* Media query dinilai terhadap lebar layar sebenarnya, tidak ikut ter-zoom.
   Jadi saat huruf diperbesar, menu mendatar bisa tidak muat lagi.
   Dibiarkan membungkus ke baris kedua — lebih baik daripada halaman
   jadi bisa digeser ke samping. */
html[data-skala-teks] .site-header .container { flex-wrap: wrap; }
html[data-skala-teks] .site-nav { margin-left: 0; }
html[data-skala-teks] .site-nav .mod-menu { flex-wrap: wrap; justify-content: flex-start; }
html[data-skala-teks] .topbar .container { row-gap: 4px; }

/* Pembagian lebar oleh zoom tidak selalu menghasilkan piksel bulat
   (contoh: 1024 ÷ 1,3 = 787,69), menyisakan beberapa piksel geser samping.
   Dipangkas di <body>, BUKAN di <html>: memasang clip pada <html>
   membuat header sticky berhenti menempel saat halaman digulir. */
html[data-skala-teks] body { overflow-x: clip; }

/* ---- Mode kontras tinggi ---- */
html[data-kontras="1"] {
  --surface: #ffffff;
  --surface-white: #ffffff;
  --surface-subtle: #ffffff;
  --surface-container-low: #f2f2f2;
  --surface-container: #e8e8e8;
  --on-surface: #000000;
  --on-surface-variant: #1a1a1a;
  --outline-variant: #000000;
  --outline: #000000;
  --primary: #00331a;
  --primary-container: #00331a;
  --secondary: #4a3600;
}
html[data-kontras="1"] :is(a, .mod-articles-title a, .sorotan__judul a, .kartu__judul) { text-decoration: underline; }
html[data-kontras="1"] :is(.hero, .indexband, .site-footer) { background: #00240f; }
html[data-kontras="1"] .kartu, html[data-kontras="1"] .mod-articles-item { border-width: 2px; }
html[data-kontras="1"] :focus-visible { outline: 3px solid #b8860b; outline-offset: 2px; }

/* Tautan Kritik & Saran di dalam panel — tidak ada di template lama */
.akses__masukan {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
  background: var(--h-800); color: #fff;
  border-radius: var(--r); padding: 9px 12px;
  font-family: var(--font-judul); font-size: 12px; font-weight: 700;
}
.akses__masukan:hover { background: var(--h-900); color: #fff; text-decoration: none; }
.akses__masukan svg { width: 15px; height: 15px; }

/* ============================================================
   7. Tombol melayang
   ============================================================ */
.rel-melayang {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.ke-atas {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--putih); color: var(--h-800);
  border: 1px solid var(--abu-200); border-radius: var(--r-bulat);
  box-shadow: var(--bayang);
  cursor: pointer;
}
.ke-atas svg { width: 20px; height: 20px; }

.tombol-wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: #16a34a; color: #fff;
  padding: 11px 18px; border-radius: var(--r-bulat);
  font-weight: 700; font-size: 13px;
  box-shadow: var(--bayang-lg);
  border: 2px solid #fff;
}
/*
 * Pintasan layanan — disembunyikan di layar lebar.
 *
 * display:none di sini, bukan di media query sempit, supaya keadaan
 * bakunya "tidak tampil": kalau suatu saat ada layar yang tidak tercakup
 * media query mana pun, yang muncul bukan tombol ganda.
 */
.pintasan { display: none; position: relative; }

.pintasan__tombol {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--h-800); color: #fff;
  border: 2px solid #fff; border-radius: var(--r-bulat);
  box-shadow: var(--bayang-lg);
  cursor: pointer;
}
.pintasan__tombol svg { width: 21px; height: 21px; }
.pintasan__tombol[aria-expanded="true"] { background: var(--h-900); }
.pintasan__tombol:focus-visible { outline: 3px solid var(--emas-500); outline-offset: 2px; }

/*
 * Menunya muncul DI ATAS tombolnya (bottom: 100%), bukan di bawah —
 * tombolnya sudah menempel di dasar layar, jadi menu ke bawah akan
 * keluar dari layar.
 */
.pintasan__menu {
  position: absolute; bottom: 100%; right: 0;
  margin-bottom: 10px;
  min-width: 232px; max-width: calc(100vw - 32px);
  background: var(--putih);
  border: 1px solid var(--abu-200);
  border-radius: var(--r-lg);
  box-shadow: var(--bayang-lg);
  padding: 6px;
  display: grid; gap: 2px;
}
.pintasan__menu[hidden] { display: none; }

.pintasan__butir {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  border-radius: var(--r);
  color: var(--abu-800);
}
.pintasan__butir:hover { background: var(--h-50); color: var(--h-800); text-decoration: none; }
.pintasan__ikon {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: var(--h-50); color: var(--h-800);
}
.pintasan__ikon svg { width: 18px; height: 18px; }
.pintasan__butir strong {
  display: block;
  font-family: var(--font-judul); font-size: 12.5px; color: var(--h-800);
}
.pintasan__butir small { display: block; font-size: 11px; color: var(--abu-500); line-height: 15px; }

.tombol-wa:hover { background: #15803d; color: #fff; text-decoration: none; }
.tombol-wa svg { width: 22px; height: 22px; }

/* ============================================================
   8. Penyesuaian lebar layar
   ============================================================ */
@media (min-width: 480px) {
  .akses-cepat .grid,
  .akses-cepat .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kartu-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  :root { --tepi: 24px; }
  .bilah-atas__alamat { display: none; }
  .akses-cepat .grid,
  .akses-cepat .grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kartu-menu { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kaki__baris { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  /* Sengaja TIDAK menaikkan font-size body di sini. Baris `body { font-size: 14px }`
     sempat ada dan diam-diam membatalkan ukuran dasar 13px di desktop — persis
     lebar layar tempat perbandingan dengan acuan dilakukan. */
  .merek__nama { font-size: 24px; }
  .merek__logo { width: 68px; height: 68px; }
  .tata-letak--dua { grid-template-columns: minmax(0, 1fr) 330px; }
  .akses-cepat .grid,
  .akses-cepat .grid-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kaki__baris { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

@media (min-width: 1280px) {
  .bilah-atas__alamat { display: inline-flex; }
}

/* --- Navigasi versi tombol: sampai 1023px --- */
@media (max-width: 1023.98px) {
  .navigasi__isi { flex-wrap: wrap; }
  .navigasi__tombol { display: flex; }

  /*
   * Urutan HTML-nya: tombol Menu, daftar menu, tombol Cari. Karena daftar
   * menu memakai flex-basis 100%, tanpa penataan ulang ini tombol Cari
   * terlempar ke baris ketiga sendirian dan bilahnya terlihat berantakan.
   * `order` menaruh Menu dan Cari di baris yang sama, daftar di bawahnya —
   * tanpa mengubah urutan HTML, jadi urutan fokus papan ketik tetap
   * "seluruh menu dulu, baru pencarian".
   */
  .navigasi__tombol { order: 1; }
  .navigasi__cari   { order: 2; }
  .navigasi__daftar { order: 3; }

  .navigasi__daftar {
    flex-basis: 100%;
    max-height: 0; overflow: hidden;
    transition: max-height .25s ease;
  }
  .navigasi__daftar.is-buka { max-height: 75vh; overflow-y: auto; }

  .navigasi .mod-menu { flex-direction: column; align-items: stretch; padding-bottom: 10px; }
  .navigasi .mod-menu > li > a,
  .navigasi .mod-menu > li > span { padding: 10px 4px; border-bottom: 1px solid var(--h-700); }
  /* Di layar sempit panah CSS diganti tombol sungguhan supaya submenu
     bisa dibuka tanpa mengorbankan tautan halaman induknya. */
  .navigasi .mod-menu > li.parent > a::after,
  .navigasi .mod-menu > li.parent > span::after { display: none; }

  .navigasi__buka {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; margin-left: auto; padding: 0;
    background: none; border: 0; cursor: pointer; color: inherit;
  }
  .navigasi__buka svg { width: 16px; height: 16px; transition: transform .15s; }
  .navigasi .mod-menu li.is-buka > * > .navigasi__buka svg { transform: rotate(180deg); }

  /* Submenu di layar sempit: tertutup sampai ditekan, bukan melayang */
  .navigasi .mod-menu__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none;
    min-width: 0; background: none; border: 0; box-shadow: none;
    border-left: 2px solid var(--h-700);
    margin-left: 10px; padding: 4px 0 4px 10px;
  }
  .navigasi .mod-menu li.is-buka > .mod-menu__sub { display: block; }
  .navigasi .mod-menu__sub a,
  .navigasi .mod-menu__sub span { color: var(--abu-200); padding: 7px 4px; }
  .navigasi .mod-menu__sub a:hover { background: none; color: var(--emas-400); }
}

@media (max-width: 639.98px) {
  /*
   * Di layar sempit lencana kepala digantikan tombol pintasan melayang.
   *
   * Sempat dicoba menampilkannya sebagai baris selebar layar di bawah
   * nama pengadilan, dan itu TIDAK berhasil: .sertifikasi berada di dalam
   * .kepala__kanan yang lebarnya hanya 178px, sehingga `flex-basis: 100%`
   * dihitung terhadap 178px — bukan terhadap 390px layar. Hasilnya kotak
   * sempit yang berdesakan, bukan baris penuh.
   *
   * Isinya kini pindah ke menu pintasan di pojok kanan bawah, yang
   * terjangkau di mana pun pengunjung sedang menggulir.
   */
  .sertifikasi { display: none; }
  .pintasan { display: block; }
  /*
   * Kepanjangan ALAP tetap ditampilkan di ponsel, hanya dikecilkan.
   * Sebelumnya dibuang seluruhnya — padahal singkatan tanpa kepanjangan
   * tidak berarti apa-apa bagi pengunjung yang baru pertama datang.
   */
  .merek__jabaran { font-size: 10px; line-height: 14px; }
  .merek__moto { flex-wrap: wrap; row-gap: 3px; }
  .merek__nama { font-size: 16px; }
  .merek__logo { width: 46px; height: 46px; }
  .skala-teks__label { display: none; }
  .tombol-wa span { display: none; }
  .tombol-wa { padding: 12px; }
}

/* Hormati setelan "kurangi animasi" pada perangkat pengunjung */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}