/* ================================================================ * SITE-14 · ORTAK POLISH KATMANI * ================================================================ * 4 panele ile eklenir. * Mevcut inline CSS'in üzerine non-destructive enhancement getirir: * - Tablo zebra, sticky header, hover * - Buton hover lift + focus halkaları (WCAG) * - Custom scrollbar * - Sticky main-nav * - Login ekranı vault grid + scanline * - prefers-reduced-motion saygısı * ================================================================ */ /* ============ MOTION TOKENS ===================================== */ :root { --tx-fast: 120ms cubic-bezier(.4,0,.2,1); --tx-base: 220ms cubic-bezier(.4,0,.2,1); --tx-slow: 320ms cubic-bezier(.4,0,.2,1); --shadow-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08); --shadow-2: 0 4px 8px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04); --shadow-3: 0 12px 24px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06); --ring: 0 0 0 3px rgba(30,58,138,.45); --ring-red: 0 0 0 3px rgba(127,29,29,.45); --ring-green:0 0 0 3px rgba(6,78,59,.45); --ring-purple:0 0 0 3px rgba(109,40,217,.45); } /* ============ GENEL · SMOOTH SCROLL + FONT RENDER =============== */ html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ============ FOCUS HALKASI (WCAG · klavye navigasyon) ========== */ :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 2px; } [data-dept="guvenlik"] :focus-visible { box-shadow: var(--ring-red); } [data-dept="idari"] :focus-visible { box-shadow: var(--ring-green); } [data-dept="medikal"] :focus-visible { box-shadow: var(--ring-purple); } /* ============ STICKY MAIN-NAV (scroll'da kalıcı) ================ */ .main-nav { position: sticky; top: 0; z-index: 30; background: rgba(15, 23, 42, 0.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-2); } .main-nav button { transition: background var(--tx-fast), color var(--tx-fast), transform var(--tx-fast); } .main-nav button:hover { transform: translateY(-1px); } /* ============ KART · DEPTH + HOVER LIFT ========================= */ .card, .feature-card, .content-panel, .info-box, .admin-card { box-shadow: var(--shadow-1); transition: box-shadow var(--tx-base), transform var(--tx-base); } .card.clickable:hover, .feature-card:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); } /* ============ BUTON · LIFT + INSTANT FEEDBACK =================== */ button { transition: background var(--tx-fast), color var(--tx-fast), box-shadow var(--tx-fast), transform var(--tx-fast); cursor: pointer; } button:not(:disabled):hover { box-shadow: var(--shadow-2); } button:not(:disabled):active { transform: translateY(1px); } /* Full-width login button — daha güçlü hover */ .full-btn { letter-spacing: 2px; transition: background var(--tx-base), box-shadow var(--tx-base), transform var(--tx-fast); } .full-btn:hover { box-shadow: 0 6px 16px rgba(30,58,138,.35); transform: translateY(-1px); } /* ============ TABLO · ZEBRA + STICKY HEADER + HOVER ============= */ .table { border-collapse: separate; border-spacing: 0; } .table thead th { position: sticky; top: 0; background: #1e293b; color: #f1f5f9; letter-spacing: 1.5px; font-size: 11px; text-transform: uppercase; padding: 10px 12px; z-index: 1; } .table tbody tr { transition: background var(--tx-fast); } .table tbody tr:nth-child(even) { background: #fafaf7; } .table tbody tr:hover { background: #eef2ff; } .table tbody td { padding: 9px 12px; vertical-align: middle; } .table tbody tr td:first-child { font-weight: 600; } /* ============ INPUT · FOCUS + HOVER ============================= */ input, select, textarea { transition: border-color var(--tx-fast), box-shadow var(--tx-fast); } input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: #94a3b8; } /* ============ ETİKET · ZARİF PILL ============================== */ .tag, .small-pill, .level-pill { transition: transform var(--tx-fast), box-shadow var(--tx-fast); } .tag:hover { transform: translateY(-1px); } /* ============ LOGIN EKRANI · VAULT ATMOSPHERE =================== */ .login-screen { position: relative; overflow: hidden; } .login-screen::before { /* Dot grid pattern — vault tactical map feel */ content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 24px 24px, 12px 12px; background-position: 0 0, 12px 12px; pointer-events: none; z-index: 0; } .login-screen::after { /* Slow scanline */ content: ""; position: absolute; left: 0; right: 0; height: 2px; top: -2px; background: linear-gradient(90deg, transparent, rgba(59,130,246,.45), transparent); box-shadow: 0 0 14px rgba(59,130,246,.55); animation: scanline 7s linear infinite; pointer-events: none; z-index: 1; } @keyframes scanline { 0% { top: -2px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } .login-card { position: relative; z-index: 2; box-shadow: 0 20px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04), 0 0 40px rgba(59,130,246,.08); } .login-card::after { /* Köşelerde subtle corner brackets */ content: ""; position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px; pointer-events: none; border: 1px solid transparent; background: linear-gradient(to right, currentColor 14px, transparent 14px) top left / 14px 1px no-repeat, linear-gradient(to bottom, currentColor 14px, transparent 14px) top left / 1px 14px no-repeat, linear-gradient(to left, currentColor 14px, transparent 14px) top right / 14px 1px no-repeat, linear-gradient(to bottom, currentColor 14px, transparent 14px) top right / 1px 14px no-repeat, linear-gradient(to right, currentColor 14px, transparent 14px) bottom left / 14px 1px no-repeat, linear-gradient(to top, currentColor 14px, transparent 14px) bottom left / 1px 14px no-repeat, linear-gradient(to left, currentColor 14px, transparent 14px) bottom right / 14px 1px no-repeat, linear-gradient(to top, currentColor 14px, transparent 14px) bottom right / 1px 14px no-repeat; color: rgba(30,58,138,.55); opacity: .7; } [data-dept="guvenlik"] .login-card::after { color: rgba(127,29,29,.55); } [data-dept="idari"] .login-card::after { color: rgba(6,78,59,.55); } [data-dept="medikal"] .login-card::after { color: rgba(109,40,217,.55); } /* Login tab buttons — daha keskin geçiş */ .login-tabs button { transition: background var(--tx-fast), color var(--tx-fast), transform var(--tx-fast); font-weight: 700; } .login-tabs button:hover { transform: translateY(-1px); } /* ============ HIYERARŞI · KARTLARA DEPTH ======================== */ .hier-node { transition: transform var(--tx-base), box-shadow var(--tx-base); } .hier-node:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } /* ============ NOTIFIKASYON · ZARIF SLIDE-IN ===================== */ .notif-panel { transition: opacity var(--tx-base), transform var(--tx-base); } .notif-item { transition: background var(--tx-fast); border-bottom: 1px solid #e2e8f0; } .notif-item:hover { background: #f1f5f9; } .notif-item.unread { border-left: 3px solid #1e3a8a; } [data-dept="guvenlik"] .notif-item.unread { border-left-color: #7f1d1d; } [data-dept="idari"] .notif-item.unread { border-left-color: #064e3b; } [data-dept="medikal"] .notif-item.unread { border-left-color: #6d28d9; } /* Bell badge — pulse on new */ .bell-badge:not(.zero) { animation: bell-pulse 1.4s ease-in-out infinite; } @keyframes bell-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220,38,38,.55); } 50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(220,38,38,0); } } /* ============ ADMIN CLOUD · POLISH ============================= */ .admin-user-card { transition: background var(--tx-fast), box-shadow var(--tx-fast); } .admin-user-card:hover { box-shadow: var(--shadow-2); } .dept-badge { box-shadow: var(--shadow-1); } /* ============ ARSIV KARTLARI · LIFT ============================ */ #archiveList > div { transition: transform var(--tx-base), box-shadow var(--tx-base); } #archiveList > div:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); } /* ============ TOP STRIP · STATUS DOT PULSE ===================== */ .top-status .dot { animation: status-pulse 2s ease-in-out infinite; } @keyframes status-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74,222,128,.55); } 50% { opacity: .65; box-shadow: 0 0 0 6px rgba(74,222,128,0); } } /* ============ CUSTOM SCROLLBAR (kalın, Foundation gri) ========== */ * { scrollbar-width: thin; scrollbar-color: #64748b transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 0; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: #475569; background-clip: padding-box; } /* ============ BOOT EKRANI · TERMINAL GLOW ====================== */ .boot-line { font-family: "Consolas", "Courier New", monospace; text-shadow: 0 0 6px currentColor; } /* ============ ERIŞIM · TOUCH TARGETS (min 44px) ================ */ @media (pointer: coarse) { button, .tag, a[onclick] { min-height: 44px; min-width: 44px; } } /* ============ REDUCED MOTION (WCAG · vestibular) ================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .login-screen::after { display: none; } .bell-badge:not(.zero), .top-status .dot { animation: none; } } /* ============ RESPONSIVE · MOBİL TOUCH POLISH =================== */ @media (max-width: 640px) { .login-card { padding: 22px 18px; } .full-btn { padding: 14px 0; font-size: 14px; } .main-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; } .main-nav button { white-space: nowrap; } .table { font-size: 12px; } .admin-user-card { flex-direction: column; align-items: stretch; } .admin-user-card .user-actions { justify-content: flex-start; } } /* ============ PRINT (Foundation document mode) ================== */ @media print { .main-nav, .top-strip, .notif-panel, button { display: none !important; } .content-panel, .card { box-shadow: none; border: 1px solid #000; } }