/*
 * Riot Kampüs Elçileri — modern theme (App\Enums\SiteTheme::Modern).
 * Loaded after site.css only when the modern theme is active: a dark, game-first look
 * without Riot Games branding (reference: FACEIT, Metafy and the Riot game sites).
 * Shared page templates keep their site.css class names and are restyled here; templates
 * under resources/views/themes/modern add the header (mh-, full-screen menu mt-), footer (mf-),
 * home (mx-) and sign-in (mauth-) blocks. Rules are scoped to `.theme-modern` (set on <html>) so they win
 * over site.css regardless of media queries.
 *
 * Neutral greys, hairline borders, rounded cards, pill buttons, Mona Sans throughout (wide cuts for
 * display, sentence case). The header menu sets the language for the rest: a white pill marks what
 * the pointer is on, eyebrows carry a red dot, panels glow red in a corner. Colour carries meaning:
 * each game has its own (LoL gold, VALORANT red, TFT violet, Wild Rift cyan) wherever that game
 * appears; KEP red is the program's own accent.
 *
 * Motion (see the end of the file and public/js/modern.js): pages cross-fade, mastheads rise in,
 * content below the fold rises in as it is scrolled to, cards follow the pointer with a soft light.
 * All of it stays off for prefers-reduced-motion.
 */

@font-face { font-family: "Mona Sans"; src: url("../fonts/mona-sans/MonaSans-latin.var.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; 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: "Mona Sans"; src: url("../fonts/mona-sans/MonaSans-latin-ext.var.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Tokens ------------------------------------------------------------------ */

.theme-modern {
    --k-bg: #0b0d10;
    --k-bg-2: #0e1114;
    --k-surface: #14171c;
    --k-surface-2: #1a1e24;
    --k-surface-3: #22272f;
    --k-line: rgba(255, 255, 255, 0.08);
    --k-line-2: rgba(255, 255, 255, 0.13);
    --k-line-3: rgba(255, 255, 255, 0.22);
    --k-strong: #f4f5f6;
    --k-text: #c3c8cf;
    --k-muted: #8a919b;
    --k-faint: #5d646e;
    --k-accent: #d3363a;
    --k-accent-hover: #e0464a;
    --k-accent-text: #ff6166;
    --k-accent-soft: rgba(211, 54, 58, 0.14);
    --k-green: #3fcf8e;
    --k-yellow: #f2b53a;
    --k-blue: #5aa8ff;
    --k-radius-sm: 8px;
    --k-radius: 12px;
    --k-radius-lg: 16px;
    --k-radius-xl: 20px;
    --k-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --k-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --k-glow: radial-gradient(60% 140% at 100% 0%, rgba(211, 54, 58, 0.13) 0%, rgba(211, 54, 58, 0) 60%);
    --k-font: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --k-display: "Mona Sans", system-ui, sans-serif;
    --k-display-stretch: 112%;
    --k-header: 80px;
    --k-page: 1376px; /* the header's width; every page container uses it so all edges line up */
    --k-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10a.75.75 0 0 1 .75-.75h10.64L10.2 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.2-3.96H3.75A.75.75 0 0 1 3 10Z'/%3E%3C/svg%3E");
    --k-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.2 11.6 2.6 8l1.1-1.1 2.5 2.5 6.1-6.1 1.1 1.1z'/%3E%3C/svg%3E");
    --game-lol: #c8aa6e;
    --game-valorant: #ff4655;
    --game-tft: #8f73ff;
    --game-wildrift: #2ec4f0;

    /* site.css tokens, inverted for the dark page; navy backgrounds are restyled below */
    --navy: var(--k-strong);
    --white: var(--k-bg);
    --red: var(--k-accent);
    --red-hover: var(--k-accent-hover);
    --red-deep: var(--k-accent);
    --red-on-dark: var(--k-accent-text);
    --grey-text: var(--k-muted);
    --grey-line: var(--k-line-2);
    --dark-line: var(--k-line-2);
    --font-display: var(--k-display);
    --font-body: var(--k-font);
    --font-ui: var(--k-font);
    --edge: 32px;

    color-scheme: dark;
    background: var(--k-bg);
    scroll-padding-top: calc(var(--k-header) + 16px);
}

@media (max-width: 600px) { .theme-modern { --edge: 16px; } }

/* Base -------------------------------------------------------------------- */

.theme-modern body {
    padding-top: var(--k-header);
    background: var(--k-bg);
    color: var(--k-text);
    font: 400 16px/1.6 var(--k-font);
}

.theme-modern.page-home body, .theme-modern body.page-home { padding-top: 0; }

.theme-modern ::selection { background: rgba(211, 54, 58, 0.45); color: #ffffff; }
.theme-modern :focus-visible { outline: 2px solid var(--k-accent-text); outline-offset: 2px; border-radius: 2px; }
.theme-modern .input:focus-visible, .theme-modern .textarea:focus-visible, .theme-modern .select:focus-visible, .theme-modern .finder__field input:focus-visible { outline: none; }
.theme-modern .skip-link { border-radius: var(--k-radius); background: var(--k-strong); color: var(--k-bg); }
.theme-modern .skip-link:focus { top: calc(var(--k-header) + 12px); }

.m-container, .theme-modern .container { width: 100%; margin: 0 auto; padding: 0 var(--edge); }
.m-container, .theme-modern .container, .theme-modern .container--large, .theme-modern .container--medium, .theme-modern .container--small { max-width: var(--k-page); }

/* Sections */

.theme-modern .blade { --blade-pad: 72px; padding: var(--blade-pad) 0; }
.theme-modern .blade--light { background: var(--k-bg); color: var(--k-text); }
.theme-modern .blade--grey { background: var(--k-bg-2); }
.theme-modern .blade--dark { background: var(--k-bg-2); color: var(--k-text); }
.theme-modern .blade--flush { padding: 0; }
.theme-modern .blade + .blade--light, .theme-modern .blade--light + .blade { border-top: 1px solid var(--k-line); }
/* Sections the Riot look runs together (inline padding-top: 0) are split by the hairline here */
.theme-modern .blade + .blade--light { padding-top: var(--blade-pad) !important; }

@media (max-width: 1024px) { .theme-modern .blade { --blade-pad: 56px; } }
@media (max-width: 600px) { .theme-modern .blade { --blade-pad: 40px; } }

/* Typography ------------------------------------------------------------- */

.theme-modern .title-display,
.theme-modern .title-big,
.theme-modern .title-section,
.theme-modern .masthead__title,
.theme-modern .related__title,
.theme-modern .guide-more__title { color: var(--k-strong); font-family: var(--k-display); font-style: normal; font-stretch: var(--k-display-stretch); text-transform: none; }

/* Titles are set in sentence case, like the menu; templates keep their `caps` class for the Riot look */
.theme-modern .title-display { font-weight: 800; font-size: clamp(44px, 6vw, 88px); line-height: 1.04; letter-spacing: -0.03em; }
.theme-modern .title-big { font-weight: 800; font-size: clamp(32px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.025em; }
.theme-modern .title-section { font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; }

.theme-modern .article-title,
.theme-modern .pillar__title,
.theme-modern .step__title,
.theme-modern .form-section__title,
.theme-modern .studio-step__title,
.theme-modern .answers__title,
.theme-modern .amb-card__name,
.theme-modern .profile-card__name,
.theme-modern .finder__supertitle { color: var(--k-strong); font-family: var(--k-font); font-style: normal; text-transform: none; }

/* Eyebrows are small pills with the menu's red "you are here" dot. Inline-block, not flex: brand_caps()
   splits the label into spans and a flex gap would pull them apart. */
.theme-modern .supertitle,
.theme-modern .masthead__eyebrow,
.theme-modern .profile-card__eyebrow {
    display: inline-block;
    width: fit-content;
    margin-bottom: 18px;
    padding: 5px 13px 5px 11px;
    border: 1px solid var(--k-line-2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--k-text);
    font: 600 12px/16px var(--k-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.theme-modern .supertitle::before,
.theme-modern .masthead__eyebrow::before,
.theme-modern .profile-card__eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 9px 0 0; border-radius: 50%; background: var(--k-accent-text); box-shadow: 0 0 0 3px rgba(255, 97, 102, 0.16); vertical-align: 1px; }

.theme-modern .lead { color: var(--k-text); font-size: 17px; line-height: 1.65; }
.theme-modern .muted { color: var(--k-muted); }
.theme-modern strong { color: var(--k-strong); }
.theme-modern .blade--dark .lead { color: var(--k-text); }

@media (max-width: 600px) { .theme-modern .lead { font-size: 16px; } }

/* Buttons ------------------------------------------------------------------ */

/* Pills in sentence case, like the menu's call to action. Outlined buttons fill white on hover, the
   way the menu's pill sits under the entry the pointer is on. */
.theme-modern .btn {
    gap: 8px;
    min-height: 44px;
    padding: 11px 22px;
    border-radius: 999px;
    font: 600 15px/20px var(--k-font);
    letter-spacing: 0;
    text-transform: none;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease, transform 0.25s var(--k-ease);
}

.theme-modern .btn:active:not([disabled]) { transform: scale(0.97); }
.theme-modern .btn--ornamental, .theme-modern .btn--ornamental:hover { outline: 0; }
.theme-modern .btn--primary { background: var(--k-accent); color: #ffffff; }
.theme-modern .btn--primary:hover { background: var(--k-accent-hover); box-shadow: 0 12px 30px -12px rgba(224, 70, 74, 0.85); }
.theme-modern .btn--secondary,
.theme-modern .btn--light,
.theme-modern .blade--dark .btn--secondary { background: transparent; color: var(--k-strong); box-shadow: inset 0 0 0 1px var(--k-line-3); }
.theme-modern .btn--secondary:hover,
.theme-modern .btn--light:hover,
.theme-modern .blade--dark .btn--secondary:hover { background: #ffffff; box-shadow: inset 0 0 0 1px #ffffff; color: #0b0d10; }
.theme-modern .btn--tertiary { min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--k-text); }
.theme-modern .btn--tertiary:hover { background: none; box-shadow: none; color: var(--k-strong); }
.theme-modern .btn--small { min-height: 36px; padding: 8px 16px; font-size: 14px; line-height: 20px; }
.theme-modern .btn[disabled], .theme-modern .btn.is-disabled { background: var(--k-surface-2); color: var(--k-faint); box-shadow: none; }

.theme-modern .link-arrow { gap: 6px; color: var(--k-strong); font: 600 15px/22px var(--k-font); }
.theme-modern .link-arrow::after { width: 16px; height: 16px; background: var(--k-accent-text); -webkit-mask: var(--k-arrow) center / contain no-repeat; mask: var(--k-arrow) center / contain no-repeat; transition: transform 0.3s var(--k-ease); }
.theme-modern .link-arrow:hover { color: #ffffff; }
.theme-modern .link-arrow:hover::after { transform: translateX(4px); }

/* KEP logo (themes/modern/partials/brand.blade.php), used exactly as supplied */

.m-brand { display: block; width: auto; height: 46px; }
.m-brand--large { height: 72px; }

/* ======================================================================= */
/* Header                                                                   */
/* ======================================================================= */

/* themes/modern/partials/header.blade.php: the logo, every menu entry in the open and the actions, on
   the page width. A white pill follows the pointer along the menu; with `mix-blend-mode: difference`
   inside the isolated menu it turns the label under it dark, even while it slides. Entries with links
   open a wide panel under the bar and dim the page. Below 1240px the menu moves into the full-screen
   menu (partials/menu-overlay). */

.mh { position: fixed; inset: 0 0 auto; z-index: 20000; border-bottom: 1px solid var(--k-line); background: rgba(10, 11, 14, 0.84); background-origin: border-box; backdrop-filter: saturate(1.5) blur(20px); -webkit-backdrop-filter: saturate(1.5) blur(20px); transition: background-color 0.3s ease, border-color 0.3s ease; }
.page-home .mh:not(.is-scrolled):not(.is-open) { border-bottom-color: transparent; background: linear-gradient(180deg, rgba(5, 6, 8, 0.6) 0%, rgba(5, 6, 8, 0) 100%) border-box; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mh.is-open { border-bottom-color: transparent; background: #0d0f12; }

.mh__bar { position: relative; display: flex; align-items: center; gap: 28px; height: var(--k-header); }
.mh__brand { display: flex; flex: none; text-decoration: none; }
.mh__brand .m-brand { height: 44px; }

.mh__nav { position: relative; display: flex; align-self: stretch; margin: 0 auto; isolation: isolate; }
.mh__list { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.mh__item { display: flex; align-items: center; }

.mh__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: rgba(255, 255, 255, 0.8);
    font: 600 15px/1 var(--k-font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease;
}

.mh__link:hover, .mh__link[aria-expanded="true"], .mh__link.is-current { color: #ffffff; }
.mh__link.is-current { background: #ffffff; color: #0b0d10; }
/* Once the pill rests under the current entry, the label is inverted by the pill instead */
.mh__nav.has-pill .mh__link.is-current { background: none; color: #ffffff; }
.mh__chevron { width: 14px; height: 14px; opacity: 0.6; transition: transform 0.2s ease; }
.mh__link[aria-expanded="true"] .mh__chevron { transform: rotate(180deg); }

.mh__pill { position: absolute; top: 50%; left: 0; z-index: 1; width: var(--pill-w, 0); height: 40px; margin-top: -20px; border-radius: 999px; background: #ffffff; mix-blend-mode: difference; opacity: 0; pointer-events: none; transform: translateX(var(--pill-x, 0)); transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease; }
.mh__pill.is-visible { opacity: 1; }
.mh__pill.is-jump { transition: opacity 0.2s ease; }

.mh__actions { display: flex; flex: none; align-items: center; gap: 10px; }
.mh__signin { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; color: rgba(255, 255, 255, 0.85); font: 600 15px/1 var(--k-font); text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; }
.mh__signin:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.theme-modern .mh__cta { min-height: 42px; padding: 10px 22px; border-radius: 999px; white-space: nowrap; }
.mh__account { position: relative; }
.mh__avatar { display: grid; place-items: center; padding: 2px; border: 0; border-radius: 50%; background: none; box-shadow: 0 0 0 1px var(--k-line-2); cursor: pointer; transition: box-shadow 0.15s ease; }
.mh__avatar:hover, .mh__avatar[aria-expanded="true"] { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); }
.mh__avatar .avatar { width: 38px; height: 38px; }

/* "Menü" button (phones and tablets) */
.mh__toggle { display: none; align-items: center; gap: 12px; height: 42px; padding: 0 6px 0 18px; border: 0; border-radius: 999px; background: #f4f5f6; color: #0b0d10; font: 700 14px/1 var(--k-font); cursor: pointer; transition: background-color 0.15s ease; }
.mh__toggle:hover { background: #ffffff; }
.mh__lines { position: relative; width: 30px; height: 30px; border-radius: 50%; background: #0b0d10; }
.mh__lines i { position: absolute; top: 12px; left: 9px; width: 12px; height: 1.5px; border-radius: 1px; background: #ffffff; transition: transform 0.25s ease, top 0.25s ease, width 0.25s ease; }
.mh__lines i + i { top: 17px; width: 8px; }
.mh__toggle:hover .mh__lines i + i { width: 12px; }
.mh__toggle.is-open .mh__lines i { top: 14.25px; width: 12px; transform: rotate(45deg); }
.mh__toggle.is-open .mh__lines i + i { transform: rotate(-45deg); }

/* Menu panels (partials/mega): one sheet joined to the bar, the bar's own colour, as wide as the window.
   It opens downwards, takes the height of the panel it shows and slides between panels the way the
   pointer went; the page behind it dims. */

.mh__sheet { position: absolute; top: 100%; right: 0; left: 0; height: var(--sheet-h, 0px); overflow: hidden; border-bottom: 1px solid var(--k-line-2); background: #0d0f12; box-shadow: 0 60px 90px -30px rgba(0, 0, 0, 0.75); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 0.3s var(--k-ease), visibility 0s linear 0.3s; }
.mh__sheet.is-open { visibility: visible; clip-path: inset(0 0 -120px 0); transition: clip-path 0.5s var(--k-ease), height 0.45s var(--k-ease), visibility 0s; }
.mh__sheet::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--k-line-2) 20%, var(--k-line-2) 80%, transparent); }

.mh__drop { position: absolute; top: 0; right: 0; left: 0; visibility: hidden; opacity: 0; transform: translateX(48px); transition: opacity 0.25s ease, transform 0.45s var(--k-ease), visibility 0s linear 0.45s; }
.mh__drop.is-before { transform: translateX(-48px); }
.mh__drop.is-active { visibility: visible; opacity: 1; transform: none; transition: opacity 0.35s ease 0.05s, transform 0.5s var(--k-ease), visibility 0s; }

.mh__drop > .m-container { padding-top: 28px; padding-bottom: 36px; }
.mh__drop-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 64px; }
.mh__drop-text { margin: 0 0 16px; color: var(--k-muted); font-size: 15px; line-height: 1.5; }
.mh__drop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* Link rows; the white pill (modern.js) slides over them like it does along the menu */
.mh__drop-links { position: relative; display: grid; gap: 2px; margin: 0 -14px; isolation: isolate; }
.mh__drop-links--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }

.mh__row { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 10px 18px 10px 14px; border-radius: 999px; color: #ffffff; text-decoration: none; }
.mh__row--compact { gap: 12px; padding: 7px 16px 7px 10px; }
.mh__row-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.75); }
.mh__row--compact .mh__row-icon { width: 32px; height: 32px; }
.mh__row-icon svg { width: 19px; height: 19px; }
.mh__row--compact .mh__row-icon svg { width: 16px; height: 16px; }
.mh__row-body { display: flex; flex-direction: column; min-width: 0; }
.mh__row-label { font: 600 16px/1.3 var(--k-font); }
.mh__row--compact .mh__row-label { font-size: 14px; font-weight: 550; }
.mh__row-text { overflow: hidden; color: var(--k-muted); font-size: 13px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.mh__row-ext { width: 16px; height: 16px; flex: none; margin-left: auto; color: var(--k-faint); }

/* Formlar: one card per group, game art on top and every form of the group under it */
.mh__groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mh__group-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-xl); background: var(--k-surface); }
/* Head, description and form rows share one left edge (20px) and one icon column (36px) */
.mh__group-head { position: relative; display: flex; flex-wrap: wrap; align-content: flex-end; align-items: center; gap: 14px; height: 128px; padding: 18px 20px; overflow: hidden; isolation: isolate; }
.mh__group-head img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--k-ease-out); }
.mh__group-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--k-surface) 0%, rgba(20, 23, 28, 0.55) 55%, rgba(20, 23, 28, 0.15) 100%); }
.mh__group-card:hover .mh__group-head img { transform: scale(1.06); }
.mh__group-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: rgba(11, 13, 16, 0.55); color: #ffffff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mh__group-icon svg { width: 20px; height: 20px; }
.mh__group-name { flex: 1 1 0; min-width: 0; color: #ffffff; font: 800 26px/1 var(--k-display); font-stretch: var(--k-display-stretch); letter-spacing: -0.025em; }
.mh__group-text { margin: 0; padding: 2px 20px 12px; color: var(--k-muted); font-size: 13px; line-height: 1.5; }
.mh__group-links { position: relative; display: grid; gap: 2px; padding: 0 6px 12px; isolation: isolate; }
.mh__row--form { padding: 8px 16px 8px 14px; }
.mh__row--form .mh__row-icon { width: 36px; height: 36px; }
.mh__row--form .mh__row-icon svg { width: 17px; height: 17px; }
.mh__row--form .mh__row-label { font-size: 15px; }

/* Rehberler: the guides on the left; the one the pill is on shows on the right */
.mh__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; align-items: start; }
.mh__row--guide { padding: 12px 20px 12px 14px; }
.mh__row--guide .mh__row-icon { width: 44px; height: 44px; }
.mh__row--guide .mh__row-icon svg { width: 21px; height: 21px; }
.mh__row--guide .mh__row-label { font-size: 17px; }
.mh__panes { display: grid; }
.mh__pane { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.35s var(--k-ease), visibility 0s linear 0.35s; }
.mh__pane.is-shown { visibility: inherit; opacity: 1; transform: none; transition: opacity 0.3s ease 0.05s, transform 0.45s var(--k-ease), visibility 0s; }

.mh__preview { display: flex; flex-direction: column; gap: 10px; color: var(--k-strong); text-decoration: none; }
.mh__preview-media { display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: 6px; overflow: hidden; border-radius: 18px; background: var(--k-glow), var(--k-surface-2); }
.mh__preview-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--k-ease-out); }
.mh__pane.is-shown .mh__preview-media img { transform: none; }
.mh__preview-icon svg { width: 56px; height: 56px; color: var(--k-muted); }
.mh__preview-title { font: 800 26px/1.05 var(--k-display); font-stretch: var(--k-display-stretch); letter-spacing: -0.025em; }
.mh__preview-text { color: var(--k-muted); font-size: 14px; line-height: 1.6; }

/* Araçlar: one large picture per tool */
.mh__arts--tools .mh__art { min-height: 300px; padding: 28px; }
.mh__arts--tools .mh__art-body strong { font-size: 34px; }
.mh__arts--tools .mh__art-body span { font-size: 15px; }

/* Beside the links: pictures */
.mh__feature-title { margin: 0 0 14px; color: var(--k-faint); font: 600 11px/16px var(--k-font); letter-spacing: 0.1em; text-transform: uppercase; }
.mh__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mh__card { display: flex; flex-direction: column; gap: 6px; color: var(--k-strong); text-decoration: none; }
.mh__card-media { position: relative; display: block; aspect-ratio: 16 / 10; margin-bottom: 6px; overflow: hidden; border-radius: 14px; background: var(--k-surface-2); }
.mh__card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--k-ease-out); }
.mh__card:hover .mh__card-media img { transform: scale(1.06); }
.mh__card-meta { color: var(--k-accent-text); font: 600 12px/16px var(--k-font); }
.mh__card-title { display: -webkit-box; overflow: hidden; font: 650 15px/1.35 var(--k-font); -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: color 0.2s ease; }
.mh__card:hover .mh__card-title { color: #ffffff; }

.mh__arts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mh__art { position: relative; display: flex; align-items: flex-end; min-height: 230px; padding: 22px; overflow: hidden; border-radius: 18px; background: var(--k-surface-2); color: #ffffff; text-decoration: none; isolation: isolate; }
.mh__art img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--k-ease-out); }
.mh__art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 9, 12, 0.94) 5%, rgba(8, 9, 12, 0.35) 60%, rgba(8, 9, 12, 0.1) 100%); }
.mh__art:hover img { transform: scale(1.06); }
.mh__art-body { display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.mh__art-body strong { font: 800 24px/1.05 var(--k-display); font-stretch: var(--k-display-stretch); letter-spacing: -0.02em; }
.mh__art-body span { color: var(--k-text); font-size: 14px; line-height: 1.5; }
.mh__art-go { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; background: #ffffff; transition: transform 0.45s var(--k-ease); }
.mh__art-go::before { content: ""; position: absolute; inset: 0; background: #0b0d10; -webkit-mask: var(--k-arrow) center / 18px no-repeat; mask: var(--k-arrow) center / 18px no-repeat; }
.mh__art-go--out { transform: rotate(-45deg); }
.mh__art:hover .mh__art-go { transform: scale(1.08); }
.mh__art:hover .mh__art-go--out { transform: rotate(-45deg) scale(1.08); }

.mh-dim { position: fixed; inset: 0; z-index: 19999; background: rgba(4, 5, 7, 0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* Shared: dropdown panel (account), link lists */

.mh__panel { position: absolute; top: 100%; left: 0; z-index: 5; padding-top: 10px; }
.mh__panel--end { left: auto; right: 0; }

.mh__group ul { margin: 0; padding: 0; list-style: none; }
.mh__group-title { margin: 4px 10px 8px; color: var(--k-faint); font: 600 11px/16px var(--k-font); letter-spacing: 0.1em; text-transform: uppercase; }
.mh__group-footer { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 10px 10px 4px; }
.mh__group-footer a { color: var(--k-accent-text); font: 600 13px/20px var(--k-font); text-decoration: none; }
.mh__group-footer a:hover { color: #ffffff; }

.mh__sublink {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--k-radius);
    background: none;
    color: var(--k-strong);
    font: 500 14px/20px var(--k-font);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.mh__sublink:hover, .mh__sublink:focus-visible { background: var(--k-surface-3); }
.mh__sublabel { flex: 1; }
.mh__icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: var(--k-radius); background: var(--k-surface-2); color: var(--k-muted); transition: color 0.12s ease; }
.mh__icon svg { width: 17px; height: 17px; }
.mh__sublink:hover .mh__icon { color: var(--k-strong); }
.mh__ext { width: 15px; height: 15px; flex: none; color: var(--k-faint); }
.mh__count { padding: 0 7px; border-radius: 999px; background: var(--k-accent); color: #fff; font: 700 11px/20px var(--k-font); }

/* Shared: account menu (partials/account-menu) */

.theme-modern .avatar { background: var(--k-surface-3); color: var(--k-strong); font-family: var(--k-font); }
.theme-modern .avatar__badge { border-color: var(--k-bg); background: var(--k-accent); }
.mh__panel--account { width: 280px; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5)); }
.mh__panel--account > div, .mh__panel--account > ul { border-right: 1px solid var(--k-line-2); border-left: 1px solid var(--k-line-2); background: var(--k-surface); }
.mh__account-head { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px 14px; }
.mh__panel--account .mh__account-head { border-top: 1px solid var(--k-line-2); border-bottom: 1px solid var(--k-line); border-radius: var(--k-radius-lg) var(--k-radius-lg) 0 0; }
.mh__account-head strong { color: var(--k-strong); font: 600 15px/22px var(--k-font); }
.mh__account-head span { color: var(--k-muted); font-size: 13px; line-height: 18px; }
.mh__account-head em { align-self: flex-start; margin-top: 8px; padding: 2px 8px; border-radius: var(--k-radius-sm); background: var(--k-accent-soft); color: var(--k-accent-text); font: 600 11px/18px var(--k-font); font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; }
.mh__account-links { margin: 0; padding: 8px; list-style: none; }
.mh__panel--account .mh__account-links { border-bottom: 1px solid var(--k-line-2); border-radius: 0 0 var(--k-radius-lg) var(--k-radius-lg); }
.mh__account-links form { margin: 0; }

/* Full-screen menu (partials/menu-overlay) */

.mt {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background:
        radial-gradient(55% 45% at 90% 0%, rgba(211, 54, 58, 0.16) 0%, rgba(211, 54, 58, 0) 70%),
        radial-gradient(45% 55% at 0% 100%, rgba(143, 115, 255, 0.09) 0%, rgba(143, 115, 255, 0) 70%),
        #0b0d10;
}

.mt--enter { transition: opacity 0.3s ease, clip-path 0.5s cubic-bezier(0.7, 0, 0.2, 1); }
.mt--out { opacity: 0; clip-path: inset(0 0 100% 0); }
.mt .mh__bar { flex: none; justify-content: space-between; }
.mt .mh__toggle { display: inline-flex; }

/* Top-aligned: centring would move the list whenever a taller section opens under the pointer */
.mt__body { display: grid; flex: 1; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(280px, 3fr); gap: 56px; align-items: start; align-content: start; padding-top: clamp(24px, 6vh, 64px); padding-bottom: 56px; }

.mt__list { margin: 0; padding: 0; list-style: none; }
.mt__list > li { animation: mt-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i) * 45ms + 150ms); }

@keyframes mt-in { from { opacity: 0; transform: translateY(28px); } }

.mt__link {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    padding: 5px 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.92);
    font: 800 clamp(30px, 3.6vw, 54px)/1.08 var(--k-display);
    font-stretch: var(--k-display-stretch);
    letter-spacing: -0.01em;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease;
}

.mt__num { min-width: 28px; padding-top: 0.6em; color: var(--k-faint); font: 600 13px/1 var(--k-font); letter-spacing: 0.04em; transition: color 0.2s ease; }
.mt__link.is-current .mt__num, .mt__link:hover .mt__num, .mt__link.is-open .mt__num { color: var(--k-accent-text); }
.mt__chevron { flex: none; align-self: center; width: 0.55em; height: 0.55em; color: var(--k-accent-text); opacity: 0; transform: translateX(-10px); transition: opacity 0.2s ease, transform 0.2s ease; }
.mt__link:hover .mt__chevron, .mt__link.is-open .mt__chevron { opacity: 1; transform: none; }

/* Sections share one cell and fade in when shown, so quick hovering never stacks two of them */
.mt__panel { display: grid; min-height: 100%; padding-left: 32px; border-left: 1px solid var(--k-line); }
.mt__section { grid-area: 1 / 1; align-self: start; animation: mt-fade 0.2s ease; }

@keyframes mt-fade { from { opacity: 0; transform: translateY(6px); } }

.mt__section-title { margin: 6px 10px 14px; color: var(--k-faint); font: 600 12px/16px var(--k-font); letter-spacing: 0.1em; text-transform: uppercase; }
.mt__section .mh__sublink, .mt__inline .mh__sublink { padding: 8px 10px; color: var(--k-text); font-size: 15px; line-height: 22px; }
.mt__section .mh__group + .mh__group { margin-top: 10px; }
.mt__section .mh__sublink:hover, .mt__inline .mh__sublink:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
.mt__section .mh__icon, .mt__inline .mh__icon { background: rgba(255, 255, 255, 0.06); }

.mt__side { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--k-line); }
.mt__pitch { margin: 0 0 10px; color: var(--k-strong); font: 600 19px/1.45 var(--k-font); }
.mt__side .btn { width: 100%; }
.mt__account .mh__account-head { padding: 0 0 12px; border-bottom: 1px solid var(--k-line); }
.mt__account .mh__account-links { padding: 8px 0 0; }
.mt__games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; margin: 14px 0 0; padding: 20px 0 0; border-top: 1px solid var(--k-line); list-style: none; }
.mt__games img { width: auto; max-width: 100%; height: 26px; object-fit: contain; opacity: 0.7; }

