/* ============================================================
   Mustafapaşa 360° Sanal Tur — Tema
   ============================================================ */
:root{
    --bg-deep:#0a0d16;
    --panel:rgba(18,20,28,.58);
    --panel-strong:rgba(14,16,24,.82);
    --border:rgba(255,255,255,.14);
    --text:#f4efe6;
    --text-muted:#b9b3a8;
    --accent:#e8814a;
    --accent-2:#e9c46a;
    --accent-soft:rgba(232,129,74,.35);
    --radius:16px;
    --serif:'Cormorant Garamond', serif;
    --sans:'Manrope', sans-serif;
}

*{box-sizing:border-box;}
html,body{
    margin:0; padding:0; width:100%; height:100%;
    background:var(--bg-deep);
    color:var(--text);
    font-family:var(--sans);
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; cursor:pointer;}

/* ---------------- Splash / Yükleme ---------------- */
#splash{
    position:fixed; inset:0; z-index:100;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:
        radial-gradient(circle at 50% 20%, rgba(232,129,74,.25), transparent 55%),
        radial-gradient(circle at 20% 90%, rgba(233,196,106,.12), transparent 50%),
        linear-gradient(180deg,#0a0d16 0%, #12121f 60%, #1a1424 100%);
    transition:opacity .6s ease, visibility .6s ease;
}
#splash.hide{opacity:0; visibility:hidden; pointer-events:none;}
.splash-balloon{animation:float 3.2s ease-in-out infinite; margin-bottom:6px; filter:drop-shadow(0 10px 18px rgba(232,129,74,.35));}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
#splash h1{
    font-family:var(--serif); font-weight:700; letter-spacing:.06em;
    font-size:clamp(28px,5vw,46px); margin:4px 0 6px; text-align:center;
}
#splash h1 span{color:var(--accent);}
.splash-sub{color:var(--text-muted); font-size:14px; letter-spacing:.03em; margin:0 0 26px;}
.splash-bar{width:220px; height:3px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden;}
.splash-bar span{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); animation:load 1.6s ease-in-out infinite;}
@keyframes load{0%{width:0%; margin-left:0%}50%{width:60%}100%{width:0%; margin-left:100%}}

/* ---------------- Geçiş perdesi ---------------- */
#transitionVeil{
    position:fixed; inset:0; z-index:60; background:#0a0d16;
    opacity:0; pointer-events:none; transition:opacity .45s ease;
}
#transitionVeil.show{opacity:1; pointer-events:all;}

#app{position:fixed; inset:0; opacity:1; transition:opacity .6s ease;}
#app.is-hidden{opacity:0;}

#panorama{position:absolute; inset:0;}

/* ---------------- Üst bar ---------------- */
.topbar{
    position:fixed; top:0; left:0; right:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 22px;
    background:linear-gradient(180deg, rgba(6,7,12,.75), transparent);
    pointer-events:none;
}
.topbar > *{pointer-events:all;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{
    width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--accent),#c0472a); color:#fff; font-family:var(--serif);
    font-weight:700; font-size:19px; box-shadow:0 4px 14px rgba(232,129,74,.4);
}
.brand-text{display:flex; flex-direction:column; line-height:1.2;}
.brand-text strong{font-size:14.5px; letter-spacing:.02em;}
.brand-text small{font-size:11.5px; color:var(--text-muted); letter-spacing:.05em; text-transform:uppercase;}

.topbar-actions{display:flex; gap:8px;}
.icon-btn{
    width:40px; height:40px; border-radius:50%;
    background:var(--panel); border:1px solid var(--border);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    color:var(--text); display:flex; align-items:center; justify-content:center;
    transition:background .25s, transform .2s, border-color .25s;
}
.icon-btn:hover{background:var(--panel-strong); transform:translateY(-2px); border-color:var(--accent-soft);}
.icon-btn.active{background:var(--accent); border-color:var(--accent); color:#1a0f08;}
#compassNeedle{transition:transform .3s ease;}

/* ---------------- Sahne bilgi kartı ---------------- */
.scene-card{
    position:fixed; left:24px; bottom:28px; z-index:35;
    max-width:340px; padding:20px 22px;
    background:var(--panel); border:1px solid var(--border);
    border-radius:var(--radius);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 12px 34px rgba(0,0,0,.35);
    animation:cardIn .5s ease;
}
@keyframes cardIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:translateY(0)}}
.scene-index{
    display:inline-block; font-size:11px; letter-spacing:.08em; color:var(--accent-2);
    border:1px solid var(--border); padding:3px 9px; border-radius:20px; margin-bottom:10px;
}
.scene-index em{font-style:normal; color:var(--text);}
.scene-card h2{
    font-family:var(--serif); font-weight:700; font-size:26px; margin:0 0 4px; letter-spacing:.01em;
}
#sceneSubtitle{margin:0 0 8px; color:var(--accent); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; font-weight:600;}
.scene-desc{margin:0; font-size:13.5px; line-height:1.55; color:var(--text-muted);}

/* ---------------- Soldan kayan menü (Harita + Tüm Mekanlar) ---------------- */
.drawer-overlay{
    position:fixed; inset:0; z-index:44; background:rgba(6,7,12,.55); backdrop-filter:blur(3px);
    opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
}
.drawer-overlay.show{opacity:1; visibility:visible;}

