/* CMS Satuan TNI AD — satu berkas CSS kecil, tanpa framework.
   Satu-satunya JavaScript: skrip inline kecil tombol gelap/terang di tema Modern.
   Tata letak & palet mengikuti situs Disinfolahta TNI AD. */
:root {
  color-scheme: light;
  --latar: oklch(98.5% 0 0);
  --latar-2: oklch(87.2% .01 258);
  --latar-3: oklch(90.5% .018 240);
  --teks: oklch(37.5% .055 248);
  --primer: oklch(55% .25 150);
  --primer-teks: oklch(98% .01 150);
  --peringatan: oklch(75% .25 80);
  --peringatan-teks: oklch(20% .05 80);
  --sukses: oklch(50% .16 175);
  --galat: oklch(60% .3 25);
  --lebar: 80rem;
  --radius: 1rem;
  --radius-kecil: .5rem;
  --bayang: 0 10px 25px -8px rgb(0 0 0 / .18);
}
/* Mode gelap hanya untuk tema Modern; Klasik & Portal selalu terang.
   Bawaan ikut perangkat; tombol bulan/matahari memaksa lewat html[data-mode]. */
html[data-mode="gelap"] .tema-modern {
  color-scheme: dark;
  --latar: oklch(18.5% .03 248);
  --latar-2: oklch(14.5% .025 248);
  --latar-3: oklch(22.5% .028 248);
  --teks: oklch(87% .025 240);
  --primer: oklch(75% .25 145);
  --primer-teks: oklch(8% .02 248);
  --peringatan: oklch(78% .2 80);
  --peringatan-teks: oklch(15% .05 80);
  --sukses: oklch(70% .2 175);
  --galat: oklch(62% .28 25);
  --garis: oklch(26% .03 248);
}
@media (prefers-color-scheme: dark) {
  html:not([data-mode="terang"]) .tema-modern {
    color-scheme: dark;
    --latar: oklch(18.5% .03 248);
    --latar-2: oklch(14.5% .025 248);
    --latar-3: oklch(22.5% .028 248);
    --teks: oklch(87% .025 240);
    --primer: oklch(75% .25 145);
    --primer-teks: oklch(8% .02 248);
    --peringatan: oklch(78% .2 80);
    --peringatan-teks: oklch(15% .05 80);
    --sukses: oklch(70% .2 175);
    --galat: oklch(62% .28 25);
    --garis: oklch(26% .03 248);
  }
  html:not([data-mode="terang"]) .ikon-bulan { display: none; }
  html:not([data-mode="terang"]) .ikon-matahari { display: block; }

}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Variabel turunan dihitung di body supaya ikut warna tema (kelas .tema-* ada di body) */
body {
  --garis: color-mix(in oklch, var(--latar-2) 60%, var(--latar));
  --teks-lembut: color-mix(in oklch, var(--teks) 62%, var(--latar));
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 16px/1.6 "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--teks); background: var(--latar);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; outline: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primer); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; letter-spacing: -.01em; }
h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
.wadah { width: 100%; max-width: var(--lebar); margin: 0 auto; padding: 0 16px; }
.lompat { position: fixed; left: -999px; top: 1rem; z-index: 100; background: var(--primer); color: var(--primer-teks); padding: .5rem 1rem; border-radius: var(--radius-kecil); font-weight: 600; box-shadow: var(--bayang); }
.lompat:focus { left: 1rem; }
.polos { list-style: none; padding: 0; margin: 0; }
.polos li { margin: .5rem 0; }
:focus-visible { outline: 2px solid var(--primer); outline-offset: 2px; }

/* Tombol */
.tombol { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1.1rem; border-radius: var(--radius-kecil); border: 1px solid transparent; font-weight: 600; font-size: .9rem; text-decoration: none; transition: background .15s; }
.tombol--terang { background: var(--latar); color: var(--teks); }
.tombol--terang:hover { background: var(--latar-3); }
.tombol--garis { border-color: color-mix(in oklch, var(--primer-teks) 50%, transparent); color: var(--primer-teks); }
.tombol--garis:hover { background: color-mix(in oklch, var(--primer-teks) 10%, transparent); }
.tombol-ikon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; cursor: pointer; color: inherit; }
.tombol-ikon:hover { background: var(--latar-3); }

