/* =====================================================================
   Website Bank Sampah — Stylesheet Utama
   Mengikuti design.md: sederhana, mudah dibaca, font besar, warna hijau
   sebagai identitas utama, cocok untuk pengguna 35 tahun ke atas.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --primary: #2E7D32;
    --secondary: #66BB6A;
    --bg: #F7F9F7;
    --surface: #FFFFFF;

    --text-primary: #1F2937;
    --text-secondary: #4B5563;
    --text-muted: #6B7280;

    --success: #2E7D32;
    --warning: #F59E0B;
    --danger: #D32F2F;
    --info: #1976D2;

    --rw-badge-bg: #E8F5E9;
    --rw-badge-text: #2E7D32;

    --border: #E5E7EB;
    --radius: 10px;
    --radius-sm: 6px;

    --table-row-height: 56px;
    --input-min-height: 48px;
    --button-min-height: 48px;

    --sidebar-width: 260px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.5;
}

h1, h2, h3, h4 { margin: 0 0 8px 0; font-weight: 700; color: var(--text-primary); }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
p { margin: 0 0 12px 0; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }

.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }

/* ---------------------------------------------------------------------
   APP SHELL (CMP-001)
   --------------------------------------------------------------------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

/* Sidebar terang. Warna diambil dari token dashboard agar senada dengan
   area kerja; pemisahnya cukup garis kanan, bukan perbedaan warna blok. */
.sidebar {
    --sb-teks: var(--text-secondary);
    --sb-teks-terang: var(--text-primary);
    --sb-samar: var(--text-muted);
    --sb-aksen: var(--primary);
    --sb-garis: var(--border);

    width: var(--sidebar-width);
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 22px 14px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 18px;
    border-bottom: 1px solid var(--sb-garis);
    margin-bottom: 14px;
}

/* Sidebar sudah terang, jadi logo tidak lagi butuh alas putih tersendiri. */
.sidebar-brand .logo-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sidebar-brand .brand-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.sidebar-brand .brand-text {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    color: var(--sb-teks-terang);
    letter-spacing: -.01em;
}
.sidebar-brand .brand-sub {
    font-size: 12px;
    color: var(--sb-samar);
    letter-spacing: .03em;
}

/* Hak cipta didorong ke dasar sidebar oleh margin-top:auto pada wadah
   flex, bukan lagi menempel tepat di bawah brand. */
.sidebar-copyright {
    margin-top: auto;
    padding: 14px 10px 0;
    border-top: 1px solid var(--sb-garis);
    font-size: 11px;
    color: var(--sb-samar);
    line-height: 1.4;
}

.sidebar nav { display: flex; flex-direction: column; }

.nav-section { margin: 16px 0 0; }
.nav-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--sb-samar);
    padding: 0 10px 8px;
    font-weight: 700;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    margin-bottom: 2px;
    border-radius: 10px;
    color: var(--sb-teks);
    font-size: 15px;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.nav-link:hover {
    background: var(--bg);
    color: var(--sb-teks-terang);
    text-decoration: none;
}

/* Menu aktif: latar hijau muda + garis tegas di kiri. Ikonnya ikut
   berwarna sehingga posisi saat ini terbaca sekilas. */
.nav-link.active {
    background: var(--rw-badge-bg);
    color: var(--sb-aksen);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--sb-aksen);
}

.nav-ikon {
    flex-shrink: 0;
    opacity: .75;
}
.nav-link.active .nav-ikon { opacity: 1; }
.nav-teks { min-width: 0; }

.nav-logout-form { margin-top: 18px; }
.nav-link-logout {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.nav-link-logout:hover {
    background: #FDECEA;
    border-color: var(--danger);
    color: var(--danger);
}

.main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar-user { display: flex; align-items: center; gap: 12px; }
.topbar-user-link {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: inherit;
    padding: 4px 8px; margin: -4px -8px;
    border-radius: var(--radius-sm);
}
.topbar-user-link:hover { background: var(--bg); text-decoration: none; }
.user-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--secondary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}
.user-avatar-photo { object-fit: cover; }

