/* =============================================================================
   BEKASI KEREN — visual-upgrade.css  v1.0
   ─────────────────────────────────────────────────────────────────────────────
   Layer penyempurnaan UX/visual di atas design-upgrade.css.
   Import PALING TERAKHIR setelah semua CSS lain:
     <link rel="stylesheet" href="/css/main.css">
     <link rel="stylesheet" href="/css/design-upgrade.css">
     <link rel="stylesheet" href="/css/visual-upgrade.css">  ← ini

   Menerapkan 6 poin analisis UX:
   [1] Whitespace sebagai pemisah — hapus border, pakai proximity & background
   [2] Hierarki tipografi ketat — bold-tidak-hitam, meta kecil, 2-line truncation
   [3] Breaking ticker — pause saat hover sudah ada, tambah kontrol aksesibilitas
   [4] Akses Cepat — hover lift, shadow feedback, border-radius lebih friendly
   [5] Video of the Day — play icon kontras tinggi, gradient overlay lebih kaya
   [6] Aspect ratio konsisten — kunci grid terpopuler dan card standard
   ============================================================================= */


/* =============================================================================
   [1] WHITESPACE SEBAGAI PEMISAH — hapus border berlebihan, pakai spasi
   ─────────────────────────────────────────────────────────────────────────────
   Prinsip: mata manusia tidak butuh garis untuk memisahkan item jika jarak
   dan ukuran sudah cukup berbicara (Gestalt: Proximity).
   ============================================================================= */

/* Widget sidebar: hapus border, beri background abu sangat halus */
.widget {
  border: none;
  background: #F6F8F7;  /* abu-abu sangat halus dengan green tint — sesuai brand */
  box-shadow: none;
}
html[data-theme="dark"] .widget {
  background: var(--color-bg-tertiary);
  border: none;
}

/* Sidebar sebagai kolom: beri background halus lewat page-grid pseudo atau wrapper
   TIDAK langsung .sidebar karena sudah pakai sticky + overflow-y di ≥992px
   (main.css baris 2122-2133) — padding di dalam overflow container akan clip konten.
   Solusi: beri background di kolom grid via ::after atau langsung di widget saja */
/* Sidebar background: diterapkan via widget background, bukan .sidebar langsung */

/* Card-list (Berita Terbaru): hapus border-bottom, pakai jarak saja */
.card-list {
  border-bottom: none;
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}
.card-list:last-child {
  padding-bottom: 0;
}

/* Trending card: hapus border-bottom */
.card-trending {
  border-bottom: none;
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}
.card-trending:last-child { padding-bottom: 0; }

/* Event card: hapus border-bottom */
.event-card {
  border-bottom: none;
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}
.event-card:last-child { padding-bottom: 0; }
.event-card:first-child { padding-top: 0; }