@media (min-width: 901px) {
    .mt__list:hover .mt__link { color: rgba(255, 255, 255, 0.28); }
    .mt__list .mt__link:hover, .mt__list .mt__link.is-open { color: #ffffff; }
    .mt__inline { display: none !important; }
}

@media (max-width: 1240px) {
    .mh__nav, .mh__signin, .mh__account { display: none; }
    .mh__toggle { display: inline-flex; }
    .mh__actions { margin-left: auto; }
    .mt__body { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .mt__side { grid-column: 1 / -1; }
    .mt__games { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .theme-modern { --k-header: 64px; }
    .mh__brand .m-brand { height: 36px; }
    .mt__body { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 12px; }
    .mt__panel { display: none; }
    .mt__link { padding: 8px 0; font-size: 30px; }
    .mt__link.is-open { color: var(--k-accent-text); }
    .mt__chevron { opacity: 1; transform: rotate(90deg); color: var(--k-faint); }
    .mt__link.is-open .mt__chevron { transform: rotate(-90deg); color: var(--k-accent-text); }
    .mt__inline { padding: 4px 0 10px 46px; }
}

@media (max-width: 520px) {
    .theme-modern .mh__cta { display: none; }
}

/* ======================================================================= */
/* Footer                                                                   */
/* ======================================================================= */

.mf { margin-top: auto; border-top: 1px solid var(--k-line); background: var(--k-bg); color: var(--k-muted); font-family: var(--k-font); }
.mf__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 40px; padding: 64px 0 48px; }
.mf__brand a { text-decoration: none; }
.mf__brand p { max-width: 320px; margin: 20px 0 22px; font-size: 14px; line-height: 1.65; }
.mf__discord { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--k-line-2); color: var(--k-strong); font: 600 13px/20px var(--k-font); text-decoration: none; transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.mf__discord:hover { background: #5865f2; box-shadow: none; }
.mf__discord svg { width: 18px; height: 18px; }
.mf__col h2 { margin-bottom: 16px; color: var(--k-faint); font: 600 12px/16px var(--k-font); letter-spacing: 0.1em; text-transform: uppercase; }
.mf__col ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mf__col a { display: inline-block; color: var(--k-text); font-size: 14px; line-height: 20px; text-decoration: none; transition: color 0.2s ease, transform 0.3s var(--k-ease); }
.mf__col a:hover { color: #ffffff; transform: translateX(4px); }
.mf__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding: 20px 0 28px; border-top: 1px solid var(--k-line); color: var(--k-faint); font-size: 12px; line-height: 18px; }
.mf__bottom p:nth-child(2) { margin-left: auto; }
/* "Yukarı çık": a small round button with the arrow pointing up, white on hover like the menu pill */
.mf__up { display: grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1px var(--k-line-2); color: var(--k-strong); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.mf__up::before { content: ""; width: 16px; height: 16px; background: currentColor; transform: rotate(-90deg); -webkit-mask: var(--k-arrow) center / contain no-repeat; mask: var(--k-arrow) center / contain no-repeat; transition: transform 0.35s var(--k-ease); }
.mf__up:hover { background: #ffffff; box-shadow: none; color: #0b0d10; }
.mf__up:hover::before { transform: rotate(-90deg) translateX(3px); }

@media (max-width: 1024px) { .mf__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mf__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .mf__top { gap: 32px 20px; padding: 48px 0 36px; } .mf__bottom p:nth-child(2) { margin-left: 0; } }

/* Look switcher (KEP_THEME_SWITCHER) */

.theme-modern .theme-switch { border: 1px solid var(--k-line-2); background: rgba(20, 23, 28, 0.95); }
.theme-modern .theme-switch__option { color: var(--k-muted); }
.theme-modern .theme-switch__option.is-active { background: var(--k-strong); color: var(--k-bg); }

/* ======================================================================= */
/* Shared components                                                        */
/* ======================================================================= */

/* Toast */

.theme-modern .toast { top: calc(var(--k-header) + 16px); padding: 14px 14px 14px 18px; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-lg); background: var(--k-surface-2); color: var(--k-strong); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5); font-size: 15px; line-height: 22px; }
.theme-modern .toast::before { inset: 10px auto 10px 0; width: 3px; border-radius: 0 3px 3px 0; }
.theme-modern .toast--success .toast__icon { color: var(--k-green); }
.theme-modern .toast--error .toast__icon { color: var(--k-accent-text); }
.theme-modern .toast__close { color: var(--k-muted); }

/* Masthead: a big sentence-case title on the page edge, the menu panels' red glow in the corner. Image
   mastheads show their art on the right, fading into the page like the home hero. The parts rise in
   on load (Motion, end of file). */

.theme-modern .masthead { align-items: flex-end; padding: 72px 0 56px; border-bottom: 1px solid var(--k-line); background: radial-gradient(46% 130% at 100% 0%, rgba(211, 54, 58, 0.15) 0%, rgba(211, 54, 58, 0) 62%), var(--k-bg); color: var(--k-text); isolation: isolate; }
.theme-modern .masthead > .container { position: relative; z-index: 2; }
.theme-modern .masthead__inner { max-width: none; padding-top: 0; }
/* Line height leaves room for Turkish marks when a title wraps (the cedilla of Ç over the dots of Ü) */
.theme-modern .masthead__title { font-weight: 800; font-size: clamp(42px, 6vw, 88px); line-height: 1.12; letter-spacing: -0.03em; }
.theme-modern .masthead__text { max-width: 640px; margin-top: 20px; color: var(--k-text); font-size: 18px; line-height: 1.6; }
.theme-modern .masthead__title + .masthead__text { margin-top: 20px; }
.theme-modern .masthead--image { padding-top: 104px; background: var(--k-bg); }
.theme-modern .masthead--image .masthead__bg { left: auto; width: min(70%, 1180px); opacity: 0.85; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%); }
.theme-modern .masthead--image::after { background: linear-gradient(90deg, var(--k-bg) 28%, rgba(11, 13, 16, 0.55) 62%, rgba(11, 13, 16, 0.25) 100%), linear-gradient(0deg, var(--k-bg) 0%, rgba(11, 13, 16, 0) 55%); }

@media (max-width: 900px) {
    .theme-modern .masthead--image .masthead__bg { width: 100%; opacity: 0.5; -webkit-mask-image: none; mask-image: none; }
    .theme-modern .masthead--image::after { background: linear-gradient(0deg, var(--k-bg) 0%, rgba(11, 13, 16, 0.7) 60%, rgba(11, 13, 16, 0.5) 100%); }
}

@media (max-width: 600px) { .theme-modern .masthead { padding: 44px 0 32px; } .theme-modern .masthead--image { padding-top: 72px; } .theme-modern .masthead__text { margin-top: 14px; font-size: 16px; } }

/* Back links: the "←" in the text gives way to an arrow in a ring that fills white on hover */
.theme-modern .back-link { position: relative; display: flex; width: fit-content; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--k-muted); font: 600 14px/20px var(--k-font); letter-spacing: 0; text-decoration: none; text-transform: none; transition: color 0.2s ease; }
.theme-modern .back-link__arrow { display: none; }
.theme-modern .back-link::before { content: ""; width: 32px; height: 32px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--k-line-3); transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.theme-modern .back-link::after { content: ""; position: absolute; top: 50%; left: 0; width: 32px; height: 32px; margin-top: -16px; background: currentColor; transform: rotate(180deg); -webkit-mask: var(--k-arrow) center / 15px no-repeat; mask: var(--k-arrow) center / 15px no-repeat; transition: background-color 0.2s ease, transform 0.3s var(--k-ease); }
.theme-modern .back-link:hover { color: var(--k-strong); }
.theme-modern .back-link:hover::before { background: #ffffff; box-shadow: none; }
.theme-modern .back-link:hover::after { background: #0b0d10; transform: rotate(180deg) translateX(2px); }

/* Small arrows after link labels (external links, "Tüm formlar") */
.m-ext { display: inline-block; width: 14px; height: 14px; margin-left: 2px; vertical-align: -2px; opacity: 0.7; }

/* Section heads: left aligned. With a paragraph, the title sits left and the paragraph right, the way the
   menu panels pair their title with a description. */

.theme-modern .section-head { max-width: none; margin: 0 0 8px; text-align: left; }
.theme-modern .section-head__text { max-width: 620px; margin: 16px 0 0; }

@media (min-width: 1025px) {
    .theme-modern .section-head:has(.section-head__text) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: end; }
    .theme-modern .section-head:has(.section-head__text) > * { grid-column: 1; }
    .theme-modern .section-head:has(.section-head__text) > .section-head__text { grid-row: 1 / span 2; grid-column: 2; align-self: end; margin: 0; }
}

.theme-modern .section-bar { align-items: flex-end; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--k-line); }
.theme-modern .section-bar .supertitle { margin-bottom: 10px; }
.theme-modern .center-actions { justify-content: flex-start; margin-top: 36px; }

/* News cards */

.theme-modern .news-grid { gap: 40px 24px; }
.theme-modern .news-card { display: flex; flex-direction: column; color: var(--k-strong); }
.theme-modern .news-card__media { border-radius: var(--k-radius-lg); isolation: isolate; }
.theme-modern .news-card__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); pointer-events: none; }
.theme-modern .news-card__ratio { background: var(--k-surface); }
.theme-modern .news-card__ratio img { transition: transform 0.9s var(--k-ease-out), filter 0.4s ease; }
.theme-modern .news-card:hover .news-card__ratio img, .theme-modern .news-card:focus-visible .news-card__ratio img { transform: scale(1.06); filter: brightness(1.08); }

