html{scroll-behavior:smooth}
/* overflow-x: hidden DEGIL clip. hidden bir kaydirma kabi yaratiyor ve
position:sticky'yi olduruyordu (isler galerisi yapismiyordu).
clip ayni sekilde yatay tasmayi kirpar ama kap yaratmaz. */
html,body{margin:0;background:#000;overflow-x:clip;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
/* Tuvaller 190vh'de bitiyor; uzerlerindeki soluk iz tam o noktada kesilince
sayfada duz bir yatay cizgi olusuyordu. Alt kenar duz bir bant yerine
ust uste binen uc maske katmaniyla sonduruluyor: dikey sonum + iki genis
elips. Elipsler sonumu solda ve sagda farkli yuksekliklerde baslattigi
icin sinir duz degil, dalgali ve duzensiz kaliyor. */
.bh-stage{position:absolute;top:0;left:0;width:100%;height:190vh;z-index:0;overflow:hidden;
-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.6) 80%,transparent 100%),
radial-gradient(150% 62% at 18% 108%,transparent 0%,transparent 38%,#000 76%),
radial-gradient(130% 52% at 74% 104%,transparent 0%,transparent 34%,#000 70%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.6) 80%,transparent 100%),
radial-gradient(150% 62% at 18% 108%,transparent 0%,transparent 38%,#000 76%),
radial-gradient(130% 52% at 74% 104%,transparent 0%,transparent 34%,#000 70%);
mask-composite:intersect}
#gl{display:block;width:100%;height:100%}
.hero-section{position:relative;z-index:2;width:100%;height:100vh}
.overlay{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:5vmin;color:#fff}
.section2{position:relative;z-index:2;min-height:130vh;margin-top:calc(-15vh - 50px);
/* GERCEK GECIS: section2 canvas'in ustune kayar. ust=seffaf (donengec gorunur/erir),
asagi+sol dogru kademeli beyaz. Aci verilmis katman solu daha erken beyazlatir. */
/* SADECE dikey, ust=tam seffaf => hero ile dikissiz (yatay cizgi olmaz).
"sol daha erken" isi artik shader'da (kesintisiz canvas). */
background:
linear-gradient(to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.06) 16%,
rgba(255,255,255,.32) 34%,
rgba(255,255,255,.72) 54%,
rgba(255,255,255,1) 76%);
color:#111;display:flex;align-items:center;justify-content:flex-start;padding:10vmin 8vmin 14vmin;box-sizing:border-box}
.s2-inner{max-width:1080px;text-align:left;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
gap:clamp(2em,5vw,5em);flex-wrap:wrap;transform:translate(150px,-50px)}
.s2-right{flex:1 1 340px;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1.4em,4vh,2.6em);max-width:460px}
.s2-inner h2{font-weight:200;font-size:clamp(24px,3.4vw,44px);letter-spacing:.02em;margin:0 0 .35em;color:#0a0a0a;line-height:1.15;max-width:14em}
.s2-inner p{font-weight:300;font-size:clamp(15px,1.6vw,20px);line-height:1.75;letter-spacing:.02em;color:rgba(0,0,0,.62);max-width:30em;margin:0}
/* section2 dönengeç bölgesine (sag) akan kod katmani */
.swirl-code{position:absolute;top:0;left:0;width:100vw;height:190vh;z-index:1;
pointer-events:none;opacity:0;
-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.6) 80%,transparent 100%),
radial-gradient(150% 62% at 18% 108%,transparent 0%,transparent 38%,#000 76%),
radial-gradient(130% 52% at 74% 104%,transparent 0%,transparent 34%,#000 70%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.6) 80%,transparent 100%),
radial-gradient(150% 62% at 18% 108%,transparent 0%,transparent 38%,#000 76%),
radial-gradient(130% 52% at 74% 104%,transparent 0%,transparent 34%,#000 70%);
mask-composite:intersect}
.s2-inner{position:relative;z-index:3}
/* kod diskinin altindaki tagline (sag) */
.s2-tagwrap{position:absolute;z-index:3;right:clamp(20px,7vw,80px);top:60%;
max-width:min(90vw,620px);text-align:right}
.s2-tagline{font-weight:200;font-size:clamp(20px,2.7vw,36px);
line-height:1.18;letter-spacing:-.01em;color:#0a0a0a}
.s2-tagsub{margin:.85em 0 0;margin-left:auto;max-width:24em;font-weight:300;
font-size:clamp(12px,1.2vw,15px);line-height:1.55;letter-spacing:.01em;color:rgba(0,0,0,.55)}
@media(max-width:820px){.s2-inner{flex-direction:column;text-align:center}.s2-right{align-items:center;max-width:520px}}
/* --- SECTION 3: ustte dev dunya yayi, altinda metin --- */
/* Alt bosluk: kaskadin en alt sirasi bolum sinirina yapismasin,
golgesi overflow:hidden tarafindan kirpilmasin. */
/* --kure-ust: kurenin tepesinin bolum icindeki yeri. Hem kure hem de
ardindan yukselen telefon buna baglidir; tek yerden ayarlanir.
tek yerden ayarlanir. */
.section3{--kure-ust:calc(clamp(215px,27vh,340px) - 100px);
position:relative;z-index:2;background-color:#fff;min-height:100vh;overflow:hidden;
padding-bottom:clamp(56px,7vw,116px)}
/* ==== ucuncu bolum: baslik, yay ve secili kolun bilgisi ==== */
/* Yazi transform ile yukari itilirse bolumun disina tasip overflow:hidden
tarafindan kirpiliyor. Bunun yerine bolumun kendi ust boslugu kisiliyor:
yazi ayni yukseklige gelir ama sinirin icinde kalir. */
.s3-baslik{position:relative;z-index:2;max-width:1120px;margin:0 auto;
padding:0 clamp(20px,6vw,60px) 0;text-align:center}
.s3-baslik .s3-line{margin:0 auto;max-width:none}
.kollar-alt{margin:.7em auto 0;max-width:52em;font-weight:300;font-size:clamp(14px,1.4vw,17px);
letter-spacing:.01em;color:rgba(0,0,0,.55)}
/* Yay: kavisli serit, ortadaki kart yatayda buyuyerek one cikar. */
/* Kartlar asagida durur: dunyanin kavisi ustte gorunur kalsin diye. */
/* Dunya ve yay 100 px yukari alindi (1 Eylul 2026): baslikla arasindaki
bosluk fazlaydi, kure de bolumun ortasina fazla iniyordu. */
.s3-strip{position:relative;z-index:3;width:100%;line-height:0;
margin:calc(clamp(180px,21vw,270px) - 100px) 0 0}
#s3strip{display:block;width:100%;height:auto}
/* ortadaki kartin arka plana yansimasi (JS konumlar) */
.s2-proj,.s3-proj{position:absolute;left:50%;transform:translateX(-50%);
pointer-events:none;z-index:1;overflow:hidden;
-webkit-mask-image:radial-gradient(64% 78% at 50% 46%,#000 16%,transparent 74%);
mask-image:radial-gradient(64% 78% at 50% 46%,#000 16%,transparent 74%)}
.s2-proj canvas,.s3-proj canvas{display:block;width:100%;height:100%;opacity:.16;
-webkit-filter:grayscale(1) blur(2px);filter:grayscale(1) blur(2px)}
/* secili kolun adi ve aciklamasi */
.s3-info{position:relative;z-index:4;text-align:center;margin:clamp(26px,4vw,46px) auto 0;
width:min(92vw,1180px);padding:0 24px}
.s3-info-name{margin:0 auto;max-width:22em;font-weight:300;font-size:clamp(20px,2.5vw,33px);letter-spacing:-.01em;
color:#0a0a0a;transition:opacity .3s ease}
.s3-info-desc{margin:.55em auto 0;max-width:34em;font-weight:300;font-size:clamp(13px,1.3vw,16px);line-height:1.55;
letter-spacing:.01em;color:rgba(0,0,0,.55);transition:opacity .3s ease}
/* Kolun kendi islerine giden baglanti. Akan seritlerin ALTINDA: once
"ne yapiyoruz" akip gecer, sonra "kime yaptik" diye cikis kapisi gelir. */
.s3-info-link{display:inline-flex;align-items:center;gap:.6em;
margin:clamp(26px,3.4vw,48px) 0 0;padding:.75em 1.5em;
border:1px solid rgba(10,10,10,.18);border-radius:100px;
text-decoration:none;color:#0a0a0a;
font-weight:300;font-size:clamp(12px,1.2vw,14px);letter-spacing:.05em;
transition:opacity .3s ease,background .25s ease,color .25s ease,
border-color .25s ease,letter-spacing .25s ease}
.s3-info-link::after{content:'';width:.5em;height:.5em;border-top:1px solid currentColor;
border-right:1px solid currentColor;transform:rotate(45deg);
transition:transform .25s ease}
.s3-info-link:hover{background:#0a0a0a;border-color:#0a0a0a;color:#fff;letter-spacing:.1em}
.s3-info-link:hover::after{transform:rotate(45deg) translate(2px,-2px)}
/* Kolun hizmetleri ve etiketleri: satir satir sonsuz akan seritler.
Bir satir saga gider, digeri sola; hizlari da farkli (34s, 41s, 48s...)
ki goz tekrar eden bir ritim yakalamasin.
Butun yigin tek bir duzlem gibi yatirilir (perspective + rotateX):
ustteki satirlar uzakta ve kucuk kalir, alttakiler one gelir. Yiginin
ustu maskeyle erir, yani ilk satir kurenin ardina giriyormus gibi
yok olur. Seritlerin sag/sol uclari da maskeyle erir, kartlar kenarda
birden belirip kaybolmasin diye.
Kart sayisi az kalmasin diye hizmetin etiketleri de karta donusuyor
(Next.js, WordPress, Ikas, Iyzico...): Code kolunda 4 degil 19 kart var.
Hizmet adi kartlari (.s3-kart-ad) koyu ve buyuk, etiketler soluk. */
.s3-info-list{display:flex;flex-direction:column;gap:clamp(8px,1vw,15px);
width:100%;margin:clamp(22px,3vw,42px) 0 0;padding:0;
transform:perspective(1250px) rotateX(13deg);transform-origin:50% 0;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%);
mask-image:linear-gradient(180deg,transparent 0,#000 20%);
transition:opacity .3s ease}
.s3-sira{overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.s3-akis{display:flex;width:max-content;
animation:s3-kay var(--sure,38s) linear infinite;
animation-direction:var(--yon,normal)}
.s3-yari{display:flex;gap:clamp(8px,1vw,15px);padding-right:clamp(8px,1vw,15px)}
@keyframes s3-kay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.s3-info-item{display:flex;align-items:center;justify-content:center;white-space:nowrap;
flex:0 0 auto;min-width:clamp(132px,14vw,208px);
padding:clamp(8px,.95vw,13px) clamp(18px,2.2vw,32px);
border-radius:9px;background:#fff;
box-shadow:inset 0 0 0 1px rgba(10,10,10,.1),0 10px 26px rgba(16,36,62,.055);
font-weight:300;font-size:clamp(11px,1.1vw,13px);letter-spacing:.02em;
color:rgba(0,0,0,.6)}
.s3-kart-ad{color:#0a0a0a;font-size:clamp(12px,1.25vw,15px);
box-shadow:inset 0 0 0 1px rgba(10,10,10,.2),0 12px 30px rgba(16,36,62,.085)}
/* Kartin stroke'unda donen isik huzmesi -- hero'daki dugmenin (.svc-cta)
aynisi. Once yazinin dolgusundan gecen bir gradyan denendi, istenen o
degildi: isik yazinin degil kenarin uzerinde donuyor.
Konik gradyan maskeyle 1.4px'lik halkaya indiriliyor; --beam acisi
donunce parlak nokta cerceve boyunca kosuyor. Renkler hero'dakiyle ayni:
koyu mavi -> acik mavi-beyaz -> marka mavisi. (Once sicak turuncu ile
basliyordu; site tek renge indi.)
Hero'daki dugmede huzmenin bir de drop-shadow halesi var; burada YOK.
Kartlar altmisa yakin ve her hale iki bulaniklik gecisi demek -- sayfa
zaten bu bolumde agir. Isik da yalnizca serit ekrandayken donuyor
(.parlak sinifini kol-seridi.js takiyor). */
.s3-info-item{position:relative;isolation:isolate}
.s3-info-item::after{content:"";position:absolute;inset:0;border-radius:inherit;
padding:1.4px;pointer-events:none;
background:conic-gradient(from var(--beam),
transparent 0deg 292deg,
rgba(255,110,70,.32) 316deg, #ffffff 337deg, rgba(90,130,255,.32) 349deg,
transparent 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask-composite:exclude}
.s3-info-list.parlak .s3-info-item::after{animation:s3-isin 5.4s linear infinite}
/* Kartlar ayni anda parlamasin: her satir ve her kart bir tik geriden. */
.s3-sira:nth-child(2) .s3-info-item::after{animation-delay:-1.3s}
.s3-sira:nth-child(3) .s3-info-item::after{animation-delay:-2.7s}
.s3-sira:nth-child(4) .s3-info-item::after{animation-delay:-4.1s}
.s3-info-item:nth-child(2n)::after{animation-delay:-2.2s}
.s3-info-item:nth-child(3n)::after{animation-delay:-3.6s}
@keyframes s3-isin{to{--beam:360deg}}
@media(prefers-reduced-motion:reduce){.s3-info-list.parlak .s3-info-item::after{animation:none}}
/* Hareket rahatsiz ediyorsa (isletim sistemi ayari) serit durur. */
@media(prefers-reduced-motion:reduce){.s3-akis{animation:none}}
@media(max-width:820px){
.s3-info-list{transform:none;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%);
mask-image:linear-gradient(180deg,transparent 0,#000 10%)}
.s3-info-item{min-width:0;padding:9px 15px;border-radius:8px}
}
/* ==== isler sayfasi ====
Zemin beyaz. Govdeye de veriliyor cunku html/body varsayilan olarak
siyah; yalnizca main'i beyaz yapmak sayfa altinda siyah bir serit
birakiyordu. */
body.sayfa-isler{background:#fff}
.isler-sayfa{background:#fff;color:#0a0a0a}
/* Ust kisim blog/studyo sayfalariyla ayni (.blog-ust, .blog-rozet,
.blog-baslik style.css'te); burada yalnizca menuyu asan ust bosluk. */
.isler-sayfa{padding-bottom:clamp(40px,6vw,80px)}
.isler-sayfa-ust{padding:clamp(110px,13vw,170px) clamp(18px,5vw,56px) 0;margin-bottom:0}
.isler-sayfa-yazi{margin:clamp(14px,1.8vw,22px) auto 0;max-width:40em;font-weight:300;
font-size:clamp(14px,1.4vw,17px);line-height:1.6;
color:rgba(0,0,0,.55)}
.isler-sayfa-yazi p{margin:0}
/* Galerinin kendi "Secilmis isler" rozeti burada tekrar olurdu. */
.isler-sayfa .isler-ust{display:none}
.isler-sayfa .blog-bos{padding:clamp(20px,4vw,50px) clamp(18px,5vw,56px) clamp(40px,6vw,80px)}
.isler-sayfa .isler{padding-top:clamp(26px,4vw,48px)}
/* ==== ana sayfadaki isler bandi: arka planda kendi kendine donen alan ====
Tek ekran boyu alan; isler onun ARKASINDA belirli araliklarla degisir.
Gorsel ekrana sabitlendigi icin bant ustunden gecerken hafif parallax
de olusur.
Kart destesi (asagida) isler SAYFASINDA duruyor; bu bant ana sayfada.
Ikisi ayni icerigi gosterdigi icin sinif adlari ayri: burada "bant-",
asagida "is-". */
.isler-bant{position:relative;height:100vh;overflow:hidden;background:#05070d;color:#fff}
.bant-kat{position:absolute;inset:0;opacity:0;visibility:hidden;
transition:opacity 1.1s ease,visibility 0s linear 1.1s}
.bant-kat.aktif{opacity:1;visibility:visible;transition:opacity 1.1s ease,visibility 0s}
.bant-gorsel{position:absolute;inset:0;
background-image:var(--is-gorsel);
background-size:cover;background-position:center;
background-attachment:fixed;
filter:grayscale(1) contrast(1.05) brightness(.92)}
/* Ustten ve alttan koyulasan perde: komsu bolumlere yumusak baglanir,
yazi her gorselde okunur kalir. */
.bant-kat::after{content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(5,7,13,.88) 0%,rgba(5,7,13,.18) 26%,
rgba(5,7,13,.30) 62%,rgba(5,7,13,.9) 100%)}
.bant-yazi{position:absolute;left:0;right:0;bottom:0;z-index:2;
display:flex;flex-direction:column;align-items:flex-start;
padding:0 clamp(20px,6vw,60px) clamp(46px,8vw,110px);max-width:44em;
text-decoration:none;color:#fff}
.bant-sayac{margin:0 0 1em;letter-spacing:.2em;color:rgba(255,255,255,.45);
font:400 clamp(11px,1.05vw,13px)/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.bant-ad{font-weight:200;font-size:clamp(30px,5vw,66px);letter-spacing:-.03em;line-height:1.03}
.bant-sektor{margin:.9em 0 0;padding:.5em 1.15em;border-radius:100px;
border:1px solid rgba(255,255,255,.22);
font-size:clamp(11px,1.1vw,13px);letter-spacing:.06em;color:rgba(255,255,255,.75)}
.bant-ozet{margin:1em 0 0;max-width:34em;font-weight:300;font-size:clamp(13px,1.35vw,17px);
line-height:1.6;color:rgba(255,255,255,.6)}
a.bant-yazi .bant-ad{transition:opacity .25s ease}
a.bant-yazi:hover .bant-ad{opacity:.72}
.bant-nokta{position:absolute;right:clamp(20px,4vw,54px);top:50%;transform:translateY(-50%);
z-index:3;display:flex;flex-direction:column;gap:.85em}
.bant-nokta-dugme{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.3);transition:background .25s ease,transform .25s ease}
.bant-nokta-dugme.aktif{background:#fff;transform:scale(1.5)}
@media(max-width:820px){
.isler-bant{height:72svh}
.bant-gorsel{background-attachment:scroll} /* iOS fixed'i desteklemiyor */
.bant-nokta{right:14px;gap:.7em}
}
/* ==== isler: sola akan kart seridi ====
Kartlar durmadan sola kayar; imlec seridin ustune gelince serit durur ve
imlecin altindaki kart yukselir. Karta tiklayinca is buyuk halde acilir.
Once uc duzen denendi: tam ekran kartlar + yatay ray, her is icin ayri
bant, ve arka planda kendi kendine donen tek bant. Sonuncusu isleri geri
plana itiyordu; bu duzen onlari one aliyor ama tek satir oldugu icin
sayfayi da kesmiyor. */
.isler{position:relative;overflow:hidden;background:transparent;color:#0a0a0a;
padding:clamp(56px,8vw,110px) 0 clamp(60px,8vw,120px)}
.isler-ust{padding:0 clamp(20px,6vw,60px);margin-bottom:clamp(26px,4vw,46px)}
.isler-rozet{display:inline-block;padding:.55em 1.15em;border-radius:100px;
border:1px solid rgba(10,10,10,.16);
font-size:clamp(11px,1.1vw,13px);letter-spacing:.08em;
color:rgba(0,0,0,.6)}
/* Ray uclarda eriyor: kartlar kenarda birden belirip kaybolmasin. */
/* Hareket kapali: serit kendi kendine akmiyor, fazla kart yatay kaydirmayla
geziliyor. Kaydirma cubugu gizli -- deste gorunumunu bozuyordu. */
.isler-ray{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.isler-ray::-webkit-scrollbar{display:none}
/* Kartlar arasinda bosluk yok, uste bindiriliyorlar: negatif kenar payi
onlari ust uste getiriyor, kart sirasi da hangisinin onde oldugunu
belirliyor (sonraki kart oncekinin ustune biner). preserve-3d BILEREK
yok -- olsaydi tarayici kartlari kendi z sirasina gore dizer ve
bindirme dagilirdi. */
/* Kartin kutusu tam genislikte ama donunce yalnizca sag ~%32'si goruluyor;
ilk kartin gorunmeyen sol yarisi seridin basinda kocaman bir bosluk
birakiyordu. Serit o kadar sola cekiliyor. */
/* Az is varken (or. uc) deste solda kaliyordu. Gorunen deste genisligi:
ilk kartin gorunen yuzu ~14vw + sonraki her kart 14.6vw. Bu, rayin
genisligine sigiyorsa deste ortalanir; sigmiyorsa max() eski degere
(-29vw) duser ve deste soldan baslayip kaydirilir. Ilk kartin gorunen
yuzu kutusunun ~30vw icinden basladigi icin -30vw duzeltmesi var. */
.isler-serit{display:flex;width:max-content;gap:0;
margin-left:max(-29vw, calc((100% - ((var(--adet,99) - 1) * 14.6vw + 14vw)) / 2 - 30vw));
padding:14px clamp(7px,.9vw,13px) 26px}
/* Kartlar sola bakiyor: rotateY negatif olunca yuzey normali sola doner
(sag kenar one gelir). Donme sag kenardan, boylece kartlar birbirinin
icine yaslanir. */
/*
* Olcu hesabi: transform YERLESIMI degistirmez -- kart donse de flex kutusu
* tam genisligi kaplar. Kartlar arasindaki gercek aralik `genislik + kenar
* payi`, gorunen genislik ise `genislik x cos(55)` ~ %57'si. Kartlarin ust
* uste BINMEMESI icin aralik gorunen genislikten AZ BIRAZ buyuk olmali:
* 44vw kutu, -29.4vw pay -> 14.6vw aralik; -63 derecede gorunen genislik
* ~14vw, yani aralarinda bir tutam bosluk kaliyor.
*/
.is-kart{flex:0 0 auto;width:44vw;min-width:300px;margin-right:-29.4vw;
padding:0;border:0;background:none;
display:flex;flex-direction:column;gap:.95em;cursor:pointer;color:#fff;
text-align:left;position:relative;
/*
* Imlec kartin KUTUSUNU degil GORSELINI yakalasin.
*
* Kutu 44vw genisliginde ama gorsel donunce yalnizca sag ~14vw'si
* goruluyor; kutunun bos sol tarafi bir sonceki kartin gorseli
* uzerine biniyor ve DOM'da sonra geldigi icin imleci calikyordu.
* Sonuc: yalnizca son kart kendi gorseli uzerinde hover aliyordu.
*
* Kutu imlece gorunmez, gorsel gorunur. Tiklama gorselden dugmeye
* kabarciklandigi icin secim de calismaya devam ediyor.
*/
pointer-events:none}
.is-kart:hover,.is-kart:focus-visible{z-index:5}
/*
* Donme yalnizca GORSELDE. Kartin tamami dondurulunce altindaki ad da
* donuyor ve bir sonraki kartin arkasinda kaliyordu.
*
* Perspektif gorselin kendi transform'unda: ray'e verilince yalnizca
* dogrudan cocuguna (serit) geciyor, kartlara ulasmiyor ve donme duz bir
* yatay ezilme olarak goruluyordu.
*/
/* Yukseklik genislikten BAGIMSIZ. aspect-ratio ile bagliyken gorunen yuzu
buyutmenin tek yolu kutuyu genisletmekti, o da yuksekligi bogazliyor ve
bolum 1000px'i asiyordu. Ayrilinca gorunen yuzun eni kutu genisliginden,
boyu da buradan geliyor. */
.is-gorsel{display:block;height:clamp(360px,40vw,560px);border-radius:14px;
pointer-events:auto;cursor:pointer;
transform-origin:right center;
transform:perspective(1300px) rotateY(-63deg);
background-image:var(--is-gorsel);background-size:cover;background-position:center;
background-color:rgba(10,20,40,.06);
box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 18px 40px rgba(16,30,56,.22);
filter:grayscale(1) contrast(1.05) brightness(.9);
transition:filter .4s ease,box-shadow .4s ease,
transform .45s cubic-bezier(.2,.7,.2,1)}
/* Imlecin altindaki kart YALNIZCA YUKSELIR -- acisi hic degismez. Once
donerek duzlesiyordu (-63 -> 0, sonra -34); istenen o degildi, deste
bozuluyordu. Kart yerinde kaliyor, sadece hafifce kalkip renge donuyor. */
.is-kart:hover .is-gorsel,.is-kart:focus-visible .is-gorsel{
transform:perspective(1300px) rotateY(-63deg) translateY(-22px);
filter:grayscale(0) contrast(1.02) brightness(1);
box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 26px 54px rgba(16,30,56,.3)}
/* Ad, gorselin GORUNEN kismiyla hizali. Kutu tam genislikte ama gorsel
donunce yalnizca sag %57'lik kismi goruluyor; ad da oraya kaydiriliyor,
yoksa kartin bos sol tarafinda kaliyor ve komsusunun adiyla cakisiyordu. */
.is-alt{display:flex;flex-direction:column;gap:.35em;
width:28%;margin-left:68%;
opacity:.62;transition:opacity .3s ease}
.is-kart:hover .is-alt,.is-kart:focus-visible .is-alt{opacity:1}
.is-ad{font-weight:300;font-size:clamp(15px,1.5vw,19px);letter-spacing:-.01em;color:#0a0a0a}
.is-sektor{font-weight:300;font-size:clamp(11px,1.05vw,12.5px);letter-spacing:.05em;
color:rgba(0,0,0,.5)}
/* Acilan is. */
/* `display:grid` tarayicinin [hidden] kuralindan guclu: bu satir olmadan
kapali pencere de ekrani kapliyor ve butun sayfanin imlec/tiklamalarini
yutuyor. */
.is-pencere[hidden]{display:none}
.is-pencere{position:fixed;inset:0;z-index:40;display:grid;place-items:center;
padding:clamp(16px,4vw,48px);background:rgba(4,6,12,.82);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
opacity:0;transition:opacity .3s ease}
.is-pencere.acik{opacity:1}
/* Secilen is EKRANA GELIR: kucukten one dogru buyuyerek acilir. Once
yalnizca 14px kayarak beliriyordu, kart "one geldi" hissi vermiyordu. */
.is-pencere-ic{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
gap:clamp(20px,3vw,44px);align-items:center;
width:min(1040px,100%);max-height:100%;overflow:auto;
padding:clamp(18px,2.4vw,30px);border-radius:20px;
border:1px solid rgba(255,255,255,.12);background:rgba(10,14,24,.92);
/* Renk acikca veriliyor: bolum beyaz sayfada koyu yaziya
dondu, pencere ise koyu zeminli -- miras kalan koyu renk
is adini gorunmez yapiyordu. */
color:#fff;
transform:perspective(1200px) translateZ(-260px) translateY(26px) rotateY(-14deg);
opacity:0;
transition:transform .5s cubic-bezier(.16,.84,.24,1),opacity .35s ease}
.is-pencere.acik .is-pencere-ic{transform:none;opacity:1}
.is-pencere-gorsel{display:block;aspect-ratio:4/3;border-radius:14px;
background-size:cover;background-position:center;
background-color:rgba(255,255,255,.06)}
.is-pencere-sektor{display:inline-block;padding:.5em 1.1em;border-radius:100px;
border:1px solid rgba(255,255,255,.2);
font-size:clamp(11px,1.05vw,12.5px);letter-spacing:.05em;
color:rgba(255,255,255,.7)}
.is-pencere-ad{margin:.7em 0 0;font-weight:200;font-size:clamp(24px,3.4vw,44px);
letter-spacing:-.03em;line-height:1.06;color:#fff}
.is-pencere-ozet{margin:.9em 0 0;font-weight:300;font-size:clamp(13px,1.3vw,16px);
line-height:1.62;color:rgba(255,255,255,.62)}
.is-pencere-baglanti{display:inline-block;margin-top:1.4em;padding:.75em 1.6em;
border-radius:100px;background:#fff;color:#0a0a0a;
font-size:clamp(12px,1.15vw,14px);text-decoration:none}
.is-kapat{position:absolute;top:10px;right:10px;z-index:2;display:grid;place-items:center;
width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;
border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff}
.is-kapat svg{width:17px;height:17px;display:block}
.is-kapat:hover{background:#fff;color:#0a0a0a}
/* Pencere aciykken arkadaki sayfa kaymasin. */
body.is-pencere-acik{overflow:hidden}
@media(max-width:820px){
.is-kart{width:80vw;min-width:0;margin-right:-52vw}
/* Ayni ortalama, dar ekran olculeriyle: gorunen yuz ~30vw, sonraki her
kart 28vw, yuz kutunun 50vw icinden basliyor. Sigmazsa -54vw. */
.isler-serit{margin-left:max(-54vw, calc((100% - ((var(--adet,99) - 1) * 28vw + 30vw)) / 2 - 50vw))}
.is-pencere-ic{grid-template-columns:1fr}
}
/* ==== dorduncu bolum: calisma bicimi, adim adim ====
Yerlesim ILAN-surec.png'den geliyor: yan yana uc sutun degil, sayfa
boyunca uzayan zikzak. Ilan gorselinin turkuazi ve kalin basliklari
tasinmadi; turkuaz yalnizca adim numaralarinda tek vurgu olarak kaldi. */
.section4{--tur:#2FBFB4;--cizgi:rgba(10,10,10,.2);
position:relative;z-index:2;background-color:#fff;overflow:hidden;
padding:clamp(64px,10vw,132px) clamp(20px,6vw,60px) 0}
/* Ince izgara: ilandaki 128px hucre, sitede cok daha soluk. Ust ve altta
maskeyle soner ki komsu bolumlerle sert bir sinir cizgisi olusmasin. */
.section4::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:linear-gradient(to right,rgba(14,46,77,.055) 1px,transparent 1px),
linear-gradient(to bottom,rgba(14,46,77,.055) 1px,transparent 1px);
background-size:96px 96px;background-position:center top;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 84%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 84%,transparent 100%)}
.section4>*{position:relative;z-index:1}
.s4-baslik{max-width:1120px;margin:0 auto;text-align:center}
.s4-baslik .s3-line{margin:0 auto;max-width:none}
.s4-alt{margin:.8em auto 0;max-width:44em;font-weight:300;font-size:clamp(14px,1.4vw,17px);
line-height:1.55;letter-spacing:.01em;color:rgba(0,0,0,.55)}
.s4-akis{max-width:1180px;margin:clamp(46px,7vw,92px) auto 0}
.s4-adim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
align-items:center;gap:clamp(28px,5vw,72px)}
/* Zikzak: tek numarali adimda gorsel SAGA gecer (01 telefon, 03 laptop),
cift numarali adimda solda kalir (02 tablet). Boylece tablet "Planliyor
ve sunuyoruz"un solunda, laptop "Panelini aciyoruz"un saginda durur. */
.s4-adim--1 .s4-gorsel,
.s4-adim--3 .s4-gorsel{order:2}
.s4-adim--1 .s4-yazi,
.s4-adim--3 .s4-yazi{order:1;text-align:right}
.s4-adim--1 .s4-adim-metin,
.s4-adim--3 .s4-adim-metin{margin-left:auto}
.s4-adim--3 .s4-panel-liste{text-align:left}
/* Cihaz gorselleri. Zemini kesilmis WebP: cerceve, golge veya kutu yok. */
.s4-cihaz{display:block;width:100%;height:auto}
.s4-cihaz--1{width:min(100%,320px);margin:0 auto}
.s4-cihaz--3{width:min(100%,760px);transform:translateX(50px)}
/* Laptop diger ikisinden buyuk dursun: 03'te gorsel sutunu genisletildi.
Sutunlar fiziksel oldugu icin (gorsel order:2 ile 2. sutuna geciyor)
genisleyen ikinci sutun. */
.s4-adim--3{grid-template-columns:minmax(0,.78fr) minmax(0,1.32fr)}
.s4-no{display:block;margin:0 0 .85em;letter-spacing:.2em;color:var(--tur);
font:400 clamp(11px,1.05vw,13px)/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.s4-adim-baslik{margin:0;font-weight:300;font-size:clamp(21px,2.5vw,34px);letter-spacing:-.02em;
line-height:1.16;color:#0a0a0a}
.s4-adim-metin{margin:.8em 0 0;max-width:30em;font-weight:300;font-size:clamp(13px,1.3vw,16px);
line-height:1.6;letter-spacing:.01em;color:rgba(0,0,0,.55)}
/* Dirsekli baglanti: bir adimin sutunundan asagi inip yanindakine gecer.
SVG yerine tek kutunun iki kenarindan cizilir, her genislikte dogru durur. */
/* Genislik %53: iki yazi sutununun MERKEZLERI arasi. Izgara iki esit
sutun oldugu icin sol sutunun merkezi kabin %23.5'inde, sagininki
%76.5'inde; arasi %53 eder. Onceki sabit 520px ucu yazinin ortasinda
birakiyordu, cizgi bagladigi yaziya varmiyordu. */
/* Cizgi artik ogenin KENDI kenarlarinda; iki sozde-oge de uclardaki
dairelere ayrildi. Once cizgi ::after'daydi ve yalnizca baslangicta
nokta vardi, bu yuzden serit bagladigi yaziya varmiyormus gibi
duruyordu. Simdi iki uc da isaretli: yazidan yaziya. */
.s4-baglanti{position:relative;height:clamp(70px,10vw,130px);width:53%;margin:0 auto;
background-repeat:no-repeat;background-size:100% 100%}
/* Uc parcali yol: asagi in, yana git, TEKRAR ASAGI don. Kenarlikla
cizilemiyordu (kutunun ucuncu kenari yukari doner), o yuzden SVG.
vector-effect ile cizgi kalinligi gerilirken bozulmuyor. */
.s4-baglanti--saga{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22100%22%20viewBox%3D%220%200%20200%20100%22%20preserveAspectRatio%3D%22none%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C0%20V36.0%20Q0%2C50.0%2014.0%2C50.0%20H186.0%20Q200.0%2C50.0%20200.0%2C64.0%20V100.0%22%20stroke%3D%22rgba%2810%2C10%2C10%2C0.2%29%22%20stroke-width%3D%221%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E")}
.s4-baglanti--sola{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22100%22%20viewBox%3D%220%200%20200%20100%22%20preserveAspectRatio%3D%22none%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M200.0%2C0%20V36.0%20Q200.0%2C50.0%20186.0%2C50.0%20H14.0%20Q0%2C50.0%200%2C64.0%20V100.0%22%20stroke%3D%22rgba%2810%2C10%2C10%2C0.2%29%22%20stroke-width%3D%221%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E")}
.s4-baglanti::before,
.s4-baglanti::after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;
background:#0a0a0a;z-index:1}
/* Saga akan serit: ust-solda baslar, alt-sagda biter. */
.s4-baglanti--saga::before{top:-4px;left:-4px}
.s4-baglanti--saga::after{bottom:-4px;right:-4px}
/* Sola akan serit: ust-sagda baslar, alt-solda biter. */
.s4-baglanti--sola::before{top:-4px;right:-4px}
.s4-baglanti--sola::after{bottom:-4px;left:-4px}
@media(prefers-reduced-motion:no-preference){.s4-baglanti{transition:none}}
/* Panelde gorunenler: ucuncu adimin yazisinin devami. */
.s4-panel{margin:clamp(18px,2.4vw,30px) 0 0;padding:clamp(16px,2vw,24px) 0 0;
border-top:1px solid rgba(0,0,0,.13)}
.s4-panel-etiket{display:block;margin:0 0 1em;letter-spacing:.2em;color:rgba(0,0,0,.32);
font:400 clamp(11px,1.05vw,13px)/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.s4-panel-liste{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
gap:.55em clamp(14px,2vw,28px);margin:0;padding:0;text-align:left}
.s4-panel-madde{position:relative;padding-left:1.2em;font-weight:300;
font-size:clamp(12px,1.2vw,14px);line-height:1.5;color:rgba(0,0,0,.62)}
.s4-panel-madde::before{content:'';position:absolute;left:0;top:.72em;width:.45em;height:1px;
background:rgba(0,0,0,.34)}
/* ---- adim semalari (template-parts/sema.php) ----
Ucu de saf CSS kutulariyla cizilir; fotograf yok. */
.sema{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#fff;
box-shadow:inset 0 0 0 1px rgba(20,40,66,.07),0 4px 10px rgba(20,32,48,.04),
0 16px 30px rgba(20,32,48,.07),0 44px 80px rgba(16,36,62,.11)}
.sema-bar{display:flex;align-items:center;gap:6px;height:10%;min-height:22px;padding:0 14px;
border-bottom:1px solid rgba(20,40,66,.07)}
.sema-bar i{width:7px;height:7px;border-radius:50%;background:rgba(20,40,66,.16)}
.sema-govde{position:absolute;left:0;right:0;top:10%;bottom:0;padding:clamp(12px,3%,26px)}
/* 01 gorusme */
.sema-govde--toplanti{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.sema-kisi{position:relative;border-radius:10px;background:rgba(20,40,66,.055);
box-shadow:inset 0 0 0 1px rgba(20,40,66,.05)}
.sema-ad{position:absolute;left:10px;bottom:8px;font-style:normal;letter-spacing:.12em;
font:400 clamp(9px,.85vw,11px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;
color:rgba(10,10,10,.42)}
.sema-alt{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);z-index:2;
display:flex;gap:8px;padding:6px 12px;border-radius:100px;background:#fff;
box-shadow:0 4px 14px rgba(16,36,62,.14)}
.sema-alt i{width:8px;height:8px;border-radius:50%;background:rgba(20,40,66,.22)}
.sema-alt .sema-kapat{background:rgba(196,64,64,.55)}
/* 02 plan */
.sema-plan{display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:clamp(16px,4%,34px);
background-image:linear-gradient(to right,rgba(14,46,77,.05) 1px,transparent 1px),
linear-gradient(to bottom,rgba(14,46,77,.05) 1px,transparent 1px);
background-size:34px 34px}
.sema-kok{padding:.62em 1.5em;border-radius:6px;background:#0a0a0a;color:#fff;letter-spacing:.14em;
font:500 clamp(9px,.9vw,12px)/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.sema-dal{width:1px;height:clamp(14px,3vw,26px);background:rgba(10,10,10,.28)}
.sema-dugumler{list-style:none;position:relative;display:flex;flex-wrap:wrap;justify-content:center;
gap:clamp(6px,1vw,12px);margin:0;padding:clamp(10px,2vw,18px) 0 0}
.sema-dugumler::before{content:'';position:absolute;left:13%;right:13%;top:0;height:1px;
background:rgba(10,10,10,.28)}
.sema-dugumler li{position:relative;padding:.55em 1.05em;border-radius:6px;background:#fff;
box-shadow:inset 0 0 0 1px rgba(10,10,10,.3);letter-spacing:.12em;color:#0a0a0a;
font:400 clamp(8px,.85vw,11px)/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.sema-dugumler li::before{content:'';position:absolute;left:50%;top:calc(-1 * clamp(10px,2vw,18px));
width:1px;height:clamp(10px,2vw,18px);background:rgba(10,10,10,.28)}
/* 03 panel */
.sema-govde--panel{display:flex;flex-direction:column;gap:clamp(7px,1.6vw,15px)}
.sema-panel-ust{letter-spacing:.18em;color:rgba(10,10,10,.4);
font:400 clamp(9px,.85vw,11px)/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.sema-cizelge{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0;padding:0}
.sema-cizelge li{position:relative;padding-top:13px;letter-spacing:.04em;color:rgba(10,10,10,.4);
font:400 clamp(8px,.85vw,11px)/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
.sema-cizelge li::before{content:'';position:absolute;left:0;top:3px;width:100%;height:3px;
border-radius:3px;background:rgba(20,40,66,.1)}
.sema-cizelge .bitti::before{background:rgba(10,10,10,.5)}
.sema-cizelge .aktif::before{background:var(--tur)}
.sema-cizelge .aktif{color:#0a0a0a}
.sema-satirlar{margin:0}
.sema-satir{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
padding:clamp(5px,1.2vw,10px) 0;border-top:1px solid rgba(20,40,66,.08)}
.sema-satir dt{letter-spacing:.1em;color:rgba(10,10,10,.4);
font:400 clamp(8px,.85vw,11px)/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.sema-satir dd{margin:0;font-size:clamp(9px,.95vw,12px);font-weight:300;color:#0a0a0a}
.sema-kutucuklar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:auto}
.sema-kutucuklar i{aspect-ratio:16/10;border-radius:6px;background:rgba(20,40,66,.07)}
@media(max-width:820px){
.s4-baslik{text-align:left}
.s4-alt{margin-left:0}
.s4-adim{grid-template-columns:1fr;gap:clamp(20px,5vw,32px)}
.s4-adim--2 .s4-gorsel{order:0}
.s4-adim--2 .s4-yazi{order:0;text-align:left}
.s4-adim--2 .s4-adim-metin{margin-left:0}
/* Zikzak bitince dirsek de anlamsizlasir: duz dikey cizgi kalir,
iki ucundaki daireler yerinde durur. */
.s4-baglanti{width:1px;height:clamp(38px,9vw,60px);
background-image:none;border-left:1px solid var(--cizgi)}
.s4-baglanti::before{top:-4px;left:-3px;right:auto}
.s4-baglanti::after{bottom:-4px;left:-3px;right:auto}
.s4-panel-liste{grid-template-columns:1fr}
}
/* Cagri butonu: ucuncu bolumun icindeydi, calisma bicimi araya girince
kendi parcasina alindi (template-parts/cagri.php). Bicim ayni kaldi. */
.cagri{position:relative;z-index:2;background-color:#fff}
.s3-copy{position:relative;z-index:2;text-align:center;padding:clamp(46px,7vw,90px) clamp(20px,6vw,60px) clamp(64px,10vw,120px);
display:flex;flex-direction:column;align-items:center;gap:1.3em}
.s3-cta{display:inline-flex;align-items:center;justify-content:center;padding:1em 2.5em;border-radius:100px;
background:#0a0a0a;color:#fff;text-decoration:none;font-weight:400;letter-spacing:.12em;font-size:clamp(13px,1.3vw,16px);
transition:transform .3s ease,letter-spacing .3s ease,box-shadow .3s ease}
.s3-cta:hover{transform:scale(1.05);letter-spacing:.2em;box-shadow:0 14px 44px rgba(0,0,0,.28)}
.s3-line{margin:0;font-weight:200;font-size:clamp(20px,2.7vw,36px);letter-spacing:-.01em;line-height:1.22;color:#0a0a0a;max-width:15em}
/* Dunya akistan cikarildi: kartlarin arkasinda, ust tarafta durur.
Yay onun onunden gectigi icin sahne derinlik kazanir. */
/* Kurenin yalnizca tepedeki yayi gorunuyordu, gerisi maskeyle gizliydi ama
yine de ciziliyordu: 2600x1152 piksellik yuzeyin %74'u bosa gidiyordu.
Isinmayi onlemek icin cozunurluk %55'e dusurulmustu, kure de pikselli
goruluyordu.
Artik tuval yalnizca gorunen dilim kadar (--kure-dilim). Kamera o dilimi
kendi tam karesinin ustunden kirpip cizer (dunya.js icindeki
setViewOffset), yani cerceve degismez — sadece bosa cizilen alan gider.
Ayni piksel butcesiyle tam cozunurluk elde edilir. */
/* Dunyanin ARKASINDAN yukselen telefon. z-index 0: kurenin (z-index 1)
altinda kalir. Ust ucu kurenin tepesinin uzerinde gorunur, alt tarafi
maskeyle erir — kol kurenin ardindan cikiyormus gibi durur.
Konum kurenin ust noktasina baglandi: kure kayarsa telefon da kayar. */
.earth-wrap{--kure-tam:min(128vh,1340px);--kure-dilim:.30;
position:absolute;left:50%;transform:translateX(-50%);
top:var(--kure-ust);width:min(190%,2600px);
height:calc(var(--kure-tam) * var(--kure-dilim));z-index:1;pointer-events:none}
#earthCanvas{width:100%;height:100%;display:block;opacity:.9;
-webkit-filter:contrast(1.05);
filter:contrast(1.05); /* grayscale artik shader'da (iridescent korunur) */
/* Eski maske tam kurenin %5-26'sindaydi; dilim %30 oldugu icin
ayni gecis burada %17-87'ye denk geliyor. */
-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 17%,transparent 87%);
mask-image:linear-gradient(to bottom,#000 0%,#000 17%,transparent 87%)}
/* --- SECTION2 VEKTOR ANIMASYONU: urun (kure) ekrana girer, mini site scroll olur --- */
.s2-visual{width:min(92vw,520px)}
.s2-svg{width:100%;height:auto;display:block;overflow:visible}
.s2-stand,.s2-base,.s2-bezel,.s2-bar{stroke:#0a0a0a;fill:none;stroke-width:2;stroke-linecap:round}
.s2-screenbg{fill:#fff}
.s2-bdot{fill:#0a0a0a}
.s2-ball{fill:#0a0a0a;animation:s2roll 9s ease-in-out infinite}
.s2-page{animation:s2scroll 9s ease-in-out infinite}
.s2-hero-bg{fill:#f2f2f2}
.s2-prod{fill:#0a0a0a}
.s2-h{fill:#141414}
.s2-sub{fill:#c4c4c4}
.s2-cta2{fill:#0a0a0a}
.s2-card{fill:#ededed}
.s2-ic{fill:#0a0a0a}
.s2-tx{fill:#cfcfcf}
.s2-spark{fill:#0a0a0a;transform-box:fill-box;transform-origin:center}
.s2-spark.t1{animation:s2tw 2.6s ease-in-out infinite}
.s2-spark.t2{animation:s2tw 3.2s ease-in-out .7s infinite}
.s2-spark.t3{animation:s2tw 2.9s ease-in-out 1.2s infinite}
@keyframes s2roll{
0%,6%{opacity:0;transform:translate(0,0)}
12%{opacity:1;transform:translate(0,0)}
18%{transform:translate(6px,-12px)}
24%{transform:translate(34px,2px)}
33%{opacity:1;transform:translate(120px,72px)}
38%{opacity:0;transform:translate(150px,96px)}
100%{opacity:0;transform:translate(150px,96px)}
}
@keyframes s2scroll{
0%,34%{opacity:0;transform:translateY(0)}
41%{opacity:1;transform:translateY(0)}
80%{opacity:1;transform:translateY(-158px)}
90%{opacity:1;transform:translateY(-158px)}
96%,100%{opacity:0;transform:translateY(-158px)}
}
@keyframes s2tw{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:.85;transform:scale(1)}}
/* --- CTA: kara delik esintili cekim animasyonu --- */
.cta-orbit{position:relative;display:grid;place-items:start;width:min(78vw,360px);height:min(78vw,360px);margin-top:.5em} /* kutu boyutu korunur (yazi kaymaz), buton sol-ustte */
.grav-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.grav-cta{position:relative;z-index:2;pointer-events:auto;background:#0a0a0a;color:#fff;
padding:1em 2.4em;border-radius:999px;font-size:clamp(13px,1.2vw,16px);letter-spacing:.08em;
text-decoration:none;font-weight:400;white-space:nowrap;
box-shadow:0 6px 26px rgba(0,0,0,.28);transition:transform .35s ease,box-shadow .35s ease,letter-spacing .35s ease}
.grav-cta:hover{transform:scale(1.06);letter-spacing:.14em;box-shadow:0 12px 40px rgba(0,0,0,.4)}
/* MENU: en ustte kendi beyaz seridi (kara delik altinda kalir) */
/* MENU seridi yok; ortada parildayan beyaz logo */
.menubar{position:fixed;top:0;left:0;width:100%;z-index:20;box-sizing:border-box;
display:flex;justify-content:center;align-items:center;
padding:clamp(14px,2.2vh,26px) 0;background:transparent;pointer-events:none}
.brand{position:relative;display:inline-flex;align-items:center;pointer-events:auto;text-decoration:none;color:#fff}
/* Bu logo hic gorunmuyor (opacity:0; menude .nav-logo kullaniliyor) ama
dort katmanli filtre animasyonu (logoGlow) surekli calisiyordu: her
karede yeniden boyama. Animasyon kapatildi; logoGlow tanimi duruyor. */
.brand-x{height:clamp(50px,6.4vh,82px);width:auto;display:block;
opacity:0;transition:opacity .5s ease} /* hero'da GIZLI */
/* MORPH: menu kaydirinca sagdan ortaya kayar, rengi doner, logoyu acar */
.nav-logo-wrap{display:inline-flex;align-items:center;max-width:0;opacity:0;overflow:hidden;margin-right:0;
transition:max-width .6s ease,opacity .5s ease,margin-right .6s ease}
body.scrolled .nav-logo-wrap{max-width:70px;opacity:1;margin-right:.15em}
.nav-logo{display:block;height:clamp(20px,2.4vh,28px);width:auto}
body.scrolled .topnav a{color:#0a0a0a}
body.scrolled .lang{border-color:rgba(0,0,0,.3)}
body.scrolled .lang:hover{border-color:rgba(0,0,0,.55);box-shadow:0 0 14px rgba(0,0,0,.14)}
body.scrolled .lang-opt{color:rgba(0,0,0,.5)}
body.scrolled .lang-opt.active{color:#fff}
body.scrolled .lang-thumb{background:#0a0a0a;box-shadow:0 0 14px rgba(0,0,0,.3)}
/* hedon Studio: normalde gizli, logoya gelince belirir (logo yerinden oynamaz) */
.brand-txt{position:absolute;left:100%;top:50%;white-space:nowrap;
font-size:clamp(13px,1.4vw,19px);font-weight:300;letter-spacing:.02em;line-height:1;
color:#fff;text-shadow:0 0 14px rgba(255,255,255,.4);
opacity:0;transform:translate(4px,calc(-50% - 2px));pointer-events:none;
transition:opacity .35s ease,transform .35s ease}
.brand:hover .brand-txt{opacity:1;transform:translate(10px,calc(-50% - 2px))}
.brand-txt em{font-style:italic;font-weight:400}
@keyframes logoGlow{
0%,100%{filter:drop-shadow(0 0 8px rgba(255,255,255,.9)) drop-shadow(0 0 22px rgba(255,255,255,.6)) drop-shadow(0 0 48px rgba(255,255,255,.35)) drop-shadow(0 0 90px rgba(255,255,255,.2))}
50% {filter:drop-shadow(0 0 16px #fff) drop-shadow(0 0 46px rgba(255,255,255,.9)) drop-shadow(0 0 90px rgba(255,255,255,.6)) drop-shadow(0 0 150px rgba(255,255,255,.38))}
}
/* sol ust: editoryal, surekli degisen hizmet blogu */
.services{position:absolute;left:clamp(20px,5vw,58px);top:clamp(92px,13vh,156px);z-index:20;
color:#fff;pointer-events:none;max-width:min(52vw,560px);
text-shadow:0 0 8px rgba(255,255,255,.55), 0 0 22px rgba(255,255,255,.3)} /* isilti (isik yayar) */
.svc-top{display:flex;align-items:center;gap:14px;margin-bottom:1em;opacity:.6}
.svc-label{font-size:clamp(9px,.8vw,11px);letter-spacing:.34em;text-transform:uppercase}
.svc-idx{display:none}
.svc-name{font-size:clamp(28px,4.6vw,56px);font-weight:200;line-height:1.02;letter-spacing:-.012em;
min-height:2.04em; /* HEP 2 satirlik yer tutar -> konum sabit */
text-shadow:0 0 12px rgba(255,255,255,.7), 0 0 34px rgba(255,255,255,.4), 0 0 70px rgba(255,255,255,.22);
transition:opacity .85s ease,transform .85s ease}
.svc-tags{margin-top:1em;font-size:clamp(10px,1vw,13px);letter-spacing:.12em;opacity:.6;font-weight:300;
transition:opacity .85s ease,transform .85s ease}
.svc-anim.out{opacity:0;transform:translateY(-12px)}
.svc-bar{margin-top:1.7em;width:min(40vw,320px);height:2px;border-radius:2px;background:rgba(255,255,255,.2);position:relative}
/* Cubuk width yerine transform ile dolar: width her karede yerlesim +
boyama demekti (PageSpeed: birlestirilmemis animasyon). */
.svc-bar i{position:absolute;left:0;top:0;height:100%;width:100%;background:#fff;
transform:scaleX(0);transform-origin:left center;
box-shadow:0 0 8px rgba(255,255,255,.95),0 0 18px rgba(255,255,255,.55),0 0 30px rgba(255,255,255,.3)}
@property --beam{syntax:"";inherits:false;initial-value:0deg}
.svc-actions{display:flex;align-items:center;gap:clamp(1em,2vw,1.7em);margin-top:1.9em;pointer-events:none}
.svc-more{pointer-events:auto;color:#fff;font-size:clamp(12px,1.1vw,15px);letter-spacing:.05em;font-weight:300;
text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;opacity:.72;transition:.3s}
.svc-more:hover{opacity:1;text-underline-offset:6px}
.svc-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;
pointer-events:auto;isolation:isolate;background:transparent;
border:1px solid rgba(255,255,255,.18);color:#fff;
padding:.95em 2.6em;border-radius:999px;font-size:clamp(12px,1.1vw,15px);letter-spacing:.16em;
text-decoration:none;font-weight:400;
transition:border-color .45s,box-shadow .45s,transform .45s,letter-spacing .45s}
.svc-cta:hover{transform:translateY(-2px);letter-spacing:.24em;box-shadow:0 8px 30px rgba(255,255,255,.18)}
/* kendiliginden periyodik gecen isik parilti (canli) */
/* ISIK HUZMESI: stroke boyunca donen parlak nokta (yavas) */
.svc-cta::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
background:conic-gradient(from var(--beam),
transparent 0deg, transparent 300deg,
rgba(255,110,70,.34) 320deg, #ffffff 340deg, rgba(90,130,255,.34) 350deg,
transparent 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite:exclude;
filter:drop-shadow(0 0 5px rgba(255,180,150,.6)) drop-shadow(0 0 12px rgba(140,170,255,.4));
animation:ctaBeam 5s linear infinite}
@keyframes ctaBeam{to{--beam:360deg}}
/* "Basla" yazisinda kayan isik pirilti (shimmer) */
.cta-txt{background:linear-gradient(100deg,
rgba(255,255,255,.42) 0%, rgba(255,255,255,.42) 36%, #fff 50%, rgba(255,255,255,.42) 64%, rgba(255,255,255,.42) 100%);
background-size:230% 100%;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
animation:ctaText 3.2s linear infinite, ctaTextGlow 2.4s ease-in-out infinite}
@keyframes ctaText{0%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes ctaTextGlow{
0%,100%{filter:drop-shadow(0 0 5px rgba(255,255,255,.6))}
50% {filter:drop-shadow(0 0 13px #fff) drop-shadow(0 0 28px rgba(255,255,255,.6))}
}
body.scrolled .cta-txt{-webkit-text-fill-color:initial;color:inherit;background:none;animation:none}
/* MENU: hero'da sag ust (merkez capali + saga otelenmis). Tek eleman, morph eder. */
.topnav{position:fixed;top:clamp(16px,2.8vh,32px);left:50%;z-index:21;
display:flex;align-items:center;gap:clamp(1em,2vw,1.8em);pointer-events:auto;
padding:.6em clamp(1.1em,1.9vw,1.6em);border-radius:999px;transform-origin:center;
transform:translateX(calc(-50% + min(34vw,460px))); /* hero: saga */
/* ...ama sag kenardan tasmadan: orta genislikte (tablet) kapsulun
yarisi ekran disinda kaliyordu. Sag kenara 24px'ten fazla yaklasmaz. */
transform:translateX(min(calc(-50% + min(34vw,460px)), calc(50vw - 100% - 24px)));
background:transparent;border:1px solid rgba(255,255,255,.7);
box-shadow:0 0 16px rgba(255,255,255,.3),inset 0 0 10px rgba(255,255,255,.06);
transition:transform .6s cubic-bezier(.5,0,.2,1),background .6s ease,border-color .6s ease,box-shadow .6s ease,gap .6s ease,padding .6s ease}
/* kaydirinca ORTAYA kayar + beyaz kapsule doner (morph) */
body.scrolled .topnav{transform:translateX(-50%);
background:rgba(255,255,255,.75);border-color:rgba(0,0,0,.08);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
box-shadow:0 12px 40px rgba(0,0,0,.18)}
.topnav a{color:#fff;text-decoration:none;font-size:clamp(13px,1.15vw,17px);letter-spacing:.06em;
text-transform:lowercase;font-weight:300;opacity:.72;
transition:color .6s ease,opacity .3s ease,letter-spacing .3s ease}
.topnav a:hover{opacity:1;letter-spacing:.12em}
/* havalı kayan dil toggle */
.lang{position:relative;display:inline-flex;align-items:stretch;margin-left:.7em;
border:1px solid rgba(255,255,255,.35);border-radius:999px;overflow:hidden;
pointer-events:auto;cursor:pointer;font-size:clamp(10px,.9vw,12px);letter-spacing:.16em;
font-weight:500;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
transition:border-color .3s,box-shadow .3s;outline:none}
.lang:hover{border-color:rgba(255,255,255,.65);box-shadow:0 0 18px rgba(255,255,255,.25)}
/* Dil dugmesi artik bir baglanti (): menu baglantilarinin kurallari
(kucuk harf, soluk, hover'da harf acilmasi) ona gecmesin. */
.topnav a.lang,.topnav a.lang:hover{opacity:1;text-transform:none;letter-spacing:.16em;text-decoration:none}
/* klavyeyle gelince odak gorunsun (mouse tiklamasinda cikmaz) */
.lang:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.lang-opt{position:relative;z-index:2;padding:.5em .95em;color:rgba(255,255,255,.55);
text-transform:uppercase;user-select:none;transition:color .4s ease}
.lang-opt.active{color:#0a0a0a}
.lang-thumb{position:absolute;z-index:1;top:0;bottom:0;left:0;width:50%;
background:#fff;border-radius:999px;box-shadow:0 0 16px rgba(255,255,255,.55);
transition:transform .45s cubic-bezier(.55,.05,.2,1),background .4s ease,box-shadow .4s ease}
.lang.en .lang-thumb{transform:translateX(100%)}
/* dil degisince icerik kisa bir fade yapar */
.lang-fade [data-tr],.lang-fade #svcName,.lang-fade #svcTags{transition:opacity .28s ease;opacity:.25}
.nav{display:none}
/* MOBIL MENU. Masaustunde baglantilar kabi gorunmez (display:contents),
hamburger gizli. 760px altinda bes baglanti + dil dugmesi ekrana
sigmiyor, kapsul iki yandan tasiyordu: baglantilar acilir panele
tasinir, kapsulde logo + dil + hamburger kalir. */
.nav-baglantilar{display:contents}
.nav-ac{display:none}
@media(max-width:760px){
.topnav{left:auto;right:16px;transform:none;gap:.55em;padding:.45em .5em .45em .9em}
body.scrolled .topnav{left:16px;right:16px;transform:none}
body.scrolled .nav-logo-wrap{margin-right:auto}
.lang{margin-left:0}
.nav-ac{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
width:38px;height:38px;padding:0 10px;border:0;border-radius:999px;
background:transparent;color:#fff;cursor:pointer}
body.scrolled .nav-ac{color:#0a0a0a}
.nav-ac span{display:block;height:1.5px;border-radius:2px;background:currentColor;
transition:transform .3s ease}
.nav-ac[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav-ac[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.nav-ac:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.nav-baglantilar{display:flex;flex-direction:column;position:absolute;top:calc(100% + 10px);
right:0;min-width:220px;padding:10px;border-radius:22px;
background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
box-shadow:0 18px 50px rgba(0,0,0,.28);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
body.scrolled .nav-baglantilar{left:0;right:0}
.nav-baglantilar.acik{opacity:1;visibility:visible;transform:none;
transition:opacity .25s ease,transform .25s ease}
.topnav .nav-baglantilar a{color:#0a0a0a;opacity:.8;font-size:17px;padding:.7em .9em;border-radius:14px}
.topnav .nav-baglantilar a:hover{opacity:1;letter-spacing:.06em;background:rgba(0,0,0,.05)}
}
.nav a{color:#0a0a0a;text-decoration:none;font-size:clamp(11px,1.05vw,15px);letter-spacing:.28em;
text-transform:uppercase;font-weight:300;opacity:.72;transition:.3s}
.nav a:hover{opacity:1;letter-spacing:.4em}
.center{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);text-align:center}
.center h1{font-weight:200;font-size:clamp(28px,5vw,64px);margin:0 0 .5em;letter-spacing:.04em;text-shadow:0 2px 40px rgba(0,0,0,.6)}
.cta{pointer-events:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35);color:#fff;
padding:.9em 2.4em;border-radius:999px;font-size:clamp(13px,1.2vw,16px);letter-spacing:.3em;text-transform:uppercase;
cursor:pointer;backdrop-filter:blur(6px);transition:.3s}
.cta:hover{background:rgba(255,255,255,.16);letter-spacing:.4em}
.hint{font-size:12px;letter-spacing:.2em;opacity:.5;text-transform:uppercase}
.hero-word{position:absolute;pointer-events:none;font-weight:300;line-height:1;white-space:nowrap}
.word-in{left:50%;top:45%;transform:translate(calc(-50% - 99px),calc(-50% + 50px));color:#fff;
font-size:clamp(11px,1.5vw,22px);letter-spacing:.05em;font-style:normal;opacity:.95}
.word-left{right:55%;top:45%;transform:translate(-64px,calc(-50% + 50px));color:#0a0a0a;text-align:right;
font-size:clamp(11px,1.5vw,22px);letter-spacing:.02em;font-weight:600}
/* WebGL2 ya da ekran karti yoksa kara delik canli cizilmez; ayni
golgelendiriciden alinmis tek kare gosterilir (bkz. karadelik.js).
Tuval gibi: yukseklik 190vh'ye oturur, yatayda ortalanir. Marka yazisi
yine diskin parlak yuzeyinde, koyu kalir. */
.kara-delik-gorsel .bh-stage{background:#000 url(../gorsel/karadelik.webp) center top/auto 100% no-repeat}
.mark{display:none; /* logo artik shader'da kure uzerine sarili ciziliyor */
position:absolute;left:48%;top:37%;
transform:translate(calc(-50% + 25px),calc(-50% + 64px));
width:min(9vmin,64px);aspect-ratio:1;
filter:drop-shadow(0 0 8px rgba(255,255,255,.3));
pointer-events:none} /* BEYAZ logo: golge merkezinde */
.mark svg{width:100%;height:100%;display:block}