.profile-photo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.profile-photo-preview {
    width: 88px; height: 88px; border-radius: 50%;
    background: var(--secondary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 32px;
    object-fit: cover;
    flex-shrink: 0;
}
.profile-photo-actions { display: flex; flex-direction: column; gap: 8px; }
.profile-photo-actions .form-help { margin: 0; }
.profile-photo-remove { display: flex; align-items: center; gap: 6px; }
.profile-photo-remove label { margin: 0; font-size: 13px; font-weight: 400; color: var(--text-muted); cursor: pointer; }
.profile-photo-remove input[type=checkbox] { width: auto; min-height: 0; margin: 0; cursor: pointer; }
.user-meta { line-height: 1.25; }
.user-meta .name { font-weight: 600; font-size: 15px; }
.user-meta .role { font-size: 13px; color: var(--text-muted); }

.page-content { padding: 28px; max-width: 1280px; width: 100%; margin: 0 auto; }

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.page-header .subtitle { color: var(--text-secondary); font-size: 16px; margin-top: 4px; }

/* ---------------------------------------------------------------------
   RW BADGE
   --------------------------------------------------------------------- */
.badge-rw {
    display: inline-flex;
    align-items: center;
    background: var(--rw-badge-bg);
    color: var(--rw-badge-text);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    /* Tanpa ini "RW 03" patah di spasi saat kolom RW sempit, sehingga
       angkanya jatuh ke baris bawah dan badge tampak seperti lingkaran. */
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   CARDS
   --------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}
.card + .card { margin-top: 16px; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}
.stat-card .stat-label { font-size: 15px; color: var(--text-secondary); margin-bottom: 6px; font-weight: 500; }
.stat-card .stat-value { font-size: 28px; font-weight: 700; color: var(--text-primary); }
.stat-card.accent .stat-value { color: var(--primary); }

/* ---------------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--button-min-height);
    padding: 0 20px;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    background: var(--surface);
    color: var(--text-primary);
}
.btn:hover { text-decoration: none; filter: brightness(0.97); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #276a2a; }
.btn-secondary { background: var(--surface); color: var(--text-primary); border-color: var(--border); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger-outline { background: #fff; color: var(--danger); border-color: var(--danger); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 15px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------------
   FORMS
   --------------------------------------------------------------------- */
.form-group { margin-bottom: 18px; }
label, .form-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-primary);
}
.form-help { font-size: 14px; color: var(--text-muted); margin-top: 4px; }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=search], input[type=tel], input[type=email], textarea, select {
    width: 100%;
    min-height: var(--input-min-height);
    padding: 10px 14px;
    font-size: 17px;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-primary);
}
textarea { min-height: 90px; padding-top: 12px; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(46,125,50,.15);
}
input[readonly], input:disabled { background: #F3F4F6; color: var(--text-muted); }

/* ---------------------------------------------------------------------
   KETIK-CARI NASABAH (autocomplete)
   Menggantikan <select> berisi ribuan nasabah pada form Setor & filter.
   --------------------------------------------------------------------- */
.ac-nasabah { position: relative; }
.ac-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
}
.ac-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}
.ac-item:hover, .ac-item.active { background: var(--rw-badge-bg); }
.ac-item-nama { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.ac-item-meta { font-size: 13px; color: var(--text-muted); }
.ac-empty { padding: 12px; font-size: 15px; color: var(--text-muted); text-align: center; }

/* ---------------------------------------------------------------------
   FIELD UNGGAH GAMBAR (dashboard) — dipakai form Berita, Cara Kerja,
   dan latar hero pada Pengaturan.
   --------------------------------------------------------------------- */
.image-field { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.image-field-preview {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: #F3F4F6;
    flex-shrink: 0;
}
.image-field-preview-wide { width: 200px; height: 120px; }
.image-field-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    padding: 8px;
}
.image-field-actions { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.image-field-actions .form-help { margin: 0; }
.image-field-remove { display: flex; align-items: center; gap: 6px; }
.image-field-remove label { margin: 0; font-size: 13px; font-weight: 400; color: var(--text-muted); cursor: pointer; }
.image-field-remove input[type=checkbox] { width: auto; min-height: 0; margin: 0; cursor: pointer; }

/* Thumbnail kecil di dalam tabel daftar */
.table-thumb {
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: #F3F4F6;
    display: block;
}
.table-thumb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-muted);
}

.password-toggle-check {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.password-toggle-check input[type=checkbox] {
    width: auto;
    min-height: 0;
    margin: 0;
    cursor: pointer;
}
.password-toggle-check label {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    cursor: pointer;
}

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.form-actions { display: flex; gap: 12px; margin-top: 20px; }

.readonly-value {
    display: block;
    min-height: var(--input-min-height);
    padding: 10px 14px;
    background: #F3F4F6;
    border-radius: var(--radius-sm);
    font-size: 17px;
    display: flex;
    align-items: center;
}

/* ---------------------------------------------------------------------
   TABLES
   --------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
thead th {
    text-align: left;
    padding: 14px 16px;
    background: #FAFBFA;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    min-height: var(--table-row-height);
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #FAFBFA; }
td.num, th.num { text-align: right; }
.table-actions { display: flex; gap: 8px; justify-content: flex-start; }

/* Keterangan kecil di samping judul kolom, mis. persentase admin pada
   kolom "Admin" — informasi pendukung, bukan bagian dari nama kolom. */
.th-note {
    margin-left: 4px;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------------
   BADGES / STATUS
   --------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}
.badge-success { background: #E8F5E9; color: var(--success); }
.badge-muted { background: #F3F4F6; color: var(--text-muted); }
.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-danger { background: #FEE2E2; color: var(--danger); }
.badge-info { background: #E3F2FD; color: var(--info); }

/* ---------------------------------------------------------------------
   ALERTS
   --------------------------------------------------------------------- */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    font-size: 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.alert-success { background: #E8F5E9; color: #1B5E20; border: 1px solid #C8E6C9; }
.alert-error { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.alert-warning { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.alert-info { background: #E3F2FD; color: #0D47A1; border: 1px solid #BBDEFB; }

/* ---------------------------------------------------------------------
   AUTH / LOGIN PAGE
   --------------------------------------------------------------------- */
/* Tata letak terbelah: ilustrasi di kiri, formulir di kanan.
   Ilustrasinya padat detail dan memuat banyak tulisan ("BANK SAMPAH",
   "YUK PILAH SAMPAH", papan alur). Bila dipasang sebagai latar penuh di
   belakang kartu login, keduanya saling mengganggu — gambarnya tertutup
   sebagian dan tulisan formulir beradu dengan tulisan di gambar. Dengan
   dibelah, ilustrasinya tetap terbaca utuh dan formulirnya tetap bersih. */
.auth-split {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
}

/* ----- Sisi ilustrasi ----- */
.auth-visual {
    position: relative;
    background: #1F5133 center/cover no-repeat;
    display: flex;
    align-items: flex-end;
    padding: 48px;
    overflow: hidden;
}
/* Gradien hanya di bagian bawah: bagian atas gambar (papan nama Bank
   Sampah dan orang-orangnya) sengaja dibiarkan terang tanpa tertutup. */
.auth-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,26,17,0) 38%, rgba(10,26,17,.55) 72%, rgba(10,26,17,.9) 100%);
}
.auth-visual-teks {
    position: relative;
    z-index: 1;
    color: #fff;
    max-width: 30ch;
}
.auth-visual-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #C8F250;
    margin-bottom: 14px;
}
.auth-visual-eyebrow::before { content: "//"; }
.auth-visual-judul {
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.12;
    margin: 0 0 12px;
    color: #fff;
}
.auth-visual-sub {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,.82);
    margin: 0;
}

/* ----- Sisi formulir ----- */
.auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 40px 32px;
    background: #F6F4EC;
}
.auth-card {
    background: var(--surface);
    border: 1px solid #E4DECE;
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(12,29,20,.08);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    text-align: center;
}
.auth-logo-group {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; margin: 0 auto 16px auto;
}
.auth-logo {
    width: 64px; height: 64px; object-fit: contain;
}
.auth-card h1 { font-size: 24px; letter-spacing: -.02em; }
.auth-card .form-group { text-align: left; }
.auth-copyright {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

/* Tautan kembali ke halaman depan — tanpa ini, satu-satunya jalan keluar
   dari halaman login adalah tombol back peramban. */
.auth-kembali {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}
.auth-kembali:hover { text-decoration: underline; }

@media (max-width: 900px) {
    /* Ilustrasi menjadi panel atas yang lebih pendek; formulir tetap
       mendapat ruang penuh di bawahnya. */
    .auth-split { grid-template-columns: 1fr; }
    .auth-visual {
        /* Cukup tinggi agar blok teks muat di dalam area gelap. Bila terlalu
           pendek, teks yang rata-bawah justru meluber ke atas dan beradu
           dengan bagian terang gambar sehingga tidak terbaca. */
        min-height: 300px;
        padding: 28px 24px;
        background-position: center 28%;
    }
    /* Sedikit gelap merata dari atas, bukan hanya di bawah: di panel yang
       pendek, teksnya bisa berada di mana saja pada gambar. */
    .auth-visual::after {
        background: linear-gradient(180deg, rgba(10,26,17,.3) 0%, rgba(10,26,17,.55) 45%, rgba(10,26,17,.92) 100%);
    }
    .auth-visual-judul { font-size: 24px; }
    .auth-visual-sub { font-size: 15px; }
    .auth-panel { padding: 32px 20px 40px; }
}

/* Di layar HP ilustrasi dilepas sama sekali — hanya formulirnya yang
   tampil. Pada layar sepanjang itu, banner gambar hanya mendorong
   formulir ke bawah lipatan sehingga pengguna harus menggulir dulu
   sebelum bisa mengisi. */
@media (max-width: 640px) {
    .auth-visual { display: none; }
    .auth-split { min-height: 100vh; min-height: 100svh; }
    .auth-panel { justify-content: center; padding: 28px 18px; }
    .auth-card { padding: 28px 22px; }
    .auth-logo { width: 54px; height: 54px; }
}

/* ---------------------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}
.empty-state .icon { font-size: 40px; margin-bottom: 12px; }

/* ---------------------------------------------------------------------
   FILTER BAR
   --------------------------------------------------------------------- */
.filter-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 20px;
}
.filter-bar form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.filter-bar .form-group { margin-bottom: 0; min-width: 160px; }

/* ---------------------------------------------------------------------
   PAGINATION
   --------------------------------------------------------------------- */
.pagination { display: flex; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); font-size: 15px; color: var(--text-secondary);
}
.pagination a:hover { background: var(--bg); text-decoration: none; }
.pagination .active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------------------------------------------------------------------
   TRANSAKSI / SETOR SPECIFIC
   --------------------------------------------------------------------- */
.setor-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    padding: 14px 0;
    border-bottom: 1px dashed var(--border);
}
.setor-row:last-child { border-bottom: none; }

.summary-box {
    background: #F9FBF9;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}
.summary-line {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 17px;
}
.summary-line:last-child { border-bottom: none; }
.summary-line .label { color: var(--text-secondary); }
.summary-line .value { font-weight: 600; }
.summary-line.total .value { font-size: 26px; color: var(--money-positive, var(--primary)); font-weight: 700; }
.summary-line.total .label { font-weight: 600; color: var(--text-primary); }

.money-positive { color: var(--primary); }
.money-warning { color: var(--warning); }
.money-danger { color: var(--danger); }

.success-panel { text-align: center; padding: 20px 0; }
.success-panel .check-icon {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 20px; border-radius: 999px;
    background: #E8F5E9; color: var(--primary);
    font-size: 15px; font-weight: 600; margin: 0 auto 16px auto;
}

/* ---------------------------------------------------------------------
   REPORT / LAPORAN
   --------------------------------------------------------------------- */
.report-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    text-align: left;
}
.report-card h3 { margin-bottom: 6px; }
.report-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

/* ---------------------------------------------------------------------
   MODAL SEDERHANA (untuk kategori/satuan inline form)
   --------------------------------------------------------------------- */
.inline-form-card { background: #FAFBFA; border: 1px dashed var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 20px; }

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
.hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-primary);
    flex-shrink: 0;
}
.hamburger-btn:hover { background: var(--bg); }

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        z-index: 100;
        transition: left .2s ease;
        box-shadow: 0 0 30px rgba(0,0,0,.15);
    }
    .sidebar.open { left: 0; }
    .hamburger-btn { display: inline-flex; }
    .page-content { padding: 18px; }
    .topbar { padding: 12px 16px; }
    .setor-row { grid-template-columns: 1fr; }
    .sidebar-overlay {
        display: none;
        position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 99;
    }
    .sidebar-overlay.open { display: block; }
}

/* ---------------------------------------------------------------------
   HALAMAN HASIL KONFIRMASI EMAIL
   Berdiri sendiri (tanpa sidebar/topbar) karena dibuka oleh orang yang
   justru belum bisa login.
   --------------------------------------------------------------------- */
.verifikasi-halaman {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg);
}
.verifikasi-kartu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px 32px;
    max-width: 460px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}