/* The menu's white pill, as a round "open" button that turns from ↗ to → on hover */
.theme-modern .news-card__badge { right: 14px; bottom: 14px; z-index: 1; width: 42px; height: 42px; border-radius: 50%; background: #ffffff; opacity: 0; transform: scale(0.5) rotate(-45deg); transition: opacity 0.25s ease, transform 0.45s var(--k-ease); }
.theme-modern .news-card__badge::before { content: ""; position: absolute; inset: 0; background: #0b0d10; -webkit-mask: var(--k-arrow) center / 18px no-repeat; mask: var(--k-arrow) center / 18px no-repeat; }
.theme-modern .news-card:hover .news-card__badge, .theme-modern .news-card:focus-visible .news-card__badge { opacity: 1; transform: none; }
.theme-modern .news-card__play { width: 52px; height: 52px; border-radius: 50%; background: rgba(11, 13, 16, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.8v12.4a1 1 0 0 0 1.5.86l10-6.2a1 1 0 0 0 0-1.72l-10-6.2A1 1 0 0 0 8 5.8Z'/%3E%3C/svg%3E") 55% 50% / 22px no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.theme-modern .news-card__lock { top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(11, 13, 16, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 11px/16px var(--k-font); letter-spacing: 0.04em; }

.theme-modern .meta-row { gap: 0; margin: 14px 0 6px; color: var(--k-muted); font: 500 13px/20px var(--k-font); }
.theme-modern .meta-row__category { color: var(--k-accent-text); font-weight: 600; }
.theme-modern .meta-row__sep { height: 12px; margin: 0 10px; background: var(--k-line-2); }
.theme-modern .news-card__title { margin-bottom: 6px; color: var(--k-strong); font: 700 19px/1.35 var(--k-font); letter-spacing: -0.015em; transition: color 0.15s ease; }
.theme-modern .news-card:hover .news-card__title { color: #ffffff; }
.theme-modern .news-card__text { color: var(--k-muted); font-size: 15px; line-height: 1.55; }

@media (max-width: 1024px) { .theme-modern .news-card__title { font-size: 17px; } .theme-modern .news-card__text { font-size: 14px; } .theme-modern .meta-row { font-size: 12px; } }
@media (max-width: 600px) { .theme-modern .news-card__title { font-size: 16px; line-height: 1.4; } .theme-modern .meta-row { font-size: 12px; line-height: 18px; } .theme-modern .news-card__text { font-size: 14px; } }

.theme-modern .show-more { display: flex; justify-content: center; margin-top: 48px; }
.theme-modern .show-more__divider { display: none; }
.theme-modern .show-more__button { gap: 8px; margin: 0; padding: 11px 22px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--k-line-3); color: var(--k-strong); font: 600 15px/20px var(--k-font); letter-spacing: 0; text-transform: none; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.theme-modern .show-more__button:hover { background: #ffffff; box-shadow: inset 0 0 0 1px #ffffff; color: #0b0d10; }
.theme-modern .show-more__button::after { width: 14px; height: 14px; margin: 0; background: currentColor; transition: transform 0.35s var(--k-ease); }
.theme-modern .show-more__button:hover::after { transform: rotate(90deg); }

/* Tabs: a segmented bar. modern.js adds the menu's sliding white pill (`has-pill`); without it the
   active tab is simply white. */
.theme-modern .category-tabs { position: relative; display: flex; flex-wrap: nowrap; width: fit-content; max-width: 100%; gap: 2px; margin-bottom: 32px; padding: 4px; overflow-x: auto; border: 1px solid var(--k-line-2); border-radius: 999px; background: rgba(255, 255, 255, 0.02); isolation: isolate; scrollbar-width: none; }
.theme-modern .category-tabs::-webkit-scrollbar { display: none; }
.theme-modern .category-tabs a { flex: none; padding: 7px 16px; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, 0.78); font: 600 14px/22px var(--k-font); white-space: nowrap; }
.theme-modern .category-tabs a:hover { color: #ffffff; }
.theme-modern .category-tabs a.is-active { background: #ffffff; color: #0b0d10; }
.theme-modern .category-tabs.has-pill a.is-active { background: none; color: #ffffff; }
/* The white pill modern.js adds to tabs and link lists ([data-pill]); the list is isolated, so with
   `difference` it turns the label under it dark, as in the header menu */
.m-pill { position: absolute; top: 0; left: 0; z-index: 1; width: var(--pill-w, 0); height: var(--pill-h, 0); border-radius: var(--pill-radius, 999px); background: #ffffff; mix-blend-mode: difference; opacity: 0; pointer-events: none; transform: translate(var(--pill-x, 0), var(--pill-y, 0)); transition: transform 0.4s var(--k-ease), width 0.4s var(--k-ease), height 0.4s var(--k-ease), opacity 0.2s ease; }
.m-pill.is-shown { opacity: 1; }
.m-pill.is-instant { transition: opacity 0.2s ease; }

/* Article */

.theme-modern .article-hero { padding-top: 40px; background: var(--k-bg); }
.theme-modern .article-hero__backdrop { display: none; }
.theme-modern .article-hero__image, .theme-modern .article-hero__video { overflow: hidden; border-radius: var(--k-radius-xl); background: var(--k-surface); }
/* A wide crop keeps the text close to the top */
.theme-modern .article-hero__image { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
/* The page width is shared with the header, so the title sits on its left edge like everything else */
.theme-modern .article-hero + .blade { padding-top: 48px; }
.theme-modern .article-head { align-items: flex-start; gap: 18px; padding: 0 0 8px; text-align: left; }
.theme-modern .article-title { max-width: 1000px; font-weight: 800; font-size: clamp(32px, 3.8vw, 56px); font-stretch: var(--k-display-stretch); line-height: 1.08; letter-spacing: -0.03em; }
.theme-modern .article-tagline { max-width: 820px; color: var(--k-text); font-size: 19px; line-height: 1.6; }
.theme-modern .article-divider { display: none; }
.theme-modern .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; color: var(--k-muted); font: 500 14px/20px var(--k-font); }
.theme-modern .article-meta > * + *::before { content: "·"; padding: 0 10px; color: var(--k-faint); }
.theme-modern .article-meta a { margin-right: 6px; padding: 5px 12px 5px 11px; border: 1px solid var(--k-line-2); border-radius: 999px; color: var(--k-strong); font-weight: 600; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.theme-modern .article-meta a::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--k-accent-text); vertical-align: 1px; }
.theme-modern .article-meta a + *::before { display: none; }
.theme-modern .article-meta a:hover { border-color: #ffffff; background: #ffffff; color: #0b0d10; }

@media (max-width: 1024px) { .theme-modern .article-hero { padding-top: 20px; } .theme-modern .article-hero .container { padding: 0 var(--edge); } .theme-modern .article-tagline { font-size: 16px; } .theme-modern .article-meta { font-size: 13px; } }

/* Rich text */

/* Long text keeps a readable line length on the page's left edge */
.theme-modern .rich-text { max-width: 820px; color: var(--k-text); font-size: 17px; line-height: 1.75; }
.theme-modern .rich-text > * { margin: 22px 0; }
.theme-modern .rich-text > :first-child { margin-top: 0; }
.theme-modern .rich-text > :last-child { margin-bottom: 0; }
.theme-modern .rich-text h1, .theme-modern .rich-text h2 { margin-top: 44px; color: var(--k-strong); font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; }
.theme-modern .rich-text h3 { margin-top: 32px; color: var(--k-strong); font-size: 19px; line-height: 1.4; }
.theme-modern .rich-text h4 { color: var(--k-strong); }
.theme-modern .rich-text li::marker { color: var(--k-accent-text); }
.theme-modern .rich-text a { color: var(--k-strong); text-decoration-color: var(--k-accent); text-decoration-thickness: 2px; }
.theme-modern .rich-text a:hover { color: var(--k-accent-text); }
.theme-modern .rich-text blockquote { margin-right: 0; margin-left: 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--k-accent); color: var(--k-strong); font: 600 21px/1.5 var(--k-font); text-align: left; }
.theme-modern .rich-text blockquote p + p { color: var(--k-muted); font-size: 15px; }
.theme-modern .rich-text hr { border-top-color: var(--k-line-2); }
.theme-modern .rich-text img, .theme-modern .rich-text iframe { border-radius: var(--k-radius-lg); }
.theme-modern .rich-text figcaption { color: var(--k-muted); font-weight: 500; text-transform: none; }
.theme-modern .rich-text pre { border-radius: var(--k-radius); background: var(--k-surface); color: var(--k-strong); }
.theme-modern .rich-text code { padding: 1px 6px; border-radius: var(--k-radius-sm); background: var(--k-surface-2); color: var(--k-strong); font-size: 0.9em; }
.theme-modern .rich-text pre code { padding: 0; background: none; }
.theme-modern .rich-text table { overflow: hidden; border: 1px solid var(--k-line-2); border-collapse: separate; border-spacing: 0; border-radius: var(--k-radius-lg); }
.theme-modern .rich-text th { background: var(--k-surface); color: var(--k-muted); font: 600 12px/16px var(--k-font); letter-spacing: 0.06em; }
.theme-modern .rich-text td, .theme-modern .rich-text th { border-bottom: 1px solid var(--k-line); font-size: 15px; }
.theme-modern .rich-text td { color: var(--k-text); }
.theme-modern .rich-text tbody tr:last-child td { border-bottom: 0; }
.theme-modern .rich-text tbody tr:nth-child(odd) td { background: transparent; }
.theme-modern .rich-text tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }

@media (max-width: 600px) { .theme-modern .rich-text { font-size: 16px; } .theme-modern .rich-text td, .theme-modern .rich-text th { font-size: 13px; } }

.theme-modern .related { padding: 64px 0; border-top: 1px solid var(--k-line); background: var(--k-bg-2); }
.theme-modern .related__title { font-weight: 800; font-size: 28px; }
.theme-modern .page-updated { color: var(--k-muted); }

/* Pillars and steps (program page) */

/* Pillars and steps sit on a hairline; on hover a red line runs along it, like the hero's tab bars */
.theme-modern .pillars { gap: 0; margin-top: 40px; border-top: 1px solid var(--k-line); }
.theme-modern .pillar { position: relative; padding: 28px 28px 32px 0; border-top: 0; background: none; }
.theme-modern .pillar + .pillar { padding-left: 28px; border-left: 1px solid var(--k-line); }
.theme-modern .pillar::before, .theme-modern .step::before { content: ""; position: absolute; top: -1px; right: 0; left: 0; height: 2px; background: var(--k-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--k-ease-out); }
.theme-modern .pillar:hover::before, .theme-modern .step:hover::before { transform: none; }
.theme-modern .pillar__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 20px; border-radius: var(--k-radius); background: var(--k-accent-soft); color: var(--k-accent-text); transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--k-ease); }
.theme-modern .pillar:hover .pillar__icon { background: var(--k-accent); color: #ffffff; transform: rotate(-6deg) scale(1.06); }
.theme-modern .pillar__icon svg { width: 22px; height: 22px; }
.theme-modern .pillar__title { margin-bottom: 8px; font-weight: 700; font-size: 17px; line-height: 1.35; }
.theme-modern .pillar p { color: var(--k-muted); font-size: 15px; line-height: 1.6; }

@media (max-width: 1024px) {
    .theme-modern .pillar, .theme-modern .pillar + .pillar { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--k-line); }
    .theme-modern .pillars { column-gap: 32px; }
}

.theme-modern .steps { gap: 0; margin-top: 40px; border-top: 1px solid var(--k-line); }
.theme-modern .step { position: relative; padding: 28px 28px 32px 0; border: 0; background: none; }
.theme-modern .step + .step { padding-left: 28px; border-left: 1px solid var(--k-line); }
.theme-modern .step__number { margin-bottom: 22px; color: var(--k-faint); font: 800 44px/1 var(--k-display); font-stretch: var(--k-display-stretch); letter-spacing: -0.03em; transition: color 0.3s ease; }
.theme-modern .step:hover .step__number { color: var(--k-accent-text); }
.theme-modern .step__title { margin-bottom: 8px; font-weight: 700; font-size: 18px; line-height: 1.35; }
.theme-modern .step p { color: var(--k-muted); font-size: 15px; line-height: 1.6; }

@media (max-width: 1024px) { .theme-modern .step, .theme-modern .step + .step { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--k-line); } }

/* FAQ */

/* FAQ: numbered like the full-screen menu; the round toggle fills white when open */
.theme-modern .faq { border-top: 1px solid var(--k-line-2); counter-reset: faq; }
.theme-modern .faq__item { border-bottom: 1px solid var(--k-line-2); counter-increment: faq; }
.theme-modern .faq__question { justify-content: flex-start; gap: 16px; padding: 22px 0; color: rgba(255, 255, 255, 0.86); font: 600 18px/1.45 var(--k-font); transition: color 0.2s ease; }
.theme-modern .faq__question::before { content: counter(faq, decimal-leading-zero); flex: none; min-width: 36px; color: var(--k-faint); font: 600 13px/1 var(--k-font); letter-spacing: 0.04em; transition: color 0.2s ease; }
.theme-modern .faq__question:hover, .theme-modern .faq__item.is-open .faq__question { color: #ffffff; }
.theme-modern .faq__question:hover::before, .theme-modern .faq__item.is-open .faq__question::before { color: var(--k-accent-text); }
.theme-modern .faq__icon { width: 34px; height: 34px; margin-left: auto; padding-left: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--k-line-3); transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.4s var(--k-ease); }
.theme-modern .faq__icon::before, .theme-modern .faq__icon::after { top: 16px; left: 11px; width: 12px; height: 2px; border-radius: 1px; background: var(--k-strong); }
.theme-modern .faq__question:hover .faq__icon { box-shadow: inset 0 0 0 1px #ffffff; }
.theme-modern .faq__item.is-open .faq__icon { background: #ffffff; box-shadow: none; transform: rotate(180deg); }
.theme-modern .faq__item.is-open .faq__icon::before, .theme-modern .faq__item.is-open .faq__icon::after { background: #0b0d10; }
.theme-modern .faq__answer p { max-width: 760px; padding: 0 0 24px 52px; color: var(--k-text); font-size: 16px; line-height: 1.7; }

@media (max-width: 600px) {
    .theme-modern .faq__question { font-size: 16px; }
    .theme-modern .faq__question::before { min-width: 20px; }
    .theme-modern .faq__answer p { padding-left: 36px; }
}

/* Notices, empty states, chips, status */

.theme-modern .notice { gap: 14px; padding: 16px 18px; border: 1px solid var(--k-line-2); border-left: 3px solid var(--k-blue); border-radius: var(--k-radius); background: var(--k-surface); color: var(--k-text); font-size: 15px; line-height: 1.6; }
.theme-modern .notice__icon { color: var(--k-blue); }
.theme-modern .notice--success { border-left-color: var(--k-green); }
.theme-modern .notice--success .notice__icon { color: var(--k-green); }
.theme-modern .notice--warning { border-left-color: var(--k-yellow); }
.theme-modern .notice--warning .notice__icon { color: var(--k-yellow); }
.theme-modern .notice--error { border-left-color: var(--k-accent); }
.theme-modern .notice--error .notice__icon { color: var(--k-accent-text); }
.theme-modern .notice .link-arrow { font-size: 14px; }

.theme-modern .empty-state { border: 1px dashed var(--k-line-3); border-radius: var(--k-radius-lg); background: transparent; }
.theme-modern .empty-state p { color: var(--k-muted); }
.theme-modern .empty-state__icon { background: var(--k-surface-2); color: var(--k-muted); }

.theme-modern .chip { background: var(--k-surface-2); color: var(--k-text); font-size: 13px; }

.theme-modern .status-pill { gap: 7px; padding: 3px 10px 3px 9px; border-radius: 999px; font: 600 12px/18px var(--k-font); letter-spacing: 0.02em; }
.theme-modern .status-pill::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.theme-modern .status-pill--gray { background: rgba(255, 255, 255, 0.08); color: var(--k-text); }
.theme-modern .status-pill--info { background: rgba(90, 168, 255, 0.14); color: #8cc2ff; }
.theme-modern .status-pill--success { background: rgba(63, 207, 142, 0.14); color: #6ee0aa; }
.theme-modern .status-pill--warning { background: rgba(242, 181, 58, 0.14); color: #f6c86b; }
.theme-modern .status-pill--danger { background: var(--k-accent-soft); color: var(--k-accent-text); }
.theme-modern .status-pill--primary { background: rgba(255, 255, 255, 0.12); color: var(--k-strong); }
.theme-modern .status-pill--large { padding: 6px 14px 6px 12px; font-size: 14px; line-height: 20px; }
.theme-modern .status-pill--large::before { width: 7px; height: 7px; }

/* Tables and pagination */

.theme-modern .table-wrap { border: 1px solid var(--k-line-2); border-radius: var(--k-radius-lg); background: var(--k-surface); }
.theme-modern .table { color: var(--k-text); font-size: 15px; }
.theme-modern .table th { padding: 14px 20px; border-bottom: 1px solid var(--k-line-2); color: var(--k-faint); font: 600 11px/16px var(--k-font); letter-spacing: 0.1em; }
.theme-modern .table td { padding: 14px 20px; border-bottom: 1px solid var(--k-line); transition: background-color 0.2s ease; }
.theme-modern .table tbody tr:last-child td { border-bottom: 0; }
.theme-modern .table tbody tr:hover { background: none; }
.theme-modern .table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
/* "Görüntüle": an outlined pill that turns white with its row */
.theme-modern .table__link { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--k-line-3); color: var(--k-strong); font: 600 13px/18px var(--k-font); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.theme-modern .table tbody tr:hover .table__link, .theme-modern .table__link:focus-visible { background: #ffffff; box-shadow: inset 0 0 0 1px #ffffff; color: #0b0d10; }

.theme-modern .pagination { gap: 6px; }
.theme-modern .pagination__item { min-width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--k-line-2); color: var(--k-text); font: 600 14px var(--k-font); transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.theme-modern .pagination__item:hover { box-shadow: inset 0 0 0 1px var(--k-line-3); color: var(--k-strong); }
.theme-modern .pagination__item.is-active { background: #ffffff; box-shadow: none; color: #0b0d10; }
.theme-modern .pagination__item.is-disabled { color: var(--k-faint); box-shadow: inset 0 0 0 1px var(--k-line); }
/* The first and last items hold "←" and "→": drawn as icons */
.theme-modern .pagination > :first-child, .theme-modern .pagination > :last-child { font-size: 0; }
.theme-modern .pagination > :first-child::before, .theme-modern .pagination > :last-child::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--k-arrow) center / contain no-repeat; mask: var(--k-arrow) center / contain no-repeat; }
.theme-modern .pagination > :first-child::before { transform: rotate(180deg); }

/* ======================================================================= */
/* Detail pages                                                             */
/* ======================================================================= */

/* Two layouts for detail pages (templates under themes/modern):
   - reading pages (article, guide, KVKK, form): title and text in one centred column (.m-read);
   - a submission and the profile: the content beside one box that follows the page (.m-layout).
     Below 1100px the box drops under the content. */

.m-read { max-width: 760px; margin: 0 auto; }
.m-read--form { max-width: 880px; }
.m-read .rich-text { max-width: none; }
.m-read__head { max-width: 1000px; margin: 0 auto 44px; padding: 0 0 40px; border-bottom: 1px solid var(--k-line); }
.theme-modern .m-read__head { align-items: center; padding-bottom: 40px; text-align: center; }
.theme-modern .m-read__head .article-meta { justify-content: center; }
.theme-modern .m-read__head .article-tagline { margin: 0 auto; }

/* Centred masthead for the reading pages */
.theme-modern .masthead--center { background: radial-gradient(50% 120% at 50% 0%, rgba(211, 54, 58, 0.14) 0%, rgba(211, 54, 58, 0) 65%), var(--k-bg); text-align: center; }
.theme-modern .masthead--center .masthead__inner { display: flex; flex-direction: column; align-items: center; max-width: 1200px; margin: 0 auto; }
.theme-modern .masthead--center .masthead__text { margin-right: auto; margin-left: auto; }
.theme-modern .masthead--center .form-facts { justify-content: center; }
.theme-modern .masthead--center.masthead--image .masthead__bg { width: 100%; opacity: 0.4; -webkit-mask-image: none; mask-image: none; }
.theme-modern .masthead--center.masthead--image::after { background: linear-gradient(0deg, var(--k-bg) 0%, rgba(11, 13, 16, 0.72) 55%, rgba(11, 13, 16, 0.5) 100%); }

/* Program: the opening text with the program in brief beside it */
.m-intro { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 80px; align-items: start; }
.m-intro .rich-text { max-width: 760px; }

@media (max-width: 1024px) { .m-intro { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

.m-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: start; }
.m-layout--start { grid-template-columns: 320px minmax(0, 1fr); }
.m-layout__main { min-width: 0; }
.m-layout__aside { position: sticky; top: calc(var(--k-header) + 24px); display: grid; gap: 16px; }
.m-section { padding-top: 64px; padding-bottom: 96px; }
.m-section--tight { padding-top: 48px; }

@media (max-width: 1100px) {
    .m-layout, .m-layout--start { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .m-layout__aside { position: static; }
    .m-layout--start .m-layout__aside { order: -1; }
    .m-layout__aside .m-box--wide { display: none; }
}

@media (max-width: 600px) { .m-section { padding-top: 40px; padding-bottom: 64px; } }

/* Side boxes */
.m-box { padding: 22px 22px 24px; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-xl); background: var(--k-surface); }
.m-box--glow { background: var(--k-glow), var(--k-surface); }
.m-box__title { margin: 0 0 14px; color: var(--k-faint); font: 600 11px/16px var(--k-font); letter-spacing: 0.1em; text-transform: uppercase; }
.m-box__lead { margin: 0 0 18px; color: var(--k-strong); font: 700 22px/1.15 var(--k-display); font-stretch: var(--k-display-stretch); letter-spacing: -0.02em; }
.m-box .btn { width: 100%; }
.m-box .btn + .btn { margin-top: 8px; }

/* Facts: label left, value right */
.m-facts { display: grid; margin: 0; }
.m-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--k-line); }
.m-facts > div:first-child { padding-top: 0; border-top: 0; }
.m-facts > div:last-child { padding-bottom: 0; }
.m-facts dt { flex: none; color: var(--k-muted); font-size: 14px; }
.m-facts dd { min-width: 0; margin: 0; color: var(--k-strong); font-size: 14px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.m-facts dd a { color: inherit; text-decoration-color: var(--k-accent); text-underline-offset: 3px; }

/* Section links (profile); the pill marks the section being read (modern.js) */
.m-toc { position: relative; display: grid; gap: 1px; margin: 0 -10px; padding: 0; list-style: none; isolation: isolate; }
.m-toc a { display: block; padding: 7px 14px; border-radius: 999px; color: var(--k-text); font: 500 14px/1.4 var(--k-font); text-decoration: none; }
.m-toc a:hover, .m-toc a[aria-current] { color: #ffffff; }

/* Profile: identity and section links on the left, following the page */
.m-me { text-align: center; }
.m-me .avatar { width: 88px; height: 88px; margin: 0 auto 14px; font-size: 28px; }
.m-me__name { color: var(--k-strong); font: 800 22px/1.15 var(--k-display); font-stretch: var(--k-display-stretch); letter-spacing: -0.02em; }
.m-me__meta { margin-top: 6px; color: var(--k-muted); font-size: 13px; line-height: 1.5; }
.m-me .profile-card__eyebrow { margin: 0 0 14px; }
.m-me__link { display: inline-flex; margin-top: 16px; }
.m-box__actions { display: grid; gap: 8px; margin-top: 20px; }
.m-box__actions .btn + .btn { margin-top: 0; }
.m-facts--spaced { margin-top: 18px; }
.m-layout__main .notifications { margin-top: 16px; }

/* Profile form: the long public profile on the right, the shorter sections stacked on the left */
@media (min-width: 1300px) {
    .m-profile-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; grid-template-areas: "riot public" "personal public" "rewards public" "submit submit"; align-items: start; }
    .m-profile-form #riot-hesabi { grid-area: riot; }
    .m-profile-form #kisisel-bilgiler { grid-area: personal; }
    .m-profile-form #elci-profili { grid-area: public; }
    .m-profile-form #odul-ve-teslimat { grid-area: rewards; }
    .m-profile-form .form-submit { grid-area: submit; }
}

.m-save { position: relative; display: grid; gap: 10px; }
.m-save p { color: var(--k-muted); font-size: 13px; line-height: 1.5; text-align: center; }

/* ======================================================================= */
/* Forms                                                                    */
/* ======================================================================= */

.theme-modern .page-form main { background: var(--k-bg); }
.theme-modern .form-page { padding: 40px 0 88px; }
.theme-modern .kep-form { gap: 16px; }

.theme-modern .form-section { padding: 30px 32px 34px; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-xl); background: var(--k-surface); box-shadow: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
/* The section being filled in lifts out a little */
.theme-modern .form-section:focus-within { border-color: var(--k-line-3); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8); }
.theme-modern .form-section__title { margin-bottom: 6px; font-weight: 700; font-size: 20px; line-height: 1.35; letter-spacing: -0.015em; }
.theme-modern .form-section__text { color: var(--k-muted); font-size: 15px; line-height: 1.6; }
.theme-modern .form-grid { gap: 22px 18px; }

.theme-modern .field { gap: 8px; }
.theme-modern .field__label { color: var(--k-strong); font: 600 14px/20px var(--k-font); }
.theme-modern .field__required { color: var(--k-accent-text); }
.theme-modern .field__help { color: var(--k-muted); font-size: 13px; line-height: 1.5; }
.theme-modern .field__error { color: var(--k-accent-text); font: 500 13px/1.5 var(--k-font); }

.theme-modern .input, .theme-modern .textarea, .theme-modern .select {
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid var(--k-line-2);
    border-radius: var(--k-radius);
    background: var(--k-bg);
    color: var(--k-strong);
    font: 400 15px/22px var(--k-font);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.theme-modern .input:hover, .theme-modern .textarea:hover, .theme-modern .select:hover { border-color: var(--k-line-3); }
.theme-modern .input:focus, .theme-modern .textarea:focus, .theme-modern .select:focus { border-color: var(--k-accent); background: var(--k-bg-2); box-shadow: 0 0 0 4px rgba(211, 54, 58, 0.18); }
.theme-modern .input::placeholder, .theme-modern .textarea::placeholder { color: var(--k-faint); }
.theme-modern .has-error .input, .theme-modern .has-error .textarea, .theme-modern .has-error .select, .theme-modern .input.is-invalid { border-color: var(--k-accent); }
.theme-modern .select option { background: var(--k-surface); color: var(--k-strong); }
.theme-modern .select-wrap::after { background: var(--k-muted); }
.theme-modern input[type="date"], .theme-modern input[type="time"], .theme-modern input[type="datetime-local"] { color-scheme: dark; }

.theme-modern .input-group .input { border-radius: 0; }
.theme-modern .input-group > :first-child { border-top-left-radius: var(--k-radius); border-bottom-left-radius: var(--k-radius); }
.theme-modern .input-group > :last-child { border-top-right-radius: var(--k-radius); border-bottom-right-radius: var(--k-radius); }
.theme-modern .input-group__suffix, .theme-modern .input-group__prefix { border-color: var(--k-line-2); background: var(--k-surface-2); color: var(--k-muted); font-family: var(--k-font); }

.theme-modern .choice-buttons .choice__label { min-height: 40px; padding: 8px 18px; border: 1px solid var(--k-line-2); border-radius: 999px; background: var(--k-bg); color: var(--k-text); font: 500 14px/22px var(--k-font); transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
.theme-modern .choice-buttons .choice:hover .choice__label { border-color: var(--k-line-3); color: var(--k-strong); }
.theme-modern .choice-buttons input:checked + .choice__label { border-color: #ffffff; background: #ffffff; color: #0b0d10; font-weight: 600; }
.theme-modern .choice-list .choice__label { color: var(--k-text); font-size: 15px; }
.theme-modern .choice-list .choice__label::before { border-color: var(--k-line-3); background: var(--k-bg); }
.theme-modern .choice-list input[type="checkbox"] + .choice__label::before { border-radius: var(--k-radius-sm); }
.theme-modern .choice-list input:checked + .choice__label::before { border-color: var(--k-accent); }
.theme-modern .choice-list input[type="checkbox"]:checked + .choice__label::before { background: var(--k-accent) var(--k-check) center / 16px no-repeat; }

.theme-modern .consent__box { border-color: var(--k-line-3); border-radius: var(--k-radius-sm); background: var(--k-bg); }
.theme-modern .consent input:checked + .consent__box { border-color: var(--k-accent); background: var(--k-accent) var(--k-check) center / 18px no-repeat; }
.theme-modern .consent__text { color: var(--k-text); font-size: 15px; line-height: 1.6; }
.theme-modern .consent__text a { color: var(--k-strong); text-decoration-color: var(--k-accent); }

.theme-modern .game-option__card { border-radius: var(--k-radius); border-color: var(--k-line); }
.theme-modern .game-option input:checked + .game-option__card { border-color: var(--k-accent); }
.theme-modern .game-option__label { font: 700 13px/1.25 var(--k-font); letter-spacing: 0.02em; }
/* Game cards take their game's colour when picked and lift under the pointer */
.theme-modern .game-option:has(input[value="lol"]) { --pick: var(--game-lol); }
.theme-modern .game-option:has(input[value="valorant"]) { --pick: var(--game-valorant); }
.theme-modern .game-option:has(input[value="tft"]) { --pick: var(--game-tft); }
.theme-modern .game-option:has(input[value="wildrift"]) { --pick: var(--game-wildrift); }
.theme-modern .game-option__card { transition: border-color 0.25s ease, box-shadow 0.35s ease, transform 0.35s var(--k-ease); }
.theme-modern .game-option:hover .game-option__card { transform: translateY(-3px); }
.theme-modern .game-option input:checked + .game-option__card { border-color: var(--pick, var(--k-accent)); box-shadow: 0 0 0 1px var(--pick, var(--k-accent)), 0 18px 40px -16px color-mix(in srgb, var(--pick, var(--k-accent)) 70%, transparent); }
.theme-modern .game-option input:checked + .game-option__card .game-option__check { background: var(--pick, var(--k-accent)); color: #0b0d10; }
.theme-modern .game-option input:focus-visible + .game-option__card { outline: 2px solid var(--k-accent-text); outline-offset: 2px; }

/* A picked choice settles in with a small bounce */
.theme-modern .choice-buttons input:checked + .choice__label { animation: m-pop-soft 0.35s var(--k-ease); }

@keyframes m-pop-soft { 0% { transform: scale(0.94); } 60% { transform: scale(1.04); } 100% { transform: none; } }

.theme-modern .rating__option span { border-color: var(--k-line-2); border-radius: var(--k-radius); background: var(--k-bg); color: var(--k-text); font-family: var(--k-font); }
.theme-modern .rating__option:hover span { border-color: var(--k-line-3); }
.theme-modern .rating__option input:checked + span { border-color: var(--k-accent); background: var(--k-accent); color: #ffffff; }
.theme-modern .rating-grid__label { color: var(--k-strong); }

.theme-modern .repeater__index { border-radius: var(--k-radius); background: var(--k-surface-2); color: var(--k-muted); font-family: var(--k-font); }
.theme-modern .repeater__remove { border-radius: var(--k-radius); }
.theme-modern .repeater__remove:hover:not(:disabled) { border-color: rgba(211, 54, 58, 0.4); color: var(--k-accent-text); }
.theme-modern .repeater__add { border-color: var(--k-line-3); border-radius: 999px; background: transparent; color: var(--k-strong); font: 600 14px var(--k-font); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.theme-modern .repeater__add:hover { border-color: #ffffff; background: #ffffff; color: #0b0d10; }
.theme-modern .repeater__head { font-family: var(--k-font); letter-spacing: 0.08em; }
@media (max-width: 720px) { .theme-modern .repeater__row { border-color: var(--k-line-2); border-radius: var(--k-radius); } }

.theme-modern .uni-chip { border: 1px solid var(--k-line-2); border-radius: var(--k-radius); background: var(--k-surface-2); }
.theme-modern .uni-chip button:hover { color: var(--k-accent-text); }
.theme-modern .uni-picker__results, .theme-modern .finder__results { border: 1px solid var(--k-line-2); border-radius: var(--k-radius-lg); background: var(--k-surface); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55); }
.theme-modern .uni-picker__results button, .theme-modern .finder__results a { margin: 0 6px; width: calc(100% - 12px); border-radius: var(--k-radius); color: var(--k-strong); }
.theme-modern .finder__results a { width: auto; }
.theme-modern .uni-picker__results button.is-active, .theme-modern .uni-picker__results button:hover,
.theme-modern .finder__results a.is-active, .theme-modern .finder__results a:hover { background: var(--k-surface-3); }
.theme-modern .finder__result-meta { color: var(--k-muted); }
.theme-modern .finder__result-meta strong { color: var(--k-accent-text); font-weight: 600; }
.theme-modern .finder__result-meta em { color: var(--k-green); }
.theme-modern .finder__empty { color: var(--k-muted); }

.theme-modern .file-drop { border-color: var(--k-line-3); border-radius: var(--k-radius-lg); background: var(--k-bg); color: var(--k-text); }
.theme-modern .file-drop:hover { border-color: var(--k-accent); background: var(--k-bg-2); }
.theme-modern .file-drop__icon { color: var(--k-accent-text); }
.theme-modern .file-drop__names { color: var(--k-strong) !important; }
.theme-modern .form-note { border-radius: var(--k-radius); background: var(--k-surface-2); color: var(--k-text); font-size: 15px; }
.theme-modern .form-note__icon { color: var(--k-muted); }

.theme-modern .form-submit { padding: 20px 20px 20px 28px; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-xl); background: radial-gradient(40% 160% at 100% 50%, rgba(211, 54, 58, 0.16) 0%, rgba(211, 54, 58, 0) 70%), var(--k-surface); color: var(--k-muted); font-size: 14px; }
.theme-modern .form-submit strong { color: var(--k-strong); }

.theme-modern .form-facts { margin-top: 20px; color: var(--k-muted); font: 500 14px/20px var(--k-font); }
.theme-modern .form-facts svg { color: var(--k-accent-text); }
.theme-modern .form-facts strong { color: var(--k-strong); }

@media (max-width: 720px) { .theme-modern .form-section { padding: 22px 18px 26px; } .theme-modern .form-submit { padding: 18px; } }

/* Forms index cards and guides */

.theme-modern .form-cards { gap: 12px; }
.theme-modern .form-card { position: relative; grid-template-columns: 46px 1fr 38px; padding: 20px 20px 20px 22px; overflow: hidden; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-lg); background: var(--k-surface); color: var(--k-strong); transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.4s var(--k-ease), box-shadow 0.4s ease; }
.theme-modern .form-card:hover { border-color: var(--k-line-3); background: var(--k-surface-2); box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.9); transform: translateY(-3px); }
.theme-modern .form-card__icon { width: 46px; height: 46px; border-radius: var(--k-radius); background: var(--k-surface-3); color: var(--k-strong); transition: background-color 0.3s ease, color 0.3s ease; }
.theme-modern .form-card:hover .form-card__icon { background: var(--k-accent-soft); color: var(--k-accent-text); }
.theme-modern .form-card__icon svg { width: 22px; height: 22px; }
.theme-modern .form-card__title { color: var(--k-strong); font-size: 16px; font-weight: 650; }
.theme-modern .form-card__text { color: var(--k-muted); }
/* The arrow sits in a ring that fills white on hover, the menu's pill once more */
.theme-modern .form-card__arrow { position: relative; display: grid; place-items: center; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--k-line-2); color: transparent; font-size: 0; transition: background-color 0.25s ease, box-shadow 0.25s ease; }
.theme-modern .form-card__arrow::before { content: ""; position: absolute; inset: 0; width: 16px; height: 16px; margin: auto; background: var(--k-text); -webkit-mask: var(--k-arrow) center / contain no-repeat; mask: var(--k-arrow) center / contain no-repeat; transition: background-color 0.25s ease, transform 0.4s var(--k-ease); }
.theme-modern .form-card:hover .form-card__arrow { background: #ffffff; box-shadow: none; transform: none; }
.theme-modern .form-card:hover .form-card__arrow::before { background: #0b0d10; animation: m-arrow 0.5s var(--k-ease); }
.theme-modern .blade--grey .form-card { background: var(--k-surface); }

@keyframes m-arrow { 0% { transform: none; } 45% { transform: translateX(22px); } 46% { transform: translateX(-22px); } 100% { transform: none; } }

/* Form groups: the title and description on the left, the cards on the right, like the menu panels */
.theme-modern .form-group-block + .form-group-block { margin-top: 0; }
.theme-modern .form-group-block { padding: 40px 0; border-top: 1px solid var(--k-line); }
.theme-modern .form-group-block:first-child { padding-top: 0; border-top: 0; }
.theme-modern .form-group-block:last-child { padding-bottom: 0; }
.theme-modern .form-group-block .title-section { font-weight: 800; font-size: clamp(26px, 2.4vw, 34px); font-stretch: var(--k-display-stretch); line-height: 1.05; letter-spacing: -0.025em; }
.theme-modern .form-group-block__text { max-width: 300px; margin-top: 12px; color: var(--k-muted); font-size: 15px; line-height: 1.55; }

@media (min-width: 1025px) {
    .theme-modern .form-group-block { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 56px; }
    .theme-modern .form-group-block > :not(.form-cards) { grid-column: 1; }
    .theme-modern .form-group-block > .form-cards { grid-row: 1 / span 2; grid-column: 2; margin-top: 0; }
}

.theme-modern .guide-card__icon { right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: var(--k-radius); background: rgba(11, 13, 16, 0.85); color: var(--k-strong); }

/* ======================================================================= */
/* Directory and profiles                                                   */
/* ======================================================================= */

.theme-modern .finder__field-icon, .theme-modern .directory-search__city-icon, .theme-modern .directory-filter__icon, .theme-modern .uni-picker__icon { color: var(--k-muted); }

.theme-modern .finder__field input,
.theme-modern .directory-search__city select {
    height: 52px;
    border: 1px solid var(--k-line-2);
    border-radius: var(--k-radius);
    background: var(--k-surface);
    color: var(--k-strong);
    font: 400 16px var(--k-font);
}

.theme-modern .finder__field input { padding-left: 52px; }
.theme-modern .finder__field input::placeholder { color: var(--k-faint); }
.theme-modern .finder__field input:hover, .theme-modern .directory-search__city select:hover { border-color: var(--k-line-3); }
.theme-modern .finder__field input:focus, .theme-modern .directory-search__city select:focus { border-color: var(--k-accent); box-shadow: 0 0 0 3px rgba(211, 54, 58, 0.22); }
.theme-modern .directory-filter .input { padding-left: 38px; }
.theme-modern .uni-picker__search .input { padding-left: 44px; }
.theme-modern .directory-search { gap: 8px; }
.theme-modern .directory-search__city select { border-left: 1px solid var(--k-line-2); font-weight: 500; }
.theme-modern .directory-search__city select option { background: var(--k-surface); }

.theme-modern .directory-toolbar { padding-bottom: 16px; border-bottom: 1px solid var(--k-line); }
.theme-modern .directory-toolbar__meta { color: var(--k-muted); }
.theme-modern .directory-toolbar__meta a { color: var(--k-accent-text); }
.theme-modern .directory-cta { padding: 32px 36px; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-xl); background: var(--k-glow), var(--k-surface); }
.theme-modern .directory-cta .title-section { font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); font-stretch: var(--k-display-stretch); letter-spacing: -0.025em; }
.theme-modern .directory-cta p { color: var(--k-muted); }

.theme-modern .amb-grid { gap: 28px 20px; }
.theme-modern .amb-card { color: var(--k-strong); }
.theme-modern .amb-card { --game: var(--k-line-3); }
.theme-modern .amb-card--lol, .theme-modern .profile-card__portrait--lol { --game: var(--game-lol); }
.theme-modern .amb-card--valorant, .theme-modern .profile-card__portrait--valorant { --game: var(--game-valorant); }
.theme-modern .amb-card--tft, .theme-modern .profile-card__portrait--tft { --game: var(--game-tft); }
.theme-modern .amb-card--wildrift, .theme-modern .profile-card__portrait--wildrift { --game: var(--game-wildrift); }

/* Ambassador cards: lift on hover while their game's colour rises from the bottom edge */
.theme-modern .amb-card__media { aspect-ratio: 4 / 5; border-radius: var(--k-radius-lg); background: linear-gradient(180deg, color-mix(in srgb, var(--game) 16%, var(--k-surface)) 0%, var(--k-surface) 70%); box-shadow: inset 0 -2px 0 var(--game), inset 0 0 0 1px var(--k-line); isolation: isolate; transition: box-shadow 0.3s ease, transform 0.45s var(--k-ease); }
.theme-modern .amb-card__media::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(90% 55% at 50% 100%, color-mix(in srgb, var(--game) 38%, transparent) 0%, transparent 100%); opacity: 0; transition: opacity 0.45s ease; pointer-events: none; }
.theme-modern .amb-card:hover .amb-card__media { box-shadow: inset 0 -2px 0 var(--game), inset 0 0 0 1px var(--k-line-3), 0 24px 48px -26px color-mix(in srgb, var(--game) 70%, transparent); transform: translateY(-4px); }
.theme-modern .amb-card:hover .amb-card__media::after { opacity: 1; }
.theme-modern .amb-card .amb-card__mark { opacity: 0.35; transition: opacity 0.3s ease, transform 0.45s var(--k-ease); }
.theme-modern .amb-card:hover .amb-card__mark { opacity: 0.85; transform: rotate(-8deg); }

.theme-modern .profile-card__portrait { border-bottom: 0; border-radius: var(--k-radius-lg); background: var(--k-surface) center / cover; box-shadow: inset 0 -2px 0 var(--game, transparent); }
.theme-modern .profile-card__portrait::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 13, 16, 0.45) 0%, rgba(11, 13, 16, 0.92) 100%); }
.theme-modern .profile-card__portrait--none::before { display: none; }
.theme-modern .profile-card__portrait--lol { background-image: url("../images/riot/switcher/league-of-legends-card-bg.jpg"); }
.theme-modern .profile-card__portrait--valorant { background-image: url("../images/modern/valorant.jpg"); background-position: 30% 50%; }
.theme-modern .profile-card__portrait--tft { background-image: url("../images/riot/switcher/teamfight-tactics-card-bg.jpg"); }
.theme-modern .profile-card__portrait--wildrift { background-image: url("../images/riot/switcher/lol-wild-rift-card-bg.jpg"); }
.theme-modern .amb-card__media > img:not(.amb-card__mark) { z-index: 1; }
.theme-modern .amb-card__initials { z-index: 1; color: #ffffff; font-family: var(--k-display); font-style: normal; font-stretch: var(--k-display-stretch); font-weight: 800; font-size: 64px; letter-spacing: -0.02em; transition: transform 0.6s var(--k-ease); }
.theme-modern .amb-card__mark { z-index: 1; }
.theme-modern .amb-card__city { z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(11, 13, 16, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--k-strong); font: 600 11px/16px var(--k-font); letter-spacing: 0.06em; }
.theme-modern .amb-card__body { margin-top: 0; padding-top: 14px; border-top: 0; }
.theme-modern .amb-card__name { font-weight: 700; font-size: 16px; line-height: 1.35; }
.theme-modern .amb-card:hover .amb-card__name { color: #ffffff; }
.theme-modern .amb-card__uni { color: var(--k-muted); }

.theme-modern .match-list { gap: 8px; }
.theme-modern .match { position: relative; overflow: hidden; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-lg); background: var(--k-surface); color: var(--k-strong); transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.4s var(--k-ease); }
.theme-modern .match:hover { border-color: var(--k-line-3); background: var(--k-surface-2); transform: translateY(-3px); }
.theme-modern .match__city { color: var(--k-muted); }

.theme-modern .profile-card + .profile-card { border-top-color: var(--k-line); }
.theme-modern .profile-card__portrait > img:not(.amb-card__mark) { position: relative; z-index: 1; }
.theme-modern .profile-card__portrait .amb-card__initials { font-size: 96px; }
.theme-modern .profile-card__name { margin-bottom: 18px; font-family: var(--k-display); font-weight: 800; font-size: clamp(32px, 3vw, 44px); font-stretch: var(--k-display-stretch); line-height: 1; letter-spacing: -0.03em; }
.theme-modern .profile-card__facts dt { color: var(--k-faint); font: 600 11px/16px var(--k-font); letter-spacing: 0.1em; }
.theme-modern .profile-card__facts dd { color: var(--k-strong); }
.theme-modern .profile-card__bio { color: var(--k-text); font-size: 17px; line-height: 1.7; }
.theme-modern .profile-card__eyebrow { color: var(--k-accent-text); }
.theme-modern .profile-games__item { border-color: var(--k-line-2); border-radius: 999px; color: var(--k-strong); font: 600 12px/16px var(--k-font); letter-spacing: 0.04em; }
.theme-modern .profile-games__item--tft { --game: var(--game-tft); }
.theme-modern .profile-contact { position: relative; overflow: hidden; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-lg); background: var(--k-surface); color: var(--k-strong); transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.4s var(--k-ease); }
.theme-modern a.profile-contact:hover { border-color: var(--k-line-3); background: var(--k-surface-2); transform: translateY(-2px); }
.theme-modern .profile-contact__icon { border-radius: var(--k-radius); background: var(--k-surface-3); color: var(--k-strong); }
.theme-modern .profile-contact__body small { color: var(--k-faint); font: 600 11px/14px var(--k-font); letter-spacing: 0.08em; }
.theme-modern .profile-contact__copy { border-radius: 999px; background: var(--k-surface-3); color: var(--k-text); font-family: var(--k-font); }
.theme-modern .profile-contact__copy:hover { background: rgba(255, 255, 255, 0.14); color: var(--k-strong); }
.theme-modern .profile-contact__ext { color: var(--k-faint); }
.theme-modern .public-fields .choice__label small { color: var(--k-muted); }

.theme-modern .profile-head .masthead__eyebrow { margin-bottom: 4px; }
.theme-modern .riot-account { border: 1px solid var(--k-line-2); border-radius: var(--k-radius-lg); background: var(--k-surface); color: var(--k-muted); }
.theme-modern .riot-account__logo { width: 40px; height: 40px; padding: 8px; border-radius: var(--k-radius); background: var(--k-surface-3); color: var(--k-strong); }
.theme-modern .riot-account strong { color: var(--k-strong); font-family: var(--k-font); }

.theme-modern .notification { border-bottom-color: var(--k-line); color: var(--k-strong); }
.theme-modern .notification__body span, .theme-modern .notification time { color: var(--k-muted); }

/* ======================================================================= */
/* Application, submissions                                                 */
/* ======================================================================= */

.theme-modern .timeline__step::before { background: var(--k-line-2); }
.theme-modern .timeline__step.is-done::before, .theme-modern .timeline__step.is-current::before { background: var(--k-accent); }
.theme-modern .timeline__dot { border-color: var(--k-line-2); background: var(--k-bg); color: var(--k-faint); font-family: var(--k-font); }
.theme-modern .timeline__step.is-done .timeline__dot { border-color: var(--k-accent); background: var(--k-accent); color: #ffffff; }
.theme-modern .timeline__step.is-current .timeline__dot { box-shadow: 0 0 0 5px rgba(211, 54, 58, 0.22); }
.theme-modern .timeline__label { color: var(--k-muted); font-family: var(--k-font); }
.theme-modern .timeline__step.is-current .timeline__label, .theme-modern .timeline__step.is-done .timeline__label { color: var(--k-strong); }

.theme-modern .status-card { padding: 30px 32px; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-xl); background: var(--k-glow), var(--k-surface); }
.theme-modern .status-card__text { color: var(--k-text); font-size: 17px; line-height: 1.65; }
.theme-modern .status-card__message { border: 1px solid var(--k-line); border-left: 3px solid var(--k-accent); border-radius: var(--k-radius); background: var(--k-bg); color: var(--k-text); }
.theme-modern .status-card__message span { color: var(--k-faint); font-family: var(--k-font); }

.theme-modern .booking__current { border: 1px solid var(--k-line-3); border-radius: var(--k-radius-lg); background: var(--k-surface); }
.theme-modern .booking__date { border-radius: var(--k-radius); background: var(--k-accent); color: #ffffff; }
.theme-modern .booking__day { font-family: var(--k-display); font-style: normal; font-stretch: var(--k-display-stretch); font-weight: 800; }
.theme-modern .booking__info p, .theme-modern .booking__hint { color: var(--k-muted); }
.theme-modern .slot-day { border: 1px solid var(--k-line-2); border-radius: var(--k-radius-lg); background: var(--k-surface); }
.theme-modern .slot-day__title { color: var(--k-strong); }
.theme-modern .slot { border: 1px solid var(--k-line-3); border-radius: 999px; background: transparent; color: var(--k-strong); font-family: var(--k-font); font-weight: 600; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.theme-modern .slot:hover { border-color: #ffffff; background: #ffffff; color: #0b0d10; }
.theme-modern .withdraw .btn--tertiary { color: var(--k-muted); }
.theme-modern .withdraw .btn--tertiary:hover { color: var(--k-accent-text); }

.theme-modern .apply-card { border: 1px solid var(--k-line-2); border-radius: var(--k-radius-xl); background: var(--k-surface); color: var(--k-text); }
.theme-modern .apply-card .title-section { color: var(--k-strong); }
.theme-modern .apply-card__meta { color: var(--k-muted); }
.theme-modern .apply-grid__hint { color: var(--k-muted); }
.theme-modern .apply-grid__hint a { color: var(--k-strong); }
.theme-modern .check-list li { color: var(--k-text); font-size: 16px; line-height: 1.6; }
.theme-modern .check-list--muted li { color: var(--k-text); }
.theme-modern .check-list--muted li::before { background-color: var(--k-surface-3); }

.theme-modern .submission-status { border: 1px solid var(--k-line-2); border-radius: var(--k-radius-lg); background: var(--k-surface); }
.theme-modern .submission-status__label { color: var(--k-faint); font-family: var(--k-font); letter-spacing: 0.08em; }
.theme-modern .answers__title { padding-bottom: 10px; border-bottom: 1px solid var(--k-line-2); font-weight: 700; font-size: 17px; }
.theme-modern .answers__row { border-bottom-color: var(--k-line); }
.theme-modern .answers__row dt { color: var(--k-muted); }
.theme-modern .answers__row dd { color: var(--k-strong); }
.theme-modern .file-link { color: var(--k-strong); }
.theme-modern .file-link:hover { color: var(--k-accent-text); }

/* ======================================================================= */
/* Poster studio                                                            */
/* ======================================================================= */

.theme-modern .studio-blade { background: var(--k-bg); }
.theme-modern .studio-step { padding: 26px; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-xl); background: var(--k-surface); box-shadow: none; }
.theme-modern .studio-step__title { gap: 10px; align-items: center; font-weight: 700; font-size: 19px; }
.theme-modern .studio-step__title span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--k-accent-soft); color: var(--k-accent-text); font: 700 12px/1 var(--k-font); letter-spacing: 0; }
.theme-modern .studio__preview { top: calc(var(--k-header) + 24px); }

.theme-modern .template-card { border: 1px solid var(--k-line-2); border-radius: var(--k-radius-lg); background: var(--k-bg); color: var(--k-strong); transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.4s var(--k-ease); }
.theme-modern .template-card::before { display: none; }
.theme-modern .template-card:hover { border-color: var(--k-line-3); transform: translateY(-2px); }
.theme-modern .template-card.is-active { border-color: var(--k-accent); background: var(--k-accent-soft); box-shadow: none; }
.theme-modern .template-card__icon { color: var(--k-accent-text); }
.theme-modern .template-card__title { font: 700 14px/20px var(--k-font); letter-spacing: 0; text-transform: none; }
.theme-modern .template-card__text { color: var(--k-muted); }

.theme-modern .art-option { border-radius: var(--k-radius); }
.theme-modern .art-option--upload { border-color: var(--k-line-3); background: var(--k-bg); color: var(--k-text); }
.theme-modern .art-option__label, .theme-modern .art-option__upload { font-family: var(--k-font); letter-spacing: 0; }
.theme-modern .range-field { color: var(--k-muted); font-family: var(--k-font); letter-spacing: 0.06em; }

.theme-modern .studio-preview { padding: 16px; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-lg); background: var(--k-surface); }
.theme-modern .format-switch { border-radius: 999px; background: var(--k-bg); }
.theme-modern .format-switch button { border-radius: 999px; font-family: var(--k-font); letter-spacing: 0.04em; transition: background-color 0.25s ease, color 0.25s ease; }
.theme-modern .format-switch button.is-active { background: var(--k-strong); color: var(--k-bg); }
.theme-modern .studio-canvas, .theme-modern .studio-canvas__loading { border-radius: var(--k-radius); background: var(--k-bg); }
.theme-modern .studio-actions .btn[disabled] { background: var(--k-surface-3); color: var(--k-faint); }

/* ======================================================================= */
/* Form studio (themes/modern/forms/show)                                   */
/* ======================================================================= */

/* Built like the poster studio: the sections are numbered steps that tick when their required fields are
   filled; the panel beside them follows the page with the activity's card (activity forms), the progress,
   the steps and the send button (formStudio in modern.js). On narrow screens only the progress stays, as
   a bar under the header. */

.theme-modern .form-masthead .form-facts { gap: 8px; margin-top: 26px; color: var(--k-text); font: 500 14px/20px var(--k-font); }
.theme-modern .form-masthead .form-facts li { padding: 7px 14px 7px 11px; border: 1px solid var(--k-line-2); border-radius: 999px; background: rgba(11, 13, 16, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.theme-modern .form-masthead .form-facts svg { width: 17px; height: 17px; color: var(--k-accent-text); }

.fstudio { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; }
.fstudio__form { min-width: 0; }

/* Numbered steps */
.fstudio .kep-form { counter-reset: fstep; }
.fstudio .form-section { counter-increment: fstep; scroll-margin-top: calc(var(--k-header) + 24px); }
.fstudio .form-section__title { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-size: 22px; }
.fstudio .form-section__title::before { content: counter(fstep, decimal-leading-zero); display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--k-accent-soft); color: var(--k-accent-text); font: 700 12px/1 var(--k-font); letter-spacing: 0.02em; transition: background-color 0.3s ease, color 0.3s ease; }
.fstudio .form-section.is-complete .form-section__title::before { content: ""; background: var(--k-green) var(--k-check) center / 18px no-repeat; animation: m-pop 0.45s var(--k-ease); }
.fstudio .form-section__text { margin: -4px 0 4px 50px; }
.fstudio .form-submit { display: none; }
/* A required field ticks once answered */
.fstudio .field.is-answered > .field__label::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 8px; border-radius: 50%; background: var(--k-green) var(--k-check) center / 12px no-repeat; vertical-align: -3px; animation: m-pop 0.4s var(--k-ease); }

/* Panel */
.fstudio__panel { position: sticky; top: calc(var(--k-header) + 24px); display: grid; gap: 22px; padding: 22px; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-xl); background: var(--k-glow), var(--k-surface); }
.fstudio__label { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 12px; color: var(--k-faint); font: 600 11px/16px var(--k-font); letter-spacing: 0.1em; text-transform: uppercase; }
.fstudio__label strong { color: var(--k-strong); font: 800 15px/1 var(--k-display); font-stretch: var(--k-display-stretch); letter-spacing: 0; }

.fstudio .fstudio__card { height: auto; min-height: 214px; pointer-events: none; transition: --tint 0.6s ease, box-shadow 0.6s ease; }
.fstudio__card .mx-event__title, .fstudio__card .mx-event__date strong { transition: opacity 0.2s ease; }

.fstudio__bar { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.fstudio__bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--k-accent), var(--k-accent-text)); transition: width 0.6s var(--k-ease); }

.fstudio__steps { position: relative; display: grid; gap: 2px; margin: -6px -10px 0; padding: 0; list-style: none; isolation: isolate; }
.fstudio__steps a { display: flex; align-items: center; gap: 12px; padding: 6px 16px 6px 8px; border-radius: 999px; color: var(--k-text); font: 550 14px/1.35 var(--k-font); text-decoration: none; }
.fstudio__steps a:hover, .fstudio__steps a[aria-current] { color: #ffffff; }
.fstudio__step-mark { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, 0.07); color: var(--k-muted); font: 700 11px/1 var(--k-font); transition: background-color 0.3s ease, color 0.3s ease; }
.fstudio__steps a.is-done .fstudio__step-mark { background: var(--k-green); color: #0b0d10; animation: m-pop 0.45s var(--k-ease); }
.fstudio__step-mark svg { width: 16px; height: 16px; }

.fstudio__send { width: 100%; min-height: 52px; font-size: 16px; }
/* All required fields filled: the button calls with a soft red ring */
.fstudio__send.is-ready:not([disabled]) { animation: m-ready 1.8s ease-out infinite; }
.fstudio__note { margin-top: -10px; color: var(--k-muted); font-size: 13px; line-height: 1.5; text-align: center; }
.fstudio__note a { color: var(--k-strong); text-decoration-color: var(--k-accent); text-underline-offset: 3px; }

@keyframes m-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: none; } }
@keyframes m-ready { 0% { box-shadow: 0 0 0 0 rgba(224, 70, 74, 0.55); } 100% { box-shadow: 0 0 0 14px rgba(224, 70, 74, 0); } }

/* The card's game colour fades from one game to the next */
@property --tint { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0.22); }

@media (max-width: 1100px) {
    .fstudio { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .fstudio__panel { top: calc(var(--k-header) + 8px); z-index: 5; order: -1; padding: 12px 16px 14px; border-radius: var(--k-radius-lg); background: rgba(20, 23, 28, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
    .fstudio__preview, .fstudio__steps, .fstudio__send, .fstudio__note { display: none; }
    .fstudio__label { margin-bottom: 8px; }
    .fstudio .form-submit { display: flex; }
}

/* ======================================================================= */
/* Home (themes/modern/home.blade.php)                                      */
/* ======================================================================= */

.mx-band { padding: 64px 0; }
.mx-band + .mx-band { padding-top: 16px; }
.mx-band--tight { padding: 24px 0 0; }
.mx-band--tight + .mx-band { padding-top: 56px; }

.mx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.mx-title { color: var(--k-strong); font: 800 clamp(32px, 3.6vw, 52px)/1 var(--k-display); font-stretch: var(--k-display-stretch); letter-spacing: -0.03em; }
/* "Tüm haberler": an outlined pill that fills white on hover */
.mx-more { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--k-line-3); color: var(--k-strong); font: 600 14px/20px var(--k-font); text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.mx-more[target] { padding-right: 18px; }
.mx-more:not([target])::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--k-arrow) center / contain no-repeat; mask: var(--k-arrow) center / contain no-repeat; transition: transform 0.3s var(--k-ease); }
.mx-more:hover { background: #ffffff; box-shadow: inset 0 0 0 1px #ffffff; color: #0b0d10; }
.mx-more:hover::after { transform: translateX(3px); }

/* Hero, Riot game site style: the KEP logo centred over a scene that changes with the game, the
   game's map with one of its characters in front (Master Yi on Summoner's Rift, Omen and Jett on
   Ascent, Pengu, Yasuo over the Rift from above). The tabs show each game's logo; the bar under
   the active one fills in that game's colour until the next scene. */

.mx-hero {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: clamp(640px, 100svh, 920px);
    padding-top: var(--k-header);
    overflow: hidden;
    background: var(--k-bg);
    isolation: isolate;
}

.mx-hero__stage { position: absolute; inset: 0; z-index: -1; }
.mx-hero__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    background:
        radial-gradient(42% 40% at 50% 60%, rgba(11, 13, 16, 0.7) 0%, rgba(11, 13, 16, 0.32) 62%, rgba(11, 13, 16, 0) 100%),
        linear-gradient(0deg, var(--k-bg) 0%, rgba(11, 13, 16, 0.55) 18%, rgba(11, 13, 16, 0) 42%),
        linear-gradient(180deg, rgba(11, 13, 16, 0.55) 0%, rgba(11, 13, 16, 0) 18%);
    pointer-events: none;
}

.mx-scene { --scene: var(--game-lol); position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.mx-scene.is-active { opacity: 1; }
.mx-scene--valorant { --scene: var(--game-valorant); }
.mx-scene--tft { --scene: var(--game-tft); }
.mx-scene--wildrift { --scene: var(--game-wildrift); }

/* The map drifts in slowly; with a mouse, map and character also lean away from the pointer by
   different amounts (modern.js sets --px/--py from -1 to 1), so the scene gets depth. */
.mx-scene__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); translate: calc(var(--px, 0) * -12px) calc(var(--py, 0) * -8px); transition: transform 9s linear, translate 1.4s var(--k-ease-out); }
.mx-scene.is-active .mx-scene__bg { transform: scale(1.04); }
.mx-scene--lol .mx-scene__bg { object-position: 50% 40%; filter: brightness(0.55) saturate(0.95); }
.mx-scene--valorant .mx-scene__bg { object-position: 50% 40%; filter: brightness(0.42) saturate(0.85) contrast(1.05); }
.mx-scene--tft .mx-scene__bg { object-position: 60% 30%; filter: brightness(0.6) saturate(1.05); }
.mx-scene--wildrift .mx-scene__bg { object-position: 50% 50%; filter: brightness(0.8) saturate(1.05); }

/* Light in the game's colour behind a cut-out character */
.mx-scene:has(.mx-scene__char)::before { content: ""; position: absolute; top: 0; left: 50%; z-index: 1; width: min(90vw, 1100px); aspect-ratio: 1; background: radial-gradient(closest-side, color-mix(in srgb, var(--scene) 40%, transparent) 0%, color-mix(in srgb, var(--scene) 12%, transparent) 55%, transparent 100%); mix-blend-mode: screen; transform: translateX(-50%); }

.mx-scene__char { position: absolute; bottom: 0; left: 50%; z-index: 3; width: auto; max-width: 86vw; height: min(94%, 880px); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55)); opacity: 0; transform: translateX(calc(-50% + 40px)); translate: calc(var(--px, 0) * 22px) calc(var(--py, 0) * 10px); transition: transform 1s var(--k-ease), opacity 0.8s ease, translate 1.2s var(--k-ease-out); }
.mx-scene.is-active .mx-scene__char { opacity: 1; transform: translateX(-50%); }
.mx-scene--tft .mx-scene__char { bottom: 20%; height: min(62%, 580px); }

