/* ============================================================
   İDV — foundation

   The token layer, the two typefaces, the base, the controls
   (buttons, links, focus) and the site chrome (header, navigation,
   mega panel, mobile drawer, footer). Every page block lives in
   public-system.css; admin surfaces live in admin.css.

   EVERY VALUE IS A TOKEN. A literal colour, size, radius, shadow
   or duration in a rule is a defect: add or reuse a token here and
   reference it. DESIGN_SYSTEM.md documents what each token is for.
   ============================================================ */

/* ------------------------------------------------------------
   Typefaces. Self-hosted (the CSP allows `font-src 'self'` only)
   and variable, so every weight is real rather than synthesised.
   Three subsets per face: `latin` (with ı and ç), `latin-tr` —
   only Ğ ğ İ Ş ş, a few KB — and `latin-ext` for everything else.
   The Turkish letters used to live in latin-ext, so every page
   downloaded ~100 KB of it for five characters; now latin-ext
   loads only when a page really contains such a character.
   tools/fonts/split-turkish.sh writes the tr and ext files.

   Schibsted Grotesk is the interface. Source Serif 4 is the
   foundation speaking: statements, headings, names, figures and
   the body of an article.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-011D, U+0120-012F, U+0131-015D, U+0160-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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin-tr.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130, U+015E-015F;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-011D, U+0120-012F, U+0131-015D, U+0160-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: "Source Serif 4";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-tr.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130, U+015E-015F;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/source-serif-4-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-011D, U+0120-012F, U+0131-015D, U+0160-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: "Source Serif 4";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/source-serif-4-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/source-serif-4-italic-latin-tr.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130, U+015E-015F;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* --- 1. Palette. Two brand ramps and a WARM neutral ramp. ---- */
  --brand-blue: #143e6b;
  --brand-green: #278e44;
  --blue-50: #f2f6fa;
  --blue-100: #e3ebf3;
  --blue-200: #c3d3e3;
  --blue-300: #95b3cf;
  --blue-400: #5e89b1;
  --blue-500: #32638f;
  --blue-600: #1f4f7b;
  --blue-700: #143e6b;
  --blue-800: #12365c;
  --blue-900: #112e4c;
  --blue-950: #0a1c30;
  --green-50: #f1f8f3;
  --green-100: #ddefe2;
  --green-200: #bde0c6;
  --green-300: #91c99f;
  --green-400: #5bac70;
  --green-500: #278e44;
  --green-600: #217b3a;
  --green-700: #1d6332;
  --green-800: #1a502b;
  --green-900: #164224;
  --teal-600: #1e6d58;
  --neutral-0: #fff;
  --neutral-25: #fcfcfa;
  --neutral-50: #f7f7f4;
  --neutral-100: #efefeb;
  --neutral-200: #e1e1dc;
  --neutral-300: #cacac3;
  --neutral-500: #7d7d75;
  --neutral-600: #60605a;
  --neutral-700: #464641;
  --neutral-800: #2d2d2a;
  --neutral-900: #1b1b19;
  /* Channel triplets, so a translucent layer is still a token:
     rgb(var(--navy-rgb) / .6). */
  --navy-rgb: 10 28 48;
  --white-rgb: 255 255 255;
  --black-rgb: 0 0 0;
  --brand-blue-rgb: 20 62 107;
  --brand-green-rgb: 39 142 68;
  --teal-rgb: 30 109 88;
  --blue-100-rgb: 227 235 243;
  --blue-300-rgb: 149 179 207;
  --blue-400-rgb: 94 137 177;
  --green-300-rgb: 145 201 159;
  --green-400-rgb: 91 172 112;
  /* The medal (intro): spun silver and a gold edge. Nowhere else — the
     metals belong to the welcome, never to page decoration. */
  --metal-silver-50: #f7f8fa;
  --metal-silver-100: #eceef1;
  --metal-silver-200: #dde0e5;
  --metal-silver-300: #c6cad1;
  --metal-silver-400: #a9aeb7;
  --metal-silver-500: #8b919b;
  --metal-gold-100: #f6e7b8;
  --metal-gold-300: #d9b56a;
  --metal-gold-500: #b08a3e;
  --metal-gold-700: #7a5b22;

  /* --- 2. Colour roles. Components use these, not the ramps. --- */
  --color-bg: var(--neutral-0);
  --color-surface: var(--neutral-0);
  --color-surface-alt: var(--neutral-50);
  --color-text: var(--neutral-900);
  --color-heading: var(--blue-950);
  --color-body: var(--neutral-700);
  --color-muted: var(--neutral-600);
  /* The smallest legible muted text: neutral-500 fails AA below 18px on
     the warm grounds, so metadata and breadcrumbs use this instead. */
  --color-meta: var(--neutral-600);
  --color-border: var(--neutral-200);
  --color-hairline: var(--blue-100);
  --color-hairline-strong: var(--blue-200);
  --color-link: var(--brand-blue);
  --color-link-hover: var(--green-700);
  /* Green carries meaning as a SOLID colour: never animated, never a
     text gradient. Each ground gets exactly one legible value. */
  --accent-on-light: var(--green-700);
  --accent-on-dark: var(--green-300);
  --color-focus: var(--green-600);
  --color-focus-on-dark: var(--green-300);
  --on-dark: var(--neutral-0);
  --on-dark-soft: var(--blue-100);
  --on-dark-muted: var(--blue-200);
  --line-on-dark: rgb(var(--white-rgb) / .16);
  --line-on-dark-strong: rgb(var(--white-rgb) / .32);
  --fill-on-dark: rgb(var(--white-rgb) / .08);
  --fill-on-dark-strong: rgb(var(--white-rgb) / .16);
  /* Status. Admin and form feedback only; never page decoration. */
  --color-success: var(--green-800);
  --color-success-bg: var(--green-50);
  --color-success-line: var(--green-500);
  --color-danger: #a33c2b;
  --danger-rgb: 163 60 43;
  --color-danger-strong: #77291d;
  --color-danger-bg: #fff4f2;
  --color-danger-line: #e8c8c0;
  --color-warning: #7a5d14;
  --color-warning-bg: #fdf7e6;
  --color-warning-line: #e7d49c;

  /* --- 3. Type. One scale for the whole site, admin included. --- */
  --font-sans: "Schibsted Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", Charter, Cambria, Georgia, serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-2xs: .75rem;      /* 12  uppercase labels, tags */
  --fs-xs: .8125rem;     /* 13  breadcrumbs, captions, dates */
  --fs-sm: .875rem;      /* 14  actions, controls, small UI */
  --fs-md: .9375rem;     /* 15  card text, secondary copy */
  --fs-base: 1rem;       /* 16  body */
  --fs-lg: 1.125rem;     /* 18  lead copy, list titles */
  --fs-xl: 1.25rem;      /* 20  card titles */
  --fs-2xl: clamp(1.375rem, 1.2rem + .6vw, 1.625rem);   /* 22–26 large card titles */
  --fs-3xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);         /* 24–32 section titles */
  --fs-4xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.3rem);     /* 28–37 statements */
  --fs-5xl: clamp(2rem, 1.5rem + 2vw, 3rem);            /* 32–48 display heads */
  --fs-6xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.6rem);     /* 36–58 page titles */
  --fs-7xl: clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);      /* 40–72 the masthead */
  --fs-figure: clamp(6.5rem, 2.6rem + 11vw, 13.5rem);  /* 104–216 the founding year (D5) */
  --lh-figure: .82;      /* a figure's own box, so its rule measures the digits */
  --lh-tight: 1.08;
  --lh-snug: 1.16;
  --lh-heading: 1.28;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;
  /* The article text: Schibsted Grotesk tuned for reading (owner's choice, option A). */
  --article-family: var(--font-sans);
  --article-size: clamp(1.0625rem, 1rem + .28vw, 1.1875rem);   /* 17 → 19 */
  --article-leading: 1.72;
  --article-gap: 1.35em;
  --article-quote-size: calc(var(--article-size) * 1.1);
  --article-quote-leading: 1.6;
  --article-by-size: calc(var(--article-size) * .8);
  --ls-display: -.028em;
  --ls-title: -.02em;
  --ls-ui: -.012em;
  --ls-label: .08em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- 4. Space. A 4px ladder, then the semantic distances. ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --gutter: var(--space-12);                        /* container side margin */
  --band-pad: clamp(64px, 6.6vw, 104px);            /* every band */
  --gap-stack: clamp(36px, 3.8vw, 60px);            /* between blocks in a band */
  --gap-split: clamp(32px, 4vw, 72px);              /* between the columns of a split */
  --gap-grid: var(--space-5);                       /* between cards */
  --card-pad: clamp(24px, 2.4vw, 34px);
  --card-pad-lg: clamp(28px, 3.2vw, 46px);

  /* --- 5. Shape. Controls, the card, the panel. Nothing is a pill
     except the icon badge and the status tag. ----------------------- */
  --radius-xs: 4px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* --- 6. Depth. -------------------------------------------------- */
  --elev-1: 0 1px 2px rgb(var(--navy-rgb) / .04), 0 2px 8px rgb(var(--navy-rgb) / .05);
  --elev-2: 0 2px 6px rgb(var(--navy-rgb) / .07), 0 14px 32px rgb(var(--navy-rgb) / .11);
  /* THE CARD'S SHADOW (AS-6): a blue shadow under every card, and on
     hover a green one completes it toward the right, so the shadow
     reads as the brand's own blue-to-green. Both sit OUTSIDE the card:
     the green is a box-shadow on a transparent layer of the card's own
     shape, and only its opacity moves. */
  --shadow-card: 0 1px 2px rgb(var(--navy-rgb) / .05), -10px 22px 32px -18px rgb(var(--brand-blue-rgb) / .72);
  --shadow-card-green: 26px 22px 34px -18px rgb(var(--brand-green-rgb) / .7);
  --shadow-card-green-lg: 44px 30px 52px -26px rgb(var(--brand-green-rgb) / .75);
  --shadow-card-dark: -10px 22px 36px -20px rgb(var(--blue-400-rgb) / .7);
  --shadow-card-dark-green: 26px 24px 36px -16px rgb(var(--green-400-rgb) / .85);
  /* The medal resting on paper, and its face sunk a hair into the rim. */
  --shadow-medal: 0 2px 4px rgb(var(--navy-rgb) / .12), 0 26px 52px -22px rgb(var(--navy-rgb) / .5);
  --shadow-medal-face: inset 0 0 0 1px rgb(var(--black-rgb) / .16), inset 0 2px 3px rgb(var(--white-rgb) / .6);

  /* --- 7. Motion. EVERY duration, delay and easing on the public site
     is one of these (D2). A literal in a rule is a defect. ---------- */
  --motion-fast: 150ms;
  --motion-normal: 250ms;
  --motion-slow: 450ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  /* THE HOVER LANGUAGE (AS-9, AS-2). One response for every card,
     button, menu and mega-menu item: it waits a beat, then arrives
     and settles; leaving is quicker and does not wait. Halved in
     review round 1 (R1-5) from 110 / 720 / 420ms: still soft, but
     plainly an answer to the pointer. */
  --hover-delay: 55ms;
  --hover-in: 360ms;
  --hover-out: 210ms;
  --ease-hover: cubic-bezier(.55, 0, .2, 1);
  /* Scroll reveal (GN-1): blur, opacity and a short rise, one item
     after another. */
  --reveal-duration: 900ms;
  --reveal-stagger: 80ms;
  --reveal-distance: 22px;
  --reveal-blur: 8px;
  --ease-reveal: cubic-bezier(.16, 1, .3, 1);
  /* Page transition (AS-1): out fast, in a touch slower. */
  --page-out: 140ms;
  --page-in: 300ms;
  --ease-page: cubic-bezier(.2, .8, .2, 1);
  /* The mega panel: the header growing downward (AS-2). */
  --panel-open: 460ms;
  --panel-close: 300ms;
  --ease-panel: cubic-bezier(.2, .85, .15, 1);
  /* THE WELCOME (IN-1): the medal the first page of a visit opens on —
     it arrives, the light crosses its metal, and it lifts away — and its
     light version between pages: the same medal, smaller and short, so a
     transition still feels quick (AS-1). */
  --intro-full: 2400ms;
  --intro-light: 640ms;
  --ease-intro: cubic-bezier(.3, .7, .2, 1);

  /* --- 8. Layout. ------------------------------------------------- */
  --container: 1280px;
  --w-read: 68ch;
  --w-article: 46rem;                 /* the article's reading column (~740px) */
  --w-article-wide: 62rem;            /* the cover, wide pictures, video, tables */
  --w-note: 46ch;
  --w-statement: 22ch;
  --header-height: 92px;
  --z-dropdown: 30;
  --z-overlay: 40;
  --z-intro-light: 25;
  --z-intro: 90;
  --z-skip: 100;
  /* Print: ink on paper, nothing else. */
  --print-ink: #000;
  --print-soft: #222;
  --print-rule: #999;
  --print-paper: #fff;

  /* --- 9. The brand's gradients. ---------------------------------- */
  /* The wash: the surface a destination card turns into under the
     pointer. Ending on green-600 keeps white body copy at 5.30:1. */
  --brand-wash: linear-gradient(135deg, var(--brand-blue) 0%, var(--teal-600) 52%, var(--green-600) 100%);
  /* The rule that marks the CURRENT page in a row of tabs. */
  --brand-line: linear-gradient(90deg, var(--brand-blue), var(--brand-green));
  --brand-line-dark: linear-gradient(90deg, var(--green-400), var(--neutral-0));
  /* The medal's metals (IN-1). Silver is spun: fine concentric turning
     over light lobes that swing as the face turns. */
  --metal-spun: repeating-radial-gradient(circle at 50% 50%, rgb(var(--white-rgb) / 0) 0 1px, rgb(var(--white-rgb) / .14) 1px 1.6px, rgb(var(--black-rgb) / .02) 1.6px 2.4px);
  --metal-silver: conic-gradient(from 20deg, var(--metal-silver-50), var(--metal-silver-400) 11%, var(--metal-silver-200) 21%, var(--metal-silver-50) 29%, var(--metal-silver-300) 38%, var(--metal-silver-500) 46%, var(--metal-silver-200) 57%, var(--metal-silver-50) 66%, var(--metal-silver-400) 79%, var(--metal-silver-200) 90%, var(--metal-silver-50));
  --metal-gold: conic-gradient(from 40deg, var(--metal-gold-100), var(--metal-gold-500) 16%, var(--metal-gold-300) 30%, var(--metal-gold-700) 46%, var(--metal-gold-300) 60%, var(--metal-gold-100) 70%, var(--metal-gold-500) 86%, var(--metal-gold-100));
  --metal-depth: radial-gradient(85% 85% at 32% 26%, rgb(var(--white-rgb) / .38), rgb(var(--white-rgb) / 0) 55%), radial-gradient(90% 90% at 70% 78%, rgb(var(--navy-rgb) / .12), rgb(var(--navy-rgb) / 0) 60%);
  /* The light that crosses the metal, and the glint it leaves on the rim. */
  --metal-sheen: linear-gradient(105deg, rgb(var(--white-rgb) / 0) 34%, rgb(var(--white-rgb) / .5) 46%, rgb(var(--white-rgb) / .95) 50%, rgb(var(--white-rgb) / .5) 54%, rgb(var(--white-rgb) / 0) 66%);
  --metal-glint: radial-gradient(circle, rgb(var(--white-rgb) / 1) 0 6%, rgb(var(--white-rgb) / .55) 14%, rgb(var(--white-rgb) / 0) 42%), linear-gradient(90deg, rgb(var(--white-rgb) / 0), rgb(var(--white-rgb) / .9) 50%, rgb(var(--white-rgb) / 0)) 50% 50% / 100% 5% no-repeat, linear-gradient(0deg, rgb(var(--white-rgb) / 0), rgb(var(--white-rgb) / .9) 50%, rgb(var(--white-rgb) / 0)) 50% 50% / 5% 100% no-repeat;
  /* The band melt: how tall the dissolve is, how far its thread reaches,
     how long one descent takes. A melting band reserves the dissolve as its
     own bottom padding, so the melt and the thread never run behind content. */
  --melt-height: clamp(180px, 20vw, 320px);
  /* The hero's own melt into the band after it (GN-2): long, so the ramp
     has room to be gentle. */
  --hero-melt: clamp(150px, 17vw, 280px);
  /* Where a hero melt's grain lives: the dark middle only, never the foot
     that meets the next ground; and how far below that ground the arcs
     take to surface (R2-3). */
  --melt-grain-span: linear-gradient(to bottom, rgb(var(--black-rgb) / 0) 0%, rgb(var(--black-rgb) / 1) 25%, rgb(var(--black-rgb) / 1) 45%, rgb(var(--black-rgb) / 0) 72%);
  --arcs-surface: clamp(160px, 16vw, 260px);
  --melt-thread-height: clamp(150px, 17vw, 270px);
  --melt-thread-cycle: 6s;
  /* The Ortak Akıl convergence (R2-2): one glide and its rest, and its own
     ease — a slow start and a long, settling arrival. The light's window
     is feathered on the same eased curve as the melts, so it has no edge. */
  --converge-cycle: 8.4s;
  --ease-converge: cubic-bezier(.45, 0, .2, 1);
  --lane-light-x: linear-gradient(90deg, rgb(var(--black-rgb) / 0) 22%, rgb(var(--black-rgb) / .41) 36%, rgb(var(--black-rgb) / .9) 45%, rgb(var(--black-rgb) / 1) 50%, rgb(var(--black-rgb) / .9) 55%, rgb(var(--black-rgb) / .41) 64%, rgb(var(--black-rgb) / 0) 78%);
  --lane-light-y: linear-gradient(180deg, rgb(var(--black-rgb) / 0) 22%, rgb(var(--black-rgb) / .41) 36%, rgb(var(--black-rgb) / .9) 45%, rgb(var(--black-rgb) / 1) 50%, rgb(var(--black-rgb) / .9) 55%, rgb(var(--black-rgb) / .41) 64%, rgb(var(--black-rgb) / 0) 78%);
  /* THE MELT RAMP. A melt paints a SOLID colour and varies only the mask
     alpha, on an eased curve, so the transition has no visible start. */
  --melt-ramp: linear-gradient(to bottom,
    rgb(var(--black-rgb) / 0) 0%, rgb(var(--black-rgb) / .018) 10%, rgb(var(--black-rgb) / .07) 20%,
    rgb(var(--black-rgb) / .157) 30%, rgb(var(--black-rgb) / .275) 40%, rgb(var(--black-rgb) / .41) 50%,
    rgb(var(--black-rgb) / .552) 60%, rgb(var(--black-rgb) / .688) 70%, rgb(var(--black-rgb) / .806) 80%,
    rgb(var(--black-rgb) / .9) 87%, rgb(var(--black-rgb) / .965) 94%, rgb(var(--black-rgb) / 1) 100%);
  /* The same eased curve for the masthead photograph: across its left
     edge on a wide screen, down its lower edge when it stacks. */
  --plate-mask-x: linear-gradient(90deg,
    rgb(var(--black-rgb) / 0) 0%, rgb(var(--black-rgb) / .018) 3%, rgb(var(--black-rgb) / .07) 6%,
    rgb(var(--black-rgb) / .157) 9%, rgb(var(--black-rgb) / .275) 12%, rgb(var(--black-rgb) / .41) 15%,
    rgb(var(--black-rgb) / .552) 18%, rgb(var(--black-rgb) / .688) 21%, rgb(var(--black-rgb) / .806) 24%,
    rgb(var(--black-rgb) / .9) 26%, rgb(var(--black-rgb) / .965) 28%, rgb(var(--black-rgb) / 1) 31%);
  --plate-mask-y: linear-gradient(180deg,
    rgb(var(--black-rgb) / 1) 58%, rgb(var(--black-rgb) / .965) 63%, rgb(var(--black-rgb) / .9) 68%,
    rgb(var(--black-rgb) / .806) 73%, rgb(var(--black-rgb) / .688) 78%, rgb(var(--black-rgb) / .552) 82%,
    rgb(var(--black-rgb) / .41) 86%, rgb(var(--black-rgb) / .275) 90%, rgb(var(--black-rgb) / .157) 93%,
    rgb(var(--black-rgb) / .07) 96%, rgb(var(--black-rgb) / .018) 98%, rgb(var(--black-rgb) / 0) 100%);
  /* Grain. Laid over a dark gradient it dithers the 8-bit steps that
     otherwise show as bands; on paper it stops a flat white reading as
     a screen. Always at the threshold of visibility. */
  /* THE ARCS (AS-3): faint concentric contours of the İDV mark's own
     curve, spreading from the top centre of a band. A texture of lines,
     not of paper, and sparse enough never to crowd the words over it. */
  --arcs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' viewBox='0 0 1600 1000' fill='none' stroke='%23143e6b' stroke-width='1'%3E%3Cg stroke-opacity='.11'%3E%3Ccircle cx='800' cy='-80' r='220'/%3E%3Ccircle cx='800' cy='-80' r='320'/%3E%3Ccircle cx='800' cy='-80' r='420'/%3E%3Ccircle cx='800' cy='-80' r='520'/%3E%3Ccircle cx='800' cy='-80' r='620'/%3E%3Ccircle cx='800' cy='-80' r='720'/%3E%3Ccircle cx='800' cy='-80' r='820'/%3E%3Ccircle cx='800' cy='-80' r='920'/%3E%3Ccircle cx='800' cy='-80' r='1020'/%3E%3C/g%3E%3Cg stroke='%23278e44' stroke-opacity='.13'%3E%3Ccircle cx='800' cy='-80' r='370'/%3E%3Ccircle cx='800' cy='-80' r='670'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");

  /* --- 10. Liquid glass — the mega panel and the mobile drawer
     only. Four parts or it is not this material: LENS (blurred,
     colour-graded backdrop), BEVEL (opposed inset highlights),
     SPECULAR RIM (a gradient stroke) and a TWO-PART SHADOW.
     Do not thin the tints: each is the lowest value at which
     brand-blue label text still clears AA through the lens over
     black (.64 leaves 4.7:1 for #143E6B). -------------------------- */
  --glass-lens: saturate(1.8) contrast(.85) brightness(1.12);
  --glass-blur: 24px;
  --glass-blur-panel: 40px;
  --glass-blur-scrim: 6px;
  --glass-tint: rgb(var(--white-rgb) / .64);
  --glass-tint-panel: rgb(252 252 250 / .76); /* neutral-25 */
  --glass-scrim: rgb(var(--navy-rgb) / .28);
  --glass-spec-lo: rgb(var(--white-rgb) / .5);
  --glass-sheen: rgb(var(--white-rgb) / .28);
  --glass-bevel-light: rgb(var(--white-rgb) / .5);
  --glass-edge: rgb(var(--brand-blue-rgb) / .12);
  --glass-shadow: 0 1px 2px rgb(var(--navy-rgb) / .06), 0 12px 34px rgb(var(--navy-rgb) / .1);
  --glass-shadow-panel: 0 1px 2px rgb(var(--navy-rgb) / .07), 0 26px 64px rgb(var(--navy-rgb) / .15);
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* The header is sticky, so an in-page anchor stops clear of it. */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100dvh; overflow-x: hidden; background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; font-kerning: normal; }
body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { border: 0; background: none; color: inherit; }
img { max-width: 100%; }
h1, h2, h3, .masthead__title { text-wrap: balance; }
/* No single word left alone on the last line of running text. */
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
/* The user-agent rule for [hidden] is (0,1,0), so any component rule that
   sets `display` defeats it — that once showed event-only fields on news
   entries. Kept !important deliberately. */
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
::selection { background: var(--green-100); color: var(--blue-950); }

