/* ==========================================================================
   Ferrylines — UI/UX Refinements Layer
   --------------------------------------------------------------------------
   style.css'in üzerine binen rafinasyon katmanı. Marka kimliği (Cormorant +
   Jost, lacivert paleti, bordo CTA, mavi vurgu) korunur; tipografi sistemi,
   görsel hiyerarşi, spacing ritmi ve mikro-etkileşimler 2025 standardına
   yükseltilir. Bu dosyayı silmek = eski hâle dönmek.
   ========================================================================== */

/* === 0. Design Tokens =================================================== */
:root {
    /* Brand */
    --c-navy-deep:   #0a2b50;
    --c-navy:        #122b50;
    --c-navy-mid:    #2c4771;
    --c-navy-soft:   #20375f;
    --c-blue:        #4277c6;
    --c-blue-bright: #69b3e4;
    --c-blue-pale:   #b9c7df;

    /* Accent (CTA) */
    --c-bordo:       #ad262a;
    --c-bordo-deep:  #8e1e22;

    /* Status */
    --c-success:     #2e794a;
    --c-warning:     #a85d00;

    /* Surfaces */
    --c-surface:      #ffffff;
    --c-surface-soft: #f7f9fc;
    --c-surface-mute: #f4f6f9;

    /* Hairlines */
    --c-line:        #e5eaf0;
    --c-line-soft:   #eef1f6;

    /* Type */
    --ff-serif: "Cormorant Garamond", "Times New Roman", serif;
    --ff-sans:  "Jost", "Helvetica Neue", system-ui, sans-serif;

    /* Radius */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;

    /* Elevation */
    --shadow-1: 0 1px 2px rgba(10,43,80,.04), 0 2px 8px rgba(10,43,80,.06);
    --shadow-2: 0 2px 8px rgba(10,43,80,.06), 0 12px 28px rgba(10,43,80,.10);
    --shadow-3: 0 8px 24px rgba(10,43,80,.10), 0 24px 48px rgba(10,43,80,.14);

    /* Motion */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* === 1. Document Foundation ============================================ */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--ff-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: #2a3953;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga", "calt";
}

p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: #4d5a73;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-serif);
    color: var(--c-navy-deep);
    letter-spacing: -0.005em;
    line-height: 1.15;
    margin: 0 0 0.5rem;
}

img { max-width: 100%; height: auto; }

::selection { background: var(--c-blue-bright); color: var(--c-navy-deep); }

