/* Kırılma noktaları: masaüstü 1024+, tablet 768-1023, mobil 767- */

/* --- Tablet ve altı (1023px ve altı) --- */
@media (max-width: 1023px) {
  .rakam-seridi { grid-template-columns: repeat(2, 1fr); }
  .rakam-seridi .rakam:nth-child(2) { padding-left: 28px; border-left: 1px solid var(--line); }
  .rakam-seridi .rakam:nth-child(odd) { padding-left: 0; border-left: none; }

  .kart-izgara,
  .kart-izgara.izgara-1, .kart-izgara.izgara-2, .kart-izgara.izgara-3, .kart-izgara.izgara-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .video-izgara { grid-template-columns: repeat(2, 1fr); }
  .referans-kutu-izgara { grid-template-columns: repeat(3, 1fr); }
  .proje-kutu-izgara { grid-template-columns: repeat(2, 1fr); }
  .yazar-kart-izgara { grid-template-columns: repeat(3, 1fr); }

  .footer-ust-izgara { grid-template-columns: 1.3fr 1fr; row-gap: 28px; }
  .mulakat-kartlari { grid-template-columns: repeat(2, 1fr); }
  .bilgi-notu-izgara { grid-template-columns: repeat(2, 1fr); }

  /* Sayfa bannerı: tabletten itibaren görsel üstte, metin altta (bkz.
     TALIMAT "Sayfa bannerı sığma kuralları"). */
  .sayfa-banner { grid-template-columns: 1fr; min-height: 0; }
  .sayfa-banner-gorsel { order: -1; aspect-ratio: 16 / 9; min-height: 0; }

  /* Sol sabit menü <1024px'te gizlenir, üç menü tipinde de tutarlı olan
     mevcut sağdan kayan panele (yan-menu-panel) dönülür (bkz. TALIMAT
     17.09.2026, "Sol sabit menü"). */
  body.menu-duzeni-sol .sol-menu { display: none; }
  body.menu-duzeni-sol .ust-bar-wrap { display: block; }
  body.menu-duzeni-sol > main,
  body.menu-duzeni-sol > .footer { margin-left: 0; }
  body.menu-duzeni-sol .ust-menu { display: none; }
  body.menu-duzeni-sol .hamburger { display: flex; }
  body.menu-duzeni-sol .icerik-ust-serit { display: none; }
  .sayfa-banner-metin { padding: 32px 28px; }
}

