/* Reset dasar */
* {
  margin: 0;
  padding: 0;
}

/* Font utama */
@font-face {
  font-family: 'fontku';
  src: url(fonts/Ubuntu-Bold.ttf);
}

/* Global */
html, body {
  user-select: none;
}

body {
  font-family: 'fontku', sans-serif;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  animation: gradient 15s ease infinite;
  background-color: #002647;
}

/* Animasi background (kalau mau dimatikan, hapus animation di html) */
@keyframes gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ====== SLIDER ASBOLA (1024 x 296) ====== */

/* Box utama slider */
.slider-box {
  width: 1024px;
  height: 296px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

/* Pastikan carousel ikut tinggi box */
.slider-box .carousel,
.slider-box .carousel-inner,
.slider-box .carousel-item {
  height: 100%;
}

/* Item slide */
.c-item {
  height: 100%;
}

/* Gambar slide + efek zoom halus */
.c-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* posisi awal */
  transform: scale(1.02);
  transition: transform 4s ease-out;
}

/* Saat slide aktif, gambar pelan-pelan nge-zoom */
.c-img.zooming {
  transform: scale(1.08);
}

/* Indikator di dalam kotak */
.slider-box .carousel-indicators {
  bottom: 5px;
}

/* Efek fade antar slide (Bootstrap carousel-fade) */
#hero-carousel.carousel-fade .carousel-item {
  transition-property: opacity, transform;
  transition-duration: 0.8s;
}

/* Responsif (kalau slider-asbola dipakai di layar kecil) */
@media (max-width: 1024px) {
  .slider-box {
    width: 100%;
    max-width: 1024px;
    height: auto;
    aspect-ratio: 1024 / 296;
  }

  .slider-box .carousel,
  .slider-box .carousel-inner,
  .slider-box .carousel-item {
    height: 100%;
  }
}