/* ===== Reset & base ===== */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
}

body{
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ===== Background seperti contoh (lebih terang) ===== */
.bg-app{
  min-height:100vh;
  background:
    radial-gradient(circle at 0% 0%, rgba(244,114,182,0.22) 0, transparent 45%),
    radial-gradient(circle at 100% 0%, rgba(56,189,248,0.3) 0, transparent 48%),
    radial-gradient(circle at 0% 100%, rgba(251,146,60,0.25) 0, transparent 45%),
    linear-gradient(135deg,#1e293b,#0f172a 35%,#0b3a4a 70%,#0b7285);
  color:#e5e7eb;
}

/* ===== Cards / glass (kotak) ===== */
.glass{
  background:linear-gradient(135deg,rgba(255,255,255,0.98),rgba(248,250,252,0.96));
  border-radius:18px;
  border:1px solid rgba(148,163,184,0.5);
  box-shadow:0 28px 80px rgba(15,23,42,0.55);
  max-width:100%;
  overflow:hidden;
}

.card{
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,0.97),rgba(241,245,249,0.96));
  box-shadow:0 22px 60px rgba(15,23,42,0.6);
  border:1px solid rgba(148,163,184,0.55);
  max-width:100%;
  overflow:hidden;
}

.card-inner{
  border-radius:14px;
  border:1px dashed rgba(148,163,184,0.7);
  background:radial-gradient(circle at 0% 0%,rgba(129,140,248,0.06),transparent 55%),
             radial-gradient(circle at 100% 100%,rgba(45,212,191,0.07),transparent 55%),
             rgba(248,250,252,0.98);
}

/* Strip khusus upload ZIP */
.zip-strip{
  background:
    radial-gradient(circle at 0% 0%, rgba(129,140,248,0.18) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(45,212,191,0.2) 0, transparent 55%),
    rgba(240,249,255,0.92);
  border:1px solid rgba(191,219,254,0.9);
}

/* ===== Buttons ===== */
.btn-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  border-radius:999px;
  padding:.6rem 1.6rem;
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
  background:linear-gradient(135deg,#4f46e5,#6366f1,#0ea5e9);
  color:#f9fafb;
  box-shadow:0 16px 40px rgba(59,130,246,.55);
  border:none;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

.btn-cta:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:0 22px 55px rgba(59,130,246,.75);
}

.btn-cta:active{
  transform:translateY(0);
  box-shadow:0 10px 28px rgba(59,130,246,.5);
}

.btn-reset{
  background:rgba(255,255,255,0.9);
  color:#0f172a;
  border-radius:12px;
}

/* ===== Chips / badges ===== */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.25rem 0.75rem;
  border-radius:999px;
  font-size:0.72rem;
  font-weight:600;
}

.chip{
  border-radius:999px;
  padding:0.25rem 0.8rem;
  background:rgba(15,23,42,0.06);
  border:1px solid rgba(148,163,184,0.4);
  color:#0f172a;
}

.chip-colored{
  background:linear-gradient(135deg,rgba(129,140,248,0.2),rgba(45,212,191,0.2));
  border-color:rgba(129,140,248,0.55);
}

/* ===== Dropzone ===== */
.dropzone{
  position:relative;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease, background .2s ease;
}

.dropzone input[type="file"]{
  display:none;
}

.dropzone.dragover{
  border-color:rgba(79,70,229,0.7);
  background:linear-gradient(135deg,rgba(129,140,248,0.16),rgba(56,189,248,0.1));
  box-shadow:0 0 0 1px rgba(79,70,229,0.45), 0 18px 40px rgba(79,70,229,0.4);
  transform:translateY(-1px);
}

/* ===== Fake button di dalam dropzone ===== */
.fake-btn{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.45rem 1rem;
  border-radius:999px;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:.01em;
  border:none;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(15,23,42,0.25);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.fake-btn svg{
  pointer-events:none;
}

.fake-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:0 16px 40px rgba(15,23,42,0.3);
}

/* ===== List scroll (hasil) ===== */
.list-scroll{
  max-height:22rem;
  overflow:auto;
}

