/* =================================================
   🔴 CSS FULL RESPONSIVE 9:16 VIEWPORT FIX
==================================================== */

*{
  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: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;
  background:none;
}

/* ============================================
     🔵 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;
  }
}
  

/* =========================================================
   TOP PREMIUM BAR
========================================================= */

.top-premium-bar{

    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:9999999 !important;
    isolation:isolate;
    display:flex;
    align-items:center;
    background:
    linear-gradient(
        180deg,
        #07192d 0%,
        #0b2445 45%,
        #123c68 100%
    );
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:
    0 6px 18px rgba(0,0,0,.28);
    padding:0px 4px !important;
}

/* =========================================================
   UPLOAD
========================================================= */

.upload-video-btn{

    display:flex;
    align-items:center;
    gap:4px;
    padding:1px 6px;
    border:none;
    border-radius:8px;
    background:
    linear-gradient(
        135deg,
        #0f315d 0%,
        #14539a 55%,
        #1b76d1 100%
    );
    border:1px solid rgba(0,255,255,.45);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 3px 10px rgba(0,120,255,.25);

    cursor:pointer;
    flex-shrink:0;
    transition:.25s;
}

.upload-video-btn:hover{

    border-color:#7ef8ff;
}

.upload-video-btn:active{

    transform:scale(.97);
}

.upload-icon{

    width:25px;
    height:25px;
    color:#7ff7ff;
    flex-shrink:0;
	filter:drop-shadow(1px 1px 1px #000);
}

.upload-text{

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    line-height:1.4;
}

.upload-title{

    font-size:12px;
    font-weight:900;
    color:#fff;
    letter-spacing:0.2px;
	
    text-shadow:
        1px 1px 0 #000,
        0 0 4px rgba(0,0,0,0.9);
}

.upload-subtitle{

    font-size:11px;
    font-weight:700;
    color:#dff6ff;
    white-space:nowrap;
	
    text-shadow:
        1px 1px 0 #000,
        0 0 4px rgba(0,0,0,0.9);
}

/* =========================================================
   SEARCH - WRAPPER
========================================================= */

.top-search{

    position:relative;
    flex:1;
    display:flex;
    align-items:center;
    margin-left:8px;
    margin-right:0;
    padding:7px 5px;

    background:
    linear-gradient(
        180deg,
        #243b63 0%,
        #182947 45%,
        #101d35 100%
    );

    border:1px solid #00FFFF;
    border-radius:999px;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 4px 12px rgba(0,0,0,.20);

    /* DIUBAH:
       overflow hidden menghapus dropdown suggestion */
    overflow:visible;
}


/* =========================================================
   SEARCH ICON
========================================================= */

.search-icon{

    width:18px;
    height:18px;
    color:#d8f7ff;
    flex-shrink:0;
    position:relative;
    z-index:3;
}


/* =========================================================
   INPUT - KOLOM KETIK
========================================================= */

.top-search input{

    width:100%;
    border:none;
    outline:none;
    background:transparent;
    color:#fff;
    margin-left:8px;
    font-size:13px;
    font-weight:600;

    position:relative;
    z-index:2;
}

/* Placeholder asli disembunyikan */

.top-search input::placeholder{
	
    color:transparent;
}


/* =========================================================
   PLACEHOLDER ANIMATION
========================================================= */

.search-placeholder{

    position:absolute;
    left:31px;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    overflow:hidden;
    height:18px;
    pointer-events:none;
    z-index:1;
}


.search-placeholder span{

    position:absolute;
    left:0;
    top:0;
    white-space:nowrap;
    color:rgba(255,255,255,.78);
    font-size:13px;
    font-weight:600;
    line-height:18px;
    transform:translate3d(0,0,0);
    will-change:transform;
}


/* =========================================================
   SEARCH SUGGESTIONS - SARAN PENCARIAN
========================================================= */

.top-search-suggestions{

    position:absolute;

    top:calc(100% + 6px);
    left:0;
    right:0;
    display:none;
    overflow:hidden;
    padding:4px;
    border-radius:14px;

    background:
    linear-gradient(
        180deg,
        rgba(9,28,55,.98) 0%,
        rgba(14,42,79,.98) 100%
    );

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

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

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

    z-index:999999;
}

/* Muncul saat input aktif */

.top-search:focus-within .top-search-suggestions{

    display:block;
}


/* =========================================================
   SEARCH ITEM
========================================================= */

.top-search-item{

    padding:9px 12px;

    font-size:13px;

    font-weight:600;

    color:#fff;

    cursor:pointer;

    border-radius:10px;

    transition:.2s;

    border-bottom:1px solid rgba(255,255,255,.20);
}

.top-search-item:last-child{

    border-bottom:none;
}

.top-search-item:hover{

    background:rgba(255,255,255,.12);
}

.top-search-item:active{

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

/* =========================================================
   PROFILE
========================================================= */

.profile-btn{
	
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:58px;
    padding:3px 0;
    margin-left:8px;
    border:none;
    background:transparent;
    color:#fff;
    cursor:pointer;
    border-left:1px solid rgba(255,255,255,.20);
    z-index:99999999 !important;
}

.profile-icon{

    width:21px;
    height:21px;
    color:#fff;
	filter:drop-shadow(1px 1px 1px #000);
}

.profile-text{

    margin-top:2px;
    font-size:10px;
    font-weight:700;
    color:#fff;
	
	text-shadow:
        1px 1px 0 #000,
        0 0 4px rgba(0,0,0,0.9);
}

/* ==========================================================
   ACCOUNT SLIDE MENU - JIKA PROFILE DI KLIK KELUAR MENU INI
============================================================= */

/* PANEL MENU */
.account-slide-menu{

    position:absolute;
    top:100% !important;
    right:0;
    width:220px;
    overflow:hidden;
    border-radius:16px 0 0 16px !important;

    background:
    linear-gradient(
        180deg,
        rgba(9,28,55,.98) 0%,
        rgba(14,42,79,.98) 100%
    );
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:
        0 15px 35px rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transform:translateX(30px);
    transition:
        transform .28s ease,
        opacity .28s ease,
        visibility .28s ease;
    
    z-index:99999999 !important;
}


/* =========================================================
   PANEL SAAT AKTIF
========================================================= */

.account-slide-menu.show{

    opacity:1;
    visibility:visible;
    transform:translateX(0);
}


/* =========================================================
   ITEM MENU
========================================================= */

.account-slide-item{

    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    color:#fff;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    user-select:none;
    transition:.22s;
    border-bottom:1px solid rgba(255,255,255,.15);
}

/* =========================================================
   HAPUS GARIS ITEM TERAKHIR
========================================================= */

.account-slide-item:last-child{

    border-bottom:none;
}

/* =========================================================
   HOVER ITEM
========================================================= */

.account-slide-item:hover{

    background:rgba(0,0,0,.35);
}

/* =========================================================
   ICON MENU
========================================================= */

.account-slide-icon{

    width:19px;
    height:19px;
    flex-shrink:0;
    color:#00d8ff;
}

/* =========================================================
   TEKS MENU
========================================================= */

.account-slide-text{

    flex:1;
}


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

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

    /* =========================
       TOP PREMIUM BAR
    ========================= */

    .top-premium-bar{
        padding:3px 4px;
    }

    /* =========================
       UPLOAD
    ========================= */

    .upload-video-btn{
        padding:1px 4px;
        gap:3px;
    }

    .upload-icon{
        width:18px;
        height:18px;
        flex-shrink:0;
    }

    .upload-title{
        font-size:10px;
        font-weight:900;
        letter-spacing:.1px;
        white-space:nowrap;
    }

    .upload-subtitle{
        display:block;
        font-size:8px;
        font-weight:800;
        white-space:nowrap;
        opacity:.95;
    }

    /* =========================
       SEARCH
    ========================= */

    .top-search{
        padding:6px 8px;
        margin-left:5px;
    }

    .search-icon{
        width:15px;
        height:15px;
        flex-shrink:0;
    }

    .top-search input{
        font-size:11px;
        min-width:0;
    }

    /* =========================
       PROFILE
    ========================= */

    .profile-btn{
        width:50px;
        margin-left:5px;
    }

    .profile-icon{
        width:18px;
        height:18px;
    }

    .profile-text{
        font-size:8px;
    }

    /* =========================
       ACCOUNT MENU
    ========================= */

    .account-slide-menu{
        width:205px;
        top:100% !important;
    }

    .account-slide-item{
        padding:8px 10px;
        font-size:13px;
    }

    .account-slide-icon{
        width:18px;
        height:18px;
    }

}

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

    .top-premium-bar{
        padding:3px 4px;
    }

    .upload-video-btn{
        padding:1px 5px;
    }

    .upload-icon{
        width:20px;
        height:20px;
    }

    .upload-title{
        font-size:12px;
        font-weight:900;
        letter-spacing:.2px;
    }

    .upload-subtitle{
        font-size:8px;
        font-weight:800;
    }

    .top-search{
        padding:7px 10px;
    }

    .search-icon{
        width:17px;
        height:17px;
    }

    .top-search input{
        font-size:13px;
    }

    .profile-btn{
        width:56px;
    }

    .account-slide-menu{
        width:215px;
        top:100% !important;
    }

    .account-slide-item{
        padding:8px 10px;
        font-size:14px;
    }

    .account-slide-icon{
        width:19px;
        height:19px;
    }

}

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

    .top-premium-bar{
        padding:3px 4px;
    }

    .upload-video-btn{
        padding:1px 6px;
    }

    .upload-title{
        font-size:12px;
        font-weight:900;
    }

    .upload-subtitle{
        font-size:8px;
        font-weight:800;
    }

    .top-search{
        padding:7px 11px;
    }

    .profile-btn{
        width:58px;
    }

    .account-slide-menu{
        width:220px;
        top:100% !important;
    }

    .account-slide-item{
        padding:8px 10px;
        font-size:14px;
    }

    .account-slide-icon{
        width:19px;
        height:19px;
    }

}

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

    .top-premium-bar{
        padding:3px 4px;
    }

    .upload-video-btn{
        padding:1px 6px;
    }

    .upload-title{
        font-size:12px;
        font-weight:900;
    }

    .upload-subtitle{
        font-size:8px;
        font-weight:800;
    }

    .top-search{
        padding:7px 11px;
    }

    .profile-btn{
        width:60px;
    }

    .account-slide-menu{
        width:225px;
        top:100% !important;
    }

    .account-slide-item{
        padding:8px 10px;
        font-size:14px;
    }

    .account-slide-icon{
        width:19px;
        height:19px;
    }

}

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

    .top-premium-bar{
        padding:3px 4px;
    }

    .upload-video-btn{
        padding:1px 7px;
    }

    .upload-icon{
        width:22px;
        height:22px;
    }

    .upload-title{
        font-size:13px;
        font-weight:900;
    }

    .upload-subtitle{
        font-size:9px;
        font-weight:800;
    }

    .top-search{
        padding:8px 12px;
    }

    .search-icon{
        width:18px;
        height:18px;
    }

    .top-search input{
        font-size:13px;
    }

    .profile-btn{
        width:64px;
    }

    .profile-icon{
        width:22px;
        height:22px;
    }

    .profile-text{
        font-size:10px;
    }

    .account-slide-menu{
        width:235px;
        top:100% !important;
    }

    .account-slide-item{
        padding:8px 10px;
        font-size:14px;
    }

    .account-slide-icon{
        width:20px;
        height:20px;
    }

}


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