/* FOCUS. One treatment, always visible, never removed per component. A
   dark ground swaps the ring colour through --focus-ring so it clears 3:1
   against navy as well as white. */
:root { --focus-ring: var(--color-focus); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.container { width: min(calc(100% - var(--gutter) * 2), var(--container)); margin-inline: auto; }
/* Off-screen until focused, shadow included: a shadow left at the top of
   the page read as a smudge in the corner. */
.skip-link { position: fixed; z-index: var(--z-skip); top: var(--space-4); left: var(--space-4); transform: translateY(calc(-100% - var(--space-8))); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: none; color: var(--blue-950); }
.skip-link:focus { transform: translateY(0); box-shadow: var(--elev-2); }

/* Emphasis inside a statement: the green phrase, never a family change. */
.accent { color: var(--accent-on-light); }
.accent--light { color: var(--accent-on-dark); }

/* The one arrow. It slides 4px toward its destination under the pointer
   and that is the only thing it ever does. */
.icon { width: var(--space-6); height: var(--space-6); flex: none; }

/* ============================================================
   TYPE ROLES (D1)

   Every font declaration on the public site is in this section and
   nowhere else. A component never sets its own family, size, weight,
   line height, tracking or case: it is listed under the ONE role it
   plays. Two things that play the same role therefore cannot look
   different, and tests/php/stylesheet.test.php fails if a rule
   outside this section declares a font property.

     display     serif 400  7xl  tight   the masthead
     title       serif 400  6xl  tight   a page's <h1>
     statement   serif 400  5xl  snug    slogans, the article title
     heading     serif 400  4xl  snug    every section title
     subheading  serif 400  2xl  heading EVERY card title and name
     title-sm    sans  600  lg   heading small titles, drawer rows
     lead        sans  400  lg   relaxed the sentence under a title
     body        sans  400  base relaxed running text
     small       sans  400  md   normal  card copy, secondary text
     caption     sans  500  xs   normal  dates, breadcrumbs, meta
     label       sans  700  2xs  heading UPPERCASE labels and tags
     ui          sans  600  sm   snug    menus, tabs, pagination
     action      sans  700  sm   snug    buttons, links, card actions
     figure      serif 400  figure       the founding year
     article     serif 400  lg   relaxed the body of an article

   Inline emphasis (strong, b, em) may change weight or style inside
   its role; nothing else may.
   ============================================================ */
body,
.prose, .section-head__note p, .committee-intro > p, .founding__text,
.empty-state p, .article-foot__place, .overture__hub-copy, .cta-band__note,
.pledge__text, .pledge__detail-note, .contact-info__note, .contact-form__note, .contact-channel__value,
.form-field input, .form-field textarea, .form-check label, .form-alert, .ff-control, .ff-choice__label, .ff-file__name, .ff-summary, .ff-kvkk__body, .ff-calendar select {
  font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); letter-spacing: normal; text-transform: none;
}
.masthead__title {
  font-family: var(--font-serif); font-size: var(--fs-7xl); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--ls-display);
}
.hero__title {
  font-family: var(--font-serif); font-size: var(--fs-6xl); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--ls-display);
}
.hero--article .hero__title, .overture__statement, .opener__statement, .section-head--display .section-head__title,
.cta-band--display .cta-band__title, .pledge__name, .card__initials, .person-profile__initials {
  font-family: var(--font-serif); font-size: var(--fs-5xl); font-weight: var(--fw-regular); line-height: var(--lh-snug); letter-spacing: var(--ls-title);
}
.section-head__title, .cta-band__title, .committee-intro__title, .contact-info__title, .legal-text__title,
.founding__title, .footer-statement, .card--chair .card__name,
.convergence__plane strong {
  font-family: var(--font-serif); font-size: var(--fs-4xl); font-weight: var(--fw-regular); line-height: var(--lh-snug); letter-spacing: var(--ls-title);
}
.card__title, .card__name, .quote, .pledge__statement, .pledge__detail-title,
.contact-form__title, .contact-social__title,
.card--person-compact .card__initials, .empty-state h2, .empty-state h3, .convergence__node strong,
.article-content h2, .ff-section__title, .ff-block__title, .ff-done__title {
  font-family: var(--font-serif); font-size: var(--fs-2xl); font-weight: var(--fw-regular); line-height: var(--lh-heading); letter-spacing: var(--ls-title);
}
 .article-content h3,
