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

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

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

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

body{
  position:relative;

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

  overflow:hidden;

  background:#000;
}


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

body::before{

  content:"";

  position:fixed;

  inset:0;

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

  z-index:-10;
}


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

.phone-frame{

  position:relative;

  aspect-ratio:9 / 16 !important;

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

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

  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:2px;

  isolation:isolate;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

.phone-frame::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  radial-gradient(circle at top center, rgba(126,87,255,.18), transparent 28%),
  linear-gradient(180deg,#030305 0%,#050507 50%,#020203 100%);

  z-index:-1;
}


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

.content{

  position:relative;

  width:100%;
  height:100%;

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

  padding:clamp(14px,2vw,22px);

  z-index:5;

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

  color:#fff;
}


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

.app-header{

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

  width:100%;
}


/* =========================================================
   MENU KIRI
========================================================= */

.header-menu{

  width:42px;
  height:42px;

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

  color:#fff;
  font-size:22px;
  font-weight:bold;
  cursor:pointer;

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

  border: 2px solid rgba(255, 255, 255, 0.12);

  border-radius:14px;

  backdrop-filter:blur(12px);
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar-menu{

  position:fixed;
  inset:0;

  display:block; /* FIX: jangan none supaya animasi jalan */

  pointer-events:none; /* nonaktif saat close */

  z-index:999;
}

.sidebar-menu.active{
  pointer-events:auto;
}

.sidebar-overlay{

  position:absolute;
  inset:0;

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

  opacity:0;
  transition:0.3s ease;
}

.sidebar-menu.active .sidebar-overlay{
  opacity:1;
}

.sidebar-panel{

  position:absolute;
  left:0;
  top:0;

  width:82%;
  max-width:340px;
  height:100%;

  background:#050507;

  padding:22px 16px;

  border-right:2px solid rgba(255,255,255,.12);

  display:flex;
  flex-direction:column;
  gap:12px;

  transform:translateX(-100%);
  transition:0.35s ease;
}

.sidebar-menu.active .sidebar-panel{
  transform:translateX(0);
}


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

.sb-top{

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

.sb-login{
  cursor:pointer;
  flex:1;

  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;
  letter-spacing:0.5px;
  color:#fff;
  font-size:16px;
  font-weight:700;

  border-radius:18px;

  background:linear-gradient(135deg,#8b39ff,#b95cff);

  box-shadow:0 0 22px rgba(155,92,255,.35);

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

  position:relative;
  overflow:hidden;
}

.sb-login::after{
  content:"";
  position:absolute;
  top:0;
  left:-70%;

  width:45%;
  height:100%;

  background:linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.9) 50%,
    rgba(255,255,255,0) 65%,
    transparent 100%
  );

  transform:skewX(-20deg);

  animation:goldSlash 1s ease-in-out infinite;

  pointer-events:none;
}

.sb-login:hover{
  transform:scale(1.02);
  box-shadow:
    0 6px 18px rgba(177,76,255,.45),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.sb-close{

  width:48px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius:16px;

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

  cursor:pointer;
}

.sb-close svg{
  width:22px;
  height:22px;
  stroke:#fff;
  stroke-width:2.5;
  fill:none;
}

.sb-close:hover{
  transform:scale(1.02);
}


/* =========================================================
   SCROLL
========================================================= */

.sidebar-scroll{

  flex:1;

  overflow-y:auto;

  display:flex;
  flex-direction:column;
  gap:6px;

  max-height:40vh !important;
}


/* SCROLLBAR */

.sidebar-scroll::-webkit-scrollbar {
  width: 4px;
}

.sidebar-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: #A855F7;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: #C084FC;
}

.sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: #A855F7 rgba(0, 0, 0, 0.35);
}



/* MENU ITEM */

.sidebar-item{
  padding:6px 16px;
  letter-spacing:0.5px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  color:#fff;
  cursor:pointer;
  font-size:15px;
}

/* HOVER SAAT KURSOR DI TOMBOL */
.sidebar-item:hover {
  background:rgba(255,255,255,.07) !important;
}


/* =========================================================
   GARIS PEMBATAS
========================================================= */

.garis-pembatas{

  width:100%;
  height:1px;

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

  border-radius:999px;

  margin-top:-8px !important;
  margin-bottom:-8px !important;

  flex-shrink:0;
}


/* =========================================================
   RECENT INTRUKSI
========================================================= */

.recent-intruksi{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:flex-start;

  gap:8px;

  padding:12px 16px;

  border-radius:18px;

  background:rgba(140, 70, 255, .10);

  color:#dcbaff;
}

.recent-text{
  font-size:14px;
  line-height:1;
  letter-spacing:0.5px;
}

.recent-icon{
  font-size:14px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}


/* =========================================================
   CARD PLUS (FIX BOTTOM ALWAYS STICK)
========================================================= */

.sidebar-bottom{
  margin-top:auto;
  flex-shrink:0;
}

.sidebar-plus-card{
  margin-top:clamp(8px,1vw,12px);

  background:rgba(10,10,16,.95);

  border:2px solid rgba(140,70,255,.35);

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

  padding:clamp(8px,1.2vw,10px);

  box-shadow:0 0 clamp(18px,2vw,28px) rgba(140,70,255,.18);
}

.sidebar-plus-top{
  display:flex;
  align-items:center;
  gap:clamp(8px,1vw,10px);

  margin-bottom:clamp(12px,1.8vw,18px);
}

.sidebar-plus-title{
  color:#fff;
  font-size:clamp(14px,1.3vw,18px);
  font-weight:bold;
}

.sidebar-active-badge{
  background:rgba(140,70,255,.18);

  color:#cfa8ff;
  font-size:clamp(10px,0.9vw,12px);
  font-weight:bold;
  padding:clamp(3px,0.5vw,4px) clamp(9px,1.4vw,12px);

  border-radius:999px;
}

.sidebar-plus-body{
  display:flex;
  gap:clamp(8px,1vw,10px);
  align-items:center;
}

.sidebar-plus-icon{
  width:clamp(64px,7vw,92px);
  height:clamp(64px,7vw,92px);

  border-radius:50%;

  background:radial-gradient(
    circle at 30% 25%,
    #9b5cff 0%,
    #7a34ff 55%,
    #5414d8 100%
  );

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

  flex-shrink:0;
  aspect-ratio:1/1;
  overflow:hidden;
}

.sidebar-plus-icon img{
  width:clamp(56px,6.5vw,82px);
  height:clamp(56px,6.5vw,82px);
  object-fit:contain;
  display:block;
  cursor:pointer;
  transition:transform .6s ease;
}

/* HOVER ICON */
.sidebar-plus-icon img:hover{
  transform:rotate(90deg);
}

.sidebar-plus-text{
  color:#fff;
  font-weight:bold;
  font-size:clamp(11px,1vw,14px);
  line-height:clamp(1.4,1.4vw,1.5);
}


/* MENU "MASUK" KANAN */

.header-login{

  width:70px;
  height:42px;
  letter-spacing:0.5px;
  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;

  font-size:14px;
  font-weight:bold;

  background:linear-gradient(
    135deg,
    #b14cff,
    #8a2cff
  );

  border-radius:14px;

  cursor:pointer;

  flex-shrink:0;

  white-space:nowrap;

  box-sizing:border-box;

  box-shadow:
    0 4px 14px rgba(177,76,255,.35),
    inset 0 1px 0 rgba(255,255,255,.25);

  transition:.25s ease;
  
  /* Shadow Hitam Elegant (LEBIH JELAS, LEBIH TEBAL, LEBIH TERDEFINISI) */
    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;
}

.header-login:hover{

  transform:scale(1.05);
  box-shadow:
    0 6px 18px rgba(177,76,255,.45),
    inset 0 1px 0 rgba(255,255,255,.35);
}


/* TITLE TENGAH */
.header-title{

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  letter-spacing:0.5px;
  font-size:20px;
  font-weight:bold;
  flex:1;
  text-align:center;
}

/* ICON */
.header-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}

