/* ============================================================ YAZI TIPLERI — KENDI SUNUCUMUZDA Google Fonts CDN kaldirildi. Sebep olcum: ziyaretcinin IP adresini yurt disina gonderen TEK sey oydu; kalkinca site sifir ucuncu taraf istegi yapiyor ve privacy sayfasi "hicbir cerez, hicbir ucuncu taraf" diyebiliyor. Yalnizca latin altkumesi indirildi; cyrillic/greek/vietnamese atildi. latin-ext (Turkce karakterler) yalniz arsivdeki TR sayfalari icin gerekli, arsiv/paylasilan/yazitipi/ altinda duruyor. Ikisi de DEGISKEN font: Inter Tight'in 400/500/600 istekleri Google'dan AYNI dosyayi donduruyordu (md5 ile dogrulandi), o yuzden agirlik basina ayri dosya yok -- tek dosya, araliklı font-weight. Iki dosya, 109,7 KB. Geri almak icin: bu blogu silin ve on HTML'e Google Fonts 'ini geri koyun (ve 'deki iki preload satirini silin). ============================================================ */ /* latin-ext alt kumeleri KALDIRILDI: Ingilizce sayfalarin hicbiri o unicode araliginda karakter icermiyor (10 sayfa tarandi), yani hic indirilmiyorlardi. Turkce arsiv onlara ihtiyac duyuyor ve donmus kopyada duruyorlar: arsiv/paylasilan/yazitipi/ + arsiv/paylasilan/ortak-arsiv.css */ @font-face{ font-family:'Fraunces'; font-style:normal; font-weight:400 700; font-display:swap; src:url(yazitipi/fraunces-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; } @font-face{ font-family:'Inter Tight'; font-style:normal; font-weight:400 600; font-display:swap; src:url(yazitipi/inter-tight-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; } /* ============================================================ FLECTA — ortak stil dosyasi index.html ve bes hizmet sayfasi bunu paylasir. CSS BOLUNMEDI, tamami tasindi: bolerken bir kuralin dusme riski var ve @media bloklari hem ortak hem sayfaya ozel kurallari birlikte tasiyor. Kullanilmayan kurallar onizlemede zararsiz. ============================================================ */ /* ============================================================ Flecta — DESIGN.md token'lari birebir ============================================================ */ :root{ --safety-orange:#ff4000; /* Yalnizca KUCUK METIN icin: #ff4000 Paper uzerinde 3.36:1, AA gecmiyor. Onceki deger #d93500 idi ve Paper uzerinde tam 4.51 tutuyordu -- yani HIC PAYI YOKTU. --kum bandi eklenince (247,243,234) o zeminde 4.25'e dustu, yani AA alti. Ton, sitede kullanilan EN KOYU dort zeminde birden gecen ilk degere cekildi (olculdu): kum 4.72 · paper 5.01 · cream 5.15 · bej 4.55 Yuzeylerde (buton, cizgi, nokta) her zaman --safety-orange kullanilir. */ --accent-text:#cd3000; --ink-black:#000000; --carbon:#1c1c1c; /* UC GRI KATMAN — hepsi WCAG AA (4.5:1) tabaninin ALTINDA duruyor. Eski degerler #6e6e6e / #828282 / #999999 idi ve ucu de kaliyordu: govde metni bej kart zemininde 4.44, etiketler 3.40, alt notlar 2.57. Acik zeminde 4.5:1 tabani ~#6f6f6f; yani soluk gri katmani AA ile mumkun degil. Hiyerarsi tabanin ustune degil ALTINA kuruldu: fog 4.81 (alt not) < slate 5.50 (etiket) < graphite 6.31 (govde) Olculen zeminler: paper, cream, kum, bej (kart hover), ash. */ --graphite:#5d5d5d; --slate:#666666; --fog:#6f6f6f; --paper:#fafafa; --cream:#fdfef8; /* Bolum bandi. --cream'DEN AYRI olmak zorunda: --cream ayni zamanda mockup zemini ve urun ekranlarinin kendi kose tonuyla hizali (250-255). Onu isitmak cerceve icinde ton kirilmasi yapar -- daha once duzeltilmis bir hata. Olculdu: --cream (253,254,248) sayfadan DAHA PARLAK ve yesile caliyordu; sicak bir serit olmasi gerekirken yikanmis beyaz basamak gibi okunuyordu. --kum paper'dan bir tik KOYU (243,4 / 250) ve belirgin sicak (R-B = +13); --bej'in (+15) hemen altinda, ayni aileden. */ --kum:#f7f3ea; /* Hizmet karti hover zemini. Palette sicak ton yoktu; linen (#ecebe8) gri kaliyordu, referanstaki bej hissi icin sariya kaydirildi. */ --bej:#f3efe4; --ash:#f1f1f1; --linen:#ecebe8; /* Hizmet ve surec kartlarindaki buyuk 01-05 rakamlari. Notr gri degil, sicak bir ton -- Flecta'nin paleti sicak. Eskiden #a8a294 idi ve 2.44:1 veriyordu: "dekoratif filigran" diye birakilmisti ama bunlar GORUNEN METIN, WCAG istisnasi yok. 56-64px oldugu icin buyuk metin esigi gecerli (3:1); paper 3.00, cream 3.09. */ --sayi:#989181; --font-display:'Fraunces',Georgia,'Times New Roman',serif; /* Maket logolarindaki f↗ icin. Fraunces LATIN ALTKUMESI -- ok glifi (U+2197) yok. --font-display zinciri Georgia/Times/serif uzerinden ilerliyor, iOS'ta hicbirinde metin glifi olmadigi icin sira Apple Color Emoji'ye geliyordu ve ok MAVI EMOJI KARE olarak ciziliyordu. CSS geri donusu karakter karakter calisir: sans zinciri generic serif'ten ONCE gelince 'f' yine Fraunces'ten, ok sistem sans'indan (iOS'ta San Francisco) metin glifi olarak geliyor. Kanit: ayni sayfada --font-ui baglamindaki oklar iOS'ta zaten dogru cikiyor. Kullanan dort kural: .wa-own-core>span, .ws-symbol, .cb-brand, .au-logo. O kurallarda satir yuksekligi de 1.5'e SABITLENDI -- 'normal' iken kutu yuksekligi hangi yedek fontun secildigine bagliydi, yani platforma gore degisiyordu. Olculdu: 1.5 ile masaustu yuksekligi birebir korunuyor. */ --font-mark:'Fraunces',ui-sans-serif,system-ui,-apple-system,sans-serif; --font-ui:'Inter Tight',ui-sans-serif,system-ui,-apple-system,sans-serif; --page-max:1360px; --r-card:30px; --r-mockup:40px; --r-band:70px; --r-pill:100px; --r-nav:6px; } /* ---- karanlik tema ------------------------------------------------------- Yalnizca renk token'lari degisir; olculer, yaricaplar ve fontlar ortak. Kontrastlar WCAG formuluyle hesaplandi (zemin #121212'ye karsi): ink-black 17.0 · carbon 15.0 · graphite 7.7 · slate 5.6 · accent-text 6.6 safety-orange DEGISMIYOR: #ff4000 koyu zeminde 5.34 veriyor, yani acik temada AA'yi gecemeyen marka turuncusu burada sorunsuz. */ :root[data-tema="koyu"]{ --ink-black:#f4f4f2; --carbon:#e6e6e3; --graphite:#b0b0ac; --slate:#9a9a96; --fog:#8a8a86; --paper:#121212; --cream:#191918; --kum:#1a1917; /* paper #121212'den bir tik sicak */ --bej:#252320; --ash:#242423; --linen:#2e2e2c; --sayi:#6b6b62; /* koyu: paper 3.48, cream 3.27 -- buyuk metin esigi 3:1 */ --accent-text:#ff6b38; color-scheme:dark; } :root[data-tema="acik"]{color-scheme:light} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--ink-black); font-family:var(--font-ui); font-size:16px; line-height:1.5; letter-spacing:-.16px; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} /* ---- tip olcegi ---- */ .t-display{font-family:var(--font-display);font-weight:600;font-size:64px;line-height:1.06;letter-spacing:-1.4px;margin:0} .t-h-lg{font-family:var(--font-display);font-weight:600;font-size:42px;line-height:1.14;letter-spacing:-.9px;margin:0} .t-h{font-family:var(--font-display);font-weight:400;font-size:32px;line-height:1.2;letter-spacing:-.2px;margin:0} .t-body{font-size:18px;line-height:1.5;letter-spacing:-.36px;margin:0} .t-body-sm{font-size:16px;line-height:1.5;letter-spacing:-.16px;margin:0} .t-caption{font-size:14px;line-height:1.4;letter-spacing:-.1px;margin:0} /* .dot bir GLIF, yuzey degil: baslik sonundaki nokta ve soru isareti okunan metnin parcasi, dolayisiyla metin kontrasti gecerli. --safety-orange (#ff4000) kucuk basliklarda 3.36 veriyordu (22px w600 -> esik 4.5). --accent-text zaten bu isin AA'li karsiligi: 4.55-5.15. Buton, cizgi ve diger YUZEYLERDE --safety-orange kullanilmaya devam ediyor. */ .dot{color:var(--accent-text)} .muted{color:var(--graphite)} .eyebrow{font-family:var(--font-ui);font-weight:600;font-size:14px;letter-spacing:-.1px;color:var(--accent-text);margin:0} .mark{ background-image:linear-gradient(var(--safety-orange),var(--safety-orange)); background-repeat:no-repeat;background-size:100% 2px;background-position:0 100%; padding-bottom:2px; } /* ---- yerlesim ---- */ /* Yan bosluk EKRANLA BUYUYOR. Once her genislikte sabit 24px'ti ve hicbir medya sorgusu ona dokunmuyordu; 1000-1400px arasi pencerelerde .wrap viewport'u neredeyse doldurdugu icin icerik kenara yapisiyordu. clamp: 390px'te 24px (mobilde bosluk kaybi yok), 1024'te 41px, 1600 ve ustunde 48px. max-width padding'i ICERIYOR (border-box), yani genis ekranda icerik 1312 -> 1264'e iniyor: kenar nefes aliyor. 4vw/56px denendi ve GERI ALINDI: 1025-1300px bandinda hero basligini fazladan daraltiyordu. O bantta .t-display hala 64px (kucultme kirilmasi 1024'te) ve .hero-grid hala iki sutunlu, yani baslik zaten 4-6 satira dusuyor -- ONCEDEN BERI. 3vw/48px o banttan aldigini geri veriyor. */ .wrap{max-width:var(--page-max);margin:0 auto;padding-inline:clamp(24px,3vw,48px)} section{padding-block:72px} /* ---- butonlar ---- */ .btn{ display:inline-flex;align-items:center;justify-content:center; font-family:var(--font-ui);font-weight:500;font-size:15px;letter-spacing:-.1px; border-radius:var(--r-pill);text-decoration:none;cursor:pointer; transition:opacity .15s ease,background-color .15s ease,color .15s ease; } .btn-primary{background:var(--ink-black);color:var(--paper);border:1px solid var(--ink-black);padding:12px 24px} .btn-primary:hover{opacity:.85} /* ---- nav ---- */ .nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid transparent} .nav-in{max-width:var(--page-max);margin:0 auto;padding:14px clamp(24px,3vw,48px);display:flex;align-items:center;gap:24px} .brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink-black)} /* stroke-width path'lerde DEGIL burada: kalitsal ozellik oldugu icin ile klonlanan symbol'e de gecer. Boylece ayni logo farkli boyutlarda farkli kalinlikla kullanilabilir (optik boyutlandirma). */ .brand-mark{width:24px;height:24px;flex:none;color:var(--ink-black);stroke-width:3.2} .brand-name{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.4px} .nav-links{display:flex;gap:24px;margin:0 auto} .nav-links a{ font-weight:500;font-size:14px;letter-spacing:-.1px;color:var(--ink-black); text-decoration:none;padding:6px 8px;border-radius:var(--r-nav); } .nav-links a:hover{color:var(--graphite)} /* ---- hero ---- */ .hero{padding-top:56px;padding-bottom:0;position:relative} /* ---- hero: surekli akan zemin ------------------------------------------ Scroll'a BAGLI DEGIL -- sayfa dursa da akmaya devam eder. Iki katman: 1) veri cizgisi -> yukaridan asagi dusen ince turuncu segmentler 2) tarama bandi -> arada bir gecen genis, cok soluk dalga (Uctuncusu 46px'lik bir izgaraydi; kullanici istemedi, kaldirildi.) Hepsi transform ile animasyonlu (background-position degil): boylece compositor'da doner, paint tetiklemez. Kontrast bilerek cok dusuk; ustundeki metin olculdu, okunurluk degismedi. Hero ekrandan cikinca IntersectionObserver duraklatiyor. */ .hero-zemin{ position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; /* Iki maske birlikte (intersect): 1) radial -> ust/alt kenarda sert bir bitis cizgisi olusmasin 2) yatay -> zemin videonun SOLUNDA bitsin. Video opak (zemini dosyaya pisirilmis, Safari alfa desteklemiyor); ustune denk gelen izgara kesiliyor ve karakterin etrafinda izgarasiz bir dikdortgen kaliyordu -- olculdu: video sol kenari %51,5'te basliyor, sonum %46'da bitiyor, ~80px pay var. */ -webkit-mask-image:radial-gradient(115% 95% at 30% 38%,#000 34%,transparent 82%), linear-gradient(90deg,#000 30%,transparent 46%); mask-image:radial-gradient(115% 95% at 30% 38%,#000 34%,transparent 82%), linear-gradient(90deg,#000 30%,transparent 46%); -webkit-mask-composite:source-in; mask-composite:intersect; } .hero-zemin i{position:absolute;display:block;animation-play-state:paused} .hero-zemin.gorunur i{animation-play-state:running} /* Zemin absolute; hero icindeki normal akis ogeleri onun ALTINDA kalmasin. */ .hero>.wrap{position:relative;z-index:1} .hz-akis{ top:-30%;width:1px;height:26%;opacity:.2; background:linear-gradient(180deg,transparent,var(--safety-orange),transparent); animation:hzAkis var(--s,10s) linear infinite; animation-delay:var(--g,0s); /* NEGATIF: faz kilitler, bekletmez */ } @keyframes hzAkis{from{transform:translateY(0)}to{transform:translateY(520%)}} .hz-tarama{ left:0;right:0;top:-32%;height:32%; background:linear-gradient(180deg,transparent,rgba(255,64,0,.032),transparent); animation:hzTarama 17s ease-in-out infinite; } @keyframes hzTarama{ 0%{transform:translateY(0);opacity:0} 9%{opacity:1} 76%{opacity:1} 88%,100%{transform:translateY(420%);opacity:0} } @media (prefers-reduced-motion:reduce){ .hero-zemin i{animation:none!important} .hz-akis,.hz-tarama{display:none} } /* Tek kolona dusen yerlesimde video ortada duruyor; zemini soluna sinirlayacak bir "sol" kalmiyor, izgara yine videonun altinda kesilirdi. Ayrica mobilde bos yere pil yakmasin. */ @media (max-width:900px){ .hero-zemin{display:none} } .hero-grid{ /* Sag sutun 700 -> 660. Yan bosluk clamp'e cevrilince (24px sabit -> 4vw) icerik kolonu 1312'den 1248'e indi ve hero basligi UC satirdan DORT satira dustu, son satirda tek basina "On." kaldi. Olculdu: uc satira sigmasi icin 12px eksikti. Sagdaki sutunda video 597px, yani ~100px bosluk vardi; 40px oradan alindi. REHBER:61 zaten bu satir sayisinin kontrol edilmesi gerektigini kaydediyor. */ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,660px); gap:0;align-items:start; } .hero-col{padding:0 44px} .hero-col:first-child{padding-left:0} .hero-col:last-child{padding-right:0} .hero-mid{border-left:1px solid var(--linen);align-self:end} .hero-art{position:relative;z-index:1;display:flex;justify-content:center} /* Cizim alttan %78'de kirpilmis; bant gidince o kesik aciga cikiyor. Maske figuru kagida karistirarak bitirir -> sert yatay cizgi olmaz. Video, cizim.png ile AYNI en-boy oranina (0.853) kirpildi; boylece 700px yukseklikte yine 598px genisler ve yerlesim hic degismez. Video ALFASIZ: yesil zemin, sayfa rengiyle (#fafafa) degistirildi. Safari VP9'un alfa kanalini desteklemiyor -- alfali WebM'de zemini siyah dikdortgen olarak gosteriyordu. Opak MP4 her tarayicida ayni calisir; zemin olcuduk, tam 250,250,250 (= --paper). */ .hero-art img,.hero-art video{ height:700px;width:auto;max-width:none;display:block; /* Iki maske birlikte: 1) alt -> cizimin kesik alt kenarini kagida karistirir (eskiden beri var) 2) yan -> videonun zemini sayfa renginden 1 birim sapsa bile kenar CIZGI olarak gorunmesin. Koyu temada 1 birimlik fark band yapiyordu; maske bunu renk kalibrasyonuna bagimli olmadan kapatir. UST kenar da maskeli ama SADECE %2.6'ya kadar: karakterin en ust noktasi olculdu, kadrajin tam %3.00'inde basliyor -> 0.4%% (5px) pay kaliyor. Yan maske %9/%91: karakter %13.8-86.2 arasinda, dokunmuyor. */ -webkit-mask-image:linear-gradient(to bottom,transparent,#000 2.6%,#000 62%,transparent 97%), linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(to bottom,transparent,#000 2.6%,#000 62%,transparent 97%), linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); -webkit-mask-composite:source-in; mask-composite:intersect; } /* sol kolon dizilimi: baslik -> destek -> CTA -> hizmet adlari */ .hero-sol{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding-bottom:40px} .hero-destek{max-width:46ch} .hero-ayri{font-family:var(--font-ui);font-size:13px;color:var(--fog);margin:4px 0 0} .hero-destek p+p{margin-top:12px} .hero-urunler{display:flex;flex-direction:column;gap:14px;margin-top:8px; padding-top:24px;border-top:1px solid var(--linen);width:100%} /* 46ch siniri YALNIZCA alt satirda: hizmet adlari satiri o genislikte iki satira sariyordu ("Chatbots" alta dusuyordu), oysa sol kolonda 140px daha yer vardi. Alt satir okunurluk icin dar kalir. */ .hero-ayri{max-width:46ch} /* Dort urun adi TEK SATIRDA, aciklamasiz. Aciklamalar Bolum 3'teki kartlarda zaten (daha iyi) var; hero'da tekrar edince sayfanin ilk ekrani urun listesine donuyordu. Aralarindaki kucuk turuncu kareler ayrac gorevinde. */ .hero-hizmetler{ display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0; font-family:var(--font-ui);font-weight:600;font-size:15px;letter-spacing:-.1px; color:var(--ink-black); } .hero-hizmetler i{width:6px;height:6px;border-radius:2px;background:var(--safety-orange); display:block;flex:none} .hero-hizmetler i:first-child{display:none} /* bastaki ayrac gereksiz */ .hero-cta{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:3} /* ---- mockup cerceve ---- */ .mockup{ border:1px solid var(--ink-black);border-radius:var(--r-mockup); background:var(--cream);overflow:hidden; } .mockup-bar{ display:flex;align-items:center;gap:6px;padding:12px 16px; border-bottom:1px solid var(--linen);background:var(--paper); } .mockup-bar i{width:8px;height:8px;border-radius:50%;background:var(--linen);display:block} .mockup-bar span{margin-left:8px;font-size:12px;color:var(--fog)} /* 1230% = yuksekligin 12.3 kati = 86 punto yol. Eski deger 1000% idi ve 8 satirlik listeye goreydi; yeni gorselde 10 satir var, band son iki satira hic ulasmiyordu. Skor gecikmeleri bu hiza kilitli. */ /* Iki parca SIRAYLA doluyor: once Trigger->Action, sonra Action->Complete. Gecikme degil keyframe yuzdesi -- gecikme ile pencereler ortusuyor. */ /* Dort adim, dort pencere, ORTUSMEZ: her biri ~1,4 sn yanik kalip soner, sonraki yanar. Opaklik .10 -- dolgu vurgu olsun, kutuyu boyamasin. */ /* Adim dolgusuyla ayni seviye (.10): iki turuncu vurgu ayni ekranda farkli koyulukta olursa biri hata gibi okunuyor. */ /* ---- sekmeli yapisan yigin (urun bolumleri) ------------------------------ Kalip arsivden: arsiv/bolum-8.5-sticky-yigin.html. Humble'daki ust uste yapisan klasor kartlarinin aynisi -- kutuphane, JS, gorsel yok, tamamen sticky konumlandirma. Once bes ayri bolum olarak alt alta duruyordu ve sayfayi 8196px'e cikarmisti. */ /* margin-top: bolume baslik eklenince (REHBER 4.17) ilk kartin sekmesi h2'nin dibine yapisti -- olculdu, aradaki bosluk 0px idi. Diger bolumlerde baslik ile icerik arasi ~40px; buradaki sekme h2'nin altina tasidigi icin biraz daha genis veriliyor. */ .yigin{display:block;margin-top:46px} /* Son kartin yapisik kalmasi icin ALTINDA GERCEK ICERIK olmali. Arsivde padding-bottom denenmis, ISE YARAMAMIS: Chrome sticky'yi containing block'un CONTENT kutusuyla sinirliyor, padding sayilmiyor. ::after gercek blok uretir ve sticky sinirini gercekten uzatir. 300px -> 90px. 300 konuldugunda yiginin ALTINDA HIC ICERIK YOKTU; sonradan yigin sonu CTA'si eklendi. Ikisi ust uste binince son kart bittikten sonra 306px boyunca ekranda asili kaliyordu -- olculdu, 820px'lik ekranin %37'si ve o boyunca hicbir sey olmuyordu. 90px kisa bir bekleme birakiyor: kart yerine oturuyor, bir an duruyor, sonra CTA onu yukari itiyor. */ .yigin::after{content:"";display:block;height:90px} /* Taban 102px = sticky nav 78px + 24px nefes payi. Adim 36px, Humble'daki 26 DEGIL: ustteki karttan gorunecek serit sekmenin metnini tam gostermeli; bizim tipografide metnin alt siniri 34.5px ve 26px'te metin 9px kesiliyordu (arsivde olculmus). */ /* Kartlar arasi mesafe: arsivde 30px'ti (o bolumun kartlari salt metindi ve kisaydi). Burada kart 618px ve viewport 1296px -- 30px ile bir sonraki kart ustteki daha okunmadan uzerine biniyordu, olculdu: ayni anda UC kart ekrandaydi. vh'ye bagli bosluk, yapisan karta tek basina gorunecek sure birakiyor. */ /* background OPAK olmak zorunda. Sekme `inline-flex`, yani kartin ust 46.5px'lik bandi sekme pilinin DISINDA seffaf kaliyordu ve altta yapisik duran onceki kartin GOVDESI oradan gorunuyordu -- basligi ve urun ekrani scroll boyunca pesten geliyordu. Olculdu: iki kart da yapisikken kalici 36px, ustteki kart hala yukselirken 46px sizinti. Sizinti YAPISAL: ortusme min(adim, sekme) kadar ve adim 36px'te sabit (26px'te sekme metni 9px kesiliyor). Yani band opak KALMAK zorunda. Karta ZEMIN VERILMIYOR. Iki kez denendi, ikisi de gorunur oldu: --paper -> kartin onunde SAYFA RENGINDE bir cubuk supuruyordu --cream -> renk tuttu ama zemin KARE koseli, govde 30px yuvarlak; kartin ustunde kare krem bir OMUZ kaliyordu (olculdu) Cozum zemin degil YAPI: sekme artik tam genislikte bir UST SERIT ve kartin kendi seklini tasiyor, band diye acikta bir alan kalmiyor. Karta ayrica zemin verilirse o KARE zemin seridin yuvarlak koselerinin altindan gorunur ve omuz geri gelir -- bu yuzden verilmiyor. */ .yigin-kart{position:sticky;top:calc(102px + var(--i) * 36px); padding-bottom:clamp(30px,24vh,300px)} .yigin-kart:last-child{padding-bottom:0} /* Sekme: ust koseleri yuvarlak, alt kenari govdeyle kaynasik. 40px baslangic ofseti sekmenin kartin yuvarlak kosesine binmesini engeller; 132px adim merdiven gorunumunu verir. */ /* Sekme KARTIN UST SERIDI: tam genislik, kartin kendi sekli (yuvarlak ust koseler + kenarlik). Once `inline-flex` idi; yanindaki 46px'lik serit acikta kaliyor ve arkadaki kartin govdesi oradan gorunuyordu. Opak yapilinca da kare krem bir omuz olusuyordu. Serit kartin PARCASI olunca ikisi de bitiyor: sizacak bosluk yok, ayri duran zemin yok. Basligin kaydirmasi artik margin degil PADDING ile -- serit tam genislik, kayan sey yalnizca metin. Merdiven gorunumu boyle korunuyor. */ .yigin-sekme{ display:flex;align-items:baseline; /* margin-bottom:-1px KALDIRILDI. Sekme ayri bir pil iken govdenin ust kenarligini ortmesi dogruydu (pil govdeye kaynasiyordu). Artik serit govdenin USTUNDE duran bir band; negatif margin govdenin ust kenarligini ortuyor ve ikisi ayrimsiz tek bir krem alan haline geliyordu. Kaldirilinca govdenin --linen ust kenarligi ortaya cikiyor ve serit ayri okunuyor. */ margin-left:0; padding:11px 22px 12px calc(40px + var(--i) * 132px); background:var(--cream);border:1px solid var(--linen);border-bottom:0; border-radius:var(--r-card) var(--r-card) 0 0; position:relative;z-index:1; } .yigin-sekme b{font-family:var(--font-ui);font-weight:600;font-size:15px; letter-spacing:-.1px;color:var(--carbon)} .yigin-govde{ background:var(--cream);border:1px solid var(--linen); /* Ust koseler DUZ: ustunde sekme seridi var, yuvarlak kalsalardi seridin duz alt kenarinin altinda iki kertik gorunurdu. Ust kenarlik duruyor -- serit ile govdeyi ayiran ince cizgi o. */ border-radius:0 0 var(--r-card) var(--r-card);padding:38px 40px; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:52px;align-items:center; } /* Yapisan kartlar ust uste binince alttakinin GOVDESI gorunmez olur ama IntersectionObserver onu hala "ekranda" sayar -- olculdu: yigin ortasinda dort ekran `gorunur` sinifindaydi, gerceklte tek kartin govdesi aciktaydi ve iki ekranin animasyonu bosa donuyordu. Ortulen karti asagidaki scroll kontrolu isaretliyor. */ .yigin-kart.ortulu .ekran *, .yigin-kart.ortulu .ekran *::before, .yigin-kart.ortulu .ekran *::after{animation-play-state:paused !important} .yigin-metin{display:flex;flex-direction:column;gap:14px;align-items:flex-start} .yigin-metin .t-body{max-width:44ch} .yigin-art{min-width:0} @media (max-width:900px){ /* Dar ekranda yapisan kart viewport'un tamamini yer -> yigin iptal. */ .yigin::after{display:none} .yigin-kart{position:static;top:auto;padding-bottom:18px} .yigin-sekme{padding-left:22px} .yigin-govde{grid-template-columns:1fr;gap:28px;padding:26px 22px} } @media (prefers-reduced-motion:reduce){ .yigin::after{display:none} .yigin-kart{position:static;top:auto} } .card{ border:1px solid var(--linen);border-radius:30px;background:var(--cream); padding:32px;display:flex;flex-direction:column;gap:10px; } .card h3{font-family:var(--font-display);font-weight:400;font-size:21px;letter-spacing:-.15px;margin:0} /* ---- hizmet kartlari (2x2, ACILABILIR) ---------------------------------- Chief of Happiness'in kart duzeni olculup alindi. Referansta kart HOVER'da aciliyor; CSS kurallari birebir okundu (golge + numara turuncu + isim beyaz). Flecta'da golge YOK -- sayfa genelinde "golge 0" kurali var, ayrisma zemin ve kenarlik tonuyla yapiliyor. Kabuk yeni degil: mevcut .card (radius 30, 1px linen, cream zemin). Acik/kapali durumu tek bir yerden surulur: kartin [aria-expanded] degeri. Boylece erisilebilirlik durumu ile gorsel durum ayrisamaz. */ .hizmetler{ display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px; /* Kartlar kendi yuksekliginde kalsin. Varsayilan `stretch` ile bir kart acilinca YANINDAKI kapali kart da uzuyor ve alti bombos kaliyordu. */ align-items:start; } /* Kapaliyken kart sayfa zemininde durur (--paper), yani zemin farki yok; ayrimi yalnizca 1px linen kenarlik yapar. Uzerine gelince beje doner. */ .hiz{ background:var(--paper); position:relative;gap:0;padding:30px 32px 24px;overflow:hidden; text-align:left;font:inherit;color:inherit;width:100%;cursor:pointer; transition:background-color .45s cubic-bezier(.44,0,.56,1), border-color .45s cubic-bezier(.44,0,.56,1); } .hiz:focus-visible{outline:2px solid var(--safety-orange);outline-offset:3px} /* Uzerine gelince bej. Once --paper idi ve kartin kapali zemini (--cream) ile arasinda yalnizca 3-4 ton vardi, degisim pratikte gorunmuyordu. */ .hiz[aria-expanded="true"]{background:var(--bej);border-color:var(--slate)} .hiz-no{ font-family:var(--font-display);font-weight:600;font-size:64px;line-height:.9; letter-spacing:-2px;color:var(--sayi);display:block;margin-bottom:14px; transition:color .45s cubic-bezier(.44,0,.56,1); } .hiz[aria-expanded="true"] .hiz-no{color:var(--safety-orange)} .hiz h3{font-family:var(--font-display);font-weight:600;font-size:26px; letter-spacing:-.5px;margin:0 0 8px;color:var(--ink-black); padding-right:120px;transition:padding-right .4s cubic-bezier(.44,0,.56,1)} /* Kart acilinca ikon cekiliyor, metin genisleyebilir. */ .hiz[aria-expanded="true"] h3, .hiz[aria-expanded="true"] .hiz-aciklama{padding-right:0} /* Kapali aciklama: kart acilinca yerini gorsele birakir. grid-template-rows 0fr->1fr, yuksekligi BILMEDEN akici kapanma saglar (max-height tahmini gerektirir, uzun metinde tokezler). */ .hiz-aciklama{ display:grid;grid-template-rows:1fr; /* Kapali kartlarin yuksekligi ESIT olsun. Aciklamalar 2 ya da 3 satir sariyor (olculdu: 39,2px / 58,8px, satir basi 19,6px) ve izgarada `align-items:start` oldugu icin fark kartlara geciyordu: yan yana iki kart 272px ve 292px. Onceden 01 acik basladigi icin gorunmuyordu; acik kart kaldirilinca ortaya cikti. 3lh en uzun aciklamanin yuksekligi, em yedegi eski tarayicilar icin. */ min-height:calc(3 * 1.4em); min-height:3lh; /* max-width degil padding: ikonun yerini birakiyor. Olculdu -- 42ch metni 615px'e kadar uzatiyordu, ikon 514'te basliyor, ust uste biniyorlardi. */ padding-right:120px; transition:grid-template-rows .45s cubic-bezier(.44,0,.56,1), opacity .3s cubic-bezier(.44,0,.56,1), padding-right .4s cubic-bezier(.44,0,.56,1); } .hiz-aciklama>*{overflow:hidden;margin:0} /* Aciklama YALNIZCA panelde gercek bir gorsel varken kapanir. Aksi halde (gorseller heniz uretilmedi) acik kartin ici bombos kaliyordu: aciklama gidiyor, yerine hicbir sey gelmiyordu -- olculdu, 39px -> 0. :has() desteklemeyen tarayicida kural hic uygulanmaz; aciklama kapanmaz, gorsel de altina eklenir. Zararsiz gerileme. */ .hiz[aria-expanded="true"]:has(.hiz-gorsel img) .hiz-aciklama{grid-template-rows:0fr;opacity:0} /* Kapali karttaki kucuk ikon. Buyuk gorselle AYNI nesneyi gosteriyor ama gravur teknigiyle: kart acilinca ikon soluyor, yerine ayni nesnenin suluboya buyugu geliyor -- gecis "o sey buyudu" gibi okunuyor. Absolute: metin max-width 42ch ile zaten dar kaliyor, cakismiyor (olculdu). Boskan gizli; konunca kendiliginden gelir. */ .hiz-ikon{ position:absolute;right:30px;top:28px;width:104px;aspect-ratio:1; display:flex;align-items:center;justify-content:center;pointer-events:none; transition:opacity .4s cubic-bezier(.44,0,.56,1); } .hiz-ikon:empty{display:none} .hiz-ikon img{width:100%;height:100%;object-fit:contain;display:block} /* Kart acilinca ikon cekilir -- buyuk gorsel onun yerini aliyor. */ .hiz[aria-expanded="true"] .hiz-ikon{opacity:0} /* Koyu temada siyah murekkep gravur kaybolur; ters cevrilip yumusatilir. */ :root[data-tema="koyu"] .hiz-ikon img{filter:invert(1) brightness(.92)} /* Acilan gorsel paneli -- ayni teknik, ters yon. */ .hiz-panel{ display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .45s cubic-bezier(.44,0,.56,1), opacity .35s cubic-bezier(.44,0,.56,1) .05s; } .hiz-panel>*{overflow:hidden} .hiz[aria-expanded="true"] .hiz-panel{grid-template-rows:1fr;opacity:1} /* 6. hucre: KART DEGIL, The Draw'a cagri. .hiz sinifini bilerek ALMIYOR -- JS acilir kartlari `.hiz` ile topluyor; bu kutu acilmamali, hover'da tepki vermemeli, aria-expanded almamali. Kabuk (.card) ayni oldugu icin izgarada yabanci durmuyor. */ .hiz-draw{ position:relative; /* ikon buna gore konumlanir */ padding:30px 32px;display:flex;flex-direction:column; align-items:flex-start;justify-content:center;gap:12px; background:var(--paper);border-style:dashed; } .hiz-draw h3{font-family:var(--font-display);font-weight:600;font-size:22px; letter-spacing:-.4px;margin:0;color:var(--ink-black)} .hiz-draw p{max-width:40ch;margin:0} /* Ikonun yerini birak: kartlarda pay verilmeyince metin ikonun altina giriyordu (olculdu). Bu kutu acilmadigi icin pay kalici. */ .hiz-draw h3,.hiz-draw p{padding-right:120px} .hiz-draw-cta{ font-family:var(--font-ui);font-weight:500;font-size:13px;letter-spacing:-.1px; color:var(--accent-text);text-decoration:none;margin-top:4px; transition:opacity .4s cubic-bezier(.44,0,.56,1); } .hiz-draw-cta:hover{opacity:.62} .hiz-alt{ display:flex;align-items:center;justify-content:space-between;gap:16px; margin-top:22px;padding-top:16px;border-top:1px solid var(--linen); } /* Ana sayfa: hizmet secimi ve hizmetleri birlestiren ornek akislar. */ .home-services,.home-workflows{scroll-margin-top:90px} /* align-items: start, stretch DEGIL. Hover'da bir kart acilinca stretch yanindaki KAPALI karti da uzatiyor ve alti bombos kaliyor (ayni tuzaga websites.html'de bir kez dusuldu). Olculdu: start'ta bes kart yine 285px, yalniz The Draw kutusu 252'ye dusuyordu -- o yuzden ona align-self. */ .home-services .hizmetler{align-items:start} .home-services .hiz-draw{align-self:stretch} .home-services .hiz-baglanti{text-decoration:none;display:flex;flex-direction:column} .home-services .hiz-baglanti:hover, .home-services .hiz-baglanti:focus-visible{background:var(--bej);border-color:var(--slate)} .home-services .hiz-baglanti:hover .hiz-no{color:var(--safety-orange)} /* Hover'da suluboya gorsel: kart acilir kartken bu davranis vardi, link'e donusturulunce dusmustu. Tetikleyici eskiden aria-expanded idi; link kartta o durum hic olusmuyor, yerine :hover / :focus-visible. (hover:hover) SART -- dokunmatikte yapiskan hover olur, kart tiklandiktan sonra acik kalirdi. Ayni kalip hizmet kartlarinda ve urun menusunde de var. */ @media (hover:hover) and (pointer:fine){ .home-services .hiz-baglanti:hover .hiz-panel, .home-services .hiz-baglanti:focus-visible .hiz-panel{grid-template-rows:1fr;opacity:1} /* Ikon soluyor: yerini ayni nesnenin suluboya buyugu aliyor, gecis "o sey buyudu" diye okunuyor. */ .home-services .hiz-baglanti:hover .hiz-ikon, .home-services .hiz-baglanti:focus-visible .hiz-ikon{opacity:0} } .home-services .hiz h3{padding-right:0;max-width:24ch} /* min-height iki satir: metin uzunluguna bagli hiza kirilgan. Ingilizce'de bes metnin besi de tesadufen iki satir sariyordu ve kartlar 285px'te esitlenmisti; Turkcede 02 tek satira dusunce o kart 261'e indi. Iki satir sabitlenince dil ve yazitipi degisse de hiza durur. Ayni kalip .hiz-aciklama icinde de var. */ .home-services .home-service-copy{margin:2px 0 22px;max-width:48ch; min-height:calc(2 * 1.5em);min-height:2lh} .home-service-link{margin-top:auto;padding-top:16px;border-top:1px solid var(--linen); font-size:14px;font-weight:600;color:var(--accent-text)} .home-services .hiz-ikon{width:80px;top:22px} .home-services .hiz-draw{justify-content:flex-start} .home-services .hiz-draw h3{margin-top:72px;padding-right:0} .home-services .hiz-draw p{padding-right:0} .home-services .hiz-draw-cta{margin-top:auto;padding-top:16px;font-size:14px} .home-workflows .yigin-sekme{padding-left:calc(32px + var(--i) * 210px)} .workflow-steps{list-style:none;counter-reset:workflow;margin:6px 0;padding:0; display:grid;gap:14px;width:100%} .workflow-steps li{counter-increment:workflow;position:relative;padding-left:34px} .workflow-steps li::before{content:counter(workflow,decimal-leading-zero); position:absolute;left:0;top:2px;font-size:12px;font-weight:600;color:var(--accent-text)} .workflow-steps b{display:block;font-size:15px;font-weight:600;color:var(--carbon)} .workflow-steps span{display:block;font-size:14px;line-height:1.5;color:var(--graphite);margin-top:2px} .workflow-services{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .workflow-services a{font-size:12px;font-weight:500;color:var(--carbon);text-decoration:none; padding:6px 10px;border:1px solid var(--linen);border-radius:var(--r-pill);background:var(--paper)} .workflow-services a:hover{border-color:var(--accent-text);color:var(--accent-text)} .workflow-services a:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px} @media (max-width:900px){ .home-workflows .yigin-sekme{padding-left:22px} } /* Yigin ancak SON KART YAPISIKKEN TAM GORUNUYORSA acilir. Burada UC medya sorgusu vardi (901->949 / 1024->849 / 1200->799) ve eski wireframe'li kart icin olculmustu. Kart 3B illustrasyona gecince govde 561.8'den 730px'e cikti, o tablo BAYATLADI ve fazla comert kaldi. Tek kaynak artik workflow-motion.js'teki calisma ani olcumu: gercek icerigi olcuyor, yazi tipi/sarma degisince kendini gunculliyor ve .workflow-flat sinifini takiyor. Asagidaki tek sorgu yalnizca JS yuklenmezse devreye giren yedek. 800 = olculen gereken 789 + pay. Deger kart degisince BAYATLIYOR: sekme ust seride cevrilip kisa ekran sikistirmasi eklenince gereken 807.5'ten 789'a dustu ve eski 830 esigi, JS "sigiyor" dedigi halde yigini kapatiyordu (olculdu: vh 817, gereken 789, ama 817 < 830). */ @media (min-width:901px) and (max-height:800px){ .home-workflows .yigin-kart{position:static;padding-bottom:32px} .home-workflows .yigin::after{display:none} } /* ---- teshis sureci: The Draw ------------------------------------------- Referans sitenin "Lever Stack" bolumunun yapisi olculdu: solda SABIT (sticky) baslik blogu, sagda DIKEY akan adimlar, numaralar scroll'la turuncuya donuyor, arkada cok soluk bir gravur watermark. Eskiden burasi 4 sutunlu numarali seritti ve "How it works" bolumuyle IKIZ duruyordu. O bolum kaldirildi (arsiv/bolum-8-how-it-works.html), burasi dikey akisa cevrildi. Kutuphane YOK: aktiflesme mevcut IntersectionObserver kalibini kullaniyor (.gorunur sinifi) -- referans site de kutuphane kullanmiyor. */ /* --kum DEGIL --cream. Sebep olculdu: ana sayfada .draw TEK bantli bolum, yani alternasyon tasimiyor -- sicak ton burada bir ritme hizmet etmiyor. Ustelik 955px yuksekliginde (sitenin en buyuk banti) ve alaninin %80'ini %5 opakliktaki filigran kapliyor; sicak zemin uzerinde o filigran leke gibi okunuyordu. --kum kisa .durum/.pano bantlarinda kaliyor, orada beyazla donusumlu olarak is goruyor. Iki ton ayni sayfada hic gorunmuyor: .draw yalnizca index'te, .durum yalnizca hizmet/about sayfalarinda. */ .draw{position:relative;background:var(--cream); border-top:1px solid var(--linen);border-bottom:1px solid var(--linen)} .draw .wrap{position:relative;z-index:1} /* .draw{position:relative} ve bu z-index eskiden arkadaki watermark icindi. Watermark birakildi (gorsel artik sol kolonda); zararsiz olduklari icin duruyorlar. */ /* Arkadaki buyuk saydam gorsel (watermark). Once "suluboya watermark olmaz, %4'te kaybolur" denip kenara konmustu; kullanici arkada istedi ve hakliymis -- itiraz kismen dogruydu: elimizdeki suluboyanin ince murekkep konturu var, cizgi soluklasa da okunuyor. Opaklik ve doygunluk TAHMINLE degil, ekranda olculerek belirlendi (uc aday karsilastirildi; degerler asagida). Koyu temada invert YOK -- suluboya renkli; invert yalnizca gravur ikonlarda. */ .draw-fon{position:absolute;inset:0;overflow:hidden;pointer-events:none; display:flex;align-items:center;justify-content:center} .draw-not{font-family:var(--font-ui);font-size:13px;color:var(--fog);letter-spacing:-.1px} /* ---- sss ---- */ .faq{margin-top:40px;border-top:1px solid var(--linen)} details{border-bottom:1px solid var(--linen)} summary{ list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative; font-family:var(--font-display);font-weight:400;font-size:21px;letter-spacing:-.15px; } summary::-webkit-details-marker{display:none} summary::after{ content:"";position:absolute;right:8px;top:50%;width:11px;height:11px; border-right:2px solid var(--ink-black);border-bottom:2px solid var(--ink-black); transform:translateY(-70%) rotate(45deg);transition:transform .2s ease; } details[open] summary::after{transform:translateY(-30%) rotate(-135deg)} details p{margin:0 0 24px;max-width:70ch;color:var(--graphite);font-size:16px;line-height:1.5;letter-spacing:-.16px} /* ---- kapanis ---- */ .closing{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px} .closing .t-h-lg{max-width:16ch} /* ---- footer ---- */ footer{border-top:1px solid var(--linen);padding-block:56px 40px} .foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px} .foot h3{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)} .foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .foot a{color:var(--graphite);text-decoration:none;font-size:14px;letter-spacing:-.1px} .foot a:hover{color:var(--ink-black)} .foot-bottom{margin-top:48px;font-size:12px;color:var(--fog)} /* Alt satirdaki e-posta. Bu kural OLMADAN link varsayilan tarayici stilini alir (mavi, alti cizili): sitede global bir `a` kurali yok, renk her yerde kapsamla veriliyor -- ve .foot-bottom, .foot izgarasinin DISINDA ayri bir
icinde durdugu icin `.foot a` ona ulasmiyor. color:inherit ile adres telifle ayni --fog tonunda kaliyor. */ .foot-bottom a{color:inherit;text-decoration:none; transition:color .4s cubic-bezier(.44,0,.56,1)} .foot-bottom a:hover{color:var(--ink-black)} /* ============================================================ ANIMASYON — Humble'in mirror'dan olculmus parametreleri metin: translateY(10px)+blur(4px) · buyuk: 90px+blur(10px) dev : 230px · 3B: perspective(1200px) translateY(32px) fizik: spring stiffness 400 / damping 50 / mass 1 ============================================================ */ [data-rise]{opacity:.001;will-change:transform,opacity,filter} [data-rise="text"]{transform:translateY(10px);filter:blur(4px)} [data-rise="lg"] {transform:translateY(90px);filter:blur(10px)} [data-rise="xl"] {transform:translateY(230px)} [data-rise="3d"] {transform:perspective(1200px) translateY(32px)} [data-rise].giris-bitti{opacity:1;transform:none;filter:none;will-change:auto} /* --- kucuk dokunuslar --- */ .nav{transition:border-color .4s cubic-bezier(.44,0,.56,1)} .nav.kaydi{border-bottom-color:var(--linen)} .btn{transition:opacity .4s cubic-bezier(.44,0,.56,1), background-color .4s cubic-bezier(.44,0,.56,1), color .4s cubic-bezier(.44,0,.56,1)} .nav-links a{transition:color .4s cubic-bezier(.44,0,.56,1)} .foot a{transition:color .4s cubic-bezier(.44,0,.56,1)} details p{animation:sssAc .4s cubic-bezier(.44,0,.56,1)} @keyframes sssAc{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* --- hareket azaltma: her sey durur, her sey gorunur --- */ @media (prefers-reduced-motion:reduce){ [data-rise]{opacity:1 !important;transform:none !important;filter:none !important} details p{animation:none} *{transition-duration:.01ms !important} } /* ---- tema gecis dugmesi ---- */ /* ============ KOYU TEMA GECICI OLARAK KAPALI ============================ Hicbir sey silinmedi: :root[data-tema="koyu"] token blogu, koyu video dosyalari, dugme ikonlari, hepsi yerinde duruyor. Yalnizca UC yerde kapatildi. Geri acmak icin bu ucu geri al: 1. 10 HTML'in 'indeki satir ici betikte KOYU_ACIK = true 2. ortak.css'te .tema-dugme{display:none} kuralini sil 3. ortak.js'te KOYU_KAPALI = false DIKKAT -- yalniz bu ucu yaparsan hero videosu 404 verir: 4. arsiv/video-koyu/ icindeki dort koyu video onizleme/'ye geri tasinmali. index.html'deki data-koyu="karakter-koyu" onlari ariyor; dosyalar burada olmadigi icin koyu temada hero bos kalir. 5. arsiv/paylasilan/yazitipi/ icindeki latin-ext font dosyalari da geri gerekebilir (Turkce karakterler). 6. privacy.html GERI ALINMALI. Koyu tema kapatilinca localStorage'a hicbir sey yazilmaz oldu; gizlilik sayfasi da "cihazinda hicbir sey saklanmiyor" diyecek sekilde guncellendi (kisa ozet, 3. bolum, cerez tablosu, 7. bolum ve uc aciklama meta etiketi). Tema geri acilirsa bu ifadeler YANLIS olur -- flecta-tema satiri tabloya, tema maddeleri listelere geri konmali. ======================================================================== */ .tema-dugme{display:none !important} .tema-dugme{ display:grid;place-items:center;width:36px;height:36px;flex:none; background:none;border:1px solid var(--linen);border-radius:50%; color:var(--carbon);cursor:pointer;padding:0; transition:border-color .15s ease,color .15s ease; } .tema-dugme:hover{border-color:var(--slate);color:var(--ink-black)} .tema-dugme svg{width:17px;height:17px} /* acik temada gunes, koyu temada ay gorunur */ .tema-dugme .ay{display:none} :root[data-tema="koyu"] .tema-dugme .gunes{display:none} :root[data-tema="koyu"] .tema-dugme .ay{display:block} .tema-dugme-mobil{margin-top:22px} @media (min-width:901px){ .tema-dugme-mobil{display:none} } /* ---- mobil menu ---- */ .nav-ac{ display:none;align-items:center;justify-content:center;gap:5px;flex-direction:column; width:44px;height:44px;margin-left:auto;background:transparent;border:0;cursor:pointer; padding:0;border-radius:var(--r-nav); } .nav-ac span{display:block;width:20px;height:1.5px;background:var(--ink-black); transition:transform .3s cubic-bezier(.44,0,.56,1),opacity .3s cubic-bezier(.44,0,.56,1)} .nav-ac[aria-expanded="true"] span:nth-child(1){transform:translateY(3.25px) rotate(45deg)} .nav-ac[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)} .mobil-menu{ position:fixed;inset:0;z-index:200;background:var(--paper); display:flex;flex-direction:column; padding:96px 24px 40px;overflow-y:auto; } .mobil-menu[hidden]{display:none} .mobil-menu-ic{display:flex;flex-direction:column;gap:4px;max-width:var(--page-max); margin:auto;width:100%} .mobil-menu a:not(.btn){ font-family:var(--font-display);font-weight:400;font-size:40px;line-height:1.25; letter-spacing:-.3px;color:var(--ink-black);text-decoration:none; padding:10px 0;border-bottom:1px solid var(--linen); } .mobil-menu a:not(.btn):last-of-type{border-bottom:0} .mobil-menu .btn{margin-top:28px;align-self:flex-start;font-size:16px;padding:14px 28px} body.menu-acik{overflow:hidden} /* Kapatma dugmesi tam ekran menunun ustunde kalir. */ body.menu-acik .nav{z-index:201} @media (max-width:900px){ .nav-links{display:none} .nav-ac{display:flex} .nav-in .btn-primary{display:none} /* CTA menunun icinde */ } @media (prefers-reduced-motion:reduce){ .nav-ac span{transition:none} } /* ---- responsive ---- */ @media (max-width:1024px){ .t-display{font-size:52px;letter-spacing:-.5px} .t-h-lg{font-size:36px;letter-spacing:-.3px} .hero-grid{grid-template-columns:1fr;gap:40px} .hero-destek,.hero-urunler{max-width:62ch} .hero-col{padding:0} .hero-mid{border-left:0;align-self:auto} .hero-sol{padding-bottom:0} .hero-art img,.hero-art video{height:auto;width:100%;max-width:440px} .hero-sol{padding-bottom:0} .foot{grid-template-columns:1fr 1fr} } @media (max-width:640px){ section{padding-block:48px} .t-display{font-size:40px;letter-spacing:-.3px} .t-h-lg{font-size:28px;letter-spacing:-.2px} .t-h{font-size:24px;letter-spacing:-.15px} .t-body{font-size:16px;letter-spacing:-.16px} .hizmetler{grid-template-columns:1fr} .hiz-no{font-size:52px} .hero-cta{flex-direction:column;align-items:center} .foot{grid-template-columns:1fr} } /* --- sol: sticky sahne, plakalar ust uste --- */ .kat-sol{position:sticky;top:112px;align-self:start; height:calc(100vh - 160px);display:flex;align-items:center} .kat-sahne{position:relative;width:100%;max-width:520px;margin:0 auto; aspect-ratio:1} /* Bes plakanin hepsi AYNI gorselden geliyor: bes ayri uretimde aci ve konum tutmaz, ust uste bindiklerinde hizasizlik hemen gorunur. Aradaki tek fark translateY -- hizalama boylece piksel piksel garanti. */ /* Bes plaka bes AYRI gorsel (her katmanin kendi sahnesi). Ayri uretimde plaka boyutu ve konumu birebir tutmuyor -- olculdu: genislik %94.0-98.9, kose hizasi %45.5-50.3, alt kenar %81.5-85.6. Yatay merkez zaten hizali (sapma 0.1). --ds / --dy her gorseli olculen hedefe (genislik %96.4, kose hizasi %48.7) normalize ediyor; degerler HTML'de, kaynagi belli olsun diye. */ .kat-plaka{position:absolute;left:0;top:0;width:100%;height:auto; z-index:calc(var(--k) + 1); transform:translateY(calc(var(--k) * -26px - 64px + var(--dy,0px))) scale(var(--ds,1)); opacity:0; transition:transform .7s cubic-bezier(.22,1,.3,1), opacity .5s ease, filter .4s ease; } .kat-plaka.yerinde{ transform:translateY(calc(var(--k) * -26px + var(--dy,0px))) scale(var(--ds,1)); opacity:1; } /* Aktif plakanin alt kenarinda turuncu cizgi. drop-shadow seffaf PNG'nin SEKLINI takip ediyor, dikdortgen kutuyu degil -- box-shadow burada ise yaramazdi. Blur 0: bu bir golge degil, kenar vurgusu. */ .kat-plaka.aktif{filter:drop-shadow(0 3px 0 var(--safety-orange))} /* --- sag: KOMPAKT liste, referanstaki gibi --- */ /* Once her katman min-height:82vh idi ve iki paragrafi hep acikti; bolum 5543px'e cikiyordu, yani sayfanin yarisi. Referansta liste bes basliktan ibaret, yalnizca aktif olanin aciklamasi acik. Katman yuksekligi 42vh'ye indi, aciklama grid 0fr->1fr ile aciliyor: bolum yariya iniyor. */ .kat-liste{display:flex;flex-direction:column;justify-content:center; min-height:calc(100vh - 200px)} .kat-adim{min-height:42vh;display:flex;flex-direction:column;justify-content:center; border-left:2px solid var(--linen);padding:0 0 0 24px; transition:border-color .5s ease} .kat-adim.gorunur{border-left-color:var(--safety-orange)} .kat-bas{display:flex;align-items:center;gap:11px} .kat-bas svg{width:20px;height:20px;flex:none;color:var(--slate);transition:color .5s ease} .kat-adim.gorunur .kat-bas svg{color:var(--safety-orange)} .kat-bas b{font-family:var(--font-display);font-weight:600;font-size:22px; letter-spacing:-.4px;color:var(--slate);transition:color .5s ease} .kat-adim.gorunur .kat-bas b{color:var(--ink-black)} /* Aciklama yalnizca aktif katmanda acilir. Ayni kalip hizmet kartlarinda ve eski sekme surumunde de var: grid 0fr->1fr, overflow:hidden sarmalayici. */ .kat-govde{display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .5s cubic-bezier(.44,0,.56,1),opacity .35s ease} .kat-adim.gorunur .kat-govde{grid-template-rows:1fr;opacity:1} .kat-govde-ic{overflow:hidden} .kat-adim p{max-width:44ch;margin:10px 0 0;color:var(--graphite); font-size:15px;letter-spacing:-.15px} .kat-adim p + p{margin-top:9px} @media (max-width:980px){ .kat-sol{position:static;height:auto} .kat-sahne{max-width:340px} .kat-plaka{transform:translateY(calc(var(--k) * -20px + var(--dy,0px))) scale(var(--ds,1));opacity:1} .kat-adim{min-height:0;padding:18px 0 18px 18px} .kat-liste{min-height:0} .kat-govde{grid-template-rows:1fr;opacity:1} } @media (prefers-reduced-motion:reduce){ .kat-plaka{transform:translateY(calc(var(--k) * -26px + var(--dy,0px))) scale(var(--ds,1));opacity:1;transition:none} .kat-adim{transition:none} .kat-govde{grid-template-rows:1fr;opacity:1} } /* ============================================================ HUKUK BELGESI DUZENI — privacy.html ve terms.html paylasir Tek kolon, olcum sitenin govde genisligiyle degil OKUNABILIRLIKLE belirlendi: 74ch. Hizmet sayfalarindaki iki kolonlu duzen burada yanlis olurdu, hukuk metni bastan sona sirayla okunuyor. ============================================================ */ .hukuk{max-width:74ch} .hukuk-ust{border-bottom:1px solid var(--linen);padding-bottom:26px;margin-bottom:34px} .hukuk-ust .t-h-lg{margin-top:14px} .hukuk-tarih{font-family:var(--font-ui);font-size:14px;color:var(--fog); letter-spacing:-.1px;margin:16px 0 0} /* Ozet kutusu: hukuk metnini okumayan ziyaretci en azindan bunu okusun */ .hukuk-ozet{background:var(--cream);border:1px solid var(--linen); border-radius:var(--r-card);padding:24px 26px;margin-bottom:38px} .hukuk-ozet h2{font-family:var(--font-ui);font-weight:600;font-size:15px; letter-spacing:-.15px;margin:0 0 12px;color:var(--ink-black)} .hukuk-ozet ul{margin:0;padding-left:18px} .hukuk-ozet li{color:var(--graphite);font-size:15px;line-height:1.6; letter-spacing:-.15px;margin-bottom:6px} .hukuk-ozet li:last-child{margin-bottom:0} .hukuk-ozet b{color:var(--ink-black);font-weight:600} /* Icindekiler */ .hukuk-icerik{list-style:none;margin:0 0 40px;padding:0; display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 24px} .hukuk-icerik a{font-family:var(--font-ui);font-size:14px;color:var(--graphite); text-decoration:none;letter-spacing:-.1px;display:block;padding:5px 0} .hukuk-icerik a:hover{color:var(--ink-black)} .hukuk-icerik a b{color:var(--fog);font-weight:500;margin-right:8px} .hukuk section{padding-block:0;margin-bottom:36px;scroll-margin-top:96px} .hukuk h2{font-family:var(--font-display);font-weight:600;font-size:24px; letter-spacing:-.35px;margin:0 0 14px} .hukuk h3{font-family:var(--font-ui);font-weight:600;font-size:16px; letter-spacing:-.15px;margin:24px 0 8px;color:var(--ink-black)} .hukuk p{color:var(--graphite);font-size:16px;line-height:1.65; letter-spacing:-.15px;margin:0 0 14px} .hukuk p:last-child{margin-bottom:0} .hukuk ul{margin:0 0 14px;padding-left:20px} .hukuk li{color:var(--graphite);font-size:16px;line-height:1.65; letter-spacing:-.15px;margin-bottom:7px} .hukuk b{color:var(--ink-black);font-weight:600} .hukuk a{color:var(--ink-black);text-decoration:underline; text-underline-offset:3px;text-decoration-color:var(--linen)} .hukuk a:hover{text-decoration-color:var(--safety-orange)} .hukuk table{border-collapse:collapse;width:100%;margin:0 0 14px; border:1px solid var(--linen);border-radius:var(--r-card);overflow:hidden} .hukuk th,.hukuk td{text-align:left;padding:13px 16px;font-size:14px; letter-spacing:-.1px;border-bottom:1px solid var(--linen);vertical-align:top} .hukuk thead th{font-family:var(--font-ui);font-weight:600;font-size:13px; color:var(--slate);background:var(--cream)} .hukuk tbody tr:last-child td{border-bottom:0} .hukuk td code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;background:var(--ash);border-radius:3px;padding:1px 5px} .tablo-sar{overflow-x:auto} @media (max-width:900px){ .hukuk-icerik{grid-template-columns:1fr} .hukuk table{min-width:520px} } /* Mobil menude tek satir, daha genis dokunma alani */ .mobil-menu-ic .dil{margin-top:4px;font-size:15px} .mobil-menu-ic .dil a,.mobil-menu-ic .dil span{padding:8px 10px} /* ---- nav: Product acilir menusu ---------------------------------------- Tetikleyici LINK DEGIL BUTON. Link olsaydi klavyede Enter hem menuyu acmak hem sayfaya gitmek isterdi ve ikisi cakisirdi; menunun son satiri zaten "All five services" olarak o hedefe gidiyor. GOLGE YOK: sitenin olculen "golge 0" kurali burada da geciyor, derinlik 1px kenarlikla veriliyor. */ .nav-urun{position:relative;display:flex} .nav-urun>button{ appearance:none;background:none;border:0;cursor:pointer;font:inherit; display:inline-flex;align-items:center;gap:6px; font-weight:500;font-size:14px;letter-spacing:-.1px;color:var(--ink-black); padding:6px 8px;border-radius:var(--r-nav); } .nav-urun>button:hover{color:var(--graphite)} .nav-urun>button:focus-visible{outline:2px solid var(--safety-orange);outline-offset:2px} /* Ok isareti: acikken 180 donuyor */ .nav-urun>button svg{width:10px;height:10px;flex:none; transition:transform .3s cubic-bezier(.22,1,.3,1)} .nav-urun>button[aria-expanded="true"] svg{transform:rotate(180deg)} .urun-menu{ position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px); width:340px;background:var(--paper);border:1px solid var(--linen); border-radius:var(--r-card);padding:8px;z-index:60; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .22s ease,transform .22s cubic-bezier(.22,1,.3,1),visibility .22s; } .nav-urun>button[aria-expanded="true"] + .urun-menu{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0); } /* Butonla menu arasindaki 10px bosluga imlec girince menu kapanmasin */ .urun-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} .urun-menu a{ display:block;padding:10px 12px;border-radius:10px;text-decoration:none; transition:background-color .2s ease; } .urun-menu a:hover,.urun-menu a:focus-visible{background:var(--ash);outline:none} .urun-menu a:focus-visible{box-shadow:inset 0 0 0 2px var(--safety-orange)} .urun-menu b{display:block;font-family:var(--font-ui);font-weight:600;font-size:14px; letter-spacing:-.15px;color:var(--ink-black);margin-bottom:2px} .urun-menu span{display:block;font-size:13px;line-height:1.45;letter-spacing:-.1px; color:var(--graphite)} /* Son satir: bes hizmetin tamamina giden baglanti */ .urun-menu .urun-hepsi{border-top:1px solid var(--linen);border-radius:0 0 10px 10px; margin-top:6px;padding-top:12px} .urun-menu .urun-hepsi b{color:var(--accent-text);margin-bottom:0} /* Mobil menude acilir yapi yok: bes hizmet duz liste olarak zaten yazili */ /* Mobil menudeki "Product" acilir bolum.
/ kullaniliyor -- FAQ'daki kalibin aynisi, o yuzden yeni JS gerekmiyor: native ac/kapa ve klavye erisimi hazir geliyor. DIKKAT -- iki bildirim de ZORUNLU, biri olmadan digeri bozuk calisiyor: display:block ->
uzerinde display:flex KALSAYDI native kapanma calismiyordu; olculdu, kapaliyken alt maddeler gorunur kaliyordu. >a{display:block} -> flex gidince 'lar inline'a dusuyor ve alt alta degil akis halinde diziliyor. */ .mobil-urun{display:block} .mobil-urun>a{padding-left:14px !important;font-size:15px !important;display:block} /* Baslik satiri "The Draw" / "FAQ" ile ayni olcude. Genel summary kuralinin 21px/22px degerlerini ezer. Chevron FAQ'daki ::after ile ayni geometri. */ .mobil-urun>summary{ list-style:none;cursor:pointer;position:relative; font-family:var(--font-display);font-weight:400;font-size:40px;line-height:1.25; letter-spacing:-.3px;color:var(--ink-black); padding:10px 34px 10px 0;border-bottom:1px solid var(--linen); } .mobil-urun>summary::-webkit-details-marker{display:none} .mobil-urun>summary::after{ content:"";position:absolute;right:8px;top:50%;width:11px;height:11px; border-right:2px solid var(--ink-black);border-bottom:2px solid var(--ink-black); transform:translateY(-70%) rotate(45deg);transition:transform .25s ease; } .mobil-urun[open]>summary::after{transform:translateY(-30%) rotate(-135deg)} @media (prefers-reduced-motion:reduce){ .urun-menu{transition:none} .nav-urun>button svg{transition:none} }