/* =======================================================
   MAKRI TRAVEL - MODERN STYLE (FINAL & RESPONSIVE)
   ======================================================= */

/* 1. RESET VE TEMEL AYARLAR */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --primary: #006994;
    --primary-dark: #00507a;
    --secondary: #2c3e50;
    --accent: #e74c3c;
    --text: #2d3436;
    --text-light: #636e72;
    --bg-light: #f8f9fa;
    --white: #ffffff;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
    --radius: 12px;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: smooth;
    touch-action: manipulation;
}

body {
    background: var(--white);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

input,
select,
button,
textarea {
    font-family: 'Poppins', sans-serif;
    outline: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-padding {
    padding: 0px 0;
}

.bg-light {
    background-color: var(--bg-light);
}

.bg-white {
    background-color: var(--white);
}

/* =======================================================
   2. TOP BAR
   >> TÜM KURALLAR header-footer.css DOSYASINA TAŞINDI <<
   ======================================================= */

/* =======================================================
   3. HEADER & NAVİGASYON
   >> TÜM KURALLAR header-footer.css DOSYASINA TAŞINDI <<
   >> Bu bölüm bileç çakışmayı önlemek için boşaltıldı  <<
   ======================================================= */

/* =======================================================
   4. HERO SECTION
   ======================================================= */
.hero {
    height: 85vh;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url('../img/didim.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    margin-top: -80px;
    padding-top: 80px;
}

.hero-content h2 {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 15px;
    animation: fadeInUp 0.8s ease;
}

.hero-content h1 {
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    animation: fadeInUp 1s 0.2s ease backwards;
}

/* =======================================================
   5. SEARCH ENGINE (YATAY)
   ======================================================= */
.search-container {
    background: var(--white);
    padding: 30px 40px;
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    max-width: 1140px;
    margin: -100px auto 60px;
    position: relative;
    z-index: 10;
}

.trip-type {
    display: flex;
    gap: 30px;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.radio-group {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--secondary);
}

.radio-group input {
    accent-color: var(--primary);
    width: 20px;
    height: 20px;
}

.search-form {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    flex-wrap: nowrap;
}

.form-group {
    flex: 1;
    position: relative;
    min-width: 0;
}

.form-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 8px;
    display: block;
    white-space: nowrap;
}

.input-icon-wrap {
    background: #f8f9fa;
    border: 1px solid #e1e1e1;
    padding: 10px 15px;
    border-radius: 8px;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
}

.input-icon-wrap:focus-within {
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(0, 105, 148, 0.1);
}

.input-icon-wrap i {
    color: var(--primary);
    font-size: 1rem;
}

.input-icon-wrap select,
.input-icon-wrap input {
    border: none;
    background: transparent;
    width: 100%;
    outline: none;
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 500;
    cursor: pointer;
}

/* Yolcu Dropdown */
.passenger-dropdown {
    position: absolute;
    top: 110%;
    left: 0;
    width: 280px;
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: var(--shadow-hover);
    padding: 20px;
    z-index: 999;
}

.passenger-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.counter-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f1f1f1;
    border-radius: 20px;
    padding: 5px;
}

.counter-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--white);
    color: var(--primary);
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.counter-btn:hover {
    background: var(--primary);
    color: var(--white);
}

.counter-value {
    width: 20px;
    text-align: center;
    background: transparent;
    border: none;
    font-weight: 600;
}

.btn-search {
    flex: 0 0 auto;
    background: var(--secondary);
    color: var(--white);
    border: none;
    padding: 0 35px;
    height: 50px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.btn-search:hover {
    background: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* =======================================================
   6. CARDS & SLIDERS
   ======================================================= */
.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h3 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--secondary);
    font-weight: 700;
}

.section-title p {
    color: var(--text-light);
    font-size: 1.1rem;
}

.slider-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

.slider-track {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    padding: 20px 5px;
    scroll-behavior: smooth;
    width: 100%;
    scroll-snap-type: x mandatory;
}

.slider-track::-webkit-scrollbar {
    display: none;
}

.slider-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: var(--white);
    color: var(--secondary);
    box-shadow: var(--shadow);
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 5;
    flex-shrink: 0;
}

.slider-btn:hover {
    background: var(--primary);
    color: var(--white);
}

.route-card {
    min-width: 300px;
    height: 400px;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    scroll-snap-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
    cursor: pointer;
}

.route-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.route-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.route-card:hover .route-img {
    transform: scale(1.1);
}

.route-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    padding: 30px 20px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.tour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.tour-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid #f0f0f0;
}

.tour-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

