/* InfoKuliah.site — gaya aplikasi. Dimuat oleh index.html (app.css?v=BINAAN). */
/* ===================================================================
   InfoKuliah.site v3 — Langit Malam & Emas
   Mobile-first → tablet (720px) → desktop (1180px)
   =================================================================== */
:root{
  --bg:#D9E3DC; --surface:#FFFFFF; --surface-2:#E3E9E5; --surface-3:#F6F8F7;
  --ink:#0F1F19; --ink-2:#44564E; --ink-3:#6A7C74; --line:#D2DBD6;
  --emerald:#0A5A42; --emerald-2:#0D7354; --emerald-soft:#DBEEE5; --on-emerald:#FFFFFF;
  --gold:#C69A2D; --gold-ink:#7C5808; --gold-soft:#F6EBCB; --on-gold:#2B1F04;
  --night:#0A1712; --night-2:#11291F; --night-ink:#F3EBD3; --night-ink-2:#AFC2B7;
  --danger:#B3261E; --danger-soft:#FBE6E3;
  --info:#1C5B89; --info-soft:#E0EDF7;
  --plum:#6E2C6F; --plum-soft:#F3E3F2;
  --slate:#3E4E5C; --slate-soft:#E5EAEF;
  --shadow:0 1px 2px rgba(8,28,20,.05),0 10px 28px -16px rgba(8,28,20,.28);
  --r-xl:24px; --r-lg:18px; --r-md:12px; --r-sm:8px;
  --font:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-ar:"Amiri","Traditional Arabic","Scheherazade New",serif;
  --top-h:60px; --tab-h:68px;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
    --bg:#070F0C; --surface:#0E1A15; --surface-2:#15251E; --surface-3:#0B1611;
    --ink:#E7EFEA; --ink-2:#A6B8AF; --ink-3:#7F938A; --line:#21342B;
    --emerald:#3DBE8E; --emerald-2:#54D3A3; --emerald-soft:#10301F; --on-emerald:#04140D;
    --gold:#E2BA55; --gold-ink:#F0CF7A; --gold-soft:#2E2610; --on-gold:#1E1503;
    --danger:#F08A80; --danger-soft:#3A1512; --info:#7DB8E8; --info-soft:#10263A;
    --plum:#E0A3E0; --plum-soft:#301631; --slate:#B4C2CF; --slate-soft:#1B2530;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -16px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#070F0C; --surface:#0E1A15; --surface-2:#15251E; --surface-3:#0B1611;
  --ink:#E7EFEA; --ink-2:#A6B8AF; --ink-3:#7F938A; --line:#21342B;
  --emerald:#3DBE8E; --emerald-2:#54D3A3; --emerald-soft:#10301F; --on-emerald:#04140D;
  --gold:#E2BA55; --gold-ink:#F0CF7A; --gold-soft:#2E2610; --on-gold:#1E1503;
  --danger:#F08A80; --danger-soft:#3A1512; --info:#7DB8E8; --info-soft:#10263A;
  --plum:#E0A3E0; --plum-soft:#301631; --slate:#B4C2CF; --slate-soft:#1B2530;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--top-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 16px/1.5 var(--font);-webkit-font-smoothing:antialiased;min-height:100vh}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:10px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.i-sm{width:16px;height:16px}
.i-lg{width:24px;height:24px}
[aria-pressed="true"] .i-bm{fill:currentColor}
/* ---------- Kerangka ---------- */
.app{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh}
.rail{display:none}
.aside{display:none}
.main{min-width:0;padding-bottom:calc(var(--tab-h) + 28px + env(safe-area-inset-bottom,0px))}
.wrap{padding:0 16px;max-width:980px;margin:0 auto}
/* Bar atas */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.topbar-in{height:var(--top-h);display:flex;align-items:center;gap:10px;padding:0 12px 0 14px;max-width:980px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0;overflow:hidden;border:0;background:none;padding:0}
.brand-nama{font-weight:800;font-size:1.08rem;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.brand-nama small{font-weight:700;color:var(--gold-ink);font-size:.86em}
.brand-sub{display:block;font-size:.72rem;color:var(--ink-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-sp{flex:1}
.negeri-btn{flex-shrink:0;display:flex;align-items:center;gap:6px;height:40px;padding:0 10px 0 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface-3);font-weight:700;font-size:.86rem;max-width:46vw;min-width:0}
.negeri-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.negeri-btn .i{color:var(--emerald)}
.ibtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:inline-grid;place-items:center;color:var(--ink-2);flex:none;transition:background .15s,color .15s}
.ibtn:hover{background:var(--surface-2);color:var(--ink)}
.ibtn[aria-pressed="true"]{color:var(--gold-ink);background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
#btnKembali[hidden]{display:none}
.btn-kembali{flex:none;margin-right:-2px}
/* Bar tab bawah (mobile) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(5,1fr)}
.tab{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:56px;border-radius:14px;font-size:.7rem;font-weight:700;color:var(--ink-3);position:relative}
.tab .i{width:22px;height:22px}
.tab[aria-current="page"]{color:var(--emerald)}
.tab[aria-current="page"]::before{content:"";position:absolute;top:4px;width:44px;height:30px;border-radius:999px;background:var(--emerald-soft);z-index:-1}
.tab .dot[hidden]{display:none!important}
.tab .dot{position:absolute;top:6px;right:calc(50% - 18px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--danger);color:#fff;font-size:.62rem;display:grid;place-items:center;font-weight:800}
/* ---------- Butang ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-md);border:1px solid transparent;font-weight:750;font-size:.93rem;text-decoration:none;white-space:nowrap;transition:transform .12s,background .15s,box-shadow .15s}
.btn:active{transform:scale(.97)}
.btn-pri{background:var(--emerald);color:var(--on-emerald)}
.btn-pri:hover{background:var(--emerald-2)}
.btn-emas{background:linear-gradient(180deg,#F1D27A,#D6A836);color:#2B1F04;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px -8px rgba(198,154,45,.9)}
.btn-emas:hover{filter:brightness(1.04)}
.btn-garis{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-garis:hover{background:var(--surface-2)}
.btn-hantu{background:transparent;color:var(--ink-2)}
.btn-hantu:hover{background:var(--surface-2)}
.btn-bahaya{background:var(--danger-soft);color:var(--danger)}
.btn-wa{background:#128C4B;color:#fff}
.btn-sm{min-height:36px;padding:0 12px;font-size:.84rem;border-radius:10px}
.btn-blok{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}
/* ---------- Hero langit malam ---------- */
.hero{position:relative;margin:16px 0 0;border-radius:var(--r-xl);overflow:hidden;color:var(--night-ink);
  background:
    radial-gradient(120% 80% at 100% 0%,rgba(226,186,85,.22),transparent 55%),
    radial-gradient(90% 70% at 0% 100%,rgba(13,115,84,.45),transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23E2BA55' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M28 8l20 20-20 20L8 28z'/%3E%3Cpath d='M13.9 13.9h28.2v28.2H13.9z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg,var(--night-2),var(--night) 65%);
  box-shadow:0 18px 40px -24px rgba(5,20,14,.8)}
.hero h1{margin:12px 0 6px;font-size:clamp(1.7rem,7.2vw,2.6rem);line-height:1.08;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
.hero h1 .angka{display:inline-block;background:linear-gradient(180deg,#FCE7A6,#D9A93A);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-cta{display:flex;flex-wrap:wrap;gap:8px}
.hero .btn-garis{background:rgba(255,255,255,.07);border-color:rgba(243,235,211,.22);color:var(--night-ink)}
.hero .btn-garis:hover{background:rgba(255,255,255,.13)}
/* Trek waktu solat */
.trek{position:relative;margin-top:22px;padding:16px;border-radius:20px;color:#FFF7E0;background:linear-gradient(150deg,#0E5C40 0%,#083B2A 55%,#052418 100%);border:1.5px solid rgba(226,186,85,.65);box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.35),0 0 26px rgba(226,186,85,.22);overflow:hidden;isolation:isolate}
.trek::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px 190px at 88% -10%,rgba(252,231,166,.28),transparent 65%),radial-gradient(300px 160px at 4% 112%,rgba(226,186,85,.14),transparent 60%)}
.trek::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,244,200,.13) 48%,transparent 62%);background-size:280% 100%;animation:kilauSolat 5.5s ease-in-out infinite}
@keyframes kilauSolat{0%{background-position:130% 0}55%,100%{background-position:-60% 0}}
.trek-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.8rem;color:#D9EAD9;font-weight:700;margin-bottom:12px}
.trek-head .zon{flex:none;font-size:.68rem;font-weight:800;letter-spacing:.04em;color:#2A1E05;background:linear-gradient(180deg,#FCE7A6,#D9A93A);padding:4px 9px;border-radius:999px}
.trek-spot{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;background:rgba(0,0,0,.34);border:1px solid rgba(252,231,166,.35);margin-bottom:14px}
.trek-spot small{display:block;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#F2D27C}
.trek-spot .nama{font-size:1.55rem;font-weight:850;letter-spacing:-.02em;line-height:1.05;color:#FFF7E0}
.trek-spot .masa{margin-left:auto;text-align:right;font-size:1.55rem;font-weight:850;letter-spacing:-.02em;line-height:1.05;color:#FCE7A6;font-variant-numeric:tabular-nums;white-space:nowrap}
.trek-spot .masa small{letter-spacing:.02em;text-transform:none;font-size:.7rem;color:#D9EAD9}
.trek-kira{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.85rem;color:#2A1E05;background:linear-gradient(180deg,#FCE7A6,#D9A93A);padding:7px 13px;border-radius:999px;box-shadow:0 4px 14px rgba(217,169,58,.4)}
.trek-kira .denyut{width:9px;height:9px;border-radius:50%;background:#8A5A00;animation:denyutSolat 1.6s ease-out infinite}
@keyframes denyutSolat{0%{box-shadow:0 0 0 0 rgba(138,90,0,.55)}70%{box-shadow:0 0 0 8px rgba(138,90,0,0)}100%{box-shadow:0 0 0 0 rgba(138,90,0,0)}}
.trek-line{position:relative;z-index:1;height:6px;border-radius:6px;background:rgba(255,247,224,.18);margin:2px 10px 0}
.trek-fill{position:absolute;inset:0 auto 0 0;border-radius:6px;background:linear-gradient(90deg,#37B98A,#E2BA55);box-shadow:0 0 10px rgba(226,186,85,.55)}
.trek-now{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#FCE7A6;border:2px solid #8A5A00;animation:denyutSolat 1.6s ease-out infinite}
.trek-nodes{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:12px;text-align:center}
.trek-nodes div{font-size:.78rem;color:#D9EAD9;font-weight:700;padding:8px 2px 7px;border-radius:12px}
.trek-nodes strong{display:block;font-size:1.02rem;color:#FFF7E0;font-variant-numeric:tabular-nums;font-weight:800;margin-top:1px}
.trek-nodes .seterus{background:linear-gradient(180deg,#FCE7A6,#D9A93A);color:#5A3E00;box-shadow:0 6px 16px rgba(217,169,58,.45);animation:nafasSolat 2.4s ease-in-out infinite}
.trek-nodes .seterus strong{color:#2A1E05}
@keyframes nafasSolat{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.trek-sumber{position:relative;z-index:1;margin-top:10px;font-size:.76rem;color:#E4F0E4;text-align:right}
@media (prefers-reduced-motion:reduce){
.trek::after,.trek-kira .denyut,.trek-now,.trek-nodes .seterus{animation:none}
}
/* ---------- Seksyen ---------- */
.sek{margin-top:28px}
.sek-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:12px}
.sek-head h2{margin:0;font-size:1.22rem;letter-spacing:-.02em;font-weight:800}
.sek-head p{margin:2px 0 0;color:var(--ink-3);font-size:.86rem}
.pautan{border:0;background:none;color:var(--emerald);font-weight:750;font-size:.88rem;display:inline-flex;align-items:center;gap:2px;padding:6px 0;white-space:nowrap}
/* Musim (Ramadan/Maulid) */
.musim{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.musim-k{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);padding:14px;text-align:left;display:flex;flex-direction:column;gap:6px;min-width:0}
.musim-k .ik{width:38px;height:38px;border-radius:11px;display:grid;place-items:center}
.musim-k.ramadan .ik{background:var(--gold-soft);color:var(--gold-ink)}
.musim-k.maulid .ik{background:var(--emerald-soft);color:var(--emerald)}
.musim-k strong{font-size:1rem;letter-spacing:-.01em}
.musim-k .bil{font-size:clamp(1.15rem,5vw,1.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.musim-k small{color:var(--ink-3);font-size:.76rem;font-weight:600}
/* Penapis */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 16px 4px;margin:0 -16px;scroll-padding:0 16px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:.85rem;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chip .n{font-size:.72rem;color:var(--ink-3);font-weight:700}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip[aria-pressed="true"] .n{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.hari-strip{display:grid;grid-template-columns:repeat(8,minmax(64px,1fr));gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 16px 4px;margin:0 -16px}
.hari-strip::-webkit-scrollbar{display:none}
.hari{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:1px;position:relative}
.hari small{font-size:.68rem;color:var(--ink-3);font-weight:700}
.hari strong{font-size:.9rem;font-weight:800}
.hari.kini::after{content:"";position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.hari[aria-pressed="true"]{background:var(--emerald);border-color:var(--emerald);color:var(--on-emerald)}
.hari[aria-pressed="true"] small{color:color-mix(in srgb,var(--on-emerald) 75%,transparent)}
.cari{position:relative}
.cari .i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.cari input{width:100%;height:50px;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:0 44px 0 44px;font-size:1rem;font-weight:550}
.cari input:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px color-mix(in srgb,var(--emerald) 20%,transparent)}
.cari .x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:none;color:var(--ink-3);display:grid;place-items:center;border-radius:10px}
.penapis{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--top-h));z-index:20;background:var(--bg);padding:12px 0 10px;display:flex;flex-direction:column;gap:10px}
.penapis-baris{display:flex;gap:8px;align-items:center}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface-2);border-radius:12px;padding:3px;gap:3px;flex:1}
.seg button{border:0;background:none;height:36px;border-radius:9px;font-weight:750;font-size:.84rem;color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.hasil{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0 12px;font-size:.88rem;color:var(--ink-2);font-weight:650}
.kumpulan-hari{margin:22px 0 10px;display:flex;align-items:baseline;gap:10px}
.kumpulan-hari h3{margin:0;font-size:1.05rem;font-weight:800}
.kumpulan-hari span{color:var(--ink-3);font-size:.82rem;font-weight:650}
.kumpulan-hari .garis{flex:1;height:1px;background:var(--line)}
/* ---------- Kad kuliah ---------- */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.kad{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);min-width:0}
.kad-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.tags{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.tag{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:8px;font-size:.74rem;font-weight:750;background:var(--surface-2);color:var(--ink-2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tag-kini{background:var(--emerald);color:var(--on-emerald)}
@keyframes nadi{70%{box-shadow:0 0 0 7px rgba(124,243,192,0)}100%{box-shadow:0 0 0 0 rgba(124,243,192,0)}}
.tag-pending{background:var(--gold-soft);color:var(--gold-ink)}
.tag-ok{background:var(--emerald-soft);color:var(--emerald)}
.tag-tolak{background:var(--danger-soft);color:var(--danger)}
.tag-contoh{background:var(--slate-soft);color:var(--slate)}
.kad h3{margin:0;font-size:1.06rem;line-height:1.3;letter-spacing:-.015em;font-weight:800}
.kad-lok{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;background:var(--surface-3);border:1px solid var(--line)}
.kad-lok .ik{width:36px;height:36px;border-radius:10px;background:var(--emerald-soft);color:var(--emerald);display:grid;place-items:center;flex:none}
.kad-lok strong{display:block;font-size:.88rem;line-height:1.3}
.kad-lok span{display:block;font-size:.76rem;color:var(--ink-3);font-weight:600}
.aksi{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:2px}
.ab{border:0;background:none;border-radius:10px;min-height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.72rem;font-weight:750;color:var(--ink-2);text-decoration:none;transition:background .15s}
.ab:hover{background:var(--surface-2);color:var(--ink)}
.ab .i{width:21px;height:21px}
.ab.wa{color:#128C4B}
:root[data-theme="dark"] .ab.wa{color:#4ADE80}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .ab.wa{color:#4ADE80}
}
/* Kad acara */
.acara-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:min(82%,330px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 16px 6px;margin:0 -16px}
.acara-scroll::-webkit-scrollbar{display:none}
.acara-scroll>*{scroll-snap-align:start}
.tarikh-blok{width:58px;flex:none;border-radius:14px;padding:6px 0;text-align:center;background:var(--surface-2)}
.tarikh-blok strong{display:block;font-size:1.5rem;line-height:1;font-weight:800;letter-spacing:-.03em}
.tarikh-blok span{display:block;font-size:.7rem;font-weight:800;margin-top:3px;text-transform:uppercase;letter-spacing:.04em}
.j-maulid .tarikh-blok{background:var(--emerald-soft);color:var(--emerald)}
.j-ramadan .tarikh-blok{background:var(--gold-soft);color:var(--gold-ink)}
.j-pendakwah .tarikh-blok{background:var(--info-soft);color:var(--info)}
.j-ulama .tarikh-blok{background:var(--plum-soft);color:var(--plum)}
.j-daurah .tarikh-blok,.j-umum .tarikh-blok{background:var(--slate-soft);color:var(--slate)}
.tag-j{gap:5px}
.j-maulid .tag-j{background:var(--emerald-soft);color:var(--emerald)}
.j-ramadan .tag-j{background:var(--gold-soft);color:var(--gold-ink)}
.j-pendakwah .tag-j{background:var(--info-soft);color:var(--info)}
.j-ulama .tag-j{background:var(--plum-soft);color:var(--plum)}
.j-daurah .tag-j,.j-umum .tag-j{background:var(--slate-soft);color:var(--slate)}
/* Kosong / nota */
.kosong{text-align:center;padding:36px 20px;border:1.5px dashed var(--line);border-radius:var(--r-lg);color:var(--ink-2);background:var(--surface-3)}
.kosong>.i{width:34px;height:34px;color:var(--ink-3);margin:0 auto 10px;display:block}
.kosong h3{margin:0 0 6px;font-size:1.05rem;color:var(--ink)}
.kosong p{margin:0 auto 14px;max-width:40ch;font-size:.9rem}
.nota{display:flex;gap:10px;padding:12px 14px;border-radius:14px;background:var(--surface-3);border:1px solid var(--line);font-size:.82rem;color:var(--ink-2);line-height:1.55}
.nota .i{color:var(--gold-ink);margin-top:1px}
.nota-emas{background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 35%,transparent);color:var(--ink)}
/* CTA daftar */
.cta{border-radius:var(--r-xl);padding:20px 18px;background:linear-gradient(135deg,var(--emerald),#073F2F);color:#ECF8F2;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.cta h2{margin:0;font-size:1.25rem;letter-spacing:-.02em;font-weight:800;color:#fff}
.cta p{margin:0;font-size:.9rem;color:#BFE3D2;max-width:48ch}
.cta .btn-garis{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}
.cta-row{display:flex;gap:8px;flex-wrap:wrap}
.kaki{margin-top:34px;padding:22px 0 8px;border-top:1px solid var(--line);color:var(--ink-3);font-size:.8rem;line-height:1.6}
.kaki .ar{font-family:var(--font-ar);font-size:1.45rem;color:var(--gold-ink);direction:rtl;margin:0 0 2px;line-height:1.6}
.kaki p{margin:0 0 10px;max-width:70ch}
/* ---------- Senarai (panel) ---------- */
.kotak{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.kotak-pad{padding:16px}
.panel-head{display:flex;align-items:center;gap:12px;margin:18px 0 12px}
.panel-head .av{width:46px;height:46px;border-radius:14px;background:var(--emerald-soft);color:var(--emerald);display:grid;place-items:center;font-weight:800;flex:none}
.panel-head h1{margin:0;font-size:1.25rem;letter-spacing:-.02em;font-weight:800;line-height:1.2}
.panel-head p{margin:2px 0 0;color:var(--ink-3);font-size:.84rem;font-weight:600}
.stat{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stat>div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px}
.stat strong{display:block;font-size:1.6rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{font-size:.8rem;color:var(--ink-3);font-weight:650}
.stat .amaran strong{color:var(--gold-ink)}
.baris-list{display:flex;flex-direction:column}
.baris{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid var(--line)}
.baris:first-child{border-top:0}
.baris strong{display:block;font-size:.92rem;line-height:1.3}
.baris small{display:block;color:var(--ink-3);font-size:.78rem;font-weight:600;margin-top:2px}
.baris .tags{margin-top:6px}
.baris-aksi{display:flex;gap:6px}
.bar-negeri{display:grid;grid-template-columns:120px 1fr 34px;gap:10px;align-items:center;font-size:.82rem;font-weight:650;padding:5px 0}
.bar-negeri .bar{height:8px;border-radius:8px;background:var(--surface-2);overflow:hidden}
.bar-negeri .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--emerald),var(--gold));border-radius:8px}
.langkah{counter-reset:l;display:grid;gap:10px;margin:0;padding:0;list-style:none}
.langkah li{counter-increment:l;display:grid;grid-template-columns:30px 1fr;gap:10px;font-size:.88rem;color:var(--ink-2)}
.langkah li::before{content:counter(l);width:30px;height:30px;border-radius:50%;background:var(--emerald-soft);color:var(--emerald);display:grid;place-items:center;font-weight:800;font-size:.85rem}
.langkah b{color:var(--ink)}
.dropzon{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 14px;border:2px dashed var(--line);border-radius:16px;text-align:center;cursor:pointer;background:var(--surface-3);color:var(--ink-2);font-size:.88rem;font-weight:650}
.dropzon.atas{border-color:var(--emerald);background:var(--emerald-soft)}
.dropzon .i{width:30px;height:30px;color:var(--emerald)}
.jadual-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;max-height:340px}
table.jd{border-collapse:collapse;width:100%;font-size:.78rem;min-width:640px}
.jd th,.jd td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.jd th{position:sticky;top:0;background:var(--surface-2);font-weight:800;z-index:1}
.jd tr.salah td{background:var(--danger-soft)}
.jd .ralat{color:var(--danger);font-weight:700}
/* ---------- Borang ---------- */
.medan{display:flex;flex-direction:column;gap:5px}
.medan label,.medan .lbl{font-size:.8rem;font-weight:750;color:var(--ink-2)}
.medan small{font-size:.74rem;color:var(--ink-3)}
.inp{width:100%;min-height:46px;border-radius:12px;border:1px solid var(--line);background:var(--surface-3);padding:10px 12px;font-size:16px;font-weight:550}
textarea.inp{min-height:96px;resize:vertical;line-height:1.5}
.inp:focus{outline:none;border-color:var(--emerald);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--emerald) 18%,transparent)}
.borang{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.borang>*{min-width:0}
.dua{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
@media (max-width:420px){
.dua{grid-template-columns:minmax(0,1fr)}
}
.ralat-borang{color:var(--danger);font-size:.85rem;font-weight:700;min-height:1px}
.cek{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:var(--ink-2)}
.cek input{width:20px;height:20px;margin-top:1px;accent-color:var(--emerald)}
/* ---------- Menu burger & Perpustakaan ---------- */
.buku-kad{display:flex;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);margin-bottom:10px}
.buku-kad .bk-ik{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(150deg,#0E5C40,#052418);color:#F2D27C;border:1px solid rgba(226,186,85,.5)}
.buku-kad h3{margin:0 0 2px;font-size:1rem;letter-spacing:-.01em}
.buku-kad .pen{color:var(--ink-3);font-size:.8rem;font-weight:650;margin-bottom:6px}
.buku-kad p{margin:0 0 10px;font-size:.85rem;color:var(--ink-2)}
.buku-kad .bk-bawah{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.buku-menu{display:grid;gap:10px;margin-bottom:16px}
.buku-tema{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink)}
.buku-tema .bt-ik{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(150deg,#0E5C40,#052418);color:#F2D27C;border:1px solid rgba(226,186,85,.5)}
.buku-tema b{display:block;font-size:1.02rem}
.buku-tema small{display:block;color:var(--ink-3);font-size:.8rem;font-weight:600}
.buku-tema .bt-bil{margin-left:auto;flex:none;font-size:.76rem;font-weight:800;color:var(--gold-ink);background:var(--gold-soft);padding:5px 10px;border-radius:999px}
.buku-tema .i-kanan{color:var(--ink-3);flex:none}
.tag-guru{background:#FDECEC;color:#9B1C1C;font-weight:800}
/* ---------- Dialog / helaian ---------- */
dialog.helai{border:0;padding:0;margin:auto 0 0;width:100%;max-width:100%;max-height:92vh;border-radius:24px 24px 0 0;background:var(--surface);color:var(--ink);box-shadow:0 -10px 40px rgba(0,0,0,.25)}
dialog.helai::backdrop{background:rgba(3,10,7,.55);backdrop-filter:blur(3px)}
dialog.helai[open]{animation:naik .26s cubic-bezier(.2,.8,.2,1)}
@keyframes naik{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.helai-in{display:flex;flex-direction:column;max-height:92vh}
.helai-head{display:flex;align-items:center;gap:10px;padding:16px 16px 10px;border-bottom:1px solid var(--line)}
.helai-head h2{margin:0;font-size:1.12rem;font-weight:800;letter-spacing:-.02em;flex:1}
.helai-body{padding:16px;overflow-y:auto;overflow-x:hidden;min-width:0;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.helai-kaki{display:flex;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--surface)}
.helai-kaki .btn{flex:1}
.negeri-list{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.negeri-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);text-align:left}
.negeri-row[aria-pressed="true"]{border-color:var(--emerald);background:var(--emerald-soft)}
.negeri-row .sg{width:40px;height:40px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;font-size:.74rem;font-weight:800;color:var(--ink-2);flex:none}
.negeri-row strong{display:block;font-size:.92rem}
.negeri-row small{display:block;font-size:.76rem;color:var(--ink-3);font-weight:600}
.negeri-row .bil{margin-left:auto;font-size:.76rem;font-weight:800;color:var(--emerald);white-space:nowrap}
/* ---------- Toast & sepanduk ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 22px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:90;background:#0E1A15;color:#F3EBD3;padding:12px 16px;border-radius:14px;font-size:.88rem;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.35);transition:.25s;max-width:calc(100% - 32px);display:flex;gap:8px;align-items:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast .i{color:#7CF3C0}
.sepanduk{position:fixed;left:12px;right:12px;bottom:calc(var(--tab-h) + 14px + env(safe-area-inset-bottom,0px));z-index:80;background:#0B1813;color:#F3EBD3;border:1px solid rgba(226,186,85,.45);border-radius:18px;padding:12px;display:none;gap:12px;align-items:center;box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
.sepanduk.on{display:flex;animation:naik .3s ease}
.sepanduk img{width:44px;height:44px;border-radius:12px;flex:none}
.sepanduk .tx{flex:1;min-width:0}
.sepanduk strong{display:block;font-size:.95rem}
.sepanduk span{display:block;font-size:.78rem;color:#B5C7BC}
.sepanduk .btn{min-height:40px}
.sepanduk .x{border:0;background:none;color:#8FA399;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;flex:none}
.sepanduk.update{border-color:#E2BA55;box-shadow:0 0 0 2px rgba(226,186,85,.35),0 18px 44px -10px rgba(0,0,0,.7)}
.titik-update{width:11px;height:11px;border-radius:50%;background:#E2BA55;flex:none;animation:denyut 1.1s ease-in-out infinite}
@keyframes denyut{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.55}}
.nota-borang{font-size:.8rem;color:var(--ink-3);margin:4px 0 0}
.demo-bar{display:flex;gap:8px;align-items:center;padding:8px 12px;margin:12px 0 0;border-radius:12px;background:var(--gold-soft);color:var(--ink);font-size:.78rem;font-weight:650}
.demo-bar .i{color:var(--gold-ink)}
.view{display:none}
.view.on{display:block}
/* ===================== TABLET ≥ 720px ===================== */
@media (min-width:720px){
:root{--top-h:68px}
.app{grid-template-columns:84px minmax(0,1fr)}
.tabbar{display:none}
.main{padding-bottom:40px}
.toast{bottom:28px}
.sepanduk{left:auto;right:24px;bottom:24px;max-width:420px}
.rail .brand-r{display:contents}
.rail .brand-r .nm{display:none}
.rail{display:flex;flex-direction:column;align-items:center;gap:6px;position:sticky;top:env(safe-area-inset-top,0px);height:100vh;padding:14px 10px;border-right:1px solid var(--line);background:var(--surface)}
.rail .brand-ikon{width:44px;height:44px;margin-bottom:14px}
.rail .tab{width:64px;height:62px}
.rail .tab::before{top:6px}
.rail .tab .dot[hidden]{display:none!important}
.tab .dot{right:8px}
.rail-sp{flex:1}
.topbar .brand{display:none}
.topbar-tajuk{display:block!important;font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.wrap,.topbar-in{padding-left:28px;padding-right:28px}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat{grid-template-columns:repeat(4,1fr)}
.chips,.hari-strip,.acara-scroll{margin:0;padding-left:0;padding-right:0}
.acara-scroll{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
dialog.helai{margin:auto;max-width:580px;border-radius:24px;max-height:86vh}
dialog.helai.lebar{max-width:880px}
.helai-in{max-height:86vh}
.helai-kaki{border-radius:0 0 24px 24px}
}
.topbar-tajuk{display:none}
/* ===================== DESKTOP ≥ 1180px ===================== */
@media (min-width:1180px){
.app{grid-template-columns:236px minmax(0,1fr) 340px}
.rail{align-items:stretch;padding:18px 14px}
.rail .brand-r{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding:0 6px;text-align:left}
.rail .brand-r .nm{display:block;min-width:0}
.rail .brand-r .brand-ikon{margin:0}
.rail .tab{width:100%;height:48px;flex-direction:row;justify-content:flex-start;gap:12px;padding:0 14px;font-size:.92rem}
.rail .tab::before{top:0;left:0;width:100%;height:100%;border-radius:12px}
.rail .tab .dot[hidden]{display:none!important}
.tab .dot{position:static;margin-left:auto}
.rail .tab .lbl-r{display:inline}
.aside{display:flex;flex-direction:column;gap:14px;position:sticky;top:env(safe-area-inset-top,0px);height:100vh;overflow-y:auto;padding:20px 20px 30px 0}
.acara-scroll{grid-template-columns:repeat(2,minmax(0,1fr))}
.solat-hero-only{display:none}
}
.lbl-r{display:inline}
@media (min-width:720px) and (max-width:1179px){
.rail .tab .lbl-r{font-size:.66rem}
}
/* Aside desktop */
.solat-mini{border-radius:var(--r-lg);padding:16px;color:#FFF7E0;background:linear-gradient(150deg,#0E5C40,#052418);border:1.5px solid rgba(226,186,85,.65);box-shadow:0 12px 28px rgba(0,0,0,.35),0 0 22px rgba(226,186,85,.18)}
.solat-mini h3{margin:0 0 4px;font-size:.95rem;font-weight:800}
.solat-mini .sub{font-size:.84rem;color:#C9DECF;margin-bottom:12px}
.solat-mini ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.solat-mini li{display:flex;justify-content:space-between;padding:7px 10px;border-radius:10px;font-weight:650;font-size:.9rem}
.solat-mini li b{font-variant-numeric:tabular-nums}
.solat-mini li.seterus{background:linear-gradient(180deg,#FCE7A6,#D9A93A);color:#2A1E05;font-weight:800;box-shadow:0 6px 16px rgba(217,169,58,.4);animation:nafasSolat 2.4s ease-in-out infinite}
.solat-mini li.seterus b{color:#2A1E05}
@media (max-width:460px){
.topbar .brand-sub{display:none}
}
@media (max-width:370px){
.brand-sub{display:none}
.aksi .ab{font-size:.66rem}
.musim{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* =====================================================================
   v3.1 — Kemaskan & hidupkan
   ===================================================================== */
.topbar .brand{max-width:72%;gap:9px}
.brand-ikon{width:38px;height:38px;border-radius:12px;background:#0A1712;padding:4px;box-shadow:0 0 0 1px rgba(226,186,85,.55),0 6px 16px -6px rgba(226,186,85,.55);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand-ikon{transform:rotate(-4deg) scale(1.05)}
.brand-tajuk{min-width:0;display:flex;flex-direction:column}
.brand-nama{background:linear-gradient(180deg,#FCE7A6,#D9A93A);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.12rem}
.brand-nama small{background:none;-webkit-text-fill-color:var(--ink-3);color:var(--ink-3);font-size:.78em}
/* Butang berkilau: kilauan emas bergerak sekali setiap beberapa saat */
.btn-emas,.btn-pri,.btn-wa{position:relative;overflow:hidden;isolation:isolate}
.btn-emas::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:kilau 3.8s ease-in-out infinite;z-index:-1}
.btn-pri::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%);animation:kilau 4.6s ease-in-out infinite;z-index:-1}
@keyframes kilau{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.btn-emas{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 22px -10px rgba(214,168,54,.95),0 0 0 1px rgba(255,236,170,.4)}
/* Hero: cahaya emas lembut di belakang */
.hero::before{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(242,210,124,.28),transparent 62%);animation:denyut 6s ease-in-out infinite;pointer-events:none}
@keyframes denyut{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.08);opacity:1}}
.hero h1{text-shadow:0 2px 24px rgba(0,0,0,.35)}
/* Muncul sekali: hanya hero dan kad pertama */
@keyframes naik-muncul{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero{animation:naik-muncul .7s cubic-bezier(.2,.8,.2,1) both}
.sek:first-of-type{animation:naik-muncul .7s .12s cubic-bezier(.2,.8,.2,1) both}
/* Kad: sentuhan halus pada peranti yang ada kursor */
.kad,.musim-k{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
@media (hover:hover){
.kad:hover{transform:translateY(-3px);box-shadow:0 18px 36px -20px rgba(8,28,20,.45);border-color:color-mix(in srgb,var(--emerald) 35%,var(--line))}
.musim-k:hover{transform:translateY(-2px);border-color:var(--gold)}
}
.kad h3{letter-spacing:-.02em}
.kad .aksi .ab{border-radius:12px}
.ibtn:hover{transform:translateY(-1px)}
.ibtn{transition:transform .15s,background .15s,color .15s}
/* Tab bawah: penunjuk aktif bercahaya */
.tab[aria-current="page"] .i{filter:drop-shadow(0 0 6px rgba(61,190,142,.5))}
.tab-admin{color:var(--gold-ink)}
.tab-admin[aria-current="page"]{color:var(--gold-ink)}
.tab-admin[aria-current="page"]::before{background:var(--gold-soft)}
.tab-admin[aria-current="page"] .i{filter:drop-shadow(0 0 6px rgba(226,186,85,.6))}
/* Kepala panel */
.panel-kepala,.pusat-kepala{display:flex;align-items:center;gap:14px;margin:18px 0 14px;padding:16px 18px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.panel-kepala h1,.pusat-kepala h1{margin:2px 0 0;font-size:1.22rem;letter-spacing:-.02em;font-weight:800;line-height:1.2}
.panel-kepala p,.pusat-kepala p{margin:2px 0 0;color:var(--ink-3);font-size:.84rem;font-weight:600}
.panel-kepala small,.pusat-kepala small{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;font-weight:800;color:var(--ink-3)}
.pk-ikon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex:none;background:var(--emerald-soft);color:var(--emerald)}
.pusat-kepala{position:relative;overflow:hidden;color:#FBF3D9;border:1px solid rgba(226,186,85,.45);background:radial-gradient(120% 140% at 100% 0%,rgba(226,186,85,.28),transparent 55%),linear-gradient(150deg,#14241C,#070F0C)}
.pusat-kepala::after{content:"";position:absolute;inset:-40% -20%;background:linear-gradient(115deg,transparent 42%,rgba(255,236,170,.10) 50%,transparent 58%);animation:kilau 7s ease-in-out infinite;pointer-events:none}
.pusat-kepala small{color:#E9CB72}
.pusat-kepala p{color:#B9CCC1}
.pusat-kepala .pk-ikon{background:linear-gradient(160deg,#F7DF8E,#C99A2C);color:#2B1F04;box-shadow:0 8px 20px -8px rgba(226,186,85,.9)}
/* Statistik admin & masjid */
.pusat-stat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pusat-stat>div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;position:relative;overflow:hidden}
.pusat-stat strong{display:block;font-size:1.6rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.pusat-stat span{font-size:.78rem;color:var(--ink-3);font-weight:650}
.pusat-stat .perhatian{border-color:color-mix(in srgb,var(--gold) 55%,transparent);background:linear-gradient(160deg,var(--gold-soft),var(--surface))}
.pusat-stat .perhatian strong{color:var(--gold-ink)}
@media (min-width:720px){
.pusat-stat{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.masjid-stat{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){
.masjid-stat{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Tab admin & chip */
.video-pemain{position:relative;border-radius:18px;overflow:hidden;background:#000;border:1px solid rgba(198,154,45,.45);aspect-ratio:16/9;margin-bottom:12px}
.video-pemain iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-fasad{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;font-family:inherit}
.video-fasad img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.video-main{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;background:#C62828;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.5);pointer-events:none}
.video-main svg{width:30px;height:30px;margin-left:3px}
.video-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){
.video-grid{grid-template-columns:1fr 1fr}
}
.kad-video{display:flex;gap:12px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px;cursor:pointer;font-family:inherit;align-items:flex-start}
.kad-video img{width:118px;height:66px;object-fit:cover;border-radius:10px;flex:none;background:#0A1712}
.klip-rail{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.kad-klip{flex:0 0 148px;scroll-snap-align:start;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px;cursor:pointer;font-family:inherit;color:inherit}
.kad-klip img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:11px;display:block;background:#0A1712;margin-bottom:8px}
.kad-klip b{font-size:.8rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kad-klip span{display:block;margin-top:5px;color:var(--ink-2);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#klipFeed{position:fixed;inset:0;z-index:300;background:#000;display:none}
#klipFeed.on{display:block}
.klip-skrin{height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch}
.klip-slide{height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:flex;align-items:center;justify-content:center;background:#000}
.klip-bingkai{position:relative;width:min(100vw,56.25dvh);height:min(177.8vw,100dvh);background:#000}
.klip-bingkai iframe,.klip-bingkai .video-fasad{position:absolute;inset:0;width:100%;height:100%;border:0}
.klip-bingkai .video-fasad img{width:100%;height:100%;object-fit:cover}
.klip-info{position:absolute;left:14px;right:76px;bottom:20px;color:#fff;z-index:3;text-shadow:0 1px 8px rgba(0,0,0,.7);pointer-events:none}
.klip-info b{display:block;font-size:.98rem;line-height:1.4;margin-bottom:6px}
.klip-info span{display:flex;align-items:center;gap:7px;font-size:.85rem;color:#E8E8E8}
.klip-tepi{position:absolute;right:10px;bottom:88px;display:flex;flex-direction:column;gap:14px;z-index:3}
.klip-tepi button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(20,20,20,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px)}
.klip-tepi small{color:#fff;font-size:.62rem;text-align:center;display:block;margin-top:3px;text-shadow:0 1px 4px #000}
.klip-atas{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:14px;z-index:4;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent)}
.klip-atas b{font-size:1rem}
.klip-atas .ibtn{margin-left:auto;color:#fff;background:rgba(20,20,20,.5);border:1px solid rgba(255,255,255,.3)}
.klip-bingkai .video-main{pointer-events:none}
.kad-video.dah-tonton img{filter:grayscale(.35) brightness(.82)}
.tag-tonton{position:absolute;top:8px;left:8px;background:rgba(10,23,18,.85);color:#E9C767;font-size:.66rem;font-weight:800;padding:3px 8px;border-radius:999px;letter-spacing:.02em}
.kad-video{position:relative}
.kv-gambar{position:relative;flex:none;display:block}
.bar-sambung{position:absolute;left:4px;right:4px;bottom:4px;height:5px;border-radius:99px;background:rgba(255,255,255,.45);overflow:hidden}
.bar-sambung i{display:block;height:100%;background:#E9C767;border-radius:99px}
.v-sambung{display:block;margin-top:4px;color:var(--gold-ink);font-size:.76rem;font-weight:750}
.kv-aksi{display:flex;flex-direction:column;gap:6px;flex:none}
#pemainYt{position:absolute;inset:0;width:100%;height:100%;background:#000}
.notis-sambung{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kv-main{display:flex;gap:12px;flex:1;min-width:0;text-align:left;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;align-items:flex-start;color:inherit}
.kad-video b{font-size:.92rem;line-height:1.35;display:block}
.kad-video .v-meta{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--ink-2);font-size:.8rem}
.kad-tindakan{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 4px}
.kt{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;background:linear-gradient(150deg,var(--night-2),var(--night));color:var(--night-ink);border:1px solid rgba(198,154,45,.45);border-radius:16px;padding:13px 14px;cursor:pointer;font-family:inherit;min-height:88px}
.kt strong{font-size:.95rem;line-height:1.25}
.kt span{font-size:.76rem;color:var(--night-ink-2);line-height:1.35}
.kt .lencana{background:#C62828;color:#fff;border-radius:999px;padding:0 7px;font-size:.72rem;font-weight:800;margin-left:6px;vertical-align:2px}
.kt:active{transform:scale(.98)}
.panel-terang{margin:0 0 14px;color:var(--ink-2);font-size:.88rem}
.pusat-tab .chip{transition:transform .15s}
.pusat-tab .chip:active{transform:scale(.96)}
.lencana{min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:var(--gold);color:#2B1F04;font-size:.7rem;font-weight:800;margin-left:2px}
.chip .n,.seg .n{font-size:.72rem;font-weight:800;margin-left:4px;opacity:.7}
.seg button .n{color:inherit}
/* Kad masjid */
.kad-masjid{grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){
.kad-masjid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.kad-masjid-item.menunggu{border-color:color-mix(in srgb,var(--gold) 55%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 12%,transparent),var(--shadow)}
.maklumat{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.maklumat div{min-width:0}
.maklumat dt{font-size:.7rem;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.maklumat dd{margin:1px 0 0;font-size:.88rem;font-weight:650;overflow-wrap:anywhere}
.maklumat a{color:var(--emerald)}
.aksi-masjid{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.nota-bahaya{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 35%,transparent);color:var(--ink)}
.nota-bahaya .i{color:var(--danger)}
.tag-tolak .i{width:12px;height:12px}
/* Header telefon: tajuk tak dipotong */
@media (max-width:440px){
.topbar .brand{max-width:58%;gap:7px}
.brand-nama{font-size:1rem}
.brand-sub{display:none}
.negeri-btn{max-width:34vw;padding:0 8px}
.brand-ikon{width:34px;height:34px}
}
/* =====================================================================
   v3.2 — Latar bersih, animasi kad & teks
   ===================================================================== */
body{background:
  radial-gradient(900px 420px at 85% -10%,rgba(198,154,45,.09),transparent 60%),
  radial-gradient(700px 380px at -10% 0%,rgba(10,90,66,.08),transparent 60%),
  var(--bg)}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) body{background:
  radial-gradient(900px 420px at 85% -10%,rgba(226,186,85,.07),transparent 60%),
  radial-gradient(700px 380px at -10% 0%,rgba(61,190,142,.06),transparent 60%),
  var(--bg)}
}
:root[data-theme="dark"] body{background:
  radial-gradient(900px 420px at 85% -10%,rgba(226,186,85,.07),transparent 60%),
  radial-gradient(700px 380px at -10% 0%,rgba(61,190,142,.06),transparent 60%),
  var(--bg)}
/* Teks: tajuk seksyen muncul perlahan */
@keyframes teks-muncul{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.sek-head h2,.panel-kepala h1,.pusat-kepala h1{animation:teks-muncul .6s cubic-bezier(.2,.8,.2,1) both}
.sek-head p,.panel-kepala p,.pusat-kepala p{animation:teks-muncul .6s .08s cubic-bezier(.2,.8,.2,1) both}
.hero h1{animation:teks-muncul .8s .15s cubic-bezier(.2,.8,.2,1) both}
.hero-cta{animation:teks-muncul .8s .42s cubic-bezier(.2,.8,.2,1) both}
.trek{animation:teks-muncul .8s .52s cubic-bezier(.2,.8,.2,1) both}
/* Kad: bertingkat masuk, satu demi satu */
@keyframes kad-masuk{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.grid>.kad,.grid>.kad-masjid-item,.musim>.musim-k,.stat>div,.pusat-stat>div,.kotak{animation:kad-masuk .55s cubic-bezier(.2,.8,.2,1) both}
.grid>:nth-child(1),.acara-scroll>:nth-child(1),.musim>:nth-child(1),.pusat-stat>:nth-child(1){animation-delay:.05s}
.grid>:nth-child(2),.acara-scroll>:nth-child(2),.musim>:nth-child(2),.pusat-stat>:nth-child(2){animation-delay:.12s}
.grid>:nth-child(3),.acara-scroll>:nth-child(3),.pusat-stat>:nth-child(3){animation-delay:.19s}
.grid>:nth-child(4),.acara-scroll>:nth-child(4),.pusat-stat>:nth-child(4){animation-delay:.26s}
.grid>:nth-child(n+5){animation-delay:.32s}
/* Kad lebih kemas */
.kad{background:linear-gradient(180deg,var(--surface),var(--surface))}
.kad h3{font-weight:800;letter-spacing:-.02em}
.kad-lok{transition:background .2s}
.kad:hover .kad-lok{background:var(--surface-2)}
.sek-head h2{font-size:1.28rem;position:relative;padding-left:12px}
.sek-head h2::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--gold),var(--emerald))}
/* Penanda aktif tab bawah bergerak lancar */
.tab{transition:color .25s}
.tab::before{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){
.sek-head h2,.sek-head p,.hero h1,.hero-cta,.trek,.grid>*,.acara-scroll>*,.musim>*,.pusat-stat>*,.stat>*,.kotak,.hero,.panel-kepala h1,.pusat-kepala h1{animation:none!important}
}
/* v3.3 — Hero & header dipusatkan */
.hero h1{margin-left:auto;margin-right:auto;text-align:center}
.hero-cta{justify-content:center}
.hero .trek{width:100%}
.topbar .brand{align-items:center}
.brand-tajuk{justify-content:center;text-align:left}
/* =====================================================================
   v3.4 — Kad Ramadan & Maulidur Rasul berseni
   ===================================================================== */
:root{--art-ramadan:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNjAgMTYwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWF4WU1heCBzbGljZSI+PHN0eWxlPgoudHd7YW5pbWF0aW9uOnR3IDMuMnMgZWFzZS1pbi1vdXQgaW5maW5pdGV9LnR3MnthbmltYXRpb246dHcgNC40cyBlYXNlLWluLW91dCBpbmZpbml0ZSAuOHN9LnR3M3thbmltYXRpb246dHcgNS4xcyBlYXNlLWluLW91dCBpbmZpbml0ZSAxLjZzfQpAa2V5ZnJhbWVzIHR3ezAlLDEwMCV7b3BhY2l0eTouMjV9NTAle29wYWNpdHk6MX19CkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjpyZWR1Y2Upey50dywudHcyLC50dzMsLnB1bHNlLC5zdywucmF5c3thbmltYXRpb246bm9uZSFpbXBvcnRhbnR9fQoucHVsc2V7YW5pbWF0aW9uOnBsIDVzIGVhc2UtaW4tb3V0IGluZmluaXRlO3RyYW5zZm9ybS1ib3g6ZmlsbC1ib3g7dHJhbnNmb3JtLW9yaWdpbjo1MCUgNTAlfQpAa2V5ZnJhbWVzIHBsezAlLDEwMCV7b3BhY2l0eTouNjU7dHJhbnNmb3JtOnNjYWxlKDEpfTUwJXtvcGFjaXR5OjE7dHJhbnNmb3JtOnNjYWxlKDEuMTQpfX0KLnN3e2FuaW1hdGlvbjpzdyA0LjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO3RyYW5zZm9ybS1ib3g6ZmlsbC1ib3g7dHJhbnNmb3JtLW9yaWdpbjo1MCUgMH0KQGtleWZyYW1lcyBzd3swJSwxMDAle3RyYW5zZm9ybTpyb3RhdGUoLTRkZWcpfTUwJXt0cmFuc2Zvcm06cm90YXRlKDRkZWcpfX0KLnJheXN7YW5pbWF0aW9uOnNwIDEyMHMgbGluZWFyIGluZmluaXRlO3RyYW5zZm9ybS1ib3g6dmlldy1ib3g7dHJhbnNmb3JtLW9yaWdpbjoyODBweCA4NnB4fQpAa2V5ZnJhbWVzIHNwe3Rve3RyYW5zZm9ybTpyb3RhdGUoMzYwZGVnKX19Cjwvc3R5bGU+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJza3kiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMwNTBFMjgiLz48c3RvcCBvZmZzZXQ9Ii41IiBzdG9wLWNvbG9yPSIjMEIyQTU3Ii8+PHN0b3Agb2Zmc2V0PSIuODIiIHN0b3AtY29sb3I9IiMwQzNCNDUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwQTJFMjciLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iZ29sZCIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI0ZGRjBCMCIvPjxzdG9wIG9mZnNldD0iLjUiIHN0b3AtY29sb3I9IiNFOEJDNEMiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNCODg1MUYiLz48L2xpbmVhckdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iZ2xvdyI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjRjZENjZFIiBzdG9wLW9wYWNpdHk9Ii41Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRjZENjZFIiBzdG9wLW9wYWNpdHk9IjAiLz48L3JhZGlhbEdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iaHoiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNGNkM4NUEiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0Y2Qzg1QSIgc3RvcC1vcGFjaXR5PSIuMzQiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0ibHMiIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMwMjA4MTQiIHN0b3Atb3BhY2l0eT0iLjcyIi8+PHN0b3Agb2Zmc2V0PSIuNjIiIHN0b3AtY29sb3I9IiMwMjA4MTQiIHN0b3Atb3BhY2l0eT0iMCIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdHRlcm4gaWQ9InB0IiB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGQ9Ik0xOCAybDE2IDE2LTE2IDE2TDIgMTh6IE04IDhoMjB2MjBIOHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0UyQkE1NSIgc3Ryb2tlLW9wYWNpdHk9Ii4wOSIvPjwvcGF0dGVybj48bWFzayBpZD0ibWMiPjxyZWN0IHdpZHRoPSIzNjAiIGhlaWdodD0iMTYwIiBmaWxsPSIjMDAwIi8+PGNpcmNsZSBjeD0iMjcwIiBjeT0iNDYiIHI9IjMwIiBmaWxsPSIjZmZmIi8+PGNpcmNsZSBjeD0iMjgxIiBjeT0iNDYiIHI9IjI1IiBmaWxsPSIjMDAwIi8+PC9tYXNrPjwvZGVmcz48cmVjdCB3aWR0aD0iMzYwIiBoZWlnaHQ9IjE2MCIgZmlsbD0idXJsKCNza3kpIi8+PHJlY3Qgd2lkdGg9IjM2MCIgaGVpZ2h0PSIxMTAiIGZpbGw9InVybCgjcHQpIi8+PGNpcmNsZSBjbGFzcz0idHciIGN4PSIyMjcuNyIgY3k9IjU0LjEiIHI9IjEuNCIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dzIiIGN4PSIyMjcuNSIgY3k9Ijc5LjUiIHI9IjAuOSIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dzMiIGN4PSIxNjMuOSIgY3k9IjUwLjAiIHI9IjAuOSIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dyIgY3g9IjE0Mi40IiBjeT0iMzIuMSIgcj0iMC43IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3MiIgY3g9IjI0OC4yIiBjeT0iODIuNiIgcj0iMC43IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3MyIgY3g9IjI2MS43IiBjeT0iNDAuMSIgcj0iMS40IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3IiBjeD0iMjc1LjYiIGN5PSI1OC45IiByPSIwLjkiIGZpbGw9IiNGRkY2RDYiIG9wYWNpdHk9Ii44Ii8+PGNpcmNsZSBjbGFzcz0idHcyIiBjeD0iMjY4LjMiIGN5PSI3Ny41IiByPSIwLjciIGZpbGw9IiNGRkY2RDYiIG9wYWNpdHk9Ii44Ii8+PGNpcmNsZSBjbGFzcz0idHczIiBjeD0iMTM0LjIiIGN5PSIyMi40IiByPSIwLjkiIGZpbGw9IiNGRkY2RDYiIG9wYWNpdHk9Ii44Ii8+PGNpcmNsZSBjbGFzcz0idHciIGN4PSIyNjIuNyIgY3k9IjcyLjkiIHI9IjEuMSIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dzIiIGN4PSIyMjQuOCIgY3k9Ijc4LjQiIHI9IjAuOSIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dzMiIGN4PSIyNzIuNCIgY3k9IjQ5LjAiIHI9IjAuNyIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dyIgY3g9IjIyOC44IiBjeT0iMjkuOSIgcj0iMC43IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3MiIgY3g9IjI4OC41IiBjeT0iMzMuMSIgcj0iMC45IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3MyIgY3g9IjI0Mi4xIiBjeT0iOC42IiByPSIwLjciIGZpbGw9IiNGRkY2RDYiIG9wYWNpdHk9Ii44Ii8+PGNpcmNsZSBjbGFzcz0idHciIGN4PSIyMTUuMyIgY3k9Ijc4LjgiIHI9IjEuNCIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dzIiIGN4PSIxMzUuOSIgY3k9IjcuNSIgcj0iMC43IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3MyIgY3g9IjE3MC44IiBjeT0iODUuNyIgcj0iMC43IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3IiBjeD0iMjMxLjkiIGN5PSI5MC4zIiByPSIxLjQiIGZpbGw9IiNGRkY2RDYiIG9wYWNpdHk9Ii44Ii8+PGNpcmNsZSBjbGFzcz0idHcyIiBjeD0iMjE5LjkiIGN5PSI1NC43IiByPSIwLjkiIGZpbGw9IiNGRkY2RDYiIG9wYWNpdHk9Ii44Ii8+PGNpcmNsZSBjbGFzcz0idHczIiBjeD0iMzA1LjMiIGN5PSIyOS4yIiByPSIwLjciIGZpbGw9IiNGRkY2RDYiIG9wYWNpdHk9Ii44Ii8+PGNpcmNsZSBjbGFzcz0idHciIGN4PSIxOTQuMSIgY3k9IjcuMyIgcj0iMS40IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3MiIgY3g9IjMwMC40IiBjeT0iMTYuMSIgcj0iMC45IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3MyIgY3g9IjI4OC4zIiBjeT0iNi45IiByPSIxLjQiIGZpbGw9IiNGRkY2RDYiIG9wYWNpdHk9Ii44Ii8+PGNpcmNsZSBjbGFzcz0idHciIGN4PSIzMDkuNyIgY3k9IjIxLjMiIHI9IjAuOSIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dzIiIGN4PSIyMjYuNSIgY3k9IjIyLjQiIHI9IjAuOSIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dzMiIGN4PSIyMTkuOCIgY3k9IjM5LjAiIHI9IjEuNCIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dyIgY3g9IjIyMC4xIiBjeT0iMjQuMyIgcj0iMS4xIiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3MiIgY3g9IjMyNS43IiBjeT0iODkuOCIgcj0iMS4xIiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3MyIgY3g9IjM1Ny41IiBjeT0iNy43IiByPSIwLjkiIGZpbGw9IiNGRkY2RDYiIG9wYWNpdHk9Ii44Ii8+PGNpcmNsZSBjbGFzcz0idHciIGN4PSIyMTMuOCIgY3k9Ijc5LjUiIHI9IjAuNyIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dzIiIGN4PSIxMzAuMCIgY3k9IjE4LjYiIHI9IjEuNCIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dzMiIGN4PSIxODEuNSIgY3k9IjcyLjUiIHI9IjEuMSIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dyIgY3g9IjMxNy42IiBjeT0iMzkuMiIgcj0iMC43IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InB1bHNlIiBjeD0iMjc4IiBjeT0iNDYiIHI9IjYyIiBmaWxsPSJ1cmwoI2dsb3cpIi8+PGcgbWFzaz0idXJsKCNtYykiPjxjaXJjbGUgY3g9IjI3MCIgY3k9IjQ2IiByPSIzMCIgZmlsbD0idXJsKCNnb2xkKSIvPjwvZz48cGF0aCBkPSJNMjg0LjUwLDI5LjUwIEwyODYuMTksMzguNTkgTDI5MS42NiwzMS4xMyBMMjg5LjI0LDQwLjA2IEwyOTcuNDAsMzUuNzEgTDI5MS4zNSw0Mi43MCBMMzAwLjU5LDQyLjMzIEwyOTIuMTAsNDYuMDAgTDMwMC41OSw0OS42NyBMMjkxLjM1LDQ5LjMwIEwyOTcuNDAsNTYuMjkgTDI4OS4yNCw1MS45NCBMMjkxLjY2LDYwLjg3IEwyODYuMTksNTMuNDEgTDI4NC41MCw2Mi41MCBMMjgyLjgxLDUzLjQxIEwyNzcuMzQsNjAuODcgTDI3OS43Niw1MS45NCBMMjcxLjYwLDU2LjI5IEwyNzcuNjUsNDkuMzAgTDI2OC40MSw0OS42NyBMMjc2LjkwLDQ2LjAwIEwyNjguNDEsNDIuMzMgTDI3Ny42NSw0Mi43MCBMMjcxLjYwLDM1LjcxIEwyNzkuNzYsNDAuMDYgTDI3Ny4zNCwzMS4xMyBMMjgyLjgxLDM4LjU5WiIgZmlsbD0idXJsKCNnb2xkKSIvPjxwYXRoIGNsYXNzPSJ0dzIiIGQ9Ik0yMzYsMjEgTDIzNy40LDI0LjYgTDI0MSwyNiBMMjM3LjQsMjcuNCBMMjM2LDMxIEwyMzQuNiwyNy40IEwyMzEsMjYgTDIzNC42LDI0LjZaIiBmaWxsPSIjRkZGMUI4Ii8+PHBhdGggY2xhc3M9InR3MyIgZD0iTTMxOCw3NCBMMzE5LjEyLDc2Ljg4IEwzMjIsNzggTDMxOS4xMiw3OS4xMiBMMzE4LDgyIEwzMTYuODgsNzkuMTIgTDMxNCw3OCBMMzE2Ljg4LDc2Ljg4WiIgZmlsbD0iI0ZGRjFCOCIvPjxnIGNsYXNzPSJzdyI+PGxpbmUgeDE9IjMzMCIgeTE9IjAiIHgyPSIzMzAiIHkyPSIxOSIgc3Ryb2tlPSIjRThCQzRDIiBzdHJva2Utd2lkdGg9Ii45Ii8+PHBhdGggZD0iTTMzMCwxOSBsNS41LDUuNSB2OSBsLTUuNSw1LjUgbC01LjUsLTUuNSB2LTl6IiBmaWxsPSJ1cmwoI2dvbGQpIi8+PGNpcmNsZSBjeD0iMzMwIiBjeT0iMzAiIHI9IjkiIGZpbGw9IiNGRkQzNkEiIG9wYWNpdHk9Ii4xOCIvPjwvZz48ZyBjbGFzcz0ic3ciIHN0eWxlPSJhbmltYXRpb24tZGVsYXk6LjlzIj48bGluZSB4MT0iMzQ3IiB5MT0iMCIgeDI9IjM0NyIgeTI9IjEwIiBzdHJva2U9IiNFOEJDNEMiIHN0cm9rZS13aWR0aD0iLjkiLz48cGF0aCBkPSJNMzQ3LDEwIGw0LjIsNC4yIHY3IGwtNC4yLDQuMiBsLTQuMiwtNC4yIHYtN3oiIGZpbGw9InVybCgjZ29sZCkiLz48L2c+PHJlY3QgeT0iODYiIHdpZHRoPSIzNjAiIGhlaWdodD0iNzQiIGZpbGw9InVybCgjaHopIi8+PGcgZmlsbD0iIzA0MTIwRiI+PHJlY3QgeD0iMCIgeT0iMTQyIiB3aWR0aD0iNzYiIGhlaWdodD0iMTgiLz48cGF0aCBkPSJNMjEsMTQyIEExNSwxNSAwIDAgMSA1MSwxNDJaIi8+PHJlY3QgeD0iMzUuMiIgeT0iMTE4IiB3aWR0aD0iMS42IiBoZWlnaHQ9IjkiLz48Y2lyY2xlIGN4PSIzNiIgY3k9IjExOCIgcj0iMS45Ii8+PHJlY3QgeD0iODQuNSIgeT0iMTA2IiB3aWR0aD0iNyIgaGVpZ2h0PSI1NCIvPjxwYXRoIGQ9Ik04My41LDEwNiBRODgsODkuOSA5Mi41LDEwNloiLz48cmVjdCB4PSI4Mi4wIiB5PSIxMTYiIHdpZHRoPSIxMiIgaGVpZ2h0PSIyLjYiLz48cmVjdCB4PSI4Ny4zIiB5PSI5MS45NSIgd2lkdGg9IjEuNCIgaGVpZ2h0PSI2LjUiLz48cmVjdCB4PSIxMDgiIHk9IjEzNCIgd2lkdGg9IjEzNCIgaGVpZ2h0PSIyNiIvPjxwYXRoIGQ9Ik0xNDgsMTM0IEEyNywyOCAwIDAgMSAyMDIsMTM0WiIvPjxyZWN0IHg9IjE3NC4yIiB5PSI5NyIgd2lkdGg9IjEuNiIgaGVpZ2h0PSI5Ii8+PGNpcmNsZSBjeD0iMTc1IiBjeT0iOTciIHI9IjEuOSIvPjxwYXRoIGQ9Ik0xMjEsMTM0IEExMSwxMSAwIDAgMSAxNDMsMTM0WiIvPjxyZWN0IHg9IjEzMS4yIiB5PSIxMTQiIHdpZHRoPSIxLjYiIGhlaWdodD0iOSIvPjxjaXJjbGUgY3g9IjEzMiIgY3k9IjExNCIgcj0iMS45Ii8+PHBhdGggZD0iTTIwNywxMzQgQTExLDExIDAgMCAxIDIyOSwxMzRaIi8+PHJlY3QgeD0iMjE3LjIiIHk9IjExNCIgd2lkdGg9IjEuNiIgaGVpZ2h0PSI5Ii8+PGNpcmNsZSBjeD0iMjE4IiBjeT0iMTE0IiByPSIxLjkiLz48cmVjdCB4PSIyNTAuMCIgeT0iMTA0IiB3aWR0aD0iOCIgaGVpZ2h0PSI1NiIvPjxwYXRoIGQ9Ik0yNDkuMCwxMDQgUTI1NCw4NS42IDI1OS4wLDEwNFoiLz48cmVjdCB4PSIyNDcuNSIgeT0iMTE0IiB3aWR0aD0iMTMiIGhlaWdodD0iMi42Ii8+PHJlY3QgeD0iMjUzLjMiIHk9Ijg4LjgiIHdpZHRoPSIxLjQiIGhlaWdodD0iNi41Ii8+PHJlY3QgeD0iMjY2IiB5PSIxNDYiIHdpZHRoPSI5NCIgaGVpZ2h0PSIxNCIvPjxwYXRoIGQ9Ik0yODQsMTQ2IEExMiwxMiAwIDAgMSAzMDgsMTQ2WiIvPjxyZWN0IHg9IjI5NS4yIiB5PSIxMjUiIHdpZHRoPSIxLjYiIGhlaWdodD0iOSIvPjxjaXJjbGUgY3g9IjI5NiIgY3k9IjEyNSIgcj0iMS45Ii8+PHBhdGggZD0iTTMyMSwxNDYgQTksOSAwIDAgMSAzMzksMTQ2WiIvPjxyZWN0IHg9IjMyOS4yIiB5PSIxMjgiIHdpZHRoPSIxLjYiIGhlaWdodD0iOSIvPjxjaXJjbGUgY3g9IjMzMCIgY3k9IjEyOCIgcj0iMS45Ii8+PHJlY3QgeD0iMzQ3LjAiIHk9IjExNCIgd2lkdGg9IjYiIGhlaWdodD0iNDYiLz48cGF0aCBkPSJNMzQ2LjAsMTE0IFEzNTAsMTAwLjIgMzU0LjAsMTE0WiIvPjxyZWN0IHg9IjM0NC41IiB5PSIxMjQiIHdpZHRoPSIxMSIgaGVpZ2h0PSIyLjYiLz48cmVjdCB4PSIzNDkuMyIgeT0iMTAxLjEiIHdpZHRoPSIxLjQiIGhlaWdodD0iNi41Ii8+PC9nPjxnIGZpbGw9InVybCgjZ29sZCkiIG9wYWNpdHk9Ii45MiI+PHBhdGggZD0iTTEyMiwxNTAgVjE0NC4wIEEyLjAsMi4wIDAgMCAxIDEyNiwxNDQuMCBWMTUwWiIvPjxwYXRoIGQ9Ik0xMzgsMTUwIFYxNDQuMCBBMi4wLDIuMCAwIDAgMSAxNDIsMTQ0LjAgVjE1MFoiLz48cGF0aCBkPSJNMTU0LDE1MCBWMTQ0LjAgQTIuMCwyLjAgMCAwIDEgMTU4LDE0NC4wIFYxNTBaIi8+PHBhdGggZD0iTTE2OCwxNTIgVjE0NC41IEEyLjUsMi41IDAgMCAxIDE3MywxNDQuNSBWMTUyWiIvPjxwYXRoIGQ9Ik0xODcsMTUyIFYxNDQuNSBBMi41LDIuNSAwIDAgMSAxOTIsMTQ0LjUgVjE1MloiLz48cGF0aCBkPSJNMjA0LDE1MCBWMTQ0LjAgQTIuMCwyLjAgMCAwIDEgMjA4LDE0NC4wIFYxNTBaIi8+PHBhdGggZD0iTTIyMCwxNTAgVjE0NC4wIEEyLjAsMi4wIDAgMCAxIDIyNCwxNDQuMCBWMTUwWiIvPjxwYXRoIGQ9Ik0yMzQsMTUwIFYxNDQuMCBBMi4wLDIuMCAwIDAgMSAyMzgsMTQ0LjAgVjE1MFoiLz48cGF0aCBkPSJNMTIsMTU1IFYxNDkuNzUgQTEuNzUsMS43NSAwIDAgMSAxNS41LDE0OS43NSBWMTU1WiIvPjxwYXRoIGQ9Ik0yNiwxNTUgVjE0OS43NSBBMS43NSwxLjc1IDAgMCAxIDI5LjUsMTQ5Ljc1IFYxNTVaIi8+PHBhdGggZD0iTTUwLDE1NSBWMTQ5Ljc1IEExLjc1LDEuNzUgMCAwIDEgNTMuNSwxNDkuNzUgVjE1NVoiLz48cGF0aCBkPSJNMjc0LDE1NiBWMTUxLjc1IEExLjc1LDEuNzUgMCAwIDEgMjc3LjUsMTUxLjc1IFYxNTZaIi8+PHBhdGggZD0iTTMwMCwxNTYgVjE1MS43NSBBMS43NSwxLjc1IDAgMCAxIDMwMy41LDE1MS43NSBWMTU2WiIvPjxwYXRoIGQ9Ik0zMjYsMTU2IFYxNTEuNzUgQTEuNzUsMS43NSAwIDAgMSAzMjkuNSwxNTEuNzUgVjE1NloiLz48L2c+PHJlY3Qgd2lkdGg9IjM2MCIgaGVpZ2h0PSIxNjAiIGZpbGw9InVybCgjbHMpIi8+PC9zdmc+");--art-maulid:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNjAgMTYwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWF4WU1heCBzbGljZSI+PHN0eWxlPgoudHd7YW5pbWF0aW9uOnR3IDMuMnMgZWFzZS1pbi1vdXQgaW5maW5pdGV9LnR3MnthbmltYXRpb246dHcgNC40cyBlYXNlLWluLW91dCBpbmZpbml0ZSAuOHN9LnR3M3thbmltYXRpb246dHcgNS4xcyBlYXNlLWluLW91dCBpbmZpbml0ZSAxLjZzfQpAa2V5ZnJhbWVzIHR3ezAlLDEwMCV7b3BhY2l0eTouMjV9NTAle29wYWNpdHk6MX19CkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjpyZWR1Y2Upey50dywudHcyLC50dzMsLnB1bHNlLC5zdywucmF5c3thbmltYXRpb246bm9uZSFpbXBvcnRhbnR9fQoucHVsc2V7YW5pbWF0aW9uOnBsIDVzIGVhc2UtaW4tb3V0IGluZmluaXRlO3RyYW5zZm9ybS1ib3g6ZmlsbC1ib3g7dHJhbnNmb3JtLW9yaWdpbjo1MCUgNTAlfQpAa2V5ZnJhbWVzIHBsezAlLDEwMCV7b3BhY2l0eTouNjU7dHJhbnNmb3JtOnNjYWxlKDEpfTUwJXtvcGFjaXR5OjE7dHJhbnNmb3JtOnNjYWxlKDEuMTQpfX0KLnN3e2FuaW1hdGlvbjpzdyA0LjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO3RyYW5zZm9ybS1ib3g6ZmlsbC1ib3g7dHJhbnNmb3JtLW9yaWdpbjo1MCUgMH0KQGtleWZyYW1lcyBzd3swJSwxMDAle3RyYW5zZm9ybTpyb3RhdGUoLTRkZWcpfTUwJXt0cmFuc2Zvcm06cm90YXRlKDRkZWcpfX0KLnJheXN7YW5pbWF0aW9uOnNwIDEyMHMgbGluZWFyIGluZmluaXRlO3RyYW5zZm9ybS1ib3g6dmlldy1ib3g7dHJhbnNmb3JtLW9yaWdpbjoyODBweCA4NnB4fQpAa2V5ZnJhbWVzIHNwe3Rve3RyYW5zZm9ybTpyb3RhdGUoMzYwZGVnKX19Cjwvc3R5bGU+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJza3kiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMwMjE1MEUiLz48c3RvcCBvZmZzZXQ9Ii41NSIgc3RvcC1jb2xvcj0iIzA3NDAyQiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBBNUEzQyIvPjwvbGluZWFyR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJnbG93Ij48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNDOUY4RDIiIHN0b3Atb3BhY2l0eT0iLjYyIi8+PHN0b3Agb2Zmc2V0PSIuNDUiIHN0b3AtY29sb3I9IiM0NkM5ODUiIHN0b3Atb3BhY2l0eT0iLjIiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0NkM5ODUiIHN0b3Atb3BhY2l0eT0iMCIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJkZyIgY3g9Ii4zNSIgY3k9Ii4yOCIgcj0iLjg1Ij48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM5QkY3QkEiLz48c3RvcCBvZmZzZXQ9Ii40NSIgc3RvcC1jb2xvcj0iIzJEQjM2RiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzA5NUEzNCIvPjwvcmFkaWFsR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJjciIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjAiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI0Y3RjFENCIvPjxzdG9wIG9mZnNldD0iLjYiIHN0b3AtY29sb3I9IiNFM0Q4QTgiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNCN0E3NkMiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iZ2QiIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNGRkYwQjAiLz48c3RvcCBvZmZzZXQ9Ii41IiBzdG9wLWNvbG9yPSIjRThCQzRDIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjQjg4NTFGIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImxzIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMCI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDExMDBBIiBzdG9wLW9wYWNpdHk9Ii43OCIvPjxzdG9wIG9mZnNldD0iLjU4IiBzdG9wLWNvbG9yPSIjMDExMDBBIiBzdG9wLW9wYWNpdHk9IjAiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iZ3IiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMwNjMwMUYiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAyMUExMCIgc3RvcC1vcGFjaXR5PSIuODUiLz48L2xpbmVhckdyYWRpZW50PjxtYXNrIGlkPSJtYyI+PHJlY3Qgd2lkdGg9IjM2MCIgaGVpZ2h0PSIxNjAiIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSIyODAiIGN5PSI0MCIgcj0iNi40IiBmaWxsPSIjZmZmIi8+PGNpcmNsZSBjeD0iMjgwIiBjeT0iMzcuNCIgcj0iNS4yIiBmaWxsPSIjMDAwIi8+PC9tYXNrPjwvZGVmcz48cmVjdCB3aWR0aD0iMzYwIiBoZWlnaHQ9IjE2MCIgZmlsbD0idXJsKCNza3kpIi8+PGNpcmNsZSBjbGFzcz0idHciIGN4PSIyNjguMyIgY3k9IjUzLjAiIHI9IjAuNyIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dzIiIGN4PSIzMjAuMCIgY3k9IjU1LjIiIHI9IjAuOSIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dzMiIGN4PSIyNzQuNSIgY3k9IjYzLjUiIHI9IjAuNyIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dyIgY3g9IjIwOC41IiBjeT0iNjEuMyIgcj0iMS40IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3MiIgY3g9IjI0OS40IiBjeT0iNDEuOSIgcj0iMC43IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3MyIgY3g9IjI5NC4wIiBjeT0iMzAuOSIgcj0iMC45IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3IiBjeD0iMzM4LjEiIGN5PSI1NC41IiByPSIwLjkiIGZpbGw9IiNGRkY2RDYiIG9wYWNpdHk9Ii44Ii8+PGNpcmNsZSBjbGFzcz0idHcyIiBjeD0iMzAxLjMiIGN5PSI4LjciIHI9IjEuNCIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dzMiIGN4PSIxNTAuMiIgY3k9IjQuMSIgcj0iMC43IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3IiBjeD0iMTY5LjkiIGN5PSIxOC4yIiByPSIwLjkiIGZpbGw9IiNGRkY2RDYiIG9wYWNpdHk9Ii44Ii8+PGNpcmNsZSBjbGFzcz0idHcyIiBjeD0iMzI3LjYiIGN5PSIyMy4xIiByPSIwLjkiIGZpbGw9IiNGRkY2RDYiIG9wYWNpdHk9Ii44Ii8+PGNpcmNsZSBjbGFzcz0idHczIiBjeD0iMjQ4LjMiIGN5PSI0OC43IiByPSIwLjkiIGZpbGw9IiNGRkY2RDYiIG9wYWNpdHk9Ii44Ii8+PGNpcmNsZSBjbGFzcz0idHciIGN4PSIxNjMuMiIgY3k9IjY3LjkiIHI9IjAuOSIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dzIiIGN4PSIzNTAuMCIgY3k9IjYzLjAiIHI9IjEuMSIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dzMiIGN4PSIxMjUuMSIgY3k9IjMxLjQiIHI9IjAuOSIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dyIgY3g9IjE4Mi44IiBjeT0iMjUuOSIgcj0iMC43IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3MiIgY3g9IjI2MS44IiBjeT0iNTAuNyIgcj0iMC43IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3MyIgY3g9IjE5My44IiBjeT0iNTguMCIgcj0iMS40IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3IiBjeD0iMjg1LjciIGN5PSIxNi4yIiByPSIxLjQiIGZpbGw9IiNGRkY2RDYiIG9wYWNpdHk9Ii44Ii8+PGNpcmNsZSBjbGFzcz0idHcyIiBjeD0iMjg3LjciIGN5PSI3LjgiIHI9IjAuNyIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dzMiIGN4PSIzNDUuOSIgY3k9IjI3LjYiIHI9IjEuNCIgZmlsbD0iI0ZGRjZENiIgb3BhY2l0eT0iLjgiLz48Y2lyY2xlIGNsYXNzPSJ0dyIgY3g9IjEyNC4zIiBjeT0iNTYuMCIgcj0iMS4xIiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3MiIgY3g9IjIwOS42IiBjeT0iNTkuNSIgcj0iMS40IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3MyIgY3g9IjEzMS4xIiBjeT0iMTUuOSIgcj0iMC45IiBmaWxsPSIjRkZGNkQ2IiBvcGFjaXR5PSIuOCIvPjxjaXJjbGUgY2xhc3M9InR3IiBjeD0iMTQ4LjMiIGN5PSIyMC4yIiByPSIxLjQiIGZpbGw9IiNGRkY2RDYiIG9wYWNpdHk9Ii44Ii8+PGNpcmNsZSBjbGFzcz0idHcyIiBjeD0iMjAyLjAiIGN5PSIyNy40IiByPSIxLjEiIGZpbGw9IiNGRkY2RDYiIG9wYWNpdHk9Ii44Ii8+PGNpcmNsZSBjbGFzcz0icHVsc2UiIGN4PSIyODAiIGN5PSI4NiIgcj0iMTEyIiBmaWxsPSJ1cmwoI2dsb3cpIi8+PGcgY2xhc3M9InJheXMiIGZpbGw9IiNmZmYiIG9wYWNpdHk9Ii4wNzUiPjxwb2x5Z29uIHBvaW50cz0iMjgwLDg2IDQ5OS4yLDY2LjggNDk5LjIsMTA1LjIiLz48cG9seWdvbiBwb2ludHM9IjI4MCw4NiA0NzkuNCwxNzkuMCA0NjAuMiwyMTIuMiIvPjxwb2x5Z29uIHBvaW50cz0iMjgwLDg2IDQwNi4yLDI2Ni4yIDM3My4wLDI4NS40Ii8+PHBvbHlnb24gcG9pbnRzPSIyODAsODYgMjk5LjIsMzA1LjIgMjYwLjgsMzA1LjIiLz48cG9seWdvbiBwb2ludHM9IjI4MCw4NiAxODcuMCwyODUuNCAxNTMuOCwyNjYuMiIvPjxwb2x5Z29uIHBvaW50cz0iMjgwLDg2IDk5LjgsMjEyLjIgODAuNiwxNzkuMCIvPjxwb2x5Z29uIHBvaW50cz0iMjgwLDg2IDYwLjgsMTA1LjIgNjAuOCw2Ni44Ii8+PHBvbHlnb24gcG9pbnRzPSIyODAsODYgODAuNiwtNy4wIDk5LjgsLTQwLjIiLz48cG9seWdvbiBwb2ludHM9IjI4MCw4NiAxNTMuOCwtOTQuMiAxODcuMCwtMTEzLjQiLz48cG9seWdvbiBwb2ludHM9IjI4MCw4NiAyNjAuOCwtMTMzLjIgMjk5LjIsLTEzMy4yIi8+PHBvbHlnb24gcG9pbnRzPSIyODAsODYgMzczLjAsLTExMy40IDQwNi4yLC05NC4yIi8+PHBvbHlnb24gcG9pbnRzPSIyODAsODYgNDYwLjIsLTQwLjIgNDc5LjQsLTcuMCIvPjwvZz48cGF0aCBjbGFzcz0idHcyIiBkPSJNMjM2LDI1IEwyMzcuNCwyOC42IEwyNDEsMzAgTDIzNy40LDMxLjQgTDIzNiwzNSBMMjM0LjYsMzEuNCBMMjMxLDMwIEwyMzQuNiwyOC42WiIgZmlsbD0iI0ZGRjFCOCIvPjxwYXRoIGNsYXNzPSJ0dzMiIGQ9Ik0zNDAsNTYgTDM0MS4xMiw1OC44OCBMMzQ0LDYwIEwzNDEuMTIsNjEuMTIgTDM0MCw2NCBMMzM4Ljg4LDYxLjEyIEwzMzYsNjAgTDMzOC44OCw1OC44OFoiIGZpbGw9IiNGRkYxQjgiLz48cGF0aCBjbGFzcz0idHciIGQ9Ik0yMTQsNjYuOCBMMjE0Ljg5Niw2OS4xMDQgTDIxNy4yLDcwIEwyMTQuODk2LDcwLjg5NiBMMjE0LDczLjIgTDIxMy4xMDQsNzAuODk2IEwyMTAuOCw3MCBMMjEzLjEwNCw2OS4xMDRaIiBmaWxsPSIjRkZGMUI4Ii8+PHJlY3QgeD0iMjExLjUiIHk9IjY2IiB3aWR0aD0iOSIgaGVpZ2h0PSI5NCIgZmlsbD0idXJsKCNjcikiLz48cGF0aCBkPSJNMjEwLjUsNjYgUTIxNiw0NiAyMjEuNSw2NloiIGZpbGw9InVybCgjZ2QpIi8+PHJlY3QgeD0iMjE1LjMiIHk9IjQ4IiB3aWR0aD0iMS40IiBoZWlnaHQ9IjkiIGZpbGw9InVybCgjZ2QpIi8+PGNpcmNsZSBjeD0iMjE2IiBjeT0iNDgiIHI9IjEuOCIgZmlsbD0idXJsKCNnZCkiLz48cmVjdCB4PSIyMDguNSIgeT0iODAiIHdpZHRoPSIxNSIgaGVpZ2h0PSIyLjgiIGZpbGw9InVybCgjZ2QpIi8+PHJlY3QgeD0iMjA4LjUiIHk9IjEwNiIgd2lkdGg9IjE1IiBoZWlnaHQ9IjIuOCIgZmlsbD0idXJsKCNnZCkiLz48ZyBmaWxsPSIjMEI0QTMwIiBvcGFjaXR5PSIuNzUiPjxyZWN0IHg9IjIxNSIgeT0iODgiIHdpZHRoPSIyIiBoZWlnaHQ9IjkiIHJ4PSIxIi8+PHJlY3QgeD0iMjE1IiB5PSIxMTYiIHdpZHRoPSIyIiBoZWlnaHQ9IjkiIHJ4PSIxIi8+PC9nPjxyZWN0IHg9IjM0Ny41IiB5PSI2NiIgd2lkdGg9IjkiIGhlaWdodD0iOTQiIGZpbGw9InVybCgjY3IpIi8+PHBhdGggZD0iTTM0Ni41LDY2IFEzNTIsNDYgMzU3LjUsNjZaIiBmaWxsPSJ1cmwoI2dkKSIvPjxyZWN0IHg9IjM1MS4zIiB5PSI0OCIgd2lkdGg9IjEuNCIgaGVpZ2h0PSI5IiBmaWxsPSJ1cmwoI2dkKSIvPjxjaXJjbGUgY3g9IjM1MiIgY3k9IjQ4IiByPSIxLjgiIGZpbGw9InVybCgjZ2QpIi8+PHJlY3QgeD0iMzQ0LjUiIHk9IjgwIiB3aWR0aD0iMTUiIGhlaWdodD0iMi44IiBmaWxsPSJ1cmwoI2dkKSIvPjxyZWN0IHg9IjM0NC41IiB5PSIxMDYiIHdpZHRoPSIxNSIgaGVpZ2h0PSIyLjgiIGZpbGw9InVybCgjZ2QpIi8+PGcgZmlsbD0iIzBCNEEzMCIgb3BhY2l0eT0iLjc1Ij48cmVjdCB4PSIzNTEiIHk9Ijg4IiB3aWR0aD0iMiIgaGVpZ2h0PSI5IiByeD0iMSIvPjxyZWN0IHg9IjM1MSIgeT0iMTE2IiB3aWR0aD0iMiIgaGVpZ2h0PSI5IiByeD0iMSIvPjwvZz48cmVjdCB4PSIyMjQiIHk9IjEyMCIgd2lkdGg9IjExMiIgaGVpZ2h0PSI0MCIgZmlsbD0idXJsKCNjcikiLz48cmVjdCB4PSIyMjIiIHk9IjExOCIgd2lkdGg9IjExNiIgaGVpZ2h0PSIzLjQiIGZpbGw9InVybCgjZ2QpIi8+PGcgZmlsbD0iIzBCNEEzMCI+PHBhdGggZD0iTTIzNiwxNDggVjEzMy41IEEzLjUsMy41IDAgMCAxIDI0MywxMzMuNSBWMTQ4WiIvPjxwYXRoIGQ9Ik0yNTMsMTQ4IFYxMzMuNSBBMy41LDMuNSAwIDAgMSAyNjAsMTMzLjUgVjE0OFoiLz48cGF0aCBkPSJNMjcwLDE0OCBWMTMzLjUgQTMuNSwzLjUgMCAwIDEgMjc3LDEzMy41IFYxNDhaIi8+PHBhdGggZD0iTTI4NywxNDggVjEzMy41IEEzLjUsMy41IDAgMCAxIDI5NCwxMzMuNSBWMTQ4WiIvPjxwYXRoIGQ9Ik0zMDQsMTQ4IFYxMzMuNSBBMy41LDMuNSAwIDAgMSAzMTEsMTMzLjUgVjE0OFoiLz48cGF0aCBkPSJNMzIxLDE0OCBWMTMzLjUgQTMuNSwzLjUgMCAwIDEgMzI4LDEzMy41IFYxNDhaIi8+PC9nPjxnIGZpbGw9InVybCgjZ2QpIiBvcGFjaXR5PSIuOSI+PHBhdGggZD0iTTIzNy44LDE0NCBWMTM0LjcgQTEuNywxLjcgMCAwIDEgMjQxLjIwMDAwMDAwMDAwMDAyLDEzNC43IFYxNDRaIi8+PHBhdGggZD0iTTI1NC44LDE0NCBWMTM0LjcgQTEuNywxLjcgMCAwIDEgMjU4LjIsMTM0LjcgVjE0NFoiLz48cGF0aCBkPSJNMjcxLjgsMTQ0IFYxMzQuNyBBMS43LDEuNyAwIDAgMSAyNzUuMiwxMzQuNyBWMTQ0WiIvPjxwYXRoIGQ9Ik0yODguOCwxNDQgVjEzNC43IEExLjcsMS43IDAgMCAxIDI5Mi4yLDEzNC43IFYxNDRaIi8+PHBhdGggZD0iTTMwNS44LDE0NCBWMTM0LjcgQTEuNywxLjcgMCAwIDEgMzA5LjIsMTM0LjcgVjE0NFoiLz48cGF0aCBkPSJNMzIyLjgsMTQ0IFYxMzQuNyBBMS43LDEuNyAwIDAgMSAzMjYuMiwxMzQuNyBWMTQ0WiIvPjwvZz48cGF0aCBkPSJNMjIwLDEyMCBBMTAsMTAgMCAwIDEgMjQwLDEyMFoiIGZpbGw9InVybCgjZGcpIi8+PHBhdGggZD0iTTMyMCwxMjAgQTEwLDEwIDAgMCAxIDM0MCwxMjBaIiBmaWxsPSJ1cmwoI2RnKSIvPjxyZWN0IHg9IjI0NiIgeT0iMTA0IiB3aWR0aD0iNjgiIGhlaWdodD0iMTYiIGZpbGw9InVybCgjY3IpIi8+PHJlY3QgeD0iMjQ0IiB5PSIxMDIiIHdpZHRoPSI3MiIgaGVpZ2h0PSIzIiBmaWxsPSJ1cmwoI2dkKSIvPjxnIGZpbGw9IiMwQjRBMzAiIG9wYWNpdHk9Ii44Ij48cGF0aCBkPSJNMjUyLDExOCBWMTEwLjUgQTIuNSwyLjUgMCAwIDEgMjU3LDExMC41IFYxMThaIi8+PHBhdGggZD0iTTI2NCwxMTggVjExMC41IEEyLjUsMi41IDAgMCAxIDI2OSwxMTAuNSBWMTE4WiIvPjxwYXRoIGQ9Ik0yNzYsMTE4IFYxMTAuNSBBMi41LDIuNSAwIDAgMSAyODEsMTEwLjUgVjExOFoiLz48cGF0aCBkPSJNMjg4LDExOCBWMTEwLjUgQTIuNSwyLjUgMCAwIDEgMjkzLDExMC41IFYxMThaIi8+PHBhdGggZD0iTTMwMCwxMTggVjExMC41IEEyLjUsMi41IDAgMCAxIDMwNSwxMTAuNSBWMTE4WiIvPjwvZz48cGF0aCBkPSJNMjQyLDEwNCBBMzgsMzggMCAwIDEgMzE4LDEwNFoiIGZpbGw9InVybCgjZGcpIi8+PHBhdGggZD0iTTI4MCw2NyBRMjYzLjUsODYgMjUwLDEwNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDQ1MDJDIiBzdHJva2Utb3BhY2l0eT0iLjM4IiBzdHJva2Utd2lkdGg9Ii44Ii8+PHBhdGggZD0iTTI4MCw2NyBRMjcxLjIsODYgMjY0LDEwNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDQ1MDJDIiBzdHJva2Utb3BhY2l0eT0iLjM4IiBzdHJva2Utd2lkdGg9Ii44Ii8+PHBhdGggZD0iTTI4MCw2NyBRMjg4LjgsODYgMjk2LDEwNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDQ1MDJDIiBzdHJva2Utb3BhY2l0eT0iLjM4IiBzdHJva2Utd2lkdGg9Ii44Ii8+PHBhdGggZD0iTTI4MCw2NyBRMjk2LjUsODYgMzEwLDEwNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDQ1MDJDIiBzdHJva2Utb3BhY2l0eT0iLjM4IiBzdHJva2Utd2lkdGg9Ii44Ii8+PGVsbGlwc2UgY3g9IjI2NiIgY3k9IjgyIiByeD0iMTMiIHJ5PSI2LjUiIHRyYW5zZm9ybT0icm90YXRlKC0zOCAyNjYgODIpIiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIuMjYiLz48cmVjdCB4PSIyNzkiIHk9IjQ2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyMCIgZmlsbD0idXJsKCNnZCkiLz48Y2lyY2xlIGN4PSIyODAiIGN5PSI2NCIgcj0iMy42IiBmaWxsPSJ1cmwoI2dkKSIvPjxjaXJjbGUgY3g9IjI4MCIgY3k9IjUyIiByPSIyLjgiIGZpbGw9InVybCgjZ2QpIi8+PGcgbWFzaz0idXJsKCNtYykiPjxjaXJjbGUgY3g9IjI4MCIgY3k9IjQwIiByPSI2LjQiIGZpbGw9InVybCgjZ2QpIi8+PC9nPjxyZWN0IHk9IjEyOCIgd2lkdGg9IjM2MCIgaGVpZ2h0PSIzMiIgZmlsbD0idXJsKCNncikiLz48cmVjdCB3aWR0aD0iMzYwIiBoZWlnaHQ9IjE2MCIgZmlsbD0idXJsKCNscykiLz48L3N2Zz4=")}
.musim{grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:720px){
.musim{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.musim-k{position:relative;overflow:hidden;isolation:isolate;min-height:158px;border:0;color:#F7F1DC;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:3px;align-content:start;align-items:center;
  padding:14px 42% 46px 14px;text-align:left;box-shadow:0 14px 30px -18px rgba(3,14,10,.7),0 0 0 1px rgba(226,186,85,.28)}
.musim-k.ramadan{background:var(--art-ramadan) right bottom/cover no-repeat,#071533}
.musim-k.maulid{background:var(--art-maulid) right bottom/cover no-repeat,#052E1F}
.musim-k .ik{width:38px;height:38px;border-radius:12px;background:rgba(255,246,214,.12);color:#F2D27C;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:inset 0 0 0 1px rgba(242,210,124,.35)}
.musim-k strong{font-size:.94rem;line-height:1.22;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.musim-k .bil{grid-column:1/-1;font-size:clamp(1.3rem,5.6vw,1.65rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:4px;
  background:linear-gradient(180deg,#FFF0B0,#E8BC4C);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
.musim-k small{grid-column:1/-1;color:rgba(247,241,220,.82);font-size:.76rem;font-weight:650;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.musim-k.ramadan .ik,.musim-k.maulid .ik{background:rgba(255,246,214,.12);color:#F2D27C}
@media (hover:hover){
.musim-k:hover{transform:translateY(-3px);box-shadow:0 22px 38px -20px rgba(3,14,10,.8),0 0 0 1px rgba(242,210,124,.7)}
}
.musim-k:focus-visible{outline-offset:3px}
/* Banner seni pada kad acara Ramadan & Maulid */
/* Panel kanan desktop: ruang teks lebih lega */
.aside .musim-k{min-height:148px;padding-right:34%}
.aside .musim-k .bil{font-size:1.4rem;white-space:nowrap}
.aside .musim-k strong{font-size:.9rem}
/* =====================================================================
   v3.5 — Percuma, kredit pembangun, Tentang
   ===================================================================== */
.kaki .kredit{color:var(--ink-2)}
.kaki .kredit a{color:var(--gold-ink);font-weight:750;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--gold) 55%,transparent)}
.kaki .kredit a:hover{border-bottom-color:var(--gold-ink)}
.tentang p{margin:0 0 12px;color:var(--ink-2);font-size:.92rem}
.tentang .tentang-besar{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.3}
.tentang .tentang-percuma{display:flex;align-items:center;gap:8px;font-weight:750;color:var(--gold-ink);background:var(--gold-soft);padding:10px 12px;border-radius:12px;font-size:.88rem}
.tentang-dev{margin:16px 0 8px;padding:16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface-3)}
.tentang-dev small{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.tentang-dev strong{display:block;font-size:1.1rem;margin:2px 0 8px}
.tentang-dev a:not(.btn){color:var(--emerald)}
.tentang .versi-teks{font-size:.75rem;color:var(--ink-3);text-align:center;margin:14px 0 0}
:root{
  --art-pendakwah:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20360%20160%27%20preserveAspectRatio%3D%27xMaxYMax%20slice%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27sky%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%230B2A57%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%230A1B33%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27gold%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23FFF0B0%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23E8BC4C%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23B8851F%27%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%27pt%27%20width%3D%2736%27%20height%3D%2736%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Cpath%20d%3D%27M18%202l16%2016-16%2016L2%2018z%20M8%208h20v20H8z%27%20fill%3D%27none%27%20stroke%3D%27%23E2BA55%27%20stroke-opacity%3D%27.10%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%27360%27%20height%3D%27160%27%20fill%3D%27url%28%23sky%29%27%2F%3E%3Crect%20width%3D%27360%27%20height%3D%27112%27%20fill%3D%27url%28%23pt%29%27%2F%3E%3Ccircle%20cx%3D%2752%27%20cy%3D%2734%27%20r%3D%272%27%20fill%3D%27%23FFF6D6%27%20opacity%3D%27.9%27%2F%3E%3Ccircle%20cx%3D%2796%27%20cy%3D%2720%27%20r%3D%271.4%27%20fill%3D%27%23FFF6D6%27%20opacity%3D%27.7%27%2F%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%2744%27%20r%3D%271.2%27%20fill%3D%27%23FFF6D6%27%20opacity%3D%27.6%27%2F%3E%3Ccircle%20cx%3D%27200%27%20cy%3D%2724%27%20r%3D%271.6%27%20fill%3D%27%23FFF6D6%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M238%2034a13%2013%200%201%200%2010%2022%2010.5%2010.5%200%201%201-10-22z%27%20fill%3D%27url%28%23gold%29%27%2F%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27url%28%23gold%29%27%20stroke-width%3D%273%27%3E%3Cpath%20d%3D%27M238%20158%20V84%20Q238%2050%20285%2034%20Q332%2050%20332%2084%20V158%27%2F%3E%3Cpath%20d%3D%27M256%20158%20V90%20Q256%2064%20285%2053%20Q314%2064%20314%2090%20V158%27%20stroke-opacity%3D%27.65%27%20stroke-width%3D%272%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M285%2034%20V18%27%20stroke%3D%27url%28%23gold%29%27%20stroke-width%3D%273%27%2F%3E%3Ccircle%20cx%3D%27285%27%20cy%3D%2714%27%20r%3D%273.4%27%20fill%3D%27url%28%23gold%29%27%2F%3E%3Cg%20fill%3D%27%2304120F%27%3E%3Crect%20x%3D%270%27%20y%3D%27146%27%20width%3D%27360%27%20height%3D%2714%27%2F%3E%3Crect%20x%3D%2728%27%20y%3D%27118%27%20width%3D%279%27%20height%3D%2730%27%2F%3E%3Cpath%20d%3D%27M27%20118%20Q32.5%20104%2038%20118Z%27%2F%3E%3Crect%20x%3D%2752%27%20y%3D%27108%27%20width%3D%2734%27%20height%3D%2740%27%2F%3E%3Cpath%20d%3D%27M50%20108%20Q69%2084%2088%20108Z%27%2F%3E%3Crect%20x%3D%2767%27%20y%3D%2788%27%20width%3D%273%27%20height%3D%279%27%2F%3E%3Ccircle%20cx%3D%2768.5%27%20cy%3D%2786%27%20r%3D%272.6%27%2F%3E%3Crect%20x%3D%27104%27%20y%3D%27122%27%20width%3D%2752%27%20height%3D%2726%27%2F%3E%3Cpath%20d%3D%27M103%20122%20A27%2020%200%200%201%20157%20122Z%27%2F%3E%3C%2Fg%3E%3Crect%20y%3D%27128%27%20width%3D%27360%27%20height%3D%2732%27%20fill%3D%27%233B82F6%27%20opacity%3D%27.14%27%2F%3E%3C%2Fsvg%3E");
  --art-ulama:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20360%20160%27%20preserveAspectRatio%3D%27xMaxYMax%20slice%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27sky%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%232E1A47%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23170B26%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27gold%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23FFF0B0%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23E8BC4C%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23B8851F%27%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%27pt%27%20width%3D%2736%27%20height%3D%2736%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Cpath%20d%3D%27M18%202l16%2016-16%2016L2%2018z%20M8%208h20v20H8z%27%20fill%3D%27none%27%20stroke%3D%27%23E2BA55%27%20stroke-opacity%3D%27.10%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%27360%27%20height%3D%27160%27%20fill%3D%27url%28%23sky%29%27%2F%3E%3Crect%20width%3D%27360%27%20height%3D%27112%27%20fill%3D%27url%28%23pt%29%27%2F%3E%3Ccircle%20cx%3D%2752%27%20cy%3D%2734%27%20r%3D%272%27%20fill%3D%27%23FFF6D6%27%20opacity%3D%27.9%27%2F%3E%3Ccircle%20cx%3D%2796%27%20cy%3D%2720%27%20r%3D%271.4%27%20fill%3D%27%23FFF6D6%27%20opacity%3D%27.7%27%2F%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%2744%27%20r%3D%271.2%27%20fill%3D%27%23FFF6D6%27%20opacity%3D%27.6%27%2F%3E%3Ccircle%20cx%3D%27200%27%20cy%3D%2724%27%20r%3D%271.6%27%20fill%3D%27%23FFF6D6%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M238%2034a13%2013%200%201%200%2010%2022%2010.5%2010.5%200%201%201-10-22z%27%20fill%3D%27url%28%23gold%29%27%2F%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27url%28%23gold%29%27%20stroke-width%3D%273%27%3E%3Cpath%20d%3D%27M238%20158%20V84%20Q238%2050%20285%2034%20Q332%2050%20332%2084%20V158%27%2F%3E%3Cpath%20d%3D%27M256%20158%20V90%20Q256%2064%20285%2053%20Q314%2064%20314%2090%20V158%27%20stroke-opacity%3D%27.65%27%20stroke-width%3D%272%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M285%2034%20V18%27%20stroke%3D%27url%28%23gold%29%27%20stroke-width%3D%273%27%2F%3E%3Ccircle%20cx%3D%27285%27%20cy%3D%2714%27%20r%3D%273.4%27%20fill%3D%27url%28%23gold%29%27%2F%3E%3Cg%20fill%3D%27%2304120F%27%3E%3Crect%20x%3D%270%27%20y%3D%27146%27%20width%3D%27360%27%20height%3D%2714%27%2F%3E%3Crect%20x%3D%2728%27%20y%3D%27118%27%20width%3D%279%27%20height%3D%2730%27%2F%3E%3Cpath%20d%3D%27M27%20118%20Q32.5%20104%2038%20118Z%27%2F%3E%3Crect%20x%3D%2752%27%20y%3D%27108%27%20width%3D%2734%27%20height%3D%2740%27%2F%3E%3Cpath%20d%3D%27M50%20108%20Q69%2084%2088%20108Z%27%2F%3E%3Crect%20x%3D%2767%27%20y%3D%2788%27%20width%3D%273%27%20height%3D%279%27%2F%3E%3Ccircle%20cx%3D%2768.5%27%20cy%3D%2786%27%20r%3D%272.6%27%2F%3E%3Crect%20x%3D%27104%27%20y%3D%27122%27%20width%3D%2752%27%20height%3D%2726%27%2F%3E%3Cpath%20d%3D%27M103%20122%20A27%2020%200%200%201%20157%20122Z%27%2F%3E%3C%2Fg%3E%3Crect%20y%3D%27128%27%20width%3D%27360%27%20height%3D%2732%27%20fill%3D%27%23A855F7%27%20opacity%3D%27.14%27%2F%3E%3C%2Fsvg%3E");
  --art-daurah:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20360%20160%27%20preserveAspectRatio%3D%27xMaxYMax%20slice%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27sky%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23123B4F%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23081F2A%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27gold%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23FFF0B0%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23E8BC4C%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23B8851F%27%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%27pt%27%20width%3D%2736%27%20height%3D%2736%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Cpath%20d%3D%27M18%202l16%2016-16%2016L2%2018z%20M8%208h20v20H8z%27%20fill%3D%27none%27%20stroke%3D%27%23E2BA55%27%20stroke-opacity%3D%27.10%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%27360%27%20height%3D%27160%27%20fill%3D%27url%28%23sky%29%27%2F%3E%3Crect%20width%3D%27360%27%20height%3D%27112%27%20fill%3D%27url%28%23pt%29%27%2F%3E%3Ccircle%20cx%3D%2752%27%20cy%3D%2734%27%20r%3D%272%27%20fill%3D%27%23FFF6D6%27%20opacity%3D%27.9%27%2F%3E%3Ccircle%20cx%3D%2796%27%20cy%3D%2720%27%20r%3D%271.4%27%20fill%3D%27%23FFF6D6%27%20opacity%3D%27.7%27%2F%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%2744%27%20r%3D%271.2%27%20fill%3D%27%23FFF6D6%27%20opacity%3D%27.6%27%2F%3E%3Ccircle%20cx%3D%27200%27%20cy%3D%2724%27%20r%3D%271.6%27%20fill%3D%27%23FFF6D6%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M238%2034a13%2013%200%201%200%2010%2022%2010.5%2010.5%200%201%201-10-22z%27%20fill%3D%27url%28%23gold%29%27%2F%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27url%28%23gold%29%27%20stroke-width%3D%273%27%3E%3Cpath%20d%3D%27M238%20158%20V84%20Q238%2050%20285%2034%20Q332%2050%20332%2084%20V158%27%2F%3E%3Cpath%20d%3D%27M256%20158%20V90%20Q256%2064%20285%2053%20Q314%2064%20314%2090%20V158%27%20stroke-opacity%3D%27.65%27%20stroke-width%3D%272%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M285%2034%20V18%27%20stroke%3D%27url%28%23gold%29%27%20stroke-width%3D%273%27%2F%3E%3Ccircle%20cx%3D%27285%27%20cy%3D%2714%27%20r%3D%273.4%27%20fill%3D%27url%28%23gold%29%27%2F%3E%3Cg%20fill%3D%27%2304120F%27%3E%3Crect%20x%3D%270%27%20y%3D%27146%27%20width%3D%27360%27%20height%3D%2714%27%2F%3E%3Crect%20x%3D%2728%27%20y%3D%27118%27%20width%3D%279%27%20height%3D%2730%27%2F%3E%3Cpath%20d%3D%27M27%20118%20Q32.5%20104%2038%20118Z%27%2F%3E%3Crect%20x%3D%2752%27%20y%3D%27108%27%20width%3D%2734%27%20height%3D%2740%27%2F%3E%3Cpath%20d%3D%27M50%20108%20Q69%2084%2088%20108Z%27%2F%3E%3Crect%20x%3D%2767%27%20y%3D%2788%27%20width%3D%273%27%20height%3D%279%27%2F%3E%3Ccircle%20cx%3D%2768.5%27%20cy%3D%2786%27%20r%3D%272.6%27%2F%3E%3Crect%20x%3D%27104%27%20y%3D%27122%27%20width%3D%2752%27%20height%3D%2726%27%2F%3E%3Cpath%20d%3D%27M103%20122%20A27%2020%200%200%201%20157%20122Z%27%2F%3E%3C%2Fg%3E%3Crect%20y%3D%27128%27%20width%3D%27360%27%20height%3D%2732%27%20fill%3D%27%2338BDF8%27%20opacity%3D%27.14%27%2F%3E%3C%2Fsvg%3E");
  --art-umum:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20360%20160%27%20preserveAspectRatio%3D%27xMaxYMax%20slice%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27sky%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%230B3D2E%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%2306231A%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27gold%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23FFF0B0%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23E8BC4C%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23B8851F%27%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%27pt%27%20width%3D%2736%27%20height%3D%2736%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Cpath%20d%3D%27M18%202l16%2016-16%2016L2%2018z%20M8%208h20v20H8z%27%20fill%3D%27none%27%20stroke%3D%27%23E2BA55%27%20stroke-opacity%3D%27.10%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%27360%27%20height%3D%27160%27%20fill%3D%27url%28%23sky%29%27%2F%3E%3Crect%20width%3D%27360%27%20height%3D%27112%27%20fill%3D%27url%28%23pt%29%27%2F%3E%3Ccircle%20cx%3D%2752%27%20cy%3D%2734%27%20r%3D%272%27%20fill%3D%27%23FFF6D6%27%20opacity%3D%27.9%27%2F%3E%3Ccircle%20cx%3D%2796%27%20cy%3D%2720%27%20r%3D%271.4%27%20fill%3D%27%23FFF6D6%27%20opacity%3D%27.7%27%2F%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%2744%27%20r%3D%271.2%27%20fill%3D%27%23FFF6D6%27%20opacity%3D%27.6%27%2F%3E%3Ccircle%20cx%3D%27200%27%20cy%3D%2724%27%20r%3D%271.6%27%20fill%3D%27%23FFF6D6%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M238%2034a13%2013%200%201%200%2010%2022%2010.5%2010.5%200%201%201-10-22z%27%20fill%3D%27url%28%23gold%29%27%2F%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27url%28%23gold%29%27%20stroke-width%3D%273%27%3E%3Cpath%20d%3D%27M238%20158%20V84%20Q238%2050%20285%2034%20Q332%2050%20332%2084%20V158%27%2F%3E%3Cpath%20d%3D%27M256%20158%20V90%20Q256%2064%20285%2053%20Q314%2064%20314%2090%20V158%27%20stroke-opacity%3D%27.65%27%20stroke-width%3D%272%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M285%2034%20V18%27%20stroke%3D%27url%28%23gold%29%27%20stroke-width%3D%273%27%2F%3E%3Ccircle%20cx%3D%27285%27%20cy%3D%2714%27%20r%3D%273.4%27%20fill%3D%27url%28%23gold%29%27%2F%3E%3Cg%20fill%3D%27%2304120F%27%3E%3Crect%20x%3D%270%27%20y%3D%27146%27%20width%3D%27360%27%20height%3D%2714%27%2F%3E%3Crect%20x%3D%2728%27%20y%3D%27118%27%20width%3D%279%27%20height%3D%2730%27%2F%3E%3Cpath%20d%3D%27M27%20118%20Q32.5%20104%2038%20118Z%27%2F%3E%3Crect%20x%3D%2752%27%20y%3D%27108%27%20width%3D%2734%27%20height%3D%2740%27%2F%3E%3Cpath%20d%3D%27M50%20108%20Q69%2084%2088%20108Z%27%2F%3E%3Crect%20x%3D%2767%27%20y%3D%2788%27%20width%3D%273%27%20height%3D%279%27%2F%3E%3Ccircle%20cx%3D%2768.5%27%20cy%3D%2786%27%20r%3D%272.6%27%2F%3E%3Crect%20x%3D%27104%27%20y%3D%27122%27%20width%3D%2752%27%20height%3D%2726%27%2F%3E%3Cpath%20d%3D%27M103%20122%20A27%2020%200%200%201%20157%20122Z%27%2F%3E%3C%2Fg%3E%3Crect%20y%3D%27128%27%20width%3D%27360%27%20height%3D%2732%27%20fill%3D%27%2310B981%27%20opacity%3D%27.14%27%2F%3E%3C%2Fsvg%3E");
}
/* =====================================================================
   v3.6 — Kad yang kosong diberi design (banner seni semua jenis acara,
   kad kosong premium & corak halus pada kad kuliah)
   ===================================================================== */
/* Kad kosong (tiada rekod): premium gelap + lengkung emas logo */
.kosong{
  position:relative;overflow:hidden;text-align:center;
  border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);
  background:
    radial-gradient(420px 180px at 85% -10%, rgba(232,188,76,.28), transparent 60%),
    radial-gradient(360px 180px at -10% 115%, rgba(16,185,129,.22), transparent 55%),
    linear-gradient(160deg,#0C2E24,#081711 62%,#050D0A);
  color:#E9E2CB;
  box-shadow:0 18px 36px -20px rgba(3,14,10,.65), inset 0 1px 0 rgba(255,240,176,.25);
}
.kosong::before{
  content:"";position:absolute;right:-16px;bottom:-14px;width:150px;height:120px;opacity:.20;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96'%3E%3Cg fill='none' stroke='%23E8BC4C' stroke-width='2.6'%3E%3Cpath d='M22 94 V48 Q22 22 60 10 Q98 22 98 48 V94'/%3E%3Cpath d='M8 94 H112'/%3E%3Cpath d='M60 10 V3'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}
.kosong::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M18 2l16 16-16 16L2 18z M8 8h20v20H8z' fill='none' stroke='%23E2BA55' stroke-opacity='.09'/%3E%3C/svg%3E");
}
.kosong>*{position:relative;z-index:1}
.kosong>.i{
  width:58px;height:58px;margin:0 auto 12px;display:grid;place-items:center;
  border-radius:50%;color:#F2D27C;
  background:radial-gradient(circle at 32% 28%, rgba(255,240,176,.35), rgba(232,188,76,.14) 62%);
  border:1px solid rgba(242,210,124,.65);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,240,176,.4);
}
.kosong h3{color:#FFF6D6}
.kosong p{color:rgba(233,226,203,.85)}
/* Kad kuliah: corak geometri halus + garisan emas di atas supaya tidak polos */
.kad{position:relative;overflow:hidden}
.kad::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--gold) 25%,transparent),transparent 80%);
}
.kad::after{
  content:"";position:absolute;right:-20px;bottom:-18px;width:118px;height:94px;opacity:.08;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96'%3E%3Cg fill='none' stroke='%23B8851F' stroke-width='3'%3E%3Cpath d='M22 94 V48 Q22 22 60 10 Q98 22 98 48 V94'/%3E%3Cpath d='M8 94 H112'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}
.kad>*{position:relative;z-index:1}
/* =====================================================================
   v3.7 — Nama penceramah/tajuk & hari/tarikh mesti jelas
   ===================================================================== */
.kad{gap:11px}
.kad-ava{width:50px;height:50px;flex:none;border-radius:15px;display:grid;place-items:center;font-size:1.02rem;font-weight:800;letter-spacing:.01em;color:#F2D27C;background:radial-gradient(circle at 32% 26%,#274435,#0A1712 68%);border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);box-shadow:inset 0 1px 0 rgba(255,240,176,.3),0 10px 18px -12px rgba(3,14,10,.8)}
.kad h3{font-size:1.26rem;line-height:1.22;letter-spacing:-.02em}
.kad-lok strong{font-size:.94rem}
/* =====================================================================
   v3.8 — Latar gambar kad acara (muat naik admin / gambar lalai),
   gambar kabur lembut + gerak perlahan, dan slaid auto
   ===================================================================== */
@keyframes fotoGerak{from{transform:scale(1.05) translateX(0)}to{transform:scale(1.14) translateX(-10px)}}
.acara-slaid{scroll-behavior:smooth}
@media (min-width:720px){
.acara-slaid{display:grid;grid-auto-flow:column;grid-auto-columns:min(44%,360px);overflow-x:auto;margin:0;padding:2px 2px 8px}
}
@media (prefers-reduced-motion:reduce){
.acara-slaid{scroll-behavior:auto}
}
/* =====================================================================
   v3.9 — Latar belakang digelapkan sikit & bercorak geometri Islamik
   supaya kad di atasnya lebih menyerlah
   ===================================================================== */
body{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%230A5A42' stroke-opacity='.10'%3E%3Cpath d='M36 6 L44 28 L66 36 L44 44 L36 66 L28 44 L6 36 L28 28 Z'/%3E%3Ccircle cx='36' cy='36' r='6'/%3E%3Cpath d='M0 0 H18 M0 0 V18 M72 0 H54 M72 0 V18 M0 72 H18 M0 72 V54 M72 72 H54 M72 72 V54' stroke-opacity='.07'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(900px 420px at 85% -10%, rgba(198,154,45,.13), transparent 60%),
    radial-gradient(700px 380px at -10% 0%, rgba(10,90,66,.12), transparent 60%),
    var(--bg);
  background-size:72px 72px, auto, auto, auto;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) body{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23E2BA55' stroke-opacity='.09'%3E%3Cpath d='M36 6 L44 28 L66 36 L44 44 L36 66 L28 44 L6 36 L28 28 Z'/%3E%3Ccircle cx='36' cy='36' r='6'/%3E%3Cpath d='M0 0 H18 M0 0 V18 M72 0 H54 M72 0 V18 M0 72 H18 M0 72 V54 M72 72 H54 M72 72 V54' stroke-opacity='.06'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(900px 420px at 85% -10%, rgba(226,186,85,.08), transparent 60%),
    radial-gradient(700px 380px at -10% 0%, rgba(61,190,142,.07), transparent 60%),
    var(--bg);
  background-size:72px 72px, auto, auto, auto;
}
}
:root[data-theme="dark"] body{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23E2BA55' stroke-opacity='.09'%3E%3Cpath d='M36 6 L44 28 L66 36 L44 44 L36 66 L28 44 L6 36 L28 28 Z'/%3E%3Ccircle cx='36' cy='36' r='6'/%3E%3Cpath d='M0 0 H18 M0 0 V18 M72 0 H54 M72 0 V18 M0 72 H18 M0 72 V54 M72 72 H54 M72 72 V54' stroke-opacity='.06'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(900px 420px at 85% -10%, rgba(226,186,85,.08), transparent 60%),
    radial-gradient(700px 380px at -10% 0%, rgba(61,190,142,.07), transparent 60%),
    var(--bg);
  background-size:72px 72px, auto, auto, auto;
}
/* Kad diberi bayang lebih jelas supaya timbul atas latar bercorak */
.kad{box-shadow:0 2px 4px rgba(8,28,20,.07), 0 16px 34px -18px rgba(8,28,20,.42)}
/* =====================================================================
   v4.0 — Footer profesional, peringatan selawat & slaid ke kanan
   ===================================================================== */
/* --- Peringatan selawat --- */
.selawat-strip{
  display:flex;gap:14px;align-items:center;justify-content:space-between;
  margin:0 0 18px;padding:16px 18px;border-radius:var(--r-xl);position:relative;overflow:hidden;
  background:
    radial-gradient(420px 200px at 90% -20%, rgba(232,188,76,.30), transparent 60%),
    linear-gradient(140deg,#0C2E24,#081711 68%);
  border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);
  box-shadow:0 18px 36px -20px rgba(3,14,10,.7), inset 0 1px 0 rgba(255,240,176,.22);
  color:#F3EBD3;
}
.selawat-strip::after{
  content:"";position:absolute;right:-14px;bottom:-16px;width:132px;height:106px;opacity:.16;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96'%3E%3Cg fill='none' stroke='%23E8BC4C' stroke-width='2.6'%3E%3Cpath d='M22 94 V48 Q22 22 60 10 Q98 22 98 48 V94'/%3E%3Cpath d='M8 94 H112'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}
.selawat-tx{position:relative;z-index:1;min-width:0}
.selawat-soalan{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#F2D27C;margin-bottom:5px}
.selawat-ar{font-family:var(--font-ar);direction:rtl;text-align:left;font-size:clamp(1.25rem,4.6vw,1.6rem);line-height:1.9;color:#FFF6D6;margin:0 0 5px}
.selawat-maksud{display:block;font-size:.8rem;line-height:1.55;color:rgba(243,235,211,.82);max-width:52ch}
.selawat-btn{
  position:relative;z-index:1;flex:none;border:1px solid rgba(255,240,176,.55);cursor:pointer;
  background:linear-gradient(150deg,rgba(255,240,176,.16),rgba(232,188,76,.10));
  color:#FFF6D6;border-radius:18px;padding:10px 14px;display:flex;flex-direction:column;align-items:center;gap:1px;
  box-shadow:inset 0 1px 0 rgba(255,240,176,.35),0 12px 22px -14px rgba(0,0,0,.8);
}
.selawat-n{font-size:1.7rem;font-weight:800;line-height:1;color:#FFD968}
.selawat-n.lonjak{animation:lonjak .45s cubic-bezier(.2,.8,.2,1)}
@keyframes lonjak{35%{transform:scale(1.28)}}
.selawat-btn-tx{font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;text-align:center;color:rgba(255,246,214,.85);line-height:1.35}
@media (max-width:560px){
.selawat-strip{flex-direction:column;align-items:stretch}
.selawat-btn{flex-direction:row;justify-content:center;gap:10px}
.selawat-btn-tx{text-align:left}
}
/* --- Footer profesional --- */
.kaki{
  margin-top:44px;padding:28px 24px 0;border-radius:26px;position:relative;overflow:hidden;
  background:
    radial-gradient(560px 240px at 88% -10%, rgba(232,188,76,.22), transparent 60%),
    radial-gradient(420px 220px at -8% 108%, rgba(16,185,129,.16), transparent 55%),
    linear-gradient(165deg,#0E2A20,#081711 62%,#050D0A);
  border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);
  box-shadow:0 24px 48px -24px rgba(3,14,10,.75), inset 0 1px 0 rgba(255,240,176,.20);
  color:#D8E4DA;font-size:.86rem;line-height:1.6;
}
.kaki-atas{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid rgba(255,240,176,.16)}
.kaki-brand{display:flex;gap:12px;align-items:center}
.kaki-brand img{width:44px;height:44px;border-radius:12px;box-shadow:0 8px 18px -8px rgba(0,0,0,.8)}
.kaki-brand strong{display:block;font-size:1.22rem;letter-spacing:-.02em;color:#FFF6D6;line-height:1.15}
.kaki-brand strong em{font-style:normal;color:#E8BC4C}
.kaki-brand span{display:block;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(243,235,211,.62)}
.kaki-tag{margin:0;max-width:44ch;color:rgba(243,235,211,.78);font-size:.86rem}
.kaki-selawat{padding:18px 0 4px;text-align:center}
.kaki-soalan{display:block;font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#F2D27C;margin-bottom:4px}
.kaki-selawat .ar{font-size:clamp(1.35rem,5vw,1.8rem);color:#FFF6D6;margin:0 0 4px}
.kaki-maksud{font-size:.8rem;color:rgba(243,235,211,.75)}
.kaki-grid{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:22px;padding:20px 0 22px}
.kaki h4{margin:0 0 10px;font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#F2D27C}
.kaki nav button{display:block;background:none;border:0;padding:4px 0;color:#E7EFEA;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;text-align:left}
.kaki nav button:hover{color:#FFD968}
.kaki-penafian p{margin:0 0 10px;color:rgba(243,235,211,.72);font-size:.8rem}
.kaki-hadis{color:rgba(243,235,211,.85)!important}
.kaki-hadis span{font-family:var(--font-ar);font-size:1.15rem;color:#F2D27C;line-height:1.8}
.kaki-bawah{display:flex;gap:8px 18px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:1px solid rgba(255,240,176,.16);padding:14px 0 18px;font-size:.78rem;color:rgba(243,235,211,.62)}
.kaki-bawah .kredit{margin:0;color:rgba(243,235,211,.72)}
.kaki-bawah .kredit a{color:#FFD968}
@media (max-width:720px){
.kaki-grid{grid-template-columns:1fr 1fr}
.kaki-penafian{grid-column:1/-1}
}
/* --- Slaid acara: anak panah arah aliran ke kanan pada titik aktif --- */
.acara-slaid{scroll-snap-type:x mandatory}
/* =====================================================================
   v3.5.5 — Kad acara PADAT (tiada ruang kosong pelik desktop & mobile)
   - Slaid/grid: kad ikut ketinggian kandungan sendiri, tidak diregang
     mengikut kad paling panjang dalam baris yang sama.
   - Butang aksi duduk terus bawah teks (bukan ditolak ke dasar kad).
   - Tajuk & keterangan dihadkan 3 baris supaya kad seragam kemas.
   - Banner: seni ikut jenis jadi lapisan sandaran bawah foto — kalau
     fail gambar tiada/404, kad tetap gelap berdesign, bukan kosong pucat.
   ===================================================================== */
.acara-scroll{align-items:start}
/* =====================================================================
   v3.5.6 — Avatar ustaz: foto kecil tepi nama; tiada foto guna inisial.
   Admin urus gambar dalam Pusat Kawalan > Gambar ustaz (jadual Supabase
   "penceramah" — jalankan supabase-penceramah.sql sekali sahaja).
   ===================================================================== */
.kad-ava.has-img{background-size:cover;background-position:center 22%;color:transparent;text-shadow:none}
.kad-ava.ava-kecil{width:32px;height:32px;border-radius:10px;font-size:.72rem;flex:none}
.ustaz-baris{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:10px;box-shadow:var(--shadow)}
.ustaz-baris .kad-ava{width:46px;height:46px;border-radius:13px}
.ustaz-tx{flex:1;min-width:0}
.ustaz-tx strong{display:block;font-size:.95rem}
.ustaz-tx span{font-size:.8rem;color:var(--ink-3)}
.u-klik{display:flex;gap:12px;align-items:center;flex:1;min-width:0;background:none;border:0;padding:0;text-align:left;cursor:pointer;font-family:inherit;color:inherit}
.u-minggu{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:8px;box-shadow:var(--shadow)}
.u-minggu b{font-size:.85rem;white-space:nowrap}
.ikut-btn{flex:none}
/* =====================================================================
   v3.5.7 — Jalur statistik komuniti + Kalendar Islam
   ===================================================================== */
.jalur-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.jalur-stat>div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 10px;text-align:center;box-shadow:var(--shadow)}
.jalur-stat .i{width:20px;height:20px;color:var(--gold-ink);margin:0 auto 4px;display:block}
.jalur-stat strong{display:block;font-size:1.15rem;letter-spacing:-.01em}
.jalur-stat span{font-size:.72rem;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.kad-kalendar{display:flex;gap:14px;align-items:center;width:100%;text-align:left;background:linear-gradient(135deg,#0C2E24,#071711);color:#F3EBD3;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:var(--r-lg);padding:16px;cursor:pointer;box-shadow:var(--shadow)}
.kad-kalendar .kk-ikon{width:52px;height:52px;flex:none;border-radius:15px;display:grid;place-items:center;background:rgba(226,186,85,.14);border:1px solid rgba(226,186,85,.4);color:#F2D27C}
.kad-kalendar .kk-ikon .i{width:26px;height:26px}
.kad-kalendar strong{display:block;font-size:1.02rem;color:#FFF6D6}
.kad-kalendar span{display:block;font-size:.82rem;color:#B5C7BC;margin-top:2px}
.kad-kalendar .kk-baki{margin-left:auto;flex:none;text-align:center;background:rgba(226,186,85,.14);border:1px solid rgba(226,186,85,.4);border-radius:12px;padding:8px 10px}
.kad-kalendar .kk-baki b{display:block;font-size:1.25rem;color:#F2D27C;line-height:1}
.kad-kalendar .kk-baki small{font-size:.66rem;color:#B5C7BC;font-weight:700;text-transform:uppercase}
.kal-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.kal-nav h3{margin:0;font-size:1.05rem}
.kal-nav p{margin:2px 0 0;font-size:.8rem;color:var(--ink-3)}
.kal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.kal-hari{font-size:.7rem;font-weight:800;text-align:center;color:var(--ink-3);text-transform:uppercase;padding:4px 0}
.kal-sel{min-height:64px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:6px;cursor:pointer;text-align:left;position:relative}
.kal-sel b{display:block;font-size:.95rem}
.kal-sel small{display:block;font-size:.68rem;color:var(--ink-3);font-weight:700}
.kal-sel.jumaat{background:var(--emerald-soft)}
.kal-sel.ini{border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 45%,transparent)}
.kal-sel.pilih{border-color:var(--emerald);box-shadow:0 0 0 2px color-mix(in srgb,var(--emerald) 40%,transparent)}
.kal-sel.luar{opacity:.38}
.kal-sel .titik{position:absolute;right:6px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.kal-sel .titik.bidh{background:var(--plum,#8B5CF6)}
.tarikh-baris{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:10px;box-shadow:var(--shadow)}
.tarikh-baris .tb-baki{flex:none;text-align:center;min-width:64px;background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:12px;padding:8px 6px}
.tarikh-baris .tb-baki b{display:block;font-size:1.2rem;color:var(--gold-ink);line-height:1}
.tarikh-baris .tb-baki small{font-size:.64rem;font-weight:800;color:var(--ink-3);text-transform:uppercase}
.tarikh-baris .tb-tx{flex:1;min-width:0}
.tarikh-baris .tb-tx strong{display:block}
.tarikh-baris .tb-tx span{font-size:.82rem;color:var(--ink-3)}
@media(max-width:560px){
.jalur-stat{grid-template-columns:repeat(2,1fr)}
.kal-sel{min-height:56px}
}
/* v3.5.8 — Jadual Segar */
.tag-segar{background:var(--emerald-soft);color:var(--emerald)}
.tag-usang{background:#FEF3C7;color:#92400E}
.tag-gantung{background:#FEE2E2;color:#991B1B}
/* =====================================================================
   v5 — BERSIH & MODEN
   Satu lapisan reka bentuk yang menimpa gaya lama: kanvas cerah,
   kad putih bersih, satu hero gelap sebagai tumpuan, emas sebagai aksen
   sahaja. Semua warna melalui token supaya mod gelap ikut sendiri.
   ===================================================================== */
:root{
  --bg:#F3F5F2; --surface:#FFFFFF; --surface-2:#EDF1EE; --surface-3:#F7F9F7;
  --ink:#0B1A14; --ink-2:#46564F; --ink-3:#6F7E77; --line:#E2E8E3;
  --emerald:#0A6A4E; --emerald-2:#0B7D5C; --emerald-soft:#E2F2EA; --on-emerald:#FFFFFF;
  --gold:#D4A23A; --gold-ink:#8A6212; --gold-soft:#FBF3DF; --on-gold:#231903;
  --hero-a:#0C2A20; --hero-b:#06130E;
  --shadow:0 1px 2px rgba(11,26,20,.04),0 6px 20px -12px rgba(11,26,20,.16);
  --shadow-hi:0 2px 4px rgba(11,26,20,.05),0 18px 36px -18px rgba(11,26,20,.28);
  --r-xl:24px; --r-lg:20px; --r-md:14px; --r-sm:10px;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
    --bg:#08100D; --surface:#101915; --surface-2:#17221D; --surface-3:#0D1512; --line:#1E2A25;
    --ink:#E9F0EC; --ink-2:#A9B9B1; --ink-3:#7E918A;
    --emerald:#3FC292; --emerald-2:#5AD3A6; --emerald-soft:#0F2C21; --on-emerald:#04140D;
    --gold:#E4BC58; --gold-ink:#F0CF7A; --gold-soft:#2A2310;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px -14px rgba(0,0,0,.6);
    --shadow-hi:0 2px 4px rgba(0,0,0,.4),0 18px 36px -16px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --bg:#08100D; --surface:#101915; --surface-2:#17221D; --surface-3:#0D1512; --line:#1E2A25;
  --ink:#E9F0EC; --ink-2:#A9B9B1; --ink-3:#7E918A;
  --emerald:#3FC292; --emerald-2:#5AD3A6; --emerald-soft:#0F2C21; --on-emerald:#04140D;
  --gold:#E4BC58; --gold-ink:#F0CF7A; --gold-soft:#2A2310;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px -14px rgba(0,0,0,.6);
  --shadow-hi:0 2px 4px rgba(0,0,0,.4),0 18px 36px -16px rgba(0,0,0,.75);
}
/* Kanvas: rata, tiada corak */
body{background:var(--bg)!important;font-weight:500;letter-spacing:-.003em}
h1,h2,h3{text-wrap:balance}
/* Bar atas & tab */
.topbar{background:color-mix(in srgb,var(--surface) 86%,transparent);border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent)}
.brand-ikon{box-shadow:0 0 0 1px rgba(212,162,58,.35);border-radius:11px}
.brand-nama{background:none;-webkit-text-fill-color:currentColor;color:var(--ink);font-weight:800;letter-spacing:-.025em}
.brand-nama small{-webkit-text-fill-color:var(--emerald);color:var(--emerald);font-weight:800;font-size:.9em}
.negeri-btn{background:var(--surface);box-shadow:var(--shadow)}
.tabbar{background:color-mix(in srgb,var(--surface) 90%,transparent);border-top-color:color-mix(in srgb,var(--line) 70%,transparent)}
.tab[aria-current="page"] .i,.tab-admin[aria-current="page"] .i{filter:none}
.tab[aria-current="page"]::before{background:var(--emerald-soft)}
.rail{background:var(--surface);border-right-color:var(--line)}
/* Butang: rata, tegas, tanpa kilauan */
.btn{border-radius:var(--r-md);font-weight:700;letter-spacing:-.005em;min-height:46px}
.btn-sm{border-radius:10px;min-height:36px}
.btn-emas::after,.btn-pri::after{display:none}
.btn-emas{background:#EDBE4F;color:#231903;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 20px -10px rgba(212,162,58,.8)}
.btn-emas:hover{background:#F3C95E;filter:none}
.btn-pri{box-shadow:0 8px 18px -10px color-mix(in srgb,var(--emerald) 80%,transparent)}
.btn-garis{box-shadow:none}
/* ---------- Hero: satu-satunya blok gelap ---------- */
.hero{border-radius:28px;color:#F4F1E6;
  background:
    radial-gradient(70% 55% at 100% 0%,rgba(46,196,140,.30),transparent 62%),
    radial-gradient(55% 45% at 0% 100%,rgba(212,162,58,.20),transparent 60%),
    linear-gradient(165deg,var(--hero-a),var(--hero-b));
  box-shadow:0 24px 48px -30px rgba(6,19,14,.75)}
.hero::before{content:"";position:absolute;inset:0;width:auto;height:auto;border-radius:0;animation:none;opacity:.5;
  background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/28px 28px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(80% 70% at 50% 0%,#000,transparent 75%)}
.hero h1{text-shadow:none;color:#fff;font-size:clamp(1.75rem,7.4vw,2.75rem);letter-spacing:-.04em;margin:14px 0 8px}
.hero .btn-garis{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px)}
.hero .btn-garis:hover{background:rgba(255,255,255,.14)}
/* Trek waktu solat: panel kaca dalam hero */
.trek{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);box-shadow:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:20px;color:#F4F1E6}
.trek::before{background:radial-gradient(360px 160px at 90% -20%,rgba(244,210,126,.16),transparent 65%)}
.trek::after{display:none}
.trek-head{color:rgba(232,240,235,.8)}
.trek-head .zon{background:rgba(244,210,126,.14);color:#F4D27E;border:1px solid rgba(244,210,126,.28)}
.trek-spot{background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.10)}
.trek-spot small{color:#F4D27E}
.trek-spot .masa{color:#fff}
.trek-kira{background:#EDBE4F;box-shadow:none}
.trek-fill{background:linear-gradient(90deg,#3FC292,#EDBE4F);box-shadow:none}
.trek-nodes div{color:rgba(232,240,235,.75)}
.trek-nodes .seterus{background:#EDBE4F;box-shadow:none;animation:none}
.trek-sumber{color:rgba(232,240,235,.6)}
/* Seksyen */
.sek{margin-top:32px}
.sek-head{margin-bottom:14px}
.sek-head h2{padding-left:0;font-size:1.32rem;font-weight:800;letter-spacing:-.03em}
.sek-head h2::before{display:none}
.sek-head p{font-size:.85rem;font-weight:550}
.pautan{font-weight:700}
/* ---------- Kad kuliah ---------- */
.kad{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);background:var(--surface)}
.kad{padding:16px;gap:12px}
.kad::before,.kad::after{display:none}
@media (hover:hover){
.kad:hover{transform:translateY(-2px);box-shadow:var(--shadow-hi);border-color:color-mix(in srgb,var(--emerald) 28%,var(--line))}
}
.kad-ava{background:linear-gradient(140deg,var(--emerald-2),var(--emerald));color:#fff;border:0;box-shadow:none;border-radius:14px;width:48px;height:48px;font-size:.98rem}
:root[data-theme="dark"] .kad-ava{color:#04140D}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .kad-ava{color:#04140D}
}
.kad-ava.has-img{color:transparent}
.kad h3{font-size:1.2rem;letter-spacing:-.025em}
.kad-lok{background:var(--surface-3);border:1px solid var(--line);border-radius:14px}
.kad:hover .kad-lok{background:var(--surface-3)}
.aksi{border-top:1px solid var(--line);padding-top:6px;margin-top:0}
.ab{min-height:48px;font-weight:650;color:var(--ink-2)}
.tag{border-radius:999px;font-weight:700}
.tag-kini{background:var(--emerald);color:var(--on-emerald)}
.ibtn{border-radius:12px}
/* ---------- Kad acara ---------- */
/* ---------- Kosong: cerah & mesra ---------- */
.kosong{background:var(--surface);border:1.5px dashed color-mix(in srgb,var(--ink-3) 30%,transparent);color:var(--ink-2);box-shadow:none;border-radius:var(--r-lg);padding:32px 20px}
.kosong::before,.kosong::after{display:none}
.kosong>.i{width:60px;height:60px;padding:15px;margin:0 auto 14px;border-radius:18px;color:var(--emerald);background:var(--emerald-soft);border:0;box-shadow:none}
.kosong h3{color:var(--ink);font-size:1.08rem;letter-spacing:-.015em}
.kosong p{color:var(--ink-2)}
/* ---------- Selawat: kad krim emas ---------- */
.selawat-strip{background:linear-gradient(135deg,var(--gold-soft),var(--surface) 75%);border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);box-shadow:var(--shadow);color:var(--ink);border-radius:var(--r-xl)}
.selawat-strip::after{display:none}
.selawat-soalan{color:var(--gold-ink)}
.selawat-ar{color:var(--emerald)}
.selawat-maksud{color:var(--ink-2)}
.selawat-btn{background:var(--surface);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);color:var(--ink);box-shadow:var(--shadow);border-radius:16px}
.selawat-n{color:var(--gold-ink)}
.selawat-btn-tx{color:var(--ink-3)}
/* Musim (Ramadan/Maulid) — kekal berseni, bayang lebih lembut */
.musim-k{border-radius:var(--r-lg);box-shadow:var(--shadow-hi)}
/* Statistik, kalendar, tindakan */
.jalur-stat>div,.stat>div,.pusat-stat>div{border-radius:16px;box-shadow:var(--shadow)}
.jalur-stat .i{color:var(--emerald)}
.jalur-stat strong{font-size:1.4rem;font-weight:800;letter-spacing:-.03em}
.jalur-stat span{font-size:.66rem;letter-spacing:.06em}
.kad-kalendar{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}
.kad-kalendar .kk-ikon{background:var(--emerald-soft);border:0;color:var(--emerald)}
.kad-kalendar strong{color:var(--ink)}
.kad-kalendar span{color:var(--ink-3)}
.kad-kalendar .kk-baki{background:var(--gold-soft);border:0}
.kad-kalendar .kk-baki b{color:var(--gold-ink)}
.kad-kalendar .kk-baki small{color:var(--ink-3)}
.kt{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}
.kt span{color:var(--ink-3)}
.pusat-kepala{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}
.pusat-kepala::after{display:none}
.pusat-kepala small{color:var(--gold-ink)}
.pusat-kepala p{color:var(--ink-3)}
.pusat-kepala .pk-ikon{background:var(--emerald);color:var(--on-emerald);box-shadow:none}
.buku-kad .bk-ik,.buku-tema .bt-ik{background:var(--emerald-soft);color:var(--emerald);border:0}
.negeri-row,.ustaz-baris,.u-minggu,.tarikh-baris,.buku-kad,.buku-tema,.kad-video,.kad-klip{border-radius:16px}
/* CTA daftar */
.cta{border-radius:var(--r-xl);background:radial-gradient(70% 80% at 100% 0%,rgba(46,196,140,.35),transparent 60%),linear-gradient(150deg,#0B5E45,#073B2C);box-shadow:0 20px 40px -28px rgba(6,40,29,.8);padding:24px 20px}
.cta h2{font-size:1.35rem;letter-spacing:-.03em}
/* Waktu solat desktop */
.solat-mini{background:radial-gradient(80% 60% at 100% 0%,rgba(46,196,140,.25),transparent 60%),linear-gradient(165deg,var(--hero-a),var(--hero-b));border:0;box-shadow:var(--shadow-hi);border-radius:var(--r-lg)}
.solat-mini li.seterus{background:#EDBE4F;box-shadow:none;animation:none}
/* Footer: gelap, rata, kemas */
.kaki{background:linear-gradient(165deg,#0B1A14,#060D0A);border:0;box-shadow:none;border-radius:var(--r-xl)}
.kaki-atas,.kaki-bawah{border-color:rgba(255,255,255,.08)}
/* Dialog */
dialog.helai{border-radius:26px 26px 0 0}
@media (min-width:720px){
dialog.helai{border-radius:26px}
}
/* Gerak: kekalkan muncul halus, buang kesan berkelip */
.sek-head h2,.sek-head p,.panel-kepala h1,.pusat-kepala h1,.panel-kepala p,.pusat-kepala p{animation:none}
.hero h1,.hero-cta,.trek{animation-name:naik-muncul}
/* Desktop: hero kiri, lebih editorial */
@media (min-width:720px){
.hero{border-radius:30px}
}
/* v5 tambahan */
.kad-kalendar .kk-pautan{color:var(--emerald);font-weight:700;margin-top:4px}
.selawat-strip{margin:16px 0 0}
.jalur-stat{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.jalur-stat>div{padding:12px 6px 10px}
.jalur-stat .i{width:18px;height:18px}
.jalur-stat strong{font-size:1.2rem}
.jalur-stat span{font-size:.58rem;line-height:1.25;display:block}
@media(max-width:560px){
.jalur-stat{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* v5 — pautan teroka di footer (boleh dirayap Google) */
.kaki-teroka{padding:4px 0 20px}
.kaki-negeri{display:flex;flex-wrap:wrap;gap:8px}
.kaki-negeri a{text-decoration:none;font-size:.82rem;font-weight:650;color:#E7EFEA;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.kaki-negeri a:hover{background:rgba(255,255,255,.12);color:#FFD968}
.kaki-hab{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:.86rem}
.kaki-hab a{text-decoration:none;color:#E7EFEA;font-weight:600}
.kaki-hab a:hover{color:#FFD968}
/* =====================================================================
   v6 — FEED & REEL
   Utama = news feed (gaya Facebook), Video = reel skrin penuh (gaya TikTok)
   ===================================================================== */
:root{--feed-bg:#EEF1EF;--like:#E11D48;--tiket:#064E3B;--tiket-ink:#A7F3D0;--emas-terang:#F2B53A}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){--feed-bg:#050B09;--tiket:#0B3B2E}
}
:root[data-theme="dark"]{--feed-bg:#050B09;--tiket:#0B3B2E}
body.mod-feed{background:var(--feed-bg)!important}
/* Bar tab bawah: Video di tengah */
.tabbar{grid-template-columns:repeat(5,1fr);align-items:center}
.tab-video{justify-self:center;width:54px;height:54px;margin-top:-18px;border-radius:18px;background:var(--ink);color:var(--bg);box-shadow:0 10px 22px -8px rgba(14,26,21,.55)}
.tab-video .lbl-r{display:none}
.tab-video .i{width:26px;height:26px}
.tab-video[aria-current="page"]{color:var(--bg)}
.tab-video[aria-current="page"]::before{display:none}
body.mod-reel .tabbar{background:#000;border-top-color:#1A1A1A}
body.mod-reel .tabbar .tab{color:#A3A3A3}
body.mod-reel .tabbar .tab-video{background:#fff;color:#000}
@media (min-width:720px){
.rail .tab-video{width:64px;height:62px;margin:0;border-radius:14px;background:none;color:var(--ink-3);box-shadow:none}
.rail .tab-video .lbl-r{display:inline}
.rail .tab-video .i{width:22px;height:22px}
.rail .tab-video[aria-current="page"]{color:var(--emerald)}
.rail .tab-video[aria-current="page"]::before{display:block}
}
@media (min-width:1180px){
.rail .tab-video{width:100%;height:48px}
}
/* ---------- FEED ---------- */
.feed{display:flex;flex-direction:column;gap:8px;margin:0 -16px;padding-bottom:8px}
.feed>*{background:var(--surface)}
@media (min-width:720px){
.feed{margin:16px auto 0;max-width:620px;gap:14px}
.feed>*{border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
}
.fs-solat{display:flex;align-items:center;gap:10px;padding:12px 16px}
.fs-pil{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:var(--tiket);color:#fff;border-radius:14px;padding:10px 12px;border:0;text-align:left;font:inherit}
.fs-pil .titik{flex:none;width:8px;height:8px;border-radius:50%;background:var(--emas-terang);box-shadow:0 0 0 4px rgba(242,181,58,.25)}
.fs-pil b{font-size:.92rem;font-weight:800;white-space:nowrap}
.fs-pil span{font-size:.84rem;color:var(--tiket-ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-pil .i{margin-left:auto;color:var(--tiket-ink);width:18px;height:18px;transition:transform .2s}
.fs-pil[aria-expanded="true"] .i{transform:rotate(180deg)}
.fs-trek{padding:0 16px 14px}
.fs-trek .trek{margin-top:0;background:var(--tiket);border:0;color:#fff}
.fs-trek[hidden]{display:none}
.fs-tarikh{flex:none;text-align:right;line-height:1.25}
.fs-tarikh b{display:block;font-size:.8rem;font-weight:800}
.fs-tarikh small{font-size:.74rem;color:var(--ink-3);font-weight:650}
/* Stories */
.cerita{display:flex;gap:14px;overflow-x:auto;padding:14px 16px;scrollbar-width:none}
.cerita::-webkit-scrollbar{display:none}
.cr{flex:none;width:68px;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink);font:inherit}
.cr-cincin{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#059669,#F2B53A,#059669)}
.cr-cincin.biasa{background:var(--line)}
.cr .kad-ava,.cr-muka{width:58px!important;height:58px!important;border-radius:50%!important;border:3px solid var(--surface)!important;font-size:1rem;display:grid;place-items:center;font-weight:800}
.cr-muka{background:#059669;color:#fff}
.cr-muka .i{width:24px;height:24px}
.cr-nama{font-size:.74rem;font-weight:700;max-width:68px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Post */
.fp{padding:14px 0 2px}
.fp-kepala{display:flex;align-items:center;gap:10px;padding:0 16px 12px}
.fp-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.92rem;flex:none;background-size:cover;background-position:center 22%}
.fp-av .i{width:20px;height:20px}
.fp-siapa{flex:1;min-width:0}
.fp-nama{display:flex;align-items:center;gap:4px;font-size:.95rem;font-weight:800;line-height:1.25;border:0;background:none;padding:0;color:inherit;font-family:inherit;text-align:left;max-width:100%}
.fp-nama span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-sah{flex:none;width:16px;height:16px;color:#059669}
.fp-meta{font-size:.8rem;color:var(--ink-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-teks{padding:0 16px 10px;font-size:.95rem;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tiket{margin:0 16px;border-radius:20px;background:var(--tiket);color:#fff;padding:16px;display:flex;gap:14px;align-items:center}
.tk-kiri{flex:none;width:88px;text-align:center;border-right:1px solid rgba(255,255,255,.18);padding-right:12px}
.tk-hari{font-size:.72rem;font-weight:800;letter-spacing:.09em;color:var(--tiket-ink)}
.tk-masa{font-size:1.9rem;font-weight:900;letter-spacing:-.05em;line-height:1.05;color:var(--emas-terang)}
.tk-masa.kata{font-size:1.25rem;letter-spacing:-.02em;padding:4px 0 2px}
.tk-ampm{font-size:.74rem;font-weight:700;color:#D1FAE5}
.tk-kanan{min-width:0;flex:1}
.tk-ustaz{display:block;font-size:1.18rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:#fff;border:0;background:none;padding:0;font-family:inherit;text-align:left;cursor:pointer}
.tk-kitab{font-size:.86rem;color:#D1FAE5;font-weight:600;margin-top:4px}
.tk-nota{font-size:.76rem;color:var(--tiket-ink);font-weight:650;margin-top:2px}
.tk-lencana{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.74rem;font-weight:800;color:#064E3B;background:var(--tiket-ink);border-radius:999px;padding:4px 10px}
.tk-lencana.live{background:#FDE68A;color:#713F12}
.tk-lencana.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#DC2626;animation:nadi 1.6s infinite}
.fp-poster{display:block;position:relative;height:230px;overflow:hidden;background:#0B2E24;color:#fff;border:0;padding:0;width:100%;text-align:left;font-family:inherit;cursor:pointer}
.fp-poster img{width:100%;height:100%;object-fit:cover}
.fp-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72))}
.fp-poster .pt-tarikh{position:absolute;left:16px;top:16px;z-index:1;width:62px;border-radius:14px;background:var(--emas-terang);color:#231903;text-align:center;padding:7px 0}
.fp-poster .pt-tarikh b{display:block;font-size:1.6rem;line-height:1;font-weight:900}
.fp-poster .pt-tarikh span{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.fp-poster .pt-teks{position:absolute;left:16px;right:16px;bottom:14px;z-index:1}
.fp-poster .pt-jenis{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--emas-terang)}
.fp-poster .pt-tajuk{font-size:1.32rem;font-weight:900;letter-spacing:-.03em;line-height:1.15;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fp-poster .pt-lok{font-size:.82rem;color:#D1FAE5;font-weight:600;margin-top:4px}
.fp-video{display:block;position:relative;aspect-ratio:16/9;background:#111814;border:0;padding:0;width:100%;cursor:pointer;overflow:hidden}
.fp-video img{width:100%;height:100%;object-fit:cover}
.fp-video .fv-main{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;color:#0E1A15;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.fp-video .fv-main svg{width:26px;height:26px;margin-left:3px}
.fp-video .tempoh{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.78);color:#fff;border-radius:6px;padding:3px 7px;font-size:.74rem;font-weight:800}
.fp-video .reel-tag{position:absolute;left:10px;bottom:10px;background:var(--like);color:#fff;border-radius:6px;padding:3px 8px;font-size:.74rem;font-weight:800}
.fp-senarai{margin:0 16px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.fp-senarai>div{display:flex;gap:12px;align-items:center;padding:11px 14px;border-top:1px solid var(--line)}
.fp-senarai>div:first-child{border-top:0}
.fp-senarai b{flex:none;width:58px;font-size:.82rem;color:var(--emerald)}
.fp-senarai span{min-width:0}
.fp-senarai strong{display:block;font-size:.9rem}
.fp-senarai small{display:block;font-size:.76rem;color:var(--ink-3);font-weight:600}
.fp-isi-pad{padding:0 16px}
.fp .selawat-strip{margin:0;border-radius:20px;box-shadow:none}
.fp .musim-k{width:100%;border-radius:20px}
.fp .kad-kalendar{box-shadow:none}
.fp-stat{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 8px;font-size:.8rem;color:var(--ink-3);font-weight:600;min-height:20px}
.fp-stat .hati-kecil{width:18px;height:18px;border-radius:50%;background:var(--like);display:inline-grid;place-items:center;vertical-align:-4px;margin-right:6px}
.fp-stat .hati-kecil svg{width:10px;height:10px;fill:#fff;stroke:none}
.fp-aksi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);margin:0 8px}
.fa{min-height:46px;border:0;background:none;display:flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:.86rem;font-weight:700;color:var(--ink-2);border-radius:10px;text-decoration:none}
.fa:hover{background:var(--surface-2)}
.fa .i{width:20px;height:20px}
.fa[data-suka][aria-pressed="true"]{color:var(--like)}
.fa[data-suka][aria-pressed="true"] .i{fill:var(--like);animation:degup .35s cubic-bezier(.2,.8,.2,1)}
.fa[data-act="simpanK"][aria-pressed="true"],.fa[data-act="simpanA"][aria-pressed="true"],.fa[data-act="simpanV"][aria-pressed="true"]{color:var(--emerald)}
.fa[aria-pressed="true"] .i-bm{fill:currentColor}
@keyframes degup{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.fp-kaki{padding:14px 16px 16px;font-size:.78rem;color:var(--ink-3);line-height:1.5;background:transparent!important;border:0!important;box-shadow:none!important}
.fp-cta{padding:20px 16px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(150deg,#0B5E45,#073B2C)!important;color:#ECF8F2}
.fp-cta h2{margin:0;font-size:1.2rem;letter-spacing:-.02em;color:#fff}
.fp-cta p{margin:0;font-size:.88rem;color:#BFE3D2}
.fp-cta .cta-row{display:flex;gap:8px;flex-wrap:wrap}
.fp-cta .btn-garis{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}
.fp-kosong{padding:28px 20px;text-align:center}
.fp-kosong h3{margin:8px 0 6px;font-size:1.05rem}
.fp-kosong p{margin:0 auto 14px;max-width:36ch;color:var(--ink-2);font-size:.9rem}
/* ---------- REEL (Video gaya TikTok) ---------- */
.reel{position:fixed;left:0;right:0;top:0;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));z-index:42;background:#000;color:#fff}
.reel-skrin{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.reel-skrin::-webkit-scrollbar{display:none}
.rs{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;display:grid;place-items:center;background:#000}
.rs-latar{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(28px) brightness(.45);transform:scale(1.1)}
.rs-bingkai{position:relative;z-index:1;background:#000;overflow:hidden}
.rs-bingkai.pendek{height:100%;width:min(100%,calc((100dvh - var(--tab-h)) * 9 / 16))}
.rs-bingkai.panjang{width:100%;aspect-ratio:16/9;max-height:100%}
.rs-bingkai iframe,.rs-bingkai .rs-fasad{position:absolute;inset:0;width:100%;height:100%;border:0}
.rs-fasad{padding:0;background:#000;cursor:pointer}
.rs-fasad img{width:100%;height:100%;object-fit:cover;opacity:.9}
.rs-fasad .rs-main{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center;color:#fff;backdrop-filter:blur(4px)}
.rs-fasad .rs-main svg{width:32px;height:32px;margin-left:4px}
.rs-tepi{position:absolute;right:8px;bottom:110px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:16px}
.rs-tb{border:0;background:none;color:#fff;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;min-width:52px;font:inherit;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.rs-tb svg{width:34px;height:34px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
.rs-tb .ikon-isi{fill:#fff;stroke:none}
.rs-tb small{font-size:.76rem;font-weight:800}
.rs-tb[data-suka][aria-pressed="true"] .ikon-isi{fill:#FE2C55;animation:degup .35s cubic-bezier(.2,.8,.2,1)}
.rs-tb[data-act="simpanV"][aria-pressed="true"] .ikon-isi{fill:var(--emas-terang)}
.rs-av{position:relative;margin-bottom:8px;border:0;background:none;padding:0}
.rs-av .kad-ava{width:50px!important;height:50px!important;border-radius:50%!important;border:2px solid #fff!important;font-size:1rem}
.rs-ikut{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;border:0;display:grid;place-items:center;background:#FE2C55;color:#fff;padding:0}
.rs-ikut svg{width:14px;height:14px}
.rs-ikut[aria-pressed="true"]{background:#fff;color:#FE2C55}
.rs-info{position:absolute;left:14px;right:84px;bottom:22px;z-index:3;text-shadow:0 1px 8px rgba(0,0,0,.75)}
.rs-info b{display:block;font-size:1rem;font-weight:800}
.rs-info p{margin:6px 0 0;font-size:.9rem;line-height:1.45;font-weight:500;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rs-chip{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.16);font-size:.76rem;font-weight:700;text-shadow:none;border:0;color:#fff;font-family:inherit;backdrop-filter:blur(6px)}
.rs-chip .i{width:15px;height:15px}
.reel-atas{position:absolute;top:0;left:0;right:0;z-index:5;height:calc(60px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent);pointer-events:none}
.reel-atas>*{pointer-events:auto}
.reel-tab{display:flex;gap:20px}
.reel-tab button{border:0;background:none;color:rgba(255,255,255,.62);font:inherit;font-size:1.02rem;font-weight:800;padding:6px 2px;border-bottom:3px solid transparent}
.reel-tab button[aria-pressed="true"]{color:#fff;border-bottom-color:#fff}
.reel-ib{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));width:44px;height:44px;border-radius:50%;border:0;background:none;color:#fff;display:grid;place-items:center}
.reel-ib.kiri{left:6px}
.reel-ib.kanan{right:6px}
.reel-ib .i{width:24px;height:24px}
.reel-kosong{height:100%;display:grid;place-items:center;text-align:center;padding:24px}
.reel-kosong h3{margin:10px 0 6px;font-size:1.1rem}
.reel-kosong p{margin:0 auto 16px;max-width:30ch;color:#BDBDBD;font-size:.9rem}
.reel-kosong .i{width:44px;height:44px;color:#FE2C55}
.hati-besar{position:absolute;left:50%;top:45%;z-index:4;width:110px;height:110px;margin:-55px 0 0 -55px;pointer-events:none;fill:#FE2C55;animation:hatiTerbang .8s ease-out forwards}
@keyframes hatiTerbang{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.15);opacity:1}60%{transform:scale(1);opacity:1}100%{transform:scale(1.4) translateY(-40px);opacity:0}}
.pustaka-atas{display:flex;align-items:center;gap:10px;margin:14px 0 4px}
@media (min-width:720px){
.reel{position:relative;left:auto;right:auto;top:auto;bottom:auto;z-index:1;height:calc(100dvh - var(--top-h) - 40px);max-width:460px;margin:20px auto 0;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-hi)}
.rs-bingkai.pendek{width:100%}
}
@media (prefers-reduced-motion:reduce){
.hati-besar,.fa[data-suka][aria-pressed="true"] .i,.rs-tb[data-suka][aria-pressed="true"] .ikon-isi{animation:none}
}
.rs-ikut .ya{display:none}
.rs-ikut[aria-pressed="true"] .ya{display:block}
.rs-ikut[aria-pressed="true"] .tidak{display:none}
@media (min-width:1180px){
.fs-solat,.fs-trek{display:none!important}
}
@media (max-width:420px){
.fs-pil{padding:10px}
.fs-pil .i{display:none}
.fs-tarikh small{display:none}
}
/* =====================================================================
   v6.1 — PRESTASI & SENTUHAN
   ===================================================================== */
html{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,a,[data-act]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* Tiada animasi masuk: kandungan terus muncul */
.grid>.kad,.grid>.kad-masjid-item,.musim>.musim-k,.stat>div,.pusat-stat>div,.kotak,.hero,.sek:first-of-type,.hero h1,.hero-cta,.trek{animation:none!important}
/* Kesan kaca (backdrop-filter) sangat berat ketika skrol di telefon: guna warna padu */
.topbar,.tabbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.topbar{background:var(--surface)}
.tabbar{background:var(--surface)}
.trek,.rs-chip,.rs-fasad .rs-main,.hero .btn-garis,.musim-k .ik{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* Hanya lukis post yang hampir kelihatan */
.feed>.fp,.grid>.kad,.video-grid>.kad-video,.ustaz-baris{content-visibility:auto;contain-intrinsic-size:auto 420px}
.ustaz-baris{contain-intrinsic-size:auto 76px}
.video-grid>.kad-video{contain-intrinsic-size:auto 96px}
/* Latar reel: lakaran kecil dibesarkan, tiada penapis kabur yang berat */
.rs-latar{inset:0;filter:none;transform:none;background-size:cover;opacity:.55}
.rs-latar::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
.rs{contain:strict}
.reel-skrin{-webkit-overflow-scrolling:touch}
/* Maklum balas sentuhan serta-merta */
.fa,.cr,.tab,.btn,.ibtn,.chip,.rs-tb,.fp-poster,.fp-video,.negeri-row,.hari,.ab{transition:transform .08s ease-out,background-color .12s}
.fa:active,.cr:active,.btn:active,.ibtn:active,.chip:active,.hari:active,.ab:active,.negeri-row:active{transform:scale(.96)}
.tab:active{transform:scale(.92)}
.rs-tb:active{transform:scale(.88)}
.fp-poster:active,.fp-video:active{transform:scale(.99)}
@media (hover:none){
.kad:hover,.musim-k:hover{transform:none!important}
}
/* =====================================================================
   v7 — Halaman masjid/ustaz, popular, poster, notifikasi, jadual selaras
   ===================================================================== */
/* Kad kuliah gaya feed di Jadual, Simpanan dll */
.grid>.fp{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.fp-aksi.lima{grid-template-columns:repeat(5,minmax(0,1fr))}
.fp-aksi.lima .fa{flex-direction:column;gap:2px;font-size:.72rem;min-height:52px}
.feed-dalam{margin:0;gap:12px}
.feed-dalam>*{border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
/* Kepala page (masjid & ustaz) */
.pg-kepala{margin:14px -16px 0;background:var(--surface);border-bottom:1px solid var(--line)}
.pg-cover{height:120px;background:radial-gradient(70% 90% at 100% 0%,rgba(46,196,140,.35),transparent 60%),linear-gradient(150deg,#0B5E45,#063B2C);overflow:hidden}
.pg-cover.ustaz{background:radial-gradient(70% 90% at 100% 0%,rgba(242,181,58,.28),transparent 60%),linear-gradient(150deg,#1E293B,#0B1220)}
.pg-cover svg{width:100%;height:100%;display:block}
.pg-isi{padding:0 16px 16px;margin-top:-44px;position:relative}
.pg-av{width:92px;height:92px;border-radius:50%;border:4px solid var(--surface);background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.pg-av .fp-av,.pg-av .kad-ava{width:100%!important;height:100%!important;border-radius:50%!important;font-size:1.7rem!important;border:0!important}
.pg-isi h1{margin:10px 0 2px;font-size:1.5rem;line-height:1.2;letter-spacing:-.03em;font-weight:800}
.pg-sub{margin:0;color:var(--ink-3);font-size:.88rem;font-weight:600;display:flex;align-items:center;gap:5px}
.pg-stat{display:flex;flex-wrap:wrap;gap:4px 16px;margin:10px 0 0;font-size:.86rem;color:var(--ink-2);font-weight:600}
.pg-stat b{color:var(--ink);font-weight:800;margin-right:2px}
.pg-butang{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pg-butang .btn{flex:1 1 auto;min-width:0}
.pg-tab{margin:14px 0}
.mj-hari{margin-bottom:14px}
.mj-hari h3{margin:0 0 8px;font-size:1rem;font-weight:800;display:flex;align-items:center;gap:8px}
.mj-baris{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;margin-bottom:8px}
.mj-masa{flex:none;width:96px;font-size:.82rem;font-weight:800;color:var(--emerald);line-height:1.3}
.mj-tx{flex:1;min-width:0}
.mj-ustaz{display:block;border:0;background:none;padding:0;font:inherit;font-weight:800;font-size:.95rem;color:var(--ink);text-align:left;cursor:pointer}
.mj-tx small{display:block;color:var(--ink-3);font-size:.78rem;font-weight:600;margin-top:2px}
@media (min-width:720px){
.pg-kepala{margin:16px 0 0;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.pg-cover{height:160px}
.pg-isi{padding:0 24px 20px}
.pg-butang .btn{flex:0 0 auto}
}
/* Direktori ustaz lebih kemas */
.ustaz-baris{border-radius:16px;padding:10px 12px}
.ustaz-baris .kad-ava{border-radius:50%!important}
.u-minggu{border-radius:14px}
/* Popular minggu ini */
.pop{padding-bottom:14px}
.pop-rel{display:flex;gap:10px;overflow-x:auto;padding:0 16px 2px;scrollbar-width:none;scroll-snap-type:x mandatory}
.pop-rel::-webkit-scrollbar{display:none}
.pop-kad{flex:0 0 150px;scroll-snap-align:start;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:4px;font:inherit;color:inherit;min-height:150px;position:relative}
.pop-kad img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:#111814}
.pop-kad b{font-size:.86rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pop-kad small{font-size:.74rem;color:var(--ink-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-kuliah{background:var(--tiket);color:#fff;border-color:transparent}
.pop-kuliah small{color:var(--tiket-ink)}
.pop-hari{font-size:.72rem;font-weight:800;color:var(--emas-terang)}
.pop-acara .pop-hari{color:var(--emerald)}
.pop-hati{margin-top:auto;font-size:.76rem;font-weight:800;display:flex;align-items:center}
.pop-hati .hati-kecil{width:16px;height:16px;border-radius:50%;background:var(--like);display:inline-grid;place-items:center;margin-right:5px}
.pop-hati .hati-kecil svg{width:9px;height:9px;fill:#fff}
#slotPopular:empty{display:none}
/* Notifikasi */
.notis-kad{padding:14px 16px}
.notis-isi{display:flex;gap:12px;align-items:flex-start}
.notis-ik{flex:none;width:46px;height:46px;border-radius:14px;background:var(--gold-soft);color:var(--gold-ink);display:grid;place-items:center}
.notis-isi b{display:block;font-size:1rem}
.notis-isi p{margin:2px 0 0;font-size:.86rem;color:var(--ink-2)}
.notis-isi .ibtn{margin-left:auto;flex:none;width:36px;height:36px}
.notis-butang{margin-top:12px}
/* Poster */
.poster-pratonton{display:grid;place-items:center;min-height:320px;background:var(--surface-2);border-radius:16px;overflow:hidden;color:var(--ink-3);font-weight:700}
.poster-pratonton img{width:100%;max-width:420px;height:auto;display:block;border-radius:12px;margin:auto}
.u-minggu{flex-wrap:wrap;row-gap:6px;align-items:center}
.u-minggu>b{white-space:normal;display:inline-flex;align-items:center;gap:5px}
.u-minggu>.ustaz-tx{order:5;flex:1 0 100%}
.u-minggu>.ibtn,.u-minggu>a.ibtn{margin-left:auto}
.u-minggu>b+.ustaz-tx+.tag{margin-left:auto}
/* =====================================================================
   v9 — ACARA & MENU baharu
   ===================================================================== */
/* ---------- Acara ---------- */
.ac-kepala,.mn-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 12px}
.ac-kepala h1,.mn-kepala h1{margin:0;font-size:1.75rem;font-weight:900;letter-spacing:-.04em;line-height:1.1}
.ac-kepala p{margin:3px 0 0;font-size:.84rem;color:var(--ink-3);font-weight:600}
.ac-penapis{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.ac-penapis .chip .n{margin-left:2px}
.ac-seg button{gap:6px}
.ac-seg .i{width:15px;height:15px}
.ac-sorot{margin:0 -16px 18px}
.ac-sorot-rel{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 4px;scrollbar-width:none}
.ac-sorot-rel::-webkit-scrollbar{display:none}
.ac-sorot-kad{position:relative;scroll-snap-align:center;height:250px;border-radius:24px;overflow:hidden;border:0;padding:0;background:#0B2E24;color:#fff;text-align:left;font:inherit;cursor:pointer;box-shadow:var(--shadow-hi)}
.ac-sorot-kad img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ac-sorot-kad::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.78) 100%)}
.ac-sorot-atas{position:absolute;left:14px;right:14px;top:14px;z-index:1;display:flex;justify-content:space-between;align-items:flex-start}
.ac-tarikh{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:58px;height:62px;border-radius:16px;background:var(--emas-terang);color:#231903;line-height:1}
.ac-tarikh b{font-size:1.6rem;font-weight:900}
.ac-tarikh span{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-top:3px}
.ac-tarikh.kecil{width:52px;height:56px;border-radius:14px;background:var(--emerald-soft);color:var(--emerald);flex:none}
.ac-tarikh.kecil b{font-size:1.4rem}
.ac-status{font-size:.74rem;font-weight:800;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff}
.ac-status.kini{background:#DC2626}
.ac-sorot-teks{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:flex;flex-direction:column;gap:4px}
.ac-jenis{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--emas-terang)}
.ac-jenis .i{width:14px;height:14px}
.ac-tajuk{font-size:1.3rem;font-weight:900;letter-spacing:-.03em;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ac-lok{display:flex;align-items:center;gap:5px;font-size:.82rem;color:#D1FAE5;font-weight:600}
.ac-lok .i{width:14px;height:14px}
.ac-bulan{margin-bottom:18px}
.ac-bulan h2{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 10px;font-size:1.12rem;font-weight:800;letter-spacing:-.02em}
.ac-bulan h2 span{font-size:.78rem;color:var(--ink-3);font-weight:650}
.ac-baris{background:var(--surface);border:1px solid var(--line);border-radius:20px;margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow);content-visibility:auto;contain-intrinsic-size:auto 170px}
.ac-baris.lalu{opacity:.6}
.ac-baris-klik{display:flex;gap:12px;align-items:flex-start;width:100%;padding:14px 14px 10px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.ac-baris-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ac-baris-tx .ac-jenis{color:var(--gold-ink);font-size:.66rem}
.ac-baris-tx strong{font-size:1rem;line-height:1.3;letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ac-baris-tx small{display:flex;align-items:center;gap:4px;font-size:.78rem;color:var(--ink-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-baris-tx small .i{width:13px;height:13px;flex:none}
.ac-hidup{color:#DC2626}
.ac-gambar{flex:none;width:76px;height:76px;border-radius:14px;overflow:hidden;background:linear-gradient(150deg,#0B5E45,#063B2C)}
.ac-gambar img{width:100%;height:100%;object-fit:cover}
.ac-baris-aksi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);margin:0 8px}
.ac-baris-aksi .fa{min-height:42px;font-size:.8rem}
.ac-baris-aksi .fa .i{width:18px;height:18px}
.ac-hebah{display:flex;align-items:center;gap:12px;padding:16px;border-radius:20px;background:var(--gold-soft);border:1px dashed color-mix(in srgb,var(--gold) 50%,transparent);margin:6px 0 18px}
.ac-hebah>.i{color:var(--gold-ink);flex:none}
.ac-hebah b{display:block;font-size:.95rem}
.ac-hebah p{margin:2px 0 0;font-size:.8rem;color:var(--ink-2)}
.ac-hebah .btn{margin-left:auto;flex:none}
.ac-lalu summary{cursor:pointer;font-weight:800;color:var(--emerald);padding:8px 0 12px;list-style:none}
.ac-lalu summary::-webkit-details-marker{display:none}
.ac-kosong{text-align:center;padding:40px 20px;background:var(--surface);border:1px solid var(--line);border-radius:22px}
.ac-kosong>.i{color:var(--emerald);width:40px;height:40px;margin:0 auto 8px;display:block}
.ac-kosong h3{margin:0 0 6px;font-size:1.1rem}
.ac-kosong p{margin:0 auto 16px;max-width:34ch;color:var(--ink-2);font-size:.9rem}
@media (min-width:720px){
.ac-sorot{margin:0 0 20px}
.ac-sorot-rel{grid-auto-columns:minmax(320px,46%);padding:0 0 4px}
.ac-sorot-kad{height:280px}
}
/* Helaian butiran acara */
.ad-poster{position:relative;height:200px;border-radius:20px;overflow:hidden;background:linear-gradient(150deg,#0B5E45,#063B2C);margin-bottom:14px}
.ad-poster img{width:100%;height:100%;object-fit:cover}
.ad-poster .ac-tarikh{position:absolute;left:12px;top:12px}
.ad-poster .ac-status{position:absolute;right:12px;top:12px}
.ad-tajuk{margin:0 0 12px;font-size:1.35rem;font-weight:900;letter-spacing:-.03em;line-height:1.2}
.ad-butiran{display:flex;flex-direction:column;gap:2px;background:var(--surface-3);border:1px solid var(--line);border-radius:16px;padding:4px 14px;margin-bottom:12px}
.ad-baris{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.ad-baris:first-child{border-top:0}
.ad-ik{flex:none;width:36px;height:36px;border-radius:11px;background:var(--emerald-soft);color:var(--emerald);display:grid;place-items:center}
.ad-ik .i{width:18px;height:18px}
.ad-baris small{display:block;font-size:.72rem;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.ad-baris b{display:block;font-size:.95rem;font-weight:700}
.ad-pautan{border:0;background:none;padding:0;font:inherit;font-weight:800;color:var(--emerald);text-align:left;cursor:pointer}
.ad-teks{margin:0 0 12px;color:var(--ink-2);line-height:1.6}
.ad-pautan-baris{display:flex;gap:8px;flex-wrap:wrap}
.helai-kaki .btn[data-suka][aria-pressed="true"]{color:var(--like);border-color:color-mix(in srgb,var(--like) 40%,var(--line))}
.helai-kaki .btn[data-suka][aria-pressed="true"] .i{fill:var(--like)}
.ac-baris-aksi .fa[data-suka][aria-pressed="true"] .suka-n,.ac-baris-aksi .fa[data-suka][aria-pressed="true"] span{color:var(--like)}
/* ---------- Menu ---------- */
.mn-profil{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);font:inherit;color:inherit;text-align:left;margin-bottom:14px}
.mn-av{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--emerald-2),var(--emerald));color:#fff;font-weight:800;font-size:1.1rem}
:root[data-theme="dark"] .mn-av{color:#04140D}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .mn-av{color:#04140D}
}
.mn-profil-tx{flex:1;min-width:0}
.mn-profil-tx b{display:block;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-profil-tx small{display:block;font-size:.8rem;color:var(--ink-3);font-weight:600}
.mn-profil>.i{color:var(--ink-3)}
.mn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:720px){
.mn-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.mn-jubin{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);font:inherit;color:inherit;text-align:left;min-height:112px}
.mn-jubin b{font-size:.95rem;margin-top:6px}
.mn-jubin small{font-size:.76rem;color:var(--ink-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mn-ik{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none}
.mn-ik .i{width:21px;height:21px}
.mn-ik.kecil{width:36px;height:36px;border-radius:11px;background:var(--surface-2);color:var(--ink-2)}
.w-hijau{background:#DCFCE7;color:#047857}
.w-emas{background:#FEF3C7;color:#B45309}
.w-merah{background:#FFE4E6;color:#E11D48}
.w-biru{background:#E0E7FF;color:#4338CA}
.w-ungu{background:#F3E8FF;color:#7E22CE}
.w-teal{background:#CCFBF1;color:#0F766E}
.w-kelabu{background:#E5E7EB;color:#374151}
.w-hijau2{background:#D1FAE5;color:#065F46}
:root[data-theme="dark"] .mn-ik:not(.kecil){filter:saturate(.9) brightness(.85)}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .mn-ik:not(.kecil){filter:saturate(.9) brightness(.85)}
}
.mn-sek{margin-top:22px}
.mn-sek h2{margin:0 0 10px;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.mn-ikut{padding:4px 0;margin:0}
.mn-kumpul{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.mn-baris{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;border-top:1px solid var(--line);background:none;font:inherit;color:inherit;text-align:left;min-height:60px}
.mn-kumpul>.mn-baris:first-child{border-top:0}
.mn-baris>span:nth-child(2){flex:1;min-width:0}
.mn-baris b{display:block;font-size:.95rem}
.mn-baris small{display:block;font-size:.78rem;color:var(--ink-3);font-weight:600}
.mn-baris>.i{color:var(--ink-3);flex:none}
.mn-nilai{font-size:.84rem;font-weight:700;color:var(--emerald);white-space:nowrap}
.mn-tema .seg{flex:none;width:190px}
.mn-suis{flex:none;width:44px;height:26px;border-radius:999px;background:var(--line);position:relative;transition:background .2s}
.mn-suis::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.mn-suis.on{background:var(--emerald)}
.mn-suis.on::after{transform:translateX(18px)}
.mn-keluar{margin-top:18px}
.mn-kaki{text-align:center;font-size:.76rem;color:var(--ink-3);margin:18px 0 6px}
.mn-jubin:active,.mn-baris:active,.mn-profil:active,.ac-sorot-kad:active,.ac-baris-klik:active{transform:scale(.98)}
.mn-jubin,.mn-baris,.mn-profil,.ac-sorot-kad,.ac-baris-klik{transition:transform .08s ease-out}
/* v10 — Lapor salah, laporan admin, backup */
.fp-lagi{margin-left:auto;flex:none;width:40px;height:40px;border:0;background:none;color:var(--ink-3)}
.fp-lagi .i{width:22px;height:22px}
.lp-ringkas{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:var(--emerald-soft)}
.lp-ringkas b{font-size:1rem}
.lp-ringkas span{font-size:.84rem;color:var(--ink-2);font-weight:600}
.lp-sebab{border:0;padding:0;margin:0;display:grid;gap:8px}
.lp-sebab legend{font-size:.8rem;font-weight:750;color:var(--ink-2);margin-bottom:8px;padding:0}
.lp-pilih{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;font-weight:650;font-size:.92rem}
.lp-pilih input{width:20px;height:20px;accent-color:var(--emerald);flex:none;margin:0}
.lp-pilih:has(input:checked){border-color:var(--emerald);background:var(--emerald-soft)}
.lp-kad{background:var(--surface);border:1px solid var(--line);border-left:4px solid #DC2626;border-radius:16px;padding:14px;margin-bottom:10px;box-shadow:var(--shadow)}
.lp-kad.selesai{border-left-color:var(--emerald);opacity:.75}
.lp-atas{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.lp-atas small{color:var(--ink-3);font-size:.76rem;font-weight:650}
.lp-sebab-t{display:block;font-size:1rem;margin-bottom:4px}
.lp-k{margin:0 0 6px;font-size:.88rem;color:var(--ink-2)}
.lp-catatan{margin:6px 0;padding:10px 12px;background:var(--surface-2);border-radius:12px;font-size:.9rem}
.lp-data{margin:4px 0 6px;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.lp-data dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:800}
.lp-data dd{margin:0;font-size:.88rem;font-weight:650;overflow-wrap:anywhere}
.lp-aksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.lp-backup{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.lp-backup p{margin:4px 0 0;font-size:.84rem;color:var(--ink-2);max-width:56ch}

/* Dasar Privasi dalam helaian */
.privasi-isi{line-height:1.7;font-size:.94rem}
.privasi-isi h2{font-size:1.05rem;margin:22px 0 6px;letter-spacing:-.01em}
.privasi-isi p,.privasi-isi li{color:var(--ink-2)}
.privasi-isi ul{padding-left:20px;margin:6px 0 10px}
.privasi-isi li{margin-bottom:6px}
.privasi-isi b{color:var(--ink)}
.privasi-isi .ringkas{background:var(--emerald-soft);border-radius:14px;padding:12px 14px;color:var(--ink)}
.privasi-tarikh{font-size:.82rem;font-weight:700;color:var(--ink-3);margin:0 0 8px}
.toast.amaran .i{color:#FBBF24}
/* ===== v4.2: Ajak kongsi (kad feed + pop-up) ===== */
.ajak-kad{padding:16px;background:linear-gradient(135deg,var(--surface) 0%,var(--surface) 55%,var(--gold-soft) 140%);border-color:color-mix(in srgb,var(--gold) 35%,var(--line))}
.ajak-atas{display:flex;gap:12px;align-items:flex-start}
.ajak-atas b{display:block;font-size:1.02rem;letter-spacing:-.01em}
.ajak-atas p{margin:3px 0 0;font-size:.86rem;color:var(--ink-2);line-height:1.45}
.ajak-atas .ibtn{margin-left:auto;flex:none;width:36px;height:36px}
.ajak-ik{flex:none;width:46px;height:46px;border-radius:14px;background:linear-gradient(160deg,#F1D27A,#D6A836);color:#2B1F04;display:grid;place-items:center;box-shadow:0 8px 18px -10px rgba(198,154,45,.9)}
.ajak-hadis{margin:12px 0 0;padding:10px 12px 10px 14px;border-left:3px solid var(--gold);background:color-mix(in srgb,var(--gold-soft) 70%,transparent);border-radius:0 12px 12px 0;font-size:.86rem;line-height:1.5;color:var(--ink);font-style:italic}
.ajak-hadis cite{display:block;margin-top:4px;font-style:normal;font-size:.74rem;font-weight:700;color:var(--gold-ink);letter-spacing:.02em}
.ajak-butang{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}
.ajak-butang .btn{min-height:44px}
.ajak-pop{display:grid;gap:14px}
.ajak-hero{display:flex;gap:14px;align-items:center}
.ajak-logo img{width:56px;height:56px;border-radius:16px;display:block;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.ajak-hero strong{display:block;font-size:1.05rem}
.ajak-hero p{margin:3px 0 0;font-size:.86rem;color:var(--ink-2);line-height:1.45}
.ajak-pop .ajak-hadis{margin:0}
.ajak-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ajak-grid .ajak-sal{flex:0 0 calc((100% - 16px) / 3)}
.ajak-logo{flex:none}
.ajak-sal{display:grid;justify-items:center;gap:6px;padding:12px 4px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:transform .12s ease,border-color .12s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ajak-sal:active{transform:scale(.96)}
.ajak-sal:hover{border-color:var(--gold)}
.aj-ik{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff}
.aj-ik b{font-size:1.25rem;font-weight:800;line-height:1}
.aj-wa{background:#128C4B}.aj-tg{background:#229ED9}.aj-fb{background:#1877F2}.aj-th{background:#111;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}.aj-salin{background:var(--emerald)}.aj-lain{background:var(--ink-3)}
.ajak-pratonton{font-size:.82rem;color:var(--ink-2)}
.ajak-pratonton summary{cursor:pointer;font-weight:600;color:var(--ink-2)}
.ajak-pratonton p{margin:8px 0 0;padding:10px 12px;border-radius:12px;background:var(--bg-2,rgba(127,127,127,.08));line-height:1.5;white-space:normal}
.ajak-terima{margin:0;display:flex;gap:6px;align-items:center;font-size:.82rem;color:var(--gold-ink)}
@media (min-width:720px){.ajak-grid .ajak-sal{flex-basis:calc((100% - 40px) / 6)}}
/* ===== v4.3: Post pentadbir, karusel panduan, semak masjid, poster QR, gambar jadual ===== */
.rasmi-av{background:#0B1813;overflow:hidden}
.rasmi-av img{width:100%;height:100%;object-fit:cover;display:block}
.fp-tutup{flex:none;width:34px;height:34px}
.fp-rasmi{border-top:3px solid var(--emerald)}
.fp-rasmi.disemat{border-top-color:var(--gold);background:linear-gradient(180deg,color-mix(in srgb,var(--gold-soft) 55%,var(--surface)) 0,var(--surface) 120px)}
.rasmi-isi{padding:0 16px}
.rasmi-isi h3{margin:0 0 6px;font-size:1.08rem;line-height:1.3;letter-spacing:-.01em}
.rasmi-isi p{margin:0 0 8px;color:var(--ink-2);font-size:.92rem;line-height:1.55}
.rasmi-gambar{display:block;width:100%;max-height:520px;object-fit:cover;margin:6px 0 4px;background:var(--surface-3)}
.rasmi-kaki{padding:8px 16px 14px}
.rasmi-kaki .btn{min-height:44px}
.cta-kecil{margin:10px 0 0;font-size:.84rem;color:var(--ink-3);text-align:center}
.cta-kecil .pautan{font-size:inherit}
/* Karusel panduan */
.fp-panduan{border-top:3px solid var(--gold)}
.pm-slaid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.pm-slaid::-webkit-scrollbar{display:none}
.pm-kad{flex:0 0 78%;scroll-snap-align:start;scroll-margin-left:16px;position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:18px;background:linear-gradient(160deg,#0A5A42,#0A3D2E);color:#EAF5EF;min-height:178px}
.pm-kad:nth-child(2){background:linear-gradient(160deg,#0D6B57,#0A4436)}
.pm-kad:nth-child(3){background:linear-gradient(160deg,#126451,#0B3B30)}
.pm-kad:nth-child(4){background:linear-gradient(160deg,#2B2410,#0B1813)}
.pm-no{position:absolute;top:10px;right:14px;font-size:2.6rem;font-weight:800;line-height:1;color:rgba(255,255,255,.14)}
.pm-ik{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#F1D27A}
.pm-kad b{font-size:1.02rem;margin-top:4px}
.pm-kad p{margin:0;font-size:.85rem;line-height:1.45;color:#C4DED2}
.pm-kad .btn{align-self:flex-start;margin-top:auto}
.pm-leret{margin-top:auto;display:inline-flex;align-items:center;gap:2px;font-size:.76rem;color:#9CC7B5}
.pm-titik{display:flex;justify-content:center;gap:6px;padding:8px 0 2px}
.pm-titik i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:width .2s,background .2s}
.pm-titik i.on{width:18px;border-radius:3px;background:var(--emerald)}
.pm-kaki{display:flex;gap:8px;flex-wrap:wrap}
.pm-kaki .btn{flex:1;min-width:140px}
@media (min-width:720px){.pm-kad{flex-basis:44%}}
/* Pusat kawalan: post */
.umum-baris{align-items:center;gap:10px;flex-wrap:wrap}
.umum-baris strong{display:flex;align-items:center;gap:4px}
.umum-pratonton{margin-top:6px;border:1px dashed var(--line);border-radius:16px;padding:10px 0 0;background:var(--surface-3)}
.umum-pratonton>small{display:block;padding:0 14px 6px;color:var(--ink-3);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
.umum-pratonton .fp{margin:0;border-radius:0 0 16px 16px;box-shadow:none}
/* Senarai semak panel masjid */
.semak-mula{margin:0 0 14px;border:1px solid color-mix(in srgb,var(--emerald) 30%,var(--line))}
.sm-atas{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.sm-atas small{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--emerald)}
.sm-atas h2{margin:2px 0 0;font-size:1.05rem}
.sm-peratus{font-size:1.4rem;font-weight:800;color:var(--emerald)}
.sm-bar{height:8px;border-radius:4px;background:var(--surface-3);margin:10px 0 12px;overflow:hidden}
.sm-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--emerald),#3DBE8E);transition:width .4s}
.sm-senarai{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sm-senarai li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.sm-senarai li:first-child{border-top:0}
.sm-tanda{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:#fff}
.sm-senarai li.siap .sm-tanda{background:var(--emerald);border-color:var(--emerald)}
.sm-senarai li.siap b{text-decoration:line-through;color:var(--ink-3)}
.sm-tx{flex:1;min-width:0}
.sm-tx b{display:block;font-size:.92rem}
.sm-tx small{display:block;font-size:.8rem;color:var(--ink-3)}
.sm-senarai .btn{flex:none}
/* Poster QR & gambar jadual */
.poster-qr img{display:block;width:100%;max-width:420px;margin:0 auto 12px;border-radius:12px;box-shadow:0 12px 30px -14px rgba(0,0,0,.45);border:1px solid var(--line)}
.gj-zon.ada{border-style:solid;border-color:var(--emerald)}
.gj-pratonton{display:block;width:100%;max-height:300px;object-fit:contain;border-radius:12px;border:1px solid var(--line);background:var(--surface-3)}
.gj-lihat img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.medan[hidden]{display:none}
/* Kandungan /panduan-masjid/ apabila dibuka dalam helaian */
.privasi-isi .langkah4{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);margin:12px 0 6px;padding:0;list-style:none}
.privasi-isi .langkah4 li{margin:0;padding:12px;border-radius:14px;background:var(--emerald-soft);color:var(--ink);font-size:.86rem;font-weight:650;line-height:1.4}
.privasi-isi .langkah4 li b{display:block;font-size:1.4rem;line-height:1;color:var(--gold);margin-bottom:4px}
.privasi-isi .butang-baris{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 6px}
.privasi-isi .butang-baris .btn{text-decoration:none;min-height:42px}
.privasi-isi .kotak-tip{border-left:4px solid var(--gold);background:var(--gold-soft);border-radius:0 14px 14px 0;padding:10px 12px;margin:12px 0;color:var(--ink);font-size:.9rem}
.privasi-isi .jadual-lajur{width:100%;border-collapse:collapse;font-size:.84rem;margin:8px 0 12px}
.privasi-isi .jadual-lajur th,.privasi-isi .jadual-lajur td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.privasi-isi .jadual-lajur th{background:var(--emerald-soft)}
.privasi-isi details{border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:8px 0}
.privasi-isi summary{cursor:pointer;font-weight:700;color:var(--ink)}
.privasi-isi details p{margin:8px 0 0}
/* ===== v4.3.2: Gambar masjid ===== */
.fp-av.av-foto{overflow:hidden;background:var(--surface-3);padding:0}
.fp-av.av-foto img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.pg-cover.ada-foto{position:relative;background:#063B2C}
.pg-cover.ada-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.pg-cover.ada-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,20,14,.15) 0%,rgba(4,20,14,.35) 55%,rgba(4,20,14,.78) 100%)}
.pg-av .fp-av.av-foto{border-radius:50%}
/* Avatar ustaz bergambar: jangan tunjuk inisial (tema gelap menimpa color:transparent) */
.kad-ava.has-img{color:transparent!important;text-shadow:none!important}
/* ===== v4.4 audit: skrin kecil (320–360px) ===== */
.kal-tengah{text-align:center;min-width:0;flex:1}
.kal-nav .btn{flex:none}
.kal-grid>*{min-width:0}
.ac-kepala>div{min-width:0}
.ac-kepala .btn{flex:none;white-space:nowrap}
.penapis-baris{flex-wrap:wrap}
.penapis-baris .btn{white-space:nowrap}
@media (max-width:380px){
  .kal-lbl{display:none}
  .kal-nav .btn{padding-left:12px;padding-right:12px}
  .kal-grid{gap:3px}
  .kal-sel{padding:4px 3px;min-height:50px;border-radius:9px}
  .kal-sel b{font-size:.86rem}
  .kal-sel small{font-size:.58rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kal-hari{font-size:.56rem;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis}
  .kal-sel .titik{right:3px;top:3px;width:6px;height:6px}
  .lbl-kecil{display:none}
  .ajak-butang{grid-template-columns:1fr 1fr}
}
/* Toast: left:50% menghadkan lebar kepada separuh skrin -> teks pecah 4 baris. Guna lebar kandungan. */
.toast{width:max-content;max-width:min(520px,calc(100vw - 32px))}
.toast .i{flex:none}