/* =========================================================
   KELAMPUNG DESIGN SYSTEM
   Mobile-first. Breakpoints: 360 / 390 / 430 / 768 / 1024 / 1440
   Principle: clarity > decoration
   ========================================================= */

:root {
  /* ---- Color ----
     Palet resmi Gamma (brand.gamma.app), diterapkan apa adanya:
     Sparkling White, Moonbeam, Glacier, Periwinkle, Sky, Ultramarine,
     Deep Ocean, Deep Space, + aksen playful (Flamingo/Rocket Fire) dipakai
     terbatas sesuai prinsip brand mereka sendiri ("gunakan dengan restraint"). */
  --k-white: #ffffff;         /* Sparkling White */
  --k-moonbeam: #faf9f5;      /* warm off-white */
  --k-glacier: #e8eefc;       /* light blue bg */
  --k-periwinkle: #cddafa;    /* mid-light blue */
  --k-sky: #84c1fa;           /* Biru aksen terang */
  --k-ultramarine: #0540ad;   /* Biru utama Kelampung (tombol, link, CTA) */
  --k-deep-ocean: #002253;    /* Navy gelap Kelampung (heading, footer, logo) */
  --k-deep-space: #000e21;    /* near-black navy */
  --k-flamingo: #f578de;      /* aksen playful - terbatas */
  --k-rocket-fire: #ff5000;   /* aksen hangat - terbatas */
  --k-evergreen: #1a561c;

  --k-color-bg: var(--k-white);
  --k-color-bg-subtle: var(--k-glacier);
  --k-color-surface: var(--k-white);
  --k-color-border: var(--k-periwinkle);
  --k-color-text: var(--k-deep-space);
  --k-color-text-muted: #66666b;   /* Abu-abu teks body Kelampung */
  --k-color-text-faint: #838ba3;

  --k-color-primary: var(--k-ultramarine);
  --k-color-primary-dark: var(--k-deep-ocean);
  --k-color-primary-subtle: var(--k-glacier);

  --k-color-accent: var(--k-sky);
  --k-color-accent-subtle: var(--k-glacier);

  --k-color-warning: #a5690a;
  --k-color-warning-subtle: #fdf1de;
  --k-color-danger: #b3271e;
  --k-color-danger-subtle: #fbe6e4;
  --k-color-success: var(--k-evergreen);
  --k-color-success-subtle: #e5f5eb;

  --k-color-focus: var(--k-ultramarine);

  /* ---- Footer (Deep Ocean, warna utama logo) ---- */
  --k-color-footer-bg: var(--k-deep-ocean);
  --k-color-footer-text: rgba(255, 255, 255, 0.72);
  --k-color-footer-heading: #ffffff;
  --k-color-footer-border: rgba(255, 255, 255, 0.14);

  /* ---- Typography ----
     Font asli Gamma (ES Build / PP Mori) berlisensi berbayar, tidak tersedia
     bebas. Dipakai padanan gratis paling dekat karakternya: Space Grotesk
     (geometris, tegas — untuk heading) dan Inter (netral, legible — body). */
  --k-font-heading: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --k-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --k-font-serif: Georgia, 'Times New Roman', serif;

  --k-fs-xs: 0.75rem;
  --k-fs-sm: 0.9375rem;
  --k-fs-base: 1.0625rem;
  --k-fs-md: 1.25rem;
  --k-fs-lg: 1.75rem;
  --k-fs-xl: 2.5rem;
  --k-fs-2xl: 3.25rem;

  --k-lh-tight: 1.1;
  --k-lh-normal: 1.6;
  --k-lh-relaxed: 1.8;

  --k-ls-tight: -0.02em; /* -2% sesuai panduan brand Gamma untuk headline */

  /* ---- Spacing (4px scale) ---- */
  --k-space-1: 0.25rem;
  --k-space-2: 0.5rem;
  --k-space-3: 0.75rem;
  --k-space-4: 1rem;
  --k-space-5: 1.25rem;
  --k-space-6: 1.5rem;
  --k-space-8: 2rem;
  --k-space-10: 2.5rem;
  --k-space-12: 3rem;

  /* ---- Radius / Shadow ----
     Gamma memakai radius besar & tombol pill penuh di semua CTA. */
  --k-radius-sm: 10px;
  --k-radius-md: 16px;
  --k-radius-lg: 24px;
  --k-radius-xl: 32px;
  --k-radius-full: 999px;

  --k-shadow-sm: 0 2px 6px rgba(0, 34, 83, 0.06);
  --k-shadow-md: 0 8px 24px rgba(0, 34, 83, 0.10);
  --k-shadow-lg: 0 20px 48px rgba(0, 34, 83, 0.16);

  /* ---- Layout ---- */
  --k-container: 1120px;
  --k-container-narrow: 760px;
  --k-touch-target: 44px;
  --k-header-height: 76px;
  --k-tabbar-height: 64px;
}

/* ---------------------------------------------------------
   RESET / BASE
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--k-font-body);
  font-size: var(--k-fs-base);
  line-height: var(--k-lh-normal);
  color: var(--k-color-text);
  background: var(--k-color-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--k-color-focus);
  outline-offset: 2px;
}

.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--k-container);
  margin-inline: auto;
  padding-inline: var(--k-space-4);
}
.container--narrow { max-width: var(--k-container-narrow); }

/* ---------------------------------------------------------
   TYPOGRAPHY
   --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--k-font-heading);
  line-height: var(--k-lh-tight);
  font-weight: 700;
  letter-spacing: var(--k-ls-tight);
  color: var(--k-color-primary-dark);
  margin: 0 0 var(--k-space-3);
}
h1 { font-size: var(--k-fs-xl); }
h2 { font-size: var(--k-fs-lg); }
h3 { font-size: var(--k-fs-md); font-weight: 700; letter-spacing: normal; }
p { margin: 0 0 var(--k-space-4); color: var(--k-color-text); }

/* ---------------------------------------------------------
   SITE HEADER
   --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(205, 218, 250, 0.55);
  /* Melengkung di ujung kiri/kanan bawah — bukan kotak flat polos. */
  border-radius: 0 0 var(--k-radius-lg) var(--k-radius-lg);
}
/* Fallback bersih kalau backdrop-filter tidak didukung browser */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--k-color-bg); }
}

/* --- Baris ikon utama ---
   Mobile: Logo (kiri) — Menu — Tulis — Akun (kanan), dalam urutan itu.
   Desktop: Menu (kiri) — Logo (tengah, benar-benar center) — Search, Tulis, Akun (kanan).
   Dipakai grid-template-areas supaya elemen yang SAMA bisa dipindah posisi
   visualnya per breakpoint tanpa duplikasi markup. */
.site-header__inner {
  width: 100%;
  min-height: var(--k-header-height);
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  grid-template-areas: "logo menu search notif account";
  align-items: center;
  gap: var(--k-space-2);
}
.site-branding { grid-area: logo; justify-self: start; text-align: left; min-width: 0; }
.site-header__search-zone { grid-area: search; display: flex; align-items: center; }
.site-header__notif-zone { grid-area: notif; display: flex; align-items: center; }
.site-header__account-zone { grid-area: account; display: flex; align-items: center; }
.site-header__menu-zone { grid-area: menu; display: flex; align-items: center; }

.site-branding__link {
  display: flex;
  align-items: center;
  gap: var(--k-space-2);
  font-weight: 800;
  letter-spacing: var(--k-ls-tight);
  font-size: var(--k-fs-md);
  color: var(--k-color-primary-dark);
}
.site-branding__logo {
  height: 36px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}
@media (min-width: 768px) {
  .site-branding__logo { height: 52px; max-width: 240px; }
}
.site-footer__logo {
  height: 32px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
  /* Paksa logo tampil putih polos di atas footer navy, tanpa perlu file terpisah. */
  filter: brightness(0) invert(1);
}

/* Efek gradasi warna berjalan di atas logo, berulang dari kiri ke kanan.
   Logo aslinya file gambar (bukan teks), jadi tidak bisa dikasih gradient
   lewat teknik "text gradient" biasa. Supaya gradasinya PERSIS mengikuti
   siluet logo (bukan kotak) — bukan cuma transparan di bagian yang
   transparan pada logo — pseudo-element gradasinya di-mask pakai logo
   yang sama persis (--logo-mask-url, di-set inline lewat header.php),
   jadi bagian yang transparan di logo otomatis ikut transparan di sini.
   mix-blend-mode menambah efek "menyatu" dengan warna asli logo. */