.card-image {
    height: 240px;
    position: relative;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.tour-card:hover .card-image img {
    transform: scale(1.1);
}

.price-tag {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: var(--primary);
    color: var(--white);
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.card-body {
    padding: 25px;
}

.btn-outline {
    display: block;
    width: 100%;
    text-align: center;
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-outline:hover {
    background: var(--primary);
    color: var(--white);
}

.feature-box {
    padding: 30px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.feature-box:hover {
    transform: translateY(-5px);
}

.partners-grid img {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: var(--transition);
}

.partners-grid img:hover {
    filter: none;
    opacity: 1;
    transform: scale(1.1);
}

/* =======================================================
   7. FOOTER
   ======================================================= */
.main-footer {
    background: #1a1a1a;
    color: #a4b0be;
    padding-top: 80px;
    margin-top: 80px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    padding-bottom: 60px;
}

.footer-col h3 {
    color: var(--white);
    margin-bottom: 30px;
    font-size: 1.3rem;
    font-weight: 600;
    position: relative;
    padding-bottom: 12px;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: var(--primary);
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a:hover {
    color: var(--primary);
    transform: translateX(5px);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.contact-item i {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.copyright-bar {
    background: #111;
    padding: 25px 0;
    border-top: 1px solid #222;
    font-size: 0.9rem;
}

.copyright-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* =======================================================
   8. RESPONSIVE MEDIA QUERIES (MOBİL/TABLET)
   ======================================================= */

@media (max-width: 1024px) {
    .hero-content h1 {
        font-size: 3rem;
    }

    .search-container {
        margin: -60px 20px 50px;
        padding: 25px;
    }

    .search-form {
        flex-wrap: wrap;
    }

    .form-group {
        flex: 1 1 45%;
    }

    .btn-search {
        width: 100%;
        flex: 1 1 100%;
        margin-top: 10px;
    }
}

@media (max-width: 768px) {

    /* =============================================
       Header/Nav mobil kuralları header-footer.css
       dosyasına taşındı. Burada sadece sayfa içerikleri.
       ============================================= */

    /* 4. DİĞER MOBİL AYARLAR */
    .hero {
        height: 60vh;
        margin-top: -80px;
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

    .search-container {
        margin-top: -40px;
        padding: 20px;
    }

    .search-form {
        flex-direction: column;
        gap: 15px;
    }

    .form-group {
        width: 100%;
        flex: auto;
    }

    .btn-search {
        width: 100%;
        margin-top: 5px;
    }

    .tour-grid,
    .footer-grid,
    .features-grid {
        grid-template-columns: 1fr;
    }

    .slider-btn {
        display: none;
    }

    .slider-track {
        padding: 10px 20px;
    }

    .footer-col {
        text-align: center;
    }

    .footer-col h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .contact-item {
        justify-content: center;
    }

    .copyright-bar .container {
        flex-direction: column;
        text-align: center;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/* ==================================================
   YENİ FERİBOT SAYFASI VE KART TASARIMI (MODERN UI)
   ================================================== */

/* 1. Hero (Üst Kapak) Bölümü */
.ferry-page-hero {
    position: relative;
    height: 450px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    margin-bottom: 60px;
}

.ferry-page-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 20, 40, 0.4), rgba(0, 20, 40, 0.8));
    z-index: 1;
}

.ferry-page-content {
    position: relative;
    z-index: 2;
    padding-top: 40px;
}

.ferry-page-badge {
    background: #ffc107;
    color: #000;
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.ferry-page-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.ferry-page-subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
}

/* 2. Filtreleme Alanı */
.ferry-filter-container {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    margin-top: -80px;
    /* Hero'nun üzerine binsin */
    position: relative;
    z-index: 10;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

.ferry-filter-form {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.ferry-input-group {
    flex-grow: 1;
}

.ferry-input-group label {
    display: block;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.ferry-input-group label i {
    color: var(--primary, #006994);
    margin-right: 5px;
}

.ferry-form-control {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #eef2f6;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s;
    background: #f8f9fa;
    color: #2c3e50;
}

.ferry-form-control:focus {
    border-color: var(--primary, #006994);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 105, 148, 0.1);
}

.ferry-btn-group {
    min-width: 160px;
}

/* 3. Sefer Kartı (Card) - GENEL YAPI */
.ferry-list-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.ferry-section-title {
    color: #95a5a6;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 4px solid var(--primary, #006994);
}

.ferry-card {
    background: #fff;
    border-radius: 16px;
    padding: 0;
    margin-bottom: 25px;
    display: flex;
    align-items: stretch;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #edf2f7;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.ferry-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 105, 148, 0.12);
    border-color: rgba(0, 105, 148, 0.3);
}

/* Kart - Sol Taraf (Saat) */
.ferry-card-left {
    background: #f8fbff;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 140px;
    border-right: 1px dashed #dcebf7;
}

.ferry-time {
    font-size: 2rem;
    font-weight: 800;
    color: #2c3e50;
    line-height: 1;
    margin-bottom: 5px;
}

.ferry-date {
    font-size: 0.85rem;
    color: #7f8c8d;
    text-align: center;
    line-height: 1.4;
}

.ferry-date span {
    display: block;
    font-weight: 600;
    color: var(--primary, #006994);
}

/* Kart - Orta Taraf (Rota) */
.ferry-card-middle {
    flex-grow: 1;
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ferry-route-visual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.port-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: #34495e;
}

.route-line {
    flex-grow: 1;
    margin: 0 20px;
    position: relative;
    height: 2px;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.route-line .ship-icon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--primary, #006994);
    background: #fff;
    padding: 0 10px;
}

.ferry-ship-info {
    font-size: 0.9rem;
    color: #7f8c8d;
    display: flex;
    align-items: center;
    gap: 15px;
}

.arrival-badge {
    background: #edf2f7;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #4a5568;
}

/* Kart - Sağ Taraf (Fiyat ve Buton) - GÜNCELLENMİŞ VERSİYON */
.ferry-card-right {
    width: 200px;
    /* Sabit genişlik verdim, kaymaz */
    background: #f9f9f9;
    border-left: 1px dashed #ddd;
    padding: 20px;
    display: flex;
    flex-direction: column;
    /* Alt alta diz */
    justify-content: center;
    /* Dikeyde ortala */
    align-items: flex-end;
    /* Sağa yasla */
    gap: 15px;
    /* Fiyat ve buton arasına boşluk koy */
    flex-shrink: 0;
    /* Sıkışmasını engelle */
}

.price-tag {
    color: #e74c3c;
    font-weight: 800;
    line-height: 1;
    text-align: right;
}

.price-tag .currency {
    font-size: 1.2rem;
    vertical-align: top;
    margin-right: 2px;
}

.price-tag .amount {
    font-size: 2.2rem;
    /* Fiyatı belirgin yap */
    letter-spacing: -1px;
}

.price-label {
    display: block;
    font-size: 0.75rem;
    color: #999;
    margin-top: 5px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Butonlar */
.ferry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    gap: 8px;
}

.ferry-btn-primary {
    background: var(--primary, #006994);
    color: #fff;
}

.ferry-btn-primary:hover {
    background: #004e6e;
    color: #fff;
}

.ferry-btn-ticket {
    background: #006994;
    color: #fff !important;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: all 0.2s;
    text-align: center;
    width: 100%;
    /* Buton kutuya tam otursun */
}

.ferry-btn-ticket:hover {
    background: #004e6e;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 105, 148, 0.3);
}

.ferry-btn-outline {
    background: transparent;
    border: 2px solid #e0e0e0;
    color: #7f8c8d;
}

.ferry-btn-outline:hover {
    border-color: var(--primary, #006994);
    color: var(--primary, #006994);
}

.ferry-btn-disabled {
    background: #eee;
    color: #aaa;
    cursor: not-allowed;
}

/* Boş Sonuç Kutusu */
.ferry-no-result {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 16px;
    border: 2px dashed #e0e0e0;
}

.ferry-icon-circle {
    width: 80px;
    height: 80px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #bdc3c7;
    font-size: 2rem;
}

/* Bilgi Kutusu */
.ferry-info-box {
    max-width: 900px;
    margin: 40px auto;
    background: #ebf8ff;
    border-left: 5px solid #4299e1;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    gap: 15px;
    color: #2b6cb0;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Rota Listeleme Sayfası */
.ferry-list-hero {
    background: linear-gradient(135deg, #006994 0%, #004e6e 100%);
    padding: 80px 0;
    text-align: center;
    color: #fff;
    margin-bottom: 50px;
}

.ferry-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding-bottom: 80px;
}

.ferry-grid-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    border: 1px solid #eee;
}

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

.ferry-grid-card .card-image {
    height: 200px;
    background: #eee;
    position: relative;
}

.ferry-grid-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ferry-grid-card .card-body {
    padding: 25px;
    text-align: center;
}

.ferry-grid-card .card-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary, #006994);
}

/* MOBİL UYUMLULUK (GÜNCELLENDİ) */
@media (max-width: 768px) {
    .ferry-page-title {
        font-size: 2.5rem;
    }

    .ferry-filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .ferry-filter-container {
        margin-top: -40px;
        padding: 20px;
    }

    .ferry-card {
        flex-direction: column;
    }

    .ferry-card-left {
        flex-direction: row;
        justify-content: space-between;
        padding: 15px 20px;
        border-right: none;
        border-bottom: 1px dashed #e0e0e0;
    }

    .ferry-time {
        font-size: 1.5rem;
        margin: 0;
    }

    .ferry-date {
        text-align: right;
    }

    .ferry-card-middle {
        padding: 20px;
    }

    .ferry-route-visual {
        margin-bottom: 10px;
    }

    /* Mobil Fiyat Alanı Düzenlemesi */
    .ferry-card-right {
        width: 100%;
        border-left: none;
        border-top: 1px dashed #ddd;
        flex-direction: row;
        /* Mobilde yan yana olsun */
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        gap: 0;
    }

    .price-tag {
        text-align: left;
    }

    .price-tag .amount {
        font-size: 2rem;
    }

    .price-label {
        margin-bottom: 0;
        font-size: 0.75rem;
    }

    .ferry-btn-ticket {
        width: auto;
        /* Mobilde buton küçülsün */
    }
}

/* === MODERN SEARCH PAGE STYLES === */

/* Header Alanı */
.search-header {
    background: #101522;
    /* Koyu modern arka plan */
    padding: 50px 0;
    color: white;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

.search-header::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05));
    transform: skewX(-20deg);
}

.search-summary h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.search-summary p {
    opacity: 0.8;
    font-size: 1rem;
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Sol Filtre Paneli (Sticky) */
.filter-card {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
    position: sticky;
    top: 100px;
}

.filter-item {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #f9f9f9;
}

.filter-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.filter-label {
    font-size: 0.75rem;
    color: #999;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 1px;
    display: block;
}

.filter-value {
    font-size: 1.1rem;
    color: #2c3e50;
    font-weight: 600;
}

.filter-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #555;
    margin-top: 5px;
}

/* Bilet Kartı (Boarding Pass Style) */
.ticket-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    margin-bottom: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f1f2f6;
    display: flex;
    position: relative;
}

.ticket-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

/* Kartın Sol Tarafı */
.ticket-main {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 2px dashed #e1e1e1;
    position: relative;
}

.ticket-main::after,
.ticket-main::before {
    content: '';
    position: absolute;
    right: -10px;
    width: 20px;
    height: 20px;
    background: var(--body-bg, #f4f6f9);
    border-radius: 50%;
}

.ticket-main::before {
    top: -10px;
}

.ticket-main::after {
    bottom: -10px;
}

/* Saat ve Rota Görselleştirmesi */
.ticket-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.time-group {
    text-align: left;
}

.time-group.dest {
    text-align: right;
}

.time-big {
    font-size: 2rem;
    font-weight: 800;
    color: #2d3436;
    line-height: 1;
    margin-bottom: 5px;
}

.city-small {
    font-size: 0.95rem;
    color: #636e72;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.route-visual {
    flex: 1;
    margin: 0 40px;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.route-line {
    width: 100%;
    height: 2px;
    background: #dfe6e9;
    position: relative;
    margin-bottom: 8px;
}

.route-line::after,
.route-line::before {
    content: '';
    position: absolute;
    top: -4px;
    width: 10px;
    height: 10px;
    background: #dfe6e9;
    border-radius: 50%;
}

.route-line::after {
    right: 0;
}

.route-line::before {
    left: 0;
}

.ship-icon-moving {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 0 10px;
    color: var(--primary);
    font-size: 1.2rem;
}

.duration-badge {
    font-size: 0.8rem;
    font-weight: 600;
    color: #b2bec3;
    background: #fdfdfd;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #eee;
    display: inline-block;
}

.ship-info-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #f5f5f5;
}

.ship-tag {
    background: #e3f2fd;
    color: #0984e3;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-list {
    display: flex;
    gap: 15px;
    margin-left: auto;
    color: #b2bec3;
    font-size: 1.1rem;
}

.feature-item {
    position: relative;
    cursor: help;
    transition: 0.3s;
}

.feature-item:hover {
    color: var(--primary);
    transform: scale(1.2);
}

.feature-item::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 5px 10px;
    font-size: 0.75rem;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
    margin-bottom: 8px;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.feature-item:hover::after {
    opacity: 1;
}

/* Kartın Sağ Tarafı */
.ticket-side {
    width: 300px;
    background: #fcfcfc;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.price-breakdown {
    width: 100%;
    margin-bottom: 15px;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #7f8c8d;
    margin-bottom: 6px;
}

.breakdown-row strong {
    color: #2d3436;
}

.total-price-label {
    font-size: 0.8rem;
    color: #b2bec3;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 15px;
    display: block;
    text-align: center;
    letter-spacing: 1px;
}

.total-price-big {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    text-align: center;
    line-height: 1;
    margin-bottom: 20px;
}

.btn-select {
    width: 100%;
    padding: 15px;
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-select:hover {
    background: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 105, 148, 0.25);
}

@media (max-width: 900px) {
    .ticket-card {
        flex-direction: column;
    }

    .ticket-main {
        border-right: none;
        border-bottom: 2px dashed #e1e1e1;
        padding: 20px;
    }

    .ticket-main::after,
    .ticket-main::before {
        display: none;
    }

    .ticket-side {
        width: 100%;
        padding: 25px;
        background: #fff;
        border-top: 1px dashed #eee;
    }

    .route-visual {
        margin: 0 15px;
    }

    .feature-list {
        display: none;
    }

    .ship-info-bar {
        justify-content: center;
    }
}

/* --- 3 SÜTUNLU YAPI --- */
.search-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    /* Önemli: Elemanların uzamasını engeller */
}

/* Sol Filtre Alanı */
.search-sidebar-left {
    width: 260px;
    flex-shrink: 0;
}

/* Orta Sonuç Alanı */
.search-results-area {
    flex: 1;
    /* Kalan boşluğu doldurur */
}

/* Sağ Sabit Sepet Alanı */
.search-sidebar-right {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    /* SİHİRLİ KOD: Aşağı indikçe sabit kalır */
    top: 20px;
    /* Tavana 20px kala durur */
    z-index: 90;
}

/* --- PROFESYONEL SEPET KUTUSU --- */
.cart-box {
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
    overflow: hidden;
}

.cart-header {
    background: #2c3e50;
    color: white;
    padding: 15px 20px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-body {
    padding: 20px;
    background: #f8f9fa;
    min-height: 150px;
    /* Boşken bile yer kaplasın */
}

.cart-empty-state {
    text-align: center;
    color: #95a5a6;
    padding: 30px 0;
}

.cart-item-static {
    background: white;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.cart-item-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #e74c3c;
    cursor: pointer;
    background: #fff0f0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
    transition: 0.2s;
}

.cart-item-remove:hover {
    background: #e74c3c;
    color: white;
}

.cart-footer {
    background: white;
    padding: 20px;
    border-top: 1px solid #eee;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 15px;
}

.price-label {
    color: #7f8c8d;
    font-size: 0.95rem;
}

.price-val {
    color: var(--primary);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

.btn-checkout-static {
    display: block;
    width: 100%;
    padding: 14px;
    background: #e67e22;
    /* Turuncu Action Rengi */
    color: white;
    text-align: center;
    border-radius: 8px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

.btn-checkout-static:hover {
    background: #d35400;
    transform: translateY(-2px);
}

.btn-checkout-static:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
    transform: none;
}

/* Mobil Uyumluluk */
@media (max-width: 992px) {
    .search-layout {
        flex-direction: column;
    }

    .search-sidebar-left,
    .search-sidebar-right {
        width: 100%;
        position: static;
    }

    .search-sidebar-right {
        order: -1;
        margin-bottom: 20px;
    }

    /* Mobilde sepeti üste al */
}

/* --- SOL PANEL (ARAMA & FİLTRE) YENİ TASARIM --- */
.filter-card {
    background: #fff;
    border-radius: 12px;
    padding: 0;
    /* İç padding'i kaldırdık, alt elemanlara vereceğiz */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #e1e1e1;
    overflow: hidden;
}

.filter-header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    font-weight: 700;
    color: #2c3e50;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-body {
    padding: 20px;
}

/* Görüntüleme Modu (Temiz Liste) */
.view-mode-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.view-item {
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 15px;
}

.view-item:last-child {
    border: none;
    padding: 0;
}

.view-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #95a5a6;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.view-value {
    font-size: 0.95rem;
    color: #2c3e50;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-edit-toggle {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    background: #fff;
    border: 2px solid #eee;
    color: #7f8c8d;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-edit-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Düzenleme Modu (Form) */
.edit-form-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group-sm {
    position: relative;
}

.form-label-sm {
    font-size: 0.8rem;
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

.form-control-sm {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #333;
    outline: none;
    transition: border-color 0.2s;
    background: #fff;
}

.form-control-sm:focus {
    border-color: var(--primary);
}

/* Yolcu Seçimi Grid */
.pax-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.pax-box {
    text-align: center;
}

.pax-box input {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

.pax-sub {
    font-size: 0.7rem;
    color: #999;
    margin-top: 3px;
    display: block;
}

/* Aksiyon Butonları */
.edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    pt: 15px;
    border-top: 1px solid #f5f5f5;
}

.btn-apply {
    flex: 2;
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.btn-cancel {
    flex: 1;
    background: #eee;
    color: #555;
    border: none;
    padding: 10px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.btn-cancel:hover {
    background: #e0e0e0;
}

/* ============================================================
   SADECE SEARCH.PHP İÇİN EK STİLLER (DÜZELTİLMİŞ FİNAL V2)
   (Mevcut dosyanın en altına ekleyin, az önceki hatalı bloğu silin)
   ============================================================ */

/* --- 1. ARAMA SAYFASI GENEL DÜZENİ --- */
.search-layout {
    display: flex;
    gap: 20px;
    /* Boşluğu biraz kıstık ki orta alana yer kalsın */
    align-items: flex-start;
    margin-top: 20px;
    padding-bottom: 20px;
}

/* Sol Filtre Alanı - Biraz daha daralttık */
.search-sidebar-left {
    width: 250px;
    flex-shrink: 0;
}

/* Orta Alan (Sonuçlar) - ARTIK DAHA GENİŞ */
.search-results-area {
    flex: 1;
    /* Kalan tüm boşluğu burası dolduracak */
    min-width: 0;
    /* Flex taşmasını önler */
}

/* Sağ Sepet Alanı */
.search-sidebar-right {
    width: 300px;
    /* Gereksiz genişliği aldık */
    flex-shrink: 0;
    position: sticky;
    top: 20px;
    z-index: 90;
}

/* --- 2. SOL FİLTRE PANELİ TASARIMI --- */
.filter-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e1e1e1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.filter-header {
    background: #fdfdfd;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    font-weight: 700;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.filter-body {
    padding: 15px;
}

/* Liste Görünümü */
.view-mode-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.view-item {
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 8px;
}

.view-item:last-child {
    border: none;
    padding: 0;
}

.view-label {
    font-size: 0.7rem;
    color: #aaa;
    font-weight: 700;
    display: block;
    margin-bottom: 3px;
    letter-spacing: 0.5px;
}

.view-value {
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2c3e50;
}

.btn-edit-toggle {
    width: 100%;
    padding: 8px;
    margin-top: 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #7f8c8d;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    transition: 0.2s;
}

.btn-edit-toggle:hover {
    border-color: #2c3e50;
    color: #2c3e50;
}

/* Düzenleme Formu */
.edit-form-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-label-sm {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 3px;
    display: block;
    color: #2c3e50;
}

.form-control-sm {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 0.85rem;
    outline: none;
    background: #fff;
}

.form-control-sm:focus {
    border-color: #2c3e50;
}

.pax-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.pax-box {
    text-align: center;
}

.pax-sub {
    font-size: 0.65rem;
    color: #999;
}

.edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.btn-apply {
    flex: 2;
    background: #2c3e50;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
}

.btn-cancel {
    flex: 1;
    background: #eee;
    color: #555;
    border: none;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
}

/* --- 3. ORTA ALAN: BİLET KARTLARI (DÜZELTİLDİ) --- */
.ticket-card {
    display: flex;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.03);
    margin-bottom: 15px;
    border: 1px solid #e1e1e1;
    transition: all 0.2s ease;
    overflow: hidden;
}

.ticket-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.ticket-card.selected {
    border: 2px solid #2c3e50;
    background: #fbfdff;
}

/* Kartın Sol (BİLGİ) Tarafı - ARTIK ÇOK DAHA GENİŞ */
.ticket-main {
    flex: 1;
    /* Burası kartın %75-80'ini kaplayacak */
    padding: 20px;
    border-right: 1px dashed #e0e0e0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Kartın Sağ (FİYAT) Tarafı - ARTIK DAHA DAR VE KİBAR */
.ticket-side {
    width: 170px;
    /* 220px'den 170px'e düşürdük */
    flex-shrink: 0;
    padding: 15px;
    background: #fcfcfc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* İçerik Düzeni */
.ticket-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.time-group {
    text-align: center;
    min-width: 60px;
}

.time-big {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: #2c3e50;
}

.city-small {
    font-size: 0.8rem;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Rota Çizgisi */
.route-visual {
    flex: 1;
    padding: 0 15px;
    text-align: center;
    position: relative;
}

.route-visual i {
    color: #2c3e50;
    font-size: 1.1rem;
    background: #fff;
    padding: 0 8px;
    position: relative;
    z-index: 2;
}

.duration-badge {
    display: inline-block;
    margin-top: 5px;
    font-size: 0.75rem;
    background: #f1f2f6;
    color: #7f8c8d;
    padding: 3px 10px;
    border-radius: 15px;
    font-weight: 600;
}

.ship-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9f9f9;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #eee;
}

.ship-tag {
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.feature-list {
    display: flex;
    gap: 8px;
}

.feature-item {
    color: #bdc3c7;
    font-size: 0.85rem;
}

/* Fiyat ve Buton */
.total-price-big {
    font-size: 1.4rem;
    font-weight: 800;
    color: #2c3e50;
}

.btn-select {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 2px solid #2c3e50;
    color: #2c3e50;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.btn-select:hover {
    background: #2c3e50;
    color: #fff;
}

/* --- 4. SAĞ SEPET PANELİ (CART BOX) --- */
.cart-box {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #e1e1e1;
    overflow: hidden;
}

.cart-header {
    background: #fff;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-title {
    font-weight: 700;
    color: #2c3e50;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.95rem;
}

.cart-badge {
    background: #e67e22;
    color: #fff;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
}

.cart-body {
    padding: 0;
    background: #fbfbfb;
    max-height: 350px;
    overflow-y: auto;
}

.cart-item-static {
    background: #fff;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    position: relative;
    transition: background 0.2s;
}

.cart-item-static:hover {
    background: #fafafa;
}

.cart-item-static:last-child {
    border-bottom: none;
}

.cart-route {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 4px;
    color: #2c3e50;
}

.cart-date {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 6px;
    display: flex;
    gap: 5px;
    align-items: center;
}

.cart-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.cart-price {
    font-weight: 700;
    color: #2c3e50;
}

.btn-item-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #fff5f5;
    color: #e74c3c;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    font-size: 0.8rem;
}

.btn-item-remove:hover {
    background: #e74c3c;
    color: #fff;
}

.cart-footer {
    background: #fff;
    padding: 15px;
    border-top: 1px solid #eee;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.02);
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 12px;
}

.price-label {
    font-weight: 600;
    color: #666;
    font-size: 0.9rem;
}

.price-val {
    font-size: 1.5rem;
    font-weight: 800;
    color: #2c3e50;
    line-height: 1;
}

.btn-checkout-static {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-checkout-static:hover {
    box-shadow: 0 5px 15px rgba(230, 126, 34, 0.3);
    transform: translateY(-2px);
}

.btn-checkout-static:disabled {
    background: #e0e0e0;
    color: #aaa;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --- 5. MOBİL UYUM --- */
@media (max-width: 992px) {
    .search-layout {
        flex-direction: column;
    }

    .search-sidebar-left,
    .search-sidebar-right {
        width: 100%;
        position: static;
    }

    .search-sidebar-right {
        margin-bottom: 20px;
        order: -1;
    }

    .ticket-card {
        flex-direction: column;
    }

    .ticket-main {
        border-right: none;
        border-bottom: 1px dashed #eee;
    }

    .ticket-side {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        padding: 15px;
    }

    .btn-select {
        width: auto;
        padding: 8px 20px;
    }
}

@media (max-width: 576px) {
    .ticket-side {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .btn-select {
        width: 100%;
    }
}

/* --- GİDİŞ / DÖNÜŞ TAB (SEKME) TASARIMI --- */
.search-tabs {
    display: flex;
    background: #fff;
    padding: 5px;
    border-radius: 12px;
    border: 1px solid #e1e1e1;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 15px;
    border-radius: 8px;
    font-weight: 700;
    color: #7f8c8d;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1rem;
    position: relative;
}

.tab-btn:hover {
    background: #f8f9fa;
    color: #2c3e50;
}

.tab-btn.active {
    background: #eaf2f8;
    /* Açık mavi zemin */
    color: var(--primary);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Seçim Yapıldıysa İkonu */
.tab-status-icon {
    font-size: 0.8rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ccc;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.tab-btn.completed .tab-status-icon {
    background: #27ae60;
    /* Yeşil Tik */
}

/* Tab İçerik Alanları */
.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* ============================================================
   MOBİL İÇİN PROFESYONEL GÖRÜNÜM (APP-LIKE UI)
   ============================================================ */

/* Masaüstünde gizli olan elementler */
.mobile-only {
    display: none !important;
}

@media (max-width: 992px) {

    /* 1. GENEL DÜZEN */
    .mobile-only {
        display: block !important;
    }

    .desktop-only {
        display: none !important;
    }

    .section-padding {
        padding: 20px 0 80px 0;
        /* Altta bar için boşluk bırak */
    }

    .search-layout {
        display: block;
        margin-top: 0;
    }

    /* 2. FİLTRE ALANI (Gizle/Göster Mantığı) */
    .search-sidebar-left {
        display: none;
        /* Başlangıçta gizli */
        width: 100%;
        margin-bottom: 20px;
    }

    .search-sidebar-left.active {
        display: block;
        animation: slideDown 0.3s ease;
    }

    /* Filtre Açma Butonu */
    .btn-mobile-filter {
        width: 100%;
        background: #fff;
        border: 1px solid #ddd;
        padding: 12px;
        border-radius: 8px;
        color: #2c3e50;
        font-weight: 700;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* 3. SAĞ SEPETİ MOBİLDE GİZLE (Altta sabit bar olacak) */
    .search-sidebar-right {
        display: none;
    }

    /* 4. MOBİL BİLET KARTI TASARIMI */
    .ticket-card {
        flex-direction: column;
        border: 1px solid #eee;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    }

    .ticket-main {
        border-right: none;
        border-bottom: 1px dashed #eee;
        padding: 15px;
    }

    .ticket-row-top {
        margin-bottom: 15px;
    }

    .time-big {
        font-size: 1.4rem;
    }

    .city-small {
        font-size: 0.75rem;
    }

    .ship-info-bar {
        background: transparent;
        border: none;
        padding: 0;
        margin-top: 10px;
    }

    .feature-list {
        display: none;
        /* Mobilde ikon kalabalığını gizle */
    }

    /* Alt Kısım (Fiyat ve Buton Yan Yana) */
    .ticket-side {
        width: 100%;
        flex-direction: row;
        /* Yan yana diz */
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        background: #fdfdfd;
        gap: 10px;
    }

    .total-price-big {
        font-size: 1.3rem;
        margin-bottom: 0;
    }

    .btn-select {
        width: auto;
        padding: 8px 20px;
        font-size: 0.85rem;
        min-width: 100px;
    }

    /* 5. SABİT ALT BAR (STICKY BOTTOM BAR) */
    .mobile-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
        z-index: 999;
        padding: 12px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #eee;
    }

    .m-bar-info {
        display: flex;
        flex-direction: column;
    }

    .m-bar-label {
        font-size: 0.75rem;
        color: #888;
    }

    .m-bar-price {
        font-size: 1.4rem;
        font-weight: 800;
        color: #2c3e50;
        line-height: 1.1;
    }

    .btn-mobile-checkout {
        background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
        color: white;
        border: none;
        padding: 12px 25px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 1rem;
        box-shadow: 0 5px 15px rgba(230, 126, 34, 0.3);
    }

    .btn-mobile-checkout:disabled {
        background: #ccc;
        box-shadow: none;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Yön Değiştirme Butonu */
/* Yön Değiştirme Butonu (Güncel - Küçük ve Orantılı) */
.btn-swap-route {
    display: inline-block;
    color: rgba(255, 255, 255, 0.6);
    /* Hafif silik */
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    margin: 0 15px;
    /* Sağdan soldan boşluk */
    font-size: 0.5em;
    /* Başlığın yarısı kadar boyutu olsun */
    vertical-align: middle;
    /* Tam ortalasın */
    background: rgba(255, 255, 255, 0.1);
    /* Arkaya hafif bir yuvarlak fon */
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
}

.btn-swap-route:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(180deg);
}

/* --- STEPPER (ADIM ÇUBUĞU) - SEAMLESS (BÜTÜNLEŞİK) TASARIM --- */
.booking-steps {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    /* Arka planda hafif iz */
    border-radius: 50px;
    /* Köşeleri yuvarlat */
    padding: 4px;
    /* Dış çerçeve boşluğu */
}

.booking-steps li {
    position: relative;
    /* Üst-Alt: 10px, Sağ: 15px, Sol: 35px (Okun girdiği yer) */
    padding: 10px 15px 10px 35px;
    background: #34495e;
    /* Pasif Renk (Koyu Gri/Mavi) */
    color: rgba(255, 255, 255, 0.7);
    margin-right: -20px;
    /* Birbirinin içine geçme miktarı */
    /* Ok Şekli: Sol taraf oyuk, Sağ taraf sivri */
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
    transition: all 0.3s ease;
}

/* Z-Index Ayarı: Soldaki her zaman sağdakinin üstüne binsin */
.booking-steps li:nth-child(1) {
    z-index: 6;
}

.booking-steps li:nth-child(2) {
    z-index: 5;
}

.booking-steps li:nth-child(3) {
    z-index: 4;
}

.booking-steps li:nth-child(4) {
    z-index: 3;
}

.booking-steps li:nth-child(5) {
    z-index: 2;
}

.booking-steps li:nth-child(6) {
    z-index: 1;
}

/* İlk Adım: Sol tarafı düz */
.booking-steps li:first-child {
    padding-left: 25px;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

/* Son Adım: Sağ tarafı düz */
.booking-steps li:last-child {
    margin-right: 0;
    padding-right: 25px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 20px 50%);
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

/* AKTİF ADIM (Turuncu) */
.booking-steps li.active {
    background: #e67e22;
    /* Turuncu */
    color: #fff;
    /* Aktif olan biraz daha öne çıksın */
    filter: drop-shadow(0 0 5px rgba(230, 126, 34, 0.5));
}

/* Sayı Yuvarlağı */
.step-num {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #fff;
    color: #2c3e50;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-size: 0.75rem;
    margin-right: 8px;
    font-weight: 800;
}

/* Pasif adım numaraları şeffaf olsun */
.booking-steps li:not(.active) .step-num {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* --- YOLCU BİLGİLERİ SAYFASI TASARIMI --- */

/* Yolcu Kartı */
.passenger-card {
    background: #fff;
    border: none;
    border-radius: 12px;
    /* Daha yuvarlak köşeler */
    margin-bottom: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    /* Çok hafif, modern gölge */
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.passenger-card:hover {
    transform: translateY(-2px);
    /* Üzerine gelince hafif yükselsin */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

/* Kart Başlığı (Gradient Renkler) */
.p-header {
    padding: 15px 25px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;
}

.p-header i {
    margin-right: 10px;
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Yolcu Tipine Göre Renkler */
.p-type-adult {
    background: linear-gradient(135deg, #2980b9, #3498db);
}

/* Mavi */
.p-type-child {
    background: linear-gradient(135deg, #f39c12, #f1c40f);
}

/* Turuncu */
.p-type-infant {
    background: linear-gradient(135deg, #8e44ad, #9b59b6);
}

/* Mor */

/* Form İçeriği */
.p-body {
    padding: 25px;
}

/* Modern Input Tasarımı */
.form-label-custom {
    font-size: 0.8rem;
    font-weight: 600;
    color: #7f8c8d;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-control-custom {
    height: 48px;
    /* Daha yüksek, ferah inputlar */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0 15px;
    font-size: 0.95rem;
    color: #2c3e50;
    font-weight: 500;
    background-color: #f9f9f9;
    /* Hafif gri fon */
    transition: all 0.3s ease;
}

.form-control-custom:focus {
    background-color: #fff;
    border-color: #3498db;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
    /* Odaklanınca mavi hare */
}

/* Özet Kutusu (Sağ Taraf) */
.summary-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 20px;
    overflow: hidden;
}

.summary-header {
    background: #2c3e50;
    padding: 15px 20px;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

.summary-body {
    padding: 20px;
}

.summary-route-item {
    position: relative;
    padding-left: 15px;
    margin-bottom: 15px;
    border-left: 3px solid #e67e22;
    /* Sol taraf turuncu çizgi */
}

.summary-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: #95a5a6;
    margin-bottom: 2px;
}

.summary-ports {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2c3e50;
}

.summary-date {
    font-size: 0.85rem;
    color: #7f8c8d;
    margin-top: 2px;
}

.summary-divider {
    height: 1px;
    background: #eee;
    margin: 15px 0;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.summary-total-label {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.summary-total-price {
    font-size: 1.6rem;
    font-weight: 800;
    color: #e67e22;
}

/* ============================================
   WHATSAPP STICKY BUTTON
   ============================================ */
.whatsapp-sticky {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
    z-index: 900;
    transition: all 0.3s ease;
    text-decoration: none;
}

.whatsapp-sticky:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.45);
    color: #fff;
}

.whatsapp-tooltip {
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: #333;
    padding: 10px 16px;
    border-radius: 16px;
    font-size: 0.9rem;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    pointer-events: none;
}

.whatsapp-tooltip span {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.92rem;
}

.whatsapp-tooltip small {
    color: #6b7280;
    font-size: 0.78rem;
    margin-top: 1px;
}

.whatsapp-tooltip::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #fff;
}

.whatsapp-sticky:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    left: 76px;
}

/* Tooltip Animasyonu (Kendi kendine görünme) */
@keyframes showTooltip {
    0%, 100% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-50%) translateX(0);
    }
    10%, 90% {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(8px);
    }
}

.whatsapp-tooltip {
    animation: showTooltip 15s infinite;
    animation-play-state: running;
}

.whatsapp-sticky:hover .whatsapp-tooltip {
    animation: none;
}

/* ============================================
   WHATSAPP MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .whatsapp-sticky {
        bottom: 20px;
        left: 16px;
        width: 50px;
        height: 50px;
        font-size: 26px;
        box-shadow: 0 3px 16px rgba(37, 211, 102, 0.3);
        z-index: 900;
    }

    /* Mobilde tooltip gösterme - ekranı taşırıyor */
    .whatsapp-tooltip {
        display: none !important;
        animation: none !important;
    }
}

@media (max-width: 480px) {
    .whatsapp-sticky {
        bottom: 16px;
        left: 14px;
        width: 46px;
        height: 46px;
        font-size: 24px;
    }
}

/* iOS Safe Area için (alt çubuk olan cihazlar) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .whatsapp-sticky {
            bottom: calc(16px + env(safe-area-inset-bottom));
        }
    }
}

/* Devam Et Butonu */
.btn-continue {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    width: 100%;
    border: none;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
    transition: all 0.3s ease;
}

.btn-continue:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.6);
}

/* =====================================================
   BLOG SİSTEMİ CSS KODLARI
   Bu kodları assets/css/style.css dosyasının SONUNA ekleyin
   ===================================================== */

/* =========================
   BLOG LİSTE SAYFASI
   ========================= */

/* Hero Section */
.blog-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 80px 0 60px;
    color: white;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
}

.blog-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,197.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') bottom center no-repeat;
    opacity: 0.3;
}

.blog-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.blog-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.blog-hero p {
    font-size: 1.2rem;
    opacity: 0.95;
}

/* Arama ve Filtre */
.blog-filters {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 50px;
}

.blog-filters .form-control,
.blog-filters .form-select {
    border: 2px solid #ecf0f1;
    border-radius: 8px;
    padding: 12px 15px;
}

.blog-filters .input-group-text {
    background: white;
    border: 2px solid #ecf0f1;
    border-right: none;
}

.blog-filters .form-control:focus,
.blog-filters .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 105, 148, 0.1);
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

/* Blog Card */
.blog-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.blog-card-image {
    position: relative;
    padding-top: 60%;
    overflow: hidden;
    background: #f8f9fa;
}

.blog-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.1);
}

.blog-badge {
    position: absolute;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
}

.blog-badge-featured {
    top: 15px;
    right: 15px;
    background: #e74c3c;
    color: white;
}

.blog-badge-category {
    bottom: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.95);
    color: #2c3e50;
}

.blog-card-body {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #999;
}

.blog-card-meta i {
    color: var(--primary);
}

.blog-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
}

.blog-card-title a {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.3s;
}

.blog-card-title a:hover {
    color: var(--primary);
}

.blog-card-excerpt {
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 20px;
    flex: 1;
}

.blog-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #ecf0f1;
}

.blog-author {
    color: var(--text-light);
    font-size: 14px;
}

.blog-read-more {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s;
}

.blog-read-more:hover {
    gap: 12px;
}

/* Pagination */
.blog-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 50px;
}

.page-btn {
    padding: 10px 18px;
    border: 2px solid #ecf0f1;
    border-radius: 8px;
    color: var(--secondary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.page-btn:hover,
.page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Boş Sonuç */
.blog-empty {
    text-align: center;
    padding: 80px 20px;
}

.blog-empty i {
    font-size: 80px;
    color: #ddd;
    margin-bottom: 20px;
}

.blog-empty h3 {
    color: var(--secondary);
    margin-bottom: 10px;
}



.blog-breadcrumb .breadcrumb {
    margin: 0;
    background: none;
}

.blog-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    content: "›";
    font-size: 18px;
}

.blog-detail-header {
    text-align: center;
    margin-bottom: 40px;
}

.blog-detail-category {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.blog-detail-title {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--secondary);
    margin-bottom: 25px;
}

.blog-detail-meta {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    color: #7f8c8d;
    font-size: 15px;
}

.blog-detail-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.blog-detail-meta i {
    color: var(--primary);
    font-size: 16px;
}

.blog-featured-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    margin-bottom: 50px;
}

.blog-content-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.blog-detail-content {
    font-size: 1.1rem;
    line-height: 1.9;
    color: #34495e;
}

.blog-detail-content h2,
.blog-detail-content h3,
.blog-detail-content h4 {
    color: var(--secondary);
    margin-top: 35px;
    margin-bottom: 20px;
    font-weight: 700;
}

.blog-detail-content h2 {
    font-size: 2rem;
}

.blog-detail-content h3 {
    font-size: 1.6rem;
}

.blog-detail-content h4 {
    font-size: 1.3rem;
}

.blog-detail-content p {
    margin-bottom: 20px;
}

.blog-detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 30px 0;
}

.blog-detail-content ul,
.blog-detail-content ol {
    margin: 25px 0;
    padding-left: 30px;
}

.blog-detail-content li {
    margin-bottom: 12px;
}

.blog-detail-content blockquote {
    border-left: 4px solid var(--primary);
    padding: 20px 25px;
    margin: 30px 0;
    background: #f8f9fa;
    border-radius: 5px;
    font-style: italic;
    color: #555;
}

/* Tags */
.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 50px 0;
    padding-top: 30px;
    border-top: 2px solid #ecf0f1;
}

.tag-badge {
    background: #ecf0f1;
    color: #34495e;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s;
}

.tag-badge:hover {
    background: var(--primary);
    color: white;
}

/* Share Buttons */
.blog-share {
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    margin: 50px 0;
    color: white;
}

.blog-share h3 {
    margin-bottom: 20px;
    font-weight: 700;
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    color: white;
    font-weight: 600;
    transition: all 0.3s;
}

.share-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.share-facebook {
    background: #3b5998;
}

.share-twitter {
    background: #1da1f2;
}

.share-linkedin {
    background: #0077b5;
}

.share-whatsapp {
    background: #25d366;
}

/* Navigation */
.blog-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 50px 0;
}

.nav-blog-card {
    background: white;
    border: 2px solid #ecf0f1;
    border-radius: 12px;
    padding: 20px;
    text-decoration: none;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-blog-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.nav-blog-next {
    text-align: right;
}

.nav-blog-label {
    font-size: 12px;
    text-transform: uppercase;
    color: #95a5a6;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.nav-blog-title {
    color: var(--secondary);
    font-weight: 600;
    font-size: 15px;
}

.nav-blog-card i {
    font-size: 24px;
    color: var(--primary);
}

/* Related Blogs */
.related-blogs {
    margin-top: 80px;
}

.related-blogs h2 {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 40px;
    color: var(--secondary);
}

.related-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.related-blog-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    text-decoration: none;
    display: block;
}

.related-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.related-blog-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.related-blog-body {
    padding: 20px;
}

.related-blog-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: 10px;
}

.related-blog-meta {
    font-size: 13px;
    color: #95a5a6;
}

/* Responsive */
@media (max-width: 768px) {
    .blog-hero h1 {
        font-size: 2rem;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blog-filters {
        padding: 20px;
    }

    .blog-detail-title {
        font-size: 2rem;
    }

    .blog-featured-image {
        height: 300px;
    }

    .blog-navigation {
        grid-template-columns: 1fr;
    }

    .blog-detail-meta {
        gap: 15px;
    }
}

/* =======================================================
   MODERN HERO - SPLIT DESIGN
   ======================================================= */
.hero-modern {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.hero-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../img/didim.webp') center/cover;
    opacity: 0.15;
    z-index: 0;
}

.hero-modern::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 105, 148, 0.9) 0%, rgba(44, 62, 80, 0.85) 100%);
    z-index: 1;
}

.hero-split-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 60px;
    align-items: center;
    min-height: 100vh;
    position: relative;
    z-index: 2;
}

/* SOL TARAF - ARAMA FORMU */
.hero-search-side {
    animation: slideInLeft 0.8s ease;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

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

.search-card-modern {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.search-card-header {
    text-align: center;
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 2px solid #f0f0f0;
}

.search-card-header i {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 15px;
    display: block;
}

.search-card-header h3 {
    font-size: 1.8rem;
    color: var(--secondary);
    margin-bottom: 8px;
    font-weight: 700;
}

.search-card-header p {
    color: var(--text-light);
    font-size: 0.95rem;
}

.trip-type-modern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 25px;
}

.radio-modern input {
    display: none;
}

.radio-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    font-weight: 500;
    color: #666;
}

.radio-custom i {
    font-size: 1.1rem;
}

.radio-modern input:checked+.radio-custom {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--primary), #0088bb);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 105, 148, 0.3);
}

.form-group-modern {
    margin-bottom: 20px;
}

.form-group-modern label {
    display: block;
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.form-group-modern label i {
    color: var(--primary);
    margin-right: 8px;
    font-size: 1rem;
}

.form-group-modern select,
.form-group-modern input[type="date"],
.form-group-modern input[type="text"] {
    width: 100%;
    padding: 16px 18px;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
    color: var(--text);
}

.form-group-modern select:focus,
.form-group-modern input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 105, 148, 0.1);
}

.swap-icon {
    text-align: center;
    margin: -10px 0;
    position: relative;
    z-index: 1;
}

.swap-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), #0088bb);
    color: white;
    border-radius: 50%;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 105, 148, 0.3);
}

.date-row-modern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.passenger-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.passenger-trigger:hover {
    border-color: var(--primary);
}

.passenger-trigger input {
    border: none;
    cursor: pointer;
    flex: 1;
    padding: 0;
    font-weight: 500;
}

.passenger-trigger i {
    color: var(--primary);
    transition: transform 0.3s ease;
}

.passenger-dropdown-modern {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 100;
}

.passenger-dropdown-modern.active {
    display: block;
    animation: dropdownSlide 0.3s ease;
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.passenger-modern {
    position: relative;
}

.passenger-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
}

.passenger-item:last-of-type {
    border-bottom: none;
}

.passenger-info strong {
    display: block;
    color: var(--secondary);
    font-size: 1rem;
    margin-bottom: 3px;
}

.passenger-info small {
    color: var(--text-light);
    font-size: 0.85rem;
}

.counter-modern {
    display: flex;
    align-items: center;
    gap: 15px;
}

.counter-modern button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    background: white;
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.counter-modern button:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.1);
}

.counter-modern span {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--secondary);
    min-width: 30px;
    text-align: center;
}

