@charset "UTF-8";
/*!
 * Matyol İnşaat — Kurumsal Web Sitesi
 * Tasarım sistemi ve bileşen stilleri
 *
 * @author    Dursun Yartaşı <dursunyartasi@gmail.com>
 * @copyright 2026 Dijivo Reklam Ajansı
 *
 * NOT: Tüm yön bağımlı özellikler logical property olarak yazılmıştır
 * (margin-inline, inset-inline, text-align:start). Bu sayede Arapça (RTL)
 * sürüm ayrı bir CSS dosyası gerektirmeden doğru çalışır.
 */

/* ==================================================================== *
 * FONTLAR — kendi sunucumuzda barındırılır
 *
 * Üçüncü taraf font CDN'i kullanılmaz: ek origin, ek DNS/TLS turu ve
 * KVKK açısından ziyaretçi IP'sinin dışarı gitmesi anlamına gelir.
 *
 * Archivo değişken font olarak alındı; ağırlık (400-800) ve GENİŞLİK
 * (78-100) eksenleri korundu. Sıkıştırılmış başlık görünümü ayrı bir
 * font dosyası indirmeden bu eksenden geliyor.
 *
 * unicode-range sayesinde Arapça sayfada Latin karakterler Archivo'dan,
 * Arapça karakterler Cairo'dan gelir; gereksiz dosya inmez.
 * ==================================================================== */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-tr.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-stretch: 78% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-0101, U+011E-011F, U+0130-0131,
                 U+015E-015F, U+0152-0153, U+2013-2014, U+2018-201A,
                 U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+20BA, U+2122;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-tr-italic.woff2") format("woff2-variations");
  font-weight: 600 800;
  font-stretch: 78% 100%;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-0101, U+011E-011F, U+0130-0131,
                 U+015E-015F, U+2013-2014, U+2018-201A, U+201C-201E;
}
@font-face {
  font-family: "Cairo";
  src: url("/assets/fonts/cairo-ar.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF,
                 U+FE70-FEFF, U+200C-200F;
}
/* Yedek font metrikleri — swap anındaki kaymayı sıfıra yaklaştırır */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 96%;
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@layer reset, tokens, base, layout, components, utilities;

/* ==================================================================== *
 * RESET
 * ==================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; tab-size: 4; }
  body { min-block-size: 100svh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  :where(a) { color: inherit; }
}

/* ==================================================================== *
 * TOKENS
 * ==================================================================== */
@layer tokens {
  :root {
    /* Nötr ölçek — beton → çelik */
    --n-0:#FFFFFF; --n-25:#FAFAF8; --n-50:#F4F4F1; --n-100:#E9E9E4;
    --n-200:#D8D8D2; --n-300:#BFBFB8; --n-400:#9C9C95; --n-500:#7B7C7A;
    --n-600:#5A5C60; --n-700:#3D3F44; --n-800:#25282E; --n-900:#15171B;
    --n-950:#0B0C0E;

    /* Marka kırmızısı — kaynağı firmanın KURUMSAL SUNUMUNDAKİ VEKTÖR LOGO
       (Illustrator PDF, 300dpi ölçüm): #FF1717, ton 0°. Önceki #E83731
       Instagram sıkıştırmasından ölçülmüştü ve turuncuya kaymıştı.
       #FF1717 beyaz üzerinde 3.90:1 → yalnız büyük öğelerde; metin ve
       buton kontrastları alttaki koyu adımlarla sağlanır (ölçüldü). */
    --r-50:#FFEBEB;  --r-100:#FFD6D6; --r-200:#FFAFAF; --r-300:#FF7A7A;
    --r-400:#FF5454; --r-500:#FF4747; --r-600:#FF1717; --r-650:#E8120F;
    --r-700:#D31110; --r-800:#A00E0C; --r-900:#750A09;

    --success-400:#2FBF6E; --success-700:#166E3E;
    --warning-400:#F2A93B; --warning-800:#7A4B00;
    --hivis-500:#FFCC00;

    /* Tipografi */
    --font-body: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: var(--font-body);
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

    --step--2: clamp(0.75rem, 0.729rem + 0.093vw, 0.8125rem);
    --step--1: clamp(0.875rem, 0.854rem + 0.093vw, 0.9375rem);
    --step-0:  clamp(1rem, 0.979rem + 0.093vw, 1.0625rem);
    --step-1:  clamp(1.125rem, 1.042rem + 0.370vw, 1.375rem);
    --step-2:  clamp(1.375rem, 1.208rem + 0.741vw, 1.875rem);
    --step-3:  clamp(1.625rem, 1.333rem + 1.296vw, 2.5rem);
    --step-4:  clamp(2rem, 1.542rem + 2.037vw, 3.375rem);
    --step-5:  clamp(2.5rem, 1.833rem + 2.963vw, 4.5rem);
    --step-6:  clamp(3rem, 2rem + 4.444vw, 5.5rem);

    --lh-tight:1.04; --lh-heading:1.14; --lh-snug:1.32; --lh-body:1.62;
    --ls-display:-0.022em; --ls-heading:-0.014em; --ls-label:0.08em; --ls-eyebrow:0.14em;
    --measure:68ch; --measure-narrow:46ch;

    /* Boşluk */
    --space-1:.25rem; --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
    --space-5:1.25rem;--space-6:1.5rem; --space-8:2rem;   --space-10:2.5rem;
    --space-12:3rem;  --space-16:4rem;  --space-20:5rem;  --space-24:6rem;
    --space-section: clamp(3.5rem, 1.667rem + 8.148vw, 8rem);
    --space-gutter:  clamp(1.25rem, 0.833rem + 1.852vw, 2.5rem);
    --space-gap:     clamp(1.25rem, 0.9rem + 1.6vw, 2rem);

    /* Yarıçap ölçeği — markanın endüstriyel karakterini korurken geometriyi
       yumuşatır. Sıfır yarıçap yalnızca tam genişlik şeritlerde kalır. */
    --radius-0:0;
    --radius-xs:8px;    /* rozet, küçük kontrol */
    --radius-sm:12px;   /* buton, form alanı, ikon buton */
    --radius-md:16px;   /* kart, logo plakası */
    --radius-lg:22px;   /* büyük panel, açılır menü */
    --radius-pill:999px;
    --bw-1:1px; --bw-2:2px; --bw-accent:4px;

    --header-h:5.25rem; --header-h-compact:4rem;
    --container:80rem; --container-text:44rem;

    --dur-fast:140ms; --dur-base:200ms; --dur-slow:320ms;
    --ease-out:cubic-bezier(.22,1,.36,1);
    --ease-mech:cubic-bezier(.4,0,.2,1);

    --z-fab:60; --z-cookie:90; --z-header:100; --z-dialog:200;
  }

  /* ---- Koyu tema (varsayılan — marka kararı) ---- */
  :root {
    /* Katmanlı gölgeler — tek sert gölge yerine yakın + uzak çift katman */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .24);
    --shadow-md: 0 2px 4px rgb(0 0 0 / .18), 0 8px 20px rgb(0 0 0 / .22);
    --shadow-lg: 0 4px 8px rgb(0 0 0 / .20), 0 20px 48px rgb(0 0 0 / .30);
    --shadow-accent: 0 6px 20px color-mix(in srgb, var(--r-600) 34%, transparent);
    /* Koyu yüzeyin üst kenarına ince ışık — derinlik hissi verir */
    --edge-light: inset 0 1px 0 rgb(255 255 255 / .06);
  }

  :root, [data-theme="dark"] {
    color-scheme: dark;
    --color-bg:var(--n-950);
    --color-surface:var(--n-900);
    --color-surface-2:var(--n-800);
    --color-text:var(--n-100);          /* 16.07:1 */
    --color-text-muted:var(--n-300);    /* 10.59:1 */
    --color-text-subtle:var(--n-400);   /*  7.08:1 */
    --color-border:#2E3238;
    --color-border-strong:var(--n-700);
    --color-border-field:var(--n-500);  /*  4.6:1  */
    --color-accent:var(--r-500);        /* bağlantı/vurgu — koyu zeminde 5.27:1 ✓AA */
    --color-accent-solid:var(--r-700);  /* dolgu buton — beyaz metin 5.44:1 ✓AA */
    --color-accent-hover:var(--r-650);  /* hover — beyaz metin 4.64:1 ✓AA */
    --color-on-accent:var(--n-0);
    --color-danger:var(--r-400);
    --color-danger-bg:#2A1114;
    --color-success:var(--success-400);
    --color-scrim:11 12 14;
    --focus-inner:var(--hivis-500);
    --focus-outer:var(--n-950);
    --logo-plate:var(--n-0);
  }

  /* ---- Açık tema ---- */
  [data-theme="light"] {
    color-scheme: light;
    --edge-light: inset 0 1px 0 rgb(255 255 255 / .9);
    --shadow-sm: 0 1px 2px rgb(16 18 22 / .06);
    --shadow-md: 0 2px 4px rgb(16 18 22 / .06), 0 8px 20px rgb(16 18 22 / .08);
    --shadow-lg: 0 4px 8px rgb(16 18 22 / .07), 0 20px 48px rgb(16 18 22 / .12);
    --color-bg:var(--n-0);
    --color-surface:var(--n-50);
    --color-surface-2:var(--n-100);
    --color-text:var(--n-800);          /* 14.77:1 */
    --color-text-muted:var(--n-600);    /*  6.70:1 */
    --color-text-subtle:var(--n-600);
    --color-border:var(--n-200);
    --color-border-strong:var(--n-300);
    --color-border-field:var(--n-500);
    --color-accent:var(--r-800);        /* açık zeminde 8.19:1 ✓AAA */
    --color-accent-solid:var(--r-800);  /* beyaz metin 8.19:1 ✓AAA */
    --color-accent-hover:var(--r-900);  /* beyaz metin 11.64:1 ✓AAA */
    --color-on-accent:var(--n-0);
    --color-danger:var(--r-800);
    --color-danger-bg:var(--r-50);
    --color-success:var(--success-700);
    --color-scrim:11 12 14;
    --focus-inner:var(--n-950);
    --focus-outer:var(--n-0);
    --logo-plate:var(--n-0);
  }

  /* ---- Arapça: font, satır yüksekliği, yasaklar ---- */
  :root:lang(ar), [lang="ar"] {
    --font-body:"Cairo", "Archivo", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
    --font-display:var(--font-body);
    --lh-body:1.85; --lh-snug:1.55; --lh-heading:1.32; --lh-tight:1.22;
    --ls-display:0; --ls-heading:0; --ls-label:0; --ls-eyebrow:0;
    --measure:60ch;
  }
  /* Arapça'da italik ve büyük harf dönüşümü YOKTUR — sahte eğim/kapital yasak */
  [lang="ar"] * { font-style: normal !important; text-transform: none !important; font-synthesis: none; }
  [lang="ar"] p, [lang="ar"] li { text-align: start; }

  @media print { :root { color-scheme: light; } }
}

