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

:root{--primary:#004aad;}
body{font-family:'Poppins',sans-serif;}
.parallax{background-attachment:fixed;background-position:center;background-size:cover;}
@media (max-width:1024px){.parallax{background-attachment:scroll;}}
.nav-link{color:rgba(17,24,39,0.9);font-weight:500;}
.nav-link:hover{color:var(--primary);}
.btn-primary{background:var(--primary);color:white;padding:.6rem 1rem;border-radius:.5rem;font-weight:600;}
.btn-ghost{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:.6rem 1rem;border-radius:.5rem;color:white;}
.bg-light{background:#f8fafc;}
.soft-border{border:1px solid rgba(0,0,0,0.04);border-radius:8px;}
.card{box-shadow:0 6px 18px rgba(2,6,23,0.06);}
.stat .text-3xl{color:var(--primary);}
@media (min-width:1600px){.container{max-width:1400px;margin:0 auto;}}
/* small tweaks for TV/large screens */
@media (min-width:2000px){
  .text-4xl{font-size:3.5rem;}
  .parallax{height:90vh;}
}

/* Warna dasar */
.bg-dark {
  background-color: #0d1117;
}
.text-primary {
  color: #e63946;
}
.bg-primary {
  background-color: #e63946;
}
.border-primary {
  border-color: #e63946;
}

/* Gaya umum */
#home img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center center;
  border-radius: 1rem;
}

/* 📺 TV (≥1600px) */
@media (min-width: 1600px) {
  #home h2 {
    font-size: 5rem;
  }
  #home p {
    font-size: 1.5rem;
  }
  #home img {
    height: 600px;
  }
}

/* 💻 Desktop (1200–1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
  #home h2 {
    font-size: 4rem;
  }
  #home p {
    font-size: 1.2rem;
  }
  #home img {
    height: 550px;
  }
}

/* 🧑‍💻 Laptop (992–1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  #home h2 {
    font-size: 3rem;
  }
  #home p {
    font-size: 1rem;
  }
  #home img {
    height: 500px;
  }
}

/* 📱 Tablet (768–991px) */
@media (min-width: 768px) and (max-width: 991px) {
  #home {
    padding: 4rem 2rem;
  }
  #home .container {
    grid-template-columns: 1fr;
  }
  #home h2 {
    font-size: 2.5rem;
  }
  #home p {
    font-size: 1rem;
  }
  #home img {
    height: 400px;
  }
}

/* 📞 Mobile (≤767px) */
@media (max-width: 767px) {
  #home {
    padding: 3rem 1rem;
  }
  #home .container {
    grid-template-columns: 1fr;
  }
  #home h2 {
    font-size: 2rem;
  }
  #home p {
    font-size: 0.95rem;
  }
  #home img {
    height: 320px;
  }
}

#preloader {
  transition: opacity 0.8s ease;
}
#preloader.fade-out {
  opacity: 0;
  pointer-events: none;
}
.loader::before, .loader::after {
  content: "";
  position: absolute;
  border: 4px solid transparent;
  border-top-color: #e50914;
  border-radius: 50%;
  top: -6px; left: -6px; right: -6px; bottom: -6px;
  animation: spin 2s linear infinite;
}
.loader::after {
  border-top-color: #fff;
  animation-delay: -1s;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}


@keyframes spin-slow {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .animate-spin-slow {
    animation: spin-slow 3s linear infinite;
  }

  @keyframes bounce-slow {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  .animate-bounce-slow {
    animation: bounce-slow 2.5s ease-in-out infinite;
  }

  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-fade-in {
    animation: fade-in 1.8s ease forwards;
  }

  /* Responsif tambahan */
  @media (max-width: 640px) {
    #preloader h2 {
      font-size: 0.95rem;
    }
    #preloader img {
      width: 80px;
      height: 80px;
    }
  }

  @media (min-width: 1024px) {
    #preloader img {
      width: 140px;
      height: 140px;
    }
  }

  @media (min-width: 1600px) {
    #preloader h2 {
      font-size: 1.5rem;
    }
    #preloader img {
      width: 180px;
      height: 180px;
    }
  }

  /* === ANIMASI HALUS UNTUK SECTION SEJARAH === */

#home {
  opacity: 0;
  transform: translateY(30px);
  animation: sectionFadeUp 1.5s ease-out forwards;
}