.top-header{

  position:absolute;

  top:45px !important;

  left:6px !important;

  right:6px !important;

  display:flex;

  align-items:center;

  justify-content:space-between;

  z-index:50;

  pointer-events:auto;
}

/* ==========================
   BRAND KIRI
========================== */

.brand-kiri{

  display:flex;

  align-items:center;

  gap:4px;

  padding:4px 6px;

  border-radius:999px;

  background:
    linear-gradient(
      #07182d,
      #07182d
    ) padding-box,
    linear-gradient(
      90deg,
      #ff0000,
      #ff8800,
      #ffff00,
      #00ff00,
      #00ffff,
      #0066ff,
      #9900ff,
      #ff0099
    ) border-box;

  border:1px solid transparent;

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 4px 10px rgba(0,0,0,.18);

  cursor:pointer;

  transition:.25s ease;
}

.brand-kiri:hover{

  background:
    linear-gradient(
      #08203c,
      #08203c
    ) padding-box,
    linear-gradient(
      90deg,
      #ff0000,
      #ff8800,
      #ffff00,
      #00ff00,
      #00ffff,
      #0066ff,
      #9900ff,
      #ff0099
    ) border-box;

  border:1px solid transparent;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 6px 14px rgba(0,0,0,.22);
}

.brand-kiri-icon{

  width:22px !important;

  height:22px !important;

  display:block;

  flex-shrink:0;

  cursor:pointer;
  
  filter:drop-shadow(1px 1px 1px #000);
}

.brand-kiri-text{

  font-size:20px !important;

  font-weight:900;

  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(1px 1px 1px #000);
}

/* ==========================
   BRAND KANAN
========================== */

.brand-kanan{

  display:flex;

  align-items:center;

  gap:4px;

  padding:4px 6px;

  border-radius:999px;

  background:
    linear-gradient(
      #07182d,
      #07182d
    ) padding-box,
    linear-gradient(
      90deg,
      #ff0000,
      #ff8800,
      #ffff00,
      #00ff00,
      #00ffff,
      #0066ff,
      #9900ff,
      #ff0099
    ) border-box;

  border:1px solid transparent;

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 4px 10px rgba(0,0,0,.18);

  cursor:pointer;

  transition:.25s ease;
}

.brand-kanan:hover{

  background:
    linear-gradient(
      #08203c,
      #08203c
    ) padding-box,
    linear-gradient(
      90deg,
      #ff0000,
      #ff8800,
      #ffff00,
      #00ff00,
      #00ffff,
      #0066ff,
      #9900ff,
      #ff0099
    ) border-box;

  border:1px solid transparent;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 6px 14px rgba(0,0,0,.22);
}

.brand-kanan-icon{

  width:22px !important;

  height:22px !important;

  display:block;

  flex-shrink:0;

  cursor:pointer;
  
  filter:drop-shadow(1px 1px 1px #000);
}

.brand-kanan-text{

  font-size:20px !important;

  font-weight:900;

  letter-spacing:.3px;

  line-height:1;

  cursor:pointer;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #e9fcff 50%,
      #bdf5ff 100%
    );

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

  background-clip:text;

  color:transparent;
  
  filter:drop-shadow(1px 1px 1px #000);
}


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

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

  .top-header{

    top:39px !important;

    left:6px !important;

    right:6px !important;
  }

  .brand-kiri,
  .brand-kanan{

    padding:3px 5px !important;

  }

  .brand-kiri-icon,
  .brand-kanan-icon{

    width:18px !important;

    height:18px !important;
  }

  .brand-kiri-text,
  .brand-kanan-text{

    font-size:15px !important;
  }

}

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

  .top-header{

    top:44px !important;

    left:6px !important;

    right:6px !important;
  }

  .brand-kiri,
  .brand-kanan{

    padding:3px 6px !important;

  }

  .brand-kiri-icon,
  .brand-kanan-icon{

    width:20px !important;

    height:20px !important;
  }

  .brand-kiri-text,
  .brand-kanan-text{

    font-size:16px !important;
  }

}

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

  .top-header{

    top:45px !important;

    left:6px !important;

    right:6px !important;
  }

  .brand-kiri,
  .brand-kanan{

    padding:4px 6px !important;

  }

  .brand-kiri-icon,
  .brand-kanan-icon{

    width:21px !important;

    height:21px !important;
  }

  .brand-kiri-text,
  .brand-kanan-text{

    font-size:17px !important;
  }

}

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

  .top-header{

    top:45px !important;

    left:6px !important;

    right:6px !important;
  }

  .brand-kiri,
  .brand-kanan{

    padding:4px 6px !important;

  }

  .brand-kiri-icon,
  .brand-kanan-icon{

    width:22px !important;

    height:22px !important;
  }

  .brand-kiri-text,
  .brand-kanan-text{

    font-size:18px !important;
  }

}

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

  .top-header{

    top:45px !important;

    left:6px !important;

    right:6px !important;
  }

  .brand-kiri,
  .brand-kanan{

    padding:4px 6px !important;

  }

  .brand-kiri-icon,
  .brand-kanan-icon{

    width:22px !important;

    height:22px !important;
  }

  .brand-kiri-text,
  .brand-kanan-text{

    font-size:19px !important;
  }

}


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


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

.shorts-card{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

/* =========================================================
   VIDEO AREA
========================================================= */

.shorts-videos{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  z-index:1;
  background:#000;
}

/* =========================================================
   DIRECT VIDEO
   SUPPORT MP4 / WEBM / OGV
========================================================= */

.shorts-videos video{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:translate(-50%,-50%);
  display:block;
  background:#000;
  border:0;
  pointer-events:auto;
}

/* =========================================================
   RESPONSIVE LAYAR DESKTOP - VIDEO VERTIKAL FULL & ZOOM
========================================================= */

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

  .shorts-videos video{
    width:auto;
    height:108%;
    aspect-ratio:9/16;
    object-fit:cover;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }
}


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

  .shorts-videos video{
    width:auto;
    height:112%;
    aspect-ratio:9/16;
    object-fit:cover;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }
}


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

  .shorts-videos video{
    width:auto;
    height:115%;
    aspect-ratio:9/16;
    object-fit:cover;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }
}


/* ============================================
   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);
}

/* 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:220px !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index:1 !important;
}

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

/* ========================================
   RESPONSIVE FIXED (HP - TABLET)
=========================================== */

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

  .shorts-actions{

    right:5px;

    bottom:270px !important;

    gap:9px;
  }

  .action-item{

    gap:5px;
  }

  .action-item svg{

    --icon-size:36px;
  }

  .action-item span{

    font-size:16px;
  }

}


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

  .shorts-actions{

    right:6px;

    bottom:300px !important;

    gap:10px;
  }

  .action-item{

    gap:5px;
  }

  .action-item svg{

    --icon-size:40px;
  }

  .action-item span{

    font-size:18px;
  }

}


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

  .shorts-actions{

    right:6px;

    bottom:305px !important;

    gap:10px;
  }

  .action-item svg{

    --icon-size:44px;
  }

  .action-item span{

    font-size:20px;
  }

}


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

  .shorts-actions{

    right:6px;

    bottom:310px !important;

    gap:11px;
  }

  .action-item svg{

    --icon-size:45px;
  }

  .action-item span{

    font-size:21px;
  }

}


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

  .shorts-actions{

    right:8px;

    bottom:315px !important;

    gap:12px;
  }

  .action-item{

    gap:6px;
  }

  .action-item svg{

    --icon-size:47px;
  }

  .action-item span{

    font-size:22px;
  }

}


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

.shorts-profile{

  position:absolute;

  left:5px;

  display:flex;

  align-items:stretch;

  justify-content:flex-start;

  gap:10px;

  z-index:10;

  min-height:60px;

  width:auto;

  max-width:calc(100% - 28px);
  
  bottom:88px !important;
}
  
/* ==========================
   FOTO KIRI
========================== */

.profile-photo{

  width:65px !important;

  height:auto !important;

  min-width:65px !important;

  min-height:60px !important;

  border-radius:10px !important;

  overflow:hidden;

  object-fit:cover;

  object-position:center;

  display:block;

  flex-shrink:0;

  cursor:pointer;

  border:1px solid transparent;

  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(
      90deg,
      #ff0000,
      #ff8800,
      #ffff00,
      #00ff00,
      #00ffff,
      #0066ff,
      #9900ff,
      #ff0099
    ) border-box;
}

/* ==========================
   INFO KANAN
========================== */

