/* ══ Token: semua warna & ukuran diatur di sini ═══════ */
:root {
    color-scheme: light;

    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Skala tipografi: hanya pakai 5 ukuran ini */
    --text-xs: .75rem;     /* 12px — label uppercase, badge, caption */
    --text-sm: .875rem;    /* 14px — teks dasar, tabel, form, tombol */
    --text-base: 1rem;     /* 16px — judul header, judul kartu */
    --text-xl: 1.25rem;    /* 20px — judul halaman */
    --text-3xl: 1.875rem;  /* 30px — angka statistik, judul section */
    --text-4xl: 2.25rem;   /* 36px — khusus landing: harga & hero mobile */
    --text-5xl: 3rem;      /* 48px — khusus landing: hero desktop */

    --hero-glow: rgba(18, 40, 75, .08);

    /* Permukaan */
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --surface-hover: #f1f5f9;
    --border: #e2e8f0;
    --border-subtle: #f1f5f9;
    --border-input: #cbd5e1;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .04);

    /* Teks */
    --text-strong: #0f172a;
    --text: #1e293b;
    --text-body: #334155;
    --text-muted: #64748b;
    --text-subtle: #94a3b8;

    /* Brand */
    --brand: #12284B;
    --brand-hover: #0B1C38;
    --brand-text: #12284B;
    --brand-soft: #EEF3FA;
    --brand-soft-text: #0B1C38;
    --on-brand: #ffffff;
    --on-brand-muted: rgba(255, 255, 255, .6);
    --brand-border: #12284B;
    --shadow-brand: 0 4px 12px -4px rgba(18, 40, 75, .4);
    --focus-ring: #12284B;

    /* Status */
    --success: #059669;
    --danger: #dc2626;
    --badge-success-bg: #d1fae5;  --badge-success-fg: #047857;
    --badge-warning-bg: #fef3c7;  --badge-warning-fg: #b45309;
    --badge-info-bg: #dbeafe;     --badge-info-fg: #1d4ed8;
    --badge-orange-bg: #ffedd5;   --badge-orange-fg: #c2410c;
    --badge-danger-bg: #fee2e2;   --badge-danger-fg: #b91c1c;
    --badge-muted-bg: #f1f5f9;    --badge-muted-fg: #64748b;

    /* Lain-lain */
    --console-bg: #0b0f17;
    --console-text: #cbd5e1;
    --skeleton: #e2e8f0;
    --skeleton-shine: rgba(255, 255, 255, .4);
    --sort-idle: #94a3b8;
    --sort-faded: #e2e8f0;
}

[data-theme="dark"] {
    color-scheme: dark;

    /* Kebalikan light mode: latar navy brand, tombol putih */
    --bg: #08152A;
    --surface: #0E1F3B;
    --surface-muted: #112647;
    --surface-hover: #152B50;
    --border: #1B345A;
    --border-subtle: #152A4F;
    --border-input: #243E69;
    --shadow-card: none;

    --text-strong: #E8EDF5;
    --text: #D9E1EE;
    --text-body: #cfdaeb;
    --text-muted: #9fb2d0;
    --text-subtle: #7189b0;

    --brand: #DCE4F0;
    --brand-hover: #CBD6E6;
    --brand-border: #DCE4F0;
    --brand-text: #DCE4F0;
    --brand-soft: #183056;
    --brand-soft-text: #DCE4F0;
    --on-brand: #12284B;
    --on-brand-muted: rgba(18, 40, 75, .6);
    --shadow-brand: none;
    --focus-ring: #DCE4F0;

    --success: #34d399;
    --danger: #f87171;
    --badge-success-bg: rgba(16, 185, 129, .15);  --badge-success-fg: #6ee7b7;
    --badge-warning-bg: rgba(245, 158, 11, .15);  --badge-warning-fg: #fcd34d;
    --badge-info-bg: rgba(59, 130, 246, .18);     --badge-info-fg: #93c5fd;
    --badge-orange-bg: rgba(249, 115, 22, .15);   --badge-orange-fg: #fdba74;
    --badge-danger-bg: rgba(239, 68, 68, .15);    --badge-danger-fg: #fca5a5;
    --badge-muted-bg: rgba(148, 163, 184, .15);   --badge-muted-fg: #cbd5e1;

    --hero-glow: rgba(255, 255, 255, .07);

    --skeleton: #162A4E;
    --skeleton-shine: rgba(255, 255, 255, .06);
    --sort-idle: #7189b0;
    --sort-faded: #21375C;
}

[x-cloak] { display: none !important; }

/* ── Tipografi & warna dasar ────────────────────────── */
body {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.5;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.table td, .stat-value, .pagination-info, .page-link, .badge { font-variant-numeric: tabular-nums; }

.text-strong  { color: var(--text-strong); }
.text-muted   { color: var(--text-muted); }
.text-subtle  { color: var(--text-subtle); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }

/* ── Sidebar & header ───────────────────────────────── */
.sidebar { background: var(--surface); border-right: 1px solid var(--border); }
.sidebar-brand { border-bottom: 1px solid var(--border-subtle); }
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); }

.logo {
    width: 2.25rem; height: 2.25rem; border-radius: .75rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand); color: var(--on-brand); font-weight: 700;
    border: 1px solid var(--brand-border);
}
.avatar {
    width: 2.25rem; height: 2.25rem; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand-soft-text); font-weight: 600;
}

.icon-btn {
    width: 2.25rem; height: 2.25rem; border-radius: .5rem;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted); transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text-strong); }
.icon-sun { display: none; }
[data-theme="dark"] .icon-sun { display: inline; }
[data-theme="dark"] .icon-moon { display: none; }

.nav-section {
    padding: 0 .75rem .25rem;
    font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle);
}

.nav-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem .75rem; border-radius: .75rem;
    font-size: var(--text-sm); font-weight: 500; color: var(--text-muted);
    transition: background .15s, color .15s;
}
.nav-link svg { color: var(--text-subtle); }
.nav-link:hover { background: var(--surface-hover); color: var(--text-strong); }
.nav-link.active { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-brand); }
.nav-link.active svg { color: var(--on-brand); }

.sidebar-footer { padding: .75rem; border-top: 1px solid var(--border-subtle); }
.nav-link-logout:hover { background: var(--badge-danger-bg); color: var(--danger); }
.nav-link-logout:hover svg { color: var(--danger); }