.header-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  cursor:pointer;
  transition:transform .6s ease;
}

/* HOVER ICON */
.header-icon img:hover{
  transform:rotate(90deg);
}

/* TITLE PLUS */
.plus-badge{
  background: linear-gradient(135deg,
    #fff6c2 0%,
    #ffd84d 35%,
    #f6c935 55%,
    #ffea7a 75%,
    #e6b800 100%
  );

  box-shadow:
    0 0 10px rgba(255, 215, 0, 0.35),
    0 0 25px rgba(255, 215, 0, 0.20),
    inset 0 1px 2px rgba(255, 255, 255, 0.25);

  color:#000;
  font-size:13px;
  font-weight:bold;
  padding:4px 10px;
  border-radius:999px;
  position:relative;
  overflow:hidden;
}

/* SLASH KILAU DI DALAM BACKGROUND */
.plus-badge::before{
  content:"";
  position:absolute;
  top:0;
  left:-70%;
  width:45%;
  height:100%;

  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0.9) 50%,
    rgba(255,255,255,0) 65%,
    transparent 100%
  );

  transform:skewX(-20deg);
  animation: goldSlash 1s ease-in-out infinite;
  pointer-events:none;
}

@keyframes goldSlash{
  0%{
    left:-70%;
    opacity:0;
  }

  20%{
    opacity:1;
  }

  60%{
    opacity:0.9;
  }

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


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

.plus-card{
 
  margin-top:clamp(8px,2vw,12px);
  margin-bottom:4px;
  width:100%;

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

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

  border-radius:22px;

  background:rgba(14,14,20,.95);

  border:1px solid rgba(152,92,255,.55);

  box-shadow:0 0 30px rgba(133,81,255,.10);
}

.plus-left{

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

.sparkle{

  font-size:32px;
  color:#a26cff;
}

.plus-main{

  font-size:18px;
  font-weight:bold;
}

.active-badge{

  display:inline-block;

  margin-left:8px;
  letter-spacing:0.5px;
  padding:4px 9px;

  border-radius:999px;

  font-size:11px;

  background:rgba(162,108,255,.18);

  color:#d3b6ff;
}

.plus-sub{

  margin-top:4px;
  font-size:13px;
  letter-spacing:0.5px;
  color:rgba(255,255,255,.70);
}

.arrow{

  font-size:22px;

  color:rgba(255,255,255,.55);
}


/* =========================================================
   HERO CENTER FIXED RAPIH
========================================================= */

.hero-center{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin-bottom:4px;
  gap:clamp(14px,3vw,22px);
  width:100%;
}

.hero-title{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:clamp(20px,4vw,28px);
  font-weight:bold;
  text-align:center;
}

.hero-title svg{
  width:28px;
  height:28px;

  flex-shrink:0;

  display:block;

  stroke:#9d68ff;
  fill:none;
  stroke-width:2;
}

.hero-title span{
  display:flex;
  align-items:center;
}


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

.hero-actions{
  width:100%;
  display:grid;
  letter-spacing:0.5px;
  grid-template-columns:repeat(2,1fr);

  gap:clamp(5px,2vw,8px);
}

.hero-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  
  min-height:48px;

  padding:clamp(4px,2vw,8px);

  border-radius:18px;

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

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

  color:#fff;

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

  text-align:center;

  cursor:pointer;
}

/* HOVER SAAT KURSOR DI TOMBOL */
.hero-btn:hover {
  background:rgba(255,255,255,.07) !important;
  transform:scale(1.02) !important;
}

/* =========================================================
   FIX HERO HIDE TANPA GESER LAYOUT
========================================================= */
.hero-center.hide-process{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
flex:1 !important;
}


/* ====================== LOADING PERINTAH USER ====================== */
.send-loading{
position:absolute;

/* 🔥 meniru layout fixed di bawah plus-card */
top:160px;
left:5px;

/* tetap sistem kamu (bukan display none) */
opacity:0;
visibility:hidden;
pointer-events:none;

z-index:99998;
width:auto;
max-width:90%;
}

/* SHOW */
.send-loading.show{
opacity:1;
visibility:visible;
pointer-events:auto;

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

/* STOP */
.send-loading.stopped{
opacity:0;
visibility:hidden;
pointer-events:none;
}

/* BOX */
.loading-wrap{
display:flex;
align-items:center;
justify-content:flex-start;
gap:16px;

/* mengikuti layout stabil */
min-width:340px;

background:rgba(15,23,42,.92);
padding:18px 24px;

border-radius:18px;
border:2px solid rgba(0,255,255,.25);

backdrop-filter:blur(14px);

box-shadow:0 18px 45px rgba(0,0,0,.45);
}

/* SPINNER */
.loading-spinner{
width:28px;
height:28px;

border:4px solid rgba(255,255,255,.15);
border-top:4px solid #00e5ff;

border-radius:50%;
animation:spinSend .8s linear infinite;

flex-shrink:0;
}

@keyframes spinSend{
100%{
transform:rotate(360deg);
}
}

/* TEXT */
.loading-text{
display:flex;
align-items:center;

color:#fff;
font-size:16px;
font-weight:bold;

white-space:nowrap;
line-height:1;
}

/* DOTS (ONLY DOT ANIMATION) */
.dots{
display:inline-block;
width:24px;
text-align:left;
margin-left:2px;
}

/* hanya titik yang berubah */
.dots::after{
content:"";
display:inline-block;
animation:loadingDots 1.2s steps(4,end) infinite;
}

@keyframes loadingDots{
0%   { content:""; }
25%  { content:"."; }
50%  { content:".."; }
75%  { content:"..."; }
100% { content:"...."; }
}


/* =========================================================
   FOOTER NOTE
========================================================= */

.footer-note{

  text-align:center;

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

  color:rgba(255,255,255,.82);

  margin-bottom:8px;
}


/* =========================================================
   INPUT PANEL
========================================================= */

.input-panel{
  
  width:100%;

  background:rgba(24,24,30,.96);

  border-radius:30px;

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

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

  backdrop-filter:blur(18px);

  box-shadow:0 18px 45px rgba(0,0,0,.45);
}


/* =========================================================
   KOLOM KETIK FIX SESUAI CHATGPT
========================================================= */

.input-top{

  display:flex;
  align-items:center;
  gap:10px;

  width:100%;
  
  margin-bottom:14px;
}

.text-input{

  flex:1;

  min-width:0;

  height:48px;

  border:none;
  outline:none;
  letter-spacing:0.5px;
  background:transparent;

  border-radius:999px;

  padding:0 16px;

  color:#fff;

  font-size:15px;

  border:none;

  box-sizing:border-box;
}

.text-input::placeholder{

  color:rgba(255,255,255,.72);
}


/* =========================================================
   ICON FIX SESUAI GAMBAR
========================================================= */

.mic-btn,
.send-btn{
  cursor:pointer;
  width:42px;
  height:42px;

  min-width:42px;
  min-height:42px;

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

  flex-shrink:0;

  box-sizing:border-box;
}


/* MIC */
.mic-btn{
  background:transparent;
  border-radius:50%;
  border:none;
}

.mic-btn:hover{ 
  background:#3B82F6 !important;
  border:2px solid #39ff14 !important; /* hijau menyala */ 
  box-shadow: 0 0 3px #00ff00, 
              0 0 6px #00ff00 !important;
}

.mic-btn svg{

  width:28px;
  height:28px;

  stroke:#ffffff;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;

  fill:none;
}


/* SEND */

.send-btn{

  background:#ffffff;

  border-radius:50%;

  color:#000;

  box-shadow:0 2px 8px rgba(255,255,255,.12);
}

.send-btn svg{

  width:38px;
  height:38px;

  stroke:#000;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;

  fill:none;
}

.send-btn svg:hover{ 
  transform:scale(1.2);
}

/* ====================== WARNING INPUT - JIKA TEKS KOSONG DI KOLOM PERINTAH ====================== */
.prompt-warning{
position:absolute;
bottom:100%;
left:50%;
transform:translateX(-50%) translateY(10px);
background:#ef4444;
color:#fff;
padding:10px 14px;
border-radius:14px;
font-size:14px;
letter-spacing:0.6px;
font-weight:bold;
opacity:0;
visibility:hidden;
transition:.35s;
z-index:99999;
white-space:nowrap;
border:3px solid blue;
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;
}

.prompt-warning.show{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(-8px);
}


/* ====================== WARNING INPUT - JIKA TEKS TIDAK KOMPLIT DI KOLOM PERINTAH ====================== */
.completext-warning{
position:absolute;
bottom:100%;
left:50%;
transform:translateX(-50%) translateY(10px);
background:#ef4444;
color:#fff;
padding:10px 14px;
border-radius:14px;
font-size:14px;
letter-spacing:0.6px;
font-weight:bold;
opacity:0;
visibility:hidden;
transition:.35s;
z-index:99999;
white-space:nowrap;
border:3px solid blue;
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;
}

.completext-warning.show{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(-8px);
}


/* =========================================================
   TOOLS
========================================================= */

.bottom-tools{

  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:8px;
}

.tool-btn{
  cursor:pointer;
  padding:8px 8px;

  border-radius:999px;

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

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

  text-align:center;
 
  letter-spacing:0.5px;
  
  font-size:clamp(10px,1.7vw,14px);

  color:#fff;
}

.tool-btn:hover{ 
  background:#3B82F6 !important;
  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;
}

/* =========================================================
   POPUP
========================================================= */

.more-popup{

  position:absolute;

  bottom:105px;
  right:16px;

  width:300px;

  display:none;
  flex-direction:column;

  gap:10px;

  background:#121218;

  border:1px solid rgba(157,104,255,.18);

  border-radius:20px;

  padding:6px;

  z-index:9999;

  max-height:320px;
  overflow-y:auto;
  overflow-x:hidden;
}

.more-popup.active{
  display:flex;
}

/* ITEM */
.popup-item{

  display:flex;
  align-items:center;

  gap:10px;

  padding:12px;

  border-radius:14px;

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

  font-size:14px;

  color:#fff;

  cursor:pointer;

  transition:.2s ease;
}

.popup-item:hover{
  background:rgba(255,255,255,.07);
  transform:translateX(-2px);
}

/* ICON */
.popup-icon{

  width:20px;
  height:20px;

  flex-shrink:0;

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

  overflow:hidden;
  border-radius:50%;
}

.popup-icon img{

  width:100%;
  height:100%;

  display:block;

  object-fit:contain !important;
}

/* =========================================================
   SCROLLBAR KHUSUS POPUP (AMAN + TIDAK TABRAKAN GLOBAL)
========================================================= */

.more-popup::-webkit-scrollbar {
  width: 4px;
}

.more-popup::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
}

.more-popup::-webkit-scrollbar-thumb {
  background: #A855F7;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.more-popup::-webkit-scrollbar-thumb:hover {
  background: #C084FC;
}

/* Firefox */
.more-popup {
  scrollbar-width: thin;
  scrollbar-color: #A855F7 rgba(0, 0, 0, 0.35);
}


/* =========================================================
   DISCLAIMER
========================================================= */

.disclaimer{

  text-align:center;

  font-size:11px;

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

  margin-top:10px;
}


/* =========================================================
   POP UP DOWNLOAD APLIKASI SAAT USER KEMBALI DARI REDIRECT
============================================================ */
.pop-up-download{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,40px);
width:88%;
max-width:340px;
background:linear-gradient(145deg,#111827,#1e293b);
border:2px solid rgba(0,255,255,.25);
border-radius:22px;
padding:22px 18px 18px;
box-shadow:0 18px 45px rgba(0,0,0,.45);
z-index:99999;
opacity:0;
visibility:hidden;
transition:.45s ease;
backdrop-filter:blur(16px);
}

.pop-up-download.show{
opacity:1;
visibility:visible;
transform:translate(-50%,-50%);
animation:popupBounce .5s ease;
}

@keyframes popupBounce{
0%{transform:translate(-50%,-35%) scale(.9);}
60%{transform:translate(-50%,-53%) scale(1.02);}
100%{transform:translate(-50%,-50%) scale(1);}
}

.download-badge{
position:absolute;
top:10px;
right:12px;
font-size:12px;
background:#00e5ff;
color:#FFD700;
padding:4px 10px;
border-radius:999px;
font-weight:bold;

/* Shadow Hitam Elegant (LEBIH JELAS, LEBIH TEBAL, LEBIH TERDEFINISI) */
    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;
}

.download-text{
color:#fff;
font-size:18px;
font-weight:bold;
line-height:1.5;
margin-top:18px;
margin-bottom:18px;
text-align:center;
}

.gold-plus{
position:relative;
display:inline-block;
padding:1px 8px !important;
border-radius:999px;
overflow:hidden;

background:linear-gradient(135deg,
#fff6c2 0%,
#ffd84d 35%,
#f6c935 55%,
#ffea7a 75%,
#e6b800 100%
);

box-shadow:
0 0 10px rgba(255,215,0,.35),
0 0 25px rgba(255,215,0,.20),
inset 0 1px 2px rgba(255,255,255,.25);

color:#000;
font-size:12px;
font-weight:bold;
line-height:1.5;
vertical-align:middle;
}

.gold-plus::after{
content:"";
position:absolute;
top:0;
left:-70%;
width:45%;
height:100%;

background:linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,0) 35%,
rgba(255,255,255,.9) 50%,
rgba(255,255,255,0) 65%,
transparent 100%
);

