/* ============================================================
   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; }


/* ═══ 2 Eyl · hero ulke seridi · uc soz seridi · katman alt cumlesi ═══
   .cta zaten display:flex;flex-wrap:wrap oldugu icin .hero-serit
   flex-basis:100% ile dugmelerin ALTINA duser. */
.hero-ulke{display:flex;gap:20px;flex-wrap:wrap;margin:-16px 0 26px;font-size:.93rem;color:var(--ink2)}
.hero-ulke span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.hero p.hero-serit{max-width:100%}
.hero-serit{flex:0 0 100%;margin:18px 0 0;font-size:.9rem;color:var(--ink2)}
.kat-alt{color:var(--ink2);margin:-12px 0 22px;max-width:62ch;font-size:.98rem}
@media(max-width:600px){
  .hero-ulke{gap:12px 16px;font-size:.88rem;margin:-10px 0 22px}
  .hero-serit{font-size:.85rem;margin-top:14px}
}

/* ═══ 2 Eyl · YERLESIM ONARIMI ═══
   1 · ulke seridi kardeslerinin order'i var (h1=1 cta=2 p=3);
       order verilmeyince 0 sayilip en uste firliyordu.
   2 · 820px altinda hero metni %50'ye sikisiyordu (stil.css:198,
       18 Agu'dan beri). Mozaik orada zaten tam genislige gecip arka
       plana dustugu icin metin %100 olmali. ⛔ stil.css degistirilmedi. */
.hero-ulke{order:1}

@media(max-width:820px){
  .hero .wrap>*:not(.hero-mozaik){max-width:100%}
  .hero h1{max-width:100%}
  .hero p{max-width:100%}
}

/* ═══ 2 Eyl · MENU TASMASI ═══
   stil.css:8  .top .wrap{height:58px} sabit. 820px altinda menu
   ikinci satira geciyor (84px) ama kutu buyumuyor ve hero basliginin
   uzerine biniyordu. Mobilde yukseklik serbest. */
@media(max-width:820px){
  .top .wrap{height:auto;min-height:58px;padding-block:9px;row-gap:8px}
}

/* 2 Eyl · TEK SATIR DENEMESI · menu iki satirda 155px yapiskan baslik
   yapiyordu. Daha dar bosluk + kaydirilabilir tek satir. */
@media(max-width:820px){
  .top .ana-menu{flex-wrap:nowrap;overflow-x:auto;gap:.15rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .top .ana-menu::-webkit-scrollbar{display:none}
  .top .ana-menu a{padding:.4rem .5rem;font-size:.84rem;white-space:nowrap}
  .top .ana-menu .menu-cta{padding:.4rem .7rem}
}

/* 2 Eyl · CTA SAGDA SABIT · menu 382px istiyor, 390px'te 346px yer var.
   Kesilen hep CTA oluyordu. Baglantilar kayar, CTA sag kenarda durur. */
@media(max-width:820px){
  .top .ana-menu{position:relative;padding-right:0}
  .top .ana-menu a{padding:.36rem .42rem;font-size:.82rem}
  .top .ana-menu .menu-cta{position:sticky;right:0;flex:0 0 auto;
    padding:.4rem .66rem;
    box-shadow:-14px 0 14px -8px rgba(13,17,23,.96)}
}


/* =========================================================================
   2 Eyl · HERO ARKA PLAN SIMGESI · "site kuruyoruz"
   Turan istegi: gecisle birlikte arka planda profesyonel donsun.
   Simge = tarayici penceresi + </> ; iki halka TERS yonde doner,
   cekirdek (pencere) dik durur, okunur kalir.

   KATMAN · OLCULDU (stil.css:169-188), tahmin degil:
     .hero::before  z0  doku.webp        .hero-mozaik  z1  (wrap ICINDE)
     .hero::after   z1  perde            .hero .wrap   z2  icerik
   ⛔ TUZAK: perde sol %42'de TAM OPAK (var(--bg) 0%..42%). Simge
      perdenin altina konursa GORUNMEZ. O yuzden .wrap ICINE, z0
      ilk cocuk olarak girdi -> perdenin ustunde, metnin altinda.
   ⛔ z2 (wrap) icinde z0 -> metin ve mozaik her zaman ustte kalir.
   ♿ prefers-reduced-motion: donme durur, simge durur ve kalir.
   ⛔ pointer-events:none + aria-hidden -> sekme sirasina ve okuyucuya girmez.
   ========================================================================= */
.marka-donen{
  position:absolute; z-index:0; pointer-events:none;
  left:clamp(-190px,-9vw,-56px);
  top:50%;
  width:clamp(340px,40vw,560px); aspect-ratio:1/1;
  transform:translateY(-50%);
  rotate:calc(var(--kaydirma,0) * 1deg);   /* gecis/kaydirma ile ek donme */
  color:var(--acc);
  opacity:.12;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 58%,transparent 100%);
          mask-image:radial-gradient(circle at 50% 50%,#000 58%,transparent 100%);
}
.marka-donen svg{width:100%;height:100%;display:block;overflow:visible}
.marka-donen g{transform-origin:200px 200px}
.marka-donen .halka-dis{animation:marka-don 68s linear infinite}
.marka-donen .halka-ic{animation:marka-don 46s linear infinite reverse}
.marka-donen .cekirdek{animation:marka-nefes 11s ease-in-out infinite}
@keyframes marka-don{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes marka-nefes{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

@media(max-width:820px){
  .marka-donen{left:-24vw;width:min(78vw,420px);opacity:.08}
}
@media(prefers-reduced-motion:reduce){
  .marka-donen{rotate:none}
  .marka-donen .halka-dis,
  .marka-donen .halka-ic,
  .marka-donen .cekirdek{animation:none}
}

/* 2 Eyl · OZGULLUK ONARIMI · olculdu, tahmin degil.
   stil.css:198  .hero .wrap>*:not(.hero-mozaik){max-width:min(520px,50%)}
   ozgulluk (0,3,0); duz .marka-donen (0,1,0) buna KAYBEDER ve simge
   yariya kirpilir. Esit ozgullukle + sonraki dosyada oldugu icin bu kazanir.
   ⛔ stil.css DEGISTIRILMEDI. */
.hero .wrap>.marka-donen{max-width:none;width:clamp(340px,40vw,560px)}
@media(max-width:820px){
  .hero .wrap>.marka-donen{max-width:none;width:min(78vw,420px)}
}