/* =====================================================================
   Leges – Ön yüz responsive düzeltmeleri
   style.css'ten SONRA yüklenir. Sayfa içi <style> bloklarını ezebilmek
   için seçiciler "body" ile başlar (özgüllük artırma).
   Tasarım dili (renk, tipografi, kart yapısı) değişmez; sadece yerleşim.
   ===================================================================== */

/* ---------- 1. Genel güvenlik kuralları (tüm genişlikler) ---------- */
html { overflow-x: hidden; }
html, body { max-width: 100%; }
body { overflow-wrap: break-word; }

img, svg, video, iframe, canvas { max-width: 100%; }
img { height: auto; }
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands { max-width: none; }

/* Grid / flex çocukları içerik genişliğine takılıp taşmasın */
[class*="grid"] > *, .row > *, .d-flex > * { min-width: 0; }

/* E-posta, URL gibi uzun kelimeler satır kırsın */
a, code, pre, td, th, .contact-info p, .footer-link { overflow-wrap: anywhere; }
pre { white-space: pre-wrap; }

/* Tablolar dar ekranda kaydırılabilir olsun */
table { max-width: 100%; }

/* Bootstrap .row negatif margin + .container padding'i taşma yaratmasın */
body .row { margin-left: 0; margin-right: 0; }
body .row > * { padding-left: 12px; padding-right: 12px; }

/* ---------- 1b. Kaydırınca beliren içerik animasyonları kapalı: her şey anında görünür ---------- */
body .fade-in, body .lx-reveal, body .lh-reveal,
body .fade-in.visible, body .lx-reveal.visible, body .lh-reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* ---------- 2. Header ---------- */
.nav-container { gap: 0.75rem; }
.nav-buttons { flex-shrink: 0; }
.hamburger { flex-shrink: 0; }

@media (max-width: 768px) {
    .header { --header-h: 64px; }
    /* Menü header'ın altından başlar; header (z-index 1000) menünün üstünde kalır,
       böylece header yüksekliği değişse de arada boşluk oluşmaz */
    .nav-menu {
        top: 0;
        height: 100vh;
        height: 100dvh;
        padding: calc(var(--header-h) + 1.5rem) 1rem 3rem;
    }
    /* Logo ve butonlar açık menünün üstünde kalsın (hamburger zaten 1001) */
    .nav-container > .logo,
    .nav-container > .nav-buttons { position: relative; z-index: 1000; }
    body .nav-buttons {
        width: auto;
        max-width: none;
        gap: 0.45rem;
    }
}

@media (max-width: 480px) {
    .nav-container { padding: 0 0.875rem; gap: 0.5rem; }
    body header.header .logo,
    body header.header .logo .logo-img { height: 32px !important; max-width: 128px !important; }
    body .btn-login, body .btn-register {
        padding: 0.45rem 0.7rem;
        font-size: 0.8rem;
        border-radius: 8px;
    }
    body .profile-toggle { padding: 5px 8px; }
}

@media (max-width: 360px) {
    /* Çok dar ekran: giriş/kayıt butonları header'da kalır, sadece küçülür */
    .nav-container { padding: 0 0.6rem; gap: 0.35rem; }
    body header.header .logo,
    body header.header .logo .logo-img { height: 28px !important; max-width: 100px !important; }
    body .nav-buttons { gap: 0.3rem; }
    body .btn-login, body .btn-register { padding: 0.4rem 0.55rem; font-size: 0.74rem; letter-spacing: 0; }
    .hamburger span { width: 22px; }
}

/* ---------- 3. Sabit öğeler: çerez bandı + WhatsApp butonu çakışması ---------- */
@media (max-width: 640px) {
    body:has(.cookie-banner.show) .lg-wa-float { bottom: 118px; }
    .cookie-banner { width: calc(100vw - 24px); }
}

