/* ==========================================================================
   TKF "Liquid Glass" design system.
   Rules: docs/design/liquid-glass.md
   Order: tokens -> base -> chrome -> components -> page blocks.
   Raw hex colors live ONLY in the :root and .tkf-theme-dark blocks below
   (enforced by tests/Unit/DesignSystem/TokenGuardTest.php). Keep each token
   hex on its own "--name: #RRGGBB;" line so TokenContrastTest can read it.
   ========================================================================== */

/* Archivo (OFL, fonts/archivo/LICENSE), self-hosted: one variable family with
   weight 100-900 and width 62-125%. Turkish needs both subsets (ğ ş İ are in
   latin-ext). The browser fetches only the files a page's glyphs need. */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    src: url(../fonts/archivo/archivo-latin-wdth-normal.woff2) format('woff2-variations');
    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: 'Archivo';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    src: url(../fonts/archivo/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Archivo';
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    src: url(../fonts/archivo/archivo-latin-wdth-italic.woff2) format('woff2-variations');
    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: 'Archivo';
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    src: url(../fonts/archivo/archivo-latin-ext-wdth-italic.woff2) format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --tkf-accent: #E31E24;
    --tkf-accent-hover: #C81A20;
    --tkf-accent-text: #8E1217;
    --tkf-on-accent: #FFFFFF;
    --tkf-ink: #111013;
    --tkf-ink-2: #45444A;
    --tkf-ink-3: #4A4A50;
    --tkf-line: #E4E4EA;
    --tkf-canvas: #F7F6F3;
    --tkf-surface: #FFFFFF;
    --tkf-error: #B42318;
    --tkf-error-bg: #FDECEA;
    --tkf-success: #1E7A3C;
    --tkf-success-bg: #E7F5EC;
    --tkf-warning: #8A5A00;
    --tkf-warning-bg: #FFF4DB;
    --tkf-info: #1F5C99;
    --tkf-info-bg: #E8F1FA;
    --tkf-disabled: #9A9CA1;
    /* Sky behind every x-tkf.surface: the path from the sun (federation red,
       ember) through space (void) to Earth (federation blue). Each value is
       its field's peak on-screen colour: the strongest mix over the canvas that
       keeps ink/ink-2/ink-3/accent-text AA, also where two fields meet
       (TokenContrastTest). Shards only ever mix these toward the canvas. */
    --tkf-sky-sun: #F0ADAD;
    --tkf-sky-ember: #F4BE98;
    --tkf-sky-void: #C3C6CF;
    --tkf-sky-earth: #AFBEE4;
    --tkf-scrim: linear-gradient(180deg, rgba(17, 16, 19, 0.35) 0%, rgba(17, 16, 19, 0.72) 100%);
    --tkf-lightbox-bg: rgba(17, 16, 19, 0.94);
    /* Popup veil: a light wash of canvas over the blurred page, so the sky keeps
       its colour behind the glass card. Its alpha is set by the worst frame under
       it (TokenContrastTest). */
    --tkf-dialog-scrim: rgba(247, 246, 243, 0.45);

    --tkf-glass-1-bg: rgba(255, 255, 255, 0.42);
    --tkf-glass-1-blur: 12px;
    --tkf-glass-1-border: rgba(255, 255, 255, 0.7);
    --tkf-glass-1-shadow: none;
    /* Liquid glass: translucent sheen (brighter top-left), bright rim, soft
       lift. Low base opacity so the surface glows show through. */
    --tkf-glass-2-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.16) 48%, rgba(255, 255, 255, 0.06) 100%);
    --tkf-glass-2-blur: 32px;
    /* Content cards sit in rows: denser glass so the sky does not tint
       neighbouring cards different colours. */
    --tkf-glass-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.64) 100%);
    /* Person cards: clearer glass so the sky reads through on a light page;
       rim, depth and portrait define the card. */
    --tkf-glass-person-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.02) 100%);
    /* Ambient light behind person cards: full strength around the portrait,
       fading to under half behind the name so text keeps its contrast. */
    --tkf-ambient-mask: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.4) 100%);
    --tkf-glass-2-border: rgba(255, 255, 255, 0.78);
    /* Layered depth: contact, mid and long ambient shadows under an inner glow. */
    --tkf-glass-2-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.3), inset 0 0 24px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(17, 16, 19, 0.05), 0 8px 20px -8px rgba(17, 16, 19, 0.1), 0 28px 56px -28px rgba(17, 16, 19, 0.24);
    --tkf-glass-2-shadow-lift: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.3), inset 0 0 24px rgba(255, 255, 255, 0.24), 0 2px 4px rgba(17, 16, 19, 0.05), 0 14px 30px -10px rgba(17, 16, 19, 0.14), 0 44px 80px -32px rgba(17, 16, 19, 0.32);
    /* Reflective highlight: a rim that catches light top-left and bottom-right. */
    --tkf-glass-rim: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.35) 24%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.15) 76%, rgba(255, 255, 255, 0.8) 100%);
    /* Fluid motion: a soft spring with a hint of overshoot. */
    --tkf-spring: cubic-bezier(0.22, 1.25, 0.36, 1);
    --tkf-dur-glass: 480ms;
    --tkf-glass-3-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.56));
    --tkf-glass-3-blur: 20px;
    --tkf-glass-3-border: rgba(255, 255, 255, 0.55);
    --tkf-glass-3-shadow: 0 18px 48px rgba(24, 31, 42, 0.12), 0 2px 8px rgba(24, 31, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    --tkf-tint: rgba(227, 30, 36, 0.08);
    /* Grip tape behind news cards that have no photo of their own: dark speckled
       tape with a red glow from the corner; the same material in both themes. */
    --tkf-grip: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.07) 0 1px, transparent 1.5px) 0 0 / 7px 7px, radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.05) 0 1px, transparent 1.5px) 3px 2px / 9px 9px, radial-gradient(120% 90% at 100% 0%, rgba(227, 30, 36, 0.55), transparent 60%), #17181C;
    /* Behind partner logos: the usual glass in light; a light plate in dark,
       because most logos are drawn for white paper. */
    --tkf-logo-plate: var(--tkf-glass-2-bg);
    --tkf-footer-bg: var(--tkf-canvas);
    /* Portraits: glass bezel width, specular sheen and hairline edge over the
       photo, and a long soft lift under the frame. */
    --tkf-bezel: 6px;
    --tkf-portrait-sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 26%);
    --tkf-portrait-edge: rgba(255, 255, 255, 0.22);
    --tkf-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 24px 48px -28px rgba(17, 16, 19, 0.45), 0 2px 6px rgba(17, 16, 19, 0.05);

    --tkf-focus-ring: 0 0 0 2px var(--tkf-surface), 0 0 0 4px var(--tkf-accent);
    /* For focusables inside a clipping parent: the ring drawn inside the edge. */
    --tkf-focus-ring-inset: inset 0 0 0 3px var(--tkf-accent), inset 0 0 0 5px var(--tkf-surface);

    --tkf-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* One family, two postures: headings stretch wide, reading text stays at
       normal width. Display and section titles go fully expanded, h3 half way;
       card titles and body stay normal so rows and prose keep their measure. */
    --tkf-wdth-display: 125%;
    --tkf-wdth-h3: 112.5%;
    --tkf-wght-display: 760;
    --tkf-wght-heading: 700;
    --tkf-wght-title: 650;
    --tkf-wght-body: 400;
    --tkf-track-body: normal;
    /* Floors sized so the longest Turkish words ("Yönetmelikleri") fit a
       360px phone in the expanded face without breaking. */
    --tkf-fs-display: clamp(29px, 4.2vw + 14px, 56px);
    --tkf-fs-h2: clamp(24px, 2.6vw + 14px, 40px);
    --tkf-fs-h3: 22px;
    --tkf-fs-h4: 19px;
    --tkf-fs-body: 16px;
    --tkf-fs-small: 14px;
    --tkf-fs-kicker: 13px;

    --tkf-radius-pill: 999px;
    --tkf-radius-lg: 24px;
    --tkf-radius-md: 16px;
    --tkf-radius-sm: 10px;

    --tkf-space-1: 4px;
    --tkf-space-2: 8px;
    --tkf-space-3: 12px;
    --tkf-space-4: 16px;
    --tkf-space-5: 24px;
    --tkf-space-6: 32px;
    --tkf-space-7: 48px;
    --tkf-space-8: 64px;
    --tkf-space-9: 96px;
    --tkf-section: var(--tkf-space-9);
    --tkf-container: 1230px;
    --tkf-gutter: 16px;
    --tkf-nav-h: 56px;
    --tkf-nav-top: clamp(10px, 2vw, 18px);

    --tkf-z-base: 1;
    --tkf-z-raised: 10;
    --tkf-z-sticky: 100;
    --tkf-z-nav: 500;
    --tkf-z-menu: 600;
    --tkf-z-toast: 700;
    --tkf-z-skip: 800;

    --tkf-dur-fast: 150ms;
    --tkf-dur-ui: 250ms;
    --tkf-dur-reveal: 400ms;
    --tkf-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tkf-theme-dark {
    /* Light text on dark reads thinner: one notch more weight and air. */
    --tkf-wght-body: 425;
    --tkf-track-body: 0.005em;
    --tkf-accent-text: #FF5A5F;
    --tkf-ink: #FFFFFF;
    --tkf-ink-2: #D5D7DC;
    --tkf-ink-3: #AEB2BA;
    --tkf-line: #2E3440;
    --tkf-canvas: #171B23;
    --tkf-surface: #1F2430;
    --tkf-error: #FF8A80;
    --tkf-error-bg: #3A1F22;
    --tkf-success: #7BD89A;
    --tkf-success-bg: #1C3326;
    --tkf-warning: #FFCF70;
    --tkf-warning-bg: #3A301C;
    --tkf-info: #8EC3F5;
    --tkf-info-bg: #1C2A3A;
    --tkf-disabled: #6B7280;
    --tkf-sky-sun: #461C23;
    --tkf-sky-ember: #45210F;
    --tkf-sky-void: #07080B;
    --tkf-sky-earth: #1A284C;
    --tkf-glass-1-bg: rgba(255, 255, 255, 0.06);
    --tkf-glass-1-border: rgba(255, 255, 255, 0.14);
    --tkf-glass-2-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    --tkf-glass-card-bg: linear-gradient(145deg, rgba(31, 36, 48, 0.82), rgba(31, 36, 48, 0.68));
    --tkf-glass-person-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    --tkf-glass-2-border: rgba(255, 255, 255, 0.14);
    --tkf-glass-2-shadow: 0 18px 42px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --tkf-glass-3-bg: rgba(23, 27, 35, 0.72);
    --tkf-glass-3-border: rgba(255, 255, 255, 0.14);
    --tkf-dialog-scrim: rgba(23, 27, 35, 0.86);
    --tkf-tint: rgba(255, 90, 95, 0.14);
    /* Logos are dark artwork, so the plate stays light but dimmed to sit on navy. */
    --tkf-logo-plate: rgba(206, 204, 199, 0.86);
    --tkf-portrait-sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 26%);
    --tkf-portrait-edge: rgba(255, 255, 255, 0.1);
    --tkf-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 48px -24px rgba(0, 0, 0, 0.6);
    --tkf-glass-2-shadow-lift: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 4px rgba(0, 0, 0, 0.2), 0 44px 80px -30px rgba(0, 0, 0, 0.6);
    --tkf-glass-rim: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 26%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.05) 76%, rgba(255, 255, 255, 0.25) 100%);
    color: var(--tkf-ink);
    color-scheme: dark;
}

