/*
 * delilbra.com — bağlantı sayfası. kavamamba.com/va'nın tasarımı:
 * koyu zemin, üstten inen hafif ışıma, gren, markalar kendi renginde ışıyor.
 *
 * ⚠️ Satır içi stil YOK (CSP style-src 'self'). Kart rengi data-id'den,
 * giriş sırası data-sira'dan geliyor.
 * ⚠️ Hover/active `translate`/`scale` ile, `transform` ile değil: giriş
 * animasyonu `both` dolgusuyla transform'u tutuyor.
 */

@font-face {
  font-family: "Archivo Black";
  src: url("/font/ArchivoBlack-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/font/Manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Koyu mavi (Azat 29 Eki: "delilbra mavi seviyo, koyu mavi yapalım") —
     KAVA'nın koyu yeşil zemin + tek parlak vurgusunun mavi karşılığı. */
  --zemin: #050b18;
  --vurgu: #4c9bff;
  --soluk: #9fb0c8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--zemin); }
body {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.sahne {
  position: relative;
  min-height: 100dvh;
  overflow-x: clip;
  color: #fff;
  background:
    radial-gradient(90% 45% at 50% -6%, color-mix(in srgb, var(--vurgu) 16%, transparent), transparent 72%),
    var(--zemin);
}

.sahne::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

.gren {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.kolon {
  position: relative;
  z-index: 1;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 16px calc(28px + env(safe-area-inset-bottom));
}

/* ── Üst ─────────────────────────────────────────────────────────────── */

.ust { position: relative; text-align: center; margin-bottom: 22px; }

.foto {
  position: relative;
  height: clamp(300px, 56vh, 540px);
  margin: 0 -16px;
  overflow: hidden;
  background: radial-gradient(80% 70% at 50% 35%, #142445, var(--zemin) 75%);
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
}

.foto-gorsel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  animation: foto-giris 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Fotoğrafı koyu maviye gömen ton — soft-light (screen açık alanları boyar). */
.foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(5, 11, 24, 0.05), rgba(5, 11, 24, 0.45) 70%, var(--zemin)),
    rgba(40, 110, 255, 0.14);
  mix-blend-mode: soft-light;
}

/* Yazının oturduğu koyu şerit */
.foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, transparent 48%, color-mix(in srgb, var(--zemin) 88%, transparent) 94%);
}

.logo {
  position: relative;
  z-index: 1;
  display: grid;
  margin: -64px 0 0;
  font-family: "Archivo Black", "Manrope", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 13vw, 54px);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-indent: 0.04em;
  animation: logo-giris 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}
.logo > span { grid-area: 1 / 1; }
/* Işıma ayrı bulanık kopyada — keskin yazıya filtre YOK (iOS'ta bulanıklaşıyor). */
.logo-isima {
  color: var(--vurgu);
  filter: blur(10px);
  opacity: 0.3;
  animation: neon 4.5s ease-in-out 1.4s infinite;
}
.logo-net { color: #fff; }

.ust-etiket {
  margin: 10px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--soluk);
  animation: kart-giris 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both;
}

.ust::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: 14px auto 0;
  background: var(--vurgu);
  box-shadow: 0 0 6px color-mix(in srgb, var(--vurgu) 60%, transparent);
  animation: kart-giris 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s both;
}

/* ── Kartlar ─────────────────────────────────────────────────────────── */

