/* ===== ABOUT page ===== */
.about-hero{ position:relative; background: var(--amber-50); }
.about-hero-bg{
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(180deg, rgba(255,247,222,.8), #fff);
  pointer-events:none;
}
.about-hero .container{ position:relative; z-index:1; }
.about-hero-media{ max-width:560px; height:360px; }
@media (min-width: 992px){ .about-hero-media{ height:420px; } }

/* Center line dekoratif di section sejarah */
.about-wrap{ position: relative; }
.about-wrap::before{
  content:"";
  position:absolute; inset:0 auto 0 50%;
  width:2px; transform:translateX(-50%);
  background: linear-gradient(180deg, var(--amber-200), var(--amber-500));
  opacity:.45; display:none;
}

/* Zig-zag grid */
.about-zigzag{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
.zz-item{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
}

/* Media (gambar) */
.zz-media{
  border-radius: 16px; overflow:hidden;
  border:1px solid var(--amber-200); background:#fff7e6;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  aspect-ratio: 16 / 10;
}
.zz-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Card deskripsi */
.zz-card{
  position:relative;
  border:1px solid #ffe8a3; background:#fffdf5;
  border-radius:16px; padding:1rem 1.1rem;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.zz-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.08); }

/* Badge tahun */
.zz-year{
  position:absolute; top:-12px; left:12px;
  background:#fff; color:var(--amber-700, #92400e);
  border:1px solid var(--amber-200);
  padding:.2rem .55rem; border-radius:999px;
  font-weight:700; font-size:.8rem;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

/* Zig-zag aktif di layar lebar */
@media (min-width: 992px){
  .about-wrap::before{ display:block; }
  .about-zigzag{
    grid-template-columns: 1fr 1fr;   /* dua kolom */
    gap: 2.25rem 3rem;
  }
  .zz-item{
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 2rem;
    position: relative;
  }
  .zz-item:nth-child(odd) .zz-media{ grid-column: 1; }
  .zz-item:nth-child(odd) .zz-card { grid-column: 2; }
  .zz-item:nth-child(even) .zz-media{ grid-column: 2; }
  .zz-item:nth-child(even) .zz-card { grid-column: 1; }

  /* connector dari kartu ke garis tengah */
  .zz-item .zz-card::after{
    content:"";
    position:absolute; top:50%; width:28px; height:2px;
    background: linear-gradient(90deg, var(--amber-300), var(--amber-500));
    opacity:.6; transform:translateY(-50%);
  }
  .zz-item:nth-child(odd) .zz-card::after{ left:-34px; }
  .zz-item:nth-child(even) .zz-card::after{ right:-34px; }
}

/* Typo/spacing */
#about-history .text-muted{ line-height:1.75; }

/* === Reveal on scroll untuk zig-zag === */
#about-history .zz-item { /* state awal: tersembunyi */
  opacity: 1; /* biar container tidak "lompat" */
}
#about-history .zz-item .zz-media,
#about-history .zz-item .zz-card,
#about-history .zz-item .zz-year{
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .6s ease,
    transform .6s ease;
  transition-delay: var(--d, 0ms); /* bisa kita "stagger" dari JS */
}

/* Arah animasi di layar lebar: media & card saling berlawanan */
@media (min-width: 992px){
  #about-history .zz-item:nth-child(odd) .zz-media { transform: translateX(-32px); }
  #about-history .zz-item:nth-child(odd) .zz-card  { transform: translateX(32px);  }
  #about-history .zz-item:nth-child(even) .zz-media{ transform: translateX(32px);  }
  #about-history .zz-item:nth-child(even) .zz-card { transform: translateX(-32px); }
  #about-history .zz-item .zz-year{ transform: translateY(-6px) scale(.96); }
}

/* Saat masuk viewport */
#about-history .zz-item.in-view .zz-media,
#about-history .zz-item.in-view .zz-card{
  opacity: 1; transform: none;
}
#about-history .zz-item.in-view .zz-year{
  opacity: 1; transform: none;
  transition-delay: calc(var(--d, 0ms) + 120ms);
}

/* Hargai preferensi pengguna: nonaktifkan animasi jika reduce motion */
@media (prefers-reduced-motion: reduce){
  #about-history .zz-item .zz-media,
  #about-history .zz-item .zz-card,
  #about-history .zz-item .zz-year{
    transition: none; opacity: 1; transform: none;
  }
}

/* Haluskan animasi bolak-balik */
#about-history .zz-item .zz-media,
#about-history .zz-item .zz-card,
#about-history .zz-item .zz-year{
  will-change: opacity, transform;
}