/* ---------------------------------------------------------------- base -- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
[hidden] {
    display: none !important;
}
html {
    scroll-padding-top: calc(var(--tkf-nav-h) + var(--tkf-nav-top) + var(--tkf-space-4));
}
body.tkf {
    margin: 0;
    font-family: var(--tkf-font);
    font-size: var(--tkf-fs-body);
    line-height: 1.6;
    color: var(--tkf-ink);
    background: var(--tkf-canvas);
    -webkit-font-smoothing: antialiased;
}
/* Body weight and tracking follow the theme, also on dark bands inside a light page. */
body.tkf,
body.tkf .tkf-theme-dark {
    font-weight: var(--tkf-wght-body);
    letter-spacing: var(--tkf-track-body);
}
body.tkf h1,
body.tkf h2,
body.tkf h3,
body.tkf h4 {
    color: var(--tkf-ink);
    font-weight: var(--tkf-wght-heading);
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-wrap: balance;
    margin: 0;
}
body.tkf h1,
body.tkf h2 {
    font-stretch: var(--tkf-wdth-display);
    line-height: 1.1;
}
body.tkf h3 {
    font-stretch: var(--tkf-wdth-h3);
    font-weight: var(--tkf-wght-title);
}
body.tkf h4 {
    font-weight: var(--tkf-wght-title);
}
body.tkf p {
    margin: 0;
}
body.tkf a {
    color: inherit;
    text-decoration: none;
    transition: color var(--tkf-dur-fast) var(--tkf-ease);
}
body.tkf a:hover {
    color: var(--tkf-accent-text);
}
/* The ring follows each element's own radius: pills stay pills on focus. */
body.tkf :focus-visible {
    outline: none;
    box-shadow: var(--tkf-focus-ring);
}
:where(body.tkf) img {
    max-width: 100%;
    height: auto;
}
.tkf-container {
    width: 100%;
    max-width: calc(var(--tkf-container) + var(--tkf-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--tkf-gutter);
}
/* Browser default placeholder grey fails AA on the dark surface. */
body.tkf ::placeholder {
    color: var(--tkf-ink-3);
    opacity: 1;
}
.tkf-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.tkf-skip-link {
    position: fixed;
    top: var(--tkf-space-2);
    left: var(--tkf-space-2);
    z-index: var(--tkf-z-skip);
    padding: var(--tkf-space-3) var(--tkf-space-4);
    border-radius: var(--tkf-radius-sm);
    background: var(--tkf-surface);
    color: var(--tkf-ink);
    font-weight: 600;
    transform: translateY(-200%);
}
.tkf-skip-link:focus {
    transform: none;
}
.tkf-kicker {
    margin: 0 0 var(--tkf-space-2);
    font-size: var(--tkf-fs-kicker);
    font-stretch: var(--tkf-wdth-display);
    font-weight: var(--tkf-wght-title);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tkf-accent-text);
}
[data-tkf-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--tkf-dur-reveal) var(--tkf-ease), transform var(--tkf-dur-reveal) var(--tkf-ease);
}
[data-tkf-reveal].is-revealed,
html:not(.tkf-js) [data-tkf-reveal] {
    opacity: 1;
    transform: none;
}
@media (max-width: 767px) {
    :root {
        --tkf-section: var(--tkf-space-8);
        --tkf-nav-h: 52px;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    /* The sky is excluded: it snaps between three stills instead (see .tkf-sky). */
    *:not(.tkf-sky),
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    [data-tkf-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ------------------------------------------------------- glass fallbacks -- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tkf-glass,
    .tkf-nav__bar,
    .tkf-nav__submenu::before,
    .tkf-menu__panel,
    .tkf-announcement {
        background: var(--tkf-surface) !important;
    }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    .tkf-glass--2::before,
    .tkf-photo-frame::before,
    .tkf-announcement::before,
    .tkf-card__ambient {
        display: none;
    }
}
@media (prefers-reduced-transparency: reduce) {
    .tkf-glass,
    .tkf-nav__bar,
    .tkf-nav__submenu::before,
    .tkf-menu__panel,
    .tkf-announcement {
        background: var(--tkf-surface) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}
@media (forced-colors: active) {
    .tkf-glass,
    .tkf-nav__bar,
    .tkf-menu__panel,
    .tkf-announcement {
        border: 1px solid CanvasText !important;
        forced-color-adjust: auto;
    }
    body.tkf :focus-visible {
        outline: 2px solid Highlight;
    }
}

/* ============================================================== chrome == */
/* Nav: floating glass island, promoted from header-glass.css. */
.tkf-nav {
    position: fixed;
    top: var(--tkf-nav-top);
    left: 50%;
    z-index: var(--tkf-z-nav);
    width: max-content;
    max-width: min(1080px, calc(100vw - 2 * clamp(12px, 3vw, 28px)));
    transform: translateX(-50%);
    transition: top var(--tkf-dur-ui) var(--tkf-ease);
}
.tkf-nav.is-condensed {
    top: calc(var(--tkf-nav-top) * 0.5);
}
.tkf-nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tkf-space-4);
    min-height: var(--tkf-nav-h);
    padding: 6px 14px;
    border-radius: 36px;
    background: var(--tkf-glass-3-bg);
    -webkit-backdrop-filter: blur(var(--tkf-glass-3-blur)) saturate(180%);
    backdrop-filter: blur(var(--tkf-glass-3-blur)) saturate(180%);
    border: 1px solid var(--tkf-glass-3-border);
    box-shadow: var(--tkf-glass-3-shadow);
}
.tkf-nav__logo img {
    display: block;
    height: 34px;
    width: auto;
}
.tkf-nav__menu > ul {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tkf-nav__menu li {
    position: relative;
    list-style: none;
}
.tkf-nav__menu > ul > li > a,
.tkf-nav__menu > ul > li > .tkf-nav__label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 11px;
    border-radius: var(--tkf-radius-md);
    font-size: clamp(13px, 1.05vw, 16px);
    font-weight: 500;
    color: var(--tkf-ink);
}
.tkf-nav__menu > ul > li > a:hover,
.tkf-nav__menu > ul > li:hover > .tkf-nav__label,
.tkf-nav__menu > ul > li:focus-within > a,
.tkf-nav__menu > ul > li:focus-within > .tkf-nav__label,
.tkf-nav__menu a[aria-current="page"] {
    color: var(--tkf-accent-text);
    background: var(--tkf-tint);
}
.tkf-nav__submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 240px;
    margin: 0;
    padding: 14px 8px 8px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(4px);
    transition: opacity var(--tkf-dur-ui) var(--tkf-ease), transform var(--tkf-dur-ui) var(--tkf-ease), visibility var(--tkf-dur-ui);
    z-index: var(--tkf-z-raised);
}
.tkf-nav__submenu::before {
    content: "";
    position: absolute;
    inset: 6px 0 0 0;
    z-index: -1;
    border-radius: 18px;
    background: var(--tkf-glass-3-bg);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--tkf-glass-3-border);
    box-shadow: var(--tkf-glass-3-shadow);
}
.tkf-nav__menu li:hover > .tkf-nav__submenu,
.tkf-nav__menu li:focus-within > .tkf-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.tkf-nav__submenu a {
    display: block;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
}
.tkf-nav__submenu a:hover {
    background: var(--tkf-tint);
}
.tkf-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--tkf-space-2);
}
.tkf-nav__icon,
.tkf-nav__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 0;
    background: transparent;
    color: var(--tkf-ink);
    cursor: pointer;
}
/* Display preference (dark theme): shown in the bar from 768px, in the menu below. */
.tkf-prefs {
    display: flex;
    gap: var(--tkf-space-1);
}
.tkf-prefs__btn[aria-pressed="true"] {
    background: var(--tkf-tint);
    color: var(--tkf-accent-text);
}
.tkf-menu .tkf-prefs {
    margin-bottom: var(--tkf-space-3);
}
html:not(.tkf-js) .tkf-prefs {
    display: none;
}
.tkf-nav__gsb {
    height: 30px;
    width: auto;
}
.tkf-nav__burger {
    flex-direction: column;
    gap: 4px;
    display: none;
}
.tkf-nav__burger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}
.tkf-menu {
    position: fixed;
    inset: 0;
    z-index: var(--tkf-z-menu);
    background: rgba(17, 16, 19, 0.35);
}
.tkf-menu[hidden] {
    display: none;
}
.tkf-menu__panel {
    position: absolute;
    inset: var(--tkf-space-3) var(--tkf-space-3) auto;
    max-height: calc(100vh - 2 * var(--tkf-space-3));
    overflow-y: auto;
    padding: var(--tkf-space-5);
    border-radius: var(--tkf-radius-lg);
    background: var(--tkf-surface);
    box-shadow: var(--tkf-glass-3-shadow);
}
.tkf-menu__close {
    float: right;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--tkf-ink);
}
.tkf-menu__list,
.tkf-menu__list .tkf-nav__submenu {
    margin: 0;
    padding: 0;
    list-style: none;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
}
.tkf-menu__list .tkf-nav__submenu::before {
    display: none;
}
.tkf-menu__list .tkf-nav__submenu {
    padding-left: var(--tkf-space-4);
}
.tkf-menu__list a,
.tkf-menu__list .tkf-nav__label {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 17px;
    font-weight: 500;
}
.tkf-menu-open {
    overflow: hidden;
}
@media (max-width: 1199px) {
    .tkf-nav {
        width: calc(100% - 2 * clamp(12px, 3vw, 28px));
    }
    .tkf-nav__menu {
        display: none;
    }
    .tkf-nav__burger {
        display: inline-flex;
    }
}
@media (max-width: 767px) {
    .tkf-nav__actions .tkf-prefs {
        display: none;
    }
    .tkf-nav__gsb {
        display: none;
    }
}
/* No JS below 1200px: the burger cannot open the menu, so the menu renders
   inline under the fixed nav instead. */
@media (max-width: 1199px) {
    html:not(.tkf-js) .tkf-nav__burger,
    html:not(.tkf-js) .tkf-menu__close {
        display: none;
    }
    html:not(.tkf-js) .tkf-menu[hidden] {
        display: block;
        position: static;
        background: none;
        padding: calc(var(--tkf-nav-h) + var(--tkf-nav-top) + var(--tkf-space-3)) var(--tkf-space-3) 0;
    }
    html:not(.tkf-js) .tkf-menu__panel {
        position: static;
        max-height: none;
        box-shadow: none;
    }
}
@media (max-width: 991px) {
    body[data-tkf-over-media] .tkf-nav__bar {
        background: var(--tkf-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Footer */
.tkf-footer {
    padding: var(--tkf-space-8) 0 var(--tkf-space-6);
    background: var(--tkf-canvas);
    color: var(--tkf-ink-2);
}
/* The last page surface fades into the footer instead of ending on a hard
   line where its sky is clipped. Eased (slow start, solid well before the
   edge) and under a third of the viewport tall, so Earth stays in view while
   the colour dissolves rather than stopping. --tkf-footer-bg resolves at :root, so a dark surface still fades
   to the (light) footer colour. Last surface, not :last-child: the homepage
   announcement <dialog> can follow it inside <main>. */
main > .tkf-surface:not(:has(~ .tkf-surface))::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: clamp(180px, 28vh, 320px);
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--tkf-footer-bg) 30%, transparent) 30%,
        color-mix(in srgb, var(--tkf-footer-bg) 70%, transparent) 58%,
        var(--tkf-footer-bg) 85%);
    pointer-events: none;
}
.tkf-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: var(--tkf-space-6);
}
.tkf-footer__brand img {
    height: 34px;
    width: auto;
    margin-bottom: var(--tkf-space-4);
}
.tkf-footer__title {
    margin-bottom: var(--tkf-space-4) !important;
    font-size: 16px;
}
.tkf-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tkf-footer__col li a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
}
.tkf-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tkf-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.tkf-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--tkf-line);
}
/* body.tkf outranks the global link hover, which would paint the icon
   accent-text on the red fill. */
body.tkf .tkf-social a:hover {
    background: var(--tkf-accent);
    border-color: var(--tkf-accent);
    color: var(--tkf-on-accent);
}
.tkf-footer__social {
    margin-top: var(--tkf-space-4) !important;
}
.tkf-card--person .tkf-social {
    justify-content: center;
    margin-top: var(--tkf-space-3);
}
.tkf-footer__newsletter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tkf-space-2);
    margin-top: var(--tkf-space-4);
}
.tkf-footer__newsletter input {
    flex: 1 1 180px;
    min-height: 44px;
    padding: 0 var(--tkf-space-4);
    border: 1px solid var(--tkf-line);
    border-radius: var(--tkf-radius-pill);
    background: var(--tkf-surface);
    color: var(--tkf-ink);
}
.tkf-footer__newsletter .subscribe-ajax-msg {
    flex-basis: 100%;
}
.tkf-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--tkf-space-4);
    margin-top: var(--tkf-space-7);
    padding-top: var(--tkf-space-5);
    border-top: 1px solid var(--tkf-line);
    font-size: var(--tkf-fs-small);
}
.tkf-footer__contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tkf-space-5);
}
@media (max-width: 991px) {
    .tkf-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 575px) {
    .tkf-footer__grid {
        grid-template-columns: 1fr;
    }
}

