@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* Mobile-first, tanpa framework CSS besar — warga sering akses dari HP dengan koneksi
   terbatas (02 Analisa.md), jadi payload dijaga seringan mungkin dibanding frontend AdminLTE. */
:root {
  /* Tema desa nelayan — sama dengan landing page (assets/css/landing.css) */
  --dd-primary: #0f5f7a;       /* laut */
  --dd-primary-dark: #0b2e4a;  /* laut tua */
  --dd-toska: #1aa6a0;
  --dd-toska-muda: #d7f1ee;
  --dd-karang: #e8643f;        /* aksen senja: tombol aksi utama */
  --dd-karang-tua: #c94f2d;
  --dd-matahari: #f6b546;
  --dd-bg: #f7f1e6;            /* pasir */
  --dd-card-bg: #ffffff;
  --dd-text: #13232f;
  --dd-text-muted: #5b6a75;
  --dd-border: #eadfca;
  --dd-success: #198754;
  --dd-danger: #dc3545;
  --dd-warning: #ffc107;
  /* Langit hero (tema): atas / tengah / bawah (senja) */
  --langit-atas: #0a2740;
  --langit-tengah: #1b6f8c;
  --langit-bawah: #f6c27a;
  --dd-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dd-font-judul: 'Fraunces', Georgia, serif;
  --dd-nav-height: 60px;
  --dd-header-height: 56px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--dd-font);
  background: var(--dd-bg);
  color: var(--dd-text);
  padding-bottom: calc(var(--dd-nav-height) + 26px + env(safe-area-inset-bottom));
  padding-top: var(--dd-header-height);
}

