/* ═════ Vaziyet 3B — "Villanızı Seçin" panelinin sağındaki görünüm (yalnız masaüstü)
   Kaynak: Villa Verterra simülasyonunun gerçek 3B modeli (verterra-sim/site-v08, assets/verterra.glb), doğudan kuşbakışı,
   yön v6 planıyla aynı (üstte A1, altta B2, solda güney bahçeleri).
   Görünüm (kök data-gorunum):
     cizim  (varsayılan) mimari çizim: çizgiler modelin kendisinden (normal + derinlik + nesne kimliği geçişleri); seçilen villa
            kendi renkli kesitine yumuşakça döner, diğerleri çizim kalır.
     renkli renkli render; seçimde diğerleri sönükleşir.
   Katmanlar (yalnız saydamlık değişir, boyama yok): temel → [sönük, yalnız renkli] → seçili villanın renkli kesiti (+ beyaz iç kenar)
   → rezerve tarama → tıklama alanları (SVG) → etiketler (HTML, keskin).
   BOYUT: tek değişken --v3b-gen (kutu genişliği; yükseklik oranla). Orta 256 (varsayılan, 256 × 295) · büyük 299 · küçük 212 (v6 yerleşimi).
   Görseller 598 × 688 (büyüğün 2×'i); küçük boylar aynı görseli küçültür. Kutu liste yüksekliğinden (244) uzunsa bileşen panele
   .v3b-uzun ekler (liste satırları kutu boyunca uzar, başlık tek satır kalır). ═════ */
:root{--v3b-gen:256px}   /* varsayılan ORTA (kullanıcı seçimi 20 Eki); büyük 299px, küçük 212px */
.v3b{position:relative;flex:none;width:var(--v3b-gen);height:calc(var(--v3b-gen) * 344 / 299);align-self:flex-start;border-radius:12px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(255,255,255,.3);background:rgba(5,12,14,.32);contain:layout paint}
.v3b-katman{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-select:none;user-select:none;
  opacity:0;will-change:opacity}
/* görseller hazır olunca yumuşakça gelir */
.v3b.hazir .v3b-temel{opacity:1;transition:opacity .5s var(--yumusak,ease)}
.v3b-sonuk{transition:opacity .35s var(--yumusak,ease)}
.v3b-vurgu{transition:opacity .4s var(--yumusak,ease)}
.v3b-tarama{transition:opacity .3s var(--yumusak,ease)}
.v3b.hazir[data-gorunum=renkli][data-secim]:not([data-secim=""]) .v3b-sonuk{opacity:1}
.v3b.hazir[data-secim=A1] .v3b-vurgu[data-v=A1],.v3b.hazir[data-secim=A2] .v3b-vurgu[data-v=A2],
.v3b.hazir[data-secim=B1] .v3b-vurgu[data-v=B1],.v3b.hazir[data-secim=B2] .v3b-vurgu[data-v=B2]{opacity:1}
/* Rezerve villa: kendi alanında ince çapraz tarama — her zaman hafif, seçilince (renkli kesitin üstünde de) belirgin */
.v3b-tarama{background:repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 1px,rgba(255,255,255,0) 1px 4px);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.v3b.hazir .v3b-tarama{opacity:.3}
.v3b.hazir[data-gorunum=renkli][data-secim]:not([data-secim=""]) .v3b-tarama{opacity:.14}
.v3b.hazir[data-secim=A1] .v3b-tarama[data-v=A1],.v3b.hazir[data-secim=A2] .v3b-tarama[data-v=A2],
.v3b.hazir[data-secim=B1] .v3b-tarama[data-v=B1],.v3b.hazir[data-secim=B2] .v3b-tarama[data-v=B2]{opacity:.9}