/* Animasi halus untuk teks */
#home h2 {
  opacity: 0;
  transform: translateY(20px);
  animation: textFadeUp 1.2s ease-out forwards;
  animation-delay: 0.3s;
}

#home p {
  opacity: 0;
  transform: translateY(15px);
  animation: textFadeUp 1.2s ease-out forwards;
}

#home p:nth-of-type(1) {
  animation-delay: 0.6s;
}
#home p:nth-of-type(2) {
  animation-delay: 0.9s;
}

/* Tombol muncul lembut */
#home a {
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScale 1.2s ease-out forwards;
  animation-delay: 1.2s;
}

/* Gambar masuk dengan efek lembut dari kanan */
#home img {
  opacity: 0;
  transform: translateX(40px);
  animation: imageSlideIn 1.5s ease-out forwards;
  animation-delay: 0.8s;
}

/* === KEYFRAMES === */

@keyframes sectionFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes textFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes imageSlideIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  #home img {
    height: 450px !important;
  }
}

@media (max-width: 768px) {
  #home img {
    height: 380px !important;
  }
}

@media (max-width: 480px) {
  #home img {
    height: 300px !important;
  }
  #home h2 {
    font-size: 1.8rem;
  }
  #home p {
    font-size: 0.95rem;
  }
}

#preloader {
  transition: opacity 0.8s ease;
}

.fade-out {
  opacity: 0;
}

#progress-bar {
  width: 0%;
  height: 5px;
  background-color: #ff1e1e; /* atau warna primary */
}

 /* Efek muncul lembut */
  #popupAd {
    transform: scale(0.95);
  }
  #popupAd.opacity-100.scale-100 {
    transform: scale(1);
  }

  /* Responsif */
  @media (max-width: 1024px) {
    #popupAd .w-\[420px\] {
      width: 380px;
    }
    #closeAd {
      top: -42px;
      width: 42px;
      height: 42px;
      font-size: 1.5rem;
    }
  }

  @media (max-width: 768px) {
    #popupAd .w-\[420px\] {
      width: 320px;
    }
    #closeAd {
      top: -38px;
      width: 36px;
      height: 36px;
      font-size: 1.2rem;
    }
  }

  @media (max-width: 480px) {
    #popupAd .w-\[420px\] {
      width: 260px;
    }
    #closeAd {
      top: -32px;
      width: 32px;
      height: 32px;
      font-size: 1rem;
    }
  }

  /* Efek animasi untuk popup */
  @keyframes popupZoom {
    0% {
      opacity: 0;
      transform: scale(0.8) translateY(20px);
      filter: blur(4px);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
      filter: blur(0);
    }
  }

  @keyframes popupHide {
    0% {
      opacity: 1;
      transform: scale(1);
      filter: blur(0);
    }
    100% {
      opacity: 0;
      transform: scale(0.8);
      filter: blur(6px);
    }
  }

  /* Efek gambar berdenyut lembut */
  @keyframes imagePulse {
    0%, 100% {
      transform: scale(1);
      filter: brightness(1);
    }
    50% {
      transform: scale(1.03);
      filter: brightness(1.05);
    }
  }

  /* Efek hover tombol close */
  @keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
  }

  #popupAd.show {
    display: flex !important;
    animation: popupZoom 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 1 !important;
    scale: 1 !important;
  }

  #popupAd.hide {
    animation: popupHide 0.6s ease forwards;
  }

  #popupAd img {
    animation: imagePulse 4s ease-in-out infinite;
  }

  #closeAd:hover {
    animation: shake 0.4s ease-in-out;
  }



/* ======= GAYA SEPERTI GAMBAR (Merah-Hitam Elegan) ======= */
.breaking-wrapper {
  @apply relative bg-black text-white border-b border-red-900 shadow-md overflow-hidden;
}

/* Label kiri "Breaking News" seperti pita segitiga */
.breaking-label {
  @apply bg-red-700 font-bold text-sm uppercase px-4 py-2 relative inline-block text-white;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
}

/* Area teks berjalan */
.breaking-content {
  @apply flex-1 overflow-hidden px-3 text-sm;
}
.breaking-content marquee {
  @apply text-red-100 font-medium tracking-wide;
}
.breaking-content marquee:hover {
  @apply text-white;
}

/* Tanggal di kanan */
.breaking-date {
  @apply text-xs italic text-red-300 pr-4;
}

/* Efek halus di hover */
.breaking-wrapper:hover {
  @apply from-black to-red-900;
}