/* =================================================
   🔴 CSS FULL RESPONSIVE 9:16 VIEWPORT FIX
   AUTO FIT SEMUA LAYAR (HP / TABLET / LAPTOP / TV)
   SUPPORT BACKGROUND FOTO 9:16
==================================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

html,
body{
  width:100%;
  height:100%;
  overflow:hidden;
}

/* =====
   BODY
======== */

body{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background:#000;
}

/* =====================================
   BACKGROUND GIF BODY UNTUK LAYAR BESAR
======================================== */

.body-bg-gif{

  position:fixed;

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center;

  z-index:-20;

  user-select:none;

  pointer-events:none;
}

/* ===================
   OVERLAY GELAP BODY
====================== */

body::before{

  content:"";

  position:fixed;

  inset:0;

  background: rgba(0,0,0,0.5);

  z-index:-10;
}

/* ===========
   FRAME 9:16
============== */

.phone-frame{

  position:relative;

  aspect-ratio:9 / 16 !important;

  width:100% !important;
  height:100% !important;

  max-width:420px !important;
  max-height:100% !important;

  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  border:2px solid transparent;

  border-image:linear-gradient(
  180deg,
  #179dff,
  #0077ff
  ) 1;

  border-radius:2px;

  isolation:isolate;
}

/* ============================================
     🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
=============================================== */

/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

  .phone-frame{
    max-width:420px !important;
  }
}

/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

  .phone-frame{
    max-width:520px !important;
  }
}

/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

  .phone-frame{
    max-width:620px !important;
  }
}

/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

  .phone-frame{
    max-width:680px !important;
  }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

  .phone-frame{
    max-width:720px !important;
  }
}

/* LAPTOP */
@media (min-width:821px) and (max-width:1440px){

  .phone-frame{
    max-width:420px !important;
  }
}

/* MONITOR BESAR */
@media (min-width:1441px) and (max-width:1920px){

  .phone-frame{
    max-width:420px !important;
  }
}

/* TV DIGITAL / ULTRAWIDE */
@media (min-width:1921px){

  .phone-frame{
    max-width:420px !important;
  }
}


/* ==============
   OVERLAY GELAP
================= */

.phone-frame::before{

  content:"";

  position:absolute;

  inset:0;

  background: rgba(0,0,0,0.0);

  z-index:-1;
}


/* ====================================
   BACKGROUND GIFT BERGERAK LAYAR 9:16
======================================= */

.bg-image{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center;

  z-index:-2;

  user-select:none;

  pointer-events:none;
}


/* =========================================================
   CONTENT
========================================================= */

.content{

  position:relative;

  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  gap:clamp(14px, 2vw, 24px);

  padding:clamp(10px,2vw,24px);

  z-index:5;
}


/* =========================================================
   POWERED LABEL TOP RIGHT
========================================================= */

.powered-label{

  position:absolute;

  top:0;

  right:0;

  z-index:9999;

  padding:
  5px
  5px;

  background:linear-gradient(
    180deg,
    #179dff,
    #0077ff
  );

  border-left:2px solid rgba(255,255,255,0.35);

  border-bottom:2px solid rgba(255,255,255,0.35);

  border-top:none;

  border-right:none;

  border-bottom-left-radius:14px;

  color:#1e90ff;

  font-size:14px;

  font-weight:bold;

  letter-spacing:.8px;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1);

  user-select:none;

  pointer-events:none;

  white-space:nowrap;

  /* =========================================================
     ALIGN DOT + TEXT
  ========================================================= */

  display: flex;
  align-items: center;
  gap: 6px;
}

/* =========================================================
   DOT STYLE
========================================================= */

.label-dot{
  display: inline-flex;
  align-items: center;
  line-height: 1;
  animation:guideBlink 1s linear infinite;
}

/* =========================================================
   TEXT STYLE
========================================================= */

.label-text{
  display: inline-block;
  line-height: 1;
}


/* =========================================================
   FOLLOW INSTRUCTION POPUP
========================================================= */

.follow-guide{

  position:absolute;

  bottom:100px;

  left:-100%;

  z-index:99999;

  display:flex;

  align-items:center;

  gap:4px;

  padding:
  4px
  6px;

  background:rgba(0,0,0,0.4);

  border-left:4px solid #FF0000;

  border-radius:0 16px 16px 0;

  backdrop-filter:blur(4px);

  animation:followGuideMove 7s linear infinite;
}

/* =========================================================
   DOT BLINK
========================================================= */

.follow-guide-dot{

  color:#00bfff;

  font-size:15px;

  animation:guideBlink 0.6s linear infinite;
}

/* =========================================================
   GUIDE TEXT
========================================================= */

.follow-guide-text{

  color:#ffffff;

  font-size:14px;

  font-weight:bold;

  letter-spacing:.4px;

  text-shadow:
  0 1px 3px rgba(0,0,0,1);
}

/* =========================================================
   SLIDE ANIMATION
========================================================= */

