/* Tıp Akademi — Acadezone tasarım sistemi Lacivert ana renk, altın yalnızca vurgu (CTA, canlı durum, dikkat), nötr gri yüzeyler. Yazı tipleri: Geist (başlık), Plus Jakarta Sans (gövde/arayüz), IBM Plex Mono (veri). Açık + koyu tema; WCAG 2.2 AA kontrast. */ /* ---------- yazı tipleri ---------- */ @font-face { font-family: 'Geist'; font-weight: 100 900; font-style: normal; font-display: swap; src: url(../fonts/geist-variable.woff2) format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-weight: 200 800; font-style: normal; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-weight: 200 800; font-style: normal; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-ext-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-weight: 200 800; font-style: italic; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-weight: 200 800; font-style: italic; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-ext-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'PlexMono'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'PlexMono'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'PlexMono'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'PlexMono'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'PlexMono'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'PlexMono'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- belirteçler ---------- */ :root { /* lacivert — marka ve etkileşim */ --navy-950: #0a1929; --navy-900: #1e3a5f; --navy-800: #243b53; --navy-700: #334e68; --navy-600: #486581; --navy-500: #627d98; --navy-400: #829ab1; --navy-300: #9fb3c8; --navy-200: #bcccdc; --navy-100: #d9e2ec; --navy-50: #f0f4f8; /* altın — yalnızca vurgu */ --gold-700: #8a6508; --gold-600: #b8860b; --gold-500: #d4a017; --gold-400: #fbbf24; --gold-300: #fcd34d; --gold-200: #f1de9c; --gold-100: #fdf8e7; --bg: #f5f7fa; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f5f9; --track: #eef2f6; --border: #e2e8f0; --border-soft: #eef2f6; --border-strong: #cbd5e1; --text: #0f172a; --text-2: #334155; --text-3: #64748b; --text-label: #1e293b; --link: #1e3a5f; --link-hover: #0a1929; --primary: var(--navy-900); --primary-hover: var(--navy-800); --on-primary: #ffffff; --accent: var(--gold-500); --on-accent: #0a1929; --hover: #f1f5f9; --row-hover: #f8fafc; --selected: #f0f4f8; --ok: #047857; --ok-bg: #ecfdf5; --ok-border: #a7f3d0; --ok-ink: #064e3b; --warn: #8a6508; --warn-bg: #fdf8e7; --warn-border: #f1de9c; --warn-ink: #5c4306; --bad: #b91c1c; --bad-bg: #fef2f2; --bad-border: #fecaca; --bad-ink: #7f1d1d; --info: #1e3a5f; --info-bg: #f0f4f8; --info-border: #bcccdc; --info-ink: #1e3a5f; --live: #dc2626; --online: #10b981; /* IGV uyumlu baz renkleri */ --radius-sm: 8px; --radius: 10px; --radius-card: 12px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --shadow: 0 4px 12px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05); --shadow-lg: 0 24px 48px -12px rgba(10, 25, 41, .38); --shadow-band: 0 10px 24px -12px rgba(10, 25, 41, .45); --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Geist', 'Plus Jakarta Sans', system-ui, sans-serif; --mono: 'PlexMono', ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; --font-mono: var(--mono); --fs: 15px; --topbar-h: 58px; --nav-w: 248px; color-scheme: light; } [data-theme='dark'] { --bg: #0a1929; --surface: #10243d; --surface-2: #132b47; --surface-3: #18334f; --track: #1d3a59; --border: #1f3a57; --border-soft: #1a3350; --border-strong: #2f5070; --text: #f1f5f9; --text-2: #d9e2ec; --text-3: #9fb3c8; --text-label: #e2e8f0; --link: #bcccdc; --link-hover: #ffffff; --primary: #d9e2ec; --primary-hover: #f0f4f8; --on-primary: #0a1929; --hover: #18334f; --row-hover: #132b47; --selected: #18334f; --ok: #34d399; --ok-bg: rgba(16, 185, 129, .12); --ok-border: rgba(52, 211, 153, .35); --ok-ink: #a7f3d0; --warn: #fcd34d; --warn-bg: rgba(212, 160, 23, .13); --warn-border: rgba(212, 160, 23, .42); --warn-ink: #f1de9c; --bad: #fca5a5; --bad-bg: rgba(220, 38, 38, .14); --bad-border: rgba(252, 165, 165, .35); --bad-ink: #fecaca; --info: #bcccdc; --info-bg: rgba(159, 179, 200, .1); --info-border: rgba(159, 179, 200, .3); --info-ink: #d9e2ec; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25); --shadow: 0 6px 18px rgba(0, 0, 0, .3); color-scheme: dark; } /* ---------- temel ---------- */ * { box-sizing: border-box; } html { font-size: var(--fs); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 .5em; color: var(--text); font-weight: 650; letter-spacing: -.015em; } h1 { font-size: 1.733rem; letter-spacing: -.02em; } h2 { font-size: 1.333rem; } h3 { font-size: 1.133rem; } h4 { font-size: 1rem; } p { margin: 0 0 .75em; } a { color: var(--link); } a:hover { color: var(--link-hover); } button { font-family: inherit; } :focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; } small, .small { font-size: .867rem; } .muted { color: var(--text-3); } .text-2 { color: var(--text-2); } .mono, code, kbd, pre { font-family: var(--mono); } code { background: var(--surface-3); padding: .08em .4em; border-radius: 4px; font-size: .9em; } kbd { border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; padding: 0 .35em; font-size: .78rem; background: var(--surface); color: var(--text-2); } hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; } ::selection { background: var(--gold-200); color: var(--navy-950); } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ico { flex: none; display: inline-block; vertical-align: middle; } .display { font-family: var(--font-display); } /* ---------- düğmeler ---------- */ .btn { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-border: var(--border-strong); --btn-hover: var(--hover); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); font: 600 .9rem/1 var(--font); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .05s; user-select: none; } .btn:hover { background: var(--btn-hover); color: var(--btn-fg); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; } .btn:disabled, .btn[aria-disabled='true'] { opacity: .45; cursor: not-allowed; transform: none; } .btn .ico { width: 16px; height: 16px; } .btn.primary { --btn-bg: var(--primary); --btn-fg: var(--on-primary); --btn-border: var(--primary); --btn-hover: var(--primary-hover); font-weight: 700; } .btn.accent { --btn-bg: var(--gold-500); --btn-fg: var(--on-accent); --btn-border: var(--gold-500); --btn-hover: #ddb02c; font-weight: 700; } .btn.ok { --btn-bg: var(--ok); --btn-fg: #fff; --btn-border: var(--ok); --btn-hover: #065f46; } .btn.danger { --btn-bg: var(--surface); --btn-fg: var(--bad); --btn-border: #fca5a5; --btn-hover: var(--bad-bg); font-weight: 700; } .btn.ghost { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--link); } .btn.sm { min-height: 34px; padding: 0 11px; font-size: .833rem; border-radius: var(--radius-sm); gap: 6px; } .btn.sm .ico { width: 14px; height: 14px; } .btn.lg { min-height: 44px; padding: 0 18px; font-size: .933rem; } .btn.xl { min-height: 50px; padding: 0 22px; font-size: 1rem; } .btn.icon { padding: 0; width: 40px; } .btn.sm.icon { width: 34px; } .btn.block { width: 100%; } [data-theme='dark'] .btn.ok { --btn-fg: #052e22; --btn-hover: #6ee7b7; } [data-theme='dark'] .btn.danger { --btn-border: rgba(252, 165, 165, .45); } .btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .btn-row.end { justify-content: flex-end; } .btn-row.between { justify-content: space-between; } /* ---------- form ---------- */ label { font-size: .9rem; font-weight: 600; color: var(--text-label); } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .field .hint { font-size: .833rem; color: var(--text-3); font-weight: 400; } .field .error-text { font-size: .833rem; color: var(--bad); font-weight: 600; } input[type='text'], input[type='password'], input[type='number'], input[type='search'], input[type='email'], select, textarea { font: 400 .933rem var(--font); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 8px 12px; min-height: 40px; width: 100%; transition: border-color .12s, box-shadow .12s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy-900); box-shadow: 0 0 0 4px rgba(30, 58, 95, .14); } [data-theme='dark'] input:focus, [data-theme='dark'] select:focus, [data-theme='dark'] textarea:focus { border-color: var(--navy-300); box-shadow: 0 0 0 4px rgba(159, 179, 200, .18); } input.invalid, .invalid > input { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); } input.valid { border-color: var(--ok); } input::placeholder, textarea::placeholder { color: #94a3b8; } textarea { min-height: 120px; resize: vertical; line-height: 1.5; } input[type='number'] { font-family: var(--mono); } .input-lg { min-height: 48px !important; font-size: 1rem !important; padding-left: 14px !important; } .input-unit { display: flex; align-items: stretch; } .input-unit input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-unit .unit { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface-3); color: var(--text-2); font-size: .9rem; white-space: nowrap; } .input-icon { position: relative; } .input-icon > .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); width: 18px; height: 18px; pointer-events: none; } .input-icon > input { padding-left: 42px !important; } .input-icon > .pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .input-icon > .pw-toggle:hover { background: var(--hover); } .input-icon.has-toggle > input { padding-right: 52px !important; } .check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-weight: 400; color: var(--text); } .check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--navy-900); } .switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; } .switch input { appearance: none; width: 40px; height: 22px; border-radius: 999px; background: var(--border-strong); position: relative; cursor: pointer; transition: background .15s; margin: 0; } .switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: var(--shadow-sm); } .switch input:checked { background: var(--navy-900); } .switch input:checked::after { transform: translateX(18px); } /* ---------- kart ve paneller ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); } .card-pad { padding: 18px 20px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; } .card-head h3 { margin: 0; font-size: 1.067rem; } .card-body { padding: 16px 20px; } .panel-title { font-size: .767rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; } .grid { display: grid; gap: 16px; } .grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } } /* Kapsayıcı genişliğine göre daralma (dar sütunlar için) */ .sim, .slide-body { container-type: inline-size; } @container (max-width: 1000px) { .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-width: 700px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } } .stack { display: flex; flex-direction: column; gap: 12px; } .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .row.nowrap { flex-wrap: nowrap; } .grow { flex: 1; min-width: 0; } /* ---------- rozet, çip ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: .767rem; font-weight: 600; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; } .badge .ico { width: 13px; height: 13px; } .badge.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); } .badge.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); } .badge.bad { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-border); } .badge.info { background: var(--info-bg); color: var(--info); border-color: var(--info-border); } .badge.gold { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); } .badge.navy { background: var(--navy-900); color: #fff; border-color: var(--navy-900); } .badge.live { background: var(--live); color: #fff; border-color: var(--live); font-weight: 700; letter-spacing: .06em; } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #94a3b8; flex: none; } .dot.on { background: var(--online); box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); } .dot.live { background: var(--live); animation: pulse 1.4s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); } 70% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } } .chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--info-bg); color: var(--info); font-size: .8rem; font-weight: 600; white-space: nowrap; } .chip .ico { width: 14px; height: 14px; } .chip.lined { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); height: 28px; } .pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: .767rem; font-weight: 600; white-space: nowrap; border: 1px solid var(--border); background: var(--surface-3); color: #475569; flex: none; } .pill.ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); } .pill.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); } .pill.bad { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad); } .pill.info { background: var(--info-bg); border-color: var(--info-border); color: var(--info); } .pill.muted { background: var(--surface-3); border-color: var(--border); color: #475569; } /* --text-3 açık yüzeyde 4,34:1 kalıyordu */ .pill .pdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } [data-theme='dark'] .pill { color: var(--text-2); } [data-theme='dark'] .pill.ok { color: var(--ok); } [data-theme='dark'] .pill.warn { color: var(--warn); } [data-theme='dark'] .pill.bad { color: var(--bad); } [data-theme='dark'] .pill.info { color: var(--info); } /* ---------- uyarı kutuları ---------- */ .alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); font-size: .9rem; color: var(--text); align-items: flex-start; } .alert > .ico { width: 18px; height: 18px; margin-top: 1px; } .alert.ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-ink); } .alert.ok > .ico { color: var(--ok); } .alert.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-ink); } .alert.warn > .ico { color: var(--warn); } .alert.bad { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad-ink); } .alert.bad > .ico { color: var(--bad); } .alert.info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-ink); } .alert .alert-icon { flex: none; font-weight: 700; } .alert p:last-child { margin-bottom: 0; } /* ---------- tablo ---------- */ .table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-card); } table.table { width: 100%; border-collapse: collapse; font-size: .867rem; } .table th, .table td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: middle; } .table thead th { position: sticky; top: 0; background: var(--surface-2); font-weight: 700; font-size: .8rem; color: var(--text-2); z-index: 1; border-bottom-color: var(--border); } .table tbody tr:hover { background: var(--row-hover); } .table td.num, .table th.num { text-align: right; font-family: var(--mono); } .table.compact th, .table.compact td { padding: 6px 9px; } /* arayüz veri tablosu (tasarım sistemi) */ .dtable { width: 100%; border-collapse: collapse; font-size: 13px; } .dtable thead th { text-align: left; padding: 10px 16px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #475569; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 1; } [data-theme='dark'] .dtable thead th { color: var(--text-3); } .dtable td { padding: 10px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .dtable tbody tr:last-child td { border-bottom: 0; } .dtable tbody tr:hover { background: var(--row-hover); } .dtable .num { text-align: right; font-family: var(--mono); } .dtable thead th.num { font-family: var(--font); } .dtable .strong { font-weight: 600; } .dtable .sub { display: block; font-size: 12px; color: var(--text-3); } /* ---------- sekmeler ---------- */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; } .tab { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: 40px; border: 0; background: none; font: 600 .867rem var(--font); color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .tab:hover { color: var(--text); } .tab.active { color: var(--text); border-bottom-color: var(--navy-900); } [data-theme='dark'] .tab.active { border-bottom-color: var(--gold-500); } /* ---------- ilerleme çubuğu ---------- */ .progress { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; } .progress > span { display: block; height: 100%; background: var(--navy-900); border-radius: inherit; transition: width .3s; } [data-theme='dark'] .progress > span { background: var(--navy-300); } .progress.gold > span { background: var(--gold-500); } .progress.ok > span { background: var(--online); } .bar { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; } .bar > span { display: block; height: 100%; border-radius: inherit; background: var(--navy-900); transition: width .3s; } .bar.thin { height: 4px; } [data-theme='dark'] .bar > span { background: var(--navy-300); } /* ---------- modal ve bildirim ---------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(10, 25, 41, .55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; animation: fadein .15s; } .modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: min(560px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; animation: pop .18s; border: 1px solid var(--border); } .modal.wide { width: min(900px, 100%); } .modal-head { padding: 20px 22px 8px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .modal-head h2 { margin: 0; font-size: 1.2rem; } .modal-body { padding: 8px 22px 18px; overflow: auto; } .modal-foot { padding: 14px 22px 18px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border-soft); flex-wrap: wrap; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } .toasts { position: fixed; right: 18px; top: 76px; display: flex; flex-direction: column; gap: 8px; z-index: 200; max-width: min(420px, calc(100vw - 36px)); } .toast { display: flex; align-items: flex-start; gap: 10px; background: var(--navy-950); color: #fff; padding: 12px 14px; border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: 13.5px; border: 1px solid rgba(255, 255, 255, .08); border-left: 4px solid var(--navy-300); animation: pop .2s; } .toast > .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--navy-300); } .toast.ok { border-left-color: var(--online); } .toast.ok > .ico { color: var(--online); } .toast.bad { border-left-color: #ef4444; } .toast.bad > .ico { color: #f87171; } .toast.warn { border-left-color: var(--gold-500); } .toast.warn > .ico { color: var(--gold-500); } /* ---------- adım başlığı ---------- */ .step-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; flex-wrap: wrap; } .step-kicker { font-size: .833rem; color: var(--text-3); margin-bottom: 4px; font-weight: 500; } .step-head h1 { font-size: 1.733rem; margin: 0; color: var(--text); letter-spacing: -.02em; font-weight: 700; } [data-theme='light'] .step-head h1, :root:not([data-theme='dark']) .step-head h1 { color: var(--navy-950); } .step-lead { margin: 4px 0 0; color: var(--text-2); } .objectives { margin: 0; padding-left: 1.1em; color: var(--text-2); font-size: .933rem; } /* ---------- teori slaytları ---------- */ .slide-frame { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; } .slide { padding: 30px 38px 26px; min-height: 420px; display: flex; flex-direction: column; } .slide h2 { font-size: 1.6rem; font-weight: 650; color: var(--navy-900); border-left: 4px solid var(--gold-500); padding-left: 14px; margin-bottom: 18px; letter-spacing: -.02em; } [data-theme='dark'] .slide h2 { color: var(--text); } .slide-body { font-size: 1.067rem; line-height: 1.6; color: var(--text); flex: 1; } .slide-body ul { margin: 0 0 12px; padding-left: 1.25em; } .slide-body li { margin-bottom: 8px; } .slide-body li::marker { color: var(--navy-500); } .slide-body .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; } @container (max-width: 720px) { .two-col { grid-template-columns: 1fr !important; } } .slide-body .figure svg { max-width: 100%; height: auto; } .slide-body .figure { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px; } .slide-body .figure figcaption { font-size: .833rem; color: var(--text-3); margin-top: 8px; line-height: 1.45; } .slide-body .key { background: var(--gold-100); border-left: 4px solid var(--gold-500); padding: 10px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 12px 0; color: var(--warn-ink); } [data-theme='dark'] .slide-body .key { background: rgba(212, 160, 23, .12); color: var(--gold-200); } .slide-body table { border-collapse: collapse; width: 100%; font-size: .933em; margin: 8px 0; } .slide-body th, .slide-body td { border: 1px solid var(--border); padding: 6px 9px; text-align: left; } .slide-body th { background: var(--surface-3); } .slide-cite { padding: 10px 38px 14px; border-top: 1px solid var(--border-soft); background: var(--surface-2); font-size: .8rem; color: var(--text-3); } .slide-cite b { color: var(--text-2); font-weight: 600; } .slide-nav { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border-soft); background: var(--surface); flex-wrap: wrap; } .slide-dots { display: flex; gap: 5px; flex: 1; justify-content: center; flex-wrap: wrap; } .slide-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: var(--border-strong); padding: 0; cursor: pointer; } .slide-dots button.on { background: var(--navy-900); width: 22px; border-radius: 5px; } [data-theme='dark'] .slide-dots button.on { background: var(--gold-500); } .teacher-notes { margin-top: 14px; border: 1px dashed var(--gold-200); background: var(--gold-100); border-radius: var(--radius-card); padding: 12px 16px; font-size: .9rem; color: var(--warn-ink); } [data-theme='dark'] .teacher-notes { background: rgba(212, 160, 23, .08); border-color: rgba(212, 160, 23, .35); color: var(--gold-200); } /* ---------- quiz ---------- */ .quiz-q { margin-bottom: 18px; } .quiz-q .q-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .quiz-q .q-text { font-size: 1.067rem; font-weight: 600; margin-bottom: 14px; line-height: 1.5; } .options { display: grid; gap: 8px; } .option { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; text-align: left; font: 500 .967rem var(--font); color: var(--text); transition: border-color .12s, background .12s; width: 100%; line-height: 1.45; } .option:hover:not(:disabled) { border-color: var(--navy-500); background: var(--selected); } .option .opt-letter { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: .833rem; background: var(--navy-50); color: var(--navy-900); } [data-theme='dark'] .option .opt-letter { background: var(--surface-3); color: var(--text); } .option.selected { border-color: var(--navy-900); background: var(--selected); } [data-theme='dark'] .option.selected { border-color: var(--navy-300); } .option.correct { border-color: var(--ok); background: var(--ok-bg); } .option.correct .opt-letter { background: var(--online); color: #fff; } .option.wrong { border-color: var(--bad); background: var(--bad-bg); } .option.wrong .opt-letter { background: #dc2626; color: #fff; } .option:disabled { cursor: default; } .explain { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-size: .9rem; } .explain .src { margin-top: 8px; font-size: .833rem; color: var(--text-3); display: flex; gap: 6px; align-items: flex-start; } .explain .src .ico { width: 14px; height: 14px; margin-top: 2px; } .explain blockquote { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--gold-500); background: var(--surface); font-style: italic; color: var(--text-2); font-size: .867rem; } .score-ring { width: 120px; height: 120px; } .qnav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; } .qnav .qn { min-width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font: 600 .833rem var(--font); cursor: pointer; } .qnav .qn.cur { border-color: var(--navy-900); background: var(--navy-900); color: #fff; } .qnav .qn.ok { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok); } .qnav .qn.bad { border-color: var(--bad-border); background: var(--bad-bg); color: var(--bad); } [data-theme='dark'] .qnav .qn.cur { background: var(--navy-100); color: var(--navy-950); border-color: var(--navy-100); } /* ---------- simülasyon kabuğu ---------- */ .sim { display: flex; flex-direction: column; gap: 16px; } .sim-task { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--navy-900); border-radius: var(--radius-card); padding: 14px 18px; } [data-theme='dark'] .sim-task { border-left-color: var(--navy-300); } .sim-task h3 { margin: 0 0 6px; font-size: 1.067rem; } .sim-task ol, .sim-task ul { margin: 0; padding-left: 1.2em; } .sim-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .feedback { border-radius: var(--radius); padding: 14px 16px; border: 1px solid var(--border); background: var(--surface); } .feedback.ok { background: var(--ok-bg); border-color: var(--ok-border); } .feedback.bad { background: var(--bad-bg); border-color: var(--bad-border); } .feedback.warn { background: var(--warn-bg); border-color: var(--warn-border); } .feedback h4 { margin: 0 0 6px; } .feedback ul { margin: 6px 0 0; padding-left: 1.2em; } .cite { font-size: .8rem; color: var(--text-3); } .cite::before { content: 'Kaynak: '; font-weight: 600; color: var(--text-2); } /* cihaz paneli görünümü */ .instrument { background: linear-gradient(180deg, #edf1f5, #d8dfe7); border: 1px solid #b9c4d1; border-radius: 14px; padding: 16px; box-shadow: inset 0 1px 0 #fff, var(--shadow); color: #0f172a; } [data-theme='dark'] .instrument { background: linear-gradient(180deg, #1c3550, #132a44); border-color: #2c4a6a; color: var(--text); } .instrument-title { display: flex; align-items: center; justify-content: space-between; font-weight: 700; letter-spacing: .06em; font-size: .8rem; color: #334155; margin-bottom: 10px; text-transform: uppercase; } [data-theme='dark'] .instrument-title { color: var(--text-2); } .lcd { background: #0d1b2a; color: #9fe8ff; border-radius: 10px; padding: 14px 16px; font-family: var(--mono); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .5); border: 1px solid #08121d; } .lcd .lcd-big { font-size: 2rem; font-weight: 600; letter-spacing: .02em; color: #d8f6ff; } .lcd .lcd-label { font-size: .78rem; color: #6fb3c9; letter-spacing: .04em; } .lcd .lcd-row { display: flex; justify-content: space-between; gap: 12px; } .lcd.amber { color: #ffd27a; } .lcd.amber .lcd-big { color: #ffe3a6; } .lcd.amber .lcd-label { color: #c79a44; } /* ======================================================================== UYGULAMA KABUĞU (eğitmen): koyu yan menü + sayfa başlığı ======================================================================== */ .shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100vh; background: linear-gradient(to right, #0a1929 var(--nav-w), var(--bg) var(--nav-w)); } [data-theme='dark'] .side-nav { border-right: 1px solid var(--border); } .side-nav { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: #0a1929; color: #cbd5e1; display: flex; flex-direction: column; gap: 24px; padding: 20px 14px; z-index: 40; } .side-brand { display: flex; align-items: center; gap: 12px; padding: 4px 4px; text-decoration: none; color: inherit; } .side-brand .logo { width: 38px; height: 38px; flex: none; } .side-brand .logo svg { display: block; width: 100%; height: 100%; } .side-brand .t1 { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: #fff; line-height: 1.2; } .side-brand .t2 { display: block; font-size: 11.5px; color: #9fb3c8; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-brand > span:last-child { min-width: 0; } .nav-group { display: flex; flex-direction: column; gap: 4px; } .nav-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #829ab1; padding: 0 10px 6px; } .nav-link { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px; border-radius: 8px; color: #cbd5e1; text-decoration: none; background: transparent; border: 0; font: 500 14px var(--font); cursor: pointer; text-align: left; width: 100%; } .nav-link .ico { width: 18px; height: 18px; } .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; } .nav-link.active { background: #1e3a5f; color: #fff; font-weight: 600; } .nav-link.active .ico { color: #d4a017; } .nav-meta { margin-left: auto; font-size: 12px; color: #9fb3c8; } .nav-count { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .nav-count.alert { background: #d4a017; color: #0a1929; } .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; } .side-card { border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 14px; background: rgba(255, 255, 255, .03); } .side-card .sc-label { font-size: 12px; color: #9fb3c8; } .side-card .sc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .side-card .sc-value { font-family: var(--mono); font-size: 13px; font-weight: 600; color: #fff; overflow-wrap: anywhere; min-width: 0; } .side-card .sc-note { font-size: 12px; color: #9fb3c8; margin-top: 6px; line-height: 1.45; } .dark-icon-btn { width: 36px; height: 36px; flex: none; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .dark-icon-btn .ico { width: 16px; height: 16px; } .dark-icon-btn:hover { background: rgba(255, 255, 255, .16); } .dark-icon-btn.plain { border: 0; background: transparent; color: #9fb3c8; } .dark-icon-btn.plain:hover { background: rgba(255, 255, 255, .1); color: #fff; } .user-card { display: flex; align-items: center; gap: 6px; padding: 4px; } .user-card .uc-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 4px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; text-align: left; font-family: var(--font); } .user-card .uc-main:hover { background: rgba(255, 255, 255, .06); } .user-card .uc-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; } .user-card .uc-name { color: #fff; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-card .uc-role { font-size: 12px; color: #9fb3c8; } .user-card .uc-actions { display: flex; gap: 2px; } .avatar { flex: none; width: 36px; height: 36px; border-radius: 999px; background: var(--navy-50); color: var(--navy-900); font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; position: relative; letter-spacing: .01em; } .avatar.gold { background: #d4a017; color: #0a1929; font-size: 13px; } .avatar.light { background: #d9e2ec; color: #1e3a5f; font-size: 12px; width: 32px; height: 32px; } .avatar .adot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 999px; border: 2px solid var(--surface); background: #94a3b8; } .avatar .adot.on { background: var(--online); } [data-theme='dark'] .avatar { background: var(--surface-3); color: var(--text); } [data-theme='dark'] .avatar.gold { background: #d4a017; color: #0a1929; } .shell-main { min-width: 0; display: flex; flex-direction: column; } .page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 28px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; } .page-head .ph-title { display: flex; flex-direction: column; gap: 2px; margin-right: 8px; min-width: 0; } .crumbs { font-size: 12.5px; color: var(--text-3); } .crumbs .sep { margin: 0 4px; } .page-head h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.02em; color: var(--text); } .ph-spacer { flex: 1 1 0; } .icon-btn.nav-toggle { display: none; } .class-picker { position: relative; } .class-picker > button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px 4px 6px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; font-family: var(--font); max-width: 420px; } .class-picker > button:hover { background: var(--hover); } .cp-icon { width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--navy-50); color: var(--navy-900); display: inline-flex; align-items: center; justify-content: center; } .cp-icon .ico { width: 17px; height: 17px; } [data-theme='dark'] .cp-icon { background: var(--surface-3); color: var(--text); } .cp-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .cp-label { font-size: 11.5px; color: var(--text-3); } .cp-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-count { margin-left: 6px; font-size: 12px; color: #475569; background: var(--surface-3); border-radius: 999px; padding: 2px 8px; white-space: nowrap; } [data-theme='dark'] .cp-count { color: var(--text-2); } .cp-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 320px; max-width: 420px; max-height: 360px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; } .cp-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; font: 500 13.5px var(--font); color: var(--text); } .cp-item:hover { background: var(--hover); } .cp-item.on { background: var(--selected); font-weight: 700; } .cp-item .cpi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cp-item .cpi-sub { font-size: 12px; color: var(--text-3); font-weight: 500; } .cp-sep { height: 1px; background: var(--border-soft); margin: 6px 4px; } .search-box { flex: 1 1 200px; max-width: 300px; min-width: 180px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text-3); position: relative; } .search-box .ico { width: 16px; height: 16px; } .search-box input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; font: inherit; font-size: 13.5px; color: var(--text); outline: none; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; } .search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 340px; max-height: 420px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; } .sr-group { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 8px 10px 4px; } .sr-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; font: 500 13px var(--font); color: var(--text); } .sr-item .ico { width: 16px; height: 16px; color: var(--text-3); } .sr-item:hover, .sr-item.on { background: var(--hover); } .sr-item .sri-sub { margin-left: auto; font-size: 12px; color: var(--text-3); white-space: nowrap; } .sr-empty { padding: 14px 10px; font-size: 13px; color: var(--text-3); } .conn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-3); white-space: nowrap; } .conn .dot { width: 8px; height: 8px; } .conn.on { color: var(--ok); } .icon-btn { position: relative; width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .icon-btn .ico { width: 18px; height: 18px; } .icon-btn:hover { background: var(--hover); } .icon-btn .ib-dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 999px; background: #d4a017; border: 2px solid var(--surface); } .page-body { display: flex; flex-direction: column; gap: 20px; padding: 24px 28px 40px; min-width: 0; } /* ---------- KPI kutuları ---------- */ .kpis { display: flex; flex-wrap: wrap; gap: 16px; } .kpi { flex: 1 1 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-sm); min-width: 0; } .kpi.alert { border-color: var(--warn-border); } .kpi.danger { border-color: var(--bad-border); } .kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #475569; font-size: 13px; font-weight: 500; } [data-theme='dark'] .kpi-head { color: var(--text-2); } .kpi-icon { width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--info-bg); color: var(--info); display: inline-flex; align-items: center; justify-content: center; } .kpi-icon .ico { width: 16px; height: 16px; } .kpi-icon.ok { background: var(--ok-bg); color: var(--ok); } .kpi-icon.warn { background: var(--warn-bg); color: var(--warn); } .kpi-icon.bad { background: var(--bad-bg); color: var(--bad); } .kpi-value { font-family: var(--font-display); font-size: 30px; font-weight: 650; letter-spacing: -.02em; line-height: 1; color: var(--text); } .kpi-value small { font-size: 18px; color: var(--text-3); font-weight: 500; letter-spacing: 0; } .kpi-value.bad { color: var(--bad); } .kpi-sub { font-size: 12.5px; color: var(--text-3); } /* ---------- komuta merkezi düzeni ---------- */ .cc-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; } .cc-left { flex: 3 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; } .cc-right { flex: 2 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 20px; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); min-width: 0; } .panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); } .panel-head.nb { border-bottom: 0; padding-bottom: 12px; } .panel-head h2 { margin: 0; font-size: 16px; font-weight: 650; flex: 1 1 auto; } .panel-head .ph-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; } .panel-head .ph-kicker { font-size: 12px; color: var(--text-3); } .panel-head .ph-main h2 { font-size: 18px; letter-spacing: -.01em; } .panel-head .ph-note { font-size: 12.5px; color: var(--text-3); } .ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .panel-body { padding: 18px 20px 20px; } .panel-foot { padding: 10px 20px 16px; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); flex-wrap: wrap; } .link-btn { background: none; border: 0; padding: 0; font: 600 13px var(--font); color: var(--link); cursor: pointer; text-decoration: none; } .link-btn:hover { color: var(--link-hover); text-decoration: underline; } .step-stage { padding: 18px 20px 20px; min-width: 0; } .step-stage:fullscreen { background: var(--bg); padding: 28px 40px; overflow: auto; } .step-stats { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--border-soft); background: var(--surface-2); border-radius: 0 0 12px 12px; font-size: 13px; color: var(--text-2); } .step-stats .ss-item { display: inline-flex; align-items: center; gap: 6px; } .step-stats .ss-item b { font-family: var(--mono); font-weight: 600; color: var(--text); } .step-stats .ss-bar { flex: 1 1 140px; min-width: 120px; } .mistake-note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bad-bg); border: 1px solid var(--bad-border); color: var(--bad-ink); font-size: 12.5px; margin: 0 20px 16px; } .mistake-note .ico { width: 16px; height: 16px; color: var(--bad); margin-top: 1px; } /* ders akışı listesi */ .flow { list-style: none; margin: 0; padding: 6px 8px 10px; } .flow-item { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; } .flow-item:hover { background: var(--row-hover); } .flow-item.current { background: var(--selected); border-color: var(--info-border); } .flow-num { width: 28px; height: 28px; flex: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 1.5px solid var(--border-strong); color: #475569; } .flow-num .ico { width: 15px; height: 15px; } .flow-num.done { background: var(--ok-bg); color: var(--ok); border-color: transparent; } .flow-num.cur { background: var(--navy-900); color: #fff; border-color: transparent; } [data-theme='dark'] .flow-num { color: var(--text-2); } [data-theme='dark'] .flow-num.cur { background: var(--navy-100); color: var(--navy-950); } .flow-main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; } .flow-main .fm-t { font-weight: 600; font-size: 14px; } .flow-item.current .fm-t { font-weight: 700; } .flow-main .fm-s { font-size: 12px; color: var(--text-3); } .flow-main:hover .fm-t { text-decoration: underline; text-underline-offset: 2px; } .flow-side { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; } .flow-side.done { color: var(--ok); } .flow-side.muted { color: var(--text-3); font-weight: 500; } /* sınıf durumu */ .rtabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--border-soft); overflow-x: auto; } .rtab { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-3); font: 600 13px var(--font); white-space: nowrap; cursor: pointer; margin-bottom: -1px; } .rtab .rc { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: #475569; font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; } .rtab[aria-selected='true'] { color: var(--text); border-bottom-color: var(--navy-900); } .rtab[aria-selected='true'] .rc { background: var(--navy-900); color: #fff; } [data-theme='dark'] .rtab .rc { color: var(--text-2); } [data-theme='dark'] .rtab[aria-selected='true'] { border-bottom-color: var(--gold-500); } [data-theme='dark'] .rtab[aria-selected='true'] .rc { background: var(--navy-100); color: var(--navy-950); } .rlist { list-style: none; margin: 0; padding: 6px 8px; max-height: 620px; overflow: auto; } .rrow { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; } .rrow:hover { background: var(--row-hover); } .rr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .rr-top { display: flex; align-items: center; gap: 8px; } .rr-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-pct { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); margin-left: auto; } .rr-loc { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-bar { height: 4px; border-radius: 999px; background: var(--track); overflow: hidden; } .rr-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--navy-900); } [data-theme='dark'] .rr-bar > span { background: var(--navy-300); } .rr-bar.behind > span { background: #dc2626; } .rr-bar.off > span { background: #94a3b8; } .rlist-empty { padding: 22px 16px; text-align: center; color: var(--text-3); font-size: 13px; } .empty-mini { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 12px 6px; color: var(--text-3); font-size: 13px; } .empty-mini .ico { width: 26px; height: 26px; color: var(--navy-400); } /* kurs akışı sayfası */ .level-block { display: flex; flex-direction: column; gap: 14px; } .level-title { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .level-title::after { content: ''; flex: 1; height: 1px; background: var(--border); } .module-card .mc-head { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; } .mc-no { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--navy-900); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; } [data-theme='dark'] .mc-no { background: var(--navy-100); color: var(--navy-950); } .mc-main { flex: 1 1 320px; min-width: 0; } .mc-main h2 { margin: 0 0 2px; font-size: 17px; } .mc-sub { font-size: 12.5px; color: var(--text-3); } .mc-sum { font-size: 13px; color: var(--text-2); margin: 6px 0 0; } .mc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12.5px; color: var(--text-3); } /* hesap yönetimi */ .class-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .class-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); } .class-card.on { border-color: var(--navy-900); box-shadow: 0 0 0 3px rgba(30, 58, 95, .12); } [data-theme='dark'] .class-card.on { border-color: var(--navy-300); } .class-card h3 { margin: 0; font-size: 16px; } .class-card .cc-meta { font-size: 12.5px; color: var(--text-3); } .acct-name { display: flex; align-items: center; gap: 10px; min-width: 0; } .acct-name .an-text { display: flex; flex-direction: column; min-width: 0; } .acct-name .an-n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acct-name .an-e { font-family: var(--mono); font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* hesap tablosu: uzun ad/e-posta satır kırar, işlemler sütunu ekran dışına itilmez */ .dtable td.acct-cell .acct-name { max-width: 340px; } .dtable td.acct-cell .an-n, .dtable td.acct-cell .an-e { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.35; } .dtable td.acct-actions { width: 1%; white-space: nowrap; } .cred-table td.pw { font-family: var(--mono); font-weight: 600; letter-spacing: .02em; } .parse-preview { margin-top: 10px; max-height: 240px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; } .steps-help { display: grid; gap: 10px; counter-reset: sh; margin: 0; padding: 0; list-style: none; } .steps-help li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); } .steps-help li::before { counter-increment: sh; content: counter(sh); flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--navy-900); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: -1px; } [data-theme='dark'] .steps-help li::before { background: var(--navy-100); color: var(--navy-950); } /* raporlar */ .chips { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 10px; background: var(--surface-3); } .chips button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #475569; font: 600 12.5px var(--font); cursor: pointer; } .chips button[aria-pressed='true'] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); } [data-theme='dark'] .chips button { color: var(--text-2); } [data-theme='dark'] .chips button[aria-pressed='true'] { background: var(--navy-100); color: var(--navy-950); } .legend2 { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: #475569; } [data-theme='dark'] .legend2 { color: var(--text-2); } .legend2 span { display: inline-flex; align-items: center; gap: 6px; } .legend2 i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid transparent; } /* gösterge kutuları matris hücreleriyle aynı renkleri kullanır (koyu temada da) */ .legend2 i.c-hi { background: #1e3a5f; border-color: #1e3a5f; } .legend2 i.c-mid { background: #627d98; border-color: #627d98; } .legend2 i.c-lo { background: #d4a017; border-color: #d4a017; } .legend2 i.c-prog { background: #d9e2ec; border-color: #829ab1; } .legend2 i.c-none { background: var(--surface-3); border-color: var(--border); } [data-theme='dark'] .legend2 i.c-hi { background: #9fb3c8; border-color: #9fb3c8; } [data-theme='dark'] .legend2 i.c-mid { background: #486581; border-color: #627d98; } [data-theme='dark'] .legend2 i.c-prog { background: #243b53; border-color: #627d98; } .matrix-wrap { overflow-x: auto; padding: 12px 20px 20px; } .matrix { border-collapse: separate; border-spacing: 0; font-size: 12.5px; width: max-content; } .matrix th { font-weight: 600; color: #475569; } [data-theme='dark'] .matrix th { color: var(--text-2); } .matrix thead th { padding: 6px 2px; text-align: center; font-family: var(--mono); font-weight: 500; font-size: 10.5px; color: var(--text-3); white-space: nowrap; } .matrix thead th.quiz { color: var(--text); font-weight: 600; } .matrix thead th.lead, .matrix tbody th { position: sticky; left: 0; background: var(--surface); text-align: left; font-family: var(--font); font-size: 12.5px; padding: 4px 12px 4px 0; min-width: 170px; z-index: 1; white-space: nowrap; } .matrix thead th.lead { font-weight: 600; color: #475569; } .matrix .mnum { text-align: right; padding: 4px 10px; font-family: var(--mono); color: var(--text-2); white-space: nowrap; } .matrix thead th.mnum { font-family: var(--font); font-size: 12.5px; font-weight: 600; color: #475569; } /* koyu tema: sabit #475569 koyu yüzeyde 2,07:1 kalıyordu → ≥ 4,5:1 */ [data-theme='dark'] .matrix thead th.lead, [data-theme='dark'] .matrix thead th.mnum { color: var(--text-2); } .matrix td.cell { padding: 3px 2px; } .matrix td.sep, .matrix th.sep { border-left: 1px solid var(--border); } .matrix .mcell { display: block; width: 22px; height: 22px; margin: 0 auto; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-3); cursor: pointer; padding: 0; } .matrix .mcell.c-hi { background: #1e3a5f; border-color: #1e3a5f; } .matrix .mcell.c-mid { background: #627d98; border-color: #627d98; } .matrix .mcell.c-lo { background: #d4a017; border-color: #d4a017; } .matrix .mcell.c-prog { background: #d9e2ec; border-color: #829ab1; } .matrix .mcell.c-none { cursor: default; } [data-theme='dark'] .matrix .mcell.c-hi { background: #9fb3c8; border-color: #9fb3c8; } [data-theme='dark'] .matrix .mcell.c-mid { background: #486581; border-color: #627d98; } [data-theme='dark'] .matrix .mcell.c-prog { background: #243b53; border-color: #627d98; } .matrix tbody tr:hover th, .matrix tbody tr:hover td { background: var(--row-hover); } .flag { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex: none; } .flag.ok { background: var(--online); } .flag.warn { background: #d4a017; } .flag.bad { background: #dc2626; } .mbars { list-style: none; margin: 0; padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 14px; } .mbars li { display: flex; flex-direction: column; gap: 6px; } .mbars .mb-line { display: flex; gap: 10px; font-size: 13px; } .mbars .mb-line span:first-child { flex: 1; } .mbars .mb-n { font-family: var(--mono); font-weight: 600; } .mbars .bar { height: 8px; } .hint-box { margin: 0 20px 18px; padding: 12px 14px; border-radius: 10px; background: var(--info-bg); border: 1px solid var(--info-border); display: flex; gap: 10px; font-size: 12.5px; color: var(--info-ink); } .hint-box .ico { width: 16px; height: 16px; margin-top: 1px; } /* ======================================================================== ÖĞRENCİ ÇALIŞMA ALANI ======================================================================== */ .s-app { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); } .s-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 24px; background: #0a1929; color: #d9e2ec; position: sticky; top: 0; z-index: 30; } .s-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .s-brand .logo { width: 34px; height: 34px; flex: none; } .s-brand .logo svg { display: block; width: 100%; height: 100%; } .s-brand .t1 { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #fff; } .s-div { width: 1px; height: 24px; background: rgba(255, 255, 255, .16); } .s-class { font-size: 13px; color: #bcccdc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; } .s-spacer { flex: 1 1 20px; } .conn-dark { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #9fb3c8; font-weight: 600; white-space: nowrap; } .conn-dark i { width: 8px; height: 8px; border-radius: 999px; background: #64748b; display: inline-block; } .conn-dark.on { color: #a7f3d0; } .conn-dark.on i { background: #10b981; } .acct-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 4px; border-radius: 10px; border: 0; background: transparent; color: #fff; cursor: pointer; font: 600 13.5px var(--font); } .acct-btn:hover { background: rgba(255, 255, 255, .1); } .acct-btn .ico { width: 16px; height: 16px; color: #9fb3c8; } .acct-btn .an { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s-navbtn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; } .s-navbtn .ico { width: 17px; height: 17px; } .s-layout { flex: 1; display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: stretch; min-height: 0; } .s-side { background: var(--surface); border-right: 1px solid var(--border); padding: 18px 12px 24px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; } .s-prog { padding: 0 8px; display: flex; flex-direction: column; gap: 8px; } .s-prog .sp-t { font-family: var(--font-display); font-size: 15px; font-weight: 650; } .s-prog .sp-row { display: flex; justify-content: space-between; font-size: 12.5px; color: #475569; } [data-theme='dark'] .s-prog .sp-row { color: var(--text-2); } .s-prog .sp-row b { font-family: var(--mono); font-weight: 600; color: var(--navy-900); } [data-theme='dark'] .s-prog .sp-row b { color: var(--text); } .s-nav { display: flex; flex-direction: column; gap: 2px; } .lvl-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 12px 10px 4px; } .lvl-label:first-child { padding-top: 6px; } .mod-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px; border-radius: 8px; color: var(--text); background: none; border: 0; width: 100%; text-align: left; cursor: pointer; font: 500 13.5px var(--font); } .mod-row:hover { background: var(--row-hover); } .mod-row .mr-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mod-row .mr-c { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); } .mod-row.todo { color: var(--text-2); } .mstat { width: 22px; height: 22px; flex: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; box-sizing: border-box; border: 1.5px solid var(--border-strong); color: #475569; } .mstat .ico { width: 13px; height: 13px; } .mstat.done { background: var(--ok-bg); color: var(--ok); border: 0; } .mstat.part { border: 3px solid var(--navy-900); border-right-color: var(--navy-200); border-bottom-color: var(--navy-200); } [data-theme='dark'] .mstat { color: var(--text-2); } [data-theme='dark'] .mstat.part { border-color: var(--navy-300); border-right-color: var(--navy-700); border-bottom-color: var(--navy-700); } .mod-open { display: flex; flex-direction: column; border-radius: 10px; background: var(--selected); padding: 4px 0 6px; } .mod-open > .mod-row { font-weight: 700; color: var(--navy-950); } .mod-open > .mod-row:hover { background: transparent; } .mod-open > .mod-row .mr-c { color: var(--navy-900); font-weight: 600; } [data-theme='dark'] .mod-open > .mod-row { color: var(--text); } [data-theme='dark'] .mod-open > .mod-row .mr-c { color: var(--text-2); } .mod-steps { list-style: none; margin: 0; padding: 0 6px 0 22px; display: flex; flex-direction: column; gap: 1px; } .mstep { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px; border-radius: 8px; font: 500 13px var(--font); color: #334155; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; } [data-theme='dark'] .mstep { color: var(--text-2); } .mstep .ico { width: 14px; height: 14px; } .mstep .ms-t { flex: 1; min-width: 0; line-height: 1.3; } .mstep .ms-s { font-family: var(--mono); font-size: 11px; color: var(--text-3); } .mstep:hover { background: rgba(255, 255, 255, .6); } [data-theme='dark'] .mstep:hover { background: rgba(255, 255, 255, .05); } .mstep.done .ico.st { color: var(--ok); } .mstep.locked { color: var(--text-3); cursor: not-allowed; } .mstep.current { background: var(--surface); font-weight: 700; color: var(--navy-950); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); } [data-theme='dark'] .mstep.current { color: var(--text); background: var(--surface-2); } .mstep .cdot { width: 8px; height: 8px; margin: 0 3px; border-radius: 999px; background: var(--navy-900); flex: none; } [data-theme='dark'] .mstep .cdot { background: var(--navy-300); } .s-main { min-width: 0; padding: 20px 28px 40px; display: flex; flex-direction: column; gap: 18px; } .guide { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-radius: 12px; background: var(--info-bg); border: 1px solid var(--info-border); color: var(--info-ink); font-size: 13.5px; } .guide > .ico { width: 18px; height: 18px; } .guide .g-text { flex: 1 1 320px; } .guide.free { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-ink); } .guide.announce { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-ink); } .guide.announce > .ico { color: var(--warn); } .s-stephead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; } .s-stephead .sh-main { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .s-stephead .sh-k { font-size: 12.5px; color: var(--text-3); } .s-stephead h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--navy-950); } [data-theme='dark'] .s-stephead h1 { color: var(--text); } .s-stephead .sh-lead { margin: 0; color: #475569; } [data-theme='dark'] .s-stephead .sh-lead { color: var(--text-2); } .s-stepnav { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border-soft); flex-wrap: wrap; } .s-stepnav .sn-note { font-size: 12.5px; color: var(--text-3); } .s-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; background: var(--bg); } .s-card { width: min(520px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 30px 32px; display: flex; flex-direction: column; gap: 16px; } .s-card .logo { width: 48px; height: 48px; } .s-card .logo svg { width: 100%; height: 100%; display: block; } .s-card h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; } .s-card p { margin: 0; color: var(--text-2); } .menu-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 300px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 70; } .menu-pop .mp-head { padding: 10px 10px 12px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px; } .menu-pop .mp-name { font-weight: 700; font-size: 14px; } .menu-pop .mp-sub { font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; } .menu-pop .mp-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; font: 500 13.5px var(--font); color: var(--text); } .menu-pop .mp-item .ico { width: 16px; height: 16px; color: var(--text-3); } .menu-pop .mp-item:hover { background: var(--hover); } .menu-pop .mp-item.danger { color: var(--bad); } .menu-pop .mp-item.danger .ico { color: var(--bad); } .menu-pop .mp-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 8px 10px 4px; } .rel { position: relative; } /* ======================================================================== GİRİŞ SAYFASI ======================================================================== */ .auth { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; background: var(--surface); } .auth-hero { flex: 1 1 520px; position: relative; overflow: hidden; background: #0a1929; color: #d9e2ec; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 44px 56px 36px; } .auth-art { position: absolute; right: -60px; top: 40px; width: 420px; height: auto; opacity: .28; pointer-events: none; } .auth-brand { position: relative; display: flex; align-items: center; gap: 12px; } .auth-brand .logo { width: 44px; height: 44px; flex: none; } .auth-brand .logo svg { width: 100%; height: 100%; display: block; } .auth-brand .t1 { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; color: #fff; line-height: 1.2; } .auth-brand .t2 { display: block; font-size: 12.5px; color: #9fb3c8; } .auth-copy { position: relative; display: flex; flex-direction: column; gap: 22px; max-width: 560px; } .auth-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #d4a017; } .auth-copy h1 { margin: 0; font-size: 44px; line-height: 1.08; font-weight: 700; letter-spacing: -.03em; color: #fff; } .auth-copy p { margin: 0; font-size: 16px; line-height: 1.6; color: #bcccdc; } .auth-feats { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; } .auth-feats li { display: flex; gap: 12px; } .af-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(212, 160, 23, .14); color: #d4a017; display: inline-flex; align-items: center; justify-content: center; } .af-icon .ico { width: 18px; height: 18px; } .auth-feats strong { display: block; color: #fff; font-weight: 600; } .auth-feats span.af-s { display: block; font-size: 13px; color: #9fb3c8; } .auth-src { position: relative; display: flex; flex-direction: column; gap: 14px; } .auth-src .grad { height: 4px; width: 120px; border-radius: 999px; background: linear-gradient(90deg, #486581, #d4a017); } .auth-src p { margin: 0; font-size: 12.5px; color: #9fb3c8; max-width: 560px; } .auth-panel { flex: 1 1 440px; display: flex; flex-direction: column; padding: 28px 40px; background: var(--surface); } .auth-links { display: flex; justify-content: flex-end; gap: 20px; font-size: 13px; } .auth-links a, .auth-links button { font-weight: 600; text-decoration: none; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px; font-family: var(--font); } .auth-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 0; } .auth-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 20px; } .auth-form h2 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--navy-950); } [data-theme='dark'] .auth-form h2 { color: var(--text); } .auth-form .lead { margin: 0; font-size: 14.5px; color: #475569; } [data-theme='dark'] .auth-form .lead { color: var(--text-2); } .auth-form .f { display: flex; flex-direction: column; gap: 6px; } .auth-form .f-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .auth-form input { height: 48px; font-size: 15px; } .auth-cta { height: 50px !important; box-shadow: 0 8px 18px -10px rgba(10, 25, 41, .6); font-size: 15px !important; } .role-cards { display: flex; flex-wrap: wrap; gap: 12px; } .role-card { flex: 1 1 170px; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--surface-2); } .role-card .rc-t { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--navy-900); } [data-theme='dark'] .role-card .rc-t { color: var(--text); } .role-card .rc-t .ico { width: 16px; height: 16px; } .role-card .rc-s { font-size: 12.5px; color: #475569; } [data-theme='dark'] .role-card .rc-s { color: var(--text-2); } .auth-note { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: #475569; } [data-theme='dark'] .auth-note { color: var(--text-2); } .auth-note .ico { width: 16px; height: 16px; color: var(--ok); margin-top: 2px; } .auth-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-3); } /* ---------- çeşitli ---------- */ .empty { text-align: center; padding: 40px 20px; color: var(--text-3); } .empty .big { font-size: 2.4rem; margin-bottom: 8px; } .empty .ico.big-ico { width: 40px; height: 40px; color: var(--navy-400); margin-bottom: 8px; } .empty h3 { color: var(--text); margin-bottom: 6px; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: .9rem; margin: 0; } .kv dt { color: var(--text-3); } .kv dd { margin: 0; font-weight: 600; } .chart { width: 100%; height: auto; display: block; } .chart text:not([fill]) { fill: var(--text-2); } .chart text:not([font-family]) { font-family: var(--font); } .chart .axis line, .chart .axis path { stroke: var(--border-strong); } .chart .grid line { stroke: var(--border); stroke-dasharray: 2 3; } .legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--text-2); } .legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; background: var(--c, #999); vertical-align: -1px; } .draggable { cursor: grab; user-select: none; } .draggable:active { cursor: grabbing; } .drop-slot { border: 2px dashed var(--border-strong); border-radius: var(--radius-sm); min-height: 44px; display: flex; align-items: center; padding: 6px 10px; color: var(--text-3); background: var(--surface-2); transition: border-color .12s, background .12s; } .drop-slot.over { border-color: var(--gold-500); background: var(--gold-100); } .tooltip-tip { position: fixed; z-index: 300; background: var(--navy-950); color: #fff; padding: 6px 9px; border-radius: 6px; font-size: .8rem; pointer-events: none; max-width: 320px; box-shadow: var(--shadow); } .pill-group { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; } .pill-group button { border: 0; background: var(--surface); padding: 8px 12px; font: 600 .867rem var(--font); color: var(--text-2); cursor: pointer; border-right: 1px solid var(--border); } .pill-group button:last-child { border-right: 0; } .pill-group button.on { background: var(--navy-900); color: #fff; } [data-theme='dark'] .pill-group button.on { background: var(--navy-100); color: var(--navy-950); } .page-intro { margin: 0; color: var(--text-2); max-width: 820px; } .section-gap { display: flex; flex-direction: column; gap: 20px; } /* ---------- duyarlı düzen ---------- */ @media (max-width: 1200px) { :root { --nav-w: 228px; } } @media (max-width: 1024px) { .shell { grid-template-columns: minmax(0, 1fr); } .side-nav { position: fixed; left: 0; top: 0; bottom: 0; width: min(290px, 86vw); transform: translateX(-102%); transition: transform .2s; box-shadow: var(--shadow-lg); } .shell.nav-open .side-nav { transform: none; } .icon-btn.nav-toggle { display: inline-flex; } .page-head { position: static; } .search-box kbd { display: none; } .shell { background: var(--bg); } .page-head { padding: 12px 16px; } .page-body { padding: 18px 16px 32px; } .search-box { flex-basis: 100%; order: 10; } } @media (max-width: 980px) { .slide { padding: 22px 20px; } .slide-body .two-col { grid-template-columns: 1fr; } .s-layout { grid-template-columns: minmax(0, 1fr); } .s-side { position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; width: min(320px, 88vw); z-index: 50; transform: translateX(-102%); transition: transform .2s; box-shadow: var(--shadow-lg); } .s-app.nav-open .s-side { transform: none; } .s-navbtn { display: inline-flex; } .s-main { padding: 16px; } .s-head { padding: 10px 14px; } .s-class, .s-div { display: none; } .acct-btn .an { display: none; } .auth-hero { padding: 32px; } .auth-art { display: none; } .auth-copy h1 { font-size: 34px; } .auth-panel { padding: 24px; } } @media print { .side-nav, .page-head, .slide-nav, .s-head, .s-side, .btn, .no-print, .toasts { display: none !important; } .shell, .s-layout { display: block; } .shell { background: #fff; } .page-body { overflow: visible; padding: 0; } body { background: #fff; } .panel, .kpi, .card { box-shadow: none; break-inside: avoid; } .matrix-wrap { overflow: visible; } /* koyu temada yazdırılsa da çıktı açık renklerle */ [data-theme='dark'] { --bg: #fff; --surface: #fff; --surface-2: #f8fafc; --surface-3: #f1f5f9; --track: #eef2f6; --border: #e2e8f0; --border-soft: #eef2f6; --border-strong: #cbd5e1; --text: #0f172a; --text-2: #334155; --text-3: #64748b; --text-label: #1e293b; --link: #1e3a5f; --row-hover: transparent; --ok: #047857; --ok-bg: #ecfdf5; --ok-border: #a7f3d0; --ok-ink: #064e3b; --warn: #8a6508; --warn-bg: #fdf8e7; --warn-border: #f1de9c; --warn-ink: #5c4306; --bad: #b91c1c; --bad-bg: #fef2f2; --bad-border: #fecaca; --bad-ink: #7f1d1d; --info: #1e3a5f; --info-bg: #f0f4f8; --info-border: #bcccdc; --info-ink: #1e3a5f; color-scheme: light; } [data-theme='dark'] .matrix .mcell.c-hi, [data-theme='dark'] .legend2 i.c-hi { background: #1e3a5f; border-color: #1e3a5f; } [data-theme='dark'] .matrix .mcell.c-mid, [data-theme='dark'] .legend2 i.c-mid { background: #627d98; border-color: #627d98; } [data-theme='dark'] .matrix .mcell.c-prog, [data-theme='dark'] .legend2 i.c-prog { background: #d9e2ec; border-color: #829ab1; } [data-theme='dark'] .matrix th, [data-theme='dark'] .matrix thead th.lead, [data-theme='dark'] .matrix thead th.mnum { color: #475569; } .matrix .mcell, .legend2 i, .flag, .pill, .kpi { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* rapor: A4 yatay; 55 adımlık matris sayfa genişliğine sığar, başlık satırı her sayfada tekrarlanır */ .report-page { page: rapor; } .report-page .matrix-panel { break-inside: auto; } .report-page .matrix-panel .panel-head { padding: 8px 0; border: 0; } .report-page .legend2 { padding: 4px 0 0 !important; font-size: 8pt; } .report-page .matrix-wrap { padding: 6px 0 0; } .report-page .matrix { width: 100%; font-size: 8pt; } .report-page .matrix thead { display: table-header-group; } .report-page .matrix tr { break-inside: avoid; } .report-page .matrix thead th { position: static; padding: 2px 0; font-size: 6.5pt; } .report-page .matrix thead th:not(.lead):not(.mnum) { writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; vertical-align: bottom; line-height: 1; } .report-page .matrix thead th.lead, .report-page .matrix tbody th { position: static; min-width: 0; max-width: 46mm; white-space: normal; overflow-wrap: anywhere; padding: 1px 6px 1px 0; font-size: 8pt; line-height: 1.2; } .report-page .matrix .mnum, .report-page .matrix thead th.mnum { padding: 1px 4px; font-size: 7.5pt; } .report-page .matrix td.cell { padding: 1px; } .report-page .matrix .mcell { width: 9px; height: 9px; border-radius: 2px; } .report-page .matrix .flag { width: 6px; height: 6px; } .report-page .cc-cols { display: block; } .report-page .cc-cols > .panel { margin-top: 12px; break-inside: auto; } .report-page .dtable thead { display: table-header-group; } .report-page .dtable thead th { position: static; } .report-page .dtable tr { break-inside: avoid; } } @page rapor { size: A4 landscape; margin: 9mm; } /* ======================================================================== TIP AKADEMİ — öğrenci ana sayfası, öğrenme yolu, adım şeritleri ======================================================================== */ .s-brand-link { text-decoration: none; color: inherit; border-radius: 10px; } .s-toplink { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; color: #d9e2ec; text-decoration: none; font: 600 13.5px var(--font); border: 1px solid rgba(255, 255, 255, .16); } .s-toplink:hover { background: rgba(255, 255, 255, .08); color: #fff; } .s-layout.no-side { grid-template-columns: minmax(0, 1fr); } .s-layout.no-side .s-side { display: none; } .s-layout.no-side .s-main { max-width: 1180px; width: 100%; margin: 0 auto; } .sp-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--link); text-decoration: none; } .sp-back:hover { text-decoration: underline; } .s-prog .sp-t { line-height: 1.3; } .hello { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: flex-end; padding: 24px 26px; border-radius: 16px; background: linear-gradient(120deg, #0a1929 0%, #1e3a5f 70%, #243b53 100%); color: #d9e2ec; position: relative; overflow: hidden; } .hello::after { content: ''; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(241, 222, 156, .18) 0 30%, rgba(212, 160, 23, .45) 55%, rgba(184, 134, 11, .0) 72%); pointer-events: none; } .hello-t { flex: 1 1 420px; min-width: 0; position: relative; } .hello-k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #d4a017; } .hello h1 { color: #fff; margin: 6px 0 8px; font-size: 30px; } .hello p { margin: 0; color: #bcccdc; max-width: 640px; } .how { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1 1 300px; position: relative; } .how li { display: flex; gap: 12px; align-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 10px 12px; } .how-i { width: 34px; height: 34px; flex: none; border-radius: 9px; background: rgba(212, 160, 23, .16); color: #d4a017; display: inline-flex; align-items: center; justify-content: center; } .how li b { display: block; color: #fff; font-size: 14px; } .how li span span { display: block; font-size: 12.5px; color: #9fb3c8; } .topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 18px; } .topic-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--navy-900); } [data-theme='dark'] .topic-card { border-top-color: var(--gold-500); } .topic-card h2 { margin: 0; font-size: 21px; } .tc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .tc-area { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-700); } [data-theme='dark'] .tc-area { color: var(--gold-300); } .tc-sum { margin: 0; color: var(--text-2); font-size: 14px; } .tc-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-3); } .tc-meta span { display: inline-flex; align-items: center; gap: 6px; } .tc-prog { display: flex; align-items: center; gap: 10px; } .tc-prog .bar { flex: 1; height: 8px; } .topic-hero { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; box-shadow: var(--shadow-sm); } .th-main { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .th-main h1 { margin: 0; font-size: 28px; color: var(--navy-950); } [data-theme='dark'] .th-main h1 { color: var(--text); } .th-main p { margin: 0; color: var(--text-2); } .th-side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .th-pct { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; color: var(--navy-900); } [data-theme='dark'] .th-pct { color: var(--text); } .topic-intro p { color: var(--text-2); } .topic-intro p:last-child { margin-bottom: 0; } .lpath { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: lp; } .lp-mod { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; } .lp-mod.done { border-color: var(--ok-border); } .lp-head { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); } .lp-head h2 { margin: 0 0 2px; font-size: 17px; } .lp-mod.done .mc-no { background: var(--ok); } .lp-steps { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; } .lp-step { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--text); } .lp-step:hover { background: var(--row-hover); } .lp-step.locked { color: var(--text-3); cursor: not-allowed; } .lp-ic { width: 30px; height: 30px; flex: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--border-strong); color: var(--text-2); } .lp-step.done .lp-ic { background: var(--ok-bg); border-color: transparent; color: var(--ok); } .lp-step.locked .lp-ic { background: var(--surface-3); border-style: dashed; } .lp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .lp-t b { font-weight: 600; font-size: 14px; } .lp-t span { font-size: 12.5px; color: var(--text-3); } .step-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 13.5px; } .step-banner > .ico { width: 20px; height: 20px; flex: none; } .step-banner .sb-t { flex: 1 1 320px; } .step-banner.ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-ink); } .step-banner.ok > .ico { color: var(--ok); } .step-banner.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-ink); } .step-banner.warn > .ico { color: var(--warn); } .objectives-card { margin-bottom: 14px; } .objectives-card summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; } .objectives-card .objectives { margin-top: 8px; } .quiz-intro { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-2); margin-bottom: 10px; } /* teori slaytı ekleri */ .slide-k { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); margin-bottom: 6px; letter-spacing: .04em; } .slide-dots button.seen { background: var(--navy-300); } [data-theme='dark'] .slide-dots button.seen { background: var(--navy-500); } .slide-text > :last-child { margin-bottom: 0; } .slide-text h3 { font-size: 1.05rem; margin: 14px 0 6px; color: var(--navy-900); } [data-theme='dark'] .slide-text h3 { color: var(--text); } .slide-live { margin-top: 14px; } .formula { font-family: var(--mono); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: .95em; line-height: 1.7; overflow-x: auto; } .formula b { color: var(--navy-900); } [data-theme='dark'] .formula b { color: var(--gold-300); } .frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 4px; font-size: .95em; } .frac > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 4px 1px; } .frac > span:last-child { padding: 1px 4px 0; } .note { font-size: .9em; color: var(--text-2); background: var(--info-bg); border: 1px solid var(--info-border); border-radius: 10px; padding: 9px 12px; margin: 10px 0; } .warnbox { font-size: .93em; color: var(--bad-ink); background: var(--bad-bg); border: 1px solid var(--bad-border); border-radius: 10px; padding: 9px 12px; margin: 10px 0; } .tcheck { margin-top: 18px; border: 1px solid var(--info-border); background: var(--surface-2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .tc-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-700); } [data-theme='dark'] .tc-head { color: var(--gold-300); } .tc-q { font-weight: 600; } .tc-fb { margin: 0; } .tcheck .option { padding: 9px 12px; font-size: .93rem; } @media (max-width: 760px) { .hello { padding: 20px; } .hello h1 { font-size: 24px; } .topic-hero { padding: 18px; } .th-main h1 { font-size: 23px; } .s-toplink { display: none; } } /* şekiller */ .fig-svg { display: block; width: 100%; height: auto; color: var(--text); font-family: var(--font); } .fig-svg text { font-family: var(--font); } .slide-body .figure .fig-svg { max-height: 60vh; } /* Dar ekranda geniş slayt tabloları yatay kaydırılır (sayfa taşmaz) */ @container (max-width: 640px) { .slide-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: .86em; } .slide-body th, .slide-body td { padding: 5px 7px; } } /* ======================================================================== SİMÜLASYON BİLEŞENLERİ (sims/_kit.js) ======================================================================== */ .stage-intro h3 { margin: 0 0 4px; font-size: 1.1rem; color: var(--navy-900); } [data-theme='dark'] .stage-intro h3 { color: var(--text); } .stage-intro p { margin: 0; color: var(--text-2); } .decision { display: flex; flex-direction: column; gap: 10px; } .decision + .decision { margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--border); } .decision .d-q { font-weight: 600; line-height: 1.5; } .decision.compact .option { padding: 9px 12px; } .sim-fb { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); font-size: .933rem; line-height: 1.5; } .sim-fb > .ico { flex: none; margin-top: 2px; } .sim-fb.ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-ink); } .sim-fb.ok > .ico { color: var(--ok); } .sim-fb.bad { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad-ink); } .sim-fb.bad > .ico { color: var(--bad); } .sim-fb.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-ink); } .sim-fb.warn > .ico { color: var(--warn); } .sim-fb.info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-ink); } .checklist { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .ck { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; align-items: start; text-align: left; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: 500 .933rem var(--font); cursor: pointer; line-height: 1.4; } .ck:hover:not(:disabled) { border-color: var(--navy-500); } .ck .ck-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; background: var(--surface); margin-top: 1px; } .ck.on .ck-box { background: var(--navy-900); border-color: var(--navy-900); color: #fff; } .ck .ck-why { grid-column: 2; font-size: .833rem; color: var(--text-2); } .ck.right { border-color: var(--ok); background: var(--ok-bg); } .ck.miss { border-color: var(--bad); background: var(--bad-bg); } .ck:disabled { cursor: default; } .numtask { display: flex; flex-direction: column; gap: 6px; } .numtask label { font-weight: 600; } .numtask .input-unit input { min-width: 0; } .numtask .row > input { max-width: 220px; } .numtasks { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; } .cbc { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; } .cbc-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .cbc-title { display: flex; align-items: center; gap: 8px; font-weight: 700; } .cbc-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .833rem; color: var(--text-2); } .cbc table { width: 100%; border-collapse: collapse; font-size: .9rem; } .cbc th { text-align: left; font-size: .767rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); padding: 7px 14px; border-bottom: 1px solid var(--border-soft); } .cbc td { padding: 7px 14px; border-bottom: 1px solid var(--border-soft); } .cbc tr:last-child td { border-bottom: 0; } .cbc .c-k { font-weight: 600; } .cbc .c-v { font-family: var(--mono); font-weight: 600; white-space: nowrap; } .cbc .c-u, .cbc .c-r, .cbc .c-p { color: var(--text-2); white-space: nowrap; font-size: .867rem; } .cbc .c-p { font-family: var(--mono); } .cbc .c-f { display: inline-block; margin-left: 8px; font-size: .7rem; font-weight: 800; padding: 1px 6px; border-radius: 6px; } .cbc .c-f.H { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-border); } .cbc .c-f.L { background: var(--info-bg); color: var(--info); border: 1px solid var(--info-border); } .cbc tr.c-flagged .c-v { color: var(--text); } .cbc-flags { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--warn-bg); color: var(--warn-ink); border-top: 1px solid var(--warn-border); font-size: .833rem; font-weight: 600; } @container (max-width: 560px) { .cbc td, .cbc th { padding: 6px 8px; } .cbc .c-r { display: none; } } .sim-result { border-radius: var(--radius-card); border: 1px solid var(--border); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; } .sim-result.ok { background: var(--ok-bg); border-color: var(--ok-border); } .sim-result.warn { background: var(--warn-bg); border-color: var(--warn-border); } .sim-result .sr-top { display: flex; gap: 16px; align-items: center; } .sim-result .sr-score { flex: none; width: 86px; height: 86px; border-radius: 50%; background: var(--surface); border: 3px solid currentColor; display: flex; align-items: baseline; justify-content: center; padding-top: 22px; } .sim-result.ok .sr-score { color: var(--ok); } .sim-result.warn .sr-score { color: var(--warn); } .sim-result .sr-n { font-size: 1.9rem; font-weight: 800; font-family: var(--font-display); } .sim-result .sr-d { font-size: .8rem; font-weight: 700; } .sim-result h3 { margin: 0 0 4px; } .sim-result p { margin: 0; } .sim-result .sr-sec ul { margin: 6px 0 0; padding-left: 1.2em; } .sim-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; } @container (max-width: 820px) { .sim-grid { grid-template-columns: 1fr; } } .sim-figure { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 12px; } .sim-figure svg { display: block; width: 100%; height: auto; } .sim-figure figcaption, .sim-figure .cap { font-size: .833rem; color: var(--text-3); margin-top: 6px; } .bench { background: radial-gradient(120% 90% at 50% 0%, #f8fafc 0%, #e6ebf1 70%, #dbe2ea 100%); border: 1px solid #c8d2dd; border-radius: 16px; padding: 12px; box-shadow: inset 0 1px 0 #fff; } [data-theme='dark'] .bench { background: radial-gradient(120% 90% at 50% 0%, #1b3048 0%, #132538 70%, #0f1f30 100%); border-color: #26405c; box-shadow: none; } .sim-panel { display: flex; flex-direction: column; gap: 14px; } .sim-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; } .sim-card > h4 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .sim-meta { display: flex; flex-wrap: wrap; gap: 8px; } .case-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--gold-500); border-radius: var(--radius-card); padding: 12px 16px; } .case-card h4 { margin: 0 0 4px; font-size: 1rem; } .case-card p { margin: 0; color: var(--text-2); line-height: 1.55; } .seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; flex-wrap: wrap; } .seg button { border: 0; background: var(--surface); color: var(--text-2); font: 600 .867rem var(--font); padding: 8px 12px; cursor: pointer; border-right: 1px solid var(--border); } .seg button:last-child { border-right: 0; } .seg button.on { background: var(--navy-900); color: #fff; } [data-theme='dark'] .seg button.on { background: var(--gold-500); color: #0b1a2b; } .seg button:disabled { cursor: default; opacity: .75; } .slider-row { display: grid; grid-template-columns: max-content 1fr max-content; gap: 10px; align-items: center; } .slider-row input[type='range'] { width: 100%; accent-color: var(--navy-900); } .slider-row .val { font-family: var(--mono); font-weight: 700; min-width: 72px; text-align: right; } .svg-btn { cursor: pointer; } .svg-btn:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; } .hotspot { cursor: pointer; transition: opacity .15s; } .hotspot:hover { opacity: .85; } .flow-bar { display: flex; flex-wrap: wrap; gap: 6px; } .fl-step { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 5px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-3); font-size: .8rem; font-weight: 600; } .fl-step .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); font-size: .75rem; } .fl-step.cur { border-color: var(--navy-900); color: var(--navy-900); } .fl-step.cur .n { background: var(--navy-900); color: #fff; } .fl-step.done { color: var(--ok); border-color: var(--ok-border); background: var(--ok-bg); } .fl-step.done .n { background: var(--ok); color: #fff; } [data-theme='dark'] .fl-step.cur { border-color: var(--gold-500); color: var(--gold-300); } [data-theme='dark'] .fl-step.cur .n { background: var(--gold-500); color: #0b1a2b; } .flow { display: flex; flex-direction: column; gap: 18px; } .flow-stage { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px 18px; box-shadow: var(--shadow-sm); scroll-margin-top: 84px; } .flow-body { display: flex; flex-direction: column; gap: 14px; } .flow-nav { padding-top: 10px; border-top: 1px solid var(--border-soft); } @container (max-width: 560px) { .flow-stage { padding: 14px 12px; } .fl-step .t { display: none; } .fl-step { padding: 0 5px; } } .od-table { display: flex; flex-direction: column; gap: 6px; } .od-m { font-size: .767rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-top: 6px; } .od-row { display: grid; grid-template-columns: 70px auto 1fr; gap: 6px 12px; align-items: center; padding: 6px 10px; border-radius: var(--radius); border: 1px solid transparent; } .od-row.right { border-color: var(--ok-border); background: var(--ok-bg); } .od-row.miss { border-color: var(--bad-border); background: var(--bad-bg); } .od-k { font-weight: 700; font-family: var(--mono); } .od-why { font-size: .833rem; color: var(--text-2); } @container (max-width: 560px) { .od-row { grid-template-columns: 60px 1fr; } .od-why { grid-column: 1 / -1; } } .seq-pool { display: flex; flex-direction: column; gap: 8px; } .seq-btn { justify-content: flex-start; text-align: left; white-space: normal; height: auto; min-height: 40px; padding: 8px 12px; line-height: 1.35; } .seq-done { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; } .seq-done li::marker { color: var(--ok); font-weight: 700; } .seq-clock { max-width: 320px; } .shake { animation: shake .45s; border-color: var(--bad) !important; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .shake { animation: none; } } .tube-chip { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tube-chip .cap { width: 18px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0, 0, 0, .25); } .fill-w .btn-row { gap: 6px; } .spectro-lcd { min-height: 150px; } .instrument .sim-grid { align-items: stretch; } .instrument .seg button { padding: 7px 10px; } .rotor-spin { animation: rotorSpin .25s linear infinite; } @keyframes rotorSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .rotor-spin { animation-duration: 2s; } } .stack > .seg, .sim-card > .seg { align-self: flex-start; max-width: 100%; } .scope-wrap { max-width: 440px; width: 100%; margin: 0 auto; } .scope-wrap svg { display: block; width: 100%; height: auto; border-radius: 50%; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); } .step-banner .btn { white-space: normal; text-align: left; max-width: 100%; height: auto; min-height: 32px; padding-top: 6px; padding-bottom: 6px; line-height: 1.3; } .step-banner .sb-t { min-width: 0; } /* ---------- gerçekçi sanal mikroskop (WebGL2) ---------- */ .scope { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 520px; margin: 0 auto; } .scope-eye { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #05070a; box-shadow: 0 0 0 10px #10151d, 0 0 0 12px #2a3340, 0 18px 40px rgba(2, 6, 12, .45); overflow: hidden; touch-action: none; } .scope-canvas { display: block; width: 100%; height: 100%; border-radius: 50%; cursor: grab; outline: none; } .scope-canvas.dragging { cursor: grabbing; } .scope-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--gold-500); } .scope-scale { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; } .scope-scale i { display: block; height: 4px; background: #0b1220; border-radius: 1px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75); } .scope-scale span { font: 700 11px/1 var(--font); color: #0b1220; background: rgba(255, 255, 255, .78); padding: 2px 6px; border-radius: 4px; } .scope-badge { position: absolute; top: 9%; left: 50%; transform: translateX(-50%); font: 700 11.5px/1 var(--font); letter-spacing: .02em; color: #0b1220; background: rgba(255, 255, 255, .78); padding: 3px 8px; border-radius: 999px; pointer-events: none; } .scope-msg { position: absolute; left: 12%; right: 12%; top: 40%; padding: 10px 12px; border-radius: 10px; background: rgba(10, 25, 41, .82); color: #f8fafc; font: 600 12.5px/1.45 var(--font); text-align: center; pointer-events: none; } .scope-msg[hidden] { display: none; } .scope-ctrl { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: center; } .scope-turret { display: flex; gap: 8px; flex-wrap: wrap; } .scope-objbtn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 72px; padding: 7px 10px 9px; border-radius: 10px; border: 1px solid #3b4654; cursor: pointer; color: #e2e8f0; background: linear-gradient(180deg, #4b5563 0%, #1f2937 55%, #111827 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 4px rgba(0, 0, 0, .25); font-family: var(--font); } .scope-objbtn::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px; border-radius: 2px; background: var(--ring); } .scope-objbtn b { font: 800 14px/1.1 var(--font-display); } .scope-objbtn small { font-size: 10.5px; opacity: .8; margin-top: 2px; } .scope-objbtn.on { outline: 3px solid var(--gold-500); outline-offset: 1px; color: #fff; } .scope-objbtn:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 2px; } .scope-oil { white-space: nowrap; } .scope-knob { grid-column: 1 / -1; display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 10px; } .scope-k-l { display: inline-flex; align-items: center; gap: 6px; font: 600 .84rem var(--font); color: var(--text-2); } .scope-k-r { display: flex; align-items: center; gap: 6px; } .scope-k-r input[type='range'] { flex: 1; min-width: 0; accent-color: var(--navy-900); } [data-theme='dark'] .scope-k-r input[type='range'] { accent-color: var(--gold-500); } .scope-step { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: 700 16px/1 var(--font); cursor: pointer; } .scope-step:hover { background: var(--hover); } .scope-map { background: radial-gradient(120% 120% at 50% 0%, #2b3644 0%, #151c25 80%); border-radius: 12px; padding: 10px; } .scope-slide { display: block; width: 100%; cursor: crosshair; } .scope-help { margin: 0; font-size: .8rem; color: var(--text-3); } .micrograph { display: block; width: 100%; height: auto; } .micrograph.round { border-radius: 50%; box-shadow: 0 0 0 6px #10151d, 0 0 0 7px #2a3340, 0 10px 24px rgba(2, 6, 12, .35); } @media (max-width: 520px) { .scope-ctrl { grid-template-columns: 1fr; } .scope-knob { grid-template-columns: 92px 1fr; } .scope-objbtn { min-width: 64px; } } /* ---------- 3B laboratuvar sahneleri ---------- */ .lab3d { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: #c9d2db; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08), 0 10px 28px -14px rgba(10, 25, 41, .45); } .lab3d-canvas { display: block; width: 100%; } .lab3d-hint { position: absolute; left: 12px; bottom: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(10, 25, 41, .62); color: #e2e8f0; font: 600 11.5px/1.3 var(--font); pointer-events: none; } .lab3d-tag { position: absolute; top: 10px; left: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .82); color: #0f172a; font: 700 12px/1.3 var(--font); pointer-events: none; } .lab3d-status { position: absolute; top: 10px; right: 12px; padding: 5px 10px; border-radius: 10px; background: rgba(10, 25, 41, .72); color: #f8fafc; font: 600 12px/1.35 var(--font); max-width: 60%; pointer-events: none; } .lab3d-status:empty { display: none; } .aperture3d { display: flex; flex-direction: column; gap: 10px; } .osc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .osc-fig { margin: 0; background: #0b1220; border-radius: 12px; padding: 8px; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .18), 0 6px 18px -10px rgba(2, 6, 12, .6); } .osc-fig canvas { display: block; width: 100%; height: auto; border-radius: 8px; } .osc-fig figcaption { margin-top: 6px; font: 600 11.5px/1.3 var(--font); color: #cbd5e1; } @media (max-width: 640px) { .osc-row { grid-template-columns: 1fr; } } @media (max-width: 560px) { .lab3d-hint { display: none; } .lab3d-tag, .lab3d-status { font-size: 11px; padding: 3px 8px; } } /* ders şekilleri: gerçekçi mikrofotoğraflar */ .cell-figure { display: flex; flex-direction: column; gap: 14px; align-items: center; } .cell-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; width: 100%; } .cell-card { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .cell-card canvas { border-radius: 10px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .12); } .cell-card b { font-size: .8rem; } .cell-card small { font-size: .72rem; color: var(--text-3); line-height: 1.3; } .cell-pair { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; font-size: .85rem; } .cell-pair canvas { border-radius: 10px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .12); } .scalebar { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: 700 11px var(--font); } .scalebar i { display: block; height: 4px; background: var(--text); border-radius: 1px; } .film-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; } .film-card { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 230px; max-width: 100%; text-align: center; } .film-card canvas { width: 220px; max-width: 100%; margin-bottom: 8px; } .film-card b { font-size: .86rem; } .film-card small { font-size: .76rem; color: var(--text-3); } .film-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: center; } @media (max-width: 720px) { .cell-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .film-split { grid-template-columns: 1fr; } }