:root{
  --bg:#0b1220; --card:#0f172a; --text:#e2e8f0; --muted:#94a3b8; --line:#1f2937;
  --green:#22c55e; --green-2:#16a34a; --chip:#111827; --chip-t:#9ca3af;
}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto}
.container{max-width:1400px;margin:0 auto;padding:24px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}
.brand{font-weight:700;margin-right:16px}
.nav-link{color:var(--muted);text-decoration:none;margin-right:12px}
.nav-link:hover{color:#fff}
.user{display:flex;align-items:center;gap:8px}
.user-name{opacity:.9}
.badge{background:#111827;border:1px solid #1f2937;color:#cbd5e1;padding:2px 8px;border-radius:999px;font-size:12px}
.btn-out{padding:6px 10px;border-radius:8px;background:#ef4444;color:#0b1220;text-decoration:none;font-weight:600}
.btn-out:hover{background:#dc2626;color:#fff}

.page-head{display:flex;align-items:baseline;justify-content:space-between;margin:16px 0}
.page-head h1{margin:0;font-size:22px}
.page-head p{margin:6px 0 0;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.thumb{position:relative;background:#0b1220;}
.thumb img{width:100%;height:100%;object-fit:cover}
.meta{padding:12px}
.title{font-weight:700;margin-bottom:10px}
.actions{display:flex;gap:8px}
.btn{background:var(--green);color:#0b1220;border:none;border-radius:10px;padding:8px 12px;font-weight:700;text-decoration:none;display:inline-block}
.btn:hover{background:var(--green-2)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:#cbd5e1}
.btn.ghost:hover{border-color:#334155}

.spinner{position:fixed;inset:0;background:rgba(0,0,0,.35);display:grid;place-items:center}
.spinner.hidden{display:none}
.loader{width:52px;height:52px;border-radius:50%;border:5px solid #fff;border-top-color:transparent;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center}
.modal.hidden{display:none}
.modal-content{background:var(--card);border:1px solid var(--line);border-radius:16px;min-width:320px;max-width:900px;width:90%;min-height:200px;box-shadow:0 20px 60px rgba(0,0,0,.5);position:relative}
.modal-close{position:absolute;top:8px;right:10px;background:#272b37;color:#e2e8f0;border:none;border-radius:10px;width:32px;height:32px;font-size:18px;cursor:pointer}

/* Safe-area untuk perangkat berponi (Android/iOS) */
@supports (padding: env(safe-area-inset-top)) {
  .nav {
    /* tambah ruang di atas sesuai notch, minimal 12px biar rapi */
    padding-top: calc(env(safe-area-inset-top) + 12px);
    padding-left: calc(env(safe-area-inset-left) + 6px);
    padding-right: calc(env(safe-area-inset-right) + 6px);
  }
  body {
    /* kalau ada elemen fixed lain di atas, bisa ditambahkan di sini juga */
    padding-bottom: env(safe-area-inset-bottom);
  }
}