/* Personel Takip — panel stili Renkler Higgsfield mockup'larından ve Modül 1 demosundan geliyor: bakır vurgu, teal olumlu, amber uyarı, kiremit hata. */ :root { /* Tarayıcının kendi bileşenleri de temayı izlesin: tarih seçici takvimi, kaydırma çubuğu, otomatik doldurma rengi. */ color-scheme: light; --bakir:#c8794a; --bakir-yumusak:rgba(200,121,74,.12); --teal:#2aa198; --amber:#d59b3c; --kiremit:#b0483d; --bg:#faf7f4; --kart:#ffffff; --kart2:#f3efea; --yazi:#211d1a; --soluk:#6d635b; --kenar:#e3dcd3; --yan:#ffffff; } /* Tema üç durumlu: sistem · açık · koyu. Kullanıcı seçim yaparsa yazılır ve işletim sisteminin tercihini ezer. Seçim yoksa sistem ne diyorsa o. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) { color-scheme: dark; --bg:#0e1116; --kart:#171b22; --kart2:#1e232c; --yazi:#e8e6e3; --soluk:#98918a; --kenar:#262c36; --yan:#12161b; --bakir-yumusak:rgba(200,121,74,.18); } } :root[data-tema="koyu"] { color-scheme: dark; --bg:#0e1116; --kart:#171b22; --kart2:#1e232c; --yazi:#e8e6e3; --soluk:#98918a; --kenar:#262c36; --yan:#12161b; --bakir-yumusak:rgba(200,121,74,.18); } :root[data-tema="acik"] { color-scheme: light; --bg:#faf7f4; --kart:#ffffff; --kart2:#f3efea; --yazi:#211d1a; --soluk:#6d635b; --kenar:#e3dcd3; --yan:#ffffff; --bakir-yumusak:rgba(200,121,74,.12); } /* tema düğmesi */ .tema-dugme { display:flex; align-items:center; gap:7px; width:100%; padding:7px 12px; margin-bottom:8px; font-size:12.5px; font-weight:600; border-radius:8px; border:1px solid var(--kenar); background:transparent; color:var(--soluk); cursor:pointer; transition:.14s; } .tema-dugme:hover { border-color:var(--bakir); color:var(--bakir); } .tema-dugme .sim { width:16px; height:16px; flex:none; border-radius:50%; border:1.5px solid currentColor; position:relative; overflow:hidden; } /* yarım dolu daire: tema göstergesi */ .tema-dugme .sim::after { content:''; position:absolute; inset:0; background:currentColor; clip-path:inset(0 0 0 50%); } :root[data-tema="koyu"] .tema-dugme .sim::after { clip-path:inset(0); } :root[data-tema="acik"] .tema-dugme .sim::after { clip-path:inset(0 0 0 100%); } * { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--yazi); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; } .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; } a { color:var(--bakir); } /* ---- iskelet ---- */ .duzen { display:grid; grid-template-columns:224px minmax(0,1fr); min-height:100vh; } @media (max-width:860px) { .duzen { grid-template-columns:1fr; } } .yan { background:var(--yan); border-right:1px solid var(--kenar); padding:20px 14px; display:flex; flex-direction:column; gap:22px; } .marka { display:flex; align-items:center; gap:10px; padding:0 8px; } .marka .im { width:32px; height:32px; border-radius:8px; background:var(--bakir); display:grid; place-items:center; color:#fff; font-weight:800; font-size:13px; } .marka .ad { font-size:14px; font-weight:700; letter-spacing:-.01em; } .marka .alt { font-size:10.5px; color:var(--soluk); letter-spacing:.06em; text-transform:uppercase; } nav.menu { display:flex; flex-direction:column; gap:2px; } nav.menu a { display:block; padding:9px 12px; border-radius:8px; font-size:13.8px; color:var(--yazi); text-decoration:none; font-weight:550; transition:.14s; } nav.menu a:hover { background:var(--kart2); } nav.menu a.etkin { background:var(--bakir-yumusak); color:var(--bakir); font-weight:650; } .yan .dip { margin-top:auto; font-size:12px; color:var(--soluk); padding:0 8px; } .icerik { padding:22px 26px 60px; } @media (max-width:560px) { .icerik { padding:18px 14px 40px; } } .ust { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid var(--kenar); margin-bottom:22px; } .ust h1 { font-size:20px; margin:0; letter-spacing:-.018em; } .ust .sag { margin-left:auto; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--soluk); flex-wrap:wrap; } select, input[type=text], input[type=password], input[type=time], input[type=date] { font:inherit; font-size:13.5px; padding:7px 10px; border-radius:8px; border:1px solid var(--kenar); background:var(--kart); color:var(--yazi); } select:focus-visible, input:focus-visible, button:focus-visible { outline:2px solid var(--bakir); outline-offset:1px; } /* ---- kartlar ---- */ .kpi { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px; } @media (max-width:700px) { .kpi { grid-template-columns:repeat(2,1fr); } } .kpi .kutu { background:var(--kart); border:1px solid var(--kenar); border-radius:12px; padding:14px 16px; } .kpi .s { font-size:30px; font-weight:700; letter-spacing:-.03em; line-height:1.15; } .kpi .e { font-size:10.5px; color:var(--soluk); text-transform:uppercase; letter-spacing:.08em; font-weight:650; } .kpi .kutu.gec .s { color:var(--amber); } .kpi .kutu.eksik .s { color:var(--kiremit); } .kpi .kutu.giris .s { color:var(--teal); } .pano { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; } @media (max-width:980px) { .pano { grid-template-columns:1fr; } } .kart { background:var(--kart); border:1px solid var(--kenar); border-radius:12px; padding:16px 18px 8px; } .kart > h2 { font-size:15px; margin:0 0 2px; letter-spacing:-.012em; } .kart > .not { font-size:12.3px; color:var(--soluk); margin:0 0 14px; } .kart.genis { grid-column:1 / -1; } /* ---- satırlar ---- */ .satir { display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--kenar); } .satir:last-child { border-bottom:0; } .satir .mon { width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:11px; font-weight:700; background:var(--kart2); color:var(--soluk); } .satir .ad { font-size:13.6px; font-weight:600; } .satir .sub { font-size:11.5px; color:var(--soluk); } .satir .sa { margin-left:auto; font-size:13px; color:var(--soluk); } .rz { font-size:10px; font-weight:800; letter-spacing:.07em; padding:3px 9px; border-radius:999px; min-width:70px; text-align:center; white-space:nowrap; } .rz.giris { background:rgba(42,161,152,.15); color:var(--teal); } .rz.cikis { background:var(--kart2); color:var(--soluk); } .rz.ara { background:rgba(213,155,60,.17); color:var(--amber); } .rz.tanimsiz { background:rgba(176,72,61,.15); color:var(--kiremit); } .rz.eksik { background:rgba(176,72,61,.15); color:var(--kiremit); } /* Canlı tazelemede yeni düşen satır ve değişen sayaç */ .satir.yeni { animation:satirGir .45s cubic-bezier(.2,.7,.3,1) both; } @keyframes satirGir { from { opacity:0; transform:translateY(-6px); background:var(--bakir-yumusak); } to { opacity:1; transform:none; background:transparent; } } .kpi .s.degisti { animation:sayacVur .6s ease both; } @keyframes sayacVur { 0% { transform:scale(1) } 30% { transform:scale(1.14) } 100% { transform:scale(1) } } @media (prefers-reduced-motion:reduce) { .satir.yeni, .kpi .s.degisti { animation:none; } } .rz.cevrimici { background:rgba(42,161,152,.15); color:var(--teal); } .rz.cevrimdisi { background:rgba(176,72,61,.15); color:var(--kiremit); } .etiket-gec { font-size:10px; font-weight:800; color:var(--amber); border:1px solid var(--amber); border-radius:4px; padding:1px 5px; margin-left:7px; letter-spacing:.06em; } /* ---- tablo ---- */ .kaydir { overflow-x:auto; } table { width:100%; border-collapse:collapse; font-size:13.4px; } th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--kenar); } th { font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--soluk); font-weight:650; } tbody tr:last-child td { border-bottom:0; } /* ---- düğmeler ---- */ button, .dugme { font:inherit; font-size:13.3px; font-weight:600; cursor:pointer; padding:7px 14px; border-radius:8px; border:1px solid var(--kenar); background:var(--kart2); color:var(--yazi); text-decoration:none; display:inline-block; transition:.14s; } button:hover, .dugme:hover { border-color:var(--bakir); color:var(--bakir); } button.ana, .dugme.ana { background:var(--bakir); border-color:var(--bakir); color:#fff; } button.ana:hover, .dugme.ana:hover { filter:brightness(1.08); color:#fff; } button.kucuk { padding:4px 10px; font-size:12.2px; } .bos { text-align:center; color:var(--soluk); font-size:13px; padding:26px 0 30px; } .uyari-kutu { background:var(--bakir-yumusak); border:1px solid var(--bakir); border-radius:10px; padding:12px 14px; font-size:13.2px; margin-bottom:18px; } .hata-kutu { background:rgba(176,72,61,.1); border:1px solid var(--kiremit); border-radius:10px; padding:12px 14px; font-size:13.2px; margin-bottom:18px; } .ok-kutu { background:rgba(42,161,152,.1); border:1px solid var(--teal); border-radius:10px; padding:12px 14px; font-size:13.2px; margin-bottom:18px; } /* ---- giriş ekranı: solda form, sağda kurumsal görsel ---- */ .giris-sar { min-height:100vh; display:grid; grid-template-columns:minmax(0,460px) minmax(0,1fr); background:var(--kart); } .giris-sol { display:flex; flex-direction:column; justify-content:center; padding:48px 52px; gap:0; } @media (max-width:1080px) { .giris-sol { padding:40px 34px; } } .giris-marka { display:flex; align-items:center; gap:11px; margin-bottom:38px; } .giris-marka .im { width:38px; height:38px; border-radius:10px; background:var(--bakir); display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px; letter-spacing:.02em; } .giris-marka .ad { font-size:15px; font-weight:700; letter-spacing:-.012em; line-height:1.25; } .giris-marka .alt { font-size:10.5px; color:var(--soluk); letter-spacing:.1em; text-transform:uppercase; font-weight:650; } .giris-kutu { width:100%; max-width:352px; } .giris-kutu h1 { font-size:26px; margin:0 0 6px; letter-spacing:-.024em; line-height:1.2; } .giris-kutu > p { font-size:13.5px; color:var(--soluk); margin:0 0 26px; max-width:34ch; } .giris-kutu .alan input { padding:10px 12px; font-size:14px; } .giris-kutu button { padding:11px 16px; font-size:14px; margin-top:6px; } .giris-dip { margin-top:34px; font-size:11.5px; color:var(--soluk); line-height:1.6; } /* sağdaki görsel */ .giris-gorsel { position:relative; overflow:hidden; background:#0b1220; background-image:url('gorsel/giris.jpg'); /* Kadraj: ELVAN tabelası ve aydınlatmalı cephe görünsün, sol kenardan kesilmesin */ background-size:cover; background-position:58% 58%; } .giris-gorsel::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, rgba(8,12,20,.72) 0%, rgba(8,12,20,.18) 34%, rgba(8,12,20,0) 60%), linear-gradient(0deg, rgba(6,10,17,.86) 0%, rgba(6,10,17,.22) 42%, rgba(6,10,17,0) 72%); } .giris-yazi { position:absolute; left:44px; right:44px; bottom:42px; z-index:1; color:#fff; max-width:46ch; } .giris-yazi .rozet { display:inline-block; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:#f0c3a5; border:1px solid rgba(240,195,165,.5); border-radius:999px; padding:4px 11px; margin-bottom:14px; background:rgba(10,14,22,.4); } .giris-yazi h2 { font-size:clamp(20px,2.1vw,27px); margin:0 0 8px; font-weight:650; letter-spacing:-.02em; line-height:1.28; text-wrap:balance; } .giris-yazi p { margin:0; font-size:13.5px; color:rgba(255,255,255,.74); line-height:1.6; } @media (max-width:900px) { .giris-sar { grid-template-columns:1fr; grid-template-rows:190px minmax(0,1fr); } .giris-gorsel { order:-1; background-position:center 58%; } .giris-yazi { left:26px; right:26px; bottom:20px; } .giris-yazi h2 { font-size:19px; } .giris-yazi p { display:none; } .giris-sol { padding:34px 26px 44px; justify-content:flex-start; } .giris-marka { margin-bottom:26px; } } .alan { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; } .alan label { font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--soluk); font-weight:650; } .alan input { width:100%; }