/* =================================================
   🔴 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:auto;
}

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

body{
  position:relative;

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

  overflow:auto;

  background:#000;
}

/* ===================================================
   BACKGROUND BODY RESPONSIVE LAYAR PERSEGI / DEKSTOP
====================================================== */

.body-background{

  position:fixed;

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center;

  z-index:-20;

  user-select:none;

  pointer-events:none;
}


/* ======================
   TAMPILAN LAYAR HP 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-radius:2px;

  isolation:isolate;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =============================================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN) HILANGKAN SECTION DI LAYAR BERBEDA
================================================================================ */

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

  .body-background{
    display:none !important;
  }
}

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

  .body-background{
    display:none !important;
  }
}

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

  .body-background{
    display:none !important;
  }
}

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

  .body-background{
    display:none !important;
  }
}

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

  .body-background{
    display:none !important;
  }
}

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

  .shorts-image{
    display:none !important;
  }
}

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

  .shorts-image{
    max-width:2200px !important;
  }
}

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

  .shorts-image{
    max-width:2400px !important;
  }
}


/* =========================================================
   PREMIUM HEADER
========================================================= */

.top-header{

  position:absolute;
  top:18px;
  left:16px;
  right:16px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  z-index:50;

  pointer-events:auto;
}

/* ==========================
   FLIRTDATE
========================== */

.header-brand{

  display:flex;

  align-items:center;

  gap:10px;

  padding:6px 10px;

  border-radius:999px;

  background:rgba(0,0,0,.40);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  box-shadow:
    0 8px 25px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.15);

  cursor:pointer;
}

.brand-icon{

  width:28px;

  height:28px;

  cursor:pointer;

  display:block;

  flex-shrink:0;

  filter:
    drop-shadow(0 4px 12px rgba(255,45,85,.45))
    drop-shadow(0 0 18px rgba(255,138,0,.25));
}

.brand-text{

  font-size:20px;

  font-weight:bold;

  letter-spacing:.3px;

  line-height:1;

  cursor:pointer;

  background:
    linear-gradient(
      135deg,
      #ff2d55 0%,
      #ff4d8d 35%,
      #ff7a45 70%,
      #ffb347 100%
    );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  background-clip:text;

  color:transparent;

  filter:
    drop-shadow(0 2px 10px rgba(255,45,85,.35))
    drop-shadow(0 0 12px rgba(255,138,0,.25));
}


/* ==========================
   REELS
========================== */

.header-reels{

  display:flex;

  align-items:center;

  gap:8px;

  padding:6px 10px;

  border-radius:999px;

  background:rgba(0,0,0,.40);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  box-shadow:
    0 8px 25px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.15);

  cursor:pointer;
}

.reels-icon{

  width:28px;

  height:28px;

  display:block;

  flex-shrink:0;

  cursor:pointer;

  filter:
    drop-shadow(0 4px 12px rgba(255,45,85,.45))
    drop-shadow(0 0 18px rgba(255,138,0,.25));
}

.reels-text{

  color:#fff;

  font-size:20px;

  font-weight:bold;

  letter-spacing:.4px;

  line-height:1;

  cursor:pointer;

  text-shadow:
    0 2px 10px rgba(0,0,0,.45);
}


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

.content{

  position:relative;

  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  padding:0 !important;

  z-index:5;

  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  color:#fff;
}

/* =========================================================
   HILANGKAN GARIS BAWAH LINK
========================================================= */

a,
a:hover,
a:focus,
a:active,
a:visited{

  text-decoration:none !important;

  color:inherit !important;

  outline:none !important;

  border:none !important;
}

.redirect-url{

  text-decoration:none !important;

  color:inherit !important;

  outline:none !important;

  border:none !important;

  cursor:pointer;
}


/* =========================================================
   SHORTS / REELS LAYOUT
========================================================= */

.shorts-card{

  position:relative;

  width:100%;
  height:100%;

  overflow:hidden;
}

.shorts-image{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  display:block;

  z-index:1;

  cursor:pointer;
}


/* ============================================
   PLAY BUTTON TENGAH (UI ELEGANT FULL UPGRADE)
=============================================== */

.play-button{

  position:absolute;

  top:50%;
  left:50%;

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

  width:84px;
  height:84px;

  border-radius:50%;

  background: linear-gradient(
  135deg,
  #ffffff14,
  #3b3b7a33,
  #00000066
  );

  backdrop-filter:blur(35px);
  -webkit-backdrop-filter:blur(35px);

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

  z-index:20;

  cursor:pointer;

  /* UI SHADOW DEPTH */
  box-shadow:
    0 14px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -8px 18px rgba(255,255,255,.06);

  animation:playPulse 2.5s infinite ease-in-out;
}

/* SEGITIGA PLAY */

