/* ============================================================
   DESIGN SYSTEM CSS
   Primary: tenant markasindan (--brand-primary) | Font: IBM Plex Sans | Bootstrap 5.3
   ============================================================ */

/* --- Global Font Size Fix (template override) --- */
body { font-size: 15px !important; }
.card-header { font-size: 1.1rem !important; }
.card-body { font-size: 0.95rem !important; }
.btn { font-size: 0.95rem !important; }
.btn-lg, .dc-btn-lg { font-size: 1.2rem !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-4 { font-size: 1.5rem !important; }
.fs-3 { font-size: 1.75rem !important; }

/* Demircode custom text sizes */
.dc-price-xl { font-size: 3rem !important; }
.dc-currency { font-size: 1.2rem !important; }
.dc-text-md { font-size: 1rem !important; }
.dc-text-lg { font-size: 1.15rem !important; }

/* ⛔ Olu `.dc-search-section` / `.dc-mobile-search-*` blogu Ot.98/Faz-0 ile SILINDI.
   Tek uretecisi `site.js` `stickySearch` idi ve o gövde `.banner-form, .form-info`
   bulamayinca ERKEN DONUYOR; ikisi de markup'ta 0 kez geciyor. Calisan sayfada
   `.dc-search-section` ve `.dc-mobile-search-bar` dugum sayisi 0 olculdu. */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
    /* Primary Colors — TENANT'tan turetilir (OTURUM 68).
       Onceki hali sabit platform kirmizisiydi ve bu dosya _Layout'un inline tenant
       ':root' blogundan SONRA yuklendigi icin beyaz-etiket sitede tenant rengini EZIYORDU.
       Fallback: kimseye ait olmayan notr gri (AgencyBranding.NeutralPrimaryColor). */
    --dc-primary: var(--brand-primary, #1f2937);
    --dc-primary-dark: color-mix(in srgb, var(--dc-primary) 80%, #000);
    --dc-primary-light: color-mix(in srgb, var(--dc-primary) 10%, transparent);
    --dc-primary-10: color-mix(in srgb, var(--dc-primary) 10%, transparent);
    --dc-primary-25: color-mix(in srgb, var(--dc-primary) 25%, transparent);
    --dc-primary-50: color-mix(in srgb, var(--dc-primary) 50%, transparent);
    --dc-primary-75: color-mix(in srgb, var(--dc-primary) 75%, transparent);

    /* Secondary Colors */
    --dc-secondary-green: #98AA30;
    --dc-accent-blue: #155EEF;
    --dc-success: #04BD6C;
    --dc-warning: #FFCA18;
    --dc-danger: #FF0000;
    --dc-info: #17A2B8;

    /* Neutral Colors */
    --dc-dark-slate: #212E47;
    --dc-text-dark: #111827;
    --dc-text-body: #4E5561;
    --dc-text-gray: #393F4D;
    --dc-text-light: #6B7280;
    --dc-border: #E4EBF1;
    --dc-light-gray: #F3F4F6;
    --dc-light-200: #F9FAFB;
    --dc-white: #FFFFFF;

    /* Typography */
    --dc-font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --dc-font-size-10: 10px;
    --dc-font-size-12: 12px;
    --dc-font-size-14: 14px;
    --dc-font-size-16: 16px;

    /* Spacing */
    --dc-radius-sm: 4px;
    --dc-radius-md: 8px;
    --dc-radius-lg: 12px;
    --dc-radius-xl: 16px;

    /* Shadows */
    --dc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --dc-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --dc-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.10);
    --dc-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --dc-transition: all 0.3s ease;

    /* Bootstrap overrides */
    /* Bootstrap primary de tenant renginden gelir; --bs-primary-rgb sabit oldugu icin
       kaldirildi (rgba tuketicileri color-mix'e cevrildi). */
    --bs-primary: var(--dc-primary);
    --bs-body-font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --bs-body-color: #4E5561;
    --bs-body-bg: #F9FAFB;
}

/* --- Base Styles --- */
html {
    font-size: 14px;
    scroll-behavior: smooth;
}

@media (min-width: 768px) {
    html { font-size: 16px; }
}

body {
    font-family: var(--dc-font-family);
    color: var(--dc-text-body);
    background-color: var(--dc-light-200);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Typography Utilities --- */
.fs-10 { font-size: 10px !important; }
.fs-12 { font-size: 12px !important; }
.fs-14 { font-size: 14px !important; }
.fs-16 { font-size: 16px !important; }

.text-dark-slate { color: var(--dc-dark-slate) !important; }
.text-default { color: var(--dc-text-dark) !important; }
.text-body-custom { color: var(--dc-text-body) !important; }
.text-gray { color: var(--dc-text-gray) !important; }
.text-light-custom { color: var(--dc-text-light) !important; }

.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }

/* --- Bootstrap Primary Override --- */
.btn-primary {
    background-color: var(--dc-primary);
    border-color: var(--dc-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--dc-primary-dark);
    border-color: var(--dc-primary-dark);
}
.btn-outline-primary {
    color: var(--dc-primary);
    border-color: var(--dc-primary);
}
.btn-outline-primary:hover {
    background-color: var(--dc-primary);
    border-color: var(--dc-primary);
    color: #fff;
}

.bg-primary { background-color: var(--dc-primary) !important; }
.text-primary { color: var(--dc-primary) !important; }

a { color: var(--dc-accent-blue); transition: var(--dc-transition); }
a:hover { color: var(--dc-primary); }

/* --- Card Styles --- */
.card {
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-lg);
    background: var(--dc-white);
    transition: var(--dc-transition);
}
.card.shadow-hover:hover {
    box-shadow: var(--dc-shadow-lg);
    transform: translateY(-2px);
}

