/* Aduan CSIRT Kota Semarang — gaya kustom (pelengkap Tailwind CDN).
   =====================================================================
   TEMA: Laporsemar (2026-10-26) — menggantikan dominasi navy/kuning.
   Pemetaan warna (dari CSS resmi laporsemar):
     --primary       #B91C1C  merah utama (tombol, hero, aksen)
     --primary-dark  #991B1B  merah gelap (hover, ujung gradien hero)
     --primary-light #FEE2E2  merah muda (latar aksen, tombol sekunder)
     --primary-50    #FFF5F5  merah sangat muda (latar lembut)
     --success       #16a34a  hijau semantik
     --warning       #d97706  kuning semantik
     --info          #0284c7  biru semantik (status/info generik)
     --accent-blue   #b91c1c  ALIAS LAMA → kini menunjuk merah utama
     --accent-blue-light #fee2e2 (alias lama → merah muda)
     --surface       #ffffff  permukaan kartu
     --surface-2     #F9FAFB  latar halaman
     --border        #E5E7EB  garis pemisah
     --ink           #111827  teks utama
     --ink-2         #374151  teks sekunder
     --muted         #9CA3AF  teks redup
   Navy #0a1230 dan biru terang #2563eb SUDAH TIDAK DIPAKAI lagi —
   footer publik + sidebar/topbar admin kini merah laporsemar
   (perubahan 2026-10-27, Tugas 1/6). Jangan pakai --navy sebagai
   warna utama di halaman mana pun.
   Radius sudut: 12px (.75rem). Bayangan: lembut.
   Logo resmi CSIRT (perisai navy + Tugu Muda) tampil di header putih.
   ===================================================================== */

:root {
    --primary: #b91c1c;
    --primary-dark: #991b1b;
    --primary-light: #fee2e2;
    --primary-50: #fff5f5;
    --success: #16a34a;
    --warning: #d97706;
    --info: #0284c7;
    /* Alias lama "biru" — kini menunjuk palet merah, supaya komponen
       lama (.btn-blue, .badge-progress, .badge-info, .alert-info,
       .reply-staff) otomatis ikut tema merah tanpa ubah Blade. */
    --accent-blue: #b91c1c;
    --accent-blue-light: #fee2e2;
    --surface: #ffffff;
    --surface-2: #f9fafb;
    --border: #e5e7eb;
    --ink: #111827;
    --ink-2: #374151;
    --muted: #9ca3af;
    /* --navy (#0a1230) DIHAPUS 2026-10-27: footer + admin kini merah.
       Logo resmi CSIRT (perisai navy) tetap tampil di header putih. */
    /* Alias lama (dipakai komponen di bawah) — menunjuk ke palet baru. */
    --blue: #b91c1c;
    --blue-dark: #991b1b;
    --accent: #b91c1c;
    --accent-dark: #991b1b;
    --line: #e5e7eb;
    --bg: #f9fafb;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--bg);
}

