/* =====================================================================
   GKKK Bandung — gaya situs publik
   Palet resmi (folder Logo / mockup Design Web): navy #303B83 sebagai
   warna utama, merah logo GKKK sebagai aksen, kertas putih.
   Huruf Avenir, sama dengan poster dan rancangan gereja.
   ===================================================================== */

/* --- Huruf Avenir ----------------------------------------------------
   Berkas asli TTF dari folder Avenir diubah ke WOFF2 (sekitar 33 KB per
   ketebalan) supaya cepat dimuat. Semuanya dilayani dari server sendiri,
   jadi situs tidak lagi memanggil Google Fonts.
   ------------------------------------------------------------------- */
@font-face {
  font-family: "Avenir";
  src: url("../fonts/avenir-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("../fonts/avenir-book.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("../fonts/avenir-regular.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("../fonts/avenir-heavy.woff2") format("woff2");
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("../fonts/avenir-black.woff2") format("woff2");
  font-weight: 800 900; font-style: normal; font-display: swap;
}

:root {
  /* --- palet merek --- */
  --navy:       #303B83;   /* warna utama, dari file Logo */
  --navy-deep:  #232B63;   /* blok gelap: hero, footer */
  --navy-soft:  #6E79BE;   /* aksen ringan */
  --red:        #C8102E;   /* merah logo / tombol utama */

  --paper:      #F4F5FA;
  --surface:    #FFFFFF;
  --ink:        #1B2340;
  --ink-2:      #5A6178;
  --line:       #DCE0EE;

  /* alias lama supaya aturan yang sudah ada ikut berubah warna */
  --jade:       var(--navy);
  --jade-deep:  var(--navy-deep);
  --cinnabar:   var(--red);
  --ochre:      var(--navy-soft);

  /* Satu keluarga huruf untuk seluruh situs. Nama --serif dipertahankan
     supaya aturan lama tidak perlu diubah satu per satu. */
  /* Avenir tidak punya huruf Mandarin, jadi setelahnya disusun huruf
     CJK bawaan Windows, macOS, dan Android supaya halaman 中文 tetap rapi. */
  --sans:  "Avenir", "Avenir Next", "Microsoft YaHei", "PingFang SC",
           "Hiragino Sans GB", "Noto Sans SC", system-ui, -apple-system,
           "Segoe UI", sans-serif;
  --serif: var(--sans);

  --wrap:  1120px;
  --gap:   clamp(1.5rem, 4vw, 3rem);
  --block: clamp(3.5rem, 8vw, 6.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--jade); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cinnabar); }

:focus-visible {
  outline: 2px solid var(--cinnabar);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 5.5vw, 3.9rem); }
h2 { font-size: clamp(1.4rem, 3.2vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.3rem); }
p  { margin: 0 0 1.1em; max-width: 68ch; }

/* Alamat email dan tautan panjang jangan sampai melebar keluar layar. */
body { overflow-wrap: break-word; }

/* Masthead menempel di atas, jadi tautan #jangkar perlu jarak aman
   supaya judul bagiannya tidak tertutup. */
[id] { scroll-margin-top: 96px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; z-index: 50;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --- Masthead + navigasi ---------------------------------------------- */
.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.masthead-inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 82px;
  flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; color: var(--navy); margin-right: auto;
}
.brand-mark { width: 12px; height: 34px; background: var(--red); flex: none; }
.brand-logo { width: 52px; height: 52px; object-fit: contain; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(.95rem, 1.5vw, 1.12rem);
  color: var(--navy); letter-spacing: -0.005em;
}
.brand-since { font-size: .78rem; color: var(--ink-2); }

.nav { display: flex; align-items: center; gap: clamp(.6rem, 1.8vw, 1.6rem); }

.nav-tunggal,
.nav-grup-tombol {
  font: inherit; font-size: 1rem; font-weight: 600;
  color: var(--navy); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .7rem .55rem; border-radius: 3px;
  white-space: nowrap;
}
.nav-panah {
  width: 9px; height: 9px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s;
}

.nav-grup { position: relative; }
.nav-grup:hover .nav-grup-tombol,
.nav-grup:focus-within .nav-grup-tombol,
.nav-tunggal:hover { background: var(--paper); }
.nav-grup.is-open .nav-panah,
.nav-grup:hover .nav-panah,
.nav-grup:focus-within .nav-panah { transform: translateY(2px) rotate(-135deg); }
.nav-grup.is-current > .nav-grup-tombol,
.nav-tunggal[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--red); }

.nav-submenu {
  list-style: none; margin: 0; padding: .4rem 0;
  position: absolute; top: 100%; left: 0; min-width: 15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(27, 35, 64, .14);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .13s, transform .13s, visibility .13s;
  z-index: 50;
}
.nav-grup:hover .nav-submenu,
.nav-grup:focus-within .nav-submenu,
.nav-grup.is-open .nav-submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-submenu a {
  display: block; padding: .6rem 1.1rem;
  color: var(--navy); text-decoration: none; font-size: .97rem;
}
.nav-submenu a:hover { background: var(--paper); color: var(--red); }