/* Kepala: lengket, putih tembus, garis bawah tipis */
.kepala { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--garis); background: color-mix(in oklch, var(--latar) 95%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.kepala__baris { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }
.kepala__burger { display: none; }
.merek { display: flex; align-items: center; gap: .65rem; color: var(--teks); text-decoration: none; flex-shrink: 0; }
.merek__logo { width: 40px; height: 40px; object-fit: contain; }
.merek__logo-header { height: 36px; width: auto; }
.merek__logo-header--besar { height: 56px; max-width: min(70vw, 420px); object-fit: contain; }
.kepala__aksi { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.kepala__aksi .cari input { width: 11rem; }
@media (max-width: 1365px) { .kepala__aksi .cari input { width: 8.5rem; } }
.ganti-mode { border: 0; padding: 0; background: transparent; color: var(--teks); }
.ikon-matahari { display: none; }
html[data-mode="gelap"] .ikon-bulan { display: none; }
html[data-mode="gelap"] .ikon-matahari { display: block; }
.merek__teks { display: flex; flex-direction: column; line-height: 1.15; }
.merek__teks strong { font-size: 1rem; font-weight: 800; }
.merek__teks small { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--teks-lembut); font-weight: 600; }
.navigasi { flex: 1; display: flex; justify-content: center; }
.navigasi__kepala, .navigasi .cari--seluler { display: none; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem; font-size: .875rem; }
.menu > li { position: relative; }
.menu a, .menu__grup { display: flex; align-items: center; gap: .25rem; padding: .4rem .6rem; white-space: nowrap; border-radius: var(--radius-kecil); color: var(--teks); text-decoration: none; font-weight: 500; transition: background .15s; }
.menu a:hover, .menu__grup:hover { background: var(--latar-3); }
.menu__grup { border: 0; background: transparent; font: inherit; font-size: inherit; cursor: pointer; }
.menu__grup--aktif { color: var(--primer); font-weight: 600; }
.menu a[aria-current] { background: var(--latar-3); color: var(--primer); font-weight: 600; }
.menu__panah { transition: transform .15s; }
.punya-sub:hover .menu__panah, .punya-sub:focus-within .menu__panah { transform: rotate(180deg); }
.submenu { display: none; position: absolute; left: 0; top: 100%; min-width: 13rem; list-style: none; margin: 0; padding: .25rem; background: var(--latar); border: 1px solid var(--garis); border-radius: var(--radius); box-shadow: var(--bayang); z-index: 50; }
.punya-sub:hover .submenu, .punya-sub:focus-within .submenu { display: block; }
.cari { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.cari input { height: 2rem; width: 11rem; padding: 0 .75rem; border: 1px solid var(--latar-2); border-radius: var(--radius-kecil); background: var(--latar); color: var(--teks); font: inherit; font-size: .875rem; }
.cari button { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: var(--radius-kecil); background: transparent; color: var(--teks); cursor: pointer; }
.cari button:hover { background: var(--latar-3); }
.cari--besar { margin: 1rem 0; }
.cari--besar input { flex: 1; width: auto; height: 2.75rem; font-size: 1rem; }
.cari--besar button { height: 2.75rem; width: auto; padding: 0 1.2rem; background: var(--primer); color: var(--primer-teks); font: inherit; font-weight: 600; }
.cari--besar button:hover { background: var(--primer); filter: brightness(1.08); }
.menu-buka { position: absolute; opacity: 0; pointer-events: none; }
.tirai { display: none; }

/* Hero beranda */
.hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: 82vh; overflow: hidden; color: #fff; text-align: center; background: radial-gradient(ellipse at top, oklch(40% .1 150), oklch(18% .04 160)); }
.hero__latar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / .7), rgb(0 0 0 / .55), rgb(0 0 0 / .8)); z-index: 1; }
.hero::after { content: ""; position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 22px 22px; z-index: 1; pointer-events: none; }
.hero__isi { position: relative; z-index: 2; padding: 0 16px; }
.hero__logo { display: grid; place-items: center; width: 7rem; height: 7rem; margin: 0 auto 1.25rem; border-radius: 999px; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero__logo img { width: 5rem; height: 5rem; object-fit: contain; }
.hero h1 { margin-top: 1.5rem; font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.hero__slogan { margin: .75rem 0 0; font-size: clamp(.875rem, 1.5vw, 1rem); font-weight: 600; text-transform: uppercase; letter-spacing: .25em; color: rgb(255 255 255 / .8); }
.hero__gulir { position: absolute; z-index: 2; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: rgb(255 255 255 / .7); }
.hero__gulir:hover { color: #fff; }

/* Bagian beranda */
.bagian { padding-top: 3.5rem; padding-bottom: 3.5rem; scroll-margin-top: 5rem; }
.bagian--latar { background: var(--latar-2); }
.bagian__kepala { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .75rem; margin-bottom: 2rem; }
.bagian__kepala h2 { margin: 0; }
.bagian__kepala p { margin: .25rem 0 0; color: var(--teks-lembut); }
.bagian__kepala > a { color: var(--primer); font-weight: 600; text-decoration: none; }
.bagian__kepala > a:hover { text-decoration: underline; }

/* Kartu berita */
.grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kartu { border: 1px solid var(--garis); border-radius: var(--radius); overflow: hidden; background: var(--latar); transition: transform .2s, box-shadow .2s; }
.kartu:hover { transform: translateY(-4px); box-shadow: var(--bayang); }
.kartu__gambar { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--latar-3); }
.kartu__gambar img, .kartu__kosong { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.kartu:hover .kartu__gambar img { transform: scale(1.05); }
.kartu__isi { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.kartu h3 { margin: 0; line-height: 1.35; }
.kartu h3 a { color: var(--teks); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; }
.kartu h3 a:hover { color: var(--primer); }
.label { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--peringatan); color: var(--peringatan-teks); }
.label--sorotan { background: var(--peringatan); color: var(--peringatan-teks); }
.meta { color: var(--teks-lembut); font-size: .875rem; margin: 0; }

/* Galeri bergaya masonry (CSS columns) */
.masonry { columns: 2; column-gap: .75rem; }
.masonry__item { position: relative; display: block; margin-bottom: .75rem; break-inside: avoid; overflow: hidden; border-radius: var(--radius); background: var(--latar-3); }
.masonry__item img { width: 100%; transition: transform .3s; }
.masonry__item .kartu__kosong { aspect-ratio: 4/3; }
.masonry__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .55), transparent); opacity: 0; transition: opacity .2s; pointer-events: none; }
.masonry__judul { position: absolute; left: .5rem; right: .5rem; bottom: .5rem; z-index: 1; color: #fff; font-size: .75rem; font-weight: 500; opacity: 0; transition: opacity .2s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.masonry__item:hover img { transform: scale(1.05); }
.masonry__item:hover::after, .masonry__item:hover .masonry__judul, .masonry__item:focus-visible::after, .masonry__item:focus-visible .masonry__judul { opacity: 1; }
@media (min-width: 640px) { .masonry { column-gap: 1rem; } .masonry__item { margin-bottom: 1rem; } }
@media (min-width: 768px) { .masonry { columns: 3; } .bagian { padding-top: 5rem; padding-bottom: 5rem; } }
@media (min-width: 1024px) { .masonry { columns: 4; } }

/* Ajakan (CTA) */
.ajakan { background: var(--primer); color: var(--primer-teks); }
.ajakan__baris { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-top: 3rem; padding-bottom: 3rem; }
.ajakan h2 { font-size: 1.5rem; margin: 0; }
.ajakan p { margin: .25rem 0 0; opacity: .8; }
.ajakan__tombol { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Halaman isi */
.utama { padding-top: 2rem; padding-bottom: 4rem; }
.utama > section, .utama > .artikel { margin-bottom: 2.5rem; }
.utama > h1 { margin-bottom: .75rem; }
.sambutan, .layanan { background: var(--latar-3); padding: 1.5rem 1.75rem; border-left: 4px solid var(--primer); border-radius: var(--radius); }
.sambutan > :first-child { margin-top: 0; }
.sambutan > :last-child { margin-bottom: 0; }
.banner img { border-radius: var(--radius); }
.sorotan { display: grid; grid-template-columns: 3fr 2fr; gap: 1.5rem; align-items: center; background: var(--latar-3); border-radius: var(--radius); overflow: hidden; }
.sorotan__gambar { aspect-ratio: 16/9; display: block; }
.sorotan__gambar img, .sorotan__gambar .kartu__kosong { width: 100%; height: 100%; object-fit: cover; }
.sorotan__isi { padding: 1rem 1.25rem 1rem 0; }
.sorotan__isi h2 a { color: var(--teks); text-decoration: none; }
.pengantar { font-size: 1.08rem; color: var(--teks-lembut); margin-top: 0; }
.artikel { max-width: 780px; }
.artikel__gambar { margin: 1.25rem 0; }
.artikel__gambar img, .blok-gambar img { border-radius: var(--radius); }
.isi { line-height: 1.75; }
.isi figure { margin: 1.25rem 0; }
.isi figcaption, .galeri figcaption { font-size: .85rem; color: var(--teks-lembut); margin-top: .4rem; }
.isi blockquote { border-left: 4px solid var(--primer); margin: 1.25rem 0; padding: .3rem 1rem; color: var(--teks-lembut); }
.blok-video { aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; }
.blok-video iframe { width: 100%; height: 100%; border: 0; }
.remah { font-size: .85rem; color: var(--teks-lembut); margin-bottom: .75rem; }
.remah a { color: var(--teks-lembut); text-decoration: none; }
.remah a:hover { color: var(--primer); }
.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; }
.filter a { padding: .3rem .9rem; border: 1px solid var(--latar-2); border-radius: 999px; text-decoration: none; font-size: .875rem; font-weight: 500; color: var(--teks); }
.filter a:hover { border-color: var(--primer); color: var(--primer); }
.filter a[aria-current] { background: var(--primer); color: var(--primer-teks); border-color: var(--primer); }
.dua-kolom { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; align-items: start; }
.samping { border: 1px solid var(--garis); border-radius: var(--radius); padding: 1.25rem; position: sticky; top: 5rem; }
.samping h2 { font-size: 1.1rem; }
.hasil { padding-left: 1.2rem; }
.hasil li { margin: .5rem 0; }
.paginasi { display: flex; justify-content: space-between; align-items: center; margin: 2rem 0; gap: 1rem; font-size: .9rem; }
.paginasi a { padding: .45rem 1rem; border: 1px solid var(--latar-2); border-radius: var(--radius-kecil); text-decoration: none; font-weight: 600; }
.paginasi a:hover { border-color: var(--primer); }
.sub-halaman { margin-top: 2rem; border-top: 1px solid var(--garis); padding-top: 1rem; }
.galeri figure { margin: 0; }
.galeri img { border-radius: var(--radius); }

/* Formulir */
.formulir p { margin: 0 0 1rem; }
.formulir label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .9rem; }
.formulir input, .formulir textarea, .formulir select { width: 100%; padding: .6rem .8rem; border: 1px solid var(--latar-2); border-radius: var(--radius-kecil); background: var(--latar); color: var(--teks); font: inherit; }
.formulir textarea { min-height: 8rem; }
.formulir button { min-height: 2.75rem; padding: 0 1.25rem; background: var(--primer); color: var(--primer-teks); border: 0; border-radius: var(--radius-kecil); font: inherit; font-weight: 600; cursor: pointer; }
.formulir .galat { color: var(--galat); display: block; font-size: .875rem; }
.tersembunyi { position: absolute; left: -9999px; }