/* ==================================================================== *
 * BASE
 * ==================================================================== */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: var(--lh-body);
    color: var(--color-text);
    background: var(--color-bg);
    font-weight: 400;
  }

  h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 800; line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; }
  h1 { font-size: var(--step-5); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
  h2 { font-size: var(--step-4); }
  h3 { font-size: var(--step-2); line-height: var(--lh-snug); }
  h4 { font-size: var(--step-1); line-height: var(--lh-snug); }
  p  { text-wrap: pretty; }

  a { color: var(--color-accent); text-underline-offset: .18em; text-decoration-thickness: from-font; }
  a:hover { color: var(--color-accent-hover); }

  /* Odak: çift katmanlı halka — her zeminde en az bir katman ≥3:1 verir */
  :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
    outline: 3px solid var(--focus-inner);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--focus-outer);
    border-radius: var(--radius-xs);
  }
  @media (forced-colors: active) {
    :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  }

  /* Yapışkan başlık odaklanan öğeyi örtmesin (WCAG 2.4.11) */
  html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + 1rem); }
  [id] { scroll-margin-block-start: calc(var(--header-h) + 1rem); }

  ::selection { background: var(--color-accent-solid); color: var(--color-on-accent); }

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

/* ==================================================================== *
 * LAYOUT
 * ==================================================================== */