/* Product Card (Hotel/Flight Listing) */
.product-card { overflow: hidden; }
.product-card .product-img {
    position: relative;
    overflow: hidden;
}
.product-card .product-img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.product-card:hover .product-img img { transform: scale(1.05); }
.product-card .product-img .badge {
    position: absolute;
    top: 12px;
    left: 12px;
}
.product-card .wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--dc-transition);
}
.product-card .wishlist-btn:hover { background: var(--dc-primary); color: #fff; }
.product-card .price del { font-size: 14px; }
.product-card .price .h4 { margin-bottom: 0; }

/* --- Header Styles --- */
.dc-header {
    background: var(--dc-white);
    box-shadow: var(--dc-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.dc-header .navbar-brand img { height: 40px; }
.dc-header .nav-link {
    color: var(--dc-text-dark);
    font-weight: 500;
    font-size: 15px;
    padding: 8px 16px !important;
    transition: var(--dc-transition);
}
.dc-header .nav-link:hover,
.dc-header .nav-link.active { color: var(--dc-primary); }

.dc-topbar {
    background: var(--dc-dark-slate);
    color: #fff;
    font-size: 13px;
    padding: 6px 0;
}
.dc-topbar a { color: rgba(255,255,255,0.8); text-decoration: none; }
.dc-topbar a:hover { color: #fff; }

/* --- Footer Styles --- */
.dc-footer {
    background: var(--dc-dark-slate);
    color: rgba(255,255,255,0.7);
    padding: 60px 0 20px;
}
.dc-footer h5 { color: #fff; font-weight: 600; margin-bottom: 20px; }
.dc-footer a { color: rgba(255,255,255,0.7); text-decoration: none; }
.dc-footer a:hover { color: var(--dc-primary); }
.dc-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    margin-top: 40px;
}

/* --- Sidebar Styles --- */
.dc-sidebar {
    background: var(--dc-white);
    border-radius: var(--dc-radius-lg);
    border: 1px solid var(--dc-border);
    padding: 0;
    min-height: calc(100vh - 120px);
}
.dc-sidebar .nav-link {
    color: var(--dc-text-body);
    padding: 10px 20px;
    border-left: 3px solid transparent;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.dc-sidebar .nav-link:hover { background: var(--dc-light-200); color: var(--dc-primary); }
.dc-sidebar .nav-link.active {
    color: var(--dc-primary);
    background: var(--dc-primary-10);
    border-left-color: var(--dc-primary);
    font-weight: 600;
}
.dc-sidebar .sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--dc-border);
}

/* --- Breadcrumb --- */
.dc-breadcrumb {
    background: transparent;
    padding: 16px 0;
}
.dc-breadcrumb .breadcrumb-item a { color: var(--dc-text-light); text-decoration: none; }
.dc-breadcrumb .breadcrumb-item.active { color: var(--dc-primary); }

/* --- Search Form --- */
.dc-search-form {
    background: var(--dc-white);
    border-radius: var(--dc-radius-xl);
    padding: 20px;
    box-shadow: var(--dc-shadow-lg);
}
.dc-search-form .form-control {
    border-radius: var(--dc-radius-md);
    border-color: var(--dc-border);
    padding: 10px 16px;
}
.dc-search-form .btn-search {
    background: var(--dc-primary);
    color: #fff;
    border-radius: var(--dc-radius-md);
    padding: 10px 30px;
    font-weight: 600;
}
.dc-search-form .btn-search:hover { background: var(--dc-primary-dark); }

/* --- Hero Section --- */
.dc-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
}
.dc-hero::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
}
.dc-hero .hero-content { position: relative; z-index: 2; }
.dc-hero h1 { color: #fff; font-weight: 700; font-size: 48px; }
.dc-hero p { color: rgba(255,255,255,0.9); font-size: 18px; }

/* --- Rating Stars --- */
.rating-stars { display: inline-flex; gap: 2px; }
.rating-stars i { color: var(--dc-warning); font-size: 14px; }
.rating-stars .empty { color: var(--dc-border); }
.rating-badge {
    background: var(--dc-primary);
    color: #fff;
    border-radius: var(--dc-radius-sm);
    padding: 2px 8px;
    font-weight: 600;
    font-size: 14px;
}

/* --- Price Display --- */
.price-display .old-price {
    text-decoration: line-through;
    color: var(--dc-text-light);
    font-size: 14px;
}
.price-display .current-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--dc-text-dark);
}
.price-display .per-night {
    font-size: 14px;
    color: var(--dc-text-light);
}
.price-display .discount-badge {
    background: var(--dc-danger);
    color: #fff;
    border-radius: var(--dc-radius-sm);
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
}

/* --- Filter Sidebar --- */
.filter-sidebar .filter-group { padding: 16px 0; border-bottom: 1px solid var(--dc-border); }
.filter-sidebar .filter-group:last-child { border-bottom: none; }
.filter-sidebar .filter-title { font-weight: 600; color: var(--dc-text-dark); margin-bottom: 12px; }

/* ============================================================
   FİLTRE PANELİ — ORTAK GÖVDE  (Ot.111 / F2)
   ============================================================
   Kullanıcının referans görseline benzetme işi. OTEL ve UÇUŞ filtreleri
   BİREBİR aynı iskeleti paylaşıyor:
       .card.filter-sidebar
         > .card-header (h5 + Sıfırla)
         > .card-body.p-0 > .accordion-list > .accordion-item.p-3 (h6 + .form-check)
   ⭐ Bu yüzden TEK kural gövdesi ikisini birden dönüştürür — iş iki kez yapılmaz
      ve kopyalanan bir stil sessizce ayrışamaz.

   ⛔ YALNIZ GÖRÜNÜM — kullanıcı kararı: açılır-kapanır (chevron) EKLENMEZ,
      bölümler her zaman açık kalır. `Düzenlemeler.docx`in 3. kısıtı ("mevcut
      işleyiş ve akışlar aynen korunacak") bu şekilde korunur.
   ⛔ MARKA JETONDAN: renk `var(--dc-primary)`; sabit renk YAZILMAZ.
   ⚠️ GENİŞLİĞE DOKUNULMAZ — `search-widget.css`teki
      `.dc-sw-results-wrap .filter-sidebar { width:100% }` Ot.99'un ÖLÇÜLMÜŞ
      düzeltmesidir (kart kolonu doldurmuyordu: 244 → 306) ve `liste-hizalama`
      kapısı onu koruyor.
   ⚠️ ≤991px'te panel offcanvas gövdesidir; oradaki kurallar `!important` taşır
      ve YÜRÜRLÜKTE KALIR (kenarlık/margin sıfırlama). Buradaki kurallar onlarla
      yarışmaz.
   ============================================================ */
.filter-sidebar {
    border: 1px solid var(--dc-border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    overflow: hidden;
}

/* ---- Başlık ---- */
.filter-sidebar > .card-header {
    background: #fff;
    border-bottom: 1px solid var(--dc-border);
    padding: 16px 18px 14px;
}
.filter-sidebar > .card-header h5 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dc-text-dark);
}
/* İkon MARKUP'ta değil burada: iki görünüm de aynı başlığı basıyor, tek yerden gelsin. */
.filter-sidebar > .card-header h5::before {
    /*  🔴 KOD NOKTASI ÖLÇÜLDÜ, TAHMİN EDİLMEDİ: `iconsax.css` içinde
        `.isax-filter:before { content: "\ea4b" }`. İlk yazdığım `\ea5b` YANLIŞTI
        ve sessizce başka bir glif basacaktı — ikon fontlarında yanlış kod noktası
        hata vermez, sadece yanlış resim gösterir. */
    font-family: "iconsax" !important;
    content: "\ea4b";               /* isax-filter */
    /* Başlık 700 ağırlıkta; ikon fontu sentetik kalınlıkta bozulmasın. */
    font-weight: normal;
    font-style: normal;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--dc-primary);
    flex: 0 0 auto;
}
.filter-sidebar > .card-header a {
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}
.filter-sidebar > .card-header a:hover { text-decoration: underline; }

/*  Sonuç sayacı — referanstaki "150 out of 150 flights found" satırı.
    ⚠️ Değer VERİDEN gelir ve sayfanın KENDİ sayaç JS'i tarafından güncellenir;
       burada yalnız yerleşim/biçim var. Boşsa satır hiç görünmez. */
.filter-sidebar .dc-filtre-sayac {
    padding: 10px 18px;
    font-size: .82rem;
    color: var(--dc-text-body);
    border-bottom: 1px solid var(--dc-border);
    background: #fbfcfd;
}
.filter-sidebar .dc-filtre-sayac:empty { display: none; }