.side-drawer{
    position:fixed; top:0; bottom:0; left:0; z-index:45;
    width:min(400px, 88vw); max-width:400px;
    background:var(--panel-strong); border-right:1px solid var(--border);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    box-shadow:16px 0 40px rgba(0,0,0,.4);
    transform:translateX(-100%); transition:transform .4s cubic-bezier(.2,.8,.2,1);
    display:flex; flex-direction:column;
}
.side-drawer.open{transform:translateX(0);}

.drawer-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:16px 14px 12px; border-bottom:1px solid var(--border); flex:0 0 auto;
}
.drawer-tabs{display:flex; gap:6px; background:rgba(255,255,255,.04); padding:4px; border-radius:11px;}
.drawer-tab{
    border:none; background:transparent; color:var(--text-muted); font-weight:600; font-size:12.5px;
    padding:8px 14px; border-radius:8px; transition:background .2s, color .2s; letter-spacing:.02em;
}
.drawer-tab.active{background:var(--accent); color:#1a0f08;}

.drawer-panel{display:none; flex:1 1 auto; overflow:auto; padding:16px;}
.drawer-panel.active{display:block;}

/* Harita sekmesi */
.map-wrap{position:relative; width:100%; border-radius:14px; overflow:hidden; border:1px solid var(--border);}
.map-wrap img{width:100%; display:block;}
.map-pin{
    position:absolute; transform:translate(-50%,-100%); background:none; border:none; padding:0;
    display:flex; flex-direction:column; align-items:center; cursor:pointer; z-index:1;
}
.map-pin-dot{
    width:16px; height:16px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
    background:linear-gradient(135deg,var(--accent),#c0472a); border:2px solid #fff8ee;
    box-shadow:0 3px 8px rgba(0,0,0,.45); transition:transform .2s;
}
.map-pin:hover .map-pin-dot, .map-pin.active .map-pin-dot{transform:rotate(-45deg) scale(1.25);}
.map-pin.active .map-pin-dot{background:linear-gradient(135deg,var(--accent-2),var(--accent));}
.map-pin-label{
    margin-top:4px; font-size:10px; font-weight:700; white-space:nowrap;
    background:var(--panel-strong); border:1px solid var(--border); color:var(--text);
    padding:3px 7px; border-radius:6px; opacity:0; transform:translateY(-4px); pointer-events:none;
    transition:opacity .2s, transform .2s;
}
.map-pin:hover .map-pin-label, .map-pin.active .map-pin-label{opacity:1; transform:translateY(0);}

/* Tüm Mekanlar sekmesi (dikey liste -> taşma sorunu yok) */
.drawer-list{display:flex; flex-direction:column; gap:8px;}
.drawer-list-item{
    display:flex; align-items:center; gap:12px; text-align:left;
    background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px;
    padding:8px; transition:border-color .2s, background .2s, transform .2s;
}
.drawer-list-item:hover{border-color:var(--accent-soft); transform:translateX(3px);}
.drawer-list-item.active{border-color:var(--accent); background:rgba(232,129,74,.1);}
.drawer-list-item img{width:64px; height:48px; object-fit:cover; border-radius:8px; flex:0 0 auto;}
.drawer-list-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.drawer-list-text strong{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.drawer-list-text span{font-size:11px; color:var(--text-muted);}

/* ---------------- Pannellum özelleştirme ---------------- */
.pnlm-container{background:var(--bg-deep);}
.pnlm-load-box{display:none !important;}
.pnlm-compass{display:none !important;} /* kendi pusulamızı kullanıyoruz */
.pnlm-about-msg{display:none !important;}

.mp-hotspot{
    width:38px !important; height:38px !important; margin:-19px 0 0 -19px !important;
    background:rgba(20,16,12,.55); border:1.5px solid rgba(255,255,255,.65); border-radius:50%;
    backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 0 rgba(232,129,74,.55);
    animation:pulseRing 2.2s ease-out infinite;
}
.mp-hotspot::before{
    content:''; width:9px; height:9px; border-radius:50%;
    background:var(--accent); box-shadow:0 0 8px 2px var(--accent);
}
@keyframes pulseRing{
    0%{box-shadow:0 0 0 0 rgba(232,129,74,.55)}
    70%{box-shadow:0 0 0 14px rgba(232,129,74,0)}
    100%{box-shadow:0 0 0 0 rgba(232,129,74,0)}
}
.pnlm-tooltip .pnlm-sprite{display:none;}
.pnlm-tooltip:hover .pnlm-tooltip-arrow ~ span, .pnlm-hotspot-base .pnlm-tooltip{
    background:var(--panel-strong) !important; border:1px solid var(--border) !important;
    color:var(--text) !important; font-family:var(--sans) !important; font-size:12px !important;
    padding:6px 10px !important; border-radius:8px !important; box-shadow:0 6px 18px rgba(0,0,0,.4);
}

/* ---------------- Responsive ---------------- */
@media (max-width:720px){
    .scene-card{left:14px; right:14px; bottom:18px; max-width:none; padding:16px 18px;}
    .scene-card h2{font-size:21px;}
    .topbar{padding:12px 14px;}
    .brand-text small{display:none;}
    .side-drawer{width:100vw; max-width:100vw;}
}