/* 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 ─────────
       Golos Text: Kiril öncelikli tasarlanmış nötr-geometrik grotesk. Sitenin
       yarısı RU/UA olduğu için tek şart Kiril'di — Urbanist, Figtree, Host
       Grotesk, Bricolage ve Fraunces hep bu yüzden elendi (hiçbirinde yok).
       Tek aile hem başlık hem gövde: değişken, wght 400–700.
       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: "Golos Text";
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url("fonts/golos-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: "Golos Text";
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url("fonts/golos-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: "Golos Text";
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url("fonts/golos-cyrillic.woff2") format("woff2");
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    @font-face {
      font-family: "Golos Text";
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url("fonts/golos-cyrillic-ext.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(97.6% 0.005 252);
      --color-paper-2:     oklch(95.2% 0.007 252);
      --color-paper-3:     oklch(92.6% 0.009 252);
      --color-rule:        oklch(88%   0.010 252);
      --color-rule-2:      oklch(80%   0.014 252);
      /* 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(58%  0.024 252);
      /* 51%, not 56% — at 56% the mono meta labels measured 4.04:1 on paper, under the 4.5 floor. */
      --color-neutral:     oklch(51%   0.018 252);
      --color-muted:       oklch(44%   0.020 252);
      --color-ink-2:       oklch(34%   0.028 252);
      --color-ink:         oklch(24%   0.036 252);
      --color-accent:        oklch(50%   0.145 152);
      --color-accent-hover:  oklch(44%   0.140 152);
      --color-accent-active: oklch(41%   0.130 152);
      --color-accent-ink:    oklch(99%   0.004 150);
      --color-focus:         oklch(48%   0.170 255);
      --color-shadow:        oklch(24%   0.036 252 / 0.35);
      /* Marka rozetinin yumuşak zemini — kurumsal dursun diye lacivert tonu, yeşil değil. */
      --color-badge:         oklch(94%   0.022 252);
      --color-badge-edge:    oklch(88%   0.028 252);

      /* ── The dark band · one deep beat per page, light → dark → light ── */
      --color-band:        oklch(24%  0.040 252);
      --color-band-2:      oklch(28%  0.038 252);
      --color-band-ink:    oklch(97%  0.006 252);
      --color-band-muted:  oklch(79%  0.018 252);
      --color-band-rule:   oklch(38%  0.030 252);
      --color-accent-lift: oklch(74%  0.160 152);

      /* ── Luminous ground + bright glass (not matte frost) ── */
      --wash-cool:      oklch(93%  0.055 218);
      --wash-warm:      oklch(95%  0.048 152);
      --glass-fill:     color-mix(in oklch, var(--color-paper) 52%, transparent);
      --glass-edge:     oklch(100% 0 0 / 0.70);
      --glass-specular: oklch(100% 0 0 / 0.92);
      --glass-blur:     blur(20px) saturate(180%) brightness(1.06);
      --glass-shadow:   0 14px 34px -16px oklch(24% 0.040 252 / 0.30);

      /* ── Type · Geist (display + body) + JetBrains Mono (outlier: stage numerals, meta labels) ── */
      --font-display: "Golos Text", ui-sans-serif, system-ui, sans-serif;
      --font-body:    "Golos Text", 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.875rem, 2.6vw + 0.75rem, 2.75rem);
      --text-display:   clamp(2.25rem, 4vw + 1rem, 4rem);

      /* ── 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: 10px;
      --radius-input: 8px;
      --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;
    }

    *, *::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); }
    .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). */
    .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 {
      display: inline-grid;
      place-items: center;
      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-accent);
    }

    .hero h1 {
      font-size: var(--text-display-s);
      font-weight: 600;
      margin-bottom: var(--space-sm);
    }
    /* 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. */
    .proof {
      border: var(--rule-hair) solid var(--color-rule);
      border-radius: var(--radius-card);
      background: var(--color-paper-2);
      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;
      padding-block: var(--space-2xs);
      font-size: var(--text-sm);
      color: var(--color-muted);
      line-height: 1.5;
    }
    .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; }

    /* ── 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,
        .meet__photo, .meet__body, .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-neutral);
      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; }
      *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
      @view-transition { navigation: none; }
    }