/* Logo, one line, two buttons */

.mx-hero__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; align-self: end; padding-top: 40px; padding-bottom: 36px; text-align: center; }
.mx-hero__logo { margin: 0; }
.mx-hero__logo img { width: auto; height: clamp(96px, 11vw, 150px); filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.6)); }
.mx-hero__lead { max-width: 460px; margin-top: 20px; color: #e6e9ed; font-size: 18px; font-weight: 500; line-height: 1.55; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85); }
.mx-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.mx-hero__actions .btn { min-height: 48px; padding: 13px 26px; }
.mx-hero__actions .btn--light { background: rgba(11, 13, 16, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Game tabs */

.mx-hero__tabs { position: relative; z-index: 2; display: flex; justify-content: center; gap: 36px; padding-bottom: 28px; }
.mx-tab { --tab: var(--game-lol); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 0 0; border: 0; background: none; cursor: pointer; }
.mx-tab--valorant { --tab: var(--game-valorant); }
.mx-tab--tft { --tab: var(--game-tft); }
.mx-tab--wildrift { --tab: var(--game-wildrift); }
.mx-tab__logo { width: auto; max-width: 110px; height: 28px; object-fit: contain; opacity: 0.45; transition: opacity 0.3s ease; }
.mx-tab:hover .mx-tab__logo, .mx-tab.is-active .mx-tab__logo { opacity: 1; }
.mx-tab__bar { position: relative; display: block; width: 100%; min-width: 72px; height: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.16); }
.mx-tab__bar span { display: block; width: 100%; height: 100%; background: var(--tab); transform: scaleX(0); transform-origin: left; }
.mx-tab.is-active .mx-tab__bar span { animation: mx-progress var(--hero-duration, 7s) linear forwards; }
.mx-hero.is-paused .mx-tab.is-active .mx-tab__bar span { animation-play-state: paused; }
.mx-hero.is-still .mx-tab.is-active .mx-tab__bar span { animation: none; transform: none; }

@keyframes mx-progress { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) { .mx-scene, .mx-scene__bg, .mx-scene__char { transition: none; } }

@media (prefers-reduced-motion: no-preference) {
    /* On load the logo comes into focus, then the line, the buttons and the game tabs */
    .mx-hero__logo { animation: mx-focus 1.3s var(--k-ease-out) 0.1s backwards; }
    .mx-hero__lead { animation: m-rise 0.9s var(--k-ease-out) 0.35s backwards; }
    .mx-hero__actions { animation: m-rise 0.9s var(--k-ease-out) 0.45s backwards; }
    .mx-tab { animation: m-rise 0.8s var(--k-ease-out) backwards; animation-delay: calc(0.55s + var(--i, 0) * 0.07s); }
    .mx-tab:nth-child(2) { --i: 1; }
    .mx-tab:nth-child(3) { --i: 2; }
    .mx-tab:nth-child(4) { --i: 3; }

    /* Scrolling away, the words lift and fade while the scene sinks slower than the page. The range is
       the hero's top edge leaving the screen (exit-crossing), so a screen taller than the hero starts
       from rest; the inset is zero because the default one takes the page's scroll-padding (the header). */
    @supports (animation-timeline: view()) {
        .mx-hero { view-timeline: --mx-hero block; view-timeline-inset: 0px; }
        .mx-hero__body { animation: mx-away linear both; animation-timeline: --mx-hero; animation-range: exit-crossing 0% exit-crossing 65%; }
        .mx-hero__stage { animation: mx-sink linear both; animation-timeline: --mx-hero; animation-range: exit-crossing 0% exit-crossing 100%; }
    }
}

@keyframes mx-focus { from { opacity: 0; filter: blur(12px); transform: scale(0.94); } }
@keyframes mx-away { to { opacity: 0; transform: translateY(-80px); } }
@keyframes mx-sink { to { transform: translateY(28%); } }

@media (max-width: 900px) {
    .mx-hero { min-height: min(100svh, 760px); }
    .mx-scene__char { height: min(70%, 560px); bottom: 26%; }
    .mx-scene--tft .mx-scene__char { bottom: 34%; height: min(40%, 320px); }
    .mx-scene--lol .mx-scene__char { max-width: none; height: min(58%, 470px); }
    .mx-hero__stage::after { background: linear-gradient(0deg, var(--k-bg) 18%, rgba(11, 13, 16, 0.7) 40%, rgba(11, 13, 16, 0.1) 70%), linear-gradient(180deg, rgba(11, 13, 16, 0.55) 0%, rgba(11, 13, 16, 0) 18%); }
    .mx-hero__logo img { height: 96px; }
    .mx-hero__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; padding-bottom: 16px; }
    .mx-tab__logo { max-width: 100%; height: 24px; }
    .mx-tab__bar { min-width: 0; }
}

@media (max-width: 600px) {
    .mx-hero__lead { font-size: 16px; }
    .mx-hero__actions { width: 100%; }
    .mx-hero__actions .btn { flex: 1 1 auto; }
    .mx-tab__logo { height: 22px; }
}

/* Signed-in ambassador shortcuts */

.mx-me { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 14px 14px 14px 24px; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-xl); background: var(--k-glow), var(--k-surface); }
.mx-me__hello { color: var(--k-text); font-size: 15px; line-height: 22px; }
.mx-me__hello span { display: block; color: var(--k-muted); font-size: 13px; }
.mx-me__items { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mx-me__items a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px; background: var(--k-surface-2); color: var(--k-strong); font: 500 14px/18px var(--k-font); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; }
.mx-me__items a:hover { background: #ffffff; color: #0b0d10; }
.mx-me__items a:hover svg { color: #0b0d10; }
.mx-me__items svg { width: 18px; height: 18px; color: var(--k-muted); }
.mx-me__items .is-todo svg { color: var(--k-yellow); }
.mx-me__items .is-done svg { color: var(--k-green); }

/* Upcoming activities: match cards, coloured by the game they are for */

.mx-band--events { padding-top: 40px; }

.mx-events { display: grid; grid-auto-columns: minmax(230px, 1fr); grid-auto-flow: column; gap: 14px; margin: -8px 0 -24px; padding: 8px 0 28px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mx-events::-webkit-scrollbar { display: none; }
.mx-events li { scroll-snap-align: start; }

.mx-event {
    --tint: var(--k-line-3);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 236px;
    padding: 20px 20px 22px;
    overflow: hidden;
    border-radius: var(--k-radius-lg);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 16%, var(--k-surface)) 0%, var(--k-surface) 58%);
    box-shadow: inset 0 3px 0 var(--tint), inset 0 0 0 1px var(--k-line);
    color: var(--k-text);
    text-decoration: none;
    transition: box-shadow 0.3s ease, background-color 0.3s ease, transform 0.45s var(--k-ease);
}

.mx-event:hover { box-shadow: inset 0 3px 0 var(--tint), inset 0 0 0 1px var(--k-line-3), 0 24px 48px -28px color-mix(in srgb, var(--tint) 75%, transparent); transform: translateY(-4px); }
.mx-event--lol { --tint: var(--game-lol); }
.mx-event--valorant { --tint: var(--game-valorant); }
.mx-event--tft { --tint: var(--game-tft); }
.mx-event--wildrift { --tint: var(--game-wildrift); }

.mx-event__date { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.mx-event__date strong { color: var(--k-strong); font: 800 46px/0.85 var(--k-display); font-stretch: var(--k-display-stretch); letter-spacing: -0.03em; }
.mx-event__date span { color: var(--k-muted); font: 600 11px/1.45 var(--k-font); letter-spacing: 0.08em; text-transform: uppercase; }
.mx-event__logo { position: absolute; top: 24px; right: 18px; width: auto; max-width: 84px; height: 28px; object-fit: contain; object-position: right center; opacity: 0.9; }
/* On the narrowest cards the logo shrinks so a long month (Ağustos) never runs under it */
.mx-event { container-type: inline-size; }
@container (max-width: 250px) { .mx-event__logo { top: 26px; max-width: 64px; height: 22px; } }
.mx-event__type { margin-top: auto; color: var(--tint); font: 700 11px/16px var(--k-font); letter-spacing: 0.1em; text-transform: uppercase; }
.mx-event--none .mx-event__type { color: var(--k-muted); }
.mx-event__title { display: -webkit-box; margin-top: 6px; overflow: hidden; color: var(--k-strong); font-size: 17px; font-weight: 650; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mx-event__place { margin-top: 8px; color: var(--k-muted); font-size: 13px; line-height: 1.45; }

@media (max-width: 600px) { .mx-events { grid-auto-columns: 78%; } .mx-event { min-height: 0; } .mx-event__date { margin-bottom: 18px; } }

/* What an ambassador does: art on one side, an editorial list on the other */

.mx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; }
.mx-split__art { position: relative; margin: 0; overflow: hidden; aspect-ratio: 5 / 4; border-radius: var(--k-radius-xl); background: var(--k-surface); isolation: isolate; }
.mx-split__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.6s var(--k-ease-out); }
.mx-split__art:hover img { transform: scale(1.03); }
.mx-split__art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--k-line); }
.mx-split__lead { max-width: 520px; margin: 18px 0 28px; color: var(--k-text); font-size: 17px; line-height: 1.65; }

