/* ============================================================ TEMA — semua warna lewat variabel. Tema aktif ditetapkan lewat atribut data-tema pada oleh /static/js/tema.js. Tema bawaan (tanpa atribut) = Malam. ============================================================ */ :root, html[data-tema="malam"] { --bg: #0b1220; --panel: #111827; --panel-2: #1c2536; --chat-bg: #0b1220; --hover: #253150; --accent: #2f6feb; --accent-dark: #1d4ed8; --on-accent: #fff; --in-bubble: #1c2536; --in-bubble-text: #e7ecf5; --out-bubble: #1d4ed8; --out-bubble-text: #fff; --text: #e7ecf5; --muted: #8b98ac; --danger: #f15c6d; --warn: #f5a524; --ok: #4ad991; --border: #263049; --auth-bg: linear-gradient(160deg, #0b1220 0%, #16294f 100%); --shadow-card: 0 20px 60px rgba(0,0,0,.4); --blok-bg: rgba(0,0,0,.22); --blok-border: rgba(255,255,255,.07); --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --bg-gambar: none; --tirai: rgba(0,0,0,.55); } /* ── Terang · Biru Pemda ── */ html[data-tema="langit"] { --bg: #f3f6fb; --panel: #ffffff; --panel-2: #eef3fa; --chat-bg: #f7f9fd; --hover: #e2eaf6; --accent: #1f5fd0; --accent-dark: #17469b; --on-accent: #fff; --in-bubble: #ffffff; --in-bubble-text: #16202f; --out-bubble: #1f5fd0; --out-bubble-text: #fff; --text: #16202f; --muted: #5f6d80; --danger: #c62b3f; --warn: #a86a06; --ok: #10794f; --border: #d8e1ee; --auth-bg: linear-gradient(160deg, #e8eff9 0%, #cfdcf1 100%); --shadow-card: 0 12px 34px rgba(22,45,85,.13); --blok-bg: #f1f5fb; --blok-border: #dbe4f0; --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --bg-gambar: none; --tirai: rgba(20,32,52,.42); } /* ── Terang · Hijau Sawah ── */ html[data-tema="daun"] { --bg: #f2f8f3; --panel: #ffffff; --panel-2: #e9f3eb; --chat-bg: #f6faf7; --hover: #dcecdf; --accent: #17784f; --accent-dark: #0f5a3a; --on-accent: #fff; --in-bubble: #ffffff; --in-bubble-text: #14241b; --out-bubble: #17784f; --out-bubble-text: #fff; --text: #14241b; --muted: #5c7064; --danger: #c62b3f; --warn: #9d6300; --ok: #17784f; --border: #d5e6d9; --auth-bg: linear-gradient(160deg, #e6f2e9 0%, #c9e3d1 100%); --shadow-card: 0 12px 34px rgba(20,60,38,.13); --blok-bg: #f0f6f1; --blok-border: #d8e7dc; --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --bg-gambar: none; --tirai: rgba(18,42,28,.42); } /* ── Terang · Senja Hangat ── */ html[data-tema="senja"] { --bg: #fdf6f1; --panel: #ffffff; --panel-2: #faece2; --chat-bg: #fef9f5; --hover: #f4ddcd; --accent: #c1521c; --accent-dark: #983d12; --on-accent: #fff; --in-bubble: #ffffff; --in-bubble-text: #2b1d15; --out-bubble: #c1521c; --out-bubble-text: #fff; --text: #2b1d15; --muted: #7c6355; --danger: #c1272d; --warn: #a06400; --ok: #157a52; --border: #efdccc; --auth-bg: linear-gradient(160deg, #fbeade 0%, #f3d3ba 100%); --shadow-card: 0 12px 34px rgba(80,45,25,.14); --blok-bg: #fbf2ea; --blok-border: #eeddcd; --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --bg-gambar: none; --tirai: rgba(60,38,25,.42); } /* ── Terang · Lavender ── */ html[data-tema="lavender"] { --bg: #f7f5fd; --panel: #ffffff; --panel-2: #efeafb; --chat-bg: #faf8fe; --hover: #e5ddf8; --accent: #5b3cc4; --accent-dark: #452c9c; --on-accent: #fff; --in-bubble: #ffffff; --in-bubble-text: #1f1a2e; --out-bubble: #5b3cc4; --out-bubble-text: #fff; --text: #1f1a2e; --muted: #6b6383; --danger: #c62b3f; --warn: #96650a; --ok: #16794f; --border: #e2dbf4; --auth-bg: linear-gradient(160deg, #ece6fb 0%, #d5c9f5 100%); --shadow-card: 0 12px 34px rgba(50,32,110,.14); --blok-bg: #f4f1fc; --blok-border: #e3dcf5; --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --bg-gambar: none; --tirai: rgba(35,25,60,.42); } /* ── Ceria · gaya neo-brutalis ala saweria.co ── */ html[data-tema="ceria"] { --bg: #ffd93d; --panel: #ffffff; --panel-2: #fff3c4; --chat-bg: #fffbe8; --hover: #ffe680; --accent: #cc4000; --accent-dark: #9e3200; --on-accent: #fff; --in-bubble: #ffffff; --in-bubble-text: #1a1a1a; --out-bubble: #cc4000; --out-bubble-text: #fff; --text: #1a1a1a; --muted: #6b5f3d; --danger: #c1272d; --warn: #a86a06; --ok: #12784f; --border: #1a1a1a; --auth-bg: #ffd93d; --shadow-card: 6px 6px 0 #1a1a1a; --blok-bg: #fff7d6; --blok-border: #1a1a1a; --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --bg-gambar: none; --tirai: rgba(26,26,26,.5); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font); background: var(--bg); background-image: var(--bg-gambar); background-attachment: fixed; color: var(--text); -webkit-font-smoothing: antialiased; } /* ============ AUTH PAGES ============ */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--auth-bg); } .auth-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px; box-shadow: var(--shadow-card); } .brand { text-align: center; margin-bottom: 24px; } .brand .logo { width: 60px; height: 60px; border-radius: 16px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 30px; margin-bottom: 12px; } /* Logo kustom unggahan admin: tampil apa adanya (tanpa kotak aksen) supaya lambang resmi tidak terpotong/tertimpa warna tema. */ .brand .logo.logo-custom { background: transparent; border-radius: 0; width: 92px; height: 92px; } .brand .logo.logo-custom img { max-width: 100%; max-height: 100%; object-fit: contain; } .brand h1 { font-size: 22px; font-weight: 600; } .brand p { color: var(--muted); font-size: 13px; margin-top: 4px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; } .field input { width: 100%; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 15px; } .field input:focus { outline: none; border-color: var(--accent); } .btn { width: 100%; padding: 13px; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity .15s; } .btn:hover { opacity: .9; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-google { background: #fff; color: #333; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; } .divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 18px 0; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .auth-alt { text-align: center; margin-top: 18px; font-size: 14px; color: var(--muted); } .auth-alt a { color: var(--accent); text-decoration: none; font-weight: 600; } .msg-err { background: rgba(241,92,109,.12); border: 1px solid rgba(241,92,109,.4); color: var(--danger); padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; display: none; } /* ============ CHAT APP ============ */ /* 100dvh: di HP, tinggi ikut menyusut saat papan ketik muncul, sehingga kolom tulis pesan tidak tertutup keyboard. 100vh sebagai cadangan. */ .app-shell { display: flex; height: 100vh; height: 100dvh; } /* Sidebar */ .sidebar { width: 300px; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .side-head { padding: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; } .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; overflow: hidden; flex-shrink: 0; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .side-head .info { min-width: 0; } .side-head .info .name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-head .info .email { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-scroll { flex: 1; overflow-y: auto; padding: 14px; } .side-title { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 6px 2px 10px; } .total-card { background: linear-gradient(135deg, var(--accent-dark), var(--accent)); border-radius: 14px; padding: 18px; margin-bottom: 18px; } .total-card .label { font-size: 12px; opacity: .85; } .total-card .value { font-size: 22px; font-weight: 700; margin-top: 4px; } .aspirasi-item { padding: 11px 12px; background: var(--panel-2); border-radius: 10px; margin-bottom: 8px; cursor: pointer; } .aspirasi-item:hover { background: var(--hover); } .aspirasi-item .an { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aspirasi-item .ak { font-size: 11px; color: var(--muted); margin-top: 2px; } .empty-note { color: var(--muted); font-size: 13px; text-align: center; padding: 20px 0; } /* Grid 2 kolom, bukan 1 baris flex: dengan 4–6 tombol (Admin/Petugas ikut muncul) satu baris melebihi lebar sidebar, isinya meluber keluar dan — saat sidebar tertutup di HP — tombol terakhir ("Keluar") menyembul menutupi kolom pesan. */ .side-foot { padding: 12px 14px; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .side-foot button, .side-foot a { min-width: 0; padding: 9px; font-size: 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; text-align: center; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .side-foot button:hover, .side-foot a:hover { background: var(--hover); } .side-foot .danger { color: var(--danger); } /* Chat area */ .chat { flex: 1; display: flex; flex-direction: column; background: var(--chat-bg); } .chat-head { padding: 14px 20px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; } .chat-head .bot-ava { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 20px; } .chat-head .t { flex: 1; } .chat-head .t .n { font-weight: 600; } .chat-head .t .s { font-size: 12px; color: var(--muted); } .hamburger { display: none; background: none; border: none; color: var(--text); font-size: 22px; cursor: pointer; } .head-nav { margin-left: auto; text-decoration: none; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; white-space: nowrap; } .head-nav:hover { background: var(--hover); } /* ============ HALAMAN RIWAYAT / TABEL / ADMIN ============ */ .page { min-height: 100vh; display: flex; flex-direction: column; } .page-head { padding: 14px 24px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; } .page-head .logo-sm { width: 38px; height: 38px; border-radius: 10px; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 20px; } .page-head .logo-sm .ic { stroke: #fff; } .page-head h1 { font-size: 18px; font-weight: 600; flex: 1; } .page-body { flex: 1; padding: 20px 24px; max-width: 1100px; width: 100%; margin: 0 auto; } .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; } .seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .seg button { background: none; border: none; color: var(--muted); padding: 9px 16px; font-size: 13px; cursor: pointer; font-weight: 600; } .seg button.active { background: var(--accent); color: var(--on-accent); } .btn-sm { padding: 8px 14px; border-radius: 8px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; } .btn-sm.apply { background: var(--accent); color: var(--on-accent); } .btn-sm.ghost { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); } .summary-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; } .sum-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; } .sum-card .lbl { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; } .sum-card .val { font-size: 20px; font-weight: 700; margin-top: 6px; } .table-wrap { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; } table.trx { width: 100%; border-collapse: collapse; min-width: 640px; } table.trx th, table.trx td { padding: 12px 14px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); } table.trx th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; position: sticky; top: 0; background: var(--panel); } table.trx tbody tr:hover { background: var(--panel-2); cursor: pointer; } .pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; } .pill.baru { background: rgba(245,165,36,.15); color: var(--warn); } .pill.terverifikasi { background: rgba(43,179,163,.16); color: #2bb3a3; } .pill.ditugaskan { background: rgba(124,92,255,.16); color: #8b6dff; } .pill.wa-opd { background: rgba(120,144,160,.20); color: #7c8fa0; } .pill.diproses { background: rgba(47,111,235,.15); color: var(--accent); } .pill.selesai { background: rgba(74,217,145,.15); color: var(--ok); } .pill.ditolak { background: rgba(241,92,109,.15); color: var(--danger); } .pill.tertunda { background: rgba(200,140,60,.18); color: #c88c3c; } .tbl-empty { text-align: center; color: var(--muted); padding: 40px 20px; } /* ============ TIMELINE RIWAYAT TIKET ============ */ .timeline { list-style: none; margin: 6px 0 2px; padding: 0; } .tl-item { position: relative; display: flex; gap: 12px; padding: 0 0 14px 4px; } .tl-item::before { /* garis penghubung */ content: ''; position: absolute; left: 9px; top: 16px; bottom: -2px; width: 2px; background: var(--border); } .tl-item:last-child::before { display: none; } .tl-dot { position: relative; z-index: 1; flex-shrink: 0; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px var(--panel-2); } /* Warna dot per status (samakan dengan pill). */ .tl-dot.baru { background: var(--warn); } .tl-dot.terverifikasi { background: #2bb3a3; } .tl-dot.ditugaskan { background: #8b6dff; } .tl-dot.wa-opd { background: #7c8fa0; } .tl-dot.diproses { background: var(--accent); } .tl-dot.selesai { background: var(--ok); } .tl-dot.ditolak { background: var(--danger); } .tl-dot.tertunda { background: #c88c3c; } .tl-body { flex: 1; min-width: 0; } .tl-status { font-weight: 600; font-size: 13px; color: var(--text); } .tl-date { font-size: 11px; color: var(--muted); margin-top: 1px; } .tl-note { font-size: 12px; color: var(--text); margin-top: 3px; opacity: .9; } .tl-item.tl-now .tl-status { color: var(--accent); } .tl-item.tl-internal-item { opacity: .8; } .tl-tag { display: inline-block; font-size: 10px; font-weight: 600; vertical-align: middle; background: rgba(120,144,160,.20); color: #7c8fa0; border-radius: 4px; padding: 1px 5px; margin-left: 4px; } .prog-tertunda { margin: 10px 0 2px; padding: 8px 10px; font-size: 12px; border-radius: 8px; background: rgba(200,140,60,.14); color: #c88c3c; border: 1px solid rgba(200,140,60,.3); } /* Kolom Kontak pada rekap: tautan wa.me nomor pelapor + penanda verifikasi. */ table.trx td .wa-link { color: var(--accent); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; } table.trx td .wa-link:hover { text-decoration: underline; } table.trx td .wa-ok { font-size: 11px; } .tbl-muted { color: var(--muted); } @media (max-width: 780px) { .page-body { padding: 14px; } .summary-row { grid-template-columns: repeat(2, 1fr); } .page-head { padding: 12px 14px; } } .messages { flex: 1; overflow-y: auto; padding: 20px 8%; display: flex; flex-direction: column; gap: 8px; } .bubble { max-width: 78%; padding: 8px 12px; border-radius: 10px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; position: relative; } .bubble .time { font-size: 10.5px; color: var(--muted); float: right; margin: 6px 0 -2px 10px; } .bubble.user { align-self: flex-end; background: var(--out-bubble); color: var(--out-bubble-text); border-top-right-radius: 2px; } .bubble.bot { align-self: flex-start; background: var(--in-bubble); color: var(--in-bubble-text); border: 1px solid var(--border); border-top-left-radius: 2px; } .bubble.user .time { color: rgba(255,255,255,.72); } .quick-row { padding: 8px 8% 0; display: flex; gap: 8px; flex-wrap: wrap; } .chip { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 6px 14px; border-radius: 16px; font-size: 13px; cursor: pointer; } .chip:hover { background: var(--hover); } /* Tombol CTA utama — dibuat menonjol supaya warga baru tahu harus mulai dari sini. */ .chip-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); animation: chipPulse 2.6s ease-out infinite; } .chip-primary:hover { background: var(--accent-dark, var(--accent)); } @keyframes chipPulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); } 70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } } @media (prefers-reduced-motion: reduce) { .chip-primary { animation: none; } } .composer { padding: 14px 8%; background: var(--panel); border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-end; } .composer textarea { flex: 1; resize: none; max-height: 120px; box-sizing: border-box; overflow-y: hidden; /* JS baru buka 'auto' saat sudah mentok */ padding: 11px 15px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 22px; color: var(--text); font-size: 15px; font-family: inherit; line-height: 1.5; } .composer textarea:focus { outline: none; border-color: var(--accent); } .send-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); border: none; color: var(--on-accent); font-size: 20px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .send-btn:disabled { opacity: .5; cursor: default; } .typing { align-self: flex-start; color: var(--muted); font-size: 13px; padding: 4px 12px; font-style: italic; } /* ============ MODAL / DETAIL ============ */ .modal-backdrop { display: none; position: fixed; inset: 0; background: var(--tirai); z-index: 40; align-items: center; justify-content: center; padding: 20px; } .modal-backdrop.show { display: flex; } .modal-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 24px; max-width: 520px; width: 100%; max-height: 85vh; overflow-y: auto; } .modal-card h2 { font-size: 17px; margin-bottom: 14px; } .modal-card .row { margin-bottom: 10px; font-size: 14px; } .modal-card .row .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; } .modal-card textarea { width: 100%; min-height: 70px; padding: 10px; margin-top: 8px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 14px; resize: vertical; } .modal-card select { padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; } .modal-close { position: absolute; top: 14px; right: 18px; background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; } .modal-card { position: relative; } .tanggapan-item { background: var(--panel-2); border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 13.5px; } .tanggapan-item .tdate { color: var(--muted); font-size: 11px; margin-top: 4px; } /* Foto bukti/tindak lanjut yang dilampirkan petugas pada tanggapan. */ .tanggapan-item .tg-foto { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .tanggapan-item .tg-foto img { max-height: 120px; max-width: 100%; border-radius: 8px; border: 1px solid var(--border); display: block; } /* Mobile */ .backdrop { display: none; } @media (max-width: 780px) { .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 30; transform: translateX(-100%); transition: transform .25s, visibility .25s; /* Saat tertutup: benar-benar disembunyikan, supaya isi yang (mungkin) meluber tidak menyembul ke layar dan tak bisa tersentuh/ter-fokus. */ visibility: hidden; overflow-x: hidden; } .sidebar.open { transform: translateX(0); visibility: visible; } .hamburger { display: inline-flex; } .messages, .composer, .quick-row { padding-left: 5%; padding-right: 5%; } .backdrop.show { display: block; position: fixed; inset: 0; background: var(--tirai); z-index: 25; } } /* ============ HALAMAN PROFIL / DATA DIRI ============ */ .profil-card { max-width: 480px; } .field-row { display: flex; gap: 12px; } .field-row .field { flex: 1; min-width: 0; } .field select { width: 100%; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 15px; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; } .field select:focus { outline: none; border-color: var(--accent); } .field select:disabled { opacity: .55; } .wa-row { display: flex; gap: 8px; } .wa-row input { flex: 1; min-width: 0; } .wa-row .btn { width: auto; flex-shrink: 0; padding: 12px 14px; font-size: 13px; } .btn-ghost { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); } .btn-ghost:disabled { opacity: .5; cursor: default; } .hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; } /* ---- Seksi Keluarga / Rekan (kerabat) di Profil & panel Data Diri ---- */ .kerabat-sec { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 18px; } .ks-title { font-size: 16px; margin-bottom: 4px; } .ks-sub { margin-top: 0 !important; margin-bottom: 12px; } .ks-count { margin-bottom: 10px; } .kerabat-card { display: flex; gap: 10px; align-items: flex-start; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; } .kerabat-card .kc-main { flex: 1; min-width: 0; } .kc-nama { font-weight: 600; font-size: 14.5px; } .kc-meta { font-size: 12px; color: var(--muted); margin-top: 3px; word-break: break-word; } .kc-act { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } .btn-mini { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer; font-family: inherit; } .btn-mini:hover { border-color: var(--accent); } .btn-mini.danger { color: var(--danger); } .btn-mini.danger:hover { border-color: var(--danger); } .kerabat-form { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-top: 10px; } .kf-head { font-weight: 600; font-size: 14px; margin-bottom: 10px; } .kerabat-form textarea { width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; font-size: 15px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; color: var(--text); } .kerabat-form textarea:focus { outline: none; border-color: var(--accent); } .kf-actions { display: flex; gap: 8px; margin-top: 4px; } .kf-actions .btn { width: auto; flex: 1; } /* Tombol untuk panel Data Diri di chat (modal) */ .btn-apply { background: var(--accent); color: var(--on-accent, #fff); border: none; border-radius: 8px; padding: 9px 16px; cursor: pointer; font-weight: 600; font-size: 13px; font-family: inherit; } .btn-apply:hover { background: var(--accent-dark, var(--accent)); } .btn-apply:disabled { opacity: .5; cursor: default; } .btn-ghost-sm { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 16px; cursor: pointer; font-weight: 600; font-size: 13px; font-family: inherit; } .btn-ghost-sm:hover { background: var(--hover); } #ddForm .kf-actions .btn-apply, #ddForm .kf-actions .btn-ghost-sm { flex: 1; } .opd-msg.err { color: var(--danger); font-size: 12.5px; margin-bottom: 8px; } /* Rincian pihak yang diwakili (di baris detail admin) */ .mewakili-detail { font-size: 12.5px; color: var(--muted); } .mewakili-detail .wa-link { color: var(--accent); text-decoration: none; } .mewakili-detail .wa-link:hover { text-decoration: underline; } /* Blok "Yang diwakili" pada detail/status/riwayat */ .mewakili-box { margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); font-size: 13px; line-height: 1.6; } .mewakili-box .mb-title { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 4px; } .mewakili-box .wa-link { color: var(--accent); text-decoration: none; } .mewakili-box .wa-link:hover { text-decoration: underline; } /* Base tombol/kartu — dipakai laman non-admin (status dll.); admin punya salinan inline sendiri. */ .btn-add { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 11px 20px; cursor: pointer; font-weight: 600; font-size: 14px; white-space: nowrap; font-family: inherit; } .btn-add:hover { background: var(--accent-dark); } .btn-add:disabled { opacity: .5; cursor: default; } .panel-box { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 18px; } .panel-box h3 { font-size: 15px; margin-bottom: 12px; } .msg-ok { background: rgba(74,217,145,.12); border: 1px solid rgba(74,217,145,.4); color: var(--ok); padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; display: none; } @media (max-width: 420px) { .field-row { flex-direction: column; gap: 0; } } /* ============ TOMBOL LAMPIRAN & CHIP TAUTAN ============ */ .attach-btn { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .attach-btn:hover { background: var(--hover); } .chip-link { text-decoration: none; display: inline-block; } /* ============ ADMIN: KLASIFIKASI BARU ============ */ .panel-note { font-size: 12px; color: var(--muted); font-weight: 400; } .fld-row { display: flex; gap: 12px; } .fld-row .fld { flex: 1; min-width: 0; } .urg { font-size: 12px; white-space: nowrap; } .urg-mendesak { color: var(--danger); font-weight: 600; } .urg-biasa { color: var(--muted); } .urg-jangka-panjang { color: var(--warn); } #fFotoImg { max-width: 100%; max-height: 220px; border-radius: 10px; border: 1px solid var(--border); display: block; } #mFoto { max-width: 100%; max-height: 240px; border-radius: 10px; border: 1px solid var(--border); } /* Blok data berlabel di dalam gelembung chat — huruf lebar tetap agar ":" lurus */ .bubble .data-blok { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.65; background: var(--blok-bg); border: 1px solid var(--blok-border); border-radius: 8px; padding: 9px 11px; margin: 7px 0; white-space: pre; overflow-x: auto; } .bubble.user .data-blok { background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.18); color: #fff; } /* Pembeda Aspirasi vs Pengaduan */ .jl { font-size: 12px; padding: 2px 8px; border-radius: 20px; white-space: nowrap; } .jl-pengaduan { background: rgba(241,92,109,.15); color: var(--danger); } .jl-aspirasi { background: rgba(74,217,145,.15); color: var(--ok); } /* Peringatan & form akun di dasbor admin */ .warn-box { background: rgba(245,165,36,.12); border: 1px solid rgba(245,165,36,.45); color: var(--warn); padding: 12px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.6; margin-bottom: 16px; } .warn-box b { color: var(--warn); } .akun-box { max-width: 440px; } .akun-box .hint { margin-bottom: 14px; } .akun-box .fld { margin-bottom: 12px; } .akun-box .msg-err, .akun-box .msg-ok { margin-bottom: 12px; } /* ============================================================ TEMA CERIA — ciri neo-brutalis: garis tebal hitam, bayangan keras tanpa blur, sudut membulat tegas. ============================================================ */ html[data-tema="ceria"] .auth-card, html[data-tema="ceria"] .modal-card, html[data-tema="ceria"] .table-wrap, html[data-tema="ceria"] .sum-card, html[data-tema="ceria"] .stat-card, html[data-tema="ceria"] .panel-box, html[data-tema="ceria"] .total-card { border: 2px solid #1a1a1a; box-shadow: 5px 5px 0 #1a1a1a; border-radius: 14px; } html[data-tema="ceria"] .btn, html[data-tema="ceria"] .btn-add, html[data-tema="ceria"] .btn-sm, html[data-tema="ceria"] .btn-save, html[data-tema="ceria"] .send-btn, html[data-tema="ceria"] .attach-btn, html[data-tema="ceria"] .chip, html[data-tema="ceria"] .head-nav { border: 2px solid #1a1a1a; box-shadow: 3px 3px 0 #1a1a1a; font-weight: 700; } html[data-tema="ceria"] .btn:active, html[data-tema="ceria"] .btn-add:active, html[data-tema="ceria"] .send-btn:active, html[data-tema="ceria"] .chip:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1a1a1a; } html[data-tema="ceria"] .bubble { border: 2px solid #1a1a1a; box-shadow: 3px 3px 0 #1a1a1a; border-radius: 14px; } html[data-tema="ceria"] .seg { border: 2px solid #1a1a1a; box-shadow: 3px 3px 0 #1a1a1a; } html[data-tema="ceria"] .sidebar, html[data-tema="ceria"] .chat-head, html[data-tema="ceria"] .page-head, html[data-tema="ceria"] .composer { border-color: #1a1a1a; border-width: 2px; } html[data-tema="ceria"] .brand h1, html[data-tema="ceria"] .page-head h1 { letter-spacing: -.3px; } /* ============================================================ PEMILIH TEMA (disuntikkan oleh /static/js/tema.js) ============================================================ */ .tema-btn { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); width: 38px; height: 38px; border-radius: 50%; font-size: 17px; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .tema-btn:hover { background: var(--hover); } .tema-btn.mengambang { position: fixed; top: 14px; right: 14px; z-index: 60; box-shadow: var(--shadow-card); } .tema-tirai { display: none; position: fixed; inset: 0; background: var(--tirai); z-index: 70; align-items: center; justify-content: center; padding: 20px; } .tema-tirai.show { display: flex; } .tema-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-card); padding: 22px; width: 100%; max-width: 460px; max-height: 85vh; overflow-y: auto; } .tema-panel h2 { font-size: 17px; margin-bottom: 4px; } .tema-panel .hint { margin-bottom: 16px; } .tema-grup { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 16px 0 8px; } .tema-grup:first-of-type { margin-top: 0; } .tema-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .tema-opsi { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer; color: var(--text); font-size: 13.5px; font-weight: 600; } .tema-opsi:hover { background: var(--hover); } .tema-opsi.aktif { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; } .tema-contoh { display: flex; flex-shrink: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); } .tema-contoh span { width: 12px; height: 26px; display: block; } .tema-tutup { margin-top: 18px; width: 100%; padding: 11px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; } .tema-tutup:hover { background: var(--hover); } @media (max-width: 420px) { .tema-list { grid-template-columns: 1fr; } } /* ============================================================ TEMA BERGAYA — tiap tema punya karakter desain sendiri: font, sudut, garis, dan bayangan ikut berubah, bukan hanya warna. ============================================================ */ /* ── Kertas · dokumen cetak, huruf berkait, tanpa bayangan ── */ html[data-tema="kertas"] { --bg: #f4f1e8; --panel: #fffdf7; --panel-2: #f0ece0; --chat-bg: #f8f6ef; --hover: #e6e0d0; --accent: #1f3a5f; --accent-dark: #16293f; --on-accent: #fffdf7; --in-bubble: #fffdf7; --in-bubble-text: #21201c; --out-bubble: #1f3a5f; --out-bubble-text: #fffdf7; --text: #21201c; --muted: #6a6558; --danger: #97241f; --warn: #8a5a00; --ok: #1f6b45; --border: #d5cdb8; --auth-bg: #f4f1e8; --shadow-card: none; --blok-bg: #f6f2e6; --blok-border: #d5cdb8; --font: Georgia, "Iowan Old Style", "Times New Roman", serif; --bg-gambar: none; --tirai: rgba(33,32,28,.4); } html[data-tema="kertas"] .auth-card, html[data-tema="kertas"] .modal-card, html[data-tema="kertas"] .table-wrap, html[data-tema="kertas"] .sum-card, html[data-tema="kertas"] .stat-card, html[data-tema="kertas"] .panel-box, html[data-tema="kertas"] .bubble, html[data-tema="kertas"] .chip, html[data-tema="kertas"] .btn, html[data-tema="kertas"] .btn-add, html[data-tema="kertas"] .head-nav { border-radius: 3px; box-shadow: none; } html[data-tema="kertas"] .brand h1, html[data-tema="kertas"] .page-head h1 { font-weight: 700; letter-spacing: .2px; } html[data-tema="kertas"] table.trx th { border-bottom: 2px solid var(--text); text-transform: uppercase; letter-spacing: .8px; } html[data-tema="kertas"] .total-card { background: var(--accent); border-radius: 3px; } /* ── Kaca · panel bening berembun di atas gradasi ── */ html[data-tema="kaca"] { --bg: #1b1235; --panel: rgba(255,255,255,.09); --panel-2: rgba(255,255,255,.13); --chat-bg: transparent; --hover: rgba(255,255,255,.2); --accent: #7150f5; --accent-dark: #5b3fd6; --on-accent: #fff; --in-bubble: rgba(255,255,255,.14); --in-bubble-text: #f4f1ff; --out-bubble: #7150f5; --out-bubble-text: #fff; --text: #f4f1ff; --muted: #b9b0dd; --danger: #ff8095; --warn: #ffce6a; --ok: #6ee7b7; --border: rgba(255,255,255,.2); --auth-bg: none; --shadow-card: 0 18px 50px rgba(0,0,0,.35); --blok-bg: rgba(0,0,0,.25); --blok-border: rgba(255,255,255,.16); --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --bg-gambar: radial-gradient(circle at 15% 15%, #4c2a8f 0%, transparent 45%), radial-gradient(circle at 85% 25%, #1e5fa8 0%, transparent 45%), radial-gradient(circle at 50% 90%, #8a2b6b 0%, transparent 50%); --tirai: rgba(12,7,28,.55); } html[data-tema="kaca"] .auth-card, html[data-tema="kaca"] .modal-card, html[data-tema="kaca"] .table-wrap, html[data-tema="kaca"] .sum-card, html[data-tema="kaca"] .stat-card, html[data-tema="kaca"] .panel-box, html[data-tema="kaca"] .sidebar, html[data-tema="kaca"] .chat-head, html[data-tema="kaca"] .page-head, html[data-tema="kaca"] .composer, html[data-tema="kaca"] .bubble, html[data-tema="kaca"] .tema-panel { backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); } html[data-tema="kaca"] .auth-card, html[data-tema="kaca"] .modal-card, html[data-tema="kaca"] .panel-box, html[data-tema="kaca"] .stat-card, html[data-tema="kaca"] .sum-card, html[data-tema="kaca"] .table-wrap { border-radius: 18px; } html[data-tema="kaca"] .bubble { border-radius: 16px; } /* ── Terminal · layar fosfor, huruf lebar tetap, sudut siku ── */ html[data-tema="terminal"] { --bg: #04120b; --panel: #071c11; --panel-2: #0a2617; --chat-bg: #04120b; --hover: #0f3722; --accent: #21a366; --accent-dark: #17784b; --on-accent: #04120b; --in-bubble: #0a2617; --in-bubble-text: #86f0ab; --out-bubble: #21a366; --out-bubble-text: #04120b; --text: #86f0ab; --muted: #4f9a6d; --danger: #ff6b6b; --warn: #ffc93c; --ok: #52e08a; --border: #1d5c39; --auth-bg: #04120b; --shadow-card: 0 0 0 1px #1d5c39; --blok-bg: #041a0f; --blok-border: #1d5c39; --font: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --bg-gambar: repeating-linear-gradient(0deg, rgba(134,240,171,.045) 0 1px, transparent 1px 3px); --tirai: rgba(2,10,6,.7); } html[data-tema="terminal"] .auth-card, html[data-tema="terminal"] .modal-card, html[data-tema="terminal"] .table-wrap, html[data-tema="terminal"] .sum-card, html[data-tema="terminal"] .stat-card, html[data-tema="terminal"] .panel-box, html[data-tema="terminal"] .bubble, html[data-tema="terminal"] .chip, html[data-tema="terminal"] .btn, html[data-tema="terminal"] .btn-add, html[data-tema="terminal"] .btn-sm, html[data-tema="terminal"] .head-nav, html[data-tema="terminal"] .composer textarea, html[data-tema="terminal"] .field input, html[data-tema="terminal"] .field select, html[data-tema="terminal"] .seg { border-radius: 0; } html[data-tema="terminal"] .send-btn, html[data-tema="terminal"] .attach-btn, html[data-tema="terminal"] .tema-btn { border-radius: 0; } html[data-tema="terminal"] .brand h1::before, html[data-tema="terminal"] .page-head h1::before { content: "> "; color: var(--accent); } html[data-tema="terminal"] .avatar, html[data-tema="terminal"] .bot-ava, html[data-tema="terminal"] .logo, html[data-tema="terminal"] .logo-sm { border-radius: 0; } /* ── Neon · gelap pekat dengan garis menyala ── */ html[data-tema="neon"] { --bg: #0a0618; --panel: #150d2b; --panel-2: #1e1340; --chat-bg: #0a0618; --hover: #2a1a5c; --accent: #c026a3; --accent-dark: #971b7d; --on-accent: #fff; --in-bubble: #1e1340; --in-bubble-text: #f0e6ff; --out-bubble: #c026a3; --out-bubble-text: #fff; --text: #f0e6ff; --muted: #a08fd0; --danger: #ff5c8a; --warn: #ffd166; --ok: #35e6c0; --border: #3b2570; --auth-bg: radial-gradient(circle at 50% 0%, #2a1060 0%, #0a0618 60%); --shadow-card: 0 0 28px rgba(192,38,163,.28); --blok-bg: rgba(0,0,0,.35); --blok-border: #3b2570; --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --bg-gambar: none; --tirai: rgba(5,2,15,.65); } html[data-tema="neon"] .auth-card, html[data-tema="neon"] .modal-card, html[data-tema="neon"] .panel-box, html[data-tema="neon"] .stat-card, html[data-tema="neon"] .sum-card, html[data-tema="neon"] .table-wrap { box-shadow: 0 0 24px rgba(192,38,163,.22); } html[data-tema="neon"] .send-btn, html[data-tema="neon"] .btn-primary, html[data-tema="neon"] .btn-add { box-shadow: 0 0 16px rgba(192,38,163,.55); } html[data-tema="neon"] .bubble.user { box-shadow: 0 0 14px rgba(192,38,163,.45); } html[data-tema="neon"] .bubble.bot { box-shadow: 0 0 12px rgba(53,230,192,.14); } html[data-tema="neon"] .brand h1, html[data-tema="neon"] .page-head h1 { text-shadow: 0 0 14px rgba(192,38,163,.6); } html[data-tema="neon"] .composer textarea:focus, html[data-tema="neon"] .field input:focus { box-shadow: 0 0 12px rgba(192,38,163,.45); } /* ── Nusantara · nuansa batik, cokelat–emas, huruf berkait ── */ html[data-tema="nusantara"] { --bg: #f2e8d5; --panel: #fffaf0; --panel-2: #f0e3ca; --chat-bg: #f7efdf; --hover: #e6d5b4; --accent: #7a3b12; --accent-dark: #5b2b0c; --on-accent: #fdf6e7; --in-bubble: #fffaf0; --in-bubble-text: #2b1d0e; --out-bubble: #7a3b12; --out-bubble-text: #fdf6e7; --text: #2b1d0e; --muted: #786244; --danger: #9e2b25; --warn: #8a5c00; --ok: #2f6b3a; --border: #d8c39c; --auth-bg: #f2e8d5; --shadow-card: 0 10px 28px rgba(90,60,20,.16); --blok-bg: #f7efdd; --blok-border: #d8c39c; --font: "Palatino Linotype", Palatino, Georgia, serif; --bg-gambar: repeating-linear-gradient(45deg, rgba(122,59,18,.05) 0 6px, transparent 6px 14px), repeating-linear-gradient(-45deg, rgba(122,59,18,.05) 0 6px, transparent 6px 14px); --tirai: rgba(43,29,14,.45); } html[data-tema="nusantara"] .auth-card, html[data-tema="nusantara"] .modal-card, html[data-tema="nusantara"] .panel-box, html[data-tema="nusantara"] .table-wrap, html[data-tema="nusantara"] .stat-card, html[data-tema="nusantara"] .sum-card { border-radius: 4px; border-top: 3px solid var(--accent); } html[data-tema="nusantara"] .bubble { border-radius: 4px; } html[data-tema="nusantara"] .total-card { border-radius: 4px; } html[data-tema="nusantara"] .brand h1, html[data-tema="nusantara"] .page-head h1 { letter-spacing: .5px; } /* ── Kontras Tinggi · untuk mata lelah / lansia ── */ html[data-tema="kontras"] { --bg: #000000; --panel: #000000; --panel-2: #101010; --chat-bg: #000000; --hover: #262626; --accent: #ffd500; --accent-dark: #e6c000; --on-accent: #000000; --in-bubble: #101010; --in-bubble-text: #ffffff; --out-bubble: #ffd500; --out-bubble-text: #000000; --text: #ffffff; --muted: #d4d4d4; --danger: #ff8080; --warn: #ffd500; --ok: #62ff9b; --border: #ffffff; --auth-bg: #000000; --shadow-card: none; --blok-bg: #101010; --blok-border: #ffffff; --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --bg-gambar: none; --tirai: rgba(0,0,0,.8); } html[data-tema="kontras"] { font-size: 17px; } html[data-tema="kontras"] .bubble, html[data-tema="kontras"] .auth-card, html[data-tema="kontras"] .modal-card, html[data-tema="kontras"] .table-wrap, html[data-tema="kontras"] .panel-box, html[data-tema="kontras"] .stat-card, html[data-tema="kontras"] .sum-card, html[data-tema="kontras"] .chip, html[data-tema="kontras"] .btn, html[data-tema="kontras"] .btn-add, html[data-tema="kontras"] .head-nav, html[data-tema="kontras"] .seg { border: 2px solid #fff; } html[data-tema="kontras"] .composer textarea, html[data-tema="kontras"] .field input, html[data-tema="kontras"] .field select { border: 2px solid #fff; } html[data-tema="kontras"] a, html[data-tema="kontras"] .auth-alt a { color: var(--accent); text-decoration: underline; } html[data-tema="kontras"] .bubble { font-size: 16px; } html[data-tema="kontras"] .muted, html[data-tema="kontras"] .hint { color: var(--muted); } .tema-opsi { align-items: flex-start; } .tema-nama { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tema-ket { font-size: 11.5px; font-weight: 400; color: var(--muted); line-height: 1.35; } /* ============================================================ TEMA JEPANG & ANIME ============================================================ */ /* ── Wabi · washi, tinta sumi, aksen merah stempel, motif seigaiha ── */ html[data-tema="wabi"] { --bg: #f2ece0; --panel: #fbf8f1; --panel-2: #efe8da; --chat-bg: #f6f2e9; --hover: #e5dccb; --accent: #9e2b25; --accent-dark: #7a1f1a; --on-accent: #fbf8f1; --in-bubble: #fbf8f1; --in-bubble-text: #1c1a17; --out-bubble: #9e2b25; --out-bubble-text: #fbf8f1; --text: #1c1a17; --muted: #6f665a; --danger: #9e2b25; --warn: #85601a; --ok: #3f6b4a; --border: #d9cfba; --auth-bg: #f2ece0; --shadow-card: none; --blok-bg: #f6f1e6; --blok-border: #d9cfba; --font: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Songti SC", Georgia, serif; --bg-gambar: repeating-radial-gradient(circle at 50% 100%, transparent 0 13px, rgba(28,26,23,.045) 13px 14px, transparent 14px 26px); --tirai: rgba(28,26,23,.4); } html[data-tema="wabi"] .auth-card, html[data-tema="wabi"] .modal-card, html[data-tema="wabi"] .table-wrap, html[data-tema="wabi"] .sum-card, html[data-tema="wabi"] .stat-card, html[data-tema="wabi"] .panel-box, html[data-tema="wabi"] .bubble, html[data-tema="wabi"] .chip, html[data-tema="wabi"] .btn, html[data-tema="wabi"] .btn-add, html[data-tema="wabi"] .head-nav { border-radius: 2px; box-shadow: none; } /* Garis tipis merah stempel di kiri judul — meniru tanda pada dokumen tradisional */ html[data-tema="wabi"] .brand h1, html[data-tema="wabi"] .page-head h1, html[data-tema="wabi"] .panel-box h3 { border-left: 3px solid var(--accent); padding-left: 10px; font-weight: 600; letter-spacing: 1px; } html[data-tema="wabi"] .logo, html[data-tema="wabi"] .logo-sm, html[data-tema="wabi"] .bot-ava, html[data-tema="wabi"] .avatar { border-radius: 2px; } html[data-tema="wabi"] .side-title, html[data-tema="wabi"] table.trx th { letter-spacing: 2px; } html[data-tema="wabi"] .messages { padding: 26px 12%; gap: 12px; } /* ── Sakura · anime cerah, serba membulat, bayangan merah muda ── */ html[data-tema="sakura"] { --bg: #fff4f8; --panel: #ffffff; --panel-2: #ffe8f0; --chat-bg: #fff8fb; --hover: #ffd6e5; --accent: #d92d76; --accent-dark: #b02160; --on-accent: #fff; --in-bubble: #ffffff; --in-bubble-text: #3a2130; --out-bubble: #d92d76; --out-bubble-text: #fff; --text: #3a2130; --muted: #8d6577; --danger: #d92d3f; --warn: #a06a00; --ok: #14805a; --border: #ffd0e0; --auth-bg: linear-gradient(160deg, #ffe3ef 0%, #e3f0ff 100%); --shadow-card: 0 12px 32px rgba(217,45,118,.18); --blok-bg: #fff2f7; --blok-border: #ffd0e0; --font: "Segoe UI Rounded", "Hiragino Maru Gothic ProN", "Quicksand", -apple-system, "Segoe UI", sans-serif; --bg-gambar: radial-gradient(circle at 12% 8%, rgba(255,183,214,.5) 0 22%, transparent 22%), radial-gradient(circle at 88% 14%, rgba(180,215,255,.45) 0 18%, transparent 18%); --tirai: rgba(90,40,65,.4); } html[data-tema="sakura"] .auth-card, html[data-tema="sakura"] .modal-card, html[data-tema="sakura"] .panel-box, html[data-tema="sakura"] .table-wrap, html[data-tema="sakura"] .stat-card, html[data-tema="sakura"] .sum-card, html[data-tema="sakura"] .total-card { border-radius: 22px; } html[data-tema="sakura"] .bubble { border-radius: 20px; } html[data-tema="sakura"] .bubble.user { border-top-right-radius: 6px; } html[data-tema="sakura"] .bubble.bot { border-top-left-radius: 6px; } html[data-tema="sakura"] .btn-primary, html[data-tema="sakura"] .btn-add, html[data-tema="sakura"] .send-btn { background: linear-gradient(135deg, #d92d76 0%, #b02160 100%); box-shadow: 0 6px 16px rgba(217,45,118,.35); } html[data-tema="sakura"] .chip, html[data-tema="sakura"] .head-nav, html[data-tema="sakura"] .btn, html[data-tema="sakura"] .btn-sm { border-radius: 22px; } html[data-tema="sakura"] .brand .logo, html[data-tema="sakura"] .bot-ava, html[data-tema="sakura"] .logo-sm { background: linear-gradient(135deg, #e0428b 0%, #b02160 100%); } html[data-tema="sakura"] .brand h1, html[data-tema="sakura"] .page-head h1 { font-weight: 700; } /* ── Mecha · panel HUD anime fiksi ilmiah, sudut tajam & garis cyan ── */ html[data-tema="mecha"] { --bg: #050d17; --panel: #0b1826; --panel-2: #11243a; --chat-bg: #050d17; --hover: #1a3b5c; --accent: #2ad4ee; --accent-dark: #14a9c2; --on-accent: #041019; --in-bubble: #11243a; --in-bubble-text: #d8ecff; --out-bubble: #2ad4ee; --out-bubble-text: #041019; --text: #d8ecff; --muted: #7fa3c4; --danger: #ff5b6e; --warn: #ffb545; --ok: #3ce6a4; --border: #1e4266; --auth-bg: linear-gradient(160deg, #050d17 0%, #0d2740 100%); --shadow-card: 0 0 0 1px rgba(42,212,238,.18), 0 10px 30px rgba(0,0,0,.5); --blok-bg: rgba(0,0,0,.4); --blok-border: #1e4266; --font: "Bahnschrift", "DIN Alternate", "Segoe UI", Roboto, sans-serif; --bg-gambar: repeating-linear-gradient(0deg, rgba(42,212,238,.05) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(42,212,238,.05) 0 1px, transparent 1px 44px); --tirai: rgba(3,8,15,.7); } html[data-tema="mecha"] .auth-card, html[data-tema="mecha"] .modal-card, html[data-tema="mecha"] .table-wrap, html[data-tema="mecha"] .sum-card, html[data-tema="mecha"] .stat-card, html[data-tema="mecha"] .panel-box { border-radius: 2px; border-left: 3px solid var(--accent); } html[data-tema="mecha"] .bubble { border-radius: 2px; } html[data-tema="mecha"] .bubble.bot { border-left: 3px solid var(--accent); } html[data-tema="mecha"] .bubble.user { border-right: 3px solid #041019; } html[data-tema="mecha"] .chip, html[data-tema="mecha"] .btn, html[data-tema="mecha"] .btn-add, html[data-tema="mecha"] .btn-sm, html[data-tema="mecha"] .head-nav, html[data-tema="mecha"] .seg, html[data-tema="mecha"] .composer textarea, html[data-tema="mecha"] .field input, html[data-tema="mecha"] .field select { border-radius: 2px; } html[data-tema="mecha"] .brand h1, html[data-tema="mecha"] .page-head h1, html[data-tema="mecha"] .side-title, html[data-tema="mecha"] table.trx th, html[data-tema="mecha"] .seg button { text-transform: uppercase; letter-spacing: 1.6px; } html[data-tema="mecha"] .stat-card .val, html[data-tema="mecha"] .sum-card .val { color: var(--accent); } html[data-tema="mecha"] .send-btn, html[data-tema="mecha"] .attach-btn, html[data-tema="mecha"] .tema-btn { border-radius: 2px; } /* ============================================================ ANIMASI SAKURA — hanya aktif pada tema Sakura. Semua digambar dengan CSS/SVG sebaris; tanpa berkas luar. Hanya menganimasikan transform & opacity agar ringan di HP. ============================================================ */ .sakura-layar { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; } /* Ranting di pojok kanan atas, bergoyang pelan seperti tertiup angin */ .sakura-ranting { position: absolute; top: -14px; right: -20px; width: 340px; max-width: 62vw; transform-origin: 88% 0%; animation: sakura-tertiup 7s ease-in-out infinite; opacity: .95; } .sakura-ranting svg { width: 100%; height: auto; display: block; } @keyframes sakura-tertiup { 0%, 100% { transform: rotate(-1.1deg); } 35% { transform: rotate(1.4deg); } 60% { transform: rotate(-.4deg); } } /* Tiap kelopak: pembungkus mengurus jatuhnya, isinya mengurus ayunan & putaran */ .kelopak-bungkus { position: absolute; top: -8vh; left: var(--mulai, 50%); animation: sakura-jatuh var(--lama, 12s) linear var(--tunda, 0s) infinite; will-change: transform; } .kelopak { width: var(--besar, 11px); height: var(--besar, 11px); background: linear-gradient(135deg, #ffd3e6 0%, #ff9dc6 55%, #f77bb0 100%); border-radius: 100% 4px 100% 4px; box-shadow: inset -1px -1px 2px rgba(200,80,140,.28); animation: sakura-berayun var(--ayun, 4s) ease-in-out infinite alternate; will-change: transform; } @keyframes sakura-jatuh { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 6% { opacity: .92; } 88% { opacity: .92; } 100% { transform: translate3d(var(--geser, 90px), 116vh, 0); opacity: 0; } } @keyframes sakura-berayun { 0% { transform: translateX(-26px) rotate(0deg); } 100% { transform: translateX(26px) rotate(320deg); } } @media (max-width: 640px) { .sakura-ranting { width: 210px; } } /* Hormati setelan "kurangi animasi" pada sistem pengguna */ @media (prefers-reduced-motion: reduce) { .sakura-ranting, .kelopak-bungkus, .kelopak { animation: none; } .kelopak-bungkus { display: none; } } /* ── Pringsewu · rumpun bambu; "pring sewu" = seribu bambu ── */ html[data-tema="pringsewu"] { --bg: #eef3e4; --panel: #fcfef7; --panel-2: #e5ecd6; --chat-bg: #f4f7ec; --hover: #d8e3c3; --accent: #2a6b42; --accent-dark: #1d4e2f; --on-accent: #fcfef7; --in-bubble: #fcfef7; --in-bubble-text: #17251a; --out-bubble: #2a6b42; --out-bubble-text: #fcfef7; --text: #17251a; --muted: #5c6c5d; --danger: #9c2b26; --warn: #7d5a00; --ok: #2a6b42; --border: #cfdcba; --auth-bg: linear-gradient(170deg, #e9f0dc 0%, #d3e0be 100%); --shadow-card: 0 10px 26px rgba(35,70,40,.12); --blok-bg: #f2f6e8; --blok-border: #cfdcba; --font: "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif; --bg-gambar: repeating-linear-gradient(90deg, rgba(42,107,66,.055) 0 3px, transparent 3px 96px); --tirai: rgba(23,37,26,.45); } /* Kartu diberi ruas seperti batang bambu: garis kiri tebal + sekat tipis */ html[data-tema="pringsewu"] .panel-box, html[data-tema="pringsewu"] .stat-card, html[data-tema="pringsewu"] .sum-card, html[data-tema="pringsewu"] .table-wrap, html[data-tema="pringsewu"] .auth-card, html[data-tema="pringsewu"] .modal-card { border-radius: 12px; border-left: 4px solid var(--accent); background-image: linear-gradient(180deg, rgba(42,107,66,.13) 0 2px, transparent 2px); } html[data-tema="pringsewu"] .bubble { border-radius: 12px; } html[data-tema="pringsewu"] .bubble.bot { border-left: 3px solid rgba(42,107,66,.45); } html[data-tema="pringsewu"] .chip, html[data-tema="pringsewu"] .head-nav, html[data-tema="pringsewu"] .btn, html[data-tema="pringsewu"] .btn-sm { border-radius: 18px; } html[data-tema="pringsewu"] .brand h1, html[data-tema="pringsewu"] .page-head h1 { letter-spacing: .3px; font-weight: 700; } html[data-tema="pringsewu"] .total-card { background: linear-gradient(135deg, #2a6b42 0%, #3c7849 100%); } /* ============================================================ ANIMASI BAMBU — rumpun bergoyang + daun melayang tertiup angin. Aktif hanya pada tema Pringsewu. ============================================================ */ .bambu-layar { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; } /* Rumpun bambu di kiri & kanan layar, tiap batang bergoyang beda irama */ .bambu-batang { position: absolute; bottom: 0; transform-origin: 50% 100%; animation: bambu-goyang var(--irama, 9s) ease-in-out var(--tunda, 0s) infinite; will-change: transform; } .bambu-batang svg { height: 100%; width: auto; display: block; } /* Hembusan angin: ayunan lembut yang sesekali menguat, lalu tenang lagi */ @keyframes bambu-goyang { 0%, 100% { transform: rotate(-.7deg) skewX(.25deg); } 22% { transform: rotate(.9deg) skewX(-.35deg); } 46% { transform: rotate(-.35deg) skewX(.15deg); } 62% { transform: rotate(2.2deg) skewX(-.9deg); } /* hembusan kencang */ 78% { transform: rotate(-.2deg) skewX(.1deg); } } /* Daun bambu yang lepas dan melayang menyeberangi layar */ .daun-bungkus { position: absolute; top: var(--mulai-y, 20vh); left: -6vw; animation: daun-melayang var(--lama, 16s) linear var(--tunda, 0s) infinite; will-change: transform; } .daun { position: relative; width: var(--panjang, 22px); height: var(--lebar, 8px); background: linear-gradient(100deg, #6aa06b 0%, #3f7d4a 55%, #2a6b42 100%); border-radius: 100% 6px 100% 6px; box-shadow: inset 0 -1px 2px rgba(20,50,28,.3); animation: daun-berputar var(--putar, 3.4s) ease-in-out infinite alternate; will-change: transform; } /* Tulang daun */ .daun::after { content: ""; position: absolute; inset: 45% 12% 45% 12%; background: rgba(240,255,235,.5); border-radius: 2px; } @keyframes daun-melayang { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 7% { opacity: .85; } 90% { opacity: .85; } 100% { transform: translate3d(112vw, var(--turun, 34vh), 0); opacity: 0; } } @keyframes daun-berputar { 0% { transform: rotate(-24deg) rotateX(0deg); } 100% { transform: rotate(28deg) rotateX(320deg); } } @media (max-width: 640px) { .bambu-batang { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .bambu-batang { animation: none; } .daun-bungkus { display: none; } } /* ================================================================ BICARA DENGAN PETUGAS — panel warga Panel menutupi kolom chat bot, jadi warga tidak kehilangan riwayat percakapan dengan asisten saat berbicara dengan petugas. ================================================================ */ main.chat { position: relative; } .talk-panel { display: none; position: absolute; inset: 0; z-index: 20; background: var(--bg); flex-direction: column; } .talk-panel.show { display: flex; } .talk-back { background: none; border: none; color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } .talk-panel .messages { padding-top: 16px; } .bubble .sender { display: block; font-size: 11.5px; font-weight: 700; color: var(--accent); margin-bottom: 3px; } .talk-note { align-self: center; max-width: 92%; background: rgba(245,165,36,.12); border: 1px solid rgba(245,165,36,.45); color: var(--warn); font-size: 12.5px; line-height: 1.5; padding: 9px 12px; border-radius: 10px; margin: 4px 0; } .foto-wrap { display: flex; flex-wrap: wrap; gap: 8px; } .foto-wrap img { max-height: 120px; max-width: 100%; border-radius: 8px; border: 1px solid var(--border); display: block; } /* Daftar room (1 room = 1 topik/laporan) di sidebar */ .new-room-btn { width: 100%; padding: 10px; margin-bottom: 12px; background: var(--accent); color: #fff; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; font-size: 14px; } .new-room-btn:hover { background: var(--accent-dark, var(--accent)); } /* Ikon garis (line icons) — konsisten, elegan, mengikuti currentColor */ .ic { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -3px; } .ic-lg { width: 26px; height: 26px; } .new-room-btn { display: flex; align-items: center; justify-content: center; gap: 8px; } .side-foot a, .side-foot button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .head-nav { display: inline-flex; align-items: center; gap: 6px; } .bot-ava .ic { stroke: #fff; } .brand .logo .ic { width: 42px; height: 42px; stroke: var(--accent); } .talk-back { display: inline-flex; align-items: center; justify-content: center; } .hamburger { align-items: center; justify-content: center; } /* display diatur di media query (mobile) */ /* Menu tumpuk di sidebar kiri (pengganti CTA di atas kolom chat) */ .side-menu { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; } .side-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; box-sizing: border-box; background: none; border: none; color: var(--text); font-size: 13.5px; font-family: inherit; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-decoration: none; } .side-menu-item:hover { background: var(--hover); } .side-menu-item .chip-badge { margin-left: auto; } .mini-soon { margin-left: auto; font-size: 9px; background: var(--warn); color: #000; padding: 1px 6px; border-radius: 8px; font-weight: 700; } /* Titik notifikasi pada hamburger saat ada pesan petugas belum dibaca (sidebar tertutup di HP) */ .hamburger { position: relative; } .hamburger.has-unread::after { content: ''; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); border: 2px solid var(--panel); } .room-item { padding: 9px 11px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; margin-bottom: 4px; } .room-item:hover { background: var(--hover); } .room-item.active { background: var(--panel-2); border-color: var(--border); } .room-item .rn { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .room-item .rk { font-size: 11px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; } .room-draft { color: var(--muted); font-style: italic; } .konversi-info { margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .4); color: var(--text); } .chip-badge { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; background: var(--danger); color: #fff; border-radius: 20px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } /* ================================================================ PANEL PETUGAS — kotak masuk gaya WhatsApp (dua kolom) ================================================================ */ .inbox-shell { display: flex; height: calc(100vh - 57px); overflow: hidden; } .inbox-list { width: 330px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; } .inbox-tools { padding: 10px 12px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; } .inbox-tools input, .inbox-tools select { flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 9px; font-size: 13px; font-family: inherit; } .inbox-scroll { flex: 1; overflow-y: auto; } .inbox-item { padding: 11px 13px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; gap: 10px; align-items: flex-start; } .inbox-item:hover { background: var(--hover); } .inbox-item.active { background: var(--hover); border-left: 3px solid var(--accent); padding-left: 10px; } .inbox-item .ava { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; } .inbox-item .isi { flex: 1; min-width: 0; } .inbox-item .nm { font-size: 14px; font-weight: 600; display: flex; gap: 6px; align-items: center; } .inbox-item .nm span.wkt { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 400; } .inbox-item .pv { font-size: 12.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inbox-item .mt { font-size: 11px; color: var(--muted); margin-top: 4px; display: flex; gap: 6px; align-items: center; } .unread-dot { min-width: 18px; padding: 0 5px; background: var(--danger); color: #fff; border-radius: 20px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .pill.menunggu { background: rgba(245,165,36,.15); color: var(--warn); } .pill.dijawab { background: rgba(47,111,235,.15); color: var(--accent); } .inbox-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); } .thread-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--panel); } .thread-head .who { flex: 1; min-width: 0; } .thread-head .who .n { font-weight: 600; font-size: 15px; } .thread-head .who .s { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .thread-head .thread-back { display: none; background: none; border: none; color: var(--text); font-size: 22px; cursor: pointer; } .thread-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; padding: 20px; text-align: center; } .rekap-box { white-space: pre-wrap; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; max-height: 55vh; overflow-y: auto; } @media (max-width: 820px) { .inbox-shell { position: relative; } .inbox-list { width: 100%; } .inbox-thread { display: none; position: absolute; inset: 0; } .inbox-shell.thread-open .inbox-list { display: none; } .inbox-shell.thread-open .inbox-thread { display: flex; } .thread-head .thread-back { display: block; } } /* ================================================================ TESTING ROUND 2 — draft delete, lampiran, penilaian bintang ================================================================ */ /* Hapus draf laporan di sidebar (Isu 8) */ .room-item { display: flex; align-items: center; gap: 6px; } .room-item .room-main { flex: 1; min-width: 0; } .room-del { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 14px; padding: 4px; border-radius: 6px; opacity: .55; } .room-del:hover { opacity: 1; background: var(--hover); color: var(--danger); } /* Lampiran di bubble percakapan (Isu 10 & 11) */ .att-img img { max-width: 220px; max-height: 260px; border-radius: 10px; display: block; margin-bottom: 4px; border: 1px solid var(--border); } .att-vid { max-width: 260px; max-height: 260px; border-radius: 10px; display: block; margin-bottom: 4px; background: #000; } .att-file { display: inline-block; margin-bottom: 4px; padding: 8px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 13px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .att-file:hover { border-color: var(--accent); } .talk-composer .attach-btn { display: flex; } /* Penilaian bintang (Isu 7) */ .rating-bar { margin: 10px 14px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); } .rating-title { font-size: 13px; color: var(--text); margin-bottom: 8px; } .stars { font-size: 28px; line-height: 1; letter-spacing: 4px; color: #f5a524; cursor: pointer; user-select: none; } .stars span { cursor: pointer; transition: transform .08s; } .stars span:hover { transform: scale(1.15); } .rating-bar input[type=text] { width: 100%; box-sizing: border-box; margin: 10px 0; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; } .rating-bar .btn-save { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; cursor: pointer; font-weight: 600; font-size: 13px; } .rating-bar .btn-save:disabled { opacity: .5; cursor: not-allowed; } .rating-done { margin: 10px 14px; padding: 10px 14px; border-radius: 12px; font-size: 13px; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); color: var(--text); } .rating-done b { color: #f5a524; letter-spacing: 2px; } .rk-komentar { margin-top: 4px; color: var(--muted); font-style: italic; } /* ================================================================ LANDING PAGE (alur tegas) ================================================================ */ .form-err { color: var(--danger); font-size: 13px; margin-top: 8px; min-height: 16px; } /* Di Beranda tombol tema mengambang bertabrakan dgn tombol Keluar — sembunyikan. */ .landing-page .tema-btn { display: none !important; } .landing-top { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--panel); } .landing-top .who { flex: 1; min-width: 0; } .landing-top .who .n { font-weight: 600; font-size: 14px; } .landing-top .who .e { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .landing-wrap { max-width: 880px; margin: 0 auto; padding: 16px 16px 26px; } .landing-hero { text-align: center; margin: 8px 0 16px; } /* Slot gambar Beranda — ganti /static/img/beranda.svg dgn gambar (persegi) Anda. Besar (≈6× dari semula) tapi responsif: mengecil di layar pendek agar tetap muat. */ .landing-image img { width: auto; height: min(350px, 39vh); aspect-ratio: 1 / 1; border-radius: 30px; object-fit: cover; display: block; margin: 0 auto 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); } /* Tombol Keluar ikon di pojok Beranda */ .logout-ic { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; cursor: pointer; color: var(--text); display: inline-flex; align-items: center; } .logout-ic:hover { background: var(--hover); color: var(--danger); } .landing-hero h1 { font-size: 22px; margin: 10px 0 4px; } .landing-hero p { color: var(--muted); font-size: 14px; } .choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .choice-card { display: flex; gap: 14px; align-items: flex-start; text-align: left; text-decoration: none; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 16px; padding: 15px 16px; cursor: pointer; transition: border-color .15s, transform .1s, box-shadow .15s; } .choice-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.12); } .choice-card .ic { width: 28px; height: 28px; flex-shrink: 0; } .choice-card .ct .t { font-weight: 700; font-size: 16px; } .choice-card .ct .d { color: var(--muted); font-size: 13px; margin-top: 5px; line-height: 1.45; } .choice-card.primary { background: linear-gradient(135deg, var(--accent-dark), var(--accent)); color: #fff; border-color: transparent; } .choice-card.primary .ct .d { color: rgba(255,255,255,.88); } .choice-card.soon { opacity: .72; } .choice-card .badge { font-size: 10px; background: var(--warn); color: #000; padding: 1px 7px; border-radius: 10px; font-weight: 700; margin-left: 6px; vertical-align: middle; } .landing-secondary { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; } .landing-secondary a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; font-size: 13px; } .landing-secondary a:hover { border-color: var(--accent); } @media (max-width: 640px) { .choice-grid { grid-template-columns: 1fr; } } /* ================================================================ LAMAN CEK STATUS ================================================================ */ .status-search { max-width: 720px; margin: 0 auto 18px; } .status-search code { background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 12px; } .ss-row { display: flex; gap: 8px; margin-top: 6px; } .ss-row input { flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 11px 13px; font-size: 15px; font-family: inherit; letter-spacing: .5px; text-transform: uppercase; } .ss-row input:focus { outline: none; border-color: var(--accent); } .recent-wrap { margin-top: 16px; } .recent-title { font-size: 12px; color: var(--muted); margin-bottom: 8px; } .recent-list { display: flex; flex-wrap: wrap; gap: 8px; } .recent-chip { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 7px 11px; color: var(--text); } .recent-chip:hover { border-color: var(--accent); } .recent-chip .rk { font-family: ui-monospace, monospace; font-size: 12.5px; } .status-result { max-width: 720px; margin: 0 auto; } .sr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .sr-judul { flex: 1; font-size: 17px; font-weight: 700; } .sr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 14px 0; } .sr-row { display: flex; gap: 8px; font-size: 13px; } .sr-row .k { color: var(--muted); min-width: 96px; } .sr-row .v { color: var(--text); font-weight: 500; } .sr-block { margin-top: 12px; } .sr-block > .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; } .sr-block > .v { font-size: 14px; line-height: 1.5; white-space: pre-wrap; } @media (max-width: 560px) { .sr-grid { grid-template-columns: 1fr; } } /* Stepper progres status */ .prog { display: flex; align-items: center; margin: 6px 0 4px; } .prog .pstep { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; } .prog .pdot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--panel); border: 2px solid var(--border); color: var(--muted); font-size: 13px; font-weight: 700; } .prog .plbl { font-size: 11px; color: var(--muted); text-align: center; max-width: 84px; } .prog .pstep.done .pdot { background: var(--ok); border-color: var(--ok); color: #fff; } .prog .pstep.done .plbl { color: var(--text); } .prog .pstep.current .pdot { background: var(--accent); border-color: var(--accent); color: #fff; } .prog .pstep.current .plbl { color: var(--text); font-weight: 600; } .prog .pstep.rej .pdot { background: var(--danger); border-color: var(--danger); color: #fff; } .prog .pstep.rej .plbl { color: var(--danger); font-weight: 600; } .prog .pbar { flex: 1; height: 3px; background: var(--border); margin: 0 4px 22px; border-radius: 2px; } .prog .pbar.done { background: var(--ok); } /* Daftar spammer (admin) */ .spammer-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .spammer-item { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; } .spammer-item .si-main { flex: 1; min-width: 0; } .spammer-item .se { font-weight: 600; font-size: 14px; word-break: break-all; } .spammer-item .sa { font-size: 12px; color: var(--muted); margin-top: 2px; } /* Pengaturan admin (Isu 1) */ .set-row { margin-bottom: 16px; } .set-row label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 3px; } .set-row .hint { margin-bottom: 6px; } .set-input { width: 130px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 14px; } /* ================================================================ Tombol Keluar ikon (pojok kanan atas) + pemilih tema di Profil ================================================================ */ .head-nav-icon { padding: 8px 11px; } .tema-akordeon { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; } .tema-akordeon summary { cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; display: inline-flex; align-items: center; gap: 6px; } .tema-akordeon summary::-webkit-details-marker { display: none; } .tema-akordeon summary::before { content: '▸'; color: var(--muted); display: inline-block; transition: transform .15s; } .tema-akordeon[open] summary::before { transform: rotate(90deg); } .tema-akordeon #temaPemilih { margin-top: 12px; } /* ================================================================ Penyesuaian mobile umum (mayoritas warga melapor via HP) ================================================================ */ @media (max-width: 560px) { .page-head { padding: 12px 14px; gap: 10px; } .page-head h1 { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .page-head .logo-sm { width: 34px; height: 34px; } .head-nav { padding: 7px 11px; font-size: 12.5px; } .head-nav-icon { padding: 7px 9px; } .page-body { padding: 16px 14px; } .landing-wrap { padding: 18px 14px 40px; } .landing-hero h1 { font-size: 20px; } .modal-card { padding: 18px; } .sr-head { flex-wrap: wrap; } .ss-row { flex-wrap: wrap; } .ss-row input { flex-basis: 100%; } .ss-row .btn-add { flex: 1; } } /* ================================================================ Layar intro chat (masuk /chat tanpa langsung buat draf) ================================================================ */ .chat-intro { max-width: 440px; margin: auto; text-align: center; padding: 30px 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .chat-intro .intro-ic { width: 76px; height: 76px; border-radius: 22px; background: var(--panel-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } .chat-intro .intro-ic .ic { width: 40px; height: 40px; stroke: var(--accent); } .chat-intro h2 { font-size: 20px; } .chat-intro p { color: var(--muted); font-size: 14px; line-height: 1.55; } .intro-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; } .intro-btn { margin-top: 6px; background: var(--accent); color: #fff; border: none; border-radius: 12px; padding: 12px 26px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; } .intro-btn:hover { background: var(--accent-dark); } .intro-btn.ghost { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); } /* ================================================================ Dua tombol create + menu filter Laporan/Aspirasi di sidebar ================================================================ */ .new-room-btn { margin-bottom: 8px; } .new-room-btn.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .new-room-btn.secondary:hover { background: var(--panel-2); } .side-menu-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 8px 0 4px 10px; } .side-menu-sep { height: 1px; background: var(--border); margin: 8px 4px; } .filter-item.active { background: var(--panel-2); color: var(--accent); font-weight: 600; } .filter-item.active .ic { stroke: var(--accent); } .room-jenis { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); } .room-jenis.pengaduan { color: var(--warn); } .room-jenis.aspirasi { color: var(--accent); } /* Link Keluar berikon di footer Profil */ #footNav a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; } /* Pengaturan gambar Beranda (admin) */ .beranda-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .beranda-preview { width: 110px; height: 110px; border-radius: 16px; object-fit: cover; border: 1px solid var(--border); background: var(--panel); flex-shrink: 0; } .beranda-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .beranda-actions label { cursor: pointer; } /* Admin OPD (form CRUD) + tombol WhatsApp di daftar aspirasi */ .opd-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; } .opd-form select, .opd-form input { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; } .opd-form input { min-width: 130px; } .icon-btn.wa:hover { border-color: #25d366; color: #25d366; } /* ============ PETA SEBARAN (choropleth) ============ */ .peta-wrap { position: relative; } .peta-map { width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-height: 200px; } .peta-svg { display: block; width: 100%; height: auto; } .peta-svg path { cursor: pointer; transition: fill .1s; } .peta-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--muted); align-items: center; } .peta-legend .lg-item { display: inline-flex; align-items: center; gap: 5px; } .peta-legend .lg-item i { width: 15px; height: 15px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,0.25); } .peta-tip { position: absolute; pointer-events: none; z-index: 5; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 12px; line-height: 1.35; box-shadow: 0 4px 14px rgba(0,0,0,0.25); max-width: 200px; } .peta-tip b { font-size: 13px; }