.passenger-done {
    width: 100%;
    margin-top: 15px;
    padding: 12px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.passenger-done:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.btn-search-modern {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
    box-shadow: 0 8px 20px rgba(231, 76, 60, 0.4);
    transition: all 0.3s ease;
}

.btn-search-modern:hover {
    background: linear-gradient(135deg, #c0392b, #a93226);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(231, 76, 60, 0.5);
}

.btn-search-modern i {
    font-size: 1.2rem;
}

/* SAĞ TARAF - HERO CONTENT */
.hero-content-side {
    animation: slideInRight 0.8s ease;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

.hero-text-wrapper {
    color: white;
}

.hero-badge {
    display: inline-block;
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-title-modern {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.hero-description {
    font-size: 1.25rem;
    line-height: 1.7;
    opacity: 0.95;
    margin-bottom: 40px;
    max-width: 600px;
}

.hero-features {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.hero-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 15px 25px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-feature-item i {
    font-size: 1.5rem;
    color: #4ade80;
}

.hero-feature-item span {
    font-weight: 600;
    font-size: 1rem;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .hero-split-container {
        grid-template-columns: 450px 1fr;
        gap: 40px;
    }

    .hero-title-modern {
        font-size: 3rem;
    }
}

@media (max-width: 992px) {
    .hero-split-container {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 60px 20px;
    }

    .hero-search-side {
        order: 2;
    }

    .hero-content-side {
        order: 1;
        text-align: center;
    }

    .hero-text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-features {
        justify-content: center;
    }

    .search-card-modern {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .hero-title-modern {
        font-size: 2.2rem;
    }

    .hero-description {
        font-size: 1.05rem;
    }

    .search-card-modern {
        padding: 30px 25px;
    }

    .date-row-modern {
        grid-template-columns: 1fr;
    }

    .trip-type-modern {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   KAPIDA VİZE SAYFASI ÖZEL TASARIMI (Agency Style)
   Prefix: .kv-
   ============================================================ */

/* Ana Kapsayıcı ve Renkler */
.kv-wrapper {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #444;
    line-height: 1.6;
    background-color: #fcfcfc;
}

.kv-wrapper * {
    box-sizing: border-box;
}

:root {
    --kv-dark: #0f172a;
    /* Koyu Lacivert (Otorite) */
    --kv-blue: #0ea5e9;
    /* Parlak Mavi (Güven) */
    --kv-gold: #fbbf24;
    /* Altın (Premium) */
    --kv-bg-light: #f8fafc;
}

/* 1. Hero (Kapak) Alanı */
.kv-hero {
    position: relative;
    padding: 100px 0 80px;
    background-color: var(--kv-dark);
    /* Arka plan resmi yoksa lacivert görünür, varsa üstüne biner */
    background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.8)), url('../img/kapida-vize-bg.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    border-radius: 0 0 50% 50% / 4%;
    /* Hafif kavisli alt kısım */
    margin-bottom: 60px;
    overflow: hidden;
}

.kv-hero h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
    color: #fff;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.kv-hero p {
    font-size: 1.25rem;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 300;
}

/* 2. Özellik Kutuları (Hero'nun altına binen) */
.kv-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: -60px;
    /* Hero'nun üstüne bindirme */
    position: relative;
    z-index: 10;
    padding-bottom: 50px;
}

.kv-feature-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
    border-bottom: 4px solid var(--kv-blue);
}

.kv-feature-card:hover {
    transform: translateY(-10px);
}

.kv-icon-box {
    width: 70px;
    height: 70px;
    background: #e0f2fe;
    color: var(--kv-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 20px;
}

.kv-feature-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--kv-dark);
}

/* 3. Başlıklar ve Ayıraçlar */
.kv-section-title {
    text-align: center;
    margin-bottom: 50px;
}

.kv-section-title h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--kv-dark);
    margin-bottom: 10px;
}

.kv-divider {
    height: 4px;
    width: 60px;
    background: var(--kv-gold);
    margin: 0 auto;
    border-radius: 2px;
}

/* 4. Adım Adım Süreç (Timeline) */
.kv-steps-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 80px;
}

.kv-step-item {
    flex: 1;
    min-width: 250px;
    text-align: center;
    padding: 20px;
    position: relative;
}

.kv-step-num {
    font-size: 4rem;
    font-weight: 900;
    color: #f1f5f9;
    line-height: 1;
    margin-bottom: -30px;
    position: relative;
    z-index: 1;
}

.kv-step-content {
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 40px 20px 20px;
    border-radius: 12px;
    position: relative;
    z-index: 2;
    transition: 0.3s;
}

.kv-step-content:hover {
    border-color: var(--kv-blue);
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.1);
}

