/* =========================================================
   NUSA — Responsive Vertical Content Grid (9:16)
   Dark theme netral, tanpa dependency eksternal.
   ========================================================= */

:root {
  color-scheme: dark; /* popup native (dropdown, scrollbar) ikut tema gelap */
  --bg: #0e0f13;
  --bg-elevated: #15171d;
  --bg-card: #1a1d24;
  --border: #262a33;
  --text: #e8eaf0;
  --text-muted: #9aa1b1;
  --text-faint: #6d7484;
  --accent: #5b8cff;
  --accent-hover: #4a7bf0;
  --radius-card: 10px;
  --radius-sm: 8px;
  --gap: 14px;
  --header-h: 60px;
  --page-max: 1680px;
  --page-pad: clamp(12px, 2.5vw, 28px);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, .45);
  --trans: 160ms ease;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden; /* cegah horizontal overflow */
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

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

/* ============================ Header ============================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 15, 19, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 0 var(--page-pad);
  display: flex;
  align-items: center;
  gap: 18px;
}

.logo {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .12em;
  color: var(--text);
  flex-shrink: 0;
  /* Logo gambar (settings.site_logo) sejajar vertikal dengan teks fallback */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.logo:hover { color: var(--accent); }

/* Logo gambar: tinggi 32px di navbar (kelas h-8 Tailwind hanya berlaku di
   admin yang memuat Tailwind CDN — di front-end aturan inilah yang bekerja). */
.logo img {
  height: 32px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}
.logo--img { letter-spacing: normal; }

.main-nav {
  display: flex;
  gap: 4px;
  margin-left: 8px;
  min-width: 0;
}

.nav-link {
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--trans), background var(--trans);
}
.nav-link:hover { color: var(--text); background: var(--bg-card); }
.nav-link.is-active { color: var(--text); background: var(--bg-card); }

.header-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.icon-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.icon-btn:hover { background: var(--bg-card); color: var(--text); }
.icon-btn[aria-expanded="true"] {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}

.menu-toggle {
  display: none;
  touch-action: manipulation;                  /* cegah double-tap zoom saat menekan */
  -webkit-tap-highlight-color: transparent;
}

/* Ikon hamburger (SVG inline) — tampil 3 garis, berubah jadi X saat menu terbuka */
.menu-toggle .menu-icon { display: block; }
.menu-toggle .menu-icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-icon--open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-icon--close { display: block; }

/* ===== Mobile drawer navigasi =====
   Default: tak terlihat & tak bisa diklik (tetap ter-mount agar transisi mulus).
   Dibuka lewat .is-open. Disembunyikan total pada >= 768px. */
