/* Huta Studio V2 — design tokens & base (vanilla CSS) */
/* Huta Studio V3 — token warna gaya Simalungun (emerald+amber+tinta hijau) */
:root {
  --hv-primary: var(--huta-aksen, #15803d);
  --hv-primary-dark: #166534;
  /* Token TEKS aksen: warna aksen yang aman dipakai sebagai warna teks.
     Terpisah dari --hv-primary karena --hv-primary dipakai juga sebagai
     latar tombol (lalu teks putih), sehingga di mode gelap nilainya
     terlalu gelap untuk dijadikan warna teks. */
  --hv-primary-ink: var(--huta-aksen, #15803d);
  --hv-accent: #f59e0b;
  --hv-accent-dark: #d97706;
  --hv-accent-ink: #0f172a;
  --hv-secondary: #052516;
  --hv-bg: #fafaf9;
  --hv-card: #ffffff;
  --hv-text: #57534e;
  --hv-text-strong: #0f172a;
  --hv-border: #e7e5e4;
  --hv-radius: 1rem;
  --hv-shadow: 0 4px 16px rgba(5, 37, 22, 0.06);
  --hv-shadow-lg: 0 12px 32px rgba(5, 37, 22, 0.12);
  --hv-transition: 0.3s ease;
  --hv-nav-h: 56px;
  --hv-ink: #052516;
  --hv-ink-soft: #072416;
}

html.dark {
  --hv-bg: #052516;
  --hv-card: #062816;
  --hv-border: #14532d;
  --hv-text: #d6d3cd;
  --hv-text-strong: #f8fafc;
  /* Teal-300: kontras 10,9:1 di atas --hv-bg (teal-700 hanya 2,99:1). */
  --hv-primary-ink: #5eead4;
  --hv-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --hv-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html.dark body { background: var(--hv-bg) !important; color: var(--hv-text); }

body { font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; }

.hv-section { padding: 3.5rem 1.25rem; }
.hv-container { max-width: 1200px; margin: 0 auto; }

.hv-label {
  display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px;
  background: color-mix(in srgb, var(--hv-primary) 12%, transparent);
  color: var(--hv-primary); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
}
.hv-title { color: var(--hv-text-strong); font-weight: 700; margin: 0.5rem 0 0.25rem; }
.hv-desc { color: var(--hv-text); margin: 0 0 1.5rem; }

.hv-card {
  background: var(--hv-card); border: 1px solid var(--hv-border);
  border-radius: var(--hv-radius); box-shadow: var(--hv-shadow);
  transition: transform var(--hv-transition), box-shadow var(--hv-transition);
}
.hv-card:hover { transform: translateY(-3px); box-shadow: var(--hv-shadow-lg); }

.hv-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--hv-primary); color: #fff; border: none; cursor: pointer;
  padding: 0.6rem 1.25rem; border-radius: 999px; font-weight: 600;
  text-decoration: none; transition: background var(--hv-transition), transform var(--hv-transition);
}
.hv-btn:hover { background: var(--hv-primary-dark); color: #fff; transform: translateY(-1px); }

.hv-ghost {
  background: transparent; color: var(--hv-primary);
  border: 1.5px solid var(--hv-primary);
}
.hv-ghost:hover { background: var(--hv-primary); color: #fff; }

.hv-btn-gold {
  background: var(--hv-accent); color: var(--hv-accent-ink);
}
.hv-btn-gold:hover { background: var(--hv-accent-dark); color: var(--hv-accent-ink); }

/* ===== Responsive Aparatur widget: OwlCarousel (desktop) vs Grid (mobile) ===== */
.hv-ap-desktop { display: none; }
.hv-ap-mobile  { display: block; }

@media (min-width: 768px) {
    .hv-ap-desktop { display: block; }
    .hv-ap-mobile  { display: none; }
}

/* ===== Task 2: Navbar modern ===== */
.hv-nav {
  position: sticky; top: 0; z-index: 1050;
  background: rgba(5, 37, 22, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background var(--hv-transition), box-shadow var(--hv-transition);
}
.hv-nav.scrolled { box-shadow: var(--hv-shadow); }
.hv-nav-home:not(.scrolled) {
  position: fixed; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hv-nav-home:not(.scrolled) .hv-nav-brand strong,
.hv-nav-home:not(.scrolled) .hv-nav-brand small,
.hv-nav-home:not(.scrolled) .hv-nav-menu > li > a { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.45); }
.hv-nav-home:not(.scrolled) .hv-nav-menu > li > a:hover { color: #fbbf24; }
html.dark .hv-nav { background: rgba(3, 29, 14, 0.92); }
html.dark .hv-nav-home:not(.scrolled) { background: transparent; }

.hv-nav-inner {
  max-width: 1200px; margin: 0 auto; height: 56px;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0 1rem;
}
.hv-nav-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; min-width: 0; }
.hv-nav-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; }
.hv-nav-names { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.hv-nav-names strong { color: #f8fafc; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-nav-names small { color: #d6d3cd; font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hv-nav-menu { display: none; list-style: none; margin: 0 auto; padding: 0; align-items: center; }
.hv-nav-menu > li { position: relative; }
.hv-nav-menu > li > a {
  display: block; padding: 0.45rem 0.7rem; border-radius: 8px;
  color: #f8fafc; font-size: 0.85rem; font-weight: 500; text-decoration: none;
  transition: color var(--hv-transition), background var(--hv-transition);
  white-space: nowrap;
}
.hv-nav-menu > li > a:hover { color: #fbbf24; background: rgba(255,255,255,.08); }
.hv-caret { font-size: 0.6rem; margin-left: 0.25rem; opacity: 0.7; }
.hv-dropdown {
  display: none; position: absolute; top: 100%; left: 0; min-width: 210px;
  background: var(--hv-card); border: 1px solid var(--hv-border); border-radius: 12px;
  box-shadow: var(--hv-shadow-lg); list-style: none; margin: 0.35rem 0 0; padding: 0.35rem; z-index: 1100;
}
.hv-dropdown a { display: block; padding: 0.5rem 0.75rem; border-radius: 8px; color: var(--hv-text-strong); font-size: 0.84rem; text-decoration: none; }
.hv-dropdown a:hover { background: color-mix(in srgb, var(--hv-primary) 10%, transparent); color: var(--hv-primary); }
.hv-has-drop:hover > .hv-dropdown { display: block; }
.hv-dropdown-sub { top: -0.35rem; left: 100%; margin-left: 0.25rem; }

.hv-nav-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.hv-dark-toggle {
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--hv-border);
  background: var(--hv-card); color: var(--hv-text-strong); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--hv-transition), color var(--hv-transition);
}
.hv-dark-toggle:hover { color: var(--hv-primary); }
html.dark .hv-dark-toggle { background: #334155; color: #fbbf24; border-color: #475569; }
.hv-nav-login { padding: 0.45rem 1rem; font-size: 0.85rem; }
.hv-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 38px; height: 38px; border: 1px solid var(--hv-border); border-radius: 10px;
  background: var(--hv-card); cursor: pointer; padding: 0 9px;
}
.hv-burger span { display: block; height: 2px; background: var(--hv-text-strong); border-radius: 2px; }
.hv-nav-home:not(.scrolled) .hv-burger { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.35); }
.hv-nav-home:not(.scrolled) .hv-burger span { background: #fff; }
.hv-nav-home:not(.scrolled) .hv-dark-toggle { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.35); color: #fff; }

@media (min-width: 1024px) {
  .hv-nav-menu { display: flex; }
  .hv-burger { display: none; }
  .hv-nav-home:not(.scrolled) { position: fixed; }
}

/* Drawer mobile */
.hv-drawer {
  position: fixed; top: 0; right: -85%; width: 85%; max-width: 360px; height: 100vh; z-index: 2000;
  background: var(--hv-card); border-left: 1px solid var(--hv-border); box-shadow: var(--hv-shadow-lg);
  transition: right var(--hv-transition); overflow-y: auto; padding: 1rem 1.1rem 2rem;
}
.hv-drawer.open { right: 0; }
.hv-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; color: var(--hv-text-strong); }
.hv-drawer-close { background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--hv-text); }
.hv-drawer-list { list-style: none; margin: 0; padding: 0; }
.hv-drawer-list > li > a, .hv-drawer-list summary {
  display: block; padding: 0.7rem 0.5rem; color: var(--hv-text-strong); text-decoration: none;
  font-weight: 500; border-bottom: 1px solid var(--hv-border); cursor: pointer; list-style: none;
}
.hv-drawer-list details a { border-bottom: none; font-weight: 400; padding-left: 1.25rem; color: var(--hv-text); font-size: 0.9rem; }
.hv-drawer-list details summary::-webkit-details-marker { display: none; }
.hv-drawer-sep { border-top: 2px solid var(--hv-border); margin-top: 0.5rem; }

/* ===== Task 3: Hero ===== */
.hv-hero {
  position: relative; min-height: 560px; height: 85vh; max-height: 860px;
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(120deg, rgba(15,23,42,0.82), rgba(15,23,42,0.5)), var(--hv-primary);
  background-size: cover; background-position: center;
  color: #fff; padding: 6.5rem 1.25rem 5.5rem; margin-top: -56px;
}
.hv-hero-inner { max-width: 900px; margin: 0 auto; text-align: center; width: 100%; }
.hv-hero-greet {
  display: inline-block; padding: 0.3rem 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  background: rgba(255,255,255,0.14); backdrop-filter: blur(6px); letter-spacing: 0.06em; margin: 0 0 0.75rem;
}
.hv-hero-title { font-size: clamp(1.8rem, 4.5vw, 3rem); font-weight: 800; margin: 0 0 0.5rem; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.hv-hero-sub { font-size: clamp(0.95rem, 2vw, 1.15rem); opacity: 0.92; margin: 0 0 1.75rem; }

.hv-hero-search {
  display: flex; gap: 0.5rem; max-width: 620px; margin: 0 auto 2rem;
  background: rgba(255,255,255,0.95); border-radius: 999px; padding: 0.4rem 0.4rem 0.4rem 1.25rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.hv-hero-search input {
  flex: 1; border: none; outline: none; background: transparent; font-size: 0.95rem; color: #0f172a; min-width: 0;
}
.hv-hero-search .hv-btn { flex-shrink: 0; }
html.dark .hv-hero-search { background: rgba(30,41,59,0.95); }
html.dark .hv-hero-search input { color: #e2e8f0; }
html.dark .hv-hero-search input::placeholder { color: #94a3b8; }

.hv-shortcut { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; max-width: 720px; margin: 0 auto; }
.hv-shortcut-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  padding: 0.9rem 0.5rem; border-radius: 1rem; text-decoration: none; color: #fff; font-size: 0.8rem; font-weight: 600;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform var(--hv-transition), background var(--hv-transition);
}
.hv-shortcut-item:hover { transform: translateY(-3px); background: rgba(255,255,255,0.2); color: #fff; }
.hv-shortcut-icon {
  width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--hv-primary) 85%, #000); font-size: 1.05rem;
}
.hv-shortcut-disabled { opacity: 0.6; cursor: default; }

.hv-marquee {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 0.75rem;
  background: rgba(2,6,23,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 0.55rem 1rem; font-size: 0.82rem; overflow: hidden;
}
.hv-marquee-badge {
  flex-shrink: 0; background: var(--hv-primary); color: #fff; font-weight: 700; font-size: 0.68rem;
  padding: 0.2rem 0.6rem; border-radius: 999px; letter-spacing: 0.08em;
}
.hv-marquee-track { display: flex; gap: 2.5rem; white-space: nowrap; animation: hv-marquee 28s linear infinite; will-change: transform; }
.hv-marquee-track a { color: #fff; text-decoration: none; opacity: 0.92; }
.hv-marquee-track a:hover { color: var(--hv-primary); }
@keyframes hv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hv-marquee-track { animation: none; } }

/* ===== Task 4: Statistik ===== */
.hv-stats-section { background: var(--hv-bg); }
.hv-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .hv-stats { grid-template-columns: repeat(4, 1fr); } }
.hv-stat { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1.5rem 1rem; text-align: center; }
.hv-stat-icon {
  width: 48px; height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--hv-primary) 14%, transparent); color: var(--hv-primary); font-size: 1.2rem;
}
.hv-stat-num { font-size: 1.9rem; font-weight: 800; color: var(--hv-text-strong); line-height: 1.1; }
.hv-stat-label { font-size: 0.82rem; color: var(--hv-text); font-weight: 500; }
.hv-stats-cta { text-align: center; margin-top: 1.75rem; }
.hv-empty { padding: 1.25rem 1.5rem; color: var(--hv-text); text-align: center; }

/* ===== Task 5: Berita ===== */
.hv-news-section { background: var(--hv-card); border-top: 1px solid var(--hv-border); border-bottom: 1px solid var(--hv-border); }
.hv-news-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.hv-news-head .hv-desc { margin-bottom: 0; }
.hv-news-all { margin-bottom: 1.5rem; white-space: nowrap; }
.hv-news { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .hv-news { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hv-news { grid-template-columns: repeat(3, 1fr); } }
.hv-news-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; }
.hv-news-img { width: 100%; height: 180px; object-fit: cover; }
.hv-news-body { padding: 1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.hv-news-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--hv-text); flex-wrap: wrap; }
.hv-news-chip {
  background: color-mix(in srgb, var(--hv-primary) 12%, transparent); color: var(--hv-primary);
  font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 999px;
}
.hv-news-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--hv-text-strong); line-height: 1.35; }
.hv-news-card:hover .hv-news-title { color: var(--hv-primary); }
.hv-news-excerpt { margin: 0; font-size: 0.85rem; color: var(--hv-text); line-height: 1.5; }

