/* ============================================================
   YÇFİT — ÜST KATMAN
   Mevcut tasarım dilinin üstüne binen ince katman:
   bağlama duyarlı imleç · hero ışık huzmesi · bölüm bıçağı ·
   harf harf açılan başlıklar · 2,5B kat planı · ses düğmesi ·
   sinematik fotoğraf geçişi · öncesi/sonrası sürgüsü ·
   mekanik sayaç · paylaşılabilir sonuç kartı.

   Kural: yeni renk yok, yeni yuvarlama yok. Her şey tokens.css'ten.
   Hareket azaltmada base.css zaten tüm geçişleri kesiyor; buradaki
   JS de aynı sorguyu okuyup hiç kurulmuyor.
   ============================================================ */

/* ============================================================
   0 · İMLECİN KENDİSİ — DAMBIL
   Sistem oku yerine salonun kendi aleti: siyah bar, asit yeşili
   plakalar. Tam olarak nereyi gösterdiği belli olsun diye ucunda
   küçük bir nokta var (imlecin sıcak noktası orası).
   Yalnız ince işaretçili cihazlarda; sade modda sistem oku geri gelir.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  :root:not([data-plain="true"]) body,
  :root:not([data-plain="true"]) a,
  :root:not([data-plain="true"]) button,
  :root:not([data-plain="true"]) [role="button"],
  :root:not([data-plain="true"]) .tile,
  :root:not([data-plain="true"]) summary {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg transform='rotate(-45 18 18)'%3E%3Crect x='11' y='15.4' width='14' height='5.2' fill='%230A0A08' stroke='%23C8FF00' stroke-width='1.6'/%3E%3Crect x='3.5' y='9' width='7' height='18' rx='1.5' fill='%23C8FF00' stroke='%23060605' stroke-width='1.4'/%3E%3Crect x='25.5' y='9' width='7' height='18' rx='1.5' fill='%23C8FF00' stroke='%23060605' stroke-width='1.4'/%3E%3C/g%3E%3Ccircle cx='6' cy='6' r='1.7' fill='%23C8FF00' stroke='%23060605' stroke-width='.8'/%3E%3C/svg%3E") 6 6, auto;
  }
  /* Yazı alanlarında dambıl işe yaramaz — metin imleci kalsın */
  :root:not([data-plain="true"]) input,
  :root:not([data-plain="true"]) textarea,
  :root:not([data-plain="true"]) select { cursor: auto; }
}

/* ============================================================
   1 · BAĞLAMA DUYARLI ETİKET
   Dambılın yanında küçük bir etiket: fotoğrafta "Büyüt", yatay
   sahnede "Kaydır", planda "Aç", telefonda "Yaz". Halka kaldırıldı —
   iş imleçte, etiket yalnız ne olacağını söylüyor.
   ============================================================ */
/* Konum ve ölçek JS'teki tek döngüden sürülüyor: transform GEÇİŞ
   listesinde YOK. Listede kalsaydı her kare .3s'lik yeni bir geçiş
   başlatır ve etiket işaretçinin arkasında sürüklenirdi. */
.cursor {
  contain: layout style;
  width: auto; height: auto; margin: 0;
  padding: .34rem .6rem;
  background: rgba(6, 6, 5, .86);
  border: 1px solid var(--acid);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px),
                     calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: opacity .18s linear, border-color .25s var(--e-cut), background .25s var(--e-cut);
}
.cursor__t { white-space: nowrap; line-height: 1; }

/* Sürükleme — yatay salon sahnesi, tur, karşılaştırma sürgüsü */
.cursor[data-kind="drag"] { border-color: var(--ember); }
.cursor[data-kind="drag"] .cursor__t { color: var(--ember); }

/* Kan kırmızısı — siteden dışarı çıkan eylemler (telefon, WhatsApp) */
.cursor[data-kind="blood"] {
  border-color: var(--blood);
  background: rgba(196, 18, 28, .22);
}
.cursor[data-kind="blood"] .cursor__t { color: var(--bone); }