/* Tıklama / üzerine gelme alanları: villanın ekrandaki gerçek izdüşümü (çatı + cephe + bahçe) */
.v3b-alan{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
/* v9: pointer-events:all görünürlüğü yok sayıyordu → panel gizliyken (açılış, villa, alt bölümler) görünmeyen alanlar tıklamayı yakalıyordu
   (açılışta "Villaları gör" düğmesinin alt kenarı, ısıtma anında sol alt köşe). visibleFill: yalnız görünürken; panel kapalıyken
   (ısıtmada görünür ama saydam) hiç. */
.v3b-alan path{fill:rgba(0,0,0,0);pointer-events:visibleFill;cursor:pointer;outline:none}
.parca:not(.acik) .v3b-alan path{pointer-events:none}

/* Etiketler: v6 plan etiketleriyle aynı görünüm (koyu çip, seçilince beyaz); yerleri çizimdeki çatı boşluklarına göre */
.v3b-etiket{position:absolute;transform:translate(-50%,-50%);display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:0;
  font:inherit;color:#fff;background:none;border:0;cursor:pointer;opacity:0;transition:opacity .5s var(--yumusak,ease)}
.v3b-etiket.yatay{flex-direction:row;gap:4px}
.v3b.hazir .v3b-etiket{opacity:1}
.v3b-etiket > span{font-size:12px;font-weight:600;letter-spacing:.06em;line-height:1;padding:3px 5px;border-radius:4px;
  background:rgba(5,12,14,.8);border:1px solid rgba(255,255,255,.26);color:#fff;transition:background-color .3s,color .3s,border-color .3s;white-space:nowrap}
.v3b-etiket .v3b-rez{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 4px 2px;background:#fff;border-color:#fff;color:var(--gece,#0d2232)}
.v3b-etiket:hover .v3b-kod,.v3b-etiket.esles .v3b-kod{background:#fff;border-color:#fff;color:var(--gece,#0d2232)}
.v3b-etiket:hover .v3b-rez,.v3b-etiket.esles .v3b-rez{background:var(--gece,#0d2232);border-color:#fff;color:#fff}
.v3b-etiket:focus-visible{outline:none}
.v3b-etiket:focus-visible .v3b-kod{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--gece,#0d2232)}

/* Uzun yerleşim (varsayılan; kutu listeden uzun: büyük / orta): başlık v6'daki gibi tek satır ve tam genişlik; liste satırları
   kutunun boyunca eşit uzar (4 satır, 1fr), içerik ortada. */
.cadde-panel.v3b-uzun .satirlar{grid-auto-rows:1fr;align-content:stretch}
.cadde-panel.v3b-uzun .v3b-etiket > span,.cadde-panel.v3b-genis .v3b-etiket > span{font-size:var(--b-etiket,13px);padding:3px 6px}
.cadde-panel.v3b-uzun .v3b-etiket .v3b-rez,.cadde-panel.v3b-genis .v3b-etiket .v3b-rez{font-size:11px;padding:4px 5px 3px}
/* Geniş yerleşim (seçenek: kur(..., { yerlesim:'genis' })): başlık + liste solda 300 px sütunda, kutu sağda, alt kenarı listeyle hizalı.
   Alt başlık bu sütunda iki satıra iner; text-wrap:balance iki dengeli satır yapar, "210 m²" bölünmez. */
.cadde-panel.v3b-genis{display:grid;grid-template-columns:300px var(--v3b-gen);column-gap:16px;align-items:start}
.cadde-panel.v3b-genis .cp-bas{grid-column:1;grid-row:1}
.cadde-panel.v3b-genis .cp-bas .govde{text-wrap:balance}
.cadde-panel.v3b-genis .cp-bas [data-rakam=net]{white-space:nowrap}
.cadde-panel.v3b-genis .cp-ic{display:contents}
.cadde-panel.v3b-genis .satirlar{grid-column:1;grid-row:2;margin-top:14px;position:relative}   /* .cam > * yerine (cp-ic display:contents) */
.cadde-panel.v3b-genis .v3b{grid-column:2;grid-row:1 / span 2;align-self:end}

@media (prefers-reduced-motion:reduce){
  .v3b-katman,.v3b-etiket,.v3b-etiket > span{transition-duration:.01s!important}
}
/* Telefonda vaziyet görünümü yok (onaylı karar): bileşen kurulmaz, görseller hiç inmez */
@media (max-width:600px){ .v3b{display:none} }