/* === 2. Navbar ========================================================= */
.navbar.fixed-top {
    padding: 0.5rem 0;
    transition: background .35s var(--ease),
                backdrop-filter .35s var(--ease),
                box-shadow .35s var(--ease),
                margin .35s var(--ease);
}
.navbar.fixed-top.is-scrolled {
    background: rgba(10, 43, 80, 0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px rgba(10, 43, 80, 0.20);
    margin: 0 !important;
    border-radius: 0;
}
.navbar.fixed-top.is-scrolled .navbar-nav {
    background: transparent;
    border-color: rgba(255,255,255,0.10);
}
.navbar-brand img { height: 40px; transition: height .35s var(--ease); }
.navbar.fixed-top.is-scrolled .navbar-brand img { height: 32px; }

.navbar-nav { padding: 4px; gap: 2px; }
/* Spaced varyant — Neden Biz kaldırıldı, kalan menüler arasında daha rahat nefes alanı bırak */
.navbar-nav-spaced { gap: 14px; }
@media (max-width: 991.98px) { .navbar-nav-spaced { gap: 4px; } }
.navbar-nav .nav-link {
    font-family: var(--ff-sans);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    border-radius: 999px;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.navbar-nav .nav-link:hover { background: rgba(255,255,255,0.10); color: #fff; }
.navbar-nav > .nav-link:last-child { font-weight: 600; }

.navbar-nav .dropdown-menu {
    border: 0; border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    padding: 0.5rem; margin-top: 12px !important;
    min-width: 220px;
}
.navbar-nav .dropdown-item {
    font-family: var(--ff-sans);
    font-size: 0.9rem; font-weight: 500;
    border-radius: var(--r-sm); padding: 0.55rem 0.875rem;
    transition: background .15s var(--ease), color .15s var(--ease);
}

.dropdown.language .btn {
    font-family: var(--ff-sans);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 8px 18px;
    border: 0;
    background: rgba(255,255,255,0.95);
    color: var(--c-navy-deep);
    transition: background .2s var(--ease), color .2s var(--ease);
}
.dropdown.language .btn:hover { background: #fff; color: var(--c-navy-deep); }

/* User account icon button (cart-header ile aynı circle pattern) */
.user-header {
    width: 40px; height: 40px; border-radius: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.95) !important;
    color: var(--c-navy-deep) !important;
    border: 0 !important;
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.user-header:hover,
.user-header:focus { background: var(--c-bordo) !important; color: #fff !important; transform: translateY(-1px); }
.user-header.no-caret::after { display: none !important; }

.dropdown.user-menu .dropdown-menu {
    border: 0;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    padding: 0.5rem;
    margin-top: 10px !important;
    min-width: 200px;
}
.dropdown.user-menu .dropdown-item {
    font-family: var(--ff-sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--c-navy-deep);
    border-radius: var(--r-sm);
    padding: 0.55rem 0.875rem;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.dropdown.user-menu .dropdown-item:hover { background: var(--c-surface-soft); color: var(--c-navy-deep); }
.dropdown.user-menu .dropdown-item i { color: var(--c-navy-mid); width: 18px; }

.cart-header {
    background: rgba(255,255,255,0.95) !important;
    color: var(--c-navy-deep);
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.cart-header:hover {
    background: var(--c-bordo) !important;
    color: #fff;
    transform: translateY(-1px);
}

/* Cart dropdown — desktop'ta 320px sabit; mobilde viewport'a sığması için
   sol kenardaki tetikleyici buton viewport-edge dropdown taşırmasın diye
   fixed-position responsive panel kullanıyoruz. */
.cart-dropdown-menu {
    min-width: 320px;
    border-radius: var(--r-md);
}
@media (max-width: 575.98px) {
    .cart-dropdown-menu.show {
        position: fixed !important;
        top: 64px !important;
        left: 8px !important;
        right: 8px !important;
        inset: 64px 8px auto 8px !important;
        transform: none !important;
        min-width: 0 !important;
        width: auto !important;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
}

/* === 3. Hero Banner — banner.png as section background ================= */
/* Orijinal DOM: <div id="banner"><img></div> banner-filtre içeren section */
/* dışında. Negative-margin hack güvensiz oluyordu (banner alt sınırını    */
/* aşınca beyaz section bg + beyaz hero title = boşluk hissi).             */
/* Çözüm: #banner div'ini gizle, banner.png'i section'a background olarak   */
/* uygula. Form + hero title section içinde, overlay üstünde sabit kalır.   */

#banner { display: none !important; }

body > section:has(#banner-filtre) {
    position: relative;
    isolation: isolate;
    background: url('../images/banner.png') center/cover no-repeat;
    /* Above-the-fold: clamp ile hem küçük hem büyük ekranlarda formu sığdır.
       Padding-top: fixed-top navbar (~80px) + estetik nefes (~80px) = 10rem.
       Min 620px (form ~390 + padding-top + alt padding), max 800px. */
    min-height: clamp(620px, 95svh, 800px);
    padding: 10rem 0 1.5rem;
    margin: 0;
    color: #fff;
    display: flex;
    align-items: flex-start;
}
body > section:has(#banner-filtre) > .container { width: 100%; }
@media (max-height: 760px) {
    body > section:has(#banner-filtre) { padding: 7rem 0 1rem; min-height: auto; }
}
body > section:has(#banner-filtre)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(10,43,80,0.82) 0%,
        rgba(10,43,80,0.60) 55%,
        rgba(44,71,113,0.50) 100%);
    z-index: 0;
    pointer-events: none;
}
body > section:has(#banner-filtre) > .container {
    position: relative;
    z-index: 1;
}
body > section:has(#banner-filtre) > .container > .row.position-relative {
    align-items: center;
}

/* banner-filtre row: absolute → relative flow */
#banner-filtre {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    z-index: 2;
    padding: 0 !important;
    margin: 0 !important;
}

/* Sağ kolon (banner-title) — banner overlay üstünde beyaz */
#banner-filtre .col-lg-8.align-self-center {
    color: #fff;
    padding: 1.5rem 1.5rem 1.5rem 2rem !important;
    align-self: center !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner-title {
    font-family: var(--ff-serif) !important;
    font-size: clamp(2rem, 3.5vw + 1rem, 3.875rem) !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.012em;
    text-transform: none !important;
    color: #fff;
    max-width: 22ch;
    margin-bottom: 0.875rem;
}
.banner-title em,
.banner-title .highlight {
    font-style: italic;
    color: var(--c-blue-bright);
    font-weight: 500;
}

/* The hero subtitle (currently span next to banner-title) */
.banner-tagline,
section .row.position-relative .col-lg-8 span.fs-4 {
    font-family: var(--ff-serif) !important;
    font-style: italic;
    font-weight: 400 !important;
    font-size: clamp(1.05rem, 1vw + 0.875rem, 1.45rem) !important;
    color: rgba(255,255,255,0.90) !important;
    letter-spacing: 0.005em;
    line-height: 1.4;
    max-width: 38ch;
}

/* === 4. Reservation Form (banner-filtre) =============================== */
/* Above-the-fold için kompakt: padding/height/margin hepsi sıkıştırıldı.   */
/* Hedef: form yüksekliği ≤ 95svh (1024px ekranda ~430px form yüksekliği). */
#banner-filtre .col-lg-4 {
    background: var(--c-surface) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-3);
    padding: 1rem 1.125rem 1.125rem !important;
    border: 1px solid var(--c-line-soft);
    align-self: center;
    margin-top: 0;
}

/* Form içi mb-3 (Bootstrap 1rem) → 0.5rem; row içi mb-3 de aynı */
#banner-filtre .col-lg-4 form .mb-3 { margin-bottom: 0.5rem !important; }
#banner-filtre .col-lg-4 form .row { --bs-gutter-y: 0; --bs-gutter-x: 0.625rem; }
#banner-filtre .col-lg-4 form .row .mb-3 { margin-bottom: 0.5rem !important; }
#banner-filtre .col-lg-4 form .row + .row { margin-top: 0; }

/* Trip-type segmented control (Bilet Türü) — select yerine 2 radio button */
.trip-type-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--c-surface-soft);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    padding: 3px;
    height: 38px;
}
.trip-type-toggle label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7a93;
    border-radius: calc(var(--r-sm) - 3px);
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
    user-select: none;
}
.trip-type-toggle .btn-check { position: absolute; opacity: 0; pointer-events: none; }
.trip-type-toggle .btn-check:checked + label {
    background: #fff;
    color: var(--c-navy-deep);
    box-shadow: 0 1px 3px rgba(10,43,80,0.10);
}
.trip-type-toggle .btn-check:focus-visible + label {
    outline: 2px solid var(--c-navy-mid);
    outline-offset: 2px;
}
/* Checkbox üstte, CTA button altta — dar col-lg-4 alanında garanti taşmasız */
.reservation-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.625rem !important;
    margin-top: 0.625rem !important;
    width: 100%;
    min-width: 0;
}
.reservation-actions .form-check-inline {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.5rem;
    align-items: center;
    align-self: flex-start !important;
    flex: 0 0 auto !important;
}
/* Bootstrap .form-check .form-check-input { float:left; margin-left:-1.5em } reset:
   negatif margin checkbox'ı parent dışına itiyordu — taşmanın gerçek kaynağı buydu */
.reservation-actions .form-check-inline .form-check-input {
    float: none !important;
    margin: 0 !important;
    flex-shrink: 0;
}
.reservation-actions .form-check-inline .form-check-label {
    margin: 0 !important;
    padding: 0 !important;
}
.reservation-actions .search-btn {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
    padding: 0.75rem 0.5rem !important;
    letter-spacing: 0.04em !important;
    font-size: 0.85rem !important;
    flex: none !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.reservation-actions .search-btn i { padding-left: 0.5rem !important; }

.reservation-title {
    font-family: var(--ff-serif) !important;
    font-size: 1.375rem !important;
    font-weight: 600 !important;
    font-style: normal !important;
    letter-spacing: -0.005em;
    text-transform: none !important;
    color: var(--c-navy-deep) !important;
    text-align: left !important;
    display: block !important;
    margin: 0 0 0.875rem !important;
    padding-bottom: 0.625rem;
    position: relative;
    border-bottom: 1px solid var(--c-line);
}
.reservation-title::after {
    content: "";
    position: absolute; left: 0; bottom: -1px;
    width: 48px; height: 2px;
    background: var(--c-bordo);
    border-radius: 2px;
}

#banner-filtre .form-label {
    font-family: var(--ff-sans);
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #6b7a93 !important;
    margin-bottom: 0.25rem !important;
}

#banner-filtre .form-control,
#banner-filtre .form-select {
    background-color: var(--c-surface-soft) !important;
    border: 1px solid var(--c-line) !important;
    height: 40px !important;
    font-family: var(--ff-sans);
    font-size: 0.9rem !important;
    font-weight: 500;
    color: var(--c-navy-deep) !important;
    border-radius: var(--r-sm) !important;
    padding-left: 0.75rem;
    padding-right: 2rem;
    transition: border-color .15s var(--ease),
                box-shadow .15s var(--ease),
                background-color .15s var(--ease);
}
#banner-filtre .form-control:hover,
#banner-filtre .form-select:hover {
    border-color: var(--c-blue-pale) !important;
}
#banner-filtre .form-control:focus,
#banner-filtre .form-select:focus {
    border-color: var(--c-navy-mid) !important;
    box-shadow: 0 0 0 4px rgba(44,71,113,0.10) !important;
    background-color: #fff !important;
    outline: 0;
}

#banner-filtre .form-check-label {
    font-family: var(--ff-sans);
    font-size: 0.875rem;
    color: #4d5a73;
    font-weight: 400;
}
#banner-filtre .form-check-input:checked {
    background-color: var(--c-bordo);
    border-color: var(--c-bordo);
}

/* === Search CTA ======================================================== */
.search-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--c-bordo) !important;
    color: #fff !important;
    font-family: var(--ff-sans) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em;
    text-transform: uppercase !important;
    padding: 0.75rem 1.75rem !important;
    border-radius: var(--r-sm) !important;
    width: 100%;
    border: 0 !important;
    box-shadow: 0 8px 24px rgba(173,38,42,0.25);
    transition: background .2s var(--ease),
                transform .15s var(--ease),
                box-shadow .25s var(--ease);
    margin-top: 0.375rem;
    text-decoration: none !important;
}
/* Evcil hayvan checkbox satırı — alttan biraz nefes */
#banner-filtre .col-lg-4 .form-check-inline { margin-bottom: 0.375rem; }
.search-btn:hover {
    background: var(--c-bordo-deep) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(173,38,42,0.35);
}
.search-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(173,38,42,0.25);
}
.search-btn i { font-size: 0.75rem; transition: transform .2s var(--ease); }
.search-btn:hover i { transform: translateX(3px); }