.mobile-nav__primary, .mobile-accordion__trigger {
  font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-heading); letter-spacing: var(--ls-ui);
}
.hero__lead, .overture__aside > p, .opener__body > p, .section-head--display .section-head__note p {
  font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); letter-spacing: normal;
}
.card__text, .card__list li, .card__role, .card__bio, .form-field__error, .convergence__node > span:last-child, .convergence__plane > span:last-child,
.site-footer__line, .footer-column__links > a, .footer-contact, .mega-panel__intro > p:not(.eyebrow), .mobile-nav__subnav a, .article-content table, .ff-error, .ff-calendar__day, .ff-block__period, .ff-section__note, .ff-closed p, .ff-done p {
  font-family: var(--font-sans); font-size: var(--fs-md); font-weight: var(--fw-regular); line-height: var(--lh-normal); letter-spacing: normal;
}
.breadcrumbs ol, .card__meta, .card__facts, .chip__count, .hero__meta, .form-field__optional, .contact-social__handle, .provenance p,
.section-head__note .archive-bar__count, .site-footer__bottom, .article-content figcaption, .mega-link__note, .ff-help, .ff-progress, .ff-calendar__dow, .ff-unit {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-normal); letter-spacing: normal;
}
.eyebrow, .tag, .card__badge, .card__eyebrow, .card__kind, .card__honorific, .founding__meta span, .footer-column h3,
.contact-channel__label, .medal__legend {
  font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.nav-item, .hero__nav a, .masthead__chapter, .chip, .form-field label, .contact-social__item,
.tabs a, .pagination a, .pagination span[aria-current], .pagination .pagination__gap, .preview-band, .ff-label, .ff-modal__title, .ff-modal__close, .ff-file__button, .ff-linkbtn, .ff-kvkk summary, .ff-repeat__head strong {
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-ui);
}
.button, .text-link, .card__action, .skip-link,
.nav-toggle, .mobile-nav__close {
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: normal;
}
.founding__year {
  font-family: var(--font-serif); font-size: var(--fs-figure); font-weight: var(--fw-regular); line-height: var(--lh-figure); letter-spacing: var(--ls-display);
}
.charter__text, .chronicle__text {
  font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); letter-spacing: normal;
}
.article-content, .jodit-wysiwyg.idv-article {
  font-family: var(--article-family); font-size: var(--article-size); font-weight: var(--fw-regular); line-height: var(--article-leading); letter-spacing: normal;
}
/* A quote is a touch larger than the text, never a headline. */
.article-content blockquote {
  font-family: var(--font-serif); font-size: var(--article-quote-size); font-style: italic; font-weight: var(--fw-regular); line-height: var(--article-quote-leading); letter-spacing: normal;
}
.article-content blockquote .quote-by {
  font-family: var(--font-sans); font-size: var(--article-by-size); font-style: normal; font-weight: var(--fw-semibold); line-height: var(--lh-normal); letter-spacing: normal;
}
/* Inline emphasis inside a role. */
.prose strong, .card__name strong, .article-content strong { font-weight: var(--fw-semibold); }
/* A person's family name is set in capitals on every person card, as the
   founders' register has always printed it (D4: one family, one hand).
   Case only; the stored name is unchanged. */
