/* ============================================================
   responsive.css — v1
   Kütüphane Takip — Merkezi Responsive Kurallar
   Breakpoints: 768px (tablet) | 1024px (desktop) | 1400px (wide)
   Mobil görünüm (<768px) bu dosyada tanımlı değil;
   her HTML/JS dosyasındaki temel CSS'te korunur.
   ============================================================ */


/* ===== INDEX ===================================================
   Ana ekran: header, grid butonlar, hızlı ekle / liste butonları
   ============================================================ */

@media (min-width: 768px) {
  /* index.html body */
  body { padding: 20px; }

  /* Ana içerik alanı */
  .app {
    max-width: 640px;
    margin: 0 auto;
  }

  /* Başlık */
  .header {
    font-size: 24px;
    padding: 16px 20px;
  }

  /* Ayarlar dişli butonu */
  .gearBtn {
    width: 54px;
    min-width: 54px;
    height: 54px;
    font-size: 26px;
  }

  /* 2×2 grid */
  .grid { gap: 10px; }

  .menuBtn  { font-size: 18px; border-radius: 18px; }
  .icon     { font-size: 64px; margin-bottom: 6px; }

  /* Alt satır butonları */
  .hizliBtn { font-size: 20px; padding: 18px; }
  .listBtn  { font-size: 22px; padding: 18px; }

  .row-buttons { gap: 10px; }
  .row-buttons .hizliBtn,
  .row-buttons .listBtn  { font-size: 17px; padding: 16px 10px; }

  #formAlani { margin-top: 16px; }
}

@media (min-width: 1024px) {
  .app     { max-width: 720px; }
  .header  { font-size: 22px; }
  .menuBtn { font-size: 16px; }
  .icon    { font-size: 56px; }
  .grid    { gap: 12px; }
}

@media (min-width: 1400px) {
  .app { max-width: 800px; }
}


/* ===== LISTE ===================================================
   Kitap listesi: grid kart düzeni, topbar, A-Z bar, kamera alanı
   ============================================================ */

@media (min-width: 768px) {
  /* liste.html içerik alanı — sağ kenar: A-Z bar (28px) + boşluk */
  .list-app {
    padding: 132px 44px 32px 20px;
  }

  /* Kitap kartları — iki sütun grid */
  .list {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 14px;
  }

  /* Kart kompakt */
  .card    { padding: 14px; border-radius: 14px; }
  .title   { font-size: 18px; }
  .line    { font-size: 14px; }
  .btn     { padding: 10px 6px; font-size: 13px; }

  /* Kamera alanı */
  #reader  { max-width: 520px; margin: 0 auto; }
}

@media (min-width: 1024px) {
  .list-app {
    max-width: 1200px;
    margin: 0 auto;
    /* Topbar 56px + Arama 56px = 112px; sağda A-Z bar yok — desktop'ta gizlenir */
    padding-right: 20px;
  }

  .list {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  }

  .title { font-size: 17px; }
  .line  { font-size: 13px; }

  /* Desktop'ta A-Z bar gizle (yeterli fare/klavye var) */
  #azBar { display: none; }
}

@media (min-width: 1400px) {
  .list-app { max-width: 1400px; }

  .list {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  }
}


/* ===== AYARLAR =================================================
   Ayarlar sayfası: form elemanları, başlık, kaydet/yedek butonları
   ============================================================ */

@media (min-width: 768px) {
  .ayarlar-app { max-width: 720px; }

  .ayarlar-header {
    font-size: 24px;
    padding: 16px;
  }

  .ayarlar-homeBtn button {
    font-size: 18px;
    padding: 14px;
  }

  .ayarlar-title  { font-size: 24px; margin-bottom: 14px; }
  .ayarlar-label  { font-size: 16px; margin: 12px 0 6px; }

  .ayarlar-input,
  .ayarlar-select { padding: 12px 14px; font-size: 15px; }

  .ayarlar-saveBtn  { font-size: 18px; padding: 14px; margin-top: 14px; }
  .ayarlar-yedekBtn { font-size: 18px; padding: 14px; }
}

@media (min-width: 1024px) {
  .ayarlar-app {
    max-width: 680px;
    margin: 0 auto;
    padding: 32px 0;
  }

  .ayarlar-title  { font-size: 22px; }
  .ayarlar-label  { font-size: 15px; }

  .ayarlar-input,
  .ayarlar-select { font-size: 14px; padding: 10px 14px; }

  .ayarlar-saveBtn,
  .ayarlar-yedekBtn { font-size: 16px; padding: 12px; }
}


/* ===== EKLE ====================================================
   Kitap ekle formu (ekle.js inline HTML içinde render edilir)
   Sınıf adları: formCard, formTitle, actionBtn, formLabel,
                 formInput, formTextarea, #reader, kitapBaslik, kitapSatir
   ============================================================ */

@media (min-width: 768px) {
  .formCard {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px;
  }

  .formTitle {
    font-size: 24px;
    margin-bottom: 14px;
  }

  .actionBtn {
    font-size: 18px;
    padding: 14px;
    margin-top: 14px;
    border-radius: 12px;
  }

  .formLabel {
    font-size: 16px;
    margin: 12px 0 6px 0;
  }

  .formInput,
  .formTextarea {
    padding: 12px 14px;
    font-size: 15px;
  }

  /* Kamera alanı — ekle formu içinde */
  .formCard #reader {
    max-width: 520px;
    height: 220px;
  }

  .kitapBaslik { font-size: 20px; }
  .kitapSatir  { font-size: 15px; }
}

@media (min-width: 1024px) {
  .formCard {
    max-width: 680px;
    padding: 28px;
  }

  .formTitle  { font-size: 22px; }
  .formLabel  { font-size: 15px; }
  .actionBtn  { font-size: 16px; padding: 12px; }

  .formInput,
  .formTextarea { font-size: 14px; padding: 10px 14px; }

  /* Dashboard içindeki formlar (dbFormAlani) da aynı sınıfları kullanır */
  #dbFormAlani .formCard {
    max-width: 100%;
    margin: 0;
  }
}