/* ===== Header ===== */
.dd-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--dd-header-height);
  background: var(--dd-primary);
  color: #fff;
  display: flex; align-items: center;
  padding: 0 12px;
  gap: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.dd-header a { color: #fff; text-decoration: none; font-size: 1.3rem; display: flex; }
.dd-header h1 { font-size: 1.05rem; margin: 0; font-weight: 600; flex: 1; }

/* ===== Bottom Nav — ikut tema aktif (tema.js: --dd-*, html[data-ilustrasi]) =====
   Latar warna utama gelap → utama (senada header), item aktif = ikon dalam kapsul warna tombol aksi,
   hiasan tepi atas sesuai ilustrasi tema: ombak (pesisir/laut), rumpun padi (sawah), ketupat (lebaran), tali bendera merah-putih (kemerdekaan). */
.dd-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: calc(var(--dd-nav-height) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: linear-gradient(to top, var(--dd-primary-dark), color-mix(in srgb, var(--dd-primary-dark) 55%, var(--dd-primary)));
  box-shadow: 0 -4px 14px rgba(0,0,0,.12);
  display: flex;
}
.dd-bottom-nav::before {
  content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; pointer-events: none;
  background: color-mix(in srgb, var(--dd-primary-dark) 55%, var(--dd-primary));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 7 Q10 1 20 7 T40 7 V10 H0Z'/%3E%3C/svg%3E") repeat-x left bottom / 40px 10px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 7 Q10 1 20 7 T40 7 V10 H0Z'/%3E%3C/svg%3E") repeat-x left bottom / 40px 10px;
}
html[data-ilustrasi="laut"] .dd-bottom-nav::before { top: -12px; height: 12px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'%3E%3Cpath d='M0 9 Q7.5 1 15 9 T30 9 V12 H0Z'/%3E%3C/svg%3E") repeat-x left bottom / 30px 12px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'%3E%3Cpath d='M0 9 Q7.5 1 15 9 T30 9 V12 H0Z'/%3E%3C/svg%3E") repeat-x left bottom / 30px 12px; }
html[data-ilustrasi="sawah"] .dd-bottom-nav::before { top: -14px; height: 14px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 14 Q6 7 4 1'/%3E%3Cpath d='M6 14 Q8 8 11 4'/%3E%3Cpath d='M5 14 Q3 9 0 7'/%3E%3Cpath d='M18 14 Q19 8 17 3'/%3E%3Cpath d='M19 14 Q21 9 24 6'/%3E%3C/g%3E%3C/svg%3E") repeat-x left bottom / 26px 14px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 14 Q6 7 4 1'/%3E%3Cpath d='M6 14 Q8 8 11 4'/%3E%3Cpath d='M5 14 Q3 9 0 7'/%3E%3Cpath d='M18 14 Q19 8 17 3'/%3E%3Cpath d='M19 14 Q21 9 24 6'/%3E%3C/g%3E%3C/svg%3E") repeat-x left bottom / 26px 14px; }
html[data-ilustrasi="lebaran"] .dd-bottom-nav::before { top: -13px; height: 12px; background: var(--dd-matahari); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M12 0 L19 6 L12 12 L5 6 Z'/%3E%3C/svg%3E") repeat-x left bottom / 24px 12px;
html[data-ilustrasi="kemerdekaan"] .dd-bottom-nav::before { top: -12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cpath d='M0 0 H28' stroke='%237a5a3a' stroke-width='1.2'/%3E%3Cpath d='M1 0 H13 L7 11 Z' fill='%23ce1126'/%3E%3Cpath d='M15 0 H27 L21 11 Z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x left top / 28px 12px; -webkit-mask: none; mask: none; }
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M12 0 L19 6 L12 12 L5 6 Z'/%3E%3C/svg%3E") repeat-x left bottom / 24px 12px; }
.dd-bottom-nav a {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-decoration: none; color: rgba(255,255,255,.72); font-size: .68rem; gap: 3px;
}
.dd-bottom-nav a i { font-size: 1.2rem; line-height: 1; padding: 4px 16px; border-radius: 999px; transition: background .2s, color .2s; }
.dd-bottom-nav a:active i { background: rgba(255,255,255,.14); }
.dd-bottom-nav a.active { color: #fff; font-weight: 600; }
.dd-bottom-nav a.active i { background: var(--dd-karang); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--dd-karang) 45%, transparent); }

/* ===== Container ===== */
.dd-container { padding: 12px; max-width: 480px; margin: 0 auto; }

/* ===== Card ===== */
.dd-card {
  background: var(--dd-card-bg);
  border: 1px solid var(--dd-border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(11,46,74,.06);
}
.dd-card h3 { margin: 0 0 4px; font-size: 1rem; }
.dd-card p { margin: 0; color: var(--dd-text-muted); font-size: .88rem; }
.dd-card-link { display: block; text-decoration: none; color: inherit; }
.dd-card-link:active { background: #f0f2f5; }

/* ===== Quick menu grid (home) ===== */
.dd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dd-grid a {
  text-decoration: none; color: var(--dd-text);
  background: var(--dd-card-bg); border: 1px solid var(--dd-border); border-radius: 12px;
  padding: 16px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: .78rem;
}
.dd-grid a i { font-size: 1.6rem; color: var(--dd-primary); }
.dd-grid a:active { background: var(--dd-toska-muda); }

/* ===== Badge / status ===== */
.dd-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.dd-badge-diajukan, .dd-badge-menunggu, .dd-badge-baru { background: #fff3cd; color: #997404; }
.dd-badge-diproses { background: #cfe2ff; color: #084298; }
.dd-badge-disetujui, .dd-badge-selesai { background: #d1e7dd; color: #0f5132; }
.dd-badge-ditolak { background: #f8d7da; color: #842029; }

/* ===== Form ===== */
.dd-form-group { margin-bottom: 14px; }
.dd-form-group label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; }
.dd-form-group input, .dd-form-group select, .dd-form-group textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--dd-border); border-radius: 10px;
  font-size: .95rem; font-family: inherit; background: var(--dd-card-bg); color: var(--dd-text);
}
.dd-form-group input:focus, .dd-form-group select:focus, .dd-form-group textarea:focus {
  outline: none; border-color: var(--dd-toska); box-shadow: 0 0 0 3px rgba(26,166,160,.18);
}
.dd-form-group .dd-error { color: var(--dd-danger); font-size: .78rem; margin-top: 4px; display: block; }
.dd-form-group input.is-invalid { border-color: var(--dd-danger); }

/* ===== Buttons ===== */
.dd-btn {
  display: inline-block; width: 100%; padding: 13px; border-radius: 999px; border: none;
  font-size: .95rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; font-family: inherit;
}
/* Tombol aksi utama = karang (senada tombol CTA landing page) */
.dd-btn-primary { background: var(--dd-karang); color: #fff; }
.dd-btn-primary:hover { background: var(--dd-karang-tua); }
.dd-btn-primary:active { background: var(--dd-karang-tua); }
.dd-btn-outline { background: var(--dd-card-bg); color: var(--dd-primary); border: 1px solid var(--dd-primary); }
.dd-btn-sm { width: auto; padding: 8px 16px; font-size: .85rem; }
.dd-btn-danger { background: var(--dd-danger); color: #fff; }

/* ===== Toast ===== */
.dd-toast { padding: 12px 16px; border-radius: 10px; margin-bottom: 8px; font-size: .88rem; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.dd-toast-success { background: var(--dd-success); }
.dd-toast-error { background: var(--dd-danger); }

/* ===== Misc ===== */
.dd-empty { text-align: center; color: var(--dd-text-muted); padding: 40px 20px; }
.dd-empty i { font-size: 2.2rem; display: block; margin-bottom: 8px; }
.dd-loading { text-align: center; padding: 20px; color: var(--dd-text-muted); font-size: .85rem; }
.dd-timeline { border-left: 2px solid var(--dd-border); padding-left: 14px; margin-left: 6px; }
.dd-timeline-item { position: relative; padding-bottom: 16px; }
.dd-timeline-item::before {
  content: ''; position: absolute; left: -19px; top: 3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--dd-border);
}
.dd-timeline-item.done::before { background: var(--dd-success); }
.dd-timeline-item.active::before { background: var(--dd-warning); }

/* ===== Profil / detail row ===== */
.dd-profile-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--dd-toska), var(--dd-primary)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; margin: 0 auto 10px; }
.dd-profile-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--dd-border); font-size: .9rem; text-align: left; }
.dd-profile-row:last-child { border-bottom: none; }
.dd-profile-row span:last-child { text-align: right; overflow-wrap: anywhere; min-width: 0; padding-left: 12px; }
/* Profil: kepala kartu (judul + tombol), form ubah profil & ganti password */
.dd-card-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.dd-card-kepala h3 { margin: 0; font-size: 1rem; }
.dd-tautan-btn { background: none; border: 0; color: var(--dd-primary); font-weight: 600; font-size: .85rem; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 6px 4px; font-family: inherit; }
.dd-tautan-btn[hidden] { display: none; }
.dd-form-group input:disabled, .dd-form-group input[readonly] { background: var(--dd-bg); color: var(--dd-text-muted); }
.dd-form-group .dd-bantuan { color: var(--dd-text-muted); font-size: .76rem; margin-top: 4px; display: block; }
.dd-form-group textarea.is-invalid { border-color: var(--dd-danger); }
.dd-aksi-form { display: flex; gap: 8px; }
.dd-aksi-form .dd-btn { flex: 1; }
.dd-sandi { position: relative; }
.dd-sandi input { padding-right: 44px; }
.dd-sandi button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--dd-text-muted); font-size: 1.1rem; padding: 8px; cursor: pointer; }
.dd-profile-row span:first-child { color: var(--dd-text-muted); }

/* Nomor surat panjang tanpa spasi (mis. 400.12.2.1/001/SKD/DESACONTOH/IX/2026) -> boleh patah baris di layar HP */
.dd-nomor-surat { font-size: 1.05rem; font-weight: 700; color: var(--dd-text); overflow-wrap: anywhere; word-break: break-word; margin: 6px 0; line-height: 1.4; }
/* QR verifikasi: SVG skalabel, maksimal 180px tapi ikut menyusut di layar sempit */
.dd-qr { width: 100%; max-width: 180px; margin: 10px auto; }
.dd-qr svg { display: block; width: 100%; height: auto; }

/* ================= Berita ================= */
.dd-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 0 10px; }
.dd-section-head h3 { font-size: .95rem; margin: 0; }
.dd-section-head a { font-size: .82rem; color: var(--dd-primary); text-decoration: none; }
.dd-berita { display: block; background: var(--dd-card-bg); border: 1px solid var(--dd-border); border-radius: 14px; overflow: hidden; margin-bottom: 12px; text-decoration: none; color: inherit; }
.dd-berita:active { background: #f0f2f5; }
.dd-berita-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #e9ecef; }
.dd-berita-body { padding: 12px 14px; }
.dd-berita-meta { font-size: .75rem; color: var(--dd-text-muted); margin-bottom: 4px; }
.dd-berita-meta .dd-kat { color: var(--dd-primary); font-weight: 700; background: var(--dd-toska-muda); padding: 1px 8px; border-radius: 999px; }
.dd-berita h3 { font-size: 1rem; margin: 0 0 4px; line-height: 1.35; }
.dd-berita p { margin: 0; font-size: .85rem; color: var(--dd-text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Kartu ringkas (tanpa gambar besar): thumbnail kecil di kiri */
.dd-berita-row { display: flex; gap: 12px; padding: 10px; }
.dd-berita-row .dd-berita-thumb { flex: 0 0 96px; width: 96px; height: 72px; border-radius: 8px; object-fit: cover; background: #e9ecef; }
.dd-berita-row .dd-berita-thumb-kosong { flex: 0 0 96px; height: 72px; border-radius: 8px; background: #e9ecef; display: flex; align-items: center; justify-content: center; color: #adb5bd; font-size: 1.5rem; }
.dd-berita-row h3 { font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dd-berita-row p { -webkit-line-clamp: 2; font-size: .8rem; }
.dd-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none; }
.dd-chips::-webkit-scrollbar { display: none; }
.dd-chip { flex: 0 0 auto; border: 1px solid var(--dd-border); background: var(--dd-card-bg); color: var(--dd-text); border-radius: 999px; padding: 6px 14px; font-size: .82rem; cursor: pointer; }
.dd-chip.active { background: var(--dd-primary); border-color: var(--dd-primary); color: #fff; }
.dd-search { position: relative; margin-bottom: 10px; }
.dd-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--dd-text-muted); }
.dd-search input { width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--dd-border); border-radius: 10px; font-size: .9rem; box-sizing: border-box; }
/* Halaman baca berita */
.dd-artikel-img { display: block; width: calc(100% + 24px); margin: -12px -12px 14px; aspect-ratio: 16 / 9; object-fit: cover; background: #e9ecef; }
.dd-artikel h2 { font-family: var(--dd-font-judul); font-size: 1.4rem; line-height: 1.35; margin: 4px 0 8px; overflow-wrap: anywhere; }
.dd-artikel .dd-lead { font-size: 1rem; color: var(--dd-text); font-weight: 500; margin: 0 0 14px; }
.dd-artikel-isi { font-size: .98rem; line-height: 1.75; color: var(--dd-text); }
.dd-artikel-isi p { margin: 0 0 14px; overflow-wrap: anywhere; white-space: pre-line; }
.dd-artikel-aksi { display: flex; gap: 8px; margin: 6px 0 20px; }

/* ================= Beranda warga (home.html) — tema desa nelayan ================= */
.dd-hero-home {
  position: relative; overflow: hidden; color: #fff; margin-top: -1px;
  background: linear-gradient(180deg, var(--dd-primary) 0%, color-mix(in srgb, var(--dd-primary) 75%, var(--langit-tengah)) 45%, color-mix(in srgb, var(--langit-tengah) 80%, var(--dd-toska)) 70%, color-mix(in srgb, var(--langit-bawah) 75%, var(--dd-karang)) 100%);
  padding: 18px 16px 70px;
}
.dd-hero-home .isi { position: relative; z-index: 3; max-width: 480px; margin: 0 auto; }
.dd-hero-home .salam { font-size: .88rem; opacity: .9; margin: 0; }
.dd-hero-home h2 { font-family: var(--dd-font-judul); font-size: 1.6rem; line-height: 1.15; margin: 2px 0 8px; overflow-wrap: anywhere; }
.dd-hero-home .desa { font-size: .8rem; opacity: .9; display: flex; align-items: center; gap: 6px; }
.dd-hero-home .status { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); }
.dd-hero-home .status.pending { background: #fff3cd; color: #7a5b00; border-color: #fff3cd; }
.dd-hero-home .mthr { position: absolute; right: -24px; top: -20px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--dd-matahari) 45%, #fff) 0%, var(--dd-matahari) 55%, transparent 72%); opacity: .55; }
.dd-hero-home .prh { position: absolute; right: 12%; bottom: 34px; width: 70px; z-index: 2; animation: dd-ayun-h 5s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes dd-ayun-h { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
.dd-hero-home .omb { position: absolute; left: 0; right: 0; bottom: -1px; height: 60px; z-index: 2; }
.dd-hero-home .omb svg { position: absolute; bottom: 0; width: 200%; height: 100%; }
.dd-hero-home .omb .a { animation: dd-geser-h 14s linear infinite; opacity: .45; }
.dd-hero-home .omb .b { bottom: -10px; }
@keyframes dd-geser-h { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dd-home-main { margin-top: -46px; position: relative; z-index: 4; }

.dd-banner-home { margin-bottom: 14px; }
.dd-layanan-kartu { background: var(--dd-card-bg); border-radius: 18px; box-shadow: 0 10px 28px rgba(11,46,74,.10); padding: 16px 12px 10px; margin-bottom: 14px; }
.dd-layanan-kartu h3 { font-size: .9rem; margin: 0 4px 12px; color: var(--dd-primary-dark); }
.dd-layanan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 4px; } /* 4 menu per baris */
.dd-layanan-grid a { text-decoration: none; color: var(--dd-text); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 1px 10px; border-radius: 12px; font-size: .72rem; font-weight: 500; text-align: center; line-height: 1.25; }
.dd-layanan-grid a:active { background: var(--dd-bg); }
.dd-layanan-grid .ik { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; background: var(--dd-toska); box-shadow: 0 6px 14px rgba(11,46,74,.14); }
.dd-layanan-grid .ik.karang { background: var(--dd-karang); }
.dd-layanan-grid .ik.laut { background: var(--dd-primary); }
.dd-layanan-grid .ik.matahari { background: var(--dd-matahari); color: var(--dd-primary-dark); }
.dd-layanan-grid .ik.biru { background: #3d8bd4; }
.dd-layanan-grid .ik.tua { background: var(--dd-primary-dark); }

.dd-info-desa { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.dd-info-desa a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--dd-text); background: var(--dd-card-bg); border: 1px solid var(--dd-border); border-radius: 14px; padding: 12px; font-size: .82rem; font-weight: 600; line-height: 1.25; }
.dd-info-desa a i { font-size: 1.3rem; color: var(--dd-toska); }
.dd-info-desa a small { display: block; font-weight: 400; color: var(--dd-text-muted); font-size: .72rem; }

@media (prefers-reduced-motion: reduce) {
  .dd-hero-home .prh, .dd-hero-home .omb .a { animation: none; }
}

/* ================= Header: tombol aksi kanan (mis. "+" tambah) ================= */
.dd-header .dd-header-aksi { width: 38px; height: 38px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(255,255,255,.16); font-size: 1.25rem; flex: none; }
.dd-header .dd-header-aksi:active { background: rgba(255,255,255,.3); }

/* ================= Kartu daftar dengan aksi (Surat & Pengaduan) ================= */
.dd-item { background: var(--dd-card-bg); border: 1px solid var(--dd-border); border-radius: 14px; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(11,46,74,.06); overflow: hidden; }
.dd-item-isi { display: flex; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; }
.dd-item-isi:active { background: #f7f3ea; }
.dd-item-ikon { flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: var(--dd-toska-muda); color: var(--dd-primary); }
.dd-item-ikon.st-disetujui, .dd-item-ikon.st-selesai { background: #d1e7dd; color: #0f5132; }
.dd-item-ikon.st-ditolak { background: #f8d7da; color: #842029; }
.dd-item-ikon.st-diproses { background: #cfe2ff; color: #084298; }
.dd-item-ikon.st-diajukan, .dd-item-ikon.st-baru { background: #fff3cd; color: #7a5b00; }
.dd-item-teks { min-width: 0; flex: 1; }
.dd-item-teks h3 { font-size: .95rem; margin: 0 0 3px; line-height: 1.35; }
.dd-item-teks .meta { font-size: .76rem; color: var(--dd-text-muted); margin-bottom: 5px; }
.dd-item-teks p { margin: 0 0 6px; font-size: .82rem; color: var(--dd-text-muted); overflow-wrap: anywhere; }
.dd-item-aksi { display: flex; border-top: 1px solid var(--dd-border); }
.dd-item-aksi a, .dd-item-aksi button { flex: 1; border: 0; background: none; padding: 9px 6px; font: 600 .82rem var(--dd-font); color: var(--dd-primary); text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.dd-item-aksi > * + * { border-left: 1px solid var(--dd-border); }
.dd-item-aksi .hapus { color: var(--dd-danger); }
.dd-item-aksi a:active, .dd-item-aksi button:active { background: #f7f3ea; }
.dd-chip b { margin-left: 4px; font-variant-numeric: tabular-nums; }

/* =====================================================================================================
 * MODE GELAP (tema.js -> html.mode-gelap). Token permukaan versi gelap diisi tema.js dari warna tema aktif;
 * nilai di bawah = cadangan bila tema belum termuat. Header, menu bawah & tombol tetap berwarna tema.
 * ===================================================================================================== */
html.mode-gelap {
  --dd-bg: #11161c; --dd-card-bg: #1a2027; --dd-border: #2f3942; --dd-text: #e6ebf0; --dd-text-muted: #a9b4be;
  --dd-toska-muda: #1f3136; --teks-aksen: #8fc3d6;
}
html.mode-gelap body { background: var(--dd-bg); color: var(--dd-text); }
html.mode-gelap .dd-card, html.mode-gelap .dd-layanan-kartu, html.mode-gelap .dd-info-desa a { box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
html.mode-gelap .dd-bottom-nav { box-shadow: 0 -4px 14px rgba(0, 0, 0, .45); }
/* Teks berwarna utama/gelap tema -> versi terang supaya terbaca di permukaan gelap */
html.mode-gelap :is(.dd-grid a i, .dd-tautan-btn, .dd-section-head a, .dd-berita-meta .dd-kat, .dd-btn-outline, .dd-layanan-kartu h3,
  .dd-card h3, .dd-profile-row a, .dd-form-card .tautan-bawah a, .dd-btn-garis-laut, .dd-info-desa a i) { color: var(--teks-aksen); }
html.mode-gelap .dd-btn-outline { border-color: var(--teks-aksen); }
html.mode-gelap .dd-card-link:active, html.mode-gelap .dd-berita:active, html.mode-gelap .dd-item-isi:active,
html.mode-gelap .dd-item-aksi a:active, html.mode-gelap .dd-item-aksi button:active { background: rgba(255, 255, 255, .06); }
html.mode-gelap :is(.dd-berita-img, .dd-berita-row .dd-berita-thumb, .dd-berita-row .dd-berita-thumb-kosong, .dd-artikel-img) { background-color: #252d35; }
/* Lencana & ikon status versi gelap */
html.mode-gelap :is(.dd-badge-diajukan, .dd-badge-menunggu, .dd-badge-baru, .dd-item-ikon.st-diajukan, .dd-item-ikon.st-baru) { background: rgba(255, 193, 7, .18); color: #ffd866; }
html.mode-gelap :is(.dd-badge-diproses, .dd-item-ikon.st-diproses) { background: rgba(13, 110, 253, .22); color: #9ec5fe; }
html.mode-gelap :is(.dd-badge-disetujui, .dd-badge-selesai, .dd-item-ikon.st-disetujui, .dd-item-ikon.st-selesai) { background: rgba(25, 135, 84, .25); color: #75d0a2; }
html.mode-gelap :is(.dd-badge-ditolak, .dd-item-ikon.st-ditolak) { background: rgba(220, 53, 69, .22); color: #f1939c; }
html.mode-gelap .dd-form-group input:focus, html.mode-gelap .dd-form-group select:focus, html.mode-gelap .dd-form-group textarea:focus { border-color: var(--dd-toska); }
html.mode-gelap ::placeholder { color: #7d8993; }

/* Pilihan mode di halaman Profil */
.dd-mode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dd-mode button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; font: 600 .75rem var(--dd-font);
  background: var(--dd-card-bg); color: var(--dd-text); border: 1px solid var(--dd-border); border-radius: 12px; cursor: pointer;
}
.dd-mode button i { font-size: 1.25rem; }
.dd-mode button.active { border-color: var(--dd-primary); background: var(--dd-toska-muda); color: var(--dd-primary); }
html.mode-gelap .dd-mode button.active { color: #fff; border-color: var(--teks-aksen); }

/* Form pengaduan: RW/RT berdampingan, foto dari lokasi, status GPS */
.dd-dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dd-dua-kolom select:disabled { opacity: .6; }
.dd-foto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.dd-foto-grid:empty { display: none; }
.dd-foto { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--dd-border); }
.dd-foto img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; } /* cap geotag di kiri bawah tetap terbaca */
.dd-foto-hapus { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; display: grid; place-items: center; }
.dd-foto-geo { position: absolute; left: 6px; bottom: 6px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); font-size: .9rem; }
.dd-gps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: .84rem; padding: 10px 12px; border-radius: 12px; margin: -4px 0 16px;
  background: var(--dd-card-bg); border: 1px dashed var(--dd-border); color: var(--dd-text-muted); }
.dd-gps > i { font-size: 1.05rem; }
.dd-gps.ada { border-style: solid; border-color: var(--dd-toska); color: var(--dd-text); }
.dd-gps.ada > i { color: var(--dd-toska); }
.dd-gps a { margin-left: 4px; font-weight: 600; }
.dd-gps .dd-tautan-btn { margin-left: auto; }
/* Detail pengaduan: foto & lokasi */
.dd-foto-grid.detail .dd-foto { cursor: zoom-in; }

/* Pengajuan surat: isian otomatis dari data warga */
.dd-isian-otomatis { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; padding: 10px 12px; margin-bottom: 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--dd-toska) 12%, var(--dd-card-bg)); border: 1px solid color-mix(in srgb, var(--dd-toska) 40%, var(--dd-border)); }
.dd-isian-otomatis > i { color: var(--dd-toska); font-size: 1.1rem; }
.dd-tanda-otomatis { font-size: .7rem; font-weight: 600; color: var(--dd-toska); background: color-mix(in srgb, var(--dd-toska) 12%, transparent); padding: 1px 7px; border-radius: 999px; white-space: nowrap; }

/* Profil: subjudul bagian & nilai kosong */
.dd-sub-judul { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--dd-text-muted); margin: 16px 0 6px; display: flex; align-items: center; gap: 6px; }
.dd-sub-judul small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.dd-kosong { color: var(--dd-text-muted); font-style: italic; font-size: .82rem; }

/* Pengajuan surat: ambil data warga lain */
.dd-warga-lain { margin-bottom: 14px; }
.dd-warga-lain > .dd-btn { width: auto; }
.dd-warga-lain .dd-card { margin-top: 10px; }