/* ---- Bölümler ---- */
.filter-sidebar .accordion-list > .accordion-item {
    padding: 18px !important;           /* markup'taki p-3'ü tek yerden büyüt */
    border: 0;
    border-bottom: 1px solid var(--dc-border);
    background: transparent;
}
.filter-sidebar .accordion-list > .accordion-item:last-child { border-bottom: 0; }
.filter-sidebar .accordion-list > .accordion-item > h6 {
    font-size: .95rem;
    font-weight: 600;
    color: var(--dc-text-dark);
    margin-bottom: 14px;
}

/* ---- Seçim satırları ---- */
.filter-sidebar .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    /*  🔴 DOKUNMA ALANI `min-height` İLE VERİLEMEZ — TARAYICIYA SORULDU:
        vendor teması `dreamstour/css/style.css:5951` içinde
            `.form-check { min-height: inherit !important; }`
        diye GEREKÇESİZ bir sıfırlama taşıyor. `!important` bizim kuralımızı yener
        ve `inherit` de 0'a düşer — satır 21px'te kalıyordu.
        ⛔ Vendor dosyası DÜZENLENMEDİ: oradaki kural her sayfadaki her `.form-check`i
           etkiler, kapsamı bu işten çok daha geniş.
        ⛔ Karşı `!important` de YAZILMADI: iki `!important`in yarıştığı bir kural
           sonraki oturumda kimin kazandığını okunamaz hâle getirir.
        ⭐ Bunun yerine ÇEKİŞİLMEYEN bir özellik kullanıldı — dikey dolgu.
           Ölçülen: satır 21px + 2×6px = 33px. */
    padding: 6px 0;
    /* ⚠️ `margin-bottom` YAZILMIYOR: markup'taki `.mb-2` (Bootstrap utility)
       `!important` taşır ve her hâlükârda kazanır. Ölü bir bildirim bırakmak,
       sonraki okuyucuya "burada bir kural var" yalanını söyler. */
}
.filter-sidebar .form-check .form-check-input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    border-color: #c9ced6;
}
.filter-sidebar .form-check .form-check-input:checked {
    background-color: var(--dc-primary);
    border-color: var(--dc-primary);
}
.filter-sidebar .form-check .form-check-label {
    font-size: .88rem;
    color: var(--dc-text-body);
    cursor: pointer;
    margin: 0;
}
/* Havayolu logosu — referanstaki yuvarlak rozet */
.filter-sidebar .form-check-label img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: contain;
    background: #f6f7f9;
    padding: 2px;
}
/* Anahtar (ücretsiz iptal vb.) referanstaki ÇİP görünümü */
.filter-sidebar .form-switch { padding-left: 0; }
.filter-sidebar .form-switch .form-check-input {
    width: 36px;
    height: 20px;
    border-radius: 20px;
}

/* --- Pagination --- */
.dc-pagination .page-link {
    color: var(--dc-text-body);
    border-color: var(--dc-border);
    border-radius: var(--dc-radius-md) !important;
    margin: 0 2px;
    min-width: 40px;
    text-align: center;
}
.dc-pagination .page-item.active .page-link {
    background: var(--dc-primary);
    border-color: var(--dc-primary);
    color: #fff;
}

/* --- Dashboard Widgets --- */
.stat-card {
    background: var(--dc-white);
    border-radius: var(--dc-radius-lg);
    padding: 24px;
    border: 1px solid var(--dc-border);
}
.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--dc-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.stat-card .stat-value { font-size: 28px; font-weight: 700; color: var(--dc-text-dark); }
.stat-card .stat-label { font-size: 14px; color: var(--dc-text-light); }
.stat-card .stat-change { font-size: 13px; }
.stat-card .stat-change.up { color: var(--dc-success); }
.stat-card .stat-change.down { color: var(--dc-danger); }

/* --- Admin Sidebar --- */
.admin-sidebar {
    width: 260px;
    min-height: 100vh;
    background: var(--dc-dark-slate);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1040;
    transition: var(--dc-transition);
}
.admin-sidebar .sidebar-brand {
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.admin-sidebar .sidebar-brand img { height: 36px; }
.admin-sidebar .nav-link {
    color: rgba(255,255,255,0.7);
    padding: 10px 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 3px solid transparent;
}
.admin-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,0.05); }
.admin-sidebar .nav-link.active {
    color: #fff;
    background: rgba(207,52,37,0.15);
    border-left-color: var(--dc-primary);
}
.admin-sidebar .nav-section-title {
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 20px 8px;
}

.admin-content { margin-left: 260px; padding: 24px; min-height: 100vh; }

@media (max-width: 991.98px) {
    .admin-sidebar { transform: translateX(-100%); }
    .admin-sidebar.show { transform: translateX(0); }
    .admin-content { margin-left: 0; }
}

/* --- Form Enhancements --- */
.form-item { margin-bottom: 16px; }
.form-item .form-label {
    font-size: 14px;
    color: var(--dc-text-dark);
    font-weight: 500;
    margin-bottom: 4px;
}
.form-control:focus {
    border-color: var(--dc-primary);
    box-shadow: 0 0 0 0.2rem var(--dc-primary-10);
}
.input-icon { position: relative; }
.input-icon i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dc-text-light);
}
.input-icon input { padding-left: 38px; }

/* --- Badge Statuses --- */
.badge-confirmed { background: rgba(4,189,108,0.1); color: #04BD6C; }
.badge-pending { background: rgba(255,202,24,0.1); color: #D4A800; }
.badge-cancelled { background: rgba(255,0,0,0.1); color: #FF0000; }
.badge-checkedin { background: rgba(21,94,239,0.1); color: #155EEF; }
.badge-noshow { background: rgba(107,114,128,0.1); color: #6B7280; }

/* --- Auth Pages --- */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dc-dark-slate) 0%, #1a2332 100%);
}
.auth-card {
    background: var(--dc-white);
    border-radius: var(--dc-radius-xl);
    padding: 40px;
    max-width: 440px;
    width: 100%;
    box-shadow: var(--dc-shadow-xl);
}
.auth-card .auth-logo { text-align: center; margin-bottom: 32px; }
.auth-card .auth-logo img { height: 48px; }

/* --- Booking Confirmation --- */
.booking-confirmation .confirmation-header {
    text-align: center;
    padding: 40px 0;
}
.booking-confirmation .confirmation-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(4,189,108,0.1);
    color: var(--dc-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin: 0 auto 16px;
}

/* --- Loading & Spinner --- */
.dc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.dc-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--dc-border);
    border-top-color: var(--dc-primary);
    border-radius: 50%;
    animation: dc-spin 0.8s linear infinite;
}
@keyframes dc-spin { to { transform: rotate(360deg); } }

/* --- Autocomplete Dropdown --- */
.dc-autocomplete-wrapper {
    position: relative;
}
.dc-autocomplete-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    max-height: 360px;
    overflow-y: auto;
    padding: 6px;
}
/* Banner-form'da dropdown form-item'a bağlanır; sol/sağ offset JS tarafında
   form-item'ın border-width'ine göre dinamik set edilir (padding gerekmez). */
/* Mobile modal / sticky search input'u saran wrapper'a bağlı — form-item padding'ini
   aşmak için sabit offset. */
