/* style.css - AVM Teması */
:root {
    --primary-color: #dc3545; /* Kırmızı */
    --dark-color: #212529;    /* Koyu Gri */
    --light-bg: #f8f9fa;      /* Açık Gri */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--light-bg);
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Navbar büyüdüğü için içerik yukarı kaymasın diye boşluğu artırdık */
    /* Eskiden 70px idi, şimdi 110px yaptık */
}

/* --- NAVBAR (MENÜ) AYARLARI --- */
.navbar {
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* Gölgeyi biraz artırdık */
    padding: 15px 0; /* Menü çubuğunun iç boşluğu */
    height: 100px; /* Menü çubuğunun toplam yüksekliğini sabitledik */
}

/* LOGO AYARI */
.navbar-brand img {
    height: 75px; /* LOGO YÜKSEKLİĞİ: Burayı artırdık (Eskiden 45px idi) */
    width: auto;  /* Genişlik orantılı kalsın */
    object-fit: contain;
    transition: transform 0.3s;
}

/* Logo üzerine gelince çok hafif büyüsün */
.navbar-brand img:hover {
    transform: scale(1.05);
}

.nav-link {
    font-weight: 600; /* Yazıları biraz daha kalın yaptık */
    font-size: 1.1rem; /* Menü yazılarını bir tık büyüttük */
    margin: 0 12px;
    color: #444 !important;
    transition: 0.3s;
}
.nav-link:hover, .nav-link.active {
    color: var(--primary-color) !important;
}

/* --- FOOTER & SOSYAL MEDYA --- */
footer a { text-decoration: none; transition: 0.3s; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: #888; }
.footer-links a:hover { color: #fff; padding-left: 5px; }

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.3s ease;
}
.social-icons a:hover {
    background: var(--primary-color);
    transform: translateY(-3px);
    color: white !important;
}

/* --- HARİTA VE PİN SİSTEMİ --- */
.map-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background: #fff;
}
.map-image { width: 100%; display: block; }

.store-pin {
    position: absolute;
    width: 32px; height: 32px;
    background-color: var(--primary-color);
    border: 3px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 14px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.store-pin:hover {
    transform: translate(-50%, -50%) scale(1.3);
    z-index: 100;
    background-color: #b02a37;
}

/* BALONCUK (TOOLTIP) */
.store-tooltip {
    visibility: hidden;
    opacity: 0;
    width: 180px;
    background-color: white;
    color: #333;
    text-align: center;
    border-radius: 8px;
    padding: 12px;
    position: absolute;
    bottom: 45px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    z-index: 100;
    pointer-events: none;
}
.store-tooltip::after {
    content: "";
    position: absolute;
    top: 100%; left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}
.store-pin:hover .store-tooltip {
    visibility: visible;
    opacity: 1;
    bottom: 55px;
}

/* --- KAT PLANI SAYFASI ÖZEL STİLLERİ --- */
.store-sidebar { background:#fff; height:600px; display:flex; flex-direction:column; border:1px solid #eee; border-radius: 8px; overflow: hidden; }
.store-search-box{padding:15px; border-bottom:1px solid #eee; background: #fcfcfc;}
.store-list-container{flex:1; overflow-y:auto;}
.store-list-item{padding:12px; display:flex; align-items:center; cursor:pointer; border-bottom:1px solid #f9f9f9; transition: background 0.2s;}
.store-list-item:hover{background:#f1f1f1;}
.store-list-item.active{background:#ffeae6; border-left:4px solid #dc3545;}
.store-list-item img{width:45px;height:45px;object-fit:contain;border:1px solid #eee;border-radius:50%;margin-right:12px; background: #fff;}
.map-wrapper{height:600px; position:relative; overflow:hidden; background:#fdfdfd; border:1px solid #eee;}
.map-image{width:100%; height:100%; object-fit:contain;}

/* Genel Gölge Efekti */
.text-shadow { text-shadow: 2px 2px 10px rgba(0,0,0,0.7); }
.hover-up { transition: transform 0.3s; }
.hover-up:hover { transform: translateY(-10px); }

/* --- AKILLI BALONCUK YÖNÜ --- */

/* Eğer pin tepedeyse baloncuk aşağı açılsın */
.store-pin.top-pin .store-tooltip {
    bottom: auto;  /* Alt hizalamayı iptal et */
    top: 55px;     /* Pin'in altına it */
}

/* Baloncuğun ok yönünü yukarı çevir */
.store-pin.top-pin .store-tooltip::after {
    top: auto;
    bottom: 100%; /* Ok kutunun tepesine gelsin */
    border-color: transparent transparent white transparent; /* Okun yönünü yukarı çevir */
}
/* --- MOBİL MENÜ DÜZELTMESİ --- */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: #ffffff; /* Arkaplanı Beyaz Yap */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Gölge ekle */
        border-top: 1px solid #eee;
        z-index: 1000;
    }
    .navbar-nav .nav-link {
        color: #333 !important; /* Yazı rengi koyu olsun */
        padding: 10px 0;
        border-bottom: 1px solid #f9f9f9;
    }
    /* Butonların arasına boşluk koy */
    .nav-item .btn {
        width: 100%;
        margin-top: 10px;
        text-align: center;
    }
}

/* --- MOBİL HARİTA DÜZELTMESİ (KRİTİK) --- */
/* Mobilde harita resmini sıkıştırma, taşmasına izin ver */
@media (max-width: 768px) {
    .map-wrapper {
        overflow-x: auto; /* Yatay kaydırmaya izin ver */
        -webkit-overflow-scrolling: touch; /* Mobilde akıcı kaydırma */
        cursor: grab;
    }
    
    .map-image {
        /* Resmi ekran genişliğine sıkıştırma! */
        /* En az 800px genişlik ver ki pinler yerinde dursun */
        min-width: 800px;
        width: auto !important;
        max-width: none !important;
    }
    
    /* Kullanıcıya kaydırabileceğini gösteren ipucu */
    .map-wrapper::after {
        content: '↔️ Haritada gezinmek için kaydırın';
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.7);
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 12px;
        pointer-events: none;
        opacity: 0.8;
    }
}
/* MAĞAZALAR BUTONU STİLİ (Modern Mor Geçişli) */
.btn-stores {
    background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%); /* Mor-Mavi Gradyan */
    color: white !important;
    border: none;
    box-shadow: 0 4px 15px rgba(37, 117, 252, 0.3); /* Hafif gölge */
    transition: all 0.3s ease;
}

.btn-stores:hover {
    background: linear-gradient(45deg, #2575fc 0%, #6a11cb 100%); /* Hoverda renk yer değiştirsin */
    transform: translateY(-2px); /* Hafif yukarı kalksın */
    box-shadow: 0 6px 20px rgba(37, 117, 252, 0.5);
    color: white !important;
}

/* SİNEMA BUTONU (Mevcut sarı stilin yanına eklemediysen bunu da ekle) */
.btn-cinema {
    background-color: #ffc107;
    color: #000 !important;
    border: none;
    transition: all 0.3s ease;
}
.btn-cinema:hover {
    background-color: #e0a800;
    transform: scale(1.05);
}