.verifikasi-kartu h1 { font-size: 22px; margin: 0 0 8px; }
.verifikasi-kartu .btn { margin-top: 24px; }
.verifikasi-nama { font-weight: 600; margin: 0 0 8px; }
.verifikasi-ikon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.verifikasi-ikon-sukses { background: #E8F2EA; color: var(--primary); }
.verifikasi-ikon-gagal { background: #FDECEC; color: #C0392B; }

/* Hanya muncul di atas kertas — kebalikan dari .no-print. */
.print-only { display: none; }

/* Identitas Bank Sampah di kaki struk, menggantikan baris URL bawaan
   browser yang tidak ada gunanya bagi nasabah. */
.struk-footer {
    margin-top: 28px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

/* margin: 0 pada @page membuat browser TIDAK mencetak header/footer
   bawaannya (URL, tanggal, judul tab, nomor halaman) — tidak ada lagi
   ruang untuk menaruhnya. Sebagai gantinya jarak ke tepi kertas diatur
   sendiri lewat padding .page-content di bawah. */
@page { margin: 0; }

@media print {
    .no-print { display: none !important; }
    .print-only { display: block !important; }

    /* Kerangka aplikasi tidak ikut tercetak. Struk yang dipegang nasabah
       harus berisi struk saja — bukan menu navigasi, penanda "Semua RW",
       maupun blok profil di pojok kanan atas. */
    .sidebar,
    .sidebar-overlay,
    .topbar { display: none !important; }

    body { background: #fff; }
    .app-shell { display: block; }
    .main-content { display: block; }
    .page-content { padding: 14mm 12mm; max-width: 100%; }
}


/* ---------------------------------------------------------------------
   LANDING PAGE PUBLIK ('/')
   Desain 2026 — mengambil arah dari tiga referensi:
     - hero foto penuh + strip statistik menempel di bawahnya (REWASTE)
     - label eyebrow "// ... //" dan deretan angka berpembatas (RoofClaim)
     - kartu berfoto dengan badge kategori (WANDER)

   Token warna sengaja DILOKALKAN di .landing-body (prefix --l-) agar tidak
   mengubah tampilan dashboard admin yang memakai token global di atas.
   Latar memakai krem hangat, bukan abu-abu netral, supaya halaman tidak
   terasa seperti template generik.
   --------------------------------------------------------------------- */
.landing-body {
    --l-ink: #0C1D14;
    --l-forest: #123B26;
    --l-green: #1F7A46;
    --l-green-soft: #E8F2EA;
    --l-lime: #C8F250;
    --l-cream: #F6F4EC;
    --l-sand: #E4DECE;
    --l-muted: #5A6A60;
    --l-radius: 18px;

    background: var(--l-cream);
    color: var(--l-ink);
    -webkit-font-smoothing: antialiased;
}

/* Tinggi header — ditimpa landing.js dengan hasil pengukuran sebenarnya. */
:root { --landing-header-h: 76px; }

html:has(.landing-body) { scroll-behavior: smooth; }
.landing-section[id], .landing-footer[id] { scroll-margin-top: 90px; }

.landing-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
}
.landing-container-narrow { max-width: 760px; }

.landing-section { padding: 96px 0; }
.landing-section-alt { background: #fff; }

/* Eyebrow bergaya "// LABEL" — penanda kecil di atas judul section. */
.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--l-green);
    margin-bottom: 18px;
}
.landing-eyebrow::before {
    content: "//";
    color: var(--l-lime);
    -webkit-text-stroke: .6px var(--l-green);
}

.landing-section-title {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-weight: 800;
    margin: 0 0 14px;
    color: var(--l-ink);
}
.landing-section-sub {
    font-size: 17px;
    line-height: 1.65;
    color: var(--l-muted);
    max-width: 620px;
    margin: 0 0 44px;
}

/* Kepala section dua kolom: judul di kiri, keterangan di kanan. */
.landing-head-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    gap: 40px;
    align-items: end;
    margin-bottom: 48px;
}
.landing-head-split .landing-section-title { margin-bottom: 0; }
.landing-head-split .landing-section-sub { margin-bottom: 0; }

/* ------------------------------ Tombol ------------------------------ */
.landing-body .btn-lg { min-height: 56px; padding: 0 32px; font-size: 17px; }

.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.landing-btn:hover { text-decoration: none; transform: translateY(-2px); }

.landing-btn-lime { background: var(--l-lime); color: var(--l-ink); }
.landing-btn-lime:hover { background: #d7ff6b; color: var(--l-ink); }

.landing-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.landing-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.landing-btn-ink { background: var(--l-ink); color: #fff; }
.landing-btn-ink:hover { background: var(--l-forest); color: #fff; }

.landing-btn-outline { background: transparent; color: var(--l-ink); border-color: var(--l-sand); }
.landing-btn-outline:hover { background: var(--l-ink); color: #fff; border-color: var(--l-ink); }

/* ------------------------------ Header ------------------------------ */
.landing-header {
    position: sticky;
    top: 0;
    /* Di atas peta Leaflet, yang lapisan internalnya mencapai z-index 1000.
       sticky/fixed sekaligus menjadi jangkar bagi panel menu layar sempit
       yang diposisikan absolut, jadi tidak perlu position:relative lagi. */
    z-index: 1200;
    background: var(--l-cream);
    border-bottom: 1px solid var(--l-sand);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.landing-header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 76px;
}

/* Varian overlay HANYA dipakai halaman depan yang punya hero foto: header
   menumpang di atas foto tanpa latar. Halaman arsip/detail berita memakai
   _header_sederhana.php TANPA class ini, sehingga headernya tetap solid
   dan tetap terbaca di atas latar terang. */
.landing-header--overlay {
    position: fixed;
    left: 0; right: 0; top: 0;
    /* Latar gelap tipis + blur, BUKAN transparan penuh. Saat halaman
       digulir di dalam hero, judul hero yang berukuran besar lewat tepat
       di belakang header; tanpa lapisan ini huruf-hurufnya beradu dengan
       tulisan navbar dan keduanya sama-sama sulit dibaca. */
    background: rgba(10, 24, 16, .34);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    border-bottom-color: rgba(255,255,255,.16);
}
.landing-header--overlay .landing-brand-name,
.landing-header--overlay .landing-brand-sub,
.landing-header--overlay .landing-nav-link { color: #fff; }
.landing-header--overlay .landing-nav { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.landing-header--overlay .landing-nav-link:hover { background: rgba(255,255,255,.18); }

/* landing.js menambahkan .scrolled setelah hero terlewat. */
.landing-header--overlay.scrolled {
    background: var(--l-cream);
    border-bottom-color: var(--l-sand);
    box-shadow: 0 6px 24px rgba(12,29,20,.07);
    /* Setelah hero terlewat latarnya sudah solid, blur tidak diperlukan
       lagi dan hanya membebani penggambaran. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.landing-header--overlay.scrolled .landing-brand-name { color: var(--l-ink); }
.landing-header--overlay.scrolled .landing-brand-sub { color: var(--l-muted); }
.landing-header--overlay.scrolled .landing-nav-link { color: var(--l-ink); }
.landing-header--overlay.scrolled .landing-nav { background: rgba(12,29,20,.05); border-color: var(--l-sand); }
.landing-header--overlay.scrolled .landing-nav-link:hover { background: rgba(12,29,20,.07); }

.landing-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    min-width: 0;
}
.landing-brand:hover { text-decoration: none; }
.landing-brand-logo { width: 40px; height: 40px; object-fit: contain; }
.landing-brand-text { display: flex; flex-direction: column; min-width: 0; }
.landing-brand-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--l-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.landing-brand-sub {
    font-size: 12px;
    color: var(--l-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Nav berbentuk pil (mengikuti RoofClaim). */
.landing-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
    padding: 6px;
    border-radius: 999px;
    background: rgba(12,29,20,.05);
    border: 1px solid var(--l-sand);
}
.landing-nav-link {
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: var(--l-ink);
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.landing-nav-link:hover { background: rgba(12,29,20,.07); text-decoration: none; }

/* Tombol hamburger — hanya muncul di layar sempit (lihat media query di
   bawah) dan hanya bila JavaScript aktif, karena tanpa JS panelnya tidak
   bisa dibuka; menu tetap dapat digulir mendatar sebagai gantinya. */
.landing-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    border-radius: 14px;
    border: 1px solid var(--l-sand);
    background: rgba(12,29,20,.05);
    cursor: pointer;
    flex-shrink: 0;
}
.landing-nav-toggle-bar {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: var(--l-ink);
    transition: transform .2s ease, opacity .2s ease;
}
.landing-header--overlay .landing-nav-toggle {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.28);
}
.landing-header--overlay .landing-nav-toggle-bar { background: #fff; }
.landing-header--overlay.scrolled .landing-nav-toggle,
.landing-header--overlay.nav-open .landing-nav-toggle {
    background: rgba(12,29,20,.05);
    border-color: var(--l-sand);
}
.landing-header--overlay.scrolled .landing-nav-toggle-bar,
.landing-header--overlay.nav-open .landing-nav-toggle-bar { background: var(--l-ink); }

/* Tiga garis berubah menjadi tanda silang saat panel terbuka. */
.landing-header.nav-open .landing-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.landing-header.nav-open .landing-nav-toggle-bar:nth-child(2) { opacity: 0; }
.landing-header.nav-open .landing-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.landing-header-cta {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    background: var(--l-lime);
    color: var(--l-ink);
    border: none;
}
.landing-header-cta:hover { background: #d7ff6b; color: var(--l-ink); text-decoration: none; }

/* Tombol "Masuk" SELALU tampil, termasuk selagi masih di area hero.
   Sebelumnya ia baru muncul setelah hero terlewat, sehingga jalan masuk
   petugas tidak terlihat sama sekali pada tampilan pertama halaman. */

/* ------------------------------- Hero ------------------------------- */
.landing-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding: calc(var(--landing-header-h) + 56px) 0 0;
    background: var(--l-forest) center/cover no-repeat;
    color: #fff;
    overflow: hidden;
}
/* Lapisan gelap agar teks putih tetap terbaca di atas foto apa pun. */
.landing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6,16,11,.62) 0%, rgba(6,16,11,.28) 34%, rgba(6,16,11,.86) 100%);
}
/* min-width:0 WAJIB: container ini adalah flex item dari .landing-hero,
   dan nilai bawaan min-width:auto membuatnya menolak menyusut di bawah
   lebar min-content isinya. Di layar sempit itu melebarkan halaman ke
   samping — teks hero terpotong dan isi header ikut terdorong keluar. */
.landing-hero > .landing-container {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
}

.landing-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--l-lime);
    margin-bottom: 20px;
}
.landing-hero-eyebrow::before { content: "//"; }

/* Warna heading di bawah ini SELALU ditulis eksplisit. Aturan dasar
   `h1, h2, h3, h4 { color: var(--text-primary) }` untuk dashboard punya
   specificity lebih tinggi daripada pewarisan dari section, sehingga tanpa
   deklarasi ini judul di atas foto/section gelap ikut menjadi gelap dan
   nyaris tidak terbaca. */
.landing-hero-title {
    font-size: clamp(42px, 8.2vw, 92px);
    line-height: .96;
    letter-spacing: -.035em;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 22px;
    max-width: 14ch;
    text-wrap: balance;
    color: #fff;
}
.landing-hero-title em {
    font-style: normal;
    color: var(--l-lime);
}
.landing-hero-sub {
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.6;
    color: rgba(255,255,255,.88);
    max-width: 54ch;
    margin: 0 0 32px;
}
.landing-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.landing-hero-note {
    margin: 18px 0 0;
    font-size: 14px;
    color: rgba(255,255,255,.7);
}

/* Strip statistik menempel di dasar hero (arah dari REWASTE). */
.landing-hero-strip {
    position: relative;
    z-index: 1;
    margin-top: 56px;
    border-top: 1px solid rgba(255,255,255,.22);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.landing-hero-stat {
    padding: 22px 24px 26px;
    border-right: 1px solid rgba(255,255,255,.16);
}
.landing-hero-stat:last-child { border-right: none; }
.landing-hero-stat-value {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
}
.landing-hero-stat-label {
    margin-top: 6px;
    font-size: 13px;
    color: rgba(255,255,255,.72);
    letter-spacing: .02em;
}

/* ------------------------- Deretan statistik ------------------------ */
.landing-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.landing-stat {
    padding: 0 28px;
    border-left: 1px solid var(--l-sand);
    text-align: left;
}
.landing-stat:first-child { border-left: none; padding-left: 0; }
.landing-stat-value {
    font-size: clamp(34px, 4.6vw, 54px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
    color: var(--l-green);
}
.landing-stat-label {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--l-muted);
}

/* --------------------------- Tentang / nilai ------------------------ */
.landing-about {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}
.landing-about-media {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.landing-about-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--l-radius);
    display: block;
}
.landing-about-media-tall { grid-row: span 2; height: 100%; min-height: 340px; }
.landing-about-media-short { height: 168px; }

/* Ditempatkan menimpa foto KIRI (tumpukan botol) yang ramai, bukan foto
   kanan-bawah — di sana badge menutupi hampir seluruh gambarnya. */
.landing-about-badge {
    position: absolute;
    left: 20px;
    bottom: -22px;
    background: var(--l-lime);
    color: var(--l-ink);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 14px 34px rgba(12,29,20,.18);
    max-width: 200px;
}
.landing-about-badge-value { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.landing-about-badge-label { font-size: 13px; font-weight: 600; margin-top: 6px; line-height: 1.35; }

.landing-about-text p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--l-muted);
    margin: 0 0 18px;
}
.landing-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.landing-point {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.landing-point-mark {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--l-green-soft);
    color: var(--l-green);
    display: grid; place-items: center;
    font-size: 14px; font-weight: 800;
    margin-top: 2px;
}
.landing-point-title { font-weight: 700; font-size: 16px; }
.landing-point-desc { font-size: 15px; color: var(--l-muted); line-height: 1.6; margin-top: 2px; }

/* ------------------------------ Layanan ----------------------------- */
.landing-layanan {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.landing-layanan-item {
    background: var(--l-cream);
    border: 1px solid var(--l-sand);
    border-radius: var(--l-radius);
    padding: 28px 24px 26px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.landing-layanan-item:hover {
    transform: translateY(-4px);
    border-color: var(--l-green);
    box-shadow: 0 16px 36px rgba(12,29,20,.09);
}
.landing-layanan-ikon {
    width: 50px; height: 50px;
    border-radius: 14px;
    background: var(--l-green-soft);
    color: var(--l-green);
    display: grid; place-items: center;
    margin-bottom: 18px;
    transition: background .18s ease, color .18s ease;
}
.landing-layanan-item:hover .landing-layanan-ikon {
    background: var(--l-lime);
    color: var(--l-ink);
}
.landing-layanan-judul {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 8px;
    color: var(--l-ink);
}
.landing-layanan-item p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--l-muted);
}

/* ---------------------------- Cara kerja ---------------------------- */
.landing-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 28px;
    counter-reset: langkah;
}
.landing-step {
    position: relative;
    background: var(--l-cream);
    border: 1px solid var(--l-sand);
    border-radius: var(--l-radius);
    padding: 28px 24px 26px;
    overflow: hidden;
}
.landing-section-alt .landing-step { background: var(--l-cream); }
.landing-step-photo {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin-bottom: 18px;
}
.landing-step-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--l-green-soft);
    display: grid; place-items: center;
    font-size: 24px;
    margin-bottom: 18px;
}
.landing-step-num {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--l-green);
    margin-bottom: 8px;
}
.landing-step-title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 8px;
    color: var(--l-ink);
}
.landing-step p { font-size: 15px; line-height: 1.65; color: var(--l-muted); margin: 0; }