/* Back to top */
.tkf-back-to-top {
    position: fixed;
    right: var(--tkf-space-5);
    bottom: var(--tkf-space-5);
    z-index: var(--tkf-z-sticky);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--tkf-ink);
}
.tkf-back-to-top[hidden] {
    display: none;
}

/* ========================================================= components == */
/* surface */
.tkf-surface {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
    background: var(--tkf-canvas);
    color: var(--tkf-ink);
}
/* Sky: the path from the sun to Earth, mapped onto scroll. One sticky,
   viewport-tall window behind the content (the negative margin takes it out
   of the flow) looks onto a three-viewport strip: the sun's corona at the top,
   open space with solar-wind streaks in the middle, Earth's limb at the bottom.
   The clock is <main>: the journey starts with its top at the top of the
   viewport and ends as its bottom meets the bottom, so every page makes the
   whole trip however long it is, Earth stands highest just as the footer
   enters, and every surface on a page (dark bands too) shares one position.
   Pages too short to scroll rest on the middle frame.

   Shards are irregular polygons with knife-cut edges and soft colour ramps
   inside. Each fill mixes sky tokens toward the canvas and never past them,
   and shards are opaque, so overlaps cannot darken beyond a tested peak.
   Only the strip's transform moves, and only while the visitor scrolls. */
.tkf-surface__sky {
    position: sticky;
    top: 0;
    z-index: -1;
    height: 100vh;
    margin-bottom: -100vh;
    overflow: hidden;
    pointer-events: none;
}
.tkf-sky {
    position: absolute;
    inset: 0 0 auto;
    height: 300vh;
    /* Fallback and resting position: --tkf-journey (0 sun .. 1 Earth) is set
       by tkf.js where scroll timelines are missing; 0.5 is the middle frame. */
    transform: translate3d(0, calc(var(--tkf-journey, 0.5) * -200vh), 0);
}
@supports (animation-timeline: view()) {
    main {
        view-timeline: --tkf-journey block;
    }
    .tkf-sky {
        animation: tkf-journey linear both;
        animation-timeline: --tkf-journey;
        animation-range: contain 0% contain 100%;
    }
}
@keyframes tkf-journey {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(0, -200vh, 0);
    }
}
/* Reduced motion: no sliding. The strip holds sun, space or Earth and changes
   frame only at the thirds of the page. */
@media (prefers-reduced-motion: reduce) {
    .tkf-sky {
        animation-timing-function: steps(3, jump-none);
    }
}
.tkf-sky__shard {
    position: absolute;
    left: 0;
    width: 100%;
}
/* Sun: corona in stepped bands from the top-left corner, core at peak. */
.tkf-sky__shard--sun-3 {
    top: 0;
    height: 135vh;
    clip-path: polygon(0 0, 92% 0, 84% 6%, 77% 15%, 61% 21%, 55% 34%, 38% 44%, 30% 58%, 14% 66%, 0 74%);
    background: linear-gradient(160deg,
        color-mix(in oklab, var(--tkf-sky-sun) 62%, var(--tkf-canvas)),
        color-mix(in oklab, var(--tkf-sky-ember) 42%, var(--tkf-canvas)) 55%,
        color-mix(in oklab, var(--tkf-sky-ember) 22%, var(--tkf-canvas)));
}
.tkf-sky__shard--sun-2 {
    top: 0;
    height: 135vh;
    clip-path: polygon(0 0, 66% 0, 60% 7%, 47% 12%, 42% 24%, 28% 31%, 22% 43%, 9% 49%, 0 55%);
    background: linear-gradient(155deg,
        color-mix(in oklab, var(--tkf-sky-sun) 90%, var(--tkf-canvas)),
        color-mix(in oklab, var(--tkf-sky-ember) 68%, var(--tkf-canvas)));
}
.tkf-sky__shard--sun-1 {
    top: 0;
    height: 135vh;
    clip-path: polygon(0 0, 40% 0, 35% 6%, 26% 9%, 21% 19%, 12% 23%, 6% 33%, 0 36%);
    background: linear-gradient(150deg, var(--tkf-sky-sun) 30%, var(--tkf-sky-ember));
}
/* Solar wind: long slivers running from the sun toward Earth, fading out. */
.tkf-sky__shard--wind-1 {
    top: 20vh;
    height: 200vh;
    clip-path: polygon(24% 6%, 27.5% 5%, 88% 78%, 86% 80%);
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--tkf-sky-ember) 70%, var(--tkf-canvas)) 5%,
        var(--tkf-canvas) 80%);
}
.tkf-sky__shard--wind-2 {
    top: 20vh;
    height: 200vh;
    clip-path: polygon(41% 2%, 43% 1.5%, 71% 58%, 69.5% 59.5%);
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--tkf-sky-sun) 55%, var(--tkf-canvas)) 2%,
        var(--tkf-canvas) 60%);
}
/* Space: tilted facets of void between the two lights. */
.tkf-sky__shard--void-1 {
    top: 95vh;
    height: 120vh;
    clip-path: polygon(0 22%, 38% 8%, 100% 30%, 100% 62%, 64% 78%, 0 70%);
    background: linear-gradient(100deg,
        color-mix(in oklab, var(--tkf-sky-void) 50%, var(--tkf-canvas)),
        color-mix(in oklab, var(--tkf-sky-void) 15%, var(--tkf-canvas)));
}
.tkf-sky__shard--void-2 {
    top: 95vh;
    height: 120vh;
    clip-path: polygon(58% 10%, 100% 0, 100% 48%, 80% 40%);
    background: linear-gradient(200deg,
        color-mix(in oklab, var(--tkf-sky-void) 75%, var(--tkf-canvas)),
        color-mix(in oklab, var(--tkf-sky-earth) 35%, var(--tkf-canvas)));
}
/* Earth: a faceted limb under two atmosphere bands, with a night side. It sits
   in the top half of the last frame: the bottom half is where the last
   surface fades into the footer. */
.tkf-sky__shard--earth-3 {
    top: 200vh;
    height: 100vh;
    clip-path: polygon(0 30%, 14% 20%, 30% 12%, 48% 7%, 66% 5%, 84% 8%, 100% 14%, 100% 100%, 0 100%);
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--tkf-sky-earth) 55%, var(--tkf-canvas)),
        color-mix(in oklab, var(--tkf-sky-earth) 72%, var(--tkf-canvas)));
}
.tkf-sky__shard--earth-2 {
    top: 200vh;
    height: 100vh;
    clip-path: polygon(0 44%, 16% 33%, 33% 25%, 51% 20%, 69% 19%, 86% 22%, 100% 29%, 100% 100%, 0 100%);
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--tkf-sky-earth) 84%, var(--tkf-canvas)),
        color-mix(in oklab, var(--tkf-sky-earth) 94%, var(--tkf-canvas)));
}
.tkf-sky__shard--earth-1 {
    top: 200vh;
    height: 100vh;
    clip-path: polygon(0 60%, 18% 47%, 36% 38%, 54% 33%, 72% 33%, 88% 37%, 100% 44%, 100% 100%, 0 100%);
    background: linear-gradient(175deg, var(--tkf-sky-earth) 40%, color-mix(in oklab, var(--tkf-sky-earth) 80%, var(--tkf-sky-void)));
}
.tkf-sky__shard--night {
    top: 200vh;
    height: 100vh;
    clip-path: polygon(64% 33%, 72% 33%, 88% 37%, 100% 44%, 100% 100%, 46% 100%);
    background: linear-gradient(120deg,
        color-mix(in oklab, var(--tkf-sky-earth) 55%, var(--tkf-sky-void)),
        color-mix(in oklab, var(--tkf-sky-earth) 30%, var(--tkf-sky-void)));
}
@media (forced-colors: active), print {
    .tkf-surface__sky {
        display: none;
    }
}
.tkf-icon {
    width: 1.5em;
    height: 1.5em;
    overflow: visible;
}

/* page-head */
.tkf-page-head {
    position: relative;
    padding: calc(var(--tkf-nav-h) + var(--tkf-nav-top) + var(--tkf-space-8)) 0 var(--tkf-space-8);
    text-align: center;
}
.tkf-page-head__inner {
    position: relative;
    z-index: var(--tkf-z-base);
    max-width: calc(720px + var(--tkf-gutter) * 2);
}
.tkf-page-head--compact {
    padding-top: calc(var(--tkf-nav-h) + var(--tkf-nav-top) + var(--tkf-space-6));
    padding-bottom: var(--tkf-space-5);
}
.tkf-page-head--compact + .tkf-section {
    padding-top: var(--tkf-space-5);
}
.tkf-page-head__title {
    font-size: var(--tkf-fs-display);
    font-weight: var(--tkf-wght-display);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.tkf-page-head__lead {
    margin-top: var(--tkf-space-4) !important;
    font-size: 18px;
    color: var(--tkf-ink-2);
}
.tkf-page-head__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tkf-space-3);
    margin-top: var(--tkf-space-6);
}
.tkf-page-head__crumbs {
    display: flex;
    justify-content: center;
    margin-bottom: var(--tkf-space-4);
}
.tkf-page-head--media {
    min-height: min(80vh, 720px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--tkf-canvas);
}
.tkf-page-head__media,
.tkf-page-head__media > img,
.tkf-page-head__media > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tkf-page-head__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tkf-scrim);
}
.tkf-page-head--media .tkf-page-head__inner {
    background: transparent;
}
@media (max-width: 767px) {
    .tkf-page-head__lead {
        font-size: var(--tkf-fs-body);
    }
}

/* section */
.tkf-section {
    padding: var(--tkf-section) 0;
}
.tkf-section__head {
    max-width: 720px;
    margin: 0 auto var(--tkf-space-7);
    text-align: center;
}
.tkf-section__title {
    font-size: var(--tkf-fs-h2);
    letter-spacing: -0.015em;
}
.tkf-section__lead {
    margin-top: var(--tkf-space-3) !important;
    color: var(--tkf-ink-2);
}

/* breadcrumbs */
.tkf-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tkf-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--tkf-fs-small);
    color: var(--tkf-ink-3);
}
.tkf-breadcrumbs li + li::before {
    content: "/";
    margin-right: var(--tkf-space-2);
    color: var(--tkf-ink-3);
}
.tkf-breadcrumbs [aria-current] {
    color: var(--tkf-ink);
    font-weight: 600;
}

/* glass */
.tkf-glass {
    border-radius: var(--tkf-radius-lg);
}
.tkf-glass--1 {
    background: var(--tkf-glass-1-bg);
    -webkit-backdrop-filter: blur(var(--tkf-glass-1-blur)) saturate(140%);
    backdrop-filter: blur(var(--tkf-glass-1-blur)) saturate(140%);
    border: 1px solid var(--tkf-glass-1-border);
    border-radius: var(--tkf-radius-md);
}
.tkf-glass--2 {
    padding: var(--tkf-space-7);
    background: var(--tkf-glass-2-bg);
    border: 1px solid var(--tkf-glass-2-border);
    box-shadow: var(--tkf-glass-2-shadow);
}
/* Liquid glass material (level 2 and portrait frames): blurred, colour-boosted
   backdrop; a light-catching rim under the content; a spring lift on
   interactive glass. */
.tkf-glass--2,
.tkf-photo-frame {
    position: relative;
    isolation: isolate;
    -webkit-backdrop-filter: blur(var(--tkf-glass-2-blur)) saturate(180%);
    backdrop-filter: blur(var(--tkf-glass-2-blur)) saturate(180%);
    transition: transform var(--tkf-dur-glass) var(--tkf-spring), box-shadow var(--tkf-dur-glass) var(--tkf-ease), border-color var(--tkf-dur-fast) var(--tkf-ease);
}
.tkf-glass--2::before,
.tkf-photo-frame::before,
.tkf-announcement::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background: var(--tkf-glass-rim);
    -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
