/* =========================================================
   IIPE 2027 - "What to Expect" (galeri foto, 1 baris geser)
   Aset: expect-title.png + foto di /2027/assets/expect/ (rasio 3:2)
   ========================================================= */

.expect { background: #009880; }

/* bagian atas: judul + foto di atas checker hijau (CSS, tanpa gambar) */
.expect-top {
  --tile: clamp(48px, 6.25vw, 120px);
  padding: clamp(28px, 3.6vw, 70px) 0 clamp(10px, 2vw, 26px);
  background: conic-gradient(#44C27B 25%, #64D283 0 50%, #44C27B 0 75%, #64D283 0)
              0 0 / calc(var(--tile) * 2) calc(var(--tile) * 2);
}
.expect-title { margin: 0 auto clamp(16px, 2.4vw, 40px); width: min(44.5%, 860px); }
.expect-title img { display: block; width: 100%; height: auto; image-rendering: pixelated; }

/* ---- track ---- */
.gallery { --w: min(29.5vw, 560px); position: relative; }
.gallery-track {
  position: relative;
  display: flex;
  gap: clamp(12px, 1.6vw, 24px);
  margin: 0; list-style: none;
  padding: 22px calc(50% - var(--w) / 2);     /* foto pertama/terakhir bisa di tengah */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { outline: 3px solid #5B3CC4; outline-offset: -3px; }

.slide {
  flex: 0 0 var(--w);
  min-width: 0;                       /* jangan melebar mengikuti isi */
  max-width: var(--w);
  scroll-snap-align: center;
  cursor: pointer;
  opacity: .55;
  transform: scale(.94);
  transition: opacity .2s steps(3), transform .2s steps(3);
}
.slide.is-active { opacity: 1; transform: none; cursor: default; }

.slide figure { position: relative; margin: 0; transition: transform .12s steps(2); }
.slide:hover figure { transform: translateY(-4px); }
.slide img {
  display: block; width: 100%; max-width: 100%;
  height: auto;                                  /* wajib: atribut height="800" di HTML jangan menang atas aspect-ratio */
  aspect-ratio: 3 / 2; object-fit: cover;       /* foto 16:9 otomatis di-crop ke 3:2 */
  box-sizing: border-box;
  border: 6px solid #fff;
  border-radius: clamp(12px, 1.4vw, 20px);
  background: #fff;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .18);
}

/* kursor pojok pixel di foto aktif */
.slide.is-active figure::after {
  --c: #5B3CC4; --l: clamp(18px, 2vw, 28px); --t: 5px;
  content: ""; position: absolute; inset: -12px; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0 / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--t) var(--l) no-repeat;
  animation: exBlink 1.2s steps(1) infinite;
}

/* ---- navigasi (di area teal) ---- */
.expect-nav {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(18px, 2.6vw, 38px) 12px clamp(28px, 4vw, 60px);
  font-family: 'IIPE Pixel', ui-monospace, monospace;
  color: #FFFFDA;
}
.g-count { margin: 0; font-size: clamp(22px, 2.2vw, 32px); line-height: 1; letter-spacing: .06em; min-width: 3.6em; text-align: center; }

.g-bars { display: flex; gap: 5px; }
.g-bars i { width: clamp(9px, 1vw, 13px); aspect-ratio: 1; background: #00735F; }
.g-bars i.on { background: #C2F08A; }

.g-btn {
  display: grid; place-items: center;
  width: clamp(46px, 4.2vw, 60px); aspect-ratio: 1;
  padding: 0; cursor: pointer;
  border: 3px solid #C2F08A; background: #5B3CC4;
  box-shadow: 0 4px 0 #3B2290;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.g-btn::before {                       /* segitiga pixel (kanan), 4x7 kotak */
  content: ""; width: 38%; aspect-ratio: 4 / 7; background: #FFFFDA;
  clip-path: polygon(0 0, 25% 0, 25% 14.29%, 50% 14.29%, 50% 28.57%, 75% 28.57%, 75% 42.86%,
                     100% 42.86%, 100% 57.14%, 75% 57.14%, 75% 71.43%, 50% 71.43%, 50% 85.71%,
                     25% 85.71%, 25% 100%, 0 100%);
}
.g-prev::before { transform: scaleX(-1); }
.g-btn:hover:not(:disabled)::before { animation: exBlink .6s steps(1) infinite; }
.g-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #3B2290; }
.g-btn:disabled { opacity: .35; cursor: default; }
.g-btn:focus-visible { outline: 3px solid #FFFFDA; outline-offset: 3px; }

@keyframes exBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .slide, .slide figure { transition: none; }
  .slide.is-active figure::after, .g-btn:hover:not(:disabled)::before { animation: none; }
}

/* ===== MOBILE ===== */
@media (max-width: 720px) {
  .expect-title { width: 90%; }
  .gallery { --w: 76vw; }                 /* sisa 12vw kiri-kanan: foto lain mengintip */
  .expect-nav { gap: 10px; }
  .g-bars { gap: 3px; }
}