.card__name strong { text-transform: uppercase; }
.hero__meta code { font-family: var(--font-mono); }
/* END TYPE ROLES */

/* ============================================================
   THE HOVER LANGUAGE (D2, AS-9, AS-2)

   One response for everything that answers the pointer: cards,
   buttons, links, the header's items and the mega panel's items.
   Arriving, it waits --hover-delay and then takes --hover-in on
   --ease-hover; leaving, it does not wait and takes --hover-out.
   The components only say WHICH properties move; the timing is
   always this. Keyboard focus gets the same response as hover.

   Hover is declared inside (hover: hover) and (pointer: fine), so
   a tap never leaves a stuck state; focus is declared outside it.
   ============================================================ */
.button, .text-link, .nav-item, .nav-item::before, .icon, .nav-chevron, .chip,
.footer-column__links > a, .footer-social__item, .site-footer__bottom a {
  transition-duration: var(--hover-out);
  transition-timing-function: var(--ease-hover);
  transition-delay: 0s;
}
.button { transition-property: background-color, border-color, color, box-shadow; }
.text-link, .nav-item, .footer-column__links > a, .site-footer__bottom a { transition-property: color; }
.footer-social__item { transition-property: background-color, color; }
.chip { transition-property: background-color, border-color, color; }
.nav-item::before { transition-property: opacity, transform; }
.icon, .nav-chevron { transition-property: transform; }

