/* SKU Kayıt — sevimli ama net arayüz. Yazı tipi Nunito (yerel, SIL OFL). Renk tek başına anlam taşımaz:
   her durumda simge + yazı (+ maskot ifadesi) birlikte verilir. Metin renkleri zeminleriyle en az 4.5:1 kontrastlı. */
@import url('/fonts/nunito/400.css');
@import url('/fonts/nunito/600.css');
@import url('/fonts/nunito/700.css');
@import url('/fonts/nunito/800.css');

:root {
  --zemin: #fff8f1;
  --zemin-2: #f6efff;
  --kart: #ffffff;
  --yazi: #2b2340;
  --soluk: #5f5675;
  --cizgi: #e7dcf4;
  --cizgi-koyu: #c9b8e8;
  --ana: #6d4aff;
  --ana-koyu: #5536e0;
  --ana-acik: #efe9ff;
  --basari: #11734b;
  --basari-zemin: #ddf8ea;
  --basari-kenar: #7fd8a6;
  --tekrar: #1b5fb8;
  --tekrar-zemin: #e1eeff;
  --tekrar-kenar: #9cc3f5;
  --uyari: #9a4a00;
  --uyari-zemin: #ffebd6;
  --uyari-kenar: #ffbe7a;
  --hata: #b42318;
  --hata-zemin: #ffe4e1;
  --hata-kenar: #ff9c91;
  --belirsiz: #7a5600;
  --belirsiz-zemin: #fff4c7;
  --belirsiz-kenar: #f2cf55;
  --bekle: #4f4766;
  --bekle-zemin: #f1eef7;
  --odak: #ffb703;
  --golge: 0 8px 24px rgba(109, 74, 255, 0.10), 0 2px 6px rgba(43, 35, 64, 0.06);
  --golge-buyuk: 0 18px 40px rgba(109, 74, 255, 0.16);
  --yaricap: 22px;
  --yazi-boyu: 18px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--zemin); color: var(--yazi); font: 600 var(--yazi-boyu)/1.45 Nunito, "Segoe UI", system-ui, sans-serif; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.01em; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--ana-koyu); font-weight: 700; }
.kod { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.02em; font-weight: 700; }
.not { color: var(--soluk); font-size: 0.92em; font-weight: 600; }

