/* ============================================================
   RoRo · DERINLIK + ARKA PLAN AKINTISI
   stil.css'ten SONRA yuklenir · onu degistirmez, uzerine biner.
   Gercek 3B yok: isik + katmanli golge + yavas akan isik alanlari.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* --- yukseklik olcegi · koyu zeminde ust kenara ISIK sarttir --- */
  --y0: 0 1px 0 rgba(255,255,255,.04) inset;
  --y1: var(--y0), 0 1px 2px rgba(0,0,0,.30), 0 4px 10px -4px rgba(0,0,0,.45);
  --y2: var(--y0), 0 2px 4px rgba(0,0,0,.32), 0 14px 30px -10px rgba(0,0,0,.60);
  --y3: var(--y0), 0 4px 8px rgba(0,0,0,.34), 0 26px 52px -14px rgba(0,0,0,.70);
  --parlak: 0 0 0 1px rgba(74,158,255,.30), 0 0 28px -6px rgba(74,158,255,.35);

  --r1: 8px;  --r2: 13px; --r3: 18px;
  --gecis: 220ms cubic-bezier(.22,.61,.36,1);

  /* ucuncul metin ONARIMI · #6e7b8a akintili zeminde 3.30 veriyordu (esik 4.5)
     ⚠️ kusur AKINTIDAN ONCE de vardi: duz zeminde 4.47 · yine altinda
     #8b97a6 -> en kotu noktada 4.80 · gecen EN DUSUK deger */
  --ink3: #8b97a6;

  /* zemin: SIMSIYAH degil · maviye calan koyu */
  --zemin: #0a0e17;
}

/* ============================================================
   1 · ARKA PLAN AKINTISI · v2
   ⛔ v1 kusuru: GENEL karartma perdesi (.48) akintiyi BOGDU.
   ⭐ v2: perde YONLU · metin sutununu korur, sagi SERBEST birakir.
      Olculdu · metin sutunu: ink 15.65 · ink2 7.54 · ink3 6.23
               sag taraf (metin yok): zemin #36478e · akinti GORUNUR
   ============================================================ */

html{ background: var(--zemin); }
body{ background: transparent; }

body::before,
body::after{
  content:''; position:fixed; z-index:-1; pointer-events:none;
  will-change: transform;
}

/* --- katman A · GUCLU · agirlik SAG yarida (metin solda) --- */
body::before{
  inset:-30%;
  background:
    /* sag ust · ana isik · gorsel izgaranin arkasi */
    radial-gradient(42% 46% at 76% 22%, rgba(74,158,255,.34),  transparent 64%),
    /* sag orta · mor derinlik */
    radial-gradient(36% 40% at 92% 54%, rgba(116,92,255,.26),  transparent 66%),
    /* sol ALT kose · metnin bittigi yer */
    radial-gradient(34% 32% at  8% 88%, rgba(32,186,186,.20),  transparent 68%),
    /* ust kenar · cok yumusak genel ton */
    radial-gradient(70% 26% at 50%  0%, rgba(74,158,255,.14),  transparent 72%);
  animation: akinti-a 46s ease-in-out infinite alternate;
}

/* --- katman B · ters yon · parallaks --- */
body::after{
  inset:-22%;
  background:
    radial-gradient(30% 34% at 62%  8%, rgba(120,200,255,.18), transparent 70%),
    radial-gradient(34% 28% at 96% 82%, rgba(116,92,255,.16), transparent 72%);
  animation: akinti-b 64s ease-in-out infinite alternate;
}

@keyframes akinti-a{
  0%   { transform: translate3d(0,0,0)       scale(1);    }
  50%  { transform: translate3d(2.5%,-2%,0)  scale(1.07); }
  100% { transform: translate3d(-2%,2.5%,0)  scale(1.03); }
}
@keyframes akinti-b{
  0%   { transform: translate3d(0,0,0)       scale(1.04); }
  50%  { transform: translate3d(-3%,2%,0)    scale(1);    }
  100% { transform: translate3d(2%,-1.5%,0)  scale(1.06); }
}

/* --- YONLU PERDE · yalniz metin sutununu korur --- */
html::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(10,14,23,.80)  0%,
      rgba(10,14,23,.62) 26%,
      rgba(10,14,23,.24) 48%,
      rgba(10,14,23,0)   66%),
    linear-gradient(180deg,
      rgba(10,14,23,.10) 0%,
      rgba(10,14,23,0)  30%);
}