.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 6px var(--page-pad) 14px;
  /* bg-slate-900/95 + backdrop-blur-md: hampir solid agar teks di belakang tidak "ghosting" */
  background: rgba(15, 23, 42, .97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #1e293b;            /* slate-800 */
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  /* Viewport pendek (landscape HP) / banyak item: isi drawer bisa di-scroll, tidak terpotong */
  max-height: calc(100vh - 100%);
  max-height: calc(100dvh - 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 0s;
}
/* Saat tertutup & tanpa .is-open, jangan biarkan sisa ruang gulir mengganggu */
.mobile-nav[hidden] { display: none; }

.mobile-nav-list { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
.mobile-nav .nav-link {
  display: flex;
  align-items: center;
  min-height: 48px;                            /* target sentuh nyaman (>= 44px) */
  padding: 14px 14px;
  font-size: 15px;
  border-radius: 10px;
  color: var(--text-muted);
}
.mobile-nav .nav-link:hover,
.mobile-nav .nav-link:active { background: rgba(51, 65, 85, .55); color: var(--text); }
.mobile-nav .nav-link.is-active { background: rgba(59, 130, 246, .16); color: #bfdbfe; }

/* Scrim: menangkap klik di luar menu sekaligus meredupkan konten */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 45;                                  /* di bawah .site-header (z 50) */
  background: rgba(2, 6, 23, .6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
  /* Sentuhan di area scrim tidak boleh men-gulir / men-bounce halaman di belakang (iOS) */
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
}
.nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 0s linear 0s;
}

/* >= md: drawer & scrim tidak boleh ikut tampil sama sekali */
@media (min-width: 768px) {
  .mobile-nav,
  .mobile-nav.is-open,
  .nav-scrim,
  .nav-scrim.is-open {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Kunci scroll halaman saat drawer terbuka (html + body: WebView/iOS kadang hanya membaca html) */
html.nav-open,
body.nav-open { overflow: hidden; overscroll-behavior: none; }

/* Search panel */
.search-panel {
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  padding: 10px var(--page-pad);
}
.search-panel[hidden] { display: none; }

.search-form {
  max-width: var(--page-max);
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
}

.search-form-icon {
  position: absolute;
  left: 12px;
  color: var(--text-faint);
  pointer-events: none;
}

.search-input {
  width: 100%;
  height: 42px;
  padding: 0 40px 0 40px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 15px;
  transition: border-color var(--trans), background var(--trans);
}
.search-input::placeholder { color: var(--text-faint); }
.search-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elevated);
}

.search-clear {
  position: absolute;
  right: 6px;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 20px;
  line-height: 1;
  border-radius: 50%;
}
.search-clear:hover { color: var(--text); background: var(--bg-card); }
.search-clear[hidden] { display: none; }

/* ============================ Page ============================ */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 18px var(--page-pad) 40px;
}

/* ============================ Filters / Chips ============================ */
.filters { margin-bottom: 20px; }

.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.chip-row::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  padding: 7px 15px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.chip:hover { color: var(--text); border-color: var(--text-faint); }
.chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ============================ Section head ============================ */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.section-title-wrap { display: flex; align-items: baseline; gap: 10px; min-width: 0; }

.section-title {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 700;
  letter-spacing: -.01em;
}

.section-count {
  font-size: 13px;
  color: var(--text-faint);
  white-space: nowrap;
}

.sort-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sort-label {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------------- Custom dropdown (tanpa <select> native) ---------------- */
.sort-dd { position: relative; min-width: 0; }

.sort-select {              /* tombol pemicu dropdown */
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 38px;
  min-width: 0;
  max-width: 100%;
  padding: 0 12px 0 14px;
  background-color: #1e1e2e;          /* bg-[#1e1e2e] */
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--trans), background-color var(--trans), box-shadow var(--trans);
}
.sort-select:hover {
  background-color: #252537;
  border-color: var(--text-faint);
}
/* fokus: ring tipis gray-500, tanpa outline biru tebal */
.sort-select:focus { outline: none; }
.sort-select:focus-visible {
  outline: none;
  border-color: #6b7280;                            /* ring-gray-500 */
  box-shadow: 0 0 0 1px #6b7280;                    /* focus:ring-1 */
}
.sort-select:active { background-color: #1a1a29; }

.sort-dd-btn[aria-expanded="true"] {
  border-color: #6b7280;
  box-shadow: 0 0 0 1px #6b7280;
  background-color: #252537;
}

.sort-dd-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sort-dd-caret {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 180ms ease;
}
.sort-select[aria-expanded="true"] .sort-dd-caret { transform: rotate(180deg); }

/* daftar opsi melayang */
.sort-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 100%;
  margin: 0;
  padding: 6px;
  list-style: none;
  background-color: #1e1e2e;                        /* bg-[#1e1e2e] */
  border: 1px solid #2b2d3e;
  border-radius: 10px;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, .55),
              0 4px 10px -4px rgba(0, 0, 0, .4);    /* shadow-lg */
  animation: dd-in 140ms ease;
}
.sort-dd-menu[hidden] { display: none; }

