/* ============================================================================= HKU KYS Ã¢â‚¬â€ Modern UI standartlarÃ„Â± (v2 Ã¢â‚¬â€ bÃƒÂ¼yÃƒÂ¼k form + sol sidebar) ============================================================================= */ /* ----------------------------------------------------------------------------- TASARIM TOKENLARI Ã¢â‚¬â€ kaynak: hku-auth (HkuAuthFrontEnd/src/index.css + design_handoff_auth_calm_redesign/auth-styles.css "after" seti). KullanÃ„Â±cÃ„Â± kararÃ„Â± 2026-09-09: "hku-auth ile aynÃ„Â± olsun" (lacivert ana renk, beyaz sol menÃƒÂ¼, sakin zemin). Ã°Å¸â€Â´ Bordo #A52A2A ana eylem rengi olmaktan Ãƒâ€¡IKTI (Batch 28b kararÃ„Â± bilinÃƒÂ§li olarak geri alÃ„Â±ndÃ„Â±). --hku-accent artÃ„Â±k lacivert'e iÃ…Å¸aret ediyor; bÃƒÂ¶ylece onu kullanan ~30 kural view deÃ„Å¸iÃ…Å¸tirmeden yeni renge dÃƒÂ¶ndÃƒÂ¼. Bordo yalnÃ„Â±z kurumsal vurgu gerektiÃ„Å¸inde --hku-bordo ile ÃƒÂ§aÃ„Å¸rÃ„Â±lÃ„Â±r. Ã¢Å¡Â Ã¯Â¸Â Eski --hku-* adlarÃ„Â± KORUNDU: 1800 satÃ„Â±r CSS ve ~600 view bunlara baÃ„Å¸lÃ„Â±. Ad deÃ„Å¸iÃ…Å¸imi yerine DEÃ„Å¾ER deÃ„Å¸iÃ…Å¸imi yapÃ„Â±ldÃ„Â±. -------------------------------------------------------------------------- */ :root { /* --------------------------------------------------------------------- KATMAN (z-index) OLCEGI — TEK KAYNAK. Yeni bir ust katman eklerken sayiyi dogrudan yazma, buraya bir ad ekle. 🔴 Neden merkezi: 2026-09-25'te blade paneli (1085) ile Tom Select acilir listesi (1080) CARPISTI. Liste aciliyordu ama panelin ARKASINDA kaldigi icin kullaniciya "dropdown bos / acilmiyor" gorunuyordu (7 modulun blade formu etkilendi). Sayilar dort ayri dosyaya dagilmis oldugu icin carpisma fark edilmemisti; hku-blade.css'teki gerekce notu bile yanlisti ("toast (1080) ustunde" diyordu, toast aslinda 1100). ⚠️ Acilir liste blade'in USTUNDE olmak ZORUNDA: 'ye tasiniyor (dropdownParent: 'body'), cunku .hku-card overflow:hidden onu kesiyor. --------------------------------------------------------------------- */ --hku-z-topbar: 1020; /* sticky ust cubuk */ --hku-z-sidebar-ortu: 1025; /* mobil menu ortusu */ --hku-z-sidebar: 1030; /* sol menu */ --hku-z-blade: 1085; /* sagdan kayan panel */ --hku-z-dropdown: 1090; /* Tom Select acilir listesi — blade'in USTUNDE */ --hku-z-toast: 1100; /* bildirim — her seyin ustunde */ --hku-z-modal: 10000; /* klavye kisayolu yardim modali */ /* Marka */ --hku-navy: #003865; /* hku-auth kurumsal lacivert */ --hku-primary: var(--hku-navy); --hku-primary-dark: #00253f; --hku-primary-soft: #0f5ea8; --hku-primary-light: #0f5ea8; --hku-primary-tint: rgba(0, 56, 101, .08); /* aktif menÃƒÂ¼ zemini + focus halkasÃ„Â± */ --hku-bordo: #A52A2A; /* yalnÃ„Â±z kurumsal vurgu; ana eylem DEÃ„Å¾Ã„Â°L */ /* Ana eylem rengi (eski adÃ„Â±yla "accent") */ --hku-accent: var(--hku-navy); --hku-accent-hover: #00477f; /* YÃƒÂ¼zeyler */ --hku-bg-soft: #f4f6f9; /* sayfa zemini Ã¢â‚¬â€ kartlar beyaz kalÃ„Â±p ayrÃ„Â±Ã…Å¸sÃ„Â±n */ --hku-card: #ffffff; --hku-card-border: #dce2ea; --hku-border: #dce2ea; --hku-border-hover: #c3ccd8; --hku-line: #eef1f5; /* tablo/ayraÃƒÂ§ ÃƒÂ§izgisi */ /* Ã°Å¸â€Â´ Sayfa baÃ…Å¸lÃ„Â±Ã„Å¸Ã„Â± ayracÃ„Â± --hku-border'dan bilerek KOYU: hku-auth'ta 1px #dce2ea beyaz zeminde OKUNMUYORDU ("sade" diye konan ayrÃ„Â±m pratikte hiÃƒÂ§bir Ã…Å¸eydi). */ --hku-rule-strong: #aab6c6; --hku-input: #d4dbe4; --hku-input-bg: #fbfcfd; --hku-thead-bg: #fafbfc; /* tablo basligi zemini */ --hku-label: #475569; /* Metin */ --hku-text: #212a3a; /* saf siyah deÃ„Å¸il: yumuÃ…Å¸ak koyu gri */ --hku-text-muted: #66718a; /* Durum renkleri Ã¢â‚¬â€ rozet/banner iÃƒÂ§in TEK kaynak */ --hku-success: #18a957; --hku-success-muted: #e8f7ee; --hku-warn: #d97706; --hku-warn-light: #f59e0b; --hku-warn-muted: #fdf3e3; --hku-danger: #dc2626; --hku-danger-muted: #fdecec; --hku-info: #0f5ea8; --hku-info-muted: #eaf2fb; /* YÃƒÂ¼kseklik + kÃƒÂ¶Ã…Å¸e */ --hku-shadow-sm: 0 1px 2px rgba(16, 33, 56, .04); --hku-shadow-md: 0 1px 2px rgba(16, 33, 56, .04), 0 6px 20px rgba(16, 33, 56, .05); --hku-shadow-lg: 0 10px 40px rgba(16, 33, 56, .10); --hku-radius-sm: 6px; --hku-radius-md: 8px; --hku-radius-lg: 10px; --hku-card-pad: 1.15rem; /* hku-auth: kompakt olcek (Batch 79) */ /* Kabuk ÃƒÂ¶lÃƒÂ§ÃƒÂ¼leri (hku-auth: sidebar 248 / rail 76 / topbar 64) */ --hku-sidebar-width: 248px; --hku-sidebar-collapsed-width: 76px; --hku-header-height: 64px; /* Sol menÃƒÂ¼ Ã¢â‚¬â€ AÃƒâ€¡IK tema. Eski koyu lacivert gradyan kaldÃ„Â±rÃ„Â±ldÃ„Â±: hku-auth'ta "neredeyse saf siyah aÃ„Å¸Ã„Â±r blok" geri bildirimi ÃƒÂ¼zerine deÃ„Å¸iÃ…Å¸ti. */ --hku-sidebar-bg: #ffffff; --hku-sidebar-text: #54627b; --hku-sidebar-title: #9aa6ba; --hku-sidebar-active: var(--hku-navy); --hku-sidebar-active-bg: var(--hku-primary-tint); --hku-sidebar-hover: #f3f5f8; --hku-sidebar-border: #eef1f5; } body { /* hku-auth: 14px + yoÃ„Å¸un -sm kullanÃ„Â±mÃ„Â± kÃƒÂ¼ÃƒÂ§ÃƒÂ¼k kalÃ„Â±yordu; 15px/1.6 ile satÃ„Â±rlar ferahlar. */ font-family: 'Inter', 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.6; color: var(--hku-text); background-color: var(--hku-bg-soft); -webkit-font-smoothing: antialiased; } /* ============================================================================= SIDEBAR LAYOUT ============================================================================= */ .hku-app { display: flex; min-height: 100vh; } /* --- Sidebar --- */ .hku-sidebar { width: var(--hku-sidebar-width); background: var(--hku-sidebar-bg); color: var(--hku-sidebar-text); border-right: 1px solid var(--hku-sidebar-border); position: fixed; top: 0; left: 0; bottom: 0; z-index: var(--hku-z-sidebar); overflow-y: auto; overflow-x: hidden; transition: width .25s ease, transform .25s ease; display: flex; flex-direction: column; } .hku-sidebar::-webkit-scrollbar { width: 6px; } .hku-sidebar::-webkit-scrollbar-thumb { background: rgba(84,98,123,.20); border-radius: 999px; } .hku-sidebar:hover::-webkit-scrollbar-thumb { background: rgba(84,98,123,.38); } .hku-sidebar::-webkit-scrollbar-track { background: transparent; } .hku-sidebar-header { padding: 16px 18px 12px; border-bottom: 1px solid var(--hku-sidebar-border); display: flex; flex-direction: column; /* Marka kilidi ORTALANIR (kullanici karari, 2026-09-17). Logo ile altindaki uygulama adi tek blok gibi okunsun diye metin de ortalanir: yalniz logoyu ortalayip metni sola birakmak, ikisini birbirinden kopuk iki oge gibi gosterirdi. */ align-items: center; text-align: center; justify-content: center; gap: 3px; min-height: var(--hku-header-height); background: var(--hku-sidebar-bg); } .hku-sidebar-header img { /* Ã°Å¸â€Â´ OLCULEN KUSUR (2026-09-17): onceki dosya 118x25 px ve KOYU ZEMIN icin uretilmis BEYAZ bir baskiydi (opak piksellerin ortalama rengi rgb(187,187,187)). Batch 62'de sol menu beyaza donunce logo beyaz zeminde beyaz kaldi Ã¢â‚¬â€ kontrast ~1,6:1, yani pratikte GORUNMEZ; ustune 25 px yukseklikteki gomulu metin retinada bulaniklasiyordu. "Logo olmamis" gorunumunun sebebi buydu. Cozum: kardes HKU projelerindeki (hku-portal / hku-tercih-ttys / hku-atik, ucunde de ayni dosya) RESMI RENKLI logo Ã¢â‚¬â€ 800x346, yani buradaki kullanim boyutunun ~6 kati. Yukseklikten olceklenir: genislik orandan gelir, kirpma/esneme olmaz. */ height: 42px; width: auto; max-width: 100%; flex-shrink: 0; } /* Daraltilmis menude logo sigmaz; gizlenir (uygulama adi da gizli). */ .hku-app.sidebar-collapsed .hku-sidebar-header img { display: none; } .hku-sidebar-brand { color: var(--hku-sidebar-active); font-weight: 700; font-size: 1.05rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hku-sidebar-brand small { color: var(--hku-sidebar-title); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; display: block; } .hku-sidebar-nav { padding: 12px 8px; flex: 1; } .hku-sidebar-nav ul { list-style: none; padding: 0; margin: 0; } .hku-sidebar-nav .nav-section-title { color: var(--hku-sidebar-title); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; padding: 16px 12px 6px; margin: 0; } .hku-sidebar-nav .nav-item { margin: 1px 0; } .hku-sidebar-nav .nav-link { color: var(--hku-sidebar-text); padding: 11px 12px; border-radius: var(--hku-radius-sm); display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: .92rem; font-weight: 500; transition: background-color .15s ease, color .15s ease; white-space: nowrap; cursor: pointer; position: relative; } .hku-sidebar-nav .nav-link i.nav-icon { width: 20px; text-align: center; font-size: 1.05rem; color: var(--hku-sidebar-title); flex-shrink: 0; } .hku-sidebar-nav .nav-link .nav-text { flex: 1; /* Ã°Å¸â€Â´ min-width:0 OLMADAN flex ogesi kucuIlemez ve uzun etiket menuden TASAR. Olculdu (2026-09-17): "DÃƒÂ¼zeltici ve Ãƒâ€“nleyici Faaliyet" 200 px, yer 169 px Ã¢â‚¬â€ yazi kenardan disari tasiyordu. Tek etiketi kisaltmak yetmez: bir sonraki uzun etiket ayni sekilde kirardi. Bu kural sinifin TAMAMINI korur. */ min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Ust seviye tek satirda kalir; alt menu etiketleri alt satira GECEBILIR (Batch 79 karari: "Performans DeÃ„Å¸er Ãƒâ€“zeti (PDF)" gibi uzun etiketler kirpilmasin diye). */ .hku-sidebar-nav > ul > .nav-item > .nav-link .nav-text { white-space: nowrap; } .hku-sidebar-nav .nav-link .nav-arrow { font-size: .7rem; color: var(--hku-sidebar-title); transition: transform .2s ease; } .hku-sidebar-nav .nav-link:hover { background: var(--hku-sidebar-hover); color: var(--hku-sidebar-active); } .hku-sidebar-nav .nav-link:hover i.nav-icon { color: var(--hku-sidebar-active); } /* Aktif ÃƒÂ¶Ã„Å¸e: dolu blok deÃ„Å¸il, aÃƒÂ§Ã„Â±k lacivert "pill" Ã¢â‚¬â€ hku-auth deseni. */ .hku-sidebar-nav .nav-link.active { background: var(--hku-sidebar-active-bg); color: var(--hku-sidebar-active); font-weight: 600; } .hku-sidebar-nav .nav-link.active i.nav-icon { color: var(--hku-sidebar-active); } .hku-sidebar-nav .nav-item.open > .nav-link .nav-arrow { transform: rotate(90deg); } /* Aktif sayfanin UST GRUBU Ã¢â‚¬â€ acilmaz, yalniz isaretlenir. Ã°Å¸â€Â´ Menu katli acildigi icin (2026-09-17 kullanici karari) alt menudeki bir sayfadayken kullanici menude nerede oldugunu goremiyordu. Bu isaret, menuyu acmadan yon verir. Ã¢Å¡Â Ã¯Â¸Â Aktif baglantinin kendi vurgusundan (dolu pill) DAHA SAKIN: ikisi ayni gorunurse "hangisi acik sayfa" sorusu belirsizlesir. */ .hku-sidebar-nav .nav-item.aktif-grup > .nav-link { color: var(--hku-primary); font-weight: 600; } .hku-sidebar-nav .nav-item.aktif-grup > .nav-link .nav-icon { color: var(--hku-primary); } .hku-sidebar-nav .nav-item.aktif-grup > .nav-link::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--hku-primary); margin-left: auto; flex-shrink: 0; } /* Grup acildiginda nokta gereksiz: ok zaten donuyor ve icerik gorunuyor. */ .hku-sidebar-nav .nav-item.aktif-grup.open > .nav-link::after { display: none; } /* Sub-menu (cascade) */ .hku-sidebar-nav .nav-submenu { list-style: none; padding: 4px 0 4px 18px; margin: 2px 0 6px; display: none; border-left: 1px solid var(--hku-sidebar-border); margin-left: 20px; } .hku-sidebar-nav .nav-item.open > .nav-submenu { display: block; } .hku-sidebar-nav .nav-submenu .nav-link { padding: 6px 12px; font-size: .8rem; font-weight: 400; color: var(--hku-sidebar-text); /* Alt menude uzun etiket KIRPILMAK yerine alt satira gecer: "Performans DeÃ„Å¸er Ãƒâ€“zeti (PDF)" 248px menuye sigmiyordu ve sonu goturuluyordu. Ust seviye nowrap KALIR (oradaki etiketler kisa). */ white-space: normal; align-items: flex-start; } .hku-sidebar-nav .nav-submenu .nav-link::before { margin-top: .45em; } .hku-sidebar-nav .nav-submenu .nav-link::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #c2cbd8; margin-right: 4px; flex-shrink: 0; } .hku-sidebar-nav .nav-submenu .nav-link:hover::before { background: var(--hku-sidebar-active); } .hku-sidebar-nav .nav-submenu .nav-link.active::before { background: var(--hku-sidebar-active); } /* Alt menude IKON varsa nokta isaretcisi GIZLENIR. Olculdu (2026-09-26): 64 menu baglantisinin 43'unde ikon yoktu ve durum TUTARSIZDI -- ayni seviyede "Dokuman" ikonluyken "Risk Kayitlari" noktali gorunuyordu. Ikon eklendiginde nokta da kalsa satirda iki isaretci yan yana durur (gurultu) ve etiket saga kayar. Nokta kurallari SILINMEDI: ikonsuz bir alt menu ogesi eklenirse yine nokta alir (asamali bozulma). */ .hku-sidebar-nav .nav-submenu .nav-link:has(> i.nav-icon)::before { content: none; } /* Alt menu ikonu ust seviyeden kucuk: hiyerarsi ikon boyutuyla da okunur. */ .hku-sidebar-nav .nav-submenu .nav-link i.nav-icon { width: 16px; font-size: .92rem; margin-top: .1em; /* white-space:normal oldugu icin ilk satira hizalanir */ } /* ----------------------------------------------------------------------------- 3. SEVIYE (UKGS deseni: ana baslik > alt grup > sayfa) Menu tek seviyede 21 ust baslik + 62 hedefle asagi akiyordu. Ucuncu seviye "Raporlar" / "Tanimlar" gibi tekrar eden gruplari kendi dalina toplar: dinlenme halinde ekranda 12 satir kalir, is ararken tek dal acilir. Gorsel ayrim GIRINTI + daha ince nokta ile; yeni renk EKLENMEDI. -------------------------------------------------------------------------- */ .hku-sidebar-nav .nav-submenu .nav-submenu { padding: 2px 0 2px 14px; margin: 1px 0 3px 8px; border-left: 1px dashed var(--hku-sidebar-border); } .hku-sidebar-nav .nav-submenu .nav-submenu .nav-link { padding: 4px 10px; font-size: .765rem; } .hku-sidebar-nav .nav-submenu .nav-submenu .nav-link::before { width: 4px; height: 4px; margin-top: .5em; } /* Alt grup basligi: tiklanabilir, kendi ok'u var; hedef DEGIL, kapsayicidir. */ .hku-sidebar-nav .nav-submenu > .nav-item > .nav-link[data-hku-toggle="submenu"] { font-weight: 500; color: var(--hku-sidebar-title); } .hku-sidebar-nav .nav-submenu > .nav-item > .nav-link[data-hku-toggle="submenu"]::before { display: none; /* kapsayicida nokta olmaz; ok yeterli */ } .hku-sidebar-nav .nav-submenu .nav-arrow { font-size: .7rem; margin-left: auto; opacity: .55; transition: transform .15s ease; } .hku-sidebar-nav .nav-submenu > .nav-item.open > .nav-link .nav-arrow { transform: rotate(90deg); } .hku-sidebar-footer { padding: 10px 18px; border-top: 1px solid var(--hku-sidebar-border); font-size: .75rem; color: var(--hku-sidebar-title); text-align: center; } /* Sidebar collapsed (icon-only) */ .hku-app.sidebar-collapsed .hku-sidebar { width: var(--hku-sidebar-collapsed-width); } .hku-app.sidebar-collapsed .hku-sidebar-brand, .hku-app.sidebar-collapsed .nav-section-title, .hku-app.sidebar-collapsed .nav-text, .hku-app.sidebar-collapsed .nav-arrow, .hku-app.sidebar-collapsed .nav-submenu, .hku-app.sidebar-collapsed .hku-sidebar-footer { display: none !important; } .hku-app.sidebar-collapsed .nav-link { justify-content: center; padding: 12px; } .hku-app.sidebar-collapsed .hku-sidebar-header { align-items: center; padding: 0 10px; } .hku-app.sidebar-collapsed .hku-sidebar-header img { height: 16px; } .hku-app.sidebar-collapsed .hku-main { margin-left: var(--hku-sidebar-collapsed-width); } /* --- Topbar --- */ .hku-main { flex: 1; margin-left: var(--hku-sidebar-width); min-width: 0; display: flex; flex-direction: column; transition: margin-left .25s ease; } /* Anonim public sayfa (Öneri Ver/Takip): sol menü yok → içerik tam genişlik. Sidebar position:fixed olduğu için margin-left'i açıkça sıfırlamak gerekir. */ .hku-app--public .hku-main { margin-left: 0; } /* Anonim üst barda marka logosu (sidebar logosunun yerine). */ .hku-topbar-brand { display: inline-flex; align-items: center; } .hku-topbar-brand img { height: 34px; width: auto; display: block; } .hku-topbar { background: #fff; border-bottom: 1px solid var(--hku-border); height: var(--hku-header-height); padding: 0 22px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: var(--hku-z-topbar); } .hku-topbar-toggle { background: transparent; border: 0; color: var(--hku-primary); font-size: 1.4rem; padding: 6px 10px; border-radius: var(--hku-radius-sm); cursor: pointer; transition: background-color .15s ease; } .hku-topbar-toggle:hover { background: var(--hku-bg-soft); } .hku-topbar-title { flex: 1; font-size: 1.05rem; font-weight: 600; color: var(--hku-primary); margin-left: 12px; } .hku-topbar-actions { display: flex; align-items: center; gap: 8px; } /* Dil deÃ„Å¸iÃ…Å¸tirici Ã¢â‚¬â€ modern segment (pill) toggle: TR | EN */ .hku-lang-switch { display: inline-flex; align-items: stretch; height: 30px; padding: 2px; gap: 2px; border-radius: 999px; background: var(--hku-bg-soft); border: 1px solid var(--hku-border); } .hku-lang-switch a { display: flex; align-items: center; justify-content: center; min-width: 34px; padding: 0 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--hku-text-muted); text-decoration: none; transition: background-color .15s ease, color .15s ease; } .hku-lang-switch a:hover { color: var(--hku-primary); } .hku-lang-switch a.active { background: var(--hku-primary); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); } .hku-lang-switch a.active:hover { color: #fff; } /* Tema deÃ„Å¸iÃ…Å¸tirici Ã¢â‚¬â€ dil pill'iyle uyumlu modern yuvarlak ikon buton */ .hku-topbar-toggle.hku-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 30px; padding: 0; font-size: 1rem; border-radius: 999px; background: var(--hku-bg-soft); border: 1px solid var(--hku-border); color: var(--hku-text-muted); } .hku-topbar-toggle.hku-theme-toggle:hover { background: var(--hku-bg-soft); color: var(--hku-primary); border-color: var(--hku-border-hover); } .hku-topbar-user { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: var(--hku-radius-md); color: var(--hku-text); text-decoration: none; transition: background-color .15s ease; cursor: pointer; } .hku-topbar-user:hover { background: var(--hku-bg-soft); color: var(--hku-primary); } .hku-topbar-user .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--hku-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .9rem; } .hku-topbar-user .user-name { font-weight: 600; font-size: .92rem; line-height: 1; } .hku-topbar-user .user-role { font-size: .72rem; color: var(--hku-text-muted); line-height: 1; margin-top: 2px; } /* --- Content --- */ .hku-content { flex: 1; /* hku-auth: content padding 30px 34px, kartlar arasi 16px sabit ritim */ padding: 22px 34px 30px; overflow: visible; } /* Breadcrumb varsa ust bosluk oradan gelir; icerik tekrar bosluk eklemez. */ .hku-breadcrumb + .hku-content { padding-top: 14px; } .hku-footer { /* hku-auth deseni: tek satir, solda telif/destek Ã¢â‚¬â€ sagda baglanti+surum. Onceki 'text-align:center' her seyi ortada yigiyordu. */ display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; /* hku-auth: h-10 */ padding: 0 26px; text-align: left; color: var(--hku-text-muted); font-size: .8rem; border-top: 1px solid var(--hku-border); background: #fff; } .hku-footer-sol { min-width: 0; /* uzun metin sagdaki rozeti ezmesin */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* tek satir Ã¢â‚¬â€ ikinci satira yigilmaz */ } /* Dar ekranda alt alta ve ortali Ã¢â‚¬â€ tek satir sigmaz. */ @media (max-width: 767px) { .hku-footer { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 16px; } .hku-footer-sol { white-space: normal; } } .hku-footer a { color: var(--hku-primary); text-decoration: none; } .hku-footer a:hover { text-decoration: underline; } /* Responsive Ã¢â‚¬â€ mobile drawer */ @media (max-width: 991px) { .hku-sidebar { transform: translateX(-100%); box-shadow: var(--hku-shadow-lg); } .hku-app.sidebar-open .hku-sidebar { transform: translateX(0); } .hku-main { margin-left: 0 !important; } .hku-app.sidebar-open::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: var(--hku-z-sidebar-ortu); } } /* ============================================================================= PAGE HEADER (sayfa baÃ…Å¸lÃ„Â±Ã„Å¸Ã„Â± bordo alt ÃƒÂ§izgi) ============================================================================= */ .hku-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .85rem; padding-bottom: .6rem; /* Ã°Å¸â€Â´ AyraÃƒÂ§ --hku-border ile 1px ÃƒÂ§izilince beyaz zeminde OKUNMUYOR (hku-auth ÃƒÂ¶lÃƒÂ§ÃƒÂ¼mÃƒÂ¼); --hku-rule-strong bilerek koyu. Bir ayracÃ„Â±n iÃ…Å¸i gÃƒÂ¶rÃƒÂ¼nmektir. */ border-bottom: 1px solid var(--hku-rule-strong); flex-wrap: wrap; gap: .75rem; } .hku-page-header h1, .hku-page-header h2 { color: var(--hku-text); font-weight: 600; margin: 0; font-size: 1.15rem; letter-spacing: -0.01em; display: flex; align-items: center; gap: .6rem; } .hku-page-header h1 i, .hku-page-header h2 i { color: var(--hku-primary); } .hku-page-header .hku-page-actions { display: flex; gap: .5rem; flex-wrap: wrap; } /* ============================================================================= CARD ============================================================================= */ .hku-card { border: 1px solid var(--hku-card-border); border-radius: var(--hku-radius-lg); box-shadow: var(--hku-shadow-md); background: var(--hku-card); overflow: hidden; margin-bottom: 1rem; /* hku-auth --gap: 16px */ } /* hku-auth'ta kart hover'da yÃƒÂ¼kselmez: liste sayfalarÃ„Â±nda sÃƒÂ¼rekli kÃ„Â±pÃ„Â±rdama yaratÃ„Â±yordu. */ .hku-card-header { background: var(--hku-card); border-bottom: 1px solid var(--hku-line); padding: .8rem var(--hku-card-pad); display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; } .hku-card-header .hku-card-title { font-size: .97rem; font-weight: 600; color: var(--hku-text); margin: 0; display: flex; align-items: center; gap: .5rem; } .hku-card-header .hku-card-title i { color: var(--hku-primary); } .hku-card-body { padding: var(--hku-card-pad); } .hku-card-footer { background: var(--hku-card); border-top: 1px solid var(--hku-line); padding: 1rem var(--hku-card-pad); } /* ============================================================================= FORM ELEMANLARI Ã¢â‚¬â€ BÃƒÅ“YÃƒÅ“K BOYUT ============================================================================= */ /* K4 Ã¢â‚¬â€ form yogunlugu (2026-09-08, kullanici onayli). Batch 20'de "form elementlerini buyut" istenmis ve 44px yapilmisti; kardes projelerle olcum sonrasi 38px'e cekildi (hku-auth 38, hku-portal 34). Ã¢Å¡Â Ã¯Â¸Â DOKUNMATIK CIHAZDA 44px KORUNUR Ã¢â‚¬â€ dosya sonundaki @media (pointer: coarse) blogu bu degeri ezer. Yani kucultme yalniz fare/klavye icin gecerlidir. Filtre cubugundaki .form-control-sm 38px'te BIRAKILDI (zaten sikisik). */ .hku-form .form-control, .hku-form .form-select, .hku-form-control { border: 1px solid var(--hku-input); border-radius: var(--hku-radius-sm); padding: .45rem .7rem; font-size: .875rem; line-height: 1.45; min-height: 36px; transition: border-color .15s ease, box-shadow .15s ease; /* Form alanÃ„Â± kart beyazÃ„Â±ndan hafif ayrÃ„Â±Ã…Å¸Ã„Â±r (hku-auth --input-bg). */ background-color: var(--hku-input-bg); color: var(--hku-text); } .hku-form .form-control-sm, .hku-form .form-select-sm { padding: .3rem .6rem; font-size: .8rem; min-height: 32px; } .hku-form .form-control:hover, .hku-form .form-select:hover { border-color: var(--hku-border-hover); } .hku-form .form-control:focus, .hku-form .form-select:focus, .hku-form-control:focus { border-color: var(--hku-primary); box-shadow: 0 0 0 3px var(--hku-primary-tint); outline: 0; } .hku-form .form-control[readonly], .hku-form .form-control:disabled { background-color: #f8f9fa; color: var(--hku-text-muted); } .hku-form .form-label { font-size: .78rem; font-weight: 500; color: var(--hku-label); margin-bottom: .3rem; display: block; } .hku-form .form-label .text-danger { margin-left: 2px; } .hku-form .form-text { font-size: .82rem; color: var(--hku-text-muted); margin-top: .35rem; } .hku-form textarea.form-control { min-height: 74px; line-height: 1.45; padding: .45rem .7rem; } .hku-form .form-check-input { width: 1.15em; height: 1.15em; margin-top: .2em; } .hku-form .form-check-label { font-size: .92rem; padding-left: 4px; } .hku-form .row.g-3 > [class^="col-"], .hku-form .row.g-3 > [class*=" col-"] { padding-top: .4rem; padding-bottom: .4rem; } /* Filter card */ .hku-filter-card { background: var(--hku-card); border: 1px solid var(--hku-card-border); border-radius: var(--hku-radius-lg); padding: .75rem .9rem; margin-bottom: .75rem; box-shadow: var(--hku-shadow-md); } /* ============================================================================= BUTONLAR Ã¢â‚¬â€ BÃƒÅ“YÃƒÅ“K + MODERN ============================================================================= */ .hku-btn-primary { background: var(--hku-primary); color: #fff; border: 1px solid var(--hku-primary); border-radius: var(--hku-radius-sm); padding: .4rem .85rem; font-weight: 600; font-size: .875rem; min-height: 36px; transition: background-color .12s ease, transform .08s ease, box-shadow .15s ease; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; cursor: pointer; } .hku-btn-primary:hover, .hku-btn-primary:focus { background: var(--hku-accent-hover); border-color: var(--hku-accent-hover); color: #fff; } .hku-btn-primary:active { transform: translateY(1px); } .hku-btn-primary:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; } .hku-btn-secondary { background: var(--hku-card); color: var(--hku-text-muted); border: 1px solid var(--hku-border); border-radius: var(--hku-radius-sm); padding: .4rem .8rem; font-weight: 500; font-size: .875rem; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; transition: background-color .12s ease, border-color .12s ease; cursor: pointer; } .hku-btn-secondary:hover { background: var(--hku-line); border-color: var(--hku-border-hover); color: var(--hku-text); } /* ============================================================================= BUTON RENK STANDARDI Ã¢â‚¬â€ Bootstrap "primary" = HKU laciverti (#003865). TÃƒÂ¼m .btn-primary / .btn-outline-primary tek noktadan markaya baÃ„Å¸lanÃ„Â±r. Ã°Å¸â€Â´ 2026-09-09: bordo (#A52A2A) ana eylem rengi olmaktan ÃƒÂ§Ã„Â±ktÃ„Â± (kullanÃ„Â±cÃ„Â± kararÃ„Â±: "hku-auth ile aynÃ„Â± olsun"). --hku-accent lacivert'e iÃ…Å¸aret ettiÃ„Å¸i iÃƒÂ§in bu blok deÃ„Å¸iÃ…Å¸meden yeni renge dÃƒÂ¶ndÃƒÂ¼; view'lara dokunulmadÃ„Â±. DiÃ„Å¸er semantikler Bootstrap standardÃ„Â± kalÃ„Â±r: success = yeÃ…Å¸il (Onayla/Excel) danger = kÃ„Â±rmÃ„Â±zÃ„Â± (Sil/Reddet/PDF) warning = amber (Onaya GÃƒÂ¶nder) info = mavi secondary = gri ============================================================================= */ .btn-primary { --bs-btn-bg: var(--hku-accent); --bs-btn-border-color: var(--hku-accent); --bs-btn-hover-bg: var(--hku-accent-hover); --bs-btn-hover-border-color: var(--hku-accent-hover); --bs-btn-active-bg: var(--hku-accent-hover); --bs-btn-active-border-color: var(--hku-accent-hover); --bs-btn-disabled-bg: var(--hku-accent); --bs-btn-disabled-border-color: var(--hku-accent); --bs-btn-focus-shadow-rgb: 0, 56, 101; } .btn-outline-primary { --bs-btn-color: var(--hku-accent); --bs-btn-border-color: var(--hku-accent); --bs-btn-hover-bg: var(--hku-accent); --bs-btn-hover-border-color: var(--hku-accent); --bs-btn-active-bg: var(--hku-accent); --bs-btn-active-border-color: var(--hku-accent); --bs-btn-disabled-color: var(--hku-accent); --bs-btn-disabled-border-color: var(--hku-accent); --bs-btn-focus-shadow-rgb: 0, 56, 101; } .hku-form-actions { display: flex; justify-content: flex-end; gap: .65rem; padding-top: 1.25rem; margin-top: 1.5rem; border-top: 1px solid var(--hku-border); } /* ============================================================================= DATATABLES Ã¢â‚¬â€ modern theming (bÃƒÂ¼yÃƒÂ¼k) ============================================================================= */ table.dataTable.hku-dt { border-collapse: separate !important; border-spacing: 0; width: 100% !important; font-size: .875rem; } /* hku-auth tablo baÃ…Å¸lÃ„Â±Ã„Å¸Ã„Â±: koyu gradyan blok DEÃ„Å¾Ã„Â°L Ã¢â‚¬â€ aÃƒÂ§Ã„Â±k zemin + versal, sakin gri metin. Gradyan baÃ…Å¸lÃ„Â±k sayfadaki tek "aÃ„Å¸Ã„Â±r" ÃƒÂ¶Ã„Å¸eydi ve kartÃ„Â±n ferahlÃ„Â±Ã„Å¸Ã„Â±nÃ„Â± bozuyordu. */ table.dataTable.hku-dt thead th { background: var(--hku-thead-bg); color: var(--hku-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: .72rem; padding: .75rem 1rem; border-bottom: 1px solid var(--hku-line); vertical-align: middle; } table.dataTable.hku-dt tbody tr { transition: background-color .12s ease; } table.dataTable.hku-dt tbody tr:hover { background-color: var(--hku-bg-soft) !important; } table.dataTable.hku-dt tbody tr.odd { background-color: transparent; } table.dataTable.hku-dt tbody td { padding: .45rem .7rem; border-bottom: 1px solid var(--hku-line); vertical-align: middle; } table.dataTable.hku-dt tbody tr:last-child td { border-bottom: 0; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid var(--hku-input); border-radius: var(--hku-radius-sm); background-color: var(--hku-input-bg); padding: .3rem .6rem; font-size: .82rem; min-height: 32px; } .dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dataTables_length select:focus { border-color: var(--hku-primary); box-shadow: 0 0 0 3px var(--hku-primary-tint); outline: 0; } .dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_length label { font-size: .88rem; color: var(--hku-text-muted); font-weight: 500; } .dataTables_wrapper .dataTables_info { font-size: .85rem; color: var(--hku-text-muted); padding-top: .4em !important; } .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--hku-radius-sm) !important; padding: .4rem .8rem !important; margin: 0 2px !important; font-size: .88rem; border: 1px solid transparent !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--hku-card) !important; border-color: var(--hku-primary) !important; color: var(--hku-primary) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--hku-primary) !important; border-color: var(--hku-primary) !important; color: #fff !important; } .hku-dt-actions { display: inline-flex; gap: .3rem; } .hku-dt-actions .btn { border-radius: var(--hku-radius-sm); padding: .15rem .4rem; font-size: .8rem; min-height: 26px; border-width: 1px; } table.dataTable .badge { font-size: .76rem; font-weight: 600; padding: .4em .7em; border-radius: var(--hku-radius-sm); } /* ============================================================================= ALERTS Ã¢â‚¬â€ sol kenar 4px renkli ÃƒÂ§izgi ============================================================================= */ .alert.hku-alert { border: 1px solid transparent; border-radius: var(--hku-radius-md); padding: .9rem 1.15rem; border-left-width: 4px; font-size: .92rem; margin-bottom: 1.25rem; } .alert.hku-alert-success { background: #f0f9f4; border-color: #c3e6cd; border-left-color: var(--hku-success); color: #1c5a32; } .alert.hku-alert-danger { background: #fdf2f2; border-color: #f5c7c7; border-left-color: var(--hku-danger); color: #842029; } .alert.hku-alert-info { background: #eff7fb; border-color: #b9e0ee; border-left-color: var(--hku-info); color: #0c5460; } .alert.hku-alert-warning { background: #fef9eb; border-color: #f8e0a0; border-left-color: var(--hku-warn); color: #856404; } /* ============================================================================= DASHBOARD (Home/Index) Ã¢â‚¬â€ modern KPI grid + quick actions ============================================================================= */ .hku-welcome { background: linear-gradient(160deg, var(--hku-navy) 0%, var(--hku-primary-dark) 100%); color: #fff; border-radius: var(--hku-radius-lg); padding: 1.75rem 2rem; margin-bottom: .9rem; box-shadow: var(--hku-shadow-md); position: relative; overflow: hidden; } .hku-welcome::before { content: ''; position: absolute; top: -50px; right: -50px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .hku-welcome h1 { font-size: 1.3rem; font-weight: 600; margin: 0 0 .3rem; color: #fff; letter-spacing: -.01em; position: relative; } .hku-welcome p { margin: 0; color: rgba(255,255,255,.88); font-size: .96rem; position: relative; } .hku-welcome .hku-welcome-meta { font-size: .82rem; color: rgba(255,255,255,.7); margin-top: .6rem; position: relative; } /* KPI grid */ .hku-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1rem; } /* hku-auth ".stat": renkli sol kenar cizgisi YOK Ã¢â‚¬â€ anlam tint'li ikon karesinde. Dort kartin dordunde de farkli renkli kenar, panoyu alacali gosteriyordu. */ .hku-kpi { background: var(--hku-card); border: 1px solid var(--hku-card-border); border-radius: var(--hku-radius-lg); padding: .85rem .95rem; box-shadow: var(--hku-shadow-md); display: flex; align-items: center; gap: .7rem; transition: border-color .15s ease; text-decoration: none; color: var(--hku-text); } .hku-kpi:hover { border-color: var(--hku-border-hover); color: var(--hku-text); } .hku-kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } .hku-kpi-body { flex: 1; min-width: 0; } .hku-kpi-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; color: var(--hku-text-muted); margin: 0 0 .3rem; font-weight: 600; } .hku-kpi-value { font-size: 1.5rem; font-weight: 700; color: var(--hku-text); letter-spacing: -.3px; line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; } .hku-kpi-trend { font-size: .78rem; color: var(--hku-text-muted); margin-top: .2rem; } /* KPI color variants */ .hku-kpi.kpi-primary .hku-kpi-icon { background: rgba(0,51,102,.10); color: var(--hku-primary); } .hku-kpi.kpi-danger .hku-kpi-icon { background: rgba(220,53,69,.10); color: var(--hku-danger); } .hku-kpi.kpi-warn .hku-kpi-icon { background: rgba(243,156,18,.12); color: var(--hku-warn); } .hku-kpi.kpi-success .hku-kpi-icon { background: rgba(40,167,69,.10); color: var(--hku-success); } .hku-kpi.kpi-info .hku-kpi-icon { background: rgba(23,162,184,.10); color: var(--hku-info); } .hku-kpi.kpi-accent .hku-kpi-icon { background: rgba(165,42,42,.10); color: var(--hku-accent); } /* Quick action grid */ .hku-quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .hku-quick { background: #fff; border: 1px solid var(--hku-border); border-radius: var(--hku-radius-md); padding: .6rem .8rem; box-shadow: var(--hku-shadow-sm); text-decoration: none; color: var(--hku-text); display: flex; align-items: center; gap: .85rem; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .hku-quick:hover { transform: translateY(-1px); box-shadow: var(--hku-shadow-md); border-color: var(--hku-primary); color: var(--hku-primary); } .hku-quick-icon { width: 42px; height: 42px; border-radius: var(--hku-radius-sm); background: var(--hku-bg-soft); color: var(--hku-primary); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; } .hku-quick-title { font-weight: 600; font-size: .95rem; margin: 0 0 .15rem; } .hku-quick-desc { font-size: .78rem; color: var(--hku-text-muted); margin: 0; } .hku-section-title { font-size: 1.05rem; font-weight: 700; color: var(--hku-primary); margin: 1.5rem 0 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--hku-border); display: flex; align-items: center; gap: .55rem; } .hku-section-title i { color: var(--hku-accent); } .hku-section-title:first-child { margin-top: 0; } /* ============================================================================= DETAY SAYFALARI Ã¢â‚¬â€ dl > dt/dd otomatik modern stil Bootstrap "dl.row" yapÃ„Â±sÃ„Â±nÃ„Â± koruyup ÃƒÂ¼zerine modern gÃƒÂ¶rÃƒÂ¼nÃƒÂ¼m. ============================================================================= */ .hku-card-body dl.row dt, .hku-card-body dl dt { color: var(--hku-text-muted); font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .5px; padding-top: .8rem; padding-bottom: .25rem; margin-bottom: 0; } .hku-card-body dl.row dd, .hku-card-body dl dd { color: var(--hku-text); font-weight: 500; font-size: .95rem; border-bottom: 1px solid #eef2f6; padding-top: .25rem; padding-bottom: .8rem; margin-bottom: 0; line-height: 1.5; } .hku-card-body dl.row dd:last-of-type, .hku-card-body dl dd:last-of-type { border-bottom: none; } /* dd iÃƒÂ§indeki badge'ler hafif daha bÃƒÂ¼yÃƒÂ¼k */ .hku-card-body dl dd .badge { font-size: .78rem; padding: .4em .7em; border-radius: var(--hku-radius-sm); font-weight: 600; } /* dd iÃƒÂ§inde boÃ…Å¸ deÃ„Å¸er iÃƒÂ§in stilize "Ã¢â‚¬â€" */ .hku-card-body dl dd.empty, .hku-card-body dl dd:empty::after { content: 'Ã¢â‚¬â€'; color: #adb5bd; font-style: italic; } /* ============================================================================= BADGE Ã¢â‚¬â€ modern stil (Bootstrap default'unu bÃƒÂ¼yÃƒÂ¼t) ============================================================================= */ .badge { padding: .42em .7em; font-size: .76rem; font-weight: 600; border-radius: var(--hku-radius-sm); letter-spacing: .15px; } /* ============================================================================= TIMELINE Ã¢â‚¬â€ gÃƒÂ¶zden geÃƒÂ§irme, aktivite log gibi sÃ„Â±rali liste ============================================================================= */ .hku-timeline { list-style: none; padding: 0; margin: 0; position: relative; } .hku-timeline::before { content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--hku-border); } .hku-timeline > li { position: relative; padding-left: 32px; padding-bottom: 1rem; } .hku-timeline > li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--hku-primary); } .hku-timeline > li.success::before { border-color: var(--hku-success); } .hku-timeline > li.danger::before { border-color: var(--hku-danger); } .hku-timeline > li.warn::before { border-color: var(--hku-warn); } /* ============================================================================= LOADING SPINNER + STATE ============================================================================= */ .hku-spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: hku-spin .7s linear infinite; vertical-align: -.15em; } .hku-spinner-lg { width: 2rem; height: 2rem; border-width: 3px; } @keyframes hku-spin { to { transform: rotate(360deg); } } .hku-loading { text-align: center; padding: 2rem; color: var(--hku-text-muted); } .hku-empty { text-align: center; padding: 2.5rem 1rem; color: var(--hku-text-muted); } .hku-empty i { font-size: 2.5rem; color: var(--hku-border-hover); margin-bottom: .75rem; display: block; } .hku-empty p { margin: 0; font-size: .92rem; } /* ============================================================================= MODULE TABS Ã¢â‚¬â€ _ModuleTabs.cshtml partial iÃƒÂ§in modern tab navigasyonu. Mevcut .nav-tabs / .nav-pills karÃ„Â±Ã…Å¸Ã„Â±klÃ„Â±Ã„Å¸Ã„Â±nÃ„Â±n yerine standart hku-tabs. ============================================================================= */ .hku-tabs { display: flex; gap: 0; list-style: none; margin: 0 0 1.5rem 0; padding: 0; border-bottom: 1px solid var(--hku-line, #eef1f5); overflow-x: auto; -webkit-overflow-scrolling: touch; } .hku-tabs .nav-item { margin: 0; } .hku-tabs .nav-link { color: var(--hku-text-muted, #6b7280); background: transparent; padding: .6rem 1.05rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-weight: 600; font-size: .94rem; white-space: nowrap; transition: color .15s ease, background-color .15s ease, border-color .15s ease; margin-bottom: -1px; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; } .hku-tabs .nav-link:hover { color: var(--hku-text); background: transparent; } .hku-tabs .nav-link.active { color: var(--hku-accent); background: transparent; border-bottom-color: var(--hku-accent); } .hku-tabs .nav-link:focus-visible { outline: 2px solid var(--hku-primary); outline-offset: -2px; } /* ============================================================================= FILTER TOOLBAR Ã¢â‚¬â€ _FilterToolbar.cshtml standart "Temizle + Filtrele" grubu ============================================================================= */ .hku-filter-toolbar { align-items: stretch; } .hku-filter-toolbar .hku-btn-primary, .hku-filter-toolbar .hku-btn-secondary { min-height: 38px; padding: .45rem .9rem; font-size: .9rem; } /* ============================================================================= DATATABLES SATIR AKSIYONLARI Ã¢â‚¬â€ .hku-dt-actions / .hku-dt-ikon Ã°Å¸â€Â´ Cerceveli buton YERINE sade SVG ikon (kullanici karari, Batch 79). Her satirda 3 outline buton, listeyi "buton duvarina" cevirip asil veriyi bastiriyordu. Ikon 28px dokunma hedefi korur (WCAG hedef boyutu), renk currentColor uzerinden temaya bagli, cerceve yalnizca :hover'da belirir. ============================================================================= */ .hku-dt-actions { display: inline-flex; gap: .15rem; white-space: nowrap; } .hku-dt-actions form { margin: 0; display: inline-flex; } .hku-dt-ikon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: var(--hku-radius-sm); background: transparent; color: var(--hku-text-muted); cursor: pointer; text-decoration: none; transition: color .12s ease, background-color .12s ease, border-color .12s ease; } .hku-dt-ikon:hover, .hku-dt-ikon:focus-visible { color: var(--hku-primary); background: var(--hku-bg-soft); border-color: var(--hku-border); text-decoration: none; } .hku-dt-ikon.tehlike:hover, .hku-dt-ikon.tehlike:focus-visible { color: var(--hku-danger, #d64545); border-color: var(--hku-danger, #d64545); background: transparent; } .hku-dt-ikon:focus-visible { outline: 2px solid var(--hku-primary); outline-offset: 1px; } .hku-dt-ikon svg { display: block; } .hku-dt-ikon[disabled], .hku-dt-ikon:disabled { opacity: .4; cursor: not-allowed; } /* ============================================================================= DATATABLES BUTTONS (Print/Copy/Excel/CSV/PDF/SÃƒÂ¼tunlar) Bootstrap 5 theme'in default gri zeminini Ã…Å¸effafa ÃƒÂ§evir + HKU outline stil ============================================================================= */ .dt-buttons, .dataTables_wrapper .dt-buttons { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; } .dt-buttons .btn, .dt-buttons .dt-button { background: #fff; background-color: #fff; background-image: none; border: 1px solid var(--hku-border, #d1d5db); color: var(--hku-text, #374151); margin-right: .25rem; padding: .35rem .75rem; font-size: .85rem; border-radius: 6px; box-shadow: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .dt-buttons .btn:last-child, .dt-buttons .dt-button:last-child { margin-right: 0; } .dt-buttons .btn:hover, .dt-buttons .dt-button:hover:not(.disabled) { background: var(--hku-bg-soft, #f6f8fb); background-color: var(--hku-bg-soft, #f6f8fb); border-color: var(--hku-primary); color: var(--hku-primary); box-shadow: none; } .dt-buttons .btn:focus, .dt-buttons .btn:focus-visible, .dt-buttons .dt-button:focus, .dt-buttons .dt-button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.15); } .dt-buttons .btn-outline-success { color: var(--hku-success, #28a745); border-color: var(--hku-success, #28a745); } .dt-buttons .btn-outline-success:hover { background: var(--hku-success, #28a745); color: #fff; } .dt-buttons .btn-outline-danger { color: var(--hku-danger, #dc2626); border-color: var(--hku-danger, #dc2626); } .dt-buttons .btn-outline-danger:hover { background: var(--hku-danger, #dc2626); color: #fff; } .dt-buttons .btn-outline-info { color: var(--hku-info, #17a2b8); border-color: var(--hku-info, #17a2b8); } .dt-buttons .btn-outline-info:hover { background: var(--hku-info, #17a2b8); color: #fff; } .dt-buttons .btn-outline-dark { color: var(--hku-primary); border-color: var(--hku-primary); } .dt-buttons .btn-outline-dark:hover { background: var(--hku-primary); color: #fff; } .dt-buttons .btn-outline-secondary { color: var(--hku-text-muted, #6b7280); border-color: var(--hku-border, #d1d5db); } .dt-buttons .btn-outline-secondary:hover { background: var(--hku-bg-soft, #f6f8fb); color: var(--hku-primary); border-color: var(--hku-primary); } /* colVis dropdown Ã¢â‚¬â€ sÃƒÂ¼tun seÃƒÂ§/gizle menÃƒÂ¼sÃƒÂ¼ */ .dt-button-collection { background: #fff; border: 1px solid var(--hku-border, #d1d5db); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: .25rem 0; } .dt-button-collection .dt-button { background: transparent; border: 0; border-radius: 0; margin: 0; width: 100%; text-align: left; padding: .5rem 1rem; } .dt-button-collection .dt-button:hover { background: var(--hku-bg-soft, #f6f8fb); color: var(--hku-primary); } .dt-button-collection .dt-button.active { background: var(--hku-primary); color: #fff; } .dt-button-background { background: rgba(0, 0, 0, 0.15) !important; } /* Dark mode override */ [data-theme="dark"] .dt-buttons .btn, [data-theme="dark"] .dt-buttons .dt-button { background: var(--hku-dark-surface, #1f2937); background-color: var(--hku-dark-surface, #1f2937); border-color: var(--hku-dark-divider, #374151); color: var(--hku-text, #e5e7eb); } [data-theme="dark"] .dt-buttons .btn:hover, [data-theme="dark"] .dt-buttons .dt-button:hover:not(.disabled) { background: var(--hku-dark-surface-2, #111827); border-color: var(--hku-primary); } [data-theme="dark"] .dt-button-collection { background: var(--hku-dark-surface, #1f2937); border-color: var(--hku-dark-divider, #374151); } /* DataTables wrapper polish Ã¢â‚¬â€ sayfalama + length + info hizalama */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { font-size: .88rem; } .dataTables_wrapper .dataTables_length select { min-width: 70px; margin: 0 .35rem; } .dataTables_wrapper .dataTables_filter input { min-width: 200px; margin-left: .35rem; } .dataTables_wrapper .pagination .page-link { color: var(--hku-primary); } .dataTables_wrapper .pagination .active .page-link, .dataTables_wrapper .pagination .page-item.active .page-link { background-color: var(--hku-primary); border-color: var(--hku-primary); color: #fff; } /* ============================================================================= TOM SELECT Ã¢â‚¬â€ search ÃƒÂ¶zellikli dropdown adapt (Birim/SÃƒÂ¼reÃƒÂ§ gibi bÃƒÂ¼yÃƒÂ¼k lookup'lar) ============================================================================= */ .ts-wrapper.form-select-sm, .form-select-sm + .ts-wrapper { font-size: .875rem; } .ts-wrapper.single .ts-control { min-height: 38px; padding: .35rem .75rem; border-radius: 6px; border: 1px solid var(--hku-border, #d1d5db); box-shadow: none; background: #fff; } .ts-wrapper.single .ts-control:hover { border-color: var(--hku-primary); } .ts-wrapper.focus .ts-control { border-color: var(--hku-primary); box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.15); } .ts-dropdown { border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); border: 1px solid var(--hku-border, #d1d5db); /* 🔴 z-index BURAYA YAZILMAZ — tom-select'in kendi CSS'i bu dosyadan SONRA yukleniyor (olculdu: hku-modern 4. sira, tom-select 11. sira) ve esit ozgullukte sonraki kazaniyor. Katman kurali hku-vendor-override.css'te. */ } .ts-dropdown .option { padding: .5rem .75rem; border-bottom: 1px solid #f3f4f6; } .ts-dropdown .option:last-child { border-bottom: 0; } .ts-dropdown .option.active { background: var(--hku-bg-soft, #f6f8fb); color: var(--hku-primary); } .ts-dropdown .option.selected { background: var(--hku-primary); color: #fff; } .ts-dropdown .ts-sub { margin-top: 2px; font-size: .78rem; line-height: 1.25; opacity: .85; white-space: normal; } .ts-dropdown .option.selected .ts-sub { color: rgba(255,255,255,0.85); } .ts-wrapper .clear-button { color: var(--hku-text-muted, #6b7280); } /* ============================================================================= CHART utility Ã¢â‚¬â€ Chart.js responsive container (sabit yÃƒÂ¼kseklik) ============================================================================= */ .hku-chart-wrap { position: relative; height: 320px; } @media (max-width: 768px) { .hku-chart-wrap { height: 260px; } } .hku-chart-error { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--hku-text-muted); font-size: .9rem; text-align: center; padding: 1rem; } /* ============================================================================= PRINT Ã¢â‚¬â€ raporlar iÃƒÂ§in sadeleÃ…Å¸tirme ============================================================================= */ @media print { .hku-sidebar, .hku-topbar, .hku-footer, .hku-page-actions, .hku-form-actions, .hku-filter-card, .hku-dt-actions, button, .btn, [class*="hku-btn-"] { display: none !important; } .hku-main { margin-left: 0 !important; } .hku-content { padding: 0 !important; } .hku-card, .hku-card-body { box-shadow: none !important; border: 1px solid #ddd !important; } table.dataTable.hku-dt thead th { background: #f1f5f9 !important; color: #000 !important; border-bottom: 2px solid #999 !important; } .hku-page-header { border-bottom-color: #999; } .hku-page-header h1 { color: #000 !important; font-size: 1.2rem; } body { background: #fff !important; } a { color: #000 !important; text-decoration: none !important; } /* Ã°Å¸â€Â´ Basilan rapor KAPSAMINI soylemeli. Filtre cubugu yazdirmada gizlendigi icin, kagitta "hangi yil / hangi birim" bilgisi kaybolurdu; kapsamsiz bir tablo toplantida yanlis okunur. Bu satir yalniz filtre uygulanmisken uretilir. */ .hku-pano-kapsam { display: block !important; } /* Grafikler kagitta kesilmesin */ .chart-container-340, .hku-card { break-inside: avoid; page-break-inside: avoid; } } /* ============================================================================= PANO FÃ„Â°LTRESÃ„Â° Ã¢â‚¬â€ gÃƒÂ¶sterge panolarÃ„Â±nÃ„Â±n ortak filtre ÃƒÂ§ubuÃ„Å¸u (_PanoFiltre.cshtml) ============================================================================= */ .hku-pano-filtre .form-label { font-size: .78rem; margin-bottom: .25rem; } .hku-pano-kapsam { font-size: .84rem; color: var(--hku-text-muted); margin: -.4rem 0 .9rem; } .hku-pano-kapsam strong { color: var(--hku-text); font-weight: 600; } /* ============================================================================= PROFÃ„Â°L Ã¢â‚¬â€ Account/Profil hero + bilgi satÃ„Â±rlarÃ„Â± ============================================================================= */ .hku-profile-hero { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; background: linear-gradient(160deg, var(--hku-navy) 0%, var(--hku-primary-dark) 100%); color: #fff; border-radius: var(--hku-radius-lg); padding: 1.6rem 1.9rem; box-shadow: var(--hku-shadow-lg); } .hku-profile-avatar { width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; font-weight: 700; letter-spacing: .5px; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .28); } .hku-profile-meta { flex: 1 1 240px; min-width: 0; } .hku-profile-meta .hku-profile-name { font-size: 1.35rem; font-weight: 700; margin: 0; color: #fff; word-break: break-word; } .hku-profile-meta .hku-profile-mail { color: #cfdbeb; font-size: .9rem; margin-top: .25rem; } .hku-profile-badges { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .65rem; } .hku-profile-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } /* Bilgi satÃ„Â±rÃ„Â± Ã¢â‚¬â€ etiket solda, deÃ„Å¸er saÃ„Å¸da; tema-baÃ„Å¸Ã„Â±msÃ„Â±z ince ayraÃƒÂ§ */ .hku-info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid rgba(128, 128, 128, .18); } .hku-info-row:last-child { border-bottom: none; } .hku-info-row .lbl { color: var(--hku-text-muted); font-size: .85rem; display: flex; align-items: center; gap: .45rem; white-space: nowrap; } .hku-info-row .val { font-weight: 600; text-align: right; word-break: break-word; } .hku-card-title-icon { width: 30px; height: 30px; border-radius: 7px; background: var(--hku-primary-tint); color: var(--hku-primary); display: inline-flex; align-items: center; justify-content: center; margin-right: .5rem; } @media (max-width: 575px) { .hku-profile-hero { padding: 1.25rem; } .hku-profile-actions { width: 100%; } } /* ============================================================================= RESPONSIVE ============================================================================= */ @media (max-width: 768px) { .hku-page-header { flex-direction: column; align-items: flex-start; } .hku-page-header h1 { font-size: 1.3rem; } .hku-card-body { padding: 1.1rem; } .hku-form-actions { flex-direction: column-reverse; gap: .5rem; } .hku-form-actions .btn, .hku-form-actions .hku-btn-primary, .hku-form-actions .hku-btn-secondary { width: 100%; justify-content: center; } .hku-content { padding: 16px; } table.dataTable.hku-dt thead th { font-size: .72rem; padding: .6rem .55rem; } table.dataTable.hku-dt tbody td { padding: .6rem .55rem; } .hku-topbar { padding: 0 14px; } .hku-topbar-title { display: none; } .hku-topbar-user .user-role { display: none; } } /* =================================================================== Performans gerÃƒÂ§ekleÃ…Å¸me gÃƒÂ¶rselleÃ…Å¸tirme (DegerGirisleri + Strateji Panosu) =================================================================== */ .hku-perf-cell { display: flex; align-items: center; gap: .5rem; justify-content: center; } .hku-mini-progress { position: relative; flex: 1 1 auto; min-width: 70px; max-width: 130px; height: 8px; background: #e9edf3; border-radius: 6px; overflow: hidden; } .hku-mini-progress-bar { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .4s ease; } .hku-mini-progress-bar.is-ok { background: var(--hku-success); } .hku-mini-progress-bar.is-warn { background: var(--hku-warn); } .hku-mini-progress-bar.is-low { background: var(--hku-danger); } .hku-perf-pct { font-size: .82rem; font-weight: 700; min-width: 38px; text-align: right; } .hku-perf-pct.is-ok { color: var(--hku-success); } .hku-perf-pct.is-warn { color: var(--hku-warn); } .hku-perf-pct.is-low { color: var(--hku-danger); } .hku-legend { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; font-size: .82rem; color: var(--hku-text-muted, #6b7785); } .hku-legend-item { display: inline-flex; align-items: center; gap: .35rem; } .hku-legend-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .hku-legend-dot.is-ok { background: var(--hku-success); } .hku-legend-dot.is-warn { background: var(--hku-warn); } .hku-legend-dot.is-low { background: var(--hku-danger); } .hku-legend-note { margin-left: auto; font-style: italic; } /* =================================================================== Stratejik Plan Performans Panosu (hiyerarÃ…Å¸ik: AmaÃƒÂ§ Ã¢â€ â€™ Hedef Ã¢â€ â€™ GÃƒÂ¶sterge) =================================================================== */ .hku-pano-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1.25rem; } .hku-pano-stats { display: flex; flex-wrap: wrap; gap: .75rem; } .hku-pano-stat { background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; padding: .6rem 1rem; min-width: 110px; box-shadow: 0 1px 2px rgba(16,24,40,.04); } .hku-pano-stat .v { font-size: 1.4rem; font-weight: 800; color: var(--hku-primary); line-height: 1; } .hku-pano-stat .l { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: #8a94a6; margin-top: .25rem; } .hku-amac { background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; margin-bottom: 1rem; overflow: hidden; box-shadow: 0 1px 3px rgba(16,24,40,.05); } .hku-amac-head { display: flex; align-items: center; gap: .85rem; cursor: pointer; padding: 1rem 1.25rem; background: linear-gradient(90deg, rgba(0,51,102,.06), rgba(0,51,102,.01)); border-left: 5px solid var(--hku-primary); } .hku-amac-head:hover { background: linear-gradient(90deg, rgba(0,51,102,.1), rgba(0,51,102,.02)); } .hku-amac-kod { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px; background: var(--hku-primary); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .hku-amac-title { flex: 1 1 auto; font-weight: 700; color: var(--hku-primary); font-size: 1.02rem; } .hku-amac-meta { flex: 0 0 auto; font-size: .8rem; color: #8a94a6; } .hku-amac-caret { flex: 0 0 auto; transition: transform .25s ease; color: #8a94a6; } .hku-amac.is-collapsed .hku-amac-caret { transform: rotate(-90deg); } .hku-amac.is-collapsed .hku-amac-body { display: none; } .hku-amac-body { padding: .5rem 1.25rem 1rem; } .hku-hedef { border-top: 1px solid #eef1f6; padding: .85rem 0 .35rem; } .hku-hedef:first-child { border-top: none; } .hku-hedef-title { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: #344054; margin-bottom: .5rem; font-size: .95rem; } .hku-hedef-kod { flex: 0 0 auto; font-size: .72rem; font-weight: 700; color: var(--hku-accent); background: rgba(165,42,42,.08); border-radius: 5px; padding: .12rem .45rem; } .hku-gosterge-table { width: 100%; border-collapse: collapse; } .hku-gosterge-table td { padding: .4rem .5rem; border-bottom: 1px dashed #eef1f6; font-size: .88rem; vertical-align: middle; } .hku-gosterge-table tr:last-child td { border-bottom: none; } .hku-gosterge-ad { color: #475467; } .hku-gosterge-val { text-align: right; white-space: nowrap; color: #344054; font-variant-numeric: tabular-nums; } .hku-gosterge-val .muted { color: #98a2b3; } .hku-gosterge-bar { width: 200px; } @media (max-width: 768px) { .hku-gosterge-bar { width: 120px; } .hku-amac-meta { display: none; } } /* ========================================================================= Tom Select duzeltmeleri ------------------------------------------------------------------------- tom-select@2.3.1'in "bootstrap5" build'i, tek-secimli kutuda kullanici yazmaya basladiginda secili ogeyi gizleyen kurali ICERMIYOR. Bu yuzden filtre dropdown'larinda secili "Tumu" etiketi, yazilan arama metninin altinda gorunmeye devam ediyordu. Asagidaki kural bunu duzeltir: kutu aktif (yaziliyor) iken secili oge gizlenir, placeholder gorunur. ========================================================================= */ .ts-wrapper.single.input-active .ts-control > .item { display: none !important; } .ts-wrapper.single.input-active .ts-control > input { min-width: 6rem; } /* Placeholder okunur gri (bootstrap5 build'inde bazen miras almiyor) */ .ts-control > input::placeholder { color: #98a2b3; opacity: 1; } /* ============================================================ Erisilebilirlik temelleri (2026-09-08) - .hku-sr-only: _KeyboardShortcuts'ta KULLANILIYOR ama hicbir CSS'te TANIMLI DEGILDI; yalnizca inline style sayesinde gizleniyordu ve CSP style-src'de 'unsafe-hashes' olmadigi icin o inline style uygulanmayip metin ekranda gorunebiliyordu. - Global :focus-visible: klavye kullanicisi icin gorunur odak. - prefers-reduced-motion: yardimci CSS'lerde vardi, ana dosyada yoktu. ============================================================ */ .hku-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hku-app a:focus-visible, .hku-app button:focus-visible, .hku-app input:focus-visible, .hku-app select:focus-visible, .hku-app textarea:focus-visible, .hku-app [tabindex]:focus-visible { outline: 3px solid var(--hku-primary); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { .hku-app *, .hku-app *::before, .hku-app *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ============================================================ FOOTER DURUM Ã¢â‚¬â€ baÃ„Å¸lantÃ„Â± kalitesi ÃƒÂ§ubuklarÃ„Â± + sÃƒÂ¼rÃƒÂ¼m rozeti Batch: hku-auth Footer.tsx eÃ…Å¸leniÃ„Å¸i. Ã¢Å¡Â Ã¯Â¸Â SatÃ„Â±r iÃƒÂ§i style YASAK (CSP nonce'lu) Ã¢â‚¬â€ ÃƒÂ§ubuk yÃƒÂ¼kseklikleri burada sÃ„Â±nÃ„Â±fla verilir, JS yalnÃ„Â±z .is-aktif sÃ„Â±nÃ„Â±fÃ„Â±nÃ„Â± ÃƒÂ§evirir. ============================================================ */ .hku-footer-durum { /* Footer artik flex satiri: bu blok SAG uctadir (margin-top eski yigin duzeninden kalmisti). */ display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: .74rem; white-space: nowrap; } .hku-baglanti { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; } .hku-baglanti-cubuk { width: 3px; border-radius: 2px; background: var(--hku-border, #dfe3e8); } .hku-baglanti-cubuk-1 { height: 4px; } .hku-baglanti-cubuk-2 { height: 7px; } .hku-baglanti-cubuk-3 { height: 10px; } .hku-baglanti-cubuk-4 { height: 14px; } .hku-baglanti-cubuk.is-aktif { background: #1e7e34; } .hku-surum-rozeti { border: 1px solid var(--hku-border, #dfe3e8); border-radius: 4px; padding: 1px 6px; font-variant-numeric: tabular-nums; color: var(--hku-text-muted, #6c757d); } /* Karanlik tema Ã¢â‚¬â€ cubuk pasif tonu ve rozet kenarligi okunur kalmali. */ [data-theme="dark"] .hku-baglanti-cubuk { background: rgba(255, 255, 255, .22); } [data-theme="dark"] .hku-baglanti-cubuk.is-aktif { background: #4ade80; } [data-theme="dark"] .hku-surum-rozeti { border-color: rgba(255, 255, 255, .25); } /* ============================================================ YOGUNLUK (kompakt duzen) Ã¢â‚¬â€ 2026-09-08 Kaynak: kardes projelerle olculmus kiyas (hku-auth satir 41px / form 38px, hku-portal 37px / 34px; KYS 58px / 44px idi). Amac: ayni ekranda 7 yerine ~13 satir. Tum degisiklikler BU dosyada Ã¢â‚¬â€ 491 view'a dokunulmadi. Geri alma: tek `git revert` ya da asagidaki degiskenleri buyutmek yeter. ============================================================ */ :root { --hku-d-cell-y: .45rem; --hku-d-cell-x: .75rem; --hku-d-control-h: 38px; --hku-d-btn-h: 36px; --hku-d-card-pad: 1rem; --hku-d-gap: .75rem; } /* K3 Ã¢â‚¬â€ filtre etiketleri kucuk ama KALIR. Not: kardes projeler etiketi tamamen kaldirip aria-label kullaniyor; bizde bu 92 view'i elle duzenlemeyi ve etiketsiz alan riskini getirirdi. */ .hku-filter-card .form-label { font-size: .75rem; margin-bottom: .15rem; font-weight: 500; } .hku-filter-card .row.g-2 { --bs-gutter-y: .35rem; } /* K6 Ã¢â‚¬â€ tabloyu saran kartin dolgusu incelir. Kardeslerde tablo hic kart icine girmiyor; bizde sarmali kaldirmak 92 view duzenlemesi demek, bu yuzden yalniz dolguyu inceltiyoruz. :has() desteklenmezse eski dolgu gecerli kalir (zararsiz). */ /* Genis tablo kartin ICINDE kayar; sayfa govdesi yatay kaymaz. Mobilde (430px) tablo tum sayfayi genisletiyor, KPI seridi ve baslik da ekran disina tasiyordu Ã¢â‚¬â€ olculdu, 2026-09-09. */ .hku-card-body:has(> table.hku-dt), .hku-card-body:has(.dataTables_wrapper) { padding: .5rem .75rem; overflow-x: auto; } /* K9 Ã¢â‚¬â€ DataTables arac cubugu (uzunluk secici + arama) */ .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { min-height: 34px; padding: .3rem .6rem; } .dt-buttons .btn { padding: .25rem .6rem; } /* K10 Ã¢â‚¬â€ DOKUNMATIK EMNIYET (K2/K5 ile AYRILAMAZ) Kompaktlik yalniz fare/klavye icindir. Dokunmatik cihazda hedefler BUYUR: bugun mobilde 40px olan ana buton 44px'e cikar. Bu blok kaldirilirsa kompaktlastirma erisilebilirligi dusurur. */ @media (pointer: coarse) { .hku-form .form-control, .hku-form .form-select { min-height: 44px; } .hku-btn-primary, .hku-btn-secondary, .btn { min-height: 44px; } .hku-dt-actions .btn { min-height: 40px; padding: .35rem .6rem; } } /* Ã°Å¸â€Â´ Bu sinif TANIMSIZDI: tek tanimi Batch 72'de silinen hku-theme.css'teydi. 118x25'lik eski dosyayla fark edilmiyordu; 800 px genisligindeki resmi logo ile hata sayfasi devasa bir gorsel basacakti. Olu sinif, olu kalmaz Ã¢â‚¬â€ patlar. */ .hku-login-logo { max-width: 220px; width: 100%; height: auto; } /* Koyu temada renkli logonun lacivert yazisi koyu zeminde okunmuyor -> beyaz siluete cevrilir. Ã¢Å¡Â Ã¯Â¸Â Renk kaybi bilincli takas: okunurluk marka renginden once gelir. Aydinlik temada (varsayilan) logo TAM RENKLI gorunur, filtre uygulanmaz. */ [data-theme="dark"] .hku-sidebar-header img { filter: brightness(0) invert(1); opacity: .92; } /* ============================================================================= ROZETLER Ã¢â‚¬â€ hku-auth durum tonlari ---------------------------------------------------------------------------- hku-auth'ta ham `bg-red-50 text-red-700` gibi renkler YASAK: koyu temada karsiligi olmadigi icin okunmuyorlardi. Bootstrap'in dolu rozet renkleri de liste sayfalarinda "trafik isigi" etkisi yapiyor. Rozetler tint zemin + koyu metin olarak sakinlestirilir; degerler tokenlardan gelir. ============================================================================= */ .badge.bg-success { background: var(--hku-success-muted) !important; color: #0f7a3d !important; } .badge.bg-warning { background: var(--hku-warn-muted) !important; color: #a35a06 !important; } .badge.bg-danger { background: var(--hku-danger-muted) !important; color: #b91c1c !important; } .badge.bg-info { background: var(--hku-info-muted) !important; color: #0b4a85 !important; } .badge.bg-primary { background: var(--hku-primary-tint) !important; color: var(--hku-primary) !important; } .badge.bg-secondary { background: var(--hku-line) !important; color: var(--hku-text-muted) !important; } .badge.bg-dark { background: var(--hku-line) !important; color: var(--hku-text) !important; } .badge.text-dark { color: inherit !important; } [data-theme="dark"] .badge.bg-success { color: #6ee7a5 !important; } [data-theme="dark"] .badge.bg-warning { color: #fcd34d !important; } [data-theme="dark"] .badge.bg-danger { color: #fca5a5 !important; } [data-theme="dark"] .badge.bg-info { color: #93c5fd !important; } [data-theme="dark"] .badge.bg-primary { color: #dbeafe !important; } /* ============================================================================= YATAY TASMA KORUMASI ---------------------------------------------------------------------------- Kural: sayfa GOVDESI asla yatay kaymaz; genis icerik (tablo, grafik) kendi kapsayicisinda kayar. Aksi halde genis bir tablo tum sayfayi genisletiyor, KPI seridi ve baslik da ekran disina tasiyor (430px'te olculdu). ============================================================================= */ .hku-app { max-width: 100%; overflow-x: hidden; } .hku-main, .hku-content { min-width: 0; max-width: 100%; } .hku-content > * { min-width: 0; } @media (max-width: 575px) { .hku-content { padding: 14px 14px 22px; } .hku-breadcrumb { padding: 14px 14px 0; } .hku-kpi-grid { grid-template-columns: 1fr 1fr; gap: .65rem; } .hku-kpi { padding: .85rem .9rem; gap: .65rem; } .hku-kpi-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 1rem; } .hku-kpi-value { font-size: 1.25rem; } .hku-page-header h1 { font-size: 1.2rem; } .hku-page-header .hku-page-actions { width: 100%; } .hku-tabs .nav-link { padding: .55rem .75rem; font-size: .88rem; } } /* KÃ„Â°DR ÃƒÂ¶lÃƒÂ§ÃƒÂ¼t-ÃƒÂ¶zel olgunluk rubrikleri (Olcut.cshtml) */ .hku-tikla { cursor: pointer; } .hku-rubrik-liste { display: flex; flex-direction: column; gap: .35rem; } .hku-rubrik-satir { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem .6rem; border: 1px solid var(--hku-line); border-radius: var(--hku-radius-sm); background: var(--hku-bg-soft); font-size: .82rem; line-height: 1.4; } .hku-rubrik-satir.secili { border-color: var(--hku-primary); background: var(--hku-primary-tint); } .hku-rubrik-satir .badge { flex: 0 0 auto; } .hku-rubrik-metin { color: var(--hku-text); } /* ============================================================================ KIDR olgunluk isi haritasi (Kidr/Gelisim) Olgunluk 1-5 icin TEK HUE ordinal ramp. Renkler dataviz dogrulayicisindan gecirildi (monoton L, adjacent dL >= .06, acik uc yuzeye karsi >= 2:1); koyu temada ramp ters cevrilir (koyu yuzeyde dusuk = koyu). Duzey ayrica RAKAM olarak da yazilir -> kimlik asla renge tek basina emanet degil. ========================================================================== */ :root{ --kidr-od1:#86b6ef; --kidr-od2:#5598e7; --kidr-od3:#2a78d6; --kidr-od4:#1c5cab; --kidr-od5:#0d366b; --kidr-od0:#eceff2; --kidr-od-ink:#ffffff; --kidr-od1-ink:#0d2847; } [data-theme="dark"]{ --kidr-od1:#184f95; --kidr-od2:#256abf; --kidr-od3:#3987e5; --kidr-od4:#6da7ec; --kidr-od5:#9ec5f4; --kidr-od0:#252d35; --kidr-od-ink:#0b1520; --kidr-od1-ink:#eef2f6; } .kidr-hm{ width:100%; border-collapse:separate; border-spacing:2px; font-size:.86rem; min-width:640px; } .kidr-hm th{ font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--hku-text-muted); padding:.3rem .4rem; text-align:center; white-space:nowrap; } .kidr-hm th.kidr-hm-ad{ text-align:left; min-width:230px; } .kidr-hm td.kidr-hm-ad{ padding:.25rem .5rem .25rem 0; color:var(--hku-text); } .kidr-hm td.kidr-hm-ad code{ color:var(--hku-text-muted); font-size:.74rem; margin-inline-end:.45rem; } .kidr-hm tr.kidr-hm-grup th{ text-align:left; background:var(--hku-bg-soft); color:var(--hku-text); border-radius:4px; padding:.4rem .6rem; font-size:.7rem; } .kidr-hm-hucre{ text-align:center; border-radius:4px; font-weight:650; font-variant-numeric:tabular-nums; min-width:52px; padding:.32rem .2rem; color:var(--kidr-od-ink); } .kidr-hm-hucre.v1{ background:var(--kidr-od1); color:var(--kidr-od1-ink); } .kidr-hm-hucre.v2{ background:var(--kidr-od2); } .kidr-hm-hucre.v3{ background:var(--kidr-od3); } .kidr-hm-hucre.v4{ background:var(--kidr-od4); } .kidr-hm-hucre.v5{ background:var(--kidr-od5); } .kidr-hm-hucre.v0{ background:var(--kidr-od0); color:var(--hku-text-muted); font-weight:500; } .kidr-lejant{ display:flex; flex-wrap:wrap; gap:.35rem 1rem; align-items:center; font-size:.8rem; color:var(--hku-text-muted); } .kidr-lejant span.kutu{ display:inline-block; width:13px; height:13px; border-radius:3px; vertical-align:-2px; margin-inline-end:.35rem; } .kidr-degisim-up{ color:#1baf7a; font-weight:650; } .kidr-degisim-down{ color:#d64545; font-weight:650; } /* ============================================================================= OLCEK VE ANLAM (2026-09-14) Ã°Å¸â€Â´ "3,07" tek basina anlamsizdi: kac uzerinden oldugu yazmiyordu. Olcekli her deger artik yanina olcegini tasir (/ 5, / 25, / toplam). Sayim KPI'lari (Toplam DOF = 78) olcek ALMAZ - etiket zaten birimi soyler. "veri yok" ile "sifir" AYRI gosterilir (calisma kurali #6). ============================================================================= */ .hku-kpi-olcek { font-size: .58em; /* deger punto'suna gore; buyuk sayinin yaninda geri planda */ font-weight: 500; color: var(--hku-text-muted); letter-spacing: 0; } .hku-kpi-value.hku-kpi-bos { font-size: 1.05rem; font-weight: 500; color: var(--hku-text-muted); font-style: normal; } .hku-kart-olcek { font-size: .78rem; font-weight: 400; color: var(--hku-text-muted); } .hku-sayfa-aciklama { font-size: .8rem; line-height: 1.5; color: var(--hku-text-muted); background: var(--hku-bg-soft); border-left: 3px solid var(--hku-primary); border-radius: 0 var(--hku-radius-sm) var(--hku-radius-sm) 0; padding: .5rem .75rem; margin: 0 0 .85rem; max-width: 100ch; } .hku-sayfa-aciklama strong { color: var(--hku-text); font-weight: 600; } /* ============================================================================= IKINCI KOMPAKTLIK TURU (kullanici: "daha da kompakt yap") ============================================================================= */ .hku-kpi { padding: .7rem .8rem; gap: .6rem; } .hku-kpi-icon { width: 34px; height: 34px; font-size: .95rem; } .hku-kpi-value { font-size: 1.35rem; line-height: 1.15; } .hku-kpi-label { font-size: .72rem; margin-bottom: .1rem; } .hku-kpi-trend { font-size: .7rem; margin-top: .1rem; } .hku-kpi-grid { gap: .6rem; margin-bottom: .85rem; } .hku-card { margin-bottom: .75rem; } .hku-card-title { font-size: .92rem; } table.dataTable.hku-dt thead th { padding: .45rem .7rem; font-size: .74rem; } .hku-tabs .nav-link { padding: .4rem .7rem; font-size: .83rem; } /* --- Ana sayfa: bekleyen isler + akreditasyon ozeti (2026-09-16) ------------- */ .hku-kpi-yukleniyor { opacity: .55; } .hku-akreditasyon-ozet .hku-kpi-value { font-size: 1.9rem; line-height: 1.15; margin: .15rem 0 .35rem; } .hku-akreditasyon-ozet .hku-kpi-trend + .hku-kpi-trend { margin-top: .15rem; } /* --- PUKÃƒâ€“ dÃƒÂ¶ngÃƒÂ¼sÃƒÂ¼ panosu (2026-09-16) --------------------------------------- DÃƒÂ¶rt adÃ„Â±m yan yana; her adÃ„Â±mÃ„Â±n saÃ„Å¸lÃ„Â±Ã„Å¸Ã„Â± SOL KENAR Ãƒâ€¡Ã„Â°ZGÃ„Â°SÃ„Â°YLE verilir ve ayrÃ„Â±ca METÃ„Â°NLE yazÃ„Â±lÃ„Â±r ("Ã„Â°Ã…Å¸liyor / ZayÃ„Â±f / Veri yok") Ã¢â‚¬â€ yalnÃ„Â±z renkle anlatmak eriÃ…Å¸ilebilir deÃ„Å¸ildir. */ .puko-seritler { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .puko-adim { border-left: 4px solid var(--hku-border); margin-bottom: 0; } .puko-adim.puko-saglikli { border-left-color: var(--hku-success); } .puko-adim.puko-zayif { border-left-color: var(--hku-warning); } .puko-adim.puko-bos { border-left-color: var(--hku-danger); } .puko-adim-baslik { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; } .puko-rozet { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hku-primary); color: #fff; font-weight: 700; font-size: 1rem; flex-shrink: 0; } .puko-durum { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--hku-text-muted); } .puko-aciklama { font-size: .84rem; color: var(--hku-text-muted); margin-bottom: .6rem; } .puko-olcumler { list-style: none; padding: 0; margin: 0 0 .5rem; } .puko-olcumler li { display: flex; align-items: center; gap: .4rem; padding: .3rem 0; border-top: 1px solid var(--hku-border); font-size: .85rem; } .puko-olcumler li:first-child { border-top: 0; } .puko-olcum-etiket { flex: 1; } .puko-olcum-deger { font-weight: 600; font-variant-numeric: tabular-nums; } .puko-olcum-link { color: var(--hku-text-muted); font-size: .75rem; } .puko-olcum-link:hover { color: var(--hku-primary); } .puko-uyari { font-size: .82rem; } /* ============================================================================= SÃ„Â°STEM HAZIRLIK Ã¢â‚¬â€ ÃƒÂ¶nkoÃ…Å¸ul tablosu (/Hazirlik) + ana sayfa Ã…Å¸eridi ---------------------------------------------------------------------------- Ã°Å¸â€Â´ Durum YALNIZ renkle verilmez: her satÃ„Â±rda ikon + yazÃ„Â±lÃ„Â± rozet ("Engelleyici"/ "Eksik"/"Tamam") vardÃ„Â±r. Renk kÃƒÂ¶rÃƒÂ¼ bir yÃƒÂ¶neticinin de aynÃ„Â± kararÃ„Â± verebilmesi gerekir. ============================================================================= */ .hazirlik-liste { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; } .hazirlik-madde { display: flex; align-items: flex-start; gap: .85rem; background: var(--hku-card); border: 1px solid var(--hku-card-border); border-left: 4px solid var(--hku-border); border-radius: var(--hku-radius-lg); padding: .9rem 1rem; box-shadow: var(--hku-shadow-md); } .hazirlik-madde.hazirlik-tamam { border-left-color: var(--hku-success); } .hazirlik-madde.hazirlik-eksik { border-left-color: var(--hku-warn); } .hazirlik-madde.hazirlik-engel { border-left-color: var(--hku-danger); } .hazirlik-ikon { font-size: 1.15rem; line-height: 1.4; flex-shrink: 0; } .hazirlik-tamam .hazirlik-ikon { color: var(--hku-success); } .hazirlik-eksik .hazirlik-ikon { color: var(--hku-warn); } .hazirlik-engel .hazirlik-ikon { color: var(--hku-danger); } .hazirlik-govde { flex: 1 1 auto; min-width: 0; } .hazirlik-baslik-satir { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .hazirlik-baslik { font-weight: 600; color: var(--hku-text); } .hazirlik-rozet { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; padding: .1rem .45rem; border-radius: 999px; background: var(--hku-bg-soft); color: var(--hku-text-muted); } .hazirlik-tamam .hazirlik-rozet { background: var(--hku-success-muted); color: var(--hku-success); } .hazirlik-eksik .hazirlik-rozet { background: var(--hku-warn-muted); color: var(--hku-warn); } .hazirlik-engel .hazirlik-rozet { background: var(--hku-danger-muted); color: var(--hku-danger); } .hazirlik-olcum { margin: .3rem 0 .1rem; font-weight: 600; font-size: .92rem; color: var(--hku-text); } .hazirlik-neden { margin: 0; font-size: .85rem; color: var(--hku-text-muted); } /* Ã¢Å¡Â Ã¯Â¸Â Bu sinif kartin durum degistiricisi olan .hazirlik-engel'den AYRI tutulur: ayni adi tasisalardi biri digerinin kapsamina girer, degistiren yanlis yeri duzeltirdi. */ .hazirlik-durdurulan { margin: .35rem 0 0; font-size: .82rem; color: var(--hku-danger); } .hazirlik-eylem { flex-shrink: 0; } @media (max-width: 768px) { .hazirlik-madde { flex-wrap: wrap; } .hazirlik-eylem { width: 100%; } .hazirlik-eylem .hku-btn-secondary { width: 100%; justify-content: center; } } /* --- Ana sayfa hazÃ„Â±rlÃ„Â±k Ã…Å¸eridi ------------------------------------------- */ .hku-hazirlik-serit { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; background: var(--hku-card); border: 1px solid var(--hku-card-border); border-radius: var(--hku-radius-lg); padding: .75rem 1rem; box-shadow: var(--hku-shadow-md); margin-bottom: 1rem; } .hku-hazirlik-bar { flex: 1 1 180px; height: 8px; border-radius: 999px; background: var(--hku-line); overflow: hidden; min-width: 140px; } .hku-hazirlik-bar span { display: block; height: 100%; background: var(--hku-success); transition: width .6s ease; } .hku-hazirlik-bar.uyari span { background: var(--hku-warn); } .hku-hazirlik-bar.engel span { background: var(--hku-danger); } .hku-hazirlik-metin { font-size: .88rem; color: var(--hku-text-muted); } .hku-hazirlik-metin strong { color: var(--hku-text); } /* --- YÃƒÂ¼kleme iskeleti (skeleton) ----------------------------------------- */ /* "YÃƒÂ¼kleniyorÃ¢â‚¬Â¦" yazÃ„Â±sÃ„Â± yerine iÃƒÂ§eriÃ„Å¸in Ã…Å¸eklini gÃƒÂ¶sterir: sayfa zÃ„Â±plamaz. */ .hku-iskelet { background: linear-gradient(90deg, var(--hku-line) 25%, var(--hku-bg-soft) 37%, var(--hku-line) 63%); background-size: 400% 100%; animation: hku-iskelet-akis 1.4s ease infinite; border-radius: 6px; height: 1em; } /* Iskelet parcalari gercek icerigin ORANINI taklit eder: veri gelince satir yuksekligi degismesin, sayfa zÃ„Â±plamasin. */ .hku-iskelet + .hku-iskelet { margin-top: .45rem; } .hku-iskelet { width: 60%; } .hku-iskelet-orta { width: 80%; } .hku-iskelet-buyuk { width: 45%; height: 1.5em; } .hku-kpi-yukleniyor { opacity: 1; } @keyframes hku-iskelet-akis { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .hku-iskelet { animation: none; } .hku-hazirlik-bar span { transition: none; } } /* ============================================================================= ZAMAN KARTI Ã¢â‚¬â€ son tarihli kayÃ„Â±t listesi (DÃƒÂ¶nem Takvimi + Akreditasyon) ---------------------------------------------------------------------------- Ã°Å¸â€Â´ Neden ortak: iki modÃƒÂ¼l aynÃ„Â± iÃ…Å¸i yapÃ„Â±yor Ã¢â‚¬â€ "bir tarihi olan kayÃ„Â±t ve o tarihe ne kadar kaldÃ„Â±Ã„Å¸Ã„Â±". AyrÃ„Â± yazÃ„Â±lmÃ„Â±Ã…Å¸tÃ„Â± ve ÃƒÂ¶lÃƒÂ§ÃƒÂ¼m gÃƒÂ¶sterdi ki 22 kuralÃ„Â±n 18'i birebir aynÃ„Â±ydÃ„Â±: kart gÃƒÂ¶lgesine yapÃ„Â±lan bir dÃƒÂ¼zeltme birinde uygulanÃ„Â±r, diÃ„Å¸erinde sessizce eski kalÃ„Â±rdÃ„Â±. Ã¢Å¡Â Ã¯Â¸Â YalnÃ„Â±z GÃƒâ€“RÃƒÅ“NÃƒÅ“M ortaklaÃ…Å¸tÃ„Â±rÃ„Â±ldÃ„Â±; iki modÃƒÂ¼lÃƒÂ¼n alanlarÃ„Â± (takvimde tÃƒÂ¼r/dÃƒÂ¶nem, akreditasyonda kuruluÃ…Å¸/sertifika) farklÃ„Â± olduÃ„Å¸u iÃƒÂ§in view gÃƒÂ¶vdeleri ayrÃ„Â± kaldÃ„Â± Ã¢â‚¬â€ onlarÃ„Â± tek partial'a sÃ„Â±kÃ„Â±Ã…Å¸tÃ„Â±rmak, kaldÃ„Â±rdÃ„Â±Ã„Å¸Ã„Â± tekrardan daha karmaÃ…Å¸Ã„Â±k olurdu. ============================================================================= */ .hku-zaman-liste { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; } .hku-zaman-kayit { display: flex; align-items: flex-start; gap: 1rem; background: var(--hku-card); border: 1px solid var(--hku-card-border); border-left: 4px solid var(--hku-border); border-radius: var(--hku-radius-lg); padding: .85rem 1rem; box-shadow: var(--hku-shadow-md); } /* Durum bantlarÃ„Â± Ã¢â‚¬â€ anlam adlarÃ„Â±yla, modÃƒÂ¼l adlarÃ„Â±yla deÃ„Å¸il. */ .hku-zaman-kayit.zaman-gecti { border-left-color: var(--hku-danger); } .hku-zaman-kayit.zaman-yaklasiyor { border-left-color: var(--hku-warn); } .hku-zaman-kayit.zaman-iyi { border-left-color: var(--hku-success); } .hku-zaman-kayit.zaman-planli { border-left-color: var(--hku-primary); } .hku-zaman-kayit.zaman-askida { border-left-color: var(--hku-warn-light); } .hku-zaman-kayit.zaman-kapali { border-left-color: var(--hku-border); opacity: .62; } .hku-zaman-tarih { flex-shrink: 0; width: 62px; text-align: center; padding: .35rem .2rem; border-radius: var(--hku-radius-sm); background: var(--hku-bg-soft); } .hku-zaman-gun { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--hku-text); } .hku-zaman-ay { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .4px; color: var(--hku-text-muted); } .hku-zaman-govde { flex: 1 1 auto; min-width: 0; } .hku-zaman-baslik-satir { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .hku-zaman-baslik { font-weight: 600; color: var(--hku-text); } .hku-zaman-tur { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; padding: .1rem .45rem; border-radius: 999px; background: var(--hku-primary-tint); color: var(--hku-primary); } .hku-zaman-rozet { font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; background: var(--hku-bg-soft); color: var(--hku-text-muted); } .zaman-gecti .hku-zaman-rozet { background: var(--hku-danger-muted); color: var(--hku-danger); } .zaman-yaklasiyor .hku-zaman-rozet { background: var(--hku-warn-muted); color: var(--hku-warn); } .zaman-iyi .hku-zaman-rozet { background: var(--hku-success-muted); color: var(--hku-success); } .hku-zaman-ustsatir { margin: .3rem 0 0; font-size: .88rem; color: var(--hku-text); } .hku-zaman-aciklama { margin: .25rem 0 0; font-size: .86rem; color: var(--hku-text-muted); } .hku-zaman-meta { margin: .25rem 0 0; font-size: .78rem; color: var(--hku-text-muted); } .hku-zaman-eylem { flex-shrink: 0; display: flex; gap: .25rem; align-items: center; } @media (max-width: 768px) { .hku-zaman-kayit { flex-wrap: wrap; } .hku-zaman-eylem { width: 100%; justify-content: flex-end; } } /* --- ├ûnko┼ƒula ba─ƒl─▒ bo┼ƒ durum (_HazirlikBosDurum) ------------------------- */ .hku-bos-durum { display: flex; align-items: flex-start; gap: .9rem; flex-wrap: wrap; background: var(--hku-card); border: 1px solid var(--hku-card-border); border-left: 4px solid var(--hku-warn); border-radius: var(--hku-radius-lg); padding: 1rem 1.15rem; box-shadow: var(--hku-shadow-md); margin: 1rem 0; } .hku-bos-ikon { color: var(--hku-warn); font-size: 1.2rem; line-height: 1.4; flex-shrink: 0; } .hku-bos-govde { flex: 1 1 260px; min-width: 0; } .hku-bos-baslik { margin: 0 0 .25rem; font-weight: 600; color: var(--hku-text); } .hku-bos-neden { margin: 0; font-size: .88rem; color: var(--hku-text-muted); } .hku-bos-neden strong { color: var(--hku-text); } .hku-bos-eylem { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } @media (max-width: 768px) { .hku-bos-eylem { width: 100%; } .hku-bos-eylem > a { flex: 1 1 auto; justify-content: center; } } /* --- Ana sayfa / haz─▒rl─▒k: yakla┼ƒan son tarih sat─▒r─▒ ---------------------- */ .hku-sontarih-liste { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0 0; } .hku-sontarih { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .86rem; color: var(--hku-text); } .hku-sontarih .etiket { font-size: .72rem; font-weight: 600; padding: .05rem .4rem; border-radius: 999px; background: var(--hku-warn-muted); color: var(--hku-warn); } .hku-sontarih.gecti .etiket { background: var(--hku-danger-muted); color: var(--hku-danger); } /* Kaynak etiketi: ayni listede Takvim kaydi ile Akreditasyon kaydi karistirilmasin. */ .hku-sontarih .kaynak { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; padding: .05rem .4rem; border-radius: 999px; background: var(--hku-primary-tint); color: var(--hku-primary); } /* --- ├ûnko┼ƒula ba─ƒl─▒ bo┼ƒ durum (_HazirlikBosDurum) ------------------------- */ .hku-bos-durum { display: flex; align-items: flex-start; gap: .9rem; flex-wrap: wrap; background: var(--hku-card); border: 1px solid var(--hku-card-border); border-left: 4px solid var(--hku-warn); border-radius: var(--hku-radius-lg); padding: 1rem 1.15rem; box-shadow: var(--hku-shadow-md); margin: 1rem 0; } .hku-bos-ikon { color: var(--hku-warn); font-size: 1.2rem; line-height: 1.4; flex-shrink: 0; } .hku-bos-govde { flex: 1 1 260px; min-width: 0; } .hku-bos-baslik { margin: 0 0 .25rem; font-weight: 600; color: var(--hku-text); } .hku-bos-neden { margin: 0; font-size: .88rem; color: var(--hku-text-muted); } .hku-bos-neden strong { color: var(--hku-text); } .hku-bos-eylem { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } @media (max-width: 768px) { .hku-bos-eylem { width: 100%; } .hku-bos-eylem > a { flex: 1 1 auto; justify-content: center; } } /* Dosya yükleme uyarısı — eylemin yanında, sakin ama görünür. */ .hku-upload-not { margin: 0 0 .5rem; font-size: .82rem; color: var(--hku-warn); background: var(--hku-warn-muted); border-radius: var(--hku-radius-sm); padding: .4rem .6rem; } /* ============================================================================= PANEL OTURTMA — 2026-09-18 ----------------------------------------------------------------------------- Kullanici: "content biraz daha modern yap, paneller cizgiler, tam oturt." OLCULDU (canli /Dokuman/Liste, tarayici): 1) KUTU ICINDE KUTU: .hku-filter-card kartin ICINDE ama kendisi de beyaz + 1px kenarlik + 10px yaricap + golge tasiyordu. Ayni yuzey renginde ikinci bir cerceve = "cerceve kalabaligi". 2) DataTables'IN KENDI URETTIGI kontroller (sayfalama .page-link, arama .form-control-sm, sayfa boyutu .form-select-sm) ve Tom Select .ts-control bizim tokenlarimizi HIC kullanmiyordu: kenarlik #dee2e6 (Bootstrap varsayilani) ve yaricap 4px. Yani panelin cevresi HKU, ICI Bootstrap'ti — "oturmamis" hissinin asil kaynagi buydu. 3) Nötr kenarlik rengi sayfada 4 farkli tondu (#dce2ea, #d4dbe4, #eef1f5, #dee2e6); yaricap 4 farkli degerdi (10/6/4/0). NOT: dikey ritim (14px bosluklar) ve filtre kartinin konumu OLCULDU ve SAGLAMDI; onlara DOKUNULMADI. Renk paleti de degismedi (Batch 62 hku-auth hizalamasi). ============================================================================= */ /* 1) Kart ICINDEKI filtre alani: ayri kutu degil, kartin UST BANDI. Tek basina duran .hku-filter-card (kart disinda) eski gorunumunu KORUR — bu yuzden secici `.hku-card-body >` ile sinirli. */ .hku-card-body > .hku-filter-card { background: var(--hku-bg-soft); border: 0; border-bottom: 1px solid var(--hku-line); border-radius: 0; box-shadow: none; /* card-body padding'ini iptal et: band kartin TAM genisliginde olsun */ margin: calc(var(--hku-card-pad) * -1) calc(var(--hku-card-pad) * -1) var(--hku-card-pad); padding: .75rem var(--hku-card-pad); } /* 2) Ucuncu taraf (DataTables / Tom Select) kurallari BU DOSYADA DEGIL: satici CSS'i bizden SONRA yuklendigi icin esit ozgullukte kazaniyor. Onlar wwwroot/css/hku-vendor-override.css'te ve SONUNDA yukleniyor. */ /* 3) Kalan yaricap/kenarlik sizintilari tek dile getirilir. */ .hku-surum-rozeti { border-radius: var(--hku-radius-sm); } kbd { border-radius: var(--hku-radius-sm); } /* Bootstrap `.border` yardimcisi rozetlerde #dee2e6 getiriyordu. */ .badge.border { border-color: var(--hku-line) !important; } /* KİDR: erişilemeyen kanıt bağlantısı uyarısı (kırmızı şerit). Renkler token'dan gelir; koyu temada da okunur. */ .hku-kanit-uyari { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; } .hku-kanit-uyari-ust { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .hku-kanit-uyari-ust .fa { font-size: 1.05rem; } .hku-kanit-uyari-kapsam { font-size: .86rem; opacity: .85; } .hku-kanit-uyari-govde { font-size: .9rem; line-height: 1.5; } /* ------------------------------------------------------------------ Karakter sayacı — hku-uzunluk.js (textarea, ViewModel sınırından) Sınır yazarken görünür; aşılırsa kırmızı + gönderim durur. ------------------------------------------------------------------ */ .hku-karakter-sayac { margin-top: .25rem; font-size: .75rem; color: var(--hku-text-muted); text-align: right; font-variant-numeric: tabular-nums; } .hku-karakter-sayac-asim { color: var(--hku-danger); font-weight: 600; } /* Yaklaşan son tarih satırında belge bağlantısı (Akreditasyon: "Belge" / "Belge ekle"). */ .hku-sontarih-baglanti { margin-left: auto; font-size: .8rem; font-weight: 600; white-space: nowrap; }