/* KarPOS Yönetim — UYGULAMA HİSSİ (telefon). site.css'ten sonra yüklenir.
   Panel ana ekrana eklenip tam ekran açılabilir (manifest.webmanifest + sw.js). Telefonda: alt sekme çubuğu, soldan açılan menü,
   alttan açılan pencereler, parmağa uygun ölçüler ve tabloların kart görünümü (site.js "kartli" sınıfını ekler). */

html { -webkit-tap-highlight-color: transparent; }
a, button, label, summary, .dugme { touch-action: manipulation; }

/* Sayfalar arası yumuşak geçiş (destekleyen tarayıcılarda): sayfa yeniden yükleniyormuş hissini azaltır */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

/* Sayfa değişirken üstte ilerleyen ince çizgi (site.js body'ye "gidiyor" sınıfını ekler) */
.yukleniyor-cizgi { position: fixed; left: 0; top: 0; z-index: 200; height: 3px; width: 0; opacity: 0; background: linear-gradient(90deg, var(--ana), #ff9a6b); border-radius: 0 3px 3px 0; pointer-events: none; }
body.gidiyor .yukleniyor-cizgi { opacity: 1; width: 88%; transition: width 6s cubic-bezier(.08, .7, .2, 1); }

.alt-cubuk, .ust-geri { display: none; }
.menu-oge.yukle { width: 100%; border: 1px dashed rgba(255,255,255,.25); background: rgba(255,255,255,.05); cursor: pointer; margin-top: 14px; font: inherit; font-weight: 500; text-align: left; }

@media (max-width: 900px) {
  html { font-size: 15.5px; }

  /* Üst şerit: uygulama başlığı (koyu, çentik payıyla) */
  .ust { height: calc(54px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; background: var(--murekkep); color: #fff; border-bottom: 0; backdrop-filter: none; }
  .ust .menu-ac { display: none; }
  .ust-geri { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; margin-left: -8px; border-radius: 12px; color: #fff; font-size: 1.25rem; }
  .ust-geri:active { background: rgba(255,255,255,.12); }
  .ust-geri:hover { text-decoration: none; }
  .icerik > .geri { display: none; }      /* üst şeritteki geri oku aynı işi görür */
  .ust-baslik { font-size: 1.1rem; }
  .icerik { padding: 14px 12px calc(84px + env(safe-area-inset-bottom)); }

  /* Alt sekme çubuğu */
  .alt-cubuk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-top: 1px solid var(--cizgi); box-shadow: 0 -6px 24px rgba(20,22,46,.07); }
  .alt-cubuk a, .alt-cubuk button { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 52px; border-radius: 14px;
    color: var(--soluk); font-size: .7rem; font-weight: 600; cursor: pointer; transition: transform .1s, background .15s, color .15s; }
  .alt-cubuk i { font-size: 1.32rem; line-height: 1; }
  .alt-cubuk .secili { color: var(--ana-koyu); background: var(--ana-acik); }
  .alt-cubuk a:active, .alt-cubuk button:active { transform: scale(.92); }
  body.menu-acik .alt-cubuk .menu-ac { color: var(--ana-koyu); }

  /* Menü: soldan açılan çekmece */
  .yan, html.menu-kapali .yan { width: min(86vw, 320px); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  body.menu-acik .yan { box-shadow: 16px 0 48px rgba(0,0,0,.35); }
  .menu-oge { padding: 12px 14px; font-size: 1.02rem; }
  body.menu-acik { overflow: hidden; }
  body.menu-acik .perde { backdrop-filter: blur(2px); }

  /* Dokunmaya uygun ölçüler. 16 pikselden küçük yazılı kutuya dokununca iOS sayfayı yakınlaştırır. */
  .dugme { height: 46px; border-radius: 13px; padding: 0 16px; }
  .dugme.kucuk { height: 38px; }
  .dugme.kare { width: 42px; height: 42px; border-radius: 12px; }
  .dugme:active { transform: scale(.97); }
  .girdi { height: 48px; border-radius: 13px; font-size: 16px; }
  textarea.girdi { font-size: 16px; }
  .girdi.dar { min-width: 0; flex: 1 1 140px; }
  .kart { border-radius: 18px; }
  .kart-bas { padding: 14px 16px; }
  .kart-govde { padding: 16px; }
  .ozetler, .ozetler.sik, .ozetler.bes { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  /* Özet kutuları: iki sütun; simge sağ üst köşede küçük durur, tek kalan son kutu satırı doldurur */
  .ozet { position: relative; display: block; padding: 13px 14px 12px; border-radius: 18px; min-width: 0; }
  .ozet > div { min-width: 0; max-width: 100%; }
  .ozet > .ozet-simge { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 10px; font-size: .92rem; }
  .ozet-ad { padding-right: 34px; }
  .ozet-deger { font-size: 1.18rem; overflow-wrap: anywhere; }
  .ozetler > .ozet:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Sayfa başlığı üst şeritte zaten yazıyorsa (mobil.js işaretler) içerikte yinelenmez */
  .sayfa-bas h1.yinelenen { display: none; }
  .sayfa-bas h1.yinelenen + p { margin-top: 0; }
  .ikili, .uclu-bir { gap: 12px; }
  .kart + .kart, .ozetler + .kart, .kart + .ozetler { margin-top: 12px; }

  /* Sayfa başlığı, eylemler, filtreler */
  .sayfa-bas { margin-bottom: 14px; gap: 10px; }
  .sayfa-bas h1 { font-size: 1.4rem; }
  .sayfa-bas .eylemler { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .sayfa-bas .eylemler::-webkit-scrollbar { display: none; }
  .sayfa-bas .eylemler > * { flex: 1 0 auto; }
  .arac { padding: 12px; gap: 8px; }
  .ara { flex: 1 1 100%; max-width: none; }
  .sekmeler, .dilim { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .sekmeler::-webkit-scrollbar, .dilim::-webkit-scrollbar { display: none; }
  .dilim span, .dilim a { height: 38px; }
  .sayfalama { justify-content: center; }
  .sayfalama .bilgi { width: 100%; text-align: center; margin: 0 0 4px; }
  .sayfalama a, .sayfalama span.no { min-width: 40px; height: 40px; }
  .acilir-liste, .acilir-liste.sol { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); min-width: 0; border-radius: 18px; padding: 8px; }
  .acilir-liste a, .acilir-liste button { padding: 13px 12px; }

  /* Pencereler alttan açılan sayfa olur */
  dialog.pencere, dialog.pencere.genis, dialog.pencere.dar { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 24px 24px 0 0; max-height: 92dvh; }
  dialog.pencere[open] { animation: pencere-alttan .26s cubic-bezier(.2, .8, .2, 1); }
  dialog.pencere::before { content: ""; flex: none; align-self: center; width: 42px; height: 5px; border-radius: 3px; background: var(--cizgi-koyu); margin-top: 9px; }
  .pencere-bas { padding: 12px 18px; }
  .pencere-govde { padding: 6px 18px 18px; }
  .pencere-alt { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .pencere-alt .dugme { flex: 1; }

  /* Bildirimler sekme çubuğunun üstünde, tam genişlikte */
  .bildirimler { left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); }
  .bildirim { min-width: 0; max-width: none; }

  /* Giriş: üstte koyu başlık, altta beyaz sayfa */
  .giris { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; background: var(--murekkep); }
  .giris-sahne { display: flex; padding: calc(26px + env(safe-area-inset-top)) 22px 56px; }
  .giris-sahne .giris-ozellikler, .giris-sahne .giris-telif { display: none; }
  .giris-saat { margin-top: 26px; font-size: 3.4rem; }
  .giris-tarih { font-size: 1rem; }
  .giris-form { background: var(--yuzey); border-radius: 28px 28px 0 0; margin-top: -28px; position: relative; place-items: start center; padding: 30px 22px calc(28px + env(safe-area-inset-bottom)); }
  .giris-kutu h1 { font-size: 1.7rem; }
}
@keyframes pencere-alttan { from { transform: translateY(100%); } }

/* Tabloların kart görünümü (telefon): her satır bir kart; sütun başlıkları hücrelerin soluna yazılır. site.js başlığı olan her
   .tablo'ya "kartli" sınıfını, hücrelere data-baslik özniteliğini ekler. İstenmeyen tabloda: <table class="tablo" data-kart="yok"> */
@media (max-width: 640px) {
  .tablo-sar:has(> .tablo.kartli) { overflow: visible; }
  .tablo.kartli, .tablo.kartli tbody, .tablo.kartli tfoot { display: block; width: 100%; }
  .tablo.kartli thead { display: none; }
  .tablo.kartli tr { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 14px; padding: 13px 14px 11px; border-bottom: 1px solid var(--cizgi); }
  .tablo.kartli tbody tr:last-child { border-bottom: 0; }
  .tablo.kartli td { display: flex; align-items: baseline; gap: 6px; padding: 0; border: 0; width: auto; min-width: 0; text-align: left; white-space: normal; background: none; }
  .tablo.kartli td[data-baslik]::before { content: attr(data-baslik); flex: none; font-size: .7rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--soluk-2); }
  .tablo.kartli td.bos-hucre { display: none; }
  /* Satırın adı: tam genişlikte, başlıksız ve kalın */
  .tablo.kartli td.ana-hucre { order: -1; flex: 1 1 100%; font-weight: 600; font-size: 1.02rem; }
  .tablo.kartli td.ana-hucre::before { display: none; }
  .tablo.kartli tr:has(> td.sec) td.ana-hucre { padding-left: 34px; }
  .tablo.kartli td.sec { position: absolute; left: 14px; top: 14px; width: auto; }
  .tablo.kartli td.sec input { width: 22px; height: 22px; }
  /* İşlem düğmeleri: kartın altında sağa yaslı */
  .tablo.kartli td.islem { order: 9; flex: 0 0 auto; margin: -4px -6px -6px auto; justify-content: flex-end; align-items: center; gap: 4px; }
  .tablo.kartli td.islem .dugme.kare { width: 38px; height: 38px; }
  .tablo.kartli td.islem::before { display: none; }
  .tablo.kartli tfoot tr { background: #fafbfe; border-top: 1px solid var(--cizgi); border-bottom: 0; font-weight: 700; }
  .tablo.kartli td.iki-satir { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* Filtrelerin katlanması (telefon): araması olan araç çubuğunda arama kutusu ve "Filtreler" düğmesi görünür; diğer kutular düğmeyle
   açılır (mobil.js "katlanir" sınıfını ve düğmeyi ekler). Seçimle ilgili düğmeler ([data-secili-gerek]) her zaman görünür. */
.filtre-dugme { display: none; }
@media (max-width: 640px) {
  .arac.katlanir { align-items: stretch; }
  .arac.katlanir > .ara { flex: 1 1 0; }
  .arac.katlanir > .filtre-dugme { display: inline-flex; flex: none; position: relative; }
  .arac.katlanir > .filtre-dugme.dolu { border-color: var(--ana); color: var(--ana-koyu); background: var(--ana-acik); }
  .arac.katlanir > .filtre-dugme b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ana); color: #fff; font-size: .72rem; }
  .arac.katlanir:not(.acik) > :not(.ara):not(.filtre-dugme):not([data-secili-gerek]):not(input[type=hidden]) { display: none; }
  .arac.katlanir.acik > .bosluk { display: none; }
  .arac.katlanir.acik > .ara { flex: 1 1 calc(100% - 60px); }
  .arac.katlanir.acik > .girdi, .arac.katlanir.acik > select, .arac.katlanir.acik > .alan { flex: 1 1 calc(50% - 4px); min-width: 0; }
}