/* =========================
   GLOBAL RESET
========================= */
* {
  box-sizing: border-box;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

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

body{
margin:0;
padding:20px;
background:radial-gradient(circle at top,#3a0f6d,#0b0614 70%);
display:flex;
justify-content:center;
align-items:center;
color:#fff;
overflow-y:auto;
animation:bgFade .8s ease forwards;
}
/* ==========================
   PANEL BASE
========================== */
.forkt-panel{
position:relative;
border-radius:20px;
padding:20px;

background:rgba(20,20,35,.8);

/* blur dikurangi */
backdrop-filter:blur(8px);

overflow:hidden;
z-index:0;

/* shadow lebih ringan */
box-shadow:0 8px 30px rgba(0,0,0,.4);

transition:transform .25s ease;

contain:content;
}

/* ==========================
   ANIMATED GRADIENT BORDER
========================== */
.forkt-panel::before{
content:"";
position:absolute;
inset:0;
padding:2px;
border-radius:inherit;

background:linear-gradient(
270deg,
#7b2cff,
#c38cff,
#00e0ff,
#7b2cff
);

/* animasi diperlambat */
background-size:300% 300%;
animation:gradientMove 20s linear infinite;

-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);

-webkit-mask-composite:xor;
mask-composite:exclude;

z-index:-1;
}

/* ==========================
   OUTER NEON GLOW
========================== */
.forkt-panel::after{
content:"";
position:absolute;
inset:-6px;
border-radius:inherit;

background:radial-gradient(
circle,
rgba(123,44,255,.25),
transparent 70%
);

opacity:.5;
z-index:-2;
}

/* =========================
   HEADER
========================= */
.panel-header{
text-align:center;
margin-bottom:6px;
}

.panel-header h1{
margin:0;
font-size:26px;
font-weight:700;
letter-spacing:1.2px;

background:linear-gradient(135deg,#c38cff,#7b2cff,#00e0ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

background-size:200% auto;

/* animasi lebih ringan */
animation:shimmer 12s linear infinite,titleFade .7s ease;
}

/* Subtitle */
.panel-subtitle {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 6px;
  color: #cdb7ff;

  /* subtle divider effect */
  position: relative;
  display: inline-block;
  padding: 0 10px;
}

.panel-subtitle::before,
.panel-subtitle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 1px;
  background: rgba(195, 140, 255, 0.4);
}

.panel-subtitle::before { left: -22px; }
.panel-subtitle::after  { right: -22px; }
/* =========================
   INFO / NOTES BOX
========================= */
.info-box{
margin-top:16px;
background:rgba(25,18,45,.9);
border-radius:16px;
padding:14px;
/* blur dikurangi */
backdrop-filter:blur(6px);
box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.section-title {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 1px;
  color: #b993ff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-transform: uppercase;
}
.info-box h2,
.notes-box h2 {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 1px;
  color: #b993ff;
  text-align: center;
}

/* =========================
   INFO ROW (FIX ALIGN)
========================= */
.info-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 4px;

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

.info-row:last-child{
border-bottom:none;
}

.info-left{
display:flex;
align-items:center;
gap:8px;
font-size:13px;
opacity:.9;
}

.info-row span {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: .85;
}

/* modern icon circle */
.icon{
width:30px;
height:30px;
border-radius:8px;
display:grid;
place-items:center;
font-size:14px;
background:rgba(159,123,255,.15);
color:#caa8ff;
}

/* value text */
.value {
  font-weight: 500;
  padding: 4px 10px;
  font-size: 15px;
  color: #f1eaff;
  letter-spacing: .3px;
}

/* badge */
.badge{
padding:4px 10px;
border-radius:999px;
font-size:11px;
font-weight:600;
background:rgba(255,255,255,.08);
}

/* badge colors */
.badge.ready { color: #6bffb3; }
.badge.vip   { color: #ffd36b; }
.badge.free  { color: #0bb6f7; }

/* =========================
   CHANGELOG (FIX SCROLL)
========================= */
/* =========================
   NOTES BOX
========================= */
.notes-box{
margin-top:16px;

background:rgba(25,18,45,.9);

border-radius:16px;
padding:14px;

max-height:160px;
overflow-y:auto;

contain:content;
}


/* Section title */
.notes-box .section-title {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 1px;
  color: #b993ff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-transform: uppercase;
  font-weight: 600;
}

/* List */
.notes-box ul {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.notes-box li:hover {
  background: rgba(255,255,255,.03);
  transform: translateX(2px);
}

/* Icon for each list item */
.notes-box li i {
  width: 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #caa8ff;
  flex-shrink: 0;
}
.notes-box li.visible {
  opacity: 1;
  transform: translateX(0);
}
#notesList{
margin:0;
padding:0;
list-style:none;
}

#notesList li{
display:flex;
gap:8px;
font-size:13px;
padding:6px 0;
opacity:.9;
}
/* arrow ringan */
.arrow{
color:#9f7bff;
font-size:11px;
}
/* custom scrollbar */
.notes-box::-webkit-scrollbar {
  width: 4px;
}
.notes-box::-webkit-scrollbar-thumb {
  background:#7f2aff;
  border-radius: 10px;
}
.notes-box::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}
/* =========================
   MODERN DOWNLOAD BUTTON
========================= */
.download-btn{
 position:relative;
width:100%;
margin-top:14px;
padding:12px;

border-radius:14px;
border:none;

background:linear-gradient(135deg,#7f2aff,#b66bff);

color:#fff;
font-weight:600;
font-size:14px;

display:flex;
align-items:center;
justify-content:center;
gap:8px;

cursor:pointer;
transition:transform .2s ease;
}

.download-btn:hover:not(:disabled){
transform:translateY(-1px);
box-shadow: 0 15px 35px rgba(159,123,255,.55);
}

.download-btn:disabled{
opacity:.6;
cursor:not-allowed;
box-shadow: none;
}

/* glow border animation */
.download-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: linear-gradient(
    270deg,
    #7b2cff,
    #c38cff,
    #00e0ff,
    #7b2cff
  );
  background-size: 400% 400%;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: -1;
}

.download-btn:hover:not(:disabled)::before {
  opacity: .7;
  animation: gradientMove 6s linear infinite;
}

/* active click */
.download-btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* icon style */
.download-btn i {
  font-size: 15px;
  opacity: .9;
}

/* text */
.download-btn span {
  letter-spacing: .3px;
}

/* =========================
   DOWNLOAD PROGRESS BAR
========================= */
.download-progress {
  margin-top: 14px;
  text-align: center;
}

.progress-bar{
width:100%;
height:8px;
background:rgba(255,255,255,.08);
border-radius:20px;
overflow:hidden;
}

.progress-fill{
height:100%;
width:0%;
border-radius:20px;

background:linear-gradient(90deg,#7b2cff,#c38cff,#00e0ff);
transition:width .25s ease;
}

#progressText{
display:block;
margin-top:6px;
font-size:12px;
opacity:.7;
}
/* =========================
   STATUS TEXT (MODERN)
========================= */
.status-text {
  margin-top: 10px;   /* sebelumnya terlalu besar */
  margin-bottom: 6px; /* 🔥 jarak ke footer lebih dekat */
  font-size: 13px;
  opacity: .8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #cdb7ff;
}

/* =========================
   FOOTER
========================= */
.footer {
  margin-top: 6px;
  padding-top: 10px;
  position: relative;
}

/* garis tipis elegan */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
 /* left: 12%;
  width: 76%;*/
  height: 1px;
  left: 0;
  width: 100%;
  box-shadow: 0 0 8px rgba(160, 80, 255, 0.6);
  background: linear-gradient(
    to right,
    transparent,
    rgba(195, 140, 255, 0.5),
    transparent
  );
}



/* credits */
.credits {
  font-size: 12px;
  text-align:center;
  margin-left:0;
  opacity: .7;
  margin-top: 12px;
  letter-spacing: .5px;
}

.credits span {
  color: #c38cff;
  font-weight: 600;
}

/* =========================
   SOCIAL LINKS (1 ROW)
========================= */
.social-links {
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* button base */
.social-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  transition: 0.25s ease;
  box-shadow: 0 0 12px rgba(195,140,255,0.15);
  border: 1px solid rgba(255,255,255,0.12);
}

/* Telegram style */
.social-btn.telegram {
  background: rgba(0, 136, 204, 0.15);
}

.social-btn.telegram:hover {
  background: rgba(0, 136, 204, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,136,204,.35);
}

/* WhatsApp style */
.social-btn.whatsapp {
  background: rgba(37, 211, 102, 0.15);
}

.social-btn.whatsapp:hover {
  background: rgba(37, 211, 102, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(37,211,102,.35);
}

/* =========================
   MOBILE OPTIMIZATION
========================= */
@media (max-width: 420px) {
  .social-btn {
    flex: 1;
    justify-content: center;
    font-size: 11px;
    padding: 8px;
  }
}

/* =========================
   ANIMATION
========================= */
@keyframes gradientMove{
0%{background-position:0% 50%}
100%{background-position:300% 50%}
}

@keyframes shimmer{
to{background-position:200% center}
}

@keyframes titleFade{
from{
opacity:0;
transform:translateY(-10px);
}
to{
opacity:1;
transform:none;
}
}

@keyframes bgFade{
from{opacity:0}
to{opacity:1}
}