/* =====================================================================
   TBD Agency — halaman tautan (linktree)
   Nada: agensi muda, gelap, bersih, tipografi tebal, kartu kaca.
   Warna mengikuti identitas situs utama: biru #0074da, lime #b7ec0c.
   ===================================================================== */

:root {
  --ink:       #05091a;
  --blue:      #0074da;
  --blue-glow: rgba(0, 116, 218, .55);
  --lime:      #b7ec0c;
  --lime-glow: rgba(183, 236, 12, .45);
  --text:      #eef2fb;
  --text-dim:  #93a1c0;
  --card:      rgba(255, 255, 255, .045);
  --card-line: rgba(255, 255, 255, .09);
  --radius:    18px;
  --accent:    var(--lime);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 44px 20px 40px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--ink);
  overflow-x: hidden;
  position: relative;
}

/* --- latar: dua cahaya lembut + butiran halus ------------------------ */
body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
body::before {
  width: 60vmax; height: 60vmax;
  top: -28vmax; left: -22vmax;
  background: radial-gradient(circle, var(--blue-glow), transparent 68%);
  opacity: .5;
}
body::after {
  width: 48vmax; height: 48vmax;
  bottom: -24vmax; right: -20vmax;
  background: radial-gradient(circle, var(--lime-glow), transparent 68%);
  opacity: .32;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- kepala ---------------------------------------------------------- */
.avatar {
  width: 104px; height: 104px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 210deg, var(--lime), var(--blue), var(--lime));
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .04), 0 18px 44px rgba(0, 0, 0, .55);
}
.avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #fff;
}

.name {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 7vw, 32px);
  letter-spacing: -.02em;
  text-align: center;
}
.badge { width: 20px; height: 20px; flex: 0 0 20px; color: var(--blue); }

.handle {
  margin-top: 5px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.tagline {
  margin-top: 14px;
  max-width: 21rem;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: #c9d4ea;
}

/* --- pita kata kunci -------------------------------------------------- */
.ticker {
  width: 100vw;
  margin: 22px 0 2px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: slide 26s linear infinite;
}
.ticker span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.ticker span::after { content: "•"; margin-left: 12px; color: var(--accent); }
@keyframes slide { to { transform: translateX(-50%); } }

/* --- daftar tautan ---------------------------------------------------- */
.links {
  width: 100%;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  list-style: none;
}

.link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--card-line);
  color: var(--text);
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.link:hover,
.link:focus-visible {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .075);
  border-color: var(--accent);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .45);
  outline: none;
}
.link:active { transform: translateY(-1px) scale(.995); }

.link .ico {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .07);
}
.link .ico svg { width: 21px; height: 21px; }

.link .body { flex: 1; min-width: 0; }
.link .label {
  display: block;
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
}
.link .desc {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link .go {
  flex: 0 0 auto;
  color: var(--text-dim);
  transition: transform .18s ease, color .18s ease;
}
.link:hover .go { transform: translateX(3px); color: var(--accent); }

/* Tautan utama diberi penekanan lebih. */
.link.is-primary {
  background: linear-gradient(135deg, rgba(0, 116, 218, .30), rgba(183, 236, 12, .13));
  border-color: rgba(183, 236, 12, .34);
}
.link.is-primary .ico {
  background: var(--lime);
  border-color: transparent;
  color: var(--ink);
}

/* --- kaki -------------------------------------------------------------- */
.foot {
  margin-top: 32px;
  text-align: center;
  font-size: 12px;
  color: #6d7b99;
  line-height: 1.7;
}
.foot a { color: var(--text-dim); text-decoration: none; }
.foot a:hover { color: var(--accent); }

/* --- animasi masuk bertahap -------------------------------------------- */
.rise {
  opacity: 0;
  transform: translateY(14px);
  animation: rise .55s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; opacity: 1; transform: none; }
  .ticker-track { animation: none; }
  .link { transition: none; }
}

@media (max-width: 380px) {
  body { padding-top: 32px; }
  .link { padding: 13px; gap: 11px; }
  .link .ico { flex-basis: 38px; width: 38px; height: 38px; border-radius: 11px; }
}

/* ---------------------------------------------------------------------
   Varian TBD Partners: lime dimajukan, biru jadi pendukung — supaya
   halaman partner terasa beda tapi tetap satu keluarga dengan induknya.
   --------------------------------------------------------------------- */
body::before { background: radial-gradient(circle, var(--lime-glow), transparent 68%); opacity: .34; }
body::after  { background: radial-gradient(circle, var(--blue-glow), transparent 68%); opacity: .46; }

.avatar { background: conic-gradient(from 30deg, var(--blue), var(--lime), var(--blue)); }
.badge  { color: var(--lime); }

.link.is-primary {
  background: linear-gradient(135deg, rgba(183, 236, 12, .22), rgba(0, 116, 218, .26));
  border-color: rgba(183, 236, 12, .40);
}