@keyframes followGuideMove{

  0%{
    left:-100%;
    opacity:0;
  }

  10%{
    left:0px;
    opacity:1;
  }

  40%{
    left:0px;
    opacity:1;
  }

  55%{
    left:-100%;
    opacity:0;
  }

  100%{
    left:-100%;
    opacity:0;
  }
}

/* =========================================================
   DOT BLINK
========================================================= */

@keyframes guideBlink{

  0%{
    opacity:1;
  }

  50%{
    opacity:.2;
  }

  100%{
    opacity:1;
  }
}


/* =========================================================
   VIDEO PLAYER UI BOTTOM
========================================================= */

.video-player-ui{

  position:absolute;

  left:0;

  bottom:0;
  
  width:100%;

  padding:
  clamp(10px, 2.5vw, 12px)
  clamp(12px, 4vw, 20px)
  clamp(14px, 5vw, 20px);

  z-index:999;

  display:flex;

  flex-direction:column;

  gap:clamp(12px, 3vw, 18px);

  background:linear-gradient(
    to top,
    rgba(0,0,0,0.92),
    rgba(0,0,0,0.72),
    rgba(0,0,0,0)
  );
}

/* =========================================================
   VIDEO PROGRESS
========================================================= */

.video-progress{

  position:relative;

  width:100%;
  
  cursor:pointer;
  
  height:clamp(4px, 1vw, 5px);

  border-radius:999px;

  background:rgba(255,255,255,0.18);

  overflow:hidden;
}

.video-progress-bar{

  width:25%;

  height:100%;

  border-radius:999px;

  background:linear-gradient(
    90deg,
    #00bfff,
    #59d8ff,
    #00bfff
  );

  box-shadow:
  0 0 10px rgba(0,191,255,0.75),
  0 0 20px rgba(0,191,255,0.35);

  animation:videoProgressMove 10s steps(1) infinite !important;
}

/* =========================================================
   VIDEO PROGRESS ANIMATION
========================================================= */

@keyframes videoProgressMove{

  0%{
    width:5%;
  }

  20%{
    width:25%;
  }

  40%{
    width:50%;
  }

  60%{
    width:75%;
  }

  80%{
    width:100%;
  }

  100%{
    width:5%;
  }
}

/* =========================================================
   CONTROL ROW
========================================================= */

.video-controls{

  width:100%;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:clamp(10px, 3vw, 18px);
}

/* =========================================================
   LEFT CONTROL
========================================================= */

.video-left{

  display:flex;

  align-items:center;

  gap:clamp(10px, 3vw, 18px);
}

/* =========================================================
   PLAY BUTTON BOTTOM
========================================================= */

.video-play-btn{

  position:relative;

  width:clamp(28px, 6vw, 34px);

  height:clamp(28px, 6vw, 34px);

  border-radius:50%;

  background:linear-gradient(
    180deg,
    #0000ff,
    #0000ff
  );

  display:flex;

  align-items:center;

  justify-content:center;

  box-shadow:
  0 4px 20px rgba(0,102,255,0.45),
  inset 0 1px 2px rgba(255,255,255,0.25);

  flex-shrink:0;

  cursor:pointer;
}

.video-play-btn::before{

  content:"";

  width:0;
  height:0;

  margin-left:3px;

  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:13px solid #ffffff;
  
  filter:
  drop-shadow(0 0 2px rgba(0,0,0,1))
  drop-shadow(0 0 6px rgba(0,0,0,0.95))
}

/* =========================================================
   ICON BUTTON ↶ DAN ↷
========================================================= */

.video-icon{

  color:#ffffff;

  font-size:clamp(22px, 5vw, 26px);

  font-weight:bold;

  line-height:1;

  cursor:pointer;

  user-select:none;

  display:flex;
  align-items:center;
  justify-content:center;

  width:clamp(22px, 6vw, 26px);
  height:clamp(22px, 6vw, 26px);

  transition:0.2s ease;
}


/* =========================================================
   VIDEO TIME
========================================================= */

.video-time{

  color:#ffffff;

  font-size:clamp(14px, 3.5vw, 18px);
  
  font-weight:bold;
  
  letter-spacing:2px;

  font-family:monospace;

  white-space:nowrap;
}

/* =========================================================
   RIGHT CONTROL
========================================================= */

.video-right{

  display:flex;

  align-items:center;

  gap:clamp(12px, 4vw, 22px);
}

/* =========================================================
   VOLUME SVG ICON 1 OPEN - 2 SILENT
========================================================= */

.video-volume-box{
  position:relative;
  width:clamp(20px, 5vw, 24px);
  height:clamp(20px, 5vw, 24px);
  cursor:pointer;
}

.video-volume1,
.video-volume2{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  cursor:pointer;
}

/* pertama buka tampil volume1 */
.video-volume2{
  display:none;
}

/* saat silent tampil volume2 */
.video-volume-box.silent .video-volume1{
  display:none;
}

.video-volume-box.silent .video-volume2{
  display:block;
}


/* =========================================================
   FULLSCREEN ICON
========================================================= */