.logo-shimmer {
  position: relative;
  display: inline-flex;
  isolation: isolate;
}
.logo-shimmer::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: linear-gradient(
    100deg,
    transparent 0%,
    rgba(132, 193, 250, 0.95) 30%,
    rgba(24, 98, 212, 1) 50%,
    rgba(245, 120, 222, 0.9) 70%,
    transparent 100%
  );
  background-size: 250% 100%;
  background-position: -120% 0;
  background-repeat: no-repeat;
  -webkit-mask-image: var(--logo-mask-url);
  mask-image: var(--logo-mask-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: kelampung-logo-shimmer 2.2s ease-in-out 2;
  animation-delay: 0.3s;
}
@keyframes kelampung-logo-shimmer {
  0%   { background-position: -120% 0; }
  55%  { background-position: 180% 0; }
  100% { background-position: 180% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-shimmer::after { animation: none; display: none; }
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--k-touch-target);
  height: var(--k-touch-target);
  border-radius: var(--k-radius-full);
  border: none;
  background: rgba(0, 34, 83, 0.05);
  color: var(--k-color-primary-dark);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.icon-btn .icon { width: 22px; height: 22px; }
.icon-btn:hover { background: var(--k-periwinkle); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn[aria-expanded="true"] { background: var(--k-color-primary); color: #fff; }

/* Bayangan halus saat halaman di-scroll — memberi kedalaman pada header glass */
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(0, 34, 83, 0.08); }

/* Aksi akun: ikon pada mobile, tombol teks pada tablet/desktop. */
.header-desktop-action { display: none; }
.header-mobile-action { display: inline-flex; }
@media (min-width: 768px) {

  .header-desktop-action { display: inline-flex; }
  .header-mobile-action { display: none; }
}
/* Ikon "Tulis" versi terkunci di mobile perlu warna locked juga (bukan cuma teksnya di desktop) */
.icon-btn.btn--locked { background: rgba(0, 34, 83, 0.06); }
.icon-btn.btn--locked:hover { background: rgba(0, 34, 83, 0.1); }

/* Tombol/elemen fitur yang masih dalam pengembangan ("Segera Hadir") */
.btn.btn--locked {
  background: rgba(0, 34, 83, 0.06);
  color: var(--k-color-primary-dark);
  border-color: transparent;
  cursor: pointer;
}
.btn.btn--locked:hover { background: rgba(0, 34, 83, 0.1); }
.btn--locked .icon { width: 16px; height: 16px; }

.locked-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--k-tabbar-height) + var(--k-space-4));
  transform: translateX(-50%) translateY(12px);
  max-width: calc(100% - var(--k-space-8));
  background: var(--k-color-primary-dark);
  color: #fff;
  padding: var(--k-space-3) var(--k-space-5);
  border-radius: var(--k-radius-full);
  box-shadow: var(--k-shadow-lg);
  font-size: var(--k-fs-sm);
  font-weight: 600;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 80;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.locked-toast.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
body:not(.has-tabbar) .locked-toast { bottom: var(--k-space-4); }

/* ---------------------------------------------------------
   SEARCH PANEL (dropdown di bawah header, tersembunyi default)
   Sebelumnya elemen ini tidak punya CSS sama sekali sehingga selalu
   tampil sebagai block statis — menyebabkan tampilan "dobel" dengan
   ikon cari dan merusak layout mobile. Sekarang jadi overlay yang
   benar-benar disembunyikan sampai di-toggle lewat JS.
   --------------------------------------------------------- */
.search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 39;
  background: var(--k-white);
  border-bottom: 1px solid var(--k-color-border);
  box-shadow: var(--k-shadow-md);
  padding-block: var(--k-space-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.search-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.search-panel__row { display: flex; gap: var(--k-space-2); align-items: center; }
.search-panel__row .form-input { flex: 1; }
.search-panel__close { flex-shrink: 0; }

/* ---------------------------------------------------------
   NOTIFIKASI — lonceng di header + dropdown panel.
   --------------------------------------------------------- */
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--k-radius-full);
  background: var(--k-color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.site-header__notif-zone .icon-btn { position: relative; }

.notif-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 39;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0.18s;
}
.notif-backdrop.is-open { visibility: visible; pointer-events: auto; }

.notif-panel {
  position: absolute;
  top: 100%;
  right: var(--k-space-4);
  left: var(--k-space-4);
  z-index: 40;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--k-white);
  border-radius: var(--k-radius-md);
  box-shadow: var(--k-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.notif-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.notif-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--k-space-4);
  border-bottom: 1px solid var(--k-color-border);
  flex-shrink: 0;
}
.notif-panel__title { margin: 0; font-size: var(--k-fs-md); }
.notif-panel__mark-all { font-size: var(--k-fs-xs); font-weight: 700; color: var(--k-color-primary); background: none; border: none; cursor: pointer; }
.notif-panel__list { overflow-y: auto; }
.notif-panel__loading, .notif-panel__empty { padding: var(--k-space-6); text-align: center; color: var(--k-color-text-faint); font-size: var(--k-fs-sm); }

.notif-item {
  display: block;
  padding: var(--k-space-3) var(--k-space-4);
  border-bottom: 1px solid var(--k-color-border);
  font-size: var(--k-fs-sm);
  color: var(--k-color-text);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--k-color-bg-subtle); }
.notif-item.is-unread { background: var(--k-glacier); }
.notif-item__message { margin: 0 0 var(--k-space-1); line-height: 1.4; }
.notif-item__time { font-size: var(--k-fs-xs); color: var(--k-color-text-faint); }

@media (min-width: 768px) {
  .notif-panel { left: auto; right: 0; width: 360px; }
}

/* Backdrop tipis agar area di belakang panel tidak bisa diklik tembus,
   dan secara visual menegaskan bahwa ini adalah overlay, bukan bagian
   permanen dari halaman. */
.search-backdrop {
  position: fixed;
  top: var(--k-header-height);
  left: 0; right: 0; bottom: 0;
  z-index: 38;
  background: rgba(0, 14, 33, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s;
}
.search-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

/* Mobile off-canvas menu — dipakai di SEMUA breakpoint (desktop pun memakai
   menu yang sama, bukan nav horizontal terpisah), agar navigasi konsisten
   dan header tetap bersih di semua ukuran layar. */
.mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, var(--k-white) 0%, var(--k-glacier) 45%, var(--k-periwinkle) 100%);
  transform: translateX(100%);
  transition: transform 0.28s ease;
}
.mobile-menu.is-open { transform: translateX(0); }

/* Backdrop di belakang drawer — pada mobile nyaris tak terlihat (drawer
   menutupi seluruh layar), tapi penting di tablet/desktop di mana drawer
   hanya menutupi sebagian layar. */
.mobile-menu-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 59;
  background: rgba(0, 14, 33, 0.32);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s ease, visibility 0.24s;
}
.mobile-menu-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.mobile-menu__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--k-space-5);
  border-bottom: 1px solid rgba(0, 34, 83, 0.08);
}
.mobile-menu__logo { height: 42px; width: auto; max-width: 220px; object-fit: contain; }
.mobile-menu__body { flex: 1; overflow-y: auto; padding: var(--k-space-2) var(--k-space-5); }
.mobile-menu .nav-list { display: flex; flex-direction: column; gap: 0; }
.mobile-menu .nav-list__item {
  border-bottom: 1px solid rgba(0, 34, 83, 0.08);
}
.mobile-menu .nav-list__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--k-space-4) var(--k-space-2);
  border-radius: 0;
  font-family: var(--k-font-heading);
  font-size: var(--k-fs-lg);
  font-weight: 700;
  letter-spacing: var(--k-ls-tight);
  color: var(--k-color-primary-dark);
  background: transparent;
}
.mobile-menu .nav-list__item a:hover,
.mobile-menu .nav-list__item.is-current a { background: transparent; color: var(--k-color-primary); }
.mobile-menu__footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--k-space-3);
  padding: var(--k-space-5);
  padding-bottom: calc(var(--k-space-5) + env(safe-area-inset-bottom));
}
.mobile-menu__footer .btn { width: 100%; }
.mobile-menu__footer .btn--outline { background: rgba(255, 255, 255, 0.6); border-color: rgba(0, 34, 83, 0.18); }

