body {
    font-family: 'Poppins', sans-serif;
}

.bg-grey {
    --bs-bg-opacity: 1;
    background-color: #f1f1f1 !important;
}

/* ================= HERO / VİDEO ALANI STİLLERİ ================= */
#hero-section {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

#hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    /* Siyah ve %40 şeffaf */
}

/* Video üzerindeki metin ve butonların stilleri */
.hero-content {
    position: relative;
    z-index: 1;
}

.hero-content h1 {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    /* Metne gölge ekleyerek okunurluğu artırır */
}

/* ================= NAVBAR STİLLERİ ================= */
.navbar {
    transition: background-color 0.4s ease-in-out, padding 0.4s ease-in-out;
}

/* Scroll edilmemiş, şeffaf hali */
.navbar.fixed-top {
    background-color: transparent;
    padding-top: 15px;
    padding-bottom: 15px;
}

/* JavaScript ile eklenecek 'scrolled' class'ının stili */
.navbar.fixed-top.scrolled {
    background-color: rgba(0, 0, 0, 0.85);
    /* Hafif şeffaf siyah */
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
}

.nav-link {
    font-weight: 500;
    margin: 0 10px;
}

.btn-outline-light.rounded-pill {
    padding: 8px 14px;
}


/* ================= REZERVASYON BARI STİLLERİ ================= */
.reservation-bar {
    background-color: rgba(255, 255, 255, 0.308);
    /* Yarı şeffaf beyaz */
    backdrop-filter: blur(10px);
    /* Arka planı bulanıklaştırma (Modern tarayıcılar için) */
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Form etiketlerinin rengini koyu yapalım */
.reservation-bar .form-label {
    color: #333;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Kişi sayısı +/- butonları için hizalama */
.reservation-bar .input-group {
    flex-wrap: nowrap;
}

/* Mobil görünümde dikey boşluk ekleyelim */
@media (max-width: 991.98px) {
    .reservation-bar {
        margin-top: 2rem;
        /* Üstteki yazı ve butonla arasına boşluk koy */
    }
}

/* ================= DESTİNASYON BÖLÜMÜ STİLLERİ ================= */

.destination-grid {
    column-count: 3;
    /* Büyük ekranlarda 3 sütun */
    column-gap: 1.5rem;
    /* Sütunlar arası boşluk */
}

/* Tekil Kartlar */
.destination-card {
    position: relative;
    margin-bottom: 0.5rem;
    /* Kartlar altı boşluk */
    border-radius: 1rem;
    /* Oval kenarlar */
    overflow: hidden;
    /* Taşan kısımları (gradient, resim) gizle */
    display: inline-block;
    /* Sütun yapısının doğru çalışması için gerekli */
    width: 100%;
    color: white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;

    /* Arka plan resim ayarları */
    background-size: cover;
    background-position: center;
    min-height: 200px;
    /* Kartların minimum yüksekliği */
}

/* Kartın üzerine gelince hafif büyüme efekti */
.destination-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

/* Yazıların okunaklı olması için alttan üste gradient efekti */
.destination-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.8) 100%);
}

/* Kartın içeriği (Yazılar ve İkon) */
.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    display: flex;
    align-items: flex-end;
    /* İçerikleri en alta yasla */
    justify-content: space-between;
    /* Yazı sola, ikon sağa */
}

.card-title {
    font-weight: bold;
}

.card-subtitle {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Sağ alttaki daire ikon */
.card-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
    /* Küçülmesini engelle */
}

.card-icon:hover {
    background-color: rgba(255, 255, 255, 0.4);
}


/* Tablet ve Mobil Cihazlar için Sütun Sayısını Ayarlama */
@media (max-width: 991.98px) {
    .destination-grid {
        column-count: 2;
        /* Tabletlerde 2 sütun */
    }
}

@media (max-width: 767.98px) {
    .destination-grid {
        column-count: 1;
        /* Mobilde tek sütun */
    }
}

/* ================= YENİ OTEL YERLEŞİMİ STİLLERİ ================= */