.profile-info{

  display:flex;

  flex-direction:column;

  justify-content:flex-start;

  align-items: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;

  cursor:pointer;

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

/* VERIFIED */

.verified{

  display:flex;

  align-items:center;

  justify-content:center;

  margin-left:2px;
  
  cursor:pointer;
}

.verified-icon{

  width:18px !important;

  height:18px !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:#fff !important;

  font-size:15px !important;

  font-weight:bold;

  line-height:1;

  padding:2px 6px;

  border-radius:5px;

  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;
  
  text-shadow:
  -1px -1px 0 rgba(0,0,0,.35),
   1px -1px 0 rgba(0,0,0,.35),
  -1px  1px 0 rgba(0,0,0,.35),
   1px  1px 0 rgba(0,0,0,.35),
   0 3px 5px rgba(0,0,0,.35);
}

.follow-btn:hover{

  transform:scale(1.05);
}

.follow-btn:active{

  transform:scale(.95);
}

/* ==========================
   TAGLINE
========================== */

.tagline{

  display:inline-flex;

  align-self:flex-start;

  flex:none;

  width:auto;
  
  /* Atas | Kanan | Bawah | Kiri */
  padding:4px 10px 4px 2px !important;

  border-radius:0 15px 15px 0;

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

  backdrop-filter:blur(35px);

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

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

.tagline-row{

  display:flex;

  align-items:center;

  gap:5px;
}

/* TEXT */

.tagline-text{

  display:inline-block;

  font-size:14px;

  font-weight:900;

  letter-spacing:.3px;

  line-height:1;

  cursor:pointer;

  background:

    linear-gradient(

      135deg,

      #ff2d55 0%,

      #ff4d8d 35%,

      #ff7a45 70%,

      #ffb347 100%

    );

  -webkit-background-clip:text;

  background-clip:text;

  -webkit-text-fill-color:transparent;

  color:transparent;

  filter:
  drop-shadow(0 0 1px rgba(0,0,0,.5))
  drop-shadow(0 3px 5px rgba(0,0,0,.35));
}

  
.tagline-divider{

  width:1px;

  height:13px;

  background:rgba(255,255,255,.35);

  flex-shrink:0;
}

.country-flag{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  font-size:16px;

  line-height:1;

  flex-shrink:0;

  cursor:pointer;

  user-select:none;
}

/* ==========================
   SVG LINK
========================== */

.tagline-action{

  display:flex;

  align-items:center;

  gap:5px;

  margin-top:0;
}

.tagline-action a{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  text-decoration:none;
}

/* GARIS PEMBATAS */

.action-divider{

  width:2px;

  height:20px;

  background:rgba(255,255,255,.35);

  margin:0 2px;

  flex-shrink:0;
}

.tagline-svg{

  width:28px;

  height:28px;

  display:block;

  object-fit:contain;

  cursor:pointer;

  transition:.25s ease;
}

.tagline-svg:hover{

  transform:scale(1.08);
}

.tagline-svg:active{

  transform:scale(.92);
}


/* ========================================
   RESPONSIVE FIXED (HP - TABLET)
=========================================== */

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

  .shorts-profile{

    bottom:75px !important;
  }

  .name{

    font-size:20px;
  }

  .verified-icon{

    width:18px !important;
    height:18px !important;
  }

  .follow-btn{

    font-size:14px !important;
  }

  .tagline-text{

    font-size:14px;
  }

  .country-flag{

    font-size:14px;
  }

  .tagline-divider{

    height:12px;
  }

  .tagline-svg{

    width:30px;
    height:30px;
  }

  .action-divider{

    height:22px;
  }

}

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

  .shorts-profile{

    bottom:76px !important;
  }

  .name{

    font-size:23px;
  }

  .verified-icon{

    width:19px !important;
    height:19px !important;
  }

  .follow-btn{

    font-size:15px !important;
  }

  .tagline-text{

    font-size:15px;
  }

  .country-flag{

    font-size:15px;
  }

  .tagline-divider{

    height:13px;
  }

  .tagline-svg{

    width:33px;
    height:33px;
  }

  .action-divider{

    height:23px;
  }

}

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

  .shorts-profile{

    bottom:77px !important;
  }

  .name{

    font-size:24px;
  }

  .verified-icon{

    width:20px !important;
    height:20px !important;
  }

  .follow-btn{

    font-size:15px !important;
  }

  .tagline-text{

    font-size:15px;
  }

  .country-flag{

    font-size:16px;
  }

  .tagline-divider{

    height:13px;
  }

  .tagline-svg{

    width:34px;
    height:34px;
  }

  .action-divider{

    height:24px;
  }

}

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

  .shorts-profile{

    bottom:78px !important;
  }

  .name{

    font-size:25px;
  }

  .verified-icon{

    width:21px !important;
    height:21px !important;
  }

  .follow-btn{

    font-size:16px !important;
  }

  .tagline-text{

    font-size:16px;
  }

  .country-flag{

    font-size:17px;
  }

  .tagline-divider{

    height:14px;
  }

  .tagline-svg{

    width:35px;
    height:35px;
  }

  .action-divider{

    height:25px;
  }

}

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

  .shorts-profile{

    bottom:79px !important;
  }

  .name{

    font-size:26px;
  }

  .verified-icon{

    width:22px !important;
    height:22px !important;
  }

  .follow-btn{

    font-size:17px !important;
  }

  .tagline-text{

    font-size:17px;
  }

  .country-flag{

    font-size:18px;
  }

  .tagline-divider{

    height:15px;
  }

  .tagline-svg{

    width:35px;
    height:35px;
  }

  .action-divider{

    height:26px;
  }

}


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

.shorts-caption{

  position:absolute;

  left:5px;

  right:0;

  bottom:28px !important;

  display:inline-block;

  width:fit-content;

  max-width:100%;

  padding:2px 8px !important;

  border-radius:10px;

  background:rgba(8,22,45,.38);

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

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 12px rgba(0,0,0,.18);

  color:#fff;

  font-size:16px;

  font-weight:700;

  line-height:1.4;

  letter-spacing:0.2px;

  text-shadow:
    0 1px 2px rgba(0,0,0,.40);

  z-index:10;

  white-space:pre-line;

  word-break:break-word;

  overflow-wrap:break-word;

  cursor:pointer;
}


/* ============================================
   🔵 RESPONSIVE FIXED (HP - TABLET)
=============================================== */

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

  .shorts-caption{

    bottom:22px !important;

    font-size:14px !important;
  }

}

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

  .shorts-caption{

    bottom:23px !important;

    font-size:15px;
  }

}

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

  .shorts-caption{

    bottom:24px !important;

    font-size:16px;
  }

}

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

  .shorts-caption{

    bottom:24px !important;

    font-size:17px;
  }

}

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

  .shorts-caption{

    bottom:25px !important;

    font-size:17px;
  }

}

  
/* ===== FIXED BOTTOM TEXT - TEKS DI BAWAH LAYAR ===== */
.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: 0px 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: #fff;
  font-weight: 900; /* 🔥 BOLD TEXT */
}


/* =============================================================================
   📱 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: 16px !important;
  }
}


/* ========================================================= POPUP DIGITAL CREATOR ROOM - JOIN CHANNEL ========================================================= */

.popup-channel-room{

    display:none;

    position:absolute;

    top:86px;

    left:6px;

    width:320px;

    padding:8px;

    background:#000;

    border:1px solid #00ffff;

    border-radius:12px;

    box-sizing:border-box;

    z-index:60;

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

    animation:popupCreator .35s ease;
}

.popup-channel-room.show{

    display:block;
}

/* ===================================== */

.popup-channel-head{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:10px;
}

.popup-channel-heading{

    width:100%;

    text-align:center;

    color:#ffffff;

    font-size:15px;

    font-weight:900;

    letter-spacing:.8px;
}

.popup-channel-close{

    position:absolute;

    top:0;

    right:0;

    width:22px;

    height:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #ff2d55 0%,
        #e11d48 100%
    );

    border:1px solid #00ffff;

    border-radius:50%;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s ease;
	
	text-shadow:
        0 1px 2px rgba(0,0,0,.85),
        0 0 6px rgba(255,255,255,.25);
}

.popup-channel-close:hover{

    background:linear-gradient(
        135deg,
        #07182d 0%,
        #0d2d55 45%,
        #14538a 100%
    );
}

/* ===================================== */

.popup-channel-action{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-bottom:10px;
}

.popup-channel-button{

    display:flex;

    align-items:center;

    gap:6px;

    padding:5px 6px;

    background:linear-gradient(
        135deg,
        #07182d 0%,
        #0d2d55 45%,
        #14538a 100%
    );

    border:1px solid #00ffff;

    border-radius:25px;

    cursor:pointer;

    transition:.25s;
}

.popup-channel-button:hover{

    transform:translateY(-1px);
}

.popup-channel-label{

    color:#FF69B4;

    font-size:15px;

    font-weight:800;

    line-height:1;
	
	text-shadow:
    0 2px 3px rgba(0,0,0,.95),
    0 0 8px rgba(0,0,0,.75),
    0 0 12px rgba(255,255,255,.35);
}

.popup-channel-icon{

    width:25px;

    height:25px;

    border-radius:50%;

    display:block;
}

.popup-channel-separator{

    color:#ffffff;

    font-size:15px;

    font-weight:800;
}

/* ===================================== */

.popup-channel-text{

    text-align:center;

    color:#ffffff;

    font-size:15px;

    font-weight:800;

    line-height:1.3;
}

.popup-channel-room-text{

    margin-top:2px;

    text-align:center;

    color:#ffffff;

    font-size:14px;

    font-weight:900;

    letter-spacing:.3px;
}

.popup-room-gradient{

    background:linear-gradient(
        135deg,
        #ff2d55 0%,
        #ff4d8d 35%,
        #ff7a45 70%,
        #ffb347 100%
    );
	
    font-size:13px;
	
    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    color:transparent;

    font-weight:900;
}

/* ===================================== */

