/* ===================================================================
   Linktree — Herkese Açık Sayfa  (Apple tarzı tasarım)
   =================================================================== */

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

:root {
  --accent: #0a84ff;
  --radius: 18px;
  --max-width: 580px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
}

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

body {
  font-family: var(--font);
  min-height: 100vh;
  min-height: 100dvh;
  color: #1d1d1f;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #f5f5f7;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 22px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Profil ---------- */
.profile { text-align: center; margin-bottom: 34px; animation: fadeUp .6s ease both; }

.avatar {
  width: 104px; height: 104px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  border: 3px solid rgba(255,255,255,.7);
}
.avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), #5e5ce6);
  color: #fff; font-size: 42px; font-weight: 600;
  text-transform: uppercase;
}

.name {
  margin-top: 18px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.bio {
  margin-top: 8px;
  font-size: 15.5px;
  color: #6e6e73;
  max-width: 440px;
}

/* ---------- Blok kapsayıcı ---------- */
.blocks {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.block { animation: fadeUp .55s ease both; }
.blocks > .block:nth-child(1){animation-delay:.04s}
.blocks > .block:nth-child(2){animation-delay:.08s}
.blocks > .block:nth-child(3){animation-delay:.12s}
.blocks > .block:nth-child(4){animation-delay:.16s}
.blocks > .block:nth-child(5){animation-delay:.20s}
.blocks > .block:nth-child(n+6){animation-delay:.24s}

/* ---------- Link butonu ---------- */
.link-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
  background: #ffffff;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  font-weight: 550;
  font-size: 16px;
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .18s;
  border: 1px solid rgba(0,0,0,.04);
}
.link-block:hover { transform: translateY(-2px) scale(1.012); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.link-block:active { transform: scale(.985); }
.link-icon { font-size: 20px; line-height: 1; }
.link-title { flex: 1; text-align: center; }
.link-arrow { opacity: .35; font-size: 15px; transition: opacity .2s, transform .2s; }
.link-block:hover .link-arrow { opacity: .7; transform: translate(2px,-2px); }

/* ---------- Buton şekilleri ---------- */
.btn-pill .link-block { border-radius: 999px; }
.btn-square .link-block { border-radius: 8px; }

/* ---------- Başlık / Metin ---------- */
.heading-block {
  font-size: 19px; font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
  margin: 14px 0 2px;
}
.text-block {
  text-align: center;
  font-size: 15px;
  color: #6e6e73;
  padding: 0 6px;
}

/* ---------- Görsel ---------- */
.image-block { text-align: center; }
.img-content {
  width: 100%;
  border-radius: var(--radius);
  display: block;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.caption { margin-top: 8px; font-size: 13.5px; color: #6e6e73; text-align: center; }

/* ---------- Video / Harita ---------- */
.video-frame, .map-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
  background: #000;
}
.map-frame { padding-top: 62%; background:#e8e8ed; }
.video-frame iframe, .map-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ---------- Boş durum / footer ---------- */
.empty-state { text-align: center; color: #86868b; padding: 40px 0; font-size: 15px; }
.page-footer { margin-top: 44px; }
.admin-link {
  font-size: 12.5px; color: #aeaeb2; text-decoration: none;
  padding: 6px 14px; border-radius: 999px;
  transition: background .2s, color .2s;
}
.admin-link:hover { background: rgba(0,0,0,.05); color: #6e6e73; }

/* ===================================================================
   MODELLER (Temalar)
   =================================================================== */

/* --- Buzlu Cam --- */
.model-glass .link-block,
.model-glass .video-frame,
.model-glass .map-frame,
.model-glass .img-content {
  background: rgba(255,255,255,.55);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255,255,255,.6);
}
.model-glass .avatar { border-color: rgba(255,255,255,.5); }

/* --- Karanlık --- */
.model-dark { color: #f5f5f7; }
.model-dark .bio, .model-dark .text-block, .model-dark .caption { color: #a1a1a6; }
.model-dark .link-block {
  background: #1c1c1e;
  border: 1px solid rgba(255,255,255,.08);
  color: #f5f5f7;
  box-shadow: 0 2px 18px rgba(0,0,0,.4);
}
.model-dark .link-block:hover { box-shadow: 0 8px 26px rgba(0,0,0,.55); }
.model-dark .admin-link:hover { background: rgba(255,255,255,.08); color:#d1d1d6; }
.model-dark .avatar { border-color: rgba(255,255,255,.12); }

/* --- Gün Batımı --- */
.model-sunset .link-block {
  background: rgba(255,255,255,.85);
  border: none;
  box-shadow: 0 6px 22px rgba(255,94,98,.18);
}
.model-sunset .name { color:#3a1f2b; }

/* --- Monokrom --- */
.model-mono { color:#111; }
.model-mono .link-block {
  background: #111;
  color: #fff;
  border: none;
  box-shadow: none;
}
.model-mono .link-block:hover { background:#000; }
.model-mono .link-arrow { color:#fff; }
.model-mono .avatar-placeholder { background:#111; }

/* ---------- Animasyon ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@media (max-width: 480px) {
  .page { padding: 40px 18px 70px; }
  .name { font-size: 23px; }
}