@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/fraunces-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/fraunces-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/fraunces-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2')}
/* GSJA Pondok Firman - desain baru (hitam & biru), responsif, mode gelap/terang */
:root{
  --accent:#2A63F3;--navy:#0E2A6B;
  --bg:#0A0A0B;--alt:#111114;--surface:#141416;--text:#fff;--text2:#E6E8EE;--muted:#A8ADB8;--eyebrow:#6E9BFF;--line:#26262B;
  --pad:clamp(20px,5vw,72px);--maxw:1296px;--radius:24px;
  --serif:'Fraunces',Georgia,serif;--sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
:root[data-theme="light"]{--bg:#fff;--alt:#EEF1F6;--surface:#F1F3F8;--text:#0A0A0B;--text2:#23262E;--muted:#4B5160;--eyebrow:#1F55E0;--line:#D9DEE8}
*{box-sizing:border-box}
[hidden]{display:none!important}
a.c{display:flex;align-items:center;min-height:44px;font-weight:600}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;transition:background-color .35s ease,color .35s ease}
.tr,.tr *{transition:background-color .35s ease,border-color .35s ease,color .35s ease}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid #9DBBFF;outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-0.02em}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--eyebrow)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sec{padding:clamp(56px,7vw,88px) 0;background:var(--bg)}
.sec.alt{background:var(--alt)}
.sec.tight{padding:clamp(36px,4.5vw,56px) 0}
h2.h{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;font-size:clamp(34px,4.6vw,58px);line-height:1.06;margin-top:12px}
.lead{font-size:clamp(16px,1.5vw,18px);line-height:1.65;color:var(--muted);margin-top:16px;max-width:640px}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--eyebrow)}
.link:hover{text-decoration:underline}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:999px;font-size:15px;font-weight:700;border:2px solid transparent;transition:filter .2s,background-color .3s,color .3s;white-space:nowrap}
.btn:hover{filter:brightness(1.12)}
.btn.pri{background:var(--accent);color:#fff}
.btn.out{border-color:var(--text);color:var(--text)}
.btn.white{background:#fff;color:var(--navy)}
.btn.owhite{border-color:#fff;color:#fff}
.btn.sm{height:44px;padding:0 22px}
.btn[disabled],.btn.off{opacity:.4;pointer-events:none}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:#0A0A0B;color:#fff;border-bottom:1px solid #26262B}
.nav .in{height:84px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;min-height:44px;flex-shrink:0}
.logo{--lh:46px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:15px;font-weight:600;color:#fff;padding:10px 0;white-space:nowrap}
.nav-links a:hover,.nav-links a.on{color:#9DBBFF}
.nav-tools{display:flex;align-items:center;gap:12px}
.icon-btn{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;font-size:18px;line-height:1;padding:0}
.icon-btn:hover{background:rgba(255,255,255,.1)}
.burger{display:none}
.nav .cta{height:46px}
.panel{display:none;background:#0A0A0B;border-top:1px solid #26262B;padding:8px var(--pad) 28px}
.panel.open{display:block}
.panel a.l{display:flex;align-items:center;min-height:56px;font-size:19px;font-weight:600;border-bottom:1px solid #26262B}
.panel a.l.on{color:#9DBBFF}
.panel .btn{width:100%;margin-top:24px}
@media(max-width:1640px){.nav .cta{display:none}.nav-links{gap:22px}}
@media(max-width:1400px){.nav-links{display:none}.burger{display:inline-flex;align-items:center;justify-content:center}}
@media(max-width:560px){.nav .in{height:72px}.logo{--lh:38px}.nav-tools{gap:8px}}
/* banner */
.banner{position:relative;overflow:hidden;background:#0A0A0B;color:#fff;height:clamp(320px,34vw,400px)}
.banner .slides,.hero .slides{position:absolute;inset:0}
.banner img.s,.hero img.s{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:0;transform:scale(1);transition:opacity 0s 1.4s,transform 0s 1.4s;will-change:opacity,transform;backface-visibility:hidden}
.banner img.s.on,.hero img.s.on{opacity:1;z-index:1;transform:scale(1.08);transition:opacity 1.4s ease,transform 9s linear}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.banner .sc{position:absolute;inset:-1px;z-index:2;background:linear-gradient(90deg,rgba(10,10,11,.86),rgba(10,10,11,.4))}
.banner .tx{position:absolute;left:0;right:0;bottom:clamp(32px,4.5vw,56px)}
.banner .eyebrow{color:#9DBBFF}
.banner h1{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;font-size:clamp(46px,7vw,88px);line-height:1;margin-top:12px}
.banner p{margin-top:16px;font-size:clamp(16px,1.6vw,20px);line-height:1.55;color:#E6E8EE;max-width:640px}
@media(max-width:700px){.banner .sc{background:linear-gradient(180deg,rgba(10,10,11,.35),rgba(10,10,11,.88))}}
@media(prefers-reduced-motion:reduce){.banner img.s.on,.hero img.s.on{transform:none}.banner img.s,.hero img.s{transition:none}}
/* hero (beranda) */
.hero{position:relative;overflow:hidden;background:#0A0A0B;color:#fff;min-height:clamp(620px,62vw,800px);display:flex;align-items:flex-end}
.hero .sc{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,11,.86) 0%,rgba(10,10,11,.5) 55%,rgba(10,10,11,.25) 100%)}
.hero .in{position:relative;width:100%;padding-bottom:clamp(36px,5vw,64px);padding-top:140px}
.hero .blocks{position:relative;min-height:clamp(330px,31vw,420px);margin-bottom:28px}
.hero .blk{position:absolute;left:0;bottom:0;width:min(900px,100%);opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s;pointer-events:none}
.hero .blk.on{opacity:1;transform:none;pointer-events:auto}
.hero .blk .eyebrow{color:#9DBBFF}
.hero h1,.hero h2.hh{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;font-size:clamp(52px,8.4vw,112px);line-height:.98;margin-top:18px}
.hero h1 em,.hero h2 em{font-style:italic;color:#6E9BFF}
.hero .blk p{margin-top:20px;font-size:clamp(16px,1.6vw,20px);line-height:1.6;color:#E6E8EE;max-width:560px}
.hero .btns{margin-top:0}
.hero .dots{display:flex;gap:10px;margin-top:22px}
.hero .dots button{width:44px;height:44px;border:0;background:transparent;padding:0;display:flex;align-items:center;justify-content:center}
.hero .dots button i{display:block;width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);transition:background-color .3s,width .3s}
.hero .dots button[aria-current="true"] i{background:#fff;width:40px}
.infobar{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;background:rgba(10,10,11,.72);border:1px solid rgba(255,255,255,.18);border-radius:20px}
.infobar>div{padding:20px 28px;border-right:1px solid rgba(255,255,255,.18)}
.infobar>div:last-child{border-right:0}
.infobar .eyebrow{color:#6E9BFF}
.infobar b{display:block;margin-top:4px;font-size:clamp(16px,1.5vw,20px);font-weight:600}
@media(max-width:800px){.infobar{grid-template-columns:1fr}.infobar>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}.infobar>div:last-child{border-bottom:0}.hero .btns .btn{flex:1 1 100%}}
/* cards & grids */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.gap24{gap:24px}
.card{background:var(--surface);border-radius:var(--radius);padding:clamp(24px,3vw,44px);display:flex;flex-direction:column}
.card.bg{background:var(--bg)}
.card.navy{background:var(--navy);color:#fff}
.card.navy .eyebrow{color:#9DBBFF}
.card h3,.card .t{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;font-size:clamp(28px,3.4vw,44px);line-height:1.08;margin-top:12px}
.card.s h3{font-size:clamp(22px,2.2vw,26px);margin-top:0}
.card p{color:var(--muted);margin-top:14px;font-size:16px;line-height:1.7}
.card.navy p{color:#E6E8EE}
.card .btn{align-self:flex-start;margin-top:auto}
.card .meta{margin-top:14px}
.card .body{flex:1}
.card .body+.btn{margin-top:28px}
.quote{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.65;color:#C9D6F5;margin-top:14px}
.tile{position:relative;display:block;height:clamp(240px,30vw,420px);border-radius:var(--radius);overflow:hidden;background:#0A0A0B;color:#fff}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.tile:hover img{transform:scale(1.07)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:80px 26px 26px;background:linear-gradient(0deg,rgba(10,10,11,.9),rgba(10,10,11,0))}
.tile .cap b{display:block;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1}
.tile .cap>span{display:block;margin-top:6px;font-size:15px;color:#E6E8EE}
.tile .arr{position:absolute;right:20px;top:20px;width:48px;height:48px;border-radius:999px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .3s}
.tile:hover .arr,.tile:focus-visible .arr{opacity:1;transform:none}
@media(hover:none){.tile .arr{opacity:1;transform:none}}
.doc{background:var(--surface);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column}
.doc .ph{height:clamp(200px,20vw,240px);border-radius:18px;overflow:hidden}
.doc .ph img{width:100%;height:100%;object-fit:cover}
.doc .b{padding:20px 12px 12px;flex:1;display:flex;flex-direction:column}
/* foto bergeser: kartu yang punya lebih dari satu foto (satu foto = tampilan biasa) */
.pg{position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.pg-t{display:flex;height:100%;transition:transform .75s var(--ease);will-change:transform}
.pg-s{flex:0 0 100%;min-width:0;height:100%;overflow:hidden}
.pg-s img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.pg-d{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:0;pointer-events:none}
.pg-d button{pointer-events:auto;width:22px;height:22px;padding:0;border:0;background:none;position:relative;cursor:pointer}
.pg-d button::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:7px;background:#fff;opacity:.6;box-shadow:0 0 0 1px rgba(0,0,0,.28);transition:opacity .3s,width .35s var(--ease),margin .35s var(--ease)}
.pg-d button[aria-pressed="true"]::before{opacity:1;width:18px;margin-left:-9px}
.pg-d button:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:50%}
.pg-a{position:absolute;top:50%;width:32px;height:32px;margin-top:-16px;padding:0 0 3px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font:400 22px/1 var(--sans,inherit);opacity:0;transition:opacity .25s,background-color .25s;cursor:pointer;display:grid;place-items:center}
.pg-a:hover{background:rgba(0,0,0,.66)}
.pg-prev{left:8px}.pg-next{right:8px}
.pg:hover .pg-a,.pg:focus-within .pg-a{opacity:1}
@media(hover:none){.pg-a{display:none}}
@media(prefers-reduced-motion:reduce){.pg-t{transition:none}}
.doc .dt{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.doc h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;font-size:clamp(22px,2vw,26px);line-height:1.15}
.doc p{margin-top:10px;font-size:15px;line-height:1.65;color:var(--muted)}
.doc .link{margin-top:auto;padding-top:6px}
.about{display:grid;grid-template-columns:5fr 6fr;gap:clamp(28px,5vw,72px);align-items:center}
.about .ph{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;max-height:600px}
.about .ph img{width:100%;height:100%;object-fit:cover}
@media(max-width:800px){.about{grid-template-columns:1fr}.about .ph{aspect-ratio:4/3}}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2.4vw,24px);margin-top:32px}
.stats b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,56px);line-height:1}
.stats span{display:block;margin-top:8px;font-size:clamp(13px,1.2vw,15px);line-height:1.4;color:var(--muted)}
.vband{background:var(--navy);color:#fff;text-align:center;padding:clamp(56px,6vw,80px) 0}
.vband blockquote{margin:0 auto;max-width:860px;font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.6vw,30px);line-height:1.45;transition:opacity .5s}
.vband .eyebrow{color:#9DBBFF;display:inline-flex;align-items:center;min-height:44px;margin-top:16px}
/* daftar khotbah */
.rows{border-top:1px solid var(--line);margin-top:28px}
.rw{display:flex;align-items:center;gap:clamp(16px,3vw,32px);padding:24px 0;border-bottom:1px solid var(--line)}
.rw .d{width:clamp(72px,10vw,156px);flex-shrink:0}
.rw .d b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(40px,4vw,52px);line-height:1}
.rw .d .eyebrow{margin-top:6px}
.rw .i{flex:1;min-width:0}
.rw .i .t{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.15;letter-spacing:-.02em}
.rw .i .s{margin-top:6px;font-size:15px;color:var(--muted)}
@media(max-width:700px){.rw{flex-wrap:wrap;align-items:flex-start}.rw .btn{margin-left:calc(clamp(72px,10vw,156px) + 16px)}}
/* judul bulan & jumlah khotbah diisi lewat JS: cadangkan satu baris agar layout tidak melompat */
h2.h[data-month-label]:empty::before,.pager-info[data-month-count]:empty::before{content:"\00a0"}
.mnav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mnav button,.mnav select{height:48px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-family:inherit;font-size:15px;font-weight:600}
.mnav button{padding:0 22px}
.mnav button.ic{width:48px;padding:0;font-size:18px}
.mnav select{padding:0 20px;min-width:180px}
.mnav button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:700px){.mnav{flex-wrap:nowrap;width:100%}.mnav select{flex:1;min-width:0}.mnav .w{display:none}.mnav button.ic{display:inline-flex;align-items:center;justify-content:center}}
@media(min-width:701px){.mnav button.ic{display:none}}
.pager-info{margin-top:10px;font-size:15px;color:var(--muted)}
/* mosaik galeri */
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,15.5vw,220px);grid-auto-flow:dense;gap:12px}
@media(max-width:900px){.mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mosaic button{border:0;padding:0;border-radius:18px;overflow:hidden;background:var(--surface);cursor:zoom-in;min-width:0;min-height:0}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.mosaic button:hover img{transform:scale(1.07)}
.lb{position:fixed;inset:0;background:rgba(10,10,11,.95);z-index:80;display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:min(92vw,1200px);max-height:78vh;object-fit:contain;border-radius:12px}
.lb button{position:absolute;width:52px;height:52px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(10,10,11,.6);color:#fff;font-size:22px}
.lb .x{right:20px;top:20px}.lb .p{left:20px;top:50%}.lb .n{right:20px;top:50%}
.lb .c{position:absolute;left:0;right:0;bottom:24px;text-align:center;color:#fff;font-size:15px;font-weight:600}
@media(max-width:700px){.lb .p,.lb .n{top:auto;bottom:16px}.lb .c{bottom:30px}}
/* info, langkah */
.kv{border-top:1px solid var(--line);margin-top:24px}
.kv div{padding:16px 0;border-bottom:1px solid var(--line)}
.kv b{display:block;margin-top:4px;font-size:clamp(17px,1.6vw,19px);font-weight:600}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.steps.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.steps,.steps.s3{grid-template-columns:1fr}}
.step .n{font-family:var(--serif);font-size:40px;line-height:1;color:var(--eyebrow)}
.step b{display:block;margin-top:12px;font-size:19px}
.step p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--muted)}
.circ{display:flex;gap:16px;align-items:flex-start}
.circ .n{flex-shrink:0;width:44px;height:44px;border-radius:999px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:20px}
.circ b{display:block;font-size:18px}
.circ p{margin-top:4px;font-size:15px;line-height:1.55;color:var(--muted)}
.maptile{display:block;border-radius:var(--radius);overflow:hidden;background:var(--surface);height:clamp(260px,32vw,420px)}
.maptile iframe{width:100%;height:100%;border:0;display:block}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:stretch}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
.contact a.c{display:flex;align-items:center;min-height:44px;font-weight:600}
.hr{height:1px;background:var(--line);margin:20px 0}
.cband{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:clamp(56px,7vw,88px) 0}
.cband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.cband .in{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;column-gap:40px;align-items:center;text-align:left}
.cband .in>h2,.cband .in>p{grid-column:1}.cband .in>.btns{grid-column:2;grid-row:1/span 2;margin-top:0}
.cband h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;font-size:clamp(32px,4.4vw,52px);line-height:1.1}
.cband p{margin-top:14px;font-size:clamp(16px,1.5vw,18px);color:#E6E8EE;max-width:480px}
@media(max-width:760px){.cband .in{grid-template-columns:1fr}.cband .in>.btns{grid-column:1;grid-row:auto;margin-top:24px}}
.small-note{font-size:14px;color:var(--muted);margin-top:24px}
.empty{padding:40px 0;color:var(--muted)}
.bank{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bank .chip{display:inline-flex;align-items:center;justify-content:center;min-width:88px;height:44px;padding:0 18px;border-radius:12px;background:#fff;color:#0A4DA3;font-weight:800;letter-spacing:.06em;font-size:18px;border:1px solid var(--line)}
.bank img.lg{height:44px;width:auto;background:#fff;border-radius:12px;padding:6px 14px;border:1px solid var(--line)}
.acct{font-family:var(--serif);font-size:clamp(32px,5vw,52px);letter-spacing:.02em;line-height:1.1;margin-top:20px;overflow-wrap:anywhere}
.copy{margin-top:18px}
/* footer */
.foot{background:#0A0A0B;color:#fff;border-top:1px solid #26262B;padding:clamp(44px,5vw,56px) 0 28px}
.foot .top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot p{margin-top:16px;font-size:15px;line-height:1.65;color:#A8ADB8;max-width:420px}
.foot img{height:46px;width:auto}
.foot .cols{display:flex;gap:clamp(40px,6vw,96px)}
.foot .cols b{display:block;font-size:15px;margin-bottom:6px}
.foot .cols a{display:flex;align-items:center;min-height:40px;font-size:15px;color:#E6E8EE}
.foot .cols a:hover{color:#9DBBFF}
.foot .bot{border-top:1px solid #26262B;margin-top:32px;padding-top:20px;font-size:13px;line-height:1.6;color:#A8ADB8}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#0E2A6B;color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;z-index:90;opacity:0;pointer-events:none;transition:opacity .3s}
.toast.on{opacity:1}
@media(max-width:560px){.btns .btn{flex:1 1 100%}.rw .d .eyebrow{font-size:11px}}
/* ===== header mengikuti tema ===== */
:root{--logo-c:#fff;--nb:rgba(10,10,11,.88);--npb:#0A0A0B;--nf:#fff;--nl:#26262B;--nlink:#9DBBFF;--nborder:rgba(255,255,255,.28);--nhover:rgba(255,255,255,.1)}
:root[data-theme="light"]{--logo-c:#1F55E0;--nb:rgba(255,255,255,.88);--npb:#fff;--nf:#0A0A0B;--nl:#D9DEE8;--nlink:#1F55E0;--nborder:rgba(10,10,11,.25);--nhover:rgba(10,10,11,.06)}
.nav{background:var(--nb);color:var(--nf);border-bottom-color:var(--nl);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);transition:background-color .35s,border-color .35s,box-shadow .35s;view-transition-name:nav}
.nav .in{transition:height .3s ease}
.nav.sc{box-shadow:0 8px 28px rgba(0,0,0,.18)}
.nav.sc .in{height:68px}
.nav-links a{color:var(--nf);position:relative}
.nav-links a:hover,.nav-links a.on{color:var(--nlink)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}
.icon-btn{border-color:var(--nborder);color:var(--nf)}
.icon-btn:hover{background:var(--nhover)}
.panel{background:var(--npb);border-top-color:var(--nl);color:var(--nf)}
.panel a.l{border-bottom-color:var(--nl);color:var(--nf)}
.panel a.l.on{color:var(--nlink)}
/* logo: dua tanda (GSJA kiri, PF kanan) satu warna; putih di mode gelap, biru palet di mode terang */
.logo,.foot-logo{display:flex;align-items:center;gap:calc(var(--lh,46px)*.3)}
.mk{display:block;flex:none;background:var(--logo-c,currentColor);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.mk-g{height:var(--lh,46px);aspect-ratio:419/373;background:url(../images/header/logo-gsja.webp) center/contain no-repeat;-webkit-mask:none;mask:none}
.mk-p{height:calc(var(--lh,46px)*.94);aspect-ratio:1974/2358;-webkit-mask-image:url(../images/header/logo-pf.svg);mask-image:url(../images/header/logo-pf.svg)}
.mk-div{flex:none;width:1px;height:calc(var(--lh,46px)*.62);background:var(--logo-c,currentColor);opacity:.4}
.foot-logo{--lh:52px;--logo-c:#fff}
@media(max-width:560px){.foot-logo{--lh:46px}}
@media(forced-colors:active){.mk-p,.mk-div{background:CanvasText;forced-color-adjust:none}.mk-g{forced-color-adjust:none}}
.bar{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--accent),#6E9BFF);transform:scaleX(0);transform-origin:left;z-index:90;pointer-events:none}
/* ===== animasi ===== */
:root{--ease:cubic-bezier(.2,.8,.2,1)}
/* transisi antar halaman (browser modern) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.25s ease both vt-out}
::view-transition-new(root){animation:.45s var(--ease) both vt-in}
::view-transition-group(nav){animation-duration:0s}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
/* masuk halaman (cadangan untuk browser lain) */
@supports not (view-transition-name:a){main{animation:pg-in .55s var(--ease) both}}
@keyframes pg-in{from{opacity:0;transform:translateY(12px)}}
/* animasi ganti tema: lingkaran membesar dari tombol */
html.vt-theme::view-transition-old(root){animation:none;mix-blend-mode:normal}
html.vt-theme::view-transition-new(root){animation:theme-reveal .7s var(--ease) both;mix-blend-mode:normal}
@keyframes theme-reveal{from{clip-path:circle(0 at var(--tx,90%) var(--ty,40px))}to{clip-path:circle(150vmax at var(--tx,90%) var(--ty,40px))}}
/* judul banner masuk bertahap */
.banner .tx>*,.hero .blocks .blk.on>*{animation:up .8s var(--ease) both}
.banner .tx>:nth-child(2){animation-delay:.1s}.banner .tx>:nth-child(3){animation-delay:.2s}.banner .tx>:nth-child(4){animation-delay:.3s}
.hero .blocks .blk.on>:nth-child(2){animation-delay:.08s}.hero .blocks .blk.on>:nth-child(3){animation-delay:.16s}.hero .blocks .blk.on>:nth-child(4){animation-delay:.24s}
@keyframes up{from{opacity:0;transform:translateY(22px)}}
/* muncul saat di-scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.mosaic .rv{transform:translateY(20px) scale(.96)}
.mosaic .rv.in{transform:none}
/* kerangka memuat (skeleton) */
html:not(.ready) [data-render]:empty{min-height:200px;border-radius:var(--radius);background:linear-gradient(100deg,var(--surface) 30%,var(--alt) 50%,var(--surface) 70%);background-size:200% 100%;animation:shim 1.3s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
/* ganti bulan / bahasa */
.swap{animation:swap .45s var(--ease) both}
@keyframes swap{from{opacity:0;transform:translateY(14px)}}
.langsw{animation:langsw .4s ease both}
@keyframes langsw{from{opacity:.25}}
/* hover kartu, tombol, tile */
.card,.doc{transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .35s}
@media(hover:hover){
.card:hover,.doc:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.22)}
.btn{transition:transform .25s var(--ease),filter .2s,background-color .3s,color .3s,box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(42,99,243,.28)}
.btn.out:hover,.btn.owhite:hover,.btn.white:hover{box-shadow:0 10px 24px rgba(0,0,0,.18)}
}
.btn:active{transform:scale(.97)}
.tile img,.mosaic button img,.doc .ph img{transition:transform .8s var(--ease)}
.doc:hover .ph img{transform:scale(1.06)}
.mosaic button{overflow:hidden}
/* lightbox */
.lb{display:flex;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lb.open{opacity:1;visibility:visible;transition:opacity .3s ease}
.lb img{transform:scale(.94);transition:transform .45s var(--ease)}
.lb.open img{transform:scale(1)}
.lb img.go-n{animation:lb-n .4s var(--ease) both}.lb img.go-p{animation:lb-p .4s var(--ease) both}
@keyframes lb-n{from{opacity:0;transform:translateX(48px)}}
@keyframes lb-p{from{opacity:0;transform:translateX(-48px)}}
.lb button{transition:background-color .2s,transform .2s}.lb button:hover{background:rgba(42,99,243,.8);transform:scale(1.08)}
.lb .x:hover{transform:rotate(90deg) scale(1.08)}
/* toast */
.toast{transition:opacity .3s,transform .4s var(--ease)}
/* hormati preferensi kurangi gerak */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.rv{opacity:1;transform:none}
::view-transition-old(root),::view-transition-new(root){animation:none}
.bar{display:none}
}
/* layar pembuka (sekali per sesi, hanya beranda) */
html.splash{--sw:min(300px,72vw)}
html.splash body::before{content:"";position:fixed;inset:0;z-index:200;background:#0A0A0B url(../images/header/logo-lockup.svg) center 46%/var(--sw) auto no-repeat;pointer-events:none;animation:splash-out .6s ease 1.15s forwards}
html.splash body::after{content:"";position:fixed;z-index:201;left:50%;top:calc(46% + var(--sw)*.197 + 22px);width:min(160px,40vw);height:3px;margin-left:calc(min(160px,40vw)/-2);border-radius:3px;background:linear-gradient(90deg,var(--accent),#6E9BFF);transform:scaleX(0);transform-origin:left;pointer-events:none;animation:splash-bar 1.05s var(--ease) forwards,splash-out .3s ease 1.15s forwards}
@keyframes splash-bar{to{transform:scaleX(1)}}
@keyframes splash-out{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){html.splash body::before,html.splash body::after{animation-delay:0s!important;animation-duration:.01ms!important}}
/* banner/hero: lapisan foto, gelap, dan teks tersusun rapi (tanpa celah saat foto bergantian) */
.banner,.hero{isolation:isolate}
.hero .sc{inset:-1px;z-index:2}
.hero .in,.banner .tx{z-index:3}
/* ===== latar biru: gradasi gelombang + aksen batik mega mendung (pudar) ===== */
.card.navy,.vband,.cband{position:relative;overflow:hidden;isolation:isolate;--rx:90%;--ry:15%;--rs:24px;--mg:right}
.card.navy{background:radial-gradient(circle at var(--rx) var(--ry),rgba(70,125,255,.65),transparent 62%),linear-gradient(135deg,#0A1F55 0%,#0E2A6B 55%,#1B47C0 135%)}
.vband{background:radial-gradient(ellipse at var(--rx) var(--ry),rgba(70,125,255,.6),transparent 60%),linear-gradient(100deg,#0A1F55 0%,#0E2A6B 50%,#17399A 130%)}
.cband{background:linear-gradient(100deg,#0A1F55,#0E2A6B 50%,#1B47C0)}
.card.navy::before,.vband::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-radial-gradient(circle at var(--rx) var(--ry),transparent 0 var(--rs),rgba(255,255,255,.1) var(--rs) calc(var(--rs) + 1px));-webkit-mask-image:radial-gradient(circle at var(--rx) var(--ry),#000 0,transparent 70%);mask-image:radial-gradient(circle at var(--rx) var(--ry),#000 0,transparent 70%)}
.card.navy::after,.vband::after,.cband::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.17;background:url(../images/patterns/mega-halus.svg) var(--rx) var(--ry)/max(var(--mt,880px),100%) auto repeat-y;-webkit-mask-image:radial-gradient(ellipse at var(--rx) var(--ry),#000 0,transparent 68%);mask-image:radial-gradient(ellipse at var(--rx) var(--ry),#000 0,transparent 68%)}
.cband::after{z-index:0}
.card.navy .body,.card.navy>*{position:relative}
/* variasi gelombang */
.card.navy:nth-child(even){--rx:12%;--ry:100%;--rs:34px}
.card.navy:nth-child(3n){--rx:70%;--ry:105%;--rs:20px}
.vband{--rx:50%;--ry:-30%;--rs:30px}
.vband::after{opacity:.14}
@media(max-width:700px){.card.navy,.vband,.cband,.gb-stage,.sd-hero{--mt:560px}}
/* kartu bergantian (acara / khotbah) */
.slides2{display:grid;flex:1}
.slides2>.sl{grid-area:1/1;display:flex;flex-direction:column;min-width:0;opacity:0;visibility:hidden;transform:translateX(28px);transition:opacity .5s ease,transform .7s var(--ease),visibility 0s .7s}
.slides2>.sl.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.slides2>.sl>.btn{align-self:flex-start;margin-top:auto}
.slides2>.sl>.body+.btn{margin-top:28px}
.slides2>.sl>.body{flex:1}
.dots2{display:flex;gap:6px;margin-top:22px}
.dots2 button{width:36px;height:36px;padding:0;border:0;background:none;position:relative}
.dots2 button::before{content:"";position:absolute;left:0;right:0;top:16px;height:4px;border-radius:4px;background:currentColor;opacity:.28;transition:opacity .3s,background-color .3s}
.dots2 button[aria-pressed="true"]::before{opacity:1;background:var(--accent)}
.card.navy .dots2 button[aria-pressed="true"]::before{background:#fff}
@media(prefers-reduced-motion:reduce){.slides2>.sl{transform:none}}
/* ===== kartu netral: desain A, sparkle besar terpotong di kanan bawah ===== */
:root{--ring:rgba(255,255,255,.08);--spark:#fff}
:root[data-theme="light"]{--ring:rgba(10,10,11,.075);--spark:#0A0A0B}
.card:not(.navy){position:relative;overflow:hidden;isolation:isolate;--rx:94%;--ry:6%;--rs:28px}
.card:not(.navy)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-radial-gradient(circle at var(--rx) var(--ry),transparent 0 var(--rs),var(--ring) var(--rs) calc(var(--rs) + 1px));-webkit-mask-image:radial-gradient(circle at var(--rx) var(--ry),#000 0,transparent 68%);mask-image:radial-gradient(circle at var(--rx) var(--ry),#000 0,transparent 68%)}
.card:not(.navy)::after{content:"";position:absolute;z-index:-1;right:-36px;bottom:-30px;width:clamp(155px,38%,220px);aspect-ratio:1;background:var(--spark);opacity:.18;pointer-events:none;-webkit-mask:url(../images/patterns/sparkle-large.svg) center/contain no-repeat;mask:url(../images/patterns/sparkle-large.svg) center/contain no-repeat;transition:opacity .4s}
@media(hover:hover){.card:not(.navy):hover::after{opacity:.22}}
/* ikon nilai-nilai (tentang.html): menggantikan bintang; kartu dengan judul lain tetap memakai bintang */
[data-render="values"] .card.value-ramah::after{-webkit-mask-image:url(../images/patterns/values/ramah.svg);mask-image:url(../images/patterns/values/ramah.svg)}
[data-render="values"] .card.value-sopan::after{-webkit-mask-image:url(../images/patterns/values/sopan.svg);mask-image:url(../images/patterns/values/sopan.svg)}
[data-render="values"] .card.value-berseri::after{-webkit-mask-image:url(../images/patterns/values/berseri.svg);mask-image:url(../images/patterns/values/berseri.svg)}
[data-render="values"] .card.value-kekeluargaan::after{-webkit-mask-image:url(../images/patterns/values/kekeluargaan.svg);mask-image:url(../images/patterns/values/kekeluargaan.svg)}
[data-render="values"] .card.value-gotong-royong::after{-webkit-mask-image:url(../images/patterns/values/gotong-royong.svg);mask-image:url(../images/patterns/values/gotong-royong.svg)}
[data-render="values"] .card.value-saling-mengasihi::after{-webkit-mask-image:url(../images/patterns/values/saling-mengasihi.svg);mask-image:url(../images/patterns/values/saling-mengasihi.svg)}
.card:not(.navy):nth-child(even){--rx:6%;--ry:96%;--rs:34px}
.card:not(.navy):nth-child(3n){--rx:50%;--ry:-10%;--rs:22px}
/* media sosial */
.soc{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.soc[hidden]{display:none}
.soc a{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;color:#fff;transition:background-color .25s,border-color .25s,transform .25s var(--ease)}
.soc a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
/* Instagram: warna logo Instagram, bukan biru situs */
:root{--ig:linear-gradient(45deg,#feda75 0%,#fa7e1e 28%,#d62976 55%,#962fbf 78%,#4f5bd5 100%)}
.nav .icon-btn.ig{background:var(--ig);border-color:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:transform .25s var(--ease),filter .25s,box-shadow .25s}
.nav .icon-btn.ig[hidden]{display:none}
.nav .icon-btn.ig:hover{background:var(--ig);filter:brightness(1.08) saturate(1.1);transform:translateY(-2px) rotate(-6deg);box-shadow:0 8px 20px rgba(214,41,118,.35)}
.soc a[aria-label="Instagram"]:hover{background:var(--ig);border-color:transparent;box-shadow:0 8px 20px rgba(214,41,118,.3)}
/* perbaikan: gradasi Instagram tidak bocor ke area border */
.nav .icon-btn.ig,.soc a[aria-label="Instagram"]{border:0;background:var(--ig);background-origin:border-box;background-clip:border-box;color:#fff}
.nav .icon-btn.ig:hover,.soc a[aria-label="Instagram"]:hover{background:var(--ig);background-origin:border-box;box-shadow:none}
@media(hover:hover){.nav .icon-btn.ig:hover,.soc a[aria-label="Instagram"]:hover{box-shadow:0 8px 20px rgba(214,41,118,.3)}}
/* header HP: semua tombol muat satu baris */
@media(max-width:560px){
.nav .wrap.in{padding-left:16px;padding-right:16px;gap:10px}
.nav-tools{gap:6px}
.nav-tools .icon-btn{width:40px;height:40px;font-size:17px}
.logo{--lh:34px}
}
@media(max-width:380px){.logo{--lh:30px}.nav-tools .icon-btn{width:36px;height:36px}.nav .wrap.in{padding-left:12px;padding-right:12px;gap:6px}.nav-tools{gap:4px}}
/* tombol tema: saklar geser matahari <-> bulan */
.tswitch{position:relative;flex-shrink:0;width:76px;height:40px;padding:0;border-radius:999px;border:0;overflow:hidden;cursor:pointer;background:linear-gradient(180deg,#0B1530 0%,#1B2C5E 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 2px 6px rgba(0,0,0,.45);transition:background .6s ease,box-shadow .4s;-webkit-tap-highlight-color:transparent}
:root[data-theme="light"] .tswitch{background:linear-gradient(180deg,#69B4FF 0%,#BFE0FF 100%);box-shadow:inset 0 0 0 1px rgba(10,10,11,.18),inset 0 2px 6px rgba(20,60,120,.25)}
.tswitch:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tswitch .th{position:absolute;top:4px;left:4px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:#E9EDFB;box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 0 0 rgba(233,237,251,.0);transform:translateX(36px) rotate(-30deg);transition:transform .65s cubic-bezier(.68,-.45,.27,1.4),background-color .5s,box-shadow .5s}
:root[data-theme="light"] .tswitch .th{transform:translateX(0) rotate(0);background:#FFC93C;box-shadow:0 2px 8px rgba(160,100,0,.35),0 0 18px 4px rgba(255,201,60,.55)}
.tswitch .th svg{position:absolute;width:22px;height:22px;transition:opacity .35s,transform .65s cubic-bezier(.34,1.56,.64,1)}
.tswitch .sun{color:#fff;opacity:0;transform:rotate(-90deg) scale(.3)}
.tswitch .moon{color:#3A4A8C;opacity:1;transform:rotate(0) scale(1)}
:root[data-theme="light"] .tswitch .sun{opacity:1;transform:rotate(0) scale(1);color:#fff}
:root[data-theme="light"] .tswitch .moon{opacity:0;transform:rotate(90deg) scale(.3)}
.tswitch:active .th{width:36px}
:root[data-theme="dark"] .tswitch:active .th,:root:not([data-theme]) .tswitch:active .th{transform:translateX(32px) rotate(-30deg)}
/* hiasan latar: awan (terang) dan bintang (gelap) */
.tswitch .tk{position:absolute;inset:0;pointer-events:none}
.tswitch .cl{position:absolute;height:9px;border-radius:9px;background:#fff;opacity:0;transform:translateX(18px);transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1)}
.tswitch .c1{width:20px;right:9px;bottom:8px}.tswitch .c2{width:14px;right:20px;bottom:17px;opacity:0}
:root[data-theme="light"] .tswitch .cl{opacity:.95;transform:none}
.tswitch .sr{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;transform:translateX(-14px) scale(.4);transition:opacity .5s .1s,transform .7s cubic-bezier(.2,.8,.2,1) .1s}
.tswitch .s1{left:10px;top:9px}.tswitch .s2{left:20px;top:22px;width:2px;height:2px}.tswitch .s3{left:30px;top:12px;width:2px;height:2px}.tswitch .s4{left:15px;top:29px}
:root[data-theme="dark"] .tswitch .sr,:root:not([data-theme]) .tswitch .sr{opacity:.9;transform:none;animation:twk 2.6s ease-in-out infinite}
.tswitch .s2{animation-delay:.6s!important}.tswitch .s3{animation-delay:1.2s!important}.tswitch .s4{animation-delay:1.8s!important}
@keyframes twk{50%{opacity:.25}}
@media(max-width:560px){.tswitch{width:56px;height:32px}.tswitch .th{width:24px;height:24px;top:4px;left:4px;transform:translateX(24px) rotate(-30deg)}:root[data-theme="light"] .tswitch .th{transform:none}.tswitch .th svg{width:17px;height:17px}.tswitch .c1{width:15px;height:7px;bottom:7px;right:6px}.tswitch .c2{display:none}.tswitch .s1{left:7px;top:7px}.tswitch .s2{left:14px;top:17px}.tswitch .s3{left:22px;top:9px}.tswitch .s4{left:10px;top:22px}}
@media(max-width:380px){.tswitch{width:50px;height:30px}.tswitch .th{width:22px;height:22px;transform:translateX(20px) rotate(-30deg)}}
@media(prefers-reduced-motion:reduce){.tswitch .sr{animation:none!important}}
@media(max-width:340px){.logo{--lh:26px}.nav-tools{gap:3px}.nav .wrap.in{padding-left:10px;padding-right:10px}.nav-tools .icon-btn{width:34px;height:34px}.tswitch{width:46px;height:28px}.tswitch .th{width:20px;height:20px;top:4px;left:4px;transform:translateX(18px) rotate(-30deg)}}
/* pilihan bahasa: saklar geser dengan bendera */
/* saklar bahasa: ukuran dihitung dari satu variabel supaya selalu rapi di semua layar */
.tswitch .th,.tswitch .tk{pointer-events:none}
/* ---- foto acara/khotbah dari CMS ---- */
.cimg{height:132px;border-radius:14px;overflow:hidden;margin-bottom:14px;background:rgba(255,255,255,.06)}
.cimg img{width:100%;height:100%;object-fit:cover;display:block}
.who{display:flex;align-items:center;gap:10px}
.av{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1)}
.av img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- dropdown bahasa ---- */
.lang{position:relative;flex-shrink:0}
.lang-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 8px;border:1px solid var(--nborder);border-radius:999px;background:transparent;color:var(--nf);font:700 14px/1 var(--sans,inherit);cursor:pointer;transition:background-color .25s,border-color .25s}
.lang-btn:hover{background:var(--nhover)}
.lang-btn:focus-visible,.lang-list button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lang .fl{width:26px;height:19px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(128,128,128,.28)}
.lang .chev{width:16px;height:16px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lang-list{position:absolute;right:0;top:calc(100% + 10px);z-index:80;list-style:none;margin:0;padding:6px;min-width:150px;border-radius:14px;background:#fff;color:#2b2f38;box-shadow:0 14px 40px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06);transform-origin:top right;animation:langIn .22s cubic-bezier(.2,.8,.2,1)}
.lang-list[hidden]{display:none}
:root:not([data-theme="light"]) .lang-list{background:#1b1c20;color:#e8eaf0;box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12)}
.lang-list button{display:flex;align-items:center;gap:14px;width:100%;padding:11px 14px;border:0;border-radius:10px;background:transparent;color:inherit;font:600 17px/1 var(--sans,inherit);text-align:left;cursor:pointer;transition:background-color .2s,color .2s}
.lang-list button:hover{background:rgba(120,130,150,.16)}
.lang-list button[aria-selected="true"]{background:#0A3D91;color:#fff}
@keyframes langIn{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:560px){.lang-btn{height:36px;gap:6px;padding:0 8px 0 6px;font-size:13px}.lang .fl{width:24px;height:17px}}
@media(max-width:420px){.lang-btn .lc{display:none}}
@media(max-width:340px){.lang-btn{height:32px;padding:0 6px 0 5px}.lang .fl{width:22px;height:16px}.lang .chev{width:14px;height:14px}}
@media(prefers-reduced-motion:reduce){.lang-list{animation:none}.lang .chev{transition:none}}

/* ---- huruf Mandarin & Korea ---- */
:lang(zh-Hans){--sans:"Plus Jakarta Sans","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;--serif:"Fraunces","Songti SC","Noto Serif SC","SimSun",serif}
:lang(ko){--sans:"Plus Jakarta Sans","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;--serif:"Fraunces","Noto Serif KR","Batang",serif}
:lang(zh-Hans) .hero h1,:lang(ko) .hero h1{letter-spacing:0;line-height:1.12}
:lang(zh-Hans) .eyebrow,:lang(ko) .eyebrow{letter-spacing:.06em;text-transform:none}
:lang(ko) body{word-break:keep-all;overflow-wrap:break-word}
:lang(ko) .hero h1,:lang(ko) .hero h2.hh{font-size:clamp(36px,6vw,80px);line-height:1.15}
:lang(zh-Hans) .hero h1,:lang(zh-Hans) .hero h2.hh{font-size:clamp(42px,7vw,96px);line-height:1.12}
:lang(ko) .banner h1,:lang(zh-Hans) .banner h1{font-size:clamp(36px,6vw,72px);line-height:1.12}
:lang(ko) h2.h,:lang(zh-Hans) h2.h{line-height:1.2}

/* halaman pelayanan & footer 3 kolom */
section[hidden]{display:none!important}
.foot .cols{flex-wrap:wrap;gap:28px clamp(32px,5vw,80px)}

/* ---------- Pesan & Kesan ---------- */
.gb .head-c{text-align:center;max-width:720px;margin:0 auto 32px}
.gb-stage{position:relative;overflow:hidden;border-radius:28px;background:radial-gradient(120% 90% at 15% 0%,#1E4BB8 0%,transparent 55%),radial-gradient(90% 80% at 100% 100%,#163A92 0%,transparent 60%),var(--navy);box-shadow:0 20px 50px -24px rgba(14,42,107,.7);min-height:216px}
.gb-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.5),transparent),radial-gradient(2px 2px at 70% 20%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 45% 75%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 88% 65%,rgba(255,255,255,.35),transparent);pointer-events:none}
.gb-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#E6E8EE;margin:0;text-align:center;padding:0 24px}
.gb-b{position:absolute;opacity:0;transition:opacity .7s ease}
.gb-b.fly{transform:translate(var(--fx,0),var(--fy,0)) scale(.6) rotate(-6deg);opacity:0;transition:none}
.gb-b.in{opacity:1;transform:none;transition:opacity .9s ease,transform 1.3s cubic-bezier(.2,.8,.2,1)}
.gb-b.out{opacity:0;transform:none;transition:opacity .7s ease}
.gb-in{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:14px 16px;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.gb-b.float .gb-in{animation:gbf var(--dur,8s) ease-in-out infinite alternate}
@keyframes gbf{from{transform:translate(0,0) rotate(var(--r0,0deg))}to{transform:translate(var(--dx,6px),var(--dy,-8px)) rotate(var(--r1,0deg))}}
.gb-hd{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.gb-av{flex:none;width:28px;height:28px;border-radius:999px;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.gb-nm{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gb-in p{margin:0;font-size:14px;line-height:1.5;color:#E6E8EE;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gb-in time{display:block;margin-top:6px;font-size:12px;color:#9DBBFF}
.gb-form{max-width:640px;margin:32px auto 0;display:flex;flex-direction:column;gap:12px}
.gb-form label.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gb-form input,.gb-form textarea{width:100%;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;resize:vertical}
.gb-form input:focus,.gb-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.gb-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.gb-cnt{font-size:13px;color:var(--muted)}
.gb-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.gb-status{margin:0;font-size:14px;min-height:0}.gb-status.ok{color:#1F8A4C}.gb-status.err{color:#D93636}
.gb-demo{margin:0;font-size:12px;color:var(--muted)}
.gb-modal{position:fixed;inset:0;z-index:300;background:rgba(5,10,30,.7);display:none;align-items:center;justify-content:center;padding:16px}
.gb-modal.open{display:flex}
.gb-box{background:var(--bg);color:var(--text);border-radius:22px;width:min(640px,100%);max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.gb-top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.gb-top h3{margin:0;font-size:18px}
.gb-x{background:none;border:0;color:inherit;font-size:28px;line-height:1;cursor:pointer;width:40px;height:40px;border-radius:999px}
.gb-x:hover{background:var(--surface)}
.gb-list{overflow:auto;padding:12px 20px 20px}
.gb-list article{padding:14px 0;border-bottom:1px solid var(--line)}
.gb-list article:last-child{border:0}
.gb-list .gb-hd{margin-bottom:6px}.gb-list time{margin-left:auto;font-size:12px;color:var(--muted)}
.gb-list p{margin:0;color:var(--text2);line-height:1.55}
body.gb-lock{overflow:hidden}
@media(prefers-reduced-motion:reduce){.gb-b.float .gb-in{animation:none}.gb-b.in,.gb-b.out{transition:opacity .5s}}
/* Pesan & Kesan: gradasi + corak mega mendung seperti kartu biru lain */
.gb button.btn.out{background:transparent;color:var(--text);border-color:var(--text);cursor:pointer}
.gb button.btn.out:hover{background:var(--text);color:var(--bg)}
.gb-stage{isolation:isolate;--rx:88%;--ry:8%;--rs:26px;background:radial-gradient(circle at var(--rx) var(--ry),rgba(70,125,255,.65),transparent 60%),radial-gradient(circle at 8% 100%,rgba(70,125,255,.4),transparent 55%),linear-gradient(135deg,#0A1F55 0%,#0E2A6B 55%,#1B47C0 135%)}
.gb-stage::before{z-index:-1;background:repeating-radial-gradient(circle at var(--rx) var(--ry),transparent 0 var(--rs),rgba(255,255,255,.1) var(--rs) calc(var(--rs) + 1px));-webkit-mask-image:radial-gradient(circle at var(--rx) var(--ry),#000 0,transparent 70%);mask-image:radial-gradient(circle at var(--rx) var(--ry),#000 0,transparent 70%)}
.gb-stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.17;background:url(../images/patterns/mega-halus.svg) var(--rx) var(--ry)/max(var(--mt,880px),100%) auto repeat-y;-webkit-mask-image:radial-gradient(ellipse at var(--rx) var(--ry),#000 0,transparent 68%);mask-image:radial-gradient(ellipse at var(--rx) var(--ry),#000 0,transparent 68%)}

.gb-status,.gb-demo{transition:opacity .5s}.gb-status.gone,.gb-demo.gone{opacity:0}

/* area sentuh >= 44px di HP tanpa mengubah tampilan */
@media(max-width:560px){
.lang-btn{height:44px}
.tswitch,:root[data-theme] .tswitch{height:44px;border-block:6px solid transparent;margin-block:-6px;background-clip:padding-box}
.nav-tools .icon-btn{width:44px;height:44px}
}
@media(max-width:380px){.tswitch{height:42px}}
@media(max-width:340px){.lang-btn{height:44px}.tswitch{height:40px}.nav-tools .icon-btn{width:40px;height:40px}}
/* tombol tema di HP: bulat, sama seperti tombol lain di bar atas */
@media(max-width:560px){
.tswitch,:root[data-theme] .tswitch{width:44px;height:44px;border:0;margin:0;border-radius:50%;background-clip:border-box}
.tswitch .tk{display:none}
.tswitch .th{top:8px;left:8px;width:28px;height:28px;transform:rotate(-30deg)}
:root[data-theme="light"] .tswitch .th{transform:none}
.tswitch .th svg{width:18px;height:18px}
.tswitch:active .th{width:28px}
:root[data-theme="dark"] .tswitch:active .th,:root:not([data-theme]) .tswitch:active .th{transform:rotate(-30deg)}
}
@media(max-width:340px){.tswitch,:root[data-theme] .tswitch{width:40px;height:40px}.tswitch .th{top:6px;left:6px}}

/* ---------- halaman baca khotbah ---------- */
.rw .i .t a{color:inherit}.rw .i .t a:hover{color:var(--accent)}
.rw .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:560px){.rw{flex-wrap:wrap}.rw .acts{width:100%;justify-content:flex-start}}
.sd-hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:clamp(48px,7vw,96px) 0 clamp(48px,6vw,80px);--rx:88%;--ry:5%;--rs:28px;background:radial-gradient(circle at var(--rx) var(--ry),rgba(70,125,255,.65),transparent 60%),radial-gradient(circle at 6% 100%,rgba(70,125,255,.35),transparent 55%),linear-gradient(135deg,#0A1F55 0%,#0E2A6B 55%,#1B47C0 135%)}
.sd-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-radial-gradient(circle at var(--rx) var(--ry),transparent 0 var(--rs),rgba(255,255,255,.1) var(--rs) calc(var(--rs) + 1px));-webkit-mask-image:radial-gradient(circle at var(--rx) var(--ry),#000 0,transparent 70%);mask-image:radial-gradient(circle at var(--rx) var(--ry),#000 0,transparent 70%)}
.sd-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.17;background:url(../images/patterns/mega-halus.svg) var(--rx) var(--ry)/max(var(--mt,900px),100%) auto repeat-y;-webkit-mask-image:radial-gradient(ellipse at var(--rx) var(--ry),#000 0,transparent 68%);mask-image:radial-gradient(ellipse at var(--rx) var(--ry),#000 0,transparent 68%)}
.sd-hero .eyebrow{color:#9DBBFF}
.sd-hero .wrap.in{display:grid;gap:clamp(24px,5vw,64px);align-items:center}
.sd-hero .wrap.in.has-ph{grid-template-columns:minmax(0,300px) 1fr}
.sd-ph{aspect-ratio:4/5;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.28);box-shadow:0 24px 60px -24px rgba(0,0,0,.6);background:rgba(255,255,255,.08)}
.sd-ph img{width:100%;height:100%;object-fit:cover}
.sd-hero h1{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;font-size:clamp(38px,6vw,76px);line-height:1.02;margin-top:14px}
.sd-by{margin-top:16px;font-size:18px;color:#E6E8EE}.sd-by b{color:#fff}
.sd-verse{margin-top:16px;max-width:640px;font-size:18px;line-height:1.55;color:#C9D4EE}
.sd-by+.sd-verse{margin-top:6px}
.sd-verse i{font-family:var(--serif);font-size:1.14em;color:#fff}:lang(zh-Hans) .sd-verse i,:lang(ko) .sd-verse i{font-style:normal;font-size:1.04em}
@media(max-width:760px){.sd-hero .wrap.in.has-ph{grid-template-columns:1fr;justify-items:center;text-align:center}.sd-ph{width:150px;aspect-ratio:1;border-radius:999px}}
.sd-body{max-width:760px;margin:0 auto}
/* ruang cadangan sebelum konten khotbah dirender (mencegah layout bergeser): tinggi mengikuti ukuran rata-rata hasil ukur */
html:not(.ready) .sd-hero:empty{min-height:320px}html:not(.ready) .sd-body:empty{min-height:100vh}html:not(.ready) .sd-nav:empty{min-height:200px}
@media(min-width:701px){html:not(.ready) .sd-hero:empty{min-height:262px}html:not(.ready) .sd-nav:empty{min-height:110px}}
@media(min-width:1100px){html:not(.ready) .sd-hero:empty{min-height:367px}}
.sd-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:28px}.sd-min{color:var(--muted);font-size:14px;margin-right:auto}
@media(max-width:560px){.sd-acts{gap:10px}.sd-min{flex:0 0 100%;margin:0}.sd-acts .btn{flex:1 1 140px}.sd-acts button.btn:last-child{flex:0 0 auto}}
.sd-quote{margin:0 0 36px;padding:clamp(24px,4vw,40px);border-radius:24px;background:var(--surface);position:relative}
.sd-quote::before{content:"“";position:absolute;left:20px;top:-6px;font-family:var(--serif);font-size:96px;line-height:1;color:var(--accent);opacity:.5}
.sd-quote blockquote{margin:0;padding-top:24px;font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,32px);line-height:1.4;letter-spacing:-.01em}
.sd-sum{font-size:19px;line-height:1.7;color:var(--text2);margin:0 0 28px;font-weight:500}
.sd-text{font-size:clamp(17px,1.5vw,19px);line-height:1.85;color:var(--text2)}
.sd-text p{margin:0 0 1.2em}
.sd-text h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,32px);line-height:1.2;letter-spacing:-.02em;color:var(--text);margin:1.8em 0 .6em}
.sd-text blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--accent);font-family:var(--serif);font-style:italic;font-size:1.15em;color:var(--text)}
.sd-text ul{margin:0 0 1.2em;padding-left:1.3em}.sd-text li{margin-bottom:.5em}
.sd-none{color:var(--muted);padding:24px;background:var(--surface);border-radius:16px}
.sd-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.sd-n{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:18px;background:var(--bg);border:1px solid var(--line);color:var(--text);min-width:0}
.sd-n:hover{border-color:var(--accent)}.sd-n b{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.2}.sd-n.next{text-align:right}
@media(max-width:760px){.sd-nav{grid-template-columns:1fr}.sd-nav .btn{order:3;justify-self:center}.sd-n.next{text-align:left}}

/* tombol outline selalu transparan (tag <button> bawaan berlatar putih) */
button.btn.out,.btn.out{background:transparent}
button.btn.out{color:var(--text);cursor:pointer}
button.btn.out:hover{background:var(--text);color:var(--bg)}
.sd-ph.none{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04))}
.sd-ph.none span{font-family:var(--serif);font-size:clamp(64px,9vw,120px);color:rgba(255,255,255,.85)}
@media(max-width:760px){.sd-ph.none span{font-size:60px}}

/* foto pembicara + kutipan berdampingan di bawah hero */
.sd-hero .wrap.in,.sd-hero .wrap.in.has-ph{display:block}
.sd-feat{display:grid;gap:clamp(20px,3vw,36px);align-items:stretch;margin:0 0 40px}
.sd-feat.has-ph{grid-template-columns:minmax(0,240px) 1fr}
.sd-feat .sd-ph{align-self:start;width:100%;border-color:var(--line);box-shadow:0 18px 40px -22px rgba(0,0,0,.5);background:var(--surface)}
.sd-feat .sd-ph.none{background:linear-gradient(135deg,#0E2A6B,#1B47C0)}
.sd-feat .sd-quote{margin:0;display:flex;flex-direction:column;justify-content:center}
.sd-quote figcaption{margin-top:16px;font-size:14px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.sd-quote figcaption::before{content:"— "}
@media(max-width:760px){.sd-feat.has-ph{grid-template-columns:1fr;justify-items:center}.sd-feat .sd-ph{width:150px;aspect-ratio:1;border-radius:999px}.sd-feat .sd-quote{width:100%}}

/* foto & kutipan setinggi sama, mengikuti panjang kutipan */
.sd-feat.has-ph{grid-template-columns:minmax(0,220px) 1fr;align-items:stretch}
.sd-feat .sd-ph{position:relative;align-self:stretch;aspect-ratio:auto;height:auto;min-height:200px}
.sd-feat .sd-ph img{position:absolute;inset:0}
.sd-feat .sd-quote{padding:clamp(20px,3vw,32px)}
.sd-quote::before{left:18px;top:8px;font-size:72px;height:40px;overflow:hidden}
.sd-quote blockquote{padding-top:22px}
.sd-quote.mid blockquote{font-size:clamp(20px,2.4vw,26px)}
.sd-quote.long blockquote{font-size:clamp(17px,2vw,21px);line-height:1.5}
@media(max-width:760px){.sd-feat.has-ph{grid-template-columns:1fr}.sd-feat .sd-ph{position:static;width:150px;height:150px;min-height:0;aspect-ratio:1}.sd-feat .sd-ph img{position:static;width:100%;height:100%}}
.gb-own{display:flex;gap:8px;margin-top:8px}
.gb-own button{font:inherit;font-size:12.5px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text2);cursor:pointer}
.gb-own button:hover{border-color:var(--blue,#2f6bff);color:var(--text)}
.gb-edit{width:100%;box-sizing:border-box;font:inherit;line-height:1.5;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--text);resize:vertical}

/* Ruang tenang di sisi teks; foto tetap selebar area kartu. */
.card:not(.navy)>h3,.card:not(.navy)>p,.card:not(.navy)>.body,.card:not(.navy) .slides2>.sl>h3,.card:not(.navy) .slides2>.sl>.body{padding-right:clamp(24px,5vw,56px)}
@media(max-width:700px){.card:not(.navy)::after{width:155px;right:-35px;bottom:-20px}}

/* Roadmap improvements */
.load-error{padding:48px 24px;background:var(--surface);margin:24px auto}.load-error .btn{margin:12px 12px 0 0}
.panel.open{max-height:calc(100dvh - 84px);overflow:auto}
@media(min-width:1180px) and (max-width:1400px){.nav-links{display:flex;gap:14px}.nav-links a{font-size:13px}.burger{display:none}.logo{--lh:40px}}
.sermon-search{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:12px 16px;align-items:end;margin:28px 0 20px}.sermon-search label{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:14px;font-weight:600;color:var(--text2)}.sermon-search input,.sermon-search select{display:block;width:100%;height:52px;padding:0 18px;border:1px solid var(--muted);border-radius:14px;background:var(--surface);color:var(--text);font:inherit;font-size:16px;font-weight:500;color-scheme:dark}:root[data-theme="light"] .sermon-search input,:root[data-theme="light"] .sermon-search select{color-scheme:light}.sermon-search input::placeholder{color:var(--muted);opacity:.85}.sermon-search select{text-overflow:ellipsis}.sermon-search input:focus-visible,.sermon-search select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}@media(max-width:700px){.sermon-search{grid-template-columns:minmax(0,1fr) auto}.sermon-search .ss-q{grid-column:1/-1}}.search-status{font-size:14px;color:var(--muted);margin-bottom:16px}
.visit-guide{margin:28px auto}.visit-guide h2{font-family:var(--serif);font-size:clamp(28px,4vw,42px)}.visit-guide .grid{margin:24px 0}.visit-guide details{padding:18px 0;border-bottom:1px solid var(--muted)}.visit-guide summary{cursor:pointer;font-weight:600}.visit-guide details p{color:var(--muted);padding-top:12px}.media-load{margin-top:24px}.media-load iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:16px}.calendar-menu{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.feature-note{padding:12px 0;color:var(--muted);font-size:14px}

.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:32px}.faq-grid details{padding:20px 0;border-bottom:1px solid var(--line)}.faq-grid summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}.faq-grid summary::-webkit-details-marker{display:none}.faq-grid summary::after{content:'+';font-size:22px;line-height:1;color:var(--eyebrow);flex:none}.faq-grid details[open] summary::after{content:'\2212'}.faq-grid details p{color:var(--muted);margin:12px 0 0}.faq-grid summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:6px}.faq-link{display:inline-block;margin-top:10px;color:var(--eyebrow);font-weight:600}@media(max-width:700px){.faq-grid{grid-template-columns:minmax(0,1fr)}}

/* Menu Pelayanan: submenu desktop + sub-tautan panel mobile */
.nav-links{align-self:stretch}.nav-dd{position:relative;display:flex;align-items:center;align-self:stretch}.dd-menu{position:absolute;top:100%;left:-18px;min-width:230px;padding:10px;background:var(--npb);border:1px solid var(--nl);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:60}.nav-dd:hover .dd-menu,.nav-dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none}.dd-menu a{display:block;padding:11px 14px;border-radius:10px;font-size:15px}.dd-menu a::after{display:none}.dd-menu a:hover,.dd-menu a:focus-visible{background:var(--nhover)}.dd-menu a.on{color:var(--nlink)}.nav-dd>a::before{content:"";display:inline-block;order:2;width:6px;height:6px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7}.nav-dd>a{display:inline-flex;align-items:center}.panel a.l.sub{min-height:46px;padding-left:22px;font-size:16px;font-weight:500;opacity:.9}

/* Foto kegiatan pelayanan (kartu 'ministry-acts') */
.card>.ph{border-radius:16px;overflow:hidden;background:var(--surface)}.card>.ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}.card:hover>.ph img{transform:scale(1.04)}

/* Efek hover (elevasi) yang terlihat di mode gelap: bayangan hitam tak terlihat di latar gelap, jadi pakai cincin + cahaya biru */
:root{--hov-sh:0 18px 40px rgba(0,0,0,.22);--hov-sh-sm:0 10px 24px rgba(0,0,0,.18);--hov-bg:rgba(10,10,11,.04)}
:root:not([data-theme="light"]){--hov-sh:0 0 0 1px rgba(157,187,255,.42),0 20px 46px -12px rgba(42,99,243,.5),0 0 34px -8px rgba(110,155,255,.28);--hov-sh-sm:0 0 0 1px rgba(157,187,255,.38),0 10px 26px -8px rgba(42,99,243,.45);--hov-bg:rgba(157,187,255,.07)}
.tile,.mosaic button,.sd-n{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s}
.rw{transition:background-color .25s;border-radius:14px}
.tile:focus-visible,.mosaic button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(hover:hover){
.card:hover,.doc:hover{box-shadow:var(--hov-sh)}
.tile:hover{transform:translateY(-6px);box-shadow:var(--hov-sh)}
.mosaic button:hover{transform:translateY(-4px);box-shadow:var(--hov-sh)}
.sd-n:hover{box-shadow:var(--hov-sh-sm)}
.rw:hover{background:var(--hov-bg)}
.btn.out:hover{box-shadow:var(--hov-sh-sm)}
.btn.owhite:hover,.btn.white:hover{box-shadow:0 10px 26px rgba(255,255,255,.28)}
.faq-grid details:hover summary{color:var(--eyebrow)}
}
@media(prefers-reduced-motion:reduce){.tile:hover,.mosaic button:hover,.card:hover,.doc:hover{transform:none}}

/* tombol jeda slide beranda: ikon kecil di sebelah titik slide, bukan tombol aksi */
.hero .dots{align-items:center}
.hero-pause{position:relative;flex:none;margin-left:8px;color:#fff;cursor:pointer}
.hero-pause::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:rgba(10,10,11,.35);transition:background-color .25s,border-color .25s}
.hero-pause svg{position:relative;display:block}
.hero-pause:hover::before{background:rgba(255,255,255,.2);border-color:#fff}
.hero .dots .hero-pause:focus-visible{outline:3px solid #9DBBFF;outline-offset:0;border-radius:50%}
/* daftar khotbah di HP: tombol Baca & Unduh PDF berdampingan, sejajar dengan judul */
@media(max-width:700px){.rw{--ind:calc(clamp(72px,10vw,156px) + clamp(16px,3vw,32px))}.rw .btn{margin-left:0}.rw .acts{flex:1 1 calc(100% - var(--ind));min-width:0;margin-left:var(--ind);justify-content:flex-start}}
/* tanggal di daftar khotbah: jangan terpotong jadi dua baris di lebar 561-800px */
.rw .d .eyebrow{white-space:nowrap}
@media(min-width:561px) and (max-width:800px){.rw .d{width:88px}}
@media(min-width:561px) and (max-width:700px){.rw{--ind:calc(88px + clamp(16px,3vw,32px))}}

/* galeri otomatis: album per kegiatan, label judul di foto, keterangan di lightbox */
.albums{display:block}
.al+.al{margin-top:clamp(36px,5vw,64px)}
.al-h{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 20px;margin-bottom:18px}
.al-h h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.8vw,34px);line-height:1.15;letter-spacing:-.02em;margin:0;text-wrap:balance}
.al-h p{margin:0;color:var(--muted);font-size:14.5px;font-weight:500}
.mosaic button{position:relative}
.mosaic .tl{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 11px;text-align:left;color:#fff;font-size:13px;line-height:1.3;background:linear-gradient(to top,rgba(10,10,11,.8),rgba(10,10,11,0));pointer-events:none}
.mosaic .tl b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600}
.mosaic .tl small{display:block;margin-top:2px;font-size:11.5px;font-weight:500;opacity:.85}
.lb .cap{position:absolute;left:0;right:0;bottom:58px;padding:0 24px;text-align:center;color:#E6E8EE;font-size:15px;line-height:1.4}
.lb .cap:empty{display:none}
@media(max-width:700px){.lb .cap{bottom:96px}}
/* Teks kosong "Belum ada pesan": font serif utama situs (Fraunces), dua baris, ikon balon pesan */
.gb-empty{flex-direction:column;gap:4px;font-family:var(--serif);font-weight:400;letter-spacing:-.02em;color:#fff;font-size:clamp(30px,3.8vw,50px);line-height:1.1;text-wrap:balance}
.gb-empty .gb-ei{width:46px;height:46px;margin-bottom:12px;color:#9DBBFF;opacity:.85}
.gb-empty .gb-e2{font-style:italic;color:#9DBBFF}
:lang(zh-Hans) .gb-empty,:lang(ko) .gb-empty{line-height:1.3}
:lang(zh-Hans) .gb-empty .gb-e2,:lang(ko) .gb-empty .gb-e2{font-style:normal}
@media(max-width:560px){.gb-empty{font-size:clamp(25px,7.4vw,32px)}.gb-empty .gb-ei{width:38px;height:38px;margin-bottom:8px}}