: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);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) --- */ .uygulama-offcanvas{color:var(--renk-acik-gri);background:var(--renk-lacivert);max-width:86vw} .uygulama-offcanvas .offcanvas-header{border-bottom:1px solid var(--renk-cizgi-grisi)} .uygulama-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} .veri-tablosu{width:100%;margin:0;font-size:.92rem} .veri-tablosu th,.veri-tablosu td{white-space:nowrap;vertical-align:middle} .veri-tablosu td.sarabilir{white-space:normal;min-width:220px;overflow-wrap:anywhere} .veri-tablosu 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)} .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. */ .veri-tablosu td.deger-pozitif{color:var(--renk-koyu-yesil)} .veri-tablosu 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 --- */ .uygulama-formu .satir{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px} .uygulama-formu label{display:block;margin-bottom:4px;font-size:.9rem} .uygulama-formu .form-control,.uygulama-formu .form-select{border-color:var(--renk-cizgi-grisi)} .uygulama-formu .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)} .durum-etiketi.uyari{color:var(--renk-acik-gri);background: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 `.uygulama-formu` 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%} .uygulama-formu .dugme-satiri{justify-content:stretch} .uygulama-formu .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, .veri-tablosu td, .veri-tablosu 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. */ .veri-tablosu th,.veri-tablosu td{padding:12px 16px} /* SUTUN BASLIKLARI KALIN (proje sahibi karari). 600 agirlikta govde metninden yeterince ayrilmiyordu: goz tablonun nerede basladigini bulmak icin cizgiyi ariyordu, basligi degil. */ .veri-tablosu thead th{ font-size:.76rem;font-weight:700;letter-spacing:.06em; color:var(--renk-metin-grisi);border-bottom-width:1px; } .veri-tablosu tbody tr{transition:background-color .12s ease} .veri-tablosu tbody tr:hover{background:rgba(226,230,235,.42)} .veri-tablosu 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; } /* PARA YONU RENGI — eski panelle ayni okuma: iceri giren para (tahsilat) -> koyu yesil disari cikan para (odeme) -> bordo Virman ikisi de degildir: para sistem icinde yer degistirir, ne girer ne cikar. Ona notr zemin birakilir; yesil veya bordo verilseydi ay sonunda "bu para nereden geldi" sorusunu yanlis yone dondururdu. */ .durum-etiketi.giris{color:var(--renk-acik-gri);background:var(--renk-koyu-yesil)} .durum-etiketi.cikis{color:var(--renk-acik-gri);background:var(--renk-bordo)} /* Dugmeler. UZERINE GELMEDE ZEMIN YENIDEN YAZILIR — bu bir hata duzeltmesidir. Bootstrap'in `.btn:hover` kurali `background-color:var(--bs-btn-hover-bg)` diyor ve o degisken bir varyant sinifi (`.btn-primary` gibi) verilmediginde BOS kaliyor. Ozgullugu bizim `.kurumsal-dugme` kuralimizdan yuksek oldugu icin (0,2,0 > 0,1,0) bordo zemini eziyordu: dugme uzerine gelindiginde TAMAMEN KAYBOLUYORDU. Eski kural yalnizca `filter` veriyordu, zemini geri koymuyordu — bu yuzden sorun giris ekraninda ciplak gozle gorunur hale geldi. `.ikincil-dugme:hover` zemini zaten yaziyordu, o yuzden orada yasanmadi. KOYULASMA `filter` ILE, YENI RENKLE DEGIL: palet yedi renktir ve koyu bir bordo tonu eklemek sekizinci renk olurdu. `brightness(.88)` ayni bordoyu koyu gosterir, tanimli renk yine `--renk-bordo` kalir. */ .kurumsal-dugme{border-radius:9px;padding:7px 15px;letter-spacing:.01em;transition:filter .15s ease,background-color .15s ease} .kurumsal-dugme:hover, .kurumsal-dugme:focus-visible{color:var(--renk-acik-gri);background:var(--renk-bordo);border-color:var(--renk-bordo);filter:brightness(.88)} /* 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} .veri-tablosu th,.veri-tablosu 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,.veri-tablosu 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 20 sutunlu bir tabloda sutun basina 10px, toplamda 200px eder. Genis tablolarda tasmanin en buyuk tek kalemi sutun ICERIGI degil HUCRE DOLGUSUDUR. Once olcun, sonra kesin. */ .veri-tablosu{font-size:.85rem} /* DIKEY DOLGU 7px'ten 4px'e: satirlar daraldi, ekrana daha cok kayit sigiyor. Yatay 7px'ten 10px'e cikti — dikey daralinca sutunlar birbirine yapisik gorunuyordu. Toplam satir yuksekligi yine de dusuyor cunku yuksekligi belirleyen sey dikey dolgu ve icindeki dugmenin boyu. */ .veri-tablosu th,.veri-tablosu td{padding:4px 10px} .veri-tablosu 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} .veri-tablosu th,.veri-tablosu 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 ----------------------------------------------------------------------------- Rozet karesi ve cevresindeki bosluk kucuk tutulur. Buyuk birakildiginda basligi ezer ve sayfanin en agir ogesi haline gelir. ============================================================================= */ /* --- 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} } /* --- 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 DUGMELER, YANINDAKI KUTULARLA TAM AYNI YUKSEKLIKTE. Onceki hal 31px'ti ve "`.form-select-sm` = 31px" varsayimina dayaniyordu. Bu varsayim YANLISTI: bu projede kutu yazi tipi .78rem'e cekiliyor (`.uygulama-icerigi .form-control`) ve kutu ~29px'e dusuyor. Dugmeler kutulardan yuksek kalip cubugu sisiriyordu. Artik olcu VARSAYILMIYOR, IKISINE DE ACIKCA VERILIYOR: 30px. Boylece yazi tipi degistiginde hizalama bozulmaz. */ .arac-cubugu .simge-dugmesi{width:30px;height:30px;border-radius:7px} .arac-cubugu .simge-dugmesi svg{width:15px;height:15px} .arac-cubugu .form-control, .arac-cubugu .form-select, .arama-kutusu .form-control{height:30px;padding-top:2px;padding-bottom:2px} /* 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)} /* SATIR ISLEMLERI RENK DILI (proje sahibi karari): izle -> lacivert (bakmak: notr) duzenle -> koyu yesil (degistirmek: olumlu, geri alinabilir) sil -> bordo (yikici) dorduncu-> koyu gri (ikincil ne varsa) RENK TEK BASINA ANLAM TASIMAZ: uc dugmenin de `title` ve `aria-label` metni var. Renk korlugu olan bir kullanici icin ayrim oradan gelir; renk yalnizca hizli tarama icin. */ .simge-dugmesi.yesil{color:var(--renk-acik-gri);background:var(--renk-koyu-yesil)} .simge-dugmesi.gri{color:var(--renk-acik-gri);background:var(--renk-metin-grisi)} /* --- Kapatma dugmesi -------------------------------------------------------- ONCEKI KARAR GUNCELLENDI. Daha once 44x44 metinli bir dugmeydi; gerekce "yanlis basmanin maliyeti gercek para" idi. Iki ayrim yapildi: GERI ALINABILIR : 38px simge yeterli; onay istemi (confirm) yerinde duruyor ve asil koruma zaten odur. GERI ALINAMAZ : dokunma hedefi 44px'te birakilir — 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)} /* Simge dugme tasiyan hucre dar kalsin; satir gereksiz genislemesin. */ .veri-tablosu td:has(> form > .simge-dugmesi), .veri-tablosu td:has(> .simge-dugmesi), .veri-tablosu 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} /* --- Yogun tablo varyanti --------------------------------------------------- Cok sutunlu (20+) tablolar 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. */ .veri-tablosu.tablo-sik{font-size:.78rem} .veri-tablosu.tablo-sik thead th{font-size:.66rem} /* --- Satir eylemleri -------------------------------------------------------- Bir satirin tum eylemleri (goruntule, duzenle, sil) TEK hucrede yan yana durur. Her eylem icin ayri bir sutun acmak tabloyu gereksiz genisletir. OLCU 30px — HEPSI. 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. Yikici dugme 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. */ .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. */ /* IKI SINIF AYNI KURALDAN OLCULENIR. `.satir-eylemleri` kit'in eski ekranlarindan, `.satir-islemleri` Faz 3-4 liste ekranlarindan geliyor. Adlari neredeyse ayni ama ikincisine olcu verilmemisti: dugmeler 38px varsayilaninda kaldi ve HER SATIRI yukseltti. Fark gozle bulunamadi cunku iki ekran yan yana konmadikca ayni gorunuyor — ancak gercek veriyle dolu bir listede satir yuksekligi hissedildi. Yeni sinif eklerken buraya da ekleyin; ayri bir olcu vermek onu digerlerinden ayirmak demektir. */ .satir-eylemleri .simge-dugmesi, .satir-islemleri .simge-dugmesi{ width:26px;height:26px; min-width:26px;min-height:26px; border-radius:7px; } .satir-eylemleri .simge-dugmesi svg, .satir-islemleri .simge-dugmesi svg{width:14px;height:14px} /* SATIR DUGMELERI DOLU DEGIL, CERCEVELI — renk SIMGEDE durur. Dolu haldeyken her satirda uc renkli kutu vardi ve tablo, verinin degil dugmelerin ekrani oluyordu; goz once onlara gidiyordu. Cerceveli halde dugmeler geri cekilir, renk yalnizca simgeyi boyar ve ayrim korunur. FILTRE CUBUGUNDAKI dugmeler DOLU KALIR: orada satir tekrari yok, iki-uc dugme var ve cubugun kendisi bir eylem alanidir. */ .satir-eylemleri .simge-dugmesi, .satir-islemleri .simge-dugmesi{ background:var(--renk-acik-gri); border-color:var(--renk-cizgi-grisi); } .satir-islemleri .simge-dugmesi.lacivert, .satir-eylemleri .simge-dugmesi.lacivert{color:var(--renk-lacivert)} .satir-islemleri .simge-dugmesi.yesil, .satir-eylemleri .simge-dugmesi.yesil{color:var(--renk-koyu-yesil)} .satir-islemleri .simge-dugmesi.bordo, .satir-eylemleri .simge-dugmesi.bordo{color:var(--renk-bordo)} .satir-islemleri .simge-dugmesi.gri, .satir-eylemleri .simge-dugmesi.gri{color:var(--renk-metin-grisi)} /* --- 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 ------------------------------------------------- Alti filtre 150px'lik alt sinirda tek satira sigmaz; cubuk iki satira duser. Alt sinir 120px: 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} } /* ============================================================================= Menu simgeleri, iki satirli rozet, yogun KPI izgarasi, bilgi seridi ============================================================================= */ /* --- Ust rozet: kisaltma karesi + kisa ad --------------------------------------- Rozet tek satirlik kisa ada indirgenmistir. `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 16'ya kadar olcu tasiyabilir. Dort sutunlu varsayilan olcuyle bu kadar kutu ekrani asagi dogru uzatir. ALTI SUTUN. 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 ----------------------------------------------------------- Ic ekranlarin ust bilgisi. Buyuk KPI kartlari Dashboard'a aittir. Ayni kartlari her ekranda TEKRAR gostermek, kullanicinin ayni sayiyi dort yerde gormesi demektir; ekranin kendi isi (liste, kirilim tablolari) ise asagi itilir. 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 (kayit kodu, adet ...). */ .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} /* --- 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); } /* --- KAYIT NO rozeti --------------------------------------------------------- Ayni kayit icin butun ekranlarda AYNI numara ve AYNI renk gorunur; renk numaradan turetilir (bkz. `kayitNoRozeti()`). Rakamlar `tabular-nums` ile hizalanir: rozetler alt alta dizildiginde degisken genislikli rakamlar sutunu titretiyordu. */ .kayit-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; } .kayit-no.bordo{background:var(--renk-bordo)} .kayit-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. */ .kayit-no.gri{background:var(--renk-metin-grisi)} /* Bir satir birden cok numara tasiyabilir; rozetler sarilarak dizilir. */ .kayit-no-listesi{display:flex;flex-wrap:wrap;gap:4px} /* ========================================================================= ACILIR MENU (Faz 2) — Donemler, Tanimlar, Firmalar, Islemler ========================================================================= Eski panelde bu dort kalem acilirdi; ust seritte on kalem yan yana ancak boyle siger. Bootstrap'in `dropdown` bileseni kullanilir (JS bundle zaten offcanvas icin yukleniyor), gorunum paletle YENIDEN tanimlanir: Bootstrap varsayilani beyaz zemin ve kendi mavisidir; menunun geri kalaniyla yan yana geldiginde "baska bir uygulamadan" gorunur. */ .ana-menu-acilir{position:relative} .ana-menu-acilir>.ana-menu-baglantisi{border:0;background:transparent;font:inherit;cursor:pointer} .ana-menu-acilir>.ana-menu-baglantisi.pasif{cursor:not-allowed} /* Ok isareti kalemin PARCASIDIR: acilir oldugunu tiklamadan once soyler. Yalnizca renkle veya konumla anlatmak, dokunmatik ekranda kesfedilmez. */ .acilir-oku{margin-left:2px;font-size:.7em;opacity:.75} .menu-acilir-kutusu{ min-width:230px; padding:6px; color:var(--renk-lacivert); background:var(--renk-acik-gri); border:1px solid var(--renk-cizgi-grisi); border-radius:12px; box-shadow:var(--golge); } .menu-acilir-kutusu .dropdown-item{ display:block; width:100%; padding:8px 12px; border:0; border-radius:8px; color:var(--renk-lacivert); background:transparent; text-align:left; font:inherit; } .menu-acilir-kutusu .dropdown-item:hover, .menu-acilir-kutusu .dropdown-item:focus{background:var(--renk-panel-grisi)} /* AKTIF SECIM VURGULANIR: acilir kutuda "hangi donemdeyim" sorusu ancak secili kalem farkli gorunuyorsa cevaplanir. Kalinlik + zemin birlikte kullanilir; yalnizca renk, renk korlugunde ayirt edilmezdi. */ .menu-acilir-kutusu .dropdown-item.aktif{ background:var(--renk-panel-grisi); font-weight:700; } .menu-acilir-kutusu .dropdown-item.pasif{ opacity:.55; cursor:not-allowed; } .menu-acilir-kutusu .dropdown-item small{display:block;color:var(--renk-metin-grisi);font-size:.78rem} .menu-acilir-kutusu .dropdown-divider{margin:6px 4px;border-top:1px solid var(--renk-cizgi-grisi)} .menu-acilir-kutusu form{margin:0} /* ========================================================================= UST SERITTE AKTIF FIRMA VE DONEM ========================================================================= Coklu veritabani mimarisinde yanlis firmada islem yapmak HATASIZ calisir, yalnizca yanlis yere yazar. Bu yuzden aktif firma ve donem her ekranda gorunur durur — kullanicidan hatirlamasini beklemek, hatanin kendisini gorunmez kilar. */ .ust-baglam{ display:flex; align-items:center; gap:8px; flex:0 0 auto; min-width:0; padding:5px 10px; border:1px solid rgba(217,222,231,.35); border-radius:12px; } .ust-baglam-firma{ max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.86rem; font-weight:600; } /* ROZET FIRMA DEGISTIRME DUGMESI OLDUGUNDA: gorunum aynen korunur, yalnizca tiklanabilir oldugunu soyleyen bir ok eklenir. Dugme gibi bicimlenseydi ust serit iki dugmeli gorunur ve rozetin "durum gosterme" isi kaybolurdu. */ .ust-baglam-dugme{ display:inline-flex;align-items:center;gap:6px; padding:0;border:0; color:inherit;background:transparent; font:inherit;cursor:pointer; } .ust-baglam-ok{opacity:.7;font-size:.7rem} .ust-baglam-dugme:hover{text-decoration:underline} .ust-baglam .dropdown-menu form{margin:0} /* Acilir basligi ("Firma degistir") kalemlerden KUCUK ve sonuk: bir baslik, secilebilir bir satir gibi gorunmemeli. */ .menu-acilir-kutusu .dropdown-header{ padding:4px 12px; color:var(--renk-metin-grisi); font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } .ust-baglam-donem{ padding:2px 8px; border-radius:8px; background:rgba(226,230,235,.18); font-size:.82rem; font-weight:700; font-variant-numeric:tabular-nums; } /* Offcanvas'ta ayni bilgi kart olarak durur; ust serit dar ekranda gizli. */ .offcanvas-baglam{ margin-bottom:14px; padding:10px 12px; border:1px solid rgba(217,222,231,.30); border-radius:10px; } .offcanvas-baglam strong,.offcanvas-baglam span{display:block} .offcanvas-baglam span{color:var(--renk-cizgi-grisi);font-size:.86rem} /* Mobilde acilir menu DUZLESTIRILIR: ic ice acilan kutular offcanvas icinde tasar ve parmakla gezinmeyi zorlastirir. Baslik grup etiketi olur. */ .offcanvas-menu-grubu{display:flex;flex-direction:column;gap:2px;margin:8px 0} .offcanvas-menu-basligi{ display:flex; align-items:center; gap:11px; padding:10px 14px 4px; color:var(--renk-cizgi-grisi); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .offcanvas-menu-grubu .offcanvas-menu-baglantisi{ padding-left:32px; border:0; background:transparent; font:inherit; } /* ========================================================================= UST SERIT: MENU SARAR, KAYMAZ (Faz 2) ========================================================================= OLCUM: gercek menu on kalemdir ve Turkce basliklar uzundur ("Musteri & Tedarikci", "Satis Faturalari"). Simgeli ve .94rem punto ile serit ~1520px yer ister; 1440px ekranda proje rozeti, aktif firma/donem ve kullanici alanindan sonra menuye ~650px kalir. ONCEKI DAVRANIS TEHLIKELIYDI: `.ana-menu` yatay KAYAN bir kutuydu, yani sigmayan kalemler ekrandan sessizce cikiyordu — menu bozulmus gorunmuyor, son kalemler yalnizca YOK oluyordu. `belgeler/10-MENU.md` bu hatayi "sessiz" diye isaretliyor. COZUM: serit sarar. Sigmayan kalem alt satira gecer; hicbir kalem kaybolmaz. Yeni kirilim noktasi URETILMEDI (kural), yalnizca var olan duzen esnetildi. SIMGE MASRAFI: desktop seritte simge cizilmez (10 kalem x 31px = ~310px). Simgeler offcanvas menude durmaya devam eder; orada dikey liste var ve yer sorunu yok. Iki satirin ustune cikmamak icin punto da .86rem'e cekildi. */ .ana-menu{flex-wrap:wrap;overflow-x:visible;row-gap:2px} .ana-menu .ana-menu-baglantisi{padding:7px 9px;font-size:.86rem} .ana-menu .menu-simgesi{display:none} /* Ust satir artik sabit 68px degil: menu iki satira cikinca serit buyur, icerik penceresi kadar kisalir. Sabit birakilsaydi ikinci satir seridin disina tasar ve ilk satirin uzerine binerdi. */ .uygulama-kabugu{grid-template-rows:auto minmax(0,1fr) 30px} .ust-menu{flex-wrap:wrap;row-gap:6px} /* ========================================================================= UST SERIT TEK SATIRA SIGAR (Faz 2.1) ========================================================================= Faz 2'de menu on kalemdi ve sarmasi kabul edilmisti. Firma kalemi Tanimlar'in altina alininca dokuz kaleme dustu; kalan farki ust seridin SAG tarafindan kazaniyoruz: - aktif firma/donem rozeti kuculdu (~120px) - kullanici adi acilir menuye girdi, yerinde iki harflik dugme kaldi (~170px) - menu puntosu .80rem, yatay dolgu 8px Sarma (`flex-wrap`) KALDIRILMADI: olcu tutmayan bir ekranda kalem gizlenmesindense alt satira gecmesi hala dogru davranis. Tek satir bir hedef, bir garanti degil. */ .ana-menu .ana-menu-baglantisi{padding:7px 7px;font-size:.78rem} .ana-menu{gap:3px} .ust-baglam{gap:6px;padding:4px 8px} .ust-baglam-firma{max-width:130px;font-size:.78rem} .ust-baglam-donem{padding:1px 6px;font-size:.76rem} /* Kullanici: bas harfleri tasiyan yuvarlak dugme. Ad ve cikis acilirda. */ .kullanici-dugmesi{ display:inline-flex; align-items:center; gap:3px; padding:3px 6px 3px 3px; color:var(--renk-acik-gri); background:transparent; border:0; border-radius:20px; cursor:pointer; } .kullanici-dugmesi:hover{background:rgba(226,230,235,.15)} .kullanici-bas-harfleri{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--renk-bordo); font-size:.76rem; font-weight:800; letter-spacing:.02em; } /* Acilirdaki ad satiri bir eylem DEGIL, bilgidir: tiklanabilir gorunmemeli. */ .menu-acilir-kutusu .kullanici-adi-satiri{ font-weight:700; cursor:default; background:transparent; } /* Dashboard olcu kutulari DORT KURUMSAL RENGI kullanir: lacivert (varsayilan), bordo, koyu yesil ve koyu gri. Dorduncu kutu once panel grisiydi; o ton kartin kendi zeminine yakin oldugu icin kutu "kutu gibi" durmuyordu. */ .kpi-karti.gri{background:var(--renk-metin-grisi)} /* ========================================================================= TANIM EKRANLARI (Faz 3) ========================================================================= Yedi tanim ekrani ayni iki desene dayanir: satir icinde simge dugmeleri ve sayisal hizali sutunlar. Ekran basina tekrarlanmasin diye burada. */ /* Satir islemleri: duzenle/sil dugmeleri yan yana, sarmadan. `form` da satir icinde durur — silme POST oldugu icin her dugme kendi formunu tasir; blok kalsalardi dugmeler alt alta dizilirdi. */ .satir-islemleri{display:flex;align-items:center;gap:6px} .satir-islemleri form{display:inline-flex;margin:0} /* ISLEM BILDIRIMI — YUZER, AKISA GIRMEZ. Once akista bir kutuydu ve mesaj cikinca butun sayfa asagi kayiyordu; kullanici tam da baktigi satiri kaybediyordu. `fixed` ile kutu kendi katmaninda durur, altindaki hicbir sey oynamaz. UST SERIDIN ALTINA konumlanir (68px serit + bosluk) ve SAGA yaslanir; ortada olsaydi kart basligini ve "+ Ekle" dugmesini orterdi. */ .islem-bildirimi{ position:fixed;z-index:1080; top:78px;right:24px; display:flex;align-items:flex-start;gap:10px; max-width:min(460px,calc(100vw - 48px)); padding:12px 14px; background:var(--renk-acik-gri); border:1px solid var(--renk-cizgi-grisi); border-left:4px solid var(--renk-koyu-yesil); border-radius:var(--yaricap-kucuk); box-shadow:var(--golge); animation:bildirim-girisi .18s ease-out; } .islem-bildirimi.hata{border-left-color:var(--renk-bordo)} .islem-bildirimi-simge{flex:0 0 auto;line-height:1.4} .islem-bildirimi.basari .islem-bildirimi-simge{color:var(--renk-koyu-yesil)} .islem-bildirimi.hata .islem-bildirimi-simge{color:var(--renk-bordo)} .islem-bildirimi-metin{flex:1 1 auto} /* KAPATMA DUGMESI JS'SIZ TARAYICI ICIN DE DURUR: otomatik kapanma betikle yapiliyor, betik calismazsa mesaj ekranda kilitli kalmamali. */ .islem-bildirimi-kapat{ flex:0 0 auto; padding:0 2px; color:var(--renk-metin-grisi); background:transparent;border:0; font-size:1.1rem;line-height:1;cursor:pointer; } .islem-bildirimi-kapat:hover{color:var(--renk-lacivert)} /* Kaybolurken de anlik degil: goz nereye baktigini kaybetmesin. */ .islem-bildirimi.kapaniyor{opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease} @keyframes bildirim-girisi{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .islem-bildirimi{animation:none} .islem-bildirimi.kapaniyor{transition:none} } @media(max-width:575px){ .islem-bildirimi{top:auto;bottom:16px;right:12px;left:12px;max-width:none} } /* TARIH ARALIGI SECICI — tek kutu, icinde iki tarih alani. `
` ile calisir; JS YOK. Acilir panel tarayicinin kendi ozelligi oldugu icin betik kapaliyken de acilir. Hazir bir tarih araligi kutuphanesi CDN veya derleme adimi isterdi — ikisi de yasak. */ .tarih-secici{position:relative;min-width:210px} .tarih-secici > summary{ display:flex;align-items:center;justify-content:space-between;gap:8px; min-height:31px;padding:4px 10px; background:var(--renk-acik-gri); border:1px solid var(--renk-cizgi-grisi); border-radius:var(--yaricap-kucuk); cursor:pointer;list-style:none; } .tarih-secici > summary::-webkit-details-marker{display:none} .tarih-secici > summary::after{content:"▾";opacity:.6} .tarih-secici[open] > summary{border-color:var(--renk-lacivert)} /* Panel MUTLAK KONUMLU: akista yer kaplasaydi acildiginda filtre cubugu yukselir ve altindaki tablo asagi kayardi — kullanici tikladigi anda sayfanin oynadigini gorurdu. */ .tarih-secici-panel{ position:absolute;z-index:20;top:calc(100% + 6px);left:0; display:grid;gap:8px;min-width:230px;padding:12px; background:var(--renk-acik-gri); border:1px solid var(--renk-cizgi-grisi); border-radius:var(--yaricap-kucuk); box-shadow:var(--golge); } .tarih-secici-panel label{display:block;margin-bottom:3px} /* Arama kutusu filtrelerin SAGINA yaslanir (eski panelle ayni yer): `margin-left:auto` onu cubugun sonuna iter. Dar ekranda `flex-wrap` devreye girer ve alt satira gecer — sikismaz. */ .arac-cubugu .arama-alani{margin-left:auto;flex:0 1 320px} .arama-kutusu{display:flex;align-items:center;gap:6px} .arama-kutusu .form-control{min-width:0} /* ISLEMLER SUTUNU SON SUTUNDUR ve SAG KENARA YAPISIK DURUR. Duz haliyle yatay yeri ONDEKI SUTUNLARIN GENISLIGINE bagliydi: Kasa & Banka'da bir noktada, Faturalar'da baska bir noktada; genis tabloda ise yatay kaydirma yapilmadan hic gorunmuyordu. `sticky` ile sutun tablonun sagina yapisir — tablo ne kadar genis olursa olsun dugmeler hep ayni yerde ve hep gorunur. ZEMIN ZORUNLU: saydam birakilirsa altindan kayan sutunlar gorunur ve dugmeler okunamaz hale gelir. Zemin satirin kendi zeminiyle ayni tutulur, uzerine gelme tonu dahil — aksi halde yapisik hucre satirdan kopuk gorunurdu. */ .veri-tablosu th.islem-sutunu, .veri-tablosu td.islem-sutunu{ position:sticky; right:0; z-index:2; width:1%; white-space:nowrap; background:var(--renk-acik-gri); } .veri-tablosu th.islem-sutunu{background:var(--renk-panel-grisi);z-index:3} /* Yapisik sutun DAR TUTULUR: genis olsaydi altindaki tutar sutununu ortme ihtimali artardi. Yatay dolgu tablonun genelinden kucuk. */ .veri-tablosu th.islem-sutunu, .veri-tablosu td.islem-sutunu{padding-left:10px;padding-right:10px} /* Uzerine gelmede yapisik hucre PANEL GRISINE doner. Satirin kendi tonu yari saydam (`rgba(226,230,235,.42)`) ama yapisik hucre SAYDAM OLAMAZ — altindan kayan sutunlar gorunurdu. Ayni ailenin opak tonu kullanilir; yeni bir renk uretmek yedi renk kuralini bozardi. */ .veri-tablosu tbody tr:hover td.islem-sutunu{background:var(--renk-panel-grisi)} /* Yapisik sutunun sol kenarina ince bir cizgi: altindan kayan icerikle arasinda gorsel sinir olsun, kaydirma sirasinda "ustune bindi" hissi vermesin. */ .veri-tablosu th.islem-sutunu::before, .veri-tablosu td.islem-sutunu::before{ content:""; position:absolute; top:0;bottom:0;left:0; border-left:1px solid var(--renk-cizgi-grisi); } /* Sayisal sutunlar SAGA hizalanir ve tabular rakam kullanir: farkli genislikteki rakamlar sutunu titretiyor, goz binler basamagini karsilastiramiyordu. */ .veri-tablosu td.sayisal,.veri-tablosu th.sayisal{ text-align:right; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; white-space:nowrap; } /* ========================================================================= KAYIT PENCERESI (modal) — liste + "Ekle" deseni (Faz 3.1) ========================================================================= Eski panelde tanim ekranlari LISTE gosterir, ekleme/duzenleme bir pencere acar. Onceki surumde form listenin USTUNDE duruyordu; kullanicinin bildigi duzen bu degil ve liste her ekranda formun altina kaciyordu. Bootstrap `modal` bileseni kullanilir (JS bundle zaten offcanvas ve acilir menu icin yukleniyor). Gorunum paletle YENIDEN tanimlanir: Bootstrap varsayilani beyaz zemin ve kendi mavisidir, panelin geri kalaniyla yan yana gelince "baska bir uygulamadan" gorunur. */ .kayit-penceresi .modal-content{ color:var(--renk-lacivert); background:var(--renk-acik-gri); border:1px solid var(--renk-cizgi-grisi); border-radius:16px; } .kayit-penceresi .modal-header{ align-items:center; padding:14px 20px; color:var(--renk-acik-gri); background:var(--renk-lacivert); border-bottom:0; border-radius:15px 15px 0 0; } .kayit-penceresi .modal-title{font-size:1rem;font-weight:700} .kayit-penceresi .modal-body{padding:18px 20px} .kayit-penceresi .modal-footer{ gap:8px; padding:12px 20px; border-top:1px solid var(--renk-cizgi-grisi); } /* Kapatma dugmesi koyu zeminde: Bootstrap'in siyah ikonu gorunmuyordu. */ .kayit-penceresi .btn-close{filter:invert(1) grayscale(100%);opacity:.85} .kayit-penceresi .btn-close:hover{opacity:1} /* Vazgec dugmesi ikincil: ayni agirlikta iki dugme, hangisinin asil eylem oldugunu belirsizlestirir. */ .ikincil-dugme{ color:var(--renk-lacivert); background:transparent; border:1px solid var(--renk-cizgi-grisi); font-weight:600; } .ikincil-dugme:hover{background:var(--renk-panel-grisi)} /* Kart basligindaki "Ekle" dugmesi — liste ile ayni satirda, sagda. */ .panel-karti-basligi .ekle-dugmesi{display:inline-flex;align-items:center;gap:6px} /* Pencere icindeki alanlar tablo/form standardiyla ayni izgarayi kullanir. */ .pencere-izgarasi{display:flex;flex-wrap:wrap;gap:14px} .pencere-izgarasi .alan{flex:1 1 180px;min-width:0} .pencere-izgarasi .alan-genis{flex:2 1 320px} .pencere-izgarasi label{display:block;margin-bottom:4px;font-size:.82rem;font-weight:600} /* Pasif simge dugmesi (orn. Faz 4'te acilacak "Hareketler"): tiklanamaz gorunur ama YERINDE durur — gizlenseydi kullanici ozelligin var olup olmadigini bilemezdi. */ .simge-dugmesi.pasif{opacity:.4;cursor:not-allowed;pointer-events:none} /* ========================================================================= LISTE SERIDI VE SAYFALAMA (Faz 3.1) ========================================================================= */ /* Baslik seridi: Geri Don solda, baslik ORTADA, Ekle sagda. Baslik `flex:1` ile ortalanir; iki dugme farkli genislikte oldugu icin `justify-content` ile ortalamak basligi hafifce kaydiriyordu. */ .kart-serit{gap:12px} .kart-serit-basligi{flex:1;text-align:center} .geri-dugmesi{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} /* Sayfalama iki parcadir: solda aralik metni, sagda satir secici + numaralar. Dar ekranda alt alta gecerler (`.sayfalama` zaten sariyor). */ .sayfalama{justify-content:space-between} .sayfalama-sag{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .satir-secici{display:flex;align-items:center;gap:6px;margin:0} .satir-secici label{font-size:.84rem;color:var(--renk-metin-grisi)} .satir-secici .form-select{width:auto;min-width:72px} .sayfa-numaralari{display:flex;align-items:center;gap:4px} /* Numaralar esit genislikte: 1 ile 13 arasinda dugme boyu degisince satir her sayfa gecisinde hafifce kayiyordu. */ .sayfa-numaralari a,.sayfa-numaralari span{ min-width:34px; text-align:center; font-variant-numeric:tabular-nums; } .sayfa-numaralari .atlama{background:transparent;color:var(--renk-metin-grisi)} .sayfa-numaralari .pasif{opacity:.4;cursor:not-allowed} /* ========================================================================= TIPOGRAFI VE KOSE YARICAPI — panel geneli (Faz 3.1, proje sahibi karari) ========================================================================= TEK OLCU: panel icindeki metin ust menuyle AYNI boyda (.78rem). Once icerik menuden belirgin olcude buyuktu; iki farkli olcu ayni ekranda iki ayri yogunluk hissi veriyor ve tablo satirlari gereksiz yer kapliyordu. VURGU RENKLE DEGIL AGIRLIKLA yapilir: palet yedi renk oldugu icin "biraz daha koyu" bir ton uretilemez. Kalin = onemli (kod, tutar, baslik), egik = ikincil aciklama. */ .uygulama-icerigi{font-size:.78rem} .uygulama-icerigi h1{font-size:1.2rem} .sayfa-basligi small{font-size:.76rem;font-style:italic} .panel-karti-basligi h2,.kart-serit-basligi{font-size:.82rem} .uygulama-icerigi label{font-size:.76rem} .uygulama-icerigi .form-control,.uygulama-icerigi .form-select{font-size:.78rem} .uygulama-icerigi .btn{font-size:.78rem} /* Tablo: baslik satiri kucuk ve harf araligi acik — sutun adi bir ETIKETTIR, veriyle ayni agirlikta okunmamali. Kod ve tutar kalin: satirda once onlara bakiliyor. */ .veri-tablosu thead th{font-size:.7rem;font-weight:700;letter-spacing:.05em} .veri-tablosu td{font-size:.78rem} .veri-tablosu td:first-child{font-weight:700} .veri-tablosu td.sayisal{font-weight:600} .metin-notu{font-size:.72rem;font-style:italic} .bos-durum strong{font-size:.9rem} .bos-durum span{font-size:.78rem;font-style:italic} .kayit-sayisi,.satir-secici label{font-size:.76rem} .sayfalama,.sayfa-numaralari a,.sayfa-numaralari span{font-size:.78rem} .kayit-penceresi .modal-title{font-size:.86rem} .kayit-penceresi .modal-body{font-size:.78rem} .durum-etiketi{font-size:.68rem;font-weight:700;letter-spacing:.03em} /* MENU: yalnizca UST serit kalin. Acilir kalemler ayni olcude ama normal agirlikta — hepsi kalin olsaydi ust menunun "bolum basligi" oldugu gorulmezdi. */ .ana-menu .ana-menu-baglantisi{font-weight:700} .menu-acilir-kutusu .dropdown-item{font-size:.78rem;font-weight:500} .menu-acilir-kutusu .dropdown-item.aktif{font-weight:700} .menu-acilir-kutusu .dropdown-item small{font-size:.7rem;font-style:italic} .offcanvas-menu-baglantisi{font-size:.84rem} .offcanvas-menu-baglantisi small{font-size:.72rem;font-style:italic} /* KOSELER YUVARLANIR. Kutu kenarlari panelin geri kalaniyla ayni dili konussun: kartlar 14px, form alanlari ve dugmeler 10px, etiketler tam yuvarlak. Keskin kose kalan tek yer tablo hucreleridir — orada yuvarlaklik sutun hizasini gozle bozuyor. */ .uygulama-icerigi .form-control,.uygulama-icerigi .form-select{border-radius:10px} .uygulama-icerigi .btn{border-radius:10px} .panel-karti{border-radius:var(--yaricap-orta)} .bilgi-kutusu{border-radius:var(--yaricap-kucuk)} .durum-etiketi{border-radius:999px} .table-responsive{border-radius:var(--yaricap-kucuk);overflow:hidden} .sayfa-numaralari a,.sayfa-numaralari span{border-radius:9px} /* Kart seridindeki simge: baslikla ayni satirda, ayni renkte. Ekran adi KALIN: seridin ortasinda duran tek metin o ve kartin neyi listeledigini soyleyen sey. Ince kaldiginda iki yanindaki dugmelerle ayni agirlikta okunuyordu. */ .kart-serit-basligi{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700} .serit-simgesi{flex:0 0 auto;opacity:.85} /* Sayfa basligi kaldirilan ekranlarda kart en uste oturur; kartin ust bosluğu sayfa basligindan geliyordu. */ .uygulama-icerigi > .panel-karti:first-child{margin-top:0} /* ========================================================================= DUGME UZERINE GELME — HER YERDE AYNI: HAFIF KOYULASMA (proje sahibi karari) ========================================================================= Onceki hallerde bazi dugmeler uzerine gelince ACILIYOR (brightness > 1), bazilari zit renge donuyordu. Ikisi de "baska bir dugmeye donustu" hissi veriyor; kullanici tikladigi seyin ayni sey oldugundan emin olamiyor. Kural: uzerine gelince renk DEGISMEZ, yalnizca bir tik koyulasir (brightness .92). Koyulasma her zeminde ayni yonde okunur — acilma ise koyu zeminde "sonuk" gorunur. Yeni renk uretilmedigi icin yedi renk kurali da korunur. `transition` ile hareket hissedilir olur; `prefers-reduced-motion` acik olan kullanicida gecis kapanir (asagida, mevcut kural). */ .uygulama-sayfasi .btn:hover, .kurumsal-dugme:hover, .ikincil-dugme:hover, .simge-dugmesi:hover, .simge-dugmesi.lacivert:hover, .simge-dugmesi.bordo:hover, .simge-dugmesi.yesil:hover, .simge-dugmesi.gri:hover, .kapatma-dugmesi:hover, .geri-dugmesi:hover, .ekle-dugmesi:hover{ filter:brightness(.92); transition:filter .15s ease,background-color .15s ease; } /* Zemini saydam olan dugmelerde koyulasma gorunmez; onlarda hafif bir zemin belirir — yine renk degistirmeden, paletin kendi tonuyla. */ .simge-dugmesi:hover{background:rgba(33,35,72,.10)} .simge-dugmesi.lacivert:hover{background:var(--renk-lacivert)} .simge-dugmesi.bordo:hover{background:var(--renk-bordo)} .simge-dugmesi.yesil:hover{background:var(--renk-koyu-yesil)} .simge-dugmesi.gri:hover{background:var(--renk-metin-grisi)} /* SATIR DUGMELERI CERCEVELI OLDUGU ICIN yukaridaki dolu-zemin kurallarindan MUAF. Onlar uygulansaydi uzerine gelince dugme birden dolu renge doner ve "baska bir dugmeye donustu" hissi verirdi — tam olarak kacinilan sey. Burada zemin bir tik koyulasir, renk yerinde kalir. */ .satir-islemleri .simge-dugmesi:hover, .satir-islemleri .simge-dugmesi.lacivert:hover, .satir-islemleri .simge-dugmesi.bordo:hover, .satir-islemleri .simge-dugmesi.yesil:hover, .satir-islemleri .simge-dugmesi.gri:hover, .satir-eylemleri .simge-dugmesi:hover, .satir-eylemleri .simge-dugmesi.lacivert:hover, .satir-eylemleri .simge-dugmesi.bordo:hover, .satir-eylemleri .simge-dugmesi.yesil:hover, .satir-eylemleri .simge-dugmesi.gri:hover{ background:var(--renk-panel-grisi); border-color:var(--renk-metin-grisi); filter:none; } .ikincil-dugme:hover{background:var(--renk-panel-grisi)} .kapatma-dugmesi:hover{color:var(--renk-acik-gri);background:var(--renk-bordo);border-color:var(--renk-bordo)} /* Ust seritteki koyu zeminli ogeler: koyulasma yerine hafif aydinlik zemin — koyu lacivert uzerinde daha da koyulasmak "sondu" gibi gorunuyor. */ .ana-menu-baglantisi:hover, .kullanici-dugmesi:hover, .cikis-dugmesi:hover{background:rgba(226,230,235,.18);transition:background-color .15s ease} /* Acilir menu ve sayfa numaralari: zemin bir ton koyulasir. */ .menu-acilir-kutusu .dropdown-item:hover, .menu-acilir-kutusu .dropdown-item:focus{background:var(--renk-panel-grisi);filter:brightness(.97)} .sayfa-numaralari a:hover{filter:brightness(.92);transition:filter .15s ease} /* ========================================================================= DUGME RENKLERI — YALNIZCA DORT TON (proje sahibi karari) ========================================================================= Oncelik sirasi: bordo (asil eylem) > lacivert (gezinme) > koyu yesil (olumlu onay) > koyu gri (ikincil/vazgec). Baska renk yok; hepsi dolgulu ve acik gri yazili. Onceki "hayalet" dugme (saydam zemin + gri cerceve) bu listede degildi: ayni ekranda dolgulu ve cerceveli iki dugme, hangisinin tiklanabilir oldugunu tartisilir hale getiriyordu. UST SERIT (ana menu, kullanici dugmesi, cikis) BU KURALIN DISINDADIR — orasi koyu zemin uzerinde calisiyor ve dolgulu dugme menuyu bozar. HOVER: renk degismez, brightness .92 ile bir tik koyulasir. */ /* `border` KISAYOLLA yazilir: `border-width:1px` ifadesi, layout genisligini arayan tasarim testinin (`width:\d+px`) desenine takiliyor. Kisayol ayni sonucu verir ve testin aradigi kalibi uretmez. */ .uygulama-icerigi .btn, .kayit-penceresi .btn{ color:var(--renk-acik-gri); border:1px solid transparent; font-weight:600; } .uygulama-icerigi .kurumsal-dugme, .kayit-penceresi .kurumsal-dugme{background:var(--renk-bordo);border-color:var(--renk-bordo)} .uygulama-icerigi .lacivert-dugme, .kayit-penceresi .lacivert-dugme{background:var(--renk-lacivert);border-color:var(--renk-lacivert)} .uygulama-icerigi .yesil-dugme, .kayit-penceresi .yesil-dugme{background:var(--renk-koyu-yesil);border-color:var(--renk-koyu-yesil)} /* Ikincil = koyu gri. Ayni sinif adi korundu: sablonlarda "Vazgec" ve benzeri dugmeler zaten bu adi tasiyor. */ .uygulama-icerigi .ikincil-dugme, .kayit-penceresi .ikincil-dugme{ color:var(--renk-acik-gri); background:var(--renk-metin-grisi); border-color:var(--renk-metin-grisi); } .uygulama-icerigi .ikincil-dugme:hover, .kayit-penceresi .ikincil-dugme:hover{background:var(--renk-metin-grisi);filter:brightness(.92)} .uygulama-icerigi .btn:hover, .kayit-penceresi .btn:hover{filter:brightness(.92);transition:filter .15s ease} /* ========================================================================= DASHBOARD DUZENI (Faz 3.1 / Faz 6 on calismasi) ========================================================================= */ /* Kartlar iki kolonlu izgarada; genis kartlar iki kolonu birden kaplar, tam kartlar satirin tamamini. Dar ekranda hepsi tek kolona duser. */ .pano-izgarasi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px} .pano-izgarasi .pano-genis{grid-column:span 2} .pano-izgarasi .pano-tam{grid-column:1 / -1} .pano-izgarasi .panel-karti{margin-top:0} .bolum-basligi{margin:22px 0 10px;font-size:.86rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .alt-baslik{margin:0 0 8px;font-size:.76rem;font-weight:700;letter-spacing:.04em} /* Olcu satiri: etiket solda, tutar sagda, cubuk altta. Cubuk BILGI TASIMAZ, yalnizca buyuklukleri karsilastirir — sayi zaten yaninda yazili. */ .olcu-satiri{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin-bottom:14px} .olcu-etiketi{font-weight:600} .olcu-degeri{font-weight:700;font-variant-numeric:tabular-nums;text-align:right} .olcu-cubugu{grid-column:1 / -1;height:6px;background:var(--renk-panel-grisi);border-radius:999px;overflow:hidden} .olcu-cubugu > span{display:block;height:100%;border-radius:999px;background:var(--renk-lacivert)} .olcu-cubugu > span.bordo{background:var(--renk-bordo)} .olcu-cubugu > span.yesil{background:var(--renk-koyu-yesil)} .olcu-cubugu > span.gri{background:var(--renk-metin-grisi)} /* Tablo icindeki mini cubuk daha ince: satir yuksekligini buyutmemeli. */ .veri-tablosu .olcu-cubugu{height:4px;margin-top:4px;max-width:220px} .kontrol-satiri{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--renk-cizgi-grisi); } .kontrol-satiri:last-child{border-bottom:0} .kontrol-satiri strong{font-variant-numeric:tabular-nums} .kontrol-satiri small{display:block} /* Deger renkleri: yalnizca yesil ve bordo — "iyi" ve "dikkat". Ucuncu bir ton eklemek okuyucuyu renk ezberlemeye zorlardi. */ .deger-yesil{color:var(--renk-koyu-yesil)} .deger-bordo{color:var(--renk-bordo)} .uyari-degeri{color:var(--renk-bordo)} .cari-risk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} @media(max-width:991px){ .pano-izgarasi{grid-template-columns:1fr} .pano-izgarasi .pano-genis,.pano-izgarasi .pano-tam{grid-column:auto} .cari-risk{grid-template-columns:1fr} } /* Cok secimli kutu (roller, firmalar). Yukseklik SINIRLI ve kendi icinde kayar: on firmali bir kurulumda pencere ekrandan tasardi. */ .secim-kutusu{ max-height:150px; overflow-y:auto; padding:8px 10px; border:1px solid var(--renk-cizgi-grisi); border-radius:10px; background:var(--renk-acik-gri); } .secim-satiri{display:flex;align-items:center;gap:8px;padding:3px 0;font-weight:500} .secim-satiri input{flex:0 0 auto} /* Yetki matrisi (Roller ekrani). Yetkiler `yetkiler.aciklama` grubuna gore obeklenir; duz bir liste kirktan fazla kutu demekti ve goz orada "hangisini isaretledim" sorusunu kaybederdi. Matris kendi icinde kayar — pencere ekrandan tasmasin. */ .yetki-matrisi{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-height:320px; overflow-y:auto; padding:4px; } .yetki-grubu{ margin:0; padding:8px 12px 10px; border:1px solid var(--renk-cizgi-grisi); border-radius:10px; background:var(--renk-acik-gri); } .yetki-grubu legend{ float:none; width:auto; margin:0 0 4px; padding:0; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--renk-lacivert); } @media(max-width:767px){ .yetki-matrisi{grid-template-columns:1fr} }