:root {
    --bg: #f7f6f2;
    --surface: #ffffff;
    --border: #e8e5db;
    --text: #16140f;
    --text-muted: #6b6a63;
    --black: #111111;
    --black-hover: #2f2f2f;
    /* VURGU RENGI = SIYAH (Alsancak marka paleti: siyah-beyaz).
       Degisken adi --yellow olarak kaldi cunku 28 kuralda geciyor; adi
       degistirmek gorsel bir kazanc saglamadan 28 yeri riske atardi.
       Artik "sari" degil "vurgu" diye okuyun. */
    --yellow: #111111;
    --yellow-hover: #2f2f2f;
    /* Acik zemin uzerindeki VURGULU YAZI rengi */
    --yellow-ink: #111111;
    /* Siyah/vurgu zemin UZERINDEKI yazi -- yoksa siyah uzerine siyah kalirdi.
       KURAL: zemini --yellow ya da --black olan HER ogenin yazisi
       --accent-ink olmali. --yellow / --yellow-ink yazi rengi olarak
       YALNIZ acik zeminde kullanilir. */
    --accent-ink: #ffffff;
    --danger: #c0392b;
    --success: #1e824c;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 6px 20px rgba(20, 20, 20, 0.06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* Ust seritteki logo siyah-beyaz oldugu icin serit de BEYAZ -- logonun
   kendi zemini neyse panelinki de o. Altinda ince siyah cizgi (marka
   evraklarindaki gibi). */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 28px;
    background: var(--surface);
    color: var(--text);
    border-bottom: 2px solid var(--black);
}

.topbar-actions { display: flex; align-items: center; gap: 14px; }
/* Giren kisinin adi -- vardiya degisiminde yanlis hesapla veri
   girilmesin diye kim oldugu her ekranda gorunur dursun. */
.topbar-user {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    /* Cikis dugmesine yapisik durmasin -- yanlislikla cikisa basilmasin. */
    margin-right: 12px;
}
.topbar-actions a {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
}
.topbar-actions a:hover { color: var(--surface); background: var(--black); border-color: var(--black); }

.topbar h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.topbar h1::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    background: var(--yellow);
    border-radius: 2px;
}

