/* ==========================================================================
   GLOBAL AYARLAR (Yumuşak Geçiş ve Reset)
   ========================================================================== */
html {
    scroll-behavior: smooth;
    /* Eğer yukarıda sabit (fixed) bir menün varsa buraya padding eklemelisin: */
    scroll-padding-top: 120px; 
}

/* ==========================================================================
   HERO SECTION (Modeller Sayfası)
   ========================================================================== */
.models-master-hero {
    position: relative;
    width: 100%;
    height: 106vh; /* Mimari Not: Neden 100vh değil de 106vh? Taşkınlıklara dikkat edilmeli. */
    display: flex;
    align-items: center; 
    background-image: url('../img/pickup-hero-luxury.jpg'); /* Yol (Path) kontrolü önemli */
    background-size: cover !important; 
    background-position: center center !important;
    background-repeat: no-repeat;
    margin-top: -120px !important; 
    padding-top: 0 !important; 
    box-sizing: border-box; 
    overflow: hidden;
}

.models-master-hero .container.z-3 {
    padding-top: 120px;
}

/* 1. HERO ARKA PLANI: KESİN TAM EKRAN (100vh) MİMARİSİ */
    .models-master-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(15,20,18,0.9) 0%, rgba(15,20,18,0.4) 100%);
        z-index: 1;
    }
    
    /* Filtreleme Butonları */
    .filter-wrapper {
        background-color: #fff;
        padding: 10px 0;
        border-bottom: 2px solid var(--success-color);
        border-top: 2px solid var(--primary-color);
        position: sticky;
        top: 80px; /* Header'ın altına yapışsın kaydırırken */
        z-index: 40;
    }
    .filter-btn {
        background: transparent;
        color: #666;
        border: 2px solid #ddd;
        padding: 10px 25px;
        border-radius: 50px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.8rem;
        transition: all 0.3s;
        margin: 5px;
    }
    .filter-btn:hover, .filter-btn.active {
        background: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
    }

    /* Model Grid Kartları */
    .model-card-pro {
        background: #fff;
        border: 1px solid #f0f0f0;
        border-radius: 15px;
        overflow: hidden;
        transition: all 0.4s ease;
        display: flex;
        flex-direction: column;
        height: 100%;
        text-decoration: none;
    }
    .model-card-pro:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    }
    .model-img-box {
        position: relative;
        height: 260px;
        overflow: hidden;
    }
    .model-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }
    .model-card-pro:hover .model-img-box img {
        transform: scale(1.05);
    }
    .model-badge-top {
        position: absolute;
        top: 15px;
        left: 15px;
        background: rgba(255,255,255,0.95);
        color: var(--primary-color);
        padding: 5px 12px;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
        border-radius: 4px;
        z-index: 2;
    }
    .model-info {
        padding: 25px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    .model-info h3 {
        color: #111;
        font-size: 1.4rem;
        font-weight: 800;
        margin-bottom: 10px;
    }
    .model-info p {
        color: #666;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 20px;
    }
    .model-action-btn {
        margin-top: auto;
        color: var(--accent-color);
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .model-item.hidden { display: none !important; }

    /* Yeni Kategori İkon Kutuları */
    .cat-icon-box {
        text-align: center;
        padding: 40px 20px;
        background: #e9ecef;
        border-radius: 15px;
        height: 100%;
        transition: background 0.3s;
    }
    .cat-icon-box:hover { background: #eef1f0; }
    .cat-icon-box i {
        font-size: 2.5rem;
        color: var(--primary-color);
        margin-bottom: 20px;
    }

    /* HAREKETLİ SCROLL İNDİKATÖRÜ (PREMIUM EFEKT) */
    .scroll-indicator {
        position: absolute;
        bottom: 40px; /* Ekranın en altından 40px yukarıda */
        left: 50%;
        transform: translateX(-50%);
        z-index: 20;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        transition: color 0.3s ease;
    }
    
    .scroll-indicator:hover {
        color: #fff;
    }

    /* İkonun yumuşakça aşağı yukarı süzülme animasyonu */
    .scroll-indicator i {
        font-size: 1.5rem;
        color: #fff;
        animation: scrollDownFloat 2s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
    }

    @keyframes scrollDownFloat {
        0% { transform: translateY(0); opacity: 0.5; }
        50% { transform: translateY(12px); opacity: 1; }
        100% { transform: translateY(0); opacity: 0.5; }
    }

    /* =========================================================
   DE-CAMP PREMIUM - MODELS BREADCRUMB & MOBILE ARMOR
   ========================================================= */

/* --- 1. BREADCRUMB DÜZELTMESİ (HEM PC HEM MOBİL İÇİN) --- */
/* Satır içi (inline) yazılan top: 150px değerini ezip, header'ın altından kurtarıyoruz */
.models-master-hero .position-absolute[style*="top: 150px"] {
    top: 220px !important; 
}

@media (max-width: 991px) {
    
    /* Breadcrumb mobilde header daraldığı için biraz daha yukarı çıkabilir */
    .models-master-hero .position-absolute[style*="top: 150px"] {
        scale:1;
    }

    /* Hero Alanı Tıraşlaması (Dehşet büyük başlıkları küçült) */
    .models-master-hero {
        height: 70vh !important;
        min-height: 450px !important;
    }
    
    .models-master-hero h1.display-3 {
        font-size: clamp(2rem, 8vw, 2.5rem) !important;
        line-height: 1.2 !important;
        margin-top: 120px;
    }

    /* --- MİMARIN DOKUNUŞU: STICKY İPTALİ --- */
    /* Filtre kutusunu mobilde sabitlikten kurtar, sayfayla aşağı kaysın */
    .filter-wrapper {
        position: relative !important; 
        top: auto !important;
        padding: 15px 0 !important;
        z-index: 10 !important; /* Header'ın (1000) altında kalmasını garantiler */
    }
    
    /* Filtre butonları mobilde sıkışmasın, yana doğru şıkça kaydırılsın */
    .filter-btn-group {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch; /* Mobilde yağ gibi kaysın */
    }
    
    /* Yana kaydırma çubuğunun (scrollbar) lüks tasarımı */
    .filter-btn-group::-webkit-scrollbar { height: 4px; }
    .filter-btn-group::-webkit-scrollbar-track { background: transparent; }
    .filter-btn-group::-webkit-scrollbar-thumb { 
        background: var(--accent-color); 
        border-radius: 10px; 
    }

    /* Model Kartları ve İkon Kutuları Daraltması */
    .model-img-box {
        height: 220px !important; /* Mobilde resimler çok yer kaplamasın */
    }
    
    .cat-icon-box {
        padding: 30px 15px !important;
    }
    
    .bottom-cta-section {
        padding: 60px 20px !important;
    }
}

/* =========================================================
   DE-CAMP PREMIUM - 2-COLUMN MOBILE GRID (SHOWROOM) V2
   ========================================================= */
@media (max-width: 767px) {
    /* 1. MİMARIN DOKUNUŞU: Bootstrap çatışmasını ezen modern CSS Grid */
    #modelsGrid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Eşit 2 sütun */
        gap: 12px !important; /* Kartlar arası kusursuz boşluk */
        margin-right: 0 !important; /* Sağdaki o çirkin boşluğu yok eder */
        margin-left: 0 !important;
    }
    
    .scroll-indicator{
        scale:0;
    }


    /* 2. Kartların Grid içine tam oturması için */
    .model-item {
        width: 100% !important;
        padding-right: 0 !important; 
        padding-left: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 3. Resim yüksekliğini telefona göre optimize et */
    .model-img-box {
        height: 140px !important; 
    }

    /* 4. Kart içi boşlukları (Padding) daralt */
    .model-info {
        padding: 12px !important;
    }

    /* 5. Araç İsimlerini (Başlıkları) küçült ve taşarsa 3 nokta (...) koy */
    .model-info h3 {
        font-size: 0.95rem !important;
        margin-bottom: 5px !important;
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis; 
    }

    /* 6. Uzun açıklamaları mobilde tamamen gizle */
    .model-info p {
        display: none !important;
    }

    /* 7. Sol üstteki rozeti ehlileştir */
    .model-badge-top {
        font-size: 0.55rem !important;
        padding: 4px 6px !important;
        top: 8px !important;
        left: 8px !important;
    }

    /* 8. Alt kısımdaki butonu küçült */
    .model-action-btn {
        font-size: 0.75rem !important;
        margin-top: 5px !important;
    }
}