/* ===== NU Desa — v5 "One UI": modern, lega, mudah dipakai =====
   Isi: latar berhias per tema · judul besar yang menyusut · bilah bawah berindikator pil · daftar berkelompok · ikon akses cepat.
   Tidak ada gulir ke samping. Semua hiasan hanya latar (pointer-events:none) dan tidak mengurangi kontras teks. */

:root{--r:28px;--rs:20px;
  --shadow-sm:0 1px 2px rgba(20,50,35,.05),0 10px 28px rgba(20,50,35,.07)}

/* ---------- Hiasan latar per tema: pola bintang segi-8 + cahaya hijau ---------- */
[data-theme=putih]{
  --orn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88' fill='none' stroke='%230a7552' stroke-opacity='.13' stroke-width='1.2'%3E%3Crect x='16' y='16' width='56' height='56'/%3E%3Crect x='16' y='16' width='56' height='56' transform='rotate(45 44 44)'/%3E%3Ccircle cx='44' cy='44' r='13'/%3E%3Ccircle cx='44' cy='44' r='3' fill='%230a7552' fill-opacity='.12' stroke='none'/%3E%3C/svg%3E");
  --glow:radial-gradient(75% 40% at 108% -6%,rgba(10,117,82,.22),transparent 70%),radial-gradient(65% 36% at -10% 104%,rgba(196,154,48,.20),transparent 70%),radial-gradient(45% 26% at 104% 58%,rgba(10,117,82,.09),transparent 72%);
  --bg:#f3f6ee;--top:#f3f6ee}
[data-theme=hitam]{
  --orn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88' fill='none' stroke='%2334d399' stroke-opacity='.12' stroke-width='1.2'%3E%3Crect x='16' y='16' width='56' height='56'/%3E%3Crect x='16' y='16' width='56' height='56' transform='rotate(45 44 44)'/%3E%3Ccircle cx='44' cy='44' r='13'/%3E%3Ccircle cx='44' cy='44' r='3' fill='%2334d399' fill-opacity='.12' stroke='none'/%3E%3C/svg%3E");
  --glow:radial-gradient(75% 42% at 108% -6%,rgba(52,211,153,.24),transparent 70%),radial-gradient(65% 36% at -10% 104%,rgba(232,194,74,.12),transparent 70%),radial-gradient(45% 26% at 104% 58%,rgba(52,211,153,.10),transparent 72%);
  --bg:#080a09;--top:#080a09}
[data-theme=hijau]{
  --orn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88' fill='none' stroke='%23f3cf5a' stroke-opacity='.14' stroke-width='1.2'%3E%3Crect x='16' y='16' width='56' height='56'/%3E%3Crect x='16' y='16' width='56' height='56' transform='rotate(45 44 44)'/%3E%3Ccircle cx='44' cy='44' r='13'/%3E%3Ccircle cx='44' cy='44' r='3' fill='%23f3cf5a' fill-opacity='.14' stroke='none'/%3E%3C/svg%3E");
  --glow:radial-gradient(75% 42% at 108% -6%,rgba(70,200,150,.34),transparent 70%),radial-gradient(65% 36% at -10% 104%,rgba(243,207,90,.16),transparent 70%),radial-gradient(45% 26% at 104% 58%,rgba(70,200,150,.14),transparent 72%);
  --top:#083528}
body{position:relative;isolation:isolate}
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{background:var(--glow)}
body::after{background:var(--orn) 0 0/88px 88px;-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.45) 55%,rgba(0,0,0,.8) 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.45) 55%,rgba(0,0,0,.8) 100%)}
@media print{body::before,body::after{display:none}}

