/* =========================================================
Debriyo — Panel Kabuğu
Masaüstü uygulaması hissi veren sekmeli arayüz
========================================================= */
/* ---------------------------------------------------------
1. TASARIM JETONLARI
--------------------------------------------------------- */
:root{
--sb-w: 262px;
--sb-w-rail: 70px;
--topbar-h: 58px;
--tabstrip-h: 42px;
--statusbar-h: 28px;
--ui-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
--display-font: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;
--mono-font: "JetBrains Mono", "Consolas", ui-monospace, monospace;
/* marka */
--accent: #C8440E;
--accent-600: #B23B0B;
--accent-ink: #C8440E;
--accent-soft: rgba(240,90,26,.10);
--accent-soft-2: rgba(240,90,26,.18);
--warn: #f59e0b;
--maroon: #9f1239;
--danger: #e5484d;
--ok: #16a34a;
/* sidebar — her iki temada da koyu kalır */
--sb-bg-a: #0c1222;
--sb-bg-b: #090e1b;
--sb-line: rgba(255,255,255,.065);
--sb-text: #9aa7c2;
--sb-text-dim: rgba(255,255,255,.38);
--sb-text-strong: #f2f5fb;
--sb-hover: rgba(255,255,255,.055);
--r-sm: 8px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 18px;
/* TİPOGRAFİ ÖLÇEĞİ
Panelde 18 farklı satır içi font-size birikmişti ama gerçekte
beş değer bütün işi yapıyordu. Ölçek artık yazılı: yeni ekranlarda
satır içi px yerine .fs-* sınıflarını kullan. */
--fs-xxs: 10px; /* rozet içi, çok ikincil bilgi */
--fs-xs: 10.5px; /* kod/meta satırı */
--fs-sm: 11.5px; /* yardım metni, kutu etiketi */
--fs-md: 12.5px; /* gövde — en sık kullanılan */
--fs-lg: 13.5px; /* kart başlığı */
--fs-xl: 19px; /* KPI sayısı */
/* VERİ GÖRSELLEŞTİRME PALETİ
------------------------------------------------------------------
Bu üç renk GÖZLE seçilmedi, ölçüldü. Her aday OKLab/OKLCH üzerinden
beş kontrolden geçirildi: açıklık bandı, kroma tabanı, renk körlüğü
altında komşu ayrımı (Machado 2009, protan + deutan), normal görüş
tabanı ve yüzeye karşı kontrast.
Sıra SABİT ve asla döndürülmez: dv-1 her zaman birinci seri. Seri
sırası renge göre değişirse aynı grafik iki ekranda iki farklı şey
anlatır.
Ölçüm (light tema, yüzey #ffffff):
dv-1 #3b6ef6 L .583 C .211 dv-1 <-> dv-2 ΔE 32,4 (protan)
dv-2 #d97706 L .666 C .157 dv-2 <-> dv-3 ΔE 19,0 (protan)
dv-3 #0891b2 L .609 C .111 normal görüş en kötü ΔE 27,2
Üçü de iki temada tek uyarı almadan geçiyor.
Eşikler: renk körlüğü ΔE >= 8, normal görüş >= 15, kontrast >= 3:1.
ELENENLER — tekrar denemeye değmez:
mavi + mor (#C8440E / #8b5cf6) ΔE 1,0 — protan altında aynı renk
yeşil+kırmızı (#16a34a / #e5484d) ΔE 1,8 — deutan altında aynı renk
Bu yüzden bir grafikte yeşil ile kırmızı KOMŞU OLAMAZ.
--warn / --danger / --ok DURUM renkleridir, seri rengi değildir.
Durum rengi her zaman ikon + etiketle gelir; tek başına anlam taşımaz.
------------------------------------------------------------------ */
--dv-1: #3b6ef6;
--dv-2: #d97706;
--dv-3: #0891b2;
}
[data-bs-theme="light"]{
--app-bg: #eef1f6;
--surface: #ffffff;
--surface-2: #f6f8fc;
--surface-3: #eef2f8;
--border: rgba(16,24,40,.09);
--border-strong: rgba(16,24,40,.15);
--text: #121926;
--text-soft: #3d485c;
--text-muted: #6b7789;
--strip-bg: #e2e7f0;
--sh-1: 0 1px 2px rgba(16,24,40,.05);
--sh-2: 0 1px 2px rgba(16,24,40,.05), 0 6px 16px -6px rgba(16,24,40,.10);
--sh-3: 0 18px 44px -12px rgba(16,24,40,.26), 0 2px 8px rgba(16,24,40,.07);
--ring: 0 0 0 3px rgba(240,90,26,.16);
}
[data-bs-theme="dark"]{
--accent-ink: #FF8A5B;
--accent-soft: rgba(255,138,91,.13);
--accent-soft-2: rgba(255,138,91,.22);
--app-bg: #070b14;
--surface: #0f1524;
--surface-2: #151d30;
--surface-3: #1b243a;
--border: rgba(255,255,255,.075);
--border-strong: rgba(255,255,255,.14);
--text: #e7ecf7;
--text-soft: #b9c3d8;
--text-muted: #8491ac;
--strip-bg: #121a2c;
/* Karanlık tema ayrı ADIM seçer, açık temanın renklerini çevirmez.
Koyu bandın sınırları daha dar (L .48–.67) ve #C8440E (L .583) tam
içinde kalıyor — ama koyu yüzeyde biraz daha parlak adım gerekiyor.
Ölçüm (dark, yüzey #0f1524): dv-1 #4d7df7 L .621, dv-1<->dv-2
ΔE 30,8 (protan), üçü de uyarısız geçti. Turuncu ve camgöbeği
iki bandın kesişiminde durduğu için değişmiyor. */
--dv-1: #4d7df7;
--sh-1: 0 1px 2px rgba(0,0,0,.4);
--sh-2: 0 1px 2px rgba(0,0,0,.35), 0 8px 20px -8px rgba(0,0,0,.6);
--sh-3: 0 22px 50px -14px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.4);
--ring: 0 0 0 3px rgba(255,138,91,.22);
}
*{ -webkit-tap-highlight-color: transparent; }
*:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: 6px; }
html, body{ height:100%; }
body{
margin:0;
font-family: var(--ui-font);
font-size: 13.5px;
font-weight: 450;
line-height: 1.5;
letter-spacing: -.004em;
background: var(--app-bg);
color: var(--text);
overflow: hidden; /* masaüstü uygulaması gibi: sayfa kaymaz */
overscroll-behavior: none;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "cv02","cv03","cv04","cv11";
}
h1,h2,h3,h4,h5,h6,.display-font{
font-family: var(--display-font);
letter-spacing: -.02em;
font-weight: 700;
}
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
background: color-mix(in srgb, var(--text-muted) 28%, transparent);
border-radius: 99px; border:3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{ background: color-mix(in srgb, var(--text-muted) 52%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-corner{ background: transparent; }
::selection{ background: var(--accent-soft-2); color: var(--text); }
/* ---------------------------------------------------------
2. BOOTSTRAP'I MARKAYA UYARLA
--------------------------------------------------------- */
:root{
--bs-body-font-family: var(--ui-font);
--bs-body-font-size: 13.5px;
--bs-border-radius: var(--r-md);
--bs-border-radius-sm: var(--r-sm);
--bs-border-color: var(--border);
--bs-primary: #C8440E;
--bs-primary-rgb: 200,68,14;
--bs-link-color: var(--accent-ink);
--bs-link-hover-color: var(--accent-600);
--bs-primary-bg-subtle: var(--accent-soft);
--bs-primary-border-subtle: var(--accent-soft-2);
--bs-body-color: var(--text);
--bs-secondary-color: var(--text-muted);
--bs-emphasis-color: var(--text);
}
/* --- butonlar --- */
.btn{
--bs-btn-border-radius: 9px;
font-weight: 550;
letter-spacing: -.005em;
transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
}
.btn:active{ transform: translateY(.5px); }
.btn-sm{ --bs-btn-padding-y:.34rem; --bs-btn-padding-x:.72rem; --bs-btn-font-size:12.5px; --bs-btn-border-radius:8px; }
.btn i{ vertical-align:-.06em; }
.btn-primary{
--bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
--bs-btn-hover-bg: var(--accent-600); --bs-btn-hover-border-color: var(--accent-600);
--bs-btn-active-bg: var(--accent-600); --bs-btn-active-border-color: var(--accent-600);
--bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent);
box-shadow: 0 1px 2px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-primary:hover{ box-shadow: 0 4px 14px -4px rgba(240,90,26,.6), inset 0 1px 0 rgba(255,255,255,.16); }
.btn-outline-secondary{
--bs-btn-color: var(--text-soft);
--bs-btn-border-color: var(--border-strong);
--bs-btn-bg: var(--surface);
--bs-btn-hover-color: var(--text);
--bs-btn-hover-bg: var(--surface-2);
--bs-btn-hover-border-color: var(--border-strong);
--bs-btn-active-color: var(--text);
--bs-btn-active-bg: var(--surface-3);
--bs-btn-active-border-color: var(--border-strong);
box-shadow: var(--sh-1);
}
.btn-outline-primary{
--bs-btn-color: var(--accent-ink);
--bs-btn-border-color: var(--accent-soft-2);
--bs-btn-bg: var(--accent-soft);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--accent);
--bs-btn-hover-border-color: var(--accent);
--bs-btn-active-bg: var(--accent-600);
--bs-btn-active-border-color: var(--accent-600);
}
.btn-outline-warning{
--bs-btn-color: var(--warn);
--bs-btn-border-color: rgba(245,158,11,.3);
--bs-btn-bg: rgba(245,158,11,.08);
--bs-btn-hover-color:#fff; --bs-btn-hover-bg: var(--warn); --bs-btn-hover-border-color: var(--warn);
}
.btn-warning{ --bs-btn-bg: var(--warn); --bs-btn-border-color: var(--warn); --bs-btn-color:#fff;
--bs-btn-hover-bg:#e08c06; --bs-btn-hover-border-color:#e08c06; --bs-btn-hover-color:#fff; }
.btn-link{ text-decoration:none; }
.btn-group > .btn{ box-shadow:none; }
.btn-group .btn-outline-secondary.active{ background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft-2); }
/* --- form alanları --- */
.form-control, .form-select{
background-color: var(--surface);
border-color: var(--border-strong);
border-radius: var(--r-sm);
color: var(--text);
font-size: 13px;
box-shadow: var(--sh-1);
transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control::placeholder{ color: color-mix(in srgb, var(--text-muted) 75%, transparent); }
.form-control:focus, .form-select:focus{
background-color: var(--surface);
border-color: var(--accent);
box-shadow: var(--ring);
color: var(--text);
}
.form-control-sm, .form-select-sm{ font-size:12.5px; padding:.36rem .6rem; border-radius: var(--r-sm); }
.form-select{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7789' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-label{
font-size: 11px; font-weight: 600;
letter-spacing: .035em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 5px;
}
.form-text{ color: var(--text-muted); }
.form-check-input{ border-color: var(--border-strong); background-color: var(--surface); }
.form-check-input:checked{ background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus{ border-color: var(--accent); box-shadow: var(--ring); }
.form-check-label{ color: var(--text-soft); }
.input-group-text{
background: var(--surface-2); border-color: var(--border-strong);
color: var(--text-muted); font-size:12.5px; border-radius: var(--r-sm);
}
.input-group .btn{ border-color: var(--border-strong); }
/* --- açılır menüler --- */
.dropdown-menu{
--bs-dropdown-bg: var(--surface);
--bs-dropdown-border-color: var(--border);
--bs-dropdown-border-radius: var(--r-lg);
--bs-dropdown-link-color: var(--text-soft);
--bs-dropdown-link-hover-bg: var(--accent-soft);
--bs-dropdown-link-hover-color: var(--accent-ink);
--bs-dropdown-link-active-bg: var(--accent-soft);
--bs-dropdown-link-active-color: var(--accent-ink);
--bs-dropdown-font-size: 13px;
--bs-dropdown-padding-x: 5px;
--bs-dropdown-padding-y: 5px;
--bs-dropdown-item-padding-y: .42rem;
box-shadow: var(--sh-3);
backdrop-filter: blur(12px);
}
.dropdown-item{ border-radius: var(--r-sm); font-weight: 500; }
.dropdown-divider{ border-color: var(--border); }
kbd{
font-family: var(--ui-font);
font-size: 10px; font-weight: 600;
padding: 2px 5px; border-radius: 5px;
background: var(--surface-3);
border: 1px solid var(--border);
border-bottom-width: 2px;
color: var(--text-muted);
line-height: 1;
}
code{ font-family: var(--mono-font); font-size: .88em; color: var(--accent-ink); }
hr{ border-color: var(--border); opacity:1; }
/* ---------------------------------------------------------
3. KABUK
--------------------------------------------------------- */
.app-shell{
display:flex;
height:100dvh;
width:100%;
overflow:hidden;
background: var(--app-bg);
}
.app-main{
flex:1 1 auto; min-width:0;
display:flex; flex-direction:column; overflow:hidden;
}
/* ---------------------------------------------------------
4. SIDEBAR
--------------------------------------------------------- */
.sidebar{
position:relative;
flex: 0 0 var(--sb-w);
width: var(--sb-w);
background:
radial-gradient(130% 55% at 0% 0%, rgba(240,90,26,.16), transparent 62%),
linear-gradient(180deg, var(--sb-bg-a), var(--sb-bg-b));
color: var(--sb-text);
display:flex; flex-direction:column; overflow:hidden;
transition: flex-basis .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1);
z-index: 1045;
}
.sidebar::after{
content:""; position:absolute; inset:0 0 0 auto; width:1px;
background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
pointer-events:none;
}
.app-shell.rail .sidebar{ flex-basis: var(--sb-w-rail); width: var(--sb-w-rail); }
.sidebar-brand{
height: var(--topbar-h); flex:0 0 var(--topbar-h);
display:flex; align-items:center; gap:11px;
padding:0 14px;
border-bottom:1px solid var(--sb-line);
position:relative;
}
.brand-mark{
width:34px; height:34px; flex:0 0 34px;
display:grid; place-items:center;
border-radius: 10px;
background: linear-gradient(140deg, #F05A1A, var(--accent) 55%, #A8370A);
color:#fff; font-size:16px;
box-shadow: 0 6px 16px -4px rgba(200,68,14,.78), inset 0 1px 0 rgba(255,255,255,.3);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; overflow:hidden; }
.brand-text strong{
font-family: var(--display-font);
color: var(--sb-text-strong);
font-size:13.5px; font-weight:800; letter-spacing:.1em;
}
.brand-text small{ color: var(--sb-text-dim); font-size:9px; font-weight:600; letter-spacing:.16em; }
.btn-rail{
position:absolute; right:10px;
width:22px; height:22px;
border:1px solid var(--sb-line);
background: rgba(255,255,255,.04);
color: var(--sb-text);
border-radius:7px;
display:grid; place-items:center;
font-size:10px; transition:.16s;
}
.btn-rail:hover{ background: rgba(255,255,255,.1); color:#fff; }
.app-shell.rail .btn-rail i{ transform: rotate(180deg); }
.sidebar-company{
display:flex; align-items:center; gap:10px;
margin:12px 12px 6px; padding:9px 11px;
background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
border:1px solid var(--sb-line);
border-radius: var(--r-md);
cursor:pointer; transition:.16s;
}
.sidebar-company:hover{ border-color: rgba(255,255,255,.14); }
.company-avatar{
width:29px; height:29px; flex:0 0 29px;
border-radius:8px; display:grid; place-items:center;
background: linear-gradient(140deg, rgba(255,138,91,.35), rgba(240,90,26,.18));
color:#a9c4ff; font-weight:700; font-size:10.5px;
border:1px solid rgba(255,255,255,.08);
}
.company-info{ display:flex; flex-direction:column; line-height:1.3; overflow:hidden; }
.company-name{ color:#fff; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.company-period{ font-size:10.5px; color: var(--sb-text-dim); font-variant-numeric: tabular-nums; }
.sidebar-nav{
flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
padding: 6px 10px 14px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.14) transparent;
}
.sidebar-nav::-webkit-scrollbar{ width:8px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-width:2px; background-clip: padding-box; }
.nav-caption{
font-size:9.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
color: var(--sb-text-dim);
padding: 16px 10px 7px;
white-space:nowrap;
}
.nav-item{ position:relative; }
.nav-link-x{
position:relative;
width:100%;
display:flex; align-items:center; gap:11px;
padding: 8.5px 11px;
border:0; background:transparent;
color: var(--sb-text);
border-radius: var(--r-md);
font-size: 13px; font-weight: 500;
text-align:left; white-space:nowrap;
transition: background .15s, color .15s;
}
.nav-link-x > i:first-child{ font-size:15.5px; width:19px; flex:0 0 19px; text-align:center; opacity:.9; }
.nav-link-x .nav-label{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; }
.nav-link-x .caret{ font-size:9px; opacity:.45; transition: transform .2s cubic-bezier(.4,0,.2,1); }
.nav-link-x:hover{ background: var(--sb-hover); color:#eef2fb; }
.nav-link-x.active{
background: linear-gradient(90deg, rgba(200,68,14,.95), rgba(200,68,14,.78));
color:#fff; font-weight:600;
box-shadow: 0 6px 18px -8px rgba(200,68,14,.95), inset 0 1px 0 rgba(255,255,255,.14);
}
.nav-link-x.active > i:first-child{ opacity:1; }
.nav-link-x.active::before{
content:""; position:absolute; left:-10px; top:50%; transform: translateY(-50%);
width:3px; height:18px; border-radius:0 3px 3px 0; background:#fff;
}
.nav-item.open > .nav-link-x > .caret{ transform: rotate(90deg); opacity:.8; }
.nav-item.open > .nav-link-x{ color:#eef2fb; background: rgba(255,255,255,.035); }
.nav-badge{
font-size:9.5px; font-weight:700; line-height:1.6;
min-width:18px; text-align:center;
padding:0 5px; border-radius:20px;
background: var(--warn); color:#271603;
font-variant-numeric: tabular-nums;
}
.nav-sub{
display:none;
margin: 3px 0 8px 22px;
padding-left: 11px;
border-left: 1px solid var(--sb-line);
}
.nav-item.open > .nav-sub{ display:block; animation: subIn .18s ease; }
@keyframes subIn{ from{ opacity:0; transform: translateY(-3px);} to{ opacity:1; transform:none; } }
.nav-sub .nav-link-x{ font-size:12.5px; padding:6.5px 10px; gap:10px; color: color-mix(in srgb, var(--sb-text) 88%, transparent); }
.nav-sub .nav-link-x > i:first-child{ font-size:5px; width:8px; flex:0 0 8px; opacity:.4; }
.nav-sub .nav-link-x:hover > i:first-child{ opacity:.9; }
.nav-sub .nav-link-x.active{
background: var(--sb-hover); color:#fff; box-shadow:none;
}
.nav-sub .nav-link-x.active > i:first-child{ color: var(--accent-ink); opacity:1; }
.nav-sub .nav-link-x.active::before{ left:-12px; width:2px; height:14px; background: var(--accent-ink); }
.sidebar-foot{
flex:0 0 auto;
border-top:1px solid var(--sb-line);
padding:9px 10px; display:flex; gap:7px;
}
.sf-btn{
flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
padding:7px 8px; border:1px solid transparent; border-radius: var(--r-sm);
background: rgba(255,255,255,.035); color: var(--sb-text);
font-size:11.5px; font-weight:500; white-space:nowrap; transition:.15s;
}
.sf-btn:hover{ background: rgba(255,255,255,.08); color:#fff; border-color: var(--sb-line); }
/* --- daraltılmış (rail) mod --- */
.app-shell.rail .brand-text,
.app-shell.rail .company-info,
.app-shell.rail .nav-label,
.app-shell.rail .caret,
.app-shell.rail .nav-badge,
.app-shell.rail .sf-btn span{ display:none; }
.app-shell.rail .sidebar-brand{ padding:0 12px; justify-content:center; }
.app-shell.rail .btn-rail{ display:none; }
.app-shell.rail .sidebar-company{ justify-content:center; padding:8px; margin:12px 10px 6px; }
.app-shell.rail .nav-link-x{ justify-content:center; padding:10px 0; }
.app-shell.rail .nav-link-x.active::before{ display:none; }
.app-shell.rail .nav-caption{ height:1px; padding:0; margin:12px 14px; background: var(--sb-line); overflow:hidden; color:transparent; }
.app-shell.rail .nav-sub{ display:none !important; }
.app-shell.rail .sidebar-nav{ padding:6px 11px; }
.app-shell.rail .sidebar-foot{ flex-direction:column; }
.app-shell.rail .nav-link-x[data-title]::after{
content: attr(data-title);
position:absolute; left: calc(100% + 10px); top:50%;
transform: translateY(-50%) translateX(-4px);
background: #1a2238; color:#fff;
padding:6px 11px; border-radius: var(--r-sm);
font-size:12px; font-weight:500; white-space:nowrap;
border:1px solid rgba(255,255,255,.08);
box-shadow: var(--sh-3);
opacity:0; pointer-events:none; transition:.14s; z-index:60;
}
.app-shell.rail .nav-link-x:hover::after{ opacity:1; transform: translateY(-50%) translateX(0); }
.sidebar-backdrop{ display:none; }
/* ---------------------------------------------------------
5. ÜST BAR
--------------------------------------------------------- */
.topbar{
flex:0 0 var(--topbar-h); height: var(--topbar-h);
display:flex; align-items:center; gap:10px;
padding: 0 14px;
background: color-mix(in srgb, var(--surface) 88%, transparent);
backdrop-filter: saturate(1.4) blur(10px);
border-bottom: 1px solid var(--border);
z-index: 20;
}
.icon-btn{
position:relative;
width:34px; height:34px; flex:0 0 34px;
display:grid; place-items:center;
border:1px solid transparent; border-radius: var(--r-sm);
background:transparent; color: var(--text-muted);
font-size:15px; transition:.15s;
}
.icon-btn:hover{ background: var(--surface-2); color: var(--text); border-color: var(--border); }
.icon-btn:active{ transform: translateY(.5px); }
.icon-btn .dot{
position:absolute; top:6px; right:7px;
width:7px; height:7px; border-radius:50%;
background: var(--warn); border:2px solid var(--surface);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 28%, transparent);
}
.global-search{
flex: 1 1 400px; max-width: 480px;
display:flex; align-items:center; gap:9px;
height:36px; padding: 0 6px 0 11px;
background: var(--surface-2);
border:1px solid var(--border);
border-radius: 10px;
color: var(--text-muted);
transition: border-color .15s, box-shadow .15s, background .15s;
}
.global-search:hover{ border-color: var(--border-strong); }
.global-search:focus-within{ background: var(--surface); border-color: var(--accent); box-shadow: var(--ring); }
.global-search > i{ font-size:14px; }
.global-search input{
flex:1; min-width:0; border:0; background:transparent; outline:0;
color: var(--text); font-size:12.8px; font-family: var(--ui-font);
}
.global-search input:focus{ box-shadow:none; }
/* PLAKA OKU — üst bardaki birincil eylem.
Simge düğme değil etiketli düğme: atölyenin günlük akışı buradan
başlıyor ve tarama simgesi tek başına "ne okunuyor" sorusunu
bıraktığı için etiket geniş ekranda açık duruyor. Vurgulu ama
dolgulu değil; üst bar bir düğme tarlasına dönmesin. */
.btn-plate{
display:inline-flex; align-items:center; gap:7px;
height:34px; padding:0 12px;
border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
border-radius: var(--r-sm);
background: var(--accent-soft);
color: var(--accent-ink);
font-size: var(--fs-md); font-weight:600;
white-space:nowrap;
transition:.15s;
}
.btn-plate:hover{
background: var(--accent-soft-2);
border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn-plate:active{ transform: translateY(.5px); }
.btn-plate .bi{ font-size:16px; }
/* Aramanın hemen sağındaki Plaka Sorgula — arama kutusuyla aynı boy */
.btn-plate-search{ height:36px; flex:0 0 auto; white-space:nowrap; }
@media (max-width: 991.98px){ .btn-plate-search{ height:34px; padding:0 10px; } }
.topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:3px; }
.topbar-actions::before{
content:""; width:1px; height:22px; margin:0 7px 0 3px;
background: var(--border);
}
.user-chip{
display:flex; align-items:center; gap:9px;
padding:3px 10px 3px 3px;
border:1px solid transparent; border-radius: 30px;
background: var(--surface-2); color: var(--text);
transition:.15s; margin-left:4px;
}
.user-chip:hover{ border-color: var(--border-strong); background: var(--surface-3); }
.user-chip > .bi-chevron-down{ font-size:9px; color: var(--text-muted); }
.user-avatar{
width:28px; height:28px; border-radius:50%;
display:grid; place-items:center;
background: linear-gradient(140deg, #F05A1A, var(--accent) 60%, #A8370A);
color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.02em;
box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.user-meta{ flex-direction:column; line-height:1.2; text-align:left; }
.user-name{ font-size:12.5px; font-weight:600; }
.user-role{ font-size:10.5px; color: var(--text-muted); }
/* ---------------------------------------------------------
6. SEKME ŞERİDİ (tarayıcı sekmesi davranışı)
--------------------------------------------------------- */
.tabstrip{
position:relative;
flex: 0 0 var(--tabstrip-h); height: var(--tabstrip-h);
display:flex; align-items:flex-end;
gap:2px; padding: 0 7px;
background: var(--strip-bg);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--border) 60%, transparent);
user-select:none; z-index: 15;
}
.strip-btn{
flex:0 0 auto;
width:27px; height:27px; margin-bottom:6px;
display:grid; place-items:center;
border:0; border-radius: 7px;
background:transparent; color: var(--text-muted);
font-size:12.5px; transition:.14s;
}
.strip-btn:hover{ background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); }
.strip-btn:disabled{ opacity:.25; pointer-events:none; }
.strip-btn-accent{ color: var(--accent-ink); }
.strip-btn-accent:hover{ background: var(--accent-soft); }
/* Yenile düğmesi + senkron göstergesi.
Görülmemiş veri varken köşesine nokta geliyor; nokta RENK TEK
BAŞINA anlam taşımasın diye ayrıca başlık metni de değişiyor
(bkz. tabs.js updateSyncHint). */
.strip-btn-sync{ position:relative; }
.strip-btn-sync::after{
content:''; position:absolute; top:3px; right:3px;
width:6px; height:6px; border-radius:50%;
background: var(--accent-ink);
box-shadow: 0 0 0 2px var(--strip-bg);
opacity:0; transform:scale(.4);
transition: opacity .18s, transform .18s;
}
.strip-btn-sync.has-fresh{ color: var(--accent-ink); }
.strip-btn-sync.has-fresh::after{ opacity:1; transform:scale(1); }
.strip-btn-sync:active > .bi{ transform: rotate(-180deg); transition: transform .3s; }
/* Bayat sekme: ikonu soluyor, böylece "bu sekme açılınca tazelenecek"
bilgisi kirli noktasıyla karışmıyor (kirli = sarı nokta). */
.tab.stale:not(.active) > i.tab-icon{ opacity:.45; }
.tabstrip-rail{
flex:1 1 auto; min-width:0;
overflow-x:auto; overflow-y:hidden;
scrollbar-width:none; height:100%;
display:flex; align-items:flex-end;
}
.tabstrip-rail::-webkit-scrollbar{ display:none; }
.tabstrip-list{ display:flex; align-items:flex-end; gap:1px; height:100%; padding-top:6px; }
.tab{
position:relative;
flex: 0 0 auto;
display:flex; align-items:center; gap:8px;
height: calc(var(--tabstrip-h) - 6px);
max-width: 210px; min-width: 44px;
padding: 0 7px 0 12px;
border-radius: 11px 11px 0 0;
background: transparent;
color: var(--text-muted);
font-size: 12.6px; font-weight: 500;
cursor: default; white-space:nowrap;
transition: background .14s, color .14s;
}
.tab:not(.active):hover{
background: color-mix(in srgb, var(--app-bg) 55%, transparent);
color: var(--text-soft);
}
/* sekmeler arası ince ayraç */
.tab:not(.active)::before{
content:""; position:absolute; left:-1px; top:9px; bottom:9px; width:1px;
background: color-mix(in srgb, var(--text-muted) 24%, transparent);
}
.tab:not(.active):first-child::before,
.tab:not(.active):hover::before,
.tab.active + .tab:not(.active)::before,
.tab:hover + .tab:not(.active)::before{ opacity:0; }
/* aktif sekme: içerik alanıyla birleşen chrome-tarzı omuzlar */
.tab.active{
background: var(--app-bg);
color: var(--text);
font-weight: 600;
box-shadow: inset 0 2px 0 0 var(--accent);
z-index:2;
}
.tab.active::before,
.tab.active::after{
content:""; position:absolute; bottom:0;
width:12px; height:12px;
background: var(--app-bg);
opacity:1; pointer-events:none;
}
.tab.active::before{
left:-12px; top:auto;
-webkit-mask-image: radial-gradient(circle 12px at 0 0, transparent 0 12px, #000 12.2px);
mask-image: radial-gradient(circle 12px at 0 0, transparent 0 12px, #000 12.2px);
}
.tab.active::after{
right:-12px;
-webkit-mask-image: radial-gradient(circle 12px at 100% 0, transparent 0 12px, #000 12.2px);
mask-image: radial-gradient(circle 12px at 100% 0, transparent 0 12px, #000 12.2px);
}
.tab.dragging{ opacity:.4; }
.tab.drop-before{ box-shadow: inset 3px 0 0 var(--accent); }
.tab.drop-after{ box-shadow: inset -3px 0 0 var(--accent); }
.tab > i.tab-icon{ font-size:13.5px; flex:0 0 auto; opacity:.7; }
.tab.active > i.tab-icon{ color: var(--accent-ink); opacity:1; }
.tab .tab-title{ overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; }
.tab .tab-dirty{
width:6px; height:6px; border-radius:50%; background: var(--warn); flex:0 0 auto; display:none;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 25%, transparent);
}
.tab.dirty .tab-dirty{ display:block; }
.tab .tab-close{
flex:0 0 auto;
width:19px; height:19px; border:0; border-radius: 6px;
background:transparent; color:inherit;
display:grid; place-items:center; font-size:9.5px;
opacity:.5; transition:.13s;
}
.tab .tab-close:hover{ background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); opacity:1; }
.tab.pinned .tab-close{ display:none; }
.tab.pinned{ padding-right:12px; }
.tab.pinned > i.tab-icon{ color: var(--accent-ink); opacity:.9; }
/* ---------------------------------------------------------
7. SEKME İÇERİĞİ
--------------------------------------------------------- */
.tab-content-area{
flex:1 1 auto; position:relative; min-height:0;
background: var(--app-bg);
}
.tab-pane-x{
position:absolute; inset:0;
overflow-y:auto; overflow-x:hidden;
display:none;
padding: 18px 20px 24px;
background:
radial-gradient(110% 40% at 50% 0%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 70%),
var(--app-bg);
-webkit-overflow-scrolling: touch;
}
.tab-pane-x.active{ display:block; animation: paneIn .18s ease; }
@keyframes paneIn{ from{ opacity:0; transform: translateY(4px);} to{ opacity:1; transform:none; } }
.tab-loading{ position:absolute; inset:0; display:grid; place-items:center; color: var(--text-muted); }
.tab-empty{
position:absolute; inset:0;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:6px; color: var(--text-muted); text-align:center; padding:20px;
background: var(--app-bg);
}
/* Büyük ikon yalnız dairenin içindeki: eskiden ".tab-empty i" düğmedeki
ikonu da 42px ve soluk yapıyordu (kullanıcı: "orantısız duruyor") */
.tab-empty-ic{
width:76px; height:76px; margin-bottom:14px; border-radius:50%;
display:grid; place-items:center; font-size:32px; line-height:1;
color: var(--accent); background: var(--accent-soft);
box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 6%, transparent);
}
.tab-empty-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.tab-empty-actions .btn{ display:inline-flex; align-items:center; padding:8px 16px; font-size:13.5px; font-weight:600; border-radius:10px; }
.tab-empty-actions .btn i{ font-size:15px; line-height:1; }
.tab-empty h5{ margin:0 0 6px; color: var(--text); font-size:16px; font-weight:700; }
.tab-empty p{ margin:0 0 18px; font-size: var(--fs-md); max-width:44ch; }
/* ---------------------------------------------------------
8. DURUM ÇUBUĞU
--------------------------------------------------------- */
.statusbar{
flex:0 0 var(--statusbar-h); height: var(--statusbar-h);
display:flex; align-items:center; gap:0;
padding: 0 14px;
background: var(--surface);
border-top:1px solid var(--border);
font-size:11px; color: var(--text-muted); font-weight:500;
}
.sb-item{
display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
/* ÜST BOŞLUK OPTİK TELAFİ — bkz. backoffice/app.css, aynı ölçüm.
`align-items:center` satır kutusunu ortalıyor, harfleri değil;
descender payı boş kaldığı için yazı ~2px yukarıda duruyordu. */
padding: 5px 11px 0; height:100%;
border-right: 1px solid var(--border);
}
.sb-item:first-child{ padding-left:0; }
.sb-item:last-child{ border-right:0; padding-right:0; }
.sb-item .bi-circle-fill{ font-size:6px; }
.sb-item .bi{ opacity:.7; }
.sb-spacer{ flex:1 1 auto; }
/* Durum çubuğunda tıklanabilir hücre (deneme sayacı gibi) */
.sb-link{ cursor:pointer; }
.sb-link:hover{ color: var(--accent-ink); }
.sb-link:hover .bi{ opacity:1; }
#sbClock, #sbTabCount{ font-variant-numeric: tabular-nums; }
/* ---------------------------------------------------------
9. SAĞ TIK MENÜSÜ + TOAST
--------------------------------------------------------- */
.ctx-menu{
position:fixed; z-index:2000;
display:none; flex-direction:column;
min-width:206px; padding:5px;
background: color-mix(in srgb, var(--surface) 96%, transparent);
backdrop-filter: blur(14px) saturate(1.3);
border:1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-3);
}
.ctx-menu.show{ display:flex; animation: ctxIn .13s cubic-bezier(.4,0,.2,1); }
@keyframes ctxIn{ from{ opacity:0; transform: scale(.97) translateY(-3px);} to{ opacity:1; transform:none; } }
.ctx-menu button{
display:flex; align-items:center; gap:10px;
padding:7px 10px; border:0; border-radius: var(--r-sm);
background:transparent; color: var(--text-soft);
font-size:12.8px; font-weight:500; text-align:left;
transition:.12s;
}
.ctx-menu button:hover{ background: var(--accent-soft); color: var(--accent-ink); }
.ctx-menu button i{ width:15px; font-size:12.5px; opacity:.8; }
.ctx-sep{ height:1px; margin:4px 7px; background: var(--border); }
.toast-stack{
position:fixed; right:18px; bottom: calc(var(--statusbar-h) + 16px);
z-index:2100; display:flex; flex-direction:column; gap:9px;
}
.toast-x{
display:flex; align-items:center; gap:11px;
min-width:260px; max-width:360px;
padding:12px 15px;
background: color-mix(in srgb, var(--surface) 96%, transparent);
backdrop-filter: blur(14px);
border:1px solid var(--border);
border-left:3px solid var(--accent);
border-radius: var(--r-md);
box-shadow: var(--sh-3);
font-size:12.8px; font-weight:500; color: var(--text);
animation: toastIn .25s cubic-bezier(.2,.9,.3,1.2);
}
.toast-x.success{ border-left-color: var(--ok); }
.toast-x.success > i{ color: var(--ok); }
.toast-x.warn{ border-left-color: var(--warn); }
.toast-x.warn > i{ color: var(--warn); }
.toast-x.error{ border-left-color: var(--danger); }
.toast-x.error > i{ color: var(--danger); }
.toast-x.info > i{ color: var(--accent-ink); }
.toast-x i{ font-size:16px; flex:0 0 auto; }
@keyframes toastIn{ from{ opacity:0; transform: translateX(26px) scale(.96);} to{ opacity:1; transform:none; } }
/* ---------------------------------------------------------
10. SAYFA BİLEŞENLERİ
--------------------------------------------------------- */
.page-head{
display:flex; align-items:flex-start; flex-wrap:wrap; gap:12px;
margin-bottom:16px;
}
.page-head h4{
margin:0; font-size:18.5px; font-weight:700;
font-family: var(--display-font); letter-spacing:-.025em;
display:flex; align-items:center;
}
.page-head .ph-sub{ font-size:12.5px; color: var(--text-muted); margin-top:3px; font-weight:450; }
.page-head .ph-actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.card-x{
background: var(--surface);
border:1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-2);
overflow:hidden;
}
.card-x + .card-x{ margin-top:16px; }
.card-x-head{
display:flex; align-items:center; gap:9px;
padding:12px 16px;
border-bottom:1px solid var(--border);
background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, transparent), transparent);
font-weight:650; font-size:12.5px;
letter-spacing:-.01em; color: var(--text);
}
.card-x-head > .bi{ font-size:14px; }
.card-x-head .cx-actions{ margin-left:auto; display:flex; gap:7px; }
.card-x-body{ padding:16px; }
.card-x-body.p-0{ padding:0; }
/* --- KPI --- */
.kpi{
position:relative; overflow:hidden;
display:flex; align-items:center; gap:13px;
padding:15px 16px;
background: var(--surface);
border:1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-2);
height:100%;
transition: border-color .18s, box-shadow .18s, transform .18s;
}
.kpi:hover{ border-color: var(--border-strong); box-shadow: var(--sh-3); transform: translateY(-1px); }
.kpi::after{
content:""; position:absolute; right:-28px; top:-28px;
width:90px; height:90px; border-radius:50%;
background: currentColor; opacity:.04; color: var(--accent);
}
.kpi-ico{
width:42px; height:42px; flex:0 0 42px;
display:grid; place-items:center;
border-radius: 12px; font-size:18px;
box-shadow: inset 0 0 0 1px currentColor;
}
.kpi-val{
font-family: var(--display-font);
font-size:20px; font-weight:700; line-height:1.15;
letter-spacing:-.03em; font-variant-numeric: tabular-nums;
}
.kpi-lbl{ font-size:11.5px; color: var(--text-muted); font-weight:500; margin-top:1px; }
.kpi-trend{ font-size:11px; margin-top:3px; font-weight:550; }
.kpi-trend .bi{ font-size:9px; }
/* renk tonları */
.tone-blue { background: rgba(59,110,246,.11); color:#3b6ef6; }
.tone-green { background: rgba(22,163,74,.11); color:#16a34a; }
.tone-orange{ background: rgba(245,158,11,.13); color:#d97706; }
.tone-red { background: rgba(229,72,77,.11); color:#e5484d; }
.tone-purple{ background: rgba(139,92,246,.12); color:#8b5cf6; }
.tone-cyan { background: rgba(6,182,212,.12); color:#0891b2; }
/* koyu kırmızı: iptal gibi "geri dönüşü olmayan" durumlar tone-red'den ayrışsın */
.tone-maroon{ background: color-mix(in srgb, var(--maroon) 12%, transparent); color: var(--maroon); }
[data-bs-theme="dark"] .tone-blue { color:#7ea4ff; }
[data-bs-theme="dark"] .tone-green { color:#4ade80; }
[data-bs-theme="dark"] .tone-orange{ color:#fbbf24; }
[data-bs-theme="dark"] .tone-red { color:#ff7b7f; }
[data-bs-theme="dark"] .tone-purple{ color:#b79bff; }
[data-bs-theme="dark"] .tone-cyan { color:#45c8e0; }
[data-bs-theme="dark"] .tone-maroon{ color:#fb7185; background: rgba(159,18,57,.22); }
.kpi-ico.tone-blue, .kpi-ico.tone-green, .kpi-ico.tone-orange,
.kpi-ico.tone-red, .kpi-ico.tone-purple, .kpi-ico.tone-cyan,
.kpi-ico.tone-maroon{ box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
/* --- tablolar --- */
.table-wrap{ overflow-x:auto; }
.table-x{
width:100%; margin:0;
border-collapse: separate; border-spacing:0;
font-size:12.8px;
}
.table-x thead th{
position:sticky; top:0; z-index:2;
background: var(--surface-2);
border-bottom:1px solid var(--border);
padding:10px 14px;
font-size:10.5px; font-weight:700;
text-transform:uppercase; letter-spacing:.06em;
color: var(--text-muted);
white-space:nowrap; user-select:none;
}
.table-x thead th[data-sort]{ cursor:pointer; transition: color .14s; }
.table-x thead th[data-sort]:hover{ color: var(--accent-ink); }
.table-x tbody td{
padding:10px 14px;
border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent);
white-space:nowrap; vertical-align:middle;
color: var(--text-soft);
transition: background .12s;
}
.table-x tbody tr:last-child td{ border-bottom:0; }
.table-x tbody tr:hover td{ background: color-mix(in srgb, var(--accent) 3.5%, transparent); }
.table-x tbody tr.selected td{ background: var(--accent-soft); color: var(--text); }
.table-x tbody tr.table-danger-soft td{ background: color-mix(in srgb, var(--danger) 5%, transparent); }
.table-x tbody tr.table-danger-soft:hover td{ background: color-mix(in srgb, var(--danger) 9%, transparent); }
.table-x .num{ text-align:right; font-variant-numeric: tabular-nums; }
.table-x .fw-semibold, .table-x .fw-bold{ color: var(--text); }
.table-x input.form-control, .table-x select.form-select{
background: transparent; box-shadow:none; border-color: transparent;
}
.table-x input.form-control:hover, .table-x select.form-select:hover{ border-color: var(--border); }
.table-x input.form-control:focus, .table-x select.form-select:focus{
background: var(--surface); border-color: var(--accent);
}
/* --- plaka rozeti --- */
.plate{
display:inline-flex; align-items:stretch; gap:6px;
overflow:hidden; padding-right:8px;
border:1px solid var(--border-strong);
border-radius: 5px;
background: #fbfcfe;
color:#0f172a;
font-family: var(--mono-font);
font-weight:700; font-size:11.5px; letter-spacing:.02em;
line-height: 1.65;
box-shadow: var(--sh-1);
}
.plate::before{
content:"TR";
display:flex; align-items:center; justify-content:center;
background: linear-gradient(180deg, #1e46b8, #122c7a);
color:#fff; font-size:7px; font-weight:700; letter-spacing:.04em;
padding: 0 3px; min-width:15px;
}
[data-bs-theme="dark"] .plate{ background:#e8ecf5; border-color: rgba(255,255,255,.22); }
/* --- rozetler --- */
.badge-x{
display:inline-flex; align-items:center; gap:5px;
padding:3px 9px; border-radius: 7px;
font-size:10.5px; font-weight:650; letter-spacing:.005em;
line-height:1.5;
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}
/* --- boş durum -------------------------------------------------------
33 blokta h5/p üzerinde mb-1 / mb-3 gibi Bootstrap yardımcıları ve
sayfa sayfa farklı max-width değerleri vardı. Bootstrap margin'leri
!important olduğu için flex gap'i eziyor, düğme her sayfada başka
yükseklikte duruyordu. Boşluğu artık blok kendisi yönetiyor; sayfa
işaretlemesinde margin yardımcısı kullanma.
-------------------------------------------------------------------- */
.empty-state{
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:0;
padding:52px 24px; text-align:center; color: var(--text-muted);
}
.empty-state > i:first-child{
display:block; font-size:38px; line-height:1;
opacity:.2; color: var(--text); margin-bottom:14px;
}
.empty-state h5{
margin:0 0 6px; font-family: var(--display-font);
font-size:15px; font-weight:700; color: var(--text);
}
.empty-state p{
margin:0; font-size: var(--fs-md); line-height:1.65; max-width:48ch;
}
/* metinden sonra ne gelirse (düğme, düğme grubu, ek not) tek boşluk */
.empty-state > p ~ *{ margin-top:18px; }
.empty-state > p ~ p{ margin-top:10px; font-size: var(--fs-sm); max-width:52ch; }
/* birden fazla düğme: aynı satırda, eşit aralıkla, dar ekranda alt alta */
.empty-state > div:not(:first-child){
display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
}
/* filtre sonucu boş kutuları daha sıkışık dursun */
.empty-state.is-compact{ padding:30px 20px; }
.empty-state.is-compact > i:first-child{ font-size:28px; margin-bottom:10px; }
/* ---------------------------------------------------------
11. RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 1199.98px){
.tab-pane-x{ padding:16px; }
}
@media (max-width: 991.98px){
.sidebar{
position:fixed; top:0; bottom:0; left:0;
width: 278px; flex-basis:278px;
transform: translateX(-100%);
transition: transform .26s cubic-bezier(.4,0,.2,1);
box-shadow: var(--sh-3);
}
.app-shell.sidebar-open .sidebar{ transform:none; }
.sidebar-backdrop{
display:block; position:fixed; inset:0;
background: rgba(6,10,20,.55);
backdrop-filter: blur(2px);
opacity:0; pointer-events:none; transition: opacity .22s;
z-index: 1040;
}
.app-shell.sidebar-open .sidebar-backdrop{ opacity:1; pointer-events:auto; }
/* mobilde rail modu devre dışı */
.app-shell.rail .sidebar{ flex-basis:278px; width:278px; }
.app-shell.rail .brand-text,
.app-shell.rail .company-info,
.app-shell.rail .nav-label,
.app-shell.rail .caret,
.app-shell.rail .nav-badge,
.app-shell.rail .sf-btn span{ display:revert; }
.app-shell.rail .sidebar-brand{ justify-content:flex-start; padding:0 14px; }
.app-shell.rail .nav-link-x{ justify-content:flex-start; padding:8.5px 11px; }
.app-shell.rail .nav-link-x.active::before{ display:block; }
.app-shell.rail .nav-link-x[data-title]::after{ display:none; }
.app-shell.rail .nav-caption{ height:auto; padding:16px 10px 7px; margin:0; background:none; color: var(--sb-text-dim); }
.app-shell.rail .nav-item.open > .nav-sub{ display:block !important; }
.app-shell.rail .sidebar-foot{ flex-direction:row; }
.global-search kbd{ display:none; }
.topbar-actions::before{ display:none; }
.tab{ max-width:170px; }
}
@media (max-width: 767.98px){
.page-head .ph-actions{ margin-left:0; width:100%; }
.card-x-body{ padding:14px; }
}
@media (max-width: 575.98px){
:root{ --topbar-h: 54px; --tabstrip-h: 40px; --statusbar-h: 26px; }
body{ font-size:13px; }
.topbar{ padding:0 10px; gap:7px; }
.global-search{ flex-basis:auto; height:34px; padding-left:10px; }
.user-chip{ padding:3px; }
.tab{ max-width:142px; padding:0 5px 0 10px; font-size:12px; gap:6px; }
.tab-pane-x{ padding:12px 12px 20px; }
.page-head{ margin-bottom:13px; }
.page-head h4{ font-size:16.5px; }
.kpi{ padding:12px; gap:11px; }
.kpi-ico{ width:36px; height:36px; flex-basis:36px; font-size:15px; border-radius:10px; }
.kpi-val{ font-size:17px; }
.kpi-lbl{ font-size:11px; }
.card-x{ border-radius: 12px; }
.table-x thead th, .table-x tbody td{ padding:9px 11px; }
/* Yanlar daralıyor ama ÜST TELAFİ KORUNUYOR: 0 yazılırsa dar
ekranda kalan maddeler geniş ekrandakinden yukarı kayıyordu. */
.sb-item{ padding:5px 8px 0; }
.toast-stack{ left:12px; right:12px; bottom: calc(var(--statusbar-h) + 12px); }
.toast-x{ min-width:0; max-width:none; }
}
/* dokunmatik: kapat butonu daha rahat hedeflenir */
@media (hover: none){
.tab .tab-close{ opacity:.85; width:22px; height:22px; }
.kpi:hover{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
/* Yazdırma kuralları 16. bölümde — ekran stillerinin tamamından
SONRA gelmesi gerekiyor, yoksa bazı !important'lar ters sırada
eziliyor. Bu yüzden eski kısa blok oraya taşındı. */
/* =========================================================
12. SAAS / VERİ BİLEŞENLERİ
========================================================= */
/* --- ortam rozeti (DEV / CANLI) --- */
.env-badge{
display:inline-flex; align-items:center; gap:6px;
padding:4px 10px; border-radius:7px;
font-size:10px; font-weight:700; letter-spacing:.09em;
white-space:nowrap; flex:0 0 auto;
}
.env-badge .bi{ font-size:6px; }
.env-badge.env-dev{
background: rgba(245,158,11,.12); color:#b45309;
box-shadow: inset 0 0 0 1px rgba(245,158,11,.3);
}
.env-badge.env-live{
background: rgba(22,163,74,.12); color:#15803d;
box-shadow: inset 0 0 0 1px rgba(22,163,74,.3);
}
[data-bs-theme="dark"] .env-badge.env-dev{ color:#fbbf24; }
[data-bs-theme="dark"] .env-badge.env-live{ color:#4ade80; }
/* --- kiracı (tenant) kimlik hücresi --- */
.tenant-cell{ display:flex; align-items:center; gap:10px; min-width:0; }
.tenant-logo{
width:30px; height:30px; flex:0 0 30px;
display:grid; place-items:center;
border-radius:9px;
font-size:11px; font-weight:700;
background: var(--accent-soft); color: var(--accent-ink);
box-shadow: inset 0 0 0 1px var(--accent-soft-2);
}
.tenant-name{ font-weight:600; color: var(--text); line-height:1.25; }
.tenant-domain{
font-family: var(--mono-font);
font-size:10.5px; color: var(--text-muted); font-weight:500;
}
/* --- durum noktası --- */
.dot-status{
width:7px; height:7px; border-radius:50%; display:inline-block; flex:0 0 auto;
}
.dot-status.is-active{ background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.16); }
.dot-status.is-trial{ background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.16); }
.dot-status.is-past{ background:#e5484d; box-shadow:0 0 0 3px rgba(229,72,77,.16); }
.dot-status.is-off{ background:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,.16); }
/* --- ince ilerleme çubuğu --- */
.meter{
height:6px; border-radius:99px; overflow:hidden;
background: color-mix(in srgb, var(--text-muted) 16%, transparent);
min-width:70px;
}
.meter > span{
display:block; height:100%; border-radius:99px;
background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
transition: width .5s cubic-bezier(.4,0,.2,1);
}
.meter.warn > span{ background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.meter.danger > span{ background: linear-gradient(90deg, #e5484d, #ff7b7f); }
/* --- zaman tüneli (aktivite akışı) --- */
.timeline{ position:relative; padding-left:26px; }
.timeline::before{
content:""; position:absolute; left:9px; top:6px; bottom:6px; width:1px;
background: var(--border);
}
.tl-item{ position:relative; padding:9px 0; }
.tl-item::before{
content:""; position:absolute; left:-21px; top:14px;
width:9px; height:9px; border-radius:50%;
background: var(--surface);
box-shadow: 0 0 0 2px var(--accent-soft-2), inset 0 0 0 2px var(--accent);
}
.tl-item.ok::before{ box-shadow: 0 0 0 2px rgba(22,163,74,.2), inset 0 0 0 2px #16a34a; }
.tl-item.warn::before{ box-shadow: 0 0 0 2px rgba(245,158,11,.2), inset 0 0 0 2px #f59e0b; }
.tl-item.danger::before{ box-shadow: 0 0 0 2px rgba(229,72,77,.2), inset 0 0 0 2px #e5484d; }
.tl-time{ font-size:11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tl-text{ font-size:12.8px; color: var(--text-soft); }
.tl-text strong{ color: var(--text); font-weight:600; }
/* --- mini sütun grafik --- */
.spark{ display:flex; align-items:flex-end; gap:3px; height:38px; }
.spark > i{
flex:1 1 0; min-width:2px; border-radius:3px 3px 1px 1px;
background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.spark > i.on{ background: var(--accent); }
/* --- kod/monospace hücre --- */
.mono{ font-family: var(--mono-font); font-size:11.5px; letter-spacing:-.01em; }
/* =========================================================
13. GİRİŞ EKRANI
========================================================= */
.auth-body{
overflow:auto;
background:
radial-gradient(900px 500px at 12% -10%, rgba(240,90,26,.28), transparent 60%),
radial-gradient(700px 480px at 92% 108%, rgba(240,90,26,.2), transparent 62%),
linear-gradient(160deg, #0a0f1e, #070a14 60%);
color:#e7ecf7;
}
.auth-wrap{
min-height:100dvh;
display:grid;
grid-template-columns: 1.05fr .95fr;
}
/* sol taraf */
.auth-brand{
display:flex; flex-direction:column; justify-content:space-between;
padding: 44px 52px;
border-right:1px solid rgba(255,255,255,.07);
position:relative; overflow:hidden;
}
.auth-brand::after{
content:""; position:absolute; inset:auto -120px -160px auto;
width:420px; height:420px; border-radius:50%;
background: radial-gradient(circle, rgba(240,90,26,.25), transparent 65%);
pointer-events:none;
}
.auth-brand-top{ display:flex; align-items:center; gap:12px; }
.auth-brand-top .brand-text strong{
font-family: var(--display-font); color:#fff;
font-size:14px; font-weight:800; letter-spacing:.11em; display:block;
}
.auth-brand-top .brand-text small{
color: rgba(255,255,255,.4); font-size:9px; font-weight:600; letter-spacing:.18em;
}
.auth-brand-mid h1{
font-family: var(--display-font);
font-size: clamp(28px, 3.4vw, 42px); font-weight:800;
letter-spacing:-.035em; line-height:1.1;
margin:0 0 12px; color:#fff;
}
.auth-brand-mid > p{
color: rgba(231,236,247,.6); font-size:14.5px; max-width:440px; margin:0 0 34px;
}
.auth-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.auth-points li{ display:flex; align-items:flex-start; gap:13px; }
.auth-points i{
width:36px; height:36px; flex:0 0 36px;
display:grid; place-items:center; border-radius:10px;
background: rgba(240,90,26,.16); color:#FF9E78; font-size:15px;
box-shadow: inset 0 0 0 1px rgba(255,138,91,.22);
}
.auth-points strong{ display:block; font-size:13.5px; font-weight:600; color:#fff; }
.auth-points span{ font-size:12.5px; color: rgba(231,236,247,.5); }
.auth-brand-foot{
display:flex; align-items:center; gap:10px;
font-size:11.5px; color: rgba(231,236,247,.38);
}
.auth-dot{ width:3px; height:3px; border-radius:50%; background: currentColor; }
/* sağ taraf */
.auth-form-side{ display:grid; place-items:center; padding:40px 24px; }
.auth-card{
width:100%; max-width:392px;
padding:34px 32px 26px;
background: rgba(17,23,40,.72);
backdrop-filter: blur(18px) saturate(1.3);
border:1px solid rgba(255,255,255,.09);
border-radius: 20px;
box-shadow: 0 30px 70px -20px rgba(0,0,0,.75);
}
.auth-head h2{
font-family: var(--display-font);
font-size:22px; font-weight:700; letter-spacing:-.03em;
margin:0 0 5px; color:#fff;
}
.auth-head p{ font-size:13px; color: rgba(231,236,247,.5); margin:0 0 24px; }
.auth-card .form-label{ color: rgba(231,236,247,.55); }
.auth-field{ position:relative; display:flex; align-items:center; }
.auth-field > i{
position:absolute; left:12px; font-size:14px;
color: rgba(231,236,247,.38); pointer-events:none;
}
.auth-field .form-control{
height:44px; padding-left:38px; padding-right:38px;
background: rgba(255,255,255,.045);
border-color: rgba(255,255,255,.1);
color:#fff; font-size:13.5px; box-shadow:none;
border-radius: 10px;
}
.auth-field .form-control::placeholder{ color: rgba(231,236,247,.3); }
.auth-field .form-control:focus{
background: rgba(255,255,255,.07);
border-color: #C8440E;
box-shadow: 0 0 0 3px rgba(240,90,26,.22);
color:#fff;
}
.auth-field:focus-within > i{ color:#FF8A5B; }
.auth-eye{
position:absolute; right:6px;
width:30px; height:30px; border:0; border-radius:8px;
background:transparent; color: rgba(231,236,247,.45);
display:grid; place-items:center; font-size:13px; transition:.15s;
}
.auth-eye:hover{ background: rgba(255,255,255,.07); color:#fff; }
.auth-card .form-check-input{ background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.auth-card .form-check-label{ font-size:12.5px; color: rgba(231,236,247,.6); }
.auth-link{ font-size:11.5px; color:#FF8A5B; text-decoration:none; font-weight:500; }
.auth-link:hover{ color:#FFAD8F; text-decoration:underline; }
.auth-submit{
height:44px; font-size:14px; font-weight:600; border-radius:10px;
box-shadow: 0 10px 26px -10px rgba(200,68,14,.95), inset 0 1px 0 rgba(255,255,255,.18);
}
.auth-alert{
display:flex; align-items:center; gap:9px;
padding:10px 13px; margin-bottom:18px;
border-radius:10px; font-size:12.5px;
border:1px solid transparent;
}
.auth-alert.error{ background: rgba(229,72,77,.12); border-color: rgba(229,72,77,.28); color:#ff9b9e; }
.auth-alert.warn{ background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.26); color:#fcd34d; }
.auth-alert.success{ background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.28); color:#86efac; align-items:flex-start; }
.auth-alert.success strong{ color:#bbf7d0; }
.auth-alert i{ font-size:14px; flex:0 0 auto; }
.auth-demo{
display:flex; align-items:flex-start; gap:10px;
margin-top:20px; padding:11px 13px;
background: rgba(240,90,26,.1);
border:1px dashed rgba(255,138,91,.3);
border-radius:10px;
font-size:11.5px; color: rgba(231,236,247,.6);
}
.auth-demo i{ color:#FF8A5B; font-size:14px; margin-top:1px; }
.auth-demo strong{ display:block; color:#fff; font-size:12px; margin-bottom:3px; font-weight:600; }
.auth-demo code{
font-family: var(--mono-font); font-size:11px;
background: rgba(0,0,0,.3); color:#FFAD8F;
padding:1px 5px; border-radius:4px;
}
.auth-demo span{ display:block; margin-top:4px; opacity:.7; }
.auth-foot{
display:flex; align-items:flex-start; gap:8px;
margin-top:22px; padding-top:18px;
border-top:1px solid rgba(255,255,255,.07);
font-size:11px; line-height:1.55; color: rgba(231,236,247,.38);
}
.auth-foot i{ color:#6ee7a8; font-size:12.5px; margin-top:1px; }
@keyframes authShake{
0%,100%{ transform:none; }
20%{ transform: translateX(-7px); }
40%{ transform: translateX(6px); }
60%{ transform: translateX(-4px); }
80%{ transform: translateX(2px); }
}
form.shake{ animation: authShake .4s ease; }
@media (max-width: 991.98px){
.auth-wrap{ grid-template-columns: 1fr; }
.auth-brand{ display:none; }
.auth-form-side{ padding:28px 18px; }
}
@media (max-width: 575.98px){
.auth-card{ padding:26px 20px 20px; border-radius:16px; }
.auth-head h2{ font-size:20px; }
}
/* =========================================================
14. MODALLAR
========================================================= */
.modal-content{
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-3);
}
.modal-header{
padding: 13px 16px;
border-bottom: 1px solid var(--border);
}
.modal-body{ padding: 16px; }
.modal-footer{
padding: 11px 16px;
border-top: 1px solid var(--border);
gap: 8px;
background: var(--surface);
border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.modal-footer > *{ margin: 0; }
.modal-title{
font-family: var(--display-font);
font-size: 16px; font-weight: 700; letter-spacing: -.02em;
}
.modal-backdrop{ background: #070b14; }
.modal-backdrop.show{ opacity: .55; }
/* ---------------------------------------------------------
ONAY PENCERESİ (#tabConfirm)
Tarayıcının confirm() kutusunun yerini alıyor. Tasarımı bilerek
SAKİN: kırmızı bir panik ekranı değil, ne kaybedileceğini okutan
bir soru. Simge rengi tonu taşıyor, metin ise normal mürekkepte
kalıyor — kırmızı yazı hem okumayı yavaşlatıyor hem de renk körü
kullanıcıda tek ayırt edici olamıyor (simge + metin birlikte).
--------------------------------------------------------- */
.ask-modal .modal-dialog{ max-width: 392px; }
.ask-modal .modal-body{ padding: 18px 18px 14px; }
.ask-head{ display:flex; align-items:flex-start; gap:11px; margin-bottom:10px; }
.ask-icon{
flex:0 0 32px; width:32px; height:32px;
display:grid; place-items:center;
border-radius: 9px; font-size:15px;
}
.ask-icon.tone-warn{
background: color-mix(in srgb, var(--warn) 14%, transparent);
color: var(--warn);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 28%, transparent);
}
.ask-icon.tone-danger{
background: color-mix(in srgb, var(--danger) 14%, transparent);
color: var(--danger);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 28%, transparent);
}
.ask-title{
margin:0; padding-top:5px;
font-family: var(--display-font);
font-size: 14.5px; font-weight: 700; letter-spacing: -.015em;
color: var(--text);
}
.ask-body{ font-size: 13px; line-height: 1.5; color: var(--text); }
.ask-body p:last-child{ margin-bottom:0; }
/* Kaybedilecek sekmelerin listesi. confirm() ile yapamadığımız şey
tam olarak bu: hangi sekmede veri olduğunu okunur göstermek. */
.ask-list{
list-style:none; margin:0; padding:7px 9px;
max-height: 148px; overflow:auto;
background: var(--surface-2);
border:1px solid var(--border);
border-radius: var(--r-sm, 8px);
font-size: 12.5px;
}
.ask-list li{ display:flex; align-items:center; gap:7px; padding:2px 0; }
.ask-list li::before{
content:''; flex:0 0 5px; width:5px; height:5px; border-radius:50%;
background: var(--warn);
}
/* Form ile sarmalanmis modallarda duzen bozulmasin.
.modal-content bir flex konteyner; araya giren
Asagidaki kurallar yine de guvenlik agi olarak form'u seffaf kilar. */
.modal-content > form{
display: flex; flex-direction: column;
width: 100%; min-height: 0; max-height: 100%;
}
.modal-dialog-scrollable .modal-content > form{ overflow: hidden; }
.modal-dialog-scrollable .modal-body{ min-height: 0; }
/* Alcak ekranlarda da kaydet butonu her zaman erisilebilir kalsin */
@media (max-height: 760px){
.modal-dialog{ margin: .75rem auto; }
.modal-dialog-centered{ min-height: calc(100% - 1.5rem); }
.modal-dialog-scrollable{ height: calc(100% - 1.5rem); }
}
@media (max-width: 575.98px){
.modal-dialog{ margin: .5rem; }
.modal-dialog-centered{ min-height: calc(100% - 1rem); }
.modal-dialog-scrollable{ height: calc(100% - 1rem); }
.modal-footer{ position: sticky; bottom: 0; z-index: 2; }
.modal-footer .btn{ flex: 1 1 auto; }
}
/* =====================================================================
ORTAK BİLEŞENLER (pt- = Debriyo)
Aşağıdaki beş parça panelde altı ayrı önekle (.cu- .ap- .iv- .sk-
.cs- .ch-) ayrı ayrı yazılmıştı. Her kopya zamanla ayrıştı: açılır
liste üç farklı yükseklikte açılıyor, rozetin bir yerde alt boşluğu
yoktu. Tek kaynağa indirildi; en uzun/en doğru değerler standart.
Yeni ekranlarda bu sınıfları kullan, sayfaya CSS kopyalama.
===================================================================== */
/* .card-x varsayılanda overflow:hidden — içinde açılır liste varsa kırpar */
.pt-visible{ overflow: visible; }
/* --- seçili kaydı gösteren rozet (müşteri / parça / fatura) --- */
.pt-chip{
display:flex; align-items:center; gap:9px;
padding:8px 10px; margin-bottom:6px;
background: var(--surface-2);
border:1px solid var(--border);
border-radius: var(--r-sm);
}
.pt-chip-name{ display:block; font-size: var(--fs-md); font-weight:600; }
.pt-chip-meta{
display:block; font-size: var(--fs-xs);
color: var(--text-muted); font-family: var(--mono-font);
}
/* "Değiştir" bağlantısı — rozetin sağ ucunda */
.pt-change{
flex:0 0 auto; border:0; background:transparent;
color: var(--accent-ink); font-size: var(--fs-sm); font-weight:600;
padding:2px 6px; border-radius:6px; white-space:nowrap;
}
.pt-change:hover{ background: var(--accent-soft); }
/* --- canlı arama sonuç paneli --- */
.pt-results{
position:absolute; left:0; right:0; z-index:40;
margin-top:3px; padding:4px;
max-height:300px; overflow-y:auto;
background: var(--surface);
border:1px solid var(--border-strong);
border-radius: var(--r-sm);
box-shadow: var(--sh-3);
}
.pt-item{
display:flex; align-items:center; gap:9px; width:100%;
padding:7px 8px; border:0; border-radius:6px;
background:transparent; color: var(--text); text-align:left;
font-size: var(--fs-md);
transition: background .12s;
}
.pt-item:hover{ background: var(--accent-soft); }
/* listenin en altındaki "yeni kayıt olarak ekle" satırı */
.pt-create{
border-top:1px solid var(--border);
border-radius:0 0 6px 6px;
margin-top:2px;
}
/* --- tipografi yardımcıları --- */
.fs-xxs{ font-size: var(--fs-xxs) !important; }
.fs-xs { font-size: var(--fs-xs) !important; }
.fs-sm { font-size: var(--fs-sm) !important; }
.fs-md { font-size: var(--fs-md) !important; }
.fs-lg { font-size: var(--fs-lg) !important; }
.fs-xl { font-size: var(--fs-xl) !important; }
/* --- pasif / kapanmış kayıt: listede geri planda dursun --- */
.pt-dim{ opacity:.62; }
.pt-dim:hover{ opacity:1; }
/* --- vurgulu kart: uyarı şeridi ve işaretli KPI kutusu ---------------
Panelde 19 yerde `style="border-color:rgba(245,158,11,.4);
background:rgba(245,158,11,.06)"` gibi sert kodlanmış renkler vardı.
Sert rgba karanlık temaya uyum sağlamıyor; token üzerinden kurunca
iki temada da doğru çalışıyor.
Kullanım: class="card-x mb-3 pt-flag pt-flag-soft pt-flag-warn"
class="card-x h-100 "
-------------------------------------------------------------------- */
.pt-flag{
border-color: color-mix(in srgb, var(--pt-flag, var(--accent)) 40%, transparent) !important;
}
.pt-flag-soft{
background: color-mix(in srgb, var(--pt-flag, var(--accent)) 6%, transparent);
}
.pt-flag-warn { --pt-flag: var(--warn); }
.pt-flag-danger{ --pt-flag: var(--danger); }
.pt-flag-info { --pt-flag: var(--accent); }
.pt-flag-maroon{ --pt-flag: var(--maroon); }
.pt-flag-green { --pt-flag: #16a34a; }
/* =========================================================
15. GRAFİKLER
Grafik kütüphanesi YOK ve bu bilinçli bir karar. Üç sebep:
1. YAZDIRMA. Canvas tabanlı kütüphaneler A4 çıktıda ya bulanık
çıkıyor ya hiç çıkmıyor. Buradaki çubuklar sıradan DOM
elemanı; yazıcı onları metin gibi basıyor.
2. SEKME MOTORU. Paneller DOM'da kalıyor. Her sekme için canvas
örneği yaşatmak, yeniden boyutlandırma dinleyicisi bağlamak
ve sekme kapanınca temizlemek gereksiz bir ömür yönetimi
getiriyordu.
3. TEMA. Renkler CSS değişkeni. Tema değişince grafik kendiliğinden
değişiyor; yeniden çizim çağrısı yok.
ORTAK KURALLAR
· Seri rengi yalnızca --dv-1/2/3 jetonlarından gelir, sıra sabittir.
· Yazı HER ZAMAN metin jetonunda (--text / --text-soft /
--text-muted). Rakamı seri rengiyle yazmak okunurluğu düşürüyor
ve rengi iki işe koşuyor; kimliği yanındaki kare taşır.
· Taban çizgisi kare, veri ucu 4px yuvarlak. Yuvarlaklık tabandan
da verilirse çubuk zeminden kopuk görünüyor.
· Komşu dolgular arasında 2px YÜZEY boşluğu: iki rengi ayıran şey
sadece renk olmasın.
· Sıfır değer için dolgu elemanı hiç basılmaz (PHP tarafında).
min-height ile 2px çizilirse sıfır "biraz var" gibi okunuyor.
========================================================= */
/* Seri renkleri — sınıf, satır içi stil değil: tema takibi bedava */
.ch-s1 { --ch-color: var(--dv-1); }
.ch-s2 { --ch-color: var(--dv-2); }
.ch-s3 { --ch-color: var(--dv-3); }
/* Vurgu grafiğinde geri plana atılan seri: gri, renk değil */
.ch-dim{ --ch-color: var(--text-muted); }
/* Dolgulu her yüzey yazıcıda da renkli çıksın */
.ch-bar-fill, .ch-col-bar, .ch-stack > i, .ch-legend i, .ch-tip i{
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
/* ---------------------------------------------------------
15.1 YATAY ÇUBUK — büyüklük karşılaştırması
Uzun Türkçe etiketler ("Onay Bekliyor", "Havale / EFT") yatayda
kırılmadan sığıyor; dikey sütunda bu etiketler eğik yazılmak
zorunda kalıyordu.
--------------------------------------------------------- */
.ch-bars{ display:grid; gap:6px; }
.ch-bar{
display:grid;
grid-template-columns: minmax(80px, 28%) 1fr auto;
align-items:center;
gap:10px;
padding:3px 5px;
margin:0 -5px;
border-radius:var(--r-sm);
font-size:var(--fs-md);
transition:background .12s;
}
.ch-bar:hover{ background:var(--surface-2); }
.ch-bar-lbl{
color:var(--text-soft);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ch-bar-track{
position:relative;
height:10px;
border-radius:0 5px 5px 0;
background:var(--surface-3);
}
.ch-bar-fill{
display:block;
height:100%;
min-width:3px; /* küçük ama sıfır olmayan değer kaybolmasın */
background:var(--ch-color, var(--dv-1));
border-radius:0 4px 4px 0; /* taban SOLDA */
}
.ch-bar-val{
font-weight:600;
font-variant-numeric:tabular-nums;
white-space:nowrap;
color:var(--text);
}
.ch-bar-val small{
display:block;
font-weight:450;
font-size:var(--fs-xs);
color:var(--text-muted);
text-align:right;
}
/* ---------------------------------------------------------
15.2 SÜTUN GRAFİĞİ — zaman içinde, 1 ya da 2 seri
--------------------------------------------------------- */
.ch-plot{
position:relative;
padding-top:16px; /* tavan etiketine yer */
}
/* Tavan çizgisi: eksen değil, ölçek ipucu. Geri planda kalsın. */
.ch-ceil{
position:absolute;
left:0; right:0; top:16px;
border-top:1px dashed var(--border-strong);
pointer-events:none;
}
.ch-ceil-val{
position:absolute;
top:0; right:0;
font-size:var(--fs-xxs);
color:var(--text-muted);
font-variant-numeric:tabular-nums;
}
.ch-cols{
display:flex;
align-items:flex-end;
gap:var(--ch-gap, 5px);
height:var(--ch-h, 148px);
border-bottom:1px solid var(--border-strong);
}
.ch-col{
flex:1 1 0; min-width:0;
height:100%;
display:flex; align-items:flex-end;
border-radius:3px 3px 0 0;
transition:background .12s;
}
/* Vurgu alanı çubuktan geniş: ince sütunu yakalamak için imleci
piksele oturtmak gerekmesin. */
.ch-col:hover{ background:var(--surface-2); }
.ch-col-set{
display:flex; align-items:flex-end;
gap:2px; /* iki seri arası yüzey boşluğu */
width:100%; height:100%;
}
.ch-col-bar{
flex:1 1 0; min-width:0;
min-height:3px;
background:var(--ch-color, var(--dv-1));
border-radius:4px 4px 0 0; /* taban ALTTA */
}
/* X ekseni — sütunlarla aynı gap, aynı flex: etiket sütunun altına oturur */
.ch-xaxis{
display:flex;
gap:var(--ch-gap, 5px);
margin-top:7px;
}
.ch-xaxis > span{
flex:1 1 0; min-width:0;
text-align:center;
font-size:var(--fs-xxs);
color:var(--text-muted);
white-space:nowrap;
overflow:hidden;
}
/* ---------------------------------------------------------
15.3 YIĞIN ÇUBUK — parça / bütün
Dilim sayısı 3'ü geçmiyor; daha fazlası için tablo kullanıyoruz.
--------------------------------------------------------- */
.ch-stack{
display:flex;
gap:2px;
height:15px;
border-radius:4px;
overflow:hidden;
background:var(--surface-3);
}
.ch-stack > i{
flex:0 1 auto; /* yüzdeler + 2px boşluk taşarsa orantılı kısılır */
min-width:0;
background:var(--ch-color, var(--dv-1));
}
/* ---------------------------------------------------------
15.4 LEJANT
İki ve daha fazla seride HER ZAMAN var; tek seride yok, başlık
zaten seriyi adlandırıyor. Yazı metin jetonunda, kimliği kare
taşıyor — böylece renk körlüğünde de ad okunuyor.
--------------------------------------------------------- */
.ch-legend{
display:flex; flex-wrap:wrap;
gap:3px 15px;
font-size:var(--fs-sm);
color:var(--text-soft);
}
.ch-legend > span{ display:inline-flex; align-items:center; gap:6px; }
.ch-legend i{
width:9px; height:9px;
flex:none;
border-radius:2px;
background:var(--ch-color, var(--dv-1));
}
.ch-legend b{
font-weight:600;
color:var(--text);
font-variant-numeric:tabular-nums;
}
/* Grafiğin altındaki tarih tabanı notu — hangi ölçü neye dayanıyor */
.ch-note{
margin:9px 0 0;
font-size:var(--fs-xs);
color:var(--text-muted);
line-height:1.5;
}
/* ---------------------------------------------------------
15.5 İPUCU — charts.js tek bir tanesini gövdeye asar
--------------------------------------------------------- */
.ch-tip{
position:fixed;
z-index:2100;
pointer-events:none;
max-width:272px;
padding:7px 10px;
background:var(--surface);
color:var(--text);
border:1px solid var(--border-strong);
border-radius:var(--r-sm);
box-shadow:var(--sh-3);
font-size:var(--fs-sm);
line-height:1.5;
opacity:0;
transform:translateY(3px);
transition:opacity .12s, transform .12s;
}
.ch-tip.is-on{ opacity:1; transform:none; }
.ch-tip b{
display:block;
font-size:var(--fs-md);
margin-bottom:3px;
color:var(--text);
}
.ch-tip div{ display:flex; align-items:center; gap:6px; }
/* Bootstrap label'a alt boşluk veriyor; ipucu satırı bundan kayıyordu */
.ch-tip label{ margin:0; font-weight:450; color:var(--text-soft); }
.ch-tip span{ margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums; }
.ch-tip i{
width:8px; height:8px;
flex:none;
border-radius:2px;
background:var(--ch-color, var(--dv-1));
}
/* =========================================================
15.6 PLAKA OKUMA EKRANI
Ekranın mantığı: elle giriş ana yol, kamera onun üstüne eklenmiş
bir kolaylık. Bu yüzden plaka alanı sayfanın en büyük öğesi;
tarayıcı bölümü ise istenince açılıyor.
========================================================= */
/* ---------- plaka giriş satırı ---------- */
.pl-entry{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px;
}
.pl-entry > .pl-input{ flex:1 1 260px; min-width:0; }
.pl-buttons{ display:flex; gap:8px; flex-wrap:wrap; }
/* Eli yağlı usta, telefonda, aceleyle yazıyor: alan büyük olacak */
.pl-input{
height:52px;
font-size:26px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
text-align:center;
}
.pl-input::placeholder{
letter-spacing:.08em;
font-weight:500;
opacity:.38;
}
/* ---------- fotoğraf sahnesi ---------- */
.pl-stage{
position:relative;
width:100%;
max-width:720px;
margin:0 auto;
overflow:hidden;
border-radius:var(--r-md);
border:1px solid var(--border);
background:var(--surface-3);
aspect-ratio:16 / 9; /* fotoğraf yüklenince kaynağa eşitleniyor */
touch-action:none; /* çerçeve sürüklenirken sayfa kaymasın */
user-select:none;
}
.pl-photo{
display:block;
width:100%;
height:100%;
object-fit:fill; /* sahne oranı kaynağa eşit, esneme olmuyor */
}
/* ---------- okunacak alan önizlemesi ----------
Programın bölgeyi kendi bulmaya çalışması iki kez yanlış bölge
seçti. Artık tahmin eden taraf yok: OCR'a tam olarak ne gideceği
burada, çerçeve bırakılır bırakılmaz görünüyor. */
.pl-peek{
max-width:720px;
margin:14px auto 0;
padding:10px 12px;
border:1px solid var(--border);
border-radius:var(--r-sm);
background:var(--surface-2);
}
.pl-peek-head{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
}
.pl-peek-label{
font-size:var(--fs-sm);
font-weight:600;
color:var(--text-muted);
}
.pl-peek-size{
font-size:var(--fs-xs);
color:var(--text-muted);
font-variant-numeric:tabular-nums;
}
/* Önizleme yeterince BÜYÜK olmalı: 40 pikselde her şey okunur
görünüyordu ve kullanıcı bozuk kırpmayı fark edemiyordu. */
.pl-peek-box{
min-height:68px;
display:flex;
align-items:center;
overflow-x:auto;
padding:4px;
border-radius:4px;
background:
repeating-conic-gradient(var(--surface-3) 0% 25%, transparent 0% 50%) 50% / 12px 12px;
}
.pl-peek-box canvas{
display:block;
height:68px;
width:auto;
border-radius:3px;
background:#fff;
box-shadow:0 0 0 1px var(--border);
}
.pl-peek-warn{
margin-top:8px;
padding:8px 10px;
border-radius:var(--r-sm);
background:color-mix(in srgb, var(--warn) 10%, transparent);
border:1px solid color-mix(in srgb, var(--warn) 32%, transparent);
font-size:var(--fs-sm);
line-height:1.5;
color:var(--text);
}
/* ---------- kırpma çerçevesi ----------
Dışı karartmak için box-shadow kullanıyoruz: ayrı bir maske
katmanı eklemeden çerçevenin dışı koyulaşıyor ve çerçeve
içindeki görüntü olduğu gibi kalıyor. */
.pl-crop{
position:absolute;
box-sizing:border-box;
border:2px solid var(--dv-1);
border-radius:4px;
/* Dışını karartmak için dev box-shadow: ayrı maske katmanı
eklemeden çerçevenin dışı koyulaşıyor, içi olduğu gibi kalıyor. */
box-shadow:0 0 0 9999px rgba(8,12,22,.58);
cursor:move;
}
/* Nişangah — plakayı ortalamak kolaylaşıyor */
.pl-crop::before,
.pl-crop::after{
content:'';
position:absolute;
background:var(--dv-1);
opacity:.45;
pointer-events:none;
}
.pl-crop::before{ left:0; right:0; top:50%; height:1px; }
.pl-crop::after { top:0; bottom:0; left:50%; width:1px; }
/* DÖRT KÖŞEDE TUTAMAK.
Tek köşede küçük bir nokta telefonda fark edilmiyordu. Görünen
daire 18px ama dokunma hedefi ::after ile 40px'e genişletiliyor —
parmakla tutmak için 18px çok küçük. */
.pl-crop-grip{
position:absolute;
width:18px; height:18px;
border-radius:50%;
background:var(--dv-1);
border:2.5px solid #fff;
box-shadow:0 1px 5px rgba(0,0,0,.45);
}
.pl-crop-grip::after{
content:'';
position:absolute;
left:50%; top:50%;
width:40px; height:40px;
transform:translate(-50%, -50%);
}
.pl-crop-grip[data-grip="nw"]{ left:-10px; top:-10px; cursor:nwse-resize; }
.pl-crop-grip[data-grip="ne"]{ right:-10px; top:-10px; cursor:nesw-resize; }
.pl-crop-grip[data-grip="sw"]{ left:-10px; bottom:-10px; cursor:nesw-resize; }
.pl-crop-grip[data-grip="se"]{ right:-10px; bottom:-10px;cursor:nwse-resize; }
/* Sahne üstündeki yönerge — ilk dokunuşta kayboluyor */
.pl-stage-hint{
position:absolute;
left:50%; bottom:10px;
transform:translateX(-50%);
padding:5px 12px;
border-radius:20px;
background:rgba(8,12,22,.78);
color:#fff;
font-size:var(--fs-sm);
white-space:nowrap;
pointer-events:none;
transition:opacity .25s;
}
.pl-stage-hint.is-gone{ opacity:0; }
/* Yakın çekim şartı — okuma denenmeden önce okunsun */
.pl-tip{
display:flex;
gap:10px;
max-width:720px;
margin:0 auto 14px;
padding:10px 12px;
border-radius:var(--r-sm);
background:var(--accent-soft);
border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
font-size:var(--fs-md);
line-height:1.5;
}
.pl-tip > i{ color:var(--accent-ink); font-size:15px; flex:none; margin-top:1px; }
/* ---------- ilerleme ---------- */
/* Sahne ortalanmış ve 720px ile sınırlı; ilerleme çubuğu da onunla
aynı hizada dursun, kartın tamamına yayılmasın. */
.pl-progress{
max-width:720px;
margin:0 auto;
}
.pl-bar{
height:6px;
border-radius:3px;
background:var(--surface-3);
overflow:hidden;
}
.pl-bar > span{
display:block;
height:100%;
background:var(--dv-1);
border-radius:3px;
transition:width .2s;
}
/* ---------- okuma sonucu ---------- */
.pl-read{
max-width:720px;
margin-left:auto;
margin-right:auto;
}
/* ---------------------------------------------------------
15.7 OTOMATİK DOLDURULAN ALAN
Ruhsattan okunup forma yazılan alanlar işaretli duruyor.
Sessizce dolan bir form, yanlış okunmuş bir veriyi fark
edilmeden kaydettirir; kullanıcı neyin makineden geldiğini
görmeli. İşaret kullanıcı alana dokununca kalkıyor — artık
o değer onun.
--------------------------------------------------------- */
.is-autofilled{
border-color: color-mix(in srgb, var(--dv-1) 55%, transparent) !important;
background: color-mix(in srgb, var(--dv-1) 7%, transparent) !important;
}
.is-autofilled:focus{
background: var(--surface) !important;
}
/* Ruhsattan okunan ham metin — ayrıştırıcıyı düzeltmenin tek yolu
gerçek çıktıyı görmek. */
.reg-raw{
max-height:220px;
overflow:auto;
margin:6px 0 0;
padding:8px 10px;
border:1px solid var(--border);
border-radius:var(--r-sm);
background:var(--surface-3);
font-family:var(--mono-font);
font-size:var(--fs-xs);
line-height:1.6;
white-space:pre-wrap;
word-break:break-word;
color:var(--text-soft);
}
/* ---------- sonuç ---------- */
.pl-found{
display:flex;
align-items:center;
gap:16px;
flex-wrap:wrap;
}
/* Gerçek plakaya benzeyen rozet: ekranda hangi araca baktığı
bir bakışta anlaşılsın */
.pl-plate-badge{
flex:none;
padding:9px 16px;
font-size:22px;
font-weight:700;
letter-spacing:.1em;
color:#111827;
background:#fff;
border:2px solid #111827;
border-radius:6px;
box-shadow:var(--sh-1);
}
.pl-plate-badge.is-muted{
color:var(--text-muted);
background:var(--surface-3);
border-color:var(--border-strong);
}
.pl-found-car{
font-size:17px;
font-weight:700;
line-height:1.25;
color:var(--text);
}
.pl-stats{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
gap:14px;
}
.pl-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
}
@media (max-width: 575.98px){
.pl-input{ height:46px; font-size:21px; letter-spacing:.1em; }
.pl-buttons{ width:100%; }
.pl-buttons .btn{ flex:1 1 0; }
.pl-plate-badge{ font-size:18px; padding:7px 12px; }
.pl-actions .btn{ flex:1 1 100%; }
}
/* =========================================================
16. BELGE / ANTETLİ KAĞIT
İKİ KULLANIM, TEK STİL:
a) RAPOR SAYFALARI. Ekranda panel gibi çalışıyor; antet ve altlık
yalnızca kağıtta görünüyor. Ekranda firma adı zaten üst barda
yazılı, ikinci kez yazmak gürültü.
b) BELGE SAYFALARI (.doc-page — iş emri, fatura çıktısı). Bunlar
müşteriye verilen belgeler. Antet ve altlık EKRANDA DA açık:
kullanıcı yazdırmadan önce ne çıkacağını görsün. Yazdırdıktan
sonra "logo neden yok" diye sormak zorunda kalmasın.
Ölçüler burada px, yazdırmada pt/mm ile eziliyor (17. bölüm).
========================================================= */
/* Varsayılan: kapalı. .doc-page içinde aşağıda açılıyor. */
.doc-sheet { display:none; }
.doc-foot { display:none; }
.doc-signs { display:none; }
.doc-page .doc-sheet,
.doc-page .doc-foot { display:block; }
.doc-page .doc-signs{ display:flex; }
/* ---------------------------------------------------------
16.1 KAĞIT YÜZEYİ
Ekranda da A4 genişliğinde ortalanmış bir sayfa gibi duruyor;
çıktıyla ekran arasında sürpriz kalmasın.
--------------------------------------------------------- */
.doc-page{
max-width: 210mm;
margin: 0 auto;
padding: 24px 26px 26px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-2);
}
/* ---------------------------------------------------------
16.2 ANTET
--------------------------------------------------------- */
.doc-sheet{
margin: 0 0 20px;
padding-bottom: 12px;
border-bottom: 2px solid var(--dv-1);
}
.doc-head{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 28px;
}
.doc-brand{
display: flex;
align-items: flex-start;
gap: 14px;
min-width: 0;
}
.doc-logo{
width: 62px; height: 62px;
flex: none;
object-fit: contain;
}
.doc-logo-text{
display: flex; align-items: center; justify-content: center;
background: var(--dv-1);
color: #fff;
border-radius: var(--r-md);
font-family: var(--display-font);
font-weight: 800;
font-size: 22px;
letter-spacing: .02em;
}
.doc-firm{ min-width: 0; }
.doc-firm h1{
margin: 0 0 4px;
font-family: var(--display-font);
font-size: 21px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -.012em;
color: var(--text);
}
.doc-firm p{
margin: 0;
font-size: var(--fs-md);
line-height: 1.5;
color: var(--text-muted);
}
.doc-meta{
flex: none;
text-align: right;
max-width: 270px;
}
.doc-kind{
display: block;
font-family: var(--display-font);
font-size: 15px;
font-weight: 800;
letter-spacing: .07em;
color: var(--dv-1);
}
.doc-title{
display: block;
margin-bottom: 8px;
font-size: var(--fs-lg);
font-weight: 600;
color: var(--text-soft);
}
/* Etiket/değer çiftleri sağa dayalı iki kolon */
.doc-meta dl{
display: grid;
grid-template-columns: auto auto;
justify-content: end;
gap: 2px 12px;
margin: 0;
font-size: var(--fs-sm);
}
.doc-meta dt{ color: var(--text-muted); font-weight: 450; }
.doc-meta dd{ margin: 0; color: var(--text); font-weight: 600; }
/* ---------------------------------------------------------
16.3 BELGE GÖVDESİ — taraflar, bloklar, kalem tabloları
--------------------------------------------------------- */
.doc-parties{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 16px;
}
.doc-parties > div{
padding: 12px 14px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
}
.doc-parties h3,
.doc-block h3,
.doc-sum-note h3{
margin: 0 0 5px;
font-size: var(--fs-xxs);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-muted);
}
.doc-parties strong{
display: block;
font-size: var(--fs-lg);
font-weight: 700;
color: var(--text);
}
.doc-parties p,
.doc-block p,
.doc-sum-note p{
margin: 3px 0 0;
font-size: var(--fs-md);
line-height: 1.55;
color: var(--text-soft);
}
.doc-block{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
}
/* Tek blok varsa tüm genişliği alsın, yarısı boş kalmasın */
.doc-block > div:only-child{ grid-column: 1 / -1; }
.doc-section{
margin: 20px 0 8px;
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--text-soft);
}
.doc-table{ width: 100%; }
.doc-table tfoot th{
background: var(--surface-2);
font-weight: 700;
color: var(--text);
}
/* ---------------------------------------------------------
16.4 TOPLAMLAR
--------------------------------------------------------- */
.doc-sum{
display: grid;
grid-template-columns: 1fr minmax(250px, 310px);
gap: 22px;
margin-top: 18px;
}
.doc-sum-table{
width: 100%;
border-collapse: collapse;
font-size: var(--fs-md);
align-self: start;
}
.doc-sum-table th{
padding: 5px 0;
text-align: left;
font-weight: 450;
color: var(--text-soft);
}
.doc-sum-table td{
padding: 5px 0;
text-align: right;
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--text);
}
.doc-sum-grand th,
.doc-sum-grand td{
padding-top: 8px;
border-top: 2px solid var(--border-strong);
font-size: 16px;
font-weight: 800;
color: var(--text);
}
/* ---------------------------------------------------------
16.5 İMZA VE ALTLIK
--------------------------------------------------------- */
.doc-signs{
display: flex;
gap: 32px;
margin-top: 32px;
}
.doc-signs > div{
flex: 1 1 0;
padding-top: 46px;
border-top: 1px solid var(--border-strong);
font-size: var(--fs-md);
font-weight: 600;
color: var(--text-soft);
text-align: center;
}
.doc-signs small{
display: block;
margin-top: 2px;
font-weight: 450;
font-size: var(--fs-sm);
color: var(--text-muted);
}
.doc-foot{
margin-top: 22px;
padding-top: 11px;
border-top: 1px solid var(--border);
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--text-muted);
}
.doc-foot p{ margin: 0 0 5px; }
/* İptal / taslak damgası — belgenin geçerli olmadığı kağıtta da belli olsun */
.doc-stamp{
display: inline-block;
margin: 0 0 14px;
padding: 4px 14px;
border: 2px solid var(--danger);
border-radius: 6px;
color: var(--danger);
font-weight: 800;
letter-spacing: .12em;
font-size: var(--fs-md);
transform: rotate(-2deg);
}
/* Ekstre / kasa raporu: devir ve toplam satırları */
.doc-table tr.doc-row-carry td{ font-style: italic; color: var(--text-muted); }
.doc-table tr.doc-row-total td{ font-weight: 700; border-top: 2px solid var(--border-strong); }
/* Servis kaydı: parça adının altında açılan stok öneri listesi (hücre içinde) */
.sv-sug{
margin-top: 4px; max-height: 260px; overflow-y: auto;
background: var(--surface); border: 1px solid var(--border-strong);
border-radius: 9px; box-shadow: 0 8px 22px rgba(0,0,0,.18); padding: 3px;
min-width: 280px;
}
.sv-sug-item{
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 6px 8px; border: 0; border-radius: 7px; background: transparent;
color: var(--text); text-align: left; font-size: var(--fs-md); cursor: pointer;
}
.sv-sug-item:hover, .sv-sug-item.is-active{ background: var(--accent-soft-2); }
.sv-sug-empty{ padding: 7px 9px; font-size: var(--fs-sm); color: var(--text-muted); }
/* Randevu raporu: gün × saat ısı haritası */
.ra-heat{ border-collapse: separate; border-spacing: 3px; font-size: var(--fs-xs); }
.ra-heat th{ color: var(--text-muted); font-weight: 600; text-align: center; padding: 0 2px; }
.ra-heat tbody th{ text-align: left; padding-right: 6px; }
.ra-heat td{
width: 30px; height: 26px; text-align: center; border-radius: 5px;
background: color-mix(in srgb, var(--primary, #3b6ef6) calc(var(--a, 0) * 100%), var(--surface-2, rgba(127,127,127,.08)));
color: var(--text); font-weight: 600;
}
@media print{
.ra-heat td{ background: color-mix(in srgb, #3b6ef6 calc(var(--a, 0) * 100%), #f3f4f6) !important; color:#000 !important; }
}
/* Makbuz: iki nüsha, arada makas çizgisi */
.doc-receipt{ position: relative; }
.doc-receipt .doc-signs{ margin-top: 18px; }
.doc-receipt .doc-signs > div{ padding-top: 34px; }
.doc-receipt-copy{
position: absolute; top: -4px; right: 0;
font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
}
.doc-cut{
position: relative; margin: 22px 0; border-top: 1.5px dashed var(--border-strong);
text-align: center; height: 0;
}
.doc-cut i{ position: relative; top: -11px; padding: 0 8px; background: var(--surface, #fff); color: var(--text-muted); }
@media print{
.doc-receipt-copy{ font-size: 6.5pt !important; color:#555 !important; }
.doc-cut{ margin: 6mm 0 !important; border-color:#888 !important; }
.doc-cut i{ background:#fff !important; color:#555 !important; }
.doc-receipt .doc-signs > div{ padding-top: 9mm !important; }
}
/* Makbuz: tutar kutusu */
.doc-amount{
display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
margin: 6px 0 18px; padding: 14px 18px;
border: 1.5px solid var(--border-strong); border-radius: 10px;
}
.doc-amount strong{ font-size: 24px; font-weight: 800; color: var(--text); white-space: nowrap; }
.doc-amount span{ color: var(--text-soft); font-size: var(--fs-md); }
@media print{
.doc-stamp{ border-color:#b00020 !important; color:#b00020 !important; }
.doc-amount{ border-color:#333 !important; padding:3mm 4mm !important; margin:2mm 0 5mm !important; }
.doc-amount strong{ font-size:15pt !important; color:#000 !important; }
.doc-amount span{ font-size:9pt !important; color:#222 !important; }
}
.doc-foot-sign{
margin: 9px 0 0 !important;
padding-top: 7px;
border-top: 1px dotted var(--border);
color: var(--text-muted);
opacity: .8;
}
/* Dar ekranda iki kolonlu belge blokları alt alta */
@media (max-width: 767.98px){
.doc-page{ padding: 16px 14px 20px; border-radius: var(--r-md); }
.doc-head{ flex-direction: column; gap: 14px; }
.doc-meta{ text-align: left; max-width: none; }
.doc-meta dl{ justify-content: start; }
.doc-parties,
.doc-block,
.doc-sum{ grid-template-columns: 1fr; }
.doc-signs{ flex-direction: column; gap: 22px; }
}
/* =========================================================
17. EKSPERTİZ
ŞİDDET SKALASI — ÜÇ KODLA BİRDEN
Panel durumları (orijinal → işlemli) sıralı bir veri; renkler de
bu sıraya göre AÇIKTAN KOYUYA gidiyor. Böylece ağırlık üç ayrı
kanaldan okunuyor:
1. renk tonu,
2. açıklık (siyah-beyaz çıktıda ve renk körlüğünde ayırt edilir),
3. panelin üstündeki TEK HARF (O / L / B / D / İ).
Renk tek başına hiçbir yerde anlam taşımıyor; bir ekspertiz raporu
mahkemeye de gidebilen bir belge, "yeşil miydi sarı mıydı"
tartışması çıkmamalı.
ARAÇ ŞEMASI CSS GRID — SVG DEĞİL
Koordinat matematiği yok, tema değişkenleriyle kendiliğinden
uyuyor, yazdırmada ölçek bozulmuyor ve panel ekleyip çıkarmak
grid-area adı yazmaktan ibaret.
========================================================= */
/* --- şiddet tonları: tek yerden --- */
.ex-tone-ok { --ex-bg:#dcfce7; --ex-ink:#14532d; --ex-line:#86efac; }
.ex-tone-low { --ex-bg:#fef3c7; --ex-ink:#713f12; --ex-line:#fcd34d; }
.ex-tone-mid { --ex-bg:#fed7aa; --ex-ink:#7c2d12; --ex-line:#fb923c; }
.ex-tone-high { --ex-bg:#fecaca; --ex-ink:#7f1d1d; --ex-line:#f87171; }
.ex-tone-severe { --ex-bg:#4c0519; --ex-ink:#ffe4e6; --ex-line:#9f1239; }
.ex-tone-na { --ex-bg:var(--surface-3); --ex-ink:var(--text-muted); --ex-line:var(--border); }
[data-bs-theme="dark"] .ex-tone-ok { --ex-bg:#052e16; --ex-ink:#bbf7d0; --ex-line:#166534; }
[data-bs-theme="dark"] .ex-tone-low { --ex-bg:#3f2d05; --ex-ink:#fde68a; --ex-line:#a16207; }
[data-bs-theme="dark"] .ex-tone-mid { --ex-bg:#43200a; --ex-ink:#fed7aa; --ex-line:#c2410c; }
[data-bs-theme="dark"] .ex-tone-high { --ex-bg:#450a0a; --ex-ink:#fecaca; --ex-line:#b91c1c; }
[data-bs-theme="dark"] .ex-tone-severe { --ex-bg:#4c0519; --ex-ink:#ffe4e6; --ex-line:#9f1239; }
/* ---------------------------------------------------------
ARAÇ ŞEMASI (SVG, üstten görünüm)
Önce CSS Grid ile dikdörtgen ızgara çizilmişti; kurulumu kolaydı
ama ÇIKTI ARABAYA BENZEMİYORDU. Ekspertiz raporu müşteriye verilen
bir belge ve sektörün tamamı araç siluetiyle çalışıyor: belgeye
bakan kişi hangi panelin neresi olduğunu düşünmeden görmeli.
Geometri system/expertise.php içinde (EX_CAR_SHAPES), burada
yalnızca görünüm var.
--------------------------------------------------------- */
/* Açınım şeması kareye yakın (514×510): üst görünüm + iki yan profil.
Eski tek üst görünüm uzun-dardı ve 360px'e sığıyordu; yan yana üç
görünümde ad okunabilsin diye alan genişledi. */
.ex-car{ max-width:620px; margin:0 auto; }
.ex-car-svg{ display:block; width:100%; height:auto; overflow:visible; }
/* --- panel ---
DİKİŞ BEYAZ, PANEL ÇERÇEVESİ YOK.
Önce her panele kendi tonunda ince bir çerçeve verilmişti; iki
komşu panel aynı durumda olduğunda (ikisi de orijinal) aradaki
çizgi kayboluyor ve kaporta tek parça gibi görünüyordu. Zemin
renginde kalın bir dış çizgi (paint-order:stroke ile dolgunun
ALTINDA) panelleri birbirinden ayırıyor — sektördeki basılı
ekspertiz raporlarının görünümü de bu. */
/* GÜNCELLEME (4. revizyon): beyaz dikiş yerine İNCE KOYU HAT.
Sektördeki basılı raporlar (kullanıcının gösterdiği örnek) beyaza
yakın gövde + ince koyu çizgi kullanıyor; dikişli bloklar "çizim"
değil "kutu" gibi duruyordu. Komşu iki orijinal panel arasındaki
ayrım artık bu hattan geliyor. */
.ex-sp-shape{
fill: var(--ex-bg);
stroke: #6b7685;
stroke-width: 1;
stroke-linejoin: round;
transition: fill .14s, stroke .14s;
}
[data-bs-theme="dark"] .ex-sp-shape{ stroke:#94a3b8; }
.ex-sp.is-live{ cursor:pointer; }
/* (üzerine gelme vurgusu aşağıda: "TIKLANABİLİR OLDUĞU BELLİ OLSUN") */
.ex-sp.is-live:focus-visible{ outline:none; }
.ex-sp.is-live:focus-visible .ex-sp-shape{ stroke: var(--accent); }
.ex-sp-code{
fill: var(--ex-ink);
font-family: var(--mono-font);
font-size: 15px; font-weight: 800;
text-anchor: middle; dominant-baseline: middle;
pointer-events: none; user-select: none;
}
.ex-sp-name{
fill: var(--ex-ink);
font-size: 7.4px; font-weight: 700; letter-spacing:.04em;
text-anchor: middle; dominant-baseline: middle;
opacity: .82;
pointer-events: none; user-select: none;
}
/* Not işareti her panelde çizili, yalnızca notu olanda görünür */
.ex-sp-dot{ fill: var(--ex-ink); pointer-events:none; opacity:0; transition: opacity .14s; }
.ex-sp.has-note .ex-sp-dot{ opacity:.75; }
/* Dar panellerde (marşpiyel) ad daha küçük: 14 piksele sığmalı */
.ex-sp[data-code$="_sill"] .ex-sp-name{ font-size:6.4px; }
.ex-sp[data-code$="_sill"] .ex-sp-code{ font-size:11px; }
/* Ön/arka panel şeritleri 12 birimden 22 birime çıktı ("çok ufak
kalmış"); harf ve ad artık rahat sığıyor, yalnızca harf biraz küçük. */
.ex-sp[data-code="front_panel"] .ex-sp-code,
.ex-sp[data-code="rear_panel"] .ex-sp-code{ font-size:13px; }
/* Çamurluk adları davlumbaz ile far/stop arasındaki dar bantta akıyor */
.ex-sp[data-code$="_fender"] .ex-sp-name{ font-size:6.2px; }
/* Arka tampon şerit: harf ve ad yan yana, bant 26 piksel */
.ex-sp[data-code="rear_bumper"] .ex-sp-code{ font-size:13px; }
/* --- dekoratif parçalar: tıklanmaz, puana girmez ---
Teker/jant, camlar, direkler, far/stop, kol, ayna, tampon uçları.
"Araba gibi" görünmesini sağlayan panellerin kendisi değil bu
ayrıntılar. Hepsi pointer-events:none — panele tıklamayı yutmasınlar. */
.ex-car-trim, .ex-car-bumper, .ex-car-tire, .ex-car-rim, .ex-car-hub,
.ex-car-glass, .ex-car-light, .ex-car-handle, .ex-car-mirror,
.ex-car-crease, .ex-car-outline, .ex-car-cap{ pointer-events:none; }
.ex-car-trim { fill:#1f2937; stroke:#111827; stroke-width:.8; }
.ex-car-bumper{ fill:#e4e8ee; stroke:#6b7685; stroke-width:1; }
/* Önden/arkadan: ızgara, hava girişi, sis farı, plaka yeri, egzoz */
.ex-car-grille{ fill:#1f2937; stroke:#0f172a; stroke-width:.6; pointer-events:none; }
.ex-car-tire { fill:#1f2937; }
.ex-car-rim { fill:#cbd5e1; stroke:#64748b; stroke-width:1.5; }
.ex-car-spoke { stroke:#475569; stroke-width:3; stroke-linecap:round; pointer-events:none; }
.ex-car-hub { fill:#4b5563; }
/* Koyu füme cam: açık mavi cam aracı oyuncak gibi gösteriyordu */
.ex-car-glass { fill:#4b5a70; stroke:#1e293b; stroke-width:.9; }
/* ORİJİNAL PANEL GÜMÜŞ-GRİ — araç boyası gibi.
Eskiden "orijinal" de yeşil boyanıyordu ve bütün araç yeşil bir
lekeye dönüyordu; kullanıcı "parçanın üstü grimsi olsun" dedi.
Sektördeki raporlar da böyle: işlem görmemiş parça renksiz, renk
YALNIZCA bulguda. Kontrol maddelerindeki "sorunsuz" yeşili
(.ex-tone-ok) değişmedi; bu yalnızca şema ve onun göstergesi. */
.ex-sp.ex-tone-ok, .ex-legend .ex-tone-ok{ --ex-bg:#f1f3f6; --ex-ink:#334155; --ex-line:#94a3b8; }
[data-bs-theme="dark"] .ex-sp.ex-tone-ok,
[data-bs-theme="dark"] .ex-legend .ex-tone-ok{ --ex-bg:#334155; --ex-ink:#e2e8f0; --ex-line:#64748b; }
/* TIKLANABİLİR OLDUĞU BELLİ OLSUN — üzerine gelince panel aydınlanıyor,
kenarı vurgu rengine dönüyor ve hafif parlıyor; imleç el. Dokunmatikte
hover yok, orada basılı tutunca (:active) aynı tepki. */
.ex-sp.is-live .ex-sp-shape{ transition: fill .14s, stroke .14s, filter .14s; }
.ex-sp.is-live:hover .ex-sp-shape,
.ex-sp.is-live:active .ex-sp-shape{
stroke: var(--accent); stroke-width: 2.4;
filter: brightness(1.05) drop-shadow(0 0 4px rgba(109,94,252,.45));
}
.ex-sp.is-live:hover .ex-sp-code{ fill: var(--accent-ink); }
.ex-car-light { fill:#fde68a; stroke:#d4a017; stroke-width:.7; }
.ex-car-light.is-tail{ fill:#fca5a5; stroke:#dc2626; }
.ex-car-handle{ fill:#64748b; }
.ex-car-mirror{ fill:#64748b; }
.ex-car-crease{ fill:none; stroke:#0f172a; stroke-opacity:.18; stroke-width:1.2; }
.ex-car-cap{
fill: var(--text-muted);
font-size: 9px; font-weight: 800; letter-spacing:.14em;
text-anchor: middle;
}
.ex-car-outline{
fill: none;
stroke: var(--text);
stroke-width: 1.6;
stroke-linejoin: round;
opacity:.85;
}
.ex-car-dir{
fill: var(--text-muted);
font-size: 9px; font-weight: 800; letter-spacing:.14em;
text-anchor: middle;
}
/* Koyu zeminde siyah lastik kayboluyordu: ince açık çerçeve */
[data-bs-theme="dark"] .ex-car-tire { fill:#0b0f19; stroke:#475569; stroke-width:1.4; }
[data-bs-theme="dark"] .ex-car-rim { fill:#64748b; stroke:#1f2937; }
[data-bs-theme="dark"] .ex-car-trim { fill:#0b0f19; stroke:#000; }
[data-bs-theme="dark"] .ex-car-bumper{ fill:#2b3546; stroke:#475569; }
[data-bs-theme="dark"] .ex-car-glass { fill:#1e293b; stroke:#475569; }
[data-bs-theme="dark"] .ex-car-spoke { stroke:#1f2937; }
[data-bs-theme="dark"] .ex-car-crease{ stroke:#e2e8f0; }
.ex-car-hint{
text-align:center; color: var(--text-muted);
font-size:11px; margin-top:9px;
}
/* --- durum göstergesi (legend) --- */
.ex-legend{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.ex-legend-item{
display:inline-flex; align-items:center; gap:6px;
padding:3px 9px; border-radius:30px;
background: var(--ex-bg); color: var(--ex-ink);
border:1px solid var(--ex-line);
font-size:11px; font-weight:600;
}
.ex-legend-item .ex-code{ font-family: var(--mono-font); font-weight:800; }
/* --- panel özeti (metin, yazdırma için şart) --- */
.ex-panel-list{
display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap:4px;
}
.ex-panel-row{
display:flex; align-items:center; gap:8px;
padding:5px 9px; border-radius:6px;
background: var(--surface-2);
border:1px solid var(--border);
font-size:12px;
}
.ex-panel-row .ex-chip{
flex:0 0 auto;
display:inline-grid; place-items:center;
width:20px; height:20px; border-radius:5px;
background: var(--ex-bg); color: var(--ex-ink);
border:1px solid var(--ex-line);
font-family: var(--mono-font); font-size:11px; font-weight:800;
}
/* --- puan rozeti --- */
.ex-score{
display:flex; align-items:center; gap:14px;
padding:14px 16px; border-radius: var(--r-lg);
background: var(--ex-bg); color: var(--ex-ink);
border:1px solid var(--ex-line);
}
.ex-score-val{
flex:0 0 auto;
font-family: var(--display-font);
font-size:38px; font-weight:800; letter-spacing:-.04em;
line-height:1;
}
.ex-score-val small{ font-size:15px; font-weight:700; opacity:.6; }
.ex-score-text{ min-width:0; }
.ex-score-text strong{ display:block; font-size:14px; }
.ex-score-text span{ display:block; font-size:11.5px; opacity:.8; }
/* --- kontrol maddesi satırı --- */
.ex-check{
display:flex; align-items:center; gap:10px;
padding:6px 0; border-bottom:1px solid var(--border);
}
.ex-check:last-child{ border-bottom:0; }
.ex-check-label{ flex:1 1 auto; min-width:0; font-size:12.5px; }
.ex-check-states{ flex:0 0 auto; display:flex; gap:2px; }
.ex-check-states input{ position:absolute; opacity:0; pointer-events:none; }
.ex-check-states label{
display:inline-grid; place-items:center;
min-width:30px; height:25px; padding:0 7px;
border-radius:6px; cursor:pointer;
background: var(--surface-2);
border:1px solid var(--border);
color: var(--text-muted);
font-size:10.5px; font-weight:700;
transition:.12s;
}
.ex-check-states label:hover{ border-color: var(--border-strong); color: var(--text); }
.ex-check-states input:checked + label{
background: var(--ex-bg); color: var(--ex-ink); border-color: var(--ex-line);
}
.ex-check-states input:focus-visible + label{ outline:2px solid var(--accent); outline-offset:1px; }
/* --- ölçüm çubuğu --- */
.ex-measure{ padding:7px 0; border-bottom:1px solid var(--border); }
.ex-measure:last-child{ border-bottom:0; }
.ex-measure-head{
display:flex; align-items:center; gap:8px; margin-bottom:4px;
font-size:12.5px;
}
.ex-measure-head .ex-m-name{ flex:1 1 auto; min-width:0; }
.ex-measure-head input{
flex:0 0 80px; width:80px; text-align:right;
}
.ex-measure-head .ex-m-unit{
flex:0 0 auto; width:34px;
color: var(--text-muted); font-size:11px;
}
.ex-measure-bar{
position:relative; height:6px; border-radius:99px;
background: var(--surface-3); overflow:hidden;
}
.ex-measure-bar span{
display:block; height:100%; border-radius:99px;
background: var(--ex-line); transition: width .25s;
}
.ex-measure-note{ font-size:10.5px; color: var(--text-muted); margin-top:3px; }
/* --- ölçüm kaydırma çubuğu ---
İz üç bölgeli: eşik dışı KIRMIZI, geçerli bölge YEŞİL
(--ok-a … --ok-b, PHP hesaplıyor). Sürüklerken sınırı geçtiği an
görülüyor. Başparmak 22 piksel — parmakla tutulabilsin.
`touch-action: pan-y`: dikey kaydırma sayfayı kaydırır, yatay
sürükleme çubuğu oynatır; telefonda sayfa takılmasın. */
.ex-m-range{
--m-ok: rgba(22,163,74,.38);
--m-bad: rgba(229,72,77,.30);
-webkit-appearance:none; appearance:none;
display:block; width:100%; height:26px; margin:0;
background:transparent; cursor:pointer;
touch-action: pan-y;
}
.ex-m-range:focus{ outline:none; }
.ex-m-range::-webkit-slider-runnable-track{
height:8px; border-radius:99px;
background: linear-gradient(90deg,
var(--m-bad) 0 var(--ok-a), var(--m-ok) var(--ok-a) var(--ok-b), var(--m-bad) var(--ok-b) 100%);
}
.ex-m-range::-moz-range-track{
height:8px; border-radius:99px;
background: linear-gradient(90deg,
var(--m-bad) 0 var(--ok-a), var(--m-ok) var(--ok-a) var(--ok-b), var(--m-bad) var(--ok-b) 100%);
}
.ex-m-range::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none;
width:22px; height:22px; margin-top:-7px; border-radius:50%;
background: var(--surface); border:2.5px solid #16a34a;
box-shadow: var(--sh-2); transition: border-color .15s, transform .1s;
}
.ex-m-range::-moz-range-thumb{
width:18px; height:18px; border-radius:50%;
background: var(--surface); border:2.5px solid #16a34a; box-shadow: var(--sh-2);
}
.ex-m-range:active::-webkit-slider-thumb{ transform: scale(1.12); }
.ex-m-range:focus-visible::-webkit-slider-thumb{ box-shadow: var(--ring); }
.ex-measure.is-bad .ex-m-range::-webkit-slider-thumb{ border-color: var(--danger); }
.ex-measure.is-bad .ex-m-range::-moz-range-thumb{ border-color: var(--danger); }
/* Ölçülmedi: soluk iz, gri başparmak */
.ex-m-range.is-empty{ opacity:.5; }
.ex-m-range.is-empty::-webkit-slider-thumb{ border-color: var(--border-strong); }
.ex-m-range.is-empty::-moz-range-thumb{ border-color: var(--border-strong); }
.ex-m-range:disabled{ cursor:default; opacity:.6; }
.ex-measure.is-bad .ex-measure-note{ color: var(--danger); font-weight:600; }
/* --- arıza kodu satırı --- */
.ex-code-row{
display:grid; grid-template-columns: 110px 1fr 150px 120px 34px;
gap:6px; align-items:center; margin-bottom:5px;
}
.ex-code-row .mono{ text-transform:uppercase; }
/* --- fotoğraflar --- */
.ex-photos{
display:grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
gap:8px;
}
.ex-photo{
position:relative; border-radius: var(--r-sm); overflow:hidden;
border:1px solid var(--border); background: var(--surface-2);
aspect-ratio: 4 / 3;
}
.ex-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.ex-photo .ex-photo-del{
position:absolute; top:4px; right:4px;
width:24px; height:24px; border:0; border-radius:6px;
background: rgba(10,15,30,.72); color:#fff;
display:grid; place-items:center; font-size:11px;
opacity:0; transition:.14s;
}
.ex-photo:hover .ex-photo-del{ opacity:1; }
/* Dokunmatikte hover yok: silme düğmesi hep görünür olmalı, yoksa
telefondan eklenen fotoğraf hiç silinemiyordu. */
@media (hover: none){
.ex-photo .ex-photo-del{ opacity:1; width:30px; height:30px; }
}
.ex-photo-add{
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:5px; aspect-ratio: 4 / 3;
border:1px dashed var(--border-strong); border-radius: var(--r-sm);
background: transparent; color: var(--text-muted);
font-size:11.5px; transition:.15s;
}
.ex-photo-add:hover{ border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
/* ---------------------------------------------------------
RAPOR ÜST BANDI — plaka ve sonuç
Örnek sektör raporlarında plaka belgenin en belirgin öğesi:
belgeyi eline alan kişi önce "hangi araç" sorusunu soruyor.
Antet ile gövde arasında duran bu bant o soruyu tek bakışta
cevaplıyor.
--------------------------------------------------------- */
.ex-band{
display:flex; align-items:center; gap:16px; flex-wrap:wrap;
padding:14px 16px; margin-bottom:14px;
border-radius: var(--r-md);
background: var(--surface-2);
border:1px solid var(--border);
}
.ex-band-main{ flex:1 1 220px; min-width:0; }
.ex-band-car{
font-family: var(--display-font);
font-size:17px; font-weight:700; letter-spacing:-.02em;
color: var(--text);
}
.ex-band-sub{ font-size:12px; color: var(--text-muted); margin-top:2px; }
/* Plaka kutusu — TR plakası biçiminde */
.ex-plate{
flex:0 0 auto;
display:inline-flex; align-items:stretch;
border:2px solid #111827; border-radius:6px;
background:#fff; overflow:hidden;
font-family: var(--mono-font);
}
.ex-plate b{
display:grid; place-items:center;
width:17px; padding:0 2px;
background:#1e3a8a; color:#fff;
font-size:7px; font-weight:700; letter-spacing:.02em;
}
.ex-plate span{
padding:5px 12px;
color:#111827; font-size:20px; font-weight:800; letter-spacing:.06em;
white-space:nowrap;
}
/* MOBİL ŞEMA — yatay kaydırma.
Açınım şeması üç görünümü yan yana taşıyor; 360 piksellik ekrana
sığdırınca panel adı ~5 piksele düşüp okunmuyor, kapılar parmakla
isabet edilemeyecek kadar daralıyordu. Dar ekranda şema en az 500
piksel kalıyor ve kutu yatay kayıyor; açılışta ortaya (üst görünüme)
kaydırılıyor (expertise-new.php). Yanlarda soluk gölge "devamı var"
diyor. */
@media (max-width: 575.98px){
.ex-car{
max-width:none; margin:0 -4px;
overflow-x:auto; overflow-y:hidden;
-webkit-overflow-scrolling: touch; scrollbar-width: thin;
overscroll-behavior-x: contain;
background:
linear-gradient(90deg, var(--surface) 30%, transparent) left / 18px 100% no-repeat local,
linear-gradient(270deg, var(--surface) 30%, transparent) right / 18px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.14), transparent) left / 10px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.14), transparent) right / 10px 100% no-repeat scroll;
}
.ex-car-svg{ width:500px; max-width:none; }
.ex-code-row{ grid-template-columns: 1fr 1fr; }
/* Kontrol maddesi: uzun etiket düğmeleri sıkıştırmasın, düğmeler
parmak boyunda (25 → 34 piksel). */
.ex-check{ flex-wrap:wrap; row-gap:4px; }
.ex-check-label{ flex-basis:100%; }
.ex-check-states{ width:100%; }
.ex-check-states label{ flex:1 1 0; min-width:0; height:34px; font-size:14px; }
/* Ölçüm: ad tam satır, kutu + birim altında, çubuk tam genişlik */
.ex-measure-head .ex-m-name{ flex-basis:100%; }
.ex-measure-head input{ flex:1 1 auto; width:auto; height:34px; }
.ex-m-range{ height:34px; }
.ex-measure-head{ flex-wrap:wrap; }
.ex-plate span{ font-size:17px; padding:4px 9px; }
}
/* =========================================================
18. YAZDIRMA
Bu bölüm dosyanın SONUNDA duruyor ve bu bilinçli: yazdırma
kuralları ekran kurallarını ezmek zorunda, CSS'te de son yazan
kazanıyor.
EN ÖNEMLİ KURAL — TEK PANEL BASILIR.
Bu panelde sekmeler kapanmıyor; açık her sekmenin içeriği DOM'da
duruyor. Yazdırmada panelleri görünür yapan genel bir kural
yazılırsa 6 sekme açıkken 6 sayfanın tamamı basılıyor. Aşağıda
.tab-pane-x display'ine HİÇ dokunulmuyor; taban kural (display:none)
ve .active (display:block) yazdırmada da aynen geçerli kalıyor.
========================================================= */
@media print{
@page{
size: A4 portrait;
/* Altta biraz daha pay: tarayıcının kendi alt bilgisi (sayfa
numarası, tarih) oraya basılıyor. */
margin: 12mm 11mm 15mm;
}
/* --- KOYU TEMA KAĞIDA BASILMAZ ---
Kullanıcı koyu temada çalışıyor olabilir. Koyu zemini kağıda
basmak mürekkebi bitiriyor ve çıktı okunmuyor. Jetonları
yazdırma için aydınlık değerlere sabitliyoruz; böylece tema ne
olursa olsun kağıt aynı çıkıyor. */
:root,
[data-bs-theme="dark"],
[data-bs-theme="light"]{
--app-bg:#ffffff;
--surface:#ffffff;
--surface-2:#ffffff;
--surface-3:#eef1f6;
--border:#d7dce5;
--border-strong:#b9c1cf;
--text:#111827;
--text-soft:#333d4f;
--text-muted:#5c6881;
--sh-1:none; --sh-2:none; --sh-3:none;
--dv-1:#3b6ef6;
--dv-2:#d97706;
--dv-3:#0891b2;
}
html, body{
height:auto !important;
overflow:visible !important;
background:#fff !important;
color:#111827 !important;
/* Kağıtta ölçü pt: px ekran çözünürlüğüne bağlı, pt değil */
font-size:9.5pt !important;
}
/* --- KABUK GİTSİN --- */
.sidebar, .sidebar-backdrop, .topbar, .tabstrip, .statusbar,
.toast-stack, .ctx-menu, .ch-tip, .tab-empty, .tab-loading,
.modal, .modal-backdrop, .offcanvas, .dropdown-menu{
display:none !important;
}
.app-shell, .app-main{
display:block !important;
height:auto !important;
overflow:visible !important;
}
.tab-content-area{
position:static !important;
height:auto !important;
overflow:visible !important;
}
/* display'e DOKUNMUYORUZ — yukarıdaki açıklamaya bak */
.tab-pane-x{
position:static !important;
overflow:visible !important;
padding:0 !important;
background:none !important;
animation:none !important;
}
/* --- EKRANA AİT PARÇALAR ---
Kendi "basılmaz" sınıfımızı tutmuyoruz: Bootstrap 5.3 zaten
.d-print-none veriyor (doğrulandı). Aşağıda o sınıfa son sözü
veren bir kural var — gerekçesi orada yazılı. */
.ph-actions,
.empty-state button,
.empty-state .btn,
.cx-actions .btn,
button, .btn{
display:none !important;
}
/* --- ANTETLİ KAĞIT AÇILIR ---
Yerleşim 16. bölümde bir kez yazılı; burada yalnızca KAĞIT
ÖLÇÜSÜ eziliyor. Yerleşimi iki yerde tutmak, birinde yapılan
düzeltmenin çıktıda görünmemesi demekti. */
.doc-sheet{
display:block !important;
margin:0 0 7mm;
padding-bottom:3mm;
border-bottom-width:1.6pt;
}
.doc-head { gap:10mm; }
.doc-brand{ gap:4mm; }
.doc-logo { width:17mm; height:17mm; }
.doc-logo-text{
border-radius:2mm;
font-size:15pt;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.doc-firm h1{ font-size:15pt; margin-bottom:1mm; }
.doc-firm p { font-size:8pt; line-height:1.45; }
.doc-meta { max-width:70mm; }
.doc-kind { font-size:11.5pt; }
.doc-title { font-size:9.5pt; margin-bottom:2mm; }
.doc-meta dl{ gap:.6mm 3mm; font-size:8pt; }
/* --- BELGE SAYFASI ---
Ekranda kağıt taklidi yapan kutu, kağıtta kağıdın kendisi:
çerçeve, gölge ve iç boşluk @page kenar boşluğuyla çakışmasın. */
.doc-page{
max-width:none !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
background:none !important;
}
.doc-parties{ gap:3mm; margin-bottom:4mm; }
.doc-parties > div{
padding:2.5mm 3mm;
background:#f6f8fc !important;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.doc-parties h3, .doc-block h3, .doc-sum-note h3{ font-size:6.5pt !important; }
.doc-parties strong{ font-size:10pt !important; }
.doc-parties p, .doc-block p, .doc-sum-note p{ font-size:8pt !important; }
.doc-block { gap:4mm; margin-bottom:4mm; padding:2.5mm 3mm; }
.doc-section{ margin:4mm 0 1.5mm; font-size:7.5pt !important; }
.doc-sum{ gap:6mm; margin-top:4mm; break-inside:avoid; }
.doc-sum-table{ font-size:8.5pt !important; }
.doc-sum-table th, .doc-sum-table td{ padding:1mm 0 !important; }
.doc-sum-grand th, .doc-sum-grand td{
font-size:11pt !important;
padding-top:2mm !important;
border-top-width:1.2pt;
}
.doc-signs{ gap:8mm; margin-top:8mm; }
.doc-signs > div{ padding-top:12mm; font-size:8pt !important; }
.doc-signs small{ font-size:7pt !important; }
/* --- SAYFA BAŞLIĞI --- */
.page-head{
display:block !important;
margin:0 0 4mm !important;
padding:0 !important;
border:0 !important;
}
.page-head h4{
font-size:12pt !important;
margin:0 0 1mm !important;
}
/* Ekrandaki renkli ikonlar kağıtta gürültü: başlık metni yeter */
.page-head h4 i, .card-x-head > i:first-child{ display:none !important; }
.ph-sub{ font-size:8.5pt !important; color:#5c6881 !important; }
/* --- KARTLAR --- */
.card-x{
box-shadow:none !important;
border:0.6pt solid #d7dce5 !important;
border-radius:1.5mm !important;
break-inside: avoid;
page-break-inside: avoid;
background:#fff !important;
}
.card-x-head{
font-size:9pt !important;
font-weight:700 !important;
padding:2.5mm 3mm !important;
background:#f6f8fc !important;
border-bottom:0.6pt solid #d7dce5 !important;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.card-x-body{ padding:3mm !important; }
.card-x-body.p-0{ padding:0 !important; }
/* Bootstrap ızgara boşlukları kağıtta fazla geniş */
.row.g-3{ --bs-gutter-x:4mm; --bs-gutter-y:4mm; }
.mb-3{ margin-bottom:4mm !important; }
/* --- KPI KUTULARI ---
Dörtlü sıra kağıtta da dört kolonda kalsın: Bootstrap'in
col-6/col-xl-3 kırılımı yazdırmada "xl" sayılmıyor ve kutular
ikişer ikişer alt alta geçiyordu. */
.row > [class*="col-xl-3"]{ flex:0 0 25% !important; max-width:25% !important; }
.row > [class*="col-xl-7"]{ flex:0 0 58.333% !important; max-width:58.333% !important; }
.row > [class*="col-xl-5"]{ flex:0 0 41.667% !important; max-width:41.667% !important; }
.kpi-ico{
width:8mm !important; height:8mm !important; flex-basis:8mm !important;
font-size:9pt !important;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.fs-xl{ font-size:12pt !important; }
.fs-lg{ font-size:9.5pt !important; }
.fs-md{ font-size:8.5pt !important; }
.fs-sm, .fs-xs, .fs-xxs{ font-size:7.5pt !important; }
/* --- TABLOLAR ---
thead'i table-header-group yapmak kritik: uzun tablo ikinci
sayfaya taşınca başlık satırı tekrar basılıyor, yoksa ikinci
sayfadaki sayıların hangi kolon olduğu anlaşılmıyor. */
.table-wrap{ overflow:visible !important; max-height:none !important; }
.table-x{ font-size:8pt !important; width:100% !important; }
.table-x thead{ display:table-header-group; }
.table-x tfoot{ display:table-footer-group; }
.table-x tr{ break-inside:avoid; page-break-inside:avoid; }
.table-x th{
background:#f6f8fc !important;
color:#333d4f !important;
font-size:7.5pt !important;
padding:1.6mm 2mm !important;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.table-x td{ padding:1.6mm 2mm !important; }
.badge-x{
font-size:7pt !important;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
/* --- GRAFİKLER ---
Kütüphane kullanmamanın asıl kazancı burada: çubuklar sıradan
DOM elemanı olduğu için kağıda olduğu gibi basılıyor. Tek
gereken, tarayıcının "arka plan basma" kısıtını kapatmak. */
.ch-bar-fill, .ch-col-bar, .ch-stack > i, .ch-legend i,
.ch-bar-track, .ch-stack{
print-color-adjust: exact !important;
-webkit-print-color-adjust: exact !important;
}
.ch-cols{ height:30mm !important; }
.ch-bar{ font-size:8pt !important; padding:0 !important; margin:0 !important; }
.ch-bar:hover, .ch-col:hover{ background:none !important; }
.ch-bars{ gap:1.4mm !important; }
.ch-legend{ font-size:7.5pt !important; }
.ch-xaxis > span{ font-size:6.5pt !important; }
.ch-note{ font-size:7pt !important; color:#5c6881 !important; }
.ch-plot, .card-x{ break-inside:avoid; }
/* --- BOŞ DURUM --- */
.empty-state{ padding:6mm 4mm !important; }
.empty-state > i:first-child{ font-size:16pt !important; margin-bottom:2mm !important; }
.empty-state h5{ font-size:9.5pt !important; }
.empty-state p{ font-size:8pt !important; }
/* --- BAĞLANTILAR ---
Kağıtta tıklanacak bir şey yok; mavi altı çizili metin yanıltıcı.
URL'yi de yazdırmıyoruz: hepsi aynı panelin iç adresleri. */
a, a:visited{
color:#111827 !important;
text-decoration:none !important;
}
/* --- ALTLIK --- */
.doc-foot{
display:block !important;
margin-top:6mm;
padding-top:2.5mm;
font-size:7.5pt !important;
}
.doc-foot p{ margin:0 0 1mm; line-height:1.5; }
.doc-foot-sign{
margin:2mm 0 0 !important;
padding-top:1.5mm;
}
/* İmza alanı rapor sayfalarında yok, belge sayfalarında var;
ikisi de aynı kuralla çalışıyor çünkü görünürlüğü işaretleyen
şey .doc-signs'in kendisi. */
.doc-signs{ display:flex !important; break-inside:avoid; }
/* ---------------------------------------------------------
EKSPERTİZ RAPORU
Renkler KAĞITTA DA ÇIKMALI: panel durumu rengin kendisiyle
anlatılıyor ve rapor müşteriye kağıt olarak veriliyor.
print-color-adjust:exact olmadan tarayıcı dolguları atıyor,
bütün paneller beyaz çıkıyor ve şema anlamsızlaşıyor.
(Harf kodu yine duruyor; renk gitse de belge okunabilir
kalıyor — ama okunabilir ile profesyonel aynı şey değil.)
--------------------------------------------------------- */
.ex-sp-shape, .ex-chip, .ex-legend-item, .ex-score,
.ex-car-tire, .ex-car-rim, .ex-car-hub, .ex-car-trim, .ex-car-bumper,
.ex-measure-bar, .ex-measure-bar span,
.ex-check-states input:checked + label,
.ex-plate, .ex-band{
print-color-adjust: exact !important;
-webkit-print-color-adjust: exact !important;
}
/* Şema ve bölümler sayfa ortasından bölünmesin */
.ex-car, .ex-score, .ex-panel-row, .ex-measure,
.ex-check, .ex-photo, .ex-legend{ break-inside: avoid; }
/* SVG kağıtta vektör kalıyor; yalnızca ölçüsünü veriyoruz.
Yazı boyutları viewBox birimiyle ölçeklendiği için ayrıca
küçültmek gerekmiyor — dikdörtgen ızgarada her hücreyi tek tek
küçültmek zorundaydık, SVG'de bu dert ortadan kalktı. */
/* Açınım şeması üç görünümü yan yana taşıyor: 72 mm'de panel adı
~3 puntoya düşüp okunmuyordu. 125 mm'de ad ~5 punto, harf ~10. */
.ex-car{ max-width:110mm; margin:0 auto; }
/* 110 mm: önden/arkadan görünüm eklenince şema uzadı (514×712);
125 mm'de 173 mm yer tutup A4'ü taşırıyordu. */
.ex-car-svg{ width:110mm; }
/* Dikiş kağıtta da BEYAZ olmalı: --surface değişkeni basılmıyor */
/* İnce koyu hat kağıtta da (eskiden beyaz dikişti) */
.ex-sp-shape{ stroke:#6b7685; stroke-width:.9; }
.ex-car-outline{ stroke:#111827; opacity:.85; }
.ex-car-tire { fill:#1f2937; }
.ex-car-rim { fill:#9ca3af; }
/* Kağıtta füme cam bir ton açık: koca koyu alan mürekkep harcıyor */
.ex-car-glass { fill:#8391a7; stroke:#334155; }
.ex-car-trim { fill:#374151; }
/* Üst bant — plaka kağıtta da belirgin kalmalı */
.ex-band{
padding:3mm 4mm; margin-bottom:4mm;
border-radius:2mm; border-color:#d1d5db;
background:#f8fafc;
}
.ex-band-car{ font-size:11pt; }
.ex-band-sub{ font-size:7.5pt; }
.ex-plate{ border-width:0.6mm; border-radius:1.5mm; }
.ex-plate b{ width:4mm; font-size:5pt; }
.ex-plate span{ padding:1.5mm 3mm; font-size:14pt; }
.ex-sp-shape{ stroke-width:.9; }
.ex-car-outline{ stroke:#111827; opacity:.7; }
.ex-car-glass{ fill:#8391a7; stroke:#334155; }
.ex-car-trim { fill:#374151; }
.ex-legend-item{ font-size:6.5pt; padding:0.6mm 2mm; }
.ex-panel-list{ grid-template-columns: 1fr 1fr; gap:0.8mm; }
.ex-panel-row{ font-size:7pt; padding:1mm 2mm; border-radius:1mm; }
.ex-panel-row .ex-chip{ width:4mm; height:4mm; font-size:6pt; }
.ex-score{ padding:3mm 4mm; border-radius:2mm; }
.ex-score-val{ font-size:22pt; }
.ex-score-text strong{ font-size:9pt; }
.ex-score-text span{ font-size:7pt; }
.ex-check{ padding:0.8mm 0; font-size:7.5pt; }
.ex-check-label{ font-size:7.5pt; }
.ex-measure-head{ font-size:7.5pt; }
.ex-measure-note{ font-size:6.5pt; }
.ex-photos{ grid-template-columns: repeat(4, 1fr); gap:1.5mm; }
.ex-photo{ border-radius:1mm; }
/* ===== SON SÖZ: d-print-none =====
Bu kural bilerek bu blokta EN SONDA duruyor.
Bootstrap'in .d-print-none'u da display:none !important veriyor
ama app.css bootstrap.min.css'ten SONRA yükleniyor. Yukarıdaki
.page-head{display:block !important} ile .d-print-none aynı
ağırlıkta (tek sınıf) olduğu için sonra yazan kazanıyordu ve
service-print sayfasının ekran başlığı — "Yazdır" düğmesiyle
birlikte — kağıda basılıyordu.
Burada tekrar yazarak son sözü d-print-none'a veriyoruz. Bu
bloğa yeni bir display kuralı eklenecekse ALTINA değil ÜSTÜNE
eklenmeli. */
.d-print-none{ display:none !important; }
}
/* ---------------------------------------------------------
DESTEK YAZIŞMASI — EDİTÖR VE DOSYA EKLERİ
--------------------------------------------------------- */
/* Editör kabuğu gerçek bir form alanı gibi görünmeli: kullanıcı
`contenteditable` ile