/* =====================================================
   Gofly Breadcrumb CSS  –  tüm sayfaların üst başlığı
   -----------------------------------------------------
   Aynı görünüm site genelinde 5 ayrı yerde, 5 farklı
   ölçüyle tekrarlanıyordu:
     .breadcrumb-section      → gofly-assets/css/style.css + gofly-contact.css
     .blog-breadcrumb         → gofly-blog.css
     .hotels-breadcrumb       → gofly-hotels.css
     .destinations-breadcrumb → gofly-destinations.css
     .tours-page-breadcrumb   → tours/index.blade.php içinde <style>
   Yükseklikler (320/360/130px padding), başlık boyutları
   (48/50/56px) ve ayraçlar (nokta / "/" / "›") sayfadan
   sayfaya değişiyordu. Hepsi burada tek kaynağa alındı;
   layout'ta global yüklendiği için her sayfa aynı görünür.

   Ortak yapı (her varyantta aynı):
     .X > .container > .banner-content > h1 + ul.breadcrumb-list > li > a

   NOT: .breadcrumb-section.two (tur rezervasyon sayfası)
   farklı bir markup kullanıyor, bilerek dışarıda bırakıldı.
   ===================================================== */

:root {
    --bc-height: clamp(230px, 25vw, 330px);
    /* Görsel yüklenemezse başlık beyaz üstüne beyaz kalmasın diye zemin rengi */
    --bc-fallback-bg: #0c3145;
}