.video-fullscreen{

  position:relative;

  width:clamp(18px, 5vw, 22px);

  height:clamp(18px, 5vw, 22px);

  cursor:pointer;
}

.video-fullscreen span{

  position:absolute;

  width:8px;

  height:8px;

  border:2px solid #ffffff;
}

.video-fullscreen span:nth-child(1){

  top:0;
  left:0;

  border-right:none;
  border-bottom:none;
}

.video-fullscreen span:nth-child(2){

  top:0;
  right:0;

  border-left:none;
  border-bottom:none;
}

.video-fullscreen span:nth-child(3){

  bottom:0;
  left:0;

  border-right:none;
  border-top:none;
}

.video-fullscreen span:nth-child(4){

  bottom:0;
  right:0;

  border-left:none;
  border-top:none;
}

/* =========================================================
   CENTER PLAY BIG
========================================================= */

.center-play-wrapper{

  position:absolute;

  top:50%;

  left:50%;

  transform:translate(-50%,-50%);

  width:170px;

  height:170px;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  z-index:20;

  cursor:pointer;
}

/* =========================================================
   DENYUT GELOMBANG BIRU
========================================================= */

.center-play-wrapper::before{

  content:"";

  position:absolute;

  inset:-6px;

  border-radius:50%;

  border:4px solid #0000ff;

  box-shadow:
  0 0 18px #0000ff,
  0 0 40px #0000ff;

  animation:wavePulse 1s linear infinite;

  will-change:transform, opacity;
}

.center-play-wrapper::after{

  content:"";

  position:absolute;

  inset:-18px;

  border-radius:50%;

  border:3px solid #0000ff;

  box-shadow:
  0 0 25px #0000ff,
  0 0 60px #0000ff;

  animation:wavePulse 1s linear infinite;

  will-change:transform, opacity;
}

@keyframes wavePulse{

  0%{
    transform:scale(1);
    opacity:1;
  }

  20%{
    transform:scale(1.06);
    opacity:.95;
  }

  40%{
    transform:scale(1.12);
    opacity:.75;
  }

  60%{
    transform:scale(1.18);
    opacity:.45;
  }

  80%{
    transform:scale(1.24);
    opacity:.20;
  }

  100%{
    transform:scale(1.30);
    opacity:0;
  }
}


/* =========================================================
   PLAY BUTTON CENTER
========================================================= */

.center-play{

  position:relative;

  width:170px;

  height:170px;

  aspect-ratio:1/1; /* 🔥 PENTING: paksa selalu bulat */

  border-radius:50%;

  background:linear-gradient(
    180deg,
    #0000ff,
    #0000ff
  );

  display:flex;

  align-items:center;

  justify-content:center;

  z-index:5;
}

.center-play::before{

  content:"";

  width:0;
  height:0;

  margin-left:10px;

  border-top:26px solid transparent;
  border-bottom:26px solid transparent;
  border-left:45px solid #ffffff;

  filter:
  drop-shadow(0 0 2px rgba(0,0,0,1))
  drop-shadow(0 0 6px rgba(0,0,0,0.95))
  drop-shadow(0 2px 4px rgba(0,0,0,0.85));
}


/* ============================================
   🔵 RESPONSIVE FIXED (NO OVAL FIXED BULAT)
=============================================== */

/* HP KECIL */
@media (max-width:360px){

  .center-play{
    width:160px !important;
    height:160px !important;
    aspect-ratio:1/1 !important;
  }
}

/* HP NORMAL */
@media (min-width:361px) and (max-width:420px){

  .center-play{
    width:185px !important;
    height:185px !important;
    aspect-ratio:1/1 !important;
  }
}

/* HP BESAR */
@media (min-width:421px) and (max-width:460px){

  .center-play{
    width:190px !important;
    height:190px !important;
    aspect-ratio:1/1 !important;
  }
}

/* HP EXTRA BESAR */
@media (min-width:461px) and (max-width:480px){

  .center-play{
    width:195px !important;
    height:195px !important;
    aspect-ratio:1/1 !important;
  }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

  .center-play{
    width:200px !important;
    height:200px !important;
    aspect-ratio:1/1 !important;
  }
}

/* LAPTOP */
@media (min-width:821px) and (max-width:1440px){

  .center-play{
    width:200px !important;
    height:200px !important;
    aspect-ratio:1/1 !important;
  }
}

/* MONITOR BESAR */
@media (min-width:1441px) and (max-width:1920px){

  .center-play{
    width:200px !important;
    height:200px !important;
    aspect-ratio:1/1 !important;
  }
}

/* TV / ULTRAWIDE */
@media (min-width:1921px){

  .center-play{
    width:200px !important;
    height:200px !important;
    aspect-ratio:1/1 !important;
  }
}

/* ==============================================
   🔵 FIX: HILANGKAN TAP-HIGHLIGHT / KEDIP KLIK
================================================= */

.center-play-wrapper,
.center-play,
.video-fullscreen,
.video-volume-box,
.video-volume1,
.video-volume2,
.video-icon,
.video-play-btn {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  user-select: none !important;
}