/* ============================================================ LOCA GAYRİMENKUL — Güven Laciverti + Karamel Palet: kâğıt zemin · koyu lacivert çapa · karamel accent İKİ ton ailesi yürür: sıcak eksen (zemin + karamel, hue ~66–80°) ve soğuk çapa (lacivert, hue ~250°). Üçüncü bir aile eklenmez — bir tur mürekkep haki (89–100°) ve satılık rozeti terrakota (49°) idi; ikisi de kendi ailelerine çekildi. Tipografi: Fraunces (display) + Hanken Grotesk (body) ============================================================ */ /* ---------- tokens ---------- */ :root { /* Zemin & yüzey — "kâğıt", "bej" değil. Ölçüm: eski krem OKLCH C=0.017 idi ve sayfanın %30.8'ini kaplıyordu; bu kroma seviyesinde geniş alan bej okunur, kâğıt okunmaz (referans sınıfı kâğıtlar C≈0.008–0.011). Kroma yarıya indirildi, hue karamel ekseniyle hizalandı (85°→78°) — böylece zemin ve accent TEK sıcak aile olur, iki yakın-ama-farklı sıcak olmaz. Açıklık ayrımı bilerek bir tık açıldı: beyaz↔krem bölüm ritmi eskiden kroma farkına dayanıyordu, kroma düşünce ritim çökmesin diye fark açıklığa devredildi (yeni ayrım 1.129, eski 1.126 — korundu). */ --cream: #f2eee8; --paper: #f9f7f3; --paper-2: #f5f2ed; --card: #fefcf9; /* Kâğıt Işığı — YALNIZ hero perdesinin rengi; bir zemin değil, bir ışıktır. Perde uzun süre --cream ile boyanıyordu ve bu iki hata üretiyordu: (1) zemin rengi fotoğrafın üstünde "boya" gibi durur, ışık gibi değil; (2) kroma yarıya inince (C 0.017→0.009) perde nötrleşti, altındaki gün batımının sıcaklığını emip griye çekti — fotoğrafın kalıntısı krem değil PUS okundu. Bu ton kremin aynı sıcak ekseninde bir kademe açığıdır (OKLCH L 0.975 / C 0.0119 / H 79.8; krem: 0.951 / 0.0091 / 78.3) — yeni bir aile değil, kremin ışık hâli. */ --hero-light: #fbf6ee; --hero-light-rgb: 251 246 238; /* lacivert çapa */ --olive-950: #0d1e30; /* footer — pitch'in olive-900'ünden ayrışsın diye bir kademe koyu */ --olive-900: #12293f; --olive-800: #16324f; --olive-700: #22456a; --olive-600: #305a85; --olive-500: #43709b; --olive-300: #86a3bd; /* Alfa türetmek için RGB üçlüleri. Kural: alfalı lacivert/karamel değeri ASLA elle rgba(...) yazılmaz — `rgb(var(--x-rgb) / .2)` ile buradan türetilir. Palet üç kez değişti (zeytin→lacivert, brass→Vantara karameli) ve her seferinde token'lar güncellenip literaller geride kaldı; tek kaynak bunu kalıcı olarak imkânsız kılar. */ --olive-800-rgb: 22 50 79; --olive-950-rgb: 13 30 48; --shadow-rgb: 18 41 63; --cream-rgb: 242 238 232; --paper-rgb: 249 247 243; /* karamel accent (Vantara tonu) */ --brass: #b68a5e; --brass-rgb: 182 138 94; --brass-600-rgb: 139 101 50; /* metin taşıyan karamel. bir kademe açığı idi: beyaz metinle 4.42:1, krem üstünde eyebrow olarak 3.86:1 — ikisi de AA 4.5:1 altındaydı. Ton korunarak %10 koyulatıldı → beyaz 5.26:1, --paper 4.90:1, krem üstünde 4.59:1. --brass (#b68a5e) DEĞİŞMEDİ: büyük dolgu ve dekoratif aksan olarak kalır, ama üstüne açık metin KONMAZ (2.93:1). */ --brass-600: #8b6532; --brass-300: #d3b78e; --brass-100: #ece0cd; /* ---- mürekkep ---- Palet üç kez göç etti (zeytin→lacivert→Vantara karameli) ama mürekkep rampası HİÇ göç etmedi: bu değerler zeytin devrinden kalmaydı ve OKLCH hue'ları 89–100° yani sarı-yeşil (haki) idi. Çapa ise 250° (lacivert). Alan ölçümü sorunun büyüklüğünü gösterdi: yalnız --muted, sayfada render edilen tüm metnin %20.1'iydi — yani okunan her paragraf, terk edilmiş bir paletin rengiyle yazılıydı. Haki mürekkep + bej zemin, "premium" değil "tozlu" okunur. Rampanın tamamı çapanın hue'suna (250°) taşındı. Ayrıca rol ayrımı yapıldı: --muted iki iş birden yapıyordu — hem gövde paragrafı hem mikro-meta. Paragraf L=52'de yıkanık kalıyordu (sayfanın "haze" hissinin asıl kaynağı). Paragraflar kendi mürekkebine (--ink-2) taşındı; --muted yalnızca künye/etiket/caption rolünde kaldı. */ --ink: #14202d; /* gövde varsayılanı — krem üstünde 14.26:1 (eski 13.77) */ --ink-2: #3c4957; /* PARAGRAF mürekkebi — krem üstünde 7.96:1 (eski 4.72) */ --muted: #606a75; /* künye/etiket/caption — 4.76:1 (eski 4.72, eşdeğer) */ /* dekoratif ikon/caret. Eski zeytin-haki tonu krem üstünde 2.93:1 idi — WCAG 1.4.11'in grafik nesne eşiği 3:1'in altında. Ton göçüyle birlikte açıklık da bir kademe düşürüldü: 3.15:1 (kart üstünde 3.56:1). */ --muted-2: #7e8791; --line: rgb(var(--olive-800-rgb) / 0.14); --line-2: rgb(var(--olive-800-rgb) / 0.07); /* Kontrol sınırı. --line dekoratif ayraç için doğru ama BUTON kenarı için değil: beyaz üstünde 1.30:1 verir, WCAG 1.4.11 kontrolü tanımlayan sınır için 3:1 ister. 0.56 alfa ölçülerek seçildi: en kötü zeminde (krem) 3.13:1, beyaz kartta 3.24:1. Ghost butonlar, burger ve akordeon ikonu bunu kullanır. */ --line-control: rgb(var(--olive-800-rgb) / 0.56); /* koyu bölümlerdeki kontrol sınırı — açık kâğıt tonundan türer (navy-800'de 4.04:1). Alfa Türetme Kuralı: krem üçlüsü buraya elle yazılmaz, --cream-rgb'den gelir. */ --line-control-dark: rgb(var(--cream-rgb) / 0.5); /* Odak halkası YÜZEYE DUYARLI tek token. Tek sabit renk iki dünyaya yetmez: --brass-600 açık zeminlerde 4.58–5.16:1 ama lacivert üstünde 2.50:1'e düşer; --brass-300 tersi. Koyu bölümler bu değişkeni kendi scope'unda ezer (aşağıda), böylece her odak halkası bulunduğu yüzeyde 3:1'i geçer. NOT: --brass (#b68a5e) halka olarak KULLANILMAZ — krem üstünde 2.70:1 verir. "İki Karamel Kuralı" yalnız metni değil grafik nesneleri de kapsar. */ --focus-ring: var(--brass-600); /* durum renkleri (etiket) */ /* Satılık rozeti + favori kalbi. Eski terrakota sayfanın EN yüksek kromalı rengiydi (C=0.111 > --brass C=0.080): bir servis etiketi marka accent'ini bastırıyordu, üstelik H=49° ile karamelin (72°) akrabası bile değildi — beşinci bir ton ailesi. Karamel ailesine katıldı; sayfada artık tek yüksek kroma accent'in kendisi. Beyaz metinle 5.24:1 (eski 4.83). */ --sale: var(--brass-600); --rent: #305a85; /* kiralık — lacivert */ /* WhatsApp — birincil dönüşüm rengi. bir kademe açık yeşil beyaz etiketle 4.36:1 idi (AA altı), bir kademe koyulaştırıldı: 5.56:1. Literal olarak hiçbir yere yazılmaz. */ --wa: #1a7748; --wa-600: #15613b; /* ---- panel mockup alt-paleti ---- Panel mockup'ı bir YAZILIM ekran görüntüsünü temsil eder; markanın lacivert/karamel dilinde DEĞİL, kasıtlı olarak nötr yazılım estetiğindedir (brief kararı #9). Ama "nötr" zeytin demek değildi: burada eski zeytin paletinden kalma paletinden kalma değerler duruyordu ve mockup'a kirli yeşilimsi bir ton veriyordu. Nötr slate rampasına taşındı; ana içerik hiyerarşisinden ayrı bir alt-sistem olarak kalır ama artık isimli ve tek noktadan uyarlanabilir. */ --mock-ink: #23272e; /* mockup mürekkebi + koyu yüzeyler (nötr slate-siyah) */ --mock-ink-2: #2f333b; /* mockup gövde metni */ --mock-muted: #6b7078; /* mockup ikincil metin — beyazda 4.83:1 (AA) */ --mock-surface: #f7f7f8; /* uygulama gövdesi */ --mock-surface-2: #f1f1f3; /* tarayıcı çerçevesi */ --mock-bar: #e6e6e9; /* tarayıcı adres çubuğu şeridi */ --mock-dot: #c6c6cb; /* pencere noktaları */ --mock-chip-bg: #eceef0; /* portal senkron çipi zemini */ --mock-chip-ink: #4a5058; /* portal senkron çipi metni — çip üstünde 6.53:1 */ --mock-line: rgb(35 39 46 / 0.09); --mock-ok: #14714a; /* senkron/artış göstergesi — beyazda 5.29:1 (AA) */ --mock-ok-300: #7fd7a3; /* koyu mockup yüzeyinde yeşil etiket */ /* efekt — 2026 yumuşak gölge dili (Vantara kalibrasyonu: maks ~0.16 opaklık, geniş blur + negatif spread, ton = lacivert mürekkep — siyah/zeytin değil) */ --shadow-sm: 0 1px 2px rgb(var(--shadow-rgb) / 0.04), 0 2px 8px -2px rgb(var(--shadow-rgb) / 0.05); --shadow: 0 2px 6px -2px rgb(var(--shadow-rgb) / 0.05), 0 18px 36px -18px rgb(var(--shadow-rgb) / 0.13); --shadow-lg: 0 24px 50px -20px rgb(var(--shadow-rgb) / 0.16), 0 4px 12px -8px rgb(var(--shadow-rgb) / 0.06); /* gölge mürekkebi karamelin KENDİ tonundan türer; eskiden #a67c3d (iki nesil önceki brass-600) elle yazılıydı ve palet değişince geride kalmıştı */ --shadow-brass: 0 14px 30px -14px rgb(var(--brass-600-rgb) / 0.30); --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; /* İkon çipi yarıçapı — ORANSAL. Sitedeki altı kare ikon çipinin her biri elle yazılmış, birbirinden farklı bir yarıçap taşıyordu; ölçüldüğünde hepsinin kenar uzunluğunun yaklaşık %28'i olduğu görüldü — yani sabit bir sayı değil, gizli bir ORAN kuralıydı. Yüzde yarıçap kutuya göre hesaplandığından tek token hepsini piksel piksel yeniden üretir ve yeni bir çip boyutu otomatik doğru olur. */ --r-chip: 28%; --mock-r-chip: 5px; /* panel mockup'ının kendi mikro çipi — alt-sisteme ait */ --wrap: 1200px; --gutter: clamp(20px, 5vw, 56px); --nav-h: 80px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; /* destek tipografi rampası — display/headline/title/body üstündeki roller. Önceden aynı işi gören 6+ birbirine yakın rastgele değer (ör. etiketler 0.6–0.76rem arası dağınıktı) tek isimli role indirgendi; kart/nav/form/footer genelinde AYNI rol AYNI boyutu kullanır. */ --fs-label: 0.75rem; /* büyük harf + tracking mikro etiket: eyebrow, rozet, footer başlığı, form etiketi */ --fs-caption: 0.86rem; /* ikincil/meta bilgi: konum, puan, alt-etiket, künye satırı */ --fs-small: 0.94rem; /* gövdeye yakın destek metni: nav linki, buton-benzeri kontrol, bölüm paragrafı */ --fs-lead: 1.2rem; /* bölüm/kart giriş paragrafı — gövdenin (17px) belirgin üstünde */ --fs-mock-2xs: 0.64rem; /* panel mockup'ı: en küçük rozet/altyazı */ --fs-mock-xs: 0.72rem; /* panel mockup'ı: küçük etiket/metin */ --fs-caption-tight: 0.8rem; /* topband mobilde tek satıra sığsın diye bir kademe kısık */ /* buton bileşeninin kendi kasıtlı iki adımlı ölçeği — destek rampasına dahil değil */ --fs-button: 0.98rem; --fs-button-sm: 0.9rem; /* ---- display-rakam katmanı (--fs-num-*) ---- "Serif Rakam Kuralı" fiyatların ve sayısal vurguların display fontta yazılmasını söylüyordu ama ÖLÇÜLERİNİ hiç isimlendirmemişti: h1/h2/h3'ün altında, gövdenin üstünde kalan bu katmanda 1.24 / 1.4 (3 kez) / 1.5 (3 kez) / 2 / 3.4rem değerleri tek tek elle yazılıydı. Aynı işi gören değerler tek token'a indirildi; ölçüler korundu (görsel değişiklik yok), yalnız isimlendirildi. */ --fs-body: 1.0625rem; /* gövde ile aynı ölçü (17px) — küçük başlık/değer rolleri */ --fs-num-xs: 1.2rem; /* SSS sorusu, filtre sayacı, mockup başlığı */ --fs-num-sm: 1.24rem; /* kart başlığı, danışman adı */ --fs-num: 1.4rem; /* ilan fiyatı, italik imza, mockup istatistiği */ --fs-num-lg: 1.5rem; /* wordmark, mobil menü linki, danışman imzası */ --fs-num-xl: 2rem; /* rozet rakamı */ --fs-num-2xl: 3.4rem; /* süreç adım numarası */ --fs-quote: 3rem; /* dekoratif tipografik tırnak (aria-hidden) */ /* akışkan display roller — bölüm/sayfa başına özel, her biri tek kullanım */ --fs-stat: clamp(2rem, 3.4vw, 2.9rem); /* güven bandı istatistiği */ --fs-detail-h1: clamp(2rem, 4vw, 3.1rem); /* ilan-detay sayfa başlığı */ --fs-detail-price: clamp(2rem, 4vw, 2.9rem); /* ilan-detay fiyatı */ --fs-detail-h2: clamp(1.5rem, 2.6vw, 2rem); /* ilan-detay bölüm başlığı */ } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } /* overflow-x: clip → yatay taşmayı kırpar ama (hidden'ın aksine) kaydırma-konteyneri oluşturmaz; böylece sticky nav düzgün sabitlenir (hidden position:sticky'yi kırıyordu) */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } /* Hareket hassasiyeti: amaç hareketi yok saymak DEĞİL, yer değiştiren/ölçek değiştiren hareketi kaldırıp durum değişimi geri bildirimini KORUMAKtır. Önceden burada global bir `transition-duration: 0.001ms !important` vardı; kaydırma ve ölçekleme hareketini gerçekten kaldırıyordu ama aynı anda hover, odak, akordeon ve filtre geri bildirimini de siliyordu — kullanıcı neyin değiştiğini göremiyordu. Şimdi: yer değiştirme/ölçek/otomatik hareket gider, renk ve opaklık geçişleri (yani "bir şey değişti" bilgisi) kısaltılmış süreyle kalır. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* imza hareketleri ve süslü geçişler tamamen durur */ .hero-media { animation: none !important; } .nav .wrap::after { transition: none !important; } /* .reveal: aşağı kaydırarak girmek yerine yerinde belirir (hiyerarşi korunur) */ .reveal { transform: none !important; transition: opacity 0.2s linear !important; } /* transform tabanlı tüm mikro-hareketler nötrlenir — kart/buton kalkması, ok kayması, görsel yakınlaşması, carousel kayması. Durum yine renkle bildirilir. */ .card:hover, .svc:hover, .btn:hover, .card-fav:hover, .card-cta:hover, .hs-submit button:hover, .card:hover .card-media img, .btn:hover svg, .svc:hover .svc-more svg, .g-item:hover img { transform: none !important; } .tst-track { transition: none !important; } /* renk/opaklık/gölge geri bildirimi KALIR, yalnız kısalır */ * { transition-duration: 0.12s !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } /* akordeon yüksekliği anında açılır (yüksekliği canlandırmak zaten hareket) */ .qa .a { transition: none !important; } /* mobil çekmece: 343px'lik kayma yer değiştirmenin ta kendisi → panel kaymadan belirir. Ayrıca yukarıdaki `*` kuralı `transition-duration`'ı visibility'ye de yazıyor; ayrık (discrete) bir özellik süre alınca %50'de döndüğü için panel AÇILIŞTA ~60ms `hidden` kalıyor ve JS'in `focus()` çağrısı sessizce düşüyordu. Süre burada açıkça sıfırlanır (aynı sıfır-süre + gecikme deseni). */ .mobile-menu { transform: none !important; opacity: 0; transition: opacity 0.12s linear, visibility 0s linear 0.12s !important; } .nav.open ~ .mobile-menu, body.menu-open .mobile-menu { opacity: 1; transition: opacity 0.12s linear, visibility 0s linear 0s !important; } .menu-scrim { transition: opacity 0.12s linear, visibility 0s linear 0.12s !important; } body.menu-open .menu-scrim { transition: opacity 0.12s linear, visibility 0s linear 0s !important; } /* sticky bar: yükselme (yer değiştirme) kalkar, durum bildirimi opaklıkla kalır; visibility yine açıkça sıfır süreye çekilir (yukarıdaki `*` kuralı ona da süre yazar) */ .sticky-bar { transform: none !important; transition: opacity 0.12s linear, visibility 0s linear 0.12s !important; } .sticky-bar.is-visible { transition: opacity 0.12s linear, visibility 0s linear 0s !important; } } body { font-family: var(--font-body); background: var(--cream); color: var(--ink); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img { display: block; max-width: 100%; height: auto; } .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* yalnız ekran okuyucu için — görsel olarak kısa kalan bir etiketi bağlamıyla tamamlar (ör. altı hizmet kartındaki "Bilgi alın" hangi hizmet olduğunu söyler) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select { font: inherit; color: inherit; } ::selection { background: var(--brass-100); color: var(--olive-900); } /* ---------- atmosfer: grain — KALDIRILDI ---------- Burada `body::before` ile tam ekran sabit (position:fixed) bir SVG gürültü katmanı vardı. Ölçüldü: `z-index: 1`, ama `section { z-index: 2 }` — yani sayfanın TÜM bölümlerinin ALTINDA kalıyordu ve yalnız hero ile footer üzerinde görünüyordu. Yani ne tutarlı bir doku sistemiydi ne de görünmezliği bedavaydı: her karede yeniden birleştirilen tam viewport'luk bir compositing katmanının maliyetini ödüyorduk. İki seçenek vardı — z-index'i yükseltip her yere yaymak (fotoğrafları ve kartları da bulandırırdı) ya da kaldırmak. Kâğıt hissini zaten krem → paper → beyaz ton merdiveni taşıyor; katman kaldırıldı. Gerçek etki ölçüsü: 0.4 opaklık × 0.035 gürültü ≈ %1.4 — görsel kayıp yok. */ /* ---------- typografi ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 430; line-height: 1.02; letter-spacing: -0.015em; font-optical-sizing: auto; color: var(--olive-900); } h1 { font-size: clamp(2.9rem, 7vw, 5.6rem); } h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); } h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 500; letter-spacing: -0.01em; } h1 em, h2 em, h3 em { font-style: italic; font-weight: 380; color: var(--brass-600); } p { text-wrap: pretty; } .eyebrow { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-600); display: inline-flex; align-items: center; gap: 0.6em; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.6; } .eyebrow.center::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.6; } /* ---------- layout ---------- */ /* Section zemin ritmi: beyaz (card) ↔ krem (cream) kararlı değişim + koyu lacivert "statement" bölümler (valuation → testimonials → pitch → footer, giderek koyulaşır). Aynı tonun mikro-koyusuyla bant denemesi YAPMA — kirli bej okunuyor. */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap-wide { max-width: 1360px; } section { position: relative; z-index: 2; } .section-pad { padding-block: clamp(72px, 10vw, 140px); } .sec-head { max-width: 640px; } .sec-head.center { max-width: 720px; margin-inline: auto; text-align: center; } .sec-head h2 { margin-top: 18px; } .sec-head p { margin-top: 18px; color: var(--ink-2); font-size: var(--fs-lead); } /* bölüm başlığının yanındaki kısa açıklama sütunu (eskiden inline style'daydı) */ .sec-note { color: var(--ink-2); max-width: 34ch; } /* ikon boyutu inline `style="width:12px;height:12px"` ile yazılıyordu (5 yer) */ .ic-xs { width: 12px; height: 12px; } .ic-sm { width: 18px; height: 18px; } /* yalnız üst dolguyu ezen bölümler — inline padding override yerine */ .pad-top-0 { padding-top: 0; } .pad-bottom-0 { padding-bottom: 0; } .section-pad-tight { padding-block: clamp(40px, 5vw, 64px) clamp(72px, 10vw, 140px); } .mt-0 { margin-top: 0; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.55em; padding: 15px 26px; border-radius: 100px; font-weight: 600; font-size: var(--fs-button); letter-spacing: -0.005em; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s, color 0.3s; white-space: nowrap; } .btn svg { width: 18px; height: 18px; transition: transform 0.4s var(--ease); } .btn-primary { background: var(--olive-800); color: var(--paper); box-shadow: var(--shadow); } .btn-primary:hover { background: var(--olive-900); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-primary:hover svg { transform: translateX(4px); } /* "İki Karamel Kuralı": açık metin taşıyan zemin daima --brass-600'dür. Gradyanın açık ucu (--brass) beyaz metinle 2.93:1 veriyordu → düz --brass-600 (5.26:1). Hover dili renk değiştirmek değil kalkmaktır, o yüzden gradyanın kaybı görsel bir kayıp değil. */ .btn-brass { background: var(--brass-600); color: #fff; box-shadow: var(--shadow-brass); } .btn-brass:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -16px rgb(var(--brass-600-rgb) / 0.38); } .btn-brass:hover svg { transform: translateX(4px); } /* Sınır --line (1.30:1) değil --line-control (3.13:1): ghost butonun kenarı onu "buton" yapan tek işaret, WCAG 1.4.11 gereği 3:1 ister. En kritik örnek ilan-detay'daki tam genişlikli "Hemen Ara" — beyaz gövdede kenarı görünmüyordu. */ .btn-ghost { background: transparent; color: var(--olive-800); box-shadow: inset 0 0 0 1.5px var(--line-control); } .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--olive-700); background: rgb(var(--olive-800-rgb) / 0.05); } /* koyu bölümde ghost — eskiden inline style ile rgb(var(--cream-rgb) / 0.25) yazılıydı (2.10:1) */ .btn-ghost.on-dark { color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-control-dark); } .btn-ghost.on-dark:hover { box-shadow: inset 0 0 0 1.5px var(--paper-2); background: rgb(var(--cream-rgb) / 0.08); } .btn-wa { background: var(--wa); color: #fff; box-shadow: 0 10px 24px -14px rgb(var(--shadow-rgb) / 0.42); } .btn-wa:hover { background: var(--wa-600); transform: translateY(-2px); } .btn-block { width: 100%; justify-content: center; } .btn-sm { padding: 11px 18px; font-size: var(--fs-button-sm); } /* ---------- erişilebilirlik: tutarlı klavye odak halkası ---------- Öğe listesi yerine :focus-visible'ı tek noktada TÜM interaktif öğelere veririz — eski allowlist yaklaşımı yeni bir buton eklendiğinde sessizce halkasız bırakıyordu (.tb-close, .mobile-menu a, .breadcrumb a, .g-item, .svc-more hepsi listede yoktu). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--r-xs); } /* Koyu bölümler halka rengini kendi scope'unda çevirir (custom property kalıtımı): lacivert üstünde brass-600 2.50:1'e düşer, brass-300 6.8–8.8:1 verir. */ .valuation, .testimonials, .pitch, .footer, .faq-aside, .svc.svc-wide, .mock-side, .mock-lead { --focus-ring: var(--brass-300); } /* kapsül butonlar halkayı kendi siluetinde taşır (dikdörtgen halka kapsülü bozuyordu) */ .btn:focus-visible, .fb-btn:focus-visible, .hs-tab:focus-visible, .card-fav:focus-visible, .card-cta:focus-visible, .tst-btn:focus-visible, .f-social a:focus-visible, .tb-close:focus-visible, .pl-chip:focus-visible { border-radius: 100px; } .hs-submit button:focus-visible, .burger:focus-visible { border-radius: var(--r-sm); } /* atlama linki — klavye kullanıcısı topband + nav + menüyü (≈15 durak) geçmek zorunda kalmasın. Odaklanmadan görünmez, odakta gerçek bir kapsül buton olur. */ .skip-link { position: fixed; top: 10px; left: 50%; transform: translate(-50%, -160%); z-index: 100; padding: 12px 22px; border-radius: 100px; background: var(--olive-900); color: var(--paper); font-size: var(--fs-small); font-weight: 600; box-shadow: var(--shadow-lg); transition: transform 0.25s var(--ease); } .skip-link:focus-visible { transform: translate(-50%, 0); } /* ============================================================ META ÜST BAND ============================================================ */ .topband { position: relative; z-index: 60; background: var(--olive-900); color: var(--paper-2); font-size: var(--fs-caption); } .topband .wrap { display: flex; align-items: center; gap: 16px; padding-block: 10px; } .topband .tb-txt { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .topband .tb-tag { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive-900); background: var(--brass-300); padding: 3px 9px; border-radius: 100px; } .topband a.tb-link { display: inline-block; padding-block: 3px; color: var(--brass-300); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .topband a.tb-link:hover { color: #fff; } .topband .tb-close { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--paper-2); opacity: 0.7; transition: 0.25s; flex-shrink: 0; } .topband .tb-close:hover { opacity: 1; background: rgba(255,255,255,0.1); } body.band-closed .topband { display: none; } /* ------------------------------------------------------------ REKLAM-FARKINDA BAND (Web Atölye satış katmanı — şablon satılırken silinir) ------------------------------------------------------------ Reklamdan gelen ziyaretçi EMLAK OFİSİ SAHİBİdir, sayfanın kendisi ise ev arayana konuşur ("Aradığınız gayrimenkul burada"). Çerçeveyi yalnız üstteki sade band taşıyordu ve o cümle ≤560px'te gizliydi (aşağıdaki mobil kural) — yani mesaj eşleşmesi tam da trafiğin indiği yerde kopuyordu. Bu band o boşluğu kapatır ve normal ziyaretçiye HİÇ görünmez. `html.ad-traffic` sınıfını 'deki senkron betik koyar (defer/altta çalışsaydı band boyamadan sonra eklenip hero'yu aşağı zıplatırdı). İki band üst üste gürültü olduğu için sade band bu modda gizlenir. */ .wa-band { display: none; } html.ad-traffic .wa-band { display: block; } html.ad-traffic .topband { display: none; } .wa-band { position: relative; z-index: 60; background: var(--olive-950); border-bottom: 1px solid rgb(var(--brass-600-rgb) / 0.45); } /* koyu bölümlerin brass radial imzasının kısık hali: band "ayrı bir katman" olduğunu renkle söyler, bağırmadan */ .wa-band::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 220% at 10% 50%, rgb(var(--brass-600-rgb) / 0.22), transparent 62%); } .wa-band .wrap { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; padding-block: 12px; } .wa-band .wb-txt { flex: 1; min-width: 0; font-size: var(--fs-caption); line-height: 1.45; color: var(--paper); } .wa-band .wb-txt b { font-weight: 600; } /* Serif Rakam Kuralı: fiyat display fontta yazılır. Bandın tek editoryal notu bu — reklamın vaat ettiği rakam, sitenin ilan fiyatlarıyla aynı jestle. Desen `.fb-count b` ile aynı: küçük metnin içinde --fs-num-xs boyunda Fraunces. */ .wa-band .wb-price { font-family: var(--font-display); font-size: var(--fs-num-xs); letter-spacing: -0.01em; } .wa-band .wb-long { color: var(--olive-300); } /* 6.41:1 — ikincil cümle, AA (ölçüldü) */ .wa-band .wb-tag { flex-shrink: 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive-900); background: var(--brass-300); padding: 3px 9px; border-radius: 100px; } /* CTA .btn.btn-brass.btn-sm'i yeniden kullanır ("İki Karamel Kuralı" gereği beyaz metin --brass-600 üstünde kalsın). Yalnız dolgu kısılır — buton metni kendi iki adımlı ölçeğinde (--fs-button-sm) kalır; "Aynı Rol Aynı Token Kuralı" caption token'ını butona taşımayı yasaklıyor. */ .wa-band .btn-sm { padding: 9px 16px; } .wa-band .wb-close { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--paper-2); opacity: 0.65; transition: 0.25s; flex-shrink: 0; } .wa-band .wb-close:hover { opacity: 1; background: rgb(var(--paper-rgb) / 0.14); } .wa-band .wb-close svg { width: 16px; height: 16px; } /* Koyu bölümlerin odak halkası kuralı (yukarıdaki `.valuation, .testimonials, …` listesi) iki meta bandı atlamıştı: ikisi de koyu lacivert ama halkayı --brass-600 ile çiziyordu (band zemininde 3.22:1 — 1.4.11'i kıl payı geçer, sistemin koyu yüzeylerdeki 6.8–8.8:1 standardının çok altı). Kapatma butonu daire olduğu için kapsül halkası listesine de girer. */ .topband, .wa-band { --focus-ring: var(--brass-300); } .wa-band .wb-close:focus-visible { border-radius: 100px; } body.wa-band-closed .wa-band { display: none; } /* ============================================================ NAV ============================================================ */ /* floating "liquid glass" pill (2026): üstten boşluklu, sticky, yuvarlak; katmanlı krem cam + üst specular parıltı + hover'da geçen sıvı ışık huzmesi. backdrop blur/saturate/brightness arkaplanı canlandırır; metin ön planda net kalır. */ .nav { position: sticky; top: 0; z-index: 50; padding-top: clamp(12px, 1.6vw, 20px); /* floating pill hiçbir genişlikte ekran kenarına yapışmasın: iç .wrap'ın gutter'ı pill'in kendi padding'iyle ezildiğinden dış boşluğu nav taşır (1200px cap'in üstünde margin:auto zaten devrede, bu değer görünmez olur) */ padding-inline: clamp(14px, 2.5vw, 32px); pointer-events: none; /* şeffaf boşluk tıklanabilir olmasın; yalnız pill aktif */ } .nav .wrap { pointer-events: auto; position: relative; /* ⛔ Pill'in genişliği --wrap'tir; buraya kendi max-width'i YAZILMAZ. Pill'in kenarı sayfa içerik sütununun kenarıyla aynı dikey çizgide durur — logo hizasını taşıyan şey budur. Pill bir kez 1320px'e genişletildi (menü sığmıyordu) ve logo içerik sütununun 91px dışına çıktı: başlık "kenara itilmiş" göründü. Menü sığmıyorsa çözüm pill'i şişirmek değil, kalem eksiltmektir — yer kararı .nav--burger ölçümünde yaşar. */ display: flex; align-items: center; gap: 24px; padding: 11px 14px 11px 24px; border-radius: 100px; /* Vantara cam zemini: krem değil SAF BEYAZ (ölçülen: rgba(255,255,255,0.4)); saturate düşük tutulur — yüksek saturate arkadaki kremi pompalayıp camı sarartıyordu */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 58%), linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.4)); backdrop-filter: saturate(140%) brightness(1.08) blur(18px); -webkit-backdrop-filter: saturate(140%) brightness(1.08) blur(18px); border: 1px solid rgba(255, 255, 255, 0.62); /* Vantara dili: cam kendini gölgeyle değil blur+kenarlıkla ayırır — fısıltı düzeyinde tek dış gölge + beyaz iç parıltı (karanlık iç gölge YOK) */ box-shadow: 0 6px 24px -16px rgb(var(--shadow-rgb) / 0.18), 0 1px 2px rgb(var(--shadow-rgb) / 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 2px 18px rgba(255, 255, 255, 0.35); transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease); } /* nav içeriği cam yüzeyin (::before/::after) üstünde kalsın */ .nav .wrap > * { position: relative; z-index: 2; } /* üst specular parıltı — camın yüzey ışığı */ .nav .wrap::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 42%); opacity: 0.85; } /* hover'da yüzeyden geçen sıvı ışık huzmesi (background-position ile — kırpma gerekmez) */ .nav .wrap::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); background-size: 250% 100%; background-position: 190% 0; opacity: 0; transition: background-position 1.1s var(--ease), opacity 0.5s var(--ease); } @media (hover: hover) { .nav .wrap:hover::after { background-position: -50% 0; opacity: 1; } } /* gerçek kırılma (feDisplacementMap): yalnız Chromium — JS motor tespitiyle html.glass-refract eklenir (Safari/Firefox url()'lu backdrop-filter'ı düşürüp camı tamamen kaybettirdiği için @supports yerine JS şart) */ html.glass-refract .nav .wrap { backdrop-filter: url(#liquid-lens) saturate(140%) brightness(1.08) blur(14px); -webkit-backdrop-filter: url(#liquid-lens) saturate(140%) brightness(1.08) blur(14px); } .nav.scrolled .wrap { background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0) 58%), linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.72)); border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 10px 30px -18px rgb(var(--shadow-rgb) / 0.22), 0 1px 3px rgb(var(--shadow-rgb) / 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 2px 20px rgba(255, 255, 255, 0.45); } .brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-size: var(--fs-num-lg); font-weight: 500; letter-spacing: -0.02em; color: var(--olive-900); } .brand .glyph { width: 30px; height: 30px; color: var(--brass); flex-shrink: 0; } .brand .glyph svg { width: 100%; height: 100%; } /* Marka > Logo dolu: görsel TAM RENKLİ basılır, yanında yazı yoktur (KARARLAR §14). Loca demoda alan boş → gömülü SVG + yazı; bu kurallar hiç eşleşmez. */ .brand--logo { gap: 0; } .brand--logo img { display: block; width: auto; height: 56px; transition: height 0.5s var(--ease); } /* 56px logo pill'i şişirmesin: logo varken dikey iç boşluk kısılır */ .nav .wrap:has(.brand--logo) { padding-top: 6px; padding-bottom: 6px; } .nav.scrolled .brand--logo img { height: 46px; } .mm-head .brand--logo img { height: 44px; } /* koyu altbilgide siyah logo kaybolmasın: arkasına açık zemin şeridi */ .footer .brand--logo { background: var(--paper); border-radius: var(--r-sm); padding: 12px 18px; } /* --muted-2 krem/cam üstünde 2.93:1 veriyordu (AA 4.5 altı) — markanın yanındaki "GAYRİMENKUL" alt-etiketi sessiz kalmalı ama okunur olmalı: --muted 5.31:1. */ .brand small { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); align-self: flex-end; margin-bottom: 6px; } /* koyu footer'da aynı etiket karamel ışığına döner (eskiden inline style'daydı) */ .footer .brand small { color: var(--brass-300); } .navlinks { display: flex; gap: 4px; margin-left: auto; } .navlinks a { padding: 9px 10px; border-radius: 100px; font-size: var(--fs-small); font-weight: 500; color: var(--olive-700); position: relative; transition: color 0.25s, background 0.25s; } .navlinks a:hover { color: var(--olive-900); background: rgb(var(--olive-800-rgb) / 0.05); } .navlinks a.active { color: var(--brass-600); } .nav-right { display: flex; align-items: center; gap: 12px; margin-left: 8px; } .nav-phone { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: var(--fs-small); color: var(--olive-800); } .nav-phone svg { width: 16px; height: 16px; color: var(--brass); } .burger { display: none; width: 44px; height: 44px; border-radius: 12px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1.5px var(--line-control); } .burger span { width: 18px; height: 1.5px; background: var(--olive-800); transition: 0.3s var(--ease); } .nav.open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav.open .burger span:nth-child(2) { opacity: 0; } .nav.open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ---------- nav daralması: çubuk asla taşmaz ---------- .wrap 1200px'te sabittir (max-width), yani geniş monitör yer AÇMAZ — sekiz kalemlik menü 1220px ister ve her masaüstü genişliğinde taşar; tarayıcı da açığı logoyu ve telefon yazısını sıkıştırarak kapatmaya çalışır. Kural tek: çubuk sığmıyorsa yatay linkler açılan menüye devredilir. Karar iki katmanlıdır — birincisi app.js'in gerçek ölçümü (`.nav--burger`), çünkü menü uzunluğu müşteriden müşteriye değişir ve tek bir piksel eşiği kimseye uymaz. JS çalışmazsa (html.nav-olculdu yoksa) kaba eşik devreye girer: 1250px — Ferhat kurulumunda altı kalemlik çubuğun sığdığı en dar genişlik (ölçüldü: 1260'ta 18px pay kalır, 1240'ta taşar). Telefon ve "Bize Ulaşın" bu modda KALIR — yer 820px altında zaten ayrıca kısılıyor. */ /* Ölçüm anı: üç blok da sıkışmayı bırakır ve GERÇEK genişliğini söyler. Sıkışmış hâli ölçmek ölçümü değersiz kılıyordu — flex blokları daralttığı için toplam daima "sığıyor" çıkıyor, çubuk ise görünürde taşıyordu. */ .nav--olcum .wrap { overflow: hidden; } .nav--olcum .brand, .nav--olcum .navlinks, .nav--olcum .nav-right { flex: 0 0 auto; min-width: max-content; } .nav--olcum .navlinks a { white-space: nowrap; } .nav--burger .navlinks { display: none; } .nav--burger .nav-right { margin-left: auto; } .nav--burger .burger { display: flex; } @media (max-width: 1250px) { html:not(.nav-olculdu) .navlinks { display: none; } html:not(.nav-olculdu) .nav-right { margin-left: auto; } html:not(.nav-olculdu) .burger { display: flex; } } /* mobil menü — modal çekmece KRİTİK (ölçümle bulundu): panel z-index 55 iken .nav (z-index 50) onun ALTINDA kalıyordu. Panel sağa yaslı ve burger de sağ üstte olduğundan açık menüde burger tamamen panelin altına gömülüyordu: `elementFromPoint(burger merkezi)` menünün ilk linkini ( "Portföy") döndürdü. Yani X'e dokunmak menüyü KAPATMIYOR, #ilanlar'a atlıyordu; geriye kalan tek kapatma yolu 47px'lik perde şeridiydi. Kapatma artık panelin KENDİ başlığındadır — katman sırasına hiç bağlı değil. Kapalıyken yalnız `translateX(100%)` vardı — öğe görünür ve ODAKLANABİLİR kalıyordu (masaüstünde tab sırasının 9–14. durağı). `visibility` geçişe dâhil: ayrık (discrete) bir özellik olduğu için SÜRE verilmez, gecikme verilir — `visibility 0.5s` yazmak onu %50'de çevirir ve açılışta yarım saniye `hidden` bırakıp JS'in `focus()` çağrısını sessizce düşürür. JS ayrıca `inert` ekler. */ .mobile-menu { position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px); z-index: 65; background: var(--paper); box-shadow: var(--shadow-lg); transform: translateX(100%); visibility: hidden; transition: transform 0.5s var(--ease), visibility 0s linear 0.5s; padding: 0 26px calc(clamp(16px, 2.4vh, 28px) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; /* yatay telefonda (≈390px yükseklik) içerik 585px sürüyordu: WhatsApp CTA'sı ekranın dışında kalıp erişilemez oluyordu. Panel kendi içinde kayar; taşma zinciri arkadaki sayfaya geçmez. */ overflow-y: auto; overscroll-behavior: contain; } .nav.open ~ .mobile-menu, body.menu-open .mobile-menu { transform: translateX(0); visibility: visible; transition: transform 0.5s var(--ease), visibility 0s linear 0s; } /* panel başlığı: nav pill'i panel örttüğü için marka ve kapatma burada yaşar. Panel kaydığında (yatay telefon) başlık yapışır — kapatma düğmesi her kaydırma konumunda erişilebilir kalmalı; ölçüldü: sticky olmadan 380px yükseklikte panelin dibine inince X ekranın 171px üstünde kalıyordu. Dolgu panelde değil başlıkta: yapışkan öğenin altından geçen linkleri kendi krem zemini örtsün. */ .mm-head { position: sticky; top: 0; z-index: 1; background: var(--paper); padding: clamp(12px, 2.2vh, 20px) 0 clamp(10px, 1.7vh, 14px); display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* dokunma hedefleri 44px'e tamamlanır: ikisi de yazı yüksekliğinde 32px kalıyordu */ .mm-head .brand { font-size: var(--fs-num-sm); gap: 9px; padding: 6px 0; } .mm-head .brand .glyph { width: 26px; height: 26px; } .mm-close { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--olive-800); box-shadow: inset 0 0 0 1.5px var(--line-control); transition: background 0.25s var(--ease), color 0.25s var(--ease); } .mm-close svg { width: 19px; height: 19px; } .mm-close:hover { background: rgb(var(--olive-800-rgb) / 0.06); color: var(--olive-900); } .mm-close:focus-visible { border-radius: 100px; } .mm-links { display: flex; flex-direction: column; } /* Panel Ekranla Ölçeklenir Kuralı. Menü sekiz kalem; sabit 24px yazı + 14px dolgu satır başına 67px ediyordu ve panel içeriği 835px sürüyordu — 375x812'de 23px, 375x667'de ~280px ekran dışında kalıyordu, yani menünün tamamını görmek için kaydırmak gerekiyordu. Ölçek GENİŞLİĞE değil YÜKSEKLİĞE bağlanır (`vh`): taşan eksen dikey olan. Uzun telefonda bugünkü ferah 24px korunur, kısa telefonda kendiliğinden ~17px'e iner. Sabit küçültme iki ucu da bozardı: uzun ekranda panel cılızlaşır, kısa ekranda taşma yine kalırdı. `min-height: 46px` pazarlık dışıdır — ölçek ne kadar inerse insin dokunma hedefi 44px eşiğinin altına düşmez; alt sınır oradan gelir, `clamp`in tabanından değil. */ .mm-links a { display: flex; align-items: center; min-height: 46px; padding: clamp(9px, 1.6vh, 14px) 4px; font-family: var(--font-display); font-size: clamp(1.05rem, 2.6vh, 1.5rem); line-height: 1.2; color: var(--olive-900); border-bottom: 1px solid var(--line-2); } .mm-links a:last-child { border-bottom: 0; } /* dönüşüm bloğu alta yaslanır: başparmak erişimi + panelin ölü alt yarısı kapanır. Kısa/yatay ekranda `auto` sıfıra düşer ve panel kaydırılır. */ .mm-foot { margin-top: auto; padding-top: clamp(16px, 2.4vh, 26px); border-top: 1px solid var(--line-2); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mm-foot .btn { width: 100%; justify-content: center; padding-inline: 12px; } /* karamel zeminde lacivert metin 2.83:1 idi (grafik/büyük metin eşiği 3:1 altı); panel linklerinin renk kuralı .btn-brass'ı özgüllükle eziyordu → beyaza sabitlendi */ .mobile-menu .mm-cta { color: #fff; } /* Telefon aksiyonu `.btn-ghost`tur: panelde ve alt sticky barda AYNI iş, aynı görünüm (halka kuralı için bkz. .sticky-bar .btn-ghost). İkon rengi metinden ayrılmaz — karamel ikon tonal butonda ikinci bir odak noktası üretiyordu. */ .mm-phone svg { color: currentColor; } .menu-scrim { position: fixed; inset: 0; z-index: 64; background: rgb(var(--olive-950-rgb) / 0.45); opacity: 0; visibility: hidden; /* kısayol `transition: 0.4s` visibility'yi de 0.4s'ye bağlıyordu → ayrık özellik %50'de dönüyor, perde açılışta 200ms tıklanamıyordu. Aynı sıfır-süre + gecikme deseni panelde olduğu gibi burada da geçerli. */ transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s; /* perde şeridine dokunup arkadaki sayfayı kaydırmak mümkün olmasın */ touch-action: none; } body.menu-open .menu-scrim { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease), visibility 0s linear 0s; } /* arka plan kaymasın. `overflow:hidden` KULLANILMAZ: html'de `overflow-x:clip` olduğu için taşma viewport'a taşınmaz, body kendi kaydırma konteynerine dönüşür ve içerik tepeye zıplar (aynı tuzak sticky header'ı da kırmıştı). Konum sabitleme + JS'in kaydırma ofsetini yazıp geri yüklemesi doğru desendir. */ body.menu-open { position: fixed; left: 0; right: 0; width: 100%; } /* Menü paneli yalnız menü DÜĞMESİ yokken kapatılır — ölçüt genişlik değildir. Eski kural "burger ≥821px'te yok" varsayıyordu; düğme artık çubuk sığmadığı her genişlikte çıkabildiği için o varsayım paneli masaüstünde ölü bırakıyordu (düğme görünür, basılınca hiçbir şey açılmaz). İki yol da kapsanır: ölçüm çalışıyorsa .nav-burger'in yokluğu, çalışmıyorsa 1250px yedek eşiğinin üstü. */ @media (min-width: 821px) { html.nav-olculdu:not(.nav-burger) .mobile-menu, html.nav-olculdu:not(.nav-burger) .menu-scrim { display: none; } html.nav-olculdu:not(.nav-burger) body.menu-open { position: static; } } @media (min-width: 1251px) { html:not(.nav-olculdu) .mobile-menu, html:not(.nav-olculdu) .menu-scrim { display: none; } html:not(.nav-olculdu) body.menu-open { position: static; } } /* ============================================================ HERO — full-bleed arka plan (ref-1: sağdan görsel, sola krem fade) ============================================================ */ .hero { position: relative; margin-top: calc(-1 * var(--nav-h)); min-height: 100vh; display: flex; align-items: flex-start; overflow: hidden; --hero-ink: var(--olive-900); --hero-muted: var(--olive-800); } /* sayfanın TEK authored motion anı: fotoğraf açılışta yerine oturur. Diğer her yerde jenerik .reveal var; zirve olan hero kendi hareketini hak eder. */ .hero-media { position: absolute; inset: 0; z-index: 0; animation: hero-settle 1.8s var(--ease-out) both; } @keyframes hero-settle { from { transform: scale(1.055); } to { transform: none; } } /* dikey %30: gökyüzü kadraja girsin (kullanıcı ekranında onaylı yön) */ .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; } /* Perde = METNİN ARKASINA DÜŞEN IŞIK, fotoğrafın üstüne sürülen boya DEĞİL. Önceki perde tek bir kolon-boyu rampaydı ve tepe opaklığı %90'dı. Sorun kontrast değildi (ölçüm: gereken en yüksek opaklık ~%50), KOMPOZİSYONDU: %50–85 arası opaklık, altında YAPI olan bir alana sürüldüğünde ne fotoğraf ne düz zemin üretir — villanın hayaleti kalır. Simülasyonla ölçüldü (gerçek piksel, 1440×900): metin bandında fotoğrafın kontrastının yalnız %54'ü, sol kenarda %40'ı hayatta kalıyordu; sonuç, gün batımını gri bir sise çeviren "puslu/kirli" bir yüzeydi. Üstteki ayrı %55'lik 180° katman da tam olarak hiçbir şey korumuyordu: altında yalnız boş gökyüzü vardı, onu da beyaza yakıyordu. Yeni yapı iki katmandır ve ikisi de FOTOĞRAFIN İÇİNDEKİ IŞIĞI taklit eder: 1) Yumuşak elips — ışık metin bloğunun üstüne düşer, kolonun tamamına değil. Koruma tam glifin olduğu yerde en güçlü, oradan her yöne söner. 2) Zayıf soldan-sağa açılma — kompozisyonu sola doğru sakinleştirir, sağdaki ahşap/iç ışık %84'ten sonra tamamen serbest kalır. Tepe opaklık %90 → %52; fotoğrafın hayatta kalımı %52 → %67 (ölçüm), gökyüzü ve deniz geri geldi. Kontrast marjı ölçüldü (5 masaüstü genişliğinde, glif kutularıyla): eyebrow en kötü 4.77 · h1 4.18 (eşik 3.0) · lead 4.99 — hepsi eşiğin üstünde. Perde rengi --cream değil --hero-light: bkz. token açıklaması. */ .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(68% 69% at 24% 49%, rgb(var(--hero-light-rgb) / 0.52) 0%, rgb(var(--hero-light-rgb) / 0.44) 50%, rgb(var(--hero-light-rgb) / 0) 100%), linear-gradient(93deg, rgb(var(--hero-light-rgb) / 0.10) 0%, rgb(var(--hero-light-rgb) / 0.26) 20%, rgb(var(--hero-light-rgb) / 0.40) 40%, rgb(var(--hero-light-rgb) / 0.34) 58%, rgb(var(--hero-light-rgb) / 0.14) 72%, rgb(var(--hero-light-rgb) / 0) 84%); } /* 100vh full-bleed hero'da içerik dikeyde ORTALANIR (üste yaslamak alt yarıyı ölü boşluk bırakıyordu); padding-top nav'ı temizler, optik merkez hafif aşağıda kalır (doğru). Mobil override: flex-end (aşağıda). */ .hero-content { position: relative; z-index: 3; width: 100%; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding-top: calc(var(--nav-h) + clamp(22px, 4vh, 52px)); padding-bottom: clamp(32px, 4vh, 52px); } /* Kolon ve h1 birlikte akışkan büyür — "Yaşamak isteyeceğiniz" satırı ~10×font-size px ister: h1 4.3vw (satır ≈ 42.8vw) + kolon 48vw → her genişlikte ~5vw pay = 2 satır GARANTİ, 3 satır istif imkânsız. Tavan 4.5rem/72px = sektör normu (Vantara canlı ölçüm: 885px'te bile 62px). Kuyruk kontrastı için scrim durakları %4 sağa kaydırıldı (yukarıda): 72px kuyruk 1440'ta ~0.51, 1920'de ~0.39 krem altında. */ .hero-inner { max-width: clamp(600px, 64vw, 1060px); } /* h1 sistemin GERÇEK display katına döner. Önceden hero'ya özel küçük ölçek (4.3vw/4.5rem) vardı: 1280px'te 55px render ediyordu — aynı sayfadaki bölüm h2'si (56px) ile aynı, yani ana başlık alt başlıktan küçüktü. Tavan artık sistemin kendi display token tavanı (5.6rem). İki satır garantisi: "Yaşamak isteyeceğiniz" ≈ 9.9 × font-size ister → 6vw × 9.9 = 59.4vw, kolon 64vw → her genişlikte ~4.6vw pay. Mobil taban 2.5rem korundu (6vw ancak 667px'te tabanı geçer, yani ≤667px telefonlarda ölçü bire bir eskisi). Harf aralığı -0.022em: DESIGN.md'nin display spec'i (-0.02em) — display katına çıkınca -0.015em gevşek kalıyor. */ .hero h1 { margin: 18px 0 0; color: var(--hero-ink); font-size: clamp(2.5rem, 6vw, 5.6rem); line-height: 1.03; letter-spacing: -0.022em; } /* İmza kelimesi hero'da kendi registerine çıkar. Paylaşılan `h1 em` 380'dir: italiğin optik fazlalığını dengelemek için romandan (430) bir tık HAFİF — düz kâğıt üstündeki 9 bölüm h2'sinde doğru karar. Fotoğrafın üstünde değil: orada ince gövdeler dokuya yeniliyor ve sayfanın EN önemli kelimesi, alt bölüm başlıklarıyla birebir aynı jesti kullanıp onlardan hafif kalıyordu. 430 = çevresindeki roman glifle aynı ağırlık. Ölçüldü: renk değişmediği için kontrast aynı (4.80:1); 470 denendi, bold-italiğe kayıp Fraunces'in kalın/ince kontrastını (pahalı duran şey) düzleştiriyor. Kapsam bilerek yalnız hero — bu, aynı anda hiyerarşi farkını da kuran şeydir. */ .hero h1 em { font-weight: 430; } .hero .lead { margin-top: 28px; font-size: clamp(1.12rem, 0.9vw + 0.55rem, 1.45rem); color: var(--hero-muted); max-width: 42ch; } /* hero eyebrow'un çizgisi display ölçeğine karşı ayakta kalsın (yalnız hero'da) */ .hero .eyebrow::before { width: 56px; } /* hero arama çubuğu */ /* NOT: hero-search'e backdrop-filter EKLENMEZ — üst-öğedeki filter/transform, içindeki özel açılır menünün (position:fixed .cs-panel) konumunu bozar. */ .hero-search { margin-top: 36px; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line-2); padding: 10px; position: relative; z-index: 4; max-width: 760px; /* kolon 1060'a kadar büyürken arama çubuğu başlıkla orantılı kalsın */ } .hs-tabs { display: flex; gap: 6px; padding: 4px 4px 12px; } .hs-tab { padding: 11px 20px; border-radius: 999px; font-weight: 600; font-size: var(--fs-small); color: var(--olive-700); transition: background 0.25s, color 0.25s; } /* pasif sekmenin hover geri bildirimi yoktu. Zemin --card (beyaza yakın) olduğu için şeffaf ghost erir (sticky-bar dersi) → sistemin kendi "seçenek hover" deseni kullanılır, .cs-opt:hover ile birebir aynı çift: paper-2 dolgu + olive-900 mürekkep. */ .hs-tab:hover:not(.active) { background: var(--paper-2); color: var(--olive-900); } .hs-tab.active { background: var(--olive-800); color: var(--paper); } .hs-fields { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 8px; align-items: stretch; } .hs-field { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 8px 16px; border-radius: var(--r-sm); background: var(--paper-2); transition: box-shadow 0.25s; } .hs-field:hover { box-shadow: inset 0 0 0 1.5px var(--line); } .hs-field label { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } /* Alanın görünür yüzeyi ~61px yüksekti ama tıklanabilir olan yalnız 24px'lik değer satırıydı: ÜSTÜNDE 29px ölü alan vardı (etikete dokunmak hiçbir şey yapmıyordu) — mobilde hero'nun birincil etkileşimi. Tetikleyici görünmez bir katmanla alanın tamamını kaplar; menü konumu tetikleyicinin kendi kutusundan hesaplandığı için açılır panelin hizası değişmez. (Etiket ayrıca JS'te tetikleyiciye bağlandı.) */ .hs-field .cs { position: static; } .hs-field .cs-trigger::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-sm); } .hs-field select { border: none; background: transparent; font-weight: 600; font-size: var(--fs-small); color: var(--olive-900); outline: none; width: 100%; -webkit-appearance: none; appearance: none; cursor: pointer; } .hs-submit { align-self: stretch; } /* Zemin eskiden `linear-gradient(135deg, var(--brass), var(--brass-600))` idi; gradyanın AÇIK ucu (--brass) metinle 2.93:1 veriyordu — ikon-only hâlinde bile grafik nesne eşiğini (3:1) geçmiyordu. Paylaşılan .btn-brass bileşeni zaten düz dolgu + #fff kullanıyor; bu tekil uygulama ona hizalandı → tüm yüzey 5.26:1. */ /* Buton ikon + görünür "Ara" etiketi taşır (erişilebilir ad görünür metinden gelir, aria-label'a gerek yok); grid-auto-flow:column ikisini yan yana dizer. `justify-content: center` ŞART, dekoratif değil: grid'in "Stretch auto Tracks" adımı (CSS Grid §12.8) justify-content `normal`/`stretch` iken auto track'leri BOŞ ALANI EŞİT PAYLAŞTIRARAK büyütür. Masaüstünde track buton içeriğine göre ölçüldüğü için boş alan yoktu; mobilde buton `grid-column: 1/-1` ile tam genişliğe çıkınca 328px iki track'e 133/137 diye bölündü ve `place-items:center` ikon ile etiketi KENDİ track'lerinin ortasına koydu → aralarında 10px gap yerine 123px boşluk. `center` track'leri max-content'te tutar, ikisi tek grup olarak ortalanır. */ .hs-submit button { height: 100%; width: 100%; min-height: 58px; padding: 0 24px; border-radius: var(--r-sm); background: var(--brass-600); color: #fff; display: grid; grid-auto-flow: column; place-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: var(--fs-small); box-shadow: var(--shadow-brass); transition: transform 0.35s var(--ease); } .hs-submit button:hover { transform: translateY(-2px); } .hs-submit button:active { transform: translateY(0); } .hs-submit svg { width: 20px; height: 20px; } /* ============================================================ ÖZEL AÇILIR MENÜ (native `i `.cs`ye çevirir) TALEP FORMUNDA kutusuz kalıyordu: `.cs-trigger`in kutu görünümü yalnız `.field` (değerleme formu) ve `.hs-field` (hero arama) altında tanımlıydı. Sonuç, "Gayrimenkul türü" ve "İl" — formun iki eksen alanı — 27px'lik düz yazı gibi dururken yanlarındaki "Ad Soyad" 54px'lik halkalı kutuydu; ikisinin tıklanabilir olduğu ekrandan okunmuyordu. Ölçüler `.tf-alan input`in AYNISI: aynı dolgu, aynı köşe, aynı halka, aynı odak. */ .tf-alan .cs-trigger { padding: 12px 14px; border-radius: var(--r-sm); background: var(--card); border: 1.5px solid var(--line-control, var(--line)); transition: border-color 0.2s, box-shadow 0.2s; } .tf-alan .cs-value { font-weight: 500; } .tf-alan .cs.open .cs-trigger, .tf-alan .cs-trigger:focus-visible { border-color: var(--brass-600); box-shadow: 0 0 0 3px rgb(var(--brass-600-rgb) / 0.12); outline: none; } .tf-alan-hata .cs-trigger { border-color: var(--tf-hata); } .tf-sonekli { position: relative; display: flex; align-items: center; } .tf-sonekli input { padding-right: 44px; } .tf-sonek { position: absolute; right: 14px; color: var(--muted); font-size: var(--fs-small); pointer-events: none; } /* Birim seçici (m²/Dönüm) alan kutusunun İÇİNDE durur — ayrı bir "Birim" satırı değil (TALEP-SEMASI §1b). Kutu artık sarmalayıcı `.tf-sonekli-secim`: içteki input kendi kenarlığını bırakır, seçici alanın sağ ucuna gömülür (fiyat + para birimi kutularındaki "değer + birim tek kutu" deseni). `.tf-alan` öneki `.tf-alan input/select`in genel kutu biçimini burada ezmek için gerekli. */ .tf-alan .tf-sonekli-secim { border: 1.5px solid var(--line-control, var(--line)); border-radius: var(--r-sm); background: var(--card); transition: border-color 0.2s, box-shadow 0.2s; } .tf-alan .tf-sonekli-secim:focus-within { border-color: var(--brass-600); box-shadow: 0 0 0 3px rgb(var(--brass-600-rgb) / 0.12); } .tf-alan .tf-sonekli-secim input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding-right: 10px; } .tf-alan .tf-sonekli-secim input:focus { border: 0; box-shadow: none; } .tf-alan .tf-sonek-secim { /* Native `