/* CSS WIDGET IG */
.igT {
  display: flex !important;
  flex-wrap: nowrap !important; /* Pengaman agar tidak tumpah ke bawah */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  
  --items: 4;
  --gap: 15px;
  gap: var(--gap);
  padding: 2px;
}
.igT::-webkit-scrollbar { height: 8px; }

/* Card */
.igI {
  /* Lebar otomatis berdasarkan variabel */
  flex: 0 0 calc((100% - (var(--items) - 1) * var(--gap)) / var(--items));
  scroll-snap-align: start;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  position: relative;
  border: none;
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5) !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .igT { --items: 3; }
}

/* Mobile */
@media (max-width: 768px) {
  .igT { --items: 1; }
  .igI { 
    /* Ganti 82vw ke 85% jika lebarnya masih kurang akurat di HP */
    flex-basis: 95vw; 
  }
}

.igImg {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  background: #f1f5f9;
}

.igO {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55));
  opacity: 0;
  transition: .2s;
}
.igI:hover .igO { opacity: 1; }

.igTag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  background: #E1306C;
  padding: 8px 12px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(225, 48, 108, 0.25);
}

/* Controls */
.igC {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.igB {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: none;
  background: #fff;
  font-size: 35px;
  line-height: 52px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  transition: transform .15s ease;
}
.igB:hover { transform: translateY(-1px); }