/* ═══════════════════════════════════════════════════════════════════════
VİLLALAR · üst üste binen kartlar
=======================================================================
TEK YAZI TİPİ: Manrope. Ortak .srf (Instrument Serif) KULLANILMAZ —
başlık ve rakamlar hero'nun ölçüsüyle: 800 · lh 1.03 · ls -.035em.
(21 Ağu ve 23 Ağu 2026 · Beyefendi: "başka font olmasın".)
BOŞLUK TEK BİRİMDEN: --vil-bo. Kart içindeki her aralık bunun katıdır
(.45 · .55 · .7 · 1 · 1.5 · 2). Göz kararı boşluk yok, hepsi aynı ritim.
ÖLÇEK: gövde 1rem/1.65 · etiket .7rem/1.3 · değer 1rem/1.3 ·
kart başlığı clamp(1.8rem,3vw,2.6rem)/1.03 · bölüm başlığı istatistik
bölümüyle birebir aynı: var(--blm-bsl)/1.03.
Yığılma CSS'in işi (.vil-oge sticky). Kat sekmesi ve galeri seçimi de
CSS: gizli radyo düğmeleri. JS yalnız derinlik, ray ortalama, hover
önizleme, parallax ve büyüteç.
DİKKAT: position:sticky overflow'u visible olmayan ATA içinde çalışmaz.
DİKKAT: .vil-kart'a filter/backdrop-filter EKLEME.
Her seçici `vil` ile başlar — ihlali site-uret.py --denetle durdurur.
═════════════════════════════════════════════════════════════════════ */
.vil{
position:relative;
background:var(--z1);
padding-block:var(--blm-pd);
--vil-ust:calc(var(--nav-h) + .75rem); /* kartın yapıştığı üst hiza */
--vil-basamak:.9rem; /* kartın peek payı */
--vil-yaricap:var(--yr-l);
--vil-bo:var(--bo-1); /* TEK boşluk birimi */
/* TEK YAZI ÖLÇEĞİ — kartın içinde üç boy vardır, dördüncüsü yoktur.
Her yerde bu değişkenler kullanılır; "şu yazı neden başka boyda"
sorusunun kaynağı, göz kararı yazılan tek tük px'lerdi. */
--vil-y1:var(--yz-etk); /* etiket · büyük harf · 700 */
--vil-y2:var(--yz-gvd); /* gövde · liste · açıklama */
--vil-y3:var(--yz-gir); /* değer · oda adı · vurgulu satır */
}
/* ── bölüm başlığı ──────────────────────────────────────────────── */
/* BAŞLIK BLOĞU · iki sütun — başlık solda, giriş sağda.
Alt alta dizilince blok 90 px uzuyor ve sağdaki yarı boş kalıyordu.
Ölçüler ortak token'lardan; bu bölüm kendi başlık boyunu yazmaz. */
.vil-bas{display:grid;justify-items:center;text-align:center;
gap:var(--blm-bsl-ara);margin-inline:auto;
margin-block-end:var(--blm-bas-alt)}
.vil-bas > p{max-inline-size:58ch;margin:0}
.vil-bas-bsl{
font-family:Manrope,ui-sans-serif,sans-serif;font-weight:800;
font-size:var(--blm-bsl);line-height:1.05;letter-spacing:-.035em;
margin:0;max-inline-size:18ch;text-wrap:balance;color:var(--mrk);
}
html[lang="ar"] .vil-bas-bsl{font-family:"Noto Kufi Arabic",sans-serif;letter-spacing:0;line-height:1.35}
.vil-giris{max-inline-size:60ch;line-height:1.65}
/* ── yığın ──────────────────────────────────────────────────────── */
/* Yığının altındaki pay kısa: 22svh iken üçüncü kart oturduğunda altta
yalnız bölüm zemini kalıyor, sıradaki bölüm hiç görünmüyordu. */
/* ── SLAYT RAYI ─────────────────────────────────────────────────
Kapsayıcı ve kaydırma yapısı, alternatif ağacındaki v5 kurgusundan
alındı (Beyefendi'nin isteği): ray SAYFA GENİŞLİĞİNDE, kenar payı
site kabıyla aynı hizada, paneller arasında boşluk var ve komşu panel
kenardan görünüyor. Kartın İÇİ değişmedi.
Kenar payı yüzdeyle hesaplanır, 100vw ile değil: vw dikey kaydırma
çubuğunu da sayar ve sayfaya yatay taşma ekler. */
.vil-iz{
position:relative;display:flex;
gap:var(--bo-2);
overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
scroll-snap-type:inline mandatory;scroll-behavior:smooth;
scrollbar-width:none;-ms-overflow-style:none;
/* Panel TAM kap genişliğinde; komşular kenar payında akışkan kalır. */
/* Panel CONTAINER hattında: navigasyon şeridinin içeriğiyle,
bölüm başlıklarıyla ve formla aynı sol/sağ kenar. Ray tam kanat
kalır, komşu panel o kenarın dışında akışkan görünür. */
padding-inline:var(--kap-pay);
padding-block-end:var(--blm-pd);
}
.vil-iz::-webkit-scrollbar{display:none}
.vil-iz:focus-visible{outline:2px solid var(--aksan);outline-offset:-2px}
.vil-iz[data-suruk="1"]{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;
user-select:none;-webkit-user-select:none}
/* Yerleşik görsel sürüklemesi kapalı: açıkken imleç bir kart görselinin
üstünden çekildiğinde tarayıcı kendi sürükle-bırak'ını başlatıp
işaretçiyi iptal ediyor ve ray sürüklenemiyordu. */
.vil-iz img{-webkit-user-drag:none}
@media (prefers-reduced-motion:reduce){ .vil-iz{scroll-behavior:auto} }
/* Her villa bir slayt: rayın tam genişliği kadar yer kaplar. */
/* Panel rayın iç genişliği kadar; komşusu kenar payında görünür. */
.vil-oge{position:static;flex:none;inline-size:100%;min-inline-size:0;
scroll-snap-align:center;scroll-snap-stop:always;
transition:opacity .45s var(--egri), scale .45s var(--egri);
}
/* Komşu paneller geri çekilir: küçük ve soluk. Odak ortadaki panelde
kalsın diye — kenarda duran yarım kart dikkat çalıyordu.
BULANIKLIK KALDIRILDI · 27 Ağu 2026, Beyefendi: "blurlaşmayı kaldır,
geçişlerde sistemi yavaşlatıyor". filter:blur her karede yeniden çizim
ister ve öğeyi kompozit katmana alır; geçiş boyunca üç panelde birden
çalışıyordu. Odak artık yalnız opaklık ve ölçekle kuruluyor — ikisi de
GPU'da bileşik özellik, yeniden çizim istemez. */
.vil-oge:not([data-etkin]){
opacity:.62;scale:.96;
pointer-events:none;
}
.vil-iz[data-oynuyor] .vil-oge{opacity:1;scale:1}
@media (prefers-reduced-motion:reduce){
.vil-oge{transition:none}
.vil-oge:not([data-etkin]){opacity:.55;scale:1}
}
/* ── kart ───────────────────────────────────────────────────────── */
.vil-kart{
position:relative;
display:grid;grid-template-columns:1fr 1fr 1fr;
grid-template-areas:"sol foto sag";
gap:calc(var(--vil-bo) * 2);
padding:var(--kart-pd);
border:1px solid var(--cizgi2);
border-radius:var(--vil-yaricap);
background:var(--vil-ton);
overflow:hidden;
transform-origin:50% 0;
/* KART BULANIKLIĞI KALDIRILDI · 27 Ağu 2026. --vil-bulanik hiçbir yerde
yazılmıyordu (hep 0px), ama blur(0px) bile öğeyi kompozit katmana
alıp her geçişte yeniden çizim maliyeti doğuruyordu. Ayrıca filter
containing block kurar ve sabit konumlu alt öğeleri hapseder. */
/* Kart boyu SABİT: sekme değişince (özellikle "Tüm mekânlar") kart
uzuyordu. Yükseklik tek yerden gelir, içerik kendi içinde kayar. */
block-size:min(38rem, calc(100svh - var(--vil-ust) - 1.25rem));
/* Kart zemini koyulaştıkça ortak --mrk2/--mrk3 AA'nın altına düşüyor
(ölçüldü: gövde 4,22/3,71/3,29 · etiket 2,62/2,3/2,04). */
--vil-mtn:color-mix(in oklab, var(--mrk) 45%, var(--mrk2));
--vil-etk:color-mix(in oklab, var(--mrk) 64%, var(--mrk3));
--vil-dugme:color-mix(in oklab, var(--aksan) 80%, var(--mrk));
}
/* Üç ton TEK TABANDAN türer; değişen yalnız kartın kendi mürekkebinden
ne kadar karıştığı. Önce her ton ayrı oranda toprakla karışıyordu ve
C ailesinden kopuyordu — ölçüldü: koyu temada A ve B yeşile çalarken
(G en yüksek) C kahveye dönüyordu (R en yüksek). Aynı taban + artan
mürekkep, hem rengi hem basamağı tutarlı kılıyor. */
.vil-kart{--vil-taban:color-mix(in oklab, var(--z2) 95%, var(--toprak-mtn) 5%)}
.vil-kart[data-ton="a"]{--vil-ton:var(--vil-taban)}
.vil-kart[data-ton="b"]{--vil-ton:color-mix(in oklab, var(--vil-taban) 92%, var(--mrk))}
.vil-kart[data-ton="c"]{--vil-ton:color-mix(in oklab, var(--vil-taban) 84%, var(--mrk))}
/* Sönme PERDEYLE: kartın kendi opacity'si alttaki kartı sızdırıyor. */
.vil-kart::after{
content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
background:var(--z1);opacity:var(--vil-perde,0);border-radius:inherit;
}
/* Radyo düğmeleri görünmez ama ODAKLANABİLİR — display:none klavyeyi keser. */
.vil-gizli{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;
overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vil-ikon{inline-size:1.05rem;block-size:1.05rem;flex:none}
/* ══════════ SOL ══════════ */
.vil-sol{grid-area:sol;display:flex;flex-direction:column;gap:var(--vil-bo);
min-inline-size:0;min-block-size:0}
.vil-rozet{
display:inline-flex;align-items:center;gap:.5rem;inline-size:max-content;margin:0;
font-size:var(--vil-y1);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
line-height:1.3;color:var(--vil-etk);
}
.vil-rozet::before{content:"";inline-size:.45rem;block-size:.45rem;border-radius:50%;
background:var(--vil-tip);flex:none}
html[lang="ar"] .vil-rozet{letter-spacing:0;text-transform:none}
.vil-tip{
font-family:Manrope,ui-sans-serif,sans-serif;font-weight:800;
font-size:var(--blm-bsl);line-height:1.03;letter-spacing:-.035em;
margin:0;color:var(--mrk);
}
html[lang="ar"] .vil-tip{font-family:"Noto Kufi Arabic",sans-serif;letter-spacing:0;line-height:1.35}
.vil-tanit{font-size:var(--vil-y2);line-height:1.65;color:var(--vil-mtn);margin:0;max-inline-size:40ch}
/* Açılış cümlesi vurgulu. Manrope'un gerçek italiği yok — eğik yazı
sentetik çıkardı; vurgu ağırlık ve mürekkeple veriliyor. */
.vil-vurgu{font-weight:700;color:var(--mrk)}
/* Ölçüler: ikon · etiket · değer — üçü de her satırda aynı x'te başlar. */
/* 25 Ağu 2026 · Beyefendi: dört sütun, iki satır. Sekiz ölçü yan yana
taranıyor; alt alta sekiz satır sütunu gereksiz uzatıyordu.
Yerleşkedeki pay ve emsal ünite kaldırıldı; yatak, banyo, toplam
mekân ve kat eklendi — hepsi bu sayfadaki kat planı listelerinden
sayıldı, uydurulmadı. */
/* LİSTE + IZGARA. Uzun m² değerleri dar sütunda üç satıra bölünüyordu
(119,23–177,54 m²). Onlar tam genişlikte SATIR; kısa sayılar tek
sıralık ızgara. */
/* LİSTE + IZGARA. Beş sütunluk sıra dardı: etiketler iki satıra
bölünüyor, değerler birbirinden kaçıyordu. Kısa ölçüler artık İKİ
sütun; uzun m² değerleri tam genişlikte satır. */
.vil-olcu{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:calc(var(--vil-bo) * .6) 0;margin:0;
}
/* Sütun oluğu BOŞLUK değil, öğenin kendi iç payı. Ayraç çizgisi öğenin
üst kenarında; aralarında oluk olsaydı çizgi ikiye bölünür, üstteki
tam genişlik satırların kesintisiz çizgisiyle uyuşmazdı. Kutular
bitişik durunca çizgi tek parça okunur. nth-child parite hilesi de
gerekmez — üstteki satır sayısı değişince sessizce bozulurdu. */
.vil-olcu > div:not(.vil-olcu-uzun){padding-inline-end:calc(var(--vil-bo) * .9)}
.vil-olcu > div{
display:grid;grid-template-columns:1.05rem 1fr;grid-template-rows:auto auto;
gap:.15rem calc(var(--vil-bo) * .45);align-items:center;align-content:start;
padding-block-start:calc(var(--vil-bo) * .55);
border-block-start:1px solid var(--cizgi2);
}
.vil-olcu .vil-ikon{grid-row:1 / span 2;align-self:start;margin-block-start:.1rem}
.vil-olcu dt{grid-column:2;font-size:var(--yz-etk)}
.vil-olcu dd{grid-column:2;font-size:var(--yz-gvd);font-weight:700;color:var(--mrk)}
/* Uzun m² satırları: tam genişlik, etiket solda değer sağda TEK satırda.
Bu kurallar dt/dd temel kurallarından SONRA ve daha yüksek özgüllükle
yazılmalı; önce yazıldığında temel kural eziyor ve etiketle değer aynı
sütuna binip üst üste geliyordu (ölçüldü). */
.vil-olcu > .vil-olcu-uzun{
grid-column:1 / -1;
grid-template-columns:1.05rem auto minmax(0,1fr);
grid-template-rows:auto;
align-items:baseline;
}
.vil-olcu > .vil-olcu-uzun .vil-ikon{grid-row:1;grid-column:1;align-self:center;margin-block-start:0}
.vil-olcu > .vil-olcu-uzun dt{grid-column:2;grid-row:1;white-space:nowrap}
.vil-olcu > .vil-olcu-uzun dd{grid-column:3;grid-row:1;text-align:end;white-space:nowrap}
@media (max-width:30rem){
.vil-olcu{grid-template-columns:1fr}
}
.vil-olcu .vil-ikon{color:var(--vil-etk)}
.vil-olcu dt{font-size:var(--vil-y1);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
line-height:1.3;color:var(--vil-etk)}
.vil-olcu dd{margin:0;font-size:var(--vil-y3);line-height:1.3;font-weight:700;color:var(--mrk);text-align:start}
/* ═══ KÜNYE A1 DÜZENİ ═══ 27 Ağu 2026, Beyefendi: "rakam ve text iç içe
giriyor". Ölçüldü: yarım hücrelerde değer etiketin ALTINDA ve sola yaslı
duruyordu; üstteki m² satırlarında ise etiketin YANINDA ve sağa yaslı.
Aynı künye içinde iki okuma yönü vardı. Artık dördü de tek satırlı.
İki ek sapma daha giderildi:
· sol hücrenin rakamı ile sağ hücrenin ikonu arası 11 px → 36 px
· sağ hücrenin değeri kart kenarından 11 px içerideydi → 0 (üst
satırlarla aynı hizada)
Sütun tarafı nth-child paritesiyle DEĞİL sınıfla belirlenir: üstteki
tam satırların sayısı değişirse parite sessizce ters döner. */
.vil-olcu{--vil-sutun-oluk:2.25rem}
.vil-olcu > div:not(.vil-olcu-uzun){
grid-template-columns:1.05rem auto minmax(0,1fr);grid-template-rows:auto;align-items:baseline}
.vil-olcu > div:not(.vil-olcu-uzun) .vil-ikon{grid-row:1;grid-column:1;align-self:center;margin-block-start:0}
.vil-olcu > div:not(.vil-olcu-uzun) dt{grid-column:2;grid-row:1;white-space:nowrap}
.vil-olcu > div:not(.vil-olcu-uzun) dd{grid-column:3;grid-row:1;text-align:end;white-space:nowrap}
/* Seçicide `div` ZORUNLU: `:not(.vil-olcu-uzun)` içindeki sınıf özgüllüğe
sayılıyor (0,2,1). Sınıfı tek başına yazınca (0,2,0) üstteki kural yener
ve oluk hiç uygulanmaz — ölçüldü, mesafe 11 px'ten 0'a düşmüştü. */
.vil-olcu > div.vil-yari--sol{padding-inline-end:var(--vil-sutun-oluk)}
.vil-olcu > div.vil-yari--sag{padding-inline-end:0}
@media (max-width:30rem){ .vil-olcu > div.vil-yari--sol{padding-inline-end:0} }
html[lang="ar"] .vil-olcu dt{letter-spacing:0;text-transform:none}
.vil-eylem{display:flex;flex-wrap:wrap;gap:calc(var(--vil-bo) * .7);margin-block-start:auto}
.vil-dugme{
display:inline-flex;align-items:center;gap:.55rem;
padding:.8rem 1.15rem;border-radius:var(--yr-xl);
background:var(--vil-dugme);color:var(--z1);
font-size:var(--vil-y2);font-weight:700;letter-spacing:.02em;line-height:1.2;
transition:background var(--mikro) var(--egri);
}
.vil-dugme:hover{background:color-mix(in oklab, var(--aksan) 62%, var(--mrk))}
.vil-dugme--sade{background:none;color:var(--mrk);border:1px solid var(--cizgi)}
.vil-dugme--sade:hover{background:color-mix(in oklab, var(--mrk) 8%, transparent)}
/* ══════════ ORTA · galeri ══════════ */
.vil-fotokap{grid-area:foto;display:flex;flex-direction:column;
gap:calc(var(--vil-bo) * .7);min-inline-size:0;min-block-size:0}
.vil-foto{
position:relative;margin:0;flex:1;min-block-size:15rem;min-inline-size:0;
/* CLIP: hidden kaydırma kabı yaratır, view() çizelgesi donar. */
border-radius:calc(var(--vil-yaricap) - .35rem);overflow:clip;background:var(--z3);
--vil-olcek:1.08; /* YAKIN başlar */
--vil-par:0px; /* parallax · kaydırma çizelgesi yazar (aşağıda) */
}
.vil-foto:hover{--vil-olcek:1} /* imleç gelince UZAKLAŞIR */
/* ═══ ODA ÖNİZLEMESİ ═══ 27 Ağu 2026, Beyefendi: "oda üzerine gelince
ilgili odanın görseli ortada açılsın". Odaların hepsi için ayrı ![]()
koymadım: villa başına 8–9 oda × 3 villa = 27 gizli görsel demekti ve
gizli lazy görseller yine de indiriliyor. Tek katman var, kaynağı
betik yazıyor. Yalnız işaretçili cihazlarda: dokunmatikte "hover"
ilk dokunuşa yapışır ve satır tıklanamaz hâle gelirdi. */
.vil-oda-onizleme{
position:absolute;inset:0;inline-size:100%;block-size:100%;
object-fit:cover;opacity:0;z-index:2;pointer-events:none;
transition:opacity var(--mikro) var(--egri);
}
.vil-oda-onizleme[data-gorunur]{opacity:1}
@media (prefers-reduced-motion:reduce){ .vil-oda-onizleme{transition:none} }
.vil-kare{
position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;
opacity:0;
transform:translate3d(0,var(--vil-par),0) scale(var(--vil-olcek));
transition:opacity 420ms var(--egri),transform 900ms var(--egri);
}
/* Paftalar belge: kırpılmaz, tam görünür. */
.vil-kare[data-tur="plan"]{object-fit:contain;background:var(--keten);padding:.4rem}
/* Rozet ve büyüteç KARTIN tonundan beslenir. Sabit koyu çip açık temada
yabancı duruyordu ("ne dark ne light'a uyuyor"). */
.vil-kapak{position:absolute;inset-block-start:0;inset-inline:0;z-index:2;
padding:calc(var(--vil-bo) * .8);pointer-events:none}
.vil-etiket{
display:inline-flex;align-items:center;gap:.55rem;padding:.45rem 1rem;border-radius:var(--yr-xl);
background:color-mix(in oklab, var(--z1) 90%, transparent);color:var(--mrk);
font-size:var(--yz-etk);font-weight:700;letter-spacing:.1em;line-height:1.2;
}
.vil-etiket::before{content:"";inline-size:.45rem;block-size:.45rem;border-radius:50%;
background:var(--vil-tip);flex:none}
.vil-buyut{
position:absolute;z-index:2;inset-block-end:calc(var(--vil-bo) * .7);
inset-inline-end:calc(var(--vil-bo) * .7);
inline-size:2.4rem;block-size:2.4rem;border-radius:50%;display:grid;place-items:center;
cursor:pointer;border:1px solid var(--cizgi);
background:color-mix(in oklab, var(--z1) 90%, transparent);color:var(--mrk);
transition:background var(--mikro) var(--egri),transform var(--gecis) var(--egri);
}
.vil-buyut:hover{background:var(--z1);transform:scale(1.07)}
/* Ray: beşi görünür, kalanı kaydırılır; etkin olan JS ile ortalanır. */
/* Kaydırma çubuğu etiketlerin üstünü çiziyordu; gizlendi, yerine iki ok
kondu — rayın kaydığı da böylece görünür oldu. */
.vil-raykap{position:relative;display:flex;align-items:flex-start;gap:.45rem;
flex:none;min-inline-size:0}
.vil-ray{
display:grid;grid-auto-flow:column;
grid-auto-columns:calc((100% - 4 * var(--vil-bo) * .45) / 5);
gap:calc(var(--vil-bo) * .45);
overflow-x:auto;scroll-snap-type:inline proximity;
min-inline-size:0;flex:1;
scrollbar-width:none;overscroll-behavior-inline:contain;
}
.vil-ray::-webkit-scrollbar{display:none}
/* Ok YUVARLAK İÇİNDE DEĞİL, yalnız ok. Dikeyde küçük resim bandının
ortasına oturur — etiketler de sayılınca ok aşağıda kalıyordu.
Bandın yüksekliğini JS ölçüp --vil-kh olarak yazar. */
.vil-rayok{
flex:none;padding:0;border:0;background:none;cursor:pointer;
color:var(--vil-etk);display:grid;place-items:center;
margin-block-start:calc(var(--vil-kh, 3.2rem) / 2);
transform:translateY(-50%);
transition:color var(--mikro) var(--egri),opacity var(--mikro) var(--egri);
}
.vil-rayok:hover{color:var(--mrk)}
.vil-rayok[disabled]{opacity:.25;cursor:default}
.vil-rayok .vil-ikon{inline-size:1.15rem;block-size:1.15rem}
html[dir="rtl"] .vil-rayok .vil-ikon{transform:scaleX(-1)}
.vil-kucuk{display:grid;gap:.3rem;cursor:pointer;min-inline-size:0;scroll-snap-align:center}
.vil-kucuk img{
inline-size:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--yr-s);
opacity:.45;outline:2px solid transparent;outline-offset:-2px;
transition:opacity var(--mikro) var(--egri),outline-color var(--mikro) var(--egri);
}
.vil-kucuk[data-tur="plan"] img{object-fit:contain;background:var(--keten)}
.vil-kucuk:hover img{opacity:.9}
.vil-kucuk span{
font-size:var(--yz-etk);font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;
color:var(--vil-etk);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
html[lang="ar"] .vil-kucuk span{letter-spacing:0;text-transform:none}
/* ══════════ SAĞ · sekme ve sahneler ══════════ */
.vil-sag{grid-area:sag;display:flex;flex-direction:column;
gap:calc(var(--vil-bo) * .7);min-inline-size:0;min-block-size:0}
/* Kutulu pil, aktif etiket kabın kenarına dayanınca taşıyordu.
Alt çizgili sekme taşmaz ve kartın saç teli diliyle aynı. */
.vil-sekme{display:flex;gap:1.2rem;padding:0;border:0;flex:none;
border-block-end:1px solid var(--cizgi2);overflow-x:auto;scrollbar-width:none}
.vil-sekme::-webkit-scrollbar{display:none}
.vil-sekme label{
padding:.5rem 0;cursor:pointer;white-space:nowrap;
border-block-end:2px solid transparent;margin-block-end:-1px;
font-size:var(--vil-y1);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
line-height:1.3;color:var(--vil-etk);
transition:color var(--mikro) var(--egri),border-color var(--mikro) var(--egri);
}
.vil-sekme label:hover{color:var(--mrk)}
html[lang="ar"] .vil-sekme label{letter-spacing:0;text-transform:none}
/* Panel kendi içinde kayar. Lenis sayfayı yumuşattığı için tekerleği
yutuyordu: HTML'de data-lenis-prevent var, Lenis o ağacı atlıyor.
Kaydırma çubuğu gizli (yazıların üstünü çiziyordu); kaydırılabilirliği
alttaki yumuşak iniş gösteriyor. */
/* "Odaları gez" öne çıkar: sekmelerin üstünde kendi başlığı var. */
/* flex:none — uzun liste yanında başlık ve sekme sıkışıp yok oluyordu
(ölçüldü: sekme satırı birkaç piksele iniyordu). */
.vil-sag-bas{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;flex:none}
.vil-sag-bsl{margin:0;font-family:Manrope,ui-sans-serif,sans-serif;font-weight:800;
font-size:var(--yz-gir);line-height:1.3;letter-spacing:-.02em;color:var(--mrk)}
html[lang="ar"] .vil-sag-bsl{font-family:"Noto Kufi Arabic",sans-serif;letter-spacing:0}
.vil-sag-say{font-size:var(--vil-y1);font-weight:700;letter-spacing:.12em;
text-transform:uppercase;line-height:1.3;color:var(--vil-etk)}
html[lang="ar"] .vil-sag-say{letter-spacing:0;text-transform:none}
/* Panel + KENDİ kaydırma çubuğumuz.
Yerleşik çubuk işe yaramadı: macOS/Chrome kaybolan (overlay) çubuk
kullanıyor, ::-webkit-scrollbar'a yer ayırmıyor (ölçüldü: ayrılan
genişlik 0 px) ve scrollbar-width yazınca webkit kuralları tamamen
yok sayılıyor. Bu yüzden çubuk elle çizilir: her tarayıcıda aynı,
her zaman görünür, yalnız içerik taşarken. */
.vil-katkap{display:none;position:relative;flex:1 1 auto;min-block-size:0}
.vil-kat{
display:grid;gap:calc(var(--vil-bo) * .45);align-content:start;
block-size:100%;overflow-y:auto;overscroll-behavior:contain;
padding-block-end:.9rem; /* son satır düğmeye yapışmasın */
scrollbar-width:none;
}
/* ÇUBUK PAYI KOŞULLU · 27 Ağu 2026, Beyefendi: "ezbere değil otomatik
olsun; scroll'a gerek yoksa orası daha geniş olmalı".
Pay eskiden koşulsuzdu: üç odalı sekmede de 1,6 rem sağ boşluk
duruyordu ve panelin sağ kenarı sol kenardan 26 px dar görünüyordu
("Kat planlarını aç" düğmesi tam kenarda dururken oda kartları içeride
kalıyordu). Artık pay YALNIZ çubuk varken açılır. */
.vil-katkap[data-kaydir="1"] .vil-kat{padding-inline-end:1.6rem}
/* Taşma yoksa kap hiç kaydırılabilir olmasın: içerik tam otururken bile
birkaç piksellik esneme "kaymaya çalışıyor" hissi veriyordu. */
.vil-katkap:not([data-kaydir]) .vil-kat{overflow-y:hidden}
.vil-kat::-webkit-scrollbar{display:none}
/* Solma yalnız DAHA AŞAĞISI VARKEN. Sona gelince maske son satırı da
silikleştiriyordu — okunmuyordu. */
.vil-katkap[data-kaydir="1"] .vil-kat{
mask-image:linear-gradient(to bottom,#000 calc(100% - 2rem),transparent);
}
.vil-katkap[data-kaydir="1"][data-son="1"] .vil-kat{mask-image:none}
.vil-cubuk{
position:absolute;inset-block:0;inset-inline-end:2px;inline-size:5px;
border-radius:var(--yr-tam);background:color-mix(in oklab, var(--mrk) 9%, transparent);
opacity:0;transition:opacity var(--gecis) var(--egri);pointer-events:none;
}
.vil-katkap[data-kaydir="1"] .vil-cubuk{opacity:1;pointer-events:auto}
.vil-cubuk i{
position:absolute;inset-inline:0;inset-block-start:0;block-size:2rem;
border-radius:var(--yr-tam);background:color-mix(in oklab, var(--mrk) 38%, transparent);
cursor:grab;transition:background var(--mikro) var(--egri);
}
.vil-cubuk i:hover,.vil-cubuk i:active{background:color-mix(in oklab, var(--mrk) 60%, transparent)}
.vil-cubuk i:active{cursor:grabbing}
.vil-oda{
display:grid;grid-template-columns:auto 1fr auto;align-items:center;
gap:calc(var(--vil-bo) * .7);
/* Sağda ok için nefes payı: ok kenara yapışınca simetri bozuluyordu. */
padding:.5rem .95rem .5rem .5rem;
border-radius:var(--yr-m);
background:color-mix(in oklab, var(--mrk) 4%, transparent);
transition:background var(--mikro) var(--egri);
}
.vil-oda:hover{background:color-mix(in oklab, var(--mrk) 10%, transparent)}
.vil-oda-gor{inline-size:4.8rem;block-size:3.2rem;border-radius:var(--yr-m);overflow:hidden;flex:none}
.vil-oda-gor img{
inline-size:100%;block-size:100%;object-fit:cover;
/* Soluk dursun ama kaybolmasın: açık kartta .35 beyaz lekeye dönüyordu. */
opacity:.55;transform:scale(1.04);
transition:opacity var(--gecis) var(--egri),transform var(--gecis) var(--egri);
}
.vil-oda:hover .vil-oda-gor img,
.vil-oda:focus-visible .vil-oda-gor img{opacity:1;transform:scale(1)}
.vil-oda-ad{font-size:var(--vil-y3);font-weight:700;line-height:1.3;color:var(--mrk);min-inline-size:0}
/* "360° sahne" yazısı her satırda tekrar ediyordu; yerine tek küre ikonu. */
.vil-oda-ek{display:inline-flex;align-items:center;gap:.5rem;color:var(--vil-etk);flex:none}
/* 1 rem'lik küre ikonu okunmuyordu; kısa metin hem anlaşılır hem
eski "360° SAHNE" tekrarı kadar gürültülü değil. */
.vil-oda-360{
font-size:var(--yz-etk);font-weight:700;letter-spacing:.06em;line-height:1;
padding:.28rem .5rem;border-radius:var(--yr-m);
background:color-mix(in oklab, var(--mrk) 8%, transparent);
transition:background var(--mikro) var(--egri),color var(--mikro) var(--egri);
}
.vil-oda:hover .vil-oda-360{background:var(--mrk);color:var(--z1)}
.vil-oda-ek .vil-ikon:last-child{
inline-size:1.15rem;opacity:.5;
transition:transform var(--gecis) var(--egri),opacity var(--mikro) var(--egri);
}
.vil-oda:hover .vil-oda-ek{color:var(--mrk)}
.vil-oda:hover .vil-oda-ek .vil-ikon:first-child{opacity:1}
.vil-oda:hover .vil-oda-ek .vil-ikon:last-child{opacity:1;transform:translateX(4px)}
html[dir="rtl"] .vil-oda-ek .vil-ikon:last-child{transform:scaleX(-1)}
html[dir="rtl"] .vil-oda:hover .vil-oda-ek .vil-ikon:last-child{transform:scaleX(-1) translateX(4px)}
/* Üçüncü sekme: 360°'si olmayanlar dahil kat planındaki bütün mekânlar. */
.vil-kat--mekan{gap:calc(var(--vil-bo) * .7)}
.vil-mekan-not{margin:0;font-size:var(--vil-y2);line-height:1.6;color:var(--vil-mtn)}
.vil-mekan-kat{margin:0 0 .35rem;font-size:var(--vil-y1);font-weight:700;letter-spacing:.14em;
text-transform:uppercase;line-height:1.3;color:var(--vil-etk)}
html[lang="ar"] .vil-mekan-kat{letter-spacing:0;text-transform:none}
/* Tek sütun: iki sütun dört ayrı hizalama grubu yapıyor ve karışıyordu. */
.vil-mekan-liste{list-style:none;margin:0;padding:0;display:grid}
.vil-mekan-liste li{display:flex;justify-content:space-between;gap:.8rem;
padding-block:.38rem;border-block-start:1px solid var(--cizgi2);
font-size:var(--vil-y2);line-height:1.4;color:var(--vil-mtn)}
.vil-mekan-liste b{font-weight:700;color:var(--mrk);white-space:nowrap}
.vil-planac{
display:inline-flex;align-items:center;gap:.55rem;margin-block-start:auto;cursor:pointer;flex:none;
inline-size:max-content;padding:.7rem 1.05rem;border-radius:var(--yr-xl);
border:1px solid var(--cizgi);color:var(--mrk);
font-size:var(--vil-y2);font-weight:700;letter-spacing:.02em;line-height:1.2;
transition:background var(--mikro) var(--egri);
}
.vil-planac:hover{background:color-mix(in oklab, var(--mrk) 8%, transparent)}
.vil-planac .vil-ikon:last-child{inline-size:1.1rem;transition:transform var(--gecis) var(--egri)}
.vil-planac:hover .vil-ikon:last-child{transform:translateX(4px)}
html[dir="rtl"] .vil-planac .vil-ikon:last-child{transform:scaleX(-1)}
/* ══════════ seçim durumları · sıfır JS ══════════ */
.vil-a-z:checked ~ .vil-sag .vil-katkap[data-kat="zemin"],
.vil-a-u:checked ~ .vil-sag .vil-katkap[data-kat="ust"],
.vil-a-t:checked ~ .vil-sag .vil-katkap[data-kat="tum"],
.vil-b-z:checked ~ .vil-sag .vil-katkap[data-kat="zemin"],
.vil-b-u:checked ~ .vil-sag .vil-katkap[data-kat="ust"],
.vil-b-t:checked ~ .vil-sag .vil-katkap[data-kat="tum"],
.vil-c-z:checked ~ .vil-sag .vil-katkap[data-kat="zemin"],
.vil-c-u:checked ~ .vil-sag .vil-katkap[data-kat="ust"],
.vil-c-t:checked ~ .vil-sag .vil-katkap[data-kat="tum"]{display:block}
.vil-a-z:checked ~ .vil-sag .vil-sekme label[for="vil-a-z"],
.vil-a-u:checked ~ .vil-sag .vil-sekme label[for="vil-a-u"],
.vil-a-t:checked ~ .vil-sag .vil-sekme label[for="vil-a-t"],
.vil-b-z:checked ~ .vil-sag .vil-sekme label[for="vil-b-z"],
.vil-b-u:checked ~ .vil-sag .vil-sekme label[for="vil-b-u"],
.vil-b-t:checked ~ .vil-sag .vil-sekme label[for="vil-b-t"],
.vil-c-z:checked ~ .vil-sag .vil-sekme label[for="vil-c-z"],
.vil-c-u:checked ~ .vil-sag .vil-sekme label[for="vil-c-u"],
.vil-c-t:checked ~ .vil-sag .vil-sekme label[for="vil-c-t"]{color:var(--mrk);border-block-end-color:var(--mrk)}
/* ══════════ kaydırmaya devam oku ══════════
Kartlar yapıştığı için sayfa duruyormuş gibi görünüyor; ok aşağıya
doğru yumuşakça inip çıkarak kaydırmanın sürdüğünü söyler. Yığın
bitince (son kart oturunca) söner. */
/* Karta değil EKRANA sabit: sticky iken kartın altına yapışıp onunla
birlikte geliyordu ve küçük resim etiketlerinin üstüne biniyordu.
Kart yaklaşınca JS gizler (data-gorunur=0). */
.vil-devam{
position:fixed;inset-block-end:clamp(1rem,3vh,1.8rem);inset-inline:0;z-index:140;
display:flex;justify-content:center;pointer-events:none;
opacity:0;transition:opacity var(--gecis) var(--egri);
}
.vil-devam[data-gorunur="1"]{opacity:1}
.vil-devam-dugme{
pointer-events:auto;cursor:pointer;
display:inline-flex;align-items:center;gap:.55rem;
padding:.7rem 1.05rem;border-radius:var(--yr-xl);
border:1px solid var(--cizgi);
background:color-mix(in oklab, var(--z1) 92%, transparent);
color:var(--mrk);
font-size:var(--vil-y2);font-weight:700;letter-spacing:.02em;line-height:1.2;
animation:vil-in 2.1s var(--egri) infinite;
transition:background var(--mikro) var(--egri);
}
.vil-devam-dugme:hover{background:var(--z1)}
.vil-devam-dugme .vil-ikon{inline-size:1.05rem;block-size:1.05rem}
@keyframes vil-in{
0%,100%{transform:translateY(0)}
50%{transform:translateY(5px)}
}
/* ══════════ modal · 360° ve galeri ══════════ */
/* TERS KONTRAST: koyu katmanın üstünde açık pil. Koyu saydam daire
arka planla aynı tonda kalıyordu, kimse düğme olduğunu anlamıyordu.
Yazı da var — ikon tek başına "kapat" demiyor. */
/* TERS KONTRAST + DENEYİM ŞERİDİYLE AYNI HİZA.
Uygulamanın kendi yuvarlak tuşları 30 px, üst kenarı 16 px → merkez y=31.
Kapat da 30 px / 16 px olunca aynı satırda oturuyor. Dar pencerede tuş
şeridi sağa dayanıp altına giriyor; o durumda betik --vil-kapat-y ile
düğmeyi şeridin altına indiriyor (örtüşme yerine bir satır aşağı). */
/* (kabuğa taşındı — .mdl-cerceve) */
/* ══════════ orta genişlik ══════════ */
@media (max-width:70rem){
.vil-kart{grid-template-columns:1fr 1fr;grid-template-areas:"foto sol" "sag sag";
block-size:auto;max-block-size:none}
.vil-mekan-liste{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
}
/* ══════════ dar ekran ══════════ */
@media (max-width:56rem){
.vil-oge{position:static}
.vil-oge + .vil-oge{margin-block-start:calc(var(--vil-bo) * 1.5)}
.vil-iz{padding-block-end:0}
.vil-devam{display:none}
.vil-kart{
grid-template-columns:1fr;grid-template-areas:"foto" "sol" "sag";
block-size:auto;filter:none;
transform:none!important;clip-path:none!important;--vil-perde:0!important;
}
.vil-foto{aspect-ratio:16/10;min-block-size:0}
.vil-ray{grid-auto-columns:calc((100% - 3 * var(--vil-bo) * .45) / 3.4)}
.vil-katkap{min-block-size:0}
}
@media (max-width:30rem){
.vil-mekan-liste{grid-template-columns:1fr}
}
/* ══════════ hareket azaltma ══════════ */
@media (prefers-reduced-motion:reduce){
.vil-oge{position:static}
.vil-oge + .vil-oge{margin-block-start:calc(var(--vil-bo) * 1.5)}
.vil-iz{padding-block-end:0}
.vil-kart{block-size:auto;transform:none!important;clip-path:none!important;
--vil-perde:0!important}
.vil-foto{--vil-olcek:1}
.vil-kare{transition:opacity .001ms}
.vil-kart{filter:none!important}
.vil-devam-dugme{animation:none}
.vil-ray{scroll-behavior:auto}
}
/* ⟨SEÇİM-BAŞ⟩ villalar-uret.py üretir — elle düzenleme ⟩ */
.vil-a-g1:checked ~ .vil-fotokap .vil-kare:nth-of-type(1),
.vil-a-g2:checked ~ .vil-fotokap .vil-kare:nth-of-type(2),
.vil-a-g3:checked ~ .vil-fotokap .vil-kare:nth-of-type(3),
.vil-a-g4:checked ~ .vil-fotokap .vil-kare:nth-of-type(4),
.vil-a-g5:checked ~ .vil-fotokap .vil-kare:nth-of-type(5),
.vil-a-g6:checked ~ .vil-fotokap .vil-kare:nth-of-type(6),
.vil-a-g7:checked ~ .vil-fotokap .vil-kare:nth-of-type(7),
.vil-a-g8:checked ~ .vil-fotokap .vil-kare:nth-of-type(8),
.vil-a-g9:checked ~ .vil-fotokap .vil-kare:nth-of-type(9),
.vil-a-g10:checked ~ .vil-fotokap .vil-kare:nth-of-type(10),
.vil-b-g1:checked ~ .vil-fotokap .vil-kare:nth-of-type(1),
.vil-b-g2:checked ~ .vil-fotokap .vil-kare:nth-of-type(2),
.vil-b-g3:checked ~ .vil-fotokap .vil-kare:nth-of-type(3),
.vil-b-g4:checked ~ .vil-fotokap .vil-kare:nth-of-type(4),
.vil-b-g5:checked ~ .vil-fotokap .vil-kare:nth-of-type(5),
.vil-b-g6:checked ~ .vil-fotokap .vil-kare:nth-of-type(6),
.vil-b-g7:checked ~ .vil-fotokap .vil-kare:nth-of-type(7),
.vil-b-g8:checked ~ .vil-fotokap .vil-kare:nth-of-type(8),
.vil-b-g9:checked ~ .vil-fotokap .vil-kare:nth-of-type(9),
.vil-b-g10:checked ~ .vil-fotokap .vil-kare:nth-of-type(10),
.vil-c-g1:checked ~ .vil-fotokap .vil-kare:nth-of-type(1),
.vil-c-g2:checked ~ .vil-fotokap .vil-kare:nth-of-type(2),
.vil-c-g3:checked ~ .vil-fotokap .vil-kare:nth-of-type(3),
.vil-c-g4:checked ~ .vil-fotokap .vil-kare:nth-of-type(4),
.vil-c-g5:checked ~ .vil-fotokap .vil-kare:nth-of-type(5),
.vil-c-g6:checked ~ .vil-fotokap .vil-kare:nth-of-type(6),
.vil-c-g7:checked ~ .vil-fotokap .vil-kare:nth-of-type(7),
.vil-c-g8:checked ~ .vil-fotokap .vil-kare:nth-of-type(8),
.vil-c-g9:checked ~ .vil-fotokap .vil-kare:nth-of-type(9),
.vil-c-g10:checked ~ .vil-fotokap .vil-kare:nth-of-type(10){opacity:1}
.vil-a-g1:checked ~ .vil-fotokap .vil-ray label:nth-child(1) img,
.vil-a-g2:checked ~ .vil-fotokap .vil-ray label:nth-child(2) img,
.vil-a-g3:checked ~ .vil-fotokap .vil-ray label:nth-child(3) img,
.vil-a-g4:checked ~ .vil-fotokap .vil-ray label:nth-child(4) img,
.vil-a-g5:checked ~ .vil-fotokap .vil-ray label:nth-child(5) img,
.vil-a-g6:checked ~ .vil-fotokap .vil-ray label:nth-child(6) img,
.vil-a-g7:checked ~ .vil-fotokap .vil-ray label:nth-child(7) img,
.vil-a-g8:checked ~ .vil-fotokap .vil-ray label:nth-child(8) img,
.vil-a-g9:checked ~ .vil-fotokap .vil-ray label:nth-child(9) img,
.vil-a-g10:checked ~ .vil-fotokap .vil-ray label:nth-child(10) img,
.vil-b-g1:checked ~ .vil-fotokap .vil-ray label:nth-child(1) img,
.vil-b-g2:checked ~ .vil-fotokap .vil-ray label:nth-child(2) img,
.vil-b-g3:checked ~ .vil-fotokap .vil-ray label:nth-child(3) img,
.vil-b-g4:checked ~ .vil-fotokap .vil-ray label:nth-child(4) img,
.vil-b-g5:checked ~ .vil-fotokap .vil-ray label:nth-child(5) img,
.vil-b-g6:checked ~ .vil-fotokap .vil-ray label:nth-child(6) img,
.vil-b-g7:checked ~ .vil-fotokap .vil-ray label:nth-child(7) img,
.vil-b-g8:checked ~ .vil-fotokap .vil-ray label:nth-child(8) img,
.vil-b-g9:checked ~ .vil-fotokap .vil-ray label:nth-child(9) img,
.vil-b-g10:checked ~ .vil-fotokap .vil-ray label:nth-child(10) img,
.vil-c-g1:checked ~ .vil-fotokap .vil-ray label:nth-child(1) img,
.vil-c-g2:checked ~ .vil-fotokap .vil-ray label:nth-child(2) img,
.vil-c-g3:checked ~ .vil-fotokap .vil-ray label:nth-child(3) img,
.vil-c-g4:checked ~ .vil-fotokap .vil-ray label:nth-child(4) img,
.vil-c-g5:checked ~ .vil-fotokap .vil-ray label:nth-child(5) img,
.vil-c-g6:checked ~ .vil-fotokap .vil-ray label:nth-child(6) img,
.vil-c-g7:checked ~ .vil-fotokap .vil-ray label:nth-child(7) img,
.vil-c-g8:checked ~ .vil-fotokap .vil-ray label:nth-child(8) img,
.vil-c-g9:checked ~ .vil-fotokap .vil-ray label:nth-child(9) img,
.vil-c-g10:checked ~ .vil-fotokap .vil-ray label:nth-child(10) img{opacity:1;outline-color:var(--mrk)}
/* ⟨SEÇİM-SON⟩ */
/* ══════════ ÜST BAĞLANTILAR · üç eşit sütun ══════════ */
.vil-ust{
/* Bağlantı şeridi de aynı genişlikte — panelin kenarlarıyla hizalı. */
position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
inline-size:auto;max-inline-size:none;margin-inline:var(--kap-pay);padding-inline:0;
/* Düz çizgi kaldırıldı: yalnız ETKİN olanın altında iz var. */
margin-block-end:calc(var(--vil-bo) * 1.6);
}
.vil-bag{
display:grid;gap:.15rem;justify-items:center;text-align:center;cursor:pointer;
padding-block:.7rem 1rem;padding-inline:.5rem;
background:transparent;border:0;color:var(--mrk3);
transition:color var(--mikro,.18s) var(--egri);
}
.vil-bag:hover{color:var(--mrk2)}
.vil-bag[aria-current="true"]{color:var(--mrk)}
.vil-bag:focus-visible{outline:2px solid var(--aksan);outline-offset:-2px;border-radius:var(--yr-s)}
.vil-bag-ad{font-size:var(--yz-gir);font-weight:700;letter-spacing:-.01em;line-height:var(--sy-sik)}
.vil-bag-alt{font-size:var(--yz-etk);letter-spacing:.11em;text-transform:uppercase;color:var(--mrk3)}
.vil-bag[aria-current="true"] .vil-bag-alt{color:var(--toprak-mtn)}
/* İMLEÇ — 25 Ağu 2026. Aşağı ok kaldırıldı: kalın, kaba ve tabın
altında yabancı duruyordu. Yerine UÇLARI SÖNEN bir çizgi ve altında
küçük bir nokta: çizgi etkin sekmeyi işaretler, nokta gözü aşağıdaki
panele bağlar. Konumu betik yazar (--x); genişliği sütun payıdır. */
.vil-imlec{
position:absolute;inset-block-end:-1px;inset-inline-start:0;
inline-size:calc(100% / 3);
transform:translateX(calc(var(--x, 0px) - 100% / 2));
display:grid;place-items:center;color:var(--toprak-mtn);pointer-events:none;
transition:transform var(--gecis,.42s) var(--egri);
}
.vil-imlec::before{
content:"";position:absolute;inset-block-end:0;inset-inline:14%;
block-size:2px;border-radius:var(--yr-tam);
background:linear-gradient(90deg,
transparent 0%, currentColor 22%, currentColor 78%, transparent 100%);
}
.vil-imlec::after{
content:"";position:absolute;inset-block-end:-.5rem;
inline-size:.3rem;block-size:.3rem;border-radius:var(--yr-tam);
background:currentColor;opacity:.75;
}
[dir="rtl"] .vil-imlec{transform:translateX(calc(100% / 2 - var(--x, 0px)))}
@media (prefers-reduced-motion:reduce){ .vil-imlec{transition:none} }
@media (max-width:56rem){
.vil-bag-alt{display:none}
.vil-bag{padding-block:.55rem .8rem}
}
/* ── HAFİF PARALLAX · villa görselleri ──────────────────────────
Yığın betiği kaldırılınca --vil-par'ı yazan JS de gitmişti; değişken
0'da kalıyordu. Artık kaydırma çizelgesi yazıyor, betik gerekmiyor.
Görsel zaten scale(1.08) ile taşkın; ±%2.5 o payın içinde kalır. */
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline: view()){
.vil-foto{
animation-name:vil-par;animation-duration:auto;
animation-timing-function:linear;animation-fill-mode:both;
animation-timeline:view();animation-range:cover 0% cover 100%;
}
@keyframes vil-par{ from{--vil-par:-4%} to{--vil-par:4%} }
@property --vil-par{ syntax:""; inherits:true; initial-value:0px }
}
}
/* MODAL KURALLARI BURADA DEĞİL — 28 Ağu 2026'da ortak kabuğa (.mdl)
taşındı. Tasarım oradan geliyor; sitede tek büyütme görünümü var. */