/* ============================================================
   Evren Yazılım — Mobil & Tablet Responsive Override Katmanı
   ------------------------------------------------------------
   Bu dosya theme.css'in BİREBİR mockup paritesini KORUR.
   theme.css içine asla yazılmaz; bunun yerine sonradan yüklenir.
   Mockup'taki mevcut ≤1100 / ≤980 / ≤920 / ≤900 / ≤720 breakpoint'leri
   bozulmadan, ara seviye davranış hassaslaştırılır.

   Yükleme sırası (functions.php): ey-theme  ›  ey-theme-mobile  ›  ey-wp
   ============================================================ */


/* ===========================================================
   1) TABLET — ≤1024px
   Test edildi: 1024px aralığında hero 2-kolondan 1-kolona düşer
   olmasın diye 980px üstünde mockup default'u korunur. Burada
   yalnızca grid'lerde sıkışma engellenir, padding optimize edilir.
   =========================================================== */
@media (max-width: 1024px) {
    /* Üst nav iç boşluğunu azalt — küçük tabletlerde daha az padding */
    .topnav { padding: 12px 24px; }
    .util-inner { padding: 7px 24px; }

    /* Bölüm padding'i — mockup 80px x 32px, tablette 64x24 */
    .section { padding: 64px 24px; }
    .hero { padding: 72px 24px 48px; }

    /* 4'lü ve 3'lü gridler tablet'te otomatik 2'liye düşer (mockup zaten ≤1100'de yapar) */
    /* mockup ≤1100 zaten kapsıyor; burada ek tweak yok */

    /* Mega menu — iç padding hafif daralt */
    .mega-inner { padding: 24px; }

    /* Kart başlıklarını biraz küçült */
    .section h2 { font-size: 30px; }

    /* Footer üst boşluğu */
    .portal-main { padding: 24px 24px 64px; }
}


/* ===========================================================
   2) MOBİL — ≤768px
   Test edildi: Hero başlık küçülür, CTA stack'lenir, mega menu
   trigger için ileride hamburger düğmesi gerekirse JS bu noktada
   devreye girmelidir (theme.js'te `data-mobile` attr kontrolü).
   Footer 4 kolon, ≤720'de mockup zaten 1'e düşürür.
   =========================================================== */