/* === 5. About Section ================================================== */
.about-bg {
    background: var(--c-surface-mute) !important;
    color: #4d5a73 !important;
    padding: clamp(1.75rem, 3vw, 3rem) 0 !important;
    font-size: 1.0625rem !important;
}
.about-bg .row { padding: 0 !important; }
.about-bg span {
    font-family: var(--ff-serif) !important;
    font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem) !important;
    font-weight: 600 !important;
    font-style: italic;
    color: var(--c-navy-deep) !important;
    letter-spacing: -0.005em;
    line-height: 1.25 !important;
    display: block !important;
    max-width: 56ch;
    margin: 0 0 1.5rem !important;
}
.about-bg p {
    font-family: var(--ff-sans);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #4d5a73;
    max-width: 64ch;
    margin-bottom: 1.5rem;
}
.about-bg ul {
    column-gap: 2.5rem;
    margin-top: 1.25rem;
    padding-left: 0;
    max-width: 64ch;
}
.about-bg li {
    font-family: var(--ff-sans);
    font-size: 1rem;
    color: #2a3953;
    padding-bottom: 0.625rem !important;
    break-inside: avoid;
    line-height: 1.55;
}

/* === 6. Section Titles (page-titles) =================================== */
.page-titles {
    font-family: var(--ff-serif) !important;
    font-size: clamp(1.875rem, 2vw + 1rem, 2.5rem) !important;
    font-weight: 600 !important;
    font-style: italic;
    letter-spacing: -0.005em;
    color: var(--c-navy-deep) !important;
    text-transform: none !important;
    position: relative;
    display: inline-block;
    padding-bottom: 0.875rem;
    line-height: 1.2 !important;
}
.page-titles::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0; transform: translateX(-50%);
    width: 56px; height: 2px;
    background: var(--c-blue-bright);
    border-radius: 2px;
}
section.tour-bg .page-titles { color: #fff !important; }
section.tour-bg .page-titles::after { background: rgba(255,255,255,0.55); }

/* Eyebrow: "Yolcuların favorisi" benzeri kategorik etiketler için */
.eyebrow {
    display: inline-block;
    font-family: var(--ff-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-bordo);
    margin-bottom: 0.75rem;
}

/* === 7. Tour Section =================================================== */
section.tour-bg {
    padding: clamp(3rem, 5vw, 5rem) 0 !important;
    background: var(--c-navy) !important;
}

/* Tour cards — her kart kendi bg-image'i (orijinal hover-driven           */
/* package-bg-images pattern'i yerine modern card pattern). JS hover hâlâ  */
/* tour-desc'i gösterip gizler.                                            */
.tour-wrap {
    border-radius: var(--r-md) !important;
    box-shadow: 0 24px 48px rgba(10,43,80,0.30);
    min-height: auto !important;
    background: transparent !important;
    overflow: hidden;
}
.tour-inner { gap: 0; }
.package-bg-images { display: none !important; }

.tour-item {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--c-navy);
    transition: flex .4s var(--ease);
}
.tour-item:nth-child(1) { background-image: url('../images/tour.png'); }
.tour-item:nth-child(2) { background-image: url('../images/tour2.png'); }
.tour-item:nth-child(3) { background-image: url('../images/tour3.png'); }

/* Gradient overlay — title okunaklı kalsın */
.tour-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10,43,80,0.10) 0%,
        rgba(10,43,80,0.55) 55%,
        rgba(10,43,80,0.92) 100%);
    z-index: 1;
    transition: background .4s var(--ease);
}
.tour-item:hover::before,
.tour-item.current::before {
    background: linear-gradient(180deg,
        rgba(10,43,80,0.45) 0%,
        rgba(10,43,80,0.75) 50%,
        rgba(10,43,80,0.95) 100%);
}

.tour-item .tour-holder,
.tour-item .tour-desc {
    position: relative;
    z-index: 2;
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none !important;
}
.tour-item .tour-holder {
    padding: 1.75rem 1.5rem !important;
    display: flex;
    align-items: flex-end;
    min-height: 200px;
}
.tour-item .tour-holder h2 {
    font-family: var(--ff-serif) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
    color: #fff !important;
    line-height: 1.25;
    text-transform: none;
}
.tour-item .tour-desc p {
    font-family: var(--ff-sans);
    font-size: 0.9375rem;
    line-height: 1.75 !important;
    color: rgba(255,255,255,0.88);
}
.tour-item .tour-desc p.text-decoration-underline {
    font-family: var(--ff-sans);
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none !important;
    color: var(--c-blue-bright) !important;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 1rem;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    display: block;
}
.tour-item .tour-desc p.text-end a {
    font-family: var(--ff-sans);
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none !important;
    color: var(--c-blue-bright) !important;
    transition: color .2s var(--ease);
}
.tour-item .tour-desc p.text-end a::after {
    content: " →";
    display: inline-block;
    transition: transform .2s var(--ease);
}
.tour-item .tour-desc p.text-end a:hover { color: #fff !important; }
.tour-item .tour-desc p.text-end a:hover::after { transform: translateX(4px); }

/* === 8. Package Tour Cards ============================================ */
section.my-4 {
    padding: clamp(3rem, 5vw, 5rem) 0 !important;
    margin: 0 !important;
}
.hover-effect-img .package-tour-img {
    border-radius: var(--r-md) !important;
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.hover-effect-img:hover .package-tour-img {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
}
.hover-effect-img .package-tour-img span {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(10,43,80,0.78) 55%,
        rgba(10,43,80,0.96) 100%) !important;
    padding: 3rem 1.5rem 1.5rem !important;
    text-align: left !important;
    display: block;
}
.hover-effect-img .package-tour-img span h3 {
    font-family: var(--ff-serif) !important;
    font-size: 1.375rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
    color: #fff !important;
    text-transform: none !important;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}
.hover-effect-img .package-tour-img span p {
    font-family: var(--ff-sans);
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none !important;
    color: var(--c-blue-bright) !important;
    margin-bottom: 0;
}

/* === 9. Hotel Carousel ================================================ */
.bg-gray {
    background: var(--c-surface-mute) !important;
    padding: clamp(3rem, 5vw, 5rem) 0 !important;
}
/* Sefer-liste sayfası: bg-gray padding global olarak 3-5rem ama sefer
   kartları için fazla. Filtre bar'ından hemen sonra başlamalı. */
.bg-gray.sefer-liste-results {
    padding: 0.5rem 0 1.5rem !important;
}
#hotelBanner .col-lg-6:first-child {
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-1);
    padding: 2.5rem !important;
    margin-top: 0 !important;
    height: auto !important;
    text-align: left !important;
    align-content: center;
}
#hotelBanner h4 {
    font-family: var(--ff-serif) !important;
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
    color: var(--c-navy-deep) !important;
    margin-bottom: 0.875rem;
    line-height: 1.2;
}
#hotelBanner p {
    font-family: var(--ff-sans) !important;
    font-size: 1.0625rem !important;
    line-height: 1.7;
    color: #4d5a73 !important;
    margin-bottom: 1.5rem;
}
#hotelBanner a.text-dark-blue {
    font-family: var(--ff-sans) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase;
    text-decoration: none !important;
    color: var(--c-navy-mid) !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color .2s var(--ease), gap .2s var(--ease);
}
#hotelBanner a.text-dark-blue::after {
    content: "→";
    transition: transform .2s var(--ease);
}
#hotelBanner a.text-dark-blue:hover { color: var(--c-bordo) !important; }
#hotelBanner a.text-dark-blue:hover::after { transform: translateX(4px); }