/* Widget title: hapus border-bottom, cukup pakai margin */
.widget__title {
  border-bottom: none;
  padding-bottom: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.widget__title::after {
  display: none;  /* hapus garis hijau bawah widget title */
}

/* Ganti dengan garis aksen yang lebih halus di kiri */
.widget__title {
  padding-left: var(--sp-3);
  border-left: 3px solid var(--color-primary-light);
  position: relative;
}

/* Section featured: kurangi visual noise */
.section--featured {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
html[data-theme="dark"] .section--featured {
  background: transparent;
  border: none;
}


/* =============================================================================
   [2] HIERARKI TIPOGRAFI KETAT
   ─────────────────────────────────────────────────────────────────────────────
   Judul: bold, dark slate (bukan hitam pekat)
   Meta: 12px, warna sekunder yang cukup kontras (WCAG AA)
   Deskripsi: maks 2 baris + ellipsis
   ============================================================================= */

/* Judul card-list: dark slate, bukan hitam pekat */
.card-list__title {
  color: #1E2A22;  /* dark slate dengan green undertone */
  font-weight: var(--fw-semibold);
  -webkit-line-clamp: 2;  /* maks 2 baris */
  line-clamp: 2;
}
html[data-theme="dark"] .card-list__title {
  color: var(--color-text-primary);
}

/* Meta card-list: kecil tapi kontras cukup (WCAG AA = ≥4.5:1 untuk 12px) */
.card-list__meta {
  color: #6B7A72;  /* abu-abu dengan green tint, ratio ~5.2:1 di atas putih */
  font-size: 0.6875rem;
  font-weight: var(--fw-medium);
}
html[data-theme="dark"] .card-list__meta {
  color: var(--color-text-muted);
}

/* Judul trending: konsisten dengan card-list */
.card-trending__title {
  color: #1E2A22;
  font-weight: var(--fw-semibold);
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
html[data-theme="dark"] .card-trending__title {
  color: var(--color-text-primary);
}

.card-trending__meta {
  color: #6B7A72;
  font-size: 0.6875rem;
}

/* Card-news body text: 2 baris truncation */
.card-news__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #4A6356;  /* medium green-slate, readable */
  font-size: 0.8125rem;
  line-height: var(--lh-normal);
}
html[data-theme="dark"] .card-news__excerpt {
  color: var(--color-text-secondary);
}

/* Card-news title: dark slate */
.card-news__title {
  color: #1E2A22;
  font-weight: var(--fw-bold);
}
html[data-theme="dark"] .card-news__title {
  color: var(--color-text-primary);
}

/* Card-news meta */
.card-news__meta {
  color: #6B7A72;
  font-size: 0.6875rem;
}


/* =============================================================================
   [3] BREAKING NEWS TICKER — aksesibilitas & kecepatan optimal
   ─────────────────────────────────────────────────────────────────────────────
   Sudah ada: pause on hover (di main.css baris 656)
   Tambahan:
   - Kecepatan 40s (main.css 35s sudah oke, tapi 40s lebih nyaman untuk baca)
   - Tambah tombol pause manual via CSS :has() + JS siap
   - Ticker pause saat user prefer-reduced-motion (sudah ada di main.css)
   ============================================================================= */

/* Kecepatan ticker sedikit lebih lambat agar lebih terbaca */
.breaking-ticker__content {
  animation-duration: 42s;  /* dari 35s → 42s, lebih nyaman */
}

/* Ticker paused state — bisa di-toggle via JS dengan class .is-paused */
.breaking-ticker.is-paused .breaking-ticker__content {
  animation-play-state: paused;
}

/* Tombol pause/play aksesibilitas — ditambahkan via JS jika diperlukan */
.ticker-control-btn {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: var(--sp-2);
  transition: background var(--t-fast);
  flex-shrink: 0;
}
.ticker-control-btn:hover {
  background: rgba(255,255,255,0.25);
}
.ticker-control-btn svg {
  width: 10px; height: 10px;
  pointer-events: none;
}

/* Breaking ticker: tambah padding-right agar teks tidak mepet edge */
.breaking-ticker__track {
  padding-right: var(--sp-2);
}


/* =============================================================================
   [4] AKSES CEPAT — hover lift, shadow feedback, lebih friendly
   ─────────────────────────────────────────────────────────────────────────────
   Sudah ada: transform translateY(-3px) on hover (design-upgrade.css baris 539)
   Tambahan:
   - border-radius lebih besar (lebih friendly, clickable feel)
   - Shadow lebih hangat saat hover
   - Active state (saat diklik): turun sedikit untuk tactile feel
   - Transisi lebih smooth
   ============================================================================= */

.akses-item {
  border-radius: 14px;  /* lebih membulat dari 12px — terasa lebih friendly */
  transition:
    transform 200ms var(--ease-spring),
    box-shadow 200ms ease,
    filter 200ms ease;
  position: relative;
  overflow: hidden;
}

/* Hover: angkat lebih signifikan + shadow hangat */
@media (hover: hover) {
  .akses-item:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
      0 12px 28px rgba(13, 92, 53, 0.28),
      0 4px 8px rgba(13, 92, 53, 0.14);
    filter: brightness(1.06);
  }
}

/* Active/pressed: turun untuk tactile feel */
.akses-item:active {
  transform: translateY(-1px) scale(0.99);
  box-shadow:
    0 4px 12px rgba(13, 92, 53, 0.2);
  transition-duration: 80ms;
}

/* Ripple effect saat diklik — pure CSS */
/* Ripple via ::after dihapus — .akses-item sudah overflow:hidden di design-upgrade.css
   sehingga ::after tidak visible. Active state cukup pakai filter brightness. */

/* Label: sedikit lebih besar untuk terbaca di HP semua ukuran */
.akses-item__label {
  font-size: 0.8125rem;  /* dari 12px (var(--fs-meta)) → 13px */
  letter-spacing: 0.01em;
}


/* =============================================================================
   [5] VIDEO OF THE DAY — play icon kontras, overlay lebih kaya
   ─────────────────────────────────────────────────────────────────────────────
   Masalah: ikon play bisa tidak terlihat di atas gambar terang
   Fix:
   - Overlay gradient lebih kaya (dari bawah, gelap)
   - Play icon: putih solid + drop shadow gelap (bukan opacity:0.9)
   - Hover: skala naik sedikit + brightness
   ============================================================================= */

/* Overlay video: gradient lebih kaya dari bawah */
.video-thumb__overlay {
  /* Hanya upgrade gradient — tidak ubah display/align dari main.css
     (main.css: align-items:flex-end untuk views di bawah) */
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.80) 0%,
      rgba(0, 0, 0, 0.40) 35%,
      rgba(0, 0, 0, 0.10) 60%,
      transparent 100%
    );
}