:is(.button, .text-link, .nav-item, .chip, .footer-column__links > a, .footer-social__item, .site-footer__bottom a):focus-visible,
:is(.button, .text-link, .nav-item):focus-visible :is(.icon, .nav-chevron),
.nav-item:focus-visible::before {
  transition-duration: var(--hover-in);
  transition-delay: var(--hover-delay);
}
@media (hover: hover) and (pointer: fine) {
  :is(.button, .text-link, .nav-item, .chip, .footer-column__links > a, .footer-social__item, .site-footer__bottom a):hover,
  :is(.button, .text-link, .nav-item):hover :is(.icon, .nav-chevron),
  .nav-item:hover::before {
    transition-duration: var(--hover-in);
    transition-delay: var(--hover-delay);
  }
}

/* ============================================================
   CONTROLS

   Disabled is one look everywhere: half opacity, no pointer.
   ============================================================ */
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-3) var(--space-6); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; }
.button .icon { width: var(--space-5); height: var(--space-5); }
/* Fill versus outline carries the hierarchy, not a second colour. */
.button--primary { background: var(--brand-blue); color: var(--on-dark); }
.button--secondary { border-color: var(--color-hairline-strong); background: var(--color-surface); color: var(--brand-blue); }
.button--light { background: var(--neutral-0); color: var(--blue-950); }
.button--danger { border-color: var(--color-danger-line); background: var(--color-surface); color: var(--color-danger); }
.button:disabled, .button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* The third level, and the one the site reaches for most: a label and
   the arrow, no container. */
