html {
    scroll-behavior: smooth;
}

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

/* ── Scroll performansı ────────────────────────────────────────────────
   Ekran dışındaki görsel-ağırlıklı bölümler viewport'a girene kadar
   layout/paint/decode edilmez. Uzun ana sayfada scroll kasmasını ve
   büyük görsellerin tekrar-decode edilmesini büyük ölçüde azaltır.
   `contain-intrinsic-size: auto <h>` → son ölçülen yükseklik hatırlanır,
   scrollbar zıplaması olmaz. */
.cat-dest-section,
.dest-section,
.highlighted-tours,
.home-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

.hero {
    background-image: linear-gradient(135deg, #18181b 0%, #27272a 100%);
    background-size: cover;
    background-position: center;
    height: 75vh;
    min-height: 500px;      /* iPad yatayda (kısa yükseklik) arama kutusu sığsın */
    max-height: 820px;      /* iPad dikeyde (uzun) aşırı yüksek durmasın */
    padding: 24px 0;
    color: white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* Tek statik katman (translateZ) yeterli. `will-change` KULLANMA —
       kalıcı will-change gereksiz compositor katmanı + bellek baskısı yaratır. */
    transform: translateZ(0);
}

    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(160deg,
            rgba(0,0,0,.55) 0%,
            rgba(10,20,50,.28) 50%,
            rgba(0,0,0,.60) 100%);
        z-index: 0;
    }

    .hero-stage {
        position: relative;
        z-index: 1;
/*        background: rgba(255,255,255,.09);*/
/*        backdrop-filter: blur(18px) saturate(160%);
*/        /*-webkit-backdrop-filter: blur(18px) saturate(160%);*/
  /*      border: 1px solid rgba(255,255,255,.22);*/
        border-radius: 28px;
        padding: 52px 64px 42px;
        max-width: 1100px;
        width: calc(100% - 48px);
      /*  box-shadow:
            0 28px 80px rgba(0,0,0,.32),
            inset 0 1px 0 rgba(255,255,255,.22),
            inset 0 -1px 0 rgba(255,255,255,.06);*/
    }

    .hero h1 {
        font-size: 52px;
        font-weight: 800;
        letter-spacing: -.5px;
        line-height: 1.15;
        text-shadow: 0 2px 16px rgba(0,0,0,.5);
    }

    .hero p {
        font-size: 1.2rem;
        margin-top: 12px;
        opacity: .92;
        text-shadow: 0 1px 8px rgba(0,0,0,.45);
    }

@media (max-width: 900px) {
    .hero-stage {
        padding: 36px 28px 30px;
        width: calc(100% - 24px);
        border-radius: 22px;
    }
    .hero h1 { font-size: 2rem; }
    .hero p  { font-size: 1rem; }
}

.search-bar-horizontal {
    background: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    max-width: 1200px;
    min-width: 1200px;
    margin: 50px auto;
}

.tabs-horizontal {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.tab-button-horizontal {
    background: transparent;
    border: none;
    padding: 3px 10px;
    font-size: 16px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    transition: color 0.3s, border-bottom 0.3s;
    border-bottom: 2px solid transparent;
}

    .tab-button-horizontal.active {
        color: #ba1b21;
        border-bottom: 2px solid #ba1b21;
    }

    .tab-button-horizontal > img {
        width: 30px;
        object-fit: cover;
        padding: 4px;
        margin-bottom: 4px;
        margin-right: 0px;
    }

.tab-content-horizontal {
    display: none;
}

    .tab-content-horizontal.active {
        display: block;
    }

.form-horizontal {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.form-group {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.6);
    padding: 10px 15px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    flex: 1;
}

    .form-group i {
        font-size: 18px;
        color: #666666;
    }

input,
select {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #333;
    width: 100%;
}

.btn-search-horizontal {
    background: #fff;
    color: #666666;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 15px;
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.3s;
    flex-grow: 1;
    max-width: 250px;
    text-align: center;
}

    .btn-search-horizontal:hover {
        color: #ba1b21;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .search-bar-horizontal {
        min-width: auto;
        width: 95%;
    }

    .form-horizontal {
        flex-direction: column;
        gap: 10px;
        justify-content: center;
    }

    .form-group {
        width: 100%;
    }

    .btn-search-horizontal {
        width: 100%;
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .tab-button-horizontal {
        font-size: 14px;
        padding: 8px 15px;
    }

    .btn-search-horizontal {
        font-size: 14px;
        padding: 10px;
    }
}

.services .card {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
}


.btn-primary {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
}

    .btn-primary:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    }

.tour-advice-row .card {
    border-radius: 10px;
}

.tour-advice-row .card-body {
    border-radius: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    /*    color:white;
    background-color: #003049;*/
}

.tour-advice-row .card img {
    height: 180px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}


/* ══════════ KATEGORİLER — DAİRESEL ══════════ */

/* ══════════════════════════════════════════
   KATEGORİ DESTİNASYON KARTLARI
══════════════════════════════════════════ */
.cat-dest-section {
    padding: 44px 0 46px;
    background: #fff;
    /* Gerçek yükseklik ~400px → paylaşılan 600px tahminini ez, scrollbar zıplamasını gider */
    contain-intrinsic-size: auto 400px;
}

.cat-dest-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
}
.cat-dest-eyebrow {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #BA1B21;
    margin-bottom: 6px;
}
.cat-dest-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #111827;
    letter-spacing: -.03em;
    margin: 0;
    line-height: 1.15;
}
.cat-dest-all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .84rem;
    font-weight: 700;
    color: #64748b;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, gap .2s;
}
.cat-dest-all:hover { color: #111827; gap: 10px; }

/* Yatay kaydırma kapsayıcı */
.cat-dest-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.cat-dest-scroll::-webkit-scrollbar { display: none; }

/* Kart */
.cat-dest-card {
    position: relative;
    flex-shrink: 0;
    width: 178px;
    height: 224px;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    scroll-snap-align: start;
    transition: box-shadow .25s;
    background: #111827;
}
@media (hover: hover) and (pointer: fine) {
    .cat-dest-card { transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s; }
    .cat-dest-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 16px 40px rgba(0,0,0,.16); }
}

/* Öne çıkan kart — ilk kart daha geniş */
.cat-dest-featured {
    width: 236px;
    height: 224px;
}

/* Kart fotoğrafı — gerçek <img> (decoding=async → decode ana thread dışında,
   background-image'ın senkron decode donmasını önler) */
.cat-dest-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.4,0,.2,1);
}
/* will-change YALNIZ hover anında — kalıcı katman bellek baskısı yaratır */
@media (hover: hover) and (pointer: fine) {
    .cat-dest-card:hover .cat-dest-img { transform: scale(1.07); will-change: transform; }
}

/* Gradient overlay */
.cat-dest-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.05) 0%,
        rgba(0,0,0,.1)  40%,
        rgba(0,0,0,.72) 100%
    );
}