/* Container untuk play icon di tengah + views di bawah */
.video-thumb__overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Dark vignette di tengah untuk play icon */
  background: radial-gradient(
    circle at 50% 45%,
    rgba(0,0,0,0.25) 0%,
    transparent 50%
  );
  pointer-events: none;
}

/* Play icon wrapper: posisi tengah */
.video-thumb__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);  /* sedikit ke atas dari center */
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 12px rgba(0,0,0,0.5),
    0 0 0 2px rgba(255,255,255,0.3);
  transition: transform 200ms var(--ease-spring), box-shadow 200ms ease;
}
.video-thumb__play svg {
  width: 14px; height: 14px;
  color: var(--color-primary-dark);
  margin-left: 2px;  /* optically center play triangle */
}

/* Views: di pojok bawah kiri dengan kontras tinggi */
.video-thumb__views {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 0.5625rem;
  font-weight: var(--fw-bold);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0,0,0,0.35);
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}

/* Hover: lift + brightness */
@media (hover: hover) {
  .video-thumb {
    transition: transform 200ms var(--ease-spring), box-shadow 200ms ease;
  }
  .video-thumb:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: var(--shadow-lg);
  }
  .video-thumb:hover .video-thumb__play {
    transform: translate(-50%, -55%) scale(1.12);
    box-shadow:
      0 4px 16px rgba(0,0,0,0.6),
      0 0 0 3px rgba(255,255,255,0.5);
  }
}

/* Untuk video-thumb yang sudah ada di JS: override play icon inline */
/* Icon TikTok di JS: beri drop shadow agar kontras di atas gambar terang */
.video-thumb svg[viewBox="0 0 24 24"] {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
}


/* =============================================================================
   [6] ASPECT RATIO KONSISTEN — grid terpopuler & card standard
   ─────────────────────────────────────────────────────────────────────────────
   Semua card dalam grid yang sama harus punya tinggi gambar seragam.
   ============================================================================= */

/* Card standard (sub-featured): 4/3 agar subjek foto tidak terpotong */
.card-standard .card-news__img-wrap {
  aspect-ratio: 4 / 3;
}
.card-standard .card-news__img {
  object-position: center center;
}

/* Grid terpopuler: kunci 4/3 juga */
.grid-terpopuler .card-news__img-wrap {
  aspect-ratio: 4 / 3;
}

/* Card trending (sidebar): square 1:1 — sudah sesuai main.css */
.card-trending__img-wrap {
  aspect-ratio: 1;
  width: 60px;
  min-width: 60px;
  max-width: 60px;
}

/* Event card: kunci img-wrap agar tidak overflow */
.event-card__img-wrap {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  aspect-ratio: 4 / 3;
}
@media (max-width: 575.98px) {
  .event-card__img-wrap {
    width: 52px;
    min-width: 52px;
    max-width: 52px;
  }
  .card-trending__img-wrap {
    width: 52px;
    min-width: 52px;
    max-width: 52px;
  }
}

/* Semua card image: object-fit cover, tidak ada stretching */
.card-news__img,
.card-list__img,
.card-trending__img,
.event-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: 100%;
}


/* =============================================================================
   BONUS [A] — Card list hover: lebih smooth tanpa border noise
   ============================================================================= */
@media (hover: hover) {
  .card-list:hover {
    background: rgba(240, 253, 244, 0.8);  /* mint very light */
    border-radius: var(--radius);
  }
  html[data-theme="dark"] .card-list:hover {
    background: rgba(22, 163, 74, 0.07);
  }
  .card-list:hover .card-list__title {
    color: var(--color-primary);
  }
}

/* Card-list: negative margin hanya di ≥992px untuk hover flush effect */
@media (max-width: 991.98px) {
  .card-list {
    margin-inline: 0;
  }
  .card-trending {
    margin-inline: 0;
  }
}


/* =============================================================================
   BONUS [B] — Section terpopuler: bersih, tanpa border berlebihan
   ============================================================================= */