/* Angka besar samar di pojok kartu sebagai penanda urutan. */
.landing-step::after {
    counter-increment: langkah;
    content: counter(langkah);
    position: absolute;
    right: 14px; bottom: -18px;
    font-size: 92px;
    font-weight: 800;
    line-height: 1;
    color: rgba(18,59,38,.06);
    pointer-events: none;
}

/* ------------------------------ Berita ------------------------------ */
.landing-news {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}
.landing-news-card {
    background: #fff;
    border: 1px solid var(--l-sand);
    border-radius: var(--l-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}
.landing-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(12,29,20,.10);
}
.landing-news-thumb {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: grid;
    place-items: center;
    font-size: 42px;
    background: var(--l-green-soft);
}
.landing-news-photo { display: block; }
.landing-news-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.landing-news-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--l-muted);
    margin-bottom: 12px;
}
.landing-news-tag {
    background: var(--l-ink);
    color: var(--l-lime);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.landing-news-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
    margin: 0 0 10px;
    color: var(--l-ink);
}
.landing-news-title a { color: var(--l-ink); }
.landing-news-title a:hover { color: var(--l-green); text-decoration: none; }
.landing-news-excerpt {
    font-size: 15px;
    line-height: 1.65;
    color: var(--l-muted);
    margin: 0 0 16px;
}
.landing-news-more {
    margin-top: auto;
    font-weight: 700;
    font-size: 15px;
    color: var(--l-green);
}
.landing-news-more:hover { text-decoration: underline; }
.landing-news-more-wrap { margin-top: 40px; }

