/* ExsaCloud — Design System
   Solusi Digital, Tanpa Batas */
:root{
  --bg:#050B16;
  --bg-soft:#0A1324;
  --surface:rgba(255,255,255,.035);
  --line:rgba(120,180,255,.14);
  --brand:#1E90FF;
  --brand-2:#4CC9FF;
  --brand-deep:#0B57D0;
  --text:#EAF2FF;
  --muted:#8FA3BF;
  --radius:1.5rem;
}
*{scrollbar-width:thin;scrollbar-color:#1E90FF33 transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#1E90FF44;border-radius:99px}
body{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  background-color:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  position:relative;
}
h1,h2,h3,.display{font-family:'Space Grotesk','Plus Jakarta Sans',sans-serif;letter-spacing:-.02em}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(30,144,255,.22), transparent 60%),
    radial-gradient(700px 480px at 92% 4%, rgba(76,201,255,.16), transparent 62%),
    radial-gradient(800px 600px at 50% 120%, rgba(11,87,208,.20), transparent 65%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(140,190,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(140,190,255,.06) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 0%,#000,transparent 75%);
}
.glass{background:var(--surface);backdrop-filter:blur(16px);border:1px solid var(--line);}
.glass-panel{background:linear-gradient(180deg,rgba(16,30,54,.85),rgba(8,16,30,.9));border:1px solid var(--line);}
.neon-border{border:1px solid var(--line);background:linear-gradient(180deg,#0C1728,#080F1C);transition:.35s cubic-bezier(.2,.7,.3,1);}
.neon-border:hover{border-color:var(--brand);box-shadow:0 18px 40px -18px rgba(30,144,255,.65),0 0 0 1px rgba(30,144,255,.25) inset;transform:translateY(-6px);}
.grad-text{background:linear-gradient(100deg,#7FD8FF,#1E90FF 55%,#B9E4FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.grad-btn{background:linear-gradient(135deg,var(--brand-deep),var(--brand) 45%,var(--brand-2));transition:.3s;box-shadow:0 10px 24px -12px rgba(30,144,255,.9);}
.grad-btn:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(76,201,255,.9);}
.variant-card{transition:.2s;cursor:pointer}
.variant-card:hover{background:rgba(30,144,255,.10);border-color:var(--brand)}
.variant-disabled{opacity:.45;cursor:not-allowed;pointer-events:none;filter:grayscale(100%)}
.brand-logo{filter:drop-shadow(0 6px 18px rgba(30,144,255,.45))}
.hairline{background:linear-gradient(90deg,transparent,rgba(76,201,255,.5),transparent);height:1px;border:0}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.animate-up{animation:fadeIn .5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.float{animation:floatY 6s ease-in-out infinite}
input,select,textarea{font-family:inherit}
input:focus,select:focus{border-color:var(--brand)!important;box-shadow:0 0 0 3px rgba(30,144,255,.15)}

/* ============ RESPONSIVE & UX ============ */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden;overscroll-behavior-y:none;
  padding-bottom:env(safe-area-inset-bottom);
  -webkit-tap-highlight-color:rgba(30,144,255,.15)}
img{max-width:100%;height:auto}
.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
button,a,input,select{min-height:38px}
button,a[href]{touch-action:manipulation}
/* Anti "copy paste" ringan pada teks non-interaktif */
body{-webkit-user-select:none;user-select:none}
input,textarea,code,.select-all,select{-webkit-user-select:text;user-select:text}

@media (max-width:640px){
  :root{--radius:1.15rem}
  body::after{background-size:44px 44px}
  .neon-border:hover{transform:none}
  .grad-btn:hover{transform:none}
  #superModal > div{border-bottom-left-radius:0;border-bottom-right-radius:0}
}
@media (max-width:380px){
  .brand-tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
/* Tabel admin nyaman di mobile */
@media (max-width:640px){
  table{font-size:12px}
  table th,table td{padding-left:14px!important;padding-right:14px!important}
}