/* ============================================================ Elo — Design System Analytica House · kurum içi sınav / değerlendirme platformu ------------------------------------------------------------ Yön: modern-SaaS, sakin ve güven veren. Serin nötr yüzeyler, olgun lacivert-mürekkep aksan, temiz serif başlık + grotesk gövde. Saf CSS custom property + component sınıfları. Django SSR uyumlu. ============================================================ */ /* ---- Fonts (base.html içinde de yüklenebilir) -------- @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); --------------------------------------------------------------- */ /* ============================================================ 1. TOKENS ============================================================ */ :root{ /* — Neutral / surface — */ --bg: #F6F7F9; /* uygulama arka planı */ --bg-sunken: #EEF0F4; /* daha derin bölge (tablo başlığı vb.) */ --surface: #FFFFFF; /* kart / panel */ --surface-2: #F7F8FA; /* kart içi ikincil dolgu */ --surface-3: #F1F3F6; /* input dolgu / hover */ /* — Text — */ --text: #12151C; /* birincil metin */ --text-muted: #566072; /* ikincil metin, ipuçları */ --text-faint: #8891A0; /* dekoratif, placeholder */ --text-on-accent:#FFFFFF; /* — Borders — */ --border: #E4E7EC; --border-strong: #D2D7E0; --border-input: #C7CDD8; /* — Accent: olgun lacivert-mürekkep — */ --accent: #1D2B52; /* birincil (buton, marka) */ --accent-hover: #16223F; --accent-active: #0F1830; --accent-soft: #33456F; /* daha açık lacivert (ikincil vurgu) */ --accent-wash: #ECEFF6; /* çok açık lacivert dolgu */ --accent-text: #1B2A4A; /* wash üzerinde okunur lacivert */ /* — Info / aktif-canlı (ayrı, taze mavi) — */ --info: #1E6FD4; --info-wash: #E7F1FC; --info-text: #175CB0; /* — Success / GEÇTİ — */ --ok: #0E7C57; --ok-wash: #E3F4EC; --ok-text: #0A5E42; /* — Warning — */ --warn: #9A6410; --warn-wash: #FBF0DA; --warn-text: #7A4F0B; /* — Danger / KALDI · GEÇERSİZ — */ --bad: #C0392E; --bad-wash: #FBE9E6; --bad-text: #A32B22; /* — Focus ring (erişilebilir) — */ --focus-ring: 0 0 0 3px rgba(30,111,212,.40); --focus-ring-danger: 0 0 0 3px rgba(192,57,46,.35); /* — Radius — */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; /* — Shadow — */ --sh-xs: 0 1px 2px rgba(16,24,40,.05); --sh-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04); --sh-md: 0 4px 12px -2px rgba(16,24,40,.10), 0 2px 6px -3px rgba(16,24,40,.07); --sh-lg: 0 16px 40px -12px rgba(16,24,40,.20), 0 4px 12px -6px rgba(16,24,40,.10); /* — Spacing (4px tabanlı) — */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; /* — Typography — */ --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --fs-2xs: .75rem; /* 12 */ --fs-xs: .8125rem; /* 13 */ --fs-sm: .875rem; /* 14 */ --fs-base:1rem; /* 16 */ --fs-lg: 1.125rem; /* 18 */ --fs-h4: 1.0625rem; /* 17 */ --fs-h3: 1.25rem; /* 20 */ --fs-h2: 1.5rem; /* 24 */ --fs-h1: 2rem; /* 32 */ --fs-display: 2.5rem;/* 40 */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal:1.5; --lh-relaxed:1.6; --w-regular: 400; --w-medium: 500; --w-semibold:600; --w-bold: 700; /* — Layout — */ --page-max: 1120px; --page-narrow: 760px; --topbar-h: 60px; } /* ============================================================ 2. RESET + BASE ============================================================ */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--font-body); font-size:var(--fs-base); line-height:var(--lh-normal); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:var(--w-semibold); line-height:var(--lh-tight); letter-spacing:-.01em; margin:0; color:var(--text); } h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} h4{font-size:var(--fs-h4)} p{margin:0 0 .75rem} a{color:var(--accent-text);text-decoration:none} a:hover{text-decoration:underline} small{font-size:var(--fs-sm)} ::selection{background:var(--accent);color:#fff} /* ============================================================ 3. LAYOUT UTILITIES ============================================================ */ .wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--sp-6)} .wrap-narrow{max-width:var(--page-narrow);margin:0 auto;padding:0 var(--sp-6)} .stack > * + *{margin-top:var(--sp-4)} .stack-6 > * + *{margin-top:var(--sp-6)} .stack-2 > * + *{margin-top:var(--sp-2)} .row{display:flex;align-items:center;gap:var(--sp-3)} .row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)} .muted{color:var(--text-muted)} .faint{color:var(--text-faint)} .mono{font-family:var(--font-mono)} .eyebrow{ font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:var(--w-medium); letter-spacing:.14em;text-transform:uppercase;color:var(--info-text); } main{padding:var(--sp-10) 0 var(--sp-20)} .page-head{ display:flex;align-items:flex-end;justify-content:space-between; gap:var(--sp-5);margin-bottom:var(--sp-8);flex-wrap:wrap; } .page-head .eyebrow{margin-bottom:var(--sp-3);display:block} .page-head p{color:var(--text-muted);margin:var(--sp-2) 0 0;max-width:56ch} /* ============================================================ 4. TOP BAR + NAVIGATION ============================================================ */ .topbar{ position:sticky;top:0;z-index:30; background:rgba(246,247,249,.85); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--border); } .topbar-in{ display:flex;align-items:center;gap:var(--sp-2); height:var(--topbar-h);max-width:var(--page-max);margin:0 auto;padding:0 var(--sp-6); } .brand{display:flex;align-items:center;gap:var(--sp-3);font-weight:var(--w-semibold); font-size:var(--fs-lg);letter-spacing:-.01em;color:var(--text)} .brand:hover{text-decoration:none} .brand .mark{ width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center; background:var(--accent);color:#fff;font-family:var(--font-display); font-size:.85rem;font-weight:var(--w-bold);letter-spacing:.02em; box-shadow:var(--sh-xs); } .nav{display:flex;align-items:center;gap:var(--sp-1);margin-left:var(--sp-5)} .nav a{ color:var(--text-muted);font-weight:var(--w-medium);font-size:var(--fs-sm); padding:7px 12px;border-radius:var(--r-sm); } .nav a:hover{color:var(--text);background:var(--surface-3);text-decoration:none} .nav a.active{color:var(--text);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)} .topbar .spacer{margin-left:auto} .whoami{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--text-muted)} .avatar{ width:30px;height:30px;border-radius:var(--r-pill);background:var(--accent); color:#fff;display:grid;place-items:center;font-weight:var(--w-semibold);font-size:var(--fs-xs); } .role-tag{ font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:var(--w-semibold); letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text); background:var(--accent-wash);padding:3px 8px;border-radius:var(--r-xs); } /* Panel alt-navigasyon */ .subnav{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--border); margin-bottom:var(--sp-8);overflow-x:auto} .subnav a{ white-space:nowrap;color:var(--text-muted);font-weight:var(--w-medium);font-size:var(--fs-sm); padding:11px 14px;border-bottom:2px solid transparent;margin-bottom:-1px; } .subnav a:hover{color:var(--text);text-decoration:none} .subnav a.active{color:var(--accent-text);border-bottom-color:var(--accent)} /* ============================================================ 5. CARDS ============================================================ */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-sm)} .card-pad{padding:var(--sp-6)} .card-hover{transition:box-shadow .18s ease, transform .12s ease} .card-hover:hover{box-shadow:var(--sh-md);transform:translateY(-1px)} .grid{display:grid;gap:var(--sp-4)} .grid-2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))} .grid-3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .exam-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-6)} .exam-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent)} /* Description clamped to 2 lines with a per-card "show more". The 2-line slot is reserved (min-height) and the toggle keeps its space (visibility) so collapsed cards stay the same height whether or not they have a description or overflow. */ .exam-desc-wrap{display:flex;flex-direction:column} .exam-desc{margin:0;color:var(--text-muted);line-height:1.5;min-height:3em; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .exam-desc.is-open{display:block;-webkit-line-clamp:unset;overflow:visible;min-height:0} .exam-more{align-self:flex-start;margin-top:6px;padding:0;background:none;border:0;cursor:pointer; font:inherit;font-size:var(--fs-sm);font-weight:var(--w-semibold);color:var(--accent);visibility:hidden} .exam-more:hover{text-decoration:underline} .meta-row{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);font-size:var(--fs-sm);color:var(--text-muted)} .meta-row b{color:var(--text);font-weight:var(--w-semibold)} .meta-row .dot{width:3px;height:3px;border-radius:50%;background:var(--border-strong);align-self:center} /* ============================================================ 6. BUTTONS ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2); font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--w-semibold); line-height:1;padding:11px 18px;border-radius:var(--r-sm);border:1px solid transparent; cursor:pointer;text-decoration:none;white-space:nowrap; transition:background .15s ease, box-shadow .15s ease, transform .06s ease, border-color .15s ease; } .btn:hover{text-decoration:none} .btn:active{transform:translateY(1px)} .btn:focus-visible{outline:none;box-shadow:var(--focus-ring)} .btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;transform:none} .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-hover)} .btn-primary:active{background:var(--accent-active)} .btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border-strong)} .btn-ghost:hover{background:var(--surface-3);border-color:var(--border-input)} .btn-ink{background:var(--text);color:var(--bg)} .btn-ink:hover{background:#000} .btn-danger{background:var(--bad);color:#fff} .btn-danger:hover{background:#a32b22} .btn-danger:focus-visible{box-shadow:var(--focus-ring-danger)} .btn-quiet{background:transparent;color:var(--text-muted);border-color:transparent} .btn-quiet:hover{background:var(--surface-3);color:var(--text)} .btn-lg{font-size:var(--fs-base);padding:14px 24px;border-radius:var(--r-md)} .btn-sm{font-size:var(--fs-xs);padding:7px 12px;border-radius:var(--r-xs)} .btn-block{width:100%} /* ============================================================ 7. BADGES / STATUS ============================================================ */ .badge{ display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body); font-size:var(--fs-2xs);font-weight:var(--w-semibold);letter-spacing:.02em; padding:4px 10px;border-radius:var(--r-pill);text-transform:uppercase;line-height:1.4; } .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .badge-ok {color:var(--ok-text); background:var(--ok-wash)} .badge-bad {color:var(--bad-text); background:var(--bad-wash)} .badge-warn {color:var(--warn-text); background:var(--warn-wash)} .badge-info {color:var(--info-text); background:var(--info-wash)} .badge-neutral{color:var(--text-muted);background:var(--surface-3)} .badge-live {color:var(--info-text); background:var(--info-wash)} .badge-live::before{animation:ah-pulse 1.6s ease-in-out infinite} @keyframes ah-pulse{0%,100%{opacity:1}50%{opacity:.25}} .badge-plain{border-radius:var(--r-xs);text-transform:none;letter-spacing:0;font-weight:var(--w-medium)} .badge-plain::before{display:none} /* ============================================================ 8. CALLOUT / ALERT ============================================================ */ .callout{ display:flex;gap:var(--sp-3);border:1px solid var(--border-strong); background:var(--surface-2);border-radius:var(--r-sm);padding:14px 16px; font-size:var(--fs-sm);color:var(--text-muted); } .callout .ic{flex:none;font-family:var(--font-mono);font-weight:var(--w-bold)} .callout b{color:var(--text)} .callout-warn {border-color:#EAD8A6;background:var(--warn-wash);color:var(--warn-text)} .callout-warn b{color:var(--warn-text)} .callout-danger{border-color:#EEC3BD;background:var(--bad-wash);color:var(--bad-text)} .callout-danger b{color:var(--bad-text)} .callout-info {border-color:#BFD9F5;background:var(--info-wash);color:var(--info-text)} .callout-info b{color:var(--info-text)} /* ============================================================ 9. STATS ============================================================ */ .stats{ display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px; background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden; } .stat{background:var(--surface);padding:18px 20px} .stat .num{font-family:var(--font-display);font-size:2rem;font-weight:var(--w-semibold); line-height:1;letter-spacing:-.02em} .stat .lbl{font-size:var(--fs-xs);color:var(--text-muted);margin-top:8px;letter-spacing:.01em} .stat .num.ok{color:var(--ok)} .stat .num.bad{color:var(--bad)} .stat .num.accent{color:var(--accent)} .stat .num.info{color:var(--info)} .stat .delta{font-family:var(--font-mono);font-size:var(--fs-2xs);margin-top:6px;color:var(--text-faint)} /* ============================================================ 10. TABLES ============================================================ */ .table-wrap{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)} .table-scroll{overflow-x:auto} table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:560px} .tbl thead th{ text-align:left;font-weight:var(--w-semibold);font-size:var(--fs-2xs);letter-spacing:.06em; text-transform:uppercase;color:var(--text-faint);padding:12px 16px; border-bottom:1px solid var(--border);background:var(--bg-sunken);white-space:nowrap; } .tbl tbody td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:middle} .tbl tbody tr:last-child td{border-bottom:0} .tbl tbody tr:hover{background:var(--surface-2)} .tbl .num-cell{font-family:var(--font-mono);font-size:var(--fs-xs);font-variant-numeric:tabular-nums} .tbl a{font-weight:var(--w-semibold)} .tbl .strong{color:var(--text);font-weight:var(--w-semibold)} /* ============================================================ 11. FORMS ============================================================ */ .field{margin-bottom:var(--sp-4)} .field > label,.form-label{display:block;font-size:var(--fs-sm);font-weight:var(--w-semibold); color:var(--text);margin-bottom:6px} .field .hint,.form-hint{font-size:var(--fs-xs);color:var(--text-muted);margin-top:6px} .field .err,.form-err{font-size:var(--fs-xs);color:var(--bad-text);margin-top:6px} input[type=text],input[type=email],input[type=password],input[type=number], input[type=datetime-local],input[type=search],textarea,select,.input{ width:100%;font-family:var(--font-body);font-size:var(--fs-sm);color:var(--text); background:var(--surface);border:1px solid var(--border-input);border-radius:var(--r-sm); padding:10px 12px;transition:border-color .15s, box-shadow .15s; } input::placeholder,textarea::placeholder{color:var(--text-faint)} input:hover,textarea:hover,select:hover{border-color:var(--border-strong)} input:focus,textarea:focus,select:focus,.input:focus{ outline:none;border-color:var(--info);box-shadow:var(--focus-ring); } textarea{resize:vertical;min-height:80px;line-height:var(--lh-normal)} select{appearance:none;-webkit-appearance:none;padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23566072' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center} .input-error{border-color:var(--bad)!important} .input-error:focus{box-shadow:var(--focus-ring-danger)!important} /* compact settings row: number+unit fields and date pickers sit inline, sized to content and left-aligned, instead of each stretching a full-width column */ .field-row{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-5);align-items:flex-end;margin-bottom:var(--sp-4)} .field-row .field{margin-bottom:0} .field-row .field-date{width:220px} .input-unit{display:inline-flex;align-items:stretch;border-radius:var(--r-sm)} .input-unit input{width:88px;border-radius:var(--r-sm) 0 0 var(--r-sm)} .input-unit input:focus{box-shadow:none} .input-unit .unit{display:flex;align-items:center;padding:0 12px;white-space:nowrap; font-size:var(--fs-sm);color:var(--text-muted);background:var(--surface-3); border:1px solid var(--border-input);border-left:0;border-radius:0 var(--r-sm) var(--r-sm) 0} .input-unit:focus-within{box-shadow:var(--focus-ring)} .input-unit:focus-within input,.input-unit:focus-within .unit{border-color:var(--info)} .check{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);cursor:pointer} .check input[type=checkbox],.check input[type=radio]{ width:18px;height:18px;accent-color:var(--accent);flex:none;cursor:pointer; } .check input:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)} .switch-field{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4); padding:12px 0;border-bottom:1px solid var(--border)} /* ============================================================ 12. MESSAGES / TOAST ============================================================ */ .msg{display:flex;gap:var(--sp-3);align-items:flex-start;padding:11px 15px;border-radius:var(--r-sm); font-size:var(--fs-sm);margin-bottom:10px;border:1px solid} .msg .ic{flex:none;font-family:var(--font-mono);font-weight:var(--w-bold)} .msg-ok {background:var(--ok-wash); border-color:#B9E0CB;color:var(--ok-text)} .msg-err{background:var(--bad-wash);border-color:#EEC3BD;color:var(--bad-text)} .msg-info{background:var(--info-wash);border-color:#BFD9F5;color:var(--info-text)} /* ============================================================ 13. EMPTY STATE ============================================================ */ .empty{text-align:center;padding:56px 24px;color:var(--text-muted)} .empty .em-mark{ width:52px;height:52px;margin:0 auto 14px;border-radius:var(--r-md); display:grid;place-items:center;background:var(--surface-3);color:var(--text-faint); font-family:var(--font-display);font-size:1.6rem; } .empty p{margin:0 0 4px;color:var(--text);font-weight:var(--w-medium)} /* ============================================================ 14. FOOTER ============================================================ */ .foot{margin-top:var(--sp-16);padding-top:var(--sp-5);border-top:1px solid var(--border); font-size:var(--fs-xs);color:var(--text-faint);display:flex;justify-content:space-between; gap:var(--sp-3);flex-wrap:wrap} /* ============================================================ 15. EXAM — FOCUS MODE Sınav çözme ekranı: sakin, geniş, yüksek okunabilirlik. ============================================================ */ .exam-top{position:sticky;top:0;z-index:5;background:rgba(246,247,249,.92); backdrop-filter:blur(10px);border-bottom:1px solid var(--border)} .exam-top-in{max-width:var(--page-narrow);margin:0 auto;padding:16px var(--sp-6); display:flex;align-items:center;gap:var(--sp-4)} .exam-top .title{font-family:var(--font-display);font-weight:var(--w-semibold);font-size:var(--fs-lg)} .exam-counter{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted); letter-spacing:.04em} .exam-timer{margin-left:auto;font-family:var(--font-mono);font-weight:var(--w-semibold); font-size:1.2rem;padding:7px 14px;border-radius:var(--r-sm);background:var(--surface); border:1px solid var(--border-strong);min-width:82px;text-align:center; font-variant-numeric:tabular-nums} .exam-timer.warn{color:#fff;background:var(--bad);border-color:var(--bad);animation:ah-pulse 1s ease-in-out infinite} .exam-progress{height:4px;background:var(--bg-sunken)} .exam-progress > i{display:block;height:100%;background:var(--accent); transition:width .3s cubic-bezier(.2,.7,.2,1)} .exam-body{max-width:var(--page-narrow);margin:0 auto;padding:var(--sp-12) var(--sp-6) 140px} .exam-qnum{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em; text-transform:uppercase;color:var(--info-text);margin-bottom:14px} .exam-qtext{font-family:var(--font-display);font-size:1.6rem;font-weight:var(--w-semibold); line-height:1.25;letter-spacing:-.01em;margin:0 0 var(--sp-8);text-wrap:pretty} .opt{ display:flex;align-items:center;gap:14px;padding:16px 18px;min-height:56px; border:1px solid var(--border-strong);border-radius:var(--r-md);margin:10px 0; cursor:pointer;background:var(--surface);font-size:var(--fs-base); transition:border-color .12s, background .12s, box-shadow .12s; } .opt .key{flex:none;width:26px;height:26px;border-radius:var(--r-xs);display:grid;place-items:center; font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--w-semibold); color:var(--text-muted);background:var(--surface-3);border:1px solid var(--border)} .opt .dot{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--border-input); transition:.12s;margin-left:auto} .opt:hover{border-color:var(--accent-soft);background:var(--surface-2)} .opt.is-sel{border-color:var(--accent);background:var(--accent-wash);box-shadow:0 0 0 1px var(--accent)} .opt.is-sel .key{background:var(--accent);color:#fff;border-color:var(--accent)} .opt.is-sel .dot{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 42%,transparent 48%)} .opt:focus-visible{outline:none;box-shadow:var(--focus-ring)} .exam-foot{position:fixed;bottom:0;left:0;right:0;background:rgba(246,247,249,.94); backdrop-filter:blur(10px);border-top:1px solid var(--border)} .exam-foot-in{max-width:var(--page-narrow);margin:0 auto;padding:14px var(--sp-6); display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)} /* GEÇERSİZ overlay */ .exam-overlay{position:fixed;inset:0;background:rgba(15,18,26,.97);color:#fff; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; padding:24px;z-index:50} .exam-overlay .big{font-family:var(--font-display);font-size:clamp(2.5rem,8vw,4.5rem); font-weight:var(--w-bold);letter-spacing:.02em;color:#FF6B5E;line-height:1} .exam-overlay p{max-width:44ch;font-size:var(--fs-lg);line-height:var(--lh-relaxed); color:rgba(255,255,255,.82);margin-top:var(--sp-5)} /* ============================================================ 16. MISC UTILITIES ============================================================ */ .divider{height:1px;background:var(--border);border:0;margin:var(--sp-6) 0} .hr-label{display:flex;align-items:center;gap:var(--sp-4);color:var(--text-faint); font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em} .hr-label::before,.hr-label::after{content:"";flex:1;height:1px;background:var(--border)} .tag-input{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px; background:var(--surface-3);border-radius:var(--r-pill);font-size:var(--fs-xs)} .progress-linear{height:8px;border-radius:var(--r-pill);background:var(--bg-sunken);overflow:hidden} .progress-linear > i{display:block;height:100%;background:var(--accent);border-radius:inherit} .kbd{font-family:var(--font-mono);font-size:var(--fs-2xs);padding:2px 6px;border-radius:var(--r-xs); background:var(--surface-3);border:1px solid var(--border);box-shadow:0 1px 0 var(--border-strong)} /* ============================================================ 17. MOTION / A11Y ============================================================ */ @media (prefers-reduced-motion:no-preference){ .reveal{animation:ah-rise .5s cubic-bezier(.2,.7,.2,1) both} .reveal:nth-child(2){animation-delay:.04s} .reveal:nth-child(3){animation-delay:.08s} .reveal:nth-child(4){animation-delay:.12s} .reveal:nth-child(5){animation-delay:.16s} @keyframes ah-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} } /* ============================================================ 18. RESPONSIVE ============================================================ */ @media (max-width:640px){ :root{--fs-h1:1.6rem;--fs-display:2rem} .form-row{grid-template-columns:1fr} .nav{margin-left:var(--sp-2)} .whoami span:first-child{display:none} main{padding:var(--sp-8) 0 var(--sp-16)} .exam-qtext{font-size:1.35rem} } /* ============================================================ 19. DATE & TIME PICKER (.dtp) Vanilla-JS uyumlu takvim + saat/dakika popover. Kullanım: .dtp > (.dtp-input trigger) + (.dtp-pop popover) JS ile .is-open / .sel / .today / .out sınıflarını yönetin. ============================================================ */ .dtp{position:relative;display:inline-block;width:100%;max-width:280px} .dtp-input{ display:flex;align-items:center;gap:10px;width:100%;cursor:pointer; font-family:var(--font-body);font-size:var(--fs-sm);color:var(--text); background:var(--surface);border:1px solid var(--border-input);border-radius:var(--r-sm); padding:10px 12px;transition:border-color .15s,box-shadow .15s; } .dtp-input:hover{border-color:var(--border-strong)} .dtp-input.is-open,.dtp-input:focus-visible{outline:none;border-color:var(--info);box-shadow:var(--focus-ring)} .dtp-input .cal{flex:none;color:var(--text-muted)} .dtp-input .val{flex:1;text-align:left;font-variant-numeric:tabular-nums} .dtp-input .val.placeholder{color:var(--text-faint)} .dtp-input .val b{font-family:var(--font-mono);font-weight:var(--w-semibold);color:var(--accent-text)} .dtp-pop{ position:absolute;z-index:40;top:calc(100% + 8px);left:0;width:300px; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md); box-shadow:var(--sh-lg);padding:14px; } .dtp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px} .dtp-title{font-family:var(--font-display);font-weight:var(--w-semibold);font-size:var(--fs-base)} .dtp-nav{ width:32px;height:32px;flex:none;border:0;border-radius:var(--r-sm);cursor:pointer; background:transparent;color:var(--text-muted);display:grid;place-items:center;font-size:1rem; transition:background .12s,color .12s; } .dtp-nav:hover{background:var(--surface-3);color:var(--text)} .dtp-nav:focus-visible{outline:none;box-shadow:var(--focus-ring)} .dtp-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px} .dtp-week span{text-align:center;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em; text-transform:uppercase;color:var(--text-faint);padding:4px 0} .dtp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .dtp-day{ height:34px;border:1px solid transparent;border-radius:var(--r-sm);background:transparent; display:grid;place-items:center;font-size:var(--fs-sm);color:var(--text);cursor:pointer; font-variant-numeric:tabular-nums;transition:background .1s,color .1s; } .dtp-day:hover{background:var(--surface-3)} .dtp-day:focus-visible{outline:none;box-shadow:var(--focus-ring)} .dtp-day.out{color:var(--text-faint)} .dtp-day.today{border-color:var(--border-strong);font-weight:var(--w-semibold)} .dtp-day.sel{background:var(--accent);color:#fff;font-weight:var(--w-semibold);border-color:var(--accent)} .dtp-day.sel:hover{background:var(--accent-hover)} .dtp-day.disabled{color:var(--text-faint);opacity:.4;cursor:not-allowed} .dtp-time{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)} .dtp-time .lbl{font-size:var(--fs-sm);font-weight:var(--w-semibold);color:var(--text)} .dtp-clock{display:flex;align-items:center;gap:6px;margin-left:auto} .dtp-col{display:flex;flex-direction:column;align-items:center;background:var(--surface-3); border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden} .dtp-col .step{width:40px;height:22px;border:0;background:transparent;cursor:pointer;color:var(--text-muted); display:grid;place-items:center;font-size:.7rem;transition:background .1s,color .1s} .dtp-col .step:hover{background:var(--surface);color:var(--accent-text)} .dtp-col .step:focus-visible{outline:none;box-shadow:var(--focus-ring)} .dtp-col .v{font-family:var(--font-mono);font-weight:var(--w-semibold);font-size:1.05rem; padding:1px 0;color:var(--text);font-variant-numeric:tabular-nums} .dtp-sep{font-family:var(--font-mono);font-weight:var(--w-bold);color:var(--text-muted)} .dtp-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} .dtp-chip{font-family:var(--font-mono);font-size:var(--fs-2xs);padding:5px 9px;border-radius:var(--r-pill); border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;transition:.1s} .dtp-chip:hover{border-color:var(--accent-soft);color:var(--accent-text);background:var(--accent-wash)} .dtp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px; padding-top:12px;border-top:1px solid var(--border)} /* compact time control (yatay ± stepper) — büyük stacked col yerine */ .dtp-hm{display:inline-flex;align-items:center;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-sm);height:32px;overflow:hidden} .dtp-hm .step{width:24px;height:30px;border:0;background:transparent;color:var(--text-muted);cursor:pointer;font-size:.72rem} .dtp-hm .step:hover{background:var(--surface);color:var(--accent-text)} .dtp-hm .step:focus-visible{outline:none;box-shadow:inset var(--focus-ring)} .dtp-hm .v{min-width:26px;text-align:center;font-family:var(--font-mono);font-weight:var(--w-semibold);font-size:.95rem;font-variant-numeric:tabular-nums} .dtp-hmsep{font-family:var(--font-mono);font-weight:var(--w-bold);color:var(--text-muted);margin:0 5px} /* ============================================================ 20. MODAL / DIALOG (onay + genel) ============================================================ */ .ovl{position:fixed;inset:0;background:rgba(15,18,26,.5);backdrop-filter:blur(2px);display:grid;place-items:center;padding:20px;z-index:60;animation:ah-ovl .15s ease} @keyframes ah-ovl{from{opacity:0}to{opacity:1}} .modal{width:100%;max-width:460px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:24px;animation:ah-modal .18s cubic-bezier(.2,.7,.2,1)} @keyframes ah-modal{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}} .modal-ic{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;margin-bottom:14px;font-family:var(--font-mono);font-weight:var(--w-bold);font-size:1.2rem} .modal-ic.danger{background:var(--bad-wash);color:var(--bad)} .modal-ic.normal{background:var(--accent-wash);color:var(--accent)} .modal h3{font-size:1.25rem;margin-bottom:6px} .modal p{color:var(--text-muted);font-size:var(--fs-sm);margin:0} .modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px} /* ============================================================ 21. TOAST + inline banner (§12 .msg zaten var) ============================================================ */ .toast-wrap{position:fixed;top:18px;right:18px;z-index:80;display:flex;flex-direction:column;gap:10px;width:340px;max-width:calc(100vw - 36px)} .toast{display:flex;align-items:flex-start;gap:12px;background:var(--surface);border:1px solid var(--border);border-left-width:3px;border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:13px 14px;animation:ah-toast .22s cubic-bezier(.2,.7,.2,1)} @keyframes ah-toast{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}} .toast .ic{flex:none;width:22px;height:22px;border-radius:var(--r-pill);display:grid;place-items:center;font-family:var(--font-mono);font-weight:var(--w-bold);font-size:.7rem;color:#fff;margin-top:1px} .toast .body{flex:1;font-size:var(--fs-sm);color:var(--text)} .toast .x{flex:none;border:0;background:transparent;color:var(--text-faint);cursor:pointer;font-size:1.05rem;line-height:1;padding:2px} .toast .x:hover{color:var(--text)} .toast-ok{border-left-color:var(--ok)}.toast-ok .ic{background:var(--ok)} .toast-err{border-left-color:var(--bad)}.toast-err .ic{background:var(--bad)} .toast-info{border-left-color:var(--info)}.toast-info .ic{background:var(--info)} .toast-warn{border-left-color:var(--warn)}.toast-warn .ic{background:var(--warn)} /* ============================================================ 22. CUSTOM SELECT (dropdown) ============================================================ */ .sel{position:relative;display:inline-block;width:100%} .sel-trg{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;font-family:var(--font-body);font-size:var(--fs-sm);color:var(--text);background:var(--surface);border:1px solid var(--border-input);border-radius:var(--r-sm);padding:10px 12px;text-align:left} .sel-trg:hover{border-color:var(--border-strong)} .sel-trg.is-open,.sel-trg:focus-visible{outline:none;border-color:var(--info);box-shadow:var(--focus-ring)} .sel-trg .v{flex:1} .sel-trg .chev{flex:none;color:var(--text-faint);font-size:.7rem;transition:transform .15s} .sel-trg.is-open .chev{transform:rotate(180deg)} .sel-menu{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--sh-lg);padding:5px;max-height:260px;overflow:auto} .sel-opt{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:var(--r-xs);font-size:var(--fs-sm);cursor:pointer} .sel-opt:hover{background:var(--surface-3)} .sel-opt.sel{background:var(--accent-wash);color:var(--accent-text);font-weight:var(--w-semibold)} .sel-opt .tick{margin-left:auto;color:var(--accent)} /* ============================================================ 23. DROPZONE / FILE UPLOAD ============================================================ */ .dz{border:1.5px dashed var(--border-strong);border-radius:var(--r-md);background:var(--surface-2);padding:26px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s} .dz:hover,.dz.drag{border-color:var(--accent-soft);background:var(--accent-wash)} .dz .ic{width:40px;height:40px;margin:0 auto 10px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--accent)} .dz .t{font-weight:var(--w-semibold);font-size:var(--fs-sm)} .dz .t b{color:var(--accent-text)} .dz .h{font-size:var(--fs-xs);color:var(--text-muted);margin-top:3px} .dz-file{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 13px;background:var(--surface)} .dz-file .ficon{flex:none;width:34px;height:34px;border-radius:var(--r-xs);display:grid;place-items:center;background:var(--ok-wash);color:var(--ok-text);font-family:var(--font-mono);font-size:.6rem;font-weight:var(--w-bold)} .dz-file .fn{flex:1;font-size:var(--fs-sm);font-weight:var(--w-medium)} .dz-file .fn small{display:block;font-weight:400;color:var(--text-muted)} .dz-file .rm{border:0;background:transparent;color:var(--text-faint);cursor:pointer;padding:4px;font-size:1rem} .dz-file .rm:hover{color:var(--bad)} /* ============================================================ 24. SEARCH INPUT ============================================================ */ .search{position:relative;display:inline-block;width:100%;max-width:320px} .search .si{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-faint);pointer-events:none;display:grid} .search input{padding-left:34px;padding-right:32px} .search .clr{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:var(--surface-3);color:var(--text-muted);width:20px;height:20px;border-radius:var(--r-pill);cursor:pointer;display:grid;place-items:center;font-size:.72rem} .search .clr:hover{background:var(--border-strong);color:var(--text)} /* ============================================================ 25. ROW ACTION MENU (⋯) ============================================================ */ .menu{position:relative;display:inline-block} .menu-btn{width:32px;height:32px;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--text-muted);cursor:pointer;font-size:1.15rem;line-height:1} .menu-btn:hover{background:var(--surface-3);color:var(--text)} .menu-btn.is-open{background:var(--surface-3);border-color:var(--border)} .menu-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)} .menu-pop{position:absolute;z-index:40;top:calc(100% + 4px);right:0;min-width:180px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--sh-lg);padding:5px} .menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:0;background:transparent;border-radius:var(--r-xs);font-family:var(--font-body);font-size:var(--fs-sm);color:var(--text);cursor:pointer;text-align:left} .menu-item:hover{background:var(--surface-3)} .menu-item.danger{color:var(--bad-text)}.menu-item.danger:hover{background:var(--bad-wash)} .menu-sep{height:1px;background:var(--border);margin:5px 0} /* ============================================================ 26. TOOLTIP ============================================================ */ .tip{position:relative;display:inline-flex} .tip-bub{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--text);color:#fff;font-size:var(--fs-2xs);font-weight:var(--w-medium);padding:6px 9px;border-radius:var(--r-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;box-shadow:var(--sh-md);z-index:50} .tip-bub::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--text)} .tip:hover .tip-bub,.tip:focus-within .tip-bub{opacity:1;transform:translateX(-50%) translateY(0)} /* ============================================================ 27. PAGINATION ============================================================ */ .pager{display:flex;align-items:center;gap:4px} .pg{min-width:34px;height:34px;padding:0 8px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm);font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);cursor:pointer;display:grid;place-items:center} .pg:hover{border-color:var(--border-strong);color:var(--text)} .pg.active{background:var(--accent);color:#fff;border-color:var(--accent)} .pg:disabled{opacity:.4;cursor:not-allowed} .pg-gap{color:var(--text-faint);padding:0 4px} /* ============================================================ 28. SEGMENTED CONTROL + FILTER CHIPS ============================================================ */ .seg{display:inline-flex;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-sm);padding:3px;gap:2px} .seg button{border:0;background:transparent;font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--w-medium);color:var(--text-muted);padding:6px 12px;border-radius:var(--r-xs);cursor:pointer} .seg button:hover{color:var(--text)} .seg button.active{background:var(--surface);color:var(--text);font-weight:var(--w-semibold);box-shadow:var(--sh-xs)} .seg button:focus-visible{outline:none;box-shadow:var(--focus-ring)} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip-f{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:var(--w-medium);padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer} .chip-f:hover{border-color:var(--border-strong);color:var(--text)} .chip-f.active{background:var(--accent);border-color:var(--accent);color:#fff} .chip-f .cx{opacity:.7} /* ============================================================ 29. LOADING (spinner / skeleton) ============================================================ */ .spin{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ah-spin .6s linear infinite;vertical-align:-2px} .spin-lg{width:34px;height:34px;border-width:3px;color:var(--accent)} @keyframes ah-spin{to{transform:rotate(360deg)}} .skel{background:linear-gradient(90deg,var(--surface-3) 25%,var(--bg-sunken) 37%,var(--surface-3) 63%);background-size:400% 100%;animation:ah-skel 1.4s ease infinite;border-radius:var(--r-xs)} @keyframes ah-skel{0%{background-position:100% 0}100%{background-position:-100% 0}} .page-spin{display:flex;flex-direction:column;align-items:center;gap:14px;padding:44px;color:var(--text-muted);font-size:var(--fs-sm)} /* ============================================================ 30. CIRCULAR PROGRESS + COUNT BADGE ============================================================ */ .circ{position:relative;--v:82;--sz:88px;width:var(--sz);height:var(--sz);border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--v)*1%),var(--bg-sunken) 0)} .circ::before{content:"";position:absolute;width:calc(var(--sz) - 16px);height:calc(var(--sz) - 16px);border-radius:50%;background:var(--surface)} .circ .cv{position:relative;font-family:var(--font-display);font-weight:var(--w-semibold);font-size:1.15rem} .count-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--bad);color:#fff;font-family:var(--font-mono);font-size:.68rem;font-weight:var(--w-bold)} /* ============================================================ 31. BREADCRUMB ============================================================ */ .crumb{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-muted);flex-wrap:wrap} .crumb a{color:var(--text-muted)}.crumb a:hover{color:var(--text)} .crumb .sep{color:var(--text-faint)} .crumb .cur{color:var(--text);font-weight:var(--w-semibold)} /* ============================================================ 32. ACCORDION ============================================================ */ .acc{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)} .acc-item + .acc-item{border-top:1px solid var(--border)} .acc-head{display:flex;align-items:center;gap:12px;width:100%;padding:15px 16px;border:0;background:transparent;cursor:pointer;text-align:left;font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--w-semibold);color:var(--text)} .acc-head:hover{background:var(--surface-2)} .acc-head:focus-visible{outline:none;box-shadow:inset var(--focus-ring)} .acc-head .ac{margin-left:auto;color:var(--text-faint);transition:transform .18s;flex:none} .acc-item.open .acc-head .ac{transform:rotate(180deg)} .acc-body{padding:0 16px 16px;font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-relaxed)} /* ============================================================ 33. EMPTY STATE — ikonlu zengin varyant (§13 temel .empty ile uyumlu) ============================================================ */ .empty-rich{text-align:center;padding:48px 24px} .empty-rich .em-ic{width:60px;height:60px;margin:0 auto 16px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--accent-wash);color:var(--accent);border:1px solid var(--border)} .empty-rich h3{font-size:1.15rem;margin-bottom:6px} .empty-rich p{color:var(--text-muted);font-size:var(--fs-sm);max-width:42ch;margin:0 auto 18px} /* ============================================================ 34. PROJECT COMPONENTS (soru editörü + sonuç dashboard) ============================================================ */ .qtag{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--w-semibold); letter-spacing:.04em;color:var(--accent-text);background:var(--accent-wash); padding:4px 10px;border-radius:var(--r-xs)} .opt-edit{display:flex;align-items:center;gap:12px;margin-bottom:10px} .opt-edit .txt{flex:1} .opt-edit .radio{width:20px;height:20px;accent-color:var(--accent);flex:none;cursor:pointer} .opt-edit .radio:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:50%} .opt-edit .okey{flex:none;width:24px;font-family:var(--font-mono);font-size:var(--fs-xs); color:var(--text-faint);text-align:center} .filterbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px;position:relative;z-index:5} .filterbar .sp{margin-left:auto} .exam-summary{display:flex;align-items:center;justify-content:space-between;gap:20px; flex-wrap:wrap;padding:20px 24px;margin-bottom:20px}