/* ═══════════════════════════════════════════════════════════════════════ HAYAT MAKKAH · ORTAK ZEMİN ======================================================================= Bu dosyada YALNIZCA şunlar bulunur: · renk ve ölçü token'ları (açık / koyu tema) · tarayıcı sıfırlaması · tipografi yardımcıları (.srf .kap .sayi .ust-etk .gvd) · erişilebilirlik (.atla .gizli-gorsel · hareket azaltma) Burada BULUNMAZ: hero, bölüm, kart, form, footer gibi içerik bileşenleri. Onlar kendi dosyalarında yaşar (ör. assets/css/hero.css) ve buradaki token'ları kullanır. Navigasyon da ayrıdır: assets/css/nav.css ═════════════════════════════════════════════════════════════════════ */ :root{ /* BÖLÜM BAŞLIĞI — 25 Ağu 2026. Ölçüldü: altı bölümde altı ayrı başlık boyu vardı (24 · 32 · 43 · 46 · 48 · 57 px) ve biri ortalıydı. Başlık ile giriş metni arası 34–37 px, metin 640 px'te kesilip sağdaki 800 px boş kalıyordu. Tek ölçek + iki sütunlu başlık: boş yarı dolar, blok kısalır. Bölüm kendi başlık boyunu yazmaz. */ --blm-bsl: clamp(1.85rem, 2.6vw, 2.5rem); --blm-bsl-ara: clamp(.7rem, 1vw, .95rem); --blm-bas-oluk: clamp(1.5rem, 4vw, 3.5rem); /* Başlık bloğu ile bölümün içeriği arasındaki nefes. Ortalamaya geçerken düşmüştü: 360 turda başlık kartlara sıfır mesafede kalıyordu (ölçüldü: 0 px). Üç bölüm de buradan besleniyor. */ --blm-bas-alt: clamp(2rem, 4vw, 3.25rem); /* ═══ TİPOGRAFİ ÖLÇEĞİ ═══ 25 Ağu 2026, Beyefendi: "textler her yerde aynı olmalı". Ölçüldü: kaynakta 46 FARKLI font-size değeri, 86 yerde. Gövde metni 7, küçük etiket 9, buton 9 ayrı boydaydı. Artık altı basamak var; bir bölüm bunların dışına çıkarsa site yine dağılır. */ --yz-ust: clamp(1.35rem, 1.9vw, 1.65rem); /* öne çıkan veri ~26px */ --yz-alt: clamp(1.1rem, 1.45vw, 1.3rem); /* kart / alt başlık ~21px */ --yz-gir: clamp(1rem, 1.15vw, 1.075rem); /* bölüm girişi ~17px */ --yz-gvd: 1rem; /* gövde 16px */ --yz-dgm: .9375rem; /* düğme · bağlantı 15px */ --yz-kck: .8125rem; /* ikincil · not 13px */ --yz-etk: .6875rem; /* üst etiket · birim 11px */ --sy-bsl: 1.08; --sy-gvd: 1.62; --sy-sik: 1.4; /* ═══ YARIÇAP ═══ 26 farklı değer vardı (2px'ten 2.5rem'e). Dört basamak. */ --yr-s: .5rem; --yr-m: .875rem; --yr-l: 1.5rem; --yr-xl: 2rem; --yr-tam: 999px; /* BÖLÜM RİTMİ — 25 Ağu 2026, Beyefendi: "section boşlukları çok fazla, tüm siteyi eşitle". Ölçüldü: kök dolgular 64–144 px arasında savruluyordu, komşu bölümler arası 72 px ile 256 px arasında değişiyordu. Artık her bölüm TEK değerden besleniyor; bir bölümün kendi dolgusunu ayrıca yazması ritmi bozar. */ --blm-pd: clamp(3rem, 5.5vw, 4.75rem); /* ═══ BLOK BOŞLUK ÖLÇEĞİ ═══ 27 Ağu 2026, Beyefendi: "gapları tüm sitede eşitle". Ölçüldü: bölüm ızgaralarında 9 ayrı clamp formülü vardı (72/26 · 37 · 45/38 · 39 · 26 · 28 · 34 · 42 · 65 px) ve her parça kendi özel token'ını yazıyordu. Artık dört basamak var; parçaların özel token'ları (--vil-bo · --tur-bo · --tlp-*) bunlardan türer. Bir parça yeni bir clamp yazarsa ritim yine dağılır. 1440'ta: bo-1 18 · bo-2 24 · bo-3 37 · bo-4 54 · kart 32 px */ --bo-1: clamp(.75rem, 1.35vw, 1.15rem); /* kart içi satır arası */ --bo-2: clamp(1.05rem, 1.9vw, 1.5rem); /* alt blok ayrımı */ --bo-3: clamp(1.5rem, 2.6vw, 2.4rem); /* ızgara oluğu — referans */ --bo-4: clamp(2.1rem, 4vw, 3.4rem); /* iki sütunlu büyük ayrım */ /* Kart iç dolgusu. Ölçüldü: üç ayrı değer vardı (hukuk 42 · villa 29 · form 32). Kutulu her yüzey buradan beslenir. */ --kart-pd: clamp(1.4rem, 2.4vw, 2rem); /* SAYFA ÇERÇEVESİ — yüzen kutuların (navigasyon şeridi, hero kutusu, villa slaytı) ekran kenarına uzaklığı. Üçü de buradan beslenir; biri ayrı bir değer yazarsa hizalar birbirinden kopar. */ --cerceve: clamp(.5rem, 1.2vw, 1rem); /* CONTAINER HATTI — .kap'ın içerik kenarının ekrana uzaklığı. .kap kutusu (--serit-w + 2*--serit-kenar) genişliğinde ortalanır ve (--serit-kenar + --serit-pd) kadar iç dolgu alır; içerik hattı bu ikisinin toplamıdır. Tam kanat (full-bleed) bir öğe container hizasına oturacaksa kenar payı olarak BUNU kullanır — yoksa hiza navigasyon şeridinden kopar. */ --kap-kutu: calc(var(--serit-w) + 2 * var(--serit-kenar)); --kap-pay: calc(max(0px, (100% - var(--kap-kutu)) / 2) + var(--serit-kenar) + var(--serit-pd)); /* ── Hicaz Sessizliği paleti ── */ --kum:#E9E2D6; --keten:#ECE6DA; --murekkep:#1E2522; --gece:#0B0F0E; --zeytin:#7F8E73; --toprak:#AA7651; /* ── semantik (açık tema) ── */ --z1:#ECE6DA; /* ana zemin */ --z2:#E2DACA; /* ikinci yüzey */ --z3:#D8CFBC; /* üçüncü yüzey */ --mrk:#1B211E; /* birincil metin */ --mrk2:#5A625B; /* ikincil metin */ --mrk3:#7C8378; /* üçüncül metin */ --cizgi:rgba(27,33,30,.16); --cizgi2:rgba(27,33,30,.08); --aksan:#5F6E54; /* zeytin — açık zeminde koyulaştırıldı */ --aksan-yzy:#7F8E73; --toprak-mtn:#8A5A38; /* toprak — metin için koyulaştırıldı */ --cam:rgba(236,230,218,.72); --ust:rgba(255,255,255,.55); /* üst ışık */ --nav-h:6.25rem; /* yüzen kapsülün kapladığı üst şerit */ /* Üst şeridin ölçüleri — navigasyon ve hero AYNI hizayı paylaşsın diye burada durur. Hero'daki büyük yazı da bu genişlikten başlar. */ --serit-w:88rem; /* açılıştaki kapsül genişliği */ --serit-kenar:clamp(.9rem,2.4vw,2rem); /* ekran kenarına uzaklık */ --serit-pd:clamp(.7rem,1.5vw,1.15rem); /* kapsülün iç yan boşluğu */ --egri:cubic-bezier(.22,1,.36,1); --mikro:220ms; --gecis:520ms; --sahne:900ms; --kap:79rem; --pd:clamp(1.25rem,4vw,3rem); } html[data-tema="koyu"]{ --z1:#121715; --z2:#1B2220; --z3:#242C29; --mrk:#EDE7DB; --mrk2:#A9B0A6; --mrk3:#848B82; --cizgi:rgba(237,231,219,.18); --cizgi2:rgba(237,231,219,.09); --aksan:#9BAC8D; --aksan-yzy:#7F8E73; --toprak-mtn:#C79366; --cam:rgba(18,23,21,.72); --ust:rgba(255,255,255,.06); color-scheme:dark; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block-start:calc(var(--nav-h) + 1rem)} body{ margin:0;background:var(--z1);color:var(--mrk); font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; font-weight:400;line-height:1.62;letter-spacing:-.005em; font-optical-sizing:auto;-webkit-font-smoothing:antialiased; transition:background-color var(--gecis) var(--egri),color var(--gecis) var(--egri); overflow-x:hidden; } html[lang="ar"] body{font-family:"Noto Kufi Arabic","Manrope",sans-serif;line-height:1.95;letter-spacing:0} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--aksan);outline-offset:3px;border-radius:2px} ::selection{background:var(--aksan);color:var(--z1)} /* ── tipografi ── */ /* 28 Ağu 2026 · Instrument Serif ARTIK İNDİRİLMİYOR — sayfada hiçbir öğe .srf kullanmıyordu (ölçüldü: kullanılan tek aile Manrope). Kural silinmedi ama kullanılırsa Georgia'ya düşer. Tek yazı tipi kararı: Manrope. */ .srf{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.015em;line-height:1.08} html[lang="ar"] .srf{font-family:"Noto Kufi Arabic",serif;line-height:1.45;letter-spacing:0} h1,h2,h3{margin:0;font-weight:inherit} .d1{font-size:clamp(2.6rem,7.4vw,6rem)} .d2{font-size:clamp(2rem,4.6vw,3.7rem)} .d3{font-size:clamp(1.4rem,2.4vw,2.05rem)} .ust-etk{ font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--mrk3);display:flex;align-items:center;gap:.7rem; } html[lang="ar"] .ust-etk{letter-spacing:0;text-transform:none} .ust-etk::before{content:"";inline-size:1.75rem;block-size:1px;background:currentColor;opacity:.5;flex:none} .gvd{color:var(--mrk2);font-size:clamp(.98rem,1.05vw,1.075rem);max-inline-size:60ch} .sayi{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";unicode-bidi:isolate} /* ── yerleşim ── */ .kap{ /* Container NAVİGASYON ŞERİDİYLE hizalıdır — sitede tek bir sol kenar var. Şeridin içerik kenarı: ekran kenarı (--serit-kenar) + kapsülün iç boşluğu (--serit-pd). Genişlik de kapsülün iç genişliğidir (--serit-w eksi iki iç boşluk). Böylece dar ekranda kenar payı, geniş ekranda tavan genişlik devreye girer ve hizalama her ölçüde şeridi takip eder. Eski 79rem'lik --kap ile şerit 38 px kayıyordu (ölçüldü: 88 px'e 50 px). max-inline-size DIŞ kutunun tavanıdır (box-sizing:border-box → iç boşluk dahil). Kapsülün iç genişliğini yazmak yanlıştı: kutu daralıyor, üstüne bir de iç boşluk biniyor ve metin 85 px'e kaçıyordu. Doğrusu kapsül genişliği + iki kenar payı; ortalandığında içerik kenarı tam şeridin iç kenarına oturur (1440'ta 50 px, 1920'de 274 px, 390'da 26 px). */ inline-size:100%; max-inline-size:calc(var(--serit-w) + 2 * var(--serit-kenar)); margin-inline:auto; padding-inline:calc(var(--serit-kenar) + var(--serit-pd)); } /* ── erişilebilirlik ── */ .gizli-gorsel{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .atla{position:absolute;inset-block-start:-100%;inset-inline-start:1rem;z-index:200;padding:.7rem 1.1rem;border-radius:0 0 .5rem .5rem;background:var(--mrk);color:var(--z1);font-size:.85rem;font-weight:600} .atla:focus{inset-block-start:0} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* ═══════════════════════════════════════════════════════════════════ VURGU — animasyonlu gradient yazı ------------------------------------------------------------------- 25 Ağu 2026, Beyefendi: "gradient text de olsun animasyonlu, dark ve light'a uygun; tüm başlıklarda vurucu noktalarda kullanalım." Metni PARÇALAMADAN çalışır: renk geçişi harflerin ortasında olur, yani "şu kelime renkli" demek için başlığı iki ayrı öğeye bölmek gerekmez. Bölmek zorunda kalsaydık her dil için ayrı kesim noktası ve ayrı sözlük anahtarı gerekirdi; Arapçada sözcük sırası değiştiği için o kesim tutmazdı. İki uç da MÜREKKEP rengindedir (currentColor), ortası toprak ve zeytin. Böylece açık/koyu temada okunurluk uçlardan gelir; token'lar tema ile birlikte döner, ayrı koyu sürüm yazmaya gerek yoktur. .vrg-ac → koyu görsel üstündeki açık metin için (hero). Orada currentColor zaten açık; toprak token'ı koyu kaldığı için ayrı, aydınlatılmış duraklar kullanılır. Desteklemeyen tarayıcıda: color miras alınır, düz mürekkep görünür. ═════════════════════════════════════════════════════════════════ */ .vrg{ /* Duraklar currentColor DEĞİL, kendi değişkenlerinden gelir. currentColor kullanmak sessiz bir tuzaktı: aşağıdaki -webkit-text-fill-color:transparent ile birlikte color da transparent yapılınca currentColor da transparent'a çözülüyor ve gradient'in "mürekkep" durakları GÖRÜNMEZ oluyordu. Renk bandının dışında kalan her harf zeminden okunuyordu — hero'da "Yer" kelimesi tamamen kayboldu. (Ölçüldü: rgba(0,0,0,0) 0%.) */ --vrg-mrk:var(--mrk); --vrg-t:var(--toprak-mtn); --vrg-a:var(--aksan); background-image:linear-gradient(100deg, var(--vrg-mrk) 0%, var(--vrg-mrk) 34%, var(--vrg-t) 46%, var(--vrg-a) 56%, var(--vrg-mrk) 68%, var(--vrg-mrk) 100%); background-size:320% 100%; background-position:0% 50%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; /* Boya kutusu harflerin TAMAMINI örtmeli. Başlıklarda satır yüksekliği 1'e yakın; ğ'nin şapkası, ü'nün noktaları ve alt uzantılar içerik kutusunun dışına taşıyor ve boyasız kalıyordu — "ğ nerede?". Dolgu kutuyu büyütür, negatif kenar boşluğu yerleşimi bozmaz. */ padding-block:.16em; margin-block:-.16em; animation:vrg-akis 9s var(--egri) infinite alternate; } .vrg-ac{ /* Koyu görsel üstündeki açık metin: mürekkep krem, ara duraklar aydınlatılmış. Tema token'ları burada kullanılmaz; hero'nun zemini temayla değişmiyor. */ --vrg-mrk:#F3EEE4; --vrg-t:#E9C39B; --vrg-a:#CBD8BC; } @keyframes vrg-akis{ from{background-position:0% 50%} to{background-position:100% 50%} } @media (prefers-reduced-motion:reduce){ .vrg{ animation:none; background-position:38% 50%; } }