/* Hayat Makkah — Deneyim arayüzü
   Logical property kullanılır (margin-inline, inset-inline …) — RTL'e
   geçildiğinde düzen kendiliğinden aynalanır. */

:root{
  --gece:#0B0F0E;
  --keten:#ECE6DA;
  --zeytin:#7F8E73;
  --toprak:#AA7651;
  /* CTA zemini: #AA7651 üzerinde beyaz 3,88:1 (AA altı). Koyultuldu. */
  --toprak-koyu:#8F5F3E;
  --koyu:#1E2522;
  --cizgi:rgba(236,230,218,.16);
  --cizgi-guclu:rgba(236,230,218,.34);
  --panel:rgba(11,15,14,.78);
  --panel-kati:rgba(14,19,17,.95);
  --serit:64px;
  /* ---- HİZA IZGARASI ----
     Ölçüldü: ekrandaki sabit öğeler altı farklı kenar değeri kullanıyordu
     (1.15rem, .7rem, 1rem, .8rem, .45rem, .55rem) — mobilde 7, 11 ve 13 px
     olarak üç ayrı hizaya düşüyorlardı. Artık tek kaynak:
       --kenar     : ekran kenarına uzaklık (yatay ve dikey köşeler)
       --kat       : üst üste yığılan öğeler arası boşluk
       --alt-yigin : alt şeridin üstünde kalan güvenli taban
       --mini-h    : mini haritanın yüksekliği (sağ alt yığını hesaplar)
     Kardeş seçicilere miras geçmediği için hepsi :root'ta durur. */
  --kenar:1.15rem;
  --kat:.6rem;
  --alt-yigin:6.1rem;
  --mini-h:153px;
  --kose-pay:3.1rem;   /* modal kapatma düğmesine ayrılan sağ üst boşluk */
  --lightbox-pay:2.4rem;  /* modalın ekran kenarına bıraktığı koyu boşluk */
}

*{margin:0;padding:0;box-sizing:border-box}
/* hidden özniteliği display:flex/inline-flex tarafından ezilmesin */
[hidden]{display:none !important}
html,body{block-size:100%;overflow:hidden;background:var(--gece);color:var(--keten);
  font-family:"Inter","Helvetica Neue",-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overscroll-behavior:none}

canvas{position:absolute;inset:0;inline-size:100%;block-size:100%;display:block;
  touch-action:none;cursor:grab}

/* ---------- Sahne katmanları ---------- */
.sahne{position:fixed;inset:0;opacity:0;visibility:hidden;
  transition:opacity .55s ease,visibility .55s}
.sahne.acik{opacity:1;visibility:visible}

/* ---------- Üst şerit ---------- */
.ust{position:fixed;inset-block-start:0;inset-inline:0;z-index:20;
  display:flex;align-items:center;gap:1rem;padding:.7rem var(--kenar) 1.9rem;
  background:linear-gradient(to bottom,rgba(11,15,14,.82) 0%,rgba(11,15,14,.34) 52%,transparent 100%);
  pointer-events:none}
.ust > *{pointer-events:auto}

/* Üst şeridin tamamı SOLA toplanır, sağ taraf tümüyle boş bırakılır.
   Deneyim bir modal içinde açıldığında o modalın kapatma düğmesi sağ
   üstte duruyor; yazılı bir "× Kapat" düğmesi ~180 px yer kaplıyor ve
   sabit bir köşe payıyla kaçınmak mümkün değil (ölçüldü: 68 px pay
   yetmedi, son anahtar tamamen örtüldü). Sağ yarıyı hiç kullanmamak
   bu çakışmayı bağlamdan bağımsız olarak bitirir. */
.marka{display:flex;flex-direction:column;gap:.1rem;min-inline-size:0}
.marka h1{font-size:.92rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  margin:0;line-height:1.2}
/* Kendi zemini olmayan tek metin; gradyan altında zeytin tonu 1,3:1
   kalıyordu. Keten tonuna çekildi. */
.marka span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,230,218,.82)}

.mod{display:flex;gap:.45rem;padding:.25rem;border:1px solid var(--cizgi);
  border-radius:999px;background:var(--panel)}
.mod button{appearance:none;border:0;background:transparent;color:rgba(236,230,218,.72);
  font:inherit;font-size:.78rem;letter-spacing:.02em;padding:.44rem .95rem;border-radius:999px;
  cursor:pointer;white-space:nowrap;transition:background .3s ease,color .3s ease}
.mod button:hover{color:var(--keten);background:rgba(127,142,115,.22)}
.mod button[aria-pressed="true"]{background:var(--keten);color:var(--gece);font-weight:500}
.mod button:focus-visible{outline:2px solid var(--toprak);outline-offset:2px}

/* ---------- Anahtarlar ---------- */
/* 44 px vuruş alanları komşu düğmelerin üstüne biniyordu; boşluk
   artırılarak yanlış hedef tetiklenmesi önlendi. */
/* Sağ üst köşe SERBEST bırakılır: deneyim bir modal/iframe içinde
   açıldığında kapatma (X) düğmesi oraya oturuyor ve son anahtarın
   üstüne biniyor (Beyefendi'nin ekran görüntüsüyle doğrulandı).
   --kose-pay kadar boşluk her bağlamda X'e yer açar. */
.anahtarlar{display:flex;gap:.55rem;flex-wrap:wrap;
  margin-inline-end:auto}     /* sağdaki tüm alanı boş bırak */
.anahtar{appearance:none;display:inline-flex;align-items:center;gap:.42rem;
  border:1px solid var(--cizgi);background:var(--panel);color:rgba(236,230,218,.78);
  font:inherit;font-size:.73rem;padding:.4rem .78rem;border-radius:999px;cursor:pointer;
  transition:background .3s ease,color .3s ease}
.anahtar:hover{background:rgba(127,142,115,.24);color:var(--keten)}
.anahtar[aria-pressed="true"]{background:var(--toprak-koyu);color:#fff;
  border-color:var(--toprak-koyu)}
.anahtar:focus-visible{outline:2px solid var(--toprak);outline-offset:2px}
.anahtar svg{inline-size:15px;block-size:15px;flex:none}
/* Yazı yerine title/aria-label: ikon tek başına kaldığı için düğme
   kareleşir, sıra daha az yer kaplar. */
.anahtar{padding:.42rem;justify-content:center;min-inline-size:32px}

/* ---------- Alt bağlam çubuğu ---------- */
.alt{position:fixed;inset-block-end:0;inset-inline:0;z-index:20;
  padding:2.4rem var(--kenar) calc(.8rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(11,15,14,.88) 0%,rgba(11,15,14,.42) 58%,transparent 100%);
  pointer-events:none}
.alt > *{pointer-events:auto}

.duraklar{display:flex;gap:.6rem;overflow-x:auto;padding-block-end:.5rem;
  scrollbar-width:thin;scroll-snap-type:x proximity}
.duraklar::-webkit-scrollbar{block-size:4px}
.duraklar::-webkit-scrollbar-thumb{background:var(--cizgi-guclu);border-radius:99px}
/* Kart artık tek satır: sabit 132 px genişlik alt yazı içindi, o kalkınca
   kartlar gereksiz genişti ve şerit ekranı yiyordu. İçeriğe göre daralır,
   min-inline-size yalnız çok kısa adlar için alt sınır. */