/* --- Mobil (767px ve altı) --- */
@media (max-width: 767px) {
  /* .container yan boşluğu artık base.css'teki clamp(24px, 4vw, 72px) ile
     akıcı — 767px altında zaten ~24px'e iniyor, ayrı bir kural gerekmiyor
     (bkz. TALIMAT 17.09.2026, "Ana sayfa ve genel yerleşim — geniş ekran"). */

  /* Banner illüstrasyonu: mobilde ışık taraması kapalı, çizilme ve
     noktaların belirmesi kalır (bkz. TALIMAT 18.09.2026, "Banner
     animasyonu"). */
  .scan { display: none; }

  /* Fotoğraflı banner'lar tablet kuralındaki gibi görsel üstte/tam
     genişlik kalır; illüstrasyonlu banner'larda metin kırpılmasın diye
     illüstrasyon sağda küçük kalır, alta düşmez (bkz. TALIMAT 18.09.2026,
     "Eski banner görsellerini kaldır", madde 7). */
  .sayfa-banner.sayfa-banner-illustrasyonlu {
    grid-template-columns: 1fr auto; align-items: center; min-height: 0;
  }
  .sayfa-banner.sayfa-banner-illustrasyonlu .sayfa-banner-metin { padding: 22px 16px 22px 24px; }
  .sayfa-banner.sayfa-banner-illustrasyonlu .sayfa-banner-gorsel {
    order: 0; width: 92px; height: 92px; aspect-ratio: 1; min-height: 0;
    margin-right: 16px; flex: none;
  }

  /* Üst menü: hamburger'e dönüşür, tam ekran panel açılır. */
  .ust-menu { display: none; }
  .ust-bar .teklif-btn { display: none; }
  .hamburger { display: flex; }

  /* Sabit üst bar mobilde ≤60px olsun (Ersin talimatı, 16.09.2026):
     hamburger 44px dokunma hedefi + 8px dikey boşluk = 60px. Kaydırılmış
     halde daha da sıkışsın (bkz. .kaydirilmis, components.css). Seçici
     aynı özgüllükte tutuldu ki bu dosya sonradan yüklendiği için kazansın. */
  .ust-bar { padding: 8px 0; }
  .ust-bar-wrap.kaydirilmis .ust-bar { padding: 4px 0; }

  .hero { padding-block: 40px 36px; }
  .hero h1 { font-size: 34px; }
  .hero .aciklama { font-size: 16px; }
  .hero .butonlar .btn { flex: 1 1 auto; justify-content: center; }

  .hero-slayt { grid-template-columns: 1fr; padding: 32px 24px 88px; min-height: 0; }
  .hero-slayt-baslik { font-size: 30px; }
  .hero-slayt-gorsel { order: -1; aspect-ratio: 16 / 9; }
  .hero-slider-kontrol { left: 24px; right: 24px; }

  .rakam-seridi { grid-template-columns: repeat(2, 1fr); padding: 24px 0; }
  .rakam-seridi .deger { font-size: 30px; }

  .kart-izgara,
  .kart-izgara.izgara-1, .kart-izgara.izgara-2, .kart-izgara.izgara-3, .kart-izgara.izgara-4 {
    grid-template-columns: 1fr;
  }
  .video-izgara { grid-template-columns: 1fr; }
  .video-karti { flex-basis: 240px; }
  .referans-kutu-izgara { grid-template-columns: repeat(2, 1fr); }
  .proje-kutu-izgara { grid-template-columns: 1fr; }
  .yazar-kart-izgara { grid-template-columns: repeat(2, 1fr); }

  .iki-sutun { grid-template-columns: 1fr; gap: 20px; }
  .iki-sutun .gorsel-cerceve { order: 2; }
  .iki-sutun .metin { order: 1; }

  .one-cikan-kart { grid-template-columns: 1fr; }
  .one-cikan-kart .gorsel-cerceve { aspect-ratio: 16 / 9; }

  .kayit-govde-sutunlu { grid-template-columns: minmax(0, 1fr); }

  .surec-adimlari { grid-template-columns: 1fr 1fr; }
  .galeri-izgara { grid-template-columns: 1fr 1fr; }
  .misyon-vizyon-izgara { grid-template-columns: 1fr; }

  .kayit-govde .sayfa-icerik ul,
  .kayit-govde .sayfa-icerik ol { columns: 1; }

  .ilan-basvur-btn { margin-left: 0; width: 100%; justify-content: center; order: 3; }
  .ilan-meta { order: 2; }

  .mulakat-kartlari { grid-template-columns: 1fr; }
  .bilgi-notu-izgara { grid-template-columns: 1fr; }

  .dokuman-satir {
    grid-template-columns: 36px 1fr; grid-template-areas: "ikon ad" ". meta" ". indir";
    row-gap: 6px;
  }
  .dokuman-satir .dokuman-ikon { grid-area: ikon; width: 36px; height: 36px; }
  .dokuman-satir .dokuman-ad { grid-area: ad; }
  .dokuman-satir .dokuman-boyut { grid-area: meta; }
  .dokuman-satir .dokuman-tarih { display: none; }
  .dokuman-satir .btn { grid-area: indir; justify-self: start; }
  .deneyim-satir { grid-template-columns: 1fr; gap: 4px; }
  .ekip-baglantilar { margin-left: 0; width: 100%; }
  .ekip-baglantilar .btn { flex: 1 1 auto; justify-content: center; }

  .gezinme-yolu { font-size: 12px; }
  .alt-menu { position: static; transform: none; box-shadow: none; border: none; padding: 0 0 0 16px; }

  .bolum { padding-block: 40px; }
  .bolum-baslik h2 { font-size: 26px; }

  .sayfa-baslik-h1 { font-size: 28px; }

  .footer { padding: 40px 0 24px; }
  .footer-ust-izgara { grid-template-columns: 1fr; gap: 26px; }
  .footer-alt { flex-direction: column; align-items: flex-start; }

  .iletisim-grid { grid-template-columns: 1fr; gap: 28px; }
}