/* =========================================================
   Warta Jemaat GBKP Runggun Studio Alam
   Gaya tenang & hangat: biru langit & emas liturgis, krem lembut.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Mulish:wght@400;500;600;700&family=Cutive+Mono&display=swap');

:root{
  --biru:        #2B4C7E;
  --biru-tua:    #1A3157;
  --biru-muda:   #E8EEF6;
  --emas:        #C9A24A;
  --emas-muda:   #F1E4C4;
  --krem:        #FAF7F0;
  --arang:       #292520;
  --arang-muda:  #6A6357;
  --garis:       #E4DCC8;
  --putih:       #FFFFFF;

  --font-judul: 'Cormorant Garamond', Georgia, serif;
  --font-body:  'Mulish', -apple-system, sans-serif;
  --font-label: 'Cutive Mono', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:var(--font-body); color:var(--arang); background:var(--krem); line-height:1.7; }
img{ max-width:100%; display:block; }
a{ color:var(--biru); text-decoration:none; }
a:hover{ color:var(--emas); }
ul{ list-style:none; }
.w{ max-width:1080px; margin:0 auto; padding:0 26px; }

/* ---------- topbar ---------- */
.top{ background:var(--biru-tua); color:#C9D6E8; font-family:var(--font-label); font-size:.7rem; }
.top .w{ display:flex; justify-content:space-between; padding:8px 26px; }
.top a{ color:#C9D6E8; } .top a:hover{ color:#fff; }

/* ---------- header ---------- */
.kep{ background:var(--putih); border-bottom:1px solid var(--garis); position:sticky; top:0; z-index:40; }
.kep-d{ max-width:1080px; margin:0 auto; padding:16px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.mrk{ display:flex; align-items:center; gap:12px; }
.mrk .lambang{ width:50px; height:50px; border-radius:50%; background:var(--biru); display:flex; align-items:center; justify-content:center; border:3px solid var(--emas); flex-shrink:0; }
.mrk .lambang svg{ width:24px; height:24px; }
.mrk .t .j{ font-family:var(--font-judul); font-weight:700; font-size:1.28rem; color:var(--biru-tua); }
.mrk .t .s{ font-family:var(--font-label); font-size:.66rem; color:var(--arang-muda); }
.menu{ display:flex; gap:2px; flex-wrap:wrap; }
.menu a{ font-family:var(--font-label); font-size:.7rem; text-transform:uppercase; padding:9px 14px; color:var(--arang); border-bottom:3px solid transparent; }
.menu a:hover, .menu a.on{ border-color:var(--emas); color:var(--biru); text-decoration:none; }

/* ---------- hero ---------- */
.hero{ background:linear-gradient(160deg,var(--biru),var(--biru-tua)); color:#fff; padding:56px 0; }
.hero .w{ max-width:760px; text-align:center; }
.hero .eyebrow{ display:inline-flex; gap:8px; align-items:center; font-family:var(--font-label); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--emas-muda); margin-bottom:14px; }
.hero .eyebrow::before, .hero .eyebrow::after{ content:""; width:22px; height:1px; background:var(--emas-muda); }
.hero h1{ font-family:var(--font-judul); font-weight:700; font-size:clamp(2rem,4.2vw,2.8rem); line-height:1.2; }
.hero p{ margin-top:14px; color:#D6E0EE; font-size:1.02rem; }
.hero .ayat{ margin-top:20px; font-family:var(--font-judul); font-style:italic; font-size:1.1rem; color:var(--emas-muda); max-width:44ch; margin-left:auto; margin-right:auto; }

/* ---------- jadwal strip ---------- */
.strip{ background:var(--emas-muda); border-bottom:1px solid var(--garis); }
.strip .w{ display:grid; grid-template-columns:repeat(3,1fr); text-align:center; padding:22px 26px; gap:14px; }
.strip .item .lbl{ font-family:var(--font-label); font-size:.62rem; text-transform:uppercase; color:var(--arang-muda); }
.strip .item .val{ font-family:var(--font-judul); font-weight:700; font-size:1.3rem; color:var(--biru-tua); margin-top:2px; }

/* ---------- section umum ---------- */
.sect{ max-width:1080px; margin:0 auto; padding:58px 26px; }
.sect-heading{ text-align:center; max-width:640px; margin:0 auto 40px; }
.sect-heading .eyebrow{ font-family:var(--font-label); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--emas); margin-bottom:10px; }
.sect-heading h2{ font-family:var(--font-judul); font-weight:700; font-size:1.9rem; color:var(--biru-tua); }
.sect-heading p{ margin-top:10px; color:var(--arang-muda); font-size:.96rem; }
.sect-alt{ background:var(--biru-muda); }

/* ---------- tentang kami ---------- */
.tentang{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.tentang .foto{ border-radius:14px; overflow:hidden; }
.tentang .isi h3{ font-family:var(--font-judul); font-weight:700; font-size:1.4rem; color:var(--biru-tua); margin-bottom:12px; }
.tentang .isi p{ margin-bottom:14px; color:var(--arang-muda); }
.fakta-list{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; }
.fakta-item{ background:var(--putih); border:1px solid var(--garis); border-radius:10px; padding:14px 16px; }
.fakta-item .k{ font-family:var(--font-label); font-size:.6rem; text-transform:uppercase; color:var(--arang-muda); }
.fakta-item .v{ font-family:var(--font-judul); font-weight:700; font-size:1.05rem; color:var(--biru-tua); margin-top:2px; }

/* ---------- warta minggu ini ---------- */
.warta-kartu{ background:var(--putih); border:1px solid var(--garis); border-left:5px solid var(--emas); border-radius:10px; padding:24px 26px; margin-bottom:18px; }
.warta-kartu .tgl{ font-family:var(--font-label); font-size:.68rem; text-transform:uppercase; color:var(--biru); margin-bottom:8px; }
.warta-kartu h3{ font-family:var(--font-judul); font-weight:700; font-size:1.25rem; color:var(--biru-tua); margin-bottom:10px; }
.warta-kartu .ayat-bacaan{ font-style:italic; color:var(--arang-muda); margin-bottom:10px; font-size:.92rem; }
.warta-kartu p{ margin-bottom:10px; font-size:.94rem; }
.warta-kartu ul{ margin:10px 0 0 0; }
.warta-kartu ul li{ padding-left:16px; position:relative; margin-bottom:6px; font-size:.9rem; }
.warta-kartu ul li::before{ content:"\2726"; position:absolute; left:0; color:var(--emas); font-size:.7em; top:3px; }

/* ---------- pelayanan kategorial ---------- */
.grid-pelayanan{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.kartu-pel{ background:var(--putih); border:1px solid var(--garis); border-radius:14px; overflow:hidden; text-align:center; }
.kartu-pel .foto{ height:130px; overflow:hidden; }
.kartu-pel .foto img{ width:100%; height:100%; object-fit:cover; }
.kartu-pel .isi{ padding:18px 16px 22px; }
.kartu-pel h3{ font-family:var(--font-judul); font-weight:700; font-size:1.15rem; color:var(--biru-tua); margin-bottom:6px; }
.kartu-pel p{ font-size:.84rem; color:var(--arang-muda); }

/* ---------- galeri ---------- */
.galeri{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.galeri img{ border-radius:10px; height:150px; width:100%; object-fit:cover; }

/* ---------- pengurus ---------- */
.grid-pengurus{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.org-item{ text-align:center; }
.org-item img{ width:84px; height:84px; border-radius:50%; object-fit:cover; margin:0 auto 10px; border:3px solid var(--emas-muda); }
.org-item .n{ font-family:var(--font-judul); font-weight:700; font-size:.98rem; color:var(--biru-tua); }
.org-item .p{ font-family:var(--font-label); font-size:.66rem; color:var(--arang-muda); text-transform:uppercase; margin-top:2px; }

/* ---------- kontak / cta ---------- */
.cta{ background:linear-gradient(160deg,var(--biru-tua),var(--biru)); color:#fff; text-align:center; padding:52px 26px; }
.cta h2{ font-family:var(--font-judul); font-weight:700; font-size:1.7rem; }
.cta p{ margin-top:10px; color:#D6E0EE; max-width:50ch; margin-left:auto; margin-right:auto; }
.cta .btn-row{ margin-top:22px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.btn{ display:inline-block; background:var(--emas); color:var(--biru-tua); font-family:var(--font-label); font-size:.74rem; text-transform:uppercase; padding:11px 22px; border-radius:6px; font-weight:700; }
.btn:hover{ background:#DDB863; color:var(--biru-tua); }
.btn-o{ background:transparent; border:1.5px solid #fff; color:#fff; }
.btn-o:hover{ background:#fff; color:var(--biru-tua); }

/* ---------- footer ---------- */
.kaki{ background:var(--arang); color:#CFC9B9; padding:40px 0 18px; }
.kaki .w{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:30px; }
.kaki h4{ font-family:var(--font-label); font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color:var(--emas); margin-bottom:12px; }
.kaki p, .kaki li{ font-size:.82rem; color:#B7B1A0; margin-bottom:8px; }
.kaki a{ color:#B7B1A0; } .kaki a:hover{ color:#fff; }
.kb{ text-align:center; margin-top:26px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); font-family:var(--font-label); font-size:.66rem; color:#847E6E; }

/* ---------- halaman dalam (arsip dll) ---------- */
.subhero{ background:var(--biru-muda); padding:44px 0; text-align:center; }
.subhero h1{ font-family:var(--font-judul); font-weight:700; font-size:2rem; color:var(--biru-tua); }
.subhero p{ margin-top:10px; color:var(--arang-muda); }
.breadcrumb{ font-family:var(--font-label); font-size:.68rem; color:var(--arang-muda); margin-bottom:12px; }

@media (max-width:860px){
  .tentang{ grid-template-columns:1fr; }
  .grid-pelayanan{ grid-template-columns:1fr 1fr; }
  .grid-pengurus{ grid-template-columns:1fr 1fr; }
  .galeri{ grid-template-columns:1fr 1fr; }
  .strip .w{ grid-template-columns:1fr; }
  .fakta-list{ grid-template-columns:1fr; }
  .kaki .w{ grid-template-columns:1fr; }
}