.kart[data-id="spotify"] { --renk: #1ed760; }
.kart[data-id="youtube"] { --renk: #ff0033; }
.kart[data-id="instagram"] { --renk: #e4405f; }
.kart[data-id="tiktok"] { --renk: #25f4ee; }
.kart[data-id="x"] { --renk: #e7e9ea; }

[data-sira="0"] { --sira: 0; } [data-sira="1"] { --sira: 1; } [data-sira="2"] { --sira: 2; }
[data-sira="3"] { --sira: 3; } [data-sira="4"] { --sira: 4; } [data-sira="5"] { --sira: 5; }
[data-sira="6"] { --sira: 6; }

.kart {
  --ton: color-mix(in srgb, var(--renk) 18%, transparent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  margin-top: 10px;
  padding: 13px 16px 13px 13px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--renk) 26%, transparent);
  background:
    radial-gradient(120% 170% at 0% 50%, var(--ton) 0%, transparent 58%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008)),
    #070d1b;
  box-shadow:
    0 12px 32px -14px color-mix(in srgb, var(--renk) 45%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.15s ease-out, border-color 0.3s, box-shadow 0.3s;
  animation: kart-giris 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--sira, 0) * 70ms + 320ms);
}
.kart:active { scale: 0.985; }
.kart:focus-visible { outline: 2px solid var(--renk); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .kart:hover {
    translate: 0 -2px;
    border-color: color-mix(in srgb, var(--renk) 60%, transparent);
    box-shadow: 0 18px 44px -14px color-mix(in srgb, var(--renk) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .kart:hover .ok { opacity: 1; translate: 2px -2px; }
  .kart:hover .isima { opacity: 0.95; }
}

.one {
  --ton: color-mix(in srgb, var(--renk) 24%, transparent);
  padding: 17px 18px 17px 16px;
  border-radius: 22px;
  border-color: color-mix(in srgb, var(--renk) 42%, transparent);
  box-shadow:
    0 16px 44px -14px color-mix(in srgb, var(--renk) 55%, transparent),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.one::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.09) 50%, transparent 62%);
  translate: -120% 0;
  animation: parilti 6s ease-in-out 1.8s infinite;
}
.one .simge-yeri { width: 56px; height: 56px; }
.one .ad { font-size: 20px; }

.simge-yeri { position: relative; flex-shrink: 0; width: 48px; height: 48px; }

.isima {
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--renk) 0%, transparent 68%);
  filter: blur(14px);
  opacity: 0.55;
  transition: opacity 0.3s;
  animation: nabiz 3.8s ease-in-out infinite;
  animation-delay: calc(var(--sira, 0) * -0.55s);
}
.kart[data-id="tiktok"] .isima {
  background:
    radial-gradient(circle at 34% 38%, #25f4ee 0%, transparent 58%),
    radial-gradient(circle at 66% 62%, #fe2c55 0%, transparent 58%);
}
.kart[data-id="instagram"] .isima {
  background:
    radial-gradient(circle at 30% 70%, #f3a554 0%, transparent 55%),
    radial-gradient(circle at 70% 30%, #b13bc4 0%, transparent 60%),
    radial-gradient(circle, #f13f79 0%, transparent 68%);
}

.simge {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--renk) 40%, rgba(0, 0, 0, 0.6)));
}

.metin { display: flex; flex: 1; min-width: 0; flex-direction: column; }

.etiket {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--renk) 75%, #fff);
  opacity: 0.85;
}

/* ⚠️ overflow:hidden + dar satır Ü/İ/Ğ'yi kırpar; satır 1.3 + dolgu. */
.ad {
  overflow: hidden;
  padding-block: 1px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.alt {
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--soluk);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ok {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--renk);
  opacity: 0.6;
  transition: translate 0.3s, opacity 0.3s;
}

/* ── Bölümler ────────────────────────────────────────────────────────── */

.bolum { margin-top: 28px; }

.bolum-baslik {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 4px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--soluk);
  animation: kart-giris 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--sira, 0) * 70ms + 320ms);
}
.bolum-baslik::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--vurgu) 55%, transparent), transparent);
}

.alt-bilgi {
  margin-top: 36px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--soluk) 50%, transparent);
}

/* ── Hareket ─────────────────────────────────────────────────────────── */

@keyframes kart-giris {
  from { opacity: 0; transform: translateY(14px) scale(0.98); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes foto-giris { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: scale(1); } }
@keyframes logo-giris { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes neon { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.38; } }
@keyframes nabiz {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 0.72; transform: scale(1.08); }
}
@keyframes parilti { 0% { translate: -120% 0; } 30%, 100% { translate: 120% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}