/* urlmini — minimal white & purple */
:root{
  --bg:#f7f6ff; --card:#ffffff; --text:#1f1b2d; --muted:#6c6793;
  --primary:#6c4dd6; --primary-2:#8b6dff; --border:#eceaf8; --danger:#e5484d;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Inter',Arial,sans-serif;color:var(--text)}
a{color:var(--primary);text-decoration:none}
.bg{background:var(--bg);min-height:100vh}
.container{width:min(1100px,92%);margin:0 auto;padding:24px 0 48px}

/* Typography */
.title{font-size:28px;margin:0 0 16px;font-weight:800;letter-spacing:-.02em}
.subtitle{color:var(--muted);margin-bottom:24px}
.muted{color:var(--muted)}

/* Card */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;margin:16px 0;box-shadow:0 0 0 1px rgba(108,77,214,.03),0 6px 18px rgba(17,12,35,.06)}
.card.narrow{max-width:520px}
.center{text-align:center}

/* Buttons */
.btn{display:inline-block;background:linear-gradient(180deg,var(--primary),var(--primary-2));color:#fff;padding:12px 18px;border-radius:12px;border:0;cursor:pointer;font-weight:600;box-shadow:0 6px 14px rgba(108,77,214,.25)}
.btn:hover{transform:translateY(-1px)}
.btn.small{padding:8px 12px;font-size:12px;border-radius:10px}
.btn.ghost{background:#f2efff;color:var(--primary);box-shadow:none}
.btn.danger{background:var(--danger);box-shadow:none}

/* Forms */
input,select{width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--border);background:#fff;margin:6px 0 12px;outline:none}
label{font-size:13px;color:var(--muted)}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px 8px;text-align:left;font-size:14px}
.table thead th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* Layout grids */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid2{display:grid;gap:12px;grid-template-columns:1fr 2fr auto;align-items:end}
@media (max-width:720px){.grid2{grid-template-columns:1fr}}

/* Metrics */
.metric{text-align:center}
.metric-num{font-size:36px;font-weight:800}
.metric-label{color:var(--muted)}

/* ===== Navbar (desktop first) ===== */
.nav{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:10}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:min(1100px,92%);margin:0 auto;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#2b2357;letter-spacing:-.02em}
.nav .nav-toggle{display:none;appearance:none;border:0;background:transparent;padding:6px;border-radius:10px}
.nav .nav-toggle:hover{background:#f2efff}
.nav .links{display:flex;gap:14px}
.nav .links a{padding:8px 12px;border-radius:10px}
.nav .links a:hover{background:#f2efff}

/* Alerts */
.alert{background:#fff7cc;border:1px solid #ffe58a;padding:10px 12px;border-radius:10px;margin-top:10px}
.alert.success{background:#eafff2;border-color:#bdf0cf}

/* Utils */
.truncate{max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nowrap{white-space:nowrap}
.nowrap > .btn,.nowrap > details{margin-right:6px}

/* Hero (landing) */
.hero{padding:80px 0 40px;background:radial-gradient(60% 100% at 50% 0%,#efeaff 0,rgba(255,255,255,0) 60%)}
.logo-hero{height:72px;display:block;margin:0 auto 10px}
.inline-form input{width:220px;display:inline-block;margin:6px}

/* Center screen helper (login) */
.center-screen{display:flex;align-items:center;justify-content:center;min-height:100vh}
.center-screen .card{margin:0}

/* ===== Mobile polish (<=720px) ===== */
@media (max-width:720px){
  /* Container & headings */
  .container{width:94%;padding:16px 0 32px}
  .title{font-size:22px;margin-bottom:12px}

  /* Navbar: hamburger + dropdown full width */
  .nav .wrap{padding:8px 0}
  .nav .nav-toggle{display:inline-flex;align-items:center;justify-content:center;margin-right:4px}
  .brand span{display:none}                  /* cegah teks dobel */
  .nav .links{
    position:absolute;left:0;right:0;top:100%;
    display:none;flex-direction:column;padding:8px;background:#fff;
    border-bottom:1px solid var(--border);box-shadow:0 10px 24px rgba(17,12,35,.06);
  }
  .nav .links.open{display:flex}
  .nav .links a{padding:12px 14px;border-radius:12px;margin:2px 6px}
  .nav .links a:hover{background:#f7f6ff}

  /* Card & form */
  .card{padding:16px;border-radius:14px;margin:12px 0}
  label{font-size:12px}
  input,select{padding:12px;border-radius:12px;font-size:14px}

  /* Grid form 1 kolom + tombol full width */
  .grid2{grid-template-columns:1fr;gap:10px}
  .grid2 .btn{width:100%}

  /* Aksi tombol berjarak */
  .nowrap > .btn, .nowrap > details{margin-right:6px;margin-top:6px}

  /* Inline edit form */
  .inline-form input{width:100%;display:block;margin:6px 0}

  /* Table scroll-x */
  .table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table thead th{white-space:nowrap}
  .table td.truncate{max-width:260px}

  /* Hero landing */
  .hero{padding:56px 0 28px}
  .logo-hero{height:60px}

  /* Login center di mobile */
  .center-screen{min-height:calc(100vh - 56px)}
}