@keyframes popupCreator{
    from{
        opacity:0;
        transform:translateX(-20px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

/* ============================================================
   RESPONSIVE FIX POPUP JOIN CHANNEL TELEGRAM DAN WHATSHAPP
   WIDTH STABIL SEMUA DEVICE HP SAMPAI LAYAR LEBAR TV DIGITAL
=============================================================== */


.popup-channel-room{

    width:270px;

    max-width:calc(100vw - 20px);

    padding:6px;

}


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

    .popup-channel-room{

        top:80px;

        left:6px;

        width:260px;

        padding:5px;
    }


    .popup-channel-heading{

        font-size:13px;
    }


    .popup-channel-close{

        width:20px;

        height:20px;

        font-size:13px;
    }


    .popup-channel-button{

        padding:4px 5px;

        gap:5px;
    }


    .popup-channel-icon{

        width:20px;

        height:20px;
    }


    .popup-channel-label{

        font-size:12px;
    }


    .popup-channel-text{

        font-size:13px;
    }


    .popup-channel-room-text{

        font-size:13px;
    }


    .popup-room-gradient{

        font-size:12px;
    }

}



/* HP NORMAL - TABLET */
@media (min-width:361px){

    .popup-channel-room{

        top:86px;

        left:6px;

        width:270px;

        max-width:calc(100vw - 20px);

        padding:5px;
    }

    .popup-channel-head{

        margin-bottom:7px;
    }

    .popup-channel-action{

        gap:5px;

        margin-bottom:7px;
    }

    .popup-channel-button{

        gap:5px;

        padding:4px 5px;
    }

    .popup-channel-icon{

        width:22px;

        height:22px;
    }

    .popup-channel-label{

        font-size:13px;
    }

    .popup-channel-separator{

        font-size:13px;
    }

    .popup-channel-text{

        font-size:13px;
    }

    .popup-channel-room-text{

        font-size:13px;
    }

    .popup-room-gradient{

        font-size:12px;
    }
}


/* ============================================== 3 POPUP CONTINUE - PREMIUM GLASS UI ============================================== */

.continue-popup,
.continue-popup2,
.continue-popup3{
    position:fixed;
    inset:0 0 auto 0;
    display:none;
    justify-content:center;
    align-items:flex-start;
    padding:0 12px;
    z-index:99999;
    pointer-events:none;
}

/* ==============================================
   CARD POP UP PENAWARAN - SEDIKIT DI ATAS LAYAR
================================================= */
.continue-popup-box,
.continue-popup-box2,
.continue-popup-box3{
    position:relative;
    width:280px !important;
    max-width:88%;
    margin-top:75px; /* POSISI CARD DARI ATAS LAYAR */
    padding:5px;
    text-align:center;
    background:linear-gradient(
        145deg,
        rgba(0,0,0,.90),
        rgba(20,20,20,.85)
    );

    border:1px solid rgba(255,255,255,.15);
    border-radius:20px;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    box-shadow:
        0 25px 70px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.08);

    animation:PopupSlide .45s cubic-bezier(.22,1,.36,1);

    pointer-events:auto;
}

/* ===================================================
   🔵 RESPONSIVE (UNIFORM ALL SCREEN) MARGIN TOP POPUP
====================================================== */

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

  .continue-popup-box,
  .continue-popup-box2,
  .continue-popup-box3{
    margin-top:80px;
  }

}

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

  .continue-popup-box,
  .continue-popup-box2,
  .continue-popup-box3{
    margin-top:85px;
  }

}

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

  .continue-popup-box,
  .continue-popup-box2,
  .continue-popup-box3{
    margin-top:90px;
  }

}

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

  .continue-popup-box,
  .continue-popup-box2,
  .continue-popup-box3{
    margin-top:95px;
  }

}

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

  .continue-popup-box,
  .continue-popup-box2,
  .continue-popup-box3{
    margin-top:98px;
  }

}

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

.continue-popup-close,
.continue-popup-close2,
.continue-popup-close3{
    position:absolute;
    top:-18px;
    left:50%;
    transform:translateX(-50%);

    width:38px;
    height:38px;

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

    border:none;
    border-radius:50%;

    background:#e11d48;
    cursor:pointer;

    transition:.25s ease;

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

    border:1px solid #00FFFF;
}

.continue-popup-close:hover,
.continue-popup-close2:hover,
.continue-popup-close3:hover{
    background:#001f5c;
    transform:translateX(-50%) scale(1.05);
}

.continue-popup-close span,
.continue-popup-close2 span,
.continue-popup-close3 span{
    color:#fff;
    font-size:19px !important;
    font-weight:900;
    line-height:1;
	
	text-shadow:
        0 2px 2px rgba(0,0,0,.85),
        0 4px 10px rgba(0,0,0,.55);
}


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

.continue-popup-title,
.continue-popup-title2,
.continue-popup-title3{
    max-width:280px;
    margin:18px auto 10px !important;
    padding:0 6px;
    text-align:center;
}

.continue-popup-title span,
.continue-popup-title2 span,
.continue-popup-title3 span{
    display:block;

    font-size:20px;
    font-weight:900;
    line-height:1.25;
    letter-spacing: 0.4px;

    background:linear-gradient(
        135deg,
        #ffb000 0%,
        #ff7a00 50%,
        #ff3d00 100%
    );

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

    filter:drop-shadow(0 3px 8px rgba(0,0,0,.65));

    word-break:break-word;
    overflow-wrap:break-word;
}


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

.continue-popup-buttons,
.continue-popup-buttons2,
.continue-popup-buttons3{
    display:flex;
    justify-content:center;
}


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

.continue-popup-action,
.continue-popup-action2,
.continue-popup-action3{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:100%;
    max-width:250px;

    padding:4px;

    border:1px solid #32e6ff;
    border-radius:15px;

    cursor:pointer;

    background:linear-gradient(
        180deg,
        #4ea2ff 0%,
        #2d7dff 18%,
        #175ad8 42%,
        #0c3ea8 68%,
        #06256f 100%
    );

    box-shadow:
        0 0 3px rgba(50,230,255,.30),
        0 2px 8px rgba(0,40,120,.20),
        inset 0 1px 0 rgba(255,255,255,.20);

    transition:.25s ease;
}


/* =======================
   ACTION BUTTON HOVER
======================= */

.continue-popup-action:hover,
.continue-popup-action2:hover,
.continue-popup-action3:hover{

    border-color:#7cf4ff;

    background:linear-gradient(
        180deg,
        #63b2ff 0%,
        #3a8cff 18%,
        #2168eb 42%,
        #1049bf 68%,
        #082d86 100%
    );
}


/* =======================
   ACTION BUTTON TEXT
======================= */

.continue-popup-action span,
.continue-popup-action2 span,
.continue-popup-action3 span{
    display:block;
    width:100%;
    padding:5px 10px;
    border-radius:10px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.18),
        rgba(255,255,255,.05)
    );

    color:#ffffff;
    font-size:20px;
    font-weight:800;
    letter-spacing:.3px;
    line-height:1.2;
    text-align:center;

    text-shadow:
        0 2px 2px rgba(0,0,0,.85),
        0 4px 10px rgba(0,0,0,.55);

    animation:TextColor 2s linear infinite !important;
}


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

@keyframes PopupSlide{

    from{
        opacity:0;
        transform:translateY(-60px);
    }
    to{
        opacity:1;
        transform:translateY(0px);
    }
}

  
/* ================================ POPUP LOGIN 1 SAMPAI  4 - TAMPILAN SAMA - TOMBOL MASUK / DOWNLOAD SAMA =================================== */

.popup-login,
.popup-login2,
.popup-login3,
.popup-login4{

  position:fixed;

  inset:0;

  display:none;

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

  padding:20px;

  z-index:9999;
}

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

