/* ═══════════════════════════════════════════════════════════════════ SİLUET ŞERİDİ · mesafeler ------------------------------------------------------------------- Şerit sayfanın kendi zemininde durur; görselin alfası gerçek olduğu için arkasına hiçbir şey boyanmaz, tema değişince şerit de döner. KÜNYENİN ZEMİNİ VAR. Alternatif sayfasında zemin gerekmiyordu — orada arka plan bomboş. Sitede künye siluetin ve komşu bölümlerin üstüne düşüyor, zeminsiz yazı okunmuyor. Zemin `--cam` + bulanıklık: kutu çerçevesi ya da gölge değil, arkayı yumuşatan bir cam. ═══════════════════════════════════════════════════════════════════ */ /* Şerit bir bölüm değil, iki bölüm arasında akan bir bant: tam bölüm payı fazla geliyordu. Payın yarısı yeterli; ritmi bozmadan sayfayı kısaltıyor. */ /* ÜST PAY ALT PAYDAN DAHA DAR: şerit üstteki beyan bölümüne yaslanıyor, altta ise sıradaki bölüme nefes bırakıyor. Tek bir değer verildiğinde üstte gereğinden fazla boşluk kalıyordu. */ .sil{padding-block:var(--blm-pd)} /* GÖRSELİN ŞEFFAF PAYI — 27 Ağu 2026. Ölçüldü: siluet-alt-bilgi-v2.webp 2171×724 px ve tuvalinin üstünde 29, altında 24 piksel tamamen saydam sıra var. Bölüm dolgusu 76/76 olduğu hâlde göz komşu kavşaklardan ~18 ve ~15 px daha geniş görüyordu: kutu, mürekkepten büyük. Görseli kırpmak yerine pay geri alınıyor — çünkü dakika etiketleri (.sil-im) yüzde konumlandırmayla bu tuvale oturuyor; kırpma hepsini kaydırırdı. Yüzde değerler görselin genişliğine oranlıdır: üst 29/724 * (724/2171) = %1,336 alt 24/724 * (724/2171) = %1,106 */ .sil-serit{margin-block:-1.336% -1.106%} .sil{position:relative} .sil-sahne{position:relative} /* Etiketlerin çıpası TUVAL — künye sahnenin yüksekliğini değiştirse bile işaretler görselin neresindeyse orada kalır. */ .sil-tuval{position:relative;isolation:isolate;container-type:inline-size} /* ── başlık ──────────────────────────────────────────────────── Bu alanın başlığı. Şeridin sol üstündeki boşluğu kapatır ve bölümün iddiasını TEK SATIRDA söyler. Mutlak konumlu ve tıklama geçirgen: altındaki bölge tetikleyicisini bölmemesi gerekiyor. Rakam sıfırdan yukarı sayıyor; sayarken satırın kaymaması için `tabular-nums` ve iki karakterlik en az genişlik verildi. */ .sil-bsl{ position:absolute;z-index:4;pointer-events:none;margin:0; inset-block-start:calc(var(--blm-pd) * .1); inset-inline-start:var(--kap-pay); color:var(--mrk);font-family:Manrope,ui-sans-serif,sans-serif; font-weight:800;letter-spacing:-.035em;line-height:1.06; /* Sitenin öteki bölüm başlıklarıyla AYNI ölçü: ayrı bir değer yazmak bu başlığı ötekilerden küçük bırakıyordu. */ font-size:var(--blm-bsl); line-height:1.05;text-wrap:balance; } /* Sayaç kaldırıldı: rakam artık sabit 25. Genişlik titremesine karşı ayrılan min-inline-size da kalktı — kalsaydı "yol:" ile sayı arasında boş bir şerit bırakıyordu. */ /* Sayaç 0'dan 25'e sayarken rakam bir haneden iki haneye geçiyor; yer peşin ayrılmazsa "dakika" her turda sağa sola oynar. Ölçü ÖLÇÜLDÜ, tahmin edilmedi: 37.44px punto ile iki tabular hane 43.8px eder → 43.8/37.44 = 1.17em. Üste yuvarlanıp 1.18em yazıldı ki alt piksel yuvarlaması kutuyu bir tık dar bırakıp titretmesin. 2ch DEĞİL: ch, yazı tipinin ORANTILI "0" genişliğidir (25.23px), oysa tabular-nums başka bir glif setine geçiyor ve hane 23.22px. Aradaki 6.65px, ortalanınca iki yana 3.3px'lik görünür boşluk bırakıyordu. em kullanıldı çünkü başlık clamp() ile ölçekleniyor; piksel yazılsaydı dar ekranda yeniden bozulurdu. */ .sil-bsl i{ font-style:normal;font-variant-numeric:tabular-nums; display:inline-block;min-inline-size:1.18em;text-align:center; } .sil-bsl em{font-style:normal;color:var(--toprak-mtn)} /* ── odak ────────────────────────────────────────────────────── HİÇBİR YER SOLMUYOR. Önce çevreyi soluklaştırıp odağı bırakmıştım; sonuç siyah-beyaz bir fotoğraf gibi duruyordu ve görseli öldürüyordu. Şimdi tam tersi: taban görsel her zaman tam renkli kalıyor, ETKİN BÖLGE onun üstüne bindirilen ışıklı bir kopyayla öne çıkıyor. Maske de ters çevrildi: merkez opak, dışarısı saydam — yani ışıklı kopya yalnız odak dairesinde görünüyor, gerisine hiç dokunulmuyor. Karartma yok, doygunluk kaybı yok; yalnız seçilen yer parlıyor. */ .sil-isik{ position:absolute;inset:0;z-index:1;pointer-events:none; opacity:0; transition:opacity 420ms var(--egri),--px 560ms var(--egri),--py 560ms var(--egri); filter:saturate(1.28) contrast(1.06) brightness(1.05); --px:50%; --py:50%; --r:24cqi; -webkit-mask-image:radial-gradient(circle var(--r) at var(--px) var(--py), #000 0%, rgba(0,0,0,.9) 38%, rgba(0,0,0,.35) 70%, transparent 100%); mask-image:radial-gradient(circle var(--r) at var(--px) var(--py), #000 0%, rgba(0,0,0,.9) 38%, rgba(0,0,0,.35) 70%, transparent 100%); } /* Koyu temada parlaklık biraz daha yüksek: karanlık zeminde aynı artış daha az fark ediliyor. */ html[data-tema="koyu"] .sil-isik{filter:saturate(1.3) contrast(1.05) brightness(1.16)} .sil-sahne[data-odak] .sil-isik{opacity:1} /* ── işaret ──────────────────────────────────────────────────── Rakam hem bilgi hem düğme: ayrı bir nokta işaretine gerek yok. */ .sil-im{ position:absolute;z-index:2; inset-block-end:var(--y);inset-inline-start:var(--x); transform:translate(-50%,50%); appearance:none;border:0;background:none;padding:.3rem .4rem;cursor:pointer; display:block;font:inherit;color:var(--mrk); transition:opacity 380ms var(--egri); } /* Rakam + birim tek kutu: büyüme bu kutuya uygulanır, ikisi aralarındaki boşlukla BİRLİKTE ölçeklenir. */ .sil-yzi{ display:flex;align-items:baseline;gap:.18rem; transform-origin:bottom center; transition:transform 380ms var(--egri); /* PUNTO BURADA. Önce .sil-im b üzerindeydi ve "dk" birimi .sil-im i{font-size:.6em} ile yazılıyordu; em EBEVEYNE göre çözülür, 'nin ebeveyni ise .sil-yzi (miras 16px) — birim 9.6px kalıyordu. bir KARDEŞ olduğu için 35px'ini 'ye hiç geçirmiyordu. Ölçü sarmalayıcıya alınınca ikisi tek kökten ölçekleniyor. */ /* Beyefendi düzenleyiciden 36px seçti (1440 px genişlikte). Tercih edilen değer o noktada tam 36'ya oturacak şekilde ayarlandı: .81rem + 1.6vw → 12.96 + 23.04 = 36.00 px. */ font-size:clamp(1.3rem, .81rem + 1.6vw, 2.3rem); } .sil-im b{ /* clamp içinde + çevresinde BOŞLUK ZORUNLU. ".65rem+1.4vw" geçersizdi: tarayıcı bildirimin tamamını düşürüyor, punto miras alınan 16px'te kalıyordu (ölçüldü: masaüstü ve mobilde ikisi de 16px). Ölçü aynı zamanda büyütüldü — Beyefendi "dk'lar daha büyük" dedi. */ font-size:1em;font-weight:800;letter-spacing:-.045em; line-height:1;font-variant-numeric:tabular-nums; } .sil-im i{ font-style:normal;font-size:.44em;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--mrk2); } .sil-im[data-pin] .sil-yzi{align-items:center} .sil-im[data-pin] i{ font-size:.72rem;font-weight:800;letter-spacing:.14em;color:var(--mrk);white-space:nowrap; } html[lang="ar"] .sil-im i{letter-spacing:0;text-transform:none} .sil-sahne[data-odak] .sil-im{opacity:.38} .sil-sahne[data-odak] .sil-im[data-etkin]{opacity:1} /* RAKAM VE BİRİM HİÇ BÜYÜMEZ. Ölçeklenen bir sayı okumayı bozuyor ve komşusuyla çakışma riski taşıyor; hareketin tamamı ALTTAKİ IŞIKTA. Sarmalayıcı yine duruyor — ikisini tek kutuda tutmak, birimin rakamdan ayrı davranmasını engelliyor. */ .sil-im:focus-visible{outline:2px solid var(--mrk);outline-offset:3px;border-radius:.35rem} /* ── ETKİN IŞIĞI ─────────────────────────────────────────────── Rakamın ALTINDA yanıp sönen bir ışık: ortada küçük bir çekirdek, çevresinde nefes alan bir hâle. Hâle gölge değil, radyal degrade — proje gölge kullanmıyor ve gölge zaten yönlü bir ışık taklidi olurdu; burada istenen, aşağıdan yükselen bir parıltı. */ /* NOKTA KENDİ ADRESİNDE. Önce işaretin İÇİNDEYDİ ve daima rakamın altına çakılıydı; artık sahnenin doğrudan çocuğu ve nx/ny ile bağımsız konumlanıyor — etiket bir yerde, işaret ettiği nokta başka yerde durabiliyor. */ .sil-nok{ position:absolute;z-index:2;pointer-events:none; inset-block-end:var(--ny);inset-inline-start:var(--nx); /* Boy TEK YERDEN: çekirdek bu ölçüde, hâle bunun altı katı. Üç ayrı sabit yazılsaydı biri değişince öteki ikisi geride kalırdı. */ --nok-boy:12px; /* Beyefendi düzenleyiciden seçti */ inline-size:var(--nok-boy);block-size:var(--nok-boy); /* --ndx: RAKAMA ortalama düzeltmesi. Etiket kutusu "40" + "DK"dan oluşuyor ve "DK" sağa taştığı için kutunun merkezi rakamın merkezinden sapıyor (ölçüldü: 1440'ta 12.8 px). Sapma YÜZDE olarak sabit değil — %1 (1440) → %2.4 (390) — bu yüzden veriye sabit bir kaydırma yazılamaz; betik her ölçümde piksel olarak hesaplar. nx yine serbest: bu kanal yalnız "kutu merkezi" ile "rakam merkezi" arasındaki farkı kapatır. */ transform:translate(-50%,50%) translateX(var(--ndx,0px)); display:grid;place-items:center;color:var(--toprak); opacity:0;transition:opacity 320ms var(--egri); } .sil-nok::before{ /* çekirdek */ content:"";grid-area:1/1;inline-size:var(--nok-boy);block-size:var(--nok-boy); border-radius:50%;background:currentColor; } .sil-nok::after{ /* hâle */ content:"";grid-area:1/1; inline-size:calc(var(--nok-boy) * 6);block-size:calc(var(--nok-boy) * 6);border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--toprak) 60%, transparent) 0%, color-mix(in srgb, var(--toprak) 22%, transparent) 38%, transparent 68%); opacity:0; } .sil-sahne[data-odak] .sil-nok[data-etkin]{opacity:1} .sil-sahne[data-odak] .sil-nok[data-etkin]::before{ animation:sil-cekirdek 2200ms ease-in-out infinite} .sil-sahne[data-odak] .sil-nok[data-etkin]::after{ animation:sil-isik 2200ms ease-in-out infinite} @keyframes sil-isik{ 0%,100%{opacity:.3;transform:scale(.72)} 50% {opacity:1; transform:scale(1.12)} } @keyframes sil-cekirdek{ 0%,100%{opacity:.65;transform:scale(.85)} 50% {opacity:1; transform:scale(1)} } /* yerleşke pini — hep görünür: "buradayız" kalıcı bilgidir */ .sil-pin{ position:absolute;z-index:2;pointer-events:none; inset-block-end:var(--ny);inset-inline-start:var(--nx); inline-size:1rem;block-size:1rem;transform:translate(-50%,50%); color:var(--mrk); } .sil-pin svg{inline-size:100%;block-size:auto;display:block; transform-origin:50% 85%; /* pin ucundan büyür: iğne yerinde kalsın */ } /* PİN, NOKTA GİBİ DAVRANIR. Normalde düz durur; yalnız üzerine gelince noktanın çekirdeğiyle AYNI ritimde (2200 ms) yanıp söner. Önce yalnız altındaki hâle canlanıyordu, pinin kendisi hiç kıpırdamıyordu — yerleşke ötekilerden farklı davranıyor gibi duruyordu. */ .sil-sahne[data-odak] .sil-pin[data-etkin] svg{ animation:sil-cekirdek 2200ms ease-in-out infinite; } /* Yerleşke pini de zıplamaz; altından aynı ışık yükselir. */ .sil-pin::after{ content:"";position:absolute;inset-block-start:105%;inset-inline-start:50%; inline-size:2.4rem;block-size:2.4rem;border-radius:50%; transform:translateX(-50%);pointer-events:none;opacity:0; background:radial-gradient(circle, color-mix(in srgb, var(--mrk) 34%, transparent) 0%, color-mix(in srgb, var(--mrk) 12%, transparent) 38%, transparent 68%); } .sil-sahne[data-odak] .sil-pin[data-etkin]::after{ animation:sil-isik 2200ms ease-in-out infinite} @media (prefers-reduced-motion:reduce){ .sil-sahne[data-odak] .sil-nok[data-etkin]::before, .sil-sahne[data-odak] .sil-nok[data-etkin]::after, .sil-sahne[data-odak] .sil-pin[data-etkin]::after{animation:none;opacity:.8} .sil-sahne[data-odak] .sil-pin[data-etkin] svg{animation:none} } /* ── BİLGİ KÜNYESİ ──────────────────────────────────────────── Görselin ÜSTÜNDE ama SABİT. Eski yüzen künye her durakta başka yere açılıyordu; göz onu kovalıyordu ve yeri her durak için ayrı ayarlanmak zorundaydı. Buradaki tek fark konumun hiç değişmemesi: içerik değişir, kutu kıpırdamaz. Yer ölçümle seçildi — %26–64 / %2–38 dikdörtgeni hem sanattan hem altı etiketten %0 dolu. Yükseklik peşin ayrılıyor ki en uzun cümle geldiğinde kutu büyümesin. */ .sil-satir{ position:absolute;z-index:3; /* Yatay yer ölçümle: üst bantta (y %3–29) etiketler x %7–13 (uçak), %65.6–71.6 (kule) ve %86.6–92.6 (Kâbe) aralıklarını tutuyor. Aradaki boş koridor %13–65.6; künye %16'dan başlayıp %52'de bitiyor. */ /* Kutu artık SOL KENARDAN değil MERKEZDEN çıpalı: aşağıdaki Makkah Gate yapısının merkezi %40.9'da (alfa kanalından ölçüldü) ve künye onunla aynı dikey eksende duruyor. */ inset-inline-start:var(--sx, 40.9%);inset-block-start:var(--sy, 1.5%); transform:translateX(-50%); /* DAHA GENİŞ = DAHA ALÇAK. 26rem'de açıklama cümlesi üç satıra düşüyor ve kutu %41.9'a kadar iniyordu; Makkah Gate etiketi %40.7'de başlıyor, ölçüldü: %1.2 çakışma. Kutuyu genişletmek cümleyi tek-iki satıra indiriyor ve yükseklik kendiliğinden düşüyor. */ inline-size:min(36%, 32rem); /* Kutunun kendisi TEK HÜCRELİ ızgara: iki içerik katmanı üst üste oturuyor. Sütun düzeni katmanların içine taşındı. */ display:grid; padding:.9rem 1.15rem 1rem; border-radius:var(--yr-l); background:var(--z3); background:color-mix(in srgb, var(--z3) 90%, transparent); -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25); border:1px solid color-mix(in srgb, var(--mrk) 7%, transparent); /* YÜKSEKLİK SABİT, min değil. Orta ekranda açıklama bir satır daha kırılınca kutu 113 → 133 px oluyordu ve alttaki etiketlere biniyordu (ölçüldü). Cümle iki satıra kırpılıyor, kutu hiç büyümüyor. */ /* 7.4rem orta ekranda Makkah Gate etiketine değiyordu (ölçüldü); kutu biraz alçaltılıp yukarı çekildi. */ block-size:6.9rem; /* EĞRİ ÖNEMLİ. --egri (cubic-bezier(.22,1,.36,1)) sert bir ease-out: açılışın ilk üçte birinde opaklık %90'a fırlıyor ve göz bunu yumuşak bir belirme değil PATLAMA olarak okuyor. Simetrik ease-in-out ile hem çıkış hem giriş eşit hızlanıp yavaşlıyor. */ } /* Katmanlar üst üste; geçiş yalnız onların opaklığında. */ .sil-st-kat{ grid-area:1/1; display:grid;grid-template-columns:max-content minmax(0,1fr); column-gap:1.05rem;row-gap:.05rem;align-items:start; opacity:0;pointer-events:none; transition:opacity 300ms cubic-bezier(.42,0,.58,1); } .sil-st-kat[data-on]{opacity:1} /* Süre yerine konum pini: sol sütun her durakta DOLU, düzen kaymıyor. */ .sil-st-dk[data-pin]{display:grid;place-items:center;color:var(--mrk)} .sil-st-dk[data-pin] svg{inline-size:1.5em;block-size:1.5em;display:block} .sil-st-dk{ grid-row:1 / span 3;align-self:center; /* GENİŞLİK SABİT. auto bırakılınca sütun içeriğe göre daralıyordu: "40dk" 2.48em, pin 1.95em — ad satırı duraklar arasında 20 px oynuyordu (ölçüldü). En geniş içeriğe kilitlendi. */ inline-size:2.5em; padding-inline-end:1.05rem; border-inline-end:1px solid var(--cizgi2); font-weight:800;font-size:clamp(1.6rem, 1.1rem + 1.5vw, 2.6rem); letter-spacing:-.03em;color:var(--toprak-mtn); font-variant-numeric:tabular-nums;white-space:nowrap; /* Yerleşkede süre yok; kutu boşken de yer korunsun ki alttaki ad satırı 3 px yukarı kaymasın (ölçüldü). */ line-height:1.05; } .sil-st-dk i{font-style:normal;font-size:.5em;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--mrk2); margin-inline-start:.22em} .sil-st-ad{grid-column:2;font-weight:800;font-size:clamp(1.05rem, .9rem + .5vw, 1.32rem); color:var(--mrk);letter-spacing:-.02em;line-height:1.2} .sil-st-alt{grid-column:2;font-size:var(--yz-kck);color:var(--mrk2); padding-block-end:.55rem} .sil-st-nicin{grid-column:2;font-size:var(--yz-kck);color:var(--mrk2);line-height:1.5; /* Aralık MARGIN değil PADDING: boşluk artık kutuların ARASINDA değil kutunun KENDİ İÇİNDE. Ayraç çizgisi de böylece kendi payının tam ortasında duruyor; margin ile çizgi payın dışında kalıyordu. */ padding-block-start:.55rem; border-block-start:1px solid var(--cizgi2);inline-size:100%; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;} /* ── dar ekran ───────────────────────────────────────────────── Künye şeridin ÜSTÜNDE yüzmez: 390 px'de hem taşıyor hem siluetin yarısını örtüyordu. Altta sabit bir yuvada açılır, yuva hep dolu durur ki ilk dokunuşta sayfa zıplamasın. */ @media (max-width:52rem){ /* Dar ekranda başlık akışa döner: mutlak dururken siluetin yarısını örtüyordu. */ .sil-bsl{position:static;inset:auto;margin-block-end:.9rem;padding-inline:var(--kap-pay)} /* Dar ekranda künye görselin ÜSTÜNDE DURAMAZ: şerit küçülünce panel etiketlerin üstüne biniyor. Bu kural 62rem'e kadar geçerli — 860 px'de hâlâ üstteyken Hayat Makkah ve Makkah Gate ile çakışıyordu (ölçüldü). */ .sil-satir{ position:static;inset:auto;inline-size:100%; justify-items:start;text-align:start; /* Dar ekranda sabit yükseklik dayatılmaz: kutu tam genişlikte ve akışta, içerik ne kadarsa o kadar yer kaplar. */ block-size:auto;min-block-size:7.6rem; margin-block-start:clamp(1rem,3vw,1.6rem); } .sil-st-nicin{max-inline-size:36ch;text-align:center} /* Dar ekranda altı işaret 350 px'e sığmak zorunda. Ölçüldü: 42 px'lik işaretle kule (%76) ile Kâbe (%88) 1 px değiyordu — aralarında yalnız %12, yani 42 px var. Punto ve iç pay küçülünce işaret 35 px'e iniyor. */ .sil-im{padding:.12rem .1rem;gap:.12rem} /* Dar ekranda da bozuktu; düzeltilirken 16px'in ALTINA düşmemesi için alt sınır yükseltildi — yoksa "düzeltme" etiketleri küçültürdü. */ .sil-yzi{font-size:clamp(1rem, .7rem + 1.4vw, 1.35rem)} /* Dar ekranda oran DAHA YÜKSEK olmalı: kök punto zaten küçük, aynı .44 oranı birimi 7.3px'e düşürüyordu (masaüstünde 15.4px). */ .sil-im i{font-size:.56em} /* Yerleşke ADI dar ekranda gizlenir: 390 px'de o etiket ~90 px genişlikte ve iki komşu rakamın üstüne biniyordu (ölçüldü: 3 çakışma). Pin kalır, ad zaten alttaki yuvada yazıyor. */ .sil-im[data-pin] i{display:none} .sil-im[data-pin]{padding:0} /* Pin artık sahnenin çocuğu; satır içi kutu sorunu ortadan kalktı, dar ekranda yalnız küçültülüyor. Yerleşke ADI gizlendiği için o işaret düğmesi de görünmez kalıyor — dokunuş zaten sahneden okunuyor. */ .sil-pin{inline-size:.8rem;block-size:.8rem} /* Dar ekranda hâle bilerek kapalı: 339 px'lik şeritte altı katı parıltı komşu etiketlerin altına giriyor. */ .sil-nok{--nok-boy:.32rem} .sil-nok::after{inline-size:.32rem;block-size:.32rem} } /* Künye 62rem altında görselin üstünde duramaz — bkz. yukarıdaki not. Yalnız KONUM kuralı; ötekiler 52rem sorgusunda kalıyor. */ /* 62rem yetmedi: 1024 px'de tuval 311 px'e iniyor ama künye rem cinsinden 110 px kalıyor — yani oransal olarak büyüyor ve Makkah Gate etiketine biniyor (ölçüldü). Eşik 68rem'e çıkarıldı. */ @media (max-width:68rem){ .sil-satir{ position:static;inset:auto;inline-size:100%; block-size:auto;min-block-size:6.4rem; margin-block-start:clamp(1rem,3vw,1.6rem); } } /* ── GECE IŞIĞI ──────────────────────────────────────────────── Saat kulesinin çevresinde dönen ışık. YALNIZ koyu temada açılır: aydınlık gökyüzünde dönen bir parıltı ışık gibi değil leke gibi duruyor. Renkler markanın kendi paletinden — toprak (#AA7651) ve zeytin (#5F6E54); kulenin gerçek altın + yeşil aydınlatmasıyla da örtüşüyor, ayrıca palete yabancı bir renk sokmuyor. Ölçü cqi cinsinden: tuval container-type:inline-size olduğu için ışık her ekran boyunda kuleyle aynı oranda kalıyor. Konum ölçüldü: kule x %75'te dikey duruyor, saat kadranı %26. */ /* ═══ RTL · SAHNE AYNALANMAZ ═══════════════════════════════════════ Bu şerit bir DÜZEN değil, bir SAHNE: uçak soldan gelir, Kâbe sağda durur — coğrafi bir anlatım. Bütün işaretler `inset-inline-start` ve görselden ÖLÇÜLMÜŞ yüzdelerle çıpalanıyor; dir="rtl" altında bunlar aynalanıyor ama aynalanmıyordu. Sonuç: etiketler yanlış yapının üstüne düşüyor, gece huzmesi 137 px sola taşıyor (28 Ağu 2026 ölçümü). Çözüm sahneyi çevirmek değil, içinde yönü SABİTLEMEK. Başlık ve künye metni sayfanın yönünü izlemeye devam eder. */ .sil-tuval{direction:ltr} .sil-gece{ position:absolute;pointer-events:none; inset-inline-start:75%;inset-block-end:74%; inline-size:26cqi;block-size:26cqi; transform:translate(-50%,50%); opacity:0;transition:opacity 700ms var(--egri); } html[data-tema="koyu"] .sil-gece{opacity:1} /* AÇIK TEMADA GÜNEŞ. Gecenin toprak/zeytin huzmesi burada işe yaramaz: krem zeminde o renkler gri-yeşil bir lekeye dönüyor. Ayrıca multiply denendi — sarıyı KOYULAŞTIRIP zeytine çeviriyor, güneş değil gölge oluyor. Gündüz ışığının okunması için zeminden hem DAHA PARLAK hem DAHA SICAK olmak gerekiyor; bu yüzden normal karışım ve pastel sarı. Zemin #ECE6DA; huzme #F7E296 civarı — parlaklık ve doygunluk farkı ışık hissini veriyor, dönüş gece ile aynı ritimde (18 sn). */ html:not([data-tema="koyu"]) .sil-gece{opacity:1;mix-blend-mode:normal} html:not([data-tema="koyu"]) .sil-gece::before{ filter:blur(24px); background:conic-gradient(from 0deg, transparent 0deg, rgba(246,220,128,1) 22deg, rgba(249,233,175,.66) 52deg, transparent 88deg, transparent 172deg, rgba(247,226,148,.86) 196deg, rgba(250,238,192,.48) 226deg, transparent 262deg, transparent 360deg); } html:not([data-tema="koyu"]) .sil-gece::after{ background:radial-gradient(circle, rgba(249,231,152,.95) 0%, rgba(248,236,190,.55) 46%, transparent 74%); } /* dönen huzme — iki kollu, biri toprak biri zeytin */ .sil-gece::before{ content:"";position:absolute;inset:0;border-radius:50%; background:conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--toprak) 58%, transparent) 22deg, color-mix(in srgb, var(--toprak) 22%, transparent) 52deg, transparent 88deg, transparent 172deg, color-mix(in srgb, var(--aksan) 46%, transparent) 196deg, color-mix(in srgb, var(--aksan) 16%, transparent) 226deg, transparent 262deg, transparent 360deg); filter:blur(14px); animation:sil-gece-donus 18s linear infinite; } /* nefes alan çekirdek hâle */ .sil-gece::after{ content:"";position:absolute;inset:26%;border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--toprak) 30%, transparent) 0%, color-mix(in srgb, var(--aksan) 14%, transparent) 46%, transparent 74%); animation:sil-gece-nefes 5600ms ease-in-out infinite; } @keyframes sil-gece-donus{ to{ transform:rotate(360deg) } } @keyframes sil-gece-nefes{ 0%,100%{opacity:.5;transform:scale(.92)} 50% {opacity:1; transform:scale(1.08)} } /* Hareket azaltma açıkken dönmez: sabit, yumuşak bir aydınlık kalır. */ @media (prefers-reduced-motion:reduce){ .sil-gece::before{animation:none;opacity:.7} .sil-gece::after{animation:none;opacity:.85} } }