.play-button::after{

  content:"";

  width:0;
  height:0;

  margin-left:4px;

  border-top:13px solid transparent;
  border-bottom:13px solid transparent;

  border-left:22px solid #ffffff;

  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* RING ANIMASI UI */

.play-button::before{

  content:"";

  position:absolute;

  inset:-12px;

  border-radius:50%;

  -webkit-mask:
    radial-gradient(circle, transparent 60%, #000 62%);
  mask:
    radial-gradient(circle, transparent 60%, #000 62%);
}

/* HOVER UI */

.play-button:hover{

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

  background:linear-gradient(
    135deg,
    #ffffff44,
    #9a9aff2e,
    #00000022
  );
}

/* ACTIVE */

.play-button:active{

  transform:translate(-50%,-50%) scale(.96);
}



/* ==========================
   ACTION KANAN
========================== */

.shorts-actions{
  position:absolute;
  right:6px;
  bottom:160px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  z-index:10;
}

.action-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#fff;
  cursor:pointer;
  transition:.25s ease;
  user-select:none;
}

/* ==========================
   SVG ICON WRAPPER FIX
========================== */

.action-item svg{
  width:var(--icon-size, 40px);
  height:var(--icon-size, 40px);
  display:block;
  fill:currentColor;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
  pointer-events:none;
}


/* ==========================
   TOTAL LIKE / KOMEN / SHARE
========================== */

.action-item span{

  color:#fff;

  font-size:18px;

  line-height:1;

  text-shadow:0 2px 8px rgba(0,0,0,.5);

  pointer-events:none;
}


/* ==========================
   PROFIL BAWAH
========================== */

.shorts-profile{

  position:absolute;

  left:8px;

  bottom:85px;

  display:flex;

  align-items:flex-start;

  justify-content:flex-start;

  gap:10px;

  z-index:10;

  min-height:52px;

  width:auto;

  max-width:calc(100% - 28px);
}

.profile-photo{

  width:60px !important;
  height:60px !important;

  min-width:52px;
  min-height:52px;

  border-radius:50% !important;

  overflow:hidden;

  border:2px solid #fff;

  object-fit:cover;

  object-position:center;

  display:block;

  flex-shrink:0;

  cursor:pointer;
}

.profile-info{

  display:flex;

  flex-direction:column;

  justify-content:flex-start;

  gap:6px;

  white-space:nowrap;
}

/* BARIS ATAS */
.profile-top{

  display:flex;

  align-items:center;

  gap:0px;
}

/* NAMA */
.name{

  color:#fff;

  font-size:22px;

  font-weight:bold;

  line-height:1.2;

  display:block;
}

/* VERIFIED */
.verified{

  display:flex;

  align-items:center;

  justify-content:center;

  margin-left:2px; /* sedikit jauh dari nama */
}

.verified-icon{

  width:20px !important;

  height:20px !important;

  display:block;

  fill:#1877f2;

  color:#1877f2;

  filter:drop-shadow(
    0 2px 4px rgba(24,119,242,.35)
  );
}

/* FOLLOW */
.follow-btn{

  border:none;

  outline:none;

  background:green;

  color:#ffff !important;

  font-size:16px !important;

  font-weight:bold;

  line-height:1;

  padding:4px 10px;

  border-radius:999px;

  white-space:nowrap;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  text-decoration:none !important;

  appearance:none;

  -webkit-appearance:none;

  opacity:1 !important;

  visibility:visible !important;

  transition:.25s ease;

  margin-left:6px; /* jarak dari verified */
}

.follow-btn:hover{

  transform:scale(1.05);
}

.follow-btn:active{

  transform:scale(.95);
}

/* TAGLINE */
.tagline{

  color:#fff;

  font-size:15px;

  line-height:1.2;
  
  letter-spacing:0.5px;

  opacity:1;
}


/* ==========================
   CAPTION
========================== */

.shorts-caption{

  position:absolute;

  left:14px;

  right:8px;

  bottom:30px;

  color:#fff;

  font-size:16px;

  line-height:1.5;

  font-weight:bold;

  text-shadow:0 2px 8px rgba(0,0,0,.5);

  z-index:10;

  white-space:pre-line;

  word-break:break-word;

  overflow-wrap:break-word;
}


/* =========================================
   POPUP LOGIN / DOWNLOAD FLIRTDATE
========================================= */

.popup-flirtdate{

  position:fixed;

  inset:0;

  display:none;

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

  padding:20px;

  z-index:9999;
}

/* ==========================
   CARD
========================== */

.popup-flirtdate-card{

  width:100%;

  max-width:360px;

  padding:22px 20px;

  border-radius:26px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.16) 40%,
      rgba(255,255,255,.10) 100%
    );

  backdrop-filter:
    blur(60px)
    saturate(220%)
    brightness(105%);

  -webkit-backdrop-filter:
    blur(60px)
    saturate(220%)
    brightness(105%);

  border:1px solid rgba(255,255,255,.15);

  box-shadow:
    0 25px 70px rgba(0,0,0,.30),
    0 10px 40px rgba(0,0,0,.12),
    0 0 25px rgba(255,255,255,.05),
    inset 0 1px 0 rgba(255,255,255,.25);

  text-align:center;
}

