:root{--renk-lacivert:#212348;--renk-bordo:#921831;--renk-koyu-yesil:#0b5e34;--renk-acik-gri:#f3f5f8;--renk-panel-grisi:#e2e6eb;--renk-cizgi-grisi:#d9dee7;--renk-metin-grisi:#6c757d;--yazi-tipi:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--golge:0 18px 50px rgba(33,35,72,.20)}*{box-sizing:border-box}body{margin:0;font-family:var(--yazi-tipi);font-size:.78rem;color:var(--renk-lacivert);background:var(--renk-acik-gri)}.giris-sayfasi{min-height:100vh;overflow:hidden;color:var(--renk-acik-gri);background:linear-gradient(115deg,var(--renk-lacivert) 0%,var(--renk-lacivert) 48%,var(--renk-bordo) 100%)}.giris-izgarasi{position:fixed;inset:0;opacity:.14;background-image:linear-gradient(rgba(243,245,248,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(243,245,248,.24) 1px,transparent 1px);background-size:114px 114px}.proje-rozeti{position:fixed;z-index:5;top:28px;left:24px;display:flex;align-items:center;gap:14px;padding:12px 18px;color:var(--renk-lacivert);background:var(--renk-acik-gri);border:1px solid var(--renk-cizgi-grisi);border-radius:22px;box-shadow:var(--golge)}.proje-kisaltmasi,.ust-proje-kisaltmasi{display:grid;place-items:center;color:var(--renk-acik-gri);background:var(--renk-bordo);font-weight:800}.proje-kisaltmasi{width:48px;height:48px;border-radius:12px}.proje-rozeti strong,.proje-rozeti small,.kurumsal-panel-metni strong,.kurumsal-panel-metni small{display:block}.proje-rozeti small{color:var(--renk-metin-grisi)}.kurumsal-panel-metni{position:fixed;top:38px;right:30px;text-align:right}.giris-duzeni{position:relative;z-index:2;min-height:100vh;display:grid;grid-template-columns:1fr minmax(390px,520px);align-items:center;gap:7vw;padding:150px 3.2vw 86px}.giris-tanitimi h1{max-width:920px;margin:0;font-size:clamp(3.4rem,5.4vw,6.2rem);line-height:.98;font-weight:800}.giris-tanitimi>p{max-width:880px;margin:28px 0 42px;color:rgba(243,245,248,.86);font-size:1.25rem}.modul-kartlari{display:grid;grid-template-columns:repeat(3,minmax(160px,220px));gap:16px}.modul-karti{padding:22px 24px;background:rgba(226,230,235,.09);border:1px solid rgba(217,222,231,.28);border-radius:13px}.modul-karti strong,.modul-karti span{display:block}.giris-karti{padding:34px;background:rgba(33,35,72,.84);border:1px solid rgba(217,222,231,.30);border-radius:30px;box-shadow:var(--golge)}.giris-karti-basligi{display:flex;align-items:center;gap:17px;margin-bottom:30px}.giris-simgesi{width:68px;height:68px;display:grid;place-items:center;background:linear-gradient(135deg,var(--renk-bordo),var(--renk-lacivert));border-radius:20px}.giris-karti .form-control{min-height:58px;background:var(--renk-acik-gri);border:1px solid var(--renk-cizgi-grisi)}.kurumsal-dugme{color:var(--renk-acik-gri);background:var(--renk-bordo);border-color:var(--renk-bordo);font-weight:800}.giris-alt-bilgi{position:fixed;bottom:12px;left:0;right:0;text-align:center}.uygulama-sayfasi{height:100vh;overflow:hidden;background:linear-gradient(110deg,var(--renk-lacivert),var(--renk-bordo))}.uygulama-kabugu{height:100vh;display:grid;grid-template-rows:68px minmax(0,1fr) 30px}.ust-menu{display:flex;align-items:center;gap:18px;padding:8px 16px;color:var(--renk-acik-gri)}.ust-proje-rozeti{display:flex;align-items:center;gap:10px;padding:7px 12px;color:var(--renk-lacivert);background:var(--renk-acik-gri);border-radius:14px;text-decoration:none}.ust-proje-kisaltmasi{width:36px;height:36px;border-radius:9px}.ust-proje-rozeti strong,.ust-proje-rozeti small{display:block}.ana-menu{display:flex;gap:4px;flex:1;overflow-x:auto}.ana-menu-baglantisi{padding:9px 11px;color:var(--renk-acik-gri);text-decoration:none;border-radius:18px;white-space:nowrap}.ana-menu-baglantisi.aktif,.ana-menu-baglantisi:hover{background:rgba(226,230,235,.15)}.kullanici-alani{display:flex;gap:12px;align-items:center}.cikis-dugmesi{color:var(--renk-acik-gri);background:transparent;border:0}.uygulama-penceresi-sarmalayici{min-height:0;padding:0 16px;overflow:hidden}.uygulama-penceresi{height:100%;overflow-y:auto;overflow-x:hidden;background:var(--renk-acik-gri);border:1px solid var(--renk-cizgi-grisi);border-radius:20px;box-shadow:var(--golge);scrollbar-color:var(--renk-metin-grisi) var(--renk-panel-grisi)}.uygulama-icerigi{padding:20px}.uygulama-alt-bilgi{display:flex;align-items:center;justify-content:center;color:var(--renk-acik-gri)}.sayfa-basligi{display:flex;gap:16px;align-items:center}.sayfa-simgesi{width:52px;height:52px;display:grid;place-items:center;color:var(--renk-acik-gri);background:var(--renk-lacivert);border-radius:12px}.kpi-izgarasi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.kpi-karti{padding:20px;color:var(--renk-acik-gri);background:var(--renk-lacivert);border-radius:10px}.kpi-karti.panel-rengi{color:var(--renk-lacivert);background:var(--renk-panel-grisi)}.kpi-karti.bordo{background:var(--renk-bordo)}.kpi-karti.yesil{background:var(--renk-koyu-yesil)}.kpi-karti span,.kpi-karti strong,.kpi-karti small{display:block}.kpi-karti strong{font-size:2rem}.panel-karti{margin-top:16px;background:var(--renk-acik-gri);border:1px solid var(--renk-cizgi-grisi);border-radius:12px;overflow:hidden}.panel-karti-basligi{display:flex;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--renk-cizgi-grisi)}.table{--bs-table-bg:var(--renk-acik-gri);--bs-table-border-color:var(--renk-cizgi-grisi)}.table thead th{background:var(--renk-panel-grisi)}.durum-etiketi{padding:5px 10px;background:var(--renk-panel-grisi);border-radius:15px}.durum-etiketi.basarili{color:var(--renk-acik-gri);background:var(--renk-koyu-yesil)}.bos-durum{min-height:220px;display:grid;place-content:center;text-align:center;color:var(--renk-metin-grisi)}.hata-sayfasi{min-height:100vh;display:grid;place-items:center;background:linear-gradient(110deg,var(--renk-lacivert),var(--renk-bordo))}.hata-karti{padding:48px;text-align:center;background:var(--renk-acik-gri);border-radius:24px}.hata-karti>strong{font-size:4rem;color:var(--renk-bordo)}@media(max-width:991px){.giris-sayfasi{overflow-y:auto}.giris-duzeni{grid-template-columns:1fr}.kpi-izgarasi{grid-template-columns:repeat(2,1fr)}}@media(max-width:767px){.giris-duzeni{padding:118px 16px 70px}.modul-kartlari,.kpi-izgarasi{grid-template-columns:1fr}.kurumsal-panel-metni{display:none}.uygulama-penceresi-sarmalayici{padding:0 8px}} /* ============================================================================= FAZ 5 — Panel bilesenleri Renkler yalnizca 03-KURUMSAL-TASARIM-SISTEMI.md paletinden kullanilir. Responsive davranis ortak bilesenlerden gelir (08-RESPONSIVE-...md). ============================================================================= */ /* --- Mobil menu dugmesi --- */ .menu-dugmesi{padding:6px 12px;font-size:1.35rem;line-height:1;color:var(--renk-acik-gri);background:transparent;border:1px solid rgba(226,230,235,.35);border-radius:10px} .menu-dugmesi:focus-visible{outline:3px solid var(--renk-acik-gri);outline-offset:2px} /* --- Offcanvas menu (tablet/mobil) --- */ .tsts-offcanvas{color:var(--renk-acik-gri);background:var(--renk-lacivert);max-width:86vw} .tsts-offcanvas .offcanvas-header{border-bottom:1px solid var(--renk-cizgi-grisi)} .tsts-offcanvas .btn-close{filter:invert(1) grayscale(100%) brightness(200%)} .offcanvas-menu{display:flex;flex-direction:column;gap:4px} .offcanvas-menu-baglantisi{display:block;padding:12px 14px;color:var(--renk-acik-gri);text-decoration:none;border-radius:10px} .offcanvas-menu-baglantisi:hover,.offcanvas-menu-baglantisi.aktif{background:rgba(226,230,235,.16)} .offcanvas-menu-baglantisi small{display:block;color:var(--renk-cizgi-grisi)} .offcanvas-menu-baglantisi.pasif,.ana-menu-baglantisi.pasif{opacity:.55;cursor:not-allowed} /* --- Yol izi --- */ .yol-izi{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;list-style:none;color:var(--renk-metin-grisi);font-size:.9rem} .yol-izi li+li::before{content:"/";margin-right:8px} /* --- Sayfa basligi --- */ .sayfa-basligi h1{margin:0;font-size:1.6rem} .sayfa-basligi small{color:var(--renk-metin-grisi)} /* --- Toolbar / filtre: dar ekranda alt alta --- */ .arac-cubugu{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:16px} .arac-cubugu .alan{display:flex;flex-direction:column;gap:4px;min-width:150px;flex:1 1 150px} .arac-cubugu label{font-size:.85rem;color:var(--renk-metin-grisi)} .arac-cubugu .dugme-grubu{display:flex;flex-wrap:wrap;gap:8px} /* --- Kartlar: mobilde tek, tablette iki, desktopta dort kolon --- */ .kpi-izgarasi{grid-template-columns:repeat(4,minmax(0,1fr))} .kpi-karti strong{font-size:1.7rem;overflow-wrap:anywhere} .kpi-karti small{color:inherit;opacity:.85} /* --- Tablolar: sayfa degil, tablo kayar --- */ .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch} .tsts-tablo{width:100%;margin:0;font-size:.92rem} .tsts-tablo th,.tsts-tablo td{white-space:nowrap;vertical-align:middle} .tsts-tablo td.sarabilir{white-space:normal;min-width:220px;overflow-wrap:anywhere} .tsts-tablo td.uzun-deger{max-width:280px;overflow:hidden;text-overflow:ellipsis} /* --- Durum etiketleri --- */ .durum-etiketi.uyari{color:var(--renk-acik-gri);background:var(--renk-bordo)} .durum-etiketi.notr{color:var(--renk-lacivert);background:var(--renk-cizgi-grisi)} .durum-etiketi.lacivert{color:var(--renk-acik-gri);background:var(--renk-lacivert)} .deger-pozitif{color:var(--renk-koyu-yesil);font-weight:700} .deger-negatif{color:var(--renk-bordo);font-weight:700} /* Bootstrap `.table > :not(caption) > * > *` hucre rengini DOGRUDAN atar (0,1,2) ve tekil sinif secicisini (0,1,0) yener. Bu yuzden renk siniflari `` uzerine verildiginde SESSIZCE etkisiz kaliyordu: NET PnL, GERC. R, MFE ve MAE kalin ama siyah ciziliyordu. `` icine yazilan YON sutunu calisiyordu, cunku o secici hucreyi hedeflemiyor. Ozgullugu (0,2,1) yaparak duzeltilir; siniflarin kendisi degismedigi icin tablo disindaki kullanimlar aynen kalir. */ .tsts-tablo td.deger-pozitif{color:var(--renk-koyu-yesil)} .tsts-tablo td.deger-negatif{color:var(--renk-bordo)} /* --- Bilgi kutusu (veri kalitesi notu, yetersiz orneklem vb.) --- */ .bilgi-kutusu{display:flex;gap:10px;padding:12px 14px;margin-top:14px;color:var(--renk-lacivert);background:var(--renk-panel-grisi);border-left:4px solid var(--renk-bordo);border-radius:8px;font-size:.9rem} .bilgi-kutusu.notr{border-left-color:var(--renk-metin-grisi)} /* --- Formlar: mobilde tek kolon --- */ .tsts-form .satir{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px} .tsts-form label{display:block;margin-bottom:4px;font-size:.9rem} .tsts-form .form-control,.tsts-form .form-select{border-color:var(--renk-cizgi-grisi)} .tsts-form .dugme-satiri{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:16px} /* --- Ayar satiri: icerige gore genislik, tek satir --- `.satir` izgarasi 1fr kullanir ve alanlari ekran genisligine yayar; uc sayi kutusu icin bu, kartin gereksiz yere uc kat yer kaplamasi demekti. Burada genislik ICERIGE gore sabitlenir, dugmeler ayni satirin sagina alinir. Dar ekranda flex-wrap devreye girer, medya sorgusu gerekmez. */ .ayar-satiri{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px} .ayar-alani{flex:0 0 auto;width:150px} .ayar-alani-genis{width:250px} .ayar-alani label{display:block;margin-bottom:4px;font-size:.9rem} /* Kutu ile etiketi ayni goz hizasina getirir: komsu alanlarda etiket ustte, burada etiket kutunun yaninda oldugu icin alt hiza kayardi. */ .ayar-onayi{flex:0 0 auto;padding-bottom:8px} .ayar-dugmeleri{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto} /* --- Tehlikeli alan --- */ .tehlikeli-alan{border-color:var(--renk-bordo)} .tehlikeli-alan .panel-karti-basligi{background:rgba(146,24,49,.06)} .tehlikeli-alan .panel-karti-basligi h2{color:var(--renk-bordo)} /* Bootstrap'in kendi tehlike kirmizisi paletin bordosuyla catisiyordu; ayni kartta iki farkli kirmizi "iki farkli uyari seviyesi" izlenimi verir. */ .tehlikeli-alan .btn-danger{background:var(--renk-bordo);border-color:var(--renk-bordo)} /* Silinecek/korunacak listeleri YAN YANA: karsilastirilmak icin varlar, alt alta konsalardi goz ikisi arasinda kaydirma yaparak gidip gelirdi. `.satir` kullanilamaz — o kural yalnizca `.tsts-form` icinde gecerlidir. */ .sil-listeleri{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px 28px} /* --- Dokuman kutuphanesi --- Kartlar icerige gore sarilir: kutuphane buyudukce satir sayisi artar, kart genisligi degismez. Sabit kolon sayisi verilseydi tek belgeyken kart sayfa genisligine yayilir, besinci belgede dar kalirdi. */ .dokuman-listesi{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px;margin-top:16px} .dokuman-karti{padding:18px 20px;background:var(--renk-acik-gri); border:1px solid var(--renk-cizgi-grisi);border-radius:12px} .dokuman-karti h2{margin:0 0 6px} .dokuman-karti a{color:var(--renk-lacivert);text-decoration:none} .dokuman-karti a:hover,.dokuman-karti a:focus-visible{text-decoration:underline} .dokuman-karti p{color:var(--renk-metin-grisi);font-size:.92rem} /* --- Karar ozeti: Performans ekranindaki hukum --- */ .karar-ozeti{border-color:var(--renk-lacivert)} .karar-ozeti .panel-karti-basligi{background:var(--renk-lacivert)} .karar-ozeti .panel-karti-basligi h2{color:var(--renk-acik-gri)} .karar-hukmu{padding:2px 0} /* --- Yazdirma: ekran degil, BELGE --- Ekranin tamami sabit yukseklikli bir pencere icinde kayiyor (`.uygulama-penceresi{height:100%;overflow-y:auto}`). Yazdirmada bu yapinin AYNEN kalmasi, kagida yalnizca ilk ekran dolusunu basardi; bu yuzden kaydirma ve yukseklik kisitlari kaldirilir. */ @media print{ .ust-menu,.uygulama-alt-bilgi,.ekranda-kalir,.sayfalama{display:none!important} .uygulama-sayfasi,.uygulama-kabugu,.uygulama-penceresi, .uygulama-penceresi-sarmalayici{height:auto;overflow:visible;background:transparent; box-shadow:none;border:0;padding:0;display:block} .table-responsive{overflow:visible} /* Bir tablonun ortasindan sayfa bolmek, basligi onceki sayfada birakir. */ .panel-karti{break-inside:avoid;margin-top:10px;border-color:var(--renk-metin-grisi)} /* Cok sayfaya tasan tabloda basligi HER sayfada tekrarlar. */ thead{display:table-header-group} .rapor-kunyesi{background:transparent;border-color:var(--renk-metin-grisi)} .karar-ozeti .panel-karti-basligi{background:transparent} .karar-ozeti .panel-karti-basligi h2{color:var(--renk-lacivert)} /* Ek tablolari kendi sayfasinda baslar: hukum ve kanit karismaz. */ } /* --- Sayfalama --- */ .sayfalama{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px;font-size:.9rem} .sayfalama a,.sayfalama span{padding:6px 11px;color:var(--renk-lacivert);background:var(--renk-panel-grisi);border-radius:8px;text-decoration:none} .sayfalama .aktif{color:var(--renk-acik-gri);background:var(--renk-lacivert)} /* --- Erisilebilirlik: gorunur odak --- */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--renk-bordo);outline-offset:2px} /* --- Yikici islem dugmeleri: rahat dokunma hedefi --- Tablo icindeki `btn-sm` dugmeler 31px yuksekliginde kaliyordu. Bu, WCAG 2.2 AA asgari hedefini (24px) gecer; ancak buradaki dugme ACIK BIR POZISYONU KAPATIR — dokunmatik ekranda yanlis basma maliyeti gercek paradir. Bu yuzden yalnizca kapatma dugmelerine 44px'lik rahat hedef verilir. Onay istemi (confirm) yerinde durur; bu onun YERINE gecmez, yanina eklenir. */ .kapatma-dugmesi{min-height:44px;min-width:44px} /* ============================================================================= Breakpointler — 576 / 768 / 992 / 1200 ============================================================================= */ @media(max-width:1199px){.kpi-izgarasi{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:991px){ .uygulama-kabugu{grid-template-rows:60px minmax(0,1fr) 30px} .ust-menu{gap:10px} } @media(max-width:767px){ .kpi-izgarasi{grid-template-columns:1fr} .sayfa-basligi h1{font-size:1.3rem} .uygulama-icerigi{padding:14px} .arac-cubugu .alan{flex:1 1 100%} .tsts-form .dugme-satiri{justify-content:stretch} .tsts-form .dugme-satiri .btn{flex:1 1 auto} } @media(max-width:575px){ .uygulama-penceresi-sarmalayici{padding:0 6px} .uygulama-icerigi{padding:10px} /* Alanlar sarildiginda `margin-left:auto` dugmeleri tek basina saga iterdi; dar ekranda tam genislik daha okunakli. */ .ayar-alani,.ayar-alani-genis{width:100%} .ayar-dugmeleri{width:100%;margin-left:0} .ayar-dugmeleri .btn{flex:1 1 auto} } /* --- Ust menu tasma duzeltmesi --- Flex ogeleri varsayilan `min-width:auto` ile icerik genisliginin altina INMEZ; bu yuzden 992px'de 9 menu kalemi sayfayi yatay tasiriyordu. `min-width:0` ile menu kendi `overflow-x:auto` alaninda kayar, SAYFA kaymaz. */ .ust-menu{min-width:0} .ust-proje-rozeti{flex:0 0 auto;min-width:0} .ana-menu{flex:1 1 0;min-width:0;scrollbar-width:thin} .kullanici-alani{flex:0 0 auto;min-width:0} .kullanici-alani>span{display:inline-block;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle} @media(min-width:992px) and (max-width:1199px){.ana-menu-baglantisi{padding:9px 8px;font-size:.92rem}} /* ============================================================================= FAZ 7 — Gorsel ince ayar ----------------------------------------------------------------------------- Palet DEGISMEDI: yalnizca 03-KURUMSAL-TASARIM-SISTEMI.md'deki yedi renk kullanilir. Buradaki tum yarisaydam degerler ayni renklerin rgba() karsiliklaridir; yeni bir renk TANIMLANMAZ. Responsive davranis DEGISMEDI: yeni breakpoint uretilmedi, mevcut 576/768/992/1200 kirilim noktalari korunuyor (08-RESPONSIVE-...md). ============================================================================= */ /* --- 1) Yazi tipi ----------------------------------------------------------- Inter YEREL barindirilir; CDN kullanilmaz (00-DEGISMEZ-STANDARTLAR.md -> "Varliklar yereldir"). TEK DOSYA, TUM KALINLIKLAR: degisken (variable) font. `font-weight:100 900` araligi, 400/500/600/700 icin ayri ayri dort dosya indirmek yerine tek istekle karsilanir. Ara kalinliklar da kullanilabilir hale gelir. `font-display:swap`: font inene kadar metin fallback ile GORUNUR kalir, gorunmez metin (FOIT) olusmaz. DOSYA YOKSA: @font-face sessizce basarisiz olur ve tarayici asagidaki fallback yiginina duser. Sayfa BOZULMAZ, yalnizca sistem fontuyla gorunur. Sunucuda dosyanin varligini `saglikKontrolu.php` denetler. Yonerge: web/varliklar/fontlar/BENIOKU.md Tirnaklar CIFT: `tasarimKontrolu.php` CSS icinde birebir `"Inter"` ariyor; tek tirnak denetimi dusururdu. */ IKI BICIM TANIMLI: tarayici listeyi SIRAYLA dener ve bir kaynak indirilemezse (orn. dosya yoksa) bir SONRAKINE gecer. Yani woff2 varsa o kullanilir, yoksa ttf'ye duser. Ikisinden biri yeterlidir; woff2 yaklasik yari boyuttadir, tercih edilendir. */ @font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/varliklar/fontlar/InterVariable.woff2") format("woff2-variations"), url("/varliklar/fontlar/InterVariable.ttf") format("truetype-variations"); } :root{ --yazi-tipi:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, "Helvetica Neue",Arial,sans-serif; /* Kose yaricapi ve golge olcegi — daginik degerler yerine tek kaynak. */ --yaricap-kucuk:10px; --yaricap-orta:14px; --yaricap-buyuk:22px; --golge-kucuk:0 1px 2px rgba(33,35,72,.06),0 2px 8px rgba(33,35,72,.05); --golge-orta:0 2px 4px rgba(33,35,72,.05),0 8px 24px rgba(33,35,72,.08); --golge-pencere:0 2px 6px rgba(33,35,72,.10),0 24px 64px rgba(33,35,72,.30); } body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.5; letter-spacing:-.005em; } h1,h2,h3,.kpi-karti strong{letter-spacing:-.02em} /* --- Sayisal hizalama ------------------------------------------------------- `tabular-nums` her rakama AYNI genisligi verir. Orantili rakamlarda "1" digerlerinden dar oldugu icin alt alta duran fiyatlar/R degerleri sagdan kayik gorunur ve goz kolonu takip edemez. Fiyat, R, yuzde ve tutar gosterilen HER YERI kapsar: KPI kartlari, tablo hucreleri, artı/eksi degerler, sayfalama ve para/oran tasiyan rozetler. Metin alanlarina UYGULANMAZ — orada orantili rakam daha iyi okunur. */ .kpi-karti strong, .tsts-tablo td, .tsts-tablo th[scope="row"], .deger-pozitif, .deger-negatif, .sayfalama, .kayit-sayisi{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* --- 2) Ana pencerenin kenar cizgisi ---------------------------------------- Koyu gradyan uzerindeki 1px'lik kenarlik, arka planla birlesince koyu bir cerceve gibi okunuyordu. Kaldirildi; ayrim artik yalnizca golgeden gelir. */ .uygulama-penceresi{ border:0; border-radius:var(--yaricap-buyuk); box-shadow:var(--golge-pencere); } /* --- 2b) Tarayicinin ODAK HALKASI ------------------------------------------- `border:0` yazildigi halde pencerenin cevresinde siyah bir cerceve kaliyordu. Kaynagi kenarlik da golge de DEGILDI: Chrome 127'den beri kaydirilabilir kapsayicilar klavyeyle odaklanabilir sayiliyor, bu yuzden `overflow-y:auto` tasiyan bu pencere sayfa acilir acilmaz odagi aliyor ve tarayicinin varsayilan odak gostergesi ciziliyordu -- distan siyah, icten beyaz cift halka. Olculdu: `document.activeElement` pencerenin kendisi ve `:focus-visible` eslesiyor. Golgeyi veya kenarligi kurcalamak bu yuzden ise YARAMAZDI; ozelligi bilmeden yapilan duzeltme gorunumu ayni birakirdi. BEDELI: klavye kullanicisi pencereye odaklandiginda artik gorsel bir isaret yok. Kabul edilebilir, cunku (a) halka sayfanin TAMAMINI cerceveliyordu, yani hangi ogenin odakli oldugunu ayirt etmiyordu; (b) her sayfa acilisinda kendiliginden ciziliyordu, yani zaten bir klavye eylemini bildirmiyordu; (c) icerideki dugme, baglanti ve form alanlarinin kendi odak halkalari AYNEN duruyor. Yalnizca bu kapsayici susturuldu. Ok tuslariyla kaydirma etkilenmez -- oge odaklanabilir kalir, yalnizca halkasi cizilmez. */ .uygulama-penceresi:focus, .uygulama-penceresi:focus-visible{ outline:none; } /* --- 3) Ic panellerde kaydirma cubugu YOK ----------------------------------- Iki ayri sebep vardi: a) .table-responsive yalnizca overflow-x:auto tanimlar. CSS'te bir eksen auto iken digeri visible KALAMAZ; tarayici onu da auto yapar. b) Bootstrap'in .visually-hidden sinifi margin:-1px kullanir. Kaydirma baglaminda bu 1px'lik tasma dikey cubugu TETIKLER — tablodaki gizli caption tam olarak bunu yapiyordu. Sonuc: icerik sigsa bile kutuda dikey cubuk cikiyordu. Bu, 08-RESPONSIVE belgesindeki "cift scrollbar kabul edilmez" kuralinin ihlaliydi. Kutulara sabit yukseklik VERILMEZ: icerik ne kadarsa kutu o kadar uzar. Uzun listelerde cozum kaydirma degil, "Tumunu Gor" ile sayfalamadir. */ .panel-karti .table-responsive{overflow-y:hidden} .panel-karti .table-responsive>.table>caption.visually-hidden{margin:0!important} /* --- 4) Kaydirma cubugu: yuvarlak, pencere koseleriyle uyumlu --------------- */ .uygulama-penceresi{scrollbar-width:thin;scrollbar-color:rgba(33,35,72,.30) transparent} .uygulama-penceresi::-webkit-scrollbar{width:12px;height:12px} .uygulama-penceresi::-webkit-scrollbar-track{ background:transparent; /* Ust/alt bosluk: cubuk yuvarlatilmis koselere DAYANMAZ. */ margin:var(--yaricap-buyuk) 0; } .uygulama-penceresi::-webkit-scrollbar-thumb{ background:rgba(33,35,72,.26); border-radius:999px; /* Saydam kenarlik + background-clip: cubugu inceltir, kenardan ayirir. */ border:3px solid transparent; background-clip:content-box; } .uygulama-penceresi::-webkit-scrollbar-thumb:hover{background:rgba(33,35,72,.44);background-clip:content-box} .uygulama-penceresi::-webkit-scrollbar-corner{background:transparent} /* --- 5) Logo olcusu --------------------------------------------------------- */ .ust-proje-kisaltmasi{width:32px;height:32px;border-radius:9px;font-size:.68rem;letter-spacing:.02em} .ust-proje-rozeti{gap:9px;padding:6px 11px;border-radius:12px} .ust-proje-rozeti strong{font-size:.92rem;line-height:1.25} .ust-proje-rozeti small{font-size:.72rem;line-height:1.2;color:var(--renk-metin-grisi)} .proje-kisaltmasi{width:42px;height:42px;border-radius:12px;font-size:.9rem;letter-spacing:.02em} .proje-rozeti{gap:12px;padding:10px 16px;border-radius:18px} /* --- 6) Genel ince ayar ----------------------------------------------------- */ /* Ust menu: secili kalem daha net, gecisler yumusak. */ .ust-menu{padding:10px 18px} .ana-menu-baglantisi{border-radius:10px;font-size:.94rem;font-weight:500;transition:background-color .15s ease} .ana-menu-baglantisi.aktif{background:rgba(226,230,235,.20);font-weight:600} /* Icerik nefes alsin. */ .uygulama-icerigi{padding:26px 28px} .sayfa-basligi{gap:18px} .sayfa-simgesi{border-radius:var(--yaricap-orta);box-shadow:var(--golge-kucuk)} /* KPI kartlari. */ .kpi-izgarasi{gap:16px;margin-top:22px} .kpi-karti{padding:22px 24px;border-radius:var(--yaricap-orta);box-shadow:var(--golge-orta)} .kpi-karti span{font-size:.88rem;opacity:.88;letter-spacing:.01em} /* Boyut SABIT verilmez: 1.7rem degeri daha once dar ekranda tasmayi onlemek icin bilerek dusurulmustu. clamp() genis ekranda buyutur ama dar ekranda o guvenli tabani korur. */ .kpi-karti strong{margin:6px 0 2px;font-size:clamp(1.55rem,1.15rem + 1.1vw,1.95rem);font-weight:700;overflow-wrap:anywhere} .kpi-karti small{font-size:.82rem} /* Panel kartlari. */ .panel-karti{margin-top:20px;border-radius:var(--yaricap-orta);box-shadow:var(--golge-kucuk)} .panel-karti-basligi{align-items:center;padding:16px 22px;background:rgba(226,230,235,.45)} .panel-karti-basligi h2{font-size:.98rem;letter-spacing:-.01em} /* Kart govdesi: tablosuz (duz metin) kartlarda ic bosluk. Tablolu kartlarda boslugu hucre dolgusu verir; metin kartlari onsuz kenara yapisiyordu. Dolgu baslik satiriyla AYNI tutulur ki metin basligin altina hizalansin. */ .kart-govdesi{padding:16px 22px;font-size:.9rem;line-height:1.55} .kart-govdesi code{padding:1px 5px;background:var(--renk-panel-grisi);border-radius:4px;font-size:.86em} .kart-govdesi .bilgi-kutusu,.kart-govdesi .table-responsive{margin-top:0} .metin-notu{color:var(--renk-metin-grisi);font-size:.85rem} /* Tablolar: baslik satiri sakin, satirlar okunakli. */ .tsts-tablo th,.tsts-tablo td{padding:12px 16px} .tsts-tablo thead th{ font-size:.76rem;font-weight:600;letter-spacing:.06em; color:var(--renk-metin-grisi);border-bottom-width:1px; } .tsts-tablo tbody tr{transition:background-color .12s ease} .tsts-tablo tbody tr:hover{background:rgba(226,230,235,.42)} .tsts-tablo tbody tr:last-child>*{border-bottom-width:0} /* Durum etiketleri: daha kompakt, daha okunakli. */ .durum-etiketi{ display:inline-block;padding:4px 11px;border-radius:999px; font-size:.76rem;font-weight:600;letter-spacing:.02em;white-space:nowrap; } /* Dugmeler. */ .kurumsal-dugme{border-radius:9px;padding:7px 15px;letter-spacing:.01em;transition:filter .15s ease} .kurumsal-dugme:hover{filter:brightness(1.08)} /* Bos durum ve bilgi kutusu. */ .bos-durum{gap:6px;min-height:180px} .bilgi-kutusu{border-radius:var(--yaricap-kucuk);box-shadow:var(--golge-kucuk)} /* Giris ekrani kartlari. */ .giris-karti{border-radius:26px} .modul-karti{border-radius:var(--yaricap-orta)} /* Dar ekranda ic bosluklar yeniden daraltilir — yukaridaki 26/28px degeri yalnizca genis ekranlar icindir. */ @media(max-width:991px){ .uygulama-icerigi{padding:20px} .ust-menu{padding:8px 14px} } @media(max-width:767px){ .uygulama-icerigi{padding:16px} .kpi-karti{padding:18px 20px} .tsts-tablo th,.tsts-tablo td{padding:10px 12px} .panel-karti-basligi{padding:14px 16px} } @media(max-width:575px){ .uygulama-icerigi{padding:12px} .uygulama-penceresi{border-radius:var(--yaricap-orta)} .uygulama-penceresi::-webkit-scrollbar-track{margin:var(--yaricap-orta) 0} } /* Hareket azaltma tercihi olan kullanicilarda gecisler kapanir. */ @media(prefers-reduced-motion:reduce){ .ana-menu-baglantisi,.tsts-tablo tbody tr,.kurumsal-dugme{transition:none} } /* ============================================================================= KOMPAKT OLCEK ----------------------------------------------------------------------------- Onceki gorsel turda bosluklar ve yazi boyutlari BUYUTULMUSTU. Sonuc bir kurumsal panel icin fazla iriydi: butonlar tasacakmis gibi duruyor, ekranda daha az satir goruluyordu. Yogun veri gosteren bir panelde amac ferahlik degil OKUNAKLI YOGUNLUKTUR — ayni ekranda daha cok satir, daha az kaydirma. Asagidaki degerler o yonde geri cekilir. Palet ve kirilim noktalari DEGISMEDI. ============================================================================= */ /* Ust serit alcaltildi. */ .uygulama-kabugu{grid-template-rows:56px minmax(0,1fr) 26px} .ust-menu{padding:6px 14px;gap:12px} .ust-proje-kisaltmasi{width:28px;height:28px;border-radius:8px;font-size:.6rem} .ust-proje-rozeti{gap:8px;padding:5px 9px;border-radius:10px} .ust-proje-rozeti strong{font-size:.82rem;line-height:1.2} .ust-proje-rozeti small{font-size:.66rem;line-height:1.15} .ana-menu-baglantisi{padding:6px 10px;font-size:.86rem;border-radius:8px} .kullanici-alani{gap:9px} .kullanici-alani>span{font-size:.82rem;max-width:150px} .cikis-dugmesi{font-size:.84rem;padding:5px 9px} /* Ic bosluklar daraltildi. */ .uygulama-icerigi{padding:16px 18px} /* Sayfa basligi kucultuldu. */ .sayfa-basligi{gap:12px} .sayfa-simgesi{width:38px;height:38px;font-size:1rem;border-radius:10px} .sayfa-basligi h1{font-size:1.2rem} .sayfa-basligi small{font-size:.82rem} /* KPI kartlari: rakam hala vurgulu ama kart cok daha alcak. */ .kpi-izgarasi{gap:12px;margin-top:14px} .kpi-karti{padding:14px 16px;border-radius:10px} .kpi-karti span{font-size:.78rem} .kpi-karti strong{margin:3px 0 1px;font-size:clamp(1.25rem,1.05rem + .55vw,1.5rem)} .kpi-karti small{font-size:.74rem} /* Panel kartlari. */ .panel-karti{margin-top:14px;border-radius:10px} .panel-karti-basligi{padding:10px 14px} .panel-karti-basligi h2{font-size:.88rem} /* Tablolar: satir yuksekligi dusuruldu, daha cok satir gorunur. YATAY DOLGU 12px'ten 7px'e cekildi. Tek basina kucuk gorunen bir sayi ama Paper Trade'de 20 sutun var: her sutunda 10px, toplamda 200px eder. Tablo 1440px'te 370px tasiyordu ve tasmanin en buyuk tek kalemi sutun ICERIGI degil, HUCRE DOLGUSUYDU (20 x 24px = 480px). Once olculdu, sonra kesildi. */ .tsts-tablo{font-size:.85rem} .tsts-tablo th,.tsts-tablo td{padding:7px 7px} .tsts-tablo thead th{font-size:.7rem;letter-spacing:.05em} /* Durum etiketleri kucultuldu. */ .durum-etiketi{padding:2px 8px;font-size:.7rem} /* Dugmeler: asil sikayet buradaydi — yazi ve dolgu fazla iriydi. */ .kurumsal-dugme{padding:5px 12px;font-size:.82rem;font-weight:600;border-radius:7px} .btn-sm.kurumsal-dugme{padding:4px 10px;font-size:.78rem} /* Yikici islem dugmeleri KUCULTULMEZ: 44px dokunma hedefi bilincli bir karardir (acik pozisyon kapatir, yanlis basma maliyeti gercek paradir). */ .kapatma-dugmesi{min-height:44px;min-width:44px} /* Diger bilesenler. */ .bilgi-kutusu{padding:9px 12px;font-size:.84rem;margin-top:10px} .bos-durum{min-height:130px;font-size:.88rem} .arac-cubugu{gap:8px;margin-top:12px} .arac-cubugu label{font-size:.78rem} .sayfalama{font-size:.84rem} .sayfalama a,.sayfalama span{padding:4px 9px} .yol-izi{font-size:.8rem;margin-bottom:8px} @media(max-width:991px){ .uygulama-kabugu{grid-template-rows:52px minmax(0,1fr) 26px} .uygulama-icerigi{padding:14px} } @media(max-width:767px){ .uygulama-icerigi{padding:12px} .kpi-karti{padding:12px 14px} .tsts-tablo th,.tsts-tablo td{padding:6px 9px} .panel-karti-basligi{padding:9px 12px} .sayfa-basligi h1{font-size:1.1rem} } @media(max-width:575px){ .uygulama-icerigi{padding:10px} } /* ============================================================================= LOGO OLCUSU VE GIRIS EKRANI ----------------------------------------------------------------------------- Referans: ayni sunucudaki Gelir Gider Takip paneli. Oradaki rozet daha kucuk ve dengeli; TSTS'te hem kare hem cevresindeki bosluk buyuktu, bu da basligi ezip rozeti sayfanin en agir ogesi haline getiriyordu. ============================================================================= */ /* --- Rozet (her iki ekran) -------------------------------------------------- Kare kuculdu, bosluklar daraldi, yazi olculeri kareyle orantilandi. */ .proje-rozeti{top:20px;left:20px;gap:10px;padding:8px 13px;border-radius:14px} .proje-kisaltmasi{width:36px;height:36px;border-radius:10px;font-size:.78rem;letter-spacing:.02em} .proje-rozeti strong{font-size:.95rem;line-height:1.25} .proje-rozeti small{font-size:.75rem;line-height:1.2} .ust-proje-kisaltmasi{width:28px;height:28px;border-radius:8px;font-size:.6rem} .ust-proje-rozeti{gap:8px;padding:5px 10px;border-radius:10px} .ust-proje-rozeti strong{font-size:.8rem} .ust-proje-rozeti small{font-size:.65rem} .kurumsal-panel-metni{top:26px;right:24px} .kurumsal-panel-metni small{font-size:.72rem;letter-spacing:.08em;opacity:.8} .kurumsal-panel-metni strong{font-size:1rem} /* --- Giris ekrani duzeni ---------------------------------------------------- Baslik clamp tavani 6.2rem'di; genis ekranda satirlar ekrani doldurup rozetle carpisiyordu. Tavan indirildi, ust bosluk azaldi. */ /* DIKKAT — `grid-template-columns` BURADA TANIMLANMAZ. Dosyanin basindaki `@media(max-width:991px)` blogu bu izgarayi tek kolona indiriyor. Kosulsuz bir yeniden tanim BURADAN SONRA geldigi icin ayni ozgullukte kazanir ve o daraltmayi OLDURUR: 576/768'de giris karti iki kolonda kalip ekrandan tasar. Kolon tanimi asagida, min-width blogunda. */ .giris-duzeni{gap:5vw;padding:110px 3.2vw 74px} /* Genis ekranda daha dar sag kolon (onceki 390-520px yerine 360-470px). `min-width` kullaniliyor ki dar ekrandaki tek kolona DOKUNMASIN. */ @media(min-width:992px){ .giris-duzeni{grid-template-columns:1fr minmax(360px,470px)} } .giris-tanitimi h1{font-size:clamp(2.6rem,4.2vw,4.4rem);line-height:1.02;letter-spacing:-.025em} .giris-tanitimi>p{margin:20px 0 32px;font-size:1.05rem;max-width:620px} /* Ayni tuzak: `@media(max-width:767px)` bu kartlari tek kolona indiriyor. Kolon tanimi kosulsuz yazilamaz. */ .modul-kartlari{gap:12px} @media(min-width:768px){ .modul-kartlari{grid-template-columns:repeat(3,minmax(140px,190px))} } .modul-karti{padding:15px 17px;border-radius:12px} .modul-karti strong{font-size:.95rem} .modul-karti span{font-size:.82rem;opacity:.82;line-height:1.35} /* --- Giris karti ------------------------------------------------------------ */ .giris-karti{padding:28px 28px 30px;border-radius:22px} .giris-karti-basligi{gap:14px;margin-bottom:24px} .giris-simgesi{width:52px;height:52px;border-radius:15px;padding:13px;color:var(--renk-acik-gri)} .giris-simgesi svg{width:100%;height:100%;display:block} .giris-karti-basligi small{font-size:.7rem;letter-spacing:.1em;opacity:.75} .giris-karti-basligi h2{margin:2px 0 0;font-size:1.25rem;letter-spacing:-.02em} .giris-karti label{display:block;margin:0 0 6px;font-size:.82rem;font-weight:500;opacity:.86} /* --- Alan icindeki simge ---------------------------------------------------- Simge alanin ICINDE durur; ayri bir sutun acmak dar ekranda tasma uretirdi. Isaretci gecirgen: simgeye tiklamak alani odaklamayi engellemez. */ .giris-alani{position:relative;margin-bottom:16px} .giris-alani-simgesi{ position:absolute;left:13px;top:50%;transform:translateY(-50%); width:18px;height:18px;pointer-events:none; color:var(--renk-metin-grisi); } .giris-alani-simgesi svg{width:100%;height:100%;display:block} .giris-karti .form-control{min-height:46px;padding-left:40px;border-radius:11px;font-size:.94rem} .giris-karti .form-control:focus{border-color:var(--renk-bordo);box-shadow:0 0 0 3px rgba(146,24,49,.22)} /* --- Giris dugmesi ---------------------------------------------------------- */ .giris-dugmesi{ display:flex;align-items:center;justify-content:center;gap:9px; min-height:46px;margin-top:4px;font-size:.95rem;font-weight:700; letter-spacing:.01em;border-radius:11px; } .giris-dugmesi svg{width:17px;height:17px;flex:0 0 auto} .alert{border-radius:11px;font-size:.88rem;padding:10px 13px} .giris-alt-bilgi{font-size:.8rem;opacity:.72} @media(max-width:991px){ .giris-duzeni{padding:96px 3.2vw 64px} .giris-tanitimi h1{font-size:clamp(2.2rem,6vw,3.2rem)} } @media(max-width:767px){ .proje-rozeti{top:14px;left:14px;padding:7px 11px} .proje-kisaltmasi{width:32px;height:32px} .giris-duzeni{padding:84px 16px 56px} .giris-karti{padding:22px 20px 24px} .modul-kartlari{gap:10px} } /* --- Stratejiler ekrani (salt okunur bilgi) -------------------------------- */ .strateji-govdesi{padding:16px 18px;font-size:.88rem;line-height:1.6} .strateji-govdesi p{margin:0 0 12px} .strateji-ozet{font-size:.95rem;font-weight:500} .strateji-alt-baslik{margin:16px 0 7px;font-size:.78rem;font-weight:600; letter-spacing:.05em;color:var(--renk-metin-grisi)} .strateji-govdesi ul{margin:0 0 12px;padding-left:19px} .strateji-govdesi li{margin-bottom:5px} .strateji-kodu{display:block;margin-top:2px;font-size:.72rem; letter-spacing:.03em;color:var(--renk-metin-grisi)} .strateji-yonler{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 22px} .strateji-alt-bilgi{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px; margin-top:14px;padding-top:12px;border-top:1px solid var(--renk-cizgi-grisi); font-size:.8rem;color:var(--renk-metin-grisi)} .strateji-belge code{font-size:.78rem;color:var(--renk-metin-grisi)} /* --- KPI kart renkleri ------------------------------------------------------ Kartlar paletteki DORT kurumsal renk arasinda donusumlu kullanilir: lacivert, bordo, koyu yesil ve koyu gri. Amac ekranin tek renge bogulmamasi. Koyu gri paletteki `--renk-metin-grisi`dir; palette baska koyu gri YOKTUR (`--renk-panel-grisi` acik gridir ve `.panel-rengi` olarak zaten kullanilir). Kucuk metin bu zeminde tam opaklikta ve biraz daha kalin yazilir: acik gri uzerindeki kontrast oraninin sinirda kalmasi, soluk bir etiketi okunmaz hale getirirdi. */ .kpi-karti.gri{color:var(--renk-acik-gri);background:var(--renk-metin-grisi)} .kpi-karti.gri span,.kpi-karti.gri small{opacity:1;font-weight:500} /* --- Simge dugmeleri -------------------------------------------------------- Metinli dugmeler tablo satirlarini gereksiz yukseltiyordu. Simge dugme kare ve dar; satir yuksekligi belirgin sekilde duser. ERISILEBILIRLIK: metin kayboldugu icin her simge dugmesinde `aria-label` ve `title` ZORUNLUDUR (bkz. sablonlar). Simgenin kendisi `aria-hidden`. OLCU: 38px. WCAG 2.2 AA asgari dokunma hedefi 24px'tir; bu onun rahatca ustunde ve metinli surumden dar. */ .simge-dugmesi{ display:inline-grid;place-items:center; width:38px;height:38px;padding:0; border:1px solid transparent;border-radius:9px; background:transparent;color:var(--renk-lacivert); text-decoration:none;cursor:pointer; transition:background-color .15s ease,color .15s ease; } .simge-dugmesi svg{width:18px;height:18px;display:block} .simge-dugmesi:hover{background:rgba(33,35,72,.08)} .simge-dugmesi:focus-visible{outline:3px solid var(--renk-bordo);outline-offset:2px} /* Filtre cubugundaki iki kare, yanindaki SECIM KUTUSUYLA ayni yukseklikte olmali (`.form-select-sm` = 31px). 38px'te dugmeler kutulardan tasip cubugu yukseltiyor ve hizasiz gorunuyordu. Olcu kutuya baglandigi icin burada 38px varsayilanindan ayrilinir. */ .arac-cubugu .simge-dugmesi{width:31px;height:31px;border-radius:7px} .arac-cubugu .simge-dugmesi svg{width:16px;height:16px} /* Filtre cubugu: dolu zeminli iki kare (referans panelle ayni dil). */ .simge-dugmesi.lacivert{color:var(--renk-acik-gri);background:var(--renk-lacivert)} .simge-dugmesi.lacivert:hover{background:var(--renk-lacivert);filter:brightness(1.25)} .simge-dugmesi.bordo{color:var(--renk-acik-gri);background:var(--renk-bordo)} .simge-dugmesi.bordo:hover{background:var(--renk-bordo);filter:brightness(1.15)} /* Indirme dugmesi: KAYDEDEN eylem, filtreleyen (lacivert) ve temizleyen (bordo) eylemlerden renkle ayrisir. Uc dugme yan yana duruyor. */ .simge-dugmesi.yesil{color:var(--renk-acik-gri);background:var(--renk-koyu-yesil)} .simge-dugmesi.yesil:hover{background:var(--renk-koyu-yesil);filter:brightness(1.25)} /* --- Kapatma dugmesi -------------------------------------------------------- ONCEKI KARAR GUNCELLENDI. Daha once 44x44 metinli bir dugmeydi; gerekce "yanlis basmanin maliyeti gercek para" idi. Iki ayrim yapildi: PAPER : gercek para YOK. 38px simge yeterli; onay istemi (confirm) yerinde duruyor ve asil koruma zaten odur. CANLI : gercek para VAR. Dokunma hedefi 44px'te BIRAKILDI ve dugme dolu bordo zeminle ayirt edildi — iki farkli agirliktaki eylem ayni gorunmemeli. */ .kapatma-dugmesi{color:var(--renk-bordo);border-color:var(--renk-cizgi-grisi)} .kapatma-dugmesi:hover{color:var(--renk-acik-gri);background:var(--renk-bordo);border-color:var(--renk-bordo)} /* Dolu bordo + 44px YALNIZCA canli ekranda: orada gercek para var ve dugme tek basina durur. Paper satirinda uc dugme yan yana; orada ayni muamele satiri agirlastiriyordu, olcu digerleriyle esitlendi (asagida). */ .kapatma-dugmesi.canli{ width:44px;height:44px; color:var(--renk-acik-gri);background:var(--renk-bordo);border-color:var(--renk-bordo); } .kapatma-dugmesi.canli:hover{background:var(--renk-bordo);filter:brightness(1.15)} .kapatma-dugmesi.canli svg{width:20px;height:20px} /* Simge dugme tasiyan hucre dar kalsin; satir gereksiz genislemesin. */ .tsts-tablo td:has(> form > .simge-dugmesi), .tsts-tablo td:has(> .simge-dugmesi), .tsts-tablo td.eylem-hucresi{width:1%;white-space:nowrap;padding-top:4px;padding-bottom:4px} /* Tarih hucresi tek satirda kalsin: "12.08.2026 13:00" sarilirsa satir yuksekligi iki katina cikar ve genis tabloda bu her satirda hissedilir. */ .zaman-hucresi{white-space:nowrap} /* --- Rapor ekrani ----------------------------------------------------------- Rapor metni SABIT GENISLIKLI yazi tipiyle gosterilir. Uretici 78 sutuna gore hizalanmis tablolar basiyor (`Rapor\RaporMetni`); oranti yazi tipinde o hizalama TAMAMEN bozulur ve tablolar okunamaz hale gelir. Kaydirma KUTUNUN ICINDE kalir: uzun satir sayfayi yatay kaydirmamali. */ .rapor-metni{ margin:0; padding:14px 16px; max-height:70vh; overflow:auto; background:var(--renk-panel-grisi); border-radius:10px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.74rem; line-height:1.45; white-space:pre; color:var(--renk-lacivert); } .rapor-eylemleri{display:flex;gap:8px;align-items:center} /* Tarih alani secim kutularindan DAR: iceriginin genisligi sabittir (YYYY-MM-DD) ve esit genislik verilseydi cubukta bos yer kaplardi. */ .arac-cubugu .alan.tarih-onayar{flex:0 1 190px}.rapor-secim-satiri{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 26px}.rapor-secim-satiri .arac-cubugu{flex:0 0 auto;flex-wrap:nowrap;margin-top:0;gap:8px}.rapor-secim-satiri .arac-cubugu .alan{flex:0 0 auto;min-width:0}.rapor-secim-satiri .arac-cubugu .alan input{width:128px}.rapor-secim-satiri .arac-cubugu .alan input[type=number]{width:88px}.arac-cubugu .alan.tarih-alani{flex:0 1 240px}.tarih-ikilisi{display:flex;align-items:center;gap:6px}.tarih-sarmali{position:relative}.takvim-panosu{position:absolute;z-index:20;top:calc(100% + 6px);left:0;padding:12px;background:var(--renk-acik-gri);border:1px solid var(--renk-cizgi-grisi);border-radius:12px;box-shadow:var(--golge)}.takvim-gezinme{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.takvim-ipucu{color:var(--renk-metin-grisi);font-size:.78rem}.takvim-ok{width:26px;height:26px;padding:0;color:var(--renk-acik-gri);background:var(--renk-lacivert);border:0;border-radius:7px;cursor:pointer}.takvim-basligi{margin-bottom:6px;text-align:center;font-weight:700;font-size:.8rem}.takvim-izgarasi{display:grid;grid-template-columns:repeat(7,26px);gap:2px}.takvim-gun-basligi{display:grid;place-items:center;height:22px;color:var(--renk-metin-grisi);font-size:.7rem}.takvim-gunu{height:26px;padding:0;color:var(--renk-lacivert);background:transparent;border:0;border-radius:6px;font-size:.76rem;cursor:pointer}.takvim-gunu:hover{background:var(--renk-panel-grisi)}.takvim-gunu.arada{background:var(--renk-panel-grisi)}.takvim-gunu.uc{color:var(--renk-acik-gri);background:var(--renk-lacivert);font-weight:700}.takvim-temizle{width:100%;margin-top:10px;padding:6px;color:var(--renk-acik-gri);background:var(--renk-bordo);border:0;border-radius:7px;font-size:.76rem;cursor:pointer}.tarih-ikilisi .form-control{flex:1 1 0;min-width:0}.tarih-ayraci{color:var(--renk-metin-grisi)}.gizli{display:none!important} /* --- Yogun tablo varyanti --------------------------------------------------- Yirmi sutunlu Paper Trade tablosu icin. Yatay kaydirma cubugu bu ekranin degerini goturuyordu: bir satiri okumak icin saga kaydirip geri donmek gerekiyor ve satirlar arasi karsilastirma imkansizlasiyor. Punto kucultmesi TABLO SEVIYESINDE yapilir, tek tek hucrelerde degil: sutunlarin coguna dokunmak gerekiyordu ve hucre hucre sinif dagitmak ayni sonucu daha dagilmis bicimde verirdi. */ .tsts-tablo.tablo-sik{font-size:.78rem} .tsts-tablo.tablo-sik thead th{font-size:.66rem} /* --- Yatay kaydirma: OLCULDU, SONRA KESILDI --------------------------------- Tablo yeniden tasti. Sebep punto degil, SUTUN SAYISININ ARTMASIYDI: CIKIS, MFE, MAE sutunlari ve "stop tasindi" isareti eklendi. Basssiz tarayiciyla olculdu (dort temsili satir, `min-content`): TOPLAM 1499px ISLEM NO 177 ACILIS TARIHI 105 ISLEM 116 STRATEJI 87 KAPANIS TARIHI 105 digerleri ~40-83 Kullanilabilir genislik = ekran - 32 (sarmalayici) - 2 (pencere kenarligi) - 15 (dikey kaydirma) - 40 (icerik dolgusu) - 2 (panel kenarligi): 1440 ekran -> 1349px -> TASMA 152px 1500 ekran -> 1409px -> TASMA 90px (kullanicinin gordugu hal) 1920 ekran -> 1829px -> tasma yok Uc kalem kesildi; olculen sonuc 1499 -> 1229px: 1440 ekran -> 1349px kullanilabilir -> 120px pay 1366 ekran -> 1275px -> 44px pay 1280 ekran -> 1185px -> 46px TASMA (hedef disi) Kesilmeyenler de bilincli: dugme olcusu (30px) WCAG dokunma hedefi gerekcesiyle, strateji sutunu ise iki kodun ayni goruntuye dusmesi gerekcesiyle KUCULTULMEDI — ikisinin de gerekcesi bu dosyada yazili. 1) HUCRE DOLGUSU 7px -> 5px. Yirmi sutunda 4px x 20 = 80px eder ve tek bir sutunda hissedilmez. Yalnizca `tablo-sik` icin; diger tablolarda 7px kalir. 2) IKI HUCREDE SARMA SERBEST. `.tsts-tablo th,td` genelinde `white-space:nowrap` vardir ve bu tabloda iki hucreyi gereksiz genisletiyordu: ISLEM NO uc rozet (numara + "!n" + "stop tasindi") tek satirda dizilmek zorundaydi: 177px. TARIHLER "01.09.2026 07:26" bolunemiyordu: 105px x 2. SARMA YALNIZCA DARDA OLUR. Genis ekranda tarayici sutuna zaten yer verir ve satirlar TEK satir kalir — 1920'de olculdu, satir yuksekligi degismedi (41px). 1440'ta satir 42 -> 61px cikar; bu, yatay kaydirma cubugunun bedelinden ucuzdur. Kaydirma cubugu satiri okumak icin saga gidip geri donmeyi zorunlu kilar ve satirlar arasi karsilastirmayi imkansizlastirir; uzun satir yalnizca daha uzun satirdir. `zaman-hucresi` genel kuralindaki `nowrap` DURUYOR (diger tablolarda satir tek satirliktir ve orada sarma satir yuksekligini iki katina cikarirdi); burada YALNIZCA yogun varyant icin ezilir. 3) BASLIKLARDA DA SARMA SERBEST. Uc sutunun genisligini VERI degil BASLIK belirliyordu: "KAPANIS TARIHI" 105px iken icerigi ("01.09.2026" alt alta) 69px'e siger; "PLAN R/R" 65 -> 39px, "NET PnL" 58 -> 44px. Toplam kazanc 81px ve bedeli TEK SEFERLIK: baslik satiri iki satira cikar, veri satirlarina hicbir sey eklenmez. Sutun basina en buyuk kazanci veren kalem budur. */ .tsts-tablo.tablo-sik th, .tsts-tablo.tablo-sik td{padding-left:5px;padding-right:5px} .tsts-tablo.tablo-sik td.kimlik-hucresi, .tsts-tablo.tablo-sik td.zaman-hucresi, .tsts-tablo.tablo-sik thead th{white-space:normal} /* --- Strateji sutunu -------------------------------------------------------- Tablonun en genis sutunuydu (218px). Once kirpma denendi ve YANLIS CIKTI: `DESTEK_DIRENC_KIRILIM` ile `DESTEK_DIRENC_TEPKI` ikisi de `DESTEK_DIRE...` oluyordu — iki ayri strateji ekranda ayni goruntuye donusuyordu. Ayirt edici harf 15. sirada; oraya ulasmak icin kazanilan genisligin tamamini geri vermek gerekiyordu. Cozum kirpmak degil, bu SUTUNA OZGU daha kucuk punto: en uzun kod (`KANAL_UYUMSUZLUK_DONUSU`, 23 karakter) tam sigar. Kod okunuyor, kelime degil; bu yuzden kucuk punto burada okumayi bozmaz. `text-overflow` yine de birakildi: ileride daha uzun bir strateji kodu eklenirse sutun sessizce genisleyip kaydirma cubugunu geri getirmesin. */ .tsts-tablo td.strateji-hucresi{ max-width:132px; font-size:.68rem; white-space:normal; overflow-wrap:break-word; line-height:1.25; } /* --- Satir eylemleri -------------------------------------------------------- Bir satirin tum eylemleri (acilis grafigi, kapanis grafigi, kapatma) TEK hucrede yan yana durur. Ayri bir GRAFIK sutunu tabloyu bir sutun daha genisletiyordu; tablo zaten genis. OLCU 30px — UCU DE. Tek bir satirda uc dugme yan yana duruyor; birini buyutmek satir yuksekligini o dugmeye gore belirliyor ve tablo genelinde agirlik yaratiyor. WCAG 2.2 AA asgari dokunma hedefi 24px'tir, 30px onun ustunde kalir. Kapatma dugmesi olcuyle DEGIL, uc baska isaretle ayrisir: bordo ikon rengi, cerceve, ve oncesindeki bosluk. Ustune bir de tarayici onay istemi var (`confirm`) — asil koruma zaten odur, olcu degil. Canli ekrandaki kapatma dugmesi 44px kalir; orada gercek para var ve dugme tek basina durur. */ .satir-eylemleri{display:flex;align-items:center;gap:1px} .satir-eylemleri form:not(:first-child){margin-left:5px} /* `min-width` / `min-height` DE ezilmeli. `.kapatma-dugmesi` iki ayri yerde `min-height:44px; min-width:44px` alir. Yalnizca `width` vermek YETMEZ: `min-*` her zaman kazanir ve dugme sessizce 44px kalir. Tam olarak bu yasandi — olcu degistirildi sanildi, tarayicida hicbir sey degismedi. */ .satir-eylemleri .simge-dugmesi{ width:30px;height:30px; min-width:30px;min-height:30px; border-radius:8px; } .satir-eylemleri .simge-dugmesi svg{width:15px;height:15px} /* Grafik dugmesi asama rengi TASIMAZ — islem basina tek dugme var. Onceden acilis koyu yesil / kapanis bordo idi ve ikonun rengi acacagi seyi onceden soyluyordu; iki goruntu tek grafikte birlesince ayrim anlamini yitirdi. Renk `.simge-dugmesi` varsayilanindan gelir (kurumsal lacivert), yani diger satir eylemleriyle ayni dilde. */ /* --- Filtre cubugu yerlesimi ------------------------------------------------ `.dugme-grubu` ayni zamanda `.alan` sinifini tasir ve oradan `flex-direction:column` miras alir. Metinli dugmelerde bu fark edilmiyordu; simge dugmelere gecince iki kare ALT ALTA dizildi ve satir gereksiz yukseldi. Yon acikca yataya sabitlenir. `flex:0 0 auto` — dugme grubu, filtre alanlari gibi buyuyup bos yer kaplamasin; genisligi icerigi kadar olsun. */ .arac-cubugu .alan.dugme-grubu{ flex-direction:row; align-items:flex-end; flex:0 0 auto; min-width:0; gap:8px; } /* Baslik ile filtreler arasindaki bosluk daraltildi. */ .arac-cubugu{margin-top:8px} .arac-cubugu .alan{gap:3px} .arac-cubugu label{font-size:.76rem;margin:0} /* --- Filtre alani genisligi ------------------------------------------------- Paper Trade'e altinci filtre (Neden) eklendi. 150px'lik alt sinirda alti alan tek satira sigmiyor ve cubuk iki satira dusuyordu. Alt sinir 120px'e cekilir: "KANAL_UYUMSUZLUK_DONUSU" gibi uzun degerler acilir listede tam okunur, kapali haldeyken kisalmasi sorun degil. KURAL MEDIA SORGUSU ICINDE: 767px altinda alanlar `flex:1 1 100%` ile alt alta gecer ve o kural bu satirdan ONCE tanimlidir. Kosulsuz yazilsaydi sonradan geldigi icin onu ezer, dar ekranda alti filtre yan yana sikisirdi. Bu dosyada ayni siralama tuzagina daha once dusulmustu. */ @media(min-width:768px){ .arac-cubugu .alan{min-width:120px;flex:1 1 120px} } /* --- Grafik penceresi ------------------------------------------------------- Mumlar acilis/kapanis aninda toplanip saklanir; bu ekran onlari yalnizca cizer. Renkler paletten gelir: yukselen mum koyu yesil, alcalan bordo. */ .grafik-alani{width:100%;height:420px;border-radius:var(--yaricap-kucuk);overflow:hidden} .grafik-icerik{border-radius:var(--yaricap-orta)} .grafik-alt-baslik{display:block;margin-top:2px;font-size:.78rem;color:var(--renk-metin-grisi)} .grafik-lejant{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:.8rem} .grafik-lejant-kalemi{display:inline-flex;align-items:center;gap:6px;color:var(--renk-metin-grisi)} .grafik-lejant-kalemi i{width:10px;height:10px;border-radius:3px;display:inline-block} @media(max-width:767px){ .grafik-alani{height:300px} } /* ============================================================================= Menu simgeleri, iki satirli rozet, yogun KPI izgarasi, bilgi seridi ============================================================================= */ /* --- Ust rozet: TSTS karesi + kisa ad --------------------------------------- Alt baslik ve "Takip Sistemi" kaldirildi; geriye tek satirlik "Trade System" kaldi. `line-height:1` ve `margin:0` — yazinin kendi satir kutusu kareyle ayni merkezde otursun; varsayilan satir araligi birkac piksel asagi kaydiriyordu. */ .ust-proje-adi{ margin:0; font-size:.86rem; line-height:1; letter-spacing:-.01em; white-space:nowrap; } /* --- Menu simgeleri --------------------------------------------------------- Simge ve yazi ayni satirda, sabit boslukla. `flex:0 0 auto` — simge, uzun menu adlari yuzunden ezilmesin. Olcu 16px: menu yazisi .94rem (~15px) ve simge onunla ayni gorsel agirlikta olmali. Daha buyugu menuyu "ikon serisi"ne cevirip yaziyi ikincillestirirdi. */ .menu-simgesi{width:16px;height:16px;flex:0 0 auto;opacity:.9} .ana-menu-baglantisi{display:inline-flex;align-items:center;gap:7px} .ana-menu-baglantisi.aktif .menu-simgesi{opacity:1} /* Offcanvas'ta simge daha buyuk: orada dokunmatik hedefler genis ve yazi soldan daha uzakta basliyor. */ .offcanvas-menu-baglantisi{display:flex;align-items:center;gap:11px} .offcanvas-menu-baglantisi .menu-simgesi{width:19px;height:19px} .offcanvas-menu-baglantisi>span{min-width:0} /* --- KPI izgarasi: yogun varyant -------------------------------------------- Dashboard, Kasa/Performans/Rapor kutularini da tasidigi icin 16 olcu gosterir. Dort sutunlu varsayilan olcuyle bu kadar kutu ekrani asagi dogru uzatiyordu. ALTI SUTUN (kullanici karari, 2026-08-14). 16 kutu 6 + 6 + 4 olarak dizilir; son satirda iki bos hucre kalir. Sekiz sutun denendi ve 8 + 8 ile tam iki satir yapiyordu ama kutular okunamayacak kadar daraliyordu: baslik yazisi .66rem'e, deger .95rem'e dusuyordu. Bos hucre birakmak, okunmayan kutudan iyidir. Sinif adi sayiyi ICERMEZ (`altili` degil `yogun`): kutu sayisi iki kez degisti, tekrar degisirse ad yalan soylemesin. KURALLAR MEDIA SORGUSU ICINDE: dosyanin basindaki daraltma kurallari (`max-width:1199px` -> 2 sutun, `max-width:767px` -> 1 sutun) BU SATIRLARDAN ONCE tanimli. Kosulsuz yazilsaydi sonradan geldigi icin onlari ezer ve dar ekranda alti kutu yan yana sikisirdi. */ @media(min-width:1200px){ .kpi-izgarasi.yogun{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px} /* Olculer sekiz sutundan alti sutuna cikarken buyutuldu: kutu genisledigi icin kucultmeye gerek kalmadi. Daraltma sekiz sutunun bedeliydi. */ .kpi-izgarasi.yogun .kpi-karti{padding:13px 15px;border-radius:10px} .kpi-izgarasi.yogun .kpi-karti span{font-size:.74rem} .kpi-izgarasi.yogun .kpi-karti strong{margin:4px 0 2px;font-size:1.3rem} .kpi-izgarasi.yogun .kpi-karti small{font-size:.68rem;line-height:1.3} } /* --- Bilgi seridi ----------------------------------------------------------- Kasa / Performans / Raporlar ekranlarinin ust bilgisi. O ekranlardaki buyuk KPI kartlari Dashboard'a tasindi. Ayni kartlari her ekranda TEKRAR gostermek, kullanicinin ayni sayiyi dort yerde gormesi demekti; ekranin kendi isi (hareket listesi, kirilim tablolari) ise asagi itiliyordu. Yerine tek satirlik bir serit: kimlik (ekran adi + baglam) solda, olculer sagda. Ayni dikey alanda dort kat daha az yer kaplar. */ .bilgi-seridi{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:14px; padding:9px 16px 9px 10px; color:var(--renk-acik-gri); background:var(--renk-lacivert); border-radius:14px; } .bilgi-seridi-simgesi{ width:36px;height:36px;flex:0 0 auto; display:grid;place-items:center; background:rgba(226,230,235,.12); border-radius:10px; } .bilgi-seridi-simgesi svg{width:19px;height:19px} .bilgi-seridi-kimlik{display:flex;flex-direction:column;line-height:1.2;min-width:0} .bilgi-seridi-kimlik small{font-size:.66rem;letter-spacing:.09em;opacity:.7} .bilgi-seridi-kimlik strong{font-size:.98rem;letter-spacing:-.01em} /* Rozet: kimligi tamamlayan kisa kod (hesap kodu, ornek sayisi ...). */ .bilgi-seridi-rozeti{ padding:4px 11px; background:var(--renk-bordo); border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.02em; white-space:nowrap; } /* Olculer sagda toplanir; ilkinden onceki cizgi kimlikten ayirir. */ .bilgi-seridi-olculer{ display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-left:auto; } .bilgi-seridi-olcusu{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap} .bilgi-seridi-olcusu small{font-size:.66rem;letter-spacing:.06em;opacity:.7} .bilgi-seridi-olcusu strong{ font-size:1.02rem; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } /* Isaret RENKLE degil DOLGUYLA verilir. Lacivert zeminde kurumsal koyu yesil (#0b5e34) metin olarak okunmuyor; paletin disina cikmak ise tasarim denetimine takilir (ve dogru takilir). Deger kucuk bir hap icine alinir: zemin renkli, yazi acik gri — kontrast korunur ve renk kodu paletten cikmaz. */ .bilgi-seridi-olcusu.pozitif strong, .bilgi-seridi-olcusu.negatif strong{ padding:1px 9px; border-radius:999px; font-size:.92rem; } .bilgi-seridi-olcusu.pozitif strong{background:var(--renk-koyu-yesil)} .bilgi-seridi-olcusu.negatif strong{background:var(--renk-bordo)} @media(max-width:767px){ .bilgi-seridi-olculer{margin-left:0;gap:14px} .bilgi-seridi{padding:10px 12px} } /* --- Masaustu menu: simgelerle birlikte tek satira sigmali ------------------- Simgeler eklenince menu 1440px'te 176px tasti ve SON IKI KALEM (Ayarlar, Loglar) ekranda gorunmez oldu — `.ana-menu` yatay kayan bir kutu oldugu icin hata sessizdi: menu bozulmus gorunmuyor, kalemler sadece yok. Bu yuzden kalem dolgusu, aradaki bosluk ve punto birlikte sikilastirilir. Kural yalnizca masaustu menunun GORUNDUGU genislikte (Bootstrap `xxl`, 1400px) gecerli; altinda zaten offcanvas var. */ @media(min-width:1400px){ .ana-menu{gap:2px} .ana-menu-baglantisi{padding:8px 7px;font-size:.88rem;gap:6px} .menu-simgesi{width:15px;height:15px} } /* --- Alt bilgi --------------------------------------------------------------- Sahiplik ifadesi eklenince satir uzadi; punto kucultuldu. Alt serit 30px yuksekliginde sabit (`.uygulama-kabugu` izgara satiri), yazi buyudukce dikey ortalama bozulur. */ .uygulama-alt-bilgi{font-size:.72rem;letter-spacing:.01em;opacity:.9} /* Ayarlar — strateji listesi. Madde isaretleri kaldirilir; her satir zaten kendi rozeti veya kutusuyla baslar ve ikisi ust uste gorsel gurultu yapar. */ .strateji-listesi{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .strateji-satiri{display:flex;align-items:baseline;gap:10px} .strateji-satiri code{font-size:.86rem} .strateji-satiri .form-check-label{cursor:pointer} .strateji-satiri .form-check-input:disabled+.form-check-label{opacity:.6;cursor:not-allowed} /* --- Onay kutusu: kurumsal lacivert ----------------------------------------- Bootstrap isaretli kutuyu kendi birincil mavisiyle boyar. O mavi palette YOKTUR ve lacivert/bordo yaninda yabanci duruyordu. Odak halkasi da ayni renge cekilir; birakilsaydi kutu lacivert, cevresindeki halka mavi olur ve ayrisma tam odaklandigi anda — yani en gorunur oldugu anda — ortaya cikardi. `--bs-form-check-bg` degil dogrudan `background-color`: Bootstrap isaretli durumda arka plani `background-color` ile yaziyor, degisken yalnizca isaretsiz durumu besliyor. */ .form-check-input:checked{ background-color:var(--renk-lacivert); border-color:var(--renk-lacivert); } .form-check-input:focus{ border-color:var(--renk-lacivert); box-shadow:0 0 0 .25rem rgba(33,35,72,.25); } /* --- ISLEM NO rozeti --------------------------------------------------------- Ayni is icin Webhooklar, Sinyaller ve Paper Trade ekranlarinda AYNI numara ve AYNI renk gorunur; renk numaradan turetilir (bkz. `islemNoRozeti()`). Rakamlar `tabular-nums` ile hizalanir: rozetler alt alta dizildiginde degisken genislikli rakamlar sutunu titretiyordu. */ .islem-no{ display:inline-block; padding:3px 9px; border-radius:var(--yaricap-kucuk); color:var(--renk-acik-gri); background:var(--renk-lacivert); font-size:.82rem; font-weight:700; letter-spacing:.02em; white-space:nowrap; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } .islem-no.bordo{background:var(--renk-bordo)} .islem-no.yesil{background:var(--renk-koyu-yesil)} /* Dorduncu ton KOYU gridir (metin grisi, #6c757d) -- paletteki tek koyu gri. Once panel grisi (#e2e6eb) kullaniliyordu; o ton tablo zemininden ayrilmadigi icin rozet "rozet gibi" durmuyor, digerlerinin yaninda soluk kaliyordu. Beyaz metinle kontrast 4.69:1, yani dort rozetin dordu de beyaz yazili. */ .islem-no.gri{background:var(--renk-metin-grisi)} /* Bir webhook birden cok sinyal dogurabilir; rozetler sarilarak dizilir. */ .islem-no-listesi{display:flex;flex-wrap:wrap;gap:4px} /* --- Kasa defteri: islem bazinda gruplama -------------------------------- Her islem ayri bir . Gruplar arasindaki ayrim CSS ile degil YAPIYLA kurulur; buradaki kurallar yalnizca o yapiyi GORUNUR kilar. */ .kasa-defteri tbody.kasa-grubu{border-top:2px solid var(--renk-cizgi-grisi)} .kasa-defteri .kasa-grup-basligi th{ padding:10px 12px; background:var(--renk-panel-grisi); font-weight:600; text-align:left; } .kasa-grup-basligi > th > *{vertical-align:middle;margin-right:8px} .kasa-grup-enstruman{font-weight:700} /* Ozet satiri defterin bir parcasi DEGIL, onun toplamidir; ust cizgi bunu ayirir. Zemin degistirilmez -- ayri renk "farkli bir kayit turu" izlenimi verirdi, oysa bu yalnizca yukaridaki satirlarin aritmetigi. */ .kasa-defteri .kasa-ozet td{ border-top:1px solid var(--renk-cizgi-grisi); padding-top:10px; padding-bottom:10px; } .kasa-hesap{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:8px; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .kasa-islec{color:var(--renk-metin-grisi);font-weight:700} /* --- Arama kutulu arac cubugu ------------------------------------------------ Arama kutusu eklenen ekranda filtre kutulari daralir: ucu de eski genisliginde kalirsa satir tasar ve arama kutusu alt satira duser. `.aramali` sinifi yalnizca arama kutusu olan formda bulunur, digerleri etkilenmez. */ .arac-cubugu.aramali .alan{min-width:118px;flex:1 1 118px} .arac-cubugu .arama-alani{flex:2 1 210px;min-width:170px} /* Kutu kenarlari: acilir listeler, arama kutusu ve ikon dugmeler AYNI yaricapta olsun; farkli olduklarinda satir dagilmis gorunuyordu. */ .arac-cubugu .form-select, .arac-cubugu .form-control, .arac-cubugu .simge-dugmesi{border-radius:10px} /* --- Kurumsal dugme: hover'da KOYU BORDO ------------------------------------ Bootstrap'in `.btn:hover` kurali `--bs-btn-hover-bg` tanimsiz oldugu icin arka plani SAYDAM yapiyordu; giris ekraninda altindaki lacivert kart gorunuyor ve dugme lacivere donmus gibi duruyordu. Renk burada ACIKCA verilir; saydam zeminde `filter` tek basina hicbir sey yapmaz. KOYULUK ICIN YENI RENK SABITI EKLENMEDI: palet kurumsaldir ve `tasarimKontrolu.php` izin verilmeyen renkleri reddeder -- bordonun koyu tonu denendi ve REDDEDILDI (yorumda bile: tarayici yorum/kural ayrimi yapmaz). Ayni koyuluk `brightness` ile elde edilir -- ayni desen `.simge-dugmesi.lacivert:hover` icinde de kullaniliyor. */ .kurumsal-dugme:hover, .kurumsal-dugme:focus-visible{ color:var(--renk-acik-gri); background:var(--renk-bordo); border-color:var(--renk-bordo); filter:brightness(.82); } /* --- Bosluk isareti ---------------------------------------------------------- Cikis, seviyeden degil mumun ACILISINDAN doldugunda "Neden" hucresinde gorunur. Kapanis nedeninin YERINE gecmez, yanina eklenir: pozisyonu kapatan sey yine stoptur (bkz. goc 0033). Renk NOTR (metin grisi) — kirmizi/yesil verilseydi iyi mi kotu mu oldugu soylenmis olurdu. Bosluk hem zarari buyutebilir hem kazanci; nitelik bildirir, yargi bildirmez. */ .bosluk-isareti{ margin-left:6px; padding:1px 6px; color:var(--renk-metin-grisi); border:1px solid var(--renk-cizgi-grisi); border-radius:8px; font-size:.86em; white-space:nowrap; } /* --- Hucre alti isareti ------------------------------------------------------- "stop tasindi" ve "bosluk" rozetleri degerin YANINA degil ALTINA iner. Yanina konuldugunda hucre iki rozet genisligine aciliyor ve 20 sutunlu tablo bozuluyordu (07.09 ekran goruntusu). `display:block` + `max-content` rozeti kendi satirina alir ama hucreyi rozetten genis tutmaz. Bu kural `.durum-etiketi` (inline-block) ve `.bosluk-isareti` (margin-left:6px) kurallarindan SONRA gelir; ayni ozgullukte sonraki kazanir. Yukari tasinirsa sessizce etkisiz kalir — `HucreAltIsaretiTest` sirayi olcer. */ .hucre-alt-isareti{ display:block; width:max-content; margin:3px 0 0; } /* --- Stop tasindi simgesi (ISLEM sutunu) -------------------------------------- Eylem degil bilgi: dugme gorunumu (hover zemini, el imleci) yok, `help` imleci var; ayrinti title'da. Renk koyu yesil: stop tasima koruyucu bir eylemdir (basabasa/kara). Palet disina cikilmaz. */ .stop-tasindi-simgesi{color:var(--renk-koyu-yesil);cursor:help} .stop-tasindi-simgesi:hover{background:transparent} /* --- Log bloklari: baslik + Kopyala/Indir ------------------------------------ Baslik, adet rozeti ve kaynak notu solda; iki dugme sagda. Dar ekranda (576px alt siniri) baslik sarar, dugmeler alta iner — tasma yok. Pasif dugme (blok bos) Bootstrap'in kendi `disabled` gorunumunu alir. */ .log-blok-basligi{align-items:center;flex-wrap:wrap;gap:8px 16px} .log-blok-adi{display:flex;align-items:center;flex-wrap:wrap;gap:8px} .log-blok-adi .metin-notu{color:var(--renk-metin-grisi)} .log-eylemleri{display:flex;gap:6px;margin-left:auto} /* --- Idari iptal --------------------------------------------------------- Kapatma ile YAN YANA durur ama farkli bir eylemdir: kapatma piyasadan fiyat alir, iptal fiyata hic bakmaz. Gerekce satirda DURMAZ, tiklamada sorulur -- kalici bir metin kutusu tabloyu sisiriyordu. Renk NOTR (metin grisi): iptal ne iyi ne kotu bir sonuctur, bir OLCUM YOKLUGUDUR. Kapatma dugmesinin bordosuyla ayni agirlikta olsaydi iki eylem esdegermis gibi okunurdu. */ .iptal-dugmesi{color:var(--renk-metin-grisi);background:transparent;border:1px solid var(--renk-cizgi-grisi)} .iptal-dugmesi:hover{color:var(--renk-acik-gri);background:var(--renk-metin-grisi)} /* Acik risk kartinda piyasa kirilimi: iki deger alt alta, kart yuksekligini bozmadan. Tek satirda yan yana dursaydi uzun sayilarda tasardi. */ .risk-piyasa{display:block;font-size:.62em;line-height:1.35;font-weight:600} /* --- Acilir liste vurgusu ve odak: MAVI YOK ------------------------------- IKI AYRI SEY, IKI AYRI KURAL. Ilk yazimda ikisi karistirildi ve yanlis olan duzeltildi: 1) KUTUNUN cercevesi/golgesi -> odaklandiginda Bootstrap mavi cerceve ciziyordu 2) ACILIR LISTEDEKI vurgu bari-> secili/uzerinde gezilen satirin arka plani mavi Istenen: (2) LACIVERT olsun, (1) hic renklenmesin — kutu koyu gri kalsin. --- (1) KUTU: cerceve KOYU GRI, golge YOK --- Bootstrap `.form-control:focus` / `.form-select:focus` icin `--bs-primary` mavisini ve genis bir golge kullanir (hex degeri BILEREK yazilmadi: `tasarimKontrolu.php` palet disi rengi YORUMDA BILE reddeder). Burada renk paletten bir GRI ile degistirilir ve golge kaldirilir. ERISILEBILIRLIK KAYBOLMAZ: klavye ile gezen kullanici icin `:focus-visible` kurali (bordo `outline`) dosyada zaten var ve DEGISMEDI. Kaldirilan sey yalnizca farenin her tiklamasinda beliren renkli golgedir. */ .form-control:focus, .form-select:focus{ border-color:var(--renk-metin-grisi); box-shadow:none; } /* Giris ekrani kendi BORDO odagini korur; o kural bu dosyada DAHA ONCE geldigi icin ustteki kural onu ezerdi. Ayni ozgullukte yeniden yazilir. */ .giris-karti .form-control:focus{ border-color:var(--renk-bordo); box-shadow:0 0 0 3px rgba(146,24,49,.22); } /* --- (2) ACILIR LISTEDEKI VURGU BARI: LACIVERT --- `option` arka planini duz `background-color` ile boyamak Chrome/Edge'de SECILI satirda calismaz -- tarayici vurguyu kendi cizer ve rengi ezer. Ic golgeyi tasirmak (`inset` + buyuk yayilma) o vurgunun uzerini boyar; yaygin ve calisan yontem budur. SINIR -- BU KURAL HER YERDE TUTMAZ: acilir listeyi isletim sistemi ciziyorsa (ozellikle macOS/Safari) hicbir CSS onu degistiremez. Windows uzerinde Chrome/Edge'de calisir. Yani bu bir IYILESTIRMEDIR, garanti degil; kutunun kendi gorunumu (yukarisi) her yerde ayni kalir. */ select option:checked, select option:hover, select option:focus{ color:var(--renk-acik-gri); background:var(--renk-lacivert); box-shadow:0 0 10px 100px var(--renk-lacivert) inset; } /* --- Kod blogu: cok satirli komut ------------------------------------------ Dokuman sayfalarinda calistirilacak komutlar cok satirli olabiliyor; satir ici `` bunu tasimaz. Yatay tasma KENDI kutusunda kalir -- sayfa govdesi asla yana kaymamali (responsive kurali). RENK PALETTEN: panel grisi zemin, lacivert metin. Yeni renk sabiti eklenmedi; `tasarimKontrolu.php` palet disini reddeder. */ .kod-blogu{ margin:12px 0; padding:12px 14px; color:var(--renk-lacivert); background:var(--renk-panel-grisi); border:1px solid var(--renk-cizgi-grisi); border-radius:10px; overflow-x:auto; font-size:.82rem; line-height:1.55; } .kod-blogu code{white-space:pre}