/* ============================================================
   dinle.link — Profil (link-in-bio) görsel sistemi
   Hem /[kullaniciadi] profil sayfasında hem de /hesap editör
   önizlemesinde kullanılır. Tek kaynak — drift yok.
   Marka tokenları landing index.html ile birebir aynı.
   ============================================================ */
/* Kendi kendine yeterli reset — standalone profil sayfasında box-sizing
   garantisi (yoksa width:100%+padding butonları taşar = yatay kayma). */
.dl-bg, .dl-bg *, .dl-bg *::before, .dl-bg *::after{box-sizing:border-box}
.dl-bg img{max-width:100%}
:root{
  --primary:#7c3aed;
  --primary-700:#6d28d9;
  --accent:#ec4899;
  --accent-2:#f59e0b;
  --ink:#0f172a;
  --ink-2:#475569;
  --muted:#94a3b8;
  --line:#e2e8f0;
  --radius:16px;
  --radius-lg:24px;
  --radius-xl:32px;
  --brand-grad:linear-gradient(135deg,#7c3aed 0%,#ec4899 50%,#f59e0b 100%);
}

/* Verified rozet — landing'deki dv-icon ile aynı SVG (tek kaynak).
   Marka gradyanı (mor→pembe→amber) + onay tiki. Twitter mavisi DEĞİL. */
.dv-icon{display:inline-flex;width:18px;height:18px;vertical-align:middle;flex-shrink:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237c3aed'/%3E%3Cstop offset='.5' stop-color='%23ec4899'/%3E%3Cstop offset='1' stop-color='%23f59e0b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' stroke='white' stroke-width='0.7' stroke-linejoin='round' d='M12 .5 14.33 3.31 17.75 2.04 18.36 5.64 21.96 6.25 20.69 9.67 23.5 12 20.69 14.33 21.96 17.75 18.36 18.36 17.75 21.96 14.33 20.69 12 23.5 9.67 20.69 6.25 21.96 5.64 18.36 2.04 17.75 3.31 14.33 .5 12 3.31 9.67 2.04 6.25 5.64 5.64 6.25 2.04 9.67 3.31Z'/%3E%3Cpath fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M7.5 12.5 10.5 15.5 16.5 8.5'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;background-position:center}
.dv-sm{width:15px;height:15px}
.dv-lg{width:26px;height:26px}

/* ---------- Sahne ---------- */
.dl-bg{
  min-height:100%;width:100%;max-width:100%;overflow-x:hidden;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  background:var(--dl-bg, var(--brand-grad));
  background-size:cover;background-position:center;
  display:flex;flex-direction:column;align-items:center;
  padding:56px 20px 36px;
}
.dl-bg a{text-decoration:none}
.dl-card{
  width:100%;max-width:520px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  animation:dl-rise .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes dl-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .dl-card{animation:none}
  .dl-link{transition:none !important}
}

/* ---------- Avatar ---------- */
.dl-avatar-wrap{position:relative;width:116px;height:116px;margin-bottom:18px}
.dl-avatar{
  width:116px;height:116px;border-radius:50%;object-fit:cover;
  border:3px solid rgba(255,255,255,.85);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.55);
  background:var(--brand-grad);
}
.dl-avatar-fallback{display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:42px;letter-spacing:-.02em}
.dl-badge{
  position:absolute;right:2px;bottom:2px;width:34px;height:34px;
  background-color:#fff;border-radius:50%;padding:5px;
  box-shadow:0 4px 12px rgba(0,0,0,.28);
}

/* ---------- Başlık + bio ---------- */
.dl-name{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Sora','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.2;margin-bottom:8px;
}
.dl-handle{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;
  font-size:13.5px;font-weight:600;opacity:.8;color:inherit;cursor:pointer;
  padding:5px 12px;border-radius:999px;border:0;background:transparent;
  transition:background .15s,opacity .15s;
}
.dl-handle:hover{opacity:1;background:rgba(127,127,127,.18)}
.dl-handle.copied{opacity:1}
.dl-handle-ic{opacity:.6}
.dl-handle:hover .dl-handle-ic{opacity:.95}
.dl-bio{
  font-size:15px;line-height:1.6;max-width:42ch;margin:0 auto 26px;opacity:.92;
  white-space:pre-line;
}

