:root {
    --normal-yazi: 1vh;    
    --kucuk-yazi: 0.7vh;   
    --buyuk-yazi: 3vh;   
}
/* --- E52 Özel (4 stant) Etiketi --- */
.esnaf-52 .normal-durum {
    flex-direction: column; /* Yazıları alt alta dizer */
}

.esnaf-52 .normal-durum::after {
    content: "(4 stant)";
    margin-top: 4px; /* E52 ile arasına boşluk bırakır */
    opacity: 0.8; /* Yazıyı hafif şeffaf yaparak şıklaştırır */
}
/* --- E20 Özel (4 stant) Etiketi --- */
.esnaf-20 .normal-durum {
    flex-direction: column; /* Yazıları alt alta dizer */
}

.esnaf-20 .normal-durum::after {
    content: "(4 stant)";
    margin-top: 4px; /* E52 ile arasına boşluk bırakır */
    opacity: 0.8; /* Yazıyı hafif şeffaf yaparak şıklaştırır */
}
/* --- E31 Özel (4 stant) Etiketi --- */
.esnaf-31 .normal-durum {
    flex-direction: column; /* Yazıları alt alta dizer */
}

.esnaf-31 .normal-durum::after {
    content: "(2 stant)";
    margin-top: 4px; /* E52 ile arasına boşluk bırakır */
    opacity: 0.8; /* Yazıyı hafif şeffaf yaparak şıklaştırır */
}
/* =========================================
   1. TEMEL SAYFA VE HARİTA YERLEŞİMİ
   ========================================= */
body {
    margin: 0;
    padding: 0;
    width: 100vw;
    min-height: 100vh; /* 'height' yerine 'min-height' yaptık ki sayfa aşağı uzayabilsin */
    background-color: #eecfa1; /* Arka plan rengin aynen duruyor */
    
    overflow-x: hidden; /* Sağa-sola kaymayı KESİN OLARAK kilitler */
    overflow-y: auto;   /* Fare ile aşağı-yukarı kaydırmayı (scroll) açar */
    
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Sayfa uzadığında üst tarafın kesilmemesi için center yerine flex-start yaptık */
}

.ana-sahne {
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
    zoom: 0.8; 
    margin-top: 180px; /* Üst bannerın ekranın üstüne çarpıp kesilmesini önler */
    margin-bottom: 900px; /* Aşağıya ekleyeceğimiz sponsor kutuları için görünmez bir boşluk açar */
}

/* HARİTA KODUN BUNA DOKUNMUYORUZ */
.harita-container {
    display: grid;
    grid-template-columns: repeat(80, 1fr); 
    grid-template-rows: repeat(42, 1fr); 
    gap: 2px;
    width: 1100px;
    height: 500px; 
    background-color: #e9ecef;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.harita-container {
    display: grid;
    grid-template-columns: repeat(80, 1fr); 
    grid-template-rows: repeat(42, 1fr); 
    gap: 2px;
    
    width: 1100px;
    height: 500px; 
    
    background-color: #e9ecef;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* =========================================
   2. KUTU TASARIMLARI (NORMAL VE HOVER)
   ========================================= */
.alan {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--normal-yazi);
    font-weight: bold;
    text-align: center;
    position: relative;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 2px; 
    z-index: 1; 
}

.alan:hover {
    z-index: 9999; 
}