/* Kaki */
.kaki { border-top: 1px solid var(--garis); background: var(--latar); }
.kaki__kolom { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-top: 3rem; padding-bottom: 3rem; }
.kaki__merek p { margin: .75rem 0 0; font-size: .875rem; color: var(--teks-lembut); }
.kaki h2 { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }
.kaki .polos { font-size: .875rem; }
.kaki .polos a, .kaki .polos li { color: color-mix(in oklch, var(--teks) 75%, var(--latar)); text-decoration: none; }
.kaki a:hover { color: var(--primer); }
.sosial { display: flex; flex-wrap: wrap; gap: .5rem; }
.sosial a { padding: .2rem .7rem; border: 1px solid var(--latar-2); border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--teks-lembut); text-decoration: none; }
.kaki__bawah { border-top: 1px solid color-mix(in oklch, var(--teks) 10%, transparent); font-size: .75rem; color: color-mix(in oklch, var(--teks) 80%, var(--latar)); }
.kaki__bawah-baris { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-top: 1rem; padding-bottom: 1rem; }

/* Tablet: kolom kaki 2 */
@media (max-width: 1023px) {
  .kaki__kolom { grid-template-columns: 1fr 1fr; }
  .kaki__merek { grid-column: 1 / -1; }
}

/* Seluler: menu jadi laci samping (checkbox, tanpa JS) */
@media (max-width: 1023px) {
  /* backdrop-filter membuat laci fixed terkurung di header, jadi dimatikan di seluler */
  .kepala { background: var(--latar); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .menu-buka:checked ~ .kepala { z-index: 50; }
  .kepala__burger { display: inline-grid; margin-left: -.5rem; }
  .kepala__aksi { margin-left: auto; }
  .kepala__aksi .cari { display: none; }
  .merek__logo-header { height: 32px; }
  .navigasi { position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: min(20rem, 85vw); flex-direction: column; justify-content: flex-start; background: var(--latar); border-right: 1px solid var(--latar-3); overflow-y: auto; transform: translateX(-100%); visibility: hidden; transition: transform .25s, visibility .25s; }
  .menu-buka:checked ~ .kepala .navigasi { transform: none; visibility: visible; }
  .menu-buka:checked ~ .tirai { display: block; position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / .4); }
  .navigasi__kepala { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--latar-3); }
  .navigasi .cari--seluler { display: flex; padding: 1rem 1rem 0; }
  .cari--seluler input { flex: 1; width: auto; }
  .navigasi .menu { flex-direction: column; flex-wrap: nowrap; padding: 1rem; gap: .25rem; }
  .navigasi .menu a, .navigasi .menu__grup { padding: .55rem .75rem; }
  .navigasi .menu__grup { cursor: default; font-weight: 600; }
  .navigasi .menu__panah { display: none; }
  .navigasi .submenu { display: block; position: static; border: 0; box-shadow: none; padding: 0 0 0 1rem; margin: .1rem 0 .1rem .75rem; border-left: 1px solid var(--latar-2); border-radius: 0; min-width: 0; }
}
@media (max-width: 767px) {
  .sorotan, .dua-kolom { grid-template-columns: 1fr; }
  .sorotan__isi { padding: 0 1rem 1rem; }
  .samping { position: static; }
  .ajakan__baris { flex-direction: column; text-align: center; }
  .ajakan__tombol { justify-content: center; }
}
@media (max-width: 479px) {
  .kaki__kolom { grid-template-columns: 1fr; }
  .merek__teks small { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print { .kepala, .kaki, .cari, .bagikan, .ajakan, .hero__gulir { display: none; } .hero { min-height: 0; color: inherit; } }

/* ===========================================================================
   Halaman dalam (mengikuti CMS Infolahtad V2): pita judul, sidebar kotak, profil, galeri, kontak
   =========================================================================== */
.pita { background: var(--latar-2); border-bottom: 1px solid var(--garis); }
.pita__isi { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pita h1 { margin: .5rem 0 0; font-size: clamp(1.875rem, 3.2vw, 2.25rem); letter-spacing: -.02em; }
.pita__sub { margin: .25rem 0 0; color: var(--teks-lembut); }
.pita__teks { margin: 1rem 0 0; max-width: 48rem; }
.pita__baris { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.remah { margin: 0; }
.remah ol { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.remah li + li::before { content: "/"; margin-right: .25rem; opacity: .6; }
.bagian--atas { margin-top: 2.5rem; }
.bagian--latar-lembut { background: color-mix(in oklch, var(--latar-2) 60%, var(--latar)); }
.kosong { padding: 3rem 0; text-align: center; color: var(--teks-lembut); grid-column: 1 / -1; }
.tumpuk > * + * { margin-top: 3rem; }
.judul-batang { display: flex; align-items: center; gap: .75rem; font-size: 1.25rem; margin: 0 0 1.5rem; }
.judul-batang > span { width: .375rem; height: 1.25rem; border-radius: 999px; background: var(--primer); }
.judul-batang--redup > span { background: color-mix(in oklch, var(--teks) 30%, transparent); }
.kepala-tengah { max-width: 40rem; margin: 0 auto 2.5rem; text-align: center; }
.kepala-tengah p, .kepala-kiri p { margin: .5rem 0 0; color: var(--teks-lembut); }
.kepala-kiri { max-width: 40rem; margin-bottom: 2.5rem; }
.label-kecil { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--primer); }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
/* Label kategori: warna tetap per kategori (filter |warna) */
.label--k0 { background: var(--sukses); color: #fff; }
.label--k1 { background: oklch(70% .2 200); color: oklch(18% .03 200); }
.label--k2 { background: var(--peringatan); color: var(--peringatan-teks); }
.label--k3 { background: oklch(65% .2 320); color: #fff; }
.label--k4 { background: var(--galat); color: #fff; }
.label--primer { background: var(--primer); color: var(--primer-teks); }
.label--merah { background: var(--galat); color: #fff; }
.lencana { display: inline-grid; place-items: center; min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--latar-3); font-size: .75rem; font-weight: 600; color: var(--teks-lembut); }
/* Daftar berita: kartu sorotan + sidebar kotak */
.dua-kolom--lebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.sorotan-kartu { display: grid; grid-template-columns: 2fr 3fr; margin-bottom: 2rem; border: 1px solid var(--garis); border-radius: var(--radius); overflow: hidden; background: var(--latar); color: var(--teks); text-decoration: none; transition: box-shadow .2s; }
.sorotan-kartu:hover { box-shadow: var(--bayang); }
.sorotan-kartu__gambar { margin: 0; min-height: 14rem; overflow: hidden; background: var(--latar-3); }
.sorotan-kartu__gambar img, .sorotan-kartu__gambar .kartu__kosong { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform .3s; }
.sorotan-kartu:hover img { transform: scale(1.05); }
.sorotan-kartu__isi { padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.sorotan-kartu__label { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--primer); }
.sorotan-kartu h2 { font-size: 1.25rem; margin: 0; }
.sorotan-kartu:hover h2 { color: var(--primer); }
.sorotan-kartu__ringkas, .kartu__ringkas { margin: 0; font-size: .875rem; color: var(--teks-lembut); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kartu__ringkas { -webkit-line-clamp: 2; }
.samping:has(> .kotak) { border: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; position: static; }
.kotak { border: 1px solid var(--garis); border-radius: var(--radius); background: var(--latar); padding: 1.25rem; }
.kotak h2 { font-size: 1rem; margin: 0 0 .75rem; }
.kotak--besar { padding: 1.75rem; }
.kotak--besar > h2 { font-size: 1.25rem; margin-bottom: .25rem; }
.cari--kotak { height: 2.5rem; padding: 0 .75rem; gap: .5rem; border: 1px solid var(--latar-2); border-radius: var(--radius-kecil); color: var(--teks-lembut); }
.cari--kotak:focus-within { border-color: var(--primer); }
.cari--kotak input { flex: 1; width: auto; height: 100%; border: 0; padding: 0; background: transparent; outline: none; }
.daftar-hitung { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.daftar-hitung li + li { border-top: 1px solid var(--garis); }
.daftar-hitung a { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; color: var(--teks); text-decoration: none; }
.daftar-hitung a:hover { color: var(--primer); }
.daftar-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.daftar-mini a { display: flex; gap: .75rem; color: var(--teks); text-decoration: none; }
.daftar-mini__gambar { flex-shrink: 0; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-kecil); overflow: hidden; background: var(--latar-3); }
.daftar-mini__gambar img { width: 100%; height: 100%; object-fit: cover; }
.daftar-mini strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .875rem; font-weight: 600; line-height: 1.35; }
.daftar-mini small { display: block; margin-top: .25rem; font-size: .75rem; color: var(--teks-lembut); }
.daftar-mini a:hover strong { color: var(--primer); }
/* Artikel: hero penuh, bagikan, kotak penulis */
.hero-artikel { position: relative; display: flex; align-items: flex-end; min-height: 56vh; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--primer), oklch(45% .2 160)); }
.hero-artikel__latar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.hero-artikel::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(0 0 0 / .85), rgb(0 0 0 / .45), rgb(0 0 0 / .25)); }
.hero-artikel__isi { position: relative; z-index: 2; padding-top: 7rem; padding-bottom: 2.5rem; }
.hero-artikel .remah, .hero-artikel .remah a { color: rgb(255 255 255 / .75); }
.hero-artikel .remah a:hover { color: #fff; }
.hero-artikel .label { margin-top: .75rem; }
.hero-artikel h1 { max-width: 56rem; margin: .75rem 0 0; font-size: clamp(1.875rem, 4.5vw, 3rem); line-height: 1.15; text-shadow: 0 2px 8px rgb(0 0 0 / .3); }
.hero-artikel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin: 1.25rem 0 0; font-size: .875rem; color: rgb(255 255 255 / .85); }
.hero-artikel__meta > * { display: inline-flex; align-items: center; gap: .4rem; }
.hero-artikel__meta .avatar { margin-right: -.75rem; }
.avatar { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--primer); color: var(--primer-teks); font-size: .8rem; font-weight: 700; flex-shrink: 0; }
.avatar--besar { width: 3.5rem; height: 3.5rem; font-size: 1.1rem; }
@media (min-width: 768px) { .hero-artikel { min-height: 62vh; } }
.artikel--tengah { max-width: 48rem; margin: 0 auto; }
.artikel__bagikan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--garis); }
.artikel__bagikan p { margin: 0; color: var(--teks-lembut); }
.artikel--tengah .isi { font-size: 1.125rem; }
.bagikan { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bagikan a { margin: 0; }
.bagikan__tombol, .bagikan__salin { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2rem; min-width: 2rem; border: 1px solid currentColor; border-radius: 999px; color: var(--teks); background: transparent; text-decoration: none; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.bagikan__salin { border-radius: var(--radius-kecil); padding: 0 .75rem; }
.bagikan__tombol:hover, .bagikan__salin:hover { background: var(--teks); color: var(--latar); border-color: var(--teks); }
.kotak-penulis { display: flex; align-items: flex-start; gap: 1rem; margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--garis); border-radius: var(--radius); background: color-mix(in oklch, var(--latar-2) 50%, var(--latar)); }
.kotak-penulis h2 { font-size: 1.125rem; margin: 0; }
.kotak-penulis p { margin: .25rem 0 0; font-size: .875rem; color: var(--teks-lembut); }
.kotak-penulis .kotak-penulis__label { margin: 0; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
/* Visi & misi, tugas & fungsi */
.figur-lebar { margin: 0; border: 1px solid var(--garis); border-radius: var(--radius); overflow: hidden; }
.figur-lebar img { width: 100%; }
.visi { max-width: 56rem; margin: 0 auto; padding: 3rem 1.5rem; border-radius: var(--radius); background: var(--primer); color: var(--primer-teks); text-align: center; }
.visi__label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; opacity: .7; }
.visi__kutip { display: block; margin: 1.25rem auto; opacity: .5; }
.visi p { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.35; }
.misi { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.misi li { display: flex; gap: 1rem; padding: 1.5rem; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--latar); }
.misi p { margin: 0; align-self: center; color: color-mix(in oklch, var(--teks) 85%, var(--latar)); }
.misi__no { display: grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--primer); color: var(--primer-teks); font-size: 1.125rem; font-weight: 800; }
.dua-sama { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.dua-sama .isi { margin-top: .75rem; }
.catatan { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1.5rem; padding: 1.25rem; border: 1px solid var(--garis); border-radius: var(--radius); background: color-mix(in oklch, var(--latar-2) 60%, var(--latar)); color: var(--primer); }
.catatan svg { flex-shrink: 0; }
.catatan p { margin: 0; font-size: .875rem; color: var(--teks-lembut); }
.daftar-centang { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }
.daftar-centang li { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--latar); }
.daftar-centang svg { flex-shrink: 0; margin-top: .15rem; color: var(--primer); }
.daftar-centang--rapat { gap: .5rem; }
.daftar-centang--rapat li { padding: 0; border: 0; background: none; font-size: .875rem; }
/* Pejabat & komandan */
.grid--orang { grid-template-columns: repeat(auto-fill, minmax(min(45%, 200px), 1fr)); }
.grid--orang-5 { grid-template-columns: repeat(auto-fill, minmax(min(45%, 170px), 1fr)); }
.kartu-orang { border: 1px solid var(--garis); border-radius: var(--radius); overflow: hidden; background: var(--latar); transition: transform .2s, box-shadow .2s; }
.kartu-orang:hover { transform: translateY(-4px); box-shadow: var(--bayang); }
.kartu-orang__foto { aspect-ratio: 3/4; overflow: hidden; background: var(--latar-2); }
.kartu-orang__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.kartu-orang:hover .kartu-orang__foto img { transform: scale(1.05); }
.kartu-orang__inisial { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2.5rem; color: color-mix(in oklch, var(--teks) 25%, transparent); }
.kartu-orang__isi { padding: .9rem; text-align: center; }
.kartu-orang h3 { font-size: .875rem; margin: 0; }
.kartu-orang__jabatan { margin: .25rem 0 0; font-size: .75rem; color: var(--primer); }
.sorot-orang { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; border: 2px solid var(--primer); border-radius: var(--radius); background: color-mix(in oklch, var(--primer) 5%, var(--latar)); }
.sorot-orang__foto { flex-shrink: 0; width: 11rem; height: 14rem; border-radius: var(--radius); overflow: hidden; background: var(--latar-2); }
.sorot-orang__foto img { width: 100%; height: 100%; object-fit: cover; }
.sorot-orang h2 { margin: .75rem 0 0; font-size: 1.5rem; }
.sorot-orang__sub { margin: .25rem 0 0; color: var(--primer); }
@media (max-width: 639px) { .sorot-orang { flex-direction: column; align-items: flex-start; } .sorot-orang__foto { align-self: center; } }
.bagan-gambar { max-width: 56rem; margin: 0 auto; }
.bagan-gambar a { display: block; border: 1px solid var(--garis); border-radius: var(--radius); overflow: hidden; background: var(--latar); }
.bagan-gambar img { width: 100%; object-fit: contain; }
.bagan-gambar figcaption { margin-top: .75rem; text-align: center; font-size: .875rem; color: var(--teks-lembut); }
/* Galeri foto & video */
a.kartu { display: block; color: var(--teks); text-decoration: none; }
.kartu__judul { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; line-height: 1.35; transition: color .15s; }
a.kartu:hover .kartu__judul { color: var(--primer); }
.kartu--album .kartu__gambar { position: relative; aspect-ratio: 4/3; }
.kartu--album .kartu__isi, .kartu--video .kartu__isi { padding: 1rem; gap: .25rem; }
.lencana-foto { position: absolute; left: .75rem; top: .75rem; display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .6rem; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; font-size: .75rem; font-weight: 700; backdrop-filter: blur(4px); }
.masonry--album .masonry__item::after { background: rgb(0 0 0 / .2); }
.video__putar.video__putar--bulat { width: 4rem; height: 4rem; border-radius: 999px; background: rgb(255 255 255 / .9); box-shadow: var(--bayang); transition: transform .2s; }
.video__putar.video__putar--bulat::after { left: 1.6rem; top: 1.3rem; border-width: .7rem 0 .7rem 1.15rem; border-color: transparent transparent transparent var(--primer); }
.video__putar.video__putar--kecil { width: 3rem; height: 3rem; opacity: 0; }
.video__putar.video__putar--kecil::after { left: 1.2rem; top: .95rem; border-width: .55rem 0 .55rem .9rem; }
.kartu--video:hover .video__putar.video__putar--kecil { opacity: 1; background: rgb(255 255 255 / .9); }
.video-utama { position: relative; display: block; aspect-ratio: 16/9; margin-bottom: 2.5rem; border-radius: var(--radius); overflow: hidden; background: var(--latar-3); color: #fff; text-decoration: none; }
.video-utama img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.video-utama::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .7), rgb(0 0 0 / .1), rgb(0 0 0 / .2)); }
.video-utama .video__putar { z-index: 1; }
.video-utama:hover img { transform: scale(1.05); }
.video-utama:hover .video__putar.video__putar--bulat { transform: translate(-50%, -50%) scale(1.1); background: #fff; }
.video-utama__teks { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.25rem; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.video-utama__teks strong { font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.3; }
.video-utama__jumlah { position: absolute; left: 1rem; top: 1rem; z-index: 1; padding: .25rem .65rem; border-radius: 999px; background: var(--galat); color: #fff; font-size: .75rem; font-weight: 700; }
.playlist { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.playlist .video-utama { margin: 0; }
.playlist__daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.playlist__daftar a { display: flex; gap: .75rem; color: var(--teks); text-decoration: none; }
.playlist__gambar { flex-shrink: 0; width: 9rem; aspect-ratio: 16/9; border-radius: var(--radius-kecil); overflow: hidden; background: var(--latar-3); }
.playlist__gambar img { width: 100%; height: 100%; object-fit: cover; }
.playlist__daftar strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .875rem; line-height: 1.35; }
.playlist__daftar small { display: block; margin-top: .25rem; font-size: .75rem; color: var(--teks-lembut); }
.playlist__daftar a:hover strong { color: var(--primer); }
@media (max-width: 1023px) { .playlist { grid-template-columns: 1fr; } }
.video-detail__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.video-detail__meta p { margin: 0; color: var(--teks-lembut); }
/* Teks berjalan pengumuman */
.ticker { border-top: 1px solid var(--latar-3); border-bottom: 1px solid var(--latar-3); background: var(--latar); }
.ticker__baris { display: flex; align-items: center; gap: .75rem; }
.ticker__label { flex-shrink: 0; padding: .25rem .65rem; border-radius: var(--radius-kecil); background: var(--primer); color: var(--primer-teks); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ticker__jendela { position: relative; flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); }
.ticker__jalur { display: flex; width: max-content; animation: ticker-jalan 40s linear infinite; }
.ticker__jendela:hover .ticker__jalur, .ticker__jendela:focus-within .ticker__jalur { animation-play-state: paused; }
.ticker__grup { display: flex; align-items: center; }
.ticker__item { display: flex; align-items: center; padding: .65rem 2.5rem .65rem 0; white-space: nowrap; font-size: .875rem; }
.ticker__item a { color: var(--teks); font-weight: 500; text-decoration: none; }
.ticker__item a:hover { text-decoration: underline; }
.ticker__titik { width: .375rem; height: .375rem; margin-right: .75rem; border-radius: 999px; background: var(--primer); }
@keyframes ticker-jalan { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__jendela { overflow-x: auto; mask-image: none; }
  .ticker__jalur { animation: none; }
  .ticker__grup[aria-hidden] { display: none; }
}
/* Link satuan jajaran */
.grid--jajaran { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.25rem; }
.kartu-jajaran { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--latar); color: var(--teks); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.kartu-jajaran:hover { transform: translateY(-4px); box-shadow: var(--bayang); border-color: color-mix(in oklch, var(--primer) 40%, transparent); }
.kartu-jajaran__inisial { display: grid; place-items: center; flex-shrink: 0; width: 3rem; height: 3rem; border-radius: var(--radius); background: var(--latar-2); font-size: 1.125rem; font-weight: 700; color: var(--teks-lembut); }
.kartu-jajaran__isi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kartu-jajaran__isi strong { line-height: 1.3; }
.kartu-jajaran__isi small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; color: var(--primer); }
.kartu-jajaran__isi .kartu-jajaran__hub { font-size: .75rem; color: var(--teks-lembut); }
.kartu-jajaran__panah { flex-shrink: 0; color: color-mix(in oklch, var(--teks) 30%, transparent); transition: color .2s; }
.kartu-jajaran:hover .kartu-jajaran__panah { color: var(--primer); }
.bagian-jajaran { margin-top: 2rem; }
/* Kontak */
.kontak { display: grid; gap: 2rem; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
.kontak__info { display: flex; flex-direction: column; gap: 1rem; }
.kotak-info { display: flex; gap: 1rem; padding: 1.25rem; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--latar); color: var(--teks); text-decoration: none; }
.kotak-info h2 { font-size: 1rem; margin: 0; }
.kotak-info p { margin: .25rem 0 0; font-size: .875rem; color: var(--teks-lembut); overflow-wrap: anywhere; }
.kotak-info p a { color: inherit; text-decoration: none; }
.kotak-info p a:hover { color: var(--primer); }
.kotak-info__ikon { display: grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: var(--radius); background: color-mix(in oklch, var(--primer) 10%, transparent); color: var(--primer); }
.kotak-info--tautan:hover { border-color: var(--sukses); background: color-mix(in oklch, var(--sukses) 5%, var(--latar)); }
.kontak__pengantar { color: var(--teks-lembut); font-size: .875rem; }
.kontak .formulir { margin-top: 1.5rem; }
.formulir__kaki { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
@media (max-width: 1023px) { .kontak { grid-template-columns: 1fr; } }
/* Rekrutmen */
.hero-rekrutmen { position: relative; display: flex; align-items: center; min-height: 42vh; color: #fff; background: linear-gradient(to right, rgb(0 0 0 / .8), rgb(0 0 0 / .45)), oklch(30% .02 250); }
.hero-rekrutmen__isi { padding-top: 4rem; padding-bottom: 4rem; }
.hero-rekrutmen .remah, .hero-rekrutmen .remah a { color: rgb(255 255 255 / .75); }
.hero-rekrutmen .label { margin-top: 1rem; }
.hero-rekrutmen h1 { max-width: 42rem; margin: .75rem 0 0; font-size: clamp(1.875rem, 4.5vw, 3rem); line-height: 1.15; }
.hero-rekrutmen p { max-width: 36rem; margin: .75rem 0 0; color: rgb(255 255 255 / .85); }
.kartu-jalur { display: flex; flex-direction: column; align-items: flex-start; padding: 1.5rem; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--latar); }
.kartu-jalur__ikon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius); background: color-mix(in oklch, var(--primer) 10%, transparent); color: var(--primer); }
.kartu-jalur h3 { margin: 1rem 0 0; font-size: 1.125rem; }
.kartu-jalur p { margin: .25rem 0 1rem; font-size: .875rem; color: var(--teks-lembut); }
.kartu-jalur .tombol { margin-top: auto; min-height: 2rem; font-size: .8rem; }
.tombol--garis-gelap { border-color: var(--teks); color: var(--teks); }
.tombol--garis-gelap:hover { background: var(--teks); color: var(--latar); }
.tombol:not([class*="tombol--"]) { background: var(--primer); color: var(--primer-teks); }
.rekrutmen-info { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: 3rem; padding: 1.5rem; border: 1px solid var(--garis); border-radius: var(--radius); background: color-mix(in oklch, var(--latar-2) 50%, var(--latar)); }
.rekrutmen-info h3 { font-size: 1.125rem; margin: 0; }
.rekrutmen-info__daftar { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1.5rem; border-radius: var(--radius); background: var(--latar); text-align: center; }
.rekrutmen-info__daftar p { margin: .5rem 0 1rem; font-size: .875rem; color: var(--teks-lembut); }
@media (max-width: 767px) {
  .dua-kolom--lebar, .sorotan-kartu { grid-template-columns: 1fr; }
  .pita__isi { padding-top: 2rem; padding-bottom: 2rem; }
}
/* Video latar beranda & semboyan */
.hero__video { object-fit: cover; }
.banner { position: relative; }
.banner--video { aspect-ratio: 3 / 1; overflow: hidden; border-radius: var(--radius); background: #000; }
.banner--video video, .banner__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.banner__semboyan { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.5rem 1.25rem 1rem; background: linear-gradient(to top, rgb(0 0 0 / .65), transparent); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; font-size: clamp(.8rem, 1.6vw, 1rem); text-align: center; border-radius: 0 0 var(--radius) var(--radius); }
.semboyan-beranda { margin: 0 0 1.5rem; text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--primer); }
@media (prefers-reduced-motion: reduce) { .hero__video, .banner--video video { display: none; } }
/* Pita untuk admin saat mode pemeliharaan aktif (hanya tampil bagi admin yang login; halaman tidak dicache) */
.pita-pemeliharaan { position: sticky; top: 0; z-index: 60; padding: .6rem 16px; background: var(--peringatan); color: var(--peringatan-teks); font-size: .875rem; text-align: center; }
.pita-pemeliharaan a { color: inherit; font-weight: 700; margin-left: .5rem; }
/* ===========================================================================
   Bilah menu bersama untuk tema dengan header dua baris (Klasik, Portal)
   =========================================================================== */
.bilah-menu .menu { gap: 0; }
.bilah-menu .menu a, .bilah-menu .menu__grup { color: #fff; border-radius: 0; padding: .65rem .9rem; }
.bilah-menu .menu a:hover, .bilah-menu .menu a[aria-current], .bilah-menu .menu__grup:hover, .bilah-menu .menu__grup--aktif { background: rgb(255 255 255 / .12); color: #fff; }
.bilah-menu .submenu { background: inherit; border: 0; border-radius: 0; padding: .3rem 0; }
.bilah-menu .submenu a { font-weight: 500; }
@media (max-width: 800px) {
  .bilah-menu .menu { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bilah-menu .menu a { white-space: nowrap; }
  /* Layar sempit: menu jadi satu baris geser tanpa dropdown; anggota kelompok tampil langsung sebagai item */
  .bilah-menu .punya-sub:has(> .menu__grup), .bilah-menu .punya-sub:has(> .menu__grup) > .submenu { display: contents !important; }
  .bilah-menu .menu__grup { display: none; }
  .bilah-menu .menu__panah, .bilah-menu .submenu { display: none !important; }
}

/* ===========================================================================
   Tema Klasik — hijau TNI AD & emas, sudut kecil, font sistem
   =========================================================================== */
.tema-klasik {
  --latar: #fff; --latar-2: #d9ddd7; --latar-3: #f4f6f3;
  --teks: #1d1d1d; --teks-lembut: #5a5a5a; --garis: #e2e2e2;
  --primer: #1f4d2b; --primer-tua: #163a20; --primer-teks: #fff; --emas: #c9a227;
  --peringatan: #c9a227; --peringatan-teks: #1d1d1d;
  --radius: 6px; --radius-kecil: 6px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.tema-klasik h1 { font-weight: 700; }
.tema-klasik h2 { font-size: 1.35rem; }
.kepala-k { background: var(--primer); color: #fff; }
.kepala-k__baris { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: .8rem; padding-bottom: .8rem; }
.kepala-k .merek { color: #fff; }
.kepala-k .merek__logo { width: 56px; height: 56px; }
.kepala-k .merek__teks strong { font-size: 1.15rem; font-weight: 700; }
.kepala-k .merek__teks small { color: rgb(255 255 255 / .85); text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 400; }
.kepala-k .cari input { height: 2.3rem; border-color: transparent; background: #fff; color: #1d1d1d; width: 13rem; }
.kepala-k .cari button { height: 2.3rem; width: 2.6rem; background: var(--emas); color: #1d1d1d; }
.kepala-k .cari button:hover { background: var(--emas); filter: brightness(1.08); }
.tema-klasik .bilah-menu { background: var(--primer-tua); }
.tema-klasik .bilah-menu .menu { font-size: .95rem; }
.tema-klasik .utama { padding-top: 1.5rem; }
.tema-klasik .bagian__kepala { align-items: baseline; border-bottom: 3px solid var(--primer); margin-bottom: 1rem; }
.tema-klasik .bagian__kepala h2 { padding-bottom: .3rem; }
.tema-klasik .label { background: none; padding: 0; border-radius: 0; color: var(--primer); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.tema-klasik .label--sorotan { background: var(--emas); color: #1d1d1d; padding: .1rem .5rem; border-radius: 3px; }
.tema-klasik .kartu:hover { transform: none; box-shadow: 0 4px 14px rgb(0 0 0 / .1); }
.tema-klasik .kartu__gambar { aspect-ratio: 16/9; }
.tema-klasik .kartu__isi { padding: .8rem .9rem 1rem; }
.tema-klasik .sambutan, .tema-klasik .layanan { border-left-color: var(--emas); }
.tema-klasik .filter a[aria-current] { color: #fff; }
.tema-klasik .kaki { background: var(--primer-tua); color: #e9efe9; border-top: 0; margin-top: 2rem; }
.tema-klasik .kaki .merek, .tema-klasik .kaki a, .tema-klasik .kaki .polos a, .tema-klasik .kaki .polos li { color: #fff; }
.tema-klasik .kaki a:hover { color: var(--emas); }
.tema-klasik .kaki h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--emas); }
.tema-klasik .kaki__merek p, .tema-klasik .kaki .merek__teks small { color: rgb(233 239 233 / .8); }
.tema-klasik .sosial a { border-color: rgb(255 255 255 / .3); }
.tema-klasik .kaki__bawah { border-top-color: rgb(255 255 255 / .15); color: #e9efe9; }
@media (max-width: 800px) {
  .kepala-k .cari { width: 100%; }
  .kepala-k .cari input { flex: 1; width: auto; }
}

/* ===========================================================================
   Tema Portal Berita — biru tua & merah, judul serif, tata letak padat
   =========================================================================== */
.tema-portal {
  --latar: #fff; --latar-2: #d6dae1; --latar-3: #f1f3f6;
  --teks: #111827; --teks-lembut: #5b6475; --garis: #e5e7eb;
  --primer: #b91c1c; --primer-teks: #fff; --navy: #0f1f3d; --navy-tua: #0a1630;
  --peringatan: #b91c1c; --peringatan-teks: #fff;
  --radius: 4px; --radius-kecil: 4px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.tema-portal h1, .tema-portal h2, .tema-portal h3 { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0; }
.strip-atas { background: var(--navy-tua); color: #cbd5e1; font-size: .78rem; }
.strip-atas__baris { display: flex; justify-content: space-between; gap: 1rem; padding-top: .35rem; padding-bottom: .35rem; }
.strip-atas__tautan { display: flex; gap: 1rem; }
.strip-atas a { color: #e2e8f0; text-decoration: none; }
.strip-atas a:hover { color: #fff; text-decoration: underline; }
.kepala-p { background: var(--latar); }
.kepala-p__baris { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1rem; padding-bottom: 1rem; }
.kepala-p .merek__logo { width: 64px; height: 64px; }
.kepala-p .merek__teks strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; font-weight: 700; color: var(--navy); }
.kepala-p .merek__teks small { color: var(--primer); font-size: .72rem; }
.kepala-p .cari input { height: 2.4rem; width: 15rem; border-color: var(--latar-2); }
.kepala-p .cari button { height: 2.4rem; width: 2.6rem; background: var(--navy); color: #fff; }
.kepala-p .cari button:hover { background: var(--primer); }
.tema-portal .bilah-menu { background: var(--navy); border-bottom: 3px solid var(--primer); }
.tema-portal .bilah-menu .menu a, .tema-portal .bilah-menu .menu__grup { text-transform: uppercase; font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.tema-portal .bilah-menu .menu a[aria-current] { background: var(--primer); }
.tema-portal .bilah-menu .submenu a { text-transform: none; font-size: .875rem; }
.tema-portal .label { background: var(--primer); color: #fff; border-radius: 2px; text-transform: uppercase; letter-spacing: .05em; font-size: .66rem; font-weight: 700; }
.tema-portal .bagian__kepala { align-items: center; margin-bottom: 1.2rem; padding-bottom: .5rem; border-bottom: 1px solid var(--garis); }
.tema-portal .bagian__kepala > a { color: var(--primer); font-size: .9rem; }
.judul-garis { font-size: 1.25rem; border-left: 4px solid var(--primer); padding-left: .6rem; line-height: 1.2; }
.tema-portal .kartu { border: 0; border-radius: 0; background: none; }
.tema-portal .kartu:hover { transform: none; box-shadow: none; }
.tema-portal .kartu__gambar { border-radius: var(--radius); }
.tema-portal .kartu__isi { padding: .75rem 0 0; }
.tema-portal .kartu h3 { font-size: 1.05rem; }
.tema-portal .kartu h3 a { -webkit-line-clamp: 3; }
.tema-portal .sambutan, .tema-portal .layanan { border-left-color: var(--primer); }
.tema-portal .filter a[aria-current] { color: #fff; }
/* Headline: berita utama besar + daftar terkini */
.headline { display: grid; grid-template-columns: 2fr 1fr; gap: 1.75rem; }
.headline__utama { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--navy); align-self: start; }
.headline__gambar { display: block; aspect-ratio: 16/10; }
.headline__gambar img, .headline__gambar .kartu__kosong { width: 100%; height: 100%; object-fit: cover; }
.headline__teks { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1.5rem 1.4rem; background: linear-gradient(to bottom, transparent, rgb(0 0 0 / .85)); color: #fff; }
.headline__teks h1 { font-size: clamp(1.35rem, 2.6vw, 2.1rem); margin: .5rem 0; }
.headline__teks h1 a { color: #fff; text-decoration: none; }
.headline__teks h1 a:hover { text-decoration: underline; }
.headline__teks .meta { color: #e5e7eb; }
.baris-berita { display: grid; grid-template-columns: 110px 1fr; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid var(--garis); }
.baris-berita:last-child { border-bottom: 0; }
.baris-berita__gambar { display: block; aspect-ratio: 3/2; border-radius: var(--radius); overflow: hidden; background: var(--latar-3); }
.baris-berita__gambar img, .baris-berita__gambar .kartu__kosong { width: 100%; height: 100%; object-fit: cover; }
.baris-berita h3 { font-size: .95rem; margin: 0 0 .2rem; line-height: 1.35; }
.baris-berita h3 a { color: var(--teks); text-decoration: none; }
.baris-berita h3 a:hover { color: var(--primer); }
.baris-berita .meta { font-size: .78rem; }
/* Strip foto kegiatan */
.strip-foto { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.strip-foto__item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--latar-3); }
.strip-foto__item img, .strip-foto__item .kartu__kosong { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.strip-foto__item:hover img { transform: scale(1.06); }
.strip-foto__item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem .5rem .45rem; background: linear-gradient(to bottom, transparent, rgb(0 0 0 / .75)); color: #fff; font-size: .72rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tema-portal .kaki { background: var(--navy); color: #cbd5e1; border-top: 3px solid var(--primer); }
.tema-portal .kaki .merek, .tema-portal .kaki .merek__teks strong { color: #fff; }
.tema-portal .kaki a, .tema-portal .kaki .polos a, .tema-portal .kaki .polos li { color: #e2e8f0; }
.tema-portal .kaki a:hover { color: #fff; }
.tema-portal .kaki h2 { color: #fff; text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; font-family: inherit; }
.tema-portal .kaki__merek p { color: #cbd5e1; }
.tema-portal .sosial a { border-color: rgb(255 255 255 / .25); }
.tema-portal .kaki__bawah { background: var(--navy-tua); border-top: 0; color: #94a3b8; }
@media (max-width: 900px) {
  .headline { grid-template-columns: 1fr; }
  .strip-foto { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .kepala-p .merek__teks strong { font-size: 1.2rem; }
  .kepala-p .cari { width: 100%; }
  .kepala-p .cari input { flex: 1; width: auto; }
  .strip-atas__baris > span:first-child { display: none; }
}
@media print { .kepala-k, .kepala-p, .strip-atas, .bilah-menu { display: none; } }

/* ===========================================================================
   Bagan struktur organisasi (otomatis dari data pejabat)
   =========================================================================== */
.bagan-bungkus { overflow-x: auto; padding: 1rem 0 1.5rem; }
.bagan, .bagan ul { list-style: none; margin: 0; padding: 1.5rem 0 0; display: flex; justify-content: center; position: relative; }
.bagan { padding-top: 0; }
.bagan li { position: relative; padding: 1.5rem .4rem 0; text-align: center; }
.bagan > li { padding-top: 0; }
.bagan li::before, .bagan li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 1.5rem; border-top: 2px solid var(--garis); }
.bagan li::after { right: auto; left: 50%; border-left: 2px solid var(--garis); }
.bagan li:only-child::before, .bagan li:only-child::after { border-top: 0; }
.bagan li:only-child { padding-top: 1.5rem; }
.bagan li:first-child::before, .bagan li:last-child::after { border: 0; }
.bagan li:last-child::before { border-right: 2px solid var(--garis); border-radius: 0 6px 0 0; }
.bagan li:first-child::after { border-radius: 6px 0 0 0; }
.bagan > li::before, .bagan > li::after { display: none; }
.bagan ul::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 1.5rem; background: var(--garis); }
.bagan__kotak { display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 9rem; max-width: 12rem; padding: .6rem .7rem; border: 1px solid var(--garis); border-radius: var(--radius-kecil); background: var(--latar); font-size: .78rem; line-height: 1.3; }
.bagan__kotak img { width: 44px; height: 55px; object-fit: cover; border-radius: 4px; }
.bagan__kotak strong { color: var(--primer); font-size: .8rem; }
.bagan__kotak--pimpinan { border-color: var(--primer); border-width: 2px; }

/* ===========================================================================
   Pengumuman & agenda (blok beranda, daftar, kalender)
   =========================================================================== */
.bagian--rapat { padding-top: 0; }
.info-satuan { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.pengumuman-daftar { list-style: none; margin: 0; padding: 0; }
.pengumuman-item { padding: .7rem 0 .7rem 1rem; border-left: 3px solid var(--latar-2); border-bottom: 1px solid var(--garis); }
.pengumuman-item:last-child { border-bottom: 0; }
.pengumuman-item--penting { border-left-color: var(--peringatan); }
.pengumuman-item--darurat { border-left-color: var(--galat); }
.pengumuman-item > a { display: block; color: var(--teks); font-weight: 600; text-decoration: none; }
.pengumuman-item > a:hover { color: var(--primer); }
.pengumuman-item .meta { display: block; font-size: .8rem; }
.pengumuman-item .label { margin-right: .4rem; }
.label--penting { background: var(--peringatan); color: var(--peringatan-teks); }
.label--darurat { background: var(--galat); color: #fff; }
.pengumuman-daftar--penuh .pengumuman-item { padding: 1rem 0 1rem 1.2rem; }
.pengumuman-daftar--penuh h2 { font-size: 1.15rem; margin: .3rem 0 .2rem; }
.pengumuman-daftar--penuh h2 a { color: var(--teks); text-decoration: none; }
.pengumuman-daftar--penuh h2 a:hover { color: var(--primer); }
.pengumuman-item__ringkas { color: var(--teks-lembut); font-size: .92rem; }
.agenda-daftar { list-style: none; margin: 0; padding: 0; }
.agenda-item { display: flex; gap: 1rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px solid var(--garis); }
.agenda-item:last-child { border-bottom: 0; }
.agenda-item__tanggal { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.4rem; padding: .35rem 0; border-radius: var(--radius-kecil); background: var(--primer); color: var(--primer-teks); line-height: 1.1; }
.agenda-item__tanggal strong { font-size: 1.35rem; }
.agenda-item__tanggal span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.agenda-item__isi h3 { font-size: 1rem; margin-bottom: .15rem; }
.agenda-item__isi h3 a { color: var(--teks); text-decoration: none; }
.agenda-item__isi h3 a:hover { color: var(--primer); }
.agenda-item__isi .meta { font-size: .82rem; }
.agenda-rincian { display: grid; gap: .6rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 1rem 0 1.5rem; padding: 1rem 1.2rem; background: var(--latar-3); border-radius: var(--radius); }
.agenda-rincian div { min-width: 0; }
.agenda-rincian dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--teks-lembut); }
.agenda-rincian dd { margin: 0; font-weight: 600; }
.tombol-kecil { display: inline-block; padding: .35rem .9rem; border: 1px solid var(--primer); border-radius: 999px; color: var(--primer); font-size: .85rem; font-weight: 600; text-decoration: none; }
.tombol-kecil:hover { background: var(--primer); color: var(--primer-teks); }
.kalender__nav { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 1rem 0 .75rem; }
.kalender__nav h2 { margin: 0; min-width: 12rem; text-align: center; }
.kalender__nav a { font-size: 1.4rem; text-decoration: none; padding: 0 .5rem; }
.kalender { width: 100%; border-collapse: collapse; table-layout: fixed; margin-bottom: 2rem; font-size: .82rem; }
.kalender th { padding: .4rem 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--teks-lembut); border-bottom: 2px solid var(--primer); }
.kalender__hari-singkat { display: none; }
.kalender td { vertical-align: top; height: 5.5rem; padding: .3rem; border: 1px solid var(--garis); }
.kalender__luar { background: var(--latar-3); color: var(--teks-lembut); }
.kalender__hari-ini .kalender__tanggal { background: var(--primer); color: var(--primer-teks); border-radius: 999px; }
.kalender__tanggal { display: inline-block; min-width: 1.6rem; padding: .1rem .3rem; text-align: center; font-weight: 700; }
.kalender__acara { --warna-kat: var(--primer); display: block; margin-top: .25rem; padding: .15rem .35rem; border-left: 3px solid var(--warna-kat); border-radius: 3px; background: var(--latar-3); color: var(--teks); text-decoration: none; font-size: .75rem; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kalender__acara:hover { background: var(--latar-2); }
.kalender__acara small { color: var(--teks-lembut); }
@media (max-width: 800px) {
  .info-satuan { grid-template-columns: 1fr; gap: 1.25rem; }
  .kalender td { height: auto; min-height: 3rem; padding: .15rem; }
  .kalender__hari-penuh { display: none; }
  .kalender__hari-singkat { display: inline; }
  .kalender__acara { font-size: .62rem; }
  .kalender__acara small { display: none; }
}

/* ===========================================================================
   Dokumen & unduhan
   =========================================================================== */
.dokumen-daftar { list-style: none; margin: 0; padding: 0; }
.dokumen-item { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--garis); }
.dokumen-item:last-child { border-bottom: 0; }
.dokumen-item__ikon { display: grid; place-items: center; width: 3.2rem; height: 3.8rem; border-radius: var(--radius-kecil); background: var(--latar-3); color: var(--teks-lembut); font-size: .7rem; font-weight: 800; letter-spacing: .04em; border-top: 4px solid var(--teks-lembut); }
.dokumen-item__ikon[data-ext="pdf"] { border-top-color: #dc2626; color: #dc2626; }
.dokumen-item__ikon[data-ext="docx"], .dokumen-item__ikon[data-ext="doc"] { border-top-color: #2563eb; color: #2563eb; }
.dokumen-item__ikon[data-ext="xlsx"], .dokumen-item__ikon[data-ext="xls"] { border-top-color: #16a34a; color: #16a34a; }
.dokumen-item__ikon[data-ext="pptx"] { border-top-color: #d97706; color: #d97706; }
.dokumen-item__isi { min-width: 0; }
.dokumen-item h2 { font-size: 1.02rem; margin: 0 0 .15rem; }
.dokumen-item h2 a { color: var(--teks); text-decoration: none; }
.dokumen-item h2 a:hover { color: var(--primer); }
.dokumen-item__keterangan { margin: .25rem 0 0; font-size: .9rem; color: var(--teks-lembut); }
.dokumen-item__aksi { display: flex; gap: .4rem; flex-shrink: 0; }
.tombol-kecil--isi { background: var(--primer); color: var(--primer-teks); }
.pratinjau-pdf { width: 100%; height: min(80vh, 1000px); border: 1px solid var(--garis); border-radius: var(--radius); background: var(--latar-3); }
@media (max-width: 640px) {
  .dokumen-item { grid-template-columns: 2.6rem 1fr; }
  .dokumen-item__aksi { grid-column: 2; }
}

/* ===========================================================================
   Tautan ke situs luar di menu, peta situs, tautan wajib di footer, pemberitahuan cookie
   =========================================================================== */
.menu__luar { margin-left: .25rem; opacity: .7; vertical-align: -1px; }
.peta-situs, .peta-situs ul { list-style: none; margin: 0; padding-left: 0; }
.peta-situs ul { padding-left: 1.25rem; border-left: 2px solid var(--garis); margin: .25rem 0 .5rem .4rem; }
.peta-situs li { margin: .35rem 0; }
.peta-situs > li > a { font-weight: 700; }
.kaki__wajib { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.kaki__wajib a { color: inherit; opacity: .85; text-decoration: none; }
.kaki__wajib a:hover { opacity: 1; text-decoration: underline; }
.cookie { position: fixed; z-index: 90; left: 1rem; right: 1rem; bottom: 1rem; max-width: 46rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding: .9rem 1.1rem; border-radius: var(--radius); background: var(--latar); color: var(--teks); border: 1px solid var(--garis); box-shadow: 0 10px 30px rgb(0 0 0 / .18); font-size: .9rem; }
.cookie[hidden] { display: none; }
.cookie p { margin: 0; flex: 1 1 18rem; }
.cookie__tombol { padding: .5rem 1.1rem; border: 0; border-radius: var(--radius-kecil); background: var(--primer); color: var(--primer-teks); font: inherit; font-weight: 600; cursor: pointer; }
@media print { .cookie { display: none; } }

/* Galeri video (A5): gambar mini YouTube + pemutar yang dimuat saat diklik */
.kartu--video .kartu__gambar { position: relative; aspect-ratio: 16/9; }
.video__putar { position: absolute; left: 50%; top: 50%; width: 64px; height: 44px; transform: translate(-50%, -50%); border-radius: 12px; background: rgb(0 0 0 / .7); transition: background .15s; pointer-events: none; }
.video__putar::after { content: ""; position: absolute; left: 26px; top: 13px; border-style: solid; border-width: 9px 0 9px 16px; border-color: transparent transparent transparent #fff; }
.kartu--video:hover .video__putar, .video__tombol:hover .video__putar, .video__tombol:focus-visible .video__putar { background: #c00; }
.video-detail { max-width: 960px; }
.video__bingkai { position: relative; aspect-ratio: 16/9; background: #000; border-radius: var(--radius); overflow: hidden; margin: 1rem 0 .5rem; }
.video__bingkai img, .video__bingkai iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.video__tombol { position: absolute; inset: 0; }
.video__tombol .video__putar { width: 84px; height: 58px; border-radius: 16px; }
.video__tombol .video__putar::after { left: 33px; top: 17px; border-width: 12px 0 12px 21px; }
.video__catatan { font-size: .85rem; color: var(--teks-lembut); margin: 0 0 1rem; }
.video__deskripsi { white-space: normal; overflow-wrap: anywhere; }
.bagian-video { margin-top: 2rem; }
.lompat-teks { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }