/* OYS prototip — TemaOptik kırmızı-beyaz temasına yakın, hafif.
TEMA: Tüm renkler değişken üzerinden verilir. Açık tema :root'ta,
koyu tema [data-tema="koyu"] altında ezilir. Sabit renk yazmayın —
yazarsanız koyu temada okunmaz kalır. */
:root {
/* Tema ana rengi: CAYENNE (koyu kırmızı) — kullanıcı isteği */
--kirmizi: #8c1500; /* değişken adı korunuyor; artık cayenne */
--kirmizi-koyu: #6e1000;
--kirmizi-yazi: #fff; /* cayenne zemin üstündeki yazı */
--gri: #f4f5f7; /* sayfa zemini */
--metin: #23262b;
--kenar: #dfe2e7;
/* Yüzeyler */
--yuzey: #fff; /* panel/kart/tablo zemini */
--yuzey-2: #fafafa; /* tablo başlığı, ikincil zemin */
--yuzey-3: #eceef1; /* sekme, buton zemini */
--yuzey-kilitli: #f8f9fa; /* salt okunur input */
--cizgi: #eef0f3; /* tablo satır ayracı (kenardan açık) */
/* Yazı tonları */
--metin-2: #555; /* etiket, ikincil yazı */
--metin-3: #6b7280; /* ipucu, özet */
--metin-4: #888; /* silik */
--metin-pasif: #b8bcc4; /* devre dışı */
--bos-yazi: #9aa0a8;
/* Anlamsal renkler */
--yesil: #0a7d33;
--mavi: #0d47a1;
--turkuaz: #00796b;
--koyu-buton: #23262b;
/* Rozet/uyarı zeminleri */
--rozet-zemin: #e8f5e9; --rozet-yazi: #0a7d33;
--sgk-zemin: #e3f2fd; --sgk-yazi: #1565c0;
--medula-zemin: #ede7f6; --medula-yazi: #5e35b1;
--taslak-zemin: #fff3e0; --taslak-yazi: #e65100;
--hata-zemin: #fdecea;
--ok-kenar: #c8e6c9; --ok-zemin: #f1f8f4;
--err-kenar: #ffcdd2; --err-zemin: #fdf3f2;
--golge: rgba(0,0,0,.06);
}
/* ---- KOYU TEMA ----
Cayenne koyu zeminde çok karanlık kaldığı için biraz açıldı (#b8321a):
marka kimliği korunur ama kontrast okunur seviyeye çıkar. */
[data-tema="koyu"] {
/* Cayenne koyu zeminde okunur tona açıldı (kontrast 2.76 → ~4.7):
logo/link/vurgu metni bu renkle yazıldığı için WCAG sınırını geçmeli. */
--kirmizi: #ef6a4d;
--kirmizi-koyu: #ff8163;
--kirmizi-yazi: #2a0d07;
--gri: #14161a;
--metin: #e6e8eb;
--kenar: #333941;
--yuzey: #1c1f24;
--yuzey-2: #23272e;
--yuzey-3: #2a2f37;
--yuzey-kilitli: #23272e;
--cizgi: #2b3037;
--metin-2: #b6bcc4;
--metin-3: #9aa1ab;
--metin-4: #868d96;
--metin-pasif: #5c636d;
--bos-yazi: #868d96;
--yesil: #4caf68;
--mavi: #6aa8f0;
--turkuaz: #4db6a4;
--koyu-buton: #3a414b;
--rozet-zemin: #1e3524; --rozet-yazi: #7fd694;
--sgk-zemin: #17293d; --sgk-yazi: #7fb8f0;
--medula-zemin: #2a2340; --medula-yazi: #b39ddb;
--taslak-zemin: #3d2c15; --taslak-yazi: #ffb74d;
--hata-zemin: #3a1f1c;
--ok-kenar: #2e5c3a; --ok-zemin: #1a2a1f;
--err-kenar: #6b2b28; --err-zemin: #2e1c1a;
--golge: rgba(0,0,0,.4);
}
/* ---- DESERT BLOOM (açık) ----
Grafana'nın Desert Bloom teması esinli: sıcak kum zemin, terrakota vurgu.
Cayenne, paletin sıcaklığına uyacak şekilde terrakotaya kaydırıldı. */
[data-tema="desert"] {
--kirmizi: #e35205; /* Desert Bloom — canlı yanık turuncu */
--kirmizi-koyu: #b83d04;
--kirmizi-yazi: #fff;
--gri: #ebe0d1; /* kum — koyulaştı */
--metin: #302620;
--kenar: #d3c3ae;
--yuzey: #f7efe2;
--yuzey-2: #e9dcc9;
--yuzey-3: #ddceb9;
--yuzey-kilitli: #e9dcc9;
--cizgi: #e0d3c1;
--metin-2: #5c4a3c;
--metin-3: #6b5645; /* ipucu/özet */
--metin-4: #8a7461;
--metin-pasif: #b0a08d;
--bos-yazi: #8a7461;
--yesil: #6b8f3a;
--mavi: #3d6b8f;
--turkuaz: #2f7d6e;
--koyu-buton: #5b4636;
--rozet-zemin: #e8efd9; --rozet-yazi: #4d6b28;
--sgk-zemin: #dde8f0; --sgk-yazi: #2f5b7d;
--medula-zemin: #e8e0ef; --medula-yazi: #6b4d8f;
--taslak-zemin: #f7e6cc; --taslak-yazi: #a35f14;
--hata-zemin: #f7e0d9;
--ok-kenar: #cfe0b8; --ok-zemin: #eff5e6;
--err-kenar: #e8c3b4; --err-zemin: #faeae4;
--golge: rgba(90,60,40,.10);
}
/* ---- TRON (koyu) ----
Grafana'nın Tron temasına sadık: neredeyse siyah zemin, neon camgöbeği vurgu.
Ana renk (--kirmizi değişkeni) camgöbeğidir; ad korunuyor çünkü CSS'in tamamı
bu değişkeni "tema ana rengi" olarak kullanıyor. */
[data-tema="tron"] {
--kirmizi: #00d3ee; /* Tron neon camgöbeği — tema ana rengi */
--kirmizi-koyu: #4ae3ff; /* hover: daha parlak */
--kirmizi-yazi: #04161a; /* neon zemin üstünde koyu yazı okunur */
--gri: #0a1114; /* neredeyse siyah */
--metin: #cfeff5;
--kenar: #12474f; /* camgöbeği çizgi */
--yuzey: #0d1a1f;
--yuzey-2: #12242b;
--yuzey-3: #16303a;
--yuzey-kilitli: #12242b;
--cizgi: #103038;
--metin-2: #7fc3d1;
--metin-3: #6aa8b5;
--metin-4: #588e99;
--metin-pasif: #3d626b;
--bos-yazi: #588e99;
--yesil: #2ee6a8;
--mavi: #35c8f0;
--turkuaz: #1fd9d0;
--koyu-buton: #16303a;
--rozet-zemin: #0d3329; --rozet-yazi: #2ee6a8;
--sgk-zemin: #0d2b3d; --sgk-yazi: #35c8f0;
--medula-zemin: #1f2440; --medula-yazi: #9d8cf5;
--taslak-zemin: #3a2a0d; --taslak-yazi: #ffc247;
--hata-zemin: #3a1512;
--ok-kenar: #1a6b52; --ok-zemin: #0b2620;
--err-kenar: #7a2b1f; --err-zemin: #2a100d;
--golge: rgba(0,0,0,.55);
}
/* Koyu paletlerde tarayıcı yerleşik denetimleri (input/select/scrollbar) uysun */
[data-tema="koyu"], [data-tema="tron"] { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Segoe UI", Roboto, sans-serif; color: var(--metin); background: var(--gri); }
/* Form öğeleri body font'unu miras alsın — aksi halde bazı tarayıcılar input'a kendi
varsayılan font'unu verir ve Türkçe aksanlı harfleri (İ ı ü ş ğ ç ö) bozuk gösterir. */
input, select, textarea, button { font-family: inherit; }
/* Excel ikonu — projede STANDART. Kullanım: X
(yeşil Excel rozeti). Excel indir/yükle/aktar butonlarında hep bu kullanılır. */
.excel-ikon { display:inline-block; background:#1D6F42; color:#fff; font-weight:800;
font-size:12px; border-radius:3px; padding:1px 5px; line-height:1.2; }
/* Üst menü */
/* ---- ÜST BANT ----
Menü öğeleri farklı elementlerden oluşuyor (a / span / açılır menü). Göz yorulmasın
diye HEPSİ aynı yükseklik, aynı yatay ritim ve aynı tipografiyle hizalanır. */
.ust-menu { display: flex; align-items: stretch; gap: 20px; background: var(--yuzey);
border-bottom: 2px solid var(--kirmizi); padding: 0 20px; height: 56px;
position: sticky; top: 0; z-index: 100; }
.logo { font-size: 22px; font-weight: 800; color: var(--kirmizi); text-decoration: none;
letter-spacing: .5px; display: flex; align-items: center; padding-right: 20px;
border-right: 1px solid var(--kenar); }
.ust-menu nav { display: flex; align-items: stretch; gap: 2px; flex: 1; }
/* Tüm menü öğeleri için ortak taban: eşit yükseklik + eşit iç boşluk */
.ust-menu nav > a,
.ust-menu nav > span,
.ust-menu nav .menu-tetik {
display: flex; align-items: center; gap: 6px;
height: 100%; padding: 0 12px;
font-size: 13.5px; font-weight: 600; letter-spacing: .1px;
color: var(--metin); text-decoration: none; white-space: nowrap;
border-bottom: 2px solid transparent; margin-bottom: -2px; /* alt çizgiyle hizala */
transition: color .12s, background .12s;
}
.ust-menu nav > a:hover,
.ust-menu nav .menu-tetik:hover {
color: var(--kirmizi); background: var(--gri); border-bottom-color: var(--kirmizi);
}
.ust-menu nav .pasif { color: var(--metin-pasif); cursor: default; }
.ust-menu nav .pasif:hover { background: none; border-bottom-color: transparent; }
/* Dış entegrasyon linkleri (Medula / ÜTS) — İşlemler'in sağında */
.dis-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; text-decoration: none;
padding: 4px 8px; border-radius: 6px; font-size: 14px; }
.dis-link.medula { color: var(--mavi); }
.dis-link.uts { color: var(--turkuaz); }
.dis-link:hover { background: var(--gri); }
.dis-logo { background: var(--mavi); color: var(--yuzey); font-size: 11px; font-weight: 800; padding: 2px 6px;
border-radius: 4px; letter-spacing: .5px; }
.dis-logo.uts { background: var(--turkuaz); }
/* Hover açılır menü (Satış) */
/* Açılır menü sarmalayıcısı da bant yüksekliğine uyar (öğeler eşit hizada dursun) */
.menu-acilir { position: relative; display: flex; align-items: stretch; }
.menu-tetik { cursor: pointer; }
/* ---- AÇILIR MENÜ PANELİ (tüm açılır menüler için REFERANS TARZ) ----
Kurallar: üst banttaki tipografinin aynısı; renk DEĞİŞMEZ (ziyaret edilmiş mor,
varsayılan mavi, alt çizgi YOK); satırlar tek satırda durur, kaymaz.
Yeni açılır menü eklerken bu bloğa uyulur — ayrı stil yazılmaz. */
.menu-panel {
/* TABULARLIK: satır yüksekliği tek değişkenden gelir → tüm menülerde aynı ritim */
--menu-satir: 34px;
position: absolute; top: 100%; left: 0; background: var(--yuzey);
border: 1px solid var(--kenar); border-radius: 8px;
box-shadow: 0 8px 24px var(--golge); padding: 5px 0;
/* Panel, en uzun satır kadar genişler: metin ALT SATIRA GEÇMEZ, sağa uzar */
width: max-content; min-width: 210px; max-width: 420px;
display: none; z-index: 90;
/* Panel genelinde tek tipografi: satırlar kendi font/hizasını uydurmaz */
font-size: 13px; font-weight: 600; letter-spacing: .1px;
font-variant-numeric: tabular-nums; /* rakamlar eşit genişlikte hizalanır */
}
.menu-acilir:hover .menu-panel { display: block; }
/* Satırlar: eşit yükseklik, ortak taban çizgisi, tek satır (sarmaz) */
.menu-panel a,
.menu-panel a:link,
.menu-panel a:visited,
.menu-panel a:active,
.menu-panel .pasif {
display: flex; align-items: center;
box-sizing: border-box;
padding: 0 16px; height: var(--menu-satir); min-height: var(--menu-satir);
font: inherit; line-height: var(--menu-satir); /* panelin tipografisini devralır */
color: var(--metin); /* ziyaret edilmiş rengi ezilir */
text-decoration: none; /* alt çizgi yok */
white-space: nowrap; /* satır kaymasın, iki satıra bölünmesin */
border-left: 2px solid transparent;
transition: background .12s, color .12s;
}
.menu-panel a:hover,
.menu-panel a:focus-visible {
background: var(--gri); color: var(--kirmizi); border-left-color: var(--kirmizi);
}
/* Gölgeli (yetkisiz) menü öğesi: soluk + tıklanamaz + hover yok */
.menu-panel .pasif { color: var(--metin-pasif, #999); cursor: not-allowed; opacity: .55; }
.menu-panel .pasif:hover { background: none; }
/* Ayraçlı satır: üst çizgi ekler ama satır yüksekliğini BOZMAZ (tabularlık korunur) */
.menu-panel a.menu-ayrac { position: relative; margin-top: 5px; color: var(--metin-3); }
.menu-panel a.menu-ayrac::before { content: ""; position: absolute; left: 0; right: 0; top: -3px;
border-top: 1px solid var(--kenar); }
/* Alt menü (bir ana raporun altında girintili yardımcı ekranlar) */
.menu-panel a.menu-alt { padding-left: 22px; font-size: 12.5px; color: var(--metin-2); }
/* Alt başlık (grup etiketi, tıklanmaz) — ör. "Diğer ÜTS Sorguları" */
.menu-panel .menu-baslik { padding: 7px 16px 3px; font-size: 11px; font-weight: 700;
color: var(--metin-pasif); text-transform: uppercase; letter-spacing: .3px; }
.menu-panel .menu-baslik.menu-ayrac { position: relative; margin-top: 6px; }
.menu-panel .menu-baslik.menu-ayrac::before { content: ""; position: absolute; left: 0; right: 0;
top: -2px; border-top: 1px solid var(--kenar); }
.ust-menu .sag { display: flex; align-items: center; gap: 14px; font-size: 14px; }
/* Sağ üst: firma etiketi + kullanıcı (orijinaldeki "2704 | Aygör Optik" + avatar) */
.firma-etiket { color: var(--yesil); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.kullanici-tetik { display: flex; align-items: center; gap: 8px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--yuzey-3);
color: var(--metin-2); display: inline-flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 13px; }
.kullanici-ad { font-weight: 600; color: var(--metin-2); font-size: 13px; }
/* Sağdaki panel sağa hizalanır (ekran dışına taşmasın) */
.menu-panel.sag-panel { left: auto; right: 0; }
.cikis-link { color: var(--kirmizi) !important; font-weight: 700; }
/* Ayarlar > Diğer İşlemler blokları */
.ayar-grup { color: var(--kirmizi); font-size: 14px; margin: 18px 0 10px;
border-bottom: 1px solid var(--kenar); padding-bottom: 6px; }
.ayar-grup:first-of-type { margin-top: 4px; }
.ayar-butonlar { display: flex; gap: 10px; flex-wrap: wrap; }
.ayar-butonlar button { flex: 1 1 240px; }
.ust-menu .sube { color: var(--yesil); font-weight: 700; }
.ust-menu .cikis { color: var(--kirmizi); text-decoration: none; font-weight: 700; }
main { max-width: 1200px; margin: 24px auto; padding: 0 20px; }
/* Veri yoğun ekranlar (ÜTS listeleri, stok, satış) tam genişliği kullanır */
main.genis { max-width: none; padding: 0 24px; }
/* Orta genişlik: 1200px dar, tam genişlik fazla gelen listeler (müşteri vb.) */
main.orta { max-width: 1600px; padding: 0 24px; }
/* Sayısal hücreler: sağa yaslı + tabular rakam (basamaklar alt alta hizalanır) */
td.sayi, th.sayi { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Başlık + butonlar */
.sayfa-baslik { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sayfa-baslik h2 { margin: 0; }
/* Başlığın sağ tarafı: rozet + hızlı erişilmesi gereken form anahtarları */
.baslik-sag { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* "ÜTS'ye Bildirilsin Mi" — sayfanın en üstünde, scroll gerektirmeden görünür */
.uts-bildir-ust { display: flex; flex-direction: row; align-items: center; gap: 8px;
background: var(--yuzey); border: 1px solid var(--kenar); border-radius: 6px;
padding: 7px 12px; font-weight: 600; font-size: 13px; white-space: nowrap; cursor: pointer; }
.uts-bildir-ust input { cursor: pointer; }
.btn-birincil { background: var(--kirmizi); color: var(--yuzey); border: none; padding: 9px 16px; border-radius: 6px;
font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-birincil:hover { background: var(--kirmizi-koyu); }
/* Koyu ton varyantı: birincil kırmızının daha koyu hali (komşu renk, koyu) */
.btn-birincil.btn-koyu-ton { background: var(--kirmizi-koyu, #8b2318); }
.btn-birincil.btn-koyu-ton:hover:not(:disabled) {
background: color-mix(in srgb, var(--kirmizi-koyu, #8b2318) 80%, #000); }
.btn-ikincil { background: var(--yuzey); border: 1px solid var(--kenar); padding: 9px 16px; border-radius: 6px;
text-decoration: none; color: var(--metin); font-weight: 600; }
.btn-sil { background: var(--yuzey); border: 1px solid var(--kirmizi); color: var(--kirmizi); padding: 4px 10px;
border-radius: 5px; cursor: pointer; font-size: 13px; }
/* Filtre + tablo */
.filtre { display: flex; gap: 10px; margin-bottom: 14px; }
.filtre input { flex: 1; padding: 9px 12px; border: 1px solid var(--kenar); border-radius: 6px; }
table.liste { width: 100%; border-collapse: collapse; background: var(--yuzey); border-radius: 8px; overflow: hidden;
box-shadow: 0 1px 3px var(--golge); }
/* Başlık/gövde ayrımı belirgin: kırmızı kalın alt çizgi + kalın başlık (tema rengine
duyarlı, --kirmizi). Tüm döküm/liste sayfalarında tutarlı görünüm (kullanıcı isteği). */
table.liste th { background: var(--yuzey-2); text-align: left; padding: 10px 12px; font-size: 13px;
color: var(--metin-2); font-weight: 700; border-bottom: 2px solid var(--kirmizi); }
table.liste td { padding: 10px 12px; border-bottom: 1px solid var(--cizgi); }
table.liste tr:last-child td { border-bottom: none; }
.bos { text-align: center; color: var(--bos-yazi); padding: 24px; }
.ozet { color: var(--metin-3); font-size: 13px; margin-top: 10px; }
.rozet { background: var(--rozet-zemin); color: var(--yesil); padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; }
/* Formlar */
.panel { background: var(--yuzey); border-radius: 8px; padding: 18px; margin-bottom: 16px; box-shadow: 0 1px 3px var(--golge); }
.panel h3 { margin-top: 0; color: var(--kirmizi); font-size: 15px; }
.form-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; }
.form-izgara label { display: flex; flex-direction: column; font-size: 13px; color: var(--metin-2); gap: 4px; }
.form-izgara label.genis { grid-column: 1 / -1; }
.form-izgara input, .form-izgara select, .form-izgara textarea {
padding: 8px 10px; border: 1px solid var(--kenar); border-radius: 6px; font-size: 14px; color: var(--metin); }
.form-izgara label.onay { flex-direction: row; align-items: center; gap: 8px; }
.form-butonlar { display: flex; gap: 10px; margin-top: 8px; }
/* Satış formu sabit alt bar: İptal solda, Kaydet sağa dayalı, ekrana yapışık */
.satis-alt-bar {
position: sticky; bottom: 0; z-index: 20;
display: flex; justify-content: space-between; align-items: center;
gap: 10px; margin: 8px -24px -24px; padding: 6px 24px;
background: var(--yuzey); border-top: 1px solid var(--kenar);
box-shadow: 0 -2px 6px rgba(0,0,0,.05);
}
.satis-alt-bar .btn-birincil,
.satis-alt-bar .btn-ikincil { padding: 7px 16px; font-size: 13px; }
.satis-alt-bar .btn-birincil { min-width: 160px; }
.btn-birincil:disabled { opacity: .6; cursor: not-allowed; }
/* Para kutuları (tahsilat tutar / iskonto / SGK): sağa dayalı, ok yok, binlik nokta.
type=text olduğu için tarayıcı ok'ları zaten çıkmaz; number kalıntısı için garanti. */
.para-kutu { text-align: right; font-variant-numeric: tabular-nums; }
.para-kutu::-webkit-outer-spin-button,
.para-kutu::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* ÜTS bildirimi bekleme örtüsü (satış kaydedilirken) */
.uts-bekle-ortu { position: fixed; inset: 0; z-index: 200;
background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.uts-bekle-ortu.gizli { display: none; }
.uts-bekle-kutu { background: var(--yuzey); border-radius: 14px; padding: 30px 40px;
text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.3); min-width: 280px; }
.uts-spinner { width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%;
border: 4px solid var(--yuzey-3); border-top-color: var(--kirmizi);
animation: uts-don .8s linear infinite; }
@keyframes uts-don { to { transform: rotate(360deg); } }
.uts-bekle-baslik { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.uts-bekle-alt { font-size: 13px; color: var(--metin-2); margin-bottom: 10px; }
.uts-bekle-sayac { font-size: 13px; color: var(--metin-3); font-variant-numeric: tabular-nums; }
/* Son ÜTS Kabul Edilenler popup listesi */
.son-kabul-liste { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.son-kabul-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 8px 12px; background: var(--yuzey-2); border-radius: 8px; }
.sk-bilgi { min-width: 0; flex: 1; }
.sk-ad { font-size: 13px; font-weight: 600; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.sk-kod { font-size: 11px; font-family: monospace; color: var(--metin-2); letter-spacing: .3px;
overflow-x: auto; white-space: nowrap; }
.sk-meta { font-size: 11px; color: var(--metin-3); }
.sk-aksiyon { display: flex; gap: 6px; flex-shrink: 0; }
.sk-aksiyon button { padding: 6px 12px; font-size: 12.5px; white-space: nowrap; }
.iki-kolon { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* Sekmeler */
.sekme-bar { display: flex; gap: 4px; margin-bottom: 0; }
.sekme { background: var(--yuzey-3); border: none; padding: 10px 22px; cursor: pointer; font-weight: 700;
border-radius: 8px 8px 0 0; color: var(--metin-2); }
.sekme.aktif { background: var(--kirmizi); color: var(--yuzey); }
.gizli { display: none; }
.urun-ekle-satir { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.urun-ekle-satir input { padding: 8px 10px; border: 1px solid var(--kenar); border-radius: 6px; flex: 1; }
.ipucu, .ust-menu .ad { color: var(--metin-3); font-size: 13px; }
.ipucu { margin-top: 0; }
/* Login */
.login-kutu { max-width: 360px; margin: 80px auto; background: var(--yuzey); padding: 32px; border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.login-logo { font-size: 40px; font-weight: 800; text-align: center; color: var(--kirmizi); letter-spacing: 2px; }
.login-alt { text-align: center; color: var(--metin-3); margin-top: 4px; }
.login-kutu label { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; font-size: 14px; }
.login-kutu input { padding: 10px 12px; border: 1px solid var(--kenar); border-radius: 6px; }
.login-kutu button { width: 100%; background: var(--kirmizi); color: var(--yuzey); border: none; padding: 11px;
border-radius: 6px; font-weight: 700; cursor: pointer; font-size: 15px; }
.hata { background: var(--hata-zemin); color: var(--kirmizi-koyu); padding: 10px; border-radius: 6px; font-size: 14px; }
/* Ana sayfa kartları */
.karsilama h1 { margin-bottom: 4px; }
.kart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.kart { background: var(--yuzey); border-radius: 10px; padding: 20px; text-decoration: none; color: var(--metin);
box-shadow: 0 1px 3px var(--golge); border-top: 3px solid var(--kirmizi); }
.kart h3 { margin: 0 0 6px; }
.kart p { margin: 0; color: var(--metin-3); font-size: 14px; }
.kart.pasif { border-top-color: var(--metin-pasif); }
/* Satış türü rozetleri */
.rozet-sgk { background: var(--sgk-zemin); color: var(--sgk-yazi); }
.rozet-medula { background: var(--medula-zemin); color: var(--medula-yazi); }
.rozet-taslak { background: var(--taslak-zemin); color: var(--taslak-yazi); }
.rozet-hata { background: var(--err-zemin); color: var(--kirmizi); }
/* Müşteri satırı (satış üst) */
.musteri-satiri { display: flex; gap: 12px; align-items: flex-end; margin-top: 14px; flex-wrap: wrap; }
.ml-alan { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 160px; }
.ml-alan label { font-size: 13px; color: var(--metin-2); }
.ml-alan input { padding: 8px 10px; border: 1px solid var(--kenar); border-radius: 6px; background: var(--yuzey-kilitli); }
/* Düzenlenebilir (readonly OLMAYAN) alan → şeffaf, normal input gibi (ör. Medula telefon) */
.ml-alan input:not([readonly]) { background: var(--yuzey); }
/* Ürün üst çubuk + bant */
.urun-ust-cubuk { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.urun-ust-cubuk input { flex: 1; padding: 9px 12px; border: 1px solid var(--kenar); border-radius: 6px; }
.btn-koyu { background: var(--koyu-buton); color: var(--yuzey); border: none; padding: 9px 16px; border-radius: 6px; font-weight: 700; cursor: pointer; }
.btn-cizgili { background: var(--yuzey); border: 1px solid var(--kirmizi); color: var(--kirmizi); padding: 9px 16px; border-radius: 6px; font-weight: 700; cursor: pointer; }
.btn-cop { background: var(--koyu-buton); color: var(--yuzey); border: none; border-radius: 5px; padding: 4px 9px; cursor: pointer; }
.btn-birincil.kucuk, .btn-ikincil.kucuk { padding: 5px 12px; font-size: 13px; }
.urun-bandi td, .urun-bandi th { font-size: 13px; padding: 8px 8px; }
.urun-bandi .kod { color: var(--kirmizi); font-weight: 700; }
.urun-bandi .kar { color: var(--yesil); font-weight: 600; }
/* Tahsilat + özet */
.tahsilat-ekle { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.tahsilat-ekle select, .tahsilat-ekle input { padding: 8px 10px; border: 1px solid var(--kenar); border-radius: 6px; }
/* Tahsilat TABULAR: giriş satırı + tablo AYNI grid kolonları (Tarih·Hesap·Tutar·Taksit·İşlem) */
.tahsilat-tablo { border: 1px solid var(--kenar); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.tah-satir { display: grid; grid-template-columns: 130px 1fr 110px 90px 44px; gap: 8px;
align-items: center; padding: 6px 10px; }
.tah-baslik { background: var(--yuzey-2); font-size: 12px; color: var(--metin-2); font-weight: 600;
border-bottom: 1px solid var(--kenar); padding: 8px 10px; }
.tah-giris { border-bottom: 1px solid var(--kenar); background: var(--yuzey); }
.tah-giris input, .tah-giris select { width: 100%; box-sizing: border-box; padding: 6px 8px;
border: 1px solid var(--kenar); border-radius: 6px; font-size: 13px; }
.tah-veri { font-size: 13px; border-bottom: 1px solid var(--cizgi); }
.tah-veri:last-child { border-bottom: none; }
.tah-veri .sayi { text-align: right; font-variant-numeric: tabular-nums; }
.tah-bos { padding: 12px; text-align: center; color: var(--metin-2); font-size: 13px; }
.ozet-tablo { width: 100%; border-collapse: collapse; }
.ozet-tablo td { padding: 7px 10px; border-bottom: 1px solid var(--cizgi); }
.ozet-tablo td:last-child { text-align: right; font-weight: 600; }
.ozet-tablo input { width: 120px; text-align: right; padding: 5px 8px; border: 1px solid var(--kenar); border-radius: 5px; }
.ozet-tablo .vurgu td { font-weight: 800; color: var(--kirmizi); border-top: 2px solid var(--kenar); }
/* ---- Satış ekranı: tek ekrana sığdırma ----
Hedef: sayfanın tamamı scroll gerektirmesin. Sepet uzadıkça yalnız ürün listesi
kendi içinde kaysın; üst bant ve alttaki Tahsilat/Özet paneli yerinde kalsın. */
/* Ürün listesi kendi içinde kayar; başlık satırı sabit (sticky) durur.
Yükseklik TAM 6 SATIR: 7. üründen itibaren liste kendi içinde kaymaya başlar,
böylece kullanıcı ilk 6 ürünü tek bakışta alt alta görür.
Hesap: başlık (--sepet-baslik) + 6 × satır (--sepet-satir). Satır yüksekliği
input/buton boyutlarıyla sabitlendiği için bu hesap şaşmaz. */
.satis-ekran { --sepet-satir: 34px; --sepet-baslik: 31px; }
/* height (max-height değil): liste boşken de 6 satırlık alan ayrılır — sayfa ilk
açılışta son hâlindeki yüksekliğiyle gelir, ürün eklendikçe zıplamaz. */
.sepet-kaydir { height: calc(var(--sepet-baslik) + 6 * var(--sepet-satir));
overflow-y: auto; overflow-x: auto;
border: 1px solid var(--kenar); border-radius: 6px; }
.sepet-kaydir thead th { position: sticky; top: 0; z-index: 2; background: var(--yuzey-2);
box-shadow: inset 0 -1px 0 var(--kenar); }
.sepet-kaydir table { margin: 0; }
/* Sepet boşken "ürün bulunmamaktadır" mesajı 6 satırlık alanda ortalanır */
.sepet-kaydir .bos-satir td { height: calc(6 * var(--sepet-satir)); vertical-align: middle;
text-align: center; color: var(--metin-4); }
/* Satır yüksekliğini sabitle: hücre içi input/buton satırı büyütmesin */
.satis-ekran .urun-bandi td { height: var(--sepet-satir); box-sizing: border-box; }
.satis-ekran .urun-bandi td input { padding: 2px 6px; font-size: 12.5px; height: 25px;
box-sizing: border-box; }
.satis-ekran .urun-bandi .btn-cop { padding: 0 6px; font-size: 13px; line-height: 1; }
/* Özet 2 kolon: 8 satır → 4 satır, panel yüksekliği yarıya iner */
.ozet-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
/* Satış formunda genel yoğunluk: paneller ve satırlar daralır */
.satis-ekran .panel { padding: 9px 14px; margin-bottom: 8px; }
.satis-ekran .panel h3 { font-size: 13px; margin-bottom: 6px; }
.satis-ekran .form-izgara { gap: 8px 14px; }
.satis-ekran .form-izgara label { font-size: 12px; gap: 2px; }
.satis-ekran .form-izgara input,
.satis-ekran .form-izgara select { padding: 6px 8px; font-size: 13px; }
.satis-ekran .liste th, .satis-ekran .liste td { padding: 5px 8px; font-size: 12.5px; }
.satis-ekran .ozet-tablo td { padding: 4px 8px; font-size: 12.5px; }
.satis-ekran .ozet-tablo input { padding: 3px 6px; width: 96px; }
.satis-ekran .sayfa-baslik { margin-bottom: 6px; }
.satis-ekran .sayfa-baslik h2 { font-size: 16px; }
.satis-ekran .sekme { padding: 7px 18px; font-size: 13px; }
/* Tahsilat listesi de taşarsa kendi içinde kaysın (özet ile aynı hizada kalır) */
.satis-ekran .tahsilat-liste { max-height: calc(4 * var(--sepet-satir)); overflow-y: auto; }
/* ÜTS token göster/gizle */
.token-alan { display: flex; gap: 4px; align-items: center; }
.token-alan input { flex: 1; }
.token-goster { background: var(--yuzey-3); border: 1px solid var(--kenar); border-radius: 6px; cursor: pointer;
padding: 6px 10px; font-size: 14px; }
/* ÜTS alma geçmişi: filtre paneli + alt işlem barı */
.filtre-panel .form-izgara { gap: 10px 14px; }
/* Filtreler tam 2 satır: 4 alan + buton (orijinaldeki düzen) */
.form-izgara.filtre-5 { grid-template-columns: repeat(4, minmax(140px, 1fr)) 130px; }
.filtre-btn { display: flex; align-items: flex-end; }
.btn-blok { display: block; width: 100%; text-align: center; padding: 9px 12px; border-radius: 6px;
text-decoration: none; font-weight: 700; }
.filtre-btn button, .filtre-btn .btn-blok { width: 100%; }
/* Veri tablosu: geniş ekranda tüm alanı kullansın, kolonlar sıkışmasın */
.veri-tablo { min-width: 1100px; }
.veri-tablo th, .veri-tablo td { padding: 8px 10px; font-size: 13px; white-space: nowrap; }
.veri-tablo td.urun-ad { white-space: normal; min-width: 260px; }
.veri-tablo input, .veri-tablo select { padding: 5px 7px; font-size: 13px; }
.alt-bar { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 10px;
background: var(--yuzey); border-top: 1px solid var(--kenar); padding: 12px 16px; border-radius: 8px;
box-shadow: 0 -2px 10px var(--golge); margin-top: 4px; }
.alt-bar button:disabled { opacity: .5; cursor: not-allowed; }
.kod { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
/* ÜTS sonuç kutusu */
.uts-sonuc { margin-top: 14px; padding: 14px; border-radius: 8px; background: var(--yuzey-kilitli); border: 1px solid var(--kenar); }
.uts-sonuc.ok { border-color: var(--ok-kenar); background: var(--ok-zemin); }
.uts-sonuc.err { border-color: var(--err-kenar); background: var(--err-zemin); }
.uts-sonuc pre { background: var(--yuzey); padding: 10px; border-radius: 6px; overflow-x: auto; font-size: 13px;
border: 1px solid var(--kenar); margin-top: 8px; }
/* OYS bildirim/onay modalı — tarayıcının alert/confirm'i yerine tema uyumlu popup */
.oys-modal-ortu { position: fixed; inset: 0; background: rgba(0,0,0,.45);
z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px;
animation: oysFadeIn .12s ease; }
@keyframes oysFadeIn { from { opacity: 0; } to { opacity: 1; } }
.oys-modal { background: var(--yuzey); color: var(--metin); border-radius: 12px;
box-shadow: 0 12px 40px rgba(0,0,0,.3); width: min(420px, 92vw); padding: 22px 24px;
text-align: center; border: 1px solid var(--kenar); animation: oysPop .16s ease; }
@keyframes oysPop { from { transform: scale(.94); } to { transform: scale(1); } }
.oys-modal-ikon { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.oys-modal-metin { font-size: 14px; line-height: 1.5; color: var(--metin);
white-space: pre-wrap; margin-bottom: 18px; }
.oys-modal-butonlar { display: flex; gap: 10px; justify-content: center; }
.oys-modal-butonlar button { min-width: 90px; }
/* Müşteri master-detail — seçili satır vurgusu */
.musteri-satir:hover { background: var(--yuzey-2, #f4f4f7); }
.musteri-satir.secili { background: var(--ok-zemin, #e6f4ea); box-shadow: inset 3px 0 0 var(--kirmizi); }
/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: flex-start;
justify-content: center; padding-top: 60px; z-index: 100; }
.modal.gizli { display: none; }
.modal-kutu { background: var(--yuzey); border-radius: 12px; width: 640px; max-width: 94vw; max-height: 82vh; overflow: auto;
box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.modal-kutu.genis { width: 1000px; }
/* Şube formu: neredeyse tam sayfa; tüm alanlar tek ekranda geniş görünür */
.modal-kutu.sube-genis { width: 96vw; max-width: 1400px; }
.modal-baslik { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px;
border-bottom: 1px solid var(--kenar); font-weight: 700; font-size: 17px; }
.modal-kapat { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--metin-4); }
.modal-govde { padding: 18px 20px; }
.musteri-arama input, .stok-filtre input { width: 100%; padding: 9px 12px; border: 1px solid var(--kenar); border-radius: 6px; margin-bottom: 12px; }
.inline-ekle { margin-top: 16px; border-top: 1px dashed var(--kenar); padding-top: 12px; }
.inline-ekle summary { cursor: pointer; font-weight: 600; color: var(--kirmizi); margin-bottom: 10px; }
/* Stoklarda ara popup */
/* Satış ekranı 'Stoklarda Ara' popup sekmeleri — stok LİSTESİ sekmelerinden
AYRI sınıf (.popup-sekme); aksi halde iki .stok-sekme tanımı çakışıyordu. */
.popup-sekme-bar { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.popup-sekme { background: var(--yuzey-3); border: none; padding: 8px 18px; cursor: pointer;
font-weight: 700; border-radius: 6px; color: var(--metin-2); font-size: 13.5px;
transition: background .12s, color .12s; }
.popup-sekme:hover { background: var(--yuzey-2); color: var(--kirmizi); }
.popup-sekme.aktif { background: var(--kirmizi); color: var(--kirmizi-yazi); }
.stok-filtre { display: flex; gap: 8px; }
.stok-tablo .kod { color: var(--kirmizi); font-weight: 700; }
@media (max-width: 900px) { .form-izgara { grid-template-columns: repeat(2, 1fr); } .iki-kolon, .kart-grid { grid-template-columns: 1fr; } }
/* ================= RAPORLAR ================= */
/* Dönem seçici (Bugün / Haftalık / Aylık / Yıllık) */
.donem-secici { display: flex; gap: 2px; background: var(--yuzey-3); padding: 3px;
border-radius: 8px; }
.donem-sekme { padding: 7px 16px; border-radius: 6px; font-size: 13px; font-weight: 700;
color: var(--metin-2); text-decoration: none; white-space: nowrap; transition: background .12s, color .12s; }
.donem-sekme:hover { color: var(--kirmizi); }
.donem-sekme.aktif { background: var(--yuzey); color: var(--kirmizi); box-shadow: 0 1px 3px var(--golge); }
/* KPI kartları */
/* 9 kart tek ekrana sığmalı: daha dar sütun + kompakt tipografi */
.kpi-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
gap: 9px; margin-bottom: 14px; }
.kpi { background: var(--yuzey); border-radius: 9px; padding: 10px 12px;
box-shadow: 0 1px 3px var(--golge); border-top: 3px solid var(--kenar);
display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-vurgu { border-top-color: var(--kirmizi); }
.kpi-baslik { font-size: 10.5px; font-weight: 700; color: var(--metin-3);
text-transform: uppercase; letter-spacing: .2px; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.kpi-deger { font-size: 19px; font-weight: 800; color: var(--metin);
font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.kpi-alt { font-size: 13px; display: flex; gap: 5px; align-items: baseline; flex-wrap: wrap;
line-height: 1.3; }
.kpi-alt .ipucu { font-size: 12.5px; }
.artis { color: var(--yesil); font-weight: 700; }
.azalis { color: var(--kirmizi); font-weight: 700; }
/* Çizgi grafik */
.grafik-kutu { width: 100%; }
.grafik-svg { width: 100%; display: block; }
.grafik-kilavuz { stroke: var(--cizgi); stroke-width: .25; vector-effect: non-scaling-stroke; }
.grafik-eksen { display: flex; justify-content: space-between; margin-top: 6px;
font-size: 11px; color: var(--metin-3); font-variant-numeric: tabular-nums; }
/* Sütun grafik */
.sutun-alan { display: flex; align-items: flex-end; gap: 6px; padding-top: 8px; }
.sutun-grup { flex: 1; display: flex; flex-direction: column; align-items: center;
height: 100%; justify-content: flex-end; gap: 5px; }
.sutun-cubuklar { display: flex; align-items: flex-end; gap: 2px; width: 100%;
height: 100%; justify-content: center; }
.sutun-cubuk { width: 45%; max-width: 26px; border-radius: 3px 3px 0 0; min-height: 2px;
transition: opacity .12s; }
.sutun-cubuk:hover { opacity: .75; }
.sutun-etiket { font-size: 11px; color: var(--metin-3); white-space: nowrap; }
.grafik-lejant { display: flex; gap: 16px; margin-top: 10px; font-size: 12px;
color: var(--metin-2); justify-content: center; }
.grafik-lejant i, .pasta-lejant i { display: inline-block; width: 10px; height: 10px;
border-radius: 2px; margin-right: 6px; }
/* Pasta (halka) grafik */
.pasta-kutu { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.pasta-merkez { font-size: 6px; font-weight: 800; fill: var(--metin); }
.pasta-alt { font-size: 2.6px; fill: var(--metin-3); }
.pasta-lejant { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 7px; }
.pasta-lejant > div { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.pl-ad { flex: 1; color: var(--metin-2); }
.pl-deger { font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-deger small { color: var(--metin-3); font-weight: 600; }
/* Yatay bar listesi */
.ybar-liste { display: flex; flex-direction: column; gap: 8px; }
.ybar-satir { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ybar-ad { width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--metin-2); }
.ybar-cizgi { flex: 1; background: var(--yuzey-3); border-radius: 4px; height: 16px;
overflow: hidden; }
.ybar-cizgi i { display: block; height: 100%; border-radius: 4px; min-width: 2px; }
.ybar-deger { width: 100px; text-align: right; font-weight: 700;
font-variant-numeric: tabular-nums; }
/* Rapor iki kolon */
.rapor-iki-kolon { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .rapor-iki-kolon { grid-template-columns: 1fr; } }
.kar { color: var(--yesil); font-weight: 600; }
.btn-ikincil.kucuk { padding: 3px 10px; font-size: 12px; }
.toplam-satir td { border-top: 2px solid var(--kenar); background: var(--yuzey-2); }
/* ---- KUCAKLAŞAN ÇİFT BAR (dönem × önceki dönem) ----
Kalın barlar. Yeni dönem, eskinin ÜSTÜNE BİNER (negatif margin + z-index):
görsel olarak "önüne geçmiş, ezmiş" etkisi verir. */
.cift-alan { display: flex; align-items: flex-end; gap: 3px; padding-top: 6px; }
.cift-grup { flex: 1; display: flex; flex-direction: column; align-items: center;
height: 100%; justify-content: flex-end; gap: 3px; min-width: 0; }
.cift-cubuklar { display: flex; align-items: flex-end; width: 100%; height: 100%;
justify-content: center; }
.cift-cubuk { width: 92%; max-width: 66px; min-height: 2px; transition: filter .12s; }
.cift-cubuk:hover { filter: brightness(1.12); }
/* Eski dönem: arkada, soluk, hafif geride */
.cift-cubuk.onceki { border-radius: 4px 4px 0 0; z-index: 1; opacity: .85;
background: linear-gradient(180deg, var(--metin-pasif) 0%, var(--yuzey-3) 100%); }
/* Yeni dönem: öne biner (negatif margin) + gölge ile yükseklik hissi */
.cift-cubuk.simdi { border-radius: 4px 4px 0 0; z-index: 2; margin-left: -22px;
background: linear-gradient(180deg, var(--kirmizi) 0%, var(--kirmizi-koyu) 100%);
box-shadow: -3px 0 8px var(--golge), inset 0 1px 0 rgba(255,255,255,.25); }
.cift-deger { font-size: 10.5px; font-weight: 800; color: var(--metin);
font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1; }
/* Yıllık grafik: bar üstü değer GÜNCEL YIL rengiyle (barla aynı kimlik), büyük */
.yillik-alan .cift-deger { font-size: 16px; color: var(--kirmizi);
display: flex; flex-direction: column; align-items: center; gap: 1px; }
.yillik-alan .cift-deger.tahmin-yazi { color: var(--metin-3); }
/* BK marj etiketi: değerle aynı boyda ama farklı renk (turkuaz) — ayırt edilsin */
.marj-etiket { font-size: 14px; font-weight: 800; color: var(--turkuaz);
font-style: normal; }
.cift-degisim { font-size: 10px; font-weight: 700; white-space: nowrap; line-height: 1; }
.cift-etiket { font-size: 11px; color: var(--metin-3); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Yıllık ciro mukayese grafiği — ay etiketleri + yüzdelikler 2 punto büyük (okunurluk) */
.yillik-alan .cift-etiket { font-size: 13px; font-weight: 600; }
.yillik-alan .cift-degisim { font-size: 12px; }
.grafik-kutu:has(.yillik-alan) .grafik-lejant { font-size: 14px; }
.grafik-kutu:has(.yillik-alan) .grafik-lejant i { width: 12px; height: 12px; }
.lejant-onceki { background: linear-gradient(180deg, var(--metin-pasif), var(--yuzey-3)); }
.lejant-simdi { background: linear-gradient(180deg, var(--kirmizi), var(--kirmizi-koyu)); }
/* Diğer sütun grafikleri de gradient kullansın (tema bütünlüğü) */
.sutun-cubuk { background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.12)); }
/* KPI kartı hover — yalnız görsel geri bildirim (tıklanabilir değil) */
.kpi { transition: transform .14s ease, box-shadow .14s ease, border-top-color .14s; }
.kpi:hover { transform: translateY(-3px);
box-shadow: 0 6px 18px var(--golge); border-top-color: var(--kirmizi); }
/* Filtre çubuğu: şube seçici + dönem sekmeleri yan yana */
.filtre-cubugu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sube-secici { padding: 8px 12px; border: 1px solid var(--kenar); border-radius: 8px;
background: var(--yuzey); color: var(--metin); font-size: 13px; font-weight: 600;
cursor: pointer; }
/* ---- YILLIK BAR (gerçek + tahmin + YTD + ortalama) ---- */
.yillik-alan { position: relative; height: 270px; }
.yillik-barlar { display: flex; align-items: flex-end; gap: 3px; height: 100%;
padding-top: 6px; position: relative; z-index: 1; }
.yillik-barlar .cift-grup { flex: 1; }
/* Tahmin barı: kesikli/çapraz desen + soluk ton — "kesin değil" işareti (ikincil kodlama) */
.cift-cubuk.simdi.tahmin {
background: repeating-linear-gradient(135deg,
var(--kirmizi) 0, var(--kirmizi) 5px,
color-mix(in srgb, var(--kirmizi) 45%, var(--yuzey)) 5px,
color-mix(in srgb, var(--kirmizi) 45%, var(--yuzey)) 10px);
opacity: .92; }
.tahmin-yazi { color: var(--metin-3); font-style: italic; }
/* Ortalama seviye çizgisi — yatay, kesikli, üstte etiketli */
.ort-cizgi { position: absolute; left: 0; right: 0; height: 0;
border-top: 2px dashed var(--turkuaz); z-index: 3; pointer-events: none; }
.ort-etiket { position: absolute; right: 0; top: -12px; font-size: 16px; font-weight: 700;
color: var(--turkuaz); background: var(--yuzey); padding: 0 5px;
font-variant-numeric: tabular-nums; }
/* Lejant örnekleri */
.lejant-tahmin { background: repeating-linear-gradient(135deg,
var(--kirmizi) 0, var(--kirmizi) 3px,
color-mix(in srgb, var(--kirmizi) 45%, var(--yuzey)) 3px,
color-mix(in srgb, var(--kirmizi) 45%, var(--yuzey)) 6px) !important; }
.lejant-ort { background: none !important; border-top: 2px dashed var(--turkuaz);
width: 14px !important; height: 0 !important; align-self: center; }
/* Rapor tabloları: başlık + veri tabular hizalı (gözü yormasın) */
.rapor-tablo th, .rapor-tablo td { font-variant-numeric: tabular-nums; }
.rapor-tablo th.sayi { text-align: right; }
/* Aylık Görünüm veri hücreleri — mali tabloyla aynı el yazısı/muhasebe fontu */
.rapor-tablo td { font-family: var(--font-muhasebe); font-size: 14px; }
.tahmin-satir td { color: var(--metin-3); font-style: italic; }
.tahmin-satir .kar { font-style: italic; }
.tahmin-rozet { font-size: 10px; font-weight: 700; font-style: normal; color: var(--turkuaz);
background: var(--yuzey-3); padding: 1px 6px; border-radius: 8px; vertical-align: middle; }
/* Satır işlem hücresi: çöp kovası + ÜTS iptal yan yana */
.satir-islem { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
/* ÜTS iptal butonu — çöp kovasından AYRI: farklı renk + ikon (↩), karıştırılmasın */
.btn-uts-iptal { background: var(--taslak-zemin); color: var(--taslak-yazi);
border: 1px solid var(--taslak-yazi); border-radius: 5px; padding: 3px 9px;
font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.btn-uts-iptal:hover { background: var(--taslak-yazi); color: var(--yuzey); }
.uts-iptal-edildi { font-size: 11px; color: var(--metin-3); font-style: italic; white-space: nowrap; }
/* Pasif (gölgeli) çöp kovası — ÜTS kilitli satışta */
.btn-cop.pasif { opacity: .35; cursor: not-allowed; }
/* ---- TOAST bildirim (sağ üstte, kendiliğinden kapanır) ---- */
.toast { position: fixed; top: 70px; right: 20px; z-index: 200;
display: flex; align-items: flex-start; gap: 10px;
max-width: 380px; padding: 14px 16px; border-radius: 10px;
background: var(--yuzey); box-shadow: 0 8px 28px var(--golge);
border-left: 4px solid var(--kenar); font-size: 13.5px; line-height: 1.45;
animation: toast-gir .32s cubic-bezier(.2,.9,.3,1.2); }
@keyframes toast-gir { from { transform: translateX(120%); opacity: 0; } to { transform: none; opacity: 1; } }
.toast-kapaniyor { transform: translateX(120%); opacity: 0; transition: .4s; }
/* Tüm kutu renkli zemin — durum bir bakışta algılansın (sadece sol kenar değil) */
.toast-ok { border-left-color: var(--yesil); background: var(--ok-zemin); border-color: var(--ok-kenar); }
.toast-hata { border-left-color: var(--kirmizi); background: var(--err-zemin); border-color: var(--err-kenar); }
.toast-kuru { border-left-color: var(--taslak-yazi); background: var(--taslak-zemin); }
.toast-bilgi { border-left-color: var(--sgk-yazi); background: var(--sgk-zemin); border-color: var(--sgk-zemin); }
.toast-bilgi, .toast-bilgi .toast-metin b { color: var(--sgk-yazi); }
.toast-bilgi .toast-metin { color: var(--metin); }
.toast-bilgi .toast-ikon { color: var(--sgk-yazi); }
.toast-ok, .toast-ok .toast-metin b { color: var(--yesil); }
.toast-hata, .toast-hata .toast-metin b { color: var(--kirmizi); }
.toast-ok .toast-metin, .toast-hata .toast-metin { color: var(--metin); }
.toast-ikon { font-size: 18px; line-height: 1.2; }
.toast-ok .toast-ikon { color: var(--yesil); }
.toast-hata .toast-ikon { color: var(--kirmizi); }
.toast-metin { flex: 1; color: var(--metin); }
.toast-metin a { color: var(--kirmizi); font-weight: 700; }
.toast-kapat { background: none; border: none; cursor: pointer; color: var(--metin-4);
font-size: 15px; line-height: 1; padding: 0 2px; }
/* ---- ÜTS ürün DURUM kartı (sorgu sonucu: bende mi, verilebilir mi) ---- */
.durum-karti { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px;
border-radius: 10px; margin: 4px 0 14px; border: 1px solid var(--kenar);
border-left: 5px solid var(--kenar); }
.durum-yesil { background: var(--ok-zemin); border-color: var(--ok-kenar); border-left-color: var(--yesil); }
.durum-kirmizi{ background: var(--err-zemin); border-color: var(--err-kenar); border-left-color: var(--kirmizi); }
.durum-gri { background: var(--yuzey-2); border-left-color: var(--metin-4); }
.durum-sari { background: var(--uyari-zemin, #fff8e6); border-color: var(--uyari-kenar, #f0d68a);
border-left-color: var(--uyari, #d9a406); }
.durum-ikon { font-size: 26px; line-height: 1; font-weight: 800; }
.durum-yesil .durum-ikon { color: var(--yesil); }
.durum-kirmizi .durum-ikon { color: var(--kirmizi); }
.durum-sari .durum-ikon { color: var(--uyari, #d9a406); }
.durum-metin b { font-size: 15.5px; }
.durum-yesil .durum-metin b { color: var(--yesil); }
.durum-kirmizi .durum-metin b { color: var(--kirmizi); }
.durum-sari .durum-metin b { color: var(--uyari, #b8860b); }
.durum-urun { font-weight: 600; color: var(--metin); margin: 3px 0; font-size: 13.5px; }
.durum-aciklama { color: var(--metin-2); font-size: 13px; line-height: 1.5; margin-top: 2px; }
/* ÜTS hareket geçmişi — tek tıkla tip filtresi butonları */
.hareket-filtre { display: flex; gap: 6px; flex-wrap: wrap; }
.filtre-btn { padding: 6px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
color: var(--metin-2); background: var(--yuzey-3); text-decoration: none; white-space: nowrap;
border: 1px solid transparent; transition: background .12s, color .12s; }
.filtre-btn:hover { color: var(--kirmizi); }
.filtre-btn.aktif { background: var(--kirmizi); color: var(--kirmizi-yazi); }
/* Karekod hücresi: tam değer görünür (kopyalanabilir) + kopyala butonu */
.karekod-hucre { white-space: nowrap; }
.karekod-deger { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
color: var(--metin-2); user-select: all; }
.kopyala-btn { margin-left: 6px; padding: 1px 5px; font-size: 12px; line-height: 1.4;
cursor: pointer; color: var(--metin-4); background: var(--yuzey-3);
border: 1px solid var(--kenar); border-radius: 4px; vertical-align: middle; }
.kopyala-btn:hover { color: var(--kirmizi); border-color: var(--kirmizi); }
.kopyala-btn.kopyalandi { color: var(--rozet-yazi); background: var(--rozet-zemin);
border-color: var(--ok-kenar); }
.kopyala-btn.kopya-hata { color: var(--kirmizi); background: var(--hata-zemin);
border-color: var(--err-kenar); }
/* Alma bekleyenler üst bandı: sol=listele · orta=filtre+sayaç · sağ=kabul/iade.
Yapışkan — uzun listelerde (50+ ürün) butonlar hep görünür kalsın. */
.eylem-bandi { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
padding: 10px 14px; margin-bottom: 12px; border-radius: 8px;
background: var(--yuzey-2); border: 1px solid var(--kenar);
position: sticky; top: 56px; z-index: 5; }
.eylem-bandi .bant-sol { flex: 0 0 auto; }
/* min-width:0 şart: uzun kurum adı bandı taşırıp satırı kırmasın diye */
.eylem-bandi .bant-orta { flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
gap: 16px; flex-wrap: nowrap; }
.eylem-bandi .bant-sag { flex: 0 0 auto; display: flex; gap: 8px; }
/* Uzun buton metinleri ("Seçili Ürünleri ÜTS'den Kabul Et") satır kırmasın */
.eylem-bandi .bant-sag button { white-space: nowrap; }
.bant-filtre { display: flex; align-items: center; gap: 8px; font-size: 13px;
color: var(--metin-2); min-width: 0; white-space: nowrap; }
.filtre-etiket { font-weight: 600; color: var(--metin-2); }
/* Filtre gözden kaçmasın: belirgin kenar + odakta vurgulanır */
.bant-filtre select { padding: 7px 12px; border: 1.5px solid var(--kenar); border-radius: 6px;
background: var(--yuzey); color: var(--metin); font-size: 13px; font-weight: 500;
max-width: 300px; text-overflow: ellipsis; cursor: pointer;
transition: border-color .12s; }
.bant-filtre select:hover { border-color: var(--kirmizi); }
.bant-filtre select:focus { outline: none; border-color: var(--kirmizi);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--kirmizi) 18%, transparent); }
/* Bir filtre uygulandığında bant durumu belli olsun */
.eylem-bandi.suzuluyor { border-color: var(--kirmizi); }
.bant-sayac { font-size: 13px; color: var(--metin-2); white-space: nowrap; }
.bant-sayac b { font-size: 15px; color: var(--kirmizi); }
/* Dar ekranda tek satır sığmazsa: filtre+sayaç bloğu tam genişlik alıp alta iner,
butonlar sağa dayalı kalır. Böylece hiçbir öğe sola yapışıp "çorba" olmaz. */
@media (max-width: 1200px) {
.eylem-bandi { flex-wrap: wrap; row-gap: 10px; }
.eylem-bandi .bant-orta { order: 3; flex: 1 1 100%; }
.eylem-bandi .bant-sag { margin-left: auto; }
}
/* Sayfa başlığı ikonu — bekleyen iş varken dikkat çeker (hafif nabız) */
.baslik-ikon { font-size: 20px; margin-right: 6px; vertical-align: -1px;
opacity: .45; filter: grayscale(1); }
.baslik-ikon.bekliyor { opacity: 1; filter: none; animation: nabiz 2.4s ease-in-out infinite; }
@keyframes nabiz { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.13); } }
/* Hareketten rahatsız olanlar için animasyonu kapat */
@media (prefers-reduced-motion: reduce) { .baslik-ikon.bekliyor { animation: none; } }
/* ===== ÜTS karar onay penceresi =====
Kabul (yeşil) ile İade (kırmızı) bir bakışta ayrılsın: üst şerit rengi,
ikon rengi ve onay butonu farklı. Amaç: yanlış işlemi göndermeden fark etmek. */
.onay-kutu { background: var(--yuzey); border-radius: 12px; width: 520px; max-width: 94vw;
box-shadow: 0 12px 44px var(--golge); overflow: hidden;
border-top: 5px solid var(--metin-4); }
.onay-kutu.onay-kabul { border-top-color: var(--onay-yesil); }
.onay-kutu.onay-iade { border-top-color: var(--kirmizi); }
.onay-ust { display: flex; align-items: center; gap: 12px; padding: 18px 22px 12px; }
.onay-ust h3 { margin: 0; font-size: 18px; }
.onay-ikon { display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 50%; font-size: 20px; font-weight: 800;
background: var(--yuzey-3); color: var(--metin-2); flex: 0 0 auto; }
.onay-kabul .onay-ikon { background: var(--onay-yesil); color: #fff; }
.onay-iade .onay-ikon { background: var(--hata-zemin); color: var(--kirmizi); }
.onay-govde { padding: 0 22px 4px; }
.onay-adet { margin: 0 0 8px; font-size: 14px; color: var(--metin-2); }
.onay-adet b { font-size: 20px; color: var(--metin); }
.onay-aciklama { margin: 0 0 10px; font-size: 13.5px; color: var(--metin-2); line-height: 1.5; }
.onay-uyari { margin: 0 0 6px; padding: 8px 10px; border-radius: 6px;
background: var(--taslak-zemin); color: var(--taslak-yazi); font-size: 12.5px; }
.onay-alt { display: flex; justify-content: flex-end; gap: 10px;
padding: 14px 22px 18px; border-top: 1px solid var(--kenar); margin-top: 10px; }
/* Onay penceresi için KOYU yeşil (kullanıcı isteği) — her temada tanımlı olmalı */
:root { --onay-yesil: #1b5e20; }
[data-tema="koyu"] { --onay-yesil: #2e7d32; }
[data-tema="desert"] { --onay-yesil: #33691e; }
[data-tema="tron"] { --onay-yesil: #00897b; }
/* Alma geçmişi: tablo içi düzenlenebilir hücreler */
.hucre-sayi { width: 84px; padding: 5px 7px; text-align: right; font-size: 13px;
border: 1px solid var(--kenar); border-radius: 5px;
background: var(--yuzey); color: var(--metin); }
.hucre-sayi:focus { outline: none; border-color: var(--kirmizi);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--kirmizi) 16%, transparent); }
.hucre-secim { padding: 5px 8px; font-size: 13px; border: 1px solid var(--kenar);
border-radius: 5px; background: var(--yuzey); color: var(--metin); cursor: pointer; }
.hucre-secim:focus { outline: none; border-color: var(--kirmizi); }
/* Ürün grubu seçilmemiş satır göze çarpsın — seçildikçe vurgu kalkar */
tr.grup-eksik { background: var(--taslak-zemin); }
tr.grup-eksik .cins-secim { border-color: var(--taslak-yazi); border-width: 1.5px;
font-weight: 600; color: var(--taslak-yazi); }
/* Ürün grubu önerisi (ampul) — yanlış seçimi fark ettirmek için üç durum */
.grup-hucre { white-space: nowrap; }
.ampul { margin-left: 5px; padding: 1px 4px; font-size: 13px; line-height: 1;
cursor: pointer; border: 1px solid transparent; border-radius: 4px;
background: none; vertical-align: middle; transition: transform .1s; }
.ampul:hover { transform: scale(1.18); }
/* Öneri var, henüz seçim yapılmamış */
.ampul.ampul-oneri { filter: none; opacity: 1; }
/* Seçim öneriye UYMUYOR — dikkat çeksin */
.ampul.ampul-uyari { background: var(--hata-zemin); border-color: var(--kirmizi);
animation: ampul-nabiz 1.8s ease-in-out infinite; }
/* Seçim öneriyle uyumlu — sessizleşsin */
.ampul.ampul-tamam { opacity: .28; filter: grayscale(1); }
@keyframes ampul-nabiz { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ampul.ampul-uyari { animation: none; } }
/* Toplu grup penceresi: otomatik öneri kutusu */
.oneri-kutu { display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 12px 14px; border-radius: 8px; background: var(--taslak-zemin);
border: 1px solid var(--taslak-yazi); }
.oneri-kutu button:disabled { opacity: .5; cursor: not-allowed; }
/* ===== ÜRÜN GRUBU RENKLERİ =====
Her grup kendi renginde — listede tür bir bakışta ayrılsın (kullanıcı isteği).
Kısa kod ön ekiyle uyumlu: Ç=Çerçeve · C=Cam · L=Lens · S=Solüsyon · A=Aksesuar */
:root {
/* Renkler ORİJİNAL TemaOptik stok sekmelerinden alındı (inputs/ss):
Çerçeve kırmızı · Cam turuncu · Lens turkuaz · Solüsyon yeşil · Aksesuar siyah */
--grup-cerceve: #c62828; /* kırmızı — R */
--grup-cam: #1565c0; /* mavi — C (kullanıcı tercihi) */
--grup-lens: #00706c; /* turkuaz — L (metin kontrastı için koyultuldu) */
--grup-solusyon:#3f7d3f; /* yeşil — S */
--grup-aksesuar:#2f3437; /* siyah — A */
}
/* Koyu zeminde aynı kimlik, okunur tonlarda (siyah→açık gri, yoksa görünmez) */
[data-tema="koyu"], [data-tema="tron"] {
--grup-cerceve: #ef6a5c; --grup-cam: #6aa8f0; --grup-lens: #4fd0cb;
--grup-solusyon:#7fc47f; --grup-aksesuar:#aeb6bb;
}
[data-tema="desert"] {
--grup-cerceve: #b03a28; --grup-cam: #2f5b8f; --grup-lens: #2f7d76;
--grup-solusyon:#4d6b28; --grup-aksesuar:#4a423b;
}
/* Grup etiketi (kısa kod / tür gösterimi) */
.grup-etiket { font-weight: 700; letter-spacing: .2px; }
.grup-Cerceve { color: var(--grup-cerceve); }
.grup-Cam { color: var(--grup-cam); }
.grup-Lens { color: var(--grup-lens); }
.grup-Solusyon { color: var(--grup-solusyon); }
.grup-Aksesuar { color: var(--grup-aksesuar); }
.grup-Belirsiz { color: var(--metin-4); font-style: italic; }
/* Grup seçimi de kendi rengini taşısın — seçilince renk değişir, geri bildirim olur */
.cins-secim.grup-Cerceve { border-color: var(--grup-cerceve); }
.cins-secim.grup-Cam { border-color: var(--grup-cam); }
.cins-secim.grup-Lens { border-color: var(--grup-lens); }
.cins-secim.grup-Solusyon { border-color: var(--grup-solusyon); }
.cins-secim.grup-Aksesuar { border-color: var(--grup-aksesuar); }
/* ===== STOK LİSTESİ — tür sekmeleri (orijinaldeki renkli bant) ===== */
.stok-sekmeler { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.stok-sekme { display: inline-flex; align-items: center; gap: 7px;
padding: 9px 16px; border-radius: 7px 7px 0 0; text-decoration: none;
font-size: 13.5px; font-weight: 600; color: var(--metin-2);
background: var(--yuzey-2); border: 1px solid var(--kenar); border-bottom: none;
transition: background .12s, color .12s; }
.stok-sekme:hover { background: var(--yuzey-3); }
.sekme-sayi { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
background: var(--yuzey-3); color: var(--metin-3); }
/* Aktif sekme kendi grup rengini alır — hangi türe baktığın belli olsun */
.stok-sekme.aktif { color: var(--yuzey); background: var(--metin); border-color: var(--metin); }
.stok-sekme.aktif .sekme-sayi { background: rgba(255,255,255,.22); color: var(--yuzey); }
.stok-sekme.grup-Cerceve.aktif { background: var(--grup-cerceve); border-color: var(--grup-cerceve); }
.stok-sekme.grup-Cam.aktif { background: var(--grup-cam); border-color: var(--grup-cam); }
.stok-sekme.grup-Lens.aktif { background: var(--grup-lens); border-color: var(--grup-lens); }
.stok-sekme.grup-Solusyon.aktif { background: var(--grup-solusyon); border-color: var(--grup-solusyon); }
.stok-sekme.grup-Aksesuar.aktif { background: var(--grup-aksesuar); border-color: var(--grup-aksesuar); }
/* Pasif sekmede yalnız yazı rengi grup rengini taşır */
.stok-sekme.grup-Cerceve:not(.aktif) { color: var(--grup-cerceve); }
.stok-sekme.grup-Cam:not(.aktif) { color: var(--grup-cam); }
.stok-sekme.grup-Lens:not(.aktif) { color: var(--grup-lens); }
.stok-sekme.grup-Solusyon:not(.aktif) { color: var(--grup-solusyon); }
.stok-sekme.grup-Aksesuar:not(.aktif) { color: var(--grup-aksesuar); }
/* Tükenmiş ürün satırı soluk görünsün */
tr.tukenmis { opacity: .55; }
/* ===== STOK LİSTESİ tablo hizası =====
Sayı kolonlarında başlık ile veri aynı hizada olmalı; iç /rozet sarmalları
hizayı kaydırmasın. tabular-nums rakam genişliğini eşitler (1 ile 8 aynı yer tutar). */
.veri-tablo th.sayi, .veri-tablo td.sayi { text-align: right; font-variant-numeric: tabular-nums; }
.veri-tablo td.sayi b, .veri-tablo td.sayi span { font-variant-numeric: tabular-nums; }
/* Kısa kod / tür kolonları sabit genişlikte — satırlar arası kayma olmasın */
.veri-tablo td:first-child, .veri-tablo th:first-child { white-space: nowrap; }
.grup-etiket { font-variant-numeric: tabular-nums; }
/* Satır "İşlemler" açılır menüsü */
.satir-menu { position: relative; display: inline-block; }
/* position:fixed — tablo sarmalayıcısındaki overflow menüyü KIRPMASIN.
Konum JS ile butona göre hesaplanır (menuAc). */
.satir-menu-panel { display: none; position: fixed;
min-width: 208px; z-index: 200; padding: 5px;
background: var(--yuzey); border: 1px solid var(--kenar); border-radius: 8px;
box-shadow: 0 8px 26px var(--golge); }
.satir-menu-panel.acik { display: block; }
.satir-menu-panel button, .satir-menu-panel a {
display: block; width: 100%; text-align: left; padding: 8px 11px;
font-size: 13px; color: var(--metin); background: none; border: none;
border-radius: 5px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.satir-menu-panel button:hover, .satir-menu-panel a:hover {
background: var(--yuzey-3); color: var(--kirmizi); }
.satir-menu-panel .menu-ayrac { border-top: 1px solid var(--kenar); margin-top: 4px; padding-top: 9px; }
/* Üst menü ikonları — SGK/ÜTS rozetleri gibi görsel ipucu (kullanıcı isteği).
Yazıdan hafif küçük ve soluk: metni bastırmasın, sadece tanımayı hızlandırsın. */
.menu-ikon { font-size: 15px; line-height: 1; opacity: .85; }
.ust-menu nav > a:hover .menu-ikon,
.ust-menu nav .menu-tetik:hover .menu-ikon { opacity: 1; }
.ust-menu nav .pasif .menu-ikon { opacity: .4; filter: grayscale(1); }
/* Açılır menü ikonları: sabit genişlik → etiketler aynı hizadan başlar (tabular görünüm) */
.menu-panel .menu-ikon { display: inline-block; width: 20px; text-align: center;
margin-right: 2px; font-size: 14px; }
/* ÜTS barkod işareti emoji değil, blok karakteri — dikey hizası elle ayarlanır */
.ust-menu nav .menu-tetik .menu-ikon { letter-spacing: -1px; }
/* ============ KAPAK SAYFASI (anasayfa) ============ */
.kapak { max-width: 1180px; margin: 0 auto; }
.kapak-ust { display: flex; align-items: flex-start; justify-content: space-between;
gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.kapak-baslik { margin: 0 0 4px; font-size: 27px; font-weight: 800; letter-spacing: -.3px; }
.kapak-alt { margin: 0; color: var(--metin-2); font-size: 14px; }
/* Gün bandı — kapakta TİCARİ VERİ YOK (müşteri görebilir); yalnız saat/tarih/selam */
.gun-bandi { display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
padding: 22px 26px; margin-bottom: 20px; border-radius: 16px;
background: linear-gradient(140deg,
color-mix(in srgb, var(--yuzey) 88%, transparent),
color-mix(in srgb, var(--yuzey-2) 66%, transparent));
border: 1px solid color-mix(in srgb, var(--kenar) 75%, transparent);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 18px var(--golge); }
.gun-saat { display: flex; align-items: baseline; gap: 3px; }
.saat { font-size: 40px; font-weight: 800; letter-spacing: -1.5px;
color: var(--metin); font-variant-numeric: tabular-nums; line-height: 1; }
.saniye { font-size: 17px; font-weight: 700; color: var(--kirmizi);
font-variant-numeric: tabular-nums; }
.gun-bilgi { display: flex; flex-direction: column; gap: 2px;
padding-left: 26px; border-left: 1px solid var(--kenar); }
.gun-adi { font-size: 17px; font-weight: 700; color: var(--metin); }
.gun-tarih { font-size: 13.5px; color: var(--metin-3); }
.gun-selam { display: flex; align-items: center; gap: 9px; margin-left: auto;
font-size: 15px; font-weight: 600; color: var(--metin-2); }
.gun-ikon { font-size: 26px; }
/* Bildirimler */
.bildirim-alani { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.bildirim { display: flex; align-items: center; gap: 13px; padding: 13px 16px;
border-radius: 11px; text-decoration: none; color: inherit;
background: color-mix(in srgb, var(--yuzey) 78%, transparent);
border: 1px solid var(--kenar); border-left-width: 4px;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transition: transform .12s, box-shadow .12s; }
a.bildirim:hover { transform: translateX(3px); box-shadow: 0 4px 16px var(--golge); }
.bildirim-uyari { border-left-color: var(--kirmizi); }
.bildirim-bilgi { border-left-color: var(--mavi); }
.bildirim-ok { border-left-color: var(--yesil); }
.bildirim-ikon { font-size: 21px; flex: 0 0 auto; }
.bildirim-ok .bildirim-ikon { color: var(--yesil); font-weight: 800; }
.bildirim-govde { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.bildirim-govde b { font-size: 14px; }
.bildirim-eylem { font-size: 12.5px; font-weight: 700; color: var(--kirmizi);
white-space: nowrap; }
@media (max-width: 620px) {
.gun-bandi { gap: 16px; }
.gun-bilgi { padding-left: 0; border-left: none; }
.gun-selam { margin-left: 0; }
}
/* ============ TAKVİM ============ */
/* Görev türü renkleri — BORÇ KIRMIZI (kullanıcı isteği) */
:root {
--gorev-borc: #c62828; --gorev-vergi: #6a4c93;
--gorev-sgk: #1565c0; --gorev-kart: #b26a00; --gorev-genel: #546e7a;
--gorev-izin: #d81b60; /* yıllık izin — kırmızımsı pembe, borç kırmızısından ayrışır */
}
[data-tema="koyu"], [data-tema="tron"] {
--gorev-borc: #ef6a5c; --gorev-vergi: #b39ddb;
--gorev-sgk: #6aa8f0; --gorev-kart: #ffb74d; --gorev-genel: #90a4ae;
--gorev-izin: #f06292;
}
[data-tema="desert"] {
--gorev-borc: #b03a28; --gorev-vergi: #6b4d8f;
--gorev-sgk: #2f5b8f; --gorev-kart: #a35f14; --gorev-genel: #6b5647;
--gorev-izin: #c2185b;
}
.gorev-borc { --gorev-renk: var(--gorev-borc); }
.gorev-vergi { --gorev-renk: var(--gorev-vergi); }
.gorev-sgk { --gorev-renk: var(--gorev-sgk); }
.gorev-kart { --gorev-renk: var(--gorev-kart); }
.gorev-genel { --gorev-renk: var(--gorev-genel); }
.gorev-yillik_izin { --gorev-renk: var(--gorev-izin); }
/* Beklemedeki izin: soluk/kesikli (henüz onaylanmadı). Onaylı: dolu. */
.hucre-gorev.izin-beklemede, .gorev-satir.izin-beklemede { opacity: .6;
border-left-style: dashed; }
.takvim-izgara { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.takvim-baslik { padding: 8px 4px; text-align: center; font-size: 12px; font-weight: 700;
color: var(--metin-3); text-transform: uppercase; letter-spacing: .5px; }
.takvim-hucre { min-height: 96px; padding: 7px 8px; border-radius: 9px; cursor: pointer;
background: var(--yuzey); border: 1px solid var(--kenar);
transition: border-color .12s, box-shadow .12s; }
.takvim-hucre:hover { border-color: var(--kirmizi); box-shadow: 0 3px 12px var(--golge); }
.takvim-hucre.bos-hucre { background: none; border: none; cursor: default; box-shadow: none; }
.takvim-hucre.bugun { border-color: var(--kirmizi); border-width: 2px;
background: color-mix(in srgb, var(--kirmizi) 5%, var(--yuzey)); }
.hucre-ust { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.hucre-gun { font-size: 13px; font-weight: 700; color: var(--metin-2); }
.takvim-hucre.bugun .hucre-gun { color: var(--kirmizi); }
.hucre-sayi { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9px;
background: var(--yuzey-3); color: var(--metin-3); }
.hucre-gorevler { display: flex; flex-direction: column; gap: 3px; }
.hucre-gorev { font-size: 10.5px; font-weight: 600; line-height: 1.25;
padding: 3px 6px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; color: var(--gorev-renk);
background: color-mix(in srgb, var(--gorev-renk) 13%, transparent);
border-left: 3px solid var(--gorev-renk); }
.hucre-daha { font-size: 10px; color: var(--metin-4); padding-left: 4px; }
/* Seçili gün paneli */
.gorev-listesi { display: flex; flex-direction: column; gap: 8px; }
.gorev-satir { display: flex; align-items: center; gap: 14px; padding: 12px 15px;
border-radius: 9px; background: var(--yuzey-2);
border: 1px solid var(--kenar); border-left: 4px solid var(--gorev-renk); }
.gorev-govde { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gorev-govde b { font-size: 14px; }
/* Lejant */
.takvim-lejant { display: flex; gap: 14px; flex-wrap: wrap; }
.lejant-oge { display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; color: var(--metin-3); }
.lejant-nokta { width: 10px; height: 10px; border-radius: 3px;
background: var(--gorev-renk); display: inline-block; }
/* Kapaktaki görev bildirimi + "İncelendim" */
.bildirim.bildirim-gorev { border-left-color: var(--gorev-renk, var(--metin-3)); }
.bildirim-link { display: flex; align-items: center; gap: 13px; flex: 1;
text-decoration: none; color: inherit; min-width: 0; }
.bildirim-kapat { flex: 0 0 auto; margin-left: 10px; }
@media (max-width: 860px) {
.takvim-hucre { min-height: 74px; padding: 5px; }
.hucre-gorev { font-size: 9.5px; }
}
/* Stok listesi filtre satırı — tek hizada: Marka · Arama · butonlar (yer kazanır) */
.stok-filtre-satir { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.stok-filtre-satir label { display: flex; flex-direction: column; gap: 4px;
font-size: 13px; color: var(--metin-2); }
.stok-filtre-satir input, .stok-filtre-satir select {
padding: 8px 11px; border: 1px solid var(--kenar); border-radius: 6px;
background: var(--yuzey); color: var(--metin); font-size: 13.5px; }
.stok-filtre-satir input:focus, .stok-filtre-satir select:focus {
outline: none; border-color: var(--kirmizi); }
.filtre-marka { flex: 0 0 220px; }
.filtre-marka select { width: 100%; }
.filtre-arama { flex: 1 1 320px; min-width: 240px; }
.filtre-arama input { width: 100%; }
.filtre-butonlar { display: flex; gap: 8px; flex: 0 0 auto; }
/* Kapak marka kimliği — sağ üstte, logo diliyle uyumlu */
.kapak-marka { display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
padding-top: 4px; }
.marka-kisa { font-size: 26px; font-weight: 800; letter-spacing: 1px;
color: var(--kirmizi); line-height: 1; }
.marka-uzun { font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px;
text-transform: uppercase; color: var(--metin-4); }
/* Gruba özel stok filtreleri — dar, marka ile arama arasında sıralanır */
.filtre-grup { flex: 0 0 130px; }
.filtre-grup select { width: 100%; }
/* Ürün düzenleme/yeni stok modalı — geniş, tek ekranda görünür (yatay scroll yok) */
.modal-kutu.urun-genis { width: 900px; max-width: 94vw; }
.modal-kutu.urun-genis .form-izgara { grid-template-columns: repeat(3, 1fr); }
.modal-kutu.urun-genis .modal-govde { max-height: 78vh; overflow-y: auto; overflow-x: hidden; }
/* Fiyat/adet güncellemede "şu an: X" gölgeli eski değer etiketi */
.eski-deger { font-size: 12px; color: var(--metin-2); font-weight: 600;
background: var(--yuzey-3); padding: 1px 8px; border-radius: 5px;
border: 1px solid var(--kenar); }
.eski-deger:empty { display: none; }
/* Kilitli (sistem atar) form alanı — kısa kod gibi */
.kilitli-alan { background: var(--yuzey-3) !important; color: var(--metin-3) !important;
cursor: not-allowed; border-style: dashed !important; }
/* Kaydet onay penceresi — değişiklik listesi */
.degisim-listesi { list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 6px; }
.degisim-listesi li { padding: 8px 12px; border-radius: 6px; font-size: 13.5px;
background: var(--yuzey-2); border-left: 3px solid var(--kirmizi); }
/* ===== YENİ STOK GİRİŞİ / DÜZENLE FORMU — orijinal SS düzeni (esnek satırlar) ===== */
.stok-form { display: flex; flex-direction: column; gap: 14px; }
.form-sira { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.stok-form label { display: flex; flex-direction: column; gap: 4px;
font-size: 13px; color: var(--metin-2); }
.stok-form input, .stok-form select { padding: 8px 11px; border: 1px solid var(--kenar);
border-radius: 6px; background: var(--yuzey); color: var(--metin); font-size: 13.5px; }
.stok-form input:focus, .stok-form select:focus { outline: none; border-color: var(--kirmizi); }
/* Alan genişlikleri — içeriğe göre (kullanıcı isteği: her alan aynı olmasın) */
.a-firma { flex: 1 1 340px; }
.a-ad { flex: 1 1 300px; }
.a-kod { flex: 0 0 130px; }
.a-karekod { flex: 1 1 100%; }
.a-grup { flex: 0 0 150px; }
.a-marka { flex: 1 1 200px; }
.a-model { flex: 1 1 200px; }
.a-cins { flex: 1 1 160px; }
.a-renk { flex: 0 0 140px; }
.a-ekartman{ flex: 0 0 100px; }
.a-cap { flex: 0 0 90px; }
.a-axis { flex: 0 0 90px; }
.a-cam_grubu { flex: 0 0 130px; }
.a-sph, .a-cyl { flex: 0 0 100px; }
.a-lot_no { flex: 0 0 140px; }
.a-hacim { flex: 0 0 120px; }
.a-uretim_yeri { flex: 1 1 160px; }
/* Fiyat/stok — dar (adet en dar) */
.fiyat-satir .a-adet { flex: 0 0 90px; }
.fiyat-satir .a-fiyat { flex: 0 0 140px; }
.fiyat-satir .a-kdv { flex: 0 0 90px; }
/* Gruba özel satır: hiç görünür alan yoksa boşluk bırakmasın */
.grup-satir:empty, .grup-satir { margin: 0; }
.filtre-firma { flex: 0 0 200px; }
.filtre-firma select { width: 100%; }
/* ===== Filtre bandı (satış listesi + stok giriş geçmişi/ayrıntılı/transfer paylaşır) ===== */
.satis-filtre { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px;
background: var(--yuzey-2, #f7f7f9); border-radius: 8px; margin-bottom: 10px; font-size: 11px; }
.satis-filtre .ff-satir { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
align-items: end; }
.satis-filtre .ff-satir-2 { grid-template-columns: repeat(5, 1fr) auto; }
/* Satış listesi: HER İKİ satır da 5 eşit kutu + auto buton kolonu → kutular BİREBİR hizalı,
butonlar sağda kutu hizasını bozmadan durur. */
.satis-filtre .ff-satir-butonlu { grid-template-columns: repeat(5, 1fr) auto; }
.satis-filtre .ff-satir-butonlu .ff-genis { grid-column: auto; }
/* Buton hücresi: auto kolonda, sağa dayalı, kutularla dikey hizalı (alt kenar) */
.satis-filtre .ff-butonlar { display: flex; gap: 6px; align-items: flex-end; justify-content: flex-end; }
/* Satış tablosu kapsülü: filtre 2 satır olunca daha çok yer bırak (alt toplamlar kaçmasın);
arka plan sayfa rengiyle aynı → sticky başlık üstündeki "beyaz çizgi" görünmez. */
/* Tablo kapsülü: içeriğe göre büyür, ekranı taşarsa scroll'lanır ama fixed bandın
36px'inden fazla uzamaz (boşluk kalmasın). max-height esnek: kayıt azsa kısa,
çoksa fixed bantın üstüne kadar. */
/* max-height JS ile ayarlanır (tabloBoyutla) → kapsül fixed banda kadar tam uzar, boşluk yok */
.satis-tablo-kapsul { overflow: auto; max-height: calc(100vh - 300px);
background: var(--yuzey); border-radius: 8px 8px 0 0; }
/* Alt bant: TEK SATIR, ekranın altına FIX (kayıt az olsa da hep en altta) */
.satis-alt-bant { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 36px;
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 0 18px; font-size: 12px; background: var(--yuzey-2, #f7f7f9);
border-top: 1px solid var(--kenar); box-shadow: 0 -2px 8px var(--golge, rgba(0,0,0,.06)); }
.satis-alt-bant .sab-sol { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
/* Sayfa numaraları — kompakt, tıklanabilir; aktif vurgulu */
.sayfa-no { display: inline-flex; align-items: center; justify-content: center;
min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--kenar);
border-radius: 5px; font-size: 12px; color: var(--metin-2); text-decoration: none;
background: var(--yuzey); }
.sayfa-no:hover { border-color: var(--kirmizi); color: var(--kirmizi); }
.sayfa-no.aktif { background: var(--kirmizi); color: #fff; border-color: var(--kirmizi);
font-weight: 700; }
.sayfa-nokta { padding: 0 2px; color: var(--metin-3); }
.satis-alt-bant .sab-sag { display: flex; align-items: center; gap: 18px; }
.satis-alt-bant .sab-sag b { font-size: 14px; }
.satis-filtre label { display: flex; flex-direction: column; gap: 2px; color: var(--metin-2);
min-width: 0; font-size: 11px; }
.satis-filtre .ff-genis { grid-column: span 1; }
.satis-filtre input, .satis-filtre select { width: 100%; box-sizing: border-box;
padding: 5px 8px; font-size: 12px; border: 1px solid var(--kenar); border-radius: 6px;
background: var(--yuzey); color: var(--metin); font-family: inherit; }
/* Filtre satırı varyantları — sayfaya göre eşit bölünmüş kolon sayısı (inline stil YOK) */
.satis-filtre .ff-satir-3 { grid-template-columns: repeat(3, 1fr) auto; }
.satis-filtre .ff-satir-5 { grid-template-columns: repeat(5, 1fr) auto; }
.satis-filtre .ff-satir-6 { grid-template-columns: repeat(6, 1fr) auto; }
/* Firma gibi geniş alan 2 kolon kaplasın (dar ekranda tek satıra sığsın diye) */
.satis-filtre .ff-genis2 { grid-column: span 2; }
/* Dar ekranda otomatik 2 satıra dağıl (min 150px altına düşünce sarar) */
@media (max-width: 1100px) {
.satis-filtre .ff-satir, .satis-filtre .ff-satir-3, .satis-filtre .ff-satir-5,
.satis-filtre .ff-satir-6 { grid-template-columns: repeat(3, 1fr); }
.satis-filtre .ff-genis2 { grid-column: span 3; }
}
/* Stok giriş/transfer filtre alanları — düzenli sarma için tutarlı taban genişlik.
(label'lar flex öğe; her biri min genişlikte, ekran daralınca eşit sarar) */
.stok-filtre-satir > label { flex: 1 1 160px; min-width: 150px; }
.stok-filtre-satir > label.filtre-firma { flex: 1 1 240px; }
.stok-filtre-satir > label.filtre-marka { flex: 1 1 200px; }
.stok-filtre-satir input[type="date"] { width: 100%; box-sizing: border-box; }
.stok-filtre-satir > label > select { width: 100%; box-sizing: border-box; }
/* Checkbox/radio, form-izgara'nın metin-input kutu stilinden MUAF (şişmesin, kaymasın) */
.form-izgara input[type="checkbox"], .form-izgara input[type="radio"] {
padding: 0; border: initial; width: 18px; height: 18px; flex: 0 0 auto;
accent-color: var(--kirmizi); cursor: pointer; }
/* Ayar onay kutusu — tik durumundan BAĞIMSIZ, hep görünür blok */
.ayar-onay-kutu { grid-column: 1 / -1; flex-direction: row !important; align-items: flex-start !important;
gap: 10px; padding: 10px 12px; background: var(--yuzey-2); border: 1px solid var(--kenar);
border-radius: 8px; margin-top: 4px; cursor: pointer; }
.ayar-onay-kutu > span { font-size: 13px; color: var(--metin); }
/* Ayar iç kart — panel içinde nested koyu alan (tema/stok davranışı ortak görünüm) */
.ayar-ic-kart { padding: 12px 14px; background: var(--yuzey-2); border: 1px solid var(--kenar);
border-radius: 8px; }
.ayar-ic-alan { display: flex; flex-direction: column; gap: 4px; font-size: 13px;
color: var(--metin-2); max-width: 320px; }
.ayar-ic-alan select { padding: 8px 10px; border: 1px solid var(--kenar); border-radius: 6px;
font-size: 14px; background: var(--yuzey); color: var(--metin); }
/* Ayar TOGGLE anahtarı — checkbox default stili görünmüyordu, kendi görsel anahtarımız */
.ayar-toggle-satir { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
background: var(--yuzey-2); border: 1px solid var(--kenar); border-radius: 8px; cursor: pointer; }
.ayar-toggle-metin { font-size: 13px; color: var(--metin); }
.anahtar { position: relative; display: inline-block; flex: 0 0 46px !important;
width: 46px !important; min-width: 46px; height: 26px; margin-top: 1px; }
.anahtar input[type="checkbox"] { position: absolute !important; opacity: 0 !important;
width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important;
border: 0 !important; -webkit-appearance: none; appearance: none; cursor: pointer; z-index: 2; }
.anahtar-yuva { position: absolute; inset: 0; display: block; background: #8b9096;
border: 1px solid rgba(0,0,0,.25); border-radius: 26px; transition: background .2s;
box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
.anahtar-top { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff;
border-radius: 50%; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.anahtar input[type="checkbox"]:checked ~ .anahtar-yuva { background: var(--yesil, #1a7f37); }
.anahtar input[type="checkbox"]:checked ~ .anahtar-yuva .anahtar-top { left: 23px; }
/* ===== KÂRLILIK — Mali Tablo (eski muhasebe defteri hissi) + Line Chart ===== */
/* El yazısı / muhasebeci defteri fontu — sistem el-yazısı fontları (dış bağımlılık yok).
"Segoe Print" (Win) · "Bradley Hand"/"Chalkboard" (Mac) · cursive fallback. */
.mali-tablo-sar { overflow-x: auto; }
/* El yazısı / muhasebe defteri font zinciri — mali tablo + rapor kartları ortak kullanır */
:root { --font-muhasebe: system-ui, "Segoe UI", Roboto, sans-serif; } /* eski el-yazısı font kaldırıldı → sistem fontu */
.mali-tablo { border-collapse: collapse; width: 100%; min-width: 760px;
font-family: var(--font-muhasebe);
font-size: 15px; color: #2b2620; }
.mali-tablo th, .mali-tablo td { padding: 6px 10px; border-bottom: 1px dashed var(--kenar);
white-space: nowrap; }
.mali-tablo thead th { border-bottom: 2px solid var(--metin-3); font-weight: 700;
color: var(--metin-2); background: var(--yuzey-2); position: sticky; top: 0; }
.mali-tablo .mt-baslik-kol { text-align: left; min-width: 190px; }
.mali-tablo .sayi { text-align: right; font-variant-numeric: tabular-nums; }
.mali-tablo .mt-ana td { font-weight: 700; }
.mali-tablo .mt-vurgu td { background: rgba(180,120,40,.08); }
.mali-tablo .mt-net td { background: rgba(26,127,55,.10); border-top: 2px solid var(--metin-3); }
.mali-tablo .mt-yuzde td { color: var(--metin-3); font-style: italic; }
.mali-tablo .mt-gider-baslik td { font-weight: 700; color: var(--metin-2);
border-top: 1px solid var(--kenar); }
.mali-tablo .mt-alt td { color: var(--metin-2); }
.mali-tablo .mt-toplam-kol { border-left: 2px solid var(--metin-3);
background: var(--yuzey-2); }
.mali-tablo .mt-tahmin { color: var(--metin-4); font-style: italic; }
.mali-tablo .mt-bos, .mali-tablo .mt-bos-hucre { color: var(--metin-4); }
/* ===== NAKİT AKIŞI PİVOT — 24 kolon tek ekrana sığar, el yazısı muhasebe fontu ===== */
.np-sar { width: 100%; overflow-x: auto; }
.np-tablo { border-collapse: collapse; width: 100%; table-layout: fixed;
font-size: 10.5px; color: #2b2620; }
:root[data-theme="dark"] .np-tablo,
:root:not([data-theme="light"]) .np-tablo { color: var(--metin); }
.np-tablo th, .np-tablo td { padding: 1px 3px; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; border-bottom: 1px solid var(--cizgi); }
/* İlk kolon (kalem adı) — dar, kısaltmalı */
.np-tablo .np-ad, .np-tablo .np-kalem-bas { width: 132px; max-width: 132px; text-align: left;
position: sticky; left: 0; background: var(--yuzey); z-index: 2; }
/* Sayı hücreleri — sağa dayalı, sabit dar genişlik (24 kolon sığsın) */
.np-tablo .np-b, .np-tablo .np-f { text-align: right; width: 33px; max-width: 33px;
font-variant-numeric: tabular-nums; }
/* Bütçe = soluk mavi ton (plan) · Fiili = temiz zemin (gerçekleşen) — ayırt edici */
.np-tablo .np-b { color: #5b7fa6; background: rgba(80,130,180,.10);
border-left: 1px solid var(--cizgi); }
.np-tablo .np-f { background: rgba(80,130,180,.02); }
.np-tablo .np-bos { color: var(--metin-4); }
/* Başlıklar */
.np-tablo thead th { background: #cfe0f5; color: #1a3a5c; font-weight: 700;
text-align: center; border-bottom: 1px solid #9bb8d8; font-size: 9.5px; }
.np-tablo thead .np-ay { border-left: 2px solid #9bb8d8; }
.np-tablo thead .np-bf th { font-size: 9px; font-weight: 600; }
.np-tablo thead .np-bf .np-f { color: #1a3a5c; }
.np-tablo thead .np-bf .np-b { color: #6b7f96; }
/* TOPLAM kolonu (12A, en sağda) + YTD ara dönem kolonu (solda) — ikisi de belirgin */
.np-tablo .np-tk, .np-tablo .np-yt { border-left: 2px solid #7a99bd;
background: rgba(0,0,0,.03); font-weight: 700; }
.np-tablo thead .np-tk, .np-tablo thead .np-yt { background: #b8d0ec; }
/* Grup arası boşluk satırı */
.np-tablo .np-bosluk td { border: none; height: 7px; background: transparent; padding: 0; }
/* Cash From Operations — kırmızı, en üstte, belirgin */
.np-cfo td { background: #e3f0e0; color: #2e6b28; font-weight: 800; font-size: 11px;
border-top: 2px solid #7fb069; border-bottom: 2px solid #7fb069; }
.np-cfo .np-ad { color: #2e6b28; }
/* Ana gruplar (Satışlar / SMM / Giderler) — renkli, KALIN + turuncu üst/alt çizgi (Net Nakit gibi) */
.np-tablo .np-grup td { font-weight: 900; font-size: 11px;
border-top: 2px solid #d98b6f; border-bottom: 2px solid #d98b6f; }
.np-tablo .np-grup .np-ad { font-weight: 900; }
.np-grup-satis td { background: #e3f0e0; } /* satışlar — yeşilimsi */
.np-grup-satis .np-ad { color: #2e6b28; }
.np-grup-smm td { background: #fdeee0; } /* smm — turuncumsu */
.np-grup-smm .np-ad { color: #a35f14; }
.np-grup-gider td { background: #eae4f0; } /* gider — morumsu */
.np-grup-gider .np-ad { color: #6b4d8f; }
.np-grup-brut td { background: #e3f0e0; } /* brüt kâr — yeşilimsi (satışlar gibi) */
.np-grup-brut .np-ad { color: #2e6b28; }
/* Yüzde satırları (Brüt Kâr % / Net Nakit %) — italik, soluk, ince */
.np-tablo .np-yuzde td { font-style: italic; color: var(--metin-3); font-size: 9.5px; }
.np-tablo .np-yuzde .np-ad { padding-left: 12px; }
/* Alt kalemler — girintili, normal ağırlık */
.np-tablo .np-alt .np-ad { padding-left: 12px; color: var(--metin-2); font-weight: 400; }
/* koyu tema: mali tablo mürekkep rengi açılır */
:root[data-theme="dark"] .mali-tablo,
:root:not([data-theme="light"]) .mali-tablo { color: var(--metin); }
.line-chart-sar { overflow-x: auto; }
.line-chart { width: 100%; min-width: 660px; height: auto; }
.line-chart .lc-grid { stroke: var(--cizgi); stroke-width: 1; stroke-dasharray: 3 4; }
.line-chart .lc-yekseni { fill: var(--metin-4); font-size: 11px; font-variant-numeric: tabular-nums; }
.line-chart .lc-satis { stroke: var(--mavi); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.line-chart .lc-kar { stroke: var(--yesil); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
/* İki çizgi arası alan — satış (üst) ile net kâr (alt) farkını vurgular */
.line-chart .lc-ara-alan { fill: var(--mavi); opacity: 0.10; stroke: none; }
/* Ara alandaki net kâr % — yuvarlak köşeli rozet içinde, alanın dikey ortasında */
.line-chart .lc-ara-rozet { fill: none; stroke: var(--yesil); stroke-width: 1; }
.line-chart .lc-ara-yuzde { fill: var(--yesil); font-size: 9.5px; font-weight: 700;
font-variant-numeric: tabular-nums; }
.line-chart .lc-nokta-satis { fill: var(--mavi); }
.line-chart .lc-nokta-kar { fill: var(--yesil); }
.line-chart .lc-deger { font-size: 8.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.line-chart .lc-deger-satis { fill: var(--mavi); }
.line-chart .lc-deger-kar { fill: var(--yesil); }
.line-chart .lc-etiket { fill: var(--metin-3); font-size: 9.5px; }
/* Haftalık performans area chart (yönetici raporu) */
.hafta-chart-sar { width: 100%; overflow-x: auto; }
.hafta-chart { width: 100%; height: auto; display: block; min-width: 640px; }
.hafta-chart .hafta-eksen { fill: var(--metin-3); font-size: 7.5px; }
.hafta-chart .hafta-nokta { cursor: pointer; }
.hafta-chart .hafta-nokta:hover { fill: var(--mavi); }
/* Yönetici raporu alt blok — sol (En Çok Satan) + sağ (Günlük Analiz) TAM YARI, eşit boy */
.alt-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.alt-ikili > .panel { min-width: 0; margin: 0; } /* taşmayı engelle, eşit genişlik */
@media (max-width: 900px) { .alt-ikili { grid-template-columns: 1fr; } }
/* Günlük analiz tablosu — kart genişliğine SIĞ (.veri-tablo'nun 1100px + nowrap'ini ez) */
.veri-tablo.gun-analiz-tablo { table-layout: fixed; width: 100%; min-width: 0; }
.veri-tablo.gun-analiz-tablo th,
.veri-tablo.gun-analiz-tablo td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gun-analiz-tablo .ga-bar-yuva { background: var(--yuzey-2); border-radius: 4px; height: 16px;
width: 100%; overflow: hidden; }
.gun-analiz-tablo .ga-bar { background: var(--mavi); height: 100%; border-radius: 4px;
min-width: 2px; transition: width .3s; }
/* Satış Performans aylık tablo — 3'lü blok (Föy · Gün.Ciro · Ciro) ayracı */
.rapor-tablo .blok-son { border-right: 2px solid var(--kenar); }
/* İkinci toplam (yıl · tahmin dahil) — ilk toplamdan hafif ayrışsın */
.rapor-tablo .toplam-yil td { border-top: 1px dashed var(--kenar); opacity: 0.92; }