.mx-duties { margin: 0 0 28px; border-top: 1px solid var(--k-line); counter-reset: duty; }
.mx-duties div { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--k-line); counter-increment: duty; }
.mx-duties div::before { content: counter(duty, decimal-leading-zero); grid-row: span 2; padding-top: 2px; color: var(--k-accent-text); font: 800 14px/20px var(--k-display); font-stretch: var(--k-display-stretch); letter-spacing: 0.06em; }
.mx-duties dt { color: var(--k-strong); font-weight: 600; font-size: 16px; line-height: 22px; }
.mx-duties dd { margin: 2px 0 0; color: var(--k-muted); font-size: 14px; line-height: 20px; }

@media (max-width: 900px) { .mx-split { grid-template-columns: minmax(0, 1fr); gap: 32px; } .mx-split__art { aspect-ratio: 16 / 9; } }

/* How to apply + university finder */

.mx-join { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: stretch; gap: 64px; }
.mx-steps { margin: 24px 0 0; padding: 0; list-style: none; counter-reset: step; }
.mx-steps li { position: relative; padding: 18px 0 18px 56px; border-top: 1px solid var(--k-line); counter-increment: step; }
.mx-steps li:last-child { border-bottom: 1px solid var(--k-line); }
.mx-steps li::before { content: counter(step); position: absolute; top: 16px; left: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--k-surface-2); transition: background-color 0.3s ease, color 0.3s ease; color: var(--k-strong); font: 800 16px/1 var(--k-display); font-stretch: var(--k-display-stretch); }
.mx-steps h3 { color: var(--k-strong); font-size: 17px; font-weight: 600; line-height: 24px; }
.mx-steps p { margin-top: 4px; color: var(--k-muted); font-size: 15px; line-height: 1.6; }

