/* 360° Kayseri (site-360.js): tam ekran görüntüleyici, hikâye şeridi, #/360 sayfası, Mahallem kartının canlı 360° yüzü.
   Renkler uygulamada logo renklerine çevrilir (scripts/uygulama_renk.py); turuncu #FF6A00, lacivert #062B4A. */
.p360-rozet{display:inline-grid;place-items:center;height:22px;padding:0 7px;border-radius:7px;background:linear-gradient(135deg,#FF8A00,#FF3D00);
  color:#fff;font:800 11.5px/1 var(--f-body,system-ui);letter-spacing:.02em;box-shadow:0 2px 8px rgb(255 80 0 / .35)}

/* ---------- tam ekran ---------- */
.p360{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#05080C;color:#fff;overflow:hidden}
.p360::backdrop{background:#000}
html.p360-acik{overflow:hidden}
.p360-g{position:absolute;inset:0}
.p360-g .pnlm-load-box,.p360-g .pnlm-about-msg{display:none!important}
.p360-perde{position:absolute;inset:0;display:grid;place-items:center;background:#05080C;opacity:0;pointer-events:none;transition:opacity .35s}
.p360.yukleniyor .p360-perde{opacity:1}
.p360-perde .gz-donen{width:34px;height:34px;border-color:rgb(255 255 255 / .2);border-top-color:#FF6A00}
.p360-ust{position:absolute;z-index:3;left:0;right:0;top:0;display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 30px;background:linear-gradient(180deg,rgb(0 0 0 / .62),transparent)}
.p360-d{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:rgb(255 255 255 / .16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff}
.p360-d .ic{width:21px;height:21px}
.p360-d.on{background:#FF6A00}
.p360-bilgi{flex:1;min-width:0;display:grid;gap:1px}
.p360-bilgi small{font-size:12.5px;opacity:.82;font-weight:600}
.p360-bilgi b{font-size:17px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 8px rgb(0 0 0 / .4)}
.p360-ok{position:absolute;z-index:3;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:rgb(255 255 255 / .14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff}
.p360-ok.sol{left:10px}.p360-ok.sag{right:10px}
.p360-ok .ic{width:20px;height:20px}
.p360-ok[hidden]{display:none}
.p360-ipucu{position:absolute;z-index:3;left:50%;bottom:150px;transform:translateX(-50%);margin:0;display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;background:rgb(0 0 0 / .5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:13.5px;font-weight:600;white-space:nowrap;pointer-events:none;transition:opacity .4s;animation:p360-nabiz 2.4s ease-in-out 3}
.p360-ipucu .ic{width:16px;height:16px;color:#FF8A3D}
.p360-ipucu.gizle{opacity:0}
.p360-alt{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:34px 0 calc(env(safe-area-inset-bottom,0px) + 10px);background:linear-gradient(0deg,rgb(0 0 0 / .7),transparent)}
.p360-serit{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 14px;scroll-snap-type:x proximity}
.p360-serit::-webkit-scrollbar{display:none}
.p360-serit[hidden]{display:none}
.p360-k{flex:0 0 84px;display:grid;gap:5px;padding:0;border:0;background:none;color:#fff;cursor:pointer;scroll-snap-align:center;text-align:left}
.p360-k img{width:84px;height:84px;border-radius:16px;object-fit:cover;border:2.5px solid transparent;transition:border-color .2s,transform .2s;opacity:.85}
.p360-k.on img{border-color:#FF6A00;opacity:1;transform:scale(1.04)}
.p360-k span{font-size:11.5px;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;opacity:.9}
.p360-kredi{margin:8px 14px 0;font-size:11px;opacity:.65}

/* ---------- hikâye şeridi ---------- */
.p360-hikaye{margin:26px 0 4px}
.p360-hikaye-bas h2{display:flex;align-items:center;gap:9px;margin:0;font:700 21px/1.2 var(--ua-f,var(--f-body,system-ui));letter-spacing:-.01em;color:var(--ink,#15181A)}
.p360-hikaye-bas p{margin:4px 0 0;font-size:13.5px;color:var(--muted,#6E7377)}
.p360-hikaye-l{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;margin:14px -16px 0;padding:4px 16px 6px;scroll-snap-type:x proximity}
.p360-hikaye-l::-webkit-scrollbar{display:none}
.p360-h{flex:0 0 86px;display:grid;justify-items:center;gap:6px;padding:0;border:0;background:none;cursor:pointer;scroll-snap-align:start;color:var(--ink,#15181A)}
.p360-h-hal{position:relative;width:80px;height:80px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,#FF6A00,#FF3D00,#062B4A,#FF6A00);
  animation:p360-don 8s linear infinite}
.p360-h-hal img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #fff;display:block;animation:p360-don 8s linear infinite reverse}
.p360-h b{font-size:12px;font-weight:650;line-height:1.25;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p360-h small{margin-top:-4px;font-size:11px;color:var(--muted,#6E7377)}
.p360-h:active .p360-h-hal{transform:scale(.94)}

/* yer penceresinde fotoğrafın üstünde */
.yer-dlg-f{position:relative}
.p360-gez{position:absolute;z-index:3;right:12px;top:12px;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px 0 8px;border-radius:999px;border:0;
  background:rgb(255 255 255 / .95);color:#062B4A;font:700 14px/1 var(--f-body,system-ui);cursor:pointer;box-shadow:0 4px 16px rgb(0 0 0 / .2)}
.yer-dlg-360 .p360-hikaye{margin-top:18px}

/* ---------- Gezilecek yerler bandı ---------- */
.p360-bant{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:12px 16px 12px 12px;border-radius:22px;text-decoration:none;color:#fff;
  background:linear-gradient(120deg,#062B4A,#0B3F69 60%,#FF6A00 160%);box-shadow:0 10px 30px rgb(6 43 74 / .25)}
.p360-bant-f{flex:none;display:flex}
.p360-bant-f img{width:54px;height:54px;border-radius:50%;object-fit:cover;border:3px solid #0B3F69;margin-left:-14px}
.p360-bant-f img:first-child{margin-left:0}
.p360-bant-y{flex:1;min-width:0;display:grid;gap:3px;justify-items:start}
.p360-bant-y b{font-size:18px;font-weight:750}
.p360-bant-y small{font-size:13px;opacity:.85}
.p360-bant>.ic{flex:none;width:20px;height:20px}

/* ---------- #/360 sayfası ---------- */
.p360-sayfa-bas{padding:34px 0 8px;background:linear-gradient(180deg,#F4F6F9,transparent)}
.p360-sayfa-bas h1{margin:2px 0 6px;font-size:30px}
.p360-sayfa-bas p{margin:0;color:var(--muted,#6E7377);max-width:620px}
.p360-sayfa{padding-bottom:40px}
.p360-cipler{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:16px -16px 0;padding:2px 16px}
.p360-cipler::-webkit-scrollbar{display:none}
.p360-cipler.ikinci{margin-top:10px}
.p360-cip{flex:none;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 15px;border-radius:999px;border:1px solid var(--line,#E7E7E7);background:var(--surface,#fff);
  color:var(--ink,#15181A);font:600 14.5px/1 var(--f-body,system-ui);cursor:pointer}
.p360-cip em{font-style:normal;font-size:12px;font-weight:700;padding:2px 7px;border-radius:999px;background:#F1F3F5;color:#5B6B7A}
.p360-cip.on{background:#062B4A;border-color:#062B4A;color:#fff}
.p360-cip.on em{background:rgb(255 255 255 / .2);color:#fff}
.p360-cipler.ikinci .p360-cip{height:36px;font-size:13.5px}
.p360-cipler.ikinci .p360-cip.on{background:#FF6A00;border-color:#FF6A00}
.p360-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:18px}
.p360-kart{display:grid;gap:8px;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink,#15181A)}
.p360-kart-f{position:relative;display:block;aspect-ratio:1;border-radius:20px;overflow:hidden;background:#E9ECEF}
.p360-kart-f img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.p360-kart:hover .p360-kart-f img{transform:scale(1.06)}
.p360-kart-f .p360-rozet{position:absolute;left:10px;top:10px}
.p360-kart-y{display:grid;gap:3px}
.p360-kart-y small{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted,#6E7377)}
.p360-kart-y small .ic{width:13px;height:13px;color:#FF6A00}
.p360-kart-y b{font-size:14.5px;font-weight:650;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p360-son{margin-top:22px}

/* ---------- Mahallem kartı: canlı 360° yüzü ve yüz seçici ---------- */
.mh3-pano{position:absolute;inset:0;z-index:1;transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.mh3-pano-on{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mh3-pano-g{position:absolute;inset:0;opacity:0;transition:opacity .8s}
.mh3-pano-g.hazir{opacity:1}
.mh3-pano-g .pnlm-load-box,.mh3-pano-g .pnlm-about-msg,.mh3-pano-g .pnlm-controls-container{display:none!important}
.mh3-pano::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgb(0 0 0 / .28) 0%,transparent 28%,transparent 48%,rgb(0 0 0 / .66) 100%)}
.mh3-pano-dug{position:absolute;inset:0;z-index:2;border:0;background:none;cursor:pointer}
.mh3-kart:not([data-yuz="pano"]) .mh3-pano{opacity:0;transform:scale(1.06);pointer-events:none}
.mh3-kart[data-yuz="pano"] .mh3-foto{opacity:0;pointer-events:none}
.mh3-kart:not([data-yuz="harita"]) .mh3-ad{opacity:1}
.mh3-kart[data-yuz="harita"] .mh3-ad,.mh3-kart:not([data-yuz="pano"]) .mh3-pano-ipucu{opacity:0;pointer-events:none}
.mh3-pano-ipucu{position:absolute;z-index:3;right:14px;bottom:18px;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;
  background:rgb(255 255 255 / .92);color:#062B4A;font:700 12.5px/1 var(--ua-f,system-ui);pointer-events:none;transition:opacity .3s;animation:p360-nabiz 2.6s ease-in-out infinite}
.mh3-pano-ipucu .ic{width:15px;height:15px;color:#FF6A00}
.mh3-yuzler{display:inline-flex;gap:3px;padding:3px;border-radius:999px;background:rgb(255 255 255 / .9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 2px 10px rgb(0 0 0 / .12)}
.mh3-yuzler button{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;border-radius:999px;border:0;background:none;color:#15181A;
  font:650 12.5px/1 var(--ua-f,system-ui);cursor:pointer}
.mh3-yuzler button .ic{width:15px;height:15px;color:#FF6A00}
.mh3-yuzler button[aria-pressed="true"]{background:#062B4A;color:#fff}
.mh3-yuzler button[aria-pressed="true"] .ic{color:#fff}
.mh3-ad{z-index:3}

@keyframes p360-don{to{transform:rotate(360deg)}}
@keyframes p360-nabiz{0%,100%{transform:translateX(var(--tx,0)) scale(1)}50%{transform:translateX(var(--tx,0)) scale(1.05)}}
.p360-ipucu{--tx:-50%}
@media (prefers-reduced-motion:reduce){.p360-h-hal,.p360-h-hal img,.p360-ipucu,.mh3-pano-ipucu{animation:none}}
/* kartta yer darsa: ilçe etiketi gizlenir, seçili olmayan yüzler yalnız simge */
.mh3-ust-bant:has(.mh3-yuzler) .mh3-etk{display:none}
.mh3-ust-bant:has(.mh3-yuzler){justify-content:flex-end}
@media (max-width:420px){.mh3-yuzler button[aria-pressed="false"] span{display:none}.mh3-yuzler button[aria-pressed="false"]{padding:0 9px}}