/* Tur sayısı — üst sağ */
.cat-dest-count {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    border-radius: 20px;
    padding: 3px 9px;
    z-index: 2;
}

/* Alt içerik */
.cat-dest-body {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 16px 16px 18px;
    z-index: 2;
}
.cat-dest-name {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -.015em;
    margin-bottom: 4px;
}
.cat-dest-featured .cat-dest-name { font-size: 1.15rem; }

.cat-dest-price {
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255,255,255,.75);
}
.cat-dest-desc {
    font-size: .72rem;
    color: rgba(255,255,255,.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 768px) {
    .cat-dest-section { padding: 36px 0 40px; }
    .cat-dest-card    { width: 160px; height: 220px; }
    .cat-dest-featured { width: 220px; }
    .cat-dest-title   { font-size: 1.3rem; }
    .cat-dest-header  { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* ────────────────── ESKİ DAİRE STİLLER (aşağıda) ────────────────── */
.cat-circles-outer {
    background: #f5f7fa;
    padding: 22px 0 26px;
    border-bottom: 1px solid #eaeff5;
}

.cat-circles-bar {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.cat-circles-scroll {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
    padding: 2px 0 4px;
    /* Justify evenly when items fit; scroll when they don't */
    justify-content: flex-start;
}
.cat-circles-scroll::-webkit-scrollbar { display: none; }

/* Each circle item */
.cat-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    flex-shrink: 0;
    padding: 6px 14px 4px;
    border-radius: 12px;
    transition: background .18s;
}
.cat-circle-item:hover { background: rgba(255,255,255,.8); }

.cat-circle-img {
    width: 62px; height: 62px;
    border-radius: 50%;
    overflow: hidden;
    border: 2.5px solid #e2e8f0;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    flex-shrink: 0;
}
.cat-circle-item:hover .cat-circle-img {
    border-color: #BA1B21;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(186,27,33,.18);
}
.cat-circle-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}
.cat-circle-item:hover .cat-circle-img img { transform: scale(1.08); }

.cat-circle-name {
    font-size: .74rem;
    font-weight: 600;
    color: #475569;
    text-align: center;
    max-width: 80px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .18s;
}
.cat-circle-item:hover .cat-circle-name { color: #BA1B21; }

/* "Tümü" butonu */
.cat-circle-all {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    flex-shrink: 0;
    padding: 6px 14px 4px;
    border-radius: 12px;
    border-left: 1px solid #dde3ed;
    margin-left: 4px;
    transition: background .18s;
}
.cat-circle-all:hover { background: rgba(255,255,255,.8); }

.cat-circle-all-icon {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: #fff;
    border: 2px dashed #c8d4e3;
    display: flex; align-items: center; justify-content: center;
    color: #BA1B21;
    font-size: 1.3rem;
    transition: border-color .2s, background .2s, transform .2s;
}
.cat-circle-all:hover .cat-circle-all-icon {
    border-color: #BA1B21;
    background: #fff5f5;
    transform: translateY(-3px);
}
.cat-circle-all .cat-circle-name { color: #BA1B21; font-weight: 700; }

@media (max-width: 576px) {
    .cat-circle-img,
    .cat-circle-all-icon { width: 52px; height: 52px; }
    .cat-circle-name { font-size: .68rem; }
    .cat-circle-item,
    .cat-circle-all { padding: 4px 10px 4px; }
}


/* ══════════ POPÜLER DESTİNASYONLAR ══════════ */

.dest-section {
    padding: 72px 0 80px;
    background: #fff;
}

/* Header */
.dest-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
}
.dest-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #BA1B21;
    margin-bottom: 10px;
}
.dest-eyebrow::before {
    content: '';
    width: 28px; height: 2px;
    background: #BA1B21;
    border-radius: 2px;
    flex-shrink: 0;
}
.dest-title {
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
    font-weight: 800;
    color: #111827;
    margin: 0;
    letter-spacing: -.025em;
    line-height: 1.12;
}
.dest-see-all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .84rem;
    font-weight: 700;
    color: #64748b;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, gap .2s;
    margin-bottom: 4px;
}
.dest-see-all:hover { color: #111827; gap: 10px; }

/* Üniform "kartpostal" ızgarası — otomatik saran, tutarlı, premium.
   Eski bento (tek dev görsel + 520px sabit yükseklik) çok yer kaplıyordu. */
.dest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

/* Büyük kart ayrımı kaldırıldı — hepsi aynı zarif boyutta */
.dest-card--large { grid-row: auto; grid-column: auto; }

/* Base card styles */
.dest-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    display: block;
    text-decoration: none;
    cursor: pointer;
    aspect-ratio: 4 / 5;           /* tutarlı dikey kartpostal oranı */
    box-shadow: 0 6px 20px -14px rgba(17,24,39,.5);
}
.dest-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.25,.46,.45,.94);
    display: block;
}
/* will-change YALNIZ hover anında */
.dest-card:hover img { transform: scale(1.06); will-change: transform; }

/* Dark gradient overlay */
.dest-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.2) 45%,
        rgba(0,0,0,.0) 70%
    );
    pointer-events: none;
}

