/* ── Galeri Aplikasi (/galeri-aplikasi) ─────────────────────────────────────
   Sederet tangkapan layar dari setiap aplikasi dalam ekosistem — situs web,
   SJPH (web & mobile), dan dua aplikasi ponsel lainnya — masing-masing
   dengan penjelasan singkat. Dibangun di atas token tema situs (app.css)
   supaya ikut terang/gelap sesuai preferensi pengunjung, bukan palet sendiri
   seperti /presentasi yang memang sengaja dikunci gelap untuk proyektor. */

.gallery-app {
  padding-block: var(--sp-16) var(--sp-8);
  border-bottom: 1px solid var(--border);
}
.gallery-app:last-child { border-bottom: 0; }

.gallery-app-head { max-width: 68ch; margin-bottom: var(--sp-8); }
.gallery-app-head .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); }
.gallery-app-head h2 { margin-block: var(--sp-2) var(--sp-2); }
.gallery-app-head p { color: var(--ink-500); line-height: 1.65; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-8) var(--sp-6);
}
/* Tiga atau lebih tangkapan layar ponsel terasa longgar dalam kolom selebar
   itu — dipersempit supaya berjajar rapat, sewajarnya deretan ponsel. */
.gallery-grid.is-phones { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.gallery-shot { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Bingkai peramban: dipakai untuk tangkapan layar situs & SJPH (web) */
.shot-browser {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(12, 26, 22, .08));
}
.shot-browser-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.shot-browser-bar span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--border-strong);
}
.shot-browser img { display: block; width: 100%; height: auto; }

/* Bingkai ponsel: dipakai untuk tangkapan layar SJPH Mobile, IndoHalal
   Pelaku Usaha, dan IndoHalal Petugas. */
.shot-phone {
  border: 6px solid var(--ink-900);
  border-radius: 28px;
  overflow: hidden;
  max-width: 220px;
  margin-inline: auto;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(12, 26, 22, .1));
}
.shot-phone img { display: block; width: 100%; height: auto; }

.gallery-shot-caption { font-size: var(--text-sm); color: var(--ink-500); line-height: 1.6; }
.gallery-shot-caption strong { color: var(--ink-800); }

.gallery-cta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: center;
  text-align: center; margin-top: var(--sp-2);
}

/* ── Slider pratinjau (dipakai di beranda) ──────────────────────────────────
   Versi ringkas dari /galeri-aplikasi: satu potret per aplikasi, digeser
   horizontal, mengarahkan ke halaman galeri lengkap. Gulir sentuh bawaan
   peramban sudah cukup di ponsel; tombol panah ini murni kenyamanan mouse
   di desktop, jadi disembunyikan di layar sempit alih-alih dipaksa muat. */
.app-slider { position: relative; margin-top: var(--sp-8); }

.app-slider-track {
  display: flex; gap: var(--sp-6);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-block: var(--sp-2); padding-inline: var(--sp-1);
  scrollbar-width: none; -ms-overflow-style: none;
}
.app-slider-track::-webkit-scrollbar { display: none; }

.app-slide {
  flex: 0 0 auto; width: min(74vw, 280px);
  scroll-snap-align: center;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.app-slide .shot-browser, .app-slide .shot-phone { width: 100%; margin-inline: auto; }
.app-slide-label strong { display: block; color: var(--ink-800); }
.app-slide-label span { color: var(--ink-500); font-size: var(--text-sm); }

.app-slider-nav {
  position: absolute; top: 45%; transform: translateY(-50%);
  z-index: 2; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-md, 0 8px 20px rgba(12, 26, 22, .12));
  color: var(--ink-700); cursor: pointer;
}
.app-slider-nav:hover { background: var(--surface-2); }
.app-slider-nav:disabled { opacity: .35; cursor: default; }
.app-slider-nav.prev { inset-inline-start: -1.1rem; }
.app-slider-nav.next { inset-inline-end: -1.1rem; }
@media (max-width: 860px) { .app-slider-nav { display: none; } }