.tkf-card--link:hover,
a.tkf-glass--2:hover {
    transform: translateY(-4px);
    box-shadow: var(--tkf-glass-2-shadow-lift);
}
@media (prefers-reduced-motion: reduce) {
    .tkf-glass--2,
    .tkf-photo-frame {
        transition: none;
    }
    .tkf-card--link:hover,
    a.tkf-glass--2:hover {
        transform: none;
    }
}
.tkf-glass--3 {
    background: var(--tkf-glass-3-bg);
    -webkit-backdrop-filter: blur(var(--tkf-glass-3-blur)) saturate(180%);
    backdrop-filter: blur(var(--tkf-glass-3-blur)) saturate(180%);
    border: 1px solid var(--tkf-glass-3-border);
    box-shadow: var(--tkf-glass-3-shadow);
}
@media (max-width: 575px) {
    .tkf-glass--2 {
        padding: var(--tkf-space-6) var(--tkf-space-5);
        border-radius: 18px;
    }
}

/* btn */
.tkf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tkf-space-2);
    min-height: 48px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: var(--tkf-radius-pill);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--tkf-dur-fast) var(--tkf-ease), color var(--tkf-dur-fast) var(--tkf-ease), border-color var(--tkf-dur-fast) var(--tkf-ease);
}
body.tkf .tkf-btn--primary,
.tkf-btn--primary {
    background: var(--tkf-accent);
    color: var(--tkf-on-accent);
}
body.tkf .tkf-btn--primary:hover {
    background: var(--tkf-accent-hover);
    color: var(--tkf-on-accent);
}
.tkf-btn--secondary {
    background: var(--tkf-glass-1-bg);
    border-color: var(--tkf-line);
    color: var(--tkf-ink);
}
.tkf-btn--secondary:hover {
    border-color: var(--tkf-accent);
}
.tkf-btn--link {
    min-height: 44px;
    padding: 0;
    background: none;
    color: var(--tkf-accent-text);
}
.tkf-btn--link:hover {
    text-decoration: underline;
}
.tkf-btn[disabled],
.tkf-btn[aria-disabled="true"] {
    background: var(--tkf-line);
    color: var(--tkf-ink-3);
    cursor: not-allowed;
}

/* alert */
.tkf-alert {
    padding: var(--tkf-space-4) var(--tkf-space-5);
    border-radius: var(--tkf-radius-md);
    border: 1px solid currentColor;
    font-weight: 500;
}
.tkf-alert--info {
    background: var(--tkf-surface);
    color: var(--tkf-ink);
    border-color: var(--tkf-line);
}
.tkf-alert--success {
    background: var(--tkf-success-bg);
    color: var(--tkf-success);
}
.tkf-alert--error {
    background: var(--tkf-error-bg);
    color: var(--tkf-error);
}
.tkf-alert--warning {
    background: var(--tkf-warning-bg);
    color: var(--tkf-warning);
}

/* empty */
.tkf-empty {
    padding: var(--tkf-space-6) 0;
    text-align: center;
    color: var(--tkf-ink-3);
}

/* tabs */
.tkf-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--tkf-space-6);
    margin-bottom: var(--tkf-space-5);
    border-bottom: 1px solid var(--tkf-line);
}
.tkf-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--tkf-space-3);
    min-height: 48px;
    padding: var(--tkf-space-3) var(--tkf-space-1) var(--tkf-space-4);
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--tkf-ink-3);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transform: translateY(1px);
    transition: color var(--tkf-dur-fast) var(--tkf-ease), border-color var(--tkf-dur-fast) var(--tkf-ease);
}
.tkf-tabs__tab svg {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
}
.tkf-tabs__tab:hover,
.tkf-tabs__tab[aria-selected="true"],
.tkf-tabs__tab[aria-pressed="true"] {
    color: var(--tkf-ink);
}
.tkf-tabs__tab[aria-selected="true"],
.tkf-tabs__tab[aria-pressed="true"] {
    border-bottom-color: var(--tkf-accent);
}
.tkf-tabs__tab[aria-selected="true"] svg,
.tkf-tabs__tab[aria-pressed="true"] svg {
    color: var(--tkf-accent);
}
.tkf-tab-panel[hidden] {
    display: none;
}
/* Panel headings name each panel when JS is off (all panels stacked);
   with JS the tab already names it, so the heading is for screen readers only. */
.tkf-tab-panel__title {
    margin-bottom: var(--tkf-space-5) !important;
}
.tkf-js .tkf-tab-panel__title {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* chips */
.tkf-chips {
    display: flex;
    gap: var(--tkf-space-2);
    overflow-x: auto;
    padding-bottom: var(--tkf-space-1);
    margin-bottom: var(--tkf-space-5);
}
.tkf-chip {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid var(--tkf-line);
    border-radius: var(--tkf-radius-pill);
    background: var(--tkf-surface);
    color: var(--tkf-ink-2);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tkf-dur-fast) var(--tkf-ease), color var(--tkf-dur-fast) var(--tkf-ease), border-color var(--tkf-dur-fast) var(--tkf-ease);
}
.tkf-chip:hover {
    border-color: var(--tkf-accent);
    color: var(--tkf-accent-text);
}
.tkf-chip[aria-pressed="true"],
.tkf-chip[aria-current="page"] {
    background: var(--tkf-ink);
    border-color: var(--tkf-ink);
    color: var(--tkf-surface);
}
.tkf-chip-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tkf-space-2);
}
/* standalone row above a grid; inside a filter bar the bar sets the spacing */
.tkf-container > .tkf-chip-nav {
    margin-bottom: var(--tkf-space-5);
}
a.tkf-chip {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* clamp: 3 lines until opened; the clamp needs JS, so no-JS shows everything */
.tkf-js .tkf-clamp:not(.is-open) .tkf-clamp__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.tkf-clamp__text > :last-child {
    margin-bottom: 0;
}
.tkf-clamp__toggle {
    min-height: 24px;
    margin-top: var(--tkf-space-1);
    padding: 0;
    border: 0;
    background: none;
    color: var(--tkf-accent-text);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

[data-tkf-filter-item][hidden],
[data-tkf-filter-empty][hidden] {
    display: none !important;
}
.tkf-filter__count {
    margin-bottom: var(--tkf-space-3) !important;
    font-size: var(--tkf-fs-small);
    color: var(--tkf-ink-3);
}

/* accordion */
.tkf-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--tkf-space-3);
}
.tkf-accordion__item {
    border: 1px solid var(--tkf-line);
    border-radius: var(--tkf-radius-md);
    background: var(--tkf-glass-1-bg);
    overflow: hidden;
}
.tkf-accordion__heading {
    font-size: 17px !important;
}
.tkf-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tkf-space-4);
    width: 100%;
    min-height: 56px;
    padding: var(--tkf-space-4) var(--tkf-space-5);
    border: 0;
    background: transparent;
    color: var(--tkf-ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.tkf-accordion__trigger[aria-expanded="true"] {
    color: var(--tkf-accent-text);
}
.tkf-accordion__icon {
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}
.tkf-accordion__icon::before,
.tkf-accordion__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform var(--tkf-dur-ui) var(--tkf-ease);
}
.tkf-accordion__icon::before {
    width: 100%;
    height: 2px;
}
.tkf-accordion__icon::after {
    width: 2px;
    height: 100%;
}
.tkf-accordion__trigger[aria-expanded="true"] .tkf-accordion__icon::after {
    transform: translate(-50%, -50%) scaleY(0);
}
.tkf-accordion__panel[hidden] {
    display: none;
}
.tkf-accordion__body {
    padding: 0 var(--tkf-space-5) var(--tkf-space-5);
    overflow-x: auto;
}

/* card: one object everywhere. The glass card is a thin frame (the bezel);
   a photo, portrait or icon sits in its own rounded opening and the text
   sits below on the same glass. */
.tkf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--tkf-bezel);
    height: 100%;
    background: var(--tkf-glass-card-bg);
}
/* Dense content panels sit on the sky: their fill already hides it, so
   they skip the backdrop blur. Live glass stays on chrome (nav, back to top),
   captions over media, date stamps and person cards. */
.tkf-card:not(.tkf-card--person),
.tkf-sponsors__item,
.tkf-iban,
.tkf-promo {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.tkf-card__media {
    position: relative;
    flex: none;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: calc(var(--tkf-radius-lg) - var(--tkf-bezel));
    background: var(--tkf-surface);
}
.tkf-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--tkf-portrait-sheen);
    box-shadow: inset 0 0 0 1px var(--tkf-portrait-edge);
    pointer-events: none;
}
.tkf-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--tkf-dur-reveal) var(--tkf-ease);
}
.tkf-card--link:hover .tkf-card__media img {
    transform: scale(1.04);
}
/* Damga: the publish date stamped on the photo, on the slider caption's glass. */
.tkf-card__stamp {
    position: absolute;
    top: var(--tkf-space-3);
    left: var(--tkf-space-3);
    z-index: var(--tkf-z-base);
    display: grid;
    justify-items: center;
    min-width: 54px;
    padding: 6px var(--tkf-space-2) 7px;
    border-radius: var(--tkf-radius-sm);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.tkf-card__stamp b {
    font-size: 24px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.tkf-card__stamp span {
    margin-top: 3px;
    color: var(--tkf-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* A post without its own photo: grip tape carrying its category. */
.tkf-card__grip {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    height: 100%;
    padding: var(--tkf-space-4);
    background: var(--tkf-grip);
    color: var(--tkf-on-accent);
}
.tkf-card__grip .tkf-icon {
    width: 30px;
    height: 30px;
    color: var(--tkf-accent);
}
.tkf-card__grip-label {
    color: var(--tkf-on-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tkf-card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: var(--tkf-space-3) 0 0 var(--tkf-space-3);
    border-radius: calc(var(--tkf-radius-lg) - var(--tkf-bezel));
    background: var(--tkf-tint);
    box-shadow: inset 0 0 0 1px var(--tkf-portrait-edge);
    color: var(--tkf-accent);
}
.tkf-card__icon svg {
    width: 26px;
    height: 26px;
}
.tkf-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--tkf-space-2);
    padding: var(--tkf-space-4);
}
.tkf-card__meta,
.tkf-card__role {
    font-size: var(--tkf-fs-small);
    color: var(--tkf-ink-3);
}
.tkf-card__title {
    font-size: var(--tkf-fs-h4);
    font-stretch: 100%;
    line-height: 1.3;
    letter-spacing: -0.005em;
    text-wrap: balance;
}
.tkf-card__text {
    color: var(--tkf-ink-2);
}
.tkf-card--news .tkf-card__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
}
.tkf-card__foot {
    display: flex;
    align-items: center;
    gap: var(--tkf-space-3);
    margin-top: auto;
    padding-top: var(--tkf-space-2);
    color: var(--tkf-ink-3);
    font-size: var(--tkf-fs-small);
    font-variant-numeric: tabular-nums;
}
.tkf-card__cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tkf-ink-2);
    font-weight: 600;
}
.tkf-card__cat::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tkf-accent);
}
.tkf-card__when {
    display: none;
}
.tkf-card__go {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: 1px solid var(--tkf-line);
    border-radius: 50%;
    color: var(--tkf-ink);
    transition: background-color var(--tkf-dur-ui) var(--tkf-ease), border-color var(--tkf-dur-ui) var(--tkf-ease), color var(--tkf-dur-ui) var(--tkf-ease), transform var(--tkf-dur-ui) var(--tkf-ease);
}
.tkf-card__go .tkf-icon {
    width: 16px;
    height: 16px;
}
.tkf-card--link:hover .tkf-card__go {
    border-color: var(--tkf-accent);
    background: var(--tkf-accent);
    color: var(--tkf-on-accent);
    transform: translateX(2px);
}
.tkf-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: var(--tkf-z-base);
}
.tkf-card--link:hover {
    border-color: var(--tkf-accent);
}
.tkf-card--link:focus-within {
    box-shadow: var(--tkf-focus-ring);
}
.tkf-card--link .tkf-card__link:focus-visible {
    box-shadow: none;
}
.tkf-card__icon + .tkf-card__body {
    padding-top: var(--tkf-space-3);
}
@media (prefers-reduced-motion: reduce) {
    .tkf-card__media img,
    .tkf-card__go {
        transition: none;
    }
    .tkf-card--link:hover .tkf-card__media img,
    .tkf-card--link:hover .tkf-card__go {
        transform: none;
    }
}
/* person card: the same frame holding a 4:5 portrait, in a clearer glass. */
.tkf-card--person {
    background: var(--tkf-glass-person-bg);
    text-align: center;
}
.tkf-card__photo {
    aspect-ratio: 4 / 5;
}
.tkf-card__ambient {
    position: absolute;
    top: -15%;
    left: -15%;
    z-index: -2;
    width: 130%;
    max-width: none; /* the img reset caps at 100%, leaving the right edge bare */
    height: 130%;
    object-fit: cover;
    filter: blur(var(--tkf-glass-2-blur)) saturate(170%);
    opacity: 0.7;
    -webkit-mask-image: var(--tkf-ambient-mask);
    mask-image: var(--tkf-ambient-mask);
    pointer-events: none;
}
/* Over a portrait's ambient light: full ink keeps AA on any photo. */
.tkf-card--person .tkf-card__role {
    color: var(--tkf-ink);
}
.tkf-card--person .tkf-card__body {
    align-items: center;
    padding: var(--tkf-space-4) var(--tkf-space-3);
}
.tkf-card__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tkf-ink-3);
}
/* News grids turn into a compact list on phones: thumbnail beside the title
   and date; the stamp and the excerpt wait for wider screens. */