.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-link); }
.text-link .icon { width: var(--space-5); height: var(--space-5); }
.text-link--inverse { color: var(--on-dark); }

/* The responses. */
.button:focus-visible, .text-link:focus-visible { outline-offset: 3px; }
.button--primary:focus-visible { background: var(--green-700); }
.button--secondary:focus-visible { border-color: var(--green-500); background: var(--green-50); color: var(--green-800); }
.button--light:focus-visible { background: var(--green-100); color: var(--green-900); }
.button--danger:focus-visible { background: var(--color-danger-bg); }
.text-link:focus-visible { color: var(--color-link-hover); }
.text-link--inverse:focus-visible { color: var(--accent-on-dark); }
:is(.button, .text-link):focus-visible .icon { transform: translateX(var(--space-1)); }

@media (hover: hover) and (pointer: fine) {
  .button--primary:not(:disabled):hover { background: var(--green-700); }
  .button--secondary:not(:disabled):hover { border-color: var(--green-500); background: var(--green-50); color: var(--green-800); }
  .button--light:not(:disabled):hover { background: var(--green-100); color: var(--green-900); }
  .button--danger:not(:disabled):hover { background: var(--color-danger-bg); }
  .text-link:hover { color: var(--color-link-hover); }
  .text-link--inverse:hover { color: var(--accent-on-dark); }
  .button:not(:disabled):hover .icon, .text-link:hover .icon { transform: translateX(var(--space-1)); }
}

/* ============================================================
   HEADER AND NAVIGATION (AS-2)

   The bar is an opaque surface with one hairline under it. It is
   painted by .site-header::before so that the mega panel — a child
   of the header — can sit BEHIND the bar and slide down out from
   under it: opening the panel reads as the header growing, in its
   own colour, with rounded lower corners. Only transform and
   opacity move.

   Stacking inside the header: panel (1) · bar (2) · the bar's
   items (3). None of the wrappers between them is positioned, so
   all three share the header's stacking context.
   ============================================================ */
.site-header { --header-bg: var(--neutral-25); height: var(--header-height); position: sticky; z-index: var(--z-dropdown); top: 0; }
.site-header::before, .site-header::after { position: absolute; inset: 0 0 auto; height: var(--header-height); content: ""; pointer-events: none; }
.site-header::before { z-index: 2; background: var(--header-bg); box-shadow: inset 0 -1px 0 var(--color-hairline); transition: box-shadow var(--panel-close) var(--ease-panel); }
/* Once the page has scrolled, a soft shadow separates the bar from the
   content under it. Its opacity is all that changes. */
.site-header::after { z-index: 1; box-shadow: 0 10px 28px -20px rgb(var(--navy-rgb) / .55); opacity: 0; transition: opacity var(--motion-slow) var(--ease-out); }
.site-header.is-scrolled::after { opacity: 1; }
.site-header.is-panel-open::before { box-shadow: inset 0 -1px 0 transparent; }
.site-header.is-panel-open::after { opacity: 0; }
.site-header__inner { height: var(--header-height); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.site-header__inner > .logo, .desktop-nav > .nav-item, .nav-item--trigger, .header-contact, .nav-toggle { position: relative; z-index: 3; }
.logo { width: 164px; min-height: 44px; display: inline-flex; align-items: center; justify-self: start; flex: none; }
.logo img { width: 100%; height: auto; display: block; }
.logo--compact { width: 72px; }

.desktop-nav { height: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; justify-self: center; gap: var(--space-1); }
.mega-nav-item { height: 100%; display: flex; align-items: center; }

/* THE NAV ITEM — the bar's links, the Kurumsal trigger and every link in
   the mega panel. One definition: same type role (ui), same colour, and
   one hover response: a soft tinted plate fades in behind the label as
   it turns green. The page you are on keeps a green plate. */
.nav-item { --nav-plate: rgb(var(--brand-blue-rgb) / .07); position: relative; isolation: isolate; min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--brand-blue); white-space: nowrap; cursor: pointer; }
.nav-item::before { position: absolute; z-index: -1; inset: 0; border-radius: inherit; content: ""; background: var(--nav-plate); opacity: 0; transform: scale(.92); }
.nav-item.is-active { --nav-plate: var(--green-50); color: var(--green-800); }
.nav-item.is-active::before, .nav-item--trigger.is-open::before { opacity: 1; transform: none; }
.nav-item--trigger.is-open { color: var(--green-800); }
.nav-item:focus-visible { color: var(--green-800); outline-offset: 2px; }
.nav-item:focus-visible::before { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover { color: var(--green-800); }
  .nav-item:hover::before { opacity: 1; transform: none; }
}
.nav-chevron { width: 7px; height: 7px; display: block; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transform-origin: center; }
.nav-item--trigger.is-open .nav-chevron { transform: rotate(225deg) translate(-1px, -1px); }

/* Settles the page behind the open panel: a sibling just under the
   header's layer, so it dims the page without dimming the header. */
.mega-scrim { position: fixed; z-index: calc(var(--z-dropdown) - 1); inset: var(--header-height) 0 0; background: var(--glass-scrim); backdrop-filter: blur(var(--glass-blur-scrim)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur-scrim)) saturate(1.2); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--panel-close) var(--ease-panel), visibility 0s linear var(--panel-close); }
.mega-scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--panel-open) var(--ease-panel), visibility 0s; }

/* THE MEGA PANEL. Full-bleed, the header's own surface continued: same
   colour, no seam, the lower corners rounded. At rest it waits under
   the bar, translated up by its own height. */