/* ---------- Komponen dasar ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: .75rem;
    box-shadow: 0 1px 3px rgb(17 24 39 / .06);
}

.label {
    display: block;
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: .375rem;
    color: var(--ink);
}
.label .req { color: #dc2626; }
.hint { font-size: .8125rem; color: var(--muted); margin-top: .375rem; }

.input, .select, .textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: .75rem;
    padding: .75rem .875rem;
    font-size: 1rem;
    line-height: 1.5;
    background: #fff;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: #9ca3af; }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(185 28 28 / .18);
}
.input-error { border-color: #dc2626; }
.input-error:focus { border-color: #dc2626; box-shadow: 0 0 0 3px rgb(220 38 38 / .15); }
.field-error { font-size: .8125rem; color: #b91c1c; margin-top: .375rem; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .9375rem;
    padding: .75rem 1.5rem;
    border-radius: .75rem;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, transform .05s;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
/* Aksen = merah muda latar, teks merah gelap (kontras kuat, konsisten). */
.btn-accent { background: var(--primary-light); color: var(--primary-dark); }
.btn-accent:hover { background: #fecaca; }
/* Alias lama .btn-blue — kini sama dengan .btn-primary (merah). */
.btn-blue { background: var(--accent-blue); color: #fff; }
.btn-blue:hover { background: var(--primary-dark); }
.btn-outline { background: #fff; color: var(--ink); border-color: #d1d5db; }
.btn-outline:hover { background: #f9fafb; border-color: #9ca3af; }
.btn-danger { background: #b91c1c; color: #fff; }
.btn-danger:hover { background: #991b1b; }
/* Tombol aksi baris admin (Tugas 3): Ubah = biru solid, Hapus = merah solid.
   WARNA LITERAL, bukan var(--accent-blue)/var(--blue) — var itu dipetakan
   ulang ke merah (#b91c1c) supaya komponen lama ikut tema merah, jadi class
   biru baru TIDAK BOLEH memakainya. Nama class juga sengaja tidak
   mengandung kata yang dipetakan ulang (jangan pakai .btn-blue).
   Kontras teks putih: #2563eb 5,17:1; #b91c1c 6,47:1 (keduanya ≥4,5:1).
   Ukuran mengikuti .btn-sm (padding .5rem 1rem, font .875rem). */
.btn-edit { background: #2563eb; color: #fff; }
.btn-edit:hover { background: #1d4ed8; }
.btn-delete { background: #b91c1c; color: #fff; }
.btn-delete:hover { background: #991b1b; }
.btn-sm { padding: .5rem 1rem; font-size: .875rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid rgb(185 28 28 / .55);
    outline-offset: 2px;
}

/* ---------- Badge ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    padding: .375rem .625rem;
    border-radius: 9999px;
    white-space: nowrap;
}
/* Warna status tiket — satu skema di semua tempat (lencana + kartu dashboard):
   Terbuka = merah, Diproses = kuning, Selesai = hijau, Ditutup = biru.
   (Dulu Terbuka kuning & Diproses merah — dibalik 2026-10-27 atas permintaan Danan.) */
.badge-open      { background: #fee2e2; color: #991b1b; }
.badge-progress  { background: #fef9c3; color: #854d0e; }
.badge-resolved  { background: #dcfce7; color: #166534; }
/* "Ditutup": biru cerah PENUH (solid) — latar #2563eb teks putih (5,2:1). */
.badge-closed    { background: #2563eb; color: #fff; }
.badge-high      { background: #fee2e2; color: #991b1b; }
.badge-medium    { background: #fef3c7; color: #92400e; }
.badge-low       { background: #e5e7eb; color: #374151; }
.badge-info      { background: #fee2e2; color: #991b1b; }

/* ---------- Alert ---------- */
.alert { border-radius: .75rem; border: 1px solid; padding: .875rem 1rem; font-size: .9375rem; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-info    { background: #fff5f5; border-color: #fecaca; color: #991b1b; }

/* ---------- Hero & nav publik ---------- */
/* Header publik: putih, teks gelap, garis bawah aksen merah (lihat
   layouts/app.blade.php). Footer kini merah gelap (#991b1b). */
.hero {
    background:
        radial-gradient(60rem 20rem at 85% -10%, rgb(255 255 255 / .14), transparent 60%),
        radial-gradient(50rem 24rem at -10% 110%, rgb(0 0 0 / .18), transparent 60%),
        linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

/* ---------- Peta GIS animasi di sisi kanan hero ----------
   Peta disisipkan INLINE di home.blade.php (isi
   public/images/peta-gis-semarang.svg; file itu tetap ada sebagai
   arsip tersaji). SVG-nya mandiri (tanpa fetch eksternal, tanpa
   <script>); begitu satu dokumen dengan halaman, animasi SMIL
   (<animateMotion> — titik bergerak sepanjang jalur) + CSS
   (@keyframes dashMove/dashMoveRev/radarPulse — garis alir bergerak
   seperti panah berjalan) bisa dijeda dari halaman induk.
   preserveAspectRatio="xMidYMid slice" pada <svg> menggantikan
   object-fit: cover milik <img> dulu.
   Gradasi merah → peta: .hero-map-fade menutup sisi kiri peta dengan
   merah solid yang memudar jadi transparan — tidak ada garis potong
   keras. (Revisi gradien 2026-10-27 malam — lihat .hero-map-fade di
   bawah — karena gradien lama terlihat "kepentok": garis tegak kasar
   di tengah hero. Penyebabnya: zona fade lama TERLALU PENDEK
   (solid 0–26%, transparan di 62% — hanya ~36% lebar hero untuk
   peralihan) dengan hanya 3 titik henti, sementara kontras merah
   terang vs peta gelap #040d14 sangat tinggi — mata menangkap batas
   itu sebagai garis. Perbaikan: fade JAUH LEBIH PANJANG (solid hanya
   0–8%, transparan penuh di ~88%) dengan BANYAK titik henti
   berkurva ease, PLUS mask pada peta sendiri supaya peta memudar
   masuk dari kiri sementara merah memudar keluar — crossfade dua
   arah, bukan sekadar merah menimpa peta.)
   Crop: preserveAspectRatio="xMidYMid slice" — sumbu horizontal
   viewBox (900) tampil PENUH (lebar yang menentukan skala cover,
   jadi tidak ada crop horizontal); yang ter-crop hanya vertikal.
   viewBox y=0 TETAP (2026-10-27): pita tampil y 0..~400 memuat
   bagian utara kota + jaringan rute/node terpadat ("Semarang atas
   dikit"). Kesan "kiri kosong" diatasi mask + fade panjang, bukan
   dengan menggeser crop.
   Teks hero (di .hero-content) selalu di atas peta; putih di
   atas merah maupun di atas peta gelap sama-sama kontras tinggi.
   Peta dekoratif (aria-hidden di blade). Di layar kecil peta
   disembunyikan supaya teks tetap terbaca. prefers-reduced-motion:
   peta TIDAK PERNAH disembunyikan — gerakannya yang dijeda
   (CSS: animation-play-state: paused di bawah; SMIL: pauseAnimations()
   di public/js/hero-map-motion.js). Pelajaran bug 2026-10-27 malam:
   aturan lama `display: none` di blok ini membuat peta hilang TOTAL
   di browser yang melaporkan reduced-motion (mis. Windows Settings →
   Accessibility → Visual effects → "Animation effects" OFF — cukup
   umum), padahal preferensi gerak tidak boleh menghapus konten. */
.hero { position: relative; overflow: hidden; }
.hero-map {
    position: absolute; top: 0; right: 0; height: 100%; width: 62%;
    display: block;
    background: transparent;
    pointer-events: none; z-index: 0;
    /* Latar TRANSPARAN (bukan lagi #040d14): SVG hero hasil edit
       2026-10-27 tidak punya latar — luar batas kota transparan
       supaya gradasi merah hero terlihat di sana. Bila background
       ini tetap gelap, akan muncul KOTAK GELAP di belakang bentuk
       kota dan merusak blend ke gradasi merah. */
    /* Mask: peta memudar MASUK dari kiri (transparan di tepi kiri
       elemen → hitam penuh di 35% lebar elemen ≈ 38%→60% lebar hero),
       sementara .hero-map-fade memudar KELUAR ke kanan — crossfade
       dua arah, jauh lebih mulus daripada hanya menimpa merah di
       atas peta. -webkit- untuk Safari/Chrome lama; tanpa mask,
       tepi kiri peta (kotak 62%) akan jadi garis tegak. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 35%);
    mask-image: linear-gradient(to right, transparent 0%, black 35%);
}
/* Gambar peta kustom raster (PNG/JPG/WebP) — atau SVG kustom tanpa
   viewBox — tampil lewat <img class="hero-map">: object-fit cover
   supaya mengisi kotak banner seperti preserveAspectRatio slice
   pada SVG inline. */
img.hero-map { object-fit: cover; }
.hero-map-fade {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    /* Fade PANJANG + HALUS (revisi 2026-10-27 malam): merah solid
       hanya 0–8%, lalu memudar perlahan sampai transparan penuh di
       88% lebar hero — ~80% lebar hero untuk peralihan, bukan ~36%
       seperti dulu (solid 0–26%, transparan 62%). Banyak titik henti
       dengan kurva menyerupai ease (lambat di ujung, stabil di
       tengah) supaya tidak ada patahan yang terlihat mata.
       Fallback (browser tanpa color-mix): nilai rgba dari #b91c1c. */
    background: linear-gradient(90deg, #b91c1c 0%, #b91c1c 8%, rgba(185,28,28,.92) 18%, rgba(185,28,28,.80) 28%, rgba(185,28,28,.66) 38%, rgba(185,28,28,.52) 48%, rgba(185,28,28,.38) 58%, rgba(185,28,28,.25) 68%, rgba(185,28,28,.14) 78%, rgba(185,28,28,0) 88%);
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary) 8%, color-mix(in srgb, var(--primary) 92%, transparent) 18%, color-mix(in srgb, var(--primary) 80%, transparent) 28%, color-mix(in srgb, var(--primary) 66%, transparent) 38%, color-mix(in srgb, var(--primary) 52%, transparent) 48%, color-mix(in srgb, var(--primary) 38%, transparent) 58%, color-mix(in srgb, var(--primary) 25%, transparent) 68%, color-mix(in srgb, var(--primary) 14%, transparent) 78%, transparent 88%);
}
.hero-content { position: relative; z-index: 2; }
@media (max-width: 767px) {
    .hero-map, .hero-map-fade { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    /* JEDA gerakan, JANGAN sembunyikan peta: peta tetap tampil statis.
       Class animasi SVG didefinisikan di <style> internal SVG inline
       (home.blade.php); selektor di sini lebih spesifik (.hero-map ...)
       sehingga paused menang atas `animation: ... infinite` di sana.
       Animasi SMIL (<animateMotion>) tidak bisa dijeda lewat CSS —
       itu tugas public/js/hero-map-motion.js (pauseAnimations()). */
    .hero-map .flow-cyan, .hero-map .flow-fast, .hero-map .flow-orange,
    .hero-map .flow-green, .hero-map .pulse-ring, .hero-map .pulse-ring-delay {
        animation-play-state: paused;
    }
}

/* ---------- Popup "Sesuaikan" gambar peta (Admin → Teks Website) ----------
   Bingkai pratinjau di modal crop: aspek 5/2 (= R 2,5, sama dengan
   banner beranda). Gambar di dalamnya diposisikan absolut oleh
   public/js/hero-map-crop.js (width/height/left/top px) — jangan
   batasi max-width di sini. Panel modal memakai pola .delete-modal
   (backdrop + panel), tapi class sendiri supaya tidak tercampur. */
.hero-map-crop-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 5 / 2;
    background: #0f172a;
    border: 1px solid var(--line);
    border-radius: .5rem;
}
.hero-map-crop-frame img {
    position: absolute;
    max-width: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    cursor: grab;
}
.hero-map-crop-frame img:active { cursor: grabbing; }
.hero-map-crop-frame:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hero-map-crop-zoom { flex: 1; min-width: 8rem; accent-color: var(--primary); }

.nav-link { color: #374151; font-weight: 600; font-size: .9375rem; padding: .375rem .25rem; }
.nav-link:hover, .nav-link.active { color: var(--primary); }
.nav-link.active { border-bottom: 2px solid var(--primary); }

/* ---------- Accordion FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    text-align: left;
    padding: 1rem 1.25rem;
    font-weight: 700;
    color: var(--ink);
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 1rem;
}
.faq-q:hover { background: #f9fafb; }
.faq-q .chev { flex: none; transition: transform .2s; color: var(--primary); }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 1.25rem 1.125rem; color: #374151; font-size: .9375rem; line-height: 1.65; }
.faq-item.open .faq-a { display: block; }

/* ---------- Timeline status tiket ---------- */
.timeline { display: flex; }
.timeline-step { flex: 1; position: relative; text-align: center; padding-top: 2.25rem; }
.timeline-step::before {
    content: '';
    position: absolute; top: 1rem; left: calc(-50% + 1rem); right: calc(50% + 1rem);
    height: 3px; background: var(--line);
}
.timeline-step:first-child::before { display: none; }
.timeline-step.done::before { background: #16a34a; }
.timeline-dot {
    position: absolute; top: .375rem; left: 50%; transform: translateX(-50%);
    width: 1.625rem; height: 1.625rem; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 2px solid #d1d5db; color: #9ca3af;
    font-size: .75rem; font-weight: 800; z-index: 1;
}
.timeline-step.done .timeline-dot { background: #16a34a; border-color: #16a34a; color: #fff; }
.timeline-step.current .timeline-dot {
    background: var(--primary); border-color: var(--primary); color: #fff;
    box-shadow: 0 0 0 4px rgb(185 28 28 / .25);
}
.timeline-label { font-size: .8125rem; font-weight: 700; color: var(--muted); }
.timeline-step.done .timeline-label, .timeline-step.current .timeline-label { color: var(--ink); }
.timeline-date { font-size: .75rem; color: var(--muted); }

/* ---------- Balasan percakapan ---------- */
/* Balasan percakapan: petugas = merah solid, pelapor = merah muda,
   supaya keduanya tetap bisa dibedakan dalam keluarga merah. */
.reply-staff { border-left: 4px solid var(--primary); }
.reply-reporter { border-left: 4px solid #fca5a5; }

/* ---------- Tabel admin ---------- */
.table-admin { width: 100%; font-size: .875rem; border-collapse: collapse; }
.table-admin thead th {
    text-align: left; padding: .625rem .75rem; font-size: .75rem;
    text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
    background: #f9fafb; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table-admin tbody td { padding: .75rem; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.table-admin tbody tr:hover { background: #f9fafb; }

/* ---------- Sidebar admin (putih + aksen merah) ---------- */
.admin-link {
    display: flex; align-items: center; gap: .625rem;
    padding: .625rem .875rem; border-radius: .75rem;
    color: #374151; font-weight: 600; font-size: .9375rem;
}
.admin-link:hover { background: var(--primary-light); color: var(--primary-dark); }
.admin-link.active { background: var(--primary-light); color: var(--primary-dark); }
/* Nav admin seluler (#nav-admin) tampil di atas header merah #b91c1c:
   tautan harus putih — warna gelap .admin-link standar (untuk sidebar
   putih) tidak terbaca di atas merah. */
#nav-admin .admin-link { color: #fff; }
#nav-admin .admin-link:hover,
#nav-admin .admin-link.active { background: rgb(255 255 255 / .14); color: #fff; }

/* ---------- Lain-lain ---------- */
.stat-card { border-top: 4px solid var(--primary); }
.code-box {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #f9fafb; border: 1px solid var(--line);
    border-radius: .75rem; padding: .75rem 1rem;
    word-break: break-all; font-size: .9375rem;
}
.file-drop {
    border: 2px dashed #d1d5db; border-radius: .75rem;
    padding: 1rem; text-align: center; cursor: pointer; background: #f9fafb;
}
.file-drop:hover { border-color: var(--primary); background: var(--primary-50); }
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 50;
    background: var(--primary); color: #fff; font-weight: 700; padding: .5rem 1rem;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* ---------- Pemilih ikon kategori (admin/categories/form) ----------
   Grid radio visual: tiap opsi menampilkan SVG ikon yang sebenarnya.
   Warna aksen mengikuti tema Laporsemar (--primary merah). */
.icon-picker-preview {
    display: flex; align-items: center; gap: .875rem;
    border: 1px solid var(--border); border-radius: .75rem;
    background: var(--surface-2); padding: .75rem 1rem; margin: .5rem 0 .75rem;
}
.icon-picker-preview-glyph {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; flex: 0 0 auto;
    border-radius: .75rem; background: var(--primary); color: #fff;
}
.icon-picker-preview-text { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.icon-picker-preview-name { font-weight: 700; color: var(--ink); font-size: .9375rem; }
.icon-picker-preview-key { font-size: .8125rem; color: var(--muted); }
.icon-picker-preview-key code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2); }
.icon-picker {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .625rem;
}
@media (min-width: 640px) { .icon-picker { grid-template-columns: repeat(5, 1fr); } }
.icon-picker-option {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: .125rem; padding: .75rem .375rem .625rem;
    border: 1px solid var(--border); border-radius: .75rem;
    background: #fff; cursor: pointer; color: var(--ink-2);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.icon-picker-option:hover { border-color: var(--primary); background: var(--primary-50); }
.icon-picker-option:has(.icon-picker-radio:checked) {
    border-color: var(--primary); background: var(--primary-50);
    box-shadow: 0 0 0 2px rgb(185 28 28 / .25); color: var(--primary-dark);
}
.icon-picker-option:has(.icon-picker-radio:focus-visible) {
    outline: 2px solid var(--primary); outline-offset: 2px;
}
.icon-picker-radio { position: absolute; opacity: 0; pointer-events: none; }
.icon-picker-glyph { display: inline-flex; line-height: 0; margin-bottom: .25rem; }
.icon-picker-name { font-weight: 700; font-size: .8125rem; color: var(--ink); }
.icon-picker-desc { font-size: .75rem; color: var(--muted); line-height: 1.25; }
.icon-picker-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .6875rem; color: var(--muted); margin-top: .125rem;
}

/* =====================================================================
   MODE GELAP / TERANG (Tugas 8, 2026-10-27) — meniru perilaku toggle
   LaporSemar, bukan menyalin kodenya.
   ---------------------------------------------------------------------
   Cara kerja: theme-init.js (di <head>) memasang data-theme="light"
   atau "dark" pada <html> SEBELUM render; theme.js (di akhir body)
   mengubahnya saat tombol sakelar diklik dan menyimpannya di
   localStorage 'theme'. Semua aturan di bawah ini HANYA menambah
   override di bawah [data-theme="dark"] — tidak ada aturan terang
   yang diubah atau dihapus.
   ---------------------------------------------------------------------
   Palet gelap (slate):
     latar halaman  #0f172a   permukaan kartu  #1e293b
     teks utama     #f1f5f9   teks sekunder    #cbd5e1
     teks redup     #94a3b8   garis            #334155
   Merah Laporsemar #b91c1c / #991b1b DIPERTAHANKAN untuk latar tombol,
   hero, dan footer (teks putih di atasnya tetap kontras 5,9:1 dan
   7,5:1). Untuk TEKS merah di atas latar gelap, merah harus
   diterangkan (#f87171 / #fca5a5) karena #b91c1c di atas #0f172a
   hanya 2,8:1 (gagal WCAG AA).
   Semua pasangan warna di bawah ini sudah dihitung rasio kontrasnya
   (WCAG 2.1, teks normal ≥ 4,5:1) — lihat laporan Tugas 8.
   Catatan: karena Blade memakai utilitas Tailwind (bg-white,
   text-slate-*, text-[#...]) yang tidak memakai variabel, override
   Tailwind di bawah ini memakai selektor [data-theme="dark"] +
   nama kelas — spesifikasinya (0,2,0) mengalahkan utilitas Tailwind
   (0,1,0) apa pun urutan muat stylesheet-nya.
   ===================================================================== */

/* ---------- Variabel tema gelap ---------- */
html[data-theme="dark"] {
    color-scheme: dark;
    /* Merah tombol/hero/footer TETAP #b91c1c/#991b1b (putih di atasnya
       kontras); yang berubah hanya latar aksen merah muda. */
    --primary-light: #450a0a;   /* latar aksen merah → merah sangat gelap */
    --primary-50: #1e293b;      /* latar lembut hover → permukaan gelap */
    --surface: #1e293b;
    --surface-2: #0f172a;
    --border: #334155;
    --ink: #f1f5f9;
    --ink-2: #cbd5e1;
    --muted: #94a3b8;
    --accent-blue-light: #450a0a;
    --line: #334155;
    --bg: #0f172a;
}

/* ---------- Tombol sakelar tema ---------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .875rem;
    line-height: 1;
    padding: .55rem .8rem;
    border-radius: .75rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.theme-toggle:hover { background: var(--surface-2); border-color: var(--muted); }
.theme-toggle svg { flex: none; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* Varian di atas latar merah (topbar seluler admin + nav admin seluler):
   teks/border putih, apa pun temanya. */
.theme-toggle--on-red {
    background: transparent;
    border-color: rgb(255 255 255 / .3);
    color: #fff;
}
.theme-toggle--on-red:hover { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .5); }

/* ---------- Komponen kustom (app.css) di mode gelap ---------- */
html[data-theme="dark"] .card { box-shadow: 0 1px 3px rgb(0 0 0 / .4); }
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea {
    background: #0f172a;
    border-color: #475569;
    color: var(--ink);
}
html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] .textarea::placeholder { color: #8aa0b8; }
html[data-theme="dark"] .input:focus,
html[data-theme="dark"] .select:focus,
html[data-theme="dark"] .textarea:focus {
    box-shadow: 0 0 0 3px rgb(248 113 113 / .35);
}
html[data-theme="dark"] .label .req { color: #f87171; }
html[data-theme="dark"] .field-error { color: #f87171; }
/* .btn-accent: latar merah gelap + teks merah muda terang (8,5:1).
   Hover terang di mode terang (#fecaca) WAJIB ditimpa — latar itu
   dengan teks #fecaca akan tak terbaca. */
html[data-theme="dark"] .btn-accent { color: #fecaca; }
html[data-theme="dark"] .btn-accent:hover { background: #7f1d1d; }
html[data-theme="dark"] .btn-outline {
    background: #1e293b;
    color: var(--ink);
    border-color: #475569;
}
html[data-theme="dark"] .btn-outline:hover { background: #334155; border-color: #64748b; }
/* Tombol aksi baris admin (Tugas 3) — mode gelap.
   DEVIASI dari usulan awal: #3b82f6 + teks putih hanya 3,68:1 dan
   #ef4444 + teks putih hanya 3,76:1 — di bawah ambang 4,5:1 — jadi dipakai
   varian yang lebih gelap tapi tetap jelas biru/merah: #1d4ed8 6,70:1,
   #1e40af 8,72:1, #dc2626 4,83:1, #b91c1c 6,47:1. */
html[data-theme="dark"] .btn-edit { background: #1d4ed8; }
html[data-theme="dark"] .btn-edit:hover { background: #1e40af; }
html[data-theme="dark"] .btn-delete { background: #dc2626; }
html[data-theme="dark"] .btn-delete:hover { background: #b91c1c; }
/* Nav publik: teks gelap #374151 → terang; merah hover #b91c1c → #f87171. */
html[data-theme="dark"] .nav-link { color: #cbd5e1; }
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active { color: #f87171; }
html[data-theme="dark"] .nav-link.active { border-bottom-color: #f87171; }
/* FAQ: jawaban #374151 → terang; hover baris → permukaan gelap. */
html[data-theme="dark"] .faq-q:hover { background: #1e293b; }
html[data-theme="dark"] .faq-q .chev { color: #f87171; }
html[data-theme="dark"] .faq-a { color: #cbd5e1; }
/* Timeline: dot putih → permukaan gelap. */
html[data-theme="dark"] .timeline-dot { background: #1e293b; border-color: #475569; color: #94a3b8; }
/* Tabel admin: kepala + hover baris → permukaan gelap. */
html[data-theme="dark"] .table-admin thead th { background: #1e293b; }
html[data-theme="dark"] .table-admin tbody td { border-bottom-color: #1e293b; }
html[data-theme="dark"] .table-admin tbody tr:hover { background: #1e293b; }
/* Sidebar admin: teks #374151 → terang; hover/aktif merah muda → merah gelap. */
html[data-theme="dark"] .admin-link { color: #e2e8f0; }
html[data-theme="dark"] .admin-link:hover,
html[data-theme="dark"] .admin-link.active { color: #fca5a5; }
/* Nav admin seluler tetap putih di atas header merah — jangan timpa. */
/* Badge: semua varian terang diganti pasangan gelap yang kontras. */
html[data-theme="dark"] .badge-open { background: #450a0a; color: #fca5a5; }
html[data-theme="dark"] .badge-progress { background: #713f12; color: #fde047; }
html[data-theme="dark"] .badge-medium { background: #78350f; color: #fde68a; }
html[data-theme="dark"] .badge-resolved { background: #14532d; color: #bbf7d0; }
/* .badge-closed gelap tetap #2563eb + putih (5,2:1). #3b82f6 + putih hanya
   3,5:1 — gagal 4,5:1 untuk teks kecil, jadi tidak dipakai. */
html[data-theme="dark"] .badge-closed { background: #2563eb; color: #fff; }
html[data-theme="dark"] .badge-low { background: #334155; color: #e2e8f0; }
html[data-theme="dark"] .badge-high,
html[data-theme="dark"] .badge-info { background: #450a0a; color: #fca5a5; }

/* ---------- Kartu statistik dashboard: warna = warna status ----------
   Terbuka merah, Diproses kuning, Selesai hijau, Ditutup biru.
   "Total tiket" & "Total Ditangani" netral (ringkasan, bukan status). */
.stat-card { border-top: 4px solid transparent; }
.stat-total   { border-top-color: #94a3b8; }
.stat-total .stat-num { color: #111827; }
.stat-open    { border-top-color: #dc2626; }
.stat-open .stat-num { color: #b91c1c; }
.stat-progress { border-top-color: #eab308; }
.stat-progress .stat-num { color: #a16207; }
.stat-resolved { border-top-color: #16a34a; }
.stat-resolved .stat-num { color: #15803d; }
.stat-closed  { border-top-color: #3b82f6; }
.stat-closed .stat-num { color: #2563eb; }
/* "Total Ditangani": HIJAU PENUH (solid) — seluruh kartu hijau, teks putih.
   Beda dari "Selesai" yang hanya aksen hijau (garis atas + angka hijau).
   Putih di atas #15803d = 4,6:1; #dcfce7/#bbf7d0 di atasnya >7:1. */
.stat-handled { background: #15803d; border-top-color: #15803d; }
.stat-handled .stat-num { color: #fff; }
.stat-handled .stat-label { color: #dcfce7; }
.stat-handled .stat-sub { color: #bbf7d0; }
html[data-theme="dark"] .stat-total { border-top-color: #94a3b8; }
html[data-theme="dark"] .stat-total .stat-num { color: #f1f5f9; }
html[data-theme="dark"] .stat-handled { background: #166534; border-top-color: #166534; }
html[data-theme="dark"] .stat-handled .stat-num { color: #fff; }
html[data-theme="dark"] .stat-handled .stat-label { color: #dcfce7; }
html[data-theme="dark"] .stat-handled .stat-sub { color: #bbf7d0; }
html[data-theme="dark"] .stat-open { border-top-color: #f87171; }
html[data-theme="dark"] .stat-open .stat-num { color: #fca5a5; }
html[data-theme="dark"] .stat-progress { border-top-color: #facc15; }
html[data-theme="dark"] .stat-progress .stat-num { color: #fde047; }
html[data-theme="dark"] .stat-resolved { border-top-color: #4ade80; }
html[data-theme="dark"] .stat-resolved .stat-num { color: #86efac; }
html[data-theme="dark"] .stat-closed { border-top-color: #60a5fa; }
html[data-theme="dark"] .stat-closed .stat-num { color: #93c5fd; }

/* ---------- Glow tipis: pilih kategori & tombol Lacak Tiket ----------
   Tipis & halus, bukan neon tebal. Daftar opsi bawaan browser tidak bisa
   di-style, jadi glow diterapkan pada kotak select-nya. */
.select-glow { border-color: #fca5a5; box-shadow: 0 0 0 1px #fee2e2, 0 0 10px rgb(220 38 38 / .14); }
.select-glow:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgb(185 28 28 / .18), 0 0 14px rgb(220 38 38 / .22); }
html[data-theme="dark"] .select-glow { background: #0f172a; border-color: #7f1d1d; box-shadow: 0 0 0 1px #450a0a, 0 0 10px rgb(248 113 113 / .25); }
html[data-theme="dark"] .select-glow:focus { box-shadow: 0 0 0 3px rgb(248 113 113 / .35), 0 0 14px rgb(248 113 113 / .3); }
/* Tombol "Lacak Tiket" di atas hero merah: outline putih tipis + glow putih
   lembut. Hero tetap merah di mode gelap, jadi glow yang sama berlaku. */
.btn-track-glow { box-shadow: 0 0 0 1px rgb(255 255 255 / .55), 0 0 14px rgb(255 255 255 / .28); }
.btn-track-glow:hover { box-shadow: 0 0 0 1px rgb(255 255 255 / .8), 0 0 18px rgb(255 255 255 / .4); }
/* Alert: latar terang → tinta gelap senada, teks terang. */
html[data-theme="dark"] .alert-success { background: #052e16; border-color: #14532d; color: #bbf7d0; }
html[data-theme="dark"] .alert-error { background: #450a0a; border-color: #7f1d1d; color: #fecaca; }
html[data-theme="dark"] .alert-warning { background: #451a03; border-color: #78350f; color: #fde68a; }
html[data-theme="dark"] .alert-info { background: #450a0a; border-color: #7f1d1d; color: #fecaca; }
/* Kotak kode, drop file, pemilih ikon. */
html[data-theme="dark"] .code-box { background: #0f172a; }
html[data-theme="dark"] .file-drop { background: #0f172a; border-color: #475569; }
html[data-theme="dark"] .icon-picker-option { background: #1e293b; }
html[data-theme="dark"] .icon-picker-option:has(.icon-picker-radio:checked) {
    background: #450a0a;
    color: #fca5a5;
}

/* ---------- Override utilitas Tailwind di mode gelap ----------
   Daftar lengkap kelas warna yang dipakai Blade (dipindai dari
   resources/views, tidak termasuk welcome.blade.php stok Laravel).
   Kelas yang SUDAH terang di mode terang (text-white, text-slate-200/
   slate-300 di hero merah, bg-[#b91c1c], border-white, aksen
   border-t-amber/green) sengaja TIDAK ditimpa. */
html[data-theme="dark"] .bg-white { background-color: #1e293b; }
/* Titik putih dekoratif di hero merah harus tetap putih. */
html[data-theme="dark"] .hero .bg-white { background-color: #fff; }
html[data-theme="dark"] .bg-slate-50 { background-color: #0f172a; }
html[data-theme="dark"] .bg-slate-100 { background-color: #1e293b; }
html[data-theme="dark"] .bg-green-100 { background-color: #14532d; }
html[data-theme="dark"] .text-slate-400 { color: #94a3b8; }
html[data-theme="dark"] .text-slate-500 { color: #94a3b8; }
html[data-theme="dark"] .text-slate-600 { color: #cbd5e1; }
html[data-theme="dark"] .text-slate-700 { color: #e2e8f0; }
html[data-theme="dark"] .text-red-600 { color: #f87171; }
html[data-theme="dark"] .text-red-700 { color: #fca5a5; }
html[data-theme="dark"] .text-amber-700 { color: #fcd34d; }
html[data-theme="dark"] .text-green-700 { color: #86efac; }
html[data-theme="dark"] .text-emerald-700 { color: #6ee7b7; }
html[data-theme="dark"] .border-slate-200 { border-color: #334155; }
html[data-theme="dark"] .border-slate-300 { border-color: #475569; }
html[data-theme="dark"] .border-red-200 { border-color: #7f1d1d; }
html[data-theme="dark"] .border-t-slate-400 { border-top-color: #64748b; }
html[data-theme="dark"] .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: #334155; }
html[data-theme="dark"] hr { border-color: #334155; }
/* Nilai arbitrer Tailwind (text-[#...] / bg-[#...]). */
html[data-theme="dark"] .text-\[\#111827\] { color: #f1f5f9; }
html[data-theme="dark"] .text-\[\#b91c1c\] { color: #f87171; }
html[data-theme="dark"] .text-\[\#991b1b\] { color: #fca5a5; }
html[data-theme="dark"] .bg-\[\#fee2e2\] { background-color: #450a0a; }
html[data-theme="dark"] .bg-\[\#fff5f5\] { background-color: #450a0a; }
/* bg-[#b91c1c], bg-[#991b1b], border-[#b91c1c], text-[#fecaca],
   text-[#fca5a5], border-t-[#b91c1c] sudah tepat di mode gelap. */

/* ---------- Komponen agen lain (generik, antisipasi) ----------
   Modal konfirmasi hapus (Tugas modal) dan editor halaman (Tugas
   editor, Quill di .rich-editor) belum ada saat blok ini ditulis;
   aturan generik di bawah menutupinya apa pun markup finalnya.
   Editor Quill: di mode terang ia sengaja dibiarkan putih + teks
   gelap (inline <style> di admin/pages/form.blade.php); di mode
   gelap toolbar + area tulis ikut gelap supaya tidak menyilaukan. */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .delete-modal__panel,
html[data-theme="dark"] .hero-map-crop-modal__panel,
html[data-theme="dark"] .modal-panel {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}
html[data-theme="dark"] .modal-backdrop,
html[data-theme="dark"] .modal-overlay,
html[data-theme="dark"] .hero-map-crop-modal__backdrop,
html[data-theme="dark"] .delete-modal__backdrop { background: rgb(2 6 23 / .8); }
html[data-theme="dark"] .rich-editor .ql-toolbar.ql-snow,
html[data-theme="dark"] .rich-editor .ql-container.ql-snow {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}
html[data-theme="dark"] .rich-editor .ql-editor { color: #f1f5f9; }
html[data-theme="dark"] .rich-editor .ql-editor a { color: #f87171; }
html[data-theme="dark"] .rich-editor .ql-snow .ql-stroke { stroke: #cbd5e1; }
html[data-theme="dark"] .rich-editor .ql-snow .ql-fill { fill: #cbd5e1; }
html[data-theme="dark"] .rich-editor .ql-snow .ql-picker-label { color: #cbd5e1; }
html[data-theme="dark"] .rich-editor .ql-snow .ql-picker-options {
    background: #1e293b;
    border-color: #334155;
}
html[data-theme="dark"] .rich-editor .ql-snow .ql-picker-item { color: #cbd5e1; }
/* Trix (bila dipakai di tempat lain): area tulis + toolbar gelap. */
html[data-theme="dark"] trix-editor,
html[data-theme="dark"] .trix-editor {
    background: #0f172a;
    color: #f1f5f9;
    border-color: #475569;
}
html[data-theme="dark"] trix-toolbar .trix-button { color: #cbd5e1; }