@keyframes dd-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sort-dd-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
}
.sort-dd-opt:hover { background-color: #374151; }   /* hover:bg-gray-700 */
.sort-dd-opt:focus { outline: none; }
.sort-dd-opt:focus-visible { outline: none; background-color: #374151; box-shadow: inset 0 0 0 1px #6b7280; }

.sort-dd-opt.is-selected {
  color: var(--accent);
  font-weight: 600;
  background-color: #252537;
}
.sort-dd-opt.is-selected::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ============================ GRID 9:16 ============================
   Breakpoint:
   <600px  : 2 kolom
   600-899 : 3 kolom
   900-1199: 4 kolom
   1200-1599: 5 kolom
   >=1600  : 6 kolom
   >=1900  : 7 kolom (monitor lebar)
   ================================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

@media (min-width: 600px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1900px) { .grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* ---------------------------- Card ---------------------------- */
.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: transparent;
  border-radius: var(--radius-card);
  transition: transform var(--trans);
}

.card-thumb {
  position: relative;
  aspect-ratio: 9 / 16;          /* rasio selalu 9:16 */
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: linear-gradient(145deg, #232733, #171a21); /* placeholder saat load/gagal */
  border: 1px solid var(--border);
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* gambar memenuhi area */
  object-position: center center;/* crop terpusat, tidak menggeser fokus */
  filter: none;                  /* jaga-jaga: jangan warisi blur/filter induk */
  transition: transform 260ms ease, opacity 260ms ease;
}
/* Saat loading hanya opacity yang 0 — tanpa filter blur, tanpa scale, supaya
   tidak ada sisa efek yang membuat gambar tampak buram setelah load. */
.card-thumb img.is-loading { opacity: 0; filter: none; }

/* Fallback kartu bila cover & thumb sama-sama kosong. */
.card-thumb--fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
}

.card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
}

.card-body { padding: 9px 2px 2px; }

.card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  /* line-clamp-2 + ellipsis: judul maksimal 2 baris */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  min-height: calc(1.35em * 2);   /* tinggi kartu stabil, 1 atau 2 baris tetap sama */
}

.card-meta {
  margin-top: 8px;                /* jarak judul -> metadata (mt-2) */
  display: flex;
  align-items: center;            /* heart, suka, |, tanggal sejajar */
  gap: 8px;                       /* gap-2 */
  font-size: 11.5px;
  line-height: 1.3;
  color: #9ca3af;                 /* text-gray-400: abu redup, tidak bersaing judul */
  white-space: nowrap;
  overflow: hidden;
}
.card-meta .meta-text {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.card-meta .meta-sep { color: #9ca3af; opacity: .6; flex-shrink: 0; }
.card-meta .meta-heart { color: #9ca3af; flex-shrink: 0; }

/* Desktop hover halus */
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-3px); }
  .card:hover .card-thumb { border-color: var(--text-faint); box-shadow: var(--shadow-hover); }
  .card:hover .card-thumb img { transform: scale(1.045); }
  .card:hover .card-title { color: #fff; }
}

/* ------------------------- Skeleton ------------------------- */
.grid--skeleton { margin-bottom: 0; }
.grid--skeleton[hidden] { display: none; }

.skeleton-card .card-thumb {
  background: linear-gradient(100deg, #1c1f27 30%, #262b36 50%, #1c1f27 70%);
  background-size: 220% 100%;
  animation: shimmer 1.3s linear infinite;
}
.skeleton-line {
  height: 11px;
  margin-top: 9px;
  border-radius: 5px;
  background: linear-gradient(100deg, #1c1f27 30%, #262b36 50%, #1c1f27 70%);
  background-size: 220% 100%;
  animation: shimmer 1.3s linear infinite;
}
.skeleton-line.short { width: 55%; }

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -20% 0; }
}

/* ------------------------- Empty state ------------------------- */
.empty-state {
  text-align: center;
  padding: 60px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-card);
}
.empty-state[hidden] { display: none; }
.empty-title { margin: 0; font-size: 17px; font-weight: 600; }
.empty-desc { margin: 6px 0 0; font-size: 14px; color: var(--text-muted); }