.popup-login-card,
.popup-login-card2,
.popup-login-card3,
.popup-login-card4{
	
  position:relative;
  overflow:hidden;

  width:100%;

  max-width:360px;

  padding:0px 10px 8px !important;

  border-radius:5px 5px 30px 30px;

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

/* ==========================
   POPUP CLOSE BUTTON
========================== */

.popup-login-close,
.popup-login-close2,
.popup-login-close3,
.popup-login-close4{

  position:absolute;

  top:0;

  right:0;

  padding:6px 6px;

  border:none;

  outline:none;

  border-radius:0 0 0 5px;
  
  border-left:1px solid #00FFFF;

  border-bottom:1px solid #00FFFF;
  
  background:#C00000;

  color:#fff;

  font-size:16px;

  font-weight:900;

  line-height:1;

  letter-spacing:.3px;

  white-space:nowrap;

  cursor:pointer;

  z-index:100;
  
  text-shadow:
  0 1px 0 rgba(0,0,0,1),
  0 1px 2px rgba(0,0,0,1),
  0 2px 4px rgba(0,0,0,.95);

  transition:.25s;
}

.popup-login-close:hover,
.popup-login-close2:hover,
.popup-login-close3:hover,
.popup-login-close4:hover{

  background:#1565C0;

  color:#FFD700;
}

.popup-login-close:active,
.popup-login-close2:active,
.popup-login-close3:active,
.popup-login-close4:active{
  transform:scale(.96);
}

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

.popup-login-attention,
.popup-login-attention2,
.popup-login-attention3,
.popup-login-attention4{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:4px 12px;

  margin:0 auto 10px;

  border-radius:0 0 16px 16px;

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

  box-shadow:
    0 4px 15px rgba(0,0,0,.25);
}

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

.popup-login-attention-text,
.popup-login-attention-text2,
.popup-login-attention-text3,
.popup-login-attention-text4{

  font-size:24px;

  font-weight:900;

  text-transform:uppercase;

  letter-spacing:1px;

  background:
  linear-gradient(
    135deg,
    #ff1744 0%,
    #ff3d7f 25%,
    #ff6a00 55%,
    #ffcc33 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);
}

/* ==========================
    TEXT DI BAWAH ATTENTION
============================= */

.popup-login-title,
.popup-login-title2,
.popup-login-title3,
.popup-login-title4{

  color:#fff;

  font-size:20px;

  line-height:1.3;

  font-weight:800;
  
  letter-spacing:0.5px;
  
  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;
}

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

.popup-brand,
.popup-brand2,
.popup-brand3,
.popup-brand4{

display:inline-block;

padding:0px 6px;

border-radius:10px;

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

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

border:2px solid red;

font-size:16px !important;

font-weight:900;

letter-spacing:0.4px;

line-height:1.2;
}

/* ==========================
    TEKS BRAND 
========================== */

.popup-brand-text,
.popup-brand-text2,
.popup-brand-text3,
.popup-brand-text4{

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

background-size:100% 100%;

font-size:16px !important;

-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-login-actions,
.popup-login-actions2,
.popup-login-actions3,
.popup-login-actions4{

  display:flex;

  align-items:center;

  gap:10px;

  margin-top:10px;
}


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

.popup-login-btn,
.popup-login-btn2,
.popup-login-btn3,
.popup-login-btn4{

  flex:1;

  outline:none;

  wildh:auto;

  height:50px;

  border-radius:50px !important;

  border:3px solid #00ff66;

  background:
  linear-gradient(
  135deg,
  #1f7a4d 0%,
  #17653f 18%,
  #125536 38%,
  #0d442b 58%,
  #083421 78%,
  #041b12 100%
  );

  box-shadow:
  0 12px 30px rgba(16,94,57,.38),
  0 24px 60px rgba(8,52,33,.35),
  0 0 35px rgba(31,122,77,.18),
  0 0 60px rgba(18,85,54,.12),
  inset 0 1px 0 rgba(255,255,255,.18);

  cursor:pointer;

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

  transition:.25s;
}

.popup-login-btn:hover,
.popup-login-btn2:hover,
.popup-login-btn3:hover,
.popup-login-btn4:hover{

  transform:translateY(-2px);
}

.popup-login-btn:active,
.popup-login-btn2:active,
.popup-login-btn3:active,
.popup-login-btn4:active{

  transform:scale(.96);
}

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

.popup-download-btn,
.popup-download-btn2,
.popup-download-btn3,
.popup-download-btn4{

  flex:1;

  border:3px solid #00c3ff;

  outline:none;

  height:50px;

  border-radius:50px !important;

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

  cursor:pointer;

  transition:.25s;
}

.popup-download-btn:hover,
.popup-download-btn2:hover,
.popup-download-btn3:hover,
.popup-download-btn4:hover{

  transform:translateY(-2px);
}

.popup-download-btn:active,
.popup-download-btn2:active,
.popup-download-btn3:active,
.popup-download-btn4:active{

  transform:scale(.96);
}


.popup-login-btn span,
.popup-login-btn2 span,
.popup-login-btn3 span,
.popup-login-btn4 span,
.popup-download-btn span,
.popup-download-btn2 span,
.popup-download-btn3 span,
.popup-download-btn4 span{
	
  color:#fff;
  
  font-size:18px !important;
  
  letter-spacing:0.4px;
  
  font-weight:900;
  
  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;
	
  animation: TextColor 2s linear infinite !important;
}

/* ========================= SELECTOR POPUP LOGIN ========================= */

.popup-login.show,
.popup-login2.show,
.popup-login3.show,
.popup-login4.show{
  display:flex;
}

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


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

  .popup-login,
  .popup-login2,
  .popup-login3,
  .popup-login4{
    padding:16px;
  }

  .popup-login-card,
  .popup-login-card2,
  .popup-login-card3,
  .popup-login-card4{
    max-width:320px !important;
    padding:0 10px 10px !important;

    /* SAMA DENGAN CSS UTAMA */
    border-radius:5px 5px 30px 30px;
  }

  /* CLOSE BUTTON RESPONSIVE */
  .popup-login-close,
  .popup-login-close2,
  .popup-login-close3,
  .popup-login-close4{
    padding:6px 10px;
    font-size:18px;
  }

  .popup-login-attention-text,
  .popup-login-attention-text2,
  .popup-login-attention-text3,
  .popup-login-attention-text4{
    font-size:20px;
  }

  .popup-login-title,
  .popup-login-title2,
  .popup-login-title3,
  .popup-login-title4{
    font-size:17px;
    line-height:1.55;
  }

  .popup-brand,
  .popup-brand2,
  .popup-brand3,
  .popup-brand4{
    font-size:17px;
  }

  .popup-login-actions,
  .popup-login-actions2,
  .popup-login-actions3,
  .popup-login-actions4{
    gap:10px;
  }

  .popup-login-btn,
  .popup-login-btn2,
  .popup-login-btn3,
  .popup-login-btn4,
  .popup-download-btn,
  .popup-download-btn2,
  .popup-download-btn3,
  .popup-download-btn4{
    height:46px;
  }

  .popup-login-btn span,
  .popup-login-btn2 span,
  .popup-login-btn3 span,
  .popup-login-btn4 span,
  .popup-download-btn span,
  .popup-download-btn2 span,
  .popup-download-btn3 span,
  .popup-download-btn4 span{
    font-size:16px !important;
  }

}


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

  .popup-login,
  .popup-login2,
  .popup-login3,
  .popup-login4{
    padding:18px;
  }

  .popup-login-card,
  .popup-login-card2,
  .popup-login-card3,
  .popup-login-card4{
    max-width:340px !important;

    /* SAMA DENGAN CSS UTAMA */
    border-radius:5px 5px 30px 30px;
  }

  /* CLOSE BUTTON RESPONSIVE */
  .popup-login-close,
  .popup-login-close2,
  .popup-login-close3,
  .popup-login-close4{
    padding:6px 11px;
    font-size:19px;
  }

  .popup-login-attention-text,
  .popup-login-attention-text2,
  .popup-login-attention-text3,
  .popup-login-attention-text4{
    font-size:22px;
  }

  .popup-login-title,
  .popup-login-title2,
  .popup-login-title3,
  .popup-login-title4{
    font-size:19px;
  }

  .popup-brand,
  .popup-brand2,
  .popup-brand3,
  .popup-brand4{
    font-size:19px;
  }

  .popup-login-btn,
  .popup-login-btn2,
  .popup-login-btn3,
  .popup-login-btn4,
  .popup-download-btn,
  .popup-download-btn2,
  .popup-download-btn3,
  .popup-download-btn4{
    height:48px;
  }

  .popup-login-btn span,
  .popup-login-btn2 span,
  .popup-login-btn3 span,
  .popup-login-btn4 span,
  .popup-download-btn span,
  .popup-download-btn2 span,
  .popup-download-btn3 span,
  .popup-download-btn4 span{
    font-size:17px !important;
  }

}


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

  .popup-login-card,
  .popup-login-card2,
  .popup-login-card3,
  .popup-login-card4{
    max-width:345px !important;

    /* SAMA DENGAN CSS UTAMA */
    border-radius:5px 5px 30px 30px;
  }

  /* CLOSE BUTTON RESPONSIVE */
  .popup-login-close,
  .popup-login-close2,
  .popup-login-close3,
  .popup-login-close4{
    padding:7px 12px;
    font-size:20px;
  }

  .popup-login-attention-text,
  .popup-login-attention-text2,
  .popup-login-attention-text3,
  .popup-login-attention-text4{
    font-size:23px;
  }

  .popup-login-title,
  .popup-login-title2,
  .popup-login-title3,
  .popup-login-title4{
    font-size:20px;
  }

  .popup-brand,
  .popup-brand2,
  .popup-brand3,
  .popup-brand4{
    font-size:20px;
  }

  .popup-login-btn,
  .popup-login-btn2,
  .popup-login-btn3,
  .popup-login-btn4,
  .popup-download-btn,
  .popup-download-btn2,
  .popup-download-btn3,
  .popup-download-btn4{
    height:50px;
  }

  .popup-login-btn span,
  .popup-login-btn2 span,
  .popup-login-btn3 span,
  .popup-login-btn4 span,
  .popup-download-btn span,
  .popup-download-btn2 span,
  .popup-download-btn3 span,
  .popup-download-btn4 span{
    font-size:18px !important;
  }

}

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

  .popup-login-card,
  .popup-login-card2,
  .popup-login-card3,
  .popup-login-card4{
    max-width:350px;

    /* SAMA DENGAN CSS UTAMA */
    border-radius:5px 5px 30px 30px;
  }

  /* CLOSE BUTTON RESPONSIVE */
  .popup-login-close,
  .popup-login-close2,
  .popup-login-close3,
  .popup-login-close4{
    padding:7px 13px;
    font-size:21px;
  }

  .popup-login-attention-text,
  .popup-login-attention-text2,
  .popup-login-attention-text3,
  .popup-login-attention-text4{
    font-size:24px;
  }

  .popup-login-title,
  .popup-login-title2,
  .popup-login-title3,
  .popup-login-title4{
    font-size:20px;
  }

  .popup-brand,
  .popup-brand2,
  .popup-brand3,
  .popup-brand4{
    font-size:20px;
  }

  .popup-login-btn,
  .popup-login-btn2,
  .popup-login-btn3,
  .popup-login-btn4,
  .popup-download-btn,
  .popup-download-btn2,
  .popup-download-btn3,
  .popup-download-btn4{
    height:50px;
  }

}


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

  .popup-login,
  .popup-login2,
  .popup-login3,
  .popup-login4{
    padding:24px;
  }

  .popup-login-card,
  .popup-login-card2,
  .popup-login-card3,
  .popup-login-card4{
    max-width:360px;
    padding:0 14px 12px !important;

    /* SAMA DENGAN CSS UTAMA */
    border-radius:5px 5px 30px 30px;
  }

  /* CLOSE BUTTON RESPONSIVE */
  .popup-login-close,
  .popup-login-close2,
  .popup-login-close3,
  .popup-login-close4{
    padding:7px 13px;
    font-size:22px;
  }

  .popup-login-attention-text,
  .popup-login-attention-text2,
  .popup-login-attention-text3,
  .popup-login-attention-text4{
    font-size:26px;
  }

  .popup-login-title,
  .popup-login-title2,
  .popup-login-title3,
  .popup-login-title4{
    font-size:22px;
  }

  .popup-brand,
  .popup-brand2,
  .popup-brand3,
  .popup-brand4{
    font-size:22px;
  }

  .popup-login-btn,
  .popup-login-btn2,
  .popup-login-btn3,
  .popup-login-btn4,
  .popup-download-btn,
  .popup-download-btn2,
  .popup-download-btn3,
  .popup-download-btn4{
    height:54px;
  }

  .popup-login-btn span,
  .popup-login-btn2 span,
  .popup-login-btn3 span,
  .popup-login-btn4 span,
  .popup-download-btn span,
  .popup-download-btn2 span,
  .popup-download-btn3 span,
  .popup-download-btn4 span{
    font-size:20px !important;
  }

}


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

  .popup-login-card,
  .popup-login-card2,
  .popup-login-card3,
  .popup-login-card4{
    max-width:375px !important;

    /* SAMA DENGAN CSS UTAMA */
    border-radius:5px 5px 30px 30px;
  }

  .popup-login-close,
  .popup-login-close2,
  .popup-login-close3,
  .popup-login-close4{
    padding:7px 11px;
    font-size:22px;
  }

}


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

  .popup-login-card,
  .popup-login-card2,
  .popup-login-card3,
  .popup-login-card4{
    max-width:380px;

    /* SAMA DENGAN CSS UTAMA */
    border-radius:5px 5px 30px 30px;
  }

  .popup-login-close,
  .popup-login-close2,
  .popup-login-close3,
  .popup-login-close4{
    padding:7px 12px;
    font-size:23px;
  }

}


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

  .popup-login-card,
  .popup-login-card2,
  .popup-login-card3,
  .popup-login-card4{
    max-width:390px !important;

    /* SAMA DENGAN CSS UTAMA */
    border-radius:5px 5px 30px 30px;
  }

  .popup-login-close,
  .popup-login-close2,
  .popup-login-close3,
  .popup-login-close4{
    padding:7px 13px;
    font-size:24px;
  }

}
  
  
/* ========================================================= POPUP LIVE ========================================================= */

.popup-live{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:6px;
  background:transparent;
  z-index:99999;
}


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

