/* --------------------------------------------------
   Google Font
-------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* --------------------------------------------------
   Dasar tampilan
-------------------------------------------------- */
body{
  font-family:'Poppins',sans-serif;
  background:#181a1f;
  color:#d1d5db;
}

a{
  color:#7aaefc;
  text-decoration:none;
}
a:hover{color:#a3d0ff;}

/* --------------------------------------------------
   Navbar
-------------------------------------------------- */
.navbar{background-color:#22252a!important;}
.navbar-brand{color:#7aaefc!important;font-weight:bold;}
.nav-link{color:#ccc!important;}
.nav-link:hover,
.nav-link.active{color:#7aaefc!important;}

.dropdown-menu{background-color:#2e3139;}
.dropdown-item{color:#c3c6cc;}
.dropdown-item:hover{
  background-color:#7aaefc;
  color:#181a1f;
}

/* --------------------------------------------------
   Header jumbotron
-------------------------------------------------- */
header{
  background:linear-gradient(135deg,#7aaefc 0%,#5a7dd7 100%);
  color:#f3f4f6;
  padding:4rem 0;
  text-align:center;
  border-radius:0 0 30px 30px;
  box-shadow:0 8px 25px rgba(122,174,252,.4);
  margin-bottom:2rem;
}
header h1{font-weight:700;font-size:2.5rem;}
header p{font-size:1.2rem;max-width:720px;margin:1rem auto 0;}

/* --------------------------------------------------
   Card kelas
-------------------------------------------------- */
.card{
  background-color:#23272e;
  border:none;
  border-radius:16px;
  box-shadow:0 4px 12px rgba(122,174,252,.15);
  transition:.3s ease-in-out;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 30px rgba(122,174,252,.35);
}
.card-img-top{
  height:180px;
  object-fit:cover;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}
.card-body h5{color:#7aaefc;}

/* Tombol detail */
.btn-outline-dark{
  border-color:#7aaefc;
  color:#7aaefc;
}
.btn-outline-dark:hover{
  background-color:#7aaefc;
  color:#181a1f;
}

/* --------------------------------------------------
   Statistik
-------------------------------------------------- */
.stat-card{
  background-color:#23272e;
  border-radius:16px;
  padding:20px;
  text-align:center;
  color:#d1d5db;
  box-shadow:0 4px 12px rgba(122,174,252,.2);
  transition:.3s ease-in-out;
}
.stat-card:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 30px rgba(122,174,252,.35);
}
.stat-icon{
  width:60px;height:60px;margin:0 auto 15px;
  border-radius:50%;
  background-color:#7aaefc;
  display:flex;align-items:center;justify-content:center;
  color:#181a1f;font-size:28px;font-weight:bold;
}
.stat-number{font-size:2rem;font-weight:700;color:#7aaefc;}
.stat-label{margin-top:8px;font-size:1rem;color:#aaa;}

/* --------------------------------------------------
   Carousel – panah kustom
-------------------------------------------------- */
/* Sembunyikan icon default */
.carousel-control-prev-icon,
.carousel-control-next-icon{display:none;}

/* Ganti dengan segitiga padat */
.carousel-control-prev::after,
.carousel-control-next::after{
  display:inline-block;
  width:0;height:0;border-style:solid;content:"";
}
.carousel-control-prev::after{
  border-width:24px 36px 24px 0;
  border-color:transparent #7aaefc transparent transparent;
}
.carousel-control-next::after{
  border-width:24px 0 24px 36px;
  border-color:transparent transparent transparent #7aaefc;
}

/* Jarak panah (desktop) */
.carousel-control-prev{left:-150px;}
.carousel-control-next{right:-150px;}

/* --------------------------------------------------
   *** Bagian TERPENTING ***
   Bungkus & kunci tinggi carousel
-------------------------------------------------- */

/* 1. Kotak pembungkus: tinggi tetap, mencegah section Statistik loncat-loncat */
.carousel-wrapper{
  /* Ganti 1200px setelah menguji slide tertinggi di browser */
  min-height:1200px;
  position:relative;
  /* overflow:hidden;   ← gunakan hanya bila benar-benar ingin memotong konten yang melebihi tinggi */
}

/* 2. Biarkan Bootstrap mengelola posisi & animasi item  */
/*    Kita hanya memastikan kembali ke flow normal       */
.carousel-inner{
  position:relative;
  width:100%;
}

.carousel-item{
  position:relative;      /* override kalau sebelumnya absolute */
  opacity:1 !important;   /* tampilkan; Bootstrap yg non-aktifkan sesuai class */
}


/* --------------------------------------------------
   Responsif (≤ 768 px)
-------------------------------------------------- */
@media(max-width:768px){

  /* Geser panah sedikit lebih dekat */
  .carousel-control-prev{left:-30px;}
  .carousel-control-next{right:-30px;}

  .carousel-control-prev::after,
  .carousel-control-next::after{
    border-width:16px 24px 16px 0;
  }
  .carousel-control-next::after{
    border-width:16px 0 16px 24px;
  }

  /* Tinggi wrapper bisa diperkecil untuk mobile jika perlu */
  .carousel-wrapper{min-height:1100px;}
}

/* --------------------------------------------------
   Footer
-------------------------------------------------- */
footer{
  background-color:#22252a;
  color:#aaa;
  padding:1rem 0;
  text-align:center;
  font-size:.9rem;
}