/* As tall as the steps beside it; the count sits on the bottom edge */
.mx-finder { display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-xl); background: var(--k-glow), var(--k-surface); }
.mx-finder__title { color: var(--k-strong); font: 800 30px/1.05 var(--k-display); font-stretch: var(--k-display-stretch); letter-spacing: -0.025em; }
.mx-finder > p { margin-top: 10px; color: var(--k-muted); font-size: 15px; line-height: 1.6; }
.mx-finder .finder__search { max-width: none; margin-top: 20px; }
.mx-finder .finder__field input { background: var(--k-bg); }
.mx-finder__hint { margin-top: 10px; margin-bottom: 18px; color: var(--k-faint); font-size: 13px; }
/* The program in three figures, on the bottom edge */
.mx-finder__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--k-line); }
.mx-finder__stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.mx-finder__stats dd { margin: 0; color: var(--k-strong); font: 800 32px/1 var(--k-display); font-stretch: var(--k-display-stretch); letter-spacing: -0.03em; }
.mx-finder__stats dt { color: var(--k-muted); font-size: 13px; line-height: 1.35; }
.mx-finder__all { align-self: flex-start; margin-top: 22px; }

@media (max-width: 900px) { .mx-join { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 520px) { .mx-finder { padding: 20px 16px; } }

/* Closing call to action */

.mx-closing { position: relative; margin-top: 32px; padding: 120px 0 128px; overflow: hidden; border-top: 1px solid var(--k-line); background: radial-gradient(50% 90% at 50% 100%, rgba(211, 54, 58, 0.22) 0%, rgba(211, 54, 58, 0) 70%), var(--k-bg-2); text-align: center; }
.mx-closing__title { color: #ffffff; font: 800 clamp(48px, 8vw, 120px)/0.92 var(--k-display); font-stretch: var(--k-display-stretch); letter-spacing: -0.035em; }
.mx-closing p { max-width: 520px; margin: 18px auto 30px; color: var(--k-text); font-size: 17px; line-height: 1.6; }
.mx-closing .btn { min-height: 52px; padding: 15px 32px; font-size: 16px; }

@media (max-width: 600px) { .mx-band { padding: 48px 0; } .mx-closing { padding: 64px 0 72px; } }

/* ======================================================================= */
/* Sign-in, sign-up (themes/modern/auth/riot), site password, errors        */
/* ======================================================================= */

.theme-modern .mauth-page { padding-top: 0; background: var(--k-bg); }
.mauth { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); min-height: 100vh; min-height: 100dvh; }

.mauth__brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; overflow: hidden; padding: 40px 48px; border-right: 1px solid var(--k-line); background: var(--k-bg-2); color: var(--k-strong); isolation: isolate; }
.mauth__art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
.mauth__brand::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 13, 16, 0.96) 18%, rgba(11, 13, 16, 0.55) 60%, rgba(11, 13, 16, 0.75) 100%); }
.mauth__brand > a { align-self: flex-start; text-decoration: none; }
.mauth__pitch h2 { max-width: 460px; color: #ffffff; font: 800 clamp(32px, 3.2vw, 48px)/0.98 var(--k-display); font-stretch: var(--k-display-stretch); letter-spacing: -0.03em; }
.mauth__pitch ul { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--k-text); font-size: 15px; line-height: 1.5; }
.mauth__pitch li { display: flex; align-items: center; gap: 12px; }
.mauth__pitch svg { width: 20px; height: 20px; flex: none; color: var(--k-accent-text); }
.mauth__legal { color: var(--k-faint); font-size: 13px; }