.mega-panel { position: absolute; z-index: 1; top: 100%; right: 0; left: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--header-bg); box-shadow: 0 24px 48px -28px rgb(var(--navy-rgb) / .45); transform: translateY(-100%); visibility: hidden; pointer-events: none; transition: transform var(--panel-close) var(--ease-panel), visibility 0s linear var(--panel-close); }
.mega-panel.is-open { transform: none; visibility: visible; pointer-events: auto; transition: transform var(--panel-open) var(--ease-panel), visibility 0s; }
.mega-panel__content { display: grid; grid-template-columns: minmax(220px, 3fr) minmax(0, 9fr); align-items: start; gap: var(--space-12); padding-block: var(--space-8) var(--space-10); opacity: 0; transform: translateY(calc(var(--space-2) * -1)); transition: opacity var(--panel-close) var(--ease-panel), transform var(--panel-close) var(--ease-panel); }
.mega-panel.is-open .mega-panel__content { opacity: 1; transform: none; transition: opacity var(--panel-open) var(--ease-panel) var(--motion-fast), transform var(--panel-open) var(--ease-panel) var(--motion-fast); }
.mega-panel__intro { display: grid; justify-items: start; gap: var(--space-3); padding-top: var(--space-2); }
.mega-panel__intro .eyebrow { color: var(--accent-on-light); }
.mega-panel__intro > p:not(.eyebrow) { max-width: 30ch; color: var(--color-muted); }
.mega-panel__intro .mega-link { margin-left: calc(var(--space-3) * -1); }
.mega-panel__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); list-style: none; }
/* A mega-panel item is a nav item that also carries the page's note. */
.mega-link { width: 100%; justify-content: space-between; gap: var(--space-4); padding: var(--space-3); white-space: normal; }
.mega-link__text { display: grid; gap: var(--space-1); }
.mega-link__note { color: var(--color-muted); }
.mega-link .icon { width: var(--space-5); height: var(--space-5); flex: none; opacity: 0; transform: translateX(calc(var(--space-2) * -1)); transition-property: transform, opacity; }
.mega-link.is-active .icon, .mega-link:focus-visible .icon { opacity: 1; transform: none; }
.mega-link--all { width: auto; justify-content: flex-start; }
.mega-link--all .icon { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .mega-link:hover .icon { opacity: 1; transform: none; }
  .mega-link--all:hover .icon { transform: translateX(var(--space-1)); }
}

/* The contact button: the bar's one filled control. */
.header-contact { min-height: 44px; justify-self: end; gap: var(--space-2); padding: var(--space-2) var(--space-5); white-space: nowrap; }
.header-contact .icon { width: var(--space-4); height: var(--space-4); }
.nav-toggle, .mobile-nav { display: none; }

/* ============================================================
   FOOTER (AS-12)

   No rule runs across it — spacing separates its groups. Where it
   fits in the window it is REVEALED: pinned under the page, which
   slides off it with rounded lower corners (html.has-footer-reveal,
   set by site.js only when the footer's real height fits).
   ============================================================ */
.site-footer { --focus-ring: var(--color-focus-on-dark); position: relative; padding-top: var(--space-16); background: var(--blue-950); color: var(--on-dark); }
.site-footer .logo { width: 188px; }
.site-footer__lead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding-bottom: var(--space-12); }
.site-footer__line { max-width: 30ch; color: var(--on-dark-muted); text-align: right; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-10) var(--space-8); padding-bottom: var(--space-12); }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.footer-column h3 { color: var(--accent-on-dark); }
/* The link groups are <details open>. On desktop the summary is only the
   heading: nothing suggests it collapses, because at this width it never
   does. site.js closes them below 768px. */
.footer-column--links { display: block; }
.footer-column__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding-top: var(--space-4); }
/* 32px rows for a mouse (above the 24px minimum target), 44px where the
   pointer is coarse. */
.footer-column__links > a, .footer-contact { min-height: 32px; display: flex; align-items: center; color: var(--on-dark-soft); }
.footer-column__links > a:focus-visible { color: var(--on-dark); }
.footer-contact { align-items: flex-start; gap: var(--space-3); padding-block: var(--space-1); }
.footer-contact .ui-icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--accent-on-dark); }
.footer-column--statement { padding-right: var(--space-16); }
.footer-statement { max-width: 22ch; margin-bottom: var(--space-6); }
.footer-social { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); list-style: none; }
.footer-social__item { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--fill-on-dark); color: var(--on-dark); }
.footer-social__item .ui-icon { width: 20px; height: 20px; }
.footer-social__item:focus-visible { background: var(--fill-on-dark-strong); color: var(--accent-on-dark); }
.site-footer__bottom { min-height: var(--space-16); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-6); color: var(--on-dark-muted); }
.site-footer__bottom a { min-height: 32px; display: inline-flex; align-items: center; color: var(--on-dark-soft); }
.site-footer__legal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.site-footer__bottom a:focus-visible { color: var(--on-dark); }
@media (pointer: coarse) {
  .footer-column__links > a, .site-footer__bottom a { min-height: 44px; }
}
@media (hover: hover) and (pointer: fine) {
  .footer-column__links > a:hover, .site-footer__bottom a:hover { color: var(--on-dark); }
  a.footer-social__item:hover { background: var(--fill-on-dark-strong); color: var(--accent-on-dark); }
}

/* THE REVEAL. The page is a sheet over the footer: opaque, lifted, its
   lower corners rounded; the footer is pinned to the window's bottom
   under it and uncovered as the sheet scrolls away. */
/* The sheet's own ground stops one radius short of its lower edge: every
   page ends on a band that paints its own ground, and a ground left
   under that band would bleed through the anti-aliased curve as a thin
   light line (R1-1). */
.has-footer-reveal #main-content { --sheet-radius: var(--radius-xl); position: relative; z-index: 1; overflow: clip; border-radius: 0 0 var(--sheet-radius) var(--sheet-radius); background: linear-gradient(var(--color-bg) 0 0) top / 100% calc(100% - var(--sheet-radius)) no-repeat; box-shadow: 0 34px 60px -34px rgb(var(--black-rgb) / .55); }
/* The footer starts one radius higher, under the sheet's rounded corners,
   so what shows behind them is always the footer's own colour, never the
   page's (R1-1). The padding gives the radius back. */
.has-footer-reveal .site-footer { position: sticky; z-index: 0; bottom: 0; margin-top: calc(var(--radius-xl) * -1); padding-top: calc(var(--space-16) + var(--radius-xl)); }

/* ============================================================
   RESPONSIVE CHROME

   Breakpoints, site-wide: 600 · 768 · 1024 · 1160 (the navigation
   switches to the drawer) · 1280. Media queries cannot read custom
   properties, so these five numbers are the token.
   ============================================================ */
