/* 3D gezinti görüntüleyicisi. Belirteçler ve .chip / .round / .seg / .btn sınıfları assets/site.css'ten gelir.
   Görüntüleyici her zaman koyu çerçevededir: sahne öne çıksın diye arayüz geri durur. */
.gz{position:relative;width:100%;height:100%;overflow:hidden;background:var(--film);color:var(--film-ink);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.gz__canvas{display:block;width:100%;height:100%;outline:none;touch-action:none;cursor:grab}
.gz__canvas:active{cursor:grabbing}
.gz[data-locked] .gz__canvas{cursor:none}
.gz__canvas:focus-visible{outline:2px solid var(--film-ink);outline-offset:-4px}
/* Yürürken sahnenin tamamı zaten etkin; çevresindeki odak çizgisi görüntüyü böler */
.gz[data-state="walking"] .gz__canvas:focus-visible{outline:none}

/* Üst ve alt köşelerdeki denetimler */
.gz__hud>*{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;transition:opacity 200ms ease}
.gz__tl{left:12px;top:12px}.gz__tr{right:12px;top:12px}.gz__bl{left:12px;bottom:12px}.gz__br{right:12px;bottom:12px}
@media (min-width:768px){.gz__tl{left:18px;top:18px}.gz__tr{right:18px;top:18px}.gz__bl{left:18px;bottom:18px}.gz__br{right:18px;bottom:18px}}
.gz:not([data-state="walking"]):not([data-state="paused"]) .gz__hud>*{opacity:0;pointer-events:none}
/* Duraklayınca fare serbesttir: köşe denetimleri perdenin üstünde, tıklanabilir kalır */
.gz[data-state="paused"] .gz__hud>*{z-index:6}
.gz[data-state="paused"] .gz__stick{display:none}
/* Fare kilitliyken düğmeye tıklanamaz; yanındaki tuş aynı işi yapar */
.gz__key{display:none;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:7px;font:600 12.5px var(--text);color:var(--film-ink);background:var(--scrim);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
@media (hover:hover) and (pointer:fine){.gz__key{display:inline-grid}}
.gz__back{text-decoration:none;min-height:40px}
.gz .round:focus-visible,.gz .seg button:focus-visible,.gz__back:focus-visible{outline:2px solid var(--film-ink);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.gz__back:hover{background:rgba(8,10,12,.85)}}

/* Küçük plan */
.gz__map{display:block;width:clamp(120px,15vw,176px);height:auto;padding:8px;border-radius:10px;background:var(--scrim);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--film-line);overflow:visible}
.gz__room{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.45);stroke-width:.05}
.gz__block{fill:rgba(255,255,255,.2);pointer-events:none}
.gz__cone{fill:var(--accent);opacity:.55;pointer-events:none}
.gz__me{fill:var(--accent);pointer-events:none}
/* Birden çok oda: plan büyür, bulunulan oda aydınlanır, odaya tıklanınca oraya geçilir */
.gz__map--rooms{width:clamp(180px,21vw,280px)}
.gz__map--rooms .gz__room{cursor:pointer;stroke-width:.07;transition:fill 200ms ease}
.gz__map--rooms .gz__room[data-here]{fill:rgba(240,168,48,.2)}
.gz__num{fill:rgba(255,255,255,.72);font:600 .78px var(--text);text-anchor:middle;pointer-events:none}
@media (hover:hover) and (pointer:fine){.gz__map--rooms .gz__room:hover{fill:rgba(255,255,255,.2)}}

/* Oda düğmeleri: dokunmatikte planın yerini tutar (masaüstünde plan ve rakam tuşları var) */
.gz__rooms{left:0;right:0;top:60px;flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px 12px;scroll-padding-inline:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.gz__rooms::-webkit-scrollbar{display:none}
.gz__rooms button{flex:none;min-height:40px;padding:0 14px;border-radius:999px;background:var(--scrim);color:var(--film-dim);font-size:13.5px;font-weight:500;white-space:nowrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--film-line);transition:background-color 200ms ease,color 200ms ease,transform 160ms var(--ease-out)}
.gz__rooms button:active{transform:scale(.97)}
.gz__rooms button[aria-pressed="true"]{background:var(--film-ink);color:#0B0E11}
.gz__rooms button:focus-visible{outline:2px solid var(--film-ink);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.gz .gz__hud .gz__rooms{display:none}}

/* Dokunmatik yürüme halkası: basılan yerde belirir */
.gz__stick{left:0;top:0;width:104px;height:104px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);background:rgba(8,10,12,.28);pointer-events:none;opacity:0;transition:opacity 160ms ease}
.gz__stick[data-on]{opacity:1}
.gz__stick i{position:absolute;left:30px;top:30px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.85)}
@media (hover:none){.gz__bl{display:none}}
/* Dar ekranda başlık etiketi ışık düğmesinin altına giriyordu */
@media (max-width:560px){.gz__back+.chip{display:none}}

