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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  cursor: none; /* sembunyikan kursor di TV */
}

#stage {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

/* Isi slide */
.slide-img {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain; /* ganti ke cover kalau mau penuh & terpotong */
}
.slide-video, .slide-web {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Signage = display, bukan kiosk: iframe tidak bisa diklik biar tidak nyasar */
.slide-web { pointer-events: none; }
.slide-video { object-fit: contain; background: #000; }

/* Running text */
#ticker {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 8vh;
  min-height: 48px;
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  z-index: 10;
}
#ticker-text {
  display: inline-block;
  padding-left: 100%;
  font-size: 4.2vh;
  font-weight: bold;
  animation: ticker-scroll 20s linear infinite;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Layar kosong */
#empty {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#empty h1 { font-size: 5vh; margin-bottom: 1vh; }
#empty p { font-size: 3vh; color: #aaa; }

/* Petunjuk fullscreen */
#fs-hint {
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 12px 22px;
  border-radius: 30px;
  font-size: 2.4vh;
  z-index: 20;
  animation: hintPulse 1.6s ease-in-out infinite;
}
@keyframes hintPulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Label brand kecil, pojok kiri atas — halus supaya tak ganggu slide */
#powered {
  position: fixed;
  bottom: 12px; left: 14px;             /* menetap di pojok kiri bawah (area running text) */
  z-index: 15;                          /* di atas ticker (z-index 10) */
  transform: scale(0.5);                /* ukuran 50% */
  transform-origin: left bottom;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 8px;
  border-radius: 999px;
  background: #ffffff;                   /* pill putih, teks hitam -> kontras di slide apapun */
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  color: #17141f;
  font-size: 1.7vh;
  line-height: 1;
  pointer-events: none;
}
#powered .pw-mark { width: 2.6vh; height: 2.6vh; min-width: 18px; min-height: 18px; display: block; }
#powered b { font-weight: 800; letter-spacing: -0.035em; }
#powered i {
  font-style: normal;
  background: linear-gradient(180deg, #8b5cf6, #6366f1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== Splash / layar perkenalan ===== */
#splash {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(120vh 90vh at 50% 38%, rgba(124, 92, 246, 0.28), rgba(99, 102, 241, 0) 62%),
    radial-gradient(60vh 60vh at 50% 40%, #1a1636 0%, #0b0e1a 55%, #06070d 100%);
  transition: opacity 0.7s ease;
}
#splash.hide { opacity: 0; pointer-events: none; }
.splash-inner {
  display: flex; flex-direction: column; align-items: center; gap: 3vh;
  text-align: center; padding: 0 6vw;
  animation: splashRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.splash-mark { width: 24vh; height: 24vh; display: block; filter: drop-shadow(0 14px 44px rgba(124, 92, 246, 0.6)); }
.splash-wm { font-size: 12vh; font-weight: 800; letter-spacing: -0.04em; color: #fff; line-height: 1; }
.splash-wm i {
  font-style: normal;
  background: linear-gradient(180deg, #a78bfa, #6366f1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.splash-tag { font-size: 3vh; color: #bdb8dd; max-width: 34ch; line-height: 1.4; }
.splash-tag b { color: #fff; font-weight: 700; }
.splash-bar {
  position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%);
  width: 34vh; max-width: 60vw; height: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14); overflow: hidden;
}
.splash-bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
  animation: splashFill 5s linear forwards;
}
@keyframes splashRise { from { opacity: 0; transform: translateY(26px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes splashFill { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .splash-inner { animation: none; }
  .splash-bar span { animation: none; width: 100%; }
}

/* Overlay tetap di pojok (QR/logo) — di atas slide, muncul terus */
#overlay {
  position: fixed;
  z-index: 12;                 /* di atas ticker (z-index 10) */
  background: #fff;
  border: 0.3vh solid #fff;    /* padding tipis */
  border-radius: 1vh;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  line-height: 0;
}
#overlay img { display: block; height: auto; border-radius: 0.6vh; }
#overlay.ov-sm img { width: 13.5vh; }
#overlay.ov-md img { width: 20vh; }
#overlay.ov-lg img { width: 26vh; }
#overlay.ov-br { bottom: 3vh; right: 0; }
#overlay.ov-bl { bottom: 3vh; left: 0; }
#overlay.ov-tr { top: 3vh; right: 0; }
#overlay.ov-tl { top: 3vh; left: 0; }
/* Nempel ke tepi: bulatkan hanya sudut sisi dalam */
#overlay.ov-br, #overlay.ov-tr { border-right: 0; border-radius: 1vh 0 0 1vh; }
#overlay.ov-bl, #overlay.ov-tl { border-left: 0; border-radius: 0 1vh 1vh 0; }
/* Saat running text aktif, overlay pojok BAWAH turun pas di atas ticker (jarak minimal) */
body.has-ticker #overlay.ov-br, body.has-ticker #overlay.ov-bl { bottom: 8.8vh; }

/* Badge status offline (pojok kanan atas) */
#netstatus {
  position: fixed;
  top: 14px; right: 16px;
  z-index: 16;
  padding: 6px 13px;
  border-radius: 999px;
  background: #b45309;
  color: #fff;
  font-size: 1.5vh;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.hidden { display: none !important; }

/* Layer crossfade antar slide (mulus, bukan kedip hitam) */
.slide-layer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.slide-layer.show { opacity: 1; }
.slide-layer { overflow: hidden; }

/* Transisi: geser (slide) & langsung (none) */
.slide-layer.tr-slide { transform: translateX(6%); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.slide-layer.tr-slide.show { transform: translateX(0); }
.slide-layer.tr-none { transition: none; }

/* Ken Burns: zoom & geser pelan (bolak-balik) untuk gambar */
.slide-img.kenburns { animation: kenburns 16s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) { .slide-img.kenburns { animation: none; } }

/* ===== Layar generatif: jam / hitung mundur / QR ===== */
.slide-gen {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; padding: 4vh;
  background:
    radial-gradient(120vh 90vh at 50% 40%, rgba(124, 92, 246, 0.24), rgba(99, 102, 241, 0) 62%),
    radial-gradient(60vh 60vh at 50% 42%, #191534 0%, #0b0e1a 55%, #06070d 100%);
}
.slide-clock .gen-time { font-size: 24vh; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.slide-clock .gen-date { font-size: 5vh; color: #c3bee0; margin-top: 2.5vh; }
.slide-countdown .gen-label { font-size: 6.5vh; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 5vh; text-wrap: balance; }
.slide-countdown .gen-cd { display: flex; gap: 2.5vh; flex-wrap: wrap; justify-content: center; }
.cd-box { display: flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 2.4vh; padding: 3vh 2.6vh; min-width: 17vh; }
.cd-box b { font-size: 13vh; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-box span { font-size: 2.6vh; color: #c3bee0; margin-top: 1.4vh; text-transform: uppercase; letter-spacing: 0.14em; }
.cd-done { font-size: 11vh; font-weight: 800; }
.gen-target { margin-top: 5vh; font-size: 3.6vh; color: #a78bfa; font-weight: 600; }
.qr-box { background: #fff; padding: 3vh; border-radius: 2.4vh; box-shadow: 0 20px 60px -20px rgba(124, 92, 246, 0.6); }
.qr-box svg { width: 46vh; height: 46vh; display: block; }
.qr-cap { margin-top: 3.5vh; font-size: 4.4vh; font-weight: 700; max-width: 82vw; text-wrap: balance; }

/* Web slide auto-scroll: iframe tinggi digeser naik-turun (situs beda origin) */
.slide-web.scrolling {
  animation-name: webScroll;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}
@keyframes webScroll {
  0%, 6% { transform: translateY(0); }
  50% { transform: translateY(var(--scroll-neg, -200vh)); }
  94%, 100% { transform: translateY(0); }
}