@layer layout {
  .container { inline-size: min(100% - (var(--space-gutter) * 2), var(--container)); margin-inline: auto; }
  .container--text { inline-size: min(100% - (var(--space-gutter) * 2), var(--container-text)); margin-inline: auto; }

  .section { padding-block: var(--space-section); }
  .section--tight { padding-block: calc(var(--space-section) * .6); }
  .section--surface { background: var(--color-surface); }
  .section--surface-2 { background: var(--color-surface-2); }

  .stack > * + * { margin-block-start: var(--flow, var(--space-4)); }
  .grid { display: grid; gap: var(--space-gap); }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

  .cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

  .skip-link {
    position: absolute; inset-inline-start: var(--space-4); inset-block-start: -100%;
    z-index: 999; padding: var(--space-3) var(--space-5);
    background: var(--color-accent-solid); color: var(--color-on-accent);
    font-weight: 700; text-decoration: none;
  }
  .skip-link:focus { inset-block-start: var(--space-4); }

  .sr-only {
    position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* ==================================================================== *
 * COMPONENTS
 * ==================================================================== */
@layer components {

  /* ---------- Bölüm başlığı ---------- */
  .section-head { max-inline-size: var(--measure); margin-block-end: var(--space-12); }
  .eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-3);
    font-size: var(--step--1); font-weight: 700;
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--color-accent); margin-block-end: var(--space-4);
  }
  .eyebrow::before {
    content: ""; inline-size: 2rem; block-size: var(--bw-accent);
    background: var(--color-accent-solid); flex: none;
  }
  [lang="ar"] .eyebrow { text-transform: none; }
  .section-lead { font-size: var(--step-1); color: var(--color-text-muted); margin-block-start: var(--space-4); max-inline-size: var(--measure); }

  /* ---------- Butonlar ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-block-size: 3rem; padding-inline: var(--space-6); padding-block: var(--space-3);
    font-weight: 700; font-size: var(--step-0); line-height: 1.2;
    border: var(--bw-2) solid transparent; border-radius: var(--radius-sm);
    text-decoration: none; cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-mech),
                border-color var(--dur-base) var(--ease-mech),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                color var(--dur-base) var(--ease-mech);
  }
  .btn:active { transform: translateY(1px); }
  @media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
  .btn--primary {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--color-accent-solid) 100%, #fff 8%),
      var(--color-accent-solid));
    color: var(--color-on-accent);
    box-shadow: var(--shadow-accent), var(--edge-light);
  }
  .btn--primary:hover {
    background: var(--color-accent-hover); color: var(--color-on-accent);
    box-shadow: 0 8px 26px color-mix(in srgb, var(--r-600) 44%, transparent), var(--edge-light);
  }
  .btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border-field); }
  .btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); background: transparent; }
  /* Fotoğraf üzerindeki hayalet buton: açık gökyüzünde beyaz metin
     kayboluyordu. Yarı saydam koyu zemin her fotoğrafta okunurluk verir. */
  .hero .btn--ghost, .slide .btn--ghost {
    background: rgb(0 0 0 / .38);
    border-color: rgb(255 255 255 / .55);
    color: #fff;
    backdrop-filter: blur(4px);
  }
  .hero .btn--ghost:hover, .slide .btn--ghost:hover {
    background: rgb(0 0 0 / .55); border-color: #fff; color: #fff;
  }

  .btn--lg { min-block-size: 3.5rem; padding-inline: var(--space-8); font-size: var(--step-1); }
  .btn--block { inline-size: 100%; }

  /* Yön bağımlı ok — yalnız bu sınıf RTL'de döner */
  .icon-dir { transition: transform var(--dur-fast) var(--ease-out); }
  [dir="rtl"] .icon-dir { transform: scaleX(-1); }
  .btn:hover .icon-dir { transform: translateX(3px); }
  [dir="rtl"] .btn:hover .icon-dir { transform: scaleX(-1) translateX(3px); }

  /* ---------- Header ---------- */
  .header {
    position: sticky; inset-block-start: 0; z-index: var(--z-header);
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(12px);
    border-block-end: var(--bw-1) solid var(--color-border);
    transition: block-size var(--dur-base) var(--ease-mech);
  }
  .header__inner { display: flex; align-items: center; gap: var(--space-6); min-block-size: var(--header-h); }
  /* Dar ekran: 375px'te öğeler sığmıyordu, menü düğmesi ekran dışına
     taşıyordu (ölçüldü: 394px içerik / 375px ekran). Boşluklar daralır,
     tema düğmesi mobil menüye taşınır, ana buton küçülür. */
  @media (max-width: 40rem) {
    .header__inner { gap: var(--space-2); }
    .header__actions { gap: var(--space-2); }
    .header__actions > #themeToggle { display: none; }
    .header__actions > .btn--primary {
      padding-inline: var(--space-4); min-block-size: 2.75rem; font-size: var(--step--1);
    }
    .header__logo img { block-size: 2rem; }
  }
  .header__logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-text); flex: none; }
  .header__logo img, .header__logo svg { block-size: 2.25rem; inline-size: auto; }
  .header__logo-text { font-weight: 800; font-size: var(--step-1); letter-spacing: -.03em; }
  .header__logo-text span { color: var(--color-accent); }
  /* Menü tek satırda kalır: uzun etiketler ("Bilgi Merkezi") iki
     satıra sarınca hizalama bozuluyordu. nowrap + orta hizalama ile
     tüm bağlantılar logoya dikey ortalı tek çizgide durur. */
  .header__nav { display: none; margin-inline-start: auto; align-items: center; }
  .header__nav .nav__link { white-space: nowrap; }
  .header__actions { display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; }
  @media (min-width: 64rem) {
    /* 64-80rem arası dar masaüstünde boşluk kısılır ki menü tek
       satıra sığsın; geniş ekranda rahat aralığa döner. */
    .header__nav { display: flex; gap: var(--space-4); }
  }
  @media (min-width: 80rem) {
    .header__nav { gap: var(--space-6); }
    .header__actions { margin-inline-start: 0; }
  }
  .nav__link {
    display: inline-block; padding-block: var(--space-2); font-weight: 600; font-size: var(--step-0);
    color: var(--color-text); text-decoration: none; position: relative;
  }
  .nav__link::after {
    content: ""; position: absolute; inset-inline: 0; inset-block-end: -.15rem;
    block-size: 3px; background: var(--color-accent-solid);
    scale: 0 1; transform-origin: inline-start; transition: scale var(--dur-base) var(--ease-out);
  }
  .nav__link:hover::after, .nav__link[aria-current="page"]::after { scale: 1 1; }
  .nav__link[aria-current="page"] { color: var(--color-accent); }

  /* ---------- Dil seçici ---------- */
  .lang { position: relative; }
  .lang__toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-block-size: 2.75rem; min-inline-size: 2.75rem; padding-inline: var(--space-3);
    background: transparent; border: var(--bw-1) solid var(--color-border-strong);
    border-radius: var(--radius-sm); font-weight: 700; font-size: var(--step--1);
    letter-spacing: var(--ls-label); cursor: pointer; color: var(--color-text);
  }
  .lang__toggle:hover { border-color: var(--color-accent); }
  .lang__menu {
    position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-end: 0;
    min-inline-size: 11rem; padding: var(--space-2);
    background: var(--color-surface-2); border: var(--bw-1) solid var(--color-border-strong);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg); list-style: none; margin: 0;
    overflow: clip;
  }
  .lang__menu[hidden] { display: none; }
  .lang__menu a {
    display: block; padding: var(--space-3) var(--space-4); text-decoration: none;
    color: var(--color-text); font-weight: 600; font-size: var(--step--1);
    border-radius: var(--radius-xs);
  }
  .lang__menu a:hover { background: var(--color-surface); color: var(--color-accent); }
  .lang__menu a[aria-current="true"] { color: var(--color-accent); }

  /* ---------- İkon buton ---------- */
  .btn { white-space: nowrap; }

  .icon-btn {
    display: inline-grid; place-items: center;
    inline-size: 2.75rem; block-size: 2.75rem;
    background: transparent; border: var(--bw-1) solid var(--color-border-strong);
    border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text);
    transition: border-color var(--dur-fast) var(--ease-mech), color var(--dur-fast) var(--ease-mech);
  }
  .icon-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
  .icon-btn svg { inline-size: 1.25rem; block-size: 1.25rem; }

  /* ---------- Mobil menü ---------- */
  .menu-toggle { display: inline-grid; }
  @media (min-width: 64rem) { .menu-toggle { display: none; } }
  .mobile-menu {
    position: fixed; inset: 0; z-index: var(--z-dialog);
    background: var(--color-bg); padding: var(--space-6);
    display: flex; flex-direction: column; gap: var(--space-6);
    overflow-y: auto;
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu__nav { display: flex; flex-direction: column; gap: var(--space-2); }
  .mobile-menu__nav a {
    display: block; padding: var(--space-4) 0; font-size: var(--step-2); font-weight: 700;
    color: var(--color-text); text-decoration: none;
    border-block-end: var(--bw-1) solid var(--color-border);
  }
  .mobile-menu__nav a[aria-current="page"] { color: var(--color-accent); }
}