.status-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    max-width: min(92vw, 480px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    animation: status-toast-in 0.15s ease-out;
}
.status-toast.hidden { display: none; }
.status-toast.ok { background: #2a2a2a; color: #ffffff; border: 1px solid rgba(255,255,255,0.28); }
.status-toast.err { background: #3a1f1f; color: #ff9d8c; border: 1px solid rgba(255,157,140,0.5); }
.status-toast span { flex: 1 1 auto; }
.status-toast button {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 2px 4px;
    opacity: 0.75;
    cursor: pointer;
}
.status-toast button:hover { opacity: 1; }
@keyframes status-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- Kayıt onayı: tam ekran büyük sarı tik (veri girişi başarılı) ---- */
.save-check {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 20, 0.55);
    cursor: pointer;
    animation: save-check-bg 0.15s ease-out;
}
.save-check.fade-out { animation: save-check-bg-out 0.25s ease-in forwards; }
.save-check-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.save-check-mark {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 104px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 10px 44px rgba(0, 0, 0, 0.4);
    animation: save-check-pop 0.36s cubic-bezier(0.2, 0.8, 0.2, 1.25);
}
.save-check-text {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
@keyframes save-check-bg { from { opacity: 0; } to { opacity: 1; } }
@keyframes save-check-bg-out { to { opacity: 0; } }
@keyframes save-check-pop {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@media (max-width: 600px) {
    .save-check-mark { width: 132px; height: 132px; font-size: 82px; }
    .save-check-text { font-size: 1.25rem; }
}

.tabs, .process-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 10px 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.process-tabs {
    padding: 0 0 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.tab-btn, .process-btn {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    padding: 9px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 999px;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.tab-btn:hover, .process-btn:hover { color: var(--text); background: var(--bg); }

.tab-btn.active, .process-btn.active {
    color: var(--accent-ink);
    background: var(--yellow);
}

main {
    padding: 24px 28px 60px;
    max-width: 1400px;
    margin: 0 auto;
}

.tab-panel, .process-panel { display: none; }
.tab-panel.active, .process-panel.active { display: block; animation: fade-in 0.18s ease-out; }

@keyframes fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.grid-2 {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .grid-2 { grid-template-columns: 1fr; }
}

/* Form İÇİNDEKİ iki sütunlu alan çiftleri (Paketleme'de koli+kasa, Sipariş'te
   m²+kasa vb.) sayfa düzeyindeki geniş .grid-2 kolonlarını (minmax 280-380px)
   kullanmamalı -- dar kart içinde taşarlar. Burada eşit iki sütun kullanılır;
   min-width:0 sayı kutularının kart dışına taşmasını engeller. */
.form .grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 0;
}
.form .grid-2 > label { min-width: 0; margin-bottom: 12px; }
.form .grid-2 input, .form .grid-2 select { width: 100%; box-sizing: border-box; }
/* Aynı satırdaki hücreler eşit yükseklikte olur; bir etiketin alt-satırı
   (örn. "(isteğe bağlı)") diğerinden uzun olsa bile input/seçici kutularını
   hücrenin ALTINA yaslayarak SATIR BOYUNCA HİZALAR (kayma olmaz). */
.form .grid-2 > label > input,
.form .grid-2 > label > select,
.form .grid-2 > label > .qty-row { margin-top: auto; }
@media (max-width: 480px) {
    .form .grid-2 { grid-template-columns: 1fr; }
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
}

.card h2 {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--black);
}

.form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.form input, .form select {
    font-size: 0.92rem;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* Miktar + birim (ton/kg) yan yana: sayı kutusu esner, birim seçici dar.
   NOT: `.form .grid-2 input/select { width:100% }` (özgüllük 0,2,1) qty-row
   içindeki kutulara da uygular ve taşmaya yol açardı; aşağıdaki daha özgül
   (0,3,1) kurallar onu yener -> seçici içeriğe göre dar, input esner. */
.qty-row { display: flex; gap: 6px; align-items: stretch; }
.form .grid-2 .qty-row input { flex: 1 1 auto; width: auto; min-width: 0; }
.form .grid-2 .qty-row select { flex: 0 0 auto; width: auto; min-width: 72px; }

.form input:focus, .form select:focus {
    outline: none;
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.22);
}

.form button {
    /* margin-top: 4px KALDIRILDI (2026-08-26): butonlar tum formlarda
       bir tik asagi kayiyor, altindaki ipucu yazisina yaklasiyordu.
       Bosluk artik ipucunun kendi ust boslugundan geliyor. */
    margin-top: 0;
    padding: 10px 18px;
    background: var(--yellow);
    color: var(--accent-ink);
    border: none;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.form button:hover { background: var(--yellow-hover); }
.form button:active { transform: translateY(1px); }

.hidden { display: none !important; }
/* Veri girişi ekranlarındaki küçük "Düzenle" paneli (2026-10-07) --
   Fabrika > Düzenle'deki büyük modun tek-tabloluk hali. */
.mini-duzenle { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
.mini-duzenle label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; }

/* Geçmiş Kayıtlar (Hammadde Girişi kartında, yalnız patron) */
.history-filters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.history-filters label { min-width: 0; }
.history-filters input, .history-filters select { width: 100%; box-sizing: border-box; }
@media (max-width: 640px) {
    .history-filters { grid-template-columns: 1fr; }
}
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th.sortable:hover { color: var(--accent, #2b6cb0); }
th.sortable .sort-arrow { font-size: 0.75em; opacity: 0.55; margin-left: 3px; }
th.sortable.sort-active .sort-arrow { opacity: 1; }
.hint {
    /* NOT: burada eskiden margin-top: -6px vardi. Amaci bir LABEL'in
       ardindan gelen ipucunu label'in 12px alt boslugu icine cekmekti.
       Ama ipucu bir BUTONUN ardindan gelince (formlarin cogunda oyle)
       6px yukari kayip butonun altina giriyor, yazinin ust kismi
       kapaniyordu (2026-08-26 kullanici bildirimi). Eksi bosluk
       kaldirildi; label sonrasi sikilik asagida AYRICA veriliyor. */
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: var(--yellow-ink);
}
/* Label'in hemen ardindaki ipucu label'a yapisik dursun (eski gorunum). */
.form label + .hint { margin-top: -6px; }
/* Butondan sonraki ipucu nefes alsin -- butona degmesin. Tek tek kural
   yazmak yerine BUTUN buton tiplerini kapsayan tek kural: dogrudan buton
   ardindan gelen ipucu ve buton grubu ardindan gelen ipucu. */
button + .hint,
.size-form-actions + .hint,
.sys-card-tools + .hint,
.entry-form button + .hint { margin-top: 10px; }

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
td.num { text-align: right; font-variant-numeric: tabular-nums; }

thead th {
    text-align: left;
    padding: 8px 10px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--black);
    font-weight: 700;
    white-space: nowrap;
}

tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

tbody tr:last-child td { border-bottom: none; }

tfoot .totals-row td {
    font-weight: 700;
    color: var(--black);
    border-top: 2px solid var(--black);
    border-bottom: none;
    background: #fdf8e8;
    /* Padding tbody'den miras ALINMAZ (tfoot ayrı); açıkça ver ki mobilde
       toplam sayıları birbirine yapışıp kutudan taşmasın. */
    padding: 8px 12px;
    white-space: nowrap;
}

tbody tr:hover { background: #fdf8e8; }

.empty-row td {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 16px;
}

/* Dizgi Sayım mini kontrol tablosu: en son girilen kayıt sarı vurguyla öne
   çıkar -- veriyi giren kendi kaydını hemen tanısın. */
.dizgi-check-latest td {
    background: rgba(17, 17, 17, 0.10);
    font-weight: 700;
}
/* Tamir işaretli satır: hafif turuncu vurgu -- üretimden sayılmadığı hemen
   görülsün (en son girilen satır sarı vurguyla çakışırsa sarı öncelikli kalır). */
.dizgi-check-repair:not(.dizgi-check-latest) td { background: rgba(230,126,34,0.14); }
/* 6 sütun (İşçi/Saat/Desen/Tabak/Tamir/Girildi) ekrana sığsın diye kompakt. */
.dizgi-check-table th, .dizgi-check-table td { padding: 5px 7px; font-size: 0.85rem; }

a { color: var(--black); }

@media (max-width: 600px) {
    .topbar {
        padding: 14px 16px;
        flex-wrap: wrap;
    }

    .topbar h1 { font-size: 1.05rem; }

    .tabs { padding: 10px 12px; }
    .process-tabs { padding: 0 0 12px; }

    .tab-btn, .process-btn { padding: 11px 14px; font-size: 0.86rem; }

    main { padding: 16px 12px 40px; }

    .card { padding: 14px 16px; }

    /* Inputs below 16px make iOS Safari zoom in on focus; keep them at 16px
       and give them taller touch targets since this runs on phones too. */
    .form input, .form select {
        font-size: 16px;
        padding: 11px 12px;
    }

    .form button {
        width: 100%;
        padding: 13px 16px;
        font-size: 1rem;
    }
}

/* ---------------------------------------------------------------- v2 additions */

.entry-form { max-width: 420px; }
/* İki giriş formu yan yana; dar ekranda (mobil) alt alta iner. */
.entry-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.entry-row > .entry-form { flex: 1 1 320px; }

.form-label {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.check-row {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
}

.check-row input[type="checkbox"] { width: auto; }

.radio-row {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
}

.radio-row label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 0;
}

.radio-row input[type="radio"] { width: auto; }

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.stat-card {
    background: var(--black);
    color: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Siyah kart uzerinde siyah cizgi gorunmezdi -- acik vurgu. */
    border-bottom: 3px solid rgba(255, 255, 255, 0.35);
    /* Grid hücreleri varsayılan olarak içeriğin doğal genişliğinin altına
       küçülmez -- büyük TL tutarları (örn. "13.787.281,790") bu yüzden
       kutunun dışına taşardı. min-width: 0 küçülmeye izin verir, .stat-value
       da gerekirse ikinci satıra sarar; değer HİÇBİR ZAMAN kısaltılmaz. */
    min-width: 0;
}

.stat-value {
    font-size: clamp(1.15rem, 1.6rem + 1vw, 2rem);
    font-weight: 700;
    /* KOYU ZEMIN UZERINDE HEP --accent-ink. Burada --yellow yaziliydi;
       marka paleti siyah-beyaza donunce --yellow de siyah oldu ve sayilar
       siyah kart uzerinde siyah kalip GORUNMEZ oldu (2026-08-28). */
    color: var(--accent-ink);
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
}

.stat-label {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
}

.stat-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.55);
}

/* ---- Grafikler (patron analiz sekmesi) ---- */
.an-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.an-period-btns { display: inline-flex; gap: 6px; }
.an-period {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    padding: 6px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.an-period:hover { color: var(--text); background: var(--bg); }
/* Secili donem dugmesi: koyu zemin -> ACIK yazi (eskiden --yellow-ink idi,
   siyah uzerine siyah kaliyordu). */
.an-period.active { background: var(--yellow); color: var(--accent-ink); border-color: var(--yellow); font-weight: 600; }

.an-chart-block { margin-top: 18px; }
.an-chart-title { margin: 0 0 6px; font-size: 1rem; color: var(--text); }
/* Başlık + mod düğmeleri aynı satırda; dar ekranda alt alta iner. */
.an-chart-head {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 8px 14px; margin-bottom: 6px;
}
.an-chart-head .an-chart-title { margin: 0; }
.an-chart { position: relative; width: 100%; min-width: 0; }
/* aspect-ratio: SVG'nin kendi iç ölçüsünden dolayı dar ekranda (mobil) kartı
   taşırmasını engeller — genişlik %100, yükseklik orana göre ölçeklenir. */
.an-svg { width: 100%; max-width: 100%; height: auto; display: block; aspect-ratio: 820 / 260; }
.an-grid { stroke: var(--border); stroke-width: 1; }
.an-grid-zero { stroke: var(--text-muted, #888); stroke-width: 1.5; }
.an-axisline { stroke: #cfccc1; stroke-width: 1; }
.an-axis { fill: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.an-axis-y { text-anchor: end; }
.an-axis-x { text-anchor: middle; }
.an-dot { transition: r 0.1s; }
.an-dot.on { r: 5; stroke: var(--surface); stroke-width: 2; }
.an-cross { stroke: #b9b6ab; stroke-width: 1; stroke-dasharray: 3 3; }
.an-hit { cursor: crosshair; }
.an-tip {
    position: absolute;
    transform: translate(-50%, -100%);
    background: var(--black);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow);
    z-index: 5;
}
.an-empty { text-align: center; color: var(--text-muted); font-size: 0.9rem; padding: 8px; }

/* ---- Fabrika alt-sekmeleri (Genel / Grafikler) ---- */
.fab-subtabs, .sip-subtabs {
    display: flex;
    gap: 6px;
    padding: 0 0 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}
.fab-subtab-btn, .sales-subtab-btn, .sys-subtab-btn, .sip-subtab-btn {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    padding: 9px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 999px;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}
.fab-subtab-btn:hover, .sales-subtab-btn:hover, .sys-subtab-btn:hover, .sip-subtab-btn:hover { color: var(--text); background: var(--bg); }
.fab-subtab-btn.active, .sales-subtab-btn.active, .sys-subtab-btn.active, .sip-subtab-btn.active { color: var(--accent-ink); background: var(--yellow); }
.fab-subpanel, .sales-subpanel, .sys-subpanel, .sip-subpanel { display: none; }
.fab-subpanel.active, .sales-subpanel.active, .sys-subpanel.active, .sip-subpanel.active { display: block; }

/* ---- İşçi bazlı m² grafiği (Fabrika > Grafikler) ---- */
.wm-layout { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.wm-worker-list { flex: 0 0 190px; display: flex; flex-direction: column; gap: 4px; }
.wm-chart-area { flex: 1 1 320px; min-width: 0; }
.wm-worker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}
.wm-worker-item:hover { background: var(--bg); }
.wm-worker-item.active { border-color: var(--yellow); background: #fffbe8; font-weight: 600; }
.wm-worker-item .wm-name { flex: 1 1 auto; }
.wm-worker-item .wm-total { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.wm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
#wm-chart .an-svg { aspect-ratio: 820 / 300; }
.wm-dotpt { transition: r 0.1s; }
.wm-dotpt.on { r: 5; stroke: var(--surface); stroke-width: 2; }
/* Gruplu sütun grafiği: sütunlar + hover band vurgusu */
.wm-bar { transition: opacity 0.1s; }
.wm-band-hl { fill: rgba(0, 0, 0, 0.05); }
/* Dönem toplam üretim satırı + tooltip band toplamı */
.wm-total { font-size: 0.95rem; margin-bottom: 8px; padding: 8px 12px; background: var(--bg); border-radius: 8px; }
.wm-total strong { color: var(--black); font-variant-numeric: tabular-nums; }
.wm-tiptotal { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); font-weight: 700; }
.wm-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.wm-daterange { display: inline-flex; flex-direction: column; gap: 2px; font-size: 0.76rem; color: var(--text-muted); }
.wm-daterange input { font-size: 0.85rem; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: #fff; }
.wm-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; justify-content: center; }
.wm-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-muted); }
.an-tip .wm-tipline { display: flex; align-items: center; gap: 6px; margin-top: 3px; white-space: nowrap; }
/* Günlük bölüm mevcudu: 4 bölüm yan yana, dar ekranda 2'şerli sarar. */
.headcount-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 4px;
}
.headcount-grid label { margin: 0; }
.headcount-grid input { text-align: center; font-variant-numeric: tabular-nums; }
/* Çalışan sayısı grafiğinin renk açıklaması -- işçi m² grafiğiyle aynı görsel dil */
.hc-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; justify-content: center; }
#an-chart-mevcut .an-svg { aspect-ratio: 820 / 300; }
/* Patron bildirimindeki "toplam" rozeti, bölüm rozetlerinden ayrışsın */

.an-table-wrap { margin-top: 16px; }
.an-table-wrap summary { cursor: pointer; color: var(--text-muted); font-size: 0.9rem; }
.an-table { width: 100%; }
.an-table th.num, .an-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* En çok satış yapılan müşteriler / en çok satılan desenler (2026-07-30) --
   iki sütun (masaüstü), dar ekranda alt alta. */
.an-lb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 12px; }
.an-lb-list { display: flex; flex-direction: column; gap: 6px; }
.an-lb-row {
    display: grid;
    grid-template-columns: 1.5em minmax(0, 1.6fr) minmax(60px, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
}
.an-lb-rank { color: var(--text-muted, #888); font-weight: 700; text-align: right; }
.an-lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-lb-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-lb-sub { font-weight: 400; color: var(--text-muted, #888); margin-left: 4px; }

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.card-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.card-filters label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.card-filters select {
    font-size: 0.88rem;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.edit-actions { white-space: nowrap; }

.btn-small {
    display: inline-block;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: var(--yellow);
    color: var(--accent-ink);
    text-decoration: none;
}

.btn-small + .btn-small { margin-left: 6px; }

/* Duzenleme modundaki dugme ("Duzenle (Kaydet)") belirgin dursun --
   tablonun acik oldugu tek bakista anlasilsin. */
.btn-small.is-editing { background: var(--success); color: #ffffff; }

/* Kesim girisi: once BOYLAMA mi EBATLAMA mi. Secilen secenek belirgin
   dursun -- kesimci yanlis islemde olcu isaretlemesin. */
/* Islem (Boylama/Ebatlama) ve Tur (Paledyen/Strip/Fayans Kirigi) kutucuklari.
   MOBIL: alt satira gecebilmeliler -- "Fayans Kirigi" uzun, telefonda uc
   kutucuk yan yana sigmiyordu (2026-08-28). */
.cut-op-choice { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.cut-op-check {
    flex: 1 1 130px; display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 12px 10px; border: 2px solid var(--border);
    border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 0.95rem;
    text-align: center;
}
.cut-op-check:has(input:checked) { border-color: var(--black); background: var(--bg); }
.cut-op-hint { font-size: 0.84rem; color: var(--text-muted); padding: 6px 0; }
/* Bicak olculeri: makine basina 15 olcu olabiliyor -- alt alta liste
   yerine yan yana rozet, her birinin kendi silme dugmesiyle. */
.cut-size-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cut-size-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 6px 3px 10px; border: 1px solid var(--border);
    border-radius: 999px; font-size: 0.85rem; background: var(--surface);
}
.cut-size-chip .cut-size-del {
    border: none; background: none; cursor: pointer; padding: 0 2px;
    font-size: 0.8rem; line-height: 1; color: var(--text-muted);
}
.cut-size-chip .cut-size-del:hover { color: var(--danger); }
.cut-size-empty { font-size: 0.82rem; color: var(--text-muted); }
/* Tuketim raporu: renk satirina tiklayinca tip/kalinlik dokumu acilir. */
.rc-row { cursor: pointer; }
.rc-row:hover { background: var(--bg); }
.rc-detail td { color: var(--text-muted); font-size: 0.86rem; }
/* Elle olcu: nadir kullanilir, kutucuklarin onune gecmesin diye sonuk. */
.cut-manual { margin-top: 6px; }
.cut-manual input { border-style: dashed; }

/* Desen seçicilerdeki "5x10"/"Panel" kategori butonları -- tıklanınca o
   kutunun listesi sadece o kategoriye daralır (2026-07-30). */
.desen-cat-buttons { display: flex; gap: 6px; margin-bottom: 5px; }
.desen-cat-btn {
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    background: var(--surface, #fff);
    color: var(--text);
}
.desen-cat-btn.active { background: var(--yellow); border-color: var(--yellow); color: var(--accent-ink); }

.history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.history-head h2 { margin: 0; }
/* Başlık solda, butonlar sağda YAN YANA -- ayrı dururken space-between
   onları birbirinden ayırıp butonu ortaya itiyordu. */
.history-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.history-return-cell { width: 28px; text-align: center; }

/* Ölçüler kartı (Fabrika > Düzenle) -- ölçü tanımlama formu + desen/ölçü
   eşleme tablosu. Ölçü alanları tek satırda yan yana, dar ekranda alt alta. */
.size-form { margin-bottom: 16px; }
.size-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
    gap: 10px;
    /* Etiketi iki satira inen alan (orn. "Yükseklik (cm)") yuzunden
       kutular kayiyordu; hepsini ALTTAN hizala -> tek cizgide dururlar. */
    align-items: end;
}
.size-fields label { min-width: 0; }
.size-fields input { width: 100%; }
.size-form-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.size-form-actions button { margin-top: 0; }
.size-sub-head { margin: 22px 0 4px; font-size: 1rem; }
/* Ölçüsü girilmemiş desen: gözden kaçmasın diye satır işaretlenir. */
.size-missing td { background: rgba(17, 17, 17, 0.07); }
.product-size-select { width: 100%; max-width: 260px; }
@media (max-width: 720px) {
    .size-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.btn-danger { background: var(--danger); color: #fff; }

.btn-muted { background: var(--border); color: var(--text); }

.edit-input, .edit-input-group {
    width: 100%;
    min-width: 70px;
    font-size: 0.84rem;
    padding: 6px 8px;
    border: 1px solid var(--yellow);
    border-radius: 6px;
}
/* Fatura geneli (rowspan hücrelerdeki) düzenleme kutuları -- birleşik hücre
   dar olduğu için taşmasın diye box-sizing garanti. */
.edit-input-group { box-sizing: border-box; }

/* Urun karti: recete kurucu + urun listesi */
.recipe-builder {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin: 6px 0 4px;
    background: var(--bg);
}

.recipe-builder-title {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted, #666);
    margin-bottom: 8px;
}

.recipe-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.recipe-add-row select { flex: 1; min-width: 120px; }
.recipe-add-row input { width: 90px; }

.recipe-lines-table { width: 100%; margin-top: 10px; }
.recipe-lines-table td { padding: 5px 6px; font-size: 0.86rem; }

.product-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fff;
}

.product-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.product-recipe {
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--text-muted, #555);
}

.crate-pending { color: #b8860b; font-weight: 600; }
.crate-received { color: var(--green, #1e824c); font-weight: 600; }

/* ---------------------------------------------------------------- müşteriler (CRM) */
.customer-pack {
    margin: 6px 0 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}
.customer-pack-title {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 8px;
    color: var(--text-muted, #555);
}
.customer-pack-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
}
.customer-pack-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.customer-pack-row .cp-label { flex: 0 0 auto; color: var(--yellow); }
.customer-pack-row input { flex: 1 1 90px; min-width: 0; margin: 0; }
.customer-pack-row .cp-del { flex: 0 0 auto; }
.customer-pack-row .cp-kutu { flex: 1 1 100%; }
.customer-pack-row .cp-kasa-title { flex: 1 0 100%; font-size: 0.78rem; opacity: 0.7; margin-top: 4px; }
.customer-pack-row .cp-hint { flex: 1 0 100%; font-size: 0.8rem; opacity: 0.85; }
.customer-pack-profile {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
}
.customer-pack-profile:last-child { margin-bottom: 0; }
.customer-pack-profile .customer-m2-badge { margin: 0 0 6px; }

.customer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

/* Tedarikçi kartları (Hammadde sekmesi) */
.supplier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}
.supplier-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--card-bg, #fff);
}
.supplier-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.supplier-card-head strong { font-size: 1rem; }
.supplier-contact {
    font-size: 0.85rem;
    color: var(--text-muted, #555);
    line-height: 1.6;
    margin-bottom: 10px;
    word-break: break-word;
}
.supplier-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    padding: 10px;
    border-radius: 8px;
    background: var(--bg);
    font-size: 0.85rem;
}
.supplier-stats > div { display: flex; flex-direction: column; }
.supplier-stats span { color: var(--text-muted, #777); font-size: 0.72rem; }
.supplier-stats strong { color: var(--text, #222); }

/* Tedarik ettiği hammaddeler: kartta chip, formda checkbox listesi */
.supplier-mats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.mat-chip {
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef3fb;
    color: #2c5aa0;
    font-size: 0.75rem;
}
.supplier-note {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 0.82rem;
    color: var(--text-muted, #555);
    word-break: break-word;
}
.supplier-materials-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 4px 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}
.mat-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    font-weight: normal;
    margin: 0;
    cursor: pointer;
}
.mat-check input { width: auto; }

.customer-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.customer-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.customer-card-head strong { font-size: 1.05rem; }
.customer-actions { display: flex; gap: 6px; }

.customer-contact {
    font-size: 0.88rem;
    color: var(--text-muted, #555);
    line-height: 1.6;
    margin-bottom: 10px;
    word-break: break-word;
}

/* Form içi canlı m² hesabı kutusu */
.customer-m2-box {
    margin: 4px 0 6px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg);
    font-size: 0.9rem;
    color: var(--text-muted, #555);
    line-height: 1.5;
}
.customer-m2-box.customer-m2-ok {
    background: #eef7f0;
    color: #1b6b3a;
    border: 1px solid #cfe8d6;
}

/* Kartta öne çıkan "1 kasada X m²" rozeti */
.customer-m2-badge {
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #eef3fb;
    color: #2c5aa0;
    font-size: 0.9rem;
    text-align: center;
}

/* ---- CRM araç çubuğu (özet + arama + yeni) ---- */
.crm-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.crm-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.crm-stat {
    display: flex;
    flex-direction: column;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg, #fff);
    min-width: 90px;
}
.crm-stat span { font-size: 0.72rem; color: var(--text-muted, #777); }
.crm-stat strong { font-size: 1.1rem; }
.crm-controls { display: flex; gap: 8px; align-items: center; }
#customer-search {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 240px;
    font-size: 0.9rem;
}

/* Satış (Odoo sale.order esintili) filtre çubuğu + sıralanabilir liste */
.sales-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 10px;
}
.sales-filters #sales-search {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 220px;
    font-size: 0.9rem;
    flex: 1 1 220px;
}
.sales-filters .filt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.72rem;
    color: var(--text-muted, #777);
}
.sales-filters .filt select,
.sales-filters .filt input {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
}
.sales-filters #sales-filter-clear { align-self: flex-end; }

.sales-table th.sortable, .metraj-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.sales-table th.sortable:hover, .metraj-table th.sortable:hover { color: var(--accent, #2c5aa0); }
.sales-table th.sortable::after, .metraj-table th.sortable::after { content: " " attr(data-arrow); font-size: 0.75em; }
.sales-table th.sort-active, .metraj-table th.sort-active { color: var(--accent, #2c5aa0); }
/* Sayisal hucreler .num sinifiyla saga yaslanir (td.num kurali). Fatura
   gruplamasinda rowspan'li hucreler oldugu icin nth-child yerine sinif kullanilir. */
.sales-table th.num { text-align: right; }
/* Soluk yardim yazisi. Elle #999 yazilmisti: beyaz uzerinde 2.85:1,
   fabrika ekranlarinda zor secilyordu. Panelin kendi soluk rengi
   (--text-muted) 5.43:1 -- ayni is, okunakli hali (2026-09-14). */
.muted { color: var(--text-muted); font-style: italic; }

/* Satış tablosunu SIKIŞTIR (Excel mantığı): dar padding/font + uzun metin
   sütunları (müşteri/desen/not) sınırlı genişlikte SARILIR -> tablo daralır,
   "Toplam" yatay kaydırma olmadan tek bakışta görünür. Sayısal sütunlar (m²,
   fiyat, toplam, kasa) tek satır kalır. */
.sales-table { font-size: 0.8rem; }
.sales-table td, .sales-table th { padding: 5px 7px; }
.sales-table .grp-party-cell { max-width: 150px; white-space: normal; overflow-wrap: anywhere; }
.sales-table .cell-desen { max-width: 130px; white-space: normal; overflow-wrap: anywhere; }
.sales-table .cell-note { max-width: 110px; white-space: normal; overflow-wrap: anywhere; }
.sales-table .cell-total { font-weight: 700; }
.sales-table .edit-actions .btn-small { padding: 3px 6px; margin: 0 1px 1px 0; }

/* ---- Fatura gruplama (Excel mantigi): ayni fatura kalemleri kalin cizgiyle
   ayrilir; fatura no/musteri/tedarikci/tarih/PDF birlesik (rowspan) hucrelerde. */
.sales-table tr.grp-start td, #table-history tr.grp-start td,
#table-sales tr.grp-start td { border-top: 3px solid var(--text, #333); }
.grp-merge { vertical-align: top; background: var(--surface-alt, rgba(0,0,0,0.02)); }
.grp-pdf { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.grp-inv { font-size: 0.78em; color: var(--text-muted, #777); font-variant-numeric: tabular-nums; }
.grp-party { font-weight: 600; }
.grp-total { margin-top: 4px; font-size: 0.85em; font-weight: 700; color: var(--accent, #2c5aa0); font-variant-numeric: tabular-nums; }

/* ---- Odoo tarzı donut (dairesel) grafikler: Fabrika > Genel ---- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.dash-chart { min-width: 0; }
.dash-chart h3 { font-size: 0.9rem; margin: 0 0 10px; text-align: center; color: var(--text-muted); font-weight: 700; }
.donut-body { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.donut-svg { width: 165px; height: 165px; flex: 0 0 auto; }
.donut-svg path, .donut-svg circle { transition: opacity 0.15s; cursor: pointer; }
.donut-svg path:hover, .donut-svg circle:hover { opacity: 0.82; }
/* Dokununca altta çıkan adet+tür bilgisi */
.donut-tip {
    font-size: 0.85rem; text-align: center; color: var(--text-muted, #777);
    min-height: 1.3em; padding: 4px 10px; border-radius: 8px; max-width: 100%;
    overflow-wrap: anywhere;
}
.donut-tip.on { color: var(--black, #222); font-weight: 700; background: var(--bg, #f3f3f3); }
.donut-leg[data-idx] { cursor: pointer; padding: 1px 5px; border-radius: 5px; }
.donut-leg.sel { background: var(--bg, #eee); font-weight: 700; }
.donut-total { font-size: 22px; font-weight: 800; fill: var(--black, #222); font-variant-numeric: tabular-nums; }
.donut-total-lbl { font-size: 10px; fill: var(--text-muted, #888); text-transform: uppercase; letter-spacing: 0.06em; }
.donut-legend { width: 100%; display: flex; flex-direction: column; gap: 3px; }
.donut-leg { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; }
.donut-sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.donut-leg-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-leg-val { color: var(--text-muted, #777); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Kesim işçisi salt-okunur aktif sipariş listesi (ne kesilecek) ---- */
.cutting-orders-card { border-left: 4px solid var(--yellow); }
.co-row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    padding: 8px 0; border-bottom: 1px dashed var(--border, #ddd);
}
.co-row:last-child { border-bottom: none; }
.co-desen { font-weight: 700; font-size: 1.02em; min-width: 140px; }
.co-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-muted, #666); font-size: 0.9em; }
.co-need strong { color: var(--black); }
.co-urgent { background: rgba(220, 53, 69, 0.06); }
.co-urgent .co-desen { color: var(--danger, #c0392b); }

/* ---- Kesim ölçü kutucukları (birden fazla seçilebilir) ---- */
.cut-sizes-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 12px; }
.cut-size-check {
    display: inline-flex; align-items: center; gap: 6px; margin: 0;
    font-size: 0.9rem; padding: 6px 10px; border: 1px solid var(--border);
    border-radius: 8px; cursor: pointer; background: var(--surface, #fff);
    flex-direction: row;
}
.cut-size-check input { width: auto; margin: 0; }
.cut-size-check:has(input:checked) { border-color: var(--yellow); background: #fdf8e8; font-weight: 700; }
.mc-sizes { color: var(--text-muted, #777); font-weight: 400; font-size: 0.9em; }
/* Su an kesilen numarali palet/blok -- malzeme adinin yaninda one cikar
   (2026-10-07: "makineler sekmesinde o numaralı hammaddenin kesildiğini
   göreyim"). */
.mc-numara { font-weight: 700; color: var(--yellow-ink, #8a6d00); font-size: 0.85em; }

/* ---- Fabrika > Makineler: makine kartları (bugünkü kesim durumu) ---- */
.machine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.machine-card { border: 1px solid var(--border, #ddd); border-radius: 10px; padding: 12px 14px; background: var(--surface, #fff); }
.machine-card.is-active { border-color: #28a745; box-shadow: 0 0 0 1px rgba(40,167,69,0.25); }
.mc-head { font-weight: 700; font-size: 1.05em; margin-bottom: 8px; }
.mc-now { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 0.95em; }
.mc-active { background: rgba(40,167,69,0.12); }
.mc-idle { background: var(--border, #eee); color: var(--text-muted, #777); }
.mc-dot { width: 10px; height: 10px; border-radius: 50%; background: #28a745; margin-top: 4px; flex: 0 0 auto; animation: mc-pulse 1.6s infinite; }
@keyframes mc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.mc-since { font-size: 0.82em; color: var(--text-muted, #777); margin-top: 2px; }
/* Aktif kesim gövdesi: dar kartta da taşmasın (min-width:0 flex kuralı). */
.mc-now-body { flex: 1 1 auto; min-width: 0; }
.mc-now-mat { overflow-wrap: anywhere; }
.mc-now .mc-sizes { display: block; margin-top: 1px; }
.mc-now .mc-finish-btn { flex: 0 0 auto; align-self: flex-start; }
.mc-hist { margin-top: 10px; }
.mc-hist-title { font-size: 0.78em; font-weight: 700; color: var(--text-muted, #777); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
/* Geçmiş kesim satırı ARTIK İKİ SATIR: üstte malzeme + süre, altta saat aralığı
   ve ölçüler. Eskiden hepsi tek satırda yan yanaydı ve uzun malzeme adında
   süre kartın dışına taşıyordu (2026-08-19 kullanıcı bildirimi). */
.mc-hist-row { padding: 5px 0; border-top: 1px dashed var(--border, #ddd); font-size: 0.9em; }
.mc-hist-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mc-hist-mat { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.mc-hist-dur { color: var(--text-muted, #777); white-space: nowrap; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.mc-hist-sub { font-size: 0.86em; color: var(--text-muted, #777); margin-top: 1px; overflow-wrap: anywhere; }

/* Makineler alt-sekmeleri (Üretim / Raporlar) */
.mach-subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mach-subtab-btn {
    padding: 7px 16px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-muted); font-size: 0.9rem;
    font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.mach-subtab-btn:hover { background: var(--bg); color: var(--text); }
.mach-subtab-btn.active { background: var(--yellow); border-color: var(--yellow); color: var(--accent-ink); }
.mach-subpanel { display: none; }
.mach-subpanel.active { display: block; animation: fade-in 0.18s ease-out; }
#mach-chart .an-svg { aspect-ratio: 820 / 300; }

/* Makine dökümü kontrolleri */
.mach-report-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.mach-report-controls label { margin: 0; }
.mach-report-controls select { min-width: 170px; }
.mach-report-sum { margin: 10px 0; padding: 8px 12px; background: var(--bg); border-radius: 8px; font-size: 0.92rem; }
.mc-hist-empty { font-size: 0.85em; color: var(--text-muted, #999); font-style: italic; }
.hint-inline { color: var(--text-muted, #999); font-style: italic; font-size: 0.85em; }
.cell-act .btn-small { margin: 0 2px 2px 0; }
/* "(istege bagli)" eki -- yukaridaki .muted ile ayni sebep. */
label .opt { color: var(--text-muted); font-weight: normal; font-size: 0.85em; }
/* Metraj: 4. (Tabak), 5. (m²) ve 6. (Tamir) sütunlar sağa yaslı */
.metraj-table th.num, .metraj-table td:nth-child(4),
.metraj-table td:nth-child(5), .metraj-table td:nth-child(6) { text-align: right; }
/* Toplam satırında "Toplam" hücresi colspan=3 olduğu için nth-child kayar;
   toplam sayılarını doğrudan sağa yasla ki üstteki sütunlarla hizalansın. */
.metraj-table tfoot td { text-align: right; }
.metraj-table tfoot td:first-child { text-align: left; }
/* 6 sütun ekrana sığsın diye kompakt hücre boşluğu + küçük yazı (mobilde de). */
.metraj-table th, .metraj-table td { padding: 6px 8px; font-size: 0.88rem; }

.form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.form-head h2 { margin: 0; }

/* Kart başlığı + durum rozeti */
.customer-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-chip {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}
.crm-chip-active { background: #eef7f0; color: #1b6b3a; }
.crm-chip-done { background: #eef3fb; color: #2c5aa0; }
.crm-chip-new { background: var(--bg); color: var(--text-muted, #777); }

/* İlişki istatistikleri (sipariş/kasa/ciro/son işlem) */
.customer-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    background: var(--bg);
    font-size: 0.85rem;
}
.customer-stats > div { display: flex; flex-direction: column; }
.customer-stats span { color: var(--text-muted, #777); font-size: 0.72rem; }
.customer-stats strong { color: var(--text, #222); }

/* Kart içi geçmiş paneli */
.customer-detail-btn, .supplier-detail-btn { margin-top: 10px; width: 100%; }
.customer-detail {
    margin-top: 10px;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
}
.crm-hist { margin-bottom: 10px; }
.crm-hist h4 { margin: 0 0 6px; font-size: 0.85rem; color: var(--text-muted, #555); }
.crm-hist-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--border);
}
.crm-hist-row:last-child { border-bottom: none; }

/* Tedarikçi "Alımlar" penceresi (2026-07-29): karta tıklayınca açılan, tarih
   aralığı seçilebilen küçük pencere -- eskiden kart içinde açılan sabit
   son-30-gün kutusunun yerine geçti. */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9997;
    background: rgba(20, 20, 20, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal-box {
    background: var(--surface, #fff);
    border-radius: var(--radius, 14px);
    box-shadow: var(--shadow);
    width: min(560px, 100%);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.modal-head h2 { margin: 0; font-size: 1.05rem; }
.modal-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 10px;
}
.modal-filters label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.72rem;
    color: var(--text-muted, #777);
}
.modal-filters input {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
}
#supplier-detail-summary { margin: 0 0 8px; font-weight: 600; }
.modal-body { overflow-y: auto; }

.customer-pack-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    font-size: 0.85rem;
}
.customer-pack-info > div {
    display: flex;
    flex-direction: column;
}
.customer-pack-info span { color: var(--text-muted, #777); font-size: 0.78rem; }
.customer-pack-info strong { color: var(--text, #222); }

.customer-note {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 0.85rem;
    color: var(--text-muted, #555);
    word-break: break-word;
}

/* Raporlar: gun be gun makine/isci trendi, tablo hucresi icinde kucuk cubuk */
.mini-bar-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 90px;
}

.mini-bar {
    flex: 1;
    height: 8px;
    background: var(--bg);
    border-radius: 999px;
    overflow: hidden;
}

.mini-bar-fill {
    height: 100%;
    background: var(--yellow);
    border-radius: 999px;
}

.mini-bar-value {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 1.5em;
    text-align: right;
}

/* Siparis takibi: tam genislik ilerleme cubugu */
.order-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 140px;
}

.order-progress-track {
    flex: 1;
    height: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.order-progress-fill {
    height: 100%;
    background: var(--yellow);
}

.order-progress-fill.complete { background: var(--success); }

.order-progress-label {
    font-size: 0.82rem;
    font-weight: 700;
    min-width: 3em;
    text-align: right;
}

/* Siparis takibi: uretilen vs hedef kasa, iki cubuklu mini grafik */
.order-chart {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.order-chart-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-chart-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    min-width: 4.5em;
}

.mini-bar-fill.complete { background: var(--success); }
.mini-bar-fill.target { background: var(--black); }

/* Buyutulmus Siparis Takibi kartlari */
.order-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #fff;
}

.order-card-behind { border-color: var(--danger); background: #fdf4f3; }

/* Sipariş Takibi: müşteriye göre gruplandı (2026-07-30) -- her müşterinin
   başlığı, altında da o müşterinin sipariş kartları. */
.order-group { margin-bottom: 20px; }
.order-group:last-child { margin-bottom: 0; }
.order-group-head {
    font-weight: 700;
    font-size: 0.95rem;
    padding-bottom: 4px;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--yellow);
}
.order-group-count { font-weight: 400; font-size: 0.78rem; color: var(--text-muted, #888); }

.order-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.order-card-head strong { font-size: 1.05rem; }
.order-material {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg);
    font-size: 0.8rem;
    color: var(--text-muted, #555);
}

.order-m2 {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef3fb;
    font-size: 0.8rem;
    color: #2c5aa0;
    font-weight: 600;
}

.order-card-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-muted, #555);
}

/* Sipariş formu: m² -> kasa canlı önizlemesi */
.order-calc-preview {
    margin: 4px 0 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg);
    font-size: 0.9rem;
    color: var(--text-muted, #555);
    line-height: 1.5;
}
.order-calc-preview.order-calc-ok {
    background: #eef7f0;
    color: #1b6b3a;
    border: 1px solid #cfe8d6;
}

.product-plate {
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--text-muted, #777);
}

.days-ok { color: var(--success, #1e824c); font-weight: 600; }
.days-soon { color: #b8860b; font-weight: 700; }
.days-overdue { color: var(--danger); font-weight: 700; }

.order-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.order-progress-bar {
    flex: 1;
    height: 18px;
    background: var(--bg);
    border-radius: 999px;
    overflow: hidden;
    position: relative;   /* çok tarihli teslim noktalı çizgileri için */
}

.order-progress-fill {
    height: 100%;
    background: var(--yellow);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.order-progress-fill.complete { background: var(--success); }
.order-progress-fill.behind { background: var(--danger); }

.order-progress-pct {
    font-weight: 700;
    min-width: 3.2em;
    text-align: right;
}

/* ---- Siparişler alt-sekmesi: Yeni Sipariş (sol) + Sipariş Takibi (sağ) yan yana;
   dar ekranda (flex-wrap) alt alta iner. ---- */
.orders-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.orders-layout .orders-new { flex: 1 1 320px; max-width: 460px; margin: 0; }
.orders-layout .orders-track { flex: 2 1 420px; min-width: 0; margin: 0; }

/* ---- Çok kalemli satış girişi: ürün kalem satırları ---- */
.sales-items-head, .sales-item-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sales-items-head {
    font-size: 0.72rem; color: var(--text-muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em; margin: 2px 0 4px; padding: 0 10px;
}
.sales-item-row {
    margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg, #fafafa);
}
.sales-item-row input, .sales-item-row select { margin: 0; }
.sales-items-head span:nth-child(1), .sales-item-row .si-material { flex: 2 1 140px; min-width: 0; width: auto; }
.sales-items-head span:nth-child(2), .sales-item-row .si-m2 { flex: 1 1 70px; min-width: 0; width: auto; }
.sales-items-head span:nth-child(3), .sales-item-row .si-unit { flex: 1 1 80px; min-width: 0; width: auto; }
.sales-items-head span:nth-child(4), .sales-item-row .si-currency { flex: 0 1 72px; min-width: 0; width: auto; }
.sales-items-head span:nth-child(5), .sales-item-row .si-crates-box { flex: 1 1 90px; min-width: 0; }
.sales-items-head span:nth-child(6), .sales-item-row .si-del { flex: 0 0 auto; }
.sales-item-row .si-del { padding: 6px 9px; }
.sales-item-row .si-crates-box { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; opacity: 0.9; }
.sales-item-row .si-profile { flex: 0 1 auto; min-width: 0; font-size: 0.8rem; padding: 3px 4px; }
#sales-add-item { margin-top: 2px; }
@media (max-width: 560px) { .sales-items-head { display: none; } }

/* ---- Çok kalemli satın alma girişi: kalem satırları ---- */
.purchase-items-head, .purchase-item-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.purchase-items-head {
    font-size: 0.72rem; color: var(--text-muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em; margin: 2px 0 4px; padding: 0 10px;
}
.purchase-item-row {
    margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg, #fafafa);
}
.purchase-item-row input, .purchase-item-row select { margin: 0; }
.purchase-items-head span:nth-child(1), .purchase-item-row .pi-material { flex: 2 1 150px; min-width: 0; width: auto; }
.purchase-items-head span:nth-child(2), .purchase-item-row .pi-unit-price { flex: 1 1 90px; min-width: 0; width: auto; }
.purchase-items-head span:nth-child(3), .purchase-item-row .pi-qty { flex: 1 1 70px; min-width: 0; width: auto; }
/* Birim kutusu küçülüp "ade" diye kesilmesin (telefon, 2026-09-21). */
.purchase-items-head span:nth-child(4), .purchase-item-row .pi-unit { flex: 0 0 82px; min-width: 0; width: auto; }
/* Ek ton kutusu: birim adet/m² iken görünür (2026-09-21). */
.purchase-items-head span:nth-child(5), .purchase-item-row .pi-ton-grup { flex: 1 1 90px; min-width: 0; }
.pi-ton-grup { display: flex; align-items: center; gap: 4px; }
.pi-ton-grup .pi-ton { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; }
.pi-ton-birim { font-size: 0.85rem; color: var(--text-muted); }
.purchase-items-head span:nth-child(6), .purchase-item-row .pi-vat { flex: 0 1 90px; min-width: 0; width: auto; }
.purchase-items-head span:nth-child(7), .purchase-item-row .pi-del { flex: 0 0 auto; }
.purchase-item-row .pi-ton-grup[hidden], .edit-ton[hidden] { display: none; }
.purchase-item-row .pi-del { padding: 6px 9px; }
.purchase-item-row .pi-total-info { flex: 1 0 100%; font-size: 0.85rem; opacity: 0.85; font-weight: 600; }
.pi-fx-box { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 4px; }
.pi-fx-box .pi-fx-currency { flex: 0 1 140px; }
.pi-fx-box .pi-fx-amount { flex: 0 1 110px; }
.pi-fx-box .pi-fx-hint { flex: 1 1 auto; opacity: 0.85; }
.cell-total-tl { font-size: 0.85em; opacity: 0.8; margin-top: 2px; }
#purchase-add-item { margin-top: 2px; }
@media (max-width: 560px) { .purchase-items-head { display: none; } }

/* ---- "Diğer Satış Girişleri": desen dışı satış kalemleri (araç/hurda/hizmet).
   Ürün satış satırıyla aynı görsel dil, ama m²/kasa yerine miktar + kalem KDV. */
.other-items-head, .other-item-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.other-items-head {
    font-size: 0.72rem; color: var(--text-muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em; margin: 2px 0 4px; padding: 0 10px;
}
.other-item-row {
    margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg, #fafafa);
}
.other-item-row input, .other-item-row select { margin: 0; }
.other-items-head span:nth-child(1), .other-item-row .oi-label { flex: 2 1 170px; min-width: 0; width: auto; }
.other-items-head span:nth-child(2), .other-item-row .oi-qty { flex: 1 1 70px; min-width: 0; width: auto; }
.other-items-head span:nth-child(3), .other-item-row .oi-unit-price { flex: 1 1 90px; min-width: 0; width: auto; }
.other-items-head span:nth-child(4), .other-item-row .oi-currency { flex: 0 1 72px; min-width: 0; width: auto; }
.other-items-head span:nth-child(5), .other-item-row .oi-vat { flex: 0 1 90px; min-width: 0; width: auto; }
.other-items-head span:nth-child(6), .other-item-row .oi-del { flex: 0 0 auto; }
.other-item-row .oi-del { padding: 6px 9px; }
.other-item-row .oi-total-info { flex: 1 0 100%; font-size: 0.85rem; opacity: 0.85; font-weight: 600; }
#other-sales-add-item { margin-top: 2px; }
@media (max-width: 560px) { .other-items-head { display: none; } }

/* Satış tablosunda desen dışı ("Diğer") satırları ayırt eden küçük rozet. */
.sale-kind-tag {
    display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 1px 6px;
    border-radius: 999px; background: var(--border); color: var(--text-muted);
    vertical-align: middle; letter-spacing: 0.02em;
}

/* ---- Çok tarihli teslim programı (milestone): barda noktalı bölüm + açıklama ---- */
/* Kesikli çizgi: dar görünür çizgi + ÜSTÜNE gelmeyi kolaylaştıran geniş şeffaf
   hover alanı (title bilgisi bu alan sayesinde rahat açılır). */
.order-ms-divider {
    position: absolute; top: 0; bottom: 0; width: 11px; margin-left: -5px;
    z-index: 2; cursor: help;
}
.order-ms-divider::before {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
    border-left: 2px dotted rgba(0, 0, 0, 0.6);
}
.order-ms-chip { cursor: help; }
.order-ms-legend { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0 2px; }
.order-ms-chip {
    font-size: 0.76rem; color: var(--text); background: var(--bg);
    border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; white-space: nowrap;
}
.order-ms-chip .ms-date { font-weight: 700; }
.order-ms-chip .ms-cum { color: var(--text-muted); }
/* Milestone giriş satırları (tarih + kasa + sil) — yeni sipariş formu ve düzenleme kartı */
.order-ms-box { margin: 4px 0 10px; }
.order-ms-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.order-ms-row .ms-date { flex: 1 1 auto; min-width: 0; }
.order-ms-row .ms-kasa { flex: 0 0 90px; width: 90px; }
.order-ms-row .ms-del { flex: 0 0 auto; padding: 6px 10px; }
/* Yeni sipariş > "+ Ürün Ekle" satırı (2026-08-20): ızgara düzen -- üst sıra
   5x10/Panel butonları boydan boya, alt sıra desen seçici + m² + kasa + sil
   tek hizada. Önceden satır flex'ti ve butonlar seçicinin içine gömülüydü;
   sayı kutuları butonların hizasına kayıp kaymış görünüyordu. */
/* Sipariş satırı: ÜRÜN(ölçü) · RENK · m² · kasa · sil -- BEŞ hücre.
   (Eskiden ızgara dört sütuna göre kuruluydu, sil düğmesi alt satıra
   düşüyordu.) Satır kendi kutusunda durur ki form içinde dağınık
   görünmesin. */
.order-desen-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}
/* URUN ve RENK kendi TAM SATIRINDA. Yeni Siparis karti en fazla 460px
   (yaninda Siparis Takibi var); bes kutuyu yan yana koyunca listeler
   okunamayacak kadar daraliyordu. Medya sorgusu da ise yaramaz -- o
   PENCERE genisligine bakar, kartin genisligine degil. */
.order-desen-row .odr-urun,
.order-desen-row .odr-renk { grid-column: 1 / -1; }
/* Izgaranin HER cocugu daralabilmeli; aranabilir kutu select'i .ss-wrap
   icine aldigi icin genislik kurali HUCREYE verilir, select'e degil. */
.order-desen-row > * { min-width: 0; }
.order-desen-row .odr-cell > select,
.order-desen-row .odr-cell > .ss-wrap { width: 100%; min-width: 0; }
.order-desen-row .desen-row-m2,
.order-desen-row .desen-row-kasa { width: 100%; min-width: 0; }
.order-desen-row .desen-cat-buttons { grid-column: 1 / -1; margin-bottom: 0; }
/* `.form button` bu satırdaki butonlara da 4px üst boşluk veriyor; ızgara
   hücresinde o 4px hizayı bozuyor. */
.form .order-desen-row button { margin-top: 0; }
.form .order-desen-row .desen-row-del { padding: 10px 14px; }


.order-numbers {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.order-pace {
    font-size: 0.9rem;
    padding: 8px 10px;
    border-radius: 6px;
}

.order-pace.pace-ok { background: #eef7f0; color: #1b6b3a; }
.order-pace.pace-behind { background: #fdecea; color: var(--danger); font-weight: 600; }

/* %100'e ulasan siparisin "Onayla" (tamamla) butonu */
.order-approve-btn {
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: var(--success);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.order-approve-btn:hover { background: #14663b; }
.order-approve-btn:active { transform: scale(0.99); }

/* Sipariş görüntüleme kartı: "Düzenle" (küçük) + varsa "Onayla" (tam genişlik)
   alt alta; Düzenle serbestçe içerik kadar geniş kalsın diye stretch kapalı. */
.order-card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
}
.order-card-actions .order-approve-btn { margin-top: 0; }

/* Sipariş düzenleme kartı: Kaydet/Vazgeç yan yana. */
.order-edit-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.order-card-editing { background: #fdfaf0; }

/* Kısmi teslimat bilgisi (müşteri depodan kaç kasa aldı) */
.order-delivered { color: #1b6b3a; font-weight: 600; }

/* Patron bildirim paneli: bugünün üretim özeti + satış/teslimatlar */
.patron-notify {
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 1px solid var(--yellow);
    border-left: 5px solid var(--yellow);
    border-radius: 10px;
    background: rgba(17, 17, 17, 0.05);
}
.patron-notify .pn-head {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.patron-notify .pn-title { font-weight: 700; font-size: 0.98rem; }

/* Faturası bekleyen hammadde girişleri: fabrikanın kaydettiği, faturası henüz
   işlenmemiş girişler. Satın Alma sekmesinin en üstünde, satın alma kartının
   hemen üstünde durur -- "Faturalandır"a basılana kadar ekranda kalır.
   Sarı sol şerit: bu bir kart değil, YAPILACAK İŞ. */
#raw-invoice-notify.hidden { display: none; }
.rin-kart { border-left: 5px solid var(--yellow); }
.rin-kart h2 { margin-top: 0; }
.rin-list { display: flex; flex-direction: column; gap: 8px; }
.rin-card {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
    padding: 8px 12px; border-radius: 8px; background: #fff;
    border: 1px solid var(--border); font-size: 0.9rem;
}
.rin-card .rin-material { font-weight: 700; }
.rin-card .rin-qty, .rin-card .rin-supplier, .rin-card .rin-time { color: var(--text-muted); }
/* Girenin adı: soluk değil, okunur dursun (2026-09-21). */
.rin-card .rin-kim { color: var(--text); }
.rin-card .rin-btn { margin-left: auto; }
/* Kırmızı çarpı: bildirimi kapat (faturası başka kayıtta girildiyse).
   "Faturalandır"ın hemen yanında, dar ve kare dursun. */
.rin-card .rin-dismiss {
    padding: 4px 9px;
    font-weight: 700;
    line-height: 1;
}
.rin-card .rin-dismiss:disabled { opacity: 0.5; cursor: default; }

/* Satın alma formundaki "hammadde girişine bağlı" şeridi -- Faturalandır'a
   basılınca görünür, hangi girişe bağlı olduğunu net gösterir + kaldırma
   butonu (2026-07-29: görünmez bağın yanlış kaydı kapatması düzeltildi). */
#purchase-prefill-hint:not(.hidden) {
    display: block;
    /* eksi ust bosluk kaldirildi -- ustteki ogenin uzerine biniyordu
       (ayni sorun .hint'te de vardi, 2026-08-26) */
    margin: 0 0 12px;
    background: rgba(17, 17, 17, 0.07);
    border: 1px solid var(--yellow);
    border-left: 4px solid var(--yellow);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.5;
}
#purchase-prefill-hint .prefill-unlink { margin-left: 8px; vertical-align: baseline; }

/* Teslimata hazir siparis: fiyat/birim/not + teslim butonu satiri */
.deliver-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 6px;
}
.deliver-row label { font-size: 0.8rem; }
.deliver-row .deliver-price { width: 110px; }
.deliver-row .deliver-note { width: 180px; }
.deliver-btn {
    background: var(--success, #1e824c);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
}

/* Performans grafikleri: bagimsiz SVG cizgi grafik (Makine Verimliligi,
   Isci Performansi) */
.perf-chart-wrap {
    width: 100%;
}

.perf-chart-svg {
    width: 100%;
    height: auto;
    display: block;
}

.perf-grid-line {
    stroke: var(--border);
    stroke-width: 1;
}

.perf-axis-label {
    font-size: 9px;
    fill: var(--text-muted);
}

.perf-average-line {
    stroke: var(--text-muted);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.perf-line {
    fill: none;
    stroke-width: 2.5;
}

.perf-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.perf-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.perf-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.perf-legend-dash {
    width: 14px;
    height: 0;
    border-radius: 0;
    border-top: 2px dashed var(--text-muted);
    background: none;
}

.perf-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
}

.perf-badge.above { background: rgba(30, 130, 76, 0.14); color: var(--success); }
.perf-badge.below { background: rgba(192, 57, 43, 0.14); color: var(--danger); }

/* ---------------------------------------------------------------- aranabilir liste
   Yerli <select> ekranda kalir ama gizlenir (form gonderimi ve Duzenle Modu
   onu okumaya devam eder); ustunde yazarak suzulen bir kutu ve acilir panel
   durur. Alsancak'ta yuzlerce desen oldugu icin isci listede kaybolmasin diye. */
.ss-wrap { position: relative; }
.ss-native { display: none !important; }

.ss-input {
    width: 100%;
    font-size: 0.92rem;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    background: #fff;
}
.ss-input:focus {
    outline: none;
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.22);
}

.ss-panel {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.13);
}
.ss-item {
    padding: 9px 11px;
    font-size: 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
}
.ss-item:last-child { border-bottom: none; }
.ss-item:hover, .ss-item.ss-aktif { background: rgba(17, 17, 17, 0.08); }
.ss-item.ss-secili { font-weight: 700; }
.ss-group {
    padding: 6px 11px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    background: #fafafa;
    position: sticky;
    top: 0;
}
.ss-bos { padding: 12px 11px; font-size: 0.88rem; color: var(--text-muted); }

/* Tablo icindeki (Duzenle Modu) dar hucrelerde daha sik dursun */
td .ss-input { padding: 6px 8px; font-size: 0.84rem; }
td .ss-panel { min-width: 200px; }

/* Grafiklerdeki ortalama cizgisi (baslıktaki "Ortalama" dugmesi) */
.an-avg-line {
    stroke: var(--danger);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    opacity: 0.9;
}
.an-avg-label {
    font-size: 11px;
    font-weight: 700;
    fill: var(--danger);
}


/* ---------------------------------------------------------------- Sistem sekmesi
   Kurulum ekranı olduğu için sakin bir düzen: başlık + ince ayraç, ferah
   tablolar, satır başına kırmızı düğme YOK (silme kart başlığındaki tek
   düğmeden, seçerek yapılır). */
.sys-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.sys-card-head h2 { margin: 0; }

.sys-table { width: 100%; }
.sys-table th {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 700;
}
.sys-table td { padding-top: 11px; padding-bottom: 11px; }
.sys-table tbody tr { transition: background 0.12s; }
.sys-table tbody tr:hover { background: rgba(17, 17, 17, 0.035); }

/* Seçim kutucuğu: sadece silme modunda çıkar */
.sil-kutu { width: 17px; height: 17px; accent-color: var(--danger); cursor: pointer; }

/* Ölçüsü girilmemiş ürün uyarısı */
.olcu-yok { color: var(--danger); font-weight: 600; font-size: 0.84rem; }

/* Ürün Ekle formundaki en/boy ikilisi dar dursun */
#form-product-add .grid-2 { gap: 10px; }

/* Koli & Kasa: ölçü formu tek satırda aksın */
.size-form .size-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    /* Etiketi iki satira inen alan (orn. "Yükseklik (cm)") yuzunden
       kutular kayiyordu; hepsini ALTTAN hizala -> tek cizgide dururlar. */
    align-items: end;
}
.size-form-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.size-sub-head {
    margin: 26px 0 6px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: 1rem;
}

/* Sistem kart başlığındaki araçlar: arama + Sil düğmesi */
.sys-card-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sys-search {
    font-size: 0.86rem;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    min-width: 180px;
}
.sys-search:focus {
    outline: none;
    border-color: var(--black);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12);
}
/* Başlıktaki kayıt sayacı */
.sys-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg);
    border-radius: 999px;
    padding: 2px 9px;
    margin-left: 6px;
    vertical-align: middle;
}
@media (max-width: 620px) {
    .sys-card-head { flex-wrap: wrap; }
    .sys-search { min-width: 0; flex: 1 1 140px; }
}

/* Sistem > Ürün: solda ürün, sağda desen. Her sütun kendi içinde
   "form üstte, liste altta" akar. */
.sys-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
.sys-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 900px) { .sys-split { grid-template-columns: 1fr; } }

/* Uzun listeler sayfayı uzatmasın: kendi içinde kayar, başlık satırı sabit */
.sys-list-scroll { max-height: 440px; overflow-y: auto; }
.sys-list-scroll thead th {
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 2;
    box-shadow: inset 0 -1px 0 var(--border);
}

/* Liste satırı düzenleme: "Düzenle" modunda satırlar tıklanabilir olur,
   tıklanan satır yerinde forma dönüşür. */
.duz-secilebilir { cursor: pointer; }
.duz-secilebilir:hover { background: rgba(17, 17, 17, 0.06); }
.duz-acik { background: rgba(17, 17, 17, 0.04); }
.satir-duzenle { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.satir-duzenle .edit-input { flex: 1 1 130px; min-width: 90px; }
.satir-duzenle .edit-input.num { flex: 0 0 88px; }

/* Hammadde tipi seçimi: üç tip yan yana, seçili olan siyah dolgulu.
   Fabrikaya gelen üç hammadde tipi farklı birimlerle ölçüldüğü için
   (m² / palet) formun alt alanları bu seçime göre değişir. */
.raw-kind-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.raw-kind-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--surface);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.raw-kind-btn:hover { background: var(--bg); }
.raw-kind-btn:has(input:checked) {
    background: var(--black);
    border-color: var(--black);
    color: var(--surface);
}
.raw-kind-btn input { accent-color: var(--black); }
.raw-kind-btn:has(input:checked) input { accent-color: var(--surface); }

/* Kayıtlar sekmesi: tür rozeti */
.act-kind {
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-muted);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- DEPO */
/* Ozet kartlari: her asamanin toplami. Birimler farkli oldugu icin
   (palet / m2 / pano / kasa / adet) her birim ayri gosterilir. */
.depo-ozet { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.depo-kart {
    flex: 1 1 190px; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: 10px; background: var(--surface);
    display: flex; flex-direction: column; gap: 2px;
}
.depo-kart .dk-ad {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--text-muted);
}
.depo-kart .dk-deger { font-size: 1.05rem; font-weight: 700; }
.depo-kart .dk-deger em { font-size: 0.72rem; font-weight: 600; font-style: normal; color: var(--text-muted); }

.depo-arac { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.depo-arac input[type="search"] { flex: 2 1 220px; min-width: 0; margin: 0; }
.depo-arac select { flex: 1 1 150px; min-width: 0; margin: 0; }

/* Asama rozeti: satirin hangi asamada oldugu bir bakista ayrilsin. */
.depo-rozet {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--border); font-size: 0.7rem; font-weight: 700;
    white-space: nowrap;
}
.depo-arti { color: #2f7d4f; font-weight: 700; }
.depo-eksi { color: #b3261e; font-weight: 700; }
/* ---------------------------------------------------------------- RAFLAR */
/* Her raf gercek bir raf gibi gorunur: kalemler ustte kutular halinde,
   altlarinda raf tahtasi. Numara solda ve iri -- raflar arasinda goz
   gezdirilirken once numara aranir. */
.depo-baslik { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.raf-kutu {
    border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 14px 0; margin-bottom: 14px; background: var(--surface);
}
.raf-ust { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }

/* Raf numarasi: buyuk, kare, kontrastli -- uzaktan okunsun. */
.raf-no {
    flex: 0 0 auto; min-width: 42px; height: 42px; padding: 0 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 800; line-height: 1;
    border-radius: 10px; background: var(--black); color: var(--surface);
}
.raf-baslik { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.raf-ad { font-weight: 700; font-size: 0.95rem; }
.raf-rozetler { display: flex; gap: 6px; flex-wrap: wrap; }
.rr {
    font-size: 0.66rem; font-weight: 700; padding: 1px 8px; border-radius: 999px;
    border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap;
}
.rr-urun { border-color: #9ec5a8; background: #eef7f0; color: #2f6b45; }
.rr-eleman { border-color: #c9c0a6; background: #f8f5ec; color: #7a6a3f; }
.raf-arac { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* Kalemler: raf yuzeyinde yan yana duran kutular. */
.raf-icerik {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    padding-bottom: 10px; min-height: 74px;
}
.raf-kalem {
    position: relative; flex: 0 0 auto; width: 132px;
    border: 1px solid var(--border); border-bottom: none;
    border-radius: 8px 8px 0 0; padding: 8px 10px 10px;
    background: #fff; box-shadow: 0 -1px 0 rgba(0,0,0,0.03);
}
/* Tur ayrimi ust seritten okunur -- renk tek basina tasimasin diye
   kutunun uzerinde ayrica rozet ve title da var. */
.rk-urun { border-top: 3px solid #5c9c72; }
.rk-eleman { border-top: 3px solid #b39a5b; }
.rk-ust { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.rk-simge { font-size: 1.15rem; line-height: 1; }
.rk-islem { display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.raf-kalem:hover .rk-islem, .raf-kalem:focus-within .rk-islem { opacity: 1; }
.rk-dugme {
    border: 1px solid var(--border); background: var(--surface); cursor: pointer;
    border-radius: 6px; width: 22px; height: 22px; line-height: 1;
    font-size: 0.75rem; padding: 0; color: var(--text-muted);
}
.rk-dugme:hover { background: var(--black); color: var(--surface); border-color: var(--black); }
.rk-ad {
    font-size: 0.78rem; font-weight: 600; margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-miktar { font-size: 1.1rem; font-weight: 800; line-height: 1.2; }
.rk-miktar em { font-size: 0.68rem; font-weight: 600; font-style: normal; color: var(--text-muted); margin-left: 4px; }

/* Raf tahtasi: kutularin altindaki kalin cizgi. */
.raf-tahta {
    height: 7px; border-radius: 3px; margin: 0 -14px;
    background: linear-gradient(180deg, #d8cdb6 0%, #b9a77f 60%, #9c8a63 100%);
}
.raf-bos { color: var(--text-muted); font-size: 0.85rem; padding: 20px 4px; }

.raf-bos-durum { text-align: center; padding: 26px 10px; color: var(--text-muted); }
.raf-bos-durum .rb-simge { font-size: 2rem; display: block; margin-bottom: 6px; }
.raf-bos-durum p { margin: 2px 0; }

/* Dar ekran: kutular tam genislige yayilsin. */
@media (max-width: 560px) {
    .raf-kalem { width: calc(50% - 5px); }
    .raf-arac { margin-left: 0; width: 100%; }
}
/* Depo karti: raf/kalem/sayim islemleri tarayici prompt kutusu yerine
   panelin kendi kartinda yapilir. */
/* Kart iceriginin TAMAMI ekrana sigmali: alanlar iki sutun, alan alani
   kendi icinde kayar, Kaydet/Vazgec satiri altta SABIT durur. Onceden
   13 alan alt alta dizilince kaydet dugmesi ekran disinda kaliyordu. */
#depo-modal .modal-box { width: min(680px, 100%); }
#depo-modal-form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.depo-form {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px; margin-bottom: 4px;
    overflow-y: auto; min-height: 0; padding-right: 4px;
}
.depo-alan { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Uzun icerikli alanlar (konum ipucu, aciklama) tam satir. */
.depo-alan.genis { grid-column: 1 / -1; }
.depo-alan > span { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); }
.depo-alan input, .depo-alan select { margin: 0; width: 100%; }
/* Kart icindeki bolum basligi: ustune ince bir cizgi, altina aciklama. */
.depo-alan-baslik { grid-column: 1 / -1; display: flex; flex-direction: column;
    gap: 3px; margin-top: 6px; padding-top: 10px;
    border-top: 1px solid var(--border); }
.depo-alan-baslik > strong { font-size: 0.82rem; color: var(--text); }
.depo-alan-baslik > span { font-size: 0.72rem; line-height: 1.45; color: var(--text-muted); }
.depo-form-arac {
    display: flex; gap: 8px; align-items: center; margin-top: 12px;
    padding-top: 12px; border-top: 1px solid var(--border); flex: 0 0 auto;
}
/* Telefonda tek sutun. */
@media (max-width: 560px) {
    .depo-form { grid-template-columns: 1fr; }
}
/* Kartlardaki ANA dugme (Kaydet/Sevk Et) form icinde olmadigi icin
   bembeyaz kaliyor, yanindaki Vazgec ondan daha belirgin duruyordu --
   basilacak dugme hangisi belli olsun. */
.depo-form-arac .btn-primary {
    min-width: 120px; padding: 10px 18px; border: none; border-radius: 8px;
    cursor: pointer; font-size: 0.92rem; font-weight: 700;
    background: var(--yellow); color: var(--accent-ink);
}
.depo-form-arac .btn-primary:hover { background: var(--yellow-hover); }
.depo-form-arac .btn-primary.btn-danger { background: var(--danger, #8c1d18); color: #fff; }
/* Hata kartin ICINDE kalir -- kullanici yazdigini kaybetmesin. */
.form-error {
    margin: 6px 0 0; padding: 8px 10px; border-radius: 8px;
    background: #fdecea; border: 1px solid #f3b6b0; color: #8c1d18;
    font-size: 0.82rem;
}
.form-error.hidden { display: none; }
/* Raf gruplari: urun raflari ile uretim elemani raflari ayri bloklarda. */
.raf-grup { margin-bottom: 18px; }
.raf-grup-ust { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.raf-grup-ad { margin: 0; font-size: 0.95rem; font-weight: 800; }
.raf-grup-sayi { font-size: 0.72rem; color: var(--text-muted); font-weight: 700; }
.raf-grup-not { margin: 0 0 8px; }
.raf-grup-bos { padding: 10px 2px; }
/* Turu raf kutusunun kenarindan da okunsun -- rozet tek basina kalmasin. */
.raf-kutu.raf-urun { border-left: 4px solid #5c9c72; }
.raf-kutu.raf-eleman { border-left: 4px solid #b39a5b; }
/* ------------------------------------------------ DEPO STOK LISTESI */
/* Depo alt sekmeleri (stok listesi / raflar / uretim akisi / ayarlar) */
.depo-sub { display: none; }
.depo-sub.active { display: block; animation: fade-in 0.18s ease-out; }

/* Durum artik RENKLE degil kendi alaninda; rozet yalnizca hizli okuma icin.
   Metin her zaman yazili -- renk tek basina bilgi tasimiyor. */
.stok-durum {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700; white-space: nowrap; border: 1px solid;
}
.sd-depo { background: #eef7f0; border-color: #9ec5a8; color: #2f6b45; }
.sd-sevk { background: #eef1f8; border-color: #b3bdd6; color: #3c4a70; }
.sd-yok  { background: #fdecea; border-color: #f3b6b0; color: #8c1d18; }
/* Ayrılmış: depoda duruyor ama müşteriye ayrılmış (2026-09-30). */
.sd-ayri { background: #fdf0ff; border-color: #dda6ea; color: #6b2c7a; }

.stok-tip {
    display: inline-block; font-size: 0.64rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--text-muted); margin-right: 4px;
}
/* Uzun aciklamalar satiri sismesin; tamami title olarak duruyor. */
.stok-not {
    max-width: 260px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: var(--text-muted); font-size: 0.8rem;
}
#stok-tablo td { vertical-align: middle; }
/* Stok listesi ekrana sigmiyordu (Islem sutunu disarida kaliyordu):
   dolgu ve yazi kuculdu, en genis iki sutun (konum ayrintisi, aciklama)
   kirpilip ipucuna alindi. */
.stok-siki thead th { padding: 5px 7px; font-size: 0.72rem; }
.stok-siki tbody td { padding: 4px 7px; font-size: 0.79rem; }
.stok-siki .stok-durum { padding: 1px 7px; font-size: 0.65rem; }
.stok-kod { font-weight: 700; border-bottom: 1px dotted var(--border); cursor: help; }
.stok-siki .stok-not { max-width: 170px; font-size: 0.74rem; }
/* Islem sutunu: yazili dugmeler yerine simge -- iki dugme 54px'e sigiyor. */
.stok-islem { white-space: nowrap; }
.stok-islem .rk-dugme { width: 24px; height: 24px; font-size: 0.8rem; }
.stok-islem .stok-sil:hover { background: #b3261e; border-color: #b3261e; color: #fff; }
/* Suzgec satiri: kutular daralsin ki tek satira daha cok sigsin. */
#deposub-stok .depo-arac input[type="search"] { flex: 1 1 180px; }
#deposub-stok .depo-arac select,
#deposub-stok .depo-arac .ss-wrap { flex: 0 1 128px; min-width: 0; }
#deposub-stok .depo-arac .ss-input { font-size: 0.8rem; }
/* Gorunum secici: Kayitlar / Urun Ozeti */
.stok-gorunum { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
/* Secili olmayan dugme: zemin seffaf oldugu icin YAZI RENGI de geri
   alinmali. btn-small'in kendi rengi beyaz (--accent-ink), cunku normalde
   siyah zemin uzerinde duruyor; burada devralinirsa beyaz uzerine beyaz
   yazi cikar ve "Urun Ozeti" gorunmez olur (2026-09-14). */
.stok-gorunum .btn-small { border: none; border-radius: 0; margin: 0;
    background: transparent; color: var(--text); }
.stok-gorunum .btn-small.aktif { background: var(--black); color: var(--surface); }
/* Ozet satiri tiklanabilir: o urunun kayitlarina gecer. */
.stok-ozet-satir { cursor: pointer; }
.stok-ozet-satir:hover td { background: #f6f4ee; }

/* ================================= DEPO GİRİŞ / ÇIKIŞ (depocunun telefonu)
   Bu ekran ayakta, tek elle, elinde kasayla kullanılıyor. O yüzden:
   varsayılan düzen TELEFON düzeni (tek sütun, iri dokunma alanı); geniş
   ekranda satırlar yan yana açılır. Tersi olsaydı (masaüstü varsayılan,
   telefon istisna) asıl kullanıcı istisna durumda kalırdı. */
.depo-p-ozet { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.depo-p-rozet {
    padding: 7px 12px; border-radius: 999px; font-size: 0.8rem;
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.depo-p-rozet b { font-size: 1rem; }
/* Bekleyen kasa varsa dikkat çeksin: depocunun yapacak işi var demek. */
.depo-p-rozet.bekliyor { background: #fff4e5; border-color: #f0c890; color: #7a4a08; }

.depo-p-yon { display: flex; gap: 8px; margin-bottom: 12px; }
.depo-p-yon-btn {
    flex: 1; padding: 14px 10px; font-size: 0.95rem; font-weight: 700;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text); cursor: pointer;
}
.depo-p-yon-btn.active { background: var(--black); color: var(--accent-ink); border-color: var(--black); }

.depo-p-bolum { display: none; }
.depo-p-bolum.active { display: block; }
.depo-p-kart { margin-bottom: 14px; }

/* Bilgi + düğme. Telefonda alt alta, geniş ekranda yan yana. */
.depo-p-satir, .depo-p-hareket {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px 0; border-top: 1px solid var(--border);
}
.depo-p-satir:first-child, .depo-p-hareket:first-child { border-top: none; }
.depo-p-satir-bilgi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.depo-p-satir-bilgi strong { font-size: 0.95rem; color: var(--text); }
.depo-p-satir-bilgi span { font-size: 0.85rem; color: var(--text-muted); }
.depo-p-kucuk { font-size: 0.75rem; }
.depo-p-satir-dugme { display: flex; gap: 8px; }
.depo-p-satir .btn-primary, .depo-p-satir .btn-small { padding: 12px 16px; font-size: 0.88rem; }
.depo-p-buyuk { width: 100%; padding: 15px; font-size: 0.95rem; }

.depo-p-ara { display: flex; gap: 8px; margin-bottom: 10px; }
.depo-p-ara input { flex: 1; margin: 0; padding: 13px 12px; font-size: 1rem; }
.depo-p-ara button { padding: 13px 20px; }

.depo-p-bos { color: var(--text-muted); font-size: 0.85rem; margin: 6px 0; }

/* Hareket defteri: yön tek bakışta okunsun. */
.depo-p-yon-etiket {
    align-self: flex-start; padding: 3px 9px; border-radius: 999px;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em;
}
.depo-p-yon-etiket.giris { background: #eef7f0; border: 1px solid #9ec5a8; color: #2f6b45; }
.depo-p-yon-etiket.cikis { background: #eef1f8; border: 1px solid #b3bdd6; color: #3c4a70; }
/* Geri alınan işlem silinmiyor, soluklaşıyor -- hatanın kendisi de kayıt. */
.depo-p-hareket.iptal { opacity: 0.55; }
.depo-p-hareket.iptal .depo-p-satir-bilgi strong { text-decoration: line-through; }

@media (min-width: 620px) {
    .depo-p-satir, .depo-p-hareket { flex-direction: row; align-items: center; }
    .depo-p-satir-bilgi { flex: 1; }
    .depo-p-yon-etiket { align-self: center; }
    .depo-p-buyuk { width: auto; }
}

/* Depocunun ekraninda bir siparise AYRILMIS kasa: cikis dugmesi yok,
   kime ayrildigi yazar. */
.depo-p-ayrilmis { background: #fdf3f2; border-color: #f3b6b0; }
.depo-p-ayrildi { display: inline-block; margin-top: 4px; font-weight: 800;
    font-size: 0.82rem; color: #8c1d18; letter-spacing: .02em; }

/* ============ SIPARISE AYRILACAK KASALAR (depocunun telefonu) */
.depo-p-ayrilacak-kart { border: 2px solid #e3c27a; background: #fff9ec; }
.depo-p-ayrilacak-kart h2 { display: flex; align-items: center; gap: 8px; }
#depo-p-ayrilacak-say { background: #8c1d18; color: #fff; border-radius: 999px;
    padding: 1px 9px; font-size: 0.82rem; font-weight: 800; }
.dpa-satir { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
    padding: 10px 0; border-top: 1px solid #efe6cf; }
.dpa-satir:first-child { border-top: 0; }
.dpa-bilgi { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 180px; }
.dpa-kod { font-size: 1.35rem; font-weight: 800; letter-spacing: .04em; line-height: 1.1; }
.dpa-urun { font-weight: 600; }
.dpa-alt { font-size: 0.82rem; color: var(--text-muted); }
/* Basilacak dugme belli olsun: kartlardaki ana dugmeyle ayni gorunum. */
.dpa-onayla { flex: 0 0 auto; padding: 12px 18px; font-size: 0.95rem;
    font-weight: 700; border: none; border-radius: 8px; cursor: pointer;
    background: var(--yellow); color: var(--accent-ink); }
.dpa-onayla:hover { background: var(--yellow-hover); }
.dpa-onayla:disabled { opacity: .55; }

/* Telefon bildirimi dugmesi (baslik cubugunda). Acikken yesil. */
#bildirim-dugme { background: var(--yellow); color: var(--accent-ink); }
#bildirim-dugme.acik { background: #2f6b45; color: #fff; }
#bildirim-dugme:disabled { opacity: .6; cursor: default; }

/* ===================================== ÜRETİM PROGRAMI (fabrika) */
.up-hafta { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
    margin-bottom: 12px; background: #fff; }
.up-hafta-ust { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline;
    margin-bottom: 6px; }
.up-hafta-ad { font-weight: 800; font-size: 1.02rem; }
.up-hafta-top { color: #8c1d18; font-weight: 800; }
.up-bu-hafta { background: #fff7e6; border-color: #e3c27a; }
.up-tablo { width: 100%; font-size: 0.92rem; }
.up-tablo th { text-align: left; font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted);
    border-bottom: 1px solid var(--border); padding: 4px 6px; }
.up-tablo td { padding: 6px; border-bottom: 1px solid #f0efec; }
.up-urun { font-weight: 700; }
.up-kasa { color: #8c1d18; font-weight: 800; white-space: nowrap; }
.up-hazir { color: #2f6b45; white-space: nowrap; }
.up-po { color: var(--text-muted); font-size: 0.82rem; }
@media (max-width: 700px) {
    .up-tablo, .up-tablo tbody, .up-tablo tr, .up-tablo td { display: block; width: 100%; }
    .up-tablo thead { display: none; }
    .up-tablo tr { border-bottom: 1px solid var(--border); padding: 6px 0; }
    .up-tablo td { border: 0; padding: 2px 0; }
}

/* ============================ SİPARİŞ: DEPODAN KASA AYIRMA EKRANI
   İki bölme yan yana; her bölme kendi içinde kaydırılır, kart yüksekliği
   sabit kalır. Telefonda bölmeler alt alta iner. */
#sip-kasa-modal .modal-box { width: min(900px, 100%); }
/* Kaydet dugmesi form icinde olmadigi icin .form button gorunumunu
   almiyordu, bembeyaz kaliyordu. Panelin her yerindeki ana dugmeyle
   ayni dursun. */
#sip-kasa-modal .btn-primary {
    padding: 10px 18px; border: none; border-radius: 8px; cursor: pointer;
    background: var(--yellow); color: var(--accent-ink);
    font-size: 0.92rem; font-weight: 700;
}
#sip-kasa-modal .btn-primary:hover { background: var(--yellow-hover); }
.skm-musteri { margin-left: 10px; font-weight: 600; color: var(--text-muted); }
.skm-urun { margin: 0 0 4px; font-weight: 700; }
.skm-sayac { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px;
    font-size: 0.9rem; color: var(--text-muted); }
.skm-sayac b { color: var(--text); }
.skm-eksik { color: #8c1d18; font-weight: 800; }
.skm-tam { color: #2f6b45; font-weight: 800; }
.skm-fazla { color: #8a6d1f; font-weight: 800; }
.skm-arac { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.skm-arac input[type="search"] { flex: 1 1 170px; margin: 0; }
.skm-bolmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    flex: 1 1 auto; min-height: 0; }
.skm-bolme { display: flex; flex-direction: column; min-height: 0;
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.skm-bolme h3 { margin: 0; padding: 7px 10px; font-size: 0.76rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
    background: #f6f5f2; border-bottom: 1px solid var(--border); }
.skm-sag-bolme h3 { background: #eef7f0; color: #2f6b45; }
.skm-liste { overflow-y: auto; max-height: 44vh; -webkit-overflow-scrolling: touch; }
.skm-satir { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    border-bottom: 1px solid #f0efec; cursor: pointer; user-select: none;
    touch-action: pan-y; }
.skm-satir:last-child { border-bottom: 0; }
.skm-satir:hover { background: #f7faf8; }
.skm-satir:active { background: #eef7f0; }
.skm-kod { font-weight: 800; }
.skm-tip, .skm-tarih { color: var(--text-muted); font-size: 0.79rem; }
.skm-mik { margin-left: auto; font-size: 0.85rem; white-space: nowrap; }
.skm-ok { color: #2f6b45; font-weight: 800; }
.skm-geri { color: #8c1d18; font-weight: 800; }
/* Depo o kasayi raftan cekip onayladi. */
.skm-onay { color: #2f6b45; font-weight: 800; margin-left: 4px; }
.skm-bos { padding: 10px; margin: 0; }
@media (max-width: 760px) {
    .skm-bolmeler { grid-template-columns: 1fr; }
    .skm-liste { max-height: 27vh; }
    .skm-mik { font-size: 0.8rem; }
}
/* Cok dar telefonlarda (320px) kutu/m2 yazisi satira sigmiyordu; alt satira
   iner, saga dayali kalir. */
@media (max-width: 380px) {
    .skm-satir { flex-wrap: wrap; gap: 4px 6px; }
    .skm-mik { flex-basis: 100%; margin-left: 0; text-align: right; }
}

/* ===================================== SİPARİŞLER (PO) — 2026-09-30 */
.sip-ust { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .sip-ust { grid-template-columns: 1fr; } }
.sip-kalem-head, .sip-kalem-row {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.sip-kalem-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); font-weight: 700; margin-top: 6px; }
.sip-kalem-row { padding: 8px; border: 1px solid var(--border); border-radius: 10px;
    margin-bottom: 8px; background: #fbfbfa; }
.sip-kalem-row input, .sip-kalem-row select { margin: 0; }
.sip-kalem-head span:nth-child(1), .sip-kalem-row .sk-urun { flex: 2 1 150px; min-width: 0; width: auto; }
.sip-kalem-head span:nth-child(2), .sip-kalem-row .sk-olcu { flex: 1 1 90px; min-width: 0; width: auto; }
.sip-kalem-head span:nth-child(3), .sip-kalem-row .sk-yuzey { flex: 1 1 110px; min-width: 0; width: auto; }
.sip-kalem-head span:nth-child(4), .sip-kalem-row .sk-miktar { flex: 0 1 90px; min-width: 0; width: auto; }
.sip-kalem-head span:nth-child(5), .sip-kalem-row .sk-birim { flex: 0 1 80px; min-width: 0; width: auto; }
.sip-kalem-head span:nth-child(6), .sip-kalem-row .sk-del { flex: 0 0 auto; }
.sip-kalem-row .sk-del { padding: 6px 9px; }

.sip-kart { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
    margin-bottom: 10px; background: #fff; }
/* Siparişler > Grupla (2026-10-08): müşteri/ürün/ölçü/yüzey bazında düz liste. */
.sip-grup { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
    margin-bottom: 10px; background: #fff; }
.sip-grup-baslik { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
    padding-bottom: 6px; border-bottom: 2px solid var(--yellow); margin-bottom: 4px; }
.sip-kart-ust { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.sip-po { font-weight: 800; font-size: 1.02rem; }
.sip-musteri { font-weight: 600; }
.sip-hafta-etiket { font-size: 0.78rem; color: var(--text-muted); }
.sip-rozet { display: inline-block; padding: 1px 8px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; border: 1px solid; }
.sip-acik { background: #eef7f0; border-color: #9ec5a8; color: #2f6b45; }
.sip-bitti { background: #eef1f8; border-color: #b3bdd6; color: #3c4a70; }
.sip-iptal { background: #fdecea; border-color: #f3b6b0; color: #8c1d18; }
.sip-ozet { margin-left: auto; font-size: 0.85rem; color: var(--text-muted); }
.sip-kalem-tablo { width: 100%; margin-top: 8px; font-size: 0.9rem; }
.sip-kalem-tablo th { text-align: left; font-size: 0.72rem; text-transform: uppercase;
    color: var(--text-muted); border-bottom: 1px solid var(--border); padding: 4px 6px; }
.sip-kalem-tablo td { padding: 5px 6px; border-bottom: 1px solid #f0efec; }
.sip-uretilecek { color: #8c1d18; font-weight: 700; }
.sip-hazir { color: #2f6b45; font-weight: 700; }
.sip-hafta-tablo { width: 100%; font-size: 0.9rem; }
.sip-hafta-tablo th, .sip-hafta-tablo td { padding: 5px 6px; border-bottom: 1px solid #f0efec; text-align: left; }
.sip-hafta-baslik { font-weight: 800; }
/* Haftalik programda ayrilan kasalarin numaralari -- ustundeki PO
   satirina ait oldugu belli olsun diye iceriden baslar. */
.sip-hafta-kasa td { font-size: 0.82rem; color: var(--text-muted);
    padding: 0 6px 8px 20px; border-bottom: 1px solid #f0efec; }
.sip-hafta-kasa b { color: var(--text); font-weight: 700; letter-spacing: .03em; }

/* ===================================== BEKLEYEN SATIŞLAR (muhasebe ekranı)
   Depodan çıkan mal muhasebenin önüne iş olarak düşer. Bekleyen sayısı
   sekmede rakam olarak durur -- muhasebe Satış sekmesinde olmasa bile
   yapılacak iş olduğunu görsün. */
/* Patlatma: makine basina gunluk toplam kutulari (2026-09-23). */
.patlatma-ozet { display: flex; flex-wrap: wrap; gap: 10px; }
.patlatma-kutu {
    flex: 1 1 150px; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: 10px; background: #fff;
}
.patlatma-kutu .pk-ad { font-weight: 700; font-size: 0.9rem; }
.patlatma-kutu .pk-adet { font-size: 1.3rem; font-weight: 800; }
.patlatma-kutu .pk-m2 { color: var(--text-muted); font-size: 0.9rem; }

.tab-rozet, .bs-rozet {
    display: inline-block; min-width: 18px; margin-left: 6px; padding: 1px 6px;
    border-radius: 999px; background: var(--danger); color: #ffffff;
    font-size: 0.7rem; font-weight: 800; line-height: 1.5; text-align: center;
}
.bs-say { font-size: 0.75em; font-weight: 600; color: var(--danger); }

.bs-sec { width: 34px; text-align: center; }
.bs-sec input { margin: 0; }
#bekleyen-tablo tr.bs-secili td { background: #f3f6fb; }
.bs-bos { color: var(--text-muted); font-size: 0.85rem; padding: 10px 4px; }
.bs-arac {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px;
}
.bs-alt-baslik {
    margin: 18px 0 4px; padding-top: 14px; font-size: 0.95rem;
    border-top: 1px solid var(--border);
}
/* Kalem satırındaki sayı kutuları dar dursun -- tablo taşmasın. */
#bekleyen-kalem-tablo input { width: 110px; margin: 0; text-align: right; }
#bekleyen-kalem-tablo tfoot th { font-size: 0.85rem; }

.bs-gecmis-satir {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 0; border-top: 1px solid var(--border);
}
.bs-gecmis-satir:first-child { border-top: none; }
.bs-gecmis-bilgi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bs-gecmis-bilgi strong { font-size: 0.9rem; }
.bs-gecmis-bilgi span { font-size: 0.82rem; color: var(--text-muted); }
.bs-kucuk { font-size: 0.74rem; }
.bs-durum {
    flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em;
}
.bs-durum.kesildi { background: #eef7f0; border: 1px solid #9ec5a8; color: #2f6b45; }
.bs-durum.iptal   { background: #fdecea; border: 1px solid #f3b6b0; color: #8c1d18; }

@media (max-width: 620px) {
    #bekleyen-kalem-tablo input { width: 78px; }
    .bs-arac > button { flex: 1 1 auto; }
}

/* ===================================== AL-SAT (üretimden geçmeden gelen mal)
   İki geliş şekli (kasa hazır / palet üstü) ambalaj davranışı farklı
   olduğu için mod düğmeleriyle ayrılıyor. */
.as-mod-btn {
    padding: 10px 18px; font-size: 0.9rem; font-weight: 700; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
}
.as-mod-btn.active { background: var(--black); color: var(--accent-ink); border-color: var(--black); }
/* Form solda, boş ambalaj stoğu sağda; dar ekranda alt alta. */
.as-ust { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.as-alt-baslik {
    margin: 16px 0 4px; padding-top: 12px; font-size: 0.95rem;
    border-top: 1px solid var(--border);
}
.as-bos { color: var(--text-muted); font-size: 0.85rem; }
.as-stok-grup { margin-bottom: 12px; }
.as-stok-grup > strong { display: block; font-size: 0.82rem; margin-bottom: 4px; }
.as-stok-satir {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 3px 0; font-size: 0.84rem; color: var(--text-muted);
}
.as-stok-satir b { color: var(--text); }
/* Eksiye düşen kalem: alımı girilmemiş demek, göze batsın. */
.as-stok-satir.eksi b { color: var(--danger); }

@media (max-width: 900px) { .as-ust { grid-template-columns: 1fr; } }

/* Taşın ocak/Türkçe adı: ADIN PARÇASI değil, ayrı bir bilgi alanı. Ada
   karışmasın diye daha silik ve italik gösteriliyor. */
.tas-yerel { font-style: italic; color: var(--text-muted); font-size: 0.9em; }
.tas-yerel.bos { opacity: 0.5; }

/* m² otomatik hesabının açıklaması: kutunun hemen altında, küçük. */
.m2-not { margin: -4px 0 8px; font-size: 0.75rem; }