/* ==========================
   ATTENTION
========================== */

.popup-flirtdate-attention{

  text-align:center;

  font-size:20px;

  font-weight:bold;

  color:#0047AB;

  text-transform:uppercase;

  letter-spacing:1px;

  margin-bottom:8px;

  text-shadow:
    0 0 10px rgba(255,59,48,.45),
    0 0 25px rgba(255,59,48,.25);
}

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

.popup-flirtdate-title{

  color:#fff;

  font-size:18px;

  line-height:1.6;

  font-weight:bold;

  text-shadow:
  0 0 10px rgba(0,0,0,.70),
  0 0 25px rgba(0,0,0,.50);
}

/* ==========================
BRAND FLIRTDATE
========================== */

.popup-brand{

display:inline-block;

padding:1px 8px;

border-radius:999px;

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

backdrop-filter:blur(35px);
-webkit-backdrop-filter:blur(35px);

border:2px solid red;

font-size:20px;

font-weight:bold;

letter-spacing:0.4px;

line-height:1.2;
}

.popup-brand-text{

background: linear-gradient(
135deg,
#ff1744 0%,
#ff3d7f 25%,
#ff6a00 55%,
#ffcc33 100%
);

background-size:100% 100%;

-webkit-background-clip:text;
background-clip:text;

-webkit-text-fill-color:transparent;

color:transparent;

text-shadow:
0 0 1px rgba(255,255,255,.15);
}


/* ==========================
   BUTTONS
========================== */

.popup-flirtdate-actions{

  display:flex;

  align-items:center;

  gap:12px;

  margin-top:20px;
}

/* ==========================
   MASUK
========================== */

.popup-login-btn{

  flex:1;
  outline:none;

  height:50px;

  border-radius:50px;
  border:3px solid #00ff66;
  background:
  linear-gradient(
    135deg,
    #4ade80 0%,
    #22c55e 15%,
    #16a34a 35%,
    #15803d 55%,
    #065f46 75%,
    #022c22 100%
  );
  
  box-shadow:
  0 12px 30px rgba(34,197,94,.35),
  0 24px 60px rgba(21,128,61,.30),
  0 0 35px rgba(74,222,128,.35),
  0 0 60px rgba(34,197,94,.20),
  inset 0 1px 0 rgba(255,255,255,.25);

  color:#fff;

  font-size:16px;

  font-weight:bold;

  cursor:pointer;

  box-shadow:
    0 10px 25px rgba(34,197,94,.35);

  transition:.25s;
}

.popup-login-btn:hover{

  transform:translateY(-2px);
}

.popup-login-btn:active{

  transform:scale(.96);
}

/* ==========================
   DOWNLOAD
========================== */

.popup-download-btn{

  flex:1;

  border:3px solid #00c3ff;

  outline:none;

  height:50px;

  border-radius:50px;

  background:
  linear-gradient(
    135deg,
    #0b1b3a 0%,
    #0f2f66 20%,
    #103f8a 40%,
    #0b2a6b 65%,
    #061a3a 100%
  );

  box-shadow:
  0 12px 30px rgba(0,0,0,.45),
  0 0 25px rgba(0, 140, 255, .25),
  0 0 55px rgba(0, 90, 200, .18),
  inset 0 1px 0 rgba(255,255,255,.08);

  color:#fff;

  font-size:16px;

  font-weight:bold;

  cursor:pointer;

  transition:.25s;
}

.popup-download-btn:hover{
  transform:translateY(-2px);
}

.popup-download-btn:active{
  transform:scale(.96);
}


