/* Hallmark · genre: modern-minimal · macrostructure: Narrative Workflow · theme: Coral-cluster (brand-anchored)
     * enrichment: none (typography only) · nav: N1b canonical-three-section · footer: Ft5 Statement
     * H2 hero knobs: ratio=7/5, right=proof-column, divider=hairline
     * F3 services knobs: columns=2 key/val, rules=every-row · F4 process knobs: numbering=1.0/2.0/3.0, layout=vertical, connector=line
     * Ft5 knobs: width=28ch, wordmark=under-sentence, rule=hairline
     * tone: precise · official · calm-confident   anchor hue: 252 (brand navy)   accent: action-green ~2% per viewport
     * type: Geist (display + body) + JetBrains Mono outlier in 2 roles — registry labels · codes/numerals
     * pre-emit critique: P5 H5 E4 S5 R5 V4
     * slop test: 58/58 — contrast: pass (40–41) · nav/footer/hero: pass (42–45) · honest: pass (46)
     *            chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30)
     *            mobile: pass (34, 49, 50–57) — verified at 320 · 375 · 414 · 768
     */

    /* ── Yazı tipleri · TAMAMI KENDİ SUNUCUMUZDA · Google Fonts YOK ─────────
       Inter: Kiril + Latin genişletilmiş kapsayan nötr grotesk. Sitenin yarısı
       RU/UA olduğu için Kiril şarttı; Türkçe için de ğ/Ğ şart.
       ⚠️ Golos Text 2026-08-23'te BURADAN ÇIKARILDI: fontun kendisinde ğ/Ğ
       kısa çizgisi (breve) yok, "doğum" ekranda "dogum" görünüyordu — bozuk olan
       subset'imiz değil, @fontsource/golos-text kaynağının kendisi (fontkit ile
       doğrulandı: ğ ile g aynı bbox/path). Inter'de şapka var.
       400/500/600/700 statik ağırlık, 4 altküme.
       JetBrains Mono yalnız rakam ve etiketlerde (mono outlier, 2 rol).
       Yollar CSS dosyasına göre çözülür (/assets/site.<hash>.css → fonts/…),
       bu yüzden alt dizinlerdeki 48 sayfada da doğru çalışır.
       font-display: swap → metin hemen görünür, font sonra yerleşir.       */
    @font-face {
      font-family: "PT Serif";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("fonts/ptserif-latin-400.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: "PT Serif";
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url("fonts/ptserif-latin-700.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: "PT Serif";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("fonts/ptserif-latin-ext-400.woff2") format("woff2");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: "PT Serif";
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url("fonts/ptserif-latin-ext-700.woff2") format("woff2");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: "PT Serif";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("fonts/ptserif-cyrillic-400.woff2") format("woff2");
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    @font-face {
      font-family: "PT Serif";
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url("fonts/ptserif-cyrillic-700.woff2") format("woff2");
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    @font-face {
      font-family: "PT Serif";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("fonts/ptserif-cyrillic-ext-400.woff2") format("woff2");
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    @font-face {
      font-family: "PT Serif";
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url("fonts/ptserif-cyrillic-ext-700.woff2") format("woff2");
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("fonts/inter-latin-400.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: "Inter";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url("fonts/inter-latin-500.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: "Inter";
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url("fonts/inter-latin-600.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: "Inter";
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url("fonts/inter-latin-700.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: "Inter";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("fonts/inter-latin-ext-400.woff2") format("woff2");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url("fonts/inter-latin-ext-500.woff2") format("woff2");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url("fonts/inter-latin-ext-600.woff2") format("woff2");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url("fonts/inter-latin-ext-700.woff2") format("woff2");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("fonts/inter-cyrillic-400.woff2") format("woff2");
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url("fonts/inter-cyrillic-500.woff2") format("woff2");
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url("fonts/inter-cyrillic-600.woff2") format("woff2");
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url("fonts/inter-cyrillic-700.woff2") format("woff2");
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("fonts/inter-cyrillic-ext-400.woff2") format("woff2");
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url("fonts/inter-cyrillic-ext-500.woff2") format("woff2");
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url("fonts/inter-cyrillic-ext-600.woff2") format("woff2");
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url("fonts/inter-cyrillic-ext-700.woff2") format("woff2");
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    @font-face {
      font-family: "JetBrains Mono";
      font-style: normal;
      font-weight: 400 500;
      font-display: swap;
      src: url("fonts/jbmono-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: "JetBrains Mono";
      font-style: normal;
      font-weight: 400 500;
      font-display: swap;
      src: url("fonts/jbmono-latin-ext.woff2") format("woff2");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: "JetBrains Mono";
      font-style: normal;
      font-weight: 400 500;
      font-display: swap;
      src: url("fonts/jbmono-cyrillic.woff2") format("woff2");
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    @font-face {
      font-family: "JetBrains Mono";
      font-style: normal;
      font-weight: 400 500;
      font-display: swap;
      src: url("fonts/jbmono-cyrillic-ext.woff2") format("woff2");
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }

    :root {
      /* ── Colour · OKLCH, anchor hue 252 (the brand navy), one action accent ── */
      --color-paper:       oklch(95.4% 0.030 92);
      --color-paper-2:     oklch(93.2% 0.034 92);
      --color-paper-3:     oklch(90.8% 0.036 92);
      --color-rule:        oklch(83.5% 0.032 92);
      --color-rule-2:      oklch(74.5% 0.036 92);
      /* Interactive boundaries need 3:1 (WCAG 1.4.11); the decorative hairlines above do not.
         Kept as its own token so the outline button can be legible without darkening every rule. */
      --color-control-edge: oklch(55%  0.022 78);
      /* 51%, not 56% — at 56% the mono meta labels measured 4.04:1 on paper, under the 4.5 floor. */
      --color-neutral:     oklch(49%   0.016 78);
      --color-muted:       oklch(40%   0.018 78);
      --color-ink-2:       oklch(29%   0.018 78);
      --color-ink:         oklch(19%   0.014 78);
      --color-accent:        oklch(46%   0.120 152);
      --color-accent-hover:  oklch(41%   0.115 152);
      --color-accent-active: oklch(38%   0.110 152);
      --color-accent-ink:    oklch(99%   0.004 150);
      --color-focus:         oklch(45%   0.150 255);
      --color-shadow:        oklch(19% 0.014 78 / 0.22);
      /* Marka rozetinin yumuşak zemini — kurumsal dursun diye lacivert tonu, yeşil değil. */
      --color-badge:         oklch(92.0% 0.034 92);
      /* Parşömen zeminin üstünde duran "beyaz kâğıt" — kimlik kartları bunun üstünde. */
      --color-card:          oklch(98.5% 0.014 94);
      /* Mühür kırmızısı: yalnız küçük işaretlerde (rozet noktası, ok, § ) — metin rengi DEĞİL. */
      --color-seal:          oklch(45%   0.130 28);
      --color-badge-edge:    oklch(82.5% 0.038 92);

      /* ── The dark band · one deep beat per page, light → dark → light ── */
      --color-band:        oklch(21%  0.016 78);
      --color-band-2:      oklch(25%  0.016 78);
      --color-band-ink:    oklch(96%  0.010 88);
      --color-band-muted:  oklch(78%  0.014 88);
      --color-band-rule:   oklch(35%  0.016 78);
      --color-accent-lift: oklch(74%  0.150 152);

      /* ── Luminous ground + bright glass (not matte frost) ── */
      /* A yönü «Канцелярия»: cam ve renkli ışıma yok — kâğıt, çizgi ve mürekkep.
         Token'lar duruyor ki bileşen kuralları kırılmasın, ama hepsi düz kâğıda çözülüyor. */
      --wash-cool:      oklch(94.4% 0.030 92);
      --wash-warm:      oklch(95.0% 0.030 96);
      --glass-fill:     var(--color-card);
      --glass-edge:     var(--color-rule);
      --glass-specular: transparent;
      --glass-blur:     none;
      --glass-shadow:   0 1px 0 var(--color-rule-2);

      /* ── Type · Geist (display + body) + JetBrains Mono (outlier: stage numerals, meta labels) ── */
      --font-display: "PT Serif", Georgia, "Times New Roman", serif;
      --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
      --font-outlier: "JetBrains Mono", ui-monospace, monospace;

      /* ── Scale · 1.25 major third ── */
      --text-xs:   0.8rem;
      --text-sm:   0.875rem;
      --text-base: 1rem;
      --text-md:   1.125rem;
      --text-lg:   1.375rem;
      --text-xl:   1.75rem;
      --text-2xl:  2.1875rem;
      /* Every translated headline lands in the 51–90 char bucket (TR 52 · RU 64 · EN 55 · UK 63),
         so display-s is capped low enough that the longest of them stays at three lines. */
      --text-display-s: clamp(1.75rem, 2.2vw + 0.7rem, 2.5rem);
      --text-display:   clamp(2rem, 3.1vw + 0.9rem, 3.25rem);

      /* ── Space · 4pt ── */
      --space-3xs: 0.25rem; --space-2xs: 0.5rem;  --space-xs: 0.75rem;
      --space-sm:  1rem;    --space-md:  1.5rem;  --space-lg: 2rem;
      --space-xl:  3rem;    --space-2xl: 4.5rem;  --space-3xl: 7rem;

      --page-max: 72rem;
      --page-gutter: clamp(1rem, 4vw, 2.5rem);

      --rule-hair: 1px;
      --radius-card: 3px;
      --radius-input: 3px;
      --radius-pill: 999px;

      --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
      --dur-short: 180ms;
      --dur-mid:   280ms;

      --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 500; --z-float: 600; --z-modal: 1000;
    }


    /* ── A yönü: serif başlık ayarı ─────────────────────────────────────
       PT Serif'in x-yüksekliği Inter'den küçük; başlıklarda satır aralığı
       ve harf aralığı buna göre sıkılaştırıldı. Gövde metni Inter kalıyor. */
    h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.012em; }
    /* Rehber/belge sayfalarında başlık ile giriş paragrafı bitişikti: .hero h1
       kuralı yalnız ana sayfaya uyuyor, bu sayfalar .sec--hero kullanıyor. */
    h1 + .lead, h1 + p { margin-top: var(--space-sm); }
    h1 { line-height: 1.1; }
    h2 { line-height: 1.15; }
    .lead, .hero p, p { font-family: var(--font-body); }
    /* ── Parşömen dokusu ────────────────────────────────────────────────
       assets/parsomen.svg: feTurbulence kırışıklık + tanecik (kendi sunucumuzda,
       CSP self). Sabit katman + multiply: beyaz alanlarda hafif kırışıklık,
       koyu bantta neredeyse görünmez. pointer-events yok, tıklamayı etkilemez.
       Kaldırmak istersen yalnız bu bloğu sil. */
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 2000;
      pointer-events: none;
      background: url("parsomen.svg");
      background-size: 1000px 1000px;
      mix-blend-mode: multiply;
      opacity: 0.85;
    }
    /* Kenar vinyeti: sayfanın kenarları hafifçe kararır — elde tutulmuş kâğıt.
       Tek radial-gradient, tekrar etmez; dokunun kardeş katmanı. */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 1999;
      pointer-events: none;
      background: radial-gradient(120% 95% at 50% 38%,
        transparent 52%, oklch(48% 0.055 82 / 0.16) 100%);
      mix-blend-mode: multiply;
    }

    *, *::before, *::after { box-sizing: border-box; }

    html, body { overflow-x: clip; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

    body {
      margin: 0;
      background: var(--color-paper);
      color: var(--color-ink-2);
      font-family: var(--font-body);
      font-weight: 400;
      font-size: var(--text-base);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    h1, h2, h3 {
      font-family: var(--font-display);
      color: var(--color-ink);
      font-weight: 600;
      letter-spacing: -0.025em;
      line-height: 1.12;
      margin: 0;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    p { margin: 0; }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    ul { list-style: none; margin: 0; padding: 0; }

    :focus-visible {
      outline: 2px solid var(--color-focus);
      outline-offset: 3px;
      border-radius: 2px;
    }

    .wrap {
      width: 100%;
      max-width: var(--page-max);
      margin-inline: auto;
      padding-inline: var(--page-gutter);
    }

    .lead {
      color: var(--color-muted);
      font-size: var(--text-md);
      line-height: 1.6;
      max-width: 58ch;
    }

    .meta-label {
      font-family: var(--font-outlier);
      font-size: var(--text-xs);
      font-weight: 500;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--color-neutral);
    }

    /* ── Buttons ─────────────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2xs);
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      min-height: 44px;
      padding: 0 var(--space-md);
      border: var(--rule-hair) solid transparent;
      border-radius: var(--radius-pill);
      cursor: pointer;
      transition: background-color var(--dur-short) var(--ease-out),
                  border-color var(--dur-short) var(--ease-out),
                  color var(--dur-short) var(--ease-out),
                  transform var(--dur-short) var(--ease-out);
    }
    .btn:active { transform: scale(0.97); }
    .btn svg { width: 18px; height: 18px; flex: none; }

    .btn--accent { background: var(--color-accent); color: var(--color-accent-ink); }
    .btn--outline { background: transparent; color: var(--color-ink); border-color: var(--color-control-edge); }

    @media (hover: hover) and (pointer: fine) {
      .btn--accent:hover { background: var(--color-accent-hover); }
      .btn--outline:hover { border-color: var(--color-ink); background: var(--color-paper-2); }
    }
    .btn--accent:active { background: var(--color-accent-active); }
    .btn:disabled, .btn[aria-disabled="true"] {
      opacity: 0.55;
      cursor: not-allowed;
      background: var(--color-paper-3);
      color: var(--color-muted);
      border-color: var(--color-rule);
    }

    /* ── Nav · N1b canonical three-section ───────────────────── */
    /* Cam her zaman açık; kaydırınca yoğunlaşıyor. Üstteyken arkasında kıracak
       içerik olmadığı için hafif tutuldu — sabit yoğun cam orada düz bir bar gibi durur. */
    .nav {
      position: sticky;
      top: 0;
      z-index: var(--z-nav);
      background: color-mix(in oklch, var(--color-paper) 70%, transparent);
      backdrop-filter: blur(16px) saturate(150%);
      -webkit-backdrop-filter: blur(16px) saturate(150%);
      border-bottom: var(--rule-hair) solid var(--color-rule);
      transition: background-color var(--dur-mid) var(--ease-out),
                  border-color var(--dur-mid) var(--ease-out),
                  box-shadow var(--dur-mid) var(--ease-out);
    }
    .nav.is-scrolled {
      background: color-mix(in oklch, var(--color-paper) 88%, transparent);
      backdrop-filter: blur(22px) saturate(175%);
      -webkit-backdrop-filter: blur(22px) saturate(175%);
      border-bottom-color: var(--color-rule-2);
      box-shadow: 0 8px 24px -20px var(--color-shadow);
    }
    .nav__inner {
      max-width: var(--page-max);
      margin-inline: auto;
      padding-inline: var(--page-gutter);
      min-height: 68px;
      display: grid;
      grid-template-columns: minmax(0, auto) 1fr auto;
      align-items: center;
      gap: var(--space-2xs);
    }
    .brand { display: flex; align-items: center; gap: var(--space-2xs); min-width: 0; min-height: 44px; }
    /* Yumuşak rozet: dolgu + hafif kenar, ikon mürekkep renginde. */
    .brand__mark {
      width: 38px; height: 38px; flex: none;
      display: grid; place-items: center;
      background: var(--color-badge);
      border: var(--rule-hair) solid var(--color-badge-edge);
      border-radius: 11px;
      color: var(--color-ink);
      transition: background-color var(--dur-short) var(--ease-out);
    }
    .brand__mark svg { width: 20px; height: 20px; }
    @media (hover: hover) and (pointer: fine) {
      .brand:hover .brand__mark { background: var(--color-badge-edge); }
    }
    /* Mobile-first: at the narrowest widths the seal alone carries the brand — the full
       name is one scroll away in the hero and the footer. Name returns at 23rem, the
       notarised-translation subtitle at 40rem. Ellipsis is the safety net, not the plan. */
    .brand__text { display: none; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; }
    .brand__name {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 0.8125rem;
      letter-spacing: -0.02em;
      color: var(--color-ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* Tipografik hiyerarşi: ad yarı-kalın ve baskın, alt satır geniş harf aralıklı ve geri planda. */
    .brand__sub {
      display: none;
      font-family: var(--font-outlier);
      font-size: 0.6875rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-muted);
      opacity: 0.75;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .nav__center { justify-self: center; display: none; gap: var(--space-md); }

    /* Mobilde nav gizli olduğu için rehberlere tek giriş burası — silme. */
    .hero__guides {
      display: inline-flex; align-items: center; gap: var(--space-2xs);
      margin-top: var(--space-md); font-size: var(--text-sm);
      color: var(--color-ink-2); text-decoration: none;
      border-bottom: 1px solid var(--color-rule-2); padding-bottom: 2px;
    }
    .hero__guides span[aria-hidden] { color: var(--color-accent); }
    @media (hover: hover) and (pointer: fine) {
      .hero__guides:hover { color: var(--color-ink); border-bottom-color: var(--color-accent); }
    }
    .nav__link {
      position: relative;
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-muted);
      white-space: nowrap;
      padding-block: var(--space-2xs);
      transition: color var(--dur-short) var(--ease-out);
    }
    .nav__link::after {
      content: "";
      position: absolute;
      left: 0; bottom: 2px;
      width: 100%; height: 1px;
      background: var(--color-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--dur-mid) var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .nav__link:hover { color: var(--color-ink); }
      .nav__link:hover::after { transform: scaleX(1); }
    }
    .nav__link:focus-visible { color: var(--color-ink); }

    .nav__right { justify-self: end; display: flex; align-items: center; gap: var(--space-2xs); }

    .langs {
      position: relative;
      display: flex;
      gap: 1px;
      padding: 2px;
      border: var(--rule-hair) solid var(--color-rule);
      border-radius: var(--radius-pill);
      background: var(--color-paper-2);
    }
    /* Seçici hap AKTİF dilin altında durur — imleci takip ETMEZ.
       Neden değişti: hap gezinirken aktif dilin yazısı beyaz kalıyor, hap ise
       ondan ayrılmış oluyordu → açık zemin üstünde beyaz yazı, okunmuyordu
       (kullanıcı bildirdi). Renk 180ms'de, hap 340ms'de hareket ettiği için
       arada okunmaz bir pencere de vardı. Artık beyaz yazı yalnızca hapın
       gerçekten altında olduğu yerde var; hover ayrı ve her zaman okunur.
       JS yoksa aktif dil yine düz haple gösterilir (aşağıdaki yedek). */

    /* ── Dil değiştirici: yuvarlak bayrak + dil kodu ────────────────────────
       Bayraklar circle-flags (MIT) — kendi sunucumuzda, CDN yok (CSP: self).
       Bayrak alt="" ve aria-hidden: anlamı taşıyan şey kod ve title, çünkü
       bayrak ülkeyi gösterir, dili değil (Rusça konuşan herkes Rusya'dan
       değildir). EN için gb.svg kullanılıyor. */
    .langs__flag {
      width: 15px; height: 15px; flex: none; border-radius: var(--radius-pill);
      display: block;
      box-shadow: 0 0 0 1px oklch(19% 0.014 78 / 0.16);
    }
    .langs__code { line-height: 1; }
    /* Bağlantı grid olarak tanımlı (place-items:center); bayrak + kod yan yana
       dursun diye satır akışına çeviriyoruz. min-width kodu tek başına ölçüyordu. */
    .langs a { min-width: 0; padding-inline: 9px; }
    @media (max-width: 480px) {
      /* Dar telefonda dört bayrak + dört kod sığmaz: kodlar düşer, bayrak kalır.
         Erişilebilirlik title ve hreflang ile korunuyor. */
      .langs__code { position: absolute; width: 1px; height: 1px; overflow: hidden;
                     clip-path: inset(50%); white-space: nowrap; }
      .langs a { padding-inline: 7px; gap: 0; }
      .langs__flag { width: 18px; height: 18px; }
    }

    .langs__thumb {
      position: absolute;
      top: 0; left: 0;
      z-index: 0;
      border-radius: var(--radius-pill);
      background: var(--color-ink);
      pointer-events: none;
      transition: transform 340ms var(--ease-out), width 340ms var(--ease-out);
      will-change: transform, width;
    }
    /* The language switch is the first thing a Russian- or Ukrainian-speaking visitor
       reaches for, so it stays visible at every width rather than folding into a menu.
       36×44 keeps a comfortable touch target and still fits four codes at 320 px. */
    /* Tek sayfalık sürümde <button>, çok dilli statik sürümde <a> — ikisi de aynı görünür. */
    .langs button,
    .langs a {
      /* Bayrak + dil kodu yan yana duracak: grid değil satır akışı. */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-family: var(--font-outlier);
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--color-neutral);
      background: none;
      border: 0;
      cursor: pointer;
      text-decoration: none;
      min-width: 32px;
      min-height: 44px;
      padding-inline: var(--space-2xs);
      border-radius: var(--radius-pill);
      transition: color var(--dur-short) var(--ease-out),
                  background-color var(--dur-short) var(--ease-out);
    }
    .langs button, .langs a { position: relative; z-index: 1; }
    /* Yedek: kayan seçici yokken aktif dil düz haple gösterilir. */
    .langs button[aria-pressed="true"],
    .langs a[aria-current="true"] { background: var(--color-ink); color: var(--color-paper); }
    /* Seçici devredeyken zemini o taşır; hap kaldırılır. */
    .langs.has-thumb a[aria-current="true"] { background: transparent; }
    .langs.has-thumb a[aria-current="true"] { color: var(--color-paper); }
    /* Hover/odak: aktif olmayan dil koyulaşır ve yumuşak bir zemin alır.
       Hiçbir aşamada açık-üstüne-açık ya da koyu-üstüne-koyu oluşmaz. */
    @media (hover: hover) and (pointer: fine) {
      .langs button:hover:not([aria-pressed="true"]),
      .langs a:hover:not([aria-current="true"]) {
        color: var(--color-ink);
        background: var(--color-paper-3);
      }
    }
    .langs a:focus-visible:not([aria-current="true"]) {
      color: var(--color-ink);
      background: var(--color-paper-3);
    }
    .langs button:active, .langs a:active { color: var(--color-ink); }
    .langs button:disabled { opacity: 0.55; cursor: not-allowed; }

    /* Hidden on phones — the floating button already carries WhatsApp there. */
    .nav__cta-icon {
      display: none;
      place-items: center;
      width: 44px; height: 44px;
      border-radius: var(--radius-pill);
      background: var(--color-accent);
      color: var(--color-accent-ink);
      flex: none;
    }
    .nav__cta-icon svg { width: 20px; height: 20px; }

    /* ── Section rhythm · deliberately uneven ────────────────── */
    .sec { padding-block: var(--space-2xl); }
    .sec--hero { padding-block: var(--space-xl) var(--space-2xl); }
    .sec--process { padding-block: var(--space-3xl) var(--space-2xl); }
    .sec--contact { padding-block: var(--space-2xl) var(--space-xl); }

    .sec__head { max-width: 46ch; margin-bottom: var(--space-xl); }
    .sec__head h2 { font-size: var(--text-xl); margin-bottom: var(--space-xs); }

    /* ── Hero · H2 split diptych 7/5, right = proof column ───── */
    .hero__grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-xl);
      align-items: start;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      font-size: var(--text-xs);
      color: var(--color-muted);
      border: var(--rule-hair) solid var(--color-rule);
      border-radius: var(--radius-input);
      padding: var(--space-3xs) var(--space-xs);
      margin-bottom: var(--space-md);
      background: var(--color-paper-2);
      align-items: flex-start;
      max-width: 44ch;
    }
    .badge__dot {
      width: 6px; height: 6px; flex: none; margin-top: 0.45em;
      border-radius: var(--radius-pill);
      background: var(--color-seal);
    }

    .hero h1 {
      font-size: var(--text-display-s);
      /* PT Serif 400/700 yüklü — 600 sentetik kalınlaşma yapar, o yüzden 700. */
      font-weight: 700;
      margin-bottom: var(--space-md);
    }
    /* The translated strings carry <span class="accent"> — a drawn underline, never gradient text. */
    .hero h1 .accent {
      color: var(--color-ink);
      background-image: linear-gradient(var(--color-accent), var(--color-accent));
      background-repeat: no-repeat;
      background-size: 100% 2px;
      background-position: 0 calc(100% - 0.06em);
      padding-bottom: 0.06em;
    }

    .hero__cta {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);
      margin-top: var(--space-lg);
    }

    /* Mesai dışı bilgisi — CTA'yı asla engellemez, sadece beklenti kurar. */
    .hours-note {
      display: flex;
      align-items: center;
      gap: var(--space-2xs);
      margin-top: var(--space-sm);
      padding: var(--space-2xs) var(--space-xs);
      border: var(--rule-hair) solid var(--color-rule);
      border-radius: var(--radius-input);
      background: var(--color-paper-2);
      font-size: var(--text-sm);
      color: var(--color-muted);
      max-width: 52ch;
    }
    .hours-note::before {
      content: "";
      width: 6px; height: 6px; flex: none;
      border-radius: var(--radius-pill);
      background: var(--color-neutral);
    }
    .hours-note[hidden] { display: none; }

    .trust {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs) var(--space-md);
      margin-top: var(--space-lg);
      padding-top: var(--space-md);
      border-top: var(--rule-hair) solid var(--color-rule);
    }
    .trust li {
      display: flex;
      align-items: center;
      gap: var(--space-3xs);
      font-size: var(--text-sm);
      color: var(--color-muted);
    }
    .trust svg { width: 15px; height: 15px; flex: none; color: var(--color-neutral); }

    /* Proof column — the translator, then the language pairs, then the guarantees. */

    /* ── Künye kartı · «kim çeviriyor» ──────────────────────────────────────
       Eski hâli iki sütunlu uzun bir bloktu: büyük fotoğraf, altında boşluk,
       düzensiz saran rakam satırı. Burada tek çerçeve içinde toplandı —
       resmî bir künye/kayıt kartı gibi. Masaüstünde fotoğraf iki satır boyu
       uzanır, rakamlar ve eylem satırı kartın tam genişliğini kullanır. */
    .idcard {
      display: grid;
      gap: var(--space-md);
      padding: var(--space-md);
      border: var(--rule-hair) solid var(--color-rule);
      border-radius: var(--radius-card);
      background: var(--color-card);
    }
    .idcard__photo {
      margin: 0;
      width: 104px; height: 104px;
      border: var(--rule-hair) solid var(--color-rule-2);
      border-radius: var(--radius-input);
      overflow: hidden;
      background: var(--color-paper-3);
    }
    .idcard__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
    .idcard__name {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: var(--text-lg);
      line-height: 1.15;
      color: var(--color-ink);
    }
    .idcard__role { margin-top: 2px; font-size: var(--text-sm); color: var(--color-muted); }
    .idcard__sep { color: var(--color-rule-2); margin-inline: 0.15em; }
    .idcard__p1 { font-size: var(--text-base); line-height: 1.6; color: var(--color-ink-2); max-width: 64ch; }
    .idcard__p2 { margin-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.6; color: var(--color-muted); max-width: 64ch; }
    .idcard__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
    .idcard__hours { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--color-neutral); }
    .idcard__hours svg { width: 1em; height: 1em; flex: none; }

    /* Rakam şeridi: hücreler ince çizgiyle ayrılır — evrak tablosu hissi. */
    .idcard .stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
      border-top: var(--rule-hair) solid var(--color-rule);
      border-left: var(--rule-hair) solid var(--color-rule);
    }
    .idcard .stat {
      display: grid;
      gap: 2px;
      padding: var(--space-xs) var(--space-sm);
      border-right: var(--rule-hair) solid var(--color-rule);
      border-bottom: var(--rule-hair) solid var(--color-rule);
    }
    .idcard .stat__num {
      font-family: var(--font-outlier);
      font-weight: 500;
      font-size: var(--text-lg);
      line-height: 1.1;
      color: var(--color-ink);
      font-variant-numeric: tabular-nums;
    }
    .idcard .stat__label { font-size: var(--text-xs); color: var(--color-neutral); line-height: 1.35; }

    @media (min-width: 52rem) {
      .idcard {
        grid-template-columns: 10.5rem minmax(0, 1fr);
        column-gap: var(--space-lg);
        row-gap: var(--space-sm);
        padding: var(--space-lg);
        align-items: start;
      }
      .idcard__photo { width: 10.5rem; height: 10.5rem; grid-row: 1 / span 2; }
      .idcard__id   { grid-column: 2; align-self: end; }
      .idcard__body { grid-column: 2; }
      .idcard .stats,
      .idcard__cta  { grid-column: 1 / -1; }
      .idcard .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-2xs); }
    }

    .proof {
      border: var(--rule-hair) solid var(--color-rule);
      border-radius: var(--radius-card);
      /* Prototip A'daki his: krem zemin ÜSTÜNDE beyaz kâğıt. paper-2 zeminden
         koyuydu, kart zeminin içine gömülüyordu. */
      background: var(--color-card);
      padding: var(--space-md);
    }
    .proof__person { display: flex; align-items: center; gap: var(--space-sm); }
    .proof__photo {
      width: 96px; height: 96px; flex: none;
      border-radius: var(--radius-card);
      overflow: hidden;
      border: var(--rule-hair) solid var(--color-rule-2);
      background: var(--color-paper-3);
    }
    @media (min-width: 60rem) {
      .proof__photo { width: 128px; height: 128px; }
    }
    .proof__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
    .proof__name {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: var(--text-lg);
      letter-spacing: -0.025em;
      line-height: 1.15;
      color: var(--color-ink);
    }
    .proof__role { font-size: var(--text-xs); color: var(--color-muted); }
    .proof__office { font-size: var(--text-xs); color: var(--color-neutral); margin-top: 2px; }

    .proof__block { margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
    .pairs { display: flex; flex-wrap: wrap; gap: var(--space-3xs); margin-top: var(--space-2xs); }
    .pair {
      font-family: var(--font-outlier);
      font-size: var(--text-xs);
      color: var(--color-ink-2);
      border: var(--rule-hair) solid var(--color-rule);
      border-radius: var(--radius-input);
      padding: 3px var(--space-2xs);
      background: var(--color-paper);
      white-space: nowrap;
    }
    .pair span { color: var(--color-neutral); }

    .guarantees { margin-top: var(--space-2xs); }
    .guarantees li {
      display: flex;
      gap: var(--space-2xs);
      align-items: flex-start;
      /* Kompakt kart: satır başına ~10px kazanç, dört madde de ilk ekranda kalıyor. */
      padding-block: 3px;
      font-size: var(--text-sm);
      color: var(--color-muted);
      line-height: 1.45;
    }
    .guarantees svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--color-accent); }

    /* ── Services · F3 tabular spec sheet ────────────────────── */
    .spec { border-top: var(--rule-hair) solid var(--color-rule); }
    .spec__row {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-3xs);
      padding-block: var(--space-sm);
      border-bottom: var(--rule-hair) solid var(--color-rule);
    }
    .spec__key {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: var(--text-base);
      letter-spacing: -0.015em;
      color: var(--color-ink);
      display: flex;
      align-items: center;
      gap: var(--space-2xs);
    }
    .spec__icon { width: 19px; height: 19px; flex: none; color: var(--color-neutral); }
    .spec__val { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.55; }

    .index-row {
      margin-top: var(--space-lg);
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3xs) var(--space-sm);
    }
    .index-row li {
      font-size: var(--text-sm);
      color: var(--color-muted);
      display: flex;
      align-items: center;
      gap: var(--space-3xs);
    }
    .index-row li::before {
      content: "";
      width: 3px; height: 3px; flex: none;
      border-radius: var(--radius-pill);
      background: var(--color-rule-2);
    }

    /* ── Ülke kapsamı ────────────────────────────────────────── */
    .countries {
      margin-top: var(--space-2xl);
      padding-top: var(--space-lg);
      border-top: var(--rule-hair) solid var(--color-rule);
    }
    .countries h3 { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
    .ctry-list {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);
      margin-top: var(--space-md);
    }
    .ctry-list .pair { font-family: var(--font-body); font-size: var(--text-sm); padding: var(--space-3xs) var(--space-xs); }
    .ctry-note {
      margin-top: var(--space-md);
      font-size: var(--text-sm);
      color: var(--color-muted);
      max-width: 62ch;
    }

    /* ── Sık karşılaşılan sorunlar · hairline bloklar ────────── */
    .problems {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-md);
    }
    .problem {
      border: var(--rule-hair) solid var(--color-rule);
      border-radius: var(--radius-card);
      padding: var(--space-md);
      background: var(--color-paper-2);
    }
    .problem h3 {
      font-size: var(--text-base);
      font-weight: 600;
      margin-bottom: var(--space-3xs);
      display: flex;
      gap: var(--space-2xs);
      align-items: baseline;
    }
    .problem h3::before {
      content: "";
      width: 5px; height: 5px; flex: none;
      border-radius: var(--radius-pill);
      background: var(--color-accent);
      transform: translateY(-2px);
    }
    .problem p { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.55; }

    /* ── Process · F4 step sequence, the page spine ──────────── */
    .stages { display: grid; gap: 0; }
    .stage {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-2xs);
      padding-block: var(--space-md);
      border-top: var(--rule-hair) solid var(--color-rule);
      position: relative;
    }
    .stage:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
    .stage__num {
      font-family: var(--font-outlier);
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-accent);
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
    }
    .stage__body h3 {
      font-size: var(--text-md);
      font-weight: 600;
      margin-bottom: var(--space-3xs);
    }
    .stage__body p { font-size: var(--text-sm); color: var(--color-muted); max-width: 52ch; }

    /* ── FAQ · hairline rules, no cards ──────────────────────── */
    .faq { border-top: var(--rule-hair) solid var(--color-rule); max-width: 52rem; }
    .faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
    .faq summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--space-sm);
      padding-block: var(--space-sm);
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--text-base);
      letter-spacing: -0.015em;
      color: var(--color-ink);
      min-height: 44px;
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after {
      content: "";
      width: 11px; height: 11px; flex: none;
      margin-top: 6px;
      border-right: 1.5px solid var(--color-neutral);
      border-bottom: 1.5px solid var(--color-neutral);
      transform: rotate(45deg);
      transition: transform var(--dur-mid) var(--ease-out);
    }
    .faq details[open] summary::after { transform: rotate(-135deg); }
    .faq details p {
      font-size: var(--text-sm);
      color: var(--color-muted);
      padding-bottom: var(--space-sm);
      max-width: 62ch;
    }

    /* ── Contact ─────────────────────────────────────────────── */
    .contact__grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-xl);
      align-items: start;
    }
    .contact__cta { margin-top: var(--space-lg); width: 100%; max-width: 22rem; }

    .details {
      border: var(--rule-hair) solid var(--color-rule);
      border-radius: var(--radius-card);
      overflow: hidden;
    }
    .details__row {
      display: grid;
      gap: 2px;
      padding: var(--space-xs) var(--space-md);
      border-bottom: var(--rule-hair) solid var(--color-rule);
    }
    .details__row:last-child { border-bottom: 0; }
    .details__row b {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--text-sm);
      color: var(--color-ink);
      letter-spacing: -0.01em;
    }
    .details__row a {
      display: inline-block;
      padding-block: var(--space-3xs);
      text-decoration: underline;
      text-decoration-color: var(--color-rule-2);
      text-underline-offset: 3px;
    }
    @media (hover: hover) and (pointer: fine) {
      .details__row a:hover { text-decoration-color: var(--color-accent); }
    }

    /* ── Rehber sayfaları · kaynak künyesi ───────────────────── */
    .source-box {
      margin-top: var(--space-2xl);
      padding: var(--space-md);
      border: var(--rule-hair) solid var(--color-rule);
      border-radius: var(--radius-card);
      background: var(--color-paper-2);
      max-width: 62ch;
    }
    .source-box p { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-3xs); }
    .source-box a { text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; }
    @media (hover: hover) and (pointer: fine) {
      .source-box a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
    }
    .source-box__note { padding-top: var(--space-2xs); border-top: var(--rule-hair) solid var(--color-rule); margin-top: var(--space-2xs) !important; }
    /* Rehberdeki tasdik rejimi bloğunda ülke listesi — koyu bant üzerinde okunur. */
    .regime__countries {
      font-family: var(--font-outlier);
      font-size: var(--text-xs);
      letter-spacing: 0.02em;
      color: var(--color-accent-lift);
      margin-bottom: var(--space-2xs);
    }

    /* ── Belge türü sayfaları ────────────────────────────────── */
    .crumb {
      font-family: var(--font-outlier);
      font-size: var(--text-xs);
      color: var(--color-neutral);
      margin-bottom: var(--space-md);
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3xs);
    }
    .crumb a { text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; }
    @media (hover: hover) and (pointer: fine) {
      .crumb a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
    }
    .doc-list { margin-top: 0; max-width: 62ch; }
    .doc-list li { padding-block: var(--space-2xs); font-size: var(--text-md); }
    .doc-others { margin-top: var(--space-sm); flex-direction: column; gap: var(--space-2xs); }
    .doc-others li::before { display: none; }
    .doc-others a {
      font-size: var(--text-md);
      color: var(--color-ink-2);
      text-decoration: underline;
      text-decoration-color: var(--color-rule-2);
      text-underline-offset: 4px;
    }
    @media (hover: hover) and (pointer: fine) {
      .doc-others a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
    }
    /* Ana sayfadaki belge listesinde artık bağlantı var. */
    .index-row a {
      color: inherit;
      text-decoration: underline;
      text-decoration-color: var(--color-rule-2);
      text-underline-offset: 3px;
    }
    @media (hover: hover) and (pointer: fine) {
      .index-row a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
    }

    /* ── Footer · Ft5 Statement ──────────────────────────────── */
    .foot { padding-block: var(--space-2xl) var(--space-xl); }
    .foot__line {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(1.5rem, 3.4vw, 2.25rem);
      line-height: 1.15;
      letter-spacing: -0.03em;
      color: var(--color-ink);
      max-width: 28ch;
      overflow-wrap: anywhere;
    }
    .foot__meta {
      margin-top: var(--space-xl);
      padding-top: var(--space-sm);
      border-top: var(--rule-hair) solid var(--color-rule);
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs) var(--space-md);
      align-items: baseline;
      justify-content: space-between;
      font-size: var(--text-xs);
      color: var(--color-neutral);
    }
    .foot__meta a { white-space: nowrap; text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; }
    @media (hover: hover) and (pointer: fine) {
      .foot__meta a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
    }
    .foot__note { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-neutral); max-width: 64ch; }

    /* ── Floating WhatsApp affordance ────────────────────────── */
    .float-wa {
      position: fixed;
      right: clamp(0.75rem, 3vw, 1.5rem);
      bottom: max(clamp(0.75rem, 3vw, 1.5rem), env(safe-area-inset-bottom));
      z-index: var(--z-float);
      display: inline-grid;
      place-items: center;
      width: 52px; height: 52px;
      border-radius: var(--radius-pill);
      background: var(--color-accent);
      color: var(--color-accent-ink);
      box-shadow: 0 6px 20px -6px var(--color-shadow);
      transition: background-color var(--dur-short) var(--ease-out),
                  transform var(--dur-short) var(--ease-out);
    }
    .float-wa:active { transform: scale(0.93); }
    .float-wa svg { width: 26px; height: 26px; }
    @media (hover: hover) and (pointer: fine) {
      .float-wa:hover { background: var(--color-accent-hover); }
    }
    .float-wa:active { background: var(--color-accent-active); }

    /* ── One orchestrated entrance — hero only, first load ───── */
    .enter { opacity: 0; transform: translateY(8px); }
    .is-ready .enter {
      opacity: 1;
      transform: none;
      transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
    }
    .is-ready .enter:nth-child(2) { transition-delay: 70ms; }

    /* ── Scroll-reveal — Motion `inView` deseni, kütüphanesiz ────
       Öğeler HTML'de görünür durur; .rv sınıfını JS gözlemden hemen
       önce ekler → JS'siz ortamda/robotta hiçbir şey gizli kalmaz. */
    .rv { opacity: 0; transform: translateY(14px); }
    .rv-in {
      opacity: 1;
      transform: none;
      transition: opacity 560ms var(--ease-out) var(--rv-d, 0ms),
                  transform 560ms var(--ease-out) var(--rv-d, 0ms);
    }

    /* ── AYNA çizim girişi — CSS stroke-dashoffset, kütüphanesiz ──
       Dash penceresi alt yolları sırayla tarar: sol dikey → sağ dikey →
       N diyagonali, ardından ayna parçaları. `both` doldurması yalnız
       animasyon kayıtlıyken etkir: JS yoksa (is-ready gelmez) logo tam
       görünür kalır. Uzunluklar: çerçeve 47.5 → 48, ayna 12.75 → 13.2. */
    @media (prefers-reduced-motion: no-preference) {
      .is-ready .brand__mark .bm-f { animation: bm-draw-f 700ms var(--ease-out) 120ms both; }
      .is-ready .brand__mark .bm-m { animation: bm-draw-m 460ms var(--ease-out) 640ms both; }
    }
    @keyframes bm-draw-f {
      from { stroke-dasharray: 48; stroke-dashoffset: 48; }
      to   { stroke-dasharray: 48; stroke-dashoffset: 0; }
    }
    @keyframes bm-draw-m {
      from { stroke-dasharray: 13.2; stroke-dashoffset: 13.2; }
      to   { stroke-dasharray: 13.2; stroke-dashoffset: 0; }
    }

    /* ── Spotlight — imleci izleyen ışık; yalnız gerçek imleçte.
       Kütüphanesiz: radial-gradient + 2 CSS değişkeni. Dokunmatikte
       (hover yok) hiç etkinleşmez — hedef kitle telefonu düşünülerek. */
    @media (hover: hover) and (pointer: fine) {
      .stage, .guide-link { position: relative; overflow: hidden; }
      .stage::after, .guide-link::after {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        opacity: 0; transition: opacity var(--dur-mid) var(--ease-out);
        background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
                    rgba(0, 121, 54, 0.09), transparent 65%);
      }
      .stage:hover::after, .guide-link:hover::after { opacity: 1; }
    }

    /* ── Breakpoints · min-width, content-driven ─────────────── */
    @media (min-width: 23rem) {
      .brand__text { display: flex; }
    }

    @media (min-width: 40rem) {
      .spec__row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-md); align-items: baseline; }
      .stage { grid-template-columns: minmax(0, 5rem) minmax(0, 1fr); gap: var(--space-md); }
      .problems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .nav__inner { gap: var(--space-sm); }
      .nav__cta-icon { display: inline-grid; }
      .brand__name { font-size: var(--text-sm); }
      .brand__sub { display: block; }
      .langs button { min-width: 36px; }
      .sec__head h2 { font-size: var(--text-2xl); }
    }

    @media (min-width: 60rem) {
      .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); }
      .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--space-2xl); }
      .nav__center { display: flex; }
      .proof { padding: var(--space-lg); }
      .stage { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
    }

    /* ══════════════════════════════════════════════════════════════════════
       BACKGROUND TREATMENTS — three ways to give the page tonal depth.
       Toggled via [data-bg] on <html>. Only one ships.
       ══════════════════════════════════════════════════════════════════════ */

    /* ── A · TONAL — depth from structure, no glass ───────────────────────
       Section surfaces alternate, and the process spine becomes one deep
       navy band. The brand navy stops being only a text colour and becomes
       a surface. Zero slop risk.                                          */
    [data-bg="tonal"] #services,
    [data-bg="hybrid"] #services { background: var(--color-paper-2); }

    [data-bg="tonal"] .sec--process,
    [data-bg="hybrid"] .sec--process {
      background: var(--color-band);
      color: var(--color-band-muted);
    }
    [data-bg="tonal"] .sec--process h2,
    [data-bg="tonal"] .sec--process h3,
    [data-bg="hybrid"] .sec--process h2,
    [data-bg="hybrid"] .sec--process h3 { color: var(--color-band-ink); }

    [data-bg="tonal"] .sec--process .lead,
    [data-bg="tonal"] .sec--process .stage__body p,
    [data-bg="hybrid"] .sec--process .lead,
    [data-bg="hybrid"] .sec--process .stage__body p { color: var(--color-band-muted); }

    [data-bg="tonal"] .sec--process .stage,
    [data-bg="hybrid"] .sec--process .stage { border-color: var(--color-band-rule); }

    [data-bg="tonal"] .sec--process .stage__num,
    [data-bg="hybrid"] .sec--process .stage__num { color: var(--color-accent-lift); }

    [data-bg="tonal"] .foot,
    [data-bg="hybrid"] .foot { background: var(--color-paper-2); }

    /* ── B · GLASS — luminous ground, bright specular glass ───────────────
       Two low-chroma washes in the brand's own hues (teal + the action
       green), fixed so they never drift. No animation, no orbs, no purple.
       The glass is high-clarity and specular-edged — never milky.         */
    [data-bg="glass"] body {
      /* Solid base first — the page stays readable if the washes never paint. */
      background-color: var(--color-paper);
      background-image:
        radial-gradient(105% 75% at 12% -8%, var(--wash-cool) 0%, transparent 58%),
        radial-gradient(85% 65% at 96% 6%, var(--wash-warm) 0%, transparent 55%),
        linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-3) 100%);
      background-attachment: fixed;
    }
    /* fixed attachment is a known scroll-jank source on mobile — pin it to desktop. */
    @media (max-width: 60rem) {
      [data-bg="glass"] body { background-attachment: scroll; }
    }
    [data-bg="glass"] .proof,
    [data-bg="glass"] .details,
    [data-bg="hybrid"] .proof,
    [data-bg="hybrid"] .details {
      background: var(--glass-fill);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-color: var(--glass-edge);
      box-shadow:
        inset 0 1px 0 var(--glass-specular),
        var(--glass-shadow);
    }
    [data-bg="glass"] .badge,
    [data-bg="hybrid"] .badge,
    [data-bg="glass"] .pair,
    [data-bg="hybrid"] .pair {
      background: var(--glass-fill);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-color: var(--glass-edge);
      box-shadow: inset 0 1px 0 var(--glass-specular);
    }
    [data-bg="glass"] .nav.is-scrolled,
    [data-bg="hybrid"] .nav.is-scrolled {
      background: var(--glass-fill);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      box-shadow: inset 0 1px 0 var(--glass-specular);
    }

    /* ── C · HYBRID — tonal architecture + glass where it has a job ───────
       The luminous wash is confined to the hero, so the glass panels there
       have something worth refracting; the rest of the page keeps the
       tonal rhythm and the dark process band.                             */
    [data-bg="hybrid"] .sec--hero {
      background:
        radial-gradient(88% 118% at 10% -6%, var(--wash-cool) 0%, transparent 62%),
        radial-gradient(66% 96% at 94% 4%, var(--wash-warm) 0%, transparent 58%);
    }

    /* ── D · LIQUID — real refraction, ported from liquid-glass-react ─────
       Same technique as the npm package (MIT), rebuilt without React:
       an SVG feDisplacementMap driven by a gradient map refracts the
       backdrop at the panel edges while the centre stays optically clear,
       with a mild three-pass chromatic split. Progressive enhancement —
       browsers without backdrop `filter: url()` keep plain frosted glass. */
    [data-bg="liquid"] body {
      background-color: var(--color-paper);
      background-image:
        radial-gradient(105% 75% at 12% -8%, var(--wash-cool) 0%, transparent 58%),
        radial-gradient(85% 65% at 96% 6%, var(--wash-warm) 0%, transparent 55%),
        linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-3) 100%);
    }
    @media (min-width: 60rem) {
      [data-bg="liquid"] body { background-attachment: fixed; }
    }

    [data-bg="liquid"] #services { background: transparent; }
    [data-bg="liquid"] .sec--process {
      background: var(--color-band);
      color: var(--color-band-muted);
    }
    [data-bg="liquid"] .sec--process h2,
    [data-bg="liquid"] .sec--process h3 { color: var(--color-band-ink); }
    [data-bg="liquid"] .sec--process .lead,
    [data-bg="liquid"] .sec--process .stage__body p { color: var(--color-band-muted); }
    [data-bg="liquid"] .sec--process .stage { border-color: var(--color-band-rule); }
    [data-bg="liquid"] .sec--process .stage__num { color: var(--color-accent-lift); }

    /* ── liquid-web (koirodev, MIT) · assets/liquid-core.min.js ───────────
       Kendi elle yazdığım filtre yerine kütüphane kullanılıyor: gerçek
       feDisplacementMap kırınımı + RGB kanal ayrıştırma + Firefox fallback.
       CDN DEĞİL, kendi sunucumuzda — CSP `script-src 'self'` harici kaynağı
       bloke eder. İlerlemeli zenginleştirme: JS çalışmazsa paneller mevcut
       parlak cam görünümünde kalır, hiçbir şey bozulmaz.                  */
    [data-bg="liquid"] .proof,
    [data-bg="liquid"] .details {
      position: relative;
      background: var(--glass-fill);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-color: var(--glass-edge);
      box-shadow: inset 0 1px 0 var(--glass-specular), var(--glass-shadow);
    }
    /* Kütüphane devreye girince dolguyu o üstlenir. */
    .lw-on[data-bg="liquid"] .proof,
    .lw-on[data-bg="liquid"] .details {
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    [data-bg="liquid"] .proof > *,
    [data-bg="liquid"] .details > * { position: relative; z-index: 1; }

    [data-bg="liquid"] .nav.is-scrolled {
      background: var(--glass-fill);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      box-shadow: inset 0 1px 0 var(--glass-specular);
    }

    /* Kırınım süstür; şeffaflığa duyarlı kullanıcı düz panel görür. */
    @media (prefers-reduced-transparency: reduce) {
      [data-bg="liquid"] .proof,
      [data-bg="liquid"] .details,
      .lw-on[data-bg="liquid"] .proof,
      .lw-on[data-bg="liquid"] .details {
        background: var(--color-paper-2);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
    }

    /* ── Seçim rengi · marka vurgusu metin seçiminde de konuşur ─────────── */
    ::selection { background: var(--color-accent); color: var(--color-accent-ink); }

    /* ── Sayfalar arası geçiş · cross-document View Transitions ───────────
       44 sayfalık MPA'da 0 KB JS ile yumuşak geçiş. Desteklemeyen tarayıcı
       (≈%16, düşüyor) anında geçer — hiçbir şey bozulmaz. Nav ve WhatsApp
       düğmesi kendi adlarıyla sabitlenir: sayfa değişirken yerlerinde kalır,
       yalnızca içerik akar.                                                */
    @view-transition { navigation: auto; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: 200ms; }
    .nav      { view-transition-name: site-nav; }
    .float-wa { view-transition-name: site-wa; }

    /* ── Kaydırmayla açılan bloklar · CSS scroll-driven, 0 KB JS ──────────
       Compositor'da koşar (transform+opacity), ana iş parçacığına dokunmaz.
       Desteklemeyen tarayıcı statik içerik görür — bu kitle için doğru
       zarif bozulma. Hero'ya dokunulmaz; onun kendi girişi var (.enter).  */
    @keyframes rise-in {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }
    /* Yapısal bloklar açılır; 19 belge etiketi ve 9 ülke hapı KASITLI olarak
       hariç — onlara da uygulanınca sayfa "her şey kıpırdıyor" hâline geliyordu.
       Süre YOK: scroll-driven animasyonda ilerlemeyi zaman değil, görünüm
       aralığı sürer (animation-range). */
    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        .spec__row, .stage, .problem, .faq details,
        .idcard, .deliver__viz, .deliver__list li {
          animation: rise-in var(--ease-out) both;
          animation-timeline: view();
          animation-range: entry 0% entry 55%;
        }
      }
    }

    /* ── Tanışın · gerçek yüz + doğrulanabilir rakamlar ───────────────────
       Tek kişilik güven işinde yüz = ürün. Rakamların hepsi sayfadaki
       içerikten doğrulanabilir (dil, belge türü, ülke, gün) — uydurma
       sayı yok (bkz content-home-extra.json kuralı).                      */
    .meet__grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-xl);
      align-items: center;
    }
    .meet__photo { margin: 0; max-width: 21rem; }
    .meet__photo img {
      width: 100%; height: auto;
      border-radius: var(--radius-card);
      border: var(--rule-hair) solid var(--color-rule-2);
      box-shadow: 0 18px 40px -24px var(--color-shadow);
    }
    .meet__body .meta-label { display: block; margin-bottom: var(--space-2xs); }
    .meet__body h2 { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
    .meet__p2 {
      margin-top: var(--space-sm);
      font-size: var(--text-sm);
      color: var(--color-muted);
      line-height: 1.6;
      max-width: 58ch;
    }
    .stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-md) var(--space-sm);
      margin-top: var(--space-lg);
      padding-top: var(--space-md);
      border-top: var(--rule-hair) solid var(--color-rule);
    }
    .stat { display: grid; gap: 2px; }
    .stat__num {
      font-family: var(--font-outlier);
      font-weight: 500;
      font-size: var(--text-xl);
      color: var(--color-ink);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
      line-height: 1.1;
    }
    .stat__label { font-size: var(--text-xs); color: var(--color-muted); }
    /* Tanışma bölümünün kapanışı: rakamlardan sonra tek eylem çağrısı.
       Bölüm sonundaki boşluğu doldurur ve okuyucuyu tam ikna anında yakalar. */
    .meet__cta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-sm) var(--space-md);
      margin-top: var(--space-lg);
    }
    .meet__hours {
      display: inline-flex;
      align-items: center;
      gap: var(--space-3xs);
      font-size: var(--text-sm);
      color: var(--color-muted);
    }
    .meet__hours svg { width: 15px; height: 15px; flex: none; color: var(--color-neutral); }
    @media (min-width: 40rem) {
      .meet__body h2 { font-size: var(--text-2xl); }
      .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (min-width: 60rem) {
      .meet__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
      .meet__photo { max-width: 24rem; justify-self: end; }
    }
    [data-bg="tonal"] .sec--meet,
    [data-bg="hybrid"] .sec--meet { background: var(--color-paper); }

    /* ── "Elinize ne geçiyor" · şematik anlatım ───────────────────────────
       BİLEREK okunabilir metin içermez ve gerçek form düzenini taklit etmez:
       amaç teslim edilecek ürünü göstermek, belge numunesi üretmek değil.
       Müşteri belgesi yayınlanmaz (KVKK + sitenin gizlilik taahhüdü).     */
    .deliver__grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-xl);
      align-items: center;
    }
    .deliver__viz { margin: 0; }
    .deliver__viz svg { width: 100%; height: auto; display: block; }
    .dv-sheet  { fill: var(--color-paper); stroke: var(--color-rule-2); stroke-width: 1.5; }
    .dv-line   { fill: var(--color-rule); }
    .dv-line--strong { fill: var(--color-rule-2); }
    .dv-seal   { fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
    .dv-sign   { fill: none; stroke: var(--color-neutral); stroke-width: 1.5; stroke-linecap: round; }
    .dv-arrow  { fill: none; stroke: var(--color-neutral); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .dv-tag    { fill: var(--color-paper-3); }
    .deliver__cap {
      display: flex;
      justify-content: space-between;
      gap: var(--space-sm);
      margin-top: var(--space-2xs);
      font-family: var(--font-outlier);
      font-size: var(--text-xs);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-neutral);
    }
    .deliver__list li {
      display: flex;
      gap: var(--space-2xs);
      align-items: flex-start;
      padding-block: var(--space-2xs);
      font-size: var(--text-sm);
      color: var(--color-muted);
      line-height: 1.55;
      border-bottom: var(--rule-hair) solid var(--color-rule);
    }
    .deliver__list li:last-child { border-bottom: 0; }
    .deliver__list svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--color-accent); }
    .deliver__note {
      margin-top: var(--space-md);
      font-size: var(--text-xs);
      color: var(--color-neutral);
      max-width: 58ch;
    }
    @media (min-width: 60rem) {
      .deliver__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); }
    }
    [data-bg="tonal"] .sec--deliver,
    [data-bg="hybrid"] .sec--deliver { background: var(--color-paper-2); }

    /* ── Rehber bağlantıları · sade liste, ok ile ────────────────────────── */
    .guides-list { display: grid; max-width: 52rem; border-top: var(--rule-hair) solid var(--color-rule); }
    .guide-link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-sm);
      min-height: 44px;
      padding-block: var(--space-sm);
      border-bottom: var(--rule-hair) solid var(--color-rule);
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--text-base);
      letter-spacing: -0.015em;
      color: var(--color-ink);
    }
    .guide-link__arrow {
      color: var(--color-seal);
      flex: none;
      transition: transform var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .guide-link:hover .guide-link__arrow { transform: translateX(4px); color: var(--color-accent); }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .enter, .is-ready .enter { opacity: 1; transform: none; transition: none; }
      .rv, .rv-in { opacity: 1; transform: none; transition: none; }
      *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
      @view-transition { navigation: none; }
    }
  
    /* ══ 2026-09-30 eklemeleri (site-extra.css → ortak CSS'in sonuna eklenir) ══════════
       Kaynak index.final.html'deki <style> bloğu DEĞİŞMEDİ; bu dosya üstüne biner.   */

    /* Telegram düğmesi — WhatsApp birincil kalır, Telegram ikincil (outline). */
    .btn--tg svg { color: oklch(56% 0.13 240); }

    /* ── Footer · üç sütun: rehberler · belgeler · iletişim ── */
    .foot__cols {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-lg);
      margin-top: var(--space-xl);
      font-size: var(--text-sm);
      color: var(--color-muted);
    }
    .foot__line + .foot__cols { margin-top: var(--space-xl); }
    .foot > .wrap > .foot__cols:first-child { margin-top: 0; }
    .foot__col ul { list-style: none; margin: var(--space-2xs) 0 0; padding: 0; display: grid; gap: 0.4rem; }
    .foot__col a { text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; }
    .foot__col b { color: var(--color-ink); font-weight: 600; }
    @media (hover: hover) and (pointer: fine) {
      .foot__col a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
    }
    @media (min-width: 40rem) {
      .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .foot__col:last-child { grid-column: 1 / -1; }
    }
    @media (min-width: 60rem) {
      .foot__cols { grid-template-columns: 1.15fr 1fr 1fr; gap: var(--space-xl); }
      .foot__col:last-child { grid-column: auto; }
    }

    /* ── Rehber/belge hero'su: sol metin, sağ yazar kartı (masaüstünde boş kalan yarı) ── */
    .author-card .meta-label { display: block; margin-bottom: 2px; }
    .author-card .proof__photo { width: 96px; height: 96px; }
    .author-card__date {
      display: flex; gap: var(--space-2xs); align-items: flex-start;
      margin-top: var(--space-md); padding-top: var(--space-sm);
      border-top: var(--rule-hair) solid var(--color-rule);
      font-size: var(--text-xs); color: var(--color-muted);
    }
    .author-card__date svg { width: 16px; height: 16px; flex: none; color: var(--color-accent); margin-top: 1px; }
    .author-card__links {
      display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md);
      margin-top: var(--space-sm); font-size: var(--text-sm);
    }
    .author-card__links a { text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; }
    @media (min-width: 60rem) {
      .hero__grid--doc { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; }
    }

    /* ── Ana sayfa · mobilde yüz ilk ekranda ──
       Masaüstünde fotoğraf sağ sütundaki kartta; telefonda o kart ikinci ekrana düşüyordu.
       Küçük ekranda başlığın üstüne kompakt bir kimlik satırı çıkar, büyük ekranda gizlenir. */
    .hero__who { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); }
    .hero__who img {
      width: 56px; height: 56px; flex: none; object-fit: cover; object-position: center 20%;
      border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule-2);
    }
    .hero__who b { display: block; font-family: var(--font-display); font-size: var(--text-md, 1.05rem); color: var(--color-ink); line-height: 1.2; }
    .hero__who span { display: block; font-size: var(--text-xs); color: var(--color-muted); }
    @media (min-width: 60rem) { .hero__who { display: none; } }
    /* Kimlik satırı görünürken rozet aynı bilgiyi tekrarlıyor — küçük ekranda gizle. */
    /* İletişim bölümünde WhatsApp'ın altındaki Telegram düğmesi — ayrı blok gibi durmasın. */
    .contact__cta + .contact__cta { margin-top: var(--space-2xs); }

    /* ── Araç: belge sihirbazı (build-tools.js) ── */
    .wz { display: grid; gap: var(--space-lg); }
    .wz__step { border: 0; margin: 0; padding: 0; min-width: 0; }
    .wz__step legend { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-ink); margin-bottom: var(--space-xs); padding: 0; }
    .wz__chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
    .wz__chip {
      font: inherit; font-size: var(--text-sm); cursor: pointer;
      padding: 0.55rem 0.9rem; border-radius: var(--radius-pill);
      border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-card); color: var(--color-ink-2);
      transition: background .15s, border-color .15s, color .15s;
    }
    .wz__chip[aria-checked="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
    .wz__chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
    @media (hover: hover) and (pointer: fine) { .wz__chip:hover { border-color: var(--color-ink-2); } }
    .wz__out { scroll-margin-top: 88px; }
    .wz__out h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
    .wz__pick { color: var(--color-muted); margin: 0; }
    .wz__note { padding: var(--space-xs) var(--space-sm); border-left: 3px solid var(--color-seal); background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-ink-2); margin: 0 0 var(--space-md); }
    .wz__list, .wz-sum__row ul { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; gap: var(--space-xs); }
    .wz__list li, .wz-sum__row li { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.5; }
    .wz__badge {
      display: inline-block; margin-right: 0.35rem; padding: 0.1rem 0.5rem; border-radius: var(--radius-input);
      font-family: var(--font-outlier); font-size: 0.72rem; letter-spacing: .02em; vertical-align: 1px;
      border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); color: var(--color-ink);
    }
    .wz__badge--apost, .wz__badge--legal { border-color: var(--color-seal); color: var(--color-seal); background: var(--color-card); }
    .wz__badge--none { color: var(--color-muted); }
    .wz__badge--info { background: transparent; }
    .wz__steps { margin: var(--space-2xs) 0 var(--space-md); padding-left: 1.2rem; font-size: var(--text-sm); color: var(--color-ink-2); display: grid; gap: 0.3rem; }
    .wz__cta-note { font-size: var(--text-sm); color: var(--color-muted); margin: var(--space-md) 0 0; }
    .wz__out .hero__cta { margin-top: var(--space-sm); }
    .wz-sum { display: grid; gap: var(--space-lg); }
    @media (min-width: 60rem) { .wz-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .wz-sum__row { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-sm); }
    .wz-sum__row h3 { font-size: var(--text-md, 1.05rem); margin-bottom: var(--space-xs); }
    .wz-sum__link { font-size: var(--text-sm); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; }
    /* Ana sayfa rehber listesinde araç satırları — küçük mühür işaretiyle ayrışır. */
    .guide-link--tool span:first-child::before { content: "◆ "; color: var(--color-seal); font-size: .8em; }

    /* ── Araç: pasaport isim yazımı (build-tools-translit.js) ── */
    .tl__label { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-ink); }
    .tl__input {
      font: inherit; font-size: 1.15rem; width: 100%; max-width: 36rem; padding: 0.8rem 1rem;
      border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-card); color: var(--color-ink);
    }
    .tl__input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
    .tl__res { font-family: var(--font-outlier); font-size: clamp(1.3rem, 4vw, 2rem); letter-spacing: .04em; color: var(--color-ink); margin: var(--space-2xs) 0 var(--space-md); overflow-wrap: anywhere; }
    .tl-p { max-width: 70ch; }
    .tl-tables { display: grid; gap: var(--space-xl); }
    @media (min-width: 60rem) { .tl-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .tl-table h3 { font-size: var(--text-md, 1.05rem); margin-bottom: var(--space-xs); }
    .tl-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
    .tl-table th, .tl-table td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: var(--rule-hair) solid var(--color-rule); }
    .tl-table td:first-child { font-family: var(--font-outlier); width: 30%; }
    .tl-table td:last-child { font-family: var(--font-outlier); }
    .tl-table small { font-family: var(--font-body); color: var(--color-muted); }
    .tl-note { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2xs); }

    /* ── Yeni logo (2026-09-30): mühür mumu + kalem ucu. Eski rozet kutusu kalkar, işaret kendi başına durur. ── */
    .brand__mark { width: 40px; height: 40px; background: none; border: 0; border-radius: 0; }
    .brand__mark svg { width: 40px; height: 40px; }
    @media (hover: hover) and (pointer: fine) { .brand:hover .brand__mark { background: none; } .brand:hover .brand__mark svg { transform: rotate(-8deg); } }
    .brand__mark svg { transition: transform var(--dur-short, .2s) var(--ease-out, ease-out); }