/* Sidebar admin selalu gelap di kedua tema */
.sidebar-dark { background: #111827; border-right: 1px solid #1f2937; }
.sidebar-dark .sidebar-brand { border-bottom-color: #374151; }
.sidebar-dark .nav-section { color: #6b7280; }
.sidebar-dark .nav-link { color: #d1d5db; }
.sidebar-dark .nav-link svg { color: inherit; }
.sidebar-dark .nav-link:hover { background: #374151; color: #fff; }
.sidebar-dark .nav-link.active { background: #2563eb; box-shadow: none; }
.sidebar-dark .sidebar-footer { border-top-color: #374151; }
.sidebar-dark .nav-link-logout:hover { background: rgba(239, 68, 68, .15); color: #fca5a5; }

/* ── Konten ─────────────────────────────────────────── */
.page-title { font-size: var(--text-xl); line-height: 1.75rem; font-weight: 600; letter-spacing: -.015em; color: var(--text-strong); }
.page-subtitle { font-size: var(--text-sm); color: var(--text-muted); margin-top: .25rem; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-card); }
.card-brand { background: var(--brand); border-color: var(--brand-border); color: var(--on-brand); }
.card-brand:hover { background: var(--brand-hover); }

.stat-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); }
.stat-value { font-size: var(--text-3xl); line-height: 2.25rem; font-weight: 600; letter-spacing: -.02em; color: var(--text-strong); margin-top: .25rem; }
.card-brand .stat-label { color: var(--on-brand-muted); }
.card-brand .stat-value { color: var(--on-brand); }
.card-brand .stat-note { color: var(--on-brand-muted); }

/* ── Form & tombol ──────────────────────────────────── */
.label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--text-body); margin-bottom: .375rem; }
.input {
    width: 100%; border: 1px solid var(--border-input); border-radius: .5rem;
    padding: .5rem .75rem; font-size: var(--text-sm); color: var(--text-strong); background: var(--surface);
}
.input::placeholder { color: var(--text-subtle); }
.input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); }

.btn {
    display: inline-flex; align-items: center; gap: .25rem;
    border: 1px solid var(--border-input); border-radius: .5rem; padding: .5rem 1rem;
    font-size: var(--text-sm); font-weight: 500; line-height: 1.25rem; color: var(--text-body); background: var(--surface);
    transition: background .1s;
}
.btn svg { width: 1rem; height: 1rem; }
.btn:hover { background: var(--surface-hover); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: .375rem .875rem; }
.btn-primary { background: var(--brand); border-color: var(--brand-border); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-hover); }

/* ── Badge ──────────────────────────────────────────── */
.badge { display: inline-block; padding: .125rem .625rem; border-radius: 9999px; font-size: var(--text-xs); line-height: 1.25rem; font-weight: 500; }
.badge-success { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.badge-warning { background: var(--badge-warning-bg); color: var(--badge-warning-fg); }
.badge-info    { background: var(--badge-info-bg);    color: var(--badge-info-fg); }
.badge-orange  { background: var(--badge-orange-bg);  color: var(--badge-orange-fg); }
.badge-danger  { background: var(--badge-danger-bg);  color: var(--badge-danger-fg); }
.badge-muted   { background: var(--badge-muted-bg);   color: var(--badge-muted-fg); }

/* ── Tab status ─────────────────────────────────────── */
.tab-pill {
    padding: .5rem 1.125rem; border: 1px solid var(--border); border-radius: 9999px;
    font-size: var(--text-sm); font-weight: 500; color: var(--text-body); background: var(--surface);
    transition: background .15s, color .15s, border-color .15s;
}
.tab-pill:hover { background: var(--surface-hover); }
.tab-pill.active { background: var(--brand); border-color: var(--brand-border); color: var(--on-brand); }

.link-brand { font-weight: 600; color: var(--brand-text); }
.link-brand:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Tabel (pakai :where agar class Tailwind tetap bisa menimpa) ── */
.table-wrap { border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; }
.table-footer { padding: .875rem 1.25rem; background: var(--surface-muted); border-top: 1px solid var(--border); }
.table-footer:empty { display: none; }

.table { width: 100%; font-size: var(--text-sm); }
:where(.table) thead { background: var(--surface-muted); border-bottom: 1px solid var(--border); }
:where(.table) th {
    padding: .875rem 1.25rem; text-align: left; white-space: nowrap;
    font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
}
:where(.table) td { padding: 1rem 1.25rem; color: var(--text); border-top: 1px solid var(--border-subtle); white-space: nowrap; vertical-align: middle; }
:where(.table) tbody tr:first-child td { border-top: 0; }
:where(.table) tbody tr:hover { background: var(--surface-muted); }
:where(.table) th[data-sortable] { cursor: pointer; user-select: none; }
:where(.table) td.cell-wrap { white-space: normal; min-width: 16rem; }
.empty-state { padding: 2.5rem 1rem !important; text-align: center; white-space: normal !important; }

/* Tabel → kartu di HP & iPad (< 1024px). Pasang class "table-cards" di .table-wrap,
   lalu tandai sel: card-head-start / card-head-end (baris atas kiri-kanan), card-title,
   data-label="..." (detail berlabel, 2 kolom), card-full (selebar kartu), card-action (tombol). */
@media (max-width: 1023.98px) {
    .table-cards { border: 0; border-radius: 0; overflow: visible; }
    .table-cards .table, .table-cards thead, .table-cards tbody { display: block; }
    .table-cards thead { display: none; }
    .table-cards tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .table-cards tbody tr {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem 1rem;
        padding: 1rem 1.125rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface);
    }
    .table-cards tbody tr:hover { background: var(--surface); }
    .table-cards tbody tr[hidden] { display: none; }
    .table-cards td { padding: 0; border: 0; white-space: normal; min-width: 0; order: 4; text-align: left; }
    .table-cards td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: .125rem;
        font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle);
    }
    .table-cards td.card-head-start { order: 1; align-self: center; }
    .table-cards td.card-head-end { order: 2; justify-self: end; align-self: center; }
    .table-cards td.card-title { order: 3; grid-column: 1 / -1; margin-top: -.25rem; font-size: var(--text-base); font-weight: 600; color: var(--text-strong); }
    .table-cards td.card-full { order: 5; grid-column: 1 / -1; }
    .table-cards td.card-action { order: 6; grid-column: 1 / -1; }
    .table-cards td.card-action .btn { width: 100%; justify-content: center; }
    .table-cards td[colspan] { grid-column: 1 / -1; }
    .table-cards .table-footer { padding: 1rem 0 0; background: none; border-top: 0; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    .table-cards tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .table-cards tbody tr:has(td[colspan]) { grid-column: 1 / -1; }
}

.sort-icon { display: inline-block; margin-left: .5rem; vertical-align: middle; }
.sort-icon path { fill: var(--sort-idle); }
th.sort-asc .sort-icon .sort-up,
th.sort-desc .sort-icon .sort-down { fill: var(--brand-text); }
th.sort-asc .sort-icon .sort-down,
th.sort-desc .sort-icon .sort-up { fill: var(--sort-faded); }

/* ── Skeleton loading ───────────────────────────────── */
.skeleton { position: relative; height: 18px; background: var(--skeleton); border-radius: 6px; overflow: hidden; }
.skeleton::after {
    content: ''; position: absolute; top: 0; left: -150px; height: 100%; width: 150px;
    background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { left: -150px; }
    100% { left: 100%; }
}