/* Text info */
.dest-info {
    position: absolute;
    bottom: 14px;
    left: 16px;
    right: 46px;
    z-index: 2;
}
.dest-info h3 {
    font-size: 1.12rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 3px;
    line-height: 1.18;
    letter-spacing: -.01em;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.dest-card--large .dest-info h3 { font-size: 1.12rem; }
.dest-meta {
    font-size: .75rem;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Arrow button */
.dest-arrow {
    position: absolute;
    bottom: 13px;
    right: 13px;
    z-index: 2;
    width: 32px; height: 32px;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: .9rem;
    transition: background .2s, transform .2s;
}
.dest-card:hover .dest-arrow {
    background: #BA1B21;
    border-color: #BA1B21;
    transform: translate(2px, -2px);
}

/* Responsive — auto-fill kolon sayısını kendi ayarlar; sadece ince ayar */
@media (max-width: 900px) {
    .dest-header { flex-direction: column; align-items: flex-start; gap: 14px; }
    .dest-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
}
@media (max-width: 540px) {
    /* Telefon: 1-2-2 düzeni — ilk kart tam genişlik, altına 2×2 (maks 5) */
    .dest-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .dest-card { aspect-ratio: 3 / 4; }
    .dest-info h3 { font-size: 1rem; }

    /* Öne çıkan ilk kart: satırın tamamını kaplar, geniş kartpostal oranı */
    .dest-grid > .dest-card:first-child {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 10;
    }
    .dest-grid > .dest-card:first-child .dest-info h3 { font-size: 1.2rem; }
    .dest-grid > .dest-card:first-child .dest-info { bottom: 16px; left: 18px; }
}

/* ─────────── */

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

    .section-header h2 {
        font-size: 24px;
        margin: 0;
    }

    .section-header a {
        text-decoration: none;
    }


/* ══════════ BÜLTEN (HOMEPAGE) ══════════ */

.nl-section {
    padding: 0 0 64px;
    background: #fff;
}

.nl-card {
    background: #BA1B21;
    border-radius: 20px;
    padding: 52px 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Decorative circles */
.nl-deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.nl-deco-1 {
    bottom: -50px; right: -50px;
    width: 240px; height: 240px;
    background: rgba(0,0,0,.13);
}
.nl-deco-2 {
    bottom: 30px; right: 130px;
    width: 130px; height: 130px;
    background: rgba(0,0,0,.08);
}
.nl-deco-3 {
    top: -30px; right: 80px;
    width: 80px; height: 80px;
    background: rgba(255,255,255,.05);
}

.nl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #f59e0b;
    margin-bottom: 14px;
}
.nl-eyebrow::before {
    content: '';
    width: 24px; height: 2px;
    background: #f59e0b;
    border-radius: 2px;
}

.nl-title {
    font-size: 1.9rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 14px;
    letter-spacing: -.02em;
}

.nl-desc {
    font-size: .88rem;
    color: rgba(255,255,255,.75);
    line-height: 1.6;
    margin: 0;
    max-width: 420px;
}

.nl-right { position: relative; z-index: 1; }

.nl-input-wrap {
    display: flex;
    background: #fff;
    border-radius: 12px;
    padding: 6px 6px 6px 18px;
    align-items: center;
    box-shadow: 0 4px 24px rgba(0,0,0,.15);
    margin-bottom: 12px;
}
.nl-input-wrap input[type="email"] {
    flex: 1;
    border: none;
    outline: none;
    font-size: .92rem;
    color: #1e293b;
    background: transparent;
    min-width: 0;
}
.nl-input-wrap input[type="email"]::placeholder { color: #a0aec0; }
.nl-input-wrap button {
    background: #111827;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 22px;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    transition: background .2s;
}
.nl-input-wrap button:hover { background: #071e38; }

.nl-note {
    font-size: .74rem;
    color: rgba(255,255,255,.5);
    margin: 0;
    text-align: center;
}

@media (max-width: 900px) {
    .nl-card {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 40px 32px;
    }
    .nl-title { font-size: 1.55rem; }
    .why-title { font-size: 1.75rem; }
}
@media (max-width: 540px) {
    .nl-card { padding: 32px 22px; border-radius: 14px; }
    .nl-input-wrap { flex-direction: column; padding: 12px; gap: 10px; border-radius: 10px; }
    .nl-input-wrap input[type="email"] { width: 100%; padding: 4px 0; }
    .nl-input-wrap button { width: 100%; justify-content: center; }
}

/* ─────────── */

.tour-catalogues {
    margin-bottom: 50px;
    margin-top: 50px;
}

.btn-details {
    border: 1px solid #666;
    color: #666;
    transition: all 0.3s ease;
    border-radius: 12px;
}

    .btn-details:hover {
        background-color: white;
        color: #ba1b21;
        border-color: white;
    }


.cssbuttons-io-button {
    background: #a370f0;
    color: white;
    font-family: inherit;
    padding: 0.35em;
    padding-left: 1.2em;
    font-size: 17px;
    font-weight: 500;
    border-radius: 0.9em;
    border: none;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    box-shadow: inset 0 0 1.6em -0.6em #714da6;
    overflow: hidden;
    position: relative;
    height: 2.8em;
    padding-right: 3.3em;
    cursor: pointer;
}

    .cssbuttons-io-button .icon {
        background: white;
        margin-left: 1em;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.2em;
        width: 2.2em;
        border-radius: 0.7em;
        box-shadow: 0.1em 0.1em 0.6em 0.2em #7b52b9;
        right: 0.3em;
        transition: all 0.3s;
    }

    .cssbuttons-io-button:hover .icon {
        width: calc(100% - 0.6em);
    }

    .cssbuttons-io-button .icon svg {
        width: 1.1em;
        transition: transform 0.3s;
        color: #7b52b9;
    }

    .cssbuttons-io-button:hover .icon svg {
        transform: translateX(0.1em);
    }

    .cssbuttons-io-button:active .icon {
        transform: scale(0.95);
    }



.card-subtitle {
    font-size: 0.875rem; /* Küçük bir font boyutu */
    color: #6c757d; /* Daha açık bir renk tonu */
}

.fading-line {
    width: 100%;
    height: 1px; /* Adjust the thickness of the line */
    background: linear-gradient(to right, transparent, #9DA39B, transparent); /* Change #000 to the color of the line */
    margin: 0 auto;
    position: relative;
}

.hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.visible {
    opacity: 1;
    transform: translateY(0);
}

.ad-card {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #BA1B21 0%, #7a1118 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 0 20px;
    margin-bottom: 100px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}


    .ad-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1;
    }

    .ad-card * {
        position: relative;
        z-index: 2;
    }

    .ad-card .text-container {
        text-align: left;
    }

    .ad-card h1 {
        margin-bottom: 5px;
        font-size: 30px;
        padding: 0;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        font-weight: bold;
        color: #FFD700; /* Gold color for emphasis on discount */
    }

    .ad-card p {
        font-size: 24px;
        margin: 10px 0 0 0;
        padding: 0;
        font-weight: bold;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }

    .ad-card a {
        text-decoration: none;
        padding: 10px 30px;
        font-size: 18px;
        margin-right: 50px;
        color: white;
        background: transparent;
        border: 1px solid white;
        border-radius: 12px;
        cursor: pointer;
        transition: transform 0.3s, box-shadow 0.3s;
    }

        .ad-card a:hover {
            border: 1px solid #BA1B21;
            background: #BA1B21;
            transform: scale(1.1);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
        }

.button {
    position: relative;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    padding-block: 0.5rem;
    padding-inline: 1.25rem;
    background-color: #BA1B21;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffff;
    gap: 10px;
    font-weight: bold;
    border: 3px solid #ffffff4d;
    outline: none;
    overflow: hidden;
    font-size: 15px;
    cursor: pointer;
}

.icon {
    width: 24px;
    height: 24px;
    transition: all 0.3s ease-in-out;
}

.button:hover {
    transform: scale(1.05);
    border-color: #fff9;
}

    .button:hover .icon {
        transform: translate(4px);
    }

    .button:hover::before {
        animation: shine 1.5s ease-out infinite;
    }

.button::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient( 120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70% );
    top: 0;
    left: -100px;
    opacity: 0.6;
}

@keyframes shine {
    0% {
        left: -100px;
    }

    60% {
        left: 100%;
    }

    to {
        left: 100%;
    }
}

.price {
    font-weight: bolder;
}

.highlighted-tours {
    margin: 20px;
    border-radius: 16px;
}

.highlighted-tours .carousel-item {
    transition: transform 0.5s ease-in-out;
    margin-top: 20px;
}

.carousel-inner {
    padding: 20px;
    overflow: hidden;
}

.carousel-inner img {
    height: 230px;
    object-fit: cover;
    width: 100%;
}

.highlighted-tours .badge {
    font-size: 0.75rem;
    border-radius: 20px;
    box-shadow: 0px 5px 10px rgba(0,0,0,.1);
}

.carousel-control-prev-icon {
    position: absolute;
    left: -25px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ba1b21' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
    position: absolute;
    right: -25px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ba1b21' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

/* ── SADECE Mobil + Tablet (≤991): carousel yerine yatay kaydırma ──
   Masaüstü (≥992) hiç dokunulmadı — orijinal carousel + oklar aynen kalır.
   Bu bantta: yan oklar gizli, aktif slide'ın kartları yatay kaydırılır,
   altta ince slider bar. iPad dikey + yatay (döndürme) bu banda girer. */
@media (max-width: 991px) {
    .highlighted-tours .carousel-control-prev,
    .highlighted-tours .carousel-control-next { display: none !important; }

    .highlighted-tours .carousel-item .row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
        scrollbar-width: thin;                 /* Firefox */
        scrollbar-color: #cfd4da #eef0f3;
    }
    .highlighted-tours .carousel-item .col-md-4 {
        flex: 0 0 44%;                          /* tablet: ~2 kart */
        scroll-snap-align: start;
    }
    /* İnce slider bar (alt) — WebKit/Safari */
    .highlighted-tours .carousel-item .row::-webkit-scrollbar { height: 6px; }
    .highlighted-tours .carousel-item .row::-webkit-scrollbar-track { background: #eef0f3; border-radius: 20px; }
    .highlighted-tours .carousel-item .row::-webkit-scrollbar-thumb { background: #cfd4da; border-radius: 20px; }
    .highlighted-tours .carousel-item .row::-webkit-scrollbar-thumb:hover { background: #BA1B21; }
}

/* Telefon: ~1.2 kart (sonraki kartın ucu görünür) */
@media (max-width: 640px) {
    .highlighted-tours .carousel-item .col-md-4 { flex: 0 0 82%; }
    .carousel-inner { padding: 10px 12px; }
    .carousel-inner img { height: 180px; }
}

/* ══════════════════════════════════════════════
   ANA SAYFA — MOBİL ≤767px
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Hero: %10 kısa, daha kompakt ── */
    .hero {
        height: auto !important;
        min-height: 74svh;
        align-items: flex-start;
        padding: 0;
    }
    .hero-stage {
        padding: 30px 16px 24px;
        width: 100%;
        align-items: center;
        text-align: center;
        justify-content: flex-start;
    }
    /* Slogan: daha sıkışık, görsel ağırlık merkezi */
    .hero h1 {
        font-size: 1.65rem !important;
        letter-spacing: -.3px;
        margin-bottom: 8px !important;
        line-height: 1.2 !important;
    }
    .hero p {
        font-size: .88rem !important;
        margin-top: 0 !important;
        margin-bottom: 20px !important;
        opacity: .88;
        max-width: 88%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ══════════════════════════════════════════════
   HERO ARAMA — mobil + tablet dikey "app içi" tasarım (≤991px)
   ══════════════════════════════════════════════ */
@media (max-width: 991px) {

    /* Not: seçiciler .hs3-wrap ile kapsanır — böylece taban (desktop) stillerini
       özgüllükle geçerler ve !important gerekmez. */

    /* Konteyner: hero-stage'in tam genişliği */
    .hero .hs3-wrap { max-width: 100%; margin-top: 14px; }

    /* ── Segmented tab control ── */
    .hs3-wrap .hs3-tabs {
        display: flex;
        background: rgba(255,255,255,.12);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 14px;
        padding: 4px;
        gap: 0;
        margin-bottom: 12px;
    }
    .hs3-wrap .hs3-tab {
        flex: 1;
        background: transparent;
        border: none;
        border-radius: 10px;
        padding: 11px 10px;
        color: rgba(255,255,255,.78);
        font-size: .84rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: background .22s, color .22s;
    }
    .hs3-wrap .hs3-tab i { font-size: .95rem; }
    .hs3-wrap .hs3-tab-active {
        background: #fff;
        color: #111827;
        box-shadow: 0 2px 10px rgba(0,0,0,.18);
    }
    .hs3-wrap .hs3-tab-active i { color: #374151; }

    /* ── Ana panel: yumuşak kart. Mobilde pasif panel display:none (grid boşluğu olmasın) ── */
    .hs3-wrap .hs3-panel {
        border-radius: 22px;
        overflow: hidden;
        box-shadow: 0 22px 60px rgba(0,0,0,.32);
        background: #fff;
    }
    .hs3-wrap .hs3-panel:not(.hs3-panel-active) { display: none; }

    /* Alan dizilimi — dikey yığın */
    .hs3-wrap .hs3-fields {
        flex-direction: column;
        min-height: auto;
        padding: 8px;
        gap: 0;
    }

    /* ── Otel: Yetişkin/Çocuk yan yana grid ── */
    #hs3-hotels .hs3-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 0;
    }
    #hs3-hotels #hs3HotelQWrap,
    #hs3-hotels #hs3DateField,
    #hs3-hotels .hs3-field--rooms,
    #hs3-hotels .hs3-btn { grid-column: 1 / -1; }

    /* ── Alan satırı — büyük tap-target, sol ikon rozeti ── */
    .hs3-wrap .hs3-field {
        flex: 1 1 auto;
        padding: 15px 14px 15px 54px;
        min-height: 62px;
        border-radius: 12px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        background: transparent;
        cursor: pointer;
        transition: background .15s;
    }
    .hs3-wrap .hs3-field:hover:not(:focus-within) { background: transparent; }
    .hs3-wrap .hs3-field:focus-within { background: #f8fafc; }
    .hs3-wrap .hs3-field::after { display: none; }

    /* Alanlar arası ince ayraç: ilk hariç her alana üstten yatay çizgi.
       (vline <div>'leri kaldırıldığı için alanlar artık bitişik-kardeş.) */
    .hs3-wrap .hs3-field + .hs3-field::before {
        content: '';
        position: absolute;
        top: 0; left: 54px; right: 14px; bottom: auto;
        width: auto; height: 1px;
        background: #e5e7eb;
    }
    /* Yan yana Yetişkin|Çocuk: Çocuk hücresine dikey ayraç (dead selector'ların yerine) */
    .hs3-wrap .hs3-field + .hs3-field--split::before {
        top: 12px; bottom: 12px;
        left: 0; right: auto;
        width: 1px; height: auto;
    }

    /* Label — küçük caption (okunabilirlik için .62rem) */
    .hs3-wrap .hs3-lbl {
        font-size: .62rem;
        letter-spacing: .9px;
        color: #6b7280;
        margin-bottom: 0;
        text-transform: uppercase;
        line-height: 1;
        font-weight: 800;
        gap: 0;
    }

    /* İkon — sol tarafta yuvarlak nötr kutu */
    .hs3-wrap .hs3-lbl > i {
        position: absolute;
        left: 12px; top: 50%;
        transform: translateY(-50%);
        width: 30px; height: 30px;
        background: #f3f4f6;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .88rem;
        color: #4b5563;
        z-index: 2;
        margin: 0;
    }

    /* Değer (input/select) — select'te chevron için sağ boşluk korunur */
    .hs3-wrap .hs3-inp, .hs3-wrap .hs3-sel {
        font-size: .96rem;
        font-weight: 600;
        color: #111827;
        padding: 0;
        background-color: transparent;
        line-height: 1.35;
    }
    .hs3-wrap .hs3-sel { padding-right: 16px; }
    .hs3-wrap .hs3-inp::placeholder { color: #94a3b8; font-weight: 500; }

    /* Otel tarih segmenti */
    #hs3DateField .gdr-seg { gap: 6px; }
    #hs3DateField .gdr-val { font-size: .96rem; font-weight: 600; color: #111827; }
    #hs3DateField .gdr-val.gdr-empty { color: #94a3b8; font-weight: 500; }

    /* ── CTA buton — tek kırmızı vurgu ── */
    .hs3-wrap .hs3-btn {
        margin: 10px 4px 4px;
        padding: 15px;
        border-radius: 12px;
        background: #BA1B21;
        box-shadow: 0 4px 12px rgba(186,27,33,.22);
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        font-size: .9rem;
        font-weight: 700;
        letter-spacing: .3px;
        min-width: unset;
    }
    .hs3-wrap .hs3-btn i { font-size: 1.02rem; }
    .hs3-wrap .hs3-btn:active { transform: scale(.985); }

    /* ── Popüler chips: alt şerit; sağ kenar maskesi kaydırılabilirliği ima eder ── */
    .hs3-wrap .hs3-hints {
        background: #f9fafb;
        border-top: 1px solid #f0f0f2;
        border-radius: 0;
        padding: 11px 12px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 7px;
        margin-top: 0;
        align-items: center;
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
    }
    .hs3-wrap .hs3-hints::-webkit-scrollbar { display: none; }
    .hs3-wrap .hs3-hint-lbl {
        color: #6b7280;
        font-size: .72rem;
        font-weight: 700;
        flex-shrink: 0;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .hs3-wrap .hs3-hint-lbl i { color: #f59e0b; font-size: .82rem; }
    .hs3-wrap .hs3-chip {
        background: #fff;
        border: 1px solid #e5e7eb;
        color: #374151;
        font-size: .76rem;
        font-weight: 600;
        padding: 5px 13px;
        border-radius: 20px;
        flex-shrink: 0;
        transition: background .18s, border-color .18s, color .18s;
        white-space: nowrap;
    }
    .hs3-wrap .hs3-chip:hover, .hs3-wrap .hs3-chip:active {
        background: #f3f4f6;
        border-color: #9ca3af;
        color: #111827;
    }

    /* Autocomplete dropdown mobil pozisyonu */
    .hs3-wrap #hs3AcDrop, .hs3-wrap #hs3HotelAcDrop {
        top: calc(100% + 6px);
        left: 4px;
        right: 4px;
        max-height: 320px;
        border-radius: 14px;
        box-shadow: 0 12px 36px rgba(0,0,0,.32);
    }
}

/* ══════════════════════════════════════════════
   ANA SAYFA — MOBİL ≤767px (devam)
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Carousel: Bootstrap animasyonu devre dışı, düz scroll ── */
    .highlighted-tours.py-5 {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
        margin: 0 !important;
    }
    .highlighted-tours .text-center.mb-4 {
        font-size: 1.05rem !important;
        letter-spacing: 1px !important;
        margin-bottom: 14px !important;
    }
    /* Carousel: tüm item'lar görünür, yatay scroll */
    #tourCarousel.carousel { overflow: visible; }
    #tourCarousel .carousel-inner {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 0 12px !important;
        transform: none !important;
    }
    #tourCarousel .carousel-inner::-webkit-scrollbar { display: none; }
    #tourCarousel .carousel-item {
        display: flex !important;
        flex-shrink: 0 !important;
        width: auto !important;
        transform: none !important;
        transition: none !important;
        opacity: 1 !important;
        position: relative !important;
        float: none !important;
        margin-right: 0 !important;
    }
    #tourCarousel .carousel-item .row {
        flex-wrap: nowrap !important;
        margin: 0 !important;
    }
    #tourCarousel .carousel-item .col-md-4 {
        flex: 0 0 75vw !important;
        width: 75vw !important;
        max-width: 75vw !important;
        scroll-snap-align: start;
        padding: 0 6px !important;
    }
    /* Ok + gösterge butonları gizle */
    #tourCarousel .carousel-control-prev,
    #tourCarousel .carousel-control-next,
    #tourCarousel .carousel-indicators { display: none !important; }
    /* Carousel dış padding'i kaldır (oklar için px-3 vardı) */
    #tourCarousel.px-3 { padding-left: 0 !important; padding-right: 0 !important; }

    /* ── Section padding: masaüstünün yarısı ── */
    .home-section        { padding: 36px 0 !important; }
    .home-section.bg-alt { padding: 36px 0 !important; }

    /* ── Section başlıkları: dikey, !important ile inline override ── */
    .section-title-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }
    .section-title-wrap h2 { font-size: 1.25rem !important; }
    .see-all { font-size: .78rem !important; }

    /* ── Tur kartı grid → Netflix yatay scroll ── */
    .home-section .row.row-cols-2 {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 10px !important;
    }
    .home-section .row.row-cols-2::-webkit-scrollbar { display: none; }
    .home-section .row.row-cols-2 > .col {
        flex: 0 0 72% !important;
        width: 72% !important;
        max-width: 72% !important;
        scroll-snap-align: start;
    }
    .home-section .row.row-cols-2 > .col:last-child { padding-right: 20px !important; }
    .home-section .stc-img { aspect-ratio: 16/9; }

    /* ── Destinasyonlar ── */
    .dest-section { padding: 36px 0 40px !important; }
    .dest-title   { font-size: 1.35rem !important; }

    /* ── Kart fiyat satırı: tek satır garantisi ── */
    .stc-price      { font-size: .9rem !important; }
    .stc-from       { font-size: .57rem !important; }
    .stc-orig-price { font-size: .62rem !important; }

}

/* ── Tablet dikey (768–991): tur kartı gridleri tek satır yatay scroll ──
   Masaüstünde grid, mobilde zaten Netflix scroll. Tablet dikeyde de
   4 karttan sonra alt satıra sarmak yerine tek satırda kaydırılabilir yap.
   ~3.5 kart göstererek kaydırılabilir olduğunu ima eder. */
@media (min-width: 768px) and (max-width: 991px) {
    .home-section .row.row-cols-2 {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 10px !important;
    }
    .home-section .row.row-cols-2::-webkit-scrollbar { display: none; }
    .home-section .row.row-cols-2 > .col {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;
        scroll-snap-align: start;
    }
    .home-section .row.row-cols-2 > .col:last-child { padding-right: 20px !important; }
}

.highlighted-tours .cssbuttons-io-button {
    background: white;
    color: #ba1b21;
    font-family: inherit;
    padding: 0.15em;
    font-size: 17px;
    font-weight: 500;
    border-radius: 0.9em;
    border: none;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    box-shadow: inset 0 0 1.6em -0.6em white;
    overflow: hidden;
    position: relative;
    height: 2.8em;
    padding-right: 3.3em;
    cursor: pointer;
}

    .highlighted-tours .cssbuttons-io-button .icon {
        background: #ba1b21;
        margin-left: 1em;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.2em;
        width: 2.2em;
        border-radius: 0.7em;
        box-shadow: 0.1em 0.1em 0.6em 0.2em white;
        right: 0.3em;
        transition: all 0.3s;
    }

    .highlighted-tours .cssbuttons-io-button:hover .icon {
        width: calc(100%);
    }

    .highlighted-tours .cssbuttons-io-button .icon svg {
        width: 1.1em;
        transition: transform 0.3s;
        color: white;
    }

    .highlighted-tours .cssbuttons-io-button:hover .icon svg {
        transform: translateX(0.05);
    }

    .highlighted-tours .cssbuttons-io-button:active .icon {
        transform: scale(1);
    }

/* ═══════════════════════════════════════════════
   HOME PAGE — extracted from Home.cshtml inline styles
   ═══════════════════════════════════════════════ */

/* Hero Search v3 */
.hs3-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(186,27,33,.88);color:#fff;font-size:.74rem;font-weight:700;padding:5px 14px;border-radius:20px;margin-bottom:16px;letter-spacing:.3px;}
.hs3-badge i{font-size:.72rem;}
.hs3-wrap{width:100%;max-width:940px;margin:20px auto 0;position:relative;z-index:2;}
.hs3-tabs{display:flex;gap:2px;padding:0;}
.hs3-tab{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.25);border-bottom:none;color:rgba(255,255,255,.8);font-size:.84rem;font-weight:700;padding:10px 24px;border-radius:12px 12px 0 0;cursor:pointer;transition:background .18s,color .18s;}
.hs3-tab:hover{background:rgba(255,255,255,.25);color:#fff;}
.hs3-tab-active{background:#fff;color:#111827;border-color:#fff;}
/* Panel sahnesi: iki panel aynı grid hücresinde üst üste → kart yüksekliği en uzun
   panele göre oturur; sekme değişiminde zıplama olmaz (JS eşitleme gerekmez). */
.hs3-stage{display:grid;}
.hs3-panel{grid-area:1 / 1;background:#fff;border-radius:0 16px 16px 16px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 16px 40px -14px rgba(16,24,40,.24);}
.hs3-panel:not(.hs3-panel-active){visibility:hidden;pointer-events:none;}
.hs3-fields{display:flex;align-items:stretch;min-height:82px;}
.hs3-field{flex:1;display:flex;flex-direction:column;justify-content:center;padding:18px 22px;cursor:pointer;transition:background .15s;min-width:0;position:relative;}
.hs3-field--wide{flex:2;}
.hs3-field--date{flex:1.6;}
.hs3-field--adults{flex:0 0 104px;}
.hs3-field--children{flex:0 0 96px;}
/* Alanlar arası dikey ayraç — eski .hs3-vline <div>'lerinin yerine pseudo-element */
.hs3-field + .hs3-field::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:1px;background:#edf2f7;}
.hs3-field::after{content:'';position:absolute;bottom:0;left:14px;right:14px;height:2px;border-radius:2px 2px 0 0;background:#334155;transform:scaleX(0);transition:transform .2s;}
.hs3-field:focus-within::after{transform:scaleX(1);}
.hs3-field:focus-within{background:#f8fafc;}
.hs3-field:hover:not(:focus-within){background:#fafbfd;}
.hs3-lbl{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#2d3748;margin-bottom:6px;display:flex;align-items:center;gap:5px;white-space:nowrap;}
.hs3-lbl i{color:#4b5563;}
.hs3-inp,.hs3-sel{border:none;outline:none;background:transparent;font-size:.96rem;font-weight:500;color:#1a202c;width:100%;padding:0;}
/* Select: görünür chevron (açılır menü olduğu belli olsun) */
.hs3-sel{appearance:none;-webkit-appearance:none;cursor:pointer;color:#4a5568;padding-right:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:13px;}
.hs3-inp::placeholder{color:#b0bac5;font-weight:400;}
.hs3-date-row{display:flex;flex:2;align-items:stretch;}
.hs3-date-row .hs3-field{flex:1;}
.hs3-btn{background:#BA1B21;color:#fff;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 36px;border-top-right-radius:16px;font-weight:700;font-size:.78rem;letter-spacing:.3px;transition:background .18s;flex-shrink:0;min-width:110px;}
.hs3-btn i{font-size:1.4rem;}
.hs3-btn:hover{background:#9e1519;}
.hs3-hints {display: flex;align-items: center;gap: 8px;padding: 10px 18px 14px;background: #f8f9fc;border-top: 1px solid #edf2f7; border-radius: 0 16px 16px 16px;flex-wrap: wrap;}
.hs3-hint-lbl{font-size:.74rem;color:#718096;font-weight:600;white-space:nowrap;}
.hs3-chip{background:#fff;border:1.5px solid #e2e8f0;color:#4a5568;font-size:.75rem;font-weight:600;padding:4px 14px;border-radius:20px;cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
.hs3-chip:hover{border-color:#9ca3af;color:#111827;background:#f3f4f6;}
/* Not: mobil (≤767) hs3 tasarımı yukarıdaki "ANA SAYFA — MOBİL" bloğunda,
   "app içi" görünümüyle baştan yazıldı (segmented tabs + icon-badge alanlar). */

/* Carousel cards */
.home-tour-card{border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(28,25,23,.08);transition:box-shadow .24s;height:100%;display:flex;flex-direction:column;background:#fff;}
.htc-img-wrap{position:relative;overflow:hidden;aspect-ratio:16/10;flex-shrink:0;}
.htc-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s;}
/* Hover efektleri yalnızca gerçek pointer cihazlarda (fare) — mobil dokunuşta transform flicker'ı önlenir */
@media (hover: hover) and (pointer: fine) {
    .home-tour-card{transition:transform .24s,box-shadow .24s;}
    .home-tour-card:hover{transform:translateY(-5px);box-shadow:0 14px 36px rgba(28,25,23,.15);}
    .home-tour-card:hover .htc-img-wrap img{transform:scale(1.05);}
}
.htc-fav{position:absolute;top:10px;right:10px;z-index:3;}
.htc-badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:4px;z-index:3;max-width:calc(100% - 56px);}
.htc-badge{display:inline-flex;align-items:center;gap:4px;color:#fff;font-size:.6rem;font-weight:700;padding:3px 8px;border-radius:20px;box-shadow:0 2px 6px rgba(0,0,0,.25);white-space:nowrap;}
.htc-type-chip{position:absolute;bottom:10px;left:10px;background:rgba(255,255,255,.95);color:#334155;font-size:.67rem;font-weight:700;padding:3px 10px;border-radius:20px;z-index:3;}
.htc-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1;}
.htc-region{display:inline-flex;align-items:center;font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#64748b;background:#f1f5f9;padding:2px 8px;border-radius:20px;margin-bottom:7px;}
.htc-title{font-weight:700;font-size:.97rem;margin-bottom:6px;color:#1e293b;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.htc-meta{font-size:.76rem;color:#94a3b8;display:flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.htc-meta i{color:#BA1B21;flex-shrink:0;font-size:.8rem;}
.htc-divider{height:1px;background:#f1f5f9;margin:12px 0;}
.htc-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;}
.htc-from{font-size:.65rem;color:#94a3b8;font-weight:500;letter-spacing:.02em;margin-bottom:1px;}
.htc-price{font-size:1.18rem;font-weight:700;color:#111827;letter-spacing:-.01em;}
.htc-price.price-nodata{font-size:.78rem;font-weight:600;color:#94a3b8;letter-spacing:0;white-space:normal;}
.htc-link{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:700;color:#475569;text-decoration:none;padding:6px 12px;border-radius:8px;background:#f8fafc;border:1px solid #e2e8f0;transition:background .18s,color .18s,border-color .18s;white-space:nowrap;}
.htc-link:hover{background:#111827;color:#fff;border-color:#111827;}
.htc-link i{font-size:.75rem;}

/* Section tour cards (stc) */
.stc-card{border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(28,25,23,.08);transition:transform .24s,box-shadow .24s;height:100%;display:flex;flex-direction:column;background:#fff;}
.stc-card:hover{box-shadow:0 12px 30px rgba(28,25,23,.14);}
.stc-img{position:relative;overflow:hidden;aspect-ratio:4/3;flex-shrink:0;}
.stc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s;}
@media (hover: hover) and (pointer: fine) { .stc-card:hover .stc-img img{transform:scale(1.06);} }
.stc-img .fav-btn{position:absolute;top:8px;right:8px;z-index:3;}
.stc-img-badges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:3px;z-index:3;max-width:calc(100% - 48px);}
.stc-img-badge{display:inline-flex;align-items:center;gap:4px;color:#fff;font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:20px;box-shadow:0 2px 6px rgba(0,0,0,.25);white-space:nowrap;}
.stc-chip{position:absolute;bottom:8px;left:8px;background:rgba(255,255,255,.95);color:#334155;font-size:.64rem;font-weight:700;padding:2px 9px;border-radius:20px;z-index:3;}
.stc-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1;}
.stc-region{display:inline-flex;align-items:center;gap:3px;font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#64748b;background:#f1f5f9;padding:2px 7px;border-radius:20px;margin-bottom:6px;width:fit-content;}
.stc-title{font-weight:700;font-size:.9rem;color:#1e293b;margin-bottom:5px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.stc-meta{font-size:.72rem;color:#94a3b8;display:flex;align-items:center;gap:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stc-meta i{color:#BA1B21;flex-shrink:0;}
.stc-divider{height:1px;background:#f1f5f9;margin:10px 0;}
.stc-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;}
.stc-from{font-size:.6rem;color:#94a3b8;font-weight:500;margin-bottom:1px;}
.stc-price{font-size:1.05rem;font-weight:700;color:#111827;letter-spacing:-.01em;}
.stc-soon{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;color:#64748b;line-height:1.25;}
.stc-soon i{font-size:.9rem;color:#BA1B21;flex-shrink:0;}
.stc-link{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:700;color:#475569;text-decoration:none;padding:5px 10px;border-radius:7px;background:#f8fafc;border:1px solid #e2e8f0;transition:background .18s,color .18s,border-color .18s;white-space:nowrap;flex-shrink:0;}
.stc-link:hover{background:#111827;color:#fff;border-color:#111827;}
.stc-link i{font-size:.7rem;}

/* Section wrappers and headers */
.home-section{padding:64px 0;}
.home-section.bg-alt{background:#f8fafc;}
.section-title-wrap{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;}
.section-title-wrap .stw-left{display:flex;flex-direction:column;}
.stw-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#BA1B21;margin-bottom:8px;}
.stw-eyebrow::before{content:'';width:22px;height:2px;background:#BA1B21;border-radius:2px;flex-shrink:0;}
.section-title-wrap h2{font-size:1.75rem;font-weight:800;color:#111827;margin:0;letter-spacing:-.02em;line-height:1.15;}
.see-all{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;color:#64748b;text-decoration:none;white-space:nowrap;margin-bottom:3px;transition:color .15s,gap .2s;}
.see-all:hover{color:#111827;gap:10px;}
.see-all i{font-size:.8rem;transition:inherit;}

/* Carousel controls */
#tourCarousel .carousel-control-prev,
#tourCarousel .carousel-control-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;background:#BA1B21;border-radius:50%;opacity:1;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(186,27,33,.35);transition:background .18s,transform .15s;border:none;}
#tourCarousel .carousel-control-prev{left:-22px;}
#tourCarousel .carousel-control-next{right:-22px;}
#tourCarousel .carousel-control-prev:hover,
#tourCarousel .carousel-control-next:hover{background:#8a1318;transform:translateY(-50%) scale(1.08);}
#tourCarousel .carousel-control-prev i,
#tourCarousel .carousel-control-next i{font-size:1.1rem;color:#fff;line-height:1;}
.carousel-indicators [data-bs-target]{background-color:#BA1B21;border-radius:50%;width:10px;height:10px;}
.no-data{text-align:center;padding:60px 0;color:#a0aec0;font-size:.92rem;}

/* Hero autocomplete dropdown */
.hs3-ac-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.18);border:1px solid #e8edf3;z-index:9999;overflow:hidden;max-height:380px;overflow-y:auto;}
.hs3-ac-section{padding:4px 0 2px;}
.hs3-ac-section + .hs3-ac-section{border-top:1px solid #f0f4f8;}
.hs3-ac-header{padding:6px 16px 2px;font-size:.68rem;font-weight:700;text-transform:uppercase;color:#a0aec0;letter-spacing:.06em;}
.hs3-ac-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;font-size:.9rem;color:#2d3748;transition:background .1s;}
.hs3-ac-item:hover,.hs3-ac-item.hs3-ac-focused{background:#f7fafc;}
.hs3-ac-item i{color:#BA1B21;font-size:.9rem;width:16px;text-align:center;flex-shrink:0;}
.hs3-ac-item em{font-style:normal;font-weight:700;color:#BA1B21;}

/* ── Card price: original + discounted ── */
.stc-price-wrap { display:flex; flex-direction:column; gap:0; }
.stc-orig-price { font-size:.68rem; color:#94a3b8; text-decoration:line-through; line-height:1; margin-bottom:2px; }
.stc-from-row   { display:flex; flex-direction:column;  align-items:baseline; gap:2px; flex-wrap:nowrap; white-space:nowrap; overflow:hidden; }
.stc-from       { font-size:.6rem; color:#94a3b8; font-weight:500; white-space:nowrap; line-height:1; }
.htc-from       { font-size:.65rem; color:#94a3b8; font-weight:500; white-space:nowrap; line-height:1; }

/* ══════════════════════════════════════════════════════════════════
   KAÇIRILMAYACAK FIRSATLAR — kampanyalı tur kartı (.deal-card)
   Diğer bölümlerin .stc-card'ından ayrı ama AYNI dilde: sitenin açık
   zemini korunur, ayrışma koyu renkle değil kırmızı vurgu + iri indirim
   rozeti + daha sinematik görsel oranıyla sağlanır. (Koyu zemin denendi,
   sayfanın genel akışından kopuyordu.) Renk kuralı: navy YOK.
   ══════════════════════════════════════════════════════════════════ */
.deal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    color: #111827;
    border: 1px solid #ecedf1;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(17,24,39,.07);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.deal-card:hover {
    transform: translateY(-4px);
    border-color: rgba(186,27,33,.28);
    box-shadow: 0 16px 34px rgba(17,24,39,.14);
}

.deal-media { position: relative; overflow: hidden; aspect-ratio: 16/10; flex-shrink: 0; }
.deal-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
@media (hover: hover) and (pointer: fine) { .deal-card:hover .deal-media img { transform: scale(1.05); } }
/* Yalnız rozet/etiketin oturduğu uçlarda hafif karartma — görselin kendisi açık kalır. */
.deal-media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 60%, rgba(0,0,0,.42) 100%);
    pointer-events: none;
}
.deal-media .fav-btn { position: absolute; top: 10px; right: 10px; z-index: 3; }

/* İndirim rozeti — kartın ana vaadi, en iri öğe. */
.deal-off {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 7px 11px 6px;
    background: #ba1b21;
    color: #fff;
    border-radius: 12px;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(186,27,33,.35);
}
.deal-off strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.deal-off small  { font-size: .55rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .92; margin-top: 3px; }

.deal-chip {
    position: absolute; left: 12px; bottom: 12px; z-index: 3;
    font-size: .66rem; font-weight: 600; color: #fff;
    padding: 4px 10px; border-radius: 20px;
    background: rgba(17,24,39,.55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.2);
}

/* Gövde: beyazdan çok hafif sıcak bir tona — "kampanya" hissi renk tonundan gelir,
   koyu zeminden değil. */
.deal-body {
    display: flex; flex-direction: column; flex: 1 1 auto;
    padding: 14px 16px 16px; gap: 7px;
    background: linear-gradient(180deg, #fff 0%, #fdf8f8 100%);
}
.deal-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.deal-campaign {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .6rem; font-weight: 700; color: #fff;
    padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.deal-region {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: #6b7280;
    padding: 3px 9px; border-radius: 20px;
    background: #f3f4f6;
}
.deal-title {
    font-size: 1rem; font-weight: 700; line-height: 1.3; margin: 0; color: #111827;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.deal-route {
    display: flex; align-items: center; gap: 5px;
    font-size: .76rem; color: #6b7280;
}
.deal-foot {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
    margin-top: auto; padding-top: 12px;
    border-top: 1px solid #ececf0;
}
.deal-price-wrap { display: flex; flex-direction: column; min-width: 0; }
.deal-orig  { font-size: .72rem; color: #9ca3af; text-decoration: line-through; }
.deal-price-row { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.deal-price { font-size: 1.15rem; font-weight: 800; color: #ba1b21; letter-spacing: -.02em; white-space: nowrap; }
.deal-from  { font-size: .6rem; color: #9ca3af; }
.deal-cta {
    display: inline-flex; align-items: center; gap: 6px;
    flex-shrink: 0;
    font-size: .78rem; font-weight: 600; text-decoration: none;
    color: #ba1b21;
    padding: 7px 13px; border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(186,27,33,.32);
    transition: background .2s, color .2s, border-color .2s;
}
.deal-card:hover .deal-cta { background: #ba1b21; border-color: #ba1b21; color: #fff; }
.deal-cta:hover { background: #ba1b21; border-color: #ba1b21; color: #fff; }

/* ── Masaüstünde 1-2 fırsat: yatay "kartvizit" düzeni ──
   Tek kart ortada asılı kalmasın, satırı doldursun diye. 992px altında
   devreye girmez: orada satır zaten yatay kaydırmalı dikey kart şerididir. */
@media (min-width: 992px) {
    .deals-wide .deal-card { flex-direction: row; }
    .deals-wide .deal-media { aspect-ratio: auto; width: 42%; flex: 0 0 42%; min-height: 280px; }
    /* Yatayda karartma da yatay okunur: yalnız sol üst köşe ve alt köşe uçları. */
    .deals-wide .deal-media::after {
        background: linear-gradient(to bottom, rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 66%, rgba(0,0,0,.38) 100%);
    }
    /* İçerik blok hâlinde dikeyde ortalanır; foot'u aşağı iten margin-top:auto burada
       kapatılır — yoksa metinle fiyat arasında kocaman bir boşluk kalıyordu. */
    .deals-wide .deal-body { padding: 24px 28px; gap: 9px; justify-content: center; }
    .deals-wide .deal-foot { margin-top: 0; flex-wrap: wrap; row-gap: 10px; }
    .deals-wide .deal-title { font-size: 1.2rem; -webkit-line-clamp: 3; }
    .deals-wide .deal-route { font-size: .82rem; }
    /* Fiyat asla "₺ / 6.375" diye ikiye bölünmesin. */
    .deals-wide .deal-price-row { flex-wrap: nowrap; white-space: nowrap; }
    .deals-wide .deal-price { font-size: 1.4rem; }
    .deals-wide .deal-orig  { font-size: .8rem; }
    .deals-wide .deal-off   { padding: 9px 13px 8px; }
    .deals-wide .deal-off strong { font-size: 1.3rem; }
    .deals-wide .deal-cta { font-size: .82rem; padding: 9px 16px; }
}
/* Tek fırsat: kart satırın tamamını kaplar, tipografi de onunla birlikte büyür. */
@media (min-width: 992px) {
    .row.deals-wide.row-cols-lg-1 .deal-media { min-height: 340px; }
    .row.deals-wide.row-cols-lg-1 .deal-body  { padding: 30px 36px; gap: 11px; }
    .row.deals-wide.row-cols-lg-1 .deal-title { font-size: 1.6rem; }
    .row.deals-wide.row-cols-lg-1 .deal-route { font-size: .9rem; }
    .row.deals-wide.row-cols-lg-1 .deal-price { font-size: 1.75rem; }
    .row.deals-wide.row-cols-lg-1 .deal-orig  { font-size: .86rem; }
    .row.deals-wide.row-cols-lg-1 .deal-off strong { font-size: 1.6rem; }
    .row.deals-wide.row-cols-lg-1 .deal-cta { font-size: .88rem; padding: 11px 20px; }
}