/**
 * Ana Sayfa Kompakt ve Zarif Tasarım
 * Tüm bölümleri daha küçük, şık ve responsive yapar
 */

/* ============================================
   GENEL SECTION AYARLARI
   ============================================ */

/* Tüm section'lar - Kompakt padding */
section {
    padding: 1.25rem 0 !important;
}

section.py-5 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

/* Container - Kompakt */
section .container {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ============================================
   HERO SLIDER SECTION
   ============================================ */

.hero-slider-section {
    padding: 1.5rem 0 2rem !important;
    min-height: auto !important;
}

.hero-date {
    font-size: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    opacity: 0.8;
}

.hero-title {
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.hero-subtitle {
    font-size: clamp(0.85rem, 1.2vw, 0.95rem) !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.5 !important;
    max-width: 700px;
    opacity: 0.9;
}

.featured-hostings {
    gap: 0.75rem !important;
    margin-top: 1.25rem !important;
    padding: 0 0.5rem;
}

.featured-hosting-card {
    padding: 1rem 0.75rem !important;
    min-height: auto !important;
}

.featured-hosting-card .hosting-logo-container {
    margin-bottom: 1rem !important;
    padding-top: 1.5rem !important;
    min-height: 60px !important;
}

.featured-hosting-card .hosting-rating-wrapper {
    margin-bottom: 0.75rem !important;
}

.featured-hosting-card .hosting-feature {
    margin-bottom: 0.75rem !important;
    font-size: 0.8rem !important;
    padding: 0.5rem !important;
}

.featured-hosting-card .visit-site-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
    margin-top: 0.5rem !important;
}

/* ============================================
   HOSTING TYPES NAVIGATION
   ============================================ */

.hosting-types-nav {
    padding: 0.75rem 0 !important;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
}

.hosting-types-list {
    gap: 0.5rem !important;
    padding: 0.25rem 0 !important;
}

.hosting-type-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}

.advanced-filters-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
}

/* ============================================
   SECTION HEADERS
   ============================================ */

section header {
    margin-bottom: 1rem !important;
}

section header h2.display-4,
section header h2.display-5 {
    font-size: clamp(1.4rem, 3vw, 1.8rem) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

/* Header margin override */
header.text-center.mb-5 {
    margin-bottom: 1rem !important;
}

header.text-center.mb-5 h2.mb-3 {
    margin-bottom: 0.5rem !important;
}

section header .lead {
    font-size: clamp(0.875rem, 1.1vw, 0.95rem) !important;
    margin-bottom: 0 !important;
    opacity: 0.85;
}

/* ============================================
   BEST OVERALL HOSTING SECTION
   ============================================ */

#bestOverallHosting .card-body {
    padding: 1rem !important;
}

#bestOverallHosting .row {
    margin: 0;
}

#bestOverallHosting .col-md-2,
#bestOverallHosting .col-md-3,
#bestOverallHosting .col-md-4 {
    padding: 0.5rem;
}

#bestOverallHosting .badge {
    font-size: 0.7rem !important;
    padding: 0.35rem 0.65rem !important;
}

#bestOverallHosting .h4,
#bestOverallHosting .h5 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
}

/* ============================================
   PROVIDERS SECTION
   ============================================ */

.providers-section {
    padding: 1.5rem 0 !important;
}

.providers-section h2 {
    font-size: clamp(1.5rem, 3.5vw, 2rem) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
}

.providers-section .subtitle {
    font-size: clamp(0.875rem, 1.1vw, 0.95rem) !important;
    margin-bottom: 1.5rem !important;
    opacity: 0.85;
}

.providers-container {
    gap: 0.75rem !important;
    margin-top: 1rem !important;
}

/* ============================================
   FEATURES SECTION
   ============================================ */

.features-section {
    padding: 1.5rem 0 !important;
}

.feature-card {
    padding: 0 !important;
    height: 100%;
}

.feature-card .card-body {
    padding: 1.25rem !important;
}

.feature-icon-wrapper {
    margin-bottom: 1rem !important;
}

.feature-icon {
    font-size: 2rem !important;
    padding: 10px !important;
    width: 60px !important;
    height: 60px !important;
}

.feature-card .card-title {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
    font-weight: 600 !important;
}

.feature-card .card-text {
    font-size: 0.875rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.5 !important;
}