/* Bottom tab bar (mobile only) */
.mobile-tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  height: var(--k-tabbar-height);
  display: flex;
  background: var(--k-ultramarine);
  border-top: 1px solid rgba(255,255,255,.18);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 8px 30px rgba(0, 34, 83, .22);
}
.mobile-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--k-touch-target);
  color: #fff;
  font-size: var(--k-fs-xs);
  font-weight: 600;
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  opacity: .86;
  transition: opacity .18s ease, background .18s ease;
}
.mobile-tabbar__item.is-current,
.mobile-tabbar__item:hover,
.mobile-tabbar__item:focus-visible {
  color: #fff;
  opacity: 1;
  background: rgba(255,255,255,.10);
}
.mobile-tabbar__item .icon { width: 22px; height: 22px; }

body.has-tabbar { padding-bottom: calc(var(--k-tabbar-height) + var(--k-space-4)); }

/* ---------------------------------------------------------
   BUTTONS / FORMS
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-space-2);
  min-height: var(--k-touch-target);
  padding: 0 var(--k-space-6);
  border-radius: var(--k-radius-full);
  font-weight: 700;
  font-size: var(--k-fs-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn--primary { background: var(--k-color-primary); color: #fff; box-shadow: var(--k-shadow-sm); }
.btn--primary:hover { background: var(--k-color-primary-dark); transform: translateY(-1px); box-shadow: var(--k-shadow-md); }
.btn--outline { background: transparent; border-color: var(--k-color-border); color: var(--k-color-text); }
.btn--outline:hover { border-color: var(--k-color-primary); color: var(--k-color-primary); background: var(--k-color-bg-subtle); }
.btn--ghost { background: transparent; color: var(--k-color-text-muted); }
.btn--danger { background: var(--k-color-danger); color: #fff; }
.btn--sm { min-height: 38px; padding: 0 var(--k-space-4); font-size: var(--k-fs-xs); }
.btn--block { width: 100%; }

.form-field { margin-bottom: var(--k-space-4); }
.form-label { display: block; font-weight: 600; font-size: var(--k-fs-sm); margin-bottom: var(--k-space-2); }
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  min-height: var(--k-touch-target);
  padding: var(--k-space-3);
  border: 1px solid var(--k-color-border);
  border-radius: var(--k-radius-md);
  font-size: var(--k-fs-base);
  background: var(--k-color-surface);
  color: var(--k-color-text);
}
.form-textarea { min-height: 140px; resize: vertical; }
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--k-color-primary);
}
.form-hint { font-size: var(--k-fs-xs); color: var(--k-color-text-faint); margin-top: var(--k-space-1); }

/* ---------------------------------------------------------
   CARDS
   --------------------------------------------------------- */
.card {
  background: var(--k-color-surface);
  border: 1px solid var(--k-color-border);
  border-radius: var(--k-radius-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.article-card { display: flex; flex-direction: column; height: 100%; }
.article-card:hover { transform: translateY(-4px); box-shadow: var(--k-shadow-md); border-color: transparent; }
.article-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--k-color-bg-subtle); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { padding: var(--k-space-5); display: flex; flex-direction: column; gap: var(--k-space-2); flex: 1; }
.article-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-1) var(--k-space-2); font-size: var(--k-fs-xs); color: var(--k-color-text-faint); }
.article-card__title { font-size: var(--k-fs-md); margin: 0; }
.article-card__title a:hover { color: var(--k-color-primary); }
.article-card__excerpt { font-size: var(--k-fs-sm); color: var(--k-color-text-muted); margin: 0; }

.article-card--horizontal { flex-direction: row; }
.article-card--horizontal .article-card__media { width: 112px; flex-shrink: 0; aspect-ratio: 1/1; }
.article-card--horizontal .article-card__body { padding: var(--k-space-2) var(--k-space-3); }

.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--k-space-4); }

/* ---------------------------------------------------------
   BADGES
   --------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-1);
  padding: var(--k-space-1) var(--k-space-3);
  border-radius: var(--k-radius-full);
  font-size: var(--k-fs-xs);
  font-weight: 700;
  background: var(--k-color-bg-subtle);
  color: var(--k-color-text-muted);
}
.badge--primary { background: var(--k-color-primary-subtle); color: var(--k-color-primary-dark); }
.badge--accent { background: var(--k-periwinkle); color: var(--k-color-primary-dark); }
.badge--success { background: var(--k-color-success-subtle); color: var(--k-color-success); }
.badge--warning { background: var(--k-color-warning-subtle); color: var(--k-color-warning); }
.badge--danger { background: var(--k-color-danger-subtle); color: var(--k-color-danger); }
/* Aksen playful ala Gamma — dipakai terbatas, mis. label "Trending"/"Pilihan Editor" */
.badge--flamingo { background: #fde9fa; color: #a3197a; }
.badge--fire { background: #ffe6db; color: #b23c00; }

/* ---------------------------------------------------------
   ALERTS / EMPTY STATES
   --------------------------------------------------------- */
.alert { padding: var(--k-space-4); border-radius: var(--k-radius-md); border: 1px solid var(--k-color-border); font-size: var(--k-fs-sm); }
.alert--success { background: var(--k-color-success-subtle); border-color: transparent; color: var(--k-color-success); }
.alert--danger { background: var(--k-color-danger-subtle); border-color: transparent; color: var(--k-color-danger); }
.alert--warning { background: var(--k-color-warning-subtle); border-color: transparent; color: var(--k-color-warning); }

.empty-state { text-align: center; padding: var(--k-space-10) var(--k-space-4); color: var(--k-color-text-faint); }
.empty-state .icon { width: 40px; height: 40px; margin: 0 auto var(--k-space-3); }

/* ---------------------------------------------------------
   BREADCRUMBS
   --------------------------------------------------------- */
.breadcrumbs { padding: var(--k-space-3) 0; }
.breadcrumbs__list { display: flex; flex-wrap: wrap; gap: var(--k-space-2); font-size: var(--k-fs-xs); color: var(--k-color-text-faint); }
.breadcrumbs__item:not(:last-child)::after { content: '/'; margin-left: var(--k-space-2); }

/* ---------------------------------------------------------
   ARTICLE PAGE
   --------------------------------------------------------- */
.article-header { padding-block: var(--k-space-4); }

/* Badge kategori/tag: flex+gap eksplisit di kontainer supaya jarak antar
   badge selalu konsisten (dulu mengandalkan whitespace HTML yang rapuh
   dan menghasilkan jarak tidak simetris). */
.article-header__category {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-space-2);
  margin-bottom: var(--k-space-3);
}

/* Ukuran judul artikel: fluid dengan clamp() — kecil & pas di layar kecil,
   membesar halus ke desktop. (Sebelumnya base/mobile memakai --k-fs-2xl
   yang berukuran 3.25rem dan baru mengecil di breakpoint desktop — kebalik
   dari yang seharusnya, itu sebabnya judul di mobile tampak kegedean.) */
.article-header__title {
  font-size: clamp(1.5rem, 4.5vw + 0.85rem, 2.75rem);
  line-height: 1.2;
}

.article-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-space-4);
  font-size: var(--k-fs-sm);
  color: var(--k-color-text-muted);
}
.article-header__author { display: flex; align-items: center; gap: var(--k-space-2); }
.article-header__author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
/* Item meta lain (tanggal, durasi baca): ikon+teks pakai gap yang sama
   persis dengan author, supaya ketiganya terasa satu baris yang stabil,
   bukan berjejal dengan jarak berbeda-beda. */
.article-header__meta-item { display: inline-flex; align-items: center; gap: var(--k-space-2); }
.article-header__meta-item .icon { width: 16px; height: 16px; flex-shrink: 0; }

.article-media { margin-block: var(--k-space-4); border-radius: var(--k-radius-lg); overflow: hidden; }

/* ---------------------------------------------------------
   DAFTAR ISI (Table of Contents) — bisa dipersempit/dilipat,
   ditempatkan tepat di bawah gambar utama.
   --------------------------------------------------------- */
.toc {
  margin-block: var(--k-space-5);
  border: 1px solid var(--k-color-border);
  border-radius: var(--k-radius-md);
  background: var(--k-color-bg-subtle);
  overflow: hidden;
}
.toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--k-space-3) var(--k-space-4);
  cursor: pointer;
  font-weight: 700;
  color: var(--k-color-primary-dark);
  list-style: none;
}
.toc__toggle::-webkit-details-marker { display: none; }
.toc__toggle-label { display: inline-flex; align-items: center; gap: var(--k-space-2); }
.toc__toggle-label .icon { width: 18px; height: 18px; }
.toc__chevron { width: 18px; height: 18px; transition: transform 0.2s ease; transform: rotate(90deg); }
.toc[open] .toc__chevron { transform: rotate(-90deg); }
.toc__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--k-space-4) var(--k-space-4);
  border-top: 1px solid var(--k-color-border);
  padding-top: var(--k-space-3);
}
.toc__item { margin-bottom: var(--k-space-2); }
.toc__item a { font-size: var(--k-fs-sm); color: var(--k-color-text-muted); }
.toc__item a:hover { color: var(--k-color-primary); }
.toc__item--level-3 { margin-left: var(--k-space-4); }

.article-content { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem); line-height: var(--k-lh-relaxed); }
.article-content p { margin-bottom: var(--k-space-5); }
.article-content h2 { margin-top: var(--k-space-8); scroll-margin-top: calc(var(--k-header-height) + var(--k-space-3)); }
.article-content h3 { margin-top: var(--k-space-6); scroll-margin-top: calc(var(--k-header-height) + var(--k-space-3)); }
.article-content img { border-radius: var(--k-radius-md); }
.article-content blockquote {
  margin: var(--k-space-6) 0;
  padding: var(--k-space-4) var(--k-space-5);
  border-left: 3px solid var(--k-color-primary);
  background: var(--k-color-bg-subtle);
  font-style: italic;
  color: var(--k-color-text-muted);
}

.article-source {
  margin-top: var(--k-space-6);
  padding: var(--k-space-4);
  border: 1px solid var(--k-color-border);
  border-radius: var(--k-radius-md);
  font-size: var(--k-fs-sm);
}

/* Disclaimer konten pengguna — muncul sebelum "Sumber Informasi",
   khusus artikel penulis warga (bukan artikel resmi redaksi). */
.user-content-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--k-space-3);
  margin-top: var(--k-space-6);
  padding: var(--k-space-4);
  background: var(--k-color-warning-subtle);
  border-radius: var(--k-radius-md);
  font-size: var(--k-fs-sm);
  color: var(--k-color-warning);
}
.user-content-disclaimer .icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.user-content-disclaimer p { margin: 0; color: inherit; line-height: 1.5; }

/* ---------------------------------------------------------
   SHARE ROW — WhatsApp, X, Threads, Facebook, Salin Tautan
   --------------------------------------------------------- */
.share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--k-space-2);
  margin-block: var(--k-space-6);
}
.share-row__label { font-size: var(--k-fs-sm); font-weight: 700; color: var(--k-color-text-muted); margin-right: var(--k-space-1); }
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--k-radius-full);
  background: var(--k-color-bg-subtle);
  color: var(--k-color-text-muted);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.share-btn .icon { width: 18px; height: 18px; }
.share-btn:hover { transform: translateY(-1px); }
.share-btn--whatsapp:hover { background: #25d366; color: #fff; }
.share-btn--x:hover { background: #000; color: #fff; }
.share-btn--threads:hover { background: #000; color: #fff; }
.share-btn--facebook:hover { background: #1877f2; color: #fff; }
.share-btn.is-copied { background: var(--k-color-success); color: #fff; }

.article-actions { display: flex; gap: var(--k-space-2); margin-block: var(--k-space-6); flex-wrap: wrap; }

.author-box {
  display: flex;
  gap: var(--k-space-4);
  padding: var(--k-space-5);
  background: var(--k-color-bg-subtle);
  border-radius: var(--k-radius-lg);
  margin-block: var(--k-space-8);
}
.author-box img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-box__identity { display: flex; align-items: center; flex-wrap: wrap; gap: var(--k-space-2); margin-bottom: var(--k-space-2); }
.author-box__body { flex: 1; min-width: 0; }
.author-box__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--k-space-2); margin-top: var(--k-space-3); }
.author-box__actions form { margin: 0; }
.verified-badge-inline { display: inline-flex; align-items: center; }
.verified-badge-inline .verified-badge { position: static; width: 18px; height: 18px; }

/* Badge verifikasi (centang biru) — overlay di pojok kanan-bawah avatar. */
.kelampung-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.kelampung-avatar-wrap__img { display: flex; }
.kelampung-avatar-wrap img { display: block; }
.verified-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: inline-flex;
  border: none;
  background: transparent;
  padding: 0;
  cursor: default;
}
.verified-badge__icon { width: 100%; height: 100%; display: block; }
/* Khusus di author-box: badge bisa diklik, tampilkan pointer + sedikit membesar. */
button.verified-badge { cursor: pointer; }
button.verified-badge:hover .verified-badge__icon,
button.verified-badge:focus-visible .verified-badge__icon { transform: scale(1.12); }
.verified-badge__icon { transition: transform 0.15s ease; }

/* ---------------------------------------------------------
   HOMEPAGE SECTIONS
   --------------------------------------------------------- */
.section { padding-block: var(--k-space-10); }
.section--tint { background: var(--k-glacier); }

/* Network — gradasi biru langit bersih (sky -> biru utama -> navy),
   murni dari palet Kelampung sendiri, tanpa ungu. Teks otomatis putih. */
.section--brand {
  background: linear-gradient(180deg, var(--k-sky) 0%, var(--k-color-primary) 55%, var(--k-deep-ocean) 100%);
  color: #fff;
  padding-block: var(--k-space-8);
}
.section--brand .section__title { color: #fff; }

/* Budaya — border/kartu ala Network, tapi arah gradasi dibalik (navy dulu
   baru biru terang) supaya tetap beda nuansa dari Network — TANPA ungu
   sama sekali, murni dari palet biru/navy Kelampung sendiri. */
.section--culture {
  background: linear-gradient(135deg, var(--k-deep-space) 0%, var(--k-deep-ocean) 55%, var(--k-ultramarine) 100%);
  color: #fff;
  padding-block: var(--k-space-8);
}
.section--culture .section__title { color: #fff; }
.section--culture .network-card__publisher { color: var(--k-ultramarine); }

/* ---------------------------------------------------------
   NETWORK — kartu link keluar ke media partner.
   Desktop: grid biasa (di dalam .container). Mobile: carousel horizontal,
   2 kartu tampil, auto-advance 1 per 1, loop balik ke awal saat mentok
   (lihat assets/js/network-carousel.js).
   --------------------------------------------------------- */
.network-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--k-space-4);
  padding-inline: var(--k-space-4);
  max-width: var(--k-container);
  margin-inline: auto;
}
.network-card {
  display: flex;
  flex-direction: column;
  background: var(--k-white);
  border-radius: var(--k-radius-lg);
  overflow: hidden;
  color: var(--k-color-text);
  box-shadow: var(--k-shadow-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.network-card:hover { box-shadow: var(--k-shadow-lg); transform: translateY(-3px); }
.network-card__media { aspect-ratio: 3/2; background: var(--k-color-bg-subtle); }
.network-card__media img, .network-card__media--placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.network-card__media--placeholder { background: linear-gradient(135deg, var(--k-glacier), var(--k-periwinkle)); }
.network-card__body { padding: var(--k-space-4); }
.network-card__publisher { display: inline-flex; align-items: center; gap: 3px; font-size: var(--k-fs-xs); font-weight: 700; color: var(--k-color-primary); margin-bottom: var(--k-space-2); }
.network-card__verified { width: 14px; height: 14px; flex-shrink: 0; }
.network-card__title { font-size: var(--k-fs-sm); margin: 0; line-height: 1.4; }

@media (max-width: 767.98px) {
  .network-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--k-space-4);
    gap: var(--k-space-3);
    scrollbar-width: none;
    max-width: none;
  }
  .network-carousel::-webkit-scrollbar { display: none; }
  .network-card {
    flex: 0 0 auto;
    /* Dua kartu tampil sekaligus di layar (dikurangi gap & sedikit intip
       kartu berikutnya supaya terlihat ada lanjutannya). */
    width: calc(50% - var(--k-space-2));
    scroll-snap-align: start;
  }
}
.section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--k-space-6); }
.section__title { margin: 0; }
.section__link { font-size: var(--k-fs-sm); font-weight: 700; color: var(--k-color-primary); display: inline-flex; align-items: center; gap: var(--k-space-1); }
.section__more { display: flex; justify-content: center; margin-top: var(--k-space-6); }
.section__hint { font-size: var(--k-fs-xs); color: var(--k-color-text-faint); }
.section__subtitle { font-size: var(--k-fs-sm); color: var(--k-color-text-muted); margin: var(--k-space-1) 0 0; }

