/* BMR Spor Kompleksi — ortak stil
Palet dışarıdan verildi (coolors, beş renk):
#0A0908 neredeyse siyah
#22333B koyu arduvaz
#F2F4F3 kırık beyaz
#A9927D sıcak taupe
#5E503F koyu kahve
ÖLÇÜM — #0A0908 zemine / #22333B kart yüzeyine karşı:
#F2F4F3 18.01:1 AAA / 11.85:1 AAA → ana metin
#A9927D 6.72:1 AA / 4.42:1 zayıf → vurgu, düğme dolgusu
#5E503F 2.55:1 ✗ / 1.68:1 ✗ → METİN DEĞİL, yalnız çizgi/ayraç
#22333B 1.52:1 → kart yüzeyi (zeminden ayrışma)
İki türetilmiş ton var, ikisi de paletin kendi ekseninde:
#B7A08B taupe açıldı → ikincil metin. Ham #A9927D kart yüzeyinde
4.42'ye düşüp AA'yı kaçırıyordu; 7.97 / 5.24 / 4.66 oldu.
#C4AF9B taupe daha da açıldı → yalnızca hover dolgusu, metin değil.
BÖLÜM KİMLİĞİ — Bu palet tek sıcak eksende (siyah→kahve→taupe→beyaz)
artı bir soğuk arduvaz. Üç ayrı KİMLİK RENGİ bu paletten türetilemez:
denendi, çıkan üç ton (#B3A08E / #9DA5A8 / #A9A49B) birbirinden
ayırt edilemiyordu. Bu yüzden kimlik artık renk TONUNDAN değil
PARLAKLIKTAN geliyor: yetişkin bölümleri sıcak taupe vurgu, BMR Kids
kırık beyaz vurgu alıyor. Hiyerarşi punto ölçeğinden gelmeye devam. */
:root{
--zemin:#0A0908;
--zemin-2:#22333B; /* kart yüzeyi */
--murekkep:#F2F4F3;
--murekkep-soluk:#B7A08B; /* taupe açıldı — gerekçe yukarıda */
--cizgi:#5E503F; /* çizgi olarak kalıyor, metin değil */
--vurgu-hover:#C4AF9B; /* dolgu hover'ı, metin değil */
/* Yer tutucu yüzey: görsel yüklenene kadar ya da hiç yokken görünen
zemin. Buralarda --zemin-2 (#22333B) kullanılıyordu; o renk paletin
KART yüzeyi ve dolu bir yüzey olarak doğru, ama BOŞ bir alanda
neredeyse siyah sayfanın üstünde yabancı bir mavi-gri blok gibi
duruyordu. Bu ton paletin sıcak ekseninden (#0A0908 → #5E503F, %28)
türetildi: zeminden ayrışıyor ama ondan kopmuyor.
Beyaz yazı 15.16:1, soluk yazı 6.71:1. */
--bos:#221D17;
/* Kalkık yüzey (panel, footer). Eskiden --zemin-2 (#22333B) idi:
paletin TEK soğuk rengi, sıcak neredeyse-siyah sayfanın üstünde
büyük yüzey olarak mavimsi ve yabancı okunuyordu. Bu ton paletin
sıcak ekseninden (#0A0908 → #5E503F, %52) türetildi ve zeminden
ayrışması arduvazınkine denk: 1.49:1 / 1.52:1. Yazı kontrastları
beyaz 12.10, soluk 5.36, taupe 4.52 — hepsi AA. */
/* Ad --yuzey DEĞİL: index.html'de --yuzey zaten sayfa zeminini
(var(--zemin)) gösteriyor ve buradaki tanımı eziyordu — panel
bu yüzden sayfa rengini alıyordu. */
--kalkik:#362E25;
/* Bölüm kimlikleri — parlaklık farkı, ton farkı değil */
--kimlik-yetiskin:#A9927D; /* sıcak taupe */
--kimlik-kids:#F2F4F3; /* kırık beyaz: daha parlak, daha temiz */
--vurgu:var(--kimlik-yetiskin); /* sayfaya göre değişir */
--odak:var(--murekkep);
--fd:'Bricolage Grotesque',system-ui,sans-serif;
--fb:'Instrument Sans',system-ui,sans-serif;
--y-etiket:.75rem;
--y-govde:1rem;
--y-lede:clamp(1.125rem,.9rem + .8vw,1.35rem);
--y-baslik:clamp(2rem,1.2rem + 3.2vw,3.1rem);
--y-hero:clamp(2.8rem,1.4rem + 6vw,5.2rem);
/* köşe ölçeği — dört piksellik adım, roller net */
--r-xs:4px; /* etiket, rozet, küçük yüzey */
--r-s:8px; /* kart, düğme */
--r-m:12px; /* orta yüzey, ikon düğmesi */
--r-l:16px; /* büyük yüzey: çubuk kapsülü, görsel, panel */
--r-tam:999px; /* hap; gerçek daireler 50% kullanır, o ayrı */
--hedef-min:24px;
--hedef-rahat:44px;
--ease:cubic-bezier(.22,1,.36,1);
--gut:clamp(18px,5vw,64px);
/* Çubuk yüksekliği sabit değil: masaüstünde logo (clamp), mobilde
44px'lik menü düğmesi belirliyor. Token ikisini de takip etsin,
yoksa kapak görseli çubuğun altına yanlış hizalanıyor.
34px = dış boşluk 8 + iç boşluk 12+12 + kenarlık 2 */
--cubuk-yuk:calc(34px + 40px); /* masaüstü: gezinme bağlantısı 40px */
}
/* BMR Kids sayfaları kendi kimlik rengine döner */
.kids{--vurgu:var(--kimlik-kids)}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
/* ══ BÖLÜM YAPIŞMASI ══
Sayfa bölümden bölüme geziliyor: her bölümün başı bir yapışma
noktası, yakınına gelince oraya oturuyor.
mandatory DENENDİ, proximity ile BİREBİR AYNI sonucu verdi: tarayıcı
ekrandan uzun yapışma alanlarında snap'i kasten gevşetiyor (içerik
erişilemez kalmasın diye). Yani snap TİPİ burada bir şey değiştirmiyor;
belirleyici olan bölüm yüksekliği. Daha az riskli olan bırakıldı.
proximity — ölçüldü ve gerekçesi şu: altı bölümün
ÜÇÜ ekrandan uzun (alanlar 135vh, BMR Kids 149vh, üyelik telefonda
189vh). mandatory olsaydı bu bölümlerin alt kısmına inilemezdi ya da
her kaydırmada yapışma kullanıcıyla kavga ederdi. proximity bölüm
başlarında yapışıyor, uzun bölümün İÇİNDE serbest bırakıyor.
scroll-padding-top: yapışan bölüm sabit üst çubuğun altında
kalmasın diye çubuk yüksekliği kadar pay bırakılıyor. */
/* scroll-padding-top: yüzen çubuk sabit, dolayısıyla bir bölüme
gidildiğinde başlığı ve etiketi çubuğun ALTINDA kalıyordu —
telefonda ölçüldü, etiketler 67px'te, çubuk 78px. Çubuk kadar pay
bırakılıyor; hem çapa bağlantıları hem yapışma bu payı kullanıyor.
Not: bölümler bir ara zorla 100svh yapılmıştı ve o hâlde bu pay
yapışma alanını ekrandan büyük gösterip snap'i tamamen öldürüyordu.
Bölümler doğal yüksekliğine döndüğü için sorun kalmadı. */
html{scroll-behavior:smooth;scroll-snap-type:y proximity;
scroll-padding-top:calc(var(--cubuk-yuk) + 12px)}
main>section,footer{scroll-snap-align:start}
/* Giriş sahnesi hariç: 420vh'lik sürücünün kendi mıknatısı var,
yapışma onunla çakışırdı. Menüdeki BİNA buraya götürüyor; sahne
tam ekran olduğu için çubuk payı uygulanmamalı. */
main>.surucu{scroll-snap-align:none;scroll-margin-top:0}
/* Kapak zaten çubuğun altından geçiyor; ona pay uygulanmamalı. */
main>.kapak:first-child{scroll-snap-align:start;scroll-margin-top:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--fb);color:var(--murekkep);
font-size:var(--y-govde);line-height:1.6;-webkit-font-smoothing:antialiased;
background:var(--zemin)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--fd);font-weight:800;line-height:.96;letter-spacing:-.022em;text-wrap:balance}
p{margin:0}
.mono{font-size:var(--y-etiket);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--odak);outline-offset:3px}
.skip{position:fixed;left:14px;top:-70px;z-index:200;background:var(--vurgu);color:var(--zemin);
padding:.75em 1.2em;border-radius:var(--r-xs);font-size:var(--y-etiket);font-weight:600;
text-decoration:none;transition:top .2s var(--ease)}
.skip:focus{top:14px}
/* ══ HAYALET PERDE ══
Sayfa geneline yayılan, yavaşça sürüklenen sis katmanı.
Kaynak React bileşeninin çekirdeği zaten saf SVG filtresiydi:
feTurbulence → feColorMatrix(hueRotate) → feDisplacementMap ×2
React yalnızca hueRotate değerini döndürüyordu; o iş site.js'te.
Kaynaktaki İKİ DIŞ GÖRSEL kullanılmadı:
· maske blob'u → yerine katmanlı radial-gradient. Hem dosya
gerekmiyor hem şekli palete göre ayarlanabiliyor.
· gren dokusu → yerine feTurbulence'ın kendisi, veri-URI olarak.
PNG olarak üretilince 192 KB tutuyordu; rastgele gren sıkışmaz.
PERFORMANS: çift feDisplacementMap tam ekran bir öğede her karede
yeniden hesaplanır. Katman --hayalet-olcek kadar KÜÇÜK çiziliyor,
sonra transform ile büyütülüyor: CSS filtreleri dönüşümden ÖNCE
uygulandığı için filtre dörtte bir piksel üzerinde çalışıyor.
Sis yumuşak olduğu için büyütme fark edilmiyor. */
.hayalet{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
--hayalet-olcek:.5;
/* Açılışı CSS yapıyor: JS yalnızca display ve opacity'yi bir kez
çeviriyor, kare kare değer yazmıyor.
--ease öne yüklü bir eğri (cubic-bezier(.22,1,.36,1)) — mesafenin
çoğunu ilk anda kapatıyor ve solma yine ani duruyor. Arka planın
belirmesi için düz bir giriş-çıkış ve uzun süre gerekiyor. */
transition:opacity 2.2s cubic-bezier(.45,0,.25,1)}
.hayalet svg{position:absolute;width:0;height:0}
.hayalet .kutle{position:absolute;top:0;left:0;
width:calc(100% / var(--hayalet-olcek));
height:calc(100% / var(--hayalet-olcek));
transform:scale(var(--hayalet-olcek));transform-origin:0 0;
filter:url(#hayalet-f) blur(6px)}
/* Sisin gövdesi: renk + organik maske. Tek bir blob yerine üç örtüşen
leke — filtre onları sürükleyince tek parça bir sis gibi akıyor. */
.hayalet .kutle i{position:absolute;inset:-14%;display:block;
background:
radial-gradient(46% 38% at 24% 28%, rgba(169,146,125,.30), transparent 68%),
radial-gradient(40% 48% at 76% 62%, rgba(34,51,59,.42), transparent 70%),
radial-gradient(54% 34% at 52% 88%, rgba(169,146,125,.20), transparent 72%)}
/* Gren: dosyasız, feTurbulence veri-URI'si. Sisin üstünde ince bir
doku bırakıyor, düz gradyan hissini kırıyor. */
.hayalet .gren{position:absolute;inset:0;opacity:.24;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
background-size:160px 160px}
/* ── üst çubuk ──
Yüzen çubuk: sayfanın kenarına yapışık tam genişlik bir şerit değil,
üstte duran bir kapsül. Kaydırınca DARALIYOR ve yuvarlanıyor —
okurken yer kaplamasın ama hep erişilebilir kalsın.
Kapsül ölçüsü tek yerden: --cubuk-en. .indi sınıfı onu kısıyor,
böylece geçiş tek özellik üzerinden akıyor. */
.top{position:fixed;left:0;right:0;top:0;z-index:100;padding:8px 8px 0;
--cubuk-en:1152px; --cubuk-zemin:transparent; --cubuk-cizgi:transparent;
--cubuk-yan:24px}
/* PERDE — kapak görseli artık çubuğun ALTINDAN geçiyor, yani gezinme
yazıları fotoğrafın üstüne düşüyor. Ölçüldü: parlak pencerenin
önünde aktif bağlantı 1.17:1 kalıyordu. Yukarıdan aşağı sönen bir
karartma bunu çözüyor; .55 alfa en kötü zeminde 7.49:1 veriyor
(AA için 4.5 yeterdi, pay bırakıldı). Kaydırılınca kapsülün kendi
zemini devreye girdiği için perde inceliyor. */
.top::before{content:"";position:absolute;left:0;right:0;top:0;
height:calc(var(--cubuk-yuk) + 28px);pointer-events:none;z-index:-1;
background:linear-gradient(to bottom,rgba(10,9,8,.72),rgba(10,9,8,.45) 58%,rgba(10,9,8,0));
opacity:var(--perde-o,1);transition:opacity .35s var(--ease)}
.top.indi{--perde-o:.5}
.top .kabuk{position:relative;max-width:var(--cubuk-en);margin:0 auto;
display:flex;align-items:center;gap:14px;padding:12px var(--cubuk-yan);
border-radius:var(--r-l);background:var(--cubuk-zemin);
border:1px solid var(--cubuk-cizgi);
transition:max-width .35s var(--ease),background .35s var(--ease),
border-color .35s var(--ease),padding .35s var(--ease)}
/* Kaydırıldı: kapsül daralır, zemin ve kenar belirir. */
.top.indi{--cubuk-en:896px; --cubuk-zemin:rgba(10,9,8,.62);
--cubuk-cizgi:rgba(94,80,63,.55); --cubuk-yan:18px}
.top.indi .kabuk{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
box-shadow:0 10px 34px rgba(10,9,8,.5)}
/* .top artık akışta değil, gövde altından başlıyor. Ama alt sayfaların
ilk bölümü tam kanama bir KAPAK ve içeriği alta hizalı: onun çubuğun
ALTINDAN geçmesi gerekiyor, yoksa görselin üstünde siyah bir şerit
kalıyor. Kapak varsa boşluk geri alınıyor. */
body{padding-top:var(--cubuk-yuk)}
body.landing{padding-top:0}
main>.kapak:first-child{margin-top:calc(var(--cubuk-yuk) * -1)}
/* Logo siyah bir PNG. Açık plaka yerine TERS ÇEVRİLİYOR: siyah beyaza
dönüyor, yeni dosya gerekmiyor ve kapsülün içinde blok gibi durmuyor. */
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;
font-family:var(--fd);font-weight:800;font-size:var(--y-lede);
letter-spacing:-.03em;color:inherit;flex:none}
/* Yanındaki yazı kaldırıldı, logo tek başına marka işareti: büyütüldü.
Çubuk yüksekliği buna göre --cubuk-yuk ile birlikte ayarlanıyor. */
.mark img{width:auto;height:clamp(26px,2.7vw,32px);display:block;filter:invert(1)}
/* Gezinme masaüstünde kapsülün ORTASINA çakılı: logo solda, düğme sağda
kalırken bağlantılar hep aynı yerde duruyor, çubuk daralınca kaymıyor. */
.gez{display:flex;gap:26px;font-size:var(--y-etiket);font-weight:600;
letter-spacing:.1em;text-transform:uppercase}
.gez a{text-decoration:none;color:var(--murekkep);opacity:.78;white-space:nowrap;
display:inline-flex;align-items:center;min-height:40px;
transition:opacity .25s var(--ease),color .25s var(--ease)}
/* Aktif sayfa eskiden yalnızca RENKLE işaretleniyordu: taupe, kapak
görselinin üstündeki perdede 2.88:1 kalıyordu ve renk tek başına
bilgi taşıyordu. Artık yazı beyaz (8.4:1), taupe alt çizgiye geçti —
hem okunuyor hem işaret renkten bağımsız. */
.gez a:hover{color:var(--murekkep);opacity:1}
.gez a[aria-current]{color:var(--murekkep);opacity:1;
text-decoration:underline;text-decoration-color:var(--vurgu);
text-decoration-thickness:2px;text-underline-offset:7px}
.menu-dug{display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;margin-left:auto;padding:0;border:0;border-radius:var(--r-m);
background:none;color:var(--murekkep);flex:none}
.menu-dug svg{width:22px;height:22px;display:block}
/* Odak halkası yoktu — klavyeyle gezen kullanıcı nerede olduğunu
göremiyordu. Diğer etkileşimli ögelerle aynı biçim. */
.menu-dug:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
.menu-dug .kapat-i{display:none}
.top.acik .menu-dug .ac-i{display:none}
.top.acik .menu-dug .kapat-i{display:block}
@media (max-width:939px){
:root{--cubuk-yuk:calc(34px + 44px)} /* mobil: menü düğmesi 44px */
.top .kabuk{flex-wrap:wrap}
.canli{display:none}
.gez,.top .wa{display:none;width:100%}
.top.acik .gez{display:flex;flex-direction:column;gap:0;order:3;
padding-top:10px;margin-top:10px;border-top:1px solid rgba(94,80,63,.5)}
.top.acik .gez a{min-height:48px;font-size:.95rem;letter-spacing:.06em}
.top.acik .wa{display:inline-flex;order:4;margin:12px 0 4px;width:auto}
/* Menü açıkken kapsül her zaman opak: bağlantılar sayfa üstünde yüzmesin */
.top.acik{--cubuk-zemin:rgba(10,9,8,.94); --cubuk-cizgi:rgba(94,80,63,.55)}
.top.acik .kabuk{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}
@media (min-width:940px){
.menu-dug{display:none}
.gez{position:absolute;left:50%;transform:translateX(-50%)}
.top .wa{margin-left:auto}
}
.wa{display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:.72em 1.2em;
background:var(--zemin);color:#fff;text-decoration:none;border-radius:var(--r-tam);
font-size:var(--y-etiket);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
transition:transform .3s var(--ease),background .3s;margin-left:auto}
/* .gez+.wa{margin-left:0} kaldırıldı: nav artık masaüstünde mutlak
konumlu, akışta değil. Kural WhatsApp düğmesinin sağa itilmesini
eziyor ve düğme nav bağlantılarının üstüne biniyordu. */
.top .wa{background:var(--vurgu);color:var(--zemin);flex:none;margin-left:auto}
.wa:hover{transform:translateY(-2px)}
.wa svg{width:13px;height:13px;flex:none}
/* ── üyelik paketleri ──
Rakamlar okunacak veri, süs değil: tabular rakam kullanılıyor ki
sütunlar hizalansın ve göz tutarları yan yana karşılaştırabilsin. */
.paketler{list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;
display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){.paketler{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.paketler{grid-template-columns:repeat(4,1fr)}}
.paketler li{display:flex;flex-direction:column;gap:6px;
padding:22px 20px 20px;border:1px solid var(--cizgi);border-radius:var(--r-xs)}
.paketler .sure{font-size:var(--y-etiket);font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--murekkep-soluk)}
.paketler .tutar{font-family:var(--fd);font-weight:800;font-size:var(--y-baslik);
line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.paketler .tutar i{font-style:normal;font-size:.42em;margin-left:.25em;
font-family:var(--fb);font-weight:600;letter-spacing:0}
.paketler .aylik{font-size:var(--y-etiket);font-weight:600;color:var(--murekkep-soluk)}
.paketler .dondur{margin-top:auto;padding-top:12px;font-size:var(--y-etiket);
color:var(--murekkep-soluk);border-top:1px solid rgba(94,80,63,.4)}
/* En uzun paket aylıkta yarı fiyat: öne çıkması bir bilgi, dekorasyon değil. */
.paketler .one-cikan{border-color:var(--vurgu);border-width:2px}
.sor{margin-top:clamp(30px,5vw,52px);padding-top:clamp(26px,4vw,40px);
border-top:1px solid var(--cizgi)}
.sor h3{font-family:var(--fd);font-weight:800;font-size:var(--y-lede);margin:0}
.sor .wa{margin-top:1.6em}
/* ── köşede sabit duran iletişim düğmeleri ──
Üst çubuktaki WhatsApp düğmesinin yerini alır. WhatsApp büyük ve altta
(asıl eylem), Instagram küçük ve üstünde (ikincil).
z-index 55: açılan oda panelinin (70) ve perdesinin (65) ALTINDA kalmalı,
yoksa panel açıkken üstüne biner. */
.sabit{position:fixed;right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px);
/* align-items:center idi: 46px'lik Instagram dairesi 154px'lik
WhatsApp hapının üstünde ortalanıp hiçbir kenarla hizalanmıyordu.
flex-end ikisini sağ kenarda hizalıyor, yığın tek bir sütun gibi
okunuyor. */
z-index:55;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.sabit a{display:grid;place-items:center;border-radius:50%;text-decoration:none;color:#fff;
box-shadow:0 4px 14px rgba(10,9,8,.28),0 1px 3px rgba(10,9,8,.2);
transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sabit a:hover{transform:translateY(-3px);box-shadow:0 9px 22px rgba(10,9,8,.34)}
.sabit svg{display:block}
/* WhatsApp: asıl eylem. hyperfitnessxl.fit'teki teknik — yuvarlak ikon
değil ETİKETLİ HAP, ve gölge butonun kendi renginden yayılıyor
(nötr siyah gölge yerine yeşilin kendisi), bu yüzden koyu zeminde
parlıyormuş gibi duruyor. Hover'da büyüme + kalkma.
Etiket dar ekranda gizleniyor: telefonda hap kadar yer yok ve
yuvarlak ikon zaten tanınıyor. */
.sabit a.sabit-wa{min-height:46px;padding:0 17px;border-radius:var(--r-tam)!important;
/* ÖLÇÜLDÜ: beyaz yazı #25D366 üstünde 1.98:1 — WCAG 4.5 istiyor,
grafik eşiği 3:1'i bile geçmiyordu. Marka yeşilini KORUYUP mürekkebi
koyuya çevirmek 10.03:1 veriyor. Sitenin en güçlü çağrısı (.cagri)
zaten aynı şeyi yapıyor: açık zemin, koyu yazı. */
display:flex!important;align-items:center;gap:11px;background:#25D366;
color:var(--zemin);
font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
box-shadow:0 7px 26px rgba(37,211,102,.38)}
.sabit-wa svg{width:19px;height:19px;flex:none;fill:var(--zemin)}
.sabit a.sabit-wa:hover{transform:scale(1.05) translateY(-2px);
box-shadow:0 16px 48px rgba(37,211,102,.5)}
@media (max-width:620px){
.sabit a.sabit-wa{padding:0;width:50px;min-height:50px;border-radius:50%!important;
justify-content:center}
.sabit-wa b{display:none}
.sabit-wa svg{width:26px;height:26px}
}
/* Instagram: ikincil, daha küçük ama hâlâ 44px dokunma tabanının üstünde */
.sabit-ig{width:44px;height:44px;
background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.sabit-ig svg{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){.sabit a:hover{transform:none}}
/* ── oda sayfası ── */
.kapak{position:relative;min-height:clamp(380px,62svh,620px);display:flex;align-items:flex-end;
padding:clamp(32px,7vh,80px) var(--gut);overflow:hidden;background:var(--zemin)}
.kapak>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.kapak::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(4deg,rgba(10,9,8,.9) 4%,rgba(10,9,8,.42) 46%,rgba(10,9,8,.14) 92%)}
.kapak-ic{position:relative;z-index:2;color:#fff;width:min(100%,720px)}
.kapak h1{font-size:var(--y-hero);max-width:13ch;
text-shadow:0 2px 6px rgba(10,9,8,.6),0 12px 44px rgba(10,9,8,.5)}
.kapak .ust{display:flex;align-items:center;gap:10px;margin-bottom:1.1em;color:var(--vurgu)}
.kapak .ust s{height:1px;width:44px;background:currentColor;opacity:.6;text-decoration:none}
.kapak .alt{margin-top:1.1em;max-width:46ch;color:#fff;opacity:.9;
text-shadow:0 1px 4px rgba(10,9,8,.6)}
.blok{padding:clamp(52px,9vh,104px) var(--gut);max-width:1240px;margin:0 auto}
.ikili{display:grid;gap:clamp(26px,5vw,64px)}
@media (min-width:900px){.ikili{grid-template-columns:1fr 1fr;align-items:start}}
.blok h2{font-size:var(--y-baslik);max-width:16ch}
.lede{margin-top:1.1em;font-size:var(--y-lede);color:var(--murekkep-soluk);max-width:56ch}
.etiket{margin:2em 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.etiket li{font-size:var(--y-etiket);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
border:1px solid var(--cizgi);color:var(--murekkep-soluk);padding:.6em .85em;border-radius:var(--r-xs)}
/* galeri */
/* ══ GALERİ ══
Sütun (masonry) düzeni. Sebep ölçüm: eski ızgarada ilk karo iki
satır kaplıyordu, kalan karolar o satırlara yayılınca kutular 0.35
orana (neredeyse üç kat uzun) düşüyordu. 4:3 fotoğraflar bu kutulara
object-fit:cover ile sokulunca KARENİN %74'Ü kesiliyordu; öne çıkan
karoda %47. Ortalama kırpma %27.2 idi.
Burada kırpma YOK: her görsel kendi en-boy oranıyla duruyor, sütunlar
yüksekliği kendiliğinden dengeliyor. Yatay da dikey de aynı düzende
sorunsuz yaşıyor — dosyaların 35'i 4:3, 4'ü 3:4. */
/* Sütun sayısı GÖRSEL SAYISINA göre. Sabit 3 sütun sayfaların çoğunda
dengesiz kalıyordu: 5 görsel 2+2+1 dağılıp sağ alt köşede büyük bir
boşluk bırakıyor, 2 görselli sayfalarda (box, zumba) galeri iyice
seyrekleşiyordu. Sayfa başına: 6, 5, 5, 5, 3, 2, 2 görsel var.
Üçüncü sütun ancak altıncı görsel varsa açılıyor. */
.galeri{columns:2;column-gap:14px;margin-top:clamp(30px,5vw,56px)}
@media (min-width:820px){
.galeri{column-gap:16px}
.galeri:has(> figure:nth-child(6)){columns:3}
}
@media (min-width:1400px){.galeri{column-gap:18px}}
.galeri figure{margin:0 0 14px;break-inside:avoid;position:relative;
overflow:hidden;border-radius:var(--r-l);background:var(--bos);
transition:transform .5s var(--ease)}
@media (min-width:820px){.galeri figure{margin-bottom:16px}}
/* height:auto — kutuyu görsel belirliyor, görseli kutu değil. */
.galeri img{width:100%;height:auto;display:block;
transition:transform 1.1s var(--ease),filter .5s var(--ease)}
.galeri figure::after{content:"";position:absolute;inset:0;pointer-events:none;
border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(242,244,243,.07);
background:linear-gradient(to top,rgba(10,9,8,.28),transparent 42%);
opacity:.9;transition:opacity .5s var(--ease)}
.galeri figure:hover{transform:translateY(-3px)}
.galeri figure:hover img{transform:scale(1.04)}
.galeri figure:hover::after{opacity:.35}
@media (prefers-reduced-motion:reduce){
.galeri figure:hover{transform:none}
.galeri figure:hover img{transform:none}
}
/* saatler */
.saat{border-top:1px solid var(--cizgi);margin-top:1.6em}
.saat div{display:flex;justify-content:space-between;gap:18px;padding:.9em 0;
border-bottom:1px solid var(--cizgi);font-size:var(--y-govde);font-variant-numeric:tabular-nums}
.saat div>span:first-child{color:var(--murekkep-soluk)}
.saat div.bugun>span:last-child{color:var(--vurgu);font-weight:600}
/* diğer alanlar */
.digerleri{background:var(--zemin);color:var(--murekkep);padding:clamp(52px,9vh,100px) var(--gut)}
.digerleri .ic{max-width:1240px;margin:0 auto}
.digerleri h2{font-size:var(--y-baslik)}
.kartlar{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-top:clamp(26px,4vw,44px)}
@media (min-width:860px){.kartlar{grid-template-columns:repeat(4,1fr)}}
.kart{position:relative;display:block;text-decoration:none;border-radius:var(--r-xs);overflow:hidden;
background:var(--bos);aspect-ratio:3/4;transition:transform .4s var(--ease)}
.kart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;
transition:opacity .4s var(--ease),transform 1.1s var(--ease)}
.kart:hover{transform:translateY(-5px)}
.kart:hover img{opacity:.8;transform:scale(1.05)}
.kart span{position:relative;z-index:2;display:block;padding:14px;height:100%;
display:flex;align-items:flex-end;font-family:var(--fd);font-weight:800;font-size:1.02rem;
color:#fff;text-shadow:0 1px 5px rgba(10,9,8,.7)}
/* Henüz sayfası olmayan aktivite: "yakında" etiketiyle işaretlenir ve
tıklanamaz. Boş sayfaya götürmekten iyidir. */
.kart span i{display:block;font-style:normal;font-size:var(--y-etiket);
font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--vurgu);margin-top:4px}
div.kart{cursor:default}
.kart.bos{background:var(--bos)}
.kart.bos span{opacity:.5}
/* kapanış */
.cagri{background:var(--vurgu);color:var(--zemin);padding:clamp(52px,9vh,100px) var(--gut);text-align:center}
/* .6 opaklık taupe zeminde 3.42:1'e düşüyordu; .82 → 5.34:1 (AA). */
.cagri .numara{color:var(--zemin);opacity:.82}
.cagri h2{font-size:var(--y-baslik);max-width:16ch;margin:0 auto}
.cagri p{margin:1.1em auto 0;max-width:44ch;opacity:.82}
/* Bölümün zemini zaten --vurgu. Düğme de --vurgu dolguluydu, yani
görünmüyordu. Burada TERS çevriliyor: koyu dolgu, açık yazı.
Dolgu/bölüm ayrımı 6.72:1, yazı/dolgu 18.01:1. */
.cagri .wa{margin:2em auto 0;background:var(--zemin);color:var(--murekkep)}
.cagri .wa:hover{background:var(--kalkik)}
/* Footer zemininde tesisin dış görüntüsü. Fotoğraf DEKOR, okunacak şey
değil: üstüne koyu bir perde konuyor ki iletişim bilgileri okunsun.
Perde yoğunluğu ölçümle belirlendi (aşağıda). Görsel 1600×620,
yüksekliği footer belirliyor — bant büyümüyor. */
footer{position:relative;isolation:isolate;
background:var(--zemin) url("footer-bina.webp") center/cover no-repeat;
color:var(--murekkep);padding:36px var(--gut) 44px;
font-size:var(--y-etiket);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
footer::before{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(to bottom,rgba(10,9,8,.70),rgba(10,9,8,.80))}
footer .ic{position:relative;max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;gap:14px 30px;
justify-content:space-between;align-items:center;color:rgba(242,244,243,.78)}
/* Telefon ve Instagram bağlantıları 12-16px yükseklikteydi; WCAG 2.2
asgari 24px. Bunlar sitenin en çok kullanılan iki eylemi. */
footer a{text-decoration:none;transition:color .25s var(--ease);
display:inline-flex;align-items:center;min-height:var(--hedef-min)}
footer a:hover{color:var(--vurgu)}
@media (pointer:coarse){footer a{min-height:var(--hedef-rahat)}}
/* giriş */
.gir{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.gir.ac{opacity:1;transform:none}
.gir.g1{transition-delay:.07s}.gir.g2{transition-delay:.14s}.gir.g3{transition-delay:.21s}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.001ms!important;transition-duration:.001ms!important}
.gir{opacity:1!important;transform:none!important}
}
@media (pointer:coarse){.wa{min-height:44px}}
/* ══ kaydırma çubuğu ══
Sayfa koyu ama tarayıcıya bunu söyleyen bir şey yoktu: color-scheme
tanımsız olduğu için Chrome ve Firefox açık gri sistem çubuğu çiziyordu.
Koyu zeminin sağ kenarında parlak bir şerit duruyordu yani.
İki katmanlı çözüm, çünkü tek bir yol her tarayıcıda çalışmıyor:
1) color-scheme — tek başına bile çubuğu koyultur, taban güvence.
2) ::-webkit-scrollbar — asıl tasarım (Chrome, Edge, Safari).
3) scrollbar-color — Firefox. @supports ile ayrıldı: Chrome 121+
scrollbar-color'ı destekliyor ve desteklediğinde ::-webkit-*
kurallarını YOK SAYIYOR. İkisini birlikte yazmak tasarımı iptal
ederdi. */
:root{color-scheme:dark}
html::-webkit-scrollbar{width:12px;height:12px}
html::-webkit-scrollbar-track{background:var(--bos)}
/* Şerit 12px ama görünen tutamak 6px: saydam kenarlık + content-box
kırpması. Dokunma/tıklama hedefi geniş kalırken çubuk ince görünüyor. */
html::-webkit-scrollbar-thumb{
background:var(--cizgi);
border:3px solid transparent;
background-clip:content-box;
border-radius:var(--r-tam);
transition:background-color .2s var(--ease)}
html::-webkit-scrollbar-thumb:hover{background:var(--vurgu-hover);background-clip:content-box}
html::-webkit-scrollbar-thumb:active{background:var(--vurgu);background-clip:content-box}
html::-webkit-scrollbar-corner{background:var(--bos)}
/* ÖLÇÜLDÜ: Chrome 121+ scrollbar-color'u destekliyor, yani
@supports (scrollbar-color:auto) Chrome'da da geçiyordu ve
yukarıdaki ::-webkit tasarımını iptal ediyordu — sayfa ince düz bir
çubukla kalıyordu. Bu blok SADECE Firefox'a gitmeli:
-moz-appearance yalnızca Gecko'da tanınıyor. */
@supports (-moz-appearance:none){
:root{scrollbar-color:var(--cizgi) var(--bos);scrollbar-width:thin}
}
/* Bölüm içi kaydırma alanları (yatay kart şeridi vb.) daha ince olsun,
sayfa çubuğuyla yarışmasın. */
.kartlar::-webkit-scrollbar,.etiket::-webkit-scrollbar{height:8px}
.kartlar::-webkit-scrollbar-thumb,.etiket::-webkit-scrollbar-thumb{border-width:2px}
/* ══ sık sorulanlar ══ */
.sss{margin-top:2.4em;border-top:1px solid var(--cizgi)}
.sss details{border-bottom:1px solid var(--cizgi)}
.sss summary{
display:flex;align-items:center;justify-content:space-between;gap:1.5em;
min-height:var(--hedef-rahat);padding:1.1em 0;
font-size:var(--y-lede);font-weight:600;
list-style:none;transition:color .2s var(--ease)}
.sss summary::-webkit-details-marker{display:none} /* Safari'nin üçgeni */
.sss summary:hover{color:var(--vurgu)}
.sss summary:focus-visible{outline:2px solid var(--vurgu);outline-offset:4px}
/* İşaret: iki çizgiden artı, açılınca dikey çizgi kaybolup eksiye dönüyor.
Ok döndürmekten daha az gürültülü ve yönü belirsiz kalmıyor. */
.sss summary::after{
content:'';flex:none;width:14px;height:14px;position:relative;
background:
linear-gradient(var(--vurgu),var(--vurgu)) center/14px 1.5px no-repeat,
linear-gradient(var(--vurgu),var(--vurgu)) center/1.5px 14px no-repeat;
transition:transform .3s var(--ease),background-size .3s var(--ease)}
.sss details[open] summary::after{
background-size:14px 1.5px,1.5px 0;transform:rotate(180deg)}
.sss .cevap{padding:0 0 1.5em;max-width:62ch}
.sss .cevap p{color:var(--murekkep-soluk);line-height:1.65;margin:0}
.sss details[open] .cevap{animation:sss-ac .35s var(--ease) both}
@keyframes sss-ac{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Etiket listesi bağlantı içerebiliyor (404 sayfası). */
.etiket a{color:inherit;text-decoration:none;display:block;
transition:color .2s var(--ease)}
.etiket li:has(a){padding:0;border-color:var(--cizgi);transition:border-color .2s var(--ease)}
.etiket li:has(a) a{padding:.85em 1.1em}
.etiket li:has(a):hover{border-color:var(--vurgu)}
.etiket li:has(a):hover a{color:var(--vurgu)}
/* ══ yana kaydırmalı bölüm ══
Kaydırmayı CSS yapıyor, JS değil. Sürükleme taklidi yazmak yerine
tarayıcının kendi kaydırmasını kullanmanın üç somut faydası var:
dokunmatikte ivme ve lastik kenar bedava geliyor, klavye ve ekran
okuyucu zaten çalışıyor, ana iş parçacığı boşta kalıyor. */
/* .blok display:grid. Grid çocuğunun varsayılan min-width'i auto, yani
min-content'in altına inmeyi reddediyor: kaydırma alanı 390px'lik
kapsayıcının içinde 452px oluyordu ve bölüm mobilde taşıyordu.
min-width:0 bunun kanonik çözümü. Zincirde tek bir auto kalsa yeter,
o yüzden hem sarmalayıcıya hem raya konuyor. */
.kaydir{position:relative;min-width:0;margin-top:clamp(28px,4vw,44px)}
.ray{
display:flex;min-width:0;
overflow-x:auto;
scroll-snap-type:x mandatory;
/* Hızlı fiske ile iki slayt birden atlanmasın. */
scroll-behavior:smooth;
/* iOS'ta yatay kaydırma sayfayı geri götürmesin — kenardan başlayan
fiske tarayıcının "geri" hareketini tetikliyor, contain bunu keser. */
overscroll-behavior-x:contain;
border-radius:var(--r-xs);
scrollbar-width:none}
.ray::-webkit-scrollbar{display:none}
.ray:focus-visible{outline:2px solid var(--vurgu);outline-offset:3px}
/* Slayt TAM genişlik: tarayıcı, snap alanı kaydırma alanından büyükse
mandatory'yi kasten gevşetip proximity gibi davranıyor. */
.slayt{
flex:0 0 100%;min-width:0;
scroll-snap-align:start;scroll-snap-stop:always;
/* minmax(0,1fr): tek sütunlu hâlde sütunun varsayılan min-width:auto'u
içeriğin min-content'ine kilitleniyor ve sütun 358px'lik slaytın
içinde 398px'e şişip sağdan kırpıyordu. */
display:grid;gap:0;grid-template-columns:minmax(0,1fr);
background:var(--kalkik);border-radius:var(--r-xs);overflow:hidden}
/* ÖLÇÜLDÜ: slayt yüksekliği İÇERİKTEN geliyordu ve dikey eğitmen karesi
(430×960) 697px genişlikte 1556px'e açılıp bütün karuseli çekiyordu.
900px'lik görünümde slayt 1555px oluyordu: ne slaytın tamamı ne de
noktalar ekrana sığıyordu, bina fotoğrafı da 0.45 oranında dikey bir
şeride eziliyordu.
Artık yükseklik GÖRÜNÜMDEN geliyor; görsel sütunu onu doldurur, asla
belirlemez. Hangi fotoğraf konursa konsun slayt aynı boyda kalıyor. */
@media (min-width:820px){
.slayt{grid-template-columns:1.02fr 1fr;align-items:stretch;
height:min(540px,72svh)}
/* Dikey kare yatay bir pencerede kişiyi keser: o slaytta görsel
sütunu daraltılıyor, pencere de dikeye yaklaşıyor. */
.slayt:has(.slayt-gorsel.portre){grid-template-columns:.6fr 1fr}
}
/* Mobilde sabit bir min-height yerine EN-BOY ORANI: eğitmen kareleri
dikey (430×960), kısa bir bantta object-fit:cover gövdeden ince bir
şerit gösterirdi. 4/3 pencere hem yatay hem dikey kaynağı makul
kırpıyor; hangi kısmın kalacağını her görsel object-position ile
kendisi söylüyor. */
.slayt-gorsel{margin:0;position:relative;background:var(--bos);aspect-ratio:4/3}
.slayt-gorsel img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:820px){
.slayt-gorsel,.slayt-gorsel.portre{aspect-ratio:auto;height:100%;min-height:0}
/* Emniyet supabı: metin beklenmedik biçimde uzarsa slaytı büyütmesin. */
.slayt-yazi{overflow-y:auto}
}
/* Eğitmen fotoğrafları henüz yok. Boş kutu bırakmak yerine ne olduğunu
söyleyen bir yer tutucu — fotoğraf gelince .yok sınıfı silinip
![]()
konacak, başka değişiklik gerekmiyor. */
.slayt-gorsel.yok{display:grid;place-items:center;border:1px dashed var(--cizgi)}
.slayt-gorsel.yok span{font-size:var(--y-etiket);font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--murekkep-soluk);opacity:.55;text-align:center;line-height:1.7}
.slayt-yazi{padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;justify-content:center}
.slayt-ust{color:var(--vurgu);margin:0 0 .9em}
.slayt-yazi h3{font-size:clamp(1.35rem,1.05rem + 1.1vw,1.9rem);margin:0;line-height:1.2}
.slayt-yazi p{margin:1em 0 0;color:var(--murekkep-soluk);line-height:1.65;max-width:52ch}
.slayt-yazi p b{color:var(--murekkep);font-weight:600}
/* ── oklar ──
Sadece işaretçi cihazlarda. Dokunmatikte parmakla kaydırılıyor,
fotoğrafın üstünde iki düğme durmasının anlamı yok. */
.kaydir .ok{
position:absolute;top:50%;transform:translateY(-50%);
width:var(--hedef-rahat);height:var(--hedef-rahat);
display:none;place-items:center;
background:var(--zemin);color:var(--murekkep);
border:1px solid var(--cizgi);border-radius:var(--r-tam);
transition:background-color .2s var(--ease),border-color .2s var(--ease),opacity .2s var(--ease)}
.kaydir .ok svg{width:20px;height:20px}
.kaydir .ok:hover{background:var(--vurgu);border-color:var(--vurgu);color:var(--zemin)}
.kaydir .ok:focus-visible{outline:2px solid var(--vurgu);outline-offset:3px}
.kaydir .ok[disabled]{opacity:.28;cursor:default;pointer-events:none}
.kaydir .ok.geri{left:-22px}
.kaydir .ok.ileri{right:-22px}
@media (hover:hover) and (pointer:fine){.kaydir .ok{display:grid}}
/* Dar masaüstünde ok dışarı taşarsa içeri al */
@media (max-width:1320px){.kaydir .ok.geri{left:10px}.kaydir .ok.ileri{right:10px}}
/* ── noktalar ──
Görünen nokta 8px ama dokunma hedefi 44px: dolgu hedefi büyütüyor,
görsel ağırlığı büyütmüyor. */
.nokta{display:flex;justify-content:center;gap:2px;margin-top:18px}
.nokta button{
width:var(--hedef-rahat);height:var(--hedef-rahat);
display:grid;place-items:center;background:none;border:0;padding:0}
.nokta button::before{
content:'';width:8px;height:8px;border-radius:var(--r-tam);
background:var(--cizgi);
transition:background-color .25s var(--ease),width .25s var(--ease)}
.nokta button:hover::before{background:var(--murekkep-soluk)}
.nokta button[aria-selected="true"]::before{background:var(--vurgu);width:26px}
.nokta button:focus-visible{outline:2px solid var(--vurgu);outline-offset:-8px;border-radius:var(--r-s)}
@media (prefers-reduced-motion:reduce){
.ray{scroll-behavior:auto}
.nokta button::before{transition:none}
}
/* ══ mobil düzeltmeleri — hepsi ölçümden çıktı ══ */
/* Atlama bağlantısı odaklanınca 91×37 idi; dokunma hedefi 44 olmalı.
Sadece odakta göründüğü için görsel maliyeti yok. */
.skip{display:inline-flex;align-items:center;min-height:var(--hedef-rahat)}
/* Başlıktaki logo bağlantısı 45×26 ölçüyordu. Görsel aynı boyutta
kalıyor, TIKLANABİLİR alan 44'e çıkıyor. */
.mark{display:inline-flex;align-items:center;min-height:var(--hedef-rahat)}
/* 12px'lik --y-etiket büyük harf etiketler için doğru, ama içerik taşıyan
iki yerde okunmuyordu: paket dondurma notu ve alt bilgideki adres.
Bunlar etiket değil cümle — kendi boyutları olsun. */
.paketler .dondur{font-size:.8125rem;line-height:1.5}
/* Alt bilgi metni , değil — önceki seçicim tutmuyordu. */
footer .ic span{font-size:.875rem;line-height:1.6}
/* GERÇEK HATA: telefon ve Instagram bağlantıları tek satırda " · " ile
ayrılmış. Dokunmatikte ikisine de min-height:44px veriliyor ama satır
yüksekliği 22px; dar ekranda satır sarınca 44px'lik iki kutu ÜST ÜSTE
biniyor ve üstteki bağlantının alt yarısı alttakini yiyor.
Kapsayıcıyı flex yapmak her bağlantıyı kendi satır kutusuna alıyor;
row-gap da sarınca gerçek boşluk bırakıyor. HTML'e dokunmak gerekmedi. */
footer .ic span:has(a){display:flex;flex-wrap:wrap;align-items:center;
column-gap:.45em;row-gap:6px}
@media (max-width:520px){
/* Dar telefonda büyük harf etiketler de bir tık büyüsün. */
:root{--y-etiket:.8125rem}
/* Kaydırmalı slaytta yazı payı dar ekranda fazlaydı. */
.slayt-yazi{padding:22px 18px 26px}
.slayt-gorsel{aspect-ratio:5/4}
/* Eğitmen kareleri dikey (430×960). Yatay bir pencere görselin %64'ünü
atıyor ve kafayı kesiyordu; dikey pencere kişiyi bütün gösteriyor. */
.slayt-gorsel.portre{aspect-ratio:3/4}
}
/* Telefonda çentik/yuvarlak köşe: yatayda içerik kenara yapışmasın. */
@supports (padding:max(0px)){
.blok,.ic3,footer .ic{
padding-left:max(var(--gut,16px),env(safe-area-inset-left));
padding-right:max(var(--gut,16px),env(safe-area-inset-right))}
}
/* 404'teki bağlantı etiketleri 43px ölçüyordu — 1px eksik. */
.etiket li:has(a) a{min-height:var(--hedef-rahat);display:flex;align-items:center}
/* Kaydırma noktaları arası 2px'ti; 44px hedefler için sorun değil ama
4px parmak için gözle ayırt edilebilir bir sınır bırakıyor. */
.nokta{gap:4px}
/* Kırpmadan göster: cover kadrajı doldurup taşanı keserdi, contain
görselin tamamını sığdırıyor. Artan yer figürün --bos zemini. */
.slayt-gorsel.tam img{object-fit:contain}
/* Birleşen alanlar bölümünde iki kart grubunu ayıran ara başlık.
Bölüm başlığından hafif, ama gruplar arasındaki üyelik kapsamı
farkını görünür tutuyor. */
.grup-ad{margin:clamp(30px,4vw,46px) 0 14px;color:var(--vurgu)}
.grup-ad:first-of-type{margin-top:clamp(24px,3vw,34px)}
/* ÖLÇÜLDÜ: .95rem yazmıştım ama 21px çıkıyordu. index.html'in kendi
.lede kuralı aynı özgüllükte (0,1,0) ve belgede site.css'ten SONRA
geldiği için kazanıyordu — dipnot, bölüm girişiyle aynı sesle
bağırıyordu. Sıra yerine özgüllüğe güveniyoruz: .alanlar .lede.grup-not
(0,3,0) hangi dosya önce yüklenirse yüklensin kazanır.
Sayfadaki ölçek: 45.6 başlık → 21 giriş → 16 gövde → 12 etiket.
Not gövde seviyesine iniyor, girişin altına. */
.alanlar .lede.grup-not{margin-top:16px;font-size:1rem;line-height:1.6;opacity:.75;
max-width:52ch}
/* ══ ALAN ŞERİTLERİ ══
Her alanın ana sayfadaki kendi şeridi. Görsel ve yazı iki sütun;
şeritler sırayla yer değiştiriyor (.ters) ki sayfa aşağı inerken
göz aynı yolu tekrar etmesin. */
.alan-serit{padding:clamp(44px,7vh,80px) clamp(16px,4vw,40px);
border-top:1px solid rgba(94,80,63,.22)}
.serit-ic{max-width:1240px;margin:0 auto;display:grid;gap:clamp(22px,4vw,52px);
align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){
.serit-ic{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
/* Tek sayılı şeritlerde görsel sağa geçiyor. order kullanılıyor çünkü
DOM sırası okuma sırası: ekran okuyucu her şeritte önce görseli,
sonra yazıyı duyuyor, görsel hangi tarafta olursa olsun. */
.alan-serit.ters .serit-gorsel{order:2}
}
.serit-gorsel{margin:0;border-radius:var(--r-l);overflow:hidden;background:var(--bos);
aspect-ratio:4/3}
.serit-gorsel img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform 1.2s var(--ease)}
.alan-serit:hover .serit-gorsel img{transform:scale(1.03)}
.serit-ust{color:var(--murekkep-soluk);margin:0 0 .8em;opacity:.8}
.serit-yazi h3{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.2rem);margin:0;line-height:1.1}
.serit-yazi > p{margin:1em 0 0;color:var(--murekkep-soluk);line-height:1.65;max-width:52ch}
/* Üyelik kapsamı rozeti: renk TEK BAŞINA bilgi taşımıyor, yazının
kendisi zaten söylüyor. */
.kapsam{display:inline-block;margin-top:1em;font-size:var(--y-etiket);font-weight:600;
letter-spacing:.08em;text-transform:uppercase;padding:.5em .85em;border-radius:var(--r-xs);
border:1px solid var(--cizgi);color:var(--murekkep-soluk)}
.kapsam.dahil{border-color:var(--vurgu);color:var(--vurgu)}
.serit-bag{display:inline-flex;align-items:center;gap:.5em;margin-top:1.6em;
min-height:var(--hedef-rahat);text-decoration:none;color:var(--vurgu);
font-weight:600;border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.serit-bag span{transition:transform .25s var(--ease)}
.serit-bag:hover{border-bottom-color:var(--vurgu)}
.serit-bag:hover span{transform:translateX(4px)}
.serit-bag:focus-visible{outline:2px solid var(--vurgu);outline-offset:4px}
/* Şerit görseli artık bağlantı. Üzerine gelince beliren katman, büyük
görsele tıklamanın bir yere götürdüğünü söylüyor — yalnızca hover'a
güvenilmiyor: dokunmatikte katman kalıcı olarak yarı görünür duruyor
ve yazı tarafındaki bağlantı da yerinde kalıyor. */
.serit-gorsel{display:block;position:relative;text-decoration:none;color:inherit}
.serit-ustu{position:absolute;left:0;right:0;bottom:0;z-index:2;
display:flex;align-items:center;gap:.6em;
padding:clamp(28px,5vw,44px) clamp(14px,2.5vw,22px) clamp(12px,2vw,18px);
background:linear-gradient(to top,rgba(10,9,8,.86),rgba(10,9,8,0));
color:#fff;font-size:var(--y-etiket);font-weight:600;letter-spacing:.08em;
text-transform:uppercase;
opacity:0;transform:translateY(8px);
transition:opacity .3s var(--ease),transform .3s var(--ease)}
.serit-ustu i{font-style:normal;transition:transform .3s var(--ease)}
.serit-gorsel:hover .serit-ustu,
.serit-gorsel:focus-visible .serit-ustu{opacity:1;transform:none}
.serit-gorsel:hover .serit-ustu i{transform:translateX(5px)}
.serit-gorsel:focus-visible{outline:2px solid var(--vurgu);outline-offset:3px}
/* Dokunmatikte hover yok: ipucu baştan görünür, sadece daha sakin. */
@media (hover:none){
.serit-ustu{opacity:.92;transform:none}
}
/* Alt bilgi gezinmesi. sss.html ve kafeterya gibi üst menüde yeri olmayan
sayfalar buradan ulaşılabilir oluyor — hem ziyaretçi hem arama motoru
için. Üst menüden hafif: küçük, sakin, sarılan tek satır. */
/* Satır aralığı 2px'ti: sarınca alt alta gelen bağlantılar 2–7px
aralıkla kalıyordu, parmakla ıskalanır. Dokunmatikte her bağlantı
kendi 44px hedefini alıyor. */
/* Satır aralığı 6px'ti; alt bilgideki bağlantı sayısı on ikiden on
altıya çıkınca (dört çocuk dersi + gizlilik) dar ekranda üç satıra
sarıyor ve komşu satırlar 5px'e kadar yaklaşıyordu. Dokunmatikte
her bağlantı zaten 44px yüksekliğinde, sorun fare ile açılan dar
pencerede: orada da rahat ayrılsın. */
.alt-gez{display:flex;flex-wrap:wrap;gap:10px 20px;margin-bottom:18px;
padding-bottom:16px;border-bottom:1px solid rgba(94,80,63,.22)}
.alt-gez a{font-size:.8125rem;opacity:.72;white-space:nowrap;
display:inline-flex;align-items:center;min-height:var(--hedef-min)}
/* Dokunmatikte satır aralığı 2px'ti. Her bağlantı 44px yüksek
olduğu için WCAG'ın hedef boyutu karşılanıyordu, ama on altı
bağlantı yedi satıra sarınca 44px'lik iki hedef 2px arayla alt
alta geliyor — merkezleri 46px. Parmak için sınırda. 6px, toplam
24px yer karşılığında rahat bir ayrım veriyor. */
@media (pointer:coarse){.alt-gez{gap:6px 20px}
.alt-gez a{min-height:var(--hedef-rahat)}}
.alt-gez a:hover{opacity:1}
@media (min-width:900px){.alt-gez{gap:2px 22px}}
/* ══ DİL DEĞİŞTİRİCİ ══
Üst çubuğa JS ile ekleniyor (assets/dil.js).
ÖNCEKİ HÂLİ GÖZE BATIYORDU: kenarlıklı bir hap, içinde dolu taupe bir
düğme. Üst çubuk zaten kenarlıklı bir kapsül — içine ikinci bir kutu
koymak kutu içinde kutu demekti; dolu düğme de yanındaki ince büyük
harf bağlantıların yanında aşırı ağırdı.
Şimdi gezinme bağlantılarıyla AYNI dili konuşuyor: aynı punto, aynı
harf aralığı, aynı büyük harf, aynı sönük opaklık. Seçili dil dolgu
değil RENK alıyor. Kutu yok, yalnızca gezinmeden ayıran ince bir
çizgi var. */
.dil{display:flex;align-items:center;gap:2px;margin-left:auto;flex:none;
padding-left:18px;position:relative}
/* Gezinmeden ayıran ince çizgi — kutu değil, sınır. */
.dil::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
width:1px;height:16px;background:var(--cizgi);opacity:.7}
/* Düğme VE bağlantı: kök sayfada çalışma anı çevirisi yaptığı için
düğme, /en/ ve /ru/ altındaki önceden çevrilmiş sayfalarda kardeş
adrese gittiği için bağlantı. Görünüşleri aynı olmalı. */
.dil button,.dil a{
min-width:34px;min-height:32px;padding:0 6px;
display:inline-flex;align-items:center;justify-content:center;
background:none;border:0;text-decoration:none;
font-family:inherit;font-size:var(--y-etiket);font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--murekkep);opacity:.55;
transition:opacity .2s var(--ease),color .2s var(--ease)}
.dil button:hover,.dil a:hover{opacity:1}
.dil button[aria-pressed="true"],.dil a[aria-current="true"]{color:var(--vurgu);opacity:1}
.dil button:focus-visible,.dil a:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px;border-radius:var(--r-xs)}
/* Mobilde hamburger menünün içine düşüyor: çubukta üç düğme daha
sığdırmak logoyu eziyordu. Menüde artık ayırıcı çizgi yatay. */
@media (max-width:939px){
.top .dil{order:3;margin:14px 0 2px;padding:12px 0 0}
.top .dil::before{left:0;top:0;transform:none;width:34px;height:1px}
.top:not(.acik) .dil{display:none}
.top.acik .dil{display:flex;align-self:flex-start}
}
@media (pointer:coarse){.dil button,.dil a{min-height:40px}}
/* ══ ÖZEL İMLEÇ ══
Çubuksuz üçgen uç. Klasik ok imlecinin kuyruğu yok; geriye yalnızca
ok başı kalıyor — konum işaretine benzeyen sade bir üçgen.
Dört karar ölçüye dayanıyor, göz kararına değil:
1. GÖRÜNÜRLÜK — sayfa zemini koyu ama galeri fotoğrafları ve harita
AÇIK. Tek renk kontur onların üstünde kaybolurdu; her imlecin
altında yarı saydam koyu bir kontur var. Açık zeminde o görünüyor,
koyu zeminde açık olan. Tek dosya, iki durum.
2. SICAK NOKTA — 2 2, yani iğnenin tam ucu. Görüntüden ölçüldü.
Yanlış olsaydı tıklama gözle görülen noktadan sapardı.
3. ÇÖZÜNÜRLÜK — image-set ile 2× sürüm veriliyor; retina ekranda
imleç bulanıklaşmasın. Koordinatlar 1× görüntünün koordinatı,
ölçek değişse de aynı kalıyor.
4. KAPSAM — yalnızca (hover:hover) ve (pointer:fine). Dokunmatikte
imlecin karşılığı yok; orada tanımlamak boşuna indirme demek.
Sonda mutlaka bir anahtar sözcük var (auto / pointer / text): görüntü
yüklenemezse ya da tarayıcı boyutu reddederse imleç kaybolmasın. */
@media (hover:hover) and (pointer:fine){
body{
cursor:url("imlec.png") 2 2, auto;
cursor:image-set(url("imlec.png") 1x, url("imlec-2x.png") 2x) 2 2, auto;
}
/* Tıklanabilir olan her şeyde vurgu renginde: imlecin nerede iş
yaptığı rengiyle belli oluyor, ayrı bir ikon gerekmiyor. */
a, button, summary, [role="button"], .spot, .kart, label,
input[type="submit"], input[type="button"]{
cursor:url("imlec-vurgu.png") 2 2, pointer;
cursor:image-set(url("imlec-vurgu.png") 1x, url("imlec-vurgu-2x.png") 2x) 2 2, pointer;
}
/* Metin alanlarında özel imleç zarar verir: nereye yazılacağı
görünmez olur. Sistem imleci kalıyor. */
input:not([type="submit"]):not([type="button"]), textarea, select,
[contenteditable]{cursor:text}
/* Devre dışı öge tıklanamaz, imleci de öyle söylesin. */
[disabled], [aria-disabled="true"]{cursor:not-allowed}
}
/* ══ HAVUZ SEZON DURUMU ══
assets/sezon.js dolduruyor. Landing'deki canlı açık/kapalı
göstergesiyle aynı görsel dil: renkli nokta + cümle. Renk tek
başına bilgi taşımıyor, cümle de aynı şeyi söylüyor. */
.sezon-kutu{display:flex;align-items:center;gap:10px;
margin:1.4em 0 0;padding:12px 16px;border-radius:var(--r-m);
border:1px solid var(--cizgi);background:rgba(242,244,243,.04);
font-size:var(--y-govde);color:var(--murekkep-soluk);max-width:56ch}
.sezon-nokta{width:9px;height:9px;flex:none;border-radius:var(--r-tam);
background:currentColor}
.sezon-nokta.acik{color:#7FD48B}
.sezon-nokta.kapali{color:#E48A8A}
.sezon-metin{min-width:0}
.sezon-ek{margin-left:auto;padding-left:14px;font-size:var(--y-etiket);
color:var(--murekkep-soluk);white-space:nowrap}
.sezon-ek b{color:var(--murekkep);font-weight:600}
@media (max-width:520px){
.sezon-kutu{flex-wrap:wrap}
.sezon-ek{margin-left:19px;padding-left:0;flex-basis:100%}
}
/* Sezon kutusundaki "sorun" bağlantısı. Program tablosundaki
.prg-bos ile aynı dil: yeşil yalnızca ikonda, çerçeve hover'da
vurgu rengine dönüyor. */
/* 36px'ti; dokunma hedefi olarak sınırın altındaydı. Program
tablosundaki kardeşi (.prg-bos) zaten 44px. */
.sezon-sor{display:inline-flex;align-items:center;gap:8px;margin-left:auto;
min-height:44px;padding:0 14px;border-radius:var(--r-s);
border:1px solid var(--cizgi);text-decoration:none;white-space:nowrap;
font-size:var(--y-etiket);color:var(--murekkep-soluk);
transition:border-color .2s var(--ease),color .2s var(--ease)}
.sezon-sor svg{width:15px;height:15px;flex:none;color:#25D366}
.sezon-sor:hover{border-color:var(--vurgu);color:var(--murekkep)}
.sezon-sor:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
@media (max-width:520px){
.sezon-sor{margin:10px 0 0 19px;flex-basis:100%}
}