/* ---------- Link butonları ---------- */
.dl-links{display:flex;flex-direction:column;gap:13px;width:100%;margin-bottom:30px}
.dl-link{
  position:relative;display:flex;align-items:center;gap:14px;
  width:100%;padding:15px 18px;border-radius:var(--radius);
  font-size:15.5px;font-weight:600;
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,background .18s;
  will-change:transform;
}
.dl-link:hover{transform:translateY(-2px)}
.dl-link:active{transform:translateY(0)}
.dl-link-ic{width:26px;height:26px;flex-shrink:0;border-radius:6px;object-fit:contain}
.dl-link-ic.is-mono{padding:1px}
.dl-link-label{flex:1;text-align:center;padding-right:26px}
.dl-link-arrow{position:absolute;right:18px;width:18px;height:18px;opacity:.45;transition:transform .18s,opacity .18s}
.dl-link:hover .dl-link-arrow{transform:translateX(3px);opacity:.8}

/* ---------- YouTube önizleme ---------- */
.dl-yt{width:100%;margin:0 0 30px;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6);background:#000}
.dl-yt-frame{position:relative;width:100%;aspect-ratio:16/9}
.dl-yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Editör önizlemesi: gerçek iframe yerine kapak + oynat butonu (canlı sayfada iframe kullanılır) */
.dl-yt-thumb{background-size:cover;background-position:center;background-color:#000;
  display:flex;align-items:center;justify-content:center}
.dl-yt-thumb .dl-yt-play{filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));opacity:.92;
  transition:opacity .15s ease,transform .15s ease}
.dl-yt-thumb:hover .dl-yt-play{opacity:1;transform:scale(1.06)}
.dl-yt-thumb .dl-yt-play svg{display:block}
.dl-section-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  opacity:.6;margin:0 0 12px;align-self:flex-start}

/* ---------- Footer marka ---------- */
.dl-foot{margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:10px}
.dl-foot-cta{
  display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;
  font-size:13.5px;font-weight:700;
  background:#fff;color:var(--ink);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.5);transition:transform .18s,box-shadow .18s;
}
.dl-foot-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.55)}
.dl-foot-cta .dl-wordmark{font-weight:800;background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.dl-foot-note{font-size:11.5px;opacity:.55}

/* ============================================================
   TEMA: metin kontrastı (arka plana göre)
   .is-ondark  -> koyu arka plan, açık (beyaz) metin
   .is-onlight -> açık arka plan, koyu metin
   ============================================================ */
.dl-bg.is-ondark{color:#fff}
.dl-bg.is-ondark .dl-link{
  background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 24px -16px rgba(0,0,0,.6);
}
.dl-bg.is-ondark .dl-link:hover{background:rgba(255,255,255,.2)}
.dl-bg.is-ondark .dl-link-arrow{filter:invert(1)}

.dl-bg.is-onlight{color:var(--ink)}
.dl-bg.is-onlight .dl-handle{opacity:.6}
.dl-bg.is-onlight .dl-bio{opacity:1;color:var(--ink-2)}
.dl-bg.is-onlight .dl-link{
  background:#fff;color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 10px 30px -18px rgba(15,23,42,.45),0 1px 2px rgba(15,23,42,.05);
}
.dl-bg.is-onlight .dl-link:hover{box-shadow:0 16px 40px -18px rgba(15,23,42,.5)}
.dl-bg.is-onlight .dl-avatar{border-color:#fff}

@media (max-width:420px){
  .dl-bg{padding:40px 16px 30px}
  .dl-name{font-size:22px}
}

/* ============================================================
   Kapak görseli · Tür etiketleri · YouTube abone · Tema
   ============================================================ */

/* Kapak görseli — SADECE mobilde (+ editör mobil önizlemesi .dl-fm):
   tam sayfa genişliğinde, en üstte arkada; profil fotoğrafının yarısına kadar iner */
.dl-bg{position:relative}
.dl-card{position:relative;z-index:1}
.dl-cover{display:none;position:absolute;top:0;left:0;width:100%;height:190px;z-index:0;
  background-size:cover;background-position:center}
.dl-cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;
  background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.28))}
/* gerçek mobil */
@media (max-width:560px){
  .dl-bg.has-cover{padding-top:0}
  .dl-bg.has-cover .dl-cover{display:block}
  .dl-bg.has-cover .dl-card{padding-top:132px}
}
/* editör mobil önizlemesi (masaüstü viewport olsa da) */
.dl-bg.dl-fm.has-cover{padding-top:0}
.dl-bg.dl-fm.has-cover .dl-cover{display:block}
.dl-bg.dl-fm.has-cover .dl-card{padding-top:132px}

/* Tür etiketleri (reklam segmentasyonu + SEO) */
.dl-genres{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:-10px 0 24px}
.dl-genre{font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px}
.dl-bg.is-ondark .dl-genre{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.14)}
.dl-bg.is-onlight .dl-genre{background:rgba(15,23,42,.06);color:var(--ink-2);border:1px solid rgba(15,23,42,.08)}