.durak{appearance:none;flex:none;scroll-snap-align:start;text-align:start;
  border:1px solid var(--cizgi);background:var(--panel);color:rgba(236,230,218,.76);
  font:inherit;font-size:.74rem;padding:.46rem .8rem;border-radius:12px;cursor:pointer;
  min-inline-size:0;white-space:nowrap;transition:background .3s ease,color .3s ease}
.durak:hover{background:rgba(127,142,115,.26);color:var(--keten)}
.durak[aria-pressed="true"]{background:var(--keten);color:var(--gece)}
.durak b{display:block;font-weight:600;font-size:.78rem}
.durak span{display:block;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  opacity:.72;margin-block-start:.12rem}

/* ---------- Mini harita ---------- */
/* Sağ alt köşe iki katlı yığın: altta mini harita, üstünde AR düğmesi.
   Eskiden ikisi de aynı köşede 0,2rem farkla duruyordu ve üst üste
   biniyordu (iPhone ekran görüntüsüyle doğrulandı). */
.mini{position:fixed;inset-block-end:calc(var(--alt-yigin) + env(safe-area-inset-bottom));
  inset-inline-end:var(--kenar);z-index:21;inline-size:216px;
  border:1px solid var(--cizgi);border-radius:16px;overflow:hidden;
  background:var(--panel-kati);transition:opacity .4s ease}
.mini.gizli{opacity:0;pointer-events:none}
.mini img{display:block;inline-size:100%;block-size:auto}
.mini .nokta{position:absolute;inline-size:11px;block-size:11px;border-radius:50%;
  background:var(--keten);border:2px solid var(--gece);cursor:pointer;
  transform:translate(-50%,-50%);transition:background .3s ease,transform .25s ease}
.mini .nokta:hover{transform:translate(-50%,-50%) scale(1.35)}
.mini .nokta.etkin{background:var(--toprak);inline-size:14px;block-size:14px}
.mini .baslik{position:absolute;inset-block-start:0;inset-inline:0;
  padding:.4rem .6rem;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(236,230,218,.95);
  background:linear-gradient(to bottom,rgba(11,15,14,.95),rgba(11,15,14,.55) 70%,transparent)}

/* ---------- Bilgi panosu ---------- */
.pano{position:fixed;inset-block-start:calc(var(--serit) + .6rem);inset-inline-start:var(--kenar);
  z-index:19;inline-size:min(320px,calc(100vw - 2.3rem));
  border:1px solid var(--cizgi);border-radius:18px;background:var(--panel-kati);
  padding:1rem 1.1rem;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.pano.acik{opacity:1;visibility:visible}
.pano .pano-h{display:block;font-size:1rem;font-weight:600;margin-block-end:.15rem}
.pano .alt-baslik{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--zeytin)}

/* Kapatma ve katlama — panonun ekranı işgal etmesini kullanıcı durdurabilir */
.pano-kapat{position:absolute;z-index:2;inset-block-start:.55rem;inset-inline-end:.55rem;
  appearance:none;border:0;background:transparent;color:rgba(236,230,218,.6);
  cursor:pointer;padding:.35rem;border-radius:8px;line-height:0;
  transition:color .25s ease,background .25s ease}
.pano-kapat:hover{color:var(--keten);background:rgba(236,230,218,.1)}
.pano-kapat:focus-visible{outline:2px solid var(--toprak);outline-offset:2px}
.pano-kapat svg{inline-size:18px;block-size:18px}

.pano-katla{appearance:none;border:0;background:transparent;color:inherit;font:inherit;
  text-align:start;cursor:default;padding:0;inline-size:100%;
  padding-inline-end:1.8rem;position:relative}
.pano-katla .ok{display:none;position:absolute;inset-block-start:.15rem;
  inset-inline-end:0;inline-size:18px;block-size:18px;color:var(--zeytin);
  transition:rotate .3s ease}
.pano-govde{margin-block-start:.7rem}
.pano-govde p{font-size:.8rem;line-height:1.55;color:rgba(236,230,218,.78)}
.pano p{font-size:.8rem;line-height:1.55;color:rgba(236,230,218,.78)}
.pano dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;
  margin-block-start:.7rem;font-size:.76rem}
.pano dt{color:var(--zeytin)}
.pano dd{text-align:end;font-variant-numeric:tabular-nums}

/* ---------- İşaretler (panorama üzeri) ---------- */
.isaretler{position:fixed;inset:0;z-index:15;pointer-events:none}
.isaret{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;
  display:flex;align-items:center;gap:.4rem;padding:.34rem .7rem;
  border:1px solid var(--cizgi-guclu);border-radius:999px;background:var(--panel);
  font-size:.72rem;color:var(--keten);cursor:pointer;white-space:nowrap;
  transition:background .3s ease}
.isaret:hover{background:var(--toprak-koyu)}
.isaret .halka{inline-size:8px;block-size:8px;border-radius:50%;background:var(--toprak);flex:none}
.isaret.yon{background:rgba(30,37,34,.86);border-color:var(--cizgi)}

/* ---------- Zemin adımı (Street View mantığı) ----------
   Hedef yere yatık durur: perspektif eğimiyle yassılaşır, böylece
   havada asılı bir rozet değil, zeminde duran bir hedef okunur. */
.adim{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;
  cursor:pointer;border:0;background:transparent;padding:0;
  inline-size:108px;block-size:108px;perspective:220px}
.adim .taban{position:absolute;inset-block-start:50%;inset-inline-start:50%;
  inline-size:82px;block-size:82px;margin:-41px 0 0 -41px;border-radius:50%;
  border:3px solid rgba(255,255,255,.94);
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.5),rgba(255,255,255,.16) 72%);
  transform:rotateX(64deg);transform-origin:50% 50%;
  transition:border-color .25s ease,background .25s ease,scale .25s ease}
.adim .ok-yukari{position:absolute;inset-block-start:50%;inset-inline-start:50%;
  inline-size:30px;block-size:30px;margin:-25px 0 0 -15px;color:#fff;
  transition:translate .25s ease}
.adim:hover .taban{scale:1.08;
  background:radial-gradient(circle at 50% 40%,rgba(170,118,81,.85),rgba(170,118,81,.35) 72%)}
.adim:hover .ok-yukari{translate:0 -6px}
.adim:focus-visible .taban{outline:2px solid var(--toprak);outline-offset:3px}
.adim .ad{position:absolute;inset-block-start:calc(50% + 34px);inset-inline-start:50%;
  translate:-50% 0;white-space:nowrap;
  font-size:.7rem;font-weight:500;color:var(--keten);background:rgba(11,15,14,.88);
  padding:.24rem .65rem;border-radius:999px;border:1px solid var(--cizgi-guclu);
  transition:background .25s ease}
.adim:hover .ad{background:rgba(170,118,81,.9)}

@media (pointer: coarse){
  .adim{inline-size:132px;block-size:132px}
  .adim .taban{inline-size:92px;block-size:92px;margin:-46px 0 0 -46px}
}

/* ---------- Pano eylem butonları ---------- */
.pano-eylem{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-start:.9rem}
.pano-dugme{appearance:none;display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--cizgi);background:rgba(236,230,218,.06);color:var(--keten);
  font:inherit;font-size:.75rem;padding:.45rem .8rem;border-radius:10px;cursor:pointer;
  transition:background .25s ease,border-color .25s ease}
