/* =========================================
   Biletcide.com - Otobüs Şeması TAM ÇÖZÜM
   ========================================= */

/* Ana Otobüs Kasası */
.bus-map-wrapper {
    background: #f3fafc;
    border: 1px solid #eee;
        overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    margin: 0 auto;
}

/* --- MASAÜSTÜ (YATAY) --- */
@media (min-width: 769px) {
    .bus-map-wrapper {
        border-radius: 40px 15px 15px 40px !important;
        display: flex; /* İçerideki alanların yan yana durması için */
    }

    .bus-front-area {
        /* Burası otobüsün burnu. Genişlik burnun uzunluğu, Yükseklik otobüsün eni. */
        width: 100px !important; 
        height: 100% !important;
        border-bottom: none;
        position: relative;
        overflow: hidden;

    }

    .bus-front-area::before {
        content: "";
        position: absolute;
        /* Kutuyu tam kaplaması için genişlik ve yüksekliği ters veriyoruz çünkü dönecek */
        top: 50%;
        left: 55%;
        width: 110px; /* Kutu boyundan büyük verdik ki boşluk kalmasın */
        height: 100%; 
        pointer-events: none;
/* Direksiyonu kavisin tam içine, görünür bir koordinata aldım */
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='153' viewBox='0 0 60 153' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34 0V4.46971C41.9045 6.64292 47.7233 13.8644 47.7233 22.4629C47.7233 31.0573 41.9045 38.2818 34 40.452V57.5405C34 69.0737 34.7536 80.5959 36.2557 92.0316L44.2487 152.874C49.6241 146.134 59.0735 127.525 59.0735 79.9825C59.0735 38.2868 52.4525 17.6442 47.1099 7.77626C44.5062 2.96953 39.4659 0 34 0Z' fill='%23ECF1F8'/%3E%3Cg transform='translate(12, 8)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.6172 26.2476C14.5148 26.2476 14.4134 26.2456 14.3119 26.2426C12.7462 26.1909 11.8286 24.4442 12.6288 23.0971L17.1831 15.4253C17.5718 14.7721 17.5718 13.9599 17.1841 13.3047L12.9062 6.09217C12.1139 4.75503 13.0295 2.99041 14.5834 2.98544H14.6172C21.0394 2.98544 26.2477 8.18983 26.2477 14.617C26.2477 21.0382 21.0394 26.2476 14.6172 26.2476ZM2.98444 14.617C2.98444 11.9467 3.90105 9.50608 5.4231 7.55357C6.32082 6.40234 8.09439 6.49579 8.85292 7.74345L12.2231 13.2868C12.6267 13.9499 12.6267 14.782 12.2241 15.4451L8.6869 21.2609C7.9214 22.5215 6.11404 22.612 5.23719 21.426C3.82749 19.5162 2.98444 17.173 2.98444 14.617ZM14.618 0C6.5445 0 0 6.5445 0 14.617C0 22.6866 6.5445 29.2311 14.618 29.2311C22.6895 29.2311 29.232 22.6866 29.232 14.617C29.232 6.5445 22.6895 0 14.618 0Z' fill='%23C7D4E6'/%3E%3C/g%3E%3C/svg%3E");
   background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    
        /* Tam merkezde döndür ve kutuya sığdır */
        transform: translate(-50%, -50%) rotate(-180deg);
        
}
}
/* --- MOBİL (DİKEY) --- */
@media (max-width: 768px) {
    .bus-map-wrapper {
        /* Otobüsün üst kısmını oval yapıyoruz */
        border-radius: 40px 40px 15px 15px !important;
        overflow: hidden;
       
    }

    .bus-front-area {
        /* Genişliği 100px değil, ekranın tamamı (%100) yapmalısın */
        width: 100% !important; 
        height: 250px !important; 
        position: relative;
       
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .bus-front-area::before {
        content: "";
        position: absolute;
        /* Tam ortalayıp tepeye sıfırlıyoruz */
        top: 60px;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-90deg); /* Hem ortala hem döndür */
        
        width: 220px; /* Direksiyonun görünür genişliği */
        height: 280px; /* Direksiyonun görünür yüksekliği */
        
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='153' viewBox='0 0 60 153' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34 0V4.46971C41.9045 6.64292 47.7233 13.8644 47.7233 22.4629C47.7233 31.0573 41.9045 38.2818 34 40.452V57.5405C34 69.0737 34.7536 80.5959 36.2557 92.0316L44.2487 152.874C49.6241 146.134 59.0735 127.525 59.0735 79.9825C59.0735 38.2868 52.4525 17.6442 47.1099 7.77626C44.5062 2.96953 39.4659 0 34 0Z' fill='%23ECF1F8'/%3E%3Cg transform='translate(12, 8)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.6172 26.2476C14.5148 26.2476 14.4134 26.2456 14.3119 26.2426C12.7462 26.1909 11.8286 24.4442 12.6288 23.0971L17.1831 15.4253C17.5718 14.7721 17.5718 13.9599 17.1841 13.3047L12.9062 6.09217C12.1139 4.75503 13.0295 2.99041 14.5834 2.98544H14.6172C21.0394 2.98544 26.2477 8.18983 26.2477 14.617C26.2477 21.0382 21.0394 26.2476 14.6172 26.2476ZM2.98444 14.617C2.98444 11.9467 3.90105 9.50608 5.4231 7.55357C6.32082 6.40234 8.09439 6.49579 8.85292 7.74345L12.2231 13.2868C12.6267 13.9499 12.6267 14.782 12.2241 15.4451L8.6869 21.2609C7.9214 22.5215 6.11404 22.612 5.23719 21.426C3.82749 19.5162 2.98444 17.173 2.98444 14.617ZM14.618 0C6.5445 0 0 6.5445 0 14.617C0 22.6866 6.5445 29.2311 14.618 29.2311C22.6895 29.2311 29.232 22.6866 29.232 14.617C29.232 6.5445 22.6895 0 14.618 0Z' fill='%23C7D4E6'/%3E%3C/g%3E%3C/svg%3E");
        
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
       border-radius: 50px 50px 0 0;
 
    }
}


