:root{
  --bg:#070a0f;
  --text:#e8eefc;
  --nav-bg:rgba(13,17,25,.82);
  --orange:#ff8a3d;
  --purple:#8b5cf6;
  --green:#18c37e;
  --panel:#0b0e16;
  --panel-2:#0e121b;
  --brand-underline:#03a9f4;
  --grad: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  --gold:#ffdf86;
}

/* iOS Safe Area Support */
@supports (padding: env(safe-area-inset-top)) {
  :root {
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);
    --safe-right: env(safe-area-inset-right);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:var(--bg);
  font:14px/1.45 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  /* Prevent iOS zoom on input focus */
  -webkit-text-size-adjust: 100%;
  /* Smooth scrolling for iOS */
  -webkit-overflow-scrolling: touch;
}

/* GLOBAL: Semua subtitle, description, text kecil pakai Space Grotesk yang jelas
   KECUALI .gk-title (Free Key title) yang punya styling sendiri */
p, span:not(.accent):not(.gradient):not(.brand-word), div, a, button, input, textarea, select, label, li, td, th, .subtitle, .desc, .text, .note, .info {
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Title BESAR dan ACCENT text (seperti "JinHub" gradient) tetap pakai Outfit/Nexa Round yang bold
   KECUALI .gk-title yang sudah punya font sendiri (Space Grotesk 700) */
h1:not(.gk-title), h2, h3, h4, h5, h6, .title, .heading, .brand-word, .type-title, .accent, .gradient, span.accent, span.gradient {
  font-family: "Nexa Round", "Outfit", system-ui, Arial, sans-serif;
  font-weight: 900;
}

/* .gk-title (Free Key, Unlock JinHub, dll) tetap pakai Space Grotesk 700 seperti sebelumnya */
.gk-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
}

/* Mobile-specific body adjustments */
@media (max-width: 768px) {
  body {
    font-size: 15px; /* Slightly larger for mobile readability */
    line-height: 1.5;
  }
  
  /* Subtitle mobile lebih jelas - EXCLUDE accent/gradient spans dan .gk-title */
  p, span:not(.accent):not(.gradient):not(.brand-word), div, a, .subtitle, .desc, .text {
    font-family: "Space Grotesk", Inter, system-ui, sans-serif;
    font-weight: 500; /* Slightly bolder untuk readability mobile */
    letter-spacing: 0.015em;
  }
  
  /* Title dan accent tetap Outfit/Nexa di mobile - KECUALI .gk-title */
  h1:not(.gk-title), h2, h3, h4, h5, h6, .title, .heading, .brand-word, .type-title, .accent, .gradient, span.accent, span.gradient {
    font-family: "Nexa Round", "Outfit", system-ui, Arial, sans-serif;
    font-weight: 900;
  }
  
  /* .gk-title tetap Space Grotesk 700 di mobile juga */
  .gk-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
  }
}
body{ background: #070a0f; }
body::before{
  content:""; position:fixed; inset:0; z-index:-3;
  background: #070a0f;
}
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 10%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 10%, transparent 100%);
}
.container{max-width:1180px; margin:118px auto 80px; padding:0 18px}

/* Mobile container optimization */
@media (max-width: 768px) {
  .container {
    margin: 80px auto 60px;
    padding: 0 16px;
    /* Add safe area padding for iOS */
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    /* Tambah padding-bottom 40% lebih besar: 60px → 84px */
    padding-bottom: max(84px, env(safe-area-inset-bottom) + 64px);
  }
}

@media (max-width: 480px) {
  .container {
    margin: 75px auto 50px;
    padding: 0 14px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
}

/* Dipakai animasi teks gradient (mis. .brand-word di typewriter tab Home) */
@keyframes ani{0%{background-position:0%}50%{background-position:400%}100%{background-position:0%}}

/* ===== TOPBAR (fixed, floating pill, style ala Rift) =====
   Desktop: horizontal pill navigation
   Mobile: hamburger menu + overlay sidebar */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:center;
  padding:14px 18px 0;
  padding-top: max(14px, env(safe-area-inset-top));
  background:transparent;
  border-bottom:none;
  pointer-events:none;
}
.topbar-inner{
  pointer-events:auto;
  width:auto; max-width:calc(100% - 20px);
  margin:0; padding:0 11.76px 0 17.64px;
  display:flex; flex-direction:column;
  background:rgba(13,17,25,.5);
  backdrop-filter: blur(6px) saturate(150%);
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.46);
  transition:border-radius .5s cubic-bezier(.65,0,.35,1);
  /* PENTING: overflow hidden supaya waktu mobile-menu ikut jadi bagian
     dari kotak ini (grow ke bawah), sudut rounded-nya tetap konsisten
     dan gak ada elemen yang "nembus" keluar bentuk pill/card. */
  overflow:hidden;
}
/* Baris atas (logo, nav desktop, hamburger) - dipisah dari .topbar-inner
   supaya .topbar-inner bisa jadi container vertikal (row + dropdown)
   yang menyatu jadi SATU kotak/border yang sama, bukan 2 kotak nempel. */
.topbar-row{
  display:flex; align-items:center; gap:19.6px;
  height:52.14px; width:100%; flex-shrink:0;
}
.topbar-logo{
  display:flex; align-items:center; flex-shrink:0; cursor:pointer;
  text-decoration:none;
  min-width: 43.12px;
  min-height: 40.96px;
  padding: 8.38px 8.82px;
  margin: -8.38px -8.82px;
}
.topbar-logo img{ height:28px; width:auto; display:block; }

/* Hamburger menu button (mobile only) - swaps between hamburger/close SVG icons */
.hamburger-btn{
  display:none;
  justify-content:center;
  align-items:center;
  width:44px;
  height:44px;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:0;
  margin-left:auto;
  -webkit-tap-highlight-color:transparent;
  outline:none; /* Hapus outline biru */
  position:relative;
  color:#dfe6f5;
}
.hamburger-btn:focus{
  outline:none; /* Hapus outline biru saat focus */
}
.hamburger-btn .hamburger-icon,
.hamburger-btn .close-icon{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .4s ease, transform .5s cubic-bezier(.65,0,.35,1);
}
.hamburger-btn svg{ width:24px; height:24px; display:block; }
.hamburger-btn .hamburger-icon{ opacity:1; transform:rotate(0deg) scale(1); }
.hamburger-btn .close-icon{ opacity:0; transform:rotate(-90deg) scale(.5); }
.hamburger-btn.active .hamburger-icon{ opacity:0; transform:rotate(90deg) scale(.5); }
.hamburger-btn.active .close-icon{ opacity:1; transform:rotate(0deg) scale(1); }

/* ===== MOBILE MENU: sekarang NESTED di dalam .topbar-inner (bukan lagi
   elemen overlay terpisah). Jadi navbar + dropdown itu SATU kotak/border
   yang sama persis - gak ada lagi trik "overlap 1px" yang gampang meleset.
   Animasi pakai CSS Grid 0fr -> 1fr, yaitu cara paling reliable buat
   animasi tinggi "auto" secara halus: kotaknya BENERAN tumbuh ke bawah
   waktu dibuka, dan BENERAN menyusut ke atas waktu ditutup. */
.mobile-menu{
  display:none; /* diaktifkan jadi grid di breakpoint mobile */
  width:100%;
  overflow:hidden;
}
.mobile-menu-content{
  min-height:0; /* WAJIB buat grid 0fr/1fr trick supaya bisa nyusut ke 0 */
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  max-height:calc(100vh - 160px - env(safe-area-inset-top));
  /* FIX: padding & margin-top JANGAN permanen di sini. Padding gak ikut
     collapse waktu .mobile-menu grid-template-rows:0fr (padding tetap
     dihitung sebagai tinggi minimum kotak walau item di dalamnya udah
     collapse ke 0), makanya navbar keliatan "bengkak" ~24px+ terus
     walau menu-nya ketutup. Padding cuma dipasang pas .active. */
  padding:0 4px;
  margin-top:0;
  transition:padding .3s ease, margin-top .3s ease;
}
.mobile-menu.active .mobile-menu-content{
  padding:8px 4px calc(12px + env(safe-area-inset-bottom));
  margin-top:4px;
}

.mobile-menu-backdrop{
  position:fixed;
  inset:0;
  background:transparent; /* HAPUS background gelap - content tetap clear */
  opacity:0;
  pointer-events:none;
  transition:opacity .5s cubic-bezier(.65,0,.35,1);
  z-index:48;
  display:none;
}
.mobile-menu-backdrop.active{
  opacity:1;
  pointer-events:auto;
}
.mobile-nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  margin:2px 4px;
  border-radius:14px;
  color:#9fb0d0;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  letter-spacing:.2px;
  position:relative;
  transition:color .2s ease, background .2s ease, transform .15s ease;
  -webkit-tap-highlight-color:transparent;
}
/* HAPUS semua icon di mobile menu - hanya teks */
.mobile-nav-item svg{
  display:none; /* Hidden - tidak tampil di mobile */
}
/* Item pertama - minimal spacing dari navbar */
.mobile-nav-item:first-child{
  margin-top:4px;
}
.mobile-nav-item svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  flex-shrink:0;
  position:relative;
  z-index:1;
}
.mobile-nav-item span, .mobile-nav-item{ position:relative; }
.mobile-nav-item:active{
  background:rgba(255,255,255,.08); /* .05 → .08 */
  transform:scale(.98); /* Tambah scale effect */
}
/* Glass effect untuk item aktif/hover - lebih clean dan subtle */
.mobile-nav-item.active::before,
.mobile-nav-item:hover::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.08); /* .1 → .08 (lebih subtle) */
  z-index:0;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06); /* .08 → .06 (border lebih tipis) */
}
.mobile-nav-item.active,
.mobile-nav-item:hover{
  background:transparent;
  color:#fff;
}
.mobile-nav-item[data-tab="premium"]{
  color:rgb(139,92,246); /* Purple premium */
  margin-top:8px;
}
/* Premium item active state dengan glass blur purple */
.mobile-nav-item[data-tab="premium"].active::before,
.mobile-nav-item[data-tab="premium"]:hover::before{
  background:rgba(139,92,246,.15); /* Glow purple */
  border-color:rgba(139,92,246,.25);
}

