/* style.css - FINAL VERSION */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #000;
  overflow: hidden;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  width: 100vw;
  height: 100vh;
}

/* CONTAINER UTAMA */
.kiosk-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

/* =========================================
   BAGIAN ATAS: VIDEO (35%)
   ========================================= */
.video-section {
  width: 100%;
  height: 35vh;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.9);
}

.video-section video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-fallback {
  color: #444;
  text-align: center;
}

/* =========================================
   BAGIAN BAWAH: GAMBAR (65%)
   ========================================= */
.slider-section {
  width: 100%;
  height: 65vh;
  background-color: #000;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* Container untuk setiap item gambar */
.image-container,
.slide-item {
  position: relative;
  width: 100vw;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
}

/* 
   1. BACKGROUND CAHAYA (BLUR EKSTREM)
   Membuat latar belakang hanya nurabu samar.
*/
.blur-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  filter: blur(80px) brightness(0.1);
  transform: scale(1.6);
}

/* 
   2. GAMBAR UTAMA (3D POP-UP & ZOOM ANIMATION)
*/
.image-container img,
.slide-item img {
  position: relative;
  z-index: 2;
  width: 94%;
  height: 94%;
  object-fit: contain;
  display: block;

  /* Efek 3D Timbul (Bayangan) */
  filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.9)) brightness(1.1);

  /* Kondisi Awal Sebelum Animasi (Kecil & Transparan) */
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.1s,
    transform 0.1s;
}

/* 
   Class ini ditambahkan JavaScript saat gambar masuk layar.
   Memicu animasi Zoom In.
*/
.image-container img.anim-active,
.slide-item img.anim-active {
  animation: zoomInEffect 4s ease-out forwards;
}

/* Keyframe Animasi Membesar (Zoom In) */
@keyframes zoomInEffect {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Wrapper Slider */
.slider-wrapper {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
}

/* Keyframe Slider Loop */
@keyframes slideFixed {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* =========================================
   TAMPILAN WARNING / OFFLINE
   ========================================= */
.offline-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none; /* Default Tersembunyi */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.85);
  animation: fadeInOffline 1s ease forwards;
  pointer-events: none;
}

/* Aktif jika punya class .active */
.offline-wrapper.active {
  display: flex;
  pointer-events: all;
}

.offline-title {
  font-size: 4rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 5px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 20px 40px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: pulseText 2s infinite ease-in-out;
  text-align: center;
}

.offline-desc {
  margin-top: 20px;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
}

@keyframes fadeInOffline {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pulseText {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.98);
  }
}