/* uygulama.css — Marelya görünüm altyapısı (Faz 0, 04.11.2026). Tek dosya, katmanlı. Kural kaynağı: ekip/toplanti/2026-11-04_tasarim/TUTANAK.md. - Katman sırası özgüllükten önce gelir: bootstrap < belirtec < temel < bilesen < ekran < yardimci. - Hex renk ve px yazı boyu YALNIZ belirtec katmanında. !important yok. Bootstrap yalnız --bs-* ve bileşen değişkenleriyle boyanır. - Yazı: tek aile (Plus Jakarta Sans, latin + latin-ext tek dosya), 400/500/600/700, her yerde tabular rakam. - Boy ölçeği kapalı küme: 12 · 13 · 14 · 16 · 20 · 24 · 32 (terminal ek: 40 · 56). - Yan yana iki metnin ayrılması bileşenin işaretlemesindedir (blok satır ya da görünür ayraç); CSS boşluğa güvenilmez. Bekçi testi: Marelya.Tests/Arayuz/CssBekciTestleri.cs */ @layer bootstrap, belirtec, temel, bilesen, ekran, yardimci; @import url("../lib/bootstrap/dist/css/bootstrap.min.css") layer(bootstrap); @import url("../lib/bootstrap-icons/bootstrap-icons.min.css") layer(bootstrap); /* ================================================================================================ BELİRTEÇ */ @layer belirtec { @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plus-jakarta-sans-400.woff2") format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plus-jakarta-sans-500.woff2") format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plus-jakarta-sans-600.woff2") format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plus-jakarta-sans-700.woff2") format("woff2"); } :root { /* --- Marka (müşterinin kurumsal kimliği: prototip CSS + marelya.com) --- */ --r-murekkep: #221F20; /* menü zemini, ana metin — beyazda 16,3:1 */ --r-murekkep-2: #2E2A2B; /* menüde üzerine gelme */ --r-murekkep-3: #3A3536; /* menü ayırıcı */ --r-altin: #BC9632; /* birincil düğme dolgusu, seçili öğe — üzerinde mürekkep 5,87:1 (beyaz YASAK 2,78:1) */ --r-altin-ust: #A8852A; /* altın üzerine gelince — mürekkep 4,71:1 */ --r-altin-koyu: #8E7024; /* bağlantı, odak, altın metin — beyazda 4,67:1 */ --r-altin-acik: #D9B75E; /* menüde seçili öğe metni — mürekkepte 8,47:1 */ --r-altin-sis: #F7F2E6; /* seçili satır, altın tint */ --r-altin-cizgi: #E6D6A8; --r-tas: #F6F5F2; /* sayfa zemini */ --r-tas-2: #EFEDE8; /* iskelet, ikincil zemin */ --r-tas-ust: #FAF9F7; /* tablo başlığı, üzerine gelme */ --r-yuzey: #FFFFFF; --r-cizgi: #E4E1DA; /* ayırıcı (süs) */ --r-cizgi-guclu: #8F897F; /* giriş kenarı — 3,47:1 */ --r-metin: #221F20; --r-metin-2: #5F5A54; /* 6,8:1 */ --r-metin-3: #756F67; /* 5,0:1 (taşta 4,56:1) */ --r-menu-metin: #E2DFD8; /* mürekkepte 12,3:1 */ --r-menu-soluk: #BCB7A9; /* mürekkepte 8,2:1 — müşterinin sıcak grisi */ --r-beyaz: #FFFFFF; --r-golge: rgba(34, 31, 32, .08); --r-golge-guclu: rgba(34, 31, 32, .18); --r-ortu: rgba(34, 31, 32, .42); --r-menu-secili: rgba(188, 150, 50, .16); --r-menu-ustune: rgba(255, 255, 255, .06); /* Isı ızgarası seviyeleri (altın ölçeği; 4'te metin beyaz değil mürekkep) */ --r-harita-0: #F6F5F2; --r-harita-1: #F3EAD2; --r-harita-2: #E6D6A8; --r-harita-3: #D4B970; --r-harita-4: #BC9632; --r-odak: rgba(142, 112, 36, .45); --r-odak-altin: rgba(188, 150, 50, .35); /* --- Anlam renkleri: kırmızı yalnız gecikme/ret/hata; amber yaklaşan termin ve şartlı kabul --- */ --r-kirmizi: #C8322F; --r-kirmizi-yazi: #B02B28; --r-kirmizi-sis: #FBEAEA; --r-amber: #B7791F; --r-amber-yazi: #8A5B15; --r-amber-sis: #FBF1E1; --r-yesil: #2E8B57; --r-yesil-yazi: #23704A; --r-yesil-sis: #E6F1EB; /* --- Operasyon akışı (prototip anlam eşlemesi, doygun) — işaret / rozet zemini / rozet metni --- */ --op-onay: #7B4FA0; --op-onay-sis: #EFEAF4; --op-onay-yazi: #6E4690; --op-malzeme: #C0562A; --op-malzeme-sis: #F7EBE5; --op-malzeme-yazi: #A44A24; --op-islak: #1F78B4; --op-islak-sis: #E4EFF6; --op-islak-yazi: #1A6699; --op-kuru: #BC9632; --op-kuru-sis: #F7F2E6; --op-kuru-yazi: #7A611F; --op-kalite: #0F8A8A; --op-kalite-sis: #E2F1F1; --op-kalite-yazi: #0B7070; --op-paket: #8B5E34; --op-paket-sis: #F1ECE7; --op-paket-yazi: #7E552F; --op-hazir: #2E8B57; --op-hazir-sis: #E6F1EB; --op-hazir-yazi: #23704A; --op-sevk: #1F5E3A; --op-sevk-sis: #E4ECE7; --op-sevk-yazi: #1F5E3A; --op-bekle: #6E6A63; --op-bekle-sis: #EEEDEC; --op-bekle-yazi: #5F5B55; --op-iptal: #57534E; --op-iptal-sis: #EBEAEA; --op-iptal-yazi: #57534E; /* --- Terminal (koyu kiosk: mürekkep + altın, müşterinin terminal dili) --- */ --t-zemin: #1A1718; --t-yuzey: #262223; --t-yuzey-2: #312C2D; --t-cizgi: #443E3F; --t-metin: #F3F1EC; --t-soluk: #BCB7A9; /* --- Yazı --- */ --yazi-aile: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --yb-12: 12px; --ys-12: 16px; --yb-13: 13px; --ys-13: 18px; --yb-14: 14px; --ys-14: 20px; --yb-16: 16px; --ys-16: 24px; --yb-20: 20px; --ys-20: 28px; --yb-24: 24px; --ys-24: 32px; --yb-32: 32px; --ys-32: 40px; --yb-40: 40px; --ys-40: 48px; /* yalnız terminal */ --yb-56: 56px; --ys-56: 64px; /* yalnız terminal sayacı */ --ya-normal: 400; --ya-orta: 500; --ya-yari: 600; --ya-kalin: 700; /* --- Ölçü --- */ --a-1: 4px; --a-2: 8px; --a-3: 12px; --a-4: 16px; --a-5: 20px; --a-6: 24px; --a-8: 32px; --a-10: 40px; --a-12: 48px; --yc-1: 6px; --yc-2: 8px; --yc-3: 12px; --yc-tam: 999px; --denetim-y: 40px; --dokun-y: 44px; --satir-y: 56px; --kabuk-menu: 248px; --kabuk-menu-dar: 72px; --kabuk-ust: 56px; --cekmece-g: 480px; --icerik-en: 1600px; /* --- Bootstrap 5.3 teması (yalnız değişken) --- */ --bs-body-font-family: var(--yazi-aile); --bs-body-font-size: var(--yb-14); --bs-body-line-height: 1.4286; --bs-body-font-weight: 400; --bs-body-color: #221F20; --bs-body-color-rgb: 34, 31, 32; --bs-body-bg: #F6F5F2; --bs-body-bg-rgb: 246, 245, 242; --bs-emphasis-color: #221F20; --bs-secondary-color: #5F5A54; --bs-tertiary-color: #756F67; --bs-secondary-bg: #EFEDE8; --bs-tertiary-bg: #FAF9F7; --bs-border-color: #E4E1DA; --bs-border-color-translucent: rgba(34, 31, 32, .12); --bs-border-radius: 8px; --bs-border-radius-sm: 6px; --bs-border-radius-lg: 12px; --bs-primary: #BC9632; --bs-primary-rgb: 188, 150, 50; --bs-link-color: #8E7024; --bs-link-color-rgb: 142, 112, 36; --bs-link-hover-color: #221F20; --bs-link-hover-color-rgb: 34, 31, 32; --bs-danger: #C8322F; --bs-danger-rgb: 200, 50, 47; --bs-warning-rgb: 183, 121, 31; --bs-success-rgb: 46, 139, 87; --bs-focus-ring-color: rgba(142, 112, 36, .45); --bs-form-invalid-color: #B02B28; --bs-form-invalid-border-color: #C8322F; --bs-highlight-bg: #F7F2E6; } } /* ================================================================================================ TEMEL */ @layer temel { html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kabuk-ust) + var(--a-2)); } body { margin: 0; font-family: var(--yazi-aile); font-size: var(--yb-14); line-height: var(--ys-14); color: var(--r-metin); background: var(--r-tas); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } input, select, textarea, button { font-variant-numeric: inherit; } h1 { margin: 0; color: var(--r-metin); font-size: var(--yb-24); line-height: var(--ys-24); font-weight: var(--ya-kalin); } h2 { margin: 0; color: var(--r-metin); font-size: var(--yb-20); line-height: var(--ys-20); font-weight: var(--ya-yari); } h3 { margin: 0; color: var(--r-metin); font-size: var(--yb-16); line-height: var(--ys-16); font-weight: var(--ya-yari); } h4, h5, h6 { margin: 0; color: var(--r-metin); font-size: var(--yb-14); line-height: var(--ys-14); font-weight: var(--ya-yari); } p { margin: 0; } small { font-size: var(--yb-12); line-height: var(--ys-12); } b, strong { font-weight: var(--ya-yari); } a:not([class]) { color: var(--r-altin-koyu); text-underline-offset: 2px; } a:not([class]):hover { color: var(--r-metin); } kbd { display: inline-block; min-width: 20px; padding: 0 var(--a-1); border: 1px solid var(--r-cizgi); border-radius: var(--yc-1); background: var(--r-yuzey); color: var(--r-metin-2); font: inherit; font-size: var(--yb-12); line-height: var(--ys-12); text-align: center; } :focus-visible { outline: 2px solid var(--r-altin-koyu); outline-offset: 2px; } [hidden] { display: none; } ::selection { background: var(--r-altin-sis); color: var(--r-metin); } dl { margin: 0; padding: 0; } ol:not(.dropdown-menu), ul:not(.dropdown-menu) { margin: 0; padding: 0; list-style: none; } dd { margin: 0; } details > summary { cursor: pointer; } progress { appearance: none; } svg { flex: 0 0 auto; } } /* ================================================================================================ BİLEŞEN */ @layer bilesen { /* ---------- 1. Kabuk: menü + üst çubuk + sayfa başlığı ---------- */ .kabuk { display: flex; min-height: 100vh; min-height: 100dvh; } .kabuk-menu { position: relative; flex: 0 0 var(--kabuk-menu); width: var(--kabuk-menu); z-index: 1030; color: var(--r-menu-metin); } .kabuk-menu::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--r-murekkep); } .kabuk-menu-ic { position: sticky; top: 0; display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh; background: var(--r-murekkep); } .kabuk-marka { display: flex; align-items: center; height: var(--kabuk-ust); padding: 0 var(--a-5); border-bottom: 1px solid var(--r-murekkep-3); color: var(--r-beyaz); text-decoration: none; } .kabuk-marka:hover { color: var(--r-beyaz); } .kabuk-marka .logo { display: block; width: 112px; height: auto; } .logo .lg-fr { fill: var(--r-altin); } .logo .lg-tx { fill: currentColor; } .kabuk-marka-kisa { display: none; width: 28px; height: 28px; border: 2px solid var(--r-altin); border-radius: var(--yc-1); } .kabuk-gezinti { flex: 1 1 auto; overflow-y: auto; padding: var(--a-3) var(--a-3) var(--a-4); scrollbar-width: thin; scrollbar-color: var(--r-murekkep-3) transparent; } .menu-grup + .menu-grup { margin-top: var(--a-4); } .menu-grup-baslik { display: block; padding: 0 var(--a-3) var(--a-1); color: var(--r-menu-soluk); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-yari); letter-spacing: .02em; } .menu-oge { position: relative; display: flex; align-items: center; gap: var(--a-3); min-height: var(--denetim-y); padding: 0 var(--a-3); border-radius: var(--yc-2); color: var(--r-menu-metin); text-decoration: none; font-weight: var(--ya-orta); } .menu-oge:hover { background: var(--r-menu-ustune); color: var(--r-beyaz); } .menu-oge .bi { order: -1; flex: 0 0 20px; font-size: var(--yb-16); line-height: 1; text-align: center; color: var(--r-menu-soluk); } .menu-oge-ad { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .menu-oge[aria-current="page"] { background: var(--r-menu-secili); color: var(--r-altin-acik); } .menu-oge[aria-current="page"] .bi { color: var(--r-altin-acik); } .menu-oge[aria-current="page"]::before { content: ""; position: absolute; left: calc(-1 * var(--a-3)); top: var(--a-2); bottom: var(--a-2); width: 3px; border-radius: 0 3px 3px 0; background: var(--r-altin); } .menu-rozet { flex: 0 0 auto; min-width: 22px; padding: 0 var(--a-2); border-radius: var(--yc-tam); background: var(--r-altin); color: var(--r-murekkep); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-kalin); text-align: center; } .menu-rozet:empty { display: none; } .kabuk-menu-alt { padding: var(--a-3); border-top: 1px solid var(--r-murekkep-3); } .menu-daralt { display: flex; align-items: center; gap: var(--a-3); width: 100%; min-height: var(--denetim-y); padding: 0 var(--a-3); border: 0; border-radius: var(--yc-2); background: transparent; color: var(--r-menu-soluk); text-align: left; } .menu-daralt:hover { background: var(--r-menu-ustune); color: var(--r-beyaz); } .menu-daralt .bi { order: -1; flex: 0 0 20px; font-size: var(--yb-16); text-align: center; } .kabuk-ana { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .ust-cubuk { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: var(--a-3); height: var(--kabuk-ust); padding: 0 var(--a-8); background: var(--r-yuzey); border-bottom: 1px solid var(--r-cizgi); } .ust-menu-ac { display: none; } .ust-ara { display: flex; align-items: center; gap: var(--a-2); width: min(420px, 100%); height: var(--denetim-y); padding: 0 var(--a-3); border: 1px solid var(--r-cizgi); border-radius: var(--yc-2); background: var(--r-tas); color: var(--r-metin-3); text-align: left; } .ust-ara:hover { border-color: var(--r-cizgi-guclu); color: var(--r-metin-2); } .ust-ara-metin { flex: 1 1 auto; min-width: 0; white-space: nowrap; } .ust-sag { display: flex; align-items: center; gap: var(--a-4); margin-left: auto; } .baglanti { display: inline-flex; align-items: center; gap: var(--a-2); color: var(--r-metin-3); font-size: var(--yb-13); line-height: var(--ys-13); white-space: nowrap; } .baglanti::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--r-yesil); box-shadow: 0 0 0 3px var(--r-yesil-sis); } .baglanti[data-durum="baglaniyor"]::before { background: var(--r-amber); box-shadow: 0 0 0 3px var(--r-amber-sis); } .baglanti[data-durum="uyari"]::before { background: var(--r-amber); box-shadow: 0 0 0 3px var(--r-amber-sis); } .baglanti[data-durum="kopuk"]::before { background: var(--r-kirmizi); box-shadow: 0 0 0 3px var(--r-kirmizi-sis); } .baglanti[data-durum="kopuk"] { color: var(--r-kirmizi-yazi); } .kullanici { display: flex; align-items: center; gap: var(--a-2); height: var(--denetim-y); padding: 0 var(--a-2) 0 var(--a-1); border: 0; border-radius: var(--yc-2); background: transparent; color: var(--r-metin); text-align: left; } .kullanici:hover { background: var(--r-tas); } .kullanici-bas { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--r-altin); color: var(--r-murekkep); font-size: var(--yb-12); line-height: 1; font-weight: var(--ya-kalin); } .kullanici-bilgi { display: flex; flex-direction: column; min-width: 0; } .kullanici-ad { font-weight: var(--ya-yari); white-space: nowrap; } .kullanici-rol { color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); white-space: nowrap; } .kullanici-baslik { display: flex; flex-direction: column; padding: var(--a-2) var(--a-4); } .kullanici-baslik-alt { color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); } .sayfa { width: 100%; max-width: var(--icerik-en); padding: var(--a-6) var(--a-8) var(--a-12); } .sayfa-baslik { display: flex; align-items: flex-start; gap: var(--a-4); margin-bottom: var(--a-5); } .sayfa-baslik-metin { flex: 1 1 auto; min-width: 0; } .sayfa-baslik-ust { display: block; margin-bottom: var(--a-1); } .sayfa-baslik h1 { overflow-wrap: anywhere; } .sayfa-ozet { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--a-2); margin-top: var(--a-1); color: var(--r-metin-2); } .sayfa-ozet-oge { min-width: 0; overflow-wrap: break-word; } /* kısa öğe satırca alta iner; satırdan uzun firma adı yana taşmaz, kendi içinde kırılır */ .sayfa-ozet-oge b { color: var(--r-metin); font-weight: var(--ya-yari); } .ayrac { color: var(--r-metin-3); } .sayfa-eylemler { display: flex; align-items: center; gap: var(--a-2); flex: 0 0 auto; } .geri-baglanti { display: inline-flex; align-items: center; gap: var(--a-1); color: var(--r-metin-2); text-decoration: none; font-weight: var(--ya-orta); } .geri-baglanti:hover { color: var(--r-metin); } .alt-sekmeler { display: none; } .serit { position: sticky; top: 0; z-index: 1040; display: flex; align-items: center; justify-content: center; gap: var(--a-2); min-height: var(--denetim-y); padding: var(--a-2) var(--a-4); font-weight: var(--ya-yari); text-align: center; } .serit--baglanti { background: var(--r-kirmizi); color: var(--r-beyaz); } .serit--degisti { background: var(--r-altin-sis); color: var(--r-metin); border-bottom: 1px solid var(--r-altin-cizgi); } .cevrimdisi [data-yazma] { cursor: not-allowed; } .atla-baglanti { position: absolute; left: var(--a-2); top: -100px; z-index: 2000; padding: var(--a-2) var(--a-3); border-radius: var(--yc-2); background: var(--r-murekkep); color: var(--r-beyaz); } .atla-baglanti:focus { top: var(--a-2); } /* ---------- 2. Düğme (Bootstrap .btn, yalnız değişken) ---------- */ .btn { --bs-btn-font-family: var(--yazi-aile); --bs-btn-font-size: var(--yb-14); --bs-btn-font-weight: var(--ya-yari); --bs-btn-line-height: var(--ys-14); --bs-btn-padding-x: var(--a-4); --bs-btn-padding-y: var(--a-2); --bs-btn-border-radius: var(--yc-2); --bs-btn-focus-box-shadow: 0 0 0 3px var(--r-odak); display: inline-flex; align-items: center; justify-content: center; gap: var(--a-2); min-height: var(--denetim-y); white-space: nowrap; } .btn .bi { font-size: var(--yb-16); line-height: 1; } .btn-sm { --bs-btn-padding-x: var(--a-3); --bs-btn-padding-y: var(--a-1); --bs-btn-font-size: var(--yb-13); --bs-btn-line-height: var(--ys-13); min-height: 32px; } .btn-primary { --bs-btn-color: var(--r-murekkep); --bs-btn-bg: var(--r-altin); --bs-btn-border-color: var(--r-altin); --bs-btn-hover-color: var(--r-murekkep); --bs-btn-hover-bg: var(--r-altin-ust); --bs-btn-hover-border-color: var(--r-altin-ust); --bs-btn-active-color: var(--r-murekkep); --bs-btn-active-bg: var(--r-altin-ust); --bs-btn-active-border-color: var(--r-altin-ust); --bs-btn-disabled-color: var(--r-metin-2); --bs-btn-disabled-bg: var(--r-altin-cizgi); --bs-btn-disabled-border-color: var(--r-altin-cizgi); } .btn-secondary { --bs-btn-color: var(--r-metin); --bs-btn-bg: var(--r-yuzey); --bs-btn-border-color: var(--r-cizgi); --bs-btn-hover-color: var(--r-metin); --bs-btn-hover-bg: var(--r-tas-ust); --bs-btn-hover-border-color: var(--r-cizgi-guclu); --bs-btn-active-color: var(--r-metin); --bs-btn-active-bg: var(--r-tas-2); --bs-btn-active-border-color: var(--r-cizgi-guclu); --bs-btn-disabled-color: var(--r-metin-3); --bs-btn-disabled-bg: var(--r-tas); --bs-btn-disabled-border-color: var(--r-cizgi); } .btn-hayalet { --bs-btn-color: var(--r-metin-2); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--r-metin); --bs-btn-hover-bg: var(--r-tas-2); --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--r-metin); --bs-btn-active-bg: var(--r-tas-2); --bs-btn-active-border-color: transparent; --bs-btn-disabled-color: var(--r-metin-3); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent; } .btn-danger, .btn-outline-danger { --bs-btn-color: var(--r-kirmizi-yazi); --bs-btn-bg: var(--r-yuzey); --bs-btn-border-color: var(--r-kirmizi); --bs-btn-hover-color: var(--r-beyaz); --bs-btn-hover-bg: var(--r-kirmizi); --bs-btn-hover-border-color: var(--r-kirmizi); --bs-btn-active-color: var(--r-beyaz); --bs-btn-active-bg: var(--r-kirmizi-yazi); --bs-btn-active-border-color: var(--r-kirmizi-yazi); } .btn-link { --bs-btn-color: var(--r-altin-koyu); --bs-btn-hover-color: var(--r-metin); --bs-btn-font-weight: var(--ya-yari); } .btn-ikon { --bs-btn-padding-x: 0; width: var(--denetim-y); } .btn-ikon.btn-sm { width: 32px; } .btn.yukleniyor { position: relative; color: transparent; pointer-events: none; } .btn.yukleniyor::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--r-metin-3); border-right-color: transparent; animation: don .7s linear infinite; } .btn-close { --bs-btn-close-focus-shadow: 0 0 0 3px var(--r-odak); width: 20px; height: 20px; padding: var(--a-2); } .btn-group { gap: 0; } /* ---------- 3. : etiket + denetim + birim + yardım + hata ---------- */ .alan { display: flex; flex-direction: column; gap: var(--a-1); min-width: 0; } .alan-etiket, .form-label { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--a-2); margin: 0; color: var(--r-metin-2); font-size: var(--yb-13); line-height: var(--ys-13); font-weight: var(--ya-orta); } .alan-etiket-ek { color: var(--r-metin-3); font-weight: var(--ya-normal); } .zorunlu { color: var(--r-kirmizi-yazi); } .alan-kutu { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; row-gap: var(--a-1); min-width: 0; } .alan-kutu > .form-control, .alan-kutu > .form-select { flex: 1 1 auto; min-width: 0; } .alan-birim { position: absolute; right: var(--a-3); top: 0; height: var(--denetim-y); display: flex; align-items: center; pointer-events: none; color: var(--r-metin-3); font-size: var(--yb-13); } .alan-kutu--birimli > .form-control { padding-right: 64px; text-align: right; } .alan-yardim, .form-text { margin: 0; color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); } .alan-hata, .invalid-feedback { display: block; width: 100%; margin: 0; color: var(--r-kirmizi-yazi); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-orta); } .alan-hata:empty { display: none; } .form-control, .form-select { min-height: var(--denetim-y); padding: var(--a-2) var(--a-3); border: 1px solid var(--r-cizgi-guclu); border-radius: var(--yc-2); background-color: var(--r-yuzey); color: var(--r-metin); font-size: var(--yb-14); line-height: var(--ys-14); font-weight: var(--ya-normal); } select.form-select { padding-right: var(--a-8); background-position: right var(--a-3) center; } .form-control-sm, .form-select-sm { min-height: var(--denetim-y); font-size: var(--yb-14); } textarea.form-control { min-height: 88px; } .form-control::placeholder { color: var(--r-metin-3); opacity: 1; } .form-control:focus, .form-select:focus { border-color: var(--r-altin-koyu); box-shadow: 0 0 0 3px var(--r-odak); } .form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--r-tas); color: var(--r-metin-2); } .form-control.is-invalid, .form-select.is-invalid { border-color: var(--r-kirmizi); background-image: none; padding-right: var(--a-3); } .form-check-input { width: 18px; height: 18px; margin-top: 0; border-color: var(--r-cizgi-guclu); } .form-check-input:checked { background-color: var(--r-altin); border-color: var(--r-altin-koyu); } .form-check-input:focus { box-shadow: 0 0 0 3px var(--r-odak); border-color: var(--r-altin-koyu); } .form-check { display: flex; align-items: center; gap: var(--a-2); min-height: var(--denetim-y); margin: 0; padding: 0; } .form-check .form-check-input { float: none; margin: 0; } .form-check-label { color: var(--r-metin); } .kod-alan { font-weight: var(--ya-yari); letter-spacing: .01em; } .sayi-alan { text-align: right; } .alan-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-4); } .alan-izgara > .tam { grid-column: 1 / -1; } .alan-izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .alan-izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .form-bolum-baslik { margin-bottom: var(--a-3); color: var(--r-metin); font-size: var(--yb-14); line-height: var(--ys-14); font-weight: var(--ya-yari); } .alan-izgara--kase { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); padding: var(--a-4); border: 1px solid var(--r-cizgi); border-radius: var(--yc-3); background: var(--r-yuzey); } .form-bolum { margin-top: var(--a-6); border-top: 1px solid var(--r-cizgi); padding-top: var(--a-4); } .form-bolum > summary { margin-bottom: var(--a-4); color: var(--r-metin); font-weight: var(--ya-yari); } .form-hata { padding: var(--a-3) var(--a-4); border: 1px solid var(--r-kirmizi); border-radius: var(--yc-2); background: var(--r-kirmizi-sis); color: var(--r-kirmizi-yazi); font-weight: var(--ya-orta); } .form-hata:not([hidden]) { margin-bottom: var(--a-4); } /* ---------- 4. Süzgeç çubuğu: hazır görünümler + arama + en çok 2 seçim, tek satır ---------- */ .suzgec { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-2); padding: var(--a-3) var(--a-4); border-bottom: 1px solid var(--r-cizgi); } /* Taban genişlikleri küçük, büyüme payı tavanlı: yer varsa arama 340, seçim 180 px'e açılır; dar çubukta önce bunlar daralır, satır ancak tabanlar da sığmazsa kırılır (Stok, Denetim 1440'ta tek satır). */ .suzgec-ara { position: relative; flex: 1 1 180px; max-width: 340px; min-width: 180px; } .suzgec-ara > .bi { position: absolute; left: var(--a-3); top: 50%; transform: translateY(-50%); color: var(--r-metin-3); pointer-events: none; } .suzgec-ara > .form-control { padding-left: var(--a-10); } .suzgec-secim { flex: 1 1 150px; max-width: 180px; min-width: 140px; } .suzgec-sag { display: flex; align-items: center; gap: var(--a-2); margin-left: auto; } /* ---------- 5. Segment denetimi (2–4 seçenek) ve hazır görünüm sekmesi ---------- */ .segment { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--yc-2); background: var(--r-tas-2); } .segment-oge { display: inline-flex; align-items: center; gap: var(--a-2); min-height: 34px; padding: 0 var(--a-3); border: 0; border-radius: var(--yc-1); background: transparent; color: var(--r-metin-2); font-weight: var(--ya-orta); white-space: nowrap; } .segment-oge:hover { color: var(--r-metin); } .segment-oge[aria-pressed="true"], .segment-oge[aria-selected="true"] { background: var(--r-yuzey); color: var(--r-metin); font-weight: var(--ya-yari); box-shadow: 0 1px 2px var(--r-golge-guclu); } .segment--izgara, .segment--izgara-3 { display: inline-flex; } .segment-sayi { min-width: 20px; padding: 0 var(--a-1); border-radius: var(--yc-tam); background: var(--r-yuzey); color: var(--r-metin-2); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-yari); text-align: center; } .segment-sayi:empty { display: none; } .segment-oge[aria-pressed="true"] .segment-sayi { background: var(--r-tas-2); } .segment-oge[data-ton="sinyal"] .segment-sayi { background: var(--r-kirmizi-sis); color: var(--r-kirmizi-yazi); } .segment-oge[data-ton="uyari"] .segment-sayi { background: var(--r-amber-sis); color: var(--r-amber-yazi); } /* ---------- 6. Durum çipi: renk sunucunun durum metninden (data-durum) ---------- */ [data-durum] { --durum-isaret: var(--op-bekle); --durum-sis: var(--op-bekle-sis); --durum-yazi: var(--op-bekle-yazi); } [data-durum="Onay Bekliyor"] { --durum-isaret: var(--op-onay); --durum-sis: var(--op-onay-sis); --durum-yazi: var(--op-onay-yazi); } [data-durum="Malzeme Bekleniyor"] { --durum-isaret: var(--op-malzeme); --durum-sis: var(--op-malzeme-sis); --durum-yazi: var(--op-malzeme-yazi); } [data-durum="Islak Üretim"] { --durum-isaret: var(--op-islak); --durum-sis: var(--op-islak-sis); --durum-yazi: var(--op-islak-yazi); } [data-durum="Kuru Üretim"] { --durum-isaret: var(--op-kuru); --durum-sis: var(--op-kuru-sis); --durum-yazi: var(--op-kuru-yazi); } [data-durum="Kalite Kontrol"] { --durum-isaret: var(--op-kalite); --durum-sis: var(--op-kalite-sis); --durum-yazi: var(--op-kalite-yazi); } [data-durum="Paketlemede"] { --durum-isaret: var(--op-paket); --durum-sis: var(--op-paket-sis); --durum-yazi: var(--op-paket-yazi); } [data-durum="Sevkiyata Hazır"], [data-durum="Uygun"] { --durum-isaret: var(--op-hazir); --durum-sis: var(--op-hazir-sis); --durum-yazi: var(--op-hazir-yazi); } [data-durum="Sevk Oldu"] { --durum-isaret: var(--op-sevk); --durum-sis: var(--op-sevk-sis); --durum-yazi: var(--op-sevk-yazi); } [data-durum="İptal"] { --durum-isaret: var(--op-iptal); --durum-sis: var(--op-iptal-sis); --durum-yazi: var(--op-iptal-yazi); } [data-durum="Şartlı Kabul"] { --durum-isaret: var(--r-amber); --durum-sis: var(--r-amber-sis); --durum-yazi: var(--r-amber-yazi); } [data-durum="Düzeltme Gerekli"] { --durum-isaret: var(--op-malzeme); --durum-sis: var(--op-malzeme-sis); --durum-yazi: var(--op-malzeme-yazi); } [data-durum="Ret"] { --durum-isaret: var(--r-kirmizi); --durum-sis: var(--r-kirmizi-sis); --durum-yazi: var(--r-kirmizi-yazi); } /* Plaka (depo_app.js), paket, sevkiyat ve teslim aşaması durumları — prototipin anlam eşlemesiyle */ [data-durum="Kullanılabilir"], [data-durum="Teslim Edildi"] { --durum-isaret: var(--op-hazir); --durum-sis: var(--op-hazir-sis); --durum-yazi: var(--op-hazir-yazi); } [data-durum="Rezerve"] { --durum-isaret: var(--op-islak); --durum-sis: var(--op-islak-sis); --durum-yazi: var(--op-islak-yazi); } [data-durum="Kontrolde"] { --durum-isaret: var(--op-onay); --durum-sis: var(--op-onay-sis); --durum-yazi: var(--op-onay-yazi); } [data-durum="Hasarlı"] { --durum-isaret: var(--op-malzeme); --durum-sis: var(--op-malzeme-sis); --durum-yazi: var(--op-malzeme-yazi); } [data-durum="Üretime Verildi"] { --durum-isaret: var(--op-kuru); --durum-sis: var(--op-kuru-sis); --durum-yazi: var(--op-kuru-yazi); } [data-durum="Çıktı"], [data-durum="Yolda"], [data-durum="Teslim Bekliyor"] { --durum-isaret: var(--op-sevk); --durum-sis: var(--op-sevk-sis); --durum-yazi: var(--op-sevk-yazi); } [data-durum="Kısmi Teslim"], [data-durum="Kısmen Teslim"] { --durum-isaret: var(--r-amber); --durum-sis: var(--r-amber-sis); --durum-yazi: var(--r-amber-yazi); } [data-durum="Satıldı"] { --durum-isaret: var(--op-sevk); --durum-sis: var(--op-sevk-sis); --durum-yazi: var(--op-sevk-yazi); } [data-durum="Hurda"], [data-durum="İade"] { --durum-isaret: var(--r-kirmizi); --durum-sis: var(--r-kirmizi-sis); --durum-yazi: var(--r-kirmizi-yazi); } /* Planlandı, Açık, Kapandı, Kontrol Bekliyor: varsayılan nötr (bekle) */ .cip { display: inline-flex; flex: none; align-items: center; gap: var(--a-2); min-height: 24px; padding: 0 var(--a-2); border: 0; border-radius: var(--yc-tam); background: var(--durum-sis, var(--op-bekle-sis)); color: var(--durum-yazi, var(--op-bekle-yazi)); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-yari); white-space: nowrap; vertical-align: middle; } .cip[data-durum]::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--durum-isaret); } .cip[data-durum="İptal"] { text-decoration: line-through; } button.cip { cursor: pointer; } button.cip:hover { box-shadow: inset 0 0 0 1px var(--durum-isaret, var(--r-cizgi-guclu)); } .cip--yalin { background: var(--r-tas-2); color: var(--r-metin-2); } .cip--murekkep { background: var(--r-murekkep); color: var(--r-beyaz); } .cip--altin { background: var(--r-altin-sis); color: var(--op-kuru-yazi); } .cip--uyari { background: var(--r-amber-sis); color: var(--r-amber-yazi); } .cip--tehlike { background: var(--r-kirmizi-sis); color: var(--r-kirmizi-yazi); } .cip--eylem { background: var(--r-yuzey); color: var(--r-metin); box-shadow: inset 0 0 0 1px var(--r-cizgi); } .cip--buyuk { min-height: 32px; padding: 0 var(--a-3); font-size: var(--yb-14); line-height: var(--ys-14); } .cip-listesi { display: flex; flex-wrap: wrap; gap: var(--a-1) var(--a-2); } /* ---------- 7. : sabit başlık, iki satırlı hücre, sayı/ölçü/tarih/durum/ilerleme/eylem, toplam ---------- */ .kart { position: relative; min-width: 0; border: 1px solid var(--r-cizgi); border-radius: var(--yc-3); background: var(--r-yuzey); box-shadow: 0 1px 2px var(--r-golge); } .tablo-kabi { position: relative; min-width: 0; } /* Kayan kaplar konumlandırma bağlamıdır: içlerindeki position:absolute öğe (.gorunmez vb.) kaptan kaçıp belgeyi uzatmasın. */ .kayan, .kart-kayar { position: relative; } .tablo { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; color: var(--r-metin); } .tablo th { position: sticky; top: var(--kabuk-ust); z-index: 2; height: 40px; padding: 0 var(--a-3); border-bottom: 1px solid var(--r-cizgi); background: var(--r-tas-ust); color: var(--r-metin-2); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-yari); text-align: left; overflow-wrap: anywhere; vertical-align: middle; } .tablo th:first-child { border-top-left-radius: var(--yc-3); } .tablo th:last-child { border-top-right-radius: var(--yc-3); } .tablo td { height: var(--satir-y); padding: var(--a-2) var(--a-3); border-bottom: 1px solid var(--r-cizgi); vertical-align: middle; overflow: hidden; } /* Çok satırlı satırda seçim kutusu kimlik satırıyla aynı hizada durur (ortada kalırsa Tab görsel olarak yukarı döner). */ .tablo tr:has(> td[data-cok-satir]) > td.s-sec { vertical-align: top; padding-top: calc(var(--a-2) + 2px); } .tablo tbody tr:last-child td { border-bottom: 0; } .tablo tbody tr[data-tiklanir] { cursor: pointer; } .tablo tbody tr[data-tiklanir]:hover td { background: var(--r-tas-ust); } .tablo tbody tr[aria-selected="true"] td { background: var(--r-altin-sis); } .tablo tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--r-altin); } .tablo tbody tr[data-vurgu] td { animation: vurgu 1.6s ease-out; } .tablo tbody tr[data-iptal] td { color: var(--r-metin-3); } /* Açılan alt tablo satırı (G-C İ-090): vurgusuz, girintili, solda ince çizgi; içindeki tablo kendi başlığıyla. */ .tablo tbody tr.alt-satir > td { height: auto; padding: 0 0 var(--a-3) var(--a-6); background: var(--r-tas-ust); cursor: default; } .tablo tbody tr.alt-satir:hover > td { background: var(--r-tas-ust); } .tablo tbody tr.alt-satir > td > .tablo-kabi { border-left: 2px solid var(--r-altin-cizgi); background: var(--r-yuzey); } .tablo tfoot td { height: 48px; padding: 0 var(--a-3); border-top: 1px solid var(--r-cizgi); background: var(--r-tas-ust); font-weight: var(--ya-yari); white-space: nowrap; } .tablo tfoot td:first-child { border-bottom-left-radius: var(--yc-3); } .tablo tfoot td:last-child { border-bottom-right-radius: var(--yc-3); } .tablo .hiza-sag { text-align: right; } .tablo td.s-eylem, .pc-tablo td.s-durum { overflow: visible; } .tablo .hiza-orta { text-align: center; } .sirala { display: inline-flex; align-items: center; gap: var(--a-1); max-width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: var(--ya-yari); white-space: nowrap; } .sirala::after { content: "\2195"; color: var(--r-cizgi-guclu); font-weight: var(--ya-normal); } .sirala:hover { color: var(--r-metin); } th[aria-sort="ascending"] .sirala::after { content: "\2191"; color: var(--r-altin-koyu); } th[aria-sort="descending"] .sirala::after { content: "\2193"; color: var(--r-altin-koyu); } .sirala:disabled { cursor: default; } .sirala:disabled::after { content: none; } /* Hücre türleri — her parça ayrı blok satırdır; yan yana yapışamaz. */ .hucre-ana { display: block; overflow-wrap: anywhere; font-weight: var(--ya-yari); } .hucre-alt { display: block; overflow-wrap: anywhere; color: var(--r-metin-3); font-size: var(--yb-13); line-height: var(--ys-13); } .hucre-alt:empty { display: none; } .hucre-alt[data-ton="sinyal"] { color: var(--r-kirmizi-yazi); font-weight: var(--ya-yari); } .hucre-alt[data-ton="uyari"] { color: var(--r-amber-yazi); font-weight: var(--ya-yari); } .hucre-alt[data-ton="iyi"] { color: var(--r-yesil-yazi); } .hucre-sayi { display: block; text-align: right; white-space: nowrap; } .sayi-deger { font-weight: var(--ya-yari); } .sayi-deger[data-ton="sinyal"] { color: var(--r-kirmizi-yazi); } .sayi-deger[data-ton="uyari"] { color: var(--r-amber-yazi); } .tablo td .btn-link { --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; min-height: 0; justify-content: flex-start; text-align: left; } .sayi-birim { margin-left: var(--a-2); color: var(--r-metin-3); font-size: var(--yb-13); font-weight: var(--ya-normal); } .hucre-sayi > .hucre-alt { text-align: right; } .hucre-olcu { display: inline-flex; align-items: baseline; gap: var(--a-2); white-space: nowrap; font-weight: var(--ya-yari); } .olcu-x { color: var(--r-metin-3); font-weight: var(--ya-normal); } .hucre-ilerleme { display: flex; flex-direction: column; gap: var(--a-1); min-width: 0; } .hucre-ilerleme-metin { display: block; white-space: nowrap; font-weight: var(--ya-yari); } .ilerleme { display: block; width: 100%; height: 6px; border: 0; border-radius: var(--yc-tam); background: var(--r-tas-2); overflow: hidden; color: var(--r-yesil); } .ilerleme::-webkit-progress-bar { background: var(--r-tas-2); border-radius: var(--yc-tam); } .ilerleme::-webkit-progress-value { background: var(--ilerleme-renk, var(--r-yesil)); border-radius: var(--yc-tam); } .ilerleme::-moz-progress-bar { background: var(--ilerleme-renk, var(--r-yesil)); border-radius: var(--yc-tam); } .ilerleme[data-durum] { --ilerleme-renk: var(--durum-isaret); } .hucre-eylem { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--a-1) var(--a-2); } .hucre-yok { color: var(--r-metin-3); } /* Satır içi yazılabilir ızgara hücresi (Parçalar, ihracat, revizyon): Tab ile ilerler, fare gerekmez. */ .izgara-girdi { width: 100%; min-width: 0; height: var(--denetim-y); padding: 0 var(--a-2); border: 1px solid transparent; border-radius: var(--yc-1); background: var(--r-tas); color: var(--r-metin); font-weight: var(--ya-yari); text-align: right; } .izgara-girdi:hover { border-color: var(--r-cizgi); background: var(--r-yuzey); } .izgara-girdi:focus { outline: 0; border-color: var(--r-altin-koyu); background: var(--r-yuzey); box-shadow: 0 0 0 3px var(--r-odak); } .izgara-girdi:disabled { background: transparent; color: var(--r-metin-2); cursor: not-allowed; } .izgara-girdi[aria-invalid="true"] { border-color: var(--r-kirmizi); background: var(--r-kirmizi-sis); } .izgara-girdi[data-kaydediliyor] { color: var(--r-metin-3); } .izgara-girdi[data-kaydedildi] { box-shadow: inset 0 -2px 0 var(--r-yesil); } select.izgara-girdi { padding-right: var(--a-1); text-align: left; text-align-last: right; cursor: pointer; } .izgara-hata { display: block; margin-top: 2px; color: var(--r-kirmizi-yazi); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-orta); white-space: normal; text-align: right; } .izgara-hata:empty { display: none; } .izgara-kilit { display: block; height: var(--denetim-y); padding: 0 var(--a-2); color: var(--r-metin-2); font-weight: var(--ya-yari); line-height: var(--denetim-y); text-align: right; } /* ---------- 8. Sağ çekmece (Bootstrap offcanvas-end) ---------- */ .offcanvas { --bs-offcanvas-padding-x: var(--a-6); --bs-offcanvas-padding-y: var(--a-5); --bs-offcanvas-border-color: var(--r-cizgi); --bs-offcanvas-bg: var(--r-yuzey); --bs-offcanvas-color: var(--r-metin); } .offcanvas-backdrop { --bs-backdrop-bg: var(--r-murekkep); --bs-backdrop-opacity: .36; } .cekmece { --bs-offcanvas-width: min(var(--cekmece-g), 100vw); box-shadow: -12px 0 32px var(--r-golge-guclu); } .cekmece--genis { --bs-offcanvas-width: min(640px, 100vw); } .offcanvas-header { align-items: flex-start; gap: var(--a-3); border-bottom: 1px solid var(--r-cizgi); } .offcanvas-title, .modal-title { font-size: var(--yb-16); line-height: var(--ys-16); font-weight: var(--ya-kalin); } .cekmece-baslik { display: flex; flex-direction: column; gap: var(--a-1); min-width: 0; flex: 1 1 auto; } .cekmece-baslik-ust { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-2); } .cekmece-baslik-alt { display: block; color: var(--r-metin-2); overflow-wrap: anywhere; } .offcanvas-body { display: flex; flex-direction: column; gap: var(--a-5); } .offcanvas-footer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-2); padding: var(--a-4) var(--a-6); border-top: 1px solid var(--r-cizgi); background: var(--r-tas-ust); } .cekmece-form { display: flex; flex-direction: column; height: 100%; min-height: 0; } .cekmece-form > .offcanvas-body { flex: 1 1 auto; overflow-y: auto; } .bolum { display: flex; flex-direction: column; gap: var(--a-3); } .bolum-baslik { color: var(--r-metin-2); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-yari); letter-spacing: .02em; } .tanim-listesi, .alan-listesi { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--a-2) var(--a-4); margin: 0; } .tanim-listesi dt, .alan-listesi dt { color: var(--r-metin-3); font-weight: var(--ya-normal); } .tanim-listesi dd, .alan-listesi dd { margin: 0; color: var(--r-metin); font-weight: var(--ya-orta); overflow-wrap: anywhere; } .sayi-seridi { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: var(--a-2); } .sayi-seridi-oge { display: flex; flex-direction: column; padding: var(--a-3); border: 1px solid var(--r-cizgi); border-radius: var(--yc-2); background: var(--r-tas-ust); } .sayi-seridi-deger { font-size: var(--yb-20); line-height: var(--ys-20); font-weight: var(--ya-kalin); white-space: nowrap; } .sayi-seridi-ad { color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); } /* Değerin altındaki açıklama (en çok 2 satır, sarar; kırpılmaz) ve döşeme içi oranlı çubuk (G-A İ-018, G-C depo özeti). */ .sayi-seridi-alt { color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); overflow-wrap: anywhere; } .sayi-seridi-oge > .ilerleme { margin-top: var(--a-2); } /* Akış dağılımı: parçaların aşamalara göre sayısı (kart ve iş klasörü) */ .akis-serit { display: flex; height: 10px; gap: 2px; border-radius: var(--yc-tam); overflow: hidden; background: var(--r-tas-2); } .akis-dilim { flex: 0 0 auto; min-width: 4px; background: var(--durum-isaret); } .akis-lejant { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-1) var(--a-4); } .akis-lejant-oge { display: flex; align-items: center; gap: var(--a-2); min-width: 0; color: var(--r-metin-2); } .akis-lejant-oge::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--durum-isaret); } .akis-lejant-ad { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .akis-lejant-sayi { color: var(--r-metin); font-weight: var(--ya-yari); } /* ---------- 9. Sekmeler ---------- */ .sekmeler { display: flex; flex-wrap: wrap; gap: 0 var(--a-1); border-bottom: 1px solid var(--r-cizgi); } .sekme { position: relative; display: inline-flex; align-items: center; gap: var(--a-2); min-height: 44px; padding: 0 var(--a-4); border: 0; background: transparent; color: var(--r-metin-2); font-weight: var(--ya-orta); white-space: nowrap; text-decoration: none; } .sekme:hover { color: var(--r-metin); } a.sekme { text-decoration: none; } .sekme[aria-selected="true"], .sekme[aria-current="page"] { color: var(--r-metin); font-weight: var(--ya-yari); } .sekme[aria-selected="true"]::after, .sekme[aria-current="page"]::after { content: ""; position: absolute; left: var(--a-3); right: var(--a-3); bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--r-altin); } .sekme-sayi:empty { display: none; } .sekme-sayi { min-width: 20px; padding: 0 var(--a-1); border-radius: var(--yc-tam); background: var(--r-tas-2); color: var(--r-metin-2); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-yari); text-align: center; } .sekme-panel { padding-top: var(--a-5); } .sekme-panel:focus-visible { outline-offset: 4px; } /* ---------- 10. Durum kutuları: yükleniyor · boş · süzgeçle boş · hata ---------- */ .durum-kutu { display: flex; flex-direction: column; align-items: center; gap: var(--a-3); padding: var(--a-12) var(--a-6); text-align: center; } .durum-kutu > .bi { font-size: var(--yb-32); line-height: 1; color: var(--r-metin-3); } .durum-kutu--hata > .bi { color: var(--r-kirmizi); } .durum-baslik { font-size: var(--yb-16); line-height: var(--ys-16); font-weight: var(--ya-yari); } .durum-metin { max-width: 52ch; color: var(--r-metin-2); } .durum-eylem { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--a-2); } .iskelet-liste { display: flex; flex-direction: column; } .iskelet-satir { display: grid; grid-template-columns: 1.2fr 2fr 1.4fr 1fr; gap: var(--a-6); align-items: center; height: var(--satir-y); padding: 0 var(--a-4); border-bottom: 1px solid var(--r-cizgi); } .iskelet { display: block; height: 12px; border-radius: var(--yc-tam); background: linear-gradient(90deg, var(--r-tas-2) 25%, var(--r-tas) 50%, var(--r-tas-2) 75%); background-size: 200% 100%; animation: iskelet 1.4s ease-in-out infinite; } .tazeleme { display: flex; align-items: center; gap: var(--a-3); padding: var(--a-2) var(--a-4); border-bottom: 1px solid var(--r-altin-cizgi); background: var(--r-altin-sis); color: var(--r-metin); } .tazeleme-metin { flex: 1 1 auto; } /* ---------- 11. Toplu işlem çubuğu ---------- */ .toplu-cubuk { position: sticky; bottom: var(--a-4); z-index: 5; display: flex; align-items: center; gap: var(--a-3); margin: var(--a-3) auto 0; width: max-content; max-width: 100%; padding: var(--a-2) var(--a-2) var(--a-2) var(--a-4); border-radius: var(--yc-3); background: var(--r-murekkep); color: var(--r-beyaz); box-shadow: 0 8px 24px var(--r-golge-guclu); } .toplu-sayi { font-weight: var(--ya-yari); white-space: nowrap; } .toplu-cubuk .btn-hayalet { --bs-btn-color: var(--r-menu-metin); --bs-btn-hover-color: var(--r-beyaz); --bs-btn-hover-bg: var(--r-murekkep-3); } /* ---------- 12. Sayfalama ---------- */ .sayfalama { display: flex; align-items: center; justify-content: space-between; gap: var(--a-3); flex-wrap: wrap; padding: var(--a-3) var(--a-4); border-top: 1px solid var(--r-cizgi); } .sayfalama-metin { color: var(--r-metin-2); } .sayfalama-dugmeler { display: flex; gap: var(--a-2); } /* ---------- Kart yapısı, sayı kartı, not şeridi, form sayfası (Faz 1 ortak) ---------- */ .kart-ust { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-2) var(--a-3); min-height: 56px; padding: var(--a-3) var(--a-4); border-bottom: 1px solid var(--r-cizgi); } .kart-baslik { flex: 1 1 auto; min-width: 0; font-size: var(--yb-16); line-height: var(--ys-16); font-weight: var(--ya-yari); } .kart-ust-alt { flex: 1 1 100%; color: var(--r-metin-3); font-size: var(--yb-13); line-height: var(--ys-13); } .kart-govde { position: relative; display: flex; flex-direction: column; gap: var(--a-4); padding: var(--a-4); } .kart-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--a-4); } .ikili-izgara { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--a-5); align-items: start; } .ikili-izgara--genis { grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 400px); } /* 1280'de sol tabloya ~690 px (G-A Faz 3) */ a.sayi-seridi-oge { color: var(--r-metin); text-decoration: none; } .sayi-seridi-oge[data-durum] { border-top: 3px solid var(--durum-isaret); } a.sayi-seridi-oge:hover { border-color: var(--r-cizgi-guclu); background: var(--r-yuzey); } .sayi-seridi-oge[data-ton="sinyal"] { border-color: var(--r-kirmizi); background: var(--r-kirmizi-sis); } .sayi-seridi-oge[data-ton="sinyal"] .sayi-seridi-deger, .sayi-seridi-oge[data-ton="sinyal"] .sayi-seridi-ad { color: var(--r-kirmizi-yazi); } .sayi-seridi-oge[data-ton="uyari"] { border-color: var(--r-altin-cizgi); background: var(--r-amber-sis); } .sayi-seridi-oge[data-ton="uyari"] .sayi-seridi-deger, .sayi-seridi-oge[data-ton="uyari"] .sayi-seridi-ad { color: var(--r-amber-yazi); } .sayi-seridi-oge[data-ton="iyi"] .sayi-seridi-deger { color: var(--r-yesil-yazi); } .not-seridi { display: flex; align-items: flex-start; gap: var(--a-3); padding: var(--a-3) var(--a-4); border-radius: var(--yc-2); background: var(--r-tas-2); color: var(--r-metin); overflow-wrap: anywhere; } .not-seridi > .bi { flex: 0 0 auto; font-size: var(--yb-16); line-height: var(--ys-14); color: var(--r-metin-3); } .not-seridi-govde { display: flex; flex-direction: column; gap: var(--a-1); flex: 1 1 auto; min-width: 0; } .not-seridi[data-ton="uyari"] { background: var(--r-amber-sis); color: var(--r-amber-yazi); } .not-seridi[data-ton="uyari"] > .bi { color: var(--r-amber); } .not-seridi[data-ton="sinyal"] { background: var(--r-kirmizi-sis); color: var(--r-kirmizi-yazi); } .not-seridi[data-ton="sinyal"] > .bi { color: var(--r-kirmizi); } .not-seridi[data-ton="iyi"] { background: var(--r-yesil-sis); color: var(--r-yesil-yazi); } .not-seridi[data-ton="iyi"] > .bi { color: var(--r-yesil); } .form-sayfa { max-width: 960px; } .form-sayfa > .kart-govde { gap: var(--a-6); } .form-alt-cubuk { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-2); padding: var(--a-3) var(--a-4); border-top: 1px solid var(--r-cizgi); border-radius: 0 0 var(--yc-3) var(--yc-3); background: var(--r-tas-ust); } .bolum-cizgi { border-top: 1px solid var(--r-cizgi); padding-top: var(--a-4); } /* ---------- Madde listesi, ayarlar yerleşimi, seçim kartları (G-A ORTAK İSTEK) ---------- */ .madde-listesi { display: flex; flex-direction: column; gap: var(--a-2); margin: 0; padding-left: var(--a-5); color: var(--r-metin); } ul.madde-listesi { list-style: disc; } ol.madde-listesi { list-style: decimal; } .madde-listesi > li { padding-left: var(--a-1); overflow-wrap: anywhere; } .madde-listesi > li::marker { color: var(--r-metin-3); } .yan-izgara { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--a-5); align-items: start; } .liste-secim { position: relative; display: flex; flex-direction: column; gap: var(--a-1); padding: var(--a-2); border: 1px solid var(--r-cizgi); border-radius: var(--yc-3); background: var(--r-yuzey); } .liste-secim-grup-baslik { padding: var(--a-2) var(--a-3) var(--a-1); color: var(--r-metin-2); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-yari); letter-spacing: .02em; } .liste-secim-grup-baslik:not(:first-child) { margin-top: var(--a-2); } a.liste-secim-oge { position: relative; display: flex; align-items: center; gap: var(--a-3); min-height: var(--denetim-y); padding: 0 var(--a-3); border-radius: var(--yc-2); color: var(--r-metin); text-decoration: none; } a.liste-secim-oge:hover { background: var(--r-tas-ust); color: var(--r-metin); } a.liste-secim-oge[aria-current="true"], a.liste-secim-oge[aria-current="page"] { background: var(--r-altin-sis); font-weight: var(--ya-yari); box-shadow: inset 3px 0 0 var(--r-altin); } .liste-secim-ad { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .liste-secim-sayi { flex: 0 0 auto; color: var(--r-metin-3); } a.liste-secim-oge[aria-current] .liste-secim-sayi { color: var(--r-metin-2); } .secim-kartlari { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--a-3); } .cekmece .secim-kartlari { grid-template-columns: minmax(0, 1fr); } label.secim-kart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--a-1) var(--a-3); align-items: start; padding: var(--a-3) var(--a-4); border: 1px solid var(--r-cizgi-guclu); border-radius: var(--yc-2); background: var(--r-yuzey); cursor: pointer; } label.secim-kart:hover { border-color: var(--r-altin-koyu); } label.secim-kart:has(:checked) { border-color: var(--r-altin); background: var(--r-altin-sis); box-shadow: inset 0 0 0 1px var(--r-altin); } label.secim-kart:has(:focus-visible) { outline: 2px solid var(--r-altin-koyu); outline-offset: 2px; } label.secim-kart > .form-check-input { grid-row: 1 / span 2; margin-top: 2px; } .secim-kart-ad { font-weight: var(--ya-yari); } .secim-kart-not { grid-column: 2; color: var(--r-metin-3); font-size: var(--yb-13); line-height: var(--ys-13); } .alan.form-check { flex-wrap: wrap; row-gap: 0; } .alan.form-check > .alan-yardim { flex: 1 1 100%; padding-left: 26px; } .alan-kutu--goster > .form-control { padding-right: var(--a-12); } .alan-goster { position: absolute; right: 2px; top: 2px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--yc-1); background: transparent; color: var(--r-metin-3); } .alan-goster:hover { background: var(--r-tas); color: var(--r-metin); } .alan-goster .bi { font-size: var(--yb-16); line-height: 1; } /* ---------- Tablo sütun genişlikleri (G-A ekranları) ---------- */ .tablo col.s-eylem { width: 56px; } /* Durum çipi kırpılmaz (koordinatör kuralı): en uzun çip "Malzeme Bekleniyor" 147 px + dolgu 24 px */ .tablo col.s-durum { width: 176px; } .pn-tablo col.s-siparis { width: 88px; } .pn-tablo col.s-m2 { width: 88px; } /* "15,36" + "4 poz" 1280'de sığar (G-A Faz 3) */ .pn-tablo col.s-ilerleme { width: 96px; } .pn-tablo col.s-durum { width: 160px; } .pn-tablo col.s-kalan { width: 128px; } .kl-tablo col.s-roller { width: 30%; } .kl-tablo col.s-durum { width: 22%; } .kl-tablo col.s-acilis { width: 120px; } .dn-tablo col.s-zaman { width: 110px; } .dn-tablo col.s-kayit { width: 22%; } .dn-tablo col.s-islem { width: 120px; } .dn-tablo col.s-kullanici { width: 16%; } .rp-cubuk col { width: 110px; } .rp-cubuk col.s-ad { width: 28%; } .rp-cubuk col.s-cubuk { width: auto; } .rp-termin col.s-siparis { width: 96px; } .rp-termin col.s-durum { width: 176px; } .rp-termin col.s-uretildi, .rp-termin col.s-teslim { width: 16%; } .rp-termin col.s-m2 { width: 100px; } .rp-hareket col.s-zaman { width: 140px; } .rp-hareket col.s-parca, .rp-hareket col.s-kaydeden { width: 16%; } .rp-hareket col.s-tur { width: 14%; } .rp-hareket col.s-not { width: 18%; } .rp-harita col.s-ad { width: 22%; } .tn-deger col.s-dara { width: 120px; } .tn-yogunluk col.s-malzeme { width: 30%; } .tn-yogunluk col.s-kgm3 { width: 160px; } .tn-ceviri col.s-tr { width: 28%; } /* ---------- G-C (depo): pafta çerçevesi, kat planı bağlantısı, tablo genişlikleri ---------- */ .pafta { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: var(--a-4); border: 1px solid var(--r-cizgi); border-radius: var(--yc-2); background: var(--r-tas-ust); } .pafta--bos { border-style: dashed; border-color: var(--r-cizgi-guclu); color: var(--r-metin-3); } a.cubuk-ad { color: var(--r-metin); font-weight: var(--ya-orta); text-decoration: none; } a.cubuk-ad:hover { color: var(--r-altin-koyu); text-decoration: underline; } .dp-stok col.s-sec, .dp-stok col.s-eylem { width: 48px; } .dp-stok col.s-plaka { width: 24%; } .dp-stok col.s-cins { width: 16%; } .dp-stok col.s-olcu { width: 15%; } .dp-stok col.s-m2 { width: 9%; } .dp-stok col.s-yer { width: 13%; } .dp-grup col.s-urun { width: 26%; } .dp-grup col.s-cins { width: 16%; } .dp-grup col.s-adet { width: 9%; } .dp-grup col.s-m2 { width: 120px; } /* ana m² + alt kg (G-C Faz 3, İ-090) */ .dp-grup col.s-konum { width: 14%; } .dp-okut col.s-siluet, .dp-esles col.s-siluet { width: 92px; } .dp-okut col.s-plaka, .dp-esles col.s-plaka { width: 22%; } .dp-okut col.s-olcu, .dp-esles col.s-olcu { width: 17%; } .dp-okut col.s-m2, .dp-esles col.s-m2 { width: 10%; } .dp-okut col.s-yer, .dp-esles col.s-yer { width: 13%; } .dp-okut col.s-eylem { width: 56px; } .dp-esles col.s-artan { width: 10%; } .dp-fire col.s-plaka { width: 16%; } .dp-fire col.s-olcu { width: 17%; } .dp-fire col.s-m2 { width: 8%; } .dp-fire col.s-siparis { width: 15%; } .dp-fire col.s-kaynak { width: 13%; } .dp-fire col.s-yer { width: 11%; } .dp-hareket col.s-zaman { width: 120px; } .dp-hareket col.s-islem { width: 14%; } .dp-hareket col.s-plakalar { width: 18%; } .dp-hareket col.s-m2 { width: 9%; } .dp-hareket col.s-musteri { width: 16%; } .dp-hareket col.s-kullanici { width: 12%; } .dp-urun col.s-ad { width: 32%; } .dp-urun col.s-kalinlik { width: 12%; } .dp-urun col.s-olcu { width: 20%; } .dp-tedarikci col.s-kod { width: 22%; } .agirlik-tablo th[scope="row"] { position: static; background: var(--r-tas-ust); color: var(--r-metin); font-size: var(--yb-14); line-height: var(--ys-14); text-align: left; } /* ---------- Giriş (oturumsuz sayfa, kabuksuz) ---------- */ .giris-sayfa { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: var(--a-6) var(--a-4); background: var(--r-murekkep); } .giris-kart { display: flex; flex-direction: column; gap: var(--a-5); width: min(400px, 100%); padding: var(--a-8); border-radius: var(--yc-3); background: var(--r-yuzey); box-shadow: 0 16px 48px var(--r-golge-guclu); } .giris-marka { display: flex; justify-content: center; color: var(--r-metin); } .giris-marka .logo { width: 160px; height: auto; } .giris-alt { color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); text-align: center; } /* ---------- Pano (kolonlu akış: Üretim Akışı) — ≥1280'de yatay kaymaz; katlı kolon 44 px şerit ---------- */ .pano { display: flex; gap: var(--a-2); align-items: stretch; min-width: 0; } .pano-kolon { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; border: 1px solid var(--r-cizgi); border-radius: var(--yc-3); background: var(--r-tas-ust); } .pano-kolon[data-katli] { flex: 0 0 44px; } .pano-kolon[data-uzerinde] { border-color: var(--r-altin); box-shadow: inset 0 0 0 1px var(--r-altin); } .pano-kolon[data-uzerinde] .pano-kolon-govde { background: var(--r-altin-sis); } .pano-kolon-ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--a-2); width: 100%; padding: var(--a-2) var(--a-3); border: 0; border-bottom: 1px solid var(--r-cizgi); border-top: 3px solid var(--durum-isaret, var(--r-cizgi)); border-radius: var(--yc-3) var(--yc-3) 0 0; background: transparent; color: var(--r-metin); text-align: left; } button.pano-kolon-ust:hover { background: var(--r-yuzey); } .pano-kolon-ad { flex: 1 1 100%; min-width: 0; overflow-wrap: break-word; font-weight: var(--ya-yari); } .pano-kolon-sayi { color: var(--r-metin); font-weight: var(--ya-kalin); } .pano-kolon:not([data-katli]) .pano-kolon-ad { min-height: calc(2 * var(--ys-14)); } .pano-kolon-m2 { color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); } .pano-kolon[data-katli] .pano-kolon-ust { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: var(--a-2); height: 100%; padding: var(--a-3) 0; border-bottom: 0; border-radius: var(--yc-3); } .pano-kolon[data-katli] .pano-kolon-ad { flex: 0 1 auto; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 240px; } .pano-kolon[data-katli] .pano-kolon-m2, .pano-kolon[data-katli] .pano-kolon-govde, .pano-kolon[data-katli] .pano-kesildi { display: none; } .pano-kolon-govde { display: flex; flex-direction: column; gap: var(--a-1); min-height: 96px; max-height: calc(100dvh - 260px); overflow-y: auto; padding: var(--a-2); } .pano-kolon-bos { margin: auto; color: var(--r-metin-3); } .pano-kesildi { padding: var(--a-2) var(--a-3); border-top: 1px solid var(--r-cizgi); color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); } .pano-kart { position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; padding: 6px var(--a-2); border: 1px solid var(--r-cizgi); border-radius: var(--yc-2); background: var(--r-yuzey); color: var(--r-metin); text-align: left; cursor: pointer; } .pano-kart:hover { border-color: var(--r-cizgi-guclu); } .pano-kart[data-ton="sinyal"] { box-shadow: inset 3px 0 0 var(--r-kirmizi); } .pano-kart[data-ton="uyari"], .pano-kart[data-engel] { box-shadow: inset 3px 0 0 var(--r-amber); } .pano-kart.sortable-ghost { opacity: .4; } .pano-kart.sortable-chosen { box-shadow: 0 8px 24px var(--r-golge-guclu); } .pano-kart-ust { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--a-1); min-width: 0; } .pano-kart-ust > .oncelik-isaret { margin-right: 0; } /* Parça no panonun asıl bilgisi: kırpılmaz (13 px'te "10-06-P002" ≈ 78 px, en dar kolona sığar). */ .pano-kart-ust > .kod-guclu { flex: 0 0 auto; font-size: var(--yb-13); line-height: var(--ys-13); white-space: nowrap; } .pano-kart-ust > .kayit-satir { flex: 1 1 auto; min-width: 0; } .pano-kart-ust > .siluet { flex: 0 1 28px; width: 28px; min-width: 16px; height: auto; margin-left: auto; } .pano-kilit { flex: none; color: var(--r-amber); font-size: var(--yb-12); } .pano-kart-is { overflow-wrap: anywhere; color: var(--r-metin-2); font-size: var(--yb-13); line-height: var(--ys-13); } .pano-kart-alt { display: flex; align-items: center; gap: var(--a-2); min-width: 0; font-size: var(--yb-12); line-height: var(--ys-12); } .pano-kart-alt > .kod { flex: none; } .pano-kart-alt > .ilerleme { flex: 1 1 auto; min-width: 24px; } .pano-kart-makine { display: block; overflow-wrap: break-word; color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); } .pano-kart-olcu { display: flex; align-items: flex-start; gap: var(--a-2); min-width: 0; } .pano-kart-olcu > .kayit-satir { flex: 1 1 auto; min-width: 0; } .pano-kart-ileti { position: absolute; left: var(--a-2); right: var(--a-2); top: calc(-1 * var(--a-2)); z-index: 3; transform: translateY(-100%); padding: var(--a-1) var(--a-2); border-radius: var(--yc-1); background: var(--r-murekkep); color: var(--r-beyaz); font-size: var(--yb-12); line-height: var(--ys-12); } /* ---------- G-B: kalite, paket & sevkiyat, teslim, QR etiket, çizim ---------- */ .hucre-parca { display: inline-flex; align-items: center; gap: var(--a-2); max-width: 100%; min-width: 0; } .hucre-parca > .siluet { flex: none; } .hucre-parca-metin { display: flex; flex-direction: column; min-width: 0; } .hucre-eylem > .hucre-alt { flex: 1 1 100%; text-align: right; } .ka-tablo col.s-sec { width: 44px; } .ep-tablo col.s-sec { width: 40px; } .ka-tablo col.s-parca { width: 17%; } .ka-tablo col.s-is { width: 16%; } .ka-tablo col.s-olcu { width: 11%; } .ka-tablo col.s-siparis { width: 14%; } .ka-tablo col.s-kalite { width: 176px; } .ka-tablo col.s-uretildi { width: 88px; } .ka-tablo col.s-eylem { width: 272px; } .tl-tablo col.s-siparis { width: 15%; } .tl-tablo col.s-sandik { width: 136px; } .tl-tablo col.s-sevk { width: 13%; } .tl-tablo col.s-m2, .tl-tablo col.s-bekleme { width: 9%; } .tl-tablo col.s-eylem { width: 176px; } .et-tablo col.s-parca { width: 26%; } .et-tablo col.s-olcu { width: 28%; } /* "4×400,5/1350" 1280'de sığar (zor veri ölçümü 04.11) */ .et-tablo col.s-kg { width: 15%; } .ep-tablo col.s-parca { width: 30%; } .ep-tablo col.s-olcu { width: 24%; } .ep-tablo col.s-adet { width: 56px; } .ep-tablo col.s-eylem { width: 104px; } .uc-sutun { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-4); align-items: start; } .grup-baslik { display: flex; align-items: center; gap: var(--a-3); min-height: 44px; padding: var(--a-2) var(--a-4); border-bottom: 1px solid var(--r-cizgi); background: var(--r-tas-2); } .grup-baslik-ad { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--r-metin-2); } .grup-baslik > .kod-guclu { flex: none; } .grup-baslik-sayi { flex: none; color: var(--r-metin-2); font-weight: var(--ya-yari); white-space: nowrap; } .kayit { display: flex; flex-direction: column; gap: var(--a-1); padding: var(--a-3) var(--a-4); border-bottom: 1px solid var(--r-cizgi); } .kayit:last-child { border-bottom: 0; } .kayit[data-soluk] { color: var(--r-metin-3); } .kayit[data-uzerinde], .klasor-liste-oge[data-uzerinde] { box-shadow: inset 0 0 0 2px var(--r-altin); background: var(--r-altin-sis); } .kayit-ust { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-2) var(--a-3); min-width: 0; } .kayit-ust > .cip:last-child { margin-left: auto; } .kayit-satir { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a-1) var(--a-3); color: var(--r-metin-3); font-size: var(--yb-13); line-height: var(--ys-13); } .kayit-alt { display: flex; align-items: center; gap: var(--a-2); margin-top: var(--a-1); } .kayit-alt > .dropdown { margin-left: auto; } .klasor-liste-sag { flex: none; color: var(--r-metin-2); font-weight: var(--ya-yari); white-space: nowrap; } .etiket-yerlesim { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-5); align-items: start; } .etiket-onizleme { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--a-2); margin: 0; padding: var(--a-4); border: 1px solid var(--r-cizgi); border-radius: var(--yc-2); background: var(--r-tas-ust); } .etiket-onizleme img { display: block; width: 100%; height: auto; max-height: 70dvh; object-fit: contain; } .etiket-onizleme[data-boyut="sandik"] { aspect-ratio: 100 / 150; } .etiket-onizleme[data-boyut="parca"] { aspect-ratio: 100 / 70; } .etiket-onizleme > .iskelet { width: 100%; height: 100%; border-radius: var(--yc-1); } /* Görüntüleyici: sahne kalan yüksekliği doldurur, çizim iki eksende de bütün sığar; çok sayfalı PDF sahnenin içinde kayar. */ #cizimPenceresi .modal-body { display: flex; flex-direction: column; min-height: 0; } .cizim-sahne { display: grid; place-items: center; flex: 1 1 auto; min-height: 320px; overflow: auto; padding: var(--a-4); border-radius: var(--yc-2); background: var(--r-murekkep); } .cizim-sahne > .yigin { width: 100%; } .cizim-sahne figure { display: flex; flex-direction: column; align-items: center; gap: var(--a-2); } .cizim-sahne figcaption { color: var(--r-menu-soluk); } .cizim-sahne img, .cizim-sahne canvas { display: block; width: auto; max-width: 100%; max-height: calc(100dvh - 248px); height: auto; object-fit: contain; background: var(--r-yuzey); } @media (max-width: 767.98px) { #cizimPenceresi .modal-body { padding: var(--a-3); } .cizim-sahne { padding: var(--a-2); } } .cizim-gezinti { display: flex; align-items: center; justify-content: center; gap: var(--a-2); } .cizim-gezinti-sayi { min-width: 64px; text-align: center; font-weight: var(--ya-yari); } /* ---------- Yatay çubuk listesi (makine yükü, hall/sıra doluluğu) ---------- */ .cubuk-liste { display: flex; flex-direction: column; gap: var(--a-3); } .cubuk-oge { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a-1) var(--a-3); align-items: baseline; } .cubuk-ad { min-width: 0; overflow-wrap: anywhere; } .cubuk-deger { font-weight: var(--ya-yari); white-space: nowrap; } .cubuk-oge > .ilerleme { grid-column: 1 / -1; } /* ---------- Küçük veri görselleri (js/ortak/grafik.js): aşama çubuğu, ısı ızgarası, kıvılcım ---------- */ .asama-cubugu { display: flex; height: 12px; gap: 2px; border-radius: var(--yc-tam); overflow: hidden; background: var(--r-tas-2); } .asama-dilim { flex: 0 0 auto; min-width: 4px; background: var(--durum-isaret); } .asama-lejant { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-4); margin-top: var(--a-3); color: var(--r-metin-2); } .asama-lejant > li { display: inline-flex; align-items: center; gap: var(--a-2); white-space: nowrap; } .asama-lejant > li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--durum-isaret); } .asama-lejant b { color: var(--r-metin); } .durum-haritasi { display: flex; flex-direction: column; gap: var(--a-3); overflow-x: auto; } .harita-izgara { display: grid; grid-template-columns: minmax(120px, 180px) repeat(var(--sutun-sayisi, 1), minmax(72px, 1fr)); gap: 3px; align-items: center; } .harita-baslik { min-width: 0; overflow-wrap: anywhere; color: var(--r-metin-2); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-yari); text-align: center; } .harita-satir-adi { align-self: stretch; display: flex; align-items: center; min-width: 0; padding-right: var(--a-3); overflow-wrap: anywhere; color: var(--r-metin-2); font-size: var(--yb-13); line-height: var(--ys-13); white-space: nowrap; } .harita-hucre { display: grid; place-items: center; min-width: 20px; height: 28px; border-radius: var(--yc-1); background: var(--r-harita-0); color: var(--r-metin); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-yari); } .harita-hucre[data-seviye="1"] { background: var(--r-harita-1); } .harita-hucre[data-seviye="2"] { background: var(--r-harita-2); } .harita-hucre[data-seviye="3"] { background: var(--r-harita-3); } .harita-hucre[data-seviye="4"] { background: var(--r-harita-4); color: var(--r-murekkep); } .harita-lejant { display: flex; align-items: center; gap: var(--a-1); color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); } .harita-lejant .harita-hucre { width: 20px; height: 12px; } .kivilcim { display: block; width: 100%; height: 32px; overflow: visible; } .kivilcim .alan { fill: var(--r-altin-sis); stroke: none; } .kivilcim .cizgi { fill: none; stroke: var(--r-altin-koyu); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .kivilcim .son { fill: var(--r-altin-koyu); } /* Okutma alanı (açık zemin: stok çıkışı, sevkiyat). Terminaldeki karşılığı .tm-okut */ /* Denetim ölçeğinde (40 px / 14 px; dokunmatikte 44): sayfadaki diğer alanlarla tek ölçek (Ö7). Ayırt edici olan altın kenar ve kalın yazı. */ .okut-girdi { width: 100%; height: var(--denetim-y); padding: 0 var(--a-3); border: 2px solid var(--r-altin); border-radius: var(--yc-2); background: var(--r-yuzey); color: var(--r-metin); font-size: var(--yb-14); line-height: var(--ys-14); font-weight: var(--ya-yari); letter-spacing: .02em; } .okut-girdi:focus { outline: 0; border-color: var(--r-altin-koyu); box-shadow: 0 0 0 4px var(--r-odak-altin); } .okut-girdi::placeholder { color: var(--r-metin-3); font-weight: var(--ya-normal); } /* Okutma satırı (G-C Faz 3): girdi + görünür "Ekle" düğmesi; 390'da da yan yana, düğme girdiyle aynı boyda. */ .okut-satir { display: flex; align-items: stretch; gap: var(--a-2); min-width: 0; } .okut-satir > .okut-girdi { flex: 1 1 auto; min-width: 0; width: auto; } .okut-satir > .btn { flex: none; height: var(--denetim-y); } /* ---------- Bootstrap pencereleri, açılır menü, bildirim (kabuk hizmetleri) ---------- */ .dropdown-menu { --bs-dropdown-font-size: var(--yb-14); --bs-dropdown-color: var(--r-metin); --bs-dropdown-border-color: var(--r-cizgi); --bs-dropdown-border-radius: var(--yc-2); --bs-dropdown-link-hover-bg: var(--r-tas); --bs-dropdown-link-active-bg: var(--r-altin-sis); --bs-dropdown-link-active-color: var(--r-metin); --bs-dropdown-item-padding-y: var(--a-2); --bs-dropdown-item-padding-x: var(--a-4); --bs-dropdown-header-color: var(--r-metin-3); --bs-dropdown-header-padding-y: var(--a-1); --bs-dropdown-padding-y: var(--a-1); box-shadow: 0 8px 24px var(--r-golge-guclu); min-width: 200px; /* Popper fixed (tam yükseklik düzeni): uzun menü görünüm alanından taşmasın, kendi içinde kaysın (İ-032 durum menüsü). */ max-height: calc(100dvh - 2 * var(--a-4)); overflow-y: auto; overscroll-behavior: contain; } .dropdown-item { display: flex; align-items: center; gap: var(--a-2); } .dropdown-item .bi { width: 16px; color: var(--r-metin-3); } .dropdown-item.tehlike, .dropdown-item.text-danger, .tehlike-yazi { color: var(--r-kirmizi-yazi); } .dropdown-item[aria-checked="true"] { font-weight: var(--ya-yari); } .dropdown-item[aria-checked="true"]::after { content: ""; flex: 0 0 auto; width: 6px; height: 11px; margin-left: auto; border: solid var(--r-altin-koyu); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); } .dropdown-header { font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-yari); } /* Pasif menü seçeneği + sebep (İ-032): soluk ama okunur; sebep sarar, kırpılmaz. */ .dropdown-item.menu-pasif { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 320px; white-space: normal; opacity: 1; color: var(--r-metin-3); } .menu-pasif-ust { display: inline-flex; align-items: center; gap: var(--a-2); font-weight: var(--ya-yari); } .menu-pasif-ust > .bi { color: var(--r-kirmizi); } .menu-pasif-sebep { font-size: var(--yb-12); line-height: var(--ys-12); } .dropdown-item-form { margin: 0; } .modal { --bs-modal-border-radius: var(--yc-3); --bs-modal-border-color: var(--r-cizgi); --bs-modal-header-border-color: var(--r-cizgi); --bs-modal-footer-border-color: var(--r-cizgi); --bs-modal-padding: var(--a-6); --bs-modal-header-padding: var(--a-4) var(--a-6); } .modal-backdrop { --bs-backdrop-bg: var(--r-murekkep); --bs-backdrop-opacity: .4; } .modal-footer { gap: var(--a-2); background: var(--r-tas-ust); } .modal-footer > * { margin: 0; } .modal-onay .modal-body { display: flex; align-items: flex-start; gap: var(--a-3); } .onay-ikon { font-size: var(--yb-24); line-height: 1; color: var(--r-altin-koyu); } .modal-onay.tehlike .onay-ikon { color: var(--r-kirmizi); } .onay-metin { white-space: pre-line; } .alert { --bs-alert-padding-x: var(--a-4); --bs-alert-padding-y: var(--a-3); --bs-alert-border-radius: var(--yc-2); } .alert-warning { --bs-alert-color: var(--r-amber-yazi); --bs-alert-bg: var(--r-amber-sis); --bs-alert-border-color: var(--r-altin-cizgi); } .list-group { --bs-list-group-border-color: var(--r-cizgi); --bs-list-group-item-padding-y: var(--a-3); } .bildirim-alani { position: fixed; right: var(--a-4); bottom: var(--a-4); z-index: 1090; display: flex; flex-direction: column; gap: var(--a-2); width: min(400px, calc(100vw - 32px)); pointer-events: none; } .bildirim { display: flex; align-items: flex-start; gap: var(--a-3); padding: var(--a-3) var(--a-4); border-radius: var(--yc-3); background: var(--r-murekkep); color: var(--r-beyaz); box-shadow: 0 8px 24px var(--r-golge-guclu); pointer-events: auto; animation: bildirim-gir .18s ease-out; } .bildirim > .bi { font-size: var(--yb-16); line-height: var(--ys-14); } .bildirim--basari > .bi { color: var(--r-yesil-sis); } .bildirim--hata { background: var(--r-kirmizi-yazi); } .bildirim--uyari > .bi { color: var(--r-altin-acik); } .bildirim-metin { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .bildirim-eylem { display: flex; gap: var(--a-2); margin-top: var(--a-2); } .bildirim-kapat { padding: 0; border: 0; background: transparent; color: var(--r-menu-soluk); font-size: var(--yb-16); line-height: 1; } .bildirim.cikiyor { opacity: 0; transition: opacity .2s; } /* Komut paleti (üst çubuktaki arama) */ .komut-modal .modal-dialog { max-width: 640px; margin-top: 10vh; } .komut-giris { display: flex; align-items: center; gap: var(--a-3); height: 56px; padding: 0 var(--a-4); border-bottom: 1px solid var(--r-cizgi); color: var(--r-metin-3); } .komut-giris input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--r-metin); font-size: var(--yb-16); } .komut-giris:focus-within { box-shadow: inset 0 -2px 0 var(--r-altin-koyu); } /* Odak girdinin kendisinde de görünür (Ö8 odak-gorunmez): kap çizgisine ek olarak girdinin altında altın çizgi. */ .komut-giris input:focus-visible, .komut-giris input:focus { box-shadow: inset 0 -2px 0 var(--r-altin-koyu); } .komut-sonuclar { max-height: 52vh; overflow-y: auto; padding: var(--a-2); } .komut-grup + .komut-grup { margin-top: var(--a-2); } .komut-grup-baslik { padding: var(--a-1) var(--a-3); color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-yari); } .komut-oge { display: flex; align-items: center; gap: var(--a-3); width: 100%; min-height: 48px; padding: var(--a-2) var(--a-3); border: 0; border-radius: var(--yc-2); background: transparent; color: var(--r-metin); text-align: left; text-decoration: none; } .komut-oge:hover, .komut-oge[aria-selected="true"] { background: var(--r-altin-sis); color: var(--r-metin); } .komut-oge .simge { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: var(--yc-2); background: var(--r-tas-2); color: var(--r-metin-2); } .komut-oge .govde { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .komut-oge .baslik { overflow-wrap: anywhere; font-weight: var(--ya-yari); } .komut-oge .alt { overflow-wrap: anywhere; color: var(--r-metin-3); font-size: var(--yb-13); line-height: var(--ys-13); } .komut-oge .sag { flex: 0 0 auto; color: var(--r-metin-3); } .komut-bos { padding: var(--a-6); color: var(--r-metin-3); text-align: center; } .komut-alt { display: flex; gap: var(--a-4); padding: var(--a-2) var(--a-4); border-top: 1px solid var(--r-cizgi); color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); } /* Parça silüeti (C# ParcaSiluet + siluet.js aynı dizeyi üretir). Kalınlık rozeti gizli: kalınlık birimiyle ayrı yazılır. */ .siluet { display: block; overflow: visible; color: var(--r-metin); --tas: var(--r-tas-2); --siluet-cizgi: var(--r-metin-2); } .siluet .govde { fill: var(--tas); stroke: var(--siluet-cizgi); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; } .siluet.malzeme--mermer { --tas: var(--r-altin-sis); } .siluet.malzeme--granit { --tas: var(--r-tas-2); } .siluet.malzeme--kuvars { --tas: var(--op-islak-sis); } .siluet.malzeme--porselen { --tas: var(--op-onay-sis); } .siluet.malzeme--diger { --tas: var(--r-tas); } .siluet .bos { fill: none; stroke: var(--r-cizgi-guclu); stroke-width: 1; stroke-dasharray: 3 3; } .siluet .kenar-ic { fill: none; stroke: var(--siluet-cizgi); stroke-width: .75; vector-effect: non-scaling-stroke; } .siluet .kenar-on { stroke: var(--r-altin-koyu); stroke-width: 3; vector-effect: non-scaling-stroke; } .siluet.kenar--yuvarlak .govde { stroke-width: 2.5; } .siluet.kenar--profil .kenar-ic { stroke-dasharray: 6 2 1 2; } .siluet .olcu-cizgi { stroke: var(--r-metin-3); stroke-width: 1; vector-effect: non-scaling-stroke; } .siluet .olcu-ok { fill: var(--r-metin-3); } .siluet .olcu-metin { font-family: var(--yazi-aile); font-weight: var(--ya-yari); fill: var(--r-metin); font-variant-numeric: tabular-nums; } .siluet .kalinlik { display: none; } .siluet .kesim rect, .siluet rect.kesim { fill: var(--r-yuzey); stroke: var(--siluet-cizgi); stroke-width: 1; vector-effect: non-scaling-stroke; } .siluet .kesim text { font-family: var(--yazi-aile); font-weight: var(--ya-yari); fill: var(--r-metin); } .siluet--kucuk { width: 72px; height: 36px; } .siluet--kucuk text { font-size: var(--yb-12); } .siluet--orta { width: 100%; max-width: 200px; height: auto; } .siluet--orta text { font-size: var(--yb-12); } .siluet--buyuk { width: 100%; max-width: 520px; height: auto; } .siluet--buyuk text { font-size: var(--yb-16); } } /* ================================================================================================ EKRAN */ @layer ekran { /* ---------- İş Emirleri ---------- */ .ie-tablo col.s-siparis { width: 12%; } .ie-tablo col.s-tas { width: 17%; } .ie-tablo col.s-ilerleme { width: 148px; } /* "19/100.099 adet" ve 7 basamaklı m² kırpılmaz (zor veri ölçümü 04.11) */ .ie-tablo col.s-m2 { width: 120px; } .ie-tablo col.s-teslim { width: 11%; } .oncelik-isaret { display: inline-block; width: 8px; height: 8px; margin-right: var(--a-1); border-radius: 50%; vertical-align: middle; } .oncelik-isaret[data-oncelik="Acil"] { background: var(--r-amber); } .oncelik-isaret[data-oncelik="Çok Acil"] { background: var(--r-kirmizi); } .oncelik-isaret:not([data-oncelik="Acil"]):not([data-oncelik="Çok Acil"]) { display: none; } /* ---------- Sipariş iş klasörü ---------- */ .klasor-kimlik { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-2) var(--a-3); margin: calc(-1 * var(--a-3)) 0 var(--a-5); } .klasor-ust { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a-4); align-items: start; } .klasor-sayilar { display: grid; grid-template-columns: repeat(5, minmax(96px, auto)); gap: var(--a-2); margin-bottom: var(--a-5); } .klasor-sec { position: relative; display: flex; align-items: center; gap: var(--a-2); } .klasor-sec-dugme .bi { color: var(--r-metin-2); } .klasor-sec-menu { width: min(420px, calc(100vw - 32px)); padding: var(--a-2); } .klasor-sec-liste { max-height: 360px; overflow-y: auto; margin-top: var(--a-2); } .klasor-sec-oge { display: flex; flex-direction: column; align-items: flex-start; gap: 0; white-space: normal; } .klasor-sec-oge .hucre-alt { max-width: 100%; color: var(--r-metin-2); overflow-wrap: break-word; } /* uzun müşteri — proje adı menüyü yana kaydırmaz */ .klasor-arac { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-3); padding: var(--a-3) var(--a-4); border-bottom: 1px solid var(--r-cizgi); } .klasor-arac .suzgec-ara { flex: 0 1 280px; } .klasor-not { padding: var(--a-3) var(--a-4); border-left: 3px solid var(--r-altin); border-radius: 0 var(--yc-2) var(--yc-2) 0; background: var(--r-altin-sis); color: var(--r-metin); overflow-wrap: anywhere; white-space: pre-line; } .klasor-uyari { display: flex; align-items: center; gap: var(--a-2); padding: var(--a-2) var(--a-4); border-bottom: 1px solid var(--r-cizgi); background: var(--r-amber-sis); color: var(--r-amber-yazi); font-weight: var(--ya-orta); } .klasor-ozet-izgara { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--a-5); } .klasor-ozet-izgara > .kart { padding: var(--a-5); display: flex; flex-direction: column; gap: var(--a-4); } .klasor-liste { display: flex; flex-direction: column; } /* Sabit yükseklikli flex sütun kaplarda (kayan liste, çekmece gövdesi, rota adımları) öğe büzülmez; kap kayar (G-B Faz 3 Ö1/Ö8). */ .klasor-liste > *, .offcanvas-body > *, .rota-adimlari > *, .bolum > * { flex-shrink: 0; } .klasor-liste-oge { display: flex; align-items: center; gap: var(--a-3); min-height: 48px; padding: var(--a-2) var(--a-4); border-bottom: 1px solid var(--r-cizgi); } .klasor-liste-oge:last-child { border-bottom: 0; } .klasor-liste-govde { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } /* Parçalar ızgarası: İş sütunu (kenar işlemi metni) geniş, her satır en çok ~3 satır; sayı hücreleri sabit. */ .pc-tablo col.s-sec { width: 40px; } .pc-tablo col.s-pafta { width: 56px; } .pc-tablo col.s-is { width: 280px; } .pc-tablo col.s-en, .pc-tablo col.s-boy { width: 68px; } .pc-tablo col.s-adet { width: 56px; } .pc-tablo col.s-kalinlik, .pc-tablo col.s-uretildi { width: 72px; } .pc-tablo col.s-m2 { width: 84px; } .pc-tablo td.s-m2 .hucre-alt { white-space: pre-line; } .tablo-dipnot { margin: 0; padding: var(--a-2) var(--a-4); border-top: 1px solid var(--r-cizgi); color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); overflow-wrap: anywhere; } /* İ-031: "4,40 mtül" / "126,7 kg" iki satır */ .pc-tablo col.s-eylem { width: 48px; } .pc-tablo .siluet--kucuk { width: 40px; height: auto; } .kp-tablo col.s-paket { width: 26%; } .kp-tablo col.s-adet, .kp-tablo col.s-kg { width: 15%; } .pc-tablo td { padding: var(--a-1) var(--a-2); } .pc-tablo td.hucre-yazilir { padding-left: var(--a-1); padding-right: var(--a-1); } .pc-baslik-birim { color: var(--r-metin-3); font-weight: var(--ya-normal); } /* İhracat ve revizyon tam ekran pencereleri (planlama-is-emirleri.js, planlama-revizyon.js) */ .tam-pencere .modal-dialog { max-width: min(1440px, calc(100vw - 32px)); } .tam-pencere .modal-content { background: var(--r-tas); } .tam-pencere-ust { display: flex; align-items: center; gap: var(--a-3); flex-wrap: wrap; background: var(--r-yuzey); } .tam-pencere-ust .modal-title { flex: 1 1 auto; min-width: 0; } .tam-pencere-eylem { display: flex; align-items: center; gap: var(--a-2); flex-wrap: wrap; } .tam-pencere-govde { display: flex; flex-direction: column; gap: var(--a-4); } .kase-alan { min-width: 0; } .kase-alan--genis { grid-column: span 2; } .kase-alan--tam, .revizyon-gecis { grid-column: 1 / -1; } .ozet-serit { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--a-2) var(--a-5); padding: var(--a-3) var(--a-4); border: 1px solid var(--r-cizgi); border-radius: var(--yc-3); background: var(--r-yuzey); color: var(--r-metin-2); } .ozet-serit-oge { white-space: nowrap; } .ozet-serit-oge b { color: var(--r-metin); font-size: var(--yb-16); font-weight: var(--ya-kalin); } .ozet-serit-birim { margin-left: auto; color: var(--r-metin-3); font-size: var(--yb-12); white-space: nowrap; } .hesap-kabi { min-width: 0; margin: 0; padding: 0; border: 1px solid var(--r-cizgi); border-radius: var(--yc-3); background: var(--r-yuzey); } .hesap-tablo th { height: 40px; padding: 0 var(--a-2); border-bottom: 1px solid var(--r-cizgi); background: var(--r-tas-ust); color: var(--r-metin-2); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-yari); white-space: nowrap; } .hesap-tablo td { height: 52px; padding: var(--a-1) var(--a-2); border-bottom: 1px solid var(--r-cizgi); vertical-align: middle; } .hesap-tablo td .form-control, .hesap-tablo td .form-select { width: 100%; min-width: 0; } /* Hesap tablosu (ihracat, revizyon) kart ızgarası: her parça satırı bir ızgara; alanlar etiketli, değer kutuya sığar, pencere yatay kaymaz. DOM sırası (Tab, Enter ile alt satır) aynı kalır. Etiket hücrenin data-baslik'inden. */ .hesap-tablo thead { display: none; } .hesap-tablo, .revizyon-tablo { display: block; width: 100%; } .hesap-tablo tbody { display: block; } .hesap-tablo tbody tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--a-2) var(--a-3); align-items: end; padding: var(--a-3) var(--a-4); border-bottom: 1px solid var(--r-cizgi); } .hesap-tablo tbody td { display: flex; flex-direction: column; gap: 2px; min-width: 0; height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; } .hesap-tablo tbody td[data-baslik]:not([data-baslik=""])::before { content: attr(data-baslik); color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-orta); } .hesap-tablo tbody td[data-baslik="Evye ya da kesim"], .hesap-tablo tbody td[data-baslik="Malzeme"], .hesap-tablo tbody td[data-baslik="Cinsi"], .hesap-tablo tbody td.revizyon-parca { grid-column: span 2; } .hesap-tablo tbody td[data-baslik="Ürün cinsi"] { grid-column: 1 / -1; } /* "SILESTONE … 20MM PLAKA" gibi uzun taş adı kutuya sığar */ .hesap-tablo tbody td[data-baslik="Kenar"] { grid-column: span 3; } .hesap-tablo tbody td.hesap-sil, .hesap-tablo tbody td.revizyon-isaret { align-self: center; justify-content: center; } .hesap-tablo tbody tr.revizyon-etki { display: block; padding: 0; } .hesap-tablo tbody tr.revizyon-etki > td { display: block; } .hesap-s-siluet, .hesap-siluet { width: 88px; } .hesap-s-pafta { width: 110px; } .hesap-s-cinsi { min-width: 160px; } .hesap-s-adet { width: 80px; } .hesap-s-kalinlik { width: 110px; } .hesap-s-olcu { width: 100px; } .hesap-s-kenar, .hesap-s-evye { min-width: 200px; } .hesap-s-sil, .hesap-sil { width: 52px; text-align: center; } .hesap-not { display: block; margin-top: var(--a-1); color: var(--r-kirmizi-yazi); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-yari); white-space: normal; } .hesap-satir-hata > td { background: var(--r-kirmizi-sis); } .hesap-satir-ekle { margin: var(--a-2) var(--a-3) var(--a-3); } .hesap-alt { display: block; color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); } .hesap-alt--uyari { color: var(--r-amber-yazi); } .hesap-vurgu > td { animation: vurgu 1.5s ease-out; } .revizyon-gecis-satir { display: flex; align-items: center; gap: var(--a-3); flex-wrap: wrap; } .revizyon-baslik { display: flex; flex-direction: column; min-width: 0; } .revizyon-musteri { color: var(--r-metin-3); } .revizyon-mevcut { font-weight: var(--ya-yari); } .revizyon-suz { margin-left: auto; } .revizyon-parca, .revizyon-s-parca, .revizyon-s-urun { min-width: 150px; } .revizyon-s-malzeme { min-width: 130px; } .revizyon-parca > * { display: block; } .revizyon-isaret, .revizyon-s-isaret { width: 28px; } .revizyon-tur { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--r-cizgi); } tr[data-tur="degisti"] .revizyon-tur { background: var(--r-amber); } tr[data-tur="yeni"] .revizyon-tur { background: var(--r-yesil); } tr[data-tur="iptal"] .revizyon-tur { background: var(--r-kirmizi); } .revizyon-degisti .form-control, .revizyon-degisti .form-select { border-color: var(--r-amber); background-color: var(--r-amber-sis); } .revizyon-eski { display: block; margin-top: 2px; color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); text-decoration: line-through; white-space: nowrap; } .revizyon-sevk { margin-top: var(--a-1); white-space: normal; } .revizyon-etki > td { height: auto; padding: var(--a-2) var(--a-3); background: var(--r-amber-sis); color: var(--r-amber-yazi); font-size: var(--yb-12); line-height: var(--ys-12); } .revizyon-etki-metin { display: block; } .gecmis-liste { display: flex; flex-direction: column; gap: var(--a-3); } .gecmis-oge { border: 1px solid var(--r-cizgi); border-radius: var(--yc-3); background: var(--r-yuzey); overflow: hidden; } .gecmis-oge > summary { display: flex; flex-direction: column; gap: var(--a-1); padding: var(--a-3) var(--a-4); list-style: none; } .gecmis-oge > summary::-webkit-details-marker { display: none; } .gecmis-oge[open] > summary { border-bottom: 1px solid var(--r-cizgi); background: var(--r-tas-ust); } .gecmis-ust { display: flex; align-items: baseline; justify-content: space-between; gap: var(--a-3); flex-wrap: wrap; } .gecmis-gecis { font-weight: var(--ya-kalin); } .gecmis-tarih { color: var(--r-metin-3); font-size: var(--yb-12); } .gecmis-sebep { color: var(--r-metin-2); overflow-wrap: anywhere; } .gecmis-govde { display: flex; flex-direction: column; gap: var(--a-3); padding: var(--a-3) var(--a-4); } .gecmis-fark { width: 100%; } .gecmis-fark td, .gecmis-fark th { padding: var(--a-1) var(--a-2); overflow-wrap: anywhere; white-space: normal; font-size: var(--yb-13); } .gecmis-notlar { padding-left: var(--a-4); list-style: disc; color: var(--r-metin-2); } .gecmis-parcalar { display: flex; align-items: flex-start; gap: var(--a-3); flex-wrap: wrap; } .gecmis-parcalar > .hesap-alt { flex: 0 0 56px; padding-top: var(--a-1); } .gecmis-iptal { text-decoration: line-through; } .gecmis-bos { display: flex; flex-direction: column; gap: var(--a-1); padding: var(--a-6); border: 1px dashed var(--r-cizgi-guclu); border-radius: var(--yc-3); text-align: center; } .eski { color: var(--r-metin-3); text-decoration: line-through; } .yeni { font-weight: var(--ya-yari); } .tablo-kabi--kayar { overflow-x: auto; } /* Parça formu çekmecesi ve teknik dosya pencereleri (planlama-parca-formu.js, planlama-cizim.js) */ .pf-pafta { display: flex; flex-direction: column; gap: var(--a-3); } .rota-engel { display: flex; align-items: flex-start; gap: var(--a-2); color: var(--r-amber-yazi); } .un-baslik { display: flex; flex-direction: column; gap: var(--a-1); min-width: 0; } .un-ozet { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-2); } .un-cekmece .offcanvas-body { gap: var(--a-2); } .pf-siluet { display: flex; justify-content: center; padding: var(--a-4); border: 1px solid var(--r-cizgi); border-radius: var(--yc-2); background: var(--r-tas-ust); } .pf-hesap { display: flex; flex-wrap: wrap; gap: var(--a-1) var(--a-4); color: var(--r-metin-2); } .pf-hesap b { color: var(--r-metin); } .panel { border: 1px solid var(--r-cizgi); border-radius: var(--yc-3); background: var(--r-yuzey); } .panel-govde { padding: var(--a-4); } .hata-durum { display: flex; align-items: flex-start; gap: var(--a-3); padding: var(--a-4); border: 1px solid var(--r-kirmizi-sis); border-radius: var(--yc-2); background: var(--r-kirmizi-sis); color: var(--r-kirmizi-yazi); } .hata-durum-baslik { font-weight: var(--ya-yari); } .hata-durum-metin { color: var(--r-metin-2); } .bos-durum { display: flex; flex-direction: column; align-items: center; gap: var(--a-2); padding: var(--a-6); text-align: center; } .bos-durum--kucuk { padding: var(--a-4); } .bos-durum-ikon { font-size: var(--yb-24); color: var(--r-metin-3); } .bos-durum-baslik { font-weight: var(--ya-yari); } .bos-durum-metin { color: var(--r-metin-2); } .iskelet-tablo { display: flex; flex-direction: column; gap: var(--a-3); padding: var(--a-4); } .satir-arasi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2); } .yigin { display: flex; flex-direction: column; gap: var(--a-3); } .yigin--sik { gap: var(--a-1); } .etiket-ust { color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); } .uyari-seridi { display: flex; align-items: flex-start; gap: var(--a-2); padding: var(--a-3) var(--a-4); border-radius: var(--yc-2); background: var(--r-amber-sis); color: var(--r-amber-yazi); font-weight: var(--ya-orta); overflow-wrap: anywhere; } /* Rota adımları (akis-ortak.js adimlariCiz) — terminal adım çekmecesi */ .rota-adimlari { display: flex; flex-direction: column; gap: var(--a-2); } .rota-adim, .pi-adim { display: flex; align-items: center; gap: var(--a-3); width: 100%; min-height: 56px; padding: var(--a-2) var(--a-4); border: 1px solid var(--r-cizgi); border-radius: var(--yc-2); background: var(--r-yuzey); color: var(--r-metin); text-align: left; } .pi-adim:disabled { opacity: .6; } .pi-adim-isaret { flex: 0 0 auto; color: var(--r-metin-3); } .pi-adim-govde { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .pi-adim-ad { font-weight: var(--ya-yari); } .pi-adim-sebep, .pi-adim-ek { color: var(--r-metin-3); font-size: var(--yb-13); line-height: var(--ys-13); } .ak-olcu-kap { display: flex; flex-direction: column; } .ak-olcu { display: inline-flex; align-items: baseline; gap: var(--a-2); font-weight: var(--ya-yari); white-space: nowrap; } .ak-x { color: var(--r-metin-3); } .ak-birim { color: var(--r-metin-3); font-weight: var(--ya-normal); } .ak-olcu-alt { color: var(--r-metin-3); font-size: var(--yb-13); line-height: var(--ys-13); } .zaman-cizelgesi { display: flex; flex-direction: column; } .zaman-cizelgesi > li { display: flex; gap: var(--a-3); padding: var(--a-3) 0; border-bottom: 1px solid var(--r-cizgi); } .zaman-cizelgesi .zaman { flex: 0 0 auto; min-width: 48px; color: var(--r-metin-3); white-space: nowrap; } .zaman-cizelgesi .detay { color: var(--r-metin-3); font-size: var(--yb-13); line-height: var(--ys-13); } /* ---------- İstasyon Terminali: koyu kiosk, büyük dokunma hedefleri ---------- */ .tm-govde { background: var(--t-zemin); color: var(--t-metin); } .tm { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--t-zemin); color: var(--t-metin); font-size: var(--yb-16); line-height: var(--ys-16); } .tm .btn { --bs-btn-font-size: var(--yb-16); --bs-btn-line-height: var(--ys-16); } .tm-serit { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: var(--a-4); padding: var(--a-3) var(--a-6); background: var(--t-yuzey); border-bottom: 1px solid var(--t-cizgi); } .tm-kim { display: flex; align-items: center; gap: var(--a-3); min-width: 0; } .tm-kim-metin { display: flex; flex-direction: column; min-width: 0; } .tm-kim-ad { overflow-wrap: anywhere; font-size: var(--yb-16); line-height: var(--ys-16); font-weight: var(--ya-kalin); } .tm-kim-makine { overflow-wrap: anywhere; color: var(--t-soluk); } .tm-kim-makine:empty { display: none; } .tm-okut { display: flex; align-items: center; min-width: 0; height: 56px; border: 2px solid var(--r-altin); border-radius: var(--yc-3); background: var(--t-zemin); } .tm-okut:focus-within { box-shadow: 0 0 0 4px var(--r-odak-altin); } .tm-okut[data-araniyor] { border-color: var(--r-altin-acik); } .tm-okut-girdi { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 var(--a-4); border: 0; outline: 0; background: transparent; color: var(--t-metin); font-size: var(--yb-20); font-weight: var(--ya-yari); letter-spacing: .02em; } .tm-okut-girdi:focus-visible { outline: 2px solid var(--r-altin-acik); outline-offset: -4px; border-radius: var(--yc-2); } .tm-okut-girdi::placeholder { color: var(--t-soluk); font-weight: var(--ya-normal); } .tm-okut-git { display: grid; place-items: center; flex: 0 0 56px; height: 100%; border: 0; border-radius: 0 var(--yc-2) var(--yc-2) 0; background: var(--r-altin); color: var(--r-murekkep); font-size: var(--yb-24); } .tm .btn-secondary { --bs-btn-color: var(--t-metin); --bs-btn-bg: var(--t-yuzey-2); --bs-btn-border-color: var(--t-cizgi); --bs-btn-hover-color: var(--t-metin); --bs-btn-hover-bg: var(--t-cizgi); --bs-btn-hover-border-color: var(--t-soluk); --bs-btn-active-color: var(--t-metin); --bs-btn-active-bg: var(--t-cizgi); --bs-btn-disabled-color: var(--t-soluk); --bs-btn-disabled-bg: var(--t-yuzey); --bs-btn-disabled-border-color: var(--t-cizgi); } .tm .btn-hayalet { --bs-btn-color: var(--t-soluk); --bs-btn-hover-color: var(--t-metin); --bs-btn-hover-bg: var(--t-yuzey-2); --bs-btn-active-bg: var(--t-yuzey-2); --bs-btn-active-color: var(--t-metin); } .tm .btn-link { --bs-btn-color: var(--r-altin-acik); --bs-btn-hover-color: var(--t-metin); } .tm .tm-dokun { min-height: 64px; --bs-btn-padding-x: var(--a-6); --bs-btn-font-size: var(--yb-16); } .tm-sinyal { padding: var(--a-4) var(--a-6); background: var(--r-kirmizi); color: var(--r-beyaz); font-size: var(--yb-20); line-height: var(--ys-20); font-weight: var(--ya-kalin); text-align: center; } .tm-adimlar { display: flex; justify-content: center; gap: var(--a-2); padding: var(--a-5) var(--a-6) 0; } .tm-adimlar > li { display: flex; align-items: center; gap: var(--a-2); padding: var(--a-2) var(--a-4); border-radius: var(--yc-tam); background: var(--t-yuzey); color: var(--t-soluk); font-weight: var(--ya-yari); white-space: nowrap; } .tm-adim-no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--t-yuzey-2); font-size: var(--yb-13); font-weight: var(--ya-kalin); } .tm-adimlar > li[aria-current="step"] { background: var(--r-altin); color: var(--r-murekkep); } .tm-adimlar > li[aria-current="step"] .tm-adim-no { background: var(--r-murekkep); color: var(--r-altin-acik); } .tm-adimlar > li[data-gecti] { color: var(--t-metin); } .tm[data-hal="parca"] .tm-adimlar, .tm[data-hal="adaylar"] .tm-adimlar { display: none; } .tm-bolum { width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--a-6); } .tm-bolum > h1 { margin-bottom: var(--a-5); color: var(--t-metin); font-size: var(--yb-32); line-height: var(--ys-32); text-align: center; } .tm-dosemeler { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--a-3); } .tm-dosemeler--genis { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .tm-doseme { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--a-1); min-height: 88px; padding: var(--a-3) var(--a-4); border: 1px solid var(--t-cizgi); border-radius: var(--yc-3); background: var(--t-yuzey); color: var(--t-metin); font-size: var(--yb-20); line-height: var(--ys-20); font-weight: var(--ya-yari); text-align: center; overflow-wrap: anywhere; } .tm-doseme:hover { border-color: var(--r-altin); background: var(--t-yuzey-2); } .tm-doseme:focus-visible { outline: 3px solid var(--r-altin); outline-offset: 2px; } .tm-doseme--ikincil { color: var(--t-soluk); font-size: var(--yb-16); } .tm-doseme--aday { align-items: flex-start; text-align: left; font-size: var(--yb-16); } .tm-doseme--uygun { border-color: var(--r-yesil); } .tm-doseme--ret { border-color: var(--r-kirmizi); } .tm-yonerge { margin: var(--a-12) 0 var(--a-6); color: var(--t-metin); font-size: var(--yb-32); line-height: var(--ys-32); font-weight: var(--ya-kalin); text-align: center; } .tm-son { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--a-2) var(--a-4); color: var(--t-soluk); font-size: var(--yb-16); line-height: var(--ys-16); } .tm-son-no { color: var(--t-metin); font-weight: var(--ya-kalin); } .tm-aday-mesaj { margin: calc(-1 * var(--a-3)) 0 var(--a-5); color: var(--t-soluk); text-align: center; } .tm-kart { width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--a-5) var(--a-6) var(--a-8); display: flex; flex-direction: column; gap: var(--a-5); } .tm-kimlik { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a-2) var(--a-4); align-items: start; } .tm-kimlik-sol { display: flex; flex-direction: column; gap: var(--a-1); min-width: 0; } .tm-parca-no { color: var(--t-metin); font-size: var(--yb-40); line-height: var(--ys-40); font-weight: var(--ya-kalin); overflow-wrap: anywhere; } .tm-kimlik-satir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-3); color: var(--t-soluk); font-size: var(--yb-16); line-height: var(--ys-16); } .tm-kimlik-is { color: var(--t-metin); font-weight: var(--ya-yari); } .tm-kimlik-sag { display: flex; align-items: center; gap: var(--a-2); } .tm-cizim-notu { display: flex; align-items: flex-start; gap: var(--a-3); padding: var(--a-4) var(--a-5); border-left: 4px solid var(--r-altin); border-radius: 0 var(--yc-3) var(--yc-3) 0; background: var(--t-yuzey); color: var(--t-metin); font-size: var(--yb-20); line-height: var(--ys-20); font-weight: var(--ya-yari); overflow-wrap: anywhere; } .tm-cizim-notu > .bi { color: var(--r-altin-acik); } .tm-not-etiket { display: block; color: var(--r-altin-acik); font-size: var(--yb-13); line-height: var(--ys-13); font-weight: var(--ya-yari); } .tm-orta { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: var(--a-5); align-items: stretch; } .tm-pafta { display: flex; flex-direction: column; gap: var(--a-4); padding: var(--a-5); border-radius: var(--yc-3); background: var(--r-tas); color: var(--r-metin); } .tm-pafta .siluet { margin: 0 auto; } .tm-olculer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-3); } .tm-olcu { display: flex; flex-direction: column; padding: var(--a-3) var(--a-4); border-radius: var(--yc-2); background: var(--r-yuzey); } .tm-olcu-ad { color: var(--r-metin-3); font-size: var(--yb-13); line-height: var(--ys-13); font-weight: var(--ya-yari); } .tm-olcu-deger { color: var(--r-metin); font-size: var(--yb-24); line-height: var(--ys-24); font-weight: var(--ya-kalin); white-space: nowrap; } .tm-olcu-birim { margin-left: var(--a-2); color: var(--r-metin-3); font-size: var(--yb-16); font-weight: var(--ya-yari); } .tm-olcu-metin { color: var(--r-metin); font-size: var(--yb-24); line-height: var(--ys-24); font-weight: var(--ya-kalin); text-align: center; } .tm-pafta-alt { color: var(--r-metin-2); font-size: var(--yb-16); line-height: var(--ys-16); } .tm-pafta-alt:empty { display: none; } .tm-dosyalar { display: flex; flex-wrap: wrap; gap: var(--a-2); } .tm-dosyalar .btn-secondary { --bs-btn-color: var(--r-metin); --bs-btn-bg: var(--r-yuzey); --bs-btn-border-color: var(--r-cizgi-guclu); --bs-btn-hover-bg: var(--r-tas-2); --bs-btn-hover-color: var(--r-metin); } .tm-sayac { display: flex; flex-direction: column; align-items: stretch; gap: var(--a-3); padding: var(--a-5); border-radius: var(--yc-3); background: var(--t-yuzey); } .tm-sayac-baslik { color: var(--t-soluk); font-size: var(--yb-16); line-height: var(--ys-16); font-weight: var(--ya-yari); text-align: center; } .tm-sayi { display: flex; align-items: baseline; justify-content: center; gap: var(--a-2); color: var(--t-metin); } .tm-sayi-uretilen { font-size: var(--yb-56); line-height: var(--ys-56); font-weight: var(--ya-kalin); } .tm-sayi-uretilen[data-degisti] { animation: sayac 0.4s ease-out; } .tm-sayi-bolu, .tm-sayi-adet { color: var(--t-soluk); font-size: var(--yb-40); line-height: var(--ys-40); font-weight: var(--ya-yari); } .tm-sayi-birim { margin-left: var(--a-3); color: var(--t-soluk); font-size: var(--yb-20); font-weight: var(--ya-yari); } .tm .tm-arti { min-height: 96px; --bs-btn-font-size: var(--yb-40); --bs-btn-line-height: var(--ys-40); --bs-btn-font-weight: var(--ya-kalin); --bs-btn-border-radius: var(--yc-3); } .tm-sayac-alt { display: grid; grid-template-columns: 1fr 2fr; gap: var(--a-2); } .tm-not { color: var(--t-soluk); font-size: var(--yb-16); text-align: center; } .tm-kalite { display: flex; flex-direction: column; gap: var(--a-3); padding: var(--a-5); border-radius: var(--yc-3); background: var(--t-yuzey); } .tm-kalite > h2 { color: var(--t-metin); font-size: var(--yb-20); } .tm-kalite-dosemeler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-2); } .tm-kalite-kayitli { color: var(--t-soluk); } .tm-rota { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-3); } .tm-rota-adimlar { display: flex; flex-wrap: wrap; gap: var(--a-2); } .tm-rota-adimlar > li { display: inline-flex; align-items: center; gap: var(--a-2); padding: var(--a-1) var(--a-3); border-radius: var(--yc-tam); background: var(--t-yuzey); color: var(--t-soluk); font-weight: var(--ya-yari); } .tm-rota-adimlar > li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--durum-isaret); } .tm-rota-adimlar > li[data-hal="SuAn"] { background: var(--t-yuzey-2); color: var(--t-metin); box-shadow: inset 0 0 0 1px var(--durum-isaret); } .tm-bilgi { flex: 1 1 100%; padding: var(--a-3) var(--a-4); border-radius: var(--yc-3); background: var(--t-yuzey); } .tm-bilgi > summary { color: var(--t-soluk); font-weight: var(--ya-yari); } .tm-bilgi .alan-listesi { margin-top: var(--a-3); } .tm-bilgi .alan-listesi dt { color: var(--t-soluk); } .tm-bilgi .alan-listesi dd { color: var(--t-metin); } .tm-sonraki { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-3); } .tm .tm-sonraki-dugme { flex: 1 1 320px; min-height: 72px; --bs-btn-font-size: var(--yb-20); --bs-btn-line-height: var(--ys-20); --bs-btn-border-radius: var(--yc-3); } .tm-sonraki-dugme[data-bilgi] { --bs-btn-disabled-bg: var(--t-yuzey-2); --bs-btn-disabled-border-color: var(--t-cizgi); --bs-btn-disabled-color: var(--t-metin); --bs-btn-disabled-opacity: 1; } .tm-engel { flex: 1 1 100%; color: var(--r-altin-acik); font-size: var(--yb-16); line-height: var(--ys-16); } .tm .cip { --durum-sis: var(--t-yuzey-2); --durum-yazi: var(--t-metin); min-height: 32px; padding: 0 var(--a-3); font-size: var(--yb-16); line-height: var(--ys-16); } .tm .dropdown-menu { --bs-dropdown-font-size: var(--yb-16); --bs-dropdown-bg: var(--t-yuzey); --bs-dropdown-color: var(--t-metin); --bs-dropdown-border-color: var(--t-cizgi); --bs-dropdown-link-color: var(--t-metin); --bs-dropdown-link-hover-bg: var(--t-yuzey-2); --bs-dropdown-link-hover-color: var(--t-metin); --bs-dropdown-divider-bg: var(--t-cizgi); } .tm .dropdown-item .bi { color: var(--t-soluk); } .tm .soluk, .tm-cekmece .soluk { color: var(--t-soluk); } .tm-cekmece { font-size: var(--yb-16); --bs-offcanvas-height: min(70vh, 640px); --bs-offcanvas-bg: var(--t-yuzey); --bs-offcanvas-color: var(--t-metin); --bs-offcanvas-border-color: var(--t-cizgi); } .tm-cekmece .offcanvas-header { border-bottom-color: var(--t-cizgi); } .tm-cekmece .offcanvas-title { color: var(--t-metin); } .tm-cekmece .btn-close { filter: invert(1); } .tm-cekmece .zaman-cizelgesi > li { border-bottom-color: var(--t-cizgi); } .tm-cekmece .zaman-cizelgesi .zaman, .tm-cekmece .zaman-cizelgesi .detay { color: var(--t-soluk); } .tm-cekmece .pi-adim { border-color: var(--t-cizgi); background: var(--t-yuzey-2); color: var(--t-metin); min-height: 64px; } /* ---------- Terminal (kiosk) tam yükseklik (Faz 3 Karar 1, ≥ 992): şerit sabit, parça kartı kalan yükseklikte. Kart iki kolon: solda pafta (çizim + ölçü), sağda sayaç → kalite → sonraki adım → rota; böylece 1280×800'de tek bakışta biter. Çok uzun içerikte (çizim notu + sipariş notu + açık "Sipariş bilgisi") kart kendi içinde kayar, okutma alanı hep görünür. ---------- */ @media (min-width: 992px) { .tm { height: 100vh; height: 100dvh; min-height: 0; } .tm > .tm-bolum, .tm > .tm-kart:not([hidden]) { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .tm-kart:not([hidden]) { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); grid-auto-flow: row dense; align-content: start; gap: var(--a-4) var(--a-5); padding: var(--a-4) var(--a-6) var(--a-6); } .tm-kart > .tm-kimlik, .tm-kart > .tm-cizim-notu { grid-column: 1 / -1; } .tm-kart > .tm-orta { display: contents; } .tm-kart .tm-pafta { grid-column: 1; grid-row: span 4; } .tm-kart .tm-sayac, .tm-kart .tm-kalite, .tm-kart > .tm-sonraki, .tm-kart > .tm-rota { grid-column: 2; } } } /* ================================================================================================ YARDIMCI */ @layer yardimci { .gorunmez { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .soluk { color: var(--r-metin-3); } /* Kimlik/no (parça, sipariş, paket, sevk, plaka) ortadan bölünmez (Faz 3 Karar 2): "10-07-" / "P001" yasak. */ .kod { font-weight: var(--ya-yari); font-variant-numeric: tabular-nums; white-space: nowrap; } .kod-guclu { font-weight: var(--ya-kalin); font-variant-numeric: tabular-nums; white-space: nowrap; } .kimlik { white-space: nowrap; font-variant-numeric: tabular-nums; } .tabular { font-variant-numeric: tabular-nums; } .kirilir { overflow-wrap: anywhere; } /* boşluksuz uzun değer (iz no, QR biçimi) kabı taşırmasın */ .tek-satir { display: block; white-space: nowrap; } /* Kırpma yalnız açık işaretle (koordinatör kuralı): serbest metin (müşteri, proje, ürün, not, kullanıcı adı). Önce 2 satır, sonra "…"; tam metin title'da (tablo.js otomatik yazar). data-kirpilabilir="1" → tek satır. */ [data-kirpilabilir] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; } /* Tek satır: kelime kırılmasıyla değil KARAKTER düzeyinde keser — satır kutusu sonuna kadar dolar, "…" yalnız gerçekten yer bitince gelir ("SEDEF…" + boşluk kusuru: line-clamp 1, sığmayan kelimeyi bütünüyle ikinci satıra atıp gizliyordu). */ [data-kirpilabilir="1"] { display: block; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: none; line-clamp: none; } .sayi { text-align: right; } .tiklanir { cursor: pointer; } .sag { margin-left: auto; } } /* ================================================================================================ Animasyon ve duyarlılık */ @keyframes don { to { transform: rotate(360deg); } } @keyframes iskelet { from { background-position: 200% 0; } to { background-position: -200% 0; } } @keyframes vurgu { from { background: var(--r-altin-sis); } } @keyframes bildirim-gir { from { opacity: 0; transform: translateY(8px); } } @keyframes sayac { from { color: var(--r-altin-acik); transform: scale(1.08); } } @layer yardimci { @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; } } } @layer bilesen { /* Daraltılmış menü: 72 px ikon rayı (html[data-menu="dar"], uygulama.js menu-daralt) */ @media (min-width: 992px) { [data-menu="dar"] .kabuk-menu { flex-basis: var(--kabuk-menu-dar); width: var(--kabuk-menu-dar); } /* Dar menüde de resmî logo (çerçeve + yazı) küçültülerek gösterilir; uydurma işaret yok. */ [data-menu="dar"] .kabuk-marka { justify-content: center; padding: 0 var(--a-2); } [data-menu="dar"] .kabuk-marka .logo { width: 52px; } /* Grup başlığı ayırıcı çizgiye döner; metin ekran okuyucuda kalır (görünmez kalıbı, kırpma değil). */ [data-menu="dar"] .menu-grup-baslik, [data-menu="dar"] .menu-oge-ad, [data-menu="dar"] .menu-daralt-metin { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Dar ray ipucu taşması için kaymaz (overflow: visible); bu yüzden 20 ikon + 5 ayırıcı 800 px yükseklikte de sığacak kadar sıkı: öğe boyu görünüm yüksekliğiyle 28–40 px arasında ölçeklenir (G-B Faz 3, MenuDar sayfalarda Ö5b kırpma). */ [data-menu="dar"] .menu-grup + .menu-grup { margin-top: var(--a-1); padding-top: var(--a-1); border-top: 1px solid var(--r-murekkep-3); } [data-menu="dar"] .menu-oge { justify-content: center; padding: 0; min-height: clamp(28px, 3.6dvh, 40px); } [data-menu="dar"] .menu-oge:hover::after, [data-menu="dar"] .menu-oge:focus-visible::after { content: attr(title); position: absolute; left: calc(100% + var(--a-3)); top: 50%; z-index: 1050; transform: translateY(-50%); padding: var(--a-1) var(--a-3); border-radius: var(--yc-1); background: var(--r-murekkep); box-shadow: 0 4px 12px var(--r-golge-guclu); color: var(--r-beyaz); font-size: var(--yb-13); line-height: var(--ys-13); font-weight: var(--ya-orta); white-space: nowrap; pointer-events: none; } [data-menu="dar"] .kabuk-gezinti { overflow: visible; padding-top: var(--a-2); padding-bottom: var(--a-2); } [data-menu="dar"] .menu-rozet { position: absolute; top: 0; right: -6px; min-width: 18px; padding: 0 var(--a-1); box-shadow: 0 0 0 2px var(--r-murekkep); } [data-menu="dar"] .menu-daralt { justify-content: center; padding: 0; } [data-menu="dar"] .menu-daralt .bi { transform: scaleX(-1); } } /* ---------- TAM YÜKSEKLİK DÜZENİ (Faz 3 Karar 1, ≥ 992 px) — sözleşme: rehber §4.16 ---------- Kabuk görünüm yüksekliğini doldurur; belge (sayfa) dikey kaymaz. .sayfa sütun flex'tir: başlık ve süzgeç doğal boyunda, ANA KART (.ana-kart ya da .sayfa'nın doğrudan son .kart'ı) kalan yüksekliği alır ve İÇİNDE kayar: tablo başlığı üstte, toplam satırı (tfoot) ve .sayfalama / .form-alt-cubuk kartın altında hep görünür. Kapatma: ViewData["TamYukseklik"] = false → html[data-tam-yukseklik="kapali"] (eski akış, belge kayar). Sözleşmeye uymayan ekran içerik kaybetmez: kaçış kaydırması .kabuk-ana'dadır (Ö5b onu da sayar). */ @media (min-width: 992px) { html:not([data-tam-yukseklik="kapali"]) .kabuk { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; } html:not([data-tam-yukseklik="kapali"]) .kabuk-ana { height: 100vh; height: 100dvh; overflow-y: auto; } html:not([data-tam-yukseklik="kapali"]) .sayfa { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: var(--a-6); } html:not([data-tam-yukseklik="kapali"]) .sayfa > * { flex: 0 0 auto; } /* DOLDURAN öğe: .doldur (eş ad .ana-kart) ya da kendiliğinden .sayfa'nın son .kart'ı. Kart, sekme kabı, sarmalayıcı olabilir; iç içe kullanılabilir (sekme kabı .doldur → içindeki kart .doldur). */ html:not([data-tam-yukseklik="kapali"]) .sayfa > .doldur, html:not([data-tam-yukseklik="kapali"]) .sayfa > .ana-kart, html:not([data-tam-yukseklik="kapali"]) .sayfa > .kart:last-of-type, .doldur .doldur, .doldur > .ana-kart { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; } html:not([data-tam-yukseklik="kapali"]) .sayfa > .kart:last-of-type.dogal { flex: 0 0 auto; display: block; } /* doldurmayan son kart (süzgeç kartı vb.) */ /* Dolduran kartın KAYAN bölgesi: .kayan (eş ad .kart-kayar), tablo kabı ya da kart gövdesi. Kardeşleri (süzgeç, sekme başlığı, .sayfalama, .form-alt-cubuk, alt not) sabit kalır → toplam/sayfalama/eylemler kartın altında hep görünür. */ /* Çocukların varsayılanı doğal boy; özgüllük 0 (:where) → aşağıdaki kayan bölge ve durum kabı kuralları her zaman yener. */ :where(.doldur, .ana-kart, .sayfa > .kart:last-of-type, .tam-izgara > .kart) > * { flex: 0 0 auto; } .doldur > :is(.kayan, .kart-kayar, .tablo-kabi, .kart-govde), .ana-kart > :is(.kayan, .kart-kayar, .tablo-kabi, .kart-govde), .sayfa > .kart:last-of-type > :is(.kayan, .kart-kayar, .tablo-kabi, .kart-govde), .tam-izgara > .kart > :is(.kayan, .kart-kayar, .tablo-kabi, .kart-govde) { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; } /* Durum kabı zinciri (m-durum / durumKutusu): dolduran kartın içindeki durum kabı ve onun görünen "dolu" kutusu da doldurur; içlerindeki tablo kabı kayar. Görünüm değiştirmeden İş Emirleri / Stok / Denetim kalıbı çalışır. */ :where(.doldur, .ana-kart, .sayfa > .kart:last-of-type, .tam-izgara > .kart) :is(:has(> [data-durum-kutu]), [data-durum-kutu="dolu"]:not([hidden])) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; } :where(.doldur, .ana-kart, .sayfa > .kart:last-of-type, .tam-izgara > .kart) :where(:has(> [data-durum-kutu]), [data-durum-kutu="dolu"]) > * { flex: 0 0 auto; } :where(.doldur, .ana-kart, .sayfa > .kart:last-of-type, .tam-izgara > .kart) :is(:has(> [data-durum-kutu]), [data-durum-kutu="dolu"]) > :is(.tablo-kabi, .kayan, .kart-kayar) { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; } /* Belge kaymadığı için tablo başlığı kendi kayan kabının tepesine yapışır; toplam satırı dibine. */ html:not([data-tam-yukseklik="kapali"]) .tablo thead th { top: 0; z-index: 3; } html:not([data-tam-yukseklik="kapali"]) .tablo tfoot td { position: sticky; bottom: 0; z-index: 3; } /* Bölünmüş ekran: .tam-izgara (tek başına ya da .ikili-izgara / .ikili-izgara--genis ile) kalan yüksekliği alır; kolon kartları boyu paylaşır, her biri kendi içinde kayar. Satır sayısı içerikten: grid-template-rows ile ekran belirler. */ html:not([data-tam-yukseklik="kapali"]) .sayfa > .tam-izgara, .doldur > .tam-izgara { flex: 1 1 0; min-height: 0; } .tam-izgara { display: grid; gap: var(--a-4); align-items: stretch; grid-auto-rows: minmax(0, 1fr); } /* Dolduran sekme paneli: içindeki kart doldurursa panel taşmaz; doldurmayan içerik (özet ızgarası, liste) panelin içinde kayar. */ .sekme-panel.doldur { overflow-y: auto; overscroll-behavior: contain; } .tam-izgara > .kart { min-height: 0; display: flex; flex-direction: column; } /* Tek kolon, iki kart üst üste (dar ekranda yan yana sığmayan iki geniş kart; G-A Raporlar › Makine). */ .tam-izgara--ust-alt { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); } /* Yan menülü ekran (Tanımlar): sol liste kendi içinde kayar, sağ kart doldurur. */ .yan-izgara.tam-izgara { align-items: stretch; } .yan-izgara.tam-izgara > .liste-secim { min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* G-B: pano dolan yükseklikte, yatay kaymaz; her kolon kendi içinde kayar, kolon başlığı sabit. */ .pano.kayan { overflow: hidden; } .pano.kayan > .pano-kolon { min-height: 0; } .pano.kayan .pano-kolon-govde { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; } /* G-B: dolan kartta etiket önizlemesi oranını bırakır, görsel kalan alana sığar. */ .tam-izgara .kart-govde:has(> .etiket-onizleme) { display: flex; flex-direction: column; } .tam-izgara .etiket-onizleme { aspect-ratio: auto; flex: 1 1 0; min-height: 0; } .tam-izgara .etiket-onizleme img { width: auto; max-width: 100%; height: 100%; max-height: 100%; object-fit: contain; } /* [hidden] her zaman kazanır: yukarıdaki display:flex/grid kuralları gizli sekme panelini, durum kutusunu, 1200 altında gizlenen kolonu açmasın. Özgüllük bilerek yüksek (0,6,1) — bu bloktaki en güçlü seçiciden (0,4,1) büyük. */ html:not([data-tam-yukseklik="kapali"]) .sayfa [hidden][hidden][hidden][hidden] { display: none; } } /* Form kalıbı (Karar 1): geniş ekranda 2 sütun; ikincil bölümler katlı (
); eylemler .form-alt-cubuk'ta. */ .form-iki { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-4) var(--a-6); align-content: start; } .form-iki > .tam { grid-column: 1 / -1; } @media (min-width: 1200px) { .form-iki { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .katli { border: 1px solid var(--r-cizgi); border-radius: var(--yc-2); background: var(--r-yuzey); } .katli > summary { display: flex; align-items: center; gap: var(--a-2); min-height: var(--denetim-y); padding: 0 var(--a-4); list-style: none; color: var(--r-metin); font-weight: var(--ya-yari); } .katli > summary::-webkit-details-marker { display: none; } .katli > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--r-metin-3); border-bottom: 2px solid var(--r-metin-3); transform: translateY(-2px) rotate(45deg); transition: transform .15s; } .katli[open] > summary::after { transform: translateY(2px) rotate(225deg); } .katli > summary:focus-visible { outline: 2px solid var(--r-odak); outline-offset: 2px; border-radius: var(--yc-2); } .katli-ozet { color: var(--r-metin-3); font-weight: var(--ya-normal); } .katli-govde { display: flex; flex-direction: column; gap: var(--a-4); padding: 0 var(--a-4) var(--a-4); } /* Tablet ve telefon: menü çekmeceye taşınır (Bootstrap offcanvas-lg), rol başına 4'lü alt sekme */ @media (max-width: 991.98px) { .kabuk-menu.offcanvas-lg { position: fixed; height: 100%; flex-basis: auto; --bs-offcanvas-width: var(--kabuk-menu); --bs-offcanvas-bg: var(--r-murekkep); --bs-offcanvas-color: var(--r-menu-metin); } .ust-cubuk { padding: 0 var(--a-4); } .ust-menu-ac { display: inline-flex; } .kullanici-bilgi, .baglanti-metin { display: none; } .sayfa { padding: var(--a-5) var(--a-4) calc(var(--a-12) + 64px); } .alt-sekmeler { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-bottom: env(safe-area-inset-bottom); background: var(--r-yuzey); border-top: 1px solid var(--r-cizgi); } .alt-sekme { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; padding: var(--a-1) 0; border: 0; background: transparent; color: var(--r-metin-2); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-yari); text-decoration: none; } .alt-sekme .bi { font-size: var(--yb-20); line-height: 1; } .alt-sekme[aria-current="page"] { color: var(--r-metin); } .alt-sekme[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; border-radius: 0 0 3px 3px; background: var(--r-altin); } .alt-sekme .menu-rozet { position: absolute; top: var(--a-1); left: calc(50% + 6px); min-width: 18px; padding: 0 var(--a-1); } .bildirim-alani { bottom: 76px; } html { scroll-padding-bottom: calc(60px + 72px + env(safe-area-inset-bottom)); } [data-dokun] { --denetim-y: var(--dokun-y); } [data-dokun] .segment-oge { min-height: calc(var(--dokun-y) - 6px); } [data-dokun] .btn-sm { min-height: var(--dokun-y); } [data-dokun] .form-check-input { width: 24px; height: 24px; } .form-alt-cubuk { bottom: calc(60px + env(safe-area-inset-bottom)); } .toplu-cubuk { bottom: calc(60px + var(--a-3) + env(safe-area-inset-bottom)); } .yan-izgara { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767.98px) { .sayfa-baslik { flex-direction: column; gap: var(--a-3); } .sayfa-eylemler { flex-wrap: wrap; width: 100%; } .sayfa-eylemler > .btn-group { flex: 1 1 auto; } .sayfa-eylemler > .btn { flex: 1 1 0; } .ust-ara { width: auto; flex: 1 1 auto; } .ust-ara kbd { display: none; } .suzgec { padding: var(--a-3); } .suzgec-ara { flex: 1 1 100%; max-width: none; } .suzgec-secim { flex: 1 1 calc(50% - var(--a-2)); max-width: none; min-width: 0; } .segment { flex-wrap: wrap; max-width: 100%; } .segment--izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .segment--izgara-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } .segment--izgara .segment-oge, .segment--izgara-3 .segment-oge { justify-content: center; min-height: var(--dokun-y); white-space: normal; text-align: center; } /* Tablo karta döner: her satır bir kart; hücreler data-baslik etiketiyle */ .tablo, .tablo tbody, .tablo tr, .tablo tfoot { display: block; width: 100%; } .tablo colgroup, .tablo thead { display: none; } .tablo tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--a-3) var(--a-4); padding: var(--a-4); border-bottom: 1px solid var(--r-cizgi); } .tablo tbody tr:last-child { border-bottom: 0; } .tablo td { display: block; width: 100%; height: auto; padding: 0; border: 0; overflow: visible; } .tablo td[data-kart="tam"] { grid-column: 1 / -1; } .tablo td[data-kart="gizle"] { display: none; } .tablo td[data-baslik]::before { content: attr(data-baslik); display: block; margin-bottom: 2px; color: var(--r-metin-3); font-size: var(--yb-12); line-height: var(--ys-12); font-weight: var(--ya-orta); } .tablo td[data-kart="tam"]::before, .tablo td[data-kart="eylem"]::before { content: none; } .tablo td[data-kart="eylem"] { grid-column: 1 / -1; justify-self: end; width: auto; } .tablo .hiza-sag, .hucre-sayi, .hucre-sayi > .hucre-alt { text-align: left; } .tablo tfoot td { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-4); height: auto; padding: var(--a-3) var(--a-4); } .tablo tfoot td:empty { display: none; } .tablo tbody tr[aria-selected="true"] td:first-child { box-shadow: none; } .tablo tbody tr[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--r-altin); background: var(--r-altin-sis); } .tablo tbody tr[aria-selected="true"] td { background: transparent; } .izgara-girdi { border-color: var(--r-cizgi); background: var(--r-yuzey); text-align: left; } .izgara-kilit { text-align: left; padding: 0; } .izgara-hata { text-align: left; } .akis-lejant { grid-template-columns: minmax(0, 1fr); } .ikili-izgara, .ikili-izgara--genis { grid-template-columns: minmax(0, 1fr); } .giris-kart { padding: var(--a-6) var(--a-5); } .pano { flex-direction: column; } .pano-kolon, .pano-kolon[data-katli] { flex: 1 1 auto; } .pano-kolon-govde { max-height: none; } .alan-izgara { grid-template-columns: minmax(0, 1fr); } .tanim-listesi, .alan-listesi { grid-template-columns: minmax(0, 1fr); gap: 0 var(--a-4); } .tanim-listesi dd, .alan-listesi dd { margin-bottom: var(--a-2); } } } @layer ekran { @media (min-width: 1200px) { .uc-sutun { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 992px) { .etiket-yerlesim { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); } .etiket-yerlesim--liste { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } } @media (max-width: 1365.98px) { .pano-kart-ust > .siluet { display: none; } } @media (max-width: 1439.98px) { .pc-tablo col.s-pafta, .pc-tablo .s-pafta { display: none; } .pc-tablo col.s-is { width: 168px; } /* parça no (00-481-P001) 1280'de bölünmeden sığar */ } @media (max-width: 1279.98px) { .ie-tablo col.s-tas, .ie-tablo .s-tas { display: none; } .ie-tablo col.s-teslim { width: 13%; } .klasor-sayilar { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 1099.98px) { .pc-kap { overflow-x: auto; } .pc-tablo { min-width: 900px; } .pc-tablo th { position: static; } .klasor-ozet-izgara { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 991.98px) { .tm-orta { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767.98px) { .ie-tablo tbody tr { grid-template-columns: minmax(0, 1fr) auto; } .ie-tablo td.s-siparis { padding-right: var(--a-12); } .ie-tablo td.s-teslim { text-align: right; } .pc-kap { overflow-x: visible; } .pc-tablo { min-width: 0; } .pc-tablo tbody tr { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; } .pc-tablo td.s-parca, .pc-tablo td.s-is, .pc-tablo td.s-durum { grid-column: 1 / -1; } .pc-tablo tbody td.s-parca { padding-right: var(--a-12); } .pc-tablo td.s-uretildi, .pc-tablo td.s-m2 { grid-column: span 2; } .klasor-ust { grid-template-columns: minmax(0, 1fr); } .klasor-sayilar { grid-template-columns: repeat(3, minmax(0, 1fr)); } .klasor-arac .suzgec-ara { flex: 1 1 100%; } .tm-serit { grid-template-columns: minmax(0, 1fr) auto; padding: var(--a-3) var(--a-4); } .tm-okut { grid-column: 1 / -1; grid-row: 2; } .tm-kart, .tm-bolum { padding-left: var(--a-4); padding-right: var(--a-4); } .tm-parca-no { font-size: var(--yb-32); line-height: var(--ys-32); } .tm-yonerge { margin-top: var(--a-8); font-size: var(--yb-24); line-height: var(--ys-24); } .tm-bolum > h1 { font-size: var(--yb-24); line-height: var(--ys-24); } .tm-dosemeler { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tm-doseme { min-height: 72px; font-size: var(--yb-16); line-height: var(--ys-16); } .tm-adimlar { padding: var(--a-4) var(--a-4) 0; overflow-x: auto; justify-content: flex-start; } .tm-olcu-deger { font-size: var(--yb-20); line-height: var(--ys-20); } .tm-olculer { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-2); } .tm-olcu { padding: var(--a-2) var(--a-3); } .hesap-tablo tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--a-2); } .tam-pencere-govde { padding: var(--a-3); } .hesap-tablo tbody td[data-baslik="Kenar"], .hesap-tablo tbody td[data-baslik="Evye ya da kesim"], .hesap-tablo tbody td[data-baslik="Malzeme"], .hesap-tablo tbody td[data-baslik="Cinsi"], .hesap-tablo tbody td[data-baslik="Ürün cinsi"], .hesap-tablo tbody td.revizyon-parca { grid-column: 1 / -1; } .kase-alan--genis { grid-column: 1 / -1; } } }