/**
 * ==============================================================================
 * BİDOKTOR - RESPONSIVE VE EKRAN UYUMLULUK DOSYASI (responsive.css)
 * Mobil, Tablet ve Masaüstü Kusursuz Görünüm Kuralları
 * ==============================================================================
 */

/* ==============================================================================
   1. GENİŞ EKRANLAR VE MASAÜSTÜ (Desktop >= 1200px)
   ============================================================================== */
@media (min-width: 1200px) {
    .container {
        max-width: 1180px;
    }
}

/* ==============================================================================
   2. ORTA VE BÜYÜK TABLETLER (992px - 1199px)
   ============================================================================== */
@media (max-width: 1199.98px) {
    .main-nav {
        gap: 20px;
    }
    
    .main-nav .nav-link {
        font-size: 12.5px;
    }

    .topbar-right {
        gap: 15px;
    }

    .counter-grid {
        gap: 20px;
    }
}

/* ==============================================================================
   3. TABLETLER VE MOBİL CİHAZLAR (max-width: 991.98px)
   ============================================================================== */
@media (max-width: 991.98px) {
    /* Topbar Ayarı: Mobil ve tablet ekranlarda ferah dikey akış */
    .topbar-grid {
        flex-direction: column;
    }

    .topbar-left {
        justify-content: center;
        padding: 8px 15px;
        font-size: 12px;
        text-align: center;
    }

    .topbar-right {
        justify-content: center;
        padding: 8px 15px;
        gap: 16px;
        font-size: 12px;
        flex-wrap: wrap;
    }

    .topbar-social {
        padding-left: 12px;
    }

    /* Header Alanı */
    .header-container {
        padding: 12px 0;
    }

    .brand-logo-img {
        height: 42px;
    }

    /* Sayaç Kutuları: 2 Kolona Geçiş */
    .counter-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .counter-item {
        justify-content: center;
    }

    /* Bölüm Başlıkları Boyut Küçültme */
    .section-title {
        font-size: 1.75rem;
    }

    /* Hero Slider Tablet Görünümü */
    .hero-slider-section {
        height: 540px;
    }

    .hero-slide-overlay {
        background: linear-gradient(
            90deg,
            rgba(26, 52, 85, 0.95) 0%,
            rgba(26, 52, 85, 0.92) 55%,
            rgba(26, 52, 85, 0.75) 100%
        );
    }

    .hero-slide-title {
        font-size: 2.2rem;
    }

    .hero-slide-subtitle {
        font-size: 1rem;
        margin-bottom: 28px;
    }

    .hero-nav-arrow {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .hero-arrow-prev {
        left: 12px;
    }

    .hero-arrow-next {
        right: 12px;
    }

    .section-spacing {
        padding: 60px 0;
    }
}

/* ==============================================================================
   4. AKILLI TELEFONLAR (max-width: 575.98px)
   ============================================================================== */
@media (max-width: 575.98px) {
    .topbar-right {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    .topbar-social {
        border-left: none;
        padding-left: 0;
        margin-top: 4px;
    }

    .brand-title {
        font-size: 1.35rem;
    }

    .brand-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .section-title {
        font-size: 1.55rem;
    }

    /* Hero Slider Akıllı Telefon Görünümü */
    .hero-slider-section {
        height: 480px;
    }

    .hero-slide-title {
        font-size: 1.75rem;
        margin-bottom: 14px;
    }

    .hero-slide-subtitle {
        font-size: 0.92rem;
        line-height: 1.55;
        margin-bottom: 24px;
    }

    .btn-hero-randevu {
        padding: 10px 30px;
        font-size: 13px;
    }

    .hero-nav-arrow {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .hero-arrow-prev {
        left: 8px;
    }

    .hero-arrow-next {
        right: 8px;
    }

    .hero-slider-dots {
        bottom: 15px;
    }

    .counter-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .counter-item {
        justify-content: flex-start;
        padding-left: 15px;
    }

    .footer-bottom-flex {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .floating-dock {
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        gap: 8px;
    }

    .dock-pill {
        padding: 6px 12px 6px 8px;
        border-radius: 30px 0 0 30px;
    }

    .dock-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .dock-tag {
        display: none;
    }

    .dock-title {
        font-size: 11.5px;
    }

    .back-to-top-btn {
        width: 36px;
        height: 36px;
        font-size: 15px;
        right: 12px;
        bottom: 18px;
    }

    .page-hero-banner,
    .documents-page-hero-banner {
        padding: 50px 0 40px;
    }

    .page-hero-title,
    .documents-page-hero-title {
        font-size: 1.85rem;
    }

    .contact-form-card {
        padding: 24px 18px;
    }
}

/* ==============================================================================
   5. EKSTRA KÜÇÜK MOBİL EKRANLAR (max-width: 380px - Örn: iPhone SE 375px)
   ============================================================================== */
@media (max-width: 380px) {
    .brand-logo-img {
        height: 36px;
    }

    .hero-slide-title {
        font-size: 1.55rem;
    }

    .hero-slide-subtitle {
        font-size: 0.85rem;
    }

    .pricing-card {
        padding: 24px 16px;
    }

    .pricing-card-price {
        font-size: 2.3rem;
    }

    .contact-form-card {
        padding: 20px 14px;
    }

    .contact-info-card {
        padding: 22px 16px;
    }

    .dock-pill {
        padding: 7px 7px 7px 9px;
        border-radius: 24px 0 0 24px;
    }

    .dock-content {
        display: none;
    }

    .dock-icon {
        width: 34px;
        height: 34px;
    }
}