/* Tekil Kartlar */
.destination-card {
    position: relative;
    margin-bottom: 0;
    /* Artık g-4 ile boşluk veriyoruz */
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    /* İçeriğin dikeyde hizalanması için flex kullanmak daha iyi */
    width: 100%;
    color: white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    background-size: cover;
    background-position: center;

    /* GÜNCELLENEN / EKLENEN KISIM */
    min-height: 400px;
    /* Tüm kartlar için standart bir minimum yükseklik */
    height: 100%;
    /* Kartın bulunduğu sütunun tamamını kaplamasını sağlar */
}

.card-content {
    /* ... bu kısım aynı kalabilir ... */
    margin-top: auto;
    /* Yazı ve ikonu kartın en altına iter */
}

/* Mobil Cihazlar için Yerleşim Ayarı */
@media (max-width: 991.98px) {
    .hotel-layout-grid {
        flex-direction: column;
        /* Sütunları alt alta getir */
    }

    .card-tall,
    .card-small,
    .card-wide {
        height: 350px;
    }
}

/* ================= FOOTER STİLLERİ ================= */
footer a.text-muted {
    transition: color 0.3s ease;
}

footer a.text-muted:hover {
    color: #0d6efd !important;
    /* Bootstrap'in primary rengi */
}

/* ================= YUKARI ÇIK BUTONU STİLLERİ ================= */
#backToTopBtn {
    position: fixed;
    /* Sayfaya göre sabit pozisyon */
    bottom: 20px;
    right: 20px;
    display: none;
    /* Başlangıçta gizli */
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    z-index: 1000;
    /* Diğer elementlerin üzerinde kalması için */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ================= REZERVASYON SAYFASI STİLLERİ ================= */

/* Oda kartının ana kapsayıcısı */
.room-card {
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    overflow: hidden;
    /* Kenar ovalliğinin resimlere uygulanması için */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

.room-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Oda kartındaki carousel resimleri */
.room-card .carousel-inner img {
    aspect-ratio: 4/3;
    /* Resimlerin oranını koru */
    object-fit: cover;
}

/* Teklif kutuları */
.offers-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Sağ sütunun tamamını kapla */
}