/* Ölçek de aynı döngüden geliyor (basılı tutunca sıkışma dahil),
   bu yüzden burada transform kuralı yok. */

/* ============================================================
   1b · YATAY SAHNEDE ODAK
   Üzerine gelinen kare bir tık büyüyor, diğerleri kararıyor.
   Büyütme `scale` ÖZELLİĞİYLE yapılıyor, `transform` ile değil:
   panelin transform'unu GSAP (rotationY) sürüyor, ikisi çakışmasın.
   ============================================================ */
.salon__panel {
  transition: filter .35s var(--e-cut), scale .35s var(--e-load);
}
.salon__track:hover .salon__panel { filter: brightness(.42) saturate(.75); }
.salon__track .salon__panel:hover {
  filter: none; scale: 1.035; z-index: 3;
}
/* Dikey kare, yatay panele "cover" ile sığmıyordu: duvar resmi kadrajın
   dışında kalıyor, ekranda yalnız zemin görünüyordu. Panel bu kare için
   fotoğrafın kendi oranını alıyor — kare tam görünüyor ve kenarda siyah
   bant kalmıyor. Yükseklik diğer panellerle aynı, sıra bozulmuyor. */
.salon__panel[data-full="true"] {
  width: auto;
  aspect-ratio: 1054 / 1400;
}
.salon__panel[data-full="true"] img {
  object-fit: contain;
  background: var(--ink);
}
@media (max-width: 720px) {
  /* Dar ekranda dikey kare ekranı boydan boya kaplamasın */
  .salon__panel[data-full="true"] { width: auto; max-width: 84vw; }
}

/* ============================================================
   2 · HERO IŞIK HUZMESİ
   Salonun tavan spotları. Fare hareketiyle çok az kayıyor;
   sahne düz bir video olmaktan çıkıp derinlik kazanıyor.
   Blur YOK — tam ekran bulanıklık hero kaydırmasında pahalı.
   ============================================================ */
.hero__shaft {
  position: absolute; inset: -12% -14% 0 -14%;
  z-index: -1; pointer-events: none;
  opacity: .5;
  mix-blend-mode: screen;
  background:
    linear-gradient(101deg, transparent 26%, rgba(255,154,31,.16) 34%, transparent 43%),
    linear-gradient(97deg,  transparent 49%, rgba(200,255,0,.09)  56%, transparent 63%),
    linear-gradient(112deg, transparent 68%, rgba(255,248,233,.06) 74%, transparent 81%);
  will-change: transform;
}
@media (hover: none), (pointer: coarse) { .hero__shaft { opacity: .34; } }

/* ============================================================
   3 · BÖLÜM BIÇAĞI
   Bölüm görünüre girince üst kenarda zemindeki LED şeridi
   soldan sağa çekiliyor. Bölümler arası "kesme".
   ============================================================ */
.blade {
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px; overflow: hidden; pointer-events: none; z-index: 3;
}
.blade::before {
  content: ""; display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--ember) 0%, var(--acid) 38%, transparent 92%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.05s var(--e-cut);
}
.blade[data-on="true"]::before { transform: scaleX(1); }
/* Kesiği açan kıvılcım — bıçağın ucu */
.blade::after {
  content: ""; position: absolute; top: -3px; left: 0;
  width: 54px; height: 8px;
  background: radial-gradient(closest-side, var(--acid-glow), transparent);
  opacity: 0; transform: translateX(0);
  transition: transform 1.05s var(--e-cut), opacity .35s linear .8s;
}
.blade[data-on="true"]::after { opacity: 0; transform: translateX(calc(100vw - 54px)); }

/* ============================================================
   4 · HARF HARF AÇILAN BÖLÜM BAŞLIKLARI
   Harfler ağırlık gibi düşüp yerine oturuyor. Degrade ana
   başlıkta kaldığı için harfler yüzeyin içinde kayıyor.
   Animasyon bitince metin tek parçaya geri dönüyor — çeviri
   katmanı bütün cümleyi görmeye devam ediyor.
   ============================================================ */