.popup-live-card{
	
  position:relative;
  
  width:min(92vw,460px);

  height:min(
    calc(100vh - 20px),
    calc((92vw * 16 / 9) + 120px)
  );

  max-width:460px;

  display:flex;
  flex-direction:column;

  border-radius:26px;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      rgba(76,29,149,.75) 0%,
      rgba(124,58,237,.55) 22%,
      rgba(190,24,93,.45) 42%,
      rgba(194,65,12,.55) 65%,
      rgba(180,83,9,.60) 82%,
      rgba(69,10,10,.75) 100%
    );

  backdrop-filter:blur(22px);

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

  border:1px solid rgba(255,215,150,.28);

  box-shadow:
    0 20px 50px rgba(0,0,0,.45),
    0 0 25px rgba(245,158,11,.20),
    0 0 45px rgba(124,58,237,.18),
    inset 0 1px 0 rgba(255,255,255,.20);
}

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

.popup-live-close{

  position:absolute;

  top:0;

  right:0;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:1px 14px;

  min-width:30px;

  min-height:30px;

  background:#ff0000;

  color:#fff;

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

  font-weight:800;
  
  border-left:1px solid #00ffff !important;
  border-bottom:1px solid #00ffff !important;
  border-top:none !important;
  border-right:none !important;
  
  line-height:1;

  border:none;

  border-radius:0 0 0 5px;

  cursor:pointer;

  z-index:999999;
  
  transition:
    background .2s ease,
    transform .2s ease;
	
  text-shadow:
  -1px -1px 0 #000,
   1px -1px 0 #000,
  -1px  1px 0 #000,
   1px  1px 0 #000;
}

.popup-live-close:hover{

  background:#00008B;  /* Dark Blue (biru tua) */
}


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

.popup-live-title{
  flex-shrink:0;

  width:max-content;

  max-width:calc(100% - 20px);

  margin:0 auto;

  padding:2px 6px;

  text-align:center;

  font-size:clamp(20px,1.45vw,26px);

  font-weight:700;

  line-height:1.15;

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

  border-left:1px solid rgba(0,255,255,.75);

  border-right:1px solid rgba(0,255,255,.75);

  border-bottom:1px solid rgba(0,255,255,.75);

  border-top:none;

  border-radius:0 0 12px 12px;
}

/* =========================================================
   TITLE TEXT SHADOW
========================================================= */

.popup-live-title span{
  display:inline-block;

  background:linear-gradient(
    135deg,
    #ff1744,
    #ff3d7f,
    #ff6a00,
    #ffcc33
  );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;

  filter:
    drop-shadow(2px 2px 2px rgba(0,0,0,.95))
    drop-shadow(-2px -2px 2px rgba(0,0,0,.75));
}

/* =========================================================
   MEDIA
========================================================= */

.popup-live-media{
	
  position:relative;
  flex:1;
  min-height:0;
  margin:4px 10px 0;
  overflow:hidden;
}

/* =========================================================
   LOADING
========================================================= */

.popup-live-media-loading{
  position:absolute;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

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

  border-radius:10px;

  z-index:10;

  transition:opacity .25s ease;
}

.popup-live-media-spinner{
  width:34px;

  height:34px;

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

  border-top-color:#39ff14;

  border-radius:50%;

  animation:lpSpin .7s linear infinite;
}

@keyframes lpSpin{
  to{
    transform:rotate(360deg);
  }
}

.popup-live-media.loaded .popup-live-media-loading{
  opacity:0;

  pointer-events:none;
}


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

.popup-live-video{
  display:block;

  width:100%;

  height:100%;

  aspect-ratio:auto;

  object-fit:cover;

  border-radius:12px;

  background:#000;
}

/* =========================================================
   VIEWER
========================================================= */

.popup-live-viewer{
  position:absolute;
  top:5px;
  right:10px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:12px;
  font-weight:700;
  backdrop-filter:blur(2px);
  z-index:6;
}

.popup-live-viewer svg{
  width:16px;
  height:16px;
  flex-shrink:0;
}


/* =========================================================
   LIVE ICON
========================================================= */

.popup-live-live{
  position:absolute;
  top:-20px !important;
  left:-5px !important;

  width:70px;
  height:70px;

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

  z-index:6;
}

/* =========================================================
   CAMERA COLOR
========================================================= */

.popup-live-live-icon{
  width:48px;
  height:48px;

  color:#ff1744;
}

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

.popup-live-svg-live{
  fill:#ff1744;

  font-weight:900;

  animation:TextBlink .8s infinite;
}


/* =========================================================
   LIVE COMMENT
========================================================= */

.popup-live-comment{
	
  position:absolute;

  left:clamp(3px,.35vw,6px);

  bottom:clamp(3px,.35vw,6px);

  width:78%;

  overflow:hidden;

  pointer-events:none;

  z-index:5;
}


/* =========================================================
   COMMENT CONTAINER
========================================================= */

.popup-live-comment-inner{
  display:flex;
  flex-direction:column;
  gap:2px;
}


/* =========================================================
   COMMENT ITEM
========================================================= */

.popup-live-comment-item{
	
  display:inline-flex;
  align-items:center;
  gap:5px;
  width:max-content;
  max-width:100%;

  padding:2px 6px;
	
  background:rgba(0,0,0,.55);
  border-radius:999px;
  color:#fff;
  font-size:clamp(11px,.9vw,14px);
  font-weight:700;
  line-height:1.2;
  backdrop-filter:blur(2px);
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .35s ease,
    transform .35s ease;
}


/* =========================================================
   COMMENT ICON
========================================================= */

.popup-live-comment-item svg{

  width:clamp(15px,1vw,18px);

  height:clamp(15px,1vw,18px);


  flex-shrink:0;
}


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

.popup-live-comment-item span{

  display:block;

  line-height:1.2;
}


/* =========================================================
   COMMENT HIDE ANIMATION
========================================================= */

.popup-live-comment-item.hide{

  opacity:0;

  transform:translateY(-6px);

}

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

.popup-live-button{
  flex-shrink:0;

  width:calc(100% - 20px);

  height:clamp(42px,2.2vw,50px);

  margin:4px 10px 8px;

  border:2px solid rgba(0,255,255,.75);

  border-radius:999px;

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

  box-shadow:
  0 8px 18px rgba(0,0,0,.35),
  0 0 8px rgba(34,197,94,.35),
  0 0 14px rgba(22,163,74,.20),
  inset 0 1px 0 rgba(255,255,255,.12);

  cursor:pointer;

  transition:
    transform .2s ease,
    opacity .2s ease;
}


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

.popup-live-button:hover{
  background:linear-gradient(
  135deg,
  #052e16 0%,
  #064e3b 20%,
  #047857 40%,
  #166534 65%,
  #022c22 100%
  );
}


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

.popup-live-button:active{
  transform:scale(.98);
}


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

.popup-live-button span{
  display:inline-block;

  color:#fff;

  font-size:20px;

  font-weight:900;

  letter-spacing:1px;

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

  animation:TextColor 2s linear infinite;
}


/* =========================================================
   SHOW
========================================================= */

.popup-live.show{
  display:flex;
}

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

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

  .popup-live{
    padding:6px;
  }

  .popup-live-card{
    width:93vw;
    height:min(calc(100vh - 12px),610px);
    border-radius:20px;
  }

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

  .popup-live-title{
    padding:3px 8px;
    font-size:20px;
    line-height:1.1;
  }

  .popup-live-title span{
    padding:2px 10px;
  }

  /* ==========================
     CLOSE
  ========================== */

  .popup-live-close{
    top:0;
    right:0;
    padding:5px 10px;
    min-width:24px;
    min-height:22px;
    font-size:18px;
    line-height:1;
  }

  /* ==========================
     MEDIA
  ========================== */

  .popup-live-media{
    margin:3px 6px 0;
  }

  .popup-live-video{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* ==========================
     LIVE ICON
  ========================== */

  .popup-live-live{
    top:-16px !important;
    width:60px;
    height:60px;
  }

  .popup-live-live-icon{
    width:42px;
    height:42px;
  }

  /* ==========================
     VIEWER
  ========================== */

  .popup-live-viewer{
    top:8px;
    right:8px;
    gap:5px;
    padding:5px 10px;
    font-size:12px;
  }

  .popup-live-viewer svg{
    width:15px;
    height:15px;
  }

  /* ==========================
     LIVE COMMENT
  ========================== */

  .popup-live-comment{
    left:5px;
    bottom:5px;
    width:82%;
  }

  .popup-live-comment-item{
    gap:6px;
    padding:5px 9px 5px 7px;
    font-size:12px;
    line-height:1.2;
  }

  .popup-live-comment-item svg{
    width:18px;
    height:18px;
  }

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

  .popup-live-button{
    height:43px;
    margin:5px 6px 6px;
  }

  .popup-live-button span{
    font-size:21px;
  }
}


/* ===================================================
   HP NORMAL 5" - 5.5"
====================================================== */

