/* Generated by every build from the source files (WebUI.csproj AkademiCssBundles), do not edit */
/* TSE Akademi fonts, self-hosted from wwwroot/fonts (see fonts/README.md) */
/* Poppins 600: headings */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../../fonts/poppins/poppins-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;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../../fonts/poppins/poppins-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;
}
/* Inter 400 / 500 / 600: body text and UI */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../../fonts/inter/inter-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: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../../fonts/inter/inter-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: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../../fonts/inter/inter-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: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../../fonts/inter/inter-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: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../../fonts/inter/inter-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;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../../fonts/inter/inter-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;
}
/*
TSE Akademi design tokens, taken from the style guide (Stil Rehberi).
Everything is prefixed with --ak- / .ak- so it never collides with the library classes (Bootstrap JS, DataTables, select2).
Load order: fonts.css, tokens.css, components.css, shell.css, motion.css (motion last so reduced motion wins).
*/
:root {
/* Navy page band (site page head and Yönetim head): at least this high, the content in its middle; more content
makes it grow. The size follows the screen tier through --ak-d */
--ak-band-min: calc(360px * var(--ak-d));
--ak-band-pad: calc(64px * var(--ak-d));
/* Colors */
--ak-navy-900: #002147;          /* hero, footer, headings, navy button */
--ak-navy-800: #0B2F5E;          /* surfaces on dark, navy button hover */
--ak-blue: #1D5FB4;              /* Akademi Mavisi: links, focus ring, top label */
--ak-blue-50: #EDF2F9;           /* icon backgrounds, light highlight */
--ak-red-600: #C8102E;           /* primary action, errors; at most one red button per view */
--ak-red-700: #A50D26;           /* red button hover */
--ak-gray-light: #F4F6F9;        /* section background, info boxes */
--ak-line: #E3E8F0;              /* card borders, dividers */
--ak-form-border: #7F8CA4;       /* input borders */
--ak-text-900: #14233B;          /* titles, form labels */
--ak-text-700: #3E4C66;          /* body text */
--ak-text-500: #5F6C84;          /* helper text */
--ak-white: #FFFFFF;
/* Status colors for notifications. Not in the style guide palette; chosen to sit next to it with readable contrast. */
--ak-success: #13795B;
--ak-success-50: #E7F4EF;
--ak-warning: #A15C00;
--ak-warning-50: #FDF3E3;
--ak-error-50: #FBE9EC;
/* Typography */
--ak-font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
--ak-font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
/*
Type scale. These are the desktop (XL) values; the tier blocks under :root change them per screen size.
Form fields use --ak-fs-input, which is 16 px on touch screens so iOS does not zoom in.
*/
--ak-fs-display: 36px;  --ak-lh-display: 1.2;
--ak-fs-h1: 28px;       --ak-lh-h1: 1.25;
--ak-fs-h2: 22px;       --ak-lh-h2: 1.3;
--ak-fs-h3: 18px;       --ak-lh-h3: 1.35;
--ak-fs-h4: 16px;       --ak-lh-h4: 1.4;
--ak-fs-h5: 14px;       --ak-lh-h5: 1.5;
--ak-fs-lead: 15px;     --ak-lh-lead: 1.6;
--ak-fs-md: 15px;       /* emphasised text: values, prices, card titles */
--ak-fs-body: 14px;     --ak-lh-body: 1.65;
--ak-fs-ui: 13px;       /* buttons, menus, table cells */
--ak-fs-label: 12.5px;
--ak-fs-xs: 11.5px;
--ak-fs-eyebrow: 11px;  --ak-ls-eyebrow: 0.08em;
--ak-fs-input: 14px;
/*
Spacing (8 px grid). --ak-d is the spacing density of the tier: large gaps and paddings are written as
calc(Npx * var(--ak-d)) or use the steps below, so one number per tier tightens the whole layout.
*/
--ak-d: 0.86;
--ak-space-1: 8px;
--ak-space-1-5: 12px;
--ak-space-2: 16px;
--ak-space-3: calc(24px * var(--ak-d));
--ak-space-4: calc(32px * var(--ak-d));
--ak-space-6: calc(40px * var(--ak-d));
--ak-space-8: calc(56px * var(--ak-d));
--ak-space-12: calc(64px * var(--ak-d));    /* section spacing */
/* Radii */
--ak-radius-button: 8px;
--ak-radius-field: 8px;
--ak-radius-card: 10px;
--ak-radius-panel: 12px;
--ak-radius-modal: 14px;
--ak-radius-pill: 999px;
/* Shadows */
--ak-shadow-card: 0 1px 2px rgba(0, 33, 71, 0.05);
--ak-shadow-card-hover: 0 18px 36px rgba(0, 33, 71, 0.14);
--ak-shadow-popover: 0 12px 32px rgba(0, 33, 71, 0.16);
/* Motion: every animation uses these, so the whole site moves the same way (see motion.css) */
--ak-ease-standard: cubic-bezier(0.2, 0, 0, 1);     /* most state changes */
--ak-ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* things entering the screen */
--ak-ease-in: cubic-bezier(0.4, 0, 1, 1);           /* things leaving the screen */
--ak-duration-fast: 150ms;                          /* hover, press, color */
--ak-duration-base: 220ms;                          /* small panels, icons, underline */
--ak-duration-slow: 320ms;                          /* menus, drawers, modals */
--ak-duration-slide: 450ms;                         /* slider change (style guide: 0.45 s) */
--ak-transition-hover: var(--ak-duration-fast) var(--ak-ease-standard);
--ak-transition-slide: var(--ak-duration-slide) var(--ak-ease-standard);
/* Layout */
--ak-container: 1200px;
--ak-gutter: 24px;
--ak-header-height: 56px;
--ak-header-height-mobile: var(--ak-header-height);
/* The logo's fine lines need some height to stay sharp on 1x screens (images/logo/README.md) */
--ak-logo-height: 36px;
/* Controls */
--ak-control-lg: 40px;   /* hero and form buttons, form fields */
--ak-control-md: 36px;   /* section buttons */
--ak-control-sm: 32px;   /* top menu and card buttons, filter chips */
--ak-focus-ring: 0 0 0 3px var(--ak-blue);
}
/*
Screen tiers. Each one sets its own type, spacing density, control sizes and header:
XL desktop >= 1200 (the :root values above), LG small laptop 992-1199, MD tablet 768-991,
SM large phone 576-767, XS phone < 576. Touch tiers keep controls at least 34 px high.
*/
@media (max-width: 1199.98px) {
:root {
--ak-logo-height: 32px;
--ak-d: 0.82;
--ak-fs-display: 34px;
--ak-fs-h1: 27px;
--ak-fs-h2: 21px;
}
}
@media (max-width: 991.98px) {
:root {
--ak-d: 0.78;
--ak-fs-display: 30px;
--ak-fs-h1: 25px;
--ak-fs-h2: 20px;
--ak-fs-h3: 17px;
--ak-fs-h4: 15.5px;
--ak-fs-lead: 14.5px;
--ak-fs-md: 14.5px;
--ak-fs-input: 16px;
--ak-header-height: 54px;
--ak-logo-height: 32px;
--ak-control-sm: 34px;
}
}
@media (max-width: 767.98px) {
:root {
--ak-d: 0.74;
--ak-fs-display: 28px;
--ak-fs-h1: 23px;
--ak-fs-h2: 19px;
--ak-fs-h3: 16.5px;
--ak-fs-h4: 15px;
--ak-fs-lead: 14px;
--ak-fs-md: 14px;
--ak-fs-body: 13.5px;
--ak-fs-label: 12px;
--ak-fs-xs: 11px;
--ak-fs-eyebrow: 10.5px;
--ak-gutter: 20px;
--ak-header-height: 52px;
--ak-logo-height: 30px;
--ak-control-lg: 42px;
--ak-control-md: 38px;
}
}
@media (max-width: 575.98px) {
:root {
--ak-d: 0.68;
--ak-fs-display: 25px;
--ak-fs-h1: 22px;
--ak-fs-h2: 18px;
--ak-fs-h3: 16px;
--ak-fs-h5: 13.5px;
--ak-gutter: 16px;
}
}
/* Inline SVG icons from the sprite (Views/Shared/_IconSprite.cshtml): <svg class="bi"><use href="#bi-search"/></svg> */
.bi {
display: inline-block;
width: 1em;
height: 1em;
fill: currentColor;
vertical-align: -0.125em;
flex-shrink: 0;
}
.bi-16 { width: 16px; height: 16px; }
.bi-20 { width: 20px; height: 20px; }
.bi-24 { width: 24px; height: 24px; }
/* Content container from the grid: 1200 px wide, 24 px gutters */
.ak-container {
width: 100%;
max-width: calc(var(--ak-container) + 2 * var(--ak-gutter));
margin-right: auto;
margin-left: auto;
padding-right: var(--ak-gutter);
padding-left: var(--ak-gutter);
}
.ak-logo {
display: block;
height: var(--ak-logo-height);
width: auto;
}
/* TSE Akademi shared components (style guide: Butonlar). Uses the variables from tokens.css. */
/*
Cursor: the arrow everywhere (no text cursor over plain text); typing fields show the text cursor. Links keep the
browser's hand, and every rule that sets its own cursor (pointer, not-allowed, grab...) still wins. All three layouts load it.
*/
html, body { cursor: default; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]),
textarea,
[contenteditable="true"],
[contenteditable=""] { cursor: text; }
.ak-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ak-space-1);
height: var(--ak-control-sm);
padding: 0 calc(20px * var(--ak-d));
border: 1.5px solid transparent;
border-radius: var(--ak-radius-button);
font-family: var(--ak-font-body);
font-size: var(--ak-fs-ui);
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: background-color var(--ak-transition-hover), border-color var(--ak-transition-hover), color var(--ak-transition-hover),
box-shadow var(--ak-transition-hover), transform var(--ak-duration-fast) var(--ak-ease-standard);
}
.ak-btn:hover,
.ak-btn:focus {
text-decoration: none;
}
.ak-btn:active {
transform: scale(0.97);
}
.ak-btn .bi {
transition: transform var(--ak-duration-base) var(--ak-ease-standard);
}
/* A trailing arrow icon nudges forward on hover ("Satın Al →", "İncele →") */
.ak-btn:hover .bi-arrow-right-trail {
transform: translateX(3px);
}
.ak-btn:focus {
outline: none;
}
.ak-btn:focus-visible {
outline: 3px solid var(--ak-blue);
outline-offset: 2px;
}
.ak-btn-md { height: var(--ak-control-md); padding: 0 calc(24px * var(--ak-d)); }
.ak-btn-lg { height: var(--ak-control-lg); padding: 0 calc(28px * var(--ak-d)); }
.ak-btn-block { display: flex; width: 100%; }
/* Primary action: red, at most once per view */
.ak-btn-primary { background: var(--ak-red-600); border-color: var(--ak-red-600); color: var(--ak-white); }
.ak-btn-primary:hover { background: var(--ak-red-700); border-color: var(--ak-red-700); color: var(--ak-white); }
/* Navy */
.ak-btn-navy { background: var(--ak-navy-900); border-color: var(--ak-navy-900); color: var(--ak-white); }
.ak-btn-navy:hover { background: var(--ak-navy-800); border-color: var(--ak-navy-800); color: var(--ak-white); }
/* Outline: navy border, fills navy on hover */
.ak-btn-outline { background: var(--ak-white); border-color: var(--ak-navy-900); color: var(--ak-navy-900); }
.ak-btn-outline:hover { background: var(--ak-navy-900); color: var(--ak-white); }
/* Outline on dark surfaces */
.ak-btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: var(--ak-white); }
.ak-btn-outline-light:hover { background: var(--ak-navy-800); border-color: var(--ak-white); color: var(--ak-white); }
.ak-on-dark .ak-btn:focus-visible { outline-color: var(--ak-white); }
/*
A locked button looks locked (e.g. Sınavı Bitir / Anketi Gönder until the rules are met, Excel without data).
A busy button is disabled too but keeps its colour: its spinner says it is working (forms.css .is-busy).
*/
.ak-btn:disabled:not(.is-busy),
.ak-btn.disabled:not(.is-busy) { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
/* Text link: blue, red on hover */
.ak-link { color: var(--ak-blue); font-weight: 600; text-decoration: none; transition: color var(--ak-transition-hover); }
.ak-link:hover { color: var(--ak-red-600); text-decoration: none; }
/* Round icon button (social links, drawer close) */
.ak-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1.5px solid var(--ak-line);
border-radius: 50%;
background: transparent;
color: var(--ak-text-900);
transition: background-color var(--ak-transition-hover), border-color var(--ak-transition-hover), color var(--ak-transition-hover),
transform var(--ak-duration-base) var(--ak-ease-standard);
}
.ak-icon-btn:hover { border-color: var(--ak-navy-900); color: var(--ak-navy-900); text-decoration: none; transform: translateY(-2px); }
.ak-icon-btn:active { transform: translateY(0) scale(0.95); }
.ak-on-dark .ak-icon-btn { border-color: rgba(255, 255, 255, 0.35); color: var(--ak-white); }
.ak-on-dark .ak-icon-btn:hover { border-color: var(--ak-white); background: var(--ak-navy-800); color: var(--ak-white); }
/* Screen-reader-only text */
.ak-visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Loading layer over an element or the page (AkademiUI.block) */
.ak-blocker-host { position: relative; }
.ak-blocker {
position: absolute;
inset: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
border-radius: inherit;
background: rgba(255, 255, 255, 0.72);
opacity: 0;
transition: opacity var(--ak-duration-base) var(--ak-ease-standard);
}
.ak-blocker.is-page { position: fixed; z-index: 2000; border-radius: 0; background: rgba(255, 255, 255, 0.6); }
.ak-blocker.is-on { opacity: 1; }
.ak-blocker-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--ak-line);
border-top-color: var(--ak-navy-900);
border-radius: 50%;
animation: ak-spin 0.7s linear infinite;
}
@keyframes ak-spin { to { transform: rotate(360deg); } }
/*
List states (ui.js AkademiUI.skeleton / AkademiUI.state / AkademiUI.loadList, main.js tables). A list that fills
after the page opens shows grey placeholders in its own shape while it loads, then its data, or one box that says
why there is nothing: nothing yet, nothing under the chosen filter, or it could not load (with Tekrar dene).
*/
.ak-skel {
display: block;
width: 100%;
height: 12px;
border-radius: 6px;
background: linear-gradient(90deg, #E3E8F0 0%, #F1F4F8 40%, #E3E8F0 80%);
background-size: 300% 100%;
animation: ak-shimmer 1.3s ease-in-out infinite;
}
@keyframes ak-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* Table rows (main.js renderTable): the bars vary in length so the rows read as text */
tr.ak-skel-row > td .ak-skel { width: 72%; }
tr.ak-skel-row:nth-child(3n+2) > td .ak-skel { width: 54%; }
tr.ak-skel-row:nth-child(3n) > td .ak-skel { width: 86%; }
tr.ak-skel-row > td.ak-col-fit .ak-skel { width: 64px; max-width: 100%; }
tr.ak-skel-row > td.ak-col-actions .ak-skel { width: 32px; height: 32px; margin-left: auto; border-radius: 8px; }
tr.ak-skel-row:hover > td { background: transparent !important; }
/* While the rows load the count and the pages under the table wait too ("Kayıt yok" would be wrong); with the
empty or error box in the table they have nothing to add */
.dataTables_wrapper:has(table[aria-busy="true"]) .ak-dt-foot { visibility: hidden; }
.dataTables_wrapper:has(td.dataTables_empty) .ak-dt-foot { display: none; }
/* List rows (orders, notifications, people): a round mark and two lines */
.ak-skel-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.ak-skel-item + .ak-skel-item { border-top: 1px solid var(--ak-line); }
.ak-skel-item > .ak-skel-dot { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; }
.ak-skel-item > span:last-child { display: grid; flex: 1 1 auto; gap: 8px; }
.ak-skel-item > span:last-child > .ak-skel:last-child { width: 40%; }
/* Cards (course grids): picture, title, two short lines */
.ak-skel-card {
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 18px;
overflow: hidden;
border: 1px solid var(--ak-line);
border-radius: var(--ak-radius-card);
background: var(--ak-white, #fff);
}
.ak-skel-card > .ak-skel { width: auto; margin: 0 16px; }
.ak-skel-card > .ak-skel-media { height: auto; margin: 0 0 6px; aspect-ratio: 16 / 9; border-radius: 0; }
.ak-skel-card > .ak-skel:nth-child(2) { height: 16px; }
.ak-skel-card > .ak-skel:nth-child(3) { margin-right: 30%; }
.ak-skel-card > .ak-skel:nth-child(4) { margin-right: 55%; }
/* Panels (question cards in the reports): a label, the question, three answer bars */
.ak-skel-panel { display: grid; gap: 12px; padding: calc(20px * var(--ak-d)); border: 1px solid var(--ak-line); border-radius: var(--ak-radius-card); background: var(--ak-white); }
.ak-skel-panel > .ak-skel:first-child { width: 90px; }
.ak-skel-panel > .ak-skel:nth-child(2) { width: 70%; height: 14px; margin-bottom: 6px; }
.ak-skel-panel > .ak-skel:nth-child(n+3) { height: 22px; }
.ak-skel-panel > .ak-skel:nth-child(4) { width: 80%; }
.ak-skel-panel > .ak-skel:nth-child(5) { width: 58%; }
/* Text lines and blocks (charts, summaries) */
.ak-skel-lines { display: grid; gap: 10px; padding: 8px 0; }
.ak-skel-lines > .ak-skel:nth-child(3n+2) { width: 82%; }
.ak-skel-lines > .ak-skel:nth-child(3n) { width: 64%; }
.ak-skel.ak-skel-block { height: 220px; border-radius: var(--ak-radius-card); }
/* Inline: a number in a stat tile or a count, a name inside a sentence; on the navy band in white */
.ak-skel.ak-skel-stat,
.ak-skel.ak-skel-name { display: inline-block; height: 0.8em; vertical-align: middle; }
.ak-skel.ak-skel-stat { width: 48px; }
.ak-skel.ak-skel-name { width: 160px; margin-right: 6px; }
.ak-on-dark .ak-skel { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.14) 80%); }
/* Empty, filtered and error boxes; in a grid the box takes the whole row. Long unbroken text (e.g. a quoted search)
wraps inside the box instead of widening the page. */
.ak-empty {
display: flex;
flex-direction: column;
grid-column: 1 / -1;
min-width: 0;
overflow-wrap: anywhere;
align-items: center;
gap: var(--ak-space-1-5, 12px);
padding: var(--ak-space-4) var(--ak-space-3);
color: var(--ak-text-500);
font-size: var(--ak-fs-label);
text-align: center;
}
.ak-empty-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--ak-blue-50);
color: var(--ak-navy-900);
}
.ak-empty-icon .bi { width: 24px; height: 24px; }
/* The list could not be loaded */
.ak-empty.is-error .ak-empty-icon { background: var(--ak-error-50); color: var(--ak-red-600); }
/* Good news: nothing left to do (e.g. no expired trainings) */
.ak-empty.is-good .ak-empty-icon { background: var(--ak-success-50); color: var(--ak-success); }
.ak-empty b { color: var(--ak-text-900); font-size: var(--ak-fs-ui); font-weight: 600; }
.ak-empty > .ak-btn { margin-top: 4px; }
/* Filtreleri temizle (ui.js AkademiUI.clearButton): as high as the filters next to it; below tablet it fills its row
(in the Eğitimler toolbar the last row, so the filter and Sırala keep theirs) */
.ak-filters-clear { height: var(--ak-control-lg); white-space: nowrap; }
@media (max-width: 767.98px) {
.ak-dt-head > .ak-filters-clear,
.ak-catalog-toolbar > .ak-filters-clear { flex: 1 1 100%; }
.ak-catalog-toolbar > .ak-filters-clear { order: 10; }
}
/* Below tablet Tekrar dene fills the row, like the other lone buttons */
@media (max-width: 767.98px) {
.ak-empty > .ak-btn { align-self: stretch; }
}
/* Below tablet: buttons side by side share the row equally (a long label wraps to its own row);
a lone action button fills the row */
@media (max-width: 767.98px) {
.modal-footer > .ak-btn,
.ak-form-actions > .ak-btn,
.ak-pay-foot > .ak-btn,
.ak-infobar-actions > .ak-btn,
.ak-hero-actions > .ak-btn,
.ak-quiz-nav > .ak-btn { flex: 1 1 0; }
.ak-quiz-nav-gap { display: none; }
.ak-catalog-head > .ak-btn,
.ak-catalog-more > .ak-btn,
.ak-cta-bar > .ak-btn,
.ak-learn-start-body > .ak-btn { flex: 1 1 100%; margin-left: 0; }
.ak-catalog-empty > .ak-btn { align-self: stretch; }
}
/*
TSE Akademi form controls (style guide: Form alanı).
Field: 44 px high, radius 10, label always above (Inter 600 14), 16 px text so phones do not zoom in.
States: focus = Akademi Mavisi border + ring, error = red border + message under the field.
<div class="ak-field">
<label class="ak-label" for="tc">T.C. Kimlik Numarası</label>
<div class="ak-input-wrap">
<svg class="bi ak-input-icon"><use href="#bi-person-vcard"/></svg>
<input class="ak-input has-icon" id="tc">
</div>
<p class="ak-field-error">...</p>
</div>
*/
.ak-form { font-family: var(--ak-font-body); }
.ak-field { margin-bottom: calc(20px * var(--ak-d)); }
.ak-field:last-child { margin-bottom: 0; }
/* Fields wrapped together (shown or hidden as one) keep the same spacing */
.ak-field-group { margin-bottom: calc(20px * var(--ak-d)); }
.ak-field-group:last-child { margin-bottom: 0; }
/* Two fields side by side from 576 px, stacked below */
.ak-form-row {
display: grid;
grid-template-columns: 1fr;
gap: calc(20px * var(--ak-d));
margin-bottom: calc(20px * var(--ak-d));
}
.ak-form-row > .ak-field { margin-bottom: 0; }
.ak-form-row:last-child { margin-bottom: 0; }
@media (min-width: 576px) {
.ak-form-row { grid-template-columns: 1fr 1fr; }
}
.ak-label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--ak-space-1);
margin: 0 0 8px;
color: var(--ak-text-900);
font-size: var(--ak-fs-label);
font-weight: 600;
line-height: 1.4;
}
.ak-label .ak-link { font-size: var(--ak-fs-label); }
/* Required field star after the label text (ui.js adds it for required fields; the text and the star share a span) */
.ak-required { color: var(--ak-red-600); font-weight: 600; }
.ak-input-wrap { position: relative; }
.ak-input {
display: block;
width: 100%;
height: var(--ak-control-lg);
margin: 0;
padding: 0 16px;
border: 1px solid var(--ak-form-border);
border-radius: var(--ak-radius-field);
background: var(--ak-white);
color: var(--ak-text-900);
font-family: var(--ak-font-body);
font-size: var(--ak-fs-input);
line-height: 1.4;
transition: border-color var(--ak-transition-hover), box-shadow var(--ak-transition-hover);
-webkit-appearance: none;
appearance: none;
}
.ak-input::placeholder { color: var(--ak-text-500); opacity: 1; }
.ak-input:hover { border-color: var(--ak-text-700); }
.ak-input:focus {
border-color: var(--ak-blue);
outline: 0;
box-shadow: 0 0 0 1px var(--ak-blue), 0 0 0 4px rgba(29, 95, 180, 0.16);
}
.ak-input:disabled,
.ak-input[readonly] { background: var(--ak-gray-light); color: var(--ak-text-500); cursor: not-allowed; }
.ak-input.has-icon { padding-left: 44px; }
.ak-input.has-action { padding-right: 44px; }
textarea.ak-input { height: auto; min-height: 120px; padding-top: 14px; padding-bottom: 14px; resize: vertical; }
/* Select: native control with our chevron */
select.ak-input {
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235F6C84' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
cursor: pointer;
}
/* Date fields keep the browser picker; the calendar icon follows our colors */
input[type="date"].ak-input::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; }
.ak-input-icon {
position: absolute;
top: 50%;
left: 16px;
width: 20px;
height: 20px;
color: var(--ak-text-500);
transform: translateY(-50%);
pointer-events: none;
transition: color var(--ak-transition-hover);
}
.ak-input-wrap:focus-within .ak-input-icon { color: var(--ak-blue); }
/* Button inside the field, e.g. show/hide password */
.ak-input-action {
position: absolute;
top: 50%;
right: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: var(--ak-radius-button);
background: transparent;
color: var(--ak-text-500);
transform: translateY(-50%);
cursor: pointer;
transition: color var(--ak-transition-hover), background-color var(--ak-transition-hover);
}
.ak-input-action:hover { background: var(--ak-gray-light); color: var(--ak-navy-900); }
.ak-input-action:focus-visible { outline: 2px solid var(--ak-blue); outline-offset: 0; }
.ak-input-action .bi { width: 20px; height: 20px; }
.ak-field-hint {
margin: 8px 0 0;
color: var(--ak-text-500);
font-size: var(--ak-fs-label);
line-height: 1.5;
}
/* Error state */
.ak-field.is-invalid .ak-input,
.ak-input.is-invalid { border-color: var(--ak-red-600); }
.ak-field.is-invalid .ak-input:focus,
.ak-input.is-invalid:focus { box-shadow: 0 0 0 1px var(--ak-red-600), 0 0 0 4px rgba(200, 16, 46, 0.14); }
.ak-field-error {
display: none;
align-items: flex-start;
gap: 6px;
margin: 8px 0 0;
color: var(--ak-red-600);
font-size: var(--ak-fs-label);
line-height: 1.5;
}
.ak-field-error .bi { width: 14px; height: 14px; margin-top: 2px; }
.ak-field.is-invalid .ak-field-error { display: flex; animation: ak-fade-down var(--ak-duration-base) var(--ak-ease-out); }
/* Captcha: code image, refresh button, input on one row; the input drops below on narrow phones */
.ak-captcha {
display: grid;
grid-template-columns: minmax(140px, 190px) var(--ak-control-lg) 1fr;
gap: 12px;
align-items: stretch;
}
.ak-captcha-img {
display: flex;
align-items: center;
justify-content: center;
height: var(--ak-control-lg);
overflow: hidden;
border: 1px solid var(--ak-form-border);
border-radius: var(--ak-radius-field);
background: var(--ak-gray-light);
}
.ak-captcha-img img { display: block; max-width: 100%; height: 40px; object-fit: contain; }
.ak-square-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--ak-control-lg);
height: var(--ak-control-lg);
padding: 0;
border: 1px solid var(--ak-form-border);
border-radius: var(--ak-radius-field);
background: var(--ak-white);
color: var(--ak-text-900);
cursor: pointer;
transition: border-color var(--ak-transition-hover), background-color var(--ak-transition-hover), transform var(--ak-transition-hover);
}
.ak-square-btn:hover { border-color: var(--ak-navy-900); background: var(--ak-gray-light); }
.ak-square-btn:active { transform: scale(0.95); }
.ak-square-btn:focus-visible { outline: 3px solid var(--ak-blue); outline-offset: 2px; }
.ak-square-btn .bi { width: 20px; height: 20px; transition: transform var(--ak-duration-slow) var(--ak-ease-standard); }
.ak-square-btn.is-spinning .bi { transform: rotate(360deg); }
@media (max-width: 419.98px) {
.ak-captcha { grid-template-columns: 1fr var(--ak-control-lg); }
.ak-captcha .ak-input { grid-column: 1 / -1; }
}
/* Checkbox with its label */
.ak-check {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--ak-text-700);
font-size: var(--ak-fs-body);
line-height: 1.5;
cursor: pointer;
}
.ak-check input {
flex-shrink: 0;
width: 22px;
height: 22px;
margin: 0;
border: 1px solid var(--ak-form-border);
border-radius: 6px;
background: var(--ak-white) no-repeat center / 14px;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
transition: background-color var(--ak-transition-hover), border-color var(--ak-transition-hover);
}
.ak-check input:checked {
border-color: var(--ak-navy-900);
background-color: var(--ak-navy-900);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3E%3C/svg%3E");
}
.ak-check input:focus-visible { outline: 3px solid var(--ak-blue); outline-offset: 2px; }
.ak-field.is-invalid .ak-check input { border-color: var(--ak-red-600); }
/* On/off switch with a title and a hint, e.g. Ücretsiz eğitim
<label class="ak-switch" for="x">
<input type="checkbox" id="x" role="switch">
<span class="ak-switch-track" aria-hidden="true"></span>
<span class="ak-switch-text"><b>Title</b><small>Hint</small></span>
</label> */
.ak-switch {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border: 1px solid var(--ak-line);
border-radius: var(--ak-radius-field);
background: var(--ak-white);
cursor: pointer;
transition: border-color var(--ak-transition-hover), background-color var(--ak-transition-hover);
}
.ak-switch:hover { border-color: var(--ak-form-border); }
.ak-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ak-switch-track {
position: relative;
flex-shrink: 0;
width: 40px;
height: 24px;
border-radius: 12px;
background: var(--ak-form-border);
transition: background-color var(--ak-duration-base) var(--ak-ease-standard);
}
.ak-switch-track::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--ak-white);
box-shadow: 0 1px 3px rgba(0, 33, 71, 0.24);
transition: transform var(--ak-duration-base) var(--ak-ease-standard);
}
.ak-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ak-switch-text b { color: var(--ak-text-900); font-size: var(--ak-fs-ui); font-weight: 600; }
.ak-switch-text small { color: var(--ak-text-500); font-size: var(--ak-fs-label); line-height: 1.45; }
.ak-switch input:checked + .ak-switch-track { background: var(--ak-success); }
.ak-switch input:checked + .ak-switch-track::after { transform: translateX(16px); }
.ak-switch:has(input:checked) { border-color: var(--ak-success); background: var(--ak-success-50); }
.ak-switch input:focus-visible + .ak-switch-track { outline: 3px solid var(--ak-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.ak-switch-track, .ak-switch-track::after { transition: none; }
}
/* Segmented switch (Giriş Yap | Kayıt Ol), tabs and filter chips.
Controls on one row are one height: the whole group is --ak-control-lg high, like fields, selects and the
buttons next to them (the token changes per screen tier, tokens.css) */
.ak-segmented {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
gap: 4px;
padding: 3px;
border: 1px solid var(--ak-line);
border-radius: 12px;
background: var(--ak-gray-light);
}
.ak-segmented a,
.ak-segmented button {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(var(--ak-control-lg) - 8px);
border-radius: 9px;
color: var(--ak-text-700);
font-size: var(--ak-fs-ui);
font-weight: 500;
text-decoration: none;
transition: background-color var(--ak-transition-hover), color var(--ak-transition-hover), box-shadow var(--ak-transition-hover);
}
.ak-segmented button { border: 0; background: transparent; font-family: var(--ak-font-body); cursor: pointer; }
.ak-segmented a:hover, .ak-segmented button:hover { color: var(--ak-navy-900); text-decoration: none; }
.ak-segmented a.is-active,
.ak-segmented button.is-active {
background: var(--ak-white);
color: var(--ak-text-900);
font-weight: 600;
box-shadow: 0 1px 3px rgba(0, 33, 71, 0.12);
}
.ak-segmented a:focus-visible,
.ak-segmented button:focus-visible { outline: 3px solid var(--ak-blue); outline-offset: 0; }
/* Inline message above or inside a form */
.ak-alert {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0 0 calc(20px * var(--ak-d));
padding: 14px 16px;
border: 1px solid transparent;
border-radius: var(--ak-radius-field);
font-size: var(--ak-fs-body);
line-height: 1.5;
animation: ak-fade-down var(--ak-duration-base) var(--ak-ease-out);
}
.ak-alert .bi { width: 20px; height: 20px; margin-top: 1px; }
.ak-alert-error { border-color: rgba(200, 16, 46, 0.25); background: var(--ak-error-50); color: var(--ak-red-700); }
.ak-alert-info { border-color: rgba(29, 95, 180, 0.2); background: var(--ak-blue-50); color: var(--ak-navy-900); }
.ak-alert-success { border-color: rgba(19, 121, 91, 0.25); background: var(--ak-success-50); color: var(--ak-success); }
.ak-alert-warning { border-color: rgba(161, 92, 0, 0.25); background: var(--ak-warning-50); color: var(--ak-warning); }
/* Search field with icon and clear button (catalog, SSS) */
.ak-search {
position: relative;
flex: 0 1 380px;
min-width: 260px;
}
.ak-search .ak-input { height: var(--ak-control-lg); padding-left: 38px; padding-right: 36px; font-size: var(--ak-fs-input); }
.ak-search .ak-input-icon { left: 12px; width: 16px; height: 16px; }
.ak-search-clear {
position: absolute;
top: 50%;
right: 2px;
display: none;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: var(--ak-radius-button);
background: transparent;
color: var(--ak-text-500);
transform: translateY(-50%);
cursor: pointer;
}
.ak-search-clear:hover { background: var(--ak-gray-light); color: var(--ak-navy-900); }
.ak-search.has-value .ak-search-clear { display: inline-flex; }
/* These boxes have their own clear button: the browser's own clear (×) of a search field is not shown next to it */
.ak-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
/* Busy button (set by AkademiUI.busy) */
.ak-btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.ak-btn.is-busy::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid rgba(255, 255, 255, 0.45);
border-top-color: var(--ak-white);
border-radius: 50%;
animation: ak-spin 0.7s linear infinite;
}
.ak-btn-outline.is-busy::after { border-color: rgba(0, 33, 71, 0.25); border-top-color: var(--ak-navy-900); }
/*
TSE Akademi windows (pencere): restyles the Bootstrap 4 modal markup, opened by Bootstrap's modal JavaScript.
Works without bootstrap.css. Radius 20, navy backdrop, scale-in on open.
Phones: the window becomes a bottom sheet that slides up.
<div class="modal fade" id="x" tabindex="-1" role="dialog" aria-labelledby="xTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">   (modal-sm 420 / default 560 / modal-lg 800 / modal-xl 1040)
<div class="modal-content">
<div class="modal-header"><h2 class="modal-title" id="xTitle">..</h2><button class="close" data-dismiss="modal" aria-label="Kapat">..</button></div>
<div class="modal-body">..</div>
<div class="modal-footer">..</div>
*/
.modal-open { overflow: hidden; }
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }
.modal {
position: fixed;
top: 0;
left: 0;
z-index: 1050;
display: none;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
font-family: var(--ak-font-body);
}
.modal-dialog {
position: relative;
width: auto;
max-width: 560px;
margin: calc(36px * var(--ak-d)) auto;
padding: 0 var(--ak-space-2);
pointer-events: none;
}
.modal-sm { max-width: 452px; }
.modal-lg { max-width: 832px; }
.modal-xl { max-width: 1072px; }
.modal-dialog-centered {
display: flex;
align-items: center;
min-height: calc(100% - 96px);
}
.modal-dialog-scrollable { display: flex; max-height: calc(100% - 96px); }
.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 96px); overflow: hidden; }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }
/* A form around body + footer: the body scrolls and the footer stays in view (it was cut off below the window) */
.modal-dialog-scrollable .modal-content > form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.modal-dialog-scrollable .modal-content > form > .modal-body { flex: 1 1 auto; min-height: 0; }
.modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
border: 0;
border-radius: var(--ak-radius-modal);
background: var(--ak-white);
box-shadow: 0 24px 64px rgba(0, 33, 71, 0.24);
outline: 0;
pointer-events: auto;
}
.modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ak-space-2);
padding: calc(24px * var(--ak-d)) calc(24px * var(--ak-d)) 16px calc(28px * var(--ak-d));
}
.modal-title {
margin: 0;
color: var(--ak-text-900);
font-family: var(--ak-font-heading);
font-size: var(--ak-fs-h4);
font-weight: 600;
line-height: var(--ak-lh-h4);
}
.modal-subtitle { margin: 4px 0 0; color: var(--ak-text-500); font-size: var(--ak-fs-body); line-height: 1.5; }
/* Close button of every window: in the header row, or placed on its own (payment, certificate) */
.modal .close {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--ak-gray-light);
color: var(--ak-text-700);
font-size: 0;
opacity: 1;
cursor: pointer;
transition: background-color var(--ak-transition-hover), color var(--ak-transition-hover), transform var(--ak-transition-hover);
}
.modal-header .close { margin: -8px -8px 0 0; }
.modal .close:hover { background: var(--ak-line); color: var(--ak-navy-900); }
.modal .close:active { transform: scale(0.94); }
.modal .close:focus-visible { outline: 3px solid var(--ak-blue); outline-offset: 2px; }
.modal .close .bi { width: 18px; height: 18px; }
.modal-body {
position: relative;
flex: 1 1 auto;
padding: 8px calc(28px * var(--ak-d)) calc(24px * var(--ak-d));
color: var(--ak-text-700);
font-size: var(--ak-fs-ui);
line-height: 1.6;
}
.modal-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 16px calc(28px * var(--ak-d)) calc(24px * var(--ak-d));
border-top: 1px solid var(--ak-line);
}
.modal-footer .ak-btn { min-width: 120px; }
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: 100vw;
height: 100vh;
background: rgba(0, 33, 71, 0.55);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
/* Motion: backdrop fades, window scales in; Bootstrap waits for these transitions */
.modal-backdrop.fade { opacity: 0; transition: opacity var(--ak-duration-slow) var(--ak-ease-standard); }
.modal-backdrop.show { opacity: 1; }
.modal.fade .modal-dialog {
opacity: 0;
transform: translateY(12px) scale(0.97);
transition: opacity var(--ak-duration-slow) var(--ak-ease-out), transform var(--ak-duration-slow) var(--ak-ease-out);
}
.modal.show .modal-dialog { opacity: 1; transform: none; }
/* Phones: bottom sheet */
@media (max-width: 575.98px) {
.modal-dialog,
.modal-sm,
.modal-lg,
.modal-xl {
display: flex;
align-items: flex-end;
max-width: none;
min-height: 100%;
margin: 0;
padding: 0;
}
.modal-dialog-centered { min-height: 100%; }
.modal-content {
max-height: 92vh;
overflow-y: auto;
border-radius: var(--ak-radius-modal) var(--ak-radius-modal) 0 0;
padding-bottom: env(safe-area-inset-bottom);
}
.modal.fade .modal-dialog { opacity: 1; transform: translateY(100%); }
.modal.show .modal-dialog { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.modal.fade .modal-dialog,
.modal-backdrop.fade { transition: none; }
}
/* Confirm / alert window (AkademiUI.confirm, AkademiUI.alert) */
.ak-dialog .modal-body.ak-dialog-body { padding: calc(28px * var(--ak-d)) calc(28px * var(--ak-d)) 8px; text-align: center; }
.ak-dialog-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 50%; background: var(--ak-blue-50); color: var(--ak-blue); }
.ak-dialog-icon .bi { width: 26px; height: 26px; }
.ak-dialog-icon.is-warning { background: var(--ak-warning-50); color: var(--ak-warning); }
.ak-dialog-icon.is-error { background: var(--ak-error-50); color: var(--ak-red-600); }
.ak-dialog-icon.is-success { background: var(--ak-success-50); color: var(--ak-success); }
.ak-dialog-title { margin-bottom: 8px; }
.ak-dialog-text { margin: 0; color: var(--ak-text-700); font-size: var(--ak-fs-body); line-height: 1.6; }
.ak-dialog .modal-footer { justify-content: center; border-top: 0; padding-top: calc(20px * var(--ak-d)); }
/*
TSE Akademi notifications (style guide: Bildirim Kutusu).
Top right, 16 px below the top menu, 420 px wide, radius 14, 40 px icon disc.
The type shows in both color and icon shape. Phones: full width with 8 px margins.
*/
.ak-toast-region {
position: fixed;
top: 16px;
right: 16px;
z-index: 1100;
display: flex;
flex-direction: column;
gap: var(--ak-space-1-5);
width: 420px;
max-width: calc(100vw - 32px);
pointer-events: none;
}
.ak-toast {
position: relative;
overflow: hidden;
display: flex;
align-items: flex-start;
gap: var(--ak-space-2);
padding: var(--ak-space-2) var(--ak-space-2) var(--ak-space-2) var(--ak-space-2);
border: 1px solid var(--ak-line);
border-radius: var(--ak-radius-card);
background: var(--ak-white);
box-shadow: 0 12px 32px rgba(0, 33, 71, 0.14);
color: var(--ak-text-700);
font-family: var(--ak-font-body);
pointer-events: auto;
animation: ak-toast-in var(--ak-duration-slow) var(--ak-ease-out) both;
}
.ak-toast.is-leaving { animation: ak-toast-out var(--ak-duration-base) var(--ak-ease-in) both; }
@keyframes ak-toast-in {
from { opacity: 0; transform: translateX(24px) scale(0.98); }
to { opacity: 1; transform: none; }
}
@keyframes ak-toast-out {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateX(24px); }
}
.ak-toast-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
}
.ak-toast-icon .bi { width: 22px; height: 22px; }
.ak-toast-error .ak-toast-icon { background: var(--ak-error-50); color: var(--ak-red-600); }
.ak-toast-success .ak-toast-icon { background: var(--ak-success-50); color: var(--ak-success); }
.ak-toast-warning .ak-toast-icon { background: var(--ak-warning-50); color: var(--ak-warning); }
.ak-toast-info .ak-toast-icon { background: var(--ak-blue-50); color: var(--ak-blue); }
/* Time left (js/akademi/toast.js, 3 s): a bar on the top edge in the type's color; pointer or focus pauses it */
.ak-toast-timer {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 3px;
background: currentColor;
transform-origin: right center;
animation: ak-toast-timer 3000ms linear both;
pointer-events: none;
}
.ak-toast.is-paused .ak-toast-timer,
.ak-toast.is-leaving .ak-toast-timer { animation-play-state: paused; }
@keyframes ak-toast-timer {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
.ak-toast-error .ak-toast-timer { color: var(--ak-red-600); }
.ak-toast-success .ak-toast-timer { color: var(--ak-success); }
.ak-toast-warning .ak-toast-timer { color: var(--ak-warning); }
.ak-toast-info .ak-toast-timer { color: var(--ak-blue); }
/* The bar only shrinks, nothing moves: it keeps its time when animations are reduced (css/akademi/motion.css) */
@media (prefers-reduced-motion: reduce) {
.ak-toast .ak-toast-timer { animation-duration: 3000ms !important; }
}
.ak-toast-body { flex: 1; min-width: 0; padding-top: 2px; }
.ak-toast-title {
margin: 0 0 2px;
color: var(--ak-text-900);
font-family: var(--ak-font-heading);
font-size: var(--ak-fs-h5);
font-weight: 600;
line-height: 1.4;
}
.ak-toast-message { margin: 0; font-size: var(--ak-fs-label); line-height: 1.55; word-break: break-word; }
.ak-toast-close {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 32px;
height: 32px;
margin: -4px -4px 0 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--ak-text-500);
cursor: pointer;
transition: background-color var(--ak-transition-hover), color var(--ak-transition-hover);
}
.ak-toast-close:hover { background: var(--ak-gray-light); color: var(--ak-text-900); }
.ak-toast-close .bi { width: 16px; height: 16px; }
@media (pointer: coarse) {
.ak-toast-close { width: 44px; height: 44px; margin: -10px -10px -6px 0; }
}
@media (max-width: 575.98px) {
.ak-toast-region { right: 8px; left: 8px; width: auto; max-width: none; }
.ak-toast { animation-name: ak-fade-down; }
.ak-toast.is-leaving { animation-name: ak-fade-out; }
}
/* TSE Akademi help tour (js/akademi/tour.js; screen: Giriş Yap yardım turu) */
/* Spotlight: a transparent box over the target whose huge shadow dims the rest of the page */
.ak-tour-spot {
position: fixed;
z-index: 1090;
border-radius: var(--ak-radius-card);
box-shadow: 0 0 0 9999px rgba(0, 33, 71, 0.5);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: top var(--ak-duration-slow) var(--ak-ease-standard), left var(--ak-duration-slow) var(--ak-ease-standard),
width var(--ak-duration-slow) var(--ak-ease-standard), height var(--ak-duration-slow) var(--ak-ease-standard),
opacity var(--ak-duration-slow) var(--ak-ease-standard), visibility 0s linear var(--ak-duration-slow);
}
.ak-tour-spot.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.ak-tour-card {
position: fixed;
z-index: 1100;
width: 400px;
max-width: calc(100vw - 24px);
padding: calc(28px * var(--ak-d)) calc(28px * var(--ak-d)) calc(24px * var(--ak-d));
border-radius: var(--ak-radius-panel);
background: var(--ak-white);
box-shadow: 0 24px 64px rgba(0, 33, 71, 0.28);
font-family: var(--ak-font-body);
opacity: 0;
visibility: hidden;
transform: scale(0.96);
transition: opacity var(--ak-duration-base) var(--ak-ease-out), transform var(--ak-duration-base) var(--ak-ease-out), visibility 0s linear var(--ak-duration-base);
}
.ak-tour-card.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ak-tour-card:focus { outline: 0; }
.ak-tour-card:focus-visible { outline: 3px solid var(--ak-blue); outline-offset: 2px; }
.ak-tour-arrow {
position: absolute;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: var(--ak-white);
transform: rotate(45deg);
}
.ak-tour-card[data-placement="left"] .ak-tour-arrow { left: 100%; }
.ak-tour-card[data-placement="right"] .ak-tour-arrow { left: 0; }
.ak-tour-card[data-placement="top"] .ak-tour-arrow { top: 100%; }
.ak-tour-card[data-placement="bottom"] .ak-tour-arrow { top: 0; }
.ak-tour-card[data-placement="sheet"] .ak-tour-arrow { display: none; }
.ak-tour-eyebrow {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
color: var(--ak-blue);
font-size: var(--ak-fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ak-ls-eyebrow);
text-transform: uppercase;
}
.ak-tour-eyebrow .bi { width: 18px; height: 18px; }
.ak-tour-count { margin-left: auto; color: var(--ak-text-500); letter-spacing: 0; text-transform: none; font-weight: 500; }
.ak-tour-title {
margin: 0 0 10px;
color: var(--ak-navy-900);
font-family: var(--ak-font-heading);
font-size: var(--ak-fs-h4);
font-weight: 600;
line-height: var(--ak-lh-h4);
}
.ak-tour-text { margin: 0 0 calc(24px * var(--ak-d)); color: var(--ak-text-700); font-size: var(--ak-fs-md); line-height: 1.6; }
.ak-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ak-tour-nav { display: flex; gap: 8px; }
.ak-tour-end {
min-height: 44px;
padding: 0 4px;
border: 0;
background: none;
color: var(--ak-blue);
font: 600 var(--ak-fs-ui) var(--ak-font-body);
cursor: pointer;
transition: color var(--ak-transition-hover);
}
.ak-tour-end:hover { color: var(--ak-red-600); }
.ak-tour-end:focus-visible { outline: 3px solid var(--ak-blue); outline-offset: 2px; border-radius: 4px; }
.ak-tour-prev { border-color: var(--ak-line); background: var(--ak-gray-light); color: var(--ak-text-700); }
.ak-tour-prev:hover { border-color: var(--ak-form-border); background: var(--ak-line); color: var(--ak-text-900); }
.ak-tour-prev:disabled { opacity: 0.5; pointer-events: none; }
/* Sheet pinned to the bottom: always on phones, and wherever no side of the target has room */
.ak-tour-card[data-placement="sheet"] {
top: auto;
bottom: calc(12px + env(safe-area-inset-bottom));
left: 50%;
width: 480px;
max-width: calc(100vw - 24px);
transform: translate(-50%, 24px);
}
.ak-tour-card[data-placement="sheet"].is-on { transform: translate(-50%, 0); }
@media (max-width: 575.98px) {
.ak-tour-card[data-placement="sheet"] { padding: calc(22px * var(--ak-d)) calc(20px * var(--ak-d)) 18px; }
.ak-tour-text { font-size: var(--ak-fs-body); margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.ak-tour-spot, .ak-tour-card { transition: opacity 1ms, visibility 0s; }
}
/*
TSE Akademi sign-in pages (screens: Giriş Yap, Kayıt Ol, Giriş Yap yardım turu). Layout: Views/Shared/_AuthLayout.cshtml.
Sizes:
- 992 px and up: navy side panel (logo, message, footer) on the left half, form centered on the right half.
- 576-991 px: compact navy band on top (logo + message), form card below.
- below 576 px: navy bar with the logo, the form full width; footer links under the form.
*/
html { scroll-behavior: smooth; }
/* These pages do not load base.css: hidden parts (e.g. the Kayıt Ol error box) stay hidden over their own display */
[hidden] { display: none !important; }
body.ak-auth {
margin: 0;
min-height: 100vh;
background: var(--ak-white);
color: var(--ak-text-700);
font-family: var(--ak-font-body);
font-size: var(--ak-fs-body);
-webkit-font-smoothing: antialiased;
}
.ak-auth *, .ak-auth *::before, .ak-auth *::after { box-sizing: border-box; }
.ak-auth-shell {
position: relative;
display: grid;
grid-template-columns: 1fr;
min-height: 100vh;
}
/* ---------- Navy side ---------- */
.ak-auth-aside {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--ak-navy-900);
color: rgba(255, 255, 255, 0.86);
}
.ak-auth-aside-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
flex: 1;
padding: calc(48px * var(--ak-d)) calc(60px * var(--ak-d)) calc(36px * var(--ak-d));
}
.ak-auth-brand { display: inline-flex; align-self: flex-start; transition: opacity var(--ak-transition-hover); }
/* The navy side panel has room for a larger logo */
.ak-auth-brand .ak-logo { height: 44px; }
.ak-auth-brand:hover { opacity: 0.85; }
.ak-auth-message { margin: auto 0; padding: calc(48px * var(--ak-d)) 0; max-width: 560px; }
.ak-auth-eyebrow {
display: flex;
align-items: center;
gap: 16px;
margin: 0 0 calc(20px * var(--ak-d));
color: rgba(255, 255, 255, 0.78);
font-size: var(--ak-fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ak-ls-eyebrow);
text-transform: uppercase;
}
.ak-auth-eyebrow::before { content: ""; width: 40px; height: 2px; background: rgba(255, 255, 255, 0.55); }
.ak-auth-headline {
margin: 0 0 calc(28px * var(--ak-d));
color: var(--ak-white);
font-family: var(--ak-font-heading);
font-size: var(--ak-fs-h1);
font-weight: 600;
line-height: var(--ak-lh-h1);
}
.ak-auth-points { margin: 0; padding: 0; list-style: none; }
.ak-auth-points li {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 18px;
color: rgba(255, 255, 255, 0.86);
font-size: var(--ak-fs-body);
line-height: 1.5;
}
.ak-auth-points .ak-auth-tick {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: var(--ak-white);
}
.ak-auth-points .ak-auth-tick .bi { width: 16px; height: 16px; }
/* Register: three numbered steps, the first one current */
.ak-auth-steps .ak-auth-step {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-radius: 50%;
color: var(--ak-white);
font-weight: 600;
}
.ak-auth-steps li.is-current { color: var(--ak-white); font-weight: 600; }
.ak-auth-steps li.is-current .ak-auth-step { border-color: var(--ak-white); background: var(--ak-white); color: var(--ak-navy-900); }
.ak-auth-aside-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(24px * var(--ak-d));
color: rgba(255, 255, 255, 0.7);
font-size: var(--ak-fs-ui);
}
.ak-auth-aside-foot nav { display: flex; gap: calc(28px * var(--ak-d)); }
.ak-auth-aside-foot a { color: rgba(255, 255, 255, 0.86); text-decoration: none; transition: color var(--ak-transition-hover); }
.ak-auth-aside-foot a:hover { color: var(--ak-white); text-decoration: underline; }
/* Thin diamond outlines in the lower right corner */
.ak-auth-pattern {
position: absolute;
right: -120px;
bottom: -160px;
width: 760px;
height: 640px;
color: rgba(255, 255, 255, 0.07);
pointer-events: none;
}
/* ---------- Form side ---------- */
.ak-auth-main {
display: flex;
flex-direction: column;
min-width: 0;
padding: calc(36px * var(--ak-d)) calc(48px * var(--ak-d));
}
.ak-auth-back {
display: inline-flex;
align-items: center;
align-self: flex-end;
gap: 10px;
min-height: 36px;
color: var(--ak-text-700);
font-size: var(--ak-fs-body);
font-weight: 500;
text-decoration: none;
transition: color var(--ak-transition-hover);
}
.ak-auth-back .bi { width: 20px; height: 20px; transition: transform var(--ak-transition-hover); }
.ak-auth-back:hover { color: var(--ak-navy-900); text-decoration: none; }
.ak-auth-back:hover .bi { transform: translateX(-3px); }
.ak-auth-panel {
width: 100%;
max-width: 440px;
margin: auto;
padding: calc(40px * var(--ak-d)) 0 calc(28px * var(--ak-d));
}
.ak-auth-panel-wide { max-width: 560px; }
.ak-auth-panel .ak-segmented { margin-bottom: calc(32px * var(--ak-d)); }
.ak-auth-title {
margin: 0 0 8px;
color: var(--ak-navy-900);
font-family: var(--ak-font-heading);
font-size: var(--ak-fs-h1);
font-weight: 600;
line-height: var(--ak-lh-h1);
}
.ak-auth-lead { margin: 0 0 calc(28px * var(--ak-d)); color: var(--ak-text-700); font-size: var(--ak-fs-ui); line-height: 1.6; }
.ak-auth-submit { margin-top: calc(28px * var(--ak-d)); }
.ak-auth-alt {
margin: calc(24px * var(--ak-d)) 0 0;
color: var(--ak-text-700);
font-size: var(--ak-fs-ui);
text-align: center;
}
.ak-auth-help {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: calc(28px * var(--ak-d));
padding-top: calc(28px * var(--ak-d));
border-top: 1px solid var(--ak-line);
color: var(--ak-text-700);
font-size: var(--ak-fs-ui);
text-align: center;
}
.ak-auth-help .bi { width: 20px; height: 20px; color: var(--ak-text-500); }
.ak-link-btn {
padding: 0;
border: 0;
background: none;
font: inherit;
cursor: pointer;
}
.ak-auth-foot-mobile { display: none; }
/* Register success state (replaces the form) */
.ak-auth-done {
padding: calc(28px * var(--ak-d)) calc(28px * var(--ak-d));
border: 1px solid var(--ak-line);
border-radius: var(--ak-radius-panel);
background: var(--ak-gray-light);
text-align: center;
animation: ak-scale-in var(--ak-duration-slow) var(--ak-ease-out);
}
.ak-auth-done:focus { outline: 0; }
.ak-auth-done p { margin: 0 0 calc(24px * var(--ak-d)); color: var(--ak-text-700); font-size: var(--ak-fs-ui); line-height: 1.6; }
.ak-auth-done-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin-bottom: 16px;
border-radius: 50%;
background: var(--ak-success-50);
color: var(--ak-success);
}
.ak-auth-done-icon .bi { width: 30px; height: 30px; }
.ak-auth-done-title {
margin: 0 0 8px;
color: var(--ak-navy-900);
font-family: var(--ak-font-heading);
font-size: var(--ak-fs-h3);
font-weight: 600;
}
/* ---------- Desktop ---------- */
@media (min-width: 992px) {
.ak-auth-shell { grid-template-columns: 1fr 1fr; }
.ak-auth-aside { position: sticky; top: 0; height: 100vh; }
}
@media (min-width: 1600px) {
.ak-auth-panel { max-width: 480px; }
.ak-auth-panel-wide { max-width: 600px; }
}
/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
.ak-auth-aside-inner { padding: calc(28px * var(--ak-d)) calc(32px * var(--ak-d)) calc(28px * var(--ak-d)); }
.ak-auth-aside-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ak-auth-aside-head .ak-auth-brand { align-self: center; }
.ak-auth-message { margin: 0; padding: calc(28px * var(--ak-d)) 0 0; max-width: none; }
.ak-auth-eyebrow { margin-bottom: 12px; }
.ak-auth-headline { margin-bottom: 0; font-size: var(--ak-fs-h3); line-height: var(--ak-lh-h3); }
.ak-auth-points, .ak-auth-aside-foot { display: none; }
.ak-auth-pattern { right: -260px; bottom: -380px; }
.ak-auth-main { padding: 0 calc(32px * var(--ak-d)) calc(32px * var(--ak-d)); }
.ak-auth-back { position: absolute; top: 34px; right: 40px; color: rgba(255, 255, 255, 0.9); }
.ak-auth-back:hover { color: var(--ak-white); }
.ak-auth-panel, .ak-auth-panel-wide { max-width: 560px; padding-top: calc(32px * var(--ak-d)); }
.ak-auth-foot-mobile {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px calc(24px * var(--ak-d));
margin: 8px auto 0;
color: var(--ak-text-500);
font-size: var(--ak-fs-ui);
}
.ak-auth-foot-mobile a { color: var(--ak-text-700); text-decoration: none; }
.ak-auth-foot-mobile a:hover { color: var(--ak-navy-900); text-decoration: underline; }
}
/* ---------- Phone ---------- */
@media (max-width: 575.98px) {
.ak-auth-aside-inner { padding: 0 16px; }
.ak-auth-aside-head { height: var(--ak-header-height-mobile); }
.ak-auth-brand .ak-logo { height: 40px; }
.ak-auth-message { display: none; }
.ak-auth-back {
top: 14px;
right: 12px;
width: 44px;
justify-content: center;
font-size: 0;
}
.ak-auth-back .bi { width: 22px; height: 22px; }
.ak-auth-main { padding: 0 16px calc(28px * var(--ak-d)); }
.ak-auth-panel, .ak-auth-panel-wide { padding-top: calc(24px * var(--ak-d)); }
.ak-auth-lead { margin-bottom: calc(28px * var(--ak-d)); }
.ak-auth-help { flex-wrap: wrap; }
}
/* Touch screens: text links get a 44 px tap area without moving the layout */
@media (max-width: 991.98px), (pointer: coarse) {
.ak-auth .ak-link-btn,
.ak-auth-alt a,
.ak-auth-foot-mobile a {
display: inline-block;
padding: 12px 4px;
margin: -12px -4px;
}
.ak-auth-brand { padding: 2px 0; }
}
@media (max-width: 359.98px) {
.ak-auth-brand .ak-logo { height: 34px; }
}
/*
TSE Akademi motion: shared animations for every page.
Durations and easing come from tokens.css. People who ask their system for reduced motion get none.
Content never waits for an animation: these play when something changes (a tab, a question), not as a page opens.
*/
html {
scroll-behavior: smooth;
}
/* ---------- Keyframes ---------- */
@keyframes ak-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ak-fade-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
@keyframes ak-fade-down {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: none; }
}
@keyframes ak-fade-out {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(-4px); }
}
@keyframes ak-scale-in {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: none; }
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
}
}