/* ================================================================
NOVUS — Kurumsal Yönetim Sistemi
Görsel dil: parşömen zemin · antik altın · mürekkep · serif başlık
Hermetik zarafet + kurumsal disiplin. Sade, ferah, hiyerarşik.
================================================================ */
/* ══ 19.08 · RENK CANLANDIRMA (İsa: "renkler güzel, biraz daha
canlandır — şema bozulmadan") ═══════════════════════════════════
YÖNTEM: ton (hue) HİÇ DEĞİŞMEDİ. Yalnız doygunluk (HLS'in S'i)
artırıldı; açıklık ise kontrastı korumak için ölçülerek düzeltildi.
Renk şemasını "bozan" şey tonu kaydırmaktır — altın yeşile, mavi
mora kayarsa marka gider. Doygunluk artışı aynı rengin CANLI hâlidir.
ÖLÇÜLDÜ (WCAG 2.1 · normal metin 4.5:1, arayüz ögesi 3:1):
--gold #b0872f → #ba8b25 beyaz 3.08 · koyu şerit 5.76 (arayüz)
--gold-deep #8a6a24 → #976f17 beyaz 4.56 (bağlantı)
--green #3f7d5a → #2c774e kendi zemininde 4.74
--amber #a8791f → #8f6204 kendi zemininde 4.78
--red #a8443c → #be2f23 kendi zemininde 4.63
--blue #3a5f8a → #275c9a kendi zemininde 5.75
--violet #6b4fa0 → #653eae kendi zemininde 5.92
Zemin tonları (tint) da doygunlaştı; rozet ve şeritler artık soluk
değil. Ana metin/zemin kontrastı 15.03 — hiç bozulmadı.
Ölçüm betiği: bu değerler gözle değil hesapla seçildi. */
:root{
/* Mürekkep & zemin */
--ink:#15181f;
--ink-2:#1b1f28;
--ink-soft:#2a2f3a;
--bg:#f5f3ee;
--surface:#ffffff;
--surface-2:#faf8f4;
--line:#e8e2d6;
--line-2:#f0ebe1;
/* Metin */
--text:#1b1e26;
--muted:#6b6f79;
--faint:#9a9ea7;
/* Antik altın (tek vurgu) */
/* ⚠ BURADAKİ DEĞERLER YEDEKTİR: gerçek palet static/palet.css'te ve
o dosya style.css'ten SONRA yükleniyor. Buradakiler yalnız palet
dosyası bir sebeple yüklenmezse devreye girer — ekran renksiz
kalmasın diye. Palet değiştirmek için renk_paleti.py çalıştırılır,
BURASI ELLE DÜZENLENMEZ. */
--gold:#c78903;
--gold-deep:#9f6d02;
--gold-tint:#fceecf;
--gold-soft:#fceac5;
--gold-line:#fad380;
/* Durum (yumuşatılmış, neon değil) */
--green:#00875c; --green-tint:#cffcee;
--amber:#af6303; --amber-tint:#fce8cf;
--red:#e42513; --red-tint:#fbd4d0;
--blue:#006eb8; --blue-tint:#cfeafc;
--violet:#653eae;--violet-tint:#e1d7f4;
/* Biçim */
/* ⚠ --mono HİÇ TANIMLI DEĞİLDİ; `var(--mono)` yazan üç yer
tarayıcının varsayılan yazı tipine düşüyordu. */
--mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
--serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--r:14px; --r-sm:10px;
--sh:0 1px 2px rgba(21,24,31,.04),0 4px 16px rgba(21,24,31,.05);
--sh-lift:0 8px 30px rgba(21,24,31,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
/* ⚠ `hidden` ÖZNİTELİĞİ GERÇEKTEN GİZLESİN.
HTML'in `hidden` özniteliği tarayıcının kendi biçim dosyasında
`display:none` demektir — ve yazar CSS'indeki HERHANGİ bir `display`
onu ezer. Novus'ta yüzlerce kural `display:flex/grid` yazıyor;
sonuç, `hidden` yazılmış bir kutunun ekranda DURMASI oluyordu
(22.08'de mesajlaşma ekranında üç panel birden açık göründü).
Tek satırla kapatılıyor: gizli demek gizli demektir. */
[hidden]{display:none !important}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:14px;line-height:1.55;
background-image:radial-gradient(circle at 100% 0,rgba(199,137,3,.11),transparent 44%);}
a{color:var(--gold-deep);text-decoration:none}
a:hover{color:var(--gold)}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.2px;line-height:1.15}
/* ---------------- Yerleşim ---------------- */
.layout{display:flex;flex-direction:column;min-height:100vh}
/* ================================================================
UST MENU — soldan saga tek serit, NOVUS en solda
Sol menu her ekranda 246px yer kapliyordu; icerik o kadar dar
kaliyordu. Menu uste alininca icerik iki kenara da dayanir.
Iki serit iki soruyu ayirir: "hangi ekrandayim" (ana sekme) ve
"hangi module gidecegim" (modul menuleri).
================================================================ */
.ustbar{display:flex;align-items:center;gap:18px;padding:0 22px;height:60px;
background:var(--kenar-bg);color:var(--kenar-yzi);position:sticky;top:0;z-index:40;
background-image:radial-gradient(circle at 12% -40%,rgba(var(--gold-rgb),.14),transparent 62%);
border-bottom:1px solid var(--kenar-line)}
.ustbar .marka{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.ustbar .marka .mark{width:32px;height:32px;flex:none}
.ustbar .marka .ad{font-family:var(--serif);font-size:20px;font-weight:600;
color:var(--ink);letter-spacing:1.4px;line-height:1}
.ustbar .marka .ad small{display:block;font-family:var(--sans);font-size:8.5px;
font-weight:500;letter-spacing:2.6px;text-transform:uppercase;color:var(--kenar-ikon);
margin-top:1px}
/* ANA SEKMELER — panel, karne, benim sayfam, raporlar, gorevlerim */
.anasekme{display:flex;align-items:center;gap:2px;height:100%;min-width:0;
overflow-x:auto;scrollbar-width:none}
.anasekme::-webkit-scrollbar{display:none}
.anasekme a{display:inline-flex;align-items:center;gap:8px;height:100%;
padding:0 15px;color:var(--kenar-soluk);font-size:13.5px;font-weight:500;
white-space:nowrap;border-bottom:2px solid transparent;transition:.15s}
.anasekme a:hover{color:var(--ink);background:var(--kenar-uzeri)}
.anasekme a.active{color:var(--kenar-secili-yzi);border-bottom-color:var(--gold);
background:linear-gradient(180deg,transparent,var(--kenar-secili))}
.anasekme a.active .ico{color:var(--kenar-secili-yzi)}
.anasekme .ico{font-size:15px;opacity:.85}
.ustbar .search{flex:1;max-width:330px;margin-left:auto}
/* URUN DAMGASI -- "NOVUS SIGMA", arama kutusu ile tema dugmesinin TAM
ORTASI. Isa'nin yeri: "gunduz-gece secenegi ile ara kutusunun tam
ortasina, ALTIN RENKLERLE."
flex:1 ile aradaki bosluğu kaplar; komsularini itmez. Rengi
--kenar-marka: Novus altininin ust serit zeminine karsi olculmus
hali (gece 5.94, gunduz 4.56 -- esik 4.5).
Dar ekranda GIZLENIR: orada bosluk yok, damga aramayi ezerdi. */
/* 22.08 (5) - ISA: "novus sigmayi BUYUTEBILIRSIN ana ekrandaki."
16 -> 23px. Ust serit 60px yuksekliginde; 23px yazi +.26em harf
araligiyla serit icinde 28px kapliyor, yani hala yarisindan az --
zil, tema dugmesi ve kimlik bolgesi ezilmiyor. Damga `flex:1` ile
ARADAKI BOSLUGU kaplar, komsularini itmez; buyuyen tek sey yazidir.
Renk DEGISMEDI: --kenar-marka olculmus degerdir (gece 5.94 /
gunduz 4.56), buyuk yaziya gecerken ton oynatmak olcumu bozardi. */
.ustbar .urun-damga{flex:1;text-align:center;white-space:nowrap;
font-family:var(--serif);font-size:23px;font-weight:600;
letter-spacing:.26em;text-transform:uppercase;color:var(--kenar-marka);
user-select:none;padding:0 10px;line-height:1}
@media(max-width:1100px){.ustbar .urun-damga{display:none}}
.ustbar .search input{background:var(--surface);border-color:var(--kenar-line);
color:var(--text)}
.ustbar .search input::placeholder{color:var(--faint)}
.ustbar .search input:focus{background:var(--surface);outline:none;
border-color:var(--gold)}
.ustbar .search::before{color:var(--faint)}
.ustbar .appbar-user{margin-left:0;flex:none;color:var(--kenar-yzi)}
.ustbar .appbar-user .who b{color:var(--ink)}
.ustbar .appbar-user .role{color:var(--kenar-ikon)}
.ustbar .bell{color:var(--kenar-yzi)}
/* MODUL SERIDI — departman gruplari, tiklaninca asagi acilir */
.modulbar{background:var(--surface);border-bottom:1px solid var(--line);
position:sticky;top:60px;z-index:35;box-shadow:0 1px 3px rgba(21,24,31,.04)}
/* KAYDIRMA DEGIL SATIR KAYDIRMA (wrap). overflow-x:auto denendi ve
acilir menuyu KIRPIYORDU: kaydirilabilir kap, mutlak konumlu cocugu
keser. Gruplar dar ekranda alt satira iner; menu her zaman tam gorunur. */
.modulbar-ic{display:flex;align-items:stretch;flex-wrap:wrap;gap:0;padding:0 14px}
.mgrup{position:relative;flex:none}
/* MODUL BASLIKLARI ALTIN (06.08).
Gri (--muted) idi ve ust seridin altin vurgusuyla konusmuyordu.
--gold-deep secildi, --gold degil: acik altin beyaz zeminde soluk
kaliyor ve okunmuyor; koyu altin beyazda 5,6:1 karsitlik verir, yani
normal metin icin erisilebilirlik esigini gecer.
Punto 12 -> 13, dolgu biraz genis: serit tek satirlik oldugu icin
yukseklik artisi sayfadan yer calmiyor. */
.mtrig{background:transparent;border:none;cursor:pointer;white-space:nowrap;
padding:13px 17px;font:600 13px var(--sans);letter-spacing:.7px;
text-transform:uppercase;color:var(--gold-deep);display:inline-flex;
align-items:center;gap:7px;border-bottom:2px solid transparent;transition:.15s}
.mtrig .ok{font-size:10px;opacity:.65;transition:transform .18s ease}
.mtrig:hover{color:var(--ink);background:var(--gold-tint)}
.mgrup.acik .mtrig{color:var(--ink);background:var(--gold-tint);
border-bottom-color:var(--gold)}
.mgrup.acik .mtrig .ok{transform:rotate(180deg)}
/* ICINDE AKTIF SAYFA VARSA en guclu isaret bu olmali. Taban artik altin
oldugu icin "altin renk" ayirt edici olmaktan cikti; ayrim murekkep
rengi + kalin harf + altin alt cizgi ile kuruluyor. Kullanici
nerede oldugunu menuyu acmadan gorur. */
.mgrup.icinde .mtrig{color:var(--ink);font-weight:700;
border-bottom-color:var(--gold)}
.mmenu{display:none;position:absolute;top:100%;left:0;min-width:255px;
background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--gold);
border-radius:0 0 var(--r-sm) var(--r-sm);box-shadow:var(--sh-lift);
padding:6px;z-index:50;max-height:74vh;overflow-y:auto}
.mgrup.acik .mmenu{display:block}
.mmenu a{display:flex;align-items:center;gap:11px;padding:9px 13px;
color:var(--ink-soft);font-size:13.5px;border-radius:var(--r-sm);
border-left:2px solid transparent;transition:.13s}
.mmenu a:hover{background:var(--gold-tint);color:var(--ink)}
.mmenu a.active{background:var(--gold-tint);color:var(--ink);font-weight:600;
border-left-color:var(--gold)}
.mmenu a.active .ico{color:var(--gold-deep)}
.mmenu .ico{width:18px;text-align:center;font-size:15px;opacity:.8;flex:none}
/* ALT SEKME BAŞLIĞI — 12.08 sekme birleştirmesi.
İki üst sekme tek başlık altında birleşince (Satın Alma+Satış →
Ticaret) içerideki bağlantılar tek yığın hâline geliyordu ve
hangisinin hangi işe ait olduğu kayboluyordu. Belge bölüm 8:
"üst sekme ile alt sekme görsel olarak net ayrılacak". */
.mmenu .altbas{display:flex;align-items:center;gap:8px;
padding:9px 13px 5px;font:700 10px Consolas,monospace;letter-spacing:.13em;
text-transform:uppercase;color:var(--gold-deep);white-space:nowrap}
/* ⚠ ESKİ AYRAÇ ÇİZGİSİ KALDIRILDI (21.08 · 2. tur · GÖZLE BULUNDU).
`.altbas` düz metinken sağına uzanan bu `flex:1` çizgi bir süstü.
Başlık BUTON olunca aynı çizgi butonun içinde kaldı ve `flex:1`
ile genişliğin yarısını yedi: 228px butonun yalnız 93px'i yazıya
kalıyordu, "Fatura & Beyan" ekranda "FATURA & BE…" diye
kırpılıyordu. Testler yeşildi — bu kusuru yalnız tarayıcıda
bakmak gösterdi. */
.mmenu .altbas::after{content:none}
/* ALT GRUP AÇILIR-KAPANIR (21.08) — kabuk.css yüklenmese bile alt
menüler gizli/açık mantığını korumalı; yoksa hepsi birden dökülür. */
.altgrup .altbas{width:100%;border:none;background:none;cursor:pointer;
text-align:left;font:700 11px Consolas,monospace;letter-spacing:.13em}
.altmenu{display:none}
.altgrup.acik>.altmenu{display:block}
.mmenu .altbas + a{margin-top:0}
.mmenu .altbas ~ .altbas{margin-top:5px;border-top:1px solid var(--line-2);
padding-top:9px}
/* Dar ekran: modul seridi gizlenir, dugmeyle acilir */
.modul-ac{display:none;background:transparent;border:none;cursor:pointer;
padding:11px 16px;font:600 12px var(--sans);letter-spacing:.6px;
text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){
.ustbar{gap:10px;padding:0 12px}
.ustbar .search{display:none}
.anasekme a{padding:0 11px;font-size:12.5px}
.anasekme a .ico{display:none}
.ustbar .appbar-user .who{display:none}
.modul-ac{display:block}
.modulbar-ic{display:none;flex-direction:column;padding:0 0 8px}
.modulbar.acik .modulbar-ic{display:flex}
.mgrup{width:100%}
.mtrig{width:100%;justify-content:space-between}
.mmenu{position:static;min-width:0;border:none;border-top:1px solid var(--line-2);
box-shadow:none;border-radius:0;max-height:none}
}
.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow-x:hidden}
/* Yatay taşma (sayfa kayması) koruması: hiçbir geniş içerik sayfayı sağa
kaydırmaz; geniş tablolar kendi .table-wrap kutusunda kayar. Amatör
"sayfa kayması" görüntüsünü kökten engeller. */
.content>*{max-width:100%}
.topbar{flex-wrap:wrap;gap:12px}
.appbar{height:60px;background:rgba(250,248,244,.85);backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;
padding:0 30px;position:sticky;top:0;z-index:15}
.search{flex:1;max-width:460px;position:relative}
.search input{background:var(--surface);border:1px solid var(--line);border-radius:999px;
padding:9px 16px 9px 38px;font-size:13.5px;width:100%}
.search::before{content:"⌕";position:absolute;left:14px;top:50%;transform:translateY(-50%);
color:var(--faint);font-size:16px}
.appbar-user{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px}
.appbar-user .who{text-align:right;line-height:1.25}
.appbar-user .who b{font-weight:600}
.appbar-user .role{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-deep)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--ink-yzey);color:var(--gold);
display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:17px;font-weight:600}
/* ═══ KULLANICI MENÜSÜ (12.08) ═══
Sağ üstteki ad alanı artık açılır menü: Benim Sayfam, B2B & Mobil,
Gelen Talepler, Yönetim, İzleme & Güvenlik ve Çıkış buraya taşındı.
Belge bölüm 8: "sağ üst kullanıcı alanı artık menü olacağı için
tıklanabilir olduğu görsel olarak belli olmalı" → imleç, hover zemini
ve ▾ oku bunun için var. */
.kmenu{position:relative;display:flex;align-items:center;
border:1px solid transparent;border-radius:999px;padding:2px;transition:.14s}
.kmenu:hover{background:var(--kenar-uzeri);border-color:var(--kenar-line)}
.kmenu.acik{background:var(--kenar-uzeri-2);border-color:var(--kenar-line)}
/* AD + AVATAR: doğrudan Benim Sayfam'a giden bağlantı. */
.kad{display:flex;align-items:center;gap:10px;padding:2px 4px 2px 12px;
color:inherit;text-decoration:none;border-radius:999px}
.kad:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.kad .who{display:block;text-align:right;line-height:1.25}
.kad .who .role{display:block}
/* ▾ : menüyü açan ayrı düğme. */
.ktrig{display:flex;align-items:center;justify-content:center;
background:transparent;border:none;border-radius:999px;
width:26px;height:30px;cursor:pointer;color:inherit;font:inherit;
transition:.14s}
.ktrig:hover{background:var(--kenar-uzeri-2)}
.ktrig:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ktrig .ok{font-size:10px;opacity:.7;transition:transform .18s ease}
.kmenu.acik .ktrig .ok{transform:rotate(180deg)}
.kmenu-ic{display:none;position:absolute;top:calc(100% + 6px);right:0;
min-width:268px;max-height:78vh;overflow-y:auto;
background:var(--surface);border:1px solid var(--line);
border-top:2px solid var(--gold);border-radius:0 0 var(--r-sm) var(--r-sm);
box-shadow:var(--sh-lift);padding:6px;z-index:60}
.kmenu.acik .kmenu-ic{display:block}
.kmenu-ic a{display:flex;align-items:center;gap:11px;padding:9px 13px;
color:var(--ink-soft);font-size:13.5px;border-radius:var(--r-sm);
border-left:2px solid transparent;text-decoration:none;transition:.13s}
.kmenu-ic a:hover{background:var(--gold-tint);color:var(--ink)}
.kmenu-ic a.active{background:var(--gold-tint);color:var(--ink);font-weight:600;
border-left-color:var(--gold)}
.kmenu-ic .ico{width:18px;text-align:center;font-size:15px;opacity:.8;flex:none}
/* Çıkış menünün son satırı ve tek geri dönüşü olmayan eylemi:
ötekilerden ince bir çizgiyle ayrılır ki yanlışlıkla tıklanmasın. */
.kmenu-ic .kcikis{margin-top:5px;border-top:1px solid var(--line-2);
padding-top:11px;border-radius:0}
@media (max-width:860px){
/* Dar ekranda ad gizlenir, avatar + ok kalır — menü yine açılır. */
.kad .who{display:none}
.kad{padding:2px 2px 2px 6px}
.kmenu-ic{position:fixed;left:10px;right:10px;min-width:0;top:60px}
}
/* İÇERİK GENİŞLİĞİ — sayfanın iki kenarına da dayanır.
Eskiden max-width:1240px vardı ve içerik geniş ekranda SOLA yapışıp
sağda büyük bir boşluk bırakıyordu. Artık kullanılabilir alanın
tamamını kaplar; kenar boşluğu yalnız padding kadardır ve her
sayfada aynıdır. Yatay taşma koruması (.content>*{max-width:100%})
yerinde durduğu için geniş tablolar yine kendi kutusunda kayar. */
.content{padding:28px 30px 44px;width:100%;max-width:none}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;gap:16px}
.topbar h1{font-size:30px;color:var(--ink)}
.topbar .sub{color:var(--muted);font-size:13.5px;margin-top:5px;max-width:70ch}
.eyebrow{font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-deep);
font-weight:600;margin-bottom:5px}
/* ---------------- Grid & kart ---------------- */
.grid{display:grid;gap:18px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:960px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card .hd{padding:16px 20px;border-bottom:1px solid var(--line-2);font-family:var(--serif);
font-size:18px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px}
.card .bd{padding:20px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
padding:18px 20px;box-shadow:var(--sh);position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;
background:linear-gradient(90deg,var(--gold),transparent 65%)}
.stat .lbl{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1.2px;font-weight:600}
.stat .val{font-family:var(--serif);font-size:34px;font-weight:600;margin-top:8px;color:var(--ink);line-height:1}
.stat .val.gold{color:var(--gold-deep)}
.stat .val.red{color:var(--red)}
.stat .val.green{color:var(--green)}
.stat .foot{font-size:12px;color:var(--muted);margin-top:6px}
.stat .top{position:absolute;top:16px;right:18px;width:34px;height:34px;border-radius:9px;
background:var(--gold-tint);color:var(--gold-deep);display:flex;align-items:center;justify-content:center;font-size:16px}
/* ---------------- Tablo ---------------- */
/* overflow:hidden İDİ. Geniş tablolarda (satır içi form barındıranlar) son
sütun görünmez hâle geliyordu — kaydırma yerine KIRPILIYORDU. overflow-x
ile tablo yatay kaydırılabilir; köşe yuvarlaklığı korunur. */
.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
overflow-x:auto;overflow-y:hidden;box-shadow:var(--sh);
-webkit-overflow-scrolling:touch}
.table-wrap::-webkit-scrollbar{height:9px}
.table-wrap::-webkit-scrollbar-track{background:var(--line-2)}
.table-wrap::-webkit-scrollbar-thumb{background:var(--gold);border-radius:5px;
border:2px solid var(--surface)}
.table-wrap{scrollbar-width:thin;scrollbar-color:var(--gold) var(--line-2)}
table{width:100%;border-collapse:collapse;background:var(--surface)}
thead th{background:var(--surface-2);color:var(--muted);font-size:10.5px;text-transform:uppercase;
letter-spacing:1.2px;font-weight:700;text-align:left;padding:13px 18px;border-bottom:1px solid var(--line)}
thead th.right,tbody td.right{text-align:right}
tbody td{padding:14px 18px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
.code{font-family:"Consolas","SF Mono",monospace;font-size:12.5px;color:var(--gold-deep);font-weight:600;letter-spacing:.3px}
.num{font-family:var(--serif);font-size:15px;font-weight:600}
/* ---------------- Rozetler ---------------- */
/* ⚠ 21.08 — ROZET METNİ ARTIK `-deep`. Zemin (`--X-tint`) belirgin
şekilde renklendirildi; beyaz zemin için ölçülmüş `--X` o zeminde 4.5
kontrastı TUTMUYOR. İkisi birlikte hesaplanıyor (renk_paleti.rozet_cifti):
zemin olabildiğince renkli, yazı o zeminde okunur. Eskisinde rozet
zeminleri beyaza yakın kalıyordu ve "palet değişmedi" hissinin
sebebi buydu. */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:999px;
font-size:11.5px;font-weight:600;letter-spacing:.2px;white-space:nowrap}
.badge.acik,.badge.gonderildi,.badge.kismi{background:var(--blue-tint);color:var(--blue-deep)}
.badge.islemde,.badge.kesildi,.badge.taslak{background:var(--amber-tint);color:var(--amber-deep)}
.badge.tamamlandi,.badge.odendi,.badge.kabul,.badge.aktif,.badge.ok{background:var(--green-tint);color:var(--green-deep)}
.badge.iptal,.badge.feshedildi{background:var(--line-2);color:var(--muted)}
.badge.kilitli,.badge.uyari,.badge.red,.badge.suresi_doldu,.badge.gecikmis{background:var(--red-tint);color:var(--red-deep)}
.badge.depo{background:var(--violet-tint);color:var(--violet-deep)}
.badge.servis{background:var(--gold-tint);color:var(--gold-deep)}
.badge.raf{background:var(--blue-tint);color:var(--blue-deep)}
.pill{font-family:"Consolas",monospace;background:var(--surface-2);border:1px solid var(--line-2);
padding:2px 8px;border-radius:6px;font-size:11.5px;color:var(--ink-soft)}
/* ---------------- Butonlar & form ---------------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:9px;border:1px solid transparent;
font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;
background:var(--ink-yzey);color:var(--ink-yzi);transition:.15s;text-decoration:none;line-height:1}
.btn:hover{background:var(--ink-yzey-2);color:var(--ink-yzi)}
.btn.gold{background:var(--gold);color:var(--gold-yzi)}
.btn.gold:hover{background:var(--gold-deep);color:var(--gold-yzi)}
.btn.ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--gold-line);color:var(--gold-deep)}
.btn.sm{padding:6px 11px;font-size:12px}
input,select,textarea{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
font-size:13.5px;font-family:inherit;background:var(--surface);color:var(--text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,135,47,.14)}
/* ONAY VE SECIM KUTUSU GENEL KURALIN DISINDA (22.08 · gozle yakalandi).
Ustteki `input{width:100%}` metin kutulari icin yazilmisti; onay
kutusuna da uygulaniyor ve kutu bulundugu alanin TAMAMINI kapliyor.
Sonuc ekranda soyle goruluyordu: kucuk bir kare solda, kendi etiketi
100 piksel otede, aralarinda hicbir sey olmayan bir bosluk. Yani
"kaydederken kesinlestir" yazisi ile onun kutusu AYRI IKI SEY gibi
duruyordu -- ve kesinlestirme geri alinamaz bir islemdir; yanlis
kutuya basmak ucuz degildir.
Ayni kusur 22.08'de bir kez `.filters` seridinde yakalanip ORAYA
ozel cozulmustu (asagida duruyor). Ozel cozum, kusurun kendisini
degil yalniz bir ornegini kapatmis: fis formunda ve virman
ekraninda ayni sey yeniden dogdu. Kural artik KAYNAKTA. */
input[type=checkbox],input[type=radio]{width:auto;min-width:0;flex:none;
margin:0;padding:0}
label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.field{margin-bottom:16px}
/* FORM IZGARASI — ekran genisligine uyar (06.08).
Sabit "1fr 1fr" idi ve menu sola yapisikken makuldu. Menu uste alininca
icerik alani genisledi; iki kolon sayfanin solunda kalip sagi bombos
birakiyordu. auto-fit ile kolon sayisi genislige gore artar: dar ekranda
tek, orta ekranda iki, genis ekranda uc kolon. Alan genisligi 300px'in
altina inmez — daha darinda etiket ve deger okunmaz olur. */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:0 18px}
/* FORM KARTI — okunabilirlik siniri + ORTALAMA.
Iki kisit birden var: alan sinirsiz genisleyemez (1900px'lik bir metin
kutusunda goz etiketten degere gidemez), ama form sayfanin solunda dar
bir serit halinde de kalmamali. Cozum kolonu sinirlayip ORTALAMAK:
bosluk iki yana esit dagilir ve kasitli gorunur — solda yigilip sagi
bombos birakmaz. Liste ekranlari bu sinifi kullanmaz, onlar zaten
genisligin tamamini doldurur. */
.kart-form{max-width:none}
.inline-form{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.inline-form input,.inline-form select{width:auto}
/* ---------------- Uyarı / flash ---------------- */
.flash{padding:12px 16px;border-radius:var(--r-sm);margin-bottom:14px;font-size:13.5px;font-weight:500;
display:flex;align-items:center;gap:9px}
.flash::before{font-size:15px}
.flash.success{background:var(--green-tint);color:var(--green-deep);border:1px solid var(--green-line)}
.flash.success::before{content:"✓"}
.flash.error{background:var(--red-tint);color:var(--red-deep);border:1px solid var(--red-tint)}
.flash.error::before{content:"!"}
.alert{padding:11px 15px;border-radius:var(--r-sm);margin-bottom:10px;border-left:3px solid var(--amber);
background:var(--amber-tint);font-size:13px;color:var(--amber-deep)}
.alert.dang{border-left-color:var(--red);background:var(--red-tint);color:var(--red-deep)}
.alert.ok{border-left-color:var(--green);background:var(--green-tint);color:var(--green-deep)}
/* ---------------- Satış hattı zinciri ---------------- */
/* ── İŞ EMRİ AKIŞ BASAMAKLARI (06.08) ────────────────────────────────
Eski .pipeline dört kutuydu ve fatura durumunu gösteriyordu. Bu şerit
aracın fiziksel yolculuğunu gösterir ve dokuz basamağa çıkabilir, o
yüzden sarmalanır (wrap) — yatay kaydırma kullanıcıyı basamak aramaya
zorlar, sarmalama zorlamaz. Renk tek başına anlam taşımaz: aktif
basamak ayrıca "şu an burada" yazar, atlanan "gerekmedi" yazar. */
/* ── İŞ EMRİ BEDEL KARTI (06.08) ─────────────────────────────────────
Fatura dökümü gibi okunur: her satır solda ad, sağda rakam. Ara toplam
ve genel toplam çizgiyle ayrılır — göz, KDV'nin nerede bittiğini
aramak zorunda kalmasın. */
/* ── PARÇA TALEBİ: MOD DÜĞMELERİ ve CANLI ÖNERİ (06.08) ──────────────
Öneri kutusu alanın ALTINA açılır ve sayfayı itmez (absolute) — açılıp
kapandıkça formun zıplaması, yazmayı zorlaştırır. */
.parca-mod{display:flex;gap:0;margin-top:4px}
.parca-mod-btn{padding:6px 14px;border:1px solid var(--line);background:var(--surface);
font:600 12px var(--sans);color:var(--muted);cursor:pointer}
.parca-mod-btn:first-child{border-radius:7px 0 0 7px}
.parca-mod-btn:last-child{border-radius:0 7px 7px 0;border-left:none}
.parca-mod-btn.secili{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.parca-oneri{position:absolute;top:100%;left:0;right:0;z-index:40;
background:var(--surface);border:1px solid var(--gold);border-radius:0 0 8px 8px;
box-shadow:0 8px 22px rgba(0,0,0,.13);max-height:270px;overflow-y:auto}
.parca-oneri-satir{padding:8px 12px;font-size:13px;cursor:pointer;
border-bottom:1px solid var(--line-2)}
.parca-oneri-satir:last-child{border-bottom:none}
.parca-oneri-satir:hover,.parca-oneri-satir.ilk{background:var(--gold-soft)}
.parca-oneri-not{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.bedel-kart .bd{padding:16px 18px}
.bedel-satir{display:flex;justify-content:space-between;align-items:baseline;
gap:14px;padding:5px 0;font-size:13.5px}
.bedel-satir .muted{font-size:11.5px}
.bedel-satir.ara{border-top:1px solid var(--line);margin-top:5px;padding-top:9px}
.bedel-satir.toplam{border-top:2px solid var(--gold);margin-top:5px;
padding-top:9px;font-size:15px;font-weight:700}
.bedel-satir.toplam b{font-size:19px}
.basamak-serit{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.basamak{display:flex;align-items:center;gap:7px;padding:6px 12px;
border:1px solid var(--line);border-radius:999px;background:var(--surface);
font:600 12px var(--sans);color:var(--faint)}
.basamak .bno{display:inline-flex;align-items:center;justify-content:center;
width:19px;height:19px;border-radius:50%;background:var(--line);
color:var(--muted);font-size:11px;font-weight:700}
.basamak .bnot{font-weight:500;font-size:11px;opacity:.85}
.basamak.tamam{color:var(--ink);border-color:var(--gold-soft)}
.basamak.tamam .bno{background:var(--gold);color:var(--ink)}
.basamak.aktif{color:var(--ink);border-color:var(--gold);
box-shadow:0 0 0 2px var(--gold-soft) inset}
.basamak.aktif .bno{background:var(--gold-deep);color:var(--gold-yzi)}
.basamak.engel{color:var(--ink);border-color:var(--red);
box-shadow:0 0 0 2px rgba(192,57,43,.14) inset}
.basamak.engel .bno{background:var(--red);color:var(--red-yzi)}
.basamak.engel .bnot{color:var(--red);font-weight:600}
.basamak.atlandi{opacity:.6;border-style:dashed}
.basamak.atlandi .bnot{font-style:italic}
/* Basamak artık DÜĞMEDİR — tarayıcının kendi düğme görünümü sıfırlanır. */
.basamak-serit .basamak{font-family:inherit;text-align:left;cursor:default}
.basamak.tiklanir{cursor:pointer}
.basamak.tiklanir:hover{border-color:var(--gold);
box-shadow:0 2px 8px rgba(0,0,0,.10)}
.basamak.bulunamadi{border-color:var(--red);animation:basamakSalla .35s}
@keyframes basamakSalla{0%,100%{transform:translateX(0)}
25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
/* Gidilen kart bir an vurgulanır: sekme değişip sayfa kaydığında
kullanıcı hangi kartın aradığı olduğunu kaçırıyor. */
.kart-vurgu{outline:2px solid var(--gold);outline-offset:3px;
transition:outline-color .5s}
.basamak-not{font:400 12px var(--sans);color:var(--muted);
margin:0 0 10px;padding-left:2px;max-width:70ch}
.pipeline{display:flex;gap:0;align-items:center;flex-wrap:wrap;margin:4px 0 8px}
.pipeline .step{padding:7px 15px;font-size:12px;font-weight:600;color:var(--faint);
border:1px solid var(--line);background:var(--surface);position:relative}
.pipeline .step:first-child{border-radius:999px 0 0 999px;padding-left:18px}
.pipeline .step:last-child{border-radius:0 999px 999px 0;padding-right:18px}
.pipeline .step.done{background:var(--gold-tint);color:var(--gold-deep);border-color:var(--gold-line)}
.pipeline .step.active{background:var(--gold);color:var(--gold-yzi);border-color:var(--gold)}
.pipeline .arrow{display:none}
/* ---------------- Grafik ---------------- */
.chart-bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:10px}
.chart-bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.chart-bars .bar{width:100%;max-width:38px;background:linear-gradient(180deg,var(--gold),var(--gold-deep));
border-radius:5px 5px 2px 2px;min-height:3px;transition:.2s;position:relative}
.chart-bars .bar:hover{filter:brightness(1.08)}
.chart-bars .bar .tip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;
background:var(--ink-yzey);color:var(--ink-yzi);padding:3px 8px;border-radius:6px;font-size:11px;white-space:nowrap;
opacity:0;pointer-events:none;transition:.15s}
.chart-bars .bar:hover .tip{opacity:1}
.chart-bars .xlab{font-size:11px;color:var(--muted);font-weight:600}
.aging-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.aging-row .k{width:110px;font-size:12.5px;color:var(--muted);font-weight:600}
.aging-row .track{flex:1;height:22px;background:var(--line-2);border-radius:6px;overflow:hidden}
.aging-row .fill{height:100%;border-radius:6px}
.aging-row .v{width:120px;text-align:right;font-family:var(--serif);font-weight:600}
/* ═══ KILICLAR KURUMSAL LOGOSU — CEKIRDEK (22.08) ════════════════════
Isa: "sol ustte TAMAMI olmali logonun, ARKA PLAN OLMAMALI mavi. onun
yerine IVECO Kiliclarin arka planini gece ve gunduz moduna gore
degistir -- IKI ARKA PLAN KARISIKLIK YARATIR."
Logo tema basina ayri renklerde uretildi (bkz. templates/_kiliclogo.html);
burada yalnizca hangisinin gorunecegi secilir. `background-image`
yerine iki ![]()
+ display kullaniliyor cunku CSS'ten cagrilan bir
PNG'ye varlik surumu (?v=) basilamaz ve logo degisse bile kullanicida
eskisi kalirdi.
⚠ BU KURALLAR style.css'TE DURMAK ZORUNDA: giris ekrani kabuk.css'i
yuklemiyor. Orada dururken gece ve gunduz logosu ALT ALTA ciziliyordu. */
.kilic-logo{display:block;width:100%;line-height:0}
.kilic-logo img{display:none;width:100%;height:auto}
.kilic-logo .gece{display:block}
:root[data-tema="acik"] .kilic-logo .gece{display:none}
:root[data-tema="acik"] .kilic-logo .gunduz{display:block}
/* ACIK YUZEY USTUNDE OZGUN RENKLER: telefonda giris formu gunduz
modunda beyaza yakindir; ters cevrilmis logo orada kaybolurdu. */
/* GIRIS PANELI SURUMU (22.08, 2. tur): bant murekkebi altin+zincifre
oldu ama giris panelinde okunmuyor (olculdu: 3.68 / 3.24). Panel iki
modda da koyudur, o yuzden TEK surum yeter ve tema kuralini ezer. */
.kilic-logo.girisli .gece,
.kilic-logo.girisli .gunduz{display:none !important}
.kilic-logo.girisli .girispanel{display:block}
:root[data-tema="acik"] .kilic-logo.girisli .girispanel{display:block}
.kilic-logo.kagit .ozgun{display:none}
:root[data-tema="acik"] .kilic-logo.kagit .gunduz{display:none}
:root[data-tema="acik"] .kilic-logo.kagit .ozgun{display:block}
/* ---------------- Giriş ---------------- */
.login-wrap{min-height:100vh;display:flex;align-items:stretch}
/* GIRIS PANELI IKI MODDA DA KOYUDUR ve bu bir unutkanlik degil karar:
burasi bir MARKA yuzeyi, bir calisma yuzeyi degil. Renkleri --giris-*
ailesinden gelir (tema_paleti.py), --ink'ten DEGIL: --ink koyu modda
dugme yuzeyi olmak icin acildi; buraya konsaydi giris ekrani soluk
mavi bir duvar olurdu. */
/* 22.08: iki radyal isik altin + LAPIS oldu. Ikisi de altin oldugunda
panelin ustu sarimsi bir sise donuyordu; lapis'i karsi koseye koymak
lacivertin derinligini artiriyor ve paletin dort renginden ikisini
ayni yuzeyde konusturuyor. Gradyanin iki ucu da artik lacivert. */
/* 22.08 (5) - ISA: "girise novusun iveco kiliclar SOLA YAPISIK, onu
ORTAYA al... bir de TAM ORTADA olsun yukari asagi sag sol anlaminda."
Iki eksen ayri kurallardi ve yalniz biri vardi: dikey ortalama
`justify-content:center` ile zaten yapiliyordu, yatayda ise
`align-items` varsayilan `stretch` idi ve icerideki `.kilit`
`align-items:flex-start` diyordu -- yani logo panelin SOL kenarina
yapisikti. Uc satir birlikte degisir; biri birakilirsa blok yine
kayar. */
.login-art{flex:1;background:var(--giris-bg);color:var(--giris-yzi);
display:flex;flex-direction:column;justify-content:center;
align-items:center;text-align:center;
padding:60px;position:relative;overflow:hidden;
background-image:radial-gradient(circle at 20% 14%,rgba(var(--gold-rgb),.16),transparent 46%),
radial-gradient(circle at 86% 92%,rgba(var(--lapis-rgb),.20),transparent 44%),
linear-gradient(152deg,var(--giris-bg),var(--giris-bg-2))}
/* ── 22.08 (2. tur) · ARKA PLAN FOTOGRAFI ─────────────────────────────
Isa: "arka plana bir fotograf ekle, TIR OLMASIN... Novus'un
mentaline, adina uygun olsun."
Yildizli gok: ekranda zaten yazan "asagida olan, yukarida olan
gibidir" cumlesinin gosterdigi sey. Kaynak ve lisans:
static/GORSEL-LISANS.txt · ureten: giris_zemin_uret.py
⚠ FOTOGRAF EN ALTTA, DUZ RENK ONUN ALTINDA.
`background-color` duruyor: fotograf yuklenene kadar (ya da hic
yuklenmezse) panel yine lacivert. Fotografin gecikmesi, ekranin
beyaz yanip sonra kararmasi demek olmamali.
⚠ PERDE BURADA DEGIL, DOSYANIN ICINDE. CSS'te yari saydam bir
perde kullansaydik, altindaki en parlak bolge yazinin gercek
kontrastini belirlerdi ve kimse olcmezdi. Fotograf, temayla
sozlesilen tavani (tema_paleti.GIRIS_FOTO_TAVAN) hicbir yerinde
gecmeyecek sekilde URETILIYOR; giris yazilarinin renkleri de o
tavana gore olculuyor. Denetim: python giris_zemin_uret.py --olc
`fixed` DEGIL `cover`: sabit eklenti mobil tarayicilarda titriyor
ve klavye acilinca zipliyor. */
.login-art{background-repeat:no-repeat;background-position:center center;
background-size:auto,auto,cover}
/* ⚠ FOTOGRAFIN USTUNDE EK BIR PERDE KATMANI YOK -- ilk yazimda
`linear-gradient(rgba(navy,.34), rgba(navy,.58))` vardi ve SILINDI.
Sebep: perdenin dosyada oldugunu soyleyip bir de CSS'te perde
koymak, olculen sayiyi ekranda gecersiz kilar. Karartma iyi yonde
bile olsa, "olculen sey ile gorunen sey ayni degil" demektir.
Kalan iki radyal isik olculere dahil: ikisi de saydamin uzerine
ALTIN ve LAPIS ekliyor, yani zemini acmiyor, tonluyor. */
.login-art.fotolu{background-image:
radial-gradient(circle at 20% 14%,rgba(var(--gold-rgb),.16),transparent 46%),
radial-gradient(circle at 86% 92%,rgba(var(--lapis-rgb),.20),transparent 44%),
var(--giris-foto)}
/* MARKA KILIDI: isaret ve ad YAN YANA, alt alta degil. Eski dizilim
(isaret ustte, ad altta) 52px basligi panelin ortasindan asagi
itiyordu ve ust yari bos kaliyordu -- Isa'nin "begenmedim" dedigi
bosluk buydu. */
/* 22.08 (2): cizilmis amblem kaldirildi, gercek IVECO KILICLAR logosu
kendi beyaz plakasinda duruyor. Gerekce kabuk.css'te yazili -- logo
dogrudan lacivertte okunmuyordu. */
/* PLAKA KALDIRILDI (Isa: "arka plan olmamali, iki arka plan karisiklik
yaratir"). Logo panelin laciverti uzerinde, ters cevrilmis renklerle. */
/* ═══ ÜST ŞERİT — MARKANIN ZEMİNİ (23.08) ════════════════════════
⚠ FOTOĞRAFI KARARTMAK YERİNE YAZIYA ZEMİN VERMEK.
Yapay zekâ kareleri kadrajın her yerinde parlak; boru hattı perdeyi
bütün kareye uygulayınca gerekli alfa 0.66'ya çıkıyor ve görsel
lacivert bir yüzeye dönüşüyordu (Tamga'nın altın çatlağı söndü —
gözle görüldü). Marka yalnız ÜST ŞERİTTE duruyor; zemini de orada
olmalı, kadrajın tamamında değil.
⚠ İKİ SAYI `giris_zemin_uret.py` İLE ORTAK: SERIT_YUKSEKLIK 0.30 ve
SERIT_ALFA 0.86. Boru hattı ölçümü bu şeridi UYGULAYARAK yapıyor,
yani ölçülen şey kullanıcının gerçekten gördüğü şey. Biri
değişecekse İKİSİ BİRDEN değişir. */
.login-art.fotolu::after{content:"";position:absolute;left:0;right:0;
top:0;height:30%;pointer-events:none;z-index:1;
background:linear-gradient(to bottom,
rgba(39,56,104,.86) 0%,
rgba(39,56,104,.55) 38%,
rgba(39,56,104,.20) 70%,
rgba(39,56,104,0) 100%)}
/* ═══ ALINTI ORTADAN ALINDI (23.08 · 4. tur) ══════════════════════
İsa: *"ortadaki yazı doğru değil, onu başka bir yere iliştir,
ortada öyle olmaz."* Doğru teşhis, iki sebeple:
1) Kadrajın ortası her fotoğrafın en kalabalık yeridir; alıntı
oraya oturunca hem yazı hem fotoğraf zarar görüyordu.
2) Ölçümdeki asıl yükü o taşıyordu — ORTAYI okunur tutmak için
bütün fotoğraf karartılıyordu (IVECO filosu perde 0.735).
Alıntı artık SOL ALTTA, tek satırlık bir künye gibi. Ortası boş
kalan kadraj fotoğrafın kendisine bırakıldı.
⚠ Zemini de onunla birlikte taşındı: ortadaki elips SİLİNDİ,
yerine ALT ŞERİT geldi. İki sayı `giris_zemin_uret.py` ile ortak
(ALT_SERIT_YUKSEKLIK 0.26 · ALT_SERIT_ALFA 0.82); ölçüm bu şeridi
uygulayarak yapılıyor — yani ölçülen şey görülen şey. */
.login-art.fotolu::before{content:"";position:absolute;left:0;right:0;
bottom:0;height:26%;pointer-events:none;z-index:1;
background:linear-gradient(to top,
rgba(39,56,104,.82) 0%,
rgba(39,56,104,.50) 34%,
rgba(39,56,104,.19) 66%,
rgba(39,56,104,0) 100%)}
/* ═══ ALINTI GÖMÜLDÜ (23.08 · 5. tur) ════════════════════════════
İsa: *"ortadaki Quod ile başlayan yazıyı çok farklı bir şekilde GÖM —
hem görünsün hem görünmesin."*
Cevap: yazıyı KÜÇÜLTMEK değil, YÜZEYE KAZIMAK. Harfler büyük ve
aralıklı ama mürekkep neredeyse yok (%10 beyaz); altına koyu, üstüne
çok hafif açık gölge biniyor — göz onu bir yazı gibi değil, zemine
basılmış bir iz gibi görüyor. Uzaktan bakan fark etmez, bakan okur.
⚠ ÇEVİRİ SAKLI DURUYOR. Latince satır kazınmış hâlde; Türkçe
karşılığı ancak üstüne gelindiğinde (ya da klavyeyle odaklanınca)
beliriyor. `title` özniteliği de var: fare tutulunca tarayıcının
kendi balonu okur, ekran okuyucu da görür.
⚠ ÖLÇÜM DEĞİŞMEDİ. Kutu hâlâ sol altta (YAZI_KUTUSU) ve alt şerit
duruyor: kazınmış hâl zaten okunmuyor, ama ÜSTÜNE GELİNDİĞİNDEKİ
hâl okunur olmalı — ölçü onu koruyor. */
.login-art .maxim{position:absolute;left:44px;bottom:52px;z-index:2;
max-width:min(780px,66%);text-align:left;outline:none}
.login-art .maxim .lat{display:block;font-family:var(--serif);
font-size:21px;line-height:1.3;letter-spacing:.32em;text-transform:uppercase;
color:rgba(255,255,255,.10);
text-shadow:0 1px 0 rgba(0,0,0,.50), 0 -1px 0 rgba(255,255,255,.05);
transition:color .5s ease,text-shadow .5s ease}
.login-art .maxim .cev{display:block;margin-top:9px;max-width:56ch;
font-size:12.5px;line-height:1.5;letter-spacing:.2px;
color:rgba(255,255,255,0);transition:color .5s ease}
.login-art .maxim:hover .lat,.login-art .maxim:focus-visible .lat{
color:rgba(255,255,255,.46);text-shadow:0 1px 2px rgba(0,0,0,.55)}
.login-art .maxim:hover .cev,.login-art .maxim:focus-visible .cev{
color:var(--giris-soluk)}
@media (max-width:1100px){
.login-art .maxim{left:30px;bottom:46px;max-width:80%}
.login-art .maxim .lat{font-size:16px;letter-spacing:.24em}
}
/* Marka ve düğme şeridin ÜSTÜNDE kalmalı (şerit z-index:1). */
.login-art .marka-kose,.login-art .zemin-dugme{z-index:2}
/* ═══ GİRİŞ MARKALARI KÖŞEDE (23.08) ══════════════════════════════
Sol üst: IVECO KILIÇLAR · Sağ üst: NOVUS SIGMA / Alkahest.
İsa: "fotoğraflar eklendikçe bir sorun yaşamasın."
⚠ ÖLÇÜLER "KIYITIK OLMASIN" ŞARTINA GÖRE SEÇİLDİ:
kenardan 44px içeride, logo 300px genişlikte (ortadayken 340px'ti —
yalnız 40px küçüldü, köşeye sıkıştırılmadı). Sağdaki künye sağa
yaslı ve iki satır; ikisi de kendi boşluğunda duruyor.
⚠ Panel `position:relative` (yukarıda tanımlı); köşeler ona göre. */
.login-art .marka-kose{position:absolute;top:44px;z-index:2;
display:flex;align-items:flex-start;gap:12px}
.login-art .marka-kose.sol{left:44px}
.login-art .marka-kose.sag{right:44px;align-items:center;
text-align:right;flex-direction:row-reverse}
/* ⚠ 23.08 (4. tur) · LOGO KÜÇÜLTÜLDÜ 300 → 190px.
İsa: *"kocaman soldaki IVECO Kılıçlar olmamalı — ya küçült ya da
daha farklı bir şey bul."* Küçültüldü: marka köşede bir İMZA gibi
duruyor, afiş gibi değil. Ölçüm kutusu da küçüldü
(giris_zemin_uret.LOGO_KUTUSU) — ikisi birlikte değişir. */
.login-art .marka-kose.sol .kilic-logo{width:190px;max-width:26vw}
/* ⚠ İKİ SATIR SIĞMIYORDU: kutu 163px kalıyor, yazı 72px'e sıkışıp
kelime kelime alt alta düşüyordu ("NOVUS / SIGMA ile / çalışır…").
Künye SATIR KIRMAZ; genişliği yazının kendisi belirler. */
.login-art .marka-kose.sag .yzi{font-size:11.5px;line-height:1.5;
color:var(--giris-soluk);letter-spacing:.3px;white-space:nowrap}
.login-art .marka-kose.sag .yzi b{color:var(--giris-altin);
letter-spacing:1.2px;font-weight:600}
/* ⚠ MÜHÜR GÖRÜNMÜYORDU: eski `.kunye .mark` kuralı ölçüyü veriyordu,
künye köşeye taşınınca o seçici tutmaz oldu ve SVG 0×0 çizildi
(ekranda yalnız yazı kaldı — gözle görüldü, ölçüldü). Ölçü artık
yeni seçicide. */
.login-art .marka-kose.sag .mark{width:34px;height:34px;flex:none;
margin:0;opacity:.9}
@media(max-width:1200px){
.login-art .marka-kose{top:30px}
.login-art .marka-kose.sol{left:30px}
.login-art .marka-kose.sag{right:30px}
.login-art .marka-kose.sol .kilic-logo{width:150px}
.zemin-dugme{left:30px;bottom:20px}
}
/* ═══ ARKA PLAN SEÇİCİ (23.08) ═══════════════════════════════════
Sol ÜSTTE, İsa'nın istediği yer. Ölçülü küçük: giriş ekranının işi
markayı ve oturum açmayı göstermek; arka plan seçmek bir KOLAYLIKTIR
ve o kadar yer kaplamalı.
⚠ Düğme fotoğrafın üstünde durur, yani zemini bilinmez. Bu yüzden
kendi koyu camını taşıyor (`backdrop-filter` desteklenmese bile
arkasındaki yarı saydam siyah yeterli) ve yazısı krem.
`hidden` iken çizilmez: betik çalışmazsa ölü bir düğme kalmaz. */
.zemin-dugme{position:absolute;left:20px;top:18px;z-index:3;
display:inline-flex;align-items:center;gap:8px;cursor:pointer;
padding:7px 13px 7px 11px;border-radius:999px;
border:1px solid rgba(230,224,208,.22);
background:rgba(8,12,22,.42);-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
color:#E6E0D0;font:600 12px var(--sans);letter-spacing:.2px;
transition:background .16s ease,border-color .16s ease}
.zemin-dugme:hover{background:rgba(8,12,22,.62);
border-color:rgba(230,224,208,.40)}
.zemin-dugme:focus-visible{outline:2px solid #A7D4E4;outline-offset:2px}
.zemin-dugme[hidden]{display:none}
/* ⚠ 23.08 (2. tur) — DÜĞME SOL ALTA İNDİ.
Sol üst artık markanın yeri. Düğme orada kalınca ikisi üst üste
bindi ve logo bir düğmenin arkasında kaldı (gözle görüldü).
⛔ İLK DENEME BOZUKTU: `top:auto;bottom:26px` yukarıdaki bloğun
ÖNÜNE yazılmıştı, sonraki `top:18px` onu ezdi ve düğme HEM üstten
HEM alttan bağlanıp 901px boyunda dikey bir şerite dönüştü.
Aynı seçiciyi iki kez yazarken SIRA belirleyicidir; bu kural
bilerek en sonda ve `.login-art` ile daha özgül. */
/* ⚠ 23.08 (4. tur) · DÜĞME SAĞ ALTA. Alıntı sol alta taşınınca
ikisi aynı köşede çakışıyordu. Ölçüm kutusu da taşındı
(giris_zemin_uret.KUNYE_KUTUSU). */
.login-art .zemin-dugme{top:auto;bottom:26px;left:auto;right:44px}
@media(max-width:1200px){.login-art .zemin-dugme{left:30px;bottom:20px}}
.zemin-dugme .ad{max-width:22ch;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
/* Dar ekranda sol yarı zaten gizleniyor; yine de ad kalkar, simge kalır. */
@media(max-width:900px){.zemin-dugme .ad{display:none}
.zemin-dugme{padding:8px;left:14px;top:14px}}
.login-art .kilit{display:flex;flex-direction:column;align-items:center;gap:16px}
.login-art .kilit .kilic-logo{width:340px;max-width:100%}
.login-art .tag{color:var(--giris-vurgu);letter-spacing:4px;text-transform:uppercase;font-size:11px}
/* ⚠ 23.08 (4. tur) · ESKI ORTA BLOK KURALI SADELESTIRILDI.
Bu kural alintiyi ORTAYA yaslıyordu: 19px serif, ustunde zincifre
cizgi, `margin:auto`. Alinti sol alta tasininca ikisi de yanlis
oldu -- cizgi kadrajin ortasinda asili kaliyordu, `auto` ise mutlak
konumu bozuyordu. Serif ailesi ve zincifre cizgi KALDI ama cizgi
artik yalniz Latince satirin USTUNDE, kisa bir imza cizgisi. */
/* İmza çizgisi de kazındı: alıntı artık zeminin bir parçası, ayrı bir
blok değil. Çizgi yalnız üstüne gelindiğinde beliriyor. */
.login-art .maxim .lat::before{content:"";display:block;width:38px;height:1px;
background:rgba(255,255,255,.10);margin:0 0 12px;transition:background .5s ease}
.login-art .maxim:hover .lat::before,
.login-art .maxim:focus-visible .lat::before{background:var(--giris-cizgi)}
/* KUNYE -- "mutlaka novustan bahset". Panelin sol alt kosesinde,
Novus muhruyle. Mutlak konumlandirilmis cunku dikey ortalanan
icerigin akisina girerse marka kilidini asagi iter. */
.login-art .kunye{position:absolute;left:0;right:0;bottom:36px;display:flex;
align-items:center;justify-content:center;gap:13px}
.login-art .kunye .mark{width:34px;height:34px;flex:none;margin:0;opacity:.9}
.login-art .kunye .ayrac{width:1px;height:34px;background:var(--giris-cizgi);opacity:.5}
.login-art .kunye .yzi{font-size:10.5px;line-height:1.7;letter-spacing:.16em;
text-transform:uppercase;color:var(--giris-soluk)}
.login-art .kunye .yzi b{color:var(--giris-altin);font-weight:600}
.login-art .ring{position:absolute;right:-150px;bottom:-150px;width:460px;height:460px;border-radius:50%;
border:1px solid rgba(var(--gold-rgb),.20)}
.login-art .ring::after{content:"";position:absolute;inset:46px;border-radius:50%;border:1px solid rgba(var(--lapis-rgb),.18)}
/* 700px altinda kunye maximin altina girip tasiyordu; panel zaten
820px'te gizleniyor ama arada kalan bantta cakisma vardi. */
@media(max-height:620px){.login-art .kunye{display:none}}
/* TELEFON MARKA KILIDI -- yalniz sol panel gizlendiginde gorunur. */
.login-form .mobil-marka{display:none;flex-direction:column;align-items:flex-start;
gap:9px;margin-bottom:26px}
.login-form .mobil-marka .kilic-logo{width:190px;max-width:70%}
.login-form .mobil-marka .urun{font-family:var(--sans);font-size:9px;font-weight:600;
letter-spacing:.2em;text-transform:uppercase;color:var(--lapis)}
.login-form{width:440px;display:flex;flex-direction:column;justify-content:center;padding:60px 54px;background:var(--surface)}
.login-form h2{font-size:26px;color:var(--ink)}
.login-form .sub{color:var(--muted);font-size:13.5px;margin:4px 0 26px}
.hint{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);
padding:12px;font-size:12px;color:var(--muted);margin-top:20px;line-height:1.7}
.hint b{color:var(--ink)}
@media(max-width:820px){
.login-art{display:none}
.login-form{width:100%}
.login-form .mobil-marka{display:flex}
}
/* ================================================================
ANA GİRİŞ · B2B MARKA ZEMİNİ
----------------------------------------------------------------
İsa: *"arka planı b2b'den gelecek"* · *"b2b arka planını koymayı
unutma ANA GİRİŞE"*.
NE GELDİ: B2B portalının zemini bir fotoğraf değil, `zemin_uret.py`
tarafından `static/marka/logolar/` klasöründeki BÜTÜN logolardan
üretilen mozaik desendir (`marka/zemin-desen.svg`). Portalda
`.b2b-login > .form::before` ile form sütununa serilir; burada da
aynı yere — ana girişin form sütununa — serilir. "Aynı arka plan"
denince kastedilen budur ve iki ekran artık aynı zemini paylaşır.
⚠ NEDEN ŞİMDİYE KADAR GELMEDİ: desen değişkeni yalnız `portal.css`
içinde tanımlıydı ve ana giriş o dosyayı YÜKLEMEZ (fonts + style +
palet + tema). Yani eksik olan şey görsel karar değil, dosyaydı;
değişken bu yüzden burada YENİDEN tanımlanır — portal.css'e bağımlılık
kurulsaydı ana giriş, ilgisiz bir modülün stil dosyasına muhtaç olurdu.
⚠ NEDEN FORM SÜTUNU, SOL GÖRSEL DEĞİL: soldaki sütunda zaten
fotoğraf var (`.login-art.fotolu`). Desen oraya da konsaydı iki arka
plan üst üste binerdi — portalda 23.08'de yaşanan ve "iki arka plan
karışıklık yaratır" diye kayda geçen hatanın aynısı.
B2B'nin üç güvenlik kuralı burada da geçerlidir, gevşetilmez:
1. Opaklık %8'i geçmez — desen hissedilir, okunmaz.
2. Desen içeriğin ALTINDA durur; alanlar ve düğmeler üstünde.
3. `background-attachment:fixed` YOK (iOS Safari kaydırmayı takar).
TEMAYA GÖRE: logolar BEYAZ çizilmiştir. Gece temasında (varsayılan)
oldukları gibi doğrudur; gündüz temasında açık zeminde görünmezlerdi,
bu yüzden `grayscale(1) invert(1)` ile koyulaştırılır — portal.css
açık yüzeyde tam olarak bunu yapar.
================================================================ */
:root{
--giris-zemin-desen:url('marka/zemin-desen.svg');
--giris-zemin-adim:900px;
--giris-zemin-opak:.055; /* koyu yüzey — beyaz logo */
}
:root[data-tema="acik"]{
--giris-zemin-opak:.08; /* açık yüzeyde %5,5 seçilmiyordu */
}
/* ⚠ DÖŞEME ADIMI KAPSAYICIYA GÖRE, EKRANA GÖRE DEĞİL. Form sütunu
440px genişliğindedir; desen 900px adımla döşenince sütuna deseninin
yalnız BOŞ KENARI düşer ve ekranda seyrek, asimetrik birkaç işaret
görünür — "arka plan konmuş ama tutmamış" hâli. Portal.css'te aynı
hata 19.08'de ölçülüp yazılmıştı; ana giriş de aynı kuralı izler.
420px, 440px'lik sütuna tam oturan en büyük adımdır. */
.login-form{position:relative;isolation:isolate;--giris-zemin-adim:420px}
.login-form::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:var(--giris-zemin-desen);
background-repeat:repeat;
background-size:var(--giris-zemin-adim) var(--giris-zemin-adim);
background-position:center top;
background-attachment:scroll;
opacity:var(--giris-zemin-opak);
}
:root[data-tema="acik"] .login-form::before{filter:grayscale(1) invert(1)}
/* İçerik desenin ÜSTÜNDE kalır. Bu satır olmazsa desen form
alanlarının üzerine biner — kaçınılan şeyin ta kendisi. */
.login-form > *{position:relative;z-index:1}
/* ================================================================
DİNAMİK KATMAN — zarif hareket (sade dili bozmadan)
Sürekli animasyonlar prefers-reduced-motion ile devre dışı kalır.
================================================================ */
/* Kullanıcı etkileşimli geçişler (her zaman açık) */
.card{transition:box-shadow .2s ease, border-color .2s ease}
.card:hover{box-shadow:var(--sh-lift)}
.stat{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.stat:hover{transform:translateY(-3px);box-shadow:var(--sh-lift);border-color:var(--gold-line)}
tbody tr{transition:background .13s ease}
.nav a{transition:background .15s ease, border-color .15s ease, padding-left .15s ease}
.btn{transition:transform .12s ease, background .15s ease, box-shadow .15s ease, color .15s}
.btn:active{transform:translateY(1px)}
.badge{transition:transform .12s ease}
.mark .diamond{transform-box:fill-box;transform-origin:center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.brand .mark{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.brand:hover .mark{transform:scale(1.06)}
.brand:hover .mark .diamond{transform:rotate(90deg)}
@media (prefers-reduced-motion: no-preference){
.content{animation:novFadeUp .45s ease both}
@keyframes novFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.flash{animation:novFadeUp .3s ease both}
.nav a:hover{padding-left:26px}
.chart-bars .bar{animation:novGrow .8s cubic-bezier(.2,.75,.25,1) both;transform-origin:bottom}
@keyframes novGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.aging-row .fill{animation:novWipe .9s cubic-bezier(.2,.75,.25,1) both;transform-origin:left}
@keyframes novWipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Logo: monad noktasında nazik nabız (tonlar korunur) */
.mark .monad{animation:novPulse 3.6s ease-in-out infinite}
@keyframes novPulse{0%,100%{opacity:.85}50%{opacity:.35}}
.login-art .mark{animation:novFadeUp .7s ease both}
}
.muted{color:var(--muted)}.faint{color:var(--faint)}.right{text-align:right}.mt{margin-top:20px}
.section-title{font-family:var(--serif);font-size:19px;font-weight:600;margin:26px 0 12px;color:var(--ink)}
.empty{text-align:center;padding:46px;color:var(--faint)}
.kv{display:grid;grid-template-columns:130px 1fr;gap:9px 16px;font-size:13.5px}
.kv dt{color:var(--muted);font-weight:600}
.kv dd{color:var(--ink)}
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
/* İzleme & Güvenlik */
.meter{display:inline-block;width:96px;height:7px;background:var(--line-2);border-radius:4px;
overflow:hidden;vertical-align:middle;margin-right:9px}
.meter i{display:block;height:100%;border-radius:4px;background:var(--gold)}
.meter.warn i{background:var(--amber)} .meter.crit i{background:var(--red)}
.badge.online{background:var(--green-tint);color:var(--green-deep)}
.badge.warning{background:var(--amber-tint);color:var(--amber-deep)}
.badge.offline{background:var(--red-tint);color:var(--red-deep)}
.badge.hareket{background:var(--blue-tint);color:var(--blue-deep)}
.badge.erisim{background:var(--gold-tint);color:var(--gold-deep)}
.badge.alarm{background:var(--red-tint);color:var(--red)}
.badge.normal{background:var(--green-tint);color:var(--green)}
.badge.kayitli{background:var(--green-tint);color:var(--green)}
.badge.kritik{background:var(--red-tint);color:var(--red)}
.dot-live{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot-live.online{background:var(--green)} .dot-live.warning{background:var(--amber)} .dot-live.offline{background:var(--red)}
/* ================================================================
SAYFALAMA — hiçbir liste tabloyu komple basmaz
================================================================ */
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;
flex-wrap:wrap;margin-top:16px;padding:12px 4px}
.pager-info{font-size:12.5px;color:var(--muted)}
.pager-info b{color:var(--ink);font-family:var(--serif);font-size:15px}
.pager-links{display:flex;gap:5px;flex-wrap:wrap}
.pg{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:32px;
padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);
color:var(--ink);font-size:12.5px;font-weight:600;text-decoration:none;
transition:background .15s ease,border-color .15s ease,color .15s ease}
.pg:hover{background:var(--surface-2);border-color:var(--gold-line);color:var(--gold-deep)}
.pg.on{background:var(--ink-yzey);border-color:var(--ink-yzey);color:var(--ink-yzi)}
.pg.off{opacity:.38;pointer-events:none}
.pg.gap{border:none;background:none;pointer-events:none;color:var(--faint)}
/* ================================================================
SATIŞ HATTI KANBAN (pipeline board)
Yatay kaydırmalı sütunlar; her sütun bir aşama.
================================================================ */
.kanban{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 16px;align-items:flex-start}
.kanban::-webkit-scrollbar{height:8px}
.kanban::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.kcol{flex:0 0 268px;background:var(--surface-2);border:1px solid var(--line);
border-radius:var(--r);display:flex;flex-direction:column;max-height:70vh}
.kcol .khd{padding:12px 14px;border-bottom:1px solid var(--line-2);position:sticky;top:0;
background:var(--surface-2);border-radius:var(--r) var(--r) 0 0;z-index:1}
.kcol .khd .kname{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:8px}
.kcol .khd .kprob{font-size:10px;font-weight:600;color:var(--gold-deep);
background:var(--gold-tint);border-radius:999px;padding:2px 8px}
.kcol .khd .ksum{margin-top:6px;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink)}
.kcol .khd .kcnt{font-size:11.5px;color:var(--muted);margin-top:2px}
.kcol .kbody{padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:9px}
.kcol .kbody::-webkit-scrollbar{width:6px}
.kcol .kbody::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
padding:11px 12px;box-shadow:var(--sh);transition:box-shadow .18s ease,border-color .18s ease,transform .12s ease}
.kcard:hover{box-shadow:var(--sh-lift);border-color:var(--gold-line);transform:translateY(-2px)}
.kcard .ktitle{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35;
display:block;text-decoration:none}
.kcard .ktitle:hover{color:var(--gold-deep)}
.kcard .kmeta{margin-top:6px;font-size:11.5px;color:var(--muted);display:flex;
justify-content:space-between;align-items:center;gap:8px}
.kcard .kamount{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--ink);margin-top:5px}
.kcard .kfoot{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-2);
display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.kcard.stale{border-left:3px solid var(--amber)}
.kmore{text-align:center;font-size:11.5px;color:var(--muted);padding:6px}
.kmove{font-size:11px;padding:3px 8px;border-radius:6px;border:1px solid var(--line);
background:var(--surface);color:var(--muted);cursor:pointer;font-weight:600}
.kmove:hover{border-color:var(--gold-line);color:var(--gold-deep);background:var(--gold-tint)}
/* Aşama rozetleri (fırsat durumu) */
.badge.nitelendirme{background:var(--line-2);color:var(--muted)}
.badge.ihtiyac_analizi{background:var(--blue-tint);color:var(--blue)}
.badge.teklif{background:var(--amber-tint);color:var(--amber)}
.badge.pazarlik{background:var(--gold-tint);color:var(--gold-deep)}
.badge.kazanildi{background:var(--green-tint);color:var(--green)}
.badge.kaybedildi{background:var(--red-tint);color:var(--red)}
/* Aday durumları */
.badge.yeni{background:var(--blue-tint);color:var(--blue)}
.badge.temas_kuruldu{background:var(--amber-tint);color:var(--amber)}
.badge.nitelikli{background:var(--gold-tint);color:var(--gold-deep)}
.badge.donusturuldu{background:var(--green-tint);color:var(--green)}
.badge.elendi{background:var(--line-2);color:var(--muted)}
/* ================================================================
ZAMAN ÇİZELGESİ (cari 360° aktivite akışı)
================================================================ */
.timeline{position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:var(--line)}
.tl-item{position:relative;padding:0 0 16px 4px}
.tl-item::before{content:"";position:absolute;left:-19px;top:5px;width:9px;height:9px;
border-radius:50%;background:var(--surface);border:2px solid var(--gold-line)}
.tl-item.done::before{background:var(--green);border-color:var(--green)}
.tl-item.late::before{background:var(--red);border-color:var(--red)}
.tl-item .tl-hd{font-size:13px;font-weight:600;color:var(--ink)}
.tl-item .tl-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.tl-item .tl-body{font-size:12.5px;color:var(--text);margin-top:4px;line-height:1.5}
/* Filtre şeridi (liste ekranlarında arama + durum süzgeci) */
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.filters input,.filters select{width:auto;min-width:170px}
/* ONAY KUTUSU KURALIN DISINDA (22.08, tarayicida yakalandi).
Ustteki min-width:170px metin kutulari icin yazilmisti; ekstreye
"Depo transferlerini gizle" onay kutusu eklenince o kural checkbox'a
da uygulandi ve kutu 170px genisliginde bir seride donusup kendi
etiketinden 80px uzaga dustu. Ekranda "bos bir kare ve alakasiz bir
yazi" gibi duruyordu. */
.filters input[type=checkbox]{min-width:0;width:15px;height:15px;margin:0;flex:none}
.filters label{flex:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
border:1px solid var(--line);background:var(--surface);color:var(--muted);
font-size:12px;font-weight:600;text-decoration:none;transition:all .15s ease}
.chip:hover{border-color:var(--gold-line);color:var(--gold-deep)}
.chip.on{background:var(--ink-yzey);border-color:var(--ink-yzey);color:var(--ink-yzi)}
.chip .n{opacity:.7;font-size:11px}
/* ================================================================
BİLDİRİM ZİLİ (üst çubuk)
================================================================ */
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
background:var(--surface);color:var(--muted);text-decoration:none;
transition:border-color .15s ease,color .15s ease,background .15s ease}
.bell:hover{border-color:var(--gold-line);color:var(--gold-deep);background:var(--gold-tint)}
.bell .bico{font-size:17px;line-height:1}
.bell .bdot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;
padding:0 5px;border-radius:999px;background:var(--red);color:var(--red-yzi);
font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
border:2px solid var(--surface)}
/* ================================================================
RANDEVU POP-UP — yaklaşan randevu uyarısı
Sağ altta belirir; işi engellemez ama gözden kaçmaz.
================================================================ */
/* POP-UP RAFI (09.08 · TIKANMA DÜZELTMESİ)
Randevu ve ikram pop-up'ları ikisi de "sağ alt köşe"ye sabitlenmişti.
İkisi aynı anda çıktığında üsttteki (z-index 940) alttakinin
düğmelerini KAPATIYOR ve kullanıcı beş kez tıklayıp hiçbir şey
olmadığını görüyordu — tıklama görünmeyen bir katmana gidiyordu.
Artık ikisi de aynı RAFA girer: raf bir sütundur, kutular alt alta
dizilir ve hiçbiri diğerinin üstüne binmez.
Raf kendisi tıklamayı YUTMAZ (pointer-events:none); yalnız içindeki
kutular tıklanabilir. Boş bir rafın ekranı kilitlemesi, çözdüğümüz
sorunun aynısını üretirdi. */
.pop-raf{position:fixed;right:22px;bottom:22px;z-index:900;
display:flex;flex-direction:column-reverse;gap:12px;
align-items:flex-end;pointer-events:none;max-height:calc(100vh - 44px);
overflow-y:auto}
.pop-raf > *{pointer-events:auto}
.appt-pop{position:relative;width:340px;
background:var(--surface);border:1px solid var(--gold-line);
border-radius:var(--r);box-shadow:0 18px 48px rgba(21,24,31,.22);
overflow:hidden;animation:appt-in .32s cubic-bezier(.2,.8,.2,1)}
@keyframes appt-in{from{opacity:0;transform:translateY(16px) scale(.98)}
to{opacity:1;transform:none}}
.appt-pop .ap-hd{padding:12px 16px;background:var(--ink-yzey);color:var(--ink-yzi);
display:flex;align-items:center;justify-content:space-between;gap:10px}
.appt-pop .ap-hd .ap-t{font-family:var(--serif);font-size:15px;font-weight:600;
letter-spacing:.4px;display:flex;align-items:center;gap:8px}
.appt-pop .ap-hd .ap-t .dot{width:8px;height:8px;border-radius:50%;
background:var(--gold);animation:ap-pulse 1.6s ease-in-out infinite}
@keyframes ap-pulse{0%,100%{opacity:1}50%{opacity:.25}}
.appt-pop .ap-x{background:none;border:none;color:var(--ink-soluk-yzi);font-size:19px;
cursor:pointer;line-height:1;padding:0 2px}
.appt-pop .ap-x:hover{color:var(--ink-yzi)}
.appt-pop .ap-bd{padding:14px 16px}
.appt-pop .ap-when{font-family:var(--serif);font-size:26px;font-weight:600;
color:var(--ink);line-height:1}
.appt-pop .ap-left{font-size:12px;font-weight:700;color:var(--gold-deep);
text-transform:uppercase;letter-spacing:1.2px;margin-top:4px}
.appt-pop .ap-who{margin-top:10px;font-size:14px;font-weight:600;color:var(--ink)}
.appt-pop .ap-meta{margin-top:4px;font-size:12.5px;color:var(--muted);line-height:1.5}
.appt-pop .ap-ft{padding:12px 16px;border-top:1px solid var(--line-2);
display:flex;gap:8px;background:var(--surface-2)}
.appt-pop .ap-more{padding:6px 16px 12px;font-size:11.5px;color:var(--muted)}
/* ================================================================
İKRAM POP-UP — misafir karşılama sorusu
Randevu pop-up'ından KASITLI OLARAK daha baskın: kapatma çarpısı
YOKTUR ve üç seçenekten biri işaretlenmeden kaybolmaz. Randevu
uyarısı bilgi verir, bu soru bir işin yapılmasını ister.
Randevunun üstünde durur (bottom hesabı) — ikisi birden çıktığında
üst üste binmemeleri gerekir; binseydi biri hiç okunmazdı.
================================================================ */
.ikram-pop{position:relative;width:376px;
background:var(--surface);border:1px solid var(--gold);
border-radius:var(--r);box-shadow:0 22px 56px rgba(21,24,31,.28);
overflow:hidden;animation:appt-in .32s cubic-bezier(.2,.8,.2,1)}
/* IsrArlı hâl: üçüncü ertelemeden sonra biçim değişir. Aynı görünen
uyarı tekrar edince görünmez olur; değişen uyarı görünür kalır. */
.ikram-pop.israr{border-color:var(--red);
box-shadow:0 22px 56px rgba(168,68,60,.32);
animation:appt-in .32s cubic-bezier(.2,.8,.2,1), ik-sarsi 2.4s ease-in-out 1s infinite}
@keyframes ik-sarsi{0%,92%,100%{transform:none}
94%{transform:translateX(-3px)}96%{transform:translateX(3px)}98%{transform:translateX(-2px)}}
@media (prefers-reduced-motion:reduce){
.ikram-pop,.ikram-pop.israr{animation:none}}
.ikram-pop .ik-hd{padding:12px 16px;background:var(--ink-yzey);color:var(--ink-yzi)}
.ikram-pop.israr .ik-hd{background:var(--red)}
.ikram-pop .ik-t{font-family:var(--serif);font-size:15px;font-weight:600;
letter-spacing:.3px}
.ikram-pop .ik-bd{padding:14px 16px}
.ikram-pop .ik-who{font-size:15px;font-weight:600;color:var(--ink)}
.ikram-pop .ik-meta{margin-top:4px;font-size:12.5px;color:var(--muted);line-height:1.5}
.ikram-pop .ik-hint{margin-top:10px;padding:8px 10px;border-radius:4px;
background:var(--gold-tint);border-left:3px solid var(--gold);
font-size:12.5px;color:var(--ink);line-height:1.5}
.ikram-pop .ik-warn{margin-top:10px;padding:8px 10px;border-radius:4px;
background:var(--red-tint);border-left:3px solid var(--red);
font-size:12px;color:var(--ink);line-height:1.55}
.ikram-pop .ik-form{margin-top:12px;display:grid;gap:7px}
.ikram-pop .ik-form select,.ikram-pop .ik-form input{width:100%;padding:8px 10px;
border:1px solid var(--line);border-radius:4px;background:var(--bg);
color:var(--ink);font:inherit;font-size:13px}
.ikram-pop .ik-ft{padding:12px 16px;border-top:1px solid var(--line-2);
display:flex;gap:7px;flex-wrap:wrap;background:var(--surface-2)}
.ikram-pop .ik-ft .btn{flex:1 1 auto;justify-content:center;white-space:nowrap}
@media(max-width:520px){.ikram-pop{right:12px;left:12px;width:auto}}
/* ---------------- Satır içi form (tablo hücresi) ----------------
Risk ve portal ekranlarında bir hücrede birden çok alan bulunur.
Alanların minimum genişliği sınırlanmazsa tablo taşar; taşınca da
son sütun görünmez olurdu. */
.inline-form.tight{gap:5px}
.inline-form.tight input,.inline-form.tight select{padding:6px 8px;font-size:12.5px}
.inline-form.tight .btn{padding:6px 10px;font-size:12px}
td .stack{display:flex;flex-direction:column;gap:5px}
/* ---------------- Kaydırılabilir liste (cari 360°, detay blokları) ----------
Bir carinin 40 iş emri varsa sayfa metrelerce uzuyor ve diğer bloklar
görünmez oluyordu. Blok yüksekliği ~4 satırla sınırlanır; gerisi kendi
içinde kaydırılır. Kaydırma çubuğu menüdeki ile AYNI altın rengidir —
kullanıcı "burada devamı var" işaretini tanıdık bir renkte görür. */
.scroll-list{max-height:232px;overflow-y:auto;overflow-x:auto;
scrollbar-width:thin;scrollbar-color:var(--gold) var(--line-2)}
.scroll-list::-webkit-scrollbar{width:9px;height:9px}
.scroll-list::-webkit-scrollbar-track{background:var(--line-2);border-radius:5px}
.scroll-list::-webkit-scrollbar-thumb{background:var(--gold);border-radius:5px;
border:2px solid var(--surface)}
.scroll-list::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)}
/* Başlık satırı kaydırırken sabit kalır — 20. satırdayken hangi sütunun ne
olduğunu hatırlamak zorunda kalınmaz. */
.scroll-list thead th{position:sticky;top:0;z-index:2;
box-shadow:0 1px 0 var(--line)}
.scroll-list.tall{max-height:330px}
.scroll-list.short{max-height:170px}
/* Kaydırılabilir blokta kaç kayıt olduğunu ve kaçının göründüğünü söyler */
.scroll-note{font-size:11.5px;color:var(--faint);padding:7px 18px;
border-top:1px solid var(--line-2);display:flex;justify-content:space-between;
align-items:center;gap:10px}
/* ================================================================
KUTUCUK SİSTEMİ — liste ekranları için kart ızgarası
================================================================
NEDEN: liste ekranları Excel tablosu gibiydi. Servis danışmanı 40
satırlık bir tabloda aradığı plakayı SATIR SATIR OKUYARAK buluyordu.
Kutucukta ise araç fotoğrafı, plaka ve cari aynı anda göze girer;
tanıma okumadan önce olur. Tablo hâlâ değerlidir (karşılaştırma,
sıralama) ama giriş ekranı kart olmalıdır.
Izgara kendini ayarlar: dar ekranda tek, orta ekranda iki, geniş
ekranda üç-dört kart yan yana. Sabit üç kolon yazsaydık dizüstünde
kartlar sıkışır, geniş monitörde ortada kalırdı.
================================================================ */
/* SATIRDA 4 KART — sabit sütun sayısı, esnek genişlik.
auto-fill ile sütun sayısı ekran genişliğine göre değişiyordu:
aynı liste bir makinede 3, diğerinde 5 kart gösteriyor ve sayfa
düzeni makineden makineye kayıyordu. Sabit sütun + minmax(0,1fr)
ile kartlar kalan alanı EŞİT paylaşır, iki kenara da dayanır ve
aralarındaki boşluk her yerde aynı kalır.
minmax(0,1fr) — 1fr yerine: uzun bir metin sütunu şişirip diğerlerini
ezmesin (grid'in asgari içerik genişliği kuralı). */
.kart-izgara{display:grid;gap:16px;
grid-template-columns:repeat(4,minmax(0,1fr))}
.kart-izgara.dar{grid-template-columns:repeat(5,minmax(0,1fr))}
.kart-izgara.genis{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Dar ekranda sütun sayısı kademeli düşer; kart hiçbir zaman
okunamayacak kadar daralmaz. */
@media(max-width:1500px){
.kart-izgara{grid-template-columns:repeat(3,minmax(0,1fr))}
.kart-izgara.dar{grid-template-columns:repeat(4,minmax(0,1fr))}
.kart-izgara.genis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1150px){
.kart-izgara,.kart-izgara.dar{grid-template-columns:repeat(2,minmax(0,1fr))}
.kart-izgara.genis{grid-template-columns:1fr}
}
@media(max-width:760px){
.kart-izgara,.kart-izgara.dar,.kart-izgara.genis{grid-template-columns:1fr}
}
.kutu{position:relative;display:flex;flex-direction:column;
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-sm);box-shadow:var(--sh);overflow:hidden;
color:var(--text);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
a.kutu:hover{transform:translateY(-3px);box-shadow:var(--sh-lift);
border-color:var(--gold-line);color:var(--text)}
/* Üst kenardaki ince altın çizgi — kartı yüzeyden ayırır */
.kutu::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--gold),transparent 72%);opacity:0;
transition:opacity .22s ease}
a.kutu:hover::before{opacity:1}
/* Fotoğraf alanı — sabit oran, kart yükseklikleri eşit kalsın */
/* Araç fotoğrafı — ARACIN TAMAMI görünür (contain).
cover ile kart oranına göre çekicinin önü ya da arkası kesiliyordu;
oysa kartın işi "hangi araç" sorusunu bir bakışta yanıtlamak. Yarım
araç bunu yapmaz. Zemin koyu, çünkü ürün çekimleri nötr zeminli. */
.kutu .foto{position:relative;aspect-ratio:16/8;
background:linear-gradient(160deg,var(--foto-bg),var(--foto-bg-2));overflow:hidden}
.kutu .foto img{width:100%;height:100%;object-fit:contain;display:block;
padding:6px 6px 18px;transition:transform .5s ease}
a.kutu:hover .foto img{transform:scale(1.05)}
/* Fotoğrafın üstündeki rozet (garanti, durum) */
.kutu .foto .rozet{position:absolute;top:9px;right:9px;z-index:2}
.kutu .foto .model{position:absolute;left:0;right:0;bottom:0;
padding:20px 11px 8px;color:var(--giris-yzi);font-size:11.5px;font-weight:600;
letter-spacing:.09em;text-transform:uppercase;
background:linear-gradient(180deg,transparent,rgba(4,6,12,.88))}
.kutu .govde{padding:13px 14px 14px;display:flex;flex-direction:column;
gap:9px;flex:1}
.kutu .ad{font-family:var(--serif);font-size:19px;font-weight:600;
line-height:1.2;color:var(--ink)}
.kutu .alt{font-size:13px;color:var(--muted);line-height:1.45}
/* Etiketli satır — ikon + etiket + değer */
.kutu .satir{display:flex;align-items:center;gap:8px;font-size:13.5px;
color:var(--ink-soft);min-width:0}
.kutu .satir .ikon{color:var(--gold-deep);flex:none}
.kutu .satir b{font-weight:600}
.kutu .satir .sonek{margin-left:auto;color:var(--muted);font-size:12.5px;
font-variant-numeric:tabular-nums;white-space:nowrap}
.kutu .satir span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Kart altı ölçü şeridi — dört küçük veri yan yana */
.kutu .olcu{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);
gap:1px;background:var(--line-2);border-top:1px solid var(--line-2)}
.kutu .olcu > div{background:var(--surface-2);padding:9px 6px;text-align:center}
.kutu .olcu .l{display:block;font-size:10px;letter-spacing:.09em;
text-transform:uppercase;color:var(--faint);font-weight:700}
.kutu .olcu .v{display:block;font-size:14px;font-weight:600;margin-top:2px;
color:var(--ink);font-variant-numeric:tabular-nums}
.kutu .olcu .v.iyi{color:var(--green)}
.kutu .olcu .v.uyari{color:var(--amber)}
.kutu .olcu .v.kotu{color:var(--red)}
/* İkon hizası — metinle aynı satırda oturur */
.ikon{vertical-align:-3px;flex:none}
/* ---------------- TÜRK PLAKASI ----------------
Gerçek plakanın oranları: solda mavi AB bandı, sağda beyaz zemin
üstünde koyu, geniş aralıklı rakam. Resim değil bileşen olduğu için
metin seçilebilir ve aranabilir. */
/* PLAKA TEMAYA TABI DEGILDIR. Turk plakasi beyaz zemin + mavi AB
seridiyle TANIMLIDIR; bu bir arayuz yuzeyi degil, ekranda
gosterilen gercek bir nesnenin resmi. Koyu temada "uyumlu"
olsun diye griye boyamak, plakayi plaka olmaktan cikarir. */
.plaka{display:inline-flex;align-items:stretch;border:2px solid #14181f;
border-radius:5px;overflow:hidden;background:#fff;line-height:1;
box-shadow:0 1px 3px rgba(21,24,31,.16);vertical-align:middle}
.plaka .tr{display:flex;align-items:center;justify-content:center;
background:#123a8f;color:#fff;font:700 9.5px/1 var(--sans);
letter-spacing:.06em;padding:0 5px;min-width:20px}
.plaka .no{font:700 16px/1 var(--sans);letter-spacing:.09em;color:#14181f;
padding:7px 10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.plaka.sm .no{font-size:13.5px;padding:5px 8px}
.plaka.sm .tr{font-size:8.5px;min-width:17px}
.plaka.lg .no{font-size:21px;padding:9px 13px}
/* ---------------- Görünüm değiştirici (kart / tablo) ----------------
Kart tanımayı hızlandırır, tablo karşılaştırmayı. İkisi de gerekli;
hangisinin açılacağı kullanıcının işine bağlıdır, bu yüzden seçim
kullanıcıya bırakılır ve tercihi tarayıcıda saklanır. */
.gorunum-sec{display:inline-flex;border:1px solid var(--line);
border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.gorunum-sec button{border:none;background:transparent;cursor:pointer;
padding:8px 13px;font:600 13px var(--sans);color:var(--muted);
display:inline-flex;align-items:center;gap:7px;
transition:background .18s ease,color .18s ease}
.gorunum-sec button:hover{background:var(--gold-tint);color:var(--ink)}
.gorunum-sec button.on{background:var(--ink-yzey);color:var(--gold)}
/* Kart ızgarası boşken */
.kart-bos{grid-column:1/-1;padding:44px 20px;text-align:center;
color:var(--muted);background:var(--surface);border:1px dashed var(--line);
border-radius:var(--r-sm)}
/* Kritik stok kartı — kenarı uyarı rengiyle işaretlenir. Durum kolonunu
taramak yerine kart kendini gösterir. */
.kutu.kritik{border-color:var(--amber)}
.kutu.kritik::before{opacity:1;
background:linear-gradient(90deg,var(--amber),transparent 72%)}
/* ================================================================
IS KARTI AKIS SEKMELERI — kartlar isin gercek sirasina dizilir
Departman kendi sekmesini acar; hepsi tek kolonda alt alta
dizilince ekran okunmaz oluyordu.
================================================================ */
.wo-sekme{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 4px;
border-bottom:2px solid var(--line);padding-bottom:0}
.wo-sek{background:transparent;border:1px solid transparent;border-bottom:none;
border-radius:var(--r-sm) var(--r-sm) 0 0;cursor:pointer;
padding:10px 18px;font:600 13px var(--sans);color:var(--muted);
display:inline-flex;align-items:center;gap:7px;position:relative;top:2px;
transition:color .15s ease,background .15s ease}
.wo-sek .ico{font-size:15px;opacity:.8}
.wo-adet{background:var(--line-2);color:var(--muted);border-radius:999px;
padding:0 7px;font-size:11px;font-weight:700;margin-left:2px}
.wo-sek.on .wo-adet{background:var(--gold-tint);color:var(--gold-deep)}
.wo-sek:hover{color:var(--ink);background:var(--gold-tint)}
.wo-sek.on{color:var(--ink);background:var(--surface);
border-color:var(--line);border-bottom:2px solid var(--surface);
box-shadow:0 -2px 0 var(--gold) inset}
.wo-sek.on .ico{color:var(--gold-deep);opacity:1}
/* 16.08 — DEPO EKRANINDA SEKMELER BAGLANTI (), dugme degil.
Yedek parca ekrani sunucuda ciziliyor: tek isli ve kisa bir ekranda
sekmeyi tarayiciya kurmak, kalem eklendikten sonra hangi sekmede
uyanilacagini da JS'e baglardi. Adres (?sekme=) tek dogru kaynak.
varsayilan olarak alti cizili gelir ve link rengini alir; gorunum
dugme sekmeleriyle ayni kalsin diye burada esitleniyor. */
a.wo-sek{text-decoration:none;color:var(--muted)}
a.wo-sek:visited{color:var(--muted)}
a.wo-sek.on,a.wo-sek.on:visited,a.wo-sek:hover{color:var(--ink)}
/* JS kapaliysa butun gruplar gorunur kalir — is kartinin hicbir bolumu
erisilmez olmaz. Sekme davranisi JS ile eklenir. */
.wo-grup.gizli{display:none}
/* ── EK IS DENETMENI ────────────────────────────────────────────────
Ek is sekmesi digerleriyle ayni santralde calismaz: onay bekleyen
talep varken sekme ORADA kilitlenir. Kilit GORULMELI — sonuk sekme,
tiklaninca hicbir sey olmayan sekmeden iyidir. */
.wo-sek.denetmen{color:var(--red)}
.wo-sek.denetmen .ico{color:var(--red);opacity:1}
.wo-sek.denetmen.on{box-shadow:0 -2px 0 var(--red) inset}
.wo-adet.bekliyor,.wo-sek.on .wo-adet.bekliyor{background:var(--red);color:var(--red-yzi)}
.wo-sek.kilit-disi{opacity:.42;cursor:not-allowed}
.wo-sek.kilit-disi:hover{color:var(--muted);background:transparent}
.wo-sek.reddedildi{animation:basamakSalla .3s}
/* Kilidin SEBEBI kartin icinde yazar; sekmedeki kirmizi yalnizca
isarettir, gerekce degil. */
.ekis-kilit-not{border:1px solid var(--red);
border-left:4px solid var(--red);border-radius:var(--r-sm);
background:rgba(192,57,43,.06);color:var(--ink);
font:400 13px/1.55 var(--sans);padding:11px 14px;margin:0 0 13px}
.ekis-kilit-not b{color:var(--red)}
/* ── EK IS KAYDI: GIRIS SOLDA, KALEM TABLOSU SAGDA (16.08 · kullanici)
"Ekran cok buyuk; ek iscilik ve yedek parca girdikce sag tarafta
gozukse daha sik olur hem de daha kisa olur."
Olculen sorun: her kalem tabloya bir satir ekliyor, tablo asagi
uzuyor ve ALTINDAKI ekleme satiri ekranin disina kaciyordu --
danisman her kalemden sonra asagi kaydirmak zorundaydi. Iki sutunda
tablo yuksekligi degil GENISLIGI kullanir; giris satiri gozde kalir.
900px altinda alt alta duser: yan yana iki sutun tablette okunmaz
olur ve tablo yatay kayar. Sira o zaman GIRIS -> TABLO'dur; eklenen
kalem hemen altinda gorunur. */
.ekis-kayit{border:1px solid var(--line);border-radius:var(--r-sm);
padding:12px 14px;margin-bottom:10px}
.ekis-ust{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ekis-iki{display:grid;gap:16px;margin-top:9px;align-items:start;
grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.ekis-sol,.ekis-sag{min-width:0}
.ekis-sag .table-wrap{margin:0}
@media (max-width:900px){.ekis-iki{grid-template-columns:1fr}}
/* ── AKORDEON (details/summary) ──────────────────────────────────────
Karmasiklik, eksik ozellikten cok zarar verir: her yetenek kartin
ustunde surekli acik dursaydi liste okunmaz olurdu. Kapali gelir,
ihtiyaci olan acar. Tarayicinin kendi ogesi — JS gerekmez, JS
calismasa da acilir. */
.kod-akordeon{margin-top:8px;border-top:1px solid var(--line-2);padding-top:7px}
.kod-akordeon>summary{cursor:pointer;font:600 12.5px var(--sans);
color:var(--muted);list-style:none;display:flex;align-items:center;gap:6px}
.kod-akordeon>summary::-webkit-details-marker{display:none}
.kod-akordeon>summary::before{content:"▸";color:var(--gold);font-size:11px;
transition:transform .15s ease}
.kod-akordeon[open]>summary::before{transform:rotate(90deg)}
.kod-akordeon>summary:hover{color:var(--ink)}
/* YAZDIRMA — servis danismani is emrini ustaya kagit olarak verir.
Ekran ogeleri (menu, sekme, dugme, form) basilmaz; yalniz isin
kendisi kagida gider. */
@media print{
.ustbar,.modulbar,.wo-sekme,.side-foot,.btn,form,.onay-kilit,
.pipeline,.flash,.alert.dang{display:none !important}
.main{margin-left:0 !important}
.wo-grup.gizli{display:block !important}
.card{break-inside:avoid;box-shadow:none;border:1px solid #ccc}
body{background:#fff}
}
/* ================================================================
MUDUR ONAY KILIDI — karar verilmeden ekran acilmaz
Arkasi koyulasir, pencere ortada durur, kapatma yolu yoktur.
z-index sol menunun (20) ve appbar'in ustunde olmali.
================================================================ */
.onay-kilit{position:fixed;inset:0;z-index:9000;display:flex;
align-items:center;justify-content:center;padding:20px;
background:rgba(16,19,24,.78);backdrop-filter:blur(3px)}
.onay-kart{background:var(--surface);border:1px solid var(--line);
border-top:4px solid var(--red);border-radius:var(--r);
box-shadow:0 24px 60px rgba(0,0,0,.45);padding:26px 28px;
max-width:520px;width:100%;max-height:90vh;overflow-y:auto}
.onay-ust{display:flex;align-items:center;justify-content:space-between;
gap:12px;margin-bottom:12px}
.onay-sayac{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.onay-kart h2{font-family:var(--serif);font-size:21px;margin:0 0 8px;
color:var(--ink);line-height:1.3}
.onay-detay{color:var(--ink-soft);font-size:13.5px;margin:0 0 10px}
.onay-kim{font-size:12.5px;color:var(--muted);margin:0 0 14px}
.onay-uyari{font-size:12.5px;color:var(--red);background:var(--red-tint);
border-radius:var(--r-sm);padding:9px 12px;margin:0 0 16px}
.onay-sebep{width:100%;padding:9px 12px;border:1px solid var(--line);
border-radius:var(--r-sm);font:400 13px var(--sans);margin-bottom:12px}
.onay-dugmeler{display:flex;gap:10px}
.onay-dugmeler .btn{flex:1;justify-content:center}
.onay-kuyruk{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);
font-size:12px;color:var(--muted);text-align:center}
/* ================================================================
AKORDEON SOL MENU — bolumler acilip kapanir (dosya gezgini mantigi)
Grup basligina tiklayinca alt sekmeler acilir/kapanir. Hepsi bir anda
gorununce karisik oluyordu; artik yalniz aktif grup ve kullanicinin
actigi gruplar acik durur, tercih tarayicida saklanir.
================================================================ */
.nav details.nav-sec{margin:0}
.nav details.nav-sec>summary.grp{position:relative;cursor:pointer;
padding-right:46px;user-select:none;list-style:none;outline:none;
transition:color .15s ease,background .15s ease}
.nav details.nav-sec>summary.grp::-webkit-details-marker{display:none}
.nav details.nav-sec>summary.grp:hover{color:var(--gold-line);background:rgba(255,255,255,.03)}
.nav details.nav-sec>summary.grp:focus-visible{color:var(--gold);
background:rgba(255,255,255,.05)}
/* Acilir ok: kapaliyken saga bakar (▸), acikken 90 derece doner */
.nav details.nav-sec>summary.grp::after{content:"\25B8";position:absolute;
right:14px;top:50%;transform:translateY(-50%);font-size:11px;opacity:.75;
transition:transform .18s ease}
.nav details.nav-sec[open]>summary.grp::after{transform:translateY(-50%) rotate(90deg)}
/* Kapali grupta icteki uyari sayilari baslikta toplanir — acil bilgi gizlenmez */
.nav details.nav-sec>summary.grp .grp-count{position:absolute;right:30px;top:50%;
transform:translateY(-50%);background:var(--red-tint);color:var(--red);
font-size:10px;font-weight:700;letter-spacing:0;padding:1px 7px;border-radius:999px}
.nav details.nav-sec[open]>summary.grp .grp-count{display:none}
@media (prefers-reduced-motion: no-preference){
.nav details.nav-sec[open]>a{animation:navFade .2s ease both}
@keyframes navFade{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:none}}
}
/* ── SEKME = HEM GEZİNME HEM DURUM (09.08) ───────────────────────────
Basamak şeridi kaldırıldı; adım durumu sekmenin üstünde durur.
İki çubuk aynı adları listeleyince kullanıcı hangisine basacağını
bilemiyordu. Numara sekmenin solunda, durum rengi altındaki çizgide,
"şu an burada" notu sağında. */
.wo-sek[data-adim-no]::before{content:attr(data-adim-no);
display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;border-radius:50%;font-size:10.5px;font-weight:800;
background:var(--line-2);color:var(--muted);flex:none}
.wo-sek[data-adim-not]::after{content:attr(data-adim-not);
font-size:10.5px;font-weight:600;opacity:.9;margin-left:4px}
.wo-sek.adim-tamam::before{background:var(--gold);color:var(--ink)}
.wo-sek.adim-aktif{color:var(--ink)}
.wo-sek.adim-aktif::before{background:var(--gold-deep);color:var(--gold-yzi)}
.wo-sek.adim-aktif::after{color:var(--gold-deep)}
.wo-sek.adim-engel::before{background:var(--red);color:var(--red-yzi)}
.wo-sek.adim-engel::after{color:var(--red)}
.wo-sek.adim-bekliyor::before{opacity:.75}
/* ── ADIM ALTLIĞI: "YAZDIR VE DEVAM ET" (09.08) ──────────────────────
Yazdır düğmeleri sayfanın dört bir yanına dağılmıştı; kullanıcı formu
doldurmadan yazdırabiliyor, sonra hangi sekmeye geçeceğini bilemiyordu.
Her sekmenin EN ALTINDA tek düğme var ve o düğme aynı zamanda
denetçidir: eksik alan varsa ne çıktı alınır ne de geçiş olur. */
.wo-adim-alt{margin:18px 0 6px;border-top:2px solid var(--gold-line);
padding-top:14px}
.wo-adim-alt-ic{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
justify-content:space-between}
.wo-adim-alt .aciklama{font-size:12.5px;color:var(--muted);max-width:62ch}
.wo-adim-alt .wo-devam{font-size:15px;padding:12px 22px}
.wo-eksik-not{margin-top:10px;padding:10px 13px;border-radius:var(--r-sm);
background:rgba(239,68,68,.09);border:1px solid rgba(239,68,68,.35);
color:var(--red);font-size:13px;font-weight:600}
/* Eksik alan KIRMIZI çerçeve alır: mesajı okumadan da nereye bakacağı
belli olsun. */
.alan-eksik{border-color:var(--red) !important;
box-shadow:0 0 0 3px rgba(239,68,68,.14) !important}
/* ══ İŞ EMİRLERİ — TEK FİLTRE ÇUBUĞU (19.08) ═══════════════════════════
Dört ayrı çip satırının yerine geçti. Kutular etiketli: etiketsiz dört
açılır kutu yan yana durduğunda hangisinin ne olduğu okunmuyordu. */
.wo-filtre{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.wo-filtre-alan{display:flex;flex-direction:column;gap:4px;min-width:150px}
.wo-filtre-alan > label{font:600 10px var(--sans);letter-spacing:.14em;
text-transform:uppercase;color:var(--muted)}
.wo-filtre-alan select{min-width:150px}
@media(max-width:720px){
.wo-filtre{gap:9px}
.wo-filtre-alan{min-width:0;flex:1 1 46%}
.wo-filtre-alan select{min-width:0;width:100%}
}
/* ══ TAHMİNİ KALEMLER — İKİ SÜTUN (19.08) ═══════════════════════════════
İsa: *"Tabloyu ikiye bölelim: solda ekleme alanı (alt alta), sağda
sadece Hizmetler Bölümü… tıklanmazsa sadece işçilik bedeli parça
bedeli görünsün."*
Sol sütun SABİT genişlikte: giriş alanı kalem sayısıyla büyümemeli,
danışman her eklemeden sonra aynı yere bakabilmeli. Sağ sütun esner
ve kendi içinde kaydırılır — sayfa aşağı uzamaz. */
.kalem-iki{display:grid;grid-template-columns:340px minmax(0,1fr);
gap:18px;align-items:start;margin-top:4px}
.kalem-sol{min-width:0}
.kalem-sag{min-width:0}
/* Alanlar ALT ALTA — dar sütunda yan yana altı alan okunmuyordu. */
.kalem-dikey{display:flex;flex-direction:column;gap:7px;align-items:stretch}
.kalem-dikey > *{width:100%!important;min-width:0!important;flex:none!important}
.kalem-dikey .srt-sarma{width:100%}
.kalem-dikey .kalem-ekle-btn{align-self:flex-start;width:auto!important;
padding-left:22px;padding-right:22px}
/* Hizmetler — katlanır. Kapalıyken yalnız iki rakam. */
.hizmetler{border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.hizmetler > summary{list-style:none;cursor:pointer;padding:11px 14px;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
border-radius:6px}
.hizmetler > summary::-webkit-details-marker{display:none}
.hizmetler > summary:hover{background:var(--bg-2)}
.hizmetler > summary .baslik{font-weight:600}
.hizmetler > summary .ozet-rakam{font-size:13.5px;color:var(--muted)}
.hizmetler > summary .ozet-rakam b{color:var(--text);margin-left:5px}
.hizmetler > summary .ac-kapa{margin-left:auto;font-size:11.5px;
letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hizmetler > summary .ac-kapa::before{content:'▸ '}
.hizmetler[open] > summary .ac-kapa::before{content:'▾ '}
.hizmetler[open] > summary{border-bottom:1px solid var(--line)}
/* Kendi kaydırma kutusu: liste uzasa da sayfa uzamaz. */
.hizmet-kaydir{max-height:460px;overflow-y:auto;padding:12px 14px}
@media(max-width:980px){
.kalem-iki{grid-template-columns:1fr}
.hizmet-kaydir{max-height:340px}
}
/* ══ 19.08 (2. tur) — KALEM GİRİŞ AKORDEONU ═════════════════════════════
İsa: *"işçilik yazıyordu, tıklayınca alt alta akordeon gibi çıkıyordu
ya o"*. Üç başlık alt alta; açık olanın altında alanlar durur.
Açık başlık ALTIN ŞERİTLE işaretlenir — hangi türü girdiğiniz ekrandan
okunur, kutunun içine bakmaya gerek kalmaz. */
.kalem-akordeon{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);
border-radius:8px;overflow:hidden;background:var(--surface)}
.ka-satir + .ka-satir{border-top:1px solid var(--line-2)}
.ka-baslik{width:100%;text-align:left;background:none;border:0;cursor:pointer;
padding:11px 13px;display:flex;align-items:center;gap:9px;font:600 13.5px var(--sans);
color:var(--text)}
.ka-baslik:hover{background:var(--surface-2)}
.ka-ok{color:var(--gold);transition:transform .12s ease;display:inline-block}
.ka-not{margin-left:auto;font:400 11.5px var(--sans);color:var(--muted)}
.ka-yuva{display:none;padding:0 13px 13px}
.ka-satir.acik{background:var(--gold-tint)}
.ka-satir.acik .ka-baslik{border-left:3px solid var(--gold);padding-left:10px}
.ka-satir.acik .ka-ok{transform:rotate(90deg)}
.ka-satir.acik .ka-yuva{display:block}
/* ══ HİZMETLER ÖZETİ — SAĞDA DURAN CÜMLE ════════════════════════════════
Sağ sütunda artık tablo değil, MÜŞTERİYE SÖYLENEN RAKAM var:
işçilik · parça · KDV'siz · KDV'li. Döküm pencerede açılır. */
.hizmet-ozet{border:1px solid var(--line);border-radius:8px;background:var(--surface);
padding:13px 15px}
.hizmet-ozet .ho-bas{display:flex;align-items:center;gap:10px;
font:600 15px var(--serif);letter-spacing:.2px;margin-bottom:9px}
.hizmet-ozet .ho-bas > span{font-family:var(--serif);font-size:17px}
.hizmet-ozet .ho-bas .btn{margin-left:auto}
.ho-satir{display:flex;align-items:baseline;gap:10px;padding:5px 0;
font-size:13.6px}
.ho-satir > span{color:var(--muted)}
.ho-satir > span i{font-style:normal;font-size:11.5px;letter-spacing:.08em;
text-transform:uppercase;color:var(--faint);margin-left:5px}
.ho-satir > b{margin-left:auto;font-variant-numeric:tabular-nums}
.ho-satir.ara{border-top:1px solid var(--line-2);margin-top:4px;padding-top:8px}
.ho-satir.genel{border-top:2px solid var(--gold-line);margin-top:5px;
padding-top:9px;font-size:15px}
.ho-satir.genel > span{color:var(--text);font-weight:600}
.ho-satir.genel > b{font-size:17px;color:var(--gold-deep)}
.ho-ipucu{margin-top:9px;font-size:11.8px;color:var(--muted);line-height:1.45}
/* ══ DETAY PENCERESİ — SAYFANIN ORTASINDA ═══════════════════════════════
İsa: *"ekranın sadece ortasını kaplayacak… çarpıyla kapatılabilen"*.
Yeni sekme yok: aynı sayfanın üstünde bir katman. Arka plan kararır ki
göz dökümde kalsın; kutu ekranın ortasında ve kendi içinde kaydırılır. */
.hizmet-pencere{position:fixed;inset:0;z-index:120;display:flex;
align-items:center;justify-content:center;padding:22px}
.hizmet-pencere[hidden]{display:none}
.hp-arka{position:absolute;inset:0;background:rgba(21,24,31,.55);
backdrop-filter:blur(1.5px)}
.hp-kutu{position:relative;background:var(--surface);border-radius:12px;
width:min(1020px,86vw);max-height:82vh;display:flex;flex-direction:column;
box-shadow:0 24px 70px rgba(21,24,31,.32);overflow:hidden}
.hp-bas{display:flex;align-items:center;gap:12px;padding:13px 16px;
border-bottom:1px solid var(--line);background:var(--surface-2)}
.hp-bas b{font:600 15.5px var(--serif);font-size:17px}
.hp-alt{font-size:12px;color:var(--muted)}
.hp-kapat{margin-left:auto;border:0;background:none;cursor:pointer;
font-size:26px;line-height:1;color:var(--muted);padding:0 4px;border-radius:6px}
.hp-kapat:hover{color:var(--red);background:var(--red-tint)}
.hp-govde{padding:6px 16px 16px;overflow-y:auto}
.hp-govde .hizmet-kaydir{max-height:none;overflow:visible;padding:0}
@media(max-width:980px){
.hp-kutu{width:96vw;max-height:88vh}
}
/* ═══════════════════════════════════════════════════════════════════
ÜST ŞERİT — TELEFONDA YATAY TAŞMA (27.08 · ölçülerek bulundu)
═══════════════════════════════════════════════════════════════════
BULGU: 390px genişlikte sayfanın TAMAMI 39px yatay kayıyordu ve bu
her ekranda geçerliydi (gösterge paneli dâhil). Yatay kaydırma,
telefonda "sayfa bozuk" hissinin tek başına en büyük sebebidir.
SEBEP — ÖLÇÜM:
kullanılabilir alan 366px (390 − 2×12 padding)
kenar-ac 37px
marka 132px ← `flex:none`, ASLA küçülmüyordu
appbar-user 220px (tema + 2 zil + kullanıcı menüsü)
+ 2 boşluk × 14px
────────────────────────────
toplam 417px → 51px fazla
ÇÖZÜM: markayı ESNEK yap. `flex:none` sabit genişlik demektir;
flex kabında sabit genişlikli bir öğe, kap daraldığında küçülmez ve
fazlalık kabın DIŞINA taşar. Marka esnetildiğinde açığı o kapatır:
önce yazı kırpılır, simge kalır. Zil ve kullanıcı menüsü ise
kırpılamaz — onlar tıklanacak hedeflerdir.
⚠ `min-width:0` OLMADAN `flex:1 1 auto` ÇALIŞMAZ. Flex öğesi
varsayılan olarak içeriğinden (min-content) daha dar olmayı reddeder;
yazı uzun olduğu sürece kutu küçülmez ve taşma sürer. Flexbox'ın en
sık atlanan kuralı budur.
⚠ 600px seçildi, 900 değil: 900'de kenar çubuğu zaten çekmeceye
dönüyor ve arama kutusu gizleniyor; orada yer sıkıntısı yok. Taşma
yalnız gerçek telefon genişliklerinde başlıyor. */
@media (max-width:600px){
.ustbar{gap:8px; padding:0 10px}
/* Marka açığı kapatan öğedir: esner, gerekirse kırpılır. */
.ustbar .marka{flex:1 1 auto; min-width:0; overflow:hidden; gap:8px}
.ustbar .marka .ad{
font-size:17px; min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Alt satır ("KILIÇLAR OTOMOTİV" gibi) telefonda okunmuyor zaten;
yer açar. */
.ustbar .marka .ad small{display:none}
/* Sağ blok kırpılmaz — hepsi tıklanacak hedef. Yalnız sıkışır. */
.appbar-user{gap:6px; flex:0 0 auto}
.ustbar .tema-dugme,
.ustbar .bell{width:32px; height:32px}
.kmenu{gap:0}
}
/* Son savunma hattı: hangi öğe taşarsa taşsın, GÖVDE yatay kaymaz.
Üstteki kural sebebi ortadan kaldırır; bu satır ise ileride eklenecek
geniş bir öğenin aynı hatayı sessizce geri getirmesini engeller.
⚠ `overflow-x:hidden` yalnız GÖVDEYE konur; kendi içinde kayması
gereken kaplar (geniş tablolar) kendi `overflow-x:auto`larını
korur ve bundan etkilenmez. */
@media (max-width:600px){
body{overflow-x:hidden}
}