@media (min-width:361px) and (max-width:420px){

  .popup-live{
    padding:7px;
  }

  .popup-live-card{
    width:96vw;
    height:min(calc(100vh - 14px),720px);
  }

  .popup-live-title{
    padding:3px 10px;
    font-size:22px;
  }

  .popup-live-title span{
    padding:2px 12px;
  }

  /* ==========================
     CLOSE
  ========================== */

  .popup-live-close{
    top:0;
    right:0;
    padding:6px 12px;
    min-width:25px;
    min-height:23px;
    font-size:19px;
    line-height:1;
  }

  .popup-live-media{
    margin:4px 8px 0;
  }

  .popup-live-video{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .popup-live-live{
    width:64px;
    height:64px;
  }

  .popup-live-live-icon{
    width:44px;
    height:44px;
  }

  .popup-live-viewer{
    font-size:12px;
    padding:5px 10px;
  }

  .popup-live-viewer svg{
    width:15px;
    height:15px;
  }

  .popup-live-comment-item{
    gap:6px;
    padding:5px 9px 5px 7px;
    font-size:12px;
  }

  .popup-live-comment-item svg{
    width:18px;
    height:18px;
  }

  .popup-live-button{
    margin:6px 8px 8px;
    height:45px;
  }

  .popup-live-button span{
    font-size:22px;
  }
}


/* ===================================================
   HP BESAR 6" - 6.5"
====================================================== */

@media (min-width:421px) and (max-width:460px){

  .popup-live{
    padding:8px;
  }

  .popup-live-card{
    width:96vw;
    height:min(calc(100vh - 16px),780px);
  }

  .popup-live-title{
    padding:3px 10px;
    font-size:23px;
  }

  .popup-live-title span{
    padding:2px 13px;
  }

  /* ==========================
     CLOSE
  ========================== */

  .popup-live-close{
    top:0;
    right:0;
    padding:6px 12px;
    min-width:26px;
    min-height:24px;
    font-size:20px;
    line-height:1;
  }

  .popup-live-media{
    margin:4px 9px 0;
  }

  .popup-live-video{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .popup-live-live{
    width:66px;
    height:66px;
  }

  .popup-live-live-icon{
    width:46px;
    height:46px;
  }

  .popup-live-viewer{
    font-size:12px;
    padding:6px 11px;
  }

  .popup-live-viewer svg{
    width:16px;
    height:16px;
  }

  .popup-live-comment-item{
    gap:6px;
    padding:5px 10px 5px 7px;
    font-size:12.5px;
  }

  .popup-live-comment-item svg{
    width:18px;
    height:18px;
  }

  .popup-live-button{
    margin:6px 9px 9px;
    height:46px;
  }

  .popup-live-button span{
    font-size:23px;
  }
}


/* ===================================================
   HP EXTRA BESAR 6.6" - 7"
====================================================== */

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

  .popup-live{
    padding:9px;
  }

  .popup-live-card{
    width:95vw;
    height:min(calc(100vh - 18px),830px);
  }

  .popup-live-title{
    padding:3px 11px;
    font-size:24px;
  }

  .popup-live-title span{
    padding:3px 14px;
  }

  /* ==========================
     CLOSE
  ========================== */

  .popup-live-close{
    top:0;
    right:0;
    padding:7px 13px;
    min-width:27px;
    min-height:24px;
    font-size:20px;
    line-height:1;
  }

  .popup-live-media{
    margin:4px 10px 0;
  }

  .popup-live-video{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .popup-live-live{
    width:68px;
    height:68px;
  }

  .popup-live-live-icon{
    width:47px;
    height:47px;
  }

  .popup-live-viewer{
    font-size:13px;
    padding:6px 11px;
  }

  .popup-live-viewer svg{
    width:16px;
    height:16px;
  }

  .popup-live-comment-item{
    gap:6px;
    padding:5px 10px 5px 8px;
    font-size:13px;
  }

  .popup-live-comment-item svg{
    width:19px;
    height:19px;
  }

  .popup-live-button{
    margin:6px 10px 10px;
    height:47px;
  }

  .popup-live-button span{
    font-size:24px;
  }
}


/* ===================================================
   TABLET
====================================================== */

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

  .popup-live{
    padding:10px;
  }

  .popup-live-card{
    width:min(90vw,560px);
    height:min(calc(100vh - 20px),930px);
  }

  .popup-live-title{
    padding:4px 12px;
    font-size:26px;
  }

  .popup-live-title span{
    padding:3px 16px;
  }

  /* ==========================
     CLOSE
  ========================== */

  .popup-live-close{
    top:0;
    right:0;
    padding:7px 13px;
    min-width:28px;
    min-height:25px;
    font-size:21px;
    line-height:1;
  }

  .popup-live-media{
    margin:5px 10px 0;
  }

  .popup-live-video{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .popup-live-live{
    width:70px;
    height:70px;
  }

  .popup-live-live-icon{
    width:48px;
    height:48px;
  }

  .popup-live-viewer{
    font-size:13px;
    padding:6px 12px;
  }

  .popup-live-viewer svg{
    width:17px;
    height:17px;
  }

  .popup-live-comment-item{
    gap:6px;
    padding:5px 11px 5px 8px;
    font-size:13px;
  }

  .popup-live-comment-item svg{
    width:20px;
    height:20px;
  }

  .popup-live-button{
    margin:7px 10px 10px;
    height:49px;
  }

  .popup-live-button span{
    font-size:25px;
  }
}


/* =========================================================
   BLINK ANIMATION - KEDIP KEDIP
========================================================= */

@keyframes TextBlink{

  0%{
    opacity:1;
  }

  50%{
    opacity:.2;
  }

  100%{
    opacity:1;
  }

}


/* ===============================
   ANIMASI GONTA-GANTI WARNA TEKS
================================== */
@keyframes TextColor{

  0%,100%{
    color:#fff;
  }

  50%{
    color:#FFD700;
  }

  75%{
    color:#FF8C00;
  }

}


/* =================================================================
   🔵 FIX 1: HILANGKAN TAP HIGHLIGHT / KEDIP KLIK / TOUCH EFFECT
   SEMUA CLASS CSS AKTIF
================================================================= */

.top-header,

.top-premium-bar,
.upload-video-btn,
.upload-icon,
.upload-text,
.upload-title,
.upload-subtitle,

.top-search,
.search-icon,
.top-search-suggestions,
.top-search-item,

.profile-btn,
.profile-icon,
.profile-text,

.account-slide-menu,
.account-slide-item,
.account-slide-icon,
.account-slide-text,

.brand-kiri,
.brand-kiri-icon,
.brand-kiri-text,

.brand-kanan,
.brand-kanan-icon,
.brand-kanan-text,

.phone-frame,

.content,

.shorts-card,

.shorts-videos,

.shorts-actions,
.action-item,
.action-item svg,
.action-item span,

.play-button,

.shorts-profile,

.profile-photo,

.profile-info,
.profile-top,

.name,

.verified,
.verified-icon,

.follow-btn,

.tagline,
.tagline-row,
.tagline-text,
.tagline-divider,
.country-flag,

.tagline-action,
.action-divider,
.tagline-svg,

.shorts-caption,

.shorts-nav,
.nav-btn,
.nav-btn svg,


.popup-channel-room,
.popup-channel-head,
.popup-channel-heading,
.popup-channel-close,
.popup-channel-action,
.popup-channel-button,
.popup-channel-label,
.popup-channel-icon,
.popup-channel-separator,
.popup-channel-text,
.popup-channel-room-text,
.popup-room-gradient,


.continue-popup,
.continue-popup2,
.continue-popup3,
.continue-popup-box,
.continue-popup-box2,
.continue-popup-box3,
.continue-popup-close,
.continue-popup-close2,
.continue-popup-close3,
.continue-popup-title,
.continue-popup-title2,
.continue-popup-title3,
.continue-popup-buttons,
.continue-popup-buttons2,
.continue-popup-buttons3,
.continue-popup-action,
.continue-popup-action2,
.continue-popup-action3,
.redirect-popup-login3,


.popup-login,
.popup-login2,
.popup-login3,
.popup-login4,

.popup-login-card,
.popup-login-card2,
.popup-login-card3,
.popup-login-card4,

.popup-login-close,
.popup-login-close2,
.popup-login-close3,
.popup-login-close4,

.popup-login-attention,
.popup-login-attention2,
.popup-login-attention3,
.popup-login-attention4,

.popup-login-attention-text,
.popup-login-attention-text2,
.popup-login-attention-text3,
.popup-login-attention-text4,

.popup-login-title,
.popup-login-title2,
.popup-login-title3,
.popup-login-title4,

.popup-brand,
.popup-brand2,
.popup-brand3,
.popup-brand4,

.popup-brand-text,
.popup-brand-text2,
.popup-brand-text3,
.popup-brand-text4,

.popup-login-actions,
.popup-login-actions2,
.popup-login-actions3,
.popup-login-actions4,

.popup-login-btn,
.popup-login-btn2,
.popup-login-btn3,
.popup-login-btn4,

.popup-download-btn,
.popup-download-btn2,
.popup-download-btn3,
.popup-download-btn4,


.popup-live,
.popup-live-card,
.popup-live-close,
.popup-live-title,

.popup-live-media,
.popup-live-media-loading,
.popup-live-media-spinner,

.popup-live-image-mobile,
.popup-live-image-desktop,

.popup-live-viewer,

.popup-live-live,
.popup-live-live-icon,
.popup-live-svg-live,

.popup-live-comment,
.popup-live-comment-inner,
.popup-live-comment-item,

.popup-live-button,

.bottom-hint,

.desktop-text,
.mobile-text{


    /* 🔥 HAPUS EFEK KEDIP SAAT TAP MOBILE */
    -webkit-tap-highlight-color:transparent !important;


    /* 🔥 HAPUS MENU TEKAN LAMA MOBILE */
    -webkit-touch-callout:none !important;


    /* 🔥 HAPUS BLOK TEXT */
    -webkit-user-select:none !important;
    -moz-user-select:none !important;
    -ms-user-select:none !important;
    user-select:none !important;


    /* 🔥 TOUCH OPTIMASI */
    touch-action:manipulation !important;


    /* 🔥 HAPUS OUTLINE DEFAULT */
    outline:none !important;

}

/* =================================================================
   🔵 FIX 2: HILANGKAN FOCUS OUTLINE / BORDER BROWSER
================================================================= */

.top-header:focus,

.top-premium-bar:focus,
.upload-video-btn:focus,
.upload-icon:focus,
.upload-text:focus,
.upload-title:focus,
.upload-subtitle:focus,

.top-search:focus,
.search-icon:focus,
.top-search-suggestions:focus,
.top-search-item:focus,

.profile-btn:focus,
.profile-icon:focus,
.profile-text:focus,

.account-slide-menu:focus,
.account-slide-item:focus,
.account-slide-icon:focus,
.account-slide-text:focus,

.brand-kiri:focus,
.brand-kiri-icon:focus,
.brand-kiri-text:focus,

.brand-kanan:focus,
.brand-kanan-icon:focus,
.brand-kanan-text:focus,

.phone-frame:focus,

.content:focus,

.shorts-card:focus,

.shorts-videos:focus,

.shorts-actions:focus,
.action-item:focus,

.play-button:focus,

.shorts-profile:focus,

.profile-photo:focus,

.profile-info:focus,
.profile-top:focus,

.name:focus,

.verified:focus,
.verified-icon:focus,

.follow-btn:focus,

.tagline:focus,
.tagline-row:focus,
.tagline-text:focus,
.tagline-divider:focus,
.country-flag:focus,

.tagline-action:focus,
.action-divider:focus,
.tagline-svg:focus,

.shorts-caption:focus,

.shorts-nav:focus,
.nav-btn:focus,

.popup-channel-room:focus,
.popup-channel-head:focus,
.popup-channel-heading:focus,
.popup-channel-close:focus,
.popup-channel-action:focus,
.popup-channel-button:focus,
.popup-channel-label:focus,
.popup-channel-icon:focus,
.popup-channel-separator:focus,
.popup-channel-text:focus,
.popup-channel-room-text:focus,
.popup-room-gradient:focus,

.continue-popup:focus,
.continue-popup2:focus,
.continue-popup3:focus,
.continue-popup-box:focus,
.continue-popup-box2:focus,
.continue-popup-box3:focus,
.continue-popup-close:focus,
.continue-popup-close2:focus,
.continue-popup-close3:focus,
.continue-popup-title:focus,
.continue-popup-title2:focus,
.continue-popup-title3:focus,
.continue-popup-buttons:focus,
.continue-popup-buttons2:focus,
.continue-popup-buttons3:focus,
.continue-popup-action:focus,
.continue-popup-action2:focus,
.continue-popup-action3:focus,
.redirect-popup-login3:focus,

.popup-login:focus,
.popup-login2:focus,
.popup-login3:focus,
.popup-login4:focus,

.popup-login-card:focus,
.popup-login-card2:focus,
.popup-login-card3:focus,
.popup-login-card4:focus,

.popup-login-close:focus,
.popup-login-close2:focus,
.popup-login-close3:focus,
.popup-login-close4:focus,

.popup-login-attention:focus,
.popup-login-attention2:focus,
.popup-login-attention3:focus,
.popup-login-attention4:focus,

.popup-login-attention-text:focus,
.popup-login-attention-text2:focus,
.popup-login-attention-text3:focus,
.popup-login-attention-text4:focus,

.popup-login-title:focus,
.popup-login-title2:focus,
.popup-login-title3:focus,
.popup-login-title4:focus,

.popup-brand:focus,
.popup-brand2:focus,
.popup-brand3:focus,
.popup-brand4:focus,

.popup-brand-text:focus,
.popup-brand-text2:focus,
.popup-brand-text3:focus,
.popup-brand-text4:focus,

.popup-login-actions:focus,
.popup-login-actions2:focus,
.popup-login-actions3:focus,
.popup-login-actions4:focus,

.popup-login-btn:focus,
.popup-login-btn2:focus,
.popup-login-btn3:focus,
.popup-login-btn4:focus,

.popup-download-btn:focus,
.popup-download-btn2:focus,
.popup-download-btn3:focus,
.popup-download-btn4:focus,

.popup-live:focus,
.popup-live-card:focus,
.popup-live-title:focus,
.popup-live-close:focus,
.popup-live-media:focus,
.popup-live-media-loading:focus,
.popup-live-media-spinner:focus,

.popup-live-image-mobile:focus,
.popup-live-image-desktop:focus,

.popup-live-viewer:focus,

.popup-live-live:focus,
.popup-live-live-icon:focus,
.popup-live-svg-live:focus,

.popup-live-comment:focus,
.popup-live-comment-inner:focus,
.popup-live-comment-item:focus,

.popup-live-button:focus,

.bottom-hint:focus,

.desktop-text:focus,
.mobile-text:focus{

    outline:none !important;

    box-shadow:none !important;

}

/* =================================================================
   🔵 FIX 3: HILANGKAN EFEK ACTIVE / CLICK PRESS
================================================================= */

.top-premium-bar:active,
.upload-video-btn:active,
.upload-icon:active,
.upload-text:active,
.upload-title:active,
.upload-subtitle:active,

.top-search:active,
.search-icon:active,
.top-search-suggestions:active,
.top-search-item:active,

.profile-btn:active,
.profile-icon:active,
.profile-text:active,

.account-slide-menu:active,
.account-slide-item:active,
.account-slide-icon:active,
.account-slide-text:active,

.brand-kiri:active,
.brand-kiri-icon:active,
.brand-kiri-text:active,

.brand-kanan:active,
.brand-kanan-icon:active,
.brand-kanan-text:active,

.action-item:active,

.play-button:active,

.profile-photo:active,

.follow-btn:active,

.tagline:active,
.tagline-text:active,
.country-flag:active,
.tagline-svg:active,

.nav-btn:active,

.popup-channel-room:active,
.popup-channel-head:active,
.popup-channel-heading:active,
.popup-channel-close:active,
.popup-channel-action:active,
.popup-channel-button:active,
.popup-channel-label:active,
.popup-channel-icon:active,
.popup-channel-separator:active,
.popup-channel-text:active,
.popup-channel-room-text:active,
.popup-room-gradient:active,

.continue-popup:active,
.continue-popup2:active,
.continue-popup3:active,

.continue-popup-box:active,
.continue-popup-box2:active,
.continue-popup-box3:active,

.continue-popup-close:active,
.continue-popup-close2:active,
.continue-popup-close3:active,

.continue-popup-title:active,
.continue-popup-title2:active,
.continue-popup-title3:active,

.continue-popup-buttons:active,
.continue-popup-buttons2:active,
.continue-popup-buttons3:active,

.continue-popup-action:active,
.continue-popup-action2:active,
.continue-popup-action3:active,

.redirect-popup-login3:active,

.popup-login:active,
.popup-login2:active,
.popup-login3:active,
.popup-login4:active,

.popup-login-card:active,
.popup-login-card2:active,
.popup-login-card3:active,
.popup-login-card4:active,

.popup-login-close:active,
.popup-login-close2:active,
.popup-login-close3:active,
.popup-login-close4:active,

.popup-login-attention:active,
.popup-login-attention2:active,
.popup-login-attention3:active,
.popup-login-attention4:active,

.popup-login-attention-text:active,
.popup-login-attention-text2:active,
.popup-login-attention-text3:active,
.popup-login-attention-text4:active,

.popup-login-title:active,
.popup-login-title2:active,
.popup-login-title3:active,
.popup-login-title4:active,

.popup-brand:active,
.popup-brand2:active,
.popup-brand3:active,
.popup-brand4:active,

.popup-brand-text:active,
.popup-brand-text2:active,
.popup-brand-text3:active,
.popup-brand-text4:active,

.popup-login-actions:active,
.popup-login-actions2:active,
.popup-login-actions3:active,
.popup-login-actions4:active,

.popup-login-btn:active,
.popup-login-btn2:active,
.popup-login-btn3:active,
.popup-login-btn4:active,

.popup-download-btn:active,
.popup-download-btn2:active,
.popup-download-btn3:active,
.popup-download-btn4:active,

.popup-live-close:active,
.popup-live-button:active,

.popup-live-title:active,

.popup-live-image-mobile:active,
.popup-live-image-desktop:active,

.popup-live-viewer:active,

.popup-live-live:active,

.popup-live-comment-item:active{

    outline:none !important;

    box-shadow:none !important;

}


/* =================================================================
   🔵 FIX 4: GLOBAL HILANGKAN TEXT SELECT
   UNTUK UI / REELS / SHORTS
================================================================= */

.top-header,

.top-premium-bar,
.upload-video-btn,
.upload-icon,
.upload-text,
.upload-title,
.upload-subtitle,

.top-search,
.search-icon,
.top-search-suggestions,
.top-search-item,

.profile-btn,
.profile-icon,
.profile-text,

.account-slide-menu,
.account-slide-item,
.account-slide-icon,
.account-slide-text,

.brand-kiri,
.brand-kiri-icon,
.brand-kiri-text,

.brand-kanan,
.brand-kanan-icon,
.brand-kanan-text,

.phone-frame,

.content,

.shorts-card,

.shorts-videos,

.shorts-actions,
.action-item,

.play-button,

.shorts-profile,

.profile-photo,

.profile-info,
.profile-top,

.name,

.verified,
.verified-icon,

.follow-btn,

.tagline,
.tagline-row,
.tagline-text,
.tagline-divider,
.country-flag,

.tagline-action,
.action-divider,
.tagline-svg,

.shorts-caption,

.shorts-nav,
.nav-btn,

.popup-channel-room,
.popup-channel-head,
.popup-channel-heading,
.popup-channel-close,
.popup-channel-action,
.popup-channel-button,
.popup-channel-label,
.popup-channel-icon,
.popup-channel-separator,
.popup-channel-text,
.popup-channel-room-text,
.popup-room-gradient,

.continue-popup,
.continue-popup2,
.continue-popup3,

.continue-popup-box,
.continue-popup-box2,
.continue-popup-box3,

.continue-popup-close,
.continue-popup-close2,
.continue-popup-close3,

.continue-popup-title,
.continue-popup-title2,
.continue-popup-title3,

.continue-popup-buttons,
.continue-popup-buttons2,
.continue-popup-buttons3,

.continue-popup-action,
.continue-popup-action2,
.continue-popup-action3,

.redirect-popup-login3,

.popup-login,
.popup-login2,
.popup-login3,
.popup-login4,

.popup-login-card,
.popup-login-card2,
.popup-login-card3,
.popup-login-card4,

.popup-login-close,
.popup-login-close2,
.popup-login-close3,
.popup-login-close4,

.popup-login-attention,
.popup-login-attention2,
.popup-login-attention3,
.popup-login-attention4,

.popup-login-attention-text,
.popup-login-attention-text2,
.popup-login-attention-text3,
.popup-login-attention-text4,

.popup-login-title,
.popup-login-title2,
.popup-login-title3,
.popup-login-title4,

.popup-brand,
.popup-brand2,
.popup-brand3,
.popup-brand4,

.popup-brand-text,
.popup-brand-text2,
.popup-brand-text3,
.popup-brand-text4,

.popup-login-actions,
.popup-login-actions2,
.popup-login-actions3,
.popup-login-actions4,

.popup-login-btn,
.popup-login-btn2,
.popup-login-btn3,
.popup-login-btn4,

.popup-download-btn,
.popup-download-btn2,
.popup-download-btn3,
.popup-download-btn4,

.popup-live,
.popup-live-card,
.popup-live-close,
.popup-live-title,

.popup-live-media,
.popup-live-media-loading,
.popup-live-media-spinner,

.popup-live-image-mobile,
.popup-live-image-desktop,

.popup-live-viewer,

.popup-live-live,
.popup-live-live-icon,
.popup-live-svg-live,

.popup-live-comment,
.popup-live-comment-inner,
.popup-live-comment-item,

.popup-live-button,

.bottom-hint,

.desktop-text,
.mobile-text{

    -webkit-user-select:none !important;

    -moz-user-select:none !important;

    -ms-user-select:none !important;

    user-select:none !important;

}


/* MATIKAN NAVBAR BLOGGER */

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