/* ============================================================================ Tema bersama (login + halaman utama). Ganti tema = ganti CSS variables via atribut [data-theme] di . Pilihan disimpan di localStorage (theme.js). ========================================================================== */ :root { /* default: Hijau */ --bg: #0b3d2e; --bg-2: #0f5138; --bg-3: #07271d; --accent: #18a558; --accent-d: #128046; /* permukaan terang (kartu di atas gradient) */ --card: #ffffff; --surface: #f6f9f7; --text: #16241d; --muted: #6b7c74; --border: #d8e2dc; --ok: #18a558; --warn: #f5a623; --error: #d64545; --idle: #9aa6a0; --radius: 16px; --radius-sm: 12px; } html[data-theme="biru"] { --bg: #0b2a4d; --bg-2: #0f3a66; --bg-3: #07203c; --accent: #2f80ed; --accent-d: #1f66c4; --ok: #2f80ed; } html[data-theme="ungu"] { --bg: #2a1a4d; --bg-2: #3a2466; --bg-3: #1c1136; --accent: #8b5cf6; --accent-d: #6d3fd4; --ok: #8b5cf6; } html[data-theme="oranye"] { --bg: #4d2a0b; --bg-2: #663a0f; --bg-3: #361d07; --accent: #f59e0b; --accent-d: #d97706; --ok: #f59e0b; } html[data-theme="gelap"] { --bg: #0d1117; --bg-2: #161b22; --bg-3: #05070a; --accent: #18a558; --accent-d: #128046; --card: #1c2230; --surface: #232b3a; --text: #e6edf3; --muted: #8b98a5; --border: #2b3340; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; margin: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 55%, var(--bg-3) 100%); background-attachment: fixed; min-height: 100dvh; } /* --- Tombol --- */ .btn { width: 100%; height: 52px; font-size: 1rem; font-weight: 700; color: #fff; background: var(--accent); border: 0; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .15s, transform .05s; } .btn:active { transform: scale(.99); } .btn:hover { background: var(--accent-d); } .btn:disabled { opacity: .7; cursor: default; } .spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: none; } .btn.loading .spinner { display: block; } @keyframes spin { to { transform: rotate(360deg); } } /* --- Input --- */ .field { margin-bottom: 16px; } .field label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 7px; } .input-wrap { position: relative; } .input-wrap input { width: 100%; height: 52px; padding: 0 44px 0 14px; font-size: 16px; color: var(--text); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); outline: none; transition: border-color .15s, background .15s; } .input-wrap input:focus { border-color: var(--accent); background: var(--card); } .input-wrap .toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; border-radius: 9px; } .input-wrap .toggle:active { background: var(--surface); } .input-wrap .toggle svg { width: 20px; height: 20px; } .alert { display: none; background: #fdecec; color: var(--error); border: 1px solid #f5c6c6; border-radius: 10px; padding: 10px 12px; font-size: .85rem; margin-bottom: 16px; } .alert.show { display: block; } /* --- Kartu generik --- */ .card { background: var(--card); border-radius: var(--radius); box-shadow: 0 18px 50px -12px rgba(0,0,0,.45); } /* ============================================================================ Theme picker (bottom sheet) ========================================================================== */ .theme-btn { width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: grid; place-items: center; } .theme-btn svg { width: 20px; height: 20px; } .theme-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 60; } .theme-sheet-backdrop.open { opacity: 1; pointer-events: auto; } .theme-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var(--card); color: var(--text); border-radius: 20px 20px 0 0; padding: 18px 18px calc(env(safe-area-inset-bottom) + 20px); transform: translateY(100%); transition: transform .25s ease; max-width: 520px; margin: 0 auto; } .theme-sheet.open { transform: translateY(0); } .theme-sheet h3 { margin: 4px 0 14px; font-size: 1rem; } .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px; } .theme-swatch { aspect-ratio: 1; border-radius: 14px; border: 3px solid transparent; cursor: pointer; position: relative; display: grid; place-items: end center; padding-bottom: 6px; } .theme-swatch span { font-size: .62rem; color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.5); } .theme-swatch.active { border-color: var(--text); } .theme-swatch.active::after { content: "✓"; position: absolute; top: 4px; right: 7px; color: #fff; font-size: .8rem; text-shadow: 0 1px 2px rgba(0,0,0,.5); }