transform:skewX(-20deg);
animation:goldSlash 1s ease-in-out infinite;
pointer-events:none;
}

.download-actions{
display:flex;
gap:12px;
}

.download-actions button{
flex:1;
border:none;
padding:10px 0;
border-radius:14px;
font-weight:bold;
font-size:18px;
cursor:pointer;
transition:.25s;
}

.download-later{
background:#334155;
color:#fff;
}

.download-now{
position:relative;
overflow:hidden;
background:linear-gradient(135deg,#00e5ff,#00b8ff);
color:green;
box-shadow:0 8px 22px rgba(0,229,255,.35);
}

.download-now::after{
content:"";
position:absolute;
top:0;
left:-70%;
width:45%;
height:100%;

background:linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,0) 35%,
rgba(255,255,255,.9) 50%,
rgba(255,255,255,0) 65%,
transparent 100%
);

transform:skewX(-20deg);
animation:goldSlash 1s ease-in-out infinite;
pointer-events:none;
}

.download-now:hover{
transform:scale(1.04);
}


/* ===============================================
   POP UP NIKMATI FITUR PREMIUM TANPA IKLAN
================================================== */
.popup-bebas-iklan{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,40px);
width:88%;
max-width:340px;
background:linear-gradient(145deg,#111827,#1e293b);
border:2px solid rgba(0,255,255,.25);
border-radius:22px;
padding:22px 18px 18px;
box-shadow:0 18px 45px rgba(0,0,0,.45);
z-index:99999;
opacity:0;
visibility:hidden;
transition:.45s ease;
backdrop-filter:blur(16px);
}