#hotelBanner .col-lg-6 img {
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    height: 320px; width: 100%; object-fit: cover;
}

#hotelBanner .carousel-indicators {
    margin-left: 0 !important;
    justify-content: center;
    bottom: -2.5rem;
    margin-bottom: 0;
}
#hotelBanner .carousel-indicators [data-bs-target] {
    background: var(--c-line) !important;
    width: 24px !important; height: 4px !important;
    border-radius: 2px !important;
    margin: 0 4px;
    border: 0 !important;
    transition: background .2s var(--ease), width .2s var(--ease);
}
#hotelBanner .carousel-indicators .active {
    background: var(--c-navy-mid) !important;
    width: 36px !important;
}

/* === 10. USP / Üç Adım Section ======================================== */
section.my-5 {
    padding: clamp(3rem, 5vw, 5rem) 0 !important;
    margin: 0 !important;
}
section.my-5 .col-lg-4.text-dark-blue {
    padding: 2rem 1.25rem;
    text-align: center;
    border-radius: var(--r-md);
    transition: background .25s var(--ease), transform .25s var(--ease);
}
section.my-5 .col-lg-4.text-dark-blue:hover {
    background: var(--c-surface-soft);
    transform: translateY(-2px);
}
section.my-5 .col-lg-4 div[style] {
    min-height: 96px !important;
    display: flex; align-items: center; justify-content: center;
}
section.my-5 .col-lg-4 img {
    max-height: 84px;
    width: auto !important;
    margin: 0 auto;
}
section.my-5 .col-lg-4 span.fw-bold {
    font-family: var(--ff-serif) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
    color: var(--c-navy-deep) !important;
    display: block;
    margin: 1rem 0 0.625rem !important;
    line-height: 1.25;
}
section.my-5 .col-lg-4 p {
    font-family: var(--ff-sans);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #4d5a73;
    max-width: 32ch;
    margin: 0 auto;
}

/* === 11. "Tüm Turlar >>" type subtle CTAs ============================== */
section .text-blue.fw-medium,
section .text-end > a.fw-medium {
    font-family: var(--ff-sans) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none !important;
    color: var(--c-navy-mid) !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color .2s var(--ease);
}
section a.fw-medium.text-blue::after { content: "→"; transition: transform .2s var(--ease); }
section a.fw-medium.text-blue:hover { color: var(--c-bordo) !important; }
section a.fw-medium.text-blue:hover::after { transform: translateX(4px); }