.mauth__main { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 72px 24px 48px; background: var(--k-bg); }
.theme-modern .mauth__back { position: absolute; top: 24px; left: 28px; margin: 0; }
.mauth__card { width: 100%; max-width: 420px; padding: 32px; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-xl); background: var(--k-glow), var(--k-surface); }

.mauth-form { display: flex; flex-direction: column; gap: 16px; }
.mauth-form__title { color: var(--k-strong); font: 800 32px/1 var(--k-display); font-stretch: var(--k-display-stretch); letter-spacing: -0.025em; }
.mauth-form__text { margin-top: -6px; color: var(--k-muted); font-size: 15px; line-height: 1.6; }
.theme-modern .mauth-form__submit { width: 100%; }
.mauth-form__switch { color: var(--k-muted); font-size: 14px; text-align: center; }
.mauth-form__switch a { color: var(--k-strong); font-weight: 600; text-decoration-color: var(--k-accent); text-underline-offset: 3px; }
.mauth-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.theme-modern .mauth-form .notice { margin: 0; padding: 12px 14px; font-size: 14px; }

.mauth-password { position: relative; }
.theme-modern .mauth-password .input { padding-right: 48px; }
.mauth-password button { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--k-radius); background: none; color: var(--k-muted); transform: translateY(-50%); cursor: pointer; }
.mauth-password button:hover { background: var(--k-surface-2); color: var(--k-strong); }
.mauth-password svg { width: 20px; height: 20px; }

