/**
 * Çetin Garaj 06 - Bellona Esintili Modern & Lüks Tema Stilleri
 * Tam Duyarlı (Responsive), Koyu / Açık Mod (Dark / Light Mode) Destekli
 */

:root {
    --primary: #e63946;
    --primary-hover: #d62828;
    --secondary: #1d3557;
    --bg-body: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-2: #f1f5f9;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --card-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.12);
    --topbar-bg: #0f172a;
    --header-bg: #ffffff;
    --font-heading: 'Plus Jakarta Sans', sans-serif;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg-body: #0b0f19;
    --bg-surface: #131b2e;
    --bg-surface-2: #1e293b;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-color: #1e293b;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --card-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.6);
    --topbar-bg: #070a10;
    --header-bg: #131b2e;
}

/* Koyu Mod (Dark Theme) Genel Metin ve Kontrast Düzeltmeleri */
[data-theme="dark"] .text-dark {
    color: #f8fafc !important;
}
[data-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}
[data-theme="dark"] .bg-light {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .bg-white {
    background-color: #131b2e !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .bg-surface {
    background-color: #131b2e !important;
}
[data-theme="dark"] .bg-surface-2 {
    background-color: #0b1120 !important;
}
[data-theme="dark"] .card {
    background-color: #131b2e !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .breadcrumb-item.active {
    color: #f8fafc !important;
}
[data-theme="dark"] .breadcrumb-item a {
    color: #94a3b8 !important;
}
[data-theme="dark"] .form-check-label {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #131b2e !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}
[data-theme="dark"] .form-control::placeholder {
    color: #64748b !important;
}
[data-theme="dark"] .border {
    border-color: #1e293b !important;
}
[data-theme="dark"] .border-top {
    border-top-color: #1e293b !important;
}
[data-theme="dark"] .border-bottom {
    border-bottom-color: #1e293b !important;
}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #f8fafc !important;
}
[data-theme="dark"] .accordion-button {
    background-color: #131b2e !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #1e293b !important;
    color: var(--primary) !important;
}
[data-theme="dark"] .accordion-button::after {
    filter: invert(1);
}
[data-theme="dark"] .accordion-body {
    background-color: #131b2e !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .accordion-item {
    background-color: #131b2e !important;
    border-color: #1e293b !important;
}
[data-theme="dark"] .nav-pills .nav-link:not(.active) {
    background-color: #1e293b;
    color: #cbd5e1;
}
[data-theme="dark"] .nav-pills .nav-link:not(.active):hover {
    background-color: #334155;
    color: #ffffff;
}

/* Buton Kontrast Düzeltmeleri */
[data-theme="dark"] .btn-outline-dark {
    color: #f8fafc !important;
    border-color: #475569 !important;
    background-color: #1e293b !important;
}
[data-theme="dark"] .btn-outline-dark:hover {
    color: #ffffff !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
[data-theme="dark"] .btn-light,
[data-theme="dark"] .btn-light *,
.btn-light,
.btn-light * {
    color: #0f172a !important;
}
[data-theme="dark"] .btn-light {
    background-color: #f8fafc !important;
    border-color: #f8fafc !important;
}
[data-theme="dark"] .btn-light:hover {
    background-color: #e2e8f0 !important;
    border-color: #e2e8f0 !important;
    color: #000000 !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-heading);
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.topbar, 
.hero-slider-wrapper, 
section, 
footer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Global Tablo ve Metin Taşma Önleme (Mobil / Tablet / PC) */
table {
    table-layout: fixed;
    width: 100%;
    max-width: 100% !important;
}
td, th {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}
a {
    overflow-wrap: anywhere;
}

/* Header & Navigasyon Menüleri */
.main-header, 
.main-nav {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
@media (min-width: 992px) {
    .main-header, .main-nav {
        overflow: visible !important;
    }
}
@media (max-width: 991.98px) {
    .main-header, .main-nav {
        overflow-x: clip !important;
    }
}

.container, 
.container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 576px) { .container { max-width: 540px !important; } }
@media (min-width: 768px) { .container { max-width: 720px !important; } }
@media (min-width: 992px) { .container { max-width: 960px !important; } }
@media (min-width: 1200px) { .container { max-width: 1140px !important; } }
@media (min-width: 1400px) { .container { max-width: 1320px !important; } }

@media (max-width: 767.98px) {
    .container, .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Logo Boyutlandırma (Mobilde asla başlığı ve sağ butonları dışarı taşırmaz) */
.site-logo-header {
    max-height: 52px;
    max-width: 250px;
    width: auto;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}
@media (max-width: 767.98px) {
    .site-logo-header {
        max-height: 38px !important;
        max-width: 140px !important;
    }
}
@media (max-width: 420px) {
    .site-logo-header {
        max-height: 34px !important;
        max-width: 120px !important;
    }
}

/* Üst Bilgi Barı ve Hizmet Noktaları Açılır Menüsü */
.topbar {
    position: relative;
    z-index: 1040;
    background-color: var(--topbar-bg);
    color: #cbd5e1;
    font-size: 0.85rem;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 767.98px) {
    .topbar {
        font-size: 0.72rem !important;
        padding: 5px 0 !important;
    }
    .topbar .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
        gap: 2px !important;
    }
    .topbar span, .topbar a {
        font-size: 0.72rem !important;
    }
}
.topbar a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s;
}
.topbar a:hover {
    color: #fff;
}
.topbar .dropdown {
    position: relative;
    z-index: 1050;
}
.topbar .dropdown-menu {
    z-index: 1060 !important;
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
    border-radius: 10px;
    padding: 8px 0;
    min-width: 220px;
}
.topbar .dropdown-menu .dropdown-item {
    color: #f1f5f9 !important;
    padding: 8px 16px;
    font-size: 0.85rem;
    transition: background-color 0.2s;
}
.topbar .dropdown-menu .dropdown-item:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

/* Ana Header (Sticky) */
.main-header {
    background-color: var(--header-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 0;
    z-index: 1020;
    transition: all 0.3s ease;
}

/* Canlı Arama Çubuğu */
.header-search {
    position: relative;
    max-width: 480px;
    width: 100%;
}
.header-search input {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 30px;
    padding: 10px 20px 10px 45px;
    font-size: 0.92rem;
    transition: all 0.2s ease;
}
.header-search input:focus {
    background: var(--bg-surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.15);
}
.header-search .search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}
.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    margin-top: 8px;
    z-index: 1050;
    max-height: 380px;
    overflow-y: auto;
    display: none;
}

/* Mega Menü & Navigasyon */
.main-nav .nav-link {
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 14px 18px !important;
    transition: color 0.2s;
}
.main-nav .nav-link:hover, .main-nav .nav-link.active {
    color: var(--primary);
}
.dropdown-mega {
    position: static;
}
.dropdown-mega-menu {
    width: 100%;
    left: 0;
    right: 0;
    border: none;
    border-top: 2px solid var(--primary);
    border-radius: 0 0 16px 16px;
    background: var(--bg-surface);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
    padding: 24px;
    z-index: 1050 !important;
}

.main-nav .dropdown-menu {
    z-index: 1050 !important;
}

.main-nav .dropdown-menu:not(.dropdown-mega-menu) {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    border-radius: 12px;
    padding: 10px;
    min-width: 240px;
    z-index: 1050 !important;
}
.main-nav .dropdown-menu .dropdown-item {
    color: var(--text-main);
    font-weight: 500;
    border-radius: 8px;
    padding: 8px 14px;
    transition: all 0.2s;
}
.main-nav .dropdown-menu .dropdown-item:hover {
    background-color: var(--bg-surface-2);
    color: var(--primary);
}
[data-theme="dark"] .main-nav .dropdown-menu:not(.dropdown-mega-menu) {
    background: #1e293b !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .main-nav .dropdown-menu .dropdown-item {
    color: #f8fafc !important;
}
[data-theme="dark"] .main-nav .dropdown-menu .dropdown-item:hover {
    background-color: #334155 !important;
    color: var(--primary) !important;
}

/* Hero Slider & 20 Efekt Motoru (Görsel Önünde Yazı, Sağ/Sol Oklar & Her Ekrana Uyumlu) */
.hero-slider-wrapper {
    position: relative;
    overflow: hidden;
    background: #07090e;
    height: 520px;
    min-height: 500px;
    width: 100%;
}
.slider-slide {
    display: none;
    height: 100%;
    min-height: 500px;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.slider-slide.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Katman 1: Ambiyans Arka Plan (Kenarlardaki boşlukları yumuşak bir ışıkla doldurur, asla siyah bar bırakmaz) */
.slider-ambient-bg {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(32px) brightness(0.35);
    transform: scale(1.08);
    pointer-events: none;
    z-index: 1;
}

/* Katman 2: Ana Görsel Sarıcı (800x600, 1920x1080 vb. TÜM çözünürlükleri kırpmadan %100 gösterir) */
.slider-main-visual-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    overflow: hidden;
}
.slider-main-img {
    filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.6));
    transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
}
.slider-main-img.fit-cover {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
}
.slider-main-img.fit-contain {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}
.slider-slide.active .slider-main-img {
    transform: scale(1.02);
}

