/* nikola.dsgn — tema untuk halaman order & cek status, disamakan dengan beranda (hub.css).
   Dimuat SETELAH style.css dan gaya di dalam halaman, jadi cukup menimpa seperlunya. */
:root {
  --bg: #f5f9ff;
  --surface: rgba(255, 255, 255, .78);
  --white: #ffffff;
  --ink: #0a1c30;
  --ink-2: #3a526c;
  --muted: #6c8299;
  --line: rgba(14, 39, 64, .09);
  --line-2: rgba(14, 39, 64, .16);
  --grad: linear-gradient(120deg, #2b93ee 0%, #7c5cff 55%, #ff6fb1 100%);
  --display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --radius: 22px;
  --shadow: 0 1px 2px rgba(10, 28, 48, .05), 0 12px 40px rgba(43, 147, 238, .12);
  --shadow-lg: 0 30px 80px rgba(36, 76, 140, .22);
  --grid: rgba(14, 39, 64, .07);
}
:root[data-theme="dark"] {
  --bg: #060d19;
  --surface: rgba(255, 255, 255, .055);
  --white: #0e1a2e;
  --ink: #eef5ff;
  --ink-2: #b4c6dc;
  --muted: #7f95ad;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .18);
  --blue-25: rgba(43, 147, 238, .08);
  --blue-50: rgba(43, 147, 238, .14);
  --blue-100: rgba(43, 147, 238, .22);
  --blue-200: rgba(43, 147, 238, .32);
  --blue-300: #3d86d0;
  --blue-600: #6cb6ff;
  --blue-700: #8cc8ff;
  --green: #4ade80; --green-bg: rgba(34, 197, 94, .16);
  --amber: #fbbf24; --amber-bg: rgba(245, 158, 11, .16);
  --red: #f87171; --red-bg: rgba(239, 68, 68, .16);
  --violet: #a78bfa; --violet-bg: rgba(124, 92, 255, .2);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 40px rgba(0, 0, 0, .35);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
  --grid: rgba(255, 255, 255, .06);
}

html { scroll-behavior: smooth; }
body { background: var(--bg) !important; color: var(--ink); position: relative; transition: background .4s, color .4s; }
/* Latar: bola warna + grid tipis, sama seperti beranda */
body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(520px 520px at -4% -6%, rgba(143, 202, 255, .6), transparent 70%),
              radial-gradient(460px 460px at 104% 32%, rgba(201, 184, 255, .55), transparent 70%),
              radial-gradient(420px 420px at 22% 108%, rgba(255, 194, 222, .45), transparent 70%); }
:root[data-theme="dark"] body::before {
  background: radial-gradient(520px 520px at -4% -6%, rgba(26, 95, 180, .4), transparent 70%),
              radial-gradient(460px 460px at 104% 32%, rgba(75, 47, 184, .32), transparent 70%),
              radial-gradient(420px 420px at 22% 108%, rgba(160, 42, 104, .22), transparent 70%); }
body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 85%); mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 85%); }

h1, h2, h3, .sec-title h2, .blk-title, .res-head h2 { font-family: var(--display); letter-spacing: -.02em; }

/* Menu atas (sama dengan beranda) */
.nk-nav { position: sticky; top: 0; z-index: 60; background: var(--surface); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid var(--line); }
.nk-nav-in { width: min(1160px, 100% - 40px); margin: 0 auto; height: 68px; display: flex; align-items: center; gap: 18px; }
.nk-nav .brand { font-family: var(--display); font-size: 20px; color: var(--ink); }
.nk-nav .brand-mark { width: 36px; height: 36px; border-radius: 11px; background: var(--grad); box-shadow: 0 6px 18px rgba(124, 92, 255, .35); }
.nk-links { display: flex; gap: 4px; margin-left: auto; }
.nk-links a { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: background .2s, color .2s; }
.nk-links a:hover, .nk-links a.active { background: rgba(124, 92, 255, .14); color: var(--ink); }
.nk-end { display: flex; align-items: center; gap: 10px; }
.nk-icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; font-size: 16px; transition: transform .25s; }
.nk-icon:hover { transform: rotate(18deg) scale(1.06); }
@media (max-width: 760px) { .nk-links { display: none; } .nk-end { margin-left: auto; } }