/* ============================ Pagination ============================
   Gaya chip pill gelap (padanan Tailwind):
   container: justify-center items-center flex gap-3 + my-8
   tombol:    px-4 py-2 text-sm font-medium rounded-xl border-gray-800
              bg-gray-900/60 text-gray-300, hover bg-gray-800 text-white
   info:      badge pill text-xs md:text-sm text-gray-400 bg-gray-800/40
   ================================================================ */
.pagination[hidden] { display: none; }

/* ===== Pagination: wrapper terpusat vertikal (padanan flex-col items-center
   justify-center gap-3 my-8) — baris tombol lalu info halaman. ===== */
.pagination-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;                        /* gap-3 */
  margin: 32px 0;                   /* my-8 */
  width: 100%;
}

/* Baris tombol: Prev + angka halaman + Next satu baris, boleh wrap di mobile */
.pagination {
  display: flex;
  align-items: center;              /* items-center */
  justify-content: center;          /* justify-center */
  flex-wrap: wrap;
  gap: 8px;                         /* gap-2 */
}

/* Tombol nonaktif (span aria-disabled, bukan <button>) */
.btn[aria-disabled="true"] {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

/* Mobile sempit (≤420px): tombol dirapatkan agar Prev + angka + Next
   tetap satu baris penuh tanpa wrap di 360px. */
@media (max-width: 420px) {
  .pagination .btn {
    padding: 6px 10px;
    font-size: 12px;
    min-height: 32px;
  }
  .pagination .page-num {
    min-width: 32px;
    padding: 6px 0;
  }
}

.pager {
  display: flex;
  align-items: center;              /* items-center */
  justify-content: center;          /* justify-center */
  flex-wrap: wrap;                  /* info tetap 1 baris, tombol boleh turun */
  gap: 12px;                        /* gap-3 */
  margin: 32px 0;                   /* my-8 */
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 16px;                /* py-2 px-4 */
  border: 1px solid #1f2937;        /* border-gray-800 */
  border-radius: 12px;              /* rounded-xl */
  background: rgba(17, 24, 39, .6); /* bg-gray-900/60 */
  color: #d1d5db;                   /* text-gray-300 */
  font-size: 14px;                  /* text-sm */
  font-weight: 500;                 /* font-medium */
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease,
              border-color 200ms ease, opacity 200ms ease;
}
.btn:hover:not(:disabled) {
  background: #1f2937;              /* hover:bg-gray-800 */
  color: #fff;                      /* hover:text-white */
}
.btn:disabled {
  opacity: .4;                      /* disabled:opacity-40 */
  cursor: not-allowed;              /* disabled:cursor-not-allowed */
}
.btn:disabled:hover { background: rgba(17, 24, 39, .6); }  /* disabled:hover:bg-transparent */
.btn:focus { outline: none; }
.btn:focus-visible {
  outline: none;
  border-color: #6b7280;
  box-shadow: 0 0 0 1px #6b7280;
}

.pager[hidden] { display: none; }

.pager-info {
  margin: 0;
  padding: 4px 10px;                /* ringkas: py-1 px-2.5 */
  border: 1px solid rgba(31, 41, 55, .6);
  border-radius: 999px;             /* pill */
  background: rgba(31, 41, 55, .35);
  color: #9ca3af;                   /* text-slate-400 */
  font-size: 12px;                  /* text-xs */
  font-weight: 500;                 /* font-medium */
  letter-spacing: .03em;            /* tracking-wide */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;              /* "Halaman 1 dari 3" tidak memanjang/patah */
  text-align: center;
}
@media (min-width: 640px) {
  .pager-info { font-size: 13px; }  /* sm:text-sm ringkas */
}

/* ============================ Footer ============================ */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  margin-top: 20px;
}

.footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 34px var(--page-pad) 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
}