/* Tıklanabilir Afiş / Banner Bağlantısı (Tam Ekran Tıklama) */
.slider-full-click-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    display: block;
    cursor: pointer;
    text-decoration: none;
}
.slider-full-click-link-mobile {
    display: none;
    text-decoration: none;
}
@media (max-width: 767.98px) {
    .slider-smart-mobile-hide {
        display: none !important;
    }
    .slider-full-click-link-mobile {
        display: block !important;
        position: absolute;
        inset: 0;
        z-index: 6;
        cursor: pointer;
    }
}
@media (min-width: 768px) {
    .slider-full-click-link-mobile {
        display: none !important;
    }
}

/* Alt Şerit (Sinematik Altyazı Modu - Görselin En Altında Şeffaf Çubuk) */
.slider-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 8;
    background: linear-gradient(180deg, transparent 0%, rgba(9, 13, 22, 0.85) 45%, rgba(9, 13, 22, 0.98) 100%);
    padding: 24px 24px 22px;
}

/* Katman 3: Şık Buzlu Cam Hero Kartı (Yalnızca başlık girildiğinde görünür, afişleri kirletmez) */
.slider-hero-card {
    position: relative;
    z-index: 8;
    background: rgba(11, 15, 25, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    padding: 30px 36px;
    max-width: 780px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    text-align: center;
    margin: 0 auto;
}

/* Slayt Yazı & Kart Katmanı (Masaüstünde Tüm Ekranı Kaplar, Mobilde Gizlenir) */
.slider-smart-mobile-hide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

.slider-content-banner {
    position: relative !important;
    z-index: 8 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    padding: 20px !important;
}

.slider-hero-card {
    pointer-events: auto !important;
    transition: all 0.3s ease !important;
}

/* PC & Geniş Ekran Yazı Konumlandırma Kuralları (Afiş ve Logoları Korumak İçin) */
@media (min-width: 768px) {
    /* 1. SOL KENAR (Afişteki araba ve logoları %100 açık bırakır) */
    .slider-content-banner.pos-left {
        justify-content: flex-start !important;
        align-items: center !important;
        padding-left: clamp(24px, 5vw, 80px) !important;
        padding-right: 20px !important;
        margin: 0 !important;
    }
    .slider-content-banner.pos-left .slider-hero-card {
        margin-left: 0 !important;
        margin-right: auto !important;
        text-align: left !important;
        max-width: 440px !important;
        width: 100% !important;
        padding: 24px 28px !important;
        background: rgba(11, 15, 25, 0.90) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border-radius: 16px !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
    }

    /* 2. SAĞ KENAR */
    .slider-content-banner.pos-right {
        justify-content: flex-end !important;
        align-items: center !important;
        padding-right: clamp(24px, 5vw, 80px) !important;
        padding-left: 20px !important;
        margin: 0 !important;
    }
    .slider-content-banner.pos-right .slider-hero-card {
        margin-right: 0 !important;
        margin-left: auto !important;
        text-align: left !important;
        max-width: 440px !important;
        width: 100% !important;
        padding: 24px 28px !important;
        background: rgba(11, 15, 25, 0.90) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border-radius: 16px !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
    }

    /* 3. ALTA YASLA (Sinematik Alt Şerit) */
    .slider-content-banner.pos-bottom {
        justify-content: center !important;
        align-items: flex-end !important;
        padding-bottom: 25px !important;
        margin: 0 !important;
    }
    .slider-content-banner.pos-bottom .slider-hero-card {
        margin: 0 auto !important;
        max-width: 860px !important;
        width: 90% !important;
        padding: 14px 24px !important;
        border-radius: 14px !important;
        background: rgba(11, 15, 25, 0.88) !important;
    }

    /* 4. ORTAYA YASLA (Klasik Merkez Kart) */
    .slider-content-banner.pos-center {
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
    }
    .slider-content-banner.pos-center .slider-hero-card {
        margin: 0 auto !important;
        text-align: center !important;
        max-width: 780px !important;
    }
}
.slider-overlay-scrim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(11, 15, 25, 0.40) 0%, rgba(11, 15, 25, 0.65) 100%) !important;
    z-index: 3;
    pointer-events: none;
}
.slider-content-banner {
    position: relative;
    z-index: 8;
    width: 100%;
    padding: 20px 15px;
}
.slider-title {
    font-size: clamp(1.4rem, 3.2vw, 2.6rem);
    letter-spacing: -0.5px;
}
.slider-subtitle {
    font-size: clamp(0.9rem, 1.4vw, 1.15rem);
    max-width: 640px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Sağa ve Sola Kaydırma Okları (Hero Slider Arrows) */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    cursor: pointer;
    z-index: 25;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
.slider-arrow:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    transform: translateY(-50%) scale(1.12);
}
.slider-arrow-prev {
    left: 20px;
}
.slider-arrow-next {
    right: 20px;
}
@media (max-width: 767.98px) {
    .slider-arrow {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    .slider-arrow-prev { left: 8px; }
    .slider-arrow-next { right: 8px; }
}

/* Dots / İndikatör Noktaları */
.slider-dots-container {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 25;
}
.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.slider-dot:hover {
    background: rgba(255, 255, 255, 0.8);
}
.slider-dot.active {
    width: 28px;
    border-radius: 8px;
    background: var(--primary);
}

@media (max-width: 991.98px) {
    .hero-slider-wrapper {
        height: 440px;
        min-height: 400px;
    }
    .slider-slide {
        min-height: 400px;
    }
    .slider-hero-card {
        padding: 24px 24px;
        max-width: 90%;
    }
}
@media (max-width: 767.98px) {
    .hero-slider-wrapper {
        height: 330px;
        min-height: 280px;
    }
    .slider-slide {
        min-height: 280px;
    }
    .slider-hero-card {
        padding: 16px 14px;
        border-radius: 14px;
        max-width: 94%;
    }
    .slider-title {
        font-size: 1.2rem;
        margin-bottom: 0.35rem !important;
    }
    .slider-subtitle {
        font-size: 0.85rem;
        margin-bottom: 0.6rem !important;
    }
    .slider-cta-btn, .slider-wa-btn {
        padding: 8px 14px !important;
        font-size: 0.82rem !important;
    }
}
@media (max-width: 420px) {
    .hero-slider-wrapper {
        height: 280px;
        min-height: 250px;
    }
    .slider-slide {
        min-height: 250px;
    }
}

/* 35 Adet CSS3 Donanım Hızlandırmalı Lüks Geçiş Animasyonları */
.effect-fade { animation: animFade 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.effect-slideLeft { animation: animSlideLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.effect-slideRight { animation: animSlideRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.effect-slideUp { animation: animSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.effect-slideDown { animation: animSlideDown 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.effect-zoomIn { animation: animZoomIn 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.effect-zoomOut { animation: animZoomOut 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.effect-kenBurns { animation: animKenBurns 12s linear infinite alternate; }
.effect-flipHorizontal { animation: animFlipH 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.effect-flipVertical { animation: animFlipV 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.effect-rotateIn { animation: animRotateIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.effect-curtain { animation: animCurtain 1s ease-in-out forwards; }
.effect-shutter { animation: animShutter 0.8s ease forwards; }
.effect-blurFade { animation: animBlurFade 0.9s ease forwards; }
.effect-bounceIn { animation: animBounceIn 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; }
.effect-cube3d { animation: animCube3d 0.9s ease-in-out forwards; }
.effect-flash { animation: animFlash 0.7s ease forwards; }
.effect-pulse { animation: animPulse 0.8s ease-in-out forwards; }
.effect-swing { animation: animSwing 1s ease-in-out forwards; }
.effect-scaleDown { animation: animScaleDown 0.8s ease forwards; }

/* Yeni 15 Lüks Efekt */
.effect-flipDiagonal { animation: animFlipDiag 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.effect-doorOpen { animation: animDoorOpen 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards; transform-origin: left center; }
.effect-origami { animation: animOrigami 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.effect-kenBurnsPanRight { animation: animKenBurnsPR 10s ease-in-out infinite alternate; }
.effect-kenBurnsPanLeft { animation: animKenBurnsPL 10s ease-in-out infinite alternate; }
.effect-lensFocus { animation: animLensFocus 0.9s ease-out forwards; }
.effect-rubberBand { animation: animRubberBand 0.9s ease-in-out forwards; }
.effect-jello { animation: animJello 0.9s ease forwards; }
.effect-whirlwind { animation: animWhirlwind 0.95s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
.effect-glitch { animation: animGlitch 0.75s ease-out forwards; }
.effect-circleReveal { animation: animCircleReveal 0.95s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.effect-diagonalWipe { animation: animDiagonalWipe 0.85s ease-in-out forwards; }
.effect-diamondMask { animation: animDiamondMask 0.95s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.effect-splitHorizontal { animation: animSplitH 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.effect-smoothSlideZoom { animation: animSlideZoom 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

@keyframes animFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes animSlideLeft { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes animSlideRight { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes animSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes animSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes animZoomIn { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes animZoomOut { from { transform: scale(1.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes animKenBurns { from { transform: scale(1); } to { transform: scale(1.15) translate(-10px, -10px); } }
@keyframes animFlipH { from { transform: perspective(800px) rotateY(90deg); opacity: 0; } to { transform: perspective(800px) rotateY(0); opacity: 1; } }
@keyframes animFlipV { from { transform: perspective(800px) rotateX(90deg); opacity: 0; } to { transform: perspective(800px) rotateX(0); opacity: 1; } }
@keyframes animRotateIn { from { transform: rotate(-15deg) scale(0.8); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }
@keyframes animCurtain { from { clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes animShutter { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes animBlurFade { from { filter: blur(20px); opacity: 0; } to { filter: blur(0); opacity: 1; } }
@keyframes animBounceIn { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes animCube3d { from { transform: perspective(1000px) rotateY(-45deg); opacity: 0; } to { transform: perspective(1000px) rotateY(0); opacity: 1; } }
@keyframes animFlash { 0%, 100% { opacity: 1; } 50% { opacity: 0.1; } }
@keyframes animPulse { from { transform: scale(0.95); } 50% { transform: scale(1.03); } to { transform: scale(1); } }
@keyframes animSwing { 20% { transform: rotate(10deg); } 40% { transform: rotate(-8deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
@keyframes animScaleDown { from { transform: scale(1.1); } to { transform: scale(1); } }

/* Yeni Keyframeler */
@keyframes animFlipDiag { from { transform: perspective(900px) rotate3d(1, 1, 0, 90deg); opacity: 0; } to { transform: perspective(900px) rotate3d(1, 1, 0, 0deg); opacity: 1; } }
@keyframes animDoorOpen { from { transform: perspective(1200px) rotateY(-90deg); opacity: 0; } to { transform: perspective(1200px) rotateY(0deg); opacity: 1; } }
@keyframes animOrigami { from { transform: perspective(800px) rotateX(-90deg) scale(0.6); opacity: 0; } to { transform: perspective(800px) rotateX(0) scale(1); opacity: 1; } }
@keyframes animKenBurnsPR { from { transform: scale(1.05) translateX(-3%); } to { transform: scale(1.18) translateX(3%); } }
@keyframes animKenBurnsPL { from { transform: scale(1.05) translateX(3%); } to { transform: scale(1.18) translateX(-3%); } }
@keyframes animLensFocus { 0% { filter: blur(15px) brightness(1.8); transform: scale(1.15); opacity: 0; } 60% { filter: blur(4px) brightness(1.2); } 100% { filter: blur(0) brightness(1); transform: scale(1); opacity: 1; } }
@keyframes animRubberBand { 0% { transform: scale3d(0.7, 0.7, 1); opacity: 0; } 30% { transform: scale3d(1.15, 0.85, 1); opacity: 1; } 40% { transform: scale3d(0.88, 1.12, 1); } 50% { transform: scale3d(1.08, 0.92, 1); } 65% { transform: scale3d(0.96, 1.04, 1); } 75% { transform: scale3d(1.03, 0.97, 1); } 100% { transform: scale3d(1, 1, 1); opacity: 1; } }
@keyframes animJello { 0% { transform: scale(0.8); opacity: 0; } 20% { transform: scale(1) skewX(-8deg) skewY(-8deg); opacity: 1; } 40% { transform: skewX(6deg) skewY(6deg); } 60% { transform: skewX(-4deg) skewY(-4deg); } 80% { transform: skewX(2deg) skewY(2deg); } 100% { transform: skew(0); opacity: 1; } }
@keyframes animWhirlwind { from { transform: rotate(180deg) scale(0.2); opacity: 0; } to { transform: rotate(0deg) scale(1); opacity: 1; } }
@keyframes animGlitch { 0% { transform: translate(-8px, 4px) skewX(5deg); filter: contrast(1.5) hue-rotate(90deg); opacity: 0; } 25% { transform: translate(6px, -3px) skewX(-4deg); filter: contrast(1.2) hue-rotate(-60deg); opacity: 0.8; } 50% { transform: translate(-3px, 1px); filter: contrast(1.1); opacity: 1; } 75% { transform: translate(2px, -1px); } 100% { transform: translate(0) skew(0); filter: none; opacity: 1; } }
@keyframes animCircleReveal { from { clip-path: circle(0% at 50% 50%); opacity: 0; } to { clip-path: circle(120% at 50% 50%); opacity: 1; } }
@keyframes animDiagonalWipe { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity: 0; } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; } }
@keyframes animDiamondMask { from { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); opacity: 0; } to { clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%); opacity: 1; } }
@keyframes animSplitH { from { clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%); opacity: 0; } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; } }
@keyframes animSlideZoom { from { transform: translateX(40px) scale(0.92); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }

/* Araç Seçici Widget (Hero Selector) */
.hero-finder-card {
    background: var(--bg-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    border: 1px solid var(--border-color);
    position: relative;
    z-index: 10;
    margin-top: 24px;
}
@media (max-width: 767.98px) {
    .hero-finder-card {
        margin-top: 16px;
        padding: 16px 14px;
    }
}

/* Hızlı Marka Vitrini Daireleri (Bellona Tarzı) */
.brand-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-main);
    transition: transform 0.2s ease;
}
.brand-circle-item:hover {
    transform: translateY(-5px);
    color: var(--primary);
}
.brand-circle-img {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-shadow: var(--card-shadow);
    transition: all 0.2s ease;
}
.brand-circle-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.25s ease;
}
.brand-circle-item:hover .brand-circle-img {
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(230, 57, 70, 0.2);
}
.brand-circle-item:hover .brand-circle-img img {
    transform: scale(1.1);
}

/* Bellona Tarzı Ürün / Araç Vitrin Kartları */
.vehicle-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--card-shadow);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.vehicle-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--card-shadow-hover);
    border-color: rgba(230, 57, 70, 0.3);
}
.vehicle-card-img-wrap {
    position: relative;
    overflow: hidden;
    padding-top: 60%;
    background: var(--bg-surface-2);
}
.vehicle-card-img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.vehicle-card:hover .vehicle-card-img-wrap img {
    transform: scale(1.08);
}
.vehicle-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--primary);
    color: #fff;
    padding: 4px 10px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(230, 57, 70, 0.4);
}
.vehicle-card-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.vehicle-card-brand {
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.vehicle-card-title {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 10px;
    line-height: 1.35;
}
.vehicle-card-title a {
    color: inherit;
    text-decoration: none;
}
.vehicle-card-title a:hover {
    color: var(--primary);
}
.vehicle-card-features {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    flex-grow: 1;
}
.vehicle-card-features ul {
    padding-left: 16px;
    margin-bottom: 0;
}
.vehicle-card-features li {
    margin-bottom: 4px;
}

/* İnteraktif Önce / Sonra (Before & After) Bileşeni */
.before-after-container {
    position: relative;
    width: 100%;
    height: 380px;
    border-radius: 16px;
    overflow: hidden;
    user-select: none;
    box-shadow: var(--card-shadow);
}
.before-after-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.before-after-after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    width: 50%;
}
.before-after-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: #ffffff;
    cursor: ew-resize;
    z-index: 10;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.before-after-handle-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background: #ffffff;
    border: 3px solid var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Kayan Akıllı WhatsApp Butonu */
.floating-whatsapp {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: #25d366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.45);
    z-index: 1040;
    text-decoration: none;
    transition: all 0.3s ease;
}
.floating-whatsapp:hover {
    background: #20ba5a;
    color: white;
    transform: scale(1.1);
}
.floating-whatsapp-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #25d366;
    opacity: 0.6;
    animation: waPulse 2s infinite;
    z-index: -1;
}
@keyframes waPulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Footer (Yüksek Kontrast & Kristal Netliğinde Okunabilirlik) */
.main-footer {
    background: #0b1120;
    color: #cbd5e1;
    padding: 70px 0 30px;
    font-size: 0.92rem;
}
.main-footer h6 {
    color: #ffffff !important;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.95rem;
}
.main-footer,
.main-footer p,
.main-footer span,
.main-footer .text-muted,
.main-footer .small {
    color: #cbd5e1 !important;
}
.main-footer a {
    color: #cbd5e1 !important;
    text-decoration: none;
    transition: color 0.2s;
}
.main-footer a:hover {
    color: #ffffff !important;
}
.main-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 25px;
    margin-top: 50px;
    font-size: 0.85rem;
    color: #94a3b8 !important;
}

/* Zengin Araç & Sayfa Detay Gövdesi (Word Editörü & Medya İçerikleri) */
.vehicle-content-rich {
    color: var(--text-main);
    font-size: 1rem;
    line-height: 1.8;
}
.vehicle-content-rich::after {
    content: "";
    display: table;
    clear: both;
}
.vehicle-content-rich h1,
.vehicle-content-rich h2,
.vehicle-content-rich h3,
.vehicle-content-rich h4,
.vehicle-content-rich h5,
.vehicle-content-rich h6 {
    color: var(--text-main);
    font-weight: 700;
    margin-top: 1.6rem;
    margin-bottom: 0.8rem;
    line-height: 1.4;
}
.vehicle-content-rich p {
    margin-bottom: 1rem;
}
.vehicle-content-rich ul,
.vehicle-content-rich ol {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}
.vehicle-content-rich li {
    margin-bottom: 0.6rem;
}
.vehicle-content-rich a {
    color: #2563eb;
    text-decoration: underline;
}
.vehicle-content-rich a:hover {
    color: var(--primary);
}
.vehicle-content-rich blockquote {
    border-left: 4px solid var(--primary);
    background: var(--bg-surface-2);
    padding: 14px 20px;
    border-radius: 0 10px 10px 0;
    margin: 1.25rem 0;
}
.vehicle-content-rich table {
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
}
.vehicle-content-rich th,
.vehicle-content-rich td {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
}
.vehicle-content-rich img {
    max-width: 100%;
    height: auto !important;
    border-radius: 10px;
    margin: 1rem 0;
}
@media (max-width: 767.98px) {
    .vehicle-content-rich img[style*="float"],
    .vehicle-content-rich .cetin-yt-block[style*="float"],
    .vehicle-content-rich table[style*="float"] {
        float: none !important;
        width: 100% !important;
        margin: 14px 0 !important;
        display: block !important;
    }
}
[data-theme="dark"] .vehicle-content-rich,
[data-theme="dark"] .vehicle-content-rich p:not([style*="color"]),
[data-theme="dark"] .vehicle-content-rich li:not([style*="color"]) {
    color: #e2e8f0;
}
[data-theme="dark"] .vehicle-content-rich h1:not([style*="color"]),
[data-theme="dark"] .vehicle-content-rich h2:not([style*="color"]),
[data-theme="dark"] .vehicle-content-rich h3:not([style*="color"]),
[data-theme="dark"] .vehicle-content-rich h4:not([style*="color"]) {
    color: #f8fafc;
}
[data-theme="dark"] .vehicle-content-rich td:not([style*="background"]) {
    border-color: #334155 !important;
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* ==========================================================================
   HARİTA & İFRAME DUYARLILIK (PC'DE TAM DOLDURMA, MOBİLDE TAŞMAYI ENGELLEME)
   ========================================================================== */

/* Genel iframe Taşma Engeli */
iframe {
    max-width: 100% !important;
}

/* İletişim Sayfası Harita Kartı & Sarmalayıcı */
.contact-map-card {
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
}

.contact-map-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

/* PC ve Geniş Ekranlarda: Harita Kapsayıcıyı ve Kartı %100 Tam Doldurur */
.contact-map-wrapper iframe {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 500px !important;
    min-height: 500px !important;
    border: 0 !important;
    display: block;
}

/* Tablet ve Mobilde: Tam Oturur, Asla Sağa Taşma Yapmaz */
@media (max-width: 991.98px) {
    .contact-map-wrapper iframe {
        height: 340px !important;
        min-height: 340px !important;
    }
}

/* Footer İçindeki Harita */
.footer-map-container {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}

.footer-map-container iframe {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 160px !important;
    min-height: 160px !important;
    border: 0 !important;
    display: block;
}

/* Mobil Başlık & Ekran Düzeni Taşma Koruması */
@media (max-width: 575.98px) {
    .main-header .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .site-logo-header {
        max-height: 40px !important;
        max-width: 150px !important;
    }

    .topbar {
        font-size: 0.76rem;
    }

    .floating-whatsapp {
        bottom: 20px;
        right: 20px;
        width: 52px;
        height: 52px;
        font-size: 28px;
    }
}

/* Mobil ve Tablet Slider Taşma Koruması & Tipografi */
@media (max-width: 991.98px) {
    .slider-title {
        font-size: 2rem !important;
    }
    .slider-subtitle {
        font-size: 0.98rem !important;
    }
}

@media (max-width: 767.98px) {
    .hero-slider-wrapper,
    .slider-slide {
        min-height: 420px !important;
        height: auto !important;
    }
    .slider-content-banner {
        padding: 45px 12px 55px 12px !important;
    }
    .slider-title {
        font-size: 1.45rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.65rem !important;
    }
    .slider-subtitle {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1rem !important;
    }
    .slider-anim-badge {
        font-size: 0.72rem !important;
        padding: 4px 10px !important;
        margin-bottom: 0.75rem !important;
    }
    .slider-cta-btn,
    .slider-wa-btn {
        padding: 9px 18px !important;
        font-size: 0.86rem !important;
    }
    .slider-arrow {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.1rem !important;
    }
}

/* ==============================================================
   ARAÇ DETAY ETKİLEŞİMLİ FOTOĞRAF GALERİSİ & BÜYÜTEÇ (ZOOM LENS)
   ============================================================== */
.vehicle-gallery-stage {
    position: relative;
    width: 100%;
    height: 440px;
    max-height: 480px;
    border-radius: 16px;
    overflow: hidden;
    background-color: #0f172a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    cursor: crosshair;
    user-select: none;
}

.vehicle-zoom-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0f172a;
    transition: transform 0.12s ease-out, opacity 0.2s ease;
    will-change: transform;
    display: block;
}

.zoom-hint-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(6px);
    color: #f8fafc;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: none;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: opacity 0.3s ease;
}

.vehicle-gallery-stage:hover .zoom-hint-badge {
    opacity: 0.4;
}

/* Küçük Resim Butonları (Thumbnails) */
.gallery-thumbs-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 12px !important;
    width: 100% !important;
}

.vehicle-thumb-btn {
    flex: 0 0 76px !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 56px !important;
    max-height: 56px !important;
    border: 2px solid #e2e8f0 !important;
    padding: 2px !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    opacity: 0.72 !important;
    position: relative !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    display: inline-block !important;
    box-sizing: border-box !important;
}

.vehicle-thumb-btn:hover {
    opacity: 1 !important;
    transform: translateY(-3px) !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
}

.vehicle-thumb-btn.active {
    opacity: 1 !important;
    border-color: var(--primary, #e63946) !important;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.25), 0 4px 10px rgba(230, 57, 70, 0.2) !important;
    transform: translateY(-2px) !important;
}

.vehicle-thumb-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
}

.vehicle-thumb-badge {
    position: absolute !important;
    bottom: 2px !important;
    left: 2px !important;
    right: 2px !important;
    background: rgba(0, 0, 0, 0.75) !important;
    color: #fff !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 1px 0 !important;
    border-radius: 0 0 6px 6px !important;
}

@media (max-width: 767.98px) {
    .vehicle-gallery-stage {
        height: 250px !important;
        cursor: default !important;
    }
    .zoom-hint-badge {
        display: none !important;
    }
    .gallery-thumbs-row {
        gap: 6px !important;
    }
    .vehicle-thumb-btn {
        flex: 0 0 62px !important;
        width: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
        height: 46px !important;
        max-height: 46px !important;
        border-radius: 8px !important;
    }
}

/* Video Galeri Sahnesi & Video Küçük Resim Butonları */
.vehicle-video-stage {
    position: relative;
    width: 100%;
    background: #000000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.vehicle-video-stage iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.vehicle-thumb-video {
    position: relative;
    border-color: #fecaca;
    background: #fff5f5;
}

.vehicle-thumb-video .thumb-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vehicle-thumb-video:hover .thumb-play-icon {
    transform: translate(-50%, -50%) scale(1.2);
}

.vehicle-thumb-video .vehicle-thumb-badge {
    background: #dc3545 !important;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* ============================================================
   YÜZEN BİLDİRİM BALONCUĞU (FLOATING TOAST NOTIFICATION)
   Sayfa yenilenmeden, ekranın üstünde modern animasyonlu baloncuk
   ============================================================ */
.cetin-floating-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translate(-50%, -150%);
    z-index: 999999;
    min-width: 320px;
    max-width: 90vw;
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.06);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cetin-floating-toast.show {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}
.cetin-floating-toast .toast-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.cetin-floating-toast.toast-success .toast-icon-wrap {
    background: #dcfce7;
    color: #16a34a;
}
.cetin-floating-toast.toast-error .toast-icon-wrap {
    background: #fee2e2;
    color: #dc2626;
}
.cetin-floating-toast .toast-body-wrap {
    flex-grow: 1;
}
.cetin-floating-toast .toast-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 2px;
}
.cetin-floating-toast .toast-text {
    font-size: 0.84rem;
    color: #475569;
    line-height: 1.4;
}
.cetin-floating-toast .toast-close-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 6px;
    transition: all 0.2s;
}
.cetin-floating-toast .toast-close-btn:hover {
    color: #0f172a;
    background: #f1f5f9;
}
[data-theme="dark"] .cetin-floating-toast {
    background: #1e293b;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .cetin-floating-toast .toast-title {
    color: #f8fafc;
}
[data-theme="dark"] .cetin-floating-toast .toast-text {
    color: #cbd5e1;
}
[data-theme="dark"] .cetin-floating-toast .toast-close-btn:hover {
    color: #ffffff;
    background: #334155;
}

/* ============================================================
   AKILLI YUKARI ÇIK BUTONU & ÇEMBERSEL İLERLEME ÇUBUĞU (%0-%100)
   (Smart Scroll-To-Top Button with Circular Progress Ring)
   ============================================================ */
.cetin-scroll-top-btn {
    position: fixed;
    bottom: 95px;
    right: 31px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    border: none;
    outline: none;
    cursor: pointer;
    z-index: 1035;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.7) translateY(15px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.cetin-scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

.cetin-scroll-top-btn:hover {
    color: #e63946;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 25px rgba(230, 57, 70, 0.35);
}

.cetin-scroll-top-btn:active {
    transform: scale(0.92);
}

/* SVG Dairesel İlerleme Çizgisi */
.cetin-scroll-top-btn svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* 12 yönünden başlaması için */
    border-radius: 50%;
    pointer-events: none;
}

.cetin-scroll-top-btn .scroll-progress-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.08);
    stroke-width: 3.5;
}

.cetin-scroll-top-btn .scroll-progress-bar {
    fill: none;
    stroke: #e63946;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 125.66;
    stroke-dashoffset: 125.66;
    transition: stroke-dashoffset 0.1s ease-out;
}

.cetin-scroll-top-btn .scroll-icon {
    font-size: 1.25rem;
    line-height: 1;
    color: currentColor;
    transition: transform 0.2s ease;
    z-index: 2;
}

.cetin-scroll-top-btn:hover .scroll-icon {
    transform: translateY(-2px);
}

/* Koyu Tema Uyumu */
[data-theme="dark"] .cetin-scroll-top-btn {
    background: #1e293b;
    color: #f8fafc;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .cetin-scroll-top-btn .scroll-progress-bg {
    stroke: rgba(255, 255, 255, 0.12);
}

/* Mobil Cihazlar & Tablet: Akıllı Yukarı Çık & WhatsApp Hizalaması */
@media (max-width: 767.98px) {
    .floating-whatsapp {
        bottom: 18px !important;
        right: 18px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 26px !important;
    }
    .cetin-scroll-top-btn {
        bottom: 76px !important;
        right: 21px !important;
        width: 44px !important;
        height: 44px !important;
    }
    .cetin-scroll-top-btn .scroll-icon {
        font-size: 1.15rem;
    }
}