.normal-durum {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.alan:hover .normal-durum { opacity: 0; }

.hover-durum {
    position: absolute;
    width: 8vw;  
    height: 8vw;
    background-color: inherit; 
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    
    font-size: 1.2vh; 
    word-break: break-word;
    line-height: 1.2;
    
    top: 50%; left: 50%;
    margin-top: -4vw; margin-left: -4vw;
}

.alan:hover .hover-durum {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

/* =========================================
   3. RENKLER VE ÖZEL TİPOGRAFİ
   ========================================= */
/* Koyu yazı rengi gerektiren açık renkli zeminler */
.sari, .kirmizi, .mavi, .turuncu { color: #333; }

.yesil { background-color: #4CAF50; }
.sari { background-color: #FFEB3B; }
.kirmizi { background-color: #ff0000; }
.mavi { background-color: #0091ff; }
.turuncu { background-color: #EF7F00; }
.koyu-mavi { background-color: #1976D2; }
.turkuaz { background-color: #00BCD4; }
.kahverengi { background-color: #A0522D; color: white; }
.acik_turuncu { background-color: #FFB347; }

.dik-yazi {
    transform: rotate(-90deg);
    display: inline-block;
    white-space: nowrap;
    letter-spacing: 5px;
    font-weight: bold;
}

.firma-logo { 
    max-width: 60%; 
    max-height: 60%; 
    margin-bottom: 2px;
}

/* Büyük alanların ortak yazı stili */
.cocuk-alani, .giris, .sahne, .wc-alani {
    font-size: 24px;
    letter-spacing: 2px;
}

/* Büyümemesi (sabit kalması) gereken alanların ortak hover iptali */
.cocuk-alani:hover, .bilet:hover, .giris:hover, .sahne:hover, .wc-alani:hover {
    transform: none !important;
    box-shadow: none !important;
    cursor: default;
    z-index: 1;
}

/* =========================================
   4. KENAR TAŞMALARI VE BÜYÜME YÖNLERİ
   ========================================= */
/* Üst kenardakiler: Aşağı büyüsün */
.koyu-mavi .hover-durum,
.yemek-1 .hover-durum, .yemek-2 .hover-durum, .yemek-3 .hover-durum, 
.yemek-4 .hover-durum, .yemek-5 .hover-durum, .yemek-6 .hover-durum, .yemek-7 .hover-durum {
    top: 0; left: 50%;
    margin-top: 0; margin-left: -4vw;
    transform-origin: top center;
}

/* Alt kenardakiler: Yukarı büyüsün */
.yemek-8 .hover-durum, .yemek-9 .hover-durum, .yemek-10 .hover-durum, .yemek-11 .hover-durum,
.yemek-12 .hover-durum, .yemek-13 .hover-durum, .yemek-14 .hover-durum, 
.yemek-15 .hover-durum, .yemek-16 .hover-durum, .yemek-17 .hover-durum {
    top: auto; bottom: 0; left: 50%;
    margin-top: 0; margin-bottom: 0; margin-left: -4vw;
    transform-origin: bottom center !important;
}

/* Sol kenardakiler: Sağa büyüsün */
.esnaf-1 .hover-durum, .esnaf-2 .hover-durum, .esnaf-3 .hover-durum, 
.esnaf-4 .hover-durum, .esnaf-5 .hover-durum, .esnaf-6 .hover-durum, 
.esnaf-7 .hover-durum, .esnaf-8 .hover-durum, .esnaf-9 .hover-durum, .esnaf-10 .hover-durum {
    top: 50%; left: 0;
    margin-top: -4vw; margin-left: 0;
    transform-origin: left center;
}

/* =========================================
   5. DİNAMİK GRID SPAN (BOYUT) ATAMALARI
   ========================================= */
/* Tüm alanlara varsayılan span değerlerini tek seferde atıyoruz */
[class*="yemek-"] { grid-column-end: span 3; grid-row-end: span 3; }
[class*="tarim-"] { grid-column-end: span 4; grid-row-end: span 3; grid-row-start: 1; }
[class*="esnaf-"] { grid-column-end: span 2; grid-row-end: span 2; }

/* İstisnai esnaf alanları (Farklı boyutu olanlar) */
.esnaf-31 { grid-column-end: span 2; grid-row-end: span 4; }
.esnaf-20, .esnaf-52 { grid-column-end: span 4; grid-row-end: span 4; }
.esnaf-41, .esnaf-51 { grid-column-end: span 3; }
.esnaf-151, .esnaf-152, .esnaf-153, .esnaf-154, .esnaf-155, .esnaf-156,
.esnaf-157, .esnaf-158, .esnaf-159, .esnaf-160, .esnaf-161, .esnaf-162 { grid-column-end: span 5; }
/* =========================================
   6. GRID KOORDİNATLARI (Sadece Başlangıç Noktaları)
   ========================================= */
/* Sabit Alanlar */
.cocuk-alani { grid-column: 1 / span 29; grid-row: 39 / span 4; }
.giris { grid-column: 1 / span 2; grid-row: 26 / span 13; }
.bilet { grid-column: 1 / span 2; grid-row: 22 / span 4; font-size: 10px; font-weight: bold; text-align: center; letter-spacing: -0.2px !important; }
.bilet span { letter-spacing: -0.2px !important; }
.sahne { grid-column: 78 / span 4; grid-row: 8 / span 30; }
.wc-alani { grid-column: 44 / span 7; grid-row: 1 / span 3; }

/* Tarım Alanları */
.tarim-1 { grid-column-start: 3; } .tarim-2 { grid-column-start: 7; } .tarim-3 { grid-column-start: 11; }
.tarim-4 { grid-column-start: 15; } .tarim-5 { grid-column-start: 19; } .tarim-6 { grid-column-start: 23; }
.tarim-7 { grid-column-start: 27; } .tarim-8 { grid-column-start: 31; } .tarim-9 { grid-column-start: 35; }
.tarim-10 { grid-column-start: 39; }

/* Yemek Alanları */
.yemek-1 { grid-column-start: 52; grid-row-start: 1; }
.yemek-2 { grid-column-start: 55; grid-row-start: 1; }
.yemek-3 { grid-column-start: 58; grid-row-start: 1; }
.yemek-4 { grid-column-start: 61; grid-row-start: 1; }
.yemek-5 { grid-column-start: 64; grid-row-start: 1; }
.yemek-6 { grid-column-start: 67; grid-row-start: 1; }
.yemek-7 { grid-column-start: 70; grid-row-start: 1; }
.yemek-8 { grid-column-start: 73; grid-row-start: 1; }
.yemek-9 { grid-column-start: 76; grid-row-start: 1; }

.yemek-10 { grid-column-start: 40; grid-row-start: 40; }
.yemek-11 { grid-column-start: 43; grid-row-start: 40; }
.yemek-12 { grid-column-start: 46; grid-row-start: 40; }
.yemek-13 { grid-column-start: 49; grid-row-start: 40; }
.yemek-14 { grid-column-start: 52; grid-row-start: 40; }
.yemek-15 { grid-column-start: 55; grid-row-start: 40; }
.yemek-16 { grid-column-start: 58; grid-row-start: 40; }
.yemek-17 { grid-column-start: 61; grid-row-start: 40; }
.yemek-18 { grid-column-start: 64; grid-row-start: 40; }
.yemek-19 { grid-column-start: 67; grid-row-start: 40; }
.yemek-20 { grid-column-start: 70; grid-row-start: 40; }
.yemek-21 { grid-column-start: 73; grid-row-start: 40; }
.yemek-22 { grid-column-start: 76; grid-row-start: 40; }
.yemek-23 { grid-column-start: 79; grid-row-start: 40; }


/* Esnaf Alanları */
.esnaf-1 { grid-column-start: 1; grid-row-start: 4; }
.esnaf-2 { grid-column-start: 1; grid-row-start: 6; }
.esnaf-3 { grid-column-start: 1; grid-row-start: 8; }
.esnaf-4 { grid-column-start: 1; grid-row-start: 10; }
.esnaf-5 { grid-column-start: 1; grid-row-start: 12; }
.esnaf-6 { grid-column-start: 1; grid-row-start: 14; }
.esnaf-7 { grid-column-start: 1; grid-row-start: 16; }
.esnaf-8 { grid-column-start: 1; grid-row-start: 18; }
.esnaf-9 { grid-column-start: 1; grid-row-start: 20; }
.esnaf-10 { grid-column-start: 3; grid-row-start: 22; }
.esnaf-11 { grid-column-start: 5; grid-row-start: 22; }
.esnaf-12 { grid-column-start: 7; grid-row-start: 22; }
.esnaf-13 { grid-column-start: 9; grid-row-start: 22; }
.esnaf-14 { grid-column-start: 11; grid-row-start: 22; }
.esnaf-15 { grid-column-start: 13; grid-row-start: 22; }
.esnaf-16 { grid-column-start: 15; grid-row-start: 22; }
.esnaf-17 { grid-column-start: 17; grid-row-start: 22; }
.esnaf-18 { grid-column-start: 19; grid-row-start: 22; }
.esnaf-19 { grid-column-start: 21; grid-row-start: 22; }
.esnaf-20 { grid-column-start: 23; grid-row-start: 22; }
.esnaf-21 { grid-column-start: 3; grid-row-start: 24; }
.esnaf-22 { grid-column-start: 5; grid-row-start: 24; }
.esnaf-23 { grid-column-start: 7; grid-row-start: 24; }
.esnaf-24 { grid-column-start: 9; grid-row-start: 24; }
.esnaf-25 { grid-column-start: 11; grid-row-start: 24; }
.esnaf-26 { grid-column-start: 13; grid-row-start: 24; }
.esnaf-27 { grid-column-start: 15; grid-row-start: 24; }
.esnaf-28 { grid-column-start: 17; grid-row-start: 24; }
.esnaf-29 { grid-column-start: 19; grid-row-start: 24; }
.esnaf-30 { grid-column-start: 21; grid-row-start: 24; }
.esnaf-31 { grid-column-start: 7; grid-row-start: 7; }
.esnaf-32 { grid-column-start: 9; grid-row-start: 7; }
.esnaf-33 { grid-column-start: 11; grid-row-start: 7; }
.esnaf-34 { grid-column-start: 13; grid-row-start: 7; }
.esnaf-35 { grid-column-start: 15; grid-row-start: 7; }
.esnaf-36 { grid-column-start: 17; grid-row-start: 7; }
.esnaf-37 { grid-column-start: 19; grid-row-start: 7; }
.esnaf-38 { grid-column-start: 21; grid-row-start: 7; }
.esnaf-39 { grid-column-start: 23; grid-row-start: 7; }
.esnaf-40 { grid-column-start: 25; grid-row-start: 7; }
.esnaf-41 { grid-column-start: 27; grid-row-start: 7; }
.esnaf-42 { grid-column-start: 9; grid-row-start: 9; }
.esnaf-43 { grid-column-start: 11; grid-row-start: 9; }
.esnaf-44 { grid-column-start: 13; grid-row-start: 9; }
.esnaf-45 { grid-column-start: 15; grid-row-start: 9; }
.esnaf-46 { grid-column-start: 17; grid-row-start: 9; }
.esnaf-47 { grid-column-start: 19; grid-row-start: 9; }
.esnaf-48 { grid-column-start: 21; grid-row-start: 9; }
.esnaf-49 { grid-column-start: 23; grid-row-start: 9; }
.esnaf-50 { grid-column-start: 25; grid-row-start: 9; }
.esnaf-51 { grid-column-start: 27; grid-row-start: 9; }
.esnaf-52 { grid-column-start: 30; grid-row-start: 7; }
.esnaf-53 { grid-column-start: 30; grid-row-start: 11; }
.esnaf-54 { grid-column-start: 30; grid-row-start: 13; }
.esnaf-55 { grid-column-start: 30; grid-row-start: 15; }
.esnaf-56 { grid-column-start: 30; grid-row-start: 17; }
.esnaf-57 { grid-column-start: 30; grid-row-start: 19; }
.esnaf-58 { grid-column-start: 30; grid-row-start: 21; }
.esnaf-59 { grid-column-start: 30; grid-row-start: 23; }
.esnaf-60 { grid-column-start: 30; grid-row-start: 25; }
.esnaf-61 { grid-column-start: 30; grid-row-start: 27; }
.esnaf-62 { grid-column-start: 30; grid-row-start: 29; }
.esnaf-63 { grid-column-start: 30; grid-row-start: 31; }
.esnaf-64 { grid-column-start: 30; grid-row-start: 33; }
.esnaf-65 { grid-column-start: 30; grid-row-start: 35; }
.esnaf-66 { grid-column-start: 30; grid-row-start: 37; }
.esnaf-67 { grid-column-start: 32; grid-row-start: 11; }
.esnaf-68 { grid-column-start: 32; grid-row-start: 13; }
.esnaf-69 { grid-column-start: 32; grid-row-start: 15; }
.esnaf-70 { grid-column-start: 32; grid-row-start: 17; }
.esnaf-71 { grid-column-start: 32; grid-row-start: 19; }
.esnaf-72 { grid-column-start: 32; grid-row-start: 21; }
.esnaf-73 { grid-column-start: 32; grid-row-start: 23; }
.esnaf-74 { grid-column-start: 32; grid-row-start: 25; }
.esnaf-75 { grid-column-start: 32; grid-row-start: 27; }
.esnaf-76 { grid-column-start: 32; grid-row-start: 29; }
.esnaf-77 { grid-column-start: 32; grid-row-start: 31; }
.esnaf-78 { grid-column-start: 32; grid-row-start: 33; }
.esnaf-79 { grid-column-start: 32; grid-row-start: 35; }
.esnaf-80 { grid-column-start: 32; grid-row-start: 37; }
.esnaf-81 { grid-column-start: 7; grid-row-start: 14; }
.esnaf-82 { grid-column-start: 9; grid-row-start: 14; }
.esnaf-83 { grid-column-start: 11; grid-row-start: 14; }
.esnaf-84 { grid-column-start: 13; grid-row-start: 14; }
.esnaf-85 { grid-column-start: 15; grid-row-start: 14; }
.esnaf-86 { grid-column-start: 17; grid-row-start: 14; }
.esnaf-87 { grid-column-start: 19; grid-row-start: 14; }
.esnaf-88 { grid-column-start: 21; grid-row-start: 14; }
.esnaf-89 { grid-column-start: 23; grid-row-start: 14; }
.esnaf-90 { grid-column-start: 25; grid-row-start: 14; }
.esnaf-91 { grid-column-start: 7; grid-row-start: 16; }
.esnaf-92 { grid-column-start: 9; grid-row-start: 16; }
.esnaf-93 { grid-column-start: 11; grid-row-start: 16; }
.esnaf-94 { grid-column-start: 13; grid-row-start: 16; }
.esnaf-95 { grid-column-start: 15; grid-row-start: 16; }
.esnaf-96 { grid-column-start: 17; grid-row-start: 16; }
.esnaf-97 { grid-column-start: 19; grid-row-start: 16; }
.esnaf-98 { grid-column-start: 21; grid-row-start: 16; }
.esnaf-99 { grid-column-start: 23; grid-row-start: 16; }
.esnaf-100 { grid-column-start: 25; grid-row-start: 16; }
.esnaf-101 { grid-column-start: 36; grid-row-start: 7; }
.esnaf-102 { grid-column-start: 36; grid-row-start: 9; }
.esnaf-103 { grid-column-start: 38; grid-row-start: 7; }
.esnaf-104 { grid-column-start: 38; grid-row-start: 9; }
.esnaf-105 { grid-column-start: 36; grid-row-start: 13; }
.esnaf-106 { grid-column-start: 36; grid-row-start: 15; }
.esnaf-107 { grid-column-start: 38; grid-row-start: 13; }
.esnaf-108 { grid-column-start: 38; grid-row-start: 15; }
.esnaf-109 { grid-column-start: 36; grid-row-start: 19; }
.esnaf-110 { grid-column-start: 36; grid-row-start: 21; }
.esnaf-111 { grid-column-start: 38; grid-row-start: 19; }
.esnaf-112 { grid-column-start: 38; grid-row-start: 21; }
.esnaf-113 { grid-column-start: 36; grid-row-start: 25; }
.esnaf-114 { grid-column-start: 36; grid-row-start: 27; }
.esnaf-115 { grid-column-start: 38; grid-row-start: 25; }
.esnaf-116 { grid-column-start: 38; grid-row-start: 27; }
.esnaf-117 { grid-column-start: 36; grid-row-start: 31; }
.esnaf-118 { grid-column-start: 36; grid-row-start: 33; }
.esnaf-119 { grid-column-start: 38; grid-row-start: 31; }
.esnaf-120 { grid-column-start: 38; grid-row-start: 33; }

.esnaf-121 { grid-column-start: 42; grid-row-start: 7; }
.esnaf-122 { grid-column-start: 42; grid-row-start: 9; }
.esnaf-123 { grid-column-start: 42; grid-row-start: 11; }
.esnaf-124 { grid-column-start: 42; grid-row-start: 13; }
.esnaf-125 { grid-column-start: 42; grid-row-start: 15; }
.esnaf-126 { grid-column-start: 42; grid-row-start: 17; }
.esnaf-127 { grid-column-start: 42; grid-row-start: 19; }
.esnaf-128 { grid-column-start: 42; grid-row-start: 21; }
.esnaf-129 { grid-column-start: 42; grid-row-start: 23; }
.esnaf-130 { grid-column-start: 42; grid-row-start: 25; }
.esnaf-131 { grid-column-start: 42; grid-row-start: 27; }
.esnaf-132 { grid-column-start: 42; grid-row-start: 29; }
.esnaf-133 { grid-column-start: 42; grid-row-start: 31; }
.esnaf-134 { grid-column-start: 42; grid-row-start: 33; }
.esnaf-135 { grid-column-start: 42; grid-row-start: 35; }
.esnaf-136 { grid-column-start: 44; grid-row-start: 7; }
.esnaf-137 { grid-column-start: 44; grid-row-start: 9; }
.esnaf-138 { grid-column-start: 44; grid-row-start: 11; }
.esnaf-139 { grid-column-start: 44; grid-row-start: 13; }
.esnaf-140 { grid-column-start: 44; grid-row-start: 15; }
.esnaf-141 { grid-column-start: 44; grid-row-start: 17; }
.esnaf-142 { grid-column-start: 44; grid-row-start: 19; }
.esnaf-143 { grid-column-start: 44; grid-row-start: 21; }
.esnaf-144 { grid-column-start: 44; grid-row-start: 23; }
.esnaf-145 { grid-column-start: 44; grid-row-start: 25; }
.esnaf-146 { grid-column-start: 44; grid-row-start: 27; }
.esnaf-147 { grid-column-start: 44; grid-row-start: 29; }
.esnaf-148 { grid-column-start: 44; grid-row-start: 31; }
.esnaf-149 { grid-column-start: 44; grid-row-start: 33; }
.esnaf-150 { grid-column-start: 44; grid-row-start: 35; }
.esnaf-151 { grid-column-start: 60; grid-row-start: 11; }
.esnaf-152 { grid-column-start: 60; grid-row-start: 13; }
.esnaf-153 { grid-column-start: 60; grid-row-start: 20; }
.esnaf-154 { grid-column-start: 60; grid-row-start: 22; }
.esnaf-155 { grid-column-start: 60; grid-row-start: 29; }
.esnaf-156 { grid-column-start: 60; grid-row-start: 31; }
.esnaf-157 { grid-column-start: 65; grid-row-start: 11; }
.esnaf-158 { grid-column-start: 65; grid-row-start: 13; }
.esnaf-159 { grid-column-start: 65; grid-row-start: 20; }
.esnaf-160 { grid-column-start: 65; grid-row-start: 22; }
.esnaf-161 { grid-column-start: 65; grid-row-start: 29; }
.esnaf-162 { grid-column-start: 65; grid-row-start: 31; }
.esnaf-163 { grid-column-start: 7; grid-row-start: 30; }
.esnaf-164 { grid-column-start: 9; grid-row-start: 30; }
.esnaf-165 { grid-column-start: 11; grid-row-start: 30; }
.esnaf-166 { grid-column-start: 13; grid-row-start: 30; }
.esnaf-167 { grid-column-start: 15; grid-row-start: 30; }
.esnaf-168 { grid-column-start: 17; grid-row-start: 30; }
.esnaf-169 { grid-column-start: 19; grid-row-start: 30; }
.esnaf-170 { grid-column-start: 21; grid-row-start: 30; }
.esnaf-171 { grid-column-start: 23; grid-row-start: 30; }
.esnaf-172 { grid-column-start: 25; grid-row-start: 30; }
.esnaf-173 { grid-column-start: 7; grid-row-start: 32; }
.esnaf-174 { grid-column-start: 9; grid-row-start: 32; }
.esnaf-175 { grid-column-start: 11; grid-row-start: 32; }
.esnaf-176 { grid-column-start: 13; grid-row-start: 32; }
.esnaf-177 { grid-column-start: 15; grid-row-start: 32; }
.esnaf-178 { grid-column-start: 17; grid-row-start: 32; }
.esnaf-179 { grid-column-start: 19; grid-row-start: 32; }
.esnaf-180 { grid-column-start: 21; grid-row-start: 32; }
.esnaf-181 { grid-column-start: 23; grid-row-start: 32; }
.esnaf-182 { grid-column-start: 25; grid-row-start: 32; }

.esnaf-183 { grid-column-start: 48; grid-row-start: 7; }
.esnaf-184 { grid-column-start: 48; grid-row-start: 9; }
.esnaf-185 { grid-column-start: 48; grid-row-start: 11; }
.esnaf-186 { grid-column-start: 48; grid-row-start: 13; }
.esnaf-187 { grid-column-start: 48; grid-row-start: 15; }
.esnaf-188 { grid-column-start: 48; grid-row-start: 17; }
.esnaf-189 { grid-column-start: 48; grid-row-start: 19; }
.esnaf-190 { grid-column-start: 48; grid-row-start: 21; }
.esnaf-191 { grid-column-start: 48; grid-row-start: 23; }
.esnaf-192 { grid-column-start: 48; grid-row-start: 25; }
.esnaf-193 { grid-column-start: 48; grid-row-start: 27; }
.esnaf-194 { grid-column-start: 48; grid-row-start: 29; }
.esnaf-195 { grid-column-start: 48; grid-row-start: 31; }
.esnaf-196 { grid-column-start: 48; grid-row-start: 33; }
.esnaf-197 { grid-column-start: 48; grid-row-start: 35; }
.esnaf-198 { grid-column-start: 50; grid-row-start: 7; }
.esnaf-199 { grid-column-start: 50; grid-row-start: 9; }
.esnaf-200 { grid-column-start: 50; grid-row-start: 11; }
.esnaf-201 { grid-column-start: 50; grid-row-start: 13; }
.esnaf-202 { grid-column-start: 50; grid-row-start: 15; }
.esnaf-203 { grid-column-start: 50; grid-row-start: 17; }
.esnaf-204 { grid-column-start: 50; grid-row-start: 19; }
.esnaf-205 { grid-column-start: 50; grid-row-start: 21; }
.esnaf-206 { grid-column-start: 50; grid-row-start: 23; }
.esnaf-207 { grid-column-start: 50; grid-row-start: 25; }
.esnaf-208 { grid-column-start: 50; grid-row-start: 27; }
.esnaf-209 { grid-column-start: 50; grid-row-start: 29; }
.esnaf-210 { grid-column-start: 50; grid-row-start: 31; }
.esnaf-211 { grid-column-start: 50; grid-row-start: 33; }
.esnaf-212 { grid-column-start: 50; grid-row-start: 35; }


.esnaf-213 { grid-column-start: 54; grid-row-start: 7; }
.esnaf-214 { grid-column-start: 54; grid-row-start: 9; }
.esnaf-215 { grid-column-start: 54; grid-row-start: 11; }
.esnaf-216 { grid-column-start: 54; grid-row-start: 13; }
.esnaf-217 { grid-column-start: 54; grid-row-start: 15; }
.esnaf-218 { grid-column-start: 54; grid-row-start: 17; }
.esnaf-219 { grid-column-start: 54; grid-row-start: 19; }
.esnaf-220 { grid-column-start: 54; grid-row-start: 21; }
.esnaf-221 { grid-column-start: 54; grid-row-start: 23; }
.esnaf-222 { grid-column-start: 54; grid-row-start: 25; }
.esnaf-223 { grid-column-start: 54; grid-row-start: 27; }
.esnaf-224 { grid-column-start: 54; grid-row-start: 29; }
.esnaf-225 { grid-column-start: 54; grid-row-start: 31; }
.esnaf-226 { grid-column-start: 54; grid-row-start: 33; }
.esnaf-227 { grid-column-start: 54; grid-row-start: 35; }
.esnaf-228 { grid-column-start: 56; grid-row-start: 7; }
.esnaf-229 { grid-column-start: 56; grid-row-start: 9; }
.esnaf-230 { grid-column-start: 56; grid-row-start: 11; }
.esnaf-231 { grid-column-start: 56; grid-row-start: 13; }
.esnaf-232 { grid-column-start: 56; grid-row-start: 15; }
.esnaf-233 { grid-column-start: 56; grid-row-start: 17; }
.esnaf-234 { grid-column-start: 56; grid-row-start: 19; }
.esnaf-235 { grid-column-start: 56; grid-row-start: 21; }
.esnaf-236 { grid-column-start: 56; grid-row-start: 23; }
.esnaf-237 { grid-column-start: 56; grid-row-start: 25; }
.esnaf-238 { grid-column-start: 56; grid-row-start: 27; }
.esnaf-239 { grid-column-start: 56; grid-row-start: 29; }
.esnaf-240 { grid-column-start: 56; grid-row-start: 31; }
.esnaf-241 { grid-column-start: 56; grid-row-start: 33; }
.esnaf-242 { grid-column-start: 56; grid-row-start: 35; }


/* =========================================
   7. AÇILIR PENCERE (MODAL) TASARIMI
   ========================================= */
.modal-arkaplan {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.6) !important;
    z-index: 100000;
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.modal-icerik {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    width: 400px;
    max-width: 90%;
    position: relative; 
}

.kapat-btn {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #666;
}

.kapat-btn:hover { color: #e74c3c; }

.form-grup { margin-bottom: 15px; }
.form-grup label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-grup input, .form-grup select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
}

.kaydet-btn {
    width: 100%;
    padding: 10px;
    background-color: #2ecc71;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

.kaydet-btn:hover { background-color: #27ae60; }

/* =========================================
   8. EKRANI KİLİTLEYEN AFİŞ MİMARİSİ
   ========================================= */
.tum-sayfa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Üst, orta ve alt afişler arasında ferah boşluk bırakır */
    zoom: 0.9; /* EKRANA TAM SIĞDIRMA SİHRİ: Görüntü ekrana sığmazsa bu değeri 0.7 yap, küçük kalırsa 0.9 yap */
}

.orta-alan {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Yan afişlerle harita arasındaki boşluk */
}

/* KESİN PİKSEL ÖLÇÜLERİN (Ekranda asla bozulmazlar) */
.ust-banner { width: 1700px; height: 120px; flex-shrink: 0; }
.alt-banner { width: 1700px; height: 100px; flex-shrink: 0; }
.yan-banner { width: 250px; height: 500px; flex-shrink: 0; }

.ust-banner img, .alt-banner img, .yan-banner img {
    width: 100%;
    height: 100%;
    object-fit: fill; /* Hazırladığın tasarımı milimi milimine kutuya basar, kaliteyi korur */
    display: block;
    border-radius: 5px; /* Köşelere çok hafif şık bir kavis verir */
}
/* =========================================
   9. SPONSOR KUTULARI (10x5 GRID SİSTEMİ)
   ========================================= */
.sponsor-sahnesi {
    /* Absolute, top, left ve transform kodları SİLİNDİ. Sorunun kaynağı onlardı. */
    width: 1600px; 
    
    /* İŞTE KESİN ÇÖZÜM: Hangi ekranda açarsan aç, alt banner ile arası tam 40px kalacak */
    margin-top: 40px; 
    
    /* En alta inince sayfanın dibine yapışmasını engeller */
    margin-bottom: 100px; 
    
    display: grid;
    grid-template-columns: repeat(10, 1fr); 
    gap: 15px; 
    z-index: 10;
}

.sponsor-kutu {
    background-color: rgba(255, 255, 255, 0.95); /* Şık, hafif saydam beyaz */
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 10px 5px; /* Yan yana 10 tane sığacağı için iç boşluğu dengeledik */
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    min-height: 80px; /* Tüm kutuların boyunu eşitler */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Kutu içindeki yazıların boyutu (10 tane yan yana sığması için küçültüldü) */
.sponsor-kutu h2 {
    margin: 0;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
}

/* Kutunun içindeki alt yazının ayarları */
.sponsor-kutu p {
    margin: 4px 0 0 0;
    font-size: 12px; /* Gözüne çok küçük gelirse bu sayıyı 13px veya 14px yapabilirsin */
    color: #333; /* Rengini biraz daha koyulaştırdık ki kalın yazı daha net okunsun */
    font-weight: bold; /* İŞTE YAZIYI KALINLAŞTIRAN SİHİRLİ KOD */
}

/* SPONSOR ANA BAŞLIĞI */
.sponsorlar-baslik {
    grid-column: 1 / -1; /* SİHİRLİ KOD: Başlığın 10 sütunun tamamını kaplamasını sağlar */
    text-align: center; /* Yazıyı tam ortalar */
    font-size: 38px; /* Yazının büyüklüğü */
    font-weight: bold;
    color: #333; /* Yazı rengi (Kilim desenine uyumlu istersen #6b1010 yapabilirsin) */
    margin: 0 0 20px 0; /* Kutularla arasına nefes alma boşluğu bırakır */
    font-family: 'Arial', sans-serif;
    letter-spacing: 3px; /* Harflerin arasını hafif açarak daha şık/kurumsal yapar */
    text-transform: uppercase; /* Tüm harfleri büyük harf yapar */
}

/* =========================================
   10. MESAFE OKU (SAHNE İLE STANT ARASI)
   ========================================= */
.mesafe-oku {
    grid-column: 70 / 78; /* Esnaf stantları ile Sahne arasındaki tam boşluğa yerleşir */
    grid-row: 21 / span 2; /* Dikeyde haritanın tam ortasına hizalar */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    color: #black; /* Dikkat çekici şık bir kırmızı tonu */
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 1px;
}

/* Okun Çizgi Gövdesi */
.mesafe-oku::before {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background-color: #c0392b; /* Çizgi rengi */
    z-index: 1;
}

/* Sol ok, Sağ ok ve Yazı ayarları (Yazının arkasındaki çizgiyi gizlemek için zemin rengi verdik) */
.mesafe-oku span {
    z-index: 2;
    background-color: #e9ecef; /* Harita zemin rengiyle aynı, çizgiyi bıçak gibi keser */
    padding: 0 8px;
}

.mesafe-oku .ok-ucu {
    font-size: 10px;
    padding: 0;
    background-color: transparent;
}

/* =========================================
   DOLU STANTLARI KIRMIZI YAPAN KOD
   ========================================= */
.alan.satildi {
    background-color: #d32f2f !important; /* Admin panelindeki gibi tok bir kırmızı */
    color: white !important;
    border-color: #b71c1c !important;
}

/* Dolu stantların hover (üstüne gelince açılan) kutusu da kırmızı olsun dersen: */
.alan.satildi .hover-durum {
    background-color: #d32f2f !important;
    color: white !important;
}

/* =========================================
   REZERVE STANTLARI TURUNCU YAPAN KOD
   ========================================= */
.alan.rezerve {
    background-color: #8e44ad !important; /* Dikkat çekici şık bir turuncu */
    color: white !important;
    border-color: #732d91 !important;
}

.alan.rezerve .hover-durum {
    background-color: #8e44ad !important;
    color: white !important;
}