/* =================================================
   🔴 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:2px solid transparent;

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

  border-radius:2px;

  isolation:isolate;
}

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

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

  .phone-frame{
    max-width: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;

  cursor:pointer;

  flex-shrink:0;
}


/* MENU "MASUK" KANAN */

.header-login{

  width:70px;
  height:42px;

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

  color:#fff;

  font-size:13px;
  font-weight:700;

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

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

  font-size:18px;
  font-weight:700;

  flex:1;

  text-align:center;
}

.plus-badge{

  background:#f6c935;
  color:#000;

  font-size:11px;
  font-weight:700;

  padding:4px 10px;

  border-radius:999px;
}


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

.plus-card{

  margin-top:clamp(10px,2vw,14px);

  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;

  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;

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

  width:100%;
}

.hero-title{

  width:100%;

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

  gap:12px;

  font-size:clamp(20px,4vw,28px);
  font-weight:700;

  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;

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

  gap:clamp(10px,2vw,14px);
}

.hero-btn{

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

  min-height:48px;

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

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


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

.footer-note{

  text-align:center;

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

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

  margin-bottom:14px;
}


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

  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{

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

.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:34px;
  height:34px;

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

  fill:none;
}


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

.bottom-tools{

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

  gap:8px;
}

.tool-btn{

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


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

.more-popup{

  position:absolute;

  bottom:130px;
  right:16px;

  width:260px;

  display:none;
  flex-direction:column;

  gap:10px;

  background:#121218;

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

  border-radius:20px;

  padding:14px;
}

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

.popup-item{

  padding:12px;

  border-radius:14px;

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

  font-size:14px;
}


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

.disclaimer{

  text-align:center;

  font-size:11px;

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

  margin-top:10px;
}