/* Grid pendukung di section hero+4 (Berita Daerah dkk) — 2 kolom mulai
   tablet supaya terasa beda dengan grid utama "Terbaru" (3 kolom). */
.card-grid--support { grid-template-columns: repeat(2, 1fr); }

/* ---------------------------------------------------------
   POPULER — kartu ala referensi: strip kategori (bar aksen + label) di
   atas gambar, lalu gradient gelap di bawah gambar berisi judul putih,
   avatar+nama penulis, dan waktu relatif. Swipe horizontal (scroll-snap
   native, tanpa JS).
   --------------------------------------------------------- */
.popular-scroll {
  display: flex;
  gap: var(--k-space-3);
  overflow-x: auto;
  padding: var(--k-space-2) var(--k-space-4) var(--k-space-5);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.popular-scroll::-webkit-scrollbar { display: none; }
.popular-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 62vw;
  max-width: 240px;
  border-radius: var(--k-radius-lg);
  overflow: hidden;
  background: var(--k-white);
  scroll-snap-align: start;
  box-shadow: var(--k-shadow-md);
}
.popular-card__category {
  display: flex;
  align-items: center;
  gap: var(--k-space-2);
  padding: var(--k-space-3) var(--k-space-3) var(--k-space-2);
  flex-shrink: 0;
}
.popular-card__category-bar {
  width: 4px;
  height: 16px;
  border-radius: var(--k-radius-full);
  background: var(--k-color-primary);
  flex-shrink: 0;
}
.popular-card__category-label {
  font-size: var(--k-fs-xs);
  font-weight: 700;
  color: var(--k-color-primary-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popular-card__media-wrap {
  position: relative;
  flex: 1;
  aspect-ratio: 3/4;
  background: var(--k-color-bg-subtle);
}
.popular-card__media {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.popular-card__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--k-space-2);
  padding: var(--k-space-8) var(--k-space-3) var(--k-space-3);
  background: linear-gradient(180deg, transparent 0%, rgba(0, 14, 33, 0.75) 55%, rgba(0, 14, 33, 0.92) 100%);
}
.popular-card__title {
  color: #fff;
  font-weight: 700;
  font-size: var(--k-fs-sm);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.popular-card__meta { display: flex; align-items: center; gap: var(--k-space-2); }
.popular-card__avatar { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.popular-card__author {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--k-fs-xs);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popular-card__time { color: rgba(255, 255, 255, 0.65); font-size: var(--k-fs-xs); }

@media (min-width: 768px) {
  .popular-card { width: 220px; }
}

/* ---------------------------------------------------------
   PENULIS PILIHAN — avatar bulat bergaya "story" (ring warna brand,
   seperti Instagram Story), scroll horizontal.
   --------------------------------------------------------- */
.writer-scroll {
  display: flex;
  gap: var(--k-space-4);
  overflow-x: auto;
  padding: var(--k-space-2) var(--k-space-1) var(--k-space-3);
  scrollbar-width: none;
}
.writer-scroll::-webkit-scrollbar { display: none; }
.writer-story {
  flex: 0 0 auto;
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--k-space-2);
  text-align: center;
}
/* Ring gradasi warna brand, dengan celah putih antara ring & avatar
   (persis pola visual Instagram Story) — dibuat dari 2 lapis padding,
   bukan cuma border tunggal, supaya terasa "story", bukan avatar biasa. */
.writer-story__ring {
  display: flex;
  padding: 2.5px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--k-sky), var(--k-color-primary), var(--k-deep-ocean));
}
.writer-story__ring .kelampung-avatar-wrap,
.writer-story__ring img {
  display: block;
  border: 2.5px solid var(--k-white);
  border-radius: 50%;
  width: 68px;
  height: 68px;
  object-fit: cover;
}
.writer-story__name {
  font-size: var(--k-fs-xs);
  font-weight: 600;
  color: var(--k-color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------
   FILTER DAERAH — tombol "Pilih Daerah" + bottom-sheet (mobile) /
   modal tengah (desktop) berisi daftar lengkap. Dipilih ketimbang bubble
   berderet karena daerah di Lampung ada 15 — bubble semua akan penuh
   di layar mobile.
   --------------------------------------------------------- */
.daerah-filter { margin-bottom: var(--k-space-6); }
.daerah-filter__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-2);
  padding: var(--k-space-3) var(--k-space-4);
  border-radius: var(--k-radius-full);
  background: var(--k-color-bg-subtle);
  border: 1px solid var(--k-color-border);
  color: var(--k-color-primary-dark);
  font-weight: 700;
  font-size: var(--k-fs-sm);
  cursor: pointer;
}
.daerah-filter__trigger:hover { background: var(--k-periwinkle); }
.daerah-filter__trigger .icon { width: 18px; height: 18px; flex-shrink: 0; }
.daerah-filter__chevron { transform: rotate(90deg); transition: transform 0.2s ease; margin-left: var(--k-space-1); }
.daerah-filter__trigger[aria-expanded="true"] .daerah-filter__chevron { transform: rotate(-90deg); }

.daerah-filter-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 69;
  background: rgba(0, 14, 33, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.daerah-filter-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.daerah-filter-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--k-white);
  border-radius: var(--k-radius-lg) var(--k-radius-lg) 0 0;
  box-shadow: var(--k-shadow-lg);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.daerah-filter-sheet.is-open { transform: translateY(0); }
.daerah-filter-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--k-space-4) var(--k-space-5);
  border-bottom: 1px solid var(--k-color-border);
  flex-shrink: 0;
}
.daerah-filter-sheet__title { margin: 0; font-size: var(--k-fs-md); }
.daerah-filter-sheet__list { list-style: none; margin: 0; padding: var(--k-space-2) 0; overflow-y: auto; }
.daerah-filter-sheet__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--k-space-3) var(--k-space-5);
  color: var(--k-color-text);
  font-weight: 600;
}
.daerah-filter-sheet__list a:hover { background: var(--k-color-bg-subtle); }
.daerah-filter-sheet__list a.is-active { color: var(--k-color-primary); background: var(--k-glacier); }
.daerah-filter-sheet__check { width: 18px; height: 18px; color: var(--k-color-primary); }

@media (min-width: 768px) {
  .daerah-filter-sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(90vw, 420px);
    max-height: min(70vh, 520px);
    border-radius: var(--k-radius-lg);
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s;
  }
  .daerah-filter-sheet.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
  }
}

/* Backdrop "langit" bergradasi — versi CSS murni dari art direction
   "surreal pointillism" Gamma (blue sky, subtle glow), tanpa meniru
   ilustrasi asli mereka. */
.section--hero {
  position: relative;
  background:
    radial-gradient(60% 80% at 15% 0%, rgba(132, 193, 250, 0.55), transparent 60%),
    radial-gradient(50% 70% at 100% 20%, rgba(245, 120, 222, 0.18), transparent 60%),
    linear-gradient(180deg, var(--k-glacier) 0%, var(--k-white) 65%);
  padding-block: var(--k-space-10) var(--k-space-8);
}
.hero-article {
  position: relative;
  border-radius: var(--k-radius-xl);
  overflow: hidden;
  box-shadow: var(--k-shadow-lg);
}
.hero-article__media { aspect-ratio: 4/3; background: var(--k-color-bg-subtle); }
.hero-article__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-article__body { padding: var(--k-space-6); background: var(--k-white); }
.hero-article__title {
  /* "Perkecil sedikit saja" — dulu fixed var(--k-fs-xl)=2.5rem di semua
     ukuran; sekarang fluid dan sedikit lebih kecil di puncaknya, supaya
     judul panjang tidak menutupi seluruh area hero. */
  font-size: clamp(1.35rem, 3.2vw + 0.85rem, 2.25rem);
  line-height: 1.2;
}

/* Varian ringkas dipakai di section Berita Daerah/Wisata & Kuliner/Budaya/
   Komunitas — sama strukturnya, tapi media lebih pendek & judul lebih kecil
   supaya section ini terasa "sekunder" dibanding Headline utama. */