.navpill{
  display:flex; align-items:center; gap:1.96px;
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.navpill::-webkit-scrollbar{ display:none; }

.navitem{
  display:flex; align-items:center; gap:6.86px;
  padding:8.38px 13.72px; border-radius:20px;
  color:#9fb0d0; text-decoration:none;
  text-transform:uppercase; letter-spacing:.3px; font-weight:800; font-size:11.76px;
  transition:.18s background ease,.18s color ease;
  cursor:pointer; position:relative; white-space:nowrap; flex-shrink:0;
  min-height: 40.96px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.navitem svg{
  width: 15.68px; height: 15.68px; display: block; overflow: visible;
  stroke: currentColor; fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.navitem .svg-fill{ width:14.7px; height:14.7px; fill:currentColor; stroke:none }
.navitem:hover{ background:rgba(255,255,255,.06); color:#fff }
.navitem.active{ background:rgba(255,255,255,.09); color:#fff; }
.navitem[data-tab="premium"]{ color:rgb(139,92,246); } /* Purple premium */
.navitem[data-tab="premium"]:hover{ color:rgb(139,92,246); }
.navitem[data-tab="premium"].active{ color:rgb(139,92,246); }

/* MOBILE: Show hamburger, hide navpill */
@media (max-width: 768px){
  .topbar{ 
    padding:16px 20px 0; 
    padding-top: max(16px, calc(env(safe-area-inset-top) + 12px));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .topbar-inner{ 
    width:100%;
    max-width:100%;
    padding:7px 10px 7px 14px;
    border-radius:18px;
    /* Glass, transparan tapi tetap agak gelap biar kebaca */
    background:rgba(8,10,16,.78);
    backdrop-filter:blur(6px) saturate(140%);
    -webkit-backdrop-filter:blur(6px) saturate(140%);
    border:1px solid rgba(255,255,255,.1); /* .12 → .1 (lebih subtle) */
  }
  .topbar-row{
    height:42px;
    gap:0;
    justify-content:space-between;
  }
  .topbar-logo { 
    min-width: 34px;
    min-height: 34px;
    padding: 8px;
    margin: -8px;
  }
  .topbar-logo img{ height:25px; filter:drop-shadow(0 0 1px rgba(255,255,255,.25)); }
  
  /* Hide desktop nav */
  .navpill{ display:none; }
  
  /* Show mobile menu */
  .hamburger-btn{
    display:flex;
    width:34px;
    height:34px;
  }
  .hamburger-btn svg{ width:22px; height:22px; }
  /* Grid 0fr -> 1fr: kotak beneran tumbuh/menyusut tingginya, seamless
     karena masih satu box yang sama dengan navbar (.topbar-inner) */
  .mobile-menu{ 
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .55s cubic-bezier(.65,0,.35,1);
  }
  .mobile-menu.active{
    grid-template-rows:1fr;
  }
  .mobile-menu-backdrop{ display:block; }
  
  .container{ 
    margin-top:78px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}

@media (max-width: 480px){
  .topbar{ 
    padding:14px 20px 0; 
    padding-top: max(14px, calc(env(safe-area-inset-top) + 10px));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .topbar-inner{ 
    max-width:100%;
    padding:6px 9px 6px 12px;
    border-radius:16px;
    /* Glass, transparan tapi tetap agak gelap biar kebaca */
    background:rgba(8,10,16,.75);
    backdrop-filter:blur(6px) saturate(140%);
    -webkit-backdrop-filter:blur(6px) saturate(140%);
    border:1px solid rgba(255,255,255,.1);
  }
  /* Navbar saat menu TERBUKA di layar kecil - gak perlu override radius lagi,
     karena sekarang navbar+menu satu kotak yang sama, radius-nya konsisten
     dari .topbar-inner di atas walau kotaknya lagi tinggi (menu terbuka). */
  .topbar-logo img{ height:23px; }
  .hamburger-btn{ width:30px; height:30px; }
  .hamburger-btn svg{ width:20px; height:20px; }
}

/* Tabs */
.tab{ display:none } .tab.active{ display:block }

/* ===== Modal features (dipakai tab Scripts) ===== */
.modal{ 
  position:fixed; inset:0; display:none; place-items:center; z-index:60; 
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  /* Mobile: Allow scrolling if content overflows */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal[aria-hidden="false"]{ display:grid }
.modal-card{ 
  width:min(980px,92vw); 
  max-height:85vh; 
  overflow:auto; 
  border-radius:16px; 
  background:linear-gradient(180deg,#121824,#0f1522); 
  border:1px solid rgba(255,255,255,.12); 
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  /* Mobile: Better scrolling */
  -webkit-overflow-scrolling: touch;
}
.modal-head{ 
  position:sticky; top:0; z-index:2; 
  background:linear-gradient(180deg,#121824ee,#0f1522ee); 
  padding:16px 18px; 
  border-bottom:1px solid rgba(255,255,255,.08); 
  display:flex; align-items:center; gap:12px;
}
.modal-title{ margin:0; font-size:20px; font-weight:900 }
.modal-close{ 
  margin-left:auto; 
  border:0; 
  border-radius:999px; 
  padding:8px 12px; 
  font-weight:900; 
  cursor:pointer; 
  background:#3a1f26; 
  color:#ffd5da; 
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); 
  font-family:inherit;
  /* Better tap target */
  min-width: 44px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.modal-body{ padding:18px }
.feat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
@media(max-width:800px){ 
  .feat-grid{ grid-template-columns:1fr }
  .modal-card{ 
    width:min(980px,95vw);
    max-height:90vh;
    margin: 20px 0;
  }
  .modal-head{ padding:14px 16px; }
  .modal-title{ font-size:18px; }
  .modal-body{ padding:16px; }
}
@media(max-width:480px){
  .modal-card{ 
    width:calc(100vw - 20px);
    border-radius:12px;
  }
  .modal-head{ padding:12px 14px; }
  .modal-title{ font-size:17px; }
  .modal-body{ padding:14px; }
  .feat-grid{ gap:12px; }
}
.feat-panel{ 
  padding:16px; 
  border-radius:12px; 
  border:1px solid rgba(255,255,255,.08); 
  background:linear-gradient(180deg,#141b2a,#101625);
}
.feat-panel ul{ margin:0; padding-left:18px; line-height:1.6; color:#cfe1ff }

@media(max-width:480px){
  .feat-panel{ 
    padding:14px; 
    border-radius:10px;
  }
  .feat-panel ul{ 
    padding-left:16px; 
    font-size:14px; 
    line-height:1.7;
  }
}

/* ===== SCROLLBAR MODERN — tipis, rounded, nge-blend sama tema gelap ===== */
html{
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(130,150,210,.4) transparent; /* Firefox */
}
::-webkit-scrollbar{
  width:10px;
  height:10px;
}
/* Mobile: Thinner scrollbar */
@media (max-width: 768px) {
  ::-webkit-scrollbar{
    width:6px;
    height:6px;
  }
}
::-webkit-scrollbar-track{
  background:transparent;
}
::-webkit-scrollbar-thumb{
  background-color:rgba(130,150,210,.4);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:padding-box;
  transition:background-color .18s ease;
}
@media (max-width: 768px) {
  ::-webkit-scrollbar-thumb{
    border:2px solid transparent;
  }
}
::-webkit-scrollbar-thumb:hover{
  background-color:rgba(150,170,230,.65);
  background-clip:padding-box;
}
::-webkit-scrollbar-corner{
  background:transparent;
}

/* ===== MOBILE TOUCH IMPROVEMENTS ===== */
@media (max-width: 768px) {
  /* Better button tap targets */
  button, a, .navitem, [role="button"] {
    -webkit-tap-highlight-color: rgba(255,255,255,0.1);
    touch-action: manipulation; /* Prevents double-tap zoom */
  }
  
  /* Input improvements */
  input, textarea, select {
    font-size: 16px !important; /* Prevent iOS zoom on focus */
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* Prevent text selection on UI elements */
  button, .navitem, .modal-close {
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* Better focus states for mobile */
  *:focus {
    outline: 2px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
  }
  
  button:focus, a:focus {
    outline: 2px solid rgba(59, 130, 246, 0.6);
  }
}



/* Biar konten (title, subtitle, cards) gak nempel ke atas & lebih ketengah
   secara vertikal di area tab, kayak punya Rift. PENTING: rule ini di-scope
   ke #tab-getkey.active (bukan #tab-getkey aja), soalnya ID selector
   specificity-nya lebih tinggi dari .tab{display:none} yang ngatur show/hide
   antar tab -- kalau gak di-scope gini, tab getkey bakal selalu keliatan
   walau lagi gak aktif. */
/* min-height dipatok pake calc(95vh - 198px) -- 198px itu total margin
   atas+bawah punya .container (118px + 80px, dari base.css.js). Ini PENTING:
   kalau cuma pake angka vh kecil (mis. 40vh), box-nya jadi lebih pendek dari
   sisa layar, dan sisa layar di bawah box itu jadi kosong gitu aja (gak ikut
   ke-itung sama justify-content:center) -- efeknya konten keliatan nempel ke
   atas walau udah di-center di dalam box-nya sendiri. Dengan calc ini,
   box-nya isi penuh sisa layar, jadi center-nya beneran center di tengah
   layar penuh. */
#tab-getkey.active{
  min-height:calc(95vh - 198px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Scroll-lock cuma dipasang di desktop. Di HP (Android/iOS) address bar
   browser suka nambah/ngurangin tinggi viewport pas discroll, jadi patokan
   vh gak selalu akurat -- kalau overflow:hidden dipaksa di situ, konten
   yang kepotong gak bisa dijangkau sama sekali. Makanya di mobile tab getkey
   tetep bisa di-scroll normal. */
@media(min-width:769px){
  body:has(#tab-getkey.active){
    overflow:hidden;
  }
}

/* ===== MOBILE: MATIIN trik vertical-center + margin-top negatif di atas.
   Trik itu (min-height:calc(95vh-198px) + justify-content:center + margin-top
   negatif -150px) sengaja didesain BARENGAN sama scroll-lock desktop di atas
   -- tujuannya nge-center konten pas di tengah box yang emang gak bisa
   discroll. Di mobile, halaman JUSTRU masih bisa discroll normal (gak ada
   scroll-lock), jadi trik ini malah kebalik: box jadi lebih TINGGI dari
   viewport + konten ditarik ke tengah/ke atas (apalagi ditambah margin-top
   -150px), hasilnya judul "Free Key" ke-dorong sampai KETUTUP/KEPOTONG sama
   header nav yang nempel di atas. Media query ini balikin ke flow dokumen
   normal (top-aligned, scroll biasa) KHUSUS di bawah breakpoint yang sama
   persis kayak scroll-lock desktop (769px), jadi PC tetap gak kesentuh. */
@media(max-width:768px){
  #tab-getkey.active{
    min-height:auto;
    display:block;
    justify-content:flex-start;
    padding-top:80px; /* 65px → 80px: Turunkan sedikit untuk breathing room */
  }
  #gkStepProviders.active{
    margin-top:0;
    padding-top:80px; /* Juga untuk provider selection page */
  }
  /* Naikin dikit KHUSUS konten step Hero (title + card Premium/Free) biar
     spacing ke navbar lebih tipis -- di-scope pakai :has() ke #gkStepHero
     doang, jadi step Provider (pilih provider) di atas SAMA SEKALI gak
     ikut kesenggol/berubah. */
  #tab-getkey.active:has(#gkStepHero.active){
    padding-top:56px;
  }
}

/* step switching di dalam tab getkey (hero <-> providers) */
.gk-step{ display:none }
.gk-step.active{ display:block }

/* Step 2 (pilih provider) digeser dikit ke atas -- parent-nya
   (#tab-getkey.active) pakai justify-content:center yang bikin konten
   ke-center pas di tengah box, jadi keliatan ada jarak kosong lebar di
   atas tombol Back. margin-top negatif kecil ini narik konten step 2
   sedikit lebih tinggi tanpa ngubah posisi step 1 (hero), soalnya cuma
   di-scope ke #gkStepProviders.active. */
#gkStepProviders.active{
  margin-top:-150px;
}

/* ===== Animasi fade-in dari bawah ke atas (smooth) untuk hero text & card =====
   Dipicu via class .gk-inview yang ditambahin lewat JS (nav.client.js) tiap kali
   tab/step ini ditampilkan -- jadi PASTI kepicu, gak gantung timing display:none/block. */
@keyframes gkFadeUp{
  from{ opacity:0; transform:translateY(32px); }
  to{ opacity:1; transform:translateY(0); }
}
.gk-title, .gk-subtitle, .gk-card, .gk-pcard, .gk-upsell{
  opacity:0;
  transform:translateY(32px);
}
.gk-inview .gk-title{ animation:gkFadeUp .7s cubic-bezier(.16,.8,.24,1) .05s forwards; }
.gk-inview .gk-subtitle{ animation:gkFadeUp .7s cubic-bezier(.16,.8,.24,1) .15s forwards; }
.gk-inview .gk-card.best,
.gk-inview .gk-pcard:nth-child(1){ animation:gkFadeUp .7s cubic-bezier(.16,.8,.24,1) .25s forwards; }
.gk-inview .gk-card.free,
.gk-inview .gk-pcard:nth-child(2){ animation:gkFadeUp .7s cubic-bezier(.16,.8,.24,1) .38s forwards; }
.gk-inview .gk-pcard:nth-child(3){ animation:gkFadeUp .7s cubic-bezier(.16,.8,.24,1) .5s forwards; }
.gk-inview .gk-upsell{ animation:gkFadeUp .7s cubic-bezier(.16,.8,.24,1) .6s forwards; }

.gk-back{
  display:inline-flex; align-items:center; gap:8px; color:#8d9ab8; text-decoration:none;
  font-size:14px; font-weight:700; cursor:pointer; margin-bottom:30px; background:none; border:0;
  font-family:inherit; padding:0;
}
.gk-back:hover{ color:#dfe6f5 }
.gk-back svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2; }

.gk-hero{ text-align:center; margin:0 auto 44px; max-width:704px; } /* 640px * 1.1 = 704px, 40px * 1.1 = 44px */
.gk-title{
  margin:0 0 15.4px; font-size:clamp(35.2px,5.5vw,57.2px); font-weight:700;
  letter-spacing:-1.8px; color:#f2f5ff; line-height:1.1;
  font-family:'Space Grotesk',sans-serif; /* Default: Space Grotesk 700 untuk "Free Key" */
}

/* "Unlock JinHub" di Step Hero harus pakai Outfit/Nexa BOLD 900 */
#gkStepHero .gk-title {
  font-family:"Nexa Round","Outfit",system-ui,Arial,sans-serif;
  font-weight:900;
}

/* Accent untuk "Free Key" di Step Providers tetap Space Grotesk 700 */
#gkStepProviders .gk-title .accent{ 
  color:rgb(221,83,29); 
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
}
#gkStepProviders .gk-title .accent.purple{ 
  color:#a78bfa; 
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
}

/* Accent untuk "Unlock JinHub" di Step Hero pakai Outfit/Nexa BOLD 900 */
#gkStepHero .gk-title .accent{ 
  font-family:"Nexa Round","Outfit",system-ui,Arial,sans-serif;
  font-weight:900;
}
#gkStepHero .gk-title .accent.gradient{
  background:linear-gradient(90deg,#a78bfa 0%,#8b5cf6 45%,#d946ef 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-family:"Nexa Round","Outfit",system-ui,Arial,sans-serif;
  font-weight:900;
}
.gk-subtitle{ margin:0 auto; max-width:528px; color:#8d9ab8; font-size:17.6px; line-height:1.6; font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif; } /* 480px * 1.1 = 528px, 16px * 1.1 = 17.6px */

/* ===== STEP 1: hero cards (Premium vs Free) — flat dark, bersih, ukuran compact ===== */
.gk-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:22px; /* 20px * 1.1 = 22px */
  max-width:946px; margin:0 auto; /* 860px * 1.1 = 946px */
}
@media(max-width:860px){ .gk-cards{ grid-template-columns:1fr; } }

.gk-card{
  position:relative; border-radius:17.6px; padding:24.2px 26.4px; /* 16px * 1.1 = 17.6px, 22px * 1.1 = 24.2px, 24px * 1.1 = 26.4px */
  background:#12151c;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 17.6px 44px rgba(0,0,0,.4); /* 16px * 1.1 = 17.6px, 40px * 1.1 = 44px */
  display:flex; flex-direction:column;
  overflow:hidden; /* Clip blur effect inside card */
}

/* Cahaya abu-abu permanen di kiri atas - HANYA untuk card FREE - SUBTLE seperti SS 2 */
.gk-card.free::after{
  content:'';
  position:absolute;
  top:-25%;
  left:-25%;
  width:350px;
  height:350px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0) 70%); /* Sedikit lebih terang: 0.06→0.09, 0.02→0.03 */
  filter:blur(60px);
  pointer-events:none;
  z-index:0;
}

/* Pastikan konten di depan cahaya */
.gk-card > *{
  position:relative;
  z-index:1;
}

.gk-card.best{ border-color:rgba(139,92,246,.35); }
.gk-card.free{ border-color:rgba(255,255,255,.08); }

.gk-badge{
  display:inline-flex; align-items:center; gap:6.6px; width:max-content; /* 6px * 1.1 = 6.6px */
  font-size:11px; font-weight:900; letter-spacing:.6px; text-transform:uppercase; /* 10px * 1.1 = 11px */
  padding:5.5px 13.2px; border-radius:999px; margin-bottom:15.4px; /* 5px * 1.1 = 5.5px, 12px * 1.1 = 13.2px, 14px * 1.1 = 15.4px */
}
.gk-badge.best{ background:rgba(139,92,246,.14); border:1px solid rgba(139,92,246,.4); color:#c4b5fd; }
.gk-badge.free{ 
  background:rgba(255,255,255,.04); /* Abu-abu gelap */
  border:1px solid rgba(255,255,255,.15); /* Border abu-abu */
  color:#9aa8c7; /* Text abu-abu */
}
.gk-badge svg{ width:14.3px; height:14.3px; stroke:currentColor; fill:none; flex-shrink:0; } /* 13px * 1.1 = 14.3px */

.gk-card-title{ 
  margin:0 0 6.6px; 
  font-size:22px; 
  font-weight:900; /* BOLD seperti screenshot */
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing:-0.75px;
  color:#fff; 
}
.gk-card-title .accent{ color:rgb(139,92,246); }
.gk-card.free .gk-card-title{ color:#b6c0d6; }
.gk-card-desc{ margin:0 0 17.6px; color:#8d9ab8; font-size:14.3px; line-height:1.5; font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif; } /* 16px * 1.1 = 17.6px, 13px * 1.1 = 14.3px */

/* ===== fitur jadi box grid 2 kolom, flat juga, dikecilin biar compact ===== */
.gk-feat-list{
  list-style:none; margin:0 0 19.8px; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:6px; /* 8.8px → 6px (lebih rapat) */
}
@media(max-width:480px){ 
  .gk-feat-list{ 
    grid-template-columns:1fr !important; 
    gap:6px !important; /* FORCE spacing rapat di mobile */
  }
  /* FORCE box lancip dan spacing rapat di mobile */
  .gk-feat-list li{
    border-radius:0 !important;
    padding:9px 10px !important; /* FORCE padding lebih kecil di mobile */
    gap:8px !important; /* FORCE gap icon-text */
  }
}
.gk-feat-list li{
  display:flex; align-items:flex-start; gap:8px; /* 8.8px → 8px */
  font-size:12.5px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight:400;
  color:#dfe6f5; 
  line-height:1.3;
  padding:9px 10px; /* 11px 12.1px → 9px 10px (lebih compact) */
  border-radius:0 !important;
  background:rgba(255,255,255,.02);
  border:none;
}
.gk-card.free .gk-feat-list li{ color:#9aa8c7; }

/* check icon: circle solid + polos putih, jelas kelihatan walau kecil */
.gk-check{
  flex-shrink:0; width:17.6px; height:17.6px; border-radius:999px; display:grid; place-items:center; /* 16px * 1.1 = 17.6px */
  margin-top:0;
}
.gk-card.best .gk-check{ background:rgb(139,92,246); color:#160f2e; }
.gk-card.free .gk-check{ 
  background:rgba(255,255,255,.12); /* Bulatan abu-abu */
  color:#9aa8c7; /* Icon abu-abu */
}
.gk-check svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:3.2; } /* 10px * 1.1 = 11px */

.gk-btn{
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8.8px; /* 8px * 1.1 = 8.8px */
  padding:13.2px 19.8px; border-radius:13.2px; border:0; cursor:pointer; /* 12px * 1.1 = 13.2px, 18px * 1.1 = 19.8px */
  font-size:14.85px; font-weight:600; text-decoration:none; font-family:inherit; /* 13.5px * 1.1 = 14.85px */
  transition:filter .15s, transform .15s;
}
.gk-btn:hover{ filter:brightness(1.08); } .gk-btn:active{ transform:translateY(1px); }
.gk-btn.best{ background:rgb(139,92,246); color:#fff; /* Solid purple, no gradient, no shadow */ }
.gk-btn.free{ background:rgba(255,255,255,.06); color:#dfe6f5; border:1px solid rgba(255,255,255,.14); }
.gk-btn.free:hover{ background:rgba(255,255,255,.09); }

.gk-note{ margin-top:11px; text-align:center; font-size:12.1px; color:#4a5670; } /* 10px * 1.1 = 11px, 11px * 1.1 = 12.1px */

/* ===== STEP 2: pilih provider ===== */
.gk-provider-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  max-width:1000px; margin:0 auto;
}
@media(max-width:860px){ .gk-provider-grid{ grid-template-columns:1fr; } }

.gk-pcard{
  position:relative; /* PENTING: untuk ::before absolute positioning */
  border-radius:16px; padding:28px 26px;
  background:#12151c;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 34px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
  overflow:hidden; /* Clip blur effect di dalam card */
}

/* Efek cahaya blur di kanan atas - muncul saat hover */
.gk-pcard::before{
  content:'';
  position:absolute;
  top:-60%;
  right:-60%;
  width:300px; /* Lebih besar */
  height:300px; /* Lebih besar */
  border-radius:50%;
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none; /* Tidak mengganggu klik */
}

/* Default blur (ungu) */
.gk-pcard::before{
  background:radial-gradient(circle, rgba(139,92,246,0.4) 0%, rgba(139,92,246,0) 70%);
  filter:blur(60px); /* Blur lebih besar */
}

/* Linkvertise - Orange */
.gk-pcard:nth-child(1)::before{
  background:radial-gradient(circle, rgba(251,146,60,0.35) 0%, rgba(251,146,60,0) 70%);
  filter:blur(60px);
}

/* Lootlabs - Purple */
.gk-pcard:nth-child(2)::before{
  background:radial-gradient(circle, rgba(139,92,246,0.4) 0%, rgba(139,92,246,0) 70%);
  filter:blur(60px);
}

/* Work.ink - Green */
.gk-pcard:nth-child(3)::before{
  background:radial-gradient(circle, rgba(34,197,94,0.35) 0%, rgba(34,197,94,0) 70%);
  filter:blur(60px);
}

/* Show blur on hover */
.gk-pcard:hover::before{
  opacity:1;
}
.gk-pcard-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.gk-pcard-head img{ width:32px; height:32px; object-fit:contain; border-radius:8px; }
.gk-pcard-head span{ font-size:18px; font-weight:900; color:#fff; }
.gk-pcard-feat{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px; flex:1; }
.gk-pcard-feat li{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:#c3ccdf; }
.gk-pcard-feat .gk-check{ 
  background:transparent; /* Hilangkan bulatan */
  color:#8b5cf6; /* Warna ungu langsung untuk check icon */
  width:18px; height:18px; 
}
.gk-pcard-feat .gk-check svg{ 
  width:18px; height:18px; 
  stroke-width:2.2; /* Tipis, gak bold */
}

/* MOBILE: bikin check icon lebih tipis lagi */
@media(max-width:768px){
  .gk-pcard-feat .gk-check svg{ 
    stroke-width:2; /* Lebih tipis dari 2.2 */
  }
}

.gk-pcard-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 16px; border-radius:10px; border:0; cursor:pointer; text-decoration:none;
  background:rgba(139,92,246,.14); color:#c4b5fd; font-weight:900; font-size:14px;
  border:1px solid rgba(139,92,246,.3); font-family:inherit; transition:all .18s ease;
}
.gk-pcard-btn:hover{ background:rgba(139,92,246,.22); border-color:rgba(139,92,246,.5); }

.gk-upsell{
  display:flex; align-items:center; justify-content:center; gap:8px; margin:34px auto 0;
  width:max-content; padding:12px 22px; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  color:#dfe6f5; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
  transition:all .18s ease;
}
.gk-upsell:hover{ 
  background:rgba(255,255,255,.07); 
  border-color:rgb(221,83,29); /* Orange border saat hover */
}
.gk-upsell .crown{ color:#ffcf5c; }

/* ===== MOBILE: polish spacing biar lebih rapet/compact kayak referensi
   "Rift" (Boostellar) -- hero gak makan tempat kebanyakan, card gak
   se-lega di PC, gap antar card dirapetin. Semua di sini HANYA aktif di
   bawah 768px, PC gak kesentuh. ===== */
@media(max-width:768px){
  /* RAPATIN title & subtitle ke navbar - BUKAN perkecil card */
  .gk-hero{ margin:0 auto 28px; } /* 20px → 28px: Lebih banyak ruang ke cards */
  .gk-title{ 
    margin:0 0 12px; /* 8px → 12px: Lebih banyak ruang ke subtitle */
    font-size:32px;
    line-height:1.1;
  }
  .gk-subtitle{ 
    font-size:14px;
    line-height:1.5; 
    margin:0 auto; /* Hilangkan margin-bottom agar hero margin yang kontrol */
  }
  
  /* Cards tetap ukuran NORMAL - gak diperkecil */
  .gk-cards{ 
    gap:20px; /* 14px → 20px: Lebih banyak jarak antar cards */
    /* 40% lebih besar: 40px → 56px */
    margin-bottom:56px;
  }
  .gk-card{ 
    padding:20px 18px; /* Ukuran normal */
    border-radius:14px;
  }
  /* Card FREE (yang paling bawah) - 40% lebih besar: 20px → 28px */
  .gk-card.free{
    margin-bottom:28px;
  }
  .gk-badge{ 
    margin-bottom:14px; /* 12px → 14px: Lebih banyak ruang */
    padding:5px 12px;
    font-size:10.5px;
  }
  .gk-card-title{ 
    margin:0 0 8px; /* 6px → 8px: Lebih banyak ruang */
    font-size:20px;
  }
  .gk-card-desc{ 
    margin:0 0 17.4px !important; /* 12px + 45% = 17.4px spacing ke feature list box pertama */
    font-size:13px;
    line-height:1.4;
  }
  .gk-feat-list{ 
    margin:0 0 25.11px !important; /* 18.6px + 35% = 25.11px spacing ke button */
    /* GAP DIATUR DI ATAS: gap:6px !important - jangan override */
  }
  .gk-feat-list li{ 
    /* PADDING & BORDER-RADIUS DIATUR DI ATAS: padding:9px 10px !important, border-radius:0 !important */
    font-size:12px;
  }
  .gk-check{ 
    width:17px; height:17px;
    margin-top:0;
  }
  .gk-check svg{ width:10px; height:10px; }
  .gk-btn{ 
    padding:12px 18px;
    font-size:14px;
    border-radius:11px;
  }
  .gk-note{ 
    margin-top:8px; /* Sedikit spacing setelah button */
    margin-bottom:0; /* Hilangkan margin bawah agar langsung ke penutup card */
    font-size:11px;
  }
  
  /* Provider grid - cards tetap ukuran NORMAL - REVERT ke semula */
  .gk-provider-grid{ 
    gap:16px; /* Spacing normal */
  }
  .gk-pcard{ 
    padding:20px 18px; /* Ukuran normal - gak dikecilkan */
    border-radius:14px;
  }
  .gk-pcard-head{ 
    margin-bottom:14px;
    gap:12px;
  }
  .gk-pcard-head img{ width:32px; height:32px; } /* Ukuran normal */
  .gk-pcard-head span{ font-size:18px; } /* Ukuran normal */
  .gk-pcard-feat{ 
    gap:8px;
    margin-bottom:16px;
  }
  .gk-pcard-feat li{ font-size:13px; }
  .gk-pcard-feat .gk-check{ width:18px; height:18px; }
  .gk-pcard-feat .gk-check svg{ width:18px; height:18px; }
  .gk-pcard-btn{
    padding:13px 16px;
    border-radius:12px;
    font-size:14px;
  }
  
  .gk-upsell{
    margin:20px auto 0;
    /* Nambah celah lagi di bawah biar gak mepet banget ke bottom nav
       (90px -> 120px, khusus tombol upsell ini doang, gak nyenggol elemen lain) */
    margin-bottom:120px;
    font-size:11px;
    line-height:1.4;
    padding:10px 14px;
    text-align:center;
    width:auto;
    max-width:100%;
    flex-wrap:wrap;
    min-width:0;
  }
}



/* ===== HERO ===== */
.hero{ text-align:center; max-width:720px; margin:6px auto 0; }

.hero-badge{
  display:inline-flex; align-items:center; gap:8px; margin:0 auto 22px;
  padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.04); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  font-size:12.5px; font-weight:700; color:#c3ccdf; letter-spacing:.2px;
}
.hero-dot{ width:6px; height:6px; border-radius:50%; background:#18c37e; box-shadow:0 0 8px rgba(24,195,126,.7); animation:rpulse 2s ease infinite; flex-shrink:0; }
@keyframes rpulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

.typewrap{display:flex; justify-content:center; margin:0 0 14px;}
.type-title{
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight:700; text-align:center;
  font-size: clamp(30px,4.2vw,54px);
  letter-spacing:-1.2px; margin:0;
}
.brand-word{
  background: var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-stroke:1px rgba(95,3,244,0);
  color:transparent; background-size:200%;
  animation: 8s ani infinite;
}
.tp-caret{
  display:inline-block; width:1.5px; height:1.05em; margin-left:3px;
  background:#9fd5ff; animation: blink .9s step-end infinite;
}
@keyframes blink{50%{opacity:0}}

.hero-sub{ margin:0 auto 28px; max-width:520px; color:#9aa8c7; font-size:15.5px; line-height:1.6; }

.hero-cta{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.hero-btn{
  display:inline-flex; align-items:center; gap:9px; padding:14px 22px; border-radius:14px;
  font-family:"Plus Jakarta Sans", system-ui, sans-serif;
  font-size:14.5px; font-weight:600; letter-spacing:.1px; text-decoration:none; cursor:pointer; /* 600 instead of 800 */
  transition:transform .18s, filter .18s, background .18s, border-color .18s;
  /* Better tap target for mobile */
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.hero-btn svg{ width:17px; height:17px; flex-shrink:0; }
.hero-btn:hover{ transform:translateY(-2px); }
.hero-btn.primary{
  background:linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); /* Purple premium gradient */
  color:#fff;
  box-shadow:0 8px 24px rgba(139,92,246,.35); /* Purple glow */
}
.hero-btn.primary:hover{ 
  filter:brightness(1.12); 
  box-shadow:0 12px 32px rgba(139,92,246,.5); /* Stronger glow on hover */
}
.hero-btn.secondary{
  background:rgba(255,255,255,.04); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12); color:#dfe6f5;
}
.hero-btn.secondary:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); }

.hero-stats{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.hero-stat{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:#728098; }
.hero-stat svg{ width:14px; height:14px; color:#5a90ff; flex-shrink:0; }

/* Mobile optimization for Hero */
@media (max-width: 768px) {
  .hero{ margin:0 auto; }
  .hero-badge{ 
    padding:7px 14px; 
    font-size:11.5px;
    gap:6px;
  }
  .hero-dot{ width:5px; height:5px; }
  .type-title{ 
    font-size: clamp(26px,9vw,36px); 
    letter-spacing:0;
  }
  .hero-sub{ 
    font-size:14.5px; 
    line-height:1.65;
    max-width:100%;
    padding:0 10px;
  }
  .hero-cta{ 
    gap:10px; 
    flex-direction:column;
    width:100%;
    padding:0 10px;
  }
  .hero-btn{ 
    width:100%;
    max-width:320px;
    justify-content:center;
    padding:13px 20px;
    font-size:14px;
  }
  .hero-stats{ 
    gap:16px; 
    font-size:12px;
  }
  .hero-stat svg{ width:13px; height:13px; }
}

@media (max-width: 480px) {
  .hero-badge{ 
    padding:6px 12px; 
    font-size:11px;
  }
  .type-title{ 
    font-size: clamp(24px,10vw,32px);
  }
  .hero-sub{ 
    font-size:14px;
    padding:0 5px;
  }
  .hero-btn{ 
    max-width:100%;
    padding:12px 18px;
  }
  .hero-stats{ 
    gap:12px; 
    flex-direction:column;
  }
}

/* ===== FEATURE GRID — full glass, aksen gantian ===== */
.home-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:64px; }
@media(max-width:1100px){ .home-grid{ grid-template-columns:1fr } }

.home-card{
  position:relative; padding:26px; border-radius:18px;
  background:rgba(255,255,255,.035);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px rgba(0,0,0,.3);
  overflow:hidden;
  transition:transform .25s cubic-bezier(.34,1.4,.64,1), border-color .25s, background .25s;
}
.home-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.055); }

.home-card .badge-square{
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  position:relative; backdrop-filter:blur(6px);
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); color:rgb(139,92,246); /* Purple */
  transition:background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.home-card .badge-square::before{
  content:""; position:absolute; width:100px; height:100px; left:-26px; top:-26px; border-radius:999px;
  filter: blur(14px); opacity:0; pointer-events:none; transition:opacity .25s;
  background: radial-gradient(circle, rgba(139,92,246,.55), rgba(139,92,246,0) 60%); /* Purple glow */
}
.home-card:hover .badge-square{
  background:rgb(139,92,246); border-color:rgb(139,92,246); color:#fff; /* Purple */
  box-shadow:0 0 18px rgba(139,92,246,.35); /* Purple shadow */
}
.home-card:hover .badge-square::before{ opacity:.45; }

.home-card.acc-a:hover{ border-color:rgba(139,92,246,.3); } /* Purple */
.home-card.acc-b:hover{ border-color:rgba(139,92,246,.3); } /* Purple */
.home-card.acc-c:hover{ border-color:rgba(139,92,246,.3); } /* Purple */

.home-title{ 
  margin:18px 0 8px 0; font-size:18px; line-height:1.2; 
  font-weight:700; /* 900 → 700 */
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; /* Tambah font Inter */
  letter-spacing:-0.3px; /* Tambah negative letter-spacing */
  color:#eaf1ff;
}
.home-desc{ margin:0; color:#9aa8c7; font-size:13.5px; line-height:1.6 }
.home-link{ color:#8fb4ff; text-decoration:none; border-bottom:1px solid rgba(143,180,255,.25); transition:color .15s, border-color .15s, filter .15s }
.home-link:hover{ color:#bcd4ff; border-bottom-color:#bcd4ff; filter:drop-shadow(0 0 6px rgba(120,168,255,.35)) }
.home-ico{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8 }

/* ===== FAQ ===== */
.faq-section{ margin:70px auto 40px; max-width:820px }
.faq-eyebrow{ text-align:center; font-size:11px; font-weight:900; letter-spacing:2.5px; text-transform:uppercase; color:rgb(139,92,246); margin-bottom:10px; } /* Purple premium */
.faq-title{ 
  text-align:center; 
  font-weight:700; /* 900 → 700 */
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; /* Tambah font Inter */
  font-size:32px; 
  letter-spacing:-1.2px; /* -.3px → -1.2px untuk lebih tight */
  color:#e8eefc; 
  margin:0 0 32px; 
}
.faq-list{ display:grid; gap:12px }
.faq-item{
  background:rgba(255,255,255,.03); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden;
  transition:border-color .2s, background .2s;
}
.faq-item:hover{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.045); }
.faq-item summary{ 
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; 
  padding:17px 20px; 
  font-weight:700; /* 800 → 700 */
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; /* Tambah font Inter */
  letter-spacing:-0.3px; /* Tambah negative letter-spacing */
  color:#dfe7ff; 
  position:relative;
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-plus{ width:24px; height:24px; border-radius:8px; display:grid; place-items:center; background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.35); position:relative; flex:0 0 auto } /* Purple */
.faq-plus::before, .faq-plus::after{ content:""; position:absolute; background:#a78bfa; border-radius:2px; transition:.2s ease } /* Light purple */
.faq-plus::before{ width:11px; height:2px } .faq-plus::after{ width:2px; height:11px }
.faq-item[open] .faq-plus::after{ transform:scaleY(0) }
.faq-question{ font-size:14.5px }
.faq-body{ padding:0 20px 18px 58px; color:#9aa8c7; line-height:1.65; font-size:13.5px; }

/* ===== OWNER ===== */
.owner{ margin:56px auto 0; max-width:420px }
.owner-panel{
  text-align:center; padding:34px 30px; border-radius:22px;
  background:rgba(255,255,255,.035); backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 20px 44px rgba(0,0,0,.32);
}
.owner-eyebrow{ font-size:10px; font-weight:900; letter-spacing:2.5px; text-transform:uppercase; color:#5a6a8c; margin-bottom:16px; }
.owner-badge{
  width:104px; height:104px; margin:0 auto 16px; border-radius:999px; position:relative;
  background: radial-gradient(circle at 50% 50%, #2a3147 0%, #1a2135 60%, #131a2b 100%);
  box-shadow:0 14px 32px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.08);
  display:grid; place-items:center; overflow:hidden;
}
.owner-logo{ width:74%; height:74%; object-fit:contain; filter: drop-shadow(0 4px 16px rgba(0,0,0,.45)); }
.owner-name{ font-size:20px; font-weight:900; color:#f0f5ff; }
.owner-role{ font-size:12px; font-weight:700; color:rgb(139,92,246); margin-top:3px; letter-spacing:.2px; } /* Purple premium */
.owner-note{ color:#9aa8c7; font-size:13.5px; margin-top:14px; line-height:1.5; }
.btn-grid{ margin:20px auto 0; display:grid; grid-template-columns:repeat(3,60px); gap:14px; justify-content:center; }
.action-btn{ position:relative; width:56px; height:56px; border-radius:999px; display:grid; place-items:center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  box-shadow:0 12px 26px rgba(0,0,0,.3);
  transition:transform .25s, box-shadow .25s, filter .25s, border-color .25s, background .25s;
  color:#ffffff; text-decoration:none; overflow:hidden;
}
.action-btn .shine{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%); transform:translateX(-120%); transition: transform .7s ease }
.action-btn:hover .shine{ transform:translateX(120%) }
.action-btn:hover{ transform:translateY(-2px) scale(1.05) rotate(2deg) }
.action-btn:active{ transform:translateY(0) scale(.97) rotate(0) }
.action-btn svg{ width:24px; height:24px; fill:currentColor }
.action-btn.roblox{ color:#dfe6f5; }
.action-btn.roblox:hover{ border-color:rgba(255,255,255,.28); }
.action-btn.discord{ color:#8ea0ff; border-color:rgba(99,102,241,.35) }
.action-btn.discord:hover{ border-color:rgba(99,102,241,.6); filter: drop-shadow(0 0 14px rgba(99,102,241,.35)) }
.action-btn.youtube{ color:#ff6b6b; border-color:rgba(255,80,80,.35) }
.action-btn.youtube:hover{ border-color:rgba(255,80,80,.65); filter: drop-shadow(0 0 14px rgba(255,80,80,.35)) }

/* ===== FADE-UP ANIMATION (sama pola kayak tab getkey) =====
   Trigger: class .home-inview ditambahin ke #tab-home lewat
   nav.client.js (triggerInview) tiap kali tab ini ditampilkan. */
@keyframes homeFadeUp{
  from{ opacity:0; transform:translateY(32px); }
  to{ opacity:1; transform:translateY(0); }
}

.hero-badge, .typewrap, .hero-sub, .hero-cta, .hero-stats,
.home-card, .faq-section, .owner{
  opacity:0;
  transform:translateY(32px);
}

.home-inview .hero-badge{ animation:homeFadeUp .7s cubic-bezier(.16,.8,.24,1) .05s forwards; }
.home-inview .typewrap{ animation:homeFadeUp .7s cubic-bezier(.16,.8,.24,1) .15s forwards; }
.home-inview .hero-sub{ animation:homeFadeUp .7s cubic-bezier(.16,.8,.24,1) .25s forwards; }
.home-inview .hero-cta{ animation:homeFadeUp .7s cubic-bezier(.16,.8,.24,1) .35s forwards; }
.home-inview .hero-stats{ animation:homeFadeUp .7s cubic-bezier(.16,.8,.24,1) .45s forwards; }

.home-inview .home-card:nth-child(1){ animation:homeFadeUp .7s cubic-bezier(.16,.8,.24,1) .55s forwards; }
.home-inview .home-card:nth-child(2){ animation:homeFadeUp .7s cubic-bezier(.16,.8,.24,1) .61s forwards; }
.home-inview .home-card:nth-child(3){ animation:homeFadeUp .7s cubic-bezier(.16,.8,.24,1) .67s forwards; }
.home-inview .home-card:nth-child(4){ animation:homeFadeUp .7s cubic-bezier(.16,.8,.24,1) .73s forwards; }
.home-inview .home-card:nth-child(5){ animation:homeFadeUp .7s cubic-bezier(.16,.8,.24,1) .79s forwards; }
.home-inview .home-card:nth-child(n+6){ animation:homeFadeUp .7s cubic-bezier(.16,.8,.24,1) .85s forwards; }

.home-inview .faq-section{ animation:homeFadeUp .7s cubic-bezier(.16,.8,.24,1) .95s forwards; }
.home-inview .owner{ animation:homeFadeUp .7s cubic-bezier(.16,.8,.24,1) 1.05s forwards; }

/* State "udah settle" abis animasi fade-up kelar (dipasang via JS di client.js
   pas animationend). Specificity sengaja cuma 1 class biar tetep kalah sama
   .home-card:hover (2 class) — jadi hover tetap bisa override transform buat
   efek naik/turun, sementara resting state-nya gak balik jadi opacity:0. */
.home-settled{
  opacity:1;
  transform:translateY(0);
}



.scripts-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-top:48px; flex-wrap:wrap;
}
.scripts-search{ position:relative; flex:1; max-width:320px; }
.scripts-search input{
  width:100%; background:#0f1522; border:1px solid rgba(255,255,255,.10);
  border-radius:12px; padding:10px 14px 10px 40px; color:#dce6ff; font-size:14px;
  outline:none; transition:border-color .18s, box-shadow .18s; font-family:inherit;
}
.scripts-search input::placeholder{ color:#3a4a6a }
.scripts-search input:focus{ border-color:rgba(120,168,255,.4); box-shadow:0 0 0 3px rgba(100,140,255,.10) }
.scripts-search .ico-search{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; stroke:#3a4a6a; fill:none; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; pointer-events:none;
  transition:stroke .18s;
}
.scripts-search input:focus ~ .ico-search{ stroke:#7090c0 }
.scripts-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.s-filter{
  padding:8px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:transparent; color:#4a5a7a; font-size:12px; font-weight:800;
  letter-spacing:.5px; text-transform:uppercase; cursor:pointer;
  transition:all .2s; font-family:inherit;
}
.s-filter:hover{ background:rgba(80,120,220,.12); border-color:rgba(100,140,255,.3); color:#7a9ad0 }
.s-filter.active{ background:rgba(80,120,220,.18); border-color:rgba(100,140,255,.45); color:#a8c0ff; box-shadow:0 0 12px rgba(80,120,255,.15) }

.scripts-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; margin-bottom:4px; }
.scripts-count{ font-size:12px; color:#2a3a5a; letter-spacing:.3px; font-weight:700; text-transform:uppercase; }
.scripts-divider{ height:1px; background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.06) 30%,rgba(255,255,255,.06) 70%,rgba(255,255,255,0)); margin-bottom:20px; }

.scripts-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
@media(max-width:1100px){ .scripts-grid{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:640px){ .scripts-grid{ grid-template-columns:1fr } }

/* ===== MOBILE FIX: search input was being squeezed down to a sliver
   next to the filter pills, cutting the placeholder text off. Stack
   search on its own full-width row, filters wrap below it. ===== */
@media(max-width:640px){
  .scripts-header{
    flex-direction:column;
    align-items:stretch;
    margin-top:32px;
    gap:12px;
  }
  .scripts-search{ max-width:none; width:100%; }
  .scripts-filters{ width:100%; }
  .s-filter{
    flex:1;
    padding:8px 6px;
    font-size:10.5px;
    text-align:center;
    white-space:nowrap;
  }
}

.s-card{
  position:relative; border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg,#131c2e 0%,#0d1320 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 24px rgba(0,0,0,.3);
  transition:transform .28s cubic-bezier(.34,1.4,.64,1), box-shadow .28s ease, border-color .28s ease;
}
.s-card:hover{
  transform:translateY(-5px) scale(1.015);
  border-color:rgba(90,140,255,.2);
  box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(90,140,255,.1);
}
.s-card::before{
  content:""; position:absolute; inset:-1px; border-radius:19px; z-index:0; pointer-events:none;
  background:linear-gradient(135deg,rgba(100,160,255,.35),rgba(120,80,255,.2),rgba(255,100,180,.15),rgba(100,160,255,.35));
  background-size:300% 300%; opacity:0; transition:opacity .3s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1px;
  animation:shimmer-border 4s linear infinite paused;
}
.s-card:hover::before{ opacity:1; animation-play-state:running }
@keyframes shimmer-border{
  0%{background-position:0% 0%} 50%{background-position:100% 100%} 100%{background-position:0% 0%}
}

.s-thumb{ position:relative; height:175px; overflow:hidden; }
.s-thumb img{
  width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1;
  transition:transform .45s cubic-bezier(.25,.46,.45,.94), filter .45s ease;
  filter:saturate(.7) brightness(.82);
}
.s-card:hover .s-thumb img{ transform:scale(1.06); filter:saturate(1.05) brightness(.95) }
.s-thumb-overlay{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to bottom, rgba(13,19,32,0) 30%, rgba(13,19,32,.98) 100%);
}

.s-status{
  position:absolute; top:11px; right:11px; z-index:3;
  font-size:10px; font-weight:900; letter-spacing:.6px; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
  display:inline-flex; align-items:center; gap:5px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.s-status.working{ background:rgba(10,32,22,.8); color:#34d399; border:1px solid rgba(52,211,153,.22); box-shadow:0 2px 12px rgba(52,211,153,.12); }
.s-status.discontinue{ background:rgba(32,10,10,.8); color:#f87171; border:1px solid rgba(248,113,113,.22); }
.s-dot{ width:5px; height:5px; border-radius:50%; background:currentColor; }
.s-status.working .s-dot{ animation:pulse-dot 2.2s ease infinite; }
@keyframes pulse-dot{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(52,211,153,.5) }
  50%{ opacity:.7; box-shadow:0 0 0 4px rgba(52,211,153,0) }
}

.s-body{ padding:14px 16px 16px; position:relative; z-index:1; }
.s-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:4px; }
.s-title{ margin:0; font-size:16px; font-weight:900; color:#e4eeff; line-height:1.3; }
.s-feat-pill{
  flex-shrink:0; margin-top:2px; font-size:10px; font-weight:800; letter-spacing:.4px;
  padding:3px 9px; border-radius:999px; text-transform:uppercase; white-space:nowrap;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#3a4a6a;
}

.s-prog{ height:2px; border-radius:2px; background:rgba(255,255,255,.05); margin:10px 0 12px; overflow:hidden; }
.s-prog-fill{ height:100%; border-radius:2px; background:linear-gradient(90deg,#3b6fd4,#7c3aed,#ec4899); background-size:200% 100%; animation:prog-shimmer 3s linear infinite; }
@keyframes prog-shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.s-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.s-btn{
  border:0; border-radius:10px; padding:10px 8px; font-size:11px;
  font-weight:900; letter-spacing:.4px; text-transform:uppercase; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:all .18s ease; font-family:inherit; position:relative; overflow:hidden;
}
.s-btn svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.s-btn.copy-btn{ background:linear-gradient(135deg,#132540,#0f1e34); color:#6aaef5; border:1px solid rgba(80,140,240,.18); }
.s-btn.copy-btn:hover{ background:linear-gradient(135deg,#183050,#122540); color:#90c8ff; border-color:rgba(100,160,255,.32); box-shadow:0 4px 14px rgba(60,120,240,.18) }
.s-btn.copy-btn:active{ transform:scale(.97) }
.s-btn.copy-btn.copied{ background:linear-gradient(135deg,#0c2a1a,#0a2015); color:#34d399; border-color:rgba(52,211,153,.28); box-shadow:0 4px 14px rgba(52,211,153,.12); }
.s-btn.feat-btn{ background:rgba(255,255,255,.03); color:#506080; border:1px solid rgba(255,255,255,.07); }
.s-btn.feat-btn:hover{ background:rgba(255,255,255,.07); color:#8090b0; border-color:rgba(255,255,255,.12) }
.s-btn.feat-btn:active{ transform:scale(.97) }

.scripts-empty{ grid-column:1/-1; text-align:center; padding:70px 20px; color:#2a3a5a; }
.scripts-empty svg{ width:44px; height:44px; stroke:#1e2e4a; fill:none; stroke-width:1.4; margin:0 auto 14px; display:block }
.scripts-empty p{ margin:6px 0 0; font-size:13px; color:#1e2e4a; }

/* ===== FADE-UP ANIMATION (sama pola kayak tab getkey) =====
   Trigger: class .scripts-inview ditambahin ke #tab-scripts lewat
   nav.client.js (triggerInview) tiap kali tab ini ditampilkan. */
@keyframes scriptsFadeUp{
  from{ opacity:0; transform:translateY(32px); }
  to{ opacity:1; transform:translateY(0); }
}

.scripts-header, .scripts-meta, .s-card{
  opacity:0;
  transform:translateY(32px);
}

.scripts-inview .scripts-header{ animation:scriptsFadeUp .7s cubic-bezier(.16,.8,.24,1) .05s forwards; }
.scripts-inview .scripts-meta{ animation:scriptsFadeUp .7s cubic-bezier(.16,.8,.24,1) .15s forwards; }

.scripts-inview .s-card:nth-child(1){ animation:scriptsFadeUp .7s cubic-bezier(.16,.8,.24,1) .25s forwards; }
.scripts-inview .s-card:nth-child(2){ animation:scriptsFadeUp .7s cubic-bezier(.16,.8,.24,1) .32s forwards; }
.scripts-inview .s-card:nth-child(3){ animation:scriptsFadeUp .7s cubic-bezier(.16,.8,.24,1) .39s forwards; }
.scripts-inview .s-card:nth-child(4){ animation:scriptsFadeUp .7s cubic-bezier(.16,.8,.24,1) .46s forwards; }
.scripts-inview .s-card:nth-child(5){ animation:scriptsFadeUp .7s cubic-bezier(.16,.8,.24,1) .53s forwards; }
.scripts-inview .s-card:nth-child(6){ animation:scriptsFadeUp .7s cubic-bezier(.16,.8,.24,1) .6s forwards; }
.scripts-inview .s-card:nth-child(n+7){ animation:scriptsFadeUp .7s cubic-bezier(.16,.8,.24,1) .65s forwards; }

/* State "udah settle" abis animasi fade-up kelar (dipasang via JS di client.js
   pas animationend). Specificity sengaja cuma 1 class biar tetep kalah sama
   .s-card:hover (2 class) — jadi hover tetap bisa override transform buat
   efek naik pas cursor masuk, sementara resting state-nya gak balik opacity:0. */
.s-settled{
  opacity:1;
  transform:translateY(0);
}



/* ===== ROOT VARIABLES (Rift Theme) ===== */
:root {
  --outline: 0 0% 20%;
  --card: 222 47% 11%;
  --background: 222 84% 5%;
  --muted: 217 33% 17%;
  --muted-foreground: 215 20% 65%;
  --foreground: 210 40% 98%;
  --accent: 217 91% 60%;
  --ring: 217 91% 60%;
}

/* ===== FILTER MODAL ===== */
.ex-filter-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: ex-fade-in 0.2s ease;
}

.ex-filter-modal-overlay.ex-filter-modal-active {
  display: flex;
}

.ex-filter-modal {
  position: relative;
  background: rgba(8, 10, 14, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px;
  max-width: 640px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: ex-slide-up 0.3s ease;
}

.ex-filter-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.ex-filter-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #f2f5ff;
}

.ex-filter-modal-actions {
  display: flex;
  gap: 8px;
}

.ex-filter-clear-btn,
.ex-filter-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #9fb0d0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.ex-filter-clear-btn:hover,
.ex-filter-close-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #dfe6f5;
}

.ex-filter-close-btn {
  width: 32px;
  height: 32px;
  padding: 0;
}

.ex-filter-modal-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ex-filter-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ex-filter-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9fb0d0;
}

.ex-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ex-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #9fb0d0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.ex-filter-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #dfe6f5;
}

.ex-filter-chip.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

.ex-filter-chip svg {
  width: 14px;
  height: 14px;
}

/* ===== HEADER ===== */
.ex-header {
  text-align: center;
  margin: 42px auto 32px;
  max-width: 640px;
}

.ex-main-title {
  margin: 0 0 12px;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 900;
  letter-spacing: -0.5px;
  color: hsl(var(--foreground));
  line-height: 1.1;
}

.ex-main-title .accent {
  color: rgb(221, 83, 29);
}

.ex-subtitle {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 15px;
  line-height: 1.6;
}

/* ===== VERSIONS CARD (RIFT STYLE) ===== */
.ex-versions {
  max-width: 990px;
  margin: 0 auto 24px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(13, 16, 21, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  margin-top: 42px;
}

.ex-versions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 16px;
}

.ex-versions-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ex-versions-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #f2f5ff;
}

.ex-versions-subtitle {
  margin: 0;
  font-size: 12px;
  color: #5a6a8c;
}

.ex-versions-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #9fb0d0;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}

.ex-versions-refresh:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #dfe6f5;
}

.ex-versions-refresh.ex-spinning svg {
  animation: ex-spin 1s linear infinite;
}

.ex-versions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  padding: 12px;
}

@media (min-width: 640px) {
  .ex-versions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ex-versions-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===== VERSION CARD (RIFT STYLE) ===== */
.ex-version-card {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(12, 14, 16, 1);
  padding: 12px;
  transition: all 0.2s;
  position: relative;
}

.ex-version-card:hover {
  background: rgba(18, 22, 28, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
}

.ex-version-platform {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ex-version-platform p {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #f2f5ff;
}

.ex-version-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ex-version-number {
  font-size: 12px;
  font-weight: 600;
  font-family: monospace;
  color: #f2f5ff;
  word-break: break-all;
  line-height: 1.3;
  margin: 0;
}

.ex-version-date {
  font-size: 11px;
  color: #5a6a8c;
  margin: 0;
  line-height: 1.3;
}

.ex-version-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  margin-left: 4px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #9fb0d0;
  cursor: pointer;
  transition: all 0.2s;
}

.ex-version-copy:hover {
  color: #dfe6f5;
}

.ex-version-copy:active {
  transform: scale(0.95);
}

/* ===== SEARCH & CONTROLS (RIFT STYLE) ===== */
.ex-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 990px;
  margin: 0 auto 24px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(13, 16, 21, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.ex-search-wrap {
  position: relative;
  flex: 1;
}

.ex-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9fb0d0;
  pointer-events: none;
  width: 16px;
  height: 16px;
}

.ex-search-input {
  width: 100%;
  height: 40px;
  padding: 8px 12px 8px 40px;
  background: rgba(12, 14, 16, 1);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  color: #f2f5ff;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s;
}

.ex-search-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(18, 22, 28, 0.7);
}

.ex-search-input::placeholder {
  color: #5a6a8c;
}

.ex-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  background: rgba(12, 14, 16, 1);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  color: #9fb0d0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.ex-filter-btn:hover {
  color: #dfe6f5;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(18, 22, 28, 0.7);
}

.ex-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  background: rgba(18, 22, 28, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  color: #9fb0d0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.ex-refresh-btn:hover {
  color: #dfe6f5;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(18, 22, 28, 0.7);
}

.ex-refresh-btn.ex-spinning svg {
  animation: ex-spin 1s linear infinite;
}

/* ===== LOADING, ERROR, EMPTY STATES ===== */
.ex-loading,
.ex-error,
.ex-empty {
  text-align: center;
  padding: 64px 20px;
  color: hsl(var(--muted-foreground));
}

.ex-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  border: 3px solid hsl(var(--muted));
  border-top-color: hsl(var(--accent));
  border-radius: 50%;
  animation: ex-spin 0.8s linear infinite;
}

.ex-loading p,
.ex-error p,
.ex-empty p {
  margin: 8px 0 0;
  font-size: 14px;
}

.ex-error h3,
.ex-empty h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.ex-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 20px;
  background: hsl(var(--accent));
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.ex-retry-btn:hover {
  filter: brightness(1.1);
}

@keyframes ex-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== FADE-UP ANIMATION FOR CARDS ===== */
@keyframes exFadeUp {
  from { 
    opacity: 0; 
    transform: translateY(32px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Initial hidden state untuk animasi */
.ex-header,
.ex-versions,
.ex-controls,
.ex-platform-sections {
  opacity: 0;
  transform: translateY(32px);
}

/* Animasi di-trigger saat tab executors aktif dengan class exec-inview */
#tab-executors.exec-inview .ex-header {
  animation: exFadeUp 0.7s cubic-bezier(0.16, 0.8, 0.24, 1) 0.05s forwards;
}

#tab-executors.exec-inview .ex-versions {
  animation: exFadeUp 0.7s cubic-bezier(0.16, 0.8, 0.24, 1) 0.15s forwards;
}

#tab-executors.exec-inview .ex-controls {
  animation: exFadeUp 0.7s cubic-bezier(0.16, 0.8, 0.24, 1) 0.25s forwards;
}

/* Platform sections muncul sebagai satu group */
#tab-executors.exec-inview .ex-platform-sections {
  animation: exFadeUp 0.7s cubic-bezier(0.16, 0.8, 0.24, 1) 0.35s forwards;
}

/* ===== PLATFORM SECTIONS (OLD STYLE) ===== */
.ex-platform-sections {
  max-width: 990px;
  margin: 0 auto;
}

.ex-platform-section {
  margin-bottom: 20px;
}

.ex-platform-title {
  margin: 0 0 12px;
  padding: 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: #f2f5ff;
  letter-spacing: -0.3px;
}

.ex-platform-divider {
  height: 1px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.08);
}

/* ===== EXECUTOR CARDS (OLD STYLE) ===== */
.ex-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ex-item-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ex-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(12, 14, 16, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s;
  overflow: hidden;
}

.ex-item:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.ex-item.ex-expanded {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Left border indicator */
.ex-item-border {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 2px 0 0 2px;
  transition: width 0.2s;
}

.ex-item:hover .ex-item-border {
  width: 4px;
}

/* 3-dot indicator */
.ex-item-dots {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}

.ex-item-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9fb0d0;
  opacity: 0.4;
}

/* Main content */
.ex-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ex-item-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ex-item-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #f2f5ff;
  letter-spacing: -0.3px;
}

.ex-item-version {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-family: monospace;
  color: #9fb0d0;
}

.ex-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ex-item-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ex-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ex-badge.unc {
  background: rgba(168, 85, 247, 0.15);
  color: #ffffff;
  text-transform: none;
}

.ex-badge-s {
  color: rgba(216, 180, 254, 1);
}

.ex-badge.free {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.ex-badge.paid {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.ex-badge.special {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
}

.ex-item-updated {
  font-size: 12px;
  color: #5a6a8c;
}

/* Status badge */
.ex-item-status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.ex-status-label {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.3px;
}

/* Expand button */
.ex-item-expand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #9fb0d0;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}

.ex-item-expand:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #dfe6f5;
}

/* ===== EXPANDABLE DETAILS PANEL (RIFT STYLE) ===== */
.ex-item-details {
  display: none;
  background: rgba(8, 10, 14, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 16px 20px;
}

.ex-item-wrapper .ex-item-details[hidden] {
  display: none;
}

.ex-item-wrapper .ex-item-details:not([hidden]) {
  display: block;
}

.ex-item.ex-expanded + .ex-item-details {
  display: block;
}

.ex-item.ex-expanded .ex-item-expand svg {
  transform: rotate(180deg);
}

.ex-item-details-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ex-details-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ex-expand-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
}

.ex-expand-badge.detected {
  background: rgba(239, 68, 68, 0.15);
  color: #fc8181;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.ex-expand-badge.price {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
  font-weight: 700;
}

.ex-details-info-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ex-expand-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #9fb0d0;
}

.ex-expand-info strong {
  color: #dfe6f5;
  font-weight: 600;
}

.ex-expand-info svg {
  color: #4ade80;
}

.ex-details-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ex-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #9fb0d0;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.ex-detail-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #dfe6f5;
}

.ex-detail-btn:active {
  transform: scale(0.98);
}

.ex-sunc-btn {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

.ex-sunc-btn:hover {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.3);
  color: #d8b4fe;
}

.ex-sunc-text {
  display: inline;
  white-space: nowrap;
}

.ex-sunc-s {
  color: rgba(216, 180, 254, 1);
}

.ex-sunc-percentage {
  color: rgba(206, 172, 242, 1);
  font-weight: 600;
}

/* ===== sUNC MODAL OVERLAY ===== */
.ex-sunc-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: ex-fade-in 0.2s ease;
}

.ex-sunc-modal-overlay.ex-sunc-modal-active {
  display: flex;
}

@keyframes ex-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ex-sunc-modal-wrapper {
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  animation: ex-slide-up 0.3s ease;
}

@keyframes ex-slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ===== sUNC DATA DISPLAY (MODAL STYLE) ===== */
.ex-sunc-loading,
.ex-sunc-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  color: #9fb0d0;
  font-size: 13px;
  background: rgba(8, 10, 14, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.ex-sunc-error {
  color: #fc8181;
}

.ex-spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: ex-spin 0.8s linear infinite;
}

.ex-sunc-modal {
  position: relative;
  background: rgba(8, 10, 14, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.ex-sunc-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #9fb0d0;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  z-index: 10;
}

.ex-sunc-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #dfe6f5;
}

.ex-sunc-modal-header {
  margin-bottom: 24px;
}

.ex-sunc-modal-header h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: #f2f5ff;
}

.ex-sunc-warning {
  margin: 0;
  padding: 10px 12px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 6px;
  color: #fbbf24;
  font-size: 12px;
  line-height: 1.5;
}

.ex-sunc-modal-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
}

/* Left: Circle + Stats */
.ex-sunc-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ex-sunc-circle-wrapper {
  position: relative;
  width: 140px;
  height: 140px;
}

.ex-sunc-circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ex-sunc-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 8;
}

.ex-sunc-circle-progress {
  fill: none;
  stroke: #4ade80;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}

.ex-sunc-circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.ex-sunc-circle-percent {
  font-size: 32px;
  font-weight: 700;
  color: #f2f5ff;
  line-height: 1;
}

.ex-sunc-circle-label {
  margin-top: 4px;
  font-size: 13px;
  color: #9fb0d0;
}

.ex-sunc-executor-name {
  font-size: 16px;
  font-weight: 700;
  color: #f2f5ff;
  text-align: center;
}

.ex-sunc-executor-name span {
  font-size: 13px;
  font-weight: 500;
  color: #9fb0d0;
}

.ex-sunc-version-label {
  font-size: 12px;
  color: #5a6a8c;
  text-align: center;
}

.ex-sunc-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

.ex-sunc-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.ex-sunc-stat-card.passed {
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(34, 197, 94, 0.05);
}

.ex-sunc-stat-card.failed {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.05);
}

.ex-sunc-stat-number {
  font-size: 24px;
  font-weight: 700;
}

.ex-sunc-stat-card.passed .ex-sunc-stat-number {
  color: #4ade80;
}

.ex-sunc-stat-card.failed .ex-sunc-stat-number {
  color: #fc8181;
}

.ex-sunc-stat-label {
  font-size: 11px;
  color: #9fb0d0;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.ex-sunc-time-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  width: 100%;
}

.ex-sunc-time-value {
  font-size: 20px;
  font-weight: 700;
  color: #f2f5ff;
}

.ex-sunc-time-label {
  font-size: 11px;
  color: #9fb0d0;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Right: Function list */
.ex-sunc-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ex-sunc-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ex-sunc-search-icon {
  position: absolute;
  left: 12px;
  color: #9fb0d0;
  pointer-events: none;
}

.ex-sunc-search {
  flex: 1;
  height: 40px;
  padding: 8px 12px 8px 40px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #f2f5ff;
  font-size: 13px;
  font-family: inherit;
  transition: all 0.2s;
}

.ex-sunc-search:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.ex-sunc-search::placeholder {
  color: #5a6a8c;
}

.ex-sunc-filter-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #9fb0d0;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}

.ex-sunc-filter-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #dfe6f5;
}

.ex-sunc-func-list {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 8px;
}

.ex-sunc-func-list::-webkit-scrollbar {
  width: 6px;
}

.ex-sunc-func-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
}

.ex-sunc-func-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.ex-sunc-func-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

.ex-sunc-func-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.2s;
}

.ex-sunc-func-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.ex-sunc-func-status {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.ex-sunc-func-item.passed .ex-sunc-func-status {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.ex-sunc-func-item.failed .ex-sunc-func-status {
  background: rgba(239, 68, 68, 0.15);
  color: #fc8181;
}

.ex-sunc-func-name {
  font-size: 13px;
  font-weight: 600;
  font-family: monospace;
  color: #f2f5ff;
}

.ex-sunc-func-lib {
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ex-sunc-modal-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: #5a6a8c;
}

.ex-sunc-modal-footer strong {
  color: #9fb0d0;
}

.ex-sunc-modal-footer svg {
  color: #5a6a8c;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .ex-header {
    margin: 24px auto 20px;
  }
  
  .ex-main-title {
    font-size: 28px;
  }

  /* Keep the card as a single row (icon | content | status+chevron)
     instead of stacking everything vertically, so cards stay compact */
  .ex-item {
    padding: 12px 14px;
    gap: 10px;
  }

  .ex-item-dots {
    align-self: center;
  }

  .ex-item-main {
    gap: 5px;
    min-width: 0;
  }

  .ex-item-title-wrap {
    gap: 6px;
  }

  .ex-item-title {
    font-size: 14px;
  }

  .ex-item-version {
    font-size: 10px;
    padding: 1px 6px;
  }

  .ex-item-meta {
    gap: 6px;
    row-gap: 4px;
  }

  .ex-item-badges {
    gap: 5px;
  }

  .ex-badge {
    padding: 2px 6px;
    font-size: 9px;
  }

  /* Force "Last updated" onto its own line under the badges */
  .ex-item-updated {
    flex-basis: 100%;
    font-size: 11px;
  }

  /* Status pill + expand chevron sit together on the right,
     vertically centered against the whole card */
  .ex-item-status {
    flex-shrink: 0;
    width: auto;
  }

  .ex-status-label {
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border-radius: 20px;
  }

  .ex-item-expand {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
  }

  .ex-versions-grid {
    grid-template-columns: 1fr !important;
  }
  
  .ex-controls > div {
    flex-direction: column;
  }

  /* ===== sUNC RESULTS MODAL — MOBILE FIX =====
     Root cause of the cut-off: the modal content used a fixed
     280px + 1fr grid, which doesn't fit small screens and pushes
     the right column (search + function list) off-screen.
     Fix: stack it into a single column and shrink paddings/sizes. */
  .ex-sunc-modal-overlay {
    padding: 10px;
  }

  .ex-sunc-modal-wrapper {
    max-height: 95vh;
  }

  .ex-sunc-modal {
    padding: 16px;
  }

  .ex-sunc-modal-header h3 {
    font-size: 17px;
    padding-right: 36px;
  }

  .ex-sunc-warning {
    font-size: 11px;
    padding: 8px 10px;
  }

  .ex-sunc-close {
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
  }

  .ex-sunc-modal-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ex-sunc-left {
    gap: 12px;
  }

  .ex-sunc-circle-wrapper {
    width: 110px;
    height: 110px;
  }

  .ex-sunc-circle-percent {
    font-size: 26px;
  }

  .ex-sunc-stats-grid {
    gap: 8px;
  }

  .ex-sunc-stat-card {
    padding: 10px;
  }

  .ex-sunc-stat-number {
    font-size: 20px;
  }

  /* Function list: cap the height so the modal itself stays
     scrollable as one piece instead of fighting an inner scroll area */
  .ex-sunc-func-list {
    max-height: 260px;
  }

  .ex-sunc-func-item {
    grid-template-columns: 20px 1fr auto;
    gap: 8px;
    padding: 7px 10px;
  }

  .ex-sunc-func-name {
    font-size: 12px;
  }
}



/* Sama kayak tab getkey: biar konten (hero + card pricing) gak nempel ke
   atas & lebih ketengah secara vertikal. Di-scope ke #tab-premium.active
   (bukan #tab-premium aja) soalnya ID selector specificity-nya lebih tinggi
   dari .tab{display:none} yang ngatur show/hide antar tab -- kalau gak
   di-scope gini, tab premium bakal selalu keliatan walau lagi gak aktif. */
#tab-premium.active{
  min-height:40vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Scroll-lock cuma dipasang di desktop, sama kayak tab getkey. Di HP
   (Android/iOS) address bar browser suka nambah/ngurangin tinggi viewport,
   jadi patokan vh gak selalu akurat -- kalau overflow:hidden dipaksa di
   situ, konten yang kepotong gak bisa dijangkau sama sekali. */
@media(min-width:769px){
  body:has(#tab-premium.active){
    overflow:hidden;
  }
}

.pp-hero{ text-align:center; margin:0 auto 40px; max-width:600px; }
.pp-title{ margin:0 0 12px; font-size:clamp(28px,4.4vw,44px); font-weight:900; color:#f2f5ff; }
.pp-subtitle{ margin:0; color:#8d9ab8; font-size:15px; }

.pp-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
  max-width:1180px; margin:0 auto;
}
@media(max-width:1100px){ .pp-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .pp-grid{ grid-template-columns:1fr; } }

.pp-card{
  border-radius:8px; padding:24px 22px; background:linear-gradient(180deg,#12151d,#0d0f16);
  border:1px solid rgba(255,255,255,.08); box-shadow:0 16px 40px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
}
.pp-card.reco{ border-color:rgba(139,92,246,.35); box-shadow:0 16px 40px rgba(139,92,246,.1); }

.pp-name-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.pp-name{ font-size:20px; font-weight:900; color:#fff; margin:0; }
.pp-pill{
  display:inline-flex; align-items:center; gap:4px;
  font-size:9px; font-weight:900; letter-spacing:.5px; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; background:rgba(139,92,246,.14);
  border:1px solid rgba(139,92,246,.35); color:#c4b5fd;
}
.pp-pill svg{ width:11px; height:11px; stroke:currentColor; fill:none; flex-shrink:0; }
.pp-tagline{ margin:0 0 18px; font-size:13px; color:#8d9ab8; }

.pp-price-row{ display:flex; align-items:baseline; gap:6px; margin-bottom:20px; }
.pp-price{ font-size:32px; font-weight:900; color:#fff; }
.pp-period{ font-size:13px; color:#6a7794; }

.pp-actions{ display:grid; grid-template-columns:1fr auto; gap:8px; margin-bottom:22px; }
.pp-btn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 12px; border-radius:6px; font-size:13px; font-weight:800;
  cursor:pointer; border:0; font-family:inherit; transition:all .18s ease; text-decoration:none;
}
.pp-btn.start{ background:linear-gradient(90deg,#8b5cf6,#a78bfa); color:#0d0817; }
.pp-btn.start:hover{ filter:brightness(1.08); }
.pp-btn.bulk{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#dfe6f5; }
.pp-btn.bulk:hover{ background:rgba(255,255,255,.09); }
.pp-btn svg{ width:15px; height:15px; flex-shrink:0; }

.pp-feat{ list-style:none; margin:0; padding:0; display:grid; gap:10px; flex:1; }
.pp-feat li{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:#c3ccdf; line-height:1.4; }
.pp-feat .pp-check{ flex-shrink:0; width:16px; height:16px; color:#a78bfa; margin-top:1px; }
.pp-feat .pp-check svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.2; }

.pp-footnote{ text-align:center; margin:30px auto 0; font-size:12.5px; color:#6a7794; }
.pp-footnote a{ color:#a78bfa; text-decoration:underline; }

.pp-goback-wrap{ display:flex; justify-content:center; margin-top:22px; }
.pp-goback{
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:6px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); color:#dfe6f5;
  font-size:13px; font-weight:800; cursor:pointer; font-family:inherit;
}
.pp-goback:hover{ background:rgba(255,255,255,.08); }
.pp-goback svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.4; }

/* ===== FADE-UP ANIMATION (sama pola kayak tab getkey) =====
   Trigger: class .pp-inview ditambahin ke #tab-premium lewat
   nav.client.js (triggerInview) tiap kali tab ini ditampilkan. */
@keyframes ppFadeUp{
  from{ opacity:0; transform:translateY(32px); }
  to{ opacity:1; transform:translateY(0); }
}

.pp-hero, .pp-card, .pp-footnote{
  opacity:0;
  transform:translateY(32px);
}

.pp-inview .pp-hero{ animation:ppFadeUp .7s cubic-bezier(.16,.8,.24,1) .05s forwards; }

.pp-inview .pp-card:nth-child(1){ animation:ppFadeUp .7s cubic-bezier(.16,.8,.24,1) .18s forwards; }
.pp-inview .pp-card:nth-child(2){ animation:ppFadeUp .7s cubic-bezier(.16,.8,.24,1) .28s forwards; }
.pp-inview .pp-card:nth-child(3){ animation:ppFadeUp .7s cubic-bezier(.16,.8,.24,1) .38s forwards; }
.pp-inview .pp-card:nth-child(4){ animation:ppFadeUp .7s cubic-bezier(.16,.8,.24,1) .48s forwards; }

.pp-inview .pp-footnote{ animation:ppFadeUp .7s cubic-bezier(.16,.8,.24,1) .6s forwards; }



.pk-page{ max-width:880px; margin:0 auto; width:100%; }
.pk-back{ margin-bottom:32px; }

/* MOBILE: .pk-page adalah anak langsung #tab-getkey, dan #tab-getkey.active
   di mobile UDAH dikasih padding-top:80px (lihat style.js utama tab getkey).
   80px itu emang pas buat step Hero, tapi masih kegedean khusus buat
   halaman Key System ini (referensi "Rift" jauh lebih rapat ke navbar).
   Daripada ubah padding-top punya parent (bakal ikut geser step Hero &
   step Providers juga), di sini ditarik naik SENDIRI pakai margin-top
   negatif -- scoped ke .pk-page doang, step lain gak kesentuh sama
   sekali. */
@media(max-width:768px){
  .pk-page{ margin-top:-70px; margin-bottom:-100px; }
  .pk-back{ margin-bottom:24px; } /* Spacing normal */
}

/* ===== WRAPPER: cuma context posisi buat efek overlap, TIDAK PUNYA visual
   sendiri (no background/border/shadow) -- background/shadow ada di
   .pk-head & .pk-body masing-masing biar keliatan kayak 2 card yang
   ditumpuk/overlap (referensi "Rift"), BUKAN satu bentuk nyatu. ===== */
.pk-card{ position:relative; }

/* ===== HEADER: card sendiri, "melayang" DI ATAS .pk-body -- margin-bottom
   negatif narik .pk-body naik supaya ke-overlap, z-index lebih tinggi +
   shadow sendiri biar keliatan nge-pop di depan body. Padding dibikin lebih
   lega (20px 28px) biar gak keliatan sempit kayak referensi Rift.
   MARGIN NEGATIF KIRI-KANAN: bikin header lebih lebar dari body (nongol di samping). ===== */
.pk-head{
  position:relative; z-index:2; top:-6px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:#14171f; border:1px solid rgba(255,255,255,.07);
  border-radius:16px; padding:10px 28px; margin-bottom:-24px;
  margin-left:-20px; margin-right:-20px; /* Lebih lebar kiri-kanan */
  box-shadow:0 14px 30px rgba(0,0,0,.45);
}
.pk-head{ opacity:0; transform:translateY(28px); }
.gk-inview .pk-head{ animation:gkFadeUp .6s cubic-bezier(.16,.8,.24,1) .05s forwards; }

.pk-head-title{ min-width:170px; }
/* Title SATU WARNA POLOS (putih) persis referensi Rift -- ".accent" TIDAK
   lagi misahin warna nama provider, cuma dipertahanin classnya biar gak
   break kalau ada tempat lain yang masih pake span.accent, tapi warnanya
   disamain sama teks title biasa. */
.pk-title{ 
  margin:0 0 4px; 
  font-size:21px; 
  font-weight:600 !important; /* FORCE weight 600 */
  color:#f2f5ff; 
  letter-spacing:-.2px; 
  font-family:"Space Grotesk", sans-serif !important; /* FORCE Space Grotesk */
}
.pk-title .accent{ 
  color:#f2f5ff; 
  font-family:"Space Grotesk", sans-serif !important; /* FORCE Space Grotesk */
  font-weight:600 !important; /* FORCE weight 600 */
}
.pk-tag{ font-size:11px; font-weight:800; letter-spacing:.5px; color:var(--pk-accent); }

.pk-progress-wrap{ flex:1; min-width:220px; }
.pk-progress-info{ display:flex; justify-content:space-between; font-size:12px; color:#9fb0d0; margin-bottom:8px; }
.pk-progress-info b{ color:#fff; font-weight:800; }
.pk-status{ font-weight:800; letter-spacing:.4px; color:var(--pk-accent); font-size:11px; }
.pk-bar{ height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.pk-bar-fill{ height:100%; background:var(--pk-accent); transition:width .3s ease; }

.pk-start-btn{
  display:flex; align-items:center; gap:8px; padding:12px 22px; border-radius:10px; border:0;
  background:var(--pk-accent); color:#161311; font-weight:800; font-size:13px; cursor:pointer;
  font-family:inherit; white-space:nowrap; transition:filter .15s, transform .15s;
}
.pk-start-btn svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.pk-start-btn:hover{ filter:brightness(1.08); }
.pk-start-btn:active{ transform:translateY(1px); }
.pk-start-btn:disabled{ opacity:.5; cursor:not-allowed; filter:none; }

/* ===== MOBILE: header di-stack VERTIKAL (title -> progress bar -> START),
   START jadi tombol besar FULL-WIDTH persis referensi Rift -- bukan
   nyempil kecil di pojok kanan atas kayak sebelumnya (itu kejadian gara-gara
   flex-wrap:wrap otomatis nyusun start-btn nempel di baris judul begitu
   sisa lebarnya cukup). flex-direction:column MEMAKSA urutan DOM (title,
   progress, start) jadi 3 baris penuh, gak ada lagi elemen yang "nyempil". ===== */
@media(max-width:600px){
  .pk-head{
    flex-direction:column; align-items:stretch; 
    gap:8px; /* 10px → 8px */
    padding:12px 14px; /* 14px 16px → 12px 14px */
    margin-left:-6px; margin-right:-6px;
  }
  .pk-head-title{ min-width:0; }
  /* Title & tag "Lootlabs"/"Rift" dikecilin khusus mobile, card jadi keliatan
     lebih ringkas/pendek -- PC tetep pake 21px/11px dari rule di atas. */
  .pk-title{ font-size:16px; margin:0 0 2px; } /* 16.5px → 16px */
  .pk-tag{ font-size:9px; } /* 9.5px → 9px */
  .pk-progress-wrap{ min-width:0; }
  .pk-progress-info{ margin-bottom:6px; } /* 8px → 6px */
  /* START dipendekin (padding vertikal dikurangi 15px->10px) biar card
     header keseluruhan gak makan tempat terlalu tinggi, sesuai referensi. */
  .pk-start-btn{
    width:100%; justify-content:center; 
    padding:9px 16px; /* 10px 18px → 9px 16px */
    font-size:12.5px; /* 13px → 12.5px */
  }
}

/* ===== BODY: card sendiri, ADA DI BELAKANG .pk-head (z-index lebih
   rendah). padding-top dilebihin dari padding sisi lain supaya konten
   (desc, perks) turun ke bawah area yang ke-cover header yang overlap.
   Padding kiri-kanan & bawah dilebihin (34px / 40px) biar lega kayak
   referensi Rift, gak mepet lagi.
   margin-left/right NEGATIF sengaja dipakai biar body ini LEBIH LEBAR
   dari .pk-head dan nongol dikit di kiri-kanan (persis referensi "Rift" --
   card belakang keliatan lebih lebar dari card depan yang overlap). ===== */
.pk-body{
  position:relative; z-index:1;
  background:#0e1016; border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:44px 30px 34px;
  margin-left:-50px; margin-right:-50px;
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}
.pk-body{ opacity:0; transform:translateY(28px); }
.gk-inview .pk-body{ animation:gkFadeUp .65s cubic-bezier(.16,.8,.24,1) .15s forwards; }

.pk-desc{ text-align:center; color:#9fb0d0; font-size:13.5px; line-height:1.6; margin:0 auto 26px; max-width: 620px; font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif; }

/* ===== PERKS: outer wrapper (.pk-perks) border-nya pake warna aksen
   (transparan), MEMBUNGKUS 3 card kecil (.pk-info-box) yang masing-masing
   tetep punya background+border+radius sendiri -- jadi NESTED card, bukan
   cuma garis pemisah doang. Warna aksen tetap dipake sama seperti biasa,
   cuma buat border outer-nya dibikin transparan.
   ULTRA COMPACT: Gap 0.5px (SUPER MINIMAL), boxes +5% bigger (689px total) ===== */
.pk-perks{
  border:1px solid color-mix(in srgb, var(--pk-accent) 35%, transparent);
  border-radius:12px;
  padding:8px;
  margin:0 auto 28px;
  max-width: 689px; /* 656px * 1.05 = 689px */
}
.pk-info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0.5px; /* SUPER RAPAT - 0.5px gap */ }
.pk-info-box{
  padding:13px 17px; /* 12px 16px * 1.05 ≈ 13px 17px */
  border-radius:9px;
  background:rgba(12,13,14,1); 
  border:1px solid rgba(255,255,255,.07);
  max-width: 207px; /* 197px * 1.05 = 207px */
  margin: 0 auto;
}
/* PENTING: media query di bawah ini HARUS ditulis SETELAH rule
   .pk-info-box/.pk-desc di atas. CSS itu "yang belakangan menang" kalau
   specificity-nya sama -- kalau media query ditaro DI ATAS rule biasa
   (kayak bug sebelumnya), overridenya bakal KEKALAHAN sama rule biasa itu
   walau lagi aktif di lebar layar yang sesuai. Ini kenapa box kemarin
   masih keliatan sempit padahal media query-nya udah "aktif". */
@media(max-width:700px){
  .pk-info-grid{ grid-template-columns:1fr; gap:10px; }
  /* Wrapper LUAR (.pk-perks) juga di-full-width-in -- sebelumnya kena
     max-width:689px dari rule PC di atas, jadi di layar sempit dia keliatan
     lebih pendek/nyempit dibanding .pk-body-nya sendiri (nongol gap kiri
     kanan). max-width:none biar dia ngisi penuh lebar body. */
  .pk-perks{ max-width:none; }
  /* Perk box full-width edge-to-edge (persis referensi Rift) -- HANYA di
     bawah breakpoint ini (saat grid udah 1 kolom). Tampilan PC/desktop di
     atas 700px TIDAK disentuh. */
  .pk-info-box{ max-width:none; width:100%; margin:0; padding:12px 14px; }
  /* Teks deskripsi tiap perk (mis. "Do the key system each day to keep
     your streak alive.") dikecilin dikit + padding box dirapetin biar
     muat 1 baris kayak referensi Rift, bukan 2 baris kayak sebelumnya. */
  .pk-info-box p{ font-size:12px; line-height:1.45; }
}
@media(max-width:600px){
  /* Subtitle 1 baris di mobile (persis referensi) -- HAPUS batasan
     max-width sempit yang kemarin dikasih (itu yang bikin kepaksa wrap
     jadi 2 baris); biarin ngikutin lebar container aslinya + font
     dikecilin dikit biar muat 1 baris. PC tetep pake .pk-desc yang di
     atas (13.5px/620px), gak kesentuh. */
  .pk-desc{ font-size:11.5px; line-height:1.45; margin:-2px auto 18px; max-width:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
}
.pk-info-head{ 
  display:flex; align-items:center; 
  gap:6px;
  font-size:12.5px; /* 12px * 1.05 ≈ 12.5px */
  font-weight:800; color:var(--pk-accent); 
  margin-bottom:4px;
  text-transform:uppercase; letter-spacing:.3px; 
}
.pk-info-head svg{ 
  width:15px; height:15px; /* 14.5px * 1.05 ≈ 15px */
  stroke:none; fill:currentColor; stroke-width:0; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; 
}
.pk-info-box p{ 
  margin:0; 
  font-size:13px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif !important; /* FORCE Inter */
  font-weight:400 !important; /* FORCE normal weight */
  color:#8d9ab8; 
  line-height:1.5; 
  word-wrap:break-word;
}

.pk-table-head, .pk-table-row{
  display:grid; grid-template-columns:1.8fr 0.9fr 1fr 1fr; gap:20px; align-items:center;
}
.pk-table-head{ 
  padding-bottom:14px; 
  border-bottom:1px solid rgba(255,255,255,.07); /* Divider HANYA di bawah header */
  font-size:10.5px; font-weight:800; letter-spacing:.4px; color:#6c7994; text-transform:uppercase; 
}
.pk-table-row{ 
  padding-top:14px; 
  /* HAPUS border-top - gak ada divider antar baris */
  font-size:13.5px; color:#dfe6f5; 
}
/* FIX: .pk-table-row punya "display:grid" sendiri, yang otomatis NGALAHIN
   default browser buat attribute [hidden] (display:none). Tanpa baris ini,
   toggle "el.row.hidden = true/false" di client.js gak ngefek ke tampilan
   -- baris tetep keliatan (isinya cuma "--") walau user belum PERNAH dapet
   key sama sekali. Rule ini WAJIB tetep ada. */
.pk-table-row[hidden]{ display:none; }
@media(max-width:600px){
  .pk-table-head{ display:none; }
  .pk-table-row{ grid-template-columns:1fr; gap:8px; } /* 10px → 8px */
  /* Header makin tinggi di mobile (title+progress+START numpuk vertikal),
     jadi padding-top body dilebihin dikit biar konten (desc/perks) gak
     ketiban/ketutup header yang overlap. ULTRA COMPACT seperti Rift */
  .pk-body{ 
    margin-left:-6px; margin-right:-6px; 
    padding-top:32px; /* 38px → 32px */
    padding-left:16px; /* 18px → 16px */
    padding-right:16px; /* 18px → 16px */
    padding-bottom:20px; /* 24px → 20px */
  }
  
  /* ULTRA COMPACT spacing desc dan perks seperti Rift */
  .pk-desc{ 
    margin:26px auto 24px; /* top → 26px */
    font-size:12px; /* Lebih kecil */
    line-height:1.4;
  }
  .pk-perks{ 
    margin:0 auto 16px; /* 20px → 16px */
    padding:6px; /* 8px → 6px */
  }
  .pk-info-box{ 
    padding:10px 12px; /* 12px 14px → 10px 12px */
    border-radius:8px;
  }
  .pk-info-head{ 
    margin-bottom:3px; /* 4px → 3px */
    font-size:12px;
  }
  .pk-info-head svg{ width:14px; height:14px; } /* 15px → 14px */
  .pk-info-box p{ 
    font-size:11.5px; /* 12px → 11.5px */
    line-height:1.4;
  }
  .pk-table{ margin-bottom:16px; } /* Tambah spacing control */

  /* Tiap kolom di baris key dikasih label kecil (TIME LEFT/STATUS/ACTIONS)
     karena header tabel disembunyiin -- persis pola list Rift, bukan cuma
     angka/status polos tanpa keterangan. Kolom KEY (anak pertama) TIDAK
     dikasih label karena udah jelas dari icon kunci + tombol copy-nya. */
  .pk-table-row > *{ display:flex; align-items:center; justify-content:space-between; width:100%; }
  .pk-table-row > *:first-child{ justify-content:flex-start; }
  .pk-table-row > *:nth-child(2)::before{ content:'Time left'; }
  .pk-table-row > *:nth-child(3)::before{ content:'Status'; }
  .pk-table-row > *:nth-child(4)::before{ content:'Actions'; }
  .pk-table-row > *:nth-child(2)::before,
  .pk-table-row > *:nth-child(3)::before,
  .pk-table-row > *:nth-child(4)::before{
    font-size:10px; /* 10.5px → 10px */
    font-weight:800; letter-spacing:.4px; color:#6c7994; text-transform:uppercase;
  }
  
  /* Buttons lebih compact */
  .pk-renew-btn{ 
    padding:8px 13px; /* 9px 15px → 8px 13px */
    font-size:11px; /* 11.5px → 11px */
  }
  .pk-newkey-btn{ 
    margin:18px auto 0; /* 22px → 18px */
    padding:9px 18px; /* 10px 22px → 9px 18px */
    font-size:12px; /* 12.5px → 12px */
  }
  .pk-note{ 
    margin:14px 0 0; /* 18px → 14px */
    padding:9px 12px; /* 11px 14px → 9px 12px */
    font-size:11.5px; /* 12px → 11.5px */
  }
}

/* ===== EMPTY STATE (belum pernah punya key sama sekali) -- list simpel
   label:value persis referensi "Rift", ditampilin GANTI tabel yang butuh
   header kolom. Ditoggle [hidden] dari client.js (kebalikan .pk-table-row). ===== */
.pk-table-empty{ display:flex; flex-direction:column; gap:12px; padding-top:14px; }
.pk-table-empty[hidden]{ display:none; }
.pk-empty-row{ display:flex; align-items:center; justify-content:space-between; font-size:13.5px; color:#dfe6f5; }
.pk-empty-row > span:first-child{ font-size:10.5px; font-weight:800; letter-spacing:.4px; color:#6c7994; text-transform:uppercase; }
.pk-empty-main{ justify-content:flex-start; color:#9fb0d0; }
/* PC/desktop TIDAK dipakein empty-state list ini -- tampilannya balik
   persis semula (header tabel SELALU keliatan, baris data disembunyiin
   kalau belum ada key, TANPA list "No key yet"). client.js tetep nge-toggle
   [hidden] pakai JS yang sama di semua lebar layar, jadi override paksa
   di sini biar PC gak kesentuh sama sekali oleh perubahan ini. */
@media(min-width:601px){
  .pk-table-head{ display:grid !important; }
  .pk-table-empty{ display:none !important; }
}

/* ===== Cell key (icon key + string + tombol copy kecil) ===== */
.pk-key-cell{ display:flex; align-items:center; gap:10px; min-width:0; }
.pk-key-cell [data-pk-key-text]{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:var(--pk-accent);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pk-copy-btn{
  display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#9fb0d0; cursor:pointer;
  flex-shrink:0; transition:color .15s, border-color .15s;
}
.pk-copy-btn svg{ width:13px; height:13px; stroke:none; fill:currentColor; stroke-width:0; stroke-linecap:round; stroke-linejoin:round; }
.pk-copy-btn:hover{ color:#fff; border-color:rgba(255,255,255,.2); }
.pk-copy-btn.is-copied{ color:var(--pk-accent); border-color:var(--pk-accent); }
.pk-key-icon{ width:15px; height:15px; color:#eab308; fill:#eab308; flex-shrink:0; }
.pk-key-icon svg{ width:100%; height:100%; stroke:none; fill:currentColor; stroke-width:0; stroke-linecap:round; stroke-linejoin:round; }

/* ===== Status pill (ACTIVE / EXPIRED) ===== */
.pk-status-pill{
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:800;
  letter-spacing:.3px; background:rgba(255,255,255,.06); color:#9fb0d0;
}
.pk-status-pill.is-active{ background:rgba(34,197,94,.15); color:#22c55e; }
.pk-status-pill.is-expired{ background:rgba(245,158,11,.15); color:#f59e0b; }

/* ===== Expired time display (00:00 merah) ===== */
.pk-time-expired{
  color:#ef4444;
  font-weight:700;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}

/* ===== Tombol dobel-fungsi RENEW / ADD TIME (per baris key, kolom ACTIONS) -- oranye ===== */
.pk-renew-btn{
  display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border-radius:9px;
  border:1px solid rgba(245,158,11,.35); background:transparent; color:#f59e0b;
  font-weight:800; font-size:11.5px; cursor:not-allowed; font-family:inherit; opacity:.55;
  transition:background .15s, border-color .15s, color .15s, filter .15s, opacity .15s;
}
.pk-renew-btn svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.pk-renew-btn.is-solid{ cursor:pointer; opacity:1; background:#f59e0b; border-color:#f59e0b; color:#1a1206; }
.pk-renew-btn.is-solid:hover{ filter:brightness(1.08); }
.pk-renew-btn:disabled{ pointer-events:none; }
/* Key udah kena cap bonus maksimal -- beda dari sekadar "belum checkpoint",
   biar user ngerti ini bukan checkpoint yang kurang tapi emang udah mentok. */
.pk-renew-btn.is-capped{ opacity:.4; border-style:dashed; }

/* ===== Tombol GET A NEW KEY (di bawah tabel, tengah) -- pakai warna accent provider ===== */
.pk-newkey-btn{
  display:flex; align-items:center; gap:8px; margin:22px auto 0; padding:10px 22px; border-radius:10px;
  border:1px solid color-mix(in srgb, var(--pk-accent) 40%, transparent); 
  background:transparent; 
  color:var(--pk-accent);
  font-weight:800; font-size:12.5px; cursor:not-allowed; font-family:inherit; opacity:.55;
  transition:background .15s, border-color .15s, color .15s, filter .15s, opacity .15s;
}
.pk-newkey-btn svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.pk-newkey-btn.is-solid{ 
  cursor:pointer; opacity:1; 
  background:var(--pk-accent); 
  border-color:var(--pk-accent); 
  color:#0b1120; 
}
.pk-newkey-btn.is-solid:hover{ filter:brightness(1.08); }
.pk-newkey-btn:disabled{ pointer-events:none; }

.pk-note{
  margin:18px 0 0; padding:11px 14px; border-radius:10px; text-align:center;
  font-size:12px; line-height:1.5; color:#c3ccdf;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
}
.pk-badge{
  display:flex; align-items:center; justify-content:center; gap:7px; margin:14px 0 0;
  font-size:11.5px; font-weight:700; color:var(--pk-accent);
}
.pk-badge svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ========== SweetAlert2 Custom Theme untuk JinHub ========== */
.swal-jinhub-popup {
  border-radius: 20px !important;
  padding: 2.5rem !important;
  box-shadow: 0 25px 80px rgba(0,0,0,0.6) !important;
  border: 1px solid rgba(157, 124, 255, 0.2) !important;
}

.swal-jinhub-icon {
  width: 80px !important;
  height: 80px !important;
  border-width: 4px !important;
  margin: 0 auto 1.5rem !important;
}

.swal-jinhub-icon.swal2-success {
  border-color: #4ade80 !important;
}

.swal-jinhub-icon.swal2-success .swal2-success-line-tip,
.swal-jinhub-icon.swal2-success .swal2-success-line-long {
  background-color: #4ade80 !important;
}

.swal-jinhub-icon.swal2-success .swal2-success-ring {
  border-color: rgba(74, 222, 128, 0.3) !important;
}

.swal-jinhub-icon.swal2-error {
  border-color: #f87171 !important;
}

.swal-jinhub-icon.swal2-error .swal2-x-mark-line-left,
.swal-jinhub-icon.swal2-error .swal2-x-mark-line-right {
  background-color: #f87171 !important;
}

.swal-jinhub-icon.swal2-warning {
  border-color: #fb923c !important;
  color: #fb923c !important;
}

.swal-jinhub-icon.swal2-info {
  border-color: #60a5fa !important;
  color: #60a5fa !important;
}

.swal-jinhub-title {
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.75rem !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
}

.swal-jinhub-text {
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  opacity: 0.85 !important;
  color: #e5e7eb !important;
  margin-bottom: 1rem !important;
}

/* Progress bar (timer) */
.swal2-timer-progress-bar {
  background: linear-gradient(90deg, #9d7cff 0%, #7c3aed 100%) !important;
  height: 4px !important;
}

/* Animasi smooth */
@keyframes swal-show {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes swal-hide {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Backdrop dengan blur - HANYA untuk popup center, BUKAN toast */
.swal2-container:not(.swal2-top-end):not(.swal2-bottom) {
  backdrop-filter: blur(8px) !important;
  background: rgba(0, 0, 0, 0.75) !important;
}

/* Toast notification - NO BACKDROP (transparan) - FORCE HIDE */
.swal2-container.swal2-top-end,
.swal2-container.swal2-bottom,
.swal-jinhub-toast-container {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Force hide backdrop untuk toast - override inline styles */
.swal-jinhub-toast-container .swal2-backdrop-show,
.swal2-container.swal2-bottom .swal2-backdrop-show {
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* No animation class untuk backdrop */
.swal2-noanimation {
  animation: none !important;
  transition: none !important;
}

/* ========== Toast Notification (top-end) ========== */
.swal-jinhub-toast {
  border-radius: 12px !important;
  padding: 1rem 1.25rem !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
  border: 1px solid rgba(157, 124, 255, 0.3) !important;
  min-width: 280px !important;
}

/* Toast di bottom (dibawah card key) */
.swal-jinhub-toast-bottom {
  margin-bottom: 1.5rem !important;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5), 0 5px 20px rgba(0,0,0,0.3) !important;
}

.swal-jinhub-toast-icon {
  width: 32px !important;
  height: 32px !important;
  border-width: 2px !important;
  margin: 0 0.75rem 0 0 !important;
}

.swal-jinhub-toast-icon.swal2-success {
  border-color: #4ade80 !important;
}

.swal-jinhub-toast-icon.swal2-success .swal2-success-line-tip,
.swal-jinhub-toast-icon.swal2-success .swal2-success-line-long {
  background-color: #4ade80 !important;
}

.swal-jinhub-toast-icon.swal2-error {
  border-color: #f87171 !important;
}

.swal-jinhub-toast-icon.swal2-error .swal2-x-mark-line-left,
.swal-jinhub-toast-icon.swal2-error .swal2-x-mark-line-right {
  background-color: #f87171 !important;
}

.swal-jinhub-toast-title {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

/* Toast timer progress bar */
.swal2-toast .swal2-timer-progress-bar {
  background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%) !important;
  height: 3px !important;
}

.swal2-toast.swal2-icon-error .swal2-timer-progress-bar {
  background: linear-gradient(90deg, #f87171 0%, #ef4444 100%) !important;
}