/* links.css — Link Cards & Social Grid */

.links-section { padding: 8px 0 40px; }

.links-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Group ──────────────────────────────────────────────── */
.link-group { display: flex; flex-direction: column; gap: 10px; }

.group-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.30);
  padding-left: 2px; margin-bottom: 2px;
}

/* ── Link Card ──────────────────────────────────────────── */
.link-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--grad-card);
  border: 1px solid var(--border);
  overflow: hidden; cursor: pointer;
  /* opacity+transform saja — GPU friendly, gak trigger paint */
  transition:
    transform 0.22s var(--ease-smooth),
    border-color 0.22s ease,
    opacity 0.15s ease;
  text-decoration: none; color: var(--white);
  -webkit-user-select: none; user-select: none;
  will-change: transform;
}

/* Hover: translateY ringan, gak ada box-shadow besar */
.link-card:hover { transform: translateY(-2px); opacity: 0.92; }
.link-card:active { transform: scale(0.98); opacity: 1; }

.link-card.primary:hover    { border-color: rgba(59,130,246,0.35); }
.link-card.wa-channel:hover { border-color: rgba(37,211,102,0.35); }
.link-card.wa-group:hover   { border-color: rgba(37,211,102,0.25); }

/* Shimmer line — tetap ada tapi lebih tipis */
.link-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,0.25), transparent);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.link-card:hover::before { opacity: 1; }
.link-card.wa-channel::before,
.link-card.wa-group::before {
  background: linear-gradient(90deg, transparent, rgba(37,211,102,0.25), transparent);
}

/* ── Icon wrap ──────────────────────────────────────────── */
.link-icon-wrap {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--icon-color, #3B82F6);
  transition: border-color 0.2s ease;
}
.link-card:hover .link-icon-wrap { border-color: var(--icon-color, rgba(59,130,246,0.3)); }

/* ── Text ───────────────────────────────────────────────── */
.link-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.link-title { font-size: 0.93rem; font-weight: 600; color: var(--gray-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-sub   { font-size: 0.73rem; color: var(--gray-3); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Badge ──────────────────────────────────────────────── */
.link-badge {
  flex-shrink: 0; padding: 3px 9px; border-radius: 99px;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(37,211,102,0.10); border: 1px solid rgba(37,211,102,0.20); color: rgba(37,211,102,0.85);
}
.new-badge { background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.25); color: rgba(96,165,250,0.9); }

/* ── Arrow ──────────────────────────────────────────────── */
.link-arrow { flex-shrink: 0; color: var(--gray-3); transition: transform 0.2s var(--ease-spring); }
.link-card:hover .link-arrow { transform: translateX(3px); }

/* ── Ripple ─────────────────────────────────────────────── */
.link-ripple { position: absolute; inset: 0; pointer-events: none; }
.ripple-circle {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.10);
  transform: scale(0);
  animation: rippleOut 0.5s ease forwards;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   SOCIAL GRID
══════════════════════════════════════════════════════════ */
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.social-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 12px 16px; border-radius: var(--radius);
  background: var(--grad-card); border: 1px solid var(--border);
  text-decoration: none; color: var(--white); overflow: hidden;
  /* scale dihapus, cukup translateY — lebih ringan */
  transition:
    transform 0.22s var(--ease-smooth),
    border-color 0.22s ease,
    opacity 0.15s ease;
  cursor: pointer; -webkit-user-select: none; user-select: none;
  will-change: transform;
}

.social-card::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px; border-radius: 99px;
  opacity: 0; transition: opacity 0.22s ease;
}

.social-card:hover  { transform: translateY(-3px); }
.social-card:active { transform: scale(0.97); opacity: 0.9; }
.social-card:hover::before { opacity: 1; }

/* Per-platform */
.tiktok    { --s-color: rgba(255,255,255,0.85); --s-glow: rgba(255,255,255,0.10); --s-border: rgba(255,255,255,0.18); }
.tiktok::before    { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); }
.tiktok:hover      { border-color: rgba(255,255,255,0.18); }

.instagram { --s-color: rgba(228,64,95,0.9); --s-glow: rgba(228,64,95,0.12); --s-border: rgba(228,64,95,0.30); }
.instagram::before { background: linear-gradient(90deg, transparent, rgba(228,64,95,0.3), transparent); }
.instagram:hover   { border-color: rgba(228,64,95,0.30); }

.telegram  { --s-color: rgba(38,173,229,0.9); --s-glow: rgba(38,173,229,0.12); --s-border: rgba(38,173,229,0.30); }
.telegram::before  { background: linear-gradient(90deg, transparent, rgba(38,173,229,0.3), transparent); }
.telegram:hover    { border-color: rgba(38,173,229,0.30); }

.whatsapp  { --s-color: rgba(37,211,102,0.9); --s-glow: rgba(37,211,102,0.12); --s-border: rgba(37,211,102,0.30); }
.whatsapp::before  { background: linear-gradient(90deg, transparent, rgba(37,211,102,0.3), transparent); }
.whatsapp:hover    { border-color: rgba(37,211,102,0.30); }

.social-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07);
  color: var(--gray-2);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.social-card:hover .social-icon { color: var(--s-color); border-color: var(--s-border); }

.social-name   { font-size: 0.83rem; font-weight: 600; color: var(--gray-1); }
.social-handle { font-size: 0.68rem; color: var(--gray-3); font-weight: 400; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .link-card, .social-card { transition: opacity 0.15s ease; }
  .link-card:hover, .social-card:hover { transform: none; opacity: 0.88; }
}

/* ══════════════════════════════════════════════════════════
   DESKTOP (min-width: 768px)
══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .links-container { max-width: 720px; padding: 0 40px; gap: 36px; }

  .group-label { font-size: 0.75rem; }

  /* Link cards: 2 kolom pas cukup item */
  .link-group { gap: 12px; }

  .link-card { padding: 18px 20px; gap: 18px; }

  .link-icon-wrap { width: 52px; height: 52px; border-radius: 14px; }
  .link-icon-wrap svg { width: 24px; height: 24px; }

  .link-title { font-size: 1.05rem; }
  .link-sub   { font-size: 0.82rem; }

  .link-badge { font-size: 0.7rem; padding: 4px 11px; }

  /* Social grid: 4 kolom di desktop */
  .social-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }

  .social-card { padding: 22px 16px 20px; gap: 10px; }

  .social-icon { width: 52px; height: 52px; border-radius: 14px; }
  .social-icon svg { width: 24px; height: 24px; }

  .social-name   { font-size: 0.92rem; }
  .social-handle { font-size: 0.75rem; }
}