/* Başlangıç ve duraklama perdesi */
.gz__veil{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:24px;text-align:center;background:rgba(8,10,12,.52);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity 260ms ease,visibility 0s linear 0s}
.gz[data-state="walking"] .gz__veil{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 200ms ease,visibility 0s linear 200ms}
/* Duraklamada sahne görünür kalsın: ışık değişince fark edilsin */
.gz[data-state="paused"] .gz__veil{background:rgba(8,10,12,.4);backdrop-filter:none;-webkit-backdrop-filter:none}
.gz[data-state="paused"] .gz__card{padding:28px 32px;border-radius:16px;background:rgba(8,10,12,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px var(--film-line)}
.gz__card{max-width:540px}
.gz__card .kicker{color:var(--film-dim)}
.gz__title{font-family:var(--display);font-weight:400;letter-spacing:-.022em;font-size:clamp(36px,5.4vw,68px);line-height:1;margin:16px 0 0;text-wrap:balance}
.gz__title em{font-style:italic}
.gz__help{color:var(--film-dim);font-size:16.5px;line-height:1.7;margin:18px auto 0;max-width:44ch;text-wrap:pretty}
.gz__help kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;margin:0 2px;border-radius:6px;font:500 13px var(--text);color:var(--film-ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
/* Tuş listesi */
.gz__keys{display:grid;grid-template-columns:auto auto;justify-content:center;gap:12px 28px;margin:24px auto 0;text-align:left}
.gz__keys>div{display:flex;align-items:center;gap:10px;min-width:0}
.gz__keys dt{flex:none;display:flex;align-items:center;gap:3px;min-width:114px;justify-content:flex-end;color:var(--film-ink);font-size:14px;font-weight:500}
.gz__keys dd{margin:0;color:var(--film-dim);font-size:15px;white-space:nowrap}
.gz__keys kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:6px;font:500 13px var(--text);color:var(--film-ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
/* Sağ sütunun tuşları tek tuş: etiketler sütun içinde hizalı kalsın diye dar tutulur */
.gz__keys>div:nth-child(even) dt{min-width:40px}
@media (max-width:520px){.gz__keys{grid-template-columns:auto}.gz__keys>div:nth-child(even) dt{min-width:114px}}
.gz__load{height:2px;max-width:260px;margin:26px auto 12px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}
.gz__load i{display:block;height:100%;background:var(--film-ink);transform-origin:0 50%;transform:scaleX(0);transition:transform 200ms linear}
.gz__pct{color:var(--film-dim);font-size:15px;font-variant-numeric:tabular-nums;min-height:1.6em}
.gz__card .btn{margin-top:26px}
.gz__card .btn[disabled]{opacity:0;pointer-events:none}
.gz__card .btn{transition:transform 160ms var(--ease-out),background-color 200ms ease,opacity 260ms ease}
.gz__card .btn:focus-visible{outline:2px solid var(--film-ink);outline-offset:3px}
.gz[data-state="error"] .gz__pct{color:var(--film-ink);font-size:17px}

/* Tek başına açılan sayfa (size özel bağlantı) */
.gz-page,.gz-page body{height:100%;margin:0;overflow:hidden;background:var(--film);overscroll-behavior:none}
.gz-page #gezinti{height:100vh;height:100dvh}
/* Çentikli ekranlarda köşe denetimleri güvenli alanın içinde kalsın */
.gz-page .gz__tl{left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top))}
.gz-page .gz__tr{right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top))}
.gz-page .gz__bl{left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom))}
.gz-page .gz__br{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
.gz-page .gz__rooms{top:calc(max(12px,env(safe-area-inset-top)) + 48px);padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))}

@media (prefers-reduced-motion:reduce){
  .gz__veil,.gz[data-state="walking"] .gz__veil{transition:none}
}