/* =============================================================
 * PALAZOĞLU TREYLER — Üretim Takip Sistemi
 * app.css — Tasarım sistemi (tokenlar, tipografi, bileşenler)
 *
 * Renk kuralı:
 *   YEŞİL  = devam ediyor
 *   SARI   = duraklatıldı
 *   KIRMIZI= bitti
 *   Başlamamış kayıt = RENKSİZ (nötr)
 * ============================================================= */

/* ---------- 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;

  /* Başlamamış = renksiz */
  --st-bekliyor:      #8d95a3;
  --st-bekliyor-yum:  #f1f3f6;
  --st-bekliyor-koyu: #1e2028;

  /* ALARM — gecikme uyarısı. Marka kırmızısından bilerek daha parlak,
     "bitti" ile karışmasın diye ayrı tutuldu. */
  --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;
  --st-bekliyor-yum:  #1e1e24;

  --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%;
}

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, .kart-sure, .kpi-deger, .numpad-tus, .no-goster {
  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); }
.st-bekliyor  { --st: var(--st-bekliyor);  --st-acik: var(--st-bekliyor);       --st-yum: var(--st-bekliyor-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); }

/* Başlamamış rozet: renksiz, sadece çizgi */
.st-bekliyor .rozet, .rozet.st-bekliyor {
  background: transparent;
  color: var(--metin-3);
  border-color: var(--cizgi-2);
  border-style: dashed;
}

/* Durum noktası */
.nokta {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--st); flex: none;
}
.nokta.canli { animation: nabiz 2s ease-in-out infinite; }
.st-bekliyor .nokta { background: transparent; border: 2px dashed var(--cizgi-2); }

@keyframes nabiz {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--st) 55%, transparent); }
  70%      { box-shadow: 0 0 0 9px transparent; }
}

/* ---------- 4. KARTLAR ---------- */
.kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-l);
  box-shadow: var(--golge-1);
  position: relative;
  overflow: hidden;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

/* Sol renk şeridi — durum göstergesi */
.kart::before {
  content: '';
  position: absolute; inset: 0 auto 0 0;
  width: 6px; background: var(--st);
}
.kart.st-bekliyor::before {
  background: repeating-linear-gradient(
    135deg, var(--cizgi-2) 0 4px, transparent 4px 8px);
}
.kart.st-durakladi::before {
  background: repeating-linear-gradient(
    135deg, var(--st) 0 6px, color-mix(in srgb, var(--st) 45%, transparent) 6px 12px);
}

.kart.tiklanir { cursor: pointer; }
.kart.tiklanir:active { transform: scale(.985); }
.kart.tiklanir:hover { box-shadow: var(--golge-2); border-color: var(--cizgi-2); }

/* Gecikme uyarısı — ALARM rengi. Marka kırmızısı "bitti" demek,
   bu ise "hedef aşıldı" demek; bilerek daha parlak ve yanıp sönüyor. */
.kart.gecikti {
  border-color: var(--alarm);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--alarm) 30%, transparent), var(--golge-2);
}
.kart.gecikti .gecikme-etiket { display: inline-flex; }
.gecikme-etiket {
  display: none; align-items: center; gap: 4px;
  background: var(--alarm); color: #fff;
  font-size: .68rem; font-weight: 900; letter-spacing: .05em;
  padding: 3px 8px; border-radius: var(--r-tam);
  animation: yanip 1.6s steps(1) infinite;
}
@keyframes yanip { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- 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 ---------- */
.per-rozet {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 30px; padding: 0 9px;
  background: var(--celik); color: #fff;
  border-radius: var(--r-tam);
  font-weight: 900; font-size: .9rem;
  font-variant-numeric: tabular-nums;
  border: 2px solid color-mix(in srgb, #fff 20%, transparent);
}
/* Kendi numaram — marka kırmızısı */
.per-rozet.ben {
  background: var(--marka); color: #fff;
  border-color: color-mix(in srgb, #fff 35%, transparent);
}

.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);
}

/* Öncelik: durum renkleriyle karışmasın diye ayrı ton ailesi */
.onc-acil   { background: var(--alarm); color: #fff; border-color: transparent; }
.onc-yuksek { background: #f59e0b; color: #241500; border-color: transparent; }
.onc-normal { display: none; }

/* ---------- 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);
}