.dc-mobile-search-modal .dc-autocomplete-dropdown {
    left: -8px;
    right: -8px;
}
.dc-search-sticky .dc-autocomplete-dropdown {
    left: -18px;
    right: -18px;
}
.dc-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.dc-autocomplete-item:hover,
.dc-autocomplete-item.is-active {
    background: rgba(13, 110, 253, 0.08);
}
.dc-autocomplete-icon {
    flex: 0 0 auto;
    width: 24px;
    font-size: 18px;
    color: var(--dc-primary);
    text-align: center;
    line-height: 1;
}
.dc-autocomplete-texts {
    flex: 1 1 auto;
    min-width: 0;
}
.dc-autocomplete-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dc-autocomplete-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .dc-autocomplete-dropdown { padding: 4px; border-radius: 0 0 10px 10px; }
    .dc-autocomplete-item { padding: 8px 10px; gap: 10px; }
    .dc-autocomplete-title { font-size: 13px; }
    .dc-autocomplete-subtitle { font-size: 11px; }
    .dc-autocomplete-icon { width: 20px; font-size: 16px; }
}

/* --- Date Range Picker Input Fix --- */
.dc-daterange,
.dc-datepicker {
    white-space: nowrap;
}
.form-item:has(.dc-daterange),
.form-item:has(.dc-datepicker) {
    min-width: 260px;
    flex: 1.5 !important;
}

/* --- Child Age Fields --- */
.dc-child-ages input[type="date"] { max-width: 160px; font-size: 13px; }

/* --- Guest Dropdown Fix (scroll olmasın, hepsi görünsün) --- */
.banner-form .dropdown-menu.dropdown-xl,
.hero-sec-eight .dropdown-menu.dropdown-xl,
.dropdown-menu.dropdown-xl {
    max-height: none !important;
    overflow: visible !important;
    padding: 16px !important;
    z-index: 99999 !important;
}
/* Dropdown acikken back-to-top gizlensin — tarih input'unu kapatmasin */
body.dc-dropdown-open .back-to-top-icon { opacity: 0 !important; pointer-events: none !important; }
.banner-form .dropdown-menu .apply-btn {
    position: sticky;
    bottom: 0;
}

/* --- List View for Hotel Cards --- */
/* ⭐ Ot.98/Faz-5 — "listelemedeki kutularin tamaminin boyutu ayni olmali, biri genis
   biri dar degil" (kullanici talebi).
   🔴 Olculdu: 20 kartta DOKUZ AYRI yukseklik (178..372px). Sebep sabit bir olcu
      yoklugu degil, KOSULLU ICERIK: konum satiri, pansiyon/iade rozeti ve puan
      kartlarin bir kisminda var bir kisminda yok.
   ⚠️ `height` DEGIL `min-height`: sabit yukseklik uzun otel adini ya da rozetleri
      KIRPARDI — gorsel duzen icin bilgi kaybi kabul edilebilir degil. Kisa kartlar
      ortak tabana cikiyor, olagandisi uzun bir kart yine uzun kaliyor.
   ⚠️ Yalniz ≥768px: mobilde kart dikey yigiliyor (resim ustte) ve ortak taban
      orada anlamsiz bir bosluk uretirdi. */
@media (min-width: 768px) {
    .place-item.d-md-flex { min-height: 216px; }
    /* 🔴 Ust sinir da GEREKLI: olculdu, icerigi bos gelen bir kartta (adi/puani
       basilmayan otel) yukseklik GORSELIN dogal oranindan geliyordu ve kart 372px
       olup diziyi bozuyordu. Kap sinirlanınca `object-fit: cover` zaten kirpiyor —
       bu tam olarak "fotolar kutulara gore otomatik olceklenmeli" talebinin
       kendisi. ⚠️ Bilgi kaybi YOK: kirpilan sey gorselin fazlasi, metin degil. */
    .place-item.d-md-flex .place-img { max-height: 216px; overflow: hidden; }
}
.place-item.d-md-flex .place-img { width: 280px; min-width: 280px; }
/* 🔴 OLCULDU — "kutularin icindeki fotolar kutulara gore otomatik olceklenmeli,
   duzgun gozukmesi icin" (Duzenlemeler.docx §14) HENUZ KARSILANMAMISTI:
     >=768px : dikey foto 162px, yatay foto 280px GENISLIGINDE ciziliyordu
     <768px  : dikey foto 488px, yatay foto 206px YUKSEKLIGINDE ciziliyordu
               (kart boylari 657 / 375 -> dizi bozuluyordu)
   Sebep: img'ye YALNIZ `height` verilmis, `width` verilmemisti. TEK boyut
   kisitliyken `object-fit: cover` DEVREYE GIRMEZ — kutu dogal orandan olculur.
   Ot.98 kart yuksekliklerini esitledi ama gorselin KENDI olcusu acikta kalmisti.
   ⚠️ Kirpilan sey gorselin fazlasi; metin/bilgi kaybi YOK. Oran korunur (cover),
      goruntu EZILMEZ (`fill` degil). */
.place-item.d-md-flex .place-img > a { display: block; width: 100%; height: 100%; }
.place-item.d-md-flex .place-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px 0 0 8px; }
.place-item.d-md-flex .place-content { flex: 1; }
@media (max-width: 767.98px) {
    .place-item.d-md-flex .place-img { width: 100%; min-width: auto; }
    .place-item.d-md-flex .place-img img { border-radius: 8px 8px 0 0; }
    /* Mobilde kart DIKEY yigiliyor, yani genislik zaten %100; kisitlanmasi gereken
       YUKSEKLIK. 16/9 secildi cunku olculen YATAY fotolarin BUGUNKU yuksekligiyle
       birebir ayni (366 x 9/16 = 206px): yaygin durum davranis-notr kalir, yalniz
       dikey fotolarin 488px'lik tasmasi kapanir.
       ⚠️ Kart `min-height`i mobilde BILEREK yok (Ot.98); burada esitlenen sey kart
          degil GORSEL — metin uzunlugundan dogan fark aynen korunur. */
    .place-item.d-md-flex .place-img img { aspect-ratio: 16 / 9; height: auto; }
}

/* --- Sort Select JS --- */
.dc-sort-select { cursor: pointer; }

/* --- Breadcrumb Page Padding Fix (boşluk kaldır) --- */
.breadcrumb-bar + .section { padding-top: 1.5rem; }

/* Dikey çizgiler: card overflow + form-info border-radius child border'ları kesmesin */
.banner-form .form-info {
    border-radius: 0 !important;
}
.section.pb-0 .card {
    overflow: visible !important;
}

/* --- Hero Section Fix --- */
.hero-sec-eight {
    height: auto !important;
    min-height: 520px;
    padding: 100px 0 40px !important;
    justify-content: center !important;
    background-image: none !important;
}

