/* ═══════════════════════════════════════════════════════════════
   Geçici sayfaların ortak stili — v2 tasarım dilinin özeti.

   Token değerleri v2'nin `src/styles/global.css` dosyasından BİREBİR
   alındı; burada Tailwind yok, o yüzden elle yazıldı. v2'de bir renk
   değişirse buraya da taşınmalı.

   Sayfa v2'nin hero'suyla aynı yüzeyi kullanıyor: koyu lacivert
   gradyan + ızgara + üç yavaş ışık kütlesi.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/jakarta-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/jakarta-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --kagit:#f5f8fd; --kagit-2:#ffffff;
  --murekkep:#0a1020; --murekkep-2:#111a2e;
  --mavi:#1d4ed8; --mavi-acik:#3b82f6; --mavi-parlak:#60a5fa; --mavi-metin:#8fb4f5;
  --mor:#a78bfa; --yesil:#34d399; --kehribar:#fbbf24;
  --beyaz-yazi:#e8eefc; --ikincil:#9fb3d9;
  --cizgi-koyu:rgba(255,255,255,.11);
  --kap:78rem;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,monospace;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}

html{
  background:var(--murekkep);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100svh;
  background:linear-gradient(165deg,var(--murekkep-2) 0%,var(--murekkep) 100%);
  color:var(--beyaz-yazi);
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* Üstte ince mavi ışık çizgisi — v2'de `.yzy-koyu::before`. */
body::before{
  content:"";
  position:fixed;inset-inline:0;top:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--mavi-acik),transparent);
  opacity:.55;
}

/* ── Zemin katmanları ───────────────────────────────────────── */

.izgara{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:3.25rem 3.25rem;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 40%,#000 25%,transparent 100%);
          mask-image:radial-gradient(ellipse 75% 65% at 50% 40%,#000 25%,transparent 100%);
}

.isiklar{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.isik{position:absolute;display:block;border-radius:50%;filter:blur(90px);will-change:transform}
.isik-1{
  width:34rem;height:34rem;top:-12rem;left:-10rem;
  background:radial-gradient(circle,rgba(59,130,246,.34),transparent 68%);
  animation:suz-1 36s ease-in-out infinite alternate;
}
.isik-2{
  width:28rem;height:28rem;top:4rem;right:-9rem;
  background:radial-gradient(circle,rgba(124,58,237,.26),transparent 68%);
  animation:suz-2 44s ease-in-out infinite alternate;
}
.isik-3{
  width:22rem;height:22rem;bottom:-10rem;left:38%;
  background:radial-gradient(circle,rgba(8,145,178,.22),transparent 70%);
  animation:suz-3 52s ease-in-out infinite alternate;
}
@keyframes suz-1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6rem,3rem,0) scale(1.15)}}
@keyframes suz-2{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-5rem,5rem,0) scale(.92)}}
@keyframes suz-3{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(4rem,-4rem,0) scale(1.12)}}

/* ── Yerleşim ───────────────────────────────────────────────── */

.kap{width:100%;max-width:var(--kap);margin-inline:auto;padding-inline:1.25rem}
@media (min-width:48rem){.kap{padding-inline:2rem}}

.ust{position:relative;z-index:1;padding-block:1.15rem}
.icerik{position:relative;z-index:1;flex:1;display:flex;align-items:center;padding-block:2.5rem 3.5rem}
.dip{position:relative;z-index:1;padding-block:1.5rem 2rem;border-top:1px solid var(--cizgi-koyu)}

/* ── Marka ──────────────────────────────────────────────────── */

.marka{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.marka svg{display:block;border-radius:.5rem;flex:none}
.marka-ad{font-weight:800;letter-spacing:-.032em;font-size:1.02rem;color:#fff}

/* ── Tipografi ──────────────────────────────────────────────── */

.kunye{
  font-family:var(--mono);
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mavi-parlak);
  margin:0;
}

h1{
  font-weight:800;letter-spacing:-.032em;
  font-size:clamp(2rem,6.2vw,3.4rem);line-height:1.07;
  margin:1.25rem 0 0;color:#fff;text-wrap:balance;
}
h1 .vurgu{color:var(--mavi-metin)}

.giris{
  margin:1.5rem 0 0;max-width:34rem;
  font-size:1.05rem;line-height:1.65;color:var(--ikincil);text-wrap:pretty;
}

/* ── Durum rozeti ───────────────────────────────────────────── */

.rozet{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid var(--cizgi-koyu);border-radius:999px;
  background:rgba(255,255,255,.045);
  padding:.4rem .9rem;margin:0 0 1.4rem;
  font-size:.78rem;font-weight:600;color:var(--ikincil);
}
.nokta{
  width:.4rem;height:.4rem;border-radius:50%;background:var(--mavi-parlak);flex:none;
  box-shadow:0 0 0 0 rgba(96,165,250,.55);
  animation:nabiz 2.4s ease-out infinite;
}
@keyframes nabiz{
  0%{box-shadow:0 0 0 0 rgba(96,165,250,.55)}
  70%{box-shadow:0 0 0 .5rem transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* ── Kart ───────────────────────────────────────────────────── */

.kart{
  background:rgba(255,255,255,.045);
  border:1px solid var(--cizgi-koyu);
  border-radius:1rem;
  padding:1.35rem 1.5rem;
}

/* ── Düğmeler ───────────────────────────────────────────────── */

.dugmeler{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.dugme{
  display:inline-flex;align-items:center;gap:.55rem;
  border-radius:.65rem;padding:.8rem 1.35rem;
  font-size:.925rem;font-weight:600;text-decoration:none;
  transition:transform .2s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease;
}
.dugme-ana{
  background:var(--mavi);color:#fff;
  box-shadow:0 1px 2px rgba(29,78,216,.28),0 10px 22px -8px rgba(29,78,216,.5);
}
.dugme-cizgi{border:1.5px solid rgba(255,255,255,.22);color:var(--beyaz-yazi);background:transparent}
@media (hover:hover){
  .dugme-ana:hover{background:#1a44c2;transform:translateY(-2px);box-shadow:0 2px 4px rgba(29,78,216,.3),0 16px 30px -10px rgba(29,78,216,.6)}
  .dugme-cizgi:hover{border-color:var(--mavi-parlak);color:var(--mavi-parlak);transform:translateY(-2px)}
}

/* ── Bağlantılar ────────────────────────────────────────────── */

.baglanti{
  color:var(--ikincil);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .3s ease,color .25s ease;
}
@media (hover:hover){.baglanti:hover{background-size:100% 1.5px;color:#fff}}

:focus-visible{outline:2.5px solid var(--mavi-parlak);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  .isik,.nokta{animation:none}
  .dugme{transition:none}
}