/* Tanasoft — ortak responsive katman.
   Sayfa içi stiller inline olduğu için kırılım kuralları !important ile geçersiz kılar. */

html, body { overflow-x: hidden; }
img, video, svg { max-width: 100%; }

/* Grid öğelerinin varsayılan `min-width: auto` değeri, içerideki geniş
   bileşenlerin (image-slot vb.) kolonu kendi doğal genişliğine zorlamasına
   ve tek kolona inildiğinde taşmaya yol açıyor. */
.g-hero > *, .g-split > *, .g-side > *, .g-2 > *, .g-3 > *,
.g-4 > *, .g-stats > *, .g-form2 > *, .g-footer > * { min-width: 0; }

h1, h2, h3, p, a, li, td { overflow-wrap: break-word; }

/* ---------- 1024px: dar masaüstü / yatay tablet ---------- */
@media (max-width: 1024px) {
  .g-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .g-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .g-footer { grid-template-columns: repeat(3, 1fr) !important; }
  .f-brand { grid-column: 1 / -1 !important; }
  .sec { padding-top: 72px !important; padding-bottom: 72px !important; }
}

/* ---------- 900px: dikey tablet — iki kolonlu düzenler tek kolona iner ---------- */
@media (max-width: 900px) {
  .g-hero,
  .g-split,
  .g-side { grid-template-columns: 1fr !important; }

  .g-hero { gap: 40px !important; }
  .g-split { gap: 36px !important; }
  .g-side { gap: 32px !important; }

  /* Yan sütun (sticky içindekiler menüsü vb.) mobilde akışa girer */
  .side-rail { position: static !important; max-width: none !important; }

  /* Hero videosunun kaynağında yanlarda siyah bant var; oran ve zoom birlikte
     ayarlanmazsa dar ekranda kırpma azalır ve bantlar görünür hale gelir. */
  .hero-media { height: auto !important; aspect-ratio: 1.45 !important;
                width: 100% !important; max-width: 520px !important; margin: 0 auto !important; }
  .hero-media video { transform: scale(1.55) !important; }

  .h-hero { font-size: 34px !important; line-height: 1.18 !important; }
  .h-sec { font-size: 26px !important; }
  .p-lead { font-size: 16px !important; }

  .sec { padding-top: 64px !important; padding-bottom: 64px !important; }
}

/* ---------- 640px: telefon ---------- */
@media (max-width: 640px) {
  .g-2,
  .g-3,
  .g-4,
  .g-form2 { grid-template-columns: 1fr !important; }

  .g-footer { grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; }

  /* İstatistik bandı telefonda 2'li kalır, tek kolon çok uzun oluyor */
  .g-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; }
  .g-stats .stat-num { font-size: 32px !important; }

  .sec { padding-top: 52px !important; padding-bottom: 52px !important;
         padding-left: 20px !important; padding-right: 20px !important; }

  .h-hero { font-size: 29px !important; }
  .h-sec { font-size: 23px !important; }

  /* Kart iç boşlukları telefonda daralır */
  .card-pad { padding: 22px !important; }

  /* Yan yana duran buton grupları tam genişlik olur */
  .btn-row { flex-direction: column !important; align-items: stretch !important; }
  .btn-row > a, .btn-row > button { text-align: center !important; }

  /* Başlık + "tümünü gör" satırı alt alta */
  .row-split { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }

  /* Yatay kaydırılabilir tablo/şerit */
  .scroll-x { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

/* ---------- Ürün arayüzü maketleri (tana-bank / tana-hub hero) ----------
   Maket, gerçek bir uygulama ekranını taklit ettiği için dar ekranda
   kolonları sıkıştırmak yerine daha az kolon gösterilir. */
@media (max-width: 900px) {
  .mock-nav { display: none !important; }
  .mock-shell { grid-template-columns: 1fr !important; }
  .mock-board > *:nth-child(3) { display: none !important; }
  .mock-board { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 420px) {
  .mock-kpi > *:nth-child(3) { display: none !important; }
  .mock-kpi { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Mobil menü (site-header) ---------- */
.nav-toggle { display: none; }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex !important; }
  .hdr-desktop-nav { display: none !important; }
  .hdr-desktop-cta { display: none !important; }
}

@media (min-width: 961px) {
  .hdr-mobile-panel { display: none !important; }
}