/* ============================================================
   Kalıp Üretim Takip — "Atölye kontrol paneli / iş takip kartı"
   Saira Condensed (tabela) · Inter (metin) · JetBrains Mono (okuma)
   ============================================================ */

:root {
  --murekkep: #16202B;     /* çelik-mürekkep, ana metin */
  --murekkep-2: #5A6675;   /* ikincil metin */
  --celik: #EAECEF;        /* sayfa zemini */
  --kart: #FFFFFF;
  --cizgi: #D3D8E0;        /* ince çizgi/kenarlık */
  --mavi: #1F5FA8;         /* ana eylem (teknik mavi) */
  --mavi-koyu: #194E8B;

  /* Aşama ilerleyişi — soğuk tonlar (stok renkleriyle çakışmaz) */
  --asama-siparis: #8895A6;
  --asama-uretim: #1F5FA8;
  --asama-tamam: #0E7C86;

  /* Stok güvenlik sinyalleri — tek doygun renk grubu */
  --yesil: #1E8E4E;
  --sari: #E0A100;
  --kirmizi: #C8372E;
  --kirmizi-koyu: #A82C24;

  --golge: 0 1px 2px rgba(22,32,43,.08), 0 4px 14px rgba(22,32,43,.06);
  --r: 10px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  color: var(--murekkep);
  background:
    linear-gradient(var(--celik), var(--celik)),
    repeating-linear-gradient(90deg, #00000005 0 1px, transparent 1px 28px);
  min-height: 100vh;
}

h1, h2, h3, h4 { font-family: "Saira Condensed", "Inter", sans-serif; margin: 0; }

button, input, select { font-family: inherit; font-size: 1rem; }
button { cursor: pointer; }

/* --------------------------- Üst bar --------------------------- */
.ust-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 1.25rem;
  background: var(--murekkep); color: #fff;
  border-bottom: 3px solid var(--mavi);
}
.ust-bar h1 {
  font-weight: 700; font-size: 1.6rem; letter-spacing: .06em; text-transform: uppercase;
}
.ust-bar-sag { display: flex; align-items: center; gap: .6rem; }
.ust-bar-sag .yedek {
  color: #cdd6e2; text-decoration: none; font-size: .85rem;
  font-family: "JetBrains Mono", monospace; padding: .5rem .6rem; border-radius: 8px;
}
.ust-bar-sag .yedek:hover { background: rgba(255,255,255,.1); color: #fff; }
.ust-bar-sag button {
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
  padding: .55rem 1rem; border-radius: 8px; font-weight: 600; letter-spacing: .02em;
}
.ust-bar-sag button:hover { background: rgba(255,255,255,.22); }

/* ----------------------------- Düzen (tam ekran kilidi) ----------------------------- */
/* Uygulama viewport yüksekliğine kilitlenir; sayfa asla kaymaz.
   Solda 3 üretim kolonu, sağda STOK kolonu — her biri kendi içinde kayar. */
html:has(.uygulama), body:has(.uygulama) { height: 100%; overflow: hidden; }
.uygulama {
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
}
.ust-bar { flex: 0 0 auto; }
.calisma {
  flex: 1 1 auto; min-height: 0;
  display: flex; gap: 1rem; padding: 1.1rem 1.25rem;
}
.pano {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: minmax(0, 1fr); gap: 1rem;
}
.kolon {
  background: #f6f7f9; border: 1px solid var(--cizgi); border-radius: var(--r);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.kolon-bas {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .9rem; background: var(--murekkep); color: #fff;
}
.kolon-bas h2 {
  font-weight: 700; font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase;
  display: flex; align-items: center; gap: .5rem;
}
.kolon:nth-child(1) .kolon-bas { box-shadow: inset 0 -3px 0 var(--asama-siparis); }
.kolon:nth-child(2) .kolon-bas { box-shadow: inset 0 -3px 0 var(--asama-uretim); }
.kolon:nth-child(3) .kolon-bas { box-shadow: inset 0 -3px 0 var(--asama-tamam); }
.sayac {
  font-family: "JetBrains Mono", monospace; font-size: .8rem; font-weight: 500;
  background: rgba(255,255,255,.16); color: #fff;
  min-width: 1.6rem; text-align: center; padding: .1rem .4rem; border-radius: 999px;
}
.kolon-icerik {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: .8rem; display: flex; flex-direction: column; gap: .8rem;
}

/* yeşil + ekle butonu (kullanıcı isteği) */
.ekle {
  background: var(--yesil); color: #fff; border: none;
  width: 2.1rem; height: 2.1rem; border-radius: 8px;
  font-size: 1.5rem; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.ekle:hover { background: #176E3D; }

/* --------------------- İş takip kartı (traveler) --------------------- */
.kart {
  position: relative; background: var(--kart);
  border: 1px solid var(--cizgi); border-left: 5px solid var(--asama-siparis);
  border-radius: var(--r); padding: .8rem .9rem;
  box-shadow: var(--golge); transition: transform .12s ease, box-shadow .12s ease;
}
.kart:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(22,32,43,.1), 0 10px 24px rgba(22,32,43,.1); }
.kart[data-asama="Üretimde"]   { border-left-color: var(--asama-uretim); }
.kart[data-asama="Tamamlandı"] { border-left-color: var(--asama-tamam); }

.kart-tip {
  font-family: "Saira Condensed", sans-serif; font-weight: 700;
  font-size: 1.35rem; letter-spacing: .01em; line-height: 1.05;
}
.kart-kod, .kart-olcu {
  font-family: "JetBrains Mono", monospace; font-size: .82rem; color: var(--murekkep-2);
  margin-top: .25rem;
}
.kart-olcu { color: var(--murekkep); font-weight: 500; }
.kart-musteri {
  margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--cizgi);
  font-size: .92rem;
}
.kart-musteri .musteri-link {
  color: var(--mavi); font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.kart-musteri .musteri-link:hover { color: var(--mavi-koyu); text-decoration: none; }
.kart-dosya { margin-top: .35rem; font-size: .82rem; color: var(--murekkep-2); word-break: break-word; }
.kart-dosya a {
  color: var(--mavi); text-decoration: none;
  font-family: "JetBrains Mono", monospace; font-size: .78rem;
}
.kart-dosya a:hover { text-decoration: underline; }

/* + Çizim Ekle — kartta ince, ikincil eylem */
.kart .cizim-ekle {
  display: inline-block; margin-top: .45rem; margin-right: 0;
  background: #fff; color: var(--mavi); border: 1px dashed var(--mavi);
  border-radius: 8px; padding: .4rem .7rem; font-size: .8rem; font-weight: 600;
}
.kart .cizim-ekle:hover { background: #eef3fb; }
/* modal'da form dışı içerik (bilgi + dosya listesi) form ile aynı yatay hizada dursun */
.modal-list { padding: 1.1rem 1.2rem 0; }
.cizim-bilgi { margin: 0 0 .2rem; color: var(--murekkep-2);
  font-family: "JetBrains Mono", monospace; font-size: .8rem; }

/* Çizim Ekle/Kaldır — mevcut dosyalar listesi + İsim Düzenle */
.cizim-liste { list-style: none; margin: .3rem 0 .9rem; padding: 0;
  display: flex; flex-direction: column; gap: .4rem; }
.cizim-liste li { display: flex; align-items: center; gap: .5rem;
  font-family: "JetBrains Mono", monospace; font-size: .78rem; }
.cizim-liste li a { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ad-duzelt { flex: 0 0 auto; background: #fff; color: var(--mavi);
  border: 1px solid var(--cizgi); border-radius: 7px; padding: .3rem .55rem;
  font-size: .72rem; font-weight: 600; }
.ad-duzelt:hover { background: #eef3fb; border-color: var(--mavi); }
.form-aksiyon { display: flex; gap: .5rem; margin-top: .6rem; }
.form-aksiyon .geri { background: #fff; color: var(--murekkep);
  border: 1px solid var(--cizgi); border-radius: 8px; padding: .55rem .8rem; font-weight: 600; }
.form-aksiyon button[type="submit"] { background: var(--mavi); color: #fff;
  border: 1px solid transparent; border-radius: 8px; padding: .55rem .9rem; font-weight: 600; }

/* kart başlığı — tip solda, sil (✕) sağ üst köşede */
.kart-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.sil {
  flex: 0 0 auto;            /* köşe boşluğu .kart-bas-aksiyon'da; burada ek margin yok (! ile hizalı) */
  background: #fff; color: var(--murekkep-2); border: 1px solid var(--cizgi);
  width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 7px;
  font-size: .85rem; line-height: 1; display: grid; place-items: center;
}
.sil:hover { background: var(--kirmizi); color: #fff; border-color: var(--kirmizi); }

/* başlık sağ aksiyonları: acil (!) + sil (✕) */
.kart-bas-aksiyon { flex: 0 0 auto; display: flex; gap: .3rem; margin: -.15rem -.2rem 0 0; }
.acil {
  background: #fff; color: var(--kirmizi); border: 1px solid var(--cizgi);
  width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 7px;
  font-weight: 800; font-size: 1.05rem; line-height: 1;
  display: grid; place-items: center; opacity: .2;       /* basılmadıkça saydam */
}
.acil:hover { opacity: .55; }
.acil.aktif { opacity: 1; border-color: var(--kirmizi); }  /* öncelikli → kırmızı ! */

/* Çizim/Not buton satırı + "Not var" rozeti */
.kart-ekstra { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .45rem; }
.kart-ekstra .cizim-ekle { margin-top: 0; }
.not-ekle {
  position: relative; background: #fff; color: var(--mavi); border: 1px dashed var(--mavi);
  border-radius: 8px; padding: .4rem .7rem; font-size: .8rem; font-weight: 600;
}
.not-ekle:hover { background: #eef3fb; }
.not-rozet {
  position: absolute; top: -.45rem; right: -.45rem;
  background: var(--sari); color: #fff; font-weight: 800;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  font-size: .72rem; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 0 0 2px #fff;
}

/* Çizim Görüntüle — dış görüntüleyiciye açan buton (teknik teal) */
.cizim-goruntule {
  background: #fff; color: var(--asama-tamam); border: 1px solid var(--asama-tamam);
  border-radius: 8px; padding: .4rem .7rem; font-size: .8rem; font-weight: 600;
}
.cizim-goruntule:hover { background: #e6f4f5; }

/* Çizim Görüntüle modalı — yerleşik tezgah-yolu görüntüleyici */
.tap-modal { width: min(760px, 100%); }
.tap-viewer { margin: .5rem 0 .4rem; }
.tap-dosyalar { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; }
.tap-dosya {
  background: #fff; color: var(--murekkep); border: 1px solid var(--cizgi);
  border-radius: 7px; padding: .35rem .6rem; font-size: .76rem; font-weight: 600;
  font-family: "JetBrains Mono", monospace; cursor: pointer; overflow-wrap: anywhere;
}
.tap-dosya:hover { border-color: var(--asama-tamam); }
.tap-dosya.aktif { background: var(--asama-tamam); color: #fff; border-color: var(--asama-tamam); }
.tap-dosya.gizli { display: none; }
.tap-tekad { margin: 0 0 .5rem; color: var(--murekkep-2);
  font-family: "JetBrains Mono", monospace; font-size: .78rem; overflow-wrap: anywhere; }
.tap-kanvas {
  display: block; width: 100%; height: 62vh; max-height: 520px; min-height: 300px;
  background: #0e1a24; border: 1px solid var(--cizgi); border-radius: 10px;
  touch-action: none;   /* sürükle/yakınlaştır tarayıcı jestlerini bastır */
}
.tap-cap { margin-top: .5rem; text-align: center; color: var(--asama-tamam);
  font-family: "JetBrains Mono", monospace; font-size: .82rem; font-weight: 600; }
.gv-not { margin: .35rem 0 0; color: var(--murekkep-2); font-size: .78rem; text-align: center; }

/* kart eylem satırı — hizalı, eşit genişlikte butonlar */
.kart-aksiyon { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.kart-aksiyon button {
  flex: 1 1 auto; padding: .6rem .7rem; border-radius: 8px;
  border: 1px solid transparent; font-weight: 600; letter-spacing: .01em;
}
.kart-aksiyon .ileri { background: var(--mavi); color: #fff; }        /* Üretime Al / Bitir */
.kart-aksiyon .ileri:hover { background: var(--mavi-koyu); }
.kart-aksiyon .geri, .kart-aksiyon .duzenle {                          /* ← Geri / Düzenle */
  background: #fff; color: var(--murekkep); border-color: var(--cizgi);
}
.kart-aksiyon .geri:hover, .kart-aksiyon .duzenle:hover { background: #eef1f4; }

/* Tamamlandı durum seçici */
.durum-sec {
  display: block; margin-top: .6rem; font-size: .78rem; color: var(--murekkep-2);
  letter-spacing: .04em; text-transform: uppercase;
}
.durum-sec select {
  display: block; width: 100%; margin-top: .25rem;
  padding: .55rem .6rem; border: 1px solid var(--cizgi); border-radius: 8px;
  background: #fff; font-weight: 600; color: var(--murekkep);
}

/* Kargo takip (Yurtiçi) — durum "Kargolandı" olunca gönderi kodu + takip */
.kargo-satir { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.kargo-takip {
  flex: 1 1 auto; text-align: center; background: var(--asama-tamam); color: #fff;
  border: none; cursor: pointer; text-decoration: none; border-radius: 8px; padding: .5rem .7rem;
  font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.kargo-takip:hover { background: #0b6870; }
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.kargo-kod-duzelt {
  flex: 0 0 auto; background: #fff; color: var(--murekkep-2); border: 1px solid var(--cizgi);
  width: 2.1rem; height: 2.1rem; border-radius: 8px; font-size: .85rem; cursor: pointer;
  display: grid; place-items: center;
}
.kargo-kod-duzelt:hover { border-color: var(--asama-tamam); color: var(--asama-tamam); }
.kargo-kod-gir {
  flex: 1 1 auto; background: #fff; color: var(--asama-tamam); border: 1px dashed var(--asama-tamam);
  border-radius: 8px; padding: .5rem .7rem; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.kargo-kod-gir:hover { background: #e6f4f5; }
.g-kargo {
  display: inline-block; margin-top: .2rem; background: #fff; cursor: pointer;
  border: 1px solid var(--asama-tamam); color: var(--asama-tamam); border-radius: 7px;
  padding: .25rem .5rem; font-size: .76rem; font-weight: 600;
}
.g-kargo:hover { background: #e6f4f5; }

/* Kargo Durumu modalı — canlı durum + hareket zaman çizelgesi */
.kargo-hata { margin: .2rem 0 .6rem; color: var(--kirmizi); font-weight: 600; }
.kargo-dis { color: var(--asama-tamam); font-weight: 600; text-decoration: none; }
.kargo-dis:hover { text-decoration: underline; }
.kargo-ozet {
  margin: .2rem 0 1rem; padding: .8rem 1rem; border-radius: 10px;
  background: #eef7f8; border: 1px solid #cfe6e8; display: flex; flex-direction: column; gap: .2rem;
}
.kargo-ozet.teslim { background: #eaf6ee; border-color: #c7e6d1; }
.ko-durum { font-family: "Saira Condensed", sans-serif; font-weight: 700; font-size: 1.25rem;
  letter-spacing: .02em; color: var(--asama-tamam); }
.kargo-ozet.teslim .ko-durum { color: var(--yesil); }
.ko-alt { font-size: .82rem; color: var(--murekkep-2); }
.kargo-hareket { list-style: none; margin: 0; padding: 0 0 0 .3rem; }
.kargo-hareket li { position: relative; display: flex; gap: .7rem; padding: 0 0 1rem 1rem; }
.kargo-hareket li::before {           /* dikey bağlayıcı çizgi */
  content: ""; position: absolute; left: .28rem; top: .35rem; bottom: -.15rem;
  width: 2px; background: var(--cizgi);
}
.kargo-hareket li:last-child::before { display: none; }
.kh-nokta {
  position: absolute; left: 0; top: .25rem; width: .62rem; height: .62rem; border-radius: 50%;
  background: #fff; border: 2px solid var(--cizgi); z-index: 1;
}
.kargo-hareket li.aktif .kh-nokta { background: var(--asama-tamam); border-color: var(--asama-tamam); }
.kh-govde { display: flex; flex-direction: column; gap: .1rem; }
.kh-aciklama { font-weight: 600; color: var(--murekkep); font-size: .88rem; }
.kargo-hareket li.aktif .kh-aciklama { color: var(--asama-tamam); }
.kh-meta { font-size: .76rem; color: var(--murekkep-2); font-family: "JetBrains Mono", monospace; }

/* ---------------------------- STOK kolonu (sağda) ---------------------------- */
.stok {
  flex: 0 0 260px; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r);
}
.stok-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .7rem .9rem; background: var(--murekkep); color: #fff;
  box-shadow: inset 0 -3px 0 var(--murekkep-2);
}
.stok-bar h2 {
  font-weight: 700; font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase;
}
.stok-bar button {
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25);
  padding: .45rem .7rem; border-radius: 8px; font-weight: 600; font-size: .82rem; white-space: nowrap;
}
.stok-bar button:hover { background: rgba(255,255,255,.26); }
.stok-liste {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: .7rem; display: flex; flex-direction: column; gap: .5rem;
}
.malzeme {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: .5rem;
  background: #fbfcfd; border: 1px solid var(--cizgi); border-radius: 9px;
  padding: .5rem .6rem .55rem;
}
.malzeme-ad { font-size: .82rem; color: var(--murekkep-2); line-height: 1.25; }
.malzeme-miktar {
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 1rem; white-space: nowrap;
}
/* gösterge çizgisi — yeşil/sarı/kırmızı güvenlik bandı, çentikli */
.malzeme-cizgi {
  grid-column: 1 / -1; margin-top: .35rem;
  height: 7px; border-radius: 999px; background: var(--cizgi);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 9px);
}
.malzeme-cizgi.yesil   { background-color: var(--yesil); }
.malzeme-cizgi.sari    { background-color: var(--sari); }
.malzeme-cizgi.kirmizi { background-color: var(--kirmizi); }
/* kritik malzemeyi kart çerçevesiyle de vurgula */
.malzeme:has(.kirmizi) { border-color: var(--kirmizi); box-shadow: 0 0 0 1px var(--kirmizi) inset; }

/* ----------------------------- Modal ----------------------------- */
#modal:not(:empty) {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(11,17,23,.55);
  display: grid; place-items: start center;
  padding: 4vh 1rem; overflow-y: auto;
  animation: modal-bg .15s ease;
}
@keyframes modal-bg { from { opacity: 0; } to { opacity: 1; } }
.modal-ic {
  width: min(560px, 100%); background: var(--kart); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden;
  animation: modal-in .18s ease;
}
@keyframes modal-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-bas {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem; background: var(--murekkep); color: #fff;
}
.modal-bas h2 { font-weight: 700; font-size: 1.35rem; letter-spacing: .04em; }
.cikis {
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
  padding: .45rem .8rem; border-radius: 8px; font-weight: 600;
}
.cikis:hover { background: rgba(255,255,255,.24); }

/* modal form */
.modal-ic form { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: .7rem; }
.modal-ic label { display: grid; gap: .25rem; font-size: .8rem; color: var(--murekkep-2);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.modal-ic input, .modal-ic select {
  padding: .7rem .75rem; border: 1px solid var(--cizgi); border-radius: 8px;
  background: #fff; color: var(--murekkep); font-weight: 500; text-transform: none; letter-spacing: 0;
}
.modal-ic input:focus, .modal-ic select:focus {
  outline: 2px solid var(--mavi); outline-offset: 1px; border-color: var(--mavi);
}
.modal-ic fieldset {
  border: 1px solid var(--cizgi); border-radius: 10px; padding: .8rem; display: grid; gap: .55rem;
}
.modal-ic legend { font-family: "Saira Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; padding: 0 .4rem; }
/* yeni müşteri girişleri büyük harf görünür (sunucuda da büyütülür) */
.modal-ic fieldset input,
.musteri-ekle input { text-transform: uppercase; }
.modal-ic > form > button[type="submit"],
.modal-ic form button[type="submit"] {
  margin-top: .3rem; background: var(--mavi); color: #fff; border: none;
  padding: .85rem 1rem; border-radius: 9px; font-weight: 700; font-size: 1.05rem; letter-spacing: .02em;
}
.modal-ic form button[type="submit"]:hover { background: var(--mavi-koyu); }

/* ödeme onayı */
.onay p { padding: 1.2rem 1.2rem 0; margin: 0; font-size: 1.05rem; }
.onay-butonlar { display: flex; gap: .8rem; padding: 1.1rem 1.2rem 1.3rem; }
.onay-butonlar button { flex: 1; padding: .9rem; border-radius: 9px; border: none; font-weight: 700; font-size: 1.05rem; }
.onay .evet { background: var(--yesil); color: #fff; }
.onay .evet:hover { background: #176E3D; }
.onay .hayir { background: #fff; color: var(--murekkep); border: 1px solid var(--cizgi); }
.onay .hayir:hover { background: #eef1f4; }

/* stok düzelt listesi */
.stok-duzelt-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem;
  max-height: 55vh; overflow-y: auto;
}
.stok-duzelt-liste label { gap: .3rem; }
.stok-duzelt-liste label.kirmizi { color: var(--kirmizi); }
.stok-duzelt-liste label.sari { color: #9a7000; }

/* ----------------------------- Arşiv ----------------------------- */
.modal-ic.arsiv { width: min(880px, 100%); }

/* sipariş formundaki "yeni müşteri" düğmesi → Arşiv'i açar */
.musteri-ac {
  margin-top: .2rem; background: #fff; color: var(--mavi);
  border: 1px dashed var(--mavi); border-radius: 8px; padding: .6rem .8rem; font-weight: 600;
}
.musteri-ac:hover { background: #eef3fb; }

.arsiv-arac { padding: 1rem 1.2rem .2rem; }
.arsiv-ara {
  width: 100%; padding: .7rem .85rem; border: 1px solid var(--cizgi);
  border-radius: 9px; background: #fff; font-size: 1rem;
}
.arsiv-ara:focus { outline: 2px solid var(--mavi); outline-offset: 1px; border-color: var(--mavi); }

.arsiv-govde {
  display: grid; grid-template-columns: 290px 1fr; gap: 1rem; padding: .8rem 1.2rem 1.3rem;
}
.arsiv-sol { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }

.musteri-liste { max-height: 48vh; overflow-y: auto; }
.musteri-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.musteri-liste li {
  display: grid; gap: .1rem; padding: .55rem .7rem; cursor: pointer;
  border: 1px solid var(--cizgi); border-radius: 9px; background: #fff;
}
.musteri-liste li:hover { background: #eef3fb; border-color: var(--mavi); }
.ml-ad { font-weight: 700; font-size: .98rem; }
.ml-alt { font-size: .78rem; color: var(--murekkep-2); }
.ml-bos { cursor: default; background: #f6f7f9; color: var(--murekkep-2); text-align: center; font-size: .85rem; }
.ml-bos:hover { background: #f6f7f9; border-color: var(--cizgi); }

/* yeni müşteri — açılır panel */
.musteri-ekle { border: 1px solid var(--cizgi); border-radius: 9px; background: #f6f7f9; }
.musteri-ekle summary {
  cursor: pointer; color: var(--mavi); font-weight: 700; list-style: none;
  padding: .6rem .75rem; user-select: none;
}
.musteri-ekle summary::-webkit-details-marker { display: none; }
.musteri-ekle[open] summary { border-bottom: 1px solid var(--cizgi); }
.musteri-ekle form { padding: .7rem .75rem; display: grid; gap: .5rem; }
.musteri-ekle input {
  padding: .6rem .7rem; border: 1px solid var(--cizgi); border-radius: 8px; background: #fff;
}
.musteri-ekle button[type="submit"] {
  margin-top: .15rem; background: var(--yesil); color: #fff; border: none;
  padding: .65rem; border-radius: 8px; font-weight: 700;
}
.musteri-ekle button[type="submit"]:hover { background: #176E3D; }

/* sağ detay */
.musteri-detay {
  border: 1px solid var(--cizgi); border-radius: 10px; background: #fff;
  padding: 1rem 1.1rem; min-height: 220px; max-height: 52vh; overflow-y: auto;
}
.detay-bos {
  display: grid; place-items: center; min-height: 200px; height: 100%;
  color: var(--murekkep-2); text-align: center; font-size: .92rem;
}
.detay-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.musteri-sil {
  flex: 0 0 auto; background: #fff; color: var(--kirmizi); border: 1px solid #e7c4c1;
  border-radius: 8px; padding: .45rem .7rem; font-weight: 600; font-size: .82rem; white-space: nowrap;
}
.musteri-sil:hover { background: var(--kirmizi); color: #fff; border-color: var(--kirmizi); }
.detay-bas-aksiyon { flex: 0 0 auto; display: flex; gap: .4rem; }
.musteri-duzenle {
  flex: 0 0 auto; background: #fff; color: var(--mavi); border: 1px solid var(--cizgi);
  border-radius: 8px; padding: .45rem .7rem; font-weight: 600; font-size: .82rem; white-space: nowrap;
}
.musteri-duzenle:hover { background: #eef3fb; border-color: var(--mavi); }
.musteri-duzelt-form { display: grid; gap: .55rem; margin-top: .9rem; }
.musteri-duzelt-form input {
  padding: .6rem .7rem; border: 1px solid var(--cizgi); border-radius: 8px;
  background: #fff; text-transform: uppercase;
}
.musteri-duzelt-form input:focus {
  outline: 2px solid var(--mavi); outline-offset: 1px; border-color: var(--mavi);
}
.musteri-duzelt-form button[type="submit"] {
  margin-top: .15rem; background: var(--mavi); color: #fff; border: none;
  padding: .7rem; border-radius: 8px; font-weight: 700;
}
.musteri-duzelt-form button[type="submit"]:hover { background: var(--mavi-koyu); }
.form-hata { margin: .6rem 0 0; color: var(--kirmizi); font-size: .85rem; font-weight: 600; }
.g-sil {
  flex: 0 0 auto; background: transparent; color: var(--murekkep-2);
  border: 1px solid var(--cizgi); border-radius: 6px;
  width: 1.6rem; height: 1.6rem; padding: 0; font-size: .72rem; line-height: 1;
  display: grid; place-items: center;
}
.g-sil:hover { background: var(--kirmizi); color: #fff; border-color: var(--kirmizi); }
.musteri-bilgi h3 { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.detay-iletisim { margin: .35rem 0 0; font-weight: 500; }
.detay-adres { margin: .2rem 0 0; color: var(--murekkep-2); font-size: .9rem; }
.musteri-bilgi h4 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--murekkep-2);
  margin: 1rem 0 .45rem; padding-top: .8rem; border-top: 1px dashed var(--cizgi);
}
/* Sipariş Geçmişi çok satırda taşmasın → kendi içinde kaydırılabilir */
.gecmis { list-style: none; margin: 0; padding: 0 .25rem 0 0; display: grid; gap: .4rem;
  max-height: 32vh; overflow-y: auto; }
.gecmis li {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  padding: .5rem .6rem; background: #f6f7f9; border: 1px solid var(--cizgi); border-radius: 8px;
}
.g-tip { font-family: "Saira Condensed", sans-serif; font-weight: 700; font-size: 1.02rem; }
.g-kod, .g-olcu { font-family: "JetBrains Mono", monospace; font-size: .76rem; color: var(--murekkep-2); }
.g-rozet {
  margin-left: auto; font-size: .72rem; font-weight: 700; white-space: nowrap;
  padding: .2rem .55rem; border-radius: 999px; color: #fff; background: var(--murekkep-2);
}
.g-rozet[data-asama="Sipariş"]    { background: var(--asama-siparis); }
.g-rozet[data-asama="Üretimde"]   { background: var(--asama-uretim); }
.g-rozet[data-asama="Tamamlandı"] { background: var(--asama-tamam); }

/* ----------------------------- Giriş ----------------------------- */
.login {
  max-width: 360px; margin: 12vh auto; padding: 2rem 1.6rem;
  display: grid; gap: .9rem; background: var(--kart);
  border: 1px solid var(--cizgi); border-top: 4px solid var(--mavi);
  border-radius: 14px; box-shadow: var(--golge);
}
.login h1 {
  font-weight: 700; font-size: 1.7rem; text-transform: uppercase; letter-spacing: .06em;
  text-align: center; margin-bottom: .3rem;
}
.login input {
  padding: .8rem .85rem; border: 1px solid var(--cizgi); border-radius: 9px;
}
.login input:focus { outline: 2px solid var(--mavi); outline-offset: 1px; border-color: var(--mavi); }
.login button {
  background: var(--mavi); color: #fff; border: none; padding: .85rem;
  border-radius: 9px; font-weight: 700; font-size: 1.05rem;
}
.login button:hover { background: var(--mavi-koyu); }
.hata { color: var(--kirmizi); margin: 0; text-align: center; font-weight: 600; }

/* ----------------------------- Erişim ----------------------------- */
:focus-visible { outline: 2px solid var(--mavi); outline-offset: 2px; }

/* ----------------------------- Mobil ----------------------------- */
@media (max-width: 800px) {
  /* mobilde tam-ekran kilidi yerine doğal sayfa kaydırması */
  html:has(.uygulama), body:has(.uygulama) { height: auto; overflow: visible; }
  .uygulama { height: auto; overflow: visible; }
  .calisma { flex-direction: column; }
  .pano { grid-template-columns: 1fr; grid-template-rows: none; }
  .kolon, .kolon-icerik { overflow: visible; min-height: 0; }
  .stok { flex: 0 0 auto; }
  .stok-liste { overflow: visible; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .arsiv-govde { grid-template-columns: 1fr; }
  .ust-bar h1 { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, .kart, #modal:not(:empty), .modal-ic { animation: none !important; transition: none !important; }
}