@layer components {
  /* ---------- HERO ---------- */
  .hero { position: relative; min-block-size: min(88svh, 900px); display: grid; align-items: end; overflow: clip; isolation: isolate; }
  .hero__media { position: absolute; inset: 0; z-index: -2; }
  .hero__media img, .hero__media video { inline-size: 100%; block-size: 100%; object-fit: cover; }
  /*
   * Scrim: metin bloğunun kapladığı dikey alanda alfa HİÇBİR NOKTADA 0.72'nin
   * altına inmez. Ölçüm: 0.72 alfada beyaz metin kontrastı 8.08:1 (AAA),
   * en kötü durumda (tamamen beyaz fotoğraf) bile güvenli.
   */
  .hero__scrim {
    position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(to top,
        rgb(var(--color-scrim) / .90)  0%,
        rgb(var(--color-scrim) / .84) 22%,
        rgb(var(--color-scrim) / .74) 46%,
        rgb(var(--color-scrim) / .40) 72%,
        rgb(var(--color-scrim) / .12) 100%),
      linear-gradient(to var(--scrim-dir, right),
        rgb(var(--color-scrim) / .58) 0%, rgb(var(--color-scrim) / 0) 64%);
  }
  [dir="rtl"] .hero__scrim { --scrim-dir: left; }

  .hero__content { padding-block: var(--space-20) var(--space-16); max-inline-size: 56rem; }
  .hero__title { font-size: var(--step-6); color: #fff; font-style: italic; }
  [lang="ar"] .hero__title { font-style: normal; font-size: var(--step-5); }
  .hero__subtitle { font-size: var(--step-1); color: var(--n-200); max-inline-size: var(--measure-narrow); margin-block-start: var(--space-6); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-start: var(--space-8); }
  .hero__trust {
    display: flex; flex-wrap: wrap; gap: var(--space-8);
    margin-block-start: var(--space-12); padding-block-start: var(--space-6);
    border-block-start: var(--bw-1) solid rgb(255 255 255 / .18);
  }
  .hero__trust-item { color: var(--n-200); }
  .hero__trust-num { display: block; font-size: var(--step-3); font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
  .hero__trust-label { font-size: var(--step--1); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--n-300); }
  [lang="ar"] .hero__trust-label { text-transform: none; letter-spacing: 0; }
  .hero__videobtn {
    position: absolute; inset-block-end: var(--space-6); inset-inline-end: var(--space-6);
    z-index: 2; inline-size: 2.75rem; block-size: 2.75rem;
    display: grid; place-items: center; cursor: pointer;
    background: rgb(0 0 0 / .55); border: var(--bw-1) solid rgb(255 255 255 / .35);
    border-radius: var(--radius-xs); color: #fff;
  }

  /* ---------- Kartlar ---------- */
  .card {
    position: relative; display: flex; flex-direction: column;
    background: var(--color-surface); border: var(--bw-1) solid var(--color-border);
    border-radius: var(--radius-md); overflow: clip;
    box-shadow: var(--shadow-sm), var(--edge-light);
    transition: border-color var(--dur-base) var(--ease-mech),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
  }
  .card:hover {
    border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
    box-shadow: var(--shadow-md), var(--edge-light);
    transform: translateY(-3px);
  }
  @media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
  .card__media {
    aspect-ratio: 4 / 3; background: var(--color-surface-2); overflow: clip;
    border-start-start-radius: calc(var(--radius-md) - 1px);
    border-start-end-radius: calc(var(--radius-md) - 1px);
    /* aspect-ratio tek başına yetmez: içerik (dikey fotoğraf) kabı
       esnetebiliyor ve kartlar farklı boyda kalıyordu. Görsel mutlak
       konumla kaba hapsedilir — oran artık kesin kuraldır. */
    position: relative;
  }
  .card__media img {
    position: absolute; inset: 0;
    inline-size: 100%; block-size: 100%; object-fit: cover;
    transition: scale var(--dur-slow) var(--ease-out);
  }
  .card:hover .card__media img { scale: 1.04; }
  .card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
  .card__eyebrow { font-size: var(--step--2); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-subtle); }
  [lang="ar"] .card__eyebrow { text-transform: none; letter-spacing: 0; }
  .card__title { font-size: var(--step-2); }
  .card__title a { color: inherit; text-decoration: none; }
  /* Kartın tamamı tıklanabilir; erişilebilir ad başlıktan gelir */
  .card__title a::after { content: ""; position: absolute; inset: 0; }
  .card__text { color: var(--color-text-muted); font-size: var(--step-0); }
  .card__foot { margin-block-start: auto; padding-block-start: var(--space-4); }
  .card__num {
    position: absolute; inset-block-start: var(--space-4); inset-inline-end: var(--space-4);
    font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-text-subtle);
  }

  /* ---------- Makine kartı ---------- */
  .spec-list { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--step--1); }
  .spec-list dt { color: var(--color-text-subtle); }
  .spec-list dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: end; color: var(--color-text); }
  .badge {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-3); font-size: var(--step--2); font-weight: 700;
    letter-spacing: var(--ls-label); text-transform: uppercase;
    background: var(--color-surface-2); border: var(--bw-1) solid var(--color-border-strong);
    border-radius: var(--radius-pill); color: var(--color-text-muted);
  }
  [lang="ar"] .badge { text-transform: none; letter-spacing: 0; }
  .badge--available { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 45%, transparent); background: color-mix(in srgb, var(--color-success) 10%, transparent); }
  .badge--accent { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }

  /* ---------- İstatistik şeridi ---------- */
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-8); }
  .stat { padding-inline-start: var(--space-6); border-inline-start: var(--bw-accent) solid var(--color-accent-solid); }
  .stat__num { display: block; font-size: var(--step-5); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; min-inline-size: 4ch; }
  .stat__label { display: block; margin-block-start: var(--space-3); font-size: var(--step--1); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); }
  [lang="ar"] .stat__label { text-transform: none; letter-spacing: 0; }

  /* ---------- Referans logo duvarı ---------- */
  /* Karar: sonsuz kaydırma YOK. Sunumda konuşmacı bir logoyu işaret edebilmeli;
     ayrıca WCAG 2.2.2 otomatik hareket için duraklat mekanizması ister. */
  .logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-3); }
  .logo-wall__item {
    display: grid; place-items: center; aspect-ratio: 3 / 2; padding: var(--space-4);
    background: var(--logo-plate); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .logo-wall__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  @media (prefers-reduced-motion: reduce) { .logo-wall__item:hover { transform: none; } }
  /* Optik normalizasyon: geniş logolar inline, kare logolar block eksenden sınırlanır.
     Grayscale filtresi KULLANILMAZ — marka hakkı + hover dokunmatikte yok + kontrast riski. */
  .logo-wall__item img { max-block-size: 56%; max-inline-size: 84%; object-fit: contain; }
  .logo-wall__item--text {
    background: var(--color-surface-2); text-align: center; font-size: var(--step--1);
    color: var(--color-text-muted); font-weight: 600;
    border: var(--bw-1) solid var(--color-border);
  }

  /* ---------- Zaman çizelgesi ---------- */
  .timeline { list-style: none; padding: 0; margin: 0; position: relative; }
  .timeline::before {
    content: ""; position: absolute; inset-block: .6rem 0;
    inset-inline-start: 4.5rem; inline-size: var(--bw-1); background: var(--color-border-strong);
  }
  .timeline__item { position: relative; display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-6); padding-block-end: var(--space-10); }
  .timeline__year { font-family: var(--font-mono); font-size: var(--step-1); font-weight: 700; color: var(--color-accent); font-variant-numeric: tabular-nums; }
  .timeline__body { padding-inline-start: var(--space-6); position: relative; }
  .timeline__body::before {
    content: ""; position: absolute; inset-inline-start: -.3rem; inset-block-start: .55rem;
    inline-size: .65rem; block-size: .65rem; background: var(--color-accent-solid); border-radius: 50%;
  }

  /* ---------- Formlar ---------- */
  .field { display: flex; flex-direction: column; gap: var(--space-2); }
  .field__label { font-weight: 600; font-size: var(--step--1); }
  .field__req { color: var(--color-accent); }
  .field__hint { font-size: var(--step--2); color: var(--color-text-subtle); }
  .field__error { font-size: var(--step--1); color: var(--color-danger); font-weight: 600; display: flex; gap: var(--space-2); align-items: flex-start; }
  .input, .select, .textarea {
    inline-size: 100%; min-block-size: 3rem; padding: var(--space-3) var(--space-4);
    background: var(--color-bg); color: var(--color-text);
    border: var(--bw-1) solid var(--color-border-field); border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease-mech), box-shadow var(--dur-fast) var(--ease-out);
  }
  .input:focus, .select:focus, .textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
  }
  .textarea { min-block-size: 8rem; resize: vertical; line-height: var(--lh-body); }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-subtle); }
  .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
    border-color: var(--color-danger); border-width: var(--bw-2); background: var(--color-danger-bg);
  }
  .select { appearance: none; padding-inline-end: var(--space-10);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 1.15rem center, right 0.85rem center; background-size: 6px 6px; background-repeat: no-repeat; }
  [dir="rtl"] .select { background-position: left 1.15rem center, left 0.85rem center; }
  .checkbox { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--step--1); line-height: var(--lh-snug); cursor: pointer; }
  .checkbox input { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: .15rem; flex: none; accent-color: var(--color-accent-solid); }
  .form-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .form-grid--full { grid-column: 1 / -1; }
  fieldset { border: 0; padding: 0; margin: 0; }
  legend { font-size: var(--step-1); font-weight: 800; margin-block-end: var(--space-5); padding-inline-start: var(--space-4); border-inline-start: var(--bw-accent) solid var(--color-accent-solid); }
  .alert { padding: var(--space-4) var(--space-5); border-inline-start: var(--bw-accent) solid; border-radius: var(--radius-sm); font-size: var(--step-0); }
  .alert--error { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); }
  .alert--success { background: color-mix(in srgb, var(--color-success) 12%, transparent); border-color: var(--color-success); color: var(--color-success); }

  /* ---------- WhatsApp kayan buton ---------- */
  /* inset-inline-end sayesinde RTL'de otomatik SOL alta geçer. Logo ayna çevrilmez. */
  .fab-wa {
    position: fixed; z-index: var(--z-fab);
    inset-block-end: calc(env(safe-area-inset-bottom, 0px) + var(--fab-offset, 1.25rem));
    inset-inline-end: 1.25rem;
    display: inline-flex; align-items: center; gap: var(--space-3);
    inline-size: 3.5rem; block-size: 3.5rem; padding: 0;
    background: #25D366; color: #062511; border-radius: var(--radius-pill);
    box-shadow: 0 6px 20px rgb(0 0 0 / .38); text-decoration: none;
    overflow: hidden; transition: inline-size var(--dur-base) var(--ease-out);
  }
  .fab-wa svg { inline-size: 1.75rem; block-size: 1.75rem; margin-inline: .875rem; flex: none; }
  .fab-wa__text { white-space: nowrap; font-weight: 700; font-size: var(--step--1); padding-inline-end: var(--space-5); opacity: 0; transition: opacity var(--dur-base); }
  @media (min-width: 64rem) and (hover: hover) {
    .fab-wa:hover, .fab-wa:focus-visible { inline-size: auto; }
    .fab-wa:hover .fab-wa__text, .fab-wa:focus-visible .fab-wa__text { opacity: 1; }
  }
  @media (max-width: 47.99rem) { .fab-wa { inline-size: 3.25rem; block-size: 3.25rem; } .fab-wa svg { margin-inline: .75rem; } }
  body[data-cookie-open="true"] { --fab-offset: 8.5rem; }
  body[data-present="1"] .fab-wa { display: none; }

  /* ---------- Çerez bandı ---------- */
  .cookie {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-cookie);
    background: var(--color-surface-2); border-block-start: 3px solid var(--color-accent-solid);
    box-shadow: 0 -8px 32px rgb(0 0 0 / .35); padding: var(--space-5) 0;
  }
  .cookie[hidden] { display: none; }
  .cookie__inner { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; justify-content: space-between; }
  .cookie__text { max-inline-size: 46rem; font-size: var(--step--1); color: var(--color-text-muted); }
  .cookie__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  /* Reddet ve Kabul GÖRSEL OLARAK EŞİT — KVKK/GDPR: ret, kabul kadar kolay olmalı */
  .cookie__actions .btn { min-block-size: 2.75rem; flex: 1 1 auto; min-inline-size: 9rem; }

  /* ---------- Footer ---------- */
  .footer { background: var(--color-surface); border-block-start: var(--bw-1) solid var(--color-border); padding-block: var(--space-16) var(--space-8); margin-block-start: auto; }
  .footer__grid { display: grid; gap: var(--space-10); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .footer__title { font-size: var(--step--1); font-weight: 800; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-subtle); margin-block-end: var(--space-4); }
  [lang="ar"] .footer__title { text-transform: none; letter-spacing: 0; }
  .footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .footer__list a { color: var(--color-text-muted); text-decoration: none; font-size: var(--step-0); }
  .footer__list a:hover { color: var(--color-accent); }
  .footer__bottom {
    margin-block-start: var(--space-12); padding-block-start: var(--space-6);
    border-block-start: var(--bw-1) solid var(--color-border);
    display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
    font-size: var(--step--2); color: var(--color-text-subtle);
  }

  /* ---------- Yatay kaydırmalı şerit (makine önizleme) ---------- */
  .rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 20rem); gap: var(--space-gap);
          overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--space-4);
          scrollbar-width: thin; }
  .rail > * { scroll-snap-align: start; }
  .rail-nav { display: flex; gap: var(--space-2); }

  /* ---------- CTA bandı ---------- */
  .cta-band { border-block-start: var(--bw-accent) solid var(--color-accent-solid); background: var(--color-surface-2); }
  .cta-band__inner { display: grid; gap: var(--space-10); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: center; }

  /* Viewport dışı bölümlerin stil/layout maliyetini düşür */
  .section--deferred { content-visibility: auto; contain-intrinsic-size: auto 720px; }
}

