/* Mobile Responsive Styles for Detail Page */

/* Swiper Gallery */
.swiper {
    width: 100%;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-button-next,
.swiper-button-prev {
    color: #0d6efd !important;
    background: rgba(255, 255, 255, 0.8);
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 18px;
}

.swiper-pagination-bullet-active {
    background: #0d6efd !important;
}

/* Mobile Responsive */
@media (max-width: 992px) {

    /* Mobilde price-card'ı tam genişlik yap */
    .price-card {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-top: 15px;
    }

    .detail-header {
        flex-direction: column;
        align-items: flex-start !important;
    }

    /* Mobilde eski fiyat kutusunu gizle */
    .detail-header div.col-lg-4.d-none.d-lg-block {
        display: none !important;
    }

    .mobile-price-card {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        margin-top: -10px;
        /* Galeriye yakınlaştırma */
        position: relative;
        z-index: 5;
    }

    .mobile-price-footer {
        font-size: 0.75rem;
    }

    .price-box {
        text-align: left;
        margin-top: 15px;
    }

    .gallery-main {
        height: 300px;
    }

    /* Mobilde galeri resimlerini contain yap, tüm resim görünsün */
    .gallery-main img,
    .swiper-slide img,
    #vehicleSwiper img,
    #vehicleSwiper .swiper-slide img {
        object-fit: cover !important;
        background: #f8f9fa;
        width: 100%;
        height: 100%;
    }

    /* Mobilde bölümleri flexbox ile yeniden sırala */
    /* Ana içerik satırını flex yap */
    .container .row:has(.col-lg-8) {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Sütunları "contents" yap - böylece çocukları direkt row'a taşınır */
    /* Fiyat sütunu hariç (o gizli kalmalı) */
    .container .row .col-lg-8,
    .container .row .col-lg-4:not(.d-none) {
        display: contents !important;
    }

    /* === TÜM BÖLÜMLERDE GLOBAL SIRALAMA === */

    /* Galeri - 0: EN BAŞTA */
    .detail-gallery-section,
    .mobile-action-buttons {
        order: 0 !important;
    }

    /* Thumbnail - gizli */
    .col-lg-8>.thumb-row {
        order: -1 !important;
        display: none !important;
    }

    /* Araç Hakkında - 1: İkinci sırada */
    .detail-about-section {
        order: 1 !important;
    }

    /* Araç Açıklaması - 2: Üçüncü sırada */
    .detail-description-section {
        order: 2 !important;
    }

    /* Donanım Özellikleri - 3: Dördüncü sırada (Açıklamanın Altında) */
    .detail-features-section {
        order: 3 !important;
    }

    /* Ekspertiz Durumu - 4: Beşinci sırada */
    .detail-expertise-section {
        order: 4 !important;
    }

    /* Tramer - 5: Altıncı sırada */
    .detail-tramer-section {
        order: 5 !important;
    }

    /* Hızlı İşlemler - 99: EN SONDA */
    .detail-actions-section {
        order: 99 !important;
    }

}

@media (max-width: 768px) {
    .vehicle-title {
        font-size: 1.35rem !important;
        /* Bir tık daha küçüğe aldık */
        line-height: 1.2;
    }

    .vehicle-subtitle {
        font-size: 0.85rem !important;
        opacity: 0.8;
    }

    .current-price span {
        font-size: 1.8rem !important;
        /* 2rem idi, 1.8rem yaptık */
    }

    .current-price .fs-4 {
        font-size: 1rem !important;
    }

    .gallery-main {
        height: 300px;
    }

    /* Mobilde tüm resimler contain olsun */
    .gallery-main img,
    .swiper-slide img {
        object-fit: cover !important;
        background: #f8f9fa;
    }

    .thumb-row {
        display: none !important;
        /* Mobilde thumbnail'leri gizle, swiper kullan */
    }

    .nav-tabs .nav-link {
        padding: 12px 15px;
        font-size: 0.9rem;
    }

    .specs-table tr td {
        padding: 10px 15px;
        font-size: 0.85rem;
    }

    /* Mobilde hızlı iletişim butonları daha küçük */
    .col-md-6 {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .gallery-main {
        height: 300px;
    }

    /* Küçük ekranlarda da contain */
    .gallery-main img,
    .swiper-slide img {
        object-fit: cover !important;
        background: #f8f9fa;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }

    .swiper-slide {
        cursor: pointer;
    }

    /* Price card mobilde daha kompakt */
    .price-card {
        padding: 16px;
    }

    .current-price {
        font-size: 1.5rem;
    }
}

/* DARK MODE INTEGRATION (Night Blue) */
[data-theme="dark"] .mobile-price-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .mobile-price-card .text-dark {
    color: var(--text-main) !important;
}

[data-theme="dark"] .mobile-price-card .text-secondary {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .mobile-price-footer {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .action-btn-mobile {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .action-btn-mobile.text-danger {
    color: #ef4444 !important;
}

[data-theme="dark"] .action-btn-mobile.text-primary {
    color: var(--primary-color) !important;
}