/* =============================================================
 * PALAZOĞLU TREYLER — Üretim Takip Sistemi
 * app.css — Tasarım sistemi (tokenlar, tipografi, bileşenler)
 *
 * Renk kuralı (3 durum):
 *   YEŞİL   = devam ediyor
 *   SARI    = duraklatıldı
 *   KIRMIZI = bitti  (kurumsal #A81A18)
 *
 * Kayıt, personel şase numarasını girip işi başlattığı anda doğar;
 * bu yüzden "başlamamış" diye bir durum yoktur.
 * ============================================================= */

/* ---------- 1. TOKENLAR ---------- */
:root {
  /* --- MARKA: Palazoğlu kurumsal kırmızısı --- */
  --marka:        #A81A18;
  --marka-acik:   #C42320;
  --marka-acik-2: #E4635E;
  --marka-koyu:   #8A1513;
  --marka-derin:  #6B0F0E;

  /* Gövde/çerçeve rengi — beyaz logonun oturduğu endüstriyel kömür grisi */
  --mrk-900: #0a0a0c;
  --mrk-800: #141417;
  --mrk-700: #1d1d22;
  --mrk-600: #2b2b33;
  --mrk-500: var(--marka);
  --mrk-400: var(--marka-acik);
  --mrk-300: var(--marka-acik-2);
  --vurgu:      var(--marka);
  --vurgu-koyu: var(--marka-koyu);

  /* Nötr veri rengi (doluluk çubukları vb. — anlam taşımaz) */
  --celik:      #5b6472;
  --celik-acik: #8b95a5;

  /* --- DURUM RENKLERİ — tek kaynak --- */
  --st-devam:      #15803d;
  --st-devam-acik: #22c55e;
  --st-devam-yum:  #dcfce7;
  --st-devam-koyu: #052e16;

  --st-durakladi:      #b45309;
  --st-durakladi-acik: #f59e0b;
  --st-durakladi-yum:  #fef3c7;
  --st-durakladi-koyu: #431407;

  /* BİTTİ = kurumsal kırmızı (marka ile aynı aile) */
  --st-bitti:      var(--marka);
  --st-bitti-acik: var(--marka-acik);
  --st-bitti-yum:  #fbe7e6;
  --st-bitti-koyu: #3d0908;


  /* ALARM — hata/uyarı rengi (hatalı PIN, geçersiz şase, yetki yok).
     Marka kırmızısından bilerek daha parlak: "bitti" ile karışmasın. */
  --alarm:      #ff4438;
  --alarm-koyu: #d92d20;

  /* Yüzeyler — AÇIK tema (varsayılan) */
  --zemin:      #f0f0f2;
  --yuzey:      #ffffff;
  --yuzey-2:    #f8f8fa;
  --yuzey-3:    #f1f1f4;
  --cizgi:      #e0e0e5;
  --cizgi-2:    #ccccd4;
  --metin:      #121216;
  --metin-2:    #4b4b55;
  --metin-3:    #82828e;
  --ters-metin: #ffffff;

  /* Ölçü */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --r-xl: 24px;
  --r-tam: 999px;

  --golge-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --golge-2: 0 4px 10px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.06);
  --golge-3: 0 12px 28px rgba(15,23,42,.14), 0 4px 8px rgba(15,23,42,.08);

  /* Dokunma hedefi — eldivenli el için */
  --dokunma: 56px;
  --dokunma-buyuk: 68px;

  --gecis: 160ms cubic-bezier(.4,0,.2,1);

  color-scheme: light;
}

/* ---------- KOYU TEMA ---------- */
[data-tema="koyu"] {
  --zemin:      #0a0a0c;
  --yuzey:      #141418;
  --yuzey-2:    #1a1a1f;
  --yuzey-3:    #232329;
  --cizgi:      #2c2c34;
  --cizgi-2:    #3d3d47;
  --metin:      #f2f2f5;
  --metin-2:    #a8a8b4;
  --metin-3:    #74747f;
  --ters-metin: #0a0a0c;

  --celik:      #6b7280;
  --celik-acik: #9ca3af;

  --st-devam:      #22c55e;
  --st-durakladi:  #f59e0b;
  --st-bitti:      var(--marka-acik);

  --st-devam-yum:     #0d2d1a;
  --st-durakladi-yum: #33240a;
  --st-bitti-yum:     #33100f;

  --golge-1: 0 1px 2px rgba(0,0,0,.5);
  --golge-2: 0 4px 12px rgba(0,0,0,.6);
  --golge-3: 0 16px 40px rgba(0,0,0,.7);

  color-scheme: dark;
}

/* ---------- 2. TABAN ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* -------------------------------------------------------------
 * MOBİLDE İSTENMEYEN YAKINLAŞTIRMAYI KAPAT
 *
 * Sorun: numpad'de hızlı hızlı basınca tarayıcı bunu "çift dokunuş"
 * sanıp ekranı yakınlaştırıyordu. touch-action:manipulation çift
 * dokunuş yakınlaştırmasını kaldırır; kaydırma ve iki parmakla
 * yakınlaştırma çalışmaya devam eder.
 *
 * viewport'taki user-scalable=no iOS Safari tarafından yok sayılır,
 * bu yüzden asıl çözüm burasıdır.
 * ----------------------------------------------------------- */
html, body { touch-action: manipulation; }

button, a, label, summary, [role="button"], [onclick],
input, select, textarea {
  touch-action: manipulation;
  -webkit-touch-callout: none;      /* uzun basınca çıkan menüyü engelle */
}

/* Uzun basınca metin seçme büyüteci çıkmasın (girdi alanları hariç) */
button, a, label, .rozet, .etiket, .sase-no {
  -webkit-user-select: none; user-select: none;
}

/* -------------------------------------------------------------
 * GİRDİYE ODAKLANINCA YAKINLAŞTIRMA (ayrı bir iOS davranışı)
 *
 * iOS Safari, yazı boyutu 16px'in ALTINDA olan bir input/select/
 * textarea'ya dokunulduğunda ekranı otomatik yakınlaştırır ve geri
 * çıkmaz. Bunun tek güvenilir çözümü boyutu 16px'te tutmaktır —
 * user-scalable=no veya maximum-scale iOS 10'dan beri yok sayılıyor.
 *
 * Bu yüzden TÜM girdiler için taban 16px. Daha büyük istenirse
 * sınıf seviyesinde artırılır, asla altına inilmez.
 * ----------------------------------------------------------- */
input, select, textarea, option, optgroup {
  font-size: 16px;
  font-family: inherit;
}

/* Yazı boyutunu artıran her yerde 16px alt sınırı korunur */
input, select, textarea { font-size: max(16px, 1rem); }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

/* Rakamlar hizalı aksın — sayaçlarda zıplama olmasın */
.rakam, .sayac, .kpi-deger, .numpad-tus, .no-goster, .sase-kart, .sase-kutu {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4, h5 { font-weight: 800; letter-spacing: -0.02em; margin: 0; }

a { color: var(--mrk-400); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--mrk-400); color: #fff; }

/* Kaydırma çubuğu */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cizgi-2); border-radius: var(--r-tam); }
::-webkit-scrollbar-thumb:hover { background: var(--metin-3); }