.hero-article--compact { margin-bottom: var(--k-space-5); }
.hero-article--compact .hero-article__media { aspect-ratio: 16/9; }
.hero-article--compact .hero-article__title { font-size: var(--k-fs-lg); }
.hero-article--compact .hero-article__body { padding: var(--k-space-5); }

.cta-write {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--k-ultramarine) 0%, var(--k-deep-ocean) 100%);
  color: #fff;
  border-radius: var(--k-radius-xl);
  padding: var(--k-space-10) var(--k-space-6);
  text-align: center;
}
.cta-write::before,
.cta-write::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
}
.cta-write::before {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(132, 193, 250, 0.45), transparent 70%);
  top: -80px; right: -60px;
}
.cta-write::after {
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(245, 120, 222, 0.35), transparent 70%);
  bottom: -70px; left: -40px;
}
.cta-write h2, .cta-write p, .cta-write .btn { position: relative; z-index: 1; }
.cta-write h2 { color: #fff; }
.cta-write p { color: rgba(255,255,255,0.85); }
.cta-write .btn--primary { background: #fff; color: var(--k-color-primary-dark); }
.cta-write .btn--primary:hover { background: var(--k-glacier); }

/* ---------------------------------------------------------
   DASHBOARD (writer / editor)
   --------------------------------------------------------- */
.dashboard-layout { display: flex; flex-direction: column; gap: var(--k-space-6); }
.dashboard-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--k-space-3); }
.stat-card { padding: var(--k-space-4); border: 1px solid var(--k-color-border); border-radius: var(--k-radius-md); }
.stat-card__value { font-size: var(--k-fs-xl); font-weight: 800; color: var(--k-color-primary-dark); }
.stat-card__label { font-size: var(--k-fs-xs); color: var(--k-color-text-faint); }

.dashboard-table { width: 100%; border-collapse: collapse; font-size: var(--k-fs-sm); }
.dashboard-table th, .dashboard-table td { text-align: left; padding: var(--k-space-3); border-bottom: 1px solid var(--k-color-border); }
.dashboard-table th { color: var(--k-color-text-faint); font-weight: 600; font-size: var(--k-fs-xs); text-transform: uppercase; letter-spacing: 0.03em; }

/* ---------------------------------------------------------
   PAGINATION
   --------------------------------------------------------- */
.pagination { display: flex; justify-content: center; margin-top: var(--k-space-8); }
.pagination__list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--k-space-2); margin: 0; padding: 0; list-style: none; }
.pagination__list li { margin: 0; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 13px; border: 1px solid var(--k-color-border); border-radius: 12px; color: var(--k-color-primary-dark); background: var(--k-white); font-size: var(--k-fs-sm); font-weight: 750; line-height: 1; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 34, 83, .05); transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease; }
.pagination a.page-numbers:hover, .pagination a.page-numbers:focus-visible { color: var(--k-white); border-color: var(--k-color-primary); background: var(--k-color-primary); transform: translateY(-1px); box-shadow: 0 7px 18px rgba(5, 64, 173, .2); }
.pagination .page-numbers.current { color: var(--k-white); border-color: var(--k-color-primary); background: var(--k-color-primary); box-shadow: 0 7px 18px rgba(5, 64, 173, .2); }
.pagination .page-numbers.prev, .pagination .page-numbers.next { min-width: 112px; padding-inline: 17px; }
.pagination .page-numbers.dots { border-color: transparent; background: transparent; box-shadow: none; }
.article-comments-section { margin-top: var(--k-space-8); }

@media (max-width: 620px) {
  .pagination { margin-top: var(--k-space-6); }
  .pagination__list { gap: 7px; }
  .pagination .page-numbers { min-width: 40px; height: 40px; padding-inline: 10px; border-radius: 10px; font-size: 12px; }
  .pagination .page-numbers.prev, .pagination .page-numbers.next { min-width: auto; padding-inline: 13px; }
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
.site-footer { background: var(--k-color-footer-bg); border-top: none; margin-top: var(--k-space-10); }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--k-space-6); padding-block: var(--k-space-8); }
.site-footer__brand { margin-bottom: var(--k-space-3); }
.site-footer .widget-title { color: var(--k-color-footer-heading); }
.site-footer p, .site-footer li, .site-footer a { color: var(--k-color-footer-text); }
.site-footer a:hover { color: #ffffff; }
.site-footer__bottom { border-top: 1px solid var(--k-color-footer-border); padding-block: var(--k-space-4); font-size: var(--k-fs-xs); color: var(--k-color-footer-text); display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-4); }
.site-footer__bottom a { color: var(--k-color-footer-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.site-footer__bottom a:hover { color: #fff; }
.site-footer__copyright { min-width: 0; }
.site-footer__social { display: flex; align-items: center; justify-content: flex-end; gap: var(--k-space-2); flex: 0 0 auto; }
.site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--k-color-footer-border); border-radius: 50%; color: var(--k-color-footer-text); text-decoration: none; transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease; }
.site-footer__social a:hover, .site-footer__social a:focus-visible { color: var(--k-deep-ocean); border-color: #fff; background: #fff; transform: translateY(-1px); }
.site-footer__social .icon { width: 18px; height: 18px; }

@media (max-width: 767.98px) {
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .site-footer__social { order: 1; width: 100%; justify-content: flex-start; flex-wrap: nowrap; }
  .site-footer__copyright { order: 2; }
}

/* ---------------------------------------------------------
   AUTH CARD (halaman login/daftar mandiri: /masuk/, /daftar/)
   --------------------------------------------------------- */
.auth-card {
  max-width: 420px;
  margin-inline: auto;
  padding: var(--k-space-8) var(--k-space-6);
  background: var(--k-white);
  border: 1px solid var(--k-color-border);
  border-radius: var(--k-radius-xl);
  box-shadow: var(--k-shadow-lg);
  text-align: center;
}
.auth-card__logo { height: 40px; width: auto; max-width: 220px; object-fit: contain; margin: 0 auto var(--k-space-6); }
.auth-card__title { margin-bottom: var(--k-space-3); }
.auth-card__desc { color: var(--k-color-text-muted); margin-bottom: var(--k-space-6); }

.auth-form { text-align: left; }
.auth-form .form-group { margin-bottom: var(--k-space-4); }

.auth-card__signup-hint {
  font-size: var(--k-fs-sm);
  color: var(--k-color-text-muted);
  margin: var(--k-space-4) 0 0;
}
.auth-card__signup-hint a { font-weight: 700; color: var(--k-color-primary); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--k-space-3);
  margin: var(--k-space-5) 0;
  color: var(--k-color-text-faint);
  font-size: var(--k-fs-xs);
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--k-color-border);
}

.btn--google { width: 100%; }
.auth-card__note { font-size: var(--k-fs-xs); color: var(--k-color-text-faint); margin: var(--k-space-4) 0 0; }

/* Tombol "Sign in with Google" — mengikuti spesifikasi resmi Google
   (developers.google.com/identity/branding-guidelines), varian Light/Pill.
   Logo "G" TIDAK BOLEH diubah warna/ukurannya (lihat sprite icon-google-logo);
   warna & padding tombol ini juga mengikuti angka persis dari dokumentasi
   mereka, bukan token desain kita sendiri — supaya lolos verifikasi Google. */
.gsi-button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  background: #fff;
  border: 1px solid #747775;
  border-radius: var(--k-radius-full);
  padding-left: 12px;
  padding-right: 12px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