.footer-brand { max-width: 320px; }
.logo--footer { display: inline-flex; align-items: center; margin-bottom: 8px; }
.logo--footer img { height: 36px; max-width: 220px; object-fit: contain; }
.footer-tag { margin: 0; font-size: 13.5px; color: var(--text-muted); }

.footer-cols {
  display: flex;
  gap: clamp(24px, 5vw, 64px);
  flex-wrap: wrap;
}

.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-heading {
  margin: 0 0 2px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.footer-col a { font-size: 14px; color: var(--text-muted); transition: color var(--trans); }
.footer-col a:hover { color: var(--text); }
/* Item footer yang halamannya belum ada — teks biasa, bukan tautan mati */
.footer-link-pending { font-size: 14px; color: var(--text-faint); cursor: default; }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 14px var(--page-pad);
  text-align: center;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* ============================ Responsive ============================ */

/* ===== Breakpoint navigasi — selaras `md` Tailwind (768px) =====
   < md : hamburger tampil, menu link horizontal disembunyikan  (hidden md:flex)
   >= md: hamburger hilang, menu link horizontal tampil        (md:flex) */
@media (max-width: 767px) {
  .main-nav { display: none; }               /* link horizontal hanya untuk >= md */
  .menu-toggle { display: inline-flex; }
  .header-inner { position: relative; gap: 10px; }
}

@media (min-width: 768px) {
  .main-nav { display: flex; }
  .menu-toggle { display: none; }
}

/* Viewport pendek (landscape HP): rapatkan item agar semua muat tanpa gulir */
@media (max-height: 480px) {
  .mobile-nav-list { padding-top: 4px; }
  .mobile-nav .nav-link { min-height: 40px; padding: 9px 12px; font-size: 14px; }
}

/* Mobile < 600px: penyesuaian rapat */
@media (max-width: 599px) {
  :root { --gap: 10px; --header-h: 54px; }

  /* search default terbuka di mobile agar nyaman */
  .search-panel { padding-top: 8px; padding-bottom: 8px; }

  .section-head { align-items: flex-start; }
  .sort-wrap { width: 100%; }
  .sort-dd { flex: 1; }
  .sort-select {
    width: 100%;
    height: 42px;               /* target sentuh lebih nyaman */
    font-size: 15px;
    padding-right: 14px;
  }
  .sort-dd-menu { left: 0; right: 0; min-width: 0; }  /* menu selebar baris */

  .card-title { font-size: 13.5px; }

  /* meta tidak dipotong: boleh turun baris */
  .card-meta {
    white-space: normal;
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .card-meta .meta-text { overflow: visible; text-overflow: clip; }

  .footer-inner { flex-direction: column; gap: 24px; }
}

/* Tablet */
@media (min-width: 600px) and (max-width: 899px) {
  :root { --gap: 12px; }
}

/* Desktop kecil */
@media (min-width: 900px) and (max-width: 1199px) {
  :root { --gap: 14px; }
}

/* Desktop besar: jangan bikin thumbnail terlalu besar */
@media (min-width: 1600px) {
  .card-title { font-size: 14.5px; }
}

/* Kurangi gerak jika diminta OS */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card:hover { transform: none; }
}

/* =========================================================
   Utility layer minimal — setara kelas Tailwind yang dipakai
   header.php (hidden md:flex, hidden md:hidden, w-6 h-6 text-white).
   Proyek ini tanpa build Tailwind, jadi kelasnya didefinisikan
   sendiri. WAJIB tetap di bagian paling bawah file ini agar
   mengalahkan aturan komponen dengan spesifisitas sama.
   ========================================================= */
.hidden { display: none; }
.w-6   { width: 1.5rem; }   /* 24px */
.h-6   { height: 1.5rem; }  /* 24px */
.text-white { color: #fff; }

/* `md:` → min-width 768px, sama dengan breakpoint Tailwind */
@media (min-width: 768px) {
  .md\:flex   { display: flex; }
  .md\:hidden { display: none; }
}