.pano-dugme:hover{background:rgba(127,142,115,.28)}
.pano-dugme.birincil{background:var(--toprak-koyu);border-color:var(--toprak-koyu);color:#fff}
.pano-dugme.birincil:hover{background:#b8834f}
.pano-dugme:focus-visible{outline:2px solid var(--toprak);outline-offset:2px}
.pano-dugme svg{inline-size:14px;block-size:14px;flex:none}

/* ---------- AR ---------- */
.ar-ac{position:fixed;z-index:22;appearance:none;cursor:pointer;font-family:inherit;
  inset-block-end:calc(var(--alt-yigin) + var(--mini-h) + var(--kat)
                       + env(safe-area-inset-bottom));
  inset-inline-end:var(--kenar);
  display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.05rem;
  border-radius:999px;border:1px solid var(--toprak-koyu);
  background:var(--toprak-koyu);color:#fff;font-size:.82rem;font-weight:500;
  transition:background .25s ease}
.ar-ac:hover{background:#b8834f}
.ar-ac:focus-visible{outline:2px solid var(--keten);outline-offset:2px}
.ar-ac[hidden]{display:none}
.ar-ac svg{inline-size:17px;block-size:17px;flex:none}

.ar-secim{position:fixed;z-index:46;inset-block-end:0;inset-inline:0;
  max-block-size:86vh;overflow-y:auto;
  background:var(--panel-kati);border-block-start:1px solid var(--cizgi);
  border-start-start-radius:20px;border-start-end-radius:20px;
  padding:1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
  translate:0 100%;transition:translate .4s cubic-bezier(.22,1,.36,1)}
.ar-secim.acik{translate:0 0}
.ar-secim[hidden]{display:none}
@media (min-width: 881px){
  .ar-secim{inset-block:auto 1.15rem;inset-inline:auto 1.15rem;inline-size:400px;
    border-radius:20px;border:1px solid var(--cizgi);translate:0 120%}
  .ar-secim.acik{translate:0 0}
}
.ar-secim-ust{display:flex;align-items:flex-start;gap:.8rem;margin-block-end:.9rem}
.ar-secim-ust b{display:block;font-size:.95rem;font-weight:600}
.ar-secim-ust span{display:block;font-size:.72rem;color:var(--zeytin);
  line-height:1.45;margin-block-start:.15rem}
.ar-secim-kapat{appearance:none;border:0;background:transparent;
  color:rgba(236,230,218,.6);cursor:pointer;padding:.35rem;border-radius:8px;
  line-height:0;flex:none;transition:color .25s ease,background .25s ease}
.ar-secim-kapat:hover{color:var(--keten);background:rgba(236,230,218,.1)}
.ar-secim-kapat svg{inline-size:17px;block-size:17px}

.ar-harita{position:relative;border-radius:12px;overflow:hidden;
  border:1px solid var(--cizgi);margin-block-end:.8rem}
.ar-harita img{display:block;inline-size:100%;block-size:auto}
/* Çerçeveler haritada seçilemiyordu — kenar inceydi ve %35 opaklıkta
   kayboluyordu. Kalın kenar + numara rozeti ile listedeki satıra bağlandı. */
.ar-cerceve{position:absolute;border:2.5px solid #fff;border-radius:5px;
  background:rgba(170,118,81,.30);pointer-events:none;
  transition:background .25s ease,border-color .25s ease;
  box-sizing:border-box}
.ar-cerceve i{position:absolute;inset-block-start:-9px;inset-inline-start:-9px;
  inline-size:20px;block-size:20px;border-radius:50%;
  background:var(--toprak);color:#fff;border:2px solid #fff;
  font-size:.62rem;font-weight:700;font-style:normal;
  display:grid;place-items:center;line-height:1}
.ar-cerceve.sonuk{background:rgba(170,118,81,.12);border-color:rgba(255,255,255,.55)}
.ar-cerceve.sonuk i{background:rgba(170,118,81,.6)}
.ar-sec i{inline-size:20px;block-size:20px;border-radius:50%;background:var(--toprak);
  color:#fff;font-size:.62rem;font-weight:700;font-style:normal;
  display:grid;place-items:center;line-height:1}

.ar-liste{display:flex;flex-direction:column;gap:.35rem}
.ar-sec{appearance:none;border:1px solid var(--cizgi);background:rgba(236,230,218,.05);
  color:var(--keten);font:inherit;cursor:pointer;text-align:start;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;
  padding:.6rem .75rem;border-radius:12px;transition:background .22s ease}
.ar-sec:hover{background:rgba(127,142,115,.26)}
.ar-sec:focus-visible{outline:2px solid var(--toprak);outline-offset:2px}

.ar-sec b{font-size:.82rem;font-weight:500}
.ar-sec em{font-style:normal;font-size:.65rem;color:var(--zeytin);display:block;
  margin-block-start:.1rem}
.ar-sec u{text-decoration:none;font-size:.68rem;color:var(--zeytin);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Masterplan görünüm düğmeleri ---------- */
/* Modal kapatma düğmesi üst şeridin sağında duruyor; bu iki öğe onun
   ALTINDA kalıyor. 0,6rem'lik pay dardı (ölçüldü: 14 px) — farklı
   yükseklikteki kapatma düğmeleriyle çakışma riski vardı. */
/* Görünüm şeridi de SOLA. Sağda tek başına duruyordu ve arayüzün geri
   kalanı solda toplandığı için yalnız kalıyordu; ayrıca modalın kapatma
   düğmesiyle aynı köşeyi paylaşıyordu. Sol kenarda, bilgi panosunun
   altına hizalanır. */
.gorunum{position:fixed;z-index:21;
  inset-block-start:calc(var(--serit) + 1.5rem);
  inset-inline-start:var(--kenar);display:flex;gap:.3rem;padding:.25rem;
  border:1px solid var(--cizgi);border-radius:999px;background:var(--panel)}
.gorunum[hidden]{display:none}
.gorunum button{appearance:none;border:0;background:transparent;
  color:rgba(236,230,218,.75);font:inherit;font-size:.73rem;
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.4rem .7rem;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background .25s ease,color .25s ease}
.gorunum button:hover{background:rgba(127,142,115,.26);color:var(--keten)}
.gorunum button[aria-pressed="true"]{background:var(--keten);color:var(--gece)}
.gorunum button:focus-visible{outline:2px solid var(--toprak);outline-offset:2px}
.gorunum svg{inline-size:15px;block-size:15px;flex:none}
@media (max-width: 880px){
  /* Pusula 56 px ve aynı köşede; görünüm çubuğu onun altına iner. */
  .gorunum{inset-block-start:calc(var(--serit) + 8.6rem)}
  .gorunum button span{display:none}
  .gorunum button{padding:.55rem .6rem}
  .gorunum svg{inline-size:17px;block-size:17px}
}

/* ---------- Villa tipi lejantı ---------- */
.lejant{position:fixed;z-index:21;
  inset-block-end:calc(var(--alt-yigin) + env(safe-area-inset-bottom));
  inset-inline-start:var(--kenar);inline-size:210px;
  border:1px solid var(--cizgi);border-radius:16px;background:var(--panel-kati);
  padding:.7rem .6rem .5rem;transition:opacity .35s ease}
.lejant[hidden]{display:none}
.lejant-baslik{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--zeytin);padding-inline:.35rem;margin-block-end:.45rem}
.lejant-satir{appearance:none;border:0;background:transparent;color:var(--keten);
  font:inherit;inline-size:100%;display:grid;
  grid-template-columns:14px 1fr auto;align-items:center;gap:.55rem;
  padding:.4rem .35rem;border-radius:9px;cursor:pointer;text-align:start;
  transition:background .22s ease,opacity .22s ease}
.lejant-satir:hover{background:rgba(127,142,115,.24)}
.lejant-satir[aria-pressed="false"]{opacity:.38}
.lejant-satir:focus-visible{outline:2px solid var(--toprak);outline-offset:2px}
.lejant-satir i{inline-size:14px;block-size:14px;border-radius:4px;
  border:1px solid rgba(11,15,14,.4)}
.lejant-satir b{font-size:.78rem;font-weight:500}
.lejant-satir span{font-size:.62rem;color:rgba(236,230,218,.6);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.lejant-not{font-size:.6rem;color:var(--zeytin);padding:.3rem .35rem 0;line-height:1.4}
@media (max-width: 880px){
  .lejant{inline-size:174px;inset-block-end:calc(7.6rem + env(safe-area-inset-bottom));
    padding:.55rem .45rem .4rem}
  .lejant-satir b{font-size:.72rem}
  .lejant-satir span{font-size:.56rem}
}

/* ---------- Zemin malzemesi seçici ---------- */
.zemin-secici{position:fixed;z-index:21;
  inset-block-end:calc(var(--alt-yigin) + env(safe-area-inset-bottom));
  inset-inline-start:var(--kenar);
  display:flex;flex-direction:column;gap:.2rem;padding:.4rem;
  border:1px solid var(--cizgi);border-radius:14px;background:var(--panel-kati)}
.zemin-secici[hidden]{display:none}
.zemin-not{font-size:.62rem;line-height:1.4;color:var(--zeytin);
  padding:.15rem .55rem .35rem;max-inline-size:190px}
.zemin-ton{appearance:none;border:0;background:transparent;color:rgba(236,230,218,.78);
  font:inherit;font-size:.74rem;padding:.32rem .55rem;border-radius:9px;cursor:pointer;
  display:flex;align-items:center;gap:.5rem;text-align:start;white-space:nowrap;
  transition:background .22s ease,color .22s ease}
.zemin-ton:hover{background:rgba(127,142,115,.26);color:var(--keten)}
.zemin-ton[aria-pressed="true"]{background:var(--keten);color:var(--gece)}
.zemin-ton:focus-visible{outline:2px solid var(--toprak);outline-offset:2px}
.zemin-ton i{inline-size:16px;block-size:16px;border-radius:4px;flex:none;
  border:1px solid rgba(11,15,14,.35)}
.zemin-ton i.ozgun{background:linear-gradient(135deg,#8d8378 50%,transparent 50%),#d8d1c4}
@media (max-width: 880px){
  .zemin-secici{inset-block-end:calc(11.6rem + env(safe-area-inset-bottom));
    flex-direction:row;flex-wrap:wrap;max-inline-size:calc(100vw - var(--kenar)*2)}
  .zemin-ton{font-size:.68rem;padding:.28rem .45rem}
}

/* ---------- Kat planı görüntüleyici ---------- */
/* Kat planı bir LIGHTBOX'tır, sayfa değil. Tam ekran kapladığında
   kullanıcı yeni bir sayfaya geçtiğini sanıyor ve tarayıcının geri
   tuşuna uzanıyordu. Kenarlarda koyu boşluk bırakmak katmanın üstte
   durduğunu, altındaki deneyimin sürdüğünü anlatır. */
.plan-kat{position:fixed;inset:0;z-index:44;
  display:grid;place-items:stretch;
  padding:var(--lightbox-pay);
  background:rgba(6,9,8,.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .35s ease}
.plan-kat > .plan-govde{display:flex;flex-direction:column;min-block-size:0;
  background:#f4f1ea;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35)}
.plan-kat.acik{opacity:1}
.plan-kat[hidden]{display:none}

.plan-ust{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:.8rem 1.1rem;background:#fff;border-block-end:1px solid rgba(30,37,34,.1);
  color:var(--koyu)}
.plan-baslik{margin-inline-end:auto;min-inline-size:0}
.plan-baslik b{display:block;font-size:.95rem;font-weight:600}
.plan-baslik span{display:block;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(30,37,34,.72)}

.plan-tipler{display:flex;gap:.25rem;padding:.2rem;border-radius:999px;
  background:rgba(30,37,34,.07)}
.plan-tipler button{appearance:none;border:0;background:transparent;color:rgba(30,37,34,.75);
  font:inherit;font-size:.82rem;font-weight:500;inline-size:34px;block-size:30px;
  border-radius:999px;cursor:pointer;transition:background .25s ease,color .25s ease}
.plan-tipler button:hover{color:var(--koyu);background:rgba(30,37,34,.09)}
.plan-tipler button[aria-pressed="true"]{background:var(--koyu);color:#fff}
.plan-tipler button:focus-visible{outline:2px solid var(--toprak);outline-offset:2px}

.plan-sifirla{appearance:none;border:1px solid rgba(30,37,34,.16);background:transparent;
  color:var(--koyu);font:inherit;font-size:.76rem;padding:.4rem .8rem;border-radius:999px;
  cursor:pointer;transition:background .25s ease}
.plan-sifirla:hover{background:rgba(30,37,34,.07)}
.plan-kapatma{appearance:none;border:0;background:transparent;color:rgba(30,37,34,.55);
  cursor:pointer;padding:.4rem;border-radius:8px;line-height:0;
  transition:color .25s ease,background .25s ease}
.plan-kapatma:hover{color:var(--koyu);background:rgba(30,37,34,.08)}
.plan-kapatma svg{inline-size:18px;block-size:18px}

.plan-alan{flex:1;overflow:hidden;position:relative;cursor:grab;touch-action:none}
.plan-alan.tutuluyor{cursor:grabbing}
.plan-alan img{position:absolute;inset-block-start:0;inset-inline-start:0;
  transform-origin:0 0;user-select:none;-webkit-user-drag:none;max-inline-size:none}

.plan-ipucu{padding:.55rem 1.1rem calc(.55rem + env(safe-area-inset-bottom));
  background:#fff;border-block-start:1px solid rgba(30,37,34,.1);
  font-size:.7rem;color:rgba(30,37,34,.72);text-align:center}

@media (max-width: 880px){
  .plan-ust{padding:.65rem .8rem;gap:.5rem}
  .plan-baslik b{font-size:.86rem}
  .plan-baslik span{font-size:.6rem}
  .plan-sifirla{font-size:.7rem;padding:.35rem .65rem}
}

/* ---------- Talep formu ---------- */
.ortu{position:fixed;inset:0;z-index:48;background:rgba(4,7,6,.72);
  opacity:0;transition:opacity .35s ease}
.ortu.acik{opacity:1}
.ortu[hidden]{display:none}

.form-kat{position:fixed;z-index:49;inset-block:0;inset-inline-end:0;
  inline-size:min(420px,100vw);background:var(--panel-kati);
  border-inline-start:1px solid var(--cizgi);
  padding:2.2rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom));
  overflow-y:auto;translate:100% 0;transition:translate .4s cubic-bezier(.22,1,.36,1)}
.form-kat.acik{translate:0 0}
.form-kat[hidden]{display:none}
.form-kat h3{font-size:1.25rem;font-weight:500;margin-block-end:.2rem}
.form-alt{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--zeytin);margin-block-end:1.4rem}
.form-kapat{position:absolute;inset-block-start:1rem;inset-inline-end:1rem;
  appearance:none;border:0;background:transparent;color:rgba(236,230,218,.6);
  cursor:pointer;padding:.4rem;border-radius:8px;line-height:0;
  transition:color .25s ease,background .25s ease}
.form-kapat:hover{color:var(--keten);background:rgba(236,230,218,.1)}
.form-kapat svg{inline-size:18px;block-size:18px}

#talep label{display:block;margin-block-end:.9rem}
#talep label>span{display:block;font-size:.72rem;color:var(--zeytin);
  margin-block-end:.32rem;letter-spacing:.03em}
#talep input[type="text"],#talep input[type="tel"],#talep input[type="email"],
#talep select{inline-size:100%;background:rgba(236,230,218,.05);
  border:1px solid var(--cizgi);border-radius:10px;color:var(--keten);
  font:inherit;font-size:.88rem;padding:.62rem .7rem;
  transition:border-color .25s ease,background .25s ease}
#talep input:focus,#talep select:focus{outline:none;border-color:var(--zeytin);
  background:rgba(236,230,218,.09)}
#talep input:user-invalid{border-color:#b4674f}
/* Ülke kodu sabit genişlikte kalır, numara alanı kalanı doldurur.
   min-inline-size:0 olmadan flex öğesi içeriğinden küçülemez ve taşar. */
/* Özgüllük notu: yukarıdaki `#talep select{inline-size:100%}` bir id seçicidir
   ve sınıf kurallarını yener. Bu yüzden dar kural da id kapsamında yazılır —
   aksi hâlde ülke kodu bütün satırı yutuyor, numara alanına 24 px kalıyordu. */
#talep .tel{display:flex;gap:.4rem}
#talep .tel select{inline-size:auto;flex:0 0 auto;min-inline-size:108px}
#talep .tel input{flex:1 1 auto;min-inline-size:0}

/* Form açıkken sahne arayüzü geri çekilir — iki ayrı kapatma butonu
   aynı anda ekranda durmaz, odak tek yerdedir. */
body.form-acik .pano,
body.form-acik .alt,
body.form-acik .gez,
body.form-acik .mini,
body.form-acik .pusula,
body.form-acik .isaretler,
body.form-acik .olcum{opacity:0;pointer-events:none;transition:opacity .3s ease}
body.form-acik .ust{opacity:.25;pointer-events:none;transition:opacity .3s ease}
.onay{display:flex !important;gap:.55rem;align-items:flex-start;
  font-size:.76rem;color:rgba(236,230,218,.74);line-height:1.5;margin-block:1.1rem}
.onay input{margin-block-start:.15rem;accent-color:var(--toprak);flex:none}
.form-gonder{inline-size:100%;appearance:none;border:0;border-radius:12px;
  background:var(--toprak-koyu);color:#fff;font:inherit;font-size:.92rem;font-weight:500;
  padding:.82rem;cursor:pointer;transition:background .25s ease}
.form-gonder:hover{background:#b8834f}
.form-gonder:focus-visible{outline:2px solid var(--keten);outline-offset:2px}
.form-not{font-size:.76rem;margin-block-start:.8rem;min-block-size:1.2em;
  color:var(--zeytin)}
.form-not.hata{color:#d98a6f}
.form-not.basarili{color:#8fb08a}

@media (max-width: 880px){
  .form-kat{inset-block-start:auto;inline-size:100%;max-block-size:88vh;
    border-inline-start:0;border-block-start:1px solid var(--cizgi);
    border-start-start-radius:20px;border-start-end-radius:20px;
    translate:0 100%}
}

/* ---------- Kapı geçişi (villa içi) ---------- */
.kapi{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;
  cursor:pointer;border:0;background:transparent;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:.35rem}
.kapi-halka{inline-size:52px;block-size:52px;border-radius:50%;
  border:2px solid rgba(255,255,255,.9);background:rgba(11,15,14,.38);
  display:grid;place-items:center;
  transition:background .25s ease,scale .25s ease}
.kapi:hover .kapi-halka{background:rgba(170,118,81,.85);scale:1.08}
.kapi:focus-visible .kapi-halka{outline:2px solid var(--toprak);outline-offset:3px}
.kapi svg{inline-size:22px;block-size:22px;color:#fff}
.kapi-ad{font-size:.7rem;font-weight:500;color:var(--keten);
  background:rgba(11,15,14,.88);padding:.22rem .6rem;border-radius:999px;
  border:1px solid var(--cizgi-guclu);white-space:nowrap}
@media (pointer: coarse){ .kapi-halka{inline-size:60px;block-size:60px} }

/* ---------- Sıralı gezinme okları ---------- */
.gez{position:fixed;inset-block-start:50%;translate:0 -50%;z-index:18;
  inline-size:44px;block-size:44px;border-radius:50%;
  border:1px solid var(--cizgi);background:var(--panel);color:var(--keten);
  display:grid;place-items:center;cursor:pointer;
  transition:background .25s ease,opacity .3s ease}
.gez:hover{background:rgba(127,142,115,.3)}
.gez:focus-visible{outline:2px solid var(--toprak);outline-offset:2px}
.gez svg{inline-size:18px;block-size:18px}
.gez.onceki{inset-inline-start:var(--kenar)}
.gez.sonraki{inset-inline-end:var(--kenar)}
.gez[hidden]{display:none !important}
@media (max-width: 880px){
  /* 44 px, dokunma hedefi alt sınırı; kontrast da artırıldı çünkü
     parlak gökyüzü önünde ince kenarlı buton kayboluyordu. */
  .gez{inline-size:46px;block-size:46px;background:rgba(11,15,14,.88);
    border-color:var(--cizgi-guclu)}
  .gez svg{inline-size:20px;block-size:20px}
  /* ok konumu da --kenar'dan gelir; ayrı değer üçüncü bir hiza yaratıyordu */
}

/* ---------- Pusula ---------- */
.pusula{position:fixed;inset-block-start:calc(var(--serit) + 1.5rem);
  inset-inline-end:var(--kenar);
  z-index:19;inline-size:74px;block-size:74px;border:1px solid var(--cizgi);border-radius:50%;
  background:var(--panel-kati);display:grid;place-items:center;transition:opacity .4s ease}
.pusula.gizli{opacity:0;pointer-events:none}
.pusula svg{inline-size:100%;block-size:100%}

/* ---------- Yükleme ---------- */
.yukleme{position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  background:var(--gece);transition:opacity .6s ease;text-align:center}
.yukleme[hidden]{display:none}
.yukleme .yuzde{font-size:2.4rem;font-weight:200;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.yukleme .metin{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--zeytin);margin-block-start:.5rem}
.cubuk{inline-size:180px;block-size:2px;background:var(--cizgi);
  margin:1.1rem auto 0;overflow:hidden;border-radius:99px}
.cubuk i{display:block;block-size:100%;inline-size:0;background:var(--toprak);
  transition:inline-size .3s ease}

/* ---------- Ölçüm rozeti ---------- */
.olcum{position:fixed;inset-block-end:.5rem;inset-inline-start:var(--kenar);z-index:22;
  display:flex;gap:.9rem;font-size:.62rem;letter-spacing:.06em;
  color:rgba(236,230,218,.5);font-variant-numeric:tabular-nums;pointer-events:none}
.olcum.gizli{opacity:0}

/* ---------- Mobil ---------- */
@media (max-width: 880px){
  /* Mobilde ızgara tek yerden daralır. Eskiden her öğe kendi kenar
     değerini yazıyordu (.7 / .8 / .45rem) ve üç ayrı hiza oluşuyordu. */
  :root{--serit:56px;--kenar:.8rem;--alt-yigin:5.3rem;--mini-h:107px;--kose-pay:2.6rem;--lightbox-pay:.7rem}
  .ust{flex-wrap:wrap;gap:.55rem;padding:.7rem .8rem 2rem}
  /* Üç kat şerit ekranın %17,8'ini yiyordu (ölçüldü). Anahtarlar yazıdan
     ikona indiği için marka ile aynı satıra sığıyor; mod düğmeleri alta
     iner. İki kat: ~151 px yerine ~100 px. */
  /* 390 px'de marka + anahtarlar aynı satıra sığmıyor ve modalın
     "× Kapat" düğmesiyle çakışıyordu (ölçüldü: 127×30 px örtüşme).
     Anahtarlar alt satıra iner; marka satırının sağı X'e kalır. */
  /* Marka satırı, modalın kapatma düğmesi kadar yüksek olmalı; yoksa
     alttaki mod şeridi düğmenin altına giriyor (ölçüldü: 22 px örtüşme). */
  .marka{inline-size:auto;margin-inline-end:auto;
    min-block-size:44px;justify-content:center}
  .anahtarlar{order:4;inline-size:100%;flex-wrap:nowrap;gap:.4rem;
    overflow-x:auto;padding-block-start:.1rem}
  .anahtar{flex:none}
  .mod{inline-size:100%;overflow-x:auto;order:3}
  .mod button{padding:.42rem .75rem;font-size:.74rem}
  /* Mini harita overflow:hidden ile kırpılıyor; kenardaki noktaların
     genişletilmiş vuruş alanı da kırpılıyordu. Nokta görsel boyutu
     büyütülerek kırpmanın etkisi azaltıldı. */
  .mini .nokta{inline-size:16px;block-size:16px;border-width:3px}
  .mini .nokta.etkin{inline-size:19px;block-size:19px}
  .mini{inline-size:150px}
  .pusula{inline-size:56px;block-size:56px;
    inset-block-start:calc(var(--serit) + 4.6rem)}
  /* Mobilde pano ve mini harita aynı bantta durur — pano, haritaya yer
     bırakacak kadar daralır, üst üste binmezler. Varsayılan olarak
     katlıdır: ekranın yarısını kaplamaz, başlığa dokununca açılır. */
  .pano{inset-block-start:auto;
    inset-block-end:calc(var(--alt-yigin) + env(safe-area-inset-bottom));
    inline-size:calc(100vw - var(--kenar)*2 - 150px - var(--kat));
    max-block-size:32vh;overflow-y:auto;
    padding:.65rem .8rem}
  .pano .pano-h{font-size:.88rem}
  .pano dl{grid-template-columns:1fr auto;font-size:.72rem;gap:.22rem .5rem}
  /* Katlama oku ile kapatma X'i mobilde ikisi de sağ üstte duruyordu ve
     1 px farkla üst üste biniyordu — ekranda tek bir bozuk ikon gibi
     görünüyordu (ölçüldü: X 187,729 · ok 186,731). Ok X'in soluna alındı. */
  .pano-katla{cursor:pointer;padding-inline-end:3.5rem}
  .pano-katla .ok{display:block;inset-inline-end:1.75rem}
  .pano[data-katli="1"] .pano-govde{display:none}
  .pano[data-katli="1"] .pano-katla .ok{rotate:-90deg}
  .pano-kapat{inset-block-start:.4rem;inset-inline-end:.4rem}
  .alt{padding:1.9rem .8rem calc(.6rem + env(safe-area-inset-bottom))}
  .durak{min-inline-size:0;font-size:.7rem;padding:.42rem .7rem}
  .olcum{font-size:.56rem;gap:.6rem}
}

/* ---------- Dokunma hedefi genişletme ----------
   Ölçüm (390 px genişlikte): mini harita noktası 11–14 px, pano kapatma
   29 px, anahtar 29 px, panorama işareti 26 px. Apple ve Google'ın alt
   sınırı 44 px. Görsel boyut değişmeden görünmez bir vuruş alanı eklenir. */
/* pointer:coarse tek başına yetmiyor — masaüstü tarayıcının dar pencere
   emülasyonunda devreye girmiyor ve orada da parmakla kullanılabiliyor. */
@media (pointer: coarse), (max-width: 880px){
  .mini .nokta::after,
  .pano-kapat::after,
  .pano-katla::after,
  .anahtar::after,
  .form-kapat::after,
  .plan-kapatma::after,
  .ar-secim-kapat::after,
  .zemin-ton::after,
  .lejant-satir::after,
  .gorunum button::after,
  .mod button::after,
  .plan-tipler button::after,
  .plan-sifirla::after,
  .pano-dugme::after{
    content:"";position:absolute;inset:50% auto auto 50%;
    translate:-50% -50%;
    min-inline-size:44px;min-block-size:44px;
    inline-size:100%;block-size:100%;
  }
  /* DİKKAT: yalnız konumlandırılmamış öğelere relative verilir. .isaret,
     .adim, .kapi, .mini .nokta, .pano-kapat ve .form-kapat zaten absolute;
     onları relative yapmak panorama işaretlerini ve kapı hedeflerini
     yerinden oynatır. */
  .pano-katla,.anahtar,.plan-kapatma,.ar-secim-kapat,.zemin-ton,
  .lejant-satir,.gorunum button,.mod button,.durak,.plan-tipler button,
  .plan-sifirla,.ar-sec,.pano-dugme{position:relative}
}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important}
}

/* ── Bağlantı kopyalandı bildirimi ─────────────────────────────────────
   Ekranın altında, mini haritanın üstünde belirir. Zıplama yok — yalnız
   opaklık ve küçük bir kayma; hareket-azaltma tercihinde kayma da düşer. */
.bag-bildirim{position:fixed;inset-block-end:calc(1.4rem + env(safe-area-inset-bottom));
  inset-inline-start:50%;transform:translateX(-50%);z-index:60;
  padding:.62rem 1.1rem;border-radius:999px;
  border:1px solid var(--cizgi);background:var(--panel-kati);
  color:var(--keten);font-size:.78rem;letter-spacing:.03em;
  animation:bag-gir .28s ease both}
@keyframes bag-gir{from{opacity:0;transform:translateX(-50%) translateY(6px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .bag-bildirim{animation:none}
}

/* Yardımcı pano eylemleri yazısız: dört satırlık düğme yığını panoyu
   şişiriyordu. Etiket title/aria-label'da durur. */
.pano-dugme.ikon{padding:.5rem;min-inline-size:36px;justify-content:center}

/* ── Villa içi iki kademeli menü ───────────────────────────────────────
   Üst kat villa tipi, alt kat o tipin odaları. Tek şeritte diziliyken
   hangi odanın hangi tipe ait olduğu okunmuyordu. */
.duraklar:has(.durak-kat){display:block;overflow:visible}
.durak-kat{display:flex;gap:.55rem;overflow-x:auto;scrollbar-width:thin;
  scroll-snap-type:x proximity}
.durak-kat.tipler{margin-block-end:.5rem;padding-block-end:.15rem}
.durak-kat.odalar{padding-block-end:.5rem}
.durak-kat::-webkit-scrollbar{block-size:4px}
.durak-kat::-webkit-scrollbar-thumb{background:var(--cizgi-guclu);border-radius:99px}
/* Tip düğmesi odalardan ayrışsın: iki satırlı, biraz daha güçlü zemin */
.durak.tip{white-space:nowrap}
.durak.tip span{display:block;font-size:.62rem;opacity:.7;margin-block-start:.1rem}
.durak.tip[aria-pressed="true"]{background:var(--toprak);color:#fff}

/* ── Gezinme ipucu ─────────────────────────────────────────────────────
   Mahalleye ilk girişte bir kez görünür. Yeni kontrol (tıkla-yürü, WASD)
   keşfedilmezse hiç kullanılmaz; kalıcı yazı da gürültü olur. */
.gez-ipucu{position:fixed;inset-block-end:calc(7.6rem + env(safe-area-inset-bottom));
  inset-inline-start:50%;transform:translateX(-50%);z-index:24;
  display:flex;align-items:center;gap:.42rem;white-space:nowrap;
  padding:.55rem .9rem;border-radius:999px;
  border:1px solid var(--cizgi);background:var(--panel-kati);
  color:rgba(236,230,218,.9);font-size:.74rem;pointer-events:none;
  animation:ipucu-gir .4s ease both}
.gez-ipucu.kapan{animation:ipucu-cik .5s ease both}
.gez-ipucu .ayrac{opacity:.55}
.gez-ipucu .kutu{display:inline-flex;align-items:center;justify-content:center;
  min-inline-size:1.35rem;padding:.1rem .3rem;border-radius:5px;
  border:1px solid var(--cizgi-guclu);font-size:.68rem;font-weight:600}
@keyframes ipucu-gir{from{opacity:0}to{opacity:1}}
@keyframes ipucu-cik{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .gez-ipucu,.gez-ipucu.kapan{animation:none}
}

/* Konumu ölçülmemiş durak: nokta durur ama kesinlik iddia etmez.
   Şeritteki durak sayısıyla haritadaki nokta sayısı eşit kalır. */
.mini .nokta.yaklasik{inline-size:8px;block-size:8px;opacity:.55;
  background:var(--keten);border-width:1.5px}
.mini .nokta.yaklasik.etkin{inline-size:12px;block-size:12px;opacity:1;
  background:var(--toprak)}

/* ── Geçiş göstergesi ───────────────────────────────────────────────────
   Sahne yüklenirken ekranın üstünde ince bir şerit ilerler. Belirsiz
   süreli iş için belirsiz (indeterminate) hareket: yükleme yüzdesi
   bilinmiyor, sahte bir yüzde göstermek yanıltıcı olurdu. */
.gecis{position:fixed;inset-block-start:0;inset-inline:0;z-index:70;
  block-size:3px;overflow:hidden;pointer-events:none;
  background:rgba(236,230,218,.10);
  opacity:0;transition:opacity .18s ease}
.gecis.acik{opacity:1}
.gecis i{display:block;block-size:100%;inline-size:46%;
  background:linear-gradient(90deg,transparent,var(--toprak) 22%,
    var(--keten) 55%,var(--toprak) 78%,transparent);
  animation:gecis-kay 1.05s cubic-bezier(.62,.02,.36,.98) infinite}
@keyframes gecis-kay{
  from{transform:translateX(-100%)}
  to  {transform:translateX(220%)}
}
/* Sahne yüklenirken tuval hafifçe geri çekilir — geçişin başladığı
   anlaşılsın, ama içerik okunmaz olmasın. */
.sahne.yukleniyor{filter:brightness(.82) saturate(.9)}
.sahne{transition:filter .3s ease}
@media (prefers-reduced-motion:reduce){
  .gecis i{animation-duration:2.1s}
  .sahne.yukleniyor{filter:none}
}


/* Merkezdeki yükleme halkası. Üstteki 3 px şerit tek başına gözden
   kaçıyordu ("geçerken anlaşılmıyor"); halka bakışın olduğu yerde
   duruyor. Yalnız geçiş sürerken görünür, ekranı kapatmaz. */
.gecis-halka{position:fixed;inset-block-start:50%;inset-inline-start:50%;
  z-index:70;pointer-events:none;translate:-50% -50%;
  opacity:0;transition:opacity .2s ease}
.gecis-halka.acik{opacity:1}
.gecis-halka span{display:block;inline-size:38px;block-size:38px;
  border-radius:50%;
  border:2px solid rgba(236,230,218,.18);
  border-block-start-color:var(--keten);
  animation:halka-don .78s linear infinite}
@keyframes halka-don{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .gecis-halka span{animation-duration:2.4s}
}

/* ── Kat planı yakınlaştırma denetimi ──────────────────────────────────
   Kat planı 360° bir sahne değil, düz çizim; tek gezinme yolu pan/zoom.
   Fare tekerleği ve çimdikleme zaten vardı ama görünür bir denetim yoktu:
   kullanıcı yakınlaşabileceğini bilmiyordu. */
.plan-zum{display:flex;align-items:center;gap:.15rem;
  border:1px solid rgba(30,37,34,.16);border-radius:999px;padding:.15rem;
  background:rgba(255,255,255,.55)}
.plan-zum button{appearance:none;border:0;background:transparent;cursor:pointer;
  inline-size:30px;block-size:30px;border-radius:50%;color:#1E2522;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s ease}
.plan-zum button:hover{background:rgba(30,37,34,.09)}
.plan-zum button:disabled{opacity:.32;cursor:default}
.plan-zum button svg{inline-size:16px;block-size:16px}
.plan-zum span{min-inline-size:3.1rem;text-align:center;font-size:.72rem;
  font-variant-numeric:tabular-nums;color:#1E2522;opacity:.72}
@media (max-width:880px){
  .plan-zum span{min-inline-size:2.6rem;font-size:.68rem}
  .plan-zum button{inline-size:34px;block-size:34px}
}

/* ── Kapatma düğmeleri: ters kontrast + yazı ───────────────────────────
   Yalnız ikon olan X, modalın içeriğiyle aynı tonda kalıyordu ve
   fark edilmiyordu. Artık zemin ters kontrast (açık modalda koyu,
   koyu modalda açık) ve yanında ne yaptığını söyleyen bir yazı var. */
.plan-kapatma{display:inline-flex;align-items:center;gap:.42rem;
  padding:.46rem .82rem .46rem .62rem;border-radius:999px;
  border:0;cursor:pointer;font:inherit;font-size:.78rem;font-weight:500;
  background:#1E2522;color:#F4F1EA;
  transition:background .22s ease,transform .18s ease}
.plan-kapatma:hover{background:#31403a}
.plan-kapatma svg{inline-size:17px;block-size:17px;flex:none}
.plan-kapatma:focus-visible{outline:2px solid var(--toprak);outline-offset:2px}

.form-kapat,.ar-secim-kapat{display:inline-flex;align-items:center;gap:.4rem;
  inline-size:auto;block-size:auto;padding:.44rem .8rem .44rem .64rem;
  border-radius:999px;border:0;cursor:pointer;font:inherit;font-size:.76rem;
  font-weight:500;background:var(--keten);color:var(--gece);
  transition:background .22s ease}
.form-kapat:hover,.ar-secim-kapat:hover{background:#fff}
.form-kapat svg,.ar-secim-kapat svg{inline-size:15px;block-size:15px;flex:none}
.form-kapat span,.ar-secim-kapat span,.plan-kapatma span{white-space:nowrap}

@media (max-width:880px){
  /* Dar ekranda yazı kalır — asıl amaç anlaşılırlık; ikon küçülür */
  .plan-kapatma,.form-kapat,.ar-secim-kapat{font-size:.74rem;
    padding-inline:.7rem;min-block-size:40px}
}

/* ── Masterplan denetim sırası ─────────────────────────────────────────
   Sağ kenarda dikey. İki parmakla yakınlaştırmayı ve sürükleyerek
   döndürmeyi herkes bilmiyor; görünür düğme keşfedilebilirlik sağlar.
   Sol tarafta bilgi panosu var, bu yüzden sağda; pusulanın altında. */
.plan-denetim{position:fixed;z-index:22;
  inset-inline-end:var(--kenar);
  inset-block-start:50%;translate:0 -50%;
  display:flex;flex-direction:column;align-items:center;gap:.28rem;
  padding:.34rem;border-radius:999px;
  border:1px solid var(--cizgi);background:var(--panel-kati)}
.plan-denetim[hidden]{display:none}
.plan-denetim button{appearance:none;border:0;background:transparent;cursor:pointer;
  inline-size:34px;block-size:34px;border-radius:50%;color:var(--keten);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s ease}
.plan-denetim button:hover{background:rgba(127,142,115,.26)}
.plan-denetim button:disabled{opacity:.3;cursor:default}
.plan-denetim button svg{inline-size:17px;block-size:17px}
.plan-denetim button:focus-visible{outline:2px solid var(--toprak);outline-offset:2px}
.pd-oran{font-size:.62rem;font-variant-numeric:tabular-nums;
  color:rgba(236,230,218,.62);padding-block:.1rem}
@media (max-width:880px){
  .plan-denetim{gap:.18rem;padding:.28rem}
  .plan-denetim button{inline-size:38px;block-size:38px}
  .pd-oran{font-size:.58rem}
}


/* Bilgi panosu solda ve üstte; görünüm şeridi onunla çakışmasın diye
   pano açıkken altına iner. Pano kapanınca yukarı döner. */
body:has(.pano.acik) .gorunum{
  inset-block-start:calc(var(--serit) + 1.5rem + var(--pano-yuk, 190px));
  transition:inset-block-start .3s ease}

/* ── Galeri ────────────────────────────────────────────────────────────
   Proje render'ları. Kat planıyla aynı lightbox dili: kenarlarda koyu
   boşluk, yuvarlak köşe, geri tuşuyla kapanma. */
.galeri{position:fixed;inset:0;z-index:45;display:grid;
  padding:var(--lightbox-pay);background:rgba(6,9,8,.78);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s ease}
.galeri.acik{opacity:1}
.galeri[hidden]{display:none}
.galeri-govde{display:flex;flex-direction:column;min-block-size:0;
  background:var(--gece);border:1px solid var(--cizgi);border-radius:18px;
  overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.galeri-ust{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  padding:.75rem 1rem;border-block-end:1px solid var(--cizgi);
  background:var(--panel-kati)}
.galeri-baslik{display:flex;align-items:baseline;gap:.5rem;margin-inline-end:auto}
.galeri-baslik b{font-size:.95rem;font-weight:600;color:var(--keten)}
.galeri-baslik span{font-size:.72rem;color:rgba(236,230,218,.55);
  font-variant-numeric:tabular-nums}
.galeri-gruplar{display:flex;gap:.3rem;flex-wrap:wrap}
.galeri-gruplar button{appearance:none;border:1px solid var(--cizgi);
  background:transparent;color:rgba(236,230,218,.72);cursor:pointer;font:inherit;
  font-size:.72rem;padding:.32rem .7rem;border-radius:999px;
  transition:background .2s ease,color .2s ease}
.galeri-gruplar button:hover{background:rgba(127,142,115,.24);color:var(--keten)}
.galeri-gruplar button[aria-pressed="true"]{background:var(--keten);color:var(--gece);
  border-color:var(--keten)}
.galeri-izgara{flex:1;min-block-size:0;overflow-y:auto;padding:1rem;
  display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.galeri-kart{appearance:none;border:0;padding:0;background:transparent;cursor:pointer;
  border-radius:12px;overflow:hidden;position:relative;display:block;
  transition:transform .22s ease}
.galeri-kart img{display:block;inline-size:100%;block-size:auto;aspect-ratio:16/9;
  object-fit:cover;background:var(--koyu)}
.galeri-kart span{position:absolute;inset-inline:0;inset-block-end:0;
  padding:.9rem .6rem .45rem;font-size:.74rem;color:#fff;text-align:start;
  background:linear-gradient(transparent,rgba(6,9,8,.86))}
.galeri-kart:hover{transform:translateY(-2px)}
.galeri-kart:focus-visible{outline:2px solid var(--toprak);outline-offset:2px}

/* Tek görsel tam ekran */
.gorsel-tam{position:fixed;inset:0;z-index:47;display:grid;place-items:center;
  background:rgba(4,6,6,.94);opacity:0;transition:opacity .28s ease}
.gorsel-tam.acik{opacity:1}
.gorsel-tam[hidden]{display:none}
.gorsel-tam img{max-inline-size:94vw;max-block-size:88vh;display:block;
  border-radius:10px}
.gt-alt{position:fixed;inset-block-end:1.1rem;inset-inline-start:50%;
  transform:translateX(-50%);font-size:.8rem;color:rgba(236,230,218,.86);
  background:rgba(6,9,8,.7);padding:.4rem .9rem;border-radius:999px;
  white-space:nowrap}
.gt-kapat{position:fixed;inset-block-start:var(--kenar);inset-inline-end:var(--kenar);
  z-index:2}
.gt-ok{position:fixed;inset-block-start:50%;translate:0 -50%;z-index:2;
  appearance:none;border:1px solid var(--cizgi);background:var(--panel-kati);
  color:var(--keten);cursor:pointer;inline-size:46px;block-size:46px;
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s ease}
.gt-ok:hover{background:rgba(127,142,115,.3)}
.gt-ok svg{inline-size:20px;block-size:20px}
.gt-onceki{inset-inline-start:var(--kenar)}
.gt-sonraki{inset-inline-end:var(--kenar)}
@media (max-width:880px){
  .galeri-izgara{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;
    padding:.6rem}
  .galeri-ust{padding:.6rem .7rem;gap:.5rem}
  .gt-ok{inline-size:40px;block-size:40px}
}

/* Villa tipi kartında cephe görseli — tipleri gözle ayırt etmenin
   en hızlı yolu. Metrekare altında kalır. */
.durak.tip{padding:0;overflow:hidden;min-inline-size:132px}
.durak.tip .tip-gorsel{display:block;inline-size:100%;block-size:52px;
  object-fit:cover;background:var(--koyu)}
.durak.tip b{padding:.4rem .8rem 0}
.durak.tip span{padding:0 .8rem .42rem}
@media (max-width:880px){
  .durak.tip{min-inline-size:112px}
  .durak.tip .tip-gorsel{block-size:44px}
}

/* Panorama denetimi masterplanınkiyle aynı görünümü paylaşır; yalnız
   işlevleri farklı (fov / yaw / pitch). Mini haritanın üstünde durur. */
.pano-denetim{inset-block-start:auto;translate:none;
  inset-block-end:calc(var(--alt-yigin) + var(--mini-h) + var(--kat)*2 + 42px
                       + env(safe-area-inset-bottom))}
@media (max-width:880px){
  .pano-denetim{inset-block-end:calc(var(--alt-yigin) + var(--mini-h)
                                     + var(--kat)*2 + 38px + env(safe-area-inset-bottom))}
}
/* Villa içinde mini harita yok ama alt şerit İKİ KATLI (tip kartları +
   oda listesi). Ölçüldü: tek katlı varsayımla 49x89 px çakışıyordu. */
body[data-mod="villa"] .pano-denetim{
  inset-block-end:calc(var(--alt-yigin) + 108px + env(safe-area-inset-bottom))}