@media (max-width: 575px) {
    .tkf-grid.tkf-news-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--tkf-space-3);
    }
    .tkf-news-grid .tkf-card {
        flex-direction: row;
    }
    .tkf-news-grid .tkf-card__media {
        flex: 0 0 104px;
        aspect-ratio: auto;
        min-height: 96px;
    }
    .tkf-news-grid .tkf-card__media img {
        position: absolute;
        inset: 0;
    }
    .tkf-news-grid .tkf-card__stamp,
    .tkf-news-grid .tkf-card__grip-label,
    .tkf-news-grid .tkf-card__text,
    .tkf-news-grid .tkf-card__meta,
    .tkf-news-grid .tkf-card__cat,
    .tkf-news-grid .tkf-card__go {
        display: none;
    }
    .tkf-news-grid .tkf-card__grip {
        align-items: center;
        justify-content: center;
    }
    .tkf-news-grid .tkf-card__when {
        display: inline;
    }
    .tkf-news-grid .tkf-card__body {
        min-width: 0;
        justify-content: center;
        gap: var(--tkf-space-1);
        padding: var(--tkf-space-3) var(--tkf-space-3) var(--tkf-space-3) var(--tkf-space-4);
    }
    .tkf-news-grid .tkf-card__title {
        font-size: 16px;
    }
    .tkf-news-grid .tkf-card__foot {
        margin-top: 2px;
        padding-top: 0;
    }
}

/* portrait: the photo opening. Radius is the bezel's minus its width, so the
   glass margin stays even; a faint specular sheen and hairline edge read as
   glass over the print. */
.tkf-portrait {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--tkf-radius-lg) - var(--tkf-bezel));
    background: var(--tkf-line);
}
.tkf-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
}
.tkf-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--tkf-portrait-sheen);
    box-shadow: inset 0 0 0 1px var(--tkf-portrait-edge);
    pointer-events: none;
}

/* photo frame: a standalone glass bezel around one portrait (profile pages). */
.tkf-photo-frame {
    padding: var(--tkf-bezel);
    border: 1px solid var(--tkf-glass-2-border);
    border-radius: var(--tkf-radius-lg);
    background: var(--tkf-glass-2-bg);
    box-shadow: var(--tkf-frame-shadow);
}

/* grid */
.tkf-grid {
    display: grid;
    gap: var(--tkf-space-5);
}
.tkf-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tkf-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tkf-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 991px) {
    .tkf-grid--3,
    .tkf-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575px) {
    .tkf-grid--2,
    .tkf-grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }
    .tkf-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* list */
.tkf-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--tkf-line);
}
.tkf-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tkf-space-5);
    padding: 18px var(--tkf-space-4);
    border-bottom: 1px solid var(--tkf-line);
    transition: background var(--tkf-dur-fast) var(--tkf-ease);
}
.tkf-list-row:hover {
    background: var(--tkf-glass-1-bg);
}
.tkf-list-row__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tkf-list-row__title {
    font-weight: 600;
    line-height: 1.4;
}
.tkf-list-row__meta {
    font-size: var(--tkf-fs-small);
    color: var(--tkf-ink-3);
}
.tkf-list-row__action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--tkf-accent-text) !important;
    font-weight: 600;
    white-space: nowrap;
}
.tkf-list-row__action:hover {
    text-decoration: underline;
}
@media (max-width: 640px) {
    .tkf-list-row {
        flex-wrap: wrap;
        gap: var(--tkf-space-2) var(--tkf-space-4);
        padding: 14px var(--tkf-space-2);
    }
}

/* prose */
.tkf-prose {
    max-width: 760px;
    color: var(--tkf-ink-2);
    font-size: 17px;
    line-height: 1.75;
}
.tkf-prose > * + * {
    margin-top: 1em !important;
}
.tkf-prose h2,
.tkf-prose h3,
.tkf-prose h4 {
    margin-top: 1.6em !important;
    color: var(--tkf-ink);
}
.tkf-prose h2 {
    font-size: 28px;
}
.tkf-prose h3 {
    font-size: var(--tkf-fs-h3);
}
.tkf-prose a {
    color: var(--tkf-accent-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tkf-prose ul,
.tkf-prose ol {
    padding-left: 1.3em;
}
.tkf-prose img {
    border-radius: var(--tkf-radius-md);
}
.tkf-prose table {
    width: 100%;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
}
.tkf-prose th,
.tkf-prose td {
    padding: var(--tkf-space-2) var(--tkf-space-3);
    border: 1px solid var(--tkf-line);
}
.tkf-prose blockquote {
    padding-left: var(--tkf-space-4);
    border-left: 3px solid var(--tkf-accent);
    color: var(--tkf-ink);
}

/* field */
.tkf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--tkf-space-4);
}
.tkf-field__label {
    font-weight: 600;
    font-size: 15px;
}
.tkf-field__req {
    color: var(--tkf-accent-text);
}
.tkf-field__control {
    width: 100%;
    min-height: 48px;
    padding: var(--tkf-space-3) var(--tkf-space-4);
    border: 1px solid var(--tkf-line);
    border-radius: var(--tkf-radius-sm);
    background: var(--tkf-surface);
    color: var(--tkf-ink);
    font: inherit;
}
.tkf-field__control:focus-visible {
    border-color: var(--tkf-accent);
}
.tkf-field__control[aria-invalid="true"] {
    border-color: var(--tkf-error);
}
.tkf-field__control:disabled {
    color: var(--tkf-ink-3);
    background: var(--tkf-canvas);
}
.tkf-field__hint {
    font-size: var(--tkf-fs-small);
    color: var(--tkf-ink-3);
}
.tkf-field__error {
    min-height: 0;
    font-size: var(--tkf-fs-small);
    color: var(--tkf-error);
}
.tkf-field__error:empty {
    display: none;
}
.tkf-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--tkf-space-3);
    align-items: start;
}
.tkf-check__control {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    accent-color: var(--tkf-accent);
}
.tkf-check__label {
    color: var(--tkf-ink-2);
    font-size: var(--tkf-fs-small);
}
.tkf-check__label a {
    color: var(--tkf-accent-text);
}
.tkf-check .tkf-field__error {
    grid-column: 2;
}
/* Honeypot: off-screen, never display:none (some bots skip hidden inputs). */
.tkf-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
}
.tkf-note {
    margin-top: var(--tkf-space-5) !important;
    color: var(--tkf-ink-2);
    font-size: var(--tkf-fs-small);
}
.tkf-table-wrap {
    overflow-x: auto;
}
.tkf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tkf-fs-small);
    font-variant-numeric: tabular-nums;
}
.tkf-table th,
.tkf-table td {
    padding: var(--tkf-space-3) var(--tkf-space-4);
    border-bottom: 1px solid var(--tkf-line);
    text-align: left;
    vertical-align: top;
}
.tkf-table thead th {
    color: var(--tkf-ink);
    font-weight: 700;
}
.tkf-table tbody th {
    color: var(--tkf-ink-2);
    font-weight: 600;
}
.tkf-table small {
    display: block;
    color: var(--tkf-ink-3);
    font-weight: 500;
}
.tkf-form-card {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--tkf-space-7) !important;
}
.tkf-form-card__title {
    margin-bottom: var(--tkf-space-5) !important;
    text-align: center;
}
.tkf-form {
    display: flex;
    flex-direction: column;
    gap: var(--tkf-space-4);
}
.tkf-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tkf-space-4);
}
@media (max-width: 767px) {
    .tkf-form-card {
        padding: var(--tkf-space-5) !important;
    }
    .tkf-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.tkf-gallery {
    position: relative;
}
.tkf-gallery__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--tkf-radius-md);
}
/* Galleries sit inside clipping cards (e.g. /tesisler references) and the
   slides cover the track's own box, so its focus ring is an overlay on the
   gallery, drawn inside the edge. */
@supports selector(:has(a)) {
    body.tkf .tkf-gallery__track:focus-visible {
        box-shadow: none;
    }
    .tkf-gallery:has(> .tkf-gallery__track:focus-visible)::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: var(--tkf-radius-md);
        box-shadow: var(--tkf-focus-ring-inset);
        pointer-events: none;
    }
}
.tkf-gallery__track::-webkit-scrollbar {
    display: none;
}
.tkf-gallery__slide {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    scroll-snap-align: start;
}
.tkf-gallery__controls {
    position: absolute;
    right: var(--tkf-space-3);
    bottom: var(--tkf-space-3);
    display: flex;
    gap: var(--tkf-space-2);
}
.tkf-gallery__controls[hidden] {
    display: none;
}
/* Round 44px icon buttons (gallery, lightbox, slider, popup and toast close). */
.tkf-gallery__btn,
.tkf-lightbox__btn,
.tkf-slider__btn,
.tkf-announcement__close,
.tkf-toast__close {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tkf-ink);
    cursor: pointer;
}
.tkf-gallery__btn {
    background: var(--tkf-surface);
    box-shadow: var(--tkf-glass-2-shadow);
}

/* lightbox: square thumbnail grid + full-screen modal viewer */
.tkf-lightbox-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tkf-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.tkf-lightbox-grid__item {
    display: block;
    overflow: hidden;
    border-radius: var(--tkf-radius-md);
}
.tkf-lightbox-grid__item img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform var(--tkf-dur-ui) var(--tkf-ease);
}
.tkf-lightbox-grid__item:hover img {
    transform: scale(1.03);
}
.tkf-lightbox-grid__item:focus-visible {
    outline: none;
    box-shadow: var(--tkf-focus-ring);
}
@media (max-width: 991px) {
    .tkf-lightbox-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--tkf-space-3);
    }
}
.tkf-lightbox {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: var(--tkf-space-4);
    border: 0;
    background: var(--tkf-lightbox-bg);
    color: var(--tkf-ink);
}
.tkf-lightbox[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--tkf-space-3);
    animation: tkf-lightbox-in var(--tkf-dur-ui) var(--tkf-ease);
}
.tkf-lightbox::backdrop {
    background: transparent;
}
@keyframes tkf-lightbox-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .tkf-lightbox[open] {
        animation: none;
    }
}
html:has(.tkf-lightbox[open]),
html:has(.tkf-announcement[open]) {
    overflow: hidden;
    scrollbar-gutter: stable;
}
.tkf-lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tkf-lightbox__count {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.tkf-lightbox__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--tkf-space-2);
    min-height: 0;
    margin: 0;
    touch-action: pan-y;
}
.tkf-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    object-fit: contain;
    border-radius: var(--tkf-radius-md);
    user-select: none;
}
.tkf-lightbox__caption {
    color: var(--tkf-ink-2);
    font-size: 14px;
    text-align: center;
}
.tkf-lightbox__btn {
    border: 1px solid var(--tkf-line);
}
.tkf-lightbox__btn:focus-visible,
.tkf-lightbox__thumb:focus-visible {
    outline: none;
    box-shadow: var(--tkf-focus-ring);
}
.tkf-lightbox__nav {
    position: fixed;
    background: var(--tkf-lightbox-bg);
    top: 50%;
    transform: translateY(-50%);
}
.tkf-lightbox__nav--prev {
    left: var(--tkf-space-4);
}
.tkf-lightbox__nav--next {
    right: var(--tkf-space-4);
}
.tkf-lightbox__thumbs {
    display: flex;
    gap: var(--tkf-space-2);
    justify-content: safe center;
    overflow-x: auto;
}
.tkf-lightbox__thumb {
    flex: none;
    width: 56px;
    height: 56px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--tkf-radius-sm);
    background: none;
    opacity: 0.6;
    cursor: pointer;
}
.tkf-lightbox__thumb[aria-current="true"] {
    border-color: var(--tkf-accent);
    opacity: 1;
}
.tkf-lightbox__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 767px) {
    .tkf-lightbox__nav {
        display: none; /* swipe on phones */
    }
}

