/* ===================================================================== ZonaNet VPN — design system Tanpa dependensi eksternal. Mendukung tema terang & gelap otomatis, dengan penggantian manual lewat atribut data-theme pada . ===================================================================== */ :root { color-scheme: light dark; /* Warna dasar — nilai netral, diisi ulang oleh blok tema di bawah */ --bg: #f6f8fb; --bg-elevated: #ffffff; --bg-sunken: #eef2f7; --bg-hover: #f1f5f9; --surface-line: #e2e8f0; --text: #0f172a; --text-muted: #64748b; --text-subtle: #94a3b8; --text-inverse: #ffffff; --brand: #2563eb; --brand-strong: #1d4ed8; --brand-soft: #dbeafe; --brand-text: #1e40af; --success: #059669; --success-soft: #d1fae5; --success-text: #065f46; --warning: #d97706; --warning-soft: #fef3c7; --warning-text: #92400e; --danger: #dc2626; --danger-soft: #fee2e2; --danger-text: #991b1b; --info: #0891b2; --info-soft: #cffafe; --info-text: #155e75; /* Bentuk & ruang */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-xl: 22px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow: 0 2px 8px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04); --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12), 0 2px 8px rgba(15, 23, 42, .06); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --header-h: 60px; --sidebar-w: 236px; --content-max: 1200px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b1120; --bg-elevated: #131c31; --bg-sunken: #0f172a; --bg-hover: #1c2740; --surface-line: #253149; --text: #e8eef9; --text-muted: #94a3b8; --text-subtle: #64748b; --brand: #60a5fa; --brand-strong: #3b82f6; --brand-soft: #1e3a5f; --brand-text: #bfdbfe; --success: #34d399; --success-soft: #064e3b; --success-text: #a7f3d0; --warning: #fbbf24; --warning-soft: #4d3410; --warning-text: #fde68a; --danger: #f87171; --danger-soft: #4c1d1d; --danger-text: #fecaca; --info: #22d3ee; --info-soft: #164e57; --info-text: #a5f3fc; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 2px 10px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55); } } :root[data-theme="dark"] { --bg: #0b1120; --bg-elevated: #131c31; --bg-sunken: #0f172a; --bg-hover: #1c2740; --surface-line: #253149; --text: #e8eef9; --text-muted: #94a3b8; --text-subtle: #64748b; --brand: #60a5fa; --brand-strong: #3b82f6; --brand-soft: #1e3a5f; --brand-text: #bfdbfe; --success: #34d399; --success-soft: #064e3b; --success-text: #a7f3d0; --warning: #fbbf24; --warning-soft: #4d3410; --warning-text: #fde68a; --danger: #f87171; --danger-soft: #4c1d1d; --danger-text: #fecaca; --info: #22d3ee; --info-soft: #164e57; --info-text: #a5f3fc; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 2px 10px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55); } /* --- Reset ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5 { margin: 0 0 .5em; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; } h1 { font-size: 1.65rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.08rem; } h4 { font-size: .96rem; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } img, svg { max-width: 100%; } code, kbd, pre, .mono { font-family: var(--font-mono); font-size: .875em; } hr { border: 0; border-top: 1px solid var(--surface-line); margin: 24px 0; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); } /* --- Utilitas ------------------------------------------------------- */ .container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 20px; } .container--narrow { max-width: 760px; } .container--wide { max-width: 1400px; } .stack > * + * { margin-top: var(--gap, 16px); } .row { display: flex; gap: 12px; align-items: center; } .row--between { justify-content: space-between; } .row--wrap { flex-wrap: wrap; } .row--top { align-items: flex-start; } .grow { flex: 1 1 auto; min-width: 0; } .muted { color: var(--text-muted); } .subtle { color: var(--text-subtle); } .small { font-size: .85rem; } .tiny { font-size: .78rem; } .strong { font-weight: 650; } .center { text-align: center; } .right { text-align: right; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hidden { display: none !important; } .mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; } .break-all { word-break: break-all; } /* --- Grid ----------------------------------------------------------- */ .grid { display: grid; gap: 16px; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .grid--auto-lg { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } @media (max-width: 980px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } } /* --- Kartu ---------------------------------------------------------- */ .card { background: var(--bg-elevated); border: 1px solid var(--surface-line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); } .card--flush { padding: 0; overflow: hidden; } .card--accent { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--surface-line); } .card__header h2, .card__header h3 { margin: 0; } .card__body { padding: 20px; } .card__footer { padding: 14px 20px; border-top: 1px solid var(--surface-line); background: var(--bg-sunken); } .section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; } .section-title h2, .section-title h3 { margin: 0; } /* --- Statistik ------------------------------------------------------ */ .stat { background: var(--bg-elevated); border: 1px solid var(--surface-line); border-radius: var(--radius-lg); padding: 16px 18px; } .stat__label { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); font-weight: 600; margin-bottom: 6px; } .stat__value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; } .stat__hint { font-size: .8rem; color: var(--text-muted); margin-top: 4px; } .stat--brand .stat__value { color: var(--brand); } .stat--success .stat__value { color: var(--success); } .stat--warning .stat__value { color: var(--warning); } .stat--danger .stat__value { color: var(--danger); } /* --- Tombol --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; font: inherit; font-size: .9rem; font-weight: 600; border: 1px solid transparent; border-radius: var(--radius); background: var(--brand); color: #fff; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .06s, opacity .15s; white-space: nowrap; } .btn:hover { background: var(--brand-strong); text-decoration: none; color: #fff; } .btn:active { transform: translateY(1px); } .btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; } .btn--ghost { background: transparent; color: var(--text); border-color: var(--surface-line); } .btn--ghost:hover { background: var(--bg-hover); color: var(--text); } .btn--soft { background: var(--brand-soft); color: var(--brand-text); } .btn--soft:hover { background: var(--brand-soft); color: var(--brand-text); filter: brightness(.96); } .btn--danger { background: var(--danger); } .btn--danger:hover { background: var(--danger); filter: brightness(.92); } .btn--danger-ghost { background: transparent; color: var(--danger); border-color: var(--danger); } .btn--danger-ghost:hover { background: var(--danger-soft); color: var(--danger-text); } .btn--success { background: var(--success); } .btn--success:hover { background: var(--success); filter: brightness(.92); } .btn--sm { padding: 5px 11px; font-size: .82rem; border-radius: var(--radius-sm); } .btn--lg { padding: 12px 24px; font-size: 1rem; } .btn--block { display: flex; width: 100%; } .btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; } /* --- Badge ---------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; font-size: .74rem; font-weight: 650; line-height: 1.7; border-radius: 999px; white-space: nowrap; } .badge--success { background: var(--success-soft); color: var(--success-text); } .badge--warning { background: var(--warning-soft); color: var(--warning-text); } .badge--danger { background: var(--danger-soft); color: var(--danger-text); } .badge--info { background: var(--info-soft); color: var(--info-text); } .badge--brand { background: var(--brand-soft); color: var(--brand-text); } .badge--muted { background: var(--bg-sunken); color: var(--text-muted); } .badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .badge--live .badge__dot { animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* --- Form ----------------------------------------------------------- */ .field { margin-bottom: 16px; } .field:last-child { margin-bottom: 0; } .label { display: block; margin-bottom: 6px; font-size: .85rem; font-weight: 600; color: var(--text); } .label .req { color: var(--danger); } .input, .select, .textarea { display: block; width: 100%; padding: 9px 12px; font: inherit; font-size: .92rem; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--surface-line); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .input::placeholder { color: var(--text-subtle); } .input[readonly] { background: var(--bg-sunken); color: var(--text-muted); } .textarea { min-height: 88px; resize: vertical; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; } .field__hint { margin-top: 5px; font-size: .8rem; color: var(--text-muted); } .field__error { margin-top: 5px; font-size: .8rem; color: var(--danger); font-weight: 500; } .input.has-error, .select.has-error { border-color: var(--danger); } .input-group { display: flex; } .input-group .input { border-radius: var(--radius) 0 0 var(--radius); } .input-group .btn { border-radius: 0 var(--radius) var(--radius) 0; } .input-group__prefix { display: flex; align-items: center; padding: 0 12px; background: var(--bg-sunken); border: 1px solid var(--surface-line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); color: var(--text-muted); font-size: .9rem; white-space: nowrap; } .input-group__prefix + .input { border-radius: 0 var(--radius) var(--radius) 0; } .check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: .9rem; padding: 3px 0; } .check input { margin: 3px 0 0; accent-color: var(--brand); width: 15px; height: 15px; flex: none; } .fieldset { border: 1px solid var(--surface-line); border-radius: var(--radius-lg); padding: 18px 20px; margin: 0 0 18px; } .fieldset > legend { padding: 0 8px; margin-left: -8px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } /* --- Pilihan berbentuk kartu (radio tersembunyi) -------------------- */ .choice-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .choice { position: relative; display: block; cursor: pointer; } .choice input { position: absolute; opacity: 0; width: 0; height: 0; } /* Isi .choice ditulis dengan agar sah berada di dalam