/* =========================================================
   SDGs UM PONTIANAK — tambahan kecil di atas site.css
   (grid galeri foto: satu-satunya bentuk yang belum ada
   padanannya di sistem P4; komponen lain reuse langsung
   .app-grid/.app-icon-card, .list-group/.list-row, .table-wrap dst.)
   ========================================================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* ── Komitmen 2030: video kiri + 3 poin kanan ── */
.komitmen-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 860px) { .komitmen-grid { grid-template-columns: 1fr; } }
.komitmen-video { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--nm-raised); aspect-ratio: 16 / 9; background: var(--surface); }
.komitmen-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.komitmen-video-poster {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(135deg, #0a5dc2, #12a374); color: #fff;
}
.komitmen-video-poster span { font-size: 13px; font-weight: 600; opacity: .92; }
.komitmen-play {
  width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(4px);
}
.komitmen-points { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.komitmen-point { display: flex; gap: 14px; align-items: flex-start; background: var(--surface-white); border-radius: var(--r-md); padding: 16px; box-shadow: var(--nm-raised-sm); }
.komitmen-point .kp-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.komitmen-point strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.komitmen-point p { margin: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }

/* ── Kartu pakar: garis tema tipis di kiri + footer band "Kepakaran" ── */
.pakar-card { position: relative; overflow: hidden; border-left: 4px solid var(--brand-green-500); }
.pakar-foot {
  /* margin negatif kiri/kanan/bawah menembus padding .team-card (22px/28px)
     supaya band footer melebar penuh ke tepi kartu. */
  margin: 14px -22px -28px; padding: 12px 18px;
  background: linear-gradient(90deg, rgba(18,163,116,.10), rgba(10,132,255,.10));
  border-top: 1px solid rgba(18,163,116,.20);
}
.pakar-foot-label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-green-700); margin-bottom: 2px;
}
.pakar-foot-val { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.gallery-item {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--nm-raised-sm);
  background: var(--surface-white);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-med) var(--ease-ios);
}
.gallery-item:hover img { transform: scale(1.06); }

.goal-header {
  border-radius: var(--r-lg);
  padding: 40px 32px;
  color: #fff;
  box-shadow: var(--nm-raised);
}
.goal-header .goal-num {
  font-size: 15px;
  font-weight: 700;
  opacity: .85;
  letter-spacing: .04em;
}
.goal-header h1 { margin: 6px 0 10px; font-size: clamp(24px, 4vw, 34px); }

/* FAQ di beranda dikendalikan Alpine (x-show), bukan max-height via JS seperti
   site.css aslinya — netralkan max-height:0 bawaan supaya isi tidak terpotong. */
.accordion-panel { max-height: none !important; overflow: visible; }

/* =========================================================
   ANIMASI BERANDA — latar hero geser, roda besar berputar,
   kicker & judul bergerak, kartu slider mengambang acak.
   ========================================================= */
.hero-sdgs-bg { background-size: 220% 220%; animation: heroBgDrift 26s ease-in-out infinite; }
@keyframes heroBgDrift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Roda SDGs besar di hero berputar pelan; teks pusat tetap diam (div terpisah). */
.hero-wheel-pie .sdgs-wheel-svg { transform-origin: 50% 50%; animation: heroWheelTurn 40s linear infinite; }
@keyframes heroWheelTurn { to { transform: rotate(360deg); } }
.hero-wheel-pie { animation: heroWheelBreathe 6s ease-in-out infinite; }
@keyframes heroWheelBreathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.hero-kicker { animation: kickerSlide 4.5s ease-in-out infinite; }
@keyframes kickerSlide { 0%,100% { opacity: .82; transform: translateX(0); } 50% { opacity: 1; transform: translateX(5px); } }
.hero-title-sdgs { animation: titleFloat 5s ease-in-out infinite; }
@keyframes titleFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Kartu slider 1-17 mengambang naik-turun terus; durasi & delay acak per kartu
   (--fdur/--fdel di-set inline dari PHP). Hover jeda supaya mudah diklik. */
.goals-mini-card { animation: cardFloat var(--fdur, 3.6s) ease-in-out infinite; animation-delay: var(--fdel, 0s); }
@keyframes cardFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.goals-mini-card:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hero-sdgs-bg, .hero-wheel-pie, .hero-wheel-pie .sdgs-wheel-svg,
  .hero-kicker, .hero-title-sdgs, .goals-mini-card { animation: none; }
}

/* =========================================================
   HERO SDGs — full-bleed gradient presisi tengah, watermark
   bar-chart + roda pudar, judul navy, roda wedge asli di kanan.
   ========================================================= */