/* Tombol: pil bergradasi seperti beranda */
.btn { border-radius: 999px; background: var(--grad); background-size: 160% 100%; color: #fff; box-shadow: 0 8px 24px rgba(124, 92, 255, .3); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s, background-position .3s; }
.btn:hover { background: var(--grad); background-size: 160% 100%; background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(124, 92, 255, .4); }
.btn:active { transform: scale(.97); }
.btn-ghost, .btn-soft { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-ghost:hover, .btn-soft:hover { background: var(--surface); border-color: #2b93ee; box-shadow: none; }
.btn-soft { background: var(--blue-50); color: var(--blue-700); border-color: transparent; }
.btn-wa { background: #1faa53; box-shadow: 0 8px 22px rgba(31, 170, 83, .3); }
.btn-wa:hover { background: #178c44; }
.btn-danger { background: var(--surface); color: var(--red); border-color: rgba(220, 38, 38, .35); box-shadow: none; }
.btn-danger:hover { background: var(--red-bg); box-shadow: none; }
.btn:disabled { transform: none; }

/* Kartu kaca */
.card { background: var(--surface); border-radius: var(--radius); border-color: var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.input, select.input, textarea.input { background: var(--white); border-radius: 14px; }
.input:focus { border-color: #2b93ee; box-shadow: 0 0 0 4px rgba(43, 147, 238, .2); }
.input::placeholder { color: var(--muted); opacity: .75; }
.opt .opt-box::before { background: var(--white); }
.opt input:checked + .opt-box::before { box-shadow: inset 0 0 0 3px var(--white); }
.modal { background: var(--white); border-radius: 24px; }
.modal-bg { background: rgba(4, 9, 18, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.toast { background: #0e1a2e; border: 1px solid var(--line-2); }
.toast.err { background: #b42323; }
.x-btn { background: var(--blue-50); color: var(--ink-2); }

/* Penimpa untuk warna putih yang tertulis langsung di halaman */
.hero { background: transparent !important; border-bottom: 0 !important; }
.hero-in { padding-top: 44px !important; }
.hero h1 { font-family: var(--display); font-size: clamp(30px, 4.6vw, 48px) !important; letter-spacing: -.035em !important; line-height: 1.08; }
.hero h1 em { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { background: var(--surface) !important; border: 1px solid var(--line); color: var(--ink-2) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.steps span { background: var(--surface) !important; border-color: var(--line) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.steps b { background: var(--grad) !important; }
.socials a { background: var(--blue-50) !important; }
.pg-order .qty, .pg-order .seg span { background: var(--white) !important; }
.pg-order .qty input { background: transparent; color: var(--ink); }
.pg-order .seg input:checked + span { background: var(--blue-50) !important; }
.pg-order .bar { background: var(--surface) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.pg-cek .track .ic { background: var(--white); }
.pg-cek .track li.now .ic { background: var(--white); }
.pg-cek .wrap { padding-top: 34px; }
.pg-cek h1 { font-size: clamp(28px, 4.6vw, 40px); letter-spacing: -.035em; }

/* ---------- Dashboard admin ---------- */
.pg-admin .chart line { stroke: var(--line); }
.pg-admin .chart text { fill: var(--muted); }
.pg-admin .app { background: transparent !important; }
.pg-admin .side { background: var(--surface); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-right-color: var(--line); }
.pg-admin .side .brand, .pg-admin .brand { font-family: var(--display); color: var(--ink); }
.pg-admin .brand-mark { background: var(--grad); box-shadow: 0 6px 18px rgba(124, 92, 255, .35); }
.pg-admin .nav-btn { border-radius: 999px; transition: background .2s, color .2s, box-shadow .2s; }
.pg-admin .nav-btn:hover { background: rgba(124, 92, 255, .12); color: var(--ink); }
.pg-admin .nav-btn.on { background: var(--grad); color: #fff; box-shadow: 0 8px 22px rgba(124, 92, 255, .35); }
.pg-admin .nav-btn.on .cnt { background: rgba(255, 255, 255, .28); }
.pg-admin .topbar { background: var(--surface); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.pg-admin .topbar h1, .pg-admin .panel-head h3, .pg-admin .content h3 { font-family: var(--display); letter-spacing: -.02em; }
.pg-admin .topbar h1 { font-size: 24px; }
.pg-admin .bottom-nav { background: var(--surface); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.pg-admin .bottom-nav button.on { background: rgba(124, 92, 255, .16); color: var(--ink); }
.pg-admin .kpi.hl { background: linear-gradient(125deg, #1d6fe0, #6a4cf5 55%, #e35aa3); }
.pg-admin .orow, .pg-admin .box, .pg-admin table.tbl, .pg-admin .pill, .pg-admin .ct-mini, .pg-admin .ct-item { background: var(--white); }
.pg-admin .pill.on, .pg-admin .pill.active { background: var(--blue-50); }
.pg-admin .ct-link { background: var(--blue-25); }
.pg-admin .alert.blue { background: var(--blue-50); }
:root[data-theme="dark"] .pg-admin .st-baru, :root[data-theme="dark"] .pg-admin .badge.gray { background: rgba(148, 163, 184, .18); color: #cbd5e1; }
:root[data-theme="dark"] .pg-admin .st-preview { background: rgba(14, 116, 144, .25); color: #67e8f9; }
:root[data-theme="dark"] .pg-admin .st-pelunasan { background: rgba(234, 179, 8, .18); color: #fde047; }
:root[data-theme="dark"] .pg-admin .canva-link { background: rgba(124, 92, 255, .22); color: #c4b5fd; }
:root[data-theme="dark"] .pg-admin .tbl th { background: rgba(255, 255, 255, .03); }
:root[data-theme="dark"] .pg-admin .topbar { background: rgba(6, 13, 25, .7); }

@media (max-width: 900px) { .pg-admin .topbar h1 { font-size: 20px; } }
@media (max-width: 480px) {
  .pg-order .item { grid-template-columns: 1fr 100px; }
  .pg-order .item .input { padding: 9px 8px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; } }