/* === 12. Footer ======================================================= */
footer {
    background: var(--c-navy) !important;
    padding: clamp(3rem, 5vw, 5rem) 0 1.5rem !important;
}
footer h6.h4 {
    font-family: var(--ff-serif) !important;
    font-size: 1.375rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
    color: #fff !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
footer a {
    font-family: var(--ff-sans);
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.78) !important;
    display: inline-block;
    padding: 4px 0 !important;
    transition: color .2s var(--ease), padding .2s var(--ease);
}
footer a:hover { color: var(--c-blue-bright) !important; padding-left: 4px !important; }
footer p {
    font-family: var(--ff-sans);
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}
footer p i {
    width: 18px;
    text-align: center;
    color: var(--c-blue-bright) !important;
    margin-right: 0.5rem;
}
footer p a { padding: 0 !important; }
footer p a:hover { padding-left: 0 !important; color: #fff !important; }

footer ul.d-flex { gap: 0.5rem; margin-top: 1.5rem !important; }
footer ul.d-flex a {
    display: inline-grid;
    place-items: center;
    width: 38px; height: 38px;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 50%;
    padding: 0 !important;
    font-size: 0.875rem;
    transition: background .2s var(--ease),
                border-color .2s var(--ease),
                color .2s var(--ease),
                transform .2s var(--ease);
}
footer ul.d-flex a:hover {
    background: var(--c-blue-bright);
    border-color: var(--c-blue-bright);
    color: var(--c-navy-deep) !important;
    padding-left: 0 !important;
    transform: translateY(-2px);
}

footer .form-control {
    font-family: var(--ff-sans);
    font-size: 0.9375rem;
    border-radius: 999px 0 0 999px !important;
    height: 46px !important;
    background: rgba(255,255,255,0.97);
    color: var(--c-navy-deep);
    border: 0 !important;
    padding-left: 1.25rem !important;
}
footer .form-control:focus {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(105,179,228,0.20);
}
footer form .btn {
    font-family: var(--ff-sans);
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    background: var(--c-bordo) !important;
    border-radius: 0 999px 999px 0 !important;
    height: 46px !important;
    border: 0 !important;
    transition: background .2s var(--ease);
}
footer form .btn:hover { background: var(--c-bordo-deep) !important; }

footer hr { opacity: 0.15; margin: 2.5rem 0 1.25rem; }
footer .col-lg-12 p {
    font-size: 0.875rem !important;
    color: rgba(255,255,255,0.55) !important;
    margin-bottom: 0;
}

/* === 13. Generic Color Utility Refinements ============================ */
.text-blue { color: var(--c-blue) !important; }
.text-dark-blue { color: var(--c-navy) !important; }

/* === 14. Accessibility ================================================= */
:focus-visible {
    outline: 2px solid var(--c-navy-mid);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}
button:focus,
.btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(44,71,113,0.18);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === 15. Responsive Tweaks ============================================ */
@media (max-width: 1199.98px) {
    .navbar-nav .nav-link {
        font-size: 13.5px;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

@media (max-width: 991.98px) {
    .navbar.fixed-top {
        background: rgba(10, 43, 80, 0.95) !important;
        backdrop-filter: blur(12px);
        margin: 0 !important;
        padding: 0.75rem 1rem;
    }
    .navbar-nav {
        background: transparent;
        border: 0;
        flex-direction: column;
        gap: 4px;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .navbar-nav .nav-link {
        padding: 0.6rem 1rem !important;
        text-align: left;
    }

    /* Banner section mobile: title üstte, form altta */
    body > section:has(#banner-filtre) {
        min-height: auto;
        padding: 5rem 0 2.5rem;
    }
    body > section:has(#banner-filtre) > .container > .row.position-relative {
        align-items: stretch;
    }
    #banner-filtre .col-lg-8.align-self-center {
        order: 1;
        padding: 1rem 0.5rem 1.5rem !important;
        text-align: center;
        align-items: center;
    }
    #banner-filtre .col-lg-4 {
        order: 2;
        margin-top: 0 !important;
    }

    .about-bg ul { column-count: 1 !important; }

    #hotelBanner .col-lg-6:first-child {
        margin-top: 1rem !important;
        padding: 1.75rem !important;
    }
    #hotelBanner .col-lg-6 img { height: 240px; margin-top: 1rem; }
}

@media (max-width: 575.98px) {
    .reservation-title { font-size: 1.375rem !important; }
    .banner-title { font-size: clamp(1.75rem, 6vw + 1rem, 2.5rem) !important; }
    section.my-5 .col-lg-4 { margin-bottom: 1rem; }
    .navbar-brand img { height: 32px; }
    .dropdown.language { margin-left: auto !important; margin-right: 0 !important; }
}

/* === 16. Auth Pages (Login / Register) ================================= */
.auth-section {
    min-height: 100svh;
    padding: 7rem 0 3rem;
    background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy-mid) 100%);
    position: relative;
    isolation: isolate;
}
.auth-section::before {
    content: "";
    position: absolute; inset: 0;
    background: url('../images/banner.png') center/cover no-repeat;
    opacity: 0.18;
    z-index: -1;
}
/* Split layout — sol brand panel + sağ form: tüm aksiyon öğeleri viewport içinde */
.auth-section-split {
    min-height: auto;
    padding: 1.5rem 0 2rem;
    display: flex;
    align-items: center;
}
.auth-grid {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
    overflow: hidden;
    min-height: 540px;
}
.auth-brand-panel {
    background: linear-gradient(160deg, #122b50 0%, #1f3d6d 60%, #2c4771 100%);
    color: #fff;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
}
.auth-brand-panel::after {
    content: "";
    position: absolute; right: -80px; bottom: -80px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
}
.auth-brand-inner { position: relative; z-index: 1; align-self: center; width: 100%; }
.auth-brand-icon {
    width: 64px; height: 64px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 16px;
    color: #fff;
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.auth-brand-title {
    font-family: var(--ff-serif) !important;
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.5rem;
    letter-spacing: -0.012em;
}
.auth-brand-sub {
    font-family: var(--ff-sans);
    font-size: 0.92rem;
    color: rgba(255,255,255,0.78);
    margin: 0 0 1.5rem;
}
.auth-brand-features {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 1.25rem;
}
.auth-brand-features li {
    font-family: var(--ff-sans);
    font-size: 0.88rem;
    color: rgba(255,255,255,0.92);
    padding: 0.45rem 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.auth-brand-features li i {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.10);
    border-radius: 6px;
    color: #ffd5d6;
    font-size: 0.85rem;
}
.auth-card {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
    padding: 2.25rem 2.25rem 1.75rem;
    border: 1px solid var(--c-line-soft);
}
.auth-card-split {
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 2rem 2.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-header { text-align: center; margin-bottom: 1.25rem; }
.auth-card-split .auth-header { text-align: left; }
.auth-title {
    font-family: var(--ff-serif) !important;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--c-navy-deep);
    margin: 0 0 0.5rem;
    letter-spacing: -0.012em;
}
.auth-subtitle {
    font-family: var(--ff-sans);
    font-size: 0.95rem;
    color: var(--c-text-muted, #6b7a93);
    margin: 0;
}
.auth-card .form-label {
    font-family: var(--ff-sans);
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #6b7a93 !important;
    margin-bottom: 0.35rem;
}
.auth-card .form-control {
    background-color: var(--c-surface-soft) !important;
    border: 1px solid var(--c-line) !important;
    height: 44px;
    font-family: var(--ff-sans);
    font-size: 0.95rem;
    color: var(--c-navy-deep);
    border-radius: var(--r-sm);
    padding: 0 0.875rem;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
.auth-card .form-control:focus {
    border-color: var(--c-navy-mid) !important;
    box-shadow: 0 0 0 4px rgba(44,71,113,0.10) !important;
    background-color: #fff !important;
}
.auth-card .form-check-label {
    font-family: var(--ff-sans);
    font-size: 0.875rem;
    color: #4d5a73;
}
.auth-link { color: var(--c-navy-mid); text-decoration: none; transition: color .15s var(--ease); }
.auth-link:hover { color: var(--c-bordo); text-decoration: underline; }
.auth-cta {
    background: var(--c-bordo) !important;
    color: #fff !important;
    font-family: var(--ff-sans) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 0.75rem 2rem !important;
    border-radius: var(--r-sm) !important;
    border: 0;
    box-shadow: 0 8px 24px rgba(173,38,42,0.25);
    transition: background .2s var(--ease), transform .15s var(--ease), box-shadow .25s var(--ease);
}
.auth-cta:hover {
    background: var(--c-bordo-deep) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(173,38,42,0.35);
}
.auth-foot {
    margin-top: 1.5rem;
    text-align: center;
    font-family: var(--ff-sans);
    font-size: 0.9rem;
    color: #6b7a93;
    border-top: 1px solid var(--c-line);
    padding-top: 1.25rem;
}
.auth-page { background: var(--c-navy-deep); }

/* === 17. Account Pages (Hesabım) ====================================== */
.account-section {
    min-height: calc(100svh - 80px);
    padding: 7rem 0 4rem;
    background: var(--c-surface-mute);
}
.account-sidebar {
    background: #fff;
    border-radius: var(--r-md);
    padding: 1.5rem 1.25rem;
    box-shadow: var(--shadow-1);
    border: 1px solid var(--c-line-soft);
    position: sticky; top: 6rem;
}
.account-user {
    display: flex; align-items: center; gap: 0.875rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--c-line);
}
.account-avatar {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, var(--c-navy-deep), var(--c-navy-mid));
    color: #fff; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}
.account-name {
    font-family: var(--ff-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-navy-deep);
    line-height: 1.2;
}
.account-email {
    font-family: var(--ff-sans);
    font-size: 0.8rem;
    color: #6b7a93;
    word-break: break-all;
}
.account-nav { display: flex; flex-direction: column; gap: 4px; }
.account-nav-link {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--r-sm);
    font-family: var(--ff-sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--c-navy-deep);
    text-decoration: none;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.account-nav-link i { width: 18px; color: var(--c-navy-mid); }
.account-nav-link:hover { background: var(--c-surface-soft); color: var(--c-navy-deep); }
.account-nav-link.active { background: var(--c-navy-deep); color: #fff; }
.account-nav-link.active i { color: #fff; }
.account-nav-sub { padding-left: 1.875rem; font-size: 0.9rem; }
.account-nav-link.logout { color: var(--c-bordo); }
.account-nav-link.logout:hover { background: rgba(173,38,42,0.06); color: var(--c-bordo-deep); }
.account-nav-link.logout i { color: var(--c-bordo); }

.account-content {
    /* container */
}
.account-card {
    background: #fff;
    border-radius: var(--r-md);
    padding: 1.75rem;
    box-shadow: var(--shadow-1);
    border: 1px solid var(--c-line-soft);
}
.account-card-header { margin-bottom: 1.5rem; }
.account-card-title {
    font-family: var(--ff-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--c-navy-deep);
    margin: 0 0 0.25rem;
}
.account-card-subtitle {
    font-family: var(--ff-sans);
    font-size: 0.9rem;
    color: #6b7a93;
    margin: 0;
}
.account-card .form-label {
    font-family: var(--ff-sans);
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #6b7a93 !important;
    margin-bottom: 0.35rem;
}
.account-card .form-control,
.account-card .form-select {
    background-color: var(--c-surface-soft) !important;
    border: 1px solid var(--c-line) !important;
    height: 42px;
    font-family: var(--ff-sans);
    font-size: 0.95rem;
    color: var(--c-navy-deep);
    border-radius: var(--r-sm);
    padding: 0 0.875rem;
}
.account-card .form-control:focus,
.account-card .form-select:focus {
    border-color: var(--c-navy-mid) !important;
    box-shadow: 0 0 0 4px rgba(44,71,113,0.10) !important;
    background-color: #fff !important;
}
.account-cta {
    background: var(--c-bordo) !important;
    color: #fff !important;
    font-family: var(--ff-sans) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.6rem 1.5rem !important;
    border-radius: var(--r-sm) !important;
    border: 0;
    transition: background .2s var(--ease), transform .15s var(--ease);
}
.account-cta:hover { background: var(--c-bordo-deep) !important; color: #fff !important; transform: translateY(-1px); }

/* Yolcular liste */
.account-empty {
    text-align: center; padding: 3rem 1rem;
    color: #6b7a93;
}
.account-empty i { font-size: 3rem; color: var(--c-blue-pale); margin-bottom: 0.75rem; }
.account-empty p { margin: 0 0 0.5rem; font-family: var(--ff-sans); }

.passengers-list { display: flex; flex-direction: column; gap: 0.625rem; }
.passenger-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.875rem 1.125rem;
    background: var(--c-surface-soft);
    border-radius: var(--r-sm);
    border: 1px solid var(--c-line);
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.passenger-row:hover { border-color: var(--c-navy-mid); background: #fff; }
.passenger-name {
    font-family: var(--ff-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-navy-deep);
}
.passenger-meta {
    font-family: var(--ff-sans);
    font-size: 0.825rem;
    color: #6b7a93;
    display: flex; flex-wrap: wrap; gap: 0.875rem;
    margin-top: 0.125rem;
}
.passenger-actions { display: flex; gap: 0.375rem; flex-shrink: 0; }
.btn-passenger-action {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff;
    border: 1px solid var(--c-line);
    color: var(--c-navy-mid);
    border-radius: var(--r-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.btn-passenger-action:hover { background: var(--c-navy-deep); color: #fff; border-color: var(--c-navy-deep); }
.btn-passenger-action.danger:hover { background: var(--c-bordo); border-color: var(--c-bordo); }

/* Auth navbar — kullanıcı adı/e-posta dropdown header */
.dropdown-user-name {
    font-family: var(--ff-serif);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c-navy-deep);
    line-height: 1.2;
}
.dropdown-user-email {
    font-family: var(--ff-sans);
    font-size: 0.78rem;
    color: #6b7a93;
    word-break: break-all;
    margin-top: 2px;
}
.dropdown.user-menu .dropdown-divider { border-color: var(--c-line); }
.dropdown.user-menu .dropdown-item.text-danger { color: var(--c-bordo) !important; }
.dropdown.user-menu .dropdown-item.text-danger:hover { background: rgba(173,38,42,0.06); }
.dropdown.user-menu .dropdown-item.text-danger i { color: var(--c-bordo); }

/* ==========================================================================
   MOBILE OVERRIDES — additive katman (≤ 991.98px ve ≤ 575.98px)
   --------------------------------------------------------------------------
   KURAL: Hiçbir desktop davranışı değişmez. Tüm kurallar breakpoint içinde
   ve mevcut sınıfları override ederek çalışır. HTML/blade yapısı korunur.
   ========================================================================== */

/* === M1. Stacking context — header dropdown'lar her zaman içeriğin üstünde
       Sorun: .auth-section / paneller `isolation: isolate` ile yeni stacking
       context yaratınca, navbar'ın `z-index: auto` dropdown'ları onların
       altında kalıyordu.
       ÖNEMLİ: .fixed-top'a DOKUNMA — Bootstrap zaten position:fixed +
       z-index:1030 veriyor. Sadece statik navbar (navbar-sub) için kural ver,
       yoksa fixed-top'taki position:fixed override edilir (anasayfada üstte
       beyaz boşluk regresyonu çıkar). */
.navbar:not(.fixed-top) { position: relative; z-index: 1030; }
.navbar .dropdown-menu { z-index: 1031; }

/* === M2. Header — mobilde 2-satırlı kompakt düzen ====================== */
@media (max-width: 991.98px) {
    /* navbar-sub padding 30px 0 + m-3 → mobilde çok yer kaplıyor */
    .navbar.navbar-sub,
    .navbar.bg-transparent.fixed-top {
        padding: 0.625rem 0.75rem !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .navbar > .container-fluid {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        column-gap: 0.5rem;
        align-items: center;
    }
    /* Tek satır hedefi (brand + user + cart + toggler).
       Brand 382×56 oranında geniş — mobilde 28px height ile ~191px width,
       diğer item'larla 390px ekrana sığar. Tüm sağ grup flex-shrink:0.
       Container-fluid Bootstrap default padding 1.5rem'i sıfırla — navbar
       zaten kendi padding'ini veriyor (M2 üst kuralı). */
    .navbar > .container-fluid {
        column-gap: 0.375rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .navbar .navbar-brand {
        order: 1;
        margin-right: 0 !important;
        padding: 0;
        flex-shrink: 1;
        min-width: 0;
    }
    .navbar .navbar-brand img {
        height: 28px !important;
        max-height: 28px;
        max-width: 100%;
        width: auto;
    }
    /* Toggler en sağda (order: 5). Önce user/cart sağa itilir. */
    .navbar .navbar-toggler {
        order: 5;
        padding: 0.3rem 0.5rem;
        border-color: rgba(255,255,255,0.35);
        flex-shrink: 0;
    }
    /* user-menu + cart: 1. satırda, brand'den sonra sağa itili.
       user-menu margin-left: auto ile arada kalan boşluğu yutar. */
    .navbar > .container-fluid > .dropdown.user-menu {
        display: inline-flex !important;
        order: 3;
        margin-left: auto !important;
        margin-right: 0 !important;
        flex-shrink: 0;
    }
    .navbar > .container-fluid > .cart-header {
        order: 4;
        flex-shrink: 0;
    }
    .user-header,
    .cart-header { width: 36px !important; height: 36px !important; }
    /* 3. satır: collapse menü açıldığında tam genişlik */
    .navbar .navbar-collapse {
        order: 99;
        flex-basis: 100%;
        max-width: 100%;
        margin-top: 0.5rem;
    }
    .navbar .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--r-md);
        padding: 0.5rem;
    }
    .navbar .navbar-nav .nav-item { width: 100%; }
    .navbar .navbar-nav .nav-link { text-align: left; padding: 0.6rem 0.875rem !important; }
    .navbar .navbar-nav .dropdown-menu {
        margin-top: 0 !important;
        background: rgba(255,255,255,0.06);
        box-shadow: none;
        padding: 0.25rem 0.5rem;
    }
    .navbar .navbar-nav .dropdown-item { color: #fff; }

    /* Hamburger collapse altındaki mobil dil seçici (Seçenek B) */
    .mobile-locale-section {
        margin: 0.25rem 0 0.5rem;
        padding: 0.875rem 0.5rem 0.25rem;
        border-top: 1px solid rgba(255,255,255,0.10);
    }
    .mobile-locale-label {
        font-family: var(--ff-sans);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.55);
        padding: 0 0.5rem;
        margin-bottom: 0.625rem;
    }
    .mobile-locale-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0 0.5rem;
    }
    .mobile-locale-link {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.45rem 0.875rem;
        border-radius: 999px;
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.15);
        color: #fff;
        transition: background .15s var(--ease), border-color .15s var(--ease);
    }
    .mobile-locale-link:hover,
    .mobile-locale-link:focus {
        background: rgba(255,255,255,0.16);
        border-color: rgba(255,255,255,0.30);
        color: #fff;
    }
    .mobile-locale-link.active {
        background: #fff;
        color: var(--c-navy-deep);
        border-color: #fff;
        cursor: default;
    }
}

/* === M3. Anasayfa hero — slogan navbar altında kalmasın ================
   Mobilde wrap ile navbar yüksekliği ~120-140px'e çıkıyor. Hero için
   padding-top'ı arttır (mevcut 10rem → mobilde 9rem yeter; küçük ekran
   yüksekliği için clamp). Slogan kesilmez. */
@media (max-width: 991.98px) {
    body > section:has(#banner-filtre) {
        padding: 5rem 0 1.25rem !important;
        min-height: auto !important;
    }
    body > section:has(#banner-filtre) > .container > .row.position-relative {
        flex-direction: column;
    }
    /* Hero text: rezervasyon formundan ÖNCE göster (mobilde slogan üstte) */
    #banner-filtre .col-lg-8.align-self-center {
        order: 1;
        padding: 0 1rem 1.25rem !important;
        text-align: center;
    }
    .banner-title { max-width: none; margin-left: auto; margin-right: auto; }
    section .row.position-relative .col-lg-8 span.fs-4 {
        max-width: none;
        text-align: center;
        display: block;
    }
    #banner-filtre .col-lg-4 { order: 2; }
}

/* === M4. Anasayfa — Paket Turlar / Oteller / Servis ikonları ===========
   Tüm col-lg-4 / col-lg-6 default mobilde col-12 (Bootstrap), ama dikey
   spacing yok. Mobilde her kart arasına nefes ekle, görsel oranları sabit
   tut, taşmayı önle. */
@media (max-width: 991.98px) {
    /* Paket Turlar — kartlar dikey, aralarda 1.25rem boşluk */
    .hover-effect-img .package-tour-img { margin-bottom: 1.25rem; }
    .hover-effect-img .package-tour-img img { width: 100%; height: auto; display: block; }
    /* Oteller carousel — sol/sağ split mobilde stack, görsele sabit oran */
    #hotelBanner .col-lg-6:first-child {
        height: auto !important;
        margin-top: 0 !important;
        padding: 1.25rem 1rem !important;
        border-radius: var(--r-md) var(--r-md) 0 0;
    }
    #hotelBanner .col-lg-6 img {
        width: 100%;
        height: auto;
        max-height: 260px;
        object-fit: cover;
        border-radius: 0 0 var(--r-md) var(--r-md);
    }
    #hotelBanner .carousel-indicators { margin-left: 0 !important; justify-content: center !important; }
    /* Servis ikonları (Feribot Biletini Al / Valizini Hazırla / Tatilin…) */
    section.my-5 .col-lg-4 + .col-lg-4 { margin-top: 1.5rem; }
    section.my-5 .col-lg-4 > div[style*="min-height"] { min-height: auto !important; }
    /* Tour-bg karuselsel desktop hover ile çalışıyor — mobilde sırayla göster */
    .tour-bg .tour-wrap { min-height: auto !important; }
    .tour-bg .tour-item {
        width: 100% !important;
        margin-bottom: 0.75rem;
    }
    .tour-bg .tour-item .tour-desc {
        opacity: 1 !important;
        height: auto !important;
        padding: 0 1rem 1.25rem !important;
    }
    .tour-bg .tour-item .tour-desc p {
        opacity: 1 !important;
        transform: none !important;
    }
    .tour-bg .tour-item .tour-desc::before { width: 100% !important; }
    .tour-bg .package-bg-images { display: none; }
    .tour-bg .tour-item .tour-holder { background: rgba(18,43,80,0.65) !important; }
}

/* === M5. Hotels list sidebar — 'Paket Tur Fırsatı' CTA görseli =========
   Inline `style="max-height:50px; width:auto"` görünüşe göre override
   ediliyordu. Burada CSS'le sabitle: contain + max-height + auto width. */
.col-lg-3 .card.bg-dark-blue > img,
aside .card.bg-dark-blue > img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 80px !important;
    max-height: 56px !important;
    object-fit: contain !important;
    margin: 0 0 0.5rem !important;
    transform: none !important;
}
.col-lg-3 .card.bg-dark-blue:hover > img,
aside .card.bg-dark-blue:hover > img { transform: none !important; }

/* === M6. Kurumsal sayfa — stat kartları + tab'lar ====================== */
.breadcrumb-wrapper .d-flex.text-center.align-items-center {
    /* Desktop'ta da hafif iyileştirme: kartlar eşit genişlik almasın diye
       gap yerine border-start zaten var; mobilde grid'e geç */
}
@media (max-width: 767.98px) {
    /* Stat sayıları 2x2 grid'e düş; "850 k" tek satırda kalsın */
    .breadcrumb-wrapper .d-flex.text-center.align-items-center {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem 0.5rem;
        margin-top: 1.5rem !important;
    }
    .breadcrumb-wrapper .d-flex.text-center.align-items-center > div {
        padding: 0.875rem 0.5rem !important;
        margin: 0 !important;
        border: 1px solid rgba(255,255,255,0.18) !important;
        border-radius: var(--r-md);
        background: rgba(255,255,255,0.04);
    }
    .breadcrumb-wrapper .d-flex.text-center.align-items-center > div .fs-2 {
        font-size: 1.5rem !important;
        white-space: nowrap;
    }
    .breadcrumb-wrapper h2.h1 { font-size: 1.5rem !important; }
}
@media (max-width: 991.98px) {
    /* Tab'lar: yatay scroll, çok satıra wrap olmasın */
    #aboutTab.nav.nav-underline {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-bottom: 1.5rem !important;
        gap: 0;
        border-bottom: 1px solid var(--c-line) !important;
    }
    #aboutTab.nav.nav-underline::-webkit-scrollbar { display: none; }
    #aboutTab .nav-item { margin-right: 0 !important; flex-shrink: 0; }
    #aboutTab .nav-link {
        white-space: nowrap;
        padding: 0.65rem 1rem !important;
        font-size: 0.9rem;
        border: 0 !important;
        border-bottom: 2px solid transparent !important;
        border-radius: 0 !important;
        color: #6b7a93 !important;
    }
    #aboutTab .nav-link.active {
        background: transparent !important;
        color: var(--c-navy-deep) !important;
        border-bottom-color: var(--c-bordo) !important;
        font-weight: 600;
    }
    /* Genel kurallar kart grid'i — mobilde tek sütun arası nefes */
    #rules-tab-pane .col-lg-4 { margin-bottom: 1rem; }
    /* Hakkımızda görseli kart altına düşünce üstte bol margin */
    #about-tab-pane .col-lg-6 + .col-lg-6 { margin-top: 1.25rem; }
}