/* pagination */
.tkf-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tkf-space-2);
    margin: var(--tkf-space-7) 0 0;
    padding: 0;
    list-style: none;
}
.tkf-pagination__page,
.tkf-pagination__edge,
.tkf-pagination__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    border-radius: var(--tkf-radius-pill);
    font-weight: 600;
}
.tkf-pagination a {
    border: 1px solid var(--tkf-line);
    background: var(--tkf-surface);
}
.tkf-pagination a:hover {
    border-color: var(--tkf-accent);
}
.tkf-pagination [aria-current="page"] {
    background: var(--tkf-ink);
    color: var(--tkf-surface);
}
.tkf-pagination [aria-disabled="true"] {
    color: var(--tkf-disabled);
}
/* Phones keep one row: prev/next, first and last page, and the current page
   with its neighbours. Slightly smaller targets so seven items fit 320px. */
@media (max-width: 767px) {
    .tkf-pagination ul {
        gap: var(--tkf-space-1);
    }
    .tkf-pagination__page,
    .tkf-pagination__edge {
        min-width: 40px;
        height: 40px;
    }
    .tkf-pagination li:has(.tkf-pagination__page, .tkf-pagination__gap) {
        display: none;
    }
    .tkf-pagination li:nth-child(2):has(.tkf-pagination__page),
    .tkf-pagination li:nth-last-child(2):has(.tkf-pagination__page),
    .tkf-pagination li:has([aria-current="page"]),
    .tkf-pagination li:has([aria-current="page"]) + li:has(.tkf-pagination__page),
    .tkf-pagination li:has(+ li [aria-current="page"]):has(.tkf-pagination__page) {
        display: list-item;
    }
}

/* sponsors */
.tkf-sponsors {
    padding: var(--tkf-space-7) 0 var(--tkf-space-8);
}
.tkf-sponsors__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--tkf-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.tkf-sponsors__item {
    background: var(--tkf-logo-plate);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 116px;
    padding: var(--tkf-space-5) var(--tkf-space-6) !important;
}
.tkf-sponsors__item img {
    max-height: 64px;
    width: auto;
    object-fit: contain;
}
@media (max-width: 767px) {
    .tkf-sponsors__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* timeline */
.tkf-timeline {
    container: tkf-timeline / inline-size;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tkf-timeline__item {
    --tkf-timeline-axis: calc(116px + var(--tkf-space-7) / 2);
    position: relative;
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: var(--tkf-space-7);
    padding-bottom: var(--tkf-space-7);
}
.tkf-timeline__item::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: -12px;
    left: var(--tkf-timeline-axis);
    width: 1px;
    background: var(--tkf-line);
}
.tkf-timeline__item::before {
    content: "";
    position: absolute;
    top: 8px;
    left: calc(var(--tkf-timeline-axis) - 4px);
    z-index: 1;
    width: 8px;
    height: 8px;
    border-radius: 1px;
    background: var(--tkf-accent);
    outline: 4px solid var(--tkf-canvas);
    transform: rotate(45deg);
}
.tkf-timeline__item:last-child {
    padding-bottom: 0;
}
.tkf-timeline__item:last-child::after {
    display: none;
}
.tkf-timeline__label {
    margin: 0 !important;
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--tkf-accent-text);
}
.tkf-timeline__item > .tkf-timeline__text,
.tkf-timeline__body {
    min-width: 0;
    padding-bottom: var(--tkf-space-6);
    border-bottom: 1px solid var(--tkf-line);
}
.tkf-timeline__item:last-child > .tkf-timeline__text,
.tkf-timeline__item:last-child > .tkf-timeline__body {
    padding-bottom: 0;
    border-bottom: 0;
}
.tkf-timeline__text {
    max-width: 70ch;
    line-height: 1.7;
    color: var(--tkf-ink-2);
}
.tkf-timeline__text p + p {
    margin-top: var(--tkf-space-4);
}
.tkf-timeline__body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--tkf-space-6);
    align-items: start;
}
.tkf-timeline__figure {
    margin: 0;
    min-width: 0;
}
@container tkf-timeline (max-width: 880px) {
    .tkf-timeline__body {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--tkf-space-4);
    }
}
@container tkf-timeline (max-width: 640px) {
    .tkf-timeline__item {
        --tkf-timeline-axis: 8px;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--tkf-space-3);
        padding-left: var(--tkf-space-6);
        padding-bottom: var(--tkf-space-6);
    }
    .tkf-timeline__item:last-child {
        padding-bottom: 0;
    }
    .tkf-timeline__item > .tkf-timeline__text,
    .tkf-timeline__body {
        padding-bottom: var(--tkf-space-5);
    }
}
.tkf-timeline__figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--tkf-radius-md);
}
.tkf-timeline__figure figcaption {
    margin-top: var(--tkf-space-2);
    font-size: var(--tkf-fs-small);
    color: var(--tkf-ink-3);
}

/* pdf embed (blog [PDF:url]) */
.tkf-pdf {
    margin: var(--tkf-space-6) 0;
}
.tkf-pdf__frame {
    display: block;
    width: 100%;
    height: 80vh;
    min-height: 480px;
    margin-bottom: var(--tkf-space-3);
    border: 1px solid var(--tkf-line);
    border-radius: var(--tkf-radius-md);
    background: var(--tkf-surface);
}
@media (max-width: 767px) {
    .tkf-pdf__frame {
        display: none;
    }
}

/* profile (başkan, genel sekreter) */
.tkf-profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--tkf-space-7);
    align-items: start;
}
.tkf-profile--solo {
    grid-template-columns: minmax(0, 1fr);
}
.tkf-profile--portrait-only {
    grid-template-columns: minmax(0, 360px);
    justify-content: center;
}
.tkf-profile--portrait-only .tkf-profile__photo {
    position: static;
    width: 100%;
    max-width: 360px;
    justify-self: center;
}
.tkf-profile__photo {
    position: sticky;
    top: calc(var(--tkf-nav-h) + var(--tkf-nav-top) + var(--tkf-space-4));
}
.tkf-profile__photo .tkf-portrait {
    aspect-ratio: 4 / 5;
}
@media (max-width: 991px) {
    .tkf-profile {
        grid-template-columns: minmax(0, 1fr);
    }
    .tkf-profile__photo {
        position: static;
        max-width: 360px;
    }
}

/* member / committee name lists */
.tkf-members {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tkf-members li {
    padding: var(--tkf-space-2) 0;
    border-bottom: 1px solid var(--tkf-line);
}
.tkf-members__role {
    color: var(--tkf-ink-3);
    font-size: var(--tkf-fs-small);
}

/* vertical stack utility */
.tkf-stack {
    display: flex;
    flex-direction: column;
    gap: var(--tkf-space-4);
    margin: var(--tkf-space-6) 0;
}

/* ============================================ page: il-temsilcilerimiz == */
.tkf-directory__search {
    max-width: 480px;
}

/* =========================================================== page: about == */
.tkf-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tkf-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.tkf-tag {
    padding: var(--tkf-space-1) var(--tkf-space-4);
    border: 1px solid var(--tkf-line);
    border-radius: var(--tkf-radius-pill);
    background: var(--tkf-surface);
    color: var(--tkf-ink-2);
    font-size: 14px;
    font-weight: 600;
}
.tkf-about__hero img,
.tkf-album__cover img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-radius: var(--tkf-radius-md);
}
.tkf-split {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
    gap: var(--tkf-space-7);
    align-items: center;
}
.tkf-split--solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
}
.tkf-split__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--tkf-radius-md);
}
@media (max-width: 767px) {
    .tkf-split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--tkf-space-5);
    }
    .tkf-about__hero img,
    .tkf-album__cover img {
        aspect-ratio: 4 / 3;
    }
}

/* =========================================================== page: sporcular == */
.tkf-athletes > [id^="athlete-"] {
    scroll-margin-top: 130px; /* search deep links land below the sticky nav */
}

/* =========================================================== page: portfolios == */
.tkf-albums .tkf-card__media {
    aspect-ratio: 4 / 3;
}
.tkf-article > .tkf-btn {
    margin-top: var(--tkf-space-5);
}
.tkf-pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tkf-space-4);
}
.tkf-pager__link {
    display: flex;
    flex-direction: column;
    gap: var(--tkf-space-1);
    padding: var(--tkf-space-4) var(--tkf-space-5);
    border-radius: var(--tkf-radius-md);
    color: var(--tkf-ink);
    text-decoration: none;
}
.tkf-pager__link--next {
    grid-column: 2;
    text-align: right;
}
.tkf-pager__link:focus-visible {
    outline: none;
    box-shadow: var(--tkf-focus-ring);
}
.tkf-pager__dir {
    color: var(--tkf-ink-3);
    font-size: 14px;
}
.tkf-pager__title {
    font-weight: 600;
}
@media (max-width: 767px) {
    .tkf-pager {
        grid-template-columns: minmax(0, 1fr);
    }
    .tkf-pager__link--next {
        grid-column: auto;
    }
}

/* =========================================================== page: blog == */
.tkf-page-head--article .tkf-page-head__title {
    font-size: clamp(26px, 2.8vw + 15px, 48px);
    /* Article titles run to five lines: heading weight keeps them open. */
    font-weight: var(--tkf-wght-heading);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.tkf-blog-results {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tkf-space-4);
    margin-bottom: var(--tkf-space-4);
}
.tkf-blog-results .tkf-filter__count {
    margin: 0;
}
.tkf-blog-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--tkf-space-4);
    margin-bottom: var(--tkf-space-6);
}
.tkf-blog-filters__search {
    display: flex;
    align-items: flex-end;
    gap: var(--tkf-space-3);
    flex: 1 1 320px;
    max-width: 480px;
}
.tkf-blog-filters__search .tkf-field {
    flex: 1;
    margin: 0;
}
.tkf-article {
    max-width: 760px;
    margin: 0 auto;
}
.tkf-article__hero {
    margin: 0 0 var(--tkf-space-6);
}
.tkf-article--documents .tkf-prose a {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    padding: var(--tkf-space-2) var(--tkf-space-4);
    border: 1px solid var(--tkf-line);
    border-radius: var(--tkf-radius-md);
    background: var(--tkf-surface);
    line-height: 1.4;
}
.tkf-article--documents .tkf-article__hero {
    max-width: 320px;
    margin: var(--tkf-space-6) auto 0;
}
.tkf-article__hero img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--tkf-radius-lg);
}

/* ========================================================= page: search == */
.tkf-search-form {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--tkf-space-4);
    padding: var(--tkf-space-5) !important;
    margin-bottom: var(--tkf-space-6);
}
.tkf-search-form .tkf-field {
    margin: 0;
}
.tkf-search-results__title {
    margin-bottom: var(--tkf-space-4) !important;
}
@media (max-width: 767px) {
    .tkf-search-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ======================================================== page: contact == */
.tkf-map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
    border-radius: var(--tkf-radius-lg);
}