/* ---------- 4. Ortak sayfa başlığı (hero-mini) ---------- */
@media (max-width: 480px) {
    body .hero-mini .hero-title { font-size: 1.7rem; line-height: 1.2; padding: 0 0.25rem; }
    body .hero-mini .hero-subtitle { font-size: 0.95rem; padding-left: 0; padding-right: 0; }
    body .hero-stats { gap: 0.5rem; }
    body .stat-item { font-size: 0.78rem; padding: 6px 12px; }
}

/* ---------- 5. Mobilde iç içe binen boşlukları sadeleştir ---------- */
@media (max-width: 576px) {
    body .container { padding-left: 1rem; padding-right: 1rem; }

    /* Ara sarmalayıcılar: kendi yan boşluklarını bırakır (container zaten veriyor) */
    body .kvkk-section,
    body .cookie-section,
    body .privacy-content,
    body .contact-grid,
    body .welcome-grid,
    body .overview-section,
    body .features-grid,
    body .premium-card-wrapper.packages-grid,
    body .footer-content {
        padding-left: 0;
        padding-right: 0;
    }
    body .term-section,
    body .overview-card,
    body .contact-form-container,
    body .contact-info-card,
    body .quick-faq-card,
    body .login-form-container,
    body .register-form-container,
    body .reset-form-container {
        margin-left: 0;
        margin-right: 0;
    }

    /* Birinci seviye kartlar */
    body .kvkk-card,
    body .cookie-card,
    body .contact-form-container,
    body .contact-info-card,
    body .quick-faq-card,
    body .welcome-section,
    body .overview-card,
    body .term-section,
    body .privacy-section > .privacy-card,
    body .privacy-purpose-card,
    body .privacy-sharing-policy,
    body .privacy-final-note,
    body .cookie-management,
    body .security-main,
    body .sharing-policy,
    body .lx-heritage,
    body .lx-loop,
    body .lx-dcpaper,
    body .premium-plan-card,
    body .comparison-card,
    body .pricing-cta,
    body .welcome-cta,
    body .login-form-container,
    body .register-form-container,
    body .reset-form-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* İkinci seviye (kart içi) kutular */
    body .legal-notice,
    body .policy-item,
    body .security-feature,
    body .important-item,
    body .payment-important,
    body .cookie-analogy,
    body .option-card,
    body .legal-item,
    body .privacy-sharing-simple,
    body .form-consents,
    body .overview-item,
    body .lx-loop-item,
    body .comparison-item {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }

    /* İkon + metin yan yana duran kutular dar ekranda alt alta */
    body .cookie-analogy { flex-direction: column; gap: 0.75rem; }

    /* Bootstrap kolon boşluğu, kart zaten kenar boşluğu veriyor */
    body .login-section .row > [class*="col-"],
    body .reset-section .row > [class*="col-"] { padding-left: 0; padding-right: 0; }

    /* Form alanları her zaman tam genişlik */
    body .form-control, body .form-select, body textarea { max-width: 100%; }

    /* Başlıklar kelime taşırmasın */
    h1, h2, h3, h4 { overflow-wrap: anywhere; hyphens: manual; }
}

@media (max-width: 380px) {
    body .container { padding-left: 0.75rem; padding-right: 0.75rem; }
    body .section-title { font-size: 1.5rem; }
    body .hero-title { font-size: 1.65rem; }
}

/* ---------- 6. Dokunmatik cihaz: hover animasyonları zıplamasın ---------- */
@media (hover: none) and (pointer: coarse) {
    .service-card:hover, .feature-card:hover, .step-card:hover,
    .btn-primary-hero:hover, .btn-secondary-hero:hover, .btn-cta:hover { transform: none; }
}

/* ---------- 7. Tablet: Paketler karşılaştırma tek sütun ---------- */
@media (max-width: 968px) {
    body .comparison-grid { grid-template-columns: 1fr; }
}

/* ---------- 8. Giriş yapmış kullanıcı: profil menüsü ekrandan taşmasın ---------- */
@media (max-width: 768px) {
    body .profile-dropdown-menu { right: 0; left: auto; max-width: calc(100vw - 1.75rem); }
}