:root{--green:#073a2b;--green2:#17634b;--gold:#c9a25c;--cream:#f5f0e6;--paper:#fbfaf7;--ink:#17231e;--muted:#68756e;--line:#dce4df}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.65 "DM Sans",sans-serif}a{text-decoration:none;color:inherit}.wrap{width:min(1180px,92%);margin:auto}.top{height:34px;background:var(--green);color:#d8e2dc;font-size:10px;text-transform:uppercase;letter-spacing:1px}.top .wrap{height:100%;display:flex;justify-content:space-between;align-items:center}header{position:sticky;top:0;z-index:20;background:#fbfaf7ee;backdrop-filter:blur(18px);border-bottom:1px solid #173a2b12}.nav{height:80px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;gap:10px;align-items:center}.logo>span{width:42px;height:42px;border-radius:12px;background:var(--green);color:white;display:grid;place-items:center;font-weight:800}.logo b,.logo small{display:block;line-height:1}.logo b{font-size:15px;letter-spacing:1px}.logo small{font-size:9px;letter-spacing:2px;color:var(--gold);margin-top:5px}.nav nav{display:flex;gap:27px;align-items:center;font-size:13px;font-weight:700;color:#53615b}.nav nav a:hover{color:var(--green)}.hamb{display:none;border:0;background:none;font-size:25px}.hero{background:var(--cream);overflow:hidden}.heroGrid{min-height:690px;display:grid;grid-template-columns:1.06fr .94fr;gap:60px;align-items:center}.hero label,.section label,.values label,.sahabat label{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--green2)}h1,h2,h3{margin-top:0}.hero h1{font:700 clamp(52px,6vw,80px)/1.01 "Playfair Display",serif;letter-spacing:-3px;margin:18px 0 24px}.hero h1 i,h2 i{color:var(--green2);font-style:normal}.hero p{max-width:640px;color:#5f6b65;font-size:17px}.actions{display:flex;gap:24px;align-items:center;margin:31px 0}.btn{border:0;border-radius:99px;background:var(--green);color:white;padding:13px 21px;font:700 14px "DM Sans";cursor:pointer;display:inline-flex;gap:17px;align-items:center}.link{font-weight:700;color:var(--green)}.trust{font-size:11px;color:#78847e}.visual{height:520px;display:grid;place-items:center;position:relative}.halo{width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,#e4c988,#d8b66d 45%,transparent 70%)}.arch{position:absolute;bottom:30px;width:315px;height:410px;border-radius:165px 165px 0 0;background:var(--green);color:white;display:grid;place-items:center;align-content:center;box-shadow:0 35px 70px #073a2b2d}.arch:after{content:"";position:absolute;inset:18px;border:1px solid #fff2;border-radius:150px 150px 0 0}.arch span{font-size:62px;color:#dfbd73}.arch b{font:700 54px "Playfair Display";letter-spacing:3px}.arch small{font-size:9px;letter-spacing:4px;color:#d8e2dc}.orbit{position:absolute;border:1px solid #073a2b20;border-radius:50%}.o1{width:440px;height:440px}.o2{width:570px;height:570px}.visual em{position:absolute;bottom:2px;font-size:9px;letter-spacing:3px;color:#7a857f;font-style:normal}.section{padding:110px 0}.section:nth-of-type(even){background:var(--cream)}.sectionHead{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:46px}.sectionHead h2,.values h2,.sahabat h2{font:700 clamp(41px,4.6vw,57px)/1.03 "Playfair Display";letter-spacing:-1.5px;margin:10px 0 0}.sectionHead>p{max-width:460px;color:var(--muted);margin:0}.about{display:grid;grid-template-columns:1.35fr .8fr;gap:15px}.identity{background:white;border:1px solid var(--line);border-radius:25px;padding:43px;min-height:475px;position:relative;overflow:hidden}.identity label{font-size:9px;color:var(--gold);font-weight:800}.identity h3{font:700 34px/1.12 "Playfair Display";max-width:560px;position:relative;margin-top:17px}.identity p{color:var(--muted);max-width:570px;position:relative}.identity address{border-top:1px solid var(--line);padding-top:20px;margin-top:55px;color:var(--green);font-style:normal;font-weight:700;font-size:13px;position:relative}.water{position:absolute;right:-10px;top:-45px;font:700 190px "Playfair Display";color:#edf2ee}.tiles{display:grid;grid-template-columns:1fr 1fr;gap:15px}.tile{border-radius:25px;padding:28px;background:#e9f0ea;display:flex;flex-direction:column;justify-content:end}.tile:first-child{grid-column:span 2;min-height:225px}.tile.dark{background:var(--green);color:white}.tile.gold{background:#eadfc9}.tile>b{font-size:10px;color:var(--gold)}.tile h3{font:700 24px "Playfair Display";margin:25px 0 4px}.tile p{font-size:12px;color:var(--muted);margin:0}.dark p{color:#c7d5cf}.values{padding:105px 0;background:var(--green);color:white}.valuesGrid{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px}.values h2{color:white}.values h2 i{color:#dfbd73}.valueCards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.valueCards .tile{background:transparent;border-radius:0;border-top:1px solid #fff3;padding:17px 0}.valueCards .tile h3{margin-top:25px}.valueCards .tile p{color:#c7d5cf}.cards{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:15px}.card{min-height:345px;border:1px solid var(--line);border-radius:25px;background:white;padding:33px;display:flex;flex-direction:column}.card.featured{background:var(--green);color:white;border-color:var(--green)}.card small{font-size:9px;letter-spacing:1.7px;font-weight:800;color:var(--gold)}.card h3{font:700 33px "Playfair Display";margin-top:70px}.card p{font-size:13px;color:var(--muted)}.featured p{color:#c7d5cf}.card span{margin-top:auto;color:#dfbd73;font-size:12px;font-weight:800}.publication{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pubHero{min-height:370px;border-radius:25px;background:var(--green);padding:42px;color:white;display:flex;flex-direction:column;justify-content:end}.pubHero h3{font:700 36px/1.1 "Playfair Display";max-width:550px;margin:18px 0}.pubHero p{color:#c7d5cf}.pubList{border-top:1px solid var(--line)}.pubList article{padding:23px 0;border-bottom:1px solid var(--line)}.pubList small{color:var(--gold);font-size:9px;font-weight:800;letter-spacing:1.7px}.pubList h3{font:700 23px "Playfair Display";margin:8px 0}.pubList p{font-size:12px;color:var(--muted);margin:0}.gallery{display:grid;grid-template-columns:1.3fr .85fr .85fr;grid-auto-rows:175px;gap:13px}.gallery div{border-radius:20px;background:linear-gradient(140deg,#d9e3dc,#efe4cf);padding:18px;display:flex;align-items:end;font-size:9px;letter-spacing:1.5px;color:#68756f}.gallery div:first-child{grid-row:span 2;background:linear-gradient(140deg,#cadbd1,#e4d2af)}.sahabat{padding:110px 0;background:var(--green);color:white}.sik{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:center}.sahabat h2 i{color:#dfbd73}.sik p{max-width:650px;color:#c7d5cf}.lightBtn{display:inline-flex;margin-top:18px;padding:13px 21px;border-radius:99px;background:white;color:var(--green);font-weight:800}.seal{width:280px;height:280px;border:1px solid #fff4;border-radius:50%;display:grid;place-items:center;margin:auto;position:relative}.seal:before{content:"";position:absolute;inset:18px;border:1px solid #c9a25c;border-radius:50%}.seal b{font:700 82px "Playfair Display";color:#dfbd73}.seal small{position:absolute;margin-top:120px;font-size:9px;letter-spacing:3px}.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}.contact address{font-style:normal;color:var(--green);font-weight:700;line-height:1.9}.contact form{display:grid;gap:15px}.contact form label{font-size:11px;font-weight:800;color:#53615b}.contact input,.contact textarea{width:100%;margin-top:7px;border:1px solid var(--line);border-radius:13px;padding:14px 16px;font:inherit;outline:0}.contact small{font-size:10px;color:#839089}.footer{display:grid;grid-template-columns:1.5fr .75fr .75fr;gap:50px;padding:60px 0}.footer>div:not(:first-child){display:flex;flex-direction:column;gap:9px;font-size:12px}.footer p{color:#9eafa7;font-size:11px}.copy{border-top:1px solid #fff2;padding:18px 0;color:#8da099;font-size:10px}footer{background:#062e23;color:white}@media(max-width:900px){.nav nav{display:none;position:absolute;top:114px;left:0;right:0;padding:22px;background:var(--paper);flex-direction:column}.nav nav.open{display:flex}.hamb{display:block}.heroGrid,.valuesGrid,.sik,.contact,.about,.cards,.publication{grid-template-columns:1fr;gap:40px}.heroGrid{padding:80px 0}.visual{height:420px}.sectionHead{display:block}.sectionHead>p{margin-top:16px}.valueCards{grid-template-columns:1fr}.tiles{grid-template-columns:1fr}.tile:first-child{grid-column:auto}.gallery{grid-template-columns:1fr 1fr}.gallery div:first-child{grid-row:auto}.footer{grid-template-columns:1fr 1fr}}@media(max-width:560px){.top span{display:none}.hero h1{font-size:48px}.actions{flex-direction:column;align-items:stretch}.btn{justify-content:center}.visual{transform:scale(.85);margin:-30px 0}.gallery,.footer{grid-template-columns:1fr}.section{padding:78px 0}}

.media-section{padding-top:90px}
.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.media-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.media-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px #073a2b16;border-color:#c5d1ca}
.media-thumb{height:170px;position:relative;display:grid;place-items:center;overflow:hidden}
.media-thumb:before,.media-thumb:after{content:"";position:absolute;border-radius:50%;border:1px solid #ffffff36}
.media-thumb:before{width:210px;height:210px}.media-thumb:after{width:135px;height:135px}
.media-card.youtube .media-thumb{background:linear-gradient(135deg,#073a2b,#1a674f)}
.media-card.instagram .media-thumb{background:linear-gradient(135deg,#49383a,#c9a25c)}
.media-card.facebook .media-thumb{background:linear-gradient(135deg,#123e4d,#17634b)}
.media-card.tiktok .media-thumb{background:linear-gradient(135deg,#101716,#17634b)}
.play{position:relative;z-index:2;width:58px;height:58px;border-radius:50%;background:#fffffff0;color:var(--green);display:grid;place-items:center;font-size:20px;padding-left:2px;box-shadow:0 12px 25px #0002}
.duration{position:absolute;z-index:2;right:14px;bottom:12px;padding:4px 8px;background:#0006;color:#fff;border-radius:7px;font-size:8px;font-weight:800;letter-spacing:1px}
.media-meta{padding:20px 18px 21px}
.media-meta span{font-size:8px;font-weight:800;letter-spacing:1.7px;color:var(--gold)}
.media-meta b{display:block;font:700 20px/1.15 "Playfair Display";margin:9px 0}
.media-meta small{font-size:10px;color:#7d8882}
.media-note{margin-top:20px;padding:14px 16px;border:1px dashed #cbd6cf;border-radius:13px;color:#66736c;background:#fff;font-size:11px}
.media-note span{margin-right:8px;color:var(--gold)}
@media(max-width:1050px){.media-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.media-grid{grid-template-columns:1fr}}

.focus-section{background:#fff}
.focus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.focus-card{min-height:355px;background:#f1f5f1;border:1px solid var(--line);border-radius:24px;padding:28px;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}
.focus-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px #073a2b16}
.focus-card:before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;border:1px solid #073a2b14;right:-45px;top:-35px}
.focus-card.green-card{background:var(--green);color:#fff}
.focus-card.gold-card{background:#eadfc9}
.focus-icon{position:absolute;left:28px;top:25px;width:48px;height:48px;border-radius:15px;background:#fff;color:var(--green);display:grid;place-items:center;font-family:"Playfair Display";font-size:22px;font-weight:700;box-shadow:0 7px 17px #073a2b0c}
.green-card .focus-icon{background:#ffffff15;color:#dfbd73}
.focus-card small{font-size:8px;letter-spacing:1.7px;font-weight:800;color:var(--gold)}
.focus-card h3{font:700 30px/1.05 "Playfair Display";margin:9px 0}
.focus-card p{font-size:12px;color:var(--muted);margin:0 0 18px}
.green-card p{color:#c7d5cf}
.focus-card b{font-size:11px;color:var(--green)}
.green-card b{color:#dfbd73}
.focus-admin-note{margin-top:18px;border:1px dashed #c7d3cc;background:#f7f9f7;border-radius:12px;padding:13px 15px;font-size:10px;color:#718078}
@media(max-width:1050px){.focus-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.focus-grid{grid-template-columns:1fr}}

.intro-section{padding-bottom:80px}
.intro-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.intro-section .identity{min-height:390px}
.intro-video{background:#fff;border:1px solid var(--line);border-radius:25px;padding:13px;box-shadow:0 18px 40px #073a2b0b}
.video-placeholder{min-height:360px;border-radius:18px;background:linear-gradient(135deg,#092f24,#17634b);position:relative;overflow:hidden;display:grid;place-items:center;color:#fff}
.video-placeholder:before,.video-placeholder:after{content:"";position:absolute;border:1px solid #ffffff28;border-radius:50%}
.video-placeholder:before{width:280px;height:280px}.video-placeholder:after{width:170px;height:170px}
.video-label{position:absolute;left:22px;top:20px;font-size:9px;letter-spacing:1.8px;color:#dfbd73;font-weight:800}
.video-caption{position:absolute;left:22px;bottom:20px;font-size:11px;color:#d0ddd7}
.video-play{position:relative;z-index:2;width:65px;height:65px;border-radius:50%;background:#fffffff0;color:var(--green);display:grid;place-items:center;font-size:21px;padding-left:3px;box-shadow:0 15px 35px #0003}
.video-actions{display:flex;justify-content:space-between;gap:12px;padding:14px 8px 3px;font-size:10px;color:#7b8780}
.video-actions a{font-weight:800;color:var(--green)}
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.pillar-card{min-height:320px;padding:28px;border:1px solid var(--line);border-radius:24px;background:#f0f5f1;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden;transition:.22s ease}
.pillar-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px #073a2b18}
.pillar-card.green-card{background:var(--green);color:#fff}
.pillar-card.gold-card{background:#eadfc9}
.pillar-no{position:absolute;top:22px;left:26px;color:var(--gold);font-size:10px;font-weight:800}
.pillar-symbol{position:absolute;right:25px;top:20px;width:52px;height:52px;background:#fff;border-radius:16px;display:grid;place-items:center;color:var(--green);font:700 23px "Playfair Display";box-shadow:0 8px 20px #073a2b10}
.green-card .pillar-symbol{background:#ffffff12;color:#dfbd73}
.pillar-card h3{font:700 31px "Playfair Display";margin:50px 0 8px}
.pillar-card p{font-size:12px;color:var(--muted);margin:0 0 18px}
.green-card p{color:#c7d5cf}
.pillar-card b{font-size:11px;color:var(--green)}
.green-card b{color:#dfbd73}
.two-video-head{display:flex;justify-content:space-between;gap:30px;margin:50px 0 15px;padding-top:35px;border-top:1px solid var(--line)}
.two-video-head span{font-size:11px;color:var(--muted)}
.two-video-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.wide-video{border:1px solid var(--line);border-radius:22px;background:#fff;overflow:hidden;transition:.22s ease}
.wide-video:hover{transform:translateY(-4px);box-shadow:0 18px 35px #073a2b15}
.wide-thumb{height:250px;display:grid;place-items:center;position:relative;color:#fff}
.wide-thumb small{position:absolute;left:18px;bottom:14px;font-size:8px;letter-spacing:1.5px;color:#fff;font-weight:800}
.dark-video{background:linear-gradient(135deg,#102f25,#0a4938)}
.green-video{background:linear-gradient(135deg,#155844,#7d754a)}
.wide-video-meta{padding:18px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.wide-video-meta b{font:700 20px "Playfair Display"}
.wide-video-meta span{font-size:10px;color:var(--green);font-weight:800;text-align:right}
.pillar-note{margin-top:17px;background:#fff;border:1px dashed #c7d3cc;border-radius:12px;padding:13px 15px;font-size:10px;color:#718078}
@media(max-width:1050px){.pillar-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.intro-layout,.two-video-grid{grid-template-columns:1fr}}
@media(max-width:560px){.pillar-grid{grid-template-columns:1fr}.two-video-head{display:block}.two-video-head span{display:block;margin-top:8px}.wide-video-meta{display:block}.wide-video-meta span{display:block;text-align:left;margin-top:8px}}

.hero{position:relative}.hero:before{content:"";position:absolute;inset:0;opacity:.75;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 700'%3E%3Cg fill='none' stroke='%23073a2b' stroke-opacity='.08' stroke-width='2'%3E%3Cpath d='M0 620h1600M65 620V480h42v-90h12v90h42v140M86 390q0-75 42-102q42 27 42 102M1210 620V455h45v-92h12v92h44v165M1234 363q0-78 43-106q43 28 43 106M1450 620V440h36v-77h13v77h36v180M1468 363q0-64 31-85q31 21 31 85M470 620V430q0-120 78-179q78 59 78 179v190M510 430q0-74 38-105q38 31 38 105M670 620V390q0-165 98-231q98 66 98 231v230M735 390q0-91 33-130q33 39 33 130M900 620V430q0-120 78-179q78 59 78 179v190M940 430q0-74 38-105q38 31 38 105'/%3E%3C/g%3E%3C/svg%3E");background-size:cover;background-position:center bottom}
.heroGrid{position:relative;z-index:1}.donasi-nav{border:1px solid #b8c9c0!important;padding:8px 14px;border-radius:999px;color:var(--green)!important}.donasi-nav:hover{background:var(--green);color:#fff!important}
.donation-section{background:#f6f2e8}.donation-wrap{display:grid;grid-template-columns:1fr .82fr;gap:75px;align-items:center}.donation-copy h2{font:700 clamp(40px,4.5vw,56px)/1.03 "Playfair Display";margin:10px 0 20px}.donation-copy>p{max-width:600px;color:var(--muted)}.donation-points{margin-top:25px;display:grid;gap:14px}.donation-points b,.donation-points small{display:block}.donation-points b{font-size:13px}.donation-points small{font-size:10px;color:var(--muted);margin-top:2px}
.donation-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:18px;box-shadow:0 24px 55px #073a2b14}.donation-card-head{display:flex;justify-content:space-between;padding:2px 4px 14px}.donation-card-head span{font-size:9px;color:var(--gold);font-weight:800;letter-spacing:1.5px}.donation-card-head b{font-size:9px;color:var(--green)}.qr-shell{background:#f3f6f3;border-radius:20px;padding:28px;display:grid;place-items:center}.qr-placeholder{width:245px;height:245px;border-radius:12px;background:#fff;border:1px solid #dce4df;display:grid;place-items:center;position:relative;overflow:hidden}.qr-placeholder:before{content:"";position:absolute;inset:25px;background:repeating-conic-gradient(#0d3a2e 0 7deg,#fff 7deg 14deg);opacity:.11}.qr-placeholder span{position:relative;z-index:2;background:#fff;padding:9px 13px;border-radius:8px;font-size:25px;font-weight:900;color:var(--green)}.qr-placeholder small{position:absolute;bottom:18px;font-size:8px;letter-spacing:1.4px;color:#7a857f}.qr-status{font-size:10px;color:#7c8882;text-align:center;padding:11px}.bank-list{border-top:1px solid var(--line)}.bank-list div{padding:14px 3px;border-bottom:1px solid var(--line)}.bank-list small{display:block;font-size:8px;color:var(--gold);letter-spacing:1.5px;font-weight:800}.bank-list b{display:block;font-size:15px;margin:3px 0}.bank-list span{font-size:10px;color:var(--muted)}
@media(max-width:900px){.donation-wrap{grid-template-columns:1fr}}

/* ==========================================================================
   v3 additions — accessibility floor, WhatsApp FAB, prayer times, FAQ,
   gallery lightbox, newsletter, toasts, donation UX, contact form polish.
   Kept in their own section (rather than interleaved above) so the v2
   rules above stay byte-identical and easy to diff.
   ========================================================================== */

/* ---- Accessibility floor -------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:auto;background:var(--green);color:#fff;padding:13px 20px;border-radius:0 0 12px 0;font-weight:800;font-size:13px;z-index:2000}
.skip-link:focus{left:0;top:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* The `hidden` attribute is display:none in the UA stylesheet at (0,1,0)
   specificity. Several components below (.whatsapp-fab, .copy-btn,
   .wa-confirm-btn, ...) set their own `display` at that same (0,1,0)
   specificity, and being authored later in the cascade they'd otherwise
   win and silently defeat `hidden` - which is exactly what happened here
   until this rule was added (verified via a real headless-browser render,
   not just reasoning about it). This single rule guarantees `hidden`
   always wins, for these elements and any future one. */
[hidden]{display:none!important}

@keyframes skelShine{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-block{background:linear-gradient(100deg,#eef2ef 30%,#f7f8f6 50%,#eef2ef 70%);background-size:200% 100%;animation:skelShine 1.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.skel-block{animation:none;background:#eef2ef}}

.empty-state{border:1px dashed #c7d3cc;border-radius:20px;padding:34px 26px;text-align:center;color:#718078;font-size:12px;background:#fff}
.empty-state b{display:block;color:var(--ink);font-size:14px;margin-bottom:6px;font-family:"Playfair Display";font-weight:700}

/* ---- Top bar: live "next prayer" chip -------------------------------- */
.top .wrap{gap:16px}
.top-right{display:flex;align-items:center;gap:16px}
/* .top span{display:none} at <=560px predates this file; qualifying with
   two classes (.top .top-prayer) outranks that single class+element
   selector on specificity, so the prayer chip stays visible on mobile
   while .top-loc still hides as originally designed. */
.top .top-prayer{display:inline-flex;align-items:center;gap:5px;color:#fff;font-weight:800;white-space:nowrap}
.top .top-prayer b{color:var(--gold)}
@media(max-width:560px){.top .top-loc{display:none}}
@media(max-width:380px){.top .top-prayer{font-size:9px}}

/* ---- Toasts (upgraded, accessible replacement for the old #notice) --- */
.toast{position:fixed;right:18px;bottom:18px;z-index:1000;max-width:min(360px,86vw);background:var(--ink);color:#fff;padding:14px 18px;border-radius:14px;font:600 13px/1.5 "DM Sans";box-shadow:0 18px 40px #0004;display:flex;gap:10px;align-items:flex-start;transform:translateY(12px);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease}
.toast.show{transform:translateY(0);opacity:1;pointer-events:auto}
.toast.success{background:var(--green)}
.toast.error{background:#7a2f2f}
.toast .toast-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:5px;flex:none}
@media(max-width:560px){.toast{left:14px;right:14px;max-width:none}}

/* ---- WhatsApp floating action button --------------------------------- */
.whatsapp-fab{position:fixed;right:22px;bottom:22px;z-index:900;width:60px;height:60px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;box-shadow:0 16px 34px #073a2b40;transition:transform .2s ease,box-shadow .2s ease;border:2px solid #ffffff30}
.whatsapp-fab:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 20px 40px #073a2b55}
.whatsapp-fab svg{width:26px;height:26px;position:relative;z-index:1}
.whatsapp-fab .fab-ring{position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--gold);opacity:.55;animation:fabPulse 2.6s ease-out infinite}
@keyframes fabPulse{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.35);opacity:0}}
@media(prefers-reduced-motion:reduce){.whatsapp-fab .fab-ring{animation:none;display:none}}
.whatsapp-fab .fab-tip{position:absolute;right:72px;top:50%;transform:translateY(-50%) translateX(6px);background:var(--ink);color:#fff;padding:8px 14px;border-radius:10px;font-size:12px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.whatsapp-fab:hover .fab-tip,.whatsapp-fab:focus-visible .fab-tip{opacity:1;transform:translateY(-50%) translateX(0)}
@media(max-width:560px){.whatsapp-fab{right:14px;bottom:14px;width:52px;height:52px}.whatsapp-fab .fab-tip{display:none}}

/* ---- Prayer times section --------------------------------------------- */
.prayer-section{background:var(--green);position:relative;overflow:hidden;padding:64px 0 68px}
.prayer-section:before{content:"";position:absolute;inset:0;opacity:.6;pointer-events:none;background-image:radial-gradient(circle at 12% 18%,#ffffff09,transparent 40%),radial-gradient(circle at 88% 82%,#c9a25c17,transparent 45%)}
.prayer-head{position:relative;display:flex;justify-content:space-between;align-items:end;gap:26px;color:#fff;margin-bottom:28px;flex-wrap:wrap}
.prayer-head label{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--gold)}
.prayer-head h2{font:700 clamp(28px,3.3vw,40px)/1.05 "Playfair Display";margin:8px 0 0}
.prayer-loc{position:relative;font-size:12px;color:#c7d5cf;text-align:right;max-width:260px}
.prayer-loc b{color:#fff;display:block;font-size:13px;margin-bottom:2px}

.prayer-card{position:relative;background:#fff;border-radius:28px;padding:10px;box-shadow:0 30px 70px #05261c4d}
.prayer-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.prayer-chip{border-radius:20px;padding:20px 8px 16px;text-align:center;position:relative}
.prayer-chip small{display:block;font-size:9px;letter-spacing:1.4px;font-weight:800;color:var(--gold);text-transform:uppercase}
.prayer-chip b{display:block;font:700 21px "Playfair Display";margin-top:8px;color:var(--ink)}
.prayer-chip.active{background:var(--green)}
.prayer-chip.active small{color:#dfbd73}
.prayer-chip.active b{color:#fff}
.prayer-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:16px 14px 8px;border-top:1px solid var(--line);margin-top:6px;font-size:11px;color:var(--muted)}
.prayer-meta .next-prayer{font-weight:800;color:var(--green)}
.prayer-meta .next-prayer b{color:#a9822f}
.prayer-source{color:#7d8882}
.prayer-source a{color:var(--green);font-weight:800}

.prayer-skel{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:4px}
.prayer-skel div{height:92px;border-radius:20px}

.prayer-fallback{background:#fff;border-radius:24px;padding:32px 26px;text-align:center;color:var(--muted);font-size:13px}
.prayer-fallback b{display:block;color:var(--ink);font-size:15px;margin-bottom:6px;font-family:"Playfair Display"}
.prayer-fallback a{color:var(--green);font-weight:800}
.prayer-fallback button{margin-top:16px}

@media(max-width:700px){.prayer-strip,.prayer-skel{grid-template-columns:repeat(3,1fr)}.prayer-skel div{height:78px}}
@media(max-width:460px){.prayer-strip,.prayer-skel{grid-template-columns:repeat(2,1fr)}.prayer-loc{text-align:left}.prayer-head{flex-direction:column;align-items:start}}

/* ---- FAQ accordion (native <details>/<summary> = accessible for free) */
.faq-section{background:var(--paper)}
.faq-list{border-top:1px solid var(--line);max-width:860px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{list-style:none;width:100%;text-align:left;background:none;border:0;padding:23px 4px;display:flex;align-items:center;gap:16px;cursor:pointer;font:700 16.5px/1.4 "Playfair Display";color:var(--ink)}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{color:var(--green2)}
.faq-q .faq-num{flex:none;font:800 11px "DM Sans";color:var(--gold);letter-spacing:1px}
.faq-q .faq-q-text{flex:1}
.faq-icon{flex:none;width:29px;height:29px;border-radius:50%;border:1px solid var(--line);position:relative;transition:transform .25s ease,background .25s ease,border-color .25s ease}
.faq-icon:before,.faq-icon:after{content:"";position:absolute;top:50%;left:50%;background:var(--green);transform:translate(-50%,-50%)}
.faq-icon:before{width:11px;height:1.6px}
.faq-icon:after{width:1.6px;height:11px;transition:opacity .2s ease}
.faq-item[open] .faq-icon{background:var(--green);border-color:var(--green);transform:rotate(180deg)}
.faq-item[open] .faq-icon:before,.faq-item[open] .faq-icon:after{background:#fff}
.faq-item[open] .faq-icon:after{opacity:0}
.faq-a{margin:0 4px 25px 41px;color:var(--muted);font-size:13.5px;line-height:1.75;max-width:620px}
.faq-cta{margin-top:24px;font-size:12px;color:var(--muted)}
.faq-cta a{color:var(--green);font-weight:800}

/* ---- Gallery: real photos + lightbox ----------------------------------
   Only rendered once the API returns at least one PUBLISHED gallery item -
   see loadGallery() in site.js. Until then the original static placeholder
   <div> tiles (and the untouched .gallery div rule above) are left exactly
   as they were, so a visitor with JS disabled still sees the v2 design
   instead of an empty section. */
.gallery .gallery-tile{all:unset;box-sizing:border-box;display:flex;align-items:end;width:100%;height:100%;border-radius:20px;padding:18px;position:relative;overflow:hidden;cursor:pointer;font-family:inherit}
.gallery .gallery-tile:first-child{grid-row:span 2}
.gallery .gallery-tile:hover img,.gallery .gallery-tile:focus-visible img{transform:scale(1.06)}
.gallery .gallery-tile img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .35s ease}
.gallery .gallery-tile .gallery-cap{position:relative;z-index:1;display:block;color:#fff;font-weight:700;font-size:9px;letter-spacing:1.5px;background:linear-gradient(0deg,#00000078,transparent 75%);width:calc(100% + 36px);margin:-18px -18px 0;padding:22px 18px 10px}
.gallery .gallery-tile.img-broken{background:linear-gradient(140deg,#d9e3dc,#efe4cf)}
.gallery .gallery-tile.img-broken img{display:none}
.gallery .gallery-tile.img-broken .gallery-cap{color:#4b5750;background:none;margin:0;padding:0;position:absolute;left:18px;bottom:18px;width:auto}

.lightbox{position:fixed;inset:0;z-index:1300;background:#0d1f18e8;display:none;align-items:center;justify-content:center;padding:60px 26px}
.lightbox.open{display:flex}
.lightbox-frame{max-width:min(920px,90vw);max-height:80vh;position:relative}
.lightbox-frame img{max-width:100%;max-height:80vh;border-radius:16px;display:block;margin:auto;box-shadow:0 30px 80px #0008}
.lightbox-cap{color:#e8ede9;text-align:center;font-size:12px;margin-top:14px}
.lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;background:#ffffff18;color:#fff;border:1px solid #ffffff30;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:17px}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:#ffffff30}
.lightbox-close{top:-54px;right:0}
.lightbox-prev{left:-56px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:-56px;top:50%;transform:translateY(-50%)}
@media(max-width:760px){.lightbox-prev{left:4px}.lightbox-next{right:4px}.lightbox-close{top:-44px;right:0}}

/* ---- Media & Sosial: WhatsApp card in the same family as the rest ---- */
.media-card.whatsapp .media-thumb{background:linear-gradient(135deg,#073a2b,#12523e)}

/* ---- Donation: copy-to-clipboard + WhatsApp confirmation -------------- */
.donation-actions{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.copy-btn{border:1px solid var(--line);background:#fff;border-radius:99px;padding:10px 16px;font:700 11px "DM Sans";color:var(--green);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .2s ease,background .2s ease,color .2s ease}
.copy-btn:hover{border-color:var(--green)}
.copy-btn.copied{background:var(--green);color:#fff;border-color:var(--green)}
.wa-confirm-btn{border:0;background:var(--green);color:#fff;border-radius:99px;padding:10px 18px;font:700 11px "DM Sans";cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.qr-shell img{width:100%;height:100%;object-fit:contain;border-radius:12px;position:relative;z-index:2}

/* ---- Contact form: topic select + inline, accessible field errors ---- */
.contact select{width:100%;margin-top:7px;border:1px solid var(--line);border-radius:13px;padding:14px 16px;font:inherit;outline:0;background:#fff;color:var(--ink);appearance:none}
.field-error{display:none;color:#a13e3e;font-size:11px;margin-top:5px;font-weight:700}
.field-error.show{display:block}
.contact input[aria-invalid="true"],.contact textarea[aria-invalid="true"]{border-color:#a13e3e}

/* ---- Newsletter / update signup, in the footer ------------------------ */
.newsletter{border-top:1px solid #ffffff1c;border-bottom:1px solid #ffffff1c;padding:34px 0;margin-bottom:8px}
.newsletter-inner{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.newsletter-copy b{display:block;font:700 20px "Playfair Display";color:#fff;margin-bottom:6px}
.newsletter-copy p{margin:0;color:#9eafa7;font-size:12px;max-width:420px}
.newsletter-form{display:flex;gap:10px;flex:none}
.newsletter-form input{width:230px;border:1px solid #ffffff30;background:#ffffff0d;border-radius:99px;padding:12px 18px;color:#fff;font:inherit}
.newsletter-form input::placeholder{color:#9eafa7}
.newsletter-form button{white-space:nowrap;flex:none}
@media(max-width:700px){.newsletter-inner{flex-direction:column;align-items:stretch}.newsletter-form{flex-direction:column}.newsletter-form input{width:auto}}

/* ---- Print ------------------------------------------------------------ */
@media print{.whatsapp-fab,.hamb,header,.toast,.lightbox,.newsletter,.skip-link{display:none!important}body{background:#fff}.section{padding:20px 0}.hero:before{display:none}}