.ltr {
  display: inline-block;
  transform: translate3d(0, .62em, 0) rotate(2.4deg);
  opacity: 0;
  transition: transform .78s var(--e-load), opacity .42s linear;
  will-change: transform;
}
[data-split="on"] .ltr { transform: none; opacity: 1; }
.ltr--sp { width: .27em; }

/* Bölünemeyen başlık (içinde başka öğe var): perde açılışı */
.cut-head {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 26px, 0);
  transition: clip-path .95s var(--e-cut), transform .95s var(--e-load);
}
.cut-head[data-split="on"] { clip-path: inset(0 0 0 0); transform: none; }

/* ------------------------------------------------------------
   Harf harf tepki veren başlık — yalnız [data-hoverhead] taşıyan
   başlıkta ("Süreni seç"). Gerçek metin .hh__src katmanında
   duruyor: ekrandan kalkar ama DOM'da ve erişilebilirlik
   ağacında kalır, çeviri onu çevirir. Görünen kopya .hh__out.
   ------------------------------------------------------------ */
.hoverhead { position: relative; }
.hoverhead .hh__src {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.hh__ch {
  display: inline-block;
  color: inherit;
  transition: color var(--d-fast) var(--e-cut), transform var(--d-fast) var(--e-impact);
}
.hh__ch:hover { color: var(--acid); transform: translateY(-.14em) scale(1.06); }
/* komşu harf daha az kalksın — küçük bir dalga */
.hh__ch:hover + .hh__ch,
.hh__ch:has(+ .hh__ch:hover) { transform: translateY(-.06em); }
@media (prefers-reduced-motion: reduce) {
  .hh__ch, .hh__ch:hover, .hh__ch:hover + .hh__ch { transform: none; }
}

/* ============================================================
   5 · KAT PLANI — 2,5B
   Şematik plan fareyle hafifçe eğiliyor; bölgeye gelince o
   bölge zeminden kalkıyor. Erişilebilirlik değişmiyor:
   altındaki <g role="button"> ve klavye yolu aynı.
   ============================================================ */
.plan2__stage { perspective: 1500px; }
.plan2__stage .plan2__svg {
  transform-style: preserve-3d;
  transition: transform .6s var(--e-load);
  will-change: transform;
}
.plan2__svg .zone {
  transition: transform .35s var(--e-impact);
  transform-box: fill-box; transform-origin: center;
}
.plan2__svg .zone:hover,
.plan2__svg .zone:focus-visible { transform: translateY(-6px); }
.plan2__svg .zone rect { transition: fill .3s var(--e-cut), stroke .3s var(--e-cut), filter .3s var(--e-cut); }
.plan2__svg .zone:hover rect,
.plan2__svg .zone:focus-visible rect { filter: drop-shadow(0 14px 26px rgba(200, 255, 0, .20)); }

/* ============================================================
   6 · SES DÜĞMESİ
   Sesler tarayıcıda üretiliyor (Web Audio) — indirilen dosya yok.
   Varsayılan KAPALI; açan kullanıcı hatırlanıyor.
   ============================================================ */
.sfx {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--line);
  color: var(--ash); cursor: pointer;
  transition: color var(--d-fast) var(--e-cut), border-color var(--d-fast) var(--e-cut);
}
.sfx:hover { color: var(--bone); border-color: var(--ash-dim); }
.sfx[aria-pressed="true"] { color: var(--acid); border-color: var(--acid); }
.sfx svg { width: 16px; height: 16px; }
.sfx [data-icon="off"] { display: none; }
.sfx[aria-pressed="false"] [data-icon="on"]  { display: none; }
.sfx[aria-pressed="false"] [data-icon="off"] { display: block; }
@media (max-width: 400px) { .nav .sfx { display: none; } }

/* Menü içindeki geniş kopya — dar ekranda tek erişim yolu */
.sfx--wide {
  width: auto; height: auto; justify-self: start;
  grid-auto-flow: column; align-items: center; gap: .6rem;
  padding: .6rem .9rem;
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: .18em; text-transform: uppercase;
}
@media (min-width: 1024px) { .drawer .sfx--wide { display: none; } }