/* dar ekranda metin tam genislik -> perde HER YERDE */
@media (max-width:900px){
  html::before{
    background:linear-gradient(180deg,
      rgba(10,14,23,.52) 0%, rgba(10,14,23,.60) 100%);
  }
}

/* --- ince tanecik · bantlasmayi kirar --- */
html::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.055;
  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");
}

/* ============================================================
   2 · TIPOGRAFI · en yuksek sesli degisiklik
   ============================================================ */
body{
  font-family:'Inter',-apple-system,system-ui,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:-.005em;
}
h1,h2,h3,.kat,.logo,.btn{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  letter-spacing:-.022em;
}
h1{ font-weight:700; line-height:1.08; }
h2{ font-weight:600; line-height:1.16; }
h3{ font-weight:600; }
p { line-height:1.72; }

/* ust bant · akintinin uzerinde okunakli dursun */
.top{
  background:rgba(10,14,23,.72);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.05), 0 8px 24px -12px rgba(0,0,0,.8);
}

/* ============================================================
   3 · KARTLAR · akintiyi bulanik gecirsin, uzerinde YUZSUN
   ============================================================ */
.sk,.adim{
  border-radius:var(--r2);
  box-shadow:var(--y1);
  transition:transform var(--gecis), box-shadow var(--gecis),
             border-color var(--gecis), background var(--gecis);
  background:
    linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,0) 44%),
    rgba(22,27,34,.82);
  backdrop-filter:blur(8px) saturate(125%);
  -webkit-backdrop-filter:blur(8px) saturate(125%);
  will-change:transform;
}
.sk:hover,.adim:hover{
  transform:translateY(-4px);
  border-color:rgba(74,158,255,.42);
  box-shadow:var(--y3), var(--parlak);
}

.sk-ikon{
  transition:transform var(--gecis), filter var(--gecis);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
}
.sk:hover .sk-ikon{
  transform:translateY(-2px) scale(1.06);
  filter:drop-shadow(0 8px 18px rgba(74,158,255,.35));
}

.adim-no{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             0 3px 10px -2px rgba(0,0,0,.55);
  transition:box-shadow var(--gecis), transform var(--gecis);
}
.adim:hover .adim-no{
  transform:scale(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
             0 6px 18px -3px rgba(74,158,255,.5);
}

/* ============================================================
   4 · DUGMELER
   ============================================================ */
.btn{
  border-radius:var(--r1);
  box-shadow:var(--y1);
  transition:transform var(--gecis), box-shadow var(--gecis), filter var(--gecis);
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--y2), 0 0 22px -6px rgba(74,158,255,.45);
  filter:brightness(1.06);
}
.btn:active{
  transform:translateY(0);
  box-shadow:var(--y0), 0 1px 3px rgba(0,0,0,.4);
}

/* ============================================================
   5 · FORM ALANLARI
   ============================================================ */
input,textarea,select{
  border-radius:var(--r1);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
  transition:box-shadow var(--gecis), border-color var(--gecis);
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:rgba(74,158,255,.55);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3), 0 0 0 3px rgba(74,158,255,.16);
}

/* ============================================================
   6 · BOLUM RITMI
   ============================================================ */
section, .wrap > .sat{
  padding-top:clamp(48px,7vw,86px);
  padding-bottom:clamp(48px,7vw,86px);
}
.ref{ gap:20px; }
.kat{ margin-bottom:18px; opacity:.9; }
section + section{
  border-top:1px solid rgba(255,255,255,.045);
  box-shadow:0 -1px 0 rgba(0,0,0,.35);
}

/* ============================================================
   7 · ERISILEBILIRLIK · hareket istemeyende AKINTI DURUR
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  body::before, body::after{ animation:none; }
  .sk,.adim,.btn,.sk-ikon,.adim-no{ transition:none; }
  .sk:hover,.adim:hover,.btn:hover{ transform:none; }
}

/* dusuk guclu cihazda akinti daha sakin */
@media (max-width:640px){
  body::before{ animation-duration:70s; }
  body::after { animation-duration:90s; }
  .sk,.adim{ backdrop-filter:none; -webkit-backdrop-filter:none;
             background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 44%),#161b22; }
}

