/* Ana Kart Konteyneri */
.card[id^="gecisKartiAlani-"] {
    background-color: #fcfdff; /* Temiz, neredeyse beyaz bir arka plan */
    border: 1px solid #e9ecef;
    border-radius: 16px;       /* Yumuşak ve modern kenarlar */
    box-shadow: 0 8px 40px -12px rgba(0, 80, 150, 0.15);
    overflow: hidden;          /* İçeriklerin kenarlardan taşmasını engeller */
}

/* Kartın içindeki ana card-body alanı */
.card[id^="gecisKartiAlani-"] .card-body {
     /* Daha ferah bir iç boşluk */
}

/* Kart Başlığı (örn: Kapitan Andreevo → Kapıkule) */
.card[id^="gecisKartiAlani-"] .g-card-title {
    font-weight: 700;
    font-size: 1.8rem; /* Daha büyük ve okunaklı başlık */
    color: #2c3e50;
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* Başlığın İçindeki Yön Oku (→) */
.card[id^="gecisKartiAlani-"] .g-card-title .text-muted {
    /* Temanın ana rengini kullanır, yoksa varsayılan mavi */
    color: var(--ast-global-color-0, #0170B9) !important; 
    font-weight: 400;
    font-size: 1.6rem;
    vertical-align: middle;
}



/* Yatay Çizgi (HR) Stili */
.card[id^="gecisKartiAlani-"] hr {
    border: 0;
    height: 1px;
    /* Ortada belirginleşip kenarlarda kaybolan çizgi */
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    
}

.gecis-form-container {
    border-radius: 16px;
    
    /* Temanın ana rengini arka plan olarak kullanıyoruz */
    background-color: var(--ast-global-color-0, #0170B9);
    
    /* Alternatif olarak daha canlı bir gradyan da kullanabilirsiniz */
    /* background-image: linear-gradient(135deg, #007bff 0%, #0056b3 100%); */
    
    padding: 2rem !important;
    color: #ffffff; /* İçindeki tüm metinleri beyaz yapıyoruz */
    box-shadow: 0 10px 30px -10px rgba(1, 112, 185, 0.5);
}

/* Kutu içindeki başlık ve paragraf metin renklerini ayarlıyoruz */
.gecis-form-container h4,
.gecis-form-container p.text-muted {
    color: #ffffff !important; /* !important ile text-muted sınıfını eziyoruz */
}

.gecis-form-container p.text-muted {
    opacity: 0.9; /* Alt başlığı biraz daha soluk yapıyoruz */
}

/* Koyu arka plan üzerinde form elemanlarının görünümünü iyileştiriyoruz */
.gecis-form-container .form-control,
.gecis-form-container .form-select {
    border-color: rgba(255, 255, 255, 0.4);
    color: #000000; /* Yazı rengi */
}

/* Select kutusundaki okun beyaz görünmesini sağlıyoruz (Bootstrap 5 SVG oku için) */
.gecis-form-container .form-select {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}



/* Kayan etiketlerin rengini ayarlıyoruz */
.gecis-form-container .form-floating > label {
   
}

/* Dosya seçme butonunu beyaz ve dikkat çekici yapıyoruz */
.gecis-form-container .form-control::file-selector-button {
    font-weight: 500;
    color: var(--ast-global-color-0, #0170B9);
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: .25rem;
}
.gecis-form-container .form-control::file-selector-button:hover {
    background-color: #f0f0f0; /* Üzerine gelince hafif gri */
}
                .gecis-kart-sekmeler-container .nav-pills .nav-link {
                    background-color: #f0f0f0; color: #4b5563; font-weight: 500;
                    border-radius: 8px; padding-top: 0.75rem; padding-bottom: 0.75rem;
                    transition: all 0.2s ease-in-out;
                }
                .gecis-kart-sekmeler-container .nav-pills .nav-link.active,
                .gecis-kart-sekmeler-container .nav-pills .show > .nav-link {
                    background-color: var(--ast-global-color-0, #0170B9); color: #ffffff;
                    box-shadow: 0 4px 14px -5px rgba(1, 112, 185, 0.6);
                }
                .gecis-kart-sekmeler-container .nav-pills .nav-link:not(.active):hover {
                    background-color: #e5e7eb; transform: translateY(-2px);
                }
                .tab-content { padding: 1rem 0; }


/* ========================================================================
   Sınır Kapısı Kartı - Bilgi Alanı (Mevcut HTML ile)
   ======================================================================== */

/* Ana konteyneri yeniden şekillendiriyoruz */
.gecisKartiIcerik > .border {
    background: linear-gradient(145deg, #fdfdff, #f9faff) !important;
    border: 1px solid #eef2f7 !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    box-shadow: 0 8px 30px -15px rgba(0, 80, 150, 0.1);
}

/* --- Üst Satır: Ülkeler & Süre --- */
.gecisKartiIcerik .d-flex.align-items-center {
    gap: 1rem; /* Flex elemanları arasına boşluk ekle */
}

/* Sol ve Sağ Ülke Blokları */
.gecisKartiIcerik .d-flex.align-items-center > div[style*="flex: 2"] > div:first-child { /* Ülke Adı */
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    color: #334155;
}
.gecisKartiIcerik .d-flex.align-items-center > div[style*="flex: 2"] > div:nth-child(2) { /* Bayrak */
    font-size: 3.5rem !important;
    line-height: 1.2 !important;
    margin-top: 0.5rem;
}

/* Orta Süre Bloğu - Ana Eleman */
.gecisKartiIcerik .d-flex.align-items-center > div[style*="flex: 3"] {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 1.25rem 1rem;
    box-shadow: 0 4px 20px rgba(0, 80, 150, 0.08);
    border: 1px solid #ffffff;
    position: relative;
    top: -5px; /* Hafif yukarı çekerek boyut hissi verir */
}
.gecisKartiIcerik .d-flex.align-items-center > div[style*="flex: 3"] > div:first-child { /* "Ortalama Bekleme" yazısı */
    font-size: 0.85rem !important;
    color: #64748b !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.gecisKartiIcerik .d-flex.align-items-center > div[style*="flex: 3"] > div:nth-child(2) { /* Sürenin kendisi */
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--ast-global-color-0, #0170B9) !important;
    line-height: 1.1;
    margin-top: 0.25rem;
}

/* --- Alt Satır: Kapı İsimleri --- */
.gecisKartiIcerik .d-flex.align-items-start {
    color: #64748b !important;
    border-top: 1px solid #eef2f7;
    padding-top: 1rem;
    margin-top: 1rem !important;
}
.gecisKartiIcerik .d-flex.align-items-start > div[style*="flex: 3"] { /* Yön Oku */
     color: #cbd5e1 !important;
     font-weight: bold;
}

/* --- Alternatif Kapılar Bölümü --- */
.gecisKartiIcerik hr.my-3 {
    border-top: 1px dashed #cbd5e1;
    background: none;
}
.gecisKartiIcerik div[style*="text-align:left"] > div[style*="font-weight: bold"] {
    font-size: 1.1rem !important;
    color: #334155 !important;
    margin-bottom: 0.75rem;
}
.gecisKartiIcerik .list-unstyled li {
    border-radius: 8px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}
.gecisKartiIcerik .list-unstyled li:hover {
    background-color: #f8f9fa;
}
/* Süre etiketi için inline stili ezip yeni stil veriyoruz */
.gecisKartiIcerik .list-unstyled li > span[style*="color:green"] {
    background-color: #e6f6e6 !important;
    color: #0d5c0d !important; /* Koyu yeşil yazı */
    padding: 0.25rem 0.6rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* ========================================================================
   Geçiş Süresi Listesi ("Akış") Stilleri
   ======================================================================== */

/* Veri olmadığında gösterilecek mesaj kutusu */
.veri-yok-mesaji {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background-color: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}
.veri-yok-mesaji .ikon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.veri-yok-mesaji h5 {
    font-weight: 600;
    color: #343a40;
}
.veri-yok-mesaji p {
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* ========================================================================
   Geçiş Süresi Listesi ("Akış") - YENİ TASARIM (Üstte Süre+Meta, Altta Medya)
   ======================================================================== */

.gecis-akisi-listesi {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Kartlar arası boşluk */
}

/* Her bir kartın ana konteyneri */
.gecis-akisi-karti-yeni {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 15px -10px rgba(0, 80, 150, 0.08);
    padding: 1rem;
}

.gecis-akisi-karti-yeni:nth-child(even) {
    background-color: #f8f9fa; /* Bootstrap'in standart açık gri rengi */
    border-color: #dee2e6;
}

/* Kartın üst bölümü (süre ve metayı yan yana getirir) */
.kart-ust-bolum {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Sol taraftaki süre kutusu (stilleri önceki kodunuzdan alındı) */
.akisi-karti-zaman {
    color: #ffffff;
    border-radius: 10px;
    padding: 0.75rem;
    text-align: center;
    min-width: 80px;
    flex-shrink: 0;
}
.akisi-karti-zaman .sure {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}
.akisi-karti-zaman .birim {
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* RENK SINIFLARI (Bunlar hala geçerli) */
.akisi-karti-zaman.zaman-yesil { background: #00be00; }
.akisi-karti-zaman.zaman-turuncu { background: #fd7e14; }
.akisi-karti-zaman.zaman-kirmizi { background: #e60023; }

/* Sürenin sağındaki meta bilgisi (yön ve tarih) */
.akisi-karti-meta {
    display: flex;
    flex-direction: column; /* Yön ve tarihi alt alta sıralar */
    gap: 0.4rem; /* Aralarına boşluk koyar */
    flex-grow: 1; /* Kalan tüm alanı kaplar */
}

.meta-konum, .meta-tarih {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #6c757d;
}
.meta-konum {
    font-weight: 600;
    font-size: 1rem;
    color: #343a40;
}
.akisi-karti-meta i {
    margin-right: 0.5rem;
    color: #adb5bd;
}

/* Kartın altındaki medya bölümü */
.kart-medya-bolum {
    margin-top: 1rem; /* Üst bölümle arasına boşluk koyar */
}
.kart-medya-bolum img,
.kart-medya-bolum video {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* Medya onay bekliyorsa gösterilecek not */
.kart-medya-beklemede {
    background-color: #e9ecef;
    color: #6c757d;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.75rem;
    border-radius: 8px;
    margin-top: 1rem;
}


/* Açılır/Kapanır (Collapse) animasyonunu yumuşatma */
.collapse {
    transition: height 0.35s ease;
}

/* ========================================================================
   Kart Buton Grubu Stilleri (Hizalı ve Eşit)
   ======================================================================== */

.gecis-kart-buton-grubu {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Butonların yüksekliklerini eşitler */
    flex-wrap: wrap;
    gap: 0.75rem; /* Butonlar arasına boşluk */
    margin-top: 1.5rem;
}

/* Gruptaki TÜM butonlar için ortak stil */
.gecis-kart-buton-grubu .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border-radius: 50px !important; /* Hap şeklinde */
    border-width: 2px; /* Kenarlık kalınlığını artırıyoruz */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: all 0.25s ease-in-out;
}

/* Gruptaki butonların üzerine gelince ortak efekt */
.gecis-kart-buton-grubu .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Butonlara özel renkler */
.gecis-kart-buton-grubu .btn.btn-outline-secondary {
    color: #495057;
    border-color: #ced4da;
}
.gecis-kart-buton-grubu .btn.btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.gecis-kart-buton-grubu .btn.btn-success {
    background-color: #198754;
    border-color: #198754;
}
.gecis-kart-buton-grubu .btn.btn-success:hover {
    background-color: #146c43;
    border-color: #146c43;
}

/* ========================================================================
   ORTALAMA BEKLEME KARTI (ÜST BİLGİ) - RENKLENDİRME DÜZELTMESİ
   ======================================================================== */

/* Bu yeni kurallar, kartın en üstüne taşıdığımız "Ortalama Bekleme"
   alanını doğru şekilde hedef alır. */

.ortalama-bekleme-ust-alan {
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    /* Varsayılan stil (Veri Yok durumu için) */
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    /* Not: p-2, rounded, mb-3 sınıfları zaten PHP'den geliyor. */
}

/* Renkli durumlarda hem arka planı hem de metin rengini değiştiriyoruz */

.ortalama-bekleme-ust-alan.zaman-yesil {
    background-color: #00be00 !important;
    color: #ffffff !important;
    border-color: #00a000 !important;
}

.ortalama-bekleme-ust-alan.zaman-turuncu {
    background-color: #fd7e14 !important;
    color: #ffffff !important;
    border-color: #e06f10 !important;
}

.ortalama-bekleme-ust-alan.zaman-kirmizi {
    background-color: #e60023 !important;
    color: #ffffff !important;
    border-color: #c4001e !important;
}

.gecis-sayfalama .pagination {
    gap: 0.5rem;
}
.gecis-sayfalama .page-item .page-link {
    border-radius: 8px !important;
    color: var(--ast-global-color-0, #0170B9);
    border: 1px solid #dee2e6;
    font-weight: 600;
    transition: all 0.2s ease;
}
.gecis-sayfalama .page-item.active .page-link {
    background-color: var(--ast-global-color-0, #0170B9);
    border-color: var(--ast-global-color-0, #0170B9);
    color: #ffffff;
    box-shadow: 0 4px 10px -5px rgba(1, 112, 185, 0.6);
}
.gecis-sayfalama .page-item:not(.active) .page-link:hover {
    background-color: #f0f3f7;
}
.gecis-sayfalama .page-item.disabled .page-link {
    color: #adb5bd;
    background-color: #e9ecef;
}
/* ========================================================================
   YAKIN KAPILAR - RENKLİ SÜRE ETİKETİ (Koyu Arka Plan)
   ======================================================================== */

.yakinkapi-sure {
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    color: #ffffff; /* Yazı rengi her zaman beyaz */
    transition: transform 0.2s ease;
    line-height: 1.5;
}


/* Yeşil Durum */
.yakinkapi-sure.sure-durum-yesil {
    background-color: #00be00; /* Sizin Yeşil Kodunuz */
}

/* Turuncu Durum */
.yakinkapi-sure.sure-durum-turuncu {
    background-color: #fd7e14; /* Sizin Turuncu Kodunuz */
}

/* Kırmızı Durum */
.yakinkapi-sure.sure-durum-kirmizi {
    background-color: #e60023; /* Sizin Kırmızı Kodunuz */
}

/* Gri (Veri Yok) Durum */
.yakinkapi-sure.sure-durum-gri {
    background-color: #6c757d; /* Standart Gri */
}


/* ========================================================================
   Acil Durum Paneli - Profesyonel Tasarım
   ======================================================================== */

/* Ana Panel Konteyneri */
.gecis-form-container-acil {
    border-radius: 12px;
    /* Koyu ve ciddi bir kırmızı gradyan */
    background-image: linear-gradient(145deg, #c82333 0%, #a01d2a 100%);
    padding: 2rem !important;
    color: #ffffff;
    box-shadow: 0 10px 30px -10px rgba(190, 35, 52, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 1.5rem !important;
}

/* Panel içindeki başlık ve metinler */
.gecis-form-container-acil h4 {
    font-weight: 700;
    color: #ffffff !important;
}

.gecis-form-container-acil p.text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.95rem;
}

/* "Durum Tipi" Seçim Kutusu */
.gecis-form-container-acil .form-label {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9) !important;
}

.gecis-form-container-acil .form-select.acil-durum-select {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-weight: 500;
    /* Beyaz SVG ok ikonu */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.gecis-form-container-acil .form-select.acil-durum-select option {
    color: #000000; /* Açılan menüdeki yazıların siyah olması için */
}


/* Sonuçların Gösterildiği Paneller (en önemli kısım) */
.acil-sonuc-panel {
    background-color: rgba(0, 0, 0, 0.15); /* Hafif transparan bir arka plan */
    border-radius: 8px;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: fadeIn 0.5s ease-in-out; /* Yumuşak giriş animasyonu */
}

/* Sonuç panelinin başlığı (örn: Yakındaki Tamirciler) */
.acil-sonuc-baslik {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Sonuç panelinin içeriği (Liste veya Telefon Numarası) */
.acil-sonuc-panel .list-group {
    background-color: transparent !important;
    border-radius: 0;
}
.acil-sonuc-panel .list-group-item {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9);
    padding: 0.75rem 0;
}
.acil-sonuc-panel .list-group-item strong {
    color: #ffffff;
}

/* Telefon linkleri */
.acil-sonuc-panel a {
    color: #ffc107; /* Dikkat çekici sarı renk */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}
.acil-sonuc-panel a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Buton linkleri */
.acil-sonuc-panel .btn.btn-light {
    background-color: #ffffff;
    color: #c82333;
    font-weight: 600;
}

/* Panel için giriş animasyonu */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}