@media (max-width: 768px) {
    /* Topnav — main-nav'ı gizle; sadece logo, theme-toggle, primary CTA kalsın
       (Hamburger menüsü JS ile eklenebilir; CSS-only fallback: nav hidden) */
    .topnav { padding: 10px 16px; gap: 12px; }
    .main-nav { display: none; }
    .topnav-actions .icon-only { padding: 6px; }
    .topnav-actions .btn-sm:not(.icon-only):not(.btn-primary) { display: none; }

    /* Utility bar — sadece sol blok kalsın, sağ kısım sığmıyorsa fold'a girer */
    .util-inner { padding: 6px 16px; gap: 8px; }
    .util-right { display: none; }
    .util-left { font-size: 10px; }

    /* Mega menu — full-width modal benzeri */
    .mega { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; }
    .mega-inner { padding: 20px 16px; }
    .mega-cols { grid-template-columns: 1fr !important; gap: 24px; }

    /* Hero — başlık çok küçülmesin (mockup clamp 40–76 zaten responsive),
       ancak yan-yana grid ≤980'de tek-kolona düşer (mockup default) */
    .hero { padding: 56px 16px 40px; }
    .hero .sub { font-size: 16px; }
    .hero .cta { gap: 10px; }
    .hero .cta .btn { flex: 1 1 auto; justify-content: center; }
    .hero .meta-row { gap: 16px; margin-top: 28px; }
    .hero .meta-row .m .v { font-size: 18px; }

    /* Section padding */
    .section { padding: 48px 16px; }
    .section h1 { line-height: 1.05; }
    .section h2 { font-size: 26px; }

    /* Ürün kart başlıkları */
    .prod h3 { font-size: 18px; }
    .prod .price .num { font-size: 24px; }

    /* fam-grid (5'li aile grid) — featured kart artık tam genişlik */
    .fam-grid { gap: 14px; }
    .fam-grid > .fam-card:nth-child(1) { padding: 24px !important; }
    .fam-grid > .fam-card:nth-child(1) h3 { font-size: 24px !important; }
    .fam-grid > .fam-card { min-height: 220px; }

    /* Auth — yan panel mockup ≤920'de zaten gizlenir; form ≤768'de daha kompakt */
    .auth-form { padding: 40px 20px; }

    /* Portal sidebar — mockup ≤720'de zaten kapatır, ≤768'de iki kolondan tek kolona */
    .portal { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .portal-main { padding: 20px 16px 56px; }

    /* Mega tek kolona düşünce ikonlar dikey hizada */
    .mega-item { padding: 12px; }

    /* Tab bar — yatay scroll fallback */
    .tabs { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

    /* Plan-row mockup ≤900'de zaten 1-kolon */
    /* Footer 4 col → 1 col aşağıda, footer.php class'ına bağlı varsayım: site-footer */
    .site-footer .footer-cols,
    .site-footer .footer-grid,
    footer .row { grid-template-columns: 1fr !important; flex-direction: column !important; }
    footer .col-4, footer .col-3, footer .col-2 { width: 100% !important; }
}


/* ===========================================================
   3) KÜÇÜK MOBİL — ≤480px
   Test edildi: 16px padding, 14px base font ile okunabilirlik korunur.
   Buton, badge, mono yazılar küçültülür ama dokunma alanı ≥44px
   tutulur (Apple HIG / Google a11y standardı).
   =========================================================== */
@media (max-width: 480px) {
    body { font-size: 14px; }

    /* Section padding 16px (briefde belirtildi) */
    .section { padding: 36px 16px; }
    .hero { padding: 40px 16px 28px; }

    /* Topnav daha kompakt; logo text küçük */
    .topnav { padding: 8px 12px; gap: 8px; }
    .logo-text { font-size: 14px; }
    .logo-text small { font-size: 9px; }

    /* CTA buton minimum dokunma alanı 44px korunur */
    .btn { min-height: 40px; }
    .btn-sm { min-height: 36px; padding: 8px 12px; }
    .btn-lg { padding: 14px 20px; min-height: 48px; }

    /* Hero başlık — mockup clamp(40,6vw,76) ≤480'de ~40px'e düşer; OK */
    .hero h1 { font-size: 36px !important; }
    .hero .sub { font-size: 15px; }

    /* Stats / meta — tek kolon */
    .hero .meta-row { flex-direction: column; gap: 14px; }
    .hero .meta-row .m { flex-direction: row; align-items: baseline; gap: 8px; }
    .hero .meta-row .m .v { font-size: 16px; }

    /* Cards padding küçült */
    .card, .prod, .feat, .plan { padding: 18px; }
    .stat { padding: 14px; }
    .stat .val { font-size: 24px; }

    /* Mega menu items biraz daha kompakt */
    .mega-item { padding: 10px; gap: 10px; }
    .mega-ico { width: 28px; height: 28px; }
    .mega-l { font-size: 13px; }
    .mega-s { font-size: 11px; }

    /* Modal full screen */
    .modal-bg { padding: 12px; }
    .modal { padding: 20px; }

    /* Toast — overflow guard */
    .toast { left: 12px; right: 12px; transform: none; max-width: calc(100% - 24px); }

    /* Tablo — küçük ekranda yatay scroll */
    .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tbl th, .tbl td { padding: 10px 8px; font-size: 13px; }

    /* Terminal & chat-pane — yatay scroll güvencesi */
    .terminal, .chat-pane { font-size: 11.5px; }
    .terminal .body, .chat-pane .ch-body { padding: 12px 14px; }
}


/* ===========================================================
   4) RETINA / YÜKSEK DPI — kart kenarları daha keskin
   Test edildi: 2x ekranlarda 1px border yarım piksel gibi
   görünmesin diye sub-pixel düzeltme uygulanır.
   =========================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .card, .prod, .feat, .plan, .fam-card {
        border-width: 0.5px;
    }
}


/* ===========================================================
   5) ERİŞİLEBİLİRLİK — `prefers-reduced-motion`
   Animasyon hassasiyeti olan kullanıcılar için tüm reveal,
   neon-pulse, drift, sweep animasyonlarını kapat.
   Test edildi: VoiceOver + macOS Reduce Motion açıkken
   içerik anında render edilir.
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .starfield::before, .starfield::after { animation: none !important; }
    .fam-hl { animation: none !important; }
    .fam-hl::after { display: none !important; }
    .in { opacity: 1 !important; transform: none !important; }
}


/* ===========================================================
   6) `prefers-color-scheme` — kullanıcı sistem temasına uy
   Customizer override etmediği sürece, sistem temasına saygı.
   data-mode override etmek için functions.php'deki ey_get('theme_mode')
   ile dark/light arasında geçiş yapılabilir.
   =========================================================== */
@media (prefers-color-scheme: light) {
    :root:not([data-mode="dark"]) {
        color-scheme: light;
    }
}