@layer utilities {
  .text-muted { color: var(--color-text-muted); }
  .text-accent { color: var(--color-accent); }
  .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .measure { max-inline-size: var(--measure); }
  .flow-lg { --flow: var(--space-6); }
  [hidden] { display: none !important; }
}

@layer components {
  /* ---------- Kayan referans logo şeridi ----------
   * Sonsuz kayan şerit. WCAG 2.2.2 (Seviye A) 5 saniyeyi aşan otomatik
   * hareket için duraklatma mekanizması zorunlu kıldığından üç katmanlı
   * durdurma var: görünür duraklat butonu, hover/focus'ta otomatik durma,
   * ve prefers-reduced-motion açıksa hareket hiç başlamaz (sabit grid).
   *
   * Şerit ikiye katlanır; ikinci kopya aria-hidden'dır, ekran okuyucu
   * logoları iki kez okumaz.
   */
  .logo-marquee { position: relative; }

  .logo-marquee__viewport {
    overflow: hidden;
    /* Kenarlarda yumuşak geçiş — logolar aniden kesilmesin */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
            mask-image: linear-gradient(to right, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
  }

  .logo-marquee__track {
    display: flex;
    inline-size: max-content;
    gap: var(--space-3);
    padding-inline-end: var(--space-3);
    animation: mty-marquee var(--marquee-dur, 46s) linear infinite;
    animation-direction: var(--marquee-dir, normal);
  }
  /* RTL'de şerit ters yöne aksın */
  [dir="rtl"] .logo-marquee__track { --marquee-dir: reverse; }

  @keyframes mty-marquee {
    from { transform: translate3d(0, 0, 0); }
    /* Şerit iki kopya olduğu için tam yarısı kadar kayınca başa döner */
    to   { transform: translate3d(-50%, 0, 0); }
  }

  .logo-marquee__track:hover,
  .logo-marquee__track:focus-within,
  .logo-marquee[data-paused="true"] .logo-marquee__track { animation-play-state: paused; }

  .logo-marquee__item {
    flex: none;
    inline-size: clamp(9.5rem, 14vw, 12.5rem);
    aspect-ratio: 3 / 2;
    display: grid; place-items: center;
    padding: var(--space-4);
    background: var(--logo-plate);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  /* Optik normalizasyon: geniş logolar inline, kare logolar block eksenden
     sınırlanır. Grayscale filtresi UYGULANMAZ — marka hakkı ve kontrast riski. */
  .logo-marquee__item img { max-block-size: 66%; max-inline-size: 88%; object-fit: contain; }
  .logo-marquee__item--text {
    background: var(--color-surface-2); color: var(--color-text-muted);
    font-size: var(--step--1); font-weight: 700; text-align: center; line-height: var(--lh-snug);
    border: var(--bw-1) solid var(--color-border);
  }

  .logo-marquee__controls {
    display: flex; justify-content: center; align-items: center; gap: var(--space-3);
    margin-block-start: var(--space-6);
  }
  .logo-marquee__pause {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-block-size: 2.75rem; padding-inline: var(--space-4);
    background: transparent; color: var(--color-text-muted);
    border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--radius-pill);
    font-size: var(--step--1); font-weight: 600; cursor: pointer;
  }
  .logo-marquee__pause:hover { border-color: var(--color-accent); color: var(--color-accent); }
  .logo-marquee__pause svg { inline-size: 1rem; block-size: 1rem; }

  /* Hareket azaltma tercihi: şerit tamamen durur ve sarmalanmış grid olur.
     Sunum modunda da varsayılan duraklatılmış gelir (konuşmacı logoyu
     işaret edebilsin). */
  @media (prefers-reduced-motion: reduce) {
    .logo-marquee__viewport { -webkit-mask-image: none; mask-image: none; }
    .logo-marquee__track {
      animation: none; flex-wrap: wrap; inline-size: auto;
      justify-content: center; padding-inline-end: 0;
    }
    .logo-marquee__track [aria-hidden="true"] { display: none; }
    .logo-marquee__controls { display: none; }
  }
}

/* ==================================================================== *
 * TİPOGRAFİK KARAKTER
 *
 * Başlıklar Archivo'nun GENİŞLİK eksenini kullanır (%82 sıkıştırılmış).
 * Bu, ek font dosyası indirmeden endüstriyel afiş karakteri verir ve
 * siteyi jenerik sistem-fontu görünümünden çıkarır.
 * ==================================================================== */
@layer base {
  h1, h2, .hero__title, .stat__num {
    font-stretch: 82%;
    font-variation-settings: "wdth" 82, "wght" 800;
  }
  h3, h4, legend, .card__title {
    font-stretch: 90%;
    font-variation-settings: "wdth" 90, "wght" 700;
  }
  .btn { font-variation-settings: "wdth" 92, "wght" 700; }

  /* Arapça'da genişlik ekseni yok — Cairo yalnızca ağırlık taşır */
  [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4,
  [lang="ar"] .hero__title, [lang="ar"] .card__title, [lang="ar"] .btn,
  [lang="ar"] .stat__num {
    font-stretch: normal;
    font-variation-settings: normal;
  }

  /* Rakamlar tabular — sayaçlarda genişlik oynamasın */
  .stat__num, .hero__trust-num, .spec-list dd, .timeline__year, .mono {
    font-variant-numeric: tabular-nums lining-nums;
  }
}

/* ==================================================================== *
 * GRAFİKSEL HAREKET
 *
 * Üç tür hareket var, fazlası yok:
 *   1. Bölüm girişi (fade + yükselme, bir kez)
 *   2. Vurgu çizgisi çizilmesi
 *   3. Hero'da çok yavaş yakınlaşma
 *
 * Hepsi prefers-reduced-motion'da tamamen devre dışı kalır ve içerik
 * son hâliyle görünür — JS çalışmasa da aynı şey geçerli.
 * ==================================================================== */
@layer components {

  /* ---- Bölüm girişi ---- */
  .reveal { opacity: 0; transform: translate3d(0, 14px, 0); }
  .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  /* ---- Vurgu çizgisi: bölüm görünürken soldan çizilir ---- */
  .eyebrow::before { transform-origin: inline-start; }
  .reveal .eyebrow::before { scale: 0 1; }
  .reveal.is-in .eyebrow::before {
    scale: 1 1;
    transition: scale var(--dur-slower) var(--ease-out) 120ms;
  }

  /* ---- Hero: çok yavaş yakınlaşma (Ken Burns) ---- */
  .hero__media img, .hero__media picture { inline-size: 100%; block-size: 100%; }
  .hero__media img { object-fit: cover; animation: mty-hero-zoom 28s ease-out both; }
  @keyframes mty-hero-zoom {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
  }

  /* ---- Ölçü çizgisi motifi: teknik çizim hissi ----
     Bölüm başlıklarının altında ince, kesikli bir teknik ölçü şeridi. */
  .rule-measure {
    position: relative; block-size: 1px; margin-block: var(--space-8);
    background: var(--color-border);
    overflow: hidden;
  }
  .rule-measure::after {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
    inline-size: 100%;
    background: repeating-linear-gradient(to right,
      var(--color-accent-solid) 0 2px, transparent 2px 10px);
    scale: 0 1; transform-origin: inline-start;
  }
  .reveal.is-in .rule-measure::after {
    scale: 1 1;
    transition: scale 1.1s var(--ease-out) 200ms;
  }

  /* ---- Sayı vurgusu: rakam yanında ince kırmızı işaret ---- */
  .stat { position: relative; }
  .stat::after {
    content: ""; position: absolute; inset-block-start: 0;
    inset-inline-start: calc(var(--bw-accent) * -1);
    inline-size: var(--bw-accent); block-size: 100%;
    background: var(--color-accent-solid);
    scale: 1 0; transform-origin: top;
  }
  .reveal.is-in .stat::after {
    scale: 1 1;
    transition: scale var(--dur-slower) var(--ease-out) var(--reveal-delay, 0ms);
  }

  /* ---- CTA bandı: hareketli diyagonal şerit ---- */
  .cta-band { position: relative; overflow: clip; }
  .cta-band::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(115deg,
      transparent 0 42px,
      color-mix(in srgb, var(--color-accent-solid) 7%, transparent) 42px 46px);
    opacity: 0; transition: opacity 900ms var(--ease-out);
  }
  .cta-band.is-in::before { opacity: 1; }

  /* ---- Hareket azaltma: her şey son hâline sabitlenir ---- */
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
    .reveal .eyebrow::before,
    .reveal.is-in .eyebrow::before,
    .rule-measure::after,
    .reveal.is-in .rule-measure::after,
    .stat::after,
    .reveal.is-in .stat::after { scale: 1 1; transition: none; }
    .hero__media img { animation: none; }
    .cta-band::before { opacity: 1; transition: none; }
  }
}