/* Odak halkası — klavye erişimi */
:focus-visible {
  outline: 3px solid var(--mrk-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Ekran okuyucu */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Güvenli alan (iPhone çentik / ev tuşu) */
.guvenli-ust { padding-top: env(safe-area-inset-top); }
.guvenli-alt { padding-bottom: env(safe-area-inset-bottom); }

/* ---------- 3. DURUM RENKLERİ ---------- */
.st-devam     { --st: var(--st-devam);     --st-acik: var(--st-devam-acik);     --st-yum: var(--st-devam-yum); }
.st-durakladi { --st: var(--st-durakladi); --st-acik: var(--st-durakladi-acik); --st-yum: var(--st-durakladi-yum); }
.st-bitti     { --st: var(--st-bitti);     --st-acik: var(--st-bitti-acik);     --st-yum: var(--st-bitti-yum); }

/* Durum rozeti */
.rozet {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-tam);
  font-size: .75rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
  background: var(--st-yum); color: var(--st);
  border: 1.5px solid color-mix(in srgb, var(--st) 35%, transparent);
}
[data-tema="koyu"] .rozet { color: var(--st-acik); }

/* ---------- 5. BUTONLAR ---------- */
.btn-dev {
  min-height: var(--dokunma);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px;
  font-size: 1.05rem; font-weight: 800; letter-spacing: .01em;
  border: none; border-radius: var(--r-m);
  cursor: pointer; user-select: none;
  transition: transform var(--gecis), filter var(--gecis), box-shadow var(--gecis);
  box-shadow: var(--golge-1);
  line-height: 1.2;
}
.btn-dev:active { transform: scale(.97); }
.btn-dev:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-dev i { font-size: 1.2em; }

.btn-dev.tam { width: 100%; }
.btn-dev.xl { min-height: var(--dokunma-buyuk); font-size: 1.2rem; padding: 18px 26px; }

.btn-yesil   { background: #15803d;             color: #fff; }
.btn-sari    { background: #b45309;             color: #fff; }
.btn-kirmizi { background: var(--marka);        color: #fff; }
.btn-marka   { background: var(--marka);        color: #fff; }
.btn-koyu    { background: var(--mrk-700);      color: #fff; }
.btn-gri     { background: var(--yuzey-3);      color: var(--metin); border: 1.5px solid var(--cizgi); box-shadow: none; }
.btn-hayalet { background: transparent;         color: var(--metin-2); border: 1.5px solid var(--cizgi); box-shadow: none; }
.btn-dev:not(:disabled):hover { filter: brightness(1.07); }
.btn-gri:not(:disabled):hover, .btn-hayalet:not(:disabled):hover { background: var(--yuzey-3); filter: none; }

/* ---------- 6. FORM ---------- */
.alan { margin-bottom: 16px; }
.alan-etiket {
  display: block; margin-bottom: 6px;
  font-size: .82rem; font-weight: 700; color: var(--metin-2);
  text-transform: uppercase; letter-spacing: .04em;
}
.alan-girdi, .alan-secim, .alan-metin {
  width: 100%;
  min-height: var(--dokunma);
  padding: 12px 14px;
  font-size: 16px;              /* iOS otomatik yakınlaştırmayı engeller */
  font-family: inherit;
  color: var(--metin);
  background: var(--yuzey);
  border: 1.5px solid var(--cizgi-2);
  border-radius: var(--r-m);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.alan-metin { min-height: 96px; resize: vertical; }
.alan-girdi:focus, .alan-secim:focus, .alan-metin:focus {
  outline: none;
  border-color: var(--mrk-400);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mrk-400) 22%, transparent);
}
.alan-ipucu { font-size: .8rem; color: var(--metin-3); margin-top: 5px; }
.alan-hata  { font-size: .84rem; color: var(--st-bitti); margin-top: 5px; font-weight: 600; }

/* ---------- 7. ROZET / ETİKET ---------- */
.etiket {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-s);
  font-size: .74rem; font-weight: 700;
  background: var(--yuzey-3); color: var(--metin-2);
  border: 1px solid var(--cizgi);
}

/* Şase numarası rozeti — panoda ve listelerde ortak kullanım */
.sase-no {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 10px; border-radius: var(--r-s);
  background: var(--st-yum); color: var(--st);
  font-weight: 900; font-variant-numeric: tabular-nums;
  border: 1.5px solid color-mix(in srgb, var(--st) 32%, transparent);
}
[data-tema="koyu"] .sase-no { color: var(--st-acik); }

/* ---------- 8. TOAST ---------- */
.toast-kap {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top) + 12px);
  z-index: 3000;
  display: flex; flex-direction: column; gap: 8px;
  width: min(94vw, 460px); pointer-events: none;
}
.tst {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: var(--r-m);
  background: var(--yuzey); color: var(--metin);
  box-shadow: var(--golge-3);
  border-left: 5px solid var(--metin-3);
  font-weight: 600; font-size: .95rem;
  opacity: 0; transform: translateY(-14px);
  transition: opacity .25s, transform .25s;
}
.tst.gorunur { opacity: 1; transform: translateY(0); }
.tst i { font-size: 1.3rem; flex: none; }
.tst-basari { border-left-color: var(--st-devam);     } .tst-basari i { color: var(--st-devam); }
.tst-hata   { border-left-color: var(--st-bitti);     } .tst-hata   i { color: var(--st-bitti); }
.tst-uyari  { border-left-color: var(--st-durakladi); } .tst-uyari  i { color: var(--st-durakladi); }
.tst-bilgi  { border-left-color: var(--mrk-400);      } .tst-bilgi  i { color: var(--mrk-400); }

/* ---------- 9. ONAY DİYALOĞU ---------- */
.onay-katman {
  position: fixed; inset: 0; z-index: 3100;
  background: rgba(3,7,18,.62);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity .2s;
}
.onay-katman.gorunur { opacity: 1; }
.onay-kutu {
  background: var(--yuzey);
  border-radius: var(--r-xl);
  padding: 28px 24px 22px;
  width: min(100%, 420px);
  text-align: center;
  box-shadow: var(--golge-3);
  transform: scale(.94); transition: transform .2s;
}
.onay-katman.gorunur .onay-kutu { transform: scale(1); }
.onay-ikon {
  width: 66px; height: 66px; margin: 0 auto 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--yuzey-3); color: var(--mrk-500);
  font-size: 2rem;
}
.onay-kutu.tehlike .onay-ikon { background: var(--st-bitti-yum); color: var(--st-bitti); }
.onay-baslik { font-size: 1.3rem; margin-bottom: 8px; }
.onay-mesaj { color: var(--metin-2); margin-bottom: 22px; font-size: .98rem; }
.onay-butonlar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- 10. YÜKLEME ---------- */
.yukleniyor {
  display: inline-block; width: 22px; height: 22px;
  border: 3px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor; border-radius: 50%;
  animation: don .7s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

.iskelet {
  background: linear-gradient(90deg, var(--yuzey-3) 25%, var(--yuzey-2) 50%, var(--yuzey-3) 75%);
  background-size: 200% 100%;
  animation: kayar 1.4s infinite;
  border-radius: var(--r-s);
}
@keyframes kayar { to { background-position: -200% 0; } }

/* ---------- 11. BOŞ DURUM ---------- */
.bos {
  text-align: center; padding: 46px 20px; color: var(--metin-3);
}
.bos i { font-size: 2.8rem; display: block; margin-bottom: 12px; opacity: .5; }
.bos-baslik { font-weight: 800; color: var(--metin-2); margin-bottom: 4px; }

/* ---------- 12. ÜST ÇUBUK ---------- */
.ustcubuk {
  position: sticky; top: 0; z-index: 900;
  background: var(--mrk-800);
  color: #fff;
  padding-top: env(safe-area-inset-top);
  box-shadow: var(--golge-2);
  border-bottom: 3px solid var(--marka);     /* marka şeridi */
}
.ustcubuk-ic {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; min-height: 60px;
}
.ustcubuk-baslik { font-size: 1.05rem; font-weight: 800; line-height: 1.15; }
.ustcubuk-alt { font-size: .76rem; color: #9a9aa6; font-weight: 600; }
.ustcubuk .ikon-btn {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.09); color: #fff;
  border: none; border-radius: var(--r-m); font-size: 1.25rem;
  cursor: pointer; transition: background var(--gecis);
}
.ustcubuk .ikon-btn:active { background: rgba(255,255,255,.2); }

/* ---------- 13. LOGO ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; }

/* Yatay logo (amblem + Palazoğlu yazısı). Kaynak beyaz PNG olduğu için
   koyu zeminde doğrudan, açık zeminde renk filtresiyle kullanılır. */
.marka-logo {
  height: 34px; width: auto; display: block;
  image-rendering: -webkit-optimize-contrast;
}
[data-tema="acik"] .marka-logo.oto-renk {
  /* beyaz PNG'yi kurumsal kırmızıya çevirir */
  filter: brightness(0) saturate(100%)
          invert(15%) sepia(83%) saturate(3800%) hue-rotate(354deg) brightness(88%) contrast(92%);
}

/* Sadece amblem — dar alanlarda (avatar, ikon butonu) */
.marka-amblem { height: 26px; width: auto; display: block; }

/* Kırmızı kutu içinde beyaz amblem */
.logo-im {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--marka);
  border-radius: 11px;
  box-shadow: 0 2px 10px rgba(168,26,24,.4);
  overflow: hidden;
}
.logo-im img { width: 62%; height: auto; display: block; }
.logo-im i { color: #fff; font-size: 1.25rem; }

/* ---------- 14. YARDIMCILAR ---------- */
.kap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.satir { display: flex; align-items: center; }
.ara { flex: 1 1 auto; }
.gizle { display: none !important; }
.kesme { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kucuk { font-size: .82rem; }
.soluk { color: var(--metin-3); }
.orta { text-align: center; }
.kalin { font-weight: 800; }

.g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; }
.g10 { gap: 10px; } .g12 { gap: 12px; } .g16 { gap: 16px; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mt24 { margin-top: 24px; } .mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; }
.mb16 { margin-bottom: 16px; } .mb24 { margin-bottom: 24px; }

.bolum-baslik {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--metin-3);
  margin: 22px 0 10px;
}
.bolum-baslik::after {
  content: ''; flex: 1; height: 1px; background: var(--cizgi);
}