/* ============================================================
   MOBILE COMPACT LAYER — uygulama havası
   Tüm sayfalara en son yüklenir, sadece mobilde devreye girer.
   Tasarımı (masaüstü) ETKİLEMEZ.
   ============================================================ */

@media (max-width: 768px) {

  /* ---- Üst (hero) bölümler: header boşluğu korunur, kompakt ---- */
  .hero,
  .tech-hero,
  .contact-section,
  .seo-hero {
    padding-top: 92px !important;
    padding-bottom: 30px !important;
  }

  /* ---- İçerik bölümleri: dikey boşlukları sıkılaştır (aşağı uzamasın) ---- */
  section:not(.hero):not(.tech-hero):not(.contact-section):not(.seo-hero) {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* ---- Başlıklar ---- */
  h1 { font-size: 26px !important; line-height: 1.18 !important; margin-bottom: 12px !important; }
  h2, .section-title { font-size: 21px !important; line-height: 1.22 !important; margin-bottom: 14px !important; }
  h3 { font-size: 16px !important; }
  .hero h1, .tech-hero h1, .seo-hero h1, .hero-content h1 { font-size: 26px !important; }

  /* ---- Gövde metni ---- */
  p, li { font-size: 14px !important; line-height: 1.6 !important; }
  .hero p, .tech-hero p, .seo-hero p, .hero-content p { font-size: 14px !important; }
  .breadcrumb, .section-tag, .cta-badge { font-size: 12px !important; }

  /* ---- İçerik ikonları küçült (footer/sosyal hariç) ---- */
  .stat i, .why-grid i, .feature i, .feature-card i, .info-card i, .info-box i,
  .solution-card i, .solution-card .icon i, .gallery-card i, .cta-icon i,
  .round i, .icon i, .mission i {
    font-size: 22px !important;
  }
  /* Dairesel ikon kutuları */
  .round, .icon, .cta-icon, .solution-card .icon {
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important;
    min-width: 50px !important;
  }

  /* ---- Sayaç / istatistik rakamı ---- */
  .stat h3, .counter { font-size: 23px !important; }

  /* ---- Kart/kutu iç boşlukları kompakt ---- */
  .stat, .feature, .feature-card, .info-card, .info-box, .faq-item {
    padding: 16px !important;
  }
  .cta, .seo-cta, .cta-modern {
    padding: 22px 18px !important;
  }
  .solution-card .content, .project-card .content { padding: 14px !important; }

  /* ---- Görselli kart yükseklikleri ---- */
  .card { height: 210px !important; }
  .project-grid img, .image-box img { height: 160px !important; }

  /* ---- Grid boşlukları sıkılaştır ---- */
  .feature-grid, .why-grid, .solution-grid, .gallery-grid,
  .project-grid, .stats, .features, .mission {
    gap: 12px !important;
  }

  /* ---- Butonlar kompakt ---- */
  .btn, .btn-primary, .btn-secondary, .buttons a, .buttons button,
  .hero-cta a, .whatsapp-btn, .filter-btn, .filter-buttons button,
  .title button, .seo-cta a {
    padding: 11px 16px !important;
    font-size: 13px !important;
  }

  /* ============ FOOTER kompakt ============ */
  .footer { margin-top: 36px !important; padding-top: 28px !important; }
  .footer h4 { font-size: 13px !important; margin-bottom: 9px !important; letter-spacing: .5px !important; }
  .footer a, .footer p, .contact-info p, .footer-brand > p {
    font-size: 13px !important;
    margin-bottom: 7px !important;
  }
  .footer-logo img { height: 40px !important; }
  .footer-social { gap: 9px !important; margin-top: 10px !important; }
  .footer-social a { width: 34px !important; height: 34px !important; font-size: 13px !important; }
  .footer-grid { gap: 22px !important; }
  .copyright { font-size: 11px !important; margin-top: 18px !important; padding: 13px 0 !important; }

  /* Mobilde footer'ı sadeleştir: MENÜ (2), Hizmetlerimiz (3), Bülten (5) gizli.
     Kalan: marka+sosyal (1) + İletişim (4) → temiz uygulama footer'ı */
  .footer-grid > div:nth-child(2),
  .footer-grid > div:nth-child(3),
  .footer-grid > div:nth-child(5) { display: none !important; }

  /* Sabit alt aksiyon çubuğu için içeriğe alt boşluk */
  body { padding-bottom: 66px !important; }

  /* Kartlara dokunma (tap) efekti — native uygulama hissi */
  .stat, .feature, .feature-card, .info-card, .info-box, .solution-card,
  .gallery-card, .project-card, .card, .faq-item {
    transition: transform .12s ease !important;
  }
  .stat:active, .feature:active, .feature-card:active, .info-card:active,
  .info-box:active, .solution-card:active, .gallery-card:active,
  .project-card:active, .card:active, .faq-item:active {
    transform: scale(.98) !important;
  }
}

/* ============ SABİT ALT AKSİYON ÇUBUĞU (Ara / WhatsApp) ============ */
.mobile-actionbar { display: none; }

@media (max-width: 768px) {
  .mobile-actionbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1500;
    gap: 10px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(10px);
    box-shadow: 0 -4px 22px rgba(0, 0, 0, .14);
  }
  .mobile-actionbar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    transition: transform .12s ease;
  }
  .mobile-actionbar a:active { transform: scale(.95); }
  .mobile-actionbar .ab-call { background: #086df5; }
  .mobile-actionbar .ab-wa { background: #25d366; }
}

@media (max-width: 480px) {
  .hero, .tech-hero, .contact-section, .seo-hero { padding-top: 84px !important; }
  h1, .hero h1, .tech-hero h1, .seo-hero h1, .hero-content h1 { font-size: 23px !important; }
  h2, .section-title { font-size: 19px !important; }
  p, li { font-size: 13.5px !important; }
  .card { height: 190px !important; }
  .stat h3, .counter { font-size: 21px !important; }
  section:not(.hero):not(.tech-hero):not(.contact-section):not(.seo-hero) {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}

/* ============================================================
   v2 — DAHA KOMPAKT TILE DÜZENLERİ (kullanıcı geri bildirimi)
   Uzun tek-sütun bölümleri 2 sütunlu küçük tile'lara çevirir.
   Sadece mobil; masaüstü etkilenmez.
   ============================================================ */
@media (max-width: 768px) {

  /* 1) İstatistikler: 2x2 küçük kart */
  .stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 14px !important; margin-top: -36px !important; }
  .stat { padding: 14px 8px !important; gap: 6px !important; box-shadow: 0 6px 16px rgba(0,0,0,.06) !important; }
  .stat i { font-size: 20px !important; }
  .stat h3, .counter { font-size: 19px !important; }
  .stat p { font-size: 11.5px !important; line-height: 1.35 !important; }

  /* 4) AI güvenlik kartları: 2 sütun küçük tile */
  .ai-services .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .ai-services .card { height: 140px !important; border-radius: 12px !important; }

  /* 5) Projeler: 2 sütun */
  .project-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .project-grid > div { box-shadow: 0 8px 20px rgba(0,0,0,.07) !important; }
  .project-grid img { height: 108px !important; }
  .project-grid h4 { font-size: 14px !important; padding: 10px 10px 2px !important; }
  .project-grid p { font-size: 12px !important; padding: 0 10px 12px !important; }

  /* 6) Neden Biz: 2 sütun kompakt */
  .why-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .why-grid div { padding: 16px 10px !important; border-right: 1px solid #e1e8f1 !important; border-bottom: 1px solid #e1e8f1 !important; }
  .why-grid i { font-size: 22px !important; margin-bottom: 8px !important; }
  .why-grid h4 { font-size: 14px !important; margin-bottom: 4px !important; }
  .why-grid p { font-size: 12px !important; }

  /* 2) Vizyon/Misyon (.feature) daha kompakt */
  .feature { padding: 16px !important; }
  .feature h3, .feature h4 { font-size: 15px !important; margin-bottom: 6px !important; }
  .feature p { font-size: 13px !important; }
  .feature .round, .features .round, .round { width: 46px !important; height: 46px !important; min-width: 46px !important; }

  /* 3) CTA bloğu kompakt */
  .cta h2, .cta-modern h2, .seo-cta h2 { font-size: 18px !important; }
  .cta p, .cta-modern p, .seo-cta p { font-size: 13px !important; }
  .cta-badge, .section-tag { font-size: 11px !important; padding: 5px 12px !important; }

  /* 7) Teknoloji: çözüm kartları + galeri 2 sütun */
  .solution-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .solution-card { padding: 16px 12px !important; }
  .solution-card h3 { font-size: 14px !important; }
  .solution-card p { font-size: 12px !important; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .gallery-card { border-radius: 12px !important; }
  .gallery-card img { height: 118px !important; }
  .gallery-card h3 { font-size: 13px !important; }
  .filter-buttons { flex-wrap: wrap !important; gap: 8px !important; }
  .filter-btn { padding: 8px 14px !important; font-size: 12px !important; }
}

@media (max-width: 480px) {
  .ai-services .card { height: 118px !important; }
  .stat h3, .counter { font-size: 18px !important; }
  .project-grid img { height: 96px !important; }
}