@layer components {
  /* İkinci güvenlik katmanı: JS tamamen çökse bile içerik 4 saniye içinde
     görünür hâle gelir. Saf CSS, JS'e hiç bağımlı değil. */
  .reveal { animation: mty-reveal-failsafe 0s linear 4s forwards; }
  @keyframes mty-reveal-failsafe { to { opacity: 1; transform: none; } }
  .reveal.is-in { animation: none; }
  @media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }
}

@layer components {
  /* ---------- Yasal / uzun metin sayfaları ---------- */
  .legal-body { max-inline-size: var(--measure); }
  .legal-body > * + * { margin-block-start: var(--space-5); }
  .legal-body h2 {
    font-size: var(--step-2); margin-block-start: var(--space-12);
    padding-block-end: var(--space-3); border-block-end: var(--bw-1) solid var(--color-border);
  }
  .legal-body h3 { font-size: var(--step-1); margin-block-start: var(--space-8); }
  .legal-body ul, .legal-body ol { padding-inline-start: var(--space-6); }
  .legal-body li + li { margin-block-start: var(--space-2); }
  .legal-body table { inline-size: 100%; border-collapse: collapse; font-size: var(--step--1); }
  .legal-body th, .legal-body td {
    padding: var(--space-3); text-align: start;
    border: var(--bw-1) solid var(--color-border); vertical-align: top;
  }
  .legal-body th { background: var(--color-surface-2); font-weight: 700; }
  .legal-body p { color: var(--color-text-muted); }
  .legal-body strong { color: var(--color-text); }
}

