/*
    The EventStage design system.

    Bootstrap 5.3 stays underneath — the grid, the dropdown, the utility classes — but every
    surface a person actually looks at is redefined here. Colour, radius and shadow live in one
    place, the token block below: somebody changing a shade edits that block rather than forty
    files.

    Two typefaces, self-hosted (design.md DD-6 as amended on 6 October 2026, the redesign): Onest
    for everything a person reads, Unbounded for the headings above it. Both are SIL OFL 1.1
    (wwwroot/fonts/*-OFL.txt) and are served same-origin, so the content security policy needs no
    change (§23) and no page asks a font CDN for anything.
*/

/* ---------------------------------------------------------------------- font */

/*
    Each family is two variable files (wght axis), split the way Fontsource ships them: "latin"
    carries ç ö ü and the dotless ı, "latin-ext" carries İ ş ğ. The unicode-range lets a browser
    fetch the second file only for a page that needs it — which in Turkish is nearly every page,
    so the layouts preload the files most pages draw first (_FontPreloads.cshtml).
*/
@font-face {
    font-family: "Onest";
    src: url("../fonts/onest-latin-wght-normal.woff2") format("woff2-variations"),
        url("../fonts/onest-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Onest";
    src: url("../fonts/onest-latin-ext-wght-normal.woff2") format("woff2-variations"),
        url("../fonts/onest-latin-ext-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Unbounded";
    src: url("../fonts/unbounded-latin-wght-normal.woff2") format("woff2-variations"),
        url("../fonts/unbounded-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Unbounded";
    src: url("../fonts/unbounded-latin-ext-wght-normal.woff2") format("woff2-variations"),
        url("../fonts/unbounded-latin-ext-wght-normal.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------- tokens */

:root {
    /* Type (DD-6): Onest for body text, Unbounded for headings, both self-hosted above. The rest
       of each stack is what a browser draws during the swap or if a file ever fails to load.
       --es-font is the body stack under its old name, kept so nothing that names it changes. */
    --es-font-body: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
    --es-font-display: "Unbounded", "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
    --es-font: var(--es-font-body);

    /*
        Colour comes in two themes (design.md DD-5 as amended by the October 2026 redesign, plan
        Ek A): the light values are B's, the dark ones C "Gece" with its corrections. Every colour
        token is declared twice in this file — plain, with the light value, here; and as
        light-dark(<light>, <dark>) in the @supports block after this rule. A browser without
        light-dark() (before Chrome 123, Safari 17.5, Firefox 120) drops the second block whole
        and keeps a coherent light page instead of a page of unresolved colours. The dark values
        exist only in that block, once: the theme is chosen by color-scheme (below), never by a
        second copy of the palette under a media query.

        light-dark() inside an unregistered custom property stays unresolved until a real
        property uses it, and then resolves against *that* element's color-scheme. That is what
        lets one subtree pin itself dark in both themes (.es-dark, below) without a palette of
        its own.
    */

    /* Brand — "Kor" (design.md DD-16/§4): ember on warm ink. One hue at two lightnesses per
       theme: #c2410c is the fill under white text and the accent on light paper, #ff6b35 the
       fill under dark text and the accent on ink — #ff6b35 is never text on a light surface
       (2.84:1, plan Ek A). */
    --es-brand: #c2410c;
    --es-brand-strong: #9a3412;
    --es-brand-deep: #7c2d12;
    --es-brand-soft: #fff0e8;
    --es-brand-border: #ffd6c2;

    /* Text on a --es-brand fill: white on the light ember, warm black on the bright one. */
    --es-brand-ink: #ffffff;

    /* Ink — warm, never a blue-grey neutral */
    --es-ink: #120d0b;
    --es-body: #2f2724;
    --es-muted: #6b5f59;
    --es-faint: #776b65;

    /* Surfaces. --es-fill is a quiet tint (a chip, a hover, a well); --es-fill-2 one step
       further, for a chip that sits on --es-fill or a table head. */
    --es-page: #ffffff;
    --es-surface: #ffffff;
    --es-raised: #fbf8f6;
    --es-fill: #f6f2ef;
    --es-fill-2: #ede7e2;
    --es-line: #efe9e4;
    --es-line-strong: #e0d7d1;

    /* The edge of something you can operate — a field, an outline button, a checkbox. 3:1 against
       the surface it sits on (design.md §4.5), which --es-line, a divider, deliberately is not. */
    --es-edge: #968a82;

    /* A translucent wash for a hover or a selected row that must work over any surface. */
    --es-wash: rgba(18, 13, 11, .05);
    --es-wash-strong: rgba(18, 13, 11, .08);

    /* The sticky header and topbar: the page shows through, blurred. */
    --es-glass: rgba(255, 255, 255, .78);

    /* The work shells (plan job 3.5): B's warm-grey ground under the portal and the admin area,
       so that the white side menu card and the white content cards float on it; on ink, the
       page. The side menu is white on paper and C's deeper ink (#0a0807) in the dark theme. The
       event tabs' chosen pill is filled with ink on paper and lifts to the raised tint on ink,
       where a cream pill would be the loudest thing on the page. */
    --es-app-ground: #f6f2ef;
    --es-side-bg: #ffffff;
    --es-tab-on: #120d0b;
    --es-tab-on-ink: #ffffff;
    --es-tab-on-edge: transparent;

    /* The focus halo around a field (design.md §4.5): visible on both grounds, never the only
       focus signal. */
    --es-ring: rgba(194, 65, 12, .16);
    --es-bad-ring: rgba(220, 38, 38, .15);

    /* The coloured shadow under a filled ember control. */
    --es-brand-shadow: rgba(194, 65, 12, .3);

    /*
        The glow edge (plan job 2.3, Ek A). On ink a card at #151110 on a #0d0a09 page measured
        1.05:1 — panels simply vanished (the admin code screen, "Erişim yok", /start). So in the
        dark theme the OUTER edge of a card, a table, a stat tile and a menu is the ember at 24%
        (55% on hover), with an ember glow under it and a hairline of light along the top. Only
        the outer edge: a divider inside a card stays --es-line, or the page turns into a grid
        of orange lines. In the light theme the same tokens are the neutral line and a soft warm
        shadow, so a light page looks as it did.
    */
    --es-glow-line: #efe9e4;
    --es-glow-line-hover: #ffd6c2;
    --es-glow-color: rgba(18, 13, 11, .10);
    --es-highlight: transparent;

    /* The faint ember under the scrolled top bar (plan Ek B, job 3.1): nothing on paper, a glow
       on ink, where the bar would otherwise merge with the page it floats over. */
    --es-header-glow: transparent;

    /* The three shadows the glow edge is drawn with: a card at rest, a card under the pointer,
       and a menu or suggestion list that floats over the page. */
    --es-card-shadow: inset 0 1px 0 var(--es-highlight), 0 1px 2px rgba(18, 13, 11, .04),
        0 10px 30px -12px rgba(18, 13, 11, .10);
    --es-card-shadow-hover: inset 0 1px 0 var(--es-highlight), 0 2px 4px rgba(18, 13, 11, .04),
        0 24px 48px -18px rgba(18, 13, 11, .18);
    --es-menu-shadow: inset 0 1px 0 var(--es-highlight), 0 12px 32px rgba(26, 19, 16, .11),
        0 0 28px -8px var(--es-glow-color);

    /*
        The error and warning box (plan job 2.3): a 16-18% field of the status hue, a 40% edge, a
        solid stripe down the left and the icon, with the text at 600. A filled box rather than
        red words, because red words alone were what read as "nothing happened" on ink. The text
        is a deeper (light) or paler (dark) step of the hue than --es-bad/--es-warn, so it still
        clears 4.5:1 on its own tinted field (design.md §4.5).
    */
    --es-bad-box: rgba(185, 28, 28, .16);
    --es-bad-box-line: rgba(185, 28, 28, .40);
    --es-bad-box-text: #991b1b;
    --es-warn-box: rgba(180, 83, 9, .16);
    --es-warn-box-line: rgba(180, 83, 9, .40);
    --es-warn-box-text: #92400e;

    /* The "warning" glyph of _Icon.cshtml as a mask, for a box whose markup has no icon. */
    --es-warning-glyph: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/%3e%3cpath d='M12 9v4M12 17h.01'/%3e%3c/svg%3e");
    /* The "x" of an error, for the form's error summary, whose markup the validation tag helper
       writes (plan job 4.2). */
    --es-error-glyph: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M17 7 7 17M7 7l10 10'/%3e%3c/svg%3e");

    /* Status colours: each one a text tone, a fill and a border that go together. Used by
       .alert-* and the two filled-banner exceptions (design.md §4.6); .pill draws a neutral
       chip with a dot in these same hues rather than the fill below. */
    --es-ok: #047857;
    --es-ok-soft: #ecfdf5;
    --es-ok-border: #a7f3d0;
    --es-ok-strong: #065f46;
    --es-ok-ink: #ffffff;
    --es-warn: #b45309;
    --es-warn-soft: #fffbeb;
    --es-warn-border: #fde68a;
    /* Text on a solid --es-warn / --es-info fill: the page message and toast badges (job 4.2). */
    --es-warn-ink: #ffffff;
    --es-bad: #b91c1c;
    --es-bad-soft: #fef2f2;
    --es-bad-border: #fecaca;
    /* Text on a solid --es-bad fill: the confirmation dialog's destructive button (job 4.1). */
    --es-bad-ink: #ffffff;
    --es-info: #0369a1;
    --es-info-soft: #f0f9ff;
    --es-info-border: #bae6fd;
    --es-info-ink: #ffffff;

    /* The status dot colours a .pill draws on top of its neutral chip (design.md §4.6, DD-16) */
    --es-dot-ok: #15803d;
    --es-dot-warn: #b45309;
    --es-dot-bad: #dc2626;
    --es-dot-info: #0369a1;

    /* The chart parts (plan job 4.7): the soft ember of a bar that is not the highlighted one, a
       neutral series, a muted one ("other", "withdrawn") and the track behind a meter or a ring.
       The soft and the muted step up on ink, where a 12% tint would vanish into the card. */
    --es-chart-soft: #fcc3a3;
    --es-chart-ink: #4a3f3a;
    --es-chart-muted: #cdbfb6;
    --es-chart-track: #ede7e2;

    /* The alarm text — the account page's danger zone title (DD-16 keeps red for what cannot be
       undone): a deeper red on paper, a pale one on ink. */
    --es-shell-alarm-text: #991b1b;

    /* The site footer (plan Ek B, job 3.4). Light: a panel on the page with the name in pale
       grey and a flat ember call. Dark: deeper than the page (#070605), an ember hairline and
       glow at its top, an ember gradient under the call and the giant name drawn in outline
       (-mark-rest) that fills with ember (-mark) as it scrolls in. In light -mark-rest equals
       -mark, so the same animation changes nothing there. */
    --es-foot-bg: #f6f2ef;
    --es-foot-edge: transparent;
    --es-foot-glow: transparent;
    --es-foot-mark: #e6ddd6;
    --es-foot-mark-rest: #e6ddd6;
    --es-foot-mark-stroke: transparent;
    --es-cta-from: #c2410c;
    --es-cta-to: #c2410c;
    --es-cta-shine: transparent;
    --es-cta-glow: rgba(194, 65, 12, .28);

    /* Theme-independent. --es-paper is white in both themes: the tile behind a logo (most are
       drawn for light paper, design.md §4.8) and a QR code's quiet zone. The photo tokens are for
       what sits on a cover photograph or a camera picture, which is dark whatever the theme
       (§4.4); --es-backdrop dims the page behind a dialog. */
    --es-paper: #ffffff;
    /* What is printed on that paper — a drawn QR code, a badge's or a poster's lines (the
       organizer page's mock-ups, plan job 5.11): ink in both themes, as print is. */
    --es-paper-ink: #120d0b;
    /* The quiet lines of a printed sheet (a poster's speakers and hours) and its hairline rule,
       as SessionPosterPdf prints them — paper, so the same in both themes (plan job 8.5). */
    --es-paper-muted: #6b5f59;
    --es-paper-line: #e7e0da;
    /* The poster's "Gece" band, the PDF's own night, its text and the ember of the organization
       line (PdfKit.Night / OnNight / Ember, plan job 10.4): print, so the same in both themes. */
    --es-print-night: #0d0a09;
    --es-print-on-night: #f7f1ec;
    --es-print-ember: #ff6b35;
    --es-print-brand: #c2410c;
    --es-on-photo: #ffffff;
    --es-photo-chip: rgba(18, 15, 14, .72);
    --es-photo-shadow: rgba(0, 0, 0, .4);
    --es-photo-dim: rgba(0, 0, 0, .35);
    --es-backdrop: rgba(18, 15, 14, .72);
    /* The scrim words sit on over a cover (plan job 5.1: the live cards and the category tiles,
       site-Home-C): near-black from the side the text is on, fading towards the picture. */
    --es-photo-scrim: rgba(13, 10, 9, .92);
    --es-photo-scrim-soft: rgba(13, 10, 9, .18);
    /* A hairline or a track on that scrim: a progress bar's empty part, a round arrow's edge. */
    --es-on-photo-line: rgba(255, 255, 255, .22);

    /* The error page's stage (plan job 5.10, B-22): the ember's beams, the glow behind the
       number and the arc — dark in both themes, so theme-independent like a cover. */
    --es-stage-beam: rgba(255, 107, 53, .42);
    --es-stage-glow: rgba(255, 107, 53, .3);
    --es-stage-arc: rgba(255, 107, 53, .35);

    /* The category pictures' palette (plan job 4.15, B-2, B-33): the kit's abstract covers'
       ember, ink and cream, theme-independent like any cover — each picture brings its own ground,
       so it reads on paper and on ink alike. The seven tones (.cat-art--t0…6) are built from
       these and nothing else. */
    --es-cat-ink: #1a1310;
    --es-cat-smoke: #2a221f;
    --es-cat-coal: #7c2d12;
    --es-cat-ember: #c2410c;
    --es-cat-flame: #ff6b35;
    --es-cat-glow: #ff8a5c;
    --es-cat-peach: #ffd6c2;
    --es-cat-blush: #ffe4d6;
    --es-cat-cream: #f8e0d2;
    --es-cat-sand: #e8e1da;
    --es-cat-paper: #f3eee9;

    /* The phone frame (plan job 4.5): the device is near-black in both themes, as a phone is. On
       paper its shadow sets it apart; on ink it would sink into the ground, so the dark side gives
       it DD-24's ember edge and a faint glow instead (second values below). */
    --es-device: #0b0908;
    --es-device-edge: transparent;
    --es-device-glow: rgba(18, 13, 11, .18);
    --es-preview-glow: rgba(194, 65, 12, .07);
    --es-device-screen-edge: transparent;

    /* The door's viewfinder (plan job 8.15), hardware drawn on a portal page and dark in both
       themes as the real one is: its glass buttons and the ember scan line. */
    --es-door-cam-glow: #5a4a42;
    --es-door-cam: #120d0b;
    --es-door-glass: rgba(255, 255, 255, .18);
    --es-door-glass-hover: rgba(255, 255, 255, .28);
    --es-door-beam: #ff6b35;

    /* The announcement preview's two foreign screens (plan job 8.12), theme-independent like a
       cover: a phone's lock screen (B's ember wallpaper, a frosted notification on it) and the
       mail as EmailTemplates paints it (plan job 10.1) — light page and card, a solid night band
       with the kor glow picture, an ember kicker — whatever the portal's theme. The same literals
       as EmailTemplates' palette; the mail's ink, muted text and rules are --es-paper-*. */
    --es-lock-from: #ff8250;
    --es-lock-mid: #c2410c;
    --es-lock-to: #5a2a16;
    --es-lock-card: rgba(255, 255, 255, .88);
    --es-lock-card-muted: #4a3f3a;
    --es-mail-page: #f6f2ef;
    --es-mail-body: #2f2724;
    --es-mail-box: #f6f2ef;
    --es-mail-band: #1a1310;
    --es-mail-band-ink: #f7f1ec;
    --es-mail-band-muted: #a3968e;
    --es-mail-band-line: #3a2e2a;
    --es-mail-ember: #ff6b35;
    --es-mail-ember-ink: #170b06;
    --es-mail-brand: #c2410c;

    /* The drawn map behind an event's venue (plan job 4.10, popups-MapMenu-B/C): land, the main
       roads, the side streets' grid and a patch of water. Decoration only — no map is embedded
       (§23) — in B's warm greys on paper and C's near-black streets on ink. */
    --es-map-land: #ede7e2;
    --es-map-road: #ffffff;
    --es-map-street: rgba(255, 255, 255, .8);
    --es-map-grid: transparent;
    --es-map-water: #e0d7d1;

    /* The developer page's code (plan job 5.8): every block is pinned dark (.es-dark), so the
       second values below are the ones read; these first ones serve a browser without
       light-dark(), where the pinned block stays on paper. Keyword, string, number, comment. */
    --es-code-key: #c2410c;
    --es-code-string: #047857;
    --es-code-number: #b45309;
    --es-code-comment: #776b65;

    /* Text on the ember call band (job 3.4), which is ember in both themes: white on #c2410c is
       5.2:1; the button is white with the deep ember as its ink. */
    --es-on-ember: #ffffff;
    --es-on-ember-soft: #ffe4d6;
    --es-on-ember-faint: rgba(255, 255, 255, .14);
    --es-on-ember-hover: #fff1ea;
    --es-on-ember-ink: #9a3412;

    /* Shape — B "Canlı" (plan job 2.5), one step tighter since the hand test (UIhataları 50, K12):
       6/10/12/16/22, from a chip's corner to a hero card's. A control has its own two: a button
       and a field are 12px whatever their height, so a 32px button beside a 42px field still
       reads as the same family. */
    --es-r-xs: 6px;
    --es-r-sm: 10px;
    --es-r: 12px;
    --es-r-lg: 16px;
    --es-r-xl: 22px;
    /* A full-width call band (the footer's, job 3.4; B's closing band): rounder than any card. */
    --es-r-band: 28px;
    --es-r-btn: 12px;
    --es-r-input: 12px;
    --es-r-pill: 999px;

    /* Control heights (K12): a button 40px (32 small, 48 large), a field 42px (34 small). The
       desktop pointer does not need the 44px touch floor (design.md §5.3); a touch screen gets it
       back in the (pointer: coarse) block after this rule, so a tap target never shrinks. */
    --es-h-btn: 40px;
    --es-h-btn-sm: 32px;
    --es-h-btn-lg: 48px;
    --es-h-field: 42px;
    --es-h-field-sm: 34px;
    /* A menu row and a checkbox row: between a small and a normal button on a desk. */
    --es-h-row: 36px;
    --es-shadow-1: 0 1px 2px rgba(26, 19, 16, .05);
    --es-shadow-2: 0 4px 16px rgba(26, 19, 16, .07);
    --es-shadow-3: 0 12px 32px rgba(26, 19, 16, .11);
    --es-sidebar-w: 240px;
    /* The desktop height of the site's top bar and of the portal's and the admin area's (K12).
       A sticky panel below either one (a page's contents column, an event's tab bar) offsets
       itself by it, so the two can never drift apart again. */
    --es-bar-h: 64px;

    /* Spacing (UIhataları 50, K12): one 4px-based ladder, so a gap, a card's padding and a
       section's margin are picked from the same eight steps instead of 1,500 one-off values. */
    --es-space-1: 4px;
    --es-space-2: 8px;
    --es-space-3: 12px;
    --es-space-4: 16px;
    --es-space-5: 20px;
    --es-space-6: 24px;
    --es-space-7: 32px;
    --es-space-8: 48px;

    /* A card's padding and the gap under a page head (K12): the card 1.125rem around, its
       header and footer a shorter strip. */
    --es-card-pad: 1.125rem;
    --es-card-pad-y: .75rem;
    --es-page-gap: 1.25rem;

    /* Type scale (UIhataları 50, K12). The root stays at 16px — lowering it would push ~200
       sizes already at .75rem or below under 11px — and the body reads 15px. The headings are
       fluid and reach their desktop size at about 1200px; --es-fs-page is a page head's title,
       --es-fs-title a showcase section's or a personal header's (the home page's bands, /me),
       --es-fs-display every hero title — the cover's name, the search panel's — at most 3.25rem,
       where they once grew to 5rem. */
    --es-fs-xs: .75rem;
    --es-fs-sm: .8125rem;
    --es-fs-body: .9375rem;
    --es-fs-lg: 1.0625rem;
    --es-fs-h3: clamp(1.0625rem, .95rem + .25vw, 1.125rem);
    --es-fs-h2: clamp(1.1875rem, 1rem + .5vw, 1.375rem);
    --es-fs-h1: clamp(1.375rem, 1.1rem + .9vw, 1.75rem);
    --es-fs-page: clamp(1.375rem, 1.1rem + .6vw, 1.625rem);
    --es-fs-title: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem);
    --es-fs-display: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
    /* A form field's text: the body size on a desk, 16px on a phone (below), where iOS zooms the
       page in on focus into anything smaller. */
    --es-fs-field: .9375rem;

    /* The one content width and side gutter (UIhataları 28, K12): the site's top bar, the page's
       .container and the footer all use these two, so their left edges sit on one line at every
       width. The gutter drops to 16px on a phone (below). */
    --es-container: 1320px;
    --es-gutter: 24px;
    /* The portal and the admin area's content column: wider than the site's, but no longer edge
       to edge on a wide screen. */
    --es-app-max: 1440px;

    /* Motion (plan job 2.7, §2.1 "premium his"). One curve and three lengths, so a card's lift,
       a menu's opening and a theme change feel like the same hand: --es-dur-fast for what follows
       the pointer (a lift, a colour), --es-dur for what opens (a menu, 160ms), --es-dur-slow for
       what changes the whole page (a theme switch, a cover's zoom). Every movement they drive is
       switched off in one place, the reduced-motion block at the end of this file. */
    --es-ease: cubic-bezier(.2, .8, .2, 1);
    --es-dur-fast: 140ms;
    --es-dur: 160ms;
    --es-dur-slow: 320ms;

    /* The blur behind a glass bar (Ek A --es-glass). Modest on purpose — a backdrop filter is
       repainted on every scrolled frame, which a low-end phone feels first (plan job 2.7 risk);
       a narrow screen takes the lighter value below. */
    --es-glass-filter: saturate(160%) blur(12px);

    /* Bootstrap's own variables are pointed at the same palette, so the components that are
       not overridden by hand below still come out in the right colour — in both themes, since
       each names a two-valued token. The -rgb triplets cannot carry two values; they keep the
       light ember, and every component that reads them is restyled in this file. */
    --bs-primary: var(--es-brand);
    --bs-primary-rgb: 194, 65, 12;
    --bs-body-color: var(--es-body);
    --bs-body-bg: var(--es-page);
    --bs-border-color: var(--es-line);
    --bs-border-radius: var(--es-r);
    --bs-border-radius-sm: var(--es-r-sm);
    --bs-border-radius-lg: var(--es-r-lg);
    --bs-border-radius-xl: var(--es-r-xl);
    /* The scale above, for any Bootstrap piece not restyled by hand (UIhataları 50). */
    --bs-body-font-size: var(--es-fs-body);
    --bs-body-line-height: 1.5;
    --bs-link-color: var(--es-brand-strong);
    --bs-link-hover-color: var(--es-brand-deep);
    --bs-secondary-color: var(--es-muted);
    --bs-tertiary-color: var(--es-faint);
    --bs-secondary-bg: var(--es-fill);
    --bs-tertiary-bg: var(--es-raised);
    --bs-emphasis-color: var(--es-ink);
    --bs-focus-ring-color: var(--es-ring);
    --bs-font-sans-serif: var(--es-font-body);
    --bs-body-font-family: var(--es-font-body);
}

/* A phone's gutter is 16px (K12), and its form text 16px so iOS does not zoom in on focus. */
@media (max-width: 767.98px) {
    :root {
        --es-gutter: 16px;
        --es-fs-field: 1rem;
    }
}

/* A touch screen gets the 44px target back (design.md §5.3, K12) on every control the desk
   scale shrank: buttons of every size, fields and the menu and checkbox rows. */
@media (pointer: coarse) {
    :root {
        --es-h-btn: 44px;
        --es-h-btn-sm: 44px;
        --es-h-field: 44px;
        --es-h-field-sm: 44px;
        --es-h-row: 44px;
        --es-fs-field: 1rem;
    }
}

/*
    The two themes (plan §2.1, §3 rule 2). No attribute is "Sistem": the page follows the
    device. data-theme="light" or "dark" on <html> (the Sistem/Açık/Koyu choice, rendered from a
    cookie) pins one. color-scheme also turns the browser's own pieces — scrollbars, the date
    picker, autofill — to the same side.

    Only a browser with light-dark() is offered the dark side. One without it has light tokens
    only, so outside the @supports block below the page is plainly light: "light dark" there would
    put dark scrollbars and date pickers on a dark device next to a light page.
*/
:root {
    color-scheme: light;

    /* What a subtree pinned dark in both themes declares (`color-scheme: var(--es-scheme-dark)`)
       — "dark" only where the tokens can follow it, "light" where they cannot. */
    --es-scheme-dark: light;
}

@supports (color: light-dark(#000, #fff)) {
    :root {
        color-scheme: light dark;
        --es-scheme-dark: dark;
    }

    :root[data-theme="light"] {
        color-scheme: light;
    }

    :root[data-theme="dark"] {
        color-scheme: dark;
    }
}

/*
    Pinned dark in both themes: whatever sits on a cover photograph or its scrim (the event hero,
    a date block on a cover, a fallback cover) and, later, the admin side menu and the error page
    (plan §8 B-22). Every token below resolves to its dark value inside such a subtree. The
    components that are pinned today carry the same declaration in their own rule; this class is
    the reusable pin for a subtree that has no rule of its own.
*/
.es-dark {
    color-scheme: var(--es-scheme-dark);
    /* Its own text colour: a colour token resolves where it is declared and is inherited as a
       fixed value, so a pinned box that only switched the scheme kept the light page's dark text
       on its dark ground (UIhataları 38). The same holds for every light-pinned logo tile. */
    color: var(--es-body);
}

/* The second value of every colour token (see the note at the top of :root). */
@supports (color: light-dark(#000, #fff)) {
    :root {
        --es-brand: light-dark(#c2410c, #ff6b35);
        --es-brand-strong: light-dark(#9a3412, #ff8a5c);
        --es-brand-deep: light-dark(#7c2d12, #ffa883);
        --es-brand-soft: light-dark(#fff0e8, rgba(255, 107, 53, .12));
        --es-brand-border: light-dark(#ffd6c2, rgba(255, 107, 53, .35));
        --es-brand-ink: light-dark(#ffffff, #170b06);

        --es-ink: light-dark(#120d0b, #f7f1ec);
        --es-body: light-dark(#2f2724, #d8cec7);
        --es-muted: light-dark(#6b5f59, #a3968e);
        --es-faint: light-dark(#776b65, #8f827a);

        /* Ek A gives --es-fill #141010 on ink, a panel colour; here the token is a chip and hover
           tint on a card (#151110), where that would vanish — so the dark tints step up from
           the card instead, keeping the September dark portal's #2a221e for --es-fill-2. */
        --es-page: light-dark(#ffffff, #0d0a09);
        --es-surface: light-dark(#ffffff, #151110);
        --es-raised: light-dark(#fbf8f6, #1c1614);
        --es-fill: light-dark(#f6f2ef, #1f1916);
        --es-fill-2: light-dark(#ede7e2, #2a221e);
        --es-line: light-dark(#efe9e4, rgba(247, 241, 236, .10));
        --es-line-strong: light-dark(#e0d7d1, rgba(247, 241, 236, .18));
        --es-edge: light-dark(#968a82, #746862);

        --es-wash: light-dark(rgba(18, 13, 11, .05), rgba(247, 241, 236, .06));
        --es-wash-strong: light-dark(rgba(18, 13, 11, .08), rgba(247, 241, 236, .11));
        --es-glass: light-dark(rgba(255, 255, 255, .78), rgba(13, 10, 9, .82));
        --es-app-ground: light-dark(#f6f2ef, #0d0a09);
        --es-side-bg: light-dark(#ffffff, #0a0807);
        --es-tab-on: light-dark(#120d0b, #2a221e);
        --es-tab-on-ink: light-dark(#ffffff, #f7f1ec);
        --es-tab-on-edge: light-dark(transparent, rgba(255, 107, 53, .45));
        --es-ring: light-dark(rgba(194, 65, 12, .16), rgba(255, 107, 53, .30));
        --es-bad-ring: light-dark(rgba(220, 38, 38, .15), rgba(248, 113, 113, .28));
        --es-brand-shadow: light-dark(rgba(194, 65, 12, .3), rgba(255, 107, 53, .28));

        --es-glow-line: light-dark(#efe9e4, rgba(255, 107, 53, .24));
        --es-glow-line-hover: light-dark(#ffd6c2, rgba(255, 107, 53, .55));
        --es-glow-color: light-dark(rgba(18, 13, 11, .10), rgba(255, 107, 53, .22));
        --es-highlight: light-dark(transparent, rgba(255, 255, 255, .05));
        --es-header-glow: light-dark(transparent, rgba(255, 107, 53, .22));
        /* B's soft long shadow on paper (plan job 2.5); on ink the light half is transparent and
           job 2.3's tighter ember glow does the work, since a long orange haze under every card
           is exactly the "orange everywhere" its risk note warns against. */
        --es-card-shadow: inset 0 1px 0 var(--es-highlight),
            0 1px 2px light-dark(rgba(18, 13, 11, .04), rgba(0, 0, 0, .4)),
            0 10px 30px -12px light-dark(rgba(18, 13, 11, .10), transparent),
            0 14px 34px -22px light-dark(transparent, rgba(255, 107, 53, .22));
        --es-card-shadow-hover: inset 0 1px 0 var(--es-highlight),
            0 2px 4px light-dark(rgba(18, 13, 11, .04), rgba(0, 0, 0, .45)),
            0 24px 48px -18px light-dark(rgba(18, 13, 11, .18), transparent),
            0 20px 44px -20px light-dark(transparent, rgba(255, 107, 53, .22));
        --es-menu-shadow: inset 0 1px 0 var(--es-highlight),
            0 12px 32px light-dark(rgba(26, 19, 16, .11), rgba(0, 0, 0, .55)),
            0 0 28px -8px var(--es-glow-color);

        --es-bad-box: light-dark(rgba(185, 28, 28, .16), rgba(248, 113, 113, .18));
        --es-bad-box-line: light-dark(rgba(185, 28, 28, .40), rgba(248, 113, 113, .40));
        --es-bad-box-text: light-dark(#991b1b, #fca5a5);
        --es-warn-box: light-dark(rgba(180, 83, 9, .16), rgba(251, 191, 36, .16));
        --es-warn-box-line: light-dark(rgba(180, 83, 9, .40), rgba(251, 191, 36, .40));
        --es-warn-box-text: light-dark(#92400e, #fbbf24);

        /* On ink each status fill becomes a dark field of its own hue, so an alert still reads as
           its status rather than as a bright rectangle (§4.6); the text and the dot take the
           bright hue, which clears 4.5:1 on every dark surface (Ek A). */
        --es-ok: light-dark(#047857, #4ade80);
        --es-ok-soft: light-dark(#ecfdf5, #10251b);
        --es-ok-border: light-dark(#a7f3d0, #1d4b36);
        --es-ok-strong: light-dark(#065f46, #86efac);
        --es-ok-ink: light-dark(#ffffff, #052e16);
        --es-warn: light-dark(#b45309, #fbbf24);
        --es-warn-soft: light-dark(#fffbeb, #2a1f10);
        --es-warn-border: light-dark(#fde68a, #56401b);
        --es-warn-ink: light-dark(#ffffff, #2a1f10);
        --es-bad: light-dark(#b91c1c, #f87171);
        --es-bad-soft: light-dark(#fef2f2, #2a1414);
        --es-bad-border: light-dark(#fecaca, #5c2626);
        --es-bad-ink: light-dark(#ffffff, #2a0a0a);
        --es-info: light-dark(#0369a1, #7dd3fc);
        --es-info-soft: light-dark(#f0f9ff, #101f2a);
        --es-info-border: light-dark(#bae6fd, #1e415c);
        --es-info-ink: light-dark(#ffffff, #0c2333);

        --es-dot-ok: light-dark(#15803d, #4ade80);
        --es-dot-warn: light-dark(#b45309, #fbbf24);
        --es-dot-bad: light-dark(#dc2626, #f87171);
        --es-dot-info: light-dark(#0369a1, #7dd3fc);

        --es-chart-soft: light-dark(#fcc3a3, rgba(255, 107, 53, .38));
        --es-chart-ink: light-dark(#4a3f3a, #d8cec7);
        --es-chart-muted: light-dark(#cdbfb6, #51453f);
        --es-chart-track: light-dark(#ede7e2, #2a221e);

        --es-shell-alarm-text: light-dark(#991b1b, #ffd9d0);

        --es-foot-bg: light-dark(#f6f2ef, #070605);
        --es-foot-edge: light-dark(transparent, rgba(255, 107, 53, .45));
        --es-foot-glow: light-dark(transparent, rgba(255, 107, 53, .13));
        --es-foot-mark: light-dark(#e6ddd6, #ff6b35);
        --es-foot-mark-rest: light-dark(#e6ddd6, transparent);
        --es-foot-mark-stroke: light-dark(transparent, rgba(255, 107, 53, .5));
        --es-cta-from: light-dark(#c2410c, #c2410c);
        --es-cta-to: light-dark(#c2410c, #6f260b);
        --es-cta-shine: light-dark(transparent, rgba(255, 138, 92, .55));
        --es-cta-glow: light-dark(rgba(194, 65, 12, .28), rgba(255, 107, 53, .38));

        --es-device-edge: light-dark(transparent, rgba(255, 107, 53, .38));
        --es-device-glow: light-dark(rgba(18, 13, 11, .18), rgba(255, 107, 53, .20));
        --es-preview-glow: light-dark(rgba(194, 65, 12, .07), rgba(255, 107, 53, .12));
        --es-device-screen-edge: light-dark(transparent, rgba(247, 241, 236, .10));

        --es-map-land: light-dark(#ede7e2, #141010);
        --es-map-road: light-dark(#ffffff, rgba(255, 255, 255, .09));
        --es-map-street: light-dark(rgba(255, 255, 255, .8), rgba(255, 255, 255, .05));
        --es-map-grid: light-dark(transparent, rgba(255, 255, 255, .025));
        --es-map-water: light-dark(#e0d7d1, #070605);

        --es-code-key: light-dark(#c2410c, #ff8a5c);
        --es-code-string: light-dark(#047857, #a7e3b5);
        --es-code-number: light-dark(#b45309, #fbd38d);
        --es-code-comment: light-dark(#776b65, #8f827a);

        /* A shadow is a darker version of the surface behind it, and on ink there is none to
           find: the dark side is plain black at a weight that still separates a raised card. */
        --es-shadow-1: 0 1px 2px light-dark(rgba(26, 19, 16, .05), rgba(0, 0, 0, .4));
        --es-shadow-2: 0 4px 16px light-dark(rgba(26, 19, 16, .07), rgba(0, 0, 0, .45));
        --es-shadow-3: 0 12px 32px light-dark(rgba(26, 19, 16, .11), rgba(0, 0, 0, .5));
    }
}

/* --------------------------------------------------------------------- base */

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--es-page);
    color: var(--es-body);
    font-family: var(--bs-font-sans-serif);
    font-size: var(--es-fs-body);
    line-height: 1.5;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--es-ink);
    font-weight: 650;
    letter-spacing: -.02em;
}

/*
    Unbounded for the three heading levels a page is structured by (DD-6). It is a wide face —
    roughly a fifth wider than the Inter it replaced — so a long Turkish word in a title breaks
    rather than pushing the page sideways on a phone, and its weight stays at 600: heavier and
    the counters close up at card sizes. A heading styled as .h4–.h6 asked to be small and stays
    in the body face, as do h4–h6 themselves. Plain element and single-class selectors on
    purpose: a component's own title rule, later in this file, still decides its weight.
*/
h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--es-font-display);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
    overflow-wrap: break-word;
}

.h4, .h5, .h6 {
    font-family: var(--es-font-body);
    font-weight: 650;
    letter-spacing: -.02em;
}

/* Bootstrap's own heading sizes, brought onto the type scale (K12): 1.75 / 1.375 / 1.125rem
   from about 1200px, fluid and never smaller than a phone can hold below that. */
h1, .h1 {
    font-size: var(--es-fs-h1);
}

h2, .h2 {
    font-size: var(--es-fs-h2);
}

h3, .h3 {
    font-size: var(--es-fs-h3);
}

a {
    color: var(--es-brand-strong);
    text-underline-offset: .2em;
    text-decoration-thickness: 1px;
}

a:hover {
    color: var(--es-brand-deep);
}

code, .font-monospace {
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .875em;
}

code {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    padding: .12em .4em;
    border-radius: 6px;
}

hr {
    border-color: var(--es-line);
    opacity: 1;
}

::selection {
    background: var(--es-brand-border);
    color: var(--es-ink);
}

/* One focus ring everywhere, so somebody driving the site from the keyboard can always see
   where they are. */
:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
    border-radius: var(--es-r-sm);
}

/* Bootstrap's buttons, nav links and menu items replace the outline with a box-shadow halo built
   from a fixed blue -rgb triple, more specific than the rule above and blind to the theme. The
   same ember outline instead; each keeps its own corner. */
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.btn:first-child:active:focus-visible,
.btn.show:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
    box-shadow: none;
}

.btn:focus-visible {
    border-radius: var(--es-r-btn);
}

.dropdown-item:focus-visible {
    outline-offset: -2px;
}

.text-muted {
    color: var(--es-muted) !important;
}

/* Bootstrap's colour utilities are built from fixed -rgb triples, so a view that uses one gets
   Bootstrap's light-theme green or blue in both themes (a "Hazır" in .text-success was ~4:1 on
   ink). The status and brand tokens instead; !important because Bootstrap's carry one. */
.text-primary { color: var(--es-brand) !important; }
.text-success { color: var(--es-ok) !important; }
.text-warning { color: var(--es-warn) !important; }
.text-info { color: var(--es-info) !important; }
.border-primary { border-color: var(--es-brand) !important; }
.border-success { border-color: var(--es-ok) !important; }
.border-warning { border-color: var(--es-warn) !important; }
.border-danger { border-color: var(--es-bad) !important; }
.border-info { border-color: var(--es-info) !important; }

.small, small {
    font-size: var(--es-fs-sm);
}

/* ------------------------------------------------------------- page headers */

/*
    One shape for the top of every page: title and a one-line explanation on the left, the
    actions for that page on the right. The explanation is a habit rather than an option — a
    reader should not have to guess what a page is for from its title alone.
*/
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--es-space-4) var(--es-space-6);
    margin-bottom: var(--es-page-gap);
}

/* B's bold Unbounded title (plan job 2.5). Unbounded runs wide, so the size is held below B's
   own 38px and a long Turkish word breaks instead of widening a phone (plan job 2.1's risk). */
.page-head__title {
    font-family: var(--es-font-display);
    font-size: var(--es-fs-page);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    margin: 0;
}

.page-head__lead {
    color: var(--es-muted);
    font-size: var(--es-fs-body);
    margin: .35rem 0 0;
    max-width: 62ch;
}

.page-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--es-space-3);
    margin: var(--es-space-6) 0 var(--es-space-3);
}

.section-head:first-child {
    margin-top: 0;
}

.section-head h2 {
    font-size: var(--es-fs-lg);
    margin: 0;
}

/* --------------------------------------------------------------- breadcrumb */

.breadcrumb {
    font-size: var(--es-fs-sm);
    margin-bottom: var(--es-space-3);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--es-faint);
}

.breadcrumb-item a {
    color: var(--es-muted);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--es-brand-strong);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--es-ink);
    font-weight: 550;
}

/* ----------------------------------------------------------------- app shell */

/*
    The portal and the admin area (plan job 3.5; design portal1-Overview-B, admin1-Dashboard-B/C,
    popups-AppMobileMenu-B/C). One skeleton: B's warm-grey ground, the side menu as a floating
    card on it, and a top bar with the crumbs, the theme picker and the user menu. What tells the
    two apart is .app--admin, further down — an administrator who thinks they are in an
    organizer's portal is one click away from the wrong button.

    On a desk the <aside> sits in the row and its card stays in view while the page scrolls.
    Below 1200px the same <aside> is Bootstrap's .offcanvas-xl: a drawer from the left with the
    backdrop, Esc and the focus handling, visibility:hidden while closed — out of the tab order,
    and with no shadow left at the screen's edge (the September sidebar was merely slid off and
    kept both). The drawer took over at 992px until UIhataları 82: a landscape tablet (1024px)
    then got the desk's menu and about 760px of page, too narrow for the portal's tables.
*/
.app {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    background: var(--es-app-ground);
}

.app-sidebar {
    /* The drawer's own box is only a frame: the card inside it is the surface, so that the
       drawer floats 10px off the screen's edges the way B draws it. */
    --bs-offcanvas-width: min(316px, calc(100vw - 40px));
    --bs-offcanvas-bg: transparent;
    --bs-offcanvas-border-width: 0;
    --bs-offcanvas-transition: transform var(--es-dur-slow) var(--es-ease);
    --bs-offcanvas-zindex: 1045;
}

.app-sidebar:focus,
.app-sidebar:focus-visible {
    /* Bootstrap focuses the drawer itself as it opens, so that the next Tab lands inside; the
       open drawer is the sign of that, as on the discovery drawer (job 3.3). */
    outline: none;
}

.app-sidebar__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 12px 10px 12px;
    background: var(--es-side-bg);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    box-shadow: var(--es-card-shadow);
    color: var(--es-muted);
}

@media (min-width: 1200px) {
    .app-sidebar {
        position: sticky;
        top: 0;
        flex: 0 0 auto;
        width: calc(var(--es-sidebar-w) + 14px);
        height: 100vh;
        height: 100dvh;
        padding: 14px 0 14px 14px;
    }
}

@media (max-width: 1199.98px) {
    .app-sidebar {
        padding: 10px 0 10px 10px;
    }

    .app-sidebar__card {
        box-shadow: var(--es-menu-shadow);
    }

    /* With script off the menu button is a link to #app-menu and the drawer opens as its
       :target, with a page-sized shadow for the backdrop; its × is a link back to the button.
       site.js sets data-drawer-ready once Bootstrap has the drawer, so a stray #app-menu in the
       address cannot open a state Bootstrap knows nothing about. */
    .app-sidebar:target:not([data-drawer-ready]) {
        visibility: visible;
        transform: none;
    }

    .app-sidebar:target:not([data-drawer-ready]) .app-sidebar__card {
        box-shadow: var(--es-menu-shadow), 0 0 0 100vmax var(--es-backdrop);
    }
}

/* The organization on top (B's side-brand): the logo or its initials, the name, "Organizatör
   portalı", on a soft well. No switcher (plan §8 B-31) — the foot's "Organizasyonlarım" is the
   way to another organization. */
.app-sidebar__head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.app-sidebar__brand {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 56px;
    padding: 8px 10px;
    border-radius: 18px;
    background: var(--es-fill);
    color: var(--es-ink);
    text-decoration: none;
}

.app-sidebar__brand:hover {
    color: var(--es-ink);
    background: var(--es-fill-2);
}

.app-sidebar__logo {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--es-brand-strong) 0%, var(--es-brand) 100%);
    color: var(--es-brand-ink);
    font-family: var(--es-font-display);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* A logo is drawn for light paper (design.md §4.8), so it keeps its white tile on ink too. */
.app-sidebar__logo--image {
    background: var(--es-paper);
    box-shadow: inset 0 0 0 1px var(--es-line);
}

.app-sidebar__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The EventStage mark standing in for a missing logo (K3) breathes inside its white tile, as on the
   organization overview (.org-glance__mark img). */
.app-sidebar__logo img.app-sidebar__brand-mark {
    padding: 15%;
}

.app-sidebar__who {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.app-sidebar__name {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* The admin area's name is the product's, set like the top bar's wordmark (plan Ek B). */
.app-sidebar__name--wordmark {
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -.045em;
}

.app-sidebar__kicker {
    color: var(--es-muted);
    font-size: .74rem;
    line-height: 1.35;
}

/* The drawer's ×; a desk has no drawer to close. */
.app-sidebar__close {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--es-fill);
    color: var(--es-ink);
}

.app-sidebar__close:hover {
    background: var(--es-fill-2);
    color: var(--es-ink);
}

.app-sidebar__close svg {
    width: 18px;
    height: 18px;
}

@media (min-width: 1200px) {
    .app-sidebar__close {
        display: none;
    }
}

.app-sidebar__nav {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 1px;
}

.app-sidebar__group {
    padding: 14px 10px 6px;
    color: var(--es-faint);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.side-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 12px;
    color: var(--es-body);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color var(--es-dur-fast) ease, color var(--es-dur-fast) ease;
}

.side-link svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--es-muted);
}

.side-link__label {
    flex: 1 1 auto;
    min-width: 0;
}

.side-link:hover {
    background: var(--es-wash);
    color: var(--es-ink);
}

/* The page you are on: B's soft ember with C's stripe down the inner edge. */
.side-link.is-active {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    box-shadow: inset 3px 0 0 var(--es-brand);
}

.side-link.is-active svg {
    color: var(--es-brand);
}

.side-link:focus-visible {
    outline-offset: -2px;
}

/* A phone is the device of the drawer: 44px rows (design.md §5.3). */
@media (max-width: 1199.98px), (pointer: coarse) {
    .side-link {
        min-height: 44px;
    }
}

.app-sidebar__foot {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--es-line);
}

/*
    The admin area (plan job 3.5, admin1-Dashboard-B/C): a 2px ember line across the very top of
    the screen, the "Yönetim" pill, and the side menu pinned dark in both themes (--es-scheme-dark,
    plan job 2.2) with the current page on a filled ember. A light page with a dark menu cannot
    be mistaken for an organizer's portal, which keeps a light menu in the light theme.
*/
.app--admin::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    z-index: 1050;
    height: 2px;
    background: var(--es-brand);
    pointer-events: none;
}

.app--admin .app-sidebar {
    color-scheme: var(--es-scheme-dark);
    color: var(--es-body);
}

.app--admin .side-link.is-active {
    background: var(--es-brand);
    color: var(--es-brand-ink);
    box-shadow: 0 8px 20px -10px var(--es-brand-shadow);
}

.app--admin .side-link.is-active svg {
    color: inherit;
}

.app--admin .side-link.is-active .count-badge {
    background: var(--es-brand-ink);
    color: var(--es-brand);
}

.side-link .count-badge {
    flex: 0 0 auto;
}

/* "Yönetim": a small filled ember pill, beside the name and as the top bar's first crumb. */
.app-mode {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--es-r-pill);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
}

.app-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

/* B's top bar: no band of its own at the top of the page, glass with a hairline once the page
   has moved (html[data-scrolled], as the discovery bar, job 3.1). With script off it stays glass,
   since a transparent bar over scrolled text is unreadable. --es-header-h bounds the user menu. */
.app-topbar {
    --es-header-h: var(--es-bar-h);
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--es-header-h);
    /* The bar spans the whole column, but its content lines up with .app-main's, which stops at
       --es-app-max on a wide screen (UIhataları 28, K12). */
    padding: 0 max(var(--es-gutter), calc((100% - var(--es-app-max)) / 2 + var(--es-gutter)));
    background: var(--es-glass);
    -webkit-backdrop-filter: var(--es-glass-filter);
    backdrop-filter: var(--es-glass-filter);
    border-bottom: 1px solid var(--es-glow-line);
    box-shadow: 0 14px 36px -26px var(--es-header-glow);
}

/* Eased only once site.js has settled the first state (html[data-scroll-ready], set a frame
   after it): a page painted before the script would otherwise show its glass fading out at the
   top. */
html[data-scroll-ready] .app-topbar {
    transition: background-color var(--es-dur) var(--es-ease), border-color var(--es-dur) var(--es-ease),
        box-shadow var(--es-dur) var(--es-ease);
}

html[data-scroll-watch]:not([data-scrolled]) .app-topbar {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
}

/* The menu button wears the discovery bar's round icon control (.site-header__icon). */
.app-topbar .app-topbar__menu {
    display: none;
    flex: 0 0 auto;
    position: relative;
}

@media (max-width: 1199.98px) {
    .app-topbar .app-topbar__menu {
        display: inline-grid;
    }
}

/* Where you are: the organization (or the "Yönetim" pill), the section the menu has lit and, in
   the portal, the levels a page adds below it (PageCrumbs, plan Stage 7) — one line of crumbs,
   with no second breadcrumb on the page. */
.app-crumbs {
    flex: 1 1 auto;
    min-width: 0;
}

.app-crumbs ol {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--es-muted);
    font-size: .9rem;
}

.app-crumbs li {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-crumbs li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--es-faint);
}

.app-crumbs__root {
    flex: 0 1 auto;
}

.app-crumbs a {
    color: var(--es-muted);
    text-decoration: none;
}

.app-crumbs a:hover {
    color: var(--es-brand-strong);
}

.app-crumbs li[aria-current] {
    flex: 0 1 auto;
    color: var(--es-ink);
    font-weight: 600;
}

/* The "Yönetim" pill as a link back to the dashboard: the pill stays small, the target 44px. */
.app-crumbs a.app-crumbs__mode {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    vertical-align: middle;
}

.app-topbar__end {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* The discovery bar hands its account to its drawer below 992px (job 3.3); this drawer is the
   side menu, so the chip — and "Çıkış yap" in its menu — stays on the row at every width. */
.app-topbar .site-header__account {
    display: block;
}

/* The chip's first name has the room here that the discovery bar lacks below 1200px. */
@media (min-width: 768px) {
    .app-topbar .user-chip__name {
        display: inline;
    }
}

/* At most --es-app-max wide and centred (UIhataları 28, K12): a 2560px screen no longer stretches
   a form or a table edge to edge. width: 100% because the auto margins would otherwise shrink a
   column-flex child to its content. */
.app-main {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--es-app-max);
    margin-inline: auto;
    padding: var(--es-space-2) var(--es-gutter) var(--es-space-8);
}

@media (max-width: 991.98px) {
    .app-topbar {
        --es-header-h: 60px;
        gap: var(--es-space-2);
        padding: 0 var(--es-space-4);
    }

    .app-main {
        padding: var(--es-space-2) var(--es-space-4) var(--es-space-7);
    }
}

/* A phone's row is the menu, where you are, the theme and the account: the organization's name
   and the levels above the page (PageCrumbs, plan Stage 7) give way to the page itself, which is
   the part that changes. The admin area keeps its pill — that is the point of it. */
@media (max-width: 575.98px) {
    .app-crumbs__root--org,
    .app-crumbs__up {
        display: none;
    }

    /* Prefixed so it outranks .app-crumbs li + li::before, which would otherwise keep the "/". */
    .app-crumbs .app-crumbs__root--org ~ li:last-child::before {
        content: none;
    }
}

/* -------------------------------------------------------------------- cards */

.card {
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    box-shadow: var(--es-card-shadow);
}

/* --bs-card-inner-border-radius keeps a header's own corner inside the card's (B) instead of
   Bootstrap's square-ish default poking out of it. */
.card {
    --bs-card-inner-border-radius: calc(var(--es-r-lg) - 1px);
    color: var(--es-body);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--es-line);
    padding: var(--es-card-pad-y) var(--es-card-pad);
    font-family: var(--es-font-display);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--es-ink);
    font-size: .9375rem;
}

.card-body {
    padding: var(--es-card-pad);
}

.card-footer {
    background: var(--es-raised);
    border-top: 1px solid var(--es-line);
    padding: var(--es-card-pad-y) var(--es-card-pad);
}

/* --------------------------------------------------------------- stat tiles */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--es-space-4);
    margin-bottom: var(--es-page-gap);
}

/* B's tile (plan job 2.5): a --es-r-lg card, the label with its icon in a soft box, and the number in
   the display face below it. The views put the icon inside .stat__label, so the box is drawn on
   that svg rather than asking every view for a wrapper. */
.stat {
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    padding: var(--es-space-4) var(--es-card-pad);
    box-shadow: var(--es-card-shadow);
}

.stat__label {
    display: flex;
    align-items: center;
    gap: var(--es-space-2);
    font-size: var(--es-fs-sm);
    font-weight: 600;
    color: var(--es-muted);
}

.stat__label > svg {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding: 7px;
    flex: 0 0 auto;
    border-radius: var(--es-r-sm);
    background: var(--es-brand-soft);
    color: var(--es-brand);
}

.stat--ok .stat__label > svg {
    background: var(--es-ok-soft);
    color: var(--es-ok);
}

.stat--warn .stat__label > svg {
    background: var(--es-warn-soft);
    color: var(--es-warn);
}

.stat--bad .stat__label > svg {
    background: var(--es-bad-soft);
    color: var(--es-bad);
}

.stat__value {
    font-family: var(--es-font-display);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--es-ink);
    letter-spacing: -.04em;
    margin-top: var(--es-space-2);
    font-variant-numeric: tabular-nums;
}

.stat__hint {
    font-size: var(--es-fs-xs);
    font-weight: 500;
    color: var(--es-muted);
    margin-top: .2rem;
}

.stat--ok .stat__value {
    color: var(--es-ok);
}

.stat--warn .stat__value {
    color: var(--es-warn);
}

.stat--bad .stat__value {
    color: var(--es-bad);
}

/* The thin bar under a rate, so the proportion is visible without reading the number. It is the
   tile's name for .chart-meter (below), which draws it. */
.stat__bar {
    height: 5px;
    margin-top: .55rem;
}

/* ------------------------------------------------------------- charts (plan job 4.7)

   CSS-only chart parts. No chart library and no canvas: the content security policy loads
   nothing from outside (§23), and every chart on the site is a handful of numbers the server
   already has. The server works out each proportion and writes it into a custom property —
   always through Charts.Share() (Infrastructure/ChartParts.cs), which prints an invariant
   "42.5%": the request culture is tr-TR, where a plain 42.5 prints as "42,5" and the browser
   silently drops the whole declaration.

   They are INNER pieces (DD-24): a chart sits inside a .card, .stat or .table-card that already
   carries the ember edge and the glow, so a chart draws no outer edge or glow of its own, and its
   rules are the neutral --es-line. Colours are tokens (--es-chart-*, the status dots, the brand),
   two-valued like the rest, so a chart is right in both themes with nothing in the view.

   Every chart carries its numbers as text (design.md §5.3): either a visually-hidden table
   (<table class="visually-hidden"> with a <caption>) beside a picture marked aria-hidden, or the
   picture as role="img" with an aria-label that says the numbers. A legend that prints the
   counts is text enough for a stacked bar. _BarChart and _StackBar write all of this for you.

   The contract:

     .chart                       optional <figure>: .chart__head (.chart__title, .chart__note,
                                  a .chart-legend on the right), the picture, the axis.
                                  .chart--hist on the figure passes the histogram's gap to the
                                  axis under it too.
     .chart-bars                  vertical bars. Height --chart-h (8rem), gap --chart-gap (6px).
       .chart-bar                 one column; style="--v: 62%" = its share of the scale.
         .chart-bar__fill         the bar: soft ember; .chart-bar.is-on (today, the busiest
                                  hour) is full ember. A tone class on a bar or on the whole
                                  chart sets its own colour.
         .chart-bar__value        optional number above the bar; the chart then needs
                                  .chart-bars--values, which reserves the room for it.
       --hist                     histogram: adjacent bins of one quantity, 2px gaps, flat tops.
       --mini                     the small bars inside a stat tile (40px, no axis).
       --grid                     quarter rules behind the bars and a baseline under them.
       --solid                    every bar full ember.
     .chart-axis                  the labels under .chart-bars / .chart-cols, one <span> per
                                  column at the same gap. --ends: only a few labels, spread
                                  from the first column to the last (a 30-day trend).
     .chart-cols                  nested columns ("iç içe sütun", portal2-Reports-B).
       .chart-col                 style="--v: 80%; --w: 78%": the outer column's share of the
                                  scale (registrations), and the inner fill's share OF THE OUTER
                                  (check-ins of those registrations). .is-pending = dashed
                                  (still open, the number will grow).
         .chart-col__inner        the inner fill.
         .chart-col__value        optional label above the column.
     .chart-meter                 a horizontal ratio or progress bar; its child <span> is the
                                  fill, width --v (or an inline width — .stat__bar's older way).
                                  --thin 4px, --thick 10px; a tone class colours the fill.
     .chart-meter-row             label | meter | number, for a list of meters.
     .chart-stack                 a stacked distribution bar; each .chart-stack__seg takes
                                  style="--n: 248", the raw count (flex-grow does the sum), and
                                  a tone class. Leave a zero out rather than drawing it.
     .chart-legend                the key: .chart-legend__item = .chart-swatch + label + count.
                                  .chart-swatch--outline is the key of a nested column's outer.
     .chart-tone-brand|soft|ink|ok|warn|bad|info|muted
                                  sets --chart-c, the colour every part above paints with.
     .chart-ring                  the doughnut of one rate, style="--v: 78%"; the text inside
                                  is .chart-ring__value and .chart-ring__label. --ring-size,
                                  --ring-thickness.
     .sparkline                   the inline SVG Charts.Sparkline() draws: a line over a faint
                                  area. Height --spark-h (40px).
     .date-block--inline          the date tile in a list or a timeline rather than on a cover:
                                  in the flow, following the theme (the cover's .date-block is
                                  pinned dark).

   Bars, columns and meter fills grow in once on arrival (es-chart-rise / es-chart-fill, DD-25);
   the reduced-motion block at the end of this file stands them still.
*/

.chart {
    --chart-gap: 6px;
    display: grid;
    gap: .75rem;
    min-width: 0;
    margin: 0;
}

.chart__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.chart__title {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--es-ink);
}

.chart__note {
    margin: .15rem 0 0;
    font-size: .8rem;
    color: var(--es-muted);
}

/* ---- the colour of a part: one variable, so a tone class works on a bar, a segment, a swatch,
   a meter or a whole chart alike. */
.chart-tone-brand { --chart-c: var(--es-brand); }
.chart-tone-soft { --chart-c: var(--es-chart-soft); }
.chart-tone-ink { --chart-c: var(--es-chart-ink); }
.chart-tone-ok { --chart-c: var(--es-dot-ok); }
.chart-tone-warn { --chart-c: var(--es-dot-warn); }
.chart-tone-bad { --chart-c: var(--es-dot-bad); }
.chart-tone-info { --chart-c: var(--es-dot-info); }
.chart-tone-muted { --chart-c: var(--es-chart-muted); }

/* ---- vertical bars and the histogram */
.chart-bars {
    display: flex;
    align-items: stretch;
    gap: var(--chart-gap, 6px);
    height: var(--chart-h, 8rem);
    min-width: 0;
}

/* Room above the tallest bar for its number; the columns are what is left. */
.chart-bars--values {
    padding-top: 1.35rem;
}

.chart-bar {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
}

.chart-bar__fill {
    display: block;
    height: var(--v, 0%);
    /* A zero still leaves a stub on the baseline: an empty hour is a fact, not a gap. */
    min-height: 2px;
    border-radius: 6px 6px 3px 3px;
    background: var(--chart-c, var(--es-chart-soft));
    transform-origin: bottom;
    animation: es-chart-rise var(--es-dur-slow) var(--es-ease) both;
}

.chart-bar.is-on {
    --chart-c: var(--es-brand);
}

.chart-bar__value {
    position: absolute;
    bottom: calc(var(--v, 0%) + 4px);
    left: 50%;
    translate: -50% 0;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    color: var(--es-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.chart-bars--hist,
.chart--hist {
    --chart-gap: 2px;
}

.chart-bars--hist .chart-bar__fill {
    border-radius: 3px 3px 0 0;
}

.chart-bars--mini {
    --chart-h: 40px;
    --chart-gap: 3px;
}

.chart-bars--mini .chart-bar__fill {
    border-radius: 3px;
}

.chart-bars--solid {
    --chart-c: var(--es-brand);
}

/* Quarter rules drawn inside the content box, so the room reserved for the numbers stays clear. */
.chart-bars--grid,
.chart-cols {
    background: linear-gradient(var(--es-line) 1px, transparent 1px) 0 0 / 100% 25% content-box;
    border-bottom: 1px solid var(--es-line-strong);
}

/* ---- the labels under a chart */
.chart-axis {
    display: flex;
    gap: var(--chart-gap, 6px);
    margin-top: .45rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--es-muted);
    font-variant-numeric: tabular-nums;
}

.chart-axis > * {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
}

.chart-axis--ends {
    justify-content: space-between;
}

.chart-axis--ends > * {
    flex: 0 0 auto;
}

/* ---- nested columns */
.chart-cols {
    --chart-gap: 1rem;
    display: flex;
    align-items: flex-end;
    gap: var(--chart-gap);
    height: var(--chart-h, 12rem);
    padding: 1.9rem .5rem 0;
    min-width: 0;
}

.chart-cols + .chart-axis {
    --chart-gap: 1rem;
    padding-inline: .5rem;
}

.chart-col {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: flex-end;
    min-width: 0;
    height: var(--v, 0%);
    min-height: 3px;
    padding: 0 4px;
    border: 1.5px solid var(--es-line-strong);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: var(--es-fill);
    transform-origin: bottom;
    animation: es-chart-rise var(--es-dur-slow) var(--es-ease) both;
}

.chart-col.is-pending {
    border-style: dashed;
}

.chart-col__inner {
    flex: 1 1 auto;
    height: var(--w, 0%);
    border-radius: 8px 8px 0 0;
    background: var(--chart-c, var(--es-brand));
}

.chart-col__value {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    translate: -50% 0;
    padding: .1rem .5rem;
    border-radius: var(--es-r-pill);
    background: var(--es-surface);
    box-shadow: var(--es-shadow-2);
    font-size: .72rem;
    font-weight: 700;
    color: var(--es-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---- the horizontal ratio and progress bar */
.chart-meter,
.stat__bar {
    display: block;
    overflow: hidden;
    border-radius: var(--es-r-pill);
    background: var(--es-chart-track);
}

.chart-meter {
    height: 6px;
}

.chart-meter > span,
.stat__bar > span {
    display: block;
    width: var(--v, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--chart-c, var(--es-brand));
    transform-origin: left;
    animation: es-chart-fill var(--es-dur-slow) var(--es-ease) both;
}

.chart-meter--thin {
    height: 4px;
}

.chart-meter--thick {
    height: 10px;
}

.chart-meter-row {
    display: grid;
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
}

.chart-meter-row__label {
    overflow: hidden;
    font-weight: 600;
    color: var(--es-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-meter-row__value {
    font-weight: 700;
    color: var(--es-ink);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .chart-meter-row {
        grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) auto;
        gap: .5rem;
    }
}

/* ---- the stacked distribution bar and its key */
.chart-stack {
    display: flex;
    gap: 2px;
    height: 12px;
    overflow: hidden;
    border-radius: var(--es-r-pill);
    background: var(--es-chart-track);
}

.chart-stack__seg {
    flex: var(--n, 1) 1 0;
    min-width: 4px;
    background: var(--chart-c, var(--es-brand));
}

.chart-stack--thick {
    height: 18px;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .8rem;
    color: var(--es-muted);
}

.chart-legend__item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.chart-legend__item strong {
    font-weight: 700;
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

.chart-swatch {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--chart-c, var(--es-brand));
}

.chart-swatch--outline {
    background: var(--es-fill);
    box-shadow: inset 0 0 0 1.5px var(--es-line-strong);
}

/* ---- the doughnut of one rate. The ring is a masked conic gradient on ::before, so the hole is
   truly empty and the text inside sits on whatever the card is, light or dark. */
.chart-ring {
    position: relative;
    display: grid;
    place-content: center;
    width: var(--ring-size, 10rem);
    aspect-ratio: 1;
    text-align: center;
}

.chart-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--chart-c, var(--es-brand)) 0 var(--v, 0%), var(--es-chart-track) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness, 14px)),
        #000 calc(100% - var(--ring-thickness, 14px) + 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness, 14px)),
        #000 calc(100% - var(--ring-thickness, 14px) + 1px));
}

.chart-ring__value {
    position: relative;
    font-family: var(--es-font-display);
    font-size: calc(var(--ring-size, 10rem) * .24);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

.chart-ring__label {
    position: relative;
    margin-top: .3rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--es-muted);
}

/* ---- the sparkline */
.sparkline {
    display: block;
    width: 100%;
    height: var(--spark-h, 40px);
    overflow: visible;
}

.sparkline__line {
    fill: none;
    stroke: var(--chart-c, var(--es-brand));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sparkline__area {
    fill: var(--chart-c, var(--es-brand));
    opacity: .14;
}

@keyframes es-chart-rise {
    from {
        scale: 1 0;
    }
}

@keyframes es-chart-fill {
    from {
        scale: 0 1;
    }
}

/* ------------------------------------------------------------------- badges */

/*
    One badge family. Bootstrap's text-bg-* classes are repainted onto the same palette so a
    view that still uses them does not stand out; anything new uses .pill.

    Status is a neutral chip carrying a coloured dot, not a filled colour field (design.md §4.6,
    DD-16, kept by plan decision A-2): six tinted pills side by side is what makes a page look
    assembled from a component catalogue, and with one warm accent an orange "warning" pill would
    say the same thing as the primary button. B's part is the shape — a full capsule, bolder type,
    a slightly larger dot — and the label in ink, so the dot is the only colour. The two genuine
    alarms (a suspended organization's portal banner, a cancelled event's banner) keep a filled
    .alert instead — they are not in this list.

    The edge is there because a chip often sits on the same fill it is painted with (a table head,
    a .card-footer, an empty state); without it the label floats loose (DD-16).
*/
.pill,
.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 22px;
    padding: .15rem .6rem;
    border-radius: var(--es-r-pill);
    font-size: var(--es-fs-xs);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0;
    background: var(--es-fill);
    color: var(--es-ink);
    border: 1px solid var(--es-line);
    white-space: nowrap;
}

.pill::before, .badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.pill--muted, .badge.text-bg-secondary, .badge.text-bg-light {
    color: var(--es-muted);
}

.pill--muted::before, .badge.text-bg-secondary::before, .badge.text-bg-light::before {
    color: var(--es-faint);
}

.pill--ok::before, .badge.text-bg-success::before {
    color: var(--es-dot-ok);
}

.pill--warn::before, .badge.text-bg-warning::before {
    color: var(--es-dot-warn);
}

.pill--bad::before, .badge.text-bg-danger::before {
    color: var(--es-dot-bad);
}

.pill--info::before, .badge.text-bg-info::before {
    color: var(--es-dot-info);
}

.pill--brand::before, .badge.text-bg-primary::before {
    color: var(--es-brand);
}

/* A fact rather than a status (B-1's "EventStage'de: Ekim 2024", a city, a follower count —
   plan jobs 5.4 and 5.5): the same capsule with its icon in place of the dot, so it can sit in
   a row of facts without claiming to say how anything is going (DD-16). */
.pill--plain::before {
    content: none;
}

.pill--plain > svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--es-brand);
}

/* B's large pill for those facts under a page's title. */
.pill--lg {
    min-height: 32px;
    padding: .3rem .875rem;
    font-size: var(--es-fs-sm);
    font-weight: 600;
    background: var(--es-surface);
    border-color: var(--es-line);
}

/* The event's one state (UIhataları 43, decision K11): a tinted capsule in the tone's own soft
   fill, border and text, where the plain .pill is a grey chip with only a 7px dot to tell states
   apart — the reason the organizer's list read as "everything looks alike". Text tokens are the
   tone's dark ones in light and its light ones in dark, so each pairing keeps 4.5:1 on its soft fill
   in both themes. */
.pill--solid {
    background: var(--es-fill);
    border-color: var(--es-line-strong);
    color: var(--es-muted);
}

.pill--solid.pill--ok {
    background: var(--es-ok-soft);
    border-color: var(--es-ok-border);
    color: var(--es-ok-strong);
}

.pill--solid.pill--info {
    background: var(--es-info-soft);
    border-color: var(--es-info-border);
    color: var(--es-info);
}

.pill--solid.pill--warn {
    background: var(--es-warn-soft);
    border-color: var(--es-warn-border);
    color: var(--es-warn-box-text);
}

.pill--solid.pill--bad {
    background: var(--es-bad-soft);
    border-color: var(--es-bad-border);
    color: var(--es-bad-box-text);
}

.pill--solid.pill--brand {
    background: var(--es-brand-soft);
    border-color: var(--es-brand-border);
    color: var(--es-brand-strong);
}

/* Seven states share six tones; a draft is told from a completed event by its dashed line —
   "not real yet" — on the badge and on the row's edge alike. */
.pill--dashed {
    border-style: dashed;
    border-color: var(--es-faint);
}

/* The same state as a coloured left edge on a row or a card (UIhataları 43), so the states read
   down a list before a word is read. The tone sets the colour; .evlist-row and .evc draw it. */
.phase-edge {
    --phase-c: var(--es-faint);
    --phase-style: solid;
}

.phase-edge--ok { --phase-c: var(--es-dot-ok); }
.phase-edge--info { --phase-c: var(--es-dot-info); }
.phase-edge--warn { --phase-c: var(--es-dot-warn); }
.phase-edge--bad { --phase-c: var(--es-dot-bad); }
.phase-edge--brand { --phase-c: var(--es-brand); }
.phase-edge--muted { --phase-c: var(--es-faint); }
.phase-edge--dashed { --phase-style: dashed; }

/* A number riding on an icon or beside a menu entry (B's .count-badge): the unread count on the
   bell, a waiting count in the side menu. Ember fill, so it is the one loud thing near it. */
.count-badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--es-r-pill);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* A count that only informs (a status tab's, plan job 4.6): the same capsule, quiet — on the
   tab capsule's fill it takes the surface; on the chosen tab, which is the surface, the ember
   tint. The loud ember one above stays for what waits on the reader. */
.count-badge--quiet {
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    background: var(--es-fill-2);
    color: var(--es-muted);
    font-size: .75rem;
}

.tabs a.is-active .count-badge--quiet {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
}

/* ------------------------------------------------------------- icon box (B) */

/*
    An icon on a soft rounded square (B's .icbox): a stat tile's mark, an empty state's, a quick
    link's. The colour says what kind of thing it is, the same five roles as a status; --round
    for the circle B uses beside a sentence. The svg is sized here so a view never sets it.
*/
.icbox {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--es-r);
    background: var(--es-fill);
    color: var(--es-ink);
}

.icbox svg {
    width: 18px;
    height: 18px;
}

.icbox--sm {
    width: 32px;
    height: 32px;
    border-radius: var(--es-r-sm);
}

.icbox--sm svg {
    width: 16px;
    height: 16px;
}

.icbox--lg {
    width: 48px;
    height: 48px;
    border-radius: var(--es-r-lg);
}

.icbox--lg svg {
    width: 22px;
    height: 22px;
}

.icbox--xl {
    width: 56px;
    height: 56px;
    border-radius: var(--es-r-lg);
}

.icbox--xl svg {
    width: 26px;
    height: 26px;
}

.icbox--round {
    border-radius: 50%;
}

.icbox--brand {
    background: var(--es-brand-soft);
    color: var(--es-brand);
}

.icbox--ok {
    background: var(--es-ok-soft);
    color: var(--es-ok);
}

.icbox--warn {
    background: var(--es-warn-soft);
    color: var(--es-warn);
}

.icbox--bad {
    background: var(--es-bad-soft);
    color: var(--es-bad);
}

.icbox--info {
    background: var(--es-info-soft);
    color: var(--es-info);
}

/* B's two filled boxes (popups-SiteMobileMenu-B, plan job 3.3): the ember and the ink, for the
   one or two rows of a list that should lead the eye. Not a status — never on a stat tile. */
.icbox--solid {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.icbox--ink {
    background: var(--es-ink);
    color: var(--es-page);
}

/* ---------------------------------------------------------------- kicker (B) */

/* The short line above a title ("Sıradaki etkinlik"): B's bold sentence-case kicker in the
   accent. --caps is C's spaced capitals, for a band that wants the quieter label. */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--es-brand);
}

.kicker--caps {
    font-size: var(--es-fs-xs);
    letter-spacing: .09em;
    text-transform: uppercase;
}

.kicker--muted {
    color: var(--es-muted);
}

/* -------------------------------------------------------------- wordmark (B) */

/*
    "EventStage" set in type: the top bar's name and the footer's giant crop (plan Ek B — no logo
    beside it). Unbounded 700 with tight tracking; the giant one is sized off the viewport and
    may be cropped by its container. --outline draws only the stroke, for the dark footer.
*/
.wordmark {
    display: inline-block;
    font-family: var(--es-font-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -.045em;
    line-height: 1;
    color: var(--es-ink);
    white-space: nowrap;
    text-decoration: none;
}

a.wordmark:hover {
    color: var(--es-ink);
}

/* 17px on the phone row, which starts where the bar folds (plan Ek B). */
@media (max-width: 767.98px) {
    .wordmark {
        font-size: 1.07rem;
    }
}

.wordmark--giant {
    font-size: clamp(4rem, 16vw, 15rem);
    letter-spacing: -.06em;
    line-height: .8;
}

/* ------------------------------------------------------------------ buttons */

/*
    B's buttons (plan job 2.5), on the denser scale of K12: a 12px corner at every size, 40px tall
    by default (32 small, 48 large; 44 on a touch screen, see the tokens), bold label. min-height
    rather than height, so a label that has to wrap on a phone grows the button instead of
    spilling out of it. The look is set on Bootstrap's own classes — the kit's .btn is never
    copied (plan §3 rule 6) — and Bootstrap's --bs-btn-* sizes name the same values, so a rule
    that reads them agrees.
*/
.btn {
    --bs-btn-border-radius: var(--es-r-btn);
    --bs-btn-padding-y: .4rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-line-height: 1.2;
    min-height: var(--es-h-btn);
    font-weight: 650;
    font-size: var(--bs-btn-font-size);
    line-height: var(--bs-btn-line-height);
    letter-spacing: -.005em;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    border-radius: var(--es-r-btn);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
        box-shadow .15s ease, transform .15s ease;
}

.btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.btn:active {
    transform: translateY(1px);
}

.btn-sm {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .75rem;
    --bs-btn-font-size: var(--es-fs-sm);
    min-height: var(--es-h-btn-sm);
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-size: var(--bs-btn-font-size);
    gap: .3rem;
}

.btn-sm svg {
    width: 14px;
    height: 14px;
}

.btn-lg {
    --bs-btn-padding-y: .6rem;
    --bs-btn-padding-x: 1.375rem;
    --bs-btn-font-size: .9375rem;
    min-height: var(--es-h-btn-lg);
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-size: var(--bs-btn-font-size);
}

/*
    Every variant below sets Bootstrap's own --bs-btn-* variables rather than background, border
    and colour directly. Bootstrap's state rules (.btn:focus-visible, .btn:first-child:active,
    .btn.show, .btn:disabled) are more specific than a variant class and read those variables, so
    a colour set directly loses to them: a focused secondary turned Bootstrap grey, an open
    "Paylaş" toggle flashed Bootstrap blue. Through the variables every state stays on the palette
    in both themes.
*/
.btn {
    /* Bootstrap's focus shadow is built from an -rgb triple, which cannot follow light-dark();
       the focus ring is the outline in the focus rule at the top of this file instead. */
    --bs-btn-focus-box-shadow: none;
    --bs-btn-disabled-opacity: .5;
}

.btn-primary {
    --bs-btn-color: var(--es-brand-ink);
    --bs-btn-bg: var(--es-brand);
    --bs-btn-border-color: var(--es-brand);
    --bs-btn-hover-color: var(--es-brand-ink);
    --bs-btn-hover-bg: var(--es-brand-strong);
    --bs-btn-hover-border-color: var(--es-brand-strong);
    --bs-btn-active-color: var(--es-brand-ink);
    --bs-btn-active-bg: var(--es-brand-strong);
    --bs-btn-active-border-color: var(--es-brand-strong);
    /* A refused action has to stay readable: Bootstrap's opacity trick over an ember fill leaves
       a muddy orange that still looks pressable. */
    --bs-btn-disabled-color: var(--es-muted);
    --bs-btn-disabled-bg: var(--es-fill-2);
    --bs-btn-disabled-border-color: var(--es-line);
    --bs-btn-disabled-opacity: 1;
    box-shadow: 0 8px 20px -10px var(--es-brand-shadow);
}

/* B's tinted button: the accent at rest, without the weight of the primary beside it. */
.btn-outline-primary {
    --bs-btn-color: var(--es-brand-strong);
    --bs-btn-bg: var(--es-brand-soft);
    --bs-btn-border-color: var(--es-brand-border);
    --bs-btn-hover-color: var(--es-brand-strong);
    --bs-btn-hover-bg: var(--es-brand-soft);
    --bs-btn-hover-border-color: var(--es-brand);
    --bs-btn-active-color: var(--es-brand-strong);
    --bs-btn-active-bg: var(--es-brand-soft);
    --bs-btn-active-border-color: var(--es-brand);
    --bs-btn-disabled-color: var(--es-brand-strong);
    --bs-btn-disabled-bg: var(--es-brand-soft);
    --bs-btn-disabled-border-color: var(--es-brand-border);
}

/*
    B's soft button — the secondary action everywhere ("Halka açık sayfa", "Önceki"). A quiet fill
    with a hairline: the fill is what B draws, the line is what keeps it a button on a surface of
    the same tint (a card footer, the dark theme's raised panels).
*/
/* B's dark button (btn-dark in the kit, renamed so Bootstrap's own .btn-dark keeps its meaning):
   the ink as the fill, the page as the text, so it is dark on light and turns light on dark — the
   weight of the action, not a fixed colour (the administrator's sign-in, plan job 6.9). */
.btn-ink {
    --bs-btn-color: var(--es-page);
    --bs-btn-bg: var(--es-ink);
    --bs-btn-border-color: var(--es-ink);
    --bs-btn-hover-color: var(--es-page);
    --bs-btn-hover-bg: color-mix(in srgb, var(--es-ink) 84%, var(--es-page));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--es-ink) 84%, var(--es-page));
    --bs-btn-active-color: var(--es-page);
    --bs-btn-active-bg: color-mix(in srgb, var(--es-ink) 76%, var(--es-page));
    --bs-btn-active-border-color: color-mix(in srgb, var(--es-ink) 76%, var(--es-page));
    --bs-btn-disabled-color: var(--es-muted);
    --bs-btn-disabled-bg: var(--es-fill-2);
    --bs-btn-disabled-border-color: var(--es-line);
}

.btn-outline-secondary,
.btn-secondary {
    --bs-btn-color: var(--es-ink);
    --bs-btn-bg: var(--es-fill);
    --bs-btn-border-color: var(--es-line-strong);
    --bs-btn-hover-color: var(--es-ink);
    --bs-btn-hover-bg: var(--es-fill-2);
    --bs-btn-hover-border-color: var(--es-line-strong);
    --bs-btn-active-color: var(--es-ink);
    --bs-btn-active-bg: var(--es-fill-2);
    --bs-btn-active-border-color: var(--es-edge);
    --bs-btn-disabled-color: var(--es-ink);
    --bs-btn-disabled-bg: var(--es-fill);
    --bs-btn-disabled-border-color: var(--es-line-strong);
}

.btn-outline-danger {
    --bs-btn-color: var(--es-bad);
    --bs-btn-bg: var(--es-surface);
    --bs-btn-border-color: var(--es-bad-border);
    --bs-btn-hover-color: var(--es-bad);
    --bs-btn-hover-bg: var(--es-bad-soft);
    --bs-btn-hover-border-color: var(--es-bad);
    --bs-btn-active-color: var(--es-bad);
    --bs-btn-active-bg: var(--es-bad-soft);
    --bs-btn-active-border-color: var(--es-bad);
    --bs-btn-disabled-color: var(--es-bad);
    --bs-btn-disabled-bg: var(--es-surface);
    --bs-btn-disabled-border-color: var(--es-bad-border);
}

/* The soft destructive button: "Hesabımı sil" on the erasure band (.acct-danger, plan job 6.14),
   where the dialog and the password guard it rather than its loudness, and anywhere else the
   class turns up. */
.btn-danger {
    --bs-btn-color: var(--es-bad);
    --bs-btn-bg: var(--es-bad-soft);
    --bs-btn-border-color: var(--es-bad-border);
    --bs-btn-hover-color: var(--es-bad);
    --bs-btn-hover-bg: var(--es-bad-soft);
    --bs-btn-hover-border-color: var(--es-bad);
    --bs-btn-active-color: var(--es-bad);
    --bs-btn-active-bg: var(--es-bad-soft);
    --bs-btn-active-border-color: var(--es-bad);
    --bs-btn-disabled-color: var(--es-bad);
    --bs-btn-disabled-bg: var(--es-bad-soft);
    --bs-btn-disabled-border-color: var(--es-bad-border);
}

.btn-outline-warning {
    --bs-btn-color: var(--es-warn);
    --bs-btn-bg: var(--es-surface);
    --bs-btn-border-color: var(--es-warn-border);
    --bs-btn-hover-color: var(--es-warn);
    --bs-btn-hover-bg: var(--es-warn-soft);
    --bs-btn-hover-border-color: var(--es-warn);
    --bs-btn-active-color: var(--es-warn);
    --bs-btn-active-bg: var(--es-warn-soft);
    --bs-btn-active-border-color: var(--es-warn);
    --bs-btn-disabled-color: var(--es-warn);
    --bs-btn-disabled-bg: var(--es-surface);
    --bs-btn-disabled-border-color: var(--es-warn-border);
}

.btn-outline-success {
    --bs-btn-color: var(--es-ok);
    --bs-btn-bg: var(--es-surface);
    --bs-btn-border-color: var(--es-ok-border);
    --bs-btn-hover-color: var(--es-ok);
    --bs-btn-hover-bg: var(--es-ok-soft);
    --bs-btn-hover-border-color: var(--es-ok);
    --bs-btn-active-color: var(--es-ok);
    --bs-btn-active-bg: var(--es-ok-soft);
    --bs-btn-active-border-color: var(--es-ok);
    --bs-btn-disabled-color: var(--es-ok);
    --bs-btn-disabled-bg: var(--es-surface);
    --bs-btn-disabled-border-color: var(--es-ok-border);
}

.btn-success {
    --bs-btn-color: var(--es-ok-ink);
    --bs-btn-bg: var(--es-ok);
    --bs-btn-border-color: var(--es-ok);
    --bs-btn-hover-color: var(--es-ok-ink);
    --bs-btn-hover-bg: var(--es-ok-strong);
    --bs-btn-hover-border-color: var(--es-ok-strong);
    --bs-btn-active-color: var(--es-ok-ink);
    --bs-btn-active-bg: var(--es-ok-strong);
    --bs-btn-active-border-color: var(--es-ok-strong);
    --bs-btn-disabled-color: var(--es-ok-ink);
    --bs-btn-disabled-bg: var(--es-ok);
    --bs-btn-disabled-border-color: var(--es-ok);
}

/* "Light" meant light-on-dark when every place these sat was dark. With two themes they are the
   high-contrast pair of whatever ground they are on: an ink fill, and an ink outline — which
   inside a dark-pinned panel (.es-dark) is exactly the light button they always were. */
.btn-light {
    --bs-btn-color: var(--es-page);
    --bs-btn-bg: var(--es-ink);
    --bs-btn-border-color: var(--es-ink);
    --bs-btn-hover-color: var(--es-brand-ink);
    --bs-btn-hover-bg: var(--es-brand);
    --bs-btn-hover-border-color: var(--es-brand);
    --bs-btn-active-color: var(--es-brand-ink);
    --bs-btn-active-bg: var(--es-brand-strong);
    --bs-btn-active-border-color: var(--es-brand-strong);
    --bs-btn-disabled-color: var(--es-page);
    --bs-btn-disabled-bg: var(--es-ink);
    --bs-btn-disabled-border-color: var(--es-ink);
}

.btn-outline-light {
    --bs-btn-color: var(--es-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--es-edge);
    --bs-btn-hover-color: var(--es-ink);
    --bs-btn-hover-bg: var(--es-wash-strong);
    --bs-btn-hover-border-color: var(--es-ink);
    --bs-btn-active-color: var(--es-ink);
    --bs-btn-active-bg: var(--es-wash-strong);
    --bs-btn-active-border-color: var(--es-ink);
    --bs-btn-disabled-color: var(--es-ink);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--es-edge);
}

/* A text action. It sits inside a sentence or a row of links, so it keeps the line's own height
   rather than a button's. */
.btn-link {
    --bs-btn-color: var(--es-muted);
    --bs-btn-hover-color: var(--es-brand-strong);
    --bs-btn-active-color: var(--es-brand-strong);
    --bs-btn-disabled-color: var(--es-muted);
    min-height: 0;
    text-decoration: none;
    font-weight: 600;
}

.btn-link:hover {
    text-decoration: underline;
}

.btn:disabled, .btn.disabled {
    box-shadow: none;
}

/* An icon-only button is square at each height (B's .btn-icon). */
.btn-icon {
    width: var(--es-h-btn);
    padding: 0;
}

.btn-sm.btn-icon {
    width: var(--es-h-btn-sm);
}

.btn-lg.btn-icon {
    width: var(--es-h-btn-lg);
    padding: 0;
}

/* ------------------------------------------------------------ dropdown menu (B) */

/*
    A floating list of actions (B's .menu): a --es-r-lg card with a glow edge, 6px inside, rows of
    --es-h-row (36px on a desk, 44 on a touch screen, K12) with a 10px corner. .menu is the class for a menu the redesign draws itself (the user
    menu, a row's actions); Bootstrap's .dropdown-menu gets the same shape below, so the menus
    that exist today match it without a markup change.
*/
.menu,
.dropdown-menu {
    min-width: 14rem;
    padding: 6px;
    border-radius: var(--es-r-lg);
}

.menu {
    margin: 0;
    list-style: none;
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    box-shadow: var(--es-menu-shadow);
    color: var(--es-body);
}

.menu__item,
.dropdown-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    min-height: var(--es-h-row);
    padding: .375rem .625rem;
    border: 0;
    border-radius: var(--es-r-sm);
    background: transparent;
    color: var(--es-body);
    font: inherit;
    font-size: .875rem;
    font-weight: 550;
    text-align: left;
    text-decoration: none;
}

.menu__item svg,
.dropdown-item svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--es-muted);
}

.menu__item:hover,
.menu__item.is-active {
    background: var(--es-fill);
    color: var(--es-ink);
}

.menu__item--danger,
.menu__item--danger svg {
    color: var(--es-bad);
}

.menu__sep {
    height: 1px;
    margin: 6px 4px;
    background: var(--es-line);
}

/* C's spaced capitals over a group of rows ("Hesabım", "Keşfet"): the user menu and the phone's
   drawer (jobs 3.2, 3.3). Often an h2 in the drawer, so the heading face is undone here. */
.menu__group {
    margin: 0;
    padding: 8px 10px 4px;
    color: var(--es-faint);
    font-family: var(--es-font-body);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* --------------------------------------------------------- segmented control (B) */

/*
    Two to four mutually exclusive choices in one capsule (B's .seg): a view switch such as
    Ajanda / Liste. Each option is a link or a button; the chosen one carries .is-active or
    aria-pressed/aria-current, and lifts onto the surface. The theme picker draws the same shape
    under its own name (.theme-seg).
*/
.seg {
    display: inline-flex;
    gap: 2px;
    max-width: 100%;
    padding: 4px;
    border-radius: var(--es-r-pill);
    background: var(--es-fill-2);
}

.seg__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: var(--es-h-btn-sm);
    padding: 0 .875rem;
    border: 0;
    border-radius: var(--es-r-pill);
    background: transparent;
    color: var(--es-muted);
    font: inherit;
    font-size: var(--es-fs-sm);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.seg__option svg {
    width: 16px;
    height: 16px;
}

.seg__option:hover {
    color: var(--es-ink);
}

.seg__option.is-active,
.seg__option[aria-pressed="true"],
.seg__option[aria-current] {
    background: var(--es-surface);
    color: var(--es-ink);
    box-shadow: var(--es-shadow-1), inset 0 0 0 1px var(--es-glow-line);
}

.seg__option:focus-visible {
    border-radius: var(--es-r-pill);
}

@media (pointer: coarse) {
    .seg__option {
        min-height: 44px;
    }
}

/* ------------------------------------------------------------------ switch (B) */

/*
    An on/off choice drawn as B's track and knob, on a real checkbox
    (<input type="checkbox" class="switch" role="switch">), so it posts, takes focus and works
    with script off. The knob is a background gradient rather than a pseudo-element, which an
    input is not guaranteed to render. Bootstrap's .form-switch stays for the forms that use it.
    Where flipping it is the act itself ("Profilim"'s visibility rows, plan job 6.15) it is a
    submit button with role="switch" and aria-checked instead, drawn the same.
*/
.switch {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 44px;
    height: 26px;
    margin: 0;
    border: 0;
    border-radius: var(--es-r-pill);
    background:
        radial-gradient(circle at 13px 50%, var(--es-paper) 0 9px, transparent 9.5px),
        var(--es-edge);
    cursor: pointer;
    vertical-align: middle;
    transition: background-color .15s ease;
}

.switch:checked,
.switch[aria-checked="true"] {
    background:
        radial-gradient(circle at 31px 50%, var(--es-paper) 0 9px, transparent 9.5px),
        var(--es-brand);
}

.switch:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
    border-radius: var(--es-r-pill);
}

.switch:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* -------------------------------------------------------------------- forms */

.form-label {
    font-weight: 600;
    font-size: .875rem;
    color: var(--es-ink);
    margin-bottom: .35rem;
}

/* The one required-field star (UIhataları 67). RequiredLabelTagHelper appends it to the label of
   every field the server refuses empty, and to labels told so with es-required; it replaces the
   six per-form star classes. aria-hidden: the control's aria-required says it to a screen reader. */
.form-label__req {
    margin-inline-start: .2em;
    color: var(--es-bad);
    font-weight: 700;
}

/* "* zorunlu alan" (Views/Shared/_RequiredLegend): one quiet line at the top of a form with
   several fields. In a card head (org settings, speaker, sponsor, team member) it is a flex item
   beside the title, so it carries no margin of its own there. */
.form-legend {
    margin: 0 0 var(--es-space-3);
    color: var(--es-faint);
    font-size: var(--es-fs-xs);
    line-height: 1.4;
}

.org-set__head > .form-legend,
.speaker-edit__head > .form-legend,
.sponsor-form__head > .form-legend,
.member-edit__head > .form-legend {
    margin: 0;
}

/* The key in a grid form takes its own full row (UIhataları 67, T5); the grid's gap spaces it. */
.esk-pick__form > .form-legend,
.evsp-attach__form > .form-legend {
    grid-column: 1 / -1;
    margin: 0;
}

.ann-form > .form-legend {
    margin: 0;
}

/* "Yayın için" beside a label (the event form's category and venue): required to publish, not to
   save, so a quiet tag rather than the star. A small pill, kept on the label's line. */
.form-label__tag.pill {
    min-height: 0;
    margin-inline-start: var(--es-space-2);
    padding: .05rem .5rem;
    font-size: var(--es-fs-xs);
    font-weight: 600;
    vertical-align: middle;
}

/*
    B's filled field (plan job 2.5): 42px on a desk and 44 on a touch screen (K12), a 12px corner,
    a quiet fill that turns to the surface on focus. Its text is 16px on a phone
    (--es-fs-field), where iOS would zoom the page in on focus into anything smaller. The edge stays --es-edge rather than B's transparent one: a field's own edge has to
    reach 3:1 so somebody can see where it starts (§4.5, plan job 2.3) — --es-line-strong was
    1.3:1 on paper and 1.6:1 on ink, and a fill alone is about 1.1:1.
*/
.form-control, .form-select {
    border: 1px solid var(--es-edge);
    border-radius: var(--es-r-input);
    padding: .5rem .875rem;
    font-size: var(--es-fs-field);
    line-height: 1.45;
    color: var(--es-ink);
    background-color: var(--es-fill);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* A textarea is sized by its rows attribute; a height meant for one line would stretch it. */
.form-control:not(textarea),
.form-select {
    min-height: var(--es-h-field);
}

.form-select {
    padding-right: 2.4rem;
    background-position: right .875rem center;
}

.form-control::placeholder {
    color: var(--es-faint);
}

.form-control:focus, .form-select:focus {
    background-color: var(--es-surface);
    border-color: var(--es-brand);
    box-shadow: 0 0 0 4px var(--es-ring);
    color: var(--es-ink);
}

/* The read-only e-mail field and the like. Still legible: a disabled control that cannot be read
   is no better than a missing one, so Bootstrap's fade is undone. */
.form-control:disabled, .form-select:disabled,
.form-control[readonly] {
    background-color: var(--es-fill-2);
    border-color: var(--es-line-strong);
    color: var(--es-muted);
    opacity: 1;
}

.form-control-sm,
.form-select-sm {
    padding: .3rem .7rem;
    font-size: var(--es-fs-sm);
    border-radius: var(--es-r-sm);
}

/* A small field is a filter in a toolbar; on a phone or a tablet it still must not trigger iOS's
   zoom on focus. */
@media (max-width: 767.98px), (pointer: coarse) {
    .form-control-sm,
    .form-select-sm {
        font-size: var(--es-fs-field);
    }
}

.form-control-sm:not(textarea),
.form-select-sm {
    min-height: var(--es-h-field-sm);
}

.form-select-sm {
    padding-right: 2.2rem;
    background-position: right .75rem center;
}

/* Chrome paints the file button from --bs-body-bg; it is a soft button here like any other. */
.form-control[type="file"]::file-selector-button {
    background: var(--es-fill-2);
    color: var(--es-ink);
    border-color: var(--es-line-strong);
    font-weight: 600;
}

.form-text {
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
    margin-top: .3rem;
}

.form-check-input {
    border-color: var(--es-edge);
    background-color: var(--es-surface);
    width: 1.15em;
    height: 1.15em;
    margin-top: .2em;
}

.form-check-input[type="checkbox"] {
    border-radius: var(--es-r-xs);
}

.form-check-input:checked {
    background-color: var(--es-brand);
    border-color: var(--es-brand);
}

.form-check-input:focus {
    border-color: var(--es-brand);
    box-shadow: 0 0 0 3px var(--es-ring);
}

.form-check-label {
    font-size: var(--es-fs-body);
    color: var(--es-body);
}

/*
    A tick box is a --es-h-row row: 36px on a desk, 44px on a touch screen (design.md §5.3, K12).
    Bootstrap leaves the control at about 16px, the one target on a form a thumb misses. Formerly the dark shell's rule; it now holds for every form.
    Two classes deep so it outranks Bootstrap's own floated layout; a component that lays out its
    own box (.apply-card, the speaker picker) still wins by coming later.
*/
.form-check:not(.form-check-inline) {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: var(--es-h-row);
    padding-left: 0;
}

.form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--es-h-row);
    padding-left: 0;
}

.form-check .form-check-input {
    float: none;
    margin: 0;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

.form-check:not(.form-check-inline) {
    flex-wrap: wrap;
}

.form-check:not(.form-check-inline) > .form-check-label {
    flex: 1 1 0;
    min-width: 0;
}

.form-check .form-check-label {
    margin: 0;
}

/* A hint or a validation message under a tick box takes its own line, indented under the label,
   instead of being squeezed into the row beside it. */
.form-check:not(.form-check-inline) > :not(.form-check-input, .form-check-label) {
    flex-basis: 100%;
    margin-top: 0;
    padding-left: 1.85rem;
}

/* A switch keeps its track's proportions under the square size above. */
.form-switch .form-check-input {
    width: 2.35rem;
    border-radius: 2em;
}

/* The box sits on the label's first line, not halfway down a two-line label (UIhataları 81). A
   one-line row stays --es-h-row tall and centred because the padding, not min-height, makes up
   the difference. Inside @supports: a browser without the lh unit keeps the centred row above. */
@supports (height: 1lh) {
    .form-check:not(.form-check-inline) {
        align-items: flex-start;
        padding-block: max(0px, calc((var(--es-h-row) - 1lh) / 2));
    }

    .form-check:not(.form-check-inline) > .form-check-input {
        margin-top: calc((1lh - 1.25rem) / 2);
    }
}

.input-group-text {
    background: var(--es-fill-2);
    border-color: var(--es-edge);
    color: var(--es-muted);
    font-size: .875rem;
    border-radius: var(--es-r-input);
}

/* A validation message under a field. Red text on its own disappears into a busy form, so the
   invalid field is outlined too. */
.text-danger {
    color: var(--es-bad) !important;
}

/* 14px at 600 (plan job 2.3): at .83rem and 550 the red line under a field was the first thing
   to blur on ink. */
.field-validation-error {
    display: inline-block;
    margin-top: .3rem;
    font-size: .875rem;
    font-weight: 600;
}

.input-validation-error {
    border-color: var(--es-bad) !important;
}

.input-validation-error:focus {
    box-shadow: 0 0 0 3px var(--es-bad-ring) !important;
}

/* A refused field is brought to the person (DD-46, AD-42): site.js scrolls it in and shakes it
   once, whoever refused the form. The shake is a short, damped sideways nudge — enough to catch
   the eye, never enough to move the layout around it. */
@keyframes es-shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

.is-shaking {
    animation: es-shake var(--es-dur-slow) var(--es-ease);
}

/* Centred by script, but a browser that ignores "center" (or a field the person tabs to) still
   stops clear of the sticky bars. */
.input-validation-error,
.is-invalid,
[aria-invalid="true"] {
    scroll-margin-top: calc(var(--es-bar-h) + var(--es-space-6));
}

/* The plugin classes only the input; a checkbox row (the legal consent box) is red through its
   group, which site.js marks is-invalid. */
.form-check.is-invalid .form-check-input {
    border-color: var(--es-bad);
}

.form-check.is-invalid .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--es-bad-ring);
}

/* A form's error summary is drawn as the error page message (.form-errors, "page message"
   below, plan job 4.2); an empty one stays out of the way until the browser's check fills it. */
.validation-summary-valid {
    display: none;
}

/* Every form ends with one action row, so "save" is always in the same place. */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding-top: .25rem;
}

/*
    A moment, entered as two fields.

    One datetime-local control makes the browser render a cramped composite widget whose date and
    time halves are hard to tell apart and harder to tab between. A date input beside a time input
    is the same value in two controls a person can aim at — and it lets the date carry the event's
    own min/max while the time gets the picker below.
*/
/* Each half wraps under the other once the column cannot show both whole — the session form's
   side column is narrowest between 992 and 1200px, where a fixed split cut the time to "1:". */
.datetime-field {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: stretch;
}

.datetime-field > .form-control[type="date"] {
    flex: 1 1 10rem;
    min-width: 0;
}

.time-field {
    position: relative;
    flex: 1 1 8.5rem;
    min-width: 0;
    display: flex;
}

.time-field .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* The picker button only works with site.js, which marks the field .time-field--enhanced once it
   has wired the button up — and only with a fine pointer on a wide screen (plan job 4.12). Until
   then, with script off, or on a phone, the button stays hidden and the browser's own clock
   inside the input is the picker, so the field never shows a dead control. */
.time-field--enhanced .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Chrome puts its own clock inside a time input. Ours is right beside it, and two clock icons
   in a row read as two different controls. */
.time-field--enhanced .form-control::-webkit-calendar-picker-indicator {
    display: none;
}

.time-field__toggle {
    display: none;
}

.time-field--enhanced .time-field__toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    border: 1px solid var(--es-edge);
    border-left: 0;
    border-radius: 0 var(--es-r-input) var(--es-r-input) 0;
    background: var(--es-fill-2);
    color: var(--es-muted);
    transition: color .12s ease, background-color .12s ease;
}

.time-field__toggle:hover:not(:disabled) {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
}

.time-field__toggle:disabled {
    background: var(--es-page);
    color: var(--es-faint);
}

.time-field__toggle svg {
    width: 17px;
    height: 17px;
}

/* Open, the field and its button take the ember state together, so the grid below plainly
   belongs to this field and not to its neighbour (popups-TimePicker-B). */
.time-field.is-open .form-control {
    border-color: var(--es-brand);
}

.time-field.is-open .time-field__toggle {
    border-color: var(--es-brand);
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

/*
    The time picker (plan job 4.12, popups-TimePicker-B + -C): one row per hour, its four quarters
    beside it, because a programme is written in quarter hours. The head names the event's hours on
    the chosen day; the quarters outside them are faded and refused (design -C), since the server
    refuses a session outside its event (business rule 4). Arrows move a quarter or an hour.
    Typing in the field still takes any whole minute (§34 T39).
*/
.time-field__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + .5rem);
    right: 0;
    width: 23.5rem;
    max-width: calc(100vw - 2rem);
    padding: .85rem;
    background: var(--es-surface);
    color: var(--es-body);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    box-shadow: var(--es-menu-shadow);
}

.time-field__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 0 .2rem .65rem;
}

.time-field__title {
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 700;
}

.time-field__window {
    padding: .15rem .65rem;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Positioned so a row's offsetTop is measured from the grid: site.js scrolls the grid, never the
   page, to keep the focused quarter in view. */
.time-field__grid {
    position: relative;
    display: grid;
    gap: .35rem;
    max-height: 15.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .15rem;
}

.time-field__row {
    display: grid;
    grid-template-columns: 2.4rem repeat(4, minmax(0, 1fr));
    gap: .35rem;
    align-items: center;
}

.time-field__hour {
    color: var(--es-faint);
    font-family: var(--es-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.time-field__row.is-off .time-field__hour {
    opacity: .45;
}

.time-field__option {
    height: 38px;
    border: 0;
    border-radius: var(--es-r-sm);
    background: var(--es-fill);
    color: var(--es-body);
    font-size: .84rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--es-dur-fast) ease, color var(--es-dur-fast) ease;
}

/* Not the chosen cell: hovering it must not take its ember fill away. */
.time-field__option:hover:not(.is-off):not(.is-selected) {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
}

/* B draws the keyboard's place as an ink ring inside the cell, which stays visible on the ember
   fill of the chosen one. */
.time-field__option:focus-visible {
    outline: 2px solid var(--es-ink);
    outline-offset: -2px;
}

.time-field__option.is-selected {
    background: var(--es-brand);
    color: var(--es-brand-ink);
    box-shadow: 0 8px 18px -8px var(--es-brand-shadow);
}

.time-field__option.is-off {
    opacity: .4;
    cursor: not-allowed;
}

.time-field__keys {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    padding: .7rem .2rem 0;
    color: var(--es-faint);
    font-size: .72rem;
}

/* Bootstrap draws <kbd> as a dark slab; here it is the header's quiet key cap (.site-search__key). */
.time-field__keys kbd {
    margin-right: .2rem;
    padding: 1px 6px;
    border: 1px solid var(--es-line-strong);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--es-surface);
    color: var(--es-muted);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .7rem;
    line-height: 1.4;
}

/* Round durations off the start time, so the end is one click rather than four fields. The
   buttons are B's segmented control (.seg), allowed to wrap in the narrow column; the status
   line beside them says what a click set (plan job 4.12). */
.quick-set {
    container: quick-set / inline-size;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .6rem;
    margin-top: .6rem;
}

.quick-set__label {
    color: var(--es-muted);
    font-size: .82rem;
    font-weight: 600;
}

.quick-set__options {
    flex-wrap: wrap;
    border-radius: var(--es-r-lg);
}

/* Wrapped in a narrow column, the buttons share each row rather than leave one alone on it. */
.quick-set__options > .seg__option {
    flex: 1 1 auto;
}

/* Too narrow for the five on one row (a phone, 390px): a full-width row of three and two, never
   four and one left alone. */
@container quick-set (max-width: 26rem) {
    .quick-set__options {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .quick-set__options > .seg__option {
        padding: 0 .5rem;
    }
}

.quick-set__status:empty {
    display: none;
}

/*
    The browser's own date and time boxes (B-30: the event form keeps datetime-local, no custom
    calendar). Their parts follow the page's color-scheme already; what is left is the B look —
    tabular figures so the digits do not jump, quieter separators, and the calendar icon softened
    to the theme's muted ink with an ember hover. (Chrome no longer lets a page restyle the
    highlighted part being typed; it stays the system's selection colour.)
*/
.form-control[type="date"],
.form-control[type="time"],
.form-control[type="datetime-local"] {
    font-variant-numeric: tabular-nums;
}

.form-control::-webkit-calendar-picker-indicator {
    padding: 4px;
    border-radius: var(--es-r-xs);
    opacity: .65;
    cursor: pointer;
}

.form-control::-webkit-calendar-picker-indicator:hover {
    background-color: var(--es-brand-soft);
    opacity: 1;
}

.form-control::-webkit-datetime-edit-text {
    color: var(--es-faint);
}

/* ------------------------------------------------------------------- alerts */

.alert {
    border-radius: var(--es-r);
    border-width: 1px;
    padding: var(--es-space-3) var(--es-space-4);
    font-size: .875rem;
    display: flex;
    align-items: flex-start;
    gap: var(--es-space-3);
}

.alert svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: .15rem;
}

/*
    News is neutral (DD-16): a surface panel with the text in the page's own colours, and only the
    icon in the status hue. A green or blue slab would compete with the error and warning boxes
    below, which are the alerts that have to be noticed. This was the dark shell's rule; with one
    look in both themes it is simply the rule.
*/
.alert-info,
.alert-primary,
.alert-success,
.alert-secondary {
    background: var(--es-surface);
    border-color: var(--es-line-strong);
    color: var(--es-ink);
}

.alert-info > svg,
.alert-primary > svg {
    color: var(--es-info);
}

.alert-success > svg {
    color: var(--es-ok);
}

/*
    The error and the warning are boxes, not tinted text (plan job 2.3; tokens at the top): a 16%
    field, a 40% edge, a stripe down the left and the status icon, the text at 600 and never
    under 14px. Every inline note that tells somebody something went wrong or needs them shares
    this look — the alert here, the invitation page's bad and warning notes beside their own
    components — and a later shell-scoped rule must not neutralise it. The page message and the
    form's error summary have their own shape since plan job 4.2 (below).
*/
.alert-warning,
.alert-danger {
    border: 1px solid;
    border-left-width: 4px;
    font-size: .915rem;
    font-weight: 600;
}

.alert-danger {
    background: var(--es-bad-box);
    border-color: var(--es-bad-box-line);
    border-left-color: var(--es-bad);
    color: var(--es-bad-box-text);
}

.alert-warning {
    background: var(--es-warn-box);
    border-color: var(--es-warn-box-line);
    border-left-color: var(--es-warn);
    color: var(--es-warn-box-text);
}

/* The icon carries the status hue; the text beside it carries the stronger box text. */
.alert-danger > svg {
    color: var(--es-bad);
}

.alert-warning > svg {
    color: var(--es-warn);
}

/* A box rendered without an icon of its own gets the warning glyph of _Icon.cshtml drawn by CSS,
   as a mask over the status colour (a data: image, which the content security policy allows, §23). */
.alert-danger:not(:has(> svg))::before,
.alert-warning:not(:has(> svg))::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: .12rem;
    background-color: var(--es-bad);
    -webkit-mask: var(--es-warning-glyph) center / contain no-repeat;
    mask: var(--es-warning-glyph) center / contain no-repeat;
}

.alert-warning:not(:has(> svg))::before {
    background-color: var(--es-warn);
}

/* ------------------------------------------------------------ page message (plan job 4.2)

    The one line a redirect carries to the next page (_StatusMessage, StatusTone), in its tone:
    design popups-Feedback-B. A round badge in the tone's solid colour carries the glyph, the
    field is the tone's wash, the message is in ink at 600 and an optional second line in muted
    type says what happens next. Error and warning take the stronger 16% field of DD-16's
    error/warning boxes, so they still out-shout news; success and news take the faint wash. On
    the dark side C's glow of the tone sits behind the badge (the @supports block below). Each
    tone only sets the four --flash-* values; the shape is shared.

    .form-errors is the form's error summary drawn the same way, in the error tone
    (FormErrorSummaryTagHelper): "Formda N alan düzeltilmeli." over the form-level messages.
    !important on its colour because .text-danger, which the views put on it, carries one.
*/
.flash,
.form-errors.validation-summary-errors {
    --flash-hue: var(--es-info);
    --flash-on: var(--es-info-ink);
    --flash-field: var(--es-info-soft);
    --flash-edge: var(--es-info-border);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--es-space-3);
    margin-bottom: var(--es-page-gap);
    padding: .5rem .625rem .5rem .5rem;
    border: 1px solid var(--flash-edge);
    border-radius: var(--es-r-lg);
    background-color: var(--flash-field);
    color: var(--es-ink) !important;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
}

.flash--success {
    --flash-hue: var(--es-ok);
    --flash-on: var(--es-ok-ink);
    --flash-field: var(--es-ok-soft);
    --flash-edge: var(--es-ok-border);
}

.flash--warning {
    --flash-hue: var(--es-warn);
    --flash-on: var(--es-warn-ink);
    --flash-field: var(--es-warn-box);
    --flash-edge: var(--es-warn-box-line);
}

.flash--error,
.form-errors.validation-summary-errors {
    --flash-hue: var(--es-bad);
    --flash-on: var(--es-bad-ink);
    --flash-field: var(--es-bad-box);
    --flash-edge: var(--es-bad-box-line);
}

.flash__icon,
.form-errors__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--flash-hue);
    color: var(--flash-on);
}

.flash__icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

/* The summary's markup comes from a tag helper, which cannot render _Icon: the glyph is a mask. */
.form-errors__icon::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: var(--flash-on);
    -webkit-mask: var(--es-error-glyph) center / contain no-repeat;
    mask: var(--es-error-glyph) center / contain no-repeat;
}

.flash__body,
.form-errors__body {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The badge stays beside the first line when the message wraps (UIhataları 81): the row aligns
   to the top and the text is pushed down by half the difference between badge and line, so a
   one-line message still reads centred on the badge. Without the lh unit the row stays centred. */
@supports (height: 1lh) {
    .flash,
    .form-errors.validation-summary-errors {
        align-items: flex-start;
    }

    .flash__body,
    .form-errors__body {
        padding-top: max(0px, calc((2rem - 1lh) / 2));
    }
}

.flash__text,
.form-errors__count {
    margin: 0;
}

.flash__detail {
    margin: .15rem 0 0;
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
    font-weight: 550;
}

.flash__close.btn {
    flex: 0 0 auto;
    border-color: transparent;
    border-radius: 50%;
    background: var(--es-surface);
    color: var(--es-muted);
}

.flash__close.btn:hover {
    color: var(--es-ink);
}

/* Six portal forms put the summary straight into <form class="row g-4">, where Bootstrap's gutter
   is the child's padding — which the box above replaces, so the border ran half a gutter past the
   cards on both sides. The gutter comes back as margin, and the width gives it room. */
.row > .form-errors.validation-summary-errors {
    width: calc(100% - var(--bs-gutter-x));
    margin-inline: calc(var(--bs-gutter-x) * .5);
}

/* The form-level messages under the count, each its own line; the badge is the marker. */
.form-errors ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 550;
}

.form-errors__count:not([hidden]) + ul {
    margin-top: .2rem;
}

/* Nothing to list (only field errors, or the framework's empty placeholder item): no line. */
.form-errors ul:empty,
.form-errors ul > li[style*="none"] {
    display: none;
}

/* The dark side's glow of the tone behind the badge (design popups-Feedback-C, the ember edge of
   DD-24 in the message's own colour). light-dark() leaves the light side flat. */
@supports (color: light-dark(#000, #fff)) {
    .flash,
    .form-errors.validation-summary-errors {
        background-image: radial-gradient(
            11rem 6rem at 1.25rem 50%,
            light-dark(transparent, color-mix(in srgb, var(--flash-hue) 20%, transparent)),
            transparent 70%);
    }
}

/* Where the discovery shell puts it: a reading column above the page. */
.flash--page {
    max-width: 44rem;
    margin: 1rem auto 0;
}

/* The page message's region (UIhataları 75): every layout draws it, empty or not, so a message an
   in-place action brings back (site.js, the swap module) has a place to go. It adds no box of its
   own, so the message still lays out as a child of the shell's <main>. */
.flash-slot {
    display: contents;
}

/* ------------------------------------------------------------------- toast (plan job 4.2)

    A short note for an action that happens in place and leaves nothing to look at — "Bağlantı
    kopyalandı" — at the bottom centre (_Toasts, design popups-Feedback-B with C's time bar). It
    is paper in both themes, as in both designs (a white pill with a deep shadow over the light
    page, a light pill over the dark stage), so it is pinned to the light tokens. It never covers
    the page for long: a few seconds, and a close button for whoever wants it gone sooner.
*/
.es-toasts {
    position: fixed;
    left: 50%;
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    z-index: 1090;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    width: max-content;
    max-width: calc(100vw - 2rem);
    transform: translateX(-50%);
    pointer-events: none;
}

.es-toast {
    color-scheme: light;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    max-width: 100%;
    padding: .45rem .5rem .45rem .45rem;
    border-radius: var(--es-r-pill);
    background: var(--es-surface);
    color: var(--es-ink);
    box-shadow: 0 30px 60px -20px var(--es-photo-shadow), 0 0 0 1px var(--es-line);
    font-size: .92rem;
    font-weight: 700;
    pointer-events: auto;
    animation: es-toast-in var(--es-dur-slow) var(--es-ease) both;
}

.es-toast.is-leaving {
    animation: es-toast-out var(--es-dur) ease-in both;
}

.es-toast__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--es-ok);
    color: var(--es-ok-ink);
}

.es-toast--info .es-toast__icon {
    background: var(--es-info);
    color: var(--es-info-ink);
}

.es-toast--warning .es-toast__icon {
    background: var(--es-warn);
    color: var(--es-warn-ink);
}

.es-toast--error .es-toast__icon {
    background: var(--es-bad);
    color: var(--es-bad-ink);
}

.es-toast__icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.es-toast__text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.es-toast__close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--es-fill);
    color: var(--es-muted);
}

.es-toast__close:hover {
    color: var(--es-ink);
}

.es-toast__close svg {
    width: 14px;
    height: 14px;
}

/* C's time bar: how long the toast stays, draining along its bottom edge. Decoration only — it
   pauses with the timer (site.js sets .is-paused) and is switched off under reduced motion. */
.es-toast__bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--es-ok);
    transform-origin: left center;
    animation: es-toast-drain var(--es-toast-life, 4s) linear both;
}

.es-toast--info .es-toast__bar {
    background: var(--es-info);
}

.es-toast--warning .es-toast__bar {
    background: var(--es-warn);
}

.es-toast--error .es-toast__bar {
    background: var(--es-bad);
}

.es-toast.is-paused .es-toast__bar {
    animation-play-state: paused;
}

@keyframes es-toast-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.96);
    }
}

@keyframes es-toast-out {
    to {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes es-toast-drain {
    to {
        transform: scaleX(0);
    }
}

/* A thumb needs 44px (§2.5): the close button grows on a touch screen. */
@media (pointer: coarse) {
    .es-toast__close {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* ------------------------------------------------------------------- tables */

/*
    A table lives inside a card: .table-card draws the border and the corner, the table itself
    only draws rows. The horizontal scroll on a narrow screen belongs to the wrapper, so the
    page body never scrolls sideways.
*/
.table-card {
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    box-shadow: var(--es-card-shadow);
    overflow: hidden;
}

/* position: relative, so a visually-hidden label inside a row (an action button's "… için") is
   placed inside the scrolling box; anchored to the page it escaped the box's clip and widened a
   phone page by the table's hidden width (the followers' invitations, 163px). */
.table-card__scroll {
    position: relative;
    overflow-x: auto;
}

.table-card .table {
    margin: 0;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--es-body);
    color: var(--es-body);
    font-size: .875rem;
    vertical-align: middle;
    border-color: var(--es-line);
}

/* B's table head: sentence case at 12.5px in the muted tone on a raised strip, rather than the
   shouted small capitals it replaced — the column names are Turkish words, not codes. */
.table > thead th {
    background: var(--es-raised);
    color: var(--es-muted);
    font-size: var(--es-fs-xs);
    font-weight: 650;
    letter-spacing: 0;
    padding: .625rem var(--es-space-4);
    border-bottom: 1px solid var(--es-line);
    white-space: nowrap;
}

.table > tbody td {
    padding: .75rem var(--es-space-4);
    border-bottom: 1px solid var(--es-line);
}

.table > tbody tr:last-child td {
    border-bottom: 0;
}

.table td .text-muted.small,
.table td div.small {
    line-height: 1.35;
}

.table-sm > thead th,
.table-sm > tbody td {
    padding: .55rem .85rem;
}

/*
    The compact variant (plan job 2.5's risk note): the portal and the admin area are work
    surfaces with long lists, and B's roomy rows and 22px corner would turn a registration list
    into a scroll. Inside the app shell every table card is compact by itself; elsewhere a view
    asks for it with .table-card--compact.
*/
.app-main .table-card,
.table-card--compact {
    border-radius: var(--es-r);
}

.app-main .table > thead th,
.table-card--compact .table > thead th {
    padding: .5rem .875rem;
}

.app-main .table > tbody td,
.table-card--compact .table > tbody td {
    padding: .5rem .875rem;
}

/* A row's own buttons are the small size in a dense table, whatever the view asked for. */
.app-main .table .btn:not(.btn-link),
.table-card--compact .table .btn:not(.btn-link) {
    min-height: var(--es-h-btn-sm);
    padding: .25rem .75rem;
    font-size: var(--es-fs-sm);
    /* A two-word label ("İptal et") broke onto two lines in a narrow actions column and made the
       whole row tall; the column grows instead, and .table-card__scroll takes the overflow. */
    white-space: nowrap;
}

.cell-num {
    font-variant-numeric: tabular-nums;
}

/* The paging strip that closes a table card. */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-space-3) var(--es-space-4);
    flex-wrap: wrap;
    padding: .625rem var(--es-space-4);
    border-top: 1px solid var(--es-line);
    background: var(--es-raised);
    font-size: var(--es-fs-sm);
    font-weight: 500;
    color: var(--es-muted);
}

/*
    The numbered pages (plan job 4.6, B's pager, _Pager.cshtml): round 32px steps in one soft
    capsule, the current page in ink — the reverse of the page, so it reads in both themes without
    a colour of its own. A missing step (no page before the first) stays in place, faded, so the
    numbers never shift under the pointer.
*/
.pager__pages {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
}

.pager__num,
.pager__step,
.pager__gap,
.pager__where {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--es-r-pill);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--es-muted);
    text-decoration: none;
}

.pager__step {
    padding: 0;
}

.pager__step svg {
    width: 16px;
    height: 16px;
}

a.pager__num:hover,
a.pager__step:hover {
    background: var(--es-surface);
    color: var(--es-ink);
}

.pager__num[aria-current] {
    background: var(--es-ink);
    color: var(--es-page);
}

.pager__step[aria-disabled] {
    opacity: .4;
}

.pager__gap {
    min-width: 20px;
    padding: 0;
}

/* The phone's "3 / 20" between the arrows; the numbers take its place from 576px. */
.pager__where {
    display: none;
    color: var(--es-ink);
}

@media (max-width: 575.98px) {
    .pager__num,
    .pager__gap {
        display: none;
    }

    .pager__where {
        display: inline-grid;
    }
}

/* A pager is a phone's main way through a long list: every step is a full touch target there
   (design.md §5.3), even in the compact table. */
@media (pointer: coarse) {
    .pager__num,
    .pager__step,
    .pager__where {
        min-width: 44px;
        height: 44px;
    }
}

/* ------------------------------------------------------------ review panel */

/*
    A list with its selected row's details beside it (plan job 4.6, admin1-Requests-C's
    inspector; <review-panel>, ReviewPanelTagHelper). The selection is the address (?secili=),
    so this is layout only: from 1200px the panel stands beside the list and stays in view while
    the list scrolls; below it, it drops under the list, where the row's #inceleme link scrolls
    to it. Without a panel in it the layout is the list alone.
*/
.review-layout {
    display: grid;
    gap: 20px;
    align-items: start;
}

.review-layout > * {
    min-width: 0;
}

.review-panel {
    padding: 22px;
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    box-shadow: var(--es-card-shadow);
    /* Clear of the sticky top bar when the fragment jump lands on it. */
    scroll-margin-top: 88px;
}

.review-panel:focus-visible {
    outline-offset: 2px;
}

.review-panel__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.review-panel__titles {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.review-panel__title {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.review-panel__sub {
    margin: 0;
    font-size: .85rem;
    color: var(--es-muted);
    overflow-wrap: anywhere;
}

.review-panel__close {
    flex: 0 0 auto;
}

.review-panel__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 18px;
}

.review-panel__body .detail-list {
    margin: 0;
}

/* Nothing selected: one line of guidance on a wide screen, nothing under the list on a narrow
   one, where it would only push the page down. */
.review-panel--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 22px;
    background: var(--es-fill);
    border: 1px dashed var(--es-line-strong);
    box-shadow: none;
    text-align: center;
}

.review-panel__hint {
    margin: 0;
    max-width: 24ch;
    font-size: .9rem;
    color: var(--es-muted);
}

/* The row the panel shows, marked in the list: the ember tint with a bar on its leading edge. */
.table > tbody > tr.is-selected > td {
    background: var(--es-brand-soft);
}

.table > tbody > tr.is-selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--es-brand);
}

@media (min-width: 1200px) {
    .review-layout:has(> .review-panel) {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    }

    /* Beside the list the panel is sticky at 92px. A fragment jump (#inceleme, script off) lands it
       there, with the list's top beside it; the old 100vh margin clamped every jump to the top of
       the page (UIhataları 46, 55). With script the list is swapped in place and nothing jumps. */
    .review-panel {
        position: sticky;
        top: 92px;
        max-height: calc(100vh - 108px);
        overflow-y: auto;
        scroll-margin-top: 92px;
    }
}

@media (max-width: 1199.98px) {
    .review-panel--empty {
        display: none;
    }
}

/* A region being fetched in place (site.js, the swap module, UIhataları 75): dimmed after a short
   pause, so a quick answer never flickers, and marked busy for the pointer. */
[data-swap-region][aria-busy="true"] {
    opacity: .55;
    cursor: progress;
    transition: opacity var(--es-dur) var(--es-ease) 150ms;
}

/* -------------------------------------------------------- moderation history */

/*
    Who decided what about a record, newest first (plan job 4.6, _ModerationHistory in the admin
    area): a thin line with a ring per decision, each one the action's pill, the time, the actor
    and the reason in a quiet box. The pills carry AuditText's tones, so no colour is chosen here.
*/
.mod-history__title {
    margin: 0 0 12px;
    font-size: 1rem;
}

.mod-history__empty {
    margin: 0;
    font-size: .9rem;
    color: var(--es-muted);
}

.mod-history__list {
    margin: 0 0 0 5px;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--es-line);
}

.mod-history__item {
    position: relative;
    padding: 0 0 16px 18px;
}

.mod-history__item:last-child {
    padding-bottom: 0;
}

.mod-history__item::before {
    content: "";
    position: absolute;
    top: 7px;
    left: -7px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--es-line-strong);
    border-radius: 50%;
    background: var(--es-surface);
}

.mod-history__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.mod-history__time {
    margin-left: auto;
    font-size: .8rem;
    color: var(--es-faint);
    white-space: nowrap;
}

.mod-history__who {
    margin-top: 4px;
    font-size: .85rem;
    color: var(--es-body);
    overflow-wrap: anywhere;
}

.mod-history__kind {
    color: var(--es-muted);
}

.mod-history__reason {
    margin: 6px 0 0;
    padding: 8px 12px;
    border-radius: var(--es-r-sm);
    background: var(--es-fill);
    font-size: .85rem;
    color: var(--es-body);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.mod-history__more {
    display: inline-block;
    margin-top: 12px;
    font-size: .85rem;
}

/* -------------------------------------------------------------- empty state */

/*
    An empty list that does not say what to do next is indistinguishable from a broken one.
    The shape: an icon, one sentence, and the next step if there is one. B's version: no dashed
    edge, a soft filled panel with the 32px corner, the icon in a round box and the title in the
    display face — it reads as a friendly pause, not a missing table.
*/
.empty {
    background: var(--es-fill);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-xl);
    padding: var(--es-space-7) var(--es-space-6);
    text-align: center;
    color: var(--es-muted);
}

.empty__icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--es-brand-soft);
    color: var(--es-brand);
    margin-bottom: var(--es-space-3);
}

.empty__icon svg {
    width: 22px;
    height: 22px;
}

/* An empty state whose icon takes a role colour (site2-Org-B, site2-Profile-B — the ember, the
   ink, the solid ember for three different empties): the .icbox itself, spaced like the icon. */
.empty > .icbox {
    margin-bottom: var(--es-space-3);
}

.empty__title {
    font-family: var(--es-font-display);
    color: var(--es-ink);
    font-weight: 650;
    font-size: var(--es-fs-lg);
    letter-spacing: -.02em;
    line-height: 1.3;
    margin-bottom: .35rem;
}

.empty p {
    margin: 0 auto;
    max-width: 52ch;
    font-size: .875rem;
}

.empty .btn {
    margin-top: var(--es-space-4);
}

/* A line-sized empty state for a section of a page that has other things to say (the event
   page's programme, UIhataları 25): icon beside one or two short lines, not the page-sized box. */
.empty--compact {
    display: flex;
    align-items: center;
    gap: var(--es-space-3);
    padding: var(--es-space-4);
    border-radius: var(--es-r-lg);
    text-align: left;
}

.empty--compact > .icbox {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.empty--compact .empty__title {
    margin-bottom: 0;
    font-size: var(--es-fs-body);
}

.empty--compact p {
    margin: 2px 0 0;
    max-width: none;
    font-size: var(--es-fs-sm);
}

/* --------------------------------------------------------------------- tabs */

/*
    B's pill capsule: the choices sit in one soft-filled pill, the chosen one lifts onto the
    surface. The lift carries the glow edge, so in the dark theme — where the surface is barely
    lighter than the capsule — the chosen tab is still told apart by its ember outline rather
    than by a shade nobody can see.
*/
.tabs {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    background: var(--es-fill);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-pill);
    padding: 3px;
    margin-bottom: var(--es-page-gap);
    width: fit-content;
    max-width: 100%;
}

.tabs a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 34px;
    padding: 0 .875rem;
    border-radius: var(--es-r-pill);
    font-size: .875rem;
    font-weight: 600;
    color: var(--es-muted);
    text-decoration: none;
    white-space: nowrap;
}

.tabs a:hover {
    color: var(--es-ink);
}

.tabs a.is-active {
    background: var(--es-surface);
    color: var(--es-ink);
    box-shadow: var(--es-shadow-1), inset 0 0 0 1px var(--es-glow-line);
}

.tabs a:focus-visible {
    border-radius: var(--es-r-pill);
}

@media (max-width: 767.98px), (pointer: coarse) {
    .tabs a {
        min-height: 44px;
    }
}

/* --------------------------------------------------------------- filter bar */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-2);
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    box-shadow: var(--es-card-shadow);
    padding: var(--es-space-2);
    margin-bottom: var(--es-page-gap);
}

/* A search row is one line of controls, so its fields stand at the button's height rather than
   a form field's. */
.filter-bar .form-control,
.filter-bar .form-select {
    min-width: 12rem;
    min-height: var(--es-h-btn);
}

/* The search field takes the row and its button stays beside it; Bootstrap's width: 100% would
   push the button onto a second line on every screen. A select keeps its own width. */
.filter-bar .form-control {
    flex: 1 1 14rem;
    width: auto;
}

.filter-bar .form-select {
    flex: 0 1 auto;
    width: auto;
}

.filter-bar .form-check {
    margin: 0;
}

/* ------------------------------------------------------------ detail lists */

.detail-list {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) 1fr;
    gap: 0 1.5rem;
    margin: 0;
}

/* An organizer types the website and the contact address; both are single unbreakable tokens
   long enough to overflow the column on a phone, where the overflow is silently clipped. */
.detail-list dd {
    overflow-wrap: anywhere;
}

.detail-list dt {
    padding: .625rem 0;
    color: var(--es-muted);
    font-weight: 550;
    font-size: .875rem;
    border-top: 1px solid var(--es-line);
}

.detail-list dd {
    padding: .625rem 0;
    margin: 0;
    color: var(--es-ink);
    font-weight: 500;
    border-top: 1px solid var(--es-line);
}

.detail-list dt:first-of-type,
.detail-list dt:first-of-type + dd {
    border-top: 0;
}

@media (max-width: 575.98px) {
    .detail-list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .detail-list dd {
        border-top: 0;
        padding-top: 0;
        padding-bottom: .625rem;
    }
}

/* ------------------------------------------------------------- sign-in pages */

/*
    Sign in, register, forgotten password: one narrow column, because there is exactly one thing to
    do on these screens. (.auth on its own also centres the error page's .empty.) Inside the
    account split (below) the column is the form's half of the page itself, so .auth__card draws
    no card of its own — B puts the form straight on the page beside the visual panel (plan job
    3.6, design auth-Login-B).
*/
.auth {
    max-width: 27rem;
    margin: 2rem auto;
}

.auth__title {
    font-size: var(--es-fs-title);
    line-height: 1.12;
    letter-spacing: -.03em;
    margin-bottom: .6rem;
    overflow-wrap: anywhere;
}

.auth__lead {
    color: var(--es-muted);
    font-size: .92rem;
    margin-bottom: 1.4rem;
}

/* -------------------------------------------------------------------- print */

@media print {
    .app-sidebar, .app-topbar, .site-header, .site-footer, .page-head__actions, .pager {
        display: none !important;
    }

    .app-body {
        margin-left: 0;
    }

    .card, .table-card {
        box-shadow: none;
        border-color: var(--es-line-strong);
    }
}

/* ------------------------------------------------------------------ avatars
   The small round picture beside a name on the profile lists (AD-18): a team member's or a
   speaker's portrait, or — square, since logos are rarely faces — a sponsor's mark. The empty
   variant keeps the row aligned when there is no picture yet. */
.avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--es-raised);
}

.avatar--logo {
    border-radius: var(--es-r-sm);
    object-fit: contain;
    background: var(--es-paper);
    border: 1px solid var(--es-line);
}

/* The larger portrait and the two-letter tile of a person without one (sponsor lists, the
   application pages). The team pages draw their own (plan jobs 7.4 and 7.5, further down). */
.avatar--lg {
    width: 3.5rem;
    height: 3.5rem;
}

.avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-weight: 700;
    letter-spacing: .02em;
}

/* A session's line-up on the session list: a small portrait, the name, where the invitation stands. */
.speaker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .35rem;
}

.speaker-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .5rem .15rem .2rem;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-pill);
    background: var(--es-raised);
    font-size: .8rem;
    color: var(--es-body);
}

.speaker-chip__photo {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 999px;
    object-fit: cover;
}

.speaker-chip__status {
    font-size: .68rem;
    padding: .05rem .4rem;
}

/* The sponsor picker on the event form: a tile per pool sponsor, the whole tile toggles the box. */
.ev-pick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
    gap: .6rem .7rem;
    align-items: start;
}

.ev-pick__tile {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .8rem;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r);
    background: var(--es-surface);
    cursor: pointer;
    min-width: 0;
    transition: border-color .12s ease, background-color .12s ease;
}

.ev-pick__tile:hover {
    border-color: var(--es-brand-border);
}

.ev-pick__tile:has(.ev-pick__check:checked) {
    border-color: var(--es-brand);
    background: var(--es-brand-soft);
}

.ev-pick__tile:has(.ev-pick__check:disabled) {
    cursor: default;
}

.ev-pick__check {
    flex: 0 0 auto;
    margin: 0;
}

.ev-pick__logo {
    /* Light in both themes: a white logo tile (--es-paper), so what is drawn on it — a name,
       an initial, a placeholder glyph — takes the light-theme ink. */
    color-scheme: light;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 auto;
    padding: .2rem;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-sm);
    background: var(--es-paper);
    color: var(--es-faint);
}

.ev-pick__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ev-pick__logo svg {
    width: 1.1rem;
    height: 1.1rem;
}

.ev-pick__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    min-width: 0;
}

.ev-pick__name {
    color: var(--es-ink);
    font-weight: 600;
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.ev-pick-empty {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem;
    border: 1px dashed var(--es-line-strong);
    border-radius: var(--es-r);
    color: var(--es-muted);
    font-size: .9rem;
}

.ev-pick-empty svg {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    color: var(--es-faint);
}

/* ------------------------------------------------------------- discovery shell (design.md §6) */

/*
    The discovery shell: the home page, the mode chooser, search, the event and organization
    pages and "Katılımlarım" (design.md §6.1). It is a second layout (_DiscoveryLayout.cshtml),
    not a theme switch on the existing one, because it carries its own header and footer; the
    portal and the admin area keep their sidebar shell. Every shell follows the theme (DD-5 as
    amended), so the shared components (.pill, .empty, the forms, the tables) have one rule each.
    The top bar below and the footer are DD-26 (jobs 3.1, 3.4).

    The card radius is its own name for the showcase cards, but since the B redesign (plan job
    2.5) every card is equally round, so it is simply the large radius.
*/
:root {
    --es-r-card: var(--es-r-lg);
}

/* ------------------------------------------------------- top bar (plan Ek B, job 3.1) */

/*
    _SiteHeader: the name in type, B's pill capsule, C's search field, then the theme picker and
    the account. Drawn in code, not from a canvas (plan §2.1). 64px on a desktop (K12), 60 on a
    phone.

    It rests transparent and lineless at the top of the page and turns to glass, a hairline and —
    on ink — a faint ember glow once the page has moved (html[data-scrolled], site.js). That
    resting look is asked for only where the script that ends it runs (html[data-scroll-watch],
    set by the same script): with script off the bar stays glass, because a transparent bar over
    scrolled text is unreadable.

    The change is eased only under html[data-scroll-ready], which site.js sets a frame after its
    first update: a browser that painted the glass before the script ran would otherwise show it
    fading out at the top of a page that was never scrolled.
*/
.site-header {
    --es-header-h: var(--es-bar-h);
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--es-glass);
    -webkit-backdrop-filter: var(--es-glass-filter);
    backdrop-filter: var(--es-glass-filter);
    border-bottom: 1px solid var(--es-glow-line);
    box-shadow: 0 14px 36px -26px var(--es-header-glow);
}

html[data-scroll-ready] .site-header {
    transition: background-color var(--es-dur) var(--es-ease), border-color var(--es-dur) var(--es-ease),
        box-shadow var(--es-dur) var(--es-ease);
}

html[data-scroll-watch]:not([data-scrolled]) .site-header {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
}

.site-header__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--es-header-h);
    /* The page's own width and gutter (.container below, UIhataları 28): the name and the page's
       first word start on the same line at every width. */
    max-width: calc(var(--es-container) + 2 * var(--es-gutter));
    margin-inline: auto;
    padding-inline: var(--es-gutter);
}

.site-header__brand {
    flex: 0 0 auto;
    margin-right: 10px;
}

/* B's capsule is .seg (plan job 2.5) at the bar's size: button-height pills (40px on a desk, the
   44px touch target under a coarse pointer, K12), the body ink at rest. */
.site-header__nav {
    flex: 0 0 auto;
}

.site-header__nav .seg__option {
    min-height: var(--es-h-btn);
    padding: 0 18px;
    color: var(--es-body);
    font-size: .92rem;
}

/*
    C's search (plan Ek B): a pill with the magnifier on the left and the "/" key on the right,
    260px at rest and 380 while it has the focus, with the ember edge and ring. It may give up
    width to the bar rather than push it off a laptop's screen: the basis is 380 and only the
    max-width moves, so a cramped bar shrinks it instead.
*/
.site-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 380px;
    min-width: 0;
    max-width: 260px;
    height: 44px;
    margin: 0 0 0 auto;
    padding: 0 8px 0 14px;
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-muted);
    transition: max-width var(--es-dur-slow) var(--es-ease), border-color var(--es-dur) ease,
        box-shadow var(--es-dur) ease, background-color var(--es-dur) ease;
}

.site-search:hover {
    border-color: var(--es-edge);
}

.site-search:focus-within {
    max-width: 380px;
    border-color: var(--es-brand);
    background: var(--es-surface);
    box-shadow: 0 0 0 4px var(--es-ring);
}

.site-search__icon {
    flex: 0 0 auto;
    line-height: 0;
}

.site-search__icon svg {
    width: 18px;
    height: 18px;
}

.site-search__field {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--es-ink);
    font: inherit;
    font-size: .875rem;
    text-overflow: ellipsis;
}

.site-search__field::placeholder {
    color: var(--es-muted);
    opacity: 1;
}

/* The pill's ember edge and ring are the focus mark; an outline inside it would be a second. */
.site-search__field:focus,
.site-search__field:focus-visible {
    outline: none;
}

/* The "/" shortcut is site.js's, so its key shows only where that script runs
   (html[data-scroll-watch], set by it): with script off it would promise nothing. */
html:not([data-scroll-watch]) .site-search__key {
    display: none;
}

.site-search__key {
    flex: 0 0 auto;
    padding: 1px 7px;
    border: 1px solid var(--es-line-strong);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--es-surface);
    color: var(--es-faint);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .72rem;
    line-height: 1.4;
}

.site-search:focus-within .site-search__key {
    display: none;
}

.site-header__end {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* A round 44px icon control: the phone's search link, the menu button, and (below) the bell —
   the theme picker's button drawn again, so the row reads as one set. */
.site-header__icon,
.site-header .notify-bell {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r-pill);
    background: transparent;
    color: var(--es-ink);
    cursor: pointer;
    list-style: none;
    transition: background-color var(--es-dur-fast) ease, border-color var(--es-dur-fast) ease;
}

/* aria-expanded is the open state of the bell and the chip (job 3.2): links that site.js turns
   into buttons, since with script off they are only ways to /me/bildirimler and /me. */
.site-header__icon:hover,
.site-header__icon[aria-expanded="true"],
.site-header .notify-bell:hover,
.site-header .notify-bell[aria-expanded="true"],
.user-chip:hover,
.user-chip[aria-expanded="true"] {
    background: var(--es-wash);
    border-color: var(--es-glow-line-hover);
    color: var(--es-ink);
    text-decoration: none;
}

.site-header__icon:focus-visible,
.site-header .notify-bell:focus-visible,
.user-chip:focus-visible {
    border-radius: var(--es-r-pill);
}

.site-header__icon svg {
    width: 20px;
    height: 20px;
}

/* The count rides on the ring's corner, cut out of the bar by a ring of the page colour. */
.site-header .notify-bell__badge {
    top: -4px;
    right: -5px;
    border: 2px solid var(--es-page);
    background: var(--es-brand);
    min-width: 20px;
    height: 20px;
}

.site-header__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    color: var(--es-ink);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    white-space: nowrap;
}

.site-header__link:hover {
    color: var(--es-brand-strong);
}

/* The account chip: portrait or initials, first name, chevron (plan Ek B, job 3.2). */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 10px 0 4px;
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r-pill);
    color: var(--es-ink);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    transition: background-color var(--es-dur-fast) ease, border-color var(--es-dur-fast) ease;
}

.user-chip__avatar {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    object-fit: cover;
}

.user-chip__chevron {
    line-height: 0;
    color: var(--es-muted);
    transition: rotate var(--es-dur) var(--es-ease);
}

.user-chip__chevron svg {
    width: 16px;
    height: 16px;
}

.user-chip[aria-expanded="true"] .user-chip__chevron {
    rotate: 180deg;
}

/* The panels the bell, the chip and the menu button open: B's .menu, hanging from the bar's
   right edge. */
.header-pop,
.site-header__account,
.site-menu {
    position: relative;
}

.site-header__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1060;
    width: 17rem;
    max-height: calc(100dvh - var(--es-header-h) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.header-pop > .site-header__panel:not([hidden]) {
    transform-origin: top right;
    animation: es-menu-in var(--es-dur) var(--es-ease);
}

.site-header__panel .menu__item:focus-visible,
.notice-row:focus-visible,
.notice-pop__action:focus-visible {
    outline-offset: -2px;
}

.site-header__panel form {
    margin: 0;
}

/*
    The user menu (job 3.2, popups-UserMenu-C): the card with the name and the address, C's
    spaced "Hesabım" label, then _AccountLinks. 300px, like C.
*/
.account-menu {
    width: min(300px, calc(100vw - 32px));
}

.account-menu__card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2px;
    padding: 12px;
    border-radius: var(--es-r);
    background: var(--es-brand-soft);
}

.account-menu__avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--es-surface);
    color: var(--es-brand-strong);
    font-weight: 700;
    letter-spacing: .02em;
    object-fit: cover;
}

.account-menu__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.account-menu__name,
.account-menu__mail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu__name {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
}

.account-menu__mail {
    color: var(--es-muted);
    font-size: .78rem;
}

/* The shared list (_AccountLinks): B's small icon box on every row, ember on the page you are
   on, red on "Çıkış yap" while its label stays quiet — leaving is not an error. */
.account-links .menu__label {
    flex: 1 1 auto;
    min-width: 0;
}

.account-links .icbox svg {
    width: 17px;
    height: 17px;
    color: inherit;
}

.account-links .menu__item:hover .icbox:not(.icbox--brand, .icbox--bad, .icbox--solid, .icbox--ink) {
    background: var(--es-surface);
}

.account-links form {
    margin: 0;
}

.menu__item--quiet {
    color: var(--es-muted);
}

/* A short word riding at the end of a menu row: the current mode beside "Mod değiştir". */
.menu__tag {
    flex: 0 0 auto;
    padding: 2px 9px;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-muted);
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.5;
}

/*
    The bell's preview (job 3.2, popups-UserMenu-C's list with B's coloured boxes): the newest
    five, unread ones on the wash with an ember dot, then "Tümünü okundu say" and "Tümünü gör".
    Each row is a whole-width button posting the inbox's own mark-read form.
*/
.notice-pop {
    width: min(440px, calc(100vw - 32px));
    padding: 0;
}

.notice-pop__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 8px;
}

.notice-pop__count {
    color: var(--es-faint);
    font-size: .78rem;
    font-weight: 600;
}

.notice-pop__list {
    margin: 0;
    padding: 0 8px;
    list-style: none;
}

.notice-pop__list form {
    margin: 0;
}

.notice-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    width: 100%;
    margin-bottom: 2px;
    padding: 10px;
    border: 0;
    border-radius: var(--es-r);
    background: transparent;
    color: var(--es-body);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--es-dur-fast) ease;
}

.notice-row.is-unread {
    background: var(--es-fill);
}

.notice-row:hover {
    background: var(--es-fill-2);
}

.notice-row .icbox svg {
    color: inherit;
}

.notice-row__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notice-row__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 550;
    line-height: 1.35;
}

.notice-row.is-unread .notice-row__title {
    font-weight: 700;
}

.notice-row__meta {
    overflow: hidden;
    color: var(--es-muted);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-row__end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-top: 2px;
    color: var(--es-faint);
    font-size: .72rem;
    font-weight: 650;
    white-space: nowrap;
}

.notice-row__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--es-brand);
    box-shadow: 0 0 10px var(--es-header-glow);
}

.notice-pop__empty {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 18px;
}

.notice-pop__empty-title {
    display: block;
    color: var(--es-ink);
    font-weight: 650;
}

.notice-pop__empty-text {
    display: block;
    color: var(--es-muted);
    font-size: .85rem;
}

.notice-pop__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 6px 8px;
    border-top: 1px solid var(--es-line);
}

.notice-pop__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--es-r-sm);
    background: transparent;
    color: var(--es-body);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

.notice-pop__action:hover {
    background: var(--es-fill);
    color: var(--es-ink);
}

.notice-pop__action svg {
    width: 16px;
    height: 16px;
}

.notice-pop__action--go {
    margin-left: auto;
    color: var(--es-brand-strong);
}

.notice-pop__action--go:hover {
    color: var(--es-brand-strong);
}

/*
    The phone's menu (plan job 3.3; popups-SiteMobileMenu-C, with -B's coloured icon boxes and
    44px rows): a drawer from the right, on Bootstrap's offcanvas, which brings the backdrop, the
    focus trap, Esc and the focus back to the button. The surface with the glow edge on its inner
    side and, on ink, C's ember glow in the top corner (--es-header-glow is nothing on paper).
*/
.site-drawer {
    --bs-offcanvas-width: min(380px, 88vw);
    --bs-offcanvas-bg: var(--es-surface);
    --bs-offcanvas-color: var(--es-body);
    --bs-offcanvas-border-color: var(--es-glow-line);
    --bs-offcanvas-transition: transform var(--es-dur-slow) var(--es-ease);
    background-image: radial-gradient(260px 200px at 100% 0, var(--es-header-glow), transparent 70%);
    box-shadow: var(--es-menu-shadow);
}

/* Bootstrap focuses the panel itself as it opens, so that the next Tab lands inside; the open
   drawer is the sign of that, and an outline round the whole screen edge would be a second. */
.site-drawer:focus,
.site-drawer:focus-visible {
    outline: none;
}

/* Bootstrap's backdrop is black at half strength; the site's dialog dim is one token. */
.offcanvas-backdrop {
    background-color: var(--es-backdrop);
}

.offcanvas-backdrop.show {
    opacity: 1;
}

/* With script off the drawer is the :target of #site-menu (the menu button is a link to it), and
   a page-sized shadow stands in for the backdrop. data-drawer-ready is set by site.js once
   Bootstrap has the drawer, so a stray #site-menu in the address cannot open a second copy of
   the state Bootstrap does not know about. */
.site-drawer:target:not([data-drawer-ready]) {
    visibility: visible;
    transform: none;
    box-shadow: var(--es-menu-shadow), 0 0 0 100vmax var(--es-backdrop);
}

.site-drawer__head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    padding: 8px 12px 4px 20px;
}

.site-drawer__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 12px 16px;
}

/* The bar's search field at the drawer's width. The bar hides .site-search below 768px (it
   shows a magnifier link instead); this one is the phone's, so it stays. */
.site-drawer .site-drawer__search {
    display: flex;
    flex: 0 0 auto;
    max-width: none;
    margin: 0 0 6px;
}

/* 16px or iOS zooms the page on focus. */
.site-drawer__search .site-search__field {
    font-size: 1rem;
}

.site-drawer__card {
    margin: 4px 0 2px;
}

.site-drawer .menu__group {
    padding-top: 14px;
}

.site-drawer .menu__item {
    font-size: .97rem;
    font-weight: 600;
}

/* C's current row: the ember wash with a stripe down the inner edge. */
.site-drawer .menu__item.is-active {
    background: var(--es-brand-soft);
    box-shadow: inset 3px 0 0 var(--es-brand);
    color: var(--es-ink);
}

.site-drawer .menu__item:focus-visible {
    outline-offset: -2px;
}

.site-drawer__theme .theme-seg {
    display: flex;
}

.site-drawer__theme .theme-seg__option {
    flex: 1 1 0;
    justify-content: center;
    min-height: 44px;
}

/* At the very bottom: "Hesap oluştur" and "Giriş yap" for a visitor, "Çıkış yap" for a member. */
.site-drawer__foot {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--es-line);
}

.site-drawer__foot form {
    margin: 0;
}

/* Something unread in the inbox: an ember dot on the menu button's corner, cut out of the bar by
   a ring of the page colour like the bell's count. */
.site-menu__dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 11px;
    height: 11px;
    border: 2px solid var(--es-page);
    border-radius: 50%;
    background: var(--es-brand);
    box-shadow: 0 0 10px var(--es-header-glow);
}

/* "Organizatörler için" leaves the capsule below 1200px, where four pills, the field and the
   account no longer fit (plan Ek B allows it): a member finds it in the account menu, a visitor
   behind the menu button, which stays on screen for a visitor up to 1199px for that reason. */
.site-header__mid {
    display: none;
}

@media (max-width: 1199.98px) {
    .site-header__wide,
    .user-chip__name {
        display: none;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-header__mid {
        display: flex;
    }
}

@media (min-width: 992px) {
    .site-menu:not(.site-menu--visitor) {
        display: none;
    }
}

@media (min-width: 1200px) {
    .site-menu--visitor {
        display: none;
    }
}

/* Below 992px the bar is the phone's row (plan Ek B): name · search · bell · menu. The theme
   picker and the account move into the menu button's drawer (job 3.3). */
@media (max-width: 991.98px) {
    .site-header__nav,
    .site-header__account,
    .site-header__desk,
    .site-header:not(.site-header--minimal) .site-header__theme {
        display: none;
    }
}

@media (min-width: 768px) {
    .site-header__phone {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .site-header {
        --es-header-h: 60px;
    }

    .site-header__bar {
        gap: 6px;
    }

    .site-search {
        display: none;
    }

    .site-header__end {
        margin-left: auto;
    }

    /* The bell is not the last thing on a phone's row (the menu button is), so a panel hung
       from its right edge would run off the left of the screen: it spans the row instead. */
    .notice-pop {
        position: fixed;
        top: calc(var(--es-header-h) + 8px);
        left: 16px;
        right: 16px;
        width: auto;
    }
}

/* /start and a 5xx error page (ViewData["Minimal"]): the name centred, the theme picker at the
   right edge, nothing that queries the database (design.md §7.3). */
.site-header--minimal .site-header__bar {
    position: relative;
    justify-content: center;
}

.site-header--minimal .site-header__brand {
    margin: 0;
}

.site-header--minimal .site-header__end {
    position: absolute;
    right: var(--es-gutter);
}

/*
    The page's container (UIhataları 28, K12): Bootstrap's stepped widths (960px at 992, 1140 at
    1200) left its edge 40–50px off the top bar's and the footer's. One fluid width instead, the
    same --es-container and --es-gutter the bar and the footer use, which also gives a phone
    design.md §5.2's 16px gutter. Bootstrap pads .container with half of --bs-gutter-x, hence the
    doubling; a .row inside sets its own gutter.
*/
.container {
    --bs-gutter-x: calc(2 * var(--es-gutter));
    max-width: calc(var(--es-container) + 2 * var(--es-gutter));
}

.discover-main {
    padding-block: var(--es-space-6) var(--es-space-8);
}

/* ------------------------------------------------------- footer (plan Ek B, job 3.4) */

/*
    _SiteFooter: the organizer call, the brand column beside four link columns, the giant cropped
    name, the bottom strip. Drawn in code, not from a canvas (plan §2.1) — B's closing band and C's
    giant name are where it takes from. Light: a panel on the page with rounded top corners. Dark:
    deeper than the page, an ember hairline along its top and a faint ember glow in its top-left
    corner (the --es-foot-* tokens). Portal and admin have no footer; the account and application
    screens keep their own single line (plan Ek B).
*/
.site-footer {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--es-foot-bg);
    border-radius: var(--es-r-xl) var(--es-r-xl) 0 0;
    color: var(--es-muted);
}

/* The ember hairline, fading out towards both ends so it never meets the rounded corners. */
.site-footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--es-foot-edge), transparent);
    pointer-events: none;
}

.site-footer::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -260px;
    left: -220px;
    width: 760px;
    height: 560px;
    background: radial-gradient(closest-side, var(--es-foot-glow), transparent);
    pointer-events: none;
}

.site-footer__inner {
    max-width: calc(var(--es-container) + 2 * var(--es-gutter));
    margin-inline: auto;
    padding: var(--es-space-8) var(--es-gutter) 0;
}

/* The organizer call (Ek B item 1): flat ember in light, an ember gradient with a lighter sheen
   in its top-right corner and a glow beneath it on ink. */
.foot-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
    margin-bottom: 64px;
    padding: 56px 64px;
    border-radius: var(--es-r-band);
    background-color: var(--es-cta-from);
    background-image: radial-gradient(circle at 88% 0%, var(--es-cta-shine), transparent 55%),
        linear-gradient(135deg, var(--es-cta-from), var(--es-cta-to));
    box-shadow: 0 34px 70px -40px var(--es-cta-glow);
    color: var(--es-on-ember);
}

.foot-cta__text {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.foot-cta__title {
    margin: 0 0 .6rem;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-title);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.12;
    color: var(--es-on-ember);
    text-wrap: balance;
    overflow-wrap: normal;
}

.foot-cta__lead {
    margin: 0;
    font-size: 1.06rem;
    color: var(--es-on-ember-soft);
}

.foot-cta__button {
    --bs-btn-color: var(--es-on-ember-ink);
    --bs-btn-bg: var(--es-on-ember);
    --bs-btn-border-color: var(--es-on-ember);
    --bs-btn-hover-color: var(--es-on-ember-ink);
    --bs-btn-hover-bg: var(--es-on-ember-hover);
    --bs-btn-hover-border-color: var(--es-on-ember-hover);
    --bs-btn-active-color: var(--es-on-ember-ink);
    --bs-btn-active-bg: var(--es-on-ember-soft);
    --bs-btn-active-border-color: var(--es-on-ember-soft);
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    box-shadow: 0 12px 26px -14px var(--es-photo-shadow);
}

.foot-cta__button svg {
    width: 18px;
    height: 18px;
}

/* The ember outline of the focus ring would vanish on the ember band. */
.foot-cta .foot-cta__button:focus-visible {
    outline-color: var(--es-on-ember);
    outline-offset: 3px;
}

.foot-cta__spark {
    position: absolute;
    top: -44px;
    right: -34px;
    line-height: 0;
    color: var(--es-on-ember-faint);
    pointer-events: none;
}

.foot-cta__spark svg {
    width: 170px;
    height: 170px;
}

/* Brand column beside the four link columns (Ek B item 2). */
.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 3fr);
    gap: 48px 64px;
}

.site-footer__brand {
    display: grid;
    align-content: start;
    gap: 20px;
}

.site-footer__name {
    justify-self: start;
    font-size: 1.4rem;
}

.site-footer__about {
    max-width: 34ch;
    margin: 0;
    font-size: .95rem;
    color: var(--es-muted);
}

/* The app card (plan §8 B-5): always there, its store buttons only for a configured address. */
.foot-app {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    max-width: 380px;
    padding: 16px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.foot-app__title {
    margin: 0;
    font-weight: 700;
    color: var(--es-ink);
}

.foot-app__lead {
    margin: 2px 0 0;
    font-size: .85rem;
    color: var(--es-muted);
}

.foot-app__stores {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.foot-app__store {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--es-r-pill);
    background: var(--es-ink);
    color: var(--es-page);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.foot-app__store:hover {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.foot-app__store svg {
    width: 16px;
    height: 16px;
}

.site-footer__theme {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.site-footer__label,
.site-footer__head {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--es-faint);
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

.site-footer__head {
    margin: 0 0 16px;
    font-family: var(--es-font-body);
    line-height: 1.4;
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__links a,
.site-footer__legal a {
    color: var(--es-body);
    text-decoration: none;
}

.site-footer__links a:hover,
.site-footer__legal a:hover {
    color: var(--es-brand-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The phone's folds (below) are drawn beside the columns; only one of the two is ever shown. */
.site-footer__fold {
    display: none;
}

.site-footer__fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    font-weight: 700;
    color: var(--es-ink);
    list-style: none;
    cursor: pointer;
}

.site-footer__fold > summary::-webkit-details-marker {
    display: none;
}

.site-footer__fold > summary svg {
    width: 18px;
    height: 18px;
    color: var(--es-muted);
    transition: rotate var(--es-dur) var(--es-ease);
}

.site-footer__fold[open] > summary svg {
    rotate: 180deg;
}

.site-footer__fold .site-footer__links {
    gap: 0;
    padding-bottom: 10px;
}

.site-footer__fold .site-footer__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
}

/*
    C's giant name (Ek B item 3), cropped at the bottom by its box and sized to the footer's width
    (~14vw, plan Ek B: "about 16%" — Unbounded is wide, and at 16 the last letters fell off the
    right edge). The size is a share of the footer's content box (cqi, .site-footer__inner is the
    container); an older browser gets the same share of the viewport. overflow: clip rather than
    hidden, so the box is not a scroll container and view() below follows the page's own scroll.
    Dark: an ember outline that fills with ember as it scrolls into view, where the browser drives
    an animation from scrolling (animation-timeline: view()); everywhere else, and under "hareketi
    azalt" (the reduced-motion block at the end of this file), it simply stands filled — never
    hidden. Light: pale grey, and the same animation changes nothing (--es-foot-mark-rest).
*/
.site-footer__inner {
    container-type: inline-size;
}

.site-footer__crop {
    --es-mark-size: calc((100vw - 96px) / 6.9);
    height: calc(var(--es-mark-size) * .64);
    margin-top: 56px;
    overflow: clip;
}

@supports (width: 1cqi) {
    .site-footer__crop {
        --es-mark-size: 14.3cqi;
    }
}

.site-footer__mark {
    display: block;
    width: max-content;
    max-width: none;
    margin-left: -.04em;
    font-size: var(--es-mark-size);
    color: var(--es-foot-mark);
    -webkit-text-stroke: 1.5px var(--es-foot-mark-stroke);
    user-select: none;
}

@keyframes es-mark-fill {
    from {
        color: var(--es-foot-mark-rest);
    }

    to {
        color: var(--es-foot-mark);
    }
}

@supports (animation-timeline: view()) {
    .site-footer__mark {
        animation: es-mark-fill linear both;
        animation-timeline: view();
        animation-range: entry 20% entry 100%;
    }
}

.site-footer__strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 20px 0 28px;
    border-top: 1px solid var(--es-line);
    font-size: .82rem;
    color: var(--es-faint);
}

.site-footer__legal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (pointer: coarse) {
    .site-footer__legal a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* A tablet: the brand column goes above the links, its app card beside the name. */
@media (max-width: 1199.98px) {
    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer__brand {
        grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
        column-gap: 40px;
    }

    .foot-app {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: start;
    }
}

/* A phone (Ek B "Zemin ve mobil"): the link columns become folds that open without a script,
   the app card spans the width and the bottom strip stacks. */
@media (max-width: 767.98px) {
    .site-footer {
        border-radius: var(--es-r-lg) var(--es-r-lg) 0 0;
    }

    .site-footer__inner {
        padding: var(--es-space-7) var(--es-gutter) 0;
    }

    .foot-cta {
        margin-bottom: 40px;
        padding: 32px 24px;
        border-radius: var(--es-r-xl);
    }

    .foot-cta__button {
        width: 100%;
        justify-content: center;
    }

    .site-footer__grid {
        gap: 32px;
    }

    .site-footer__brand {
        grid-template-columns: minmax(0, 1fr);
    }

    .foot-app {
        grid-column: auto;
        grid-row: auto;
        max-width: none;
    }

    .site-footer__nav {
        display: block;
        border-top: 1px solid var(--es-line);
    }

    .site-footer__col {
        display: none;
    }

    .site-footer__fold {
        display: block;
        border-bottom: 1px solid var(--es-line);
    }

    .site-footer__crop {
        margin-top: 40px;
    }

    .site-footer__strip {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ------------------------------------------------------- home page and /etkinlikler (design.md §7.1)

   Views/Home/Index.cshtml introduces the product; Views/Discover/Events.cshtml lists the events
   (UIhataları 13, K1). Shared pieces carry most of both — the shelves (.shelf), the show-cards,
   the chips, the organizer page's bento, phone and app band (.pitch-*, job 5.11), the 1-2-3
   (.org-steps), the FAQ (.disclosure) and the footer's call band (.foot-cta). What is here is
   only what these two pages have and nothing else does:

     .home-hero        the visitor's hero: the words beside a decorative phone and ticket, and
                       the platform's figures under it (B-4).
     .home-greet       the signed-in person's short hero (A-4, K2).
     .home-search      the search band: words, category, city, one button.
     .home-marquee     the communities' names, gliding sideways (UIhataları 7).
     .home-pitch       what the platform does: one section, right under the hero (items 11–12).
     .home-head        a section's kicker, title and its one action on the right.
     .live-card        "Şu anda devam ediyor": a small cover beside the words (items 9, 18).
     .feature-bento    "Öne çıkanlar": one big .feature-lead and show-cards.
     .city-chips       "Yakınınızda"'s row of city buttons (item 10).
     .cat-tile         a category's drawn picture under a scrim (plan job 4.15).

   Covers and the category pictures are dark in both themes (the --es-scheme-dark pin), like every
   picture on the site (plan §2.2); everything else follows the theme. */

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "media text"
        "figures figures";
    align-items: center;
    gap: 2.5rem 3rem;
    padding: 1rem 0 3rem;
}

.home-hero__text {
    grid-area: text;
    display: grid;
    justify-items: start;
    gap: 1.75rem;
}

.home-hero__title {
    margin: 0;
    font-size: var(--es-fs-display);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.04;
    color: var(--es-ink);
    text-wrap: balance;
}

.home-hero__dim {
    color: var(--es-faint);
}

.home-hero__lead {
    max-width: 34rem;
    margin: 0;
    color: var(--es-muted);
    font-size: var(--es-fs-lg);
    line-height: 1.6;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

/* The composition: a pale stage, the phone on it and the ticket over it (the kiosk note is gone, UIhataları 1). */
.home-hero__media {
    grid-area: media;
    position: relative;
    min-height: 34rem;
}

.home-hero__stage {
    position: absolute;
    inset: 0 18% 18% 0;
    border-radius: var(--es-r-band);
    background: radial-gradient(70% 60% at 80% 10%, var(--es-preview-glow), transparent 70%), var(--es-fill);
}

/* Scoped under the media so it outranks .phone-frame's own width (plan job 4.5), later in the file. */
.home-hero__media .home-hero__phone {
    position: absolute;
    top: 2rem;
    left: 20%;
    width: 15rem;
}

.home-phone {
    /* One column that may shrink: the chip row would otherwise widen the screen past its frame. */
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
    padding-top: 2.9rem;
    color: var(--es-ink);
}

.home-phone__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home-phone__word {
    font-family: var(--es-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.03em;
}

.home-phone__head .pitch-avatar {
    width: 26px;
    height: 26px;
}

.home-phone__search {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 34px;
    padding: 0 .75rem;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-muted);
}

.home-phone__search svg {
    width: 14px;
    height: 14px;
}

.home-phone__chips {
    display: flex;
    gap: .35rem;
    overflow: hidden;
}

.home-phone__chips .chip {
    min-height: 24px;
    padding: .1rem .6rem;
    font-size: .68rem;
}

.home-phone__cover {
    /* A cover is dark in both themes (plan §2.2): the ghost title on it reads light. */
    color-scheme: var(--es-scheme-dark);
    display: flex;
    align-items: flex-end;
    height: 7.5rem;
    padding: .75rem;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--es-cat-coal), var(--es-cat-ember) 55%, var(--es-cat-flame));
    color: var(--es-on-photo);
}

.home-phone__label {
    font-size: .72rem;
    font-weight: 700;
}

.home-phone__row {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem;
    border-radius: 14px;
    background: var(--es-fill);
}

.home-phone__row .pitch-cover {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.home-phone__row .pill {
    flex: none;
    font-size: .62rem;
}

.home-hero__ticket {
    position: absolute;
    left: 0;
    bottom: 1.5rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .9rem;
    width: min(19rem, 70%);
    padding: 1rem;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-menu-shadow);
    color: var(--es-ink);
}

.home-hero__ticket .pitch-qr {
    outline: 1px solid var(--es-line);
}

.home-hero__ticket-lines {
    display: grid;
    gap: .45rem;
}

.home-hero__ticket-kicker {
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 600;
}

.home-hero__ticket-note {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
    border-radius: 14px;
    background: var(--es-ok-soft);
    color: var(--es-ok-strong);
    font-size: .8rem;
    font-weight: 700;
}

.home-hero__ticket-note svg {
    flex: none;
    width: 16px;
    height: 16px;
}

/* The platform's figures (B-4), with B's one sentence for organizers beside them. */
.home-hero__figures {
    grid-area: figures;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--es-line);
}

.home-figures {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-space-4) var(--es-space-7);
    margin: 0;
}

.home-figures__item {
    display: flex;
    flex-direction: column-reverse;
    gap: .25rem;
}

.home-figures__item + .home-figures__item {
    padding-left: var(--es-space-7);
    border-left: 1px solid var(--es-line);
}

.home-figures__value {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-title);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

.home-figures__label {
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
    font-weight: 600;
}

.home-hero__aside {
    max-width: 26rem;
    margin: 0;
    color: var(--es-body);
    font-size: var(--es-fs-body);
    line-height: 1.5;
}

/* The signed-in person's short hero (A-4): a greeting and three doors, no composition. */
.home-greet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-space-4) var(--es-space-6);
    margin-bottom: var(--es-space-6);
    padding: var(--es-space-6) var(--es-space-7);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: radial-gradient(60% 120% at 100% 0%, var(--es-brand-soft), transparent 70%), var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.home-greet__text {
    display: grid;
    gap: .5rem;
}

.home-greet__title {
    margin: 0;
    font-size: var(--es-fs-title);
    font-weight: 700;
    letter-spacing: -.035em;
    color: var(--es-ink);
}

.home-greet__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.home-greet__actions .btn svg {
    width: 17px;
    height: 17px;
    margin-right: .3rem;
    vertical-align: -3px;
}

/* The search band: one rounded card holding the words, the selects and the button. It sits in
   the flow under a page head (/etkinlikler) or the greeting (the signed-in home, UIhataları 16). */
.home-search {
    position: relative;
    z-index: 2;
    margin: 0 0 var(--es-space-7);
}

.home-search__form {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem;
    border: 1px solid var(--es-glow-line);
    border-radius: 26px;
    background: var(--es-surface);
    box-shadow: var(--es-menu-shadow);
}

.home-search__field {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding-left: .9rem;
    color: var(--es-muted);
}

.home-search__field svg {
    flex: none;
    width: 20px;
    height: 20px;
}

.home-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    border: 0;
    background: transparent;
    color: var(--es-ink);
    font-size: 1.05rem;
}

.home-search__input::placeholder {
    color: var(--es-faint);
}

/* The band's own focus: the ring goes round the field it belongs to, not a box inside a box. */
.home-search__input:focus {
    outline: 0;
}

.home-search__field:focus-within {
    border-radius: 18px;
    box-shadow: 0 0 0 3px var(--es-ring);
}

.home-search__rule {
    flex: none;
    width: 1px;
    height: 30px;
    background: var(--es-line);
}

/* The band's own surface rather than transparent: a native list drawn from a transparent select
   took the system's white under the dark theme's light text (UIhataları 38). */
.home-search__select.form-select {
    flex: 0 0 13rem;
    width: 13rem;
    height: 52px;
    border-color: transparent;
    background-color: var(--es-surface);
    font-weight: 600;
}

.home-search__submit {
    flex: none;
    min-width: 7rem;
}

/* The communities gliding by (UIhataları 7): names only, set in the display face with a dot
   between them, moving left without end. CSS alone: the list is drawn twice and the track slides
   by exactly one copy (-50%), then starts again where it looks the same. The duration grows with
   the number of names (--marquee-count, set by the view), so the speed stays the same however
   many communities there are. The edges fade; the pointer or the keyboard stops it; reduced
   motion stands it still and wraps it (the block at the end of the file). */
.home-marquee {
    margin-block: var(--es-space-6) var(--es-space-8);
    padding-block: var(--es-space-4);
    overflow: hidden;
    border-block: 1px solid var(--es-line);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.home-marquee__track {
    display: flex;
    width: max-content;
    animation: es-marquee calc(var(--marquee-count, 12) * 3.5s) linear infinite;
}

.home-marquee:hover .home-marquee__track,
.home-marquee:focus-within .home-marquee__track {
    animation-play-state: paused;
}

.home-marquee__list {
    display: flex;
    flex: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-marquee__item {
    display: flex;
    align-items: center;
}

/* The dot sits after every name, the last one too, so the two copies join with the same gap. */
.home-marquee__item::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-inline: var(--es-space-6);
    border-radius: 50%;
    background: var(--es-brand);
}

.home-marquee__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--es-body);
    font-family: var(--es-font-display);
    font-size: var(--es-fs-lg);
    font-weight: 700;
    letter-spacing: -.02em;
    text-decoration: none;
    white-space: nowrap;
}

.home-marquee__link:hover {
    color: var(--es-ink);
}

@keyframes es-marquee {
    to {
        transform: translateX(-50%);
    }
}

/* What the platform does (UIhataları 11–12): the old "her şey tek platformda" and "Kayıttan
   kapıya" in one section under the hero — the shared .pitch-head and bento, one line under the
   title, and both calls together under the cards. */
.home-pitch__lead {
    max-width: 40rem;
    margin: var(--es-space-3) auto 0;
    color: var(--es-muted);
    font-size: var(--es-fs-lg);
    line-height: 1.6;
}

/* A section of the page and its head: kicker and title left, one action right. */
.home-section {
    margin-bottom: var(--es-space-8);
}

.home-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: var(--es-space-4);
}

.home-head__titles {
    display: grid;
    justify-items: start;
    gap: .5rem;
}

.home-head__titles--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
}

.home-head__title {
    margin: 0;
    font-size: var(--es-fs-h2);
    font-weight: 700;
    letter-spacing: -.035em;
    color: var(--es-ink);
}

.home-head__chips {
    margin: 0;
}

.home-more {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--es-space-3);
    margin-top: var(--es-space-6);
}

.home-more .btn svg {
    width: 18px;
    height: 18px;
    margin-left: .35rem;
    vertical-align: -3px;
}

/* "Canlı" / "Şu anda sürüyor": the one pill with a beating dot, green like every "on now" (K14). The dot beats once on arrival (DD-25), not forever. */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 28px;
    padding: .2rem .8rem;
    border: 1px solid var(--es-ok-border);
    border-radius: var(--es-r-pill);
    background: var(--es-ok-soft);
    color: var(--es-ok-strong);
    font-size: var(--es-fs-sm);
    font-weight: 700;
}

.live-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--es-dot-ok);
    animation: es-pulse 1.1s var(--es-ease) .45s 3 both;
}

/* "Şu anda devam ediyor" (UIhataları 9, 18): two across, or one card the whole row
   (.live-grid--one), so half the row is never left empty; one column on a phone. */
.live-grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--es-space-4);
}

.live-grid--one {
    grid-template-columns: minmax(0, 1fr);
}

/* A live event: a compact horizontal card — the 16:9 cover small on the left (T4's ratio; a
   missing one is .show-card__cover.is-fallback, the EventStage mark), the words on the right,
   on the theme's surface. No min-height: the card is as tall as its words or its picture. */
.live-card {
    display: flex;
    align-items: center;
    gap: var(--es-space-4);
    padding: var(--es-space-3);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    color: var(--es-body);
    text-decoration: none;
    transition: transform var(--es-dur-fast) var(--es-ease), box-shadow var(--es-dur-fast) var(--es-ease),
        border-color var(--es-dur-fast) var(--es-ease);
}

.live-card:hover {
    transform: translateY(-2px);
    border-color: var(--es-glow-line-hover);
    box-shadow: var(--es-card-shadow-hover);
    color: var(--es-body);
}

/* .show-card__cover gives the 16:9, the clip and the fill; this sizes it beside the words. */
.live-card__thumb {
    color-scheme: var(--es-scheme-dark);
    flex: 0 0 clamp(7rem, 36%, 13rem);
    border-radius: var(--es-r);
}

.live-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-card__body {
    display: grid;
    flex: 1 1 auto;
    gap: var(--es-space-1);
    min-width: 0;
}

.live-card__org {
    overflow: hidden;
    color: var(--es-muted);
    font-size: var(--es-fs-xs);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-card__title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h3);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.live-card__where {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
}

.live-card__where svg {
    flex: none;
    width: 15px;
    height: 15px;
}

.live-card__where-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-card__time {
    display: grid;
    gap: var(--es-space-1);
    max-width: 16rem;
    margin-top: var(--es-space-1);
}

.live-card__left {
    color: var(--es-ok-strong);
    font-size: var(--es-fs-xs);
    font-weight: 600;
}

/* "Öne çıkan etkinlikler" (site-Home-B's bento): the big card spans two rows beside four small
   ones (--4); with two, one row (--2); alone, the full width (--0). */
.feature-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
}

.feature-bento > .show-card {
    grid-column: span 3;
}

.feature-lead {
    grid-column: span 6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-band);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    color: var(--es-body);
    text-decoration: none;
    transition: transform var(--es-dur-fast) var(--es-ease), box-shadow var(--es-dur-fast) var(--es-ease),
        border-color var(--es-dur-fast) var(--es-ease);
}

.feature-lead:hover {
    transform: translateY(-2px);
    border-color: var(--es-glow-line-hover);
    box-shadow: var(--es-card-shadow-hover);
    color: var(--es-body);
}

.feature-bento--4 .feature-lead {
    grid-row: span 2;
}

.feature-bento--0 .feature-lead {
    grid-column: span 12;
    flex-direction: row;
}

.feature-bento--0 .feature-lead__cover {
    flex: 0 0 55%;
}

.feature-lead__cover {
    color-scheme: var(--es-scheme-dark);
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--es-cat-ink);
}

.feature-lead__cover.show-card__cover {
    aspect-ratio: 16 / 9;
}

.feature-lead__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--es-dur-slow) var(--es-ease);
}

.feature-lead:hover .feature-lead__cover img {
    transform: scale(1.03);
}

.feature-lead__cover .date-block {
    top: 1.25rem;
    left: 1.25rem;
    width: 64px;
    height: 70px;
}

.feature-lead__cover .date-block__day {
    font-size: 1.6rem;
}

.feature-lead__programme {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1;
    padding: .4rem .9rem;
    border-radius: var(--es-r-pill);
    background: var(--es-photo-chip);
    backdrop-filter: blur(6px);
    color: var(--es-on-photo);
    font-size: .8rem;
    font-weight: 700;
}

.feature-lead__cover .show-card__status {
    bottom: 1rem;
    left: 1.25rem;
}

.feature-lead__body {
    display: grid;
    align-content: start;
    gap: .75rem;
    padding: 1.75rem 1.9rem 1.9rem;
    flex: 1 1 auto;
}

.feature-lead__org {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--es-muted);
    font-size: .875rem;
    font-weight: 600;
}

.feature-lead__logo {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    object-fit: contain;
    background: var(--es-paper);
    outline: 1px solid var(--es-line);
    outline-offset: -1px;
}

.feature-lead__logo--initials {
    display: grid;
    place-items: center;
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-size: .68rem;
    font-weight: 800;
    outline: 0;
}

.feature-lead__title {
    margin: 0;
    font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.15;
    color: var(--es-ink);
}

.feature-lead__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
}

.feature-lead__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    color: var(--es-muted);
    font-size: .9rem;
}

.feature-lead__meta > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.feature-lead__meta svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--es-brand);
}

.feature-lead__capacity {
    display: grid;
    gap: .45rem;
    margin-top: .25rem;
}

.feature-lead__capacity-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--es-muted);
    font-size: .8rem;
    font-weight: 600;
}

.feature-lead__capacity-state {
    color: var(--es-brand);
}

/* Category tiles (site-Home-C, plan job 4.15): the picture fills the tile, a scrim from the left
   carries the name and the count. Up to six: a 3×2 grid. More: two rows that scroll sideways,
   the same arrows as a shelf. */
.cat-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cat-tiles--scroll {
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 1.1rem) / 3);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.cat-tiles--scroll::-webkit-scrollbar {
    display: none;
}

.cat-tiles__item {
    min-width: 0;
    scroll-snap-align: start;
}

.cat-tile {
    color-scheme: var(--es-scheme-dark);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    height: 9.5rem;
    padding: 1.4rem;
    overflow: hidden;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    color: var(--es-on-photo);
    text-decoration: none;
    transition: transform var(--es-dur-fast) var(--es-ease), box-shadow var(--es-dur-fast) var(--es-ease);
}

.cat-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--es-photo-scrim) 0%, var(--es-photo-scrim-soft) 100%);
}

.cat-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--es-card-shadow-hover);
    color: var(--es-on-photo);
}

.cat-tile__text,
.cat-tile__arrow {
    position: relative;
    z-index: 1;
}

.cat-tile__text {
    display: grid;
    gap: .25rem;
    min-width: 0;
}

.cat-tile__name {
    font-family: var(--es-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
}

.cat-tile__count {
    font-size: .8rem;
    font-weight: 600;
    opacity: .8;
}

.cat-tile__arrow {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--es-on-photo-line);
    border-radius: 50%;
}

.cat-tile__arrow svg {
    width: 18px;
    height: 18px;
}

.cat-tile:hover .cat-tile__arrow {
    border-color: var(--es-brand);
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

/* "Takip etmeye değer" (site-Home-B): a cover strip, the logo overlapping it, the figures, and a
   follow pill that is part of the link — following happens on the organization's page (A-17). */
.org-picks {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.org-picks__item {
    min-width: 0;
}

.org-pick {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    color: var(--es-body);
    text-decoration: none;
    transition: transform var(--es-dur-fast) var(--es-ease), box-shadow var(--es-dur-fast) var(--es-ease),
        border-color var(--es-dur-fast) var(--es-ease);
}

.org-pick:hover {
    transform: translateY(-2px);
    border-color: var(--es-glow-line-hover);
    box-shadow: var(--es-card-shadow-hover);
    color: var(--es-body);
}

.org-pick__cover {
    color-scheme: var(--es-scheme-dark);
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--es-cat-ink);
}

.org-pick__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A column, not a grid: a grid stretched to the card's height shares the spare room out between
   its rows, so a card without figures or "Sıradaki" spread its name down the card. Packed from the
   top, with the follow pill's margin-top: auto taking the rest, every card in a row lines up. */
.org-pick__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    padding: 0 1.25rem 1.35rem;
    flex: 1 1 auto;
}

/* The logo on its white tile (design.md §4.8), lifted over the cover's edge. Without one: the
   initials on the brand's soft tile, the same size and place, so a row of cards stays even. */
.org-pick__logo {
    /* Over the cover, which is positioned (.show-card__cover) and would otherwise paint on top. */
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    border-radius: 18px;
    object-fit: contain;
    background: var(--es-paper);
    box-shadow: 0 0 0 4px var(--es-surface), var(--es-shadow-1);
}


.org-pick__name {
    font-family: var(--es-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.25;
    color: var(--es-ink);
}

.org-pick__stats {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    color: var(--es-muted);
    font-size: .85rem;
}

.org-pick__stats b {
    color: var(--es-ink);
}

.org-pick__follow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 36px;
    margin-top: auto;
    padding: .3rem .95rem;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-ink);
    font-size: .85rem;
    font-weight: 700;
    transition: background-color var(--es-dur-fast) var(--es-ease), color var(--es-dur-fast) var(--es-ease);
}

.org-pick__follow svg {
    width: 16px;
    height: 16px;
}

.org-pick:hover .org-pick__follow:not(.is-following) {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.org-pick__follow.is-following {
    background: var(--es-ok-soft);
    color: var(--es-ok-strong);
}

.home-app {
    margin-block: 1rem 4rem;
}

.home-faq__more {
    margin: 1.5rem 0 0;
    color: var(--es-muted);
    text-align: center;
}

.home-prompt {
    margin: 0 0 3rem;
    color: var(--es-muted);
    font-size: .9rem;
    text-align: center;
}

.home-empty {
    margin-bottom: 3rem;
}

.home-close {
    margin-top: 1.5rem;
}

@media (max-width: 1199.98px) {
    .home-hero__media .home-hero__phone {
        left: 12%;
    }

    .feature-bento--4 .feature-lead {
        grid-column: span 12;
        grid-row: auto;
    }

    .feature-bento--4 > .show-card {
        grid-column: span 6;
    }

    .org-picks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .home-hero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "text"
            "media"
            "figures";
        gap: 2rem;
    }

    .home-hero__media {
        min-height: 30rem;
    }

    .home-search__form {
        flex-wrap: wrap;
    }

    .home-search__field {
        flex-basis: 100%;
        padding-right: .6rem;
    }

    .home-search__rule {
        display: none;
    }

    .home-search__select.form-select {
        flex: 1 1 10rem;
        width: auto;
        background-color: var(--es-fill);
    }

    .feature-bento--2 .feature-lead,
    .feature-bento--0 .feature-lead {
        grid-column: span 12;
        flex-direction: column;
    }

    .feature-bento--2 > .show-card {
        grid-column: span 6;
    }

    .cat-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cat-tiles--scroll {
        grid-template-columns: none;
        grid-auto-columns: calc((100% - 1.1rem) / 2);
    }
}

@media (max-width: 767.98px) {
    .home-hero__actions .btn {
        flex: 1 1 auto;
    }

    .home-figures__item + .home-figures__item {
        padding-left: 1.5rem;
    }

    .home-figures {
        gap: 1rem 1.5rem;
    }

    .home-greet {
        padding: 1.5rem 1.25rem;
    }

    .home-greet__actions .btn {
        flex: 1 1 auto;
    }

    .home-search__submit {
        flex: 1 1 100%;
    }

    /* A phone: the community cards become one row that scrolls sideways rather
       than a long column of identical items. */
    .org-picks {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 78%;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .org-picks::-webkit-scrollbar {
        display: none;
    }

    .org-picks__item {
        scroll-snap-align: start;
    }

    .feature-bento > .show-card,
    .feature-bento--4 > .show-card,
    .feature-bento--2 > .show-card {
        grid-column: span 12;
    }

    .feature-lead__body {
        padding: 1.4rem;
    }

    .feature-lead__go {
        flex: 1 1 100%;
    }

    .live-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cat-tiles {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .cat-tiles::-webkit-scrollbar {
        display: none;
    }

    .cat-tiles--scroll {
        grid-template-rows: repeat(2, auto);
    }

    .home-section {
        margin-bottom: var(--es-space-7);
    }
}

/* A phone: the composition keeps the phone and the ticket, tighter; four figures sit two by two. */
@media (max-width: 575.98px) {
    .home-hero__media {
        min-height: 28.5rem;
    }

    .home-hero__stage {
        inset: 0 6% 12% 0;
        border-radius: var(--es-r-xl);
    }

    .home-hero__media .home-hero__phone {
        left: auto;
        right: 4%;
        width: 12.5rem;
    }

    .home-hero__ticket {
        width: 78%;
        bottom: .5rem;
    }

    .home-hero__figures {
        display: grid;
    }

    /* Four figures (UIhataları 5) in one row at 390px would each be a word wide: two by two. */
    .home-figures {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--es-space-4);
    }

    .home-figures__item + .home-figures__item {
        padding-left: 0;
        border-left: 0;
    }
}

/* ------------------------------------------------------------------- date-block (design.md §6.3) */

/*
    The one bold device on a card (frontend-design guidance: spend the boldness in one place):
    every other status marker is a quiet dot-on-a-chip, and this is the exception, because a date
    is the single fact a person scans a shelf for. It earned that role in the approved mockups
    rather than being planned in the original spec.
*/
.date-block {
    /* Dark in both themes (the --es-scheme-dark pin): it sits on a cover photograph. */
    color-scheme: var(--es-scheme-dark);
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: var(--es-r-sm);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
    box-shadow: 0 4px 12px var(--es-photo-shadow);
}

.date-block__day {
    font-size: 1.2rem;
    font-weight: 800;
}

.date-block__month {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* The same tile in a list or a timeline (plan job 4.7, portal1-Overview-B's "Yaklaşan"): in the
   flow and following the theme, since it sits on a card rather than on a photograph. An inner
   piece (DD-24), so a quiet fill and no edge; the month keeps the ember. */
.date-block--inline {
    color-scheme: inherit;
    position: static;
    flex: 0 0 auto;
    width: 56px;
    height: 60px;
    border-radius: 14px;
    background: var(--es-fill);
    color: var(--es-ink);
    box-shadow: none;
    line-height: 1;
}

.date-block--inline .date-block__day {
    font-family: var(--es-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.04em;
}

.date-block--inline .date-block__month {
    margin-top: 4px;
    font-size: .66rem;
    letter-spacing: .08em;
    color: var(--es-brand);
}

/* ----------------------------------------------------------------- show-card (design.md §6.3) */

.show-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--es-r-card);
    overflow: hidden;
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    color: inherit;
    text-decoration: none;
    transition: transform var(--es-dur-fast) var(--es-ease), border-color var(--es-dur-fast) var(--es-ease),
        box-shadow var(--es-dur-fast) var(--es-ease);
    box-shadow: var(--es-card-shadow);
}

.show-card:hover {
    transform: translateY(-2px);
    border-color: var(--es-glow-line-hover);
    box-shadow: var(--es-card-shadow-hover);
}

.show-card:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.show-card__cover {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--es-fill-2);
    flex: 0 0 auto;
}

.show-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--es-dur-slow) var(--es-ease);
}

.show-card:hover .show-card__cover img {
    transform: scale(1.03);
}

/* No picture (UIhataları 27, 30; K3, design.md §4.8): every cover box without a photograph —
   cards, the event hero, thumbnails, the organization band, the portal's small copy of it —
   shows the EventStage mark centred on a neutral fill, not a made-up swatch. Pinned dark like
   every cover (plan §2.2), so what is laid over it (date blocks, chips, the live card's words)
   reads as it does on a photograph. The mark is sized from the box's height, so a 30px table
   thumb and a 400px hero both get one that fits and stays clear of the hero's date card. A
   missing org or event logo shows the same mark through Views/Shared/_BrandFallback. The second
   selector is the portal overview's cover (.org-glance), doubled to outweigh its own background. */
.show-card__cover.is-fallback,
.org-glance__cover.org-glance__cover--plain {
    color-scheme: var(--es-scheme-dark);
    display: flex;
    background: var(--es-fill-2) url("../img/logo-256.png") center / auto clamp(1.125rem, 36%, 7.5rem) no-repeat;
}

/* An ended event's card (plan job 4.8, site2-Org-B's "Geçmiş etkinlikler"): the cover turns grey
   and steps back, so a shelf still reads as what is coming; the chip says "Sona erdi". */
.show-card.is-ended .show-card__cover img,
.show-card.is-ended .show-card__cover.is-fallback {
    filter: grayscale(1);
    opacity: .6;
}

.show-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.show-card__title {
    font-size: .95rem;
    font-weight: 650;
    color: var(--es-ink);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.show-card__org {
    font-size: .82rem;
    color: var(--es-muted);
}

.show-card__meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--es-muted);
    margin-top: 2px;
}

.show-card__meta svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* Over a photograph a status chip needs its own scrim — the neutral shell-3 fill it gets on flat
   ground would vanish against a bright sky or a stage light in the cover itself. */
.show-card__status {
    /* Dark in both themes (the --es-scheme-dark pin): the chip sits on a cover photograph. */
    color-scheme: var(--es-scheme-dark);
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1;
}

.show-card__status .pill {
    background: var(--es-photo-chip);
    border-color: transparent;
    color: var(--es-ink);
    backdrop-filter: blur(3px);
}

/* Poster shelves keep their taller card, but not a taller crop. Every event cover on the site
   is 16:9 (design.md 4.7): one uploaded image, one framing, wherever it appears — which is what
   stops a face being cut off in one shelf and not in the one below it. This narrows DD-17 to the
   alternating cell *sizes* it was really about. */
.show-card--poster .show-card__cover {
    aspect-ratio: 16 / 9;
}

/* --------------------------------------------------------------------- shelf (design.md §6.2) */

.shelf {
    margin-bottom: 48px;
}

.shelf__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

/* The title, with its kicker above it ("Takvim" over "Bu hafta", site-Home-C). */
.shelf__title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    min-width: 0;
}

.shelf__title {
    font-size: 1.25rem;
    font-weight: 650;
    color: var(--es-ink);
    margin: 0;
}

/* "Tümünü gör" and the arrows share the row's end (plan job 5.1): the link used to sit between
   the title and the arrows, which on a wide screen left it floating mid-row. */
.shelf__end {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
}

.shelf__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--es-muted);
    text-decoration: none;
}

.shelf__link svg {
    width: 16px;
    height: 16px;
    transition: transform var(--es-dur-fast) var(--es-ease);
}

.shelf__link:hover {
    color: var(--es-brand);
}

.shelf__link:hover svg {
    transform: translateX(2px);
}

.shelf__nav {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.shelf__nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--es-surface);
    border: 1px solid var(--es-line);
    color: var(--es-ink);
    cursor: pointer;
    padding: 0;
}

.shelf__nav-btn:hover {
    background: var(--es-fill-2);
}

.shelf__nav-btn svg {
    width: 18px;
    height: 18px;
}

.shelf__nav-btn[hidden] {
    display: none;
}

.shelf__scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.shelf__scroll::-webkit-scrollbar {
    display: none;
}

.shelf__scroll .show-card {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 260px;
}

.shelf__scroll .show-card--poster {
    width: 210px;
}

/* Fewer than two cards: a scroller with nothing to scroll is just a card, so it renders as a
   plain grid instead (design.md §6.2). */
.shelf__grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

@media (max-width: 575.98px) {
    .shelf__scroll .show-card {
        width: 78vw;
    }

    .shelf__nav {
        display: none;
    }
}

/* ------------------------------------------------ waiting invitations (AD-19)
   _PendingInvitations on /start, /me and /me/organizations (plan job 6.11, me-Start-B with
   me-Start-C's kind): a floating surface card — the title beside an ember icon box, the count in
   the ember — and one soft row per invitation on the fill, with the organization's logo, its
   initials or, for a speaking invitation without a logo, the microphone on ink. The rows keep the
   two answers on the right and drop them under the text on a phone. */
.invites {
    display: grid;
    gap: 16px;
    margin-bottom: 2rem;
    padding: 22px;
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    box-shadow: var(--es-card-shadow);
}

.invites__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.invites__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-family: var(--es-font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--es-ink);
}

.invites__count {
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    font-size: .8125rem;
}

.invites__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.invite {
    display: flex;
    align-items: center;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.invite__mark {
    width: 48px;
    height: 48px;
    flex: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 16px;
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-family: var(--es-font-display);
    font-size: 1rem;
    font-weight: 700;
}

.invite__mark--logo {
    background: var(--es-paper);
}

.invite__mark--logo img {
    width: 100%;
    height: 100%;
    padding: 4px;
    object-fit: contain;
}

.invite__mark--icon {
    border-radius: 50%;
    background: var(--es-ink);
    color: var(--es-page);
}

.invite__mark svg {
    width: 20px;
    height: 20px;
}

.invite__text {
    display: grid;
    gap: 2px;
    flex: 1 1 15rem;
    min-width: 0;
}

.invite__kind {
    color: var(--es-brand);
    font-size: .75rem;
    font-weight: 700;
}

.invite__what {
    color: var(--es-ink);
    font-size: .97rem;
    overflow-wrap: anywhere;
}

.invite__what strong {
    font-weight: 800;
}

.invite__detail {
    color: var(--es-muted);
    font-size: .8125rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.invite__dot {
    margin: 0 .35rem;
    color: var(--es-faint);
}

.invite__actions {
    display: flex;
    gap: 8px;
    flex: none;
}

.invite__actions form {
    margin: 0;
}

.invite__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    /* The button token, so a touch screen gets its 44px (K12); a second, later rule that forced
       44px everywhere was folded in here (UIhataları 58/82 sweep). */
    min-height: var(--es-h-btn);
}

.invite__actions .btn svg {
    width: 16px;
    height: 16px;
}

.invite__actions .btn-outline-secondary {
    background: var(--es-surface);
}

@media (max-width: 575.98px) {
    .invites {
        padding: 16px;
        border-radius: var(--es-r-lg);
    }

    .invite__actions {
        flex: 1 1 100%;
    }

    .invite__actions form {
        flex: 1 1 0;
    }

    .invite__actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
}

/* ------------------------------------- the mode chooser, /start (plan job 6.11, design.md §7.3)

   me-Start-B: the "Merhaba" capsule in the ember over the question in the display face with its
   last word light, the invitations card, then the two ways in side by side — the ember panel
   "Katılımcı olarak devam et" (the footer call's gradient tokens, --es-cta-*, so it is the same
   ember in both themes) with the next ticket on a white card (upright, UIhataları 40) inside it, and the
   organizations two to a row. A suspended organization's card takes the warning tint, a closed
   one is flat and greyed, the pending request is a dashed outline. Below lg the panel and the
   cards stack; under 576px the cards go one to a row. */

.start {
    display: grid;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 0 72px;
}

.start > .invites {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
}

.start__intro {
    display: grid;
    justify-items: center;
    gap: 16px;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.start__hello {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: var(--es-r-pill);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-size: .9375rem;
    font-weight: 700;
    box-shadow: 0 10px 24px -14px var(--es-brand-shadow);
}

.start__hello svg {
    width: 16px;
    height: 16px;
}

.start__title {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-display);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.02;
    color: var(--es-ink);
}

.start__title-soft {
    color: var(--es-muted);
    font-weight: 300;
}

.start__account {
    margin: 0;
    color: var(--es-muted);
    font-size: .875rem;
    font-weight: 600;
}

/* Inline rather than a flex item, so a long address wraps under the icon instead of leaving it
   alone at the edge of a phone. */
.start__account svg {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -3px;
}

.start__account-mail {
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.start__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

@media (min-width: 992px) {
    .start__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .start__grid--solo {
        grid-template-columns: minmax(0, 1fr);
        max-width: 640px;
        width: 100%;
        margin: 0 auto;
    }
}

/* ---- "Katılımcı olarak devam et" */

.start-go {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    min-height: 420px;
    padding: 36px;
    border-radius: var(--es-r-band);
    background-color: var(--es-cta-from);
    background-image: radial-gradient(circle at 88% 0%, var(--es-cta-shine), transparent 55%),
        linear-gradient(135deg, var(--es-cta-from), var(--es-cta-to));
    box-shadow: 0 34px 70px -40px var(--es-cta-glow);
    color: var(--es-on-ember);
    text-decoration: none;
    transition: transform var(--es-dur-fast) var(--es-ease), box-shadow var(--es-dur-fast) var(--es-ease);
}

.start-go:hover {
    color: var(--es-on-ember);
    transform: translateY(-2px);
    box-shadow: 0 40px 80px -40px var(--es-cta-glow);
}

.start-go:focus-visible {
    outline: 3px solid var(--es-ink);
    outline-offset: 3px;
}

.start-go__spark {
    position: absolute;
    top: -40px;
    right: -30px;
    line-height: 0;
    color: var(--es-on-ember-faint);
    pointer-events: none;
}

.start-go__spark svg {
    width: 180px;
    height: 180px;
}

.start-go__head {
    position: relative;
    display: grid;
    justify-items: start;
    gap: 16px;
}

.start-go__icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--es-on-ember-faint);
}

.start-go__icon svg {
    width: 24px;
    height: 24px;
}

.start-go__title {
    font-family: var(--es-font-display);
    font-size: var(--es-fs-title);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.05;
}

.start-go__title-soft {
    font-weight: 300;
}

.start-go__lead {
    max-width: 360px;
    color: var(--es-on-ember-soft);
    font-size: 1.0625rem;
}

.start-go__foot {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

/* The next ticket, without its code (B-14): a white card, standing straight — no box is tilted
   anywhere (UIhataları 40; icons may still turn). */
.start-go__ticket {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 260px;
    max-width: 100%;
    padding: 14px;
    border-radius: var(--es-r-lg);
    background: var(--es-paper);
    color: var(--es-paper-ink);
    box-shadow: 0 30px 60px -20px var(--es-photo-shadow);
}

.start-go__ticket .icbox {
    background: var(--es-on-ember-soft);
    color: var(--es-on-ember-ink);
}

.start-go__ticket-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.start-go__ticket-kicker {
    font-size: .75rem;
    font-weight: 700;
    color: var(--es-on-ember-ink);
}

.start-go__ticket-name {
    font-family: var(--es-font-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.start-go__ticket-when {
    font-size: .75rem;
    font-weight: 600;
    opacity: .75;
}

.start-go__button {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 52px;
    padding: 0 24px;
    border-radius: var(--es-r-btn);
    background: var(--es-on-ember);
    color: var(--es-on-ember-ink);
    font-weight: 700;
    box-shadow: 0 12px 26px -14px var(--es-photo-shadow);
}

.start-go:hover .start-go__button {
    background: var(--es-on-ember-hover);
}

.start-go__button svg {
    width: 18px;
    height: 18px;
}

/* ---- the organizations */

.start-orgs {
    display: grid;
    align-content: start;
    gap: 16px;
}

.start-orgs__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 4px 8px;
}

.start-orgs__title {
    margin: 0;
    font-size: .9375rem;
    color: var(--es-ink);
}

.start-orgs__grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.start-orgs__grid > li {
    display: flex;
    min-width: 0;
}

.start-org {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-height: 220px;
    padding: 24px;
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    box-shadow: var(--es-card-shadow);
    color: var(--es-ink);
    text-decoration: none;
    transition: transform var(--es-dur-fast) var(--es-ease), border-color var(--es-dur-fast) var(--es-ease),
        box-shadow var(--es-dur-fast) var(--es-ease);
}

a.start-org:hover {
    color: var(--es-ink);
    border-color: var(--es-glow-line-hover);
    box-shadow: var(--es-card-shadow-hover);
    transform: translateY(-2px);
}

a.start-org:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 3px;
}

.start-org__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.start-org__mark {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-family: var(--es-font-display);
    font-size: 1.125rem;
    font-weight: 700;
}

.start-org__mark--logo {
    padding: 5px;
    object-fit: contain;
    background: var(--es-paper);
    border: 1px solid var(--es-line);
}

.start-org__go {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--es-fill);
    color: var(--es-ink);
}

.start-org__go svg {
    width: 18px;
    height: 18px;
}

a.start-org:hover .start-org__go {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.start-org__body {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.start-org__name {
    font-family: var(--es-font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.start-org__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.start-org__meta {
    color: var(--es-muted);
    font-size: .8125rem;
    font-weight: 600;
}

.start-org__foot {
    margin-top: auto;
    color: var(--es-brand);
    font-size: .8125rem;
    font-weight: 700;
}

.start-org--suspended {
    background: var(--es-warn-soft);
    border-color: var(--es-warn-border);
}

.start-org--suspended .start-org__foot {
    color: var(--es-warn);
}

.start-org--closed {
    background: var(--es-fill);
    border-color: transparent;
    box-shadow: none;
    color: var(--es-muted);
}

.start-org--closed .start-org__mark {
    opacity: .6;
}

.start-org--closed .start-org__go {
    background: var(--es-surface);
    color: var(--es-faint);
}

.start-org--request {
    background: transparent;
    border: 2px dashed var(--es-line-strong);
    box-shadow: none;
}

.start-org__action {
    align-self: flex-start;
    margin-top: auto;
    min-height: 40px;
}

.start__note {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    gap: 10px;
    margin: 0;
    padding: 12px 20px;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-muted);
    font-size: .875rem;
    font-weight: 600;
    text-align: center;
}

.start__note svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

@media (max-width: 575.98px) {
    .start {
        gap: 28px;
        padding-top: 8px;
    }

    .start-go {
        min-height: 0;
        padding: 26px 22px;
        border-radius: var(--es-r-xl);
    }

    .start-go__button {
        width: 100%;
        justify-content: center;
    }

    .start-go__ticket {
        width: 100%;
    }

    .start-orgs__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .start-org {
        min-height: 0;
        padding: 20px;
    }

    .start__note {
        border-radius: var(--es-r-lg);
    }
}

/* ------------------------------- public member profile (/u/{slug}; plan job 5.5, design.md §7.x)

   site2-Profile-B with C's additions (plan §2.1): the owner's band on top, B's tinted hero with
   the big portrait and the score badge on it, the about card and three counts, the events as
   show-cards with "Tümü" opening in place, sessions grouped under their events, the talks as
   "Yaklaşan / Konuştu"; C's section menu beside the lists, C's score breakdown (a stack bar —
   never C's percentage ring: the score has no ceiling), C's hall and time on a talk.

     .profile-own       the owner's band (B): what is hidden, and "Profili düzenle".
     .profile-hero      the tinted panel: .profile-hero__portrait with .profile-score, the text.
     .profile-summary   the about card and up to three .profile-stat tiles.
     .profile-body      .profile-nav beside .profile-body__main from 992px.
     .profile-events / .profile-more   the event grid and its in-place "Tümü".
     .profile-groups / .profile-group  sessions under their events.
     .profile-talks / .profile-talk    the speaking history.
*/

.profile-own {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin: -.5rem 0 1.25rem;
    padding: .5rem .5rem .5rem 1.4rem;
    border: 1px solid var(--es-brand-border);
    border-radius: var(--es-r-xl);
    background: var(--es-brand-soft);
}

.profile-own__text {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    flex: 1 1 24rem;
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    color: var(--es-ink);
}

.profile-own__text svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--es-brand);
}

.profile-own__edit {
    border-radius: var(--es-r-pill);
}

.profile-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-bottom: 1rem;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    overflow: hidden;
    border-radius: var(--es-r-band);
    background:
        radial-gradient(ellipse 45% 70% at 100% 0%, var(--es-brand-soft), transparent 70%),
        var(--es-fill);
    border: 1px solid var(--es-line);
}

.profile-hero__portrait {
    position: relative;
    justify-self: center;
}

/* The portrait in a ring of the page's own colour (B), cropped to its circle like every face. */
.profile-hero__photo {
    width: clamp(9rem, 18vw, 16rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--es-surface);
    box-shadow: 0 0 0 8px var(--es-page), var(--es-shadow-3);
}

.profile-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-hero__initials {
    font-family: var(--es-font-display);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -.05em;
    color: var(--es-brand);
}

/* The score on the portrait's edge (B): an ember disc, the number in the display face. */
.profile-score {
    position: absolute;
    right: -6%;
    bottom: 2%;
    width: clamp(5.5rem, 9vw, 7.5rem);
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .2rem;
    padding: .5rem;
    border-radius: 50%;
    background: var(--es-brand);
    color: var(--es-brand-ink);
    box-shadow: 0 0 0 6px var(--es-page), 0 18px 36px -14px var(--es-brand-shadow);
    text-align: center;
}

.profile-score__value {
    font-family: var(--es-font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.profile-score__label {
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.15;
}

.profile-hero__text {
    display: grid;
    align-content: center;
    gap: 1.1rem;
    min-width: 0;
}

.profile-hero__name {
    margin: 0;
    font-size: var(--es-fs-display);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

/* B's second line of the title, dimmed: what the person does. */
.profile-hero__headline {
    display: block;
    margin-top: .35rem;
    font-size: .55em;
    letter-spacing: -.035em;
    line-height: 1.15;
    color: var(--es-muted);
}

.profile-hero__pills,
.profile-hero__links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-hero__links .btn {
    background: var(--es-surface);
}

.profile-breakdown {
    max-width: 34rem;
}

.profile-breakdown .chart {
    margin: 0;
}

/* The about card beside the counts (B): the card takes what the tiles leave of the row. */
.profile-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(var(--profile-stats, 0), minmax(9rem, 11rem));
    gap: 1rem;
    margin-bottom: 3rem;
}

.profile-summary--1 { --profile-stats: 1; }
.profile-summary--2 { --profile-stats: 2; }
.profile-summary--3 { --profile-stats: 3; }

.profile-summary--nobio {
    grid-template-columns: repeat(var(--profile-stats), minmax(0, 13rem));
}

.profile-about {
    display: grid;
    align-content: start;
    gap: .6rem;
    padding: 1.6rem 1.75rem;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    scroll-margin-top: 88px;
}

.profile-about h2.kicker {
    margin: 0;
}

.profile-about__text {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--es-body);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* B's three tiles: ink, ember tint, ember — the counts of what the page lists below. */
.profile-stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 10rem;
    padding: 1.4rem;
    border-radius: var(--es-r-xl);
}

.profile-stat--ink {
    background: var(--es-ink);
    color: var(--es-page);
}

.profile-stat--ink .icbox {
    background: var(--es-wash-strong);
    color: var(--es-brand);
}

.profile-stat--soft {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    border: 1px solid var(--es-brand-border);
}

.profile-stat--soft .icbox {
    background: var(--es-surface);
    color: var(--es-brand);
}

.profile-stat--ember {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

/* The peach box is fixed in both themes, so its glyph takes the fixed ember ink (as on /start)
   rather than --es-brand-ink, which is white on light (UIhataları 38). */
.profile-stat--ember .icbox {
    background: var(--es-on-ember-soft);
    color: var(--es-on-ember-ink);
}

.profile-stat__figure {
    display: grid;
}

.profile-stat__value {
    font-family: var(--es-font-display);
    font-size: clamp(2.2rem, 3vw, 3rem);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.profile-stat__label {
    font-size: .8rem;
    font-weight: 650;
    opacity: .8;
}

/* C's section menu beside the lists; a scrolling row of links above them on a phone. */
.profile-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* Relative for the same reason as .org-tabbar .tabs: the counts' hidden commas stay inside. */
.profile-nav ul {
    position: relative;
    display: flex;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.profile-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-muted);
    font-size: .89rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.profile-nav a:hover {
    color: var(--es-ink);
    background: var(--es-fill-2);
}

.profile-body__main {
    display: grid;
    gap: 3.5rem;
    min-width: 0;
}

@media (min-width: 992px) {
    .profile-body {
        grid-template-columns: 14rem minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }

    .profile-nav {
        position: sticky;
        top: 96px;
    }

    .profile-nav ul {
        flex-direction: column;
        overflow: visible;
    }

    .profile-nav a {
        border-radius: var(--es-r);
        background: transparent;
    }
}

.profile-section {
    scroll-margin-top: 88px;
}

.profile-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.profile-section__title {
    margin: 0;
    font-size: clamp(1.4rem, 1rem + 1vw, 2rem);
    font-weight: 700;
    letter-spacing: -.04em;
    color: var(--es-ink);
}

.profile-events {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: 1rem;
}

/* "Tümü" in place (plan job 5.5): a <details>, so it opens with script off; the label says
   what pressing it will do now. */
.profile-more {
    margin-top: 1rem;
}

.profile-more > summary {
    list-style: none;
    cursor: pointer;
}

.profile-more > summary::-webkit-details-marker {
    display: none;
}

.profile-more > .profile-events {
    margin-top: 1rem;
}

.profile-more__close,
.profile-more[open] .profile-more__open {
    display: none;
}

.profile-more[open] .profile-more__close {
    display: inline;
}

.profile-more[open] .profile-more__toggle svg {
    transform: rotate(180deg);
}

.profile-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
    align-items: start;
}

.profile-group {
    display: grid;
    gap: .75rem;
    padding: 1.25rem;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.profile-group__head {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 48px;
    color: var(--es-ink);
    text-decoration: none;
}

.profile-group__head:hover .profile-group__event {
    color: var(--es-brand-strong);
}

.profile-group__thumb {
    color-scheme: var(--es-scheme-dark);
    width: 64px;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: var(--es-r-sm);
    background: var(--es-cat-ink);
}

.profile-group__thumb.show-card__cover {
    aspect-ratio: 16 / 9;
}

.profile-group__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-group__titles {
    display: grid;
    min-width: 0;
}

.profile-group__event {
    font-family: var(--es-font-display);
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.profile-group__meta {
    font-size: .8rem;
    color: var(--es-muted);
}

.profile-group__rows {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-group__row {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    padding: .7rem .9rem;
    border-radius: var(--es-r);
    background: var(--es-fill);
    font-size: .875rem;
}

.profile-group__time {
    flex: 0 0 3rem;
    font-weight: 750;
    color: var(--es-brand);
    font-variant-numeric: tabular-nums;
}

.profile-group__session {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.profile-group__room {
    flex: 0 0 auto;
    font-size: .78rem;
    color: var(--es-muted);
}

.profile-talks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-talk {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.25rem;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    color: var(--es-ink);
    text-decoration: none;
    transition: transform var(--es-dur-fast) var(--es-ease), border-color var(--es-dur-fast) var(--es-ease),
        box-shadow var(--es-dur-fast) var(--es-ease);
}

.profile-talk:hover {
    transform: translateY(-2px);
    border-color: var(--es-glow-line-hover);
    box-shadow: var(--es-card-shadow-hover);
    color: var(--es-ink);
}

.profile-talk__text {
    display: grid;
    gap: .3rem;
    flex: 1 1 auto;
    min-width: 0;
}

.profile-talk__title {
    font-family: var(--es-font-display);
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -.025em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.profile-talk__meta {
    font-size: .8rem;
    color: var(--es-muted);
}

.profile-talk > .pill {
    flex: 0 0 auto;
}

.profile-nothing {
    margin-bottom: 3rem;
}

@media (max-width: 991.98px) {
    .profile-summary,
    .profile-summary--nobio {
        grid-template-columns: repeat(var(--profile-stats, 1), minmax(0, 1fr));
    }

    .profile-about {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .profile-hero {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        border-radius: var(--es-r-xl);
    }

    .profile-hero__portrait {
        justify-self: start;
    }

    .profile-stat {
        min-height: 8rem;
        padding: 1.1rem;
    }

    .profile-talk {
        flex-wrap: wrap;
    }
}

/* Two small cards to a row on a phone rather than one tall one each. */
@media (max-width: 575.98px) {
    .profile-events {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }
}

/* ------------------------------------------- event application page (AD-21, plan job 3.7)
   A page of its own, outside the site shell: no site header, no navigation, one thing to do.
   B's auth-Apply screen (DD-24): a plain pill strip on top (plan decision A-7), then the form in
   the wide left card and the event in the right one, both white boxes floating on the work
   shells' warm-grey ground. Two themes like every other page (DD-5 as amended); in the dark one
   the boxes take the ember edge (DD-24). */
.apply-shell {
    min-height: 100vh;
    margin: 0;
    background: var(--es-app-ground);
    color: var(--es-body);
    display: flex;
    flex-direction: column;
    padding: 20px 16px 0;
}

@media (min-width: 62em) {
    .apply-shell {
        padding: 20px 32px 0;
    }
}

/* ---- the strip (A-7): the name, the event, the way back. Nothing else to click. */

.apply-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 82rem;
    margin: 0 auto;
    padding: 8px 8px 8px 20px;
    border-radius: var(--es-r-pill);
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    box-shadow: var(--es-card-shadow);
}

/* 44px tall so the name is a real target on a phone, as .auth-art__brand. */
.apply-strip__brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* The event's name may be long; it gives way before the name or the button does. */
.apply-strip__context {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-size: var(--es-fs-sm);
    font-weight: 600;
    color: var(--es-muted);
}

.apply-strip__context svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--es-dot-ok);
}

.apply-strip__event {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--es-ink);
}

.apply-strip__secure {
    flex: none;
    white-space: nowrap;
}

.apply-strip__actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.apply-strip__back {
    border-radius: var(--es-r-pill);
}

/* The small button is 36px; a finger needs 44 (plan §3, touch targets). */
@media (pointer: coarse), (max-width: 575.98px) {
    .apply-strip__back {
        min-height: 44px;
    }
}

/* A phone keeps the name, the theme and the way back; the event's name is the first thing in the
   card right below. */
@media (max-width: 47.99em) {
    .apply-strip__context {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .apply-strip {
        gap: .5rem;
        padding-left: 16px;
    }

    .apply-strip__back {
        padding-inline: .7rem;
    }
}

/* ---- the two boxes */

.apply-shell__inner {
    flex: 1 1 auto;
    width: 100%;
    max-width: 82rem;
    margin: 0 auto;
    padding: var(--es-space-5) 0 var(--es-space-4);
    display: grid;
    gap: var(--es-space-4);
    align-content: start;
}

@media (min-width: 62em) {
    .apply-shell__inner {
        padding-top: var(--es-space-6);
    }
}

/* One column on a phone, in the source's order. The summary is two boxes (plan job 6.1): the
   event itself (.apply-event) and its description and programme (.apply-more). On the form page
   the order is event, card, details — somebody who just left a conference's website recognises
   where they landed (AD-21) and then reaches the first field without scrolling past a whole
   programme; on the code and result steps the card comes first. From lg the card takes the wide
   left column across both rows and the two boxes stack on the right (auth-Apply-B), whatever the
   source order; the second row is 1fr, so a tall card never pushes the details away from the
   summary above them. */
.apply-shell__grid {
    display: grid;
    gap: var(--es-space-4);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 62em) {
    .apply-shell__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-rows: auto 1fr;
        column-gap: var(--es-space-6);
        row-gap: var(--es-space-4);
    }

    .apply-shell__grid > .apply-card {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .apply-shell__grid > .apply-event {
        grid-column: 2;
        grid-row: 1;
    }

    .apply-shell__grid > .apply-more {
        grid-column: 2;
        grid-row: 2;
    }
}

.apply-shell__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    padding: 1.25rem 0 2rem;
    font-size: var(--es-fs-xs);
    color: var(--es-faint);
}

.apply-shell__foot a {
    color: var(--es-muted);
    text-decoration: none;
}

.apply-shell__foot a:hover {
    color: var(--es-ink);
    text-decoration: underline;
}

.apply-shell__foot strong {
    color: var(--es-muted);
    font-weight: 600;
}

.apply-shell__dot {
    opacity: .5;
}

.apply-shell__secure {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    line-height: 1.5;
}

.apply-shell__secure svg {
    width: .9rem;
    height: .9rem;
}

/* The one EventStage on the bottom line, with its mark (T55). */
.apply-shell__credit {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    line-height: 1.5;
}

.apply-shell__credit img {
    width: 18px;
    height: 18px;
    flex: none;
}

/* ---- the event, right (below lg: first on the form page). Two surface boxes with the glow edge:
   the summary and, under it, the description and the programme (plan job 6.1). */

.apply-event,
.apply-more {
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    box-shadow: var(--es-card-shadow);
    overflow: hidden;
}

/* The event's own cover, at the one ratio every cover on the site uses (A-3, 4.8), set into the
   box with B's narrow margin; the date block and the session count ride on it as on a card. */
.apply-event__cover {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: var(--es-space-2);
    border-radius: calc(var(--es-r-xl) - 6px);
    overflow: hidden;
    background: var(--es-fill);
}

.apply-event__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.apply-event__cover .date-block {
    top: 14px;
    left: 14px;
}

/* B's glass pill over the photograph: the photo-chip scrim, dark in both themes like every chip
   on a cover (.show-card__status). */
.apply-event__count {
    color-scheme: var(--es-scheme-dark);
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .25rem .8rem;
    border-radius: var(--es-r-pill);
    background: var(--es-photo-chip);
    backdrop-filter: blur(3px);
    color: var(--es-ink);
    font-size: .8rem;
    font-weight: 700;
}

.apply-event__body {
    padding: var(--es-space-1) var(--es-space-5) var(--es-space-5);
}

@media (min-width: 62em) {
    .apply-event__body {
        padding: var(--es-space-2) var(--es-space-6) var(--es-space-6);
    }
}

.apply-event__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: var(--es-space-3);
}

.apply-event__followers {
    min-height: 22px;
    padding: .1rem .6rem;
    font-size: var(--es-fs-xs);
}

/* "Kayıtlar açık" (C), over the name. */
.apply-event__state {
    margin: 0 0 .6rem;
}

.apply-event__logo {
    /* Light in both themes: a white logo tile (--es-paper), so what is drawn on it — a name,
       an initial, a placeholder glyph — takes the light-theme ink. */
    color-scheme: light;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    border-radius: var(--es-r-sm);
    padding: 3px;
    background: var(--es-paper);
    border: 1px solid var(--es-line);
    display: grid;
    place-items: center;
    overflow: hidden;
    /* The organization's initials when it has no logo (DisplayText.Initials). */
    color: var(--es-ink);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* Contained, never cropped: a logo is the one image that must keep its own edges (4.8). */
.apply-event__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.apply-event__org {
    min-width: 0;
    font-size: var(--es-fs-sm);
    font-weight: 700;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.apply-event__title {
    /* Unbounded (DD-6): a line height that keeps the dot of İ clear of the line above. On the
       T1 scale (UIhataları 50, 81): an h1's size, no longer up to 2.4rem beside the form. */
    font-size: var(--es-fs-h1);
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 700;
    color: var(--es-ink);
    overflow-wrap: anywhere;
    margin: 0 0 var(--es-space-4);
}

/* The facts as B's quiet chips. */
.apply-event__facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.apply-event__fact {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    padding: .5rem .75rem;
    border-radius: var(--es-r);
    background: var(--es-fill);
    font-size: var(--es-fs-sm);
    font-weight: 600;
    line-height: 1.4;
    color: var(--es-ink);
}

.apply-event__fact svg {
    width: 1rem;
    height: 1rem;
    color: var(--es-brand);
    flex: none;
}

/* A long venue wraps inside its chip rather than out of the box (UIhataları 81). */
.apply-event__fact > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.apply-event__zone {
    color: var(--es-muted);
    font-weight: 500;
}

/* ---- the second box: what the event is about, and the programme's first rows (plan job 6.1) */

.apply-more {
    display: grid;
    gap: var(--es-space-5);
    padding: var(--es-space-5);
}

@media (min-width: 62em) {
    .apply-more {
        padding: var(--es-space-6);
    }
}

.apply-more__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
}

.apply-more__head .apply-more__label {
    margin: 0;
}

.apply-more__label {
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h3);
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--es-ink);
    margin: 0 0 .6rem;
}

/* The organizer typed paragraphs; collapsing them into one run-on is not what they wrote.
   Long words in Turkish are what overflow a narrow column, so this one breaks rather than spills. */
.apply-more__text {
    white-space: pre-line;
    overflow-wrap: anywhere;
    font-size: var(--es-fs-body);
    line-height: 1.6;
    color: var(--es-muted);
}

/* ---- the programme (AD-21): one quiet row per session, the start time in a tile */

.apply-prog__day {
    font-size: .82rem;
    font-weight: 700;
    color: var(--es-ink);
    margin: 1rem 0 .5rem;
}

.apply-prog {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .4rem;
}

.apply-prog__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    padding: .55rem;
    border-radius: var(--es-r);
    background: var(--es-fill);
}

.apply-prog__time {
    display: grid;
    justify-items: center;
    min-width: 3.2rem;
    padding: .3rem .5rem;
    border-radius: var(--es-r-sm);
    background: var(--es-surface);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.apply-prog__start {
    font-size: .85rem;
    font-weight: 800;
    color: var(--es-ink);
}

.apply-prog__end {
    font-size: .72rem;
    color: var(--es-muted);
}

.apply-prog__body {
    display: grid;
    gap: .1rem;
    min-width: 0;
    padding-top: .1rem;
}

.apply-prog__name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

/* "Salon · konuşmacılar": B's one meta line under the name. */
.apply-prog__meta {
    font-size: .8rem;
    color: var(--es-muted);
    overflow-wrap: anywhere;
}

/* "ve N oturum daha": the rest is on the event's page, which the strip links to (A-7). */
.apply-prog__more {
    margin: .75rem 0 0;
    font-size: var(--es-fs-sm);
    color: var(--es-muted);
}

/* ---- the form, left (below lg: second) */

.apply-card {
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    box-shadow: var(--es-card-shadow);
    padding: clamp(var(--es-space-5), 1rem + 1.6vw, var(--es-space-7));
    color: var(--es-body);
}

.apply-card__head {
    margin-bottom: var(--es-space-5);
}

.apply-card__title {
    font-size: var(--es-fs-h1);
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 700;
    color: var(--es-ink);
    margin: 0 0 .5rem;
}

.apply-card__lead {
    font-size: var(--es-fs-body);
    line-height: 1.5;
    color: var(--es-muted);
    margin: 0 0 var(--es-space-4);
}

.apply-card__head .apply-card__lead {
    margin-bottom: 0;
}

.apply-card__lead strong {
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

/* Which of the two steps this is: B's numbered pills (plan job 6.1) — the current one in the
   accent, a finished one ticked, the next one quiet — and "Adım n / 2" beside them. */
.apply-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: 0 0 var(--es-space-5);
}

.apply-steps__list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.apply-steps__item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 36px;
    padding: 0 .875rem 0 6px;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
    font-weight: 700;
}

.apply-steps__num {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: var(--es-surface);
    font-size: var(--es-fs-xs);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.apply-steps__num svg {
    width: 14px;
    height: 14px;
}

.apply-steps__item.is-current {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.apply-steps__item.is-current .apply-steps__num {
    background: color-mix(in srgb, var(--es-brand-ink) 22%, transparent);
    color: var(--es-brand-ink);
}

.apply-steps__item.is-done {
    color: var(--es-ink);
}

.apply-steps__item.is-done .apply-steps__num {
    background: var(--es-ok-soft);
    color: var(--es-ok);
}

.apply-steps__count {
    font-size: var(--es-fs-xs);
    font-weight: 700;
    color: var(--es-muted);
}

/* B's two-part title on the form ("Hemen başvurun / iki adımda."), the second line quieter.
   A showcase title, not a hero's (UIhataları 81): at most --es-fs-title. */
.apply-card__title--big {
    font-size: var(--es-fs-title);
    line-height: 1.12;
}

.apply-card__title-dim {
    display: block;
    color: var(--es-faint);
}

/* A red small enough to sit under a field (design.md 4.5). */
.apply-card .text-danger {
    font-size: .8rem;
}

/* The tick box lays out its own row (see .form-check above); the consent links take the accent. */
.apply-card .form-check-label a {
    color: var(--es-brand-strong);
}

/* The form's own rhythm: one gap between its blocks instead of a margin on each. */
.apply-form {
    display: grid;
    gap: var(--es-space-5);
}

/* An empty validation summary renders hidden; a shown one takes its place in the rhythm. */
.apply-form > [hidden] {
    display: none;
}

/* The four fixed fields two by two (auth-Apply-B); one column on a phone. */
.apply-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--es-space-4);
}

@media (min-width: 36em) {
    .apply-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* B's "İsteğe bağlı" tag beside a label. */
.apply-opt {
    margin-left: .35rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--es-muted);
}

/* "Ayşe Yılmaz olarak başvuruyorsunuz" (auth-Apply-B, plan job 6.1): the account the one-button
   path will register, in a capsule over the title. */
.apply-as {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    max-width: 100%;
    margin: 0 0 var(--es-space-4);
    padding: 6px 1rem 6px 6px;
    /* Half the one-line height: one line still reads as a capsule, a wrapped name as a rounded
       box (UIhataları 81). */
    border-radius: calc(1rem + 6px);
    border: 1px solid var(--es-line);
    background: var(--es-surface);
    box-shadow: var(--es-shadow-1);
    font-size: var(--es-fs-sm);
    line-height: 1.5;
    color: var(--es-muted);
}

.apply-as strong {
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.apply-as__text {
    min-width: 0;
}

.apply-as__avatar {
    width: 2rem;
    height: 2rem;
    font-size: .75rem;
}

/* What the form shows but does not accept (the account's address and number): B's two tiles. */
.apply-fixed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .75rem;
    margin: 0 0 var(--es-space-5);
}

.apply-fixed__item {
    display: grid;
    gap: .15rem;
    min-width: 0;
    padding: var(--es-space-3) var(--es-space-4);
    border-radius: var(--es-r);
    background: var(--es-fill);
}

.apply-fixed__item dt {
    color: var(--es-muted);
    font-size: var(--es-fs-xs);
    font-weight: 600;
}

.apply-fixed__item dd {
    margin: 0;
    color: var(--es-ink);
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* The receipt's closing line, under a rule. */
.apply-card__foot {
    margin: var(--es-space-5) 0 0;
    padding-top: var(--es-space-4);
    border-top: 1px solid var(--es-line);
    font-size: var(--es-fs-sm);
    color: var(--es-muted);
    text-align: center;
}

/* B's tinted notice: the accent's soft wash with the icon in a small filled disc. The disc is a
   line's height, no longer a 32px box that sat low beside a 20px line (UIhataları 81). Centred is
   the fallback for a browser without lh; T2's first-line block switches it to flex-start. */
.apply-card__note {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: var(--es-space-3) var(--es-space-4);
    margin-bottom: var(--es-space-4);
    border-radius: var(--es-r);
    background: var(--es-brand-soft);
    font-size: var(--es-fs-sm);
    line-height: 1.5;
    color: var(--es-ink);
}

/* The bot trap: off-screen rather than display:none, because some form fillers skip anything
   that is not rendered. No label a person can reach, and aria-hidden so a screen reader never
   announces it. */
.apply-card__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.apply-form > .apply-card__note {
    margin: 0;
}

.apply-card__note-icon {
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    border-radius: 50%;
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.apply-card__note-icon svg {
    width: .75rem;
    height: .75rem;
    stroke-width: 2.25;
}

/* ---- the organizer's questions (AD-21, plan job 6.1): B's soft box with the organization's mark
   in its head; the fields inside it take the surface, so they still read as fields on the fill. */

.apply-questions {
    display: grid;
    gap: var(--es-space-5);
    padding: var(--es-space-4);
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

@media (min-width: 36em) {
    .apply-questions {
        padding: var(--es-space-5);
    }
}

.apply-questions .form-control {
    background-color: var(--es-surface);
}

/* The logo is taller than a line and sits beside a title and a sub line that may wrap, so it
   stays at the top (UIhataları 81). */
.apply-questions__head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.apply-questions__text {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.apply-questions__title {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h3);
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--es-ink);
}

.apply-questions__sub {
    font-size: var(--es-fs-sm);
    color: var(--es-muted);
}

/* One question. A fieldset for every kind, so a choice's legend and a text's label sit alike. */
.apply-q {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.apply-q__label {
    float: none;
    width: auto;
    display: block;
    padding: 0;
}

.apply-q__help {
    margin: -.15rem 0 .6rem;
}

.apply-q__error {
    display: block;
    margin-top: .4rem;
}

.apply-q.is-invalid .form-control {
    border-color: var(--es-bad);
}

/* A single choice as B's radio cards, a multiple choice as chips. The input is the real one —
   visually hidden, never display:none, so it keeps the tab order, the arrow keys and the form
   post — and the face right after it draws the state, so no :has() and no script is needed. */
.apply-choices,
.apply-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.apply-choice,
.apply-chip {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.apply-choice {
    flex: 1 1 9rem;
}

.apply-choice__input,
.apply-chip__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.apply-choice__face {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: var(--es-h-field);
    height: 100%;
    padding: .6rem .875rem;
    border-radius: var(--es-r);
    background: var(--es-surface);
    box-shadow: inset 0 0 0 1px var(--es-edge);
    font-size: var(--es-fs-body);
    font-weight: 650;
    line-height: 1.4;
    color: var(--es-ink);
    overflow-wrap: anywhere;
    transition: box-shadow var(--es-dur-fast) var(--es-ease), background-color var(--es-dur-fast) var(--es-ease);
}

.apply-choice__dot {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--es-edge);
    background: var(--es-surface);
    transition: border-width var(--es-dur-fast) var(--es-ease), border-color var(--es-dur-fast) var(--es-ease);
}

.apply-choice:hover .apply-choice__face {
    box-shadow: inset 0 0 0 1px var(--es-brand);
}

.apply-choice__input:checked + .apply-choice__face {
    background: var(--es-brand-soft);
    box-shadow: inset 0 0 0 2px var(--es-brand);
}

.apply-choice__input:checked + .apply-choice__face .apply-choice__dot {
    border: 5px solid var(--es-brand);
}

.apply-chip__face {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    /* --es-h-btn is 44px on a touch screen, so the target stays 44 there (T1). */
    min-height: var(--es-h-btn);
    max-width: 100%;
    padding: 0 1rem 0 .8rem;
    border-radius: calc(var(--es-h-btn) / 2);
    background: var(--es-surface);
    box-shadow: inset 0 0 0 1px var(--es-edge);
    font-size: .875rem;
    font-weight: 650;
    line-height: 1.4;
    color: var(--es-ink);
    overflow-wrap: anywhere;
    transition: box-shadow var(--es-dur-fast) var(--es-ease), background-color var(--es-dur-fast) var(--es-ease);
}

.apply-chip__mark {
    display: inline-flex;
    flex: none;
}

.apply-chip__mark svg {
    width: 15px;
    height: 15px;
}

.apply-chip__mark--off {
    color: var(--es-muted);
}

.apply-chip__mark--on,
.apply-chip__input:checked + .apply-chip__face .apply-chip__mark--off {
    display: none;
}

.apply-chip__input:checked + .apply-chip__face .apply-chip__mark--on {
    display: inline-flex;
}

.apply-chip:hover .apply-chip__face {
    box-shadow: inset 0 0 0 1px var(--es-brand);
}

.apply-chip__input:checked + .apply-chip__face {
    background: var(--es-brand);
    box-shadow: none;
    color: var(--es-brand-ink);
}

.apply-choice__input:focus-visible + .apply-choice__face,
.apply-chip__input:focus-visible + .apply-chip__face {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.apply-q.is-invalid .apply-choice__face,
.apply-q.is-invalid .apply-chip__face {
    box-shadow: inset 0 0 0 2px var(--es-bad-box-line);
}

/* Under the button: the deadline as a quiet pill and the way to sign in instead. */
.apply-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-top: var(--es-space-5);
    font-size: var(--es-fs-sm);
    color: var(--es-muted);
}

/* "Son başvuru: 14 Ekim, 18:00". A pill is nowrap everywhere else. This one wraps on a phone
   instead of running out of the card (UIhataları 81); T2's block puts the clock on its first
   line. */
.apply-card__deadline {
    max-width: 100%;
    white-space: normal;
    line-height: 1.4;
    padding-block: .25rem;
    border-radius: var(--es-r);
}

.apply-card__deadline > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.apply-card__signin a {
    color: var(--es-brand-strong);
    font-weight: 600;
}

/* Two answers side by side: "Katılımlarım" and the event's page. */
.apply-card__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-space-2);
    margin-top: var(--es-space-5);
}

/* ---- the states without a form (auth-Apply-B's "diğer haller", plan job 6.1): the reason with
   its own icon and tone, so a cancellation does not look like a window that has not opened yet. */

.apply-gate {
    display: grid;
    justify-items: start;
    gap: var(--es-space-3);
}

.apply-gate .kicker,
.apply-gate .apply-card__title {
    margin: 0;
}

.apply-gate__message {
    margin: 0;
    padding: .7rem 1rem;
    border-radius: var(--es-r);
    font-weight: 650;
    background: var(--es-fill);
    color: var(--es-ink);
}

.apply-gate__message--bad {
    background: var(--es-bad-box);
    color: var(--es-bad-box-text);
}

.apply-gate__message--warn {
    background: var(--es-warn-box);
    color: var(--es-warn-box-text);
}

.apply-gate__message--info {
    background: var(--es-info-soft);
    color: var(--es-info);
}

.apply-gate__message--brand {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
}

.apply-gate .btn {
    margin-top: .35rem;
}

/* Already registered, queued, waiting or declined: the tone's icon, and on the queue B's big
   figure for the place in it. */
.apply-standing__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: var(--es-space-4);
}

.apply-standing__figure {
    font-family: var(--es-font-display);
    font-size: var(--es-fs-title);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

/* ---- the code step (auth-Code-B, plan job 6.2): the six boxes, B's wide submit, and under the
   form two soft pills — "Kod gelmedi mi? Yeniden gönder" and "Bilgilerimi düzelt". No
   "Başvurunuz" card: the page opens without a session, so it shows nothing but the address the
   code went to (B-7). */

/* The form's gap already spaces the field; its own bottom margin is for the account pages. */
.apply-form > .code-field {
    margin-bottom: 0;
}

.apply-code__submit {
    width: 100%;
    max-width: 32rem;
    justify-content: center;
    gap: .5rem;
}

.apply-code__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-space-2);
    margin-top: var(--es-space-6);
}

.apply-code__actions form {
    margin: 0;
}

.apply-code__action {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: var(--es-h-btn);
    padding: 0 1rem 0 6px;
    border: 0;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-ink);
    font: inherit;
    font-size: var(--es-fs-sm);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.apply-code__action:hover {
    background: var(--es-fill-2);
    color: var(--es-ink);
}

.apply-code__action:focus-visible {
    outline: 2px solid var(--es-ring);
    outline-offset: 2px;
}

.apply-code__action-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--es-surface);
}

.apply-code__action-icon svg {
    width: 16px;
    height: 16px;
}

.apply-code__action-muted {
    font-weight: 600;
    color: var(--es-muted);
}

.apply-code__action-strong {
    color: var(--es-brand-strong);
}

/* ---- the receipt (auth-Done-B + auth-Done-C's ticket, plan job 6.3): the seal in the state's
   tone, B's big queue figure, the ticket on B's card (upright, UIhataları 40) with "Takvime ekle" hanging off its
   corner, and the soft account line that leads to Hesabım. */

.apply-done__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: var(--es-space-5);
}

.apply-done__seal {
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    flex: none;
    border-radius: 50%;
}

.apply-done__seal svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 2.4;
}

/* A new place: B's filled accent seal with its soft ring. */
.apply-done__seal--brand {
    background: var(--es-brand);
    color: var(--es-brand-ink);
    box-shadow: 0 0 0 8px var(--es-brand-soft), 0 16px 32px -12px var(--es-brand-shadow);
}

.apply-done__seal--ok {
    background: var(--es-ok-soft);
    color: var(--es-ok);
}

.apply-done__seal--warn {
    background: var(--es-warn-soft);
    color: var(--es-warn);
}

.apply-done__seal--info {
    background: var(--es-info-soft);
    color: var(--es-info);
}

.apply-done__figure {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-title);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: .9;
    color: var(--es-brand-strong);
    font-variant-numeric: tabular-nums;
}

.apply-done__figure small {
    font-family: var(--es-font-body);
    font-size: var(--es-fs-sm);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--es-ink);
}

.apply-done__calendar {
    margin-top: .25rem;
}

.apply-ticket {
    position: relative;
    margin: var(--es-space-5) 0 2.75rem;
    padding: clamp(var(--es-space-4), 2vw, var(--es-space-6));
    border-radius: var(--es-r-xl);
    background: var(--es-fill);
}

.apply-ticket__card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem;
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

/* Always on white and always padded, as on Katılımlarım: a scanner needs the quiet zone, and the
   dark theme's near-black gives it no edge to lock onto. */
.apply-ticket__qr {
    flex: none;
    padding: 8px;
    border-radius: var(--es-r);
    background: var(--es-paper);
    box-shadow: inset 0 0 0 1px var(--es-line);
}

.apply-ticket__qr img {
    display: block;
    width: 140px;
    height: auto;
}

.apply-ticket__body {
    display: grid;
    gap: .35rem;
    flex: 1 1 12rem;
    min-width: 0;
}

.apply-ticket__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--es-muted);
}

.apply-ticket__event {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h2);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.apply-ticket__holder {
    font-size: .9rem;
    font-weight: 600;
    color: var(--es-ink);
}

.apply-ticket__when {
    font-size: .8rem;
    color: var(--es-muted);
}

.apply-ticket__door {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .25rem 0 0;
    padding: .5rem .75rem;
    border-radius: var(--es-r);
    background: var(--es-ok-soft);
    color: var(--es-ok);
    font-size: var(--es-fs-sm);
    font-weight: 700;
    line-height: 1.4;
}

.apply-ticket__door svg {
    width: 16px;
    height: 16px;
    flex: none;
}

/* B hangs "Takvime ekle" off the frame's lower edge. */
.apply-ticket__calendar {
    position: absolute;
    right: 1.5rem;
    bottom: -1.4rem;
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.apply-done__account {
    display: flex;
    align-items: center;
    gap: var(--es-space-3);
    padding: var(--es-space-4);
    border-radius: var(--es-r-lg);
    background: var(--es-brand-soft);
    font-size: var(--es-fs-sm);
    line-height: 1.5;
    color: var(--es-ink);
}

.apply-done__avatar {
    width: 2.25rem;
    height: 2.25rem;
    background: var(--es-surface);
}

.apply-done__avatar svg {
    width: 18px;
    height: 18px;
}

.apply-done__account-text {
    display: grid;
    gap: .25rem;
    min-width: 0;
}

.apply-done__account-text a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    justify-self: start;
    font-weight: 700;
    color: var(--es-brand-strong);
}

.apply-done__account-text a svg {
    width: 14px;
    height: 14px;
}

/* ---- the receipt's two steps and its staged reveal (DD-42, blueprint AD-38 addendum): "Kaydınız
   alındı" ticked at once, "Organizatörün listesine yazıldı" when the event has a Google Sheet —
   drawn as the muted "aktarım sürüyor" sentence, which site.js turns into a spinner and then a
   tick. The page at rest is complete: every movement below is asked for under
   prefers-reduced-motion: no-preference, so "hareketi azalt" and a page without script show the
   same finished layout. Each seal names its tone once, for the ring and the burst. */

.apply-done__seal {
    position: relative;
    --apply-done-tone: var(--es-brand);
}

.apply-done__seal--ok {
    --apply-done-tone: var(--es-ok);
}

.apply-done__seal--warn {
    --apply-done-tone: var(--es-warn);
}

.apply-done__seal--info {
    --apply-done-tone: var(--es-info);
}

/* The drawn circle: a thin ring just outside the seal, at rest fully drawn. */
.apply-done__ring {
    position: absolute;
    inset: -.6rem;
    color: var(--apply-done-tone);
    pointer-events: none;
}

.apply-done__seal .apply-done__ring svg {
    display: block;
    width: 100%;
    height: 100%;
    stroke-width: 1.5px;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    opacity: .55;
    rotate: -90deg;
}

/* Not inherited, so on the circle itself: thin at any size of the seal. */
.apply-done__ring circle {
    vector-effect: non-scaling-stroke;
}

/* The burst's ring, invisible until every step is green. */
.apply-done__seal::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--apply-done-tone);
    opacity: 0;
    pointer-events: none;
}

.done-steps {
    display: grid;
    gap: var(--es-space-2);
    margin: var(--es-space-3) 0 var(--es-space-4);
    padding: 0;
    list-style: none;
}

.done-step {
    display: flex;
    align-items: flex-start;
    gap: var(--es-space-2);
    font-size: var(--es-fs-sm);
    font-weight: 700;
    line-height: 1.5;
    color: var(--es-ink);
}

.done-step__mark {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    border-radius: 50%;
    background: var(--es-fill);
    color: var(--es-muted);
}

.done-step__mark > * {
    grid-area: 1 / 1;
}

.done-step__mark svg {
    display: block;
    width: 14px;
    height: 14px;
    stroke-width: 2.4;
}

.done-step__spinner,
.done-step__icon {
    display: none;
}

.done-step__spinner {
    width: .85rem;
    height: .85rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
}

.done-step.is-done .done-step__mark {
    background: var(--es-ok-soft);
    color: var(--es-ok);
}

/* The first step has only the tick in its mark; the second shows the one its state names. */
.done-step.is-pending .done-step__spinner,
.done-step.is-done .done-step__icon--done,
.done-step.is-stalled .done-step__icon--stalled {
    display: block;
}

.done-step.is-pending .done-step__mark {
    color: var(--es-brand-strong);
}

/* Still under way, never an error: the worker keeps trying and the owner is told what to fix. */
.done-step.is-stalled .done-step__text {
    font-weight: 600;
    color: var(--es-muted);
}

@keyframes es-done-draw {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes es-done-rise {
    from {
        opacity: 0;
        translate: 0 8px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes es-done-burst {
    from {
        opacity: .7;
        scale: 1;
    }

    to {
        opacity: 0;
        scale: 1.9;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .apply-done__seal .apply-done__ring svg {
        animation: es-done-draw 700ms var(--es-ease) 120ms both;
    }

    .apply-done .apply-card__title,
    .apply-done .done-step {
        animation: es-done-rise var(--es-dur-slow) var(--es-ease) both;
    }

    .apply-done .apply-card__title {
        animation-delay: 160ms;
    }

    .apply-done .done-step:nth-child(1) {
        animation-delay: 300ms;
    }

    .apply-done .done-step:nth-child(2) {
        animation-delay: 420ms;
    }

    .done-step.is-pending .done-step__spinner {
        animation: es-busy-spin .8s linear infinite;
    }

    /* Played once when the last step turns green — on arrival when there is no sheet. */
    .apply-done.is-complete .apply-done__seal::after {
        animation: es-done-burst 900ms var(--es-ease) 600ms 1 both;
    }

    .done-step.is-done .done-step__mark {
        transition: background-color var(--es-dur) var(--es-ease), color var(--es-dur) var(--es-ease);
    }
}

/* =============================================================================================
   THE PUBLIC WALK: DIRECTORY → ORGANIZATION → EVENT (design.md §7.4–§7.6)
   =============================================================================================

   Three screens that used to render in the light work shell and turned the site white halfway
   through a walk that starts on the dark discovery home. They now share the home page's shell and
   its vocabulary — the show-card, the date block, the neutral status chip — so nothing about the
   surface changes as a reader moves from one to the next. (The portal and the admin area were
   still light when this was written; they followed on 18 September 2026 — since October 2026 every surface follows the theme instead.)
*/

:root {
    /* What makes white text legible over an arbitrary cover photograph (design.md §4.4). Three
       stops rather than two: a straight linear fade leaves the middle of a bright sky too light
       at exactly the height the event name sits at. */
    --es-scrim: linear-gradient(180deg,
        rgba(18, 15, 14, 0) 0%,
        rgba(18, 15, 14, .45) 42%,
        rgba(18, 15, 14, .95) 100%);
}

/* A full-bleed cover overflows the container by design; without this the overflow becomes a
   horizontal scrollbar on Windows, which is the one thing a phone layout may never do. `clip`
   rather than `hidden`: body's overflow propagates to the viewport, and `hidden` there would make
   the page itself the scroll container that position:sticky on the header depends on. */
body {
    overflow-x: clip;
}

/* -------------------------------------------- shared pieces of the discovery shell (design.md §6.4) */

/* Four Turkish tab names do not fit across 390px, and wrapping them into two rows makes one
   control look like two. The row scrolls instead, with the scrollbar hidden the way a shelf's is. */
/* Positioned so the counts' visually-hidden ", " (absolutely placed) is clipped by the row's
   scroll box; otherwise it escaped it and widened the whole page on a phone. */
.tabs--scroll {
    position: relative;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tabs--scroll::-webkit-scrollbar {
    display: none;
}

/* The directory's pager is not the foot of a table here, so it carries its own box. */
.pager--standalone {
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    box-shadow: var(--es-card-shadow);
    margin-bottom: 3rem;
}

/* ------------------------------------------------------- grids of show-cards (design.md §6.3) */

/* A shelf that pages instead of scrolling: an organization's event tabs. (The search page has its
   own fixed-column grid, .search-grid, plan job 5.3.) */
.show-grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 48px;
}

/* ----------------------------------- organization page (/o/{slug}; plan job 5.4, design.md §7.5)

   site2-Org-B with C's additions (plan §2.1): B's rounded cover with the "Sıradaki etkinlik" chip,
   the big logo, the name and B-1's pills, the follow button with its note; C's sticky tab bar
   (counted tabs, the mark, a second follow button) and C's side column (about, team, contact)
   beside the two event tabs; B's bento of upcoming events and the greyed past ones.

     .org-band      the cover and the band under it. Only the logo tile rises onto the cover:
                    the words stay on the page in its own ink (plan job 2.x review — on the
                    scrim they were near-black on near-black in the light theme).
     .org-next      the cover's chip naming the next event.
     .org-tabbar    the sticky bar: .tabs inside, the mark and the small follow button beside.
     .org-layout    the tab's content, and .org-aside beside it from 1200px.
     .org-bento     the home page's .feature-bento, laid out for a narrower column.
     .org-about     the about tab: the organizer's words and .org-facts.
     .people-grid--tiles / .person-card--tile / --lead   the team tab's portrait tiles.
     .face-stack    overlapping portraits in the side column's team card — the team only, never
                    followers (AD-35).
*/

.org-band {
    margin-bottom: 1.75rem;
}

/* A photograph in a rounded frame inside the page (B), 16:9 like every cover (UIhataları 30,
   §4.8); capped on a wide screen so the band does not push the page below the fold — only there
   is the picture trimmed top and bottom. */
.org-band__cover {
    color-scheme: var(--es-scheme-dark);
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: min(30rem, 62vh);
    margin-top: -.5rem;
    overflow: hidden;
    border-radius: var(--es-r-band);
    background: var(--es-cat-ink);
}

.org-band__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* The next event, top right on the cover (B). On a photograph, so pinned dark with the cover like
   every chip on one (plan §2.2), on the surface rather than glass so it reads the same over a
   bright sky and a dark stage; hidden on a phone, where the bento under the tabs starts with the
   same event a thumb's length away. */
.org-next {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .8rem;
    max-width: min(24rem, calc(100% - 3rem));
    padding: .45rem 1.2rem .45rem .45rem;
    border-radius: var(--es-r-pill);
    background: var(--es-surface);
    color: var(--es-ink);
    box-shadow: var(--es-shadow-3);
    text-decoration: none;
    transition: transform var(--es-dur-fast) var(--es-ease);
}

.org-next:hover {
    color: var(--es-ink);
    transform: translateY(-1px);
}

.org-next .date-block--inline {
    width: 46px;
    height: 48px;
    border-radius: var(--es-r-pill);
}

.org-next .date-block--inline .date-block__day {
    font-size: 1.05rem;
}

.org-next .date-block--inline .date-block__month {
    margin-top: 2px;
    font-size: .58rem;
}

.org-next__text {
    display: grid;
    min-width: 0;
}

.org-next__label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--es-muted);
}

.org-next__name {
    overflow: hidden;
    font-family: var(--es-font-display);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.02em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.org-band__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.75rem;
    padding: 0 clamp(0rem, 2vw, 2rem);
}

.org-band__mark {
    /* Half the tile on the cover. Light in both themes: a white logo tile (--es-paper), so
       what is drawn on it — a logo, the initials — takes the light-theme ink. The ring is the
       page's own colour, so the tile looks cut out of the cover's edge. */
    color-scheme: light;
    color: var(--es-ink);
    position: relative;
    width: 128px;
    height: 128px;
    margin-top: -64px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--es-r-xl);
    background: var(--es-paper);
    box-shadow: 0 0 0 6px var(--es-page), var(--es-shadow-2);
}

/* Contained, never cropped: a logo is artwork with its own proportions (§4.8). */
.org-band__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12%;
}

.org-band__text {
    flex: 1 1 22rem;
    min-width: 0;
    display: grid;
    gap: .85rem;
    padding-top: 1.25rem;
}

.org-band__name {
    margin: 0;
    font-size: var(--es-fs-display);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.02;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.org-band__pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.org-band__actions {
    flex: 0 1 auto;
    align-self: flex-end;
    display: grid;
    justify-items: end;
    gap: .6rem;
}

.org-band__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

/* §36 T67, AD-35: what following shares with the team, said before the click, under the
   buttons in the quiet text so it informs without shouting. */
.org-band__follow-note {
    max-width: 21rem;
    margin: 0;
    font-size: .8rem;
    text-align: right;
    color: var(--es-muted);
}

.org-follow {
    margin: 0;
}

/* Following (site2-Org-B "Takip ediliyor"): the ok tone and a tick — the same size as the
   invitation it replaced, so nothing jumps when it is pressed. A solid green fill with its ink:
   the pale wash it had read as a disabled button, and its white ink vanished on it (UIhataları
   24). Hover and press move to the strong green, darker on light and brighter on dark. */
.btn.follow-btn--on {
    --bs-btn-color: var(--es-ok-ink);
    --bs-btn-bg: var(--es-ok);
    --bs-btn-border-color: var(--es-ok);
    --bs-btn-hover-color: var(--es-ok-ink);
    --bs-btn-hover-bg: var(--es-ok-strong);
    --bs-btn-hover-border-color: var(--es-ok-strong);
    --bs-btn-active-color: var(--es-ok-ink);
    --bs-btn-active-bg: var(--es-ok-strong);
    --bs-btn-active-border-color: var(--es-ok-strong);
}

/* C's tab bar, sticky 8px under the site header (--es-bar-h): one glass capsule around B's tabs, so
   the tabs stay one control as a long list scrolls under them. */
.org-tabbar {
    position: sticky;
    top: calc(var(--es-bar-h) + .5rem);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding: 5px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-pill);
    background: var(--es-glass);
    -webkit-backdrop-filter: var(--es-glass-filter);
    backdrop-filter: var(--es-glass-filter);
    box-shadow: var(--es-shadow-1);
    scroll-margin-top: calc(var(--es-bar-h) + .5rem);
}

/* position: relative, so a count's visually-hidden comma is positioned inside the scrolling
   row; anchored to the page it escaped the row's clip and widened the phone page by 25px. */
.org-tabbar .tabs {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.org-tabbar__side {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
}

/* The bar's mark and "Takip et" echo the band's: on load they sat right under the band's own,
   two follow buttons one above the other. site.js arms the bar (is-echo-armed) and shows them
   (is-echo-shown) once the band's buttons have scrolled away; without script they simply stay.
   visibility, not display, so the tabs never shift and a hidden button is out of the tab order. */
.org-tabbar.is-echo-armed .org-tabbar__side {
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--es-dur-fast) var(--es-ease), visibility 0s linear var(--es-dur-fast);
}

.org-tabbar.is-echo-armed.is-echo-shown .org-tabbar__side {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--es-dur-fast) var(--es-ease), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .org-tabbar.is-echo-armed .org-tabbar__side {
        transition: none;
    }
}

.org-tabbar__mark {
    color-scheme: light;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 11px;
    background: var(--es-paper);
    outline: 1px solid var(--es-line);
    outline-offset: -1px;
    color: var(--es-brand-strong);
    font-size: .75rem;
    font-weight: 800;
}

.org-tabbar__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

/* The tab's content, and C's side column beside it from 1200px; under it below that. */
.org-layout {
    display: grid;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 1200px) {
    .org-layout--aside {
        grid-template-columns: minmax(0, 1fr) 22rem;
        align-items: start;
    }

    .org-layout--aside .org-aside {
        position: sticky;
        top: calc(var(--es-bar-h) + 5.5rem);
    }
}

.org-layout__main {
    min-width: 0;
}

.org-layout__main > section > .show-grid,
.org-layout__main .empty {
    margin-bottom: 0;
}

/* B's bento in a column narrower than the home page's: the big card is a row across it, the
   show-cards three to a row under it — two below 992px, one on a phone. */
.org-bento > .show-card {
    grid-column: span 4;
}

@media (max-width: 991.98px) {
    .org-bento > .show-card {
        grid-column: span 6;
    }
}

@media (max-width: 575.98px) {
    .org-bento > .show-card {
        grid-column: span 12;
    }
}

.org-events__more {
    margin: 1.25rem 0 0;
    font-size: .875rem;
    color: var(--es-muted);
}

/* The about tab (site2-Org-B): the organizer's words large, the facts in soft boxes under them. */
.org-about {
    display: grid;
    gap: 1rem;
}

.org-about__card {
    display: grid;
    gap: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

/* The organizer typed paragraphs; they survive as paragraphs. */
.org-about__lead {
    max-width: 48rem;
    margin: 0;
    font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
    font-weight: 500;
    line-height: 1.6;
    color: var(--es-ink);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.org-about__empty {
    margin: 0;
    color: var(--es-muted);
}

.org-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: .75rem;
    margin: 0;
}

.org-facts__item {
    display: grid;
    gap: .2rem;
    padding: .85rem 1rem;
    border-radius: var(--es-r);
    background: var(--es-fill);
}

.org-facts dt {
    font-size: .75rem;
    font-weight: 600;
    color: var(--es-muted);
}

.org-facts dd {
    margin: 0;
    font-size: .9rem;
    font-weight: 650;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.org-facts a {
    color: inherit;
    text-decoration-color: var(--es-brand-border);
    text-underline-offset: 3px;
}

.org-facts a:hover {
    color: var(--es-brand-strong);
}

.org-about__note {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    font-size: .9rem;
    font-weight: 600;
    color: var(--es-ink);
}

/* The team tab (site2-Org-B): portrait tiles four to a row, the managers on the ember tint. */
.team-group + .team-group {
    margin-top: 2.25rem;
}

.team-group__title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--es-ink);
}

.people-grid--tiles {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.person-card--tile {
    flex-direction: column;
    justify-content: flex-start;
    gap: .8rem;
    padding: 1.6rem 1rem;
    border-color: transparent;
    border-radius: var(--es-r-xl);
    background: var(--es-fill);
    box-shadow: none;
    text-align: center;
}

.person-card--tile .person-card__mark {
    width: 88px;
    height: 88px;
    background: var(--es-surface);
    box-shadow: 0 0 0 4px var(--es-surface);
}

.person-card--tile .person-card__initials {
    font-family: var(--es-font-display);
    font-size: 1.6rem;
    color: var(--es-brand);
}

.person-card--tile .person-card__name {
    color: var(--es-ink);
}

.person-card--tile .person-card__name a {
    text-decoration: underline;
    text-decoration-color: var(--es-brand-border);
    text-underline-offset: 3px;
}

.person-card--tile .person-card__name a:hover {
    color: var(--es-brand-strong);
}

.person-card--tile .person-card__role {
    color: var(--es-muted);
}

.person-card--lead {
    background: var(--es-brand-soft);
}

/* C's side column: three quiet cards, each only with something in it. */
.org-aside {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

@media (min-width: 1200px) {
    .org-aside {
        grid-template-columns: minmax(0, 1fr);
    }
}

.org-aside__card {
    display: grid;
    align-content: start;
    gap: .8rem;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.org-aside__card h2.kicker {
    margin: 0;
}

.org-aside__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.org-aside__about {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--es-body);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.org-aside__more,
.org-aside__all {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    justify-self: start;
    min-height: 44px;
    font-size: .85rem;
    font-weight: 650;
    color: var(--es-brand-strong);
    text-decoration: none;
}

.org-aside__more:hover,
.org-aside__all:hover {
    text-decoration: underline;
}

.org-aside__more svg {
    width: 15px;
    height: 15px;
}

.org-aside__line {
    margin: 0;
    font-size: .85rem;
    color: var(--es-muted);
}

.org-aside__card--links {
    padding: .5rem;
}

.face-stack {
    display: flex;
    margin: 0;
    padding: 0 0 0 10px;
    list-style: none;
}

.face-stack__item {
    width: 44px;
    height: 44px;
    margin-left: -10px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--es-brand-soft);
    box-shadow: 0 0 0 3px var(--es-surface);
    color: var(--es-brand-strong);
    font-size: .8rem;
    font-weight: 750;
}

.face-stack__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.face-stack__item--more {
    background: var(--es-fill-2);
    color: var(--es-muted);
}

.org-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.org-contact li + li {
    border-top: 1px solid var(--es-line);
}

.org-contact__row {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 56px;
    padding: .65rem 1rem;
    border-radius: var(--es-r);
    color: var(--es-ink);
    text-decoration: none;
}

.org-contact__row:hover {
    background: var(--es-fill);
    color: var(--es-ink);
}

.org-contact__row > svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--es-faint);
}

.org-contact__text {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.org-contact__label {
    font-size: .875rem;
    font-weight: 650;
}

.org-contact__value {
    overflow: hidden;
    font-size: .8rem;
    color: var(--es-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 991.98px) {
    .org-band__actions {
        justify-items: start;
        flex-basis: 100%;
    }

    .org-band__buttons {
        justify-content: flex-start;
    }

    .org-band__follow-note {
        text-align: left;
    }
}

@media (max-width: 767.98px) {
    .org-band__mark {
        width: 96px;
        height: 96px;
        margin-top: -48px;
        border-radius: var(--es-r-lg);
    }


    .org-band__text {
        padding-top: 0;
    }
}

@media (max-width: 575.98px) {
    .org-band__cover {
        border-radius: var(--es-r-xl);
    }

    .org-next,
    .org-tabbar__side {
        display: none;
    }

    .org-band__inner {
        gap: .9rem;
    }

    .org-tabbar {
        border-radius: var(--es-r-lg);
    }

    /* The bar holds only the tabs here, so the capsule's own padding is all the edge it needs. */
    .org-tabbar .tabs {
        flex: 1 1 auto;
    }
}

/* --------------------------------------------- venue on a drawn map (plan job 4.10)

   The event page's "Konum" (popups-MapMenu-B, C's note): a floating card on a map drawn in CSS —
   roads, a street grid, water and B's ember pin — never an embedded one (§23). The card holds the
   venue, the address, the time and "Haritada aç", a [data-popup-toggle] link to Google Maps whose
   panel offers B's two app cards, "Adresi kopyala" and the note; under 576px the panel is a bottom
   sheet. With no venue yet there is no map and no button: .venue-pending says so (UIhataları 25). */
.venue-map {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 26rem;
    margin-bottom: 48px;
    padding: 28px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-band);
    background:
        linear-gradient(28deg, transparent 0 46%, var(--es-map-road) 46% 48.5%, transparent 48.5%),
        linear-gradient(-62deg, transparent 0 58%, var(--es-map-road) 58% 60.5%, transparent 60.5%),
        linear-gradient(90deg, transparent 0 30%, var(--es-map-street) 30% 31.2%, transparent 31.2%),
        linear-gradient(0deg, transparent 0 64%, var(--es-map-street) 64% 65.2%, transparent 65.2%),
        linear-gradient(90deg, transparent 0 74%, var(--es-map-street) 74% 74.8%, transparent 74.8%),
        linear-gradient(var(--es-map-grid) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, var(--es-map-grid) 1px, transparent 1px) 0 0 / 40px 40px,
        radial-gradient(ellipse 50% 36% at 96% 100%, var(--es-map-water) 0 99%, transparent 100%),
        var(--es-map-land);
    box-shadow: var(--es-card-shadow);
}

/* B's teardrop pin: a rotated square with one sharp corner, the ember, a paper dot. */
.venue-map__pin {
    position: absolute;
    left: 66%;
    top: 42%;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50% 50% 50% 0;
    background: var(--es-brand);
    box-shadow: 0 14px 30px -8px var(--es-brand-shadow);
    rotate: -45deg;
}

.venue-map__pin::after {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--es-paper);
}

.venue-map__card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: min(26rem, 100%);
    padding: 26px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow-hover);
}

.venue-map__name {
    margin: 4px 0 0;
    color: var(--es-ink);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.venue-map__address {
    margin: 0;
    color: var(--es-muted);
    font-size: .92rem;
    overflow-wrap: anywhere;
}

.venue-map__when {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--es-ink);
    font-size: .9rem;
    font-weight: 600;
}

.venue-map__when > svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: .2rem;
    color: var(--es-brand);
}

/* Shown in the venue's own zone, and it says which one (AD-15). */
.venue-map__zone {
    display: block;
    color: var(--es-faint);
    font-size: .8rem;
    font-weight: 500;
}

/* No venue yet (UIhataları 25): one quiet card — the sentence, the district and city when known,
   the time — and no map or button, which with nothing to point at only looked broken. It reuses
   .venue-map__when for the time line. */
.venue-pending {
    display: flex;
    align-items: flex-start;
    gap: var(--es-space-4);
    margin-bottom: var(--es-space-8);
    padding: var(--es-space-5);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.venue-pending__text {
    display: grid;
    gap: var(--es-space-2);
    min-width: 0;
}

.venue-pending__title {
    margin: 0;
    color: var(--es-ink);
    font-size: var(--es-fs-h3);
    font-weight: 700;
    line-height: 1.25;
}

.venue-pending__area {
    margin: 0;
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
    overflow-wrap: anywhere;
}

.venue-map__open {
    position: relative;
    width: 100%;
    margin-top: 4px;
}

.venue-map__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
}

/* At the button's edge, so the icon and the words stay centred with or without it. */
.venue-map__chevron {
    position: absolute;
    right: 16px;
    display: inline-flex;
    transition: rotate var(--es-dur) var(--es-ease);
}

.venue-map__chevron svg {
    width: 16px;
    height: 16px;
}

/* With script off the button is a plain link to Google Maps, so it promises no menu; site.js
   gives it role=button when it becomes the disclosure (plan job 4.10). */
.venue-map__button:not([role="button"]) .venue-map__chevron {
    display: none;
}

.venue-map__button[aria-expanded="true"] .venue-map__chevron {
    rotate: 180deg;
}

/* The panel: B's popover under the button. */
.venue-map__menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(26rem, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    color: var(--es-body);
    box-shadow: var(--es-menu-shadow);
}

.venue-map__menu:not([hidden]) {
    transform-origin: top left;
    animation: es-menu-in var(--es-dur) var(--es-ease);
}

.venue-map__grab,
.venue-map__sheet-title,
.venue-map__scrim,
.venue-map__cancel {
    display: none;
}

.venue-map__apps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.venue-map__app {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 16px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
    color: var(--es-ink);
    text-decoration: none;
    transition: background-color var(--es-dur-fast) var(--es-ease), box-shadow var(--es-dur-fast) var(--es-ease);
}

.venue-map__app:hover {
    background: var(--es-brand-soft);
    box-shadow: inset 0 0 0 2px var(--es-brand);
    color: var(--es-ink);
}

/* B draws the apps as a letter on a raised tile rather than their logos. */
.venue-map__mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
    border-radius: 15px;
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    font-family: var(--es-font-display);
    font-size: 1.05rem;
    font-weight: 700;
}

.venue-map__app:hover .venue-map__mark {
    color: var(--es-brand);
}

.venue-map__app-name {
    font-weight: 700;
    font-size: .92rem;
}

.venue-map__app-hint {
    color: var(--es-muted);
    font-size: .78rem;
}

.venue-map__copy {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--es-r);
    background: var(--es-fill);
    color: var(--es-ink);
    font: inherit;
    font-weight: 650;
    text-align: left;
    transition: background-color var(--es-dur-fast) var(--es-ease);
}

.venue-map__copy:hover {
    background: var(--es-fill-2);
}

.venue-map__copy svg {
    width: 18px;
    height: 18px;
}

.venue-map__copy.is-copied {
    background: var(--es-ok-soft);
    color: var(--es-ok);
}

.venue-map__note {
    margin: 0;
    padding: 0 6px;
    color: var(--es-faint);
    font-size: .75rem;
}

@media (max-width: 575.98px) {
    .venue-map {
        flex-direction: column;
        min-height: 0;
        padding: 150px 12px 12px;
        border-radius: var(--es-r-xl);
    }

    .venue-map__pin {
        left: 50%;
        top: 50px;
        width: 40px;
        height: 40px;
    }

    .venue-map__card {
        width: 100%;
        padding: 20px;
    }

    /* The card's own stacking context (z-index: 1, above the pin) would hold the fixed sheet
       and its scrim under the sticky top bar (1030), which then still took taps. While the
       sheet is open the card rises with it, so the scrim dims the header too. */
    .venue-map__card:has(.venue-map__menu:not([hidden])) {
        z-index: 1070;
    }

    .venue-map__name {
        font-size: 1.3rem;
    }

    /* B's phone sheet over a dimmed page; the scrim and "Vazgeç" close it ([data-popup-close]). */
    .venue-map__menu:not([hidden]) ~ .venue-map__scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1069;
        background: var(--es-backdrop);
        animation: es-fade-in var(--es-dur-slow) ease;
    }

    .venue-map__menu {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1070;
        width: auto;
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
        padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
        border-bottom: 0;
        border-radius: var(--es-r-xl) var(--es-r-xl) 0 0;
    }

    .venue-map__menu:not([hidden]) {
        animation: es-sheet-in var(--es-dur-slow) var(--es-ease);
    }

    .venue-map__grab {
        display: block;
        align-self: center;
        width: 40px;
        height: 4px;
        border-radius: var(--es-r-pill);
        background: var(--es-line-strong);
    }

    .venue-map__sheet-title {
        display: block;
        margin: 0 0 4px;
        color: var(--es-ink);
        font-family: var(--es-font-display);
        font-size: 1.1rem;
        font-weight: 700;
        text-align: center;
    }

    .venue-map__app {
        align-items: center;
        padding: 14px 10px;
        text-align: center;
    }

    .venue-map__cancel {
        display: block;
        min-height: 44px;
        color: var(--es-muted);
    }
}

/* --------------------------------------------------- people: the team (design.md §7.5) */

/* A team member on an organization page — a face, a name, what they do. The event page's speakers
   have B's portrait card of their own since plan job 5.6 (.speaker-card). */
.people-grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 48px;
}

.person-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-card);
    box-shadow: var(--es-card-shadow);
}

.person-card__mark {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--es-r-pill);
    background: var(--es-fill-2);
}

/* A portrait is cropped to its square, unlike a logo (§4.8). */
.person-card__mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.person-card__initials {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--es-brand);
}

.person-card__text {
    min-width: 0;
}

.person-card__name {
    font-size: .95rem;
    font-weight: 650;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.person-card__name a {
    color: inherit;
    text-decoration: none;
}

.person-card__name a:hover {
    color: var(--es-brand);
    text-decoration: underline;
}

.person-card__role {
    font-size: .82rem;
    color: var(--es-muted);
    overflow-wrap: anywhere;
}

/* ------------------------------------------- event page (plan job 5.6, design.md §7.4)

   Views/PublicEvents/Details.cshtml and its partials: site2-Event-B with site2-Event-C's sticky
   section bar, section kickers and closing band. Everything follows the theme; only the cover is
   pinned dark, like every picture (plan §2.2), and logo tiles stay white (§4.8).

     .event-hero        B's split hero on the warm tint: pills, title, .event-fact boxes, actions;
                        the cover with the floating date card, the line-up card and the
                        "no password" note.
     .reg-bar           the registration bar riding on the hero's lower edge (every state of §7.4,
                        the meter without numbers and "Son N yer" below fifty, A-6).
     .event-personal    the certificate (.event-certificate, B's ember band) and the announcements
                        addressed to this visitor (.event-news).
     .event-secnav      C's sticky glass bar: B's tabs, and "Katıl" at its end.
     .event-section     a section with C's kicker over B's title.
     .event-about       the description card and the organizer card (.event-org).
     .agenda-panel      "Ajandam" (AD-32).
     .session-row       one session: the time block coloured by its hall, the body, the star.
     .speaker-card      a confirmed speaker (AD-19): portrait, billing, name, job.
     .sponsor-band      one tier of the sponsor wall (AD-18), the logos fewer and larger the
                        higher the tier.
     .event-feedback    the ratings card (AD-31).
     .event-close       C's closing band, while registration is open. */

.event-page {
    padding-top: .25rem;
}

.event-page__cancelled {
    margin-bottom: 1.25rem;
}

.event-top {
    margin-bottom: 2rem;
}

.event-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 2.5rem;
    padding: clamp(1.25rem, 4vw, 3.5rem);
    padding-bottom: calc(clamp(1.25rem, 4vw, 3.5rem) + 2.25rem);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-band);
    background: var(--es-fill);
}

.event-hero__text {
    display: grid;
    justify-items: start;
    gap: 1.5rem;
    min-width: 0;
}

.event-hero__pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.event-hero__org,
.event-hero__category {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 40px;
    max-width: 100%;
    border-radius: var(--es-r-pill);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--es-dur-fast) var(--es-ease);
}

.event-hero__org {
    padding: 4px 14px 4px 4px;
    background: var(--es-surface);
    color: var(--es-ink);
    box-shadow: var(--es-shadow-1);
}

.event-hero__category {
    padding: 0 16px;
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.event-hero__org:hover,
.event-hero__category:hover {
    transform: translateY(-1px);
}

.event-hero__org:hover {
    color: var(--es-ink);
}

.event-hero__category:hover {
    color: var(--es-brand-ink);
}

/* The logo on its white tile (§4.8), or the initials on the same tile. */
.event-hero__org-mark {
    color-scheme: light;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 50%;
    background: var(--es-paper);
    outline: 1px solid var(--es-line);
    outline-offset: -1px;
    color: var(--es-brand-strong);
    font-size: .68rem;
    font-weight: 800;
}

.event-hero__org-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.event-hero__title {
    margin: 0;
    font-size: var(--es-fs-display);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.04;
    color: var(--es-ink);
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.event-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-fact {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 20px;
    background: var(--es-surface);
    box-shadow: var(--es-shadow-1);
}

.event-fact__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.event-fact__value {
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.event-fact__key {
    font-size: .75rem;
    font-weight: 600;
    color: var(--es-muted);
    overflow-wrap: anywhere;
}

.event-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

/* The cover sits right, with room on its left for the date card to overhang it (B). */
.event-hero__media {
    position: relative;
    min-width: 0;
    padding: 0 0 0 2.5rem;
}

/* 16:9 like every cover (A-3), so the whole picture shows; a cover-less event draws the EventStage
   mark (.show-card__cover.is-fallback, UIhataları 27), and both are dark in both themes. */
.event-hero__cover {
    color-scheme: var(--es-scheme-dark);
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--es-r-xl);
    background: var(--es-cat-ink);
    box-shadow: var(--es-shadow-3);
}

.event-hero__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* No cover (UIhataları 27): the EventStage mark of .show-card__cover.is-fallback (T4), smaller and
   a little right of and above centre, so it clears the date card on the left edge and the line-up
   card on the right at every width. Same weight as T4's rule and later, so this wins. */
.event-hero__cover.is-fallback {
    background-position: 58% 42%;
    background-size: auto clamp(2.5rem, 26%, 6rem);
}

.event-hero__date {
    position: absolute;
    top: 1.5rem;
    left: 0;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 116px;
    padding: 14px 10px;
    border: 1px solid var(--es-glow-line);
    border-radius: 26px;
    background: var(--es-surface);
    box-shadow: var(--es-menu-shadow);
    text-align: center;
}

.event-hero__day {
    font-family: var(--es-font-display);
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--es-brand);
}

/* Every date block prints the month the same way, three letters in capitals ("EKİ"); running
   text spells it out ("6 Ekim"). */
.event-hero__month {
    font-size: .9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--es-ink);
}

.event-hero__weekday {
    font-size: .75rem;
    font-weight: 600;
    color: var(--es-muted);
}

/* B's ink card: the confirmed line-up (AD-19), pinned dark in both themes as B draws it. */
.event-hero__crew {
    color-scheme: var(--es-scheme-dark);
    position: absolute;
    right: -.75rem;
    top: 58%;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 10px 10px;
    border: 1px solid var(--es-glow-line);
    border-radius: 24px;
    background: var(--es-page);
    color: var(--es-ink);
    box-shadow: var(--es-shadow-3);
    text-decoration: none;
    transition: transform var(--es-dur-fast) var(--es-ease);
}

.event-hero__crew:hover {
    color: var(--es-ink);
    transform: translateY(-2px);
}

.event-hero__crew .face-stack__item {
    width: 34px;
    height: 34px;
    margin-left: -6px;
    font-size: .68rem;
    box-shadow: 0 0 0 2px var(--es-page);
}

.event-hero__crew-text {
    display: grid;
}

.event-hero__crew-count {
    font-size: .875rem;
    font-weight: 700;
}

.event-hero__crew-line {
    font-size: .75rem;
    color: var(--es-muted);
}

.event-hero__easy {
    position: absolute;
    left: .5rem;
    bottom: -1.25rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 6px 18px 6px 6px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-pill);
    background: var(--es-surface);
    box-shadow: var(--es-menu-shadow);
    font-size: .85rem;
    font-weight: 700;
    color: var(--es-ink);
}

/* ---- the registration bar */

.reg-bar {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    margin: -2.25rem clamp(.75rem, 4vw, 3.5rem) 0;
    padding: 16px 16px 16px 28px;
    border: 1px solid var(--es-glow-line);
    border-radius: 30px;
    background: var(--es-surface);
    box-shadow: var(--es-menu-shadow);
}

/* This visitor is in: the ember edge is the difference between reading about an event and
   holding a place at one. */
.reg-bar--mine {
    border-color: var(--es-brand);
}

/* On the waiting list or waiting for approval (AD-26, AD-27): known to the event, not on it yet.
   A dashed edge says "not yet". */
.reg-bar--waiting {
    border-style: dashed;
    border-color: var(--es-edge);
}

.reg-bar__text {
    flex: 1 1 18rem;
    min-width: 0;
}

.reg-bar__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.3;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.reg-bar__note {
    margin: .4rem 0 0;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--es-muted);
}

.reg-bar__meter {
    flex: 1 1 11rem;
    display: grid;
    gap: 6px;
    min-width: 10rem;
}

.reg-bar__meter-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--es-muted);
}

.reg-bar__last {
    color: var(--es-brand);
}

.reg-bar__deadline {
    display: grid;
    flex: 0 0 auto;
}

.reg-bar__deadline-key {
    font-size: .72rem;
    font-weight: 600;
    color: var(--es-muted);
}

.reg-bar__deadline-value {
    font-size: .9rem;
    font-weight: 700;
    color: var(--es-ink);
}

.reg-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.reg-bar__actions form {
    margin: 0;
}

.reg-bar__actions .btn {
    min-height: 44px;
}

.reg-bar__actions .btn-primary {
    padding-inline: 2rem;
}

/* B's quiet red "Kaydımı iptal et": still a 44px target, asked first by data-confirm. */
.btn.reg-bar__withdraw {
    --bs-btn-color: var(--es-bad);
    --bs-btn-hover-color: var(--es-bad);
    --bs-btn-active-color: var(--es-bad);
    font-weight: 700;
    text-decoration: none;
}

.btn.reg-bar__withdraw:hover {
    text-decoration: underline;
}

/* ---- what is this visitor's alone */

.event-personal {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* B's ember band (the footer's call band tokens, DD-26), with the white button. */
.event-certificate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    padding: 26px 28px;
    border-radius: var(--es-r-xl);
    background-color: var(--es-cta-from);
    background-image: radial-gradient(circle at 90% 0%, var(--es-cta-shine), transparent 55%),
        linear-gradient(135deg, var(--es-cta-from), var(--es-cta-to));
    box-shadow: 0 24px 50px -32px var(--es-cta-glow);
    color: var(--es-on-ember);
}

.event-certificate__icon {
    background: var(--es-on-ember-faint);
    color: var(--es-on-ember);
}

.event-certificate__text {
    flex: 1 1 16rem;
    min-width: 0;
}

.event-certificate__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--es-on-ember);
}

.event-certificate__note {
    margin: .3rem 0 0;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--es-on-ember-soft);
}

.btn.event-certificate__button {
    --bs-btn-color: var(--es-on-ember-ink);
    --bs-btn-bg: var(--es-on-ember);
    --bs-btn-border-color: var(--es-on-ember);
    --bs-btn-hover-color: var(--es-on-ember-ink);
    --bs-btn-hover-bg: var(--es-on-ember-hover);
    --bs-btn-hover-border-color: var(--es-on-ember-hover);
    --bs-btn-active-color: var(--es-on-ember-ink);
    --bs-btn-active-bg: var(--es-on-ember-soft);
    --bs-btn-active-border-color: var(--es-on-ember-soft);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.btn.event-certificate__button svg {
    width: 18px;
    height: 18px;
}

/* The ember outline of the focus ring would vanish on the ember band. */
.btn.event-certificate__button:focus-visible {
    outline-color: var(--es-on-ember);
    outline-offset: 3px;
}

.event-news {
    padding: 24px 26px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.event-news__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: 14px;
}

.event-news__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--es-ink);
}

.event-news__list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-news__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    background: var(--es-fill);
}

.event-news__text {
    flex: 1;
    min-width: 0;
}

.event-news__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
}

.event-news__name {
    margin: 0;
    font-family: var(--es-font-body);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.event-news__when {
    font-size: .75rem;
    font-weight: 600;
    color: var(--es-muted);
    font-variant-numeric: tabular-nums;
}

/* The organizer typed paragraphs; keep them, without letting a pasted URL widen the page. */
.event-news__body {
    margin: .3rem 0 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--es-body);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* ---- C's sticky section bar, 8px under the site header like the organization page's */

.event-secnav {
    position: sticky;
    top: calc(var(--es-bar-h) + .5rem);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding: 5px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-pill);
    background: var(--es-glass);
    -webkit-backdrop-filter: var(--es-glass-filter);
    backdrop-filter: var(--es-glass-filter);
    box-shadow: var(--es-shadow-1);
}

.event-secnav__tabs {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.btn.event-secnav__join {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 40px;
    border-radius: var(--es-r-pill);
    white-space: nowrap;
}

.event-secnav__left {
    font-weight: 600;
    opacity: .85;
}

/* The section being read (UIhataları 26; site.js's [data-section-nav] marks it, "Hakkında" from
   the start): .tabs' own marking is a white lift, lost on the glass bar's near-white ground, so
   here it is the ember tint, which reads in both themes. */
.event-secnav__tabs a.is-active {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    box-shadow: inset 0 0 0 1px var(--es-brand-border);
}

/* ---- sections */

.event-body {
    display: grid;
    gap: clamp(3rem, 6vw, 4.5rem);
    margin-bottom: 4rem;
}

/* Clear of the sticky header and the section bar when a tab jumps here. */
.event-section,
.session-row {
    scroll-margin-top: calc(var(--es-bar-h) + 5.5rem);
}

.event-section {
    min-width: 0;
}

.event-section__head {
    display: grid;
    justify-items: start;
    gap: .35rem;
    margin-bottom: 1.25rem;
}

.event-section__head--action {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.event-section__head--action > div {
    display: grid;
    gap: .35rem;
}

.event-section__title {
    margin: 0;
    font-size: var(--es-fs-title);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.1;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.event-section__count {
    color: var(--es-faint);
}

/* ---- "Hakkında": the words and the organizer */

.event-about {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
}

/* No description (UIhataları 25): the organizer card takes the whole row, laid flat — the mark on
   the left, "Düzenleyen" and the name beside it — with one muted line under it. */
.event-about--short {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--es-space-2);
}

.event-about--short .event-org {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "mark head"
        "mark text";
    align-items: center;
    gap: var(--es-space-1) var(--es-space-4);
    padding: var(--es-space-5);
}

.event-about--short .event-org__head {
    grid-area: head;
}

.event-about--short .event-org__mark {
    grid-area: mark;
    width: 64px;
    height: 64px;
}

.event-about--short .event-org__text {
    grid-area: text;
}

.event-about__empty {
    margin: 0;
    padding-inline: var(--es-space-1);
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
}

.event-about__card {
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.event-about__lead {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--es-ink);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.event-about__text {
    margin: 0;
    line-height: 1.7;
    color: var(--es-muted);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* B's organizer card on the ember tint, the whole card one link to the organization's page. */
.event-org {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid var(--es-brand-border);
    border-radius: var(--es-r-xl);
    background: var(--es-brand-soft);
    color: var(--es-ink);
    text-decoration: none;
    transition: transform var(--es-dur-fast) var(--es-ease), box-shadow var(--es-dur-fast) var(--es-ease);
}

.event-org:hover {
    color: var(--es-ink);
    transform: translateY(-2px);
    box-shadow: var(--es-card-shadow-hover);
}

.event-org__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.event-org__label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--es-brand-strong);
}

.event-org__go {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--es-surface);
    color: var(--es-ink);
    transition: background-color var(--es-dur-fast) var(--es-ease), color var(--es-dur-fast) var(--es-ease);
}

.event-org__go svg {
    width: 18px;
    height: 18px;
}

.event-org:hover .event-org__go {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.event-org__mark {
    color-scheme: light;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 22px;
    background: var(--es-paper);
    font-family: var(--es-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.04em;
    color: var(--es-brand-strong);
}

.event-org__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12%;
}

.event-org__text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.event-org__name {
    font-family: var(--es-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.event-org__meta {
    font-size: .875rem;
    font-weight: 600;
    color: var(--es-brand-strong);
}

/* ---- "Ajandam" (AD-32) */

.agenda-panel {
    margin-bottom: 1rem;
    padding: 20px 24px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.agenda-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.agenda-panel__title {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--es-ink);
}

.agenda-panel__empty {
    margin: .75rem 0 0;
    font-size: .9rem;
    color: var(--es-muted);
}

.agenda-panel__list {
    display: grid;
    gap: 6px;
    margin: .9rem 0 0;
    padding: 0;
    list-style: none;
}

.agenda-panel__list a {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 16px;
    background: var(--es-fill);
    color: var(--es-ink);
    text-decoration: none;
}

.agenda-panel__list a:hover {
    background: var(--es-fill-2);
}

.agenda-panel__list svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--es-muted);
}

.agenda-panel__when {
    flex: 0 0 auto;
    font-size: .85rem;
    font-weight: 800;
    color: var(--es-brand);
    font-variant-numeric: tabular-nums;
}

.agenda-panel__name {
    min-width: 0;
    font-size: .9rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ---- the programme */

.session-day + .session-day {
    margin-top: 2rem;
}

.session-day__head {
    margin: 0 0 12px;
    font-family: var(--es-font-body);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--es-brand);
}

.session-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.session-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 16px 18px 16px 16px;
    border: 1px solid var(--es-glow-line);
    border-radius: 28px;
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

/* Arrived at from "Ajandam": the session says it is the one. */
.session-row:target {
    border-color: var(--es-brand);
    box-shadow: 0 0 0 3px var(--es-ring), var(--es-card-shadow);
}

/* B's time block, its colour the hall's (one of four, by the order the halls first appear). */
.session-row__time {
    flex: 0 0 92px;
    display: grid;
    justify-items: center;
    align-content: center;
    padding: 14px 8px;
    border-radius: 20px;
    text-align: center;
}

.session-row__time--0 {
    background: var(--es-ink);
    color: var(--es-page);
}

.session-row__time--1 {
    background: var(--es-brand-soft);
    color: var(--es-brand-deep);
}

.session-row__time--2 {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.session-row__time--3 {
    background: var(--es-fill);
    color: var(--es-ink);
}

/* A session running now (UIhataları 49, decision K14: "live" is green everywhere): a green edge and
   a green time block; "Şimdi" is a .pill--ok beside the hall. Arriving at the card from "Ajandam"
   (:target) still wins the edge. */
.session-row.is-live:not(:target) {
    border-color: var(--es-ok);
    box-shadow: 0 0 0 1px var(--es-ok), var(--es-card-shadow);
}

.session-row.is-live .session-row__time {
    background: var(--es-ok);
    color: var(--es-ok-ink);
}

/* "Şimdi" and the hall on one wrapping line above the title. */
.session-row__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-2);
}

/* The programme head's end: the "Ajanda | Liste" switch and "Takvime ekle", wrapping on a phone.
   Outranks the head's own "> div" grid rule. */
.event-section__head--action > .event-programme__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-2) var(--es-space-3);
}

.session-row__start {
    font-family: var(--es-font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.session-row__end {
    margin-top: 4px;
    font-size: .72rem;
    font-weight: 700;
    opacity: .8;
    font-variant-numeric: tabular-nums;
}

.session-row__body {
    flex: 1 1 15rem;
    display: grid;
    justify-items: start;
    gap: 6px;
    min-width: 0;
}

.session-row__title {
    font-family: var(--es-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.3;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.session-row__text {
    margin: 0;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--es-muted);
    overflow-wrap: anywhere;
}

.session-row__who {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.session-row__who > svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--es-brand);
}

.session-row__faces {
    flex: 0 0 auto;
    padding-left: 8px;
}

.session-row__faces .face-stack__item {
    width: 28px;
    height: 28px;
    margin-left: -8px;
    font-size: .6rem;
    box-shadow: 0 0 0 2px var(--es-surface);
}

/* "Ajandama ekle" (AD-32): B's soft button with its words; on, the ember tint. */
.star-toggle {
    flex: 0 0 auto;
    margin: 0;
}

.star-toggle__btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-ink);
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--es-dur-fast) var(--es-ease), color var(--es-dur-fast) var(--es-ease);
}

.star-toggle__btn svg {
    width: 16px;
    height: 16px;
}

.star-toggle__btn:hover {
    background: var(--es-fill-2);
}

.star-toggle__btn:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.star-toggle__btn.is-on,
.star-toggle__btn.is-on:hover {
    border-color: var(--es-brand-border);
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
}

/* ---- speakers (AD-19) */

.speaker-grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.speaker-card {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 10px;
    padding: 26px 16px;
    border: 1px solid var(--es-glow-line);
    border-radius: 30px;
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    text-align: center;
    transition: transform var(--es-dur-fast) var(--es-ease), border-color var(--es-dur-fast) var(--es-ease),
        box-shadow var(--es-dur-fast) var(--es-ease);
}

.speaker-card--link:hover {
    transform: translateY(-2px);
    border-color: var(--es-glow-line-hover);
    box-shadow: var(--es-card-shadow-hover);
}

/* A portrait is cropped to its circle, unlike a logo (§4.8). */
.speaker-card__portrait {
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--es-brand-soft);
    font-family: var(--es-font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.04em;
    color: var(--es-brand-strong);
}

.speaker-card__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.speaker-card__role {
    max-width: 100%;
    overflow: hidden;
    padding: .2rem .75rem;
    border-radius: var(--es-r-pill);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.speaker-card__name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

/* The name is the link, stretched over the whole card. */
.speaker-card__name a {
    color: inherit;
    text-decoration: none;
}

.speaker-card__name a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.speaker-card__name a:focus-visible {
    outline: none;
}

.speaker-card__name a:focus-visible::after {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
    border-radius: 30px;
}

.speaker-card__job {
    font-size: .8rem;
    font-weight: 600;
    color: var(--es-muted);
    overflow-wrap: anywhere;
}

/* ---- sponsors (AD-18): a tinted row per tier, the logos on white tiles (§4.8) */

.sponsor-band {
    --sponsor-cols: 4;
    --sponsor-h: 58px;
    --sponsor-fs: .9rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 30px;
    background: var(--es-fill);
}

.sponsor-band--0 {
    --sponsor-cols: 1;
    --sponsor-h: 110px;
    --sponsor-fs: 1.6rem;
}

.sponsor-band--1 {
    --sponsor-cols: 2;
    --sponsor-h: 90px;
    --sponsor-fs: 1.25rem;
}

.sponsor-band--2 {
    --sponsor-cols: 3;
    --sponsor-h: 72px;
    --sponsor-fs: 1.05rem;
}

.sponsor-band__head {
    flex: 0 0 150px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding-left: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--es-ink);
}

.sponsor-band__badge {
    height: 34px;
    width: auto;
    max-width: 56px;
    object-fit: contain;
}

.sponsor-band__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sponsor-band__logos {
    flex: 1 1 260px;
    display: grid;
    /* No more columns than logos (UIhataları 25): _SponsorWall sets --sponsor-n to the tier's count; the admin's tier preview sets none and keeps the tier's own. */
    grid-template-columns: repeat(min(var(--sponsor-cols), var(--sponsor-n, var(--sponsor-cols))), minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The anchor is stretched over the whole tile, so the logo and the name are both the link. */
.sponsor-tile {
    /* Light in both themes: a white logo tile (--es-paper), so what is drawn on it — a name —
       takes the light-theme ink. */
    color-scheme: light;
    color: var(--es-ink);
    position: relative;
    display: grid;
    place-items: center;
    height: var(--sponsor-h);
    min-width: 0;
    padding: .6rem 1rem;
    border: 1px solid var(--es-line);
    border-radius: 20px;
    background: var(--es-paper);
    transition: box-shadow var(--es-dur-fast) var(--es-ease);
}

.sponsor-tile:hover {
    box-shadow: var(--es-shadow-2);
}

.sponsor-tile__logo {
    max-width: 85%;
    max-height: calc(var(--sponsor-h) - 1.4rem);
    object-fit: contain;
}

.sponsor-tile__name {
    font-family: var(--es-font-display);
    font-size: var(--sponsor-fs);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--es-ink);
    text-align: center;
    overflow-wrap: anywhere;
    hyphens: auto;
    /* The tile has a fixed height (--sponsor-h): a long logo-less name is clamped inside it
       instead of spilling over its border on a phone; the link's name still carries it whole. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .sponsor-tile {
        padding: .5rem .6rem;
    }

    .sponsor-tile__name {
        font-size: min(var(--sponsor-fs), .95rem);
    }
}

/* Out of the tile's grid (it would take a row of its own), over the whole tile. */
.sponsor-tile__link {
    position: absolute;
    inset: 0;
    border-radius: 20px;
}

.sponsor-tile__link:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

/* ---- ratings (AD-31): the event's form, and the sessions' behind the disclosure */

.event-feedback {
    display: grid;
    gap: 28px;
    padding: clamp(1.25rem, 3vw, 2.1rem);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.feedback-form__optional {
    margin-left: .25rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--es-faint);
}

.feedback-form__meta {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    color: var(--es-muted);
}

.feedback-sessions > .feedback-form--session:first-of-type {
    border-top: 0;
}

/* ---- C's closing band */

.event-close {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    margin-bottom: 3rem;
    padding: clamp(3rem, 7vw, 6rem) 1.5rem;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-band);
    background: radial-gradient(55% 70% at 50% 50%, var(--es-preview-glow), transparent 75%), var(--es-fill);
    text-align: center;
}

.event-close__title {
    max-width: 20ch;
    margin: 0;
    font-size: var(--es-fs-display);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.05;
    color: var(--es-ink);
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.event-close__note {
    margin: 0;
    color: var(--es-muted);
}

.btn.event-close__button {
    min-width: 12rem;
}

/* ---- narrower screens */

@media (min-width: 992px) {
    .event-feedback--split {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: start;
    }
}

@media (max-width: 991.98px) {
    .event-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    /* The picture first on a narrow screen: it says what the page is about before the facts. */
    .event-hero__media {
        order: -1;
        padding: 0;
    }

    .event-hero__date {
        top: 1rem;
        left: 1rem;
        width: 92px;
        padding: 10px 8px;
        border-radius: 20px;
    }

    .event-hero__day {
        font-size: 2.1rem;
    }

    .event-hero__crew {
        top: auto;
        right: 1rem;
        bottom: 1rem;
    }

    .event-hero__easy {
        position: static;
        margin-top: 1rem;
    }

    .event-about {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .event-secnav {
        top: calc(60px + .5rem);
        border-radius: var(--es-r-lg);
    }

    .event-section,
    .session-row {
        scroll-margin-top: calc(60px + 5rem);
    }

    .event-secnav__tabs {
        flex: 1 1 auto;
    }
}

@media (max-width: 575.98px) {
    .event-hero {
        padding: 1rem 1rem 3.25rem;
        border-radius: var(--es-r-xl);
    }

    .event-hero__cover {
        border-radius: var(--es-r-lg);
    }

    .event-hero__facts {
        grid-template-columns: minmax(0, 1fr);
    }

    /* In the flow under the cover, beside or above "Şifre belirlemeniz gerekmez": placed on the
       media's bottom edge it sat on that chip, which is in the flow here and makes that edge. */
    .event-hero__crew {
        position: static;
        display: inline-flex;
        margin: 1rem .5rem 0 0;
        padding: 6px 12px 6px 6px;
        vertical-align: middle;
    }

    .event-hero__easy {
        vertical-align: middle;
    }

    .event-hero__crew .face-stack__item {
        width: 28px;
        height: 28px;
    }

    .event-hero__date {
        top: .5rem;
        left: .5rem;
        width: 76px;
    }

    .event-hero__day {
        font-size: 1.7rem;
    }

    .event-hero__month {
        font-size: .78rem;
    }

    .event-hero__weekday {
        display: none;
    }

    .event-hero__actions > .btn,
    .event-hero__actions > .share-pop {
        flex: 1 1 100%;
    }

    .event-hero__actions .share-pop__button {
        width: 100%;
        justify-content: center;
    }

    .reg-bar {
        margin-inline: .5rem;
        padding: 16px;
        border-radius: var(--es-r-xl);
    }

    .reg-bar__actions,
    .reg-bar__actions form,
    .reg-bar__actions .btn {
        width: 100%;
    }

    /* "Son N yer" stays on the bar's own meter; the sticky bar keeps only "Katıl". */
    .event-secnav__left {
        display: none;
    }

    .session-row {
        flex-wrap: wrap;
        gap: 12px 14px;
        padding: 12px;
        border-radius: var(--es-r-lg);
    }

    .session-row__time {
        flex-basis: 68px;
        padding: 10px 6px;
        border-radius: 16px;
    }

    .session-row__start {
        font-size: 1.1rem;
    }

    .session-row__body {
        flex: 1 1 0;
    }

    /* Its own line under the words, lined up with them. */
    .star-toggle {
        flex: 1 1 100%;
        padding-left: 82px;
    }

    .speaker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .speaker-card {
        padding: 18px 10px;
        border-radius: var(--es-r-lg);
    }

    .speaker-card__portrait {
        width: 76px;
        height: 76px;
        font-size: 1.5rem;
    }

    .sponsor-band {
        border-radius: var(--es-r-lg);
    }

    .sponsor-band__head {
        flex-basis: 100%;
    }

    .sponsor-band__logos {
        grid-template-columns: repeat(min(var(--sponsor-cols), var(--sponsor-n, 2), 2), minmax(0, 1fr));
    }

    .event-close {
        border-radius: var(--es-r-xl);
    }
}

@media (pointer: coarse) {
    .event-hero__org,
    .event-hero__category,
    .star-toggle__btn,
    .btn.event-secnav__join {
        min-height: 44px;
    }
}

/* ------------------------------------------------ share panel (plan job 4.9, DD-21)

   _ShareButton: a <details> whose panel is B's popover (popups-Share-B) — a title with C's Esc
   hint, the address in a field with "Bağlantıyı kopyala", five app tiles with C's row hints —
   hung under the button; under 576px the same panel is B's bottom sheet over a dimmed page. The
   copy button is the shared [data-copy] one: .is-copied turns the row green for its two seconds
   while the toast says it aloud. */
.share-pop {
    position: relative;
}

.share-pop__button {
    list-style: none;
}

.share-pop__button::-webkit-details-marker {
    display: none;
}

.share-pop[open] > .share-pop__button {
    background: var(--es-ink);
    border-color: var(--es-ink);
    color: var(--es-page);
}

/* Hung from the button's right edge: the button ends the registration bar's row, and a panel
   opening rightwards would leave the page. */
.share-pop__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(26rem, calc(100vw - 32px));
    padding: 20px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-menu-shadow);
    color: var(--es-body);
}

.share-pop[open] > .share-pop__panel {
    transform-origin: top right;
    animation: es-menu-in var(--es-dur) var(--es-ease);
}

/* Between the phone sheet and the desktop row the event hero's actions wrap (plan job 5.6), and
   "Paylaş" can land in the left half, where a panel hung from its right edge started off the page
   and scrolled it sideways. Here the panel hangs from the row's own left edge instead, which is
   always on the page, with or without script. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .event-hero__actions {
        position: relative;
    }

    .event-hero__actions .share-pop {
        position: static;
    }

    .event-hero__actions .share-pop__panel {
        right: auto;
        left: 0;
    }
}

.share-pop__grab,
.share-pop__event,
.share-pop__scrim,
.share-pop__cancel {
    display: none;
}

.share-pop__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.share-pop__title {
    margin: 0;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
}

.share-pop__esc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--es-faint);
    font-size: .75rem;
}

/* Nothing to press on a phone. */
@media (pointer: coarse) {
    .share-pop__esc {
        display: none;
    }
}

.share-pop__address {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 6px 6px 6px 14px;
    border-radius: var(--es-r);
    background: var(--es-fill);
    color: var(--es-muted);
    transition: background-color var(--es-dur) var(--es-ease), color var(--es-dur) var(--es-ease);
}

.share-pop__address > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* The address as a read-only field: selectable with script off, and what the copy reads. */
.share-pop__url {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .85rem;
    font-weight: 550;
    text-overflow: ellipsis;
}

.share-pop__url:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 4px;
    border-radius: 4px;
}

.share-pop__copy {
    flex: 0 0 auto;
    white-space: nowrap;
}

.share-pop__address:has(.is-copied) {
    background: var(--es-ok-soft);
    color: var(--es-ok);
}

.share-pop__copy.is-copied {
    --bs-btn-bg: var(--es-ok);
    --bs-btn-border-color: var(--es-ok);
    --bs-btn-color: var(--es-ok-ink);
    --bs-btn-hover-bg: var(--es-ok);
    --bs-btn-hover-border-color: var(--es-ok);
    --bs-btn-hover-color: var(--es-ok-ink);
    --bs-btn-active-bg: var(--es-ok);
    --bs-btn-active-border-color: var(--es-ok);
    --bs-btn-active-color: var(--es-ok-ink);
}

.share-pop__apps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.share-pop__app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 14px 4px 10px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
    color: var(--es-ink);
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--es-dur-fast) var(--es-ease), box-shadow var(--es-dur-fast) var(--es-ease);
}

.share-pop__app:hover {
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow-hover);
    color: var(--es-ink);
}

.share-pop__mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 2px;
    border-radius: 14px;
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    color: var(--es-ink);
    transition: background-color var(--es-dur-fast) var(--es-ease), color var(--es-dur-fast) var(--es-ease);
}

.share-pop__mark svg {
    width: 20px;
    height: 20px;
}

/* B's hover: the mark takes the ember. */
.share-pop__app:hover .share-pop__mark,
.share-pop__app:focus-visible .share-pop__mark {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.share-pop__hint {
    color: var(--es-faint);
    font-size: .68rem;
    font-weight: 550;
    text-wrap: balance;
}

/* A phone: B's bottom sheet over a dimmed page — once site.js has run (.is-enhanced), since only
   then can the scrim and "Vazgeç" close it. With script off the panel stays the popover under the
   button, which the button itself closes. */
@media (max-width: 575.98px) {
    .share-pop.is-enhanced[open] > .share-pop__scrim:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1069;
        background: var(--es-backdrop);
        animation: es-fade-in var(--es-dur-slow) ease;
    }

    /* Script off: the popover is as wide as the full-width button above it. */
    .share-pop:not(.is-enhanced) > .share-pop__panel {
        left: 0;
        width: auto;
    }

    .share-pop.is-enhanced > .share-pop__panel {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1070;
        gap: 14px;
        width: auto;
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
        padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
        border-bottom: 0;
        border-radius: var(--es-r-xl) var(--es-r-xl) 0 0;
    }

    .share-pop.is-enhanced[open] > .share-pop__panel {
        animation: es-sheet-in var(--es-dur-slow) var(--es-ease);
    }

    .share-pop.is-enhanced .share-pop__grab {
        display: block;
        align-self: center;
        width: 40px;
        height: 4px;
        border-radius: var(--es-r-pill);
        background: var(--es-line-strong);
    }

    .share-pop__head {
        justify-content: center;
    }

    .share-pop__title {
        font-size: 1.1rem;
    }

    .share-pop__event {
        display: block;
        margin: -8px 0 0;
        color: var(--es-muted);
        font-size: .85rem;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .share-pop__address {
        flex-wrap: wrap;
    }

    .share-pop__url {
        flex-basis: calc(100% - 30px);
        min-height: 36px;
    }

    .share-pop__copy {
        width: 100%;
    }

    .share-pop__app {
        padding: 10px 0 8px;
        background: none;
    }

    .share-pop__mark {
        width: 46px;
        height: 46px;
        border-radius: 16px;
        background: var(--es-fill);
        box-shadow: none;
    }

    .share-pop__hint {
        display: none;
    }

    .share-pop__cancel:not([hidden]) {
        display: block;
        min-height: 44px;
        color: var(--es-muted);
    }
}

/* =============================================================================================
   ACCOUNT, INVITATION AND THE ONE-OFF PAGES (design.md §7.8, §8.1)
   =============================================================================================

   The rest of the owner's walk. Sign-in, the invitation link and the two standing pages used to
   render in the light work shell with the public header on top, so a visitor who had just come
   from the dark discovery home watched the site change surface underneath them. The account
   screens now wear a split of their own — the form on light, the shell beside it — and the
   invitation, developer and privacy pages simply move onto the discovery shell.

   A sign-in page is not a work surface — it is the door to the site, and the door belongs to the
   building. (The portal and the admin area went dark a day later, 18 September 2026; since October 2026 all follow the theme.)
*/

/* ------------------------------------- the account split (design.md §7.8, plan job 3.6)

   B's split (design auth-Login-B): a rounded visual panel and the form beside it, inside a 16px
   frame of the page. The panel is the screen's own — each view picks its ground, a word, one big
   two-part title and one tile through _AuthLayout's slots — and stays plain: no floating cards
   (plan §8 B-9). Below lg it shrinks to a short band above the form, so a phone still sees whose
   door it is without scrolling past a poster. */

.auth-body {
    margin: 0;
    background: var(--es-page);
}

.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 12px;
    min-height: 100vh;
    padding: 12px;
}

/* -- the visual panel */

.auth-art {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: .9rem 1.25rem 1.25rem;
    border-radius: var(--es-r-xl);
    border: 1px solid var(--es-glow-line);
    color: var(--es-ink);
    background: var(--es-fill);
}

/* The grounds. Light never gets a plain white panel (the stage-2 review): the default is the
   warm fill with an ember glow in one corner, "brand" the orange wash. "admin", "admin-grid" and
   "stage" are pinned dark in both themes by .es-dark in the layout (DD-24), so every token in
   them — the dot and line colours included — resolves to its dark value; the ember edge above is
   what lifts them off a dark page. */
.auth-art--soft {
    background:
        radial-gradient(90% 70% at 100% 100%, var(--es-brand-soft), transparent 70%),
        var(--es-fill);
}

.auth-art--brand {
    background:
        linear-gradient(155deg, var(--es-brand-soft) 0%, color-mix(in srgb, var(--es-brand) 16%, var(--es-brand-soft)) 100%),
        var(--es-fill);
}

/* B's administrator door: the night ground with a dot grid. */
.auth-art--admin {
    background:
        radial-gradient(var(--es-line-strong) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
        radial-gradient(70% 60% at 0% 100%, var(--es-brand-soft), transparent 70%),
        var(--es-page);
}

/* C's administrator code (plan §8 B-11): the same night with a line grid instead. The ground is
   the fill, a tone above the page, not C's near-black (plan job 6.9): beside the dark theme's page
   the near-black read as a hole rather than a panel. */
.auth-art--admin-grid {
    background:
        linear-gradient(var(--es-line) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, var(--es-line) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--es-fill);
}

/* C's refusal ("Kulis kapısı kapalı"): a dark stage under one ember spotlight. */
.auth-art--stage {
    background:
        radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--es-brand) 24%, transparent), transparent 72%),
        var(--es-page);
}

/* The word, not a logo (plan Ek B, DD-20 as amended); 44px tall so it is a real target. */
.auth-art__brand {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 44px;
}

/* The one large tile in the middle of the panel — a desk-only ornament, gone from the band. */
.auth-art__tile {
    display: none;
}

.auth-art__kicker {
    margin-bottom: .5rem;
}

.auth-art__title {
    margin: 0;
    font-family: var(--es-font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 1rem + 2vw, 1.9rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    color: var(--es-ink);

    /* "Kaldığınız" and "yöneticiler." are long words at display size; the panel must never be
       what scrolls the page sideways. */
    overflow-wrap: anywhere;
}

.auth-art__dim {
    display: block;
    font-weight: 400;
    color: var(--es-muted);
}

/* -- the form column */

/* The corner row on top, the form in the middle, the site's links at the foot. */
.auth-split__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    padding: 0 4px .75rem;
}

/* The switch link and the theme button (plan §8 B-6), side by side in the top-right corner. */
.auth-split__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem .75rem;
    min-height: 44px;
}

/* In this row the corner picker is part of the flow, not floated over the page. */
.auth-split__top .theme-menu--corner {
    position: relative;
    top: auto;
    right: auto;
}

/* On a phone the form follows the corner row straight away; from lg it sits in the middle of the
   column, level with the panel beside it. */
.auth-split__body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    max-width: 27.5rem;
    margin-inline: auto;
}

.auth-split__body .auth {
    width: 100%;
    max-width: none;
    margin: 0;
}

.auth-split__foot {
    margin: 0;
    font-size: .85rem;
    color: var(--es-muted);
    text-align: center;
}

.auth-split__foot a {
    color: var(--es-muted);
}

.auth-split__foot a:hover {
    color: var(--es-brand-strong);
}

.auth-split__dot {
    margin-inline: .4rem;
}

/* The neighbouring screen ("Hesap oluşturun", "Girişe dön"): B's soft pill, a 44px target. */
.auth-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem .75rem;
    margin: 0;
    font-size: .875rem;
    color: var(--es-muted);
}

.auth-switch__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: 0 1.1rem;
    border-radius: var(--es-r-pill);
    background: var(--es-fill-2);
    color: var(--es-ink);
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--es-dur) var(--es-ease), color var(--es-dur) var(--es-ease);
}

.auth-switch__link:hover {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
}

.auth-switch__link svg {
    width: 16px;
    height: 16px;
}

@media (min-width: 992px) {
    /* Two even halves from lg: at 992px each still leaves the six code boxes well over the 44px
       of §5.3. */
    .auth-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: none;
        gap: 16px;
        padding: 16px;
    }

    /* The panel holds the viewport while a long form (registration) scrolls beside it. */
    .auth-art {
        position: sticky;
        top: 16px;
        align-self: start;
        min-height: calc(100vh - 32px);
        padding: 2.25rem 2.75rem 2.75rem;
        border-radius: var(--es-r-band);
    }

    .auth-art__brand {
        font-size: 1.35rem;
    }

    .auth-art__tile {
        display: grid;
        place-items: center;
        align-self: center;
        width: 10rem;
        height: 10rem;
        border-radius: var(--es-r-band);
        background: var(--es-brand);
        color: var(--es-brand-ink);
        box-shadow: 0 40px 80px -28px color-mix(in srgb, var(--es-brand) 60%, transparent);
    }

    .auth-art__tile svg {
        width: 5rem;
        height: 5rem;
        stroke-width: 1.4;
    }

    /* On the orange wash the tile turns to the surface, the icon to the brand. */
    .auth-art--brand .auth-art__tile {
        background: var(--es-surface);
        color: var(--es-brand);
    }

    /* On the night grounds: a quiet tile with the ember icon, level, as C draws it. */
    .auth-art--admin .auth-art__tile,
    .auth-art--admin-grid .auth-art__tile,
    .auth-art--stage .auth-art__tile {
        background: var(--es-fill);
        color: var(--es-brand);
        border: 1px solid var(--es-glow-line);
        transform: none;
        box-shadow: var(--es-card-shadow);
    }

    .auth-art__title {
        font-size: var(--es-fs-display);
        line-height: 1.02;
    }

    .auth-split__form {
        gap: 1.5rem;
        padding: .25rem clamp(1rem, 4vw, 5rem) .5rem;
    }

    .auth-split__body {
        justify-content: center;
    }
}

/* ------------------------------------------------------------- the form inside that column */

/* A long address inside the lead must not push the card sideways at 390px. */
.auth__lead strong,
.auth__fine strong {
    overflow-wrap: anywhere;
}

.auth__fine {
    font-size: .85rem;
    line-height: 1.6;
    color: var(--es-muted);
    margin-bottom: 1.25rem;
}

/* The field's and the button's own heights (plan job 3.6; K12): 42/40px on a desk, the 44px
   touch target (design.md §5.3) on a touch screen through the tokens. (`.btn-link` was excluded
   while "Kodu yeniden gönder" sat inside a sentence; since plan job 6.6 it is its own pill.) */
.auth .form-control {
    min-height: var(--es-h-field);
}

.auth .btn {
    min-height: var(--es-h-btn);
}

/* ------------------------------ sign-in and registration (plan jobs 6.4 and 6.5, design.md §7.8)

   auth-Login-B and auth-Register-B on the account split, with C's field icons, its "aynı giriş"
   line, its three lines on the registration panel and its fixed invitation address. */

/* B's two-part title ("Giriş yapın / tekrar merhaba."), the second line quieter. */
.auth__title-dim {
    display: block;
    font-weight: 400;
    color: var(--es-muted);
}

/* The form's own rhythm: one gap between its blocks instead of a margin on each. Hidden inputs
   and an empty summary are display:none and take no gap. */
.auth-form {
    display: grid;
    gap: 1.25rem;
}

/* The summary's own bottom margin would double the gap. */
.auth-form > .form-errors {
    margin-bottom: 0;
}

/* A field with C's leading glyph (auth-Login-C): the icon sits inside the left edge and never
   takes a click, so the field stays one target. It turns to the accent with the field's focus. */
.field-icon {
    position: relative;
}

.field-icon > .form-control {
    padding-left: 2.85rem;
}

.field-icon__glyph {
    position: absolute;
    top: 50%;
    left: 1rem;
    display: grid;
    color: var(--es-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.field-icon__glyph svg {
    width: 18px;
    height: 18px;
}

.field-icon:focus-within .field-icon__glyph {
    color: var(--es-brand);
}

/* First and last name side by side (auth-Register-B), on a phone too: two names fit in 390px.
   Only a very narrow screen stacks them. */
.auth-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem .75rem;
}

@media (max-width: 339.98px) {
    .auth-pair {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The invited address (AD-19, auth-Register-C): printed text in a box with a dashed edge and a
   lock, so it reads as given rather than as a field to fill. Text rather than a read-only input,
   so a long address wraps on a phone instead of being cut off at the box's edge. */
.auth-fixed {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: var(--es-h-field);
    margin: 0;
    padding: .65rem 1rem;
    border: 1px dashed var(--es-line-strong);
    border-radius: var(--es-r-input);
    background: var(--es-fill);
    color: var(--es-ink);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.45;
}

.auth-fixed__text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.auth-fixed__icon {
    display: grid;
    flex: none;
    color: var(--es-muted);
}

.auth-fixed__icon svg {
    width: 16px;
    height: 16px;
}

/* Whose invitation the registration answers (auth-Register-B "Davetle gelen"): the
   organization's initials, the kind of invitation and the name. */
.auth-invite {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.5rem;
    padding: .75rem;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.auth-invite__mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--es-r);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-family: var(--es-font-display);
    font-weight: 700;
}

.auth-invite__text {
    display: grid;
    min-width: 0;
}

.auth-invite__kind {
    font-size: .8rem;
    font-weight: 600;
    color: var(--es-muted);
}

.auth-invite__name {
    font-family: var(--es-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

/* "Beni hatırla" as B's switch and "Şifremi unuttum" on the same row; both 44px targets. */
.auth-remember {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem 1rem;
}

.auth-remember__switch {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-height: 44px;
    margin: 0;
    font-size: .925rem;
    font-weight: 600;
    color: var(--es-ink);
    cursor: pointer;
}

/* "Kodu nereye gönderelim?" (AD-39, DD-43): the sign-up and application forms' channel choice,
   two plain radios side by side; the legend reads like every other label. */
.auth-channel {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.auth-channel__options {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.auth-channel__options .form-check {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    margin: 0;
    cursor: pointer;
}

/* The administrator's door (AD-20): B's quiet pill under the form. */
.auth-admin-door {
    margin: 1.5rem 0 0;
    text-align: center;
}

.auth-admin-door__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: 0 1.1rem;
    border-radius: var(--es-r-pill);
    background: var(--es-fill-2);
    color: var(--es-body);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--es-dur) var(--es-ease), color var(--es-dur) var(--es-ease);
}

.auth-admin-door__link:hover {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
}

.auth-admin-door__link svg {
    width: 16px;
    height: 16px;
}

/* "6 haneli bir doğrulama kodu göndereceğiz" (auth-Register-B): the ember wash with a round mark. */
.auth-note {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .75rem .9rem;
    border-radius: var(--es-r-lg);
    background: var(--es-brand-soft);
    color: var(--es-ink);
    font-size: .9rem;
    font-weight: 600;
}

.auth-note__icon {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

/* The registration panel's three lines (auth-Register-C), from lg only: on a phone the panel is
   a band above the form (_AuthLayout). Plain lines under the title, not floating cards (B-9). */
.auth-art__points {
    display: none;
}

@media (min-width: 992px) {
    .auth-art__points {
        display: grid;
        gap: .6rem;
        max-width: 26rem;
        margin: 1.75rem 0 0;
        padding: 0;
        list-style: none;
    }

    .auth-art__points li {
        display: flex;
        align-items: center;
        gap: .75rem;
        font-size: .95rem;
        font-weight: 600;
        color: var(--es-ink);
    }

    .auth-art__points .icbox {
        background: var(--es-surface);
    }
}

/* --------------- the administrator's door and the refusal (plan jobs 6.9 and 6.10, design.md §7.8)

   auth-AdminLogin-B with C's two lines on the panel, auth-AdminCode-C (its raised form panel and
   line grid) with B's six dots, and auth-Denied-C with B's large icon. One shell, each screen its
   own content (B-11). */

/* B's small label over the form's title ("Yönetim paneli"): a word in a soft pill, the same on
   both administrator screens. */
.auth-cap {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 30px;
    margin-bottom: 1rem;
    padding: .2rem .85rem;
    border-radius: var(--es-r-pill);
    background: var(--es-fill-2);
    color: var(--es-ink);
    font-size: .8125rem;
    font-weight: 700;
}

.auth-cap svg {
    width: 15px;
    height: 15px;
    color: var(--es-brand);
}

/* The administrator screens' corner question is longer than the visitor's; on a phone it would
   push the theme button onto a row of its own, and the link alone ("Normal giriş") says enough. */
@media (max-width: 575.98px) {
    .auth-switch__lead--desk {
        display: none;
    }
}

/* auth-AdminLogin-C's "giriş ...... e-postayla gelen kod" lines: a term, a dotted leader drawn by
   the row itself, and the value. From lg only, like .auth-art__points. */
.auth-art__spec {
    display: none;
}

/* B's six dots on the code screen's panel: five lit, the sixth waiting. Decoration, lg only. */
.auth-art__digits {
    display: none;
}

@media (min-width: 992px) {
    .auth-art__spec {
        display: grid;
        gap: .55rem;
        max-width: 24rem;
        margin: 1.75rem 0 0;
        font-family: var(--bs-font-monospace);
        font-size: .82rem;
        color: var(--es-muted);
    }

    .auth-art__spec > div {
        display: flex;
        align-items: baseline;
        gap: .6rem;
    }

    .auth-art__spec > div::after {
        content: "";
        order: 1;
        flex: 1;
        min-width: 1.5rem;
        border-bottom: 1px dotted var(--es-line-strong);
    }

    .auth-art__spec dt {
        font-weight: 400;
    }

    .auth-art__spec dd {
        order: 2;
        margin: 0;
        color: var(--es-ink);
    }

    .auth-art__digits {
        display: flex;
        gap: 1rem;
        margin-top: 1.75rem;
    }

    .auth-art__digit {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--es-brand);
    }

    .auth-art__digit--next {
        background: var(--es-line-strong);
    }
}

/* C's form panel on the code screen: a tone above the column (the surface, an edge and the card
   shadow), so the six boxes' 3:1 edges (.code-field) sit on a raised ground in both themes rather
   than on C's near-black. */
.auth__card--raised {
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

@media (min-width: 576px) {
    .auth__card--raised {
        padding: 2rem;
    }
}

/* C's foot row inside that panel: the question on the left, the way to a new code on the right. */
.auth-raised__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 .75rem;
    margin: 1.25rem 0 0;
    padding-top: .5rem;
    border-top: 1px solid var(--es-line);
    font-size: .875rem;
    color: var(--es-muted);
}

.auth-raised__foot a,
.auth-raised__resend {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
    color: var(--es-ink);
}

/* The admin code page's resend is a POST (AD-20), drawn as the link it replaced. */
.auth-raised__resend {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* The refusal's icon in the card: on a phone only, where the panel is a band with no tile; from
   lg the panel's large lock says it (never both). */
.auth-denied__icon {
    margin-bottom: 1.25rem;
}

@media (min-width: 992px) {
    .auth-denied__icon {
        display: none;
    }
}

/* auth-Denied-C's account chip: whose account was refused, often the whole answer. */
.auth-who {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: .65rem .85rem;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r);
    background: var(--es-fill);
}

.auth-who__avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-size: .85rem;
    font-weight: 700;
    object-fit: cover;
}

.auth-who__text {
    display: grid;
    min-width: 0;
}

.auth-who__name {
    font-size: .92rem;
    font-weight: 700;
    color: var(--es-ink);
}

.auth-who__mail {
    font-size: .82rem;
    color: var(--es-muted);
    overflow-wrap: anywhere;
}

.auth-denied__actions {
    display: grid;
    gap: .6rem;
}

/* --------------- the code pages (plan jobs 6.6–6.8, design.md §7.8; AD-39, DD-43)

   auth-Verify-B, auth-Forgot-B, auth-CheckMail-B and auth-Reset-B on the account split, with C's
   step labels on the verification panel. The titles are B's two-part ones (.auth__title-dim), the
   fields C's iconed ones (.field-icon), the fixed address the invitation's (.auth-fixed). */

/* "Adım 2 / 2" over the verification title — only when the person came from registration. */
.auth__step {
    margin: 0 0 .5rem;
}

/* Inside the form's grid the gap spaces the code field; its own margin would double it. */
.auth-form > .code-field {
    margin-bottom: 0;
}

/* auth-Verify-C's two steps on the panel (from lg, like .auth-art__points it extends): the one
   behind done in the ok tone, the current one in the ember. */
.auth-steps .is-done .icbox {
    background: var(--es-ok-soft);
    color: var(--es-ok);
}

.auth-steps [aria-current="step"] .icbox {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

/* B's "Kod gelmedi mi? Kodu yeniden gönder": one soft pill, a 48px target, centred under the
   button — the whole pill is the resend submit (VerifyEmail.cshtml). */
.auth-resend {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    flex-wrap: wrap;
    gap: .25rem .6rem;
    min-height: 48px;
    padding: .4rem 1.1rem .4rem .45rem;
    border: 0;
    border-radius: var(--es-r-pill);
    background: var(--es-fill-2);
    color: var(--es-muted);
    font-size: .9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--es-dur) var(--es-ease);
}

.auth-resend:hover {
    background: var(--es-brand-soft);
}

.auth-resend:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.auth-resend__icon {
    width: 32px;
    height: 32px;
    background: var(--es-surface);
    color: var(--es-ink);
}

.auth-resend__icon svg {
    width: 15px;
    height: 15px;
}

.auth-resend__do {
    font-weight: 700;
    color: var(--es-brand-strong);
}

/* The quiet line under a form ("Şifrenizi hatırladınız mı? Girişe dön"). */
.auth-aside {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: .9rem;
    color: var(--es-muted);
}

.auth-aside a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
    color: var(--es-brand-strong);
}

/* The round mark over the check-your-mail title (auth-CheckMail-B), its ember halo the soft
   ring; --bad is the invalid-link screen's. */
.auth-sent {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 0 1.25rem 10px;
    border-radius: 50%;
    background: var(--es-brand);
    color: var(--es-brand-ink);
    box-shadow: 0 0 0 10px var(--es-brand-soft);
}

.auth-sent svg {
    width: 28px;
    height: 28px;
}

.auth-sent--bad {
    background: var(--es-bad-soft);
    color: var(--es-bad);
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--es-bad-soft) 50%, transparent);
}

/* "Bağlantı 2 saat geçerli": B's warm capsule. The hours come from AccountEmails. */
.auth-validity {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .75rem;
    padding: .4rem .85rem;
    border-radius: var(--es-r-pill);
    background: var(--es-warn-soft);
    color: var(--es-warn);
    font-size: .85rem;
    font-weight: 700;
}

.auth-validity svg {
    width: 15px;
    height: 15px;
}

/* "Yanlış adres mi yazdınız? · Başka bir adres dene" on one row, wrapping on a phone. */
.auth-retry {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--es-line);
    font-size: .9rem;
    color: var(--es-muted);
}

/* A form on its way (site.js, data-busy-label): the button dims and shows a small ring beside its
   word, and takes no second press. */
.btn.is-busy {
    opacity: .75;
    pointer-events: none;
}

.busy-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .5rem;
    vertical-align: -.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: es-busy-spin .8s linear infinite;
}

@keyframes es-busy-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ------------------------------------- the six-digit code field (plan job 4.3, design.md §7.8) */

/*
    _CodeField: the sign-up code, the administrator's code and the hosted application's code, one
    field on all three pages (design auth-Verify-B, auth-AdminCode-C, auth-Code-B). site.js builds
    the boxes in front of the real input and keeps it in step; without JavaScript the real input
    is what renders, which is deliberate — the code is typed by people whose sign-in depends on
    it, and a script that failed to load must not cost them the account.

    B's filled box, with an edge it did not have: a box is a field, and a field's edge reaches 3:1
    (--es-edge, design.md §4.5, plan job 2.3) — B's edgeless fill was about 1.1:1 on either ground.
    Every colour is a theme token, so the boxes sit as well on the application card as on the
    account card; the light boxes on the old dark card were why that page kept a single field.
*/
.code-field {
    margin-bottom: 1.5rem;
}

/* The script-off field: one line the code is typed into, spaced like the boxes it stands for. */
.code-field__input {
    font-family: var(--es-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .4em;
    text-align: center;
    padding: .6rem .75rem;
}

.code-field__input::placeholder {
    letter-spacing: .4em;
}

.code-field__boxes {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .625rem;
    max-width: 26rem;
}

.code-field__box {
    width: 100%;
    min-width: 0;
    height: 4.25rem;
    padding: 0;
    text-align: center;
    font-family: var(--es-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--es-ink);
    caret-color: var(--es-brand);
    background: var(--es-fill);
    border: 1px solid var(--es-edge);
    border-radius: var(--es-r);
    transition: background-color var(--es-dur-fast) ease, border-color var(--es-dur-fast) ease,
        box-shadow var(--es-dur-fast) ease;
}

/* B's ember ring with the soft halo round it. The outline is kept (not swapped for the shadow
   alone) because a forced-colours display drops shadows, and the focus has to survive that. */
.code-field__box:focus,
.code-field__box:focus-visible {
    background: var(--es-surface);
    border-color: var(--es-brand);
    outline: 2px solid var(--es-brand);
    outline-offset: 0;
    box-shadow: 0 0 0 6px var(--es-ring);
}

/* A rejected code: every box red, and the line under them says why (each box is described by
   it — the colour alone would tell only the eye). */
.code-field.is-invalid .code-field__box {
    color: var(--es-bad);
    background: var(--es-bad-soft);
    border-color: var(--es-bad);
}

.code-field.is-invalid .code-field__box:focus,
.code-field.is-invalid .code-field__box:focus-visible {
    outline-color: var(--es-bad);
    box-shadow: 0 0 0 6px var(--es-bad-ring);
}

/* B's error message box, in DD-16's error-box tokens (the same as the form's error summary). */
.code-field__error {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .75rem 0 0;
    padding: .6rem .8rem;
    border: 1px solid var(--es-bad-box-line);
    border-radius: var(--es-r);
    background: var(--es-bad-box);
    color: var(--es-bad-box-text);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
}

/* As wide as the boxes it explains; under the script-off field, as wide as the field. */
.code-field.is-enhanced .code-field__error {
    max-width: 26rem;
}

.code-field__error svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.code-field__note {
    margin: .6rem 0 0;
}

/* B's phone box (design auth-Verify-B: 44 × 56). At 360px six boxes and their gaps still fit the
   card, and each stays a 44px target. */
@media (max-width: 640px) {
    .code-field__boxes {
        gap: .4rem;
    }

    .code-field__box {
        min-width: 44px;
        height: 3.5rem;
        font-size: 1.4rem;
        border-radius: var(--es-r-input);
    }
}

/* Under 360px the application card is narrower than six 44px boxes; the boxes give up width
   (never height) rather than push the card sideways. */
@media (max-width: 359px) {
    .code-field__boxes {
        gap: .25rem;
    }

    .code-field__box {
        min-width: 0;
    }
}

/* ---------------------------------------------------- the image field (plan job 4.4)

    _ImageField: the picture on file with its "Kaldır" box, the chosen file's row and a drop zone
    (design portal1-OrgSettings-C's .drop, portal1-TeamMember-C, admin2-TierNew-B). Without
    site.js the field is the browser's own file input, unchanged; .is-enhanced (set by the
    script) is what lays that input invisibly over the dashed zone, so a click anywhere in it
    opens the picker and a dropped file lands in the input itself. The thumbnails keep the shape
    the picture has on the site — a cover 16:9 (A-3), a portrait square, a logo fitted, never
    cropped, on paper as every logo box is (DD-5 as amended).
*/
.image-field {
    margin-bottom: 1.5rem;
}

.image-field__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .75rem;
    padding: .75rem;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r);
    background: var(--es-fill);
}

.image-field__item[hidden],
.image-field__prompt[hidden] {
    display: none;
}

.image-field__thumb {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-sm);
    background: var(--es-surface);
    color: var(--es-faint);
}

.image-field--cover .image-field__thumb {
    width: 8rem;
    height: auto;
    aspect-ratio: 16 / 9;
}

.image-field--logo .image-field__thumb {
    background: var(--es-paper);
}

.image-field__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-field--logo .image-field__thumb img {
    padding: 6px;
    object-fit: contain;
}

.image-field__thumb svg {
    width: 22px;
    height: 22px;
}

/* The chosen file's row shows the picture once it is read; until then (or for a file that is
   not a picture) the image icon stands in for it. */
.image-field__thumb img:not([hidden]) + svg,
.image-field__thumb img[hidden] {
    display: none;
}

.image-field__meta {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.image-field__title {
    color: var(--es-ink);
    font-size: .9rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.image-field__size {
    color: var(--es-muted);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.image-field__warn {
    color: var(--es-warn-box-text);
    font-size: .8125rem;
    font-weight: 600;
}

.image-field__remove {
    margin: 0;
}

/* Ticked, the picture on file is on its way out: it fades so the box is read as doing something. */
.image-field__current:has(.image-field__remove :checked) .image-field__thumb {
    opacity: .4;
}

/* The new file is what the form will save — the ember's soft tint marks it as the change. */
.image-field__chosen {
    border-color: var(--es-brand-border);
    background: var(--es-brand-soft);
}

.image-field__clear {
    flex: 0 0 auto;
}

.image-field__drop {
    position: relative;
}

.image-field.is-enhanced .image-field__drop {
    display: flex;
    align-items: center;
    gap: .875rem;
    min-height: 4.5rem;
    padding: 1rem 1.125rem;
    border: 1.5px dashed var(--es-edge);
    border-radius: var(--es-r);
    background: var(--es-fill);
    color: var(--es-muted);
    font-size: .9rem;
    transition: border-color var(--es-dur-fast) ease, background-color var(--es-dur-fast) ease;
}

.image-field.is-enhanced.image-field--cover .image-field__drop {
    min-height: 6rem;
}

/* The real input, over the whole zone and see-through: its own click opens the picker and its own
   drop takes the file, so nothing is copied between a drop target and the field. */
.image-field.is-enhanced .image-field__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.image-field__prompt {
    display: flex;
    align-items: center;
    gap: .875rem;
}

.image-field__pick {
    color: var(--es-brand);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.image-field.is-enhanced .image-field__drop:hover,
.image-field.is-dragover .image-field__drop {
    border-color: var(--es-brand);
    background: var(--es-brand-soft);
}

/* The input is invisible, so the zone carries its focus: B's ember ring, as on every field. */
.image-field.is-enhanced .image-field__drop:has(.image-field__input:focus-visible) {
    border-color: var(--es-brand);
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--es-ring);
}

.image-field.is-invalid .image-field__drop,
.image-field.is-invalid:not(.is-enhanced) .image-field__input {
    border-color: var(--es-bad);
}

.image-field.is-disabled .image-field__drop {
    opacity: .6;
}

.image-field.is-disabled .image-field__input,
.image-field.is-disabled .image-field__drop:hover {
    cursor: not-allowed;
    border-color: var(--es-edge);
    background: var(--es-fill);
}

.image-field__hint {
    margin: .5rem 0 0;
}

/* ------------------------------------- the invitation page (AD-19; plan job 6.17, me-Invitation-B)

   B's floating card: the picture (the event's cover for a speaking invitation, the
   organization's otherwise, its swatch when there is none — DD-7) with the organization over a
   scrim, the display title with its light half, the address and the role as two capsules with
   their icons — the loudest facts on the page (design.md §8.1): whoever decides has to see which
   account answers this link first — and, for a speaker, the session in three tiles. Under it
   me-Invitation-C's "Yanıtınız" panel while the invitation is open, or the closed state's row with
   its icon and tone from DisplayText.

   The block is .invite-page, not .invite: the pending-invitation list (_PendingInvitations) owns
   .invite and .invite__actions. */
.invite-page {
    max-width: 54rem;
    margin: 0 auto;
    padding-bottom: 2rem;
}

.invite-page__card {
    padding: 14px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-band);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

/* Dark in both themes (the --es-scheme-dark pin): words over an arbitrary photograph need the
   scrim, and the scrim needs light words (design.md §4.4). */
.invite-page__media {
    color-scheme: var(--es-scheme-dark);
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 16 / 9;
    padding: 20px 22px;
    overflow: clip;
    border-radius: calc(var(--es-r-band) - 10px);
    background: var(--es-cat-ink);
}

.invite-page__media.show-card__cover {
    aspect-ratio: 16 / 9;
    overflow: clip;
}

.invite-page__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, var(--es-photo-scrim));
}

.invite-page__cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.invite-page__event {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    max-width: calc(100% - 36px);
    padding: .4rem 1rem;
    overflow: hidden;
    border-radius: var(--es-r-pill);
    background: var(--es-glass);
    -webkit-backdrop-filter: var(--es-glass-filter);
    backdrop-filter: var(--es-glass-filter);
    color: var(--es-ink);
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.invite-page__org {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* A logo is contained on a white tile and never cropped (design.md §4.8). */
.invite-page__logo {
    color-scheme: light;
    color: var(--es-ink);
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 18px;
    background: var(--es-paper);
    box-shadow: 0 0 0 4px var(--es-on-photo-line);
}

.invite-page__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}


.invite-page__org-text {
    display: grid;
    min-width: 0;
}

.invite-page__org-name {
    font-family: var(--es-font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.invite-page__kicker {
    color: var(--es-body);
    font-size: .82rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.invite-page__body {
    display: grid;
    gap: 1.5rem;
    padding: 2rem 1.9rem 1.75rem;
}

.invite-page__title {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-display);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.05;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.invite-page__title-soft {
    color: var(--es-muted);
    font-weight: 300;
}

.invite-page__to {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.invite-page__chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    min-width: 0;
    padding: 6px 16px 6px 6px;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
}

.invite-page__chip-icon.icbox {
    width: 30px;
    height: 30px;
    background: var(--es-surface);
    color: var(--es-ink);
}

.invite-page__chip-icon svg {
    width: 14px;
    height: 14px;
}

.invite-page__chip-label {
    color: var(--es-muted);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.invite-page__chip-value {
    min-width: 0;
    color: var(--es-ink);
    font-size: .92rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.invite-page__chip--role {
    background: var(--es-brand-soft);
}

.invite-page__chip--role .invite-page__chip-icon,
.invite-page__chip--role .invite-page__chip-label,
.invite-page__chip--role .invite-page__chip-value {
    color: var(--es-brand);
}

.invite-page__lead {
    margin: 0;
    color: var(--es-body);
    font-size: 1.125rem;
    line-height: 1.6;
}

.invite-page__lead strong {
    color: var(--es-ink);
}

.invite-page__about {
    margin: 0;
    color: var(--es-muted);
    font-style: italic;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.invite-page__facts {
    display: grid;
    gap: 12px;
    margin: 0;
}

@media (min-width: 768px) {
    .invite-page__facts {
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
    }
}

.invite-page__fact {
    display: grid;
    align-content: start;
    gap: .5rem;
    padding: 18px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.invite-page__fact dt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    color: var(--es-muted);
    font-size: .8rem;
    font-weight: 600;
}

.invite-page__fact dd {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

/* "Yanıtınız" (me-Invitation-C), signed-out visitors only: signing in or creating the account. The invited account gets .invite-reply__actions alone (UIhataları 80). */
.invite-reply {
    display: grid;
    gap: 1rem;
    padding: 22px 24px;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.invite-reply__title {
    margin: 0;
}

.invite-reply__text {
    margin: 0;
    color: var(--es-body);
    font-size: .92rem;
    line-height: 1.6;
}

.invite-reply__text strong {
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.invite-reply__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.invite-reply__actions .btn {
    min-height: 44px;
}

/* A closed invitation: one row, the state's tone on its icon (DD-16 — the status lives in the icon,
   not in a colour field), the sentence, and where to go next when there is somewhere. */
.invite-state {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.invite-state__body {
    display: grid;
    justify-items: start;
    gap: .35rem;
    min-width: 0;
}

.invite-state__label {
    color: var(--es-ink);
    font-size: .88rem;
    font-weight: 700;
}

.invite-state__text {
    margin: 0;
    color: var(--es-muted);
    font-size: .95rem;
    line-height: 1.55;
}

.invite-state__action {
    margin-top: .4rem;
}

@media (pointer: coarse) {
    .invite-state__action {
        min-height: 44px;
    }
}

@media (max-width: 575.98px) {
    .invite-page__card {
        padding: 8px;
        border-radius: var(--es-r-xl);
    }

    .invite-page__media {
        padding: 16px;
        border-radius: calc(var(--es-r-xl) - 6px);
    }

    .invite-page__event {
        top: 12px;
        right: 12px;
        max-width: calc(100% - 24px);
    }

    .invite-page__body {
        padding: 1.5rem .9rem 1.1rem;
    }

    /* A long address does not fit a capsule's one line: the label goes over the value, beside
       the icon, and the capsule becomes a rounded box. */
    .invite-page__chip {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: .6rem;
        align-items: center;
        padding: 8px 14px 8px 8px;
        border-radius: var(--es-r-lg);
    }

    .invite-page__chip-icon.icbox {
        grid-row: span 2;
    }

    .invite-reply {
        padding: 18px 16px;
    }

    .invite-reply__actions,
    .invite-reply__actions form,
    .invite-reply__actions .btn {
        width: 100%;
    }
}

/* ----------------------- "davet almak istemiyorum" (business rule 36; plan job 6.17, me-Optout-B)

   One centred card on the fill band: the organization's logo with the mail badge on its corner,
   the question with its light half, the one button that records the refusal (a POST; the GET only
   asks), and the line that says no account is needed and nobody else is affected. The done and
   invalid-link states keep the card, with a round icon in place of the logo. */
.optout {
    margin-bottom: 2rem;
    padding: 72px 24px;
    border-radius: var(--es-r-band);
    background: var(--es-fill);
}

.optout__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 42.5rem;
    margin: 0 auto;
    padding: 48px 40px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-band);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    text-align: center;
}

.optout__mark {
    position: relative;
    display: inline-block;
}

.optout__logo {
    color-scheme: light;
    color: var(--es-ink);
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: 32px;
    background: var(--es-paper);
    box-shadow: var(--es-shadow-1);
}

.optout__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.optout__logo--initials {
    color-scheme: inherit;
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-family: var(--es-font-display);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.optout__badge {
    position: absolute;
    right: -10px;
    bottom: -10px;
    box-shadow: 0 0 0 4px var(--es-surface);
}

.optout__title {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-title);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.optout__title-soft {
    color: var(--es-muted);
    font-weight: 300;
}

.optout__lead {
    max-width: 46ch;
    margin: 0;
    color: var(--es-body);
    font-size: 1.1rem;
}

.optout__fine {
    margin: 0;
    color: var(--es-muted);
    font-size: .82rem;
    font-weight: 600;
}

.optout .btn {
    min-height: 44px;
}

@media (max-width: 575.98px) {
    .optout {
        padding: 24px 12px;
        border-radius: var(--es-r-xl);
    }

    .optout__card {
        padding: 32px 20px;
        border-radius: var(--es-r-xl);
    }

    .optout__card form,
    .optout__card .btn {
        width: 100%;
    }
}

/* ------------------------------------------------- long-form prose (design.md §8.1, /privacy) */

/* Legal text is read line by line, so the measure is capped rather than the container 1200px. */
.prose {
    max-width: 72ch;
    margin-bottom: 3rem;
    line-height: 1.75;
}

.prose p {
    margin-bottom: 1rem;
}

.prose p:last-child {
    margin-bottom: 0;
}

/* An administrator's legal text (AD-34): "## " lines become these headings, and the paragraphs
   keep the line breaks the text was typed with, so a list written line by line stays a list. */
.prose__heading {
    margin: 2.25rem 0 .75rem;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
}

.prose__heading:first-child {
    margin-top: 0;
}

.prose__text {
    white-space: pre-line;
}

/* ------------------------------------------------------- disclosure (plan job 4.14)

   Every <details> that opens onto more of a page — the ticket's code and sessions, "Oturumları
   puanla", the FAQ — shares one summary row (popups-Disclosures-B): filled, 56px tall, a label
   with an optional lead icon and count, and a round chevron on the right. Open, the row takes the
   selected-pill colours (--es-tab-on, the same pair as the status tabs) and the chevron turns
   ember. Kept a <details>: keyboard-native, no script, and the CSP has nothing to object to.

     <details class="disclosure">
       <summary class="disclosure__summary">
         [<svg> lead icon]  <span class="disclosure__label">…</span>
         [<span class="disclosure__meta">…</span>]
         <span class="disclosure__chevron" aria-hidden="true"><svg chevron-down></span>
       </summary>
       … content …
     </details> */
.disclosure__summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 56px;
    padding: .375rem .5rem .375rem 1.125rem;
    border-radius: var(--es-r);
    background: var(--es-fill);
    box-shadow: inset 0 0 0 1px transparent;
    color: var(--es-ink);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
    list-style: none;
    cursor: pointer;
    transition: background-color var(--es-dur) var(--es-ease), color var(--es-dur) var(--es-ease);
}

.disclosure__summary::-webkit-details-marker {
    display: none;
}

.disclosure__summary:hover {
    background: var(--es-fill-2);
}

.disclosure__summary:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.disclosure__summary > svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--es-brand);
}

.disclosure__label {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* C's quiet count beside the label ("3 / 6 puanlandı") — always a real number (plan §3 rule 10). */
.disclosure__meta {
    flex: 0 0 auto;
    color: var(--es-muted);
    font-size: .8125rem;
    font-weight: 600;
}

.disclosure__chevron {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--es-surface);
    box-shadow: var(--es-shadow-1);
    color: var(--es-ink);
    transition: transform var(--es-dur) var(--es-ease), background-color var(--es-dur) var(--es-ease);
}

.disclosure__chevron svg {
    width: 16px;
    height: 16px;
}

.disclosure[open] > .disclosure__summary {
    background: var(--es-tab-on);
    box-shadow: inset 0 0 0 1px var(--es-tab-on-edge);
    color: var(--es-tab-on-ink);
}

.disclosure[open] > .disclosure__summary > svg,
.disclosure[open] > .disclosure__summary .disclosure__meta {
    color: inherit;
}

.disclosure[open] > .disclosure__summary .disclosure__meta {
    opacity: .75;
}

.disclosure[open] > .disclosure__summary .disclosure__chevron {
    transform: rotate(180deg);
    background: var(--es-brand);
    box-shadow: none;
    color: var(--es-brand-ink);
}

@media (max-width: 575.98px) {
    .disclosure__summary {
        padding-left: .875rem;
    }
}

/* The support page's questions: a stack of rows rather than ruled lines. */
.faq {
    display: grid;
    gap: .5rem;
}

.faq__answer {
    padding: 1rem 1.125rem .75rem;
    line-height: 1.7;
}

.faq__answer p {
    margin-bottom: .6rem;
}

.faq__answer p:last-child {
    margin-bottom: 0;
}

/* =======================================================================
   The participant's own screens: /me and /me/organizations
   (design.md §7.7, DD-14; §8.1's rows for /me and /me/organizations)
   ======================================================================= */

/* Every button in a form is a tap target before it is a button (§5.3): on a touch screen the
   small size grows to 44px inside a card or a form's action row. */
@media (pointer: coarse) {
    .card .btn,
    .form-actions .btn {
        min-height: 44px;
    }
}

/* ------------------------------------------- /me/organizations (plan job 6.16, me-Orgs-B)

   The display title with its light second half, the organizations as covered cards beside the
   application form on the fill (one card; more than one take a row of their own,
   .myorgs__grid--stacked), the three steps after it as numbered cards, and the decided requests
   in a table. The page keeps its URL and its place in the menu (decision B-15). */

.myorgs {
    display: grid;
    gap: 2.5rem;
    padding-bottom: 2rem;
}

.myorgs > .invites {
    margin-bottom: 0;
}

.myorgs__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.myorgs__intro {
    display: grid;
    gap: .75rem;
    min-width: 0;
}

.myorgs__title {
    margin: 0;
    font-family: var(--es-font-display);
    /* The page-title token like every other page (UIhataları 50). "Organizasyonlarım" is one long
       word that must fit a phone unbroken (about 11.8 times the font size wide): the token's
       22px floor fits it at 320px, so still no overflow-wrap. */
    font-size: var(--es-fs-page);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--es-ink);
}

.myorgs__title-soft {
    color: var(--es-muted);
    font-weight: 300;
}

.myorgs__h2 {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h2);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
    color: var(--es-ink);
}

.myorgs__h2--center {
    text-align: center;
}

.myorgs__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.myorgs__count {
    color: var(--es-muted);
    font-size: .875rem;
    font-weight: 600;
}

.myorgs__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@media (min-width: 992px) {
    .myorgs__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .myorgs__grid--stacked {
        grid-template-columns: minmax(0, 1fr);
    }
}

.myorgs__list {
    display: grid;
    align-items: start;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.myorgs__grid--stacked .myorgs__list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.myorgs__list > li {
    display: flex;
    min-width: 0;
}

/* One organization: its cover, the logo lifted over the cover's edge on its white tile (design.md
   §4.8), the name with the role, and "Portala git" in the ember. The whole card is the link. */
.myorg {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    color: var(--es-body);
    text-decoration: none;
    transition: transform var(--es-dur-fast) var(--es-ease), box-shadow var(--es-dur-fast) var(--es-ease),
        border-color var(--es-dur-fast) var(--es-ease);
}

a.myorg:hover {
    transform: translateY(-2px);
    border-color: var(--es-glow-line-hover);
    box-shadow: var(--es-card-shadow-hover);
    color: var(--es-body);
}

.myorg__cover {
    color-scheme: var(--es-scheme-dark);
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--es-cat-ink);
}

.myorg__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--es-dur-slow) var(--es-ease);
}

a.myorg:hover .myorg__cover img {
    transform: scale(1.03);
}

/* "2 yaklaşan etkinlik" on the cover: the glass capsule every cover chip uses. */
.myorg__pill {
    color-scheme: var(--es-scheme-dark);
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    max-width: calc(100% - 2rem);
    padding: .3rem .8rem;
    border-radius: var(--es-r-pill);
    background: var(--es-glass);
    -webkit-backdrop-filter: var(--es-glass-filter);
    backdrop-filter: var(--es-glass-filter);
    color: var(--es-ink);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.myorg__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding: 0 1.6rem 1.6rem;
}

.myorg__logo {
    position: relative;
    z-index: 1;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    border-radius: 24px;
    object-fit: contain;
    background: var(--es-paper);
    box-shadow: 0 0 0 5px var(--es-surface), var(--es-shadow-1);
}


.myorg__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .75rem;
    min-width: 0;
}

.myorg__name {
    font-family: var(--es-font-display);
    font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.myorg__meta {
    color: var(--es-muted);
    font-size: .9rem;
    font-weight: 600;
}

.myorg__go {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--es-h-btn-lg);
    margin-top: auto;
    padding: 0 1.4rem;
    border-radius: var(--es-r-btn);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-weight: 700;
    box-shadow: var(--es-brand-shadow);
}

.myorg__go svg {
    width: 18px;
    height: 18px;
}

/* Suspended: still a way in, its portal readable but inert (business rule 12) — the amber edge
   and line say so before the portal does. */
.myorg--suspended {
    border-color: var(--es-warn-border);
}

.myorg--suspended .myorg__meta {
    color: var(--es-warn-box-text);
}

/* Closed for good: nothing to open, so no lift, no glow and a faded picture. */
.myorg--closed {
    background: var(--es-fill);
    border-color: var(--es-line);
    box-shadow: none;
}

.myorg--closed .myorg__cover,
.myorg--closed .myorg__logo {
    filter: grayscale(1);
    opacity: .55;
}

.myorg--closed .myorg__logo {
    box-shadow: 0 0 0 5px var(--es-fill);
}

.myorg--closed .myorg__name {
    color: var(--es-muted);
}

/* The one request business rule 3 allows, while it waits. */
.myorg-pending {
    display: grid;
    gap: .75rem;
    padding: 28px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.myorg-pending__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.myorg-pending__who {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.myorg-pending__name {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.myorg-pending__slug,
.myorg-pending__date {
    color: var(--es-muted);
    font-size: .85rem;
    overflow-wrap: anywhere;
}

.myorg-pending__date {
    font-weight: 600;
}

.myorg-pending__note {
    margin: 0;
    color: var(--es-muted);
    font-size: .92rem;
}

.myorg-pending form {
    justify-self: start;
}

/* The application form on B's fill panel; its fields stand on the surface so they read as
   fields against the fill rather than dissolving into it. */
.myorg-form {
    display: grid;
    gap: 1.25rem;
    padding: 28px;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-xl);
    background: var(--es-fill);
}

.myorg-form .form-control {
    background-color: var(--es-surface);
}

.myorg-form__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.myorg-form__tag {
    display: inline-flex;
    padding: .3rem .85rem;
    border-radius: var(--es-r-pill);
    background: var(--es-brand-soft);
    color: var(--es-brand);
    font-size: .8rem;
    font-weight: 700;
}

.myorg-form__fields {
    display: grid;
    gap: 1.1rem;
}

.myorg-form__fields > .form-errors {
    margin: 0;
}

.myorg-form__pair {
    display: grid;
    gap: 1.1rem;
}

@media (min-width: 576px) {
    .myorg-form__pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* "isteğe bağlı" beside a label: Açıklama and İletişim e-postası are optional in the model, whatever
   the design's stars said (plan Ek D). */
.myorg-form__opt {
    margin-left: .35rem;
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 600;
}

.myorg-form__slug .input-group-text {
    background: var(--es-brand-soft);
    color: var(--es-brand);
    font-weight: 700;
}

/* "Sonrasında ne oluyor?": three numbered cards, the first number in the ember. */
.myorgs__steps,
.myorgs__history {
    display: grid;
    gap: 1.25rem;
}

.myorg-steps {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .myorg-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.myorg-step {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 26px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.myorg-step__n {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--es-ink);
    color: var(--es-page);
    font-family: var(--es-font-display);
    font-size: 1.375rem;
    font-weight: 800;
}

.myorg-step__n--brand {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.myorg-step__title {
    font-family: var(--es-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--es-ink);
}

.myorg-step__text {
    color: var(--es-muted);
    font-size: .92rem;
}

.myorgs__cell-main {
    font-weight: 650;
    color: var(--es-ink);
}

.myorgs__cell-sub {
    color: var(--es-muted);
    font-size: .8rem;
}

.myorgs__reason {
    min-width: 16rem;
    max-width: 420px;
    color: var(--es-muted);
    white-space: normal;
}

@media (pointer: coarse) {
    .myorg-pending .btn {
        min-height: 44px;
    }
}

@media (max-width: 575.98px) {
    .myorg__body {
        padding: 0 1.15rem 1.25rem;
    }

    .myorg-pending,
    .myorg-form,
    .myorg-step {
        padding: 20px;
    }

    .myorg-form .btn-lg,
    .myorg-pending form,
    .myorg-pending .btn {
        width: 100%;
    }
}

/* ------------------------------------- the personal header of /me (plan job 6.12)

   me-Me-B's filled panel at the top of every /me tab (Components/MeHeader): the portrait in an
   ember ring on the surface, the kicker, the name in the display face with the open tab's own
   name light after it, the three count tiles on the surface — the invitations' in the ember, the
   one count that waits on the reader — and the tab row on the surface capsule with the chosen tab
   in ink, beside me-Me-C's "Sıradaki etkinliğiniz". */

.me-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin: .25rem 0 2.5rem;
    padding: 24px 20px 20px;
    border-radius: var(--es-r-xl);
    background: var(--es-fill);
    border: 1px solid var(--es-line);
}

.me-head__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 32px;
}

.me-head__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1 1 auto;
    gap: 16px 24px;
    min-width: 0;
}

.me-head__avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-family: var(--es-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.02em;
    box-shadow: 0 0 0 4px var(--es-surface), 0 0 0 6px var(--es-brand);
}

.me-head__text {
    display: grid;
    flex: 1 1 220px;
    gap: 6px;
    min-width: 0;
}

.me-head__title {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-title);
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.08;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.me-head__tab {
    color: var(--es-muted);
    font-weight: 300;
}

.me-head__meta {
    margin: 0;
    color: var(--es-muted);
    font-size: .9375rem;
    font-weight: 600;
}

.me-head__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.me-stat {
    display: grid;
    gap: 2px;
    min-width: 96px;
    padding: 12px 18px;
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    box-shadow: var(--es-shadow-1);
    color: var(--es-ink);
    text-decoration: none;
}

.me-stat:hover {
    color: var(--es-ink);
    box-shadow: inset 0 0 0 1px var(--es-glow-line-hover), var(--es-shadow-1);
}

.me-stat:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.me-stat__value {
    font-family: var(--es-font-display);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.me-stat__label {
    color: var(--es-muted);
    font-size: .8125rem;
    font-weight: 600;
}

/* --es-brand-ink is the text that reads on the ember in either theme (white on #c2410c, near
   black on the dark theme's brighter #ff6b35). */
.me-stat--brand,
.me-stat--brand:hover {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.me-stat--brand .me-stat__label {
    color: inherit;
    opacity: .85;
}

.me-head__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
}

.me-head .me-tabs {
    margin: 0;
    background: var(--es-surface);
}

.me-head .me-tabs a.is-active {
    background: var(--es-tab-on);
    color: var(--es-tab-on-ink);
    box-shadow: inset 0 0 0 1px var(--es-tab-on-edge);
}

.me-tabs a svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.me-next {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
    padding: 8px 18px 8px 8px;
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    box-shadow: var(--es-shadow-1);
    color: var(--es-ink);
    text-decoration: none;
}

.me-next:hover {
    color: var(--es-ink);
    box-shadow: inset 0 0 0 1px var(--es-glow-line-hover), var(--es-shadow-1);
}

.me-next:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.me-next__text {
    display: grid;
    min-width: 0;
}

.me-next__kicker {
    color: var(--es-muted);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.me-next__name {
    overflow: hidden;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.me-next__when {
    color: var(--es-brand);
    font-size: .8125rem;
    font-weight: 600;
}

@media (min-width: 768px) {
    .me-head {
        gap: 28px;
        padding: 36px 40px 26px;
        border-radius: var(--es-r-band);
    }

    .me-head__avatar {
        width: 112px;
        height: 112px;
        font-size: 2.4rem;
        box-shadow: 0 0 0 6px var(--es-surface), 0 0 0 8px var(--es-brand);
    }

    .me-stat {
        min-width: 110px;
        padding: 14px 20px;
    }

    .me-stat__value {
        font-size: 2.125rem;
    }
}

/* At 390px the three tiles share the row and the next-event card takes it whole. */
@media (max-width: 575.98px) {
    .me-head__stats,
    .me-next {
        flex: 1 1 100%;
    }

    .me-head__stats > li {
        flex: 1 1 0;
    }

    .me-stat {
        min-width: 0;
    }
}

/* ------------------------------------------- "Katılımlarım" (plan job 6.12, design.md §7.7)

   me-Me-B's tickets: the event on the left and the stub behind a dashed tear line with a notch
   bitten out at each end. Lead and small tickets share one padding and one stub width
   (--stub-w), so their tear lines and notches fall on one vertical line (UIhataları 28). The
   lead — the nearest event — is framed in the ember and three columns wide only from 992px; on a
   tablet its stub drops under the event, on a phone everything stacks (UIhataları 29). Covers
   stay 16:9 (decision A-3) at the top of their column. me-Me-C's history: one card of dense rows,
   each opening onto the sessions the door recorded. */

.me-section {
    margin-bottom: var(--es-space-8);
    scroll-margin-top: 96px;
}

.me-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--es-space-2) var(--es-space-4);
    margin-bottom: var(--es-space-4);
}

/* One section-title size on every /me tab (UIhataları 28): the same step as the account and
   profile cards' titles. */
.me-section__title {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h2);
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--es-ink);
}

.me-section__count {
    color: var(--es-muted);
    font-weight: 300;
}

.me-ticket-grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr));
    gap: var(--es-space-5);
    margin-top: var(--es-space-5);
}

.me-ticket {
    --stub-w: 0px;
    position: relative;
    display: grid;
    align-content: start;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    scroll-margin-top: 96px;
}

/* The nearest event, told apart by its frame rather than by its height (UIhataları 29). */
.me-ticket--lead {
    border-color: var(--es-brand-border);
    box-shadow: 0 0 0 3px var(--es-ring), var(--es-shadow-2);
}

.me-ticket__art {
    align-self: start;
    padding: var(--es-card-pad) var(--es-card-pad) 0;
}

.me-ticket__cover {
    border-radius: var(--es-r-lg);
}

.me-ticket__weekday {
    position: absolute;
    left: var(--es-space-3);
    bottom: var(--es-space-3);
    padding: var(--es-space-1) var(--es-space-3);
    border-radius: var(--es-r-pill);
    background: var(--es-photo-chip);
    color: var(--es-on-photo);
    font-size: var(--es-fs-xs);
    font-weight: 600;
}

.me-ticket__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--es-space-2);
    min-width: 0;
    padding: var(--es-card-pad);
}

/* The organizer's name and the badge on one line (UIhataları 29, 32): the badge no longer waits
   in a foot pushed to the card's bottom edge. */
.me-ticket__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-space-1) var(--es-space-3);
    align-self: stretch;
    min-width: 0;
}

.me-ticket__org {
    min-width: 0;
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.me-ticket__title {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h3);
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.me-ticket__title a {
    color: var(--es-ink);
    text-decoration: none;
}

.me-ticket__title a:hover {
    color: var(--es-brand);
}

/* "N gün kaldı" in the ember, "Devam ediyor" green like every "live" mark (K14). */
.me-ticket__countdown {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 var(--es-space-3);
    border-radius: var(--es-r-pill);
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-size: var(--es-fs-xs);
    font-weight: 700;
}

.me-ticket__countdown.is-live {
    background: var(--es-ok-soft);
    color: var(--es-ok-strong);
}

.me-ticket__meta {
    display: flex;
    align-items: flex-start;
    gap: var(--es-space-2);
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
}

.me-ticket__meta svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.me-ticket__zone {
    color: var(--es-faint);
    font-size: var(--es-fs-xs);
}

.me-ticket__address {
    display: block;
    color: var(--es-faint);
    font-size: var(--es-fs-xs);
    overflow-wrap: anywhere;
}

.me-ticket__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-2);
    padding-top: var(--es-space-1);
}

.me-ticket__foot form {
    margin: 0;
}

.me-ticket__foot .btn svg {
    width: 16px;
    height: 16px;
}

/* The stub: below the event on a phone, beside it from 768px (the lead's from 992px). Its
   content sits at the top: a stub stretched beside a taller body must not float its text into
   the middle (UIhataları 32). */
.me-ticket__stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--es-space-2);
    padding: var(--es-card-pad) var(--es-space-4);
    border-top: 2px dashed var(--es-line-strong);
    background: var(--es-raised);
    text-align: center;
}

.me-ticket--lead .me-ticket__stub {
    background: var(--es-brand-soft);
}

.me-ticket__stub-text {
    max-width: 18ch;
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
    font-weight: 600;
}

/* AD-26's queue position, B's big ember figure. */
.me-ticket__position {
    color: var(--es-brand);
    font-family: var(--es-font-display);
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.me-ticket__position + .me-ticket__stub-text {
    color: var(--es-ink);
    font-weight: 700;
}

/* me-Me-C's "Gizle": the summary names what pressing it does, so each state hides the other
   label — display:none takes the hidden one out of what a screen reader announces too. Open, the
   summary moves under the code where C draws it (a browser that cannot lay a <details> out as a
   flex box keeps it on top, which reads the same). */
.me-ticket__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--es-h-btn);
    padding: var(--es-space-1) var(--es-space-3);
    border-radius: var(--es-r-pill);
    color: var(--es-ink);
    font-size: var(--es-fs-sm);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.me-ticket__toggle::-webkit-details-marker {
    display: none;
}

.me-ticket__toggle:hover {
    background: var(--es-wash);
}

.me-ticket__toggle:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.me-ticket__toggle-show,
.me-ticket__toggle-hide {
    display: inline-flex;
    align-items: center;
    gap: var(--es-space-2);
}

.me-ticket__toggle-hide {
    display: none;
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
}

.me-ticket__toggle-hide svg {
    width: 14px;
    height: 14px;
}

.me-ticket__code[open] > .me-ticket__toggle {
    order: 2;
}

.me-ticket__code[open] .me-ticket__toggle-show {
    display: none;
}

.me-ticket__code[open] .me-ticket__toggle-hide {
    display: inline-flex;
}

.me-ticket__code .ticket__qr {
    padding: var(--es-space-1) 0 0;
}

/* The small ticket on a phone: the thumbnail beside the event, the stub across the foot. Its
   title stops at two lines, so a long name never makes one card of a row taller than the
   other (UIhataları 32). */
.me-ticket--small {
    grid-template-columns: 104px minmax(0, 1fr);
}

.me-ticket--small .me-ticket__art {
    padding: var(--es-card-pad) 0 0 var(--es-card-pad);
}

.me-ticket--small .me-ticket__stub {
    grid-column: 1 / -1;
}

.me-ticket--small .me-ticket__cover {
    border-radius: var(--es-r-sm);
}

.me-ticket--small .me-ticket__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.me-ticket--small .date-block {
    top: 5px;
    left: 5px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.me-ticket--small .date-block__day {
    font-size: .9rem;
}

.me-ticket--small .date-block__month {
    font-size: .5rem;
}

/* The lead on a tablet (576–991px): the cover beside the event, the stub across the foot — the
   three columns would leave the event's text a sliver (UIhataları 29, 82). */
@media (min-width: 576px) and (max-width: 991.98px) {
    .me-ticket--lead {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .me-ticket--lead .me-ticket__art {
        padding: var(--es-card-pad) 0 var(--es-card-pad) var(--es-card-pad);
    }

    .me-ticket--lead .me-ticket__stub {
        grid-column: 1 / -1;
    }
}

/* The tear line's notches: one rule for both sizes, placed by --stub-w, so they line up. */
@media (min-width: 768px) {
    .me-ticket--small,
    .me-ticket--lead {
        --stub-w: 220px;
    }

    .me-ticket--small::before,
    .me-ticket--small::after {
        content: "";
        position: absolute;
        right: calc(var(--stub-w) - 12px);
        z-index: 1;
        width: 22px;
        height: 22px;
        border: 1px solid var(--es-glow-line);
        border-radius: 50%;
        background: var(--es-page);
    }

    .me-ticket--small::before {
        top: -12px;
    }

    .me-ticket--small::after {
        bottom: -12px;
    }

    .me-ticket--small {
        grid-template-columns: 128px minmax(0, 1fr) var(--stub-w);
    }

    .me-ticket--small .me-ticket__art {
        padding: var(--es-card-pad) 0 var(--es-card-pad) var(--es-card-pad);
    }

    .me-ticket--small .me-ticket__stub {
        grid-column: auto;
        border-top: 0;
        border-left: 2px dashed var(--es-line-strong);
    }

    /* Open, the small stub drops under the event and takes the card's width: a door code is not
       squeezed into the stub. The card grows on its own — the grid aligns to the start, so its
       neighbour keeps its height (UIhataları 32) — and the notches go with the tear line. */
    .me-ticket--small > .me-ticket__code[open] {
        grid-column: 1 / -1;
        border-top: 2px dashed var(--es-line-strong);
        border-left: 0;
    }

    .me-ticket--small:has(> .me-ticket__code[open])::before,
    .me-ticket--small:has(> .me-ticket__code[open])::after {
        display: none;
    }
}

/* The lead's three columns, only where the event's text still has room (UIhataları 29). */
@media (min-width: 992px) {
    .me-ticket--lead {
        grid-template-columns: 260px minmax(0, 1fr) var(--stub-w);
    }

    .me-ticket--lead::before,
    .me-ticket--lead::after {
        content: "";
        position: absolute;
        right: calc(var(--stub-w) - 12px);
        z-index: 1;
        width: 22px;
        height: 22px;
        border: 1px solid var(--es-brand-border);
        border-radius: 50%;
        background: var(--es-page);
    }

    .me-ticket--lead::before {
        top: -12px;
    }

    .me-ticket--lead::after {
        bottom: -12px;
    }

    .me-ticket--lead .me-ticket__art {
        padding: var(--es-card-pad) 0 var(--es-card-pad) var(--es-card-pad);
    }

    .me-ticket--lead .me-ticket__stub {
        border-top: 0;
        border-left: 2px dashed var(--es-line-strong);
    }

    .me-ticket--lead .me-ticket__title {
        font-size: var(--es-fs-h2);
    }

    /* 220px of stub: the frame and the code sized to fit it. */
    .me-ticket--lead .ticket__qr-frame {
        padding: var(--es-space-2);
    }

    .me-ticket--lead .ticket__qr img {
        width: 160px;
    }
}

/* The history: one card of rows (me-Me-C). */
.me-past {
    overflow: hidden;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.me-past__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.me-past__item {
    scroll-margin-top: 96px;
}

.me-past__item + .me-past__item {
    border-top: 1px solid var(--es-line);
}

.me-past__row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 12px 16px;
    padding: 14px 16px;
}

.me-past__thumb {
    width: 96px;
    border-radius: var(--es-r-sm);
}

/* A ticket that never became a visit — withdrawn, refused, called off — steps back like an
   ended show-card's cover. */
.me-past__thumb.is-faded img,
.me-past__thumb.is-faded.is-fallback {
    filter: grayscale(1);
    opacity: .55;
}

.me-past__date {
    display: none;
}

.me-past__main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.me-past__title {
    color: var(--es-ink);
    font-weight: 650;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.me-past__title:hover {
    color: var(--es-brand);
}

.me-past__sub {
    color: var(--es-muted);
    font-size: .8125rem;
}

.me-past__note {
    color: var(--es-faint);
    font-size: .75rem;
}

.me-past__side {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.me-past__sessions {
    margin: 0 16px 14px;
}

.me-past__session-list {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: 8px;
    margin: 0;
    padding: .75rem 0 0;
    list-style: none;
}

.me-session {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border-radius: var(--es-r);
    background: var(--es-fill);
}

.me-session__when {
    color: var(--es-brand);
    font-size: .75rem;
    font-weight: 700;
}

.me-session__name {
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 650;
}

.me-session__room {
    color: var(--es-muted);
    font-size: .75rem;
}

.me-past__more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 14px 20px;
    border-top: 1px solid var(--es-line);
}

.me-past__shown {
    color: var(--es-muted);
    font-size: .8125rem;
}

@media (min-width: 768px) {
    .me-past__row {
        grid-template-columns: 96px 112px minmax(0, 1fr) auto;
        gap: 20px;
        padding: 14px 20px;
    }

    .me-past__date {
        display: grid;
        gap: 2px;
    }

    .me-past__date time {
        color: var(--es-ink);
        font-size: .875rem;
        font-weight: 650;
        font-variant-numeric: tabular-nums;
    }

    .me-past__day {
        color: var(--es-faint);
        font-size: .72rem;
    }

    .me-past__date-inline {
        display: none;
    }

    .me-past__side {
        grid-column: auto;
        justify-content: flex-end;
    }

    .me-past__sessions {
        margin: 0 20px 16px;
    }
}

/* A ticket's buttons are tap targets before they are buttons (§5.3). */
@media (pointer: coarse) {
    .me-ticket .btn,
    .me-past .btn {
        min-height: 44px;
    }
}

/* The code itself, centred in a filled frame (popups-Disclosures-B). The image is always on
   white and always padded: a QR needs its quiet zone, and a scanner reading one off the dark
   theme's near-black would find no edge to lock onto. */
.ticket__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 4px .5rem;
    text-align: center;
}

.ticket__qr-frame {
    padding: 16px;
    border-radius: var(--es-r-xl);
    background: var(--es-fill);
}

.ticket__qr img {
    display: block;
    width: min(280px, 64vw);
    height: auto;
    background: var(--es-paper);
    padding: 12px;
    border-radius: var(--es-r-lg);
}

.ticket__qr-note {
    margin: 1rem 0 0;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25;
}

/* C's hint, the one thing a person at the door can do to help the scanner. */
.ticket__qr-hint {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .75rem 0 0;
    padding: .35rem .85rem;
    border-radius: var(--es-r);
    background: var(--es-fill);
    color: var(--es-muted);
    font-size: .8125rem;
    font-weight: 600;
}

.ticket__qr-hint svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--es-brand);
}

.ticket__qr-fine {
    margin: .5rem 0 0;
    color: var(--es-muted);
    font-size: .82rem;
}

/* ------------------------------------------- "Hesap" (plan job 6.14, design.md §9.3)

   me-Account-B's cards under the shared /me header, with me-Account-C's contents column
   (_PageToc) on the left from lg. One card per row at every width (UIhataları 39: two side by
   side left the contents tracker unable to tell which was read): the name, the password, the
   public profile on the ember band with its card on the surface, the organizations' logos as one
   link; then a divider (UIhataları 41) and the sessions and data tiles and the erasure band in
   the error wash. The
   card pieces (.acct-card, .acct-pair, .acct-form) are shared with "Profilim" below. */

.acct {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 3rem;
}

/* minmax(0, 1fr): below lg the contents are one row that scrolls sideways, and an auto track
   would grow to the whole row's width and push the page past the phone's edge. */
.acct__aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 14px;
    min-width: 0;
}

.acct__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--es-space-5);
    min-width: 0;
}

/* The section a contents link jumps to clears the sticky site header and, below lg, the sticky
   contents row under it. */
.acct__grid > section {
    scroll-margin-top: 150px;
}

/* UIhataları 41: the sessions, the data and the erasure stand apart, under a plain rule. A direct
   child of the grid, so the gap spaces it; Bootstrap's hr margin and .25 opacity are undone. */
.acct__divider {
    margin: var(--es-space-2) 0;
    border: 0;
    border-top: 1px solid var(--es-line-strong);
    opacity: 1;
}

.acct-card {
    display: grid;
    align-content: start;
    gap: 20px;
    min-width: 0;
    padding: var(--es-space-5);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.acct-card__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.acct-card__head > .icbox {
    flex: none;
}

.acct-card__title {
    margin: 0;
    padding-top: .45rem;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h2);
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--es-ink);
}

.acct-card > .acct-card__title {
    padding-top: 0;
}

.acct-card__sub {
    margin: .35rem 0 0;
    color: var(--es-muted);
    font-size: .875rem;
}

.acct-form {
    display: grid;
    gap: 1.1rem;
}

.acct-form .form-label {
    font-weight: 600;
}

.acct-form .form-text,
.acct-form .text-danger:empty {
    margin-top: .35rem;
}

/* Two fields side by side from a small phone up (C's formgrid); --wrap lets four fields flow
   into two rows. */
.acct-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1.1rem .9rem;
}

/* The four links of "Profilim": two by two rather than three and a straggler. */
.acct-pair--wrap {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* A card is a whole row now (UIhataları 39), so the name and password forms keep a readable
   measure instead of fields a metre wide; "Profilim" shares .acct-form and keeps its own grid. */
.acct__grid .acct-form {
    max-width: 42rem;
}

/* ---- "Giriş yöntemleri" (AD-39, DD-43): one row per channel — the value and its pill, then the
   "Doğrula" / "Değiştir" actions or the open code form. Rows are divided like a list in a card. */
.acct-channels {
    display: grid;
}

.acct-channel {
    display: grid;
    gap: .75rem;
    padding: 1rem 0;
    border-top: 1px solid var(--es-line);
}

.acct-channel:first-child {
    padding-top: 0;
    border-top: 0;
}

.acct-channel__row {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.acct-channel__text {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.acct-channel__label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--es-muted);
}

.acct-channel__value {
    overflow-wrap: anywhere;
    color: var(--es-ink);
}

.acct-channel__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.acct-channel__actions:empty {
    display: none;
}

.acct-channel__change > summary {
    list-style: none;
}

.acct-channel__change > summary::-webkit-details-marker {
    display: none;
}

.acct-channel__change[open] > summary {
    margin-bottom: .75rem;
}

.acct-channel__form {
    display: grid;
    gap: .5rem;
    padding: 14px 16px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.acct-channel__form .form-label,
.acct-channel__form .form-text {
    margin: 0;
}

.acct-channel__inline {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.acct-channel__inline > .form-control {
    flex: 1 1 12rem;
    min-width: 0;
}

/* ---- the public profile, on the ember (the footer's call band tokens, DD-26) */

.acct-profile {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 16px;
    min-width: 0;
    padding: var(--es-space-6) var(--es-space-5);
    border-radius: var(--es-r-xl);
    background-color: var(--es-cta-from);
    background-image: radial-gradient(circle at 88% 0%, var(--es-cta-shine), transparent 55%),
        linear-gradient(135deg, var(--es-cta-from), var(--es-cta-to));
    box-shadow: 0 24px 50px -32px var(--es-cta-glow);
    color: var(--es-on-ember);
}

.acct-profile__spark {
    position: absolute;
    top: -34px;
    right: -26px;
    line-height: 0;
    color: var(--es-on-ember-faint);
    pointer-events: none;
}

.acct-profile__spark svg {
    width: 150px;
    height: 150px;
}

.acct-profile__title {
    position: relative;
    margin: 0;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h2);
    font-weight: 750;
    letter-spacing: -.03em;
    color: var(--es-on-ember);
}

.acct-profile__lead {
    position: relative;
    margin: 0;
    color: var(--es-on-ember-soft);
    font-size: .9rem;
}

/* The page as a stranger finds it, a card on the surface. Flat: no box is ever tilted (UIhataları 40).
   At full width it keeps a card's size rather than stretching across the band. */
.acct-profile__card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: min(100%, 32rem);
    padding: 12px 14px;
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    color: var(--es-ink);
    box-shadow: 0 24px 40px -18px var(--es-photo-shadow);
}

.acct-profile__avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-family: var(--es-font-display);
    font-weight: 700;
}

.acct-profile__who {
    display: grid;
    flex: 1 1 10rem;
    min-width: 0;
}

.acct-profile__name {
    font-family: var(--es-font-display);
    font-weight: 700;
    letter-spacing: -.02em;
}

.acct-profile__url {
    color: var(--es-muted);
    font-size: .75rem;
    overflow-wrap: anywhere;
}

.btn.acct-profile__button {
    --bs-btn-color: var(--es-on-ember-ink);
    --bs-btn-bg: var(--es-on-ember);
    --bs-btn-border-color: var(--es-on-ember);
    --bs-btn-hover-color: var(--es-on-ember-ink);
    --bs-btn-hover-bg: var(--es-on-ember-hover);
    --bs-btn-hover-border-color: var(--es-on-ember-hover);
    --bs-btn-active-color: var(--es-on-ember-ink);
    --bs-btn-active-bg: var(--es-on-ember-soft);
    --bs-btn-active-border-color: var(--es-on-ember-soft);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.btn.acct-profile__button svg {
    width: 18px;
    height: 18px;
}

/* The ember outline of the focus ring would vanish on the ember band. */
.btn.acct-profile__button:focus-visible {
    outline-color: var(--es-on-ember);
    outline-offset: 3px;
}

/* ---- sessions and data: me-Account-B's two filled tiles */

.acct-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 14px;
}

.acct-tile {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 12px;
    padding: 20px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.acct-tile > .icbox {
    background: var(--es-surface);
    color: var(--es-ink);
}

.acct-tile__text {
    margin: 0;
    color: var(--es-muted);
    font-size: .8125rem;
}

.acct-tile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.acct-tile__actions form {
    margin: 0;
}

/* ---- the organizations: one link, the logos overlapping as drawn */

.acct-orgs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    padding: 22px 24px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    color: var(--es-body);
    text-decoration: none;
}

.acct-orgs:hover {
    color: var(--es-body);
    border-color: var(--es-glow-line-hover);
}

.acct-orgs:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.acct-orgs__marks {
    display: flex;
    flex: none;
}

.acct-orgs__mark {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    box-shadow: 0 0 0 3px var(--es-surface);
    font-family: var(--es-font-display);
    font-size: .95rem;
    font-weight: 700;
}

.acct-orgs__mark + .acct-orgs__mark {
    margin-left: -12px;
}

/* A logo is never cropped (ImageFieldShape.Logo): fitted on the paper, whatever its shape. */
.acct-orgs__mark--logo {
    background: var(--es-paper);
}

.acct-orgs__mark--logo img {
    width: 100%;
    height: 100%;
    padding: 6px;
    object-fit: contain;
}

.acct-orgs__mark--more {
    background: var(--es-fill-2);
    color: var(--es-muted);
    font-family: inherit;
    font-size: .8125rem;
}

.acct-orgs__text {
    display: grid;
    flex: 1 1 15rem;
    gap: 2px;
    min-width: 0;
}

.acct-orgs__title {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h2);
    font-weight: 750;
    letter-spacing: -.03em;
    color: var(--es-ink);
}

.acct-orgs__lead {
    color: var(--es-muted);
    font-size: .875rem;
}

.acct-orgs__go {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: 0 1.1rem;
    border-radius: var(--es-r-pill);
    background: var(--es-fill-2);
    color: var(--es-ink);
    font-size: .9rem;
    font-weight: 600;
}

.acct-orgs__go svg {
    width: 16px;
    height: 16px;
}

/* ---- erasure (AD-33): me-Account-B's band in the error wash. The dialog and the password are
   what guard the button, not how loud it is, so the button is the soft danger one. */

.acct-danger {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 20px;
    padding: 24px 22px;
    border: 1px solid var(--es-bad-box-line);
    border-radius: var(--es-r-xl);
    background: var(--es-bad-box);
}

.acct-danger__icon {
    flex: none;
    background: var(--es-surface);
    color: var(--es-bad);
}

.acct-danger__body {
    display: grid;
    flex: 1 1 18rem;
    justify-items: start;
    gap: 12px;
    min-width: 0;
}

.acct-danger__title {
    margin: 0;
    padding-top: .45rem;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h2);
    font-weight: 750;
    letter-spacing: -.03em;
    color: var(--es-shell-alarm-text);
}

.acct-danger__text {
    max-width: 44rem;
    margin: 0;
    color: var(--es-ink);
    font-size: .9rem;
}

.acct-danger__form {
    display: grid;
    gap: 1rem;
    width: min(100%, 28rem);
}

/* On the wash the soft button's own wash would vanish; it stands on the surface instead. */
.acct-danger .btn-danger {
    --bs-btn-bg: var(--es-surface);
    --bs-btn-disabled-bg: var(--es-surface);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.acct-danger .btn svg {
    width: 16px;
    height: 16px;
}

@media (min-width: 768px) {
    .acct-card,
    .acct-profile {
        padding: var(--es-space-6);
    }

    .acct-danger {
        padding: var(--es-space-6);
    }
}

/* C's contents column beside the cards, with C's sentence under it. */
@media (min-width: 992px) {
    .acct {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        align-items: start;
        gap: 24px;
    }

    .acct__aside {
        position: sticky;
        top: calc(var(--es-bar-h) + 1.5rem);
    }

    .acct__aside .page-toc {
        position: static;
    }

    .acct__grid > section {
        scroll-margin-top: 96px;
    }
}


@media (pointer: coarse) {
    .acct-tile .btn,
    .acct-danger .btn {
        min-height: 44px;
    }
}

/* ------------------------------------------- "Profilim" (plan job 6.15, design.md §9.3)

   me-Profile-B: the details form with the photo row first, the address card and the visibility
   rows on the left; the live preview of the public page's head in the phone on the right, sticky
   from lg (_PhoneFrame, plan job 4.5). Each visibility row's switch is a submit button with
   role="switch" — the act itself, which posts with script off. */

.prof-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 20px;
}

.prof-bar__lead {
    margin: 0;
    color: var(--es-muted);
    font-size: 1rem;
}

.prof {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 3rem;
}

.prof__main {
    display: grid;
    gap: 20px;
    min-width: 0;
}

/* The photo row: the shared image field on me-Profile-B's filled band. */
.prof-photo {
    padding: 18px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.prof-photo .image-field__item,
.prof-photo .image-field__drop {
    background: var(--es-surface);
}

/* The public address, read as it will be: the host muted, the part they chose in the ember. */
.prof-address {
    justify-self: start;
    max-width: 100%;
    margin: 0;
    padding: 10px 18px;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-muted);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.prof-address strong {
    color: var(--es-brand-strong);
    font-weight: 700;
}

.vis-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vis-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 14px 16px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.vis-row__text {
    display: grid;
    flex: 1 1 14rem;
    gap: 2px;
    min-width: 0;
}

.vis-row__name {
    color: var(--es-ink);
    font-weight: 700;
}

.vis-row__hint {
    color: var(--es-muted);
    font-size: .8125rem;
}

.vis-row .pill {
    background: var(--es-surface);
}

.vis-row form {
    display: flex;
    margin: 0;
}

.vis-note {
    margin: 0;
    padding: 0 6px;
    color: var(--es-muted);
    font-size: .8125rem;
}

/* ---- the preview's screen: the public page's head (Profiles/Show), a phone's size */

.prof-preview__cover {
    height: 92px;
    background: radial-gradient(circle at 80% 0%, var(--es-cta-shine), transparent 60%),
        linear-gradient(135deg, var(--es-cta-from), var(--es-cta-to));
}

.prof-preview__body {
    position: relative;
    display: grid;
    justify-items: start;
    gap: .55rem;
    margin-top: -34px;
    padding: 0 1rem 1rem;
}

.prof-preview__avatar {
    display: inline-grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    box-shadow: 0 0 0 4px var(--es-page);
    font-family: var(--es-font-display);
    font-size: 1.35rem;
    font-weight: 700;
}

.phone-frame__screen .prof-preview__name {
    font-size: 1.3rem;
    letter-spacing: -.03em;
}

.prof-preview__headline {
    margin: 0;
    color: var(--es-muted);
    font-weight: 600;
}

.prof-preview__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.prof-preview__chips .pill {
    font-size: .7rem;
}

.prof-preview__chips svg {
    width: 12px;
    height: 12px;
}

.prof-preview__bio {
    margin: 0;
    color: var(--es-body);
}

/* A section the visitor will not see, said where it would have been (me-Profile-B's dashed row). */
.prof-preview__hidden {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 2px dashed var(--es-line-strong);
    border-radius: var(--es-r-lg);
    color: var(--es-muted);
    font-size: .72rem;
    font-weight: 600;
}

.prof-preview__hidden svg {
    flex: none;
    width: 14px;
    height: 14px;
}

@media (min-width: 992px) {
    .prof {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: start;
    }
}

/* The track stays 44 × 26 as drawn; on a touch screen an invisible edge makes the target 44px
   tall (§5.3). A button may carry a pseudo-element, which the checkbox switch cannot. */
@media (pointer: coarse) {
    .vis-row .switch {
        position: relative;
    }

    .vis-row .switch::after {
        content: "";
        position: absolute;
        inset: -9px -4px;
    }
}

/* ------------------------------------------- review fixes on the rebuilt shell
   Raised by the mobile, contrast and consistency passes over the rebuild. Each rule names the
   defect it closes so a later reader can tell it from a preference. */

/* A full-bleed cover pulls itself up with a negative margin and, being positioned, painted over
   the bottom of the flash message above it — which is exactly the message somebody arriving from
   a sign-in loop needs to read. */
.discover-main > .flash-slot > .flash {
    position: relative;
    z-index: 2;
}

/* 100vh is the *large* viewport on iOS Safari, so every account screen was about 90px taller
   than the visible area and scrolled with nothing to scroll to. svh is the visible one. */
@supports (height: 100svh) {
    .auth-split {
        min-height: 100svh;
    }

    @media (min-width: 992px) {
        .auth-art {
            min-height: calc(100svh - 32px);
        }
    }
}

/* An inline <code> long enough to overflow was merely clipped, because body clips the x axis to
   make a full-bleed cover safe. */
:not(pre) > code {
    overflow-wrap: anywhere;
}

/* ------------------------------------------- Bootstrap's own painted pieces, in both themes
   These paint themselves from Bootstrap's variables, several of which (the -rgb triplets, the
   close glyph) cannot follow a two-valued token (DD-5 as amended), so these rules name the
   tokens directly and hold for every page in both themes. */
.dropdown-menu,
.modal-content,
.list-group-item,
.accordion-item,
.accordion-button {
    background: var(--es-surface);
    border-color: var(--es-line);
    color: var(--es-body);
}

/* A menu and a dialog float over the page: the glow edge (plan job 2.3). A list-group item or an
   accordion row is a divider inside something, and stays neutral. */
.dropdown-menu,
.modal-content {
    border-color: var(--es-glow-line);
    box-shadow: var(--es-menu-shadow);
}

.dropdown-item {
    color: var(--es-body);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--es-fill);
    color: var(--es-ink);
}

.dropdown-divider,
hr {
    border-color: var(--es-line);
    opacity: 1;
}

/* .table-hover's own hover is a translucent black, invisible on ink. */
.table-hover > tbody > tr:hover > * {
    background-color: var(--es-wash);
    color: var(--es-ink);
}

/* Bootstrap's close glyph is drawn with a fixed colour baked into a data URI, which no token can
   reach. It is redrawn as a mask over currentColor, so it takes the ink of whichever theme it is
   in, on a pseudo-element so the mask cannot clip the button's own focus ring. (The navbar
   toggler had the same fix; the top bar of job 3.1 has no toggler.) */
.btn-close {
    --bs-btn-close-color: var(--es-ink);
    position: relative;
    background-image: none;
}

.btn-close::before {
    content: "";
    position: absolute;
    inset: .25em;
    background-color: currentColor;
    -webkit-mask: var(--bs-btn-close-bg) center / 1em auto no-repeat;
    mask: var(--bs-btn-close-bg) center / 1em auto no-repeat;
}

/* The open list of every select is painted by the system from the option's own colours, which
   nothing set: under the dark theme a select's light text came out on the system's white list
   (UIhataları 38). Each option and group takes the surface and the ink of the current theme. */
select option,
select optgroup {
    background-color: var(--es-surface);
    color: var(--es-ink);
}

/* The select chevron is a #343a40 stroke baked into Bootstrap's data URI, near-invisible on ink.
   One mid-tone stroke reads on both grounds (#8f827a: 3.6:1 on white, 5:1 on --es-page dark). */
.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238f827a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* The switch knob is the same kind of baked data URI: a 25% black dot, invisible on ink, and a
   Bootstrap-blue one under focus. The same mid-tone reads on both grounds; checked stays white
   on the ember fill. */
.form-switch .form-check-input,
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238f827a'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* ------------------------------------------- theme picker (plan job 2.4, _ThemePicker)
   Sistem / Açık / Koyu. The choice lives in es_theme and is rendered as data-theme on <html>
   (ThemeCookie); these rules only draw the control. Two shapes: a round icon button that opens
   a small menu (<details>, so it opens without script), and a segmented pill of three. */
.theme-menu {
    position: relative;
    flex: 0 0 auto;
}

.theme-menu__button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--es-r-pill);
    border: 1px solid var(--es-line-strong);
    background: transparent;
    color: var(--es-ink);
    cursor: pointer;
    list-style: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.theme-menu__button::-webkit-details-marker {
    display: none;
}

.theme-menu__button:hover,
.theme-menu[open] > .theme-menu__button {
    background: var(--es-wash);
    border-color: var(--es-glow-line-hover);
}

.theme-menu__button:focus-visible {
    border-radius: var(--es-r-pill);
}

/* The button shows the current choice: a monitor for Sistem, a sun, a moon. site.js keeps
   data-theme-choice current when the choice changes in place. */
.theme-menu__icon {
    display: none;
    line-height: 0;
}

.theme-menu__icon svg {
    width: 20px;
    height: 20px;
}

.theme-menu[data-theme-choice="system"] .theme-menu__icon--system,
.theme-menu[data-theme-choice="light"] .theme-menu__icon--light,
.theme-menu[data-theme-choice="dark"] .theme-menu__icon--dark {
    display: block;
}

.theme-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1060;
    display: grid;
    gap: 2px;
    min-width: 11rem;
    margin: 0;
    padding: 6px;
    border-radius: var(--es-r-lg);
    border: 1px solid var(--es-glow-line);
    background: var(--es-surface);
    color: var(--es-body);
    box-shadow: var(--es-menu-shadow);
}

.theme-menu__option {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    min-height: 44px;
    padding: 0 .75rem;
    border: 0;
    border-radius: var(--es-r);
    background: transparent;
    color: var(--es-body);
    font: inherit;
    font-size: .92rem;
    font-weight: 550;
    text-align: left;
    cursor: pointer;
}

.theme-menu__option svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.theme-menu__option:hover {
    background: var(--es-fill);
    color: var(--es-ink);
}

.theme-menu__option[aria-pressed="true"] {
    background: var(--es-brand-soft);
    color: var(--es-ink);
}

.theme-menu__label {
    flex: 1 1 auto;
}

.theme-menu__tick {
    visibility: hidden;
    line-height: 0;
    color: var(--es-brand-strong);
}

.theme-menu__option[aria-pressed="true"] .theme-menu__tick {
    visibility: visible;
}

/* The account screens have no top bar (plan §8 B-6): the same menu, smaller,
   floating in the corner on a glass disc so it reads over the page or a cover. */
.theme-menu--corner {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
}

.theme-menu--corner > .theme-menu__button {
    width: 40px;
    height: 40px;
    background: var(--es-glass);
    backdrop-filter: blur(10px);
}

@media (pointer: coarse) {
    .theme-menu--corner > .theme-menu__button {
        width: 44px;
        height: 44px;
    }
}

/* The segmented shape (the kit's .seg, under its own name). */
.theme-seg {
    display: inline-flex;
    gap: 2px;
    margin: 0;
    padding: 4px;
    border-radius: var(--es-r-pill);
    background: var(--es-fill-2);
}

.theme-seg__option {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 36px;
    padding: 0 .9rem;
    border: 0;
    border-radius: var(--es-r-pill);
    background: transparent;
    color: var(--es-muted);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.theme-seg__option svg {
    width: 16px;
    height: 16px;
}

.theme-seg__option:hover {
    color: var(--es-ink);
}

.theme-seg__option[aria-pressed="true"] {
    background: var(--es-surface);
    color: var(--es-ink);
    box-shadow: var(--es-shadow-1), inset 0 0 0 1px var(--es-line);
}

.theme-seg__option:focus-visible {
    border-radius: var(--es-r-pill);
}

@media (pointer: coarse) {
    .theme-seg__option {
        min-height: 44px;
    }
}

/* ------------------------------------------- sponsor tiers on the event form (AD-18)
   The tier is chosen beside the sponsor while it is being ticked, because "üç tane elmas, iki
   tane altın" is one decision and was previously two screens. */
.ev-pick__cell {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.ev-pick__tier {
    display: grid;
    gap: .2rem;
    padding-left: .2rem;
}

.ev-pick__tier-label {
    font-size: .72rem;
    color: var(--es-muted);

    /* The name is already on the tile above; this label exists for a screen reader, which needs
       to hear which sponsor the select belongs to. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The tile was one cell of the grid and is now the top half of one. */
.ev-pick__cell .ev-pick__tile {
    height: 100%;
}

/* The bug in the owner's screenshot: .pill is white-space: nowrap, and "Organizasyon sponsoru" is
   wider than a 15rem tile once the checkbox and the logo have taken their share, so it ran past
   the tile's own border. The chip wraps here rather than overflowing, and the track is wide
   enough that it rarely has to. */
.ev-pick__text .pill {
    max-width: 100%;
    white-space: normal;
    text-align: left;
}

/* ---------------------------------------------- search, categories, city (DD-9, DD-13, AD-25) */

/* Category chips (AD-25): a row of links, the chosen one filled with the accent the way an
   active tab is. Wraps on a phone rather than scrolling, because a dozen words in two rows is
   still one control when none of them is a tab. B's chip (plan job 2.5): a borderless soft
   capsule, bold label; the edge only appears under the pointer. */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: 1.25rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 38px;
    padding: .3rem 1rem;
    border-radius: var(--es-r-pill);
    border: 1px solid transparent;
    background: var(--es-fill);
    color: var(--es-body);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.chip:hover {
    color: var(--es-ink);
    border-color: var(--es-brand-border);
    background: var(--es-fill-2);
}

.chip.is-active {
    background: var(--es-brand);
    border-color: var(--es-brand);
    color: var(--es-brand-ink);
}

@media (pointer: coarse) {
    .chip {
        min-height: 44px;
    }
}

/* A chip that starts with its category's picture (plan job 4.15): the circle sits as far from
   the chip's left edge as from its top, so the pair reads as one rounded thing. */
.chip > .cat-art--chip {
    margin-left: -.6rem;
}

/* ------------------------------------------------- category art (plan job 4.15, B-2, B-33)

   A category's picture, drawn on the server from its id by Infrastructure/CategoryArt.cs and
   written by Views/Shared/_CategoryArt.cshtml: one of eight shape families in one of seven
   tones. The SVG carries shapes and classes only — .ca-bg for the ground, .ca-f1/2/3 filled
   and .ca-s1/2/3 stroked with the tone's first, second and soft colour — and the tone class on
   the wrapper says what those colours are, so no colour ever sits in the markup.

     .cat-art                  the wrapper; the svg fills it and crops rather than stretches.
       --chip                  22px circle at the start of a .chip (the search page).
       --icon                  44px circle where a card would show an icon (admin catalogue).
       --preview               a large rounded square, up to 168px (the admin form).
       --tile                  fills its positioned parent edge to edge, no edge of its own; the
                               home page's category tiles (job 5.1) put a scrim and the text over
                               it and clip its corners.
       --pending               the placeholder of a category not yet saved (no id, no picture).
       --t0 … --t6             the tone: Gece, Kor, Krem, Kum, Köz, Duman, Alev.

   The pictures are theme-independent like covers (plan §2.2); the hairline edge is the glow
   line (DD-24), neutral on paper and ember on ink, so a light tile still has an edge on white and
   a dark one on ink. Nothing here moves. */
.cat-art {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    overflow: hidden;
    line-height: 0;
    vertical-align: middle;
    background: var(--ca-bg);
    /* Above the picture rather than under it: an inset shadow would be painted over by the svg. */
    outline: 1px solid var(--es-glow-line);
    outline-offset: -1px;
}

.cat-art > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cat-art--chip {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.cat-art--icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.cat-art--preview {
    width: 100%;
    max-width: 168px;
    aspect-ratio: 1;
    border-radius: var(--es-r-lg);
}

.cat-art--tile {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    outline: 0;
}

.cat-art .ca-bg { fill: var(--ca-bg); }
.cat-art .ca-f1 { fill: var(--ca-1); }
.cat-art .ca-f2 { fill: var(--ca-2); }
.cat-art .ca-f3 { fill: var(--ca-3); }
.cat-art .ca-s1 { fill: none; stroke: var(--ca-1); }
.cat-art .ca-s2 { fill: none; stroke: var(--ca-2); }
.cat-art .ca-s3 { fill: none; stroke: var(--ca-3); }

/* Gece: ink, flame, paper. */
.cat-art--t0 {
    --ca-bg: var(--es-cat-ink);
    --ca-1: var(--es-cat-flame);
    --ca-2: var(--es-cat-paper);
    --ca-3: color-mix(in srgb, var(--es-cat-flame) 34%, transparent);
}

/* Kor: ember, ink, peach. */
.cat-art--t1 {
    --ca-bg: var(--es-cat-ember);
    --ca-1: var(--es-cat-ink);
    --ca-2: var(--es-cat-peach);
    --ca-3: color-mix(in srgb, var(--es-cat-ink) 30%, transparent);
}

/* Krem: cream, ember, ink. */
.cat-art--t2 {
    --ca-bg: var(--es-cat-cream);
    --ca-1: var(--es-cat-ember);
    --ca-2: var(--es-cat-ink);
    --ca-3: color-mix(in srgb, var(--es-cat-ember) 30%, transparent);
}

/* Kum: sand, ink, ember. */
.cat-art--t3 {
    --ca-bg: var(--es-cat-sand);
    --ca-1: var(--es-cat-ink);
    --ca-2: var(--es-cat-ember);
    --ca-3: color-mix(in srgb, var(--es-cat-ink) 20%, transparent);
}

/* Köz: coal, glow, blush. */
.cat-art--t4 {
    --ca-bg: var(--es-cat-coal);
    --ca-1: var(--es-cat-glow);
    --ca-2: var(--es-cat-blush);
    --ca-3: color-mix(in srgb, var(--es-cat-blush) 28%, transparent);
}

/* Duman: smoke, paper, flame. */
.cat-art--t5 {
    --ca-bg: var(--es-cat-smoke);
    --ca-1: var(--es-cat-paper);
    --ca-2: var(--es-cat-flame);
    --ca-3: color-mix(in srgb, var(--es-cat-paper) 22%, transparent);
}

/* Alev: flame, ink, blush. */
.cat-art--t6 {
    --ca-bg: var(--es-cat-flame);
    --ca-1: var(--es-cat-ink);
    --ca-2: var(--es-cat-blush);
    --ca-3: color-mix(in srgb, var(--es-cat-ink) 26%, transparent);
}

/* The category as a card's kicker (AD-25): small caps in the accent above the title. Not a
   status, so not a .pill — DD-16 keeps the dot chip for how a thing is going. */
.show-card__kicker {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--es-brand);
}

/* One quiet sentence under a shelf head that has nothing to scroll yet. */
.shelf__note {
    margin: 0;
    color: var(--es-muted);
    font-size: .9rem;
}

/* "Yakınınızda"'s city chips (UIhataları 10): "Tümü" and the busiest cities as one row of submit
   buttons under the shelf head. The row scrolls sideways when it is wider than the shelf
   ([data-scroll-row] fades the edge that continues and brings the chosen city into view); the
   chosen one is the filled .chip.is-active. A <button> takes the chip's look as a link does. */
.city-chips {
    margin: 0 0 var(--es-space-4);
}

.city-chips__row {
    display: flex;
    gap: var(--es-space-2);
    overflow-x: auto;
    padding-block: 2px;
    scrollbar-width: none;
}

.city-chips__row::-webkit-scrollbar {
    display: none;
}

.city-chips__row .chip {
    flex: none;
    cursor: pointer;
    font-family: inherit;
}

/* "Etkinlikler | Topluluklar" (K1) in a page head's actions slot: the head already spaces it. */
.tabs.discover-tabs {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .shelf__title-group {
        flex-wrap: wrap;
        gap: .5rem .9rem;
    }
}

/* === Public: engagement, inbox, certificate, account (AD-29..AD-33) === */

/*
    The participant's half of AD-26..AD-33 on the discovery shell: the rating forms, the public
    certificate check, the inbox and its bell, and the account's danger card. (The event page's own
    parts — the registration bar, the certificate and announcement cards, the agenda and the star —
    are in its section, plan job 5.6.) Built only from the shell tokens above; status is a dot or an edge,
    never a filled field (DD-16).
*/

/* ---- ratings (AD-31) */

.feedback-form {
    display: grid;
    justify-items: start;
    gap: .75rem;
    min-width: 0;
}

.feedback-form .form-control {
    width: 100%;
    max-width: 40rem;
}

.feedback-form__label {
    font-weight: 650;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.feedback-form--session {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--es-line);
}

/* C's line on who reads a comment (AD-31), under the question it belongs to. */
.feedback-form__hint {
    margin: 0;
    color: var(--es-muted);
    font-size: .85rem;
}

/*
    Five stars from radios, no script. The markup runs 5 → 1 and the row is reversed, so the
    lowest star sits on the left and "this one and every one before it" is the general sibling
    combinator: a checked or hovered label lights itself and the labels after it in the markup,
    which are the ones to its left on screen. The radios stay in the tab order (hidden, not
    removed), so the arrow keys still choose a rating.
*/
.rating {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.rating input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rating label {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--es-r-sm);
    color: var(--es-edge);
    cursor: pointer;
    transition: color .12s ease;
}

.rating label svg {
    width: 28px;
    height: 28px;
}

.rating input:checked ~ label {
    color: var(--es-brand);
}

.rating:hover input:checked ~ label {
    color: var(--es-edge);
}

.rating:hover label:hover,
.rating:hover label:hover ~ label {
    color: var(--es-brand);
}

.rating input:focus-visible + label {
    outline: 2px solid var(--es-brand);
    outline-offset: 1px;
}

.rating--small label {
    width: 36px;
    height: 36px;
}

.rating--small label svg {
    width: 20px;
    height: 20px;
}

/* ---- the public certificate check (AD-31; plan job 5.7, design site2-Cert-B + site2-Cert-C)

    /sertifika and /sertifika/{code} (Views/Certificates/Index.cshtml). Most of it is shared: the
    search band's pill field (.home-search__*, job 5.1) carries the code, .icbox the badges, the
    page message's warning box (.flash--warning, job 4.2) the unknown code, .pitch-qr the paper's
    drawn code. What is here is only what this page has:

      .cert-hero     B's soft panel, centred: the shield badge, the two-tone title, one sentence,
                     the code field and where the code is printed; two sparks and an upright paper
                     certificate on a wide screen (decoration). --lifted leaves room under it for
                     the verdict, which overlaps its lower edge as in B.
      .cert-outcome  that overlap, for the verdict and for the warning alike.
      .cert-result   B's verdict card: the green check panel with C's EventStage seal (.cert-seal),
                     the facts as B's info boxes (.cert-facts), and C's address line.

    The paper certificate is paper in both themes, as print is (--es-paper, --es-cat-*). Nothing
    here moves, so the reduced-motion block has nothing to add. */
.cert-hero {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    margin: .5rem 0 3rem;
    padding: 4.5rem 2rem 3.5rem;
    overflow: hidden;
    border-radius: var(--es-r-band);
    background: var(--es-fill);
    text-align: center;
}

.cert-hero--lifted {
    margin-bottom: 0;
    padding-bottom: 9rem;
}

.cert-hero__badge.icbox {
    width: 76px;
    height: 76px;
    box-shadow: 0 16px 34px -12px var(--es-brand-shadow);
}

.cert-hero__badge.icbox svg {
    width: 34px;
    height: 34px;
}

.cert-hero__title {
    position: relative;
    margin: 0;
    font-size: var(--es-fs-display);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.04;
    color: var(--es-ink);
}

/* B's second word in the faint ink. */
.cert-hero__dim {
    color: var(--es-faint);
}

.cert-hero__lead {
    position: relative;
    max-width: 36rem;
    margin: 0;
    color: var(--es-muted);
    font-size: 1.1rem;
    line-height: 1.6;
}

.cert-hero__form {
    position: relative;
    width: 100%;
    max-width: 40rem;
    text-align: left;
}

/* The code is read off paper letter by letter: a fixed-width face, spaced, in capitals as printed. */
.cert-hero__input {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.2rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* B's pill wherever the field and the button share one row: from 576px up, where the shared
   band (which wraps below 992px for its selects) has room for just these two. */
@media (min-width: 576px) {
    .cert-hero__form {
        flex-wrap: nowrap;
        padding-left: .75rem;
        border-radius: var(--es-r-pill);
    }

    .cert-hero__form .home-search__field {
        flex-basis: auto;
    }

    .cert-hero__form .home-search__submit {
        flex: none;
        border-radius: var(--es-r-pill);
    }

    .cert-hero__form .home-search__field:focus-within {
        border-radius: var(--es-r-pill);
    }
}

.cert-hero__hint {
    position: relative;
    margin: 0;
    color: var(--es-muted);
    font-size: .875rem;
    font-weight: 600;
}

/* B's two sparks, on a wide screen only. */
.cert-hero__spark {
    position: absolute;
    display: none;
    color: var(--es-brand);
    pointer-events: none;
}

.cert-hero__spark svg {
    width: 100%;
    height: 100%;
}

.cert-hero__spark--start {
    top: 5.5rem;
    left: 12%;
    width: 46px;
    height: 46px;
}

.cert-hero__spark--end {
    top: 4.25rem;
    right: 20%;
    width: 24px;
    height: 24px;
}

/* B's certificate, upright (UIhataları 40): a shape, not a document — lines where words would be (plan §3 rule 10). */
.cert-paper {
    position: absolute;
    /* Beside the sentence and the field, below the title's line: the title is as wide as the
       panel's middle at 1400px. */
    top: 17rem;
    right: 4%;
    display: none;
    width: 200px;
    overflow: hidden;
    border-radius: 22px;
    background: var(--es-paper);
    box-shadow: var(--es-card-shadow-hover);
    pointer-events: none;
}

.cert-paper__band {
    display: block;
    height: 14px;
    background: var(--es-cat-ember);
}

.cert-paper__body {
    display: grid;
    gap: .5rem;
    padding: 16px 18px 18px;
}

.cert-paper__kicker {
    color: var(--es-cat-ember);
    font-size: .72rem;
    font-weight: 700;
}

.cert-paper__line {
    display: block;
    width: 72%;
    height: 7px;
    border-radius: var(--es-r-pill);
    background: var(--es-cat-sand);
}

.cert-paper__line--name {
    width: 88%;
    height: 14px;
    background: var(--es-paper-ink);
}

.cert-paper__line--short {
    width: 46%;
}

.cert-paper__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: .4rem;
}

.cert-paper__code {
    display: grid;
    flex: 1 1 auto;
    gap: .4rem;
}

.cert-paper .pitch-qr {
    outline: 1px solid var(--es-cat-sand);
}

@media (min-width: 1400px) {
    .cert-hero__spark,
    .cert-paper {
        display: block;
    }
}

.cert-outcome {
    position: relative;
    z-index: 1;
    max-width: 70rem;
    margin: -6.5rem auto 3.5rem;
    padding-inline: 3rem;
}

.cert-result {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 2rem;
    padding: 2.25rem;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-band);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow-hover);
}

.cert-result__verdict {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: .75rem;
    padding: 1.9rem;
    border-radius: var(--es-r-xl);
    background: var(--es-ok-soft);
}

.cert-result__marks {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin-bottom: .5rem;
}

.cert-result__check.icbox {
    width: 72px;
    height: 72px;
    background: var(--es-ok);
    color: var(--es-ok-ink);
}

.cert-result__check.icbox svg {
    width: 32px;
    height: 32px;
    stroke-width: 2.5;
}

.cert-result__title {
    margin: 0;
    color: var(--es-ok);
    font-size: clamp(1.5rem, 1.1rem + 1vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.035em;
}

.cert-result__sub {
    margin: 0;
    color: var(--es-ok-strong);
    font-size: .92rem;
    font-weight: 600;
}

/* C's seal: the platform's mark in a ring of the ember. */
.cert-seal {
    display: grid;
    place-items: center;
    flex: none;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: conic-gradient(var(--es-cat-flame), var(--es-cat-ember), var(--es-cat-glow), var(--es-cat-flame));
}

.cert-seal__inner {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--es-surface);
}

.cert-seal__inner img {
    width: 38px;
    height: 38px;
    border-radius: 11px;
}

.cert-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: .75rem;
    margin: 0;
}

.cert-fact {
    display: grid;
    align-content: start;
    gap: .3rem;
    min-width: 0;
    padding: 1.1rem 1.25rem;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.cert-fact dt {
    color: var(--es-muted);
    font-size: .8rem;
    font-weight: 600;
}

.cert-fact dd {
    margin: 0;
    color: var(--es-ink);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cert-fact--wide {
    grid-column: 1 / -1;
}

.cert-fact__name {
    font-family: var(--es-font-display);
    font-size: 1.5rem;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.cert-fact__link {
    color: var(--es-brand);
    font-size: 1.05rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cert-fact__link:hover {
    color: var(--es-brand-strong);
}

.cert-fact__org {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.cert-fact__logo {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--es-paper);
    outline: 1px solid var(--es-line);
    outline-offset: -1px;
}

.cert-fact__logo--initials {
    display: grid;
    place-items: center;
    background: var(--es-brand-soft);
    color: var(--es-brand);
    font-size: .65rem;
    font-weight: 800;
}

.cert-fact__code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    letter-spacing: .06em;
}

/* B's ember box for the sessions; the count only (AD-31). */
.cert-fact--brand {
    background: var(--es-brand-soft);
}

.cert-fact--brand dt {
    color: var(--es-brand-deep);
}

.cert-fact__count {
    font-family: var(--es-font-display);
    font-size: 1.25rem;
    letter-spacing: -.02em;
}

/* C's address line under both columns, with its copy button. */
.cert-result__address {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--es-line);
}

.cert-result__address-text {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.cert-result__address-label {
    color: var(--es-muted);
    font-size: .78rem;
    font-weight: 600;
}

.cert-result__address-url {
    color: var(--es-body);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .9rem;
    overflow-wrap: anywhere;
}

/* The warning box (job 4.2) over the hero's edge: opaque, so the panel does not show through. */
.flash.cert-missing {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.1rem 1.25rem;
    background-color: var(--es-surface);
    background-image: linear-gradient(var(--flash-field), var(--flash-field));
    box-shadow: var(--es-card-shadow-hover);
}

.cert-missing__title {
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
}

@media (max-width: 991.98px) {
    .cert-result {
        grid-template-columns: minmax(0, 1fr);
    }

    .cert-outcome {
        padding-inline: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .cert-hero {
        padding: 3rem 1.25rem 2.5rem;
        border-radius: var(--es-r-xl);
    }

    .cert-hero--lifted {
        padding-bottom: 7rem;
    }

    .cert-outcome {
        margin-top: -5rem;
        padding-inline: .5rem;
    }

    .cert-result {
        gap: 1.25rem;
        padding: 1rem;
        border-radius: var(--es-r-xl);
    }

    .cert-result__verdict {
        padding: 1.25rem;
    }

    .cert-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .cert-result__address .btn {
        width: 100%;
    }
}

/* ---- the inbox, /me/bildirimler (AD-29; plan job 6.13; UIhataları 34, 35)

   Under the shared /me header: the "Tümü / Okunmamış / Okunmuş" tabs beside "Tümünü okundu
   işaretle", then one card for the whole page — each day of the reader's calendar a small muted
   label, each entry a row behind a hairline (the .me-past pattern), its text two lines at most.
   An unread row keeps its ember edge, its "Yeni" tag and a heavier title (DD-16: the mark is the
   edge and the tag, never a coloured slab). The kind's icon box and its label take the same role
   colour (DisplayText.Tone). Each row is a whole-width button posting the entry's mark-read form. */

.notices {
    display: grid;
    gap: var(--es-space-4);
}

.notices__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-space-3) var(--es-space-4);
}

.notices__bar .tabs {
    margin-bottom: 0;
}

.notices__bar form {
    margin: 0;
}

.notices__bar .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--es-space-2);
}

.notices__bar .btn svg {
    width: 16px;
    height: 16px;
}

/* A tab with nothing in it: one quiet line in the card's place, and the way back to "Tümü". */
.notices__empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-3);
    padding: var(--es-card-pad);
    border: 1px dashed var(--es-line-strong);
    border-radius: var(--es-r-xl);
    color: var(--es-muted);
}

.notices__empty-text {
    flex: 1 1 12rem;
    margin: 0;
    font-weight: 600;
}

.notices__card {
    overflow: hidden;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.notices__group + .notices__group {
    border-top: 1px solid var(--es-line);
}

.notices__group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--es-space-1) var(--es-space-2);
    padding: var(--es-space-2) var(--es-card-pad);
    border-bottom: 1px solid var(--es-line);
    background: var(--es-fill);
}

.notices__day {
    margin: 0;
    color: var(--es-ink);
    font-family: var(--es-font-body);
    font-size: var(--es-fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.notices__group-count {
    color: var(--es-faint);
    font-size: var(--es-fs-xs);
    font-weight: 600;
}

.notices__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notice + .notice {
    border-top: 1px solid var(--es-line);
}

.notice__form {
    margin: 0;
}

.notice__entry {
    display: flex;
    align-items: flex-start;
    gap: var(--es-space-3);
    width: 100%;
    padding: var(--es-space-3) var(--es-card-pad);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--es-dur-fast) var(--es-ease);
}

.notice__entry:hover {
    background: var(--es-wash);
}

.notice__entry:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: -2px;
}

/* The unread mark is an ember edge on the row's start, not a filled slab (DD-16). */
.notice.is-unread .notice__entry {
    box-shadow: inset 3px 0 0 var(--es-brand);
}

.notice__icon {
    width: 34px;
    height: 34px;
}

.notice__icon svg {
    width: 16px;
    height: 16px;
}

.notice__text {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

.notice__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--es-space-2);
    font-size: var(--es-fs-xs);
    font-variant-numeric: tabular-nums;
}

.notice__kind {
    font-weight: 700;
    color: var(--es-ink);
}

/* The kind's label in its icon box's role colour: a second cue, so it is read through :has() and
   an older browser simply keeps the ink. */
.notice__entry:has(.icbox--brand) .notice__kind {
    color: var(--es-brand);
}

.notice__entry:has(.icbox--ok) .notice__kind {
    color: var(--es-ok);
}

.notice__entry:has(.icbox--warn) .notice__kind {
    color: var(--es-warn);
}

.notice__entry:has(.icbox--bad) .notice__kind {
    color: var(--es-bad);
}

.notice__entry:has(.icbox--info) .notice__kind {
    color: var(--es-info);
}

.notice__time {
    color: var(--es-faint);
    font-weight: 600;
}

.notice__new {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 var(--es-space-2);
    border-radius: var(--es-r-pill);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-size: .6875rem;
    font-weight: 700;
}

.notice__title {
    color: var(--es-ink);
    font-size: var(--es-fs-body);
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.notice.is-unread .notice__title {
    font-weight: 750;
}

/* Two lines at most (UIhataları 35): the entry's page has the rest. */
.notice__body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.notice__go {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--es-fill);
    color: var(--es-ink);
}

.notice__go svg {
    width: 14px;
    height: 14px;
}

.notices .pager--standalone {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .notice__entry {
        padding: var(--es-space-3) var(--es-space-4);
    }

    .notice__go {
        display: none;
    }

    .notices__bar form,
    .notices__bar .btn {
        width: 100%;
        justify-content: center;
    }
}

/* A row and the mark-all button are tap targets before they are rows (§5.3). */
@media (pointer: coarse) {
    .notice__entry {
        min-height: 44px;
    }
}

/* The bell in the header, with its count riding on the icon's corner. */
.notify-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.notify-bell svg {
    width: 20px;
    height: 20px;
}

.notify-bell__badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: var(--es-r-pill);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
}

/* === Portal: admission, door, announcements, feedback (AD-26..AD-32) === */

/* The row of an event's pages under its breadcrumb (_EventNav; plan job 3.5, B's event tabs): a
   white capsule on the work shells' grey ground, the page you are on filled (ink on paper, the
   raised tint with the ember edge on ink), a little further from the page head so the two rows
   never read as one control. Its own name (.evnav): the old .event-nav also matched the public
   event page's bar (UIhataları 44). */
.tabs.evnav {
    margin-bottom: 1rem;
    background: var(--es-surface);
    border-color: var(--es-glow-line);
    box-shadow: var(--es-shadow-1);
}

.tabs.evnav a {
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
}

.tabs.evnav a svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* When the row is wider than the screen, the side it continues on fades out, so a phone at the
   door (AD-30) can see there is more than the pills in view. site.js sets the two attributes from
   the scroll position; with script off the row simply scrolls. A mask is a still picture, so
   reduced motion has nothing to switch off here. Keyed on [data-scroll-row] rather than the class,
   so /me's tab row (.me-tabs, which runs off a 390px phone the same way) shares the one rule. */
[data-scroll-row][data-fade-start] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32px);
    mask-image: linear-gradient(to right, transparent, #000 32px);
}

[data-scroll-row][data-fade-end] {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 32px);
    mask-image: linear-gradient(to left, transparent, #000 32px);
}

[data-scroll-row][data-fade-start][data-fade-end] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.tabs.evnav a.is-active {
    background: var(--es-tab-on);
    color: var(--es-tab-on-ink);
    box-shadow: inset 0 0 0 1px var(--es-tab-on-edge);
}

@media (max-width: 767.98px) {
    .tabs.evnav a {
        min-height: 44px;
    }
}

/* The door (AD-30) has its own section near the end: "Kapı" (plan job 8.15). */

/* Announcements (AD-29) have their own section near the end: "Duyurular" (plan job 8.12). */

/* ----------------------------------------------------------------- feedback (AD-31) */

/* The portal's feedback page has its own section near the end: "Geri bildirim" (plan job 8.13).
   A small number with its star, as the sessions list shows one. */
.rating-value {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-weight: 600;
    color: var(--es-ink);
    white-space: nowrap;
}

.rating-value svg {
    width: 14px;
    height: 14px;
    color: var(--es-warn);
}

/* ---------------------------------------------------------------------------------------------
   Round four and the test findings (blueprint §35, 2026-10-01)
   --------------------------------------------------------------------------------------------- */

/* A status line or a table cell holding one long unbroken word — a sponsor named
   "Jskehdkejdkekd…" — wraps instead of pushing past the edge of a phone (T57). A flex item will
   not shrink below its longest word unless it is allowed to. */
.alert > span,
.alert > div {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* "1.240 / 5.000" under a long text field (T47). */
.char-counter {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.char-counter.is-near {
    color: var(--es-warn);
}

/* ------------------------------------------- search suggestions (T54, DD-19, plan job 4.11)

   The list under the directory's search field, as popups-OrgSearch-B draws it — a big rounded
   panel on the field's surface, city chips on top, community rows with a logo tile, the typed
   letters marked, "… için tüm sonuçlar" at the foot — with C's small group headings ("Şehir",
   "Topluluklar"); C's preview pane is left out (B-29). site.js builds it (data-suggest-url); with
   no script none of this exists and the field is a plain GET search. */
.suggest-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* The × sits inside the field's right end, a full-height 44px target; the field makes room. */
.suggest-field > .home-search__input {
    padding-right: 2.75rem;
}

/* Two × once text was typed: the browser's own beside ours (Stage 11.1 review). The native one
   goes only while ours is shown, so with script off the field keeps the browser's. */
.suggest-field:has(> .suggest-field__clear:not([hidden])) > input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.suggest-field__clear {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 100%;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--es-r-input);
    background: transparent;
    color: var(--es-muted);
}

.suggest-field__clear[hidden] {
    display: none;
}

.suggest-field__clear:hover {
    color: var(--es-ink);
}

.suggest-field__clear svg {
    width: 18px;
    height: 18px;
}

.suggest {
    position: absolute;
    z-index: 20;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    max-height: min(34rem, 70vh);
    padding: .6rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--es-surface);
    color: var(--es-body);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    box-shadow: var(--es-menu-shadow);
}

/* On a phone the field is only part of the row (the Ara button beside it), so the list hangs from
   the whole filter bar instead, as wide as the screen allows. */
@media (max-width: 575.98px) {
    .filter-bar:has(> .suggest-field) {
        position: relative;
    }

    .filter-bar > .suggest-field {
        position: static;
    }

    .filter-bar > .suggest-field > .suggest {
        left: 0;
        right: 0;
        border-radius: var(--es-r-lg);
    }

    /* The × stays pinned to the field, which no longer anchors anything else. */
    .filter-bar > .suggest-field {
        display: grid;
    }

    .filter-bar > .suggest-field > .form-control,
    .filter-bar > .suggest-field > .suggest-field__clear {
        grid-area: 1 / 1;
    }

    .filter-bar > .suggest-field > .suggest-field__clear {
        position: static;
        justify-self: end;
    }
}

.suggest__group + .suggest__group,
.suggest__group + .suggest__all {
    margin-top: .35rem;
}

/* The city chips get a rule under them, the way B separates them from the rows. */
.suggest__group--chips:not(:last-child) {
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--es-line);
}

/* C's group headings: a small uppercase line above each group. */
.suggest__heading {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .7rem .35rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--es-faint);
}

.suggest__heading svg {
    width: 15px;
    height: 15px;
    color: var(--es-brand);
}

.suggest__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: 0 .45rem;
}

/* A chip that is an option: the house .chip, its active state the ring of focus rather than the
   filled "selected filter" look — choosing here goes somewhere, it does not filter in place. */
.suggest__chip {
    max-width: 100%;
}

.suggest__chip svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--es-brand);
}

.suggest__chip.is-active {
    border-color: var(--es-brand);
    background: var(--es-brand-soft);
    color: var(--es-ink);
}

.suggest__chip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggest__chip-logo {
    width: 1.4rem;
    height: 1.4rem;
    margin-left: -.55rem;
    border-radius: 7px;
    font-size: .6rem;
}

.suggest__count {
    font-weight: 500;
    color: var(--es-muted);
}

/* "İstanbul · 1 topluluk": the dot is drawn, not said — the chip's aria-label already reads
   the two parts with a comma (site.js cityChip). */
.suggest__count::before {
    content: "·";
    content: "·" / "";
    margin-right: .35em;
}

.suggest__option {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: 44px;
    padding: .55rem .7rem;
    border-radius: var(--es-r-lg);
    color: var(--es-body);
    text-decoration: none;
}

.suggest__option:hover,
.suggest__option.is-active {
    background: var(--es-brand-soft);
    color: var(--es-body);
}

.suggest__logo {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--es-r);
    font-size: .9rem;
}

.suggest__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.suggest__label {
    overflow-wrap: anywhere;
    font-weight: 700;
    color: var(--es-ink);
}

.suggest__hint {
    font-size: .8rem;
    font-weight: 600;
    color: var(--es-muted);
}

.suggest__meta {
    flex: 0 0 auto;
    font-size: .8rem;
    font-weight: 600;
    color: var(--es-muted);
    font-variant-numeric: tabular-nums;
}

/* B's "Aç ↵" on the row the arrows rest on: shown only there, and only where there is a keyboard
   and room for it. */
.suggest__key {
    display: none;
    flex: 0 0 auto;
    padding: .15rem .55rem;
    border-radius: var(--es-r-pill);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-size: .72rem;
    font-weight: 700;
}

@media (hover: hover) and (min-width: 576px) {
    .suggest__option.is-active > .suggest__key {
        display: inline-block;
    }
}

/* The typed letters (B): ember on its soft tint, a white tint inside a row that is already tinted. */
.suggest mark {
    padding: 0 1px;
    border-radius: 4px;
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-weight: 800;
}

.suggest__option.is-active mark,
.suggest__option:hover mark,
.suggest__chip.is-active mark {
    background: var(--es-surface);
}

.suggest__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    margin-top: .5rem;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
    color: var(--es-ink);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
}

.suggest__all svg {
    width: 16px;
    height: 16px;
}

.suggest__all:hover,
.suggest__all.is-active {
    background: var(--es-brand-soft);
    color: var(--es-ink);
    box-shadow: inset 0 0 0 1px var(--es-brand);
}

/* The line over a near miss: "“izmirt” ile tam eşleşen topluluk yok." */
.suggest__note {
    margin: .2rem .7rem .3rem;
    font-size: .8rem;
    color: var(--es-muted);
}

/* Nothing found, inside the list: the page's own empty state in small. */
.suggest__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.25rem 1rem 1rem;
    text-align: center;
}

.suggest__empty[hidden] {
    display: none;
}

.suggest__empty-icon {
    margin-bottom: .35rem;
}

.suggest__empty-title {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--es-ink);
}

.suggest__empty-lead {
    margin: 0 0 .5rem;
    font-size: .875rem;
    color: var(--es-muted);
}

/* "Bunu mu demek istediniz?" on an empty search (T54). */
.did-you-mean {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: .75rem;
}

/* ------------------------------------------------------- confirmation dialog (job 4.1)

   The one <dialog> every layout renders (_ConfirmDialog) in place of window.confirm: B's
   centred card — a round tone icon, a context chip, the title, the question — with C's tone
   label, key hints, impact line and Kime/Kanal/Toplam list (popups-Confirms-B/C). Prefixed
   .es-dialog so it never meets Bootstrap's .modal (plan §3 rule 6). The tone sets two colours;
   everything tinted reads them. On a phone it rises from the bottom edge as a sheet. */
.es-dialog {
    --es-dialog-tone: var(--es-warn);
    --es-dialog-tone-soft: var(--es-warn-soft);
    width: min(28rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100dvh - 2rem);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--es-body);
    overflow: visible;
}

.es-dialog--normal {
    --es-dialog-tone: var(--es-brand);
    --es-dialog-tone-soft: var(--es-brand-soft);
}

.es-dialog--danger {
    --es-dialog-tone: var(--es-bad);
    --es-dialog-tone-soft: var(--es-bad-soft);
}

.es-dialog::backdrop {
    background: var(--es-backdrop);
}

.es-dialog__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: var(--es-space-6) var(--es-space-5) var(--es-space-5);
    text-align: center;
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    box-shadow: var(--es-card-shadow), var(--es-shadow-3);
}

.es-dialog__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--es-dialog-tone-soft);
    color: var(--es-dialog-tone);
}

.es-dialog__icon svg {
    width: 24px;
    height: 24px;
}

/* C's tone label: "Dikkat", "Geri alınamaz" — said in words as well as in colour. */
.es-dialog__tone {
    font-size: var(--es-fs-xs);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--es-dialog-tone);
}

.es-dialog__context {
    padding: .2rem .7rem;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 700;
}

.es-dialog__title {
    margin: 0;
    font-family: var(--es-font-display);
    font-weight: 600;
    font-size: var(--es-fs-h2);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--es-ink);
}

.es-dialog__message {
    margin: 0;
    color: var(--es-muted);
    font-size: .875rem;
}

.es-dialog__impact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem .5rem;
    width: 100%;
    padding: .6rem .75rem;
    border-radius: var(--es-r);
    background: var(--es-dialog-tone-soft);
    color: var(--es-dialog-tone);
    font-size: .875rem;
    font-weight: 700;
}

.es-dialog__impact svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.es-dialog__impact-detail {
    font-size: .8rem;
    font-weight: 600;
    opacity: .85;
}

.es-dialog__impact-detail:empty {
    display: none;
}

/* C's summary list: the announcement's Kime / Kanal / Toplam, read from the form on opening. */
.es-dialog__summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
    margin: 0;
    padding: .25rem .875rem;
    border-radius: var(--es-r);
    background: var(--es-fill);
    font-size: .875rem;
    text-align: left;
}

.es-dialog__summary dt,
.es-dialog__summary dd {
    margin: 0;
    padding: .45rem 0;
    border-top: 1px solid var(--es-line);
}

.es-dialog__summary dt {
    padding-right: 1rem;
    color: var(--es-muted);
    font-weight: 600;
}

.es-dialog__summary dd {
    color: var(--es-ink);
    font-weight: 650;
}

.es-dialog__summary dt:first-of-type,
.es-dialog__summary dd:first-of-type {
    border-top: 0;
}

.es-dialog__fields,
.es-dialog__type {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    text-align: left;
}

.es-dialog__fields .form-label,
.es-dialog__type .form-label {
    margin-bottom: .35rem;
    font-size: .875rem;
}

.es-dialog__typed-name {
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

/* The typed name matches: the field says so before the button does. */
.es-dialog__type.is-match .form-control {
    border-color: var(--es-ok);
}

.es-dialog__foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    width: 100%;
    margin-top: .5rem;
}

.es-dialog__foot .btn {
    white-space: normal;
}

/* The confirm button's three fills (data-confirm-variant): the ember for what loses nothing,
   ink for a warning that is not destructive, solid red for what cannot be taken back — the
   page's soft .btn-danger is too quiet for the last word on a deletion. */
.es-dialog__accept--danger {
    --bs-btn-color: var(--es-bad-ink);
    --bs-btn-bg: var(--es-bad);
    --bs-btn-border-color: var(--es-bad);
    --bs-btn-hover-color: var(--es-bad-ink);
    --bs-btn-hover-bg: var(--es-bad-box-text);
    --bs-btn-hover-border-color: var(--es-bad-box-text);
    --bs-btn-active-color: var(--es-bad-ink);
    --bs-btn-active-bg: var(--es-bad-box-text);
    --bs-btn-active-border-color: var(--es-bad-box-text);
    --bs-btn-disabled-color: var(--es-muted);
    --bs-btn-disabled-bg: var(--es-fill-2);
    --bs-btn-disabled-border-color: var(--es-line);
    --bs-btn-disabled-opacity: 1;
}

.es-dialog__accept--dark {
    --bs-btn-disabled-color: var(--es-muted);
    --bs-btn-disabled-bg: var(--es-fill-2);
    --bs-btn-disabled-border-color: var(--es-line);
    --bs-btn-disabled-opacity: 1;
}

/* C's key hints: Esc on "Vazgeç", ↵ only where Enter confirms. Nothing to press on a phone. */
.es-dialog__key {
    padding: .05rem .35rem;
    border: 1px solid currentColor;
    border-radius: 5px;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: .68rem;
    font-weight: 600;
    opacity: .7;
}

@media (pointer: coarse) {
    .es-dialog__key {
        display: none;
    }
}

/* A field the dialog asks for stays on the page with script off; once site.js has the form it
   lives in the dialog instead (A-13: the reason goes in with the decision). */
form[data-confirm-ready] [data-confirm-field] {
    display: none !important;
}

/* With script off the reason stays inline in a list row (A-13). At phone width the row's flex
   would squeeze it to a sliver, so it keeps a typable width and the button wraps under it. */
input[data-confirm-field] {
    flex: 1 1 10rem;
    min-width: 10rem;
}

form.d-flex:has(> input[data-confirm-field]) {
    flex-wrap: wrap;
}

/* A session's "Katılımcılara haber ver" box (plan Aşama 12) with script off: it sits in the
   cancel form beside the button — a row, a menu or the review panel — so it brings its own
   spacing and a touch-sized line rather than leaning on the container's. */
.sess-cancel-notice {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0 .75rem;
    padding-left: 2.25rem;
    font-size: .875rem;
    white-space: nowrap;
}

@keyframes es-dialog-in {
    from {
        opacity: 0;
        translate: 0 10px;
        scale: .97;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

@keyframes es-sheet-in {
    from {
        translate: 0 100%;
    }

    to {
        translate: 0 0;
    }
}

@keyframes es-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.es-dialog[open] {
    animation: es-dialog-in var(--es-dur-slow) var(--es-ease);
}

.es-dialog[open]::backdrop {
    animation: es-fade-in var(--es-dur-slow) ease;
}

/* A phone: a sheet along the bottom edge, where the thumb already is. */
@media (max-width: 575.98px) {
    .es-dialog {
        width: 100%;
        max-height: calc(100dvh - 1rem);
        margin: auto 0 0;
    }

    .es-dialog__panel {
        max-height: calc(100dvh - 1rem);
        padding: 1.5rem 1rem calc(1rem + env(safe-area-inset-bottom));
        border-bottom: 0;
        border-radius: var(--es-r-xl) var(--es-r-xl) 0 0;
    }

    .es-dialog__icon {
        width: 56px;
        height: 56px;
    }

    .es-dialog__title {
        font-size: 1.25rem;
    }

    .es-dialog[open] {
        animation: es-sheet-in var(--es-dur-slow) var(--es-ease);
    }
}

/* ------------------------------------------------ crop dialog (UIhataları 31, 63, 69; K4)

   wwwroot/js/image-crop.js builds it on the first file chosen in an image field: an .es-dialog
   (same panel, backdrop, opening motion and phone sheet), wider than the confirm dialog, with the
   picture on a canvas, a zoom row and the two buttons. The canvas takes two colours from here —
   the stage's color is the dim laid outside the frame, the canvas's color the frame line — so no
   colour lives in the script. Written after .es-dialog so the same-weight selectors here win.
   Its only motion is .es-dialog[open]'s, already off under prefers-reduced-motion. */
.crop-dialog {
    width: min(40rem, calc(100vw - 2rem));
}

.crop-dialog--square {
    width: min(30rem, calc(100vw - 2rem));
}

.crop-dialog__panel {
    align-items: stretch;
    gap: var(--es-space-3);
    padding: var(--es-space-5) var(--es-space-5) var(--es-space-4);
    text-align: left;
}

.crop-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-space-3);
}

.crop-dialog__title {
    font-size: var(--es-fs-h3);
}

.crop-dialog__close {
    flex: 0 0 auto;
    color: var(--es-muted);
}

.crop-dialog__help,
.crop-dialog__status {
    margin: 0;
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
}

.crop-dialog__status:empty {
    display: none;
}

.crop-dialog__stage {
    display: flex;
    justify-content: center;
    min-width: 0;
    color: var(--es-photo-dim);
}

/* The checks show through where a logo zoomed out leaves the square transparent (K4). */
.crop-dialog__canvas {
    display: block;
    border-radius: var(--es-r);
    background: repeating-conic-gradient(var(--es-fill) 0 25%, var(--es-fill-2) 0 50%) 0 0 / 16px 16px;
    color: var(--es-on-photo);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.crop-dialog__canvas.is-dragging {
    cursor: grabbing;
}

.crop-dialog__canvas:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.crop-dialog__zoom {
    display: flex;
    align-items: center;
    gap: var(--es-space-2);
}

.crop-dialog__range {
    flex: 1 1 auto;
    min-width: 0;
}

.crop-dialog__step {
    flex: 0 0 auto;
    font-size: var(--es-fs-lg);
    font-weight: 600;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .crop-dialog,
    .crop-dialog--square {
        width: 100%;
    }

    .crop-dialog__panel {
        padding: var(--es-space-4) var(--es-space-4) calc(var(--es-space-4) + env(safe-area-inset-bottom));
    }
}

/* ------------------------------------------------------- session ended (§35 T51, job 4.13)

   The dialog an open tab shows once its session was ended elsewhere or ran out. It is an
   .es-dialog (job 4.1) — same panel, tone colours, opening motion and phone sheet — with
   popups-SessionEnded-B's drawn header above a large title and one full-width button, and C's
   "Güvenlik" label. Written after .es-dialog so the same-weight selectors here win. The drawing
   is decoration (aria-hidden) and gives way to the plain round icon on a phone, as in B. */
.session-ended {
    width: min(30rem, calc(100vw - 2rem));
}

.session-ended__panel {
    gap: .5rem;
    padding: .75rem .75rem 1.25rem;
}

.session-ended__art {
    position: relative;
    width: 100%;
    height: 184px;
    margin-bottom: 1.25rem;
    overflow: hidden;
    border-radius: calc(var(--es-r-xl) - .75rem);
    background: radial-gradient(120% 90% at 15% 0%, var(--es-preview-glow), transparent 60%), var(--es-fill);
}

.session-ended__window {
    position: absolute;
    left: 9%;
    top: 21%;
    width: 46%;
    padding: 14px;
    border: 1px solid var(--es-glow-line);
    border-radius: 18px;
    background: var(--es-surface);
    box-shadow: var(--es-shadow-2);
    text-align: left;
}

.session-ended__dots {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.session-ended__dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--es-line-strong);
}

.session-ended__line {
    display: block;
    width: 80%;
    height: 10px;
    border-radius: var(--es-r-pill);
    background: var(--es-fill-2);
}

.session-ended__line--short {
    width: 56%;
    margin-top: 8px;
}

.session-ended__badge {
    position: absolute;
    right: -14px;
    bottom: -14px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 3px solid var(--es-surface);
    border-radius: 50%;
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.session-ended__badge svg {
    width: 18px;
    height: 18px;
}

/* A phone is always a dark device in a drawing, in either theme (--es-device, job 4.5). */
.session-ended__device {
    position: absolute;
    right: 11%;
    top: 12%;
    width: 80px;
    height: 142px;
    padding: 6px;
    border-radius: 20px;
    background: var(--es-device);
    box-shadow: 0 0 0 1px var(--es-device-edge), var(--es-shadow-2);
}

.session-ended__screen {
    display: grid;
    place-items: center;
    height: 100%;
    border-radius: 15px;
    background: var(--es-paper);
}

.session-ended__screen svg {
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 10px;
    border-radius: 50%;
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.session-ended__chip {
    position: absolute;
    left: 33%;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border-radius: var(--es-r-pill);
    background: var(--es-surface);
    box-shadow: var(--es-shadow-2);
    color: var(--es-ink);
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.session-ended__chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--es-brand);
}

/* The round icon is the phone's picture; the drawing is the wider screen's. */
.session-ended__icon {
    display: none;
}

.session-ended__tone {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.session-ended__tone svg {
    width: 14px;
    height: 14px;
}

.session-ended__title {
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem);
    line-height: 1.08;
}

.session-ended__soft {
    color: var(--es-muted);
}

.session-ended__text {
    max-width: 23rem;
    padding: 0 .75rem;
}

.session-ended__go {
    width: 100%;
    margin-top: 1rem;
}

/* AD-20: the administrator has no password, so the way back is a mailed code. */
.session-ended__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: .25rem 0 0;
    color: var(--es-muted);
    font-size: .8125rem;
}

.session-ended__note svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .session-ended {
        width: 100%;
    }

    .session-ended__panel {
        padding: 1.5rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }

    .session-ended__art {
        display: none;
    }

    .session-ended__icon {
        display: grid;
    }

    .session-ended__text {
        padding: 0;
    }
}

/* ------------------------------------------- live preview and phone frame (plan job 4.5)
   The stage beside a form that shows what the participant will see (design portal4-Announcements-B,
   portal4-Questions-B): a soft ground, the "Canlı önizleme" chip in its corner, a device in the
   middle and an optional note under it. Views/Shared/_PhoneFrame.cshtml draws it; site.js
   ([data-live-preview]) keeps the screen in step with the form. Sized for a side column: the
   device is at most 300px wide and shrinks with the column, its height following its width, so
   the screen is a fixed window onto the template and what does not fit is cut off at the bottom,
   as on a phone. The whole stage is decoration for assistive technology (aria-hidden, inert). */
.preview-stage {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: .9rem;
    padding: 3.5rem 1.25rem 1.75rem;
    border-radius: var(--es-r-band);
    background: radial-gradient(70% 55% at 50% 38%, var(--es-preview-glow), transparent 72%), var(--es-fill-2);
    color: var(--es-body);
}

/* Long forms (the event form, 8.2): the stage stays beside the fields being typed. Only where
   there is a side column; on a phone it is one more block in the page. */
@media (min-width: 992px) {
    .preview-stage--sticky {
        position: sticky;
        top: 96px;
    }
}

/* B's pill, placed on the stage. A grey dot while the picture is still (no script, or a stage
   with no form); once site.js has bound it the dot turns green with a ring and the label says
   "Canlı" — both words are in the markup, so the script writes no Turkish of its own. */
.preview-stage__chip {
    position: absolute;
    top: 1rem;
    left: 1.25rem;
    background: var(--es-surface);
    box-shadow: var(--es-shadow-2);
}

.preview-stage__chip::before {
    color: var(--es-faint);
}

.preview-stage.is-live .preview-stage__chip::before {
    color: var(--es-dot-ok);
    box-shadow: 0 0 0 3px var(--es-ok-soft);
}

.preview-stage__live,
.preview-stage.is-live .preview-stage__still {
    display: none;
}

.preview-stage.is-live .preview-stage__live {
    display: inline;
}

.preview-stage__note {
    margin: 0;
    max-width: 300px;
    font-size: .8125rem;
    text-align: center;
    color: var(--es-muted);
}

/* The device: kit .phone.sm (300 × 620, 44px corners, 10px bezel), made fluid. */
.phone-frame {
    position: relative;
    width: min(100%, 300px);
    aspect-ratio: 300 / 620;
    padding: 10px;
    border-radius: 44px;
    background: var(--es-device);
    box-shadow: 0 0 0 1px var(--es-device-edge), 0 24px 48px -18px var(--es-device-glow), var(--es-shadow-3);
}

/* The camera island, over the screen's top edge — what makes the rectangle read as a phone. */
.phone-frame::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 20px;
    left: 50%;
    width: 78px;
    height: 22px;
    translate: -50% 0;
    border-radius: var(--es-r-pill);
    background: var(--es-device);
}

/* The screen follows the page's theme, as a phone set to follow its system would. Its type is a
   step smaller than the page's so a template written in rem keeps the proportions of a phone. */
.phone-frame__screen {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 34px;
    background: var(--es-page);
    /* On ink the screen is as dark as the bezel: a faint line is where one ends (DD-24). */
    box-shadow: inset 0 0 0 1px var(--es-device-screen-edge);
    color: var(--es-body);
    font-size: .8125rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* A template's content area: clear of the island at the top, a phone's margins at the sides. */
.phone-frame__body {
    display: grid;
    gap: .6rem;
    padding: 3.25rem 1rem 1rem;
}

/* The page's headings are Unbounded at page size; inside the phone they are a phone's size. */
.phone-frame__screen :is(h1, h2, h3, h4) {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
}

/* A preview of a multi-line field keeps the line breaks the person typed (textContent, not HTML). */
.preview-lines {
    white-space: pre-line;
}

/* A part that data-preview-show has just revealed fades in rather than popping (DD-25); switched
   off in the reduced-motion block at the end of the file. */
@keyframes es-preview-in {
    from {
        opacity: 0;
        translate: 0 4px;
    }
}

.preview-stage .is-entering {
    animation: es-preview-in var(--es-dur) var(--es-ease) both;
}

/* ------------------------------------------ "Organizatörler için" (plan job 5.11, §8 A-14)

   /organizatorler (Views/Home/Organizers.cshtml): the organizer pitch as one path (UIhataları 23,
   77) — a hero with a small portal beside it; "Etkinliğin her anı için bir araç" with the five-step
   flow as its spine, a bento of features each with a small mock-up and the rest as chips
   (.pitch-more); a dark participant band; the 1-2-3 and the FAQ; the footer's own call band
   (.foot-cta) as its close.

   The mock-ups are decoration (aria-hidden): real portal labels and pills, and blank bars
   (.pitch-ghost) wherever a name or a number would be — the plan forbids both here (§3 rule 10).
   A ghost is currentColor at low opacity, so it reads on any surface in either theme without a
   colour of its own. Paper things (a badge, a poster, a QR code) are --es-paper with
   --es-paper-ink in both themes, as print is. */
.pitch-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 3rem;
    padding: 1rem 0 3.5rem;
}

.pitch-hero__title {
    margin: .75rem 0 1rem;
    font-size: var(--es-fs-display);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.08;
    text-wrap: balance;
    overflow-wrap: normal;
}

.pitch-hero__lead {
    max-width: 54ch;
    margin: 0 0 var(--es-space-6);
    color: var(--es-muted);
    font-size: var(--es-fs-lg);
    line-height: 1.6;
}

.pitch-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.pitch-hero__media {
    position: relative;
    padding: 2.5rem 1.75rem;
    border-radius: var(--es-r-band);
    background: radial-gradient(70% 60% at 85% 10%, var(--es-preview-glow), transparent 70%), var(--es-fill);
}

/* The small portal: the side menu and an overview, at a third of the real size. */
.pitch-portal {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    color: var(--es-ink);
}

.pitch-portal__side {
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 1rem .6rem;
    border-right: 1px solid var(--es-line);
}

.pitch-portal__org {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .15rem .4rem .75rem;
}

.pitch-portal__logo {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--es-brand);
}

.pitch-portal__link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .5rem;
    border-radius: var(--es-r-sm);
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.pitch-portal__link svg {
    flex: none;
    width: 14px;
    height: 14px;
}

.pitch-portal__link.is-on {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
}

.pitch-portal__main {
    display: grid;
    align-content: start;
    gap: .9rem;
    padding: 1.25rem;
}

.pitch-portal__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.pitch-tile {
    display: grid;
    gap: .4rem;
    padding: .75rem;
    border-radius: 14px;
    background: var(--es-fill);
    color: var(--es-ink);
    font-size: .72rem;
    font-weight: 600;
}

.pitch-tile svg {
    width: 16px;
    height: 16px;
}

.pitch-tile--brand {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
}

/* Near-black in both themes: --es-ink would turn it into a cream tile on ink. */
.pitch-tile--ink {
    background: var(--es-device);
    color: var(--es-on-photo);
}

/* A blank where a name or a figure would be. */
.pitch-ghost {
    display: block;
    height: 8px;
    border-radius: var(--es-r-pill);
    background: currentColor;
    opacity: .16;
}

.pitch-ghost--soft {
    opacity: .09;
}

.pitch-ghost--title {
    height: 14px;
    opacity: .22;
}

.pitch-ghost--fig {
    width: 60%;
    height: 16px;
    opacity: .28;
}

.pitch-ghost--paper {
    color: var(--es-paper-ink);
}

.pitch-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .75rem;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r);
}

.pitch-row__lines {
    display: grid;
    flex: 1 1 auto;
    gap: 6px;
    min-width: 0;
}

.pitch-cover {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--es-cat-flame), var(--es-cat-coal));
}

/* The note floating over the portal (B's showcase). */
.pitch-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 11rem;
    padding: .6rem 1rem .6rem .6rem;
    border: 1px solid var(--es-glow-line);
    border-radius: 20px;
    background: var(--es-surface);
    box-shadow: var(--es-menu-shadow);
    color: var(--es-ink);
}

/* Over the empty foot of the side menu, so it hides no label. */
.pitch-float--start {
    bottom: 1.25rem;
    left: -.75rem;
}

.pitch-float__lines {
    display: grid;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
}

.pitch-float__label {
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

/* The five steps of an event, in one card, as the spine of "Etkinliğin her anı için bir araç"
   (UIhataları 77); a dashed ember thread runs from each to the next. The bento follows it. */
.pitch-flow__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 1.25rem;
    list-style: none;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.pitch-flow__list + .pitch-bento {
    margin-top: var(--es-space-6);
}

.pitch-flow__step {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: .2rem;
    padding: .5rem .75rem;
}

.pitch-flow__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(.5rem + 21px);
    left: calc(.75rem + 56px);
    right: -.25rem;
    height: 2px;
    background: linear-gradient(90deg, var(--es-brand-border) 50%, transparent 0) 0 0 / 10px 2px;
}

.pitch-flow__icon {
    margin-bottom: .6rem;
}

.pitch-flow__name {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.pitch-flow__text {
    color: var(--es-muted);
    font-size: .875rem;
    line-height: 1.5;
}

/* A section and its centred title, B's "Kayıttan kapıya her şey hazır." with its quiet half. */
.pitch-section {
    padding-block: 3rem;
    scroll-margin-top: 88px;
}

.pitch-head {
    max-width: 820px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.pitch-head__title {
    margin: 0;
    font-size: var(--es-fs-title);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.12;
    text-wrap: balance;
    overflow-wrap: normal;
}

.pitch-head__dim {
    color: var(--es-faint);
}

/* The bento: 7+5, 7+5, three rows of 4, one wide card. */
.pitch-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.25rem;
}

.pitch-card {
    display: flex;
    flex-direction: column;
    grid-column: span 4;
    gap: .9rem;
    min-width: 0;
    padding: 1.75rem;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    color: var(--es-body);
}

.pitch-card--5 {
    grid-column: span 5;
}

/* Half a row: "Topluluklar"'s form and door, side by side as site-Orgs-B has them (job 5.2). */
.pitch-card--6 {
    grid-column: span 6;
}

.pitch-card--7 {
    grid-column: span 7;
}

.pitch-card--12 {
    grid-column: span 12;
}

.pitch-card--brand {
    border-color: var(--es-brand-border);
    background: var(--es-brand-soft);
}

/* Pinned dark (.es-dark in the view): ink on paper, the deepest ground on ink. */
.pitch-card--ink {
    background: var(--es-page);
}

.pitch-card__head {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.pitch-card__title {
    margin: 0;
    color: var(--es-ink);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.3;
}

.pitch-card--5 .pitch-card__title,
.pitch-card--6 .pitch-card__title,
.pitch-card--7 .pitch-card__title,
.pitch-card--12 .pitch-card__title {
    font-size: 1.3rem;
}

.pitch-card__text {
    margin: 0;
    color: var(--es-muted);
    font-size: .95rem;
    line-height: 1.6;
}

.pitch-card__body {
    display: grid;
    gap: .9rem;
}

.pitch-card--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
}

/* A card's mock-up: at the bottom, on a well. */
.pitch-mock {
    display: grid;
    gap: .6rem;
    margin-top: auto;
    padding: 1rem;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
    color: var(--es-ink);
}

.pitch-card--brand .pitch-mock {
    background: var(--es-surface);
}

.pitch-mock__row {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.pitch-mock--list .pitch-mock__row,
.pitch-mock__row--note {
    padding: .5rem .6rem;
    border-radius: 14px;
    background: var(--es-surface);
}

.pitch-mock__end {
    flex: none;
    margin-left: auto;
}

/* An empty answer field under a question. */
.pitch-mock__field {
    display: block;
    height: 36px;
    margin-bottom: .4rem;
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r-sm);
    background: var(--es-surface);
}

.pitch-mock__req {
    color: var(--es-bad);
    font-weight: 700;
}

.pitch-mock__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* Smaller than a real chip: a picture of one, never a target. */
.pitch-mock .chip {
    min-height: 30px;
    padding: .15rem .75rem;
    font-size: .78rem;
}

/* A chip is --es-fill, the same as the well it sits in; on the ember card the well is white. */
.pitch-mock .chip:not(.is-active) {
    background: var(--es-surface);
}

.pitch-card--brand .pitch-mock .chip:not(.is-active) {
    background: var(--es-fill);
}

/* "Diğer özellikler" under the bento (moved from "Topluluklar", UIhataları 23): the features the
   flow and the home page's cards already describe, by name only — never a second card. */
.pitch-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-3) var(--es-space-4);
    margin-top: var(--es-space-6);
    padding: var(--es-space-5) var(--es-space-6);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
}

.pitch-more__title {
    margin: 0;
    color: var(--es-muted);
    font-family: var(--es-font-body);
    font-size: var(--es-fs-sm);
    font-weight: 700;
    letter-spacing: 0;
}

.pitch-more__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pitch-avatar {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--es-fill-2);
}

.pitch-mock__label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--es-muted);
    font-size: .72rem;
    font-weight: 700;
}

.pitch-mock__label svg {
    width: 14px;
    height: 14px;
}

/* The door: the kiosk's code, the badge it prints, and the door page on a phone. */
.pitch-mock--door {
    display: flex;
    align-items: stretch;
    gap: .75rem;
    background: var(--es-surface);
}

.pitch-kiosk,
.pitch-door {
    display: grid;
    flex: 1 1 0;
    align-content: start;
    justify-items: center;
    gap: .6rem;
    padding: .75rem;
    border-radius: var(--es-r);
    background: var(--es-fill);
}

.pitch-door__scan {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-block: auto;
    border-radius: var(--es-r);
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.pitch-door__scan svg {
    width: 26px;
    height: 26px;
}

.pitch-badge {
    display: flex;
    flex: 0 0 7.5rem;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background: var(--es-paper);
    box-shadow: var(--es-shadow-3);
}

.pitch-badge__band {
    height: 22px;
    background: var(--es-brand);
}

.pitch-badge__body {
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    gap: 6px;
    padding: .75rem;
}

.pitch-badge__mark {
    justify-self: end;
    margin-top: .5rem;
    color: var(--es-brand);
    line-height: 0;
}

.pitch-badge__mark svg {
    width: 16px;
    height: 16px;
}

/* A drawn QR code: a chequer for the modules and three finder squares — the corners that make
   a square of dots read as a code. Never scannable, and never meant to be. */
.pitch-qr {
    position: relative;
    display: block;
    flex: none;
    width: 88px;
    aspect-ratio: 1;
    padding: 8px;
    border-radius: 12px;
    background: var(--es-paper);
}

.pitch-qr > span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: repeating-conic-gradient(var(--es-paper-ink) 0 25%, transparent 0 50%) 0 0 / 18% 18%;
    opacity: .85;
}

.pitch-qr::before,
.pitch-qr::after,
.pitch-qr > span::before {
    content: "";
    position: absolute;
    z-index: 1;
    width: 28%;
    aspect-ratio: 1;
    border: 3px solid var(--es-paper-ink);
    border-radius: 3px;
    outline: 3px solid var(--es-paper);
    background: var(--es-paper-ink);
    box-shadow: inset 0 0 0 3px var(--es-paper);
}

.pitch-qr::before {
    top: 8px;
    left: 8px;
}

.pitch-qr::after {
    top: 8px;
    right: 8px;
}

.pitch-qr > span::before {
    bottom: 0;
    left: 0;
}

.pitch-qr--sm {
    width: 72px;
    padding: 6px;
}

.pitch-qr--sm::before,
.pitch-qr--sm::after {
    top: 6px;
}

.pitch-qr--sm::before {
    left: 6px;
}

.pitch-qr--sm::after {
    right: 6px;
}

.pitch-qr--lg {
    width: 150px;
    padding: 12px;
    box-shadow: inset 0 0 0 1px var(--es-line);
}

.pitch-qr--lg::before,
.pitch-qr--lg::after {
    top: 12px;
}

.pitch-qr--lg::before {
    left: 12px;
}

.pitch-qr--lg::after {
    right: 12px;
}

/* The session poster, and the check it turns into. */
.pitch-mock--poster {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.pitch-poster {
    display: grid;
    justify-items: center;
    gap: .5rem;
    width: 6.75rem;
    padding-bottom: .75rem;
    overflow: hidden;
    border-radius: 10px;
    background: var(--es-paper);
    box-shadow: var(--es-shadow-3);
}

.pitch-poster__band {
    justify-self: stretch;
    height: 18px;
    background: var(--es-brand);
}

.pitch-mock__arrow {
    color: var(--es-muted);
    line-height: 0;
}

.pitch-mock__arrow svg {
    width: 20px;
    height: 20px;
}

.pitch-stars {
    display: flex;
    gap: .25rem;
    color: var(--es-brand);
}

.pitch-stars svg {
    width: 20px;
    height: 20px;
}

.pitch-code {
    color: var(--es-muted);
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
    letter-spacing: .08em;
}

.pitch-mock__bars {
    --chart-h: 64px;
}

.pitch-mock__file {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: .35rem;
    padding: .25rem .65rem;
    border-radius: var(--es-r-pill);
    background: var(--es-surface);
    font-size: .75rem;
    font-weight: 700;
}

.pitch-mock__file svg {
    width: 14px;
    height: 14px;
}

/* The integration API (pinned dark, like a terminal) and the "Kaydol" button on a site. */
.pitch-mock--api {
    gap: .55rem;
    margin-top: 0;
    padding: 1.25rem;
    background: var(--es-page);
    box-shadow: inset 0 0 0 1px var(--es-glow-line);
}

.pitch-code-line {
    color: var(--es-ink);
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85rem;
    overflow-wrap: anywhere;
}

.pitch-code-line__verb {
    color: var(--es-brand);
    font-weight: 700;
}

.pitch-mock__button {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: .4rem;
    margin-top: .35rem;
    padding: .5rem 1rem;
    border-radius: var(--es-r-btn);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-size: .85rem;
    font-weight: 700;
}

.pitch-mock__button svg {
    width: 16px;
    height: 16px;
}

/* The participant band: pinned dark in both themes (B's and C's mobile band), the phone cut off
   at the band's bottom edge. */
.pitch-app {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: end;
    gap: 2.5rem;
    margin-block: 3rem;
    padding: 3.5rem 3.5rem 0;
    overflow: hidden;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-band);
    background: radial-gradient(60% 70% at 100% 0%, var(--es-brand-soft), transparent 70%), var(--es-page);
    color: var(--es-body);
}

.pitch-app__text {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 1rem;
    padding-bottom: 3.5rem;
}

.pitch-app__title {
    margin: 0;
    font-size: var(--es-fs-title);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.12;
    text-wrap: balance;
    overflow-wrap: normal;
}

.pitch-app__lead {
    max-width: 58ch;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
}

.pitch-app__lead a {
    color: var(--es-brand-strong);
}

.pitch-app__stores {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.pitch-app__device {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.pitch-app__device .phone-frame {
    width: min(100%, 280px);
    height: 430px;
    aspect-ratio: auto;
    padding-bottom: 0;
    border-radius: 44px 44px 0 0;
}

.pitch-app__device .phone-frame__screen {
    border-radius: 34px 34px 0 0;
}

.pitch-ticket {
    justify-items: center;
    gap: .9rem;
    padding-top: 3.75rem;
    color: var(--es-ink);
}

/* The 1-2-3 (_OrganizerSteps, shared with "Topluluklar" and the home page): B's three cards,
   the first number in ember. */
.org-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.org-steps__item {
    display: grid;
    align-content: start;
    gap: .75rem;
    padding: 1.75rem;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.org-steps__num {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--es-fill);
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.org-steps__num--lead {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

/* The number with C's status pill at the far end ("Topluluklar", OrganizerStepsModel.ShowStatus). */
.org-steps__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.org-steps__title {
    margin: 0;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.025em;
}

.org-steps__text {
    margin: 0;
    color: var(--es-muted);
    line-height: 1.6;
}

/* The organizer FAQ (_OrganizerFaq): B's two columns of questions on a wide screen. Each column
   keeps its own height, so opening one fold never stretches the one beside it. */
.faq--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: .75rem;
    max-width: 1040px;
    margin-inline: auto;
}

/* The close: the footer's call band (job 3.4), standing in for it on this page. */
.pitch-close {
    margin: 2rem 0 0;
}

@media (max-width: 1199.98px) {
    .pitch-card--5,
    .pitch-card--7 {
        grid-column: span 6;
    }

    /* Half a row is too narrow for kiosk, badge and door side by side: the badge goes under. */
    .pitch-mock--door {
        flex-wrap: wrap;
    }

    .pitch-badge {
        flex-basis: 100%;
        order: 3;
    }
}

@media (max-width: 991.98px) {
    .pitch-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .pitch-card,
    .pitch-card--5,
    .pitch-card--7 {
        grid-column: span 6;
    }

    .pitch-card--12 {
        grid-column: span 12;
    }

    /* The strip turns down the page: icon beside the words, the thread running between icons. */
    .pitch-flow__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: .75rem;
    }

    .pitch-flow__step {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: .9rem;
        row-gap: 0;
        padding: .6rem .5rem;
    }

    .pitch-flow__icon {
        grid-row: span 2;
        margin: 0;
    }

    .pitch-flow__step:not(:last-child)::after {
        top: calc(.6rem + 46px);
        bottom: -.6rem;
        left: calc(.5rem + 21px);
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(var(--es-brand-border) 50%, transparent 0) 0 0 / 2px 8px;
    }

    .pitch-app {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .pitch-app__text {
        padding-bottom: 0;
    }

    .org-steps {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .pitch-card,
    .pitch-card--5,
    .pitch-card--7 {
        grid-column: span 12;
        padding: 1.4rem;
    }

    .pitch-card--split {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .pitch-section {
        padding-block: 2.25rem;
    }

    .pitch-head {
        margin-bottom: 1.75rem;
    }

    .pitch-app {
        margin-block: 2rem;
        padding: 2rem 1.4rem 0;
        border-radius: var(--es-r-xl);
    }

    .pitch-app__stores .btn {
        flex: 1 1 auto;
    }

    .pitch-app__device .phone-frame {
        height: 360px;
    }

    .faq--split {
        grid-template-columns: minmax(0, 1fr);
    }

    .pitch-hero__actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* A phone: the portal loses its side menu and the floating note, which would cover it. */
@media (max-width: 575.98px) {
    .pitch-hero__media {
        padding: 1rem;
        border-radius: var(--es-r-xl);
    }

    .pitch-portal {
        grid-template-columns: minmax(0, 1fr);
    }

    .pitch-portal__side,
    .pitch-float {
        display: none;
    }

    /* The display size on a phone would leave "Topluluğunuzun" wider than the column, and the
       title may no longer break inside a word (UIhataları 19): the section title's size here. */
    .pitch-hero__title {
        font-size: var(--es-fs-title);
    }

    .pitch-more {
        padding: var(--es-space-4);
    }
}

/* ------------------------------------------------- "Topluluklar" (plan job 5.2, design.md §7.6)

   /organizations (Views/Organizations/Index.cshtml): the directory alone (UIhataları 23,
   decision K1) — the page head with the "Etkinlikler | Topluluklar" switch, the search band's pill
   field (.home-search__*, job 5.1) with its suggestions, the community cards (.org-pick in
   .org-picks--grid: a grid on every width, never a sideways row) and the pager. The organizer
   pitch it used to carry is on /organizatorler (.pitch-*). Every link that changes the list ends
   in #dizin (scroll-margin below).

   Covers are dark in both themes (the --es-scheme-dark pin), as every picture on the site. */

/* "Sıradaki: …" — on every directory card: B's soft row with C's dot. */
.org-pick__next {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-width: 0;
    padding: .55rem .75rem;
    border-radius: 14px;
    background: var(--es-fill);
    color: var(--es-ink);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.35;
}

.org-pick__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--es-brand);
}

/* The list under the page head: no band of its own any more, since it is the page. The header
   is sticky, so a link ending in #dizin stops short of it. */
.orgs-dir {
    scroll-margin-top: 88px;
}

/* The home page's search band pill, as wide as a comfortable line, with the suggestions under
   its field. */
.orgs-dir__search {
    max-width: 720px;
    margin: 0 0 var(--es-space-6);
}

.orgs-dir__searched {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-1) var(--es-space-2);
    margin: 0 0 var(--es-space-4);
    color: var(--es-ink);
    font-size: var(--es-fs-sm);
    font-weight: 600;
}

.orgs-dir .pager--standalone {
    margin: var(--es-space-6) 0 0;
}

/* One field and one button: on a tablet they stay on one line (the search band wraps below
   992px because it also has two selects); a phone stacks them as the band does. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .home-search__form.orgs-dir__search {
        flex-wrap: nowrap;
    }

    .orgs-dir__search .home-search__field {
        flex-basis: auto;
    }

    .orgs-dir__search .home-search__submit {
        flex: none;
    }
}

/* The directory's cards: the home page's .org-pick in a grid that stays a grid — a directory is
   read down the page, not swiped through — with B's city pill over the cover. */
.org-picks--grid .org-pick {
    position: relative;
}

h3.org-pick__name {
    margin: 0;
}

.org-pick__place {
    color-scheme: var(--es-scheme-dark);
    position: absolute;
    top: .7rem;
    left: .7rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: calc(100% - 1.4rem);
    padding: .25rem .7rem;
    border-radius: var(--es-r-pill);
    background: var(--es-glass);
    -webkit-backdrop-filter: var(--es-glass-filter);
    backdrop-filter: var(--es-glass-filter);
    color: var(--es-ink);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.org-pick__place svg {
    flex: none;
    width: 13px;
    height: 13px;
}

@media (max-width: 767.98px) {
    /* The home page turns .org-picks into a sideways row here; the directory stays a grid. */
    .org-picks--grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-columns: auto;
        overflow-x: visible;
        scroll-snap-type: none;
        padding-bottom: 0;
    }
}

@media (max-width: 575.98px) {
    .org-picks--grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =============================================================================================
   SEARCH (plan job 5.3, design.md §7.2, DD-13)
   =============================================================================================

   /search (Views/Search/Index.cshtml): site2-Search-B with site2-Search-C's additions. Most of it
   is shared — the home page's search band (.home-search__*, job 5.1) as B's pill field, the
   category chips with their drawn pictures (.chips, .cat-art--chip, job 4.15), the status tabs
   (_StatusTabs), the show-card with its chip (job 4.8), "Topluluklar"'s community card
   (.org-pick in .org-picks--grid, _OrgPick, job 5.2) and the pager (job 4.6). What is here is only
   what this page has:

     .search-panel     B's header panel: the count capsule, the two-tone title, one sentence, the
                       pill field, the chips — on the soft fill, centred, with two of the
                       categories' pictures beside it on a wide screen (decoration).
     .search-results   the tabs and the range on one row, then the lists; #sonuclar is where every
                       page link lands.
     .search-grid      B's four columns of cards (16:9 covers, A-3); --ended is C's denser grey
                       grid under B's "Sona erenler" head (.search-ended).
     .search-org-row   C's community row, which replaces the cards below 576px.

   Covers and the category pictures are dark in both themes, as every picture on the site. Nothing
   here moves beyond the shared cards' own lift, so the reduced-motion block has nothing to add. */
.search-panel {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    margin: .5rem 0 3rem;
    padding: 4.5rem 2rem 3.5rem;
    overflow: hidden;
    border-radius: var(--es-r-band);
    background: var(--es-fill);
    text-align: center;
}

/* B's covers, upright (UIhataları 40), as the categories' own pictures: a wide screen's ornament only, where the
   panel has room beside its column of words. */
.search-panel__art {
    position: absolute;
    display: none;
    width: 140px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: var(--es-card-shadow-hover);
    pointer-events: none;
}

.search-panel__art--start {
    top: 4rem;
    left: 5%;
}

.search-panel__art--end {
    top: 2.5rem;
    right: 6%;
    width: 124px;
}

@media (min-width: 1200px) {
    .search-panel__art {
        display: block;
    }
}

/* "214 etkinlik · 86 topluluk": B's filled ember capsule over the title. */
.search-panel__count {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: .35rem 1.05rem;
    border-radius: var(--es-r-pill);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-size: .875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.search-panel__title {
    position: relative;
    max-width: 900px;
    margin: 0;
    font-size: var(--es-fs-display);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.04;
    color: var(--es-ink);
    /* A searched word is whatever was typed, up to a hundred letters without a space. */
    overflow-wrap: anywhere;
}

/* B's second line in the faint ink: "tek listede.", "etkinlikleri", the searched words. */
.search-panel__dim {
    display: block;
    color: var(--es-faint);
}

.search-panel__lead {
    position: relative;
    max-width: 40rem;
    margin: 0;
    color: var(--es-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.search-panel__form {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin-top: .5rem;
    text-align: left;
}

/* B's pill, wherever the field, the city and the button share one row; the band's own rounded
   card once they wrap (below 992px, .home-search__*). */
@media (min-width: 992px) {
    .search-panel__form {
        padding-left: .75rem;
        border-radius: var(--es-r-pill);
    }

    .search-panel__form .home-search__submit {
        border-radius: var(--es-r-pill);
    }

    .search-panel__form .home-search__field:focus-within {
        border-radius: var(--es-r-pill);
    }
}

.search-panel__chips {
    position: relative;
    justify-content: center;
    margin: .25rem 0 0;
}

/* On the panel's fill a chip in the fill would vanish: B's chips are the surface there. */
.search-panel__chips .chip:not(.is-active) {
    background: var(--es-surface);
}

.search-panel__chips .chip:not(.is-active):hover {
    background: var(--es-surface);
}

/* The count inside the chosen chip: the ember chip's own ink as the capsule, so it still reads. */
.chip.is-active .count-badge--quiet {
    background: var(--es-brand-ink);
    color: var(--es-brand);
}

/* The filters that narrow the list, under the form (UIhataları 78): "Ankara ×", "Müzik ×". Each is
   a plain link that lifts its filter, so it works with script off; brand-soft so a set filter is
   seen at a glance rather than read as a placeholder. */
.search-filters {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--es-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--es-space-2);
    min-height: var(--es-h-btn-sm);
    max-width: 100%;
    padding: 0 var(--es-space-1) 0 var(--es-space-3);
    border: 1px solid var(--es-brand-border);
    border-radius: var(--es-r-pill);
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-size: var(--es-fs-sm);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: border-color var(--es-dur-fast) var(--es-ease);
}

.search-filter > svg {
    flex: none;
    width: 1rem;
    height: 1rem;
}

.search-filter__x {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--es-surface);
    transition: background-color var(--es-dur-fast) var(--es-ease), color var(--es-dur-fast) var(--es-ease);
}

.search-filter__x > svg {
    width: .875rem;
    height: .875rem;
}

.search-filter:hover {
    color: var(--es-brand-strong);
    border-color: var(--es-brand);
}

.search-filter:hover .search-filter__x,
.search-filter:focus-visible .search-filter__x {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

/* The city select once a city is set (UIhataları 78): transparent and borderless on a wide
   screen, "Ankara" read as a placeholder. Filled like the filter chip under it. Beats the
   phone rule's fill (same selector inside the max-width block) by its extra class. */
.home-search__select.form-select.is-set {
    border-color: var(--es-brand-border);
    background-color: var(--es-brand-soft);
    color: var(--es-brand-strong);
}

.search-results {
    margin-bottom: 2rem;
    scroll-margin-top: 88px;
}

.search-results__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: 1.75rem;
}

.search-results__bar .tabs {
    margin-bottom: 0;
}

/* A first page with nothing still to come: one line, then the archive. */
.search-results__note {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--es-muted);
    font-weight: 600;
}

.search-results__note svg {
    flex: none;
    width: 18px;
    height: 18px;
}

.search-grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.search-grid--ended {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.1rem;
}

.search-ended {
    margin-top: 4rem;
}

.search-ended__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-bottom: 1.25rem;
}

.search-ended__title {
    margin: 0;
    font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--es-ink);
}

.search-ended__lead {
    color: var(--es-muted);
    font-size: .875rem;
}

.search-results .pager--standalone {
    margin: 3.5rem 0 0;
}

/* C's community row: the logo in a circle, the name, the facts, an arrow. Shown instead of the
   cards on a phone (below); the list is one card, the rows divided by the hairline. */
.search-orgs__rows {
    display: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.search-orgs__rows > li + li {
    border-top: 1px solid var(--es-line);
}

.search-org-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 68px;
    padding: .8rem 1rem;
    color: var(--es-body);
    text-decoration: none;
}

.search-org-row:hover {
    background: var(--es-fill);
    color: var(--es-body);
}

/* Inside the clipped list an outside ring would be cut off; it is drawn just inside the row. */
.search-org-row:focus-visible {
    outline-offset: -3px;
}

/* Contained on its white tile, never cropped (design.md §4.8). */
.search-org-row__logo {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--es-paper);
    box-shadow: 0 0 0 1px var(--es-line);
}

.search-org-row__logo--initials {
    display: grid;
    place-items: center;
    background: var(--es-brand);
    color: var(--es-brand-ink);
    box-shadow: none;
    font-family: var(--es-font-display);
    font-size: .85rem;
    font-weight: 700;
}

.search-org-row__text {
    display: grid;
    flex: 1 1 auto;
    gap: .15rem;
    min-width: 0;
}

.search-org-row__name {
    margin: 0;
    font-family: var(--es-font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.search-org-row__meta {
    color: var(--es-muted);
    font-size: .8rem;
}

.search-org-row__go {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--es-line);
    border-radius: 50%;
    color: var(--es-muted);
}

.search-org-row__go svg {
    width: 16px;
    height: 16px;
}

.search-org-row:hover .search-org-row__go {
    border-color: var(--es-brand-border);
    color: var(--es-brand);
}

@media (max-width: 1199.98px) {
    .search-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .search-grid--ended {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.1rem;
    }

    .search-grid--ended {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .search-panel {
        gap: 1rem;
        margin-bottom: 2rem;
        padding: 2.5rem 1rem 2rem;
        border-radius: var(--es-r-xl);
    }

    .search-panel__lead {
        font-size: 1rem;
    }

    .search-grid--ended {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-ended {
        margin-top: 3rem;
    }
}

/* A phone: one event card to a row, as on every shelf (an event card does not read two-up), and
   the communities as C's rows. */
@media (max-width: 575.98px) {
    .search-grid,
    .search-grid--ended {
        grid-template-columns: minmax(0, 1fr);
    }

    .search-orgs__cards {
        display: none;
    }

    .search-orgs__rows {
        display: block;
    }
}

/* =============================================================================================
   ERROR PAGE (plan job 5.10, §8 B-22, design site2-Error-C; B for decoration only)
   =============================================================================================

   /error/{statusCode?} (Views/Shared/Error.cshtml), every 4xx a browser is re-executed with and
   every 5xx. Dark in both themes: the layout puts .es-always-dark on <html> when the page asks
   for it (ViewData["AlwaysDark"]), so the header, the footer and the page are one dark stage,
   whatever the picker says — the picker itself still works for every other page. A browser
   without light-dark() has no dark side at all (--es-scheme-dark is "light" there) and gets the
   same stage on paper.

     .error-stage   C's stage: two ember beams from above with a glow between them, the arc and
                    the floor's three lines — pure CSS, aria-hidden — the status as a giant
                    outlined number, the sentence, the search band (.home-search__*, job 5.1),
                    the request id of a 5xx with its copy button, and the way forward.
                    --plain (404), --quiet (403, other 4xx), --brand (429), --bad (5xx) only
                    change the number's stroke and the beams' hue.

   The beams breathe slowly; the reduced-motion block at the end of the file stills them. */
:root.es-always-dark,
:root.es-always-dark[data-theme] {
    color-scheme: var(--es-scheme-dark);
}

.error-stage {
    --error-stroke: var(--es-ink);
    --error-beam: var(--es-stage-beam);
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: min(54rem, calc(100svh - 7rem));
    margin: .5rem 0 3rem;
    padding: 5rem 1.5rem 11rem;
    overflow: hidden;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-band);
    background: var(--es-page);
    text-align: center;
}

.error-stage--quiet {
    --error-stroke: var(--es-muted);
}

.error-stage--brand {
    --error-stroke: var(--es-brand);
}

.error-stage--bad {
    --error-stroke: var(--es-bad);
    --error-beam: var(--es-bad-ring);
    border-color: var(--es-bad-box-line);
}

/* C's two beams and the glow between them. */
.error-stage__beams {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(38rem 24rem at 50% 42%, var(--es-stage-glow), transparent 70%),
        conic-gradient(from 150deg at 18% -6%, transparent 0deg, var(--error-beam) 9deg 19deg, transparent 27deg 360deg),
        conic-gradient(from 182deg at 82% -6%, transparent 0deg, var(--error-beam) 8deg 18deg, transparent 26deg 360deg);
    animation: es-stage-breathe 6s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes es-stage-breathe {
    from {
        opacity: .72;
    }

    to {
        opacity: 1;
    }
}

/* The proscenium arc, rising from the floor. */
.error-stage__arc {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: min(760px, 110%);
    aspect-ratio: 2 / 1;
    border: 2px solid var(--es-stage-arc);
    border-bottom: 0;
    border-radius: 760px 760px 0 0;
    translate: -50% 0;
    pointer-events: none;
}

/* The stage's floor: three lines of the ember going down into the dark. */
.error-stage__floor {
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    height: 9rem;
    background: linear-gradient(180deg,
        transparent 0 18%, var(--es-cat-ember) 18% 30%,
        transparent 30% 44%, var(--es-cat-coal) 44% 56%,
        transparent 56% 70%, var(--es-cat-smoke) 70% 82%, transparent 82%);
    pointer-events: none;
}

.error-stage__body {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    width: 100%;
    max-width: 40rem;
}

/* C's giant number: only its outline, with the ember's glow behind it. The kicker says the
   status in words; this is the picture of it (aria-hidden in the view). Unbounded draws a "4"
   from overlapping contours, which a bare stroke shows as lines across the glyph: the stroke is
   painted first and the stage's own ground filled over it, so only the outer edge remains (half
   the stroke's width, hence 4px for C's 2px line). */
.error-stage__code {
    margin: 0;
    color: var(--es-page);
    paint-order: stroke fill;
    font-family: var(--es-font-display);
    font-size: clamp(6.5rem, 17vw, 15rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.05em;
    line-height: .9;
    -webkit-text-stroke: 4px var(--error-stroke);
    text-shadow: 0 0 60px var(--es-stage-glow);
    user-select: none;
}

.error-stage__title {
    margin: 0;
    color: var(--es-ink);
    font-size: var(--es-fs-title);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.1;
}

.error-stage__lead {
    max-width: 34rem;
    margin: 0;
    color: var(--es-muted);
    font-size: 1.1rem;
    line-height: 1.6;
}

.error-stage__note {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--es-body);
    font-weight: 600;
}

.error-stage__note svg {
    width: 18px;
    height: 18px;
    color: var(--es-brand);
}

.error-stage__search {
    width: 100%;
    text-align: left;
}

/* C's single row from 576px up: the shared band wraps below 992px for its selects, which this
   form has none of. */
@media (min-width: 576px) {
    .error-stage__search {
        flex-wrap: nowrap;
    }

    .error-stage__search .home-search__field {
        flex-basis: auto;
    }

    .error-stage__search .home-search__submit {
        flex: none;
    }
}

/* The request id of a 5xx: C's inset box with the number and "Kopyala". */
.error-stage__ticket {
    display: grid;
    gap: .6rem;
    width: 100%;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
    text-align: left;
}

.error-stage__ticket-label {
    margin: 0;
    color: var(--es-muted);
    font-size: .875rem;
}

.error-stage__ticket-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.error-stage__ticket-id {
    min-width: 0;
    color: var(--es-ink);
    font-size: 1rem;
    letter-spacing: .04em;
    overflow-wrap: anywhere;
    user-select: all;
}

.error-stage__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

@media (max-width: 575.98px) {
    .error-stage {
        min-height: 0;
        margin-top: 0;
        padding: 3.5rem 1rem 8rem;
        border-radius: var(--es-r-xl);
    }

    .error-stage__floor {
        height: 6rem;
    }

    .error-stage__actions .btn {
        flex: 1 1 100%;
    }
}

/* =============================================================================================
   DOCUMENT PAGES: /developers, /terms, /privacy, /destek (plan jobs 5.8, 5.9)
   =============================================================================================

   Three long reading pages that share one frame: site2-Dev-B and site2-Legal-B, with C's numbers,
   active contents line, version timeline, "Ne döner" column and phone contents. /destek has no
   canvas design and speaks the same language (plan job 5.9).

     .doc-hero       B's soft panel: --center for the legal texts and /destek (tabs, two-tone
                     title, version facts), --split for /developers (text left, a request and its
                     answer right with two floating facts — decoration, wide screens only).
     .doc-layout     the columns: contents | main on /developers; contents | text | aside on the
                     legal texts and /destek (--three; --no-toc, --no-aside drop a column). The
                     aside drops under the text between 992 and 1199px, and everything stacks
                     below 992px.
     .page-toc       _PageToc: B's sticky card of numbered links with C's ember line on the section
                     in view ([data-section-nav] in site.js); below 992px a sticky glass row that
                     scrolls sideways, like the event page's section bar.
     .doc-card       a section card (Bootstrap's .card underneath) with its .kicker number and title.
     .code-block     a code sample, pinned dark in both themes (.es-dark) as a terminal is, with a
                     label and the shared [data-copy] button (rendered hidden, shown by script).
     .doc-*          the developer page's pieces: steps, the two ways in, cache tiles, endpoint and
                     error rows (a real table that becomes cards below 768px), type cards, the
                     application button beside a drawn site, the examples' switch.
     .legal-*        the legal text's card and C's version timeline.
     .support-write  /destek's "Bize yazın" card.

   Nothing here moves on its own, so the reduced-motion block has nothing to add. */

/* ---- hero */

.doc-hero {
    position: relative;
    margin: .5rem 0 2.5rem;
    padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.25rem, .5rem + 4vw, 4rem);
    overflow: hidden;
    border-radius: var(--es-r-band);
    background: var(--es-fill);
}

.doc-hero--center {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    text-align: center;
}

.doc-hero--split {
    display: grid;
    align-items: center;
    gap: 2.5rem;
}

@media (min-width: 992px) {
    .doc-hero--split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.doc-hero__text {
    display: grid;
    justify-items: start;
    gap: 1.25rem;
    min-width: 0;
}

/* B's filled ember capsule over the title ("Geliştiriciler · v1", "Destek"). */
.doc-hero__tag {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: .35rem 1.05rem;
    border-radius: var(--es-r-pill);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-size: .875rem;
    font-weight: 700;
}

.doc-hero__title {
    max-width: 900px;
    margin: 0;
    font-size: var(--es-fs-display);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.04;
    color: var(--es-ink);
}

/* B's second word in the faint ink. */
.doc-hero__dim {
    color: var(--es-faint);
}

.doc-hero__lead {
    max-width: 40rem;
    margin: 0;
    color: var(--es-muted);
    font-size: 1.1rem;
    line-height: 1.6;
}

.doc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* C's address line under the buttons: where every path on the page starts. */
.doc-hero__base {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    margin: 0;
    color: var(--es-muted);
    font-size: .85rem;
}

.doc-hero__base svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--es-brand);
}

.doc-hero__base code {
    overflow-wrap: anywhere;
}

/* The two texts as B's tabs, on the surface over the panel's fill; the chosen one in ink. */
.tabs.doc-hero__tabs {
    margin: 0;
    background: var(--es-surface);
}

.tabs.doc-hero__tabs a.is-active {
    background: var(--es-tab-on);
    color: var(--es-tab-on-ink);
    box-shadow: inset 0 0 0 1px var(--es-tab-on-edge);
}

.doc-hero__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0;
}

/* "Sürüm 2 · 15 Mart 2026 – 1 Eylül 2026 arasında yürürlükteydi" does not fit 390px on one line. */
.doc-hero__facts .pill {
    white-space: normal;
    text-align: left;
}

/* A request and its answer, with two facts floating on it: a wide screen's ornament only. */
.doc-hero__media {
    position: relative;
    display: none;
    min-height: 380px;
}

@media (min-width: 992px) {
    .doc-hero__media {
        display: block;
    }
}

.code-block--hero {
    position: absolute;
    inset: 20px 0 48px 30px;
    padding: 28px;
    border-radius: 28px;
    box-shadow: var(--es-card-shadow-hover);
}

.code-block--hero .code-block__pre {
    padding: 0;
    white-space: pre-wrap;
    overflow: hidden;
}

.doc-float {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1.1rem .55rem .55rem;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-pill);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow-hover);
    color: var(--es-ink);
    font-size: .85rem;
    font-weight: 700;
}

.doc-float--etag {
    left: 0;
    bottom: 8px;
}

.doc-float--limit {
    top: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    padding: .85rem 1.1rem;
    border-radius: var(--es-r-lg);
}

.doc-float__figure {
    font-family: var(--es-font-display);
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--es-brand);
}

.doc-float__unit {
    font-size: .72rem;
    color: var(--es-muted);
}

/* ---- columns */

.doc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "toc" "main" "aside";
    align-items: start;
    gap: 24px;
    margin-bottom: 4rem;
}

.doc-layout > .page-toc {
    grid-area: toc;
}

.doc-layout > .doc-main,
.doc-layout > .legal-article {
    grid-area: main;
}

.doc-layout > aside {
    grid-area: aside;
}

@media (min-width: 992px) {
    .doc-layout {
        grid-template-columns: 16rem minmax(0, 1fr);
        grid-template-areas: "toc main";
    }

    .doc-layout--three {
        grid-template-areas: "toc main" "toc aside";
    }

    .doc-layout--three.doc-layout--no-aside {
        grid-template-areas: "toc main";
    }

    .doc-layout--three.doc-layout--no-toc {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main" "aside";
    }
}

@media (min-width: 1200px) {
    .doc-layout--three {
        grid-template-columns: 15.5rem minmax(0, 1fr) 18rem;
        grid-template-areas: "toc main aside";
    }

    .doc-layout--three.doc-layout--no-aside {
        grid-template-columns: 15.5rem minmax(0, 1fr);
        grid-template-areas: "toc main";
    }

    .doc-layout--three.doc-layout--no-toc {
        grid-template-columns: minmax(0, 1fr) 18rem;
        grid-template-areas: "main aside";
    }
}

.doc-main {
    display: grid;
    gap: 24px;
    min-width: 0;
}

/* Whatever a contents link lands on clears the sticky header — and, below 992px, the sticky
   contents row under it. */
.doc-section,
.doc-type,
.legal-article .prose__heading {
    scroll-margin-top: calc(var(--es-bar-h) + 1.5rem);
}

@media (max-width: 991.98px) {
    .doc-section,
    .doc-type,
    .legal-article .prose__heading {
        scroll-margin-top: calc(var(--es-bar-h) + 5rem);
    }
}

@media (max-width: 767.98px) {
    .doc-section,
    .doc-type,
    .legal-article .prose__heading {
        scroll-margin-top: calc(60px + 5rem);
    }
}

/* ---- contents (_PageToc) */

.page-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-toc__link {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 40px;
    padding: .45rem .75rem .45rem .5rem;
    border-radius: 14px;
    color: var(--es-muted);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.page-toc__link:hover {
    background: var(--es-fill);
    color: var(--es-ink);
}

.page-toc__num {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--es-fill);
    color: var(--es-muted);
    font-size: .7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The section in view: B's soft ember row and filled number, with C's ember line on its edge. */
.page-toc__link.is-active {
    background: var(--es-brand-soft);
    color: var(--es-ink);
    box-shadow: inset 2px 0 0 var(--es-brand);
}

.page-toc__link.is-active .page-toc__num {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

@media (min-width: 992px) {
    .page-toc {
        position: sticky;
        top: calc(var(--es-bar-h) + 1.5rem);
        max-height: calc(100vh - var(--es-bar-h) - 3rem);
        overflow-y: auto;
        padding: 14px;
        border: 1px solid var(--es-glow-line);
        border-radius: var(--es-r-xl);
        background: var(--es-surface);
        box-shadow: var(--es-card-shadow);
    }

    .page-toc__title {
        display: block;
        padding: .5rem .75rem;
        color: var(--es-muted);
        font-size: .78rem;
        font-weight: 700;
    }

    .page-toc__list {
        display: grid;
        gap: 2px;
    }
}

/* C's phone contents: a sticky glass row under the header, the current entry kept in view. */
@media (max-width: 991.98px) {
    .page-toc {
        position: sticky;
        top: calc(var(--es-bar-h) + .5rem);
        z-index: 5;
        padding: 5px;
        border: 1px solid var(--es-glow-line);
        border-radius: var(--es-r-pill);
        background: var(--es-glass);
        -webkit-backdrop-filter: var(--es-glass-filter);
        backdrop-filter: var(--es-glass-filter);
        box-shadow: var(--es-shadow-1);
    }

    .page-toc__title {
        display: none;
    }

    .page-toc__list {
        display: flex;
        gap: 2px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .page-toc__list::-webkit-scrollbar {
        display: none;
    }

    .page-toc__link {
        min-height: 44px;
        padding: 0 1rem 0 .5rem;
        border-radius: var(--es-r-pill);
        white-space: nowrap;
    }

    .page-toc__link.is-active {
        box-shadow: inset 0 0 0 1px var(--es-brand-border);
    }
}

@media (max-width: 767.98px) {
    .page-toc {
        top: calc(60px + .5rem);
    }
}

/* ---- section cards */

.doc-card {
    display: grid;
    align-content: start;
    gap: 1rem;
    min-width: 0;
    padding: clamp(1.35rem, .9rem + 1.6vw, 2.25rem);
    border-radius: var(--es-r-xl);
}

/* The section's number sits close over its title (C's "01"). */
.doc-card > .kicker,
.doc-card__head .kicker,
.doc-section__head > .kicker {
    margin-bottom: -.55rem;
    font-variant-numeric: tabular-nums;
}

.doc-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1rem;
}

.doc-card__head > div:first-child {
    display: grid;
    gap: 1rem;
}

.doc-card__title {
    margin: 0;
    font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--es-ink);
}

.doc-card__title--sm {
    font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem);
}

.doc-card__text {
    margin: 0;
    line-height: 1.65;
}

.doc-card__text code,
.doc-step__text code,
.doc-rows code,
.doc-choice__text code {
    overflow-wrap: anywhere;
}

.doc-card__note {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--es-line);
    color: var(--es-muted);
    font-size: .935rem;
    line-height: 1.6;
}

.doc-card__meta {
    margin: 0;
    color: var(--es-muted);
    font-size: .85rem;
    font-weight: 600;
}

.doc-card__prefix code {
    padding: 0;
    background: none;
    color: inherit;
}

.doc-section__head {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.doc-section__lead {
    max-width: 62ch;
    margin: -.25rem 0 0;
    color: var(--es-muted);
}

.doc-section__note {
    max-width: 72ch;
    margin: 1rem 0 0;
    color: var(--es-muted);
    font-size: .935rem;
    line-height: 1.6;
}

/* ---- code */

.code-block {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    background: var(--es-page);
    color: var(--es-body);
}

.code-block__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 44px;
    padding: .3rem .4rem .3rem 1rem;
    border-bottom: 1px solid var(--es-line);
}

.code-block__label {
    color: var(--es-faint);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.code-block__copy {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 36px;
    padding: 0 .85rem;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-pill);
    background: transparent;
    color: var(--es-body);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
}

.code-block__copy:hover {
    background: var(--es-fill);
    color: var(--es-ink);
}

.code-block__copy.is-copied {
    border-color: var(--es-ok-border);
    color: var(--es-ok);
}

.code-block__copy svg {
    width: 15px;
    height: 15px;
}

@media (pointer: coarse) {
    .code-block__copy {
        min-height: 44px;
    }
}

.code-block__pre {
    margin: 0;
    padding: 1.1rem 1.25rem;
    overflow-x: auto;
    color: var(--es-body);
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .84rem;
    line-height: 1.7;
    white-space: pre;
    tab-size: 2;
}

.code-block__pre code {
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

.code-block .tk {
    color: var(--es-code-key);
}

.code-block .ts {
    color: var(--es-code-string);
}

.code-block .tn {
    color: var(--es-code-number);
}

.code-block .tc {
    color: var(--es-code-comment);
}

/* ---- 01 Başlarken: B's three step cards */

.doc-steps {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .doc-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.doc-step {
    display: grid;
    align-content: start;
    gap: .75rem;
    padding: 22px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.doc-step__num {
    font-family: var(--es-font-display);
    font-size: 1.1rem;
    font-weight: 800;
}

.doc-step__num--plain {
    background: var(--es-surface);
    box-shadow: inset 0 0 0 1px var(--es-line);
}

.doc-step__title {
    font-family: var(--es-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--es-ink);
}

.doc-step__text {
    color: var(--es-muted);
    font-size: .9rem;
    line-height: 1.55;
}

/* ---- 02–03: two cards side by side where there is room */

.doc-pair {
    display: grid;
    gap: 24px;
}

@media (min-width: 1200px) {
    .doc-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.doc-choice {
    display: grid;
    gap: .45rem;
    padding: 1rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--es-r-lg);
}

.doc-choice--ok {
    background: var(--es-ok-soft);
    border-color: var(--es-ok-border);
}

.doc-choice--warn {
    background: var(--es-warn-soft);
    border-color: var(--es-warn-border);
}

.doc-choice__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.doc-choice__title {
    color: var(--es-ink);
    font-weight: 700;
}

.doc-choice__text {
    color: var(--es-body);
    font-size: .875rem;
    line-height: 1.6;
}

/* ---- 04 Önbellek ve sınırlar: B's three tiles */

.doc-tiles {
    display: grid;
    gap: 16px;
}

@media (min-width: 768px) {
    .doc-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.doc-tile {
    display: grid;
    align-content: start;
    gap: .65rem;
    padding: 26px;
    border: 1px solid transparent;
    border-radius: var(--es-r-xl);
    font-size: .875rem;
    line-height: 1.55;
}

.doc-tile__figure {
    font-family: var(--es-font-display);
    font-size: clamp(2.3rem, 1.9rem + 1.4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

/* A header named inside a tile reads as part of the sentence, in the tile's own ink. */
.doc-tile code {
    padding: 0;
    background: none;
    color: inherit;
    font-weight: 600;
}

/* Ink in both themes (pinned dark), with the ember edge that keeps it apart on an ink page. */
.doc-tile--ink {
    background: var(--es-surface);
    border-color: var(--es-glow-line);
    color: var(--es-muted);
}

.doc-tile--ink .doc-tile__figure {
    color: var(--es-ink);
}

.doc-tile--soft {
    background: var(--es-brand-soft);
    border-color: var(--es-brand-border);
    color: var(--es-brand-deep);
}

/* Ember in both themes — the call band's deep ember (--es-cta-from), on which white reads at
   5.2:1; the bright dark-theme ember would not carry white text. */
.doc-tile--brand {
    background: var(--es-cta-from);
    color: var(--es-on-ember-soft);
}

.doc-tile--brand .doc-tile__figure {
    color: var(--es-on-ember);
}

/* ---- 05 Uçlar, 07 Hatalar: B's rows as a real table with C's column heads */

.doc-rows {
    width: 100%;
    margin: -8px 0;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.doc-rows th {
    padding: 0 1rem;
    color: var(--es-faint);
    font-size: .75rem;
    font-weight: 700;
    text-align: left;
}

.doc-rows td {
    padding: .8rem 1rem;
    background: var(--es-fill);
    vertical-align: top;
}

.doc-rows td:first-child {
    border-radius: var(--es-r) 0 0 var(--es-r);
}

.doc-rows td:last-child {
    border-radius: 0 var(--es-r) var(--es-r) 0;
}

.doc-rows__method,
.doc-rows__path {
    width: 1%;
    white-space: nowrap;
}

.doc-rows__summary {
    display: block;
    color: var(--es-body);
    font-size: .9rem;
    line-height: 1.55;
}

.doc-rows__returns {
    display: block;
    margin-top: .35rem;
    color: var(--es-muted);
    font-size: .8rem;
}

.doc-method {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 .6rem;
    border-radius: var(--es-r-pill);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.doc-path {
    color: var(--es-ink);
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .84rem;
    font-weight: 600;
}

.doc-params {
    display: grid;
    gap: .4rem;
    margin: .65rem 0 0;
    padding-top: .65rem;
    border-top: 1px solid var(--es-line);
}

.doc-params__row {
    display: grid;
    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
    gap: .75rem;
}

.doc-params dt {
    font-weight: 500;
}

.doc-params dd {
    margin: 0;
    color: var(--es-muted);
    font-size: .85rem;
    line-height: 1.5;
}

/* Hatalar: B's outlined rows instead of filled ones. */
.doc-rows--lined td {
    background: transparent;
    border-top: 1px solid var(--es-line);
    border-bottom: 1px solid var(--es-line);
    vertical-align: middle;
}

.doc-rows--lined td:first-child {
    border-left: 1px solid var(--es-line);
}

.doc-rows--lined td:last-child {
    border-right: 1px solid var(--es-line);
}

.doc-status {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 32px;
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.doc-status--bad {
    background: var(--es-bad-soft);
    color: var(--es-bad);
}

.doc-status--warn {
    background: var(--es-warn-soft);
    color: var(--es-warn);
}

.doc-status--brand {
    background: var(--es-brand-soft);
    color: var(--es-brand);
}

.doc-status--muted {
    background: var(--es-fill-2);
    color: var(--es-ink);
}

/* Below 768px a three-column table cannot be read across: each row becomes a card, the method
   and path on one line and what it returns under them. The heads stay for a screen reader. */
@media (max-width: 767.98px) {
    .doc-rows,
    .doc-rows tbody,
    .doc-rows tr,
    .doc-rows td {
        display: block;
        width: auto;
    }

    .doc-rows {
        margin: 0;
    }

    .doc-rows thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .doc-rows tbody {
        display: grid;
        gap: 8px;
    }

    .doc-rows tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: .5rem .75rem;
        padding: .9rem 1rem;
        border-radius: var(--es-r);
        background: var(--es-fill);
    }

    .doc-rows td,
    .doc-rows td:first-child,
    .doc-rows td:last-child {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        white-space: normal;
    }

    .doc-rows__what {
        grid-column: 1 / -1;
    }

    .doc-path {
        overflow-wrap: anywhere;
    }

    .doc-rows--lined tr {
        background: transparent;
        box-shadow: inset 0 0 0 1px var(--es-line);
    }

    .doc-params__row {
        grid-template-columns: minmax(0, 1fr);
        gap: .15rem;
    }
}

/* ---- 06 Veri şekilleri: B's type cards */

.doc-types {
    display: grid;
    gap: 16px;
}

@media (min-width: 768px) {
    .doc-types {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .doc-type {
        grid-column: 1 / -1;
    }

    .doc-type--small {
        grid-column: auto;
    }
}

.doc-type {
    display: grid;
    align-content: start;
    gap: .75rem;
    min-width: 0;
    padding: clamp(1.15rem, .9rem + 1vw, 1.6rem);
    border-radius: var(--es-r-xl);
}

.doc-type__name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--es-ink);
}

/* The sentence under the name is the body face: it once sat inside the card's heading and came
   out in Unbounded (plan job 5.8's leftover). */
.doc-type__summary {
    margin: -.35rem 0 .25rem;
    color: var(--es-muted);
    font-size: .875rem;
    line-height: 1.55;
}

.doc-fields {
    display: grid;
    gap: .55rem;
    margin: 0;
}

.doc-field {
    display: grid;
    gap: .3rem;
    min-width: 0;
}

.doc-field__key {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem .75rem;
    margin: 0;
    padding: .45rem .7rem;
    border-radius: 10px;
    background: var(--es-fill);
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
    font-weight: 400;
}

.doc-field__name {
    color: var(--es-ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.doc-field__type {
    color: var(--es-faint);
}

.doc-field__null {
    font-family: var(--es-font-body);
    font-size: .75rem;
}

.doc-field__text {
    margin: 0;
    padding: 0 .2rem;
    color: var(--es-muted);
    font-size: .85rem;
    line-height: 1.5;
}

/* A wide type reads as two columns: the key on the left, its sentence beside it. */
@media (min-width: 992px) {
    .doc-type:not(.doc-type--small) .doc-field {
        grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
        align-items: start;
        gap: .4rem 1rem;
    }

    .doc-type:not(.doc-type--small) .doc-field__text {
        padding-top: .4rem;
    }
}

/* ---- 08 Başvuru düğmesi: the words and the code beside B's drawn site */

.doc-apply {
    gap: 1.5rem;
}

@media (min-width: 1200px) {
    .doc-apply {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        align-items: center;
    }
}

.doc-apply__text {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.doc-browser {
    overflow: hidden;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow-hover);
    color: var(--es-ink);
}

.doc-browser__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border-bottom: 1px solid var(--es-line);
    background: var(--es-fill);
}

.doc-browser__bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--es-line-strong);
}

.doc-browser__url {
    flex: 1;
    max-width: 240px;
    height: 22px;
    margin-left: 14px;
    border-radius: 7px;
    background: var(--es-surface);
}

.doc-browser__page {
    display: grid;
    justify-items: start;
    gap: .75rem;
    padding: 26px;
}

.doc-browser__page .pitch-ghost {
    justify-self: stretch;
}

.btn.doc-browser__button {
    margin-top: .5rem;
    pointer-events: none;
}

/* ---- 09 Örnekler: all three with script off; one at a time behind B's switch with it */

.doc-example {
    display: grid;
    gap: .75rem;
    min-width: 0;
}

.doc-example__title {
    margin: 0;
    font-family: var(--es-font-body);
    font-size: .95rem;
    font-weight: 650;
    letter-spacing: 0;
    color: var(--es-ink);
}

.is-tabbed .doc-example__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- /destek: the two legal texts as rows, and "Bize yazın" */

.doc-links {
    display: grid;
    gap: .5rem;
}

@media (min-width: 576px) {
    .doc-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.doc-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 56px;
    padding: .6rem 1rem .6rem .6rem;
    border-radius: var(--es-r);
    background: var(--es-fill);
    color: var(--es-ink);
    font-weight: 600;
    text-decoration: none;
}

.doc-link:hover {
    background: var(--es-fill-2);
    color: var(--es-ink);
}

.doc-link > svg:last-child {
    width: 18px;
    height: 18px;
    margin-left: auto;
    color: var(--es-muted);
}

.doc-link__text {
    min-width: 0;
}

.support-write {
    justify-items: start;
}

@media (min-width: 1200px) {
    .support-write {
        position: sticky;
        top: calc(var(--es-bar-h) + 1.5rem);
    }
}

.support-write__address {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 1.05rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* ---- the legal texts: the text in its card, and C's version timeline */

.legal-article {
    padding: clamp(1.35rem, .8rem + 2.5vw, 3rem);
}

.legal-article .prose {
    margin: 0;
}

.legal-versions {
    gap: .9rem;
}

.legal-versions__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--es-ink);
}

.legal-versions__list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A dot per version on one hairline, the line stopping at the oldest. */
.legal-versions__item {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
}

.legal-versions__item::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 2px;
    left: 9.5px;
    width: 1px;
    background: var(--es-line-strong);
}

.legal-versions__item:last-child::before {
    content: none;
}

.legal-versions__dot {
    width: 12px;
    height: 12px;
    margin: 5px 4px 0;
    border-radius: 50%;
    background: var(--es-line-strong);
}

.legal-versions__item.is-shown .legal-versions__dot {
    background: var(--es-brand);
    box-shadow: 0 0 0 4px var(--es-brand-soft);
}

.legal-versions__body {
    display: grid;
    gap: .2rem;
    min-width: 0;
    padding-bottom: 1.25rem;
}

.legal-versions__item:last-child .legal-versions__body {
    padding-bottom: 0;
}

.legal-versions__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.legal-versions__name {
    font-weight: 700;
    color: var(--es-ink);
}

a.legal-versions__name {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--es-brand);
}

.legal-versions__date {
    color: var(--es-faint);
    font-size: .8rem;
}

.legal-versions__note {
    color: var(--es-muted);
    font-size: .8rem;
    line-height: 1.5;
}

.doc-flash {
    margin-bottom: 1.5rem;
}

.doc-empty {
    margin-bottom: 4rem;
}

.doc-empty .doc-empty__note {
    margin-top: .75rem;
    font-size: .85rem;
}

/* =============================================================================================
   PORTAL: ORGANIZATION SCREENS (plan Stage 7, design.md §8.2, DD-35)
   ============================================================================================= */

/* ------------------------------------------- locked actions (B-16, PortalActionTagHelper)
   In a suspended organization an action is not hidden: it stays where it is, faded, and says
   why on hover and through aria-describedby. Pointer events stay on so the tooltip shows; the
   tag helper has already taken the href (a link) or made it type="button" (a button), so a
   click does nothing. A button takes its variant's own disabled colours. */
.is-locked {
    cursor: not-allowed;
    opacity: .55;
}

.btn.is-locked,
.btn.is-locked:hover,
.btn.is-locked:active {
    color: var(--bs-btn-disabled-color);
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    box-shadow: none;
    transform: none;
    opacity: var(--bs-btn-disabled-opacity);
}

/* ------------------------------------------- overview (plan job 7.1; K10, UIhataları 42)
   The organization's first screen: its logo and a greeting, four counts that each open their
   page, the next event on B's large card beside "Bekleyen işler". Cards are the shared .card;
   only the inside is here. The admin overview borrows .dash-card and its head. */

/* ---- the head: the logo tile, the greeting, the title */
.dash-head {
    align-items: center;
}

.dash-head__who {
    display: flex;
    align-items: center;
    gap: var(--es-space-4);
    min-width: 0;
}

.dash-head__text {
    min-width: 0;
}

/* B's ember tile (56px on the denser T1 scale, UIhataları 50) with the initials, raised on its own glow. */
.dash-head__logo {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: var(--es-r-lg);
    background: linear-gradient(135deg, var(--es-brand-strong) 0%, var(--es-brand) 100%);
    color: var(--es-brand-ink);
    font-family: var(--es-font-display);
    font-size: var(--es-fs-lg);
    font-weight: 700;
    letter-spacing: -.03em;
    box-shadow: 0 16px 30px -14px var(--es-brand-shadow);
}

/* A logo is drawn for light paper (design.md §4.8): its white tile in both themes. */
.dash-head__logo--image {
    background: var(--es-paper);
    box-shadow: inset 0 0 0 1px var(--es-line), 0 16px 30px -14px var(--es-brand-shadow);
}

.dash-head__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The EventStage mark standing in for a missing logo (K3) breathes inside its paper tile. */
.dash-head__logo img.dash-head__brand {
    padding: var(--es-space-2);
}

.dash-head__greeting {
    margin: 0 0 .3rem;
}

.dash-head__greeting svg {
    width: 15px;
    height: 15px;
}

/* ---- four counts, each a link to its page: four to a row on a desk, two below it */
.dash-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .dash-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .dash-stats {
        gap: var(--es-space-3);
    }

    .dash-stats .stat {
        padding: var(--es-space-3) var(--es-space-4);
    }
}

a.dash-stat {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--es-dur-fast) var(--es-ease), box-shadow var(--es-dur-fast) var(--es-ease);
}

a.dash-stat:hover {
    border-color: var(--es-glow-line-hover);
    box-shadow: var(--es-card-shadow-hover);
    color: inherit;
}

a.dash-stat:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.dash-row {
    margin-bottom: 1.5rem;
}

/* The cards of a row are as tall as each other. */
.dash-row > [class*="col-"] > .card {
    height: 100%;
}

/* ---- a card's inside: its head and the quiet lines */
.dash-card {
    padding: 1.35rem 1.5rem;
}

.dash-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.dash-card__title {
    margin: 0;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.03em;
}

.dash-card__kicker {
    margin: 0;
    color: var(--es-muted);
    font-size: .8125rem;
    font-weight: 600;
}

.dash-card__note {
    margin: 0;
    color: var(--es-muted);
    font-size: .935rem;
}

.dash-card__foot {
    margin: 1rem 0 0;
    color: var(--es-faint);
    font-size: .78rem;
}

/* ---- B's large card: the cover on the left, the facts on the right */
.dash-next {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    padding: 14px;
    border-radius: var(--es-r-xl);
}

.dash-next--empty {
    display: block;
    padding: 1.35rem 1.5rem;
}

.dash-next__cover.show-card__cover {
    aspect-ratio: 16 / 9;
    align-self: start;
    border-radius: var(--es-r-lg);
}

.dash-next__cover img {
    position: absolute;
    inset: 0;
}

.dash-next__cover .date-block {
    top: 16px;
    left: 16px;
    width: 60px;
    height: 64px;
}

/* A status read on a photograph: the pills take the surface so they never sink into the cover. */
.dash-next__status {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: calc(100% - 100px);
}

.dash-next__status .pill {
    background: var(--es-surface);
    border-color: transparent;
}

/* B's ink chip on the cover's foot: how many wait for a place. Dark in both themes, as the
   date tile is, because it sits on a picture. */
.dash-next__queue {
    color-scheme: var(--es-scheme-dark);
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 32px);
    padding: 10px 14px 10px 10px;
    border-radius: 18px;
    background: var(--es-surface);
    color: var(--es-body);
    font-size: .8rem;
    box-shadow: 0 24px 40px -16px var(--es-photo-shadow);
}

.dash-next__queue svg {
    box-sizing: content-box;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    padding: 8px;
    border-radius: 50%;
    background: var(--es-brand-soft);
    color: var(--es-brand);
}

.dash-next__queue strong {
    display: block;
    color: var(--es-ink);
    font-size: .9rem;
}

.dash-next__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-width: 0;
    padding: 14px 14px 14px 0;
}

.dash-next__title {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h2);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.dash-next__title a {
    color: var(--es-ink);
    text-decoration: none;
}

.dash-next__title a:hover {
    color: var(--es-brand-strong);
}

.dash-next__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    color: var(--es-muted);
    font-size: .875rem;
}

.dash-next__facts > span {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.dash-next__facts svg {
    width: 16px;
    height: 16px;
    color: var(--es-brand);
}

.dash-next__zone {
    color: var(--es-faint);
    font-size: .78rem;
}

/* "10 gün kaldı": B's big number in the display face, the unit stacked beside it. */
.dash-next__days {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.dash-next__num {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: var(--es-fs-display);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: .9;
    font-variant-numeric: tabular-nums;
}

.dash-next__unit {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: var(--es-fs-lg);
    font-weight: 700;
    line-height: 1.05;
}

.dash-next__unit span {
    color: var(--es-faint);
}

.dash-next__now {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h3);
    font-weight: 700;
    letter-spacing: -.03em;
}

.dash-next__fill {
    display: grid;
    gap: 8px;
}

.dash-next__fill-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--es-muted);
    font-size: .8rem;
    font-weight: 600;
}

.dash-next__share {
    color: var(--es-brand-strong);
}

.dash-next__share--quiet {
    color: var(--es-faint);
}

.dash-next__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 767.98px) {
    .dash-next {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding: 10px;
    }

    .dash-next__cover.show-card__cover {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .dash-next__body {
        padding: 12px 8px 8px;
    }

    /* A thumb's targets (§5.3). */
    .dash-next__actions .btn {
        min-height: 44px;
    }
}

/* ---- "Bekleyen işler" (C): a ruled list, the number in the row's tone */
.dash-tasks__rows {
    margin: 0 -.5rem;
    padding: 0;
    list-style: none;
}

.dash-task {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 12px .5rem;
    border-bottom: 1px solid var(--es-line);
    color: var(--es-body);
    text-decoration: none;
}

.dash-tasks__rows li:last-child .dash-task {
    border-bottom: 0;
}

.dash-task:hover {
    color: var(--es-body);
    background: var(--es-fill);
}

.dash-task > svg {
    width: 16px;
    height: 16px;
    color: var(--es-faint);
}

.dash-task__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dash-task__title {
    color: var(--es-ink);
    font-size: .9rem;
    font-weight: 600;
}

.dash-task__detail {
    overflow: hidden;
    color: var(--es-faint);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-task__count {
    color: var(--es-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dash-tasks__clear {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ------------------------------------------- "Bilgiler" (plan job 7.2; UIhataları 61, plan P9)
   The public page in small — a cover band, a 60px logo tile, the name and its counts — then the
   facts as one .detail-list card. It had been a 14.5rem cover and eight icon cards with a
   sub-sentence each: a screen and a half for a dozen facts (item 61). */

/* ---- the public page in small */
.org-glance {
    margin-bottom: var(--es-space-5);
    padding: var(--es-space-2);
    border-radius: var(--es-r-lg);
}

/* A cover is a photograph, so the frame is pinned dark like every cover (plan §2.2). A band, not
   the 16:9 picture: the img keeps object-fit: cover, so the cover is cropped into it (item 61). */
.org-glance__cover {
    color-scheme: var(--es-scheme-dark);
    position: relative;
    height: 7rem;
    overflow: hidden;
    border-radius: calc(var(--es-r-lg) - 4px);
    background: var(--es-cat-ink);
}

/* No cover: a lower band with the EventStage mark (the fill is the shared K3 rule above). */
.org-glance__cover.org-glance__cover--plain {
    height: 4.5rem;
}

.org-glance__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* B's glass chip in the corner: on the cover's surface, so it reads over any photograph. */
.org-glance__chip {
    position: absolute;
    top: var(--es-space-2);
    right: var(--es-space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--es-space-1);
    max-width: calc(100% - var(--es-space-4));
    padding: .25rem .65rem;
    border-radius: var(--es-r-pill);
    background: var(--es-glass);
    -webkit-backdrop-filter: var(--es-glass-filter);
    backdrop-filter: var(--es-glass-filter);
    color: var(--es-ink);
    font-size: var(--es-fs-xs);
    font-weight: 600;
    box-shadow: var(--es-shadow-2);
}

.org-glance__chip svg {
    flex: none;
    width: 14px;
    height: 14px;
}

.org-glance__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--es-space-2) var(--es-space-4);
    padding: 0 var(--es-space-3) var(--es-space-2);
}

/* Half the tile on the cover, a white tile in both themes as on the public page (§4.8). */
.org-glance__mark {
    color-scheme: light;
    color: var(--es-ink);
    position: relative;
    z-index: 1;
    flex: none;
    align-self: flex-start;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-top: -28px;
    overflow: hidden;
    border-radius: var(--es-r);
    background: var(--es-paper);
    box-shadow: 0 0 0 4px var(--es-surface), 0 12px 24px -12px var(--es-brand-shadow);
}

/* The organization's logo, or the EventStage mark in its place (_BrandFallback, K3). */
.org-glance__mark img {
    width: 100%;
    height: 100%;
    padding: 12%;
    object-fit: contain;
}

.org-glance__text {
    flex: 1 1 14rem;
    display: grid;
    gap: var(--es-space-1);
    min-width: 0;
}

.org-glance__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
}

.org-glance__name {
    margin: 0;
    color: var(--es-ink);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.org-glance__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-space-1) var(--es-space-3);
    margin: 0;
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
}

.org-glance__facts:empty {
    display: none;
}

.org-glance__facts strong {
    color: var(--es-ink);
}

/* A picture of the public page's buttons: they do nothing here (aria-hidden in the view). */
.org-glance__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-space-2);
    pointer-events: none;
}

.org-glance__site {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- the facts: one card around the shared .detail-list (UIhataları 61). Only the inside of a
   value is styled here; rows, ruling and the phone's stacking are .detail-list's. Not .org-facts:
   that name is the public community page's about tab. */
.orginfo-card {
    padding: var(--es-space-1) var(--es-card-pad);
}

.orginfo-list__prose {
    max-width: 72ch;
    margin: 0;
    font-weight: 400;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.orginfo-list__empty {
    color: var(--es-faint);
}

.orginfo-list__block {
    display: block;
}

/* A value with its action beside it (the address and "Kopyala", the place and "Haritada aç"),
   wrapping under it on a phone. */
.orginfo-list__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-1) var(--es-space-3);
    min-width: 0;
}

.orginfo-list__muted {
    color: var(--es-muted);
    font-weight: 400;
}

.orginfo-list__map {
    display: inline-flex;
    align-items: center;
    gap: var(--es-space-1);
}

.orginfo-list__map svg {
    flex: none;
    width: 16px;
    height: 16px;
}

/* ---- the team's names as small chips under the count */
.orginfo-people {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-space-1) var(--es-space-2);
    margin: var(--es-space-2) 0 0;
    padding: 0;
    list-style: none;
}

.orginfo-people li {
    display: inline-flex;
    align-items: center;
    gap: var(--es-space-2);
    min-width: 0;
    padding: .2rem .65rem .2rem .2rem;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-ink);
    font-size: var(--es-fs-sm);
    font-weight: 600;
}

.orginfo-people__avatar {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--es-surface);
    color: var(--es-muted);
    font-size: .65rem;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .org-glance__mark {
        width: 52px;
        height: 52px;
        margin-top: -24px;
        border-radius: var(--es-r-sm);
    }

    .org-glance__chip {
        top: var(--es-space-2);
        right: var(--es-space-2);
    }
}

/* ------------------------------------------- "Ayarlar" (plan job 7.3, portal1-OrgSettings-B + C)
   C's numbered contents (_PageToc) and "Sayfa adresi" card on the left, B's section cards with
   icon boxes and C's numbers on the right, B's ink save card closing the form. Below lg the
   contents are the shared sticky row and the address card sits under it. */
.org-set {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 3rem;
}

.org-set__aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 14px;
    min-width: 0;
}

.org-set__main {
    display: grid;
    gap: 20px;
    min-width: 0;
}

/* A contents link lands below the portal's sticky top bar and, below lg, the contents row. */
.org-set__main > section {
    scroll-margin-top: calc(var(--es-bar-h) + 5rem);
}

/* The portal's top bar (.app-topbar) is as tall as the site header: both are --es-bar-h (K12). */
.org-set__aside .page-toc {
    top: calc(var(--es-bar-h) + .5rem);
}

.org-set__page {
    display: grid;
    gap: .5rem;
    padding: 1rem 1.1rem;
}

.org-set__url {
    color: var(--es-ink);
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8125rem;
    overflow-wrap: anywhere;
}

.org-set__page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
}

.org-set__page-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 36px;
    color: var(--es-brand);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
}

.org-set__page-link:hover {
    text-decoration: underline;
}

.org-set__page-link svg {
    width: 14px;
    height: 14px;
}

.org-set__card {
    display: grid;
    gap: 22px;
    min-width: 0;
    padding: clamp(1.25rem, .9rem + 1.2vw, 1.75rem);
    border-radius: var(--es-r-xl);
}

.org-set__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
}

.org-set__head-text {
    flex: 1 1 12rem;
    min-width: 0;
}

/* C's "01" sits close over B's title. */
.org-set__num {
    display: block;
    color: var(--es-brand);
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
}

.org-set__title {
    margin: 0;
    color: var(--es-ink);
    font-size: var(--es-fs-h2);
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.org-set__map {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    color: var(--es-brand);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.org-set__map:hover {
    text-decoration: underline;
}

.org-set__map svg {
    width: 16px;
    height: 16px;
}

/* C's form grid: two fields side by side from a small tablet up, the long ones across. */
.org-set__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem 1.25rem;
}

.org-set__grid .form-label {
    font-weight: 600;
}

.org-set__grid .form-text {
    margin-top: .35rem;
}

@media (min-width: 768px) {
    .org-set__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .org-set__full {
        grid-column: 1 / -1;
    }
}

/* The address is read, never typed (B-19a): the quiet tint of a field that is not one. */
.org-set__slug[readonly] {
    background: var(--es-fill);
    color: var(--es-ink);
}

.org-set__mono {
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9375rem;
}

/* B's field with its icon inside the left edge. */
.org-set__icon-field {
    position: relative;
}

.org-set__icon-field > svg {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--es-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.org-set__icon-field > .form-control {
    padding-left: 42px;
}

.org-set__images {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .org-set__images {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* B's ink save card, pinned dark in both themes. */
.org-set__save {
    color-scheme: var(--es-scheme-dark);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    overflow: hidden;
    padding: 1.5rem clamp(1.25rem, 1rem + 1vw, 1.75rem);
    border-radius: var(--es-r-xl);
    background:
        radial-gradient(ellipse 50% 120% at 100% 0%, var(--es-brand-soft), transparent 70%),
        var(--es-surface);
    border: 1px solid var(--es-glow-line);
    color: var(--es-body);
}

/* One plain line now, not a display headline over a second line (UIhataları 50, 58). */
.org-set__save-text {
    margin: 0;
    color: var(--es-body);
    font-size: var(--es-fs-body);
    font-weight: 600;
}

.org-set__save-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

@media (min-width: 992px) {
    .org-set {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        align-items: start;
        gap: 24px;
    }

    .org-set__aside {
        position: sticky;
        top: calc(var(--es-bar-h) + 1.5rem);
    }

    .org-set__aside .page-toc {
        position: static;
    }

    .org-set__main > section {
        scroll-margin-top: calc(var(--es-bar-h) + 1.5rem);
    }
}

@media (max-width: 575.98px) {
    .org-set__card,
    .org-set__save {
        border-radius: var(--es-r-lg);
    }

    .org-set__save-actions,
    .org-set__save-actions .btn {
        flex: 1 1 auto;
    }
}

/* ------------------------------------------- "Ekip" (plan job 7.4, portal1-Team-B + C)
   B's member cards — a band, the portrait over it, the role in the corner — with C's quiet
   visibility dot and its counter strip (the shared stat tiles, smaller); the owner's ember
   invitation card and the pending invitations beside them from xl up, under them below it.
   The band is ember for an owner and plain for a member, so the roles read before the pills. */
.team-head__count {
    color: var(--es-faint);
    font-weight: 500;
}

/* B's face stack in the page head: decoration, the count is in the title. */
.team-faces {
    display: inline-flex;
    align-items: center;
    padding-left: 10px;
}

.team-faces__face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: -10px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--es-raised);
    box-shadow: 0 0 0 3px var(--es-app-ground);
    font-size: .8125rem;
    font-weight: 700;
}

.team-faces__face--initials {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
}

.team-faces__face--more {
    background: var(--es-fill-2);
    color: var(--es-ink);
}

.team-stats .stat {
    padding: .85rem 1.1rem;
}

.team-stats .stat__value {
    margin-top: .35rem;
    font-size: 1.5rem;
}

.team {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    margin-bottom: 3rem;
}

.team__members,
.team__aside {
    min-width: 0;
}

.team__aside {
    display: grid;
    gap: 20px;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .team__aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

@media (min-width: 1200px) {
    .team--owner {
        grid-template-columns: minmax(0, 2fr) minmax(19rem, 1fr);
    }
}

.team-cards {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-card {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    transition: box-shadow var(--es-dur-fast) var(--es-ease), border-color var(--es-dur-fast) var(--es-ease);
}

.team-card:hover {
    border-color: var(--es-glow-line-hover);
    box-shadow: var(--es-card-shadow-hover);
}

/* C's ring on the reader's own card. */
.team-card--self,
.team-card--self:hover {
    border-color: var(--es-brand-border);
}

.team-card > article {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.team-card__band {
    height: 70px;
    background: var(--es-fill);
}

.team-card--owner .team-card__band {
    background: linear-gradient(120deg, var(--es-brand-border), var(--es-brand-soft));
}

.team-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: 0 22px 22px;
}

.team-card__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
    margin-top: -40px;
}

.team-card__photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--es-raised);
    box-shadow: 0 0 0 5px var(--es-surface);
}

.team-card__photo--initials {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-family: var(--es-font-display);
    font-size: 1.5rem;
    font-weight: 700;
}

.team-card__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
}

.team-card__who {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.team-card__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--es-ink);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
}

/* B's solid "siz" tag. */
.team-card__you {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 .55rem;
    border-radius: var(--es-r-pill);
    background: var(--es-ink);
    color: var(--es-page);
    font-family: var(--es-font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 0;
}

.team-card__title {
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 600;
}

.team-card__title--empty {
    color: var(--es-faint);
    font-weight: 500;
}

.team-card__mail {
    color: var(--es-muted);
    font-size: .8125rem;
    overflow-wrap: anywhere;
}

.team-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    margin: 0;
    color: var(--es-muted);
    font-size: .8125rem;
    font-weight: 600;
}

/* C's dot: green while the website shows the person, grey while it does not. */
.team-card__vis {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.team-card__vis::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--es-edge);
}

.team-card__vis.is-on::before {
    background: var(--es-dot-ok);
}

.team-card__since {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.team-card__since svg {
    width: 15px;
    height: 15px;
}

.team-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: auto;
    padding-top: 4px;
}

.team-card__actions form {
    display: contents;
}

.team-card__edit {
    flex: 1 1 auto;
}

.team-card__note {
    margin: 0;
    color: var(--es-muted);
    font-size: .8125rem;
}

/* B's soft ember invitation card. */
.team-invite {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--es-brand-border);
    border-radius: var(--es-r-xl);
    background: var(--es-brand-soft);
    /* The overview's "Ekibe davet et" opens /team#davet: clear of the sticky top bar. */
    scroll-margin-top: 96px;
}

.team-invite__title {
    margin: 0;
    color: var(--es-ink);
    font-size: var(--es-fs-h2);
    font-weight: 700;
    letter-spacing: -.03em;
}

.team-invite__form {
    display: grid;
    gap: 14px;
}

.team-invite .form-control,
.team-invite .form-select {
    background-color: var(--es-surface);
}

/* The surface above outranked the shared disabled look, so in a suspended organization (business
   rule 12) the locked fields passed for live ones, worst in the dark theme (Stage 11.1 review):
   the same tokens as every other disabled control. */
.team-invite .form-control:disabled,
.team-invite .form-select:disabled {
    background-color: var(--es-fill-2);
    border-color: var(--es-line-strong);
    color: var(--es-muted);
    cursor: not-allowed;
}

.team-invite__hint {
    margin: 0;
    color: var(--es-brand-deep);
    font-size: .8125rem;
}

.team-pending {
    padding: 22px;
    border-radius: var(--es-r-xl);
}

.team-pending__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 12px;
}

.team-pending__title {
    margin: 0;
    color: var(--es-ink);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.03em;
}

.team-pending__empty {
    display: grid;
    justify-items: center;
    gap: .75rem;
    padding: 1.25rem .5rem .5rem;
    color: var(--es-muted);
    text-align: center;
}

.team-pending__empty p {
    margin: 0;
    font-size: .875rem;
}

.team-pending__list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-pending__item {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.team-pending__row {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.team-pending__row .icbox {
    background: var(--es-surface);
}

.team-pending__mail {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.team-pending__state {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem 1rem;
    margin: 0;
    color: var(--es-muted);
    font-size: .8125rem;
    font-weight: 600;
}

.team-pending__state.is-expired strong {
    color: var(--es-bad);
}

.team-pending__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.team-pending__actions .btn-outline-secondary {
    background: var(--es-surface);
}

@media (max-width: 575.98px) {
    .team-card,
    .team-invite,
    .team-pending {
        border-radius: var(--es-r-lg);
    }
}

/* ------------------------------------------- "Ekip üyesini düzenle" (plan job 7.5, portal1-TeamMember-C + B)
   B's floating header card with the big portrait and the info chips; C's section cards on the
   left and the team page preview (the shared phone frame) on the right from lg up; B's role
   cards with what each role may do. */
.member-head {
    align-items: center;
    padding: 22px 24px 22px 22px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

/* Grows into the row and lets its chips wrap, so Vazgeç/Kaydet stay on the right on a desk. */
.member-head__who {
    display: flex;
    flex: 1 1 22rem;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.member-head__photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--es-raised);
    box-shadow: 0 0 0 5px var(--es-brand-soft);
}

.member-head__photo--initials {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-family: var(--es-font-display);
    font-size: 2rem;
    font-weight: 700;
}

.member-head__text {
    display: grid;
    gap: .5rem;
    min-width: 0;
}

.member-head__kicker {
    color: var(--es-brand);
}

.member-head__name {
    margin: 0;
    overflow-wrap: anywhere;
}

.member-head__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.member-head__chips .pill {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.member-edit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    margin-bottom: 3rem;
}

.member-edit__main {
    display: grid;
    gap: 20px;
    min-width: 0;
}

@media (min-width: 992px) {
    .member-edit {
        grid-template-columns: minmax(0, 7fr) minmax(17rem, 5fr);
    }
}

.member-edit__card {
    display: grid;
    gap: 22px;
    min-width: 0;
    padding: clamp(1.25rem, .9rem + 1.2vw, 1.75rem);
    border-radius: var(--es-r-xl);
}

.member-edit__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
}

.member-edit__head-text {
    flex: 1 1 12rem;
    min-width: 0;
}

.member-edit__title {
    margin: 0;
    color: var(--es-ink);
    font-size: var(--es-fs-h2);
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.member-edit__sub {
    margin: .3rem 0 0;
    color: var(--es-muted);
    font-size: .875rem;
}

.member-edit__grid,
.member-edit__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem 1.25rem;
}

@media (min-width: 768px) {
    .member-edit__grid,
    .member-edit__pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .member-edit__full {
        grid-column: 1 / -1;
    }
}

.member-edit__note {
    margin: 0;
    color: var(--es-muted);
    font-size: .8125rem;
}

.member-edit__order {
    max-width: 10rem;
}

/* B's green row while the website shows the person; plain while it does not. */
.member-edit__visible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    align-self: start;
    padding: 14px 18px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.member-edit__visible:has(.switch:checked) {
    background: var(--es-ok-soft);
}

.member-edit__visible-text {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.member-edit__visible-label {
    margin: 0;
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
}

.member-edit__visible:has(.switch:checked) .member-edit__visible-label {
    color: var(--es-ok);
}

.member-edit__visible-hint {
    color: var(--es-muted);
    font-size: .8125rem;
}

.member-edit__lock {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--es-muted);
    font-size: .875rem;
}

.member-edit__lock svg {
    flex: none;
    width: 16px;
    height: 16px;
}

.member-edit__save {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.member-edit__aside {
    min-width: 0;
}

/* B's role cards. The input is the real radio — visually hidden, never display:none, so it keeps
   the tab order, the arrow keys and the post — and the face after it draws the state. */
.role-cards {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

@media (min-width: 576px) {
    .role-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.role-card {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.role-card__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.role-card__face {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    height: 100%;
    min-height: 44px;
    padding: 1rem 1.1rem;
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    box-shadow: inset 0 0 0 1px var(--es-edge);
    transition: box-shadow var(--es-dur-fast) var(--es-ease), background-color var(--es-dur-fast) var(--es-ease);
}

.role-card__dot {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 2px solid var(--es-edge);
    border-radius: 50%;
    background: var(--es-surface);
    transition: border-width var(--es-dur-fast) var(--es-ease), border-color var(--es-dur-fast) var(--es-ease);
}

.role-card__text {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.role-card__name {
    color: var(--es-ink);
    font-weight: 700;
}

.role-card__desc {
    color: var(--es-muted);
    font-size: .8125rem;
}

.role-card:hover .role-card__face {
    box-shadow: inset 0 0 0 1px var(--es-brand);
}

.role-card__input:checked + .role-card__face {
    background: var(--es-brand-soft);
    box-shadow: inset 0 0 0 2px var(--es-brand);
}

.role-card__input:checked + .role-card__face .role-card__dot {
    border: 5px solid var(--es-brand);
}

.role-card__input:focus-visible + .role-card__face {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.role-card:has(.role-card__input:disabled) {
    cursor: not-allowed;
}

.role-card__input:disabled + .role-card__face {
    opacity: .6;
}

.role-card:has(.role-card__input:disabled):hover .role-card__face {
    box-shadow: inset 0 0 0 1px var(--es-edge);
}

.role-card:has(.role-card__input:disabled):hover .role-card__input:checked + .role-card__face {
    box-shadow: inset 0 0 0 2px var(--es-brand);
}

/* The team page in the phone: the public "Ekip" tab's tiles, the one being edited ringed and
   tagged, its neighbours faded (C). */
.team-preview__org {
    color: var(--es-brand);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.team-preview__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin: .25rem 0 0;
    padding: 0;
    list-style: none;
}

.team-preview__tile {
    position: relative;
    display: grid;
    gap: .2rem;
    align-content: start;
    padding: .5rem;
    border-radius: 14px;
    background: var(--es-surface);
    box-shadow: inset 0 0 0 1px var(--es-line);
}

.team-preview__tile--this {
    box-shadow: inset 0 0 0 1.5px var(--es-brand);
}

.team-preview__tile--other {
    opacity: .55;
}

.team-preview__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: .25rem;
    border-radius: 10px;
    object-fit: cover;
    background: var(--es-raised);
}

.team-preview__photo--initials {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-family: var(--es-font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.team-preview__badge {
    position: absolute;
    top: .9rem;
    left: .9rem;
    padding: .1rem .45rem;
    border-radius: var(--es-r-pill);
    background: var(--es-ink);
    color: var(--es-page);
    font-size: .625rem;
    font-weight: 700;
}

.team-preview__name {
    color: var(--es-ink);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.25;
}

.team-preview__title {
    color: var(--es-muted);
    font-size: .6875rem;
    line-height: 1.25;
}

.team-preview__hidden {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .25rem 0 0;
    padding: .5rem .65rem;
    border: 1px dashed var(--es-line-strong);
    border-radius: 12px;
    color: var(--es-muted);
    font-size: .75rem;
}

.team-preview__hidden svg {
    flex: none;
    width: 14px;
    height: 14px;
}

@media (max-width: 575.98px) {
    .member-head {
        padding: 18px;
        border-radius: var(--es-r-lg);
    }

    .member-head__who {
        align-items: flex-start;
        gap: 14px;
    }

    .member-head__photo {
        width: 64px;
        height: 64px;
    }

    .member-head__photo--initials {
        font-size: 1.4rem;
    }

    .member-edit__card {
        border-radius: var(--es-r-lg);
    }

    .member-edit__save .btn {
        flex: 1 1 auto;
    }
}

/* ------------------------------------------- "Takipçiler" (plan job 7.6; UIhataları 64, plan P9)
   Three tiles at the shared .stat size (a small icon and the label on one line, then the
   number), one invite card — the address and its button on a row, "Dosyadan davet" folded under
   it as a .disclosure with a low drop zone — "Dosya işlendi" after an upload, and on the Davetler
   tab C's state bar beside the list from xl up (above it below xl). Item 64: 2.5rem numbers, a
   two-panel card and a 9rem drop zone made the page all furniture. */
.follow-stats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

/* Padding and radius are the shared .stat's. */
.follow-stat {
    display: flex;
    flex-direction: column;
}

.follow-stat__top {
    display: flex;
    align-items: center;
    gap: var(--es-space-2);
    min-height: 32px;
}

/* On the top line beside the icon. */
.follow-stat__label {
    min-width: 0;
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
    font-weight: 600;
}

.follow-stat--ok {
    border-color: var(--es-ok-border);
    background: var(--es-ok-soft);
}

.follow-stat--ok .stat__value,
.follow-stat--ok .follow-stat__label {
    color: var(--es-ok);
}

.follow-stat--ok .icbox--ok {
    background: var(--es-surface);
}

/* B's bars sit beside the icon, faded so the number stays the loudest thing on the tile. */
.follow-stat__chart {
    position: relative;
    flex: 0 1 88px;
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    opacity: .7;
}

/* ---- the invite card: one card, no columns (UIhataları 64) */
.follow-invite {
    display: grid;
    gap: var(--es-space-3);
    margin-bottom: var(--es-space-5);
    padding: var(--es-card-pad);
    border-radius: var(--es-r-lg);
}

/* The title, then the field; side by side from tablet up. */
.follow-invite__one {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--es-space-2) var(--es-space-4);
}

@media (min-width: 768px) {
    .follow-invite__one {
        grid-template-columns: auto minmax(0, 36rem);
    }

    /* The field's message sits under the field, not under the title. */
    .follow-invite__one > .text-danger {
        grid-column: 2;
    }
}

.follow-invite__title {
    margin: 0;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h3);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

/* A plain row: the input grows, the button keeps its width, and wraps under the input only when
   the row is too narrow for both. */
.follow-invite__field {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-space-2);
}

.follow-invite__field .form-control {
    flex: 1 1 12rem;
    min-width: 0;
}

.follow-invite__field .btn {
    flex: none;
}

/* ---- "Dosyadan davet": a <details> under the address row (UIhataları 64), the shared
   .disclosure row a step lower inside the card, and a low drop zone. Scoped here: .file-drop is
   shared, its own 9rem is left alone. */
.follow-file > .disclosure__summary {
    min-height: var(--es-h-btn);
    padding: .25rem .375rem .25rem var(--es-space-3);
    font-size: var(--es-fs-body);
}

.follow-file .disclosure__chevron {
    width: 28px;
    height: 28px;
}

.follow-file .disclosure__chevron svg {
    width: 14px;
    height: 14px;
}

.follow-file__body {
    display: grid;
    gap: var(--es-space-3);
    padding-top: var(--es-space-3);
}

.follow-file .file-drop.is-enhanced .file-drop__zone {
    min-height: 5rem;
    padding: var(--es-space-3);
    border-radius: var(--es-r-lg);
}

.follow-file .file-drop__prompt {
    gap: var(--es-space-1);
    font-size: var(--es-fs-sm);
}

.follow-file__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-2) var(--es-space-4);
}

.follow-file__note {
    margin: 0;
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
}

/* ---- the file field: the browser's own input, laid invisibly over B's dashed zone once
   site.js has marked it is-enhanced — the image field's technique (plan job 4.4), so a click or
   a dropped file lands in the input itself. Without the script the input is simply shown. */
.file-drop__zone {
    position: relative;
}

.file-drop.is-enhanced .file-drop__zone {
    display: grid;
    place-items: center;
    min-height: 9rem;
    padding: 20px;
    border: 2px dashed var(--es-line-strong);
    border-radius: var(--es-r-xl);
    background: var(--es-raised);
    text-align: center;
    transition: border-color var(--es-dur-fast) var(--es-ease), background-color var(--es-dur-fast) var(--es-ease);
}

.file-drop.is-enhanced .file-drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-drop__prompt {
    display: grid;
    justify-items: center;
    gap: 8px;
    color: var(--es-ink);
    font-size: .9rem;
    font-weight: 700;
}

.file-drop__prompt[hidden],
.file-drop__name[hidden] {
    display: none;
}

.file-drop__pick {
    color: var(--es-brand);
    text-decoration: underline;
}

.file-drop__name {
    max-width: 100%;
    padding: 4px 12px;
    border-radius: var(--es-r-pill);
    background: var(--es-surface);
    color: var(--es-body);
    font-size: .8rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.file-drop.is-enhanced .file-drop__zone:hover,
.file-drop.is-dragover .file-drop__zone {
    border-color: var(--es-brand);
    background: var(--es-brand-soft);
}

.file-drop.is-enhanced .file-drop__zone:has(.file-drop__input:focus-visible) {
    border-color: var(--es-brand);
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--es-ring);
}

.file-drop.is-invalid .file-drop__zone,
.file-drop.is-invalid:not(.is-enhanced) .file-drop__input {
    border-color: var(--es-bad);
}

.file-drop.is-disabled .file-drop__zone,
.file-drop.is-disabled .file-drop__zone:hover {
    border-color: var(--es-line-strong);
    background: var(--es-fill);
    opacity: .6;
}

.file-drop.is-disabled .file-drop__input {
    cursor: not-allowed;
}

.file-drop__hint {
    margin: 6px 0 0;
}

/* ---- "Dosya işlendi": the count queued large, what was left out as tiles under it */
.follow-import {
    display: grid;
    gap: var(--es-space-3);
    margin-bottom: var(--es-space-5);
    padding: var(--es-space-4) var(--es-card-pad);
    border-radius: var(--es-r-lg);
}

.follow-import__kicker {
    margin: 0;
}

.follow-import__file {
    color: var(--es-body);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.follow-import__head {
    display: flex;
    align-items: center;
    gap: var(--es-space-3);
    padding: var(--es-space-3) var(--es-space-4);
    border-radius: var(--es-r);
    background: var(--es-ok-soft);
    color: var(--es-ok);
}

.follow-import--warn .follow-import__head {
    background: var(--es-warn-soft);
    color: var(--es-warn);
}

.follow-import__head .icbox {
    background: var(--es-surface);
}

.follow-import__title {
    margin: 0;
    color: inherit;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h3);
    font-weight: 700;
    letter-spacing: -.02em;
}

.follow-import__parts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: var(--es-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.follow-import__part {
    display: grid;
    gap: 2px;
    padding: var(--es-space-2) var(--es-space-3);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r);
    background: var(--es-raised);
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
    font-weight: 600;
}

.follow-import__part strong {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: var(--es-fs-lg);
    font-variant-numeric: tabular-nums;
}

/* ---- the Davetler tab: C's state bar beside the list from xl up, above it below that */
.follow-invites {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (min-width: 1200px) {
    .follow-invites--split {
        grid-template-columns: minmax(0, 1fr) 18rem;
    }

    .follow-invites--split .follow-mix {
        grid-column: 2;
        grid-row: 1;
    }

    .follow-invites--split .follow-invites__list {
        grid-column: 1;
        grid-row: 1;
    }

    .follow-mix .chart-legend {
        flex-direction: column;
    }
}

.follow-invites__list {
    min-width: 0;
}

.follow-mix {
    display: grid;
    gap: var(--es-space-3);
    padding: var(--es-space-4) var(--es-card-pad);
    border-radius: var(--es-r-lg);
}

.follow-mix__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.follow-mix__title {
    margin: 0;
    color: var(--es-ink);
    font-size: var(--es-fs-body);
    font-weight: 700;
}

.follow-mix__total {
    color: var(--es-faint);
    font-size: .8rem;
    font-weight: 600;
}

.follow-mix .chart {
    display: grid;
    gap: 12px;
    margin: 0;
}

/* ---- the lists: the search inside the list's card (B), a face before the name, the date as
   a quiet capsule */
.follow-search {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--es-line);
    border-radius: 0;
    box-shadow: none;
}

.follow-search .form-control {
    max-width: 26rem;
    border-radius: var(--es-r-pill);
}

/* B's tables keep their width and scroll inside the card on a phone: squeezed to 390px, an
   address broke every four letters. */
.follow-table {
    min-width: 34rem;
}

.follow-table__who {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.follow-table__avatar {
    font-size: .75rem;
}

/* The invitations table's two row buttons do not wrap, so without a floor the address column
   was what gave way, to some sixty pixels at 390px; the table scrolls inside the card instead. */
.follow-table__mail {
    min-width: 14rem;
}

.follow-table__date {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-body);
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.follow-table__actions {
    display: inline-flex;
    gap: 6px;
}

/* ------------------------------------------- "Konuşmacı havuzu" (plan job 7.7, portal1-Speakers-B + C)
   B's summary capsule and small cards — a 48px portrait beside the name and what they do, the
   account pill with the counts as one muted line, the owner's buttons under a rule (UIhataları
   66) — with the dashed "Konuşmacı ekle" tile last; C's table as the other view; and C's "Seçili konuşmacı" in the shared review panel (job
   4.6), its invitation in a box washed in the state's tone. Sessions and event-level billings
   are counted and listed apart (B-23). */
.speaker-sum {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 0 0 20px;
    padding: 6px;
    border-radius: var(--es-r-pill);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    list-style: none;
}

.speaker-sum__total {
    padding: 6px 14px;
    border-radius: var(--es-r-pill);
    background: var(--es-ink);
    color: var(--es-page);
    font-size: .875rem;
    font-weight: 700;
}

.speaker-sum__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    color: var(--es-body);
    font-size: .875rem;
    font-weight: 600;
}

.speaker-sum__count {
    color: var(--es-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.speaker-sum__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--es-faint);
}

.speaker-sum__dot--ok {
    background: var(--es-dot-ok);
}

.speaker-sum__dot--warn {
    background: var(--es-dot-warn);
}

.speaker-sum__dot--bad {
    background: var(--es-dot-bad);
}

.speaker-cards {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--es-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.speaker-pool-card > article {
    display: grid;
    align-content: start;
    gap: var(--es-space-3);
    height: 100%;
    padding: var(--es-space-3) var(--es-space-4);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    transition: border-color var(--es-dur-fast) var(--es-ease);
}

.speaker-pool-card > article:hover {
    border-color: var(--es-glow-line-hover);
}

/* The card the panel shows: the ember edge, as a selected table row's bar (job 4.6). */
.speaker-pool-card.is-selected > article {
    border-color: var(--es-brand);
    box-shadow: 0 0 0 3px var(--es-brand-soft), var(--es-card-shadow);
}

.speaker-pool-card__top {
    display: flex;
    align-items: center;
    gap: var(--es-space-3);
    min-width: 0;
}

.speaker-pool-card__photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--es-raised);
}

/* No photo: the initials on the brand wash, as the event speakers' faces (K3 — a person keeps
   their letters, never the EventStage logo). */
.speaker-pool-card__photo--empty {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-size: var(--es-fs-sm);
    font-weight: 700;
}

/* One muted line: "3 oturum · 1 etkinlik" (DisplayText.SpeakingLine; B-23). */
.speaker-pool-card__speaks {
    color: var(--es-muted);
    font-size: var(--es-fs-xs);
    font-weight: 600;
}

.speaker-pool-card__who {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.speaker-pool-card__name {
    margin: 0;
    font-family: var(--es-font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.speaker-pool-card__name a {
    color: var(--es-ink);
    text-decoration: none;
}

.speaker-pool-card__name a:hover {
    color: var(--es-brand-strong);
    text-decoration: underline;
}

.speaker-pool-card__job {
    color: var(--es-brand-strong);
    font-size: var(--es-fs-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.speaker-pool-card__mail {
    color: var(--es-muted);
    font-size: var(--es-fs-xs);
    overflow-wrap: anywhere;
}

/* The account pill and the counts line side by side, wrapping on a narrow card. */
.speaker-pool-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-1) var(--es-space-3);
}

.speaker-pool-card__state {
    flex: none;
}

.speaker-pool-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-2);
    margin-top: auto;
    padding-top: var(--es-space-3);
    border-top: 1px solid var(--es-line);
}

/* Each button posts a form of its own; the forms take no room so the buttons wrap as one row. */
.speaker-pool-card__actions form,
.speaker-table__actions form,
.speaker-invite-box__actions form,
.speaker-status__actions form,
.speaker-panel__foot form {
    display: contents;
}

.speaker-pool-card__delete {
    margin-left: auto;
    color: var(--es-bad);
    text-decoration: none;
}

.speaker-pool-card__delete:hover {
    color: var(--es-bad);
    text-decoration: underline;
}

/* B's dashed tile at the end of the grid. */
.speaker-pool-add__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--es-space-2);
    height: 100%;
    min-height: 8rem;
    padding: var(--es-space-4);
    border: 2px dashed var(--es-line-strong);
    border-radius: var(--es-r-lg);
    color: var(--es-ink);
    text-align: center;
    text-decoration: none;
    transition: border-color var(--es-dur-fast) var(--es-ease), background-color var(--es-dur-fast) var(--es-ease);
}

.speaker-pool-add__link:not(.is-locked):hover {
    border-color: var(--es-brand);
    background: var(--es-brand-soft);
    color: var(--es-ink);
}

.speaker-pool-add__text {
    font-size: var(--es-fs-body);
    font-weight: 700;
}

/* C's table: it keeps its width and scrolls in its card on a phone. */
.speaker-table {
    min-width: 46rem;
}

.speaker-table__who {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.speaker-table__photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--es-raised);
}

.speaker-table__photo--empty {
    border: 1px dashed var(--es-line-strong);
    background: transparent;
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 700;
}

.speaker-table__names {
    display: grid;
    min-width: 0;
}

.speaker-table__name {
    color: var(--es-ink);
    font-weight: 650;
    text-decoration: none;
}

.speaker-table__name:hover {
    color: var(--es-brand-strong);
    text-decoration: underline;
}

.speaker-table__mail,
.speaker-table__company {
    display: block;
    color: var(--es-muted);
    font-size: .8rem;
}

.speaker-table__job {
    display: block;
    color: var(--es-ink);
    font-size: .875rem;
}

.speaker-table__speaks {
    color: var(--es-ink);
    font-weight: 600;
    white-space: nowrap;
}

.speaker-table__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

/* ---- the review panel's body */
.speaker-panel__who {
    display: flex;
    align-items: center;
    gap: 14px;
}

.speaker-panel__photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    object-fit: cover;
    background: var(--es-raised);
}

.speaker-panel__photo--empty {
    border: 1px dashed var(--es-line-strong);
    background: transparent;
    color: var(--es-faint);
}

.speaker-panel__job {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.speaker-panel__speaks {
    color: var(--es-muted);
    font-size: .8rem;
    font-weight: 500;
}

.speaker-panel__bio {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--es-body);
    font-size: .875rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.speaker-panel__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--es-line);
}

.speaker-panel__foot .btn:first-child {
    flex: 1 1 auto;
}

/* C's invitation box, washed in the state's tone. */
.speaker-invite-box {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.speaker-invite-box--ok {
    border-color: var(--es-ok-border);
    background: var(--es-ok-soft);
}

.speaker-invite-box--warn {
    border-color: var(--es-warn-border);
    background: var(--es-warn-soft);
}

.speaker-invite-box--bad {
    border-color: var(--es-bad-border);
    background: var(--es-bad-soft);
}

.speaker-invite-box__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.speaker-invite-box__kicker {
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.speaker-invite-box__text {
    margin: 0;
    color: var(--es-body);
    font-size: .8125rem;
}

.speaker-invite-box__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---- sessions and event billings, in the panel and on the edit page */
.speaker-talks {
    display: grid;
    gap: 8px;
}

.speaker-talks__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--es-muted);
    font-family: var(--es-font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.speaker-talks__count {
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

.speaker-talks__list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.speaker-talks__none,
.speaker-talks__note {
    margin: 0;
    color: var(--es-muted);
    font-size: .8125rem;
}

/* The answer sits under the title rather than beside it: in the panel's narrow column a pill on
   the right squeezed a session's name to a few words a line. */
.speaker-talk {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 12px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--es-fill);
    color: var(--es-body);
    text-decoration: none;
    transition: background-color var(--es-dur-fast) var(--es-ease);
}

.speaker-talk:hover {
    background: var(--es-fill-2);
    color: var(--es-body);
}

.speaker-talk__date {
    display: grid;
    grid-row: span 2;
    justify-items: center;
    width: 40px;
    line-height: 1.05;
}

.speaker-talk__day {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.05rem;
    font-weight: 700;
}

.speaker-talk__month {
    color: var(--es-brand-strong);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* An event billing's date sits on the ember, so the two lists read apart at a glance (B-23). */
.speaker-talk__date--event {
    padding: 4px 0;
    border-radius: 10px;
    background: var(--es-brand-soft);
}

.speaker-talk__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.speaker-talk__title {
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.speaker-talk__where {
    color: var(--es-muted);
    font-size: .75rem;
    overflow-wrap: anywhere;
}

.speaker-talk > .pill {
    grid-column: 2;
    justify-self: start;
}

.speaker-talk.is-cancelled .speaker-talk__title {
    color: var(--es-muted);
    text-decoration: line-through;
}

/* ------------------------------------------- "Konuşmacı ekle / düzenle" (plan job 7.8, portal2-SpeakerNew-B, portal2-SpeakerEdit-B + C)
   B's icon cards on the left and the speaker as the event page shows them on the right (the
   shared phone frame, job 4.5) with C's Kart / Program switch and completeness card; on the edit
   page, B's portrait head and its "Hesap ve davet" and "Programda" cards, with C's timeline. */
.speaker-head__dim {
    color: var(--es-faint);
    font-weight: 500;
}

.speaker-head {
    align-items: center;
}

.speaker-head__who {
    display: flex;
    flex: 1 1 22rem;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.speaker-head__photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--es-raised);
    box-shadow: 0 0 0 5px var(--es-brand-soft);
}

.speaker-head__photo--initials {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-family: var(--es-font-display);
    font-size: 1.75rem;
    font-weight: 700;
}

.speaker-head__text {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.speaker-head__kicker {
    color: var(--es-brand);
}

.speaker-head__name {
    margin: 0;
    overflow-wrap: anywhere;
}

/* ---- "Hesap ve davet" and "Programda": side by side from xl, one above the other below it */
.speaker-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    margin-bottom: 20px;
}

@media (min-width: 1200px) {
    .speaker-status {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

.speaker-status__card {
    display: grid;
    gap: 18px;
    min-width: 0;
    padding: clamp(1.25rem, .9rem + 1.2vw, 1.75rem);
    border-radius: var(--es-r-xl);
}

.speaker-status__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.speaker-status__title {
    margin: 0;
    color: var(--es-ink);
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: -.03em;
}

.speaker-status__mail {
    color: var(--es-muted);
    font-size: .8125rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.speaker-status__tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

@media (min-width: 576px) {
    .speaker-status__tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.speaker-status__tile {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 10px;
    padding: 18px;
    border-radius: 22px;
    background: var(--es-fill);
}

.speaker-status__tile--ok {
    background: var(--es-ok-soft);
}

.speaker-status__tile--warn {
    background: var(--es-warn-soft);
}

.speaker-status__tile--bad {
    background: var(--es-bad-soft);
}

.speaker-status__label {
    color: var(--es-muted);
    font-size: .8rem;
    font-weight: 600;
}

.speaker-status__note {
    color: var(--es-muted);
    font-size: .8125rem;
}

.speaker-status__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .875rem;
    font-weight: 600;
}

.speaker-status__link svg {
    width: 14px;
    height: 14px;
}

.speaker-status__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

/* C's timeline: a rule with a dot per step; the step still to come is faint. */
.speaker-timeline {
    display: grid;
    gap: 14px;
    margin: 0 0 0 6px;
    padding: 0 0 0 18px;
    border-left: 2px solid var(--es-line-strong);
    list-style: none;
}

.speaker-timeline__step {
    position: relative;
    display: grid;
    gap: 2px;
}

.speaker-timeline__step::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -24px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--es-faint);
    box-shadow: 0 0 0 3px var(--es-surface);
}

.speaker-timeline__step--brand::before {
    background: var(--es-brand);
}

.speaker-timeline__step--ok::before {
    background: var(--es-dot-ok);
}

.speaker-timeline__step--warn::before {
    background: var(--es-dot-warn);
}

.speaker-timeline__step--bad::before {
    background: var(--es-dot-bad);
}

.speaker-timeline__step--next {
    opacity: .6;
}

.speaker-timeline__what {
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 600;
}

.speaker-timeline__when {
    color: var(--es-muted);
    font-size: .8rem;
}

/* ---- the form and its side column */
.speaker-edit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    margin-bottom: 3rem;
}

@media (min-width: 992px) {
    .speaker-edit {
        grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
    }
}

.speaker-edit__main,
.speaker-edit__aside {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.speaker-edit__card {
    display: grid;
    gap: 22px;
    min-width: 0;
    padding: clamp(1.25rem, .9rem + 1.2vw, 1.75rem);
    border-radius: var(--es-r-xl);
}

.speaker-edit__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
}

.speaker-edit__head-text {
    flex: 1 1 12rem;
    min-width: 0;
}

.speaker-edit__title {
    margin: 0;
    color: var(--es-ink);
    font-size: 1.375rem;
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.speaker-edit__sub {
    margin: .3rem 0 0;
    color: var(--es-muted);
    font-size: .875rem;
}

.speaker-edit__grid,
.speaker-edit__links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem 1.25rem;
}

@media (min-width: 768px) {
    .speaker-edit__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .speaker-edit__full {
        grid-column: 1 / -1;
    }

    .speaker-edit__links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* B's blue note under the address: what saving does with it (AD-24). */
.speaker-edit__hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--es-info-soft);
    color: var(--es-body);
    font-size: .8125rem;
}

.speaker-edit__hint svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--es-info);
}

.speaker-edit__duplicate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: .875rem;
    font-weight: 650;
}

.speaker-edit__duplicate svg {
    width: 15px;
    height: 15px;
}

.speaker-edit__save {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.speaker-edit__save-note {
    flex: 1 1 100%;
    margin: 0;
    color: var(--es-muted);
    font-size: .8125rem;
}

/* C's Kart / Program switch: radios kept focusable under the capsule's labels. */
.speaker-preview-switch {
    position: relative;
    justify-self: center;
}

.speaker-preview-switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.speaker-preview-switch__input:checked + .seg__option {
    background: var(--es-surface);
    color: var(--es-ink);
    box-shadow: var(--es-shadow-1), inset 0 0 0 1px var(--es-glow-line);
}

.speaker-preview-switch__input:focus-visible + .seg__option {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.speaker-preview .speaker-preview__view--programme,
.speaker-edit__aside:has(#speaker-preview-programme:checked) .speaker-preview__view--card {
    display: none;
}

.speaker-edit__aside:has(#speaker-preview-programme:checked) .speaker-preview__view--programme {
    display: grid;
}

/* ---- the phone's screen: the event page's speaker card, or a programme row */
.speaker-preview__view {
    display: grid;
    gap: .6rem;
}

.speaker-preview__kicker {
    color: var(--es-brand-strong);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.speaker-preview__card {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 18px 12px;
    border: 1px solid var(--es-glow-line);
    border-radius: 22px;
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    text-align: center;
}

.speaker-preview__portrait {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
}

.speaker-preview__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.speaker-preview__role {
    padding: .15rem .6rem;
    border-radius: var(--es-r-pill);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-size: .6875rem;
    font-weight: 700;
}

.speaker-preview__name {
    color: var(--es-ink);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.speaker-preview__job {
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 600;
}

.speaker-preview__bio {
    color: var(--es-body);
    font-size: .72rem;
}

.speaker-preview__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.speaker-preview__link {
    padding: 2px 8px;
    border-radius: var(--es-r-pill);
    background: var(--es-fill-2);
    color: var(--es-ink);
    font-size: .6875rem;
    font-weight: 600;
}

.speaker-preview__session {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--es-glow-line);
    border-radius: 18px;
    background: var(--es-surface);
}

.speaker-preview__time {
    color: var(--es-brand-strong);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.speaker-preview__session-body {
    display: grid;
    justify-items: start;
    gap: 5px;
    min-width: 0;
}

.speaker-preview__session-title {
    color: var(--es-ink);
    font-weight: 700;
}

.speaker-preview__who {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 600;
}

.speaker-preview__face {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
}

.speaker-preview__face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.speaker-preview__face svg {
    width: 12px;
    height: 12px;
}

/* The rows around it, blank: the rest of a programme. */
.speaker-preview__ghost {
    height: 48px;
    border-radius: 18px;
    background: var(--es-fill);
}

/* ---- C's completeness card */
.speaker-fill {
    display: grid;
    gap: 12px;
    padding: 18px 20px;
    border-radius: var(--es-r-lg);
}

.speaker-fill__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.speaker-fill__title {
    margin: 0;
    color: var(--es-muted);
    font-family: var(--es-font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.speaker-fill__count {
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.speaker-fill__bar {
    height: 6px;
    overflow: hidden;
    border-radius: var(--es-r-pill);
    background: var(--es-fill-2);
}

.speaker-fill__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--es-brand);
    transition: width var(--es-dur) var(--es-ease);
}

.speaker-fill__list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.speaker-fill__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .8125rem;
}

.speaker-fill__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--es-line-strong);
}

.speaker-fill__label {
    flex: 1 1 auto;
    color: var(--es-body);
}

.speaker-fill__state {
    color: var(--es-faint);
    font-weight: 600;
}

.speaker-fill__item.is-done .speaker-fill__dot {
    background: var(--es-dot-ok);
}

.speaker-fill__item.is-done .speaker-fill__state {
    color: var(--es-ok-strong);
}

@media (max-width: 575.98px) {
    .speaker-head__photo {
        width: 64px;
        height: 64px;
    }
}

/* ------------------------------------------- "Sponsorlar" (plan job 7.9, portal2-Sponsors-C + B)
   C's count line and compact table, B's cards as the other view — the logo on a stage, B's
   "Logo yok" box, the "Yeni eklendi" pill, the dashed "Sponsor ekle" tile last — and C's
   "Seçili sponsor" in the shared review panel (job 4.6). A logo always sits on the white paper the
   event page's sponsor tiles use (--es-paper), so it reads the same as it will there, in both
   themes. */
.sponsor-kicker {
    color: var(--es-brand);
}

.sponsor-logo {
    color-scheme: light;
    color: var(--es-ink);
    display: inline-grid;
    place-items: center;
    flex: none;
    overflow: hidden;
    border: 1px solid var(--es-line);
    border-radius: 12px;
    background: var(--es-paper);
}

.sponsor-logo img {
    width: 100%;
    height: 100%;
    padding: 12%;
    object-fit: contain;
}

.sponsor-logo--sm {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.sponsor-logo--md {
    width: 64px;
    height: 64px;
    border-radius: 16px;
}

.sponsor-logo--lg {
    width: 104px;
    height: 104px;
    border-radius: 24px;
    box-shadow: var(--es-shadow-2);
}

.sponsor-logo--xl {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    box-shadow: 0 0 0 5px var(--es-brand-soft);
}

/* No logo: the dashed empty box of C's table. This box and the initials follow the page's theme
   (inherit), not the white logo tile: "normal" meant light, so they stayed light in the dark
   theme (UIhataları 38). */
.sponsor-logo--none {
    color-scheme: inherit;
    border: 1px dashed var(--es-line-strong);
    background: transparent;
    color: var(--es-faint);
}

.sponsor-logo--none svg {
    width: 45%;
    height: 45%;
}

.sponsor-logo--initials {
    color-scheme: inherit;
    border-color: transparent;
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-family: var(--es-font-display);
    font-size: 1.75rem;
    font-weight: 700;
}

.sponsor-site {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.sponsor-site:hover {
    text-decoration: underline;
}

.sponsor-site__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sponsor-site svg {
    flex: none;
    width: 14px;
    height: 14px;
}

.sponsor-pool {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.sponsor-pool__sum {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 0;
    padding: 0 4px;
    color: var(--es-muted);
    font-size: .8125rem;
}

.sponsor-pool__sum b {
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

/* C's table keeps its width and scrolls in its card on a phone. */
.sponsor-table {
    min-width: 40rem;
}

.sponsor-table__who {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sponsor-table__names {
    display: grid;
    justify-items: start;
    gap: 4px;
    min-width: 0;
}

.sponsor-table__name {
    color: var(--es-ink);
    font-weight: 650;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.sponsor-table__name:hover {
    color: var(--es-brand-strong);
    text-decoration: underline;
}

.sponsor-table__pills,
.sponsor-card__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sponsor-table__none {
    color: var(--es-faint);
}

.sponsor-card__actions {
    flex-wrap: wrap;
}

.sponsor-table__actions,
.sponsor-card__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

/* Each button posts a form of its own; the forms take no room so the buttons wrap as one row. */
.sponsor-table__actions form,
.sponsor-card__actions form,
.sponsor-panel__foot form {
    display: contents;
}

/* B's cards: three to a row where there is room. */
.sponsor-cards {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sponsor-card > article {
    display: grid;
    grid-template-rows: auto auto 1fr;
    height: 100%;
    padding: 12px;
    border: 1px solid var(--es-glow-line);
    border-radius: 30px;
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    transition: border-color var(--es-dur-fast) var(--es-ease);
}

.sponsor-card > article:hover {
    border-color: var(--es-glow-line-hover);
}

/* The card the panel shows: the ember edge, as a selected table row's bar (job 4.6). */
.sponsor-card.is-selected > article {
    border-color: var(--es-brand);
    box-shadow: 0 0 0 3px var(--es-brand-soft), var(--es-card-shadow);
}

.sponsor-card__stage {
    position: relative;
    display: grid;
    place-items: center;
    height: 160px;
    border-radius: 22px;
    background: var(--es-fill);
}

/* B tints the stage of the one just added green and an organization sponsor's ember. */
.sponsor-card__stage--new {
    background: var(--es-ok-soft);
}

.sponsor-card__stage--org {
    background: var(--es-brand-soft);
}

.sponsor-card__pills {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
}

.sponsor-card__nologo {
    display: grid;
    justify-items: center;
    gap: 6px;
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 600;
}

.sponsor-card__nologo-icon {
    border: 1.5px dashed var(--es-line-strong);
    background: var(--es-surface);
    color: var(--es-faint);
}

.sponsor-card__who {
    display: grid;
    justify-items: start;
    gap: 6px;
    min-width: 0;
    padding: 18px 10px 4px;
}

.sponsor-card__name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.sponsor-card__name a {
    color: var(--es-ink);
    text-decoration: none;
}

.sponsor-card__name a:hover {
    color: var(--es-brand-strong);
    text-decoration: underline;
}

.sponsor-card__none {
    color: var(--es-faint);
    font-size: .875rem;
}

.sponsor-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 10px 8px;
}

.sponsor-card__events {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-body);
    font-size: .8125rem;
    font-weight: 600;
}

.sponsor-card__events svg {
    width: 14px;
    height: 14px;
    color: var(--es-muted);
}

/* B's dashed tile at the end of the grid. */
.sponsor-add__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    min-height: 18rem;
    padding: 24px;
    border: 2px dashed var(--es-line-strong);
    border-radius: 30px;
    color: var(--es-ink);
    text-align: center;
    text-decoration: none;
    transition: border-color var(--es-dur-fast) var(--es-ease), background-color var(--es-dur-fast) var(--es-ease);
}

.sponsor-add__link:not(.is-locked):hover {
    border-color: var(--es-brand);
    background: var(--es-brand-soft);
    color: var(--es-ink);
}

.sponsor-add__text {
    font-family: var(--es-font-display);
    font-size: 1.15rem;
    font-weight: 700;
}

.sponsor-add__hint {
    max-width: 14rem;
    color: var(--es-muted);
    font-size: .8125rem;
}

/* ---- the review panel's body */
.sponsor-panel__who {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.sponsor-panel__none {
    color: var(--es-faint);
    font-size: .875rem;
}

.sponsor-panel__text {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--es-body);
    font-size: .875rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
}

.sponsor-panel__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--es-line);
}

.sponsor-panel__foot .btn:first-child {
    flex: 1 1 auto;
}

/* ---- "Göründüğü etkinlikler": C's ruled list in the panel, its table with B's covers on the edit page */
.sponsor-events {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.sponsor-events:not(.sponsor-events--compact) {
    padding: 0;
    overflow: hidden;
    border-radius: var(--es-r-xl);
}

.sponsor-events__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sponsor-events:not(.sponsor-events--compact) .sponsor-events__head {
    padding: 16px 20px 0;
}

.sponsor-events__title {
    margin: 0;
    color: var(--es-brand-strong);
    font-family: var(--es-font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sponsor-events__none {
    display: grid;
    justify-items: center;
    gap: 6px;
    margin: 0 0 4px;
    padding: 18px;
    border-radius: 20px;
    background: var(--es-fill);
    text-align: center;
}

.sponsor-events:not(.sponsor-events--compact) .sponsor-events__none {
    margin: 0 20px 20px;
}

.sponsor-events__none-title {
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 650;
}

.sponsor-events__none-text {
    color: var(--es-muted);
    font-size: .8125rem;
}

.sponsor-events__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sponsor-events__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 0;
    border-top: 1px solid var(--es-line);
    color: var(--es-body);
    text-decoration: none;
}

.sponsor-events__row:hover .sponsor-events__name {
    color: var(--es-brand-strong);
    text-decoration: underline;
}

.sponsor-events__text {
    display: grid;
    flex: 1 1 auto;
    gap: 3px;
    min-width: 0;
}

.sponsor-events__name {
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.sponsor-events__when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    color: var(--es-muted);
    font-size: .75rem;
}

/* The tier a sponsor bought on one event: C's outlined ember pill, no dot (a rank, not a state). */
.sponsor-tier {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: 2px 10px;
    border: 1px solid var(--es-brand-border);
    border-radius: var(--es-r-pill);
    color: var(--es-brand-strong);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.sponsor-tier--none {
    border-color: var(--es-line-strong);
    color: var(--es-muted);
    font-weight: 600;
}

.sponsor-events__scroll {
    overflow-x: auto;
}

.sponsor-events__table {
    margin: 0;
}

.sponsor-events__table > :not(caption) > * > * {
    padding: 10px 20px;
    vertical-align: middle;
}

.sponsor-events__event {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--es-body);
    text-decoration: none;
}

.sponsor-events__event:hover .sponsor-events__name {
    color: var(--es-brand-strong);
    text-decoration: underline;
}

/* B's cover, small: 16:9 like every cover on the site (A-3). */
.sponsor-events__cover {
    display: grid;
    place-items: center;
    flex: none;
    width: 64px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: var(--es-fill);
    color: var(--es-faint);
}

.sponsor-events__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sponsor-events__cover svg {
    width: 16px;
    height: 16px;
}

.sponsor-events__note {
    margin: 0;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--es-line);
    color: var(--es-faint);
    font-size: .75rem;
}

/* ------------------------------------------- "Sponsor ekle / düzenle" (plan job 7.10, portal2-SponsorNew-C, portal2-SponsorEdit-C + B)
   C's one form card with its logo row and switch (B's strip of the other organization sponsors
   beside it) on the left; on the right the events it is on, the sponsor drawn into a real event's
   sponsor row, and C's "Kapsam" card without its community-page row (B-24). */
.sponsor-head {
    align-items: center;
    padding: clamp(1.25rem, .9rem + 1.2vw, 1.75rem);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background:
        radial-gradient(120% 140% at 100% 0%, var(--es-brand-soft), transparent 60%),
        var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.sponsor-head__who {
    display: flex;
    flex: 1 1 22rem;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.sponsor-head__text {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.sponsor-head__kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.sponsor-head__name {
    margin: 0;
    overflow-wrap: anywhere;
}

.sponsor-edit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    margin-bottom: 3rem;
}

@media (min-width: 992px) {
    .sponsor-edit {
        grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
    }
}

.sponsor-edit__main,
.sponsor-edit__aside {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.sponsor-form {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--es-r-xl);
}

.sponsor-form__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(1.25rem, .9rem + 1.2vw, 1.75rem) clamp(1.25rem, .9rem + 1.2vw, 1.75rem) 0;
}

.sponsor-form__head-text {
    flex: 1 1 12rem;
    min-width: 0;
}

.sponsor-form__title {
    margin: 0;
    color: var(--es-ink);
    font-size: 1.375rem;
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.sponsor-form__sub {
    margin: .3rem 0 0;
    color: var(--es-muted);
    font-size: .875rem;
}

.sponsor-form__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem 1.25rem;
    padding: 22px clamp(1.25rem, .9rem + 1.2vw, 1.75rem);
}

@media (min-width: 768px) {
    .sponsor-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sponsor-form__full {
        grid-column: 1 / -1;
    }
}

.sponsor-form__logo {
    padding: 20px clamp(1.25rem, .9rem + 1.2vw, 1.75rem) 22px;
    border-top: 1px solid var(--es-line);
}

/* The switch row: the words, B's strip, then the switch itself on the right. */
.sponsor-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 16px;
    padding: 18px clamp(1.25rem, .9rem + 1.2vw, 1.75rem);
    border-top: 1px solid var(--es-line);
    transition: background-color var(--es-dur-fast) var(--es-ease);
}

.sponsor-switch:has(.sponsor-switch__input:checked) {
    background: var(--es-brand-soft);
}

.sponsor-switch__text {
    display: grid;
    flex: 1 1 16rem;
    gap: 4px;
    min-width: 0;
}

.sponsor-switch__label {
    color: var(--es-ink);
    font-size: .9375rem;
    font-weight: 650;
    cursor: pointer;
}

.sponsor-switch__hint {
    color: var(--es-muted);
    font-size: .8125rem;
}

.sponsor-switch__input {
    margin-left: auto;
}

.sponsor-strip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 16px;
    background: var(--es-fill);
}

.sponsor-strip__logos {
    display: inline-flex;
}

.sponsor-strip__logo {
    color-scheme: light;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border: 1px solid var(--es-line);
    border-radius: 10px;
    background: var(--es-paper);
    box-shadow: 0 0 0 2px var(--es-surface);
    color: var(--es-ink);
    font-size: .6875rem;
    font-weight: 700;
}

.sponsor-strip__logo + .sponsor-strip__logo {
    margin-left: -8px;
}

.sponsor-strip__logo img {
    width: 100%;
    height: 100%;
    padding: 3px;
    object-fit: contain;
}

.sponsor-strip__logo--more {
    color-scheme: inherit;
    background: var(--es-fill-2);
    color: var(--es-muted);
}

.sponsor-strip__text {
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 600;
}

.sponsor-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 12px;
    padding: 16px clamp(1.25rem, .9rem + 1.2vw, 1.75rem);
    border-top: 1px solid var(--es-line);
    background: var(--es-raised);
}

.sponsor-form__foot-note {
    flex: 1 1 14rem;
    margin: 0;
    color: var(--es-muted);
    font-size: .8125rem;
}

/* ---- C's preview: the event page's sponsor row, this sponsor's tile on the ember */
.sponsor-preview {
    padding: 0;
    overflow: hidden;
    border-radius: var(--es-r-xl);
}

.sponsor-preview__bar {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--es-line);
}

.sponsor-preview__kicker,
.sponsor-preview__section {
    color: var(--es-brand-strong);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sponsor-preview__where {
    color: var(--es-faint);
    font-size: .75rem;
}

.sponsor-preview__cover {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 7.5rem;
    overflow: hidden;
    padding: 12px 18px;
    background: var(--es-fill);
}

.sponsor-preview__cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The scrim under the event's name: the name is light on whatever the cover is. */
.sponsor-preview__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--es-photo-scrim-soft), var(--es-photo-scrim));
}

.sponsor-preview__event {
    position: relative;
    z-index: 1;
    color: var(--es-on-photo);
    font-size: .8125rem;
    font-weight: 650;
}

.sponsor-preview__body {
    display: grid;
    gap: 10px;
    padding: 16px 18px 18px;
}

.sponsor-preview__tier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--es-ink);
    font-size: .8125rem;
    font-weight: 700;
}

.sponsor-preview__tier svg {
    width: 16px;
    height: 16px;
    color: var(--es-brand);
}

.sponsor-preview__tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sponsor-preview__tile {
    color-scheme: light;
    color: var(--es-ink);
    display: grid;
    place-items: center;
    height: 64px;
    padding: 8px;
    overflow: hidden;
    border: 1px solid var(--es-line);
    border-radius: 14px;
    background: var(--es-paper);
    opacity: .6;
}

.sponsor-preview__tile img {
    max-width: 85%;
    max-height: 44px;
    object-fit: contain;
}

.sponsor-preview__tile--this {
    border-color: var(--es-brand);
    box-shadow: 0 0 0 3px var(--es-brand-soft);
    opacity: 1;
}

.sponsor-preview__name {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
}

.sponsor-preview__note {
    margin: 0;
    color: var(--es-faint);
    font-size: .75rem;
}

/* ---- C's "Kapsam" card */
.sponsor-scope {
    display: grid;
    gap: 10px;
    padding: 18px 20px;
    border-radius: var(--es-r-xl);
}

.sponsor-scope__title {
    margin: 0;
    color: var(--es-muted);
    font-family: var(--es-font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sponsor-scope__list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sponsor-scope__row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .875rem;
}

.sponsor-scope__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--es-line-strong);
}

.sponsor-scope__dot--on {
    background: var(--es-dot-ok);
}

.sponsor-scope__what {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--es-body);
}

.sponsor-scope__value {
    flex: none;
    color: var(--es-ok-strong);
    font-size: .75rem;
    font-weight: 700;
}

/* The flag line follows the switch beside it (:has), so it is right with script off. */
.sponsor-scope__value--on,
.sponsor-edit:has(.sponsor-switch__input:checked) .sponsor-scope__value--off {
    display: none;
}

.sponsor-edit:has(.sponsor-switch__input:checked) .sponsor-scope__value--on {
    display: inline;
}

.sponsor-scope__value--off {
    color: var(--es-faint);
}

.sponsor-edit:has(.sponsor-switch__input:checked) .sponsor-scope__dot--flag {
    background: var(--es-dot-ok);
}

@media (max-width: 575.98px) {
    .sponsor-card > article,
    .sponsor-add__link {
        border-radius: var(--es-r-xl);
    }

    .sponsor-add__link {
        min-height: 10rem;
    }

    .sponsor-logo--xl {
        width: 64px;
        height: 64px;
    }

    .sponsor-switch__input {
        margin-left: 0;
    }
}

/* ------------------------------------------- "API erişimi" (plan job 7.11, portal2-ApiKeys-C + B)
   C's page: the key just made on a lit card (shown once, §23), the keys in a compact table under
   B's "N etkin · M iptal" with the new row lit, "Nasıl kullanılır" with the curl request and the
   endpoints, and beside them the form and C's "İki kullanım". A refused origins field repeats its
   lines under it, numbered, the wrong ones on the bad tint (C's "Satır hataları"). */

/* ---- "Bir kez gösterilir": the ember edge and a soft glow from its corner, in both themes */
.apikey-new {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--es-brand-border);
    border-radius: var(--es-r-lg);
    background: radial-gradient(120% 140% at 8% -30%, var(--es-brand-soft), transparent 62%), var(--es-surface);
    box-shadow: 0 0 0 1px var(--es-brand-border), 0 30px 60px -36px var(--es-brand-shadow);
}

.apikey-new__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
}

.apikey-new__titles {
    display: grid;
    flex: 1 1 15rem;
    gap: .2rem;
    min-width: 0;
}

.apikey-new__title {
    margin: 0;
    color: var(--es-ink);
    font-size: 1.25rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* The warning is a sentence: it wraps on a phone rather than pushing the card wide. */
.apikey-new__warn {
    white-space: normal;
}

/* C's key strip: the darkest ground the theme has, the key in the code accent. */
.apikey-new__key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .8rem;
    padding: .5rem .5rem .5rem 1.1rem;
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r);
    background: var(--es-page);
}

.apikey-new__label {
    color: var(--es-faint);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* With script off there is no copy button: one click selects the whole key. */
.apikey-new__value {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0;
    background: none;
    color: var(--es-code-key);
    font-size: 1rem;
    word-break: break-all;
    user-select: all;
}

.apikey-new__note {
    margin: 0;
    color: var(--es-muted);
    font-size: .8rem;
}

/* ---- the keys */
.apikey-list {
    display: grid;
    gap: .75rem;
}

.apikey-list__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.apikey-list__title {
    margin: 0;
    color: var(--es-ink);
    font-size: 1.1rem;
}

.apikey-list__counts {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.apikey-table {
    min-width: 40rem;
}

.apikey-table__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    color: var(--es-ink);
    font-weight: 650;
}

.apikey-table__prefix {
    display: block;
    width: fit-content;
    margin-top: .2rem;
    padding: 0;
    background: none;
    color: var(--es-brand);
    font-size: .78rem;
}

.apikey-table__sub {
    color: var(--es-muted);
    font-size: .78rem;
}

/* The key just made: C's lit row, with an ember edge on its first cell. */
.apikey-table tr.is-new > td {
    --bs-table-bg: var(--es-brand-soft);
    background: var(--es-brand-soft);
}

.apikey-table tr.is-new > td:first-child {
    box-shadow: inset 3px 0 0 var(--es-brand);
}

.apikey-table tr.is-revoked .apikey-table__name,
.apikey-table tr.is-revoked .apikey-table__prefix {
    color: var(--es-muted);
}

.apikey-origins {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--es-body);
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
}

/* One origin per line, never broken mid-address at 390: the table's own scroll box takes the width. */
.apikey-origins li {
    white-space: nowrap;
}

/* ---- "Nasıl kullanılır": C's card, B's "Anahtarı başlıkta gönderin" */
.apikey-how {
    margin-top: 1.5rem;
    overflow: hidden;
}

.apikey-how__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .85rem 1.35rem;
    border-bottom: 1px solid var(--es-line);
}

.apikey-how__mode {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--es-muted);
    font-size: .75rem;
}

.apikey-how__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--es-dot-ok);
}

.apikey-how__body {
    display: grid;
    gap: .9rem;
    min-width: 0;
    padding: 1.2rem 1.35rem 1.35rem;
}

.apikey-how__body p {
    margin: 0;
}

.apikey-how__title {
    margin: 0;
    color: var(--es-ink);
    font-size: 1.1rem;
}

.apikey-how__note {
    color: var(--es-muted);
    font-size: .8rem;
}

.apikey-endpoints {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.apikey-endpoints li {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .45rem .65rem;
    border: 1px solid var(--es-line);
    border-radius: 10px;
    background: var(--es-wash);
    color: var(--es-ink);
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .75rem;
    overflow-wrap: anywhere;
}

.apikey-endpoints__verb {
    color: var(--es-brand);
    font-size: .65rem;
    font-weight: 700;
}

/* ---- the side column: the form and "İki kullanım" */
.apikey-side {
    display: grid;
    gap: 1rem;
}

.apikey-form {
    overflow: hidden;
}

.apikey-form__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.35rem;
    border-bottom: 1px solid var(--es-line);
}

.apikey-form__title {
    margin: 0;
    color: var(--es-ink);
    font-size: 1rem;
}

.apikey-form__body {
    display: grid;
    gap: 1rem;
    padding: 1.2rem 1.35rem 1.35rem;
}

.apikey-form__origins {
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85rem;
}

/* C's "Satır hataları": the lines as typed, numbered, the refused ones on the bad tint. */
.origin-lines {
    margin: .5rem 0 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    border: 1px solid var(--es-bad-border);
    border-radius: 12px;
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
}

.origin-lines__line {
    display: flex;
    min-width: 0;
}

.origin-lines__line + .origin-lines__line {
    border-top: 1px solid var(--es-line);
}

.origin-lines__number {
    flex: 0 0 2rem;
    padding: .4rem 0;
    border-right: 1px solid var(--es-line);
    color: var(--es-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.origin-lines__text {
    flex: 1 1 auto;
    min-width: 0;
    padding: .4rem .65rem;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.origin-lines__line.is-invalid {
    background: var(--es-bad-soft);
}

.origin-lines__line.is-invalid .origin-lines__number {
    color: var(--es-bad);
    font-weight: 700;
}

.apikey-uses {
    display: grid;
    gap: .8rem;
    padding: 1.1rem 1.35rem 1.25rem;
}

.apikey-uses > h2 {
    margin: 0;
}

.apikey-uses__item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-size: .875rem;
}

.apikey-uses__name {
    display: block;
    color: var(--es-ink);
    font-weight: 650;
}

.apikey-uses__text {
    display: block;
    color: var(--es-muted);
    font-size: .8rem;
}

@media (max-width: 575.98px) {
    .apikey-new {
        padding: 1.15rem 1rem;
    }

    .apikey-new__key {
        padding-left: .85rem;
    }
}

/* ------------------------------------------- "Raporlar" (plan job 7.12, portal2-Reports-B + C)
   B's large rate card beside five counts, the nested registration/check-in columns (job 4.7)
   beside C's ranked "Giriş oranı", B's event table with covers and rate bars, and "En yoğun
   oturumlar" as B's ranked cards, two to a row from md. Every colour is a chart or role token, so
   the page follows the theme as the charts do. */

/* ---- the rate card and the counts */
.report-top {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
    .report-top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}

.report-rate {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 1rem;
    padding: 1.5rem;
    text-align: center;
}

.report-rate__title {
    justify-self: start;
    margin: 0;
}

.report-rate__ring {
    --ring-size: 12rem;
    --ring-thickness: 18px;
}

.report-rate__facts {
    display: flex;
    margin: 0;
}

/* The number above its word, as B draws it; dt still comes first for a screen reader. */
.report-rate__facts > div {
    display: flex;
    flex-direction: column-reverse;
    padding: 0 1.25rem;
}

.report-rate__facts > div + div {
    border-left: 1px solid var(--es-line);
}

.report-rate__facts dt {
    color: var(--es-muted);
    font-size: .78rem;
    font-weight: 500;
}

.report-rate__facts dd {
    margin: 0;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Two to a row on a phone, three from md; "Oturum katılımı" takes two, and dense placement
   fills the hole it would leave — B's 3 + 2 on a desk, 2 + 2 + 1 wide on a phone. */
.report-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 1rem;
}

.report-stats__wide {
    grid-column: span 2;
}

@media (min-width: 768px) {
    .report-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---- the cards of the second row and the sessions */
.report-row {
    margin-bottom: 1.5rem;
}

.report-card {
    display: grid;
    align-content: start;
    gap: 1rem;
    height: 100%;
    min-width: 0;
    padding: 1.35rem 1.5rem;
}

.report-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.report-card__title {
    margin: 0;
    color: var(--es-ink);
    font-size: 1.05rem;
    line-height: 1.3;
}

.report-card__note {
    margin: .2rem 0 0;
    color: var(--es-muted);
    font-size: .8rem;
}

.report-card__empty {
    margin: 0;
    padding: 1.25rem;
    border-radius: var(--es-r);
    background: var(--es-fill);
    color: var(--es-muted);
    font-size: .875rem;
    text-align: center;
}

.report-card__foot {
    margin: 0;
    color: var(--es-muted);
    font-size: .78rem;
}

/* The page's own axis under the nested columns (the shared one would name the events, which
   the hidden table does instead): the same gap and inset as .chart-cols. */
.report-chart__axis {
    --chart-gap: 1rem;
    padding-inline: .5rem;
}

@media (max-width: 575.98px) {
    .report-chart .chart-cols,
    .report-chart__axis {
        --chart-gap: .35rem;
        padding-inline: .25rem;
    }

    /* Ten dates do not fit under ten thin columns: every other one, the bars keep their order. */
    .report-chart__axis > :nth-child(even) {
        visibility: hidden;
    }
}

/* ---- C's "Giriş oranı" */
.report-rates__overall {
    color: var(--es-ink);
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
}

.report-rates__list {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.report-rates__item {
    display: grid;
    gap: .35rem;
}

.report-rates__line {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: .8rem;
}

.report-rates__name {
    min-width: 0;
    overflow: hidden;
    color: var(--es-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-rates__value {
    color: var(--es-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.report-rates__bar {
    position: relative;
    display: block;
}

/* The organization's own rate, a thin line across every bar (C). */
.report-rates__mark {
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: var(--mark, 0%);
    width: 1px;
    background: var(--es-muted);
}

.report-rates__key {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.report-rates__key-mark {
    width: 1px;
    height: 10px;
    background: var(--es-muted);
}

/* ---- the events: B's table with a 16:9 cover thumbnail (A-3) and the rate as a bar */
.report-events {
    display: grid;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.report-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.report-section-head__title {
    margin: 0;
    color: var(--es-ink);
    font-size: 1.1rem;
}

.report-table {
    min-width: 46rem;
}

.report-table__event {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 14rem;
}

.report-table__thumb.show-card__cover {
    flex: 0 0 64px;
    width: 64px;
    border-radius: 10px;
}

.report-table__names {
    display: grid;
    gap: .25rem;
    min-width: 0;
}

.report-table__name {
    color: var(--es-ink);
    font-weight: 650;
    text-decoration: none;
}

.report-table__name:hover {
    color: var(--es-brand);
    text-decoration: underline;
}

.report-table__status {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.report-table__rate-col {
    width: 22%;
}

.report-table__rate {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 8rem;
}

.report-table__rate .chart-meter {
    flex: 1 1 auto;
}

.report-table__rate-value {
    flex: 0 0 2.75rem;
    color: var(--es-ink);
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- "En yoğun oturumlar": B's ranked cards, the first three on the ember */
.report-sessions__list {
    display: grid;
    align-items: start;
    gap: .75rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .report-sessions__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.report-session {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r);
    background: var(--es-raised);
}

.report-session__rank {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--es-fill-2);
    color: var(--es-ink);
    font-size: .75rem;
    font-weight: 800;
}

.report-session.is-top .report-session__rank {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.report-session__names {
    display: grid;
    min-width: 0;
}

.report-session__name {
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.report-session__where {
    color: var(--es-muted);
    font-size: .75rem;
}

.report-session__count {
    display: grid;
    justify-items: end;
    text-align: right;
}

.report-session__number {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.report-session__fill {
    color: var(--es-muted);
    font-size: .7rem;
}

.report-session__bar {
    grid-column: 1 / -1;
    height: 8px;
}

.report-sessions__empty {
    padding: 2rem 1.25rem;
}

@media (max-width: 575.98px) {
    .report-rate,
    .report-card {
        padding: 1.15rem 1rem;
    }

    .report-rate__ring {
        --ring-size: 10rem;
    }
}

/* =============================================================================================
   PORTAL: EVENT SCREENS (plan Stage 8, design.md §8.2, DD-35)
   ============================================================================================= */

/* ------------------------------------------- "Etkinlikler" (plan job 8.1, portal3-Events-B + C)
   The organization's events (UIhataları 43): one "Sıradaki" line, the counted phase tabs beside
   the list / card switch, then the "Yaklaşan" / "Geçmiş" shelves of rows or cards, each with its
   one state as a tinted badge and a coloured left edge. The covers are the shared ones
   (.show-card__cover with its fallback swatch, .date-block), so a cover-less event looks the same
   here as on the public site. */
.evlist-head__count {
    color: var(--es-faint);
    font-weight: 600;
}

/* "Sıradaki": the nearest published event on one line over the unfiltered list. It replaced B's
   two-card bento, which pushed the list itself below the fold (UIhataları 43). */
.evlist-next-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-2) var(--es-space-3);
    margin: 0 0 var(--es-space-4);
    padding: var(--es-space-3) var(--es-space-4);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    font-size: var(--es-fs-sm);
}

.evlist-next-line__label {
    font-size: var(--es-fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--es-faint);
}

.evlist-next-line__name {
    min-width: 0;
    font-weight: 700;
    color: var(--es-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.evlist-next-line__name:hover {
    color: var(--es-brand-strong);
}

.evlist-next-line__meta {
    color: var(--es-muted);
    font-variant-numeric: tabular-nums;
}

/* The row's state edge on its first cell (UIhataları 43). */
.evlist-row > :first-child {
    border-left: 3px var(--phase-style) var(--phase-c);
}

/* The card's state edge: a strip inside the card's left side, beside the inset cover. */
.evc.phase-edge::before {
    content: "";
    position: absolute;
    top: var(--es-space-6);
    bottom: var(--es-space-6);
    left: 0;
    border-left: 4px var(--phase-style) var(--phase-c);
    pointer-events: none;
}

/* 44px targets on a touch screen (UIhataları 82). */
@media (pointer: coarse) {
    .evlist-next-line__name,
    .evlist-table__event a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* The whole card is the link (Bootstrap's .stretched-link), so its ring goes on the card. */
.evc:has(.evc__name a:focus-visible) {
    outline: 2px solid var(--es-brand);
    outline-offset: 3px;
}

/* The tabs and the view switch share one row; on a phone the switch drops under the tabs. */
.evlist-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: var(--es-space-4);
}

.evlist-bar .tabs {
    min-width: 0;
    margin-bottom: 0;
}

.evlist-bar__view {
    flex: 0 0 auto;
}

.evlist-group + .evlist-group {
    margin-top: var(--es-space-7);
}

.evlist-group__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: var(--es-space-3);
}

.evlist-group__title {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h3);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--es-ink);
}

.evlist-group__rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--es-line);
}

/* min(100%, …) is what keeps a phone from scrolling sideways when one column is all there is. */
.evlist-grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: var(--es-space-4);
}

/* B's event card: the cover inset in the card with its own corners and the date tile on it, the
   state badge in the body (UIhataları 43), the name in the display face, and the counts as chips
   by the arrow. */
.evc {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 8px;
    border-radius: 28px;
    transition: transform var(--es-dur-fast) var(--es-ease), box-shadow var(--es-dur-fast) var(--es-ease),
        border-color var(--es-dur-fast) var(--es-ease);
}

.evc:hover {
    transform: translateY(-2px);
    box-shadow: var(--es-card-shadow-hover);
    border-color: var(--es-glow-line-hover);
}

.evc__cover.show-card__cover {
    border-radius: 22px;
}

.evc:hover .evc__cover img {
    transform: scale(1.03);
}

/* The one state badge, in the card's body: a tinted badge has no ground of its own on a
   photograph, so it left the cover (UIhataları 43). */
.evc__status {
    display: flex;
    justify-self: start;
}

.evc__body {
    display: grid;
    gap: .45rem;
    padding: 16px 12px 6px;
}

.evc__name {
    margin: 0 0 .15rem;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h3);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.evc__name a {
    color: var(--es-ink);
    text-decoration: none;
}

.evc__name a:focus-visible {
    outline: none;
}

.evc__meta {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--es-muted);
    overflow-wrap: anywhere;
}

.evc__meta > span {
    flex: 1 1 0;
    min-width: 0;
}

.evc__meta > svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--es-faint);
}

.evc__meta--faint {
    color: var(--es-faint);
}

.evc__zone {
    color: var(--es-faint);
    font-size: .75rem;
    font-weight: 500;
}

/* B's "2 gün" beside the dates of a multi-day event. */
.evlist-days.pill {
    min-height: 20px;
    padding: .05rem .55rem;
    border-color: var(--es-brand-border);
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-size: .7rem;
}

.evc__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 10px 4px 4px 8px;
}

.evc__chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 30px;
    padding: 0 .75rem;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    font-size: .78rem;
    font-weight: 600;
    color: var(--es-body);
    font-variant-numeric: tabular-nums;
}

.evc__chip svg {
    width: 14px;
    height: 14px;
    color: var(--es-faint);
}

.evc__go {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-ink);
    transition: background-color var(--es-dur-fast) var(--es-ease), color var(--es-dur-fast) var(--es-ease);
}

.evc__go svg {
    width: 16px;
    height: 16px;
}

.evc:hover .evc__go {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

/* C's columned list. The table keeps its width and scrolls inside the card on a phone. */
.evlist-table {
    min-width: 44rem;
}

.evlist-table__name {
    font-weight: 600;
}

.evlist-table__event {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 14rem;
}

.evlist-table__event a {
    color: var(--es-ink);
    font-weight: 700;
    text-decoration: none;
}

.evlist-table__event a:hover {
    color: var(--es-brand-strong);
}

.evlist-table__thumb.show-card__cover {
    flex: 0 0 56px;
    width: 56px;
    border-radius: var(--es-r-xs);
}

.evlist-table__when {
    min-width: 11rem;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.evlist-table__num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .evlist-bar__view {
        width: 100%;
    }

    .evlist-bar__view .seg__option {
        flex: 1 1 0;
    }
}

/* ------------------------------------------- "Genel bakış" of an event (UIhataları 44, 70)
   Only what is the event's as a whole: a compact hero (the one state, K11; when and where; the
   next step's buttons and a "…" menu; the cover as a 16:9 inset), the draft's "Yayına hazır mı?",
   five counts that open their lists and the application link on one line (AD-21). Everything
   else is a tab of .evnav. Built on the T1 scale: no size of its own above --es-fs-title. */
/* A row on purpose: Bootstrap's .card is a column. */
.evo-hero {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--es-space-4);
    margin-bottom: var(--es-space-4);
    padding: var(--es-card-pad);
    border-radius: var(--es-r-xl);
}

.evo-hero__main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--es-space-3);
    min-width: 0;
}

.evo-hero__state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-2);
    margin: 0;
}

.evo-hero__countdown {
    font-size: var(--es-fs-sm);
    font-weight: 600;
    color: var(--es-muted);
}

.evo-hero__title {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h1);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.evo-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-space-1) var(--es-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--es-fs-sm);
    font-weight: 500;
    color: var(--es-body);
}

.evo-hero__facts li {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--es-space-2);
    min-width: 0;
    overflow-wrap: anywhere;
}

.evo-hero__facts svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--es-muted);
}

.evo-hero__facts li.is-missing {
    color: var(--es-muted);
}

.evo-hero__zone {
    color: var(--es-faint);
    font-size: var(--es-fs-xs);
}

.evo-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-2);
    margin-top: auto;
    padding-top: var(--es-space-1);
}

.evo-hero__actions > form {
    display: contents;
}

/* The cover: a 16:9 inset beside the words, never taller than they are. The fallback (no photo)
   is .show-card__cover.is-fallback's, unchanged (UIhataları 27, 30). */
.evo-hero__cover.show-card__cover {
    flex: 0 0 clamp(200px, 26%, 300px);
    align-self: center;
    border-radius: var(--es-r-lg);
}

/* The "…" menu: a <details>, so it opens with script off; site.js closes it on a click elsewhere
   and on Escape, as it does the session and organization menus. */
.evo-menu {
    position: relative;
}

.evo-menu__button {
    list-style: none;
    cursor: pointer;
}

.evo-menu__button::-webkit-details-marker {
    display: none;
}

.evo-menu[open] > .evo-menu__button {
    background: var(--es-fill-2);
    color: var(--es-ink);
}

.evo-menu__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 5;
    min-width: 15rem;
}

.evo-menu__panel form {
    margin: 0;
}

.evo-menu[open] > .evo-menu__panel {
    transform-origin: top left;
    animation: es-menu-in var(--es-dur) var(--es-ease);
}

/* "Yayına hazır mı?": n/3 in the warning hue until all three are there, the three conditions
   side by side on a wide screen, and a fix button only on what is missing. */
.evo-ready {
    display: grid;
    gap: var(--es-space-3);
    margin-bottom: var(--es-space-4);
    padding: var(--es-space-4) var(--es-card-pad);
}

.evo-ready__head {
    display: flex;
    align-items: baseline;
    gap: var(--es-space-3);
}

.evo-ready__title {
    margin: 0;
    font-size: var(--es-fs-h3);
    font-weight: 700;
    color: var(--es-ink);
}

.evo-ready__score {
    font-size: var(--es-fs-lg);
    font-weight: 700;
    color: var(--es-warn);
    font-variant-numeric: tabular-nums;
}

.evo-ready.is-ready .evo-ready__score {
    color: var(--es-ok);
}

.evo-ready__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--es-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.evo-ready__item {
    display: flex;
    align-items: center;
    gap: var(--es-space-3);
    min-width: 0;
    padding: var(--es-space-2) var(--es-space-3);
    border-radius: var(--es-r);
    background: var(--es-fill);
}

.evo-ready__text {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.evo-ready__label {
    font-size: var(--es-fs-sm);
    font-weight: 700;
    color: var(--es-ink);
}

.evo-ready__detail {
    font-size: var(--es-fs-xs);
    color: var(--es-muted);
    overflow-wrap: anywhere;
}

.evo-ready__note {
    margin: 0;
    font-size: var(--es-fs-sm);
    color: var(--es-muted);
}

/* The five counts in one row from a wide screen down to a tablet; each opens its list. */
.evo-stats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: var(--es-space-3);
    margin-bottom: var(--es-space-4);
}

.evo-stat {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--es-dur-fast) var(--es-ease), border-color var(--es-dur-fast) var(--es-ease);
}

.evo-stat:hover {
    box-shadow: var(--es-card-shadow-hover);
    border-color: var(--es-glow-line-hover);
    color: inherit;
}

/* The application link on one line: the name, the address (cut with an ellipsis, whole in the
   clipboard), whether it takes applications now, and the copy button. */
.evo-link {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-2) var(--es-space-4);
    padding: var(--es-space-3) var(--es-card-pad);
}

.evo-link__title {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--es-space-2);
    margin: 0;
    font-family: var(--es-font-body);
    font-size: var(--es-fs-sm);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--es-ink);
}

.evo-link__title svg {
    width: 16px;
    height: 16px;
    color: var(--es-brand);
}

.evo-link__url {
    flex: 1 1 14rem;
    min-width: 0;
    overflow: hidden;
    padding: var(--es-space-1) var(--es-space-3);
    border-radius: var(--es-r-sm);
    background: var(--es-fill);
    color: var(--es-ink);
    font-size: var(--es-fs-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evo-link__state {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--es-space-2);
    font-size: var(--es-fs-sm);
    font-weight: 600;
    color: var(--es-body);
}

.evo-link__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--es-faint);
}

.evo-link--ok .evo-link__dot { background: var(--es-dot-ok); }
.evo-link--warn .evo-link__dot { background: var(--es-dot-warn); }
.evo-link--info .evo-link__dot { background: var(--es-dot-info); }

.evo-link__copy {
    flex: 0 0 auto;
}

/* Tablet: the cover gives the words the room. */
@media (max-width: 991.98px) {
    .evo-hero__cover.show-card__cover {
        flex-basis: 200px;
    }
}

/* Phone: the cover goes (it is decoration, and the page is for work); the buttons share the row. */
@media (max-width: 575.98px) {
    .evo-hero__cover.show-card__cover {
        display: none;
    }

    .evo-hero__actions > .btn,
    .evo-hero__actions > form > .btn {
        flex: 1 1 auto;
    }

    .evo-menu__panel {
        left: auto;
        right: 0;
        transform-origin: top right;
    }

    .evo-ready__item {
        flex-wrap: wrap;
    }

    .evo-ready__item > .btn {
        margin-left: calc(34px + var(--es-space-3));
    }

    .evo-link__url {
        flex-basis: 100%;
        order: 1;
    }

    .evo-link__copy {
        margin-left: auto;
    }
}

/* ------------------------------------------- "Yeni etkinlik" + "Etkinlik ayarları" (plan job 8.2,
   portal3-EventNew-B, portal3-EventSettings-B + C)
   B's two columns: the section cards (round icon box, display title) under a sticky row of
   contents with C's completion dots, and a sticky right column — the event's own card as the site
   draws it, "Yayına hazır mı?", the summary, C's "Bu kayıtta değişenler" and the save button.
   Below lg the right column follows the form and the contents row sticks under the top bar.
   Nothing here moves on its own, so the reduced-motion block has nothing to add. */
.ev-head__dim {
    color: var(--es-faint);
    font-weight: 600;
}

.ev-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 3rem;
}

.ev-form__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    min-width: 0;
}

.ev-form__side {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
}

@media (min-width: 992px) {
    .ev-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
        align-items: start;
        gap: 24px;
    }

    /* Its own scroll once the summary and the change list outgrow the window, so the save
       button at its foot is never out of reach while it sticks. */
    .ev-form__side {
        position: sticky;
        top: calc(var(--es-bar-h) + 1rem);
        max-height: calc(100vh - var(--es-bar-h) - 2rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

/* ---- the field errors, each a link to its control */
.ev-errors__list {
    display: grid;
    gap: 6px;
    margin: -.5rem 0 0;
    padding: 0;
    list-style: none;
}

.ev-errors__link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .6rem;
    min-height: 44px;
    padding: .55rem .9rem;
    border-radius: var(--es-r-sm);
    background: var(--es-bad-soft);
    color: var(--es-ink);
    font-size: .875rem;
    text-decoration: none;
}

.ev-errors__link:hover {
    text-decoration: underline;
}

.ev-errors__label {
    color: var(--es-bad);
    font-weight: 700;
}

.ev-errors__text {
    flex: 1 1 14rem;
    min-width: 0;
}

.ev-conflict {
    flex-wrap: wrap;
    margin-bottom: 0;
}

.ev-conflict__reload {
    margin-left: auto;
}

/* ---- contents: B's section tabs with C's dots, one sticky row at every width */
.ev-toc {
    position: sticky;
    top: calc(60px + .5rem);
    z-index: 5;
    padding: 5px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-pill);
    background: var(--es-glass);
    -webkit-backdrop-filter: var(--es-glass-filter);
    backdrop-filter: var(--es-glass-filter);
    box-shadow: var(--es-shadow-1);
}

@media (min-width: 992px) {
    .ev-toc {
        top: calc(var(--es-bar-h) + .5rem);
    }
}

.ev-toc__list {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}

.ev-toc__list::-webkit-scrollbar {
    display: none;
}

.ev-toc__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: 0 1rem 0 .85rem;
    border-radius: var(--es-r-pill);
    color: var(--es-muted);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.ev-toc__link:hover {
    background: var(--es-fill);
    color: var(--es-ink);
}

.ev-toc__link.is-active {
    background: var(--es-brand-soft);
    color: var(--es-ink);
    box-shadow: inset 0 0 0 1px var(--es-brand-border);
}

/* A required section: amber until its fields hold what publishing needs, green after. An
   optional one stays a quiet ring. */
.ev-toc__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--es-warn);
}

.ev-toc__link.is-done .ev-toc__dot {
    background: var(--es-ok);
}

.ev-toc__dot--optional,
.ev-toc__link.is-done .ev-toc__dot--optional {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--es-edge);
}

.ev-toc__changed {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--es-brand);
}

/* ---- a section card */
.ev-sect {
    display: grid;
    gap: 20px;
    min-width: 0;
    padding: clamp(1.25rem, .9rem + 1.2vw, 1.75rem);
    border-radius: var(--es-r-xl);
}

/* A contents link lands below the top bar and the sticky contents row. */
.ev-form__main > .ev-sect {
    scroll-margin-top: calc(60px + 5rem);
}

@media (min-width: 992px) {
    .ev-form__main > .ev-sect {
        scroll-margin-top: calc(var(--es-bar-h) + 5rem);
    }
}

.ev-sect__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
}

.ev-sect__heading {
    flex: 1 1 12rem;
    min-width: 0;
}

.ev-sect__title {
    margin: 0;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.2;
}

.ev-sect__sub {
    margin: .2rem 0 0;
    color: var(--es-muted);
    font-size: .84rem;
}

.ev-sect__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.ev-sect__tags:empty {
    display: none;
}

.ev-sect__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    color: var(--es-brand);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.ev-sect__link:hover {
    text-decoration: underline;
}

.ev-sect__link svg {
    width: 16px;
    height: 16px;
}

.ev-sect__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem 1.25rem;
}

@media (min-width: 768px) {
    .ev-sect__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ev-sect__full {
        grid-column: 1 / -1;
    }
}

/* "Haritadaki konum": the starred label over the latitude, longitude and map-link boxes
   (UIhataları 67); any one of the three gives the position, so the star sits on the group.
   Pulled toward the boxes so it reads as their heading, not as a field of its own. */
.ev-sect__position {
    margin-bottom: calc(var(--es-space-2) * -1);
}

.ev-sect__position .form-label {
    margin-bottom: 0;
}

.ev-sect__mono {
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9375rem;
}

.ev-sect__images {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .ev-sect__images {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }
}

/* ---- the address: prefix and value in one field; on a phone the prefix takes its own line
   above the value, which otherwise was left a few letters wide (plan 8.2). */
.ev-slug {
    display: flex;
    min-width: 0;
}

.ev-slug__prefix {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    max-width: 55%;
    padding: 0 .85rem;
    border: 1px solid var(--es-edge);
    border-right: 0;
    border-radius: var(--es-r-input) 0 0 var(--es-r-input);
    background: var(--es-fill-2);
    color: var(--es-muted);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.ev-slug__input.form-control {
    flex: 1 1 10rem;
    min-width: 0;
    border-radius: 0 var(--es-r-input) var(--es-r-input) 0;
}

@media (max-width: 575.98px) {
    .ev-slug {
        flex-direction: column;
    }

    .ev-slug__prefix {
        max-width: none;
        padding: .45rem .85rem;
        border-right: 1px solid var(--es-edge);
        border-bottom: 0;
        border-radius: var(--es-r-input) var(--es-r-input) 0 0;
    }

    .ev-slug__input.form-control {
        flex-basis: auto;
        border-radius: 0 0 var(--es-r-input) var(--es-r-input);
    }
}

/* ---- B's switch rows: the words on the left, the switch on the right, the whole row a target */
.ev-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: 12px 16px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.ev-toggle__text {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.ev-toggle__label {
    margin: 0;
    color: var(--es-ink);
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
}

.ev-toggle__hint {
    color: var(--es-muted);
    font-size: .8125rem;
}

/* ---- AD-26's three answers as B's cards */
.ev-policy {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ev-policy > legend {
    float: none;
    margin-bottom: .5rem;
    font-size: .89rem;
}

.ev-policy__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

@media (min-width: 768px) {
    .ev-policy__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ev-policy__card {
    display: grid;
    align-content: start;
    gap: .45rem;
    padding: 16px;
    border: 2px solid transparent;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.ev-policy__card:hover {
    border-color: var(--es-brand-border);
}

.ev-policy__card:has(.ev-policy__radio:checked) {
    border-color: var(--es-brand);
    background: var(--es-brand-soft);
}

.ev-policy__card:has(.ev-policy__radio:focus-visible) {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.ev-policy__card:has(.ev-policy__radio:disabled) {
    cursor: default;
}

.ev-policy__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.ev-policy__icon {
    background: var(--es-surface);
    color: var(--es-ink);
}

.ev-policy__card:has(.ev-policy__radio:checked) .ev-policy__icon {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.ev-policy__radio.form-check-input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
}

.ev-policy__title {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -.02em;
}

.ev-policy__text {
    color: var(--es-muted);
    font-size: .8125rem;
}

/* ---- reminders: one switch row per stage, each with the moment it goes out */
.ev-remind {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

@media (min-width: 768px) {
    .ev-remind {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ev-remind__at {
    font-variant-numeric: tabular-nums;
}

/* ---- C's certificate signature line */
.ev-cert {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .9rem;
    border: 1px dashed var(--es-line-strong);
    border-radius: var(--es-r-sm);
    background: var(--es-surface);
}

.ev-cert__icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    color: var(--es-brand);
}

.ev-cert__icon svg {
    width: 20px;
    height: 20px;
}

.ev-cert__text {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.ev-cert__title {
    color: var(--es-ink);
    font-size: .8125rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.ev-cert__sign {
    color: var(--es-muted);
    font-size: .75rem;
    overflow-wrap: anywhere;
}

/* ---- the sponsor picker in B's cards: the tile and its tier select in one bordered card */
.ev-sect .ev-pick {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 12px;
}

.ev-sect .ev-pick__cell {
    gap: .5rem;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.ev-sect .ev-pick__cell:has(.ev-pick__check:checked) {
    border-color: var(--es-brand);
    background: var(--es-brand-soft);
}

.ev-sect .ev-pick__cell .ev-pick__tile,
.ev-sect .ev-pick__cell .ev-pick__tile:has(.ev-pick__check:checked) {
    border: 0;
    background: transparent;
    padding: .25rem;
}

/* ---- the right column */
.ev-side__card {
    display: grid;
    gap: .75rem;
    padding: 18px 20px;
    border-radius: var(--es-r-xl);
}

.ev-side__title {
    margin: 0;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -.02em;
}

/* "Sitede böyle görünecek": the shared show-card, still, inside a padded card. */
.ev-preview {
    display: grid;
    gap: .5rem;
    padding: 8px;
    border-radius: var(--es-r-xl);
}

.ev-preview__label {
    padding: .4rem .6rem 0;
}

.ev-preview__card,
.ev-preview__card:hover {
    transform: none;
    cursor: default;
}

.ev-ready__list {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ev-ready__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 600;
}

.ev-ready__mark {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--es-fill-2);
    color: transparent;
    box-shadow: inset 0 0 0 1.5px var(--es-edge);
}

.ev-ready__mark svg {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

.ev-ready__item.is-done .ev-ready__mark {
    background: var(--es-ok);
    color: var(--es-ok-ink);
    box-shadow: none;
}

.ev-ready__state {
    margin-left: auto;
    color: var(--es-ok);
    font-size: .78rem;
}

.ev-ready__state--todo {
    color: var(--es-warn);
}

.ev-ready__note {
    margin: 0;
    color: var(--es-muted);
    font-size: .8125rem;
}

.ev-summary__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.ev-summary__count {
    color: var(--es-muted);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

.ev-summary__count strong {
    color: var(--es-ink);
    font-size: 1.05rem;
}

.ev-summary__last,
.ev-summary__dirty,
.ev-changes__more {
    margin: 0;
    color: var(--es-muted);
    font-size: .8125rem;
}

.ev-summary__dirty {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--es-ink);
    font-weight: 600;
}

.ev-summary__dirty[hidden] {
    display: none;
}

.ev-summary__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--es-warn);
}

.ev-changes__list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ev-changes__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem .75rem;
    padding: .55rem .75rem;
    border-radius: var(--es-r-sm);
    background: var(--es-brand-soft);
    font-size: .8125rem;
}

.ev-changes__row--ok {
    background: var(--es-ok-soft);
}

.ev-changes__label {
    color: var(--es-muted);
}

.ev-changes__value {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .3rem;
    min-width: 0;
    color: var(--es-ink);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.ev-changes__before {
    color: var(--es-muted);
    font-weight: 500;
}

.ev-changes__row--ok .ev-changes__after {
    color: var(--es-ok);
}

.ev-form__actions {
    display: grid;
    gap: .5rem;
}

@media (max-width: 575.98px) {
    .ev-sect,
    .ev-side__card,
    .ev-preview {
        border-radius: var(--es-r-lg);
    }
}

/* ------------------------------------------- "Oturumlar" + agenda (plan job 8.4, portal3-Sessions-B + C)
   One event's programme two ways (Views/Sessions/Index, _Agenda, _SessionMenu): C's hall chips and
   "N oturum şu anda sürüyor" over it, B's timetable or the table under it, and C's "Seçili oturum"
   in the shared review panel. Named .prog-*: .agenda-panel is the public event page's "Ajandam".

   The timetable is a grid inside a box that scrolls both ways (.prog__scroll): position: sticky
   only holds against the box that scrolls, so the hall names (top) and the hour ruler (left)
   can only stay put if the box, not the page, does the scrolling. Rows: the hall names, then one
   row as tall as the day's ruler (--prog-span minutes at --prog-px a minute, plus --prog-pad above
   and below so the first and last hour labels are not cut). Columns: the ruler, then each hall at
   a minimum width set in the view — a few halls stretch to fill, many scroll sideways. Every
   session is placed from custom properties the server wrote as whole numbers (--start, --len in
   minutes; --lane of --lanes when it overlaps another in its hall). */
/* The chips keep to one line and scroll sideways ([data-scroll-row] fades the edge that goes
   on), so eight halls never push the view switch onto a row of its own. */
.prog-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 16px;
}

.prog-tools__halls {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.prog-tools__halls::-webkit-scrollbar {
    display: none;
}

.prog-tools__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 16px;
    grid-column: 2;
}

.prog-tools__live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--es-brand);
    font-size: .875rem;
    font-weight: 650;
}

.prog-tools__live-dot,
.prog-block__live {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--es-brand);
}

.prog-tools__live-dot {
    animation: es-pulse 1.8s var(--es-ease) infinite;
}

/* The portal block's live dot follows the block's green (decision K14). */
.prog-block__live {
    background: var(--es-ok);
}

.prog {
    --prog-px: 2px;
    --prog-ruler: 76px;
    --prog-pad: 12px;
    display: grid;
    gap: 16px;
    padding: 20px;
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    box-shadow: var(--es-card-shadow);
}

.prog__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    min-width: 0;
}

.prog__date {
    display: flex;
    align-items: center;
    gap: 12px;
}

.prog__date-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--es-r);
    background: var(--es-fill-2);
    line-height: 1;
}

.prog__date-day {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.3rem;
    font-weight: 800;
}

.prog__date-month {
    margin-top: 3px;
    color: var(--es-muted);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.prog__date-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prog__weekday {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.15rem;
    font-weight: 750;
    letter-spacing: -.02em;
}

.prog__zone {
    color: var(--es-muted);
    font-size: .78rem;
    font-weight: 600;
}

/* Many days scroll in their own capsule rather than widening the page. */
.prog__days {
    overflow-x: auto;
    scrollbar-width: none;
}

.prog__days::-webkit-scrollbar {
    display: none;
}

.prog__today {
    color: var(--es-brand);
    font-size: .72rem;
    font-weight: 700;
}

.prog__arrows:not([hidden]) {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.prog__none {
    margin: 0;
    padding: 24px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
    color: var(--es-muted);
    text-align: center;
}

.prog__scroll {
    position: relative;
    max-height: min(75vh, 920px);
    overflow: auto;
    overscroll-behavior-x: contain;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    /* The keyboard's arrow keys and a focused block land clear of the stuck ruler and names. */
    scroll-padding: 64px 0 0 var(--prog-ruler);
    scroll-snap-type: x proximity;
}

.prog__scroll:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.prog__grid {
    position: relative;
    display: grid;
    grid-template-rows: auto calc(var(--prog-span) * var(--prog-px) + 2 * var(--prog-pad));
    column-gap: 8px;
    min-width: 100%;
    padding-right: 8px;
}

.prog__corner,
.prog__hall {
    position: sticky;
    top: 0;
    grid-row: 1;
    padding: 8px 0;
    background: var(--es-surface);
}

/* Stacking, bottom up: the "Şimdi" line, the sessions (their menus at 2), the ruler (3), the
   hall names (4), the corner (5); an open menu's block (7) rises over all of them. */
.prog__corner {
    left: 0;
    z-index: 5;
}

.prog__hall {
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-space-2);
    min-width: 0;
    padding: 20px var(--es-space-3) var(--es-space-3);
    /* A filled band with an ember rule on top (UIhataları 48), the hall heads of the portal's and
       the public agenda alike. Layered on the surface, so it stays opaque in the dark theme too,
       where --es-brand-soft is translucent: the blocks scrolling under it never show through. */
    background:
        linear-gradient(var(--es-brand), var(--es-brand)) 0 8px / 100% 3px no-repeat,
        linear-gradient(var(--es-brand-soft), var(--es-brand-soft)) 0 8px / 100% calc(100% - 8px) no-repeat,
        var(--es-surface);
    border-radius: 0 0 var(--es-r) var(--es-r);
    scroll-snap-align: start;
}

.prog__hall-name {
    overflow: hidden;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: var(--es-fs-body);
    font-weight: 700;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prog__hall--none .prog__hall-name {
    color: var(--es-muted);
    font-style: italic;
}

/* The sessions with no hall are not a hall: a plain band, no ember. */
.prog__hall--none {
    background:
        linear-gradient(var(--es-fill-2), var(--es-fill-2)) 0 8px / 100% calc(100% - 8px) no-repeat,
        var(--es-surface);
}

/* The count as a small capsule — not a .pill, which would draw a status dot. */
.prog__hall-count {
    flex: 0 0 auto;
    padding: 2px var(--es-space-2);
    border: 1px solid var(--es-brand-border);
    border-radius: var(--es-r-pill);
    background: var(--es-surface);
    color: var(--es-brand-deep);
    font-size: var(--es-fs-xs);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.prog__hall--none .prog__hall-count {
    border-color: var(--es-line-strong);
    color: var(--es-muted);
}

.prog__ruler {
    position: sticky;
    left: 0;
    z-index: 3;
    grid-row: 2;
    grid-column: 1;
    background: var(--es-surface);
    border-right: 1px solid var(--es-line);
}

.prog__hour {
    position: absolute;
    top: calc(var(--prog-pad) + var(--at) * var(--prog-px));
    right: 10px;
    color: var(--es-muted);
    font-size: .74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transform: translateY(-50%);
}

.prog__now-tag {
    position: absolute;
    top: calc(var(--prog-pad) + var(--prog-now) * var(--prog-px));
    left: 4px;
    z-index: 1;
    padding: 2px 6px;
    border-radius: var(--es-r-pill);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-size: .66rem;
    font-weight: 700;
    white-space: nowrap;
    transform: translateY(-50%);
}

.prog__now {
    position: absolute;
    top: calc(var(--prog-pad) + var(--prog-now) * var(--prog-px) - 1px);
    right: 0;
    left: 0;
    grid-row: 2;
    grid-column: 2 / -1;
    height: 2px;
    background: var(--es-brand);
    pointer-events: none;
}

/* A hall's day: a faint line every hour, from the first label down. */
.prog__col {
    position: relative;
    grid-row: 2;
    min-width: 0;
    background:
        linear-gradient(to bottom, var(--es-line) 1px, transparent 1px)
        0 var(--prog-pad) / 100% calc(60 * var(--prog-px)) repeat-y;
}

.prog-block {
    position: absolute;
    top: calc(var(--prog-pad) + var(--start) * var(--prog-px) + 2px);
    left: calc(var(--lane) * (100% / var(--lanes)) + 3px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: calc(100% / var(--lanes) - 6px);
    height: calc(var(--len) * var(--prog-px) - 4px);
    min-height: 24px;
    padding: 8px 10px;
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r);
    background: var(--es-surface);
    box-shadow: var(--es-shadow-1);
}

.prog-block:hover {
    border-color: var(--es-brand-border);
}

.prog-block:has(.prog-block__name:focus-visible) {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.prog-block:has(.prog-menu[open]) {
    z-index: 7;
}

.prog-block__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    padding-right: 26px;
}

.prog-block__time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--es-muted);
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.prog-block__pill {
    min-width: 0;
    overflow: hidden;
    padding: .1rem .5rem;
    font-size: .66rem;
    text-overflow: ellipsis;
}

/* A block too narrow for its time and the whole word keeps the pill's dot alone, the word read
   out but not drawn (the title says it on hover): "İptal edil…" read worse than no word at all
   (Stage 11.1 review). The block is the container, so a lane of three and a slim hall both
   qualify; 200px is the time, the gap, "İptal edildi" and the menu's room. */
.prog-block {
    container-type: inline-size;
}

@container (max-width: 200px) {
    .prog-block__pill {
        flex: 0 0 auto;
        padding: 0;
        gap: 0;
        border: 0;
        background: none;
        min-height: 0;
    }

    .prog-block__pill-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* The name is the block's link, stretched over all of it; the menu sits above the stretch. */
.prog-block__name {
    display: -webkit-box;
    overflow: hidden;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.prog-block__name::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.prog-block__name:hover,
.prog-block__name:focus {
    color: var(--es-ink);
}

.prog-block__name:focus-visible {
    outline: none;
}

.prog-block__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    margin-top: auto;
    color: var(--es-muted);
    font-size: .72rem;
    font-weight: 600;
}

.prog-block__speakers {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.prog-block__speakers--none {
    overflow: hidden;
    color: var(--es-faint);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prog-block__faces {
    display: flex;
    flex: 0 0 auto;
}

.prog-block__face {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-left: -6px;
    border: 2px solid var(--es-surface);
    border-radius: 50%;
    background: var(--es-fill-2);
    color: var(--es-ink);
    font-size: .56rem;
    font-weight: 700;
}

.prog-block__face:first-child {
    margin-left: 0;
}

/* A speaker portrait in a face (the public agenda has the photos the portal block does not). */
.prog-block__face {
    overflow: hidden;
}

.prog-block__face img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.prog-block__speaker-names {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prog-block__figures {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: var(--es-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.prog-block__star {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--es-brand);
}

.prog-block__star svg {
    width: 12px;
    height: 12px;
}

/* Under an hour: time and name; under 40 minutes the name gets one line; under 25 both share
   one. The name may shrink (min-height: 0) so a long one is clipped at a line, never over the
   block below. */
.prog-block--short {
    gap: 2px;
    padding: 6px 8px;
}

.prog-block--short .prog-block__name {
    min-height: 0;
    font-size: .86rem;
}

.prog-block--one .prog-block__name {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.prog-block--tiny {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 2px 30px 2px 8px;
}

.prog-block--tiny .prog-block__top {
    flex: 0 0 auto;
    padding-right: 0;
}

.prog-block--tiny .prog-block__pill {
    display: none;
}

.prog-block--tiny .prog-block__name {
    font-size: .78rem;
}

/* The public event page's agenda (UIhataları 47): no action menu, so the block's top keeps no room
   for one. */
.prog--public .prog-block__top {
    padding-right: 0;
}

.prog--public .prog-block--tiny {
    padding-right: 8px;
}

/* Side by side in a split hall: the faces say who, the names would not fit. */
.prog-block--narrow .prog-block__speaker-names,
.prog-block--narrow .prog-block__speakers--none {
    display: none;
}

/* "Live" is green everywhere (decision K14, UIhataları 49). */
.prog-block.is-live {
    border-color: var(--es-ok);
    background: var(--es-ok-soft);
}

.prog-block.is-live .prog-block__time {
    color: var(--es-ok-strong);
}

.prog-block.is-over {
    background: var(--es-fill);
    box-shadow: none;
}

.prog-block.is-cancelled {
    opacity: .62;
}

.prog-block.is-cancelled:has(.prog-menu[open]) {
    opacity: 1;
}

.prog-block.is-cancelled .prog-block__name {
    text-decoration: line-through;
}

.prog-block.is-suspended {
    border-color: var(--es-warn-border);
    background: var(--es-warn-soft);
}

.prog-block.is-selected {
    border-color: var(--es-brand);
    box-shadow: 0 0 0 3px var(--es-ring);
}

/* The block's menu: a <details> in its top-right corner, over the stretched link. */
.prog-menu {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
}

.prog-block--tiny .prog-menu {
    top: 50%;
    transform: translateY(-50%);
}

.prog-menu__button {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--es-r-sm);
    color: var(--es-muted);
    list-style: none;
    cursor: pointer;
}

.prog-menu__button::-webkit-details-marker {
    display: none;
}

.prog-menu__button svg {
    width: 18px;
    height: 18px;
}

.prog-menu__button:hover,
.prog-menu[open] > .prog-menu__button {
    background: var(--es-fill-2);
    color: var(--es-ink);
}

.prog-block--tiny .prog-menu__button {
    width: 24px;
    height: 24px;
}

/* A finger needs 44px: the hit area grows past the drawn button. */
@media (pointer: coarse) {
    .prog-menu__button::after {
        content: "";
        position: absolute;
        inset: -8px;
    }
}

.prog-menu__panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 5;
    min-width: 13.5rem;
}

.prog-menu__panel form {
    margin: 0;
}

.prog-menu[open] > .prog-menu__panel {
    transform-origin: top right;
    animation: es-menu-in var(--es-dur) var(--es-ease);
}

/* ---- the list */
.prog-table > tbody > tr > td:first-child {
    min-width: 12rem;
}

.prog-table__name {
    color: var(--es-ink);
    font-weight: 650;
    text-decoration: none;
}

.prog-table__name:hover {
    text-decoration: underline;
}

.prog-table tr.is-cancelled .prog-table__name {
    color: var(--es-muted);
    text-decoration: line-through;
}

/* "Ne zaman": the time range never breaks at its dash; only the date before it may wrap
   (Stage 11.1 review — rows read "12:00 –" / "13:00" beside one-line neighbours at 1440). */
.prog-table__time {
    white-space: nowrap;
}

.prog-table__now {
    color: var(--es-brand);
    font-size: .78rem;
    font-weight: 700;
}

.prog-table__actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.prog-table__actions form {
    margin: 0;
}

/* Stage 11.1 review: at 1100–1440px the 948px list was cut at Durum ("Program…") with its
   actions out of sight. The status stacks and may wrap inside its capsule, so "Solstage askıya
   aldı" no longer sets the column's width ... */
.prog-table__status {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.prog-table__status .pill {
    white-space: normal;
}

/* ... "İlgi" (also in the panel) steps aside below the width that fits it ... */
@media (max-width: 1199.98px) {
    .prog-table__opt {
        display: none;
    }
}

/* ... and the actions keep to the scroll box's right edge, so whatever still scrolls, the row's
   buttons are in view. Opaque under them: a scrolled cell must not show through. */
.prog-table > thead > tr > .prog-table__end,
.prog-table > tbody > tr > .prog-table__end {
    position: sticky;
    right: 0;
    z-index: 1;
}

.prog-table > tbody > tr > .prog-table__end {
    background: var(--es-surface);
}

.prog-table > tbody > tr.is-selected > .prog-table__end {
    background: linear-gradient(var(--es-brand-soft), var(--es-brand-soft)), var(--es-surface);
}

/* Second review: the header cell was see-through and the column had no edge, so a scrolled row
   slid under the buttons unseen. The head keeps its own ground (the card head's) and the column
   draws a line on its leading side. */
.prog-table > thead > tr > .prog-table__end {
    background: var(--es-raised);
}

.prog-table > thead > tr > .prog-table__end,
.prog-table > tbody > tr > .prog-table__end {
    box-shadow: inset 1px 0 0 var(--es-line);
}

/* With a session open the panel repeats the hall, the attendance, the bookmarks and the zone, so
   while it stands beside the list those columns step aside and Durum and the actions fit the box,
   the way Kayıtlar pulls its time column; the panel is a little narrower than the shared one, as
   on Kayıtlar, since the programme is the page here. Even so the four remaining columns need
   ~620px, which the list gets only from 1400px: between 1200 and 1400 this page's panel goes under
   the list, as it does below 1200 everywhere (DD-30), instead of beside it. Only this page: the
   other lists that share .review-layout fit their columns at 1200. */
@media (min-width: 1400px) {
    .review-layout.prog-layout:has(> .review-panel) {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    }

    .prog-layout:has(> .review-panel) .prog-table__aside {
        display: none;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .review-layout.prog-layout:has(> .review-panel) {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Undo the shared beside-the-list panel: under the list it scrolls with the page, and the
       row's #inceleme jump must land on it again. */
    .prog-layout > .review-panel {
        position: static;
        max-height: none;
        overflow-y: visible;
        scroll-margin-top: 88px;
    }
}

/* Below 1200 the list has the width alone but no İlgi; the name column gives up a little so the
   six that remain fit at 1100 without scrolling — a speaker chip may put its status under the
   name instead of setting the column's width. */
@media (max-width: 1199.98px) {
    .prog-table > tbody > tr > td:first-child {
        min-width: 10rem;
    }

    .prog-table .speaker-chip {
        flex-wrap: wrap;
    }
}

/* ---- the review panel's "Seçili oturum" */
.prog-panel__note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--es-muted);
    font-size: .85rem;
}

.prog-panel__note--live {
    color: var(--es-brand);
    font-weight: 650;
}

.prog-panel__note--live .prog-tools__live-dot {
    animation: none;
}

.prog-panel__speakers {
    display: grid;
    gap: 8px;
}

.prog-panel__empty {
    margin: 0;
    color: var(--es-muted);
    font-size: .875rem;
}

.prog-panel__people {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.prog-panel__people li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.prog-panel__face {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--es-fill-2);
    color: var(--es-ink);
    font-size: .7rem;
    font-weight: 700;
    object-fit: cover;
}

.prog-panel__person {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--es-ink);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A picture of a poster on paper, never the poster's code (AD-9). */
.prog-panel__poster {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.prog-panel__qr {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r);
    background: var(--es-paper);
    color: var(--es-paper-ink);
}

.prog-panel__qr svg {
    width: 40px;
    height: 40px;
}

.prog-panel__poster-text {
    margin: 4px 0 0;
    color: var(--es-body);
    font-size: .85rem;
    line-height: 1.4;
}

.prog-panel__attendance {
    display: grid;
    gap: 8px;
}

.prog-panel__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--es-muted);
    font-size: .875rem;
}

.prog-panel__value {
    color: var(--es-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.prog-panel__figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.prog-panel__figures > div {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    padding: 12px;
    border-radius: var(--es-r);
    background: var(--es-fill);
}

.prog-panel__figures dt {
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 500;
}

.prog-panel__figures dd {
    margin: 0;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.prog-panel__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.prog-panel__actions > .btn {
    width: 100%;
}

.prog-panel__wide {
    grid-column: 1 / -1;
}

.prog-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 0;
    padding: 14px 18px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
    color: var(--es-muted);
    font-size: .85rem;
}

@media (max-width: 575.98px) {
    .prog {
        --prog-ruler: 58px;
        padding: 12px;
        border-radius: var(--es-r-lg);
    }

    .prog__scroll {
        max-height: 70vh;
    }

    .prog__now-word {
        display: none;
    }

}

@media (max-width: 991.98px) {
    .prog-tools {
        grid-template-columns: minmax(0, 1fr);
    }

    .prog-tools__end {
        grid-column: 1;
        justify-content: space-between;
    }
}

/* ------------------------------------------- "Oturum ekle / düzenle" (plan job 8.5, portal3-SessionNew-B,
   portal3-SessionEdit-B + C)
   B's two columns (Areas/Portal/Views/Shared/_SessionForm): the form's section cards on the left
   — they borrow the event form's .ev-sect head, title and two-column grid (job 8.2) rather than
   repeat them — and on the right, sticky from lg, the poster as the PDF prints it, the scan count
   and the code renewal on the edit page, and C's "Programda yeri", the sessions page's agenda
   (.prog, job 8.4) drawn small (.prog--mini). Below lg the right column follows the form.
   Nothing here moves, so the reduced-motion block has nothing to add. */
.sess-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 3rem;
}

.sess-form__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    min-width: 0;
}

.sess-form__side {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 16px;
    min-width: 0;
}

/* The column does not stick, unlike B's: the poster card and the agenda together are taller than
   a window, and a sticky column with a scroll of its own around the agenda's scrolling box was
   two scrolls inside each other. The two columns are about as tall as each other anyway. */
@media (min-width: 992px) {
    .sess-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
        align-items: start;
        gap: 24px;
    }
}

@media (min-width: 1400px) {
    .sess-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
    }
}

.sess-head__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: .75rem;
}

/* ---- the speaker pool: B's cards, two to a row, a face before the name, the ember once ticked */
.sess-pick {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.sess-pick__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.sess-pick__add {
    margin-left: auto;
}

.sess-pick__search {
    position: relative;
}

.sess-pick__search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    display: grid;
    color: var(--es-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.sess-pick__search-icon svg {
    width: 18px;
    height: 18px;
}

.sess-pick__search .form-control {
    padding-left: 2.6rem;
    border-radius: var(--es-r-pill);
}

/* A pool of forty stays a box of its own rather than a page of cards; the padding keeps the
   focus ring of the first and last card inside it. */
.sess-pick__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    max-height: 28rem;
    margin: -3px;
    padding: 3px;
    overflow-y: auto;
    scrollbar-width: thin;
}

@media (min-width: 576px) {
    .sess-pick__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The whole card is the label's target (its ::after covers it), except the state on the right,
   which sits above it so "Yeniden gönder" stays its own button. */
.sess-pick__item {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
    padding: 10px 12px;
    border: 2px solid transparent;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.sess-pick__item[hidden] {
    display: none;
}

.sess-pick__item:hover {
    border-color: var(--es-line-strong);
}

.sess-pick__item:has(.sess-pick__check:checked) {
    border-color: var(--es-brand);
    background: var(--es-brand-soft);
}

.sess-pick__item:has(.sess-pick__check:focus-visible) {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

/* Above the label's cover too, so the box itself takes its own click. */
.sess-pick__check {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    margin: 0;
}

.sess-pick__who {
    display: flex;
    flex: 1 1 10rem;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.sess-pick__who::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.sess-pick__item:has(.sess-pick__check:disabled) .sess-pick__who {
    cursor: default;
}

.sess-pick__face {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: var(--es-fill-2);
    color: var(--es-ink);
    font-size: .78rem;
    font-weight: 700;
    object-fit: cover;
}

.sess-pick__text {
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.sess-pick__name,
.sess-pick__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sess-pick__name {
    color: var(--es-ink);
    font-size: .9rem;
    font-weight: 700;
}

.sess-pick__meta {
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 600;
}

.sess-pick__state {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.sess-pick__none {
    margin: 0;
    color: var(--es-muted);
    font-size: .875rem;
}

.sess-pick__empty {
    padding: 28px 20px;
}

/* B's note under the pool: the ember wash, the envelope, what saving will send. */
.sess-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--es-r-lg);
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.45;
}

.sess-note__icon {
    display: grid;
    flex: 0 0 auto;
    padding-top: 1px;
}

.sess-note__icon svg {
    width: 18px;
    height: 18px;
}

/* ---- "Zaman ve yer": B's line of the event's hours, its first day in a date box */
.sess-window {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
    color: var(--es-muted);
    font-size: .85rem;
    line-height: 1.45;
}

.sess-window strong {
    color: var(--es-ink);
    font-weight: 650;
}

.sess-window__date {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 48px;
    border-radius: var(--es-r);
    background: var(--es-surface);
    line-height: 1;
}

.sess-window__day {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.05rem;
    font-weight: 800;
}

.sess-window__month {
    margin-top: 3px;
    color: var(--es-muted);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* ---- the right column's cards */
.sess-card {
    display: grid;
    gap: 16px;
    min-width: 0;
    padding: clamp(1.1rem, .9rem + .8vw, 1.5rem);
    border-radius: var(--es-r-xl);
}

.sess-card--row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.sess-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.sess-card__title {
    margin: 0;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.15rem;
    font-weight: 750;
    letter-spacing: -.02em;
}

.sess-card--row .sess-card__title {
    margin-bottom: .3rem;
}

.sess-card__action {
    margin-left: auto;
}

.sess-card__text {
    margin: 0;
    color: var(--es-muted);
    font-size: .85rem;
    line-height: 1.5;
}

/* C's "okutma" tile, which opens who scanned. */
.sess-card__figure {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--es-r);
    background: var(--es-fill);
    color: var(--es-ink);
    text-decoration: none;
}

.sess-card__figure:hover {
    background: var(--es-fill-2);
    color: var(--es-ink);
}

.sess-card__figure svg {
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--es-muted);
}

.sess-card__number {
    font-family: var(--es-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sess-card__unit {
    color: var(--es-muted);
    font-size: .85rem;
    font-weight: 600;
}

/* B's warning box around "QR kodunu yenile". */
.sess-renew {
    display: grid;
    justify-items: start;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--es-bad-border);
    border-radius: var(--es-r-lg);
    background: var(--es-bad-soft);
}

.sess-renew__title {
    margin: 0;
    color: var(--es-bad);
    font-size: .875rem;
    font-weight: 700;
}

.sess-renew__text {
    margin: 0 0 6px;
    color: var(--es-body);
    font-size: .8rem;
}

.sess-renew form {
    margin: 0;
}

/* ---- the poster: a sheet of paper on B's grey stage, upright (UIhataları 40) — white and ink in both
   themes, as print is; its code is a drawing (AD-9) */
.sess-stage {
    padding: 22px;
    border-radius: var(--es-r-xl);
    background: var(--es-fill);
}

.sess-stage--small {
    width: 116px;
    padding: 0;
    background: none;
}

.sess-poster {
    overflow: hidden;
    border: 1px solid var(--es-paper-line);
    border-radius: var(--es-r);
    background: var(--es-paper);
    color: var(--es-paper-ink);
    box-shadow: var(--es-shadow-2);
}

/* SessionPosterPdf's layout C: a thin night band, the organization small in ember over the event. */
.sess-poster__band {
    display: grid;
    gap: 2px;
    padding: 12px 16px;
    background: var(--es-print-night);
    color: var(--es-print-on-night);
}

.sess-poster__org {
    color: var(--es-print-ember);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.sess-poster__kicker {
    color: var(--es-print-brand);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.sess-poster__event {
    overflow: hidden;
    font-size: .95rem;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sess-poster__body {
    display: grid;
    justify-items: start;
    gap: 6px;
    padding: 16px 16px 18px;
}

.sess-poster__qr,
.sess-poster__scan {
    justify-self: center;
    text-align: center;
}

.sess-poster__facts {
    padding: 5px 0;
    border-top: 1px solid var(--es-paper-ink);
    border-bottom: 1px solid var(--es-paper-line);
    align-self: stretch;
    justify-self: stretch;
}

.sess-poster__name {
    font-family: var(--es-font-display);
    font-size: 1.2rem;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.sess-poster__speakers,
.sess-poster__facts {
    color: var(--es-paper-muted);
    font-size: .78rem;
    font-weight: 600;
}

.sess-poster__room::before {
    content: " · ";
}

.sess-poster__room[hidden] {
    display: none;
}

.sess-poster__qr {
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    margin-top: 6px;
    border: 1px solid var(--es-paper-line);
    border-radius: var(--es-r-sm);
}

.sess-poster__qr svg {
    width: 96px;
    height: 96px;
}

.sess-poster__scan {
    font-size: .75rem;
    font-weight: 700;
}

.sess-stage--small .sess-poster__band {
    padding: 6px 8px;
}

.sess-stage--small .sess-poster__event {
    font-size: .6rem;
}

.sess-stage--small .sess-poster__body {
    gap: 4px;
    justify-items: center;
    padding: 8px 8px 10px;
    text-align: center;
}

.sess-stage--small .sess-poster__name {
    display: -webkit-box;
    overflow: hidden;
    font-size: .7rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Faint on the small sheet: there is no code until the session exists. */
.sess-stage--small .sess-poster__qr {
    width: 60px;
    height: 60px;
    margin-top: 2px;
    opacity: .45;
}

.sess-stage--small .sess-poster__qr svg {
    width: 44px;
    height: 44px;
}

/* ---- "Programda yeri": the agenda at a pixel a minute, flat inside its card */
.prog--mini {
    --prog-px: 1px;
    --prog-ruler: 52px;
    --prog-pad: 8px;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.prog--mini .prog__date-box {
    width: 44px;
    height: 44px;
}

.prog--mini .prog__date-day {
    font-size: 1.05rem;
}

.prog--mini .prog__weekday {
    font-size: 1rem;
}

.prog--mini .prog__scroll {
    max-height: 26rem;
}

.prog--mini .prog__hall {
    padding: 16px 10px 8px;
}

.prog--mini .prog__hall-name {
    font-size: .8rem;
}

.prog--mini .prog__hall-count {
    display: none;
}

/* The form's own session: the ember, above anything it overlaps while it follows the fields. */
.prog-block.is-mine {
    z-index: 2;
    border-color: var(--es-brand);
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.prog-block.is-mine .prog-block__time,
.prog-block.is-mine .prog-block__name {
    color: var(--es-brand-ink);
}

.prog-block.is-mine[hidden] {
    display: none;
}

.sess-place__off {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--es-r);
    background: var(--es-warn-soft);
    color: var(--es-warn);
    font-size: .8rem;
    font-weight: 600;
}

.sess-place__key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 600;
}

.sess-place__swatch {
    width: 10px;
    height: 10px;
    border: 1px solid var(--es-line-strong);
    border-radius: 3px;
    background: var(--es-surface);
}

.sess-place__swatch--mine {
    border-color: var(--es-brand);
    background: var(--es-brand);
}

.sess-place__swatch:not(:first-child) {
    margin-left: 10px;
}

@media (max-width: 575.98px) {
    .sess-stage {
        padding: 14px;
    }

    .sess-card--row {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .sess-window {
        align-items: flex-start;
    }
}

/* ------------------------------------------- "Oturum katılımı" (plan job 8.6, portal3-Attendance-B + C)
   Areas/Portal/Views/Sessions/Attendance: B's chips under the title (hall, hours, the confirmed
   speakers), three cards — "Katılan", the capacity washed in the ember with how full the room was,
   and "Okutma akışı" (.chart-bars--hist, job 4.7) — then the people in one card, C's chips and B's
   search in its head, C's row number and address columns, the pager at its foot. */
.att-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: .85rem 0 0;
    padding: 0;
    list-style: none;
}

.att-fact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: .25rem .8rem;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-body);
    font-size: .85rem;
    font-weight: 600;
}

.att-fact svg {
    width: 15px;
    height: 15px;
    color: var(--es-muted);
}

.att-fact--person {
    padding-left: .3rem;
}

.att-fact__face {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--es-fill-2);
    color: var(--es-ink);
    font-size: .58rem;
    font-weight: 700;
    object-fit: cover;
}

.att-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 576px) {
    .att-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .att-flow {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1200px) {
    .att-top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
    }

    .att-flow {
        grid-column: auto;
    }
}

.att-stat {
    display: flex;
    flex-direction: column;
}

.att-stat__value {
    font-size: clamp(1.75rem, 1.5rem + .8vw, 2.25rem);
    line-height: 1;
    margin-top: .9rem;
}

.att-stat__value--text {
    font-size: 1.6rem;
}

.att-stat--room {
    border-color: var(--es-brand-border);
    background: var(--es-brand-soft);
}

.att-stat__pill {
    margin-left: auto;
}

.att-stat__foot {
    margin-top: auto;
    padding-top: .9rem;
}

.att-flow {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 1.1rem 1.25rem;
    border-radius: var(--es-r-lg);
}

.att-flow__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.att-flow__title {
    margin: 0;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.05rem;
    font-weight: 750;
}

/* ---- the people: the chips and the search in the card's head */
.att-list__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--es-line);
}

.att-list__title {
    margin: 0;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.1rem;
    font-weight: 750;
}

/* Positioned so a chip's visually-hidden comma (absolute) is held inside the scrolling row:
   anchored to the page instead, a chip scrolled out of view widened the phone page by 90px. */
.att-list__chips {
    position: relative;
    display: flex;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.att-list__chips::-webkit-scrollbar {
    display: none;
}

.att-list__search {
    flex: 1 1 18rem;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.att-list__search .form-control {
    max-width: 22rem;
    border-radius: var(--es-r-pill);
}

/* The table keeps its width and scrolls inside the card on a phone, as the followers' does. */
.att-table {
    min-width: 40rem;
}

.att-table__pos {
    width: 3rem;
    color: var(--es-faint);
    font-variant-numeric: tabular-nums;
}

/* A floor for the name, as for the address: squeezed to a phone, "Kerem" broke after "Kere". */
.att-table > thead > tr > th:nth-child(2) {
    min-width: 13rem;
}

.att-table__who {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.att-table__face {
    width: 2rem;
    height: 2rem;
    font-size: .7rem;
}

.att-table__mail {
    min-width: 13rem;
}

.att-table__time {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------- "Kayıtlar" (plan job 8.7, portal3-Registrations-B + C's panel)
   Areas/Portal/Views/Registrations/Index: B's six tiles (icon box, number, name, hint — each a
   link to its tab), the strip of badges that could not be printed, then the list in one card with
   the tabs and the search in its head, a face before each name, a row washed red when its badge
   failed, one button per row. The row panel is the shared review panel (job 4.6). */
.reg-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .reg-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .reg-stats {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

.reg-stats > li {
    display: flex;
    min-width: 0;
}

.reg-stat {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 1rem 1.1rem;
    color: inherit;
    text-decoration: none;
}

a.reg-stat {
    transition: border-color var(--es-dur-fast) ease, transform var(--es-dur-fast) ease;
}

a.reg-stat:hover {
    border-color: var(--es-glow-line-hover);
    color: inherit;
    transform: translateY(-2px);
}

a.reg-stat.is-current {
    border-color: var(--es-brand);
    box-shadow: inset 0 0 0 1px var(--es-brand), var(--es-card-shadow);
}

.reg-stat__icon {
    margin-bottom: .5rem;
}

.reg-stat__value {
    margin-top: 0;
    font-size: 1.85rem;
    line-height: 1.05;
}

.reg-stat__label {
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 700;
}

.reg-stat .stat__hint {
    margin-top: 0;
    font-size: .75rem;
}

/* The tones follow the tiles' meaning, never a colour of their own: warn waits on the reader,
   ok came through the door, ink and the ember are the counts the event is planned around. */
.reg-stat--warn {
    border-color: var(--es-warn-border);
    background: var(--es-warn-soft);
}

.reg-stat--warn .reg-stat__icon {
    background: var(--es-surface);
    color: var(--es-warn);
}

.reg-stat--warn .reg-stat__value {
    color: var(--es-warn);
}

.reg-stat--brand .reg-stat__icon {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.reg-stat--ink .reg-stat__icon {
    background: var(--es-ink);
    color: var(--es-page);
}

.reg-stat--ok .reg-stat__icon {
    background: var(--es-ok-soft);
    color: var(--es-ok);
}

.reg-stat--ok .reg-stat__value {
    color: var(--es-ok);
}

.reg-stat--muted .reg-stat__icon {
    background: var(--es-fill);
    color: var(--es-ink);
}

/* ---- B's strip: badges the kiosks could not print (§18) */
.reg-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 1.25rem;
    padding: 12px 16px;
    border: 1px solid var(--es-bad-border);
    border-radius: var(--es-r-lg);
    background: var(--es-bad-soft);
    color: var(--es-body);
}

.reg-strip__icon {
    background: var(--es-bad);
    color: var(--es-bad-ink);
}

.reg-strip__text {
    flex: 1 1 16rem;
    margin: 0;
    font-size: .9rem;
}

.reg-strip__text b {
    color: var(--es-bad);
}

.reg-strip__link {
    margin-left: auto;
    background: var(--es-surface);
}

/* ---- the list: tabs and search in the card's head */
.reg-list__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--es-line);
}

.reg-list__head > .tabs {
    min-width: 0;
    max-width: 100%;
    margin: 0;
}

.reg-list__search {
    flex: 0 1 22rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.reg-list__search .form-control {
    border-radius: var(--es-r-pill);
}

.reg-list__empty {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The table keeps its width and scrolls inside the card on a phone (.table-card__scroll). The
   badge is a line under the name, not a column, and the registration time steps aside while a row
   is open, so at 1440 the whole row fits beside the panel (Stage 8 review). */
.reg-table {
    min-width: 44rem;
}

/* The panel a little narrower than the shared one: the list is the page here. */
@media (min-width: 1200px) {
    .review-layout.reg-layout:has(> .review-panel) {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    }

    .reg-layout:has(> .review-panel) .reg-table {
        min-width: 0;
    }

    .reg-layout:has(> .review-panel) .reg-table__mail {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

.reg-table--pending {
    min-width: 60rem;
}

.reg-table > tbody > tr.is-failed > td {
    background: var(--es-bad-soft);
}

.reg-table__pos {
    width: 3.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.reg-table__who {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.reg-table__face {
    width: 2.25rem;
    height: 2.25rem;
    font-size: .72rem;
}

.reg-table__names {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.reg-table__name {
    color: var(--es-ink);
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.reg-table__name:hover,
a.reg-table__name[aria-current] {
    color: var(--es-brand);
    text-decoration: underline;
}

/* Unbroken: an address split mid-word reads as two; the table scrolls inside its card instead. */
.reg-table__mail {
    color: var(--es-muted);
    font-size: .8rem;
    white-space: nowrap;
}

.reg-table > thead > tr > th:first-child:not(.cell-num),
.reg-table > thead > tr > th.cell-num + th {
    min-width: 14rem;
}

.reg-table__time {
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

.reg-table__none {
    color: var(--es-faint);
}

.reg-table__source {
    color: var(--es-muted);
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.reg-table__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: .78rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.reg-table__badge svg {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
}

.reg-table__badge--ok {
    color: var(--es-muted);
}

.reg-table__badge--warn {
    color: var(--es-warn);
}

.reg-table__badge--bad {
    color: var(--es-bad);
}

.reg-table__status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.reg-table__actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

/* "Başvuruyu gör" leads the actions cell (UIhataları 54): reading comes before deciding. */
.reg-table__view {
    white-space: nowrap;
}

/* With the panel open beside the list the actions cell is narrow: the button keeps its eye and
   its accessible name, the word steps aside (clipped, not removed, so the link still says it). */
@media (min-width: 1200px) {
    .reg-layout:has(> .review-panel) .reg-table__view {
        min-width: var(--es-h-btn-sm);
        padding-inline: 0;
        justify-content: center;
    }

    .reg-layout:has(> .review-panel) .reg-table__view-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

/* The list's anchor: a decision taken without script lands here, under the top bar
   (RegistrationsController.ListFragment, UIhataları 56). */
.reg-list {
    scroll-margin-top: calc(var(--es-bar-h) + var(--es-space-4));
}

.reg-action {
    margin: 0;
}

.reg-action .btn {
    white-space: nowrap;
}

/* ---- C's panel: the facts, the badge box, the answers and every action */
/* C's rows: the name on the left, the value on the right, one line each where it fits. */
.reg-panel__facts {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0;
}

.reg-panel__facts dt,
.reg-panel__facts dd {
    padding: .55rem 0;
    font-size: .85rem;
}

/* Spacing inside the value rather than a column gap, so each row's rule runs unbroken. */
.reg-panel__facts dd {
    padding-left: 1rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.reg-panel__zone {
    color: var(--es-faint);
    font-size: .8rem;
}

.reg-panel__badge,
.reg-panel__answers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reg-panel__badge-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-sm);
    background: var(--es-fill);
    font-size: .85rem;
}

.reg-panel__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--es-faint);
}

.reg-panel__badge-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    color: var(--es-ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.reg-panel__badge-kiosk {
    color: var(--es-muted);
    font-size: .78rem;
    font-weight: 500;
}

.reg-panel__badge-time {
    color: var(--es-faint);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.reg-panel__badge-box--ok .reg-panel__dot {
    background: var(--es-ok);
}

.reg-panel__badge-box--warn {
    border-color: var(--es-warn-border);
    background: var(--es-warn-soft);
}

.reg-panel__badge-box--warn .reg-panel__dot {
    background: var(--es-warn);
}

.reg-panel__badge-box--bad {
    border-color: var(--es-bad-border);
    background: var(--es-bad-soft);
}

.reg-panel__badge-box--bad .reg-panel__dot {
    background: var(--es-bad);
}

.reg-panel__badge-box--bad .reg-panel__badge-text {
    color: var(--es-bad);
}

.reg-panel__badge .reg-action .btn,
.reg-panel__actions .reg-action .btn {
    width: 100%;
}

.reg-panel__answer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.reg-panel__answer {
    padding: 10px 12px;
    border-radius: var(--es-r-sm);
    background: var(--es-fill);
}

.reg-panel__answer dt {
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 600;
}

.reg-panel__answer dd {
    margin: 2px 0 0;
    color: var(--es-ink);
    font-size: .875rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.reg-panel__empty {
    margin: 0;
    color: var(--es-muted);
    font-size: .875rem;
}

.reg-panel__more {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--es-brand);
    font-size: .85rem;
    font-weight: 700;
}

.reg-panel__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 8px;
}

@media (pointer: coarse) {
    .reg-panel__more {
        min-height: 44px;
    }
}

/* ------------------------------------------- "Başvuru" (plan job 8.8, portal4-Application-B + C's step texts)
   Areas/Portal/Views/Registrations/Application: the way back and previous / next in a white
   capsule, B's head card — a large initials tile, the name, the contact chips, the status and the
   three steps in a grey band — then "Başvuran" with an icon box per fact beside the answers, each
   under its question with the type's pill. */
.appl-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1.25rem;
}

.appl-steps-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-pill);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.appl-steps-nav__btn {
    border-radius: var(--es-r-pill);
}

.appl-steps-nav__where {
    padding: 0 6px;
    color: var(--es-ink);
    font-size: .9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.appl-steps-nav__of {
    color: var(--es-faint);
    font-weight: 600;
}

.appl-head {
    margin-bottom: 1.5rem;
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.appl-head__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}

.appl-head__avatar {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: clamp(64px, 8vw, 96px);
    height: clamp(64px, 8vw, 96px);
    border-radius: 30%;
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-family: var(--es-font-display);
    font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
    font-weight: 700;
}

.appl-head__titles {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.appl-head__name {
    margin: 0;
    color: var(--es-ink);
    font-size: var(--es-fs-title);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.appl-head__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.appl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    max-width: 100%;
    padding: .25rem .8rem;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-body);
    font-size: .85rem;
    font-weight: 600;
}

.appl-chip svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--es-muted);
}

.appl-head__status {
    font-size: .875rem;
}

/* The status pills and the decisions at the head's end (UIhataları 57): the application's status
   and the registration's side by side, Onayla / Reddet under them. On a phone the column takes the
   whole width and the buttons share it. */
.appl-head__side {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--es-space-3);
    margin-left: auto;
}

.appl-head__pills {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--es-space-2);
}

.appl-head__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--es-space-2);
}

@media (max-width: 575.98px) {
    .appl-head__side {
        flex-basis: 100%;
        align-items: stretch;
        margin-left: 0;
    }

    .appl-head__pills {
        justify-content: flex-start;
    }

    .appl-head__actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    }

    .appl-head__actions .btn {
        width: 100%;
    }
}

/* B's grey band with the three steps; on a phone the steps stack, the line between them drops. */
.appl-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin: 24px 0 0;
    padding: 18px 20px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
    list-style: none;
}

@media (min-width: 768px) {
    .appl-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
}

.appl-flow__step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.appl-flow__mark {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.appl-flow__mark svg {
    width: 17px;
    height: 17px;
}

.appl-flow__step--ok .appl-flow__mark {
    background: var(--es-ok);
    color: var(--es-ok-ink);
}

.appl-flow__step--wait .appl-flow__mark {
    border: 1.5px dashed var(--es-warn);
    background: var(--es-warn-soft);
    color: var(--es-warn);
}

.appl-flow__step--off .appl-flow__mark {
    background: var(--es-fill-2);
    color: var(--es-muted);
}

.appl-flow__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.appl-flow__title {
    color: var(--es-ink);
    font-size: .9rem;
    font-weight: 700;
}

.appl-flow__step--wait .appl-flow__title {
    color: var(--es-warn);
}

.appl-flow__text {
    color: var(--es-muted);
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.appl-flow__when {
    color: var(--es-faint);
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.appl-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 992px) {
    .appl-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}

.appl-card {
    padding: 22px 24px;
    border-radius: var(--es-r-xl);
}

.appl-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.appl-card__title {
    margin: 0;
    color: var(--es-ink);
    font-size: 1.25rem;
}

.appl-card__note {
    margin: 8px 0 4px;
    color: var(--es-muted);
    font-size: .8rem;
}

.appl-facts {
    display: flex;
    flex-direction: column;
    margin: 14px 0 0;
}

/* The icon box sits in the dt (a dl takes nothing else), held to the left of both lines. */
.appl-fact {
    position: relative;
    min-height: 54px;
    padding: 9px 0 9px 48px;
    border-top: 1px solid var(--es-line);
}

.appl-fact:first-child {
    border-top: 0;
}

.appl-fact__icon {
    position: absolute;
    top: 10px;
    left: 0;
}

.appl-fact dt {
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 600;
}

.appl-fact dd {
    margin: 0;
    color: var(--es-ink);
    font-size: .9rem;
    font-weight: 700;
}

.appl-fact__zone {
    color: var(--es-faint);
    font-weight: 500;
}

.appl-answers {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.appl-answer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 0;
    border-top: 1px solid var(--es-line);
}

.appl-answer__q {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    color: var(--es-muted);
    font-size: .875rem;
    font-weight: 700;
}

.appl-answer__a {
    margin: 0;
}

.appl-answer__bubble,
.appl-answer__long {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
    color: var(--es-ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.appl-answer__long {
    display: block;
    font-weight: 500;
    line-height: 1.65;
    white-space: pre-line;
}

.appl-answer__picks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.appl-answer__pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: .3rem .85rem .3rem .4rem;
    border: 1px solid var(--es-brand-border);
    border-radius: var(--es-r-pill);
    background: var(--es-brand-soft);
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 600;
}

.appl-answer__pick svg {
    box-sizing: content-box;
    width: 12px;
    height: 12px;
    padding: 4px;
    border-radius: 50%;
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.appl-empty {
    margin: 16px 0 0;
    border: 0;
    box-shadow: none;
}

/* ------------------------------------------- "Başvuru soruları" (plan job 8.9, portal4-Questions-B + C)
   The owner's own request: the editor and the list on the left, the application form in a phone
   on the right (_FormPreview), the phone under the list below 992px. B's "Soru ekle" card with its
   types as cards, B's question cards with C's 01–05 numbering, answer count and order arrows (no
   drag and drop), C's in-place editor, and B's dashed box of removed questions. The editor's
   widths are its own container's, since the same editor sits in the add card and inside a
   question's card. */
.qs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@media (min-width: 992px) {
    .qs-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}

.qs-main {
    display: grid;
    gap: 24px;
    min-width: 0;
}

/* ---- the add card */
.qs-add {
    padding: 24px;
}

.qs-add__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.qs-add__title {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.25;
}

/* ---- the editor (the add card's body and a question's card turned editor) */
.qs-editor {
    container-type: inline-size;
}

.qs-editor__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px 20px;
}

@container (min-width: 560px) {
    .qs-editor__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qs-editor__full {
        grid-column: 1 / -1;
    }
}

.qs-editor__field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.qs-editor__field > legend {
    float: none;
    width: auto;
    padding: 0;
}

.qs-editor__opt {
    margin-left: .35rem;
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 600;
}

.qs-editor__options {
    min-height: 120px;
}

.qs-editor__warn {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .5rem 0 0;
    padding: .45rem .75rem;
    border: 1px solid var(--es-warn-border);
    border-radius: var(--es-r-sm);
    background: var(--es-warn-soft);
    color: var(--es-warn);
    font-size: .8125rem;
    font-weight: 600;
}

.qs-editor__warn svg {
    flex: none;
    width: 16px;
    height: 16px;
}

/* The required switch above the buttons, in B's right-hand column beside the options. */
.qs-editor__end {
    display: grid;
    align-content: end;
    gap: 18px;
}

.qs-editor__switch {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.qs-editor__switch .switch {
    margin-top: 2px;
}

.qs-editor__switch-text {
    display: grid;
    gap: .1rem;
}

.qs-editor__switch-label {
    color: var(--es-ink);
    font-weight: 700;
    font-size: .9rem;
}

.qs-editor__hint {
    color: var(--es-muted);
    font-size: .8125rem;
}

.qs-editor__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* B's type cards: the real radio, visually hidden but in the tab order with its arrow keys, and
   the face after it drawn as the card (the role cards' technique, plan job 7.5). Four abreast in a
   wide editor, two in a narrow one, one on a small phone. */
.qs-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@container (min-width: 640px) {
    .qs-types {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container (max-width: 330px) {
    .qs-types {
        grid-template-columns: minmax(0, 1fr);
    }
}

.qs-type {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.qs-type__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.qs-type__face {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    min-height: 44px;
    padding: 12px;
    border-radius: var(--es-r);
    background: var(--es-surface);
    box-shadow: inset 0 0 0 1px var(--es-edge);
    transition: box-shadow var(--es-dur-fast) var(--es-ease), background-color var(--es-dur-fast) var(--es-ease);
}

.qs-type__text {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.qs-type__name {
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 700;
}

.qs-type__desc {
    color: var(--es-muted);
    font-size: .75rem;
    line-height: 1.3;
}

.qs-type:hover .qs-type__face {
    box-shadow: inset 0 0 0 1px var(--es-brand);
}

.qs-type__input:checked + .qs-type__face {
    background: var(--es-brand-soft);
    box-shadow: inset 0 0 0 2px var(--es-brand);
}

.qs-type__input:checked + .qs-type__face .qs-type__icon {
    background: var(--es-brand);
    color: var(--es-brand-ink);
}

.qs-type__input:focus-visible + .qs-type__face {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.qs-type:has(.qs-type__input:disabled) {
    cursor: not-allowed;
}

.qs-type__input:disabled + .qs-type__face {
    opacity: .6;
}

.qs-type:has(.qs-type__input:disabled):hover .qs-type__face {
    box-shadow: inset 0 0 0 1px var(--es-edge);
}

/* ---- the list */
.qs-list__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
    padding: 0 6px;
}

.qs-list__title {
    margin: 0;
    font-size: 1.3rem;
}

.qs-list__dim {
    color: var(--es-faint);
}

.qs-list__hint {
    color: var(--es-muted);
    font-size: .8125rem;
    font-weight: 600;
}

.qs-cards {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* B's card with C's number in front: number, type icon, the question, its answer count. */
.qs-card {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
    padding: 18px 20px;
}

.qs-card__num {
    min-width: 1.6rem;
    padding-top: .7rem;
    color: var(--es-faint);
    font-size: .8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.qs-card__body {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.qs-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.qs-card__label {
    margin: 0;
    color: var(--es-ink);
    font-size: 1.05rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.qs-card__help {
    margin: 0;
    color: var(--es-muted);
    font-size: .8125rem;
}

.qs-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.qs-card__option {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    max-width: 100%;
    padding: 0 10px;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-body);
    font-size: .78rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.qs-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.qs-card__actions form {
    margin: 0;
}

/* B's round order buttons, 44px under a finger. */
.qs-card__arrow {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--es-fill);
    color: var(--es-ink);
    transition: background-color var(--es-dur-fast) var(--es-ease);
}

.qs-card__arrow svg {
    width: 18px;
    height: 18px;
}

.qs-card__arrow:hover:not(:disabled, [aria-disabled="true"]) {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
}

.qs-card__arrow:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.qs-card__arrow:disabled {
    opacity: .35;
    cursor: not-allowed;
}

@media (pointer: coarse) {
    .qs-card__arrow {
        width: 44px;
        height: 44px;
    }
}

.qs-card__count {
    display: grid;
    justify-items: center;
    min-width: 64px;
    text-align: center;
}

.qs-card__figure {
    font-family: var(--es-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

.qs-card__unit {
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 600;
}

/* C's in-place editor: the question's own card, ringed in the accent. */
.qs-card--editing {
    display: block;
    padding: 22px;
    border-color: var(--es-brand-border);
    box-shadow: 0 0 0 2px var(--es-brand), var(--es-card-shadow);
    /* Clear of the sticky top bar and event tabs when "Düzenle" lands on #soru-{id}. */
    scroll-margin-top: 150px;
}

.qs-card__edit-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
    margin-bottom: 14px;
}

.qs-card__edit-title {
    margin: 0;
    font-size: 1.15rem;
}

.qs-card__edit-meta {
    color: var(--es-muted);
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.qs-card__edit-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: -4px 0 16px;
    color: var(--es-muted);
    font-size: .8125rem;
}

.qs-card__edit-note svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

@media (max-width: 575.98px) {
    .qs-add,
    .qs-card--editing {
        padding: 18px 16px;
    }

    /* On a phone the count moves under the question, and the number above the icon. */
    .qs-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px 12px;
        padding: 16px;
    }

    .qs-card__num {
        grid-row: 1;
        grid-column: 1;
        padding-top: 0;
    }

    .qs-card__icon {
        grid-row: 2;
        grid-column: 1;
    }

    .qs-card__body {
        grid-row: 1 / span 2;
        grid-column: 2;
    }

    .qs-card__count {
        grid-column: 2;
        display: flex;
        align-items: baseline;
        gap: .35rem;
        justify-items: start;
    }

    .qs-card__figure {
        font-size: 1.15rem;
    }
}

/* ---- B's dashed box of removed questions */
.qs-archived {
    padding: 18px;
    border: 2px dashed var(--es-edge);
    border-radius: var(--es-r-lg);
}

.qs-archived__title {
    margin: 0;
    color: var(--es-muted);
    font-size: .95rem;
}

.qs-archived__lead {
    margin: .3rem 0 12px;
    color: var(--es-muted);
    font-size: .8125rem;
}

.qs-archived__list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qs-archived__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 14px;
    border-radius: var(--es-r);
    background: var(--es-surface);
}

.qs-archived__row form {
    margin: 0 0 0 auto;
}

.qs-archived__text {
    display: grid;
    flex: 1 1 12rem;
    gap: .1rem;
    min-width: 0;
}

.qs-archived__label {
    color: var(--es-muted);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: line-through;
    overflow-wrap: anywhere;
}

.qs-archived__meta {
    color: var(--es-faint);
    font-size: .75rem;
    font-weight: 600;
}

/* ---- the phone (_FormPreview): the public form at a phone's width, scaled into the frame. The
   frame's screen is 280px; zoom lays the form out about 370px wide — a real phone's — and draws
   it at the frame's size, so the public form's own rem sizes and wrapping are what show. */
.qs-side {
    min-width: 0;
}

/* Under the portal's sticky event tabs (.evnav), not behind them. */
@media (min-width: 992px) {
    .qs-side .preview-stage--sticky {
        top: 140px;
    }
}

/* The frame holds the scroller and, over it, the badge; the scroller is what site.js moves to keep
   the edited question in view, so the badge stays put on the screen's lower edge. */
/* The top padding is a phone's status bar: the frame's camera island ends 32px into the screen.
   It sits on the frame, outside the scroller, so no line — the first, or one site.js scrolled
   to — is ever drawn under the island. */
.qprev-frame {
    position: relative;
    height: 100%;
    padding-top: 40px;
}

.qprev-scroll {
    height: 100%;
    overflow: hidden;
}

.qprev {
    zoom: .76;
    color: var(--es-body);
    font-size: 1rem;
}


.qprev__body {
    display: grid;
    gap: 16px;
    /* Room under the button for the "Yeni soru" badge once the form is scrolled to its end. */
    padding: 16px 18px 84px;
}

.qprev__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.qprev .apply-steps {
    margin: 0;
    gap: .35rem .5rem;
}

.qprev .apply-steps__list {
    display: none;
}

.qprev__event {
    color: var(--es-muted);
    font-size: .875rem;
    font-weight: 700;
}

.qprev__title {
    margin-top: -10px;
    font-family: var(--es-font-display);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--es-ink);
}

.qprev__title-dim {
    display: block;
    color: var(--es-faint);
}

.qprev__fixed {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem .9rem;
    border: 1px dashed var(--es-edge);
    border-radius: var(--es-r);
    color: var(--es-muted);
    font-size: .875rem;
    font-weight: 600;
}

.qprev__fixed svg {
    flex: none;
    width: 18px;
    height: 18px;
}

/* The phone's headings rule (.phone-frame__screen h2) would shrink the box's own title. */
.qprev .apply-questions__title {
    font-size: 1.15rem;
}

/* The question being edited, ringed as C rings it. */
.qprev .apply-q.is-previewed {
    margin: -.6rem;
    padding: .6rem;
    border-radius: var(--es-r);
    background: var(--es-brand-soft);
    box-shadow: 0 0 0 2px var(--es-brand);
}

.qprev__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 52px;
    border-radius: var(--es-r-btn);
    background: var(--es-brand);
    color: var(--es-brand-ink);
    font-weight: 700;
}

.qprev__submit svg {
    width: 18px;
    height: 18px;
}

/* B's "Yeni soru 6. sırada", on the screen's lower edge while the add card is the editor. */
.qprev__badge {
    position: absolute;
    right: 12px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .7rem;
    border-radius: var(--es-r-pill);
    background: var(--es-ink);
    color: var(--es-page);
    font-size: .7rem;
    font-weight: 700;
    box-shadow: var(--es-shadow-2);
}

.qprev__badge svg {
    width: 12px;
    height: 12px;
}

/* ------------------------------------------- "Etkinlik konuşmacıları" (plan job 8.10; UIhataları 51, 65, K9)
   A speaker is created only in the pool, so this page picks from it: one single-row "Havuzdan
   seç" form, the status chips, one compact table — face, name, role, order, status, Kaydet and a
   row menu — and the public preview folded into a .disclosure under it. On a phone a row stacks
   into a small grid of its own instead of scrolling sideways (UIhataları 82). */

/* ---- "Havuzdan seç": a quiet strip, the fields on one row from 768px. */
.esk-pick {
    margin-bottom: var(--es-space-5);
    padding: var(--es-space-3) var(--es-space-4) var(--es-space-4);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r);
    background: var(--es-surface);
}

.esk-pick__title {
    margin: 0 0 var(--es-space-2);
    color: var(--es-ink);
    font-family: var(--es-font-body);
    font-size: var(--es-fs-sm);
    font-weight: 700;
    letter-spacing: 0;
}

.esk-pick__text {
    margin: 0;
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
}

.esk-pick__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--es-space-3);
    align-items: end;
}

.esk-pick__summary {
    grid-column: 1 / -1;
}

.esk-pick__field {
    min-width: 0;
}

.esk-pick__field .form-label {
    margin-bottom: var(--es-space-1);
    font-size: var(--es-fs-xs);
}

.esk-pick__go {
    justify-self: start;
    white-space: nowrap;
}

@media (min-width: 576px) {
    .esk-pick__form {
        grid-template-columns: minmax(0, 1fr) 6rem;
    }

    .esk-pick__field--who {
        grid-column: 1 / -1;
    }
}

/* One row: the speaker takes the room, the role a third of it, the order a number's width. Each
   field keeps its own label above it, so the button lines up with the inputs by the end edge. */
@media (min-width: 992px) {
    .esk-pick__form {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1.25fr) 6rem auto;
    }

    .esk-pick__field--who {
        grid-column: auto;
    }
}

/* ---- chips and table */
.esk-list__chips {
    position: relative;
    display: flex;
    gap: var(--es-space-2);
    min-width: 0;
    max-width: 100%;
    margin-bottom: var(--es-space-3);
    overflow-x: auto;
    scrollbar-width: none;
}

/* (Positioned so the chips' visually-hidden separators are clipped by this scroller rather than by
   the page: without it they widened a phone's page by the row's hidden length.) */
.esk-list__chips::-webkit-scrollbar {
    display: none;
}

/* C's status dot inside a chip, in the tone the status pill uses. */
.esk-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--es-faint);
}

.esk-dot--ok {
    background: var(--es-dot-ok);
}

.esk-dot--warn {
    background: var(--es-dot-warn);
}

.esk-dot--bad {
    background: var(--es-dot-bad);
}

.chip.is-active .esk-dot {
    box-shadow: 0 0 0 2px var(--es-brand-ink);
}

.esk-list__empty {
    margin: 0;
}

.esk-row {
    scroll-margin-top: calc(var(--es-bar-h) + var(--es-space-4));
}

.esk-table__who {
    display: flex;
    align-items: center;
    gap: var(--es-space-3);
    min-width: 14rem;
}

.esk-face {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-size: var(--es-fs-xs);
    font-weight: 700;
}

.esk-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.esk-table__names {
    display: grid;
    min-width: 0;
}

.esk-table__name {
    color: var(--es-ink);
    font-weight: 650;
    overflow-wrap: anywhere;
}

.esk-table__sub {
    color: var(--es-muted);
    font-size: var(--es-fs-xs);
    overflow-wrap: anywhere;
}

.esk-table__role {
    min-width: 10rem;
}

.esk-table__order {
    width: 5.5rem;
}

.esk-table__order .form-control {
    max-width: 5rem;
}

.esk-table__status {
    white-space: nowrap;
}

/* The account state under the status pill (§35 T60): a fact, so plain muted text, not a second pill. */
.esk-table__account {
    display: block;
    margin-top: 2px;
    color: var(--es-muted);
    font-size: var(--es-fs-xs);
}

/* The column caption over an input: only drawn on a phone, where the table head is not. */
.esk-table__cap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.esk-table__actions {
    width: 1%;
    white-space: nowrap;
}

.esk-table__actions > form {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

/* ---- the row menu (Yeniden gönder, Çıkar): a <details>, so it works with script off; site.js
   closes it on a click elsewhere or Escape, like .prog-menu and .aorg-menu. */
.esk-menu {
    position: relative;
    display: inline-block;
    margin-left: var(--es-space-1);
    vertical-align: middle;
}

.esk-menu__button {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--es-h-btn-sm);
    height: var(--es-h-btn-sm);
    border-radius: var(--es-r-sm);
    color: var(--es-muted);
    list-style: none;
    cursor: pointer;
}

.esk-menu__button::-webkit-details-marker {
    display: none;
}

.esk-menu__button svg {
    width: 18px;
    height: 18px;
}

.esk-menu__button:hover,
.esk-menu[open] > .esk-menu__button {
    background: var(--es-fill-2);
    color: var(--es-ink);
}

.esk-menu__button:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

.esk-menu__panel {
    z-index: 5;
    min-width: 13.5rem;
    margin-top: var(--es-space-1);
    text-align: start;
    white-space: normal;
}

.esk-menu__panel form {
    margin: 0;
}

/* As the admin organizations' menu: on a wide screen the panel floats over the rows and the scroll
   box lets it out while it is open; narrower it is a sheet pinned to the bottom of the screen,
   which no scroll box clips. */
@media (max-width: 991.98px) {
    .esk-menu__panel {
        position: fixed;
        right: var(--es-gutter);
        bottom: var(--es-space-4);
        left: var(--es-gutter);
        z-index: 1040;
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        margin: 0;
    }
}

@media (min-width: 992px) {
    .esk-menu__panel {
        position: absolute;
        top: 100%;
        right: 0;
    }

    .table-card:has(.esk-menu[open]),
    .table-card__scroll:has(.esk-menu[open]) {
        overflow: visible;
    }

    .esk-menu[open] > .esk-menu__panel {
        transform-origin: top right;
        animation: es-menu-in var(--es-dur) var(--es-ease);
    }
}

/* ---- "Etkinlik sayfasında": the public card, smaller, folded away under the table. */
.esk-preview {
    margin-top: var(--es-space-4);
}

.esk-preview__body {
    padding: var(--es-space-4) 0 0;
}

.esk-preview__none {
    margin: 0;
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
}

.esk-preview__grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--es-space-3);
}

.esk-preview__grid .speaker-card {
    padding: var(--es-space-4) var(--es-space-2);
    border-radius: var(--es-r-lg);
}

.esk-preview__grid .speaker-card__portrait {
    width: 64px;
    height: 64px;
    font-size: 1.25rem;
}

.esk-preview__grid .speaker-card__name {
    font-size: var(--es-fs-body);
}

/* ---- phone: each row is a small grid — who and status, then role and order, then the actions —
   so nothing scrolls sideways (UIhataları 82). */
@media (max-width: 767.98px) {
    .esk-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .esk-table,
    .esk-table > tbody {
        display: block;
    }

    .esk-table > tbody > tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 5.5rem;
        grid-template-areas:
            "who who"
            "role order"
            "status actions";
        gap: var(--es-space-2) var(--es-space-3);
        align-items: center;
        padding: var(--es-space-3) var(--es-space-4);
        border-bottom: 1px solid var(--es-line);
    }

    .esk-table > tbody > tr:last-child {
        border-bottom: 0;
    }

    .app-main .esk-table > tbody td,
    .esk-table > tbody td {
        padding: 0;
        border: 0;
    }

    .esk-table__who {
        grid-area: who;
        min-width: 0;
    }

    .esk-table__role {
        grid-area: role;
        min-width: 0;
    }

    .esk-table__order {
        grid-area: order;
        width: auto;
    }

    .esk-table__status {
        grid-area: status;
        white-space: normal;
    }

    .esk-table__actions {
        grid-area: actions;
        width: auto;
        text-align: end;
    }

    .esk-table__cap {
        position: static;
        display: block;
        width: auto;
        height: auto;
        margin-bottom: 2px;
        overflow: visible;
        clip: auto;
        color: var(--es-muted);
        font-size: var(--es-fs-xs);
        font-weight: 650;
    }
}

/* A finger needs 44px: the menu's hit area grows past the drawn button. */
@media (pointer: coarse) {
    .esk-menu__button {
        width: var(--es-h-btn);
        height: var(--es-h-btn);
    }
}

/* ------------------------------------------- "Etkinlik sponsorları" (plan job 8.11; UIhataları 52, 53, K9)
   A sponsor is created only in the organization's pool, so the page opens on one strip,
   "Etkinliğe bağla": pick from the pool, tier, position, button — one row from 768px, stacked on
   a phone. Then the sponsors as compact rows in one card: a 40px logo (.sponsor-logo--sm), the
   name with its site, the tier, the position, Kaydet and Çıkar. Each row's update form is
   display: contents so its fields take the row's own grid cells while Kaydet stays inside the
   form. The wide screen's column names sit over the rows; on a phone the columns stack and each
   row shows its own small labels. The public wall is a closed .disclosure under the list. */
.evsp {
    display: grid;
    gap: var(--es-space-4);
    margin-bottom: var(--es-space-6);
}

/* ---- "Etkinliğe bağla" */
.evsp-attach {
    padding: var(--es-card-pad);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.evsp-attach__title {
    margin: 0 0 var(--es-space-3);
    color: var(--es-ink);
    font-family: var(--es-font-body);
    font-size: var(--es-fs-body);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
}

.evsp-attach__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6rem;
    gap: var(--es-space-3);
    align-items: start;
}

.evsp-attach__summary,
.evsp-attach__field--sponsor,
.evsp-attach__go {
    grid-column: 1 / -1;
}

.evsp-attach__summary:empty,
.evsp-attach__summary.validation-summary-valid {
    display: none;
}

.evsp-attach__summary ul {
    margin: 0;
    padding-left: 1.1rem;
}

.evsp-attach__field {
    display: grid;
    gap: var(--es-space-1);
    min-width: 0;
}

.evsp-attach__label {
    color: var(--es-muted);
    font-size: var(--es-fs-xs);
    font-weight: 700;
    line-height: 1.5;
}

.evsp-attach__go svg {
    width: 16px;
    height: 16px;
}

.evsp-attach__none {
    margin: 0;
    color: var(--es-muted);
    font-size: var(--es-fs-sm);
}

.evsp-attach__form + .evsp-attach__none {
    margin-top: var(--es-space-3);
}

@media (min-width: 768px) {
    .evsp-attach__form {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) 6rem auto;
    }

    .evsp-attach__field--sponsor,
    .evsp-attach__go {
        grid-column: auto;
    }

    /* Level with the fields under their labels: the label's line and the field's gap. */
    .evsp-attach__go {
        margin-top: calc(var(--es-fs-xs) * 1.5 + var(--es-space-1));
    }
}

/* ---- the sponsors */
.evsp-list__empty {
    padding: var(--es-space-6) var(--es-space-5);
}

.evsp-list__card {
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.evsp-list__head {
    display: none;
}

.evsp-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.evsp-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas: "logo who meta";
    gap: var(--es-space-2) var(--es-space-3);
    align-items: center;
    padding: var(--es-space-3) var(--es-card-pad);
    scroll-margin-top: calc(var(--es-bar-h) + var(--es-space-6));
}

.evsp-row + .evsp-row {
    border-top: 1px solid var(--es-line);
}

.evsp-row__logo {
    grid-area: logo;
}

.evsp-row__who {
    grid-area: who;
    display: grid;
    gap: 2px;
    min-width: 0;
}

.evsp-row__name {
    margin: 0;
    color: var(--es-ink);
    font-family: var(--es-font-body);
    font-size: var(--es-fs-body);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.evsp-row__site {
    justify-self: start;
    color: var(--es-muted);
    font-size: var(--es-fs-xs);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.evsp-row__site:hover {
    color: var(--es-ink);
    text-decoration: underline;
}

.evsp-row__note {
    color: var(--es-muted);
    font-size: var(--es-fs-xs);
    font-weight: 600;
}

/* A member's read-only row: the tier pill and the position on the right. */
.evsp-row__meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--es-space-2);
    min-width: 0;
}

.evsp-row__pos {
    color: var(--es-faint);
    font-size: var(--es-fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The owner's row. The form is a box of its own nowhere: its fields are cells of the row. */
.evsp-row__form {
    display: contents;
}

.evsp-row__tier {
    grid-area: tier;
    min-width: 0;
}

.evsp-row__order {
    grid-area: order;
    min-width: 0;
}

.evsp-row__save {
    grid-area: save;
    width: 100%;
}

.evsp-row__remove {
    grid-area: remove;
    margin: 0;
}

.evsp-row__remove .btn {
    width: 100%;
}

.evsp-row__label {
    display: block;
    margin-bottom: var(--es-space-1);
    color: var(--es-muted);
    font-size: var(--es-fs-xs);
    font-weight: 700;
}

/* A phone: logo and name, then tier and position, then the two buttons. */
.evsp-row--edit {
    grid-template-columns: 40px minmax(0, 1fr) 5.5rem;
    grid-template-areas:
        "logo who who"
        "tier tier order"
        "save save remove";
}

@media (max-width: 767.98px) {
    /* The read-only row lets its pill drop under the name rather than squeeze it. */
    .evsp-row:not(.evsp-row--edit) {
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-areas:
            "logo who"
            ". meta";
    }

    .evsp-row:not(.evsp-row--edit) .evsp-row__meta {
        justify-content: flex-start;
    }
}

@media (min-width: 768px) {
    /* One line per sponsor; the head shares the row's columns so the names sit over them. The
       button columns are fixed, never auto, or the head and each row would size them apart. */
    .evsp-list__head,
    .evsp-row--edit {
        grid-template-columns: 40px minmax(0, 1fr) minmax(8rem, 13rem) 5.5rem 5.75rem 5.25rem;
        grid-template-areas: "logo who tier order save remove";
    }

    .evsp-list__head {
        display: grid;
        gap: var(--es-space-3);
        padding: var(--es-space-2) var(--es-card-pad);
        border-bottom: 1px solid var(--es-line);
        color: var(--es-muted);
        font-size: var(--es-fs-xs);
        font-weight: 700;
    }

    .evsp-list__col--who {
        grid-column: 1 / 3;
    }

    .evsp-list__col--tier {
        grid-area: tier;
    }

    .evsp-list__col--order {
        grid-area: order;
    }

    /* The column head names them; the labels stay for a screen reader. */
    .evsp-row__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ---- "Etkinlik sayfasında önizleme": closed until asked for (UIhataları 53). */
.evsp-wall > .disclosure__summary {
    min-height: var(--es-h-btn-lg);
}

.evsp-wall__body {
    padding: var(--es-space-4) var(--es-space-1) 0;
}

.evsp-wall__open {
    margin: 0 0 var(--es-space-3);
    font-size: var(--es-fs-sm);
    font-weight: 600;
}

.evsp-wall__open svg {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

.evsp-wall__stage .sponsor-band:last-child {
    margin-bottom: 0;
}

/* =============================================================================================
   "Duyurular" (plan job 8.12, the owner's own request; portal4-Announcements-B + C)
   =============================================================================================

   Portal/Views/Announcements/Index.cshtml and _NotificationPreview.cshtml. B's "Yeni duyuru" card
   beside the phone (the phone under the form below 992px): the audiences as counted cards with
   C's ratio bars, the channels as switch capsules, "N kişiye gidecek" and the count on the
   button; then the history — C's tiles over C's table. The phone's screens are foreign and keep
   their own colours in both themes: the lock screen's ember wallpaper and the mail's light body
   under its dark band (--es-lock-*, --es-mail-*, --es-paper-*). The audience cards' colour fade
   is the only transition, switched off in the reduced-motion block at the end of the file; the
   phone's parts fade in through the shared .preview-stage .is-entering. */
.ann-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-bottom: 40px;
}

@media (min-width: 992px) {
    .ann-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

@media (min-width: 1200px) {
    .ann-layout {
        grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
    }
}

/* ---- the form */
.ann-form {
    display: grid;
    gap: 20px;
    min-width: 0;
    padding: 28px;
    container-type: inline-size;
}

.ann-form__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.ann-form__title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.25;
}

.ann-form__quota {
    color: var(--es-muted);
    font-size: .8125rem;
    font-weight: 600;
}

.ann-form__quota strong {
    color: var(--es-brand-strong);
}

.ann-form__field {
    display: grid;
    gap: .4rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ann-form__field > .form-label {
    float: none;
    margin-bottom: 0;
    padding: 0;
}

/* ---- the audience cards: the real radio, visually hidden but in the tab order with its arrow
   keys, and the face after it drawn as B's card (the type cards' technique, plan job 8.9). Four
   abreast in a wide form, two otherwise. */
.ann-audiences {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@container (min-width: 520px) {
    .ann-audiences {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ann-aud {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.ann-aud__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.ann-aud__face {
    display: grid;
    align-content: start;
    gap: 6px;
    height: 100%;
    padding: 14px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill-2);
    box-shadow: inset 0 0 0 2px transparent;
    transition: box-shadow var(--es-dur-fast) var(--es-ease), background-color var(--es-dur-fast) var(--es-ease);
}

.ann-aud__count {
    font-family: var(--es-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.04em;
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

.ann-aud__label {
    color: var(--es-body);
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.3;
}

.ann-aud__meter {
    margin-top: 4px;
}

.ann-aud:hover .ann-aud__face {
    box-shadow: inset 0 0 0 1px var(--es-brand);
}

.ann-aud__input:checked + .ann-aud__face {
    background: var(--es-brand-soft);
    box-shadow: inset 0 0 0 2px var(--es-brand);
}

.ann-aud__input:focus-visible + .ann-aud__face {
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

/* B's "Boş alıcı grubu": nobody to reach is visible before choosing, and the refused choice
   turns red beside the server's message. */
.ann-aud--empty .ann-aud__count {
    color: var(--es-faint);
}

.ann-aud.is-refused .ann-aud__face {
    background: var(--es-bad-soft);
    box-shadow: inset 0 0 0 2px var(--es-bad);
}

.ann-aud:has(.ann-aud__input:disabled) {
    cursor: not-allowed;
}

.ann-aud__input:disabled + .ann-aud__face {
    opacity: .6;
}

.ann-aud:has(.ann-aud__input:disabled:not(:checked)):hover .ann-aud__face {
    box-shadow: inset 0 0 0 2px transparent;
}

/* ---- the channels: B's capsules, a real switch in each */
.ann-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ann-channel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 16px 8px 10px;
    border-radius: var(--es-r-pill);
    background: var(--es-fill-2);
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 700;
}

.ann-channel label {
    margin: 0;
    cursor: pointer;
}

.ann-channel:has(.switch:disabled) label {
    cursor: not-allowed;
}

.ann-channel--fixed {
    color: var(--es-muted);
}

.ann-channel__hint {
    color: var(--es-muted);
    font-size: .75rem;
    font-weight: 600;
}

/* ---- the foot: "N kişiye gidecek" and the button. Each audience's number is in the markup; the
   chosen card's shows, by :has() — right on arrival, as the cards change and with script off. A
   browser without :has() shows the number the server drew for the choice it rendered. */
.ann-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ann-reach {
    margin: 0;
    color: var(--es-muted);
    font-size: .875rem;
    font-weight: 600;
}

.ann-reach .ann-n {
    color: var(--es-ink);
    font-weight: 700;
}

.ann-n {
    display: none;
}

.ann-n.is-chosen {
    display: inline;
}

@supports selector(:has(*)) {
    .ann-n.is-chosen {
        display: none;
    }

    .ann-form:has(#ann-aud-Registered:checked) .ann-n--Registered,
    .ann-form:has(#ann-aud-CheckedIn:checked) .ann-n--CheckedIn,
    .ann-form:has(#ann-aud-NotCheckedIn:checked) .ann-n--NotCheckedIn,
    .ann-form:has(#ann-aud-Waitlisted:checked) .ann-n--Waitlisted {
        display: inline;
    }
}

.ann-send__count {
    font-weight: 600;
    opacity: .85;
}

@media (max-width: 575.98px) {
    .ann-form {
        padding: 20px 16px;
    }

    .ann-send {
        width: 100%;
    }
}

/* ---- the preview column: C's "Bildirim | E-posta" over the shared stage (site.js shows it) */
.ann-preview {
    min-width: 0;
}

.annprev-stage {
    display: grid;
    gap: 12px;
}

.annprev-stage__seg {
    justify-self: center;
}

.annprev {
    height: 100%;
}

.annprev__side {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* The lock screen: B's wallpaper, the clock, the frosted notification. */
.annprev-lock {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    min-height: 56%;
    padding: 3.25rem .75rem 1.75rem;
    background: linear-gradient(170deg, var(--es-lock-from), var(--es-lock-mid) 55%, var(--es-lock-to));
    color: var(--es-on-photo);
    text-align: center;
}

.annprev-lock__date {
    font-size: .75rem;
    font-weight: 700;
    opacity: .85;
}

.annprev-lock__time {
    font-family: var(--es-font-display);
    font-size: 3.25rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
}

.annprev-push {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    margin-top: 1.25rem;
    padding: 10px 12px;
    border-radius: 18px;
    background: var(--es-lock-card);
    backdrop-filter: blur(10px);
    color: var(--es-paper-ink);
    text-align: left;
}

.annprev-push__app {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--es-lock-mid);
    color: var(--es-on-ember);
    font-size: .625rem;
    font-weight: 800;
}

.annprev-push__text,
.annprev-row__text {
    display: grid;
    flex: 1 1 auto;
    gap: 1px;
    min-width: 0;
}

.annprev-push__meta,
.annprev-row__meta {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: .6875rem;
    font-weight: 700;
}

.annprev-push__meta {
    color: var(--es-lock-card-muted);
}

.annprev-push__title,
.annprev-row__title {
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.3;
}

/* A phone shows a notification's first lines; the full text is cut by the server's rule first. */
.annprev-push__body,
.annprev-row__body {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: .6875rem;
    line-height: 1.4;
}

.annprev-push__body {
    color: var(--es-lock-card-muted);
}

.annprev-lock__off {
    margin-top: 1.25rem;
    padding: .3rem .7rem;
    border-radius: var(--es-r-pill);
    background: var(--es-photo-chip);
    font-size: .6875rem;
    font-weight: 700;
}

/* The app's inbox: a sheet over the lock screen's foot, or the whole screen without push. */
.annprev-inbox {
    position: relative;
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    gap: 8px;
    margin-top: -14px;
    padding: 12px;
    border-radius: 20px 20px 0 0;
    background: var(--es-page);
}

.annprev-inbox--full {
    margin-top: 0;
    padding-top: 3.25rem;
    border-radius: 0;
}

.annprev-inbox__head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--es-ink);
    font-size: .8125rem;
    font-weight: 700;
}

.annprev-inbox__head svg {
    width: 14px;
    height: 14px;
}

.annprev-row {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    background: var(--es-surface);
    box-shadow: var(--es-shadow-1), inset 0 0 0 1px var(--es-glow-line);
}

.annprev-row__meta {
    color: var(--es-muted);
    font-weight: 600;
}

.annprev-row__meta > :first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.annprev-row__meta > :last-child {
    flex: 0 0 auto;
}

.annprev-row__title {
    color: var(--es-ink);
}

.annprev-row__body {
    color: var(--es-body);
}

/* Older entries, as blank rows: no names or texts the plan would have to invent (§3 rule 10). */
.annprev-row--ghost {
    height: 44px;
    background: var(--es-fill-2);
    box-shadow: none;
}

/* The mail: the inbox's header lines, then EmailTemplates' card. */
/* The mail's faces, as EmailTemplates sets them: Onest for the text, Unbounded for the band. */
.annprev__side--mail {
    background: var(--es-mail-page);
    color: var(--es-mail-body);
    font-family: var(--es-font-body);
}

.annprev-mailhead {
    display: grid;
    gap: 2px;
    padding: 3.25rem .9rem .75rem;
    background: var(--es-paper);
    border-bottom: 1px solid var(--es-paper-line);
}

.annprev-mailhead__from {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--es-paper-ink);
    font-size: .6875rem;
    font-weight: 700;
}

.annprev-mailhead__avatar {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--es-mail-brand);
    color: var(--es-on-ember);
    font-size: .5625rem;
    font-weight: 800;
}

.annprev-mailhead__when {
    margin-left: auto;
    color: var(--es-paper-muted);
    font-weight: 600;
}

.annprev-mailhead__subject {
    color: var(--es-paper-ink);
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.3;
}

.annprev-mailhead__pre {
    overflow: hidden;
    color: var(--es-paper-muted);
    font-size: .6875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.annprev-mail {
    margin: .75rem;
    overflow: hidden;
    border-radius: 16px;
    background: var(--es-paper);
}

/* The solid night band with the kor glow in its corner — the same picture the mail fetches
   (img/mail/kor.png), never a gradient, so the preview cannot promise a look the mail lacks. */
.annprev-mail__band {
    display: grid;
    gap: 0;
    padding: 14px 16px 18px;
    background: var(--es-mail-band) url("../img/mail/kor.png") no-repeat right bottom / auto 100%;
    color: var(--es-mail-band-ink);
}

.annprev-mail__kicker {
    margin-top: 20px;
    color: var(--es-mail-ember);
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.5;
    text-transform: uppercase;
}

.annprev-mail__brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.annprev-mail__mark {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 28px;
    height: 28px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--es-mail-ember);
    color: var(--es-mail-ember-ink);
    font-family: var(--es-font-display);
    font-size: .625rem;
    font-weight: 700;
}

/* A logo sits on a white tile with a hairline, as EmailTemplates.Mark draws it. */
.annprev-mail__mark:has(img) {
    background: var(--es-paper);
    box-shadow: inset 0 0 0 1px var(--es-mail-band-line);
}

.annprev-mail__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.annprev-mail__org {
    display: block;
    font-family: var(--es-font-display);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.3;
}

.annprev-mail__tagline {
    display: block;
    color: var(--es-mail-band-muted);
    font-size: .5625rem;
}

.annprev-mail__title {
    margin-top: 5px;
    font-family: var(--es-font-display);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.025em;
}

/* The organizer's own words in design B's box, apart from the platform's sentence. */
.annprev-mail__said {
    margin: .25rem 0 .1rem;
    padding: 10px 12px 2px;
    border-radius: 12px;
    background: var(--es-mail-box);
}

.annprev-mail__body {
    padding: 14px 16px 16px;
    color: var(--es-mail-body);
    font-size: .6875rem;
    line-height: 1.6;
}

.annprev-mail__body p {
    margin: 0 0 .6rem;
}

.annprev-mail__body strong {
    color: var(--es-paper-ink);
}

.annprev-mail__name {
    color: var(--es-paper-muted);
    font-style: italic;
}

.annprev-mail__button {
    display: block;
    margin: .75rem 0 .6rem;
    padding: .55rem .9rem;
    border-radius: 10px;
    background: var(--es-mail-brand);
    color: var(--es-on-ember);
    font-weight: 800;
    text-align: center;
}

.annprev-mail__body .annprev-mail__note {
    margin: 0;
    color: var(--es-paper-muted);
    font-size: .625rem;
}

.annprev-mail__off {
    position: absolute;
    right: .75rem;
    bottom: 1rem;
    left: .75rem;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: .6rem .8rem;
    border-radius: 12px;
    background: var(--es-photo-chip);
    color: var(--es-on-photo);
    font-size: .6875rem;
    font-weight: 700;
}

.annprev-mail__off svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

/* ---- the history: C's tiles and table */
.ann-history {
    display: grid;
    gap: 16px;
}

.ann-history__title {
    margin: 0;
    font-size: 1.3rem;
}

.ann-history__dim {
    color: var(--es-faint);
}

.ann-stats {
    margin-bottom: 0;
}

.ann-stats__of {
    color: var(--es-faint);
    font-size: 1rem;
    font-weight: 600;
}

.ann-stats__meter {
    margin-top: .6rem;
}

.ann-history__cap {
    margin: 0;
    color: var(--es-muted);
    font-size: .8125rem;
}

.ann-table__message {
    min-width: 16rem;
    max-width: 30rem;
}

.ann-table__title {
    color: var(--es-ink);
    font-weight: 700;
}

/* Two lines of the message; "Tamamını göster" (a <details>, so it needs no script) lifts the
   clamp. The text is whole in the markup either way, so a screen reader reads all of it. */
.ann-table__body {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-top: 2px;
    color: var(--es-muted);
    font-size: .8125rem;
    white-space: pre-line;
}

.ann-table__message:has(.ann-table__more[open]) .ann-table__body {
    display: block;
    overflow: visible;
}

.ann-table__more > summary {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: var(--es-brand-strong);
    font-size: .75rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.ann-table__more > summary::-webkit-details-marker {
    display: none;
}

.ann-table__hide,
.ann-table__more[open] .ann-table__show {
    display: none;
}

.ann-table__more[open] .ann-table__hide {
    display: inline;
}

.ann-table__sub {
    color: var(--es-muted);
    font-size: .75rem;
}

/* ---- the history's channel cell (UIhataları 60): only the optional channels, each a small
   labelled chip; the in-app inbox is implied for every announcement, so it is not drawn. */
.ann-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--es-space-1);
}

.ann-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--es-space-1);
    padding: 2px var(--es-space-2);
    border-radius: var(--es-r-pill);
    background: var(--es-fill-2);
    color: var(--es-ink);
    font-size: var(--es-fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

.ann-chip svg {
    width: 13px;
    height: 13px;
    flex: none;
    color: var(--es-muted);
}

/* "Anlık" sits on the soft ember wash, so it takes the soft chip's pairing (brand-strong), never
   --es-brand-ink, which is only for text on the solid ember fill (UIhataları 38). */
.ann-chip--push {
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
}

.ann-chip--push svg {
    color: currentColor;
}

.ann-chips__none {
    color: var(--es-muted);
    font-size: var(--es-fs-xs);
    white-space: nowrap;
}

@media (pointer: coarse) {
    .ann-table__more > summary {
        min-height: 44px;
    }
}

/* ------------------------------------------- "Geri bildirim" (plan job 8.13, portal4-Feedback-B + C)
   B's row of three — the event's score on the ember card (the organizer call's tokens, so it is
   the same ember in both themes), the sessions' score, the spread of the event's scores — then
   the sessions best liked first as B's soft rows, and the comments as B's bubbles under the
   filter. C adds the share of the people who came, the comment counts and a thin meter of each
   session's average. Nothing here moves but the shared meters, which the reduced-motion block
   already stands still.

   .ev-head__meta is the line above a sub-page's title — the event, its date, its status pill —
   which the event report (8.16) uses too: on a phone the crumbs keep only their last level, so the
   head has to say which event this is. */
.ev-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    margin: 0 0 .5rem;
}

.fb-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .fb-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fb-dist {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1200px) {
    .fb-top {
        grid-template-columns: 4fr 3fr 5fr;
    }

    .fb-dist {
        grid-column: auto;
    }
}

.fb-score {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    min-height: 240px;
    padding: 28px;
    border-radius: var(--es-r-xl);
    background-color: var(--es-cta-from);
    background-image: radial-gradient(circle at 88% 0%, var(--es-cta-shine), transparent 55%),
        linear-gradient(135deg, var(--es-cta-from), var(--es-cta-to));
    box-shadow: 0 34px 70px -40px var(--es-cta-glow);
    color: var(--es-on-ember);
}

.fb-score__label {
    margin: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--es-on-ember-soft);
}

.fb-score__body {
    display: grid;
    justify-items: start;
    gap: .65rem;
}

.fb-score__value {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.045em;
    color: var(--es-on-ember);
    font-variant-numeric: tabular-nums;
}

.fb-score__of {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--es-on-ember-soft);
}

.fb-score__line {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--es-on-ember-soft);
}

/* Five stars beside a number that already says the score: decoration, so a dimmed star needs no
   contrast of its own. */
.fb-stars {
    display: inline-flex;
    gap: 2px;
    line-height: 0;
    color: var(--es-brand);
}

.fb-stars svg {
    width: 15px;
    height: 15px;
}

.fb-stars__star {
    opacity: .25;
}

.fb-stars__star.is-full {
    opacity: 1;
}

.fb-stars--on-ember {
    color: var(--es-on-ember);
}

.fb-stars--on-ember svg {
    width: 20px;
    height: 20px;
}

/* The sessions' score: B's white tile, the icon box at the top and the number at the foot. */
.fb-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
    border-radius: var(--es-r-xl);
}

.fb-tile__body {
    display: grid;
    gap: .2rem;
}

.fb-tile__label {
    margin: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--es-muted);
}

.fb-tile__value {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

.fb-tile__of {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--es-faint);
}

.fb-tile__hint {
    margin: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--es-muted);
}

/* The spread: score | meter | count · share, five to one. */
.fb-dist {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 24px;
    border-radius: var(--es-r-xl);
}

.fb-dist__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
}

.fb-dist__title {
    margin: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--es-muted);
}

.fb-dist__note {
    font-size: .78rem;
    font-weight: 600;
    color: var(--es-faint);
}

.fb-dist__rows {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fb-dist__row {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 5.75rem;
    align-items: center;
    gap: 12px;
}

.fb-dist__score {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 800;
    color: var(--es-ink);
}

.fb-dist__score svg {
    width: 13px;
    height: 13px;
    color: var(--es-brand);
}

.fb-dist__row .chart-meter {
    height: 14px;
}

.fb-dist__count {
    font-size: .8rem;
    font-weight: 700;
    color: var(--es-ink);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.fb-dist__share {
    color: var(--es-faint);
}

/* A section title with its note on the right: "Oturumlar · Ortalamaya göre", "Yorumlar N". */
.fb-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin-bottom: 14px;
}

.fb-section-head__title {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--es-ink);
}

.fb-section-head__note {
    margin: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--es-muted);
}

.fb-sessions {
    padding: 24px;
    margin-bottom: 28px;
    border-radius: var(--es-r-xl);
}

.fb-sessions__list {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Two columns from a portrait tablet up (UIhataları 82), not only from 992px. */
@media (min-width: 768px) {
    .fb-sessions__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* B's soft row: the average in a white box, the name and its facts, "Yorumlar" on the right. */
.fb-session {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.fb-session__avg {
    display: grid;
    justify-items: center;
    padding: 8px 0;
    border-radius: var(--es-r);
    background: var(--es-surface);
}

.fb-session__avg-value {
    font-family: var(--es-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

.fb-session__avg-label {
    font-size: .68rem;
    font-weight: 700;
    color: var(--es-muted);
}

.fb-session__body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fb-session__name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.fb-session__meta {
    font-size: .78rem;
    font-weight: 600;
    color: var(--es-muted);
}

.fb-session__meter {
    max-width: 10rem;
    margin-top: 6px;
}

.fb-session__go {
    border-radius: var(--es-r-pill);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .fb-session {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 12px;
    }

    .fb-session__go {
        grid-column: 2;
        justify-self: start;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* The comments: the title and its counts on the left, the filter on the right, then B's bubbles
   in rows (a grid, not B's newspaper columns, so the newest comes first in reading order too). */
/* Clear of the top bar and the sticky event tabs when a "Yorumlar" link jumps here. */
.fb-comments {
    scroll-margin-top: 150px;
}

.fb-comments__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 16px;
    padding: 0 6px;
}

.fb-filter {
    display: flex;
    gap: .5rem;
    width: min(100%, 300px);
}

.fb-filter .form-select {
    border-radius: var(--es-r-pill);
    background-color: var(--es-surface);
}

.fb-bubbles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    align-items: start;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* B's speech bubble: three round corners and one tucked in, towards where it came from. */
.fb-bubble {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    border: 1px solid var(--es-glow-line);
    border-radius: 24px 24px 24px 8px;
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.fb-bubble__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fb-bubble__date {
    font-size: .72rem;
    font-weight: 600;
    color: var(--es-muted);
    white-space: nowrap;
}

.fb-bubble__text {
    margin: 0;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--es-ink);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.fb-bubble__about {
    align-self: flex-start;
    max-width: 100%;
    white-space: normal;
    text-align: left;
}

.fb-comments__more {
    width: fit-content;
    max-width: 100%;
    margin: 20px auto 0;
    padding: 10px 18px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-pill);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
    font-size: .85rem;
    font-weight: 600;
    color: var(--es-ink);
    text-align: center;
}

/* ------------------------------------------- "Etkinlik raporu" (plan job 8.16, portal4-Report-C + B)
   C's six counts in one band of cells (a cell tinted only when its number asks for attention),
   then "Kayıttan oturuma" — C's rows of label | bar | number with the conversion between the
   steps, B's percentages in it — beside "Oturum katılımı" (_BarChart), then the sessions as a
   table with a fill meter per room. The head's meta line is .ev-head__meta (8.13 above). The
   meters and bars are the shared chart parts, which the reduced-motion block stands still. */
.evr-kpis {
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: var(--es-r-xl);
}

/* The cells' hairlines: every cell draws its right and bottom edge, and the ones that fall on the
   band's own edge are pushed under its clip (overflow hidden on the card, -1px on the list). */
.evr-kpis__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 -1px -1px 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .evr-kpis__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .evr-kpis__list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.evr-kpi {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 18px 20px;
    border-right: 1px solid var(--es-line);
    border-bottom: 1px solid var(--es-line);
}

.evr-kpi--ok {
    background: var(--es-ok-soft);
}

.evr-kpi--warn {
    background: var(--es-warn-soft);
}

.evr-kpi--bad {
    background: var(--es-bad-soft);
}

.evr-kpi__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 6px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--es-muted);
}

.evr-kpi__value {
    font-family: var(--es-font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.04em;
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

.evr-kpi--ok .evr-kpi__value {
    color: var(--es-ok);
}

.evr-kpi--warn .evr-kpi__value {
    color: var(--es-warn);
}

.evr-kpi--bad .evr-kpi__value {
    color: var(--es-bad);
}

.evr-kpi__hint {
    font-size: .76rem;
    font-weight: 600;
    color: var(--es-muted);
}

.evr-charts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 8px;
}

@media (min-width: 992px) {
    .evr-charts--two {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

.evr-funnel,
.evr-attendance {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 22px 24px;
    border-radius: var(--es-r-xl);
}

.evr-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
}

.evr-card-head__title {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--es-ink);
}

.evr-card-head__note {
    font-size: .78rem;
    font-weight: 600;
    color: var(--es-faint);
}

.evr-funnel__steps {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.evr-step {
    display: grid;
    grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 4.5rem;
    align-items: center;
    gap: 14px;
}

.evr-step__label {
    font-size: .9rem;
    font-weight: 600;
    color: var(--es-ink);
}

.evr-step__bar.chart-meter {
    height: 22px;
    border-radius: 8px;
}

.evr-step__value {
    font-family: var(--es-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--es-ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The conversion between two steps, indented under the bars it joins. */
.evr-step__conv {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: 2px 0 2px calc(8.5rem + 14px);
    font-size: .8rem;
    font-weight: 600;
    color: var(--es-muted);
}

.evr-step__conv svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--es-brand);
}

@media (max-width: 575.98px) {
    .evr-step {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 12px;
    }

    .evr-step__bar {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .evr-step__conv {
        padding-left: 0;
    }
}

/* C's table keeps its columns on a phone and scrolls inside its card, rather than squeezing the
   names into a word per line. */
.evr-table {
    min-width: 720px;
}

.evr-table td:nth-child(3) {
    white-space: nowrap;
}

/* The fill column: meter and percentage side by side. */
.evr-fill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 9rem;
}

.evr-fill__bar {
    flex: 1 1 auto;
    min-width: 5rem;
}

/* A fixed width, so every row's meter is the same length whatever its percentage says. */
.evr-fill__value {
    min-width: 2.75rem;
    text-align: right;
    font-size: .8rem;
    font-weight: 700;
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

.evr-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 14px 0 0;
    font-size: .8rem;
    color: var(--es-muted);
}

.evr-note svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
}

/* ------------------------------------------- "Kiosklar" (UIhataları 59; §14)
   Read at a glance with little text: one tight toolbar for the owner (download, the package facts
   in a <details>, a name and "Ekle" on one line), one status strip of dots and numbers plus the
   failed-badge count linked to the registrations' "Basılamayan" tab, then small device cards —
   name, state pill, printer, last seen. A device failing the door (silent, or a printer error)
   carries a red inner edge, the rule the strip counts as "Hata". The pairing code shows only while
   it is live; kiosks.js swaps .kiosk-screen--waiting for --stale on the block when it runs out.
   A snapshot page (B-28): nothing here polls or animates. */
.kiosk-read {
    align-items: center;
}

.kiosk-read__when {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--es-muted);
}

.kiosk-read__when time {
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

.kiosk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--es-space-3);
    margin-bottom: var(--es-space-4);
    padding: var(--es-space-3);
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    box-shadow: var(--es-card-shadow);
}

.kiosk-bar__app {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-2);
}

.kiosk-bar__add {
    display: flex;
    align-items: flex-start;
    gap: var(--es-space-2);
    flex: 1 1 18rem;
    max-width: 28rem;
}

.kiosk-bar__field {
    flex: 1 1 auto;
    min-width: 0;
}

.kiosk-bar__add > .btn {
    flex: 0 0 auto;
}

.kiosk-bar__note {
    display: flex;
    align-items: center;
    gap: var(--es-space-2);
    margin: 0;
    font-size: var(--es-fs-sm);
    color: var(--es-muted);
}

.kiosk-bar__note svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.kiosk-bar__note--warn svg {
    color: var(--es-warn);
}

.kiosk-bar__note--member {
    margin-bottom: var(--es-space-4);
}

/* The package facts: a <details> whose body floats under its toggle on a desk and sits in the
   flow on a phone. No script. */
.kiosk-pkg {
    position: relative;
}

.kiosk-pkg__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--es-h-btn);
    padding: 0 var(--es-space-3);
    border-radius: var(--es-r);
    font-size: var(--es-fs-sm);
    font-weight: 600;
    color: var(--es-muted);
    list-style: none;
    cursor: pointer;
}

.kiosk-pkg__toggle::-webkit-details-marker {
    display: none;
}

.kiosk-pkg__toggle:hover,
.kiosk-pkg[open] > .kiosk-pkg__toggle {
    background: var(--es-fill);
    color: var(--es-ink);
}

.kiosk-pkg__toggle:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--es-ring);
}

.kiosk-pkg__toggle svg {
    width: 16px;
    height: 16px;
}

.kiosk-pkg__body {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    width: max-content;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: var(--es-space-3) var(--es-space-4);
    background: var(--es-surface);
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r);
    box-shadow: var(--es-menu-shadow);
}

.kiosk-pkg__facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px var(--es-space-3);
    margin: 0;
    font-size: var(--es-fs-sm);
}

.kiosk-pkg__facts > div {
    display: contents;
}

.kiosk-pkg__facts dt {
    font-weight: 600;
    color: var(--es-muted);
}

.kiosk-pkg__facts dd {
    margin: 0;
    font-weight: 600;
    color: var(--es-ink);
}

.kiosk-pkg__note {
    margin: var(--es-space-2) 0 0;
    font-size: var(--es-fs-xs);
    color: var(--es-muted);
}

/* The status strip: a dot and a number per group; a zero is quiet so the number that needs
   someone at the door stands out. */
.kiosk-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-space-2) var(--es-space-4);
    margin-bottom: var(--es-space-4);
    padding: var(--es-space-2) var(--es-space-4);
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    box-shadow: var(--es-card-shadow);
}

.kiosk-status__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-space-1) var(--es-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kiosk-status__item {
    display: inline-flex;
    align-items: center;
    gap: var(--es-space-2);
    min-height: var(--es-h-btn-sm);
    font-size: var(--es-fs-sm);
    font-weight: 600;
    color: var(--es-muted);
}

.kiosk-status__dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--es-faint);
}

.kiosk-status__item--ok .kiosk-status__dot {
    background: var(--es-dot-ok);
}

.kiosk-status__item--bad .kiosk-status__dot {
    background: var(--es-dot-bad);
}

.kiosk-status__item--warn .kiosk-status__dot {
    background: var(--es-dot-warn);
}

.kiosk-status__value {
    font-size: var(--es-fs-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--es-ink);
}

.kiosk-status__item--bad:not(.is-zero) .kiosk-status__value {
    color: var(--es-bad);
}

.kiosk-status .is-zero .kiosk-status__dot {
    background: var(--es-line-strong);
}

.kiosk-status .is-zero .kiosk-status__value {
    color: var(--es-faint);
}

.kiosk-status__failed {
    display: inline-flex;
    align-items: center;
    gap: var(--es-space-2);
    min-height: var(--es-h-btn-sm);
    padding: 0 var(--es-space-3);
    border: 1px solid var(--es-bad-border);
    border-radius: var(--es-r-pill);
    background: var(--es-bad-soft);
    font-size: var(--es-fs-sm);
    font-weight: 600;
    color: var(--es-bad-box-text);
    text-decoration: none;
}

a.kiosk-status__failed:hover {
    border-color: var(--es-bad);
    color: var(--es-bad-box-text);
}

a.kiosk-status__failed:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--es-bad-ring);
}

.kiosk-status__failed svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.kiosk-status__failed .kiosk-status__value {
    color: inherit;
}

.kiosk-status__failed.is-zero {
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--es-muted);
}

/* The devices. */
.kiosk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: var(--es-space-3);
    margin: 0 0 var(--es-space-6);
    padding: 0;
    list-style: none;
}

.kiosk-card {
    display: flex;
    flex-direction: column;
    gap: var(--es-space-2);
    padding: var(--es-space-3) var(--es-space-4);
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    box-shadow: var(--es-card-shadow);
}

.kiosk-card--fault {
    border-color: var(--es-bad-border);
    box-shadow: inset 3px 0 0 var(--es-dot-bad), var(--es-card-shadow);
}

.kiosk-card--revoked {
    background: var(--es-fill);
    box-shadow: none;
}

.kiosk-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-space-2);
}

.kiosk-card__name {
    min-width: 0;
    margin: 0;
    font-family: var(--es-font-body);
    font-size: var(--es-fs-body);
    font-weight: 700;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    color: var(--es-ink);
}

.kiosk-card--revoked .kiosk-card__name {
    color: var(--es-muted);
}

.kiosk-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-space-1) var(--es-space-4);
    margin: 0;
}

.kiosk-card__fact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--es-fs-sm);
    color: var(--es-body);
}

.kiosk-card__fact dt {
    display: inline-flex;
    color: var(--es-muted);
}

.kiosk-card__fact dt svg {
    width: 15px;
    height: 15px;
}

.kiosk-card__fact dd {
    margin: 0;
    font-weight: 600;
}

.kiosk-card__printer--ok dd {
    color: var(--es-ok);
}

.kiosk-card__printer--error dd {
    color: var(--es-bad);
}

.kiosk-card__printer--none dd {
    font-weight: 500;
    color: var(--es-muted);
}

/* The pairing code, only while it is live; one line once it has gone stale. */
.kiosk-pair {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: var(--es-space-2) var(--es-space-3);
    border: 1px solid var(--es-brand-border);
    border-radius: var(--es-r);
    background: var(--es-brand-soft);
    color: var(--es-ink);
}

.kiosk-pair.kiosk-screen--stale {
    border-color: var(--es-bad-border);
    background: var(--es-bad-soft);
    color: var(--es-bad-box-text);
}

.kiosk-pair__stale {
    font-size: var(--es-fs-sm);
    font-weight: 600;
}

.kiosk-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-space-3);
}

.kiosk-code[hidden] {
    display: none;
}

.kiosk-code__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kiosk-code__label,
.kiosk-code__until {
    font-size: var(--es-fs-xs);
    font-weight: 600;
    color: var(--es-muted);
}

.kiosk-code__value {
    font-family: var(--es-font-display);
    font-size: var(--es-fs-h2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .06em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--es-ink);
}

/* The code's remaining time: the chart ring's mask in the brand; kiosks.js moves --v. */
.kiosk-code__ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    font-size: var(--es-fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--es-ink);
}

.kiosk-code__ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--es-brand) 0 var(--v, 0%), var(--es-brand-border) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}

.kiosk-code__ring > span {
    position: relative;
}

.kiosk-card__actions {
    display: flex;
    gap: var(--es-space-2);
    margin-top: auto;
}

.kiosk-card__actions > form {
    flex: 1 1 0;
}

.kiosk-card__actions .btn {
    width: 100%;
}

/* Revoked devices: history, folded under the list. */
.kiosk-revoked {
    margin-bottom: var(--es-space-6);
}

.kiosk-revoked__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--es-space-2);
    min-height: var(--es-h-btn-sm);
    margin-bottom: var(--es-space-3);
    font-size: var(--es-fs-sm);
    font-weight: 600;
    color: var(--es-muted);
    cursor: pointer;
}

.kiosk-revoked__toggle:hover {
    color: var(--es-ink);
}

@media (max-width: 575.98px) {
    .kiosk-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .kiosk-bar__add {
        flex-basis: auto;
        max-width: none;
    }

    .kiosk-pkg[open] {
        flex-basis: 100%;
    }

    .kiosk-pkg__body {
        position: static;
        width: auto;
        max-width: none;
        margin-top: var(--es-space-2);
        box-shadow: none;
    }

    .kiosk-status {
        flex-direction: column;
        align-items: flex-start;
    }

    .kiosk-status__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
}

/* ------------------------------------------- "Google E-Tablo" (AD-38, business rule 37)
   Areas/Portal/Views/EventSheet/Index: before a sheet is connected, the three numbered steps on
   the left (the service account's address as a chip with its copy button) beside the form and
   the column list; once connected, one card of facts (.detail-list), the state pill, a failure
   box (.alert) and the two actions. One column on a phone. */
.sheet-page {
    display: grid;
    gap: var(--es-space-4);
    align-items: start;
}

@media (min-width: 992px) {
    .sheet-page:not(.sheet-page--connected) {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    .sheet-page--connected {
        max-width: 52rem;
    }
}

.sheet-side {
    display: grid;
    gap: var(--es-space-4);
}

.sheet-card {
    display: grid;
    gap: var(--es-space-4);
    padding: var(--es-space-5);
}

.sheet-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-3);
}

.sheet-card__title {
    margin: 0;
    flex: 1 1 auto;
    color: var(--es-ink);
    font-size: 1rem;
}

.sheet-card__sub {
    color: var(--es-muted);
    font-size: .875rem;
    font-weight: 500;
}

.sheet-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-space-2);
}

.sheet-card__note {
    display: flex;
    gap: var(--es-space-2);
    margin: 0;
    color: var(--es-muted);
    font-size: .875rem;
}

.sheet-card__note svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 2px;
}

.sheet-card .kicker {
    margin: 0;
}

/* The steps: a numbered disc in the brand tint, the text beside it. */
.sheet-steps {
    display: grid;
    gap: var(--es-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sheet-step;
}

.sheet-steps > li {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: var(--es-space-2) var(--es-space-3);
    align-items: start;
    color: var(--es-body);
    counter-increment: sheet-step;
}

.sheet-steps > li::before {
    content: counter(sheet-step);
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--es-r-pill);
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-weight: 700;
    font-size: .85rem;
    grid-row: span 2;
}

/* The service account's address: one long unbreakable token, so it wraps anywhere. */
.sheet-email {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-2);
}

.sheet-email__value {
    padding: var(--es-space-1) var(--es-space-2);
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r-xs);
    background: var(--es-fill);
    color: var(--es-ink);
    font-size: .85rem;
    overflow-wrap: anywhere;
}

/* The ownership code (AD-38 second addendum, DD-41): six digits read off the screen and typed into
   A1, so they are set larger and spaced apart. */
.sheet-email__value--code {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.sheet-form {
    display: grid;
    gap: var(--es-space-4);
}

.sheet-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sheet-columns > li {
    padding: 2px var(--es-space-2);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-xs);
    background: var(--es-fill);
    color: var(--es-body);
    font-size: .8125rem;
}

.sheet-columns > li.sheet-columns__more {
    border-style: dashed;
    background: transparent;
    color: var(--es-muted);
}

.sheet-failure p {
    margin: 0;
}

.sheet-failure p + p {
    margin-top: var(--es-space-1);
}

.sheet-failure__detail {
    font-size: .8125rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* ------------------------------------------- "Kapı" (plan job 8.15, portal4-Door-B + C, popups-DoorResult-B + C)
   Phone-first (AD-30): on a phone one column — the ring, the camera card with the code box, this
   device's recent scans; from lg the recent scans take a column beside it. The viewfinder is
   hardware (--es-door-*), dark in both themes; its aiming square dims the hall around it and an
   ember line sweeps it while the camera runs (switched off under reduced motion, where it rests
   in the middle). The verdict card follows the theme, its tone a top edge, the title's colour and
   the avatar's mark — never colour alone: the title says it in words. */
.door {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 2rem;
}

@media (min-width: 992px) {
    .door {
        grid-template-columns: minmax(0, 40rem) minmax(16rem, 22rem);
    }
}

.door__main,
.door-closed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.door-closed {
    max-width: 40rem;
}

.door-tally {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    border-radius: var(--es-r-xl);
}

.door-tally__ring {
    --ring-size: 92px;
    --ring-thickness: 10px;
    flex: 0 0 auto;
}

.door-tally__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.door-tally__label {
    font-size: .875rem;
    font-weight: 700;
    color: var(--es-muted);
}

.door-tally__count {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
}

.door-tally__count strong {
    font-family: var(--es-font-display);
    font-size: clamp(2rem, 6vw, 2.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    color: var(--es-ink);
}

.door-tally__of {
    font-family: var(--es-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--es-faint);
}

.door-scanner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border-radius: var(--es-r-xl);
}

.door-cam {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--es-r-lg);
    background: radial-gradient(ellipse at 50% 40%, var(--es-door-cam-glow), var(--es-door-cam) 72%);
    color: var(--es-on-photo);
}

.door-cam__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.door-cam__aim {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(56%, 300px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 28px;
    box-shadow: 0 0 0 3px var(--es-on-photo), 0 0 0 100vmax var(--es-photo-dim);
    pointer-events: none;
}

@keyframes es-door-scan {
    from {
        top: 10%;
    }

    to {
        top: 90%;
    }
}

.door-cam__line {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 3px;
    border-radius: 3px;
    background: var(--es-door-beam);
    box-shadow: 0 0 16px var(--es-door-beam);
    animation: es-door-scan 2.4s ease-in-out infinite alternate;
}

.door-cam__idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
}

.door-cam__mark {
    background: var(--es-on-photo);
    color: var(--es-door-beam);
}

.door-cam__note {
    max-width: 22rem;
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--es-on-photo);
}

.door-cam__bar {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
}

.door-cam__bar > * {
    pointer-events: auto;
}

.door-cam__glass {
    border: 0;
    border-radius: var(--es-r-pill);
    background: var(--es-door-glass);
    color: var(--es-on-photo);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.door-cam__glass:hover,
.door-cam__glass:focus-visible {
    background: var(--es-door-glass-hover);
    color: var(--es-on-photo);
}

.door-cam__glass svg {
    width: 16px;
    height: 16px;
}

.door-cam__torch {
    margin-left: auto;
}

.door-cam__torch[aria-pressed="true"],
.door-cam__torch[aria-pressed="true"]:hover {
    background: var(--es-on-photo);
    color: var(--es-door-cam);
}

.door-cam__hint {
    position: absolute;
    top: 62px;
    left: 50%;
    z-index: 2;
    max-width: calc(100% - 24px);
    margin: 0;
    padding: 7px 14px;
    transform: translateX(-50%);
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
    color: var(--es-on-photo);
    background: var(--es-door-glass);
    border-radius: var(--es-r-pill);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* The verdict (popups-DoorResult-B), on the viewfinder where the volunteer is already looking. */
@keyframes es-door-result-in {
    from {
        opacity: 0;
        translate: 0 12px;
    }
}

.door-result {
    --door-tone: var(--es-ok);
    --door-tone-ink: var(--es-ok-ink);
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    color: var(--es-body);
    box-shadow: inset 0 3px 0 var(--door-tone), 0 30px 60px -20px var(--es-photo-shadow);
    animation: es-door-result-in var(--es-dur) var(--es-ease);
}

.door-result--warn {
    --door-tone: var(--es-warn);
    --door-tone-ink: var(--es-warn-ink);
}

.door-result--bad {
    --door-tone: var(--es-bad);
    --door-tone-ink: var(--es-bad-ink);
}

/* The big avatar: the photo, else the initials, else (nobody behind the ticket) the tone's mark
   filling the square. With a person, the mark shrinks to a badge on the avatar's corner. */
.door-result__face {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
}

.door-result__photo,
.door-result__initials {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.door-result__photo {
    object-fit: cover;
}

.door-result__initials {
    display: grid;
    place-items: center;
    background: var(--es-brand-soft);
    color: var(--es-brand);
    font-family: var(--es-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.door-result__sign {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--door-tone);
    color: var(--door-tone-ink);
}

.door-result__sign > span {
    display: none;
}

.door-result--ok .door-result__sign-ok,
.door-result--warn .door-result__sign-warn,
.door-result--bad .door-result__sign-bad {
    display: grid;
}

.door-result__sign svg {
    width: 32px;
    height: 32px;
}

.door-result.has-person .door-result__sign {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 30px;
    height: 30px;
    box-shadow: 0 0 0 3px var(--es-surface);
}

.door-result.has-person .door-result__sign svg {
    width: 16px;
    height: 16px;
}

.door-result__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.door-result__title {
    font-family: var(--es-font-display);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--door-tone);
}

.door-result__name {
    font-family: var(--es-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
    color: var(--es-ink);
}

.door-result__detail {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--es-muted);
}

.door-code {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 6px 6px;
}

.door-code .form-label {
    margin: 0;
    font-weight: 700;
}

.door-code__row {
    display: flex;
    gap: 8px;
}

.door-code__row .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.door-code__row .btn {
    flex: 0 0 auto;
    min-height: var(--es-h-field);
}

.door-code__help {
    margin: 0;
    font-size: .8125rem;
    color: var(--es-muted);
}

.door-recent {
    padding: 0;
    overflow: hidden;
    border-radius: var(--es-r-xl);
}

.door-recent__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 10px;
    padding: 16px 18px 12px;
}

.door-recent__title {
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--es-muted);
}

.door-recent__scope {
    font-size: .75rem;
    color: var(--es-faint);
}

.door-recent__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.door-recent__row {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-top: 1px solid var(--es-line);
}

.door-recent__time {
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    color: var(--es-faint);
}

.door-recent__name {
    overflow: hidden;
    font-size: .875rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--es-ink);
}

.door-recent__name.is-unknown {
    color: var(--es-muted);
}

.door-recent__row .pill {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.door-recent__empty {
    margin: 0;
    padding: 4px 18px 18px;
    font-size: .8125rem;
    color: var(--es-muted);
}

@media (max-width: 767.98px) {
    .door-cam {
        aspect-ratio: 3 / 4;
        max-height: 70vh;
    }

    .door-cam__glass {
        min-height: 44px;
    }

    .door-result__face {
        width: 60px;
        height: 60px;
    }

    .door-result__title {
        font-size: 1.2rem;
    }
}

@media (max-width: 399.98px) {
    .door-code__row {
        flex-direction: column;
    }
}

/* ------------------------------------------- admin "Genel durum" (plan job 9.1, admin1-Dashboard-B + C's extras)
   Areas/Admin/Views/Dashboard: B's ember "Bekleyen başvuru" box (C's quiet "Kuyruk boş" tile when
   the queue is empty) and seven icon tiles, four to a row; then "Şu anda devam eden" — each
   running event on a grey band with its cover, door meter, C's "Şimdi:" line and its hourly
   check-ins (_BarChart) — beside "Bugün", today's audit rows as sentences. Cards are the shared
   .card with the portal overview's .dash-card inside; only what is new is here. */
.adash-head__title {
    font-size: var(--es-fs-title);
}

.adash-head__dim {
    color: var(--es-muted);
}

/* ---- eight tiles: the queue first, then the counts */
.adash-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.adash-stats > li {
    display: flex;
    min-width: 0;
}

.adash-stats > li > * {
    flex: 1 1 auto;
    min-width: 0;
}

.adash-stat {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-height: 168px;
    padding: 1.25rem 1.35rem;
}

.adash-stat__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .4rem;
}

.adash-stat__label {
    font-size: .85rem;
    font-weight: 700;
    color: var(--es-muted);
}

.adash-stat__value {
    margin-top: 0;
    font-size: 1.875rem;
}

.adash-stat .stat__hint {
    margin-top: auto;
}

/* B's ember box: the one tile that waits on the reader, so the one link among them. */
.adash-queue {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-height: 168px;
    padding: 1.25rem 1.35rem;
    overflow: hidden;
    border-radius: var(--es-r-lg);
    background: linear-gradient(150deg, var(--es-brand) 0%, var(--es-brand-strong) 100%);
    color: var(--es-brand-ink);
    text-decoration: none;
    box-shadow: 0 18px 34px -18px var(--es-brand-shadow);
    transition: box-shadow var(--es-dur-fast) var(--es-ease), translate var(--es-dur-fast) var(--es-ease);
}

.adash-queue:hover {
    color: var(--es-brand-ink);
    translate: 0 -2px;
    box-shadow: 0 22px 40px -18px var(--es-brand-shadow);
}

.adash-queue:focus-visible {
    outline: 2px solid var(--es-brand);
    outline-offset: 3px;
}

.adash-queue__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .4rem;
}

.adash-queue__icon {
    background: color-mix(in srgb, var(--es-brand-ink) 18%, transparent);
    color: var(--es-brand-ink);
}

.adash-queue__faces {
    display: flex;
}

.adash-queue__face {
    width: 30px;
    height: 30px;
    margin-left: -8px;
    border: 2px solid var(--es-brand);
    /* On the ember, never the theme's soft tint: in dark mode that tint vanished into the box. */
    background: color-mix(in srgb, var(--es-brand-ink) 24%, var(--es-brand));
    color: var(--es-brand-ink);
    font-size: .62rem;
}

.adash-queue__face:first-child {
    margin-left: 0;
}

.adash-queue__label {
    font-size: .85rem;
    font-weight: 700;
    opacity: .92;
}

.adash-queue__value {
    font-family: var(--es-font-display);
    font-size: 2.125rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

.adash-queue__hint {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: auto;
    font-size: .8rem;
    font-weight: 600;
    opacity: .88;
}

.adash-queue__hint svg {
    width: 14px;
    height: 14px;
}

/* "Canlı": the status dot of the pill breathes while something is running. */
.adash-live-pill::before {
    animation: es-pulse 1.8s var(--es-ease) infinite;
}

/* ---- the two cards: the running events wider, the feed beside them from xl up */
.adash-grid {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 1200px) {
    .adash-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

.adash-empty {
    padding: 2rem 1.25rem;
    border: 0;
}

.adash-live__titles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

.adash-live__list {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One running event: its cover, what it is and its door, and C's hourly bars on the right. */
.adash-event {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) minmax(0, 190px);
    align-items: center;
    gap: 1rem;
    padding: .75rem;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.adash-event__cover.show-card__cover {
    width: 112px;
    aspect-ratio: 16 / 9;
    border-radius: var(--es-r);
}

.adash-event__body {
    display: grid;
    gap: .3rem;
    min-width: 0;
}

.adash-event__org {
    overflow: hidden;
    color: var(--es-muted);
    font-size: .78rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adash-event__name {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.adash-event__name:hover {
    color: var(--es-brand);
    text-decoration: underline;
}

.adash-event__now {
    font-size: .8rem;
    color: var(--es-body);
    overflow-wrap: anywhere;
}

.adash-event__now b {
    color: var(--es-brand);
    font-weight: 700;
}

.adash-event__door {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem .75rem;
    margin-top: .15rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--es-muted);
    font-variant-numeric: tabular-nums;
}

.adash-event__count b {
    color: var(--es-ink);
}

.adash-event__meter {
    max-width: 360px;
}

.adash-event__side {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.adash-event__chart .chart-axis {
    margin-top: .25rem;
    font-size: .65rem;
}

.adash-event__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem .5rem;
    font-size: .7rem;
    color: var(--es-faint);
}

.adash-event__kiosks {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
}

.adash-event__kiosks.is-on {
    color: var(--es-ok);
}

.adash-event__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--es-chart-muted);
}

.adash-event__kiosks.is-on .adash-event__dot {
    background: var(--es-dot-ok);
}

.adash-live__foot {
    margin-top: .9rem;
}

/* ---- "Bugün": time on the right, the actor in ink, the target and C's reason under it */
.adash-feed__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.adash-feed__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--es-line);
}

.adash-feed__item:last-child {
    border-bottom: 0;
}

.adash-feed__text {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.adash-feed__line {
    color: var(--es-muted);
    font-size: .875rem;
    line-height: 1.4;
}

.adash-feed__line b {
    color: var(--es-ink);
    font-weight: 700;
}

.adash-feed__target {
    color: var(--es-body);
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.adash-feed__reason {
    color: var(--es-muted);
}

.adash-feed__code {
    color: var(--es-faint);
    font-size: .7rem;
}

.adash-feed__time {
    padding-top: .15rem;
    color: var(--es-faint);
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.adash-feed__all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--es-line);
    color: var(--es-brand);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
}

.adash-feed__all:hover {
    text-decoration: underline;
}

.adash-feed__all svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 991.98px) {
    .adash-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .adash-event {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .adash-event__cover.show-card__cover {
        width: 96px;
    }

    .adash-event__side {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .adash-stats {
        gap: .75rem;
    }

    .adash-stat,
    .adash-queue {
        min-height: 0;
        padding: 1rem;
    }

    .adash-stat__value,
    .adash-queue__value {
        font-size: 1.625rem;
    }

    .adash-queue__faces {
        display: none;
    }
}

/* ------------------------------------------- admin lists: shared pieces (plan jobs 9.2 and 9.4)
   What the admin review lists share: B's pill filter bar (the search with its icon inside, the
   switch with its words), the active filters as removable chips under it (_ActiveFilters), the
   count pill in the page head that is also a link to its filter, and a tighter detail list for
   a review panel's facts. */

.adm-filter {
    gap: .6rem .75rem;
}

/* B draws the bar as one capsule; once it wraps (below 768px) a capsule around two rows reads as
   a blob, so it falls back to the card's corner. */
@media (min-width: 768px) {
    .adm-filter {
        border-radius: var(--es-r-pill);
        padding: .45rem .5rem .45rem .6rem;
    }

    .adm-filter .form-control,
    .adm-filter .form-select,
    .adm-filter .btn {
        border-radius: var(--es-r-pill);
    }
}

/* The basis is small and the status select takes its own width, not the shared 12rem: the events
   bar (search, status, switch, Süz) must fit the one row its capsule is drawn for from a 992px
   desk up, or "Süz" fell alone onto a second row inside the capsule (Stage 11.1 review). The
   search still grows into whatever the row leaves. */
.adm-filter__search {
    position: relative;
    display: flex;
    flex: 1 1 9rem;
    min-width: 0;
}

.filter-bar.adm-filter .form-select {
    min-width: 9rem;
}

.adm-filter__search > svg {
    position: absolute;
    top: 50%;
    left: .9rem;
    width: 18px;
    height: 18px;
    translate: 0 -50%;
    color: var(--es-muted);
    pointer-events: none;
}

.filter-bar .adm-filter__search .form-control {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 2.6rem;
}

.adm-filter__switch {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: var(--es-h-btn);
    margin: 0;
    /* A little more on the right: at a row's end the words met the capsule's curve. */
    padding: 0 .6rem 0 .35rem;
    color: var(--es-ink);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 575.98px) {
    .adm-filter__search,
    .adm-filter .form-select {
        flex: 1 1 100%;
    }

    .adm-filter .btn {
        flex: 1 1 auto;
    }
}

.adm-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: -.4rem 0 1.25rem;
}

.adm-filters__list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.adm-filters__chip {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    max-width: 100%;
    min-height: 34px;
    padding: .15rem .2rem .15rem .85rem;
    border: 1px solid var(--es-brand-border);
    border-radius: var(--es-r-pill);
    background: var(--es-brand-soft);
    color: var(--es-ink);
    font-size: .85rem;
    font-weight: 600;
}

.adm-filters__chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adm-filters__remove {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--es-brand-strong);
}

.adm-filters__remove:hover {
    background: var(--es-surface);
}

.adm-filters__remove svg {
    width: 14px;
    height: 14px;
}

.adm-filters__clear {
    font-size: .85rem;
    font-weight: 600;
}

@media (pointer: coarse) {
    .adm-filters__chip {
        min-height: 44px;
    }

    .adm-filters__remove {
        width: 40px;
        height: 40px;
    }
}

/* A page that names its own levels (PageCrumbs) leaves less room in the top bar; the "Yönetim"
   pill keeps its width and the page's name gives way instead. */
.app--admin .app-crumbs__root {
    flex: 0 0 auto;
}

/* The "N etkinlik askıda" pill is also the way to that filter. */
.adm-count-link {
    text-decoration: none;
}

.adm-count-link:hover {
    border-color: var(--es-line-strong);
    color: var(--es-ink);
}

/* A review panel's facts: the detail list in the panel's narrow column. */
.review-panel .adm-facts,
.areq-card .adm-facts {
    grid-template-columns: minmax(6.5rem, 8.5rem) minmax(0, 1fr);
    gap: 0 1rem;
    font-size: .9rem;
}

.review-panel .adm-facts dt,
.review-panel .adm-facts dd,
.areq-card .adm-facts dt,
.areq-card .adm-facts dd {
    padding: .55rem 0;
}

/* ------------------------------------------- admin "Organizasyon başvuruları" (plan job 9.2, admin1-Requests-B + C, admin1-Request-B + C)
   The queue: counted tabs with the list's order beside them, each row the proposed
   organization's initials on an ember tile, its address, the applicant's avatar. The request's
   page: B's head card (tile, status, waiting time, address, C's previous/next), the proposal and
   the applicant on the left, C's pre-check and B's approve and reject cards on the right. */

.areq-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}

.areq-bar > .tabs {
    min-width: 0;
    max-width: 100%;
    margin-bottom: 0;
}

.areq-bar__order {
    color: var(--es-muted);
    font-size: .85rem;
    font-weight: 600;
}

/* An organization's square logo tile (B). No request carries a logo, so it holds the EventStage
   mark (_BrandFallback with .aorg-logo, K3); the ember ground is what an un-styled tile falls back to. */
.areq-mark {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--es-r-sm);
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
    font-family: var(--es-font-display);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.areq-mark--sm {
    width: 26px;
    height: 26px;
    border-radius: var(--es-r-xs);
    font-size: .66rem;
}

.areq-mark--lg {
    width: 76px;
    height: 76px;
    border-radius: var(--es-r);
    font-size: 1.55rem;
}

/* Four columns, the address under the name (C's panel repeats it) and the date under the badge:
   the table fits beside the panel at 1440 with its action whole (Stage 9 review) and alone at
   1100. Narrower than this it scrolls inside its card. */
.areq-table {
    min-width: 560px;
}

.areq-org {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

.areq-org__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.areq-org__name {
    color: var(--es-ink);
    font-weight: 700;
    text-decoration: none;
}

.areq-org__name:hover {
    color: var(--es-brand-strong);
    text-decoration: underline;
}

.areq-slug {
    color: var(--es-muted);
    font-family: var(--bs-font-monospace);
    font-size: .8rem;
    white-space: nowrap;
}

.areq-who {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
}

.areq-who__avatar {
    width: 32px;
    height: 32px;
    font-size: .72rem;
}

.areq-who__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.areq-who__name {
    color: var(--es-ink);
    font-weight: 600;
}

.areq-who__mail {
    max-width: 13rem;
    color: var(--es-muted);
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.areq-when {
    display: block;
    margin-top: .25rem;
    color: var(--es-muted);
    font-size: .8rem;
    white-space: nowrap;
}

.areq-status {
    white-space: nowrap;
}

.areq-panel__text {
    margin: 0;
    color: var(--es-body);
    font-size: .9rem;
    line-height: 1.5;
}

.areq-panel__note {
    margin: -.4rem 0 0;
    color: var(--es-faint);
    font-size: .8rem;
    text-align: center;
}

/* The request's page. */
.areq-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    box-shadow: var(--es-card-shadow);
}

.areq-hero__body {
    display: flex;
    flex: 1 1 18rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    min-width: 0;
}

.areq-hero__body .page-head__title {
    overflow-wrap: anywhere;
}

.areq-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .75rem;
    color: var(--es-muted);
    font-size: .85rem;
    font-weight: 600;
}

.areq-hero__nav {
    display: flex;
    gap: .5rem;
    align-self: flex-start;
}

.areq-detail {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

.areq-detail__main,
.areq-detail__side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

@media (min-width: 992px) {
    .areq-detail {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

.areq-card {
    padding: 1.35rem;
}

.areq-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: .75rem;
}

.areq-card__title {
    margin: 0 0 .75rem;
    font-size: 1.05rem;
}

.areq-card__head .areq-card__title,
.areq-decide__head .areq-card__title {
    margin: 0;
}

.areq-error {
    margin: .4rem 0 0;
    color: var(--es-bad-box-text);
    font-size: .85rem;
    font-weight: 600;
}

.areq-person {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.areq-person__text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.areq-person__name {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.05rem;
    font-weight: 600;
}

.areq-person__since {
    color: var(--es-faint);
    font-size: .8rem;
}

/* UIhataları 71: the applicant's name is a link to their account in the users list. It keeps
   the name's ink and weight (it is still the row's person, not a call to action), but carries a
   quiet underline all the time so the link is findable without hover — a touch screen has none
   (R7 review). Hover and focus strengthen it. */
a.areq-who__name,
a.areq-person__name {
    text-decoration: underline;
    text-decoration-color: var(--es-line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: text-decoration-color var(--es-dur-fast) var(--es-ease);
}

a.areq-who__name:hover,
a.areq-who__name:focus-visible,
a.areq-person__name:hover,
a.areq-person__name:focus-visible {
    color: var(--es-ink);
    text-decoration-color: currentColor;
}

/* The applicant's e-mail, phone and city under the avatar row on the request's page. */
.areq-contact {
    margin: var(--es-space-3) 0 0;
}

.areq-memberships {
    margin-top: 1.1rem;
}

.areq-memberships__title {
    margin: 0 0 .5rem;
    color: var(--es-ink);
    font-size: .9rem;
    font-weight: 700;
}

.areq-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.areq-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: 100%;
    padding: .25rem .8rem .25rem .3rem;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-ink);
    font-size: .85rem;
    font-weight: 600;
}

.areq-chip__role {
    color: var(--es-muted);
    font-weight: 500;
}

/* C's pre-check: one line per refusal the approval can still give, its icon in the line's tone. */
.areq-check .kicker {
    margin: 0 0 .75rem;
}

.areq-check__list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.areq-check__list > li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
}

.areq-check__icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.areq-check__icon svg {
    width: 18px;
    height: 18px;
}

.areq-check__list > .is-ok .areq-check__icon {
    color: var(--es-dot-ok);
}

.areq-check__list > .is-bad .areq-check__icon {
    color: var(--es-dot-bad);
}

.areq-check__list > .is-bad .areq-check__text {
    color: var(--es-ink);
    font-weight: 700;
}

.areq-check__text {
    flex: 1 1 auto;
    color: var(--es-body);
}

.areq-check__value {
    max-width: 50%;
    overflow: hidden;
    color: var(--es-faint);
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.areq-check__note {
    margin: .85rem 0 0;
    padding: .65rem .85rem;
    border: 1px solid var(--es-bad-box-line);
    border-radius: var(--es-r-sm);
    background: var(--es-bad-box);
    color: var(--es-bad-box-text);
    font-size: .85rem;
    font-weight: 600;
}

.areq-decide__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .85rem;
}

.areq-decide__lead {
    color: var(--es-muted);
    font-size: .9rem;
}

.areq-decide__lead b {
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.areq-decider {
    display: block;
    color: var(--es-muted);
    font-size: .8rem;
    font-weight: 500;
}

.areq-made {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
    padding: .75rem .9rem;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r);
    color: var(--es-ink);
    text-decoration: none;
}

.areq-made:hover {
    border-color: var(--es-brand-border);
    color: var(--es-ink);
}

.areq-made__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.areq-made__kicker {
    color: var(--es-muted);
    font-size: .78rem;
    font-weight: 600;
}

.areq-made__name {
    font-weight: 700;
}

.areq-made > svg {
    width: 18px;
    height: 18px;
    color: var(--es-brand);
}

@media (max-width: 575.98px) {
    .areq-hero {
        padding: 1.1rem;
    }

    .areq-mark--lg {
        width: 56px;
        height: 56px;
        font-size: 1.15rem;
    }

    .areq-hero__nav {
        flex: 1 1 100%;
    }

    .areq-hero__nav .btn {
        flex: 1 1 0;
    }
}

/* ------------------------------------------- admin "Etkinlikler" + "Oturumlar" (plan job 9.4, admin1-Events-B + C, admin1-Sessions-B + C)
   The moderation lists: covered rows (16:9 thumbnails, DD-7's swatch without a cover), the
   category or room under the name, the sessions grouped by day on their event's clock, a
   suspended row edged in the warning tone. The panel: the event's cover with its suspension
   flag, or a drawing of the session's poster — decoration only, never a code (AD-9). */

/* Six columns, the organization under the name: the list fits beside the review panel at 1440
   with its status and action in view. Narrower than this it scrolls inside its card. */
.amod-table {
    min-width: 660px;
}

.amod-table .cell-num {
    text-align: end;
    font-weight: 700;
    white-space: nowrap;
}

/* A suspended row: the warning tone's edge on its leading cell, like the selected row's ember. */
.amod-table > tbody > tr.is-suspended > td {
    background: var(--es-warn-box);
}

.amod-table > tbody > tr.is-suspended > td:first-child {
    box-shadow: inset 3px 0 0 var(--es-dot-warn);
}

.amod-table > tbody > tr.is-selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--es-brand);
}

.amod-event {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 10rem;
}

.amod-event__cover.show-card__cover {
    flex: 0 0 52px;
    width: 52px;
    border-radius: var(--es-r-xs);
}

.amod-event__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.amod-name {
    color: var(--es-ink);
    font-weight: 700;
    text-decoration: none;
}

.amod-name:hover {
    color: var(--es-brand-strong);
    text-decoration: underline;
}

.amod-sub {
    display: block;
    color: var(--es-muted);
    font-size: .8rem;
}

.amod-when__time {
    display: block;
    white-space: nowrap;
    color: var(--es-ink);
    font-weight: 600;
}

.amod-when__clock {
    display: block;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.amod-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem;
}

/* A day of sessions: its date across the table, on the head's fill. */
.amod-table > tbody > tr.amod-day > th {
    padding: .55rem 1rem;
    background: var(--es-fill);
    color: var(--es-ink);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.amod-form--panel {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* A row's form: the button, and (script off) the reason under it at a fixed narrow width, so the
   Moderasyon column never grows by a field beside an opened panel. With script on the reason is
   typed in the dialog and site.js hides the field. */
.amod-form--row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
}

/* Outranks the generic inline-reason rule (input[data-confirm-field]), whose flex basis would
   read as a height in this column. */
.amod-form--row > .amod-form__reason {
    flex: none;
    min-width: 0;
    width: 8.5rem;
}

/* Script off with a record open beside the list: even stacked, the field would push the table
   past its card, so the rows give it up and the reason is typed in the panel's labelled form,
   which is the record being looked at. (data-confirm-ready marks a form site.js has taken over.) */
@media (min-width: 1200px) {
    .review-layout:has(> .review-panel:not(.review-panel--empty)) .amod-form--row:not([data-confirm-ready]) > .amod-form__reason {
        display: none;
    }
}

.amod-form__field .form-label {
    font-size: .85rem;
}

.amod-panel__cover.show-card__cover {
    position: relative;
    border-radius: var(--es-r);
}

.amod-panel__flag {
    position: absolute;
    top: .6rem;
    left: .6rem;
}

.amod-panel__public {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin: 0;
    color: var(--es-muted);
    font-size: .85rem;
    font-weight: 600;
}

.amod-panel__public svg {
    width: 15px;
    height: 15px;
}

/* The session's poster, drawn: a sheet of paper with the title and a chequer for a code. */
.amod-poster {
    position: relative;
    display: grid;
    place-items: center;
    padding: 1.1rem;
    border-radius: var(--es-r);
    background: var(--es-fill);
}

.amod-poster__sheet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    width: min(100%, 11rem);
    padding: .85rem .75rem;
    border-radius: var(--es-r-sm);
    background: var(--es-paper);
    color: var(--es-paper-ink);
    text-align: center;
    box-shadow: var(--es-card-shadow);
}

.amod-poster__kicker {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.amod-poster__name {
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* Suspended: the drawing fades and says why; the code would not scan (§8). */
.amod-poster.is-off .amod-poster__sheet {
    opacity: .45;
    filter: grayscale(1);
}

.amod-poster__flag {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

/* ------------------------------------------- admin "Organizasyonlar" (plan job 9.3, admin1-Orgs-B + C)
   The counted tabs with the search beside them, each row the organization's logo (its initials
   on 9.2's ember tile without one) and a three-dot menu instead of inline forms. The menu is a
   <details>: it opens with script off, and site.js only closes it on a click elsewhere or Escape.
   The panel: C's cover with the logo over its edge, since when it is suspended or closed, C's
   three mini stats, B's list of what a suspension does, and the levers. */

.aorg-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1rem;
}

.aorg-bar > .tabs {
    min-width: 0;
    max-width: 100%;
    margin-bottom: 0;
}

.aorg-search {
    display: flex;
    flex: 0 1 24rem;
    gap: .5rem;
    min-width: 0;
}

.aorg-search .form-control {
    padding-left: 2.6rem;
    border-radius: var(--es-r-pill);
}

.aorg-search .btn {
    border-radius: var(--es-r-pill);
}

@media (max-width: 767.98px) {
    .aorg-search {
        flex: 1 1 100%;
    }
}

.aorg-table {
    min-width: 640px;
}

.aorg-table .cell-num {
    text-align: end;
    font-weight: 700;
    white-space: nowrap;
}

.aorg-table > tbody > tr.is-selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--es-brand);
}

.aorg-org {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

.aorg-org__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.aorg-org__name {
    color: var(--es-ink);
    font-weight: 700;
    text-decoration: none;
}

.aorg-org__name:hover {
    color: var(--es-brand-strong);
    text-decoration: underline;
}

/* An uploaded logo in the initials' tile: contained on the surface, never cropped (§4.8). */
.aorg-logo {
    object-fit: contain;
    background: var(--es-surface);
    border: 1px solid var(--es-line);
}

.aorg-closed {
    color: var(--es-faint);
    font-size: .8rem;
    font-weight: 600;
}

/* The row's menu. */
.aorg-menu {
    position: relative;
    display: inline-block;
}

.aorg-menu__button {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-muted);
    list-style: none;
    cursor: pointer;
}

.aorg-menu__button::-webkit-details-marker {
    display: none;
}

.aorg-menu__button svg {
    width: 18px;
    height: 18px;
}

.aorg-menu__button:hover,
.aorg-menu[open] > .aorg-menu__button {
    background: var(--es-fill-2);
    color: var(--es-ink);
}

/* A finger needs 44px: the hit area grows past the drawn button. */
@media (pointer: coarse) {
    .aorg-menu__button::after {
        content: "";
        position: absolute;
        inset: -4px;
    }
}

.aorg-menu__panel {
    z-index: 5;
    min-width: 15rem;
    margin-top: .35rem;
    padding: .4rem;
    border-radius: var(--es-r);
    text-align: start;
}

.aorg-menu__panel .aorg-form {
    margin: 0;
}

/* With script off the reason stays in the menu, labelled, above its item. */
.aorg-menu__panel .aorg-form__field {
    padding: .35rem .75rem .15rem;
}

/* On a wide screen the menu floats over the rows; the list's scroll box lets it out while it is
   open, since at that width the table fits and nothing needs scrolling. Narrower, the table
   scrolls sideways and a floating panel would be cut at the box's edge, so the menu opens as a
   sheet pinned to the bottom of the screen, which no scroll box clips. */
@media (max-width: 991.98px) {
    .aorg-menu__panel {
        position: fixed;
        right: 16px;
        bottom: 16px;
        left: 16px;
        z-index: 1040;
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        margin: 0;
    }
}

@media (min-width: 992px) {
    .aorg-menu__panel {
        position: absolute;
        top: 100%;
        right: 0;
    }

    .table-card__scroll:has(.aorg-menu[open]) {
        overflow: visible;
    }

    .aorg-menu[open] > .aorg-menu__panel {
        transform-origin: top right;
        animation: es-menu-in var(--es-dur) var(--es-ease);
    }
}

/* The panel's levers. */
.aorg-form--panel {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.aorg-form__field .form-label {
    font-size: .85rem;
}

.aorg-form--close {
    margin-top: -.25rem;
}

.aorg-suspend {
    --bs-btn-color: var(--es-warn-ink);
    --bs-btn-bg: var(--es-warn);
    --bs-btn-border-color: var(--es-warn);
    --bs-btn-hover-color: var(--es-warn-ink);
    --bs-btn-hover-bg: color-mix(in srgb, var(--es-warn) 86%, var(--es-ink));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--es-warn) 86%, var(--es-ink));
    --bs-btn-active-color: var(--es-warn-ink);
    --bs-btn-active-bg: color-mix(in srgb, var(--es-warn) 80%, var(--es-ink));
    --bs-btn-active-border-color: color-mix(in srgb, var(--es-warn) 80%, var(--es-ink));
}

.btn.aorg-close {
    align-self: center;
    color: var(--es-bad);
    font-weight: 700;
    text-decoration: none;
}

.btn.aorg-close:hover {
    color: var(--es-bad);
    text-decoration: underline;
}

/* C's cover: a short band of the organization's cover (DD-7's swatch without one), the logo
   tile standing on its lower edge. */
.aorg-panel__top {
    position: relative;
    margin-bottom: 1.6rem;
}

.aorg-panel__cover.show-card__cover {
    border-radius: var(--es-r);
}

.aorg-panel__top > .aorg-panel__mark {
    position: absolute;
    bottom: -1.6rem;
    left: 1rem;
    width: 64px;
    height: 64px;
    font-size: 1.25rem;
    box-shadow: 0 0 0 4px var(--es-surface);
}

.aorg-panel__since {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .55rem .8rem;
    border: 1px solid var(--es-warn-box-line);
    border-radius: var(--es-r-sm);
    background: var(--es-warn-box);
    color: var(--es-warn-box-text);
    font-size: .88rem;
    font-weight: 600;
}

.aorg-panel__since.is-bad {
    border-color: var(--es-bad-box-line);
    background: var(--es-bad-box);
    color: var(--es-bad-box-text);
}

.aorg-panel__since svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

/* C's three mini stats, one hairline between them. */
.aorg-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-sm);
    background: var(--es-line);
}

.aorg-stats > div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: .1rem;
    padding: .6rem .75rem;
    background: var(--es-surface);
}

.aorg-stats dt {
    color: var(--es-faint);
    font-size: .72rem;
    font-weight: 600;
}

.aorg-stats dd {
    margin: 0;
    color: var(--es-ink);
    font-weight: 700;
    white-space: nowrap;
}

/* B's "what a suspension does", on the fill. */
.aorg-effects {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin: 0;
    padding: .9rem;
    border-radius: var(--es-r);
    background: var(--es-fill);
    list-style: none;
    font-size: .88rem;
}

.aorg-effects li {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--es-ink);
}

.aorg-effects .icbox {
    flex: 0 0 auto;
    background: var(--es-surface);
}

.aorg-closed--panel {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .88rem;
}

.aorg-closed--panel svg {
    width: 16px;
    height: 16px;
}

/* ------------------------------------------- admin catalogues: shared skeleton (plan jobs 9.5 and 9.6)
   What "Kategoriler" and "Sponsor türleri" share, so the two catalogues read as one tool: the side
   panels and the brand-soft "why" card, the chips, the faded state of a retired entry, the form
   card with its foot, the edit page's head card. Each catalogue's own pieces follow. */

.acat-panel,
.acat-shelves,
.acat-form,
.acat-hero,
.acat-card {
    min-width: 0;
    background: var(--es-surface);
    border: 1px solid var(--es-glow-line);
    box-shadow: var(--es-card-shadow);
}

.acat-panel,
.acat-shelves {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: var(--es-r-lg);
}

.acat-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.acat-panel-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
}

.acat-panel > .kicker {
    margin: 0;
}

.acat-panel__note {
    margin: 0;
    font-size: .85rem;
    color: var(--es-muted);
}

.acat-panel__text {
    margin: 0;
    font-size: .9rem;
}

.acat-panel .acat-toggle {
    margin: 0;
}

.acat-why {
    display: grid;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--es-brand-border);
    border-radius: var(--es-r-lg);
    background: var(--es-brand-soft);
    color: var(--es-ink);
}

.acat-why p {
    margin: 0;
    font-size: .9rem;
}

.acat-why .acat-why__note {
    font-size: .8rem;
    color: var(--es-muted);
}

.acat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acat-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 30px;
    padding: .2rem .75rem;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-pill);
    background: var(--es-fill);
    color: var(--es-ink);
    font-size: .82rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.acat-chip.is-on {
    border-color: var(--es-brand);
    background: var(--es-brand-soft);
    color: var(--es-brand-strong);
}

.acat-chip.is-new {
    border-style: dashed;
}

.acat-opt {
    margin-left: .3rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--es-muted);
}

/* A retired entry: its picture and words fade, its levers stay readable. */
.is-off .acat-fade {
    opacity: .5;
    filter: grayscale(1);
}

/* ---- the form: B's card, the fields, the foot with the audit note and its own Save */
.acat-form-layout {
    display: grid;
    gap: 20px;
    align-items: start;
}

@media (min-width: 992px) {
    .acat-form-layout {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

.acat-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(20px, 3vw, 32px);
    border-radius: var(--es-r-xl);
}

.acat-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.acat-field > .form-label,
.acat-field > .form-text {
    margin: 0;
}

.acat-field-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9rem;
    gap: 16px;
}

.acat-field-pair__help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: -12px;
}

@media (max-width: 575.98px) {
    .acat-field-pair {
        grid-template-columns: minmax(0, 1fr);
    }
}

.acat-rank-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.acat-rank-input {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.acat-rank-row .acat-rank-input {
    max-width: 9rem;
}

.acat-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--es-line);
}

.acat-form__note {
    flex: 1 1 14rem;
    font-size: .8rem;
    color: var(--es-muted);
}

.acat-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ---- the edit page's head card: the picture, the status, the name, the count, the Save */
.acat-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 24px;
    margin-bottom: 24px;
    padding: clamp(20px, 3vw, 28px);
    border-radius: var(--es-r-xl);
}

.acat-hero__art {
    display: inline-flex;
    flex: none;
}

.acat-hero__art .cat-art--preview {
    width: 96px;
}

.acat-hero__body {
    display: grid;
    flex: 1 1 18rem;
    gap: 8px;
    min-width: 0;
}

.acat-hero__body .page-head__title {
    margin: 0;
    overflow-wrap: anywhere;
}

.acat-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--es-muted);
    overflow-wrap: anywhere;
}

.acat-hero__lead {
    margin: 0;
    font-size: .92rem;
    color: var(--es-muted);
}

.acat-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acat-hero__stat {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 14px 22px;
    border-radius: var(--es-r-lg);
    background: var(--es-brand-soft);
    text-align: center;
}

.acat-hero__stat b {
    font-family: var(--es-font-display);
    font-size: 2rem;
    line-height: 1;
    color: var(--es-brand-strong);
    font-variant-numeric: tabular-nums;
}

.acat-hero__stat span {
    font-size: .78rem;
    font-weight: 600;
    color: var(--es-brand-strong);
}

.acat-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 575.98px) {
    .acat-hero__actions {
        width: 100%;
    }

    .acat-hero__actions > * {
        flex: 1 1 auto;
    }
}

/* ------------------------------------------- admin "Kategoriler" (plan job 9.5, admin1-Categories-B + C's shelves, -CategoryNew-B, -CategoryEdit-B)
   B's three-column cards (one column on a phone) and the dashed "Yeni kategori" card; under them
   C's "Ana sayfadaki raflar" beside the "why" card. The form's side panel draws the category's
   tile with the home page's own .cat-tile, so the preview is the real thing. */

.acat-grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 18px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

@media (min-width: 1200px) {
    .acat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.acat-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    border-radius: var(--es-r-xl);
}

.acat-card.is-off {
    background: var(--es-fill);
    box-shadow: none;
}

.acat-card__top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.acat-card__top > .pill:last-child {
    margin-left: auto;
}

.acat-rank {
    font-variant-numeric: tabular-nums;
}

.acat-card__body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.acat-card__name {
    margin: 0;
    font-size: var(--es-fs-h2);
    letter-spacing: -.03em;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.acat-card__name a {
    color: var(--es-ink);
    text-decoration: none;
}

.acat-card__name a:hover {
    color: var(--es-brand);
    text-decoration: underline;
}

.acat-card__desc {
    margin: 0;
    font-size: .88rem;
    color: var(--es-muted);
}

.acat-card__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    margin-top: auto;
    padding: 10px 14px;
    border-radius: var(--es-r);
    background: var(--es-fill);
}

.acat-card.is-off .acat-card__facts {
    background: var(--es-surface);
}

.acat-slug {
    min-width: 0;
    font-family: var(--bs-font-monospace);
    font-size: .78rem;
    color: var(--es-muted);
    overflow-wrap: anywhere;
}

.acat-slug b {
    font-weight: 600;
    color: var(--es-ink);
}

.acat-count {
    font-size: .8rem;
    color: var(--es-muted);
    white-space: nowrap;
}

.acat-count b {
    font-size: .95rem;
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

.acat-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.acat-card__actions form {
    margin: 0;
}

.acat-card__edit {
    flex: 1 1 auto;
}

.acat-card--new {
    padding: 0;
    background: transparent;
    border: 2px dashed var(--es-line-strong);
    box-shadow: none;
}

.acat-new {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 240px;
    padding: 22px;
    border-radius: inherit;
    color: var(--es-muted);
    text-align: center;
    text-decoration: none;
}

.acat-new:hover {
    background: var(--es-fill);
    color: var(--es-ink);
}

.acat-new__title {
    font-family: var(--es-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--es-ink);
}

.acat-new__hint {
    font-size: .8rem;
}

.acat-below {
    display: grid;
    gap: 20px;
    align-items: start;
}

@media (min-width: 992px) {
    .acat-below {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

.acat-shelves__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.acat-shelves__lead,
.acat-shelves__none {
    margin: 0;
    font-size: .85rem;
    color: var(--es-muted);
}

.acat-shelves__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 0 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acat-shelf {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 0;
    border-top: 1px solid var(--es-line);
}

.acat-shelf__no {
    font-size: .75rem;
    font-weight: 700;
    color: var(--es-brand);
    font-variant-numeric: tabular-nums;
}

.acat-shelf__name {
    overflow: hidden;
    font-weight: 600;
    color: var(--es-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acat-shelf__count {
    font-size: .8rem;
    color: var(--es-muted);
    white-space: nowrap;
}

.acat-shelf__count {
    grid-row: 1;
    grid-column: 3;
}

.acat-shelf__meter {
    grid-row: 2;
    grid-column: 1 / -1;
}

.acat-shelves__off {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--es-line);
    list-style: none;
    font-size: .82rem;
    color: var(--es-muted);
}

.acat-shelves__off li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.acat-shelves__off svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.acat-shelves__off b {
    font-weight: 600;
    color: var(--es-ink);
}

/* The home page's tile, drawn as a picture of itself: nothing to hover or follow. */
.acat-tile {
    height: 8.5rem;
    pointer-events: none;
}

.acat-tile--pending {
    background: var(--es-cat-ink);
}

/* ------------------------------------------- admin "Sponsor türleri" (plan job 9.6, admin2-Tiers-B + C, -TierNew-B, -TierEdit-B)
   B's tier cards in the order an event page bands its sponsors, C's usage bar in each and its
   selected-tier panel beside them; with nothing selected, B's "Etkinlik sayfasında" — the public
   wall's own .sponsor-band with empty tiles where the logos go. A retired tier is a dashed card. */

@media (min-width: 1200px) {
    .review-layout.atier-layout {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    }
}

.atier-list,
.atier-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.atier-side {
    gap: 16px;
}

.atier-list__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 0 6px;
}

.atier-list__count {
    font-size: .82rem;
    font-weight: 600;
    color: var(--es-muted);
}

.atier-list__note {
    margin: 0;
    padding: 0 8px;
    font-size: .82rem;
    color: var(--es-muted);
}

.atier-cards {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.atier-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    padding: 16px 18px;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.atier-card.is-off {
    border: 2px dashed var(--es-line-strong);
    background: var(--es-fill);
    box-shadow: none;
}

.atier-card.is-selected {
    border-color: var(--es-brand);
    box-shadow: 0 0 0 3px var(--es-ring);
}

.atier-card__move {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.atier-card__move form,
.atier-card__actions form,
.atier-panel__actions form {
    margin: 0;
}

.atier-badge {
    flex: none;
    width: 64px;
    height: 64px;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    background: var(--es-paper);
    object-fit: contain;
}

.atier-badge.is-empty {
    display: grid;
    place-items: center;
    border-style: dashed;
    background: var(--es-fill);
    color: var(--es-faint);
}

.atier-badge.is-empty svg {
    width: 40%;
    height: 40%;
}

.atier-badge--lg {
    width: 88px;
    height: 88px;
}

.atier-badge--xl {
    width: 104px;
    height: 104px;
    border-radius: var(--es-r-xl);
}

.atier-card.is-off .atier-badge {
    opacity: .55;
    filter: grayscale(1);
}

.atier-card__main {
    display: grid;
    flex: 1 1 12rem;
    gap: 4px;
    min-width: 0;
}

.atier-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.atier-card__name {
    font-family: var(--es-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--es-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.atier-card__name:hover {
    color: var(--es-brand);
    text-decoration: underline;
}

.atier-card.is-off .atier-card__name {
    color: var(--es-muted);
}

.atier-card__desc {
    margin: 0;
    font-size: .85rem;
    color: var(--es-muted);
}

.atier-card__use {
    display: grid;
    gap: 6px;
    width: 7.5rem;
}

.atier-card__uses {
    font-size: .78rem;
    color: var(--es-muted);
    white-space: nowrap;
}

.atier-card__uses b {
    margin-right: .2rem;
    font-family: var(--es-font-display);
    font-size: 1.35rem;
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

.atier-card__status {
    flex: none;
}

.atier-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.atier-panel__top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.atier-panel__desc {
    margin: 0;
    font-size: .88rem;
    color: var(--es-muted);
}

.atier-panel__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.atier-panel__stats > div {
    padding: 12px 14px;
    border-radius: var(--es-r);
    background: var(--es-fill);
}

.atier-panel__stats dt {
    font-size: .78rem;
    font-weight: 600;
    color: var(--es-muted);
}

.atier-panel__stats dd {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

.atier-panel__spread {
    display: grid;
    gap: 8px;
}

.atier-panel__spread > .kicker {
    margin: 0;
}

.atier-spread {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.atier-spread .chart-meter-row {
    grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) auto;
    font-size: .82rem;
}

.atier-spread .chart-meter-row:not(.is-on) .chart-meter > span {
    --chart-c: var(--es-chart-soft);
}

.atier-spread .is-on .chart-meter-row__label {
    color: var(--es-brand);
}

.atier-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The preview wall: the public bands at their real sizes, a little tighter in a side column. */
.atier-wall {
    display: grid;
    gap: 10px;
}

.atier-wall .sponsor-band {
    margin: 0;
    border-radius: var(--es-r-lg);
}

.atier-wall .sponsor-band__head {
    flex-basis: 100%;
}

/* The same step-down as the wall's, scaled to a side column. */
.atier-wall .sponsor-band {
    --sponsor-h: 40px;
}

.atier-wall .sponsor-band--0 {
    --sponsor-h: 72px;
}

.atier-wall .sponsor-band--1 {
    --sponsor-h: 58px;
}

.atier-wall .sponsor-band--2 {
    --sponsor-h: 48px;
}

.atier-band.is-faded {
    opacity: .45;
}

.atier-band.is-current {
    background: var(--es-brand-soft);
    outline: 2px solid var(--es-brand);
    outline-offset: 2px;
}

/* Where a logo would go: an outline rather than a white tile, which would read as a logo. */
.atier-slot,
.atier-slot:hover {
    border: 1px dashed var(--es-line-strong);
    background: transparent;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .atier-card__move {
        flex-direction: row;
    }
}

.atier-place {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.atier-place__row {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--es-line);
    font-size: .88rem;
}

.atier-place__row:last-child {
    border-bottom: 0;
}

.atier-place__row.is-on {
    border-radius: var(--es-r-sm);
    background: var(--es-brand-soft);
    font-weight: 700;
}

.atier-place__row.is-off {
    color: var(--es-muted);
}

.atier-place__rank {
    color: var(--es-faint);
    font-variant-numeric: tabular-nums;
}

.atier-place__name {
    overflow: hidden;
    color: var(--es-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atier-place__row.is-off .atier-place__name {
    color: var(--es-muted);
}

.atier-place__tag {
    font-size: .78rem;
    font-weight: 600;
    color: var(--es-muted);
    white-space: nowrap;
}

.atier-place__row.is-on .atier-place__tag {
    color: var(--es-brand-strong);
}

/* ------------------------------------------- admin "Hukuki metinler" (plan job 9.7, admin2-Legal-C + B, -LegalDraft-B + C, -LegalVersion-B + C)
   The list (UIhataları 74): one full-width card per kind, its head row (icon, name, the version in
   force in one line, "Sitede gör", the next step) over a versions table as wide as the card.
   The draft: the text and the saved preview side by side, C's line numbers on the text (site.js, decoration), the
   format help and the separate publish and delete forms under it. A version: the read-only text
   beside its acceptances, its note and C's timeline of versions. */

.alegal-kind {
    margin-bottom: var(--es-space-5);
}

.alegal-kind__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-3);
    padding: var(--es-space-4) var(--es-space-5);
}

/* The table follows straight under the head; a hairline separates them. */
.alegal-kind__head:not(:last-child) {
    border-bottom: 1px solid var(--es-line);
}

.alegal-kind__name {
    flex: 1 1 14rem;
    min-width: 0;
}

.alegal-kind__title {
    margin: 0;
    font-size: var(--es-fs-h3);
    letter-spacing: -.02em;
}

.alegal-kind__meta {
    margin: 2px 0 0;
    font-size: var(--es-fs-sm);
    color: var(--es-muted);
    font-variant-numeric: tabular-nums;
}

/* AD-41 (DD-45): what a kind is for and where it is shown, under its title in /admin/legal. */
.alegal-kind__about {
    margin: 2px 0 0;
    font-size: var(--es-fs-sm);
    color: var(--es-body);
}

.alegal-kind__where {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px var(--es-space-2);
    margin: 6px 0 0;
    font-size: var(--es-fs-sm);
    color: var(--es-muted);
}

.alegal-kind__path {
    font-size: var(--es-fs-sm);
    color: var(--es-muted);
    overflow-wrap: anywhere;
}

/* AD-41 (DD-45): a form's legal boxes (_LegalConsent), one under the other, the notice line last. */
.legal-consent {
    display: grid;
    gap: var(--es-space-2);
}

.legal-consent__opt {
    margin-left: 4px;
    font-size: var(--es-fs-sm);
    color: var(--es-muted);
}

.legal-consent__notice {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    color: var(--es-muted);
}

.legal-consent__notice svg {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 3px;
}

/* AD-41: "İzinlerim" on Hesabım (_ConsentsCard) — the text beside its one button, stacked on a phone. */
.acct-consents__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-space-3);
}

.acct-consents__text {
    display: grid;
    gap: 2px;
    flex: 1 1 16rem;
    min-width: 0;
    font-size: var(--es-fs-sm);
    color: var(--es-body);
}

.acct-consents__text strong {
    color: var(--es-ink);
}

.acct-consents__state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--es-muted);
}

.alegal-kind__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-space-2);
    margin-left: auto;
}

/* On a phone the two buttons take their own row, side by side, at full width. */
@media (max-width: 575.98px) {
    .alegal-kind__head {
        padding: var(--es-space-3) var(--es-space-4);
    }

    .alegal-kind__actions {
        flex: 1 1 100%;
    }

    .alegal-kind__actions .btn {
        flex: 1 1 auto;
    }
}

/* The note wraps at every width from 768 on, so the table fits its card with no inner scroll.
   On a phone it keeps a readable width and the table scrolls inside its wrapper instead. */
@media (max-width: 767.98px) {
    .alegal-versions__note {
        min-width: 12rem;
    }
}

.alegal-editor,
.alegal-doc {
    min-width: 0;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-xl);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.alegal-versions {
    margin: 0;
}

.alegal-row--draft > td {
    background: var(--es-warn-soft);
}

.alegal-foot {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: var(--es-fs-sm);
    color: var(--es-muted);
}

.alegal-foot svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.alegal-foot b {
    color: var(--es-ink);
}

.alegal-head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.alegal-dim {
    font-weight: 300;
    color: var(--es-muted);
}

/* ---- the draft */
.alegal-editor {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
    padding: 18px;
}

.alegal-editor__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 0 4px;
}

.alegal-editor__stats {
    font-size: .82rem;
    font-weight: 600;
    color: var(--es-muted);
}

.alegal-split {
    display: grid;
    gap: 16px;
}

@media (min-width: 1200px) {
    .alegal-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.alegal-split__text {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 16px;
    border-radius: var(--es-r-lg);
    background: var(--es-fill);
}

.alegal-split__label {
    margin: 0;
    font-family: var(--es-font-body);
    font-size: .85rem;
    font-weight: 700;
    color: var(--es-ink);
}

.alegal-split__preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 20px 24px;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
}

.alegal-split__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.alegal-split__empty {
    margin: 0;
    font-size: .9rem;
    color: var(--es-muted);
}

.alegal-prose {
    margin: 0;
}

.alegal-editor__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding-top: 16px;
    border-top: 1px solid var(--es-line);
}

.alegal-editor__note {
    flex: 1 1 18rem;
}

.alegal-editor__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The text with its line numbers. Without script it is the plain field; site.js adds the gutter
   (is-numbered) and measures each line through the hidden mirror, so a wrapped paragraph keeps
   one number, as an editor's soft wrap does. */
.line-editor {
    position: relative;
    display: flex;
    min-width: 0;
}

.line-editor__area {
    min-height: 24rem;
    font-family: var(--bs-font-monospace);
    font-size: .85rem;
    line-height: 1.6;
    resize: vertical;
}

.line-editor.is-numbered {
    overflow: hidden;
    border: 1px solid var(--es-edge);
    border-radius: var(--es-r-input);
    background: var(--es-surface);
}

.line-editor.is-numbered:focus-within {
    border-color: var(--es-brand);
    box-shadow: 0 0 0 4px var(--es-ring);
}

.line-editor.is-numbered .line-editor__area {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.line-editor__gutter {
    flex: none;
    min-width: 3rem;
    overflow: hidden;
    padding-right: .6rem;
    padding-left: .6rem;
    border-right: 1px solid var(--es-line);
    background: var(--es-fill);
    color: var(--es-faint);
    font-family: var(--bs-font-monospace);
    font-size: .85rem;
    line-height: 1.6;
    text-align: right;
    user-select: none;
    font-variant-numeric: tabular-nums;
}

.line-editor__mirror {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    visibility: hidden;
    pointer-events: none;
    font-family: var(--bs-font-monospace);
    font-size: .85rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.alegal-below {
    display: grid;
    gap: 20px;
    align-items: start;
}

/* Two columns from a portrait tablet up (UIhataları 82), not only from 992px. */
@media (min-width: 768px) {
    .alegal-below {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.alegal-format__rules {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.alegal-format__rules li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
}

.alegal-format__rules kbd {
    display: inline-grid;
    place-items: center;
    min-width: 3.2rem;
    padding: .15rem .5rem;
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r-sm);
    background: var(--es-fill);
    box-shadow: inset 0 -1px 0 var(--es-line-strong);
    color: var(--es-ink);
    font-family: var(--bs-font-monospace);
    font-size: .8rem;
    white-space: pre;
}

.alegal-publish {
    border-color: var(--es-brand-border);
}

.alegal-publish__unsaved {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--es-r);
    background: var(--es-warn-soft);
    /* The box text, not --es-warn-ink (the ink of a solid warning fill): that was white on the pale
       wash and the wash itself on the dark one (UIhataları 38). */
    color: var(--es-warn-box-text);
    font-size: .85rem;
    font-weight: 600;
}

.alegal-publish__unsaved[hidden] {
    display: none;
}

.alegal-publish__dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: .45em;
    border-radius: 50%;
    background: var(--es-dot-warn);
}

.alegal-publish__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.alegal-publish__actions form {
    margin: 0;
}

.alegal-publish .btn:disabled {
    cursor: not-allowed;
}

/* ---- a published version */
.alegal-read {
    display: grid;
    gap: 20px;
    align-items: start;
}

@media (min-width: 1200px) {
    .alegal-read {
        grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    }
}

.alegal-doc {
    padding: clamp(20px, 4vw, 44px) clamp(20px, 4vw, 52px);
}

.alegal-doc__lock {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 8px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--es-muted);
}

.alegal-doc__lock svg {
    width: 14px;
    height: 14px;
}

.alegal-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.alegal-accepted {
    gap: 4px;
}

.alegal-accepted__label {
    margin: 0;
    font-family: var(--es-font-body);
    font-size: .8rem;
    font-weight: 600;
    color: var(--es-muted);
}

.alegal-accepted__count {
    font-family: var(--es-font-display);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--es-brand);
    font-variant-numeric: tabular-nums;
}

.alegal-accepted__text {
    font-size: .82rem;
    color: var(--es-muted);
}

.alegal-note__text {
    margin: 0;
    font-family: var(--es-font-display);
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--es-ink);
}

.alegal-timeline {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.alegal-timeline__item {
    position: relative;
    padding-left: 22px;
}

.alegal-timeline__item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    width: 2px;
    background: var(--es-line);
}

.alegal-timeline__item:first-child::before {
    top: 16px;
}

.alegal-timeline__item:last-child::before {
    bottom: calc(100% - 16px);
}

.alegal-timeline__item::after {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 12px;
    height: 12px;
    border: 2px solid var(--es-line-strong);
    border-radius: 50%;
    background: var(--es-surface);
}

.alegal-timeline__item.is-on::after {
    border-color: var(--es-brand);
    background: var(--es-brand);
}

.alegal-timeline__item.is-draft::after {
    border-style: dashed;
    border-color: var(--es-warn);
}

.alegal-timeline__link {
    display: grid;
    gap: 2px;
    padding: 6px 8px;
    border-radius: var(--es-r);
    color: inherit;
    text-decoration: none;
}

.alegal-timeline__link:hover {
    background: var(--es-fill);
}

.alegal-timeline__item.is-current > .alegal-timeline__link {
    background: var(--es-brand-soft);
}

.alegal-timeline__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.alegal-timeline__name {
    font-weight: 700;
    color: var(--es-ink);
}

.alegal-timeline__meta {
    font-size: .8rem;
    color: var(--es-muted);
    overflow-wrap: anywhere;
}

/* ------------------------------------------- admin "Kullanıcılar" (plan job 9.8, admin2-Users-C + B's avatar)
   C's three numbers in the page head, the search on 9.2's filter bar, a compact list whose rows
   carry B's avatar and dim when the account cannot sign in, and C's panel: the identity, four
   mini stats, the allowance form, the memberships, the moderation history and the access lever
   with the link to the account's own trail in the audit log. */

.ausr-counts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-space-3) var(--es-space-6);
    margin: 0;
}

.ausr-counts > div {
    display: flex;
    flex-direction: column-reverse;
}

.ausr-counts dt {
    color: var(--es-muted);
    font-size: .78rem;
    font-weight: 600;
}

.ausr-counts dd {
    margin: 0;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.ausr-counts .is-bad dd {
    color: var(--es-bad);
}

/* Active accounts that never confirmed their address (AD-19, UIhataları 76): the warn tone of
   the row's "E-posta doğrulanmadı" pill. */
.ausr-counts .is-warn dd {
    color: var(--es-warn-box-text);
}

.ausr-search .adm-filter__search {
    flex-basis: 20rem;
}

@media (min-width: 768px) {
    .ausr-search {
        max-width: 40rem;
    }
}

.ausr-table {
    min-width: 640px;
}

/* "Organizasyon hakkı" may take two lines in the head, so the list fits beside the panel. */
.ausr-table > thead th {
    white-space: normal;
}

/* An account that cannot sign in reads quieter, as in C; the status pill still says why. */
.ausr-table > tbody > tr.is-off > td {
    color: var(--es-muted);
}

.ausr-person {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.ausr-avatar {
    width: 2rem;
    height: 2rem;
    font-size: .75rem;
}

.ausr-person__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    min-width: 0;
}

.ausr-person__name,
.ausr-person__sub {
    display: block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ausr-person__name {
    color: var(--es-ink);
    font-weight: 700;
    text-decoration: none;
}

/* One line, cut with an ellipsis: an address has no spaces to wrap at, and wrapping it anywhere
   broke it a letter a line when the table was squeezed. The whole address is in the title. */
.ausr-person__sub {
    color: var(--es-muted);
    font-size: .82rem;
}

.ausr-person__name:hover {
    color: var(--es-brand-strong);
    text-decoration: underline;
}

.ausr-pill {
    font-size: .72rem;
}

.ausr-muted {
    color: var(--es-muted);
}

.ausr-faint {
    color: var(--es-faint);
    font-size: .82rem;
}

.ausr-quota {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .35rem;
    white-space: nowrap;
}

.ausr-quota b {
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

/* The row's "Etkinleştir": one button; its reason waits in the dialog (with script off it stays
   above the button, labelled). */
.ausr-access--row {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
    margin: 0;
}

/* The panel. */
.ausr-panel__id {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.ausr-panel__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

/* Four mini stats, two by two, one hairline between them (the narrow panel has no room for C's
   row of three plus the door count). */
.ausr-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-sm);
    background: var(--es-line);
}

.ausr-stats > div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: .1rem;
    padding: .6rem .75rem;
    background: var(--es-surface);
}

.ausr-stats dt {
    color: var(--es-faint);
    font-size: .72rem;
    font-weight: 600;
}

.ausr-stats dd {
    margin: 0;
    color: var(--es-ink);
    font-weight: 700;
    white-space: nowrap;
}

.ausr-section {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding-top: 1rem;
    border-top: 1px solid var(--es-line);
}

.ausr-section__title {
    margin: 0;
}

.ausr-section__note {
    margin: 0;
    color: var(--es-muted);
    font-size: .85rem;
}

.ausr-quota-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

.ausr-quota-form .form-control {
    width: 5.5rem;
}

.ausr-members {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
}

.ausr-members li {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.ausr-members__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--es-ink);
    overflow-wrap: anywhere;
}

.ausr-access {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: 0;
}

.ausr-access__field .form-label {
    font-size: .85rem;
}

.ausr-audit {
    align-self: flex-start;
}

.ausr-audit svg {
    width: 16px;
    height: 16px;
}

/* The panel scrolls inside itself beside the list; a little room under its last button keeps the
   button and its focus ring clear of the panel's edge when scrolled to the end (Stage 9 review). */
.review-panel__body > .ausr-section:last-child {
    padding-bottom: .75rem;
}

@media (pointer: coarse) {
    .ausr-access .btn,
    .ausr-quota-form .btn,
    .ausr-audit,
    .ausr-table .btn {
        min-height: 44px;
    }
}

/* ------------------------------------------- admin "Denetim kaydı" (plan job 9.9, admin2-Audit-B + C's chart and chips)
   B's head with "· salt okunur" and C's fortnight of daily volume beside it; the Zaman çizelgesi /
   Tablo switch on the shared .tabs; B's filter card (five labelled fields, the count and the
   buttons in its foot); the rows grouped by day — B's timeline (time, a node coloured by the kind
   of actor on a thin line, the row's card) or C's compact table — and the review panel with the
   reason in a soft box and the JSON snapshot on the shared .code-block. */

.audit-head__ro {
    color: var(--es-faint);
    font-weight: 300;
}

.audit-spark {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(100%, 300px);
    padding: .85rem 1rem;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.audit-spark__head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    color: var(--es-muted);
    font-size: .78rem;
}

.audit-spark__head strong {
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
}

.audit-views {
    margin-bottom: 1rem;
}

.audit-views svg {
    width: 16px;
    height: 16px;
}

.audit-filter {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    margin-bottom: 1.25rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

/* B's five columns on a wide screen, two below 1100px, one on a phone. */
.audit-filter__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

@media (min-width: 1100px) {
    .audit-filter__fields {
        grid-template-columns: 1.5fr 1fr 1.3fr 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .audit-filter__fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.audit-filter__field {
    min-width: 0;
}

.audit-filter__field .form-label {
    margin-bottom: .3rem;
    font-size: .82rem;
    font-weight: 600;
}

.audit-filter__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
}

.audit-filter__count {
    color: var(--es-muted);
    font-size: .82rem;
    font-weight: 600;
}

.audit-filter__zone {
    font-weight: 400;
}

.audit-filter__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.audit-filter__actions svg {
    width: 16px;
    height: 16px;
}

.audit-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Bits both views share. */
.audit-mono {
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.audit-sub {
    display: block;
    color: var(--es-muted);
    font-size: .74rem;
}

.audit-muted {
    color: var(--es-muted);
}

.audit-faint {
    color: var(--es-faint);
}

.audit-break {
    word-break: break-all;
}

/* The panel's "Kim": an e-mail address breaks only at the <wbr> the view puts after "@" and each
   dot, never mid-letters as .detail-list dd's anywhere would let it (Stage 11.1 review). */
.review-panel .adm-facts dd.audit-who {
    overflow-wrap: normal;
    word-break: keep-all;
}

.audit-actor {
    display: block;
    max-width: 16rem;
    overflow: hidden;
    color: var(--es-ink);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The kind of actor: the ember for the platform's administrators, the ink for an organization's
   people, a quiet dot for the system. The kind is also written beside it, so the colour only
   speeds up the reading. */
.audit-node {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--es-faint);
}

.audit-node--admin {
    background: var(--es-brand);
}

.audit-node--member {
    background: var(--es-ink);
}

.audit-node--sm {
    width: 7px;
    height: 7px;
}

/* ---- the timeline */

.audit-day__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .75rem;
    padding-left: .35rem;
}

.audit-day__name {
    font-family: var(--es-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    text-transform: capitalize;
}

.audit-day__date {
    padding: .2rem .65rem;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-pill);
    background: var(--es-surface);
    color: var(--es-muted);
    font-size: .78rem;
    font-weight: 600;
}

.audit-feed {
    margin: 0;
    padding: 0;
    list-style: none;
}

.audit-entry {
    position: relative;
    display: grid;
    grid-template-columns: 3.25rem 14px minmax(0, 1fr);
    gap: .75rem;
}

/* The thread from one node to the next; the last row of a day ends it. */
.audit-entry::before {
    content: "";
    position: absolute;
    top: 1.4rem;
    bottom: -.75rem;
    left: calc(3.25rem + .75rem + 6px);
    width: 2px;
    background: var(--es-line);
}

.audit-entry:last-child::before {
    display: none;
}

.audit-entry__time {
    padding-top: .9rem;
    color: var(--es-muted);
    font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
    text-align: right;
}

.audit-entry > .audit-node {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    box-shadow: 0 0 0 4px var(--es-app-ground);
}

.audit-entry__box {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
    gap: .5rem 1rem;
    align-items: center;
    margin-bottom: .75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--es-glow-line);
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
    box-shadow: var(--es-card-shadow);
}

.audit-entry.is-selected .audit-entry__box {
    border-color: var(--es-brand);
    box-shadow: 0 0 0 1px var(--es-brand), var(--es-card-shadow);
}

.audit-entry__what,
.audit-entry__who {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    min-width: 0;
}

.audit-entry__label,
.audit-label {
    color: var(--es-ink);
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.audit-entry__label {
    font-family: var(--es-font-display);
    font-size: 1rem;
    letter-spacing: -.02em;
}

.audit-entry__label:hover,
.audit-label:hover {
    color: var(--es-brand-strong);
    text-decoration: underline;
}

.audit-entry__obj {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .25rem;
    font-size: .78rem;
}

.audit-entry__reason {
    color: var(--es-brand-strong);
    font-size: .78rem;
    overflow-wrap: anywhere;
}

.audit-entry__ip {
    color: var(--es-muted);
    font-size: .76rem;
    white-space: nowrap;
}

@media (max-width: 959.98px) {
    .audit-entry__box {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A phone keeps the thread and the node and gives the time a narrower column. */
@media (max-width: 575.98px) {
    .audit-entry {
        grid-template-columns: 2.6rem 14px minmax(0, 1fr);
        gap: .5rem;
    }

    .audit-entry::before {
        left: calc(2.6rem + .5rem + 6px);
    }

    .audit-actor {
        max-width: 100%;
    }
}

.audit-pager {
    overflow: visible;
}

/* ---- the table */

/* Stage 11.1 review: at 860px the table scrolled inside its ~704px card at 1440 even with no row
   open, cutting Nesne mid-word and hiding Gerekçe and IP. The floor is now what a phone needs to
   stay readable; on a desk the long parts give way instead — the actor's name ellipsizes sooner,
   the action and object codes may break, and Gerekçe wraps in a narrower column. */
.audit-table {
    min-width: 640px;
}

.audit-table .audit-actor {
    max-width: 10rem;
}

.audit-table .audit-sub.audit-mono {
    overflow-wrap: anywhere;
}

/* Second review: the action column had shrunk to a word a line and its code broke mid-word. The
   column keeps room for a two-word label, and the code breaks only at the <wbr> the view puts
   after each dot. */
.audit-table .audit-action-cell {
    min-width: 11rem;
}

.audit-table .audit-sub.audit-code {
    overflow-wrap: normal;
    word-break: keep-all;
    white-space: normal;
}

/* With a row open beside the list the panel names the address, so IP steps aside and the rest
   of the row fits the box at 1440 (as the sessions' and registrations' lists do, DD-30). */
@media (min-width: 1200px) {
    .audit-layout:has(> .review-panel) .audit-table__ip {
        display: none;
    }
}

.audit-table > tbody > tr.audit-table__day > th {
    padding: .6rem 1rem;
    background: var(--es-fill);
    color: var(--es-ink);
    font-size: .8rem;
    font-weight: 700;
}

.audit-what {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* The code under the label lines up with the label, past the dot. */
.audit-indent {
    padding-left: calc(7px + .5rem);
}

.audit-reason-cell {
    min-width: 7rem;
    max-width: 11rem;
    color: var(--es-muted);
    overflow-wrap: anywhere;
}

/* ---- the panel */

.audit-stamp {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
    color: var(--es-muted);
    font-size: .8rem;
}

.audit-reason {
    padding: .8rem 1rem;
    border-radius: var(--es-r-sm);
    background: var(--es-brand-soft);
}

.audit-reason__title {
    display: block;
    margin-bottom: .2rem;
    color: var(--es-brand-strong);
    font-size: .78rem;
    font-weight: 700;
}

.audit-reason p {
    margin: 0;
    color: var(--es-ink);
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.audit-data .code-block__pre {
    max-height: 18rem;
    padding: .8rem 1rem;
    font-size: .78rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.audit-panel__links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--es-line);
}

.audit-panel__links svg {
    width: 15px;
    height: 15px;
}

/* ------------------------------------------- admin "Entegrasyonlar" (AD-40, DD-44)
   Four cards in a two-column grid (one below 992px): the head (icon, name, one line, readiness
   pill), an optional note, the values as they may be shown (a secret masked, with its source),
   the save form, and a foot with "Sına", "Kaldır" and the last change. The dashboard's
   "Yapılandırma" strip is at the end: four chips and the link. Tokens only. */

.aint-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--es-space-5);
    margin-bottom: var(--es-space-5);
}

@media (max-width: 991.98px) {
    .aint-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.aint-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    scroll-margin-top: var(--es-space-5);
}

.aint-card:target {
    border-color: var(--es-brand-border);
}

.aint-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-3);
    padding: var(--es-space-4) var(--es-space-5);
    border-bottom: 1px solid var(--es-line);
}

.aint-card__name {
    flex: 1 1 12rem;
    min-width: 0;
}

.aint-card__title {
    margin: 0;
    font-size: var(--es-fs-h3);
    letter-spacing: -.02em;
}

.aint-card__lead {
    margin: 2px 0 0;
    font-size: var(--es-fs-sm);
    color: var(--es-muted);
}

.aint-card__note {
    display: flex;
    gap: var(--es-space-2);
    margin: var(--es-space-4) var(--es-space-5) 0;
    padding: var(--es-space-3);
    border-radius: var(--es-r-sm);
    background: var(--es-info-soft);
    font-size: var(--es-fs-sm);
    color: var(--es-ink);
}

.aint-values {
    display: grid;
    gap: var(--es-space-2);
    margin: 0;
    padding: var(--es-space-4) var(--es-space-5) 0;
}

.aint-values__row {
    display: grid;
    grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
    gap: var(--es-space-3);
    align-items: baseline;
}

.aint-values__row dt {
    font-size: var(--es-fs-sm);
    font-weight: 600;
    color: var(--es-muted);
}

.aint-values__row dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-2);
    min-width: 0;
    margin: 0;
}

.aint-values__value {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--es-ink);
}

.aint-values__value--masked {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.aint-values__value--none {
    color: var(--es-muted);
}

.aint-form {
    display: grid;
    gap: var(--es-space-3);
    padding: var(--es-space-4) var(--es-space-5);
}

.aint-form__field {
    min-width: 0;
}

.aint-form__json {
    font-size: var(--es-fs-sm);
    resize: vertical;
}

.aint-form__or {
    margin-top: var(--es-space-2);
    font-size: var(--es-fs-sm);
    color: var(--es-muted);
}

.aint-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-3);
    margin-top: auto;
    padding: var(--es-space-3) var(--es-space-5);
    border-top: 1px solid var(--es-line);
}

.aint-test {
    display: flex;
    flex: 1 1 16rem;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-2);
    min-width: 0;
}

.aint-test__phone {
    flex: 1 1 12rem;
    max-width: 16rem;
}

.aint-test__hint,
.aint-card__updated {
    font-size: var(--es-fs-sm);
    color: var(--es-muted);
}

.aint-why {
    display: grid;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--es-brand-border);
    border-radius: var(--es-r-lg);
    background: var(--es-brand-soft);
    color: var(--es-ink);
}

.aint-why p {
    margin: 0;
    font-size: .9rem;
}

@media (max-width: 575.98px) {
    .aint-card__head,
    .aint-values,
    .aint-form,
    .aint-card__foot {
        padding-inline: var(--es-space-4);
    }

    .aint-card__note {
        margin-inline: var(--es-space-4);
    }

    .aint-values__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .aint-test__phone {
        max-width: none;
    }
}

/* ---- the dashboard's "Yapılandırma" strip */

.aint-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-3);
    margin: 0 0 var(--es-space-5);
    padding: var(--es-space-3) var(--es-space-4);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    background: var(--es-surface);
}

.aint-strip__title {
    margin: 0;
    font-size: var(--es-fs-sm);
    font-weight: 700;
    color: var(--es-ink);
}

.aint-strip__list {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--es-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.aint-strip__item {
    display: inline-flex;
    align-items: center;
    gap: var(--es-space-2);
    padding: 4px var(--es-space-2);
    border-radius: var(--es-r-sm);
    font-size: var(--es-fs-sm);
    color: var(--es-ink);
    text-decoration: none;
}

.aint-strip__item:hover,
.aint-strip__item:focus-visible {
    background: var(--es-brand-soft);
}

.aint-strip__name {
    font-weight: 600;
}

.aint-strip__link {
    margin-left: auto;
}

/* ------------------------------------------- an icon beside text sits on the first line (T2, UIhataları 81)

   These rows were centred, so once their text wrapped to a second line the icon slid down
   between the lines and no longer read with the words it marks. Each now aligns to the top and
   its icon drops by half of (line height − icon height), which centres it on the first line; a
   one-line row looks exactly as before. Grouped by icon size because the offset depends on it.
   Rows whose icon is larger than a line (an .icbox beside a title, the stat label's tile) and
   rows held to a min-height (the contact rows, the FAQ summary) stay centred on purpose. Kept
   here, after every component, so no component rule above undoes it; without the lh unit
   (@supports) the rows stay centred. */
@supports (height: 1lh) {
    .home-hero__ticket-note,
    .live-card__where,
    .show-card__meta,
    .start__note,
    .apply-shell__secure,
    .apply-event__fact,
    .apply-ticket__door,
    .session-row__who,
    .auth-validity,
    .code-field__error,
    .ticket__qr-hint,
    .es-dialog__impact,
    .session-ended__note,
    .search-results__note,
    .error-stage__note,
    .member-edit__lock,
    .sponsor-card__events,
    .qs-editor__warn,
    .kiosk-card__fact,
    .amod-panel__public,
    .alegal-doc__lock {
        align-items: flex-start;
    }

    .show-card__meta svg,
    .ticket__qr-hint svg,
    .session-ended__note svg,
    .sponsor-card__events svg,
    .alegal-doc__lock svg {
        margin-top: calc((1lh - 14px) / 2);
    }

    .live-card__where svg,
    .session-row__who > svg,
    .auth-validity svg,
    .kiosk-card__fact dt svg,
    .amod-panel__public svg {
        margin-top: calc((1lh - 15px) / 2);
    }

    .home-hero__ticket-note svg,
    .start__note svg,
    .apply-ticket__door svg,
    .es-dialog__impact svg,
    .member-edit__lock svg,
    .qs-editor__warn svg {
        margin-top: calc((1lh - 16px) / 2);
    }

    .code-field__error svg,
    .search-results__note svg,
    .error-stage__note svg {
        margin-top: calc((1lh - 18px) / 2);
    }

    .apply-shell__secure svg {
        margin-top: calc((1lh - .9rem) / 2);
    }

    .apply-event__fact svg {
        margin-top: calc((1lh - 1rem) / 2);
    }

    /* The rest of the application flow (S6, UIhataları 81). The footer's credit, the queue or
       approval note, the deadline pill and the ticket's door line keep their mark on the first
       line. A radio card or chip gets its height from padding instead of min-height, so a one-line
       option stays centred and a wrapped one grows. The account capsule and the account line keep
       their avatar at the top, with the first line centred on it. */
    .apply-shell__credit,
    .apply-card__note,
    .apply-card__deadline,
    .apply-as,
    .apply-done__account,
    .apply-choice__face,
    .apply-chip__face {
        align-items: flex-start;
    }

    .apply-shell__credit img {
        margin-top: calc((1lh - 18px) / 2);
    }

    .apply-card__note-icon {
        margin-top: calc((1lh - 1.25rem) / 2);
    }

    .apply-card__deadline > svg,
    .apply-chip__mark {
        margin-top: calc((1lh - 15px) / 2);
    }

    .apply-choice__dot {
        margin-top: calc((1lh - 18px) / 2);
    }

    .apply-choice__face {
        min-height: 0;
        padding-block: max(0px, calc((var(--es-h-field) - 1lh) / 2));
    }

    .apply-chip__face {
        min-height: 0;
        padding-block: max(0px, calc((var(--es-h-btn) - 1lh) / 2));
    }

    .apply-as__text {
        padding-block: max(0px, calc((2rem - 1lh) / 2));
    }

    .apply-done__account-text {
        padding-top: max(0px, calc((2.25rem - 1lh) / 2));
    }
}

/* =============================================================================================
   MOTION (plan job 2.7, §2.1)
   =============================================================================================

   The redesign's "premium" feel is carried by a few small movements rather than by decoration:
   a card lifts and its ember edge brightens (job 2.3, above), its cover leans in, a menu opens
   from its button, a page dissolves into the next, a section rises into view, the theme fades
   rather than snaps, and the unread count on the bell pulses once. None of it carries meaning:
   a browser that supports none of it shows the same page, and the reduced-motion block at the
   very end of the file switches every one of them off in one place. */

/* A menu opens: opacity and scale over 160ms. The individual `scale` property rather than a
   transform on purpose — Popper positions a Bootstrap dropdown with an inline transform, which
   a transform keyframe would overwrite for the length of the animation and throw the menu to
   the corner of the page. Each of these is display:none until it opens, so the animation plays
   on every opening without a script. */
@keyframes es-menu-in {
    from {
        opacity: 0;
        scale: .96;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

.dropdown-menu.show,
.time-field__menu,
.suggest {
    transform-origin: top center;
    animation: es-menu-in var(--es-dur) var(--es-ease);
}

.theme-menu[open] > .theme-menu__panel {
    transform-origin: top right;
    animation: es-menu-in var(--es-dur) var(--es-ease);
}

/* Page to page: a cross-document view transition — the old page dissolves into the new one
   instead of flashing white (or black) between them. Same-origin navigations only; a browser
   without it simply navigates. Shorter than the default so a click never feels held back. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 200ms;
    animation-timing-function: var(--es-ease);
}

/* A section rises into view as it is scrolled to — only where the browser drives an animation
   from scrolling itself (animation-timeline: view()). Everything else, and every page with
   script off, shows it at rest: nothing is ever hidden waiting for a script. `translate`, not
   transform, so the lift on hover still composes with it. Cards inside a sideways shelf are
   left alone — the shelf rises as one, and a card scrolled in from the side is already visible.
   .es-reveal opts a later section in without a selector here. */
@keyframes es-reveal {
    from {
        opacity: 0;
        translate: 0 24px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* Asked for, rather than switched off in the reduced-motion block below: the :not() selector
   here outranks a plain .show-card there, so "animation: none" alone lost and show-cards kept
   rising under "hareketi azalt". */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .es-reveal,
        .shelf,
        .evc,
        .event-org,
        .show-card:not(.shelf .show-card) {
            animation: es-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }
    }
}

/* The theme picker (job 2.4) switching in place: site.js puts this class on <html> for the
   length of one fade, so the page eases from one palette to the other instead of snapping. Only
   colours, and only for that moment — a standing transition on every element would also slow
   every hover on the site. */
html.es-theme-switching,
html.es-theme-switching *,
html.es-theme-switching *::before,
html.es-theme-switching *::after {
    transition: background-color var(--es-dur-slow) ease, color var(--es-dur-slow) ease,
        border-color var(--es-dur-slow) ease, box-shadow var(--es-dur-slow) ease,
        fill var(--es-dur-slow) ease, stroke var(--es-dur-slow) ease !important;
}

/* The unread count on the bell pulses once when the page arrives — enough to be noticed, not a
   beacon. A ring of the ember widening and fading; the badge itself does not move. */
@keyframes es-pulse {
    from {
        box-shadow: 0 0 0 0 var(--es-brand-shadow);
    }

    to {
        box-shadow: 0 0 0 9px transparent;
    }
}

.notify-bell__badge {
    animation: es-pulse 1.1s var(--es-ease) .45s 1 both;
}

/* A narrow screen is usually a phone, where the glass bar's blur is repainted on every scrolled
   frame: lighter there (plan job 2.7 risk). */
@media (max-width: 767.98px) {
    :root {
        --es-glass-filter: blur(8px);
    }
}

/* ---------------------------------------------------------- reduced motion (plan job 2.7)
   The one place "hareketi azalt" is honoured (§2.1, design.md §5.3); it replaces the five rules
   that used to sit beside their components. Last in the file on purpose: it has to outrank every
   component's own :hover lift and animation above. A card under the pointer still brightens its
   edge and its glow — that is a colour change, not movement — but at once, and it no longer
   rises; nothing opens, slides, zooms, pulses or dissolves. A new movement anywhere in this file
   is switched off here, not next to itself. */
@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    .evc,
    .team-card,
    .role-card__face,
    .role-card__dot,
    .evo-stat,
    .evc__go,
    .show-card,
    .myorg,
    .myorg__cover img,
    .event-org,
    .event-org__go,
    .event-hero__org,
    .event-hero__category,
    .event-hero__crew,
    .speaker-card,
    .sponsor-tile,
    .star-toggle__btn,
    .show-card__cover img,
    .evc__cover img,
    .app-sidebar,
    .app-topbar,
    html[data-scroll-ready] .app-topbar,
    .side-link,
    .apply-choice__face,
    .apply-choice__dot,
    .apply-chip__face,
    .disclosure__summary,
    .disclosure__chevron,
    .rating label,
    .site-header,
    html[data-scroll-ready] .site-header,
    .site-search,
    .site-header__icon,
    .site-header .notify-bell,
    .user-chip,
    .user-chip__chevron,
    .notice-row,
    .notice__entry,
    .start-go,
    .start-org,
    .site-drawer,
    .offcanvas-backdrop,
    .site-footer__fold > summary svg,
    .auth-switch__link,
    .auth-admin-door__link,
    .auth-resend,
    .code-field__box,
    .image-field.is-enhanced .image-field__drop,
    .file-drop.is-enhanced .file-drop__zone,
    .share-pop__address,
    .share-pop__app,
    .share-pop__mark,
    .venue-map__chevron,
    .venue-map__app,
    .venue-map__copy,
    .time-field--enhanced .time-field__toggle,
    .time-field__option,
    .shelf__link svg,
    .live-card,
    .feature-lead,
    .feature-lead__cover img,
    .cat-tile,
    .org-pick,
    .org-pick__follow,
    .org-next,
    .profile-talk,
    a.dash-stat,
    .speaker-pool-card > article,
    .speaker-pool-add__link,
    .speaker-talk,
    .speaker-fill__bar > span,
    .sponsor-card > article,
    .sponsor-add__link,
    .sponsor-switch,
    a.reg-stat,
    .qs-type__face,
    .qs-card__arrow,
    .ann-aud__face,
    .done-step__mark,
    .btn {
        transition: none;
    }

    .evc:hover,
    .show-card:hover,
    a.myorg:hover,
    a.myorg:hover .myorg__cover img,
    .start-go:hover,
    a.start-org:hover,
    .event-org:hover,
    .event-hero__org:hover,
    .event-hero__category:hover,
    .event-hero__crew:hover,
    .speaker-card--link:hover,
    .show-card:hover .show-card__cover img,
    .evc:hover .evc__cover img,
    .shelf__link:hover svg,
    .live-card:hover,
    .feature-lead:hover,
    .feature-lead:hover .feature-lead__cover img,
    .cat-tile:hover,
    .org-pick:hover,
    .org-next:hover,
    .profile-talk:hover,
    a.reg-stat:hover,
    .btn:active {
        transform: none;
    }

    .dropdown-menu.show,
    .time-field__menu,
    .suggest,
    .theme-menu[open] > .theme-menu__panel,
    .header-pop > .site-header__panel:not([hidden]),
    .es-reveal,
    .shelf,
    .evc,
    .event-org,
    .show-card,
    .notify-bell__badge,
    .live-badge__dot,
    .home-marquee__track,
    .site-footer__mark,
    .es-dialog[open],
    .es-dialog[open]::backdrop,
    .es-toast,
    .es-toast.is-leaving,
    .preview-stage .is-entering,
    .chart-bar__fill,
    .chart-col,
    .chart-meter > span,
    .stat__bar > span,
    .share-pop[open] > .share-pop__panel,
    .share-pop.is-enhanced[open] > .share-pop__panel,
    .share-pop.is-enhanced[open] > .share-pop__scrim:not([hidden]),
    .venue-map__menu:not([hidden]),
    .venue-map__menu:not([hidden]) ~ .venue-map__scrim,
    .error-stage__beams,
    .busy-spinner,
    .prog-tools__live-dot,
    .adash-live-pill::before,
    .prog-menu[open] > .prog-menu__panel,
    .evo-menu[open] > .evo-menu__panel,
    .aorg-menu[open] > .aorg-menu__panel,
    .esk-menu[open] > .esk-menu__panel,
    .door-cam__line,
    .door-result {
        animation: none;
    }

    /* The toast's draining time bar is movement with no meaning of its own (plan job 4.2). */
    .es-toast__bar {
        display: none;
    }

    /* The communities' strip stands still (UIhataları 7): the names wrap in the middle, once,
       with no fade and none of the echoes the loop needed. */
    .home-marquee {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .home-marquee__track {
        width: auto;
        justify-content: center;
    }

    .home-marquee__list {
        flex-wrap: wrap;
        justify-content: center;
    }

    .home-marquee__list[aria-hidden="true"],
    .home-marquee__item[aria-hidden="true"] {
        display: none;
    }

    /* The admin overview's queue box keeps its shadow on hover, not its lift (plan job 9.1). */
    .adash-queue:hover {
        translate: none;
    }

    html.es-theme-switching,
    html.es-theme-switching *,
    html.es-theme-switching *::before,
    html.es-theme-switching *::after {
        transition: none !important;
    }

    [data-swap-region][aria-busy="true"] {
        transition: none;
    }

    /* The search page's removable filter chips (UIhataları 78). */
    .search-filter,
    .search-filter__x {
        transition: none;
    }

    /* The applicant's name link in the admin requests (UIhataları 71, R7 review). */
    a.areq-who__name,
    a.areq-person__name {
        transition: none;
    }

    /* A refused field's nudge (DD-46, AD-42). */
    .is-shaking {
        animation: none;
    }
}