/* ═══════════════ RENK TOKENLARI ═══════════════ Karanlik tema 01.09.2026'da eklendi (kullanici: "butun siteye bir de karanlik tema"). Kural: RENK YALNIZ BURADA TANIMLANIR, kural govdesine `#fff` / `#000` yazilmaz — yoksa karanlikta beyaz lekeler kalir. ⚠️ IKI DURUM VAR: aydinlik (VARSAYILAN) ve karanlik. `@media (prefers-color-scheme:dark)` blogu BILEREK YOK — kullanici 01.09'da kaldirtti: "default aydinlik gelsin, isteyen karanlik yapabilsin". Geri eklenirse karanlik isletim sistemi kullananlara tema kendiliginden karanlik gelir ve kullanicinin karari bozulur. Uc blok var: aydinlik · karanlik · yazdirma. ⚠️ --accent HEM YAZI HEM ZEMIN olarak kullaniliyor ve bu ikisi karanlikta ayni anda calismaz: acik mavi zemin uzerinde beyaz yazi 2,5:1 (okunmaz), koyu mavi yazi da koyu zeminde okunmaz. Cozum Dashboard'daki --dTers ile ayni: --on-accent = "vurgu zemini uzerindeki yazi". Aydinlikta beyaz, karanlikta koyu. Vurgu zeminli bir kural yazarken `color:#fff` DEGIL `color:var(--on-accent)` kullanin. Karanlik degerler Dashboard'in 01.09'da olculmus paletinden alindi ki iki ekran ayrismasin. OLCULDU (yuzey #151e2c uzerinde, WCAG AA=4,5): --ink 15,02 · --ink2 11,08 · --muted 6,31 · --muted-aa 7,61 · --accent 6,71 · --ok 7,45 · --no 6,93 · --warn 7,93 · --info 6,73. Vurgu zemini uzerinde --on-accent 7,34. Yumusak zeminlerde 6,3-6,9. Isi hucrelerinde 9,8-12,1. KARANLIK PALETTE 18 OLCUMUN 18'i GECIYOR. ⚠️ AYDINLIK palette 6 olcum AA altinda (--muted 3,89 · --ok 3,96 · --warn 3,61 · yumusak zeminlerde 3,3-3,5). BUNLAR ONCEDEN BOYLEYDI, karanlik tema ile gelmedi — ekranlar zaten --muted-aa ile bunu telafi ediyor (bkz. marka.css). Marka rengi oldugu icin DEGISTIRILMEDI; degistirilecekse ayri bir karar konusudur. */ :root{ --bg:#f5f6f7; --surface:#fff; --surface2:#fafbfb; --line:#e5e7ea; --line2:#eef0f2; --ink:#15181c; --ink2:#3d434b; --muted:#7a828c; --accent:#1b2c4f; --accent-ink:#132340; --accent-soft:#e8ecf3; --navy:#1b2c4f; --navy2:#2e4a7d; --navy3:#5c7cb0; --navy4:#aebfd8; --ok:#1f9254; --ok-soft:#e8f4ec; --no:#c0392b; --no-soft:#fbeceb; --warn:#b9791c; --warn-soft:#fff4e6; --on-accent:#fff; /* KUCUK PUNTO ICIN KOYULTULMUS ikincil yazi. Ev --muted'i beyaz uzerinde 3,89 (AA alti); kalite raporu, Sorular, Hedef ve Canli Satis ekranlari kendi icinde #666d77'ye koyultuyordu. O deger BEYAZ ZEMIN icin olculmustu, karanlikta ters teper — token oldu. */ --muted-aa:#666d77; --brand:#16294d; /* Durum cipi KENARLIKLARI ve 'bilgi' mavisi — JS icine gomuluydu */ --ok-line:#c9e3d3; --warn-line:#f0dcbc; --no-line:#f3c9c4; --info:#2563a8; /* Isi/durum hucrelerinin pastel zeminleri. Eskiden JS icine gomuluydu (brik.js, checklist.js, rapor.js); karanlikta beyaz lekeler biraktigi icin tokena alindi. */ --hot-ok:#cfe9d9; --hot-warn:#fbe3a3; --hot-no:#f5b8b1; --hot-ink:#1a1a1a; --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06); color-scheme:light; } /* KARANLIK — yalnizca kullanici sectiyse. Isletim sisteminin tercihine BAKILMAZ; varsayilan her zaman aydinliktir (kullanici karari 01.09). */ :root[data-theme="dark"]{ --bg:#0e1520; --surface:#151e2c; --surface2:#18222f; --line:#2b374a; --line2:#233044; --ink:#eef3fa; --ink2:#c9d3e1; --muted:#93a0b2; --accent:#7ea6e0; --accent-ink:#a8c4ea; --accent-soft:#1a2740; --navy:#7ea6e0; --navy2:#8fb0e8; --navy3:#4d6ea8; --navy4:#33496e; --ok:#4ec27f; --ok-soft:#12301f; --no:#ef8b83; --no-soft:#331a18; --warn:#e0a94a; --warn-soft:#33280f; --on-accent:#0e1520; --muted-aa:#a3b0c2; --brand:#7ea6e0; --ok-line:#24543c; --warn-line:#5a4718; --no-line:#5a2c28; --info:#6fa8e8; --hot-ok:#1d4433; --hot-warn:#4a3a12; --hot-no:#4a2320; --hot-ink:#eef3fa; --shadow:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.30); color-scheme:dark; } /* KAGITTA KARANLIK MOD OLMAZ — tokenlar aydinliga doner. (Dashboard'in kendi @media print'i de ayni seyi yapiyor.) */ @media print{ :root,:root[data-theme="dark"]{ --bg:#fff; --surface:#fff; --surface2:#fafbfb; --line:#e5e7ea; --line2:#eef0f2; --ink:#15181c; --ink2:#3d434b; --muted:#7a828c; --accent:#1b2c4f; --accent-ink:#132340; --accent-soft:#e8ecf3; --navy:#1b2c4f; --navy2:#2e4a7d; --navy3:#5c7cb0; --navy4:#aebfd8; --ok:#1f9254; --ok-soft:#e8f4ec; --no:#c0392b; --no-soft:#fbeceb; --warn:#b9791c; --warn-soft:#fff4e6; --on-accent:#fff; --muted-aa:#666d77; --brand:#16294d; --ok-line:#c9e3d3; --warn-line:#f0dcbc; --no-line:#f3c9c4; --info:#2563a8; --hot-ok:#cfe9d9; --hot-warn:#fbe3a3; --hot-no:#f5b8b1; --hot-ink:#1a1a1a; color-scheme:light; } /* EKRAN ÖLÇEĞİ KAĞIDA GEÇMEZ (olcek.js, 17.09.2026). Satır içi `zoom` ve `--ekranZ` 'in style'ında; !important onları ezer. */ html{zoom:1 !important;--ekranZ:1 !important} } *{box-sizing:border-box} html,body{margin:0} body{background:var(--bg);color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5} .wrap{max-width:560px;margin:0 auto;padding:0 16px 64px} .top{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line); position:sticky;top:0;background:var(--bg);z-index:10;margin-bottom:18px} .brand{display:flex;align-items:center;gap:9px} .mark{width:24px;height:24px;border-radius:6px;background:var(--accent);position:relative;flex:none} .mark::after{content:"";position:absolute;inset:6px 6px auto auto;width:7px;height:7px;border-radius:50%;background:var(--on-accent)} .brand b{font-weight:650;letter-spacing:-.2px} .who{font-size:12px;color:var(--muted);text-align:right;line-height:1.3} /* Baslik seridinin sag blogu. Eskiden core.js'te satir ici stildi; sinifa alindi ki mobilde sarmalanabilsin. `.topbtn` araligi bilerek genis: "Cikis" ile "Sifre Degistir" 12px arayken yanlis butona basiliyordu. */ .topsag{display:flex;align-items:center;gap:12px;min-width:0} .topbtn{display:flex;align-items:center;gap:18px;flex:none} .link{background:none;border:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;padding:0} /* Yonetim > Kullanicilar: erisim ozeti (tabloda) */ .permsum{display:flex;align-items:center;gap:8px;white-space:nowrap} .permsum .txt{font-size:12.5px;color:var(--ink2);max-width:210px;overflow:hidden;text-overflow:ellipsis} .permsum .tag{font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase; padding:2px 6px;border-radius:4px;background:var(--line2);color:var(--muted)} .permsum .tag.ozel{background:var(--accent-soft);color:var(--accent)} /* Yonetim > Kullanicilar hucreleri. Eskiden satir ici stildi; sinifa alindi ki dar ekranda (kart gorunumu) davranislari degistirilebilsin. */ .uEposta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .uIslem{white-space:nowrap;text-align:right} /* Satislardaki "Ne yapmali" tavsiye kolonu. Sabit 220-240px genislik uc tablonun tek basina 500-540px olmasinin sebebiydi; oysa icerigi sarabilen serbest metin. Masaustunde genis kalir, dar ekranda serbest birakilir. */ .neyap{min-width:240px} /* Mobil kart deseninin "Ayrıntı" hücresi — masaüstünde asla görünmez. (js/mobil.js dar ekranda ekliyor; ekran büyütülürse kalıntı kalmasın.) */ td.kartAc{display:none} .clBar{display:none} /* yalnız mobilde açılır (aşağıdaki mobil bloğu) */ /* Kalite formu: ekranin altina sabitlenen ozet + kaydet seridi. Form uzun; denetci sonuna kadar kaydirmadan durumu gorsun ve kaydetsin. */ /* KOYU TEMA DÜZELTMESİ (18.09.2026): zemin `rgba(255,255,255,.96)` ile SABİTTİ; koyu temada beyaz şeridin üstüne `--ink2` yazıyordu (ölçüldü: kontrast 1,51 — okunmuyordu). Artık yüzeyin kendi tokenı. `--surface-966` yok, o yüzden düz `--surface`; blur zaten var, saydamlığı kaybetmek okunurluk yanında önemsiz. */ .kfBar{position:sticky;bottom:0;z-index:20;margin:18px -16px 0;padding:10px 16px; background:var(--surface);border-top:1px solid var(--line); backdrop-filter:blur(6px);display:flex;align-items:center;gap:12px;flex-wrap:wrap} .kfBar .oz{flex:1;min-width:150px;font-size:13px;color:var(--ink2)} .kfBar .oz b{font-weight:700} /* Genel amacli panel (modal) */ .ovl{position:fixed;inset:0;background:rgba(12,18,28,.45);display:flex;align-items:center;justify-content:center; padding:20px;z-index:200} .dlg{background:var(--surface);border:1px solid var(--line);border-radius:12px;width:100%;max-width:520px; max-height:calc(88vh / var(--ekranZ,1));display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(12,18,28,.28)} .dlg-h{padding:16px 18px;border-bottom:1px solid var(--line)} .dlg-h h3{margin:0;font-size:15px} .dlg-h .sub{font-size:12px;color:var(--muted);margin-top:3px} .dlg-b{padding:6px 18px 14px;overflow:auto} .dlg-f{padding:12px 18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px} /* Yetki agaci — grid: ad esner, anahtar sabit sagda */ .ygrp{border-bottom:1px solid var(--line2);padding:12px 0} .ygrp:last-child{border-bottom:none} .yrow{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;column-gap:14px} .yrow .ynm{font-size:14px;font-weight:600;color:var(--ink);min-width:0} .yrow.child .ynm{font-weight:500;color:var(--ink2);font-size:13px} /* Yükseltme koruması (18.09.2026): verilemeyen yetki soluk ve basılamaz. Nedeni satırın `title`ında yazıyor. Sunucu zaten reddediyor. */ .yrow.kilitli .ynm{color:var(--muted)} .yrow .sw input:disabled+i{opacity:.45;cursor:not-allowed} .ykids{margin:10px 0 0 3px;padding-left:14px;border-left:2px solid var(--line2);display:grid;row-gap:10px} .ykids.kapali{display:none} /* Yetki agacinda ALT GRUP basligi (Satis Raporlari > PBI ...) — ust menudeki alt basliklarla ayni gruplama. 02.09.2026. */ .yaltBas{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--muted-aa);margin:2px 0 -2px} /* Anahtar (switch) — genel input kurallarindan etkilenmesin diye hepsi acikca yaziliyor */ .sw{display:block;position:relative;width:40px;height:22px;cursor:pointer;justify-self:end} .sw input.swi{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;border:none; background:none;box-shadow:none;opacity:0;cursor:pointer;z-index:2} .sw i{display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:#cdd3da;border-radius:99px; transition:background .15s} .sw i:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%; transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.3)} .sw input.swi:checked + i{background:var(--accent)} .sw input.swi:checked + i:after{transform:translateX(18px)} .sw.kismi i{background:#93a3c0} .sw.kismi i:after{transform:translateX(9px)} h2{font-size:19px;font-weight:650;letter-spacing:-.3px;margin:0 0 2px} .lead{color:var(--muted);margin:0 0 18px} .card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)} .pad{padding:16px} label.fl{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin:0 0 6px} select,input,textarea{width:100%;font:inherit;color:var(--ink);background:var(--surface); border:1px solid var(--line);border-radius:9px;padding:11px;outline:none} select:focus,input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} button.btn{font:inherit;font-weight:600;cursor:pointer;border-radius:10px;padding:13px 16px;border:1px solid var(--accent); background:var(--accent);color:var(--on-accent);width:100%} button.btn:hover{background:var(--accent-ink)} button.btn.sec{background:var(--surface);color:var(--ink);border-color:var(--line)} button.btn:disabled{opacity:.5} .seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:3px} /* ⚠️ `.seg a` DA VAR: gezinme öğeleri 09.09.2026'da `` oldu — orta tuş / Ctrl+tık yeni sekmede açsın diye (core.js > tikGec). Yeni bir `.seg button` kuralı yazarken `a`yı da ekle, yoksa üst menü bağlantı gibi (mavi + altı çizili) görünür. */ .seg button,.seg a{border:none;background:none;padding:8px 14px;border-radius:6px;font:inherit;font-size:13px;color:var(--ink2);cursor:pointer;font-weight:500;text-decoration:none;display:inline-flex;align-items:center} .seg button.on,.seg a.on{background:var(--ink);color:var(--on-accent)} /* Alt sekme satiri: ust bolum menusunden daha silik ve ince */ .seg.sub{display:flex;background:none;border:none;border-radius:0;padding:0;margin-top:10px;gap:2px; border-bottom:1px solid var(--line);flex-wrap:wrap} .seg.sub button,.seg.sub a{padding:7px 12px;border-radius:0;font-size:12.5px;color:var(--muted);font-weight:600; border-bottom:2px solid transparent;margin-bottom:-1px} .seg.sub button:hover,.seg.sub a:hover{color:var(--ink2)} .seg.sub button.on,.seg.sub a.on{background:none;color:var(--accent);border-bottom-color:var(--accent)} .chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink2);background:var(--surface2)} .grade{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:6px;font-weight:700;font-size:12.5px} .gA{background:var(--ok-soft);color:var(--ok)} .gB{background:#eef4ff;color:#2563a8} .gC{background:#fff4e6;color:var(--warn)} .gD{background:var(--no-soft);color:var(--no)} table{width:100%;border-collapse:collapse;font-size:13px} th{text-align:left;font-weight:600;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:9px 10px;border-bottom:1px solid var(--line)} td{padding:10px;border-bottom:1px solid var(--line2);color:var(--ink2)} /* Sayi hucreleri: sagda ve tek satirda */ td.num,th.num{text-align:right;white-space:nowrap} /* Yan yana kartlarda tablo sikismasin — gerekirse yatay kaydirilir */ .card table{min-width:100%} .grid.g2 .card table{font-size:12.5px} .grid.g2 .card td,.grid.g2 .card th{padding:9px 7px} /* Satirlar tek satirda kalsin — uzun icerik ... ile kisalir */ td b,td .small{overflow:hidden;text-overflow:ellipsis} table td:first-child{white-space:nowrap} .pname2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pmeta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} tr.click{cursor:pointer} tr.click:hover td{background:var(--surface2)} td b{color:var(--ink);font-weight:600} .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);display:inline-block;margin-right:7px} .dot.ok{background:var(--ok)} .dot.no{background:var(--no)} .locbox{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:var(--surface2)} .switch{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)} .switch input{width:auto} .qrow{padding:14px 0;border-bottom:1px solid var(--line2)} .qrow:last-child{border:none} .qhead{display:flex;justify-content:space-between;gap:12px;align-items:start} .qtext{font-size:14px;font-weight:500} .qwt{font-size:11.5px;color:var(--muted);white-space:nowrap;padding-top:2px} .yn{display:inline-flex;gap:6px;margin-top:10px} .yn button{border:1px solid var(--line);background:var(--surface);color:var(--ink2);padding:8px 18px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer} .yn button.y.on{background:var(--ok);border-color:var(--ok);color:var(--on-accent)} .yn button.n.on{background:var(--no);border-color:var(--no);color:var(--on-accent)} .qnote{margin-top:9px} .hide{display:none} .qphoto{margin-top:9px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .photobtn{border:1px solid var(--line);background:var(--surface2);color:var(--ink2);padding:8px 12px;border-radius:8px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px} .photobtn:hover{border-color:var(--accent);color:var(--accent)} .thumb{width:44px;height:44px;border-radius:7px;object-fit:cover;border:1px solid var(--line)} .thumbx{background:none;border:none;color:var(--no);font:inherit;font-size:12px;cursor:pointer;padding:0} .reqbadge{font-size:11px;font-weight:700;color:var(--no);background:var(--no-soft);border:1px solid #f3c9c4;padding:3px 8px;border-radius:999px} .qrow.err{background:var(--no-soft);border-radius:10px;padding:12px;margin:6px 0} .qrow.err .qtext{color:var(--no)} .qrow.no{background:var(--no-soft);border-left:4px solid var(--no);border-radius:10px;padding:12px;margin:6px 0} .qrow.no .qtext{color:var(--no)} .qerr{color:var(--no);font-size:12.5px;font-weight:600;margin-top:8px} .prog{height:6px;background:var(--line2);border-radius:99px;overflow:hidden;margin:14px 0 4px} .prog i{display:block;height:100%;background:var(--accent);width:0} .big{font-size:44px;font-weight:750;letter-spacing:-1px;text-align:center;margin:6px 0} .center{text-align:center} .muted{color:var(--muted)} .small{font-size:12.5px} .kpi{padding:14px 16px} .kpi .n{font-size:24px;font-weight:680} .kpi .l{color:var(--muted);font-size:12px;margin-top:2px} details.pierow{border-bottom:1px solid var(--line2)} details.pierow>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:7px 0;font-size:13.5px} details.pierow>summary::-webkit-details-marker{display:none} details.pierow>summary:hover{background:var(--accent-soft);border-radius:6px;padding-left:4px;padding-right:4px} .pdot{width:9px;height:9px;border-radius:50%;flex:none} /* Ürün listeleri */ .plist{padding:2px 16px 12px} .prow{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center; padding:9px 0;border-bottom:1px solid var(--line2)} /* Firsat / one cikan urun satiri: ad + stok + satis (4 kolon) */ .prow.iki{grid-template-columns:26px minmax(0,1fr) 92px 84px} .prow:last-child{border-bottom:none} .prank{color:var(--muted);font-size:12px;text-align:right} .pname2{font-weight:600;font-size:13.5px;line-height:1.25} .pmeta{color:var(--muted);font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pnum{text-align:right;white-space:nowrap} .pnum b{font-size:14px} .pnum span{display:block;color:var(--muted);font-size:11.5px;margin-top:1px} .pname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600} .ppct{font-weight:700;white-space:nowrap} .grid{display:grid;gap:12px} /* Izgara ogesinin varsayilani `min-width:auto` — icindeki genis tablo hucreyi sisirip SAYFAYI tasiriyordu (olculdu: 337px yerine 664px). Butun izgaralarda sifirlanir; masaustunde de dogru davranis budur. */ .grid>*{min-width:0} .grid.g4{grid-template-columns:repeat(2,1fr)} .grid.g5,.grid.g6{grid-template-columns:repeat(2,1fr)} @media(min-width:520px){.g3{grid-template-columns:repeat(3,1fr)} .grid.g4{grid-template-columns:repeat(4,1fr)} .grid.g2{grid-template-columns:repeat(2,1fr)} .grid.g5,.grid.g6{grid-template-columns:repeat(3,1fr)}} /* 10 KPI karti: genis ekranda 5'li — kutular kucuk, veri buyuk kalsin */ @media(min-width:900px){.grid.g5{grid-template-columns:repeat(5,1fr);gap:8px} .grid.g6{grid-template-columns:repeat(6,1fr);gap:8px}} /* Hedef takip "Durum" yuvarlagi: yesil/sari/kirmizi, oran yazilmaz */ .durumTop{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:middle} tr.hdSatir:hover{background:var(--surface2)} .banner{padding:10px 13px;border-radius:9px;font-size:13px;margin-bottom:14px} .banner.err{background:var(--no-soft);color:var(--no)} .banner.info{background:var(--accent-soft);color:var(--accent-ink)} .banner.warn{background:#fff4e6;color:var(--warn)} .detail-q{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line2)} .spin{text-align:center;color:var(--muted);padding:30px} a{color:var(--accent)} .logo{width:26px;height:26px;border-radius:7px;background:#fff;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:none} .logo img{width:19px;height:19px;object-fit:contain} .logo.big{width:56px;height:56px;border-radius:12px} .logo.big img{width:40px;height:40px} /* ================================================================== MOBİL — 14.08.2026 Telefonla kullanım için eklendi. Yukarıdaki kuralların üzerine yazar. Tek blok halinde duruyor ki gerekirse tamamı silinip geri alınabilsin. KURAL: masaüstü görünümü değişmesin — her kural ya `pointer:coarse` (dokunmatik cihaz) ya da dar ekran koşuluna bağlı. Koşulsuz olanlar yalnızca masaüstünde de zaten doğru olan düzeltmeler. ================================================================== */ /* iOS yatay çevirince yazıyı kendiliğinden büyütmesin */ html{-webkit-text-size-adjust:100%} /* Çentik / ana ekran çubuğu güvenli alanı (index.html'de viewport-fit=cover). */ .wrap{padding-left:calc(16px + env(safe-area-inset-left)); padding-right:calc(16px + env(safe-area-inset-right)); padding-bottom:calc(64px + env(safe-area-inset-bottom))} .top{padding-top:calc(14px + env(safe-area-inset-top))} .kfBar{padding-bottom:calc(10px + env(safe-area-inset-bottom))} /* Başlık şeridi sarmalanmıyordu: ad+e-posta ile iki buton 360px'e sığmayınca TÜM sayfa yana kayıyordu. Artık alt satıra iniyor. */ .top{flex-wrap:wrap;gap:8px 12px} .topsag{flex-wrap:wrap;justify-content:flex-end} .who{min-width:0;overflow-wrap:anywhere} /* Ana bölüm menüsü: merkez rolünde 5 grup tek satıra sığmıyor. (Alt sekme şeridinde `flex-wrap` zaten vardı, üsttekine konmamış.) */ .seg{flex-wrap:wrap} /* Tablo ilk kolonu: `white-space:nowrap` uzun mağaza/tedarikçi adında tabloyu tek başına 300-400px şişiriyordu. Dar ekranda sarsın. */ @media(max-width:700px){ table td:first-child{white-space:normal} /* ---- Desen 1: `table.kart` — satır = kart ---- Aksiyon ağırlıklı tablolar için (Yönetim>Kullanıcılar 1400px, kalite onayı, kalite raporları). Bunlarda okunacak sayı değil, basılacak buton var; yatay kaydırmada butonlar hep ekran dışında kalıyordu. Başlık satırı gizlenir, her hücre kendi etiketini `data-l`'den yazar. `!important`: genişlikler satır içi `style` ile geldiği için başka türlü ezilmiyor. */ table.kart{min-width:0!important;table-layout:auto!important;font-size:13.5px} table.kart thead{display:none} table.kart,table.kart tbody,table.kart tr,table.kart td{display:block;width:auto} table.kart tr{border:1px solid var(--line);border-radius:10px;background:var(--surface); margin:0 0 10px;padding:10px 12px} table.kart tr:last-child{margin-bottom:0} table.kart td{border:none;padding:7px 0;display:flex;gap:14px;align-items:baseline; justify-content:space-between;text-align:right} table.kart td+td{border-top:1px solid var(--line2)} table.kart td::before{content:attr(data-l);flex:none;text-align:left;color:var(--muted); font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px} /* Etiketsiz hücre (aksiyon kolonu) tam genişlik kullansın */ table.kart td:not([data-l]){display:block;text-align:left} table.kart td:not([data-l])::before{content:none} /* Kart içinde ilk hücre başlık gibi dursun */ table.kart td:first-child{font-size:15px;text-align:left;display:block;padding-top:0} table.kart td:first-child::before{content:none} /* Form alanı taşıyan hücre: etiket üstte, alan tam genişlikte. (Yan yana olsa 250px'lik select 90px'e sıkışıyordu.) */ table.kart td.alan{display:block;text-align:left} table.kart td.alan::before{display:block;margin-bottom:5px} /* ---- Kart deseni v2 (20.08.2026) ---- Kullanıcı: "raporları sağa sola kaydırarak görmek istemiyorum." a) Tabloyu saran kaydırma kabı dar ekranda ETKİSİZ (js/mobil.js `.kartKap` sınıfını koyuyor; kapların çoğunda satır içi `overflow-x:auto` var, o yüzden !important şart). b) `data-ikincil` işaretli hücreler kart kapalıyken gizli; her satıra eklenen "Ayrıntı" düğmesiyle açılır. 17 kolonlu tabloyu 17 satır olarak açmak okunmaz olurdu — asıl kolonlar üstte kalır, gerisi istendiğinde görünür. */ .kartKap{overflow:visible!important;max-height:none!important} table.kart tr:not(.acik) td[data-ikincil]{display:none} table.kart td.kartAc{display:block;text-align:left;padding:8px 0 0;border-top:1px solid var(--line2)} .kartAcBtn{font:inherit;font-size:12.5px;font-weight:600;color:var(--accent); background:none;border:none;padding:10px 2px;min-height:44px;cursor:pointer} .kartAcBtn:active{opacity:.6} /* Açık kartta ikincil satırlar biraz siliktir — asıl bilgi öne çıksın */ table.kart tr.acik td[data-ikincil]{color:var(--ink2)} table.kart tr.acik td[data-ikincil]::before{opacity:.85} /* Kart içinde sayı hücreleri: etiket solda, değer sağda, tek satır */ table.kart td[data-l]{min-height:0} table.kart tr{box-shadow:var(--shadow)} /* Siralama numarasi kartta gereksiz: kartlar zaten sirali gorunuyor. Gizlenince, `data-baslik` isaretli hucre gorunur ilk hucre olur. */ /* Kademeli gosterimde gizlenen satir. `table.kart tr{display:block}` ile ayni ozgullukte oldugu icin sirf sira yetmiyordu; acikca yukseltildi. */ table.kart tr.kartGizli{display:none!important} .kartDaha{width:100%;margin-top:10px} table.kart td[data-sira]{display:none} table.kart td[data-baslik]{display:block;width:auto;text-align:left;font-size:15px; font-weight:600;padding-top:0;margin:0;border-top:none} table.kart td[data-baslik]::before{content:none} table.kart.ozet td[data-baslik]{line-height:1.3} /* Baslik ve meta hucrelerinde satir ici `white-space:nowrap` var (masaustu tablosunda kolonu tek satirda tutmak icin). Kartta sarabilmeli, yoksa uzun magaza adi + kidem satiri karti tasiriyor (360px'te olculdu: 224px nowrap metin, 310px'lik karti 340'a cikariyordu). Satir ici stili ancak !important ezer; sayisal hucrelere DOKUNULMAZ. */ table.kart td[data-baslik] b,table.kart td[data-baslik] div, table.kart td[data-baslik] span,table.kart td[data-sade] div{white-space:normal!important} /* `data-tam`: tam genislik hucre — icinde cubuk/uzun metin olanlar. Etiket ustte, icerik altta, satirin tamamini kullanir. */ table.kart td[data-tam]{display:block;width:auto;text-align:left;margin:8px 0 0; padding:0;border-top:none} table.kart td[data-tam]::before{display:block;margin-bottom:4px} table.kart.ozet td[data-tam]{margin:8px 0 0} /* Kalite formundaki hata tablosu: metin alani tam genislik, uc siddet kutusu ALTINDA UCER UCER. Onceden 540px'lik tabloydu ve sahada telefonla doldurulurken hata adini yazarken adet kutulari gorunmuyordu. */ /* Uc kutu TEK SATIRDA kalmali. `:last-of-type` burada ise yaramiyor (son td eylem hucresi), o yuzden hepsinde sag bosluk var ve genislik ona gore hesaplandi: 3x(%33,333-7px) + 3x6px kabin altinda kalir. */ table.kart.ozet td.kfSayi{display:inline-flex;flex-direction:column;align-items:stretch; width:calc(33.333% - 7px);margin:8px 6px 0 0;vertical-align:top} table.kart.ozet td.kfSayi::before{margin:0 0 3px} table.kart.ozet td.kfSayi input{width:100%} /* Checklist doldurma — SABIT ALT SERIT. 23 soruluk formda "kacindayim" bilgisi en ustte kaliyor, "Tamamla" ~5 ekran asagida. Kalite formundaki `.kfBar`in esi; yalniz mobilde. */ .clBar{display:flex;position:sticky;bottom:0;z-index:20;margin:14px -16px 0; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97);border-top:1px solid var(--line); align-items:center;gap:12px;flex-wrap:wrap} .clBar .oz{flex:1;min-width:130px;font-size:13px;color:var(--ink2)} /* ---- `kart ozet` — DAR tablolar icin sıkı varyant ---- Etiket/değer satırları 6 kolonluk bir listede kartı 240px yapıyordu; 48 kayıt = 11.700px kaydırma. Bu varyantta başlık üstte, kalan değerler ALTINDA TEK SATIRDA (sığmazsa alta sarar) — kart ~90px. Geniş tablolarda (7+ kolon) düz `kart` + "Ayrıntı" kullanılır. */ table.kart.ozet tr{padding:11px 12px} table.kart.ozet td{display:inline-flex;width:auto;align-items:baseline;gap:5px; padding:0;margin:5px 14px 0 0;border:none;text-align:left;font-size:13px} table.kart.ozet td+td{border-top:none} table.kart.ozet td:first-child{display:block;margin:0;font-size:15px;line-height:1.3} table.kart.ozet td[data-l]::before{content:attr(data-l);font-size:10px;color:var(--muted); text-transform:uppercase;letter-spacing:.4px;font-weight:600;flex:none} table.kart.ozet td.kartAc{display:block;margin:6px 0 0;padding:0;border-top:none} table.kart.ozet .kartAcBtn{min-height:44px;padding:11px 2px} /* `data-sade`: etiketi gereksiz alan (tarih tarih gibi, ad ad gibi gorunur). Etiket basilmaz, deger silik meta olarak akar. */ table.kart.ozet td[data-sade]{color:var(--muted);font-size:12.5px} table.kart.ozet td[data-sade]::before{content:none} /* `data-one`: karttaki ASIL sayi — buyuk ve koyu, meta satirinin basinda */ table.kart.ozet td[data-one]{font-size:16px;font-weight:700;color:var(--ink);margin-right:10px} table.kart.ozet td[data-one]::before{content:none} /* `data-eylem`: butonlarin oldugu hucre — kartin altinda tam genislik, cizgiyle ayrik. Ekranin ISI buysa (cihaz onayi, personel eslestirme) butonlar meta satirina karisip kaybolmasin. */ table.kart td[data-eylem]{display:block;width:auto;text-align:left; margin:9px 0 0;padding:9px 0 0;border-top:1px solid var(--line2)} table.kart td[data-eylem]::before{content:none} table.kart td[data-eylem] .link{margin-right:18px} /* Yonetim>Kullanicilar "Erisim" ozeti masaustunde 210px'te kesiliyor; kartta yer var, tamami gorunsun. */ table.kart .permsum{white-space:normal;flex-wrap:wrap} table.kart .permsum .txt{max-width:none;overflow:visible;text-overflow:clip;white-space:normal} /* Kullanıcılar: e-posta kısaltılmasın, aksiyonlar sola yaslansın */ .uEposta{white-space:normal;overflow:visible;overflow-wrap:anywhere} .uIslem{white-space:normal;text-align:left} /* Tavsiye tabloları: yapay alt genişlikler kalksın, ekrana sığsınlar */ .neyap{min-width:0} table.sigar{min-width:0!important} /* ---- Desen 2: `table.yapiskan` — ilk kolon sabit ---- Sayı ağırlıklı tablolar için (Hedef Takip, üretici karnesi, ısı tablosu). Bunlarda kart görünümü işe yaramaz: kıyas için satırların yan yana durması gerekiyor. Mağaza adı sabit kalır, sayılar altından kayar. */ table.yapiskan td:first-child,table.yapiskan th:first-child{ position:sticky;left:0;z-index:1;background:var(--surface); box-shadow:1px 0 0 var(--line)} table.yapiskan th:first-child{background:var(--surface2)} /* Acilir ayrinti satiri tum kolonlari kapsar (colspan); ilk hucre oldugu icin yukaridaki kural onu da sabitliyor ve yatay kaydirmada icerik yerinde cakiliyordu. Bu satir sabitlemenin disinda tutulur. */ table.yapiskan tr.hdDetay td{position:static;box-shadow:none;background:var(--surface2)} /* İKİ DESEN BİR ARADA (kalite raporu: `yapiskan krTablo kart ozet`, 28.09.2026): tablo kart olunca ilk hücrenin yapışkanlığı anlamsız, ama `box-shadow` çizgisi kalıyordu — her kartın sağ üstünde dikey bir çizgi. Kartta sabitleme kapatılır. */ table.kart.yapiskan td:first-child{position:static;box-shadow:none;background:transparent} /* Kartın ilk hücresi etiket taşıyorsa (Rapor dökümü: "Tarih") etiket değerin ÜSTÜNDE dursun — satır içindeyken "TARİH26.09.2026" diye yapışıyordu. */ table.kart.ozet td:first-child[data-l]::before{display:block;margin-bottom:2px} } /* Panel (modal): `88vh` iOS'ta adres çubuğu açıkken taşıyor, alttaki Tamam/Vazgeç butonları ekran dışında kalıyordu. `dvh` gerçek görünür yüksekliği verir. Ortalama `margin:auto` ile yapılır ki içerik uzun olduğunda üstten kırpılmasın. */ .ovl{overflow:auto;align-items:flex-start;overscroll-behavior:contain; padding-bottom:calc(20px + env(safe-area-inset-bottom))} .dlg{margin:auto 0;max-height:calc(88vh / var(--ekranZ,1));max-height:calc(88dvh / var(--ekranZ,1))} /* ---- Dokunmatik cihaz: parmak hedefleri ---- Taban 44px (Apple/Google önerisi). Masaüstünde hiçbiri geçerli değil. */ @media(pointer:coarse){ /* 16px'in altındaki alana odaklanınca iOS sayfayı yakınlaştırıp geri çıkmıyor — tüm form alanları 16px. */ select,input,textarea{font-size:16px} /* Tablo içindeki alanlarda satır içi `padding:6px` var ve 37-38px kalıyorlardı; taban yükseklik veriliyor. Kutucuklar hariç — onlar 44px olunca çirkinleşiyor (dokunma alanları zaten sarmalayan etiketten geliyor). */ select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=file]){min-height:44px} .seg button,.seg a{padding:12px 16px;font-size:14px} .seg.sub button,.seg.sub a{padding:12px 14px;font-size:13.5px} .yn{gap:12px} .yn button{padding:12px 26px;min-height:46px} button.btn{padding:15px 16px} .photobtn{min-height:44px;padding:11px 14px} .link{min-height:44px;display:inline-flex;align-items:center;padding:0 4px} .thumbx{min-height:44px;display:inline-flex;align-items:center;padding:0 8px} details.pierow>summary{padding:12px 0} /* Yetki anahtarı 40x22 idi; büyürken sağdaki sabit kolon da genişlemeli. Dokunma alanı 44px yüksekliğinde; görünen ray 30px kalıyor (i'ye üst/alt boşluk verilerek), yani göze aynı, parmağa büyük. */ .yrow{grid-template-columns:minmax(0,1fr) 52px} .sw{width:52px;height:44px} .sw i{top:7px;bottom:7px} .sw i:after{width:24px;height:24px} .sw input.swi:checked + i:after{transform:translateX(22px)} .sw.kismi i:after{transform:translateX(11px)} /* Başlık şeridi telefonda iki satıra iniyor (~99px) ve yapışkan olduğu için bu yer KALICI gidiyordu. 23 soruluk checklist ~5 ekran kaydırma demek; orada ekranın %12'sini marka bandına ayırmak pahalı. Mobilde yukarı kaydırınca gitsin — çıkış/şifre nadiren gerekiyor, başa dönünce orada. */ .top{position:static;padding-top:calc(10px + env(safe-area-inset-top)); padding-bottom:10px;margin-bottom:12px} } /* Dokunma geri bildirimi: mobilde `:hover` yok, basıldığı anlaşılmıyordu. */ tr.click:active td{background:var(--accent-soft)} button.btn:active{opacity:.85} .seg button:active,.seg a:active,.photobtn:active,.yn button:active,.link:active{opacity:.6} /* =================================================================== HEDEF TAKİP TABLOSU — başlık satırı + mağaza kolonu DONDURULUR (14.08.2026, kullanıcı isteği: "mobilde yana yatırıp bakmayayım") TUZAK: tablo eskiden `
` içindeydi ve başlığa `position:sticky;top:0` vermek İŞE YARAMIYORDU. Sebebi CSS kuralı: bir eksen `auto` olunca diğerindeki `visible` de `auto`ya döner, yani o div hem yatay hem DİKEY kaydırma kabı olur. Başlık o kabın tepesine yapışır, kabın yüksekliği de içerik kadar olduğu için sayfa kaydırılırken hiç görünmez. Çözüm: kaba açık bir yükseklik sınırı verip dikey kaydırmayı İÇERİ almak. */ .hdKaydir{overflow:auto;max-height:min(calc(72dvh / var(--ekranZ,1)),900px);-webkit-overflow-scrolling:touch} .hdTablo thead th{position:sticky;top:0;z-index:2;background:var(--surface2); box-shadow:0 1px 0 var(--line)} .hdTablo tbody td:first-child,.hdTablo thead th:first-child{ position:sticky;left:0;background:var(--surface);box-shadow:1px 0 0 var(--line)} .hdTablo tbody td:first-child{z-index:1} /* Köşe hücresi iki eksende birden sabit — ikisinin de üstünde kalmalı */ .hdTablo thead th:first-child{z-index:3;background:var(--surface2); box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)} /* Açılır SKOR ayrıntısı colspan'li tek hücre; ilk hücre olduğu için yukarıdaki kural onu da sabitler ve yatay kaydırmada çakılı kalırdı. */ .hdTablo tr.hdDetay td{position:static;box-shadow:none;background:var(--surface2)} .hdTablo th.hdSirala.on{color:var(--ink)} /* =================================================================== HEDEF TAKİP ÜST ÖZETİ — ÜÇ ŞERİT (17.08.2026 · kullanıcı düzeni) 1) BUGÜN · gerçekleşen + gün sonu tahmini 2) AY · MTD + adet + ay sonu forecast + HGO 3) DİĞER · LFL ciro/adet + ziyaretçi Her şerit tam genişlikte bir kart; içindeki hücreler eşit bölünür ve dar ekranda alt alta iner. Önce dört panel 2x2 duruyordu; kullanıcı "bugün / aylık / diğer" diye YATAY okumak istedi. Marka rengi: şerit başlıkları koyu lacivert (--navy) ve solda ince lacivert şerit. Rakamlar nötr kalıyor — vurgu başlıkta, sayıda değil. =================================================================== */ .hdOzet{display:grid;gap:12px;margin-bottom:14px} .hdBant{padding:0;overflow:hidden;border-left:3px solid var(--navy)} .hdBant .bUst{display:flex;justify-content:space-between;align-items:baseline; gap:10px;flex-wrap:wrap;padding:11px 16px 9px;border-bottom:1px solid var(--line); background:var(--surface2)} .hdBant .bBaslik{font-size:13px;font-weight:700;color:var(--navy); letter-spacing:.4px;text-transform:uppercase} .hdBant .bNot{font-size:12px;color:var(--muted)} /* Hücreler: eşit genişlik, aralarında ince ayraç */ .hdBant .bIc{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .hdBant .bHucre{padding:13px 16px 14px;min-width:0;border-left:1px solid var(--line)} .hdBant .bHucre:first-child{border-left:0} .hdBant .bEt{font-size:12px;color:var(--muted);font-weight:600; letter-spacing:.2px;margin-bottom:5px} .hdBant .bNo{font-size:26px;font-weight:700;line-height:1.12; letter-spacing:-.5px;white-space:nowrap} .hdBant .bAlt{font-size:12.5px;color:var(--muted);margin-top:3px} .hdBant .bGy{font-size:12.5px;color:var(--ink2);margin-top:7px; padding-top:7px;border-top:1px solid var(--line)} /* HGO çubuğu */ .hdBant .bBar{height:6px;border-radius:3px;background:var(--line); overflow:hidden;margin-top:7px} .hdBant .bBar i{display:block;height:100%;border-radius:3px} @media(max-width:560px){ /* Telefonda hücreler iki kolon; ayraç dikey yerine yatay olur */ .hdBant .bIc{grid-template-columns:1fr 1fr} .hdBant .bHucre{padding:11px 13px 12px;border-left:1px solid var(--line); border-top:1px solid var(--line)} .hdBant .bHucre:nth-child(odd){border-left:0} .hdBant .bHucre:nth-child(-n+2){border-top:0} .hdBant .bNo{font-size:21px} .hdBant .bUst{padding:10px 13px 8px} } /* =================================================================== BEST SELLER (public/js/bestseller.js) İki sekme aynı stilleri kullanır: "Best Seller" (detaylı, rakamlı) ve "Mağaza Listesi" (sade, rakamsız). Fark sütun sayısında ve fotoğraf ölçüsünde — düzen aynı kalsın ki iki ekran arasında geçen kişi yeniden yön bulmak zorunda kalmasın. ⚠️ TUZAK — `overflow-x:auto` kabında `position:sticky;top` çalışmaz (hedef takip ve kalite raporunda iki kez yaşandı). Burada tablo başlığı YAPIŞTIRILMIYOR: kartlar en fazla 10-20 satır, dikey kaydırma yok. Satır sayısı artarsa `.bsKaydir`e açık `max-height` verilmeli. =================================================================== */ .bsGrid{display:grid;gap:16px;align-items:start; grid-template-columns:repeat(auto-fit,minmax(420px,1fr))} /* ⚠️ 360px, 330 DEĞİL: 7 kolonlu tabloda sayısal kolonlar 210px yiyor; 330'da ürün+renk için 108px kalıyordu ve adlar 4-5 satıra iniyordu. 1600px kapta 4×360+3×12 = 1476px — dördü hâlâ yan yana sığıyor. */ .bsGrid.dort{grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:12px} /* ⚠️ MAĞAZA (SADE) GÖRÜNÜMÜ DAHA DAR: 420px, 7 kolonlu DETAYLI tablo için seçilmişti; sade görünümde 4-5 kolon var (# · foto · ürün · renk · S/T). ÖLÇÜLDÜ (tarayıcıda, 09.09.2026): 420 ile 1366px'te kap 1293 ve üç tablo 3×420+2×16 = 1292 ile **kıl payı** sığıyor; 1180px'te üçüncüsü alta iniyor. 320 ile 1180px'te de üçü yan yana (992 gerekiyor, kap 1112). 1024px'te ikisi yan yana kalıyor — daha da düşürmedik, ürün+renk kolonu okunmaz oluyor. `auto-fit` boş kolonu çökerttiği için geniş ekranda üçü kabı doldurur. */ .bsGrid.sade{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} .bsKart{overflow:hidden} .bsKart h3{margin:0;font-size:13.5px;font-weight:700;color:#fff; padding:13px 16px;line-height:1.35} .bsKart h3 span{display:block;font-size:11px;font-weight:500;opacity:.85;margin-top:3px} /* Dört tablo dört renk: göz hangi tabloya baktığını başlığa okumadan bilsin */ .bsKart.c1 h3{background:linear-gradient(135deg,var(--navy),var(--navy2))} .bsKart.c2 h3{background:linear-gradient(135deg,#166b40,#1f9254)} .bsKart.c3 h3{background:linear-gradient(135deg,#95291d,#c0392b)} .bsKart.c4 h3{background:linear-gradient(135deg,#41356f,#5b3fa8)} .bsKaydir{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ⚠️ `table-layout:fixed` — S/T KOLONU KAYBOLMASIN. Otomatik yerleşimde uzun ürün/renk adı kolonu genişletiyor, tablo kabı aşıyor ve `.bsKart{overflow:hidden}` en sağdaki S/T'yi kırpıyordu (kullanıcı 01.09.2026: *"bazen S/T'ler gözükmüyor, yazılar uzayınca özellikle erkek koleksiyonunda"*). Sabit yerleşimde sayısal kolonların eni garanti; uzun ad KIRPILMAZ, alt satıra iner — kullanıcı: *"kesinlikle kısaltma istemiyorum."* Genişlikler BAŞLIK SATIRINDAN okunur (fixed layout ilk satıra bakar). Sıra iki tabloda da aynı: 1 sıra · 2 fotoğraf · 3 ürün · 4 renk · 5 satış · (6 stok · 7 S/T). 3 ve 4 serbest — kalan yeri paylaşırlar. */ .bsKart table{width:100%;border-collapse:collapse;table-layout:fixed} .bsKart thead th:nth-child(1){width:26px} .bsKart thead th:nth-child(2){width:58px} .bsKart thead th:nth-child(5){width:52px} .bsKart thead th:nth-child(6){width:48px} .bsKart thead th:nth-child(7){width:58px} /* Uzun ad kolonu taşırmasın: gerekirse kelime içinden böl. Kırpma YOK. */ .bsKart td.ad,.bsKart td.renk{overflow-wrap:anywhere} /* Sabit kolonda iç `min-width` taşma yapar — esnek bırakıldı. */ .bsKart .bsSt{min-width:0;width:100%} .bsKart .bsBar{max-width:100%} /* İlk 40 görünümü kartları dar (minmax 330px) — sayısal kolonlar bir tık daha küçük, metne yer kalsın. Yine kırpma yok, satır sayısı artar. */ .bsGrid.dort .bsKart thead th:nth-child(1){width:22px} .bsGrid.dort .bsKart thead th:nth-child(2){width:50px} .bsGrid.dort .bsKart thead th:nth-child(5){width:46px} .bsGrid.dort .bsKart thead th:nth-child(6){width:42px} .bsGrid.dort .bsKart thead th:nth-child(7){width:54px} .bsGrid.dort .bsKart td{padding:6px 5px} .bsGrid.dort .bsKart td.renk{font-size:12px} .bsKart thead th{font-size:10px;text-transform:uppercase;letter-spacing:.06em; color:var(--muted);font-weight:600;padding:8px 7px;text-align:left; background:var(--surface2);border-bottom:1px solid var(--line)} .bsKart th.n,.bsKart th.r,.bsKart td.n{text-align:center} .bsKart tbody tr{border-bottom:1px solid var(--line2)} .bsKart tbody tr:last-child{border-bottom:none} .bsKart tbody tr:hover{background:var(--surface2)} /* Ölçüler bilerek dar: üç kart yan yanayken her kart ~450px kalıyor ve yedi kolonlu tablo oraya sığmayıp kartın içinde YATAY KAYDIRMA çıkarıyordu (kullanıcı 18.08: "alt tarafı sağa sola kaydırma var, o olsun istemiyorum"). Dolgu, sıra no, fotoğraf ve S/T genişliği kırpıldı -> tablonun en dar hâli ~516px'ten ~450px'e indi. Bir daha büyütürken üç kartlı görünümde ölç. */ .bsKart td{padding:6px 7px;vertical-align:middle;font-size:12.5px} .bsKart td.r{width:32px;text-align:center;font-size:14px;font-weight:700;color:var(--muted)} .bsKart.c1 td.r{color:var(--navy2)}.bsKart.c2 td.r{color:var(--ok)} .bsKart.c3 td.r{color:var(--no)}.bsKart.c4 td.r{color:#5b3fa8} .bsKart td.f{width:62px;padding:4px 5px;position:relative} .bsKart td.ad{font-weight:600;color:var(--ink);line-height:1.25} .bsKart td.ad em{display:block;font-style:normal;font-size:10.5px;font-weight:500; color:var(--muted);margin-top:2px} .bsKart td.ad i{font-style:normal;color:var(--ok);font-size:9.5px;font-weight:700; letter-spacing:.04em;margin-left:5px;vertical-align:1px} .bsKart td.renk{color:var(--ink2);font-size:12.5px;line-height:1.25} .bsKart td.n{font-variant-numeric:tabular-nums;color:var(--ink2);white-space:nowrap} .bsKart td.n.gucli{font-weight:700;color:var(--ink);font-size:13px} /* Fotoğraf. `object-fit:contain` şart: görseller dekupe ve en-boy oranları farklı; cover kullanılsa ürünün bir kısmı kırpılırdı. */ .bsFoto,.bsFotoK{object-fit:contain;display:block;background:var(--surface2); border-radius:6px;border:1px solid var(--line2)} .bsFoto{width:54px;height:66px;cursor:zoom-in;transition:.12s} .bsFotoK{width:52px;height:64px;cursor:zoom-in;transition:.12s} .bsFoto:hover,.bsFotoK:hover{border-color:var(--navy4);transform:scale(1.04)} .bsYok{border-style:dashed} .bsTem{position:absolute;left:9px;bottom:6px;background:rgba(21,24,28,.72); color:#fff;font-size:7.5px;letter-spacing:.03em;padding:1px 4px;border-radius:3px} /* S/T çubuğu */ .bsSt{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:44px} .bsSt b{font-size:11.5px;font-weight:600;color:var(--ink2)} .bsBar{width:40px;height:5px;border-radius:3px;background:var(--line);overflow:hidden} .bsBar i{display:block;height:100%;border-radius:3px;background:var(--ok)} .bsBar.dus i{background:var(--no)} .bsBosluk{padding:24px 16px;text-align:center;color:var(--muted);font-size:12.5px} /* Süzgeç paneli — masaüstünde açık, telefonda kapalı başlar (bkz. bestseller.js > BS.suzAcik). Açıkken ~400px yer kaplıyor ve telefonda ilk tablo ekran dışında kalıyordu; kalite raporundaki kuralın aynısı. */ .bsSuzgec{background:var(--surface);border:1px solid var(--line); border-radius:12px;box-shadow:var(--shadow);margin-bottom:14px} .bsSuzgec>summary{cursor:pointer;padding:11px 14px;font-size:13px;font-weight:600; color:var(--ink2);list-style:none} .bsSuzgec>summary::-webkit-details-marker{display:none} .bsSuzgec>summary::before{content:"▸ ";color:var(--muted)} .bsSuzgec[open]>summary::before{content:"▾ "} /* Acik suzgec sayaci: panel kapaliyken de gorunur. Dar ekranda cok secimli kutular hic cizilmiyor, orada tek isaret bu. */ .bsSuzSay{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px; background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700;letter-spacing:.02em} .bsSuzTemiz{display:flex;align-items:flex-end} .bsSuzTemiz button{border:1px solid var(--line);background:var(--surface); color:var(--ink2);border-radius:9px;padding:8px 13px;font:inherit;font-size:12.5px; font-weight:600;cursor:pointer} .bsSuzTemiz button:hover{background:var(--surface2)} .bsSuzIc{padding:2px 14px 14px;display:flex;flex-wrap:wrap;gap:12px 14px;align-items:flex-end} .bsBlok{min-width:0} .bsEt{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em; color:var(--muted);font-weight:600;margin-bottom:7px} .bsRozler{display:flex;flex-wrap:wrap;gap:6px} .bsRoz{border:1px solid var(--line);background:var(--surface2);color:var(--ink2); border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;font-weight:600; cursor:pointer;transition:.12s} .bsRoz:hover{background:var(--accent-soft);border-color:var(--navy4)} .bsRoz.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .bsRoz small{opacity:.65;font-weight:500;margin-left:5px} /* Renk filtresi rozetindeki renk noktası (29.09.2026). Kenarlık token — BEYAZ/EKRU noktası açık zeminde kaybolmasın, karanlıkta da çizgisi kalsın. */ .bsRoz .bsSw{display:inline-block;width:10px;height:10px;border-radius:50%; border:1px solid var(--line2);margin-right:6px;vertical-align:-1px} .bsSel{border:1px solid var(--line);border-radius:9px;padding:7px 10px; font:inherit;font-size:13px;background:var(--surface);color:var(--ink); max-width:260px} /* Çok seçimli açılır kutu. Tek seçimlikler yerleşik telefonda kullanılamıyor ve bu kuralı anlatamıyor). */ .bsDD{position:relative} .bsDDBtn{display:flex;align-items:center;gap:8px;border:1px solid var(--line); background:var(--surface);color:var(--ink);border-radius:9px;padding:7px 11px; font:inherit;font-size:13px;cursor:pointer;min-width:110px;justify-content:space-between} .bsDDBtn:hover{border-color:var(--navy4)} .bsDDBtn.dolu{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600} .bsDDBtn i{font-style:normal;opacity:.6;font-size:10px} .bsDDPanel{display:none;position:absolute;top:100%;left:0;z-index:40;margin-top:6px; background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px; min-width:210px;max-width:420px;max-height:320px;overflow:auto; box-shadow:0 18px 40px -14px rgba(16,24,40,.4);flex-wrap:wrap;gap:6px} .bsDD.ac .bsDDPanel{display:flex} .bsDDPanel::before{content:'Birden fazla seçebilirsin — bitince dışarı tıkla'; flex:0 0 100%;font-size:10.5px;color:var(--muted);margin-bottom:2px} .bsOzet{font-size:12.5px;color:var(--ink2);margin:0 0 12px} /* Büyük görsel */ .bsLb{position:fixed;inset:0;background:rgba(12,16,22,.88);display:none; align-items:center;justify-content:center;z-index:99;cursor:zoom-out;padding:32px} .bsLb.ac{display:flex} .bsLbKutu{background:var(--surface);border-radius:16px;padding:16px; max-width:min(620px,calc(92vw / var(--ekranZ,1)));cursor:default;text-align:center} .bsLb img{max-width:100%;max-height:calc(70vh / var(--ekranZ,1));object-fit:contain;border-radius:10px; background:var(--surface2);display:block} .bsLbBilgi{margin-top:12px;font-size:14px;font-weight:700;color:var(--ink)} .bsLbBilgi i{font-style:normal;color:var(--ok);font-size:11px} .bsLbBilgi span{display:block;font-weight:500;font-size:12.5px;color:var(--ink2);margin-top:3px} /* Checklist + kalite fotoğraf penceresi (29.09.2026 · checklist.js > clFotoBuyut). Boyutu JS hesaplar (döndürmede en/boy yer değiştirir) — kutu genişliği serbest; resim ile kabı (#clLbSar) satır içi ölçüyle gelir. */ .clLb .bsLbKutu{max-width:none} .clLbSar{display:flex;align-items:center;justify-content:center;margin:0 auto} .clLbSar img{transition:transform .2s ease} .clLbAlt{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;flex-wrap:wrap} .clLbAlt .bsLbBilgi{margin-top:0;text-align:left} .clLbDon{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px; border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--accent); font:inherit;font-size:13px;font-weight:600;cursor:pointer} .bsKapat{position:absolute;top:18px;right:24px;color:#fff;font-size:30px;line-height:1; opacity:.75;cursor:pointer;font-family:inherit;background:none;border:none} .bsKapat:hover{opacity:1} /* Dar ekranda tek tablo + üstte üç şıklı seçici. Telefonda üç tabloyu alt alta dizmek 60 satır kaydırmak demekti; kullanıcı "tek rapor, üstten haftalık/sezonluk/en kötü" istedi. Eşik `bestseller.js > BS_DAR` ile BİREBİR aynı olmalı (700px) — biri değişip diğeri kalırsa seçici çıkar ama tablolar yan yana kalır. */ .bsGrid.tek{grid-template-columns:1fr} .bsUc{display:flex;gap:0;margin-bottom:12px;background:var(--surface); border:1px solid var(--line);border-radius:10px;padding:3px;box-shadow:var(--shadow)} .bsUcBtn{flex:1;border:none;background:none;font:inherit;font-size:13px; font-weight:600;color:var(--ink2);padding:9px 6px;border-radius:7px;cursor:pointer} .bsUcBtn.on{background:var(--accent);color:var(--on-accent)} @media(max-width:700px){ /* Tek kolon: iki tablo yan yana sığmıyor, yatay kaydırma kötü okunuyor */ .bsGrid,.bsGrid.dort,.bsGrid.sade{grid-template-columns:1fr} .bsSuzIc{gap:12px 14px} .bsKart td{padding:7px 5px;font-size:13px} .bsKart thead th{padding:8px 5px} .bsSt{min-width:0} /* 🔴 TELEFONDA KOLON GENİŞLİĞİ PİKSEL DEĞİL YÜZDE (09.09.2026) Kullanıcı: *"ürün adı çok bölünüyor, Best Seller'da gördüm — `se / t / h` gibi yazıyordu."* Sebep ölçüldü: `table-layout:fixed` sabit piksel kolonlarla çalışıyordu ve **kabın eni tasarımın varsaydığından dar**. 375 px telefonda kart içi 341 px; sabit kolonlar 242 px alıyor, ürün ve renge **99 px kalıyor** (ikisi bölüşünce ~30 px = 4 harf). Tam ekranda felaket: sabitler `var(--bsZ)` ile büyüdüğü için %85 zoomda kalan 52 px (**10 px = 1 harf**), %100'de SIFIRIN ALTINA düşüyor — ekranda gördüğün `se/t/h` tam olarak buydu. ⚠️ Piksel yerine YÜZDE: toplam her zaman %100 olduğu için kolonlar kabı ASLA aşamaz, metin kolonu asla sıfıra inemez. Ekran genişliği ya da yakınlaştırma ne olursa olsun oran korunur. ⚠️ `--bsZ` artık kolon enini DEĞİL yalnız YAZIYI büyütür: telefonda yakınlaştırmak "harfler büyüsün, satır uzasın" demek — "isim kaybolsun" değil. Toplam: 6+15+30+19+11+9+10 = %100 */ /* ⚠️ RENK KOLONU TELEFONDA YOK — rengi ürün adının ALTINA yazıyoruz (`td.ad::after`, veri `data-renk`ten). Kullanıcı 09.09.2026: *"raporlar tek tek olmasına rağmen isim aşağı kayıyor."* Ölçüldü (`dbo.SalesItem`): model adı ortalama 7,3 harf, yalnız %10'u 13 harfin üstünde — AMA RENK adı ortalama 11,3 harf ve satırların %68'i 9 harfin üstünde. Yani saran şey renkti; iki kolon yan yana durdukça ikisi de sarıyordu. Renk kolonu kalkınca ürüne %46 (~150 px ≈ 21 harf) kalıyor: model adlarının %98'i tek satıra sığıyor, renk altta tek satır. Toplam: 6+16+46+12+9+11 = %100 (renk `display:none`). */ .bsKart thead th:nth-child(1), .bsGrid.dort .bsKart thead th:nth-child(1){width:6%} .bsKart thead th:nth-child(2), .bsGrid.dort .bsKart thead th:nth-child(2){width:16%} .bsKart thead th:nth-child(3), .bsGrid.dort .bsKart thead th:nth-child(3){width:46%} .bsKart thead th:nth-child(5), .bsGrid.dort .bsKart thead th:nth-child(5){width:12%} .bsKart thead th:nth-child(6), .bsGrid.dort .bsKart thead th:nth-child(6){width:9%} .bsKart thead th:nth-child(7), .bsGrid.dort .bsKart thead th:nth-child(7){width:11%} /* 5 kolonlu tablo (stok ve S/T yok): 8+20+52+20 = %100 */ .bsKart thead th:nth-child(3):nth-last-child(3){width:52%} .bsKart thead th:nth-child(5):last-child{width:20%} .bsKart thead th:nth-child(1):nth-last-child(5){width:8%} .bsKart thead th:nth-child(2):nth-last-child(4){width:20%} /* Renk kolonu gizli — başlığı da gizlenmeli, yoksa boş kolon kalır. */ .bsKart thead th:nth-child(4),.bsKart td.renk{display:none} .bsKart td.ad::after{content:attr(data-renk);display:block; font-size:11.5px;font-weight:500;color:var(--muted-aa); line-height:1.25;margin-top:2px;overflow-wrap:anywhere} /* 5 kolonlu tablo (Satış · İlk 10): stok ve S/T yok, o pay ürün ile renge gider. `:last-child` ile ayırt ediliyor — ayrı sınıf yok. */ /* Fotoğraf artık kendi kolonunu taşırmaz — kolon yüzde, görsel esner. */ .bsKart td.f,.bsGrid.dort .bsKart td.f{width:auto;padding:4px 3px} .bsGrid.dort .bsKart td{padding:7px 5px} .bsFoto,.bsFotoK{width:100%;max-width:56px;height:auto;aspect-ratio:54/66} /* Sayısal kolonlar dar: rakam sarmasın, satır yükselmesin. */ .bsKart td.n{white-space:nowrap;font-size:12.5px} .bsBar{width:100%;max-width:40px} } /* =================================================================== KALİTE KONTROL RAPORU — Tedarik → Rapor (tedarik.js > renderTedarikRapor · her kural `.krRapor` altında) 18.08.2026'da BAŞTAN yazıldı. Kullanıcı: "rezalet olmuş, hiç okunaklı değil, tipi falan aşırı yamuk, büyük küçük". Ölçüldü: sayfada 42 ayrı metin biçimi vardı. Üç sebep: 1) Bir oturum app.css'i kendi sürümüyle ezince bu bloğun tamamı kaybolmuştu — kartlar, sekmeler, süzgeç HİÇ stilsiz çiziliyordu. Sayfanın "rezalet" görünmesinin asıl sebebi buydu. 2) Ölçüsü verilmemiş düğmeler tarayıcı varsayılanına düşüp 13,3333px çıkıyordu; yanındaki metin 13px'ti. Gözle "yamuk" görünen buydu. 3) Rakamlar orantılı genişlikle diziliyordu: bir kolonda alt alta gelen 1'ler ve 7'ler farklı genişlikte olduğu için sayı sütunları kaymış görünüyordu. Artık `tabular-nums`. KURAL: bu bölümde satır içi `font-size` YAZILMAZ. Ölçek aşağıdaki tabloda tek yerde durur; yeni bir metin rolü gerekirse buraya eklenir. rol boyut / ağırlık --------------------- -------------------------- bölüm başlığı 14px / 650 başlık yanı açıklama 12px / 400 muted KPI etiketi 11px / 700 muted VERSAL KPI sayısı 25px / 700 ink KPI alt satırı 12.5px / 500 ink2 KPI kıyas satırı 11.5px / 400 muted tablo hücresi 13px / 400 ink2 hücre içi alt satır 11.5px / 400 muted sekme / düğme 13px / 600 =================================================================== */ .krRapor{ /* Rakamlar sabit genişlikte — kolonlar hizalansın */ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } /* =================================================================== OKUNAKLI RENK TOKENLARI — kalite raporu + ziyaret ekranı ORTAK Ölçüldü (18.08.2026): ev tokenları beyaz üstünde `--muted` 3,89:1 · `--ok` 3,96 · `--warn` 3,61 — üçü de WCAG AA eşiği 4,5'in ALTINDA. Bu iki ekran küçük punto ve gri yazı ağırlıklı olduğu için okunmuyordu. Değerler ölçümle bulundu, göz kararı seçilmedi: her ton, üstüne düştüğü ÜÇ zeminde birden (beyaz · --surface2 · kendi soft tonu) 4,5'i geçene kadar karartıldı. Ulaşılan kontrastlar: --muted #636b75 → 5,40 / 5,21 / 4,56 --ok #0c7f41 → 5,09 / 4,91 / 4,50 --warn #a26205 → 4,90 / 4,73 / 4,51 --no #c0392b → 5,44 / 5,25 / 4,74 (zaten geçiyordu, değişmedi) KAPSAM BİLEREK DAR: `:root` DEĞİŞTİRİLMEZ — öteki ekranların rengi aynı kalsın. Yeni bir ekran bu okunaklılığı isterse kabuğuna `tvEkran`/`krRapor` gibi bir sınıf verip buraya eklenir. =================================================================== */ .krRapor,.tvEkran{ --muted:#636b75; --ok:#0c7f41; --warn:#a26205; --navy3:#5777ab; } /* Kabuğun içindeki HER düğme ölçeğe bağlı: tarayıcı varsayılanı (13,3333px) hiçbir yere sızmasın. */ .krRapor button{font-family:inherit;font-size:13px;line-height:1.35} /* ---- Bölüm başlıkları ---- */ .krRapor .card h2{font-size:14px;font-weight:650;letter-spacing:-.1px;margin:0;color:var(--ink)} .krRapor h2.krEsnek{flex:1} .krRapor .krNot{font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0} .krRapor .card > .pad > .small.muted{font-size:12px;line-height:1.45;margin-top:4px} /* ---- Süzgeç şeridi ---- */ .krRapor .krFiltre{display:flex;gap:10px 12px;flex-wrap:wrap;align-items:flex-end} .krRapor .krFiltre > div{min-width:0} .krRapor .krFiltre label{display:block;font-size:10.5px;font-weight:700;color:var(--muted); text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;white-space:nowrap} .krRapor .krFiltre select,.krRapor .krFiltre input{font-size:13px;padding:8px 10px;max-width:190px} .krRapor .krFiltre button{padding:9px 14px} /* Süzgeç paneli katlanabilir. Telefonda ölçüldü: açıkken şerit 431px tutuyordu (812px ekranın yarısından fazlası), ilk KPI kartı ekran dışında kalıyordu. Özet satırı HER ZAMAN görünür. */ .krSuzgec > summary{list-style:none;cursor:pointer;display:flex;gap:12px; align-items:baseline;justify-content:space-between} .krSuzgec > summary::-webkit-details-marker{display:none} .krSuzgec > summary .sOzet{font-size:12.5px;color:var(--muted);min-width:0;line-height:1.5} .krSuzgec > summary .sOzet b{color:var(--ink);font-size:14px;font-weight:700} .krSuzgec > summary .sAcik{color:var(--accent);font-weight:600} .krSuzgec > summary .sAc{flex:none;font-size:11px;font-weight:700;color:var(--accent); text-transform:uppercase;letter-spacing:.4px} .krSuzgec > summary .sAc::after{content:" ▾"} .krSuzgec[open] > summary .sAc::after{content:" ▴"} .krSuzgec[open] > summary{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)} .krDikkatEt{display:inline-flex;align-items:center;gap:2px;background:var(--accent-soft); color:var(--accent-ink);border-radius:999px;padding:2px 4px 2px 10px;font-weight:600} .krRapor .krDikkatSil{background:none;border:none;color:var(--accent-ink);font-size:15px; line-height:1;cursor:pointer;padding:0 6px} /* ---- Alt sekmeler (hap biçiminde) ---- `.seg.sub` kullanılmadı: hemen üstte grup menüsünün kendi `.seg.sub` şeridi var, ikisi arka arkaya gelince hangisinin hangi düzeyde olduğu anlaşılmıyordu. */ .krSeg{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 16px} .krSeg button{border:1px solid var(--line);background:var(--surface);color:var(--ink2); font-weight:600;padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap} .krSeg button:hover{border-color:var(--navy4);color:var(--ink)} .krSeg button.on{background:var(--accent);border-color:transparent;color:var(--on-accent)} /* ---- KPI kartları ---- Taban 200px: 8 kart geniş ekranda 4+4 olarak iki düzgün satıra oturur. 176px'te 6+2 gibi tırtıklı satırlar çıkıyordu. */ .krKartlar{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-bottom:16px} /* Telefonda taban İKİ kolon: tek kolonda 8 kart alt alta 8 satır ediyor, rapora ulaşmak için yarım ekran kaydırmak gerekiyordu. */ @media(max-width:340px){.krKartlar{grid-template-columns:1fr}} /* Kolon sayısı AÇIK yazılıyor, `auto-fit` DEĞİL. Ölçüldü: 1440px'de auto-fit satıra 5 kart sığdırıyordu, 8 kart 5+3 diye tırtıklı iniyordu. Dörtlü ızgarada Özet'in 8 kartı 4+4 olarak iki düzgün satıra oturuyor. */ @media(min-width:760px){.krKartlar{grid-template-columns:repeat(3,1fr)}} @media(min-width:1040px){.krKartlar{grid-template-columns:repeat(4,1fr)}} .krRapor .krKart{display:flex;flex-direction:column;min-width:0;padding:14px} .krKart .kEt{font-size:11px;font-weight:700;color:var(--muted); text-transform:uppercase;letter-spacing:.4px;line-height:1.3;margin-bottom:7px} .krKart .kNo{font-size:25px;font-weight:700;line-height:1.1;letter-spacing:-.6px;color:var(--ink)} .krKart .kAlt{font-size:12.5px;font-weight:500;color:var(--ink2);margin:5px 0 8px;line-height:1.4} /* Kıyas satırı kartın DİBİNE yapışır (`margin-top:auto`): kartlar farklı yükseklikte olunca ince çizgiler farklı hizalarda duruyor, kart sırası bozuk görünüyordu. */ .krKart .kCizgi{border-top:1px solid var(--line);margin-top:auto;padding-top:8px; font-size:11.5px;color:var(--muted);line-height:1.4} /* ---- Tablolar ---- */ .krRapor td{font-size:13px;vertical-align:top} .krRapor th{font-size:11px;font-weight:700;letter-spacing:.4px} /* Hücre içindeki ikinci satır (kod, şehir, oran…) — TEK ölçü */ .krRapor td .small,.krRapor td div.small{font-size:11.5px;line-height:1.35;margin-top:2px} .krRapor td b{font-weight:600} .krSir{cursor:pointer;user-select:none;white-space:nowrap} .krSir:hover{color:var(--ink2)} .krSir.on{color:var(--accent)} /* TUZAK (hedef takipte yaşandı): `overflow-x:auto` olan bir kapta `position:sticky;top` ÇALIŞMAZ — bir eksen `auto` olunca diğeri de `auto` olur, kap içerik kadar yüksek olduğu için başlık hiç yapışmaz. Kaba açık yükseklik sınırı verilip dikey kaydırma içeri alınmalı. */ .krKaydir{overflow:auto;max-height:min(calc(74dvh / var(--ekranZ,1)),900px);-webkit-overflow-scrolling:touch} .krTablo thead th{position:sticky;top:0;z-index:2;background:var(--surface2); box-shadow:0 1px 0 var(--line)} /* ---- Aylık seyir grafiği ---- */ .krGrafik{width:100%;height:auto;display:block} /* ---- Üretici ayrıntı paneli ---- */ .krBaslik{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase; letter-spacing:.4px;margin-bottom:8px} .krSatir{display:flex;justify-content:space-between;gap:12px;font-size:12.5px; padding:5px 0;border-bottom:1px solid var(--line2);line-height:1.4} .krSatir > span{color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .krSatir b{white-space:nowrap;font-weight:700;color:var(--ink)} .krRapor .krSatirBtn{display:flex;justify-content:space-between;gap:12px;width:100%; font-size:12.5px;text-align:left;background:none;border:none; border-bottom:1px solid var(--line2);padding:6px 0;cursor:pointer;color:var(--ink2)} .krRapor .krSatirBtn:hover{color:var(--accent)} .krRapor .krSatirBtn > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---- "Dikkat gerektirenler" ---- */ .krRapor .krDikkat{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%; text-align:left;background:none;border:none;border-bottom:1px solid var(--line2); padding:10px 0;cursor:pointer;color:var(--ink2);font-weight:600} .krRapor .krDikkat:last-child{border-bottom:none} .krRapor .krDikkat:hover .dAd{color:var(--accent)} .krRapor .krDikkat .dNo{font-weight:700;font-size:17px;white-space:nowrap;line-height:1} /* ---- Karne rozeti ---- */ .krRozet{display:inline-block;min-width:24px;padding:2px 7px;border-radius:6px; color:#fff;font-weight:700;font-size:12px;text-align:center;line-height:1.5} /* ---- RET nedeni çubukları ---- */ .krCubuk{margin-bottom:11px} .krCubuk:last-child{margin-bottom:0} .krCubukUst{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;line-height:1.4} @media(max-width:700px){ .krRapor .krFiltre select,.krRapor .krFiltre input{max-width:none;width:100%} .krRapor .krFiltre > div{flex:1 1 46%} .krKart .kNo{font-size:22px} .krRapor .krKart{padding:12px} /* Isı tablosu ve döküm telefonda kart olmaz — kıyas için satırların yan yana durması gerekiyor. `table.yapiskan` deseni geçerli kalır. */ .krKaydir{max-height:min(calc(66dvh / var(--ekranZ,1)),700px)} .krSeg{gap:5px;margin:12px 0 14px} .krSeg button{padding:8px 12px;font-size:12.5px} } @media(max-width:560px){ /* Dar ekranda tarih aralığı özeti satırı ikiye bölüyordu */ .krSuzgec > summary .sTarih{display:none} } /* =================================================================== TEDARİKÇİ ZİYARETİ EKRANI — Tedarik → Ziyaret (tedarik.js > renderTedarik · `.tv*` önekli) 18.08.2026. Kullanıcı: "ne işlem yapacağımı seçip sonra forma geç diyorum ya, oraların renkleri falan aynı kötü duruyor." ASIL SORUN renk değil HİYERARŞİYDİ: "Ne yapılacak?" üç `btn.sec` düğmesiydi, seçili olan DOLU LACİVERT oluyordu — hemen altındaki "Konumu al ve kaydet" EYLEM düğmesi de dolu lacivert. Yani ekranda birebir aynı görünen iki düğme iki ayrı iş yapıyordu: biri bir seçim işaretliyor, öteki GPS alıp kayıt açıyor. Hangisine basılacağı görünüşten anlaşılmıyordu. KURAL: bu ekranda dolu lacivert YALNIZ eylem düğmesinde kullanılır. Seçimler açık renkli kutulardır (yuvarlak işaret + açıklama). Satır içi `font-size` ve `color` yazılmaz; ölçek burada tek yerde. =================================================================== */ .tvKayit h2{font-size:15px;font-weight:650;letter-spacing:-.1px;margin:0} .tvKayit .tvLead{font-size:12.5px;color:var(--muted);margin:4px 0 16px;line-height:1.45} .tvOpsiyon{font-weight:400;color:var(--muted)} /* ---- Alan ızgarası ---- */ .tvAlanlar{display:grid;gap:14px;grid-template-columns:1fr} @media(min-width:620px){.tvAlanlar{grid-template-columns:1fr 1fr}} .tvAlanlar input{width:100%;box-sizing:border-box} .tvBanner{margin:14px 0 0} /* ---- Lokasyon arama + açılır liste ---- */ .tvLokKutu{position:relative} .tvLokListe{display:none;position:absolute;z-index:30;left:0;right:0;top:100%;margin-top:4px; max-height:280px;overflow-y:auto;background:var(--surface);border:1px solid var(--line); border-radius:10px;box-shadow:0 8px 24px rgba(12,18,28,.16)} .tvLokListe.acik{display:block} .lokSat{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line2);font-size:13.5px} .lokSat:last-child{border-bottom:none} .lokSat:hover{background:var(--accent-soft)} .lokSat b{display:block;font-weight:600;color:var(--ink)} .lokSat i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:1px} .lokSat.yeni{color:var(--accent);font-weight:600} .lokBaslik{padding:6px 12px;background:var(--surface2);font-size:11px;font-weight:700; color:var(--muted);text-transform:uppercase;letter-spacing:.4px} .lokBos{padding:14px 12px;font-size:12.5px;color:var(--muted)} .tvLokBilgi{font-size:12px;color:var(--muted);margin-top:6px;min-height:17px} /* "+ YENİ KAYIT" seçilince açılan ad kutusu (28.09.2026) */ .tvYeniKutu{margin-top:8px} .tvYeniKutu input{width:100%;box-sizing:border-box;min-height:44px} .tvYeniKutu[hidden]{display:none} .tvSecildi{display:inline-block;background:var(--ok-soft);color:var(--ok);font-weight:700; font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:999px} /* ---- "Ne yapılacak?" — SEÇİM, eylem değil ---- */ .tvSecimAlan{margin:18px 0 0} .tvSecim{display:grid;gap:8px;grid-template-columns:1fr;margin-top:8px} @media(min-width:620px){.tvSecim{grid-template-columns:repeat(3,1fr)}} .tvSec{display:flex;align-items:flex-start;gap:10px;text-align:left;width:100%; font-family:inherit;font-size:13px;padding:11px 13px;cursor:pointer; background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--ink2)} .tvSec:hover{border-color:var(--navy4)} .tvSec .tvIsaret{flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%; border:2px solid var(--line);background:var(--surface)} .tvSec .tvSecMetin{min-width:0} .tvSec b{display:block;font-weight:600;color:var(--ink);line-height:1.3} .tvSec i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.3} /* Seçili: açık zemin + belirgin kenar. DOLU lacivert BİLEREK kullanılmadı — o görünüm yalnız eylem düğmesinin. */ .tvSec.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)} .tvSec.on .tvIsaret{border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--surface); background:var(--accent)} .tvSec.on b{color:var(--accent-ink)} /* ---- Tek eylem düğmesi ---- */ .tvEylem{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px} .tvEylem .btn{width:auto;padding:12px 22px} .tvMsg{font-size:12.5px;min-width:0} .tvHata{color:var(--no)} .tvOk{color:var(--ok)} .tvUyari{color:var(--warn)} .tvHata.b,.tvOk.b,.tvUyari.b{font-weight:700} .tvSilBtn{color:var(--no)} /* ---- Alt kartların başlıkları (ziyaret kayıtları / kalite raporları) ---- */ .tvEsnek{flex:1} @media(max-width:700px){ /* Dokunma hedefi: seçim kutuları parmakla basılıyor */ .tvSec{padding:13px 14px;min-height:52px;align-items:center} .tvEylem .btn{width:100%} .tvEylem{gap:8px} } /* --- SAHİP (master admin) hesabı · Yönetim → Kullanıcılar · 18.08.2026 --- Rozet ve kilitli satır. Karar SUNUCUDA (`korumali` alanı); buradaki görünüm yalnızca onu yansıtır — düğmeler kapalı olmasa da sunucu 403 döner. */ .uSahip{display:inline-block;margin-top:4px;font-size:10px;font-weight:700;letter-spacing:.5px; text-transform:uppercase;padding:2px 8px;border-radius:999px; background:var(--accent);color:var(--on-accent)} tr.uSahipSatir td{background:var(--surface2)} tr.uSahipSatir .uIslem{white-space:normal} /* =================================================================== YÖNETİM EKRANLARI · 18.08.2026 · masaüstü için sadeleştirme Kullanıcı: "yönetim ekranı çok karmaşıklaştı ve kalabalıklaştı; PC kullanımı için rahat, sade ve anlaşılır olsun." TEK DÜZEN, BEŞ SEKME: her sekmede üstte tek satır araç çubuğu (başlık + sayı + arama/süzgeç + tek birincil düğme), altında TEK kart içinde TEK tablo. Ekleme ve düzenleme formları sayfada durmaz, düğmeyle açılan pencereye (.dlg) taşındı. ⚠️ BİÇİM KURALI: bu ekranlarda satır içi `font-size` YAZILMAZ. Tip ölçeği aşağıdaki tabloda tek yerde durur (kalite raporundaki `.kr*` bloğuyla aynı disiplin). sayfa başlığı 17 / 700 sayfa açıklaması 12.5 / muted araç çubuğu alanları 13 tablo 13 · alt satır 12 rozet 10.5 / 700 / büyük harf =================================================================== */ .yntSayfa{display:flex;flex-direction:column;gap:14px} /* --- Araç çubuğu: başlık solda, eylemler sağda, tek satır --- */ .yntUst{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap} .yntUst .yntBas{flex:1;min-width:220px} .yntUst h2{margin:0;font-size:17px;font-weight:700;color:var(--ink);line-height:1.25} .yntUst h2 span{font-weight:500;color:var(--muted)} .yntUst .yntAlt{font-size:12.5px;color:var(--muted);margin-top:3px} .yntArac{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .yntArac input,.yntArac select{padding:9px 10px;font-size:13px;width:auto;min-width:150px} .yntArac input.ara{min-width:210px} .yntArac button.btn{width:auto;padding:9px 15px;font-size:13px;white-space:nowrap} /* --- Tablo kartı --- */ .yntKart{background:var(--surface);border:1px solid var(--line);border-radius:12px; box-shadow:var(--shadow);overflow:hidden} .yntKaydir{overflow:auto;max-height:calc(calc(100vh / var(--ekranZ,1)) - 260px)} .yntKaydir table{font-size:13px} /* Başlık satırı kaydırırken üstte kalır. ⚠️ `overflow:auto` olan bir kapta `position:sticky;top` ancak kabın yüksekliği sınırlıysa çalışır — bu yüzden yukarıda max-height var. */ .yntKaydir thead th{position:sticky;top:0;z-index:2;background:var(--surface); box-shadow:inset 0 -1px 0 var(--line)} .yntKaydir td{vertical-align:middle} .yntKaydir tr:last-child td{border-bottom:none} .yntSatir{cursor:pointer} .yntSatir:hover td{background:var(--surface2)} .yntAd{color:var(--ink);font-weight:600} .yntNot{font-size:12px;color:var(--muted);margin-top:2px;font-weight:400} .yntBos{padding:34px 18px;text-align:center;color:var(--muted);font-size:13px} .yntBos b{display:block;color:var(--ink2);font-size:14px;margin-bottom:4px} /* --- Rozetler: durum tek bakışta --- */ .yntRozet{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.3px; text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap; background:var(--surface2);color:var(--ink2);border:1px solid var(--line)} .yntRozet.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent} .yntRozet.bek{background:#fff4e6;color:var(--warn);border-color:transparent} .yntRozet.no{background:var(--no-soft);color:var(--no);border-color:transparent} .yntRozet.vur{background:var(--accent-soft);color:var(--accent);border-color:transparent} /* --- Pencere içi form: iki kolon, PC'de rahat --- */ .yntForm{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px} .yntForm .tam{grid-column:1/-1} .yntForm label.fl{margin-bottom:5px} .yntIpucu{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45} .yntAyrac{grid-column:1/-1;border-top:1px solid var(--line2);margin:2px 0 0} .dlg.genis{max-width:640px} /* --- Yetki ağacı: grup adı tıklanınca AÇILIR, anahtar ayrı --------- Grubu açmak yetki vermez; anahtar "hepsini seç / hiçbirini seçme" demektir. Eskiden alt sayfalar yalnız grup açıkken görünüyordu, tek bir sayfa vermek için önce hepsini açmak gerekiyordu. */ .ynmAc{display:flex;align-items:center;gap:8px;min-width:0;background:none;border:0; padding:0;font:inherit;cursor:pointer;text-align:left;color:inherit} .ynmAc .ynOk{color:var(--muted);font-size:11px;width:10px;flex:none} .ynmAc .ynSay{font-size:11.5px;color:var(--muted);font-weight:600;flex:none} .ynmAc:hover .ynm{color:var(--accent)} /* --- Kapsam kutusu: ekran yetkisi değil, VERİ sınırı --- */ .yntKapsam{margin-top:16px;padding:12px 14px;border:1px solid var(--line); border-radius:10px;background:var(--surface2)} .yntKapsam label.fl{margin-bottom:6px} /* --- Katlanır ikincil bölümler (ana işi bastırmasın) --- */ .yntKatla{border:1px solid var(--line);border-radius:12px;background:var(--surface)} .yntKatla>summary{cursor:pointer;padding:13px 16px;font-size:13px;font-weight:600; color:var(--ink2);list-style:none;display:flex;align-items:center;gap:8px} .yntKatla>summary::-webkit-details-marker{display:none} .yntKatla>summary::before{content:"▸";color:var(--muted);font-size:11px} .yntKatla[open]>summary::before{content:"▾"} .yntKatla>summary span{color:var(--muted);font-weight:500} .yntKatla>summary:hover{color:var(--ink)} .yntKatla .yntKaydir{max-height:340px;border-top:1px solid var(--line)} /* --- Satır sonundaki eylemler --- */ .yntIslem{white-space:nowrap;text-align:right} .yntIslem .link+.link{margin-left:12px} .yntIslem .link.sil{color:var(--no)} /* --- TOPLU YETKİ: seçim kolonu · şerit · geri alma (24.08.2026) ------- Kullanıcı: "hem pratik hem belirgin olsun ama aşırı kaba olmasın." Bu yüzden vurgu DOLGU RENKLE değil kenar + soluk zeminle yapılıyor; seçili satır accent zemin + sol kenar çizgisi, şeritler ince çerçeveli kart. Yeni renk tokenı EKLENMEDİ, hepsi mevcut değişkenler. */ .yntSecKol{width:38px;text-align:center;padding-right:0} .yntSecKol input{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--accent)} .yntSatir.secili td{background:var(--accent-soft)} .yntSatir.secili td:first-child{box-shadow:inset 3px 0 0 var(--accent)} .yntSerit{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px; padding:11px 14px;border:1px solid var(--line);border-radius:12px; background:var(--surface);box-shadow:var(--shadow);font-size:13px} .yntSerit b{color:var(--ink)} .yntSerit select{width:auto;min-width:210px;padding:8px 10px;font-size:13px} .yntSerit .btn{width:auto;padding:8px 16px;font-size:13px} .yntSerit.iyi{border-color:var(--ok);background:var(--ok-soft)} /* Cihazlar: "bu hesabin zaten N onayli cihazi var" uyarisi (08.09.2026). Renk tokenlardan gelir — karanlik temada da dogru tarafa duser. */ .yntSerit.bek{border-color:var(--warn-line);background:var(--warn-soft)} .yntUyari{font-size:12px;color:var(--warn);margin-top:2px;line-height:1.4} /* "N kişinin yetkisi tanımlanmamış" — süzgeç değil, tek tıkla hepsini seçen kısayol */ .yntCip{margin-bottom:12px} .yntCipDug{border:1px solid var(--line2);background:var(--surface);border-radius:99px; padding:7px 14px;font-size:12.5px;color:var(--ink2);cursor:pointer} .yntCipDug:hover{border-color:var(--accent);color:var(--accent)} .yntCipDug[data-acik]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)} .yntGeriList{border-top:1px solid var(--line);padding:4px 16px 12px} .yntGeriSat{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;font-size:12.5px} .yntGeriSat+.yntGeriSat{border-top:1px dashed var(--line)} .yntGeriSat>span:first-child{font-weight:600;color:var(--ink2)} /* --- Yönetim penceresi: ilk açılışta "bir tık sönük" duruyordu ------ (kullanıcı, 24.08.2026). Dolgu renk artırılmadı; başlık ve alt bant yüzey tonuyla ayrıldı, birincil düğme ağırlaştı, yetki ağacındaki sayaç rozete döndü. `.dlg.ynt` ile SINIRLI — kalite/tedarik pencereleri aynen kalsın diye. */ .dlg.ynt .dlg-h{background:var(--surface2);border-bottom-color:var(--line2)} .dlg.ynt .dlg-h h3{font-size:16px;font-weight:700;letter-spacing:-.1px} .dlg.ynt .dlg-f{background:var(--surface2);border-top-color:var(--line2)} .dlg.ynt .dlg-f .btn:not(.sec){font-weight:700} .dlg.ynt .ygrp{padding:10px 8px;border-radius:8px;margin:0 -8px} .dlg.ynt .ygrp:hover{background:var(--surface2)} .dlg.ynt .ynmAc .ynSay{background:var(--surface2);border:1px solid var(--line2); border-radius:99px;padding:1px 7px} .dlg.ynt .yrow.child{padding:2px 0} /* Dar ekran: araç çubuğu alt alta, tablo yüksekliği serbest */ @media(max-width:820px){ .yntUst{align-items:stretch} .yntArac{width:100%} .yntArac input,.yntArac select{flex:1;min-width:0} .yntKaydir{max-height:none} .yntKaydir thead th{position:static} .yntForm{grid-template-columns:1fr} } /* =================================================================== BEST SELLER · SUNUM MODU (satış toplantısı, projeksiyon) Kullanıcı 18.08.2026: *"tam ekranda herkesin net görebilmesi… tam ekranda sadece kategori değiştiririz artık diğerleri değişmez."* Kararlar: · Süzgeç paneli GİZLENİR. Sezon/cinsiyet/kanal toplantıdan önce seçilmiş oluyor; ekranda kalan tek seçim kategori. · Kategori ROZET olarak durur, açılır kutu değil — projeksiyonda açılan liste okunmuyor ve tıklaması iki adım. · Tek tablo, kocaman fotoğraf (bkz. `bestseller.js > bsTek`). · Yakınlaştırma `--bsZ` çarpanıyla: yalnız TABLO büyür. Tarayıcı zoom'u menüyü de büyütüp ekranı daraltıyordu. =================================================================== */ /* Başlıktaki düğme */ .bsTamEkran{margin-left:14px;vertical-align:middle;border:1px solid var(--line); background:var(--surface);color:var(--ink2);border-radius:9px; padding:6px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer} .bsTamEkran:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} /* Sunum kabı. Tam ekran API'si çalışmazsa da (izin yok, eski tarayıcı) bu sınıf tek başına yeterli düzeni veriyor. */ .bsSunum{--bsZ:1;background:var(--bg);overflow:auto;padding:0} /* Kenar boşlukları: sunumda ekranın her pikseli tabloya gitsin */ .bsSunum #bsPanel{display:none} /* normal filtre paneli sunumda yok — çubuktakini kullan */ /* ⚠️ PARMAKLA YAKINLASTIRMA (pinch) ICIN `touch-action` SART. Varsayilan `auto` iken iki parmak jestini TARAYICI kapiyor: sayfayi butun olarak buyutuyor ve bizim `touchmove`umuz HIC cagrilmiyor. Kullanici 01.09.2026: *"iki parmakla kucultme buyultme baslik kisimlarinda yapilmiyor"* — cubuk ve kart basliklari tam da bu yuzden. `pan-x pan-y`: normal kaydirma tarayicida kalir, pinch bize gelir. */ .bsSunum{touch-action:pan-x pan-y} .bsSunum #bsIcerik{padding:0 12px 14px} :fullscreen.bsSunum{width:calc(100vw / var(--ekranZ,1));height:calc(100vh / var(--ekranZ,1))} /* --- Üst çubuk: yapışkan, koyu lacivert --- */ .bsSBar{position:sticky;top:0;z-index:20;background:var(--navy);color:var(--on-accent); padding:9px 12px 8px;box-shadow:0 4px 18px -6px rgba(16,24,40,.5)} .bsSUst{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .bsSBaslik{font-size:calc(19px * var(--bsZ));font-weight:700;letter-spacing:.02em} .bsSSag{margin-left:auto;display:flex;align-items:center;gap:8px} .bsSDug{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1); color:var(--on-accent);border-radius:8px;font:inherit;font-size:16px;font-weight:700; width:34px;height:34px;cursor:pointer;line-height:1} .bsSDug:hover{background:rgba(255,255,255,.24)} .bsSZoom{font-size:14px;font-weight:600;min-width:52px;text-align:center; font-variant-numeric:tabular-nums} .bsSCik{width:auto;padding:0 16px;font-size:14px} /* Kategori rozetleri — tek satır, taşarsa yatay kayar */ .bsSKatlar{display:flex;gap:6px;margin-top:8px;overflow-x:auto;padding-bottom:2px} .bsSKatlar::-webkit-scrollbar{height:6px} .bsSKatlar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px} .bsSKat{flex:0 0 auto;border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08);color:var(--on-accent);border-radius:999px; padding:6px 14px;font:inherit;font-size:calc(14px * var(--bsZ)); font-weight:600;cursor:pointer;white-space:nowrap} .bsSKat:hover{background:rgba(255,255,255,.2)} .bsSKat.on{background:var(--on-accent);color:var(--navy);border-color:var(--on-accent)} .bsSKat small{opacity:.6;font-weight:500;margin-left:6px} /* Tam ekranda FILTRE PANELI — cubugun altina acilir, varsayilan KAPALI. 18.08'de sunumda panel tamamen gizlenmisti (projeksiyonda sade dursun). Dogruydu ama telefonda tam ekran tek gorunum haline geldi ve filtreye hic ulasilamiyordu (kullanici 01.09.2026: *"tam ekranda filtreler cikmiyor"*). Panel yine kapali basliyor; tek dokunusla aciliyor. */ .bsSFiltre{margin-top:10px;border-radius:10px;background:var(--surface);color:var(--ink)} .bsSFiltre .bsSuzIc{padding:12px} .bsSFil.on{background:var(--on-accent);color:var(--navy);border-color:var(--on-accent)} /* --- TELEFON: kontroller ust sag koseden ALT SERIDE (basparmak bolgesi) --- Kullanici 01.09.2026: *"tam ekran alinca devasa oluyor ve − kismina gitmek dert."* Ust sag kose tek elle ulasilmiyor; dugmeler alta sabitlendi ve dokunma hedefi 46px'e cikarildi. */ @media (max-width:700px){ .bsSunum .bsSSag{position:fixed;left:0;right:0;bottom:0;margin:0; justify-content:center;gap:10px; padding:9px 12px calc(9px + env(safe-area-inset-bottom)); background:var(--navy);z-index:40; /* ⚠️ `--navy` KARANLIKTA ACILIYOR — beyaz-seffaf kenarlik orada kaybolur. `color-mix` ile `--on-accent`ten turetiliyor, iki temada da dogru. */ border-top:1px solid color-mix(in srgb, var(--on-accent) 22%, transparent)} .bsSunum .bsSDug{width:46px;height:46px;font-size:20px} .bsSunum .bsSCik,.bsSunum .bsSFil{width:auto;padding:0 16px;font-size:15px} .bsSunum .bsSZoom{min-width:56px;font-size:15px} .bsSunum .bsSUst{gap:10px} /* Alt şerit içeriği kapatmasın. ⚠️ Şerit dar cihazda İKİ SATIRA inebiliyor (aşağıdaki `flex-wrap`), pay ona göre. */ .bsSunum #bsIcerik{padding-bottom:calc(104px + env(safe-area-inset-bottom))} /* 🔴 ALT ŞERİT: TUŞLAR ÜST ÜSTE BİNİYORDU (09.09.2026) Kullanıcı: *"tam ekran yapabildiğim raporlarda küçültme büyültme ve diğer tuşlar üst üste geliyor."* Ölçüldü (375 px): şerit `display:flex` idi ama **`flex-wrap` YOKTU**. İçerik Filtreler(106) + −(46) + %70(56) + +(46) + Çıkış(74) = 328, boşluklarla **368 px** — kaba (351) sığmıyor. Flex öğeleri varsayılan olarak KÜÇÜLDÜĞÜ için yazılı düğmeler kutularından taşıyor ve yan yana iki yazı üst üste biniyordu. İki katmanlı çözüm: (1) ölçüler bir tık kısıldı, 375'te tek satıra sığıyor; (2) `flex-wrap` ağ olarak duruyor — 320 px'lik cihazda ikinci satıra iner, ASLA üst üste binmez. ⚠️ Dokunma hedefi 44 px'in altına inmemeli (başparmak bölgesi). */ .bsSunum .bsSSag{flex-wrap:wrap;row-gap:8px;gap:8px} .bsSunum .bsSSag>*{flex:0 0 auto;white-space:nowrap;min-width:0} .bsSunum .bsSDug{width:44px;height:44px;font-size:19px} .bsSunum .bsSCik,.bsSunum .bsSFil{width:auto;padding:0 12px;font-size:14px;height:44px} .bsSunum .bsSZoom{min-width:48px;font-size:14px} } /* --- TABLOLAR: hepsi yan yana, boşluklar kısık, yazı/fotoğraf büyük --- Kullanıcı 18.08.2026: *"tam ekran modunda niye bölüyorsun raporu, ben 3 parçayı da görmek istiyorum, hatta 4 olanda 4'lü. Bölme onu. Aralardaki beyazları azalt, yazıları büyült, resimleri büyült."* Yani okunaklılık tabloyu BÖLEREK değil, ölü alanı kısıp içeriği büyüterek sağlanıyor. Kısılanlar: kart aralığı, kart iç dolgusu, hücre dolgusu, başlık yüksekliği. Büyütülenler: yazı, rakam, fotoğraf. Kolon sayısı `auto-fit` + zoom'a bağlı en az genişlik: yakınlaştırma arttıkça tablolar bir noktada alt satıra iner — yatay kaydırmaya düşmek yerine. 1920px'de zoom %100: üçü de yan yana. */ .bsSunum .bsOzet{display:none} .bsSunum .bsGrid{gap:10px;margin-top:10px; grid-template-columns:repeat(auto-fit,minmax(calc(430px * var(--bsZ)),1fr))} .bsSunum .bsGrid.dort{gap:8px; grid-template-columns:repeat(auto-fit,minmax(calc(330px * var(--bsZ)),1fr))} /* Kart başlığı: iki satırdan tek satıra, yüksekliği yarı yarıya indi */ .bsSunum .bsKart{border-radius:10px} .bsSunum .bsKart h3{font-size:calc(14.5px * var(--bsZ));padding:calc(8px * var(--bsZ)) 12px; line-height:1.25} .bsSunum .bsKart h3 span{font-size:calc(11px * var(--bsZ));margin-top:1px;opacity:.8} .bsSunum .bsKart thead th{font-size:calc(10.5px * var(--bsZ)); padding:calc(6px * var(--bsZ)) calc(7px * var(--bsZ));letter-spacing:.04em} /* Satırlar: dolgu kısık, YAZI BÜYÜK */ .bsSunum .bsKart td{font-size:calc(16px * var(--bsZ)); padding:calc(4px * var(--bsZ)) calc(7px * var(--bsZ))} .bsSunum .bsKart td.r{width:calc(34px * var(--bsZ));font-size:calc(17px * var(--bsZ))} .bsSunum .bsKart td.ad{font-size:calc(17px * var(--bsZ));font-weight:700;line-height:1.15} .bsSunum .bsKart td.ad em{font-size:calc(11.5px * var(--bsZ));margin-top:0} .bsSunum .bsKart td.ad i{font-size:calc(10px * var(--bsZ))} .bsSunum .bsKart td.renk{font-size:calc(14.5px * var(--bsZ));line-height:1.15} .bsSunum .bsKart td.n{font-size:calc(16px * var(--bsZ))} .bsSunum .bsKart td.n.gucli{font-size:calc(20px * var(--bsZ))} /* FOTOĞRAF — sunumun asıl kazancı. Dolgu 3px'e indi ki görsel büyüsün. */ .bsSunum .bsKart td.f{width:calc(96px * var(--bsZ));padding:calc(3px * var(--bsZ))} .bsSunum .bsFoto,.bsSunum .bsFotoK{width:calc(88px * var(--bsZ)); height:calc(108px * var(--bsZ));border-radius:5px} .bsSunum .bsTem{font-size:calc(8.5px * var(--bsZ));left:6px;bottom:4px} /* Sunumda yazı büyüdüğü için sayısal kolonlar da `--bsZ` ile ölçeklenir; yoksa %200 zoom'da "2.345" 58px'lik kolona sığmaz. */ .bsSunum .bsKart thead th:nth-child(1){width:calc(32px * var(--bsZ))} .bsSunum .bsKart thead th:nth-child(2){width:calc(96px * var(--bsZ))} .bsSunum .bsKart thead th:nth-child(5){width:calc(72px * var(--bsZ))} .bsSunum .bsKart thead th:nth-child(6){width:calc(62px * var(--bsZ))} .bsSunum .bsKart thead th:nth-child(7){width:calc(80px * var(--bsZ))} .bsSunum .bsSt{min-width:0;gap:2px} .bsSunum .bsSt b{font-size:calc(14px * var(--bsZ))} .bsSunum .bsBar{width:calc(58px * var(--bsZ));height:calc(6px * var(--bsZ))} /* Satır ayracı projeksiyonda kaybolmasın */ .bsSunum .bsKart tbody tr{border-bottom:1px solid var(--line)} /* Dört blok (İlk 40) daha dar kolona sığmalı — bir tık küçük */ .bsSunum .bsGrid.dort .bsKart td{font-size:calc(13.5px * var(--bsZ)); padding:calc(3px * var(--bsZ)) calc(5px * var(--bsZ))} .bsSunum .bsGrid.dort .bsKart td.ad{font-size:calc(14px * var(--bsZ))} .bsSunum .bsGrid.dort .bsKart td.renk{font-size:calc(12.5px * var(--bsZ))} .bsSunum .bsGrid.dort .bsKart td.n.gucli{font-size:calc(16px * var(--bsZ))} .bsSunum .bsGrid.dort .bsKart td.f{width:calc(70px * var(--bsZ))} .bsSunum .bsGrid.dort .bsFoto{width:calc(64px * var(--bsZ));height:calc(78px * var(--bsZ))} .bsSunum .bsGrid.dort .bsKart h3{font-size:calc(12.5px * var(--bsZ))} .bsSunum .bsGrid.dort .bsKart thead th:nth-child(2){width:calc(72px * var(--bsZ))} .bsSunum .bsGrid.dort .bsKart thead th:nth-child(5){width:calc(60px * var(--bsZ))} .bsSunum .bsGrid.dort .bsKart thead th:nth-child(6){width:calc(52px * var(--bsZ))} .bsSunum .bsGrid.dort .bsKart thead th:nth-child(7){width:calc(66px * var(--bsZ))} .bsSunum .bsGrid.dort .bsSt{min-width:0} .bsSunum .bsGrid.dort .bsBar{width:calc(44px * var(--bsZ))} /* =================================================================== 🔴 TAM EKRAN + TELEFON: KOLONLAR YÜZDE (09.09.2026) --------------------------------------------------------------------- Kullanıcı: *"ürün adı çok bölünüyor — `se / t / h` gibi yazıyordu."* Ölçüldü (375 px telefon, kart içi 341 px): `.bsSunum`ın sabit piksel kolonları `var(--bsZ)` ile büyüyor. Zoom %70'te ürün+renge 103 px kalıyor, **%85'te 52 px (kolon başına 10 px = 1 harf)**, %100'de toplam kabı AŞIYOR ve metin kolonları sıfıra iniyor. Ekrandaki harf harf bölünme tam olarak buydu. Yüzdeye çevrildi: toplam her zaman %100, kolon kabı aşamaz, metin asla sıfıra inmez. `--bsZ` artık telefonda yalnız YAZIYI büyütür — yakınlaştırmak "harfler büyüsün, satır uzasın" demek. Ölçüldü (yamadan sonra): 320 px'te ürün 76 px (~10 harf) · 375 px'te 92 px (~13 harf) · 5 kolonlu tabloda 120 px (~17 harf). ⚠️ BU BLOK NEDEN DOSYANIN SONUNDA: `.bsSunum .bsKart thead th:...` taban kuralları yukarıda ama DAHA SONRA geliyor; medya sorgusu özgüllük eklemediği için eşit özgüllükte olan sonraki kural kazanır. Kurallar yukarıya yazıldığında sessizce etkisiz kalıyordu. ⚠️ `.dort` (İlk 40) kuralları `.bsSunum .bsGrid.dort .bsKart ...` (0,4,2) ile daha güçlü — o yüzden her kural İKİ seçiciyle yazılı. =================================================================== */ @media(max-width:700px){ .bsSunum .bsGrid .bsKart thead th:nth-child(1), .bsSunum .bsGrid.dort .bsKart thead th:nth-child(1){width:6%} .bsSunum .bsGrid .bsKart thead th:nth-child(2), .bsSunum .bsGrid.dort .bsKart thead th:nth-child(2){width:16%} .bsSunum .bsGrid .bsKart thead th:nth-child(3), .bsSunum .bsGrid.dort .bsKart thead th:nth-child(3){width:46%} .bsSunum .bsGrid .bsKart thead th:nth-child(5), .bsSunum .bsGrid.dort .bsKart thead th:nth-child(5){width:12%} .bsSunum .bsGrid .bsKart thead th:nth-child(6), .bsSunum .bsGrid.dort .bsKart thead th:nth-child(6){width:9%} .bsSunum .bsGrid .bsKart thead th:nth-child(7), .bsSunum .bsGrid.dort .bsKart thead th:nth-child(7){width:11%} /* Renk kolonu burada da gizli; renk ürün adının altında. */ .bsSunum .bsGrid .bsKart thead th:nth-child(4), .bsSunum .bsGrid.dort .bsKart thead th:nth-child(4), .bsSunum .bsKart td.renk{display:none} .bsSunum .bsKart td.ad::after{font-size:calc(12px * var(--bsZ))} /* 5 kolonlu tablo: stok ve S/T yok, o pay ürün ile renge gider. */ .bsSunum .bsGrid .bsKart thead th:nth-child(3):nth-last-child(3), .bsSunum .bsGrid.dort .bsKart thead th:nth-child(3):nth-last-child(3){width:52%} .bsSunum .bsGrid .bsKart thead th:nth-child(5):last-child, .bsSunum .bsGrid.dort .bsKart thead th:nth-child(5):last-child{width:20%} /* Fotoğraf kendi kolonunu taşırmasın: kolon yüzde, görsel esner. */ .bsSunum .bsGrid .bsKart td.f, .bsSunum .bsGrid.dort .bsKart td.f{width:auto;padding:3px} .bsSunum .bsGrid .bsFoto,.bsSunum .bsGrid .bsFotoK, .bsSunum .bsGrid.dort .bsFoto,.bsSunum .bsGrid.dort .bsFotoK{ width:100%;max-width:calc(64px * var(--bsZ));height:auto;aspect-ratio:88/108} .bsSunum .bsGrid .bsKart td,.bsSunum .bsGrid.dort .bsKart td{padding:6px 4px} .bsSunum .bsGrid .bsBar,.bsSunum .bsGrid.dort .bsBar{ width:100%;max-width:calc(46px * var(--bsZ))} /* Telefonda iki tablo yan yana zaten sığmıyor. */ .bsSunum .bsGrid,.bsSunum .bsGrid.dort{grid-template-columns:1fr} } /* =================================================================== MOBİL — SON RÖTUŞLAR Bu blok bilerek DOSYANIN SONUNDA: yukarıdaki `.ynt* / .kr* / .tv*` aile kuralları sonradan tanımlandığı için özgüllükleri yüksek; dokunma hedefi düzeltmeleri ancak buradan ezilebiliyor. Hepsi `pointer:coarse` altında — masaüstü etkilenmez. =================================================================== */ @media(pointer:coarse){ /* Yönetim araç çubuğu: 39px'lik butonlar 44'e */ .yntArac button.btn{min-height:44px;padding:11px 15px} .yntArac input,.yntArac select{min-height:44px} /* Kalite raporu: alt sekme hapları 35px, süzgeç başlığı 21px kalıyordu */ .krSeg button,.krAlt button,.krSek button{min-height:44px;padding:11px 14px} .krDikkat{min-height:44px} /* Özet'teki 'dikkat gerektirenler' satırları */ .krSuzgec>summary{min-height:44px;display:flex;align-items:center} /* Satir ici `padding` ile kuculmus butonlar (donem cipleri, kucuk eylemler). `min-height` satir ici padding'den etkilenmez — tek kuralla hepsi 44px. */ button.btn,button.seg,.seg button,.seg a,.chip button{min-height:44px} select,input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea{min-height:44px} } /* =================================================================== KALİTE KONTROL FORMU — 20.08.2026 eklenen bölümler (tedarik.js > renderKaliteForm · `.kf*` ve `.tvYakin*`) Satır içi `font-size`/`color` yazılmaz; ölçek burada. =================================================================== */ /* ---- Ölçüm hatası: TOLERANS SIFIR ---- Ürün hataları AQL 1.5 tablosuna tabi, ölçüm hataları değil. İkisi tek tabloda gösterilince "3 minör / izin 3 / uygun" diye okunuyordu; oysa o üçü ölçü hatasıysa sonuç RET. Bu yüzden ayrı ve göze çarpan blok. */ .kfOlcum{border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:var(--surface2)} .kfOlcum.asti{border-color:var(--no);background:var(--no-soft)} .kfOlcumUst{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .kfOlcumAd{font-size:13px;font-weight:600;color:var(--ink);flex:1;min-width:0} .kfOlcumNo{font-size:20px;font-weight:700;line-height:1} .kfOlcum.asti .kfOlcumNo{color:var(--no)} .kfOlcumIzin{font-size:11px;font-weight:700;color:var(--muted); text-transform:uppercase;letter-spacing:.4px} .kfOlcumNot{font-size:12px;color:var(--ink2);margin-top:5px;line-height:1.4} .kfOlcum.asti .kfOlcumNot{color:var(--no)} /* ---- ARA KONTROL sonuç kutusu (18.09.2026) ---- Kullanıcı: "ara kontrolde okey ve ret sistemi yok, ARA KONTROL yazalım yerine." Kutu bilerek NÖTR: yeşil/kırmızı boyanırsa sahada yine bir karar gibi okunur. Final'in sonuç kartına dokunulmadı. Kontrast ÖLÇÜLDÜ (375px, tarayıcıda): başlık 17,18 · not 9,63. */ .kfAraSonuc{border:1px solid var(--line);border-radius:10px; padding:14px 16px;background:var(--surface2)} .kfAraSonucAd{font-size:26px;font-weight:800;letter-spacing:.5px;color:var(--ink)} /* Not satırı `--muted` DEĞİL `--ink2`: ölçüldü, ev `--muted`ı bu zeminde 3,75 kalıyor (AA 4,5'in altı). `--ink2` ile 8,9. */ .kfAraSonucNot{font-size:12.5px;color:var(--ink2);margin-top:4px;line-height:1.45} /* Yorum bölümünün ipucu satırı `.kfLead` ile aynı — ayrı token açılmadı */ /* ---- Ad soyad (imza kaldırıldı) ---- */ /* `--muted` DEĞİL `--ink2` (18.09.2026): ölçüldü, ev `--muted`ı kart zemininde 3,89 — AA'nın (4,5) altı. `--ink2` ile 9,6. Hex yazılmıyor, token kullanılıyor ki koyu temada da çevrilsin. */ .kfLead{font-size:12.5px;color:var(--ink2);margin:0 0 12px;line-height:1.45} .kfAdlar{display:grid;gap:12px;grid-template-columns:1fr} @media(min-width:620px){.kfAdlar{grid-template-columns:1fr 1fr}} .kfAdlar input{width:100%;box-sizing:border-box;padding:9px 11px;font-size:14px} /* Kilitli alan girdi GİBİ değil, okunur bir değer gibi durur — tıklanabilir sanılıp uğraşılmasın. */ .kfAdKilit{padding:9px 11px;background:var(--surface2);border:1px solid var(--line); border-radius:8px;font-size:14px;font-weight:600;color:var(--ink);min-height:40px} .kfAdNot{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.35} .kfAdNot.hata{color:var(--no);font-weight:600} /* ---- KALİTE FORMUNDA KONTRAST (18.09.2026) ---- Ev `--muted`ı (#7a828c) kart zemininde **3,89** — WCAG AA'nın (4,5) altı; formdaki ipucu ve "(isteğe bağlı)" satırlarının hepsi bu tonda. Kalite raporunda (`.krRapor`) ve Sorular ekranında aynı çözüm zaten uygulanmıştı; burada da YALNIZ BU EKRAN için koyultuldu. ⛔ `:root` DEĞİŞTİRİLMEZ — öteki ekranlar aynı kalsın. Ölçüldü (375px): beyaz üstünde 5,21 · `--surface2` üstünde 5,02. Koyu temada da ayrıca verildi, yoksa koyuda yazı KOYULAŞIRDI. */ #kfBody{--muted:#636b75} :root[data-theme="dark"] #kfBody{--muted:#a9b5c4} /* ---- Kontrol yeri: ara formunun ilk sorusu (18.09.2026) ---- Açılır liste DEĞİL, iki büyük düğme: sahada tek dokunuşla seçilmesi ve atlanmaması gereken bir soru. Telefonda alt alta, masaüstünde yan yana. Seçili olan dolu lacivert — bu ekranda dolu lacivert "seçili" demek (ziyaret ekranındaki kuralın aynısı). */ .kfYerSec{display:grid;gap:10px;grid-template-columns:1fr} @media(min-width:560px){.kfYerSec{grid-template-columns:1fr 1fr}} .kfYer{min-height:56px;padding:14px 16px;border:1px solid var(--line);border-radius:10px; background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600; cursor:pointer;text-align:left;line-height:1.35} .kfYer:hover{border-color:var(--navy4)} .kfYer:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* Yazı `#fff` DEĞİL `--on-accent`: koyu temada `--accent` açık maviye dönüyor, beyaz yazı üstünde kontrast 2,49'a düşüyordu (ölçüldü). */ .kfYer.secili{background:var(--accent);border-color:transparent;color:var(--on-accent)} /* ---- Önceki kontroller (18.09.2026'da baştan yazıldı) ---- Eski `.kfAra*` blokları kaldırıldı: bölüm artık tek bir ara kontrolü değil, o modeldeki BÜTÜN ara ve final kontrolleri listeliyor ve formun EN ÜSTÜNDE duruyor. Renkler `--warn`/`--ok` tokenlarından; hex yok (uyarı kutusunun zemini hariç — o da aydınlık/koyu tokenı olmadığı için `--warn-soft` ile veriliyor). */ .kfOncekiBos{font-size:12.5px;color:var(--ink2);padding:2px 0} .kfOncekiYok{border:1px solid var(--warn-line,#f0dcbc);background:var(--warn-soft,#fff4e6); border-radius:10px;padding:11px 13px;font-size:12.5px;color:var(--ink2);line-height:1.45} .kfOncekiYok b{display:block;font-size:11px;font-weight:700;color:var(--warn); text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px} /* `--muted` DEĞİL `--ink2`: 11px büyük harf, ev `--muted`ıyla 3,89 — AA'nın altı (ölçüldü 375px'te). `--ink2` ile 9,6. */ .kfOncekiGrup{font-size:11px;font-weight:700;color:var(--ink2);text-transform:uppercase; letter-spacing:.4px;margin:10px 0 6px} .kfOncekiGrup:first-child{margin-top:0} .kfOncekiGrup.bos{font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink2); font-size:12px} .kfOncekiSatir{border:1px solid var(--line);background:var(--surface2);border-radius:10px; padding:10px 12px;margin-bottom:8px} .kfOncekiUst{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:3px} .kfOncekiTur{font-size:11px;font-weight:700;letter-spacing:.4px;padding:2px 7px;border-radius:4px; background:var(--line2);color:var(--ink2)} .kfOncekiTur.fin{background:var(--accent-soft);color:var(--accent)} .kfOncekiKim{font-size:13px;color:var(--ink);line-height:1.45} .kfOncekiNot{font-size:12.5px;color:var(--ink2);line-height:1.45;margin-top:5px} /* Dokunma hedefi 44px: telefonda ölçüldü, 9px dolgu 38px veriyordu. 28.09.2026: düğme üst satırın sağına alındı (`margin-left:auto`) — altta ayrı satırken kayıt başına ~50px boşa gidiyordu. */ .kfOncekiAc{width:auto;display:inline-block;margin:0 0 0 auto;padding:12px 14px; text-decoration:none;font-size:13px;min-height:44px;box-sizing:border-box} /* Trim maddeleri (28.09.2026): satır 22px, kutu 16px'ti — sahada telefonla yan yana dokunuşta bir alttakini işaretliyordu. Tıklanan alan bütün satır (`label`), telefonda 44px. */ /* "Sesle yaz" (28.09.2026 · tedarik.js > kfSesBagla). Kutunun ALTINDA, 44px hedef. Dinlerken dolu vurgu — kişi mikrofonun açık olduğunu görsün. Renkler token; koyu temada `--accent` açılınca yazı `--on-accent`. */ .kfSes{display:inline-flex;align-items:center;gap:7px;margin-top:6px;min-height:44px; padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface); color:var(--accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .kfSes svg{flex:none} .kfSes.dinliyor{background:var(--accent);border-color:transparent;color:var(--on-accent)} /* Dinlenen kutu: kenarı vurgulu — canlı yazının nereye düştüğü belli olsun */ textarea.kfSesCanli{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)} .kfTrimSat{display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer} .kfTrimSat input{width:18px;height:18px;flex:none;cursor:pointer} @media(max-width:700px){ .kfTrimSat{min-height:44px;font-size:14px} .kfTrimSat input{width:22px;height:22px} } /* "Okudum" onayı — TEK kutu, kaç kontrol olursa olsun (kullanıcı kuralı). Kutunun kendisi 20px ama tıklanabilir alan bütün satır: `label` blok. */ .kfOncekiOnay{display:flex;align-items:center;gap:10px;margin-top:12px; padding:12px 13px;border:1px solid var(--line);border-radius:10px;cursor:pointer; font-size:13px;color:var(--ink);min-height:44px;box-sizing:border-box} .kfOncekiOnay input{width:20px;height:20px;flex:none;cursor:pointer} .kfOncekiOnay.eksik{border-color:var(--no);background:var(--no-soft);color:var(--no);font-weight:600} /* ---- Alt tedarikçi: yerinde yeni lokasyon ---- */ .kfAltYeni:empty{display:none} .kfAltForm{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .kfAltForm .kfAltAd{flex:1;min-width:150px;padding:8px 10px;font-size:13px} .kfAltForm .btn{width:auto;padding:8px 14px;font-size:13px} .kfAltMsg{font-size:12px;margin-top:5px;min-height:16px} .kfAltOk{font-size:12.5px;color:var(--ok);font-weight:600;margin-top:6px} /* ---- "Burada kayıtlı yer var" penceresi ---- Tamam/İptal yerine ne yapacağını yazan düğmeler; yakındaki kayıtlara doğrudan basılıp seçilebiliyor. (Eskiden bu soru İKİ kez soruluyordu.) */ .tvYakinDlg .dlg-b{display:grid;gap:8px;padding-top:12px} .tvYakinSat{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; text-align:left;font-family:inherit;font-size:13.5px;padding:11px 13px;cursor:pointer; background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--ink2)} .tvYakinSat:hover{border-color:var(--accent);background:var(--accent-soft)} .tvYakinAd{font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis} .tvYakinM{flex:none;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap} .tvYakinDlg .dlg-f{justify-content:flex-end} .tvYakinDlg .dlg-f .btn{width:auto;padding:10px 18px} @media(max-width:700px){ /* Dokunma hedefi tabanı 44px (Apple/Google). Ölçüldü 20.08.2026: yakın kayıt satırı 42px, ara kontrol PDF düğmesi 41px kalıyordu. */ .tvYakinSat{min-height:48px;padding:13px 14px} .kfAraDugme .btn{width:100%;min-height:46px} /* Alt tedarikçi formu 375px'te üç öğe tek satıra sıkışıyordu */ .kfAltForm{gap:8px} .kfAltForm .kfAltAd{flex:1 1 100%;min-height:44px} .kfAltForm .btn{flex:1;min-height:44px} } @media(max-width:560px){ .tvYakinDlg .dlg-f{flex-direction:column-reverse;align-items:stretch} .tvYakinDlg .dlg-f .btn{width:100%} } /* ---- İmza kutusu (27.08.2026 geri geldi, İSTEĞE BAĞLI) ---- 20.08'de kaldırılıp yerine ad soyad konmuştu; kullanıcı imzayı geri istedi ama zorunlu olmadan. Kutu bu yüzden "boş bırakılabilir" gibi duruyor: kesik çizgi, soluk yazı ve açıkça "(isteğe bağlı)" notu. Dolduğunda kenar düz çizgiye döner — bakınca atılmış mı belli olsun. */ .kfImzaKutu{position:relative;height:110px;margin-top:8px;cursor:pointer;overflow:hidden; /* Zemin HER TEMADA beyaz: imza siyah mürekkeple çiziliyor, koyu zeminde görünmezdi. Bu yüzden içindeki yazı da tokendan DEĞİL, sabit koyu tondan alınır — koyu temada `--muted` açılıp beyazın üstünde kayboluyordu (ölçüldü: 2,08). */ border:1px dashed var(--line);border-radius:8px;background:#fff; display:flex;align-items:center;justify-content:center} .kfImzaKutu:hover{border-color:var(--navy4)} .kfImzaKutu:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .kfImzaKutu.dolu{border-style:solid;border-color:var(--line)} .kfImzaBos{font-size:12.5px;color:#6b727c;text-align:center;padding:0 10px} .kfImzaBos i{font-style:normal;display:block;font-size:11.5px;margin-top:2px} .kfImzaGor{display:none;max-width:100%;max-height:100%;object-fit:contain} /* 🐞 18.09.2026 — GÖRÜNÜRLÜK ARTIK SINIFTAN SÜRÜLÜYOR. Önce JS `style.display=""` ile göstermeye çalışıyordu; bu satır içi stili SİLMEK demek, yukarıdaki `display:none` geri devreye giriyor ve atılan imza hiç görünmüyordu ("boş kaydediyorum gibi gözüküyor"). ⚠️ Bu iki satır silinirse hata geri gelir. */ .kfImzaKutu.dolu .kfImzaGor{display:block} .kfImzaKutu.dolu .kfImzaBos{display:none} /* "imzayı sil" düğmesi de aynı tuzağa düşmüştü — sınıfla sürülüyor */ .kfImzaSil{display:none;margin-top:6px;font-size:12px;color:var(--no)} .kfImzaSil.gorunur{display:block} @media(max-width:700px){ /* Parmakla imza atılıyor — kutu telefonda daha yüksek */ .kfImzaKutu{height:130px} .kfImzaSil{min-height:40px} } /* =================================================================== KONUM DENETİMİ (30.09.2026) — Kalite Kontrol > Konum Denetimi `tedarik.js > renderKonumDenetim`. Kabuk `.krRapor .kdnEkran`: kalite raporunun tip ölçeğini, KPI kartlarını ve süzgeç şeridini aynen kullanır; burada yalnız sayfaya özgü parçalar var. =================================================================== */ /* KARANLIK TEMA: `.krRapor,.tvEkran` okunaklı tonları AYDINLIK zemine göre karartılmıştı ve koyu temada da geçerliydi (koyu zeminde #636b75 gri). Koyu temada ev tokenlarına dönülür — kalite raporu ve ziyaret ekranı da bundan yararlanır. */ :root[data-theme="dark"] .krRapor,:root[data-theme="dark"] .tvEkran{ --muted:#93a0b2; --ok:#4ec27f; --warn:#e0a94a; --navy3:#4d6ea8} .kdnEkran .kdnBas{font-size:20px;font-weight:700;margin:0 0 12px;color:var(--ink)} .kdnEkran .kdnFiltre{margin-bottom:14px} .krRapor .krFiltre label.kdnSorunlu{display:flex;align-items:center;gap:8px;min-height:38px;margin:0; text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--ink2);white-space:nowrap} .kdnSorunlu input{width:18px;height:18px;margin:0} .krRapor .kdnYenile{width:auto;margin-left:auto} .kdnKart{margin-bottom:14px;overflow:hidden} .kdnKartBas{padding-bottom:10px} .kdnKaydir{overflow-x:auto} .kdnTablo{width:100%} .kdnTablo .kdnBos{padding:18px} .krRapor .kdnAc{display:inline-flex;align-items:baseline;gap:6px;background:none;border:none;padding:0; font-size:13.5px;font-weight:650;color:var(--ink);cursor:pointer;text-align:left} .krRapor .kdnAc:hover{color:var(--accent)} .kdnOk{font-size:11px;color:var(--muted)} .kdnSat.acik > td{background:var(--surface2)} .kdnDetay > td{background:var(--surface2);padding:12px 14px 16px} .kdnRozet{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700; white-space:nowrap;line-height:1.5} .kdnRozet.ok{color:var(--ok);background:var(--ok-soft)} .kdnRozet.warn{color:var(--warn);background:var(--warn-soft)} .kdnRozet.no{color:var(--no);background:var(--no-soft)} .krRapor .kdnNo{color:var(--no);font-weight:700} .krRapor .kdnWarn{color:var(--warn);font-weight:600} .kdnIc{display:flex;flex-direction:column;gap:12px} .kdnUst{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap} .kdnHaritaKap{flex:0 1 340px;min-width:0} .kdnHarita{display:block;width:100%;max-width:340px;height:auto;background:var(--surface); border:1px solid var(--line);border-radius:10px} .kdnSinir{fill:none;stroke:var(--navy3);stroke-width:1.2;stroke-dasharray:4 3} .kdnHass{fill:var(--accent-soft);fill-opacity:.55;stroke:none} .kdnKayitli{fill:var(--ink);stroke:var(--surface);stroke-width:1.5} .kdnNokta{stroke:var(--surface);stroke-width:1.5} .kdnNokta.tamam{fill:var(--ok)} .kdnNokta.uzak{fill:var(--no)} .kdnNokta.zayif{fill:var(--surface);stroke:var(--warn);stroke-width:2} .kdnOlcek{stroke:var(--ink2);stroke-width:2} .kdnOlcekYazi{fill:var(--muted);font-size:10px;font-family:inherit} .kdnLejant{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:11.5px;color:var(--muted)} .kdnLejant span{display:inline-flex;align-items:center;gap:5px} .kdnL{display:inline-block;width:10px;height:10px;border-radius:50%} .kdnL.kayitli{border-radius:1px;background:var(--ink)} .kdnL.tamam{background:var(--ok)} .kdnL.uzak{background:var(--no)} .kdnL.zayif{border:2px solid var(--warn);width:8px;height:8px} .kdnL.sinir{border:1.5px dashed var(--navy3);width:9px;height:9px} .kdnAciklama{flex:1 1 220px;min-width:0;font-size:12.5px;line-height:1.55;color:var(--ink2)} .kdnIcTablo{background:var(--surface);border-radius:8px} @media(max-width:700px){ .kdnDetay > td{padding:10px 0 4px} .kdnHaritaKap{flex-basis:100%} .kdnHarita{max-width:none} .krRapor .kdnYenile{margin-left:0} .krRapor .kdnAc{font-size:15px;min-height:32px} } /* =================================================================== KALİTE — ÇEVRİMDIŞI KAYIT (30.09.2026) · `tedarik.js > kfq*` İnternetsiz kaydedilen rapor ekranı, Ziyaret'teki bekleyenler şeridi, gönderim bildirimi. =================================================================== */ .kfqKart{margin-top:16px} .kfqKart h2{margin:8px 0 6px} .kfqKart .lead{margin:0 0 8px} .kfqEtiket{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700; letter-spacing:.4px;color:var(--warn);background:var(--warn-soft)} .kfqSatirOzet{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px} .kfqDugmeler{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px} .kfqDugmeler .btn{width:auto;min-height:44px} .kfqSerit{margin-bottom:14px;border-left:4px solid var(--warn)} .kfqUst{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px} .kfqUst .btn{width:auto;min-height:40px;padding:8px 14px} .kfqSat{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:9px 0; border-top:1px solid var(--line2)} .kfqSatAd{min-width:0;font-size:13.5px;color:var(--ink2)} .kfqSat .kfqSil{min-height:40px;flex:none} .kfqNot{color:var(--warn);font-weight:600} .kfqBildirim{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%); z-index:60;max-width:min(calc(92vw / var(--ekranZ,1)),520px);padding:12px 16px;border-radius:10px;background:var(--ink);color:var(--bg); font-size:13.5px;line-height:1.45;box-shadow:var(--shadow)} /* Yarım form taslağı (30.09.2026) — form açıkken aşağı çekip yenileme kapalı; sınıfı `tedarik.js` her dokunuşun başında koyar/kaldırır. */ html.kfFormAcik,html.kfFormAcik body{overscroll-behavior-y:contain} .kfTaslakKart{border-left-color:var(--accent)} .kfTaslakDug{display:flex;align-items:center;gap:8px;flex:none} .kfTaslakDug .btn{width:auto;min-height:40px;padding:8px 14px} /* ===== MAĞAZA SATIŞI DÖNEM LİSTESİ (02.10.2026) ===================== Kullanıcı: *"çok sıkışık olmuş liste, düzenleyelim."* Liste gruplu (Gün · Ay · Sezon · Yıl · Özel, `sales.js > drawPick`), kutu seçili dönemin adını kesmeyecek kadar geniş. Telefonda satırı doldurur. */ .slDonem{width:auto;padding:8px 10px;min-width:230px;font-size:14px} .slDonem optgroup{font-weight:600;font-style:normal;color:var(--muted-aa)} .slDonem option{font-weight:400;color:var(--ink);padding:7px 12px;line-height:1.6} @media (max-width:600px){ .slDonem{flex:1 1 100%;width:100%;min-width:0} }