.pogau-potret{
  background:#050505;
  padding:60px 0;
  position:relative;
}

/* ===== Napas antara Perspektif & Potret ===== */

.pogau-potret{
    margin-top: 72px;      /* jarak dari section Perspektif */
    padding-top: 56px;
    padding-bottom: 56px;
}

.potret-wrap{
  max-width:1320px;
  margin:auto;
  padding:0 22px;
  position:relative;
}

.potret-head{
  text-align:center;
  margin-bottom:30px;
 

}

.potret-head h2{
  color:#131212;
  font:700 60px "Libre Baskerville",serif;
  margin:0;
  letter-spacing:2px;
}

.potret-head span{
  width:74px;
  height:4px;
  background:#d6a400;
  display:block;
  margin:10px auto 0;
}
.potret-track{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:24.2%;
    gap:18px;

    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scrollbar-width:none;
}

.potret-track::-webkit-scrollbar{
    display:none;
}

.potret-card a{ text-decoration:none; }

.potret-img{
  margin:0;
  overflow:hidden;
  aspect-ratio:5/4;
}

.potret-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.45s;
}

.potret-card:hover img{
  transform:scale(1.06);
}

.potret-meta{
  color:#141414;
  font-size:11px;
  letter-spacing:1px;
  margin-top:12px;
}

.potret-card h3{
  color:#0c0c0c;
  font:700 19px/1.35 "Libre Baskerville",serif;
  margin-top:8px;
  transition:.3s;
}

.potret-card:hover h3{
  color:#d6a400;
}

.potret-prev,.potret-next{
  position:absolute;
  top:205px;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid #d6a400;
  background:rgba(0,0,0,.55);
  color:#d6a400;
  cursor:pointer;
  z-index:5;
}

.potret-prev{
  left:32px;
  opacity:.25;
}

.potret-next{
  right:32px;
}

.potret-prev:disabled{
  pointer-events:none;
}

@media(max-width:900px){
  .potret-track{
    grid-auto-columns:84%;
  }

  .potret-head h2{
    font-size:42px;
  }
}

.potret-track{
  cursor:grab;
  scroll-behavior:smooth;
}

.potret-track:active{
  cursor:grabbing;
}

/* ===== POGAU Arrow Effect ===== */
.potret-next{
    width:40px;
    height:40px;
    border:1.8px solid #D9A520;
    border-radius:50%;
    background:rgba(0,0,0,.35);

    display:flex;
    align-items:center;
    justify-content:center;

    position:absolute;
    top:50%;
    right:14px;
    transform:translateY(-50%);
}

.potret-next svg{
    width:16px;
    height:16px;
}

.potret-next:hover{
    background:#D9A520;
    color:#111;
    box-shadow:0 0 18px rgba(217,165,32,.45);
    transform:translateY(-50%) scale(1.08);
}

.potret-next:hover svg{
    transform:translateX(3px);
}

.potret-next:active{
    transform:translateY(-50%) scale(.95);
}