/* ==========================================================================
 * GENİŞ EKRAN DÜZENİ
 * ==========================================================================
 *
 * NEDEN VAR
 * Projedeki 45 medya sorgusunun tamamı `max-width` idi, `min-width` hiç
 * yoktu. Yani düzen yalnızca küçülebiliyordu, hiç büyüyemiyordu; temel
 * (telefon ölçüsündeki) düzen 1920 piksellik ekranda da aynen geçerliydi.
 * Bilgisayarda telefon gibi görünmesinin sebebi buydu — cihaz yanlış
 * algılanmıyordu, geniş ekrana ÖZEL bir kural hiç yazılmamıştı.
 *
 * TASARIM KARARLARI
 *
 * 1. CİHAZ TAHMİNİ YOK. Kullanıcı ajanına (user-agent) bakılmıyor. O dize
 *    yalan söyler: iPad kendini Mac olarak tanıtır, Windows tabletler
 *    masaüstü görünür, kullanıcı pencereyi yarıya küçültünce "masaüstü"
 *    olmaya devam eder. Burada tek ölçüt tarayıcının bildirdiği GERÇEK
 *    kullanılabilir genişlik.
 *
 * 2. MEVCUT KURALLARA DOKUNULMUYOR. Bu dosyadaki her şey `min-width`
 *    içinde. Telefon ve tablet görünümü birebir aynı kalır; bu dosya o
 *    genişliklerde hiç çalışmaz. Beğenilmezse index.html'den tek satır
 *    silmek yeter.
 *
 * 3. SABİT KIRILIMA MÜMKÜN OLDUĞUNCA GÜVENİLMİYOR. Nerede mümkünse
 *    auto-fit + minmax + clamp kullanıldı; bunlar bir eşikte zıplamak
 *    yerine genişlikle birlikte SÜREKLİ uyum sağlar. Sabit kırılım
 *    yalnızca sütun sayısının gerçekten değişmesi gereken yerde.
 *
 * 4. EŞİK TEK YERDE. 1024px değeri src/mesaj-serit.js içindeki
 *    GENIS_EKRAN_ESIGI ile AYNI olmak zorunda. İkisi ayrışırsa mesajlar
 *    bazı genişliklerde iki sütun çizilip tek sütun stili alır.
 *
 * Bağlı belge: .ai/GENIS_EKRAN_PLANI.md
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * SÜREKLİ UYUM — her genişlikte geçerli, kırılım gerektirmez
 * -------------------------------------------------------------------------- */

/* Kategori kartları: 220px'te sabitlenmişti, geniş ekranda aradaki boşluk
 * büyüyordu. Artık kart genişliği ekranla birlikte 220-260px arasında
 * nefes alıyor ve ızgara ortalanıyor. */
body.dashboard-category-page #homeScreen .category-grid {
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 18vw, 260px), 1fr));
  justify-content: center;
}

/* --------------------------------------------------------------------------
 * GENİŞ EKRAN (>= 1024px)
 * -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

  /* --- Ana sayfa -------------------------------------------------------- */

  /* İçerik çok geniş monitörde uçtan uca yayılmasın; okunabilirlik için
   * üst sınır ve ortalama. Üst çubuk bilerek hariç: o tam genişlik doğru. */
  body.dashboard-category-page #homeScreen .categories-panel {
    max-width: 1400px;
    margin-inline: auto;
    width: 100%;
  }

  /* --- Bölüm sayfaları (Ödevler / Mesajlar / Raporlar / Soru Setleri) ---- */

  body.bolum-sayfasi .community-modal__body {
    padding-inline: clamp(16px, 4vw, 48px);
  }

  /* Bölüm içeriği de ortalanır. Mesajlar bunun dışında: iki sütunlu
   * düzende yatay alanın tamamını kullanması gerekiyor. */
  body.bolum-sayfasi .community-modal__body > * {
    max-width: 1400px;
    margin-inline: auto;
    width: 100%;
  }

  body.bolum-sayfasi .community-modal__body > .neo-mesaj-iki-sutun {
    max-width: 1600px;
  }

  /* --- Liste kartları --------------------------------------------------- */

  /* Rapor, ödev ve mesaj kartları tek sütunda alt alta diziliyordu; geniş
   * ekranda satır satır uzayıp yanları boş bırakıyordu. */
  body.bolum-sayfasi .student-profile-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
    align-items: start;
  }

  /* Sohbet listesi bu ızgaranın DIŞINDA: o zaten kendi sütununda ve
   * WhatsApp gibi alt alta olmalı. */
  body.bolum-sayfasi .neo-sohbet-liste {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* --- Mesajlar: iki sütun ---------------------------------------------- */

  /* Sarmalayıcıyı JS oluşturuyor (bkz. mesaj-serit.js / genisEkranMi).
   * CSS burada yalnızca yerleşimi tarif ediyor; hangi genişlikte
   * oluşacağına karar veren taraf matchMedia. */
  .neo-mesaj-iki-sutun {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    height: 100%;
    min-height: 0;
  }

  .neo-mesaj-iki-sutun__liste {
    min-width: 0;
    overflow-y: auto;
    max-height: calc(100dvh - 140px);
    padding-right: 4px;
  }

  .neo-mesaj-iki-sutun__serit {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* İki sütunlu düzende liste hep solda duruyor; "← Geri" gereksiz. */
  .neo-mesaj-iki-sutun .neo-serit__ust .mini-button {
    display: none;
  }

  /* Balon 560px'te duruyordu; geniş sütunda biraz daha rahat. */
  .neo-mesaj-iki-sutun .neo-balon {
    max-width: min(72%, 640px);
  }

  /* --- Soru setleri ----------------------------------------------------- */

  body.bolum-sayfasi .neo-question-sets__community-list {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

/* --------------------------------------------------------------------------
 * ÇOK GENİŞ EKRAN (>= 1600px)
 * Yalnızca kart alt sınırları büyür; yeni bir düzen kurulmuyor.
 * -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  body.bolum-sayfasi .student-profile-list {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  }

  .neo-mesaj-iki-sutun {
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  }
}