/* ============================================================
   ZEEDSTORE LINK HUB — "Genesis" (editorial precision)
   Aturan desain = DESIGN.md di root project.
   - Indigo #6366F1 HANYA elemen interaktif (hover/focus)
   - Nol gradien dekoratif → satu-satunya dekorasi: dot grid
   - Nol shadow di elemen statis → shadow cuma saat hover/focus
   - Dua font weight per layar: 400 (DM Sans) + 700 (General Sans)
   - Radius: card 12px, tombol 6px, avatar/pill 9999px
   - Grid spacing 4px
   ============================================================ */

:root {
  /* palette Genesis */
  --primary: #6366F1;
  --primary-hover: #4F46E5;
  --neutral: #9C9C9C;
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --ink: #0A0A0A;        /* near-black, bukan #000 */
  --ink-2: #6B6B6B;
  --line: #E8E8EC;
  --gray-100: #F1F1F3;   /* tile/icon background */

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 9999px;

  /* elevation — khusus hover/focus */
  --lift: 0 8px 30px rgba(0, 0, 0, .08);
  --glow: 0 4px 12px rgba(99, 102, 241, .35);
  --ring: 0 0 0 3px rgba(99, 102, 241, .12);
  --ease: cubic-bezier(.25, .8, .35, 1);
  --dur: 200ms;

  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  background-color: var(--bg);
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
  overflow-x: hidden;
}

/* dot grid — dekorasi tunggal yang diizinkan spec */
.orbs {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(10, 10, 10, .07) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---------------- container ---------------- */
.hub {
  position: relative;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 24px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  animation: rise .5s var(--ease) both;
}

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------------- profile ---------------- */
.profile { text-align: center; margin-bottom: 12px; }

.avatar {
  width: clamp(80px, 24vw, 96px);
  height: clamp(80px, 24vw, 96px);
  border-radius: var(--r-pill);
  object-fit: cover;
  border: 1px solid var(--line);   /* tanpa ring gradien — spec: nol gradien dekoratif */
  background: var(--gray-100);
  animation: drop .5s var(--ease) both;
}
@keyframes drop { from { opacity: 0; transform: translateY(-12px) scale(.94); } to { opacity: 1; transform: none; } }

.username {
  margin: 16px 0 4px;
  font-family: 'General Sans', 'DM Sans', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: var(--ink);               /* teks solid — bukan gradien, bukan indigo dekoratif */
  animation: fade .45s .12s both;
}

.subtitle {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-2);
  animation: fade .45s .2s both;
}

/* ---------------- socials (secondary button style, pill) ---------------- */
.social {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.social li { animation: rise .4s calc(.24s + var(--i) * .06s) var(--ease) both; }
.social li:nth-child(1) { --i: 0; }
.social li:nth-child(2) { --i: 1; }
.social li:nth-child(3) { --i: 2; }
.social li:nth-child(4) { --i: 3; }

.social-btn {
  width: 44px;
  height: 44px;                     /* size large = 44px sesuai spec */
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.social-btn:hover {
  color: var(--primary);            /* indigo = interaktif */
  border-color: var(--primary);
  box-shadow: var(--glow);
  transform: translateY(-1px);      /* "shift up 1px" sesuai spec button */
}
.social-btn:active { transform: scale(.94); }

/* ---------------- link cards (list row gaya gallery-frame) ---------------- */
.links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.links li { animation: rise .4s calc(.36s + var(--i) * .06s) var(--ease) both; }

.card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;               /* komponen: 12×16, tetap di grid 4px */
  min-height: 64px;
  border-radius: var(--r-lg);       /* 12px — spec card */
  background: var(--surface);
  border: 1px solid var(--line);    /* flat, TANPA shadow statis */
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-2px);      /* hover lift 2px sesuai spec */
  border-color: var(--primary);
  box-shadow: var(--lift);
}
.card:active { transform: translateY(0) scale(.99); }

.card-icon { flex: 0 0 auto; display: grid; place-items: center; color: var(--ink-2); transition: color var(--dur) var(--ease); }
.card-icon > svg { width: 24px; height: 24px; }
.card:hover .card-icon { color: var(--primary); }

.tile {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);       /* metadata card 8px */
  background: var(--gray-100);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: background var(--dur) var(--ease);
}
.card:hover .tile { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.tile::before {
  content: attr(data-letter);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'General Sans', 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-2);
  transition: color var(--dur) var(--ease);
}
.card:hover .tile::before { color: var(--primary); }
.tile img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.card-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 400;                 /* dua weight saja: 400 + 700 */
  line-height: 1.4;
  overflow-wrap: break-word;
  color: var(--ink);
}

.chev {
  flex: 0 0 auto;
  color: var(--neutral);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card:hover .chev { transform: translateX(3px); color: var(--primary); }

/* ---------------- footer ---------------- */
.foot {
  margin-top: 20px;
  text-align: center;
  font-size: 11px;                  /* overline */
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral);
}
.foot span[data-brand] { color: var(--ink-2); }

/* ---------------- keyboard focus (ring indigo, bukan shadow) ---------- */
a:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

/* ---------------- dark Genesis (tetap editorial, kontras AA) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E0F14;
    --surface: #16181F;
    --ink: #F5F5F5;
    --ink-2: #A5A8B0;
    --neutral: #6E7178;
    --line: #24262E;
    --gray-100: #1E2027;
    --lift: 0 8px 30px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
  .orbs { background-image: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1px); }
}

/* ---------------- motion off ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------- desktop ---------------- */
@media (min-width: 720px) {
  .hub { padding: 48px 32px 36px; }
  .username { font-size: 32px; letter-spacing: -.03em; }   /* section-heading scale */
}