.popup-bebas-iklan.show{
opacity:1;
visibility:visible;
transform:translate(-50%,-50%);
animation:popupBounce .5s ease;
}

@keyframes popupBounce{
0%{transform:translate(-50%,-35%) scale(.9);}
60%{transform:translate(-50%,-53%) scale(1.02);}
100%{transform:translate(-50%,-50%) scale(1);}
}

.label-badge{
position:absolute;
top:10px;
right:12px;
font-size:12px;
background:#00e5ff;
color:#FFD700;
padding:4px 10px;
border-radius:999px;
font-weight:bold;
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;
}

.bebas-iklan-text{
color:#fff;
font-size:18px;
font-weight:bold;
line-height:1.5;
margin-top:18px;
margin-bottom:18px;
text-align:center;
}

.gold-plus2{
position:relative;
display:inline-block;
padding:1px 8px !important;
border-radius:999px;
overflow:hidden;
background:linear-gradient(135deg,
#fff6c2 0%,
#ffd84d 35%,
#f6c935 55%,
#ffea7a 75%,
#e6b800 100%);
box-shadow:
0 0 10px rgba(255,215,0,.35),
0 0 25px rgba(255,215,0,.20),
inset 0 1px 2px rgba(255,255,255,.25);
color:#000;
font-size:12px;
font-weight:bold;
line-height:1.5;
vertical-align:middle;
}

.gold-plus2::after{
content:"";
position:absolute;
top:0;
left:-70%;
width:45%;
height:100%;
background:linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,0) 35%,
rgba(255,255,255,.9) 50%,
rgba(255,255,255,0) 65%,
transparent 100%);
transform:skewX(-20deg);
animation:goldSlash 1s ease-in-out infinite;
pointer-events:none;
}