/*  §9 — HERO AŞAĞIYA DOĞRU BİRAZ DAHA GENİŞ  (Ot.111 / F3)
    Talep: *"Arka plan ana sayfa aşağıya doğru biraz daha geniş olsun, arkadaki
    fotolar daha düzgün şık durur en azından, doldursun, daracık olmasın."*
    🔴 ÖLÇÜLDÜ (önce): masaüstü 1440×900 → 520px = görünümün **%58**'i;
       tablet 768 → 529px (%52); telefon 390 → 647px (%77).
    ⛔ TELEFON KAPSAM DIŞI — ve bu bilinçli: mobilde hero zaten görünümün %77'si
       ve Ot.105'te tam da *"ARA düğmesi ekranın 66px ALTINDA"* kusuru düzeltilmişti.
       Orada yükseklik artırmak o regresyonu GERİ GETİRİR.
    ⚠️ Yön ÖNEMLİ: Ot.105'in üç regresyonu üst boşluğu KISMAKTAN doğmuştu;
       burada genişletiyoruz — ters yön, o sınıfa girmiyor. */
@media (min-width: 768px) {
    .hero-sec-eight {
        min-height: 620px;
    }
}
.hero-sec-eight::after {
    /*  🔴 Ot.112 — BU GÖRSEL İLK KARE İLE AYNI OLMALI (balonlu kare; Ot.150 / #88'den beri
        `hero-kapadokya.jpg` — eski balonlu kare rakip firma adları taşıdığı için silindi).
        Sebep keyframe'den TÜRETİLDİ, tercih değil: `dcHeroFade` 0%→opacity 0,
        4%→1. Yani her kare ilk %4'te (30sn'nin 1,2sn'i) SAYDAM. İlk yüklemede
        hiçbir kare görünür değildir ve ALTTAKİ bu fotoğraf görünür.
        ⛔ Farklı bir görsel konursa ziyaretçi, "1. sıradaki" kareden ÖNCE
           1,2sn boyunca BAŞKA bir fotoğraf görür — sıra düzeltmesi yarım kalır. */
    /*  ⭐ Ot.130 (#39/b) — DEĞER ARTIK GÖRÜNÜMDEN GELİYOR.
        Kiracı kendi hero görsellerini panelden yönetebildiği için "ilk kare"
        artık sabit bir dosya DEĞİL. Görünüm `--dc-hero-yedek` değişkenini
        BİRİNCİ kareyle aynı değere kurar; yedek burada da onu okur, yani
        "yedek = ilk kare" kuralı TEK KAYNAKTAN korunur.
        ⚠️ Yedeğin yedeği bilerek duruyor: değişken hiç yazılmazsa (beklenmedik
           bir çağıran) eski davranış birebir sürer, hero boş kalmaz. */
    background-image: var(--dc-hero-yedek, url('/dreamstour/img/banner/hero-kapadokya.jpg')) !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: scroll !important;
    /*  §5 (Ot.111) — kaydırıcının ALTINA indirildi.
        ⛔ SİLİNMEDİ: görseller yüklenemezse tek fotoğraflı eski hâl görünür kalır. */
    z-index: -2 !important;
}

/* ============================================================
   §5 — HERO'DA KAYAN ŞEHİR FOTOĞRAFLARI  (Ot.111 / F3)
   ============================================================
   🔴 Katman ÖLÇÜLDÜ: ::after(-1, foto) · ::before(0, koyu örtü) · .container(1, metin).
      Kaydırıcı foto katmanına (-1) girer; örtü ve metin ÜSTÜNDE kalır.
      ⚠️ `::after` ile AYNI z-index'te olsaydı, sözde-öge ağaç sırasında çocuklardan
         SONRA geldiği için kaydırıcının ÜSTÜNE boyanır ve görünmezdi — bu yüzden
         `::after` -2'ye indirildi.
   ⭐ Beş görsel TEK keyframe + gecikme ile çapraz geçiş yapar: 30sn döngü,
      her kare ~6sn görünür, ~1,2sn geçiş. Ek JS YOK.
   ============================================================ */
.dc-hero-slider {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;               /* motorun tıklamalarını YUTMAZ */
}
.dc-hero-slider img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;                  /* 1920×840 görsel her orana kırpılarak oturur */
    opacity: 0;
    animation: dcHeroFade 30s linear infinite;
}
/*  🔴🔴 Ot.130 (#39/b) — `nth-child` GECİKMELERİ VE SABİT KEYFRAME KALDIRILDI.
    ÖLÇÜLMÜŞ SEBEP (tarayıcıda, canlı sayfaya iki `img` enjekte edilerek):
    eski gövde tam BEŞ kareye çivilenmişti ve kiracı sayıyı değiştirince
    SESSİZCE bozuluyordu — hata çıkmıyordu:
      · N > 5 → 6. ve sonraki kareler HİÇ gecikme kuralı almıyor (delay 0s) ve
        `z-index: auto` olduğu için DOM'da sonra geldiklerinden 1. karenin
        ÜSTÜNE boyanıyorlardı ⇒ kullanıcının Ot.112'de verdiği "balon 1. sırada"
        kararı acente 6. görseli ekler eklemez ÖLÜYORDU (ölçüldü: t≈0,7sn'de
        kare1 opacity 0.618 iken kare6 ve kare7 0.340 ile üstte).
      · N < 5 → döngü başına 22,8 − 6·(N−1) saniye boyunca HİÇBİR kare görünmüyor,
        ekranda yalnız `::after` yedeği kalıyordu.
    ⇒ Gecikme artık GÖRÜNÜMDE, kare başına satır içi `animation-delay` olarak
      üretilir; keyframe de N'ye göre görünümde yazılır (aşağıdaki nota bak).

    ⛔ `@keyframes` DURAK YÜZDELERİNDE `var()` KULLANILAMAZ — bu yüzden yalnız
       CSS değişkeni N kilidini ÇÖZMEZ; keyframe'in kendisi sunucuda üretilmelidir.
       (Bu, denenip elenmiş bir yol; not düşülüyor ki bir dahakine yeniden denenmesin.)

    ⭐ ÖZ-SINAV: formül N=5'te bugünkü durakları AYNEN üretmeli —
       0% · 20/N=4% · 100/N=20% · 120/N=24% · 100%. Üretiyor. */

/*  ⛔ HAREKET AZALTMA TERCİHİ — erişilebilirlik gereği, isteğe bağlı değil.
    Animasyon durur ve YALNIZ ilk kare görünür kalır (boş hero bırakmaz). */
@media (prefers-reduced-motion: reduce) {
    .dc-hero-slider img { animation: none; opacity: 0; }
    .dc-hero-slider img:nth-child(1) { opacity: 1; }
}
.hero-sec-eight::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 0;
}
.hero-sec-eight .animate-text {
    display: none !important;
}
.hero-sec-eight .hero-content,
.hero-sec-eight .container {
    position: relative;
    z-index: 1;
}
.hero-sec-eight .banner-form,
.hero-sec-eight .banner-form .card-body {
    overflow: visible !important;
}
/* Desktop'ta arama kartını %20 daralt — mobilde zaten dikey akışa geçiyor */
@media (min-width: 992px) {
    .hero-sec-eight .banner-form {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}
.hero-sec-eight .search-btn {
    position: relative;
    z-index: 2;
    pointer-events: auto !important;
    min-width: 80px;
    flex-shrink: 0;
}

/* --- Language Selector (navbar) --- */
.flag-dropdown .dropdown-toggle {
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    transition: all 0.2s;
}
.flag-dropdown .dropdown-toggle:hover,
.flag-dropdown .dropdown-toggle:focus {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.5);
}
.flag-dropdown .dropdown-toggle::after {
    border-top-color: #fff;
}

