/**
 * APJATEL public website — Glass Impact 2026
 * Liquid-glass, cinematic hero, benefit-first conversion.
 */

:root {
  --pub-ink: #0c1220;
  --pub-navy: #0b3a66;
  --pub-navy-deep: #072c4d;
  --pub-signal: #5eead4;
  --pub-signal-soft: rgba(94, 234, 212, 0.16);
  --pub-copper: #c4a484;
  --pub-paper: #f4f1ea;
  --pub-bg: #f6f4ef;
  --pub-surface: rgba(255, 255, 255, 0.62);
  --pub-text: #1c2430;
  --pub-muted: #5c6775;
  --pub-border: rgba(255, 255, 255, 0.28);
  --pub-hairline: rgba(12, 18, 32, 0.08);
  --pub-shadow: 0 24px 60px rgba(8, 12, 24, 0.12);
  --pub-display: Inter, "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --pub-ui: Inter, "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --pub-body: Inter, "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --pub-wrap: 1180px;
  --pub-radius: 22px;
  --pub-glass: rgba(255, 255, 255, 0.14);
  --pub-glass-strong: rgba(255, 255, 255, 0.55);
  --blue: #0b3a66;
  --orange: #c4a484;
}

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

html { scroll-behavior: smooth; }

.pub-body {
  margin: 0;
  font-family: var(--pub-body);
  font-weight: 400;
  color: var(--pub-text);
  background: var(--pub-bg);
  line-height: 1.6;
}
/* ====== Step 3 — Konfirmasi Pendaftaran ======
   Susunan kartu ringkasan + daftar dokumen + box pernyataan.
   Disusun mengikuti gaya kartu di referensi apjatel-app (lihat
   .pub-register-summary / .pub-register-declare di public-site.css
   versi lama) dan di-render via `data-confirm-summary` pada
   resources/views/public/registration.blade.php. */
.pub-register-summary {
    margin-bottom: 1.25rem;
    padding: 1.15rem 1.25rem;
    background: #fff;
    border: 1px solid var(--pub-hairline);
    border-radius: 16px;
}
/* Definisi list konfirmasi (Step 3) — key-value pair satu baris per
   <div> dengan dua kolom: label muted di kiri, value bold navy di
   kanan. Lebar minimum kolom label dinaikkan dari 7rem → 9rem untuk
   memuat label panjang seperti "Email (username)", "PIC teknis",
   "Kantor pusat", "Area layanan", "Penanggung jawab" tanpa wrap
   yang awkward. Baris menggunakan padding atas agar value yang
   panjang (mis. alamat) tetap punya breathing room. */
.pub-register-summary-dl {
    display: grid;
    gap: 0.65rem;
    margin: 0 0 1rem;
}
.pub-register-summary-dl > div {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr;
  gap: 0.5rem 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(12, 18, 32, 0.06);
}
.pub-register-summary-dl > div:last-child { border-bottom: 0; }
.pub-register-summary-dl dt {
  margin: 0;
  color: var(--pub-muted);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.45;
  padding-top: 0.1rem;
}
.pub-register-summary-dl dd {
  margin: 0;
  color: var(--pub-navy);
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

img { max-width: 100%; height: auto; display: block; }

.pub-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: #000;
  color: #fff;
}
.pub-skip:focus { left: 1rem; top: 1rem; }

.pub-wrap {
  width: min(var(--pub-wrap), calc(100% - 2rem));
  margin-inline: auto;
}

.pub-glass {
  background: var(--pub-glass-strong);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--pub-radius);
  box-shadow: var(--pub-shadow);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
}

/* —— Type —— */
.pub-kicker {
  margin: 0 0 0.7rem;
  font-family: var(--pub-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pub-copper);
}
.pub-kicker-on-dark { color: rgba(255, 255, 255, 0.7); }