/* === M7. Body horizontal overflow guard ================================
   Bootstrap container + image taşmaları mobilde yatay scroll yaratabiliyor.
   Genel guard: body x overflow gizle. */
@media (max-width: 991.98px) {
    body { overflow-x: hidden; }
}

/* === M8. Feribot biletleri sayfası — mobil yeniden tasarım ==============
   - Sticky özet bar üstte (Çeşme→Chios | Düzenle)
   - Search section collapse (Düzenle ile açılır)
   - Search form mobilde stack (1 sütun)
   - Steps bar yatay scroll
   - Sırala/Filtrele bottom-sheet offcanvas
   - Sidebar alta düşer (Bootstrap default), sticky kapalı
   - Floating "Devam Et" bottom bar
*/
.ferry-mobile-summary {
    position: sticky;
    top: 0;
    z-index: 1029;
    background: linear-gradient(135deg, #081d36 0%, #0d2b4e 60%, #1a4a7a 100%);
    box-shadow: 0 2px 8px rgba(10,43,80,0.18);
}
.ferry-mobile-cta-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1029;
    background: var(--c-navy-deep);
    border-top: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 -4px 16px rgba(10,43,80,0.22);
    padding-bottom: env(safe-area-inset-bottom);
}
.ferry-mobile-offcanvas {
    height: auto;
    max-height: 75vh;
    border-top-left-radius: var(--r-lg);
    border-top-right-radius: var(--r-lg);
}
.ferry-mobile-offcanvas .offcanvas-header {
    padding: 0.875rem 1rem;
}
.ferry-mobile-offcanvas .offcanvas-body {
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

@media (max-width: 991.98px) {
    /* Search section (collapse açıldığında) — kompakt */
    section.breadcrumb-wrapper.collapse.show,
    section.breadcrumb-wrapper.collapse.collapsing { padding: 1rem 0 !important; }
    section.breadcrumb-wrapper .breadcrumb { font-size: 0.8rem; }
    section.breadcrumb-wrapper .top-nav { flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
    section.breadcrumb-wrapper .top-nav .btn { font-size: 0.85rem; padding: 0.4rem 0.875rem; }

    /* Ferry search bar — desktop'ta tek satır 6 kolon, mobilde 1 sütun stack */
    .ferry-search-bar {
        flex-direction: column !important;
        --bs-gutter-x: 0;
        margin-top: 0.75rem !important;
        padding: 0.75rem !important;
        border-radius: var(--r-md) !important;
    }
    .ferry-search-bar > .col-auto {
        width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--c-line) !important;
        margin-bottom: 0 !important;
        padding-bottom: 0.5rem !important;
        padding-top: 0.5rem !important;
    }
/* === M9. Mobile tıklanabilirlik bug fix paketi =========================
   Mobile cihazlarda hover olmadığı için desktop hover-overlay sınıfları
   görünmez "click absorber" haline geliyor. Aşağıdaki kurallar bu invisible
   overlay'leri kaldırır/pointer-events: none yapar ve datepicker/select gibi
   form öğelerinin tıklama target alanını garantiler. */

/* Flatpickr datepicker fixed-top navbar (z-index 1030) altında kalmasın.
   Mobile'da kullanıcı tarih input'una tıklayınca açılan takvim üstte gözüksün. */
.flatpickr-calendar { z-index: 1060 !important; }

@media (max-width: 991.98px) {
    /* (1) Anasayfa "PAKET TURLAR" kartları — hover-effect kaldırılır.
       Desktop'ta .img-1 hover ile fade-in yapan invisible (opacity:0) layer.
       Mobile'da hover yok → görünmez ama position:absolute, inset:0, z-index:1
       ile alttaki .img-2'deki <a> linkini örtüyor, tıklama gitmiyor. */
    .hover-effect-img .package-tour-img .img-1 { display: none !important; }

    /* Card overlay span (başlık + fiyat) ÜZERİNE tıklanırsa, alttaki <a>'ya
       geçsin diye span'i tıklama-şeffaf yap. */
    .hover-effect-img .package-tour-img > span { pointer-events: none; }

    /* Anasayfa rezervasyon form: <input> date alanında Bootstrap form-select
       chevron iconu input semantiği için yanlış konumlanıyor; Flatpickr zaten
       kendi UI'sını sunduğu için background-image'ı temizle, tıklama alanını
       genişlet. */
    #home-reservation-form input.home-flatpickr-date.form-select {
        background-image: none !important;
        padding-right: 0.75rem !important;
        cursor: pointer;
    }

    /* Navbar toggler + user/cart icon — Apple HIG min 44×44 tap target. */
    .navbar .navbar-toggler,
    .navbar .user-header,
    .navbar .cart-header {
        min-width: 40px;
        min-height: 40px;
    }

    /* Banner-filtre form col-lg-4: padding nedeniyle son button (Arama Yap)
       viewport alt kenarına çok yakın oluyor — alt nefes ekle. */
    #banner-filtre .col-lg-4 { padding-bottom: 1.25rem !important; }

    /* Anasayfa "Geniş Ağ / Çok Dilli Destek" gibi col-lg-3 kartlar mobilde
       overlap olmasın — value-card row gap zaten g-4 ile var, ekstra düşey
       boşluk gerekli değil; ama tablo-vari grup'ta görsel "sıkışık" hissini
       önlemek için card içi padding'i mobile'da hafif azalt. */
    .value-card { padding: 1.25rem 1rem !important; }
}

@media (max-width: 575.98px) {
    /* "Yolcular" satırı (3 select yan yana) çok dar ekranda taşıyor — stack. */
    #home-reservation-form .row:has(#yetiskin_sayisi) > .col { flex: 0 0 100%; max-width: 100%; }
    #home-reservation-form .row:has(#yetiskin_sayisi) > .col:not(:last-child) { margin-bottom: 0.375rem; }

    /* Tarih input + flatpickr min-height — ufak ekranda tap target küçülmesin */
    .home-flatpickr-date,
    #banner-filtre .form-select,
    #banner-filtre .form-control { min-height: 44px; }
}

@media (max-width: 991.98px) {
    .ferry-search-bar > .col-auto:last-child {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
        padding-top: 0.75rem !important;
        margin-left: 0 !important;
    }
    .ferry-search-bar .form-label {
        padding-top: 0 !important;
        font-size: 0.65rem !important;
        letter-spacing: 0.10em;
    }
    .ferry-search-bar .form-select,
    .ferry-search-bar .form-control { padding-left: 0 !important; }
    .ferry-search-bar .btn {
        height: 48px !important;
        width: 100% !important;
        border-radius: var(--r-sm) !important;
        font-weight: 700 !important;
    }

    /* Steps bar — yatay scroll, snap ile aktif step ortalama */
    .steps-bar {
        margin: 0 -12px !important;
        padding: 0 !important;
        border-bottom: 1px solid var(--c-line);
    }
    .steps-bar > .d-flex {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x mandatory;
        gap: 0.25rem;
        padding: 0.5rem 0.75rem;
        justify-content: flex-start !important;
    }
    .steps-bar > .d-flex::-webkit-scrollbar { display: none; }
    .steps-bar .step {
        flex-shrink: 0;
        scroll-snap-align: center;
        height: auto !important;
        padding: 0.5rem 0.5rem !important;
        font-size: 0.78rem !important;
    }
    .steps-bar .step .fs-6 { font-size: 0.82rem !important; }
    .steps-bar .step .small { font-size: 0.68rem !important; }
    .steps-bar .step-arrow { font-size: 0.7rem; flex-shrink: 0; align-self: center; }

    /* Result section — sidebar alta, sticky kapalı, sefer kartları arası nefes */
    .sefer-liste-results .col-lg-9,
    .sefer-liste-results .col-lg-3 { width: 100%; max-width: 100%; flex: 0 0 100%; }
    .sefer-liste-results .card.sidebar { position: static !important; top: auto !important; }
    .sefer-liste-results .col-lg-3 .card.sidebar:first-child { margin-top: 1rem; }

    /* Date slider — kart içi yatay scroll zaten var, tıklanabilir alanı büyüt */
    .date-slider { gap: 6px !important; }
    .date-list { gap: 12px !important; }
    .date-item { min-width: 78px !important; padding: 8px !important; }
    .date-item strong { font-size: 16px !important; }
    .nav-btn { padding: 0.5rem 0.7rem !important; }

    /* Floating CTA bar varlığında alttan padding (içerik son eleman gizlenmesin) */
    body:has(.ferry-mobile-cta-bar) { padding-bottom: 76px; }

    /* Filter pills mobil offcanvas içinde tam genişlik */
    .ferry-mobile-offcanvas .filter-pill {
        border-radius: var(--r-sm) !important;
        padding: 0.7rem 1rem !important;
        text-align: left;
    }
    .ferry-mobile-offcanvas .btn-check:checked + .filter-pill,
    .ferry-mobile-offcanvas .filter-pill.active {
        background: var(--c-navy-mid) !important;
        color: #fff !important;
        border-color: var(--c-navy-mid) !important;
    }
}