.bebas-iklan-actions{
display:flex;
gap:12px;
}

.bebas-iklan-actions button{
flex:1;
border:none;
padding:10px 0;
border-radius:14px;
font-weight:bold;
font-size:18px;
cursor:pointer;
transition:.25s;
}

.lewati-iklan{
background:#334155;
color:#fff;
}

.signup-app{
position:relative;
overflow:hidden;
background:linear-gradient(135deg,#00e5ff,#00b8ff);
color:purple;
box-shadow:0 8px 22px rgba(0,229,255,.35);
}

.signup-app::after{
content:"";
position:absolute;
top:0;
left:-70%;
width:45%;
height:100%;
background:linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,0) 35%,
rgba(255,255,255,.9) 50%,
rgba(255,255,255,0) 65%,
transparent 100%);
transform:skewX(-20deg);
animation:goldSlash 1s ease-in-out infinite;
pointer-events:none;
}

.signup-app:hover{
transform:scale(1.04);
}

/* ===============================================
   POP UP WAJIB SIGN UP / LOG IN TERLEBIH DAHULU
================================================== */
.popup-login{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,40px);
width:88%;
max-width:340px;
background:linear-gradient(145deg,#111827,#1e293b);
border:2px solid rgba(0,255,255,.25);
border-radius:22px;
padding:22px 18px 18px;
box-shadow:0 18px 45px rgba(0,0,0,.45);
z-index:99999;
opacity:0;
visibility:hidden;
transition:.45s ease;
backdrop-filter:blur(16px);
}