.offer-box {
    padding: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.offer-box:last-child {
    border-bottom: none;
    /* Son teklifin alt çizgisini kaldır */
}

/* Tekliflerin fiyatlandırma ve buton alanı */
.offer-pricing {
    flex-shrink: 0;
    /* Küçülmesini engelle */
    margin-left: 1rem;
    width: 200px;
    /* Sabit bir genişlik vererek hizalamayı kolaylaştır */
}

/* Mobil görünüm için */
@media (max-width: 767.98px) {
    .offer-box {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .offer-pricing {
        margin-left: 0;
        margin-top: 1rem;
        width: 100%;
        text-align: left !important;
    }
}

.page-banner {
    position: relative;
    padding: 4rem 0;
    /* İçeriğe dikeyde boşluk verir */
    height: 40vh;
    min-height: 300px;
    background-image: url('https://images.pexels.com/photos/2034335/pexels-photo-2034335.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
    background-size: cover;
    background-position: center 70%;
    /* Arka plan resmini dikeyde ortala */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding-bottom: 100px;
}

/* Banner üzerine karartma efekti (overlay) */
.page-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
}

/* Banner içindeki içeriğin overlay'in üzerinde kalmasını sağla */
.page-banner .container {
    position: relative;
    /* z-index'in çalışması için */
    z-index: 1;
}

/* Banner başlığının daha okunaklı olması için gölge */
.page-banner h1 {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

/* ================= ÖDEME SAYFASI (YENİ DÜZEN) STİLLERİ ================= */

/* Tüm kartların başlıkları için ortak stil */
.card-header-dark {
    background-color: #343a40;
    /* Koyu gri (Bootstrap'in bg-dark rengi) */
    color: white;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* Formlardaki zorunlu alanları belirten yıldız için */
.form-label .text-danger {
    font-size: 0.9rem;
    vertical-align: super;
}

/* Sabit header'ın içeriğin üstünü kapatmasını engellemek için */
body.body-padding-top {
    padding-top: 102px;
}

/* Tüm kartlar için ortak temel stil */
.service-card {
    border-radius: 1.25rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
    border: none;
    aspect-ratio: 16 / 9;
    /* Kartların en-boy oranını 16:9 (yatay) olarak ayarla */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Sadece resim içeren kartlar */
.image-card {
    overflow: hidden;
    /* Resmin oval kenarlardan taşmasını engeller */
}

.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Resmin en-boy oranını koruyarak kartı doldurmasını sağlar */
}

/* İkon ve yazı içeren kartlar */
.icon-card {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Filigran için gerekli */
    overflow: hidden;
    /* Filigran için gerekli */
}

/* İkonu saran renkli daire */
.icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f39c124f;
    /* Bootstrap primary renginin şeffaf hali */
    color: #e67e22;
    /* Bootstrap primary rengi */
    padding: 20px;
}

/* İkonlu kartların arkasındaki filigran (watermark) efekti */
.icon-card::after {
    content: '\f57d';
    /* Font Awesome pusula ikonu */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: -20px;
    bottom: -30px;
    font-size: 100px;
    color: #000;
    opacity: 0.04;
    transform: rotate(-15deg);
    z-index: 0;
}

/* Kart içeriğinin filigranın üzerinde kalması için */
.icon-card>* {
    position: relative;
    z-index: 1;
}

.newsletter-cta {
    background-color: #ffffff;
    overflow: hidden;
    /* Resmin oval kenarlardan taşmasını engellemek için */
}

/* Sol taraftaki resim alanı */
.newsletter-image {
    background-image: url('https://images.pexels.com/photos/1268855/pexels-photo-1268855.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
    background-size: cover;
    background-position: center;
    min-height: 400px;
    /* Mobil görünümde yüksekliğinin olmasını sağlar */
}


/* Mobil görünümde hizalama için */
@media (max-width: 991.98px) {
    .newsletter-cta {
        text-align: center;
    }
}

/* Hamburger ikonunun çerçevesini ve odaklanma gölgesini kaldır */
.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* Offcanvas menüsündeki linkleri daha belirgin yapalım */
.offcanvas .nav-link {
    font-size: 1.1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.room-list-card {
    border: 1px solid #e0e0e0;
    border-radius: 1.25rem;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 320px;
}

.room-list-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Oda kartındaki resim */
.room-list-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Resmin en-boy oranını koruyarak alanı kaplamasını sağlar */
}

/* Oda özellikleri (Wi-Fi, Yatak vb.) */
.amenity-item {
    font-size: 0.9rem;
}

.amenity-item i {
    color: #e67e22;
    /* Ana tema rengimiz */
    font-size: 1.1rem;
    width: 28px;
    /* İkonların hizalı durması için sabit genişlik */
    text-align: center;
    margin-right: 0.75rem;
}

/* Fiyatlandırma bölümü */
.room-price .price {
    font-size: 1.75rem;
    font-weight: 700;
    color: #e67e22
        /* Ana tema rengimiz */
}

.room-price .period {
    font-size: 0.9rem;
    color: #6c757d;
    /* Muted text rengi */
}

.room-list-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Resmin en-boy oranını koruyarak alanı kaplamasını sağlar */
}

.offer-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-top: 1px solid #f0f0f0;
}

.offer-box:first-child {
    border-top: none;
    padding-top: 0.5rem;

}

/* Teklifin sol tarafı (başlık, açıklama, ikonlar) */
.offer-details {
    flex: 2;
    min-width: 250px;
}

/* Teklifin sağ tarafı (fiyat ve butonlar) */
.offer-action {
    flex: 1;
    /* Alanın geri kalanını kaplasın */
    min-width: 180px;
    text-align: end;
    padding-left: 1rem;
}

/* Mobil görünüm için (768px altı) */
@media (max-width: 767.98px) {
    .offer-action {
        flex-basis: 100%;
        /* Tam genişlik kaplasın */
        text-align: left;
        margin-top: 1rem;
        padding-left: 0;
    }

    .offer-action .room-price {
        text-align: left !important;
    }
}

/* ================= MODERN REZERVASYON BARI STİLLERİ ================= */
.modern-reservation-bar {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 2rem;
    /* Belirgin oval kenarlar */
    padding: 1.5rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 10;
}

.reservation-panel {
    border: 1px solid #e67e22;
    background-color: unset;
    border-radius: 1.25rem;
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.reservation-panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.panel-label {
    display: block;
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 0.25rem;
}

.panel-value {
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.panel-subtitle {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.25rem;
}

.panel-icon {
    font-size: 1.5rem;
    color: #d35400;
    /* Renge uygun bir ikon rengi */
}

/* Arama Butonu (Kutu İçi Versiyon) */
.search-now-btn {
    border: none;
    color: white;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.search-now-btn:hover {
    transform: translateY(-2px);
}

/* Modal içeriği için stil */
.modal-xl {
    max-width: 900px;
}

/* ================= POPOVER VE TAKVİM STİLLERİ ================= */

/* Popover'ın genel görünümü */
.popover {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    min-width: 320px;
}

.popover-header {
    background-color: transparent;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 600;
}

.popover-body {
    padding: 1rem;
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before {
    border-bottom-color: #fff;
}

/* Misafir Sayacı Popover'ı */
.btn-counter {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #e67e2245;
    color: #e67e22;
    font-weight: bold;
    border: none;
    transition: background-color 0.2s ease;
}

.btn-counter:hover {
    background-color: #b2ebf2;
}

/* Flatpickr Takvimini Özelleştirme */
.flatpickr-calendar {
    box-shadow: none !important;
}

.flatpickr-months .flatpickr-month {
    color: #009688;
    /* Ana Renk */
    fill: #009688;
}

.flatpickr-weekdays {
    background: transparent;
    width: 287px;
}
.flatpickr-calendar.inline{
    right: 5px;
}

span.flatpickr-weekday {
    color: #555;
    font-weight: 600;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #009688;
    /* Ana Renk */
    border-color: #009688;
}

.flatpickr-day.inRange {
    background: rgba(0, 150, 136, 0.1);
    border-color: transparent;
    box-shadow: -5px 0 0 rgba(0, 150, 136, 0.1), 5px 0 0 rgba(0, 150, 136, 0.1);
}

.flatpickr-day.today {
    border-color: #ff4081;
    /* Vurgu Rengi (örn: kırmızı) */
}

.panel-content {
    text-align: left;
}

.dayContainer {
    width: 287px;
    max-width: 287px;
    min-width: 287px;
}

/* ================= MODERN REZERVASYON BARI (TAB'LI YAPI) STİLLERİ ================= */

/* Tab Butonları */
.modern-reservation-bar .nav-pills .nav-link {
    background-color: transparent;
    color: #555;
    font-weight: 600;
    border-radius: 50rem;
    padding: 0.5rem 1.5rem;
    border: 2px solid transparent;
}

.modern-reservation-bar .nav-pills .nav-link.active {
    background-color: #e67e2245;
    color: #d35400;
    border-color: #d35400;
}

/* Otel seçim popover'ındaki liste için */
.hotel-select-list.list-group-flush .list-group-item {
    border: none;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
}

.hotel-select-list .list-group-item:hover {
    background-color: #f8f9fa;
    /* Hafif hover efekti */
}


.results-search-area {
    background-color: transparent !important;
    /* Arkaplanı şeffaf yap */
    padding-top: 0;
    padding-bottom: 2rem;
}

.results-search-area .modern-reservation-bar {
    background-color: #ffffff;
    border-radius: 2rem;
    padding: 1.5rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    margin-top: -100px;
    position: relative;
    z-index: 10;
}

/* Arama barının beyaz kartı */
.search-card {
    background-color: #ffffff;
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    /* Bu, kartın banner'ın hafifçe üzerine binmesini sağlar */
    margin-top: -80px;
    position: relative;
    z-index: 10;
}

/* Arama kartı içindeki etiketler (label) */
.search-card .form-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #555;
}

/* Arama kartı içindeki input alanları */
.search-card .form-control {
    border-radius: 0.5rem;
    border: 1px solid #ced4da;
}

.search-card .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

/* ================= REZERVASYON SAYFASI ARAMA BARI STİLLERİ ================= */

/* Reservation sayfasındaki modern barın genel alanı */
.results-search-area {
    background-color: #f8f9fa;
    padding-bottom: 2rem;
    padding-top: 1rem;
}

/* Index'teki bar stilini burada da kullan, ama farklı margin-top ile */
.results-search-area .modern-reservation-bar {
    background-color: #ffffff;
    margin-top: -80px;
    position: relative;
    z-index: 10;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 2rem;
}

/* İçindeki panelleri özelleştir */
.results-search-area .reservation-panel {
    background-color: unset;
    border: 1px solid #e67e22;
}

/* "Tekrar Ara" butonu için */
.search-now-btn-results {
    border-radius: 50rem;
    padding: 0.75rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    background-color: #f39c12;
    border: none;
    margin-top: 1.5rem;
    /* Paneller ile arasında boşluk */
}

.search-now-btn-results:hover {
    background-color: #e67e22;
    transform: translateY(-2px);
}

/* Rezervasyon sayfasındaki arama barı içindeki TAB Butonları */
.results-search-area .modern-reservation-bar .nav-pills .nav-link {
    background-color: transparent;
    color: #555;
    font-weight: 600;
    border-radius: 50rem;
    padding: 0.5rem 1.5rem;
    border: 2px solid #e67e2245;
    /* Panel rengiyle uyumlu border */
    transition: all 0.3s ease;
}

.results-search-area .modern-reservation-bar .nav-pills .nav-link.active {
    background-color: #e67e2245;
    /* Panel rengiyle aynı */
    color: #d35400;
    /* İkon rengiyle aynı */
    border-color: #d35400;
}


/* ================= UÇUŞ LİSTELEME BÖLÜMÜ (GELİŞMİŞ) ================= */

.flight-list-container {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    max-height: 600px;
    overflow-y: auto;
}

.flight-list-container::-webkit-scrollbar {
    width: 6px;
}

.flight-list-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.flight-list-header {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

/* KART YAPISI */
.flight-card {
    display: block;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    cursor: pointer;
    overflow: hidden;
    /* Bagaj footer'ı için */
    transition: all 0.2s ease;
}

.flight-card:hover {
    border-color: #ced4da;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.flight-card.selected {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.02);
    box-shadow: 0 0 0 1px var(--bs-primary);
}

/* KART İÇERİĞİ */
.card-main-content {
    display: flex;
    align-items: center;
    padding: 1rem;
    gap: 0.5rem;
}

/* Havayolu */
.airline-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.airline-info img {
    width: 100%;
    object-fit: contain;
    margin-bottom: 3px;
}

/* Uçuş Yolu Görselleştirmesi */
.flight-path-visual {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
}

.time-loc {
    text-align: center;
}

.time-loc strong {
    display: block;
    font-size: 1.1rem;
    line-height: 1;
}

.time-loc span {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Çizgi ve İkonlar */
.path-line {
    flex-grow: 1;
    position: relative;
    text-align: center;
    margin: 0 10px;
    height: 20px;
    /* Rozet için alan */
    display: flex;
    align-items: center;
    justify-content: center;
}

.path-line .line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #dee2e6;
    z-index: 1;
}

.path-line .plane-icon {
    position: absolute;
    top: 50%;
    right: 0;
    /* Uçak en sağda */
    transform: translateY(-50%);
    color: #adb5bd;
    font-size: 0.8rem;
    z-index: 2;
    background: white;
    padding-left: 3px;
}

.path-line .flight-badge {
    position: absolute;
    top: -12px;
    /* Çizginin üstüne */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 3;
    white-space: nowrap;
}

/* Aktarma Noktası (Stop Dot) */
.stop-dot {
    width: 8px;
    height: 8px;
    background-color: #fff;
    border: 2px solid #ffc107;
    /* Sarı renk */
    border-radius: 50%;
    position: relative;
    z-index: 2;
}

/* Süre ve Fiyat */
.flight-meta {
    text-align: end;
    min-width: 70px;
}

.flight-meta .duration {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 2px;
}

.flight-meta .flight-price strong {
    color: #f39c12;
    font-size: 1.1rem;
}

.flight-meta .flight-price del {
    font-size: 0.7rem;
    color: #adb5bd;
    display: block;
}

/* YENİ: Bagaj Alt Bilgisi */
.card-baggage-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.std-baggage {
    color: #495057;
    font-weight: 500;
}

.extra-baggage .form-check {
    margin-bottom: 0;
    min-height: auto;
}

.extra-baggage .form-check-input {
    cursor: pointer;
    margin-top: 0.1em;
}

.extra-baggage label {
    cursor: pointer;
    color: #6c757d;
}

/* Switch açıkken yazı rengi */
.extra-baggage .form-check-input:checked~label {
    color: var(--bs-primary);
    font-weight: 600;
}

/* ================= UÇUŞ DETAY GÜNCELLEMELERİ ================= */

/* Aktarma Noktası ve Detayları */
.stop-dot {
    width: 10px;
    height: 10px;
    background-color: #fff;
    border: 2px solid #ffc107;
    border-radius: 50%;
    position: absolute;
    /* Çizgi üzerinde konumlandırma */
    left: 50%;
    /* Ortala */
    top: 50%;
    /* Ortala */
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* Noktanın altındaki yazı alanı */
.layover-info {
    position: absolute;
    top: 12px;
    /* Noktanın hemen altı */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    /* Yazının alt satıra geçmesini engelle */
    line-height: 1.1;
}

.layover-info .code {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #495057;
}

.layover-info .time {
    display: block;
    font-size: 0.65rem;
    color: #868e96;
}

/* Yeni Bagaj Alanı Düzeni */
.card-baggage-footer {
    /* Önceki stilleri koru, flex özelliklerini güncelle */
    padding: 0.6rem 1rem;
}

.extra-baggage-options {
    display: flex;
    align-items: center;
}

.extra-baggage-options .form-check {
    margin-bottom: 0;
    min-height: auto;
    display: flex;
    align-items: center;
}

.extra-baggage-options .form-check-input {
    margin-top: 0;
    margin-right: 0.4rem;
    cursor: pointer;
}

.extra-baggage-options label {
    cursor: pointer;
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
}

/* Switch seçildiğinde yazı rengini koyulaştır */
.extra-baggage-options .form-check-input:checked~label {
    color: var(--bs-primary);
    font-weight: 600;
}

/* ================= GÜNLÜK FİYAT LİSTESİ STİLLERİ ================= */

.daily-price-toggle {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: end;
    margin-top: 0.75rem;
    color: #e67e22;
    text-decoration: none;
    transition: color 0.2s ease;
}

.daily-price-toggle:hover {
    color: var(--bs-primary-dark);
}

.daily-price-toggle .fa-chevron-down {
    transition: transform 0.3s ease;
}

.daily-price-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* Fiyat kartlarını içeren yatayda kaydırılabilir alan */
.daily-price-scroll-wrapper {
    overflow-x: auto;
    /* Yatayda scroll oluşturur */
    padding: 1rem 0.25rem;
    -webkit-overflow-scrolling: touch;
    /* Mobilde akıcı kaydırma */
}

.daily-price-flex-container {
    display: flex;
    gap: 0.5rem;
    /* Kartlar arası boşluk */
    width: max-content;
}

.daily-price-scroll-wrapper::-webkit-scrollbar {
    height: 6px;
}

.daily-price-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.daily-price-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.daily-price-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

.daily-price-container::-webkit-scrollbar {
    height: 6px;
}

.daily-price-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.daily-price-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.daily-price-container::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}


/* Her bir günün fiyat kartı */
.daily-price-item {
    flex: 0 0 100px;
    /* Kartların genişliğini sabitler */
    padding: 0.75rem;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
}

.daily-price-item .day-name {
    font-weight: 600;
    color: #6c757d;
}

.daily-price-item .day-date {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.daily-price-item .price-old {
    text-decoration: line-through;
    color: #6c757d;
    font-size: 0.75rem;
}

.daily-price-item .price-current {
    font-weight: 700;
    color: #e67e22;
}

.daily-price-item.is-full {
    background-color: #f8f9fa;
    color: #6c757d;
}

.daily-price-item.is-full .price-current {
    color: #6c757d;
    font-weight: 500;
}

.scroll-collapse {
    width: 100%;
}

.offer-box-item {
    width: 100%;
}

.amenities-container {
    width: 70%;
}

.flatpickr-current-month {
    color: #f39c12;
}

.btn-primary {
    background-color: #f39c12;
    border: unset;
}

.btn-primary:hover {
    background-color: #e67e22;
}

.text-primary {
    color: #f39c12 !important;
}

.btn-outline-primary {
    border-color: #f39c12;
    color: #e67e22;
}

.btn-outline-primary:hover {
    background-color: #e67e22;
    border-color: #e67e22;
}

/* ================= EK HİZMETLER (AKORDİYON) STİLLERİ ================= */

.service-toggle-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: white;
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    color: #495057;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Hover ve Açık Durumda Buton Rengi */
.service-toggle-btn:hover,
.service-toggle-btn[aria-expanded="true"] {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* Ok İkonu Animasyonu */
.service-toggle-btn .arrow-icon {
    transition: transform 0.3s ease;
}

/* Buton tıklandığında oku döndür */
.service-toggle-btn[aria-expanded="true"] .arrow-icon {
    transform: rotate(180deg);
}

/* Ekleme Butonu (Yuvarlak) */
.btn-add-service {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================= TRANSFER VE SPA GÜNCELLEMELERİ ================= */

/* Transfer seçenekleri satırları */
.transfer-option-row {
    padding: 0.25rem 0;
}

/* SPA Tarih/Saat Seçim Alanı */
.spa-datetime-selector {
    background-color: #f8f9fa;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
}

/* Çok küçük etiketler için */
.x-small {
    font-size: 0.7rem;
}

.spa-datetime-selector .form-control-sm {
    font-size: 0.8rem;
    border-color: #ced4da;
}

.spa-datetime-selector .form-control-sm:focus {
    border-color: var(--bs-primary);
    box-shadow: none;
}

/* ================= BANKA SEÇİMİ STİLLERİ ================= */

.bank-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    /* Kartları yan yana dizer */
    gap: 0.8rem;
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
}

.bank-option {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    /* Bootstrap default'unu ezmek için */
}

.bank-option .form-check-input {
    margin-top: 0;
    margin-right: 0.5rem;
    cursor: pointer;
}

.bank-option label {
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}

/* ================= LOGIN / SIGNUP SAYFASI STİLLERİ ================= */

/* Sol Taraftaki Resim Bölümü */
.login-image-section {
    background-image: url('https://images.pexels.com/photos/258154/pexels-photo-258154.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    position: relative;
}

/* Resim üzerindeki karartma */
.login-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 150, 136, 0.8), rgba(0, 0, 0, 0.6));
}

/* Cam efekti (Glassmorphism) rozet */
.glass-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 500;
}

/* Form Kapsayıcı */
.login-form-wrapper {
    width: 100%;
    max-width: 500px;
    /* Formun çok genişlemesini engelle */
}

/* Tab Butonları (Pills) */
#authTab .nav-link {
    color: #6c757d;
    font-weight: 600;
    border-radius: 50rem;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

#authTab .nav-link.active {
    background-color: #f39c12;
    /* Teal rengimiz */
    color: white;
    box-shadow: 0 0 0 4px rgba(150, 67, 0, 0.1);

}

/* Input Alanları (Floating Labels) */
.form-floating>.form-control {
    border-radius: 0.75rem;
    border: 1px solid #e9ecef;
    background-color: #f8f9fa;
}

.form-floating>.form-control:focus {
    background-color: #fff;
    border-color: #f39c12;
    box-shadow: 0 0 0 4px rgba(150, 67, 0, 0.1);
}

/* Şifre Göster/Gizle İkonu */
.password-toggle {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6c757d;
    z-index: 10;
}

/* Mobil Uyumluluk */
@media (max-width: 991.98px) {
    .login-image-section {
        display: none;
        /* Mobilde resmi gizle, sadece form kalsın */
    }

    .login-form-wrapper {
        padding-top: 2rem;
    }
}

/* ================= PROFİL SAYFASI STİLLERİ ================= */

/* Sol Üstteki Profil Kartı (Gradient Arkaplan) */
.profile-card-header {
    background: linear-gradient(135deg, #009688, #00796b);
    border-radius: 1rem;
}

/* Avatar Alanı */
.avatar-wrapper {
    position: relative;
    display: inline-block;
}

/* Gold Üye Rozeti */
.status-badge {
    position: absolute;
    bottom: 0;
    right: -10px;
    background-color: #ffc107;
    color: #333;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 50rem;
    border: 2px solid #fff;
}

/* Sol Menü Linkleri */
.list-group-item {
    padding: 1rem 1.25rem;
    font-weight: 500;
    color: #555;
    transition: all 0.2s ease;
}

.list-group-item:hover {
    background-color: #f8f9fa;
    color: #f39c12;
    padding-left: 1.5rem;
    /* Hover'da hafif sağa kayma efekti */
}

.list-group-item.active {
    background-color: #e0f2f1;
    color: #f39c12;
    font-weight: 700;
    border-left: 4px solid #f39c12 !important;
}

/* Form Alanları */
.form-control:read-only {
    background-color: #f8f9fa;
    opacity: 0.8;
    cursor: not-allowed;
}

/* Çok küçük yazı (progressbar altı için) */
.x-small {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* ================= REZERVASYONLARIM SAYFASI ================= */

/* Rezervasyon Kartı */
.reservation-card {
    border-left: 5px solid #f39c12 !important;
    /* Sol tarafa renkli çizgi */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.reservation-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Tab Butonları */
#pills-tab .nav-link {
    color: #6c757d;
    font-weight: 600;
}

#pills-tab .nav-link.active {
    background-color: #f39c12;
    color: white;
}

/* Resim */
.object-fit-cover {
    object-fit: cover;
}

/* ================= REZERVASYON BARI SIKIŞIKLIK DÜZELTMESİ ================= */

/* 1. Panellerin iç boşluğunu azalt (Daha fazla alan kalsın) */
.modern-reservation-bar .reservation-panel {
    padding: 0.75rem 0.8rem;
    /* Eski değer: 1.25rem idi */
    min-height: 85px;
    /* Yüksekliği sabitle */
    align-items: center;
    /* İçeriği dikey ortala */
}

/* 2. Ana metin boyutunu biraz küçült ve taşmayı engelle */
.modern-reservation-bar .panel-value {
    font-size: 0.95rem;
    /* Eski değer: 1.25rem idi */
    white-space: nowrap;
    /* Alt satıra geçmesin */
    overflow: hidden;
    text-overflow: ellipsis;
    /* Sığmazsa ... koysun */
    max-width: 100%;
}

/* 3. Etiket ve alt başlıkları küçült */
.modern-reservation-bar .panel-label {
    font-size: 0.7rem;
    margin-bottom: 0.1rem;
}

.modern-reservation-bar .panel-subtitle {
    font-size: 0.7rem;
    display: block;
    /* Her zaman görünsün */
}

/* 4. İkonu biraz küçült ve hizala */
.modern-reservation-bar .panel-icon {
    font-size: 1.1rem;
    /* Eski değer: 1.5rem idi */
    margin-left: 8px;
    flex-shrink: 0;
    /* İkonun sıkışmasını engelle */
}

/* 5. Mobilde ve küçük laptoplarda taşmayı önlemek için içerik genişliği */
.modern-reservation-bar .panel-content {
    flex-grow: 1;
    min-width: 0;
    /* Flexbox içinde text-overflow çalışması için şart */
}