.mauth-riot-id { display: grid; grid-template-columns: minmax(0, 1fr) auto 110px; align-items: center; gap: 8px; }
.mauth-riot-id > span { color: var(--k-muted); font: 600 18px/1 var(--k-font); }

.mauth__demo { width: 100%; max-width: 420px; padding: 14px 16px; border: 1px solid var(--k-line-2); border-left: 3px solid var(--k-blue); border-radius: var(--k-radius); background: var(--k-surface); color: var(--k-text); font-size: 13px; line-height: 1.6; }
.mauth__demo-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--k-strong); font-weight: 600; font-size: 14px; }
.mauth__demo-title svg { width: 18px; height: 18px; color: var(--k-blue); }
.mauth__accounts { margin-top: 8px; }
.mauth__accounts span { display: block; margin-bottom: 4px; color: var(--k-strong); font-weight: 600; }
.mauth__demo code { padding: 1px 6px; border-radius: var(--k-radius-sm); background: var(--k-surface-3); color: var(--k-strong); font: 500 12px/1.6 ui-monospace, Consolas, monospace; }

@media (max-width: 900px) {
    .mauth { grid-template-columns: minmax(0, 1fr); }
    .mauth__brand { gap: 16px; min-height: 200px; padding: 20px var(--edge); border-right: 0; border-bottom: 1px solid var(--k-line); }
    .mauth__pitch h2 { font-size: 26px; }
    .mauth__pitch ul, .mauth__legal { display: none; }
    .mauth__main { justify-content: flex-start; padding: 24px 16px 48px; }
    .theme-modern .mauth__back { position: static; align-self: flex-start; }
}

@media (max-width: 520px) { .mauth__card { padding: 22px 18px; } .mauth-form__row { grid-template-columns: minmax(0, 1fr); } }

/* Site password */

.mgate { position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px; overflow: hidden; background: var(--k-bg); isolation: isolate; }
.mgate::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--k-bg) 0%, rgba(11, 13, 16, 0.82) 60%, rgba(11, 13, 16, 0.6) 100%), url("../images/rso/signin-bg.jpg") center 30% / cover; }
.mgate__card { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 400px; padding: 36px 32px; border: 1px solid var(--k-line-2); border-radius: var(--k-radius-xl); background: rgba(20, 23, 28, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-align: center; }
.mgate__card .m-brand { margin-bottom: 14px; }
.mgate .mauth-form { gap: 12px; width: 100%; margin-top: 8px; text-align: left; }
.mgate .mauth-form__text { margin-top: 0; }

/* Error pages */

.merror { display: grid; place-items: center; min-height: calc(100vh - var(--k-header)); padding: 48px 24px 72px; background: var(--k-bg); }
.merror__card { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 560px; text-align: center; }
.merror__code { color: var(--k-accent-text); font: 800 clamp(120px, 18vw, 200px)/0.85 var(--k-display); font-stretch: var(--k-display-stretch); letter-spacing: -0.05em; }
.merror__card .btn { margin-top: 8px; }


/* ======================================================================= */
/* Motion                                                                   */
/* ======================================================================= */

/* Reading progress on articles, guides and pages: a red line under the header fills as the page scrolls */
@supports (animation-timeline: scroll()) {
    .theme-modern body:has(.article-head, .page-updated)::after { content: ""; position: fixed; top: var(--k-header); left: 0; z-index: 19998; width: 100%; height: 2px; background: var(--k-accent); transform-origin: 0 50%; animation: m-read linear both; animation-timeline: scroll(root); pointer-events: none; }
}

@keyframes m-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Cards light up under the pointer (modern.js sets --mx/--my); the light sits behind their content */
.theme-modern .form-card, .theme-modern .mx-event, .theme-modern .match, .theme-modern a.profile-contact { isolation: isolate; }
.theme-modern .form-card::after, .theme-modern .mx-event::after, .theme-modern .match::after, .theme-modern a.profile-contact::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot, rgba(255, 255, 255, 0.07)) 0%, transparent 45%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.theme-modern .mx-event::after { --spot: color-mix(in srgb, var(--tint) 24%, transparent); }
.theme-modern .form-card:hover::after, .theme-modern .mx-event:hover::after, .theme-modern .match:hover::after, .theme-modern a.profile-contact:hover::after { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
    /* Pages cross-fade into each other (cross-document view transitions; other browsers simply load the
       page). The header is its own layer, so it stays still. */
    @view-transition { navigation: auto; }
    .theme-modern .mh { view-transition-name: m-header; }
    ::view-transition-old(root) { animation: m-page-out 0.2s ease both; }
    ::view-transition-new(root) { animation: m-page-in 0.35s ease both; }

    .theme-modern { scroll-behavior: smooth; }

    /* Mastheads build up on load: the eyebrow, the title rising out of its own baseline, then the rest */
    .theme-modern .masthead__inner > *,
    .theme-modern .article-head__header > *,
    .theme-modern .article-meta { animation: m-rise 0.9s var(--k-ease-out) backwards; }
    .theme-modern .masthead__inner > :nth-child(2), .theme-modern .article-head__header > :nth-child(2) { animation-delay: 0.08s; }
    .theme-modern .masthead__inner > :nth-child(3), .theme-modern .article-meta { animation-delay: 0.16s; }
    .theme-modern .masthead__inner > :nth-child(n + 4) { animation-delay: 0.24s; }
    .theme-modern .masthead__title, .theme-modern .article-title { animation-name: m-title; animation-duration: 1.05s; }
    .theme-modern .masthead--image .masthead__bg { animation: m-art 1.8s var(--k-ease-out) backwards; }
    .theme-modern .article-hero__image, .theme-modern .article-hero__video { animation: m-media 1.1s var(--k-ease-out) backwards; }

    /* Content below the fold rises in as it is scrolled to; modern.js marks it and staggers each batch */
    .theme-modern .m-reveal { opacity: 0; }
    .theme-modern .m-reveal-in { animation: m-rise 0.9s var(--k-ease-out) var(--reveal-delay, 0s) backwards; }
    .theme-modern .mx-split__art.m-reveal-in { animation-name: m-art-in; animation-duration: 1.2s; }
    .theme-modern .mx-split__art.m-reveal-in img,
    .theme-modern .news-card.m-reveal-in .news-card__ratio img { animation: m-zoom 1.6s var(--k-ease-out) var(--reveal-delay, 0s) backwards; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-modern *, .theme-modern *::before, .theme-modern *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

@media print { .theme-modern .m-reveal { opacity: 1; } }

@keyframes m-page-out { to { opacity: 0; } }
@keyframes m-page-in { from { opacity: 0; } }
@keyframes m-rise { from { opacity: 0; transform: translateY(26px); } }
/* The title moves up by its own height while its clip opens by the same amount: it slides out of a slot */
@keyframes m-title { from { transform: translateY(100%); clip-path: inset(0 -0.2em 100% -0.2em); } to { transform: none; clip-path: inset(-0.3em -0.2em -0.3em -0.2em); } }
@keyframes m-art { from { opacity: 0; transform: scale(1.1); } }
@keyframes m-art-in { from { opacity: 0; clip-path: inset(14% 0 0 0 round var(--k-radius-xl)); transform: translateY(30px); } to { opacity: 1; clip-path: inset(0 0 0 0 round var(--k-radius-xl)); transform: none; } }
@keyframes m-media { from { opacity: 0; transform: translateY(24px) scale(0.985); } }
@keyframes m-zoom { from { transform: scale(1.18); } }