/* =====================================================================
   MASJID JAMI' ALMUBAAROK — Gaya Utama (publik)
   Tema: Emerald & Emas  |  Font: Plus Jakarta Sans + Amiri
   Responsif penuh (desktop, tablet, Android, HP) + efek 3D
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --emerald-900:#053024;
  --emerald-800:#064634;
  --emerald-700:#0a5c44;
  --emerald-600:#0b6e4f;
  --emerald-500:#0e8862;
  --emerald-300:#5fc6a3;
  --gold-600:#b8862b;
  --gold-500:#d4a437;
  --gold-400:#e3bd5e;
  --gold-300:#eccd80;
  --gold-200:#f3e2b0;
  --emerald-50:#eaf6f0;
  --bg-soft:#f1f8f4;
  --cream:#f7f5ee;
  --paper:#ffffff;
  --ink:#15241d;
  --ink-soft:#46564e;
  --line:rgba(11,110,79,.14);
  --shadow-sm:0 2px 10px rgba(5,48,36,.07);
  --shadow-md:0 14px 40px rgba(5,48,36,.13);
  --shadow-lg:0 30px 70px rgba(5,48,36,.22);
  --radius:18px;
  --radius-lg:26px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.arab{font-family:'Amiri',serif;direction:rtl}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}

/* ---- Tombol ---- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.6rem;border-radius:999px;border:none;cursor:pointer;
  font-weight:700;font-size:.96rem;font-family:inherit;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s;
  will-change:transform;
}
.btn-gold{background:linear-gradient(135deg,var(--gold-400),var(--gold-600));color:#3a2a05;box-shadow:0 10px 26px rgba(184,134,43,.4)}
.btn-gold:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 36px rgba(184,134,43,.55)}
.btn-emerald{background:linear-gradient(135deg,var(--emerald-500),var(--emerald-700));color:#fff;box-shadow:0 10px 26px rgba(11,110,79,.34)}
.btn-emerald:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 36px rgba(11,110,79,.5)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.45);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.26);transform:translateY(-3px)}
.btn-line{background:transparent;border:1.5px solid var(--emerald-600);color:var(--emerald-700)}
.btn-line:hover{background:var(--emerald-700);color:#fff;transform:translateY(-3px)}

/* =====================================================================
   TOPBAR — INFORMASI REAL-TIME (jam, tanggal, hitung mundur sholat)
   ===================================================================== */
.topbar{
  background:linear-gradient(90deg,var(--emerald-900),var(--emerald-700));
  color:#eafff6;font-size:.84rem;border-bottom:1px solid rgba(212,164,55,.25);
  position:relative;z-index:60;
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.45rem;flex-wrap:wrap}
.topbar .tdate{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.topbar .tdate .hijri{color:var(--gold-400);font-weight:700}
.topbar .tdate .dot{opacity:.4}
.topbar .tlive{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.topbar .clock{font-weight:800;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.topbar .next-prayer{display:flex;align-items:center;gap:.45rem}
.topbar .next-prayer b{color:var(--gold-400)}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--gold-400);box-shadow:0 0 0 0 rgba(227,189,94,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(227,189,94,0)}100%{box-shadow:0 0 0 0 rgba(227,189,94,0)}}

/* =====================================================================
   NAVBAR
   ===================================================================== */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(247,245,238,.82);backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s,background .3s;
}
.nav.scrolled{box-shadow:var(--shadow-sm);background:rgba(255,255,255,.92)}
.nav .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.6rem}
.brand{display:flex;align-items:center;gap:.7rem}
.brand .logo{width:50px;height:50px;flex:none;filter:drop-shadow(0 6px 12px rgba(11,110,79,.3))}
.brand .bname{font-weight:800;line-height:1.05;font-size:1.08rem;color:var(--emerald-800)}
.brand .btag{font-size:.7rem;color:var(--gold-600);font-weight:700;text-transform:uppercase;letter-spacing:1.4px}
.menu{display:flex;align-items:center;gap:.25rem}
.menu a{
  padding:.55rem .9rem;border-radius:10px;font-weight:600;font-size:.95rem;color:var(--ink-soft);
  position:relative;transition:color .25s,background .25s;
}
.menu a::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.32rem;height:2px;background:var(--gold-500);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.menu a:hover{color:var(--emerald-700)}
.menu a:hover::after,.menu a.active::after{transform:scaleX(1)}
.menu a.active{color:var(--emerald-800)}
.nav-cta{margin-left:.4rem}
.burger{display:none;background:none;border:none;cursor:pointer;width:44px;height:44px;border-radius:12px;color:var(--emerald-800)}
.burger svg{width:26px;height:26px}

