/* =====================================================================
   TEMA: TERANG — MERAH & NAVI (GRADASI)
   Diturunkan dari style.css — tema terang dengan warna utama merah dan
   navy, dimainkan lewat gradasi di beberapa elemen (navbar, hero,
   badge, pill, marquee). Semua nama variabel & struktur tetap sama
   supaya kompatibel dengan navbar.php, footer.php, dst.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- Palet warna (Merah & Navi) ---- */
  --kf-merah: #D6293E;        /* merah utama — navbar border, badge, link aktif */
  --kf-merah-tua: #8E1728;    /* merah tua — hover, teks aksen */
  --kf-merah-muda: #FBD9DD;   /* merah muda — aksen: pill kategori, tag, nomor populer */
  --kf-hitam: #1A2036;        /* nyaris hitam bernuansa navy, buat teks utama */
  --kf-abu: #6B7185;
  --kf-putih: #FFFFFF;
  --kf-border: #E7E9F2;

  /* ---- Warna gradasi tambahan (dipakai internal di file ini) ---- */
  --kf-grad-a: #D6293E;   /* merah */
  --kf-grad-b: #8E1728;   /* merah tua */
  --kf-grad-c: #16213E;   /* navy */
  --kf-grad-d: #2C3E75;   /* navy terang */

  /* ---- Font ---- */
  --kf-font-judul: 'Merriweather', Georgia, serif;
  --kf-font-body: 'Inter', system-ui, sans-serif;

  /* ---- Urutan menu utama (navbar & topbar kategori) ----
     Angka lebih kecil tampil lebih dulu. Ubah angka ini untuk
     menggeser posisi menu tanpa menyentuh navbar.php. */
  --kf-order-kategori: 1;
  --kf-order-breaking: 2;
  --kf-order-trending: 3;
  --kf-order-galeri: 4;
}

body {
  font-family: var(--kf-font-body);
  color: var(--kf-hitam);
  background: linear-gradient(180deg, #FDF3F4 0%, #FFFFFF 260px);
  position: relative;
}

/* =====================================================================
   BACKGROUND ANIMASI: "GARIS LISTRIK" (kabel bergerak & berkedip)
   Dipasang lewat ::before di body — TIDAK perlu ubah HTML sama sekali.
   position: fixed + z-index: -1 supaya duduk di belakang semua konten,
   dan pointer-events: none supaya tidak mengganggu klik/scroll.
   Terdiri dari 3 lapis garis diagonal tipis (merah & navy) yang
   bergerak dengan kecepatan berbeda + lapisan "percikan" yang
   berkedip acak untuk kesan aliran listrik.
   ===================================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background-image:
    /* lapis 1: garis merah sangat tipis, arah miring, gerak lambat */
    repeating-linear-gradient(
      115deg,
      transparent 0px,
      transparent 55px,
      rgba(214,41,62,.5) 56px,
      rgba(214,41,62,.5) 57px,
      transparent 58px,
      transparent 200px
    ),
    /* lapis 2: garis navy sangat tipis, arah miring berbeda, gerak lebih lambat lagi */
    repeating-linear-gradient(
      65deg,
      transparent 0px,
      transparent 80px,
      rgba(22,33,62,.4) 81px,
      rgba(22,33,62,.4) 82px,
      transparent 83px,
      transparent 240px
    );
  background-size: 260% 260%;
  animation:
    kf-listrik-gerak-1 60s linear infinite,
    kf-listrik-kedip 9s ease-in-out infinite;
}

@keyframes kf-listrik-gerak-1 {
  0%   { background-position: 0% 0%, 100% 0%; }
  50%  { background-position: 45% 30%, 55% 60%; }
  100% { background-position: 0% 0%, 100% 0%; }
}

@keyframes kf-listrik-kedip {
  0%, 100% { opacity: .16; }
  50%      { opacity: .09; }
}

/* Matikan animasi untuk pengguna yang memilih "reduce motion" di OS */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; opacity: .25; }
}

h1, h2, h3, h4, .font-judul {
  font-family: var(--kf-font-judul);
}

a { text-decoration: none; }

/* Selaraskan util Bootstrap (text-danger / btn-danger dipakai di
   beberapa tempat) supaya ikut warna tema, bukan warna default Bootstrap */
.text-danger { color: var(--kf-merah) !important; }
.btn-danger {
  background: linear-gradient(135deg, var(--kf-merah) 0%, var(--kf-grad-c) 100%) !important;
  border-color: var(--kf-merah) !important;
}
.btn-danger:hover {
  background: linear-gradient(135deg, var(--kf-grad-c) 0%, var(--kf-merah) 100%) !important;
  border-color: var(--kf-merah-tua) !important;
}