.pub-h2 {
  margin: 0;
  font-family: var(--pub-display);
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--pub-ink);
}
.pub-h2-tight { margin-bottom: 1.6rem; }
.pub-h2-on-dark { color: #fff; }

.pub-lead {
  margin: 0.85rem 0 0;
  max-width: 38rem;
  font-size: 1.05rem;
  color: var(--pub-muted);
}
.pub-text-link {
  color: var(--pub-navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 58, 102, 0.25);
}
.pub-text-link:hover { color: #0a7a72; }

.pub-section { padding: clamp(4.25rem, 8vw, 6.75rem) 0; }
.pub-section-dark { background: #070b12; color: #fff; }
.pub-section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.pub-section-foot { margin: 2rem 0 0; }

/* —— Buttons —— */
.pub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--pub-ui);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: var(--pub-navy);
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.pub-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(11, 58, 102, 0.28); color: #fff; }
.pub-btn-sm { padding: 0.48rem 1rem; font-size: 0.8rem; }
.pub-btn-primary { background: var(--pub-navy); color: #fff; }
.pub-btn-light {
  background: #fff;
  color: var(--pub-ink);
}
.pub-btn-light:hover { background: #fff; color: var(--pub-ink); box-shadow: 0 12px 32px rgba(255, 255, 255, 0.25); }
.pub-btn-glass {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(16px);
}
.pub-btn-glass:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.pub-btn-ghost {
  background: transparent;
  color: var(--pub-muted);
  border-color: rgba(12, 18, 32, 0.12);
}
.pub-btn-ghost:hover { background: rgba(12, 18, 32, 0.04); color: var(--pub-ink); }
.pub-btn-outline {
  background: transparent;
  color: var(--pub-navy);
  border-color: var(--pub-navy);
}
.pub-btn-copper { background: var(--pub-navy); color: #fff; }

/* —— Header —— */
.pub-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease, color 0.25s ease;
}

/* Solid header: dipakai di halaman dengan body.pub-solid-header
 * (registrasi, articles, galleries). Background putih dengan border
 * tipis di bawah + sticky positioning supaya tetap di atas saat scroll
 * (tidak hilang). Tumpukan di atas `.pub-header.is-over-hero` default
 * — selector `.pub-solid-header .pub-header` punya specificity yang
 * sama/more (0,2,0 vs 0,2,0) dan muncul setelahnya di file ini. */
.pub-header.pub-header--solid {
  position: sticky;
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: rgba(12, 18, 32, 0.08);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  color: var(--pub-ink);
}
.pub-header.pub-header--solid .pub-nav a,
.pub-header.pub-header--solid .pub-nav-trigger,
.pub-header.pub-header--solid .pub-nav-trigger > span,
.pub-header.pub-header--solid .pub-header-staff,
.pub-header.pub-header--solid .pub-nav-toggle {
  color: var(--pub-ink);
}
.pub-header.pub-header--solid .pub-brand-logo {
  filter: none;
}
.pub-header.pub-header--solid .pub-btn-glass {
  background: var(--pub-navy);
  color: #fff;
}
.pub-header.pub-header--solid .pub-btn-glass:hover {
  background: var(--pub-ink, #1c2430);
  color: #fff;
}
/* —— Layout utilities —— */
.container {
  /* Single source of truth untuk lebar halaman publik. Pakai di
     <header>, <main>, <section>, <article> agar satu garis vertikal
     konsisten di semua halaman (garis tepi kiri-kanan sejajar). */
  width: min(var(--pub-wrap, 1180px), calc(100% - 2rem));
  margin-inline: auto;
}

.pub-header-inner {
  width: min(var(--pub-wrap), calc(100% - 2rem));
  margin: 0 auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.pub-brand { display: inline-flex; flex-shrink: 0; }
.pub-brand-logo { height: 32px; width: auto; max-width: 150px; object-fit: contain; }
.pub-nav {
  display: none;
  align-items: center;
  gap: 1.2rem;
  flex: 1;
}
.pub-nav a {
  color: var(--pub-ink);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
}

/* —— Multi-level navigasi (4 level) —— */
/* List top-level: flex horizontal pada desktop, sub-menu level 2+
   dropdown nested ke kanan. Level 4 = batas maksimal (lihat header
   blade — safety net `maxDepth=4`). */
.pub-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.pub-nav-item { position: relative; }
.pub-nav-trigger {
  /* Sekarang <a> dengan href (WordPress-style menu), bukan <button>. */
  background: transparent;
  padding: 0.4rem 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: inherit;
  font-weight: inherit;
}
.pub-nav-trigger:hover,
.pub-nav-trigger:focus-visible,
.pub-nav-item.is-open > .pub-nav-trigger {
  color: var(--pub-navy);
}
.pub-nav-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform 0.18s ease;
}
.pub-nav-item.is-open > .pub-nav-trigger .pub-nav-caret {
  transform: rotate(180deg);
}
/* Submenu: tersembunyi default, open saat hover/focus pada desktop atau
   toggle `is-open` pada mobile. Pakai popover positioning top-aligned
   agar dropdown muncul di bawah parent. */
.pub-nav-submenu {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  min-width: 220px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(12, 18, 32, 0.08);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(8, 12, 24, 0.14);
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 70;
  display: none;
  /* Tidak ada animasi opacity/transform — agar submenu langsung visible
     saat :hover aktif. */
}
/* Pada desktop: pakai CSS :hover murni (bukan JS class) karena lebih
   reliable untuk nested dropdown. Hover parent .pub-nav-item membuka
   submenu langsung anaknya. Hover submenu itu sendiri mempertahankan
   state :hover parent karena :hover propagate ke ancestor. */
@media (min-width: 992px) {
  .pub-nav-item:hover > .pub-nav-submenu,
  .pub-nav-item:focus-within > .pub-nav-submenu,
  .pub-nav-item.is-open > .pub-nav-submenu {
    display: block;
  }
}
.pub-nav-submenu .pub-nav-item {
  position: relative;
  white-space: nowrap;
}
.pub-nav-submenu .pub-nav-trigger,
.pub-nav-submenu a {
  display: flex;
  /* Caret di-absolute-kan ke kanan agar sejajar vertikal dengan teks.
     Tanpa ini, flex gap antara text dan caret bisa membuat caret tidak
     center-aligned di trigger. */
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  width: 100%;
  text-align: left;
}
.pub-nav-submenu a:hover,
.pub-nav-submenu a:focus-visible,
.pub-nav-submenu .pub-nav-trigger:hover,
.pub-nav-submenu .pub-nav-trigger:focus-visible {
  background: rgba(11, 58, 102, 0.06);
  color: var(--pub-navy);
}
/* Sub-submenu (level 3+): geser ke kanan supaya tidak overflow.
   `top: 0` agar sejajar dengan puncak parent <li> — paling reliable untuk
   transitive hover. Test sebelumnya pakai `top: -0.45rem` (offset negatif)
   yang membuat submenu di luar area hover saat mouse transit, sehingga
   submenu langsung tertutup lagi.

   `margin-left: 0.1rem` (lebih kecil dari default 0.25rem) agar submenu
   level 2+ lebih dekat ke parent trigger — mouse yang transit dari trigger
   ke submenu tidak melewati area kosong (gap) yang bisa menyebabkan hover
   state hilang. */
.pub-nav-submenu--lvl2,
.pub-nav-submenu--lvl3,
.pub-nav-submenu--lvl4,
.pub-nav-submenu--lvl5 {
  top: 0;
  left: 100%;
  margin-left: 0.1rem;
}
/* Auto-flip — saat submenu akan keluar dari viewport kanan atau bawah,
   JS menambahkan class `is-flipped-left` / `is-flipped-top` agar posisi
   berubah. Logika flip ada di public-site.js (fungsi repositionSubmenu).
   Penting untuk nested dropdown 5 level di viewport sempit — kalau tidak
   ada flip, menu child di ujung kanan (mis. "Bantuan" > "Legal") akan
   terpotong atau tidak terlihat di layar kecil. */
.pub-nav-submenu.is-flipped-left {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 0.1rem;
}
.pub-nav-submenu.is-flipped-top {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.1rem;
}
/* Kombinasi flip — bila submenu di posisi yang membutuhkan flip
   horizontal dan vertical sekaligus (mis. pojok kanan bawah viewport).
   JS akan apply kedua class. */
.pub-nav-submenu.is-flipped-left.is-flipped-top {
  top: auto;
  left: auto;
  bottom: 100%;
  right: 100%;
  margin: 0 0.1rem;
}
.pub-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.pub-header-staff {
  display: none;
  color: var(--pub-muted);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
}
.pub-nav-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border-radius: 999px;
}
.pub-nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
}
.pub-nav-mobile {
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem 1rem 1.2rem;
  background: rgba(7, 11, 18, 0.88);
  backdrop-filter: blur(24px);
}
.pub-nav-mobile a {
  padding: 0.65rem 0.25rem;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}
.pub-nav-mobile[hidden] { display: none !important; }

/* Mobile collapsible multi-level (4 level). Pakai native <details>/<summary>
   untuk toggle tanpa JS tambahan. Indent visual per level via padding
   inline style (lihat header.blade.php — `padding-left: N rem`). */
.pub-mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.pub-mobile-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pub-mobile-item:last-child {
  border-bottom: 0;
}
.pub-mobile-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 0.25rem;
  color: #fff;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
  -webkit-user-select: none;
}
.pub-mobile-item > summary::-webkit-details-marker { display: none; }
.pub-mobile-item > summary:hover { color: var(--pub-signal, #5eead4); }
/* Caret default → menghadap bawah (tertutup). Saat open → berputar ke
   atas (terbuka) — konsisten dengan desktop hover state. */
.pub-mobile-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.pub-mobile-item[open] > summary .pub-mobile-caret {
  transform: rotate(180deg);
}
.pub-mobile-children {
  padding: 0 0 0.35rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  margin-left: 0.85rem;
}
.pub-mobile-item--lvl1 > .pub-mobile-children {
  margin-left: 1rem;
}
.pub-mobile-item--lvl2 > .pub-mobile-children {
  margin-left: 1.15rem;
}
.pub-mobile-item--lvl3 > .pub-mobile-children {
  margin-left: 1.3rem;
}
/* Padded anchor di dalam children di-handle oleh inline style di blade
   (lihat renderMobileItem). Default link styling mengikuti `.pub-nav-mobile a`. */
.pub-mobile-cta {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pub-mobile-cta a {
  text-align: center;
}

.pub-header.is-over-hero:not(.is-scrolled) {
  /* Pakai glass effect (semi-transparent + blur) supaya teks nav tetap
     terbaca di hero apapun warnanya. Teks putih polos tanpa background
     tidak terbaca di hero gradient terang (lihat screenshot user). */
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.pub-header.is-over-hero:not(.is-scrolled) .pub-nav a,
.pub-header.is-over-hero:not(.is-scrolled) .pub-nav-trigger,
.pub-header.is-over-hero:not(.is-scrolled) .pub-nav-trigger > span,
.pub-header.is-over-hero:not(.is-scrolled) .pub-header-staff,
.pub-header.is-over-hero:not(.is-scrolled) .pub-nav-toggle {
  color: #fff;
  /* text-shadow sebagai safety net agar teks tetap kebaca walaupun
     glass blur belum aktif (browser lama tanpa backdrop-filter). */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.pub-header.is-over-hero:not(.is-scrolled) .pub-brand-logo {
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.pub-header.is-over-hero:not(.is-scrolled) .pub-nav .pub-nav-submenu  a{
  color: var(--pub-ink);

}
.pub-header.is-scrolled {
  background: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  color: var(--pub-ink);
}
.pub-header.is-scrolled .pub-nav a,
.pub-header.is-scrolled .pub-header-staff,
.pub-header.is-scrolled .pub-nav-toggle { color: var(--pub-ink); }
.pub-header.is-scrolled .pub-brand-logo { filter: none; }
.pub-header.is-scrolled .pub-nav-toggle {
  border-color: rgba(12, 18, 32, 0.12);
  background: rgba(12, 18, 32, 0.04);
}
.pub-header.is-scrolled .pub-btn-glass {
  background: var(--pub-navy);
  border-color: transparent;
  color: #fff;
}

.pub-solid-header .pub-header {
  position: sticky;
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: rgba(12, 18, 32, 0.08);
  backdrop-filter: blur(24px);
  color: var(--pub-ink);
}
.pub-solid-header .pub-header .pub-nav a,
.pub-solid-header .pub-header .pub-header-staff,
.pub-solid-header .pub-header .pub-nav-toggle { color: var(--pub-ink); }
.pub-solid-header .pub-header .pub-brand-logo { filter: none; }
.pub-solid-header .pub-header .pub-btn-glass {
  background: var(--pub-navy);
  color: #fff;
}

@media (min-width: 992px) {
  .pub-nav { display: flex; }
  .pub-nav-toggle { display: none; }
  .pub-header-staff { display: inline; }
}

/* —— Hero —— */
.pub-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  overflow: hidden;
}
.pub-hero-media {
  position: absolute;
  inset: 0;
}
.pub-hero-video,
.pub-hero-bg,
.pub-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pub-hero-slide {
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.2s ease;
}
.pub-hero-slide.is-active {
  opacity: 1;
  animation: pubKen 18s ease-in-out infinite alternate;
}
.pub-hero.has-video .pub-hero-bg { opacity: 0; }
.pub-hero-liquid {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(94, 234, 212, 0.18), transparent 36%),
    radial-gradient(circle at 82% 70%, rgba(255, 255, 255, 0.1), transparent 32%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.pub-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 11, 18, 0.35) 0%, rgba(7, 11, 18, 0.55) 45%, rgba(7, 11, 18, 0.82) 100%);
}


.pub-hero-inner {
  position: relative;
  z-index: 1;
  padding: 7.5rem 0 1.5rem;
}
.pub-hero-card {
  max-width: 42rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.pub-hero-title {
  margin: 0;
  font-family: var(--pub-display);
  font-size: clamp(2.2rem, 5.6vw, 3.85rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.pub-hero-title em {
  font-style: normal;
  font-weight: 700;
  color: #d7fff6;
}
.pub-hero-lead {
  margin: 1rem 0 0;
  max-width: 34rem;
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.82);
}
.pub-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.pub-proof-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.4rem 0 0;
}
.pub-proof-pills > div {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.pub-proof-pills dt {
  font-family: var(--pub-ui);
  font-size: 1rem;
  font-weight: 600;
}
.pub-proof-pills dd {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
}
.pub-hero-logos {
  position: relative;
  z-index: 1;
  padding: 0.75rem 0 1.5rem;
  background: linear-gradient(180deg, transparent, rgba(7, 11, 18, 0.35));
}
.pub-logo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: center;
}
.pub-logo-strip img {
  max-height: 36px;
  width: auto;
  margin-inline: auto;
  opacity: 0.78;
  filter: grayscale(1);
}
.pub-logo-strip-on-dark img { filter: grayscale(1) brightness(2); opacity: 0.7; }

@keyframes pubKen {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}

/* —— Card slider (reusable component) —— */

/* Slider: tampil N item di desktop, slide 1 item per klik tombol atau
   auto-slide. Track pakai translateX dengan transition. Catatan struktur:
   .pub-card-slider-viewport (outer) bebas overflow supaya box-shadow
   item tidak ter-clip. Item di-clip oleh .pub-card-slider-clip (inner)
   yang hanya membatasi track saja. */
.pub-card-slider {
  margin: 1.5rem 0 0.5rem;
  --pub-card-slider-gap: 0.9rem;
  --pub-card-slider-visible: 3; /* jumlah item yang tampil di viewport */
}
.pub-card-slider-viewport {
  position: relative;
  /* Padding vertikal ekstra agar box-shadow item (drop ke atas/bawah)
     tidak terpotong oleh container lain. */
  padding: 0.6rem 0;
}
.pub-card-slider-clip {
  overflow: hidden;
  position: relative;
}
.pub-card-slider-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--pub-card-slider-gap);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.pub-card-slider-track > li {
  flex: 0 0 calc((100% - (var(--pub-card-slider-visible) - 1) * var(--pub-card-slider-gap)) / var(--pub-card-slider-visible));
  padding: 1.4rem 1.3rem;
  /* Box-shadow bebas — bisa extend keluar dari .pub-card-slider-clip
     karena .pub-card-slider-viewport tidak overflow:hidden. */
  box-shadow: 0 12px 28px rgba(11, 58, 102, 0.08);
  border-radius: var(--pub-radius, 14px);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pub-card-slider-track > li:hover {
  box-shadow: 0 18px 40px rgba(11, 58, 102, 0.14);
  transform: translateY(-2px);
}
.pub-card-slider-track > li h3 {
  margin: 0 0 0.4rem;
  font-family: var(--pub-ui);
  font-size: 1.35rem;
  font-weight: 600;
}
.pub-card-slider-track > li p {
  margin: 0;
  color: var(--pub-muted);
}

/* Static grid untuk 1-2 items (no slider). 1 item = full width
   (col-12), 2 items = 50/50 (col-6 col-6). Tidak ada animasi atau
   duplikasi item — supaya konten tidak berulang. */
.pub-card-grid {
  list-style: none;
  margin: 1.5rem 0 0.5rem;
  padding: 0;
  display: grid;
  gap: var(--pub-card-slider-gap, 0.9rem);
}
.pub-card-grid--cols-1 {
  grid-template-columns: minmax(0, 1fr);
}
.pub-card-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .pub-card-grid--cols-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.pub-card-grid > li {
  padding: 1.4rem 1.3rem;
  box-shadow: 0 12px 28px rgba(11, 58, 102, 0.08);
  border-radius: var(--pub-radius, 14px);
}
.pub-card-grid > li h3 {
  margin: 0 0 0.4rem;
  font-family: var(--pub-ui);
  font-size: 1.35rem;
  font-weight: 600;
}
.pub-card-grid > li p {
  margin: 0;
  color: var(--pub-muted);
}

/* Link opsional per item (URL diset di CMS). Mengisi area konten kartu
   supaya seluruh teks (judul + deskripsi) dapat diklik. Pewarisan
   warna dari <li> supaya tidak muncul warna tautan default (biru +
   garis bawah). */
.pub-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}
.pub-card-link:hover,
.pub-card-link:focus {
  color: inherit;
  text-decoration: none;
}
.pub-card-link h3 {
  color: inherit;
}

/* Controls prev/next + dots di bawah viewport. */
.pub-card-slider-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0 0;
  gap: 0.6rem;
}
.pub-card-slider-controls > button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.pub-card-slider-controls > button[disabled] {
  opacity: 0.4;
  pointer-events: none;
}
/* Mode tanpa tombol prev/next (default) — dots center sendiri. */
.pub-card-slider-controls--no-buttons {
  justify-content: center;
}
.pub-card-slider-controls--no-buttons > .pub-card-slider-dots {
  flex: 0 1 auto;
}
.pub-card-slider-dots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 1 1 auto;
}
.pub-card-slider-dots li {
  margin: 0;
  padding: 0;
}
.pub-card-slider-dots button {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 18, 32, 0.25);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
  display: inline-block;
}
.pub-card-slider-dots button:hover,
.pub-card-slider-dots button:focus-visible {
  background: rgba(12, 18, 32, 0.5);
  outline: none;
}
.pub-card-slider-dots button[aria-selected="true"] {
  background: var(--pub-navy, #0b3a66);
  width: 1.4rem;
  border-radius: 999px;
}

@media (max-width: 720px) {
  .pub-card-slider { --pub-card-slider-visible: 1; }
}
@media (min-width: 721px) and (max-width: 1024px) {
  .pub-card-slider { --pub-card-slider-visible: 2; }
}
@media (min-width: 1025px) {
  .pub-card-slider { --pub-card-slider-visible: 3; }
}

/* —— Join / membership (keanggotaan) panels —— */
.pub-join {
  margin-top: 1.5rem;
  padding: 1.25rem 1.3rem 1.4rem;
}
.pub-join-switch {
  display: inline-flex;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(12, 18, 32, 0.06);
}
.pub-join-switch button {
  border: 0;
  background: transparent;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pub-muted);
  cursor: pointer;
}
.pub-join-switch button.is-active {
  background: #fff;
  color: var(--pub-ink);
  box-shadow: 0 6px 16px rgba(12, 18, 32, 0.08);
}
.pub-join-panel { margin-top: 0.9rem; }
.pub-join-panel p { margin: 0 0 0.9rem; color: var(--pub-muted); }
.pub-join-panel[hidden] { display: none !important; }

@media (min-width: 800px) {
  .pub-logo-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* —— About —— */
.pub-about { display: grid; gap: 2rem; }
.pub-about-figure { margin: 0; }
.pub-about-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 1.6rem;
}
.pub-pullquote {
  margin: 1.35rem 0 0;
  padding: 0;
  border: 0;
  font-family: var(--pub-ui);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  color: var(--pub-ink);
}
.pub-about-cta { margin: 1.25rem 0 0; }
@media (min-width: 900px) {
  .pub-about {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
    align-items: center;
  }
}

/* —— Board —— */
.pub-board-head { max-width: 34rem; margin-bottom: 1.75rem; }
.pub-board-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.pub-board-card {
  overflow: hidden;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.pub-board-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.pub-board-plate { padding: 0.75rem 0.85rem 0.95rem; }
.pub-board-plate h3 {
  margin: 0;
  font-family: var(--pub-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}
.pub-board-plate p {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.62);
}

/* Card link: bungkus card jadi <a> dengan state hover/active.
   Class .pub-board-card-link mewarisi styling card aslinya. */
.pub-board-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pub-board-card-link:hover,
.pub-board-card-link:focus-visible {
  outline: none;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(8, 12, 24, 0.35);
}
.pub-board-card-link:hover .pub-board-card-cta,
.pub-board-card-link:focus-visible .pub-board-card-cta {
  opacity: 1;
  transform: translateX(0);
}

/* Halaman detail kepengurusan member (/kepengurusan/{slug}). Tampilkan
   section "Anggota di bawah {nama}" dengan layout grid yang sama
   seperti homepage #kepengurusan. */
.kepengurusan-member-detail {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.5rem 0 2.5rem;
}
.kepengurusan-member-photo {
  width: 100%;
  max-width: 18rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--pub-radius, 14px);
  margin-bottom: 1rem;
}
.kepengurusan-member-children {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(12, 18, 32, 0.1);
}
.kepengurusan-member-children-title {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pub-ink, #070b12);
}
.kepengurusan-member-children .pub-board-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (min-width: 992px) {
  .kepengurusan-member-children .pub-board-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Override warna card di section children di halaman detail.
   Base card pakai warna white-on-dark untuk homepage (.pub-section-dark).
   Di children section ini background terang, override jadi terang
   dengan teks gelap supaya contrast cukup dan readable. */
.kepengurusan-member-children .pub-board-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(12, 18, 32, 0.08);
  box-shadow: 0 8px 24px rgba(12, 18, 32, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.kepengurusan-member-children .pub-board-card:hover,
.kepengurusan-member-children .pub-board-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(12, 18, 32, 0.12);
}
.kepengurusan-member-children .pub-board-plate {
  background: transparent;
  padding: 0.85rem 1rem 1.05rem;
}
.kepengurusan-member-children .pub-board-plate h3 {
  color: var(--pub-ink, #070b12);
}
.kepengurusan-member-children .pub-board-plate p {
  color: rgba(12, 18, 32, 0.65);
  margin: 0.25rem 0 0;
}
.kepengurusan-member-children .pub-board-card-cta {
  color: var(--pub-navy, #0b3a66);
  opacity: 1;
  transform: none;
}
.pub-board-card-cta {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  opacity: 0.75;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
@media (min-width: 992px) {
  .pub-board-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* —— Membership —— */
.pub-membership-intro { margin-bottom: 1.5rem; }
.pub-member-types { display: grid; gap: 0.85rem; }
.pub-member-card { padding: 1.4rem 1.3rem; }
.pub-member-card h3 {
  margin: 0 0 0.45rem;
  font-family: var(--pub-ui);
  font-size: 1.25rem;
  font-weight: 600;
}
.pub-member-card p { margin: 0; color: var(--pub-muted); }

/* Slot di bawah slider (untuk CTA tambahan seperti button "Daftar
   online sekarang" di section keanggotaan). */
.pub-card-slider-slot { margin-top: 1.5rem; }
.pub-section-foot { text-align: center; }
@media (min-width: 768px) {
  .pub-member-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* —— Campaign / media —— */
.pub-media-strip { display: grid; gap: 1.25rem; }
.pub-campaign-tabs { display: flex; gap: 1rem; margin-top: 1rem; }
.pub-campaign-tab {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pub-muted);
  cursor: pointer;
}
.pub-campaign-tab.is-active {
  color: var(--pub-ink);
  box-shadow: inset 0 -1px 0 #0a7a72;
}
.pub-campaign-stage {
  position: relative;
  border-radius: 1.4rem;
  overflow: hidden;
}
.pub-campaign-main-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.pub-campaign-zoom {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(7, 11, 18, 0.4);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.pub-campaign-zoom svg { width: 16px; height: 16px; }
.pub-campaign-thumbs {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}
.pub-campaign-thumb {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 18, 32, 0.18);
  cursor: pointer;
}
.pub-campaign-thumb.is-active { background: #0a7a72; }
.pub-campaign-lightbox {
  border: 0;
  padding: 0;
  max-width: min(960px, 92vw);
  background: #070b12;
  border-radius: 1rem;
}
.pub-campaign-lightbox::backdrop { background: rgba(7, 11, 18, 0.7); }
.pub-campaign-lightbox-bar { display: flex; justify-content: flex-end; padding: 0.55rem; }
.pub-campaign-lightbox img { width: 100%; }
@media (min-width: 900px) {
  .pub-media-strip {
    grid-template-columns: 0.75fr 1.25fr;
    align-items: end;
  }
  .pub-campaign-thumbs { grid-column: 2; }
}

/* —— Aspirasi —— */
.pub-aspirasi { display: grid; gap: 1.5rem; }
.pub-aspirasi-topics { display: grid; gap: 0.2rem; }
.pub-aspirasi-topic {
  text-align: left;
  border: 0;
  background: none;
  padding: 0.55rem 0;
  font: inherit;
  font-weight: 500;
  color: var(--pub-muted);
  cursor: pointer;
}
.pub-aspirasi-topic.is-active { color: var(--pub-ink); }
.pub-aspirasi-panel {
  padding: 1.5rem 1.35rem;
  background: rgba(7, 11, 18, 0.82);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.pub-aspirasi-heading {
  margin: 0;
  font-family: var(--pub-ui);
  font-size: 1.5rem;
  font-weight: 600;
  font-style: normal;
}
.pub-aspirasi-quote { margin: 1rem 0 0; }
.pub-aspirasi-quote p { margin: 0; font-size: 1.08rem; line-height: 1.6; }
.pub-aspirasi-quote footer {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}
.pub-aspirasi-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.2rem;
}
.pub-aspirasi-nav-btn {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.8);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pub-aspirasi-dots { display: flex; gap: 0.35rem; margin-left: auto; }
.pub-aspirasi-dot {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  padding: 0;
  cursor: pointer;
}
.pub-aspirasi-dot.is-active { background: #d7fff6; }
@media (min-width: 900px) {
  .pub-aspirasi { grid-template-columns: 0.8fr 1.2fr; gap: 3rem; }
}

/* —— News —— */
.pub-news { display: grid; gap: 1.5rem; }
.pub-news-feature img {
  width: 100%;
  aspect-ratio: 656 / 369;
  object-fit: cover;
  background: var(--pub-hairline, #e5e7eb);
  border-radius: 1.25rem;
}
.pub-news-body { padding: 0.9rem 0.1rem 0; }
.pub-news-meta {
  display: flex;
  gap: 0.7rem;
  font-size: 0.8rem;
  color: var(--pub-muted);
}
.pub-news-cat {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pub-navy, #0b3a66);
  background: var(--pub-signal-soft, rgba(94, 234, 212, 0.16));
  border-radius: 999px;
}
.pub-news-feature h3,
.pub-news-row h3 {
  margin: 0.35rem 0 0;
  font-family: var(--pub-ui);
  font-size: 1.3rem;
  font-weight: 600;
}
.pub-news-feature p { margin: 0.5rem 0 0; color: var(--pub-muted); }
.pub-news-list { border-top: 1px solid var(--pub-hairline); }
.pub-news-row {
  padding: 1rem 0;
  border-bottom: 1px solid var(--pub-hairline);
}
.pub-news-row time { font-size: 0.78rem; color: var(--pub-muted); }
.pub-news-row h3 { font-size: 1.05rem; }
/* Title link di .pub-news-row dan .pub-news-feature tampil netral
   (tidak underlined, tidak biru) sampai user hover/focus — agar tidak
   terlihat seperti link blue default. */
.pub-news-row h3 a,
.pub-news-feature .pub-news-body a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.pub-news-row h3 a:hover,
.pub-news-row h3 a:focus-visible,
.pub-news-feature .pub-news-body a:hover,
.pub-news-feature .pub-news-body a:focus-visible {
  color: var(--pub-navy, #0b3a66);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (min-width: 900px) {
  .pub-news { grid-template-columns: 1.15fr 0.85fr; gap: 2.5rem; }
}

/* —— Gallery strip —— */
.pub-gallery-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 70vw);
  gap: 0.9rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scroll-snap-type: x mandatory;
}
.pub-gallery-strip figure { margin: 0; scroll-snap-align: start; }
.pub-gallery-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1.15rem;
}
.pub-gallery-strip figcaption {
  margin-top: 0.45rem;
  font-size: 0.84rem;
  color: var(--pub-muted);
}
@media (min-width: 900px) {
  .pub-gallery-strip {
    grid-auto-flow: unset;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }
}

/* —— Gallery index (/galeri) —— */
.pub-gallery-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.pub-gallery-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--pub-hairline);
  border-radius: var(--pub-radius);
  overflow: hidden;
  box-shadow: var(--pub-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pub-gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 70px rgba(8, 12, 24, 0.16);
}
.pub-gallery-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(12, 18, 32, 0.05);
}
.pub-gallery-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.pub-gallery-card:hover .pub-gallery-card-thumb img { transform: scale(1.05); }
.pub-gallery-card-count {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(7, 11, 18, 0.7);
  color: #fff;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.pub-gallery-card-cta {
  position: absolute;
  bottom: 2.6rem;
  right: 0.6rem;
  padding: 0.32rem 0.75rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--pub-navy, #0b3a66);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(7, 11, 18, 0.3);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.pub-gallery-card:hover .pub-gallery-card-cta,
.pub-gallery-card:focus-within .pub-gallery-card-cta {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .pub-gallery-card-cta { transition: none; }
}
.pub-gallery-card-body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.45rem; }
.pub-gallery-card-title {
  margin: 0;
  font-family: var(--pub-display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.pub-gallery-card-title a { color: var(--pub-ink); text-decoration: none; }
.pub-gallery-card-title a:hover { color: var(--pub-navy); }
.pub-gallery-card-desc { margin: 0; color: var(--pub-muted); font-size: 0.92rem; }

/* —— Gallery detail (/galeri/{slug}) —— */
.pub-gallery-detail-header { margin-bottom: 1.5rem; }
.pub-gallery-detail-count {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.6rem;
  font-size: 0.7rem;
  border-radius: 999px;
  background: var(--pub-signal-soft);
  color: var(--pub-navy);
  letter-spacing: 0.04em;
}
.pub-gallery-detail-empty {
  padding: 2rem;
  background: #fff;
  border: 1px dashed var(--pub-hairline);
  border-radius: var(--pub-radius);
  color: var(--pub-muted);
  text-align: center;
}

/* Justified grid untuk gallery detail — pure-CSS masonry layout */
.pub-gallery-justified {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: 180px;
  grid-auto-flow: dense;
  gap: 6px;
  margin: 2rem 0 2rem;
}
.pub-gallery-justified-cell {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: rgba(12, 18, 32, 0.05);
  overflow: hidden;
  cursor: zoom-in;
  border-radius: 4px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pub-gallery-justified-cell:focus-visible {
  outline: 3px solid var(--pub-navy);
  outline-offset: 2px;
}
.pub-gallery-justified-cell:hover {
  transform: scale(0.985);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  z-index: 1;
}
.pub-gallery-justified-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gallery lightbox (modal fullscreen) */
.pub-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 11, 18, 0.92);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.pub-gallery-lightbox[hidden] { display: none; }
.pub-gallery-lightbox-figure {
  margin: 0;
  max-width: min(1200px, 96vw);
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pub-gallery-lightbox-figure img {
  max-width: 100%;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}
.pub-gallery-lightbox-close,
.pub-gallery-lightbox-prev,
.pub-gallery-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1;
  width: clamp(2.75rem, 5vw, 3.5rem);
  height: clamp(2.75rem, 5vw, 3.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pub-gallery-lightbox-close {
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  transform: none;
  font-size: 1.6rem;
}
.pub-gallery-lightbox-prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.pub-gallery-lightbox-next { right: clamp(0.5rem, 2vw, 1.5rem); }
.pub-gallery-lightbox-close:hover,
.pub-gallery-lightbox-prev:hover,
.pub-gallery-lightbox-next:hover {
  background: rgba(255, 255, 255, 0.22);
}
.pub-gallery-lightbox-close:focus-visible,
.pub-gallery-lightbox-prev:focus-visible,
.pub-gallery-lightbox-next:focus-visible {
  outline: 2px solid var(--pub-signal);
  outline-offset: 2px;
}

/* —— Article list (/berita) —— */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 1.75rem;
}
.article-grid .article-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #fff;
  border: 1px solid var(--pub-hairline);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(12, 18, 32, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.article-grid .article-card:hover,
.article-grid .article-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(11, 58, 102, 0.25);
  box-shadow: 0 14px 34px rgba(8, 12, 24, 0.12);
}
.article-card-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--pub-paper, #f4f1ea);
  position: relative;
}
.article-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.article-grid .article-card:hover .article-card-thumb img { transform: scale(1.05); }
.article-grid .article-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  flex: 1;
  padding: 1.15rem 1.25rem 1.25rem;
}
.article-grid .article-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}
.article-grid .article-card-meta time {
  font-size: 0.75rem;
  color: var(--pub-muted);
  letter-spacing: 0.04em;
}
.article-grid .article-card-cat {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--pub-signal-soft, rgba(94, 234, 212, 0.16));
  color: var(--pub-navy, #0b3a66);
}
.article-grid .article-card-author {
  font-size: 0.75rem;
  color: var(--pub-muted);
}
.article-grid .article-card-author::before {
  content: '·';
  margin-right: 0.5rem;
  color: var(--pub-hairline);
}
.article-grid .article-card-title {
  margin: 0;
  font-family: var(--pub-display, Inter, "Source Sans 3", sans-serif);
  font-size: 1.15rem;
  line-height: 1.32;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.article-card-title a {
  color: var(--pub-ink, #0c1220);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s ease;
}
.article-grid .article-card:hover .article-card-title a { color: var(--pub-navy, #0b3a66); }
.article-grid .article-card-excerpt {
  margin: 0;
  color: var(--pub-muted, #5c6775);
  font-size: 0.93rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-grid .article-card-cta {
  margin-top: auto;
  padding-top: 0.5rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--pub-navy, #0b3a66);
  text-decoration: none;
  transition: color 0.15s ease, gap 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.article-grid .article-card-cta:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  gap: 0.6rem;
}
.article-grid .article-card-cta::after {
  content: '→';
  transition: transform 0.15s ease;
}
.article-grid .article-card:hover .article-card-cta::after { transform: translateX(2px); }
.article-grid .article-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--pub-muted);
  border: 1px dashed var(--pub-hairline);
  border-radius: 1rem;
  background: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .article-grid .article-card { transition: none; }
  .article-grid .article-card:hover { transform: none; }
}

/* —— Closing —— */
.pub-closing {
  position: relative;
  padding: clamp(4.5rem, 10vw, 7rem) 0;
  background: #070b12 var(--pub-close-img) center / cover no-repeat;
  color: #fff;
}
.pub-closing-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 11, 18, 0.45), rgba(7, 11, 18, 0.72));
}
.pub-closing .pub-wrap { position: relative; z-index: 1; }
.pub-closing-card {
  max-width: 36rem;
  margin: 0 auto;
  padding: 2rem 1.6rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.pub-closing-title {
  margin: 0;
  font-family: var(--pub-display);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
}
.pub-closing-lead {
  margin: 0.85rem 0 0;
  color: rgba(255, 255, 255, 0.78);
}
.pub-closing-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

/* —— Footer —— */
.pub-footer {
  background: #070b12;
  color: #b8c0cc;
  padding: 3.25rem 0 1.4rem;
}
.pub-footer a {
  color: #e8edf4;
  text-decoration: none;
  display: block;
  margin-top: 0.4rem;
  font-size: 0.92rem;
}
.pub-footer a:hover { color: #d7fff6; }
.pub-footer strong {
  color: #fff;
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pub-footer-logo { height: 30px; width: auto; margin-bottom: 0.75rem; }
.pub-footer-grid {
  display: grid;
  gap: 1.6rem;
  margin-bottom: 2rem;
}
.pub-footer-contact address {
  font-style: normal;
  margin: 0.5rem 0 0.7rem;
  color: #8b95a3;
  font-size: 0.9rem;
}
.pub-footer-contact-note { margin: 0.85rem 0 0; font-size: 0.82rem; }
.pub-footer-contact-note a { display: inline; margin: 0; }
.pub-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.7rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.84rem;
}
.pub-footer-bottom a { display: inline; margin: 0; }
@media (min-width: 768px) {
  .pub-footer-grid { grid-template-columns: 1.4fr 0.8fr 0.8fr 1.1fr; }
}

/* —— Register / status —— */
.pub-register {
  /* Hanya background + vertical padding. Lebar konten di-handle oleh
     .container atau .pub-register-wrap (lebih sempit untuk form registrasi). */
  padding: 2.5rem 0 4rem;
  background: var(--pub-bg);
}
.pub-register-wrap { max-width: 860px; margin: 0 auto; }

/* Section header di atas form (kicker + h2 + lead). Dulu tanpa style
 * khusus sehingga terlalu dekat dengan form. Sekarang: padding top
 * ekstra, max-width lebih lebar, dan lead yang lebih panjang agar
 * hierarchy jelas sebelum user mulai scroll. */
.pub-register-header {
  margin: 0 0 2.25rem;
  padding: 0.5rem 0 0;
  max-width: 720px;
}
.pub-register-header .pub-kicker {
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--pub-copper, #c4a484);
  text-transform: uppercase;
}
.pub-register-header h1,
.pub-register-header .pub-h2 {
  margin: 0 0 0.85rem;
  font-family: var(--pub-display, "Fraunces", serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--pub-text, #1c2430);
}
.pub-register-header .pub-lead {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--pub-muted, #5c6775);
  max-width: 60ch;
}
.pub-register-steps {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.pub-register-steps li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: #fff;
  border: 1px solid var(--pub-hairline);
  border-radius: 999px;
  color: var(--pub-muted);
  font-size: 0.88rem;
  font-weight: 600;
}
.pub-register-steps li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--pub-signal-soft);
  color: var(--pub-navy);
  font-size: 0.78rem;
}
.pub-register-steps li.is-active,
.pub-register-steps li.is-done { border-color: var(--pub-navy); color: var(--pub-navy); }
.pub-register-steps li.is-active span,
.pub-register-steps li.is-done span { background: var(--pub-navy); color: #fff; }
.pub-register-alert {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: 14px;
}
.pub-register-alert.is-error { background: #fef2f2; color: #9b1c1c; }
.pub-register-alert.is-success { background: #ecfdf5; color: #065f46; }
.pub-register-form {
  background: #fff;
  border-radius: var(--pub-radius);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--pub-shadow);
}
.pub-register-panel-title {
  margin: 0 0 0.35rem;
  font-family: var(--pub-display);
  font-size: 1.4rem;
  font-weight: 700;
}
.pub-register-panel-lead {
  margin: 0 0 1.35rem;
  color: var(--pub-muted);
  font-size: 0.95rem;
}
.pub-register-fieldset {
  margin: 0 0 1.35rem;
  padding: 1rem 0 0;
  border: 0;
  border-top: 1px solid var(--pub-hairline);
}
.pub-register-fieldset legend {
  padding: 0;
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
}
.pub-register-hint { margin: -0.35rem 0 0.85rem; color: var(--pub-muted); font-size: 0.86rem; }
.pub-register-grid { display: grid; grid-template-columns: 1fr; gap: 1.15rem 1.25rem; }
.pub-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
}
.pub-field em { color: #b45309; font-style: normal; }
.pub-field input,
.pub-field select,
.pub-field textarea {
  width: 100%;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(12, 18, 32, 0.12);
  border-radius: 14px;
  font: inherit;
  font-weight: 500;
  background: #fff;
}
.pub-field input:focus,
.pub-field select:focus,
.pub-field textarea:focus {
  outline: 2px solid rgba(10, 122, 114, 0.22);
  border-color: #0a7a72;
}
.pub-field input.is-invalid,
.pub-field select.is-invalid,
.pub-field textarea.is-invalid { border-color: #dc2626; background: #fef2f2; }
.pub-field-error { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: #b91c1c; }
.pub-field-error[hidden] { display: none !important; }
.pub-register-doc[hidden] { display: none !important; }
.pub-register-docs { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.pub-register-doc {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  border: 1px dashed rgba(11, 58, 102, 0.28);
  border-radius: 14px;
  background: #f7f5f0;
  cursor: pointer;
}
.pub-register-doc.is-ready { border-style: solid; background: #fff; }
.pub-register-doc.is-invalid { border-color: #dc2626; background: #fef2f2; }
.pub-register-doc-label { font-weight: 700; color: var(--pub-navy); }
.pub-register-doc-meta { font-size: 0.82rem; color: var(--pub-muted); }
.pub-register-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}
.pub-register-success { text-align: center; }
.pub-register-success-icon {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pub-navy);
  color: #fff;
  font-size: 1.4rem;
}
.pub-register-ref { display: grid; gap: 0.75rem; margin: 1.25rem auto 1rem; max-width: 28rem; text-align: left; }
.pub-register-ref > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: #f7f5f0;
}
.pub-register-ref dt { color: var(--pub-muted); font-size: 0.85rem; }
.pub-register-ref dd { margin: 0; font-weight: 700; color: var(--pub-navy); }
.pub-register-footer { padding-block: 1.5rem; }
.pub-register-footer p { margin: 0; color: var(--pub-muted); font-size: 0.88rem; }
.pub-muted { color: var(--pub-muted); }
.pub-register-invoice-meta {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--pub-muted);
  margin-top: 0.2rem;
}

/* —— Global error popup —— */
.register-popup[hidden] { display: none !important; }
.register-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.register-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 11, 18, 0.55);
  backdrop-filter: blur(2px);
}
.register-popup-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 28rem;
  background: #fff;
  border-radius: var(--pub-radius);
  box-shadow: 0 20px 50px rgba(7, 11, 18, 0.25);
  padding: 1.5rem 1.5rem 1.25rem;
  text-align: center;
  animation: register-popup-in 180ms ease-out;
}
@keyframes register-popup-in {
  from { transform: translateY(8px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.register-popup-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fef2f2;
  color: #dc2626;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.register-popup-title {
  margin: 0 0 0.35rem;
  font-family: var(--pub-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--pub-navy);
}
.register-popup-message {
  margin: 0 0 0.75rem;
  color: var(--pub-muted);
  font-size: 0.92rem;
}
.register-popup-list {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: #fef2f2;
  border-radius: 12px;
  text-align: left;
  list-style: none;
  max-height: 12rem;
  overflow-y: auto;
}
.register-popup-list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.85rem;
  color: #9b1c1c;
  line-height: 1.45;
}
.register-popup-list li + li { margin-top: 0.4rem; }
.register-popup-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #dc2626;
}
.register-popup-list:empty { display: none; }
.register-popup-close { min-width: 9rem; }
body.register-popup-open { overflow: hidden; }
.pub-status-form .pub-field { max-width: 28rem; }
.pub-status-result { margin-top: 1.5rem; }
.pub-status-card { padding: 1.25rem; background: #f7f5f0; border-radius: var(--pub-radius); }
.pub-status-head { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
.pub-status-head strong { color: var(--pub-navy); }
.pub-status-badge { color: #0a7a72 !important; }
.pub-status-message { margin: 0 0 0.75rem; font-weight: 500; }
.pub-status-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.pub-status-step {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  background: #fff;
  border-radius: 12px;
  color: var(--pub-muted);
  font-size: 0.9rem;
}
.pub-status-step span {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pub-signal-soft);
  color: var(--pub-navy);
  font-size: 0.78rem;
  font-weight: 700;
}
.pub-status-step em { font-style: normal; font-weight: 600; }
.pub-status-step.is-done,
.pub-status-step.is-current { color: var(--pub-navy); }
.pub-status-step.is-done span,
.pub-status-step.is-current span { background: var(--pub-navy); color: #fff; }
.pub-status-docs { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.pub-status-docs .is-ok { color: #047857; }
.pub-status-docs .is-missing { color: #b45309; }
.pub-status-portal { margin: 1rem 0 0.75rem; color: var(--pub-navy); }

@media (min-width: 640px) {
  .pub-status-head { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .pub-register-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-field-span { grid-column: 1 / -1; }
  .pub-register-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pub-hero-slide.is-active { animation: none; transform: none; }
  .pub-btn:hover { transform: none; }
}

/* —— Account type selector (Step 1) —— */
.pub-register-account-type legend em { color: #b45309; font-style: normal; }
.pub-account-type-grid {
  display: grid;
  gap: 0.85rem;
  margin: 0;
}
.pub-account-type-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: #eef0fb;
  border: 1px solid rgba(11, 58, 102, 0.08);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  position: relative;
}
.pub-account-type-card:hover {
  border-color: rgba(11, 58, 102, 0.28);
  background: #e8ecf8;
}
.pub-account-type-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.pub-account-type-card:focus-within {
  outline: 2px solid rgba(10, 122, 114, 0.45);
  outline-offset: 2px;
}
.pub-account-type-card.is-selected {
  border-color: var(--pub-navy);
  background: #e3eaf6;
  box-shadow: 0 0 0 2px rgba(11, 58, 102, 0.2);
}
.pub-account-type-card.is-invalid {
  border-color: #dc2626;
  background: #fef2f2;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}
.pub-account-type-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: rgba(11, 58, 102, 0.12);
  color: var(--pub-navy);
  flex-shrink: 0;
}
.pub-account-type-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.pub-account-type-title {
  font-family: var(--pub-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--pub-navy);
  line-height: 1.25;
}
.pub-account-type-desc {
  font-size: 0.85rem;
  color: var(--pub-muted);
  line-height: 1.4;
}
.pub-account-type-arrow {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pub-navy);
  opacity: 0.55;
  transition: transform 160ms ease, opacity 160ms ease;
}
.pub-account-type-card.is-selected .pub-account-type-arrow {
  opacity: 1;
  transform: translateX(2px);
}
@media (min-width: 720px) {
  .pub-account-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Multiple category badges — wrap ke baris baru bila sempit */
.pub-news-meta { flex-wrap: wrap; align-items: center; }
.pub-news-cat + .pub-news-cat { margin-left: 0; }
.pub-news-cat--more {
  background: var(--apj-surface-muted, rgba(12, 18, 32, 0.06));
  color: var(--pub-muted, #5c6775);
}

/* —— Article card: kategori pills (ganti "Baca selengkapnya") —— */
.article-card-cats {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.5rem;
}
.article-card-cats li { margin: 0; }
.article-card-cats .article-card-cat {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pub-navy, #0b3a66);
  background: var(--pub-signal-soft, rgba(94, 234, 212, 0.16));
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.article-card-cats .article-card-cat:hover {
  background: var(--pub-navy, #0b3a66);
  color: #fff;
  transform: translateY(-1px);
}

/* Filtered-by-category header — tambah meta breadcrumb-like */
.article-grid-header .article-grid-count a {
  color: var(--pub-navy, #0b3a66);
  text-decoration: none;
  font-weight: 600;
  margin-left: 0.4rem;
}
.article-grid-header .article-grid-count a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* —— Pager server-side (Laravel paginator `apj`) ——
   Dipakai $paginator->links() di halaman admin/public. Menggantikan
   paginator Tailwind bawaan yang utility class-nya tidak pernah
   terkompilasi di layout ini. */
.apj-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
  width: 100%;
  margin-top: 0.85rem;
}

/* Beberapa partial membungkus links() dengan .apj-pagination yang
   sudah jadi flex row — pager di dalamnya tetap harus selebar wrapper. */
.apj-pagination > .apj-pager {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}

.apj-pager-info {
  margin: 0;
  font-size: 0.85rem;
  color: var(--apj-muted, #6b7280);
}

.apj-pager-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-left: auto;
}

.apj-pager-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 2.15rem;
  height: 2.15rem;
  padding: 0 0.65rem;
  border: 1px solid var(--apj-border, #e5e7eb);
  border-radius: 8px;
  background: var(--apj-surface, #ffffff);
  color: var(--apj-text, #1f2937);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.apj-pager-link svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
}

a.apj-pager-link:hover {
  background: var(--apj-primary-soft, rgba(11, 92, 171, 0.12));
  border-color: var(--apj-primary, #0b5cab);
  color: var(--apj-primary, #0b5cab);
}

.apj-pager-link:focus-visible {
  outline: 2px solid var(--apj-primary, #0b5cab);
  outline-offset: 2px;
}

.apj-pager-link.is-active {
  background: var(--apj-primary, #0b5cab);
  border-color: var(--apj-primary, #0b5cab);
  color: #fff;
  cursor: default;
}

.apj-pager-link.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.apj-pager-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  color: var(--apj-muted, #6b7280);
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .apj-pager {
    justify-content: center;
  }

  .apj-pager-info {
    width: 100%;
    text-align: center;
  }

  .apj-pager-nav {
    margin-left: 0;
    justify-content: center;
  }

  .apj-pager-text {
    display: none;
  }
}