@layer components {
  /* ---------- Tema-duyarlı logo ---------- */
  /* Açık temada renkli (siyah yazılı) logo, koyu temada beyaz sürüm.
     İkisi de DOM'da; yalnız biri görünür — JS'siz tema geçişi. */
  .logo-img { display: block; inline-size: auto; block-size: 48px; }
  .logo-img--dark { display: none; }
  [data-theme="dark"] .logo-img--light { display: none; }
  [data-theme="dark"] .logo-img--dark { display: block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-img--light { display: none; }
    :root:not([data-theme="light"]) .logo-img--dark { display: block; }
  }
}

@layer components {
  /* ---------- Konu etiketi (Bilgi Merkezi filtresi) ---------- */
  .chip {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: var(--bw-1) solid var(--color-border);
    border-radius: var(--radius-pill, 999px);
    background: var(--color-surface);
    font-size: var(--step--1); font-weight: 600;
    color: var(--color-text); text-decoration: none;
    transition: border-color .15s, background-color .15s;
  }
  .chip:hover { border-color: var(--color-accent); }
  .chip--on {
    background: var(--color-accent); border-color: var(--color-accent);
    color: var(--color-on-accent, #fff);
  }
  .chip--on .text-muted { color: inherit; opacity: .75; }
}

@layer components {
  /* ---------- Makine parkı filtre çubuğu ---------- */
  .filterbar {
    background: var(--color-surface); border: var(--bw-1) solid var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-5);
    box-shadow: var(--shadow-sm), var(--edge-light);
  }
  .filterbar__row {
    display: grid; gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    align-items: end;
  }
  .filterbar__field { display: flex; flex-direction: column; gap: var(--space-2); }
  .filterbar__field--check { justify-content: center; padding-block-end: var(--space-3); }
  .filterbar__label {
    font-size: var(--step--2); font-weight: 700; letter-spacing: var(--ls-label);
    text-transform: uppercase; color: var(--color-text-subtle);
  }
  [lang="ar"] .filterbar__label { text-transform: none; letter-spacing: 0; }
  .filterbar__actions { display: flex; gap: var(--space-3); }
  .filterbar__actions .btn { flex: 1; }

  .empty-state {
    text-align: center; padding: var(--space-16) var(--space-6);
    background: var(--color-surface); border: var(--bw-1) dashed var(--color-border-strong);
    border-radius: var(--radius-md);
  }
  .empty-state h2 { font-size: var(--step-2); margin-block-end: var(--space-3); }
}

