/* TELEFON VE TABLET YERLEŞİMİ
 *
 * Masaüstü kuralları bozulmasın diye ayrı dosyada ve tamamı @media içinde:
 * 900px üstünde bu dosyanın hiçbir kuralı çalışmaz.
 *
 * Ana sorun: yan menü sabit 250px ve hep açıktı; içerik de ona göre 250px
 * içeriden başlıyordu. 375px'lik telefonda sayfa 1096px'e zorluyor, tarayıcı
 * her şeyi %34'e küçültüyordu — okunmuyordu. Çözüm: menü çekmeceye dönüşür,
 * içerik tam genişliği kullanır.
 */

/* Karartma katmanı masaüstünde hiç var olmasın: body flex olduğu için
   boş da olsa bir flex öğesi olarak duruyor. */
.mobil-perde { display: none; }

@media (max-width: 900px) {

  /* ---- Yan menü: çekmece ---- */
  .sidebar {
    width: 270px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1200;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .3);
  }
  .sidebar.acik { transform: translateX(0); }

  /* Çekmece açıkken arkadaki karartma; dokununca kapanır */
  .mobil-perde {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
  }
  .mobil-perde.acik { opacity: 1; pointer-events: auto; }

  /* min-width:0 ŞART. .main-content bir flex öğesi ve varsayılan
     "min-width:auto" onu içeriğinin en dar hâlinden daha ince yapmıyor;
     tek bir geniş grafik yüzünden tüm sayfa 484px'e zorlanıyordu. */
  .main-content { margin-left: 0; min-width: 0; }

  /* Grafik ve görseller kutularını aşmasın */
  canvas, img, svg { max-width: 100%; }
  .chart-container, .chart-box { min-width: 0; overflow: hidden; }

  /* ---- Üst çubuk ---- */
  .topbar {
    padding: 0 12px;
    gap: 8px;
    height: 56px;
  }
  .page-title h1 {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-actions { gap: 6px; }
  /* Seçiciler dar ekranda başlığı ezmesin */
  .topbar-actions select {
    max-width: 104px;
    font-size: 13px;
    padding: 6px 4px;
  }

  /* Hamburger yalnızca burada görünür (HTML'de her zaman var) */
  .mobil-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .content-area { padding: 14px 12px 28px; }

  /* ---- Izgaralar tek/çift sütuna insin ---- */
  /* !important şart: bazı ekranlar sütun sayısını satır içi style ile
     veriyor (ör. Yıl Sonu Devir'de repeat(3,1fr)) ve dışarıdan ezilemiyor;
     o sayfa telefonda 801px'e taşıyordu. */
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; margin-bottom: 16px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; gap: 12px; }

  /* Yan yana dizilmiş bloklar sığmazsa alt satıra insin. Sığdığı sürece
     görünüm değişmez; yalnızca taşmayı önler. */
  .flex { flex-wrap: wrap; }
  .stat-card { padding: 12px; gap: 10px; }
  .stat-card .amount { font-size: 16px; }
  .stat-details h3 { font-size: 11px; }

  /* Başlık + düğme yan yana sığmıyor: alt alta ve düğmeler tam genişlik */
  .header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
  }
  .header-actions > div { display: flex; flex-wrap: wrap; gap: 8px; }
  .header-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* ---- Dokunma hedefleri ---- */
  /* Parmakla basılan her şey en az 40px olsun; ikon düğmeleri kare kalsın */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .btn-icon { min-width: 40px; min-height: 40px; }
  .nav-item { padding: 14px 16px; }
  input, select, textarea { font-size: 16px; }   /* 16px altı iOS'ta sayfayı zumlar */

  /* ---- Tablolar ---- */
  /* Tablolar dar ekrana sığmaz; kendi içinde yatay kayar ve parmakla akar */
  .table-container {
    max-height: none;
    -webkit-overflow-scrolling: touch;
  }
  table { font-size: 13px; }
  thead th, tbody td { padding: 8px 6px; white-space: nowrap; }

  /* ---- Pencereler tam ekrana yakın ---- */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    margin: 0;
  }
  .modal-header { position: sticky; top: 0; z-index: 5; }

  /* ---- Hesaplar & İşlemler (defter) ekranı ---- */
  /* Üç sütunlu masaüstü düzeni telefonda alt alta iner: önce hesap listesi,
     seçim yapılınca hareketler. Giriş çubuğu da tek sütun olur. */
  .defter-layout {
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - 56px);
    margin: -14px -12px;
  }
  .defter-sidebar {
    width: 100%;
    max-height: 44vh;
    border-right: none;
    border-bottom: 2px solid #e2e8f0;
  }
  .defter-main { min-height: 60vh; }
  .defter-main-header { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .defter-main-header h2 { font-size: 16px; }
  .defter-entry-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    position: sticky;
    bottom: 0;
  }
  /* Her alan ayrı satıra inince çubuk 306px oluyordu — ekranın üçte biri.
     Kısa alanlar ikişerli, uzun alanlar tam satır. */
  /* order ŞART: kaynak sırası tarih → açıklama → tutar. Araya tam satır
     kaplayan açıklama girdiği için tarih tek başına satırda kalıyordu.
     Sıra değiştirilerek kısa alanlar ikişerli eşleşiyor:
       [tarih | tutar]  [kategori | cari]  [açıklama]  [düğmeler] */
  .defter-entry-bar .defter-input { width: auto !important; min-width: 0; }
  .defter-entry-bar #trDate     { order: 1; flex: 1 1 calc(50% - 8px) !important; }
  .defter-entry-bar #trAmount   { order: 2; flex: 1 1 calc(50% - 8px) !important; }
  .defter-entry-bar #trCategory { order: 3; flex: 1 1 calc(50% - 8px) !important; }
  .defter-entry-bar #trCari     { order: 4; flex: 1 1 calc(50% - 8px) !important; }
  .defter-entry-bar #trDesc     { order: 5; flex: 1 1 100% !important; }
  .defter-entry-bar .flex { order: 6; width: 100%; }
  .defter-entry-bar .flex .btn { flex: 1; }

  /* İşlem satırı: masaüstündeki beş sütun telefonda sığmıyor */
  .defter-tr-row { flex-wrap: wrap; padding: 12px; gap: 4px; }
  .defter-tr-info { flex: 1 1 100%; }
  .defter-tr-type { font-size: 11px !important; opacity: .75; }
  .defter-tr-date { font-size: 11px !important; }
  .defter-tr-amount { margin-left: auto; }
  .defter-tr-balance { flex: 1 1 100%; text-align: right; opacity: .7; }

  /* Uyarı pencereleri kenara yapışmasın */
  .ui-kutu { width: calc(100vw - 24px); max-width: none; }

  /* ---- Giriş ekranı ---- */
  .login-container { width: 100%; border-radius: 0; min-height: 100vh; padding: 32px 20px; }
  .login-header h1 { font-size: 19px; }
  /* Alanlar 16px'in altında kalırsa iOS odaklanınca sayfayı zumluyor ve
     kullanıcı elle geri küçültmek zorunda kalıyor. */
  .login-container input,
  .login-container select { font-size: 16px; padding: 12px 14px; }
  .login-container .btn { min-height: 48px; font-size: 16px; }
}

/* Çok dar telefonlar (iPhone SE vb.) */
@media (max-width: 400px) {
  .grid-4 { grid-template-columns: 1fr; }
  .topbar-actions select { max-width: 88px; }
}

/* Ana ekrana eklenip tam ekran açıldığında: üstteki çentik/durum çubuğu
   alanına içerik girmesin (iPhone'da başlık saatin altında kalıyordu). */
@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); }
  .sidebar { padding-top: env(safe-area-inset-top); }
  .defter-entry-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}