@media (max-width: 1279px) {
  :root { --gutter: var(--space-8); }
  .site-header .logo { width: 148px; }
  .desktop-nav { gap: 0; }
  .nav-item { padding-inline: var(--space-2); }
  .header-contact { padding-inline: var(--space-4); }
  .mega-panel__content { gap: var(--space-8); }
}
@media (max-width: 1023px) {
  /* The statement takes its own row above the three link groups, instead of
     a 250px column that breaks it into five lines. */
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-column--statement { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 1159px) {
  :root { --header-height: 76px; --gutter: var(--space-6); }
  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-header .logo { width: 156px; }
  .desktop-nav, .header-contact, .mega-scrim { display: none; }
  .nav-toggle { width: 48px; height: 48px; display: grid; place-items: center; justify-self: end; grid-column: 2; margin-right: calc(var(--space-3) * -1); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--brand-blue); cursor: pointer; }
  .nav-toggle:focus-visible { color: var(--green-700); }
  /* Three lines, the middle one drawn by the element itself. */
  .nav-toggle__lines, .nav-toggle__lines::before, .nav-toggle__lines::after { width: var(--space-6); height: 2px; display: block; border-radius: 1px; content: ""; background: currentColor; }
  .nav-toggle__lines { position: relative; }
  .nav-toggle__lines::before, .nav-toggle__lines::after { position: absolute; left: 0; }
  .nav-toggle__lines::before { top: calc(var(--space-2) * -1 - 1px); }
  .nav-toggle__lines::after { top: calc(var(--space-2) + 1px); }
  /* THE DRAWER: the header's surface over the whole window, sliding in
     from the right. No rule down its side and none beside its rows. */
  .mobile-nav { width: 100%; height: 100dvh; position: fixed; z-index: var(--z-overlay); inset: 0; display: block; padding-inline: var(--space-6); background: var(--neutral-25); color: var(--blue-950); opacity: 0; transform: translateX(var(--space-10)); visibility: hidden; transition: transform var(--panel-close) var(--ease-panel), opacity var(--panel-close) var(--ease-panel), visibility 0s linear var(--panel-close); }
  .mobile-nav.is-open { opacity: 1; transform: none; visibility: visible; transition: transform var(--panel-open) var(--ease-panel), opacity var(--panel-open) var(--ease-panel), visibility 0s; }
  .mobile-nav__top { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; box-shadow: inset 0 -1px 0 var(--color-hairline); }
  .mobile-nav__top .logo { width: 156px; min-height: 44px; }
  .mobile-nav__close { width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; margin-right: calc(var(--space-3) * -1); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--brand-blue); cursor: pointer; }
  .mobile-nav__close:focus-visible { color: var(--green-700); }
  .mobile-nav__close i { width: var(--space-5); height: var(--space-5); display: block; position: relative; }
  .mobile-nav__close i::before, .mobile-nav__close i::after { width: var(--space-5); height: 2px; position: absolute; top: 50%; left: 0; content: ""; background: currentColor; transform: rotate(45deg); }
  .mobile-nav__close i::after { transform: rotate(-45deg); }
  .mobile-nav__body { height: calc(100% - var(--header-height)); display: grid; align-content: start; gap: var(--space-1); overflow-y: auto; overscroll-behavior: contain; padding-block: var(--space-4) max(var(--space-10), env(safe-area-inset-bottom)); }
  /* A drawer row: the same plate as a desktop nav item marks the page you
     are on — never a bar down its side. */
  .mobile-nav__primary, .mobile-accordion__trigger { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-inline: var(--space-4); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--brand-blue); text-align: left; cursor: pointer; }
  .mobile-nav__primary:focus-visible, .mobile-accordion__trigger:focus-visible { color: var(--green-800); }
  .mobile-nav__primary.is-active, .mobile-accordion__trigger.is-active { background: var(--green-50); color: var(--green-800); }
  .mobile-nav__primary .icon { width: var(--space-5); height: var(--space-5); }
  .mobile-accordion__trigger .nav-chevron { margin-right: var(--space-1); }
  .mobile-accordion__trigger.is-open .nav-chevron { transform: rotate(225deg) translate(-1px, -1px); }
  .mobile-nav__subnav { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--panel-close) var(--ease-panel), opacity var(--panel-close) var(--ease-panel); }
  .mobile-nav__subnav.is-open { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows var(--panel-open) var(--ease-panel), opacity var(--panel-open) var(--ease-panel); }
  .mobile-nav__subnav-inner { min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding-left: var(--space-6); }
  .mobile-nav__subnav a { min-height: 48px; display: flex; align-items: center; padding-inline: var(--space-3); border-radius: var(--radius-sm); color: var(--blue-700); }
  .mobile-nav__subnav a:focus-visible, .mobile-nav__subnav a.is-active { color: var(--green-800); }
  .mobile-nav__subnav a.is-active { background: var(--green-50); }
  @media (hover: hover) and (pointer: fine) {
    .nav-toggle:hover, .mobile-nav__close:hover, .mobile-nav__subnav a:hover { color: var(--green-700); }
    .mobile-nav__primary:hover, .mobile-accordion__trigger:hover { color: var(--green-800); }
  }
}
@media (max-width: 767px) {
  :root { --header-height: 68px; --gutter: var(--space-4); }
  .site-header .logo { width: 140px; }
  .mobile-nav { padding-inline: var(--space-4); }
  .mobile-nav__top .logo { width: 140px; }
  /* The phone footer is compact (owner, 2026-10-07): about 750px at 390px,
     every row still a 44px target. */
  .site-footer { padding-top: var(--space-6); }
  .site-footer__lead { flex-direction: row; align-items: center; gap: var(--space-4); padding-bottom: var(--space-5); }
  .site-footer__lead .logo { width: 124px; flex: none; }
  .site-footer__line { text-align: left; }
  /* The link groups stay open (owner, 2026-10-06): Kurumsal and Keşfedin
     side by side, İletişim under them across the row. */
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); padding-bottom: var(--space-4); }
  .footer-column--statement, .footer-column--contact { grid-column: 1 / -1; }
  /* The contact form is one tap away on the button above: on a phone the
     same destination is not offered twice. */
  .footer-column--contact .footer-column__links > a:last-child { display: none; }
  .footer-column--statement { margin-bottom: 0; padding-right: 0; }
  .footer-statement { margin-bottom: var(--space-4); }
  .footer-social { margin-top: var(--space-3); }
  .footer-column__links { gap: 0; padding-top: var(--space-1); }
  .footer-column__links > a { min-height: 44px; }
  .footer-contact { min-height: 44px; align-items: center; padding-block: 0; }
  .footer-contact .ui-icon { margin-top: 0; }
  .site-footer__bottom { min-height: 0; justify-content: flex-start; gap: 0 var(--space-4); padding-block: 0 var(--space-3); }
  .has-footer-reveal #main-content { --sheet-radius: var(--radius-lg); }
  .has-footer-reveal .site-footer { margin-top: calc(var(--radius-lg) * -1); padding-top: calc(var(--space-10) + var(--radius-lg)); }
}

/* Without backdrop-filter, or when the visitor asks for less
   transparency, the glass becomes an opaque surface of the same colour. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root { --glass-tint: var(--neutral-0); --glass-tint-panel: var(--neutral-25); --glass-scrim: rgb(var(--navy-rgb) / .42); --glass-sheen: rgb(var(--white-rgb) / 0); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-tint: var(--neutral-0); --glass-tint-panel: var(--neutral-25); --glass-scrim: rgb(var(--navy-rgb) / .52); --glass-sheen: rgb(var(--white-rgb) / 0); }
  .mega-scrim, .mega-panel, .mobile-nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { scroll-behavior: auto !important; transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
}