/* Depo ve Tamir Takibi — atölye işaretlerinden esinlenen sade arayüz.
   Tek cesur öğe: sipariş gereken satırlardaki sarı-siyah ikaz bandı. */

:root {
    --zemin: #e9edf0;       /* beton */
    --yuzey: #ffffff;
    --murekkep: #1c2833;
    --celik: #5d6d7c;
    --cizgi: #cfd7de;
    --mavi: #1f4e8c;        /* plan / teknik çizim mavisi */
    --mavi-acik: #e3ecf7;
    --sari: #f2b705;        /* ikaz sarısı */
    --kirmizi: #b3261e;
    --kirmizi-acik: #fbe9e7;
    --yesil: #2f7a4a;
    --yesil-acik: #e5f3ea;
    --amber-acik: #fdf3d3;
    --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --yaricap: 6px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--zemin);
    color: var(--murekkep);
    font: 15px/1.5 var(--font);
}
a { color: var(--mavi); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; }

.kap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ---------- Üst çubuk ---------- */
.ust { background: var(--murekkep); color: #fff; border-bottom: 4px solid var(--sari); }
.ust-ic { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; flex-wrap: wrap; }
.logo { color: #fff; text-decoration: none; font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.logo-isaret {
    width: 22px; height: 22px; border-radius: 3px;
    background: repeating-linear-gradient(-45deg, var(--sari) 0 5px, var(--murekkep) 5px 10px);
    border: 2px solid var(--sari);
}
.ust nav { display: flex; gap: 4px; flex-wrap: wrap; }
.ust nav a { color: #c9d3dc; text-decoration: none; padding: 8px 12px; border-radius: var(--yaricap); }
.ust nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.ust nav a[aria-current] { color: var(--murekkep); background: var(--sari); font-weight: 600; }

.kullanici { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ust .kullanici a { color: #c9d3dc; text-decoration: none; padding: 8px 10px; border-radius: var(--yaricap); }
.ust .kullanici a[aria-current], .ust .kullanici a:hover { color: #fff; background: rgba(255,255,255,.08); }
button.cikis { background: none; border: 1px solid #4a5a6a; color: #c9d3dc; padding: 5px 12px; font-weight: 400; }
button.cikis:hover { background: rgba(255,255,255,.08); color: #fff; }
.giris-kutu { max-width: 380px; margin: 8vh auto 0; }
.giris-kutu .panel { border-top: 6px solid var(--sari); }

/* ---------- Başlıklar ---------- */
h1 { font-size: 26px; line-height: 1.2; margin: 28px 0 8px; letter-spacing: -0.01em; }
h2 { font-size: 16px; margin: 0 0 14px; }
h3 { font-size: 14px; margin: 22px 0 8px; color: var(--celik); }
.alt-baslik { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
.geri { margin-left: auto; font-size: 14px; }
.soluk { color: var(--celik); }
.kod { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.sayi { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sag { text-align: right; }

/* ---------- Bildirim ---------- */
.flash { padding: 10px 14px; border-radius: var(--yaricap); margin: 12px 0; border-left: 4px solid; }
.flash-ok { background: var(--yesil-acik); border-color: var(--yesil); }
.flash-hata { background: var(--kirmizi-acik); border-color: var(--kirmizi); }
.flash-bilgi { background: var(--mavi-acik); border-color: var(--mavi); }

/* ---------- Özet şeridi ---------- */
.ozet {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
    margin: 16px 0 20px; overflow: hidden;
}
.ozet > div { padding: 16px 18px; border-right: 1px solid var(--cizgi); display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 6px; }
.ozet > div:last-child { border-right: 0; }
.ozet span { grid-column: 1 / -1; color: var(--celik); font-size: 13px; }
.ozet strong { font-size: 30px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ozet small { color: var(--celik); }
.ozet .vurgu-kritik { box-shadow: inset 0 -4px 0 var(--kirmizi); }
.ozet .vurgu-kritik strong { color: var(--kirmizi); }

/* ---------- Paneller ---------- */
.panel { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 18px 20px; margin-bottom: 20px; }
details.panel > summary, .panel details > summary { cursor: pointer; font-weight: 600; list-style: none; }
details.panel > summary::before, .panel details > summary::before { content: "+"; display: inline-block; width: 1.2em; color: var(--mavi); font-weight: 700; }
details[open] > summary::before { content: "−"; }
details[open] > summary { margin-bottom: 14px; }
.iki-sutun { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 0 20px; }

.bos { color: var(--celik); padding: 18px; text-align: center; border: 1px dashed var(--cizgi); border-radius: var(--yaricap); margin: 0; }
.not { background: var(--amber-acik); padding: 10px 12px; border-radius: var(--yaricap); font-size: 14px; }

/* ---------- Formlar ---------- */
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type=checkbox]), select, textarea {
    width: 100%; padding: 7px 10px; border: 1px solid #b7c2cc; border-radius: var(--yaricap); background: #fff;
}
input:focus, select:focus, textarea:focus { border-color: var(--mavi); }
button {
    padding: 8px 16px; border-radius: var(--yaricap); border: 1px solid var(--mavi);
    background: var(--mavi); color: #fff; font-weight: 600; cursor: pointer; white-space: nowrap;
}
button:hover { background: #173c6d; }
button.ikincil { background: #fff; color: var(--mavi); }
button.ikincil:hover { background: var(--mavi-acik); }
.metin-dugme { background: none; border: 0; padding: 0; color: var(--mavi); font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
.metin-dugme:hover { background: none; }
.tehlike { color: var(--kirmizi); }

.izgara-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 14px; }
.izgara-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--celik); }
.izgara-form .genis { grid-column: 1 / -1; }
.izgara-form p { margin: 0; font-size: 13px; }
label.onay { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--murekkep) !important; font-size: 14px; }
.ayrac { border-top: 1px solid var(--cizgi); padding-top: 16px; margin-top: 16px; }
.sil-form { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--cizgi); margin-top: 18px; padding-top: 14px; }

.arac-cubugu { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.arama { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.arama input[type=search] { width: 260px; max-width: 100%; }

.satir-form { display: flex; gap: 6px; align-items: center; }
.satir-form select { width: auto; padding: 5px 6px; }
.satir-form input { width: 84px !important; padding: 5px 8px; }
.satir-form button { padding: 5px 10px; }

/* ---------- Tablolar ---------- */
.tablo-kap { overflow-x: auto; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); }
.panel .tablo-kap { border: 0; margin: 0 -20px; border-radius: 0; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--celik); padding: 10px 12px; border-bottom: 2px solid var(--cizgi); background: #f5f7f9; white-space: nowrap; }
td { padding: 9px 12px; border-bottom: 1px solid #e3e8ec; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fafb; }
td.islemler { white-space: nowrap; text-align: right; }
td.islemler > * { display: inline-block; margin-left: 10px; }

/* İkaz bandı: sipariş gereken satır */
tr.satir-kritik td:first-child {
    padding-left: 20px;
    background-image: repeating-linear-gradient(-45deg, var(--sari) 0 5px, var(--murekkep) 5px 10px);
    background-size: 8px 100%;
    background-repeat: no-repeat;
}
tr.satir-kritik { background: #fff8f7; }
tr.satir-uyari td:first-child { padding-left: 20px; box-shadow: inset 8px 0 0 var(--sari); }
.eksi { color: var(--kirmizi); }
.arti { color: var(--yesil); }

/* ---------- Rozetler ---------- */
.rozet { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rozet-kritik { background: var(--kirmizi); color: #fff; }
.rozet-uyari  { background: var(--sari); color: var(--murekkep); }
.rozet-normal { background: var(--yesil-acik); color: var(--yesil); }
.iade-bekliyor   { background: #eef1f4; color: var(--celik); }
.iade-tamirde    { background: var(--mavi-acik); color: var(--mavi); }
.iade-tamamlandi { background: var(--yesil-acik); color: var(--yesil); }
.iade-hurda      { background: var(--kirmizi-acik); color: var(--kirmizi); }
.iade-teslim     { background: #e9e4f2; color: #4f3c80; }
select.durum-sec { border-color: transparent; font-weight: 600; font-size: 13px; border-radius: 999px; }
.otomatik { font-size: 11px; color: var(--mavi); border: 1px solid #a9bfdc; border-radius: 4px; padding: 0 4px; margin-left: 6px; vertical-align: 1px; }
.tur { font-size: 13px; }
.tur-tamir { color: var(--mavi); font-weight: 600; }
.tur-sayim { color: var(--celik); font-style: italic; }

/* ---------- Sekmeler ---------- */
.sekmeler { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; border-bottom: 2px solid var(--cizgi); }
.sekmeler a { padding: 8px 12px; text-decoration: none; color: var(--celik); margin-bottom: -2px; border-bottom: 2px solid transparent; }
.sekmeler a[aria-current] { color: var(--murekkep); border-bottom-color: var(--mavi); font-weight: 600; }
.sekmeler .arama { margin-left: auto; padding-bottom: 6px; }

/* ---------- Grafik ---------- */
.grafik { display: flex; align-items: flex-end; gap: 3px; height: 150px; border-bottom: 2px solid var(--murekkep); padding-top: 8px; }
.cubuk { flex: 1; height: max(var(--y), 2px); background: var(--mavi); border-radius: 2px 2px 0 0; min-width: 4px; }
.cubuk:hover { background: var(--sari); }
.grafik-eksen { display: flex; justify-content: space-between; font-size: 12px; color: var(--celik); margin-top: 4px; }

.hesap { display: grid; grid-template-columns: 1fr auto; margin: 0 0 14px; }
.hesap dt, .hesap dd { padding: 6px 0; border-bottom: 1px solid #e3e8ec; margin: 0; }
.hesap dd { text-align: right; font-variant-numeric: tabular-nums; }
.hesap .toplam { border-bottom: 0; border-top: 2px solid var(--murekkep); font-weight: 700; font-size: 16px; }

.sade-liste { list-style: none; margin: 0; padding: 0; }
.sade-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e3e8ec; align-items: center; }
.sade-liste li:last-child { border-bottom: 0; }

.yatay-cubuklar { list-style: none; margin: 0; padding: 0; }
.yatay-cubuklar li { position: relative; display: flex; justify-content: space-between; padding: 6px 8px; margin-bottom: 4px; z-index: 0; }
.yatay-cubuklar li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--y); background: var(--mavi-acik); border-radius: 3px; z-index: -1; }

/* ---------- Toplu aktarım ---------- */
.kod-alani { font-family: Consolas, "Cascadia Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.45; }
label[hidden] { display: none !important; }
.ilerleme { height: 14px; background: #e3e8ec; border-radius: 999px; overflow: hidden; }
.ilerleme-dolu { height: 100%; background: repeating-linear-gradient(-45deg, var(--sari) 0 8px, #e0a800 8px 16px); transition: width .4s; }
.ornek-kayit { max-height: 360px; overflow: auto; background: #f5f7f9; padding: 12px; border-radius: var(--yaricap); white-space: pre; }
.aciklama-metni { max-width: 78ch; color: var(--celik); margin: 0 0 18px; }
.uc-sutun { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 20px; }
.adim h2 { display: flex; align-items: center; gap: 10px; }
.adim-no { width: 26px; height: 26px; border-radius: 50%; background: var(--murekkep); color: var(--sari);
           display: inline-grid; place-items: center; font-size: 14px; flex: none; }
.adim > p.soluk { font-size: 13.5px; min-height: 4.5em; }
.dikey-form { display: flex; flex-direction: column; gap: 10px; }
.dikey-form > label:not(.onay) { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--celik); }
.dikey-form button { align-self: flex-start; }
input[type=file] { padding: 6px; background: #f5f7f9; }
.indir { font-size: 13.5px; margin: 12px 0 0; color: var(--celik); }
.uyari-panel { border-left: 6px solid var(--sari); }
.sarili-liste { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.etiket { background: #eef1f4; border-radius: 4px; padding: 2px 8px; font-size: 13px; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    h1 { font-size: 22px; }
    .ozet > div { border-right: 0; border-bottom: 1px solid var(--cizgi); }
    .sekmeler .arama { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }