/* Pano arayüzü: sahneyi çevreleyen sakin sergi künyesi. */ :root{--salon-sol:max(24px,env(safe-area-inset-left));--salon-sag:max(24px,env(safe-area-inset-right));--salon-ust:max(24px,env(safe-area-inset-top));--salon-alt:max(24px,env(safe-area-inset-bottom))} body{height:100dvh} button,input,select{font:inherit} button,a,input,select{ -webkit-tap-highlight-color:transparent } button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #f4f2ed;outline-offset:5px} [hidden]{display:none!important} #panoCanvas{transition:opacity .18s ease} body.salon-gecis #panoCanvas{opacity:.15} .pano-cikis,.pano-ses,.salon-ayar-dugme{top:var(--salon-ust);height:44px;background:rgba(16,17,19,.86);border:1px solid rgba(236,238,242,.22);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:3px;letter-spacing:.08em;font-size:11px} .pano-cikis{left:var(--salon-sol);padding:0 16px} .pano-katalog{left:calc(var(--salon-sol) + 150px)} .pano-ses{right:var(--salon-sag);width:44px} .salon-ayar-dugme{position:fixed;right:calc(var(--salon-sag) + 54px);z-index:1100;padding:0 16px;color:var(--murekkep);cursor:pointer} .salon-ayar-dugme span{margin-left:16px} .salon-ayar-dugme:hover{background:#eceef2;color:#111} .salon-kimlik{position:fixed;top:calc(var(--salon-ust) + 2px);left:50%;transform:translateX(-50%);z-index:850;display:grid;gap:4px;text-align:center;color:#fff;text-shadow:0 1px 8px #000;pointer-events:none} /* Ad PHP'den geliyor (pano.php seoKimlik()['ad']); buyuk harfi CSS yapar ki altinda Turkce kural gecerli olsun. */ .salon-kimlik>span{font-size:11px;letter-spacing:.32em;text-transform:uppercase} .salon-kimlik i{font:italic 15px Georgia,serif;opacity:.7} .salon-rota{position:fixed;bottom:var(--salon-alt);left:50%;transform:translateX(-50%);z-index:880;display:flex;align-items:center;gap:18px;color:#eceef2;background:rgba(16,17,19,.9);border:1px solid rgba(236,238,242,.18);border-radius:3px;padding:5px;max-width:calc(100% - 48px)} .salon-rota>div{display:grid;gap:5px;min-width:140px;max-width:260px;text-align:center} #salonKonum{font:9px/1.2 'Segoe UI',sans-serif;letter-spacing:.18em;color:#b5b8bd;text-transform:uppercase} #salonKonumAd{font:italic 15px/1.2 Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .salon-rota button,.ep-gezinme button{width:44px;height:44px;flex-shrink:0;border:0;background:transparent;color:inherit;font-size:22px;cursor:pointer} .salon-rota button:hover,.ep-gezinme button:hover{background:#eceef2;color:#111} .salon-rota button:disabled{opacity:.25;cursor:default} .fare-ipucu{bottom:calc(var(--salon-alt) + 80px);border-radius:3px;backdrop-filter:none;-webkit-backdrop-filter:none} .giris-levha{bottom:calc(var(--salon-alt) + 94px);backdrop-filter:none;-webkit-backdrop-filter:none} body:not(.touch-device) #joystick-container{display:none!important} body.touch-device.joystick-enabled #joystick-container{display:flex;left:var(--salon-sol);bottom:calc(var(--salon-alt) + 6px);width:110px;height:110px;z-index:900} #joystick-bg{width:100px;height:100px;border-color:rgba(255,255,255,.42);background:rgba(16,17,19,.42)} #joystick{width:54px;height:54px;left:23px;top:23px;background:rgba(235,237,240,.78);border:1px solid rgba(255,255,255,.5);box-shadow:0 3px 15px #0003} #joystick-container::after{content:'WALK';position:absolute;bottom:-10px;width:100px;text-align:center;color:#fff9;font-size:8px;letter-spacing:.22em;pointer-events:none} #crosshair{width:5px;height:5px;box-shadow:0 0 0 3px #0002} .e2-ic{max-width:min(70vw,540px)} .e2-ad{font-size:clamp(20px,2.2vw,32px);white-space:normal;text-align:center;overflow-wrap:anywhere} .pano-sinema::after{display:none} .yukleme-ust{font-size:10px;letter-spacing:.26em;color:#aaaeb4;text-transform:uppercase} .yukleme-baslik{font:400 clamp(36px,5vw,72px)/1.1 Georgia,serif;letter-spacing:-.04em;color:#eceef2;text-align:center} .yukleme-baslik em{display:block;font-weight:400;color:#9fa4ad} #loadingScreen .yukleme-ic{width:100%;padding:28px;gap:28px} #loadingScreen .yukleme-mark{width:min(220px,50vw);height:1px;border:0;border-radius:0;background:linear-gradient(90deg,transparent,#f2f2f2,transparent);animation:panoNefes 2s ease-in-out infinite} #loadingScreen p{font-size:10px;letter-spacing:.12em} @keyframes panoNefes{50%{opacity:.3;transform:scaleX(.55)}} #salonAyar{position:fixed;inset:0 0 0 auto;margin:0;width:min(470px,100%);height:100%;height:100dvh;max-height:100dvh;max-width:100%;padding:calc(var(--salon-ust) + 54px) clamp(24px,4vw,44px) var(--salon-alt);color:#eceef2;background:#111215;border:0;border-left:1px solid #ffffff20;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-user-select:text;user-select:text} #salonAyar::backdrop{background:#08090bb8} #salonAyar[open]{animation:salonPanel .28s ease both} @keyframes salonPanel{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}} .salon-panel-kapat{position:fixed;z-index:1;right:var(--salon-sag);top:var(--salon-ust);height:44px;width:44px;border:1px solid #ffffff30;background:#111215;color:inherit;cursor:pointer;font-size:26px} .salon-eyebrow{font-size:9px;letter-spacing:.22em;color:#a2a7af} #salonAyar h2{font:400 clamp(38px,5vw,52px)/1.07 Georgia,serif;letter-spacing:-.035em;margin:20px 0} #salonAyar h2 em{font-weight:400;color:#a2a7af} .salon-panel-giris{font-size:13px;line-height:1.7;color:#a2a7af;max-width:34ch} .salon-rehber{border-block:1px solid #ffffff20;margin:26px 0;padding:12px 0;font-size:12px;line-height:1.7;color:#d0d3d8} .salon-rehber kbd{font:10px 'Segoe UI',sans-serif;letter-spacing:.06em;border:1px solid #ffffff25;padding:3px 5px} .salon-rehber--dokunma{display:none} .touch-device .salon-rehber--fare{display:none} .touch-device .salon-rehber--dokunma{display:block} .salon-alan{display:grid;gap:12px;margin:24px 0;font-size:12px} .salon-alan>span{display:flex;justify-content:space-between;gap:12px} .salon-alan select{width:100%;min-height:44px;border:1px solid #ffffff30;background:#191b20;color:#eceef2;border-radius:2px;padding:10px;font-size:12px} .salon-alan input{width:100%;min-height:30px;accent-color:#e6e7ea;touch-action:pan-x} .salon-alan output{font-variant-numeric:tabular-nums;color:#a2a7af} .salon-secim{display:flex;gap:12px;align-items:flex-start;font-size:13px;cursor:pointer;padding:5px 0} .salon-secim input{width:20px;height:20px;margin:0;accent-color:#e6e7ea} .salon-secim small{display:block;font-size:11px;line-height:1.5;color:#a2a7af;margin-top:7px} .salon-baslangic{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:48px;background:#eceef2;color:#111215;border:0;font-size:12px;padding:12px 16px;cursor:pointer} .salon-tani{border-top:1px solid #ffffff20;margin-top:28px;padding-top:20px;color:#a2a7af;font-size:11px;line-height:1.7} .salon-tani summary{cursor:pointer;min-height:30px} .salon-tani output{display:block;font-variant-numeric:tabular-nums;white-space:pre-line} body.ep-acik #joystick-container,body.ep-acik .salon-rota,body.ep-acik .salon-ayar-dugme,body.ep-acik .pano-cikis,body.ep-acik #crosshair,body.salon-panel-acik #joystick-container,body.salon-panel-acik .salon-rota,body.salon-panel-acik .giris-levha,body.salon-panel-acik .fare-ipucu,body.salon-panel-acik .eser-2d{display:none!important} #imagePopup{z-index:4000;overflow:auto;touch-action:pan-y;padding:calc(var(--salon-ust) + 56px) var(--salon-sag) calc(var(--salon-alt) + 16px) var(--salon-sol);background:rgba(10,11,13,.96);backdrop-filter:none;-webkit-backdrop-filter:none} #closeButton{top:var(--salon-ust);right:var(--salon-sag);width:44px;height:44px;border-radius:3px} .ep-panel{margin:auto;max-height:none} .ep-kunye{align-self:center} .ep-ad{font-size:clamp(28px,3.5vw,48px);overflow-wrap:anywhere} .ep-aciklama{white-space:pre-line;user-select:text} .ep-sira{font-size:10px;letter-spacing:.2em;color:#a2a7af} .ep-durum{font-size:11px;line-height:1.6;color:#a2a7af;margin:0} .ep-durum:empty{display:none} .ep-gezinme{display:flex;gap:12px;align-items:center;border-top:1px solid #ffffff25;margin-top:12px;padding-top:12px;color:#d2d5d9} .ep-gezinme>span{font-size:10px;letter-spacing:.08em} .tablogorseli{max-height:min(68dvh,720px)} body.onizleme .salon-kimlik,body.onizleme .salon-rota,body.onizleme .salon-ayar-dugme{display:none!important} @media(max-width:1050px){.salon-kimlik{display:none}} @media(max-width:700px){ :root{--salon-sol:max(14px,env(safe-area-inset-left));--salon-sag:max(14px,env(safe-area-inset-right));--salon-ust:max(14px,env(safe-area-inset-top));--salon-alt:max(18px,env(safe-area-inset-bottom))} .pano-cikis{padding:0 11px;font-size:10px;letter-spacing:.025em} .pano-katalog{top:var(--salon-ust);left:calc(var(--salon-sol) + 115px)} .salon-ayar-dugme{top:calc(var(--salon-ust) + 54px);right:var(--salon-sag);padding:0 12px} .salon-rota{left:auto;right:var(--salon-sag);bottom:var(--salon-alt);transform:none;gap:0;max-width:calc(100% - 156px);padding:2px} .salon-rota>div{min-width:0;width:100px} #salonKonumAd{display:none} #salonKonum{font-size:8px;letter-spacing:.1em} .salon-rota button{width:40px} .giris-levha{bottom:calc(var(--salon-alt) + 150px);padding:18px 22px} .tablogorseli{max-height:49dvh} .ep-panel{gap:26px} } @media(max-height:520px) and (min-width:560px){ .salon-ayar-dugme{top:var(--salon-ust);right:calc(var(--salon-sag) + 54px)} .salon-rota{left:auto;right:var(--salon-sag);transform:none} .salon-rota>div{width:130px;min-width:0} #salonKonumAd{display:none} .giris-levha{bottom:var(--salon-alt);max-width:280px} .gl-baslik{display:none} .tablogorseli{max-height:65dvh} .ep-panel{grid-template-columns:minmax(0,1fr) minmax(180px,34%);gap:24px} .ep-kunye{align-items:flex-start;text-align:left} .ep-ad{font-size:26px} } @media(prefers-reduced-motion:reduce){#salonAyar[open],#loadingScreen .yukleme-mark{animation:none}#panoCanvas{transition:none}}