/* --- Pemilih bahasa -------------------------------------------------- */
.nav-bahasa {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 3px;
  overflow: hidden; margin-left: .2rem;
}
.nav-bahasa-pilihan {
  font: inherit; font-size: .82rem; font-weight: 600; line-height: 1;
  color: var(--ink-2); text-decoration: none;
  padding: .45rem .6rem; white-space: nowrap;
  border-left: 1px solid var(--line);
}
.nav-bahasa-pilihan:first-child { border-left: 0; }
.nav-bahasa-pilihan:hover { background: var(--paper); color: var(--navy); }
.nav-bahasa-pilihan.is-active { background: var(--navy); color: #FFFFFF; }

.nav-akun { display: inline-flex; color: var(--navy); margin-left: .3rem; }
.nav-akun:hover { color: var(--red); }

.nav-toggle {
  display: none; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--line); border-radius: 3px;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--navy);
  padding: .5rem .85rem; cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block; width: 16px; height: 2px; background: currentColor;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after  { top: 5px; }

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--line);
    padding-bottom: .6rem;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav-tunggal, .nav-grup-tombol {
    width: 100%; justify-content: space-between;
    padding: .85rem .2rem; border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .nav-submenu {
    position: static; min-width: 0; border: 0; box-shadow: none;
    background: var(--paper);
    opacity: 1; visibility: visible; transform: none;
    display: none; padding: .2rem 0;
  }
  .nav-grup.is-open .nav-submenu { display: block; }
  /* Di layar kecil submenu dibuka lewat tombol, bukan hover. */
  .nav-grup:hover .nav-submenu,
  .nav-grup:focus-within .nav-submenu { display: none; }
  .nav-grup.is-open:hover .nav-submenu,
  .nav-grup.is-open:focus-within .nav-submenu { display: block; }
  .nav-submenu a { padding: .65rem 1.2rem; }
  .nav-bahasa {
    align-self: flex-start;
    margin: .8rem 0 0 .2rem;
  }
  .nav-bahasa-pilihan { padding: .55rem .8rem; font-size: .9rem; }
  .nav-akun { margin: .8rem 0 0 .2rem; }
}

/* --- Hero ------------------------------------------------------------ */
.hero {
  background: var(--navy);
  background-image: linear-gradient(155deg, #3B4796 0%, #29327A 70%);
  color: #EEF0FA;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  position: relative; overflow: hidden;
}
/* Foto gedung gereja mengisi seluruh hero ... */
.hero-photo::before {
  content: ""; position: absolute; inset: 0;
  background: var(--hero-img) center/cover no-repeat;
}
/* ... lalu ditutup lapisan navy tipis supaya senada dengan palet. */
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(41, 50, 122, .55);
}
.hero .wrap { position: relative; z-index: 1; }