.popup-login.show{
opacity:1;
visibility:visible;
transform:translate(-50%,-50%);
animation:popupBounce3 .5s ease;
}

@keyframes popupBounce3{
0%{transform:translate(-50%,-35%) scale(.9);}
60%{transform:translate(-50%,-53%) scale(1.02);}
100%{transform:translate(-50%,-50%) scale(1);}
}

.label-login3{
position:absolute;
top:10px;
right:12px;
font-size:12px;
background:#00e5ff;
color:#FFD700;
padding:4px 10px;
border-radius:999px;
font-weight:bold;
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;
}

.login3-text{
color:#fff;
font-size:18px;
font-weight:bold;
line-height:1.5;
margin-top:18px;
margin-bottom:18px;
text-align:center;
}


.popup-login-actions{
display:flex;
gap:12px;
}

.popup-login-actions button{
flex:1;
border:none;
padding:10px 0;
border-radius:14px;
font-weight:bold;
font-size:18px;
cursor:pointer;
transition:.25s;
}

.abaikan-popup{
background:#334155;
color:#fff;
}

.signup-app{
position:relative;
overflow:hidden;
background:linear-gradient(135deg,#00e5ff,#00b8ff);
color:green;
box-shadow:0 8px 22px rgba(0,229,255,.35);
}

.signup-app::after{
content:"";
position:absolute;
top:0;
left:-70%;
width:45%;
height:100%;
background:linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,0) 35%,
rgba(255,255,255,.9) 50%,
rgba(255,255,255,0) 65%,
transparent 100%);
transform:skewX(-20deg);
animation:goldSlash3 1s ease-in-out infinite;
pointer-events:none;
}

.signup-app:hover{
transform:scale(1.04);
}


/* ==============================================
   🔵 FIX: HILANGKAN TAP-HIGHLIGHT / KEDIP KLIK
================================================= */
.header-menu,
.sb-login,
.sb-close,
.sidebar-item,
.header-login,
.hero-center,
.hero-actions,
.hero-btn,
.input-top,
.mic-btn,
.send-btn,
.tool-btn,
.popup-item,
.download-actions,
.header-icon,
.header-icon img,
.sidebar-plus-icon,
.sidebar-plus-icon img {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  user-select: none !important;
}