/* RESPONSIVE - Mobil uyum */

/* === 900px - Tablet/Küçük ekran === */
@media(max-width:900px){
  #sidebar{transform:translateX(-100%);height:100vh;height:100dvh}
  #sidebar.open{transform:translateX(0)}
  #sidebar-close{display:block}
  #sidebar-overlay.show{display:block}
  #main{margin-left:0}
  #menu-btn{display:flex;align-items:center;justify-content:center}
  /* Topbar buton metinleri - sadece küçük butonları gizle */
  #btn-fatura-olustur span{display:none}
  #topbar-user{display:flex !important}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .charts2{grid-template-columns:1fr}
  .fatura-card{flex-direction:column}
  .form-grid{grid-template-columns:1fr}
}

/* === 768px - Mobil === */
@media(max-width:768px){
  /* GENEL */
  #content{padding:12px}
  #topbar{padding:0 12px;height:52px}
  .page{padding:0}
  .card{padding:14px;border-radius:8px}
  .filter-row{flex-wrap:wrap;gap:6px}
  .filter-row input,.filter-row select{font-size:13px;padding:6px 10px}

  /* METRİKLER - tek sütun */
  .metrics{grid-template-columns:1fr 1fr}
  .metric{padding:10px 12px}
  .metric .val{font-size:18px}
  .metric .lbl{font-size:11px}

  /* TABLOLAR - yatay kaydırma */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:500px}
  th,td{padding:8px 10px;font-size:12px;white-space:nowrap}

  /* BUTONLAR */
  .btn{padding:7px 10px;font-size:12px}
  #topbar .actions .btn{padding:6px 10px;font-size:12px;gap:4px}
  .btn-primary,.btn-success,.btn-danger{padding:8px 14px}
  #btn-fatura-olustur span{display:none}

  /* MODAlLAR */
  #overlay{padding:10px}
  .modal-box{max-height:92vh;overflow-y:auto;border-radius:12px;padding:16px}
  .form-grid{grid-template-columns:1fr !important}
  .form-full{grid-column:span 1 !important}

  /* PANEL */
  #panel-uyarilar .btn{white-space:nowrap;font-size:11px;padding:4px 8px}

  /* MÜŞTERİLER */
  .musteri-grid{grid-template-columns:1fr 1fr !important}
  #detay-metrics{grid-template-columns:repeat(2,1fr) !important}

  /* TAHSİLAT */
  #calisan-tahsilat-liste table{min-width:400px}

  /* PERFORMANS */
  #performans-grid{grid-template-columns:1fr !important}

  /* KASA */
  #kasa-sayim-grid{grid-template-columns:1fr !important}
  #kasa-ozet-grid{grid-template-columns:1fr 1fr !important}

  /* YETKİ GRİD */
  #modal [id^="yetki-grid"]{grid-template-columns:1fr !important}

  /* LOG - saat sütunu */
  .zaman-td{min-width:140px}

  /* STOK */
  #stok-liste .card{padding:10px}

  /* SADAKAT */
  #sadakat-liste > div > div{grid-template-columns:1fr 1fr !important}

  /* TOPBAR buton metni gizle */
  /* buton metinleri görünür */
}

/* === 480px - Küçük telefon === */
@media(max-width:480px){
  .metrics{grid-template-columns:1fr 1fr}
  .musteri-grid{grid-template-columns:1fr !important}
  #detay-metrics{grid-template-columns:1fr 1fr !important}
  #sadakat-liste > div > div{grid-template-columns:1fr !important}
  .modal-box{padding:14px;border-radius:10px}
  #topbar .actions{gap:4px}
  #topbar .actions .btn{padding:5px 8px}
}

/* === 360px - Çok küçük telefon === */
@media(max-width:360px){
  .metrics{grid-template-columns:1fr}
}

/* === LOGIN RESPONSIVE === */
@media(max-width:768px){
  #login-screen{flex-direction:column}
  .login-left{width:100%;min-width:unset;padding:26px 22px 20px}
  .login-features{display:none}
  .login-footer{display:none}
  .login-right{padding:20px 16px}
  #login-box{padding:28px 20px}
  .login-brand h1{font-size:22px}
  .login-brand-logo{width:68px;height:68px}
  .logo-yg{font-size:18px}
}