.breadcrumb-section:not(.two),
.blog-breadcrumb,
.hotels-breadcrumb,
.destinations-breadcrumb {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: var(--bc-height);
    padding: clamp(46px, 6vw, 78px) 0;
    background-color: var(--bc-fallback-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Alta doğru koyulaşan yumuşak perde: başlık her görselde okunur kalır,
   üst taraf açık kalınca kapak fotoğrafı da görünmeye devam eder. */
.breadcrumb-section:not(.two)::before,
.blog-breadcrumb::before,
.hotels-breadcrumb::before,
.destinations-breadcrumb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        /* Başlığın arkasında yumuşak, kenarlara doğru kaybolan bir yoğunluk */
        radial-gradient(74% 86% at 50% 50%, rgba(4, 38, 56, .34) 0%, rgba(4, 38, 56, 0) 72%),
        /* Üstte menüyü, altta içerik geçişini taşıyan ince perde */
        linear-gradient(180deg, rgba(4, 38, 56, .24) 0%, rgba(4, 38, 56, .05) 44%, rgba(4, 38, 56, .32) 100%);
}

/* Saydam başlık açıkken (body.has-overlay-header) topbar + header bu kapağın
   üzerine biniyor. Aynı miktarda üst boşluk ve yükseklik eklenmezse başlık
   menünün altında kalıyor. --overlay-h: css/gofly-layout.css → SAYDAM BAŞLIK,
   kesin değeri app.blade.php'deki syncHeights() ölçüp yazar. */
body.has-overlay-header .breadcrumb-section:not(.two),
body.has-overlay-header .blog-breadcrumb,
body.has-overlay-header .hotels-breadcrumb,
body.has-overlay-header .destinations-breadcrumb {
    min-height: calc(var(--bc-height) + var(--overlay-h));
    padding-top: calc(clamp(46px, 6vw, 78px) + var(--overlay-h));
}

.breadcrumb-section:not(.two) .container,
.blog-breadcrumb .container,
.hotels-breadcrumb .container,
.destinations-breadcrumb .container {
    position: relative;
    z-index: 1;
}

.breadcrumb-section:not(.two) .banner-content,
.blog-breadcrumb .banner-content,
.hotels-breadcrumb .banner-content,
.destinations-breadcrumb .banner-content {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

/* ── Başlık ── */
.breadcrumb-section:not(.two) .banner-content h1,
.blog-breadcrumb .banner-content h1,
.hotels-breadcrumb .banner-content h1,
.destinations-breadcrumb .banner-content h1 {
    margin: 0 0 20px;
    color: #fff;
    font-family: var(--gofly-font-primary, 'Poppins', sans-serif);
    font-weight: 700;
    font-size: clamp(27px, 4.2vw, 50px);
    line-height: 1.15;
    letter-spacing: -.02em;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(13, 27, 42, .35);
}

/* Başlık altı ince vurgu çizgisi */
.breadcrumb-section:not(.two) .banner-content h1::after,
.blog-breadcrumb .banner-content h1::after,
.hotels-breadcrumb .banner-content h1::after,
.destinations-breadcrumb .banner-content h1::after {
    content: "";
    display: block;
    width: 54px;
    height: 3px;
    margin: 18px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gofly-primary-light, #6cb944), var(--gofly-primary, #4f9731));
}

/* ── Yol haritası: cam efektli tek parça hap ── */
.breadcrumb-section:not(.two) .banner-content .breadcrumb-list,
.blog-breadcrumb .banner-content .breadcrumb-list,
.hotels-breadcrumb .banner-content .breadcrumb-list,
.destinations-breadcrumb .banner-content .breadcrumb-list {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px 0;
    margin: 0;
    padding: 9px 20px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50px;
    background-color: rgba(255, 255, 255, .13);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 24px rgba(13, 27, 42, .18);
}

.breadcrumb-section:not(.two) .banner-content .breadcrumb-list li,
.blog-breadcrumb .banner-content .breadcrumb-list li,
.hotels-breadcrumb .banner-content .breadcrumb-list li,
.destinations-breadcrumb .banner-content .breadcrumb-list li {
    display: inline-flex;
    align-items: center;
    position: static;
    padding: 0;
    color: #fff;
    font-family: var(--gofly-font-secondary, 'Roboto', sans-serif);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
}

.breadcrumb-section:not(.two) .banner-content .breadcrumb-list li a,
.blog-breadcrumb .banner-content .breadcrumb-list li a,
.hotels-breadcrumb .banner-content .breadcrumb-list li a,
.destinations-breadcrumb .banner-content .breadcrumb-list li a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color .25s ease;
}

.breadcrumb-section:not(.two) .banner-content .breadcrumb-list li a:hover,
.blog-breadcrumb .banner-content .breadcrumb-list li a:hover,
.hotels-breadcrumb .banner-content .breadcrumb-list li a:hover,
.destinations-breadcrumb .banner-content .breadcrumb-list li a:hover {
    color: #fff;
}

/* Ayraç: ince chevron (eski nokta / "/" yerine) */
.breadcrumb-section:not(.two) .banner-content .breadcrumb-list li::after,
.blog-breadcrumb .banner-content .breadcrumb-list li::after,
.hotels-breadcrumb .banner-content .breadcrumb-list li::after,
.destinations-breadcrumb .banner-content .breadcrumb-list li::after {
    content: "";
    position: static;
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin: 0 11px;
    border: solid rgba(255, 255, 255, .55);
    border-width: 1.5px 1.5px 0 0;
    border-radius: 0;
    background: none;
}

.breadcrumb-section:not(.two) .banner-content .breadcrumb-list li:last-child,
.blog-breadcrumb .banner-content .breadcrumb-list li:last-child,
.hotels-breadcrumb .banner-content .breadcrumb-list li:last-child,
.destinations-breadcrumb .banner-content .breadcrumb-list li:last-child {
    font-weight: 600;
    padding: 0;
}

.breadcrumb-section:not(.two) .banner-content .breadcrumb-list li:last-child::after,
.blog-breadcrumb .banner-content .breadcrumb-list li:last-child::after,
.hotels-breadcrumb .banner-content .breadcrumb-list li:last-child::after,
.destinations-breadcrumb .banner-content .breadcrumb-list li:last-child::after {
    display: none;
}

/* ── Açılış animasyonu ── */
@media (prefers-reduced-motion: no-preference) {

    .breadcrumb-section:not(.two) .banner-content>*,
    .blog-breadcrumb .banner-content>*,
    .hotels-breadcrumb .banner-content>*,
    .destinations-breadcrumb .banner-content>* {
        animation: bcRise .6s cubic-bezier(.22, .61, .36, 1) both;
    }

    .breadcrumb-section:not(.two) .banner-content>*+*,
    .blog-breadcrumb .banner-content>*+*,
    .hotels-breadcrumb .banner-content>*+*,
    .destinations-breadcrumb .banner-content>*+* {
        animation-delay: .1s;
    }
}

@keyframes bcRise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Tur listeleme sayfası: başlık ile içerik arası boşluk ──
   (eski konumu: tours/index.blade.php içindeki <style> bloğu) */
.tours-page-breadcrumb {
    margin-bottom: clamp(24px, 3vw, 36px);
}

/* ── Mobil ── */
@media (max-width: 767px) {

    .breadcrumb-section:not(.two),
    .blog-breadcrumb,
    .hotels-breadcrumb,
    .destinations-breadcrumb {
        min-height: 200px;
    }

    .breadcrumb-section:not(.two) .banner-content h1,
    .blog-breadcrumb .banner-content h1,
    .hotels-breadcrumb .banner-content h1,
    .destinations-breadcrumb .banner-content h1 {
        margin-bottom: 16px;
    }

    .breadcrumb-section:not(.two) .banner-content h1::after,
    .blog-breadcrumb .banner-content h1::after,
    .hotels-breadcrumb .banner-content h1::after,
    .destinations-breadcrumb .banner-content h1::after {
        margin-top: 14px;
    }

    .breadcrumb-section:not(.two) .banner-content .breadcrumb-list,
    .blog-breadcrumb .banner-content .breadcrumb-list,
    .hotels-breadcrumb .banner-content .breadcrumb-list,
    .destinations-breadcrumb .banner-content .breadcrumb-list {
        padding: 8px 16px;
        font-size: 13.5px;
    }

    .breadcrumb-section:not(.two) .banner-content .breadcrumb-list li,
    .blog-breadcrumb .banner-content .breadcrumb-list li,
    .hotels-breadcrumb .banner-content .breadcrumb-list li,
    .destinations-breadcrumb .banner-content .breadcrumb-list li {
        font-size: 13.5px;
    }

    .breadcrumb-section:not(.two) .banner-content .breadcrumb-list li::after,
    .blog-breadcrumb .banner-content .breadcrumb-list li::after,
    .hotels-breadcrumb .banner-content .breadcrumb-list li::after,
    .destinations-breadcrumb .banner-content .breadcrumb-list li::after {
        margin: 0 8px;
    }
}