.kv-step-content h4 {
    color: var(--kv-dark);
    font-weight: 700;
    margin-bottom: 10px;
}

/* 5. Liman Kartları (Destinasyonlar) */
.kv-ports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.kv-port-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
}

.kv-port-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.kv-port-img {
    height: 220px;
    position: relative;
    overflow: hidden;
}

.kv-port-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.kv-port-card:hover .kv-port-img img {
    transform: scale(1.1);
}

.kv-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #10b981;
    /* Yeşil */
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.kv-port-body {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.kv-port-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--kv-dark);
    text-decoration: none;
    margin-bottom: 10px;
    display: block;
}

.kv-port-desc {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 20px;
    line-height: 1.5;
    flex-grow: 1;
}

.kv-btn-outline {
    display: block;
    width: 100%;
    padding: 12px;
    text-align: center;
    border: 2px solid var(--kv-blue);
    color: var(--kv-blue);
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
}

.kv-btn-outline:hover {
    background: var(--kv-blue);
    color: #fff;
    text-decoration: none;
}

/* 6. Evrak Listesi */
.kv-docs-section {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 0 0 1px #e2e8f0;
    padding: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.kv-docs-list {
    flex: 2;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.kv-doc-item {
    display: flex;
    align-items: start;
    gap: 15px;
}

.kv-doc-item i {
    color: var(--kv-gold);
    font-size: 1.2rem;
    margin-top: 3px;
}

.kv-cta-box {
    flex: 1;
    background: var(--kv-bg-light);
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    border: 1px dashed #cbd5e1;
    min-width: 250px;
}

.kv-btn-primary {
    display: inline-block;
    background: var(--kv-blue);
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 15px -3px rgba(14, 165, 233, 0.3);
    transition: 0.3s;
}

.kv-btn-primary:hover {
    background: #0284c7;
    color: #fff;
    transform: translateY(-2px);
}

/* Mobil Düzenlemeler */
@media (max-width: 768px) {
    .kv-hero h1 {
        font-size: 2rem;
    }

    .kv-steps-container {
        flex-direction: column;
    }

    .kv-docs-section {
        flex-direction: column;
        padding: 20px;
    }
}

/* ============================================================
   BİLET SORGULA & GÖRÜNTÜLEME (Ticket Search Style)
   Prefix: .ts-
   ============================================================ */

/* Bilet Sorgula: sayfa genelinde taşmayı önle */
.ts-page-wrap .ts-search-wrapper,
.ts-page-wrap .ts-ticket-container,
.ts-page-wrap .ts-form-input,
.ts-page-wrap .ts-ticket-body,
.ts-page-wrap .ts-ticket-header {
    box-sizing: border-box;
}

/* Arama Kutusu Tasarımı */
.ts-search-wrapper {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 40px;
    max-width: 600px;
    margin: -50px auto 50px;
    /* Hero'nun üzerine hafif biner */
    position: relative;
    z-index: 10;
    border-top: 5px solid var(--kv-blue, #0ea5e9);
}

.ts-form-group {
    margin-bottom: 20px;
}

.ts-form-label {
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    display: block;
}

.ts-form-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    transition: 0.3s;
    font-size: 1rem;
}

.ts-form-input:focus {
    border-color: var(--kv-blue, #0ea5e9);
    outline: none;
}

.ts-btn-search {
    width: 100%;
    padding: 14px;
    background: var(--kv-dark, #0f172a);
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 1.1rem;
}

.ts-btn-search:hover {
    background: #1e293b;
    transform: translateY(-2px);
}

/* Bilet (Ticket) Tasarımı */
.ts-ticket-container {
    max-width: 800px;
    margin: 0 auto 50px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

/* Bilet Header */
.ts-ticket-header {
    background: var(--kv-dark, #0f172a);
    color: #fff;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ts-brand h3 {
    margin: 0;
    color: #fff;
    font-weight: 800;
    letter-spacing: 1px;
}

.ts-pnr-box {
    text-align: right;
}

.ts-pnr-label {
    font-size: 0.75rem;
    opacity: 0.8;
    text-transform: uppercase;
    display: block;
}

.ts-pnr-code {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--kv-gold, #fbbf24);
    letter-spacing: 2px;
}

/* Bilet Body */
.ts-ticket-body {
    padding: 30px;
}

.ts-route-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dashed #e2e8f0;
    padding-bottom: 25px;
    margin-bottom: 25px;
}

.ts-city {
    font-size: 1.5rem;
    font-weight: 800;
    color: #334155;
}

.ts-port {
    font-size: 0.9rem;
    color: #64748b;
}

.ts-direction-icon {
    color: var(--kv-blue, #0ea5e9);
    font-size: 1.5rem;
}

.ts-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.ts-info-item label {
    font-size: 0.8rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 600;
    display: block;
}

.ts-info-item span {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

/* Yolcu Listesi */
.ts-passenger-list {
    background: #f8fafc;
    border-radius: 8px;
    padding: 20px;
}

.ts-passenger-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 0;
}

.ts-passenger-item:last-child {
    border-bottom: none;
}

.ts-pass-name {
    font-weight: 600;
    color: #334155;
}

.ts-pass-type {
    font-size: 0.85rem;
    color: #64748b;
    background: #e2e8f0;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Yazdırma Butonu */
.ts-action-area {
    padding: 20px 30px;
    background: #f1f5f9;
    text-align: center;
    border-top: 1px solid #e2e8f0;
}

.ts-btn-print {
    background: #fff;
    border: 2px solid #334155;
    color: #334155;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.ts-btn-print:hover {
    background: #334155;
    color: #fff;
}

/* YAZDIRMA AYARLARI (Media Print) */
@media print {
    body * {
        visibility: hidden;
    }

    /* Her şeyi gizle */
    .ts-ticket-container,
    .ts-ticket-container * {
        visibility: visible;
    }

    /* Sadece bileti göster */
    .ts-ticket-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        box-shadow: none;
        border: 2px solid #000;
    }

    .ts-action-area {
        display: none;
    }

    /* Yazdır butonunu kağıtta gösterme */
    header,
    footer,
    .kv-hero,
    .ts-search-wrapper {
        display: none !important;
    }
}

/* Bilet Sorgula: İptal butonu ve aksiyon alanı */
.ts-action-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.ts-cancel-form {
    display: inline-block;
}

.ts-btn-cancel {
    background: #fff;
    border: 2px solid #e74c3c;
    color: #e74c3c;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    font-size: 0.95rem;
}

.ts-btn-cancel:hover {
    background: #e74c3c;
    color: #fff;
}

.ts-cancel-disabled {
    width: 100%;
    text-align: center;
}


/* ============================================================
   BİLET SORGULA SAYFASI – Sadece body.page-bilet-sorgula. PC + mobil düzen.
   Başka sayfaya dokunmaz.
   ============================================================ */
body.page-bilet-sorgula .container.container--ts.ts-page-wrap {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

body.page-bilet-sorgula .kv-hero.ts-hero {
    padding: 60px 24px 50px;
    min-height: 200px;
    box-sizing: border-box;
}

body.page-bilet-sorgula .kv-hero.ts-hero .container--ts {
    max-width: 880px;
    margin: 0 auto;
}

body.page-bilet-sorgula .ts-search-wrapper {
    max-width: 100%;
    width: 100%;
    margin-top: 0;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    padding: 32px 28px;
    box-sizing: border-box;
}

body.page-bilet-sorgula .ts-ticket-container {
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    box-sizing: border-box;
}

body.page-bilet-sorgula .ts-form-input,
body.page-bilet-sorgula .ts-ticket-body,
body.page-bilet-sorgula .ts-ticket-header {
    box-sizing: border-box;
}

body.page-bilet-sorgula .ts-ticket-header {
    flex-wrap: wrap;
    gap: 12px;
}

body.page-bilet-sorgula .ts-action-buttons {
    flex-wrap: wrap;
    gap: 10px;
}

/* Mobil */
@media (max-width: 768px) {
    body.page-bilet-sorgula .container.container--ts.ts-page-wrap {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.page-bilet-sorgula .kv-hero.ts-hero {
        padding: 40px 16px 36px;
        min-height: 160px;
    }

    body.page-bilet-sorgula .kv-hero.ts-hero h1 {
        font-size: 1.35rem;
    }

    body.page-bilet-sorgula .kv-hero.ts-hero p {
        font-size: 0.9rem;
    }

    body.page-bilet-sorgula .ts-search-wrapper {
        padding: 24px 20px;
        margin-bottom: 32px;
    }

    body.page-bilet-sorgula .ts-ticket-container {
        margin-bottom: 32px;
        border-radius: 12px;
    }

    body.page-bilet-sorgula .ts-ticket-header {
        padding: 18px 16px;
    }

    body.page-bilet-sorgula .ts-brand h3 {
        font-size: 0.95rem;
    }

    body.page-bilet-sorgula .ts-pnr-code {
        font-size: 1.2rem;
    }

    body.page-bilet-sorgula .ts-ticket-body {
        padding: 20px 16px;
    }

    body.page-bilet-sorgula .ts-route-row {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding-bottom: 18px;
        margin-bottom: 18px;
    }

    body.page-bilet-sorgula .ts-city {
        font-size: 1.15rem;
    }

    body.page-bilet-sorgula .ts-info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }

    body.page-bilet-sorgula .ts-passenger-list {
        padding: 16px;
    }

    body.page-bilet-sorgula .ts-passenger-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    body.page-bilet-sorgula .ts-action-area {
        padding: 16px;
    }

    body.page-bilet-sorgula .ts-action-buttons {
        flex-direction: column;
    }

    body.page-bilet-sorgula .ts-btn-print,
    body.page-bilet-sorgula .ts-btn-cancel {
        width: 100%;
        max-width: none;
    }

    body.page-bilet-sorgula .ts-cancel-form {
        width: 100%;
    }

    body.page-bilet-sorgula .ts-status-box {
        flex-direction: column;
        text-align: center;
        padding: 14px 16px;
    }
}

@media (max-width: 480px) {
    body.page-bilet-sorgula .container.container--ts.ts-page-wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    body.page-bilet-sorgula .kv-hero.ts-hero {
        padding: 32px 12px 28px;
        min-height: 140px;
    }

    body.page-bilet-sorgula .kv-hero.ts-hero h1 {
        font-size: 1.2rem;
    }

    body.page-bilet-sorgula .ts-search-wrapper {
        padding: 20px 16px;
    }

    body.page-bilet-sorgula .ts-ticket-header {
        padding: 14px 12px;
    }

    body.page-bilet-sorgula .ts-ticket-body {
        padding: 16px 12px;
    }
}

/* ============================================================
   SSS / YARDIM MERKEZİ SAYFASI (Premium Style)
   Prefix: .faq-pro-
   ============================================================ */

/* Genel Sayfa Yapısı */
.faq-page-wrapper {
    background-color: #f8fafc;
    min-height: 80vh;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* 1. Hero (Kapak) Alanı */
.faq-pro-hero {
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    /* Koyu Lacivert Tonları */
    padding: 100px 0 120px;
    /* Alt boşluk arama kutusu için geniş tutuldu */
    text-align: center;
    color: #fff;
    position: relative;
    margin-bottom: 0;
}

.faq-pro-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.faq-pro-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* 2. Arama Kutusu (Yüzen Tasarım) */
.faq-search-container {
    margin-top: -40px;
    position: relative;
    z-index: 10;
    padding-bottom: 60px;
}

.faq-search-box {
    background: #fff;
    padding: 10px 15px;
    border-radius: 50px;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    max-width: 700px;
    margin: 0 auto;
    border: 1px solid #e2e8f0;
}

.faq-search-icon {
    width: 45px;
    height: 45px;
    background: #eff6ff;
    color: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-right: 15px;
    flex-shrink: 0;
}

.faq-input {
    flex: 1;
    border: none;
    font-size: 1.1rem;
    padding: 10px;
    outline: none;
    color: #334155;
    background: transparent;
}

.faq-input::placeholder {
    color: #94a3b8;
}

/* 3. Soru Listesi */
.faq-pro-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-pro-item {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    border: 1px solid #f1f5f9;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-pro-item:hover {
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    border-color: #cbd5e1;
}

.faq-pro-question {
    padding: 25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1.05rem;
    color: #1e293b;
    transition: color 0.2s;
}

.faq-pro-question:hover {
    color: #2563eb;
}

.faq-toggle-icon {
    width: 32px;
    height: 32px;
    background: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.faq-pro-item.active .faq-toggle-icon {
    transform: rotate(180deg);
    background: #2563eb;
    color: #fff;
}

.faq-pro-item.active .faq-pro-question {
    color: #2563eb;
    background-color: #eff6ff;
}

.faq-pro-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: #fff;
}

.faq-pro-answer-inner {
    padding: 0 25px 25px;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.7;
    border-top: 1px solid transparent;
}

.faq-pro-item.active .faq-pro-answer-inner {
    border-top-color: #f1f5f9;
    padding-top: 20px;
}

/* Cevap içindeki liste ve paragraflar için düzenleme */
.faq-pro-answer-inner p {
    margin-bottom: 15px;
}

.faq-pro-answer-inner ul {
    padding-left: 20px;
    margin-bottom: 15px;
}

.faq-pro-answer-inner li {
    margin-bottom: 5px;
}

/* 4. Alt Bilgi / İletişim */
.faq-contact-box {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    max-width: 600px;
    margin: 60px auto 80px;
}

.faq-contact-icon {
    font-size: 3rem;
    color: #2563eb;
    margin-bottom: 20px;
    display: inline-block;
}

.faq-contact-btn {
    display: inline-flex;
    align-items: center;
    background: #0f172a;
    color: #fff;
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.3);
}

.faq-contact-btn:hover {
    background: #1e293b;
    transform: translateY(-3px);
    color: #fff;
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .faq-pro-title {
        font-size: 2rem;
    }

    .faq-search-container {
        padding: 0 20px 40px;
        margin-top: -30px;
    }

    .faq-pro-list {
        padding: 0 20px;
    }

    .faq-contact-box {
        margin: 40px 20px;
        padding: 30px 20px;
    }
}