/* ============================================================
   GONCA KILINÇ — Duyarlı (Responsive) Stil Dosyası
   Tüm breakpoint'ler
   ============================================================ */

/* ── Tablet (1024px ve altı) ── */
@media (max-width: 1024px) {
    .hero {
        padding: 110px 0 50px;
    }

    .hero-gorsel-kutu {
        max-width: 600px;
    }

    .sorun-grid {
        grid-template-columns: 1fr;
    }

    .cozum-grid {
        grid-template-columns: 1fr;
    }

    .takim-grid {
        grid-template-columns: 1fr;
    }

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

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

/* ── Tablet küçük (768px ve altı) ── */
@media (max-width: 768px) {
    .navbar-menu {
        display: none;
    }

    .navbar-sag {
        display: none;
    }

    .navbar-icerik {
        flex-wrap: nowrap;
    }

    .navbar-logo {
        order: 1;
    }

    .hamburger {
        display: flex;
        order: 3;
    }

    .canli-sayac {
        order: 2;
        margin-left: auto;
        margin-right: 12px;
        padding: 4px 10px;
        gap: 6px;
    }

    .canli-sayac-metin {
        font-size: 10px;
    }

    .canli-sayac-metin strong {
        font-size: 11px;
    }

    .canli-sayac-nokta {
        width: 6px;
        height: 6px;
    }

    .hero-baslik {
        font-size: clamp(26px, 6vw, 40px);
    }

    .hero-altbaslik {
        font-size: 14px;
    }

    .hero-gorsel-kutu img {
        height: 280px;
    }

    .hero-gorsel-overlay {
        gap: 10px;
    }

    .hero-play-btn {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }

    .hero-play-metin strong {
        font-size: 14px;
    }

    .hero-play-metin span {
        font-size: 12px;
    }

    .hero-alt-bilgi {
        flex-direction: column;
        gap: 8px;
    }

    .hero-alt-bilgi .ayirici {
        display: none;
    }

    .sorun-grid {
        grid-template-columns: 1fr;
    }

    .bolum-baslik {
        font-size: clamp(24px, 5vw, 36px);
    }

    .timeline::before {
        left: 26px;
    }

    .timeline-ikon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 16px;
        left: 7px;
    }

    .timeline-numara {
        font-size: 32px;
    }

    .istatistik-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .istatistik-kutu {
        padding: 28px 16px;
    }

    .istatistik-kutu .sayi {
        font-size: 36px;
    }

    .son-cta-kutu {
        padding: 40px 24px;
    }

    .son-cta-butonlar {
        flex-direction: column;
        align-items: center;
    }

    .son-cta-butonlar .btn-birincil,
    .son-cta-butonlar .btn-ikincil {
        width: 100%;
        justify-content: center;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-alt {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .ucretsiz-kutu {
        padding: 28px 20px;
    }

    .ucretsiz-kutu .fiyat {
        font-size: 36px;
    }

    .cozum-kutu {
        padding: 28px 20px;
    }

    section {
        padding: 60px 0;
    }

    .sorunlar,
    .cozum,
    .adimlar,
    .istatistikler,
    .yorumlar-bolum,
    .takim,
    .sss,
    .son-cta {
        padding: 60px 0;
    }
}

/* ── Mobil (480px ve altı) ── */
@media (max-width: 480px) {
    .kapsayici {
        padding: 0 16px;
    }

    .hero {
        padding: 96px 0 36px;
    }

    .hero-baslik {
        font-size: 24px;
    }

    .hero-altbaslik {
        font-size: 13px;
        margin-bottom: 32px;
    }

    .hero-gorsel-kutu img {
        height: 200px;
    }

    .hero-play-btn {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .hero-profil-avatar {
        width: 44px;
        height: 44px;
    }

    .hero-profil-bilgi strong {
        font-size: 14px;
    }

    .hero-profil-bilgi span {
        font-size: 12px;
    }

    .hero-alt-bilgi {
        font-size: 12px;
    }

    .sorun-kart {
        padding: 20px;
    }

    .btn-birincil {
        padding: 14px 28px;
        font-size: 14px;
    }

    .btn-ikincil {
        padding: 12px 24px;
        font-size: 14px;
    }

    .istatistik-grid {
        grid-template-columns: 1fr 1fr;
    }

    .istatistik-kutu .sayi {
        font-size: 32px;
    }

    .timeline {
        padding-left: 0;
    }

    .timeline-item {
        gap: 16px;
    }

    .timeline-icerik {
        padding: 18px;
    }

    .sss-soru {
        padding: 16px 18px;
        font-size: 14px;
    }

    .sss-cevap-icerik {
        padding: 0 18px 16px;
        font-size: 13px;
    }

    .yorum-kart {
        padding: 20px;
    }

    .takim-ozellik {
        font-size: 14px;
    }

    .son-cta-kutu {
        padding: 32px 16px;
    }

    .footer-alt-linkler {
        flex-direction: column;
        gap: 8px;
    }

    .guven-rozetleri {
        flex-direction: column;
        gap: 8px;
    }

    .basari-bar {
        padding: 20px;
    }

    .bolum-baslik {
        font-size: 24px;
    }

    .bolum-aciklama {
        font-size: 14px;
        line-height: 1.7;
    }

    .yorum-metin {
        font-size: 14px;
        line-height: 1.7;
    }

    .cozum-ozellik {
        padding: 16px 18px;
    }

    .navbar-logo {
        font-size: 15px;
    }

    .navbar-logo .logo-ikon {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .yukari-btn {
        bottom: 20px;
        right: 20px;
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

/* ── Büyük Ekranlar (1400px ve üstü) ── */
@media (min-width: 1400px) {
    .kapsayici {
        max-width: 1320px;
    }
}