/* ---------------------- Lokasi (section gelap) ---------------------- */
.landing-section-dark {
    background: var(--l-ink);
    color: #fff;
}
.landing-section-dark .landing-section-title { color: #fff; }
.landing-section-dark .landing-section-sub { color: rgba(255,255,255,.7); }
.landing-section-dark .landing-eyebrow { color: var(--l-lime); }
.landing-section-dark .landing-eyebrow::before { -webkit-text-stroke: 0; }

.landing-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
}
.landing-map-wrap { min-width: 0; }
/* position+z-index WAJIB: Leaflet memberi lapisan internalnya z-index
   sampai 1000 (kontrol zoom, marker, popup). Tanpa stacking context
   sendiri, angka-angka itu diadu di tingkat halaman dan peta tampil
   MENIMPA header yang sticky. Dengan z-index 0 di sini, seluruh isi peta
   tetap berada di dalam konteksnya dan aman berada di bawah header. */
.landing-map {
    position: relative;
    z-index: 0;
    height: 460px;
    border-radius: var(--l-radius);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    background: #12241a;
}
.landing-map-empty { display: grid; place-items: center; }

.landing-rw-list {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--l-radius);
    padding: 24px;
    height: 460px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.landing-rw-list h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 16px;
    color: #fff;
}
.landing-rw-search { margin-bottom: 14px; }
.landing-rw-search input {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 15px;
    font-family: inherit;
}
.landing-rw-search input::placeholder { color: rgba(255,255,255,.5); }
.landing-rw-search input:focus {
    outline: none;
    border-color: var(--l-lime);
    background: rgba(255,255,255,.1);
}

