/* ==========================================================================
   PAKET.CSS — Paket Card, Popular Badge, Price, Feature List, Comparison
   ========================================================================== */

.paket-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.paket-card{
  position: relative;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  background: var(--color-surface);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.paket-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.paket-card.is-popular{
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: scale(1.03);
}
.paket-card__badge{
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  font-size: .7rem; font-weight: 800; letter-spacing: .04em;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.paket-card__name{
  text-align: center;
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.paket-card__speed{ text-align: center; margin-bottom: 14px; }
.paket-card__speed strong{ font-family: var(--font-heading); font-size: 2.4rem; font-weight: 800; color: var(--color-text); }
.paket-card__speed span{ font-size: .95rem; color: var(--color-text-muted); font-weight: 600; }

.paket-card__price{ text-align: center; margin-bottom: 22px; }
.paket-card__price strong{ font-size: 1.5rem; font-weight: 800; color: var(--color-primary); }
.paket-card__price small{ font-size: .8rem; color: var(--color-text-muted); }

.paket-card__features{ margin-bottom: 24px; }
.paket-card__features li{
  display: flex; align-items: center; gap: 10px;
  padding-block: 8px;
  font-size: .88rem; font-weight: 600;
  border-bottom: 1px dashed var(--color-border);
}
.paket-card__features li:last-child{ border-bottom: none; }
.paket-card__features svg{ width: 16px; height: 16px; color: var(--color-success); flex-shrink: 0; }

/* ---------- Filter Paket ---------- */
.paket-filter{
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 40px;
}
.paket-filter__btn{
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  font-weight: 700; font-size: .88rem;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}
.paket-filter__btn:hover{ border-color: var(--color-primary); color: var(--color-primary); }
.paket-filter__btn.is-active{ background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ---------- Comparison Table ---------- */
.comparison-table{ width: 100%; border-collapse: collapse; overflow: hidden; border-radius: var(--radius-md); }
.comparison-table th, .comparison-table td{
  padding: 16px 18px;
  text-align: center;
  border: 1px solid var(--color-border);
  font-size: .88rem;
}
.comparison-table th{ background: var(--color-bg-soft); font-weight: 800; }
.comparison-table td:first-child, .comparison-table th:first-child{ text-align: left; font-weight: 700; }
.comparison-table svg{ width: 16px; height: 16px; color: var(--color-success); }
.comparison-table .is-no{ color: var(--color-text-muted); }