/* ===========================================================
   NEBULA PANEL — Neumorphism theme
   Base: biru muda terang (#eef4fb) + putih, dengan mode gelap.
   =========================================================== */

:root{
  --blue-50:#eef4fb;
  --blue-100:#e1ecf9;
  --blue-300:#a9c9f0;
  --blue-500:#5b93e0;
  --blue-700:#2f65b3;
  --white:#ffffff;
  --ink:#1e2a3a;
  --ink-soft:#5b6b7f;

  --bg: var(--blue-50);
  --surface: var(--blue-50);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --shadow-light: #ffffff;
  --shadow-dark: #c3d4ea;
  --accent: var(--blue-500);

  --radius: 20px;
}

[data-theme="dark"]{
  --bg:#141a23;
  --surface:#141a23;
  --text:#eef2f7;
  --text-soft:#9aa7b8;
  --shadow-light:#1b2330;
  --shadow-dark:#0d1119;
  --accent: var(--blue-300);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Segoe UI', 'Inter', Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:background .3s ease, color .3s ease;
  padding-top:env(safe-area-inset-top,0px);
}

.container{max-width:1080px;margin:0 auto;padding:0 20px;}

/* Neumorphic surface helpers */
.neu{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
}
.neu-inset{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow: inset 6px 6px 12px var(--shadow-dark), inset -6px -6px 12px var(--shadow-light);
}
.neu-btn{
  background:var(--surface);
  border:none;
  border-radius:14px;
  box-shadow: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
  padding:12px 22px;
  font-weight:600;
  font-size:15px;
  color:var(--text);
  cursor:pointer;
  transition:box-shadow .15s ease, transform .1s ease;
}
.neu-btn:active{
  box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
  transform:translateY(1px);
}
.neu-btn.primary{ color:var(--white); background:linear-gradient(135deg,var(--blue-500),var(--blue-700)); box-shadow:6px 6px 14px var(--shadow-dark), -6px -6px 14px var(--shadow-light); }

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
  background:var(--bg);
}
.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;}
.brand img{height:34px;width:34px;border-radius:10px;object-fit:cover;}
.brand span{ color: var(--brand-color, #34d399); }

.theme-toggle{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
}

/* Hero */
.hero{ text-align:center; padding:48px 0 32px; }
.hero h1{ font-size:clamp(26px,4vw,38px); margin:0 0 10px; letter-spacing:-.02em; }
.hero p{ color:var(--text-soft); max-width:520px; margin:0 auto; font-size:15px; }

/* Package grid - fleksibel: 1 kolom di HP, sampai 4 kolom di laptop */
.pkg-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:22px;
  padding:12px 0 60px;
}
.pkg-card{ padding:26px; display:flex; flex-direction:column; gap:14px; }
.pkg-card .ram{ font-size:30px; font-weight:800; }
.pkg-card .ram small{ font-size:14px; font-weight:600; color:var(--text-soft); }
.pkg-card .specs{ display:flex; flex-direction:column; gap:6px; font-size:13.5px; color:var(--text-soft); }
.pkg-card .desc{ font-size:13px; color:var(--text-soft); line-height:1.5; min-height:38px; }
.pkg-card .price{ font-size:19px; font-weight:800; color:var(--accent); }
.pkg-card .neu-btn{ margin-top:auto; text-align:center; }

/* Announcement banner (drop-down center notif) */
#announce-banner{
  position:fixed; top:-120px; left:50%; transform:translateX(-50%);
  z-index:200; min-width:280px; max-width:92vw;
  padding:14px 20px; border-radius:16px;
  display:flex; align-items:center; gap:10px;
  transition: top .5s cubic-bezier(.2,.9,.3,1.3);
  background:var(--surface);
  box-shadow: 8px 8px 20px var(--shadow-dark), -8px -8px 20px var(--shadow-light);
}
#announce-banner.show{ top:calc(16px + env(safe-area-inset-top,0px)); }
#announce-banner .dot{ width:9px;height:9px;border-radius:50%; background:var(--accent); flex:none; }

/* Forms */
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color:var(--text-soft); }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:12px 14px; border:none; border-radius:12px;
  background:var(--surface); color:var(--text); font-size:14.5px;
  box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
}
.form-group input:focus, .form-group select:focus{ outline:2px solid var(--accent); }

.modal-overlay{
  position:fixed; inset:0; background:rgba(10,15,25,.45);
  display:flex; align-items:center; justify-content:center; z-index:150;
  padding:20px;
}
.modal-box{ width:100%; max-width:420px; padding:28px; }

.qr-box{ text-align:center; padding:28px; }
.qr-box img{ width:220px; height:220px; border-radius:16px; margin:16px auto; display:block; }

.badge{ display:inline-block; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:700; }
.badge.pending{ background:#fef3c7; color:#92400e; }
.badge.success{ background:#d1fae5; color:#065f46; }
.badge.failed{ background:#fee2e2; color:#991b1b; }

footer{ text-align:center; padding:30px 0 50px; color:var(--text-soft); font-size:13px; }

@media (max-width:560px){
  .pkg-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .pkg-card{ padding:18px; }
}