/* Fixed header: beyaz arka plan, koyu text */
header.fixed .flag-dropdown .dropdown-toggle {
    color: #111827 !important;
    border-color: rgba(0,0,0,0.15);
}
header.fixed .flag-dropdown .dropdown-toggle:hover,
header.fixed .flag-dropdown .dropdown-toggle:focus {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.25);
}
header.fixed .flag-dropdown .dropdown-toggle::after {
    border-top-color: #111827;
}

/* Fixed header: nav link'leri + header-nav arka plan */
header.header-eight.fixed .header-nav {
    background-color: #fff !important;
    backdrop-filter: none;
}
header.header-eight.fixed .header-nav .main-menu-wrapper .main-nav > li > a {
    color: #111827;
}
header.header-eight.fixed .header-nav .main-menu-wrapper .main-nav > li > a:hover,
header.header-eight.fixed .header-nav .main-menu-wrapper .main-nav > li.active > a {
    background-color: var(--dc-primary, #1f2937);
    color: #fff;
}
.flag-dropdown .dropdown-menu {
    min-width: 180px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 9999;
}
.flag-dropdown .dropdown-menu .dropdown-item {
    color: #1f2937 !important;
    font-weight: 500;
    padding: 8px 12px;
}
.flag-dropdown .dropdown-menu .dropdown-item:hover {
    background: #f3f4f6;
}
.flag-dropdown .dropdown-menu .dropdown-item.active {
    background: var(--dc-primary) !important;
    color: #fff !important;
}

/* --- Swap Button --- */
.form-item:has(.dc-swap-btn) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
@media (max-width: 991.98px) {
    .banner-form .form-info {
        flex-wrap: wrap;
    }
    .banner-form .form-info > .form-item {
        flex: 1 1 calc(50% - 1px);
        min-width: 140px;
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb;
    }
    .banner-form .form-info > .form-item:last-child {
        border-bottom: none;
    }
    .form-item:has(.dc-swap-btn) {
        max-width: none !important;
        min-width: auto !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        order: -1;
        margin: 0 auto;
        padding: 4px 0 !important;
        border: none !important;
        border-bottom: none !important;
    }
    .form-item:has(.dc-swap-btn) .dc-swap-btn {
        transform: rotate(90deg);
        width: 28px !important;
        height: 28px !important;
    }
    /* Arama formu d-lg-flex → dikey */
    .banner-form .d-lg-flex {
        flex-direction: column;
    }
    .banner-form .search-btn {
        width: 100%;
        margin: 12px 0 0 0 !important;
    }
    /* Sidebar mobilde altında */
    .theiaStickySidebar .card.sticky-top {
        position: static !important;
    }
    /* Rezervasyon detay sidebar */
    .order-details.guide-booking-card {
        margin-top: 16px;
    }
}
@media (max-width: 767.98px) {
    .hero-sec-eight { min-height: auto; padding: 80px 0 30px !important; }
    /* Arama form-item'ları full-width */
    .banner-form .form-info > .form-item {
        flex: 1 1 100% !important;
    }
    /* Koltuk haritası compact */
    .dc-cabin { max-width: 100% !important; overflow-x: auto; }
    .dc-seat { width: 28px; height: 28px; font-size: 10px; }
    .dc-aisle { width: 10px; }
    /* Timeline wrap */
    /* ⛔ Ot.111 — uçuş kartının eski `.d-flex.flex-wrap > div` yaması KALDIRILDI:
       kart §21 ile `.dc-fc-row` düzenine geçti, satır içi `width:%` değerleri yok. */
}

/* Extra-small devices (phones ≤ 575px) */
@media (max-width: 575.98px) {
    /*  ⛔ Ot.111 — BURADAN İKİ ÖLÜ BLOK SİLİNDİ (§21 kart yeniden yazımı):
        (1) `.dc-flight-card .d-flex.flex-wrap > div { width:auto !important }`
        (2) 🔴 `[style*="width:20%"], [style*="width:15%"] …{ width:100% !important }`

        İkincisi SAYFA GENELİ bir seçiciydi: kartla hiç ilgisi olmayan, satır içinde
        o genişliği taşıyan HER öğeyi de ≤575px'te tam genişliğe zorluyordu. Kart artık
        sınıf tabanlı olduğu için ikisi de gereksiz — ve ikincisi zaten bir borçtu. */

    /* BrandedFare kartları — min-width kaldır */
    .dc-fare-card {
        min-width: auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Wizard step bağlantıları — dikey */
    .wizard-container .steps {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .wizard-container .steps .step {
        width: 100%;
    }

    /* Uçuş path timeline — wrap */
    .d-flex.align-items-center.justify-content-between.gap-4 {
        flex-direction: column;
        gap: 12px !important;
        text-align: center;
    }

    /* Rezervasyon timeline — dikey */
    .card-body > .d-flex.flex-wrap.gap-2:has(.bg-success-subtle) {
        flex-direction: column;
    }
    .card-body > .d-flex.flex-wrap.gap-2:has(.bg-success-subtle) > .d-flex.align-items-center:has(.isax-arrow-right-3) {
        display: none !important;
    }

    /* QR code responsive */
    img[alt="QR Code"], img[alt="QR"], img[alt="E-Ticket QR"], img[alt="E-Ticket"] {
        width: 80px !important;
        height: 80px !important;
    }

    /* Sticky sidebar — mobilde static */
    .sticky-top {
        position: static !important;
    }

    /* PNR büyük metin — küçült */
    [style*="font-size:3rem"] {
        font-size: 1.8rem !important;
        letter-spacing: 4px !important;
    }

    /* Dropdown menü — tam genişlik */
    .dropdown-menu.dropdown-xl {
        width: calc(100vw - 32px) !important;
        max-width: none !important;
    }

    /* Offer expiry alert — compact */
    #offerExpiryAlert {
        font-size: 13px;
    }

    /* Koltuk seçimi — daha küçük */
    .dc-seat { width: 24px !important; height: 24px !important; font-size: 9px !important; }
    .dc-row-num { width: 20px; font-size: 10px; }
}

/* --- Navbar Readability Fix --- */
nav.navbar.bg-dark ul.nav > li > a,
nav.validnavs.bg-dark ul.nav > li > a {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
nav.navbar.bg-dark ul.nav > li > a:hover {
    color: var(--dc-primary) !important;
}

/* --- Accessibility (WCAG 2.1) --- */

/* Skip to content link — visible only on focus */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    background: var(--dc-primary);
    color: #fff;
    padding: 12px 24px;
    border-radius: var(--dc-radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-to-content:focus {
    top: 12px;
    color: #fff;
    outline: 3px solid var(--dc-primary-dark);
    outline-offset: 2px;
}

/* Focus indicators for keyboard navigation (WCAG 2.4.7) */
/* Fallback for browsers without :focus-visible support */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 3px solid var(--dc-primary);
    outline-offset: 2px;
}

/* Enhanced: use :focus-visible where supported (hides outline for mouse clicks) */
@supports selector(:focus-visible) {
    a:focus:not(:focus-visible),
    button:focus:not(:focus-visible) {
        outline: none;
    }
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
        outline: 3px solid var(--dc-primary);
        outline-offset: 2px;
    }
}

/* Offcanvas close button — reset native button styles */
button.offcanvas-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    font-size: 1.2rem;
    color: inherit;
}

/* Hamburger menu button — reset native button styles */
button.sidebar-menu {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
}

/* --- Responsive Utilities --- */
@media (max-width: 767.98px) {
    .dc-hero { min-height: 350px; }
    .dc-hero h1 { font-size: 28px; }
    .dc-search-form { border-radius: var(--dc-radius-md); }
}

/* ============================================================
   VITRIN KARTI — Ot.130 (#33)
   ============================================================
   TEK GOVDE, IKI BOLUM: "Populer Destinasyonlar" ve "One Cikan Oteller"
   bundan sonra AYNI iskeleti kullanir.

   🔴 NEDEN TEK GOVDE (olculdu, Ot.130): iki bolum bugune kadar AYRI govdeler
      tasiyordu — destinasyon bizim `.dc-dest-card` (240/180px, 16px yaricap),
      otel ise VENDOR temasinin `.trending-list` govdesi (220/200px, gorselin
      ALTINDA beyaz panel). Ayni sayfada iki farkli kart dili, ve mobilde fark
      TERS yone donuyordu (240>220 masaustu, 180<200 mobil). Tasarim iki kez
      yazilsaydi "kardes ayrismasi" sinifina yeni bir ornek daha uretirdik.

   ⛔ VENDOR DOSYASINA DOKUNULMADI. Tasarim vendor'in KULLANILMAYAN
      `.destinations-sec-nine` blogundan (style.css:19725-19822) taban alindi ve
      `dc-` onekiyle buraya YAZILDI; o bolge `!important` tasimiyor (olculdu: 0),
      yani cekismiyoruz. Vendor'in `z-index:-1` hilesi BILEREK alinmadi: gorseli
      kendi yiginindan cikariyor ve kap arka plani degisirse gorsel KAYBOLUR.

   ⚠️ Vendor'da metin dogrudan fotografin uzerinde (beyaz, scrim YOK) — okunurlugu
      fotografin sansina birakiyor. Gradyan perde KORUNDU (bizim eski govdemizde
      zaten vardi ve dogru olan bu).
   ============================================================ */
:root {
    /* Kart yuksekligi TEK KAYNAK: iki bolum de bu degiskeni okur, yani
       "iki bolum esit yukseklikte" bir dilek degil YAPISAL bir garanti olur. */
    --dc-vitrin-yukseklik: 280px;
    --dc-vitrin-yaricap: 12px;
    --dc-vitrin-dolgu: 20px;
}

.dc-vitrin-kart {
    display: block;
    position: relative;
    height: var(--dc-vitrin-yukseklik);
    border: 1px solid #E4EBF1;
    border-radius: var(--dc-vitrin-yaricap);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: #0b1220;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.dc-vitrin-kart:hover,
.dc-vitrin-kart:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .18);
    color: #fff;
}
.dc-vitrin-kart img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform .9s ease;
}
.dc-vitrin-kart:hover img { transform: scale(1.12); }

