/* HMC Competition Results — public + admin stylesheet Trust-first institutional utility. One locked accent (institutional blue), system font stack (reliable on shared hosting, no external font links), light default + dark via [data-theme="dark"] toggle. No em-dashes anywhere. */ :root { /* Light theme only (locked). Brand colors from the HMC logo: blue = primary UI accent, green = correct, red = wrong. */ --bg: #f5f8fc; --surface: #ffffff; --surface-2: #eef2f8; --border: #e1e7f0; --text: #182230; --text-soft: #5a6677; --text-faint: #8b95a5; --accent: #2563b0; /* HMC blue */ --accent-strong: #1c4d8c; --accent-soft: #e8f1fb; --brand-red: #d23b2e; --brand-green: #2e9b43; --brand-blue: #2563b0; --danger: #c0382b; --danger-soft: #fdecea; --ok: #2e9b43; --correct: #237a36; --correct-soft: #e7f6ea; --wrong: #c0382b; --wrong-soft: #fdecea; --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(24, 34, 48, .04), 0 14px 34px rgba(24, 34, 48, .07); --maxw: 760px; } /* Dark theme (only when ). Default is light. */ html[data-theme="dark"] { --bg: #0e1117; --surface: #161b23; --surface-2: #1d2530; --border: #2a323e; --text: #eef1f6; --text-soft: #aab2c0; --text-faint: #79828f; --accent: #5b8fd4; --accent-strong: #7aa6e0; --accent-soft: #18283d; --danger: #e06054; --danger-soft: #2a1816; --ok: #4caf63; --correct: #5cc274; --correct-soft: #16271a; --wrong: #e06054; --wrong-soft: #2a1816; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .42); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html, body { max-width: 100%; overflow-x: hidden; } /* mobilde sağa-sola kaymayı engelle */ body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } /* ---- Header ---- */ .site-header { border-bottom: 1px solid var(--border); background: var(--surface); box-shadow: 0 1px 0 rgba(24, 34, 48, .02); } .site-header::before, .admin-header::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--brand-red) 0 33.33%, var(--brand-green) 33.33% 66.66%, var(--brand-blue) 66.66% 100%); } .header-inner { display: flex; align-items: center; height: 66px; } .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); } .brand-logo { height: 34px; width: auto; display: block; } .brand-mark { font-weight: 700; letter-spacing: -0.02em; font-size: 15px; color: #fff; background: var(--accent); padding: 6px 9px; border-radius: 8px; } .brand-text { font-weight: 600; letter-spacing: -0.01em; font-size: 15px; color: var(--text-soft); } @media (max-width: 480px) { .brand-text { display: none; } } .site-header .header-inner { justify-content: space-between; } .header-right { display: flex; align-items: center; gap: 12px; } /* Theme toggle */ .theme-toggle { background: transparent; border: 1px solid var(--border); border-radius: 9px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-soft); cursor: pointer; transition: color .15s ease, background-color .15s ease, border-color .15s ease; } .theme-toggle:hover { color: var(--text); background: var(--surface-2); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: inline; } /* ---- Main / lookup ---- */ .main { padding: 44px 20px 64px; } .lookup-intro { margin-bottom: 22px; } .lookup-intro h1 { margin: 0 0 8px; font-size: clamp(28px, 5vw, 38px); letter-spacing: -0.025em; line-height: 1.08; } .lead { margin: 0; color: var(--text-soft); max-width: 52ch; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .form { padding: 22px; display: grid; gap: 18px; } .field { display: grid; gap: 7px; align-content: start; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } } label { font-size: 13.5px; font-weight: 600; color: var(--text); } .hint { font-size: 12.5px; color: var(--text-faint); } input, select { width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; transition: border-color .15s ease, box-shadow .15s ease; } input::placeholder { color: var(--text-faint); } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 12px 18px; cursor: pointer; transition: transform .06s ease, background-color .15s ease, border-color .15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-strong); } .btn-primary:disabled { opacity: .7; cursor: progress; } .btn-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; display: none; } .btn.is-loading .btn-spinner { display: inline-block; animation: spin .7s linear infinite; } .btn.is-loading .btn-label { opacity: .85; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn.is-loading .btn-spinner { animation: none; } } /* ---- Messages ---- */ .notice { display: grid; gap: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; } .notice-empty strong { font-size: 16px; } .notice-empty span { color: var(--text-soft); } .form-error { margin: 0; padding: 11px 13px; background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; } .form-error .error-contact { display: inline-block; margin-top: 6px; font-weight: 400; color: var(--text-soft); } .form-error .error-contact a { color: var(--accent); font-weight: 600; text-decoration: none; } .form-error .error-contact a:hover { text-decoration: underline; } /* ---- Result ---- */ .result-wrap { margin-top: 20px; display: grid; gap: 18px; } .result-summary, .result-breakdown { padding: 24px; } @media (prefers-reduced-motion: no-preference) { .result-wrap.show .result-summary { animation: rise .35s cubic-bezier(.16, 1, .3, 1); } .result-wrap.show .result-breakdown { animation: rise .45s cubic-bezier(.16, 1, .3, 1); } } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .result-name { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.02em; } .result-meta { margin: 0; color: var(--text-soft); font-size: 14px; } /* Big score + rank boxes */ .result-headline { display: flex; gap: 14px; margin-top: 20px; flex-wrap: wrap; } .hl-box { flex: 1 1 150px; border-radius: var(--radius-sm); padding: 16px 18px; } .hl-score { background: var(--accent-soft); } .hl-rank, .hl-school { background: var(--surface-2); } .hl-value { display: flex; align-items: baseline; gap: 4px; font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--accent-strong); } .hl-rank .hl-value, .hl-school .hl-value { color: var(--text); } .hl-max { font-size: 17px; font-weight: 700; color: var(--text-soft); } .hl-label { margin-top: 7px; font-size: 13px; color: var(--text-soft); font-weight: 600; } .hl-sub { color: var(--text-faint); font-weight: 500; } /* Three ranking boxes (grade / overall / school) */ .rank-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; } .rank-boxes .hl-box { padding: 15px 16px; } .rank-boxes .hl-value { font-size: 30px; } .result-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; margin: 20px 0 0; padding: 0; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .result-stats .stat { background: var(--surface); padding: 13px 15px; margin: 0; } .result-stats dt { font-size: 12px; color: var(--text-faint); margin: 0 0 3px; text-transform: uppercase; letter-spacing: .04em; } .result-stats dd { margin: 0; font-weight: 700; font-size: 15px; } .answers { margin-top: 0; } .answers-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .answers-head h3 { margin: 0; font-size: 14px; color: var(--text-soft); font-weight: 600; } .answers-score { font-size: 13px; font-weight: 600; color: var(--brand-green); } .answers-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-soft); } .answers-legend span { display: inline-flex; align-items: center; gap: 5px; } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .dot-correct { background: var(--correct); } .dot-wrong { background: var(--wrong); } .answers-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; } @media (max-width: 560px) { .answers-grid { grid-template-columns: repeat(5, 1fr); } } .answer-cell { display: grid; gap: 2px; justify-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 4px; } .answer-cell.is-correct { background: var(--correct-soft); border-color: color-mix(in srgb, var(--correct) 30%, transparent); } .answer-cell.is-wrong { background: var(--wrong-soft); border-color: color-mix(in srgb, var(--wrong) 30%, transparent); } .answer-q { font-size: 10.5px; color: var(--text-faint); } .answer-a { font-weight: 700; font-size: 15px; } .answer-cell.is-correct .answer-a { color: var(--correct); } .answer-cell.is-wrong .answer-a { color: var(--wrong); } .answer-correct { font-size: 10.5px; color: var(--correct); font-weight: 600; } .answer-correct .lbl { color: var(--text-faint); font-weight: 500; } /* ---- Footer ---- */ .site-footer { border-top: 1px solid var(--border); padding: 22px 0; margin-top: 40px; } .site-footer p { margin: 0; color: var(--text-faint); font-size: 13px; } /* ============ ADMIN ============ */ .admin-body { background: var(--bg); } .admin-header { border-bottom: 1px solid var(--border); background: var(--surface); } .admin-header .header-inner { justify-content: space-between; } .admin-nav { display: flex; align-items: center; gap: 18px; } .admin-nav a { color: var(--text-soft); text-decoration: none; font-size: 14px; font-weight: 500; } .admin-nav a:hover, .admin-nav a.active { color: var(--text); } .admin-user { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--text-soft); } .admin-main { max-width: 1080px; margin: 0 auto; padding: 32px 20px 64px; } .admin-main.narrow { max-width: 460px; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .page-head h1 { margin: 0; font-size: 24px; letter-spacing: -0.02em; } .btn-sm { padding: 8px 13px; font-size: 13.5px; } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--surface-2); } .btn-danger { background: var(--danger); color: #fff; } .btn-ghost { background: transparent; color: var(--text-soft); } .btn-ghost:hover { color: var(--text); } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .panel-pad { padding: 22px; } table.data { width: 100%; border-collapse: collapse; font-size: 14px; } table.data th, table.data td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); } table.data th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 600; } table.data tr:last-child td { border-bottom: none; } table.data .row-actions { display: flex; gap: 8px; justify-content: flex-end; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; } .badge-on { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); } .badge-off { background: var(--surface-2); color: var(--text-faint); } .flash { padding: 12px 15px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 14px; font-weight: 500; } .flash-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); } .flash-err { background: var(--danger-soft); color: var(--danger); } .form-grid { display: grid; gap: 16px; } .form-grid .field-row { grid-template-columns: 1fr 1fr; } .q-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } @media (max-width: 700px) { .q-grid { grid-template-columns: repeat(2, 1fr); } } .toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 18px; } .toolbar .field { gap: 5px; } .toolbar input, .toolbar select { padding: 9px 11px; } .muted { color: var(--text-faint); } .pagination { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 20px; } .checkbox-cell { width: 34px; text-align: center; } .stack { display: grid; gap: 14px; } .help-list { color: var(--text-soft); font-size: 14px; padding-left: 18px; } .help-list li { margin-bottom: 6px; } a.link { color: var(--accent); text-decoration: none; font-weight: 500; } a.link:hover { text-decoration: underline; } /* Topics to review (student result) */ .topics-review { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); } .topics-review h4 { margin: 0 0 4px; font-size: 15px; letter-spacing: -0.01em; } .topics-note { margin: 0 0 12px; color: var(--text-soft); font-size: 13.5px; } .topics-chips { display: flex; flex-wrap: wrap; gap: 8px; } .topic-chip { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 999px; padding: 6px 13px; font-size: 13.5px; font-weight: 600; } /* Admin tables + header on mobile */ @media (max-width: 600px) { .col-hide-sm { display: none; } table.data th, table.data td { padding: 9px 9px; } .admin-main { padding-left: 14px; padding-right: 14px; } .toolbar { gap: 8px; } .toolbar .field { width: 100%; } .toolbar .field input, .toolbar .field select { width: 100%; } .page-head h1 { font-size: 21px; } /* Admin header: tek satıra sığmıyorsa düzgünce alta sar, kayma olmasın */ .admin-header .header-inner { height: auto; flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; } .admin-header .header-inner > div:first-child { gap: 16px; flex-wrap: wrap; } .admin-nav { gap: 14px; } .admin-user span { display: none; } /* kullanıcı adını gizle, yer açılsın */ }