/* =====================================================================
   HERO SLIDER 5 SLIDE (efek 3D)
   ===================================================================== */
.hero{position:relative;height:clamp(440px,72vh,640px);overflow:hidden;perspective:1500px;background:var(--emerald-900)}
.slides{position:absolute;inset:0;transform-style:preserve-3d}
.slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transform:translateZ(-160px) scale(1.08) rotateY(7deg);
  transition:opacity 1s var(--ease),transform 1.2s var(--ease),visibility 1s;
}
.slide.active{opacity:1;visibility:visible;transform:translateZ(0) scale(1) rotateY(0)}
.slide .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.12);transition:transform 7s linear}
.slide.active .bg{transform:scale(1)}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(5,48,36,.92) 0%,rgba(6,70,52,.72) 45%,rgba(5,48,36,.45) 100%);z-index:1}
.slide .pattern-overlay{position:absolute;inset:0;z-index:2;opacity:.16;background-size:230px;mix-blend-mode:overlay}
.slide-inner{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:680px}
.slide .eyebrow{display:inline-flex;align-items:center;gap:.5rem;color:var(--gold-400);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.78rem;margin-bottom:1rem;opacity:0;transform:translateY(20px);transition:.7s var(--ease) .2s}
.slide h1{font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.08;color:#fff;font-weight:800;margin-bottom:1rem;opacity:0;transform:translateY(28px);transition:.8s var(--ease) .35s}
.slide p{color:#d8f0e6;font-size:clamp(1rem,1.6vw,1.18rem);margin-bottom:1.8rem;max-width:540px;opacity:0;transform:translateY(28px);transition:.8s var(--ease) .5s}
.slide .actions{display:flex;gap:.8rem;flex-wrap:wrap;opacity:0;transform:translateY(28px);transition:.8s var(--ease) .65s}
.slide.active .eyebrow,.slide.active h1,.slide.active p,.slide.active .actions{opacity:1;transform:translateY(0)}

/* dekorasi kubah melayang di hero */
.hero-dome{position:absolute;right:-40px;bottom:-30px;width:min(46%,440px);z-index:2;opacity:.9;animation:float 6s ease-in-out infinite;pointer-events:none;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4))}
@keyframes float{50%{transform:translateY(-18px)}}

