/* =====================================================
   style16.css — CSS untuk Slider Efek #16 (Ken Burns Pan)
   Struktur folder yang diasumsikan:

     project/
     ├── 16.html
     ├── css/
     │   └── style16.css   <- file ini
     └── images/
         ├── ben1.png
         ├── ben2.png
         └── ben3.png

   Kalau struktur folder di aplikasi kamu beda, tinggal
   sesuaikan path di baris .slide.b1/.b2/.b3 di bawah.
   ===================================================== */

:root{
  --radius: 10px;
  --ratio: 1774 / 300; /* rasio asli banner (lebar/tinggi), ganti kalau ukuran banner beda */
}

/* Wadah slider. Lebar 100% dari kontainer, tinggi otomatis mengikuti --ratio. */
.banner{
  position:relative;
  width:100%;
  aspect-ratio: var(--ratio);
  border-radius:var(--radius);
  overflow:hidden;
  background:#000;
}
.banner .slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}

/* path relatif dari css/style16.css ke folder images/ */
.banner .slide.b1{ background-image:url("../images/ben1.png"); }
.banner .slide.b2{ background-image:url("../images/ben2.png"); }
.banner .slide.b3{ background-image:url("../images/ben3.png"); }

.banner .nav-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:8%;
  aspect-ratio:1/1;
  max-width:36px;
  max-height:36px;
  min-width:24px;
  min-height:24px;
  border-radius:50%;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:16px;
  z-index:20;
  user-select:none;
}
.banner .nav-arrow:hover{ background:rgba(0,0,0,.6); }
.banner .nav-prev{ left:1.5%; }
.banner .nav-next{ right:1.5%; }

.banner .dots{
  position:absolute;
  bottom:3%;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  z-index:20;
}
.banner .dots span{
  width:7px; height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  cursor:pointer;
}
.banner .dots span.active{ background:#fff; }