.landing-rw-items {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.landing-rw-item {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.landing-rw-item:last-child { border-bottom: none; }
.landing-rw-name { font-weight: 700; font-size: 16px; color: #fff; }
.landing-rw-address { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.5; margin-top: 3px; }
.landing-rw-address .text-muted { color: rgba(255,255,255,.45); }
.landing-rw-flag {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.7);
}
.landing-rw-empty { padding: 18px 0; color: rgba(255,255,255,.6); font-size: 15px; }
.landing-rw-count {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: 13px;
    color: rgba(255,255,255,.6);
}
.landing-section-dark .empty-state { color: rgba(255,255,255,.6); }

.map-popup strong { display: block; font-size: 15px; color: #0C1D14; }
.map-popup-address { font-size: 13px; color: #5A6A60; margin-top: 3px; }

/* -------------------------------- FAQ ------------------------------- */
.landing-faq {
    border: 1px solid var(--l-sand);
    border-radius: 14px;
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
}
.landing-faq summary {
    padding: 20px 56px 20px 22px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    cursor: pointer;
    position: relative;
    list-style: none;
}
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--l-green-soft);
    color: var(--l-green);
    display: grid; place-items: center;
    font-size: 18px;
    font-weight: 700;
    transition: transform .2s ease, background .2s ease;
}
/* Tanda "+" diputar 45° menjadi "×" saat terbuka. Mengganti isi teks
   (dari + ke −) tidak dapat dianimasikan, sedangkan perputaran ini
   mengikuti gerakan panel yang membuka. */
.landing-faq[open] summary::after {
    background: var(--l-lime);
    color: var(--l-ink);
    transform: translateY(-50%) rotate(45deg);
}

/* Pembungkus jawaban — tingginya dianimasikan landing.js.
   overflow:hidden WAJIB agar teks ikut terpotong rapi selama tingginya
   masih bergerak, bukan meluber keluar kartu. */
.landing-faq-isi { overflow: hidden; }

.landing-faq p {
    margin: 0;
    padding: 0 22px 22px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--l-muted);
}

/* --------------------------- Ajakan penutup ------------------------- */
.landing-cta {
    background: var(--l-forest);
    border-radius: 28px;
    padding: 64px 48px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.landing-cta::before {
    content: "";
    position: absolute;
    right: -80px; top: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: rgba(200,242,80,.12);
}
.landing-cta > * { position: relative; z-index: 1; }
.landing-cta-title {
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin: 0 0 14px;
    color: #fff;
}
.landing-cta-sub {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255,255,255,.8);
    max-width: 56ch;
    margin: 0 auto 30px;
}
.landing-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ------------------- Halaman arsip & detail berita ------------------ */
.landing-back-link {
    display: inline-block;
    margin-bottom: 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--l-green);
}
.landing-back-link:hover { text-decoration: underline; }

.landing-article-head { margin-bottom: 28px; }
.landing-article-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.12;
    margin: 12px 0 14px;
    color: var(--l-ink);
}
.landing-article-lead {
    font-size: 18px;
    line-height: 1.65;
    color: var(--l-muted);
    margin: 0;
}
.landing-article-photo {
    width: 100%;
    border-radius: var(--l-radius);
    margin-bottom: 28px;
    display: block;
}
.landing-article-body {
    font-size: 17px;
    line-height: 1.8;
    color: #2A3B32;
}

.landing-body .empty-state {
    padding: 36px;
    text-align: center;
    color: var(--l-muted);
    background: #fff;
    border: 1px dashed var(--l-sand);
    border-radius: var(--l-radius);
}

/* ------------------------------ Footer ------------------------------ */
.landing-footer {
    background: var(--l-ink);
    color: #fff;
    padding: 72px 0 28px;
}
/* Kolom alamat & kontak diberi porsi sedikit lebih besar daripada kolom
   layanan: isinya berupa kalimat panjang yang mudah membungkus canggung
   bila kolomnya terlalu sempit. */
.landing-footer-grid {
    display: grid;
    grid-template-columns: 1.35fr 1.15fr .95fr 1.15fr;
    gap: 36px;
}

/* Daftar layanan pada footer — tanpa bullet, jarak antar barisnya lebih
   rapat daripada blok alamat/kontak yang berikon. */