/* navigasi slider */
.slider-nav{position:absolute;z-index:6;bottom:26px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:.6rem}
.dot{width:11px;height:11px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.4);transition:.3s}
.dot.active{background:var(--gold-500);width:34px;border-radius:6px}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px);display:grid;place-items:center;transition:.3s;border:1px solid rgba(255,255,255,.3)}
.arrow:hover{background:var(--gold-500);color:#3a2a05;transform:translateY(-50%) scale(1.08)}
.arrow.prev{left:18px}.arrow.next{right:18px}
.arrow svg{width:22px;height:22px}

/* =====================================================================
   STRIP JADWAL SHOLAT (di bawah hero, mengambang -3D)
   ===================================================================== */
.prayer-strip{position:relative;z-index:20;margin-top:-58px;padding-inline:20px}
.prayer-card{
  max-width:var(--maxw);margin-inline:auto;background:linear-gradient(135deg,#fff,#fbfaf4);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid rgba(212,164,55,.25);
  padding:1.4rem 1.2rem;display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;position:relative;overflow:hidden;
}
.prayer-card::before{content:"";position:absolute;top:0;left:0;width:6px;height:100%;background:linear-gradient(var(--gold-500),var(--emerald-600))}
.ptime{text-align:center;padding:.7rem .3rem;border-radius:14px;transition:transform .3s var(--ease),background .3s}
.ptime .lbl{font-size:.74rem;font-weight:700;letter-spacing:.5px;color:var(--ink-soft);text-transform:uppercase}
.ptime .val{font-size:clamp(1.05rem,2.4vw,1.5rem);font-weight:800;color:var(--emerald-800);font-variant-numeric:tabular-nums;line-height:1.2}
.ptime .ar{font-family:'Amiri',serif;font-size:.95rem;color:var(--gold-600);margin-top:-2px}
.ptime.now{background:linear-gradient(135deg,var(--emerald-600),var(--emerald-800));transform:translateY(-6px) scale(1.04);box-shadow:var(--shadow-md)}
.ptime.now .lbl,.ptime.now .val,.ptime.now .ar{color:#fff}
.ptime.now .lbl{color:var(--gold-300)}

/* =====================================================================
   SECTION & JUDUL
   ===================================================================== */
section{position:relative}
.section{padding-block:clamp(3.4rem,7vw,6rem)}
.section-head{text-align:center;max-width:640px;margin-inline:auto;margin-bottom:3rem}
.section-head.left{text-align:left;margin-inline:0}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;color:var(--gold-600);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.78rem;margin-bottom:.8rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold-500)}
.section-head.center .eyebrow::after{content:"";width:26px;height:2px;background:var(--gold-500)}
.section-title{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:800;line-height:1.12;color:var(--emerald-900)}
.section-title em{font-family:'Amiri',serif;font-style:italic;color:var(--gold-600);font-weight:700}
.section-sub{color:var(--ink-soft);margin-top:.7rem}

/* basmalah dekoratif */
.basmalah{text-align:center;font-family:'Amiri',serif;font-size:clamp(1.6rem,4vw,2.4rem);color:var(--emerald-700);padding:2rem 0 0}

/* =====================================================================
   SAMBUTAN / WELCOME
   ===================================================================== */
.welcome{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.welcome .visual{position:relative;perspective:1000px}
.welcome .visual .frame{
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);
  transform:rotateY(-6deg) rotateX(2deg);transition:transform .6s var(--ease);
  background:linear-gradient(135deg,var(--emerald-700),var(--emerald-900));aspect-ratio:4/3;
}
.welcome .visual:hover .frame{transform:rotateY(0) rotateX(0)}
.welcome .badge-float{position:absolute;bottom:-22px;left:-22px;background:#fff;border-radius:18px;padding:1rem 1.2rem;box-shadow:var(--shadow-md);display:flex;gap:.8rem;align-items:center;border:1px solid var(--line)}
.welcome .badge-float .num{font-size:1.8rem;font-weight:800;color:var(--gold-600)}
.welcome .badge-float .t{font-size:.82rem;color:var(--ink-soft);line-height:1.3}
.welcome .text p{color:var(--ink-soft);margin-bottom:1rem}

/* =====================================================================
   KARTU (berita, kegiatan) — efek tilt 3D
   ===================================================================== */
.grid{display:grid;gap:1.6rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.card{
  background:var(--paper);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  transform-style:preserve-3d;will-change:transform;display:flex;flex-direction:column;
}
.tilt:hover{box-shadow:var(--shadow-lg)}
.card .thumb{aspect-ratio:16/10;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--emerald-600),var(--emerald-900))}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .thumb img{transform:scale(1.07)}
.card .tag{position:absolute;top:12px;left:12px;background:var(--gold-500);color:#3a2a05;font-size:.72rem;font-weight:800;padding:.3rem .7rem;border-radius:999px;z-index:2;text-transform:uppercase;letter-spacing:.5px}
.card .body{padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card .meta{font-size:.8rem;color:var(--gold-600);font-weight:600;display:flex;align-items:center;gap:.4rem}
.card h3{font-size:1.12rem;font-weight:700;color:var(--emerald-900);line-height:1.3}
.card p{font-size:.92rem;color:var(--ink-soft);flex:1}
.card .more{font-weight:700;color:var(--emerald-700);font-size:.9rem;display:inline-flex;align-items:center;gap:.35rem;margin-top:.3rem}
.card .more svg{width:16px;height:16px;transition:transform .3s}
.card:hover .more svg{transform:translateX(4px)}

/* kartu agenda (event) */
.event{display:flex;gap:1.1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s}
.event:hover{transform:translateX(6px);box-shadow:var(--shadow-md)}
.event .date{flex:none;width:74px;text-align:center;background:linear-gradient(160deg,var(--emerald-600),var(--emerald-800));color:#fff;border-radius:14px;padding:.6rem .2rem;align-self:flex-start}
.event .date .d{font-size:1.7rem;font-weight:800;line-height:1}
.event .date .m{font-size:.74rem;text-transform:uppercase;letter-spacing:.5px;color:var(--gold-300)}
.event .info h4{color:var(--emerald-900);font-size:1.05rem;margin-bottom:.25rem}
.event .info .detail{font-size:.86rem;color:var(--ink-soft);display:flex;gap:1rem;flex-wrap:wrap;margin-top:.3rem}
.event .info .detail span{display:inline-flex;align-items:center;gap:.3rem}
.event .info .detail svg{width:15px;height:15px;color:var(--gold-600)}

/* =====================================================================
   PITA STATISTIK
   ===================================================================== */
.stats{background:linear-gradient(120deg,var(--emerald-800),var(--emerald-900));color:#fff;position:relative;overflow:hidden}
.stats::after{content:"";position:absolute;inset:0;background-size:200px;opacity:.07}
.stats .grid{grid-template-columns:repeat(4,1fr);text-align:center;position:relative;z-index:1}
.stat .n{font-size:clamp(2rem,5vw,3rem);font-weight:800;color:var(--gold-400);font-variant-numeric:tabular-nums}
.stat .l{color:#cfe9de;font-weight:600;letter-spacing:.5px}

/* =====================================================================
   DONASI CTA
   ===================================================================== */
.donasi-cta{background:linear-gradient(120deg,var(--gold-500),var(--gold-600));border-radius:var(--radius-lg);padding:clamp(2rem,5vw,3.4rem);color:#3a2a05;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}
.donasi-cta::after{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.15)}
.donasi-cta .inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.donasi-cta h2{font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:800;max-width:560px}
.donasi-cta p{margin-top:.5rem;max-width:520px;font-weight:500}

/* =====================================================================
   GALERI
   ===================================================================== */
.galeri-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.galeri-item{border-radius:16px;overflow:hidden;aspect-ratio:1;position:relative;cursor:pointer;box-shadow:var(--shadow-sm);background:linear-gradient(135deg,var(--emerald-600),var(--emerald-900))}
.galeri-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.galeri-item::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(5,48,36,.7));opacity:0;transition:.4s}
.galeri-item:hover img{transform:scale(1.12)}
.galeri-item:hover::after{opacity:1}
.galeri-item .cap{position:absolute;bottom:10px;left:12px;right:12px;color:#fff;font-size:.85rem;font-weight:600;opacity:0;transform:translateY(8px);transition:.4s;z-index:1}
.galeri-item:hover .cap{opacity:1;transform:translateY(0)}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{background:linear-gradient(160deg,var(--emerald-900),#031f17);color:#cfe9de;padding-top:3.4rem;position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gold-500),var(--emerald-500),var(--gold-500))}
.footer .grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.2rem}
.footer h4{color:#fff;font-size:1.05rem;margin-bottom:1.1rem;position:relative;padding-bottom:.6rem}
.footer h4::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--gold-500)}
.footer .fbrand{display:flex;gap:.8rem;align-items:center;margin-bottom:1rem}
.footer .fbrand .logo{width:54px}
.footer .fbrand b{color:#fff;font-size:1.15rem}
.footer p{font-size:.92rem;margin-bottom:.7rem}
.footer a{font-size:.92rem;color:#bfe0d3;transition:color .25s,padding .25s;display:inline-block}
.footer ul li{margin-bottom:.55rem}
.footer ul a:hover{color:var(--gold-400);padding-left:5px}
.footer .contact-row{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.8rem;font-size:.9rem}
.footer .contact-row svg{width:18px;height:18px;color:var(--gold-400);flex:none;margin-top:3px}
.socials{display:flex;gap:.6rem;margin-top:1rem}
.socials a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:.3s}
.socials a:hover{background:var(--gold-500);color:#3a2a05;transform:translateY(-3px)}
.socials svg{width:19px;height:19px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:2.6rem;padding-block:1.3rem;text-align:center;font-size:.86rem;color:#9fc4b6}
.footer-bottom a{color:var(--gold-400)}

/* tombol WhatsApp mengambang */
.wa-float{position:fixed;right:20px;bottom:22px;z-index:80;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px rgba(37,211,102,.5);transition:transform .3s;animation:float 4s ease-in-out infinite}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:30px;height:30px}

/* tombol ke atas */
.to-top{position:fixed;right:20px;bottom:90px;z-index:79;width:46px;height:46px;border-radius:14px;background:var(--emerald-700);color:#fff;display:grid;place-items:center;border:none;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:.35s;box-shadow:var(--shadow-md)}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top svg{width:22px;height:22px}

/* =====================================================================
   PAGE HEADER (halaman dalam)
   ===================================================================== */
.page-hero{background:linear-gradient(120deg,var(--emerald-800),var(--emerald-900));color:#fff;padding:clamp(2.6rem,6vw,4.4rem) 0 clamp(2.6rem,6vw,4rem);position:relative;overflow:hidden;text-align:center}
.page-hero::after{content:"";position:absolute;inset:0;background-size:200px;opacity:.08}
.page-hero .inner{position:relative;z-index:1}
.page-hero h1{font-size:clamp(1.9rem,5vw,3rem);font-weight:800}
.breadcrumb{display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:.7rem;color:#bfe0d3;font-size:.9rem}
.breadcrumb a:hover{color:var(--gold-400)}
.breadcrumb .sep{opacity:.5}

/* konten artikel */
.prose{max-width:780px;margin-inline:auto}
.prose img{border-radius:14px;margin:1.2rem 0}
.prose p{margin-bottom:1.1rem;color:var(--ink-soft)}
.prose h2,.prose h3{color:var(--emerald-900);margin:1.6rem 0 .7rem}

/* form */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.4rem,4vw,2.4rem);box-shadow:var(--shadow-sm)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;margin-bottom:.4rem;color:var(--emerald-900);font-size:.92rem}
.field input,.field textarea,.field select{
  width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:12px;font-family:inherit;font-size:.96rem;background:#fbfcfb;transition:.25s;color:var(--ink)
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--emerald-500);background:#fff;box-shadow:0 0 0 4px rgba(14,136,98,.12)}

/* alert */
.alert{padding:.95rem 1.2rem;border-radius:12px;margin-bottom:1.2rem;font-weight:600;font-size:.93rem;display:flex;gap:.6rem;align-items:center}
.alert svg{width:20px;height:20px;flex:none}
.alert-success{background:#e7f6ee;color:#0a5c3a;border:1px solid #b6e2c9}
.alert-error{background:#fdecec;color:#9b2c2c;border:1px solid #f3c2c2}
.alert-info{background:#eef6fb;color:#1b5e7e;border:1px solid #c2dcef}

/* tabel transparansi */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm)}
table.data{width:100%;border-collapse:collapse;min-width:540px}
table.data th,table.data td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem}
table.data thead th{background:var(--emerald-800);color:#fff;font-weight:700}
table.data tbody tr:hover{background:#f5fbf8}
.pill{padding:.22rem .65rem;border-radius:999px;font-size:.76rem;font-weight:700}
.pill.in{background:#e7f6ee;color:#0a5c3a}
.pill.out{background:#fdecec;color:#9b2c2c}
.text-right{text-align:right!important}

/* kotak info rekening */
.donasi-box{background:linear-gradient(135deg,var(--emerald-700),var(--emerald-900));color:#fff;border-radius:var(--radius-lg);padding:2rem;position:relative;overflow:hidden}
.donasi-box::after{content:"";position:absolute;right:-40px;bottom:-40px;width:200px;height:200px;border-radius:50%;background:rgba(212,164,55,.18)}
.donasi-box .row{display:flex;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.15);position:relative;z-index:1}
.donasi-box .row .k{color:#bfe0d3}
.donasi-box .row .v{font-weight:700;color:var(--gold-300)}

/* pengurus */
.pengurus-card{text-align:center;background:#fff;border-radius:var(--radius);padding:1.6rem 1rem;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s}
.pengurus-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.pengurus-card .ava{width:96px;height:96px;border-radius:50%;margin:0 auto .9rem;object-fit:cover;border:3px solid var(--gold-400);background:linear-gradient(135deg,var(--emerald-500),var(--emerald-800))}
.pengurus-card .nm{font-weight:700;color:var(--emerald-900)}
.pengurus-card .jb{font-size:.85rem;color:var(--gold-600);font-weight:600}

/* utilitas reveal saat scroll */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* =====================================================================
   RESPONSIF
   ===================================================================== */
@media (max-width:1024px){
  .footer .grid{grid-template-columns:1fr 1fr}
  .galeri-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:880px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .welcome{grid-template-columns:1fr;gap:2.4rem}
  .stats .grid{grid-template-columns:repeat(2,1fr);gap:2rem}
  .prayer-card{grid-template-columns:repeat(4,1fr);gap:.6rem}
  .ptime.now{transform:scale(1.04)}
  /* menu mobile */
  .burger{display:grid;place-items:center}
  .menu{
    position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:var(--emerald-900);
    flex-direction:column;align-items:stretch;gap:.2rem;padding:5rem 1.4rem 2rem;
    transform:translateX(105%);transition:transform .4s var(--ease);box-shadow:var(--shadow-lg);z-index:55;
  }
  .menu.open{transform:translateX(0)}
  .menu a{color:#dff3ea;padding:.95rem 1rem;border-radius:12px;font-size:1.05rem}
  .menu a:hover,.menu a.active{background:rgba(255,255,255,.08);color:#fff}
  .menu a::after{display:none}
  .nav-cta{margin:.6rem 0 0}
  .nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:54;opacity:0;visibility:hidden;transition:.3s}
  .nav-overlay.show{opacity:1;visibility:visible}
}
@media (max-width:560px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .galeri-grid{grid-template-columns:repeat(2,1fr)}
  .prayer-card{grid-template-columns:repeat(3,1fr)}
  .topbar .tdate{font-size:.78rem}
  .arrow{display:none}
  .donasi-cta .inner{flex-direction:column;text-align:center}
  .footer .grid{grid-template-columns:1fr}
  .stats .grid{gap:1.5rem}
}

/* aksesibilitas & kenyamanan */
:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .slide{transform:none!important}
}