/* Panel navy pekat di balik tulisan. Foto hanya tampak di ruang kosong. */
.hero-photo .hero-teks {
  background: var(--navy-deep);
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  border-radius: 6px;
}
.hero h1 { color: #FFFFFF; margin-bottom: .35em; max-width: 16ch; }
.hero-lede {
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  color: #C2C8E8; max-width: 52ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

.btn {
  display: inline-block; font: inherit; font-size: .98rem;
  padding: .8rem 1.5rem; border: 1px solid transparent; border-radius: 2px;
  text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--cinnabar); color: #FFF; }
.btn-primary:hover { background: #A00D25; color: #FFF; }
.btn-ghost { border-color: rgba(255,255,255,.45); color: #EEF0FA; }
.btn-ghost:hover { border-color: #FFF; color: #FFF; background: rgba(255,255,255,.08); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--jade); color: #FFF; }

/* --- Bagian umum ----------------------------------------------------- */
.section { padding-block: var(--block); }
.section-alt { background: var(--surface); }

.section-head { margin-bottom: 2.5rem; max-width: 60ch; }
.section-head p { color: var(--ink-2); margin-bottom: 0; }

.lede { font-size: 1.15rem; color: var(--ink-2); max-width: 60ch; }

.split {
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}

/* --- Kartu jadwal ringkas (beranda) ---------------------------------- */
.times { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.time-row {
  background: var(--surface);
  display: grid; grid-template-columns: 5.5rem 1fr auto;
  gap: 1rem; align-items: baseline;
  padding: 1.1rem 1.3rem;
}
.time-hour {
  font-family: var(--serif); font-size: 1.45rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.time-name { font-weight: 600; }
.time-meta { display: block; font-size: .9rem; color: var(--ink-2); font-weight: 400; }
.tag-live {
  font-size: .74rem; letter-spacing: .04em;
  color: var(--cinnabar); border: 1px solid currentColor;
  padding: .12rem .45rem; border-radius: 2px; white-space: nowrap;
}

/* Cara mengikuti ibadah — mengikuti titik warna di poster gereja:
   hijau hadir di gereja, merah siaran YouTube, biru lewat Zoom. */
.tag-cara {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; letter-spacing: .04em;
  border: 1px solid currentColor; border-radius: 2px;
  padding: .12rem .45rem; white-space: nowrap;
}
.tag-cara::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: currentColor; flex: none;
}
.tag-onsite  { color: #2E7D32; }
.tag-youtube { color: #C8102E; }
.tag-zoom    { color: #1D6FD1; }
@media (max-width: 540px) {
  .time-row { grid-template-columns: 1fr auto; }
  .time-hour { grid-column: 1 / -1; font-size: 1.25rem; }
}

/* --- Tabel jadwal penuh ---------------------------------------------- */
.table-scroll { overflow-x: auto; }
table.data {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--line); min-width: 640px;
}
table.data th, table.data td {
  text-align: left; padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data th {
  font-size: .85rem; font-weight: 600; color: var(--ink-2);
  background: #EDEFF8;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.jam { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Tim pelayanan --------------------------------------------------- */
.lead-pastor {
  display: grid; gap: var(--gap);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 5px solid var(--cinnabar);
  padding: clamp(1.5rem, 4vw, 2.6rem);
}
@media (min-width: 760px) {
  .lead-pastor { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
}
.lead-pastor h2 { margin-bottom: .15em; }
.lead-role { color: var(--cinnabar); font-size: 1rem; margin-bottom: 1.4rem; }

.portrait {
  aspect-ratio: 4 / 5; width: 100%;
  object-fit: cover; object-position: center top;
  background: var(--paper);
  border: 1px solid var(--line);
}
.portrait-none {
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 2.6rem; color: #9AA2C6;
}

.facts { margin: 0; display: grid; gap: .9rem; }
.facts dt { font-size: .82rem; color: var(--ink-2); }
.facts dd { margin: .1rem 0 0; }

.team-grid {
  display: grid; gap: 1.5rem; margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.team-card { background: var(--surface); border: 1px solid var(--line); }
.team-card .portrait { border: 0; border-bottom: 1px solid var(--line); }
.team-body { padding: 1.1rem 1.2rem 1.4rem; }
.team-card h3 { font-size: 1.12rem; margin-bottom: .2em; }
.team-role { font-size: .85rem; color: var(--cinnabar); margin: 0 0 .6rem; }
.team-field { font-size: .95rem; color: var(--ink-2); margin: 0; }

/* --- Timeline sejarah ------------------------------------------------ */
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 1.9rem 1.8rem; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: .55rem;
  width: 10px; height: 10px; background: var(--ochre); border-radius: 50%;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline-year {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  font-variant-numeric: tabular-nums; display: block; line-height: 1.2;
}
.timeline p { margin: .2rem 0 0; color: var(--ink-2); }

/* --- Pengakuan iman -------------------------------------------------- */
.creed { list-style: none; margin: 0; padding: 0; counter-reset: creed; }
.creed li {
  counter-increment: creed;
  padding: 1.4rem 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem;
}
.creed li::before {
  content: counter(creed);
  font-family: var(--serif); font-size: 1.5rem; color: var(--ochre);
  line-height: 1.2;
}
.creed li:last-child { border-bottom: 0; }
.creed p { margin: 0; max-width: 72ch; }

/* --- Cabang ---------------------------------------------------------- */
.branch {
  background: var(--surface); border: 1px solid var(--line);
  margin-bottom: 2.5rem;
  display: grid; gap: 0;
}
@media (min-width: 900px) {
  .branch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.branch-body { padding: clamp(1.4rem, 3vw, 2.2rem); }
.branch h2 { margin-bottom: .5rem; }
.branch-map { min-height: 300px; background: #E5E8F4; }
.branch-map iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }
.branch-map-none { display: grid; place-items: center; color: var(--ink-2); padding: 2rem; text-align: center; }
.branch-times { list-style: none; margin: 0; padding: 0; }
.branch-times li { padding: .35rem 0; border-bottom: 1px dotted var(--line); }
.branch-times li:last-child { border-bottom: 0; }

/* --- Kontak ---------------------------------------------------------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.contact-list dt, .contact-label { font-size: .82rem; color: var(--ink-2); }
.contact-value { font-family: var(--serif); font-size: 1.35rem; }
.contact-value a { text-decoration: none; }
.map-frame { border: 1px solid var(--line); background: #E5E8F4; }
.map-frame iframe { display: block; width: 100%; height: 380px; border: 0; }

/* --- Catatan kosong -------------------------------------------------- */
.empty {
  border: 1px dashed var(--line); background: var(--surface);
  padding: 1.6rem; color: var(--ink-2);
}
.empty p:last-child { margin-bottom: 0; }

/* --- Footer ---------------------------------------------------------- */
.footer {
  background: var(--ink); color: #C6CBE4;
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  margin-top: var(--block);
}
.footer a { color: #E9ECF8; text-decoration: none; }
.footer a:hover { color: #FFF; text-decoration: underline; }
.footer-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.footer-name { font-family: var(--serif); font-size: 1.2rem; color: #FFF; margin-bottom: .4rem; }
.footer-address { font-size: .95rem; }
.footer-head { font-family: var(--sans); font-size: .82rem; font-weight: 600; color: #949CC4; margin-bottom: .8rem; }
.footer-list, .footer-social { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .95rem; }
.footer-social { grid-auto-flow: row; }
.footer-base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  border-top: 1px solid #39427A; margin-top: 2.5rem; padding-top: 1.2rem;
  font-size: .85rem; color: #949CC4;
}
.footer-base p { margin: 0; }


/* =====================================================================
   Komponen tambahan — mengikuti rancangan "Design Web"
   ===================================================================== */

/* --- Hero: teks + carousel jadwal berdampingan ----------------------- */
.hero-grid { display: grid; gap: var(--gap); align-items: center; }
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.hero-teks h1 { max-width: 18ch; }

/* --- Carousel -------------------------------------------------------- */
.carousel { position: relative; padding-inline: 2.6rem; }
.carousel-viewport { min-height: 1px; }
.carousel-slide {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.jadwal-kartu {
  /* Warna pekat, bukan tembus pandang: foto latar hero tidak boleh
     terlihat di belakang tulisan jadwal. */
  background: var(--navy-deep);
  border: 1px solid rgba(255, 255, 255, .18);
  border-left: 4px solid var(--red);
  border-radius: 4px;
  padding: 1rem 1.15rem;
}
.jadwal-kartu-judul {
  font-family: var(--sans); font-size: 1.02rem; font-weight: 600;
  color: #FFFFFF; margin: 0 0 .25rem; line-height: 1.3;
}
.jadwal-kartu-waktu {
  margin: 0; font-size: .93rem; color: #DDE2F6;
  font-variant-numeric: tabular-nums;
}
.jadwal-kartu-meta { margin: .3rem 0 0; font-size: .82rem; color: #AEB7E0; }

.carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.1rem; height: 2.1rem; padding: 0;
  display: grid; place-items: center;
  font: inherit; font-size: 1.5rem; line-height: 1;
  background: var(--navy-deep); color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
  cursor: pointer;
}
.carousel-nav:hover { background: var(--red); border-color: var(--red); }
.carousel-prev { left: 0; }
.carousel-next { right: 0; }

.carousel-dots {
  display: flex; justify-content: center; gap: .45rem; margin-top: 1rem;
}
.carousel-dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .35); border: 0; cursor: pointer;
}
.carousel-dot.is-active { background: #FFFFFF; }

/* --- Label kecil di atas judul --------------------------------------- */
.eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--red); margin-bottom: .5rem;
}


.btn-youtube {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--red); color: #FFFFFF; font-weight: 600;
  border-radius: 4px;
}
.btn-youtube:hover { background: #A00D25; color: #FFFFFF; }
.btn-youtube-ikon {
  display: grid; place-items: center;
  width: 1.7rem; height: 1.2rem; border-radius: 3px;
  background: #FFFFFF; color: var(--red); font-size: .68rem;
}

.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #FFFFFF; }

/* --- Gedung + peta --------------------------------------------------- */
.lokasi-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 820px) {
  .lokasi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lokasi-foto { margin: 0; }
.lokasi-foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--line); background: #E5E8F4;
}
.lokasi-peta { border: 1px solid var(--line); background: #E5E8F4; }
.lokasi-peta iframe {
  display: block; width: 100%; height: 100%; min-height: 320px; border: 0;
}

/* --- Baris waktu tanpa kolom jam ------------------------------------- */
.time-row-2 { grid-template-columns: minmax(0, 1fr); }

/* --- Halaman konseling ----------------------------------------------- */
.konseling-layout {
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .konseling-layout { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start; }
  .konseling-layout-solo { grid-template-columns: minmax(0, 1fr); }
}
.konseling-foto { margin: 0; }
.konseling-foto img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border: 1px solid var(--line); background: #E5E8F4;
}
.konseling-foto figcaption {
  font-size: .85rem; color: var(--ink-2); margin-top: .6rem;
}

.konseling-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
.konseling-item { background: var(--surface); padding: 1.1rem 1.3rem; }
.konseling-nama { font-weight: 600; margin: 0; }
.konseling-jabatan { font-size: .85rem; color: var(--red); margin: .1rem 0 .5rem; }
.konseling-waktu {
  margin: 0; font-variant-numeric: tabular-nums; color: var(--ink);
}
.konseling-lokasi { margin: .15rem 0 0; font-size: .92rem; color: var(--ink-2); }
.konseling-catatan { margin: .5rem 0 0; font-size: .92rem; color: var(--ink-2); }

.konseling-kontak {
  margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line);
}
.konseling-kontak h2 { font-size: 1.35rem; }

/* --- Blok ajakan (Tentang kami / Bergabung melayani) ------------------ */
.ajakan-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 820px) {
  .ajakan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ajakan {
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border-radius: 4px; color: #FFFFFF;
}
.ajakan h2 { color: #FFFFFF; }
.ajakan p { color: rgba(255, 255, 255, .88); }
.ajakan p:last-child { margin-bottom: 0; }
.ajakan-navy  { background: var(--navy); }
.ajakan-merah { background: var(--red); }


/* --- Buletin PELITA -------------------------------------------------- */
.pelita {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 5px solid var(--red);
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.pelita h2 { margin-bottom: .3em; letter-spacing: .02em; }


/* =====================================================================
   Halaman Jadwal Ibadah
   ===================================================================== */

/* --- Banner judul: lengkung merah + lengkung navy di kiri ------------- */
.banner {
  position: relative; overflow: hidden;
  background: var(--red);
  color: #FFFFFF;
  padding-block: clamp(3rem, 8vw, 5.5rem);
  min-height: clamp(220px, 30vw, 300px);
  display: flex; align-items: center;
}
/* Lengkung navy di sudut kiri bawah, seperti pada rancangan. */
.banner::before {
  content: ""; position: absolute; z-index: 1;
  left: clamp(-140px, -10vw, -60px); bottom: clamp(-120px, -8vw, -50px);
  width: clamp(220px, 26vw, 340px); aspect-ratio: 1;
  background: var(--navy); border-radius: 50%;
}
/* Foto di sisi kanan, memudar ke arah kiri supaya judul tetap terbaca. */
.banner-foto::after {
  content: ""; position: absolute; inset: 0;
  background: var(--banner-img) center/cover no-repeat;
  filter: grayscale(1);
  opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 55%);
          mask-image: linear-gradient(90deg, transparent 8%, #000 55%);
}
.banner .wrap { position: relative; z-index: 2; }
.banner-judul {
  font-family: var(--sans);
  font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1.05;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  color: #FFFFFF; margin: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .25);
}

/* --- Daftar jadwal dua kolom ----------------------------------------- */
.jadwal-daftar {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0 var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 820px) {
  .jadwal-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.jadwal-item {
  padding-block: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 2px solid var(--navy);
}
/* Baris terakhir: hilangkan garis kalau jumlahnya ganjil. */
.jadwal-item:last-child { border-bottom: 2px solid var(--navy); }

.jadwal-nama {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--navy); margin: 0 0 .3rem;
  line-height: 1.2;
}
.jadwal-hybrid {
  font-size: .62em; font-weight: 700; color: var(--navy);
  margin-left: .45em; white-space: nowrap;
}
.jadwal-waktu {
  margin: 0; color: var(--navy); font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}
.jadwal-catatan { margin: 0; color: var(--navy); font-size: 1.02rem; }
.jadwal-tanda {
  margin: .55rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: center;
}
.jadwal-bahasa {
  font-size: .74rem; letter-spacing: .04em;
  color: var(--ink-2); border: 1px solid var(--line);
  padding: .12rem .45rem; border-radius: 2px;
}
.jadwal-kaki { margin-top: 2.5rem; color: var(--ink-2); }


/* =====================================================================
   Halaman Tentang Kami
   ===================================================================== */

.judul-blok {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.01em; color: var(--navy);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  margin: 0 0 1.6rem;
}
.section-alt .judul-blok { color: var(--navy); }

.poin-misi { margin: 0; padding-left: 1.2rem; }
.poin-misi li { margin-bottom: .6rem; }

/* --- Pita Visi & Misi -------------------------------------------------
   Label navy di kiri, pita merah dengan foto jemaat di kanan. Fotonya
   ikut di dalam gambar latar, jadi teks tetap terbaca karena sisi kiri
   pita sudah merah pekat.
   -------------------------------------------------------------------- */
.vm { display: grid; gap: clamp(.8rem, 2vw, 1.4rem); }

.vm-baris {
  display: grid;
  grid-template-columns: clamp(4.5rem, 9%, 7rem) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
}

.vm-label {
  margin: 0;
  background: var(--navy);
  color: #FFFFFF;
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(.95rem, 1.8vw, 1.3rem);
  letter-spacing: .02em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
  padding: .6rem;
}

.vm-isi {
  background: var(--red) center right / cover no-repeat;
  color: #FFFFFF;
  padding: clamp(1.1rem, 3vw, 2rem) clamp(1.2rem, 4vw, 2.8rem);
  display: flex; flex-direction: column; justify-content: center;
}
.vm-isi-visi { background-image: url("../img/visi-banner.webp"); }
.vm-isi-misi { background-image: url("../img/misi-banner.webp"); }

.vm-visi {
  margin: 0;
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.85rem);
  line-height: 1.25;
  max-width: 30ch;
}

.vm-misi {
  margin: 0; padding-left: 1.4rem;
  font-size: clamp(.95rem, 1.6vw, 1.08rem);
  line-height: 1.5;
  max-width: 62ch;
}
.vm-misi li { margin-bottom: .45rem; }
.vm-misi li:last-child { margin-bottom: 0; }
.vm-misi::marker, .vm-misi li::marker { font-weight: 700; }

@media (max-width: 600px) {
  /* Di layar HP label pindah ke atas supaya lebar teks tidak tersisa sedikit. */
  .vm-baris { grid-template-columns: minmax(0, 1fr); }
  .vm-label { justify-content: flex-start; padding: .5rem 1.2rem; }
  .vm-isi { background-position: center; }
}
.afiliasi { margin-top: 2.5rem; color: var(--ink-2); }

/* --- Dua kartu sejarah dengan foto berlapis merah -------------------- */
.sejarah-kartu-grid {
  display: grid; gap: 1.5rem; margin-bottom: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  .sejarah-kartu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sejarah-kartu {
  position: relative; overflow: hidden;
  min-height: 300px; border-radius: 6px;
  background: var(--navy);
  display: flex; align-items: flex-end;
  padding: clamp(1.3rem, 3vw, 2rem);
}
.sejarah-kartu-foto::before {
  content: ""; position: absolute; inset: 0;
  background: var(--kartu-img) center/cover no-repeat;
  filter: grayscale(1);
}
.sejarah-kartu::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(200, 16, 46, 0) 12%, rgba(200, 16, 46, .92) 78%);
}
.sejarah-kartu p {
  position: relative; z-index: 1; margin: 0;
  color: #FFFFFF; font-size: 1rem; max-width: none;
}

/* --- Blok pendiri ---------------------------------------------------- */
.pendiri {
  margin-bottom: 2.5rem; border-radius: 6px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
}
.pendiri-gambar { width: 100%; height: auto; display: block; }
.pendiri-teks { padding: clamp(1.1rem, 3vw, 1.8rem); }
.pendiri-teks h3 { color: var(--navy); margin-bottom: .4em; }
.pendiri-teks p  { margin: 0; color: var(--ink-2); max-width: 80ch; }

/* --- Jangkauan sinode ------------------------------------------------ */
.sinode {
  display: grid; gap: var(--gap); align-items: center;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 2.5rem;
}
@media (min-width: 760px) {
  .sinode { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.sinode-peta { width: 100%; background: var(--paper); border-radius: 4px; }
.sinode-teks { font-size: 1.1rem; margin: 0; }

/* --- Lokasi asli ----------------------------------------------------- */
.lokasi-asli {
  display: grid; gap: var(--gap); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  .lokasi-asli { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.lokasi-asli-foto { margin: 0; }
.lokasi-asli-foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 6px; background: var(--paper);
}

/* --- Sekolah --------------------------------------------------------- */
.sekolah-layout {
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .sekolah-layout { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: start; }
}
.sekolah-daftar {
  margin: 2rem 0 0; padding-left: 1.4rem;
  display: grid; gap: 1.4rem;
}
.sekolah-daftar li::marker { font-weight: 700; color: var(--navy); }
.sekolah-nama { margin: 0; font-weight: 700; color: var(--navy); }
.sekolah-alamat { margin: .15rem 0 0; color: var(--ink-2); }

.sekolah-foto-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sekolah-foto { margin: 0; }
.sekolah-foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 6px; background: var(--paper);
}
/* Kotak untuk foto yang belum diunggah — susunan tetap terjaga. */
.sekolah-foto-kosong {
  aspect-ratio: 4 / 3; border-radius: 6px;
  background: var(--paper); border: 1px dashed var(--line);
  display: grid; place-items: center; padding: .8rem;
}
.sekolah-foto-kosong figcaption {
  font-size: .82rem; color: var(--ink-2); text-align: center;
}

/* --- Galeri gereja GKKK di Indonesia --------------------------------- */
.gkkk-galeri {
  list-style: none; margin: 0 0 2.5rem; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}
.gkkk-galeri img,
.gkkk-kosong {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 6px; background: var(--paper);
}
.gkkk-kosong { border: 1px dashed var(--line); }
.gkkk-galeri p {
  margin: .5rem 0 0; font-size: .9rem; color: var(--navy);
  font-weight: 600;
}


/* =====================================================================
   Penyesuaian layar kecil (HP)
   ===================================================================== */
@media (max-width: 620px) {

  /* Sisi kiri-kanan lebih rapat, isi jadi lebih lega. */
  .wrap { width: min(100% - 1.75rem, var(--wrap)); }

  /* Jarak antar bagian dipendekkan supaya tidak banyak menggulir. */
  :root { --block: 2.75rem; --gap: 1.5rem; }

  .masthead-inner { min-height: 68px; }
  .brand-logo { width: 44px; height: 44px; }
  .brand-name { font-size: .98rem; }

  /* Tombol hero selebar layar — lebih gampang ditekan dengan jempol. */
  .hero-actions { flex-direction: column; align-items: stretch; margin-top: 1.6rem; }
  .hero-actions .btn { text-align: center; }
  .hero { padding-block: 2.5rem; }

  /* Panah carousel dipindah ke bawah kartu, tidak lagi menghimpit dari
     samping — di layar sempit ruangnya tidak cukup. */
  .carousel { padding-inline: 0; padding-bottom: 4.4rem; }
  .carousel-nav { top: auto; bottom: 0; transform: none; width: 2.4rem; height: 2.4rem; }
  .carousel-prev { left: calc(50% - 3rem); right: auto; }
  .carousel-next { left: calc(50% + .6rem); right: auto; }
  /* Titik di atas, panah di bawah — tidak saling tumpuk berapa pun
     jumlah slide-nya. */
  .carousel-dots { position: absolute; bottom: 3rem; left: 0; right: 0; margin: 0; }

  /* Titik carousel: bidang sentuhnya diperbesar tanpa mengubah tampilan. */
  .carousel-dot { position: relative; }
  .carousel-dot::after {
    content: ""; position: absolute; inset: -12px;
  }

  /* Foto hamba Tuhan tidak perlu setinggi itu di layar sempit. */
  .lead-pastor .portrait { aspect-ratio: 1; }
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
  .team-body { padding: .9rem 1rem 1.1rem; }

  /* Peta dipendekkan supaya tidak menghabiskan satu layar penuh. */
  .map-frame iframe { height: 260px; }
  .branch-map, .branch-map iframe { min-height: 220px; }
  .lokasi-peta iframe { min-height: 240px; }
  .sinode-peta { max-width: 100%; }

  /* Daftar jadwal: nomor jam tidak lagi satu baris sendiri. */
  .time-row { padding: .9rem 1rem; }

  /* Tautan footer diberi ruang sentuh. */
  .footer-list li a, .footer-social li a { display: inline-block; padding: .3rem 0; }
  .footer-grid { gap: 1.6rem; grid-template-columns: minmax(0, 1fr); }

  /* Blok teks dalam kartu sejarah dibuat lebih ringkas. */
  .sejarah-kartu { min-height: 240px; }
  .pendiri { min-height: 0; }

  /* Tabel jadwal penuh tetap bisa digeser, beri tanda bahwa ada
     lanjutannya ke samping. */
  .table-scroll { position: relative; }
  .table-scroll::after {
    content: "Geser ke samping untuk melihat kolom lain";
    display: block; font-size: .8rem; color: var(--ink-2);
    padding-top: .6rem;
  }
}

/* Layar sangat sempit (di bawah 380 px). */
@media (max-width: 380px) {
  .wrap { width: min(100% - 1.25rem, var(--wrap)); }
  .brand-logo { width: 38px; height: 38px; }
  .brand-name { font-size: .9rem; }
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .sekolah-foto-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Warna sorot saat disentuh — bawaan biru tua Chrome terlihat kotor. */
a, button { -webkit-tap-highlight-color: rgba(200, 16, 46, .18); }


/* =====================================================================
   Ibadah Online, galeri video, Connect with us
   ===================================================================== */

/* Judul tebal tanpa huruf kapital semua — dipakai "Connect with us!". */
.judul-tebal {
  font-family: var(--sans); font-weight: 800;
  letter-spacing: -0.02em; color: var(--navy);
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  margin: 0 0 2rem;
}

/* --- Ibadah Online --------------------------------------------------- */
.ibadah-online-grid {
  display: grid; gap: var(--gap); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .ibadah-online-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
.ibadah-online-judul {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.02em; color: var(--navy);
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  margin: 0 0 .1em; line-height: 1.05;
}
.ibadah-online-sub {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  color: var(--navy); margin: 0 0 1.4rem;
}
.ibadah-online-teks { margin: 1.4rem 0 0; color: var(--ink-2); }
.ibadah-online-gambar { margin: 0; }
.ibadah-online-gambar img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 14px 30px rgba(27, 35, 64, .16));
}

/* --- Galeri video (Latest Sermon & Kids Service) --------------------- */
.video-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1rem, 2.5vw, 1.6rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.video-kartu { margin: 0; }

/* Semua bentuk isi kartu memakai bingkai 16:9 yang sama, jadi barisnya
   tetap rata walau isinya campur video, gambar, dan tautan. */
.video-bingkai {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 6px;
  background: var(--navy-deep);
}
.video-kosong { border: 1px dashed var(--line); background: var(--paper); }

.video-tautan { position: relative; overflow: hidden; }
.video-tautan img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .25s;
}
.video-tautan:hover img { transform: scale(1.04); }

/* Tombol main di tengah sampul yang menuju YouTube. */
.video-main {
  position: absolute; inset: 0; margin: auto;
  width: 3.6rem; height: 2.5rem; border-radius: 8px;
  background: var(--red);
}
.video-main::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-left: .8rem solid #FFFFFF;
  border-top: .5rem solid transparent;
  border-bottom: .5rem solid transparent;
}

.video-judul {
  margin: .8rem 0 0; font-weight: 700; color: var(--navy);
  font-size: 1.02rem; line-height: 1.3;
}
.video-keterangan { margin: .2rem 0 0; font-size: .9rem; color: var(--ink-2); }

/* --- Connect with us ------------------------------------------------- */
.sosmed-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.sosmed-kolom { display: flex; flex-direction: column; align-items: center; }

/* Nama platform, bingkai gambar, dan tombol semuanya dibatasi lebar yang
   sama lalu ditengahkan, supaya keempat kolom lurus satu sama lain. */
.sosmed-nama,
.sosmed-mockup,
.sosmed-hp,
.sosmed-tombol { width: 100%; max-width: 240px; }

.sosmed-nama {
  font-family: var(--sans); font-weight: 700;
  font-size: 1.05rem; color: var(--navy); margin: 0 0 .9rem;
  text-align: center;
}

/* Bingkai tangkapan layar, dibuat menyerupai bodi HP. */
.sosmed-hp {
  position: relative; overflow: hidden;
  aspect-ratio: 9 / 17;
  border-radius: 18px; border: 3px solid var(--ink);
  background: var(--navy-deep);
  margin-bottom: 1rem;
}
.sosmed-hp img { width: 100%; height: 100%; object-fit: cover; }
.sosmed-hp-kosong { width: 100%; height: 100%; background: var(--navy-deep); }

/* Lencana bulat berisi lambang platform, di tengah bingkai. */
.sosmed-ikon {
  position: absolute; inset: 0; margin: auto;
  width: 4.2rem; height: 4.2rem; border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  display: grid; place-items: center;
}
.sosmed-ikon::after {
  content: ""; width: 2.4rem; height: 2.4rem;
  background: center/contain no-repeat;
}
.sosmed-ikon-youtube   { background: #FF0000; }
.sosmed-ikon-instagram { background: linear-gradient(45deg, #F9CE34, #EE2A7B 50%, #6228D7); }
.sosmed-ikon-tiktok    { background: #000000; }
.sosmed-ikon-facebook  { background: #1877F2; }

.sosmed-ikon-youtube::after {
  width: 0; height: 0; margin-left: .25rem;
  border-left: 1.05rem solid #FFFFFF;
  border-top: .65rem solid transparent;
  border-bottom: .65rem solid transparent;
}
.sosmed-ikon-instagram::after {
  border: 3px solid #FFFFFF; border-radius: 10px;
  box-shadow: inset 0 0 0 3px transparent;
}
.sosmed-ikon-tiktok::after,
.sosmed-ikon-facebook::after {
  font-family: var(--sans); font-weight: 800; font-size: 1.5rem;
  color: #FFFFFF; display: grid; place-items: center;
  width: auto; height: auto;
}
.sosmed-ikon-tiktok::after   { content: "TT"; }
.sosmed-ikon-facebook::after { content: "f"; font-size: 2rem; line-height: 1; }

.sosmed-akun {
  position: absolute; left: 0; right: 0; bottom: 22%;
  text-align: center; color: #FFFFFF; font-weight: 700;
  font-size: 1.05rem; text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
  padding-inline: .5rem;
}

/* Kalau gambarnya sudah berupa mockup HP utuh, tampilkan apa adanya. */
.sosmed-mockup {
  margin-bottom: 1rem;
  /* Tinggi disamakan supaya deretan tombol di bawahnya sejajar,
     walau tinggi asli tiap mockup beda beberapa piksel. */
  aspect-ratio: 240 / 460;
  display: flex; align-items: center; justify-content: center;
}
.sosmed-mockup img {
  width: 100%; height: 100%; display: block; object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(27, 35, 64, .18));
}

.sosmed-tombol {
  margin-top: auto; border-radius: 8px;
  font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  min-height: 3.2rem; padding-inline: 1rem;
}

/* Hanya dibaca pembaca layar, tidak tampil. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}