.section--terpopuler {
  border: none;
  background: transparent;
  padding: 0;
}
html[data-theme="dark"] .section--terpopuler {
  background: transparent;
  border: none;
}


/* =============================================================================
   BONUS [C] — Sidebar widget spacing konsisten
   ============================================================================= */
.widget + .widget {
  margin-top: 0;  /* gap sudah dihandle oleh .sidebar gap */
}

/* Widget title konsistensi */
.widget__title {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}
.widget__title svg {
  width: 14px; height: 14px;
  color: var(--color-primary);
}


/* =============================================================================
   BONUS [D] — Breaking ticker: background mobile lebih kontras
   ============================================================================= */
@media (max-width: 767.98px) {
  .breaking-ticker {
    height: 34px;
  }
  .breaking-ticker__label {
    font-size: 0.5rem;
    padding: 0 6px 0 16px;
    height: 18px;
    margin: 0 6px;
  }
  .breaking-ticker__content {
    font-size: 0.6875rem;
  }
}


/* =============================================================================
   BONUS [E] — Background attachment mobile fix (Chrome Android)
   ============================================================================= */
@media (max-width: 767.98px) {
  body {
    background-attachment: scroll;
  }
}


/* =============================================================================
   BONUS [F] — Card-news border: kurangi visual noise
   ─────────────────────────────────────────────────────────────────────────────
   Terlalu banyak border di card membuat tampilan berat.
   Ganti border solid dengan shadow sangat tipis.
   ============================================================================= */
.card-news {
  border-color: transparent;
  box-shadow:
    0 1px 4px rgba(13, 92, 53, 0.06),
    0 0 0 1px rgba(13, 92, 53, 0.05);
}
@media (hover: hover) {
  .card-news:hover {
    border-color: transparent;
    box-shadow:
      0 8px 24px rgba(13, 92, 53, 0.14),
      0 0 0 1px rgba(13, 92, 53, 0.08);
  }
}
html[data-theme="dark"] .card-news {
  border-color: transparent;
  box-shadow:
    0 1px 4px rgba(0,0,0,0.3),
    0 0 0 1px var(--color-border);
}


/* =============================================================================
   BONUS [G] — Responsive admin table wrap
   ============================================================================= */
@media (max-width: 991.98px) {
  .admin-card__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .admin-toolbar {
    width: 100%;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 399.98px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}


/* =============================================================================
   END OF visual-upgrade.css  v1.0
   ─────────────────────────────────────────────────────────────────────────────
   Load order HTML:
     <link rel="stylesheet" href="/css/main.css">
     <link rel="stylesheet" href="/css/admin.css">        (halaman admin saja)
     <link rel="stylesheet" href="/css/design-upgrade.css">
     <link rel="stylesheet" href="/css/visual-upgrade.css">  ← terakhir
   ============================================================================= */


/* =============================================================================
   FIX — Sidebar & card tidak terpotong saat zoom browser
   ─────────────────────────────────────────────────────────────────────────────
   Masalah: page-grid pakai grid-template-columns: minmax(0,1fr) 304px.
   Saat browser di-zoom in, container mengecil tapi sidebar tetap 304px
   sehingga kolom utama dipaksa sangat sempit → card terpotong.
   Fix: gunakan minmax pada sidebar column agar responsif terhadap zoom.
   ============================================================================= */
@media (min-width: 992px) {
  .page-grid {
    /* Sidebar min 240px, max 304px — fleksibel terhadap zoom */
    grid-template-columns: minmax(0, 1fr) minmax(240px, var(--sidebar-w));
  }
}

/* card-trending: pastikan grid column gambar tidak menyusut */
.card-trending {
  /* grid-template-columns sudah 60px 1fr di main.css — cukup tambahkan min-width */
  min-width: 0;
}
.card-trending__img-wrap {
  /* Width eksplisit agar tidak collapse saat parent menyempit */
  width: 60px;
  min-width: 60px;
  flex-shrink: 0;
}
.card-trending__body {
  /* overflow:hidden sudah ada di main.css, pastikan min-width:0 */
  min-width: 0;
  overflow: hidden;
}
/* Title trending: batasi baris agar tidak push layout */
.card-trending__title {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* card-list: pastikan tidak terpotong di sidebar sempit */
.card-list {
  min-width: 0;
}
.card-list__body {
  min-width: 0;
  overflow: hidden;
}
.card-list__title {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Event card: batasi tinggi agar tidak push sidebar */
.event-card__title {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}