/* ---------- Bilah atas tembus pandang + judul besar yang menyusut saat digulir ---------- */
.top{background:var(--top);background:color-mix(in srgb,var(--top) 80%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top.big .ttl{opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s}
.top.big.scrolled .ttl{opacity:1;transform:none}
.bigttl{margin:1.1rem .15rem 1.2rem;font-size:2.15rem;font-weight:900;line-height:1.12;letter-spacing:-.02em;overflow-wrap:anywhere}
.iconbtn{border-radius:50%}
.iconbtn:active{background:var(--surface2)}

/* ---------- Bilah bawah: indikator pil di belakang ikon ---------- */
.bnav{border-radius:30px;background:var(--surface);background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:6px 4px}
.bnav a,[data-theme] .bnav a.on,.bnav a.on{background:transparent;color:var(--muted);gap:4px}
.bnav a{min-width:0}
.bnav a .pill{display:flex;align-items:center;justify-content:center;width:min(3.6rem,92%);height:2.15rem;border-radius:99px;transition:background .2s,transform .15s}
.bnav a:active .pill{transform:scale(.92)}
.bnav a.on,[data-theme] .bnav a.on{color:var(--text)}
.bnav a.on .pill{background:var(--primary-soft);color:var(--primary)}
.bnav a.on .ic{transform:none}
[data-theme=putih] .bnav a.on .pill{background:#cdeadb;color:#07583b}
[data-theme=hitam] .bnav a.on .pill{background:rgba(52,211,153,.22);color:#5eeab2}

/* ---------- Kartu & bentuk lebih lembut ---------- */
.card{border-radius:var(--r);border-color:color-mix(in srgb,var(--line) 70%,transparent)}
.item{border-radius:22px}
.btn{border-radius:999px}
.btn.sec{background:var(--surface)}
input,select,textarea{border-radius:20px;border-width:1.5px}
.sheet{border-radius:32px 32px 0 0}
.searchbar{border-radius:999px;padding-inline:1.3rem;border-width:1.5px;background:var(--surface)}
.badge{border-radius:99px}
.sect{margin:1.8rem .1rem .75rem}.sect h2{font-size:1.22rem;font-weight:900;letter-spacing:-.01em}

/* ---------- Ikon menu berwarna per fitur (warna dihitung di tiap ubin, bukan di akar) ---------- */
.mt,.qi{--tb:hsl(var(--h,160) 62% 91%);--tf:hsl(var(--h,160) 72% 24%)}
[data-theme=hijau] .mt,[data-theme=hitam] .mt,[data-theme=hijau] .qi,[data-theme=hitam] .qi{--tb:hsl(var(--h,160) 38% 26%);--tf:hsl(var(--h,160) 80% 82%)}

/* ---------- Daftar berkelompok (gaya Pengaturan Samsung) ---------- */
.mgrid.rows{display:block;padding:.15rem 0;overflow:hidden;background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.mgrid.rows .mt{min-height:76px;padding:.7rem 1rem;gap:.95rem;border:0;border-radius:0;box-shadow:none;background:transparent}
.mgrid.rows .mt+.mt{background:linear-gradient(var(--line),var(--line)) no-repeat 5.2rem 0/calc(100% - 6.2rem) 1px}
.mgrid.rows .mt .mi{width:3.2rem;height:3.2rem;border-radius:50%}
.mgrid.rows .mt .mi .ic{width:1.6rem;height:1.6rem}
.mgrid.rows .mt b{font-size:1.1rem}
.mgrid.rows .mt small{font-size:.9rem}
.mgrid.rows .mt::after{font-size:1.9rem;font-weight:300;margin-top:0}
.mgrid.rows .mt:active{background-color:var(--surface2);transform:none}
@media(min-width:760px){.mgrid.rows{grid-template-columns:none}}
/* ubin 2 kolom (mode lengkap): ikon bulat */
.mgrid:not(.rows) .mt{border-radius:var(--r);min-height:132px}
.mgrid:not(.rows) .mt .mi{border-radius:50%}

/* ---------- Akses cepat: ikon bulat + label di bawah (seperti layar utama HP) ---------- */
.qgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem .25rem;padding:1.1rem .5rem;margin:0 0 .4rem;background:var(--surface);
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.qi{display:flex;flex-direction:column;align-items:center;gap:.45rem;min-width:0;text-decoration:none;color:var(--text);padding:.1rem 0}
[data-theme] a.qi{color:var(--text)}
.qi-ic{width:3.6rem;height:3.6rem;border-radius:50%;background:var(--tb);color:var(--tf);display:flex;align-items:center;justify-content:center;transition:transform .15s}
.qi-ic .ic{width:1.85rem;height:1.85rem}
.qi:active .qi-ic{transform:scale(.9)}
.qi-tx{font-size:.84rem;font-weight:800;line-height:1.15;text-align:center;overflow-wrap:anywhere}
@media(max-width:339px){.qgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
html[data-fs=xl] .qgrid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- Kategori (chip) banyak → 2 kolom rapi, tidak memanjang ke bawah ---------- */
.chips:has(>.chip:nth-child(5)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.chips:has(>.chip:nth-child(5)) .chip{min-width:0;min-height:46px;padding:.35rem .7rem;font-size:.95rem;line-height:1.2;overflow-wrap:anywhere}
.dtabs .chips:has(>.chip:nth-child(5)){grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}

/* ---------- Kalender Hijriah: angka Hijriah besar, Masehi kecil ---------- */
.cal{gap:5px}
.cal .d{min-height:60px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:.2rem 0;text-align:center;line-height:1.05}
.cal .d b{font-size:1.28rem;font-weight:900}
.cal .d small{display:block;font-size:.66rem;font-weight:700;color:var(--muted);opacity:.95}
.cal .d.today{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.cal .d.today small,.cal .d.today b{color:var(--on-primary)}
.cal .d.sel{outline:3px solid var(--accent);outline-offset:1px}
.cal .d .pip{right:auto;left:50%;bottom:4px;margin-left:-3px;width:6px;height:6px}
html[data-fs=l] .cal .d small{display:block}
@media(max-width:380px){.cal .d{min-height:54px}.cal .d b{font-size:1.15rem}.cal .d small{display:block;font-size:.6rem}}
@media(max-width:339px){.cal{gap:3px}.cal .d b{font-size:1.05rem}.cal .d small{font-size:.56rem}}
.cal .d small{max-width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap}
html[data-fs=xl] .cal .d small{display:none}

/* ---------- Beranda ---------- */
.greet h1{font-size:1.9rem;font-weight:900;letter-spacing:-.02em}
.hero{border-radius:32px}
.aicard{border-radius:var(--r)}

/* ---------- Berita: foto kecil di daftar, tab 4 pilihan tetap muat ---------- */
.thumb{width:4rem;height:4rem;flex:0 0 4rem;object-fit:cover;border-radius:16px;background:var(--surface2)}
.tabs button{min-width:0;padding-inline:.2rem;font-size:.95rem;overflow-wrap:anywhere;line-height:1.15}
.news-cover{border-radius:20px}

/* Halaman tab (tanpa tombol kembali): judul tidak menempel ke tepi */
.top>.ttl:first-child{padding-left:.7rem}

/* Tabel di jawaban Kang NU */
.md-tbl{overflow-x:auto;margin:.6rem 0;-webkit-overflow-scrolling:touch}
.md table{border-collapse:collapse;width:100%;font-size:.95rem}
.md th,.md td{border:1px solid var(--line);padding:.45rem .6rem;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.md th{background:var(--surface2);font-weight:800}

.ai-stat{margin-left:.6rem;font-size:.9rem;color:var(--mut,#667);vertical-align:middle}