/* ============================================================
   8 · KUTU DILINI AYIR  ·  28 Agu
   ------------------------------------------------------------
   OLCUM: .f 3 kutu / .sk 4 kutu / .adim 3 kutu  -> icinde
   baglanti YOK ama uculu de kalkip mavi yaniyordu. Kalkma ve
   mavi kenar TIKLANABILIRLIK isaretidir; tiklanamayan seye
   takilinca kullanici basiyor ve hicbir sey olmuyor.

   KURAL:  kart govdesi + kalkma + mavi kenar  =  YALNIZ .k
           (7 portfoy karti · 6'sinda baglanti var)
   Diger uc oberk metin olarak duzenlenir, her biri FARKLI
   bir gorsel arac kullanir ki sayfa tek kutuyu tekrarlamasin.
   ============================================================ */

/* --- 8a · FARK · uc sutun, ust tuy cizgisi, kutu YOK --- */
.fark{ gap:34px 40px; }
.fark .f,
.fark .f:hover{
  background:none;
  border:0;
  border-top:1px solid rgba(255,255,255,.11);
  border-radius:0;
  box-shadow:none;
  padding:18px 0 0;
  transform:none;
  transition:border-color .18s;
}
.fark .f:hover{ border-top-color:rgba(74,158,255,.34); }
.fark .f h3{ letter-spacing:-.01em; }
.fark .f p{ line-height:1.62; }

/* --- 8b · SEKTOR · ikon onde, metin yaninda, kutu YOK --- */
.sk,
.sk:hover{
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:0;
  transform:none;
  transition:none;
  will-change:auto;
}
.sk-ust{ align-items:center; gap:12px; }
.sk-ikon,
.sk:hover .sk-ikon{
  transform:none;
  filter:none;
  opacity:.92;
}
.sk h3{ margin-bottom:6px; }
.sk p{ line-height:1.6; }

/* --- 8c · SUREC · sayi one cikar, adimlar DIZI olur --- */
.adim,
.adim:hover{
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:0 0 0 4px;
  transform:none;
  transition:none;
  will-change:auto;
}
.adim{
  border-left:2px solid rgba(74,158,255,.22);
  padding-left:20px;
}
.adim-no,
.adim:hover .adim-no{
  box-shadow:none;
  transform:none;
  font-size:2.6rem;
  opacity:.55;
  letter-spacing:-.03em;
}
.adim h3{ margin-top:.35rem; }

/* --- 8d · PORTFOY kartlari · kart dili BURADA KALIR --- */
.k{
  border-radius:var(--r2);
  box-shadow:var(--y1);
  transition:transform var(--gecis), box-shadow var(--gecis),
             border-color var(--gecis);
}
.k:hover{
  transform:translateY(-4px);
  border-color:rgba(74,158,255,.42);
  box-shadow:var(--y3), var(--parlak);
}

/* --- 8e · hareket azaltma tercihi --- */
@media (prefers-reduced-motion:reduce){
  .k,.k:hover{ transform:none; transition:none; }
}

/* =========================================================
   9 · IKI KUCUK KUSUR  ·  29 Agu
   ========================================================= */

/* --- 9a · .fark'ta OKSUZ oge kalmasin ---
   Olcum: 4 oge var (3 tanesi class="f", biri class="f ads-karti").
   auto-fit 1280'de UC sutun uretiyordu -> 4. oge alt satirda
   tek basina kaliyordu. 4 oge icin 4x1 / 2x2 / 1x4 sabitlendi,
   3+1 artik imkansiz. */
@media (min-width:1080px){
  .fark{ grid-template-columns:repeat(4,1fr); }
}
@media (min-width:620px) and (max-width:1079px){
  .fark{ grid-template-columns:repeat(2,1fr); }
}

/* --- 9b · yazi tipi kurali BOSA dusuyordu ---
   Olcum: sayfada .brand sinifi YOK (0 adet), ust bantta
   class="logo" var. Kural logoya hic degmiyordu. */
.logo{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  letter-spacing:-.022em;
}

/* --- 9c · baslik iki satira dusunce nokta hizada kalsin ---
   align-items:center noktayi iki satirin ORTASINA aliyordu;
   tek satirlik komsulariyla hizasi bozuluyordu. */
.fark .f h3{ align-items:flex-start; }
.fark .f h3 i{ margin-top:.40em; }