.gsi-button:hover { background: #f8f8f8; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.gsi-button:active { background: #f0f0f0; }
.gsi-button__icon { display: flex; align-items: center; margin-right: 10px; flex-shrink: 0; }
.gsi-button__icon .icon { width: 18px; height: 18px; }
.gsi-button__text {
  color: #1f1f1f;
  font-family: var(--k-font-body), Arial, sans-serif; /* Google Sans tidak tersedia publik; fallback terdekat */
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  flex: 1;
  text-align: center;
}

/* Kontainer tombol Site Kit — tombol sesungguhnya dirender JS Google Site
   Kit sendiri (selalu ikut standar branding terbaru mereka secara otomatis),
   kita hanya atur posisi kontainernya saja. */
.gsi-site-kit-slot { display: flex; justify-content: center; }

/* ---------------------------------------------------------
   FEED /update/ — artikel bertumpuk berkelanjutan (BUKAN satu layar
   penuh per artikel). Scroll halaman biasa, kartu demi kartu ke bawah
   tanpa putus, infinite scroll menambah artikel lama saat mendekati akhir.
   --------------------------------------------------------- */
.fyp-feed { padding-block: var(--k-space-5); }

.fyp-card {
  position: relative;
  margin-bottom: var(--k-space-5);
  border-radius: var(--k-radius-lg);
  overflow: hidden;
  box-shadow: var(--k-shadow-sm);
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}
.fyp-card__link { display: block; position: relative; }
.fyp-card__media { position: relative; width: 100%; aspect-ratio: 16/10; background: var(--k-color-bg-subtle); }
.fyp-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fyp-card__img--placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--k-glacier), var(--k-periwinkle)); }

.fyp-card__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--k-space-8) var(--k-space-5) var(--k-space-5);
  background: linear-gradient(180deg, transparent 0%, rgba(0, 14, 33, 0.55) 45%, rgba(0, 14, 33, 0.92) 100%);
}
.fyp-card__title {
  color: #fff;
  font-size: clamp(1.1rem, 2.4vw + 0.7rem, 1.5rem);
  line-height: 1.3;
  margin: var(--k-space-2) 0 var(--k-space-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fyp-card__meta { display: flex; align-items: center; gap: var(--k-space-2); }
.fyp-card__avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.fyp-card__author { color: #fff; font-weight: 600; font-size: var(--k-fs-sm); }
.fyp-card__dot { color: rgba(255, 255, 255, 0.5); }
.fyp-card__time { color: rgba(255, 255, 255, 0.75); font-size: var(--k-fs-sm); }

.fyp-feed__sentinel { height: 1px; }
.fyp-feed__loading, .fyp-feed__end, .fyp-feed__error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-space-2);
  padding: var(--k-space-6);
  color: var(--k-color-text-faint);
  font-size: var(--k-fs-sm);
}
.fyp-feed__loading[hidden], .fyp-feed__end[hidden], .fyp-feed__error[hidden], .fyp-feed__fallback[hidden] { display: none; }
.fyp-feed__error { flex-wrap: wrap; }
.fyp-feed__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: var(--k-space-3) auto var(--k-space-6);
  color: var(--k-color-primary);
  font-size: var(--k-fs-sm);
  font-weight: 700;
}
.fyp-feed__spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--k-color-border);
  border-top-color: var(--k-color-primary);
  border-radius: 50%;
  animation: kelampung-spin 0.7s linear infinite;
}
@keyframes kelampung-spin { to { transform: rotate(360deg); } }
.fyp-feed__empty { padding-block: var(--k-space-10); }

@media (min-width: 768px) {
  .fyp-card__media { aspect-ratio: 21/9; }
}

/* ---------------------------------------------------------
   WISATA & KULINER — "showcase" grid: 1 kartu besar unggulan + kartu
   pendukung lebih kecil, semua gambar full-bleed dengan overlay judul.
   Sengaja dibuat beda dari pola hero+4 yang dipakai section lain.
   --------------------------------------------------------- */
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--k-space-3);
}
.showcase-card { display: block; border-radius: var(--k-radius-lg); overflow: hidden; }
.showcase-card__media { position: relative; aspect-ratio: 4/3; background: var(--k-color-bg-subtle); }
.showcase-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-card__img--placeholder { background: linear-gradient(135deg, var(--k-glacier), var(--k-periwinkle)); }
.showcase-card__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--k-space-2);
  padding: var(--k-space-5) var(--k-space-4) var(--k-space-4);
  background: linear-gradient(180deg, transparent 0%, rgba(0, 14, 33, 0.8) 100%);
}
.showcase-card__title {
  color: #fff;
  font-weight: 700;
  font-size: var(--k-fs-sm);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.showcase-card--featured .showcase-card__media { aspect-ratio: 16/10; }
.showcase-card--featured .showcase-card__title { font-size: var(--k-fs-lg); -webkit-line-clamp: 3; }

@media (min-width: 640px) {
  .showcase-grid { grid-template-columns: repeat(2, 1fr); }
  .showcase-card--featured { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .showcase-grid { grid-template-columns: repeat(3, 1fr); }
  .showcase-card--featured { grid-column: span 3; }
}

/* ---------------------------------------------------------
   OPINI — list kolom opini: avatar, judul, cuplikan pembuka.
   --------------------------------------------------------- */
.opinion-list { display: flex; flex-direction: column; gap: var(--k-space-5); }
.opinion-item {
  display: flex;
  gap: var(--k-space-4);
  padding-bottom: var(--k-space-5);
  border-bottom: 1px solid var(--k-color-border);
}
.opinion-item:last-child { border-bottom: none; padding-bottom: 0; }
.opinion-item__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.opinion-item__body { flex: 1; min-width: 0; }
.opinion-item__author { display: block; font-size: var(--k-fs-xs); font-weight: 700; color: var(--k-color-primary); margin-bottom: var(--k-space-1); }
.opinion-item__title { font-size: var(--k-fs-md); margin: 0 0 var(--k-space-2); line-height: 1.35; }
.opinion-item__excerpt { color: var(--k-color-text-muted); font-size: var(--k-fs-sm); margin: 0; }

/* ---------------------------------------------------------
   BREAKPOINTS
   --------------------------------------------------------- */

/* >= 430px : slightly roomier phones */
@media (min-width: 430px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* >= 768px : tablet — menu tetap off-canvas (sama seperti mobile), tapi
   jadi drawer di sisi kanan (tidak menutupi seluruh layar) supaya terasa
   pas untuk layar lebih lebar. Bottom tab bar tetap khusus mobile. */
@media (min-width: 768px) {
  /* Navigasi utama desktop: floating vertikal di tengah sisi kanan. */
  .mobile-tabbar {
    top: 50%;
    right: var(--k-space-5);
    bottom: auto;
    left: auto;
    width: 82px;
    height: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(-50%);
    background: var(--k-ultramarine);
    border: 0;
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(0, 34, 83, .22);
  }
  .mobile-tabbar__item {
    width: 70px;
    min-height: 64px;
    flex: none;
    border-radius: 13px;
    font-size: 11px;
  }
  .mobile-tabbar__item .icon {
    width: 21px;
    height: 21px;
  }
  .mobile-tabbar__item.is-current,
  .mobile-tabbar__item:hover,
  .mobile-tabbar__item:focus-visible {
    background: rgba(255,255,255,.14);
  }
  body.has-tabbar { padding-bottom: 0; }

  .mobile-menu { width: 420px; box-shadow: var(--k-shadow-lg); }

  /* Header desktop: logo benar-benar di tengah header; elemen lain tetap pada sisi masing-masing. */
  .site-header__inner {
    grid-template-columns: auto 1fr auto auto auto;
    grid-template-areas: "menu . search notif account";
    position: relative;
  }
  .site-header__menu-zone { justify-self: start; }
  .site-header__search-zone, .site-header__notif-zone, .site-header__account-zone { justify-self: end; }
  .site-branding {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    justify-self: auto;
    text-align: center;
  }

  .container { padding-inline: var(--k-space-6); }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); }
  .dashboard-stats { grid-template-columns: repeat(4, 1fr); }

  .hero-article__media { aspect-ratio: 16/7; }

  .site-footer__grid { grid-template-columns: repeat(4, 1fr); }
}

/* >= 1024px : desktop */
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); }
  .dashboard-layout { flex-direction: row; }
  .dashboard-layout__sidebar { width: 240px; flex-shrink: 0; }
  .dashboard-layout__content { flex: 1; min-width: 0; }
}

/* >= 1440px : wide desktop */
@media (min-width: 1440px) {
  .container { padding-inline: var(--k-space-8); }
}