.landing-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.landing-footer-list li { margin-bottom: 10px; }
.landing-footer-list li:last-child { margin-bottom: 0; }
.landing-footer-brand { display: flex; gap: 12px; margin-bottom: 16px; }
.landing-footer-logo { width: 44px; height: 44px; object-fit: contain; }
.landing-footer-name { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.landing-footer-desc {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,.65);
    max-width: 38ch;
    margin: 0 0 22px;
}
.landing-footer-heading {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--l-lime);
    margin: 0 0 20px;
}
.landing-footer-item { display: flex; gap: 12px; margin-bottom: 18px; }
.landing-footer-item:last-child { margin-bottom: 0; }
.landing-footer-icon { flex-shrink: 0; margin-top: 3px; color: var(--l-lime); }
.landing-footer-strong { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.landing-footer-line {
    display: block;
    font-size: 15px;
    color: rgba(255,255,255,.68);
    line-height: 1.55;
}
.landing-footer a.landing-footer-line { color: rgba(255,255,255,.68); }
.landing-footer a.landing-footer-line:hover { color: var(--l-lime); text-decoration: underline; }
.landing-footer a { color: var(--l-lime); }

.landing-social { display: flex; gap: 10px; }
.landing-social-link {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.landing-social-link:hover {
    background: var(--l-lime);
    border-color: var(--l-lime);
    color: var(--l-ink);
    text-decoration: none;
}

.landing-copyright {
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: 14px;
    color: rgba(255,255,255,.55);
    text-align: center;
}

/* ----------------------------- Responsif ---------------------------- */
/* Layar sempit: menu tidak lagi turun ke baris kedua (yang membuat header
   tinggi dan renggang), melainkan disembunyikan di balik tombol hamburger.
   Header tetap satu baris: brand — tombol Masuk — hamburger. */
@media (max-width: 980px) {
    /* Header memakai GRID, bukan flex, di layar sempit.
       Dengan flex, brand menolak menyusut di bawah lebar isinya sehingga
       tombol Masuk dan hamburger terdorong keluar layar. Kolom
       minmax(0, 1fr) menjamin brand boleh menyusut sampai berapa pun,
       sementara dua kolom 'auto' menjaga tombol tetap utuh. */
    .landing-header-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 10px;
    }
    .landing-brand { min-width: 0; overflow: hidden; }
    .landing-brand-logo { flex-shrink: 0; }
    .landing-brand-text { min-width: 0; overflow: hidden; }

    .landing-nav {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: 16px;
        right: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        padding: 10px;
        border-radius: 18px;
        background: var(--l-cream);
        border: 1px solid var(--l-sand);
        box-shadow: 0 20px 44px rgba(12,29,20,.18);
    }
    .landing-nav.open { display: flex; }
    .landing-nav-link { padding: 13px 14px; border-radius: 12px; font-size: 16px; }

    /* Panel HARUS solid di SEMUA keadaan header.
       Keadaan .scrolled ikut disebut secara eksplisit karena aturan pil
       versi lebar layar besar (.landing-header--overlay.scrolled
       .landing-nav) punya specificity lebih tinggi daripada
       .landing-header--overlay .landing-nav — tanpa baris ini, panel
       memakai latar rgba(12,29,20,.05) milik pil itu, yang nyaris
       transparan sehingga tulisan menu bertumpuk dengan isi halaman di
       belakangnya begitu halaman digulir. */
    .landing-header--overlay .landing-nav,
    .landing-header--overlay.scrolled .landing-nav,
    .landing-header--overlay.nav-open .landing-nav {
        background: var(--l-cream);
        border-color: var(--l-sand);
    }
    .landing-header--overlay .landing-nav-link,
    .landing-header--overlay.scrolled .landing-nav-link { color: var(--l-ink); }
    .landing-header--overlay .landing-nav-link:hover,
    .landing-header--overlay.scrolled .landing-nav-link:hover { background: rgba(12,29,20,.07); }

    /* Begitu panel terbuka, header ikut solid agar panel tidak terlihat
       mengambang lepas di atas foto. */
    .landing-header--overlay.nav-open {
        background: var(--l-cream);
        border-bottom-color: var(--l-sand);
    }
    .landing-header--overlay.nav-open .landing-brand-name { color: var(--l-ink); }
    .landing-header--overlay.nav-open .landing-brand-sub { color: var(--l-muted); }

    /* Tombol hamburger hanya berguna bila JavaScript aktif. */
    .landing-js .landing-nav-toggle { display: flex; }

    /* Tanpa JavaScript panel tidak bisa dibuka, jadi menu ditaruh pada
       baris kedua grid dan tetap dapat digulir mendatar. */
    html:not(.landing-js) .landing-nav {
        display: flex;
        position: static;
        grid-column: 1 / -1;
        flex-direction: row;
        /* min-width:0 WAJIB: sebagai flex item, nilai bawaan min-width:auto
           membuat nav melebar mengikuti isinya sehingga overflow-x tidak
           pernah aktif dan seluruh halaman ikut melebar ke samping. */
        min-width: 0;
        margin: 0 auto;
        padding: 6px;
        border-radius: 999px;
        box-shadow: none;
        overflow-x: auto;
        scrollbar-width: none;
    }
    html:not(.landing-js) .landing-nav::-webkit-scrollbar { display: none; }

    .landing-section[id], .landing-footer[id] { scroll-margin-top: 90px; }
    .landing-about { grid-template-columns: 1fr; gap: 44px; }
    .landing-head-split { grid-template-columns: 1fr; align-items: start; gap: 18px; }
}

@media (max-width: 900px) {
    .landing-section { padding: 72px 0; }
    .landing-layanan { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .landing-map-layout { grid-template-columns: 1fr; }
    .landing-map { height: 340px; }
    .landing-rw-list { height: auto; max-height: 420px; }
    .landing-stats { grid-template-columns: 1fr 1fr; gap: 28px 0; }
    .landing-stat { padding: 0 20px; }
    .landing-stat:nth-child(odd) { border-left: none; padding-left: 0; }
    .landing-hero-strip { grid-template-columns: 1fr 1fr; }
    .landing-hero-stat:nth-child(2) { border-right: none; }
    .landing-hero-stat:nth-child(1), .landing-hero-stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.16); }
    .landing-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .landing-footer-col:first-child { grid-column: 1 / -1; }
    .landing-footer-desc { max-width: none; }
}

@media (max-width: 640px) {
    /* Header tetap satu baris berkat menu hamburger, jadi tingginya sama
       seperti di layar lebar. Nilai ini hanya cadangan bila JavaScript
       mati; landing.js menimpanya dengan tinggi sebenarnya. */
    :root { --landing-header-h: 76px; }
    .landing-container { padding: 0 18px; }
    .landing-header-inner { min-height: 68px; gap: 12px; }
    .landing-layanan { grid-template-columns: 1fr; }
    .landing-section { padding: 56px 0; }
    .landing-hero { min-height: 92svh; padding-top: calc(var(--landing-header-h) + 32px); }
    .landing-hero-title { max-width: none; }
    .landing-hero-actions .landing-btn { width: 100%; }
    .landing-hero-strip { margin-top: 36px; }
    .landing-hero-stat { padding: 16px 14px 18px; }
    .landing-cta { padding: 44px 24px; border-radius: 22px; }
    .landing-cta-actions .landing-btn { width: 100%; }
    .landing-brand-sub { display: none; }
    .landing-brand-name { font-size: 15px; }
    .landing-brand-logo { width: 36px; height: 36px; }
    .landing-nav-link { font-size: 14px; padding: 8px 13px; }
    .landing-about-media-tall { min-height: 240px; }
    .landing-about-media-short { height: 120px; }
    .landing-about-badge { left: 12px; bottom: -16px; padding: 13px 16px; }
    .landing-footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .landing-footer { padding: 56px 0 24px; }
}

/* Layar pendek (laptop kecil / HP mendatar): hero tidak dipaksa setinggi
   layar penuh supaya isinya tidak terpotong. */
@media (max-height: 620px) {
    .landing-hero { min-height: auto; padding-bottom: 40px; }
}