/* ===== Task 6: Footer + bottom-nav ===== */
.hv-footer { background: var(--hv-secondary); color: #cbd5e1; margin-top: 2rem; }
html.dark .hv-footer { background: #020617; }
.hv-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.25rem 2rem; }
@media (min-width: 1024px) { .hv-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.hv-footer-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.hv-footer-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: #fff; padding: 2px; }
.hv-footer-brand strong { display: block; color: #f1f5f9; }
.hv-footer-brand small { color: #94a3b8; font-size: 0.75rem; }
.hv-footer-desc { font-size: 0.85rem; line-height: 1.6; color: #94a3b8; margin: 0 0 1rem; }
.hv-footer h4 { color: #f1f5f9; font-size: 0.95rem; margin: 0 0 0.85rem; }
.hv-footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.87rem; }
.hv-footer-list i { width: 1.1rem; color: var(--hv-primary); }
.hv-footer-list a { color: #cbd5e1; text-decoration: none; }
.hv-footer-list a:hover { color: var(--hv-primary); }
.hv-footer-social { list-style: none; display: flex; gap: 0.5rem; margin: 0; padding: 0; }
.hv-footer-social a {
  width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; opacity: 0.92; transition: transform var(--hv-transition);
}
.hv-footer-social a:hover { transform: translateY(-2px); opacity: 1; }
.hv-footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 0.9rem 0; font-size: 0.78rem; color: #94a3b8; }
.hv-footer-bottom-inner { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; padding: 0 1.25rem; }
.hv-footer-bottom a { color: #94a3b8; text-decoration: none; }
.hv-footer-bottom a:hover { color: var(--hv-primary); }
@media (max-width: 1023px) { .hv-footer { display: none; } }

/* Bottom-nav mobile */
.hv-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400;
  display: flex; justify-content: space-around; align-items: center;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--hv-border); padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
}
html.dark .hv-bottom { background: rgba(15,23,42,0.94); }
.hv-bottom-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  color: var(--hv-text); text-decoration: none; font-size: 0.62rem; font-weight: 600; padding: 0.25rem 0.4rem; min-width: 56px;
}
.hv-bottom-item i { font-size: 1.05rem; }
.hv-bottom-item:hover { color: var(--hv-primary); }
.hv-bottom-fab {
  width: 52px; height: 52px; border-radius: 999px; margin-top: -1.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hv-primary); color: #fff; font-size: 1.25rem; text-decoration: none;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--hv-primary) 45%, transparent);
  border: 3px solid var(--hv-bg); transition: transform var(--hv-transition);
}
.hv-bottom-fab:hover { transform: translateY(-3px); color: #fff; }
@media (min-width: 1024px) { .hv-bottom { display: none; } }
@media (max-width: 1023px) {
  body { padding-bottom: 4.2rem; }
  /* .hv-ft-stack dinaikkan ke 5.5rem di blok widget floating (akhir berkas) */
}

/* ===== Task 7: Dark mode lanjutan (satu sistem variabel) ===== */
html.dark .hv-label { background: rgba(22, 167, 92, 0.18); }
html.dark .hv-title,
html.dark .hv-nav-names strong-strong-placeholder,
html.dark .hv-stat-num,
html.dark .hv-news-title { color: #f1f5f9; }
html.dark .hv-news-section { background: var(--hv-card); border-color: #334155; }
html.dark .hv-news-card { border-color: #334155; }
html.dark .hv-news-chip { background: rgba(22, 167, 92, 0.2); }
html.dark .hv-stat-icon { background: rgba(22, 167, 92, 0.18); }
html.dark .hv-shortcut-item { background: rgba(30, 41, 59, 0.65); border-color: rgba(71, 85, 105, 0.6); }
html.dark .hv-shortcut-item:hover { background: rgba(51, 65, 85, 0.8); }
html.dark .hv-btn { color: #fff; }
html.dark .hv-ghost { color: var(--hv-primary); }
html.dark .hv-drawer-list > li > a,
html.dark .hv-drawer-list summary { color: #e2e8f0; border-color: #334155; }
html.dark .hv-empty { color: #94a3b8; }
html.dark .hv-hero { background-color: #0f172a; }
html.dark .hv-marquee { background: rgba(2, 6, 23, 0.75); }

/* ===== Fix pass V2 (review) ===== */
/* (a) Navbar beranda selalu fixed — hilangkan lompat 56px */
.hv-nav-home { position: fixed; left: 0; right: 0; }
.hv-nav-home.scrolled { position: fixed; }
.hv-hero { margin-top: 0; }

/* (b) Back-to-top: naik di atas bottom-nav */
.fixed.bottom-0.mb-5 { bottom: 5.5rem !important; }

/* (c) Dark mode: sisa kelas putih bawaan */
html.dark .bg-white { background-color: var(--hv-card) !important; color: var(--hv-text); }
html.dark .text-gray-600, html.dark .text-gray-500, html.dark .text-gray-700 { color: var(--hv-text) !important; }
html.dark .bg-zinc-700 { background: #1e293b !important; }
html.dark .shadow { box-shadow: var(--hv-shadow) !important; }
/* ═══════════════════════════════════════════════════════════════════════
   (e) DARK MODE — TABEL & KOMPONEN BAWAAN OPENSID
   V4.8 (2026-10-21).

   Latar masalah: mode gelap sebelumnya hanya punya 4 baris override
   generik (blok (c)). Komponen dari style.min.css (warisan Ace/AdminLTE/
   Bootstrap 3 + Tailwind) tetap memakai warna terang, sehingga teks
   terang #d6d3cd di atas latar #f3f4f6 hanya berkontras 1.36:1
   (ambang WCAG AA = 4.5:1) -> tabel tidak terbaca.

   PENTING: latar abu pada baris tabel di-set di <tr>, bukan <td>, oleh
   TIGA aturan berbeda di style.min.css:
       .table-striped tr:nth-child(even)                     (0,3,1)
       .content table tbody tr:nth-child(even)               (0,4,3)
       .content table.table-striped tr:nth-child(even)       (0,4,4)
   Karena default.blade.php membungkus tabel dlm <div class="content">,
   dua aturan .content yg paling spesifik. Maka di sini tr ditargetkan
   langsung + !important untuk memastikan menang di semua konteks.
   Berlaku utk 30 file blade bertabel: statistik, DPT, inventaris,
   wilayah, analisis, IDM, suplemen, vaksin, kesehatan, produk hukum, dll.
   ═══════════════════════════════════════════════════════════════════════ */

/* — A. TABEL — */
html.dark table { background-color: transparent; }
html.dark table, html.dark tbody, html.dark thead, html.dark tr { background-color: transparent; }

html.dark thead th {
    background-color: #0b3a22 !important;
    color: var(--hv-text-strong);
    border-color: var(--hv-border) !important;
}
html.dark td, html.dark th {
    color: var(--hv-text);
    border-color: var(--hv-border) !important;
}
html.dark thead th, html.dark thead td { color: var(--hv-text-strong); }

/* Kunci perbaikan: netralkan belang abu terang di baris genap.
   Menargetkan tr (bukan hanya td) + !important agar menang atas
   .content table tbody tr:nth-child(even) dan .table-striped. */
html.dark .table-striped tr:nth-child(even),
html.dark .content table tbody tr:nth-child(even),
html.dark .content table.table-striped tr:nth-child(even),
html.dark table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.04) !important;
}
html.dark .table-striped tr:nth-child(even) td,
html.dark .table-striped tr:nth-child(even) th,
html.dark .content table tbody tr:nth-child(even) td,
html.dark .content table.table-striped tr:nth-child(even) td {
    background-color: transparent !important;
}

/* Sorot saat kursor melintas */
html.dark table tbody tr:hover,
html.dark .content table tbody tr:hover,
html.dark table.table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.07) !important; }

/* Baris total (statistik & inventaris) */
html.dark .total,
html.dark tr.total, html.dark td.total, html.dark th.total {
    background-color: #0b3a22 !important;
    color: var(--hv-text-strong) !important;
}

/* Bilah gulir pada wadah tabel yang bisa digeser */
html.dark .table-responsive::-webkit-scrollbar-track { background: #062816; border-color: var(--hv-border); }
html.dark .table-responsive::-webkit-scrollbar-thumb { background: #14532d; }

/* DataTables (arsip, DPT, inventaris) */
html.dark table.dataTable,
html.dark table.dataTable tbody tr,
html.dark table.dataTable.display tbody tr,
html.dark table.dataTable.stripe tbody tr.odd,
html.dark table.dataTable.display tbody tr.odd,
html.dark table.dataTable.row-border tbody th,
html.dark table.dataTable.row-border tbody td,
html.dark table.dataTable.display tbody th,
html.dark table.dataTable.display tbody td { background-color: transparent !important; }
html.dark table.dataTable tbody tr:hover,
html.dark table.dataTable.display tbody tr:hover { background-color: rgba(255, 255, 255, 0.07) !important; }
html.dark table.dataTable thead th,
html.dark table.dataTable thead td { background-color: #0b3a22 !important; color: var(--hv-text-strong) !important; }
html.dark .dataTables_wrapper { color: var(--hv-text); }
html.dark .dataTables_wrapper .dataTables_filter input,
html.dark .dataTables_wrapper .dataTables_length select {
    background-color: var(--hv-card);
    color: var(--hv-text-strong);
    border: 1px solid var(--hv-border);
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--hv-text) !important;
    background-color: transparent !important;
    border-color: var(--hv-border) !important;
}
/* DataTables 1.13.8 sendiri menulis aturan `html.dark ... .paginate_button.disabled
   { color:#666 !important }` dengan spesifisitas lebih tinggi, sehingga tombol
   nonaktif tetap gelap. Diperbaiki di sini (abu terang, tetap >= 4,5:1). */
html.dark body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.dark body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
html.dark body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: #94a3b8 !important;
    background-color: transparent !important;
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #14532d !important;
    border-color: #166534 !important;
    color: #fff !important;
}

/* — B. KOMPONEN PENDUKUNG — */
html.dark .badge {
    border-color: #475569;
    background-color: rgba(148, 163, 184, 0.12);
    color: #e2e8f0;
}
html.dark .btn { color: #fff; }
html.dark .btn-primary { background-color: #14532d !important; border-color: #166534 !important; color: #fff !important; }
html.dark .btn-secondary { background-color: #334155 !important; border-color: #475569 !important; color: #e2e8f0 !important; }
html.dark .btn-accent { background-color: #1e40af !important; border-color: #1d4ed8 !important; color: #fff !important; }

html.dark .form-control { background-color: var(--hv-card); color: var(--hv-text-strong); border-color: var(--hv-border); }
html.dark .form-control:focus { background-color: var(--hv-card); color: var(--hv-text-strong); border-color: #166534; }
html.dark select,
html.dark select option { background-color: #062816; color: var(--hv-text); }

html.dark .breadcrumb,
html.dark .breadcrumb a { color: #94a3b8; }
html.dark .breadcrumb a:hover { color: var(--hv-text-strong); }

html.dark .alert { background-color: rgba(148, 163, 184, 0.12); color: #e2e8f0; border-color: #475569; }

/* — C. TIRAI PENGAMAN: kelas latar Tailwind generik —
   Strategi "daftar hitam": lebih tahan lama daripada daftar putih,
   karena kelas terang yang belum terduga tetap ikut diredam. */
html.dark .bg-gray-50, html.dark .bg-gray-100, html.dark .bg-gray-200,
html.dark .bg-gray-300, html.dark .bg-light, html.dark .bg-gray { background-color: #0b3a22 !important; }
html.dark .bg-navy { background-color: #062816 !important; }
html.dark .bg-primary-100, html.dark .bg-primary-200 { background-color: #14532d !important; color: #f1f5f9 !important; }
html.dark .bg-secondary-100 { background-color: #1e293b !important; }
html.dark .text-gray-800, html.dark .text-gray-900 { color: #e2e8f0 !important; }
html.dark .text-gray-300, html.dark .text-gray-400, html.dark .text-gray-50 { color: #94a3b8 !important; }
html.dark .border, html.dark [class*="border-gray"], html.dark [class*="border-slate"] { border-color: var(--hv-border) !important; }
html.dark .divide-y > * + * { border-color: var(--hv-border) !important; }
html.dark .shadow, html.dark .shadow-sm, html.dark .shadow-md, html.dark .shadow-lg { box-shadow: var(--hv-shadow) !important; }

/* — D. CELAH YANG DITEMUKAN SAAT VERIFIKASI (V4.8.1) —
   Diuji dgn warna terkomposit nyata (alpha blending):
   - .alert-info.text-primary-100 : teks hijau rgb(21,128,61) di atas latar
     gelap -> 2.6:1 (GAGAL WCAG AA). Warna teks harus ikut diredam.
   - .form-input : varian kontrol form yg TIDAK tertangani .form-control,
     latarnya tetap rgb(248,250,252) terang.
   - span dekoratif berlatar rgb(248,250,252) (tanpa teks, indikator wajib). */

/* Kotak pesan: redam warna teks per varian agar terbaca di latar gelap */
html.dark .alert-info,
html.dark .alert-info *,
html.dark .text-primary-100 { color: #a7f3d0 !important; }
html.dark .alert-success, html.dark .alert-success * { color: #a7f3d0 !important; }
html.dark .alert-warning, html.dark .alert-warning * { color: #fde68a !important; }
html.dark .alert-danger,
html.dark .alert-error, html.dark .alert-danger * { color: #fca5a5 !important; }

/* Varian kontrol form yg belum tertangani .form-control */
html.dark .form-input,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="date"],
html.dark input[type="number"],
html.dark textarea {
    background-color: var(--hv-card);
    color: var(--hv-text-strong);
    border-color: var(--hv-border);
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #94a3b8; }

/* Penanda wajib / elemen dekoratif berlatar abu terang (tanpa teks) */
html.dark span.bg-slate-50,
html.dark .bg-slate-50, html.dark .bg-slate-100 { background-color: #0b3a22 !important; }

/* Gambar berplaceholder abu terang agar tidak menyilaukan */
html.dark img.bg-gray-300 { background-color: #334155 !important; }

/* — E. TEKS & TAUTAN (V4.8.2) —
   Hasil penyisiran seluruh halaman: tabel sudah beres, tapi teks biasa
   masih memakai warna KERAS dari style.min.css yg tak terbaca di gelap.
   Diukur dgn warna terkomposit nyata:
     .graph-sub "PENDAPATAN"     #333333  -> 1.26:1
     h4 "BPD"                    #000000  -> 1.32:1
     .nav-link "Populer"         #2563eb  -> 2.10:1
     .hv-label "BERITA"          #0f766e  -> 1.80:1  (buatan tema sendiri)
     .text-link                  #0f766e  -> 2.90:1
   Aksen tema (teal #0f766e) terlalu gelap utk latar gelap; dipakai versi
   terangnya. --hv-accent diturunkan agar seluruh komponen ikut konsisten. */

/* Aksen tema: pakai nada lebih terang agar terbaca di latar gelap */
html.dark { --hv-accent: #2dd4bf; }
html.dark .hv-label,
html.dark .hv-news-chip,
html.dark .hv-pamong-role,
html.dark .hv-pamong-initial,
html.dark .hv-btn.hv-ghost,
html.dark .text-link,
html.dark a.text-link { color: #5eead4 !important; }
html.dark a { }
html.dark .text-link:hover, html.dark a.text-link:hover { color: #99f6e4 !important; }

/* Judul & teks bawaan yg warnanya keras */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: var(--hv-text-strong); }
html.dark .graph-sub, html.dark .graph-sub *, html.dark .graph-title { color: var(--hv-text) !important; }
html.dark .graph, html.dark .graph-wrap, html.dark .graph-bg { background-color: transparent !important; }

/* Tab / menu samping (arsip, statistik, dll) */
html.dark .nav-link { color: #93c5fd !important; }
html.dark .nav-link:hover { color: #bfdbfe !important; }
html.dark .nav-tabs, html.dark .nav-pills { border-color: var(--hv-border) !important; }
html.dark .nav-tabs .nav-link.active,
html.dark .nav-pills .nav-link.active { background-color: #14532d !important; color: #fff !important; }

/* Teks redup bawaan */
html.dark .text-muted, html.dark .text-description { color: #94a3b8 !important; }

/* Tautan umum di dalam konten: jangan biru gelap */
html.dark .content a:not(.btn):not(.hv-btn), html.dark article a:not(.btn):not(.hv-btn) { color: #5eead4; }
html.dark .content a:not(.btn):not(.hv-btn):hover { color: #99f6e4; }

/* — F. TAUTAN SIDEBAR & WIDGET (V4.8.3) —
   Sisa temuan: tautan daftar samping (arsip, kebijakan, statistik) memakai
   teal keras #0f766e -> 2.9:1. Teks .wow (animate.css lama) #555 -> 1.71:1.
   Badge status masih berlatar abu terang #f3f4f6 -> harus ikut digelapkan. */
html.dark a.py-2.block,
html.dark a.block,
html.dark .sidebar a,
html.dark .widget a,
html.dark aside a { color: #5eead4; }
html.dark a.py-2.block:hover,
html.dark a.block:hover { color: #99f6e4; }

/* animate.css lama (.wow) memakai warna abu gelap keras */
html.dark .wow, html.dark .wow * { color: var(--hv-text) !important; }

/* Badge status: latarnya masih terang, gelapkan agar sesuai tema */
html.dark .hv-badge {
    background-color: rgba(148, 163, 184, 0.14) !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}
html.dark .hv-badge--belum { background-color: rgba(148, 163, 184, 0.14) !important; color: #cbd5e1 !important; }
html.dark .hv-badge--hadir { background-color: rgba(22, 163, 74, 0.22) !important; color: #86efac !important; }
html.dark .hv-badge--izin  { background-color: rgba(234, 179, 8, 0.22) !important; color: #fde68a !important; }
html.dark .hv-badge--sakit,
html.dark .hv-badge--alfa   { background-color: rgba(239, 68, 68, 0.22) !important; color: #fca5a5 !important; }

/* Tanggal & meta yg redup */
html.dark .before\:content-\[\'-\'\]::before { color: #94a3b8; }

/* — G. KARTU & BADGE BERLATAR PUTIH (V4.8.4) —
   Penyisiran CSS tema sendiri menemukan kelas hv-* yg latarnya DIKERASKAN
   putih terang tanpa override gelap. Paling parah: .hv-pm-card (#fff) —
   kartu aparatur di halaman pemerintah; badge di dalamnya jadi 1.1:1. */
html.dark .hv-pm-card { background: var(--hv-card) !important; box-shadow: var(--hv-shadow) !important; }
html.dark .hv-pm-media { background: #0b3a22 !important; }
/* Nama kelas sebenarnya berbahasa Indonesia: -nama / -jabatan (bukan -name/-role) */
html.dark .hv-pm-nama, html.dark .hv-pm-nama.text-h6 { color: var(--hv-text-strong) !important; }
html.dark .hv-pm-jabatan { color: #5eead4 !important; }
html.dark .hv-pm-info { color: var(--hv-text) !important; }
html.dark .hv-pm-grid::-webkit-scrollbar-track { background: #0b3a22; }
html.dark .hv-pm-grid::-webkit-scrollbar-thumb { background: #14532d; }

/* Badge kehadiran: latar keras putih/hijau muda -> versi gelap */
html.dark .hv-badge--hadir { background: rgba(22, 163, 74, 0.22) !important; color: #86efac !important; border-color: #166534 !important; }
html.dark .hv-badge--belum { background: rgba(148, 163, 184, 0.14) !important; color: #cbd5e1 !important; border-color: #475569 !important; }
html.dark .hv-badge--tidak { background: rgba(249, 115, 22, 0.20) !important; color: #fdba74 !important; border-color: #9a3412 !important; }
html.dark .hv-badge--libur { background: rgba(148, 163, 184, 0.12) !important; color: #cbd5e1 !important; border-color: #475569 !important; }
html.dark .hv-badge-hadir { background: rgba(22, 163, 74, 0.22) !important; color: #86efac !important; }
html.dark .hv-badge-lain { background: rgba(234, 179, 8, 0.20) !important; color: #fde68a !important; }

/* — H. TEKS WARNA KERAS SISA (V4.8.5) —
   .text-primary / .text-primary-100 = hijau tua #15803d keras (!important)
   -> tidak terbaca di latar gelap. Begitu pula teks redup & meta tanggal. */
html.dark .text-primary,
html.dark .text-primary-100 { color: #5eead4 !important; }
html.dark a.text-primary:hover,
html.dark .text-primary:hover { color: #99f6e4 !important; }
html.dark .text-primary-200 { color: #a7f3d0 !important; }
html.dark .text-secondary-100 { color: #cbd5e1 !important; }
html.dark .text-muted,
html.dark .text-description,
html.dark .text-h6 { color: var(--hv-text) !important; }

/* — I. JARING PENGAMAN TERAKHIR (V4.8.5) —
   Beberapa teks memakai warna yg ditulis di markah/JS (bukan kelas CSS),
   mis. meta artikel rgb(0,150,109) -> 4.22:1 dan penanda wajib merah
   rgb(255,0,0) -> 3.97:1. Keduanya justru muncul di tema TERANG, jadi
   tidak bisa dibidik lewat kelas. Diredam lewat elemen induknya. */
html.dark .hv-news-meta,
html.dark .hv-news-meta *,
html.dark .article-meta,
html.dark .article-meta *,
html.dark time,
html.dark .post-meta, html.dark .post-meta * { color: #94a3b8 !important; }

/* Penanda wajib (*) & tanda bintang: merah murni terlalu gelap di latar gelap */
html.dark span[style*="color: red"],
html.dark span[style*="color:red"],
html.dark span[style*="color: #f00"],
html.dark [style*="color: red"],
html.dark [style*="color:red"],
html.dark [style*="color: #ff0000"],
html.dark .required,
html.dark .text-red { color: #f87171 !important; }

/* Teks yg mewarisi warna gelap dari markah pihak ketiga */
html.dark .content p, html.dark .content span:not([class]), html.dark article p { color: var(--hv-text); }

/* — J. AKSEN & META (V4.8.6) —
   .text-accent-200 memakai --accent-darken-color (teal gelap) yg diwarisi
   ke meta artikel -> 4.22:1. Penanda wajib merah ditulis di markah PHP
   (bukan kelas), jadi dibidik lewat induknya (.dataTables_info dsb). */
html.dark .text-accent-200,
html.dark .text-accent-100,
html.dark [class*="text-accent"] { color: #5eead4 !important; }

html.dark .dataTables_info,
html.dark .dataTables_info *,
html.dark .content .dataTables .dataTables_info { color: #94a3b8 !important; }
html.dark .dataTables_info b, html.dark .dataTables_info strong { color: var(--hv-text) !important; }

/* Teks tanpa kelas yg mewarisi warna hitam dari style.min.css
   (mis. nama jabatan "Pangulu" di halaman struktur) */
html.dark p:not([class]),
html.dark h4:not([class]),
html.dark h5:not([class]),
html.dark td:not([class]),
html.dark li:not([class]) { color: var(--hv-text); }

/* — K. WARNA BAWAAN BOOTSTRAP (V4.8.6) —
   Bootstrap 3 mendefinisikan $text-muted = #6c757d (rgb(108,117,125)) yg
   diwarisi ke beberapa elemen tanpa kelas -> 4.45:1, tepat di bawah AA. */
html.dark .text-muted,
html.dark .muted,
html.dark small,
html.dark .small,
html.dark .help-block,
html.dark .text-secondary { color: #94a3b8 !important; }
html.dark .content .text-muted,
html.dark .content .help-block { color: #94a3b8 !important; }

/* — L. BOOTSTRAP 5 (halaman PPID) (V4.8.7) —
   Halaman PPID dibangun dgn kelas Bootstrap 5 (.card, .bg-light, .form-control)
   bukan Tailwind. .bg-light = #f8f9fa dan .card = #fff TIDAK tertangani
   oleh aturan .bg-gray-* -> muncul kotak putih di mode gelap. */
html.dark .bg-light { background-color: var(--hv-card) !important; }
html.dark .bg-white { background-color: var(--hv-card) !important; color: var(--hv-text); }
html.dark .card {
    background-color: var(--hv-card) !important;
    border-color: var(--hv-border) !important;
    color: var(--hv-text);
}
html.dark .card-header,
html.dark .card-footer {
    background-color: #0b3a22 !important;
    border-color: var(--hv-border) !important;
    color: var(--hv-text-strong);
}
html.dark .card-body { color: var(--hv-text); }
html.dark .card-title { color: var(--hv-text-strong) !important; }
html.dark .card-text { color: var(--hv-text) !important; }

/* Kontrol form Bootstrap 5 */
html.dark .form-control,
html.dark .form-select {
    background-color: var(--hv-card) !important;
    border-color: var(--hv-border) !important;
    color: var(--hv-text-strong) !important;
}
html.dark .form-control::placeholder { color: #94a3b8 !important; }
html.dark .input-group-text {
    background-color: #0b3a22 !important;
    border-color: var(--hv-border) !important;
    color: var(--hv-text);
}
html.dark .list-group-item {
    background-color: var(--hv-card) !important;
    border-color: var(--hv-border) !important;
    color: var(--hv-text);
}
html.dark .table-light, html.dark .table-light > * { background-color: #0b3a22 !important; color: var(--hv-text-strong) !important; }

/* Bilah gulir bawaan browser + kontrol form ikut gelap */
html.dark { color-scheme: dark; }


/* (d) Pencarian di drawer */
.hv-drawer-search { display: flex; gap: 0.4rem; margin: 0.75rem 0 1rem; }
.hv-drawer-search input {
  flex: 1; min-width: 0; padding: 0.55rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--hv-border); background: var(--hv-bg); color: var(--hv-text-strong);
}

/* ===== Override warna primer tema → emerald Simalungun ===== */
.bg-primary-100 { background-color: #d1fae5 !important; }
.bg-primary-200 { background-color: #a7f3d0 !important; }
.text-primary { color: #15803d !important; }
.text-primary-100 { color: #15803d !important; }
.bg-primary { background-color: #15803d !important; }
a.text-primary:hover, .text-primary:hover { color: #166534 !important; }

/* ===== Task 5 / Task 8: Aparatur (kartu ala desaciater.id, Opsi D: bingkai 3:4 + foto utuh) ===== */
/* Gerak: OwlCarousel — 1 kartu di HP s/d 5 kartu di desktop, geser otomatis tiap 4 detik. */
.hv-pamong-owl { padding: .25rem .25rem .5rem; }
/* Stage & item dibuat flex supaya semua kartu setinggi yang paling tinggi
   (owl sudah menyetel lebar tiap item secara inline, jadi lebar aman). */
.hv-pamong-owl .owl-stage { display: flex; align-items: stretch; }
.hv-pamong-owl .owl-item { display: flex; flex: 0 0 auto; }
.hv-pamong-owl .owl-item > .hv-pamong-card { width: 100%; }

.hv-pamong-card { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--hv-card); border: 1px solid var(--hv-border); border-radius: 2rem; overflow: hidden; box-shadow: var(--hv-shadow); transition: transform .5s cubic-bezier(.175, .885, .32, 1.275), box-shadow .5s ease, border-color .5s ease; }
.hv-pamong-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100px; background: linear-gradient(135deg, var(--hv-primary), var(--hv-accent)); opacity: .1; z-index: 0; pointer-events: none; }
.hv-pamong-card::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-25deg); transition: left .7s ease; z-index: 3; pointer-events: none; }
.hv-pamong-card:hover::after { left: 150%; }
.hv-pamong-card:hover { transform: translateY(-15px); box-shadow: var(--hv-shadow-lg); border-color: var(--hv-primary); }
.hv-pamong-card:hover .hv-pamong-name { color: var(--hv-primary); }

.hv-pamong-img-wrap { position: relative; z-index: 1; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: color-mix(in srgb, var(--hv-primary) 8%, var(--hv-bg)); transition: box-shadow .5s ease; }
.hv-pamong-card:hover .hv-pamong-img-wrap { box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--hv-primary) 18%, transparent); }
.hv-pamong-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) saturate(1.15); transform: scale(1.18); opacity: .9; }
.hv-pamong-fg { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .6s cubic-bezier(.165, .84, .44, 1); }
.hv-pamong-card:hover .hv-pamong-fg { transform: scale(1.06); }
.hv-pamong-initial { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, color-mix(in srgb, var(--hv-primary) 16%, var(--hv-card)), color-mix(in srgb, var(--hv-primary) 4%, var(--hv-card))); color: var(--hv-primary); font-weight: 800; font-size: 3.4rem; }

.hv-pamong-info { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.35rem 1rem 1.5rem; text-align: center; }
.hv-pamong-name { margin: 0 0 .35rem; font-weight: 800; color: var(--hv-text-strong); font-size: 1rem; line-height: 1.2; transition: color .3s ease; }
.hv-pamong-role { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--hv-primary); line-height: 1.35; }

.hv-badge-kehadiran { margin-top: .7rem; display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .68rem; font-weight: 700; }
.hv-badge-hadir { background: color-mix(in srgb, var(--hv-primary) 15%, transparent); color: var(--hv-primary-dark); border: 1px solid color-mix(in srgb, var(--hv-primary) 35%, transparent); }
.hv-badge-lain { background: color-mix(in srgb, var(--hv-accent) 18%, transparent); color: #92400e; border: 1px solid color-mix(in srgb, var(--hv-accent) 45%, transparent); }
html.dark .hv-badge-hadir { color: #6ee7b7; }
html.dark .hv-badge-lain { color: #fcd34d; }

/* Titik navigasi carousel (owl.theme bawaan tidak dimuat tema → distyle sendiri) */
.hv-pamong-owl .owl-dots { text-align: center; margin-top: .9rem; }
.hv-pamong-owl .owl-dots .owl-dot { display: inline-block; }
.hv-pamong-owl .owl-dots .owl-dot span { display: inline-block; width: 10px; height: 10px; margin: 3px; border-radius: 50%; background: var(--hv-border); transition: all .3s ease; }
.hv-pamong-owl .owl-dots .owl-dot.active span, .hv-pamong-owl .owl-dots .owl-dot:hover span { background: var(--hv-primary); width: 26px; border-radius: 999px; }
.hv-pamong-owl .owl-nav { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hv-pamong-card, .hv-pamong-card::after, .hv-pamong-fg, .hv-pamong-img-wrap { transition: none; }
  .hv-pamong-card:hover { transform: none; }
  .hv-pamong-card:hover .hv-pamong-fg { transform: none; }
}

/* ===== Task 6: pembangunan di beranda ===== */
.hv-news-thumb-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 160px; background: color-mix(in srgb, var(--hv-primary) 12%, var(--hv-card)); color: var(--hv-primary); font-size: 1.8rem; }

/* ===== Task 7: galeri beranda ===== */
.hv-galeri-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; }
@media (min-width: 640px) { .hv-galeri-grid { grid-template-columns: repeat(4, 1fr); } }
.hv-galeri-item { position: relative; overflow: hidden; padding: 0; display: block; }
.hv-galeri-item img { width: 100%; height: 160px; object-fit: cover; display: block; transition: transform .35s ease; }
.hv-galeri-item:hover img { transform: scale(1.05); }
.hv-galeri-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .4rem .55rem; font-size: .72rem; color: #fff;
  background: linear-gradient(transparent, rgba(5,37,22,.85)); }

/* ===== Task 8: APBDes ringkasan ===== */
.hv-apbdes-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .hv-apbdes-grid { grid-template-columns: repeat(3, 1fr); } }
.hv-apbdes-card { padding: 1.35rem 1.25rem; display: flex; flex-direction: column; gap: .45rem; }
.hv-apbdes-name { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--hv-text); }
.hv-apbdes-anggaran { font-size: 1.35rem; font-weight: 800; color: var(--hv-text-strong); }
.hv-apbdes-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--hv-primary) 12%, transparent); overflow: hidden; }
.hv-apbdes-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--hv-primary), var(--hv-accent)); }
.hv-apbdes-real { font-size: .8rem; color: var(--hv-text); }
/* ===== Task 3 (V4): pemilih tahun APBDes ===== */
.hv-apbdes-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1.5rem; }
.hv-apbdes-intro { flex: 1 1 320px; min-width: 0; }
.hv-apbdes-filter { display: flex; flex-direction: column; gap: .4rem; }
.hv-apbdes-filter-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hv-text); }
.hv-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: .6rem 2.5rem .6rem 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--hv-border); background-color: var(--hv-card);
  color: var(--hv-text-strong); font: inherit; font-weight: 700; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 11px 7px;
  transition: border-color var(--hv-transition), box-shadow var(--hv-transition);
}
.hv-select:hover { border-color: var(--hv-primary); }
.hv-select:focus-visible { outline: none; border-color: var(--hv-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hv-primary) 25%, transparent); }
.hv-btn-sm { padding: .4rem .95rem; font-size: .85rem; }
/* ===== Loading screen Variant A — cincin ganda (V4) ===== */
.hv-loading-modern { position: fixed; inset: 0; z-index: 10999; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #04150d 0%, #0a2f1c 50%, #04150d 100%);
  transition: opacity .6s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.4, 0, .2, 1), visibility .6s linear; }
.hv-loading-modern.hidden { opacity: 0; transform: scale(1.05); visibility: hidden; pointer-events: none; }
.hv-loading-modern-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; animation: hvLoadingIn .6s ease-out both; }
.hv-loading-modern-logo-wrap { position: relative; width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; }
.hv-loading-modern-ring { position: absolute; inset: 0; border: 3px solid transparent; border-radius: 50%; }
.hv-loading-modern-ring-1 { border-top-color: #34d399; border-right-color: #34d399; animation: hvLoadingSpin 1.2s cubic-bezier(.5, 0, .5, 1) infinite; }
.hv-loading-modern-ring-2 { inset: 9px; border-left-color: rgba(251, 191, 36, .9); border-bottom-color: rgba(251, 191, 36, .9); animation: hvLoadingSpin 1.8s linear infinite reverse; }
.hv-loading-modern-logo { position: relative; z-index: 2; width: 46px; height: 46px; object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(52, 211, 153, .45)); animation: hvLoadingPulse 2s ease-in-out infinite; }
.hv-loading-modern-text { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; }
.hv-loading-modern-title { color: rgba(255, 255, 255, .92); font-weight: 800; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; }
.hv-loading-modern-progress { display: block; width: 160px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.hv-loading-modern-progress-bar { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #15803d, #fbbf24); animation: hvLoadingBar 1.8s cubic-bezier(.4, 0, .2, 1) infinite; }
.hv-loading-modern-sub { color: rgba(255, 255, 255, .42); font-size: .7rem; font-weight: 500; letter-spacing: .06em; }
.hv-loading-modern-dots::after { content: ''; animation: hvLoadingDots 1.5s steps(4, end) infinite; }
@keyframes hvLoadingIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hvLoadingSpin { to { transform: rotate(360deg); } }
@keyframes hvLoadingPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes hvLoadingBar { 0% { width: 0%; } 50% { width: 70%; } 100% { width: 100%; } }
@keyframes hvLoadingDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@media (prefers-reduced-motion: reduce) {
  .hv-loading-modern { display: none; }
  .hv-loading-modern-inner, .hv-loading-modern-logo, .hv-loading-modern-ring-1, .hv-loading-modern-ring-2,
  .hv-loading-modern-progress-bar, .hv-loading-modern-dots::after { animation: none; }
}

/* ===== Kartu Pemerintah /pemerintah — foto utuh + strip geser HP ===== */
.hv-pm-gridwrap { position: relative; }
.hv-pm-grid { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.hv-pm-grid > * { flex: 0 0 calc((100% - 10px) / 2 * 0.85); scroll-snap-align: start; }
.hv-pm-grid::-webkit-scrollbar { height: 6px; }
.hv-pm-grid::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 999px; }
.hv-pm-grid::-webkit-scrollbar-track { background: #e5e7eb; border-radius: 999px; }
.hv-pm-card { background: #fff; border-radius: 20px; padding: 12px; box-shadow: 0 8px 22px rgba(2, 32, 58, .12); position: relative; overflow: hidden; }
.hv-pm-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #047857, #f59e0b); }
.hv-pm-media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px; background: #e5e7eb; }
.hv-pm-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) saturate(1.25); transform: scale(1.18); }
.hv-pm-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hv-pm-info { margin-top: 10px; }
.hv-pm-nama { font-weight: 800; color: #0f2d47; line-height: 1.25; }
.hv-pm-jabatan { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: #047857; margin-top: 4px; }
.hv-badge { display: inline-block; text-align: center; font-size: .72rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; margin-top: 9px; line-height: 1.3; }
.hv-badge--hadir { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.hv-badge--belum { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
a.hv-pm-sosmed { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: #047857; color: #fff; margin: 6px 3px 0; }
a.hv-pm-sosmed:hover { background: #065f46; }
.hv-pm-hint { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; font-weight: 700; color: #6b7280; margin-top: 8px; }
.hv-pm-arrow { color: #047857; animation: hvpmnudge 1.1s ease-in-out infinite; }
@keyframes hvpmnudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .hv-pm-arrow { animation: none; } }
@media (min-width: 640px) {
  .hv-pm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; overflow: visible; padding-bottom: 0; }
  .hv-pm-grid > * { flex: none; scroll-snap-align: none; }
  .hv-pm-hint { display: none; }
}
@media (min-width: 992px) { .hv-pm-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .hv-pm-grid { grid-template-columns: repeat(4, 1fr); } }

/* ===== Widget floating: kehadiran + WhatsApp + kembali ke atas ===== */
.hv-ft-stack { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1490; display: grid; gap: .75rem; justify-items: end; }
.hv-ft-btn { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; border: none; cursor: pointer; box-shadow: 0 4px 16px rgba(2, 32, 58, .25); font-size: 1rem; transition: transform .25s ease; }
.hv-ft-btn:hover, .hv-ft-btn:focus-visible { transform: translateY(-2px); }
.hv-ft-btn--hadir { background: var(--hv-primary); }
.hv-ft-btn--wa { background: #25d366; }
.hv-ft-btn--up { background: var(--hv-text-strong, #0f172a); }
.hv-ft-btn--up[hidden] { display: none; }
.hv-bottom[hidden] { display: none; }

.hv-keh-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 1505; }
.hv-keh-overlay[hidden] { display: none; }
.hv-keh-panel { position: fixed; top: 0; right: 0; width: 400px; max-width: 100%; height: 100vh; height: 100dvh; z-index: 1510; display: flex; flex-direction: column; background: var(--hv-card); border-left: 1px solid var(--hv-border); box-shadow: -25px 0 50px -12px rgba(0, 0, 0, .25); transform: translateX(100%); transition: transform .5s cubic-bezier(.4, 0, .2, 1); touch-action: pan-y; }
.hv-keh-panel[hidden] { display: none; }
.hv-keh-panel.is-open { transform: translateX(0); }
.hv-keh-head { position: relative; padding: 1.25rem; border-bottom: 1px solid var(--hv-border); }
.hv-keh-close { position: absolute; left: 1.25rem; top: 1.25rem; width: 36px; height: 36px; border-radius: 10px; border: none; background: var(--hv-border); color: var(--hv-text-strong, #0f172a); cursor: pointer; }
.hv-keh-eyebrow { margin: 0; text-align: right; font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #94a3b8; }
.hv-keh-title { margin: .15rem 0 0; text-align: right; font-size: 1.25rem; font-weight: 800; color: var(--hv-text-strong, #0f172a); }
.hv-keh-title span { color: var(--hv-primary); }
.hv-keh-date { margin: .25rem 0 0; text-align: right; font-size: .72rem; font-weight: 600; color: #64748b; }
.hv-keh-list { flex: 1; overflow-y: auto; padding: 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-content: start; }
.hv-keh-empty { grid-column: 1 / -1; text-align: center; font-size: .8rem; font-weight: 600; color: #64748b; padding: 2rem 0; }
.hv-keh-row { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .7rem .8rem; border: 1px solid var(--hv-border); border-radius: 14px; background: var(--hv-card); }
.hv-keh-foto { display: block; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: var(--hv-border); }
.hv-keh-info { min-width: 0; flex: 1; }
.hv-keh-nama { font-size: .82rem; font-weight: 700; color: var(--hv-text-strong, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-keh-jabatan { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-keh-row .hv-badge { margin-top: 0; flex: 0 1 auto; }
.hv-keh-handle-area { display: none; }
.hv-keh-handle { width: 52px; height: 5px; border-radius: 999px; background: #cbd5e1; display: block; }

.hv-badge--tidak { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.hv-badge--libur { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }

html.dark .hv-keh-overlay { background: rgba(2, 6, 23, .6); }
html.dark .hv-keh-close { background: #1f2937; color: #e5e7eb; }
html.dark .hv-keh-panel { background: var(--hv-card); border-left-color: #1f2937; }
html.dark .hv-keh-handle { background: #475569; }
html.dark .hv-ft-btn--up { background: #1f2937; }
html.dark .hv-badge--tidak { background: rgba(194, 65, 12, .15); color: #fdba74; border-color: rgba(194, 65, 12, .35); }
html.dark .hv-badge--libur { background: rgba(148, 163, 184, .12); color: #cbd5e1; border-color: rgba(148, 163, 184, .3); }

@media (max-width: 1023px) {
  .hv-ft-stack { bottom: 5.5rem; }
  .hv-keh-panel { width: 100%; border-left: none; }
  .hv-keh-handle-area { display: flex; justify-content: center; padding: .8rem 0 calc(.8rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hv-border); }
  .hv-keh-close { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-ft-btn, .hv-keh-panel { transition: none; }
}

/* ==========================================================================
   Sentuhan Akhir 2026-10-20 — font seragam + aksesibilitas (WCAG 2.2 AA)
   ========================================================================== */

/* — Font: aktifkan Plus Jakarta Sans yang sudah dimuat dari Google Fonts.
   `.font-primary` di style.css menarget Poppins; selektor sama, berkas ini
   dimuat belakankan sehingga menang tanpa menyentuh berkas minified.
   Poppins & font sistem tetap sebagai cadangan bila Google Fonts gagal. — */
.font-primary {
  font-family: 'Plus Jakarta Sans', 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* — Kontrol utama: target sentuh 44×44 px (WCAG 2.5.8 s.d. rekomendasi AAA) — */
.hv-nav-menu > li > a,
.hv-dark-toggle,
.hv-nav-login,
.hv-burger,
.hv-drawer-close,
.hv-login-close,
.hv-footer-social a {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* — Tautan menu & daftar padat: minimum 24×24 px (WCAG 2.5.8 Level AA) — */
.hv-drawer-list a,
.hv-drawer-list summary,
.hv-dropdown a,
.hv-footer-list a,
.hv-footer-bottom a,
.hv-tap-24 {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.hv-footer-list a,
.hv-drawer-list a,
.hv-dropdown a {
  padding-block: 3px;
}

/* — Titik navigasi karusel Owl: area sentuh 24 px tanpa mengubah ukuran titik — */
.owl-carousel .owl-dot {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* — Tautan teks marquee pengumuman: minimum 24 px tinggi (WCAG 2.5.8) —
   Salinan kedua di dalam track sudah `aria-hidden` + `tabindex="-1"`. */
.hv-marquee-track a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* ══════════════════════════════════════════════════════════════════════
   V4.11 — Mode gelap: paket inti perbaikan
   P1-1 grafik Highcharts · P1-2 peta Leaflet · P1-4 badge IDM
   ══════════════════════════════════════════════════════════════════════ */

/* ---- P1-1: Grafik Highcharts -------------------------------------------
   Highcharts tidak punya tema gelap bawaan yang bisa dipakai di sini
   (public/assets/css/highcharts.css tidak dimuat halaman mana pun), maka
   override dilakukan lewat CSS. Warna teks Highcharts ditulis sebagai
   inline style, jadi aturan CSS wajib memakai !important. */
html.dark .highcharts-container { background: transparent !important; }
html.dark .highcharts-background { fill: var(--hv-card) !important; }
html.dark .highcharts-plot-background { fill: transparent !important; }
html.dark .highcharts-container text { fill: var(--hv-text) !important; }
html.dark .highcharts-container .highcharts-title text { fill: var(--hv-text-strong) !important; }
html.dark .highcharts-container .highcharts-subtitle text,
html.dark .highcharts-container .highcharts-caption text,
html.dark .highcharts-container .highcharts-credits text { fill: #94a3b8 !important; }
html.dark .highcharts-container .highcharts-data-label text { fill: #ffffff !important; }
html.dark .highcharts-container .highcharts-data-label text .highcharts-text-outline {
  fill: #0b1220 !important;
  stroke: #0b1220 !important;
}
html.dark .highcharts-container .highcharts-grid-line { stroke: var(--hv-border) !important; }
html.dark .highcharts-container .highcharts-axis-line,
html.dark .highcharts-container .highcharts-tick-mark { stroke: var(--hv-border) !important; }
html.dark .highcharts-container .highcharts-legend-background { fill: transparent !important; }
html.dark .highcharts-container .highcharts-tooltip-box {
  fill: var(--hv-card) !important;
  stroke: var(--hv-primary-ink) !important;
}
html.dark .highcharts-container .highcharts-tooltip text { fill: var(--hv-text-strong) !important; }
html.dark .highcharts-container .highcharts-3d-axis {
  fill: rgba(11, 58, 34, .55) !important;
  stroke: var(--hv-border) !important;
}
html.dark .highcharts-container .highcharts-button {
  fill: var(--hv-card) !important;
  stroke: var(--hv-border) !important;
}
html.dark .highcharts-container .highcharts-button text { fill: var(--hv-text) !important; }

/* ---- P1-2: Kontrol peta Leaflet ---------------------------------------- */
/* Latar dasar container Leaflet bawaan adalah abu terang (#ddd), sehingga
   muncul kedipan terang saat tile belum termuat atau saat peta digeser. */
html.dark .leaflet-container {
  background: var(--hv-card) !important;
}
html.dark .leaflet-control-zoom a,
html.dark .leaflet-control-zoom a:hover {
  background-color: var(--hv-card) !important;
  color: var(--hv-text-strong) !important;
  border-bottom-color: var(--hv-border) !important;
}
html.dark .leaflet-control-zoom a:hover { background-color: #0b3a22 !important; }
html.dark .leaflet-bar {
  border: 1px solid var(--hv-border) !important;
  box-shadow: none !important;
}
html.dark .leaflet-control-attribution {
  background: rgba(6, 40, 22, .88) !important;
  color: var(--hv-text) !important;
}
html.dark .leaflet-control-attribution a { color: var(--hv-primary-ink) !important; }
html.dark .leaflet-control-layers {
  background: var(--hv-card) !important;
  color: var(--hv-text) !important;
  border: 1px solid var(--hv-border) !important;
  box-shadow: none !important;
}
html.dark .leaflet-control-layers-toggle { background-color: var(--hv-card) !important; }
html.dark .leaflet-control-layers label { color: var(--hv-text) !important; }
html.dark .leaflet-control-layers-separator { border-top-color: var(--hv-border) !important; }
html.dark .leaflet-popup-content-wrapper,
html.dark .leaflet-popup-tip {
  background: var(--hv-card) !important;
  color: var(--hv-text) !important;
}
html.dark .leaflet-popup-close-button { color: var(--hv-text) !important; }

/* ---- P1-4: Badge status IDM -------------------------------------------
   Warna bawaan Tailwind (yellow-500 dsb.) terlalu terang untuk teks putih.
   Turun satu langkah agar tetap lolos AA (>= 4,5:1). */
html.dark #status-idm .bg-blue-500 { background-color: #1d4ed8 !important; }
html.dark #status-idm .bg-yellow-500 { background-color: #b45309 !important; }
html.dark #status-idm .bg-green-500 { background-color: #15803d !important; }
html.dark #status-idm .bg-red-500 { background-color: #b91c1c !important; }

/* ==========================================================================
   Polish — aksesibilitas & dark mode (2026-10-26)
   ========================================================================== */

/* — Focus-visible global: semua elemen interaktif punya outline — */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--hv-primary, #15803d);
  outline-offset: 2px;
  border-radius: 4px;
}

/* — Tombol: feedback saat klik — */
.hv-btn:active, .hv-ft-btn:active { transform: scale(0.97); }

/* — prefers-reduced-motion global — */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Slug pages — tata letak halaman cuaca / gempa / cek-penduduk / arsip
   Kelas huta-* sebelumnya tidak punya CSS sama sekali (2026-10-26)
   ========================================================================== */

/* — Kerangka halaman — */
.article-single { display: block; }
.container-page { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: 16px; }
.mb-20 { margin-bottom: 20px; }

.huta-page-card {
  background: var(--hv-card, #fff);
  border: 1px solid var(--hv-border, #e7e5e4);
  border-radius: var(--hv-radius, 1rem);
  box-shadow: var(--hv-shadow, 0 4px 16px rgba(5, 37, 22, .06));
  padding: clamp(16px, 2.5vw, 28px);
  margin-bottom: 24px;
}

/* — Judul halaman: ikon + teks + aksi — */
.huta-page-title { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.huta-title-icon {
  width: 56px; height: 56px; flex: 0 0 56px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--hv-primary, #15803d) 12%, var(--hv-card, #fff));
  color: var(--hv-primary-ink, #15803d);
}
.huta-title-icon svg { width: 28px; height: 28px; fill: currentColor; }
.huta-title-icon i { font-size: 26px; }
.huta-title-icon-blue,
.huta-tone-blue {
  background: color-mix(in srgb, #2563eb 12%, var(--hv-card, #fff));
  color: #2563eb;
}
.huta-title-icon-green { color: var(--hv-primary-ink, #15803d); }
.huta-environment-title-copy { flex: 1 1 260px; min-width: 0; }
.huta-page-title h2 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--hv-text-strong, #0f172a); }
.huta-page-title p { margin: 4px 0 0; font-size: .9rem; color: var(--hv-text, #57534e); }
.huta-page-actions { display: flex; gap: 8px; margin-left: auto; }
.huta-print-action,
.huta-page-back {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  font: inherit; font-size: .85rem; font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--hv-border, #e7e5e4);
  background: var(--hv-card, #fff);
  color: var(--hv-primary-ink, #15803d);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.huta-print-action:hover,
.huta-page-back:hover { background: color-mix(in srgb, var(--hv-primary, #15803d) 8%, var(--hv-card, #fff)); }
.huta-print-action svg, .huta-page-back svg { width: 17px; height: 17px; fill: currentColor; }

/* — Kartu metrik (cuaca) — */
.huta-environment-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.huta-environment-metric {
  display: flex; align-items: center; gap: 13px;
  padding: 16px;
  border: 1px solid var(--hv-border, #e7e5e4);
  border-radius: 14px;
  background: color-mix(in srgb, var(--hv-primary, #15803d) 4%, var(--hv-card, #fff));
  min-width: 0;
}
.huta-environment-metric-icon {
  width: 54px; height: 54px; flex: 0 0 54px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--hv-primary, #15803d) 12%, var(--hv-card, #fff));
  color: var(--hv-primary-ink, #15803d);
}
.huta-environment-metric-icon svg { width: 30px; height: 30px; fill: currentColor; }
.huta-environment-metric-icon img { width: 54px; height: 54px; object-fit: contain; }
.huta-environment-metric div { min-width: 0; }
.huta-environment-metric small {
  display: block;
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--hv-text, #57534e);
}
.huta-environment-metric strong {
  display: block;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  color: var(--hv-text-strong, #0f172a);
  line-height: 1.3;
}
.huta-environment-metric em {
  display: block; font-style: normal;
  font-size: .8rem; color: var(--hv-text, #57534e);
  overflow-wrap: anywhere;
}
.huta-weather-now { background: color-mix(in srgb, var(--hv-primary, #15803d) 10%, var(--hv-card, #fff)); }
.huta-air-unknown .huta-environment-metric-icon { opacity: .75; }
.huta-air-category-text { font-weight: 600; color: var(--hv-primary-ink, #15803d) !important; }

/* — Dua panel atas (wilayah + kualitas udara) — */
.huta-environment-topgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.huta-panel {
  background: var(--hv-card, #fff);
  border: 1px solid var(--hv-border, #e7e5e4);
  border-radius: 14px;
  padding: clamp(14px, 2vw, 20px);
  min-width: 0;
}
.huta-panel-heading {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hv-border, #e7e5e4);
}
.huta-panel-heading h3 { margin: 0; font-size: 1.02rem; color: var(--hv-text-strong, #0f172a); }
.huta-panel-heading p { margin: 4px 0 0; font-size: .83rem; color: var(--hv-text, #57534e); }

/* — Identitas wilayah — */
.huta-environment-identity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px 18px;
}
.huta-environment-identity div { min-width: 0; }
.huta-environment-identity span {
  display: block;
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--hv-text, #57534e);
}
.huta-environment-identity strong {
  display: block; margin-top: 2px;
  font-size: .96rem;
  color: var(--hv-text-strong, #0f172a);
  overflow-wrap: anywhere;
}
.huta-environment-update {
  display: flex; align-items: center; gap: 9px;
  margin-top: 16px;
  padding: 10px 13px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--hv-primary, #15803d) 8%, var(--hv-card, #fff));
  font-size: .85rem;
  color: var(--hv-text, #57534e);
}
.huta-environment-update svg { width: 18px; height: 18px; flex: none; fill: var(--hv-primary-ink, #15803d); }

/* — Panel kualitas udara — */
.huta-air-status {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--hv-primary, #15803d) 30%, transparent);
  background: color-mix(in srgb, var(--hv-primary, #15803d) 8%, var(--hv-card, #fff));
}
.huta-air-status span {
  display: inline-block;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--hv-primary-ink, #15803d);
}
.huta-air-status strong { display: block; font-size: 1.3rem; color: var(--hv-text-strong, #0f172a); margin-top: 3px; }
.huta-air-status p { margin: 6px 0 0; font-size: .85rem; color: var(--hv-text, #57534e); }
.huta-air-scale { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.huta-air-scale-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--hv-border, #e7e5e4);
  font-size: .74rem; font-weight: 600;
  color: var(--hv-text, #57534e);
  opacity: .65;
}
.huta-air-scale-item i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.huta-air-scale-item.is-active { opacity: 1; border-color: currentColor; }
.huta-air-scale-good { color: #16a34a; }
.huta-air-scale-moderate { color: #ca8a04; }
.huta-air-scale-unhealthy { color: #ea580c; }
.huta-air-scale-very-unhealthy { color: #dc2626; }
.huta-air-scale-hazardous { color: #9f1239; }
.huta-air-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 9px;
  margin-top: 14px;
}
.huta-air-grid div {
  padding: 10px 12px;
  border: 1px solid var(--hv-border, #e7e5e4);
  border-radius: 11px;
  background: var(--hv-card, #fff);
}
.huta-air-grid span { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--hv-text, #57534e); }
.huta-air-grid strong { display: block; font-size: 1.05rem; color: var(--hv-text-strong, #0f172a); }
.huta-air-grid small { font-size: .7rem; color: var(--hv-text, #57534e); }
.huta-air-note { margin: 14px 0 0; font-size: .78rem; line-height: 1.55; color: var(--hv-text, #57534e); }

/* — Tabel prakiraan — */
.huta-weather-table-panel { margin-top: 16px; }
.huta-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--hv-border, #e7e5e4);
  border-radius: 12px;
}
.huta-data-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: .87rem;
}
.huta-data-table th {
  padding: 11px 13px;
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--hv-text-strong, #0f172a);
  background: color-mix(in srgb, var(--hv-primary, #15803d) 9%, var(--hv-card, #fff));
  border-bottom: 1px solid var(--hv-border, #e7e5e4);
}
.huta-data-table td { padding: 10px 13px; border-bottom: 1px solid var(--hv-border, #e7e5e4); color: var(--hv-text, #57534e); vertical-align: middle; }
.huta-data-table tbody tr:last-child td { border-bottom: 0; }
.huta-data-table tbody tr:hover td { background: color-mix(in srgb, var(--hv-primary, #15803d) 5%, transparent); }
.huta-weather-condition { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.huta-weather-condition img { width: 34px; height: 34px; object-fit: contain; flex: none; }

/* — Catatan sumber & status kosong — */
.huta-source-note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-size: .82rem;
  color: var(--hv-text, #57534e);
}
.huta-source-note svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
.huta-empty-state { text-align: center; padding: clamp(24px, 5vw, 44px) 16px; }
.huta-empty-state svg { width: clamp(48px, 8vw, 64px); height: clamp(48px, 8vw, 64px); fill: var(--hv-primary-ink, #15803d); opacity: .6; }
.huta-empty-state strong { display: block; margin-top: 12px; font-size: 1.05rem; color: var(--hv-text-strong, #0f172a); }
.huta-empty-state span { display: block; margin-top: 5px; font-size: .9rem; color: var(--hv-text, #57534e); }
.huta-remote-status {
  padding: 16px;
  border: 1px dashed var(--hv-border, #e7e5e4);
  border-radius: 12px;
  text-align: center;
  font-size: .88rem;
  color: var(--hv-text, #57534e);
}

/* — Tabel jadi kartu di layar kecil — */
@media (max-width: 760px) {
  .huta-table-scroll { overflow: visible; border: 0; border-radius: 0; }
  .huta-data-table { min-width: 0; }
  .huta-data-table thead { display: none; }
  .huta-data-table tbody { display: block; }
  .huta-data-table tbody tr {
    display: block;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: var(--hv-card, #fff);
    border: 1px solid var(--hv-border, #e7e5e4);
    border-radius: 12px;
  }
  .huta-data-table td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 6px 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--hv-border, #e7e5e4) 80%, transparent);
  }
  .huta-data-table tbody tr td:last-child { border-bottom: 0; }
  .huta-data-table td::before {
    content: attr(data-label);
    flex: none;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--hv-text, #57534e);
  }
}

@media (max-width: 560px) {
  .huta-page-actions { margin-left: 0; width: 100%; }
  .huta-print-action, .huta-page-back { flex: 1; justify-content: center; }
  .huta-title-icon { width: 46px; height: 46px; flex-basis: 46px; }
  .huta-title-icon svg { width: 24px; height: 24px; }
  .huta-environment-metric { padding: 13px; gap: 11px; }
  .huta-environment-metric-icon { width: 46px; height: 46px; flex-basis: 46px; }
  .huta-environment-metric-icon svg, .huta-environment-metric-icon img { width: 26px; height: 26px; }
}

/* — Cetak: sembunyikan aksi, rapikan tabel — */
@media print {
  .huta-no-print { display: none !important; }
  .huta-page-card { border: 0; box-shadow: none; padding: 0; }
  .huta-table-scroll { overflow: visible; border: 0; }
  .huta-data-table { min-width: 0; }
}

/* ==========================================================================
   Halaman Gempa — tata letak konten BMKG (2026-10-26)
   Kelas huta-earthquake-* sebelumnya tidak punya CSS sama sekali.
   ========================================================================== */

/* — atribut hidden wajib menang atas aturan display penulis — */
[hidden] { display: none !important; }

.huta-earthquake-title-copy { flex: 1 1 260px; min-width: 0; }

/* — Skeleton pemuat — */
.huta-earthquake-loading {
  margin-top: 22px;
  padding: 18px;
  border: 1px dashed var(--hv-border, #e7e5e4);
  border-radius: 14px;
  text-align: center;
}
.huta-earthquake-loading strong { display: block; margin-top: 14px; color: var(--hv-text-strong, #0f172a); }
.huta-earthquake-loading span { display: block; margin-top: 4px; font-size: .85rem; color: var(--hv-text, #57534e); }
.huta-earthquake-skeleton { display: grid; gap: 10px; }
.huta-earthquake-skeleton i {
  display: block;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--hv-border, #e7e5e4) 55%, transparent) 25%,
    color-mix(in srgb, var(--hv-border, #e7e5e4) 25%, transparent) 37%,
    color-mix(in srgb, var(--hv-border, #e7e5e4) 55%, transparent) 63%);
  background-size: 400% 100%;
  animation: huta-shimmer 1.4s ease infinite;
}
.huta-earthquake-skeleton i:nth-child(2) { height: 30px; width: 82%; }
.huta-earthquake-skeleton i:nth-child(3) { height: 30px; width: 64%; }
.huta-earthquake-skeleton i:nth-child(4) { height: 30px; width: 73%; }
@keyframes huta-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* — Kartu metrik ringkasan — */
.huta-earthquake-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.huta-earthquake-metric {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--hv-border, #e7e5e4);
  border-radius: 14px;
  background: color-mix(in srgb, var(--hv-primary, #15803d) 4%, var(--hv-card, #fff));
  min-width: 0;
}
.huta-earthquake-metric.is-location {
  background: color-mix(in srgb, #2563eb 5%, var(--hv-card, #fff));
}
.huta-earthquake-metric-icon {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--hv-primary, #15803d) 12%, var(--hv-card, #fff));
  color: var(--hv-primary-ink, #15803d);
  font-size: 21px;
}
.huta-earthquake-metric.is-location .huta-earthquake-metric-icon {
  background: color-mix(in srgb, #2563eb 12%, var(--hv-card, #fff));
  color: #2563eb;
}
.huta-earthquake-metric div { min-width: 0; }
.huta-earthquake-metric small {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--hv-text, #57534e);
}
.huta-earthquake-metric strong {
  display: block;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  color: var(--hv-text-strong, #0f172a);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.huta-earthquake-metric em {
  display: block;
  font-style: normal;
  font-size: .78rem;
  color: var(--hv-text, #57534e);
  overflow-wrap: anywhere;
}

/* — Dua panel atas: shakemap + detail kejadian — */
.huta-earthquake-topgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.huta-earthquake-shakemap {
  display: block;
  overflow: hidden;
  border: 1px solid var(--hv-border, #e7e5e4);
  border-radius: 12px;
}
.huta-earthquake-shakemap img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--hv-card, #fff);
}
.huta-earthquake-detail { display: grid; gap: 12px; }
.huta-earthquake-detail > div { min-width: 0; }
.huta-earthquake-detail span {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--hv-text, #57534e);
}
.huta-earthquake-detail strong {
  display: block;
  margin-top: 3px;
  font-size: .95rem;
  color: var(--hv-text-strong, #0f172a);
  overflow-wrap: anywhere;
}
.huta-earthquake-detail-potential {
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, #2563eb 22%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, #2563eb 7%, var(--hv-card, #fff));
}
.huta-earthquake-detail .huta-earthquake-detail-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #2563eb;
}
.huta-earthquake-detail .huta-earthquake-detail-label i { font-size: .85rem; }

/* — Perkiraan jarak dari desa — */
.huta-earthquake-local {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--hv-primary, #15803d) 25%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--hv-primary, #15803d) 8%, var(--hv-card, #fff));
}
.huta-earthquake-local > svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  fill: var(--hv-primary-ink, #15803d);
}
.huta-earthquake-local div { min-width: 0; }
.huta-earthquake-local span { display: block; font-size: .8rem; color: var(--hv-text, #57534e); }
.huta-earthquake-local span strong { color: var(--hv-text-strong, #0f172a); }
.huta-earthquake-local b {
  display: block;
  margin-top: 3px;
  font-size: 1.15rem;
  color: var(--hv-primary-ink, #15803d);
}
.huta-earthquake-local small {
  display: block;
  margin-top: 5px;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--hv-text, #57534e);
}

/* — Riwayat: judul + tab — */
.huta-earthquake-history-panel { margin-top: 16px; }
.huta-panel-heading-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.huta-panel-heading-actions > div:first-child { min-width: 0; }
.huta-earthquake-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hv-border, #e7e5e4);
  border-radius: 10px;
  background: color-mix(in srgb, var(--hv-primary, #15803d) 8%, var(--hv-card, #fff));
}
.huta-earthquake-tabs button {
  padding: 7px 13px;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hv-text, #57534e);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.huta-earthquake-tabs button:hover { color: var(--hv-text-strong, #0f172a); }
.huta-earthquake-tabs button.is-active {
  background: var(--hv-card, #fff);
  color: var(--hv-primary-ink, #15803d);
  box-shadow: 0 1px 4px rgba(5, 37, 22, .1);
}
.huta-earthquake-tab-panel { margin-top: 14px; }

/* — Panel informasi bawah: SIG-BMKG + panduan — */
.huta-earthquake-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.huta-sig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.huta-sig-grid > div {
  padding: 12px;
  border: 1px solid var(--hv-border, #e7e5e4);
  border-radius: 12px;
  background: var(--hv-card, #fff);
}
.huta-sig-grid b {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--hv-primary, #15803d) 14%, var(--hv-card, #fff));
  color: var(--hv-primary-ink, #15803d);
  font-size: .85rem;
}
.huta-sig-grid strong {
  display: block;
  margin-top: 8px;
  font-size: .88rem;
  color: var(--hv-text-strong, #0f172a);
}
.huta-sig-grid span {
  display: block;
  margin-top: 2px;
  font-size: .74rem;
  color: var(--hv-text, #57534e);
}
.huta-earthquake-safety-panel ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 9px;
}
.huta-earthquake-safety-panel li {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--hv-text, #57534e);
}

@media (max-width: 560px) {
  .huta-earthquake-tabs { width: 100%; }
  .huta-earthquake-tabs button { flex: 1; }
  .huta-earthquake-metrics { grid-template-columns: 1fr; }
  .huta-earthquake-metric { padding: 13px; gap: 11px; }
  .huta-earthquake-metric-icon { width: 44px; height: 44px; flex-basis: 44px; font-size: 18px; }
  .huta-earthquake-info-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Anti-overflow mobile (audit viewport 375px)
   -------------------------------------------------------------------------
   Target: mencegah scroll horizontal pada halaman akibat konten yang lebih
   lebar dari viewport, tanpa memotong konten (konten lebar justru dibuat
   BISA digulir di wadahnya sendiri).

   1. Tabel di dalam .content (mis. artikel dengan tabel lebar, 434px di
      viewport 319px). Wadah gulir diberikan pada elemen pembungkus tabel
      langsung (.content > :has(> table)), BUKAN pada .content utuh, agar
      blok teks artikel tidak ikut tergeser dan .modal-body yang kebetulan
      punya tabel tidak tersentuh (terverifikasi: selector ini tidak
      mem-match .modal-body).
   ========================================================================= */
.content > :has(> table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 2. Bagan SOTK (#sotk-list): highcharts-figure punya min-width:360px dari
      bagan.css sehingga melebihi lebar konten 319px di mobile. Alih-alih
      memaksa bagan menyusut (nama aparatur jadi terpotong/tumpang-tindih),
      wadah #sotk-list dibuat bisa digulir horizontal sehingga bagan tetap
      pada lebar desainnya (360px, geser ~41px) dan seluruh node terbaca. */
#sotk-list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}