/* ======================================================= page: tesisler == */
/* Video credit: its own line under the hero buttons. */
.tkf-tesisler__credit {
    flex-basis: 100%;
    margin: 0 !important;
    font-size: var(--tkf-fs-small);
    color: var(--tkf-ink-2);
}
.tkf-tesisler__subheading {
    margin: var(--tkf-space-7) 0 var(--tkf-space-4) !important;
    font-size: 22px;
}
.tkf-tesisler__figures {
    margin-top: var(--tkf-space-5);
}
.tkf-diagram {
    margin: 0;
}
.tkf-diagram img {
    display: block;
    width: 100%;
    height: auto;
    padding: var(--tkf-space-4);
    background: var(--tkf-surface);
    border: 1px solid var(--tkf-line);
    border-radius: var(--tkf-radius-md);
}
.tkf-diagram figcaption {
    margin-top: var(--tkf-space-2);
    font-size: var(--tkf-fs-small);
    color: var(--tkf-ink-3);
}
.tkf-tesisler__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--tkf-space-6);
    align-items: center;
}
.tkf-tesisler__figure-text {
    margin-top: var(--tkf-space-3) !important;
    color: var(--tkf-ink-2);
}
.tkf-tesisler__examples {
    margin: var(--tkf-space-7) 0;
}
.tkf-tesisler__ref {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
}
.tkf-tesisler__ref-body {
    padding: var(--tkf-space-5);
}
.tkf-tesisler__ref-body h3 {
    margin-bottom: var(--tkf-space-2) !important;
    font-size: 20px;
}
.tkf-tesisler__ref-credit {
    margin-top: var(--tkf-space-3) !important;
    font-size: var(--tkf-fs-small);
    color: var(--tkf-ink-3);
}
.tkf-tesisler__ref-credit a {
    color: var(--tkf-accent-text);
}
.tkf-steps {
    counter-reset: tkf-step;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tkf-space-5);
    margin: var(--tkf-space-6) 0 !important;
    padding: 0;
    list-style: none;
}
.tkf-steps li {
    counter-increment: tkf-step;
}
.tkf-steps li::before {
    content: counter(tkf-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: var(--tkf-space-3);
    border-radius: 50%;
    background: var(--tkf-accent);
    color: var(--tkf-on-accent);
    font-weight: 700;
}
.tkf-steps h3 {
    margin-bottom: var(--tkf-space-2) !important;
    font-size: 20px;
}
.tkf-steps p {
    color: var(--tkf-ink-2);
}
.tkf-tesisler__list {
    margin: 0;
    padding-left: 1.2em;
    color: var(--tkf-ink-2);
}
.tkf-tesisler__defs {
    margin: 0;
}
.tkf-tesisler__defs dt {
    font-weight: 700;
    color: var(--tkf-ink);
}
.tkf-tesisler__defs dd {
    margin: 0 0 var(--tkf-space-3);
    color: var(--tkf-ink-2);
}
.tkf-tesisler__sources {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tkf-tesisler__sources li {
    padding: var(--tkf-space-2) 0;
    border-bottom: 1px solid var(--tkf-line);
}
.tkf-tesisler__sources a {
    color: var(--tkf-accent-text);
}
@media (max-width: 767px) {
    .tkf-tesisler__split,
    .tkf-steps {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ================================================= page: design-system == */
.tkf-ds-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tkf-space-3);
    margin: var(--tkf-space-6) 0 !important;
}

/* =========================================================== page: home == */
.tkf-hero {
    padding: calc(var(--tkf-nav-h) + var(--tkf-nav-top) + var(--tkf-space-5)) 0 var(--tkf-space-8);
}
.tkf-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: var(--tkf-space-5);
    align-items: stretch;
}
.tkf-hero__grid--solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
}
.tkf-slider {
    position: relative;
    min-height: 420px;
    touch-action: pan-y;
    overflow: hidden;
    border-radius: var(--tkf-radius-lg);
    background: var(--tkf-surface);
}
.tkf-slider__slide {
    position: absolute;
    inset: 0;
}
.tkf-slider__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
}
.tkf-slider__caption {
    position: absolute;
    left: var(--tkf-space-5);
    bottom: var(--tkf-space-5);
    max-width: min(560px, calc(100% - 2 * var(--tkf-space-5)));
    padding: var(--tkf-space-4) var(--tkf-space-5);
    border-radius: var(--tkf-radius-md);
}
.tkf-slider__title {
    margin: var(--tkf-space-1) 0;
    font-size: var(--tkf-fs-h3);
    line-height: 1.25;
}
.tkf-slider__title a {
    color: inherit;
    text-decoration: none;
}
.tkf-slider__title a:hover {
    text-decoration: underline;
}
/* Captions over photos and video: full ink keeps AA on the darkest frame. */
.tkf-slider__caption .tkf-kicker {
    color: var(--tkf-ink);
}
.tkf-slider__date {
    margin: 0;
    color: var(--tkf-ink);
    font-size: var(--tkf-fs-small);
}
.tkf-slider__controls {
    position: absolute;
    right: var(--tkf-space-5);
    top: var(--tkf-space-5);
    display: flex;
    align-items: center;
    gap: var(--tkf-space-2);
    padding: var(--tkf-space-1);
    border: 1px solid var(--tkf-glass-3-border);
    border-radius: var(--tkf-radius-pill);
    background: var(--tkf-glass-3-bg);
}
.tkf-slider__controls[hidden] {
    display: none;
}
.tkf-slider__dots {
    display: flex;
    gap: var(--tkf-space-1);
}
.tkf-slider__dot {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.tkf-slider__dot::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin: auto;
    border-radius: 50%;
    background: var(--tkf-ink-3);
}
.tkf-slider__dot[aria-pressed="true"]::before {
    width: 20px;
    border-radius: var(--tkf-radius-pill);
    background: var(--tkf-accent);
}
.tkf-slider__btn:focus-visible,
.tkf-slider__dot:focus-visible,
.tkf-slider__title a:focus-visible {
    outline: none;
    box-shadow: var(--tkf-focus-ring);
}
.tkf-hero__links {
    padding: var(--tkf-space-5);
    border-radius: var(--tkf-radius-lg);
}
.tkf-hero__links-title {
    margin: 0 0 var(--tkf-space-3);
    font-weight: 700;
}
.tkf-hero__links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tkf-hero__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tkf-space-3);
    padding: var(--tkf-space-3) 0;
    border-bottom: 1px solid var(--tkf-line);
    color: var(--tkf-ink);
    text-decoration: none;
}
.tkf-hero__links-end {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--tkf-space-2);
}
.tkf-hero__links-type {
    color: var(--tkf-ink-3);
    font-size: var(--tkf-fs-small);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.tkf-hero__links a:hover {
    color: var(--tkf-accent-text);
}
.tkf-leaders {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--tkf-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.tkf-leader {
    display: flex;
    align-items: center;
    gap: var(--tkf-space-4);
    padding: var(--tkf-space-4);
    border-radius: var(--tkf-radius-md);
}
.tkf-leader__photo {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}
.tkf-leader__title {
    margin: 0;
    color: var(--tkf-ink-3);
    font-size: var(--tkf-fs-small);
}
.tkf-leader__name {
    margin: 0;
    font-weight: 700;
}
/* Leaders sit right under the slider, one grid gap away, so both fit the
   first screen. */
.tkf-hero:has(+ .tkf-home-leaders) {
    padding-bottom: 0;
}
.tkf-home-leaders {
    padding-top: var(--tkf-space-5);
    padding-bottom: 0;
}
.tkf-home__more {
    margin-top: var(--tkf-space-6);
    text-align: center;
}
@media (max-width: 991px) {
    .tkf-hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 767px) {
    .tkf-slider {
        min-height: 460px;
    }
    .tkf-slider__caption {
        left: var(--tkf-space-3);
        right: var(--tkf-space-3);
        bottom: var(--tkf-space-3);
        max-width: none;
    }
    .tkf-slider__controls {
        top: var(--tkf-space-3);
        right: var(--tkf-space-3);
    }
}
.tkf-band {
    padding: var(--tkf-space-8) 0;
}
.tkf-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tkf-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.tkf-tile {
    overflow: hidden;
    border-radius: var(--tkf-radius-lg);
    background: var(--tkf-surface);
}
.tkf-tile__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tkf-tile__caption {
    width: 100%;
    padding: var(--tkf-space-4);
    border-radius: var(--tkf-radius-md);
}
.tkf-tile__title {
    margin: 0;
    font-size: var(--tkf-fs-h3);
}
.tkf-tile__link {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    height: 100%;
    min-height: 360px;
    padding: var(--tkf-space-3);
    border-radius: inherit;
    color: inherit;
    text-decoration: none;
}
/* The tile clips to its radius and its media covers the link's own box, so
   the focus ring is an overlay drawn inside the edge, above photo and
   caption (body.tkf outranks the global focus rule). */
body.tkf .tkf-tile__link:focus-visible {
    outline: none;
    box-shadow: none;
}
.tkf-tile__link:focus-visible::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: var(--tkf-focus-ring-inset);
    pointer-events: none;
}
.tkf-tile__text {
    margin: var(--tkf-space-1) 0 0;
    color: var(--tkf-ink);
    font-size: var(--tkf-fs-small);
}
@media (max-width: 991px) {
    .tkf-tiles {
        grid-template-columns: minmax(0, 1fr);
    }
    .tkf-tile__link {
        min-height: 300px;
    }
}
.tkf-support__head {
    margin-bottom: var(--tkf-space-6);
    text-align: center;
}
.tkf-home-duties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--tkf-space-6) var(--tkf-space-5);
    margin: 0 0 var(--tkf-space-8);
    padding: 0;
    list-style: none;
}
.tkf-home-duties__item {
    padding-top: var(--tkf-space-4);
    border-top: 2px solid var(--tkf-accent);
}
.tkf-home-duties__title {
    margin: 0 0 var(--tkf-space-2);
    font-size: 18px;
}
.tkf-home-duties__text {
    color: var(--tkf-ink-2);
}
.tkf-iban {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--tkf-space-5);
    border-radius: var(--tkf-radius-lg);
    text-align: center;
}
.tkf-iban__purpose {
    margin: 0 0 var(--tkf-space-2);
    color: var(--tkf-ink);
    font-weight: 600;
}
.tkf-iban__bank {
    margin: 0;
    color: var(--tkf-ink-2);
}
.tkf-iban__code {
    margin: var(--tkf-space-3) 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(16px, 2.2vw, 22px);
    font-weight: 700;
    overflow-wrap: anywhere;
}
.tkf-iban__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tkf-space-3);
}
.tkf-iban__status {
    min-height: 1.4em;
    margin: var(--tkf-space-2) 0 0;
    color: var(--tkf-success);
    font-weight: 600;
}
.tkf-promo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--tkf-space-7);
    align-items: center;
    padding: var(--tkf-space-7);
    border-radius: var(--tkf-radius-lg);
}
.tkf-promo__phone {
    width: 150px;
    aspect-ratio: 9 / 19;
    padding: 8px;
    border-radius: 32px;
    background: var(--tkf-ink);
}
.tkf-promo__screen {
    display: block;
    height: 100%;
    border-radius: 24px;
    background: linear-gradient(170deg, var(--tkf-accent) 0%, var(--tkf-sky-sun) 45%, var(--tkf-sky-earth) 100%);
}
.tkf-promo__text {
    color: var(--tkf-ink-2);
}
.tkf-promo__actions {
    margin: var(--tkf-space-4) 0;
}
.tkf-promo__apps {
    margin: var(--tkf-space-4) 0 var(--tkf-space-2);
    font-weight: 600;
}
.tkf-promo__stores {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tkf-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.tkf-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--tkf-space-5);
    margin: var(--tkf-space-7) 0 0;
    text-align: center;
}
.tkf-stats__item {
    display: flex;
    flex-direction: column-reverse;
}
.tkf-stats__value {
    margin: 0;
    font-size: var(--tkf-fs-display);
    font-stretch: var(--tkf-wdth-display);
    font-weight: var(--tkf-wght-display);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.tkf-stats__label {
    margin-top: var(--tkf-space-2);
    color: var(--tkf-ink-2);
}
@media (max-width: 767px) {
    .tkf-promo {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--tkf-space-5);
        padding: var(--tkf-space-5);
        justify-items: center;
        text-align: center;
    }
    .tkf-promo__phone {
        width: 110px;
    }
    .tkf-promo__stores {
        justify-content: center;
    }
}
/* Announcement popup: liquid glass over a light, blurred veil of the page, so
   the sky keeps its colour and the card reads as the site's own material.
   The image sets the card's width; the text never widens it. */
