/* =========================================================================
   🔴 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
   TARUH DI HTML:
   <img class="body-bg-gif" src="gif-kamu.gif">
========================================================= */

.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:min(100vw, calc(100vh * 9 / 16)) !important;
  height:min(100vh, calc(100vw * 16 / 9)) !important;

  max-width:100vw !important;
  max-height:100vh !important;

  overflow:hidden;

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

  border:2px solid #ffa500;

  border-radius:2px;

  isolation:isolate;
}

/* =========================================================
   LABEL PROFESSIONAL
========================================================= */

.top-label{

  position:absolute;

  top:0;

  right:0;

  border-left:2px solid #00008B;
  border-bottom:2px solid #00008B;
  border-top:none;
  border-right:none;
  letter-spacing: 0.5px;
  z-index:20;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  background:linear-gradient(
    135deg,
    #ff9800,
    #ff3d00
  );

  color:#fff;

  padding:10px 18px;

  border-bottom-left-radius:18px;

  font-size:14px;

  font-weight:bold;

  letter-spacing:.5px;

  box-shadow:
  0 4px 18px rgba(0,0,0,.35);

  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);
}

/* =========================================================
   CENTANG HIJAU
========================================================= */

.label-check{

  color:#00ff66;

  font-size:18px;

  font-weight:bold;

  line-height:1;

  display:flex;

  align-items:center;

  justify-content:center;

  text-shadow:
  0 0 2px #00ff66,
  0 0 4px #00ff66,
  0 0 10px #00ff66;
}


/* =========================================================
   BACKGROUND FOTO
========================================================= */

.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;
}

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

.phone-frame::before{

  content:"";

  position:absolute;

  inset:0;

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

  z-index:-1;
}

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

.content{

  position:relative;

  width:100%;
  height:auto;

  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;
}

/* =========================================================
   PROFILE SLIDER WRAPPER
========================================================= */

.profile-slider{

  position:relative;

  width:150px;

  height:150px;

  margin-top:-60px;

  z-index:10;
}

/* =========================================================
   FOTO BULAT PROFILE
========================================================= */

.profile-image{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  border-radius:50%;

  object-fit:cover;

  object-position:center;

  border:4px solid rgba(255,255,255,.9);

  box-shadow:
  0 0 25px rgba(255,165,0,.7);

  display:block;

  user-select:none;

  opacity:0;

  transition:
  opacity .7s ease;
}

/* =========================================================
   FOTO AKTIF
========================================================= */

.profile-image.active{

  opacity:1;
}

/* =========================================================
   TITLE
========================================================= */

.top-title{

  width:100%;

  background:linear-gradient(
    135deg,
    rgba(255,152,0,.92),
    rgba(255,87,34,.92)
  );

  color:#fff;

  padding:clamp(12px,2vw,18px);

  border-radius:clamp(12px,2vw,18px);

  font-size:clamp(14px,2vw,20px);

  font-weight:bold;
  letter-spacing: 0.5px;
  line-height:1.5;

  backdrop-filter:blur(4px);

  box-shadow:
  0 0 18px rgba(255,152,0,.8);
}

.top-title span{

  display:inline-block;
  
  animation: rainbowRun 3s linear infinite;
  
  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) !important;
}

/* =========================================================
   HINT TEXT
========================================================= */

.hint-text{

  color:#fff;

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

  line-height:1.5;

  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) !important;
  
}

.down-arrow{

  display:block;

  margin-top:6px;

  letter-spacing:2px;

  font-size:18px;

  font-weight:bold;

  animation:blink 0.5s linear infinite;
  
  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) !important;
}

/* =========================================================
   BUTTON
========================================================= */

.btn{

  border:4px solid #00ff00;

  outline:none;

  cursor:pointer;

  background:#00008B;

  color:#fff;

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

  gap:10px;

  font-weight:bold;

  border-radius:50px;
  letter-spacing: 0.5px;
  padding:8px 10px;

  font-size:24px;

  animation:pulse 2s infinite;

  transition:.3s;

  box-shadow:
  0 8px 24px rgba(30,136,255,.45);

  margin-top:18px;
  
  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) !important;
}

.btn:hover{
  background:#00BFFF;
  color:#ff8800 !important;
}

/* =========================================================
   ICON SVG DI BUTTON
========================================================= */

.btn-icon{

  width:34px;

  height:34px;

  border-radius:50px;

  border:2px solid #FFA500;

  object-fit:contain;

  flex-shrink:0;

  display:block;
}

/* =========================================================
   ARROW
========================================================= */

.arrow{

  display:inline-block;

  font-size:18px;

  font-weight:bold;

  animation:blink 0.5s linear infinite;
}


/* =========================================================
   EXTRA FIX TV / ULTRAWIDE
========================================================= */

@media screen and (min-width:1600px){

  .phone-frame{
    width:calc(100vh * 9 / 16);
    height:100vh;
  }
}

/* =========================================================
   EXTRA FIX HP KECIL
========================================================= */

@media screen and (max-width:480px){

  .content{
    gap:16px;
  }
}



/* =========================================================
   ANIMASI PULSE BUTTON
========================================================= */

@keyframes pulse{

  0%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(0,255,85,.7);
  }

  70%{
    transform:scale(1.08);
    box-shadow:0 0 0 14px rgba(0,255,85,0);
  }

  100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(0,255,85,0);
  }
}

/* =========================================================
   ANIMASI KEDIP
========================================================= */

@keyframes blink{

  0%,
  100%{
    opacity:1;
  }

  50%{
    opacity:.3;
  }
}

/* =========================================================
   ANIMASI WARNA WARNI
========================================================= */

@keyframes rainbowRun{

  0%{
    color:#ffffff;
    text-shadow:
    0 0 2px rgba(255,255,255,0.6),
    0 0 6px rgba(255,255,255,0.4);
  }

  20%{
    color:#00ffea;
    text-shadow:
    0 0 2px rgba(0,255,234,0.6),
    0 0 6px rgba(0,255,234,0.4);
  }

  40%{
    color:#9acd32;
    text-shadow:
    0 0 2px rgba(154,205,50,0.6),
    0 0 6px rgba(154,205,50,0.4);
  }

  60%{
    color:#ffd700;
    text-shadow:
    0 0 2px rgba(255,215,0,0.6),
    0 0 6px rgba(255,215,0,0.4);
  }

  75%{
    color:#ff66cc;
    text-shadow:
    0 0 2px rgba(255,102,204,0.6),
    0 0 6px rgba(255,102,204,0.4);
  }

  90%{
    color:#ff4444;
    text-shadow:
    0 0 2px rgba(255,68,68,0.6),
    0 0 6px rgba(255,68,68,0.4);
  }

  100%{
    color:#ffffff;
    text-shadow:
    0 0 2px rgba(255,255,255,0.6),
    0 0 6px rgba(255,255,255,0.4);
  }
}