/* ===== modern.css — lapisan tampilan modern minimalis GTTK Kristus Pandohop =====
Dimuat SETELAH style.css, jadi hanya menimpa tampilan. Hapus 1 baris di inc.php untuk kembali ke tampilan lama. */
:root{--navy:#0b1230;--ink:#12152b;--mut:#6a6e80;--ln:#e4e1d8;--paper:#f6f5f1;--amber:#e0a93a;
--serif:"Instrument Serif",Georgia,serif;--sans:"Inter Tight",Figtree,system-ui,sans-serif}
body{background:var(--paper);color:var(--ink);font-family:var(--sans)}
/* ---------- Sidebar: navy gelap + cahaya api, menu modern ---------- */
#sb{width:268px;padding:1.5rem 1rem 1.2rem;color:#fff;position:sticky;
background:radial-gradient(90% 35% at 0% 100%,#2f4fd033 0%,transparent 70%),linear-gradient(180deg,#0d1536 0%,#080d26 100%);
border-right:1px solid #ffffff12;scrollbar-width:thin;scrollbar-color:#ffffff26 transparent}
#sb .brand{padding:.2rem 0 1.4rem;border-bottom:0;position:relative}
#sb .brand img{width:176px;filter:none;box-shadow:none}
#sb .brand::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#ffffff40,transparent)}
#sb nav{gap:.3rem;margin:1.2rem 0}
#sb nav a{position:relative;display:flex;align-items:center;gap:.8rem;border-left:0;border-radius:14px;padding:.55rem .75rem;font-size:.98rem;font-weight:500;letter-spacing:.005em;color:#aeb7dc;transition:background .25s,color .25s,transform .25s}
#sb nav a svg{flex:none;box-sizing:border-box;width:34px;height:34px;padding:7px;border-radius:11px;background:#ffffff0d;color:#c7cfee;transition:background .25s,color .25s,box-shadow .25s}
#sb nav a:hover{background:#ffffff0f;color:#fff;transform:translateX(3px)}
#sb nav a:hover svg{background:#ffffff1c;color:#fff}
#sb nav a.on{color:#fff;font-weight:600;background:linear-gradient(90deg,#3558e633,#3558e60a 85%);transform:none}
#sb nav a.on::before{content:"";position:absolute;left:-1rem;top:22%;bottom:22%;width:4px;border-radius:0 4px 4px 0;background:var(--amber);box-shadow:0 0 14px #e0a93acc}
#sb nav a.on svg{background:linear-gradient(135deg,#ffb23f,#ff7a1a);color:#1a1205;box-shadow:0 8px 20px -6px #ff7a1a99}
#sb .navrow{align-items:center;gap:.2rem}
#sb .car{display:grid;place-items:center;flex:none;width:26px;height:26px;margin-right:.2rem;padding:0;border-radius:50%;font-size:.7rem;color:#aeb7dc;background:#ffffff0d}
#sb .car:hover{background:#ffffff22;color:#fff}
#sb .sub{position:relative;margin:0 0 0 1.35rem;padding:0;border-left:0}
#sb .sub.open{margin:.15rem 0 .5rem 1.35rem;max-height:380px}
#sb .sub::before{content:"";position:absolute;left:11px;top:.55rem;bottom:.55rem;width:1px;background:#ffffff1f}
#sb .sub a{position:relative;display:block;border-left:0;border-radius:10px;padding:.5rem .7rem .5rem 1.9rem;font-family:var(--sans);font-size:.9rem;font-weight:500;line-height:1.35;color:#8f99c4;background:none}
#sb .sub a::before{content:"";position:absolute;left:8px;top:50%;bottom:auto;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#2b3563;box-shadow:none;transition:background .25s,transform .25s}
#sb .sub a:hover{background:#ffffff0f;color:#fff;transform:translateX(3px)}
#sb .sub a:hover::before{background:#c9d0ee;transform:scale(1.25)}
#sb .sub a.on{background:#ffffff14;color:var(--amber);font-weight:600}
#sb .sub a.on::before{display:block;left:8px;top:50%;bottom:auto;width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:none}
#sb::after{content:"Salvation · Health · Prosperity";margin-top:auto;padding-top:1rem;text-align:center;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:#ffffff59}
/* ---------- Topbar & footer ---------- */
.topbar{background:#f6f5f1d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--ln)}
.login.guest{border-left:1px solid var(--ln)}
footer{background:var(--navy)}
/* ---------- Hero layar penuh dengan foto ---------- */
.bh{min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);background:var(--navy);color:#fff;align-items:flex-end}
.bh::before{inset:0;left:0;right:0;aspect-ratio:auto;max-width:none;background:var(--hb) center/cover no-repeat;-webkit-mask-image:none;mask-image:none}
.bh::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#080c22db 0%,#080c228c 48%,#080c2212 100%),linear-gradient(0deg,#080c22b3,transparent 45%)}
.bh-in{padding:4rem clamp(1.4rem,5vw,4.5rem) 9rem}
.bh-in>*{max-width:560px}
.bh-in>h1{max-width:none}
.bh-eyebrow{display:inline-flex;align-items:center;gap:.7rem;color:#fff;opacity:.85;letter-spacing:.2em;font-weight:500}
.bh-eyebrow::before{content:"";width:28px;height:1px;background:var(--amber)}
.bh h1{font:400 clamp(3rem,7.5vw,6.4rem)/.95 var(--serif);letter-spacing:-.025em;text-transform:none;color:#fff;margin:0 0 1.3rem}
.bh h1 .bh-kota{font:italic 400 .36em/1.2 var(--serif);letter-spacing:0;color:var(--amber);margin-top:.9rem}
.bh-sub{color:#fff;font-weight:500;opacity:.92}
.bh-txt{color:#fffc;font-size:1.05rem}.bh-txt b{color:#fff}
.bh-btn .btn{padding:.8rem 1.5rem;font-weight:500;backdrop-filter:blur(8px)}
.bh-p{background:var(--amber);color:var(--ink);box-shadow:none;border:1px solid var(--amber)}
.bh-g{background:#ffffff1a;color:#fff;border:1px solid #ffffff59;box-shadow:none}
/* ---------- Menu cepat: kartu bersih ---------- */
.bh-qk{max-width:1120px;grid-template-columns:repeat(6,1fr);gap:.7rem;margin:-4.6rem auto 0}
.bh-qk a{border-radius:20px;border:1px solid var(--ln);box-shadow:0 14px 34px -18px #12152b59;min-height:150px;justify-content:space-between;transition:transform .3s,box-shadow .3s}
.bh-qk a:hover{transform:translateY(-6px);box-shadow:0 22px 40px -16px #12152b66}
.qk-top{background:none;padding:.95rem .95rem 0}
.bh-qk i{border:0;width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--ca) 12%,#fff)}
.bh-qk svg{stroke:var(--ca)}
.bh-qk em{background:none;border:1px solid var(--ln);color:var(--mut)}
.bh-qk a:hover em{background:var(--ca);border-color:var(--ca);color:#fff;transform:rotate(-45deg)}
.bh-qk b{font:400 1.3rem/1.15 var(--serif);color:var(--ink)}
.bh-qk span{color:var(--mut)}
@media(max-width:860px){.bh{min-height:88svh}.bh-in{padding:3rem 1.2rem 7rem}.bh-qk{grid-template-columns:repeat(3,1fr);margin-top:-4rem}}
@media(max-width:520px){.bh-qk{grid-template-columns:repeat(2,1fr)}}
/* ---------- Judul seksi ---------- */
.bhome .wrap{max-width:1120px;padding-top:4.5rem;padding-bottom:1rem}
.bt{justify-content:flex-start;background:none;padding:0;margin:0 0 2rem;font:400 clamp(2.2rem,4.6vw,3.4rem)/1.05 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.bt i{width:42px;height:42px;border-radius:50%;background:var(--navy);box-shadow:none}
.gembala h2,.bhome .bt{color:var(--ink)}
/* ---------- Gembala: foto besar + kartu kaca ---------- */
.gpair{grid-template-columns:repeat(2,1fr);gap:1.3rem;justify-content:stretch}
.gcard{position:relative;border:0;border-radius:28px;box-shadow:none;background:#cfe0fa}
.gcard img{aspect-ratio:4/5;object-position:50% 18%;transition:transform .8s}
.gcard:hover img{transform:scale(1.05)}
.gcard figcaption{position:absolute;left:14px;right:14px;bottom:14px;flex:none;padding:1rem 1.2rem;border-radius:20px;background:#ffffffc7;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);flex-direction:column-reverse;gap:.15rem}
.gcard strong{font:600 1.02rem/1.35 var(--sans);color:var(--ink)}
.gcard span{font-size:.72rem;font-weight:600;letter-spacing:.14em;color:#a8731a}
@media(max-width:720px){.gpair{grid-template-columns:1fr}.gcard img{aspect-ratio:3/4}}
/* ---------- Renungan & Video ---------- */
.hr-c{border:1px solid var(--ln);border-radius:24px;box-shadow:none;background:#fff;padding:1.4rem}
.hr-c:hover{box-shadow:0 22px 40px -20px #12152b66}
.tgl{background:#eef1fb;color:var(--navy);border-radius:16px}
.tgl b{font-family:var(--serif)}
.hr-b h3{font:400 1.45rem/1.15 var(--serif);color:var(--ink)}
.hr-b em{color:#a8731a}
.more{color:var(--navy);font-weight:600}
.bvid .card{border:1px solid var(--ln);border-left:1px solid var(--ln);border-radius:22px;box-shadow:none;background:#fff}
.ytwrap{border-radius:16px}
.btn,.btnx{font-family:var(--sans)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* ---------- Kolom pencarian (topbar kanan atas) ---------- */
.topbar{gap:1rem}
.sr{position:relative;display:flex;align-items:center;margin-left:auto;width:min(320px,100%);flex:0 1 320px}
.sr svg{position:absolute;left:14px;width:18px;height:18px;fill:none;stroke:var(--mut);stroke-width:1.8;stroke-linecap:round;pointer-events:none;transition:stroke .2s}
.sr input{width:100%;height:42px;padding:0 40px 0 42px;border:1px solid var(--ln);border-radius:99px;background:#fff;color:var(--ink);font:500 .92rem var(--sans);outline:0;transition:border-color .2s,box-shadow .2s}
.sr input::placeholder{color:#9a9eb0}
.sr input:focus{border-color:#1f3e9c;box-shadow:0 0 0 4px #1f3e9c1f}
.sr:focus-within svg{stroke:#1f3e9c}
.sr kbd{position:absolute;right:12px;display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--ln);border-radius:7px;font:600 .72rem var(--sans);color:var(--mut);background:#f6f5f1;pointer-events:none}
.sr input:focus+kbd{opacity:0}
.sr+script+.login{margin-left:0}
.srp{max-width:820px;padding-top:3.5rem}
.srp h1{font:400 clamp(2.4rem,5vw,3.6rem)/1 var(--serif);margin:0 0 1.4rem}
.srbig{display:flex;gap:.6rem;margin-bottom:1.4rem}
.srbig input{flex:1;height:50px;padding:0 1.2rem;border:1px solid var(--ln);border-radius:99px;background:#fff;font:500 1rem var(--sans);outline:0}
.srbig input:focus{border-color:#1f3e9c;box-shadow:0 0 0 4px #1f3e9c1f}
.srn{color:var(--mut);margin:0 0 1.2rem}.srn b{color:var(--ink)}
.srl{border-top:1px solid var(--ln)}
.sri{display:block;position:relative;padding:1.2rem 0 1.2rem;border-bottom:1px solid var(--ln);text-decoration:none;color:var(--ink);transition:padding .25s}
.sri:hover{padding-left:.8rem}
.sri .srt{display:inline-block;margin-bottom:.35rem;padding:.12rem .6rem;border-radius:99px;background:#eef1fb;color:var(--navy);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.sri b{display:block;font:400 1.5rem/1.2 var(--serif)}
.sri p{margin:.3rem 0 0;color:var(--mut);font-size:.94rem;line-height:1.55}
.sri mark{background:#ffe29a;color:inherit;border-radius:4px;padding:0 2px}
@media(max-width:860px){.sr{flex:1;width:auto}.sr kbd{display:none}.sr+script+.login{margin-left:0}}
/* ---------- Arsip Dokumen ---------- */
.arp{max-width:900px;padding-top:3.5rem}
.arp-eb{margin:0 0 .6rem;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.arp h1{font:400 clamp(2.4rem,5vw,3.6rem)/1 var(--serif);margin:0 0 .6rem}
.arp-sub{color:var(--mut);margin:0 0 1.6rem}.arp-sub a{color:#1f3e9c;font-weight:600}
.arp-f{display:flex;gap:.6rem;margin-bottom:1rem}
.arp-f input{flex:1;height:48px;padding:0 1.2rem;border:1px solid var(--ln);border-radius:99px;background:#fff;font:500 1rem var(--sans);outline:0}
.arp-f input:focus{border-color:#1f3e9c;box-shadow:0 0 0 4px #1f3e9c1f}
.arp-k{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.arp-k a{padding:.38rem .95rem;border:1px solid var(--ln);border-radius:99px;background:#fff;color:var(--ink);font-size:.88rem;font-weight:500;text-decoration:none;transition:.2s}
.arp-k a small{color:var(--mut);margin-left:.2rem}
.arp-k a:hover{border-color:var(--navy)}
.arp-k a.on{background:var(--navy);border-color:var(--navy);color:#fff}.arp-k a.on small{color:#ffffffb3}
.arp-l{display:grid;gap:.8rem}
.arp-c{display:flex;align-items:center;gap:1.1rem;padding:1.1rem 1.2rem;background:#fff;border:1px solid var(--ln);border-radius:22px;transition:transform .25s,box-shadow .25s}
.arp-c:hover{transform:translateY(-3px);box-shadow:0 20px 38px -22px #12152b66}
.arp-x{flex:none;display:grid;place-items:center;width:56px;height:64px;border-radius:14px;font:700 .72rem var(--sans);letter-spacing:.06em;color:#fff;background:#6a6e80}
.arp-x.x-pdf{background:#d93a3a}.arp-x.x-doc,.arp-x.x-docx{background:#2b5fd9}.arp-x.x-xls,.arp-x.x-xlsx{background:#1d8a52}
.arp-x.x-ppt,.arp-x.x-pptx{background:#e0701a}.arp-x.x-jpg,.arp-x.x-jpeg,.arp-x.x-png{background:#7a45d1}
.arp-b{flex:1;min-width:0}
.arp-b h3{margin:0;font:400 1.4rem/1.2 var(--serif);color:var(--ink);overflow-wrap:anywhere}
.arp-m{margin:.3rem 0 0;font-size:.82rem;color:var(--mut)}
.arp-m span{display:inline-block;margin-right:.5rem;padding:.08rem .6rem;border-radius:99px;background:#eef1fb;color:var(--navy);font-weight:600}
.arp-d{margin:.4rem 0 0;font-size:.92rem;color:#3c4a70;line-height:1.5}
.arp-a{display:flex;flex:none;gap:.5rem}
.arp-a a{padding:.5rem 1.05rem;border:1px solid var(--ln);border-radius:99px;font-size:.88rem;font-weight:600;text-decoration:none;color:var(--ink);transition:.2s}
.arp-a a:hover{border-color:var(--navy)}
.arp-a a.dl{background:var(--navy);border-color:var(--navy);color:#fff}
@media(max-width:640px){.arp-c{flex-wrap:wrap}.arp-a{width:100%}.arp-a a{flex:1;text-align:center}}
/* ---------- Efek gerak logo Pandohop Family Blessing (tanpa glow) ---------- */
#sb .brand{perspective:600px}
#sb .brand img{transform-origin:50% 60%;will-change:transform;animation:logoMasuk .8s cubic-bezier(.2,.8,.2,1) both;transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .35s}
#sb .brand::after{transform:scaleX(.55);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
#sb .brand:hover::after,#sb .brand:focus-visible::after{transform:scaleX(1)}
#sb .brand:hover img,#sb .brand:focus-visible img{animation:logoPantul .7s cubic-bezier(.34,1.56,.64,1) both,logoMelayang 3.2s ease-in-out .7s infinite}
#sb .brand:active img{animation:none;transform:scale(.94) translateY(2px);filter:brightness(.92);transition-duration:.12s}
#sb .brand:focus-visible{outline:2px solid #ffffff59;outline-offset:4px;border-radius:14px}
@keyframes logoMasuk{from{opacity:0;transform:translateY(-14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes logoPantul{
0%{transform:none;filter:none}
35%{transform:translateY(-6px) scale(1.09) rotate(-3deg);filter:brightness(1.18) saturate(1.15)}
65%{transform:translateY(-2px) scale(1.04) rotate(1.5deg);filter:brightness(1.08)}
100%{transform:translateY(-4px) scale(1.06) rotate(0);filter:brightness(1.05)}}
@keyframes logoMelayang{0%,100%{transform:translateY(-4px) scale(1.06)}50%{transform:translateY(-8px) scale(1.07) rotate(.6deg)}}
@media(prefers-reduced-motion:reduce){#sb .brand img,#sb .brand:hover img{animation:none!important}}
/* ---------- Latar beranda: simpel, lembut, modern (menggantikan motif gelombang) ---------- */
.main>.bhome{background:
radial-gradient(640px 440px at 100% 2%,#d9e3ff8c,transparent 70%),
radial-gradient(560px 400px at 0% 38%,#ffe8b873,transparent 70%),
radial-gradient(620px 420px at 100% 74%,#e0e8ff80,transparent 70%),
radial-gradient(circle,#12152b14 1px,transparent 1.5px) 0 0/30px 30px,
var(--paper)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .main>.bhome{background-color:var(--paper)}}
/* ---------- Pilihan tampilan Desktop / Seluler ---------- */
.vw{display:flex;flex:none;gap:2px;padding:3px;border:1px solid var(--ln);border-radius:99px;background:#fff}
.vw button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:99px;background:none;color:var(--mut);cursor:pointer;transition:background .2s,color .2s}
.vw button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vw button:hover{color:var(--ink)}
.vw button[aria-pressed=true]{background:var(--navy);color:#fff}
.vw button:focus-visible{outline:2px solid #1f3e9c;outline-offset:1px}
html.in-frame .vw{display:none}
@media(max-width:860px){.vw button{width:30px;height:30px}.vw button svg{width:16px;height:16px}}
/* bingkai ponsel (layar lebar + tampilan seluler) */
html.tm-frame body>*:not(.tm-wrap){display:none!important}
html.tm-frame body{background:#e9e7df}
.tm-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem;min-height:100vh;padding:1.2rem 1rem 2rem}
.tm-bar{display:flex;align-items:center;gap:1rem;color:var(--mut);font:500 .9rem var(--sans)}
.tm-phone{width:410px;max-width:100%;height:min(860px,calc(100vh - 110px));padding:10px;border-radius:46px;background:#10142b;box-shadow:0 40px 80px -30px #12152b99}
.tm-phone iframe{display:block;width:100%;height:100%;border:0;border-radius:36px;background:#fff}
/* ---------- Peringatan logout otomatis (tidak aktif) ---------- */
.idm{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:1rem;background:#080c22a6;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:idmIn .25s ease both}
.idm-c{width:min(380px,100%);padding:2rem 1.6rem 1.6rem;border-radius:28px;background:#fff;color:var(--ink);text-align:center;box-shadow:0 40px 80px -30px #000a}
.idm-i{display:grid;place-items:center;width:56px;height:56px;margin:0 auto .8rem;border-radius:50%;background:#fdf1d6;font-size:1.6rem}
.idm-c h2{margin:0 0 .4rem;font:400 2rem/1.1 var(--serif)}
.idm-c p{margin:0;color:var(--mut);font-size:.95rem;line-height:1.5}
.idm-n{margin:.9rem 0 1.3rem;color:var(--mut);font-size:.95rem}
.idm-n b{display:block;font:400 3.4rem/1 var(--serif);color:var(--navy)}
.idm-b{display:flex;flex-direction:column;gap:.5rem}
.idm-b button{height:46px;border-radius:99px;border:1px solid var(--ln);background:#fff;color:var(--ink);font:600 .95rem var(--sans);cursor:pointer;transition:.2s}
.idm-b .idm-y{background:var(--navy);border-color:var(--navy);color:#fff}
.idm-b button:hover{transform:translateY(-2px)}
@keyframes idmIn{from{opacity:0}to{opacity:1}}
/* ---------- Logo gereja di atas "Selamat datang di website" (rata kiri dengan teks) ---------- */
.bh-in>.bh-logo{display:block;width:96px;height:96px;max-width:96px;margin:0 0 1.5rem;border-radius:20px;object-fit:cover;box-shadow:0 14px 28px -14px #000c;animation:logoHero .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes logoHero{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:860px){.bh-in>.bh-logo{width:80px;height:80px;max-width:80px;border-radius:17px;margin-bottom:1.2rem}}
@media(prefers-reduced-motion:reduce){.bh-in>.bh-logo{animation:none}}
/* ---------- Pop-up Renungan: teks rata kiri di kiri, foto di kanan (mengikuti rasio foto) ---------- */
dialog#rd{width:max(50vw,min(92vw,860px))}
#rf{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;column-gap:0;align-content:start;padding:1.6rem 1.8rem}
#rf .rd-h{grid-column:1;grid-row:1}
#rf .rd-h h3{font:400 1.9rem/1.15 var(--serif);color:var(--ink)}
#rf .rd-b{display:contents}
#rf .rd-b>p{grid-column:1;grid-row:2;margin:0 0 1rem;text-align:left}
#rf .rd-l{grid-column:1;grid-row:3;align-self:start;justify-self:start}
#rf .pfotos{grid-column:2;grid-row:1/4;display:flex;flex-direction:column;gap:.7rem;align-self:start;width:min(340px,36vw);margin:0 0 0 1.8rem}
#rf .pfotos:has(img:only-child){position:sticky;top:0}
#rf .pfotos img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:14px;box-shadow:0 12px 28px -16px #12152b80}
@media(max-width:860px){
dialog#rd{width:94vw}
#rf{grid-template-columns:1fr;grid-template-rows:auto}
#rf .rd-h,#rf .rd-b>p,#rf .pfotos,#rf .rd-l{grid-column:1}
#rf .rd-h{grid-row:1}#rf .rd-b>p{grid-row:2}#rf .pfotos{grid-row:3;width:100%;margin:.2rem 0 1rem;position:static}#rf .rd-l{grid-row:4}
}
/* ---------- Kontribusi jemaat: Renungan & Video ---------- */
.kb-ok,.kb-err{margin:0 0 1.2rem;padding:.8rem 1.1rem;border-radius:14px;font-size:.95rem}
.kb-ok{background:#e4f5ea;color:#166a3a}.kb-err{background:#fde8e8;color:#a01818}
.kb-card{margin:0 0 2rem;padding:1.5rem;background:#fff;border:1px solid var(--ln);border-radius:24px}
.kb-card h2,.kb-h{margin:0 0 1rem;font:400 1.7rem/1.1 var(--serif)}
.kb-h{margin:2rem 0 1rem}
.kb-f{display:grid;gap:1rem}
.kb-f label{display:grid;gap:.35rem;font-size:.85rem;font-weight:600;color:var(--mut)}
.kb-f input:not([type=checkbox]):not([type=file]),.kb-f textarea,.kb-vf input[name=judul],.kb-vf input[name=url]{width:100%;padding:.7rem .9rem;border:1px solid var(--ln);border-radius:14px;background:#fff;color:var(--ink);font:500 .96rem/1.5 var(--sans);outline:0}
.kb-f textarea{resize:vertical;text-align:left}
.kb-f input:focus,.kb-f textarea:focus,.kb-vf input:focus{border-color:#1f3e9c;box-shadow:0 0 0 4px #1f3e9c1f}
.kb-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.kb-b{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.kb-b .btn{border:1px solid var(--ln);text-decoration:none;color:var(--ink);cursor:pointer}.kb-b .bh-p{color:var(--ink)}
.kb-del{padding:.5rem 1.05rem;border:1px solid #f1c3c3;border-radius:99px;background:#fff;color:#b32020;font:600 .88rem var(--sans);cursor:pointer}
.kb-del:hover{background:#fde8e8}
.kb-ph>span{display:block;margin-bottom:.4rem;font-size:.85rem;font-weight:600;color:var(--mut)}
.kb-ph>div{display:flex;flex-wrap:wrap;gap:.7rem}
.kb-ph label{display:grid;gap:.3rem;justify-items:center;font-weight:500}.kb-ph img{width:96px;height:auto;max-height:120px;object-fit:contain;border-radius:10px;border:1px solid var(--ln)}
.kb-ph i{font-style:normal;font-size:.8rem}
.arp-a form{margin:0}
.kb-v{align-items:flex-start}.kb-v>img{flex:none;width:160px;aspect-ratio:16/9;object-fit:cover;border-radius:14px}
.kb-vf{flex:1;min-width:0;display:grid;gap:.6rem}
.kb-ak{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--mut)}
@media(max-width:640px){.kb-2{grid-template-columns:1fr}.kb-v{flex-direction:column}.kb-v>img{width:100%}}
/* ---------- Jadwal & foto ibadah (kontribusi) ---------- */
details.kb-d{border:1px solid var(--ln);border-radius:22px;background:#fff;overflow:hidden}
details.kb-d summary{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.4rem 1rem;padding:1.1rem 1.3rem;cursor:pointer;list-style:none}
details.kb-d summary::-webkit-details-marker{display:none}
details.kb-d summary b{font:400 1.4rem/1.2 var(--serif)}
details.kb-d summary span{color:var(--mut);font-size:.88rem}
details.kb-d[open] summary{border-bottom:1px solid var(--ln);background:#faf9f5}
details.kb-d .kb-f{padding:1.3rem}
.kb-log{color:var(--mut);font-size:.8rem}
/* ---------- Foto tampil ukuran/rasio asli (tidak terpotong) ---------- */
/* 1) Foto hero halaman (Jadwal Ibadah & halaman lain) */
.pfoto{width:fit-content;max-width:100%;aspect-ratio:auto;justify-self:end;align-self:center;background:#ffffff26}
.pfoto img{display:block;width:auto;height:auto;max-width:min(440px,40vw);max-height:min(420px,62vh);object-fit:contain}
@media(max-width:860px){.pfoto{justify-self:start}.pfoto img{max-width:min(420px,100%);max-height:360px}}
/* 2) Sampul kartu Kegiatan Pelayanan */
.kimg:not(:empty){aspect-ratio:auto;background:#eef1fb;display:grid;place-items:center}
.kimg:empty{aspect-ratio:16/10}
.kimg:not(:empty) img{width:100%;height:auto;max-height:480px;object-fit:contain}
/* 3) Foto di dalam kartu Renungan & Kegiatan (foto pertama besar, sisanya mengikuti rasio asli) */
.rn .isi .pfotos,.kg .isi .pfotos{align-items:start}
.rn .isi .pfotos img,.kg .isi .pfotos img{aspect-ratio:auto;height:auto;max-height:none;object-fit:contain;background:#eef1fb}
.rn .isi .pfotos img:first-child,.kg .isi .pfotos img:first-child{grid-column:1/-1;width:auto;max-width:100%;max-height:560px;justify-self:start}
/* 4) Galeri halaman */
.gal{align-items:start}
.gal img{aspect-ratio:auto;height:auto;object-fit:contain;background:#eef1fb}
/* ---------- Foto Gembala Sidang: ukuran/rasio asli ---------- */
.gpair{align-items:start}
.gcard img{aspect-ratio:auto;height:auto;object-fit:contain;object-position:center}
/* ---------- Kalimat "Selamat datang, ..." miring (italic) ---------- */
.login .yr,.login .yr b{font-style:italic}
/* ---------- Surat keluar ---------- */
.sk-no{margin:0 0 1rem;padding:.7rem 1rem;border-radius:14px;background:#eef1fb;color:var(--navy)}.sk-no b{font:700 1.05rem var(--sans)}
.sk-fs{margin:0;padding:1rem;border:1px solid var(--ln);border-radius:16px}.sk-fs legend{padding:0 .5rem;font-weight:700;color:var(--mut)}
.sk-fs .kb-2{margin-bottom:.8rem}
.sk-r .arp-m span{font-weight:700}
.sk-r .arp-a{flex-wrap:wrap;justify-content:flex-end}
/* ---------- Menu samping di ponsel: laci geser + latar gelap (tidak lagi tertimpa bilah atas) ---------- */
#sbk,#sbx{display:none}
@media(max-width:860px){
#sb{display:flex!important;position:fixed;top:0;left:0;bottom:0;width:min(86vw,320px);height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:1000;padding-top:3.6rem;
transform:translateX(-105%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s,box-shadow .3s}
#sb.open{transform:none;visibility:visible;box-shadow:14px 0 44px #000a;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s,box-shadow .3s}
#sbk{display:block;position:fixed;inset:0;z-index:999;background:#050a1cc7;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s}
#sbk.on{opacity:1;pointer-events:auto}
#sbx{display:grid;place-items:center;position:absolute;top:.8rem;right:.8rem;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#ffffff1a;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}
#sbx:active{background:#ffffff33}
html.sb-open,html.sb-open body{overflow:hidden}
#sb nav a{padding:.7rem .8rem;font-size:1.02rem}
#sb .sub a{padding:.65rem .7rem .65rem 1.9rem;font-size:.95rem}
#sb .car{width:36px;height:36px}
#tg{min-width:44px;min-height:44px}
}
@media(prefers-reduced-motion:reduce){#sb,#sbk{transition:none!important}}
/* ---------- Foto hero halaman: lurus, tidak miring, sudut rata ---------- */
.pfoto{transform:none!important;rotate:none!important;margin:0;padding:0;border-radius:20px;border:4px solid #ffffffd9;box-shadow:0 14px 34px -12px #0007;overflow:hidden}
.pfoto img{border-radius:0;transform:none}
.phin{align-items:center}
@media(max-width:860px){.pfoto{justify-self:center}}
/* ---------- Pita ucapan ulang tahun di beranda (teks berjalan kanan ke kiri) ---------- */
.ultah{display:flex;align-items:stretch;max-width:1120px;width:calc(100% - 2rem);margin:1.5rem auto 0;background:#fff;border:1px solid #f1dfae;border-radius:18px;box-shadow:0 10px 30px -18px #14286b66;overflow:hidden;position:relative;z-index:1}
.ultah-l{display:flex;align-items:center;gap:.5rem;flex:none;padding:.75rem 1.1rem;background:linear-gradient(135deg,#f6b73c,#e08a1e);color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.02em}
.ultah-l svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ultah-w{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ultah-t{display:inline-block;white-space:nowrap;padding:.8rem 0 .8rem 100%;font-size:1.02rem;color:#14286b;animation:ultah-geser var(--d,24s) linear infinite;will-change:transform}
.ultah-t b{color:#b5700d}
.ultah:hover .ultah-t{animation-play-state:paused}
@keyframes ultah-geser{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.ultah-t{animation:none;white-space:normal;padding:.8rem 1rem}}
@media(max-width:560px){.ultah-l span{display:none}.ultah-l{padding:.7rem .85rem}.ultah-t{font-size:.95rem}}
/* Pita ulang tahun dipindah ke atas kartu menu (Visi & Misi dst.): menumpang di tepi bawah hero, kartu menu mengikuti di bawahnya */
.ultah{margin:-4.6rem auto 0}
.ultah+.bh-qk{margin-top:.8rem}
@media(max-width:860px){.ultah{margin-top:-4rem}}
/* Teks berjalan digerakkan lewat JavaScript (jarak dihitung dari lebar sebenarnya); CSS di atas jadi cadangan */
.ultah.js .ultah-t{animation:none!important;padding-left:0;flex:none;will-change:transform}
/* Pita ulang tahun tidak boleh tertutup kartu menu: selisih margin berlaku untuk semua saudara berikutnya (ada