/* ===== MERGED COLOR VARIABLES SESUAI KODINGAN DI BAWAH ===== */
:root {
  /* Palet Biru Cerah & Aksen Hijau */
  --primary-clr:  #0a397a;    /* Biru cerah utama */
  --accent1-clr: #28C76F;    /* Hijau aksen tombol */
  --text-light:  #FFFFFF;    /* Putih untuk teks */
  --glow-clr:    rgba(0, 73, 204, 0.6);

  /* Gradasi Latar Biru */
  --bg-dark:   #021E73;      /* Dinding bata biru gelap */
  --bg-mid:    #073F9A;      /* Biru medium */
  --bg-light:  #0F5CC0;      /* Biru cerah */

  /* Palet Grid & Card-Post */
  --first-color:  #0a0f2c;    /* Biru sangat gelap */
  --second-color: #ffffff;    /* Teks putih */
  --third-color:  #1e90ff;    /* Dodger Blue (card-post bg) */
  --fourth-color: #3399ff;    /* Hover biru muda */
}

/* ===== GLOBAL BACKGROUND & TEXT ===== */
body {
  background: radial-gradient(circle at center, var(--bg-light) 0%, var(--bg-mid) 50%, var(--bg-dark) 100%) fixed;
  color: var(--text-light);
    font-family: 'Segoe UI', sans-serif;
}

/* ===== TIME-POST ===== */
.time-post {
  font-size: 0.7rem;
  padding: 0;
  margin: 0;
  font-weight: 700;
  color: var(--second-color);
}

/* ===== CARD-POST ===== */
.card-post {
  background: rgba(9, 50, 139, 0.15) !important; /* var(--primary-clr) #09328B */
  color: var(--text-light) !important;
  border-radius: 8px solid #FFD700 !important;
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.4) !important;
  transition: transform .3s, box-shadow .3s;
}
.card-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* ===== IMAGE POST ===== */
.img-post {
  width: 30rem;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}

/* ===== PAGINATION ===== */
.page.active {
  color: var(--second-color) !important;
  background: var(--third-color);
}

/* ===== BUTTONS ===== */
.btn-info {
  background-color: var(--third-color);
  border-color: var(--third-color) !important;
  color: var(--second-color);
}
.btn-info:hover {
  background-color: var(--fourth-color);
}

/* ===== RUNNING TEXT (marquee strip) ===== */
#title-home {
  position: relative;
  overflow: hidden;
}

#title-home .teks-berjaalan {
  display: block;
  padding: 0.5rem 0;
  margin-bottom: 1rem;
  background: linear-gradient(90deg, #021E73, #073F9A, #0F5CC0);
  border-top: 2px solid #3399FF;
  border-bottom: 2px solid #3399FF;
  box-shadow: inset 0 0 10px rgba(51,153,255,0.7);
  color: #00ABEA;
  font-family: 'Orbitron', monospace;
  text-transform: uppercase;
  font-size: 0.9rem;
  text-shadow:
    0 0 6px #00ABEA,
    0 0 12px #3399FF;
  /* Animasi glow berkedip */
  animation: glow 3s ease-in-out infinite;
}
.teks-berjaalan {
  border-bottom: 1px dashed var(--third-color);
  padding: 0.3rem;
  margin-bottom: 0.9rem;
}
.teks-berjaalan h1,
.teks-berjaalan h2,
.teks-berjaalan h3,
.teks-berjaalan h4,
.teks-berjaalan h5,
.teks-berjaalan h6,
.teks-berjaalan p,
.teks-berjaalan strong {
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--second-color);
}

/* ===== FOOTER ===== */
footer {
  background: var(--first-color);
  color: var(--second-color);
  text-align: center;
  padding: 1rem;
}