button {
  min-height: 52px; padding: 10px 20px; border: 2px solid var(--cizgi-koyu); border-radius: 16px;
  background: var(--kart); cursor: pointer; font-weight: 800; box-shadow: 0 2px 0 var(--cizgi);
  transition: transform .08s ease, box-shadow .08s ease, background .15s;
}
button:hover:not(:disabled) { background: var(--zemin-2); }
button:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
button.ana { background: var(--ana); border-color: var(--ana-koyu); color: #fff; box-shadow: 0 3px 0 var(--ana-koyu); }
button.ana:hover:not(:disabled) { background: var(--ana-koyu); }
button.tehlike { color: var(--hata); border-color: var(--hata-kenar); }
button.hafif { min-height: 40px; padding: 6px 14px; font-size: 0.9rem; border-radius: 999px; box-shadow: none; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
:focus-visible { outline: 4px solid var(--odak); outline-offset: 2px; }
input, select, textarea {
  min-height: 50px; padding: 10px 14px; border: 2px solid var(--cizgi-koyu); border-radius: 14px; background: #fff; font-weight: 700;
}
input:focus, select:focus, textarea:focus { border-color: var(--ana); outline: 3px solid var(--ana-acik); outline-offset: 0; }
label { font-weight: 800; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
th { background: var(--zemin-2); position: sticky; top: 0; font-weight: 800; }

.kart { background: var(--kart); border-radius: var(--yaricap); box-shadow: var(--golge); padding: 18px 20px; }
.kutu { background: var(--kart); border: 2px solid var(--cizgi); border-radius: 18px; padding: 14px 16px; margin: 12px 0; }
.satir { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Durum rozetleri: simge + yazı + renk */
.rozet { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-weight: 800; border: 2px solid; white-space: nowrap; font-size: 0.92rem; }
.basari { color: var(--basari); background: var(--basari-zemin); border-color: var(--basari-kenar); }
.tekrar { color: var(--tekrar); background: var(--tekrar-zemin); border-color: var(--tekrar-kenar); }
.uyari { color: var(--uyari); background: var(--uyari-zemin); border-color: var(--uyari-kenar); }
.kontrol, .hata { color: var(--hata); background: var(--hata-zemin); border-color: var(--hata-kenar); }
.belirsiz { color: var(--belirsiz); background: var(--belirsiz-zemin); border-color: var(--belirsiz-kenar); }
.sirada, .kaydediliyor { color: var(--bekle); background: var(--bekle-zemin); border-color: var(--cizgi-koyu); }

/* Maskot hareketleri (hareket azaltma tercihi varsa kapalı) */
.maskot { overflow: visible; display: block; }
.maskot .m-govde { transform-origin: 80px 140px; }
.maskot-mutlu .m-govde { animation: zipla .6s ease; }
.maskot-uzgun .m-govde { animation: salla .45s ease; }
.maskot .m-el-salla { animation: elsalla 1.2s ease-in-out infinite; transform-origin: 120px 96px; }
.maskot .m-nokta { animation: nokta 1.2s infinite; }
.maskot .m-nokta-1 { animation-delay: .2s; }
.maskot .m-nokta-2 { animation-delay: .4s; }
.maskot .m-z { animation: nokta 2s infinite; }
.maskot .m-z2 { animation-delay: .7s; }
.maskot .m-parilti { animation: parilti 1s ease-out; transform-origin: center; transform-box: fill-box; }
@keyframes zipla { 0% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-14px) scale(.97, 1.03); } 60% { transform: translateY(0) scale(1.04, .96); } 100% { transform: none; } }
@keyframes salla { 0%, 100% { transform: none; } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes elsalla { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } }
@keyframes nokta { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes parilti { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); } }
@keyframes nabiz { 0%, 100% { box-shadow: 0 0 0 0 rgba(109, 74, 255, .35); } 50% { box-shadow: 0 0 0 10px rgba(109, 74, 255, 0); } }
@media (prefers-reduced-motion: reduce) { *, .maskot * { animation: none !important; transition: none !important; } }

/* ---------------- Giriş ---------------- */
.giris { max-width: 460px; margin: 6vh auto; padding: 0 16px; }
.giris .kart { padding: 28px 28px 24px; text-align: center; }
.giris .maskot { margin: -78px auto 4px; filter: drop-shadow(0 8px 12px rgba(109, 74, 255, .18)); }
.giris h1 { margin: 6px 0 2px; font-size: 2rem; }
.giris form { display: grid; gap: 10px; text-align: left; margin-top: 14px; }
.giris .hata-kutu { padding: 12px; border: 2px solid var(--hata-kenar); color: var(--hata); background: var(--hata-zemin); border-radius: 14px; }
.giris button.ana { min-height: 58px; font-size: 1.15rem; margin-top: 6px; }

/* ---------------- Çalışan ekranı ---------------- */
body.calis { min-height: 100vh; background: radial-gradient(1200px 500px at 85% -10%, #f1e9ff 0%, transparent 60%), var(--zemin); }
.ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 20px; flex-wrap: wrap; }
.marka { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.3rem; }
.marka .maskot { width: 46px; height: 46px; }
.ust-sag { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kullanici-rozet { padding: 6px 14px; border-radius: 999px; background: var(--kart); box-shadow: var(--golge); font-weight: 800; }
.baglanti { padding: 6px 14px; border-radius: 999px; font-weight: 800; border: 2px solid; }
.baglanti.var { color: var(--basari); background: var(--basari-zemin); border-color: var(--basari-kenar); }
.baglanti.yok { color: var(--hata); background: var(--hata-zemin); border-color: var(--hata-kenar); }

.adimlar { list-style: none; display: flex; gap: 8px; margin: 0 20px 10px; padding: 0; flex-wrap: wrap; counter-reset: adim; }
.adimlar li { counter-increment: adim; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--kart); color: var(--soluk); font-weight: 800; border: 2px solid var(--cizgi); }
.adimlar li::before { content: counter(adim); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bekle-zemin); color: var(--bekle); }
.adimlar li.tamam { color: var(--basari); border-color: var(--basari-kenar); }
.adimlar li.tamam::before { content: "✔"; background: var(--basari-zemin); color: var(--basari); }
.adimlar li.simdi { color: #fff; background: var(--ana); border-color: var(--ana-koyu); }
.adimlar li.simdi::before { background: #fff; color: var(--ana-koyu); }

main.calis-ana { padding: 0 20px 40px; max-width: 1280px; margin: 0 auto; }
.konum-kart { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 22px; border: 3px solid var(--ana); background: linear-gradient(135deg, #fff 0%, var(--ana-acik) 100%); }
.konum-kart.yok { border-color: var(--uyari-kenar); background: linear-gradient(135deg, #fff 0%, var(--uyari-zemin) 100%); }
.konum-etiket { font-size: .95rem; color: var(--soluk); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.konum-buyuk { font-size: clamp(1.7rem, 4.2vw, 2.9rem); font-weight: 800; line-height: 1.1; }
.konum-buyuk .ayrac { color: var(--cizgi-koyu); margin: 0 .25em; }

.izgara { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 18px; margin-top: 16px; align-items: start; }
.okutma-baslik { display: block; font-size: 1.35rem; margin-bottom: 8px; }
.okutma-alan { position: relative; }
.okutma-alan svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; color: var(--ana); pointer-events: none; }
#okutma { width: 100%; font-size: clamp(1.5rem, 3.4vw, 2.2rem); min-height: 78px; padding-left: 72px; border: 4px solid var(--cizgi-koyu); border-radius: 20px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
#okutma:focus { border-color: var(--ana); outline: none; animation: nabiz 2.2s infinite; }
#okutma::placeholder { color: #a99fc0; font-family: Nunito, sans-serif; font-size: .7em; font-weight: 700; }
.hazirlik { margin-top: 10px; padding: 10px 16px; border-radius: 16px; font-size: 1.15rem; font-weight: 800; border: 2px solid; }
.hazirlik.hazir { color: var(--basari); background: var(--basari-zemin); border-color: var(--basari-kenar); }
.hazirlik.degil { color: var(--hata); background: var(--hata-zemin); border-color: var(--hata-kenar); cursor: pointer; font-size: 1.3rem; }
.yarim { margin-top: 8px; padding: 8px 14px; background: var(--belirsiz-zemin); color: var(--belirsiz); border: 2px dashed var(--belirsiz-kenar); border-radius: 14px; font-weight: 800; }

.sonuc { display: grid; grid-template-columns: 136px 1fr; gap: 16px; align-items: center; margin-top: 16px; padding: 16px 18px; border-radius: 22px; border: 3px solid var(--cizgi); background: #fff; min-height: 190px; }
.sonuc .maskot { width: 132px; height: 132px; }
.sonuc.basari { border-color: var(--basari-kenar); background: linear-gradient(135deg, #fff, var(--basari-zemin)); }
.sonuc.tekrar { border-color: var(--tekrar-kenar); background: linear-gradient(135deg, #fff, var(--tekrar-zemin)); }
.sonuc.uyari { border-color: var(--uyari-kenar); background: linear-gradient(135deg, #fff, var(--uyari-zemin)); }
.sonuc.kontrol, .sonuc.hata { border-color: var(--hata-kenar); background: linear-gradient(135deg, #fff, var(--hata-zemin)); }
.sonuc.belirsiz { border-color: var(--belirsiz-kenar); background: linear-gradient(135deg, #fff, var(--belirsiz-zemin)); }
.sonuc.sirada, .sonuc.kaydediliyor { border-color: var(--cizgi-koyu); background: linear-gradient(135deg, #fff, var(--bekle-zemin)); }
.sonuc-baslik { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; line-height: 1.15; }
.sonuc.basari .sonuc-baslik { color: var(--basari); }
.sonuc.tekrar .sonuc-baslik { color: var(--tekrar); }
.sonuc.uyari .sonuc-baslik { color: var(--uyari); }
.sonuc.kontrol .sonuc-baslik, .sonuc.hata .sonuc-baslik { color: var(--hata); }
.sonuc.belirsiz .sonuc-baslik { color: var(--belirsiz); }
.sonuc-sku-kutu { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.sonuc-sku-etiket { font-size: .95rem; font-weight: 800; color: var(--soluk); background: var(--zemin-2); padding: 2px 10px; border-radius: 999px; }
#sonuc-sku { font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 800; line-height: 1.05; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.sonuc-barkod { margin-top: 2px; color: var(--soluk); }
.sonuc-mesaj { margin-top: 6px; font-size: 1.08rem; }
.ipucu { margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: var(--belirsiz-zemin); color: var(--belirsiz); border: 2px solid var(--belirsiz-kenar); font-weight: 800; }
.sonuc-eylem { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.cesit-liste { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.cesit-liste li { display: flex; gap: 10px; align-items: baseline; padding: 6px 12px; border-radius: 12px; background: #fff; border: 2px solid var(--tekrar-kenar); }
.cesit-liste .kod { font-size: 1.4rem; }
.bos-rehber { display: grid; gap: 6px; margin: 6px 0 0; padding-left: 0; list-style: none; }
.bos-rehber li { display: flex; gap: 10px; align-items: center; }
.bos-rehber li span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ana-acik); color: var(--ana-koyu); font-weight: 800; flex: 0 0 auto; }
.bekleyen { margin-top: 10px; font-weight: 800; color: var(--soluk); }
.bekleyen .uyari-yazi { color: var(--belirsiz); }

.gecmis-kart h2 { margin: 0 0 10px; font-size: 1.25rem; }
.gecmis-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gecmis-liste li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 12px; border-radius: 14px; background: var(--zemin); border: 2px solid var(--cizgi); }
.gecmis-liste .g-saat { color: var(--soluk); font-size: .85rem; }
.gecmis-liste .g-sku { font-size: 1.25rem; text-align: right; }
.gecmis-liste .g-barkod { grid-column: 1 / -1; font-size: .9rem; color: var(--soluk); }
.gecmis-liste .rozet { grid-column: 1 / -1; justify-self: start; }
.gecmis-bos { color: var(--soluk); text-align: center; padding: 16px; }

.eylemler { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 2px dashed var(--cizgi); }
.eylemler button { font-size: 1.02rem; display: inline-flex; gap: 8px; align-items: center; flex: 1 1 auto; justify-content: center; }
.eylemler svg { width: 22px; height: 22px; }

.devre-disi-perde { position: fixed; inset: 0; background: rgba(255, 248, 241, .97); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 24px; text-align: center; }
.devre-disi-perde .kart { max-width: 620px; font-size: 1.2rem; }
.devre-disi-perde .maskot { margin: 0 auto 8px; }

/* Diyaloglar */
dialog { border: none; border-radius: 26px; padding: 24px 26px; max-width: min(760px, 94vw); width: 94vw; box-shadow: var(--golge-buyuk); background: #fff; }
dialog::backdrop { background: rgba(43, 35, 64, .45); backdrop-filter: blur(2px); }
dialog h2 { margin-top: 0; font-size: 1.65rem; }
.dlg-ust { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.dlg-ust .maskot { width: 84px; height: 84px; flex: 0 0 auto; }
.dlg-ust h2 { margin: 0; }
.dlg-eylem { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
.dlg-eylem button { min-width: 140px; }
.buyuk-konum { font-size: clamp(2rem, 6vw, 3.3rem); font-weight: 800; text-align: center; padding: 20px 10px; border: 4px dashed var(--ana); border-radius: 22px; margin: 12px 0; background: var(--ana-acik); color: var(--ana-koyu); line-height: 1.15; }
.dlg-hata { margin-top: 10px; padding: 10px 14px; border: 2px solid var(--hata-kenar); color: var(--hata); background: var(--hata-zemin); border-radius: 14px; font-weight: 800; }
.secimler { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.secimler label { display: grid; gap: 4px; }
.secimler select { width: 100%; }
.okut-alani { display: grid; gap: 6px; margin: 8px 0; }
.okut-alani input { font-size: 1.4rem; font-family: ui-monospace, Consolas, monospace; }
dialog.dur { border: 4px solid var(--hata-kenar); background: linear-gradient(160deg, #fff 30%, var(--hata-zemin)); }
dialog.dur h2 { color: var(--hata); font-size: 2rem; }
.dur-yer { margin: 8px 0; padding: 12px 14px; border-radius: 14px; background: var(--uyari-zemin); border: 2px solid var(--uyari-kenar); color: var(--yazi); }
.dur-yer .konum-buyuk { font-size: clamp(1.5rem, 3.6vw, 2.3rem); margin: 4px 0; }
.dur-ne-yap { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 2px solid var(--hata-kenar); font-size: 1.15rem; }
.onay-kutusu { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--zemin); border: 2px solid var(--cizgi); }
.onay-kutusu input { width: 24px; height: 24px; min-height: 0; }

/* ---------------- Yönetim ---------------- */
body.yonetim header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; flex-wrap: wrap; gap: 10px; }
body.yonetim header h1 { margin: 0; font-size: 1.45rem; display: flex; gap: 10px; align-items: center; }
body.yonetim header .maskot { width: 44px; height: 44px; }
nav.sekmeler { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 20px 12px; }
nav.sekmeler button { min-height: 42px; padding: 6px 16px; border-radius: 999px; box-shadow: none; }
nav.sekmeler button[aria-current="page"] { background: var(--ana); border-color: var(--ana-koyu); color: #fff; }
#icerik { padding: 6px 20px 60px; max-width: 1400px; margin: 0 auto; }
#icerik > .kutu, #icerik .kutu { box-shadow: var(--golge); border-color: transparent; }
.kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kart.sayi-kart { padding: 14px 16px; }
.kart .sayi, .kartlar .kart .sayi { font-size: 2.1rem; font-weight: 800; color: var(--ana-koyu); }
.kartlar > .kart { box-shadow: var(--golge); border: none; }
.tablo-kap { overflow-x: auto; max-height: 70vh; border: 2px solid var(--cizgi); border-radius: 16px; background: #fff; }
tr.secili td { background: #fff6d6; }
tr.tikla { cursor: pointer; }
tr.tikla:hover td { background: var(--zemin-2); }
details.bulgu { border: 2px solid var(--cizgi); border-radius: 18px; margin: 10px 0; background: #fff; }
details.bulgu > summary { padding: 12px 16px; cursor: pointer; font-weight: 800; }
details.bulgu .icerik { padding: 0 12px 12px; }
.mesaj-kutu { padding: 10px 14px; border-radius: 14px; margin: 10px 0; font-weight: 800; border: 2px solid; }
.mesaj-kutu.iyi { color: var(--basari); background: var(--basari-zemin); border-color: var(--basari-kenar); }
.mesaj-kutu.kotu { color: var(--hata); background: var(--hata-zemin); border-color: var(--hata-kenar); }
.mesaj-kutu.bilgi { color: var(--tekrar); background: var(--tekrar-zemin); border-color: var(--tekrar-kenar); }
.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: end; }
.form-izgara label { display: grid; gap: 4px; }
pre.sir { white-space: pre-wrap; word-break: break-all; background: var(--zemin-2); padding: 10px; border-radius: 12px; }

/* ---------------- Etiketler ---------------- */
body.etiketler { background: #fff; }
.etiket-arac { padding: 12px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.etiket-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; padding: 6mm; }
.etiket { border: 1px dashed #999; border-radius: 3mm; padding: 3mm; text-align: center; break-inside: avoid; }
.etiket .etk-konum { font-size: 15pt; font-weight: 800; }
.etiket svg { width: 100%; height: 16mm; }
.etiket .etk-kod { font-family: ui-monospace, Consolas, monospace; font-size: 10pt; }

@media (max-width: 960px) {
  .izgara { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --yazi-boyu: 17px; }
  .sonuc { grid-template-columns: 1fr; text-align: center; }
  .sonuc .maskot { margin: 0 auto; width: 104px; height: 104px; }
  .sonuc-sku-kutu, .sonuc-eylem { justify-content: center; }
  .eylemler button { flex: 1 1 44%; }
  .konum-kart { padding: 12px 16px; }
  .adimlar li { font-size: .85rem; }
}
@media print {
  .etiket-arac, nav, header { display: none !important; }
  .etiket { border-color: #ddd; }
}