/* ── Pagination ─────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.pagination-info { font-size: var(--text-sm); color: var(--text-muted); }
.pagination-info b { font-weight: 600; color: var(--text-strong); }
.pagination-links { display: flex; align-items: center; gap: .375rem; }
.page-link {
    min-width: 2.5rem; height: 2.5rem; padding: 0 .875rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: .5rem;
    font-size: var(--text-sm); font-weight: 500; color: var(--text-body); background: var(--surface);
}
.page-link:hover:not(:disabled):not(.active) { background: var(--surface-hover); }
.page-link.active { background: var(--brand); border-color: var(--brand-border); color: var(--on-brand); }
.page-link:disabled { opacity: .4; cursor: not-allowed; }
.page-gap { padding: 0 .25rem; color: var(--text-subtle); }

/* ── SweetAlert2 ────────────────────────────────────── */
[data-theme="dark"] .swal2-popup { background: var(--surface); color: var(--text); }
[data-theme="dark"] .swal2-title { color: var(--text-strong); }
[data-theme="dark"] .swal2-html-container { color: var(--text-muted); }

.app-toast.swal2-toast {
    padding: 0.6rem 0.85rem !important;
    border: 1px solid var(--border) !important;
    border-left: 3px solid var(--brand) !important;
    border-radius: 0.7rem !important;
    box-shadow: 0 10px 26px -12px rgba(18, 40, 75, .4) !important;
    background: var(--surface) !important;
    align-items: center !important;
}
.app-toast .swal2-title {
    font-size: var(--text-sm) !important; font-weight: 600 !important;
    color: var(--text-strong) !important; margin: 0 !important; padding: 0 !important; line-height: 1.3 !important;
}
.app-toast .swal2-icon {
    width: 20px !important; height: 20px !important; min-width: 20px !important;
    border: none !important; margin: 0 .55rem 0 0 !important; padding: 0 !important;
}
.app-toast .swal2-icon .swal2-icon-content {
    display: flex !important; align-items: center; justify-content: center;
    font-size: 0 !important;
}
.app-toast .swal2-icon svg { width: 18px; height: 18px; display: block; }
.app-toast .swal2-success-ring,
.app-toast .swal2-success-line-tip,
.app-toast .swal2-success-line-long,
.app-toast .swal2-x-mark,
.app-toast .swal2-x-mark-line-left,
.app-toast .swal2-x-mark-line-right { display: none !important; }
.app-toast .swal2-icon.swal2-success { color: #059669 !important; }
.app-toast .swal2-icon.swal2-error   { color: #dc2626 !important; }
.app-toast .swal2-icon.swal2-warning { color: #d97706 !important; }
.app-toast .swal2-icon.swal2-info    { color: #2563eb !important; }
.app-toast .swal2-timer-progress-bar-container { border-radius: 0 0 .7rem .7rem !important; height: .18rem !important; }
.app-toast .swal2-timer-progress-bar { background: rgba(18, 40, 75, .18) !important; }
.app-toast:has(.swal2-icon-success) { border-left-color: #059669 !important; }
.app-toast:has(.swal2-icon-error)   { border-left-color: #dc2626 !important; }
.app-toast:has(.swal2-icon-warning) { border-left-color: #d97706 !important; }
.app-toast:has(.swal2-icon-info)    { border-left-color: #2563eb !important; }

/* ══ Landing page ═══════════════════════════════════ */
.container-page { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 1024px) { .container-page { padding: 0 1.5rem; } }

.border-divider { border-top: 1px solid var(--border); }

.navbar {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.navbar-link { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); transition: color .15s; }
.navbar-link:hover { color: var(--text-strong); }

.btn-lg { padding: .625rem 1.25rem; }
.btn-invert { background: var(--on-brand); border-color: var(--on-brand); color: var(--brand); }
.btn-invert:hover { background: var(--on-brand); opacity: .9; }

/* Hero */
.hero-glow { background: radial-gradient(60% 70% at 75% 0%, var(--hero-glow), transparent 70%); }
.eyebrow {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .25rem .75rem; border: 1px solid var(--border); border-radius: 9999px; background: var(--surface);
    font-size: var(--text-xs); font-weight: 600; color: var(--brand-text);
}
.eyebrow svg { width: .875rem; height: .875rem; }
.hero-title { font-size: var(--text-4xl); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; color: var(--text-strong); }
@media (min-width: 1024px) { .hero-title { font-size: var(--text-5xl); } }
.hero-subtitle { font-size: var(--text-base); line-height: 1.7; color: var(--text-muted); }
.hero-preview { box-shadow: 0 24px 48px -24px rgba(18, 40, 75, .35); }
[data-theme="dark"] .hero-preview { box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6); }

/* Hero slider: semua slide ditumpuk di satu sel grid → tinggi tetap = slide tertinggi */
.hero-slider { overflow: hidden; touch-action: pan-y; }
.hero-track { display: grid; }
.hero-slide {
    grid-area: 1 / 1; min-width: 0;
    opacity: 0; visibility: hidden; transform: translateX(40px);
    transition: opacity .6s ease, transform .6s ease, visibility .6s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; transform: none; }
/* HP & iPad portrait: tinggi slider mengikuti slide aktif (slide lain melayang),
   transisi tinggi diatur dari home.js agar tidak ada ruang kosong di bawah slide pendek */
@media (max-width: 1023.98px) {
    .hero-track { position: relative; transition: height .5s ease; }
    .hero-slide:not(.is-active) { position: absolute; top: 0; left: 0; right: 0; }
}
.hero-controls { display: flex; align-items: center; justify-content: center; gap: .75rem; }
@media (min-width: 1024px) { .hero-controls { justify-content: flex-start; } }
.hero-arrow { border: 1px solid var(--border); background: var(--surface); }
.hero-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--border-input); transition: width .3s, background .3s; }
.hero-dot.is-active { width: 1.75rem; background: var(--brand); }

/* Ilustrasi kucing keberuntungan di lapak VPS (slide 2) */
.hero-illustration { display: flex; justify-content: center; }
.illus-lucky-cat { width: 100%; max-width: 30rem; height: auto; overflow: visible; }
/* Semua warna ilustrasi diambil dari palet tema (navy, putih, slate, success) */
:root {
    --illus-frame: #12284B;        /* brand */
    --illus-frame-deep: #0B1C38;   /* brand-hover */
    --illus-light: #FFFFFF;        /* surface */
    --illus-muted: #CBD5E1;        /* border-input */
    --illus-ink: #0F172A;          /* text-strong */
    --illus-machine: #1E293B;      /* text */
    --illus-machine-slot: #334155; /* text-body */
    --illus-backdrop: #E2E8F0;     /* border */
    --illus-shadow: rgba(15, 23, 42, .12);
}
[data-theme="dark"] {
    --illus-frame: #243E69;
    --illus-frame-deep: #1B345A;
    --illus-light: #DCE4F0;
    --illus-muted: #7189B0;
    --illus-ink: #08152A;
    --illus-machine: #112647;
    --illus-machine-slot: #243E69;
    --illus-backdrop: #0E1F3B;
    --illus-shadow: rgba(0, 0, 0, .35);
}

.illus-shadow { fill: var(--illus-shadow); }
.illus-backdrop { fill: var(--illus-backdrop); }
.illus-wood { fill: var(--illus-frame); }
.illus-wood-light { fill: var(--illus-frame-deep); }
.illus-wood-dark { fill: var(--illus-frame-deep); }
.illus-wood-plank { stroke: var(--illus-frame-deep); stroke-width: 1.2; }
.illus-awning-roof { fill: var(--illus-frame-deep); }
.illus-awning-a { fill: var(--illus-frame); }
.illus-awning-b { fill: var(--illus-light); }
.illus-awning rect, .illus-awning path { stroke: var(--illus-frame-deep); stroke-width: 1.5; stroke-linejoin: round; }

.illus-cat-fur { fill: var(--illus-light); stroke: var(--illus-ink); stroke-width: 3; stroke-linejoin: round; }
.illus-cat-inner, .illus-cat-pad { fill: var(--illus-muted); }
.illus-cat-seam { fill: var(--illus-light); }
.illus-cat-cheek { fill: var(--illus-muted); opacity: .7; }
.illus-cat-patch { fill: var(--illus-frame); }
.illus-cat-patch-dark { fill: var(--illus-muted); }
.illus-line { fill: none; stroke: var(--illus-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.illus-line-thin { fill: none; stroke: var(--illus-ink); stroke-width: 2; stroke-linecap: round; }
[data-theme="dark"] .illus-line-thin { stroke: var(--illus-muted); }
.illus-collar { fill: none; stroke: var(--illus-frame); stroke-width: 11; stroke-linecap: round; }

.illus-gold { fill: var(--illus-light); stroke: var(--illus-frame); stroke-width: 2.5; }
.illus-gold-inner { fill: none; stroke: var(--illus-muted); stroke-width: 2; }
.illus-coin-text { fill: var(--illus-frame); font-size: 10px; font-weight: 700; text-anchor: middle; font-family: var(--font-sans); }
[data-theme="dark"] .illus-coin-text { fill: #12284B; }

.illus-server rect { fill: var(--illus-machine); stroke: var(--illus-ink); stroke-width: 1; }
[data-theme="dark"] .illus-server rect { stroke: var(--illus-frame); }
.illus-server-slot rect { fill: var(--illus-machine-slot); }
.illus-led { fill: var(--success); animation: illus-led-blink 1.6s steps(1) infinite; }
.illus-led-2 { animation-delay: .4s; fill: var(--illus-light); }
.illus-led-3 { animation-delay: .9s; }

.illus-tag { fill: var(--illus-light); stroke: var(--illus-frame); stroke-width: 1.5; }
.illus-tag-text { fill: #12284B; font-size: 11px; font-weight: 700; text-anchor: middle; font-family: var(--font-sans); }
.illus-sign { fill: var(--illus-light); stroke: var(--illus-frame-deep); stroke-width: 2; }
.illus-sign-title { fill: #12284B; font-size: 16px; font-weight: 700; letter-spacing: .03em; text-anchor: middle; font-family: var(--font-sans); }
.illus-sign-text { fill: #64748B; font-size: 12px; font-weight: 500; text-anchor: middle; font-family: var(--font-sans); }
.illus-sparkle { fill: var(--brand-text); animation: illus-sparkle 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.illus-sparkle-2 { animation-delay: 1.2s; }

/* Tangan memanggil (maju-mundur) seperti maneki-neko di etalase.
   Lengan condong ke depan dari bahu: dilihat dari depan, lengan tampak memendek dan
   sedikit miring ke dalam, lalu kembali tegak. Bantalan diberi skala balik agar tetap bulat.
   Irama sinus halus seperti pendulum. */
.illus-cat-arm {
    transform-box: view-box; transform-origin: 333px 262px;
    animation: illus-beckon 1.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
.illus-cat-arm-fill { fill: var(--illus-light); }
.illus-cat-arm-line {
    fill: none; stroke: var(--illus-ink); stroke-width: 3;
    stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.illus-cat-pads {
    transform-box: fill-box; transform-origin: center;
    animation: illus-pads-keep 1.5s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes illus-beckon {
    0%, 100% { transform: rotate(0deg) scaleY(1); }
    50% { transform: rotate(-3deg) scaleY(.83); }
}
@keyframes illus-pads-keep {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.2); }
}
@keyframes illus-led-blink { 50% { opacity: .25; } }
@keyframes illus-sparkle {
    0%, 100% { opacity: 0; transform: scale(.4); }
    50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .illus-cat-arm, .illus-cat-pads, .illus-led, .illus-sparkle { animation: none; }
}

.os-option {
    display: flex; align-items: center; gap: .375rem; padding: .625rem .75rem;
    border: 1px solid var(--border); border-radius: .75rem; font-size: var(--text-sm); color: var(--text-body);
}
.os-option svg { width: 1rem; height: 1rem; }
.os-option.is-selected { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); color: var(--text-strong); font-weight: 500; }
.deploy-spinner {
    width: 1.125rem; height: 1.125rem; flex-shrink: 0; border-radius: 9999px;
    border: 2px solid var(--border-input); border-top-color: var(--brand); animation: spin .8s linear infinite;
}
.deploy-progress { width: 80%; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .hero-slide, .hero-track { transition: none; transform: none; }
    .deploy-spinner { animation: none; }
}

.meter { height: .375rem; border-radius: 9999px; background: var(--surface-hover); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }

.terminal {
    padding: 1rem; border-radius: .75rem; border: 1px solid var(--border);
    background: #000000; color: #d4d4d4;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--text-xs); line-height: 1.7;
}
.terminal .prompt { color: #6ee7b7; }
.terminal-line { min-height: 1.7em; white-space: pre-wrap; overflow-wrap: anywhere; }
.terminal-line.is-pending { visibility: hidden; }
.terminal-cursor {
    display: inline-block; width: .55em; height: 1.15em; margin-left: 1px;
    background: #d4d4d4; vertical-align: text-bottom;
    animation: terminal-blink 1s steps(1) infinite;
}
@keyframes terminal-blink { 50% { opacity: 0; } }

/* Section */
.section { padding: 5rem 0; }
.section-alt { background: var(--surface-muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-eyebrow { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-text); }
.section-title { font-size: var(--text-3xl); line-height: 2.25rem; font-weight: 700; letter-spacing: -.025em; color: var(--text-strong); }
.section-subtitle { font-size: var(--text-base); line-height: 1.7; color: var(--text-muted); margin-top: .75rem; }

/* Fitur & langkah */
.feature-card { padding: 1.5rem; }
.feature-icon {
    width: 2.75rem; height: 2.75rem; border-radius: .75rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand-soft-text);
}
.feature-title { font-size: var(--text-base); font-weight: 600; color: var(--text-strong); margin-top: 1rem; }
.feature-text { color: var(--text-muted); margin-top: .375rem; line-height: 1.6; }

.step-number {
    width: 2.75rem; height: 2.75rem; border-radius: 9999px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand); color: var(--on-brand); font-weight: 700;
}

/* Harga */
.price-card { position: relative; display: flex; flex-direction: column; padding: 1.75rem; }
.price-card.popular { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.price-badge {
    position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%); white-space: nowrap;
    padding: .25rem .75rem; border-radius: 9999px;
    background: var(--brand); color: var(--on-brand); font-size: var(--text-xs); font-weight: 600;
}
.price-amount { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -.03em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.check-list { display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.check-list li { display: flex; align-items: center; gap: .625rem; color: var(--text-body); }
.check-list svg { width: 1.125rem; height: 1.125rem; color: var(--success); }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.125rem 0; text-align: left;
    font-size: var(--text-base); font-weight: 600; color: var(--text-strong);
}
.faq-question svg { color: var(--text-subtle); transition: transform .2s; }
.faq-question.open svg { transform: rotate(180deg); }
.faq-answer { padding-bottom: 1.25rem; line-height: 1.7; color: var(--text-muted); }

/* CTA & footer */
.cta-band { padding: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cta-title { font-size: var(--text-3xl); line-height: 2.25rem; font-weight: 700; letter-spacing: -.025em; }
.cta-text { margin-top: .5rem; color: var(--on-brand-muted); font-size: var(--text-base); }

.footer { background: var(--surface); border-top: 1px solid var(--border); }
.footer-title { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-strong); margin-bottom: .75rem; }
.footer-link { color: var(--text-muted); transition: color .15s; }
.footer-link:hover { color: var(--text-strong); }

/* ══ Auth (login / register) ════════════════════════ */
.auth-page { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; }
.auth-title { font-size: var(--text-xl); line-height: 1.75rem; font-weight: 600; letter-spacing: -.015em; color: var(--text-strong); }
.auth-footer { margin-top: 1.5rem; text-align: center; color: var(--text-muted); }

.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0 1rem; font-size: var(--text-xs); color: var(--text-subtle); }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.google-logo { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

.field-hint { margin-top: .375rem; font-size: var(--text-xs); color: var(--text-subtle); }
.field-error { margin-top: .375rem; font-size: var(--text-xs); color: var(--danger); }
.field-error:empty { display: none; }
.input.is-invalid { border-color: var(--danger); }
.input.is-invalid:focus { box-shadow: 0 0 0 1px var(--danger); }

.choice {
    display: flex; align-items: center; gap: .5rem; padding: .625rem .75rem; cursor: pointer;
    border: 1px solid var(--border-input); border-radius: .5rem; font-size: var(--text-sm); color: var(--text-body);
}
.choice input { accent-color: var(--brand); }
.choice:has(input:checked) { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); color: var(--text-strong); }

/* ── Detail VPS ─────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem 1.5rem; }
.detail-grid dt { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); }
.detail-grid dd { margin-top: .125rem; font-size: var(--text-sm); font-weight: 500; color: var(--text-strong); }
.detail-grid-compact { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.card-title { font-size: var(--text-base); font-weight: 600; color: var(--text-strong); }
.back-link { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
.back-link:hover { color: var(--text-strong); }
.back-link svg { width: 1rem; height: 1rem; }

.vps-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: .75rem 0 1.25rem; }
.vps-head .os-logo { width: 3rem; height: 3rem; border-radius: .875rem; }
.vps-head .os-logo svg { width: 1.625rem; height: 1.625rem; }
.power-state { display: inline-flex; align-items: center; gap: .375rem; font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.power-state::before { content: ''; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--text-subtle); }
.power-state.is-running { color: var(--success); }
.power-state.is-running::before { background: var(--success); box-shadow: 0 0 0 3px var(--badge-success-bg); }
.power-bar { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn-danger { color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--badge-danger-bg); }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: var(--on-brand); }
.btn-danger-solid:hover:not(:disabled) { background: var(--danger); opacity: .9; }
@media (max-width: 639.98px) {
    .power-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .power-bar .btn { justify-content: center; }
}

.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.info-tile { display: flex; align-items: flex-start; gap: .75rem; padding: .875rem 1rem; min-width: 0; }
.info-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0;
    border-radius: .625rem; background: var(--brand-soft); color: var(--brand-soft-text);
}
.info-icon svg { width: 1.125rem; height: 1.125rem; }
.info-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); }
.info-value { display: flex; align-items: center; gap: .25rem; margin-top: .125rem; font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.info-value span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-note { font-size: var(--text-xs); color: var(--text-muted); }
@media (min-width: 1024px) { .info-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
@media (max-width: 639.98px) {
    .info-tile { padding: .75rem; }
    .info-tile .info-icon { display: none; }
}

.copy-btn { display: inline-flex; flex-shrink: 0; padding: .25rem; border-radius: .375rem; color: var(--text-subtle); transition: background .15s, color .15s; }
.copy-btn:hover { background: var(--surface-hover); color: var(--text-strong); }
.copy-btn svg { width: .875rem; height: .875rem; }

.tab-bar { display: flex; gap: .5rem; margin-bottom: 1.25rem; overflow-x: auto; scrollbar-width: none; }
.tab-bar::-webkit-scrollbar { display: none; }
.tab-bar .tab-pill { flex-shrink: 0; white-space: nowrap; }

.access-box { padding: .875rem 1rem; border-radius: .75rem; border: 1px solid var(--border); background: var(--surface-muted); }
.access-command { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .375rem; }
.access-command code { min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-sm); font-weight: 500; color: var(--text-strong); }

.credential-list { display: grid; gap: .5rem; margin-bottom: 1rem; }
.credential-list div {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .625rem .75rem; border-radius: .625rem; background: var(--surface-muted); border: 1px solid var(--border-subtle);
}
.credential-list dt { font-size: var(--text-sm); color: var(--text-muted); }
.credential-list dd { display: flex; align-items: center; gap: .25rem; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-sm); font-weight: 500; color: var(--text-strong); }
.credential-list dd span { overflow-wrap: anywhere; }

.console-state { display: inline-flex; align-items: center; gap: .375rem; font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.console-state::before { content: ''; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--text-subtle); }
.console-state[data-state="connected"] { color: var(--success); }
.console-state[data-state="connected"]::before { background: var(--success); box-shadow: 0 0 0 3px var(--badge-success-bg); }
.console-state[data-state="disconnected"] { color: var(--danger); }
.console-state[data-state="disconnected"]::before { background: var(--danger); }
.console-frame {
    position: relative; height: calc(100vh - 15rem); min-height: 22rem; overflow: hidden;
    border: 1px solid var(--border); border-radius: 1rem; background: var(--console-bg);
}
.console-frame:fullscreen { border: 0; border-radius: 0; height: 100vh; }
.console-screen { width: 100%; height: 100%; }
.console-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
    padding: 1rem; text-align: center; font-size: var(--text-sm); color: var(--console-text); background: var(--console-bg);
}
.console-overlay[hidden] { display: none; }
@media (max-width: 639.98px) {
    .console-frame { height: 60vh; min-height: 16rem; }
    .power-bar .btn-console { grid-column: 1 / -1; }
}

.topup-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: var(--text-sm); color: var(--text-muted); }
.topup-total span:last-child { font-size: var(--text-xl); font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.topup-state { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 9999px; }
.topup-state svg { width: 1.75rem; height: 1.75rem; }
.topup-state .spinner { width: 1.5rem; height: 1.5rem; }
.topup-state-paid { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.topup-state-pending { background: var(--badge-warning-bg); color: var(--badge-warning-fg); }
.topup-state-expired { background: var(--badge-muted-bg); color: var(--badge-muted-fg); }
.topup-state-failed { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }

.timeline { display: grid; }
.timeline-item { display: flex; gap: .75rem; padding: .875rem 0; border-top: 1px solid var(--border-subtle); }
.timeline-item:first-child { padding-top: 0; border-top: 0; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { width: .5rem; height: .5rem; margin-top: .4375rem; flex-shrink: 0; border-radius: 9999px; background: var(--text-subtle); }
.timeline-dot.is-success { background: var(--success); }
.timeline-dot.is-failed { background: var(--danger); }
.timeline-dot.is-pending { background: var(--badge-info-fg); box-shadow: 0 0 0 3px var(--badge-info-bg); }
.timeline-title { font-size: var(--text-sm); font-weight: 500; color: var(--text-strong); }
.timeline-meta { margin-top: .125rem; font-size: var(--text-xs); color: var(--text-muted); }
.spinner {
    width: 1rem; height: 1rem; flex-shrink: 0; border-radius: 9999px;
    border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Form order (kartu pilihan radio) ─────────────── */
.order-step { display: flex; align-items: center; gap: .625rem; margin-bottom: 1rem; font-size: var(--text-base); font-weight: 600; color: var(--text-strong); }
.order-step span {
    display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px;
    font-size: var(--text-xs); background: var(--brand-soft); color: var(--brand-soft-text);
}
.option-card, .option-pill {
    position: relative; cursor: pointer; border: 1px solid var(--border-input); border-radius: .75rem;
    background: var(--surface); transition: border-color .15s, box-shadow .15s, background .15s;
}
.option-card { display: flex; flex-direction: column; gap: .375rem; padding: .875rem 1rem; }
.option-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem; font-size: var(--text-sm); font-weight: 500; color: var(--text-body); }
.option-pill-block { display: flex; }
.option-card input, .option-pill input { position: absolute; opacity: 0; pointer-events: none; }
.option-card:hover, .option-pill:hover { background: var(--surface-hover); }
.option-card:has(input:checked), .option-pill:has(input:checked) { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); background: var(--surface); }
.option-card:has(input:focus-visible), .option-pill:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--focus-ring); }
.option-card:has(input:disabled), .option-pill:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.option-price { margin-top: .25rem; font-size: var(--text-base); font-weight: 700; color: var(--text-strong); }

/* Filter paket */
.plan-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .875rem; padding: .5rem; border-radius: .625rem; background: var(--surface-muted); border: 1px solid var(--border); }
.plan-filters .checkbox { font-size: var(--text-xs); }
.plan-filters .checkbox input { width: .875rem; height: .875rem; }
.input-sm { width: auto; padding: .3125rem .5rem; font-size: var(--text-xs); border-radius: .4375rem; }
.segmented { display: inline-flex; padding: .125rem; border-radius: .4375rem; background: var(--surface); border: 1px solid var(--border-input); }
.segmented-item { padding: .1875rem .625rem; border-radius: .3125rem; font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); transition: background .15s, color .15s; }
.segmented-item:hover { color: var(--text-strong); }
.segmented-item.active { background: var(--brand); color: var(--on-brand); }
@media (max-width: 639.98px) {
    .plan-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan-filters .network-filter { grid-column: 1 / -1; }
    .plan-filters .segmented { flex: 1; }
    .plan-filters .segmented-item { flex: 1; }
    .plan-filters .input-sm { width: 100%; }
    .plan-filters #filter_sort { grid-column: 1 / -1; }
    .plan-filters > div:last-child { grid-column: 1 / -1; }
}

/* Tooltip bantuan (?) */
.network-filter { display: flex; align-items: center; gap: .375rem; }
.help-tip { position: relative; display: inline-flex; }
.help-tip-button {
    display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 9999px;
    border: 1px solid var(--border-input); background: var(--surface); color: var(--text-muted);
    font-size: var(--text-xs); font-weight: 600; line-height: 1; cursor: help; transition: color .15s, border-color .15s;
}
.help-tip-button:hover, .help-tip-button:focus-visible { color: var(--text-strong); border-color: var(--focus-ring); outline: none; }
.help-tip-content {
    position: absolute; top: calc(100% + .5rem); left: 50%; z-index: 30; width: 19rem; max-width: calc(100vw - 2rem);
    display: grid; gap: .625rem; padding: .75rem .875rem; transform: translateX(-50%);
    border: 1px solid var(--border); border-radius: .625rem; background: var(--surface); box-shadow: 0 10px 28px -10px rgba(15, 23, 42, .35);
    font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted);
    opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s;
}
.help-tip-content::before {
    content: ''; position: absolute; top: -.3125rem; left: 50%; width: .5rem; height: .5rem; transform: translateX(-50%) rotate(45deg);
    background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border);
}
.help-tip:hover .help-tip-content, .help-tip:focus-within .help-tip-content { opacity: 1; visibility: visible; }
.help-tip-item { display: grid; gap: .25rem; justify-items: start; }
.help-tip-item b { font-weight: 600; color: var(--text-strong); }
.help-tip-item .net-badge { margin-top: 0; }
@media (max-width: 639.98px) {
    .help-tip-content { left: auto; right: -.25rem; transform: none; }
    .help-tip-content::before { left: auto; right: .5rem; transform: rotate(45deg); }
}

/* Daftar paket: baris perbandingan.
   Default (HP & layar 1024–1279px yang kolomnya sempit) = baris 2 tingkat;
   layar 640–1023px dan ≥1280px = tabel sejajar dengan header kolom. */
.plan-table { border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; background: var(--surface); }
.plan-head { display: none; }
.plan-card {
    position: relative; display: grid; align-items: center; cursor: pointer;
    grid-template-columns: 1.125rem minmax(0, 1fr) auto; grid-template-areas: "radio title price" ". specs specs" ". net stock";
    gap: .125rem .75rem; padding: .375rem .875rem; border-top: 1px solid var(--border-subtle);
    transition: background .15s, box-shadow .15s;
}
#plan_list .plan-card:first-child { border-top: 0; }
.plan-card input { position: absolute; opacity: 0; pointer-events: none; }
.plan-card:hover { background: var(--surface-muted); }
.plan-card:has(input:checked) { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.plan-card:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.plan-card:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.plan-card:has(input:disabled):hover { background: transparent; }

.plan-radio {
    grid-area: radio; position: relative; width: 1rem; height: 1rem; border-radius: 9999px;
    border: 1.5px solid var(--border-input); background: var(--surface); transition: border-color .15s, background .15s;
}
.plan-card:hover .plan-radio { border-color: var(--focus-ring); }
.plan-card:has(input:checked) .plan-radio { border-color: var(--brand); background: var(--brand); }
.plan-card:has(input:checked) .plan-radio::after { content: ''; position: absolute; inset: .1875rem; border-radius: 9999px; background: var(--on-brand); }

/* HP: nama, badge jaringan, dan stok ditempatkan sendiri-sendiri di grid */
.plan-name { display: contents; }
.plan-name .plan-card-name { grid-area: title; min-width: 0; }
.plan-name .net-badge { grid-area: net; justify-self: start; margin-top: .125rem; }
.plan-card-name { display: block; font-size: .8125rem; font-weight: 500; line-height: 1.125rem; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.net-badge {
    display: inline-flex; align-items: center; gap: .1875rem; margin-top: .125rem; padding: 0 .375rem 0 .3125rem;
    border-radius: 9999px; font-size: .6875rem; font-weight: 500; line-height: 1rem; white-space: nowrap;
}
.net-badge svg { width: .6875rem; height: .6875rem; flex-shrink: 0; }
.net-badge-public { background: var(--badge-info-bg); color: var(--badge-info-fg); }
.net-badge-nat { background: var(--badge-orange-bg); color: var(--badge-orange-fg); }

.plan-specs { grid-area: specs; display: flex; flex-wrap: wrap; gap: .125rem .75rem; font-size: var(--text-xs); color: var(--text-muted); }
.plan-col { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-col svg { width: .8125rem; height: .8125rem; flex-shrink: 0; margin-right: .0625rem; color: var(--text-muted); }
.plan-bw.is-empty { display: none; }
.plan-bw.is-empty b { font-weight: 400; color: var(--text-subtle); }
.plan-col b { font-weight: 500; color: var(--text-strong); }
.plan-col small { display: none; } /* HP: ikon sudah menjelaskan RAM/Disk/BW */

/* HP: harga di kanan atas, status stok di kanan bawah (sejajar spesifikasi) */
.plan-price-col { display: contents; }
.plan-price-col .plan-price { grid-area: price; justify-self: end; }
.plan-price-col .plan-stock { grid-area: stock; justify-self: end; align-self: end; }
.plan-price { font-size: .8125rem; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-price small { margin-left: .125rem; font-size: .6875rem; font-weight: 400; color: var(--text-muted); }
.plan-stock { display: inline-flex; align-items: center; gap: .3125rem; font-size: .6875rem; color: var(--text-muted); white-space: nowrap; }
.plan-stock::before { content: ''; width: .375rem; height: .375rem; border-radius: 9999px; background: var(--success); }
.plan-stock.is-out { color: var(--danger); }
.plan-stock.is-out::before { background: var(--danger); }
.plan-empty { padding: 1.5rem 1rem; text-align: center; border: 1px dashed var(--border-input); border-radius: .75rem; }

@media (min-width: 640px) and (max-width: 1023.98px), (min-width: 1280px) {
    .plan-head, .plan-card {
        /* nama & kolom angka lebar tetap agar rapat; sisa ruang ada sebelum harga */
        grid-template-columns: 1rem minmax(7rem, 11rem) 4.5rem 4rem 4.5rem 5.25rem minmax(7.25rem, 1fr);
        grid-template-areas: none; column-gap: 1rem;
    }
    .plan-head {
        display: grid; padding: .4375rem .875rem; background: var(--surface-muted); border-bottom: 1px solid var(--border);
        font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-body);
    }
    .plan-head span { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; }
    .plan-head span:last-child { justify-self: end; }
    .plan-head svg { width: .875rem; height: .875rem; flex-shrink: 0; color: var(--text-body); }
    .plan-col svg { display: none; }
    .plan-radio { grid-area: auto; }
    .plan-name { display: block; min-width: 0; }
    .plan-name .plan-card-name, .plan-name .net-badge { grid-area: auto; }
    .plan-price-col { display: flex; flex-direction: column; align-items: flex-end; gap: .0625rem; }
    .plan-price-col .plan-price, .plan-price-col .plan-stock { grid-area: auto; }
    .plan-specs { display: contents; }
    .plan-bw.is-empty { display: inline-flex; }
    .plan-col { font-size: .8125rem; color: var(--text-muted); }
}

/* Lokasi & OS */
.region-card {
    position: relative; display: flex; align-items: flex-start; gap: .75rem; padding: .875rem; cursor: pointer;
    border: 1px solid var(--border-input); border-radius: .75rem; background: var(--surface);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.region-card input { position: absolute; opacity: 0; pointer-events: none; }
.region-card:hover { border-color: var(--focus-ring); }
.region-card:has(input:checked) { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); background: var(--brand-soft); }
.region-card:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--focus-ring); }
.region-card.is-empty { opacity: .55; }
.region-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0;
    border-radius: .5rem; background: var(--brand-soft); color: var(--brand-soft-text);
}
.region-card:has(input:checked) .region-icon { background: var(--brand); color: var(--on-brand); }
.region-icon svg { width: 1rem; height: 1rem; }
.region-name { display: block; font-size: var(--text-sm); font-weight: 600; line-height: 1.25rem; color: var(--text-strong); }
.region-line { display: flex; align-items: flex-start; gap: .375rem; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.4; }
.region-line svg { width: .75rem; height: .75rem; flex-shrink: 0; margin-top: .125rem; }
.region-count { display: block; margin: .125rem 0; font-size: var(--text-xs); font-weight: 500; color: var(--success); }
.region-card.is-empty .region-count { color: var(--danger); }
.region-specs { display: grid; gap: .1875rem; margin-top: .375rem; }
.region-notes { display: block; margin-top: .5rem; font-size: var(--text-xs); color: var(--text-subtle); }
/* Sistem operasi: satu baris per keluarga (logo + nama) dengan pilihan versi */
.os-note { font-size: var(--text-xs); color: var(--text-subtle); }
.os-list { display: grid; border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; }
.os-family { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: start; gap: .5rem 1rem; padding: .625rem .875rem; border-top: 1px solid var(--border-subtle); }
.os-family:first-child { border-top: 0; }
.os-family.is-locked { opacity: .45; }
.os-family-head { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.os-family-name { font-size: .8125rem; font-weight: 500; color: var(--text-strong); white-space: nowrap; }
.os-logo { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; flex-shrink: 0; border-radius: .5rem; }
.os-logo svg { width: 1.125rem; height: 1.125rem; }
.os-logo-ubuntu { background: rgba(233, 84, 32, .12); color: #E95420; }
.os-logo-debian { background: rgba(215, 10, 83, .1); color: #D70A53; }
.os-logo-kali { background: rgba(54, 123, 240, .12); color: #367BF0; }
.os-logo-windows, .os-logo-windows-10, .os-logo-windows-11, .os-logo-windows-server { background: rgba(0, 120, 212, .12); color: #0078D4; }
.os-logo-rocky, .os-logo-alma, .os-logo-centos, .os-logo-fedora, .os-logo-opensuse, .os-logo-arch, .os-logo-linux { background: var(--surface-muted); color: var(--text-muted); }
[data-theme="dark"] .os-logo-windows, [data-theme="dark"] .os-logo-windows-10, [data-theme="dark"] .os-logo-windows-11, [data-theme="dark"] .os-logo-windows-server { color: #4CA8F0; }
[data-theme="dark"] .os-logo-debian { color: #F0558C; }
.os-versions { display: flex; flex-wrap: wrap; gap: .375rem; padding-top: .0625rem; }
.os-chip {
    position: relative; display: inline-flex; align-items: center; padding: .25rem .625rem; cursor: pointer;
    border: 1px solid var(--border-input); border-radius: 9999px; background: var(--surface);
    font-size: .75rem; font-weight: 500; color: var(--text-body); transition: border-color .15s, background .15s, color .15s;
}
.os-chip input { position: absolute; opacity: 0; pointer-events: none; }
.os-chip:hover { border-color: var(--focus-ring); }
.os-chip:has(input:checked) { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.os-chip:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--focus-ring); }
.os-chip:has(input:disabled) { cursor: not-allowed; }
.os-chip:has(input:disabled):hover { border-color: var(--border-input); }
@media (max-width: 639.98px) {
    .os-family { grid-template-columns: minmax(0, 1fr); }
}

/* Kartu ringkasan order */
.order-summary { display: grid; gap: 1rem; padding: 1.25rem; }
.order-summary-head { padding-bottom: .875rem; border-bottom: 1px solid var(--border-subtle); }
.order-summary-title { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.order-summary-host { display: flex; align-items: center; gap: .5rem; margin-top: .375rem; font-size: var(--text-base); font-weight: 600; color: var(--text-strong); min-width: 0; }
.order-summary-host svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--text-muted); }
.order-summary-host span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-summary-host .is-empty { font-size: var(--text-sm); font-weight: 400; color: var(--text-subtle); }
.order-summary-list { display: grid; gap: .5625rem; font-size: .8125rem; }
.order-summary-list div { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.order-summary-list dt { display: inline-flex; align-items: center; gap: .4375rem; flex-shrink: 0; color: var(--text-muted); }
.order-summary-list dt svg { width: .875rem; height: .875rem; color: var(--text-subtle); }
.order-summary-list dd { font-weight: 500; color: var(--text-strong); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.order-receipt { display: grid; gap: .375rem; padding: .75rem .875rem; border-radius: .625rem; background: var(--surface-muted); font-size: .8125rem; }
.order-receipt-row, .order-receipt-total { display: flex; justify-content: space-between; gap: .75rem; font-variant-numeric: tabular-nums; }
.order-receipt-row { color: var(--text-muted); }
.order-receipt-row span:last-child { color: var(--text-body); }
.order-receipt-total { margin-top: .25rem; padding-top: .5rem; border-top: 1px dashed var(--border-input); font-weight: 600; color: var(--text-strong); }
.order-summary-price { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.order-summary-price span { font-size: .8125rem; color: var(--text-muted); }
.order-summary-price b { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.01em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.order-summary-note { display: flex; gap: .5rem; font-size: var(--text-xs); line-height: 1.5; color: var(--text-subtle); }
.order-summary-note svg { width: .875rem; height: .875rem; flex-shrink: 0; margin-top: .125rem; color: var(--success); }
.btn-order svg { width: 1rem; height: 1rem; }

/* Bar ringkasan menempel di bawah (HP/iPad) */
.order-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
}
.order-bar-detail { display: grid; min-width: 0; text-align: left; }
.order-bar-label { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; font-size: var(--text-xs); color: var(--text-muted); }
.order-bar-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-bar-label svg { width: .875rem; height: .875rem; flex-shrink: 0; transform: rotate(180deg); transition: transform .2s; }
.order-bar-detail[aria-expanded="true"] .order-bar-label svg { transform: none; }
.order-bar-price { font-size: var(--text-base); font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }

/* HP/iPad: kartu ringkasan menjadi bottom sheet di atas bar */
@media (max-width: 1023.98px) {
    .order-summary {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 85vh; overflow-y: auto;
        padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); border-radius: 1rem 1rem 0 0; border-bottom: 0;
        transform: translateY(100%); visibility: hidden; transition: transform .25s ease, visibility .25s;
    }
    .order-summary.is-open { transform: none; visibility: visible; box-shadow: 0 -12px 32px -12px rgba(15, 23, 42, .35); }
    .order-summary .btn-order { display: none; }
    .order-sheet-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .4); }
    .order-sheet-backdrop[hidden] { display: none; }
}

.summary-list { display: grid; gap: .5rem; font-size: var(--text-sm); }
.summary-list div { display: flex; justify-content: space-between; gap: 1rem; }
.summary-list dt { color: var(--text-muted); }
.summary-list dd { color: var(--text-strong); font-weight: 500; text-align: right; }

/* ── Pilih massal ───────────────────────────────────── */
.bulk-label { display: inline-flex; align-items: center; gap: .75rem; cursor: pointer; }
.bulk-all, .bulk-check { width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--brand); cursor: pointer; }
.bulk-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .625rem .875rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-muted);
}

.spec-chip { display: inline-block; padding: .0625rem .5rem; border-radius: .375rem; background: var(--surface-muted); border: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }

/* ── Switch (toggle aktif/nonaktif) ─────────────────── */
.switch { position: relative; display: inline-flex; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; }
.switch-track { width: 2.25rem; height: 1.25rem; border-radius: 9999px; background: var(--border-input); transition: background .15s; position: relative; }
.switch-track::after {
    content: ''; position: absolute; top: .125rem; left: .125rem; width: 1rem; height: 1rem; border-radius: 9999px;
    background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s;
}
.switch input:checked + .switch-track { background: var(--brand); }
.switch input:checked + .switch-track::after { transform: translateX(1rem); background: var(--on-brand); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 2px var(--focus-ring); }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + .switch-track { opacity: .4; }

/* ── Modal (buka/tutup lewat atribut hidden) ───────── */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.modal-panel { position: relative; width: 100%; max-width: 28rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.5rem; }
.modal-panel-lg { max-width: 40rem; }

.checkbox { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-body); cursor: pointer; }
.checkbox input { width: 1rem; height: 1rem; accent-color: var(--brand); }

/* ── Alert ──────────────────────────────────────────── */
.alert { padding: .75rem 1rem; border-radius: .75rem; font-size: var(--text-sm); line-height: 1.5; }
.alert-success { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.alert-danger  { background: var(--badge-danger-bg);  color: var(--badge-danger-fg); }
.alert-info    { background: var(--badge-info-bg);    color: var(--badge-info-fg); }
.alert-warning { background: var(--badge-warning-bg); color: var(--badge-warning-fg); }