/* Perde: ustte ad, altta fiyat/dugme okunabilsin diye IKI YONLU. */
.dc-vitrin-kart::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.10) 32%,
                                        rgba(0,0,0,.10) 55%, rgba(0,0,0,.72) 100%);
    pointer-events: none;
}

.dc-vitrin-ad {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: var(--dc-vitrin-dolgu);
    padding-right: calc(var(--dc-vitrin-dolgu) + 56px); /* saga rozet gelebilir */
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    z-index: 2;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    /* ⚠️ Uzun otel adlari kartin yarisini yemesin: en fazla iki satir. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dc-vitrin-rozet {
    position: absolute;
    top: var(--dc-vitrin-dolgu);
    right: var(--dc-vitrin-dolgu);
    z-index: 3;
    background: rgba(255, 255, 255, .92);
    color: #1b2431;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dc-vitrin-alt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--dc-vitrin-dolgu);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    z-index: 2;
}
.dc-vitrin-bilgi { min-width: 0; }
.dc-vitrin-etiket {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.dc-vitrin-fiyat {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
    font-variant-numeric: tabular-nums;
}
.dc-vitrin-yer {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Yuvarlak eylem dugmesi — vendor'in `.location-view-button` olcusu (44px). */
.dc-vitrin-dugme {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: #1b2431;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background .3s ease, color .3s ease;
}
.dc-vitrin-kart:hover .dc-vitrin-dugme {
    background: var(--brand-primary, #CF3425);
    color: #fff;
}

@media (max-width: 991.98px) {
    :root { --dc-vitrin-yukseklik: 260px; }
}
@media (max-width: 575.98px) {
    :root {
        --dc-vitrin-yukseklik: 220px;
        --dc-vitrin-dolgu: 14px;
    }
    .dc-vitrin-ad { font-size: 16px; padding-right: calc(var(--dc-vitrin-dolgu) + 44px); }
    .dc-vitrin-fiyat { font-size: 16px; }
    .dc-vitrin-dugme { width: 38px; height: 38px; font-size: 17px; }
}

/* ------------------------------------------------------------
   VITRIN KARUSELI
   ------------------------------------------------------------
   ⭐ KARAR (kullanici, Ot.130): karusel yalniz kart sayisi GORUNENDEN FAZLAYSA
      devreye girer. Uc kiracida da bugun 4 kart var; masaustunde dordu birden
      goruluyorsa karusel gorsel olarak OLU kalirdi.

   🔴 JS'SIZ CALISMA KORUNDU. `slick.css` `media="print"` ile GECIKMELI yukleniyor
      ve `slick.min.js` sayfa sonunda kosuyor; kaplayici yalnizca slick'e
      birakilsaydi JS kapali/yavas istemcide kartlar tek sutun yigilir ve ilk
      boyamada duzen kayardi (CLS). Asagidaki `:not(.slick-initialized)` dali
      slick devreye girene kadar CALISAN bir yatay kaydirici verir.
   ------------------------------------------------------------ */
.dc-vitrin-karusel:not(.slick-initialized) {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}
.dc-vitrin-karusel:not(.slick-initialized) > .dc-vitrin-slayt {
    flex: 0 0 auto;
    width: calc(25% - .75rem);
    scroll-snap-align: start;
}
.dc-vitrin-karusel.slick-initialized .dc-vitrin-slayt { padding: 0 .5rem; }
.dc-vitrin-karusel .slick-list { margin: 0 -.5rem; }

@media (max-width: 991.98px) {
    .dc-vitrin-karusel:not(.slick-initialized) > .dc-vitrin-slayt { width: calc(50% - .5rem); }
}
@media (max-width: 575.98px) {
    .dc-vitrin-karusel:not(.slick-initialized) > .dc-vitrin-slayt { width: calc(50% - .5rem); }
}

/* Oklar — vendor'in olcusu (44px), ama KENDI govdemizde.
   ⚠️ `slick-theme.css` YUKLENMIYOR (olculdu), yani slick'in kendi ok/nokta
      stilleri HIC gelmiyor; yazmasaydik oklar "Previous/Next" duz metni olarak
      cikardi. Ok icerigi init'te ozel HTML olarak veriliyor. */
.dc-vitrin-karusel .slick-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #E4EBF1;
    background: #fff;
    color: #1b2431;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}
.dc-vitrin-karusel .slick-arrow:hover { background: var(--brand-primary, #CF3425); color: #fff; }
.dc-vitrin-karusel .slick-prev { left: -14px; }
.dc-vitrin-karusel .slick-next { right: -14px; }
.dc-vitrin-karusel .slick-arrow.slick-disabled { opacity: .35; cursor: default; }

/* Nokta gostergeleri — sifirdan (`.slick-dots` deponun HICBIR yuklu CSS'inde yok). */
.dc-vitrin-karusel .slick-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}
.dc-vitrin-karusel .slick-dots li { line-height: 0; }
.dc-vitrin-karusel .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #C9D2DC;
    font-size: 0;
    text-indent: -9999px;
    transition: width .25s ease, background .25s ease;
}
.dc-vitrin-karusel .slick-dots li.slick-active button {
    width: 22px;
    border-radius: 4px;
    background: var(--brand-primary, #CF3425);
}

/* --- Section Spacing Reduction (modüller arası boşluk azaltma) --- */
.section { padding: 40px 0 !important; }
@media (max-width: 991.98px) { .section { padding: 30px 0 !important; } }
.section.pb-0 { padding-bottom: 0 !important; }
/* ⛔ `.dc-search-section` / `.dc-search-sticky` kurallari Ot.98/Faz-0 ile SILINDI —
   yukaridaki olu blogun ARTIGIYDI ve silme araliginin DISINDA kalmisti (grep ile
   yakalandi). Her iki sinif da calisan sayfada 0 dugum uretiyor. */
.section-header-eight { margin-bottom: 20px; }
.section-header-eight h2 { margin-bottom: 0; }

/* ============================================================
   DIJITAL DOGRULAMA + WHATSAPP — Oturum 75
   ============================================================
   Dijital dogrulama: TURSAB'in "acenta unvani ve belge numarasi
   header ve footer'da yer almali" sarti. Blok yalniz unvan VE belge no
   birlikte doluyken basilir (BaseWebController), yani belgesi olmayan
   tenant'ta (orn. Erriogo/Sirbistan) hicbir sey cizilmez.
   ============================================================ */

/* --- Header satiri --- */
.dc-verif-header {
    font-size: 0.72rem;
    line-height: 1.25;
    margin-top: 2px;
    letter-spacing: .01em;
    /* Header hero uzerinde SEFFAF baslar, kaydirinca `header.fixed` ile beyaza doner.
       Iki durumda da okunur olmasi icin renk o gecise baglandi; tek renk verilseydi
       durumlardan birinde metin arka planla ayni renge dusup GORUNMEZ olurdu. */
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: color .2s ease;
}
header.fixed .dc-verif-header {
    color: #4b5563;
    text-shadow: none;
}
@media (max-width: 991.98px) {
    /* Dar ekranda logo blogu daralir; satir sarsin, menuyu asagi itmesin. */
    .dc-verif-header { font-size: 0.66rem; max-width: 220px; }
}

/* --- Footer satiri --- */
.dc-verif-footer {
    margin-top: 6px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.72);
}

/* --- Footer rozeti --- */
.dc-verif-badge img {
    max-width: 200px;
    width: 100%;
    height: auto;
    border-radius: 6px;
    background: #fff;      /* rozet gorselleri genelde seffaf/beyaz zeminli */
    padding: 4px;
}
.dc-verif-badge a { display: inline-block; }
.dc-verif-badge a:focus-visible { outline: 2px solid #25D366; outline-offset: 2px; }

/* ============================================================
   WHATSAPP yuzen buton
   Konum: back-to-top (right:15px, bottom:30px, 36x36) USTUNDE — cakismaz.
   ============================================================ */
.dc-whatsapp-fab {
    position: fixed;
    right: 15px;
    bottom: 78px;
    z-index: 9998;          /* back-to-top 9999; ust uste binmiyorlar */
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    transition: transform .18s ease, box-shadow .18s ease;
}
.dc-whatsapp-fab:hover,
.dc-whatsapp-fab:focus {
    color: #fff;
    transform: scale(1.07);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.34);
}
.dc-whatsapp-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Arama widget'inin acilir menusu acikken gizlenir — mobilde menunun
   alt kismini kapatiyordu. Ayni davranis back-to-top'ta da var (site.css:1011). */
body.dc-dropdown-open .dc-whatsapp-fab,
body.dc-sw-drawer-active .dc-whatsapp-fab {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .dc-whatsapp-fab { width: 46px; height: 46px; font-size: 23px; bottom: 72px; }
}

/* Hareket azaltma tercihi olan kullanicida buyume animasyonu kapanir. */
@media (prefers-reduced-motion: reduce) {
    .dc-whatsapp-fab { transition: none; }
    .dc-whatsapp-fab:hover, .dc-whatsapp-fab:focus { transform: none; }
}

/* ============================================================
   OT.110/2 (#20) — SIPARIS OZETI KARTI 100px ASAGI KAYIYORDU
   ============================================================
   🔴 BELIRTI (kullanici, Ot.105): ucus teklif sayfasinda sagdaki "Siparis Ozeti"
      kartinin UST kenari, soldaki ucus kartiyla hizali degil.
   ⭐ OLCULDU (1440px, scrollY=0): sol kart ust=147, sag kart ust=247 -> fark TAM 100px.

   🔴 SEBEP KOD OKUYARAK BULUNAMAZDI — tarayiciya SORULDU (CSS.getMatchedStylesForNode).
      Eslesen kurallar (sonuncusu kazanir):
          .card       { position: relative }
          .sticky-top { position: -webkit-sticky }   <- Bootstrap
          .card       { position: relative }         <- SONRA gelen ikinci .card KAZANIYOR
      Yani tema `.card` kurali, Bootstrap'in `.sticky-top`unu IPTAL ediyor (ayni ozgulluk,
      daha sonra tanimli). Geriye `position: relative` + satir ici `top:100px` kaliyor ve
      bu, ogeyi KOSULSUZ 100px asagi iter. Sticky HIC calismiyordu.
   ⛔ Ilk okumam "sticky karti asagi itiyor" demisti — YANLISTI: sticky bir ogeyi esik
      asilana kadar OTELEMEZ. Olcum hipotezi duzeltti.

   ⭐ COZUM `top:100px`i silmek DEGIL (o, kartin yapismasi icin ISTENEN ofset), niyeti
      GERI GETIRMEK: `.card.sticky-top` ozgullugu 0-2-0 ile `.card`i (0-1-0) yener —
      dosya sirasindan BAGIMSIZ.
   ⚠️ MOBILE DOKUNMAZ: `@media (max-width: …)` altindaki `.sticky-top { position: static
      !important }` kurallari `!important` tasidigi icin yururlukte kalir; kart mobilde
      yine akista durur.
   ⚠️ Kapi: `tools/ucus-teklif-hizasi-dogrula.js` — iki kolonun ust kenari ayni mi. */
.card.sticky-top {
    position: sticky;
}