/**
 * Responsive Stiller
 * Dr. Ali Ekinci Diş Kliniği
 * Mobile-First Approach
 */

/* =============================================
   TABLET (768px ve üzeri)
   ============================================= */
@media (min-width: 768px) {

    /* Tipografi */
    h1 {
        font-size: var(--font-6xl);
    }

    h2 {
        font-size: var(--font-5xl);
    }

    h3 {
        font-size: var(--font-4xl);
    }

    /* Hero */
    .hero-baslik {
        font-size: var(--font-5xl);
    }

    .hero-istatistikler {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Gridler */
    .hizmetler-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ozellikler-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .yorumlar-track {}

    .yorum-kart {
        flex: 0 0 calc(50% - var(--space-3));
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-alt-icerik {
        flex-direction: row;
        justify-content: space-between;
    }

    /* İletişim Kartları */
    .iletisim-kartlar {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Galeri */
    .galeri-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Sayfa İçerik */
    .sayfa-grid {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: var(--space-8);
    }
}

/* =============================================
   DESKTOP (1024px ve üzeri)
   ============================================= */
@media (min-width: 1024px) {

    /* Üst Bar Görünür */
    .ust-bar-sol span:not(.ust-bar-item),
    .ust-bar-ayirici {
        display: inline;
    }

    /* Header */
    .ana-menu {
        display: block;
    }

    .header-cta {
        display: block;
    }

    .mobil-menu-btn {
        display: none;
    }

    .mobil-menu {
        display: none;
    }

    /* Hero */
    .hero-baslik {
        font-size: var(--font-6xl);
    }

    .hero-aciklama {
        font-size: var(--font-xl);
    }

    .hero-icerik {
        max-width: 650px;
    }

    /* Gridler */
    .hizmetler-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ozellikler-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .yorum-kart {
        flex: 0 0 calc(33.333% - var(--space-4));
    }

    /* Doktor Bölümü */
    .doktor-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-16);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    }

    /* İletişim Kartları */
    .iletisim-kartlar {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Galeri */
    .galeri-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* İletişim Sayfa Grid */
    .iletisim-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10);
    }
}

/* =============================================
   BÜYÜK EKRANLAR (1280px ve üzeri)
   ============================================= */
@media (min-width: 1280px) {

    /* Konteyner */
    .konteyner {
        padding: 0 var(--space-8);
    }

    /* Hero */
    .hero-istatistik-sayi {
        font-size: var(--font-4xl);
    }
}

/* =============================================
   MOBİL ÖZEL STİLLER (767px ve altı)
   ============================================= */
@media (max-width: 767px) {

    /* Üst Bar */
    .ust-bar-sol .ust-bar-item:nth-child(3),
    .ust-bar-ayirici {
        display: none;
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding: var(--space-8) 0;
    }

    .hero-icerik {
        padding: var(--space-12) 0;
    }

    .hero-butonlar {
        flex-direction: column;
    }

    .hero-butonlar .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-istatistikler {
        margin-top: var(--space-8);
        padding-top: var(--space-6);
    }

    .hero-istatistik-sayi {
        font-size: var(--font-2xl);
    }

    /* Bölümler */
    .bolum {
        padding: var(--space-12) 0;
    }

    .bolum-buyuk {
        padding: var(--space-16) 0;
    }

    .bolum-baslik {
        margin-bottom: var(--space-8);
    }

    .bolum-ana-baslik {
        font-size: var(--font-3xl);
    }

    /* Hizmet Kartları */
    .hizmet-kart {
        padding: var(--space-6);
    }

    .hizmet-ikon {
        width: 60px;
        height: 60px;
        font-size: var(--font-xl);
    }

    /* Doktor */
    .doktor-rozet {
        position: static;
        margin-top: var(--space-4);
        display: inline-flex;
    }

    .doktor-ozellikler {
        grid-template-columns: 1fr;
    }

    /* İletişim CTA */
    .iletisim-cta {
        padding: var(--space-8) var(--space-6);
    }

    .iletisim-cta-baslik {
        font-size: var(--font-2xl);
    }

    .iletisim-cta-butonlar {
        flex-direction: column;
    }

    .iletisim-cta-butonlar .btn {
        width: 100%;
    }

    .iletisim-cta-telefon {
        font-size: var(--font-xl);
    }

    /* Sayfa Hero */
    .sayfa-hero {
        padding: var(--space-12) 0 var(--space-8);
    }

    .sayfa-hero-baslik {
        font-size: var(--font-3xl);
    }

    /* Form */
    .form-kontrol {
        padding: var(--space-3);
    }

    /* Butonlar */
    .btn-buyuk {
        padding: var(--space-3) var(--space-6);
        font-size: var(--font-base);
    }

    /* WhatsApp */
    .whatsapp-floating {
        bottom: var(--space-6);
        right: var(--space-4);
    }

    .whatsapp-btn {
        width: 55px;
        height: 55px;
    }

    .whatsapp-tooltip {
        display: none;
    }

    /* Yan Panel */
    .yan-panel {
        margin-top: var(--space-8);
    }

    /* Timeline */
    .timeline {
        padding-left: var(--space-6);
    }

    .timeline-nokta {
        left: calc(-1 * var(--space-6) + 2px);
    }
}