/* ===== FIXED BOTTOM TEXT ===== */
.bottom-hint{
  position: fixed;
  bottom: 0; /* 🔥 nempel full ke bawah */
  left: 0;
  right: 0;
  z-index: 9999;

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

  font-family: Arial, sans-serif;
  letter-spacing: 0.5px;
  white-space: nowrap;

  /* ULTRA THIN PADDING */
  padding: 2px 8px;

  /* 🔥 DARK GLASS EFFECT (tidak terlalu gelap) */
  background: rgba(10, 12, 18, 0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  /* 🔥 ONLY TOP RADIUS */
  border-radius: 12px 12px 0 0;

  /* subtle border biar keliatan nempel UI */
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* =========================================================
   🔥 TEXT DEFAULT (DESKTOP MODE)
========================================================= */
.desktop-text{
  display: inline;
  font-size: 16px;
}

.mobile-text{
  display: none;
}


/* ====================
   🔥 GRADIENT TEXT 
======================= */
.bottom-hint .desktop-text,
.bottom-hint .mobile-text{
  color: #ffffff;

  font-weight: bold; /* 🔥 BOLD TEXT */

  /* 🔥 elegant black shadow tebal */
  text-shadow:
    0 2px 6px rgba(0,0,0,0.45),
    0 6px 18px rgba(0,0,0,0.35),
    0 10px 30px rgba(0,0,0,0.25);
}


/* =============================================================================
   📱 HP KECIL
================================================================================ */
@media (max-width:360px){
  .desktop-text{ display:none; }
  .mobile-text{
    display:inline;
    font-size: 13px !important;
  }
}

/* =============================================================================
   📱 HP NORMAL
================================================================================ */
@media (min-width:361px) and (max-width:420px){
  .desktop-text{ display:none; }
  .mobile-text{
    display:inline;
    font-size: 14px !important;
  }
}

/* =============================================================================
   📱 HP BESAR
================================================================================ */
@media (min-width:421px) and (max-width:460px){
  .desktop-text{ display:none; }
  .mobile-text{
    display:inline;
    font-size: 15px !important;
  }
}

/* =============================================================================
   📱 TABLET
================================================================================ */
@media (min-width:461px) and (max-width:820px){
  .desktop-text{ display:none; }
  .mobile-text{
    display:inline;
    font-size: 15px !important;
  }
}

/* =============================================================================
   🖥️ LAPTOP
================================================================================ */
@media (min-width:821px) and (max-width:1440px){
  .mobile-text{ display:none; }
  .desktop-text{
    display:inline;
    font-size: 18px !important;
  }
}

/* =============================================================================
   🖥️ MONITOR BESAR
================================================================================ */
@media (min-width:1441px) and (max-width:1920px){
  .mobile-text{ display:none; }
  .desktop-text{
    display:inline;
    font-size: 20px !important;
  }
}

/* =============================================================================
   📺 TV / ULTRAWIDE
================================================================================ */
@media (min-width:1921px){
  .mobile-text{ display:none; }
  .desktop-text{
    display:inline;
    font-size: 22px !important;
  }
}


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

@keyframes playPulse{

  0%,100%{

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

  }

  50%{

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

  }
}


/* ==============================================
   🔵 FIX: HILANGKAN TAP-HIGHLIGHT / KEDIP KLIK
   (SEMUA CLASS CSS ANDA)
================================================= */

/* ================= HEADER ================= */
.top-header,
.header-brand,
.brand-icon,
.brand-text,
.header-reels,
.reels-icon,
.reels-text,

/* ================= CONTENT ================= */
.content,

/* ================= LINK ================= */
.redirect-url,

/* ================= SHORTS ================= */
.shorts-card,
.shorts-image,
.play-button,

/* ================= ACTIONS ================= */
.shorts-actions,
.action-item,
.action-item svg,
.action-item span,

/* ================= PROFILE ================= */
.shorts-profile,
.profile-photo,
.profile-info,
.profile-top,
.name,
.verified,
.verified-icon,
.follow-btn,
.tagline,

/* ================= CAPTION ================= */
.shorts-caption,

/* ================= BACKGROUND ================= */
.body-background,

/* ================= FRAME ================= */
.phone-frame {

  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  touch-action: manipulation !important;
  outline: none !important;
}

/* ==============================================
   🔵 FIX: HAPUS FOCUS / OUTLINE
================================================= */

.header-brand:focus,
.header-reels:focus,
.redirect-url:focus,
.shorts-card:focus,
.shorts-image:focus,
.play-button:focus,
.action-item:focus,
.profile-photo:focus,
.follow-btn:focus,
.shorts-profile:focus,
.profile-info:focus,
.profile-top:focus,
.verified:focus,
.verified-icon:focus,
.name:focus,
.tagline:focus,
.shorts-caption:focus,
.body-background:focus,
.phone-frame:focus {

  outline: none !important;
  box-shadow: none !important;
}

/* ==============================================
   🔵 FIX: ACTIVE / CLICK EFFECT
================================================= */

.play-button:active,
.action-item:active,
.follow-btn:active,
.profile-photo:active,
.redirect-url:active,
.header-brand:active,
.header-reels:active,
.shorts-image:active {

  outline: none !important;
  box-shadow: none !important;
}

/* ==============================================
   🔵 FIX: SELECTION HIGHLIGHT
================================================= */

.top-header *,
.header-brand *,
.header-reels *,
.content *,
.shorts-card *,
.shorts-actions *,
.action-item *,
.shorts-profile *,
.profile-info *,
.profile-top *,
.name,
.tagline,
.shorts-caption {

  -webkit-user-select: none !important;
  user-select: none !important;
}


/* MATIKAN NAVBAR BLOGGER */

#navbar-iframe{
  display:none !important;
}