/* Grid Layout */
.iosacc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Tablet: 2 kolom */
@media (max-width: 992px) {
  .iosacc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* HP: 1 kolom */
@media (max-width: 600px) {
  .iosacc-grid {
    grid-template-columns: 1fr;
  }
}

/* Card Style */
.iosacc-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  padding: 20px;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.iosacc-card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,.12); }
.iosacc-card img { max-width: 100%; border-radius: 16px; }
.iosacc-name { font-size: 17px; font-weight: 600; margin: 12px 0; color: #1c1c1e; }
.iosacc-price-tag { display:inline-block; background:linear-gradient(145deg,#007AFF,#00c6ff); color:#fff; padding:8px 16px; border-radius:18px; font-weight:600; font-size:16px; }
.iosacc-rating { color:#007AFF; margin:8px 0; }

/* Accordion */
.iosacc-accordion {
  background:#f2f2f7; color:#007AFF; cursor:pointer;
  padding:12px 40px 12px 12px; width:100%; border:none; border-radius:12px;
  text-align:left; font-weight:600; margin-top:12px; position:relative;
}
.iosacc-accordion::after {
  content:"›"; font-size:1.2rem; color:#007AFF;
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  transition:transform .3s ease;
}
.iosacc-accordion.active::after { transform:translateY(-50%) rotate(90deg); }
.iosacc-panel { max-height:0; overflow:hidden; transition:max-height .4s ease; margin-top:10px; }
.iosacc-spec-table th { background:#f0f8ff; color:#007AFF; padding:10px; text-align:left; width:40%; }
.iosacc-spec-table td { background:#fafafa; padding:10px; }

/* WhatsApp Button */
.iosacc-wa-btn {
  display: inline-flex;          /* icon + teks sejajar */
  align-items: center;
  gap: 8px;                      /* jarak icon dan teks */
  margin-top: 14px;
  background: #25D3333;           /* hijau WhatsApp */
  color: #007AFF;
  padding: 12px 18px;
  border-radius: 12px;           /* rounded ala iOS */
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* shadow halus */
  transition: all 0.3s ease;
}

.iosacc-wa-btn i {
  font-size: 18px;               /* ukuran icon */
}

.iosacc-wa-btn:hover {
  background: #E6E6E6;           /* hijau lebih gelap saat hover */
  transform: scale(1.05);        /* efek membesar halus */
}

/* Pagination */
.iosacc-pagination { display:flex; justify-content:center; align-items:center; margin-top:24px; gap:12px; }
.iosacc-pagination button { background:#007AFF; color:#fff; border:none; padding:8px 14px; border-radius:10px; cursor:pointer; font-weight:600; font-size:12px; }
.tag-hot {
  position: absolute;
  top: 220px;
  right:10px;
  background: #e63946;   /* merah */
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
#iosacc-numbers {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 20px 0;
}

#iosacc-numbers button {
  min-width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px; /* rounded ala iOS */
  background: #f2f2f7; /* abu-abu khas iOS */
  color: #333;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

#iosacc-numbers button:hover {
  background: #e5e5ea; /* hover abu-abu lebih gelap */
}

#iosacc-numbers button.active {
  background: #007aff; /* biru khas iOS */
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transform: scale(1.05); /* efek aktif sedikit membesar */
}