/* ============================================================
   7 · SİNEMATİK FOTOĞRAF GEÇİŞİ
   Lightbox ve turda kare değişimi sert kesme değil; yeni kare
   içeri çekilerek giriyor ve durduğu sürece çok yavaş kayıyor.
   ============================================================ */
.lightbox__stage img[data-in="true"] { animation: shotIn .58s var(--e-load) both; }
.tour__stage img[data-in="true"]     { animation: shotIn .5s var(--e-load) both; }
@keyframes shotIn {
  from { opacity: 0; transform: scale(1.04) translateY(12px); }
  to   { opacity: 1; transform: none; }
}
/* Duran karede çok yavaş sürüklenme — fotoğraf "nefes alıyor" */
.lightbox[data-open="true"] .lightbox__stage img[data-drift="true"] {
  animation: shotIn .58s var(--e-load) both, shotDrift 26s ease-in-out 1.2s infinite alternate;
}
@keyframes shotDrift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.045) translate3d(-1.2%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox__stage img, .tour__stage img { animation: none !important; }
}

/* ============================================================
   8 · ÖNCESİ / SONRASI SÜRGÜSÜ
   İki kareyi yan yana koymak yerine üst üste bindirip
   sürgüyle kesiyoruz. Klavyeyle de sürülebiliyor.
   ============================================================ */
.cmp {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4; touch-action: none;
  cursor: ew-resize; user-select: none;
  border: var(--border-soft);
}
.cmp img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.cmp__after { clip-path: inset(0 0 0 var(--p, 50%)); }
.cmp__bar {
  position: absolute; top: 0; bottom: 0; left: var(--p, 50%);
  width: 2px; margin-left: -1px;
  background: var(--acid);
  box-shadow: 0 0 18px var(--acid-glow);
  pointer-events: none;
}
.cmp__grip {
  position: absolute; top: 50%; left: var(--p, 50%);
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  display: grid; place-items: center; gap: 3px;
  grid-auto-flow: column;
  background: var(--acid); color: var(--ink);
  clip-path: polygon(var(--chamfer-s) 0, 100% 0, 100% calc(100% - var(--chamfer-s)),
                     calc(100% - var(--chamfer-s)) 100%, 0 100%, 0 var(--chamfer-s));
  font-weight: var(--fw-max); font-size: var(--t-micro);
}
.cmp:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.cmp__tag {
  position: absolute; bottom: 0; padding: .35rem .7rem;
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: .18em; text-transform: uppercase;
  background: rgba(6, 6, 5, .78); color: var(--bone);
}
.cmp__tag--l { left: 0; }
.cmp__tag--r { right: 0; }

/* ============================================================
   9 · MEKANİK SAYAÇ
   Fiyat ve sayılar dijital olarak "atlamıyor"; makaralı sayaç
   gibi dönüyor. Rakam sütunu 0–9 yığını, hedefe kadar kayıyor.
   ============================================================ */
.odo { display: inline-flex; align-items: baseline; }
.odo__d {
  display: block; overflow: hidden;
  height: 1em; line-height: 1;
}
.odo__d i {
  display: block; font-style: normal; line-height: 1;
  transform: translateY(0);
  transition: transform 1.35s var(--e-load);
}
.odo__d b { display: block; height: 1em; line-height: 1; font-weight: inherit; }

/* Puan kutusunda tek seferlik ışık geçişi */
.rating { position: relative; overflow: hidden; }
.rating[data-lit="true"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 34%, rgba(255,248,233,.12) 50%, transparent 63%);
  animation: sheen 1.5s var(--e-cut) both;
}
@keyframes sheen {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}

/* ============================================================
   10 · SONUÇ KARTI
   Hesaplayıcı çıktısı, salonun kimliğiyle çizilmiş bir kare
   olarak indiriliyor / paylaşılıyor. Çizim tarayıcıda yapılıyor.
   ============================================================ */
.card-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-5);
}
.card-actions .tool__hint { flex-basis: 100%; }