/* ---------- Müşteri yorumları (ana sayfa kaydırıcısı) ---------- */
@layer components {
  .testimonials { max-inline-size: 52rem; margin-inline: auto; }

  .testimonials__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: var(--space-8);
    scrollbar-width: none;
    /* Uçlarda nefes payı: odak halkası kırpılmasın */
    padding-block: var(--space-2);
  }
  .testimonials__track::-webkit-scrollbar { display: none; }
  .testimonials__track:focus-visible {
    outline: var(--bw-2, 2px) solid var(--color-accent-solid);
    outline-offset: 4px; border-radius: var(--radius-md);
  }

  .testimonial {
    scroll-snap-align: center; scroll-snap-stop: always;
    margin: 0; text-align: center;
    padding-inline: var(--space-4);
  }
  .testimonial__quote { margin: 0; position: relative; }
  .testimonial__quote::before {
    /* Tırnak işareti dile göre: Arapça'da ekran karakteri aynı kalır,
       konum mantıksal olduğundan RTL'de kendiliğinden aynalanır. */
    content: "\201C";
    display: block; line-height: 1;
    font-size: 4.5rem; font-weight: 700;
    color: var(--color-accent-solid); opacity: .35;
    margin-block-end: var(--space-2);
  }
  .testimonial__quote p {
    font-size: var(--step-1); line-height: 1.65;
    color: var(--color-text); max-inline-size: var(--measure);
    margin-inline: auto; text-wrap: balance;
  }
  .testimonial__author {
    margin-block-start: var(--space-6);
    display: flex; flex-direction: column; gap: var(--space-1, .25rem);
  }
  .testimonial__name { font-weight: 700; }
  .testimonial__title { color: var(--color-text-subtle); font-size: var(--step--1); }

  .testimonials__dots {
    display: flex; justify-content: center; gap: var(--space-3);
    margin-block-start: var(--space-8);
  }
  .testimonials__dots button {
    inline-size: .625rem; block-size: .625rem; padding: 0;
    border: 0; border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    cursor: pointer; transition: background .2s, transform .2s;
  }
  .testimonials__dots button:hover { transform: scale(1.25); }
  .testimonials__dots button[aria-current="true"] { background: var(--color-accent-solid); }
  .testimonials__dots button:focus-visible {
    outline: 2px solid var(--color-accent-solid); outline-offset: 3px;
  }
}