.hero-sdgs-outer { position: relative; overflow: hidden; }
.hero-accent-bar { height: 4px; background: linear-gradient(90deg, #ff9500, #ffcc00); }
.hero-sdgs-bg {
  position: absolute; inset: 0;
  /* Polos gradasi saja, tanpa foto. */
  background: linear-gradient(135deg, #cfdbf1 0%, #e3d7ec 26%, #f1dccd 50%, #f6cca0 74%, #f2b689 100%);
  z-index: 0;
}
.hero-bg-bars {
  position: absolute; left: 6%; top: 18%; width: 300px; height: 220px;
  display: flex; align-items: flex-end; gap: 12px;
  opacity: .16; z-index: 0; pointer-events: none;
}
.hero-bg-bars span { flex: 1; background: linear-gradient(180deg, #0a5dc2, #12a374); border-radius: 6px 6px 0 0; }
.hero-bg-wheel-ghost {
  position: absolute; left: -4%; top: -6%; width: 340px; height: 340px;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #E5243B,#DDA63A,#4C9F38,#C5192D,#FF3A21,#26BDE2,#FCC30B,#A21942,#FD6925,#DD1367,#FD9D24,#BF8B2E,#3F7E44,#0A97D9,#56C02B,#00689D,#19486A,#E5243B);
  opacity: .10; filter: blur(55px) grayscale(.15);
  z-index: 0; pointer-events: none;
  animation: heroWheelSpin 90s linear infinite;
}
/* Panel dasar ungu — SETENGAH DI BELAKANG goals-slider (bukan setelahnya):
   dinaikkan tinggi supaya jadi latar nyata di bawah baris kartu, kartu
   (z-index lebih tinggi lewat .hero-sdgs) duduk menindih separuh panel ini. */
.hero-wave-bottom {
  position: absolute; left: -8%; right: -8%; bottom: -70px; height: 180px;
  background: linear-gradient(100deg, #3d3f9e, #7c5fd1 55%, #a86fe0);
  border-radius: 50%;
  z-index: 0;
  /* Bevel/emboss di batas hero → section berikutnya: garis terang tipis di
     tepi atas kurva (rim-light) + shadow jatuh ke bawah biar ada kedalaman,
     bukan potongan rata tanpa pembatas. */
  box-shadow: 0 10px 22px rgba(30, 20, 70, .30);
  border-top: 2px solid rgba(255, 255, 255, .32);
}
/* Full-bleed sungguhan: tidak dikunci max-width sama sekali (site.css punya
   .hero{max-width:1180px} & .navbar-inner{max-width:1180px} — dua-duanya
   di-override di sini karena stylesheet ini dimuat belakangan), cuma padding
   tipis proporsional biar teks tidak nempel ke tepi viewport. */
.hero-sdgs {
  position: relative; z-index: 1; align-items: center;
  max-width: none;
  padding-left: clamp(24px, 5vw, 80px);
  padding-right: clamp(24px, 5vw, 80px);
  /* dipepetkan supaya goals-slider (child terakhir) turun & menindih wave. */
  padding-bottom: 6px;
}
.navbar-inner { max-width: none !important; padding-left: clamp(24px, 5vw, 80px); padding-right: clamp(24px, 5vw, 80px); }

.hero-kicker {
  display: inline-block;
  /* Warna gradasi hijau→biru menyatukan tema (hijau brand + judul biru).
     Font Georgia serif + tracking lega → lebih anggun & serasi, beda karakter
     dari judul sans-serif di bawahnya. */
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 20px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(90deg, #0e6e4e 0%, #12a374 40%, #0a5dc2 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--ios-orange);
  margin-bottom: 20px;
}
.hero-title-sdgs {
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: #0d2b6b;
}
.hero-o-badge {
  display: inline-block;
  width: .78em; height: .78em;
  border-radius: 50%;
  vertical-align: -0.06em;
  background: conic-gradient(#E5243B,#DDA63A,#4C9F38,#C5192D,#FF3A21,#26BDE2,#FCC30B,#A21942,#FD6925,#DD1367,#FD9D24,#BF8B2E,#3F7E44,#0A97D9,#56C02B,#00689D,#19486A,#E5243B);
  box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0,0,0,.18);
  animation: heroWheelSpin 10s linear infinite;
}

.hero-wheel-visual { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.hero-wheel-pie { position: relative; width: 420px; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; }
.hero-wheel-pie .sdgs-wheel-center { background: var(--surface-white); box-shadow: var(--nm-raised); }
@keyframes heroWheelSpin { to { transform: rotate(360deg); } }
@media (max-width: 480px) { .hero-wheel-pie { width: 300px; } }

/* =========================================================
   SLIDER 17 TUJUAN SDGs (scroll-snap native, autoplay JS)
   ========================================================= */
/* grid-column: span kedua kolom .hero (teks+roda) supaya slider dapat lebar
   penuh; min-width:0 WAJIB — tanpa ini item grid default min-width:auto, dan
   flex anak ber-flex-shrink:0 (kartu) memaksa box melar melebihi track alih-alih
   di-clip, sehingga overflow-x:auto tidak pernah aktif (semua 17 kartu tampil). */
.goals-slider {
  grid-column: 1 / -1;
  min-width: 0;
  /* Ikut lebar penuh kolom hero (full-bleed) — TANPA max-width, supaya tepi
     kiri/kanan slider sejajar hero, tidak inset/kelihatan tertutup. JS
     hitung sendiri berapa kartu muat & jumlah halaman. */
  margin: 56px 0 0;
  position: relative; z-index: 2;
}
.goals-slider-track {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* padding sisi 28px + scroll-padding samakan — beri ruang bayangan kartu
     tepi supaya tidak kelihatan kepotong garis batas track / tepi hero. */
  padding: 12px 28px 20px;
  scroll-padding-left: 28px;
  scrollbar-width: none;
  min-width: 0;
}
.goals-slider-track::-webkit-scrollbar { display: none; }

/* Jarak dari hero-wave-bottom — kartu Visi/Misi & Kabar SDGs nempel pas
   ke lengkung ungu tanpa ini (margin-top site.css = 0). */
.visi-carousel-section { margin-top: 64px; }
.goals-mini-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 108px;
  background: var(--surface-white);
  border-radius: var(--r-lg);
  /* Bayangan gelap tipis (bukan neumorphic glow putih menyebar) → kartu
     terlihat timbul/emboss di atas latar. */
  box-shadow: 0 8px 20px rgba(15, 28, 74, .16);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 10px;
  text-decoration: none; color: var(--text-primary);
  transition: transform var(--dur-med) var(--ease-ios), box-shadow var(--dur-med) var(--ease-ios);
}
.goals-mini-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(15, 28, 74, .24); }
.gmc-icon-img { width: 44px; height: 44px; object-fit: contain; }
.gmc-num { font-size: 24px; font-weight: 800; color: #0d2b6b; }
.goals-slider-dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
.goals-slider-dots button {
  width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--shadow-dark); transition: all var(--dur-med) var(--ease-ios);
}
.goals-slider-dots button.active { width: 22px; border-radius: 4px; background: var(--ios-blue); }
@media (prefers-reduced-motion: reduce) {
  .hero-bg-wheel-ghost, .hero-o-badge { animation: none; }
}

/* ── Keunggulan SDGs: judul besar gradasi beranimasi + showcase foto ── */
.keunggulan-section { text-align: center; max-width: 1180px; margin: 72px auto 0; padding: 0 24px; }
.keunggulan-title {
  font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; margin: 0 0 14px; line-height: 1.1;
  background: linear-gradient(90deg, #12a374, #0a84ff, #ff9500, #12a374);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: keunggulanShimmer 6s linear infinite;
}
@keyframes keunggulanShimmer { to { background-position: 300% 0; } }
.keunggulan-sub { max-width: 720px; margin: 0 auto 30px; color: var(--text-secondary); font-size: 15px; line-height: 1.75; }
.keunggulan-showcase {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
  background: var(--surface-white); border-radius: var(--r-xl); padding: 20px;
  box-shadow: 0 14px 40px rgba(15, 28, 74, .14);
}
.keunggulan-tile { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 6px 16px rgba(15, 28, 74, .14); }
.keunggulan-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--ease-ios); }
.keunggulan-tile:hover img { transform: scale(1.06); }
.keunggulan-tile-ph { display: flex; align-items: center; justify-content: center; }
.keunggulan-tile .kt-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; text-align: left;
  background: linear-gradient(transparent, rgba(0,0,0,.62)); color: #fff; font-size: 12.5px; font-weight: 600;
}
@media (prefers-reduced-motion: reduce) { .keunggulan-title { animation: none; } }

/* ── 4 Pilar: kartu diperbesar (default .app-icon-card terlalu kecil) ── */
#pilar .app-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px) { #pilar .app-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { #pilar .app-grid { grid-template-columns: 1fr; } }
#pilar .app-icon-card { padding: 34px 26px; border-radius: var(--r-xl); gap: 16px; }
#pilar .app-icon { width: 72px; height: 72px; border-radius: 20px; }
#pilar .app-icon svg { width: 32px; height: 32px; }
#pilar .app-name { font-size: 17.5px; font-weight: 700; }
#pilar .app-desc { font-size: 13px; }