/* ===== Topbar ===== */
.kf-topbar {
  background: linear-gradient(90deg, var(--kf-grad-c) 0%, var(--kf-grad-d) 100%);
  color: #dfe3f2;
  font-size: 0.8rem;
}
.kf-topbar a { color: #dfe3f2; }
.kf-topbar a:hover { color: var(--kf-putih); }

/* ===== Navbar ===== */
.kf-navbar {
  background: var(--kf-putih);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--kf-merah), var(--kf-grad-b), var(--kf-grad-c), var(--kf-grad-d)) 1;
}
.kf-logo {
  font-family: var(--kf-font-judul);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--kf-hitam);
}
.kf-logo span { color: var(--kf-merah); }

.kf-navbar .nav-link {
  color: var(--kf-hitam);
  font-weight: 600;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: .5rem .8rem !important;
}
.kf-navbar .nav-link:hover,
.kf-navbar .nav-link.active {
  color: var(--kf-merah);
}

/* ===== Headline / Hero ===== */
.kf-hero {
  position: relative;
  border-radius: .5rem;
  overflow: hidden;
  height: 420px;
  color: #fff;
}
.kf-hero img {
  width: 100%; height: 100%; object-fit: cover;
}
.kf-hero .kf-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,33,62,.90) 0%, rgba(214,41,62,.35) 55%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.75rem;
}
.kf-hero h1 { font-size: 1.75rem; line-height: 1.3; }

.kf-hero-side .card { border: none; border-bottom: 1px solid var(--kf-border); border-radius: 0; }
.kf-hero-side .card:last-child { border-bottom: none; }

/* ===== Badge kategori ===== */
.kf-badge {
  background: linear-gradient(135deg, var(--kf-merah) 0%, var(--kf-grad-c) 100%);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: .3em .6em;
  border-radius: .25rem;
  display: inline-block;
}

/* ===== Kartu berita ===== */
.kf-card { border: 1px solid var(--kf-border); border-radius: .5rem; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; height: 100%; }
.kf-card:hover { box-shadow: 0 10px 24px rgba(22,33,62,.14); transform: translateY(-2px); }
.kf-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.kf-card .card-title { font-size: 1.02rem; line-height: 1.4; }
.kf-card .card-title a { color: var(--kf-hitam); }
.kf-card .card-title a:hover { color: var(--kf-merah); }

.kf-meta { font-size: .78rem; color: var(--kf-abu); }

/* ===== Section heading ===== */
.kf-section-title {
  border-left: 5px solid transparent;
  border-image: linear-gradient(180deg, var(--kf-merah), var(--kf-grad-c)) 1;
  padding-left: .6rem;
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
  font-weight: 700;
}

/* ===== Sidebar populer ===== */
.kf-populer-item { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--kf-border); }
.kf-populer-item:last-child { border-bottom: none; }
.kf-populer-num {
  font-family: var(--kf-font-judul);
  font-weight: 700;
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--kf-merah) 0%, var(--kf-grad-c) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.3px var(--kf-merah-tua);
  width: 2rem; flex-shrink: 0;
}

/* ===== Artikel detail ===== */
.kf-artikel h1 { font-size: 1.9rem; line-height: 1.35; }
.kf-artikel img.kf-cover { width: 100%; border-radius: .5rem; aspect-ratio: 16/9; object-fit: cover; }
.kf-artikel .kf-isi p { font-size: 1.05rem; line-height: 1.85; margin-bottom: 1.1rem; }

