/* ============================================================
    🌐 GENEL SIFIRLAMA & TEMEL
   ============================================================ */
* {
    -webkit-tap-highlight-color: transparent !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    font-family: 'Roboto', sans-serif;
}

#bg-video {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    object-fit: cover;
    z-index: 1;
}

/* ============================================================
    ⏳ YÜKLEME EKRANI
   ============================================================ */
#loader-wrapper {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: #050505;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    z-index: 9999;
}

.container-outline {
    width: 110px; height: 110px;
    border: 2px solid rgba(160, 32, 240, 0.4);
    position: relative; border-radius: 15px;
    overflow: hidden; background: #000;
}

#fill-level {
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 0%; 
    background: linear-gradient(to top, #4b0082, #ff00ff);
    z-index: 1; transition: height 0.4s ease;
}

.loader-logo {
    width: 45px !important; height: 45px !important;
    position: absolute !important; top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important; object-fit: contain;
}

/* ============================================================
    💻 MASAÜSTÜ DÜZENİ (Default)
   ============================================================ */
#threejs-container {
    position: fixed;
    top: -350px; /* Kutunun dikey yerini buradan ayarla */
    left: 0; width: 100vw; height: 100vh;
    z-index: 5; 
    pointer-events: auto !important;
}

.overlay-ui {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 20; /* Threejs'in (5) üstünde olmalı */
    pointer-events: none;
}

.hotspot {
    position: absolute;
    cursor: pointer;
    pointer-events: auto;
    z-index: 30;
    /* 🛠️ TEST MODU: Butonları görmek için alttaki satırı aktif tut. 
       Yerleri tamamsa 0.3'ü 0.0 yaparsın. */
    background: rgba(0, 255, 0, 0.0); 
    
}

/* Masaüstü Monitör Koordinatları (Genişlikleri küçülttüm ki 'saçma yerler' tetiklenmesin) */
#hotspot-videolar { top: 30%; left: 10%; width: 12%; height: 14%; }
#hotspot-blog     { top: 30%; right: 7%; width: 15%; height: 14%; }
#hotspot-magaza   { top: 55%; left: 8%; width: 15%; height: 14%; }
#hotspot-hakkinda { top: 54%; right: 7%; width: 15%; height: 14%; }

/* ============================================================
    📱 MOBİL DÜZENİ (Her Buton İçin Özel Milimetrik Ayar)
   ============================================================ */
@media (max-width: 768px) {
    #threejs-container {
        top: -300px !important;
        transform: scale(0.9);
        pointer-events: auto !important;
    }

    /* Genel mobil sıfırlama (Bağımsızlık için transform'u siliyoruz) */
    .hotspot {
        transform: none !important; 
        background: rgba(255, 0, 255, 0.0) !important; /* Pembe Test Rengi */
        
    }

    /* 📺 1. VİDEOLAR (En Üstteki Monitör) */
    #hotspot-videolar { 
        top: 43% !important; 
        left: 1% !important;   /* Sağa-Sola çekmek için (Sayı küçülürse Sola gider) */
        width: 17% !important;  /* Genişlik */
        height: 5% !important; /* Yükseklik */
    }

    /* 📺 2. BLOG (İkinci Monitör) */
    #hotspot-blog { 
        top: 43% !important; 
        left: 83% !important; 
        width: 18% !important; 
        height: 5% !important; 
    }

    /* 📺 3. MAĞAZA (Üçüncü Monitör) */
    #hotspot-magaza { 
        top: 51% !important; 
        left: 1% !important; 
        width: 18% !important; 
        height: 5% !important; 
    }

    /* 📺 4. HAKKINDA (En Alttaki Monitör) */
    #hotspot-hakkinda { 
        top: 51% !important; 
        left: 83% !important; 
        width: 18% !important; 
        height: 5% !important; 
    }

   .spotify-container {
        /* 1. KUTUNUN GENİŞLİĞİ: Buradaki % değerini veya px değerini değiştir */
        width: 250px !important; 
        
        /* 2. KONUMU: Sağdan ne kadar içeride olsun? */
        right: 70px !important; 
        
        /* 3. YÜKSEKLİK: Mobilde çok yer kaplamasın istersen küçült */
        height: 165px !important; 
        
        bottom: 100px !important; /* Senin belirlediğin yükseklik */
        z-index: 10000 !important;
        pointer-events: auto !important;
        overflow: hidden; /* Taşmaları önler */
    }

    .spotify-container iframe {
        /* İçerideki player'ın kutuya tam oturması için */
        width: 100% !important;
        height: 100% !important;
    }
}

/* 🎵 DİĞER ÖĞELER (Bunlar sabit kalabilir) */
.spotify-container { position: fixed; bottom: 0.9px; right: 1px; width: 300px; z-index: 999; }
#mouse-glow {
    position: fixed; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(160, 32, 240, 0.2) 0%, transparent 70%);
    pointer-events: none; z-index: 2; transform: translate(-50%, -50%);
}