/* =============================================
   ÇOK KÜÇÜK EKRANLAR (480px ve altı)
   ============================================= */
@media (max-width: 480px) {

    /* Konteyner */
    .konteyner {
        padding: 0 var(--space-4);
    }

    /* Logo */
    .logo-baslik {
        font-size: var(--font-lg);
    }

    .logo-ikon {
        width: 44px;
        height: 44px;
        font-size: var(--font-lg);
    }

    /* Hero */
    .hero-baslik {
        font-size: var(--font-3xl);
    }

    .hero-aciklama {
        font-size: var(--font-base);
    }

    /* Bölüm Başlıkları */
    .bolum-ana-baslik {
        font-size: var(--font-2xl);
    }

    .bolum-aciklama {
        font-size: var(--font-base);
    }

    /* Kartlar */
    .hizmet-kart,
    .ozellik-kart,
    .yorum-kart {
        padding: var(--space-5);
    }

    .hizmet-ikon,
    .ozellik-ikon {
        width: 55px;
        height: 55px;
        font-size: var(--font-lg);
    }

    /* İstatistikler */
    .istatistik-sayi {
        font-size: var(--font-4xl);
    }

    /* Footer */
    .footer-ust {
        padding: var(--space-12) 0;
    }

    /* Galeri */
    .galeri-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
}

/* =============================================
   PRİNT STİLLERİ
   ============================================= */
@media print {

    .ust-bar,
    .ana-header,
    .site-footer,
    .whatsapp-floating,
    .yukari-git,
    .btn {
        display: none !important;
    }

    .hero {
        min-height: auto;
        padding: var(--space-8) 0;
    }

    .bolum {
        padding: var(--space-6) 0;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }

    a {
        text-decoration: underline;
    }
}

/* =============================================
   YÜKSEK KONTRAST MODU (Erişilebilirlik)
   ============================================= */
@media (prefers-contrast: high) {
    :root {
        --shadow-kart: 0 0 0 2px var(--baslik-renk);
        --shadow-kart-hover: 0 0 0 3px var(--ana-renk);
    }

    .btn-birincil {
        border: 2px solid var(--beyaz);
    }

    .form-kontrol {
        border-width: 3px;
    }
}

/* =============================================
   HAREKET AZALTMA (Erişilebilirlik)
   ============================================= */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* =============================================
   KOYU MOD DESTEĞİ (Opsiyonel)
   ============================================= */
@media (prefers-color-scheme: dark) {
    /* 
    Koyu mod için CSS değişkenlerini burada override edebilirsiniz.
    Şu an kapalı, açmak için aşağıdaki satırları aktif edin.
    */
    /*
    :root {
        --beyaz: #1E293B;
        --baslik-renk: #F8FAFC;
        --metin-renk: #CBD5E1;
        --metin-acik: #94A3B8;
        --arka-plan: #0F172A;
        --arka-plan-2: #1E293B;
        --cizgi-renk: #334155;
    }
    */
}