/* Masaüstü: Sırtlık Sağda */
.seat-backrest {
    transform-origin: center;
    transform: scaleX(-1) ; /* Yatayda ters çevir (Sağa al) */
}

/* MOBİL: Sırtlık Aşağıda */
@media screen and (max-width: 768px) {
    .seat-backrest {
        transform: rotate(-90deg) ; /* 90 derece döndür ve aşağı yasla */
        transform-origin: center;
    }
}
.seat-unit { width: 48px; height: 48px; background: none !important; border: none !important; position: absolute; display: flex;
    align-items: center;
    justify-content: center; box-sizing: border-box;}
.seat-svg { width: 100%; height: 100%; display: block;
    margin: auto; overflow:visible;}

/* --- RENK AYARLARI --- */

/* MAVİ KOLTUK (Erkek) */
.seat-unit.occupied-male .seat-base { fill: #bbdefb !important; stroke: #4a8df1; stroke-width: 0.5; cursor: not-allowed; } /* İç kare dolgusu */
.seat-unit.occupied-male .seat-main-shape { fill: #bbdefb !important; stroke: #4a8df1; stroke-width: 0.6; cursor: not-allowed;} /* Sırtlık */
.seat-unit.occupied-male .seat-no { fill: #0d47a1 !important; cursor: not-allowed; }

/* PEMBE KOLTUK (Kadın) */
.seat-unit.occupied-female .seat-base { fill: #fce4ec !important; stroke: #e54d9b; stroke-width: 0.5; cursor: not-allowed;} /* İç kare dolgusu */
.seat-unit.occupied-female .seat-main-shape { fill: #fce4ec !important; stroke: #e54d9b; stroke-width: 0.6; cursor: not-allowed; } /* Sırtlık */
.seat-unit.occupied-female .seat-no { fill: #880e4f !important; cursor: not-allowed; }

/* BOŞ KOLTUK (Yeşil Çerçeveli) */
.seat-unit.available .seat-base { fill: #ffffff !important; stroke: #2ecc71; stroke-width: 0.5; cursor: pointer; }
.seat-unit.available .seat-main-shape { fill: #ffffff !important; stroke: #2ecc71; stroke-width: 0.6; cursor: pointer }
.seat-unit.available .seat-no { fill: #2ecc71 !important; cursor: pointer}

/* SEÇİLİ KOLTUK  */
.seat-unit.selected .seat-base { fill: #27ae5f !important; stroke: #2ecc71; stroke-width: 0.5;}
.seat-unit.selected .seat-main-shape { fill: #27ae5f !important; stroke: #2ecc71; stroke-width: 0.6; }
.seat-unit.selected .seat-no { fill: #ffffff !important; }
/* rezerve KOLTUK  */
.seat-unit.reserved .seat-base { fill: #bbdefb !important; stroke: #4a8df1; stroke-width: 0.5; cursor: not-allowed; } /* İç kare dolgusu */
.seat-unit.reserved .seat-main-shape { fill: #bbdefb !important; stroke: #4a8df1; stroke-width: 0.6; cursor: not-allowed;} /* Sırtlık */
.seat-unit.reserved .seat-no { fill: #0d47a1 !important; cursor: not-allowed; }

/* Genel Yazı Tipi */
.seat-no { font-size: 14px; font-weight: bold; font-family: Arial, sans-serif; }

/* Pop-up'ın gizli hali */
.hidden { display: none !important; }
/* --- POPUP KONTROL --- */
#popup-overlay.hidden { display: none !important; }

#popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Arkaplanı karart */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
/* Popup Overlay - Arka planı biraz daha koyulaştır ki odak artsın */
.gender-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(3px); /* Cam efekti */
}

/* Ana Konteyner */
.gender-popup {
    background: #fff !important;
    border-radius: 20px !important;
    padding: 30px !important;
    width: 360px !important;
    text-align: center;
    border: none !important;
}

/* Başlıklar */
.gender-popup h4 { font-size: 18px; color: #333; margin-bottom: 5px; font-weight: 700; }
.gender-popup p { color: #777; font-size: 14px; margin-bottom: 25px; }

/* Buton Grubu */
.gender-options {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

/* Cinsiyet Butonları */
.gender-btn {
    flex: 1;
    height: 140px; /* İkonlar büyüyeceği için yüksekliği biraz artırdık */
    padding: 10px !important; /* İkonun kutuya yaklaşması için padding'i düşürdük */
    border: 1.5px solid #eee !important;
    background: #f0f0f0 !important;
    border-radius: 16px !important;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    transition: all 0.2s ease;
}

/* İkon Boyutu - Kutuyu kaplaması için */
.gender-svg-icon {
    width: 85% !important; /* Kutunun genişliğinin %85'ini kaplar */
    height: auto !important;
   
    margin: 0 auto !important;
    display: block !important;
}

/* Erkek İkon Rengi */
.btn-male svg path {
    fill: #2d96ff;
}

/* Kadın İkon Rengi (Zaten sendeydi, üzerinden geçtik) */
.btn-female svg path {
    fill: #FF69B4;
}

/* Erkek Yazı Rengi */
.btn-male span { 
    color: #2d96ff !important;
    font-weight:600; 
}

/* Kadın Yazı Rengi */
.btn-female span { 
    color: #FF69B4 !important; 
    font-weight:600;
}



/* Üzerine gelince ikonun büyüme efekti (Obilet tarzı) */
.gender-btn:hover:not(:disabled) .gender-svg-icon {
    transform: scale(1.05);
    cursor: pointer;
}


/* KISITLAMA DURUMU (Obilet Tarzı) */
.gender-btn:disabled {
    opacity: 0.5;
    
    
    cursor: not-allowed;
    
}

/* Hata/Uyarı Notu */
#cinsiyet-error-msg {
    color: #000000;
    font-size: 13px;
    font-weight: 500;
    
}



.bus-map-container {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Bilgi Paneli Konteynırı */
  .legend-container-new {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 12px;
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
}

.legend-item-new {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* İkon kutusu - Görünmesi için display ve min-width şart */
.legend-box-new {
    display: inline-block !important;
    min-width: 18px !important;
    min-height: 18px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Renkler ve Çerçeveler */
.legend-box-new.bos {
    background-color: #ffffff !important;
    border: 2px solid #2ecc71 !important;
}

.legend-box-new.erkek {
    background-color: #bbdefb !important;
    border: 1px solid #4a8df1 !important;
}

.legend-box-new.kadin {
    background-color: #fce4ec !important;
    border: 1px solid #e54d9b !important;
}

/* Yazı stili */
.legend-label-new {
    font-size: 13px;
    color: #555;
    font-weight: 600;
    font-family: sans-serif;
    line-height: 18px;
}

/* --- ORTAK AYARLAR --- */
.responsive-text {
    font-weight: 600;
    white-space: nowrap;
    font-family: sans-serif;
    color: #555;
    display: inline-block;
}

.responsive-box {
    border-radius: 3px;
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
    display: inline-block !important; /* Görünürlük için kritik */
}

.seat-back-line {
    position: absolute;
    right: 1px;
    top: 2px;
    width: 2px;
    height: 70%;
    background: rgba(0,0,0,0.1);
    border-radius: 1px;
}

/* --- RENKLER --- */
.responsive-box.bos { background-color: #ffffff !important; border: 2px solid #2ecc71 !important; }
.responsive-box.erkek { background-color: #bbdefb !important; border: 1px solid #4a8df1 !important; }
.responsive-box.kadin { background-color: #fce4ec !important; border: 1px solid #e54d9b !important; }

/* --- MOBİL (Varsayılan - 14px) --- */
.responsive-text { font-size: 14px !important; }
.responsive-box { 
    width: 14px !important; height: 14px !important; 
    min-width: 14px !important; min-height: 14px !important; 
}

/* --- DESKTOP (769px+) - 18px --- */
@media screen and (min-width: 769px) {
    .responsive-text { font-size: 18px !important; }
    .responsive-box { 
        width: 18px !important; height: 18px !important; 
        min-width: 18px !important; min-height: 18px !important; 
    }
    .seat-back-line { width: 3px; }
}



/* Ana Özet Kutusu */
.selection-summary {
    display: none; /* JS ile açılır */
    flex-direction: column !important; /* Mobilde dikey */
    background: #fff;
    padding: 15px;
    border-top: 2px solid #eee;
    gap: 10px;
}

/* Detay Satırı (Koltuklar ve Tutar) */
.summary-detail-row {
    display: none; /* Başta gizli */
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    order: 1 !important; /* Mobilde ilk sırada */
}

/* Koltuk Kutuları */
.seat-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 2px !important;
}
.seat-badge.erkek { background: #e3f2fd !important; color: #1976d2 !important; border: 1px solid #bbdefb !important; }
.seat-badge.kadin { background: #fce4ec !important; color: #d81b60 !important; border: 1px solid #f8bbd0 !important; }

/* Butonun Mobilde En Altta Kalması */
.btn-confirm {
    order: 2 !important; /* Mobilde detay satırının altına zorla */
    width: 100% !important;
    height: 50px !important;
    background: #ccc;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.2s;
}
.btn-confirm.active-btn {
    background: #2ecc71 !important;
    cursor: pointer;
}

/* Masaüstü Düzenlemesi */
@media screen and (min-width: 769px) {
    .selection-summary {
        flex-direction: row !important; /* Masaüstünde yan yana */
        justify-content: space-between !important;
        align-items: center !important;
    }
    .summary-detail-row {
        margin-bottom: 0 !important;
        flex: 1 !important;
        order: 1 !important;
    }
    .btn-confirm {
        width: auto !important;
        min-width: 200px !important;
        order: 2 !important;
        margin-left: 20px;
    }
}
/* ── seat-top-bar: sefer detay butonu + legend yan yana, mobilde alt alta ── */
.seat-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 5px 5px;
    border-bottom: 1px solid #eee;
    
}

.btn-sefer-detay {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #2d3e50;
    background: #fff;
    border: 1.5px solid #dde2e8;
    border-radius: 7px;
    padding: 6px 10px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .2s, color .2s;
}
.btn-sefer-detay:hover { background: #2d3e50; color: #fff; border-color: #2d3e50; }

.seat-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.seat-legend .lg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #777;
    white-space: nowrap;
}
.seat-legend .lg i {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: inline-block;
}
.seat-legend .lg.available i { background: #ffffff; border: 2px solid #2ecc71; }
.seat-legend .lg.male     i { background-color: #bbdefb; border: 1px solid #4a8df1; }
.seat-legend .lg.female   i { background-color: #fce4ec; border: 1px solid #e54d9b; }

@media (max-width: 520px) {
    .seat-top-bar {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 5px;
    }
    .seat-legend {
        gap: 6px;
        flex-wrap: nowrap;
    }
    .seat-legend .lg {
        font-size: 11px;
    }
}

/* Mobilde "Sefer Detayı" yazısını gizle, sadece ikon kalsın */
@media (max-width: 480px) {
    .detay-label { display: none; }
    .btn-sefer-detay { padding: 6px 10px; }
}