/* Utility */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* Article metadata created from the writer dashboard. */
.article-tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--k-space-2); margin-top: var(--k-space-6); }
.article-tags strong { margin-right: var(--k-space-1); color: var(--k-color-text-muted); font-size: var(--k-fs-xs); text-transform: uppercase; letter-spacing: .05em; }
.article-tags a { display: inline-flex; padding: .35rem .65rem; border: 1px solid var(--k-color-border); border-radius: var(--k-radius-full); color: var(--k-color-primary-dark); background: var(--k-color-primary-subtle); font-size: var(--k-fs-xs); font-weight: 650; }
.article-source__detail { color: var(--k-color-text-muted); }
.article-content figure.wp-caption { max-width: 100%; margin: var(--k-space-6) auto; }
.article-content .wp-caption-text,.article-content figcaption { padding-top: var(--k-space-2); color: var(--k-color-text-faint); font-size: var(--k-fs-xs); line-height: 1.5; text-align: left; }
.author-social-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.author-social-links a{padding:7px 11px;border:1px solid var(--k-color-border);border-radius:999px;color:var(--k-color-primary);background:#fff;font-size:12px;font-weight:700;text-decoration:none}.author-social-links a:hover{color:#fff;border-color:var(--k-color-primary);background:var(--k-color-primary)}

/* Restore semantic lists inside published articles after the global reset. */
.article-content ul{list-style:disc;padding-left:1.7rem;margin:0 0 var(--k-space-5)}.article-content ol{list-style:decimal;padding-left:1.7rem;margin:0 0 var(--k-space-5)}.article-content li{display:list-item;margin:.4rem 0;padding-left:.2rem}.article-content ul ul{list-style:circle}.article-content ol ol{list-style:lower-alpha}.article-content figure.kelampung-article-image{width:100%;max-width:100%;margin:var(--k-space-6) 0}.article-content figure.kelampung-article-image img{display:block;width:100%;height:auto;max-width:100%}
.article-media{overflow:visible}.article-media img{display:block;width:100%;height:auto;border-radius:var(--k-radius-lg)}.article-media__caption{padding:9px 4px 0;color:var(--k-color-text-faint);font-size:var(--k-fs-xs);line-height:1.5}
.toc__item a{display:flex;align-items:flex-start;gap:9px}.toc__number{min-width:28px;color:var(--k-color-primary);font-weight:800}.toc__item--level-3{margin-left:22px}
.site-header__account-zone{position:relative}.account-panel{position:absolute;top:calc(100% + 12px);right:0;z-index:70;width:190px;padding:7px;border:1px solid var(--k-color-border);border-radius:13px;background:#fff;box-shadow:0 14px 38px rgba(0,34,83,.16)}.account-panel[hidden]{display:none}.account-panel a{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;color:var(--k-color-text);font-size:13px;font-weight:700;text-decoration:none}.account-panel a:hover{color:var(--k-color-primary);background:var(--k-color-bg-subtle)}.account-panel .icon{width:18px;height:18px}
.engagement-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:460px;margin:var(--k-space-6) 0;overflow:hidden;border:1px solid var(--k-color-border);border-radius:14px;background:#fff}.engagement-btn{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:10px 12px;border:0;border-right:1px solid var(--k-color-border);color:var(--k-color-text-muted);background:#fff;font:inherit;font-size:13px;font-weight:750;cursor:pointer}.engagement-btn:last-child{border-right:0}.engagement-btn:hover{color:var(--k-color-primary);background:var(--k-color-bg-subtle)}.engagement-btn.is-active{color:#fff;background:var(--k-color-primary)}.engagement-btn.has-error{color:#fff;background:#a44848}.engagement-btn .icon{width:19px;height:19px}.engagement-btn small{font-size:11px;opacity:.8}
.report-modal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px}.report-modal[hidden]{display:none}.report-modal__backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(0,14,33,.62)}.report-modal__dialog{position:relative;z-index:1;width:min(500px,100%);max-height:calc(100vh - 40px);overflow-y:auto;padding:22px;border-radius:18px;background:#fff;box-shadow:0 22px 70px rgba(0,14,33,.28)}.report-modal__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.report-modal__header h2{margin:0;font-size:20px}.report-modal__header button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--k-color-bg-subtle);font-size:24px;cursor:pointer}.report-modal__dialog .form-label{display:block;margin:12px 0 6px}.report-modal__dialog .form-select,.report-modal__dialog .form-textarea{width:100%}.report-modal__dialog .btn{margin-top:10px}
.comments-area{margin-top:var(--k-space-4);padding:clamp(18px,4vw,28px);border:1px solid var(--k-color-border);border-radius:20px;background:#fff}.comments-area__header{display:flex;align-items:center;gap:10px;margin-bottom:18px}.comments-area__count{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;color:var(--k-color-primary);background:var(--k-color-primary-subtle);font-size:12px;font-weight:800}.comments-area__empty{margin:0 0 22px;color:var(--k-color-text-muted);font-size:14px}.comment-list{display:flex;flex-direction:column;gap:14px;margin:0 0 24px;padding:0;list-style:none}.comment-list .children{margin:12px 0 0 48px;padding:0;list-style:none}.comment-card{margin:0;list-style:none}.comment-card__inner{display:flex;align-items:flex-start;gap:10px}.comment-card__avatar{flex:0 0 40px}.comment-card__avatar img,.comment-composer__avatar img{display:block;width:40px;height:40px;border-radius:50%;object-fit:cover}.comment-card__content{min-width:0;max-width:min(680px,calc(100% - 50px))}.comment-card__bubble{padding:10px 13px;border-radius:4px 16px 16px 16px;background:var(--k-color-bg-subtle)}.comment-card__author{display:block;margin-bottom:3px;color:var(--k-color-text);font-size:13px}.comment-card__text{color:var(--k-color-text);font-size:14px;line-height:1.55}.comment-card__text p{margin:0}.comment-card__meta{display:flex;gap:10px;padding:5px 7px 0;color:var(--k-color-text-faint);font-size:11px}.comments-pagination{margin-bottom:22px}.comment-composer{display:flex;align-items:flex-start;gap:10px;padding-top:20px;border-top:1px solid var(--k-color-border)}.comment-composer__body{flex:1;min-width:0}.comment-composer__body h3{margin:0 0 9px;font-size:15px}.comment-form{margin:0}.comment-form__field{width:100%;min-height:84px;padding:12px 14px;border-radius:16px;background:var(--k-color-bg-subtle);resize:vertical}.comment-form__field[readonly]{cursor:pointer}.comment-form__actions{display:flex;justify-content:flex-end;margin-top:9px}.login-modal{position:fixed;inset:0;z-index:100001;display:grid;place-items:center;padding:20px}.login-modal[hidden]{display:none}.login-modal__backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(0,14,33,.62)}.login-modal__dialog{position:relative;z-index:1;width:min(430px,100%);padding:28px;border-radius:20px;background:#fff;box-shadow:0 22px 70px rgba(0,14,33,.28);text-align:center}.login-modal__close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--k-color-bg-subtle);font-size:24px;cursor:pointer}.login-modal__icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 14px;border-radius:50%;color:#fff;background:var(--k-color-primary)}.login-modal__icon .icon{width:24px;height:24px}.login-modal__dialog h2{margin:0 0 8px;font-size:22px}.login-modal__dialog p{margin:0 0 18px;color:var(--k-color-text-muted);font-size:14px;line-height:1.55}.login-modal__dialog .btn+.btn{margin-top:9px}
.author-social-links a{display:inline-flex;align-items:center;gap:7px}.author-social-links .icon{width:17px;height:17px}
@media(max-width:620px){.account-panel{position:fixed;top:var(--k-header-height);right:10px;width:190px}.engagement-bar{max-width:none}.engagement-btn{min-height:52px;padding:8px 5px;flex-direction:column;gap:3px;font-size:11px}.engagement-btn small{position:absolute;margin:0 0 22px 28px}.report-modal{align-items:end;padding:0}.report-modal__dialog{width:100%;max-height:88vh;padding:18px;border-radius:20px 20px 0 0}.author-box{align-items:flex-start;padding:18px}.author-box__actions{align-items:stretch}.author-box__actions .btn{justify-content:center}.comments-area{padding:17px 14px;border-radius:16px}.comment-composer__avatar{display:none}.comment-card__content{max-width:calc(100% - 50px)}.comment-list .children{margin-left:24px}.login-modal{align-items:end;padding:0}.login-modal__dialog{width:100%;padding:24px 18px 18px;border-radius:22px 22px 0 0}.login-modal__dialog .btn{min-height:46px}}

/* Status pengiriman komentar frontend. */
.comment-form__actions { align-items: center; gap: 10px; }
.comment-form__status { flex: 1; margin: 0; color: var(--k-color-text-muted); font-size: 12px; line-height: 1.4; }