:root{
    --ivory: #FAF7F0;
    --ivory-rgb: 250,247,240;
    --ivory-deep: #F1E9D8;
    --ivory-deep-rgb: 241,233,216;
    --ink: #1C1A17;
    --ink-soft: #423E37;
    --ink-rgb: 28,26,23;
    --gold: #B8935A;
    --gold-deep: #8A6D3F;
    --gold-pale: #D8BE93;
    --gold-rgb: 184,147,90;
    --line: rgba(var(--ink-rgb),0.09);
    --font-heading: 'Fraunces', serif;
    --font-body: 'Inter', sans-serif;
    --font-accent: 'Cormorant Garamond', serif;
    --max: 1680px;
    --r-lg: 32px;
    --r-md: 22px;
    --r-sm: 14px;
    --shadow-soft: 0 30px 70px -35px rgba(var(--ink-rgb),0.28);
    --shadow-tight: 0 14px 34px -18px rgba(var(--ink-rgb),0.22);
    --ease: cubic-bezier(.16,1,.3,1);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ivory);
    color:var(--ink);
    font-family:var(--font-body);
    font-weight:400;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{ font-family:var(--font-heading); font-weight:500; letter-spacing:-0.01em; }
  a{ color:inherit; text-decoration:none; }
  img{max-width:100%; display:block;}
  .wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }
  .eyebrow{
    font-family:var(--font-accent);
    font-style:italic;
    font-size:1.15rem;
    color:var(--gold-deep);
    letter-spacing:0.02em;
    display:flex; align-items:center; gap:12px;
    margin-bottom:14px;
  }
  .eyebrow::before{ content:''; width:28px; height:1px; background:var(--gold); display:inline-block; }

  /* ---------- Header ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(var(--ivory-deep-rgb),0.82);
    backdrop-filter: blur(14px);
    border-bottom:1px solid transparent;
    transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  }
  header.scrolled{ border-bottom-color:var(--line); box-shadow:0 12px 30px -22px rgba(var(--ink-rgb),0.35); }
  .nav{
    max-width:var(--max); margin:0 auto; padding:18px 32px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand-mark{ width:46px; height:46px; transition:transform .5s var(--ease); }
  .brand-mark-img{ border-radius:50%; object-fit:cover; }
  .brand:hover .brand-mark{ transform:rotate(8deg); }
  .brand-text{ font-family:var(--font-heading); font-size:1.22rem; font-weight:600; line-height:1.15; }
  .brand-text small{ display:block; font-family:var(--font-body); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; margin-top:2px;}
  nav.links{ display:flex; gap:36px; }
  nav.links a{
    font-size:1rem; font-weight:600; letter-spacing:0.03em; color:var(--ink-soft);
    position:relative; padding-bottom:4px; transition:color .3s var(--ease);
  }
  nav.links a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold-deep);
    transition:width .35s var(--ease);
  }
  nav.links a:hover::after{ width:100%; }
  nav.links a:hover{ color:var(--ink); }
  .burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; }
  .burger span{ width:24px; height:1.5px; background:var(--ink); display:block; transition:transform .3s var(--ease), opacity .3s var(--ease); }
  .burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .mobile-menu{
    display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:var(--ivory);
    z-index:99; padding:110px 36px 40px; flex-direction:column; gap:26px;
  }
  .mobile-menu.open{ display:flex; }
  .mobile-menu a{
    font-family:var(--font-heading); font-size:1.7rem; opacity:0; transform:translateY(14px);
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .mobile-menu.open a{ opacity:1; transform:translateY(0); }
  .mobile-menu.open a:nth-child(1){ transition-delay:.06s; }
  .mobile-menu.open a:nth-child(2){ transition-delay:.11s; }
  .mobile-menu.open a:nth-child(3){ transition-delay:.16s; }
  .mobile-menu.open a:nth-child(4){ transition-delay:.21s; }
  .mobile-menu.open a:nth-child(5){ transition-delay:.26s; }
  .mobile-menu.open a:nth-child(6){ transition-delay:.31s; }

  /* ---------- Hero & Slideshow ---------- */
  .hero{
    position:relative; min-height:100vh; display:flex; align-items:center;
    padding:140px 0 90px;
    background:var(--ivory);
    overflow:hidden;
  }
  .hero-slides{ position:absolute; inset:0; z-index:0; }
  .hero-slide{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:0; transform:scale(1.08);
    transition:opacity 1.8s var(--ease);
  }
  .hero-slide video{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .hero-slide.active{
    opacity:1;
    animation:kenburns 9s var(--ease) forwards;
  }
  @keyframes kenburns{
    from{ transform:scale(1.08); }
    to{ transform:scale(1); }
  }
  .hero-overlay{
    position:absolute; inset:0; z-index:1;
    background: radial-gradient(ellipse 60% 50% at 82% 18%, rgba(var(--gold-rgb),0.16), transparent 60%);
  }
  .hero.has-photo .hero-overlay{
    background:
      radial-gradient(ellipse 55% 50% at 80% 20%, rgba(var(--gold-rgb),0.10), transparent 60%),
      linear-gradient(100deg, rgba(var(--ivory-rgb),0.95) 0%, rgba(var(--ivory-rgb),0.86) 40%, rgba(var(--ivory-rgb),0.42) 100%);
  }
  .hero-inner{ position:relative; z-index:3; max-width:640px; }
  .hero h1{
    font-size:clamp(2.6rem, 5.4vw, 4.4rem);
    line-height:1.06;
    margin-bottom:22px;
  }
  .hero h1 em{ font-style:italic; color:var(--gold-deep); }
  .hero-verse{
    font-family:var(--font-accent); font-style:italic;
    font-size:1.3rem; color:var(--ink-soft); max-width:520px;
    border-left:2px solid var(--gold); padding-left:18px; margin:26px 0 36px;
  }
  .hero-verse span{ display:block; font-family:var(--font-body); font-style:normal; font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-deep); margin-top:8px; }
  .hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 30px; font-size:0.85rem; letter-spacing:0.03em; font-weight:500;
    transition: all .35s var(--ease); border:1px solid var(--ink); border-radius:999px;
  }
  .btn-solid{ background:var(--ink); color:var(--ivory); }
  .btn-solid:hover{ background:var(--gold-deep); border-color:var(--gold-deep); transform:translateY(-3px); box-shadow:var(--shadow-tight); }
  .btn-ghost{ color:var(--ink); }
  .btn-ghost:hover{ background:var(--ink); color:var(--ivory); transform:translateY(-3px); box-shadow:var(--shadow-tight); }
  .btn-sm{ padding:9px 20px; font-size:0.76rem; }

  .hero-dots{ position:absolute; left:32px; bottom:40px; z-index:3; display:flex; gap:9px; }
  .hero-dots button{
    width:8px; height:8px; border-radius:50%; border:1px solid var(--gold-deep); background:transparent;
    cursor:pointer; padding:0; transition:all .4s var(--ease);
  }
  .hero-dots button.active{ background:var(--gold-deep); width:22px; border-radius:5px; }

  .scroll-cue{
    position:absolute; bottom:40px; right:32px; z-index:3; display:flex; align-items:center; gap:10px;
    font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
  }
  .scroll-cue .line{ width:1px; height:36px; background:var(--gold-deep); animation:pulse 2.4s ease infinite; }
  @keyframes pulse{ 0%,100%{opacity:0.3;} 50%{opacity:1;} }

  /* ---------- Section shell ---------- */
  section{ padding:120px 0; position:relative; }
  .divider{
    display:flex; align-items:center; justify-content:center; gap:14px;
    color:var(--gold-deep); margin-bottom:8px;
  }
  .divider .diamond{ width:7px; height:7px; background:var(--gold); transform:rotate(45deg); border-radius:2px; }

  .wave-divider{ position:absolute; left:0; right:0; width:100%; overflow:hidden; line-height:0; z-index:1; pointer-events:none; }
  .wave-divider svg{ display:block; width:100%; height:70px; }
  .wave-top{ top:-1px; transform:scaleY(-1); }
  .wave-bottom{ bottom:-1px; }

  /* ---------- About ---------- */
  .about{ background:var(--ivory-deep); position:relative; overflow:hidden; }
  .about .wrap{ position:relative; z-index:1; }
  .gunungan{
    position:absolute; top:0; height:100%; width:220px; max-width:20vw;
    pointer-events:none; z-index:0; opacity:0.85;
    background-image:url('batik-parang.png');
    background-repeat:repeat;
    background-size:220px 239px;
    background-position:top center;
  }
  .gunungan-left{
    left:0;
    -webkit-mask-image:linear-gradient(to right, black 0%, transparent 100%);
    mask-image:linear-gradient(to right, black 0%, transparent 100%);
  }
  .gunungan-right{
    right:0;
    -webkit-mask-image:linear-gradient(to left, black 0%, transparent 100%);
    mask-image:linear-gradient(to left, black 0%, transparent 100%);
  }
  @media (max-width:1100px){ .gunungan{ display:none; } }
  .about-grid{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    max-width:1240px; margin:0 auto;
  }
  .about .eyebrow{ justify-content:center; }
  .about h2{ font-size:clamp(2.1rem,3.6vw,3rem); font-weight:700; margin-bottom:22px; }
  .about p{
    color:var(--ink-soft); margin:0 auto 16px; max-width:none;
    text-transform:uppercase; font-weight:700; letter-spacing:0.03em; font-size:0.95rem;
  }
  .stat-row{ display:flex; justify-content:center; gap:44px; margin-top:40px; }
  .stat{ text-align:center; }
  .stat b{ font-family:var(--font-heading); font-size:2rem; color:var(--gold-deep); display:block; }
  .stat span{ font-size:0.78rem; color:var(--ink-soft); letter-spacing:0.02em; }

  /* ---------- Jadwal & Lokasi ---------- */
  .jadwal .wrap{ text-align:center; margin-bottom:56px; }
  .jadwal h2{ font-size:clamp(1.9rem,3vw,2.6rem); }
  .schedule-map{ display:grid; grid-template-columns:0.78fr 1.4fr; gap:28px; }
  .schedule-col{
    padding:52px; background:var(--ivory-deep); border-radius:var(--r-lg);
  }
  .service-time{
    display:flex; align-items:center; gap:22px; padding:26px 0; border-bottom:1px solid var(--line);
  }
  .service-time:first-of-type{ padding-top:4px; }
  .service-time .t{ font-family:var(--font-heading); font-weight:600; font-size:2.7rem; line-height:1; color:var(--gold-deep); min-width:110px; flex-shrink:0; }
  .service-time .d strong{ display:block; font-size:1.2rem; font-weight:700; margin-bottom:4px; }
  .service-time .d span{ font-size:0.9rem; color:var(--ink-soft); }
  .addr-block{ margin-top:30px; padding-top:28px; border-top:1px solid var(--line); }
  .addr-block .eyebrow{ margin-bottom:10px; }
  .addr-block p{ color:var(--ink-soft); font-size:0.95rem; max-width:38ch; }
  .map-frame{
    min-height:300px; background:var(--ivory-deep); border-radius:var(--r-lg); overflow:hidden;
    box-shadow:var(--shadow-soft);
  }
  .map-frame iframe{ width:100%; height:100%; min-height:300px; border:0; filter:grayscale(0.35) contrast(1.05); }

  /* ---------- Galeri Kegiatan (carousel, homepage) ---------- */
  .galeri-strip{ padding:90px 0; }
  .galeri-strip .wrap{ text-align:center; }
  .galeri-strip h2{ font-size:clamp(1.9rem,3vw,2.6rem); margin-bottom:44px; }
  .galeri-strip-carousel{ position:relative; max-width:1360px; margin:0 auto; }
  .galeri-strip-track{
    display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -ms-overflow-style:none; padding:6px 2px 10px;
  }
  .galeri-strip-track::-webkit-scrollbar{ display:none; }
  .galeri-strip-slide{
    flex:0 0 calc(33.333% - 12px); aspect-ratio:16/9; scroll-snap-align:start;
    display:block; overflow:hidden; border-radius:var(--r-lg); box-shadow:var(--shadow-soft);
    transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  }
  .galeri-strip-slide:hover{ transform:translateY(-6px); }
  .galeri-strip-slide img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
  .galeri-strip-slide:hover img{ transform:scale(1.04); }
  .galeri-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--ivory);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:var(--shadow-tight); color:var(--ink); transition:background .3s var(--ease), transform .3s var(--ease);
  }
  .galeri-nav:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
  .galeri-nav svg{ width:18px; height:18px; }
  .galeri-nav.prev{ left:-66px; }
  .galeri-nav.next{ right:-66px; }
  @media (max-width:1300px){
    .galeri-nav.prev{ left:8px; }
    .galeri-nav.next{ right:8px; }
  }
  @media (max-width:900px){
    .galeri-strip-slide{ flex:0 0 calc(70% - 12px); }
  }
  @media (max-width:700px){
    .galeri-strip-slide{ flex:0 0 calc(88% - 12px); }
    .galeri-nav{ width:38px; height:38px; }
  }

  /* ---------- Pelayanan ---------- */
  .pelayanan .wrap > .divider, .pelayanan .wrap > h2, .pelayanan .wrap > p.lead{ text-align:center; }
  .pelayanan h2{ font-size:clamp(1.9rem,3vw,2.6rem); margin:0 auto 14px; }
  .pelayanan p.lead{ color:var(--ink-soft); max-width:52ch; margin:0 auto 60px; }
  .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  .card{
    background:var(--ivory-deep); padding:46px 38px; border-radius:var(--r-lg);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
  }
  .card:hover{ background:var(--ivory); transform:translateY(-10px); box-shadow:var(--shadow-soft); }
  .card .num{ font-family:var(--font-accent); font-style:italic; color:var(--gold-deep); font-size:1.1rem; margin-bottom:20px; }
  .card h3{ font-size:1.25rem; margin-bottom:12px; }
  .card p{ color:var(--ink-soft); font-size:0.92rem; }

  /* ---------- Galeri ---------- */
  .galeri .wrap > .divider, .galeri .wrap > .eyebrow, .galeri .wrap > h2, .galeri .wrap > p.lead{ text-align:center; }
  .galeri .eyebrow{ justify-content:center; }
  .galeri h2{ font-size:clamp(1.9rem,3vw,2.6rem); margin:0 auto 14px; }
  .galeri p.lead{ color:var(--ink-soft); max-width:52ch; margin:0 auto 50px; }
  .galeri-album-carousel{ position:relative; }
  .galeri-grid{
    display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -ms-overflow-style:none; padding:6px 2px 10px;
  }
  .galeri-grid::-webkit-scrollbar{ display:none; }
  .galeri-item{
    position:relative; flex:0 0 calc(25% - 15px); aspect-ratio:4/3; overflow:hidden; background:var(--ivory-deep);
    scroll-snap-align:start; transition:transform .5s var(--ease), box-shadow .5s var(--ease);
    border:none; padding:0; cursor:pointer; display:block; border-radius:var(--r-lg); box-shadow:var(--shadow-soft);
  }
  .galeri-item:hover, .galeri-item:focus-visible{ transform:translateY(-6px); }
  .galeri-item:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
  .galeri-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
  .galeri-item:hover img{ transform:scale(1.08); }
  .galeri-item .cap{
    position:absolute; left:0; right:0; bottom:0; padding:18px 16px 14px;
    background:linear-gradient(to top, rgba(var(--ink-rgb),0.78), transparent);
    color:#fff; font-size:0.8rem; opacity:0; transition:opacity .35s var(--ease); text-align:left;
  }
  .galeri-item:hover .cap{ opacity:1; }
  .galeri-empty{
    text-align:center; padding:54px 20px; border:1px dashed var(--line); border-radius:var(--r-md); color:var(--ink-soft); font-size:0.9rem;
  }
  @media (max-width:1300px){
    .galeri-album-carousel .galeri-nav.prev{ left:8px; }
    .galeri-album-carousel .galeri-nav.next{ right:8px; }
  }
  @media (max-width:900px){
    .galeri-item{ flex:0 0 calc(45% - 11px); }
  }
  @media (max-width:600px){
    .galeri-item{ flex:0 0 calc(70% - 11px); }
  }

  /* ---------- Galeri: lightbox modal ---------- */
  .galeri-modal{
    display:none; position:fixed; inset:0; z-index:210; background:rgba(var(--ink-rgb),0.94);
    align-items:center; justify-content:center; padding:70px 24px;
    opacity:0; transition:opacity .4s var(--ease);
  }
  .galeri-modal.open{ display:flex; }
  .galeri-modal.visible{ opacity:1; }
  .galeri-modal-inner{
    max-width:min(1000px, 92vw); max-height:82vh; text-align:center;
    transform:scale(0.96); transition:transform .4s var(--ease);
  }
  .galeri-modal.visible .galeri-modal-inner{ transform:scale(1); }
  .galeri-modal-inner img{
    max-width:100%; max-height:74vh; border-radius:var(--r-md); object-fit:contain; margin:0 auto;
    box-shadow:0 30px 80px -20px rgba(0,0,0,0.6);
  }
  .galeri-modal-cap{ color:rgba(var(--ivory-rgb),0.8); font-size:0.88rem; margin-top:16px; font-family:var(--font-accent); font-style:italic; font-size:1.05rem; }
  .galeri-modal-close{
    position:absolute; top:24px; right:24px; background:none; border:1px solid var(--gold-pale); color:var(--ivory);
    padding:8px 20px; font-size:0.8rem; letter-spacing:0.03em; cursor:pointer; border-radius:999px;
    transition:all .3s var(--ease);
  }
  .galeri-modal-close:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
  .galeri-modal-nav{
    position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.06);
    border:1px solid rgba(var(--ivory-rgb),0.25); color:#fff; width:48px; height:48px; border-radius:50%;
    font-size:1.6rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all .3s var(--ease);
  }
  .galeri-modal-nav:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
  .galeri-modal-prev{ left:24px; }
  .galeri-modal-next{ right:24px; }
  @media (max-width:700px){
    .galeri-modal{ padding:70px 16px; }
    .galeri-modal-nav{ width:40px; height:40px; font-size:1.3rem; }
    .galeri-modal-prev{ left:8px; }
    .galeri-modal-next{ right:8px; }
    .galeri-modal-close{ top:16px; right:16px; }
  }

  /* ---------- Warta Jemaat ---------- */
  .warta .wrap > .divider, .warta .wrap > .eyebrow, .warta .wrap > h2{ text-align:center; }
  .warta .eyebrow{ justify-content:center; }
  .warta h2{ font-size:clamp(1.9rem,3vw,2.6rem); margin:0 auto 50px; }
  .warta-layout{ display:grid; grid-template-columns:minmax(240px,300px) 1fr; gap:44px; align-items:start; }
  .warta-layout > *{ min-width:0; }
  .warta-date{ font-family:var(--font-accent); font-style:italic; color:var(--gold-deep); font-size:1.15rem; margin-bottom:10px; }
  .warta-info h3{ font-size:1.7rem; margin-bottom:14px; }
  .warta-info > p{ color:var(--ink-soft); margin-bottom:26px; max-width:38ch; }
  .warta-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }
  .warta-archive{ padding-top:28px; border-top:1px solid var(--line); }
  .warta-archive ul{ list-style:none; margin-top:14px; }
  .warta-archive li{ border-bottom:1px solid var(--line); }
  .warta-archive button{
    width:100%; text-align:left; background:none; border:none; padding:13px 0; cursor:pointer;
    font-family:var(--font-body); font-size:0.88rem; color:var(--ink-soft); display:flex; justify-content:space-between;
    transition:color .3s var(--ease), padding-left .3s var(--ease);
  }
  .warta-archive button:hover{ padding-left:6px; }
  .warta-archive button:hover, .warta-archive button.is-active{ color:var(--gold-deep); }
  .warta-archive button .wd{ color:var(--ink); font-weight:500; }

  .warta-frame{
    position:relative; width:100%;
  }
  .warta-frame-inner{
    position:relative; width:100%; max-width:100%;
  }
  .warta-pages{ position:relative; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:0; }
  .warta-pages canvas{ display:block; box-shadow:0 8px 30px -12px rgba(var(--ink-rgb),0.25); max-width:100%; height:auto; animation:wartaPageIn .35s var(--ease); }
  .warta-pages canvas:first-child{ border-radius:4px 0 0 4px; }
  .warta-pages canvas:last-child{ border-radius:0 4px 4px 0; }
  .warta-pages canvas:only-child{ border-radius:4px; }
  @keyframes wartaPageIn{ from{ opacity:0; transform:scale(0.98); } to{ opacity:1; transform:scale(1); } }
  .warta-loading{
    position:relative; min-height:320px; display:flex; align-items:center; justify-content:center;
    background:var(--ivory-deep); border-radius:4px; color:var(--ink-soft); font-size:0.85rem; text-align:center; padding:0 24px;
  }
  .warta-empty{ text-align:center; padding:60px 20px; border:1px dashed var(--line); border-radius:var(--r-md); color:var(--ink-soft); font-size:0.9rem; }

  /* ---------- Renungan Harian (teaser di beranda) ---------- */
  .renungan-card{
    display:grid; grid-template-columns:220px 1fr; gap:36px; align-items:center;
    background:var(--ivory-deep); border-radius:var(--r-lg); padding:36px; margin-bottom:56px;
  }
  .renungan-image{ border-radius:var(--r-md); overflow:hidden; aspect-ratio:1/1; }
  .renungan-image img{ width:100%; height:100%; object-fit:cover; display:block; }
  .renungan-body h3{ font-size:1.5rem; margin:2px 0 18px; }
  @media (max-width:720px){
    .renungan-card{ grid-template-columns:1fr; padding:24px; }
    .renungan-image{ aspect-ratio:16/9; }
  }

  /* ---------- Halaman Detail Renungan (renungan.php) ---------- */
  .renungan-detail-hero{ width:100%; aspect-ratio:21/9; border-radius:var(--r-lg); overflow:hidden; margin-bottom:32px; }
  .renungan-detail-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
  .renungan-meta{ color:var(--ink-soft); font-size:0.88rem; margin-bottom:10px; }
  .renungan-nats{
    font-family:var(--font-accent); font-style:italic; color:var(--ink-soft);
    font-size:1.1rem; border-left:2px solid var(--gold); padding-left:16px; margin:8px 0 18px;
  }
  .renungan-snippet{ color:var(--ink-soft); font-size:0.95rem; line-height:1.7; margin-bottom:20px; }
  .renungan-detail .renungan-nats{ font-size:1.15rem; margin-bottom:30px; }
  .renungan-detail .renungan-full p{ color:var(--ink); font-size:1.18rem; font-weight:500; line-height:1.85; margin-bottom:24px; letter-spacing:0.01em; }
  .renungan-source{ color:var(--ink-soft); font-size:0.8rem; margin-top:16px; }
  .renungan-source a{ color:var(--gold-deep); }
  @media (max-width:720px){ .renungan-detail-hero{ aspect-ratio:16/10; } }

  .warta-page-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    width:42px; height:42px; border-radius:50%; display:none; align-items:center; justify-content:center;
    background:rgba(var(--ink-rgb),0.55); color:var(--ivory); border:1px solid rgba(var(--ivory-rgb),0.3);
    font-size:1.3rem; cursor:pointer; transition:background .25s var(--ease), transform .25s var(--ease);
  }
  .warta-page-nav:hover{ background:var(--gold-deep); transform:translateY(-50%) scale(1.06); }
  .warta-page-prev{ left:6px; }
  .warta-page-next{ right:6px; }
  .warta-page-counter{
    position:absolute; left:50%; bottom:6px; transform:translateX(-50%); display:none;
    background:rgba(var(--ink-rgb),0.55); color:var(--ivory); font-size:0.72rem; letter-spacing:0.03em;
    padding:3px 12px; border-radius:999px; z-index:5;
  }

  .warta-modal{
    display:none; position:fixed; inset:0; z-index:200; background:rgba(var(--ink-rgb),0.92);
    padding:40px; align-items:center; justify-content:center;
    opacity:0; transition:opacity .4s var(--ease);
  }
  .warta-modal.open{ display:flex; }
  .warta-modal.visible{ opacity:1; }
  .warta-modal-inner{
    position:relative; width:min(1300px, calc(100vw - 48px)); height:88vh; background:var(--ivory); border-radius:var(--r-md);
    overflow:hidden; transform:scale(0.96); transition:transform .4s var(--ease);
    display:flex; flex-direction:column;
  }
  .warta-modal.visible .warta-modal-inner{ transform:scale(1); }
  .warta-modal-header{
    display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
    padding:22px 28px; border-bottom:1px solid var(--line); flex-shrink:0;
  }
  .warta-modal-header h3{ margin:2px 0 0; font-size:1.15rem; }
  .warta-modal-header .warta-date{ font-size:0.72rem; }
  .warta-modal-canvas-wrap{ flex:1; overflow-y:auto; overflow-x:hidden; display:flex; align-items:flex-start; justify-content:center; position:relative; }
  .warta-modal-canvas-wrap .warta-pages{ padding:24px; flex-direction:column; flex-wrap:nowrap; gap:24px; width:100%; align-items:center; }
  .warta-spread-row{ display:flex; align-items:stretch; justify-content:center; gap:0; width:100%; }
  .warta-page-canvas{ width:50%; max-width:50%; height:auto; display:block; border-radius:4px; }
  .warta-spread-row canvas:only-child{ width:100%; max-width:100%; }
  .warta-spread-row canvas:first-child{ border-radius:4px 0 0 4px; }
  .warta-spread-row canvas:last-child{ border-radius:0 4px 4px 0; }
  .warta-spread-row canvas:only-child{ border-radius:4px; }
  .warta-modal-canvas-wrap canvas{ box-shadow:0 8px 30px -12px rgba(var(--ink-rgb),0.35); }
  .warta-modal-close{
    position:absolute; top:-46px; right:0; background:none; border:1px solid var(--gold-pale); color:var(--ivory);
    padding:8px 20px; font-size:0.8rem; letter-spacing:0.03em; cursor:pointer; border-radius:999px;
    transition:all .3s var(--ease); z-index:6;
  }
  .warta-modal-close:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }

  @media (max-width:900px){
    .warta-layout{ grid-template-columns:1fr; gap:36px; }
    .warta-frame-inner{ width:100%; }
    .warta-modal{ padding:16px; }
    .warta-modal-inner{ height:82vh; min-width:0; width:100%; }
    .warta-modal-header{ flex-direction:column; align-items:stretch; padding:16px 18px; }
    .warta-page-nav{ width:36px; height:36px; font-size:1.1rem; }
  }

  /* Layar sempit (HP): 1 halaman per baris, bukan 2 berdampingan */
  @media (max-width:700px){
    .warta-spread-row{ flex-direction:column; }
    .warta-page-canvas{ width:100%; max-width:100%; }
    .warta-spread-row canvas:first-child{ border-radius:4px 4px 0 0; }
    .warta-spread-row canvas:last-child{ border-radius:0 0 4px 4px; }
    .warta-modal-canvas-wrap .warta-pages{ gap:16px; }
  }

  /* ---------- CTA strip ---------- */
  .cta-strip{
    position:relative; background:var(--ink); color:var(--ivory); padding:110px 0; text-align:center;
    background-size:cover; background-position:center; background-attachment:fixed;
  }
  .cta-strip .cta-overlay{
    position:absolute; inset:0; background:rgba(var(--ink-rgb),0.86); z-index:0;
  }
  .cta-strip .wrap{ position:relative; z-index:1; }
  .cta-strip h2{ color:var(--ivory); font-size:clamp(1.8rem,3.4vw,2.8rem); margin-bottom:18px; }
  .cta-strip p{ color:rgba(var(--ivory-rgb),0.7); max-width:50ch; margin:0 auto 36px; }
  .cta-strip .btn-solid{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
  .cta-strip .btn-solid:hover{ background:var(--gold-pale); border-color:var(--gold-pale); }

  /* ---------- Footer ---------- */
  footer{ padding:40px 0 20px; background:var(--ivory-deep); }
  .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px; padding-bottom:26px; border-bottom:1px solid var(--line); }
  .foot-grid.has-persembahan{ grid-template-columns:1.2fr 1fr 1fr 1fr; }
  .foot-grid > *:not(:first-child){ border-left:1px solid var(--line); padding-left:34px; }
  .foot-brand .brand-text{ font-size:1.15rem; font-weight:700; margin-bottom:8px; }
  .foot-brand p{ color:var(--ink-soft); font-size:0.86rem; font-weight:500; max-width:34ch; }
  .foot-col h4{ font-size:0.76rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:10px; font-weight:700; }
  .foot-col p, .foot-col a{ display:block; color:var(--ink-soft); font-size:0.88rem; font-weight:500; margin-bottom:6px; transition:color .3s var(--ease); }
  .foot-col a:hover{ color:var(--gold-deep); }
  .foot-qris-row{ display:flex; align-items:center; gap:14px; }
  .foot-qris-img{ width:92px; height:92px; object-fit:cover; flex-shrink:0; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--ivory); }
  .foot-qris-row p{ font-size:0.86rem; font-weight:500; margin-bottom:0; }
  .foot-social-icons{ display:flex; gap:10px; margin-bottom:4px; }
  .foot-social-icons a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:all .3s var(--ease); }
  .foot-social-icons a:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:var(--ivory); }
  .foot-bottom{ display:flex; justify-content:space-between; padding-top:16px; font-size:0.78rem; font-weight:500; color:var(--ink-soft); flex-wrap:wrap; gap:10px; }


  .wa-float{
    position:fixed; right:20px; bottom:20px; z-index:60;
    width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 34px -12px rgba(var(--ink-rgb),0.4);
    transition:transform .25s var(--ease);
  }
  .wa-float:hover{ transform:scale(1.08); }
  @media (max-width:640px){
    .wa-float{ right:14px; bottom:14px; width:50px; height:50px; }
  }

  .apk-float{ background:var(--ink); }
  .bell-float{ background:var(--gold); border:none; cursor:pointer; }
  .bell-float.bell-active{ background:var(--ink); }
  @media (max-width:640px){
    .bell-float{ bottom:78px !important; width:50px; height:50px; }
  }

  .reveal{ opacity:0; transform:translateY(32px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .reveal-delay-1.in{ transition-delay:.1s; }
  .reveal-delay-2.in{ transition-delay:.2s; }
  .reveal-delay-3.in{ transition-delay:.3s; }

  @media (max-width:900px){
    nav.links{ display:none; }
    .burger{ display:flex; }
    .schedule-map{ grid-template-columns:1fr; }
    .cards{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr; gap:32px; }
    .foot-grid > *:not(:first-child){ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:24px; }
    .hero{ padding-top:120px; }
    section{ padding:88px 0; }
    .scroll-cue{ display:none; }
    .cta-strip{ background-attachment:scroll; }
  }

  /* ---------- Section Gembala Sidang (beranda) ---------- */
  .pendeta-section{ background:var(--ink); overflow:hidden; }
  .pendeta-grid{
    display:grid; grid-template-columns:0.72fr 1fr; align-items:stretch;
    max-width:1680px; margin:0 auto; min-height:600px;
  }
  .pendeta-photos{
    position:relative; display:flex; align-items:stretch; justify-content:stretch;
    overflow:hidden; border-radius:28px;
  }
  .pendeta-photo-item{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:28px; background:rgba(255,255,255,0.08); }
  .pendeta-photo-item img{ width:100%; height:100%; object-fit:cover; display:block; }
  .pendeta-photo-empty{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.45); font-size:0.8rem; text-align:center; padding:20px;
  }
  .pendeta-info{
    padding:90px 64px 90px 56px; display:flex; flex-direction:column; justify-content:center;
  }
  .pendeta-kicker{
    font-size:1rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--gold-pale); margin-bottom:18px;
  }
  .pendeta-info h2{ color:var(--ivory); font-size:clamp(2.3rem,3.8vw,3.3rem); margin-bottom:22px; line-height:1.15; }
  .pendeta-info p{ color:rgba(var(--ivory-rgb),0.76); margin-bottom:16px; max-width:none; }
  .pendeta-social{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
  .pendeta-social a{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 18px; border:1px solid rgba(255,255,255,0.3); border-radius:999px;
    font-size:0.72rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--ivory);
    transition:background .3s var(--ease), border-color .3s var(--ease);
  }
  .pendeta-social a:hover{ background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.6); }
  .pendeta-social svg{ width:17px; height:17px; flex-shrink:0; }
  @media (max-width:900px){
    .pendeta-grid{ grid-template-columns:1fr; }
    .pendeta-photos{ min-height:340px; }
    .pendeta-info{ padding:56px 32px; }
  }


  /* ---------- Halaman Galeri: kategori & album ---------- */
  .galeri-kategori-section{ padding:20px 0 110px; }

  .galeri-tabs{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:48px; }
  .galeri-tab{
    display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body);
    padding:13px 26px; font-size:0.95rem; letter-spacing:0.01em; font-weight:700;
    border:1px solid var(--line); border-radius:999px; background:var(--ivory);
    color:var(--ink); cursor:pointer; transition:all .3s var(--ease);
  }
  .galeri-tab:hover{ border-color:var(--gold); color:var(--ink); }
  .galeri-tab.active{ background:var(--ink); border-color:var(--ink); color:var(--ivory); }

  .galeri-tabgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  .galeri-tabtile{
    position:relative; display:block; overflow:hidden;
    border-radius:var(--r-lg); background:var(--ivory-deep); box-shadow:var(--shadow-soft);
    padding:14px 14px 20px; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .galeri-tabtile:hover{ transform:translateY(-6px); box-shadow:0 34px 60px -30px rgba(var(--ink-rgb),0.32); }
  .galeri-tabtile-cover{ aspect-ratio:3/2; border-radius:var(--r-md); overflow:hidden; background:var(--ivory-deep); }
  .galeri-tabtile-cover img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
  .galeri-tabtile:hover .galeri-tabtile-cover img{ transform:scale(1.06); }
  .galeri-tabtile-empty{ display:flex; align-items:center; justify-content:center; height:100%; color:var(--ink-soft); font-size:0.78rem; text-align:center; padding:10px; }
  .galeri-tabtile-thumbs{ display:flex; gap:8px; margin-top:10px; }
  .galeri-tabtile-thumb{ width:31%; flex:0 0 auto; aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:var(--ivory-deep); }
  .galeri-tabtile-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .galeri-tabtile-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; padding:0 2px; }
  .galeri-tabtile-foot h3{ font-family:var(--font-heading); font-size:1.05rem; font-weight:600; color:var(--ink); margin:0; }
  .galeri-tabtile-count{ display:inline-flex; align-items:center; gap:5px; color:var(--ink-soft); font-size:0.82rem; font-weight:500; flex-shrink:0; }
  .galeri-tabtile-count svg{ width:16px; height:16px; }
  .galeri-tabtile.galeri-hidden{ display:none; }
  .galeri-loadmore-wrap{ text-align:center; margin-top:40px; }

  @media (max-width:900px){ .galeri-tabgrid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
  @media (max-width:560px){
    .galeri-tabgrid{ grid-template-columns:1fr; }
    .galeri-tabs{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  }

  .galeri-album-body{ padding:20px 0 110px; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  }