.list-scroll::-webkit-scrollbar{
  width:6px;
}

.list-scroll::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,0.9);
  border-radius:999px;
}

/* ===== Skeleton loading ===== */
.skeleton{
  height:.8rem;
  border-radius:999px;
  background:linear-gradient(90deg,#e5e7eb,#f3f4f6,#e5e7eb);
  background-size:200% 100%;
  animation:skeleton 1.3s ease-in-out infinite;
}

@keyframes skeleton{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

/* ===== View (upload <-> instruksi) ===== */
.view{
  opacity:1;
  transform:translateY(0);
}

.view.enter{
  animation:view-enter .22s ease-out;
}

.view.leave{
  animation:view-leave .18s ease-in forwards;
}

@keyframes view-enter{
  0%{opacity:0; transform:translateY(14px) scale(.98);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}

@keyframes view-leave{
  0%{opacity:1; transform:translateY(0) scale(1);}
  100%{opacity:0; transform:translateY(-10px) scale(.98);}
}

/* ===== Language content animation ===== */
.lang-content{
  display:none;
  opacity:0;
  transform:translateY(4px);
}

.lang-content.active{
  display:block;
}

.lang-enter{
  animation:lang-enter .18s ease-out forwards;
}

@keyframes lang-enter{
  0%{opacity:0; transform:translateY(6px);}
  100%{opacity:1; transform:translateY(0);}
}

/* ===== Code inline ===== */
code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.8em;
  padding:0.1rem .35rem;
  border-radius:.45rem;
  background:rgba(15,23,42,0.06);
}

/* ===== Social icons ===== */
.social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.4rem;
  height:2.4rem;
  border-radius:999px;
  background:#0f172a;
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,0.7);
  box-shadow:0 14px 40px rgba(15,23,42,0.85);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, filter .16s ease;
}

.social svg{
  width:1.1rem;
  height:1.1rem;
}

.social.ig{
  background:radial-gradient(circle at 30% 110%,#fdf497 0,#fd5949 35%,#d6249f 60%,#285AEB 90%);
}

.social.tt{background:#000;}
.social.yt{background:#f00;}
.social.dc{background:#5865F2;}

.social:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:0 18px 50px rgba(15,23,42,1);
}

/* ===== Helpers ===== */
.container{
  max-width:1080px;
}

/* ===== MOBILE TWEAKS ===== */
.chip-row{
  /* helper class supaya gampang diatur di mobile */
}

/* Layar kecil (HP) */
@media (max-width:640px){
  body{
    padding-top:0;
  }

  header{
    padding-top:0.75rem;
  }

  .glass{
    border-radius:16px;
    box-shadow:0 18px 50px rgba(15,23,42,0.6);
  }

  .card{
    border-radius:16px;
    box-shadow:0 18px 45px rgba(15,23,42,0.65);
  }

  /* Title sedikit dikecilkan */
  h1{
    font-size:1.6rem;
    line-height:1.2;
  }

  .btn-cta{
    width:100%;
    justify-content:center;
  }

  .chip-row{
    flex-wrap:wrap;
    gap:.3rem;
  }

  .chip{
    font-size:.7rem;
  }

  .card-inner{
    padding:0.9rem;
  }

  .list-scroll{
    max-height:16rem;
  }

  footer{
    margin-top:0.75rem;
    padding-bottom:1.25rem;
  }

  .social{
    width:2.1rem;
    height:2.1rem;
    box-shadow:0 10px 30px rgba(15,23,42,0.9);
  }

  .social svg{
    width:1rem;
    height:1rem;
  }
}
/* Pertegas warna teks hasil */
#notFollowingBackList,
#fansList {
  color: #1e293b !important; /* slate-800 */
  font-weight: 500;
}

/* Teks username */
#notFollowingBackList div,
#fansList div {
  color: #1e293b !important; 
}

/* Tombol Profil → */
.profil-btn {
  color: #6d28d9 !important; /* Ungu, lebih tegas */
  font-weight: 600;
}