@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap'); :root{ --bg: #F7F5F1; --paper: #FFFFFF; --ink: #2B2622; --ink-soft: #6B645C; --gold: #B8892B; --gold-soft: #F3E6C8; --green: #1F7A4D; --green-soft: #E5F3EC; --red: #C0392B; --red-soft: #FBEAE8; --blue: #3562A6; --blue-soft: #E8F0FA; --border: #ECE7DE; --radius: 20px; --radius-sm: 14px; --shadow: 0 10px 30px rgba(43,38,34,.08); --shadow-sm: 0 4px 14px rgba(43,38,34,.06); } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ background:var(--bg); color:var(--ink); font-family:var(--app-font,'Poppins'),sans-serif; -webkit-font-smoothing:antialiased; min-height:100vh; } h1,h2,h3,h4,.brand,input,select,textarea,button,table{font-family:var(--app-font,'Poppins'),sans-serif;} a{color:inherit;text-decoration:none;} img{max-width:100%;} /* ---------- Rasa aplikasi, bukan halaman web ---------- Hanya berlaku pada halaman pengguna (). Panel admin sengaja dibiarkan seperti halaman web biasa: di sana ada kunci VAPID, kunci API, dan potongan SQL yang memang untuk disalin. */ .app-mode{ -webkit-user-select:none;-ms-user-select:none;user-select:none; -webkit-touch-callout:none; /* tahan menu tekan-lama di iOS */ -webkit-tap-highlight-color:transparent; /* tanpa kotak biru saat disentuh */ overscroll-behavior-y:contain; /* tidak memantul di ujung gulungan */ } /* Kolom isian tetap boleh dipilih. Tanpa pengecualian ini kursor susah ditaruh di tengah teks, dan di sebagian peramban menu Tempel ikut hilang — pengguna jadi tidak bisa menempelkan kode OTP. Pesan sistem juga dibiarkan: isinya kadang perlu disalin untuk dikirim ke bantuan. */ .app-mode input,.app-mode textarea,.app-mode select, .app-mode [contenteditable="true"], .app-mode .alert,.app-mode .bisa-pilih{ -webkit-user-select:text;-ms-user-select:text;user-select:text; -webkit-touch-callout:default; } .app-mode img,.app-mode a{-webkit-user-drag:none;} .container{max-width:1100px;margin:0 auto;padding:0 16px;} /* ---------- Layout Shell ---------- */ .app-shell{display:flex;min-height:100vh;} .sidebar{ width:240px;background:var(--theme-bg, var(--paper));border-right:1px solid var(--border); padding:24px 16px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto; } .sidebar .brand{font-size:20px;font-weight:800;color:var(--theme-text, var(--ink));display:flex;align-items:center;gap:8px;margin-bottom:28px;} .sidebar .brand .brand-icon{width:32px;height:32px;border-radius:9px;object-fit:cover;flex-shrink:0;} .nav-link{ display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px; color:var(--theme-text, var(--ink-soft));font-weight:600;font-size:14px;margin-bottom:4px; opacity:.85; } .nav-link:hover{background:var(--theme-hover, var(--bg));opacity:1;} .nav-link.active{background:var(--theme-active, var(--gold-soft));color:var(--theme-text, var(--gold));opacity:1;} .nav-section{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--theme-text, #B0A99E);opacity:.6;margin:18px 0 8px 14px;font-weight:700;} .main{flex:1;min-width:0;} .topbar{ background:var(--theme-bg, var(--paper));border-bottom:1px solid var(--border); padding:14px 24px;display:flex;align-items:center;justify-content:space-between; position:sticky;top:0;z-index:20; } .topbar-title{font-family:var(--app-font,'Poppins'),sans-serif;font-weight:700;font-size:17px;color:var(--theme-text, var(--ink));} .content{padding:24px;} /* Mobile nav */ .mobile-topbar{display:none;} .mobile-nav-toggle{background:none;border:none;font-size:24px;cursor:pointer;color:var(--theme-text, var(--ink));} @media (max-width:900px){ .sidebar{position:fixed;left:-260px;top:0;z-index:65;transition:left .25s ease;box-shadow:var(--shadow);} .sidebar.open{left:0;} .main{width:100%;} .mobile-topbar{display:flex;} .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:62;} .overlay.show{display:block;} } /* ---------- Cards ---------- */ .card{ background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow-sm); padding:20px;border:1px solid var(--border); } .card + .card{margin-top:16px;} /* Batalkan margin-top otomatis di atas kalau card berada di dalam grid/flex (baris sejajar) — supaya tidak menggeser kartu ke-2 dst ke bawah. */ .grid > .card, .wallet-grid > .card{margin-top:0;} .grid{display:grid;gap:16px;} .grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} @media (max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr;}} @media (max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}} /* ---------- Balance Stamp ---------- */ .balance-hero{ background:linear-gradient(135deg,#2B2622,#40372E); color:#fff;border-radius:24px;padding:28px;position:relative;overflow:hidden; box-shadow:var(--shadow); } .balance-hero .label{font-size:13px;opacity:.75;font-weight:600;} /* Ukuran dasar mengikuti lebar layar. Batas bawahnya 20px supaya di layar sempit tetap terbaca; angka yang tetap tidak muat dikecilkan lagi oleh script.js, karena panjangnya tergantung nominalnya, bukan lebar layarnya. */ .balance-hero .amount{ font-family:var(--app-font,'Poppins'),sans-serif; font-size:clamp(20px, 6.8vw, 34px); font-weight:800;letter-spacing:.01em;line-height:1.15; white-space:nowrap;overflow:hidden;min-width:0;flex:0 1 auto; } .balance-hero .saldo-baris{display:flex;align-items:center;gap:10px;margin-top:6px;width:100%;} .mono{font-family:var(--app-font,'Poppins'),sans-serif;font-variant-numeric:tabular-nums;} .wallet-card{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;} .wallet-card .name{font-weight:700;font-size:14px;} .wallet-card .type{font-size:12px;color:var(--ink-soft);} .wallet-card .balance{font-family:var(--app-font,'Poppins'),sans-serif;font-weight:700;font-size:16px;flex-shrink:0;} /* Grid khusus kartu akun di Dashboard — lebar selalu sama rata, berapapun jumlah akunnya */ .wallet-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; } .wallet-grid .card{min-width:0;} .wallet-color-block{ width:48px;height:48px;border-radius:14px;flex-shrink:0; display:flex;align-items:center;justify-content:center; color:#fff;font-weight:800;font-size:18px; box-shadow:0 4px 10px rgba(43,38,34,.15); } /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 20px;border-radius:14px;font-weight:700;font-size:14px;border:none; cursor:pointer;transition:transform .1s ease, opacity .15s ease; } .btn:active{transform:scale(.98);} .btn-primary{background:var(--gold);color:#fff;} .btn-primary:hover{opacity:.92;} .btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--ink);} .btn-outline:hover{border-color:var(--gold);color:var(--gold);} .btn-success{background:var(--green);color:#fff;} .btn-danger{background:var(--red);color:#fff;} .btn-block{width:100%;} .btn-sm{padding:8px 14px;font-size:13px;border-radius:10px;} .btn-wa{background:#25D366;color:#fff;} .fab-group{display:flex;gap:10px;flex-wrap:wrap;} .fab-group .btn{flex:1;min-width:100px;} /* ---------- Forms ---------- */ label{font-size:13px;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:6px;} input[type=text],input[type=email],input[type=number],input[type=date],input[type=datetime-local],input[type=password],input[type=tel],select,textarea{ width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--border); font-size:15px;font-family:inherit;background:#fff;color:var(--ink);margin-bottom:16px; } input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);} .form-group{margin-bottom:2px;} .help-text{font-size:12px;color:var(--ink-soft);margin:-10px 0 14px;} /* ---------- Badges / states ---------- */ .badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;} .badge-success{background:var(--green-soft);color:var(--green);} .badge-warning{background:var(--gold-soft);color:var(--gold);} .badge-danger{background:var(--red-soft);color:var(--red);} .badge-info{background:var(--blue-soft);color:var(--blue);} .empty-state{text-align:center;padding:40px 20px;color:var(--ink-soft);} .empty-state .icon{font-size:40px;margin-bottom:10px;} .alert{padding:14px 16px;border-radius:14px;margin-bottom:16px;font-size:14px;font-weight:600;} .alert-success{background:var(--green-soft);color:var(--green);} .alert-error{background:var(--red-soft);color:var(--red);} table{width:100%;border-collapse:collapse;font-size:14px;} th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--border);} th{color:var(--ink-soft);font-size:12px;text-transform:uppercase;letter-spacing:.03em;} .table-wrap{overflow-x:auto;} /* ---------- Warna baris tabel Transaksi berdasarkan jenis ---------- */ tr.trx-row-input{background:var(--green-soft);} tr.trx-row-output{background:var(--red-soft);} tr.trx-row-mutasi{background:var(--blue-soft);} tr.trx-row-input td, tr.trx-row-output td, tr.trx-row-mutasi td{border-bottom-color:rgba(0,0,0,.06);} .trx-table th{text-align:center;} .trx-table td:last-child{text-align:center;white-space:nowrap;} .progress-bar{height:10px;background:var(--border);border-radius:99px;overflow:hidden;} .progress-bar .fill{height:100%;background:linear-gradient(90deg,var(--gold),#D9AF63);} /* Progress bar dengan label di dalamnya — dipakai di dua tempat: budget per kategori (halaman Kategori) dan target tabungan per akun (halaman Akun). Nominal atas (anggaran/target) ada di badge dekat judulnya; di dalam bar sendiri: nilai berjalan (terpakai/saldo) rata kiri, persentase rata kanan — supaya semuanya kebaca sekali lihat tanpa teks terpisah di luar bar. */ .inline-progress{padding:0 26px 2px;margin-top:6px;} .inline-progress-bar{ position:relative;height:22px;background:var(--border);border-radius:999px;overflow:hidden; } .inline-progress-bar .fill{height:100%;transition:width .2s;} .inline-progress-start,.inline-progress-end{ position:absolute;top:50%;transform:translateY(-50%); font-size:11px;font-weight:700;color:var(--ink); text-shadow:0 0 4px rgba(255,255,255,.9),0 0 4px rgba(255,255,255,.9); } .inline-progress-start{left:10px;} .inline-progress-end{right:10px;} .inline-progress-note{font-size:11px;font-weight:600;margin-top:4px;} /* ---------- Auth pages ---------- */ .auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg);} .btn-google{ display:flex;align-items:center;justify-content:center;gap:10px; background:#fff;border:1.5px solid var(--border);color:var(--ink); padding:12px 20px;border-radius:14px;font-weight:700;font-size:14px;cursor:pointer; } .btn-google:hover{border-color:#4285F4;} .auth-card{width:100%;max-width:400px;background:var(--paper);border-radius:24px;box-shadow:var(--shadow);padding:32px 28px;} .auth-card .brand{text-align:center;margin-bottom:24px;font-size:22px;font-weight:800;} .auth-card .auth-brand-icon{width:56px;height:56px;border-radius:14px;object-fit:cover;display:block;margin:0 auto 12px;} footer.site-footer{ text-align:center;padding:24px 16px;color:var(--ink-soft);font-size:13px; } footer.site-footer a{color:var(--gold);font-weight:700;} /* ---------- Tombol Tulis + menu jenis transaksi (topbar) ---------- */ .tulis-wrap{position:relative;} /* Menu sedang terbuka: warnanya dibalik, supaya keadaannya kelihatan di warna tema apa pun. Sebelumnya memakai --gold-soft, yang di atas topbar emas nyaris tidak berbeda dari latarnya. */ .tulis-btn.tulis-terbuka{ background:var(--theme-text, var(--ink)); color:var(--theme-bg, var(--paper)); } .tulis-btn.tulis-terbuka:hover{background:var(--theme-text, var(--ink));} .tulis-menu{ position:absolute;top:calc(100% + 8px);right:0;z-index:70; min-width:190px;padding:6px; background:var(--paper);border:1px solid var(--border);border-radius:14px; box-shadow:0 10px 28px rgba(43,38,34,.16); display:none; } .tulis-menu.tampil{display:block;} .tulis-menu a{ display:flex;align-items:center;gap:10px; padding:10px 12px;border-radius:10px; font-size:14px;font-weight:700;color:var(--ink); } .tulis-menu a:hover,.tulis-menu a:focus{background:var(--bg);} .tulis-ikon{ width:30px;height:30px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center;font-size:15px; } .tulis-menu .tulis-input{color:var(--green);} .tulis-menu .tulis-mutasi{color:var(--blue);} .tulis-menu .tulis-output{color:var(--red);} .tulis-menu .tulis-input .tulis-ikon{background:var(--green-soft);color:var(--green);} .tulis-menu .tulis-mutasi .tulis-ikon{background:var(--blue-soft);color:var(--blue);} .tulis-menu .tulis-output .tulis-ikon{background:var(--red-soft);color:var(--red);} /* ---------- Tombol akun (inisial nama) + menunya (topbar) ---------- */ .akun-wrap{position:relative;} /* Isinya huruf, bukan emoji: 20px milik .theme-toggle-btn membuatnya menabrak pinggir lingkaran, dan huruf tidak butuh ruang sebanyak emoji. */ .akun-btn{font-size:15px;font-weight:800;letter-spacing:.02em;} .akun-btn.akun-terbuka{ background:var(--theme-text, var(--ink)); color:var(--theme-bg, var(--paper)); } .akun-btn.akun-terbuka:hover{background:var(--theme-text, var(--ink));} .akun-menu{ position:absolute;top:calc(100% + 8px);right:0;z-index:70; min-width:220px;padding:6px; background:var(--paper);border:1px solid var(--border);border-radius:14px; box-shadow:0 10px 28px rgba(43,38,34,.16); display:none; } .akun-menu.tampil{display:block;} .akun-identitas{ padding:10px 12px;margin-bottom:6px; border-bottom:1px solid var(--border); } .akun-nama{font-weight:700;font-size:14px;color:var(--ink);} /* Alamat email panjang tidak boleh melebarkan menunya sampai keluar layar. */ .akun-email{font-size:12px;color:var(--ink-soft);word-break:break-all;} .akun-menu a{ display:flex;align-items:center;gap:10px; padding:10px 12px;border-radius:10px; font-size:14px;font-weight:700;color:var(--ink); } .akun-menu a:hover,.akun-menu a:focus{background:var(--bg);} .akun-menu a.aktif{background:var(--gold-soft);color:var(--gold);} .akun-menu .akun-keluar{color:var(--red);} .content{padding-bottom:24px;} /* ---------- Color Picker Trigger Button ---------- */ .color-picker-trigger{ display:flex;align-items:center;gap:10px;width:100%; padding:10px 14px;border-radius:12px;border:1.5px solid var(--border); background:#fff;cursor:pointer;margin-bottom:6px;font-family:var(--app-font,'Poppins'),sans-serif; } .color-swatch-preview{width:28px;height:28px;border-radius:8px;flex-shrink:0;border:1px solid rgba(0,0,0,.1);} .picker-caret{margin-left:auto;color:var(--ink-soft);font-size:13px;font-weight:600;} /* ---------- Color Picker Modal ---------- */ .color-picker-modal{width:100%;max-width:560px;} .modal-box.color-picker-modal{max-width:560px;} .color-picker-layout{display:flex;gap:20px;flex-wrap:wrap;} .color-picker-swatches{flex:1;min-width:220px;} .color-picker-gradient{flex:1;min-width:220px;} .swatch-section-label{font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:6px;} .swatch-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;} .swatch-item{ aspect-ratio:1;border-radius:6px;cursor:pointer;padding:0; border:1px solid rgba(0,0,0,.08);transition:transform .1s ease; } .swatch-item:hover{transform:scale(1.15);z-index:1;position:relative;box-shadow:0 2px 6px rgba(0,0,0,.25);} .swatch-item.selected{outline:3px solid var(--ink);outline-offset:1px;z-index:1;position:relative;} .custom-swatch-add{ aspect-ratio:1;border-radius:6px;cursor:pointer;background:var(--bg); border:1.5px dashed var(--border);color:var(--ink-soft);font-weight:800;font-size:16px; display:flex;align-items:center;justify-content:center; } .custom-swatch-add:hover{border-color:var(--gold);color:var(--gold);} .sat-canvas-wrap{ position:relative;width:100%;border-radius:12px;overflow:hidden; cursor:crosshair;border:1px solid var(--border);touch-action:none;line-height:0; } .sat-canvas-wrap canvas{display:block;width:100%;height:140px;} .sat-marker{ position:absolute;width:16px;height:16px;border-radius:50%; border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.3); transform:translate(-50%,-50%);pointer-events:none; } .hue-canvas-wrap{ position:relative;width:100%;margin-top:10px;border-radius:8px; overflow:hidden;cursor:pointer;border:1px solid var(--border);touch-action:none;line-height:0; } .hue-canvas-wrap canvas{display:block;width:100%;height:16px;} .hue-marker{ position:absolute;top:-2px;width:6px;height:20px;background:#fff; border:1px solid rgba(0,0,0,.3);border-radius:3px;transform:translateX(-50%); pointer-events:none;box-shadow:0 0 2px rgba(0,0,0,.3); } .hex-input-row{display:flex;align-items:center;margin-top:12px;border:1.5px solid var(--border);border-radius:12px;overflow:hidden;} .hex-input-row .hex-prefix{padding:0 12px;color:var(--ink-soft);font-weight:700;background:var(--bg);align-self:stretch;display:flex;align-items:center;} .hex-input-row input{border:none;margin:0;border-radius:0;text-transform:uppercase;} .hex-input-row input:focus{box-shadow:none;} .chart-type-select{ width:190px;max-width:100%;min-width:0;margin:0;padding:8px 12px; text-overflow:ellipsis;white-space:nowrap;overflow:hidden;flex-shrink:0; } @media (max-width:480px){ .chart-type-select{width:120px;padding:8px 8px;font-size:13px;} } .receipt-upload-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .receipt-upload-btn{cursor:pointer;white-space:nowrap;} .receipt-filename{font-size:13px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;} .receipt-preview-wrap{ display:inline-flex;position:relative;margin-top:12px;margin-bottom:16px; } .receipt-preview-wrap img{ max-width:160px;max-height:160px;border-radius:12px; border:1px solid var(--border);object-fit:cover;display:block; } .receipt-preview-wrap button{ position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%; background:var(--red);color:#fff;border:2px solid #fff;font-size:13px;line-height:1; cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center; } /* ---------- Emoji Picker (Kategori) ---------- */ .btn-open-emoji{cursor:pointer;} .emoji-trigger{ width:64px;height:56px;margin-bottom:16px; border-radius:12px;border:1.5px solid var(--border);background:#fff; font-size:26px;display:flex;align-items:center;justify-content:center;cursor:pointer; } .emoji-trigger:hover{border-color:var(--gold);} .emoji-grid{ display:grid;grid-template-columns:repeat(10,1fr);gap:4px; max-height:260px;overflow-y:auto; } .emoji-option{ aspect-ratio:1;border:none;background:var(--bg);border-radius:8px; font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center; } .emoji-option:hover{background:var(--gold-soft);} @media (max-width:480px){ .emoji-grid{grid-template-columns:repeat(7,1fr);} } /* ---------- Baris Kategori (drag & drop urutan) ---------- */ .category-row{ display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:10px 4px; border-bottom:1px solid var(--border);cursor:grab;background:var(--paper); } .category-row.dragging{opacity:.4;} .category-row .drag-handle{color:var(--ink-soft);font-size:16px;flex-shrink:0;cursor:grab;} .category-row .cat-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .category-row .cat-actions{display:flex;gap:6px;flex-shrink:0;align-items:center;} @media (max-width:430px){ .budget-badge-amount{display:none;} } .btn-move{ width:26px;height:26px;border:1px solid var(--border);background:#fff;border-radius:8px; font-size:11px;color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0; } .btn-move:hover{border-color:var(--gold);color:var(--gold);} /* ---------- Segmented Control (pengganti dropdown filter) ---------- */ .segmented-control{ display:flex;background:var(--bg);border-radius:12px;padding:4px;gap:4px;margin-bottom:0; } .segment{ flex:1;text-align:center;padding:9px 6px;border-radius:9px;font-size:13px;font-weight:600; color:var(--ink-soft);text-decoration:none;transition:background .15s,color .15s; } .segment.active{background:#fff;color:var(--gold);box-shadow:0 1px 4px rgba(0,0,0,.12);} /* ---------- Tombol ikon aksi (Edit ✏️ / Hapus ✕) ---------- */ .btn-icon-action{ width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:#fff; display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer; flex-shrink:0;text-decoration:none;color:var(--ink);padding:0; } .btn-icon-action:hover{border-color:var(--gold);} .btn-icon-danger{color:var(--red);} .btn-icon-danger:hover{border-color:var(--red);background:var(--red-soft);} #trx_type.select-type-input{background:var(--green-soft);border-color:var(--green);color:var(--green);font-weight:700;} #trx_type.select-type-output{background:var(--red-soft);border-color:var(--red);color:var(--red);font-weight:700;} #trx_type.select-type-mutasi{background:var(--blue-soft);border-color:var(--blue);color:var(--blue);font-weight:700;} /* ---------- Modal (Tambah Kategori Cepat, dsb) ---------- */ .modal-overlay{ display:none;position:fixed;inset:0;background:rgba(43,38,34,.45); align-items:center;justify-content:center;z-index:100;padding:16px; } .modal-overlay.show{display:flex;} .modal-box{width:100%;max-width:420px;margin:0;max-height:90vh;overflow-y:auto;} .modal-overlay > .card{max-height:90vh;overflow-y:auto;} /* ---------- Avatar & Tombol Tema (topbar) ---------- */ /* Tombol bulat di topbar (tulis & ganti tema). * * Warnanya diambil dari variabel tema, bukan dari --border/--gold. Dua warna * itu dibuat untuk kartu putih: di atas topbar yang ikut warna tema, --border * (krem pucat) nyaris tidak terlihat, dan --gold pada keadaan hover justru * sama persis dengan latar topbarnya sendiri — cincinnya lenyap saat disentuh. * * --theme-hover / --theme-active sudah dihitung dari kontras warna tema (putih * transparan untuk tema gelap, hitam transparan untuk tema terang), jadi * lingkarannya terbaca di warna tema apa pun tanpa perlu daftar pengecualian. */ .theme-toggle-btn{ width:40px;height:40px;border-radius:50%;border:0; background:var(--theme-hover, var(--bg)); color:var(--theme-text, var(--ink)); /* Ukurannya dipatok, bukan x-large: dulu isinya 33px di dalam lingkaran berisi 34px — emoji-nya menempel ke pinggir tanpa ruang bernapas. */ font-size:20px;line-height:1; cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0; transition:background .15s ease, transform .1s ease; } .theme-toggle-btn:hover{background:var(--theme-active, var(--gold-soft));} .theme-toggle-btn:active{transform:scale(.94);} .theme-toggle-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px;} /* ---------- Banner Install PWA (mengambang, slide dari atas) ---------- */ .install-banner{ position:fixed;top:0;left:50%;transform:translate(-50%,-120%); width:min(94%,480px);z-index:90; background:var(--paper);border:1px solid var(--border);border-radius:0 0 16px 16px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:14px 16px;display:flex;align-items:center;gap:12px; transition:transform .35s cubic-bezier(.34,1.2,.4,1); } .install-banner.show{transform:translate(-50%,0);} .install-banner-icon{width:38px;height:38px;flex-shrink:0;border-radius:9px;object-fit:cover;} .install-banner-text{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;} .install-banner-text b{font-size:14px;} .install-banner-text span{color:var(--ink-soft);font-size:12px;} .install-banner-close{ background:none;border:none;font-size:16px;color:var(--ink-soft);cursor:pointer;flex-shrink:0;padding:4px; } /* ---------- Halaman auth (masuk / daftar / verifikasi) ---------- */ .auth-tagline{text-align:center;color:var(--ink-soft);font-size:14px;margin-top:-14px;margin-bottom:22px;} .auth-pemisah{display:flex;align-items:center;gap:10px;margin:18px 0;} .auth-pemisah::before,.auth-pemisah::after{content:"";flex:1;height:1px;background:var(--border);} .auth-pemisah span{font-size:12px;color:var(--ink-soft);}