/* ===== Footer ===== */
.kf-footer { background: linear-gradient(135deg, var(--kf-grad-c) 0%, #1F2C4D 60%, var(--kf-grad-d) 100%); color: #dfe3f2; }
.kf-footer h5 { color: #fff; font-family: var(--kf-font-judul); }
.kf-footer a { color: #c3cae6; }
.kf-footer a:hover { color: #FF8A98; }
.kf-footer hr { border-color: #3a466e; }

/* ===== Bar kategori (di bawah topbar, geser ke kanan, tampil di semua device) ===== */
.kf-kategori-bar {
  background: var(--kf-putih);
  border-bottom: 1px solid var(--kf-border);
}
.kf-kategori-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: .55rem 0;
}
.kf-kategori-scroll::-webkit-scrollbar { height: 4px; }
.kf-kategori-scroll::-webkit-scrollbar-thumb { background: var(--kf-border); border-radius: 4px; }

.kf-kategori-pill {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--kf-merah-tua);
  background: linear-gradient(135deg, var(--kf-merah-muda) 0%, #E4E8F5 100%);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .38rem .95rem;
  transition: background .15s ease, color .15s ease;
}
.kf-kategori-pill:hover { background: linear-gradient(135deg, #F5C1C8 0%, #C7CEE8 100%); color: var(--kf-merah-tua); }
.kf-kategori-pill.active {
  background: linear-gradient(135deg, var(--kf-merah) 0%, var(--kf-grad-c) 100%);
  color: #fff;
}

/* ===== Menu Breaking News (titik berkedip) ===== */
.kf-breaking-dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--kf-merah);
  margin-right: .3rem;
  animation: kfBlink 1.2s ease-in-out infinite;
}
@keyframes kfBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

/* ===== Halaman Breaking News (infinite scroll) ===== */
.kf-breaking-item img { transition: transform .15s ease; }
.kf-breaking-item:hover img { transform: scale(1.03); }
.kf-breaking-item:hover h2 { color: var(--kf-merah-tua); }

/* ===== Tombol bagikan artikel ===== */
.kf-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kf-merah-muda) 0%, #DCE1F2 100%);
  color: var(--kf-merah-tua);
  font-size: 1rem;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.kf-share-btn:hover { transform: translateY(-2px); color: #fff; }
.kf-share-wa:hover { background: #25D366; }
.kf-share-fb:hover { background: #1877F2; }
.kf-share-x:hover  { background: #000; }
.kf-share-ig:hover { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.kf-share-tt:hover { background: #000; }

/* ===== Tag artikel ===== */
.kf-tag-list { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.kf-tag-pill {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--kf-merah-tua);
  background: linear-gradient(135deg, #E4E8F5 0%, var(--kf-merah-muda) 100%);
  border-radius: 999px;
  padding: .3rem .8rem;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.kf-tag-pill:hover { background: linear-gradient(135deg, var(--kf-merah) 0%, var(--kf-grad-c) 100%); color: #fff; }

/* ===== Pill "Lainnya" (toggle inline sisa kategori, tanpa dropdown) ===== */
.kf-kat-toggle { display: none; }

.kf-kategori-pill.kf-kategori-more-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.kf-more-label-buka { display: none; }
.kf-kat-toggle:checked ~ .kf-kategori-more-btn .kf-more-label-tutup { display: none; }
.kf-kat-toggle:checked ~ .kf-kategori-more-btn .kf-more-label-buka { display: inline-flex; align-items: center; gap: .3rem; }

.kf-kategori-extra { display: none; }
.kf-kat-toggle:checked ~ .kf-kategori-extra { display: inline-block; }

/* ===== Marquee berita terbaru ===== */
.kf-marquee-bar {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, var(--kf-grad-c) 0%, var(--kf-grad-d) 50%, var(--kf-grad-c) 100%);
  color: #fff;
  overflow: hidden;
}
.kf-marquee-label {
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--kf-merah) 0%, var(--kf-merah-tua) 100%);
  color: #fff;
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: .5rem .9rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}
.kf-marquee-viewport {
  flex: 1 1 auto;
  overflow: hidden;
  padding: .5rem 0;
}
.kf-marquee-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: kf-marquee-scroll 35s linear infinite;
  will-change: transform;
}
.kf-marquee-bar:hover .kf-marquee-track { animation-play-state: paused; }
.kf-marquee-item {
  color: #fff;
  font-size: .85rem;
  padding: 0 .5rem;
}
.kf-marquee-item:hover { color: var(--kf-merah-muda); }
.kf-marquee-sep { color: var(--kf-merah); padding: 0 .25rem; }

@keyframes kf-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== Urutan menu (dikontrol lewat variabel --kf-order-* di :root) ===== */
.kf-navbar .navbar-nav { display: flex; flex-wrap: wrap; }
.kf-nav-item-kategori { order: var(--kf-order-kategori); }
.kf-nav-item-breaking { order: var(--kf-order-breaking); }
.kf-nav-item-trending { order: var(--kf-order-trending); }
.kf-nav-item-galeri   { order: var(--kf-order-galeri); }

/* ===== Responsif ===== */
@media (max-width: 767.98px) {
  .kf-hero { height: 300px; }
  .kf-hero h1 { font-size: 1.3rem; }
  .kf-marquee-item { font-size: .8rem; }
}