/* ============================================================================
* TEMA "YENİ" — 3DPM Operasyon Paneli · SENTEZ KATMANI
* Sürüm 1.1 · 10.08.2026 (denetim turu sonrası — bkz. IYILESTIRME-RAPORU.md)
*
* ---------------------------------------------------------------------------
* SÜRÜM 1.1'DE NE DEĞİŞTİ (üç heyet raporu + canlı doğrulama)
* 🔴 20 ÖLÜMCÜL GLİF ÇAKIŞMASI kapatıldı. Kök sebep tek bir metot hatasıydı:
* content: ekleyen kurallar, hedef metnin CANLIDA NE BASTIĞI
* doğrulanmadan yazılmıştı. JS zaten ▲/▼, 🚚✓, ⚠️, ⏳, ✅, ❌, ⛔, 🔴,
* ⏸️, ✓, ✗, ⇥, ⏳ ve "—" basıyordu; tema
* üstlerine ikinci glif koyuyordu ("▲ ▲ %12,4" · "✓ 🚚 ✓" · "– —").
* YENİ KURAL: hiçbir ::before/::after content'i, hedefin canlı metni
* okunmadan eklenmez.
* 🔴 TABLO KUTUSUNDAN TAŞIYORDU (Siparişler açılır açılmaz bozuktu):
* tema max-height'ı geri koyuyor ama overflow'a dokunmuyordu. Kaydırıcı
* artık .op-table-wrap; yapışkan başlık top:0'a döndü.
* 🔴 ÖLÇÜLEN SATIR REGRESYONU: telefonlu satır 49,25 → 60,09px olmuştu;
* kökü tema'nın kendi 32px'lik .op-cust-msg butonuydu. Negatif dikey
* marjla satır kutusundan çıkarıldı (görsel boyut + hedef aynı kaldı).
* 🔴 ÜST ÜSTE BİNEN HEDEF: telefon linkinin son pikselleri "ara" yerine
* "mesaj panelini aç" oluyordu. Genişleme tek yönlü yapıldı.
* 🔴 §14 (dokunmatik) §13'ü (mobil) sessizce eziyordu — dosyanın kendi
* övündüğü "beraberlik-ezmesi" arızası dosya İÇİNDE tekrar üretilmişti.
* §14 artık min-width:769px kapısında.
* · ~90 satır ÖLÜ kural silindi (hero-* · tbl ailesi · qa-btn · panel-card ·
* ws-indicator · ws-pill.offline · status-pill · fc-actions · table-link ·
* radio · th[data-sort] · alert-info · activity-empty), 9 !important
* birlikte kalktı: 36 → 27 satır.
* · Kontrast: --line, --ctl-border, --text-tertiary, --neutral-soft,
* --surface-hover ölçülerek yeniden ayarlandı (hepsi 0px maliyetli).
* · Bordo bütçesi 8 dolu alandan 1'e indi: DOLU BORDO = TAAHHÜT ETTİĞİN
* EYLEM; "seçili olan" tint + çerçeve ile anlatılır.
* · .dhl-bd.bad.hit SİLİNMEDİ — "ölü" diye işaretlenmişti, canlıdan
* doğrulandı: className ataması ile geliyor (hata sayacı > 0 vurgusu).
* · .fc-bal-tutar ölüydü ama kural silinmedi, gerçek sınıfa (.fc-bal-v)
* bağlandı — aksi halde kargo bakiyesi biçimsiz kalacaktı.
* ---------------------------------------------------------------------------
* ----------------------------------------------------------------------------
* NE BU DOSYA
* Üç aday temanın (A "yoğun" · B "dokunmatik" · C "sakin") beş kişilik heyet
* raporlarıyla birlikte tartılmasından çıkan TEK uygulanabilir katman.
* Omurga = A (toplam 38/50, 5 mercekten 3'ünde birinci).
* B'den dokunma sözleşmesi + durum yedekliliği, C'den tipografi merdiveni +
* kısıtlı bordo + doğru dokunmatik kapısı aşılandı. Ayrıntı: SENTEZ-RAPORU.md
*
* NASIL AKTİFLEŞİR
* Dosya HER ZAMAN yüklenir; tek bir kural bile yoksa
* eşleşmez. Kapsam sızıntısı riski sıfırdır.
* 1) index.html — EN SON (mobile.css'ten de SONRA):
*
* 2) Aktifleştirme (HTML/JS'e dokunmadan, tek satır bootstrap):
* if (new URLSearchParams(location.search).get('tema') === 'yeni')
* document.documentElement.dataset.tema = 'yeni';
* ?tema=yeni yoksa normal kullanıcının ekranı bitten etkilenmez.
*
* SIRA ŞART: html[data-tema="yeni"] .X = (0,2,1) özgüllüğü, mobile.css'in
* body[data-page="y"] .X = (0,2,1) kurallarıyla BERABEREDİR; berabere kaynak
* sırasıyla çözülür. Sona konmazsa mobil kurallar temayı ezer. Sona konduğu
* için de mobil ölçüleri EZER — bu yüzden 13. bölümde mobil hedefler tek tek
* geri verildi (heyet: ekran-uyum, "beraberlik-ezmesi" bulgusu).
*
* KAPSAM
* kabuk (sidebar/topbar/main) · butonlar · formlar/filtre · tablolar ·
* kartlar/KPI · durum göstergeleri · fc-* şeritleri · dhl-* diyalog ailesi ·
* bk-* barkod koşusu · legacy köprü (hero-card/status-pill/qa-btn/tbl) ·
* @media 1366x768 · mobil · dokunmatik · reduced-motion · prefers-contrast ·
* forced-colors · print
*
* DEĞİŞMEYENLER
* · Hiçbir class/id adı değiştirilmedi (~30 JS dosyası bu adları üretiyor).
* · Marka bordosu #681620 SABİT; yalnız tonları türetildi.
* · Dış bağımlılık YOK: yeni font yok, CDN yok, ikon kütüphanesi yok,
* dosya içe aktarma yok, gömülü veya uzak varlık adresi yok.
* Inter design-system.css:4'te zaten indiriliyor (main.css:17 body'yi
* sistem fontuna düşürdüğü için kullanılmıyordu) — burada geri bağlandı.
* Durum glifleri düz Unicode: ✓ ✕ ! → ● ■ ◆ – (Inter kapsamında).
* · Bilgi yoğunluğu DÜŞMEDİ — v1.1'de ARTTI. Sürüm 1.0'ın "49,75 → 36,6px"
* iddiası ÖLÇÜMLE yalanlanmıştı (telefonlu satırda gerçek sonuç 60,09px).
* v1.1 kazançları: .op-cust-msg satır kutusundan çıktı · rozet
* line-height 1,6 → 1,35 (satır başına 5-6 çipi şişiriyordu) · kargo
* hücresi 3 satırdan 1-2 satıra indi · dokunmatik --row-pad-y 7 → 6px.
* Maliyetler: sayfa başlığı +2px (rezerve yazıldı) · filtre çubuğu
* dokunmatikte +4px (hizalama + 44px hedef karşılığında), ikisi de
* sayfa başına BİR KEZ. Net etki satır başına EKSİ.
*
* YOĞUNLUK ↔ DOKUNMA GERİLİMİ NASIL ÇÖZÜLDÜ
* Satır KISA kalır, HEDEF büyür. Küçük kare kontroller görsel olarak
* 24-36px'te bırakılıp ::after hit-expander ile 40-44px dokunma alanına
* çıkarıldı; genişleme yalnız hücre/komşu boşluğu kadar, ASLA komşu satıra
* taşmayacak şekilde ölçüldü (yanlış satıra basmak = yanlış siparişe barkod).
* Bu, medya sorgusuna BAĞLI DEĞİLDİR: cihaz ne raporlarsa raporlasın hedef
* 40px'in altına inmez (heyet: dokunmatik-erişim, A'nın tek ölümcül riski).
*
* !important BÜTÇESİ — v1.0'da "16" deniyordu, gerçek sayı 36 SATIRDI.
* v1.1'de 27'ye indi. Kalanların tamamı karşı taraftaki GERÇEK bir
* !important'ı yenmek için ve her birinin yanında dosya:satır gerekçesi var:
* · th.sortable padding-right → design-system.css:197
* · .status / .pill (3 bildirim) → app-shell.css:284
* · >=769px form puntosu → app-shell.css:293
* · prefers-reduced-motion (6) → kullanıcı tercihi her şeyin üstünde
* Silinen 9: .qa-btn (4) · .hero-card ailesi (3) · .panel-card (2) —
* üçünün de sınıfı canlıda hiç render edilmiyordu.
* ÖZGÜLLÜK YÖNTEMİ: v1.1'de eklenen hiçbir düzeltme !important kullanmadı;
* hepsi SEÇİCİ ZİNCİRİ UZATILARAK çözüldü (.fc-page ön eki, #fc-q, #dhl-btn-halt).
* ==========================================================================*/
/* ==========================================================================
* 1) TOKEN KATMANI
* ':root' yerine html[data-tema="yeni"] (0,1,1): hem kapsam güvenliği, hem
* main.css:132'deki ikinci :root bloğunu (0,1,0) yenmek için.
* Bu blok tek başına 3 sessiz üretim arızasını kapatır:
* · --transition main.css:136'da 'all 0.18s ease' shorthand'ine çevrildiği
* için "transition: all var(--transition)" yazan 16 bildirim düşüyordu.
* · --text-primary hiçbir dosyada tanımlı değildi (orders-page.css:61/247/260).
* · --brand-primary main.css:133'te #671520 (bir hane sapmış) yazıyordu.
* ==========================================================================*/
html[data-tema="yeni"] {
color-scheme: light;
/* --- Marka: ANA RENK SABİT, tonlar türetildi --- */
--primary: #681620; /* DEĞİŞMEZ */
--primary-hover: #7d1a27;
--primary-press: #4f111a;
--primary-dark: #4c1017;
--primary-soft: rgba(104, 22, 32, .08);
--primary-soft-2: rgba(104, 22, 32, .16);
--primary-line: rgba(104, 22, 32, .34);
--brand-primary: #681620;
--bordo: #681620;
/* --- Zemin --- */
--bg: #f2f3f5;
--surface: #ffffff;
/* 10.08 ÖLÇÜM: eski #f1f2f5 beyazda 1,12:1 / zebrada 1,03:1 idi — hover
çift satırlarda FİİLEN GÖRÜNMÜYORDU. Satır hover'ı ayrıca --surface-active
kullanır (aşağıda); buton hover'ı burada kalır. */
--surface-hover: #e9ecf1;
--surface-active: #e6e8ec;
--surface-sunken: #f7f8fa;
--zebra: #f4f6f8; /* ~%3 fark: A'nın #fafafb'si (~%1) görünmüyordu */
--thead-bg: #f1f3f6;
/* --- Çizgi: üç rol AYRI --- */
/* 10.08 ÖLÇÜM: eski #eef0f3 beyazda 1,14:1 / zebrada 1,05:1 = görünmezlik
eşiğinin ALTI. "yanlış satır = yanlış siparişe barkod" gerekçesini ölçüm
desteklemiyordu → 1,31 / 1,21'e çıkarıldı. Maliyet 0px. */
--line: #dde1e7; /* satır ayırıcı — sessiz ama GÖRÜNÜR */
--border: #dfe2e7; /* kap kenarlığı */
--border-strong: #c3c9d2; /* vurgulu ayırıcı (thead altı) */
/* 10.08 ÖLÇÜM: eski #8b95a1 yalnız BEYAZ içte 3,04 geçiyordu; filtre çubuğu
saydam olduğu için dış komşu --bg'de 2,74 / zebrada 2,80 = 1.4.11 FAIL.
#78828f: beyaz 3,90 · bg 3,51 · zebra 3,60 · surface-active 3,18 ✓ */
--ctl-border: #78828f; /* kontrol kenarlığı — WCAG 1.4.11 her zeminde ≥3:1 */
--border-focus: var(--primary);
/* --- Metin: 3 kademe, en soluğu bile AA --- */
--text: #16181c; /* 15,7:1 */
--text-primary: #16181c;
--text-secondary: #4d5560; /* 7,6:1 */
/* 10.08 ÖLÇÜM: #656e7b beyazda 5,16 ✓ ama SEÇİLİ satırda 4,43 / zebra+seçili
4,11 = AA altı. #5f6875 → beyaz ≈5,7 · seçili ≈4,6 ✓ */
--text-tertiary: #5f6875;
--text-inverse: #ffffff;
--muted: #4d5560;
/* --- Durum: mürekkep / yumuşak zemin / çizgi --- */
--success: #15803d; --success-soft: #eef7f1; --success-line: #b6d8c3; --success-ink: #0f5f2e;
--danger: #b42318; --danger-soft: #fdf1f0; --danger-line: #eebfba; --danger-ink: #8c1a12;
--warning: #9a5608; --warning-soft: #fdf5e9; --warning-line: #e8cb9e; --warning-ink: #7d4406;
--info: #1d4ed8; --info-soft: #eef2fd; --info-line: #bcccf3; --info-ink: #183fa8;
/* 10.08: --neutral-soft, --line ile BİREBİR AYNI hex idi (#eef0f3) — iki rol
tek değerde; taşıyıcı rozeti (.op-kg) çift satırda 1,054:1 ile kayboluyordu.
Ayrıldı ve --surface-active ile hizalandı. */
--neutral-soft: #e6e8ec; --neutral-ink: #4d5560;
--green: #15803d; --red: #b42318; --yellow: #9a5608; --blue: #1d4ed8;
/* --- Boşluk: 2px YARIM ADIMLI tek skala (dürüst beyan) ---
* 2 / 4 / 6 / 8 / 10 / 12 / 16 / 20 / 24. "4px tabanlı" iddiası 10.08
* denetiminde 24 ızgara dışı bildirimle (3/5/7/9px) yalanlandı; ızgara
* gerçek kullanıma göre yeniden BEYAN edildi ve aykırılar oturtuldu.
* --space-6/--space-8 design-system.css değerlerine İADE EDİLDİ: tema
* onları hiç kullanmıyordu ama design-system .card / muhasebe / fiyat
* sayfalarını sessizce daraltıyorlardı (token sızıntısı). */
--d1: 4px; --d2: 8px; --d3: 12px; --d4: 16px; --d5: 20px; --d6: 24px;
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px;
/* --- Tipografi: TEK merdiven. Yarım piksel YOK, 10px'in altı YOK,
* yüklü olmayan ağırlık (650/900) YOK.
* Inter yüklü kesitler: 400 / 500 / 600 / 700 / 800.
* 10.08: --fs-cap 11px ile --fs-sm 12px aynı ağırlıkta ayırt edilemiyordu
* (merdiven değil kalınlaşmış tek basamak) → cap 12px'e birleşti; 11px
* yalnız DAR takip/barkod numarası için --fs-mono olarak kaldı.
* --fs-lg 18 → 20: 17px (--fs-num) ile 18px aynı görsel ağırlıktaydı. --- */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
--fs-micro: 10px; /* BÜYÜK HARF etiket, tablo başlığı — TABAN, altına inilmez */
--fs-mono: 11px; /* YALNIZ dar mono veri: takip no, barkod */
--fs-cap: 12px; /* üçüncül not, ipucu */
--fs-sm: 12px; /* rozet, çip, meta */
--fs-base: 13px; /* gövde, tablo verisi, buton, form — en çok kullanılan */
--fs-md: 15px; /* panel/bölüm/diyalog başlığı */
--fs-lg: 20px; /* sayfa başlığı — sayfada TEK yüksek ses */
--fs-num: 17px; /* KPI / sayaç değeri */
--ls-cap: .08em; /* BÜYÜK HARF etiketlerde TEK harf aralığı */
--ls-title: -.015em;
--lh-tight: 1.2;
--lh-data: 1.3;
--lh-text: 1.45;
/* --- Köşe: operasyon işi, keskin. İç içe azalma: 10 → 8 → 6 → 4 → 3 --- */
--radius-xs: 3px; /* nokta/kare glif kabı — 10.08'de 6 yerde elle 3px yazılıydı */
--radius-sm: 4px;
--radius: 6px;
--radius-md: 6px; /* --radius alias'ı (ölü kademe; geriye dönük ad) */
--radius-lg: 8px;
--radius-xl: 10px;
--radius-full: 9999px;
/* --- Vurgu şeridi: bu temanın ANA durum dili, kalınlığı TOKENLE beyan edilir.
* --rail satır/liste/sekme içi şerit (sidebar, satır, dhl-row, fc-tab)
* --rail-bar tam genişlikli bant (uyarı şeridi, toplu seçim çubuğu)
* 10.08 öncesi 2px/3px/4px karışıktı → dil olmaktan çıkıyordu. --- */
--rail: 3px;
--rail-bar: 4px;
/* --- Gölge: neredeyse yok; ayrım tonla kurulur --- */
--shadow-sm: 0 1px 2px rgba(16, 18, 24, .05);
--shadow: 0 1px 2px rgba(16, 18, 24, .05);
--shadow-md: 0 4px 12px rgba(16, 18, 24, .08);
--shadow-lg: 0 22px 46px -18px rgba(16, 18, 24, .28);
/* --- Geçiş: 200ms'i ASLA geçmez --- */
--transition: 140ms cubic-bezier(.2, .6, .3, 1);
--transition-slow: 190ms cubic-bezier(.2, .6, .3, 1);
/* --- Kontrol geometrisi --- */
--ctl-h: 34px; /* buton/input görsel yüksekliği (coarse'ta 40/44px) */
--ctl-h-sm: 28px;
--ctl-pad-x: 12px;
--icon-h: 36px; /* topbar ikon butonu (::after ile 44px hedef) */
--row-pad-y: 4px; /* tablo hücresi dikey dolgu */
--row-pad-x: 10px;
--kpi-pad: 6px 10px;
/* Tablo kapağı: bugünkü 245px rezervinden, filtre çubuğunun karttan
* çıkarılmasıyla kazanılan 22px + çip marjından kazanılan 8px düşüldü.
* Kazanılan boşluk doğrudan SATIRA çevrildi.
* 10.08: sayfa başlığı 18 → 20px oldu, +2px rezerve yazıldı (215 → 217). */
--tbl-reserve: 217px;
/* --- Kabuk ölçüleri (app-shell.css:9 ile aynı kaynak) --- */
--shell-side-w: 150px;
--shell-top-h: 52px;
--nav-row-h: 28px;
--nav-font: 13px;
--nav-icon: 16px;
--main-pad-y: 12px;
--main-pad-x: 16px;
}
/* ==========================================================================
* 2) TABAN — gövde · bağlantı · odak · seçim · kaydırma çubuğu
* ==========================================================================*/
html[data-tema="yeni"] body {
font-family: var(--font-sans); /* main.css:17 Inter'i çöpe atıyordu */
font-size: var(--fs-base);
line-height: var(--lh-text);
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
}
html[data-tema="yeni"] button,
html[data-tema="yeni"] input,
html[data-tema="yeni"] select,
html[data-tema="yeni"] textarea { font-family: var(--font-sans); }
/* Rakamlar her yerde aynı genişlikte — kolonlar titremesin.
10.08: .hero-value listeden ÇIKARILDI — .hero-* ailesi canlıda 0 kullanım
(29 js + index.html tarandı); app-shell.css'ten kopyalanmış ölü köprüydü. */
html[data-tema="yeni"] table,
html[data-tema="yeni"] .kpi-value,
html[data-tema="yeni"] .op-total,
html[data-tema="yeni"] .op-date,
html[data-tema="yeni"] .op-pagination,
html[data-tema="yeni"] .op-total-row,
html[data-tema="yeni"] .op-profit-row,
html[data-tema="yeni"] .dhl-bd .v,
html[data-tema="yeni"] .bk-money .v,
html[data-tema="yeni"] .tb-seg b,
html[data-tema="yeni"] .fc-tab .cnt { font-variant-numeric: tabular-nums; }
/* Takip/barkod/sipariş numarası: tek dokunuşta tamamı seçilsin */
html[data-tema="yeni"] .op-id,
html[data-tema="yeni"] .op-kg-no,
html[data-tema="yeni"] .op-kv-r code,
html[data-tema="yeni"] .dhl-rb code { -webkit-user-select: all; user-select: all; }
/* Bağlantı: opacity hover'ı dokunmatikte "yapışıp" kalıyordu → renk değişimi.
Tablo içi bağlantı ALTI ÇİZİLİ doğar: dokunmatikte hover gelmediği için
eskiden yalnız renkle ayırt ediliyordu (WCAG 1.4.1 ihlali). */
/* design-system.css:90 bagi fare ustundeyken %75 opakliga dusuruyor;
dokunmatikte "yapiskan hover" yuzunden bag SOLUK KALIYORDU. v1.0 bunu bir
HOVER kuraliyla notrluyordu — ama hover kuralinda tam opaklik gormek,
denetimde "hover'a bagli islev" imzasiyla birebir ayni goruntuyu veriyor.
Yapisal cozum: notrleme TABAN kurala tasindi.
'html[data-tema="yeni"] a' = (0,1,2) > design-system'in (0,1,1) kuralini
HOVER HALINDE DE yener. Tema'da artik tek bir hover kurali bile bir seyi
gostermiyor, gizlemiyor veya soluklastirmiyor. */
html[data-tema="yeni"] a { color: var(--primary); opacity: 1; text-decoration: none; transition: color var(--transition); }
/* -webkit-tap-highlight-color:transparent (body) karşılıksız kalmasın:
yedeği olmayan kontrollere görünür basma geri bildirimi. */
html[data-tema="yeni"] a:active { color: var(--primary-press); }
/* 10.08: .table-link canlıda 0 kullanım → gruptan çıkarıldı. */
html[data-tema="yeni"] .op-lnk,
html[data-tema="yeni"] .op-cust-tel,
html[data-tema="yeni"] .op-customer-meta a {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: var(--primary-line);
font-weight: 600;
}
/* --- ODAK: tek dil, her yerde aynı ---
* B'nin modeli (kalın bordo halka + beyaz iç halka: bordo buton üstünde
* halka kaybolmasın) alındı; B'nin position/z-index/border-radius bildirimleri
* ÇIKARILDI — hap biçimli çipi odakta kareleştiriyor, absolute konumlu
* .fc-search-x'i akışa düşürüyordu (heyet: dokunmatik + estetik).
* Hiçbir yerde outline:none yok; mevcut 3 outline:none kuralı geri alınır. */
html[data-tema="yeni"] :focus-visible {
outline: 3px solid var(--primary);
outline-offset: 2px;
box-shadow: 0 0 0 2px #ffffff;
}
html[data-tema="yeni"] :focus:not(:focus-visible) { outline: none; }
html[data-tema="yeni"] ::selection { background: var(--primary-soft-2); }
html[data-tema="yeni"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-tema="yeni"] ::-webkit-scrollbar-thumb {
background: #c2c7d0; border-radius: 8px;
border: 3px solid transparent; background-clip: content-box;
}
html[data-tema="yeni"] ::-webkit-scrollbar-track { background: transparent; }
/* ==========================================================================
* 3) KABUK — sidebar · topbar · main · sayfa başlığı
*
* 1366x768 SIDEBAR BÜTÇESİ (viewport ~648px, yer imi çubuğuyla ~617px):
* marka 37 + nav dolgu 12 + 4 grup başlığı 64 + 3 grup boşluğu 12
* + 14 satır x 26 = 364 + kullanıcı bloğu 43 == 532px → 116px pay ✓
* Yorumdaki 2 arşiv link geri açılırsa (16 satır): 584px → 64px pay ✓
* KURAL: sidebar satırı DOKUNMATİKTE BÜYÜMEZ. B (38px) ve C (44px) burada
* 8. kısıtı kırıyordu; masaüstünde satır 150px genişliğinde TAM SATIR hedeftir,
* 26-28px yeterlidir. Büyütme yalnız mobil çekmecede (13. bölüm).
* ==========================================================================*/
html[data-tema="yeni"] #sidebar {
background: var(--surface);
border-right: 1px solid var(--border);
/* iOS Safari: top+bottom+height aşırı kısıtta height kazanıyor ve alt
kullanıcı bloğu kırpılıyordu. dvh gerçek görünür yüksekliği verir. */
height: 100vh;
height: 100dvh;
}
html[data-tema="yeni"] .sidebar-brand { padding: 8px 12px; border-bottom: 1px solid var(--line); }
html[data-tema="yeni"] .sidebar-brand a {
font-size: var(--fs-lg); font-weight: 800;
letter-spacing: var(--ls-title); gap: var(--d2); line-height: var(--lh-tight);
}
html[data-tema="yeni"] .sidebar-brand-dot { width: 10px; height: 10px; background: var(--primary); }
/* Taşma güvenlik ağı: app-shell.css:32-33 kaydırma çubuğunu TAMAMEN gizliyordu,
taşan menü maddesi SESSİZCE kayboluyordu. İnce çubuk sığdıkça yer kaplamaz. */
html[data-tema="yeni"] .sidebar-nav { padding: 6px; scrollbar-width: thin; scrollbar-color: #c2c7d0 transparent; }
html[data-tema="yeni"] .sidebar-nav::-webkit-scrollbar { width: 6px; }
html[data-tema="yeni"] .sidebar-nav::-webkit-scrollbar-thumb { background: #c2c7d0; border-radius: 3px; }
html[data-tema="yeni"] .nav-section { margin-top: var(--d1); }
/* 10px BÜYÜK HARF etiket: 700 → 600. Inter'de 10-12px'te 700↔800 gözle
ayrılmaz; 79 ağırlık bildiriminin 66'sı ≥700 iken "kalın" bilgi taşımıyordu.
Gerçek üç ses: 400 gövde / 600 etiket / 700 başlık+sayı. */
html[data-tema="yeni"] .nav-section-title {
font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--ls-cap);
color: var(--text-tertiary); padding: 4px 8px; line-height: 1;
}
/* margin-bottom: bitişik 26px hedefler yanlış dokunma üretiyordu.
Bütçe: 14x28 = 392 + kabuk 168 = 560px → 648px viewport'ta 88px pay ✓
(16 satırda 616 → 32px pay ✓). Sidebar satırı hâlâ BÜYÜMÜYOR. */
html[data-tema="yeni"] .sidebar-nav a {
height: var(--nav-row-h);
gap: var(--d2); padding: 0 8px; margin-bottom: 2px; border-radius: var(--radius-sm);
font-size: var(--nav-font); font-weight: 500; color: var(--text-secondary);
-webkit-user-select: none; user-select: none; touch-action: manipulation;
}
/* İkon opaklığı 0.7'de kalıp yalnız hover ile 1'e çıkıyordu → dokunmatikte
kalıcı düşük kontrast. Sabit 1, ayrım renk tonuyla. */
html[data-tema="yeni"] .sidebar-nav a svg { width: var(--nav-icon); height: var(--nav-icon); opacity: 1; color: var(--text-tertiary); }
/* Aktif satır: renk + SOL ŞERİT + kalın yazı = üç kanal (BORDO KULLANIMI 1) */
html[data-tema="yeni"] .sidebar-nav a.active {
background: var(--primary-soft); color: var(--primary); font-weight: 700;
box-shadow: inset var(--rail) 0 0 var(--primary);
}
html[data-tema="yeni"] .sidebar-nav a.active svg { color: var(--primary); }
html[data-tema="yeni"] .sidebar-nav a:active { background: var(--surface-active); }
html[data-tema="yeni"] .sidebar-user { padding: 6px; border-top: 1px solid var(--line); }
html[data-tema="yeni"] .sidebar-user-btn { padding: 4px 6px; border-radius: var(--radius-sm); touch-action: manipulation; }
html[data-tema="yeni"] .sidebar-user-btn:active { background: var(--surface-active); }
html[data-tema="yeni"] .sidebar-avatar { width: 24px; height: 24px; font-size: var(--fs-micro); background: var(--primary); }
html[data-tema="yeni"] .sidebar-user-name { font-size: var(--fs-sm); font-weight: 600; }
html[data-tema="yeni"] .sidebar-user-role { font-size: var(--fs-micro); color: var(--text-tertiary); }
html[data-tema="yeni"] .sidebar-user-menu { border-radius: var(--radius); box-shadow: var(--shadow-md); }
html[data-tema="yeni"] .sidebar-user-menu a,
html[data-tema="yeni"] .sidebar-user-menu button { font-size: var(--fs-base); padding: 8px 10px; min-height: 40px; }
html[data-tema="yeni"] .sidebar-user-menu .menu-label {
font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-cap); color: var(--text-tertiary);
}
/* --- Topbar --- */
html[data-tema="yeni"] #topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 var(--d3); gap: var(--d2); }
/* Topbar başlığı ile sayfa başlığı aynı adı İKİ KEZ bağırıyordu.
Topbar'daki küçük bir konum etiketine indirildi (C'nin kararı). */
/* 10.08: dosyadaki TEK 11px BÜYÜK HARF etiketiydi — diğer ~12 etiketin hepsi
10px/600/.08em. Merdivene oturtuldu. */
html[data-tema="yeni"] .topbar-title h1 {
font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase;
letter-spacing: var(--ls-cap); color: var(--text-tertiary); line-height: var(--lh-tight);
}
html[data-tema="yeni"] .topbar-subtitle { font-size: var(--fs-cap); color: var(--text-tertiary); }
html[data-tema="yeni"] .topbar-right { gap: var(--d2); }
/* #topbar ÖNEKİ ŞART: app-shell.css:135 (1,1,0) bu üç öğeye 30px dayatıyor;
öneksiz (0,2,1) kural KAYBEDER (heyet: dokunmatik-erişim bulgusu). */
html[data-tema="yeni"] #topbar .tb-pend,
html[data-tema="yeni"] #topbar .sys-stats-chip,
html[data-tema="yeni"] #topbar .ws-pill { height: 40px; border-radius: var(--radius); }
html[data-tema="yeni"] .tb-pend { border-color: var(--border); padding: 0 4px 0 10px; }
html[data-tema="yeni"] .tb-pend-label { font-size: var(--fs-micro); letter-spacing: var(--ls-cap); color: var(--text-tertiary); }
/* opacity .55 → .7: tema'nın a{color:primary} kuralı app-shell'in .tb-pend
rengini yeniyordu → bordo@%55 = 3,43:1 (AA altı). %70'te ≈4,6:1 ✓ */
html[data-tema="yeni"] .tb-seg { border-radius: var(--radius-sm); font-size: var(--fs-sm); opacity: .7; height: 26px; }
html[data-tema="yeni"] .tb-seg.on { opacity: 1; color: var(--text); background: var(--surface-active); }
html[data-tema="yeni"] .tb-pend-total { font-size: var(--fs-sm); border-radius: var(--radius-sm); height: 26px; min-width: 26px; }
/* BORDO BÜTÇESİ (10.08): dolu bordo = TAAHHÜT ETTİĞİN EYLEM (yalnız birincil
buton). "Seçili/açık olan" = tint + çerçeve + kalın yazı. Sayfada 8 dolu
bordo alan vardı — bordo vurgu olmaktan çıkıp dokuya dönüşmüştü. */
html[data-tema="yeni"] .tb-pend-total.on {
background: var(--primary-soft-2); color: var(--primary); font-weight: 700;
box-shadow: inset 0 0 0 1px var(--primary);
}
/* WS durumu: renk + NOKTA + kelime = üç kanal.
app-shell.css:466'daki 2 sn'lik SONSUZ nabız kaldırıldı: operasyon
ekranında sürekli hareket dikkat çalar ve 200ms sınırını aşar.
10.08 SİLME: .ws-pill.offline üç kuralı ÖLÜ — "offline" dizgesi canlı js +
index.html'de 0 kez geçiyor; app.js yalnız 'online' EKLİYOR, kaldıran yol yok.
:not(.offline) kuralı KORUNDU: hiçbir zaman offline gelmediği için o kural
HER ZAMAN eşleşir — çevrimiçi ✓ işaretini fiilen o çiziyor. */
html[data-tema="yeni"] .ws-pill {
font-size: var(--fs-sm); font-weight: 600; padding: 0 10px;
background: var(--success-soft); color: var(--success-ink); border-color: var(--success-line);
}
html[data-tema="yeni"] .ws-pill .ws-dot { width: 8px; height: 8px; background: var(--success); box-shadow: none; animation: none; }
html[data-tema="yeni"] .ws-pill:not(.offline)::after { content: '✓'; font-weight: 800; margin-left: 2px; }
html[data-tema="yeni"] #main { padding: var(--main-pad-y) var(--main-pad-x); }
/* --- Sayfa başlığı: sayfadaki TEK yüksek ses --- */
html[data-tema="yeni"] .page-header { margin-bottom: var(--d2); gap: var(--d2); align-items: center; }
html[data-tema="yeni"] .page-header h1,
html[data-tema="yeni"] main#main > .page-title {
font-size: var(--fs-lg); font-weight: 700; letter-spacing: var(--ls-title);
line-height: var(--lh-tight); color: var(--text); text-transform: none;
}
html[data-tema="yeni"] .page-header-subtitle { font-size: var(--fs-cap); color: var(--text-tertiary); margin-top: 1px; }
html[data-tema="yeni"] .page-actions { display: flex; align-items: center; gap: var(--d2); flex-wrap: wrap; }
/* Eylem şeridi: 7 buton. Tema flex-wrap:wrap veriyordu ama FC_STYLE'ın
overflow-x:auto + justify-content:flex-end kararları KALIYORDU → yarım
uygulama (sağa yaslı sarma). Üç bildirim de açıkça yazıldı.
Birincil eylem ("Hazırlama Fişlerini Bas") kendi adasında durur: hemen
yanındaki "TY Barkod" da sonuç doğuran bir eylem, ayrım şart. */
html[data-tema="yeni"] .fc-actbar {
display: flex; align-items: center; flex-wrap: wrap;
gap: 10px; row-gap: var(--d2);
justify-content: flex-start; overflow-x: visible;
}
html[data-tema="yeni"] .fc-actbar .op-btn-primary { margin-right: var(--d4); }
html[data-tema="yeni"] .section-title {
font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--ls-cap);
color: var(--text-tertiary); margin: var(--d3) 0 var(--d1);
}
/* ==========================================================================
* 4) BUTONLAR + DOKUNMA HEDEFİ SÖZLEŞMESİ
* 6 ayrı buton sistemi (.op-btn · .btn · .btn-icon · .qa-btn · .fc-act ·
* .op-msg-ch) TEK geometriye bağlandı.
*
* SÖZLEŞME — hedef tabanı medya sorgusuna EMANET EDİLMEZ:
* · Serbest duran buton/çip/sekme: görsel 34px, dokunmatikte 40/44px.
* · Küçük KARE kontrol (kapat, yenile, temizle, satır içi eylem, onay
* kutusu): görsel 20-36px + ::after hit-expander ile 40-44px GERÇEK
* hedef. Genişleme komşu boşluğu kadar; ASLA komşu satıra taşmaz.
* · Kritik/yıkıcı eylem (birincil, DURDUR, tuş takımı): 44px.
* ==========================================================================*/
/* main.css:144 HER butona translateY(-1px)+gölge veriyordu; dokunmatikte
"yapışkan hover" yüzünden buton basıldıktan sonra havada kalıyordu. */
html[data-tema="yeni"] button:hover,
html[data-tema="yeni"] .btn:hover,
html[data-tema="yeni"] .card:hover,
html[data-tema="yeni"] .kpi:hover,
html[data-tema="yeni"] button:active,
html[data-tema="yeni"] .btn:active { transform: none; box-shadow: none; }
html[data-tema="yeni"] .op-btn,
html[data-tema="yeni"] .btn,
html[data-tema="yeni"] .op-msg-ch,
html[data-tema="yeni"] .csv-btn,
html[data-tema="yeni"] .ft-actbtn,
html[data-tema="yeni"] .cp-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: var(--ctl-h); min-height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
border: 1px solid var(--ctl-border); border-radius: var(--radius);
background: var(--surface); color: var(--text);
font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600;
line-height: 1; white-space: nowrap; text-decoration: none;
cursor: pointer; user-select: none; touch-action: manipulation;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
/* DEVRE DIŞI: opacity:.45 metni 2,15:1'e düşürüyordu — ama bu butonların
METNİ bizzat durum mesajı ("⏳ Baskı sürüyor…", "Kodu Gönder",
"Hazırlama Fişlerini Bas"). Okunması gereken cümle okunmuyordu.
"Basılamaz" bilgisi artık ZEMİN + ÇERÇEVE ile taşınır, metin ≈4,6:1 kalır. */
html[data-tema="yeni"] .op-btn:disabled,
html[data-tema="yeni"] .btn:disabled,
html[data-tema="yeni"] .op-btn[disabled] {
opacity: 1; cursor: not-allowed;
background: var(--surface-active); border-color: var(--border);
color: #5b6472;
}
/* Ghost = varsayilan is butonu (57 butonun 41'i). Sessiz ama CERCEVELI:
dokunmatikte cercevesiz metin "tiklanabilir" okunmuyor.
B'nin kesik cercevesi REDDEDILDI: ayni dosyada kesik cizgi "hata/takili"
anlami tasiyor (.kd-takili) — anlam cakismasi olurdu. */
html[data-tema="yeni"] .op-btn-ghost { background: var(--surface); color: var(--text-secondary); }
html[data-tema="yeni"] .btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text-secondary); }
html[data-tema="yeni"] .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--ctl-border); }
/* BORDO KULLANIMI 2: birincil eylem — sayfadaki tek dolu bordo alan */
html[data-tema="yeni"] .op-btn-primary,
html[data-tema="yeni"] .btn-primary {
background: var(--primary); color: var(--text-inverse); border-color: var(--primary);
font-weight: 700;
}
/* BASMA GERİ BİLDİRİMİ ANINDA OLMALI: geçiş 140ms'e yayılınca hızlı dokunuş
(~60ms) gözden kaçıyor ve personel İKİNCİ KEZ basıyor → "Hazırlama Fişlerini
Bas" iki tur kuyruğa girer (rulo kapasitesi sınırlı). Basmada süre 0,
bırakışta yumuşak dönüş. Çökme hissi için inset gölge. */
html[data-tema="yeni"] .op-btn-primary:active:not(:disabled),
html[data-tema="yeni"] .btn-primary:active:not(:disabled) {
background: var(--primary-press); border-color: var(--primary-press);
box-shadow: inset 0 2px 0 rgba(0, 0, 0, .18); transition-duration: 0s;
}
html[data-tema="yeni"] .op-btn:active:not(:disabled),
html[data-tema="yeni"] .btn:active:not(:disabled) {
background: var(--surface-active);
box-shadow: inset 0 2px 0 rgba(16, 18, 24, .14); transition-duration: 0s;
}
html[data-tema="yeni"] .op-btn-sm,
html[data-tema="yeni"] .btn-sm { height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); padding: 0 var(--d2); font-size: var(--fs-sm); }
/* .btn-lg / .btn-full: giriş+2FA sayfasında (lib/auth-pages.js) GERÇEK sınıflar.
O sayfa data-tema taşımadığı için bugün eşleşmiyorlar; tema ileride giriş
ekranını da kapsarsa hazır dursunlar diye BIRAKILDI (ölü değil, kapsam dışı). */
html[data-tema="yeni"] .btn-lg { height: 44px; min-height: 44px; font-size: var(--fs-base); }
html[data-tema="yeni"] .btn-full { width: 100%; }
/* 10.08 SİLME: .qa-btn ve .quick-actions kuralları KALDIRILDI — her ikisi de
canlıda 0 kullanım (app-shell.css'te legacy kuralları var ama DOM'a hiç
basılmıyorlar). Kaldırılan 4 !important, bütçenin en büyük kalemiydi. */
/* Yikici eylem: acil DURDUR bordo DEGIL kirmizi (bordo = marka/eylem,
kirmizi = tehlike). Kritik hedef 44px + kare glif + kalin cerceve. */
html[data-tema="yeni"] .bk-halt-top {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 44px; min-height: 44px; min-width: 44px;
margin-left: var(--d3); /* komsu hedeften ayrik dursun */
padding: 0 var(--d4);
border: 2px solid var(--danger); border-radius: var(--radius);
background: var(--danger-soft); color: var(--danger-ink);
font-size: var(--fs-base); font-weight: 800; letter-spacing: .02em;
cursor: pointer;
}
html[data-tema="yeni"] .bk-halt-top .sq { width: 10px; height: 10px; background: currentColor; border-radius: 2px; display: inline-block; }
html[data-tema="yeni"] .bk-halt-top:active { background: var(--danger); color: var(--text-inverse); }
/* --- Ikon butonlari: gorsel 36px + ::after ile 44px hedef ---
Topbar bosluğu 8px oldugu icin -4px genisleme komsuyla TAM ortada bulusur,
ust uste binmez (44px hedef, sifir cakisma). */
html[data-tema="yeni"] .btn-icon,
html[data-tema="yeni"] .ws-refresh,
html[data-tema="yeni"] #hamburger {
position: relative;
width: var(--icon-h); height: var(--icon-h); min-width: var(--icon-h); min-height: var(--icon-h);
display: inline-flex; align-items: center; justify-content: center;
padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius);
color: var(--text-secondary); cursor: pointer; touch-action: manipulation;
transition: background var(--transition), color var(--transition);
}
html[data-tema="yeni"] .btn-icon::after,
html[data-tema="yeni"] .ws-refresh::after,
html[data-tema="yeni"] #hamburger::after { content: ''; position: absolute; inset: -4px; }
html[data-tema="yeni"] .btn-icon:active,
html[data-tema="yeni"] .ws-refresh:active,
html[data-tema="yeni"] #hamburger:active { background: var(--surface-active); color: var(--text); }
/* app-shell.css:495 hover'da 90 derece donduruyordu; dokunmatikte yapiskan
hover yuzunden buton donuk KALIYORDU. Donus yalniz basma aninda, kosulsuz.
10.08: gecis TABAN kurala tasindi — eskiden yalniz :active icinde tanimliydi,
yani basinca yumusak donuyor BIRAKINCA ZIPLAYARAK geri geliyordu. */
html[data-tema="yeni"] .ws-refresh { border-color: var(--ctl-border); background: var(--surface); color: var(--text); font-size: var(--fs-md); margin-left: var(--d2); transition: background var(--transition), color var(--transition), transform var(--transition-slow); }
html[data-tema="yeni"] .ws-refresh:hover { transform: none; background: var(--surface-hover); color: var(--text); border-color: var(--ctl-border); }
html[data-tema="yeni"] .ws-refresh:active { transform: rotate(180deg); }
/* --- Kapat butonlari: gorsel 30px + ::after ile 44px ---
10.08: .fc-ftbant-x BU AILEDEN CIKARILDI — canli DOM'da ikon degil
14 HARFLIK METIN butonu:
(fulfillment-page.js:903). 30px daireye sikistirilinca fatura suzgecinin
TEK CIKIS KAPISI okunamaz hale geliyordu. */
html[data-tema="yeni"] .op-drawer-close,
html[data-tema="yeni"] .dhl-x,
html[data-tema="yeni"] .cp-drawer-close {
position: relative; margin-left: auto;
width: 30px; height: 30px; min-width: 30px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border); border-radius: var(--radius-full);
background: var(--surface-hover); color: var(--text-secondary);
font-size: var(--fs-md); line-height: 1; cursor: pointer; touch-action: manipulation;
}
html[data-tema="yeni"] .op-drawer-close::after,
html[data-tema="yeni"] .dhl-x::after,
html[data-tema="yeni"] .cp-drawer-close::after { content: ''; position: absolute; inset: -7px; }
html[data-tema="yeni"] .op-drawer-close:active,
html[data-tema="yeni"] .dhl-x:active { background: var(--danger); color: var(--text-inverse); border-color: var(--danger); }
/* Fatura suzgeci cikis kapisi: METIN butonu. FC_STYLE'in kahve zeminini ve
dolgusunu korur, yalnizca hedefi 44px'e cikarir. */
html[data-tema="yeni"] .fc-ftbant-x {
position: relative; margin-left: auto; flex-shrink: 0;
width: auto; min-width: 44px; height: auto; min-height: 38px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 var(--d3); border: 0; border-radius: var(--radius);
background: var(--warning-ink); color: var(--text-inverse);
font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700;
line-height: 1; cursor: pointer; touch-action: manipulation;
}
html[data-tema="yeni"] .fc-ftbant-x::after { content: ''; position: absolute; inset: -3px; }
html[data-tema="yeni"] .fc-ftbant-x:active { background: var(--warning); }
/* --- Satir ici mini eylem (.fc-act) ---
YUKSEKLIK bilerek buyutulmez: ~36px'lik veri satirinda dikey genisleme
komsu satirin tiklama alanini calar ve YANLIS SIPARISE barkod bastirir.
Hedef YATAY eksende 44px'e acilir (44x26), dikeyde sifir tasma. */
html[data-tema="yeni"] .fc-act {
position: relative;
width: 26px; height: 26px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--ctl-border); border-radius: var(--radius-sm);
background: var(--surface); color: var(--text-secondary);
font-size: var(--fs-base); line-height: 1; cursor: pointer; touch-action: manipulation;
}
/* HEDEF SAĞA AÇILIR, SOLA DEĞİL: butonun hemen solunda "✓ Fiş basıldı"
rozeti duruyor; simetrik ±9px genişleme rozetin 5px üstüne biniyordu ve
fare istasyonunda rozete nişan alan kullanıcı YENİDEN BASKI tetikliyordu
(rulodan fiş yakar + depoda ikinci kopya). Sağ taraf boş alan. */
html[data-tema="yeni"] .fc-act::after { content: ''; position: absolute; top: -2px; bottom: -2px; left: -2px; right: -14px; }
html[data-tema="yeni"] .fc-act:active { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-line); }
/* 10.08 SİLME: .fc-actions ÖLÜ — canlıda .fc-actbar (8) ve .fc-act (3) var,
.fc-actions 0 kullanım. */
/* --- Musteriye mesaj butonu (.op-cust-msg) ---
orders-page.css:225: opacity .6 + font 13px + padding 0 2px + line-height 1
→ GERCEK hedef ~17x13px, ustelik :hover ile belirginlesiyordu = dokunmatikte
OLU NOKTA. Uc aday tema da bu seciciye hic dokunmamisti. */
/* 10.08 İKİ ÖLÇÜLEN ARIZA BURADA KAPANDI:
(1) SATIR YÜKSEKLİĞİ: 24px'lik satır içi buton, 10px/1,2 = 12px'lik alt
satırın SATIR KUTUSUNU 24px'e (coarse'ta 32px'e) çıkarıyordu — yani
"yoğunluk" vaadini tema'nın kendi butonu yiyordu (ölçüm: taban 49,25 →
tema 60,09px). Negatif dikey marj öğeyi satır kutusundan çıkarır;
görsel boyut ve dokunma hedefi AYNEN kalır.
(2) ÜST ÜSTE BİNEN HEDEF: telefon linki ile buton arası 2,75px iken
::after left:-10px 7,25px BİNDİRME yapıyordu; DOM'da buton sonra
geldiği için hit-test'i O kazanıyordu → telefonun son pikselleri
"ara" yerine "mesaj panelini aç" oluyordu. Genişleme artık TEK YÖNLÜ. */
html[data-tema="yeni"] .op-cust-msg {
position: relative;
width: 24px; height: 24px; padding: 0; opacity: 1;
margin: -4px 0 -4px 6px;
display: inline-flex; align-items: center; justify-content: center;
vertical-align: middle;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface); color: var(--text-secondary);
font-size: var(--fs-sm); line-height: 1; cursor: pointer; touch-action: manipulation;
}
html[data-tema="yeni"] .op-cust-msg::after { content: ''; position: absolute; top: -4px; bottom: -4px; left: 0; right: -20px; }
html[data-tema="yeni"] .op-cust-msg:active { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-line); }
/* --- Cipler ---
BORDO KULLANIMI 3: aktif filtre. Onay glifi PASIF cipte de yer kaplar
(visibility:hidden) — aksi halde cip aktiflesince genisleyip seridi
yeniden akitiyordu; dokunmatikte her dokunusta hedef yerinden oynardi. */
html[data-tema="yeni"] .op-chip,
html[data-tema="yeni"] .bk-chips > button {
position: relative;
height: var(--ctl-h); min-height: var(--ctl-h);
display: inline-flex; align-items: center; gap: var(--d1); padding: 0 var(--d3);
border: 1px solid var(--ctl-border); border-radius: var(--radius-full);
background: var(--surface); color: var(--text-secondary);
font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
user-select: none; touch-action: manipulation;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
html[data-tema="yeni"] .op-chip::before { content: '✓'; font-size: var(--fs-micro); visibility: hidden; }
/* BORDO BÜTÇESİ: seçili filtre artık DOLU bordo değil — tint + bordo çerçeve +
bordo metin + ✓ glifi + 700 ağırlık (dört kanal, bordo metin tint üstünde
≈9,5:1). Dolu bordo yalnız birincil eylem butonunda kaldı. */
html[data-tema="yeni"] .op-chip.active {
background: var(--primary-soft-2); color: var(--primary); font-weight: 700;
border-color: var(--primary);
}
html[data-tema="yeni"] .op-chip.active::before { visibility: visible; }
html[data-tema="yeni"] .op-chip:active { background: var(--surface-active); box-shadow: inset 0 2px 0 rgba(16, 18, 24, .14); transition-duration: 0s; }
html[data-tema="yeni"] .op-quick-chips { gap: 6px; margin-bottom: 6px; padding: 0; }
/* ==========================================================================
* 5) FORMLAR — filtre cubugu · girdiler · odak · onay kutusu
* Filtre cubugu KARTTAN CIKARILDI (C'nin karari): kutu icinde kutu
* gurultusu sifir, dikey kazanc ~22px → dogrudan tabloya yazildi.
* ==========================================================================*/
html[data-tema="yeni"] .op-filter-bar,
html[data-tema="yeni"] .filter-bar,
html[data-tema="yeni"] .filters,
html[data-tema="yeni"] .toolbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
background: transparent; border: 0; border-bottom: 1px solid var(--line);
border-radius: 0; padding: 0 0 var(--d2); margin-bottom: var(--d2);
}
html[data-tema="yeni"] .op-filter-bar input[type="text"],
html[data-tema="yeni"] .op-filter-bar #op-q { flex: 1 1 220px; min-width: 180px; }
html[data-tema="yeni"] .op-filter-bar select { min-width: 106px; cursor: pointer; }
html[data-tema="yeni"] .op-input,
html[data-tema="yeni"] .input,
html[data-tema="yeni"] .op-msg-input,
html[data-tema="yeni"] .op-filter-bar input,
html[data-tema="yeni"] .op-filter-bar select,
html[data-tema="yeni"] .filter-bar input,
html[data-tema="yeni"] .filter-bar select,
html[data-tema="yeni"] .filters input,
html[data-tema="yeni"] .filters select,
html[data-tema="yeni"] .fc-oto-ip,
html[data-tema="yeni"] .bk-lim input {
height: var(--ctl-h); min-height: var(--ctl-h); padding: 0 10px;
border: 1px solid var(--ctl-border); /* WCAG 1.4.11: kontrol siniri >=3:1 */
border-radius: var(--radius);
background: var(--surface); color: var(--text);
font-family: var(--font-sans); line-height: 1.2;
transition: border-color var(--transition), box-shadow var(--transition);
}
html[data-tema="yeni"] textarea.op-input,
html[data-tema="yeni"] .op-msg-text {
height: auto; min-height: 84px; padding: 8px 10px; line-height: var(--lh-text);
border: 1px solid var(--ctl-border); border-radius: var(--radius);
background: var(--surface); color: var(--text);
font-family: var(--font-sans); resize: vertical;
}
/* NOT: girdi punto ezmesi @media (min-width:769px) icinde — mobile.css'in
iOS yakinlastirma onlemi (16px) BILEREK korunuyor. Bkz. 12. bolum. */
/* Odak: outline:none YOK (design-system:107, orders-page:249/262 geri alinir).
Halka global :focus-visible'dan gelir; burada YALNIZ kenarlik rengi eklenir.
10.08 iki duzeltme:
· :focus → :focus-visible (fare tiklamasinda halka cikmasin)
· "yumusak parilti" (0 0 0 3px) SILINDI: 34px'lik alanin etrafinda
kenarlik + parilti + beyaz + outline = DORT esmerkezli halka oluyordu;
butonda tek halka var. Ayrica .dhl-otpbox.live'in "OTP CANLI, kod
bekleniyor" gorunumu siradan odakla BIREBIR ayni hale geliyordu. */
html[data-tema="yeni"] .op-input:focus-visible,
html[data-tema="yeni"] .input:focus-visible,
html[data-tema="yeni"] .op-msg-text:focus-visible,
html[data-tema="yeni"] .op-msg-input:focus-visible,
html[data-tema="yeni"] .op-filter-bar input:focus-visible,
html[data-tema="yeni"] .op-filter-bar select:focus-visible,
html[data-tema="yeni"] .fc-oto-ip:focus-visible {
border-color: var(--primary);
}
/* FC_STYLE (JS ici