/* Footer'ı her zaman sayfa altından başlatmak için gerekli stil */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
/* Slider görsel yükseklik ayarı */
.carousel-item img { height: 500px; object-fit: cover; }

@media (max-width: 768px) {
    .carousel-item img { height: 300px; }
}

/* Kategori Kartları Yan Yana 4'lü Izgara Yapısı */
.category-cards-grid { display: grid; /* Masaüstü ekranlarda tam olarak 1 satırda 4 eşit sütun oluşturur */ grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 40px 20px; max-width: 1400px; /* 4 kart yan yana sığması için genişliği artırdık */ margin: 0 auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-sizing: border-box; }

/* Tablet Ekranlar İçin Düzenleme (Ekran genişliği 1024px altındaysa 2'li dizilir) */
@media (max-width: 1024px) {
    .category-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobil Ekranlar İçin Düzenleme (Ekran genişliği 600px altındaysa tekli dizilir) */
@media (max-width: 600px) {
    .category-cards-grid { grid-template-columns: 1fr; }
}


/* Ana Kart Tasarımı */
.category-main-card { background: #ffffff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; justify-content: space-between; padding: 24px; transition: transform 0.3s ease, box-shadow 0.3s ease; border-top: 4px solid #ccc; /* Varsayılan üst çizgi */ }

    /* Kart Üzerine Gelindiğinde Efekt (Hover) */
    .category-main-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); }

/* Üst Renk Çizgileri */

.border-top-green { border-top-color: #198754; }


/* Kart Başlık Alanı */
.card-icon-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

.product-count { font-size: 0.85rem; background: #f8f9fa; padding: 4px 10px; border-radius: 20px; color: #6c757d; font-weight: 600; }

/* Kart İçerik Alanı */
.card-body-content h3 { font-size: 1.25rem; font-weight: 700; color: #212529; margin-bottom: 12px; line-height: 1.4; }

.card-body-content p { font-size: 0.95rem; color: #6c757d; line-height: 1.6; margin-bottom: 20px; }

/* Ürün Küçük Rozetleri (Tags) */
.featured-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

.mini-tag { font-size: 0.8rem; background: #e9ecef; color: #495057; padding: 4px 8px; border-radius: 4px; font-weight: 500; }

/* Buton Tasarımları */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; font-size: 0.95rem; font-weight: 600; border-radius: 6px; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; cursor: pointer; border: 2px solid transparent; }

.w-100 { width: 100%; }



.btn-outline-green { border-color: #198754; color: #198754; background: transparent; }
    .btn-outline-green:hover { background: #198754; color: #fff; }


/* Özellikler Alanı Yan Yana 4'lü Izgara Yapısı */
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* Masaüstünde tam 4 sütun */ gap: 24px; max-width: 1400px; margin: 40px auto; padding: 0 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-sizing: border-box; }

/* Ana Kart Tasarımı */
.feature-box { background: #ffffff; border-radius: 12px; padding: 30px 24px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); border: 1px solid #eef2f5; display: flex; flex-direction: column; align-items: flex-start; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; }

    .feature-box:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(13, 27, 42, 0.08); }

/* İkon Kapsayıcı Alanı */
.icon-wrapper { width: 55px; height: 55px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; position: relative; }

    .icon-wrapper i { font-size: 1.6rem; line-height: 1; }

/* Kart Yazı Alanları */
.feature-box h4 { font-size: 1.15rem; color: #0b1a30; /* Koyu Lacivert Başlıklar */ margin-bottom: 12px; line-height: 1.4; }

.feature-box p { font-size: 0.9rem; color: #5c677d; /* Profesyonel Gri Metin */ line-height: 1.6; margin: 0; }

/* Hızlı Etki Kartı İçin Zaman Rozeti */
.time-badge { position: absolute; top: -8px; right: -25px; background: #0b1a30; color: #ffffff; font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* RENK PALETİ VARYASYONLARI */

/* 1. Kart: Koyu Navy Temalı */
.card-navy .icon-wrapper { background-color: #0b1a30; color: #ffffff; }
.card-navy { border-top: 4px solid #0b1a30; }

/* 2. Kart: Medikal Yeşil Temalı */
.card-green .icon-wrapper { background-color: #e8f5e9; color: #2e7d32; }
.card-green { border-top: 4px solid #2e7d32; }

/* 3. Kart: Profesyonel Gri/Kurşuni Temalı */
.card-grey .icon-wrapper { background-color: #f1f3f5; color: #495057; }
.card-grey { border-top: 4px solid #6c757d; }

/* 4. Kart: Açık Navy / Çelik Mavisi Temalı */
.card-navy-light .icon-wrapper { background-color: #e0f2fe; color: #0369a1; }
.card-navy-light { border-top: 4px solid #0a58ca; }


/* RESPONSIVE (MOBİL UYUMLULUK) AYARLARI */

/* Tablet Ekranlar */
@media (max-width: 1024px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); /* 2 satır, 2 sütun düzeni */ }
}

/* Mobil Ekranlar */
@media (max-width: 650px) {
    .features-grid { grid-template-columns: 1fr; /* Tamamen alt alta listeleme */ gap: 16px; }
}