.tkf-announcement {
    width: fit-content;
    min-width: min(340px, calc(100vw - 2 * var(--tkf-space-4)));
    max-width: min(560px, calc(100vw - 2 * var(--tkf-space-4)));
    max-height: calc(100dvh - 2 * var(--tkf-space-4));
    padding: var(--tkf-bezel);
    overflow: hidden;
    border: 1px solid var(--tkf-glass-2-border);
    border-radius: var(--tkf-radius-lg);
    background: var(--tkf-glass-card-bg);
    -webkit-backdrop-filter: blur(var(--tkf-glass-2-blur)) saturate(180%);
    backdrop-filter: blur(var(--tkf-glass-2-blur)) saturate(180%);
    box-shadow: var(--tkf-glass-2-shadow-lift);
    color: var(--tkf-ink);
    text-align: center;
}
.tkf-announcement:not(:has(.tkf-announcement__image)) {
    width: min(480px, calc(100vw - 2 * var(--tkf-space-4)));
}
.tkf-announcement[open] {
    display: flex;
    flex-direction: column;
    animation: tkf-announcement-in var(--tkf-dur-glass) var(--tkf-ease);
}
/* The card takes focus on open as a container, not a control: no ring. */
body.tkf .tkf-announcement:focus-visible {
    box-shadow: var(--tkf-glass-2-shadow-lift);
}
.tkf-announcement::backdrop {
    background: var(--tkf-dialog-scrim);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}
.tkf-announcement[open]::backdrop {
    animation: tkf-announcement-veil var(--tkf-dur-glass) var(--tkf-ease);
}
@keyframes tkf-announcement-in {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to { opacity: 1; transform: none; }
}
@keyframes tkf-announcement-veil {
    from { opacity: 0; -webkit-backdrop-filter: blur(0) saturate(100%); backdrop-filter: blur(0) saturate(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .tkf-announcement[open],
    .tkf-announcement[open]::backdrop {
        animation: none;
    }
}
/* Without real blur the glass turns muddy: the card falls back to solid with the
   other glass (glass fallbacks above); its veil turns dark here. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tkf-announcement::backdrop {
        background: var(--tkf-lightbox-bg);
    }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    .tkf-announcement::backdrop {
        background: var(--tkf-lightbox-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
.tkf-announcement__close {
    position: absolute;
    top: calc(var(--tkf-bezel) + var(--tkf-space-2));
    right: calc(var(--tkf-bezel) + var(--tkf-space-2));
    z-index: 1;
    /* The shared round-button reset comes after .tkf-glass--3; restore its fill and rim. */
    border: 1px solid var(--tkf-glass-3-border);
    background: var(--tkf-glass-3-bg);
}
.tkf-announcement__close:focus-visible,
.tkf-toast__close:focus-visible {
    outline: none;
    box-shadow: var(--tkf-focus-ring);
}
/* Natural ratio, inset in the glass like a photo frame: posters keep their whole artwork. */
.tkf-announcement__image {
    display: block;
    flex: none;
    align-self: center;
    max-width: 100%;
    max-height: min(56dvh, 520px);
    border-radius: calc(var(--tkf-radius-lg) - var(--tkf-bezel));
    box-shadow: var(--tkf-frame-shadow);
}
/* contain: inline-size keeps long text from widening the card past the image. */
.tkf-announcement__body {
    contain: inline-size;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--tkf-space-5) var(--tkf-space-4) var(--tkf-space-4);
}
.tkf-announcement:not(:has(.tkf-announcement__image)) .tkf-announcement__body {
    padding-top: var(--tkf-space-7);
}
.tkf-announcement__title {
    margin: var(--tkf-space-1) 0 var(--tkf-space-3);
    font-size: var(--tkf-fs-h3);
    text-wrap: balance;
}
.tkf-announcement__text {
    margin: 0;
    color: var(--tkf-ink-2);
    text-align: justify;
    text-align-last: center;
    hyphens: auto;
}
.tkf-announcement__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tkf-space-3);
    margin-top: var(--tkf-space-5);
}
@media (max-width: 575px) {
    .tkf-announcement__actions > * {
        flex: 1 1 100%;
    }
}

/* =========================================================== page: services == */
.tkf-dossier-hero {
    /* Bottom band where the canvas plate fades into the sky. */
    --tkf-hero-fade: 96px;
    /* Equal left and bottom inset that pins the caption card to the hero's corner. */
    --tkf-hero-inset: clamp(24px, 3.5vw, 56px);
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(560px, 86svh, 860px);
    overflow: hidden;
    padding: calc(var(--tkf-nav-h) + var(--tkf-nav-top) + var(--tkf-space-7)) 0 var(--tkf-hero-inset);
    color: var(--tkf-ink);
}
.tkf-dossier-hero:not(:has(.tkf-dossier-hero__media)) {
    min-height: 0;
    padding-bottom: var(--tkf-space-6);
}
.tkf-dossier-hero:not(:has(.tkf-dossier-hero__media))::before {
    content: none;
}
/* Plate under the fading photo: the photo dissolves into flat canvas, then the
   plate itself fades into the sky in the band below, so no shard tints the photo. */
.tkf-dossier-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--tkf-canvas);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--tkf-hero-fade)), transparent);
    mask-image: linear-gradient(to bottom, black calc(100% - var(--tkf-hero-fade)), transparent);
}
.tkf-dossier-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Dissolve into the page background instead of ending on a hard edge. */
    -webkit-mask-image: linear-gradient(to bottom, black 62%, transparent);
    mask-image: linear-gradient(to bottom, black 62%, transparent);
}
.tkf-discipline-photo {
    display: block;
    overflow: hidden;
}
.tkf-discipline-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
}
.tkf-discipline-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/discipline-heroes/grain.png") repeat;
    opacity: .06;
    pointer-events: none;
}
.tkf-discipline-photo--bowl img {
    object-position: 58% 45%;
}
.tkf-discipline-photo--speed img {
    object-position: 60% 62%;
}
.tkf-dossier-hero__inner {
    width: 100%;
    max-width: none;
    padding-inline: var(--tkf-hero-inset);
}
.tkf-dossier-hero__caption {
    display: grid;
    gap: var(--tkf-space-2);
    max-width: 440px;
    padding: var(--tkf-space-5) var(--tkf-space-6);
    border-radius: var(--tkf-radius-md);
}
.tkf-dossier-hero__caption .tkf-breadcrumbs {
    margin-bottom: var(--tkf-space-1);
    font-size: var(--tkf-fs-small);
}
/* The h1 below already names the current page: hide the last crumb visually
   but keep its aria-current for screen readers. */
.tkf-dossier-hero__caption .tkf-breadcrumbs li:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.tkf-dossier-hero .tkf-dossier-hero__title {
    margin: 0;
    font-size: clamp(28px, 2.6vw, 38px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.tkf-dossier-hero__lead {
    margin: 0;
    color: var(--tkf-ink-2);
    font-size: var(--tkf-fs-body);
    line-height: 1.55;
}
.tkf-dossier__others {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tkf-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.tkf-dossier__other {
    display: inline-flex;
    align-items: center;
    gap: var(--tkf-space-2);
    padding: var(--tkf-space-3) var(--tkf-space-5);
    border-radius: var(--tkf-radius-pill);
    color: var(--tkf-ink);
    font-weight: 600;
    text-decoration: none;
}
.tkf-dossier__other .tkf-icon {
    width: 1.1em;
    height: 1.1em;
}
.tkf-dossier__section {
    padding-block: var(--tkf-space-7);
}
.tkf-dossier__section .tkf-section__head {
    margin-bottom: var(--tkf-space-6);
}
.tkf-dossier__section .tkf-article,
.tkf-dossier__section .tkf-list {
    max-width: 68ch;
    margin-inline: auto;
}
.tkf-dossier__closing {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--tkf-space-7);
    text-align: center;
}
.tkf-dossier__closing .tkf-section__title {
    margin-bottom: var(--tkf-space-5);
}
.tkf-dossier__section .tkf-prose {
    text-align: justify;
    text-align-last: center;
    hyphens: auto;
}
.tkf-dossier__section .tkf-prose :is(h2, h3, h4) {
    text-align: center;
    text-wrap: balance;
    hyphens: manual;
}
/* A few athletes sit centred instead of leaving empty grid columns. */
.tkf-dossier__athletes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.tkf-dossier__athletes > * {
    flex: 0 1 calc((100% - 3 * var(--tkf-space-5)) / 4);
}
.tkf-dossier__other:focus-visible {
    outline: none;
    box-shadow: var(--tkf-focus-ring);
}
@media (max-width: 767px) {
    .tkf-dossier-hero {
        display: block;
        min-height: 0;
        /* The photo is in flow here; clipping would cut the card's shadow. */
        overflow: visible;
        padding: 0 0 var(--tkf-space-5);
        --tkf-hero-inset: var(--tkf-gutter);
    }
    .tkf-dossier-hero__media {
        position: relative;
        z-index: -1;
        height: auto;
        aspect-ratio: 4 / 5;
        -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent);
        mask-image: linear-gradient(to bottom, black 55%, transparent);
    }
    .tkf-dossier-hero::before {
        bottom: auto;
        height: calc(125vw + var(--tkf-hero-fade));
    }
    .tkf-dossier-hero:not(:has(.tkf-dossier-hero__media)) {
        padding-top: calc(var(--tkf-nav-h) + var(--tkf-nav-top) + var(--tkf-space-5));
    }
    .tkf-dossier-hero__media + .tkf-dossier-hero__inner {
        margin-top: calc(-1 * var(--tkf-space-7));
    }
    .tkf-dossier-hero__caption {
        padding: var(--tkf-space-4) var(--tkf-space-5) var(--tkf-space-5);
    }
    .tkf-dossier-hero .tkf-discipline-photo img {
        object-position: center;
    }
    .tkf-dossier__athletes > * {
        flex-basis: calc((100% - var(--tkf-space-5)) / 2);
    }
}
@media (max-width: 991px) {
    .tkf-dossier__closing {
        grid-auto-flow: row;
    }
}

/* =========================================================== toasts == */
.tkf-toasts {
    position: fixed;
    top: calc(var(--tkf-space-8) + var(--tkf-space-4));
    right: var(--tkf-space-4);
    z-index: var(--tkf-z-toast);
    display: grid;
    gap: var(--tkf-space-2);
    width: min(380px, calc(100vw - 2 * var(--tkf-space-4)));
    pointer-events: none;
}
.tkf-toast {
    --tkf-toast-tone: var(--tkf-info);
    display: flex;
    align-items: flex-start;
    gap: var(--tkf-space-3);
    padding: var(--tkf-space-3) var(--tkf-space-3) var(--tkf-space-3) var(--tkf-space-4);
    border: 1px solid var(--tkf-toast-tone);
    border-left-width: 4px;
    border-radius: var(--tkf-radius-md);
    box-shadow: var(--tkf-glass-2-shadow);
    color: var(--tkf-ink);
    font-weight: 500;
    pointer-events: auto;
    animation: tkf-toast-in var(--tkf-dur-ui) var(--tkf-ease);
}
/* Type icon drawn by a mask in the tone colour: one source for server and script toasts. */
.tkf-toast::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 6px;
    background: var(--tkf-toast-tone);
    -webkit-mask: var(--tkf-toast-icon) center / contain no-repeat;
    mask: var(--tkf-toast-icon) center / contain no-repeat;
}
.tkf-toast--success {
    --tkf-toast-tone: var(--tkf-success);
    --tkf-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m7.5 12.5 3 3 6-6.5'/%3E%3C/svg%3E");
    background: var(--tkf-success-bg);
}
.tkf-toast--error {
    --tkf-toast-tone: var(--tkf-error);
    --tkf-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E");
    background: var(--tkf-error-bg);
}
.tkf-toast--warning {
    --tkf-toast-tone: var(--tkf-warning);
    --tkf-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
    background: var(--tkf-warning-bg);
}
.tkf-toast--info {
    --tkf-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
    background: var(--tkf-info-bg);
}
.tkf-toast__text {
    flex: 1;
    margin: 0;
    padding-top: 4px;
}
.tkf-toast__close {
    flex: none;
    width: 32px;
    height: 32px;
    color: var(--tkf-ink-2);
}
@keyframes tkf-toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tkf-toast { animation: none; }
}