/* ========================================================== GROOF CREATIVE Ölçüler 1600×900 tasarım dosyasından piksel piksel alındı. Masaüstünde 1rem = tasarımdaki 10px (0.625vw) → birebir ölçek. ========================================================== */ /* ========================================================== FONTLAR Amandine → tüm display / başlık / rakam öğeleri PP Neue Machina → yuvarlak "01–04" numaraları, footer, TR rozeti Poppins → gövde metni (Google Fonts'tan gelir) Amandine ticari bir font; .woff2 dosyalarını assets/fonts/ içine bırakmak yeterli, aşağıdaki @font-face'ler onları bekliyor. Dosya yokken Bodoni Moda yedeğe düşer. ---------- DİKEY ÖLÇÜ KİLİDİ (ascent/descent-override) ---------- Harfin satır kutusu içindeki yeri fontun ascent/descent değerinden gelir, ama motorlar bu değeri aynı tablodan okumaz: Chrome OS/2 (USE_TYPO_METRICS bayrağı varsa sTypo, yoksa usWin), Safari ve Android ise hhea. Machina'da iki tablo çok farklı — usWin 1040/270, hhea 735/230 — ve fark başlıkta doğrudan görünüyordu: aynı CSS Chrome'da maketteki 75/79/79 aralıklarını verirken iPhone'da 85/68/91 çıkıyor, "GÜÇLÜ"nün umlaut noktaları "Fikirler"in k'sine biniyordu (ölçüldü, hesapla birebir aynı çıktı). Aşağıdaki override'lar değeri motorun seçimine bırakmıyor; yazılan sayılar Chrome'un bugün kullandıklarının aynısı, yani masaüstünde hiçbir şey değişmiyor, diğer motorlar aynı yere geliyor. Amandine'de sTypo ile hhea zaten aynı (1010/250); oradaki satırlar yine de açıkça yazılı, ileride font güncellenirse fark etmesin diye. Bir ara bu kilit ayrı bir "ikiz" aile adına verilmişti (aynı dosya, farklı font-family); WebKit dosyayı URL'den tanıyıp ilk yüklediği ölçülerle kullandığı için override yok sayıldı. Kilit bu yüzden ASIL yüzlerin üstünde duruyor — dosya başına tek yüz, tek ölçü. Motorun descriptor'ı hiç tanımadığı eski sürümler için script.js'te ölçen ve gerekirse satır aralıklarını düzelten bir emniyet var. ========================================================== */ @font-face{font-family:"Amandine";font-style:normal;font-weight:300;font-display:fallback; src:url("assets/fonts/Amandine-Light.woff2") format("woff2"); ascent-override:101%;descent-override:25%;line-gap-override:0%;} @font-face{font-family:"Amandine";font-style:italic;font-weight:300;font-display:fallback; src:url("assets/fonts/Amandine-LightItalic.woff2") format("woff2"); ascent-override:101%;descent-override:25%;line-gap-override:0%;} @font-face{font-family:"Amandine";font-style:normal;font-weight:400;font-display:fallback; src:url("assets/fonts/Amandine-Regular.woff2") format("woff2"); ascent-override:101%;descent-override:25%;line-gap-override:0%;} @font-face{font-family:"Amandine";font-style:italic;font-weight:400;font-display:fallback; src:url("assets/fonts/Amandine-Italic.woff2") format("woff2"); ascent-override:101%;descent-override:25%;line-gap-override:0%;} @font-face{font-family:"Amandine";font-style:normal;font-weight:500;font-display:fallback; src:url("assets/fonts/Amandine-Medium.woff2") format("woff2"); ascent-override:101%;descent-override:25%;line-gap-override:0%;} @font-face{font-family:"Amandine";font-style:italic;font-weight:500;font-display:fallback; src:url("assets/fonts/Amandine-MediumItalic.woff2") format("woff2"); ascent-override:101%;descent-override:25%;line-gap-override:0%;} @font-face{font-family:"Amandine";font-style:normal;font-weight:700;font-display:fallback; src:url("assets/fonts/Amandine-Bold.woff2") format("woff2"); ascent-override:101%;descent-override:25%;line-gap-override:0%;} @font-face{font-family:"Amandine";font-style:italic;font-weight:700;font-display:fallback; src:url("assets/fonts/Amandine-BoldItalic.woff2") format("woff2"); ascent-override:101%;descent-override:25%;line-gap-override:0%;} @font-face{font-family:"PP Neue Machina";font-style:normal;font-weight:300;font-display:fallback; src:url("assets/fonts/NeueMachina-Light.woff2") format("woff2"); ascent-override:104%;descent-override:27%;line-gap-override:0%;} @font-face{font-family:"PP Neue Machina";font-style:normal;font-weight:400;font-display:fallback; src:url("assets/fonts/NeueMachina-Regular.woff2") format("woff2"); ascent-override:104%;descent-override:27%;line-gap-override:0%;} @font-face{font-family:"PP Neue Machina";font-style:normal;font-weight:800;font-display:fallback; src:url("assets/fonts/NeueMachina-Ultrabold.woff2") format("woff2"); ascent-override:104%;descent-override:27%;line-gap-override:0%;} /* Poppins — govde metni. Once Google Fonts'tan geliyordu; harici stil dosyasi + ayri baglanti (DNS/TLS) ilk boyamayi geciktirip sistem fontuyla acilip sonra Poppins'e atlamaya (FOUT) yol aciyordu. Ayni woff2'ler artik kendi sunucumuzdan, unicode-range ile: latin-ext yalnizca Turkce karakter gecince indirilir. */ @font-face{font-family:"Poppins";font-style:italic;font-weight:400;font-display:swap; src:url("assets/fonts/poppins/Poppins-400-italic-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:"Poppins";font-style:italic;font-weight:400;font-display:swap; src:url("assets/fonts/poppins/Poppins-400-italic-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:"Poppins";font-style:normal;font-weight:300;font-display:swap; src:url("assets/fonts/poppins/Poppins-300-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap; src:url("assets/fonts/poppins/Poppins-300-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:"Poppins";font-style:normal;font-weight:400;font-display:swap; src:url("assets/fonts/poppins/Poppins-400-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap; src:url("assets/fonts/poppins/Poppins-400-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:"Poppins";font-style:normal;font-weight:500;font-display:swap; src:url("assets/fonts/poppins/Poppins-500-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap; src:url("assets/fonts/poppins/Poppins-500-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:"Poppins";font-style:normal;font-weight:600;font-display:swap; src:url("assets/fonts/poppins/Poppins-600-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap; src:url("assets/fonts/poppins/Poppins-600-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:"Poppins";font-style:normal;font-weight:700;font-display:swap; src:url("assets/fonts/poppins/Poppins-700-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap; src:url("assets/fonts/poppins/Poppins-700-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} :root{ --bg:#050505; --line:rgba(255,255,255,.55); --sans:"Poppins", system-ui, sans-serif; --disp:"Amandine", "Bodoni Moda", Georgia, serif; /* display — Amandine */ --serif:"Amandine", "Bodoni Moda", Georgia, serif; /* display — Amandine */ --didone:"Amandine", "Bodoni Moda", Georgia, serif; /* display — Amandine */ --mach:"PP Neue Machina", "Poppins", system-ui, sans-serif; /* Hero'daki BUYUK HARFLER (CESUR / MARKALAR) = PP Neue Machina Light. Bir sure Amandine sanildi; ama Amandine bir didone (kalin-ince kontrastli), tasarim gorselindeki harfler ise tek kalinlikta (kontur her yerde 8px / kapak 91px) ve A'nin tepesi duz kesik. 145 aday olculdu; harf-harf ortusmede Neue Machina Light 0.797 ile tek basina kalibrasyon barini (~0.80) tutturdu, en yakin rakip 0.687'de kaldi. */ --capsdisp:"PP Neue Machina", "Poppins", system-ui, sans-serif; /* ---------- MOBİL TASARIM PİKSELİ (--m) ---------- Mobil ölçüler "Mobil Ana Sayfa.png" dosyasından piksel piksel alındı; o dosya 430px genişlikte (iPhone 15 Pro Max viewport'u). --m, o tasarımın 1 pikselinin bu ekranda kaç px ettiği: 430'da tam 1px, 390'da 0.907px… Böylece kompozisyon her telefonda AYNI oranda durur, yalnızca ölçek değişir — masaüstündeki "1rem = 10 tasarım px" kuralının mobil karşılığı. clamp'in iki ucu şart: alt (.8px) — 320px'lik ekranda başlık ve dev logo satıra sığsın, gövde metni 11.4px'in altına inmesin; üst (1.12px) — kural 899px'e kadar geçerli, kapak olmasaydı tablet genişliğinde başlık 145px'e çıkardı. */ --m:clamp(.8px, .2325581vw, 1.12px); /* ---------- PUNTO TASARIM PIKSELI (--f) ---------- Bir sure burada bir telafi vardi: bir betik tarayicinin metin buyutme carpanini olcup tersini --tzi'ye yaziyor, puntolar da --m yerine --m*--tzi kullaniyordu. Uc ayri surumu denendi ve ucu de gercek cihazda yanlis olctu (kimi hic gormedi, kimi olmayan bir carpani var sandi ve puntolari bosuna kucultup satirlari birbirine soktu). Olcumun kendisi guvenilir olmadigi icin mekanizma tamamen kaldirildi; --f artik --m'nin aynisi ve yalnizca "bu deger bir PUNTO" demek icin duruyor. Metin buyutmesine karsi koruma artik olcume degil YAPIYA dayali: baslik satir araliklari birimsiz sayi (punto ne olursa olsun aralik onunla birlikte buyur, satirlar birbirine giremez) ve --m dikeyi de gozetiyor (kompozisyon ekrana sigar). */ --f:var(--m); } /* ---------- MOBILDE --m DIKEYI DE GOZETIR ---------- Maket 430x930. --m yalnizca genislikten hesaplanirsa, ekran maketten KISA oldugunda 930 tasarim birimlik dizilim dikeyde sigmiyor: fark ust dolgudan kisiliyor, baslik maketteki kadar asagida baslamiyor ve asagidaki ok katlamanin altina dusuyor. Ozellikle uygulama ici tarayicilarda (Instagram) ust cubuk 200 px yiyor, ekran 412x745'e iniyor ve sapma gozle goruluyor. Cozum: iki oranin KUCUGU kazanir — genislikten 100/430 = .2325581, yukseklikten 100/930 = .1075269. Boylece dizilim her ekranda maketteki oranlarda durur, yalnizca olcegi degisir; ok her zaman ekranin icinde kalir. Cogu telefonda hicbir sey degismez, cunku orada genislik zaten daha kisitli: 430x930 -> 1.0 412x915 -> .958 390x844 -> .907 360x800 -> .837 (hepsi eskisiyle ayni). Kucultme yalnizca ekran maketten kisa kaldiginda devreye giriyor: 412x745 -> .801. Alt sinir .8px yerinde kaliyor; govde metni okunaksiz olmasin diye. svh yoksa vh'ye dusuyor: o buyuk gorunumdur, yani biraz az kisar — yine de hic kismamaktan iyidir. */ @media (max-width:899.98px){ :root{--m:clamp(.8px, min(.2325581vw, .1075269vh), 1.12px);} } @supports (height:100svh){ @media (max-width:899.98px){ :root{--m:clamp(.8px, min(.2325581vw, .1075269svh), 1.12px);} } } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;overflow-x:clip; /* Tasarim vw tabanli olcekleniyor; tarayicinin kendi metin buyutmesi devreye girerse oranlar bozulur. */ -webkit-text-size-adjust:100%;text-size-adjust:100%;} body{ background:var(--bg); color:#fff; font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* sayfa boyu gri/siyah arka plan — tasarımdan çıkarıldı */ .stage::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; display:none; } a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} ::selection{background:#fff;color:#000;} ::-webkit-scrollbar{width:9px;} ::-webkit-scrollbar-track{background:#000;} ::-webkit-scrollbar-thumb{background:#242424;border-radius:9px;} .stage{position:relative;z-index:1;} section{position:relative;} /* ========== ORTAK GÖRSEL ÖĞELER ========== */ .ast{display:block;position:relative;background:url("assets/asterisk.svg?v=1") 0 0 / 100% 100% no-repeat;} /* bölüm yıldızları — yerinde, saat yönünde yavaş dönüş. Negatif gecikme animasyonu ileriden başlatır: bekleme yok, sadece faz kayar. */ .ast{transform-origin:50% 50%;animation:astSpin 24s linear infinite;will-change:transform;} .ast-about{animation-delay:0s;} .ast-srv {animation-delay:-7s;} .ast-prc {animation-delay:-13s;} .ast-why {animation-delay:-19s;} @keyframes astSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}} .rule{display:block;background:var(--line);} .blob{position:absolute;pointer-events:none;z-index:0;background-repeat:no-repeat;background-size:100% 100%;} .blob-l{background-image:url("assets/star-left.webp?v=1");} .blob-r{background-image:url("assets/star-right.webp?v=1");} /* krom halkalar — tasarımdan çıkarılan görseller */ .ring{position:absolute;z-index:3;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%;} .ring-about{background-image:url("assets/ring-about.webp?v=10");} .ring-srv {background-image:url("assets/ring-srv.webp?v=10");} /* Bu konumdaki ring-rib render'i olculerde digerleriyle ayni ciksa da gozle bozuk goruluyordu; yerine onaylanan ring-about render'i kullanildi. Sayfada 1836px uzakta oldugu icin tekrar olarak okunmuyor. */ .ring-rib {background-image:url("assets/ring-about.webp?v=10");} .ring-prc {background-image:url("assets/ring-prc.webp?v=10");} .ring-why {background-image:url("assets/ring-why.webp?v=10");} /* ========================================================== MOBİL (varsayılan akış) ========================================================== */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100; display:flex;align-items:center;justify-content:space-between; /* Tasarımda logonun mürekkebi y44-68, menü düğmesininki y48-63'te; satır 38 tasarım px, üstte ve altta 35'er px pay kalıyor. */ padding:calc(35 * var(--m)) calc(36 * var(--m)); } /* Çubuğun bulanık zemini ayrı bir katmanda duruyor. backdrop-filter doğrudan .nav üzerindeyken .nav, position:fixed çocukları için "kapsayıcı blok" hâline geliyordu: menü öğelerinin yüzdelik top değerleri ekran yüksekliğine değil çubuğun ~65px'ine göre hesaplanıyor, altı bağlantı da üst üste biniyordu. */ /* Maketlerde cubugun zemini YOK: yalnizca logo ve hamburger duruyor, arka plan kesintisiz akiyor. Onceki yari saydam siyah + blur zemin y110'da sert bir kenar cizip icerigi cubuga yapistiriyordu. */ .nav::before{display:none;} /* Logo ve hamburger yalnizca sayfanin en ustunde. Asagi kaydirilinca yukari suzulup kayboluyor, en uste donulunce geri geliyor; sinifi script.js bolum 7 yaziyor. Menu acikken her zaman gorunur. */ @media (max-width:899.98px){ .nav{transition:opacity .28s ease, transform .28s ease;} body.nav-gizli .nav{opacity:0;transform:translateY(calc(-24 * var(--m))); pointer-events:none;} body.menu-open .nav{opacity:1;transform:none;pointer-events:auto;} } .nav .nv,.nav .pill-btn{display:none;} /* Menü açıkken tam ekran kaplama (.nav::after) z-index 98'de duruyor; logo ve menü düğmesi onun üstünde kalmalı, yoksa menü kapatılamıyor. */ /* LOGO — gercek marka isareti (Logo.pdf -> assets/logo.svg). Maske olarak seriliyor: renk currentColor'dan gelir, yani koyu zeminde beyaz, ileride acik zeminde siyah olur; ayri bir dosya gerekmez. Metin DOM'da kaliyor (font-size:0) — arama motoru ve ekran okuyucu icin okunur, gozle gorunmez. Kutu olculeri eski Amandine yazisinin MUREKKEP kutusuyla ayni genislikte; boylece cubuktaki kompozisyon kaymiyor. 18px yazinin murekkebi 120.41x18.56 idi; logonun orani 6.918:1 oldugu icin ayni genislikte yukseklik 17.41 ve murekkep merkezi yerinde kalsin diye 1.8px asagi aliniyor. */ .brand{display:block;position:relative;z-index:102;font-size:0; width:calc(174 * var(--m));height:calc(25.15 * var(--m));top:calc(2.6 * var(--m)); background-color:currentColor; -webkit-mask:url("assets/logo.svg?v=1") 0 0 / 100% 100% no-repeat; mask:url("assets/logo.svg?v=1") 0 0 / 100% 100% no-repeat;} /* Menü düğmesi tasarımda ÜÇ çizgi: 36 tasarım px eninde, 2px kalınlıkta, aralarında 5'er px — mürekkep 16px'e oturuyor (tasarımda y48-63). Düğmenin 6px'lik dolgusu dokunma alanını 44px'e tamamlar. */ .nav-toggle{position:relative;z-index:102;background:none;border:0;cursor:pointer;padding:calc(6 * var(--m));} .nav-toggle span{display:block;width:calc(36 * var(--m));height:2px;background:#fff; margin:calc(5 * var(--m)) 0;transition:.3s;} body.menu-open .nav .nv{ display:block;position:fixed;left:0;width:100%;text-align:center;font-size:17px;z-index:99; /* Dokunma alani satir kutusundan (26px) 50px'e cikiyor; ust dolgu kadar yukari kaydirildigi icin yazinin gorunen yeri degismiyor. Kutular araliktan (en dar telefonda %8 = 53px) kucuk kaldigi icin ust uste binmiyorlar. */ padding:12px 0; } /* ---------- "Tanışalım" düğmesi ---------- Görünüm masaüstüyle ortak: siyah hap, kenarında dönen beyaz–lacivert LED. Yalnızca ölçü/konum iki tarafta farklı. Mobil menüde de metin değil, düğme olarak durmalı — sayfadaki tek birincil eylem o. */ .pill-btn{display:flex;align-items:center;justify-content:center;border:0;line-height:1; background:#000;isolation:isolate;transition:filter .35s ease;} /* LED halkalari suslemedir ve donerken kutulari hapin disina tasiyor; dokunusu yutmasinlar diye tiklamaya kapali. */ .pill-btn .led{pointer-events:none;position:absolute;inset:0;border-radius:99px;padding:1px;z-index:1; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;} .pill-btn .led::before{content:"";position:absolute;left:50%;top:50%; width:340px;height:340px;margin:-170px 0 0 -170px; background:conic-gradient( rgb(20,28,80) 0%, rgb(24,33,90) 22%, rgb(58,70,132) 27%, rgb(190,198,230) 30.5%, #ffffff 32%, rgb(190,198,230) 33.5%, rgb(58,70,132) 37%, rgb(24,33,90) 42%, rgb(20,28,80) 68%, rgb(46,56,116) 74%, rgb(150,160,200) 78%, rgb(205,212,240) 80%, rgb(150,160,200) 82%, rgb(46,56,116) 86%, rgb(20,28,80) 92%, rgb(20,28,80) 100%); animation:ledSpin 3.2s linear infinite;} .pill-btn .led.glow{z-index:0;padding:1.6px;filter:blur(1px);opacity:.4;} .pill-btn span{position:relative;z-index:2;} .pill-btn:hover{filter:brightness(1.35);} @keyframes ledSpin{to{transform:rotate(360deg);}} body.menu-open .nav .pill-btn{ display:flex;position:fixed;left:50%;transform:translateX(-50%); top:66%;width:auto;min-width:186px;height:46px;padding:0 30px; border-radius:99px;font-size:15.5px;z-index:99; } /* Kaplama opak: backdrop-filter'li katman iOS Safari'de uzerindeki baglantilarin dokunus testini bozabiliyor, zemin zaten %97 kapali. */ body.menu-open .nav::after{ content:"";position:fixed;inset:0;background:#050505;z-index:98; } body.menu-open .nv1{top:calc(26% - 12px)} body.menu-open .nv2{top:calc(34% - 12px)} body.menu-open .nv3{top:calc(42% - 12px)} body.menu-open .nv4{top:calc(50% - 12px)} body.menu-open .nv5{top:calc(58% - 12px)} body.menu-open .pill-btn{top:66%} /* Menü açıkken üç çizgi çarpıya döner: dıştaki ikisi ortadaki çizginin hizasına gelir (aralarında 7 tasarım px var), ortadaki söner. */ body.menu-open .nav-toggle span:first-child{transform:translateY(calc(7 * var(--m))) rotate(45deg);} body.menu-open .nav-toggle span:nth-child(2){opacity:0;transform:scaleX(.4);} body.menu-open .nav-toggle span:last-child{transform:translateY(calc(-7 * var(--m))) rotate(-45deg);} /* ---------- mobil menü içi arama ---------- Yalnizca menu acikken var; kapali cubukta yer kaplamaz. Menu ogelerinin (z-index 99) uzerinde durur ki sonuc paneli onlari ortebilsin. */ .nav-search{display:none;} body.menu-open .nav .nav-search{ display:flex;align-items:center;gap:9px;position:fixed;left:22px;right:22px;top:82px; height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.92);border-radius:99px; background:none;z-index:101; } .nav-search svg{width:17px;height:17px;flex:none;display:block;} /* Punto 16 px: altina inince iOS odaklanmada sayfayi yakinlastiriyor (ayrinti .tn-f'nin ustundeki aciklamada). Menu ici arama zaten yalnizca mobilde var, o yuzden kosula gerek yok. */ .nav-search input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:#fff; font-family:var(--sans);font-size:16px;font-weight:300;} .nav-search input::placeholder{color:rgba(255,255,255,.45);} .nav-search input::-webkit-search-cancel-button, .nav-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;} /* ---------- arama sonuç paneli · ortak görünüm ---------- Olculer mobil icin px; masaustunde .hero-search altinda rem'e cevriliyor. */ .hs-panel{position:absolute;left:0;right:0;top:calc(100% + 10px); max-height:min(56vh, 420px);display:flex;flex-direction:column; background:rgba(8,8,8,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.16);border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.72);padding:6px;text-align:left;z-index:1;} .hs-panel[hidden]{display:none;} /* liste kayar, altindaki satir yerinde kalir */ .hs-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;} .hs-list::-webkit-scrollbar{width:5px;} .hs-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px;} .hs-label{display:block;padding:6px 12px 4px;font-family:var(--mach);font-size:10px; line-height:14px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.42);} .hs-item{display:block;padding:9px 12px;border-radius:11px;cursor:pointer; transition:background .18s ease;} .hs-item:hover,.hs-item.is-active{background:rgba(255,255,255,.08);} .hs-item-top{display:flex;align-items:baseline;gap:8px;} .hs-t{font-size:14.5px;line-height:20px;font-weight:500;color:#fff;} .hs-s{margin-left:auto;flex:none;font-family:var(--mach);font-size:10.5px;line-height:20px; color:rgba(255,255,255,.4);white-space:nowrap;} .hs-d{margin-top:1px;font-size:12px;line-height:17px;font-weight:300; color:rgba(255,255,255,.58);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:2;line-clamp:2;} .hs-item mark{background:none;color:#fff;font-weight:600;} .hs-d mark{color:rgba(255,255,255,.92);} .hs-empty{padding:14px 12px;font-size:13px;line-height:19px;font-weight:300; color:rgba(255,255,255,.55);} /* dokunmatikte klavye ipucunun anlami yok — masaustunde aciliyor */ .hs-foot{display:none;border-top:1px solid rgba(255,255,255,.1); font-family:var(--mach);color:rgba(255,255,255,.32);} /* Alt dolgu, asagi oka (38.5) + alt payina (55) + nefes payina yer birakacak kadar: kisa ekranlarda (375x667, 320x568) bolum icerige gore uzuyor ve ok paragrafin uzerine binmiyor. Uzun ekranlarda bolum zaten 100svh oldugu icin bir sey degismiyor. */ .hero{padding:140px calc(36 * var(--m)) calc(124 * var(--m));text-align:center;} /* Dil rozetleri (TR / EN) — hero'nun sag alt kosesi. Gorunum iki tarafta ortak, olculer mobil ve masaustu bloklarinda ayri veriliyor. Secili dil .is-on ile isaretli; digeri soluk durur. */ .lang{display:flex;align-items:center;} .lang-btn{display:grid;place-items:center;padding:0;background:none;cursor:pointer; font-family:inherit;font-weight:600;line-height:1; border-style:solid;border-radius:99px; border-color:rgba(255,255,255,.32);color:rgba(255,255,255,.55); transition:color .2s ease, border-color .2s ease;} .lang-btn.is-on{border-color:rgba(255,255,255,.78);color:#fff;cursor:default;} a.lang-btn:hover{border-color:rgba(255,255,255,.78);color:#fff;} /* Rozetin gorunur olcusu tasarimdan geliyor (mobil 35x21, masaustu 3.7x2.3rem) ve parmak icin kucuk kaliyor. Pili buyutmek yerine gorunmez bir dokunma alani seriliyor: 44x44, Apple HIG ve WCAG 2.1 AAA (2.5.5) olcusu. YALNIZCA a.lang-btn aliyor — cift rozetin biri her zaman (mevcut dil, tiklanamaz). Span'e de verilseydi buyuyen alani baglantininkiyle ust uste binip dokunuslari yutar, hedef buyuyecegine iselmez olurdu. Tek tiklanabilir oge kaldigi icin de ortusme sorunu yok. */ .lang-btn{position:relative;} a.lang-btn::after{content:"";position:absolute;left:50%;top:50%; width:44px;height:44px;transform:translate(-50%,-50%);} /* Mevcut dil rozeti zaten tiklanamaz; dokunusa da kapatiliyor. Gerekcesi olculdu: EN sayfasinda siralama TREN oldugu icin span sonra boyaniyor ve dar masaustunde (1280px; gap .9rem = 7.2px, pil 29.6px) baglantinin 44px'lik hedefinin kosesini ortup dokunusu yutuyordu. TR sayfasinda sira ters oldugundan sorun gorunmuyordu. */ span.lang-btn{pointer-events:none;} /* BAŞLIK — mobil tasarımda dört ayrı satır: CESUR / Fikirler / GÜÇLÜ / Markalar. Kelimelerin blok hâline gelmesi ve ikinci satırdaki rol değişimi @media (max-width:899.98px) bloğunda; buradaki ölçüler her iki düzende de aynı temeli kuruyor. Ölçüler tasarımdan: büyük harfler (Machina Light) 77 tasarım px, italikler (Amandine) 68.5 — masaüstündeki 12.471/11.125 oranının aynısı. line-height uzunluk olarak veriliyor: sayı olsaydı her kelime kendi punto­suyla çarpılıp satır aralığı bir büyük bir küçük olurdu. */ .hero-title{position:relative;z-index:1;font-weight:400; font-size:calc(68.5 * var(--f));line-height:calc(78 * var(--m));} .hero-title .ln{display:block;} .hero-title .up{font-family:var(--capsdisp);font-weight:300;font-size:calc(77 * var(--f));} .hero-title em{font-family:var(--serif);font-style:italic;font-weight:400; font-size:calc(68.5 * var(--f));} /* Simge tasarımda paragrafın SOLUNDA değil, ÜSTÜNDE ve ortada durur. */ .hero-mark{display:block;width:calc(41.3 * var(--m));margin:calc(34 * var(--m)) auto 0;} .hero-para{font-size:calc(14 * var(--f));line-height:1.79;font-weight:300;} /* Marka adi satir sonunda ikiye bolunmesin. */ .hero-para b{font-weight:600;white-space:nowrap;} /* Masaustundeki satir kirilimlari mobilde de korunuyor. Dar sutunda her parca kendi icinde ayrica sariyor;
yerleri cumleleri ayiran duraklar olarak kaliyor. (Eskiden burada display:none vardi, metin duz akiyordu.) */ .hero-para br{display:block;} .hero-search,.ring,.wall{display:none;} /* Hayalet yazı — masaüstündeki ölçülerin birebir oranı. Masaüstünde 1rem = ekranın %0.625'i olduğundan her değer doğrudan vw'ye çevrilebiliyor: 17.8rem → 11.125vw, .725rem → .453vw, -7.15rem → -4.469vw. Böylece harflerin kalınlığı, aralığı ve üstten kesilme payı iki tarafta aynı oranda kalıyor; yazı bölümün üst kenarında yine düz kırpılıyor. */ .ghost{display:block;position:absolute;left:-1.5vw;--ghost-top:-4.469vw;top:var(--ghost-top); font-family:var(--mach);font-weight:300;font-size:11.125vw;letter-spacing:.453vw; line-height:1;color:#131313;white-space:nowrap;pointer-events:none; clip-path:inset(calc(-1 * var(--ghost-top)) 0 0 0);} @media (max-width:899.98px){ /* --- hero dekorlari: masaustundekilerin mobil karsiligi --- Yildizlar konumlandirilmis olduklari icin normal akistaki yazinin uzerine binerdi; icerigi bir kat yukari alarak arkada birakiyoruz. */ .hero > *:not(.blob), .manifesto > *:not(.blob),.svc-head > *:not(.blob),.prc-head > *:not(.blob), .why-head > *:not(.blob),.wrk-head > *:not(.blob),.ct-head > *:not(.blob){ position:relative;z-index:1;} .blob{display:block;opacity:.8;transform-style:preserve-3d;will-change:transform;} .blob-l{left:-15%;top:44%;width:46%;aspect-ratio:246/308;} /* Maketten olculdu: murekkep sol kenari x309, ust kenari y116. Kutunun sag kenari yerinde (right:-11%); bu ikisinden kutu 182.2 px genislik ve 102.6 px ust veriyor -> %42.4 ve %11. Onceki %35/%7 yildizi hem kucuk hem 40 px yukarida birakiyordu. */ .blob-r{left:auto;right:-11%;top:11.75%;width:42.4%;aspect-ratio:1;} /* Yildizlar masaustunde oldugu gibi mobilde de suzulur. Ana sayfada .blob-l/.blob-r, ic sayfalarda her birinin kendi sinifi var; ikisi de masaustunde floatL/floatR kullaniyor, burada mobil karsiliklari. */ .blob-l,.ab-star-l,.sv-star-l,.pr-star-l,.wk-star-l,.wy-star-l,.tn-star-l{ transform-style:preserve-3d;will-change:transform; animation:floatLm 19s ease-in-out infinite;} .blob-r,.ab-star-r,.sv-star-r,.pr-star-r,.wk-star-r,.wy-star-r,.tn-star-r{ transform-style:preserve-3d;will-change:transform; animation:floatRm 16s ease-in-out infinite;} /* Yildizlarin suzulusu — masaustundeki floatL/floatR'nin mobil karsiligi. O kareler rem cinsinden yazili (masaustunde 1rem = 10 tasarim px); mobilde 1rem = 16px oldugu icin ayni degerler yildizin boyuna gore iki kat buyuk bir salinim verirdi. Bu yuzden otelemeler yuzde: yildizin kendi boyunun orani, yani her ekranda ayni genlik. Donme aciları ve sureler masaustuyle birebir ayni, iki yildiz farkli surede oldugu icin hareketleri birbirine kilitlenmiyor. */ @keyframes floatLm{ 0% {transform:perspective(600px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);} 25% {transform:perspective(600px) translate3d(2%,-5%,18px) rotateX(7deg) rotateY(-9deg) rotateZ(2deg);} 50% {transform:perspective(600px) translate3d(-1.5%,-8%,0) rotateX(-5deg) rotateY(6deg) rotateZ(-3deg);} 75% {transform:perspective(600px) translate3d(-3%,-3.5%,-12px)rotateX(4deg) rotateY(10deg) rotateZ(1.5deg);} 100% {transform:perspective(600px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);} } @keyframes floatRm{ 0% {transform:perspective(500px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);} 25% {transform:perspective(500px) translate3d(-2.5%,4.5%,-14px)rotateX(-8deg)rotateY(11deg) rotateZ(-2.5deg);} 50% {transform:perspective(500px) translate3d(2%,7.5%,12px) rotateX(6deg) rotateY(-7deg) rotateZ(3deg);} 75% {transform:perspective(500px) translate3d(3.5%,3.5%,0) rotateX(-4deg) rotateY(-11deg) rotateZ(-1.5deg);} 100% {transform:perspective(500px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);} } /* Hareketi azaltilmis cihazlarda yildizlar sabit durur; bunu dosyanin sonundaki genel "* { animation:none !important }" kurali zaten sagliyor. */ .scroll-cue{display:block;width:30px;height:34px;margin:26px auto 0;} .scroll-cue svg{width:100%;height:100%;display:block;} /* Ilk karede yalnizca hero gorunsun: bolum tam ekran yuksekliginde ve asagidaki .about'tan hicbir sey sarkmiyor. 100svh = adres cubugu aciktaki kucuk gorunum yuksekligi; 100dvh olsaydi kaydirirken hero'nun boyu degisip icerik zipliyordu. Eski tarayicilar icin onunde 100vh yedegi var. Baslik dikeyde ortalanmiyor, mobil tasarimdaki oranla konumlaniyor: orada 932px'lik hero'da CESUR'un kapak cizgisi 222px'te, yani ekranin %23.8'inde basliyor. Ust dolgu da bu yuzden svh cinsinden; boylece her telefonda baslik tasarimdakiyle ayni yukseklikte duruyor ve nav ile arasinda her zaman bosluk kaliyor. Bu oran artik bir TAVAN: asagidaki blok, hero ekrana sigmadiginda dolguyu kisaltiyor. */ /* --- ust dolgu ARTIK ESNEK --- Onceki surumde ust dolgu sabit 22.5svh idi. Hero'nun boyu boylece 22.5svh + baslik + paragraf + 124 px alt dolgu oluyordu; 430x932'lik makette bu toplam 857 px olup ekrana sigdigi icin sorun gorunmuyordu. Ama ok ve TR/EN rozetleri hero'nun ALT kenarina yapisik oldugu icin, hero ekrandan bir piksel bile uzun oldugunda ikisi de katlamanin altina dusuyordu — tam olarak "kesik" gorunumu. Hesap: hero ekrana ancak gorunur yukseklik 835 * --m px'ten buyukse sigiyor. iOS Safari'de cubuk YALNIZCA altta oldugu icin telefonlarin cogu bu esigi geciyor; Chrome'da (Android'de ustte cubuk, iOS'ta hem ustte hem altta) 50-100 px daha az yer kaliyor ve esik asiliyor. Yeni kural: ust dolgu bir TAVANI ASLA gecmez, ama hero ekrana sigmiyorsa gerektigi kadar kisalir. Alt sinir 120 * --m — basligin ust cubuga girmemesi icin (cubuk 118 * --m yuksekliginde). Tavan maketteki 22.5svh degil 20svh: gercek telefonda adres cubugu gorunur alani kirpinca butun grup asagida duruyor ve okun altinda nefes payi kalmiyordu. Ayni sebeple serit payi 55 -> 78 tasarim px. Ikisi birlikte: grup ~2.5svh yukari, okun alti ~23 tasarim px daha acik, metinle ok arasindaki aciklik ise degismiyor. Formuldeki 143 = seridin kapladigi yer (26 pay + 38.5 ok + 78 alt). --hero-flow = akistaki yigin (baslik + simge/paragraf) 430 px maketinde olculdu: TR 528, EN 553 tasarim px. Metin --m ile olceklendigi icin oran her ekranda ayni kaliyor. (Baslik satir araligi makete donunce yigin 36 px kisaldi: 564/589 -> 528/553.) */ .hero{--hero-flow:calc(528 * var(--m)); --hero-pt:max(calc(120 * var(--m)), min(20vh, calc(100vh - var(--hero-flow) - 143 * var(--m)))); min-height:100vh;min-height:100svh; /* Hero, EKRANIN TAMAMINI kaplar (lvh), kompozisyon ise gorunur alana (svh) gore olculur. Ikisi neden farkli: bazi tarayicilarda alt adres cubugu sayfanin uzerine BINIYOR ama svh onu saymiyor. Hero yalnizca svh kadar olsaydi cubugun altinda kalan seritte bir sonraki bolum gorunurdu -- kullanicinin telefonunda tam da bu oluyordu: sol altta .about'un yildizinin ucu siziyordu. Olculdu: svh 785 tasarim birimi, gercek gorunur ekran 875; aradaki 90 birim o serit. lvh cubugu da kapsadigi icin serit kapaniyor. Ok ve TR/EN yine svh'ye bagli kaliyor, yani cubugun ustunde. */ display:flex;flex-direction:column;justify-content:flex-start; padding-top:var(--hero-pt); /* Alt dolgu 0: ok/rozet seridi artik akistaki .hero-alt'in kendi yuksekligi + alt payi. Eski 124 px'lik dolga kalsaydi hero her zaman ekrandan uzun olur, flex'te bos yer kalmaz ve satiri asagi yapistiran margin-top:auto hicbir zaman devreye girmezdi (olculdu: ok 40 px yukarida kaliyordu). Ust dolgu hesabindaki 124 yerinde duruyor; orada "serit icin ayrilan yer" olarak calisiyor. */ padding-bottom:0;} html[lang="en"] .hero{--hero-flow:calc(553 * var(--m));} @supports (height:100svh){ .hero{--hero-pt:max(calc(120 * var(--m)), min(20svh, calc(100svh - var(--hero-flow) - 143 * var(--m))));} } @supports (height:100lvh){.hero{min-height:100lvh;}} /* Tasarimda her kelime kendi satirinda; ikinci satirda roller de yer degistiriyor: "Güçlü" buyuk harf/Machina, "MARKALAR" italik/Amandine olarak diziliyor. Metin HTML'de degismedigi icin donusum CSS'te: lowercase + ::first-letter uppercase -> "Markalar". */ .hero-title .up,.hero-title em{display:block;} /* --- satir araligi puntoya ORANLI, sabit uzunluk degil --- Once .hero-title'daki line-height bir UZUNLUK'tu (78 tasarim px). Uzunluklar tarayicinin metin buyutmesinden etkilenmez, harfler ise etkilenir: punto buyuyup satir araligi yerinde kalinca "Fikirler"in kuyrugu "GUCLU"nun umlaut noktalarina giriyordu. Bir sure bunu bir olcum betigi telafi etmeye calisti; olcum guvenilir olmadigi icin kaldirildi ve koruma tamamen buraya, yapiya birakildi: her satir kendi araligini kendi puntosundan aliyor (birimsiz sayi). Punto ne kadar buyurse aralik da o kadar buyur, satirlar birbirine hicbir kosulda giremez. --- degerler nereden geliyor --- Dort satirin her biri blok; iki satirin KAPAK CIZGILERI arasindaki uzaklik ikisinin satir kutusunun ORTALAMASI kadardir (yari bosluk ustten ve alttan esit dagilir), ustune de yalnizca fontun kendi ascent farki eklenir. Yani satir kutulari L1..L4 icin ara1 = (L1+L2)/2 + s1, ara2 = (L2+L3)/2 + s2, ara3 = (L3+L4)/2 + s3 ve s'ler puntolar sabit oldugu icin sabittir (olculdu: -2, +2, -2). Hedef, 430 px'lik maketin kapak cizgileri: 222 / 297 / 376 / 455, yani araliklar 75 / 79 / 79. Bunu veren kutular: 78 / 76 / 78 / 84. Bir sure dordu birden 88'e cikarilmisti ("Fikirler"in k'si ile umlaut noktalari arasindaki 9 px'lik maket payi dar geldigi icin); o pay araliklari 86-90-86 yapiyor, CESUR ile MARKALAR arasini 29 px uzatiyor ve basligi maketten baska bir sey haline getiriyordu. Simdi dizilim maketle birebir: kapak cizgileri 222/297/376/455, noktalarla kuyruk arasi maketteki 9 px. Sayilar kutunun o satirin puntosuna bolunmesiyle bulundu: CESUR 78/77 = 1.0130 Fikirler 76/68.5 = 1.1095 GUCLU 78/79 = 0.9873 Markalar 84/67.8 = 1.2389 Basindaki sifirlar bilerek yazili: ".9873" gibi degerler bazi eski ayristiricilarda dusuyor ve satir sessizce sabit uzunluga donuyor. */ .hero-title .ln:first-child .up{line-height:1.0130;} .hero-title .ln:first-child em {line-height:1.1095;} .hero-title .ln:last-child em {line-height:0.9873;} .hero-title .ln:last-child .up{line-height:1.2389;} /* Dort satirin arasi YALNIZCA line-height'tan gelir; hicbir satira ek pay verilmez. Bir sure ikinci ile ucuncu satir arasina 7 px eklenip ayni deger basligin ustunden aliniyordu; o pay ritmi bozuyordu. Maketteki 9 px'lik yaklasma kasitli. */ /* Maketteki "GUCLU" murekkep kutusu 255x87 tasarim px; 81 punto 262x90 veriyordu. 79 punto olcuyu birebir tutturuyor. */ .hero-title .ln:last-child em{font-family:var(--capsdisp);font-style:normal; font-weight:300;font-size:calc(79 * var(--f));text-transform:uppercase;} /* "Markalar" maketten 297x54 tasarim px; 68.5 punto 300 veriyordu. */ .hero-title .ln:last-child .up{font-family:var(--serif);font-style:italic; font-weight:400;font-size:calc(67.8 * var(--f));text-transform:lowercase;} /* Ilk harf gercek bir — eskiden ::first-letter ile yapiliyordu; WebKit'te text-transform ile birlikte guvenilir calismiyor ve "markalar" kucuk harfle kaliyordu. */ .hero-title .ln:last-child .up .fl{text-transform:uppercase;} /* Baslik ile paragraf arasindaki nefes payi da masaustundeki orana yakin: orada iki blok arasinda ekranin ~%17'si kadar bosluk var. Alt sinir kisa ekranlar icin: 568px'lik bir telefonda sabit 52+22px, paragrafi asagi oktan yalnizca 23px uzakta birakiyordu. */ /* Simge mobil tasarimda paragrafin USTUNDE ve ortada; grup normal akiyor. text-align verilmiyor: .hero'dan gelen "center" korunuyor. */ .hero-intro{display:block;margin:0;} /* svg satir ici kalirsa taban cizgisinin altinda hayalet bosluk birakiyor; blok yapinca kutu tam kare oluyor. Ustteki 43 tasarim px'lik pay "Markalar"in murekkep tabaniyla simgenin tepesi arasindaki mesafe. */ .hero-mark svg{display:block;width:100%;height:auto;} /* Maketteki satir kirilimlari sutun genisliginden geliyor: 358 px iken "web" ucuncu satira sigip dizilim kayiyordu. 340 px ile satirlar makettekiyle birebir ayni yerden bolunuyor. */ .hero-intro .hero-para{margin-top:calc(11 * var(--m)); max-width:calc(340 * var(--m));margin-left:auto;margin-right:auto;} /* Mobil tasarimda paragraf masaustundeki
'leri KULLANMIYOR: metin dar sutunda kendi akisiyla bes satira bolunuyor. Kirilimlar acik kalsaydi "kampanyada büyür." gibi yarim satirlar cikiyordu. */ .hero-para br{display:none;} /* Ok, ortalanan icerik grubuyla birlikte kaymasin diye alt kenara sabit. Ortalama transform yerine negatif margin ile: transform'u animasyona birakmak zorundayiz, translateX(-50%) orada olsaydi her karede tekrar yazmak gerekirdi. Genislik sabit 30px oldugu icin -15px tam ortaliyor. */ /* --- ok ve TR/EN: EKRANIN altina bagli ama METNE de bagli --- Ikisi de bir sure hero'nun alt kenarina mutlak konumlanmisti, sonra ekranin altina (100svh) tasindi; carpismaya karsi emniyet ise "ust dolgu + --hero-flow + pay" idi, yani yigin yuksekligi SABIT bir sayidan geliyordu. O sayi ancak yazi tam tasarim puntosunda ciziliyorsa dogru: Android'in yazi boyutu ayari ya da Safari'nin sayfa yakinlastirmasi devredeyken puntolar buyuyor, kutular (--m) ayni kaliyor, metin uzuyor ama ok yerinde duruyordu. Olculdu (393x750): yazi olcegi x1.15'te TR'de aciklik 97 -> 2 px, EN'de 72 -> -27 px, yani ok metnin uzerine biniyordu. EN bir satir daha uzun oldugu icin esigi once geciyor. Simdi ikisi de AKISTA, hero flex sutununun son ogesi: margin-top:auto -> bos yer varsa hepsini yutar, satir asagi yapisir margin-bottom -> ekranin (svh) alt kenarindan 55 tasarim px padding-top -> metinle arasindaki EN AZ pay; bos yer bitince satir metnin altina iner, ustune binemez Kutu tabandan sabitlendigi icin bos yer varken ok ve rozetler eskisiyle tipatip ayni yerde duruyor; degisiklik yalnizca yer daraldiginda. */ .hero-alt{position:relative;width:100%; margin:auto auto calc(78 * var(--m));padding-top:calc(26 * var(--m)); height:calc(38.5 * var(--m));box-sizing:content-box;} .hero-alt > .scroll-cue{position:static;display:block; width:calc(34.6 * var(--m));height:calc(38.5 * var(--m)); margin:0 auto;animation:cueM 2.8s ease-in-out infinite;} /* Masaustundeki "cue" ile ayni his: orada ok 54px ve yol -3.5px…+7.5px, yani boyunun %20.4'u. Mobil ok 34px -> ayni oran 6.9px, ayni bolusumle (-%32 / +%68) -2.2px…+4.7px. Kendi kare setini kullaniyor cunku "cue" rem cinsinden ve mobilde 1rem=16px; oradaki degerler 34px'lik oka 17.6px'lik yol verip okun yarisi kadar zipmasina yol aciyordu. */ @keyframes cueM{0%,100%{transform:translateY(-2.2px);opacity:.8} 50%{transform:translateY(4.7px);opacity:1}} /* TR/EN rozetleri masaustunde oldugu gibi hero'nun sag alt kosesinde durur; dikeyde asagi okla (.scroll-cue) ortalanir: ok 34px, rozet 21px, ok'un alt kenari hero'nun 56px'lik alt dolgusundan basliyor -> 56+17-10.5 = 62px. Olcu masaustundekine (37x23 tasarim px) yakin tutuldu; dar ekranda eski 41x25 gereginden iri duruyordu. */ /* .hero > *:not(.blob) kurali position:relative dayattigi icin secici en az onun kadar ozgul olmali; aksi halde grup akista kalip ters yone kayiyor. */ /* Rozetler satirin sag ucunda, okla dikeyde ortali: eski olcude okun alt kenari ekranin 55, rozetlerinki 61 tasarim px yukarisindaydi -- yani satirin tabanindan 6 px. */ .hero-alt > .lang{position:absolute;right:calc(37 * var(--m));bottom:calc(6 * var(--m)); display:flex;gap:calc(10 * var(--m));margin:0;} /* Hero'nun boyu 100lvh (adres cubugunun altini da kapsar), oysa satir ekranin GORUNUR alt kenarindan 55 px yukarida durmali. Aradaki fark tam olarak 100lvh - 100svh; cubuk yokken sifir, varken cubuk kadar. svh/lvh tanimayan tarayicilarda yukaridaki duz 55 gecerli kalir. */ @supports (height:100svh) and (height:100lvh){ .hero-alt{margin-bottom:calc(100lvh - 100svh + 78 * var(--m));} } .lang-btn{width:calc(41 * var(--m));height:calc(28 * var(--m));border-width:1px; font-size:calc(14 * var(--f));letter-spacing:calc(-1 * var(--m)); text-indent:calc(-1 * var(--m));} /* --- hayalet yazi ilk karede gorunmez --- Maketten olculdu: hayalet yazinin gorunen ust kenari tam 932'de, yani hero'nun alt kenariyla ayni cizgide. Tasarimda kasitli ama bicak sirti: gorunur ekran yuksekligi 100svh'den bir iki piksel bile saparsa (uygulama ici tarayicilar svh'yi cogu zaman yanlis bildirir, arac cubugu durumuna gore de degisir) harflerin tepesi ilk karede sizip goruntuyu kirletiyor. Cozum olcuye degil duruma bagli: sayfa en ustteyken yazi tamamen saydam, ilk kaydirmada beliriyor. Zaten kaydirinca gorulmesi gereken bir oge oldugu icin tasarim degismiyor; yalnizca sizinti kapaniyor. Sinifi script.js bolum 7 yaziyor (ust cubugu gizleyen ayni kaydirma kancasi). */ .ghost{opacity:0;transition:opacity .35s ease;} body.kaydirildi .ghost{opacity:1;} /* Hero'nun dumanli isik katmani — masaustundekinin mobil karsiligi. bg-home.webp'in ust bolgesi bos (parlaklik 0.01) oldugu icin mobilde hero duz siyah kaliyordu. Ayni hero-glow gorseli burada hero'nun iki kati yuksekliginde seriliyor; gorselin yalnizca ust yarisi kullaniliyor. Maske masaustunden farkli: orada hero ile .about arasinda 10rem bosluk var, sonum orada oluyordu. Mobilde .about hemen ardindan basladigi icin isik hayalet yazinin (.ghost) uzerine tasip yaziyi siliyordu; bu yuzden sonum hero'nun alt kenarinda (%50 x 200% = hero boyu) tamamen bitiyor. */ .page-home .hero::before{content:"";position:absolute;left:0;top:0; width:100%;height:200%;z-index:0;pointer-events:none; background:url("assets/hero-glow.webp?v=4") 0 0 / 100% 100% no-repeat; -webkit-mask:linear-gradient(#000 0 35%, rgba(0,0,0,0) 50%); mask:linear-gradient(#000 0 35%, rgba(0,0,0,0) 50%);} } /* mobilde menu cubugu sabit; derin baglanti hedefi altinda kalmasin */ .svc,.ps,.wy,section[id]{scroll-margin-top:calc(116 * var(--m));} /* Yan dolgu her bolumde 36 tasarim px (tasarimda yazilar x36'da basliyor, ayirici cizgiler x35-392 arasinda). Dikey dolgular bolume ozel: tasarimda yildiz-baslik-metin dizilimi arasindaki paylar birebir olculdu. */ .about,.services,.process,.why,.contact{padding:calc(48 * var(--m)) calc(36 * var(--m));} .about {padding-top:calc(105 * var(--m));padding-bottom:calc(28 * var(--m));} .services{padding-top:calc(17 * var(--m));padding-bottom:calc(50 * var(--m));} .process{padding-top:calc(72 * var(--m));padding-bottom:calc(34 * var(--m));} .why {padding-top:calc(29 * var(--m));padding-bottom:calc(40 * var(--m));} .contact{padding-top:calc(32 * var(--m));padding-bottom:0;} .ast{width:calc(64 * var(--m));height:calc(64 * var(--m));margin-bottom:calc(10 * var(--m));} /* Bolum basliklari tek bir

icinde iki parca olarak durur (duz + italik). Sarmalayici yalnizca anlamsal: kendi kutusu yok gibi davranir, parcalar eskisi gibi konumlanir. */ .sec-ttl{margin:0;font:inherit;font-weight:inherit;} .ttl,.ttl-i{display:block;font-family:var(--disp);font-size:calc(26 * var(--f)); font-weight:700;line-height:1.077;letter-spacing:-.02em;} .ttl-i{font-family:var(--serif);font-style:italic;font-weight:400;margin-bottom:calc(24 * var(--m));} /* Maketde "Neden Groof?" ile alt satiri arasi 3 px daha dar. */ .why .ttl-i{margin-bottom:calc(21 * var(--m));} /* Masaustunde baslik yanindaki ince cizgi mobilde de vardi; mobil tasarimda yok — baslikla ilk metin arasi dogrudan bosluk. */ .rule{display:none;} .lead{font-family:var(--mach);font-size:calc(17.8 * var(--f));line-height:1.685; font-weight:300;margin:0 0 calc(4 * var(--m));} .statement{font-family:var(--mach);font-size:calc(17.8 * var(--f));font-weight:300; line-height:1.63;margin:0 0 calc(16 * var(--m));} .about-para{font-size:calc(14.25 * var(--f));line-height:1.965;font-weight:300;} .about-para br,.wc-d br,.sp-d br{display:none;} /* .lead ve .st-txt'teki kirilimlar mobil tasarimda KORUNUYOR: iki satirlik dizilim (ör. "Markanızın ihtiyacı ne olursa / olsun, tek çatı altında.") tasarimin kendisi. Dogal sarma bunu tek/uc satira dagitiyordu. */ .lead br,.st-txt br,.statement br{display:block;} .about-para b{font-weight:600;} /* Uc rakam blogu tasarimda 120 tasarim px arayla tekrarliyor; ayirici cizgi metinden 22, sonraki rakamdan 25 px uzakta. Izgara araligi tek bir deger aldigi icin ritim rakamin alt payiyla kuruluyor. */ .stats{display:grid;gap:calc(22 * var(--m));text-align:center; margin-bottom:calc(70 * var(--m));} .st-num{font-family:var(--didone);font-weight:700;font-size:calc(26.8 * var(--f)); line-height:1.15;display:block;margin-bottom:calc(-20 * var(--m));} /* "360°" — tarayicinin varsayilan davranisi isareti kucultup rakam kapaklarinin USTUNE cikariyor, blok 21 yerine 27 px yuksek olup diger iki rakamla ayni cizgide durmuyordu. Amandine'de derece isareti zaten kapak hizasinda ciziliyor; tam punto ve taban cizgisinde birakmak yetiyor. Masaustunde de ayni kural var (bkz. min-width:900px blogu). */ .st-num sup{font-size:1em;vertical-align:baseline;top:0;position:static;} .st-txt{font-size:calc(14.1 * var(--f));line-height:1.49;font-weight:300;} .st-div{display:block;width:calc(44 * var(--m));height:1px; background:rgba(255,255,255,.4);margin:0 auto;} .acc{list-style:none;margin-top:calc(2 * var(--m));} .acc-item{border-bottom:1px solid var(--line);} .acc-head{width:100%;background:none;border:0;color:#fff;display:flex;align-items:center; justify-content:space-between;padding:calc(14.5 * var(--m)) 0 calc(11 * var(--m)); font-family:var(--sans);cursor:pointer;text-align:left;} .acc-t{font-size:calc(14 * var(--f));font-weight:600;} .acc-i{width:calc(13 * var(--m));flex:none;} .acc-i svg{width:100%;height:auto;transform:rotate(-90deg);transition:transform .4s cubic-bezier(.4,0,.2,1);} .acc-item.is-open .acc-i svg{transform:none;} .acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1);} /* Acik satirda govde, basligin alt dolgusunun bir kismini geri aliyor: tasarimda baslikla metin arasi 13 tasarim px, kapali satirlarin yuksekligi ise degismemeli. */ .acc-item.is-open .acc-b{grid-template-rows:1fr;margin-top:calc(-7 * var(--m));} .acc-b>p{overflow:hidden;font-size:calc(14.2 * var(--f));line-height:1.97;font-weight:300;} .acc-item.is-open .acc-b>p{padding-bottom:calc(14 * var(--m));} .ribbons{position:relative;height:calc(95 * var(--m));overflow:hidden;} .rb{position:absolute;left:-8%;width:116%;background:#fff;color:#000; padding:calc(.25 * var(--m)) 0;overflow:hidden;} /* Iki serit caprazlama kesisir. Acilar mobil tasarimdan geri hesaplandi: serit merkezleri x=0'da 2643 ve 2697, x=420'de 2712 ve 2663 — egimler +0.1636 ve -0.0818, yani +9.3deg ve -4.7deg. Kesisme x=220'de, yani ekranin tam ortasinda. Ust-alt sirasi tasarimdaki gibi: soldan bakinca inen serit (+9.3deg) ustte basliyor. top degerleri seritlerin donme merkezini 95px'lik kutunun 49-50. pikseline oturtuyor (serit kalinligi 27 tasarim px). */ .rb-a{top:calc(36 * var(--m));transform:rotate(9.3deg);} .rb-b{top:calc(37 * var(--m));transform:rotate(-4.7deg);} .rb-t{display:flex;width:max-content;animation:marquee 30s linear infinite;} .rb-t.rev{animation-direction:reverse;} /* Serit (marquee) de ayni kelime isareti. Kutu olculeri eski yazinin yerlesim kutusuyla ayni birakildi (serit yuksekligi ve tekrar adimi degismesin); logo maske olarak, eski murekkebin tam durdugu yere konumlandiriliyor. */ .rb-t span{display:block;font-size:0;width:calc(153.03 * var(--m));height:calc(26.53 * var(--m));padding:0; background-color:currentColor; -webkit-mask:url("assets/logo.svg?v=1") calc(.34 * var(--m)) calc(5.6 * var(--m)) / calc(135 * var(--m)) calc(19.51 * var(--m)) no-repeat; mask:url("assets/logo.svg?v=1") calc(.34 * var(--m)) calc(5.6 * var(--m)) / calc(135 * var(--m)) calc(19.51 * var(--m)) no-repeat;} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .prc-img{aspect-ratio:433/539;background-image:url("assets/prc-photo.webp?v=1");background-size:370.4% 167.3%; background-position:25% 70.4%;background-repeat:no-repeat;filter:grayscale(1) contrast(1.03); /* Tasarimda gorsel bolumun tum ic genisligini kapliyor (x36-393). */ margin:calc(23 * var(--m)) 0 calc(32 * var(--m));max-width:none;} .sp-num{font-family:var(--didone);font-weight:700;font-size:calc(39.5 * var(--f)); line-height:1;display:block;margin-top:calc(30 * var(--m));} .sp-t{font-size:calc(16.2 * var(--f));font-weight:600; margin:calc(4 * var(--m)) 0 calc(7 * var(--m));} .sp-d{font-size:calc(14.2 * var(--f));line-height:1.76;font-weight:300;} /* Centikli cerceve. Kutu masaustunde 479x131, mobilde 358x136 CSS px; SVG preserveAspectRatio="none" ile gerildigi icin masaustu yolunun ceyrek DAIRE centigi mobilde 44x61'lik dar-uzun bir elipse donusup numaranin dibine giriyordu. Mobil icin ayri yol var (.wc-box-m): maketteki gibi TEK bir daire yayi. Onemli fark: masaustu yolunda yayin iki ucunda duz paylar var (dikey + yatay); mobil makette YOK — centik bastan sona 136 derecelik tek yay, ust kenardan cikip sol kenara giriyor. Duz dikey pay birakilinca "daire" gibi degil "yuvarlatilmis kose" gibi duruyordu. Altpiksel fit: R=44.50 CSS px, merkez kart kosesinden (21.37, 13.47); yay ust kenari dx 63.78'de, sol kenari dy 52.50'de kesiyor. Gerilme geri hesaplanmis hali viewBox'ta 59.24 x 43.15 elips. Izdeki sapma ortalama 0.15, en cok 0.26 px. */ /* Maketde kart cercevesi 1 px TAM beyaz (cizgi enerjisi 254); SVG'deki rgba(255,255,255,.5) yarim parlaklik veriyordu (127). Masaustu yolu kendi degerinde kaliyor, yalnizca mobil yol tam beyaza cekildi. */ .wc-box-m{stroke:#fff;} .wc-box-d{display:none;} /* Kart kutusu maketten altpiksel olculdu: cerceve x34.98..393.80 (358.82 genis), yuksekligi 134.05, kart adimi 163. Kutu bolumun 36 px'lik yan dolgusundan 1 px sola ve .8 px saga tasar — maket boyle. Cerceve SVG yolunda .5 birim iceriden gectigi icin kutu yuksekligi 135.1 olunca gorunen cerceve 134.05'e oturuyor. */ .wc{position:relative;border:0;margin:calc(27.9 * var(--m)) calc(-.8 * var(--m)) 0 calc(-1 * var(--m)); min-height:calc(135.1 * var(--m)); padding:calc(20 * var(--m)) calc(15.5 * var(--m)) calc(16 * var(--m)) calc(84 * var(--m));} /* Ilk kart, ustundeki "Tedarikci degil, is ortagi." satirina maketteki kadar yakin dursun; digerleri arasindaki 27.9 px pay aynen kaliyor. */ .wc-1{margin-top:calc(21.7 * var(--m));} .wc-box{display:block;position:absolute;inset:0;width:100%;height:100%;} /* Numara maketten: "0" murekkep kutusu 17x22 tasarim px, kartin sol-ust kosesinden 12.5/14.5 px iceride. 35 punto 21x25 veriyordu — hem buyuk hem de centige yapisiyordu; 31 punto olcuyu tutturuyor. */ .wc-n{position:absolute;left:calc(10.5 * var(--m));top:calc(10.5 * var(--m)); font-family:var(--mach);font-weight:300; font-size:calc(31 * var(--f));line-height:1;letter-spacing:-.02em;color:#fff;} .wc-t{font-size:calc(15.6 * var(--f));font-weight:600;margin:0 0 calc(.3 * var(--m));} .wc-d{font-size:calc(13.9 * var(--f));line-height:1.827;font-weight:300;} .contact{text-align:center;overflow:hidden;} .ct-title{font-family:var(--serif);font-weight:700;font-size:calc(34.6 * var(--f));line-height:1.05;} .ct-title em{font-style:italic;font-weight:400;} /* Tasarimda alt metnin ilk satiri ("…nerede olursa olsun,") 369 tasarim px genisliginde; bolumun ic genisligi 358. Yazi iki yandan 7'ser px disari tasitilarak tasarimdaki satir kirilimi korunuyor. */ .ct-sub{font-size:calc(14.1 * var(--f));line-height:1.49;font-weight:300; margin:calc(11 * var(--m)) calc(-7 * var(--m)) 0;} .ct-btn{display:inline-block;margin-top:calc(14 * var(--m));background:#fff;color:#000; border-radius:99px;padding:calc(7 * var(--m)) calc(16 * var(--m)); font-family:var(--mach);font-size:calc(14 * var(--f)); /* Kisa metinli sayfalarda ("Süreci Başlatalım") hap maketteki 193 tasarim px'e kadar geniser; e-postali sayfalarda metin zaten daha genis oldugu icin taban devreye girmez. */ min-width:calc(193 * var(--m));text-align:center;} .ft-rule{display:block;height:1px;background:rgba(255,255,255,.35); margin:calc(39 * var(--m)) 0 calc(13 * var(--m));} .ft{display:block;font-family:var(--mach);font-size:calc(13.7 * var(--f)); line-height:1.31;margin:0;} /* Sayfa dibindeki dev logo — ayni maske. Mobil tasarimda tam olarak bolumun ic genisligini (358 tasarim px, x36-393) kapliyor; en dar ekranda bu deger ic genisligi asmasin diye min() var. */ .wordmark{display:block;font-size:0; width:min(calc(358 * var(--m)), 100%);aspect-ratio:6.918;height:auto; /* ORTALA. Kutu blok oldugu icin .contact'taki text-align:center onu ortalamaz; yan paylar auto olmazsa sola yapisir. 430x930 oraninda genislik zaten ic alanin tamami oldugu icin fark gorunmuyordu, ama gercek telefonlarda ekran maketten kisa kaldiginda --m yukseklikten kisiliyor (min(vw,svh)) ve logo ic alandan dar kaliyor: olculdu, 412x745'te sagda 59, 430x745'te 77 px bosluk kaliyordu. */ margin-left:auto;margin-right:auto; margin-top:calc(26 * var(--m)); /* Masaustunde oldugu gibi sayfa, logonun ortasindan bitiyor: kutu 52 px yuksekliginde ama alttan 18 px'i .contact'in overflow:hidden'i ile kirpiliyor, geriye maketteki 33 px kaliyor. Masaustu blogundaki .wordmark{margin:0} bunu sifirliyor, orada kirpma zaten bolum yuksekliginden geliyor. */ margin-bottom:calc(-18 * var(--m)); background-color:currentColor; -webkit-mask:url("assets/logo.svg?v=1") 0 0 / 100% 100% no-repeat; mask:url("assets/logo.svg?v=1") 0 0 / 100% 100% no-repeat;} /* ========================================================== MASAÜSTÜ — TASARIMLA BİREBİR (1600×900 sistemi) 1rem = 10 tasarım pikseli ========================================================== */ @media (min-width:900px){ /* 1rem = tasarımdaki 10px. Ölçek yalnızca genişliğe bakar: .625vw → 160rem tam olarak viewport genişliği kadar (1600 tasarım px) Böylece tasarım her ekranda sayfayı enine tam doldurur; 16:9'dan geniş ekranlarda yanlarda siyah bant kalmaz, sol yıldız kenardan taşar. 16:9'dan geniş ekranlarda hero tasarım yüksekliğini aşar; alt sıradaki öğeler (arama, scroll oku, TR rozeti, sol yıldız) kendi clamp(...,100vh-x,...) sınırlarıyla ekran içinde tutulur. ALT SINIR şart: yalnızca min() ile kısa pencerelerde bu öğeler yukarı kayıp hero paragrafının üstüne biniyordu (640px yükseklikte scroll oku metnin içinden geçiyordu). Alt sınır paragrafın bittiği yerin hemen altı; daha kısa pencerelerde öğeler katlamanın altında kalır — üst üste binmelerinden iyidir. */ html{font-size:.625vw;} body{font-size:1.3rem;} .stage{width:160rem;height:662.6rem;margin:0 auto;} /* her sayfa kendi arka plan görselini aşağıda tanımlıyor; burada yalnızca tam genişlik geometrisi var */ .stage::before{display:block;left:50%;transform:translateX(-50%);width:100vw;} section{position:absolute;left:0;width:160rem;} .hero {top:0; height:90rem;} .about {top:100rem; height:90rem;} .services{top:195rem; height:127.6rem;} .ribbons {top:315.8rem;height:75rem;overflow:visible;} .process {top:390.8rem;height:91.8rem;} .why {top:482.6rem; height:90rem;} .contact {top:572.6rem; height:90rem;} section{padding:0;text-align:left;} /* ---------- NAV ---------- */ .nav{position:absolute;top:0;left:0;width:160rem;height:16rem;padding:0;background:none;backdrop-filter:none;display:block;} .nav::before{display:none;} /* bulanik cubuk zemini yalnizca mobilde */ .nav .nv{display:block;position:absolute;top:7.271rem;font-size:1.34rem;line-height:1;font-weight:300;white-space:nowrap;} .nv1{left:11.8rem}.nv2{left:23.6rem}.nv3{left:33.9rem}.nv4{left:110.9rem}.nv5{left:125rem} .nav .nv::after{content:"";position:absolute;left:0;bottom:-.4rem;height:1px;width:0;background:#fff;transition:width .32s cubic-bezier(.4,0,.2,1);} .nav .nv:hover::after{width:100%;} /* 2.99rem Amandine yazisinin murekkebi 20.002 x 3.083rem idi. Logo ayni genislikte (20.002rem), orani geregi 2.891rem yuksek; top, iki murekkep kutusunun DIKEY MERKEZI cakissin diye 6.335 -> 6.68rem. Maske ve font-size:0 temel kuraldan geliyor. */ .brand{position:absolute;left:50%;transform:translateX(-50%);top:6.68rem; width:20.002rem;height:2.891rem;} /* display:flex burada tekrar veriliyor: mobil bloktaki ".nav .nv,.nav .pill-btn{display:none}" ayni ozgullukte ve daha once geldigi icin, ortak ".pill-btn{display:flex}" tek basina yetmiyor. */ .nav .pill-btn{display:flex;position:absolute;left:138.2rem;top:6.8rem; width:10.1rem;height:2.4rem;border-radius:99rem;font-size:1.34rem;} .nav .pill-btn .led{border-radius:99rem;padding:.07rem;} .nav .pill-btn .led::before{width:18rem;height:18rem;margin:-9rem 0 0 -9rem;} .nav .pill-btn .led.glow{padding:.1rem;filter:blur(.06rem);} .nav-toggle{display:none;} /* ---------- 1 · HERO ---------- */ .hero{overflow:visible;} /* ---------- HERO ÖLÇEĞİ (ana sayfa) ---------- Tasarım 1600×900, yani 16:9; ölçek şimdiye kadar yalnızca genişliğe bakıyordu (1rem = .625vw). Pencere 16:9'dan geniş oranlıysa (örn. 1920×950 tarayıcı alanı → 2.02) hero dikeyde taşıyor, başlık pencereye göre büyüyor ve alt sıra katlamanın altında kalıyordu. --hk (sayfa başındaki satır içi script yazar) = min(1, yükseklik / (genişlik × .5625)); hero ile navigasyon bu oranda küçülüp yatayda ortalanır, böylece kompozisyon her pencerede referans görseldeki yerleşimin aynısı olur. Hero kısaldığı için alttaki bölümler ve sahne boyu aynı farkla yukarı çekilir; aksi halde arada boşluk kalırdı. */ body.page-home{--shift:calc(90rem * (1 - var(--hk,1)));} /* Navigasyon olcegi ARTIK TUM SAYFALARDA. Eskiden yalnizca ana sayfada uygulaniyordu; ic sayfalarda ayni kural olmadigi icin logo ve menu satiri sayfa degisince buyuyordu. Ayni --hk, ayni transform-origin. */ .nav{transform:scale(var(--hk,1));transform-origin:50% 0;} body.page-home .hero{transform:scale(var(--hk,1));transform-origin:50% 0;} body.page-home .about {top:calc(100rem - var(--shift));} body.page-home .services{top:calc(195rem - var(--shift));} body.page-home .ribbons {top:calc(315.8rem - var(--shift));} body.page-home .process {top:calc(390.8rem - var(--shift));} body.page-home .why {top:calc(482.6rem - var(--shift));} body.page-home .contact {top:calc(572.6rem - var(--shift));} body.page-home .stage{height:calc(662.6rem - var(--shift));} /* Işık katmanı ölçeğe rağmen pencereyi enine doldursun: hero küçüldüğü için genişliği aynı oranda büyütülüp yeniden ortalanıyor. */ body.page-home .hero::before{width:calc(160rem / var(--hk,1)); left:calc(80rem - 80rem / var(--hk,1));} /* Hero artık pencereye sığdığı için alt sıra ve sol yıldız tasarımdaki yerinde durabilir; 100vh'li clamp'ler (kısa pencerede öğeleri yukarı çeken çözüm) ana sayfada gereksiz. Diğer sayfalarda kalmaya devam eder. */ body.page-home .hero-search, body.page-home .lang{top:81.1rem;} body.page-home .scroll-cue{top:80.6rem;} body.page-home .blob-l{top:42.8rem;} /* Kenardaki öğeler pencere kenarına yapışsın: hero küçülünce iki yanda kalan pay kadar dışarı itilirler; boyutları kompozisyonla aynı ölçekte kalır, yalnızca kenar boşlukları pencereye göre ölçülür. Ortadakiler (logo, başlık, paragraf, scroll oku) olduğu gibi kalır. */ /* Nav ogeleri: her sayfada pencere kenarina yapissin. */ .nv1, .nv2, .nv3{margin-left:calc(-1 * var(--hpx,0px));} .nv4, .nv5, .nav .pill-btn{margin-left:var(--hpx,0px);} /* Hero ogeleri: yalnizca ana sayfada (hero orada olcekleniyor). */ body.page-home .hero-search, body.page-home .blob-l{margin-left:calc(-1 * var(--hpx,0px));} body.page-home .blob-r{margin-left:var(--hpx,0px);} body.page-home .lang{margin-right:calc(-1 * var(--hpx,0px));} /* Sol yıldızın kendisi soldan kırpılmış bir render (asset'in ilk sütununda çizgi var). Kutu tam pencere kenarındayken süzülme animasyonu yıldızı sağa taşıdığı anlarda (+.6rem) bu düz kesik kenar görünüyordu; 1.2rem daha dışarı alındı, böylece kesik her fazda ekranın dışında kalıyor. */ body.page-home .blob-l{margin-left:calc(-1 * var(--hpx,0px) - 1.2rem);} /* Baslik once vektore cevrilmis SVG idi; o dosyada tek egri komutu yok (940 duz cizgi), bu yuzden harf kavisleri kirikli gorunuyordu. Fontlar yuklendigi icin gercek metne dondurdu. */ /* font-size mutlaka verilmeli: verilmezse mobil kuraldaki 11.5vw miras kaliyor, satir kutusunun strut'i devlesip taban cizgisini asagi itiyor. .up ile ayni deger, hem strut'i hem de CESUR/Fikirler arasindaki bosluk karakterini dogru boyutluyor. */ .hero-title{position:absolute;left:30rem;top:28.655rem;width:99.6rem;height:auto;overflow:visible; font-size:11.646rem;line-height:10.25rem;} .hero-title .ln{display:block;white-space:nowrap;} .hero-title .up{font-family:var(--capsdisp);font-weight:300;font-size:12.471rem;} .hero-title em{font-family:var(--serif);font-variation-settings:"opsz" 96; font-style:italic;font-weight:400;font-size:11.125rem;} /* Asagidaki degerler refhero.png uzerinden piksel olculerek ayarlandi (1600x900, 1rem = 10 tasarim px). Hedefler: satir 1 CESUR sol 411, Fikirler sag 1196, kapak ust 296, taban 386 satir 2 Guclu sol 308 / sag 605, MARKALAR sol 637 / sag 1284, kapak ust 418, taban 507 (satirlar arasi taban farki 121) */ /* Asagidaki degerler refhero.png uzerinde olcum-geri besleme dongusuyle oturtuldu; her murekkep kutusu referansa 2px icinde. Harf araliklari ~0: dogru font, tasarima zorlamasiz oturuyor. */ .hero-title .tr-g{letter-spacing:0;margin-right:-.74rem;} .hero-title .ln:first-child{position:relative;left:-.425rem;letter-spacing:0;} .hero-title .ln:first-child .up{letter-spacing:-.042rem;margin-right:-.043rem;} .hero-title .ln:last-child{position:relative;top:1.04rem;left:-.17rem;letter-spacing:0;} .hero-title .ln:last-child .up{letter-spacing:.012rem;margin-right:-.012rem;} .hero-mark{display:block;position:absolute;left:51.8rem;top:55.7rem;width:6.2rem;height:6.2rem;margin:0;} .hero-mark svg{width:100%;height:100%;display:block;} .hero-para{position:absolute;left:60.4rem;top:55.811rem; font-size:1.252rem;line-height:1.5rem;font-weight:300;color:#fff;text-align:left;} .hero-para br{display:block;} .hero-para b{font-weight:600;} .hero-search{display:block;position:absolute;left:11.6rem;top:clamp(63.4rem, calc(100vh - 8.9rem), 81.1rem); width:19.8rem;height:2.3rem;padding:0;border:1px solid rgba(255,255,255,.95);border-radius:99rem; z-index:20;} .hero-search svg{position:absolute;left:.5rem;top:-.0rem;width:2rem;height:2.2rem;display:block;} .hero-search input{position:absolute;left:3.2rem;top:0;width:15.6rem;height:2.1rem; background:none;border:0;outline:0;color:#fff;font-family:var(--sans);font-size:1.1rem;} /* type="search" tarayici suslerini kapat — kutunun tasarimdaki hali bozulmasin */ .hero-search input::-webkit-search-cancel-button, .hero-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;} .hero-search input::placeholder{color:rgba(255,255,255,.45);} /* --- arama paneli · masaustu olculeri --- Ortak gorunum mobil blogunda tanimli; burada yalnizca rem olculeri ve yon var: kutu hero'nun alt kenarinda durdugu icin panel yukari acilir. Menu icindeki arama masaustunde hic gorunmez. */ .nav .nav-search,body.menu-open .nav .nav-search{display:none;} .hero-search .hs-panel{left:0;right:auto;top:auto;bottom:calc(100% + 1.1rem);width:38rem; max-height:min(42rem, calc(100vh - 13rem)); border-radius:1.4rem;box-shadow:0 2.4rem 6rem rgba(0,0,0,.72);padding:.7rem; backdrop-filter:blur(1.4rem);-webkit-backdrop-filter:blur(1.4rem);} .hero-search .hs-list::-webkit-scrollbar{width:.5rem;} .hero-search .hs-label{padding:.5rem .9rem .3rem;font-size:1.02rem;line-height:1.4rem;} .hero-search .hs-item{padding:.72rem .9rem;border-radius:.9rem;} .hero-search .hs-item-top{gap:.8rem;} .hero-search .hs-t{font-size:1.32rem;line-height:1.9rem;} .hero-search .hs-s{font-size:1rem;line-height:1.9rem;} .hero-search .hs-d{margin-top:.1rem;font-size:1.13rem;line-height:1.7rem;} .hero-search .hs-empty{padding:1.1rem .9rem;font-size:1.2rem;line-height:1.8rem;} /* klavye ipucu yalnizca masaustunde anlamli */ .hero-search .hs-foot{display:flex;gap:1.4rem;padding:.6rem .9rem .2rem;margin-top:.3rem; font-size:.98rem;line-height:1.6rem;} /* derin baglantiyla gelindiginde hedef ekranin tepesine yapismasin */ .svc,.ps,.wy,section[id]{scroll-margin-top:2rem;} /* left, sahnenin ortasina (80rem) gore hesaplandi. Duz "80 - 4.8/2 = 77.6" degil: cizim kendi viewBox'inda ortali degil (0 0 48 54 icinde murekkep 4.73..42.36, yani solda 4.73 sagda 5.64 birim bosluk) ve merkezi kutunun 0.455 birim solunda kaliyor. Kutu 4.8rem/48 birim olcekle cizildigi icin bu 0.0455rem eder; goze carpan sey murekkep oldugundan kutu o kadar saga alindi: 80 - 2.4 + 0.0455 = 77.6455rem. Boylece okun kendisi sahnenin tam ortasinda duruyor (eski 77.7rem'de 0.545px sagda kaliyordu). */ /* Mobildeki .hero-alt sarmalayicisi masaustunde hic yokmus gibi davranir; ok ve rozetler yine .hero'ya gore mutlak konumlanir. */ .hero-alt{display:contents;} .scroll-cue{display:block;position:absolute;left:77.6455rem;top:clamp(63rem, calc(100vh - 9.4rem), 80.6rem);width:4.8rem;height:5.4rem; animation:cue 2.8s ease-in-out infinite;} @keyframes cue{0%,100%{transform:translateY(-.35rem);opacity:.8}50%{transform:translateY(.75rem);opacity:1}} .scroll-cue svg{width:100%;height:100%;display:block;} /* Grup sagdan konumlaniyor: TR tek basinayken sag kenari 148.4rem'deydi ve soldaki arama kutusuyla simetrikti (iki yanda 11.6rem). EN eklenince simetri korunsun diye buyume sola dogru. */ .lang{position:absolute;right:11.6rem;top:clamp(63.4rem, calc(100vh - 8.9rem), 81.1rem); gap:.9rem;} .lang-btn{width:3.7rem;height:2.3rem;border-width:.12rem; font-size:1.43rem;letter-spacing:-.09rem;text-indent:-.09rem;} .blob{display:block;transform-style:preserve-3d;will-change:transform;} /* Yıldız tasarım ölçüsünde kalır; yalnızca çok geniş ekranlarda alt kenarı ekranın dışına taşmasın diye yukarı kaydırılır (küçültülmez). */ .blob-l{left:0; top:clamp(33rem, calc(100vh - 30.8rem), 42.8rem); width:24.6rem; height:30.8rem; animation:floatL 19s ease-in-out infinite;} .blob-r{left:138.6rem;top:17.8rem; width:19rem; height:19rem; animation:floatR 16s ease-in-out infinite;} @keyframes floatL{ 0% {transform:perspective(90rem) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);} 25% {transform:perspective(90rem) translate3d(.6rem,-1.4rem,3rem) rotateX(7deg) rotateY(-9deg) rotateZ(2deg);} 50% {transform:perspective(90rem) translate3d(-.4rem,-2.2rem,0) rotateX(-5deg) rotateY(6deg) rotateZ(-3deg);} 75% {transform:perspective(90rem) translate3d(-.8rem,-1rem,-2rem) rotateX(4deg) rotateY(10deg) rotateZ(1.5deg);} 100% {transform:perspective(90rem) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);} } @keyframes floatR{ 0% {transform:perspective(70rem) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);} 25% {transform:perspective(70rem) translate3d(-.7rem,1.2rem,-2.4rem) rotateX(-8deg) rotateY(11deg) rotateZ(-2.5deg);} 50% {transform:perspective(70rem) translate3d(.5rem,2rem,2rem) rotateX(6deg) rotateY(-7deg) rotateZ(3deg);} 75% {transform:perspective(70rem) translate3d(.9rem,.9rem,0) rotateX(-4deg) rotateY(-11deg) rotateZ(-1.5deg);} 100% {transform:perspective(70rem) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);} } /* Yüzükler de yıldızlar gibi serbestçe süzülür. Genlik yıldızlardan biraz daha küçük (yüzükler de daha küçük); her yüzük farklı süre ve negatif gecikmeyle başlar ki hareketleri birbirine kilitlenmesin. */ /* Yol bir Lissajous (8) eğrisi: her kanal saf sinüs, 30°'de bir örneklenmiş. Dönüm noktası az olsaydı ease-in-out her noktada hızı sıfırlar ve hareket duraksardı; 13 nokta + linear ile hız sabit kalır, akış kesilmez. */ @keyframes floatRingA{ 0% {transform:perspective(60rem) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);} 8.33% {transform:perspective(60rem) translate3d(.35rem,.95rem,1rem) rotateX(4.33deg) rotateY(4deg) rotateZ(2deg);} 16.66% {transform:perspective(60rem) translate3d(.61rem,.95rem,1.73rem) rotateX(4.33deg) rotateY(6.93deg) rotateZ(0deg);} 25% {transform:perspective(60rem) translate3d(.7rem,0,2rem) rotateX(0deg) rotateY(8deg) rotateZ(-2deg);} 33.33% {transform:perspective(60rem) translate3d(.61rem,-.95rem,1.73rem) rotateX(-4.33deg) rotateY(6.93deg) rotateZ(0deg);} 41.66% {transform:perspective(60rem) translate3d(.35rem,-.95rem,1rem) rotateX(-4.33deg) rotateY(4deg) rotateZ(2deg);} 50% {transform:perspective(60rem) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);} 58.33% {transform:perspective(60rem) translate3d(-.35rem,.95rem,-1rem) rotateX(4.33deg) rotateY(-4deg) rotateZ(-2deg);} 66.66% {transform:perspective(60rem) translate3d(-.61rem,.95rem,-1.73rem)rotateX(4.33deg) rotateY(-6.93deg) rotateZ(0deg);} 75% {transform:perspective(60rem) translate3d(-.7rem,0,-2rem) rotateX(0deg) rotateY(-8deg) rotateZ(2deg);} 83.33% {transform:perspective(60rem) translate3d(-.61rem,-.95rem,-1.73rem)rotateX(-4.33deg)rotateY(-6.93deg) rotateZ(0deg);} 91.66% {transform:perspective(60rem) translate3d(-.35rem,-.95rem,-1rem) rotateX(-4.33deg) rotateY(-4deg) rotateZ(-2deg);} 100% {transform:perspective(60rem) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);} } /* B: sekizin yönü ters (yatay yerine dikey baskın) — aynı görünmesinler. */ @keyframes floatRingB{ 0% {transform:perspective(60rem) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);} 8.33% {transform:perspective(60rem) translate3d(-.69rem,.65rem,1.56rem) rotateX(3deg) rotateY(-6.06deg) rotateZ(1.8deg);} 16.66% {transform:perspective(60rem) translate3d(-.69rem,1.13rem,1.56rem) rotateX(5.2deg) rotateY(-6.06deg) rotateZ(0deg);} 25% {transform:perspective(60rem) translate3d(0,1.3rem,0) rotateX(6deg) rotateY(0deg) rotateZ(-1.8deg);} 33.33% {transform:perspective(60rem) translate3d(.69rem,1.13rem,-1.56rem) rotateX(5.2deg) rotateY(6.06deg) rotateZ(0deg);} 41.66% {transform:perspective(60rem) translate3d(.69rem,.65rem,-1.56rem) rotateX(3deg) rotateY(6.06deg) rotateZ(1.8deg);} 50% {transform:perspective(60rem) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);} 58.33% {transform:perspective(60rem) translate3d(-.69rem,-.65rem,1.56rem) rotateX(-3deg) rotateY(-6.06deg) rotateZ(-1.8deg);} 66.66% {transform:perspective(60rem) translate3d(-.69rem,-1.13rem,1.56rem)rotateX(-5.2deg) rotateY(-6.06deg) rotateZ(0deg);} 75% {transform:perspective(60rem) translate3d(0,-1.3rem,0) rotateX(-6deg) rotateY(0deg) rotateZ(1.8deg);} 83.33% {transform:perspective(60rem) translate3d(.69rem,-1.13rem,-1.56rem)rotateX(-5.2deg) rotateY(6.06deg) rotateZ(0deg);} 91.66% {transform:perspective(60rem) translate3d(.69rem,-.65rem,-1.56rem) rotateX(-3deg) rotateY(6.06deg) rotateZ(-1.8deg);} 100% {transform:perspective(60rem) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);} } /* ---------- ORTAK: bölüm başlıkları ---------- */ .ast{position:absolute;width:9.9rem;height:9.4rem;margin:0;} .ring{display:block;transform-style:preserve-3d;will-change:transform; animation:floatRingA 12s linear infinite;} .ttl{position:absolute;font-family:var(--disp);font-variation-settings:"opsz" 96;font-weight:700; font-size:4.125rem;line-height:1;letter-spacing:-.02em;white-space:nowrap;} .ttl-i{position:absolute;font-family:var(--serif);font-variation-settings:"opsz" 96; font-style:italic;font-weight:400;font-size:4.125rem;line-height:1;letter-spacing:0;white-space:nowrap;margin:0;} .rule{position:absolute;display:block;height:1px;} .lead{position:absolute;font-family:var(--mach);font-size:2.94rem;line-height:3.8rem;font-weight:300;margin:0;letter-spacing:0;} .lead br{display:block;} /* ---------- 2 · GROOF NE'DİR ---------- */ /* Hayalet yazı hero banner'inin bittigi cizgide baslar. .about 100rem'de basliyor, hero ise 90rem'de bitiyor; yazi 10rem yukari alindi ki banner'in sert kesigi ile yazinin ust kenari cakissin (hk<1 iken de: hero'nun gorsel alti = 90rem - shift, .about ust = 100rem - shift, aradaki 10rem sabit). --ghost-top = kutunun konumu, --ghost-clip = ustten duz kirpma payi. Eskiden ikisi ayni degerdi; ayrildilar ki yazi kaysin ama harflerin ustundeki kirpma ayni kalsin. */ .ghost{display:block;position:absolute;left:-2.4rem; --ghost-top:-17.15rem;--ghost-clip:7.15rem;top:var(--ghost-top); font-family:var(--mach);font-weight:300;font-size:17.8rem;letter-spacing:.725rem; line-height:1;color:#131313;white-space:nowrap; clip-path:inset(var(--ghost-clip) 0 0 0);} .ast-about{left:28.9rem;top:17.3rem;} .ttl-about-1{left:40.93rem;top:17.67rem;} .ttl-about-2{left:40.93rem;top:22.27rem;} .rule-about{left:58.6rem;top:21.1rem;width:17.9rem;} .ring-about{left:12.5rem;top:35rem; width:15.5rem;height:12.8rem; animation-name:floatRingA;animation-duration:13s; animation-delay:-3s;} .statement{position:absolute;left:0;top:56.368rem;width:76.3rem;text-align:right; font-family:var(--mach);font-weight:300;font-size:2.9rem;line-height:4.2rem;letter-spacing:0;margin:0;} .statement br{display:block;} .about-para{position:absolute;left:0;top:65.585rem;width:76.3rem;text-align:right; font-size:1.323rem;line-height:2.68rem;font-weight:300;margin:0;} .about-para br{display:block;} .wall{display:block;position:absolute;left:79rem;top:20rem;width:53rem;height:65rem;background:#fff; -webkit-mask:url("assets/wall-mask.png?v=2") 0 0 / 100% 100% no-repeat; mask:url("assets/wall-mask.png?v=2") 0 0 / 100% 100% no-repeat;} /* ---------- 3 · İSTATİSTİK ---------- */ .ring-srv{left:132rem; top:.8rem; width:15.8rem;height:12rem; animation-name:floatRingB;animation-duration:11s; animation-delay:-7s;} .stats{display:block;margin:0;} .st-num{position:absolute;display:block;width:37.3rem;text-align:center;margin:0; font-family:var(--didone);font-weight:700;font-size:4.6rem;line-height:1;} .st-num sup{font-size:1em;vertical-align:baseline;top:0;position:static;} .st-num-1{left:23.4rem;top:21.82rem;} .st-num-2{left:61.8rem;top:21.82rem;} .st-num-3{left:99.75rem;top:21.82rem;} .st-txt{position:absolute;display:block;width:37.3rem;text-align:center;margin:0; font-size:1.345rem;line-height:2.1rem;font-weight:300;} .st-txt br{display:block;} .st-txt-1{left:23.4rem;top:28.379rem;} .st-txt-2{left:61.8rem;top:28.379rem;} .st-txt-3{left:99.75rem;top:28.379rem;} .st-div{display:block;position:absolute;top:23.1rem;width:1px;height:8.2rem;background:rgba(255,255,255,.4);} .st-div-1{left:61.35rem;} .st-div-2{left:98.65rem;} /* ---------- 4 · HİZMETLER ---------- */ .ast-srv{left:28.9rem;top:61.7rem;} .ttl-srv-1{left:40.93rem;top:62.07rem;} .ttl-srv-2{left:40.93rem;top:66.67rem;} .rule-srv{left:63.9rem;top:65.6rem;width:12.5rem;} .lead-srv{left:80.8rem;top:63.058rem;} .acc{list-style:none;position:absolute;left:34.7rem;top:0;width:90.6rem;margin:0;} .acc-item{position:static;border:0;} .acc-head{position:absolute;left:0;width:90.6rem;padding:0;background:none;border:0;display:block;height:3.4rem; transform:translateY(var(--sh,0px));transition:transform .45s cubic-bezier(.4,0,.2,1);} .acc-t{position:absolute;left:0;top:0;font-size:1.499rem;line-height:1.5rem;font-weight:600;white-space:nowrap; transition:transform .35s cubic-bezier(.4,0,.2,1);} .acc-head:hover .acc-t{transform:translateX(.6rem);} .acc-i{position:absolute;left:86.7rem;top:.674rem;width:1.6rem;height:1.8rem;} .acc-i svg{width:100%;height:100%;} .acc-item:nth-child(1) .acc-head{top:75.026rem;} .acc-item:nth-child(2) .acc-head{top:84.126rem;} .acc-item:nth-child(3) .acc-head{top:90.426rem;} .acc-item:nth-child(4) .acc-head{top:96.726rem;} .acc-item:nth-child(5) .acc-head{top:103.026rem;} .acc-item:nth-child(6) .acc-head{top:109.426rem;} .acc-item:nth-child(7) .acc-head{top:115.726rem;} .acc-item:nth-child(8) .acc-head{top:122.026rem;} .acc-b{position:absolute;left:0;width:90.6rem;display:block;overflow:hidden;height:0;opacity:0; transform:translateY(var(--sh,0px)); transition:height .45s cubic-bezier(.4,0,.2,1),opacity .3s ease,transform .45s cubic-bezier(.4,0,.2,1);} .acc-item.is-open .acc-b{height:2.8rem;opacity:1;} .acc-b>p{width:90.6rem;font-size:1.336rem;line-height:2rem;font-weight:300;padding:0;} .acc-item:nth-child(1) .acc-b{top:77.932rem;} .acc-item:nth-child(2) .acc-b{top:87.032rem;} .acc-item:nth-child(3) .acc-b{top:93.332rem;} .acc-item:nth-child(4) .acc-b{top:99.632rem;} .acc-item:nth-child(5) .acc-b{top:105.932rem;} .acc-item:nth-child(6) .acc-b{top:112.332rem;} .acc-item:nth-child(7) .acc-b{top:118.632rem;} .acc-item:nth-child(8) .acc-b{top:124.932rem;} .acc-item:not(:last-child)::after{ content:"";position:absolute;left:0;width:90.6rem;height:1px;background:var(--line); transform:translateY(var(--shn,0px));transition:transform .45s cubic-bezier(.4,0,.2,1);} .acc-item:nth-child(1)::after{top:81.9rem;} .acc-item:nth-child(2)::after{top:87.95rem;} .acc-item:nth-child(3)::after{top:94.3rem;} .acc-item:nth-child(4)::after{top:100.6rem;} .acc-item:nth-child(5)::after{top:106.95rem;} .acc-item:nth-child(6)::after{top:113.25rem;} .acc-item:nth-child(7)::after{top:119.55rem;} /* ---------- 5 · ŞERİTLER ---------- */ .ribbons{position:absolute;height:75rem;overflow:visible;pointer-events:none;} .ring-rib{left:10rem; top:2.8rem; width:15.5rem;height:12.8rem; animation-name:floatRingA;animation-duration:14.5s;animation-delay:-11s;} .rb{position:absolute;left:-50%;width:200%;height:4.8rem;padding:0;display:flex;align-items:center; background:#fff;color:#000;overflow:hidden;} .rb-a{top:41.06rem;transform:rotate(6.33deg);} .rb-b{top:38.97rem;transform:rotate(-3.03deg);} .rb-t{display:flex;width:max-content;animation:marquee 40s linear infinite;} /* Adim (bir tekrardan digerine) eskiden 24.247rem idi: 22.047rem yazi genisligi + 2.2rem bosluk. Kutu artik dogrudan 24.247rem, serit yuksekligi kadar (4.8rem) yuksek; maske eski murekkebin merkeziyle ayni yerde. Boylece marquee'nin ritmi ve translateX(-50%) donusu birebir korunuyor. */ .rb-t span{display:block;font-size:0;width:24.247rem;height:4.8rem;padding:0; background-color:currentColor; -webkit-mask:url("assets/logo.svg?v=1") .054rem 1.154rem / 21.958rem 3.174rem no-repeat; mask:url("assets/logo.svg?v=1") .054rem 1.154rem / 21.958rem 3.174rem no-repeat;} /* ---------- 6 · ADIM ADIM ---------- */ .ring-prc{left:128.4rem;top:2.8rem; width:16.6rem;height:12.2rem; animation-name:floatRingB;animation-duration:12s; animation-delay:-5s;} .ast-prc{left:28.9rem;top:9.1rem;} .ttl-prc-1{left:40.93rem;top:9.47rem;} .ttl-prc-2{left:40.93rem;top:14.07rem;} .rule-prc{left:56.4rem;top:13rem;width:20.1rem;} .lead-prc{left:80.8rem;top:10.458rem;} .prc-img{position:absolute;left:29.2rem;top:25.5rem;width:43.3rem;height:53.9rem;margin:0;max-width:none; background-image:url("assets/prc-photo.webp?v=1");background-size:370.4% 167.3%;background-position:25% 70.4%; background-repeat:no-repeat;filter:grayscale(1) contrast(1.03);} .sp-num{position:absolute;display:block;margin:0;font-family:var(--didone);font-weight:700;font-size:4.6rem;line-height:1;} .sp-t{position:absolute;margin:0;font-size:2.03rem;line-height:2.03rem;font-weight:600;letter-spacing:-.01em;} .sp-d{position:absolute;margin:0;width:21rem;font-size:1.336rem;line-height:2.06rem;font-weight:300;} .sp-d br{display:block;} .sp-num-1,.sp-t-1,.sp-d-1,.sp-num-3,.sp-t-3,.sp-d-3,.sp-num-5,.sp-t-5,.sp-d-5{left:80.8rem;} .sp-num-2,.sp-t-2,.sp-d-2,.sp-num-4,.sp-t-4,.sp-d-4{left:107.4rem;} .sp-num-1,.sp-num-2{top:19.42rem;} .sp-t-1,.sp-t-2{top:25.774rem;} .sp-d-1,.sp-d-2{top:29.102rem;} .sp-num-3,.sp-num-4{top:42.62rem;} .sp-t-3,.sp-t-4{top:48.774rem;} .sp-d-3,.sp-d-4{top:52.202rem;} .sp-num-5{top:63.72rem;} .sp-t-5{top:70.074rem;} .sp-d-5{top:73.302rem;} /* ---------- 7 · NEDEN GROOF ---------- */ .ring-why{left:8.4rem; top:6.4rem; width:16.6rem;height:12.6rem; animation-name:floatRingA;animation-duration:10.5s;animation-delay:-9s;} .ast-why{left:28.9rem;top:25.3rem;} .ttl-why-1{left:40.93rem;top:25.77rem;} .ttl-why-2{left:40.93rem;top:30.37rem;} .rule-why{left:56.4rem;top:29.2rem;width:20.1rem;} .lead-why{left:80.8rem;top:26.758rem;} /* Centik yolu masaustunde ceyrek daire; mobil karsiligi .wc-box-m. Mobil kurallar taban katmanda yazili oldugu icin .wc-box-d taban katmanda gizli; burada geri aciliyor. */ .wc-box-m{display:none;} .wc-box-d{display:inline;} .wc{position:absolute;width:47.9rem;height:13.1rem;min-height:0;padding:0;border:0;margin:0;} .wc-1{left:27.3rem;top:41.7rem;} .wc-2{left:84.8rem;top:41.7rem;} .wc-3{left:27.3rem;top:58.2rem;} .wc-4{left:84.8rem;top:58.2rem;} .wc-box{display:block;position:absolute;inset:0;width:100%;height:100%;} .wc-n{position:absolute;left:1.31rem;top:1.36rem;font-family:var(--mach);font-weight:300;font-size:4.08rem; line-height:1;letter-spacing:-.09rem;color:#fff;-webkit-text-stroke:0;} .wc-t{position:absolute;left:10.7rem;top:3.305rem;margin:0;font-size:1.523rem;line-height:1.523rem;font-weight:600;} .wc-d{position:absolute;left:10.7rem;top:5.483rem;margin:0;font-size:1.335rem;line-height:2.5rem;font-weight:300;} .wc-d br{display:block;} /* ---------- 8 · İLETİŞİM ---------- */ /* Sayfa, alttaki "groof creative" yazısının ortasından biter: yazının alt yarısı bölümün alt kenarında kırpılır (tasarımdaki gibi). */ .contact{text-align:left;overflow:hidden;} .ct-title{position:absolute;left:0;top:34.727rem;width:160rem;text-align:center; font-family:var(--serif);font-weight:700;font-size:8.875rem;line-height:9.2rem;letter-spacing:0;} .ct-title em{font-style:italic;font-weight:400;} .ct-sub{position:absolute;left:0;top:46.877rem;width:160rem;text-align:center;margin:0; font-size:1.674rem;line-height:1.7rem;font-weight:300;} .ct-btn{position:absolute;left:68.3rem;top:52.3rem;width:23.4rem;height:3.6rem;margin:0;padding:0; min-width:0; display:flex;align-items:center;justify-content:center;background:#fff;color:#000;border-radius:99rem; font-family:var(--mach);font-size:1.42rem;line-height:1;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease;} .ct-btn:hover{transform:translateY(-.3rem);box-shadow:0 1.4rem 3.4rem rgba(255,255,255,.16);} /* Ingilizce sayfalarda bu pilin metni degisiyor; en uzunu about'taki "Let's Talk About Your Project" (20.3rem) tasarimdan olculen 23.4rem kutuda yanlara yalnizca 1.55rem birakiyor, harfler yuvarlak ucun icinde kaliyor. Taban 2.4rem yan bosluk garanti edilip genislik gerekirse buyuyor; min-width tasarim olcusunu koruyor, yani sigan metinlerde ("Let's Start the Process", e-posta) kutu 23.4rem kaliyor ve yalnizca about buyuyor. Ortalama wk-btn ile ayni gerekce: translateX(-50%) :hover'daki translateY'yi ezerdi. */ html[lang="en"] .ct-btn{left:0;right:0;min-width:23.4rem;width:fit-content; margin-inline:auto;padding-inline:2.4rem;} .ft-rule{position:absolute;left:11.7rem;top:68.4rem;width:136.5rem;height:1px;background:rgba(255,255,255,.32);margin:0;} .ft{position:absolute;top:70.593rem;margin:0;font-family:var(--mach);font-size:1.42rem; line-height:1.42rem;font-weight:400;white-space:nowrap;} .ft-l{left:11.8rem;} .ft-c{left:0;width:160rem;text-align:center;} .ft-r{left:0;width:148.1rem;text-align:right;} /* Uc parca da left:0'dan baslayan genis kutular; hizalama text-align ile yapiliyor. Bu yuzden DOM'da sonra gelen .ft-r, ortadaki Instagram/LinkedIn baglantilarinin uzerini goruntusuz kapatip tiklamayi yutuyordu. Kutular tiklamayi gecirir, yalnizca baglantilar yakalar. */ .ft-l,.ft-c,.ft-r{pointer-events:none;} .ft-c a{pointer-events:auto;} .ft-c a{transition:opacity .25s ease;} .ft-c a:hover{opacity:.6;} /* .contact overflow:hidden oldugu icin bu logo sayfanin alt kenarinda kirpiliyor. Bu yuzden burada MERKEZ degil UST kenar hizalaniyor: 21.1rem yazinin murekkebi 11.530 / 77.386rem'de basliyor, 141.151rem genisligindeydi. Logo ayni yerden, ayni genislikte. */ .wordmark{position:absolute;left:11.53rem;top:77.386rem;margin:0; width:141.151rem;height:20.403rem;} } /* ========================================================== HAKKIMIZDA SAYFASI (hakkimizda.html) Ölçüler referans görsellerden (1600×900, 1rem = 10 tasarım px) piksel ölçülerek çıkarıldı. ========================================================== */ /* --- mobil / akış düzeni --- */ /* sayfa boyu arka plan görseli (Untitled-1_Hakkımızda.jpg) */ .page-about .stage::before{display:block;left:0;width:100%;transform:none; background:url("assets/bg-about-m.webp?v=1") 50% 0 / cover no-repeat #000;} .page-about .manifesto{padding:calc(148 * var(--m)) calc(36 * var(--m)) calc(114 * var(--m));text-align:center;} .ab-ttl{margin:0;font-weight:400;} .ab-ttl-1,.ab-ttl-2{display:block;line-height:calc(36 * var(--m));} .ab-ttl-1{font-family:var(--mach);font-weight:300;font-size:calc(30.5 * var(--f));} .ab-ttl-2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:calc(36.2 * var(--f));} .ab-lead{margin:calc(12 * var(--m)) 0 0;font-size:calc(14.2 * var(--f)); line-height:1.767;font-weight:300;} .ab-people{margin:calc(75 * var(--m)) 0 0;font-size:calc(14.15 * var(--f)); line-height:2.19;font-weight:300;} .ab-people b{font-weight:600;} .ab-body{margin:calc(74 * var(--m)) 0 0;} .ab-body p{margin:0 0 calc(28 * var(--m));font-size:calc(14.2 * var(--f)); line-height:1.965;font-weight:300;} .ab-body p:last-child{margin-bottom:0;} .ab-body b{font-weight:600;} /* Makette masaustundeki kirilimlar korunuyor: "…3D artist," ve "…kurduk. İhtiyaç" satirlari orada bitiyor, ikinci paragrafta da "her proje için doğru kadro." tek basina bir satir. */ .ab-body br{display:block;} @media (max-width:899.98px){ .ab-star-l,.ab-star-r{display:block;position:absolute;z-index:0;pointer-events:none; opacity:.75;background:url("assets/star-right.webp?v=1") 0 0 / 100% 100% no-repeat;} .ab-star-l{left:-9%;top:30%;width:34%;aspect-ratio:1;} } .ab-star-r{right:-8%;top:9%;width:27%;aspect-ratio:1;} @media (min-width:900px){ /* Sayfa yüksekliği: iletişim bölümü 91.7rem'de başlıyor (buton, çizgi ve footer konumları referans görselle birebir bunu veriyor), bölümün kendisi diğer sayfalardaki gibi 90rem: footer çizgisinin altında "groof creative" yazısına yer kalsın, yazı da sayfanın alt kenarında kırpılsın. 91.7 + 90 = 181.7rem; referans arka plan görseli de (8000x9083 → 1600 en) 181.66rem veriyor. Önceki 73.8rem'lik bölüm wordmark'ı tamamen kesiyordu. */ .page-about .stage{height:181.7rem;} .page-about .stage::before{left:50%;transform:translateX(-50%);width:100vw; background:url("assets/bg-about.webp?v=2") 50% 0 / cover no-repeat #000;} .page-about .manifesto{position:absolute;left:0;top:0;width:160rem;height:91.7rem; padding:0;text-align:left;overflow:visible;} .page-about .contact{position:absolute;left:0;top:91.7rem;width:160rem;height:90rem;} /* yıldızlar — ikisi de star-right.webp; kutular ölçülen ink kutusundan geri hesaplandı (görselin ink/kutu oranı: 0.8368 × 0.8553, iç boşluk .0763/.0737) */ .ab-star-l,.ab-star-r{display:block;position:absolute;pointer-events:none;z-index:0; background:url("assets/star-right.webp?v=1") 0 0 / 100% 100% no-repeat; transform-style:preserve-3d;will-change:transform;} .ab-star-l{left:21.78rem;top:28.24rem;width:17.33rem;height:15.78rem; animation:floatL 19s ease-in-out infinite;} .ab-star-r{left:120.05rem;top:14rem; width:19rem; height:19rem; animation:floatR 16s ease-in-out infinite;} .ab-ttl{position:absolute;left:0;top:0;width:160rem;} .ab-ttl-1,.ab-ttl-2{position:absolute;left:0;width:160rem;text-align:center;white-space:nowrap;} .ab-ttl-1{top:23.27rem;font-family:var(--mach);font-weight:300; font-size:6.43rem;line-height:6.43rem;letter-spacing:0;} .ab-ttl-2{top:30.05rem;font-family:var(--serif);font-style:italic;font-weight:400; font-size:7.71rem;line-height:7.71rem;letter-spacing:0;} .ab-lead{position:absolute;left:0;top:40.71rem;width:160rem;margin:0;text-align:center; font-size:1.35rem;line-height:2rem;font-weight:300;white-space:nowrap;} .ab-people{position:absolute;left:0;top:55.95rem;width:160rem;margin:0;text-align:center; font-size:1.35rem;line-height:2.6rem;font-weight:300;} .ab-people b{font-weight:600;} .ab-people br{display:block;} .ab-body{position:absolute;left:0;top:70.9rem;width:160rem;text-align:center;} .ab-body p{margin:0;font-size:1.35rem;line-height:2.65rem;font-weight:300;} /* paragraflar arasında tam bir satır boşluk (referansta 5.3rem'lik atlama) */ .ab-body p + p{margin-top:2.65rem;} .ab-body b{font-weight:600;} .ab-body br{display:block;} } /* ========================================================== HİZMETLER SAYFASI (hizmetler.html) Ölçüler 7 referans görselden (her biri 1600×900, 1rem = 10 tasarım px) piksel ölçülerek çıkarıldı; kareler blok deseni üzerinden hizalandı. ========================================================== */ /* --- mobil / akış düzeni --- */ /* sayfa boyu arka plan görseli (Untitled-1_hizmetler.jpg) */ .page-svc .stage::before{display:block;left:0;width:100%;transform:none; background:url("assets/bg-svc-m.webp?v=1") 50% 0 / cover no-repeat #000;} /* Ic sayfa basliklarinin ust dolgusu: 148-150 tasarim px — maketten. Baslik murekkebi y155'e oturuyor. Bir ara sikisik gorundugu icin 30 px eklenmisti; asil sebep .nav::before'un yari saydam zemini ve onun y110'daki sert kenariydi. Zemin kaldirildi, dolgular maket degerine dondu. Alti sayfa birlikte degisir (.manifesto, .svc-head, .prc-head, .wrk-head, .why-head, .ct-head). Masaustunde padding:0 ile eziliyor. */ /* Yan dolgu burada 30 tasarim px (digerlerinde 36): baslik satiri "Markanızın ihtiyacı ne olursa olsun," maketten 364 px cikiyor ve 36'lik dolgunun biraktigi 358'e sigmiyordu. */ .page-svc .svc-head{padding:calc(149 * var(--m)) calc(30 * var(--m)) 0;text-align:center;} .sv-ttl{margin:0;font-weight:400;} .sv-ttl-1,.sv-ttl-2{display:block;line-height:calc(25 * var(--m));} .sv-ttl-1{font-family:var(--mach);font-weight:300;font-size:calc(20.4 * var(--f));} .sv-ttl-2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:calc(23.6 * var(--f));} /* Baslik altindaki giris paragrafi — mobil makette var, masaustunde yok. */ .sv-lead{margin:calc(16 * var(--m)) 0 0;font-size:calc(14.25 * var(--f)); line-height:1.754;font-weight:300;} @media (max-width:899.98px){ .sv-star-l,.sv-star-r{display:block;position:absolute;z-index:0;pointer-events:none; opacity:.75;background:url("assets/star-right.webp?v=1") 0 0 / 100% 100% no-repeat;} /* Sol yildiz makette kucuk ve ust kenardan tasiyor; olculer maketten geri hesaplandi (gorunen murekkep 48x70, gorselin ic bosluk orani .837 x .855). */ .sv-star-l{left:calc(-27 * var(--m));top:calc(94 * var(--m));width:calc(82 * var(--m));aspect-ratio:1;} /* Sag yildiz makette baslik hizasinda degil, giris paragrafinin altinda ve ilk hizmet blogunun yaninda duruyor; olculer tasarim pikseli. */ .sv-star-r{right:calc(6 * var(--m));top:calc(292 * var(--m)); width:calc(152 * var(--m));aspect-ratio:1;} } @media (min-width:900px){.sv-star-r{right:auto;}} /* "BUILDING BOLD BRANDS" — akışta 04. ve 05. hizmetin arasında */ .sv-growing{display:block;position:static;width:calc(291 * var(--m));height:auto; aspect-ratio:1600/990;margin:calc(70 * var(--m)) 0 calc(7 * var(--m)) calc(27.5 * var(--m)); background:url("assets/building-bold.webp?v=1") 0 0 / 100% 100% no-repeat;} .page-svc .svc-list{padding:calc(72 * var(--m)) calc(36 * var(--m)) calc(29 * var(--m));} /* Makette her hizmet blogu alt alta diziliyor: yildiz, altinda BUYUK numara, sonra baslik. Masaustundeki "* 01 ——— Baslik" tek satiri mobilde yok, ince cizgi de gorunmuyor. */ .svc{position:relative;padding:calc(57 * var(--m)) 0 0;} .svc-ast{display:block;width:calc(64 * var(--m));height:calc(64 * var(--m));margin:0;} .svc-num{display:block;font-family:var(--didone);font-weight:700; font-size:calc(53 * var(--f));line-height:1;letter-spacing:0; margin:calc(10 * var(--m)) 0 0;} .svc-rule{display:none;} .svc-t{margin:calc(12 * var(--m)) 0 0;font-family:var(--mach);font-weight:300; font-size:calc(18 * var(--f));line-height:1.3;} .svc-d{margin:calc(11 * var(--m)) 0 0;font-size:calc(14.25 * var(--f)); line-height:1.965;font-weight:300;} /* Makette metin masaustundeki
'leri KULLANIYOR: her cumle kendi satirinda basliyor, kalan kisim dar sutunda kendi akisiyla sariyor. */ .svc-d br{display:block;} .svc-l{list-style:none;margin:calc(27 * var(--m)) 0 0;padding:0;} .svc-l li{position:relative;padding-left:calc(24 * var(--m)); font-size:calc(14.25 * var(--f));line-height:1.965;font-weight:300;} .svc-l li::before{content:"";position:absolute;left:0;top:.42em; width:calc(17.5 * var(--m));height:calc(16 * var(--m)); background:url("assets/asterisk.svg?v=1") 0 0 / 100% 100% no-repeat;} @media (min-width:900px){ /* iletişim bölümü 489.6rem'de başlıyor; index'teki blok aynen kullanılıyor, wordmark yine sayfanın alt kenarında kırpılıyor. */ .page-svc .stage{height:579.6rem;} .page-svc .stage::before{left:50%;transform:translateX(-50%);width:100vw; background:url("assets/bg-svc.webp?v=2") 50% 0 / cover no-repeat #000;} .page-svc .svc-head{position:absolute;left:0;top:0;width:160rem;height:45rem;padding:0;text-align:left;} .page-svc .svc-list{position:absolute;left:0;top:0;width:160rem;height:489.6rem;padding:0;} .page-svc .contact{position:absolute;left:0;top:489.6rem;width:160rem;height:90rem;} /* başlık */ /* Giris paragrafi yalnizca mobil makette var. */ .sv-lead{display:none;} .sv-ttl{position:absolute;left:0;top:0;width:160rem;} .sv-ttl-1,.sv-ttl-2{position:absolute;left:0;width:160rem;text-align:center;white-space:nowrap;} .sv-ttl-1{top:23.47rem;font-family:var(--mach);font-weight:300;font-size:5.194rem;line-height:5.194rem;} .sv-ttl-2{top:29.09rem;font-family:var(--serif);font-style:italic;font-weight:400; font-size:6.103rem;line-height:6.103rem;} /* yıldızlar (star-right.webp; kutular ölçülen ink kutusundan geri hesaplandı) */ .sv-star-l,.sv-star-r{display:block;position:absolute;pointer-events:none;z-index:0; background:url("assets/star-right.webp?v=1") 0 0 / 100% 100% no-repeat; transform-style:preserve-3d;will-change:transform;} .sv-star-l{left:14.47rem; top:29.12rem;width:18.76rem;height:17.42rem; animation:floatL 19s ease-in-out infinite;} .sv-star-r{left:134.32rem;top:18.37rem;width:11.59rem;height:9.94rem; animation:floatR 16s ease-in-out infinite;} /* "BUILDING BOLD BRANDS" — görselin kendi oranı 1:0.6188, eski bloğun dikey merkezinde kalsın diye top buna göre kaydırıldı */ .sv-growing{display:block;position:absolute;left:38.7rem;top:245.7rem; width:79.9rem;height:49.4rem;aspect-ratio:auto;margin:0; pointer-events:none;z-index:1; background:url("assets/building-bold.webp?v=1") 0 0 / 100% 100% no-repeat;} /* --- hizmet bloğu: her blok kendi içinde aynı şablon --- */ .svc{position:absolute;left:0;width:160rem;height:32rem;padding:0;} .svc-1{top:53rem;} .svc-2{top:100.9rem;} .svc-3{top:148.8rem;} .svc-4{top:196.7rem;} .svc-5{top:314rem;} .svc-6{top:361.9rem;} .svc-7{top:409.8rem;} .svc-8{top:457.7rem;} .svc-ast{position:absolute;left:28.9rem;top:-.3rem;width:9.9rem;height:9.4rem;margin:0;} .svc-1 .svc-ast{animation-delay:0s;} .svc-2 .svc-ast{animation-delay:-3s;} .svc-3 .svc-ast{animation-delay:-6s;} .svc-4 .svc-ast{animation-delay:-9s;} .svc-5 .svc-ast{animation-delay:-12s;} .svc-6 .svc-ast{animation-delay:-15s;} .svc-7 .svc-ast{animation-delay:-18s;} .svc-8 .svc-ast{animation-delay:-21s;} .svc-num{display:block;position:absolute;left:40.4rem;top:.69rem; font-family:var(--didone);font-weight:400;font-size:7.8rem;line-height:7.8rem; letter-spacing:0;white-space:nowrap;} /* referansta çizginin çekirdek parlaklığı 170/255 ölçüldü */ .svc-rule{display:block;position:absolute;left:51rem;top:4.3rem;width:25.4rem;height:1px; margin:0;background:rgba(255,255,255,.67);} .svc-t{position:absolute;left:80.7rem;top:1.95rem;margin:0;width:70rem; font-family:var(--mach);font-weight:300;font-size:2.88rem;line-height:2.88rem; letter-spacing:0;white-space:nowrap;} .svc-d{position:absolute;left:80.7rem;top:8.67rem;margin:0;width:75rem; font-size:1.35rem;line-height:2.65rem;font-weight:300;} .svc-d br{display:block;} .svc-l{list-style:none;position:absolute;left:80.7rem;top:19.13rem;margin:0;padding:0;width:75rem;} .svc-l li{position:relative;padding-left:2.05rem;margin:0; font-size:1.35rem;line-height:2.65rem;font-weight:300;} .svc-l li::before{content:"";position:absolute;left:0;top:.66rem;width:1.35rem;height:1.35rem; background:url("assets/asterisk.svg?v=1") 0 0 / 100% 100% no-repeat;} } /* ========================================================== ANA SAYFA ARKA PLANI (index.html — Untitled-1_Ana Sayfa.jpg) ========================================================== */ /* NOT — mobil arka planlar: taban katmandaki .stage::before kurallari bg-*-m.webp kullaniyor (900 px genislik). Orijinaller 2560 px genisligi ve 12 000 px'e varan boyuyla 7-30 megapiksel; dosya kucuk olsa da telefonda cozulmesi uzun suruyor ve arka plan gec beliriyordu. Mobil surumler 0.85-3.75 MP: cozme 8 kat, aktarim 7 kat hafif. Masaustu bloklari (min-width:900px) tam boy dosyayi geri koyuyor. Uretici: _mk_bg_mobile.py */ .page-home .stage::before{display:block;left:0;width:100%;transform:none; background:url("assets/bg-home-m.webp?v=1") 50% 0 / cover no-repeat #000;} @media (min-width:900px){ .page-home .stage::before{left:50%;transform:translateX(-50%);width:100vw; background:url("assets/bg-home.webp?v=2") 50% 0 / cover no-repeat #000;} /* Hero'nun arka plani (referans: 1600x900 tasarim ciktisi -> hero-bg.webp). Katman tam olarak hero kadar: 160x90rem. Maske YOK — banner alt kenarinda sert biter, altinda duz siyah kalir ve hayalet yazi (.ghost) hemen orada baslar. Onceki surumde katman 180rem'di, 90->100rem arasinda sonumleniyor ve banner'in nerede bittigi belirsiz kaliyordu. */ .page-home .hero::before{content:"";position:absolute;left:0;top:0; width:160rem;height:90rem;z-index:0;pointer-events:none; background:url("assets/hero-bg.webp?v=1") 0 0 / 100% 100% no-repeat;} } /* ========================================================== SÜREÇ SAYFASI (surec.html) Ölçüler 4 referans görselden (1600×900, 1rem = 10 tasarım px) piksel ölçülerek çıkarıldı. ========================================================== */ /* --- mobil / akış düzeni --- */ /* sayfa boyu arka plan görseli (Untitled-1_Süreç.jpg) */ .page-prc .stage::before{display:block;left:0;width:100%;transform:none; background:url("assets/bg-surec-m.webp?v=1") 50% 0 / cover no-repeat #000;} /* Ölçüler mobil maketten (Mobil Süreç.png, 430 px eninde) piksel piksel çıkarıldı; her sayı bir tasarım pikseli — calc(N * var(--m)). Maketteki bölüm başlıkları (yıldız + "Neden / Bir Süreç?") sayfanın sol kenarına yaslı, gövde metinleri de sola hizalı akıyor. Yıldız, başlık ve gövde punto/satır ölçüleri ortak mobil tabandan geliyor (.ast, .ttl, .ttl-i, .stats); bu sayfaya özel eski değerler kaldırıldı ki ritim diğer sayfalarla aynı kalsın. */ .page-prc .prc-head{padding:calc(150 * var(--m)) calc(36 * var(--m)) 0;text-align:center;} .pr-ttl{margin:0;font-weight:400;} .pr-ttl-1,.pr-ttl-2{display:block;line-height:calc(28 * var(--m));} .pr-ttl-1{font-family:var(--mach);font-weight:300;font-size:calc(24.5 * var(--f));} .pr-ttl-2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:calc(28.9 * var(--f));} .pr-lead{margin:calc(13 * var(--m)) 0 0;font-size:calc(14.25 * var(--f)); line-height:1.754;font-weight:300;} /* Hap makette 232x43 tasarim px: yanlarda 40, altta/ustte 12.7 dolgu; yazi 14, ok isareti 16.4x17.5 ve yazidan 12 px uzakta. */ .pr-btn{display:inline-flex;align-items:center;gap:calc(12 * var(--m)); margin:calc(18 * var(--m)) 0 0; background:#fff;color:#000;border-radius:99px; padding:calc(12.7 * var(--m)) calc(40 * var(--m)); font-family:var(--mach);font-size:calc(14 * var(--f));line-height:1;} .pr-btn svg{width:calc(16.4 * var(--m));height:calc(17.5 * var(--m));flex:none;} /* Yildizlar makette olculdu: gorunen murekkep kutunun %83.7 x %85.5'i, ustte/solda %7.4 / %7.6 saydam pay var; kutular bu orandan geri hesaplandi. Sag yildizin murekkebi ekranin sag kenarindan tasiyor. */ @media (max-width:899.98px){ .pr-star-l,.pr-star-r{display:block;position:absolute;z-index:0;pointer-events:none; opacity:.75;background:url("assets/star-right.webp?v=1") 0 0 / 100% 100% no-repeat;} .pr-star-l{left:calc(-16 * var(--m));top:calc(252 * var(--m));width:calc(102 * var(--m));aspect-ratio:1;} .pr-star-r{right:calc(-32 * var(--m));top:calc(86 * var(--m));width:calc(96 * var(--m));aspect-ratio:1;} } /* Bu sayfaya ozel ince ayarlar — ortak mobil tabanin ustune. Ozgullukleri (0,2,0) masaustu kurallarindan yuksek oldugu icin media blogunun icinde duruyorlar; disarida birakilirsa 900px ustune de sizarlar. */ @media (max-width:899.98px){ /* Makette yildizin murekkebi yazilarla ayni cizgide (x36) basliyor; asterisk.svg kutusunun icinde ~4 px saydam pay var. Yildizla baslik arasi 7, baslikla govde arasi 21 tasarim px. */ .page-prc .ast{margin-left:calc(-4 * var(--m));margin-bottom:calc(7 * var(--m));} .page-prc .ttl-i{margin-bottom:calc(21 * var(--m));} /* Rakamla altindaki aciklama arasi makette 37 px; ortak taban 33 veriyor. */ .page-prc .st-num{margin-bottom:calc(-17 * var(--m));} .page-prc .prc-stats .stats{margin-bottom:calc(64 * var(--m));} } .page-prc .prc-why{padding:calc(67 * var(--m)) calc(36 * var(--m)) 0;text-align:left;} .pw-body{margin:0;font-size:calc(14.25 * var(--f));line-height:1.965;font-weight:300;} .pw-body b{font-weight:600;} /* Uc rakam blogu ortak .stats ritmini kullaniyor (bosluk 22, rakam alt payi -20); makette de ayni araliklar cikiyor. */ .page-prc .prc-stats{padding:calc(41 * var(--m)) calc(36 * var(--m)) 0;} .page-prc .prc-how{padding:0 calc(36 * var(--m)) calc(40 * var(--m));text-align:left;} /* süreç çiçeği — 11.png'deki kompozisyon, kontur olarak SVG'ye çizildi. Makette murekkep kutusu 207x296 tasarim px; gorselin kendi kutusu 208. */ .pr-flower{position:relative;width:calc(208 * var(--m));max-width:100%; aspect-ratio:930/1332;margin:calc(31 * var(--m)) auto 0;} /* Çiçek altı parçaya bölündü: çiçek başı + beş adım kapsülü. Kesim, görselin kendi konturlarından çıkarıldı (her mürekkep pikseli en yakın kapalı bölgeye atandı), yani parçalar üst üste bindiği yerlerde bile eksiksiz; yan yana konduklarında özgün görselin piksel piksel aynısı. Konum ve ölçüler yüzde: çiçek hangi boyda olursa olsun oturuyor. */ .prf{position:absolute;display:block;background-position:0 0;background-size:100% 100%; background-repeat:no-repeat;animation:prcSway 9s ease-in-out infinite;} /* HAREKET — sapin dibinden salinim. Parcalar rastgele yonlere suzulunce sap ile kapsullerin bulustugu yerlerde cizgiler birbirinden kopuyordu. Bu yuzden hepsi AYNI aciyla, AYNI noktanin (govde tabani: gorselin alt-orta noktasi, 465/1332) etrafinda doner: kompozisyon kati bir cisim gibi salinir, cizgi iliskileri bozulmaz. transform-origin degerleri her parcanin kendi kutusuna gore o ortak noktayi gosteriyor -- yuzde oldugu icin cicek hangi boyda olursa olsun ayni yeri isaret eder. "Bolumler halinde" hissi gecikmeden geliyor: ust parca once, alttakiler sirayla 0.22 sn arayla. Komsu parcalar arasindaki aci farki 0.11 dereceyi gecmiyor; birlesme noktalarindaki kayma yarim pikselin altinda kaliyor. Sapa uzak parca (cicek basi) dogal olarak daha cok, dipteki kapsul neredeyse hic hareket etmiyor -- sallanan bir sapin kendi fizigi. */ .prf-1{left:0; top:0; width:90.860%;height:46.021%; background-image:url("assets/surec-p1.png?v=1");transform-origin:55.03% 217.29%;animation-delay:0s;} .prf-2{left:22.473%;top:42.267%;width:63.118%;height:13.438%; background-image:url("assets/surec-p2.png?v=1");transform-origin:43.61% 429.61%;animation-delay:-.22s;} .prf-3{left:7.634%; top:55.330%;width:63.441%;height:11.186%; background-image:url("assets/surec-p3.png?v=1");transform-origin:66.78% 399.33%;animation-delay:-.44s;} .prf-4{left:37.204%;top:62.913%;width:62.796%;height:15.165%; background-image:url("assets/surec-p4.png?v=1");transform-origin:20.38% 244.55%;animation-delay:-.66s;} .prf-5{left:8.387%; top:72.222%;width:62.366%;height:16.967%; background-image:url("assets/surec-p5.png?v=1");transform-origin:66.72% 163.72%;animation-delay:-.88s;} .prf-6{left:29.462%;top:88.889%;width:63.333%;height:11.111%; background-image:url("assets/surec-p6.png?v=1");transform-origin:32.43% 100.00%;animation-delay:-1.1s;} @keyframes prcSway{ 0%,100%{transform:rotate(-.7deg);} 50% {transform:rotate(.7deg);} } html[lang="en"] .prf-1{background-image:url("assets/surec-en-p1.png?v=1");} html[lang="en"] .prf-2{background-image:url("assets/surec-en-p2.png?v=1");} html[lang="en"] .prf-3{background-image:url("assets/surec-en-p3.png?v=1");} html[lang="en"] .prf-4{background-image:url("assets/surec-en-p4.png?v=1");} html[lang="en"] .prf-5{background-image:url("assets/surec-en-p5.png?v=1");} html[lang="en"] .prf-6{background-image:url("assets/surec-en-p6.png?v=1");} .ps-wrap{margin:calc(67 * var(--m)) 0 0;text-align:left;} .ps + .ps{margin-top:calc(32.5 * var(--m));} /* Punto 14.2: makette olculen 14.25 "04 — Yayın & Optimizasyon Test edilmiş, incelenmiş" satirini 358.08 px yapiyor, sutun ise tam 358 — satir kil payi tasip dorde bolunuyordu. Maket o satiri uc satirda tutuyor. */ .ps-d{margin:0;font-size:calc(14.2 * var(--f));line-height:1.965;font-weight:300;} /* Makette ilk adimda iki cumle arasinda sert satir sonu var; masaustunde metin kesintisiz akiyor. */ .ps-d br{display:block;} /* Makette adim etiketi ("01 — Kesif") govdeyle ayni kalinlikta yaziliyor; kalinlik yalnizca masaustunde var. */ .ps-d b{font-weight:300;} .ps-l{list-style:none;margin:calc(24 * var(--m)) 0 0;padding:0;} .ps-l li{position:relative;padding-left:calc(24 * var(--m)); font-size:calc(14.2 * var(--f));line-height:1.965;font-weight:300;} .ps-l li::before{content:"";position:absolute;left:0;top:.42em; width:calc(17.5 * var(--m));height:calc(16 * var(--m)); background:url("assets/asterisk.svg?v=1") 0 0 / 100% 100% no-repeat;} @media (min-width:900px){ /* iletişim bölümü 238rem'de başlıyor; index'teki blok aynen kullanılıyor, wordmark yine sayfanın alt kenarında kırpılıyor. */ .page-prc .stage{height:328rem;} .page-prc .stage::before{left:50%;transform:translateX(-50%);width:100vw; background:url("assets/bg-surec.webp?v=2") 50% 0 / cover no-repeat #000;} .page-prc .prc-head {position:absolute;left:0;top:0; width:160rem;height:62rem; padding:0;text-align:left;overflow:visible;} .page-prc .prc-why {position:absolute;left:0;top:62rem; width:160rem;height:42rem; padding:0;text-align:left;} .page-prc .prc-stats{position:absolute;left:0;top:104rem; width:160rem;height:22rem; padding:0;} .page-prc .prc-how {position:absolute;left:0;top:126rem; width:160rem;height:112rem;padding:0;text-align:left;} .page-prc .contact {position:absolute;left:0;top:238rem; width:160rem;height:90rem;} /* ---------- 1 · başlık ---------- */ .pr-ttl{position:absolute;left:0;top:0;width:160rem;} .pr-ttl-1,.pr-ttl-2{position:absolute;left:0;width:160rem;text-align:center;white-space:nowrap;} .pr-ttl-1{top:22.6rem;font-family:var(--mach);font-weight:300; font-size:6.65rem;line-height:6.65rem;letter-spacing:0;} .pr-ttl-2{top:29.8rem;font-family:var(--serif);font-style:italic;font-weight:400; font-size:7.85rem;line-height:7.85rem;letter-spacing:0;} .pr-lead{position:absolute;left:0;top:40.8rem;width:160rem;margin:0;text-align:center; font-size:1.35rem;line-height:2rem;font-weight:300;white-space:nowrap;} .pr-btn{position:absolute;left:69rem;top:47rem;width:22rem;height:3.6rem;margin:0;padding:0; display:flex;align-items:center;justify-content:center;gap:.9rem; background:#fff;color:#000;border-radius:99rem; font-family:var(--mach);font-size:1.36rem;line-height:1;font-weight:400; transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease;} .pr-btn svg{width:1.15rem;height:1.35rem;flex:none;} .pr-btn:hover{transform:translateY(-.3rem);box-shadow:0 1.4rem 3.4rem rgba(255,255,255,.16);} /* yıldızlar (star-right.webp; kutular ölçülen ink kutusundan geri hesaplandı) */ .pr-star-l,.pr-star-r{display:block;position:absolute;pointer-events:none;z-index:0; background:url("assets/star-right.webp?v=1") 0 0 / 100% 100% no-repeat; transform-style:preserve-3d;will-change:transform;} .pr-star-l{left:25rem; top:18.2rem;width:15.8rem;height:16.6rem; animation:floatL 19s ease-in-out infinite;} .pr-star-r{left:122.2rem;top:29.7rem;width:13.4rem;height:11.3rem; animation:floatR 16s ease-in-out infinite;} /* ---------- 2 · neden bir süreç ---------- */ .ast-prcw{left:32.5rem;top:7.3rem;} .ttl-prcw-1{left:43.5rem;top:7.6rem;} .ttl-prcw-2{left:43.5rem;top:12.5rem;} .rule-prcw{left:67.4rem;top:11.1rem;width:11.6rem;background:rgba(255,255,255,.67);} .pw-body{position:absolute;left:83.3rem;top:7.5rem;width:47.2rem;margin:0; font-size:1.35rem;line-height:2.65rem;font-weight:300;} .pw-body b{font-weight:600;} /* ---------- 3 · istatistik ---------- */ .page-prc .prc-stats .stats{display:block;margin:0;} .page-prc .st-num-1{left:22.05rem;top:3.8rem;} .page-prc .st-num-2{left:59rem; top:3.8rem;} .page-prc .st-num-3{left:98.75rem;top:3.8rem;} .page-prc .st-txt-1{left:22.05rem;top:9.4rem;} .page-prc .st-txt-2{left:59rem; top:9.4rem;} .page-prc .st-txt-3{left:98.75rem;top:9.4rem;} .page-prc .prc-stats .st-txt br{display:inline;} .page-prc .st-div{top:2.8rem;height:9.4rem;} .page-prc .st-div-1{left:60rem;} .page-prc .st-div-2{left:95.3rem;} /* ---------- 4 · nasıl çalışırız ---------- */ .ast-prch{left:32.5rem;top:5rem;} .ttl-prch-1{left:43.5rem;top:5.3rem;} .ttl-prch-2{left:43.5rem;top:10.2rem;} .rule-prch{left:67.4rem;top:8.8rem;width:11.6rem;background:rgba(255,255,255,.67);} /* süreç çiçeği — 11.png ölçülerek kontur olarak çizildi */ .pr-flower{display:block;position:absolute;left:34.5rem;top:34.4rem; width:31rem;height:44.4rem;max-width:none;aspect-ratio:auto;margin:0; pointer-events:none;z-index:1;} /* ---------- adımlar ---------- */ .ps-wrap{position:absolute;left:83.3rem;top:7.2rem;width:47.2rem;margin:0;text-align:left;} .ps + .ps{margin-top:2.65rem;} .ps-d{margin:0;font-size:1.35rem;line-height:2.65rem;font-weight:300;} .ps-d b{font-weight:600;} .ps-d br{display:none;} .ps-l{list-style:none;margin:2.75rem 0 0;padding:0;} .ps-l li{position:relative;padding-left:2.05rem;margin:0; font-size:1.35rem;line-height:2.65rem;font-weight:300;} .ps-l li::before{content:"";position:absolute;left:0;top:.66rem;width:1.35rem;height:1.35rem; background:url("assets/asterisk.svg?v=1") 0 0 / 100% 100% no-repeat;} } /* ========================================================== ÇALIŞMALARIMIZ SAYFASI (calismalarimiz.html) Ölçüler 2 referans görselden (1600×900, 1rem = 10 tasarım px) piksel ölçülerek çıkarıldı. ========================================================== */ /* --- mobil / akış düzeni --- */ /* sayfa boyu arka plan görseli (Untitled-1_Çalışmalarımız.jpg) */ .page-wrk .stage::before{display:block;left:0;width:100%;transform:none; background:url("assets/bg-wrk-m.webp?v=1") 50% 0 / cover no-repeat #000;} .page-wrk .wrk-head{padding:calc(148 * var(--m)) calc(36 * var(--m)) calc(50 * var(--m));text-align:center;} .wk-ttl{margin:0;font-weight:400;} .wk-ttl-1,.wk-ttl-2{display:block;line-height:calc(24 * var(--m));} .wk-ttl-1{font-family:var(--mach);font-weight:300;font-size:calc(19.4 * var(--f));} .wk-ttl-2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:calc(22.9 * var(--f));} .wk-lead{margin:calc(13 * var(--m)) 0 0;font-size:calc(14.15 * var(--f)); line-height:1.767;font-weight:300;} /* Makette masaustundeki kirilim korunuyor: "…yoksa mevcut" satiri orada bitiyor, "markanizi…" yeni satirdan basliyor. */ .wk-lead br{display:block;} /* Ingilizce metinde ayni
cumlenin ortasina denk gelip "looking to take" gibi yarim satir birakiyor; orada dogal akis daha iyi. */ html[lang="en"] .wk-lead br{display:none;} .wk-btn{display:inline-block;margin:calc(20 * var(--m)) 0 0;background:#fff;color:#000;border-radius:99px; padding:calc(8.4 * var(--m)) calc(25.6 * var(--m));font-family:var(--mach); font-size:calc(14.2 * var(--f));line-height:1;} @media (max-width:899.98px){ .wk-star-l,.wk-star-r{display:block;position:absolute;z-index:0;pointer-events:none; opacity:.75;background:url("assets/star-right.webp?v=1") 0 0 / 100% 100% no-repeat;} /* Yildizlarin konumu maketten geri hesaplandi: sol yildiz kucuk ve basligin solunda, sag yildiz butonun altinda/sayfanin sag kenarinda. */ .wk-star-l{left:calc(-31 * var(--m));top:calc(100 * var(--m));width:calc(91 * var(--m));aspect-ratio:1;} .wk-star-r{right:calc(-1 * var(--m));top:calc(298 * var(--m));width:calc(126 * var(--m));aspect-ratio:1;} } @media (min-width:900px){.wk-star-r{right:auto;}} /* Muhur logotypesiyah.pdf'ten gelen gercek vektor. PDF siyah cizilmis; burada beyaza cevriliyor. viewBox "110 110 860 860": merkezden en uzak murekkep 421.8 birimde, kutu yari-boyutu 430 -> halka donerken hicbir acida kenara degmiyor. Kutu cizimin dikdortgen sinirina daraltilirsa (420.5) donen harfler kose konumlarina geldiginde tirasleniyor. */ .wk-seal{display:block;width:calc(95 * var(--m));height:calc(95 * var(--m)); margin:calc(82 * var(--m)) auto 0;fill:#fff;} .wk-seal-ring,.wk-seal-star{fill:#fff;} /* Yalnizca halka (yazi) doner; ortadaki yildiz sabit kalir. Donme ekseni ACIKCA yildizin merkezi: PDF'in kendi koordinatlarinda (540,540). "transform-origin:50% 50%" KULLANILMAMALI — Chrome bunu viewBox'in ortasina cozmuyor, eksen ~41 birim kayiyor ve halka kendi ekseninde donmek yerine yorungeye oturup kenardan kirpiliyor. Olculdu: 50% ile merkez kaymasi 19px, acik deger ile 0px. */ .wk-seal-ring{transform-box:view-box;transform-origin:540px 540px; will-change:transform;animation:wkSealSpin 46s linear infinite;} @keyframes wkSealSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}} @media (prefers-reduced-motion:reduce){.wk-seal-ring{animation:none;}} @media (min-width:900px){ .page-wrk .stage{height:170rem;} .page-wrk .stage::before{left:50%;transform:translateX(-50%);width:100vw; background:url("assets/bg-wrk.webp?v=2") 50% 0 / cover no-repeat #000;} .page-wrk .wrk-head{position:absolute;left:0;top:0;width:160rem;height:80rem; padding:0;text-align:left;overflow:visible;} .page-wrk .contact{position:absolute;left:0;top:80rem;width:160rem;height:90rem;} /* başlık */ .wk-ttl{position:absolute;left:0;top:0;width:160rem;} .wk-ttl-1,.wk-ttl-2{position:absolute;left:0;width:160rem;text-align:center;white-space:nowrap;} .wk-ttl-1{top:22.59rem;font-family:var(--mach);font-weight:300; font-size:5.13rem;line-height:5.13rem;letter-spacing:0;} .wk-ttl-2{top:28.1rem;font-family:var(--serif);font-style:italic;font-weight:400; font-size:6rem;line-height:6rem;letter-spacing:0;} .wk-lead{position:absolute;left:32rem;top:37.7rem;width:96rem;margin:0;text-align:center; font-size:1.35rem;line-height:2.5rem;font-weight:300;} .wk-lead br{display:block;} .wk-btn{position:absolute;left:70.1rem;top:46.5rem;width:19.8rem;height:3.5rem;margin:0;padding:0; display:flex;align-items:center;justify-content:center; background:#fff;color:#000;border-radius:99rem; font-family:var(--mach);font-size:1.36rem;line-height:1;font-weight:400; transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease;} .wk-btn:hover{transform:translateY(-.3rem);box-shadow:0 1.4rem 3.4rem rgba(255,255,255,.16);} /* Ingilizce metin ("Let's Talk About Your Project") tasarimdan olculen 19.8rem'lik kutuya sigmiyor: 19.44rem cizilip yanlarda 0.18rem kaliyor, harfler pilin yuvarlak uclarina degiyor. Genislik metne birakildi; TR'deki yan bosluk (3rem) aynen korunuyor, boylece iki dilde ayni nefes payi gorunuyor. Ortalama left/right:0 + otomatik kenar boslugu ile yapiliyor: translateX(-50%) kullanilsaydi :hover'daki translateY onu ezip buton yana ziplardi. */ html[lang="en"] .wk-btn{left:0;right:0;min-width:19.8rem;width:fit-content; margin-inline:auto;padding-inline:3rem;} /* yıldızlar (star-right.webp; kutular ölçülen ink kutusundan geri hesaplandı) */ .wk-star-l,.wk-star-r{display:block;position:absolute;pointer-events:none;z-index:0; background:url("assets/star-right.webp?v=1") 0 0 / 100% 100% no-repeat; transform-style:preserve-3d;will-change:transform;} .wk-star-l{left:15.48rem; top:28rem; width:13.38rem;height:12.16rem; animation:floatL 19s ease-in-out infinite;} .wk-star-r{left:133.22rem;top:19.25rem;width:11.59rem;height:11.58rem; animation:floatR 16s ease-in-out infinite;} /* mühür */ /* Kutu 11.7 -> 11.93rem buyudu (viewBox'taki pay telafisi: gorunen cap ayni kalsin diye). Merkez yerinde kalsin diye left/top yarim fark kadar geri. */ .wk-seal{display:block;position:absolute;left:73.99rem;top:63.49rem; width:11.93rem;height:11.93rem;margin:0;pointer-events:none;} } /* ========================================================== NEDEN GROOF SAYFASI (neden-groof.html) Ölçüler 4 referans görselden (1600×900, 1rem = 10 tasarım px) piksel taranarak çıkarıldı; font boyutları tarayıcıda canvas measureText ile mürekkep kutusuna oturtuldu. ========================================================== */ /* --- mobil / akış düzeni --- */ /* sayfa boyu arka plan görseli (Untitled-1_Neden Groof-.jpg) */ .page-why .stage::before{display:block;left:0;width:100%;transform:none; background:url("assets/bg-why-m.webp?v=1") 50% 0 / cover no-repeat #000;} /* Ölçüler mobil maketten (Mobil Neden Groof.png, 430 px eninde) piksel piksel çıkarıldı; her sayı bir tasarım pikseli — calc(N * var(--m)). Punto ve satır ölçüleri ortak mobil tabandan geliyor: başlıklar .ttl / .ttl-i ile (26/28), ara başlık .lead ile (17.8/1.685), gövde .about-para ile (14.25/1.965) aynı. */ .page-why .why-head{padding:calc(150 * var(--m)) calc(36 * var(--m)) 0;text-align:center;} .wy-ttl{margin:0;font-weight:400;} .wy-ttl-1,.wy-ttl-2{display:block;line-height:calc(28 * var(--m));} .wy-ttl-1{font-family:var(--mach);font-weight:300;font-size:calc(24.5 * var(--f));} .wy-ttl-2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:calc(28.9 * var(--f));} .wy-lead{margin:calc(12 * var(--m)) 0 0;font-size:calc(14.25 * var(--f)); line-height:1.754;font-weight:300;} @media (max-width:899.98px){ .wy-star-l,.wy-star-r{display:block;position:absolute;z-index:0;pointer-events:none; opacity:.75;background:url("assets/star-right.webp?v=1") 0 0 / 100% 100% no-repeat;} /* Yildizlar maketten olculdu: gorunen murekkep kutunun %83.7 x %85.5'i, ustte/solda %7.4 / %7.6 saydam pay var; kutular bu orandan geri hesaplandi. Sol yildiz ekranin sol kenarindan tasiyor, sag yildiz tamamen icerde. */ .wy-star-l{left:calc(-11 * var(--m));top:calc(203 * var(--m));width:calc(97 * var(--m));aspect-ratio:1;} .wy-star-r{right:calc(11.5 * var(--m));top:calc(84 * var(--m));width:calc(85 * var(--m));aspect-ratio:1;} } /* Dört madde alt alta: yildiz, iki satirlik baslik, ara baslik, gövde. Makette hepsi sola yasli ve yildizin mürekkebi yazilarla ayni cizgide (x36) basliyor — asterisk.svg kutusunda ~4 px saydam pay var. */ .page-why .why-list{padding:calc(6 * var(--m)) calc(36 * var(--m)) calc(37 * var(--m));} .wy{position:relative;padding:calc(59 * var(--m)) 0 0;} .wy-ast{width:calc(64 * var(--m));height:calc(64 * var(--m)); margin-left:calc(-4 * var(--m));margin-bottom:calc(7 * var(--m));} .wy-t1,.wy-t2{display:block;margin:0;font-family:var(--serif); font-variation-settings:"opsz" 96;letter-spacing:0;line-height:calc(28 * var(--m));} /* Italik satir makette duz satirdan bir tik buyuk — masaustundeki 4.08/4.16rem oraninin aynisi. */ .wy-t1{font-weight:700;font-style:normal;font-size:calc(24.85 * var(--f));} .wy-t2{font-weight:400;font-style:italic;font-size:calc(25.75 * var(--f));} .wy-rule{display:none;} .wy-h{margin:calc(21 * var(--m)) 0 0;font-family:var(--mach);font-weight:300; font-size:calc(17.8 * var(--f));line-height:1.685;} /* Maket masaüstündeki kırılımı koruyor: "Markanız parçalara ayrılmaz," / "biz de öyle çalışmayız." iki ayrı satır. */ .wy-h br{display:block;} .wy-d{margin:calc(14 * var(--m)) 0 0;font-size:calc(14.25 * var(--f)); line-height:1.965;font-weight:300;} @media (min-width:900px){ .page-why .stage{height:270.17rem;} .page-why .stage::before{left:50%;transform:translateX(-50%);width:100vw; background:url("assets/bg-why.webp?v=2") 50% 0 / cover no-repeat #000;} .page-why .why-head{position:absolute;left:0;top:0;width:160rem;height:55rem; padding:0;text-align:left;overflow:visible;} .page-why .why-list{position:absolute;left:0;top:0;width:160rem;height:180.17rem;padding:0;} .page-why .contact{position:absolute;left:0;top:180.17rem;width:160rem;height:90rem;} /* ---------- başlık ---------- */ .wy-ttl{position:absolute;left:0;top:0;width:160rem;} .wy-ttl-1,.wy-ttl-2{position:absolute;left:0;width:160rem;text-align:center;white-space:nowrap;} .wy-ttl-1{top:22.43rem;font-family:var(--mach);font-weight:300; font-size:6.55rem;line-height:6.55rem;letter-spacing:0;} .wy-ttl-2{top:29.39rem;font-family:var(--serif);font-style:italic;font-weight:400; font-size:7.72rem;line-height:7.72rem;letter-spacing:0;} .wy-lead{position:absolute;left:0;top:40.65rem;width:160rem;margin:0;text-align:center; font-size:1.35rem;line-height:2rem;font-weight:300;white-space:nowrap;} /* yıldızlar (star-right.webp; kutular ölçülen ink kutusundan geri hesaplandı) */ .wy-star-l,.wy-star-r{display:block;position:absolute;pointer-events:none;z-index:0; background:url("assets/star-right.webp?v=1") 0 0 / 100% 100% no-repeat; transform-style:preserve-3d;will-change:transform;} .wy-star-l{left:23.49rem; top:25.98rem;width:18.52rem;height:16.6rem; animation:floatL 19s ease-in-out infinite;} .wy-star-r{left:120.17rem;top:23.3rem; width:14.82rem;height:13.56rem; animation:floatR 16s ease-in-out infinite;} /* ---------- neden blokları ---------- */ /* blok üstleri referanstan: 614 / 993 / 1307 / 1648 tasarım px */ .wy{position:absolute;left:0;width:160rem;height:auto;padding:0;} .wy-1{top:61.4rem;} .wy-2{top:99.3rem;} .wy-3{top:130.7rem;} .wy-4{top:164.8rem;} .wy-ast{position:absolute;left:28.88rem;top:-.26rem;width:9.82rem;height:9.38rem;margin:0;} .wy-1 .wy-ast{animation-delay:0s;} .wy-2 .wy-ast{animation-delay:-6s;} .wy-3 .wy-ast{animation-delay:-12s;} .wy-4 .wy-ast{animation-delay:-18s;} .wy-t1,.wy-t2{position:absolute;margin:0;white-space:nowrap;line-height:1; font-family:var(--serif);font-variation-settings:"opsz" 96;letter-spacing:0;} .wy-t1{left:40.5rem;top:.01rem;font-weight:700;font-style:normal;font-size:4.08rem;} .wy-t2{left:40.4rem;top:4.62rem;font-weight:400;font-style:italic;font-size:4.16rem;} /* Cizgi basligin BITTIGI yerden basliyor, sag ucu sabit (763 tasarim px). Sabit left + sabit width kullanilinca uzun basliklarin ("Veri Odakli", "Butik Hizmet", "Uzun Vadeli") uzerine biniyordu. Sag uc paylasilir, baslangic satir basina referanstan olculdu. */ .wy-rule{display:block;position:absolute;right:83.7rem;top:3.6rem;height:1px; background:rgba(255,255,255,.67);} .wy-1 .wy-rule{left:62.1rem;} .wy-2 .wy-rule{left:66.1rem;} .wy-3 .wy-rule{left:69.2rem;} .wy-4 .wy-rule{left:67.9rem;} .wy-h{position:absolute;left:80.9rem;top:.7rem;margin:0;width:74rem; font-family:var(--mach);font-weight:300;letter-spacing:0; font-size:2.904rem;line-height:3.8rem;} .wy-h br{display:block;} .wy-d{position:absolute;left:80.7rem;top:8rem;margin:0;width:61.5rem; font-size:1.35rem;line-height:2.7rem;font-weight:300;} /* 1. blogun sag basligi iki satir; govde bir satir asagi kayar */ .wy-1 .wy-d{top:11.8rem;} } /* ========================================================== TANIŞALIM SAYFASI (tanisalim.html) Ölçüler 4 referans görselden (1600×900, 1rem = 10 tasarım px) piksel taranarak çıkarıldı. ========================================================== */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0;} /* --- mobil / akış düzeni --- */ /* sayfa boyu arka plan görseli (Untitled-1_Tanışalım.jpg) */ .page-ct .stage::before{display:block;left:0;width:100%;transform:none; background:url("assets/bg-tn-m.webp?v=1") 50% 0 / cover no-repeat #000;} /* Ölçüler mobil maketten (Mobil Tanışalım.png, 430 px eninde) piksel piksel çıkarıldı; her sayı bir tasarım pikseli — calc(N * var(--m)). Başlık/giriş ölçüleri diğer sayfalarla aynı sistemden geliyor. */ .page-ct .ct-head{padding:calc(150 * var(--m)) calc(36 * var(--m)) 0;text-align:center;} .tn-ttl{margin:0;font-weight:400;} .tn-ttl-1,.tn-ttl-2{display:block;line-height:calc(28 * var(--m));} .tn-ttl-1{font-family:var(--mach);font-weight:300;font-size:calc(24.5 * var(--f));} .tn-ttl-2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:calc(28.9 * var(--f));} .tn-lead{margin:calc(12 * var(--m)) 0 0;font-size:calc(14.25 * var(--f)); line-height:1.754;font-weight:300;} @media (max-width:899.98px){ .tn-star-l,.tn-star-r{display:block;position:absolute;z-index:0;pointer-events:none; opacity:.75;background:url("assets/star-right.webp?v=1") 0 0 / 100% 100% no-repeat;} /* Yildizlar maketten olculdu: gorunen murekkep kutunun %83.7 x %85.5'i, ustte/solda %7.4 / %7.6 saydam pay var; kutular bu orandan geri hesaplandi. Sol yildiz tamamen icerde, sag yildiz sag kenardan biraz tasiyor. */ .tn-star-l{left:calc(11.5 * var(--m));top:calc(94 * var(--m));width:calc(85 * var(--m));aspect-ratio:1;} .tn-star-r{right:calc(-4 * var(--m));top:calc(242 * var(--m));width:calc(107 * var(--m));aspect-ratio:1;} } /* FORM — makette alanlar ince cizgilerle ayriliyor, cizgiden cizgiye 44 tasarim px: 21.4 satir + 10.2 alt dolgu + 1 cizgi + 11.5 alt pay. */ .page-ct .ct-form{padding:calc(79 * var(--m)) calc(36 * var(--m)) calc(28 * var(--m));} .tn-form{margin:0;} .tn-f{display:block;width:100%;margin:0 0 calc(11.5 * var(--m)); padding:0 0 calc(10.2 * var(--m));background:none;color:#fff; border:0;border-bottom:1px solid rgba(255,255,255,.35);border-radius:0; font-family:var(--sans);font-size:calc(14.25 * var(--f));font-weight:300;line-height:1.5;} .tn-f::placeholder{color:rgba(255,255,255,.82);opacity:1;} .tn-f:focus{outline:0;border-bottom-color:#fff;} /* --- alanlara dokununca sayfa yakinlasmasin --- iOS, puntosu 16 CSS px'in ALTINDA olan bir alana odaklanildiginda sayfayi kendiliginden yakinlastirir; kullanici sonra parmakla geri uzaklastirmak zorunda kalir. Maketten gelen 14.25 tasarim px, 412 px'lik bir ekranda 13.65 CSS px ediyordu -- yani formdaki HER alan bunu tetikliyordu. Sitenin tek donusum yolu bu form oldugu icin bedeli dogrudan doldurma oraninda. max() ile 16 px bir TABAN: maket degeri buyurse o kazanir, kucuk kaldigi surece 16'ya yuvarlanir. Yalnizca mobil; masaustu kendi puntosunu (1.525rem = 24.4 px) ayrica belirliyor, esigin uzerinde. */ @media (max-width:899.98px){ .tn-f{font-size:max(16px, calc(14.25 * var(--f)));} } /* Mesaj alani makette digerlerinden alcak bir alt payla bitiyor. */ .tn-area{height:calc(134.5 * var(--m));margin-bottom:calc(6 * var(--m));resize:vertical;} .tn-note{margin:0;text-align:center;font-size:calc(12.5 * var(--f)); line-height:1.36;font-weight:300;} /* Hap makette 293x42: yanlarda 33, altta/ustte 14 dolgu, yazi 14. */ .tn-btn{display:block;margin:calc(15 * var(--m)) auto 0;background:#fff;color:#000; border:0;border-radius:99px;padding:calc(14 * var(--m)) calc(33 * var(--m)); font-family:var(--mach);font-size:calc(14 * var(--f));line-height:1;cursor:pointer;} /* Gönderilirken buton pasif; imleç ve saydamlık bunu belli etsin. */ .tn-btn[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none;} /* Spam tuzağı. left:-9999px yerine 1px'lik kırpma: sayfa mutlak konumlandırıldığı için ekran dışına atmak yatay taşma üretiyordu. */ .tn-hp{position:absolute;left:0;top:0;width:1px;height:1px; overflow:hidden;opacity:0;pointer-events:none;} /* Doğrulama / gönderim durumu. Boşken hiç yer kaplamamalı. */ .tn-status{margin:16px 0 0;text-align:center;font-size:12px;line-height:1.5;font-weight:300;} .tn-status:empty{display:none;} .tn-status.is-bad{color:#ffb4b4;} .tn-f.is-bad{border-bottom-color:#ffb4b4;} /* Makette iletisim bilgileri yan yana degil, alt alta uc satir; noktalar yok. */ .tn-info{margin:calc(59 * var(--m)) 0 0;text-align:center;font-family:var(--mach); font-size:calc(14 * var(--f));line-height:1.43;font-weight:300;} /* Blok yapmak masaustune sizmasin: orada satir yan yana ve noktali. */ @media (max-width:899.98px){ .tn-info > a,.tn-info > span:not(.tn-dot){display:block;} } .tn-dot{display:none;width:calc(5 * var(--m));height:calc(5 * var(--m)); border-radius:50%;background:#fff;margin:0 calc(10 * var(--m));vertical-align:middle;} @media (min-width:900px){ .page-ct .stage{height:217.67rem;} .page-ct .stage::before{left:50%;transform:translateX(-50%);width:100vw; background:url("assets/bg-tn.webp?v=2") 50% 0 / cover no-repeat #000;} .page-ct .ct-head{position:absolute;left:0;top:0;width:160rem;height:55rem; padding:0;text-align:left;overflow:visible;} .page-ct .ct-form{position:absolute;left:0;top:0;width:160rem;height:127.67rem;padding:0;} .page-ct .contact{position:absolute;left:0;top:127.67rem;width:160rem;height:90rem;} /* ---------- başlık ---------- */ .tn-ttl{position:absolute;left:0;top:0;width:160rem;} .tn-ttl-1,.tn-ttl-2{position:absolute;left:0;width:160rem;text-align:center;white-space:nowrap;} .tn-ttl-1{top:22.31rem;font-family:var(--mach);font-weight:300; font-size:6.571rem;line-height:6.571rem;letter-spacing:0;} .tn-ttl-2{top:29.29rem;font-family:var(--serif);font-style:italic;font-weight:400; font-size:7.721rem;line-height:7.721rem;letter-spacing:0;} .tn-lead{position:absolute;left:0;top:40.65rem;width:160rem;margin:0;text-align:center; font-size:1.35rem;line-height:2rem;font-weight:300;white-space:nowrap;} /* yıldızlar (star-right.webp; kutular ölçülen ink kutusundan geri hesaplandı) */ .tn-star-l,.tn-star-r{display:block;position:absolute;pointer-events:none;z-index:0; background:url("assets/star-right.webp?v=1") 0 0 / 100% 100% no-repeat; transform-style:preserve-3d;will-change:transform;} .tn-star-l{left:20.8rem; top:27.2rem;width:14.46rem;height:14.97rem; animation:floatL 19s ease-in-out infinite;} .tn-star-r{left:121.33rem;top:20.64rem;width:12.67rem;height:11.69rem; animation:floatR 16s ease-in-out infinite;} /* ---------- form ---------- */ /* çizgiler referansta x 348..1252, aralık 6.35rem */ .tn-form{position:static;margin:0;} .tn-f{display:block;position:absolute;left:34.8rem;width:90.4rem;margin:0; box-sizing:border-box;background:none;color:#fff; border:0;border-bottom:1px solid rgba(255,255,255,.35);border-radius:0; font-family:var(--sans);font-size:1.525rem;font-weight:300;letter-spacing:0; padding:0 0 0 1.3rem;} .tn-f::placeholder{color:rgba(255,255,255,.82);opacity:1;} .tn-f:focus{outline:0;border-bottom-color:#fff;} /* padding-top, yazi tabanini cizginin 2.5rem uzerine oturtuyor (referans) */ input.tn-f{height:6.35rem;line-height:6.35rem;padding-top:.35rem;} .tn-f-1{top:58.75rem;} .tn-f-2{top:65.1rem;} .tn-f-3{top:71.45rem;} .tn-f-4{top:77.8rem;} .tn-area{top:84.1rem;height:14.95rem;padding:2.1rem 0 0 1.3rem;line-height:2.7rem; resize:none;overflow:auto;} .tn-note{position:absolute;left:0;top:100.85rem;width:160rem;margin:0;text-align:center; font-size:1.242rem;line-height:2rem;font-weight:300;white-space:nowrap;} .tn-btn{position:absolute;left:66.2rem;top:106.1rem;width:27.6rem;height:3.5rem;margin:0;padding:0; display:flex;align-items:center;justify-content:center; background:#fff;color:#000;border:0;border-radius:99rem;cursor:pointer; font-family:var(--mach);font-size:1.36rem;line-height:1;font-weight:400; transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease;} .tn-btn:hover{transform:translateY(-.3rem);box-shadow:0 1.4rem 3.4rem rgba(255,255,255,.16);} .tn-btn[disabled]:hover{transform:none;box-shadow:none;} /* Durum mesajı, butonla (106.1+3.5=109.6rem) iletişim satırı (123.15rem) arasındaki boşluğa oturuyor; ikisine de değmiyor. */ .tn-status{position:absolute;left:0;top:113.2rem;width:160rem;margin:0;text-align:center; font-size:1.242rem;line-height:2rem;font-weight:300;} .tn-info{position:absolute;left:0;top:123.15rem;width:160rem;margin:0;text-align:center; font-family:var(--mach);font-size:1.42rem;line-height:2rem;font-weight:300;white-space:nowrap;} .tn-info a{transition:opacity .25s ease;} .tn-info a:hover{opacity:.6;} /* kenar boşluk, satırın toplam genişliğini referanstaki 53.9rem'e getiriyor */ .tn-dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:#fff; margin:0 2.018rem;vertical-align:.25rem;} } @media (prefers-reduced-motion:reduce){ *{animation:none !important;} } /* ========================================================== YUKARI ÇIK — sayfa aşağı kaydırılınca sağ altta beliren ok. Ok, hero'daki kaydırma ipucunun ta kendisi (assets/arrow-up.svg, 180° döndürülmüş); çerçeve/renk dili TR-EN rozetleriyle aynı. Görünürlüğü script.js .is-on sınıfıyla açıp kapatıyor. ========================================================== */ .to-top{position:fixed;right:18px;bottom:18px;z-index:60; display:grid;place-items:center;width:44px;height:44px;padding:0; border:1px solid rgba(255,255,255,.32);border-radius:99px; background:rgba(5,5,5,.55); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .3s ease, transform .3s ease, visibility .3s, border-color .2s ease, background-color .2s ease;} .to-top::before{content:"";display:block;width:22px;height:25px;opacity:.85; background:url("assets/arrow-up.svg?v=1") 50% 50% / contain no-repeat; transition:opacity .2s ease, transform .25s ease;} .to-top.is-on{opacity:1;visibility:visible;transform:none;} .to-top:hover{border-color:rgba(255,255,255,.78);background:rgba(5,5,5,.78);} .to-top:hover::before{opacity:1;transform:translateY(-.15rem);} .to-top:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:3px;} /* mobil menü açıkken sahneden çekilsin (menü örtüsü zaten üstte, ama yarı saydam bir örtüye geçilirse buton arkada belli olmasın) */ body.menu-open .to-top{opacity:0;visibility:hidden;} @media (min-width:900px){ /* masaüstünde ölçü tasarım birimiyle: 1rem = 10 tasarım px */ .to-top{right:3.4rem;bottom:3.4rem;width:4.6rem;height:4.6rem;border-width:.1rem; transform:translateY(1rem);} .to-top::before{width:2.3rem;height:2.6rem;} .to-top.is-on{transform:none;} } @media (prefers-reduced-motion:reduce){ .to-top,.to-top::before{transition:opacity .01s linear;} .to-top:hover::before{transform:none;} }