/* YouTube abone ol butonu (marka kırmızısı — temadan bağımsız) */
.dl-sub{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 18px;
  border-radius:var(--radius);background:#FF0000;color:#fff;font-weight:700;font-size:15px;margin-bottom:30px;
  box-shadow:0 12px 30px -12px rgba(255,0,0,.55);transition:transform .18s,box-shadow .18s;border:0}
.dl-sub:hover{transform:translateY(-2px);box-shadow:0 18px 42px -12px rgba(255,0,0,.7)}
.dl-sub svg{flex-shrink:0}

/* Tema — köşe yuvarlaklığı */
.dl-bg.shape-pill .dl-link,.dl-bg.shape-pill .dl-sub{border-radius:999px}
.dl-bg.shape-sharp .dl-link,.dl-bg.shape-sharp .dl-sub{border-radius:8px}

/* Tema — buton stili (link butonları) */
.dl-bg.btn-solid.is-ondark .dl-link{background:#fff;color:var(--ink);border-color:#fff;backdrop-filter:none}
.dl-bg.btn-solid.is-ondark .dl-link .dl-link-arrow{filter:none}
.dl-bg.btn-outline.is-ondark .dl-link{background:transparent;border:1.5px solid rgba(255,255,255,.55);backdrop-filter:none;box-shadow:none}
.dl-bg.btn-outline.is-onlight .dl-link{background:transparent;border:1.5px solid rgba(15,23,42,.22);box-shadow:none}
.dl-bg.btn-glass.is-onlight .dl-link{background:rgba(255,255,255,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ============================================================
   Sanatçının Seçimi (Spotify "Artist Pick" benzeri)
   ============================================================ */
.dl-pick{width:100%;margin:4px 0 24px}
.dl-pick-label{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;opacity:.7;margin-bottom:11px}
.dl-pick-card{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:var(--radius-lg);
  overflow:hidden;background-size:cover;background-position:center;background-color:#0b0b12;
  box-shadow:0 18px 46px -18px rgba(0,0,0,.6);transition:transform .2s,box-shadow .2s}
.dl-pick-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.04) 38%,rgba(0,0,0,.58))}
.dl-pick-card:hover{transform:translateY(-2px);box-shadow:0 26px 56px -18px rgba(0,0,0,.7)}
.dl-pick-bubble{position:absolute;top:13px;left:13px;z-index:1;display:inline-flex;align-items:center;gap:8px;
  max-width:82%;padding:5px 14px 5px 5px;background:#fff;color:#0f172a;border-radius:999px;
  font-size:13px;font-weight:600;box-shadow:0 6px 18px -6px rgba(0,0,0,.45)}
.dl-pick-bubble img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0}
.dl-pick-bubble span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-pick-meta{position:absolute;left:16px;bottom:14px;z-index:1;display:flex;flex-direction:column;
  color:#fff;text-align:left;text-shadow:0 1px 5px rgba(0,0,0,.55)}
.dl-pick-meta b{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.dl-pick-meta span{font-size:12.5px;opacity:.88;margin-top:1px}

/* ============================================================
   Sosyal medya — yuvarlak marka logoları
   ============================================================ */
/* Sosyal ikonlar: en fazla 5 hesap → daima tek satır. Dar ekranda taşmak yerine
   eşit oranda küçülür (flex:1 + max-width), aspect-ratio:1 ile yuvarlak kalır. */
.dl-socials{display:flex;flex-wrap:nowrap;justify-content:center;gap:10px;width:100%;margin:0 0 30px}
.dl-social{position:relative;flex:1 1 0;width:46px;max-width:46px;aspect-ratio:1;height:auto;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand-grad);box-shadow:0 8px 20px -10px rgba(0,0,0,.55);transition:transform .18s,box-shadow .18s}
.dl-social:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 30px -10px rgba(0,0,0,.65)}
.dl-social svg{display:block}
/* ekran-okuyucu / crawler için görünmez SEO metni */
.dl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   Reklam alanı — profil-bağımsız üst banner.
   Google AdSense standart ölçüleri: 320x50 (mobil leaderboard),
   728x90 (leaderboard), 970x90 (large leaderboard).
   ============================================================ */
.dl-ad{position:relative;width:100%;display:flex;align-items:center;justify-content:center;
  background:#0b0b12;padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.08);z-index:6}
.dl-ad-slot{width:320px;height:50px;overflow:hidden;border-radius:6px;background:#fff;flex-shrink:0}
@media (min-width:728px){.dl-ad-slot{width:728px;height:90px}}
@media (min-width:992px){.dl-ad-slot{width:970px;height:90px}}
.dl-ad-slot .dl-ad-link{display:block;width:100%;height:100%}
.dl-ad-slot img{width:100%;height:100%;object-fit:cover;display:block}
.dl-ad-tag{position:absolute;top:4px;left:9px;font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
  font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.55)}