/* ============================================
   PRICE COMPARISON SECTION
   ============================================ */

.price-comparison-section {
    padding: 1.5rem 0 !important;
}

.price-comparison-section .table {
    font-size: 0.875rem !important;
}

.price-comparison-section .table th,
.price-comparison-section .table td {
    padding: 0.75rem 0.5rem !important;
    vertical-align: middle !important;
}

.price-comparison-section .btn-sm {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.8rem !important;
}

/* ============================================
   HOSTING & SERVER SECTION
   ============================================ */

.hosting-server-section {
    padding: 1.5rem 0 !important;
}

.hosting-server-section .card {
    margin-bottom: 0.75rem !important;
}

.hosting-server-section .card-body {
    padding: 1rem !important;
}

.hosting-server-section .card-title {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
}

/* ============================================
   QUICK LINKS SECTION
   ============================================ */

.quick-links-section {
    padding: 1.5rem 0 !important;
}

.quick-links-section .card {
    margin-bottom: 0.75rem !important;
}

.quick-links-section .card-body {
    padding: 1rem !important;
}

.quick-link-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
}

.quick-link-icon i {
    font-size: 1.5rem !important;
}

.quick-links-section .card-title {
    font-size: 0.95rem !important;
    margin-bottom: 0.5rem !important;
}

/* ============================================
   STATS SECTION
   ============================================ */

.stats-section {
    padding: 1.5rem 0 !important;
}

.stat-card {
    padding: 1.25rem !important;
}

.stat-card i {
    font-size: 1.75rem !important;
    margin-bottom: 0.75rem !important;
}

.stat-card .h2 {
    font-size: 1.75rem !important;
    margin-bottom: 0.5rem !important;
}

.stat-card p {
    font-size: 0.875rem !important;
    margin-bottom: 0 !important;
}

/* ============================================
   FAQ SECTION
   ============================================ */

.faq-section {
    padding: 1.5rem 0 !important;
}

.accordion-item {
    margin-bottom: 0.5rem !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.accordion-button {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

.accordion-body {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
}

/* ============================================
   CARDS GENEL
   ============================================ */

.card {
    margin-bottom: 0.75rem !important;
    border-radius: 8px !important;
}

.card-body {
    padding: 1rem !important;
}

/* ============================================
   BUTTONS
   ============================================ */

.custom-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
    min-width: 110px !important;
    height: 34px !important;
    line-height: 34px !important;
    border-radius: 6px !important;
}

.custom-btn.btn-lg {
    padding: 0.65rem 1.25rem !important;
    font-size: 0.9rem !important;
    min-width: 150px !important;
    height: 40px !important;
    line-height: 40px !important;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    /* Section padding */
    section {
        padding: 1.25rem 0 !important;
    }
    
    section.py-5 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }
    
    /* Hero section */
    .hero-slider-section {
        padding: 1.5rem 0 2rem !important;
    }
    
    .hero-title {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .hero-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
    }
    
    .featured-hostings {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0 !important;
    }
    
    .featured-hosting-card {
        padding: 1rem !important;
    }
    
    /* Section headers */
    section header {
        margin-bottom: 1rem !important;
    }
    
    section header h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Cards */
    .card-body {
        padding: 0.75rem !important;
    }
    
    /* Providers */
    .providers-container {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    /* Hosting types */
    .hosting-types-list {
        overflow-x: auto;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }
    
    .hosting-type-btn {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.75rem !important;
        white-space: nowrap;
    }
    
    /* Buttons */
    .custom-btn {
        font-size: 0.8rem !important;
        padding: 0.45rem 0.9rem !important;
        min-width: 100px !important;
    }
}

/* ============================================
   TABLET RESPONSIVE
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    section {
        padding: 1.75rem 0 !important;
    }
    
    .featured-hostings {
        gap: 0.75rem !important;
    }
    
    .providers-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}

/* ============================================
   ROW GAPS - Kompakt
   ============================================ */

.row.g-4 {
    --bs-gutter-y: 1rem !important;
    --bs-gutter-x: 1rem !important;
}

.row.g-5 {
    --bs-gutter-y: 1rem !important;
    --bs-gutter-x: 1rem !important;
}

/* ============================================
   LARGE DESKTOP OPTIMIZATIONS
   ============================================ */

@media (min-width: 1400px) {
    section .container {
        max-width: 1200px;
    }
}