@charset "UTF-8";
/* ============================================================================
   İBKB TAKİP · PUBLIC (MARKETING) PREMIUM LAYER
   ----------------------------------------------------------------------------
   Load order:
     public-v506 → public-v520 → public-v512 → public-pages-v507
     → public-v521 → public-v522 → public-pages-v521 → THIS FILE (last)

   Design language is intentionally identical to public/premium.css (the
   logged-in application): same accent family, same 4px spacing rhythm, same
   radius ladder, same layered shadows, same two-axis colour model.
   Tokens are re-declared here with a --pb-* prefix because the public pages do
   not load premium.css.

   Axes
     · MODE  :root[data-mode="light" | "dark"]  +  prefers-color-scheme
   No webfonts, no remote images, no @import, no external host of any kind.
   Markup is never modified — every rule below targets what the PHP emits.
   ========================================================================== */

/* ==========================================================================
   1 · TOKENS — primitives
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- typography (system stack only, mirrors premium.css) ---------- */
  --pb-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
                  "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
                  "Liberation Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji",
                  sans-serif;
  --pb-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "JetBrains Mono",
                  "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --pb-font-display: var(--pb-font-sans);

  /* marketing type scale — one step larger than the app's UI scale */
  --pb-fs-2xs:  .6875rem;  /* 11 */
  --pb-fs-xs:   .75rem;    /* 12 */
  --pb-fs-sm:   .8125rem;  /* 13 */
  --pb-fs-md:   .875rem;   /* 14 */
  --pb-fs-base: .9375rem;  /* 15 */
  --pb-fs-body: 1rem;      /* 16 */
  --pb-fs-lg:   1.0625rem; /* 17 */
  --pb-fs-xl:   1.1875rem; /* 19 */
  --pb-fs-2xl:  1.375rem;  /* 22 */
  --pb-fs-h3:   clamp(1.125rem, 1.02rem + .38vw, 1.3125rem);
  --pb-fs-h2:   clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  --pb-fs-h1:   clamp(1.95rem, 1.35rem + 2.2vw, 3rem);
  --pb-fs-hero: clamp(2.1rem, 1.35rem + 2.7vw, 3.4rem);
  --pb-fs-price: clamp(1.75rem, 1.35rem + 1.5vw, 2.4rem);

  --pb-lh-tight: 1.1;
  --pb-lh-snug: 1.28;
  --pb-lh-base: 1.55;
  --pb-lh-copy: 1.68;
  --pb-lh-loose: 1.8;

  --pb-fw-regular: 450;
  --pb-fw-medium: 550;
  --pb-fw-semibold: 650;
  --pb-fw-bold: 720;
  --pb-fw-black: 800;

  --pb-tracking-tight: -.018em;
  --pb-tracking-tighter: -.03em;
  --pb-tracking-caps: .1em;

  --pb-measure: 68ch;
  --pb-measure-narrow: 56ch;

  /* ---- spacing · 4px base (identical ladder to premium.css) --------- */
  --pb-s1: 4px;   --pb-s2: 8px;   --pb-s3: 12px;  --pb-s4: 16px;
  --pb-s5: 20px;  --pb-s6: 24px;  --pb-s7: 28px;  --pb-s8: 32px;
  --pb-s10: 40px; --pb-s12: 48px; --pb-s14: 56px; --pb-s16: 64px;
  --pb-s20: 80px; --pb-s24: 96px;

  /* ---- radius ------------------------------------------------------ */
  --pb-r-xs: 6px;  --pb-r-sm: 8px;  --pb-r-md: 10px; --pb-r-lg: 12px;
  --pb-r-xl: 16px; --pb-r-2xl: 20px; --pb-r-3xl: 26px; --pb-r-pill: 999px;

  /* ---- layout ------------------------------------------------------ */
  /* v52.12: 1280px sabitti; 1920px'lik ekranda sağda ve solda
     320'şer piksel boşluk kalıyordu. min(...,100%) büyük
     ekranlarda genişler, küçük ekranda hiçbir şeyi daraltmaz:
     kenar boşluğunu yalnızca --pb-gutter belirler.
     Paragraf genişlikleri ayrıca ch cinsinden sınırlı olduğu
     için metin okunaksız uzunlukta satırlara yayılmaz. */
  --pb-container: min(1720px, 100%);
  --pb-gutter: clamp(16px, 3.2vw, 40px);
  --pb-nav-h: 76px;
  --pb-section-y: clamp(64px, 7.5vw, 112px);
  --pb-card-pad: clamp(22px, 2.4vw, 34px);
  --pb-hairline: 1px;

  /* ---- motion ------------------------------------------------------ */
  --pb-dur-1: 110ms; --pb-dur-2: 180ms; --pb-dur-3: 260ms;
  --pb-ease: cubic-bezier(.22, .61, .36, 1);
  --pb-ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---- raw accent scales (same values as premium.css emerald) ------- */
  --pb-acc-l:         #0a7a72;
  --pb-acc-l-hover:   #086a63;
  --pb-acc-l-active:  #065b55;
  --pb-acc-l-link:    #066a63;
  --pb-acc-l-soft:    #e2f3f0;
  --pb-acc-l-soft-2:  #cfe9e4;
  --pb-acc-l-on-soft: #05564f;
  --pb-acc-l-ring:    rgba(10, 122, 114, .3);

  --pb-acc-d:         #2bb3a3;
  --pb-acc-d-hover:   #3fc4b3;
  --pb-acc-d-active:  #23998b;
  --pb-acc-d-link:    #5fd6c4;
  --pb-acc-d-soft:    #0f2b28;
  --pb-acc-d-soft-2:  #163a35;
  --pb-acc-d-on-soft: #6fe0cd;
  --pb-acc-d-ring:    rgba(63, 196, 179, .38);

  /* ---- deep brand surfaces (nav rail / hero panel) ------------------ */
  --pb-deep-l:   #062f33;
  --pb-deep-l-2: #04262a;
  --pb-deep-d:   #0a1417;
  --pb-deep-d-2: #070f11;
  --pb-hero-l-a: #04383c;
  --pb-hero-l-b: #075049;
  --pb-hero-d-a: #081b1d;
  --pb-hero-d-b: #0d4a46;

  /* ---- status (raw sets, identical to premium.css) ------------------ */
  --pb-st-l-ok-bg:   #e4f4ee; --pb-st-l-ok-fg:   #0a6a55; --pb-st-l-ok-bd:   #a9dccb;
  --pb-st-l-warn-bg: #fdf1dc; --pb-st-l-warn-fg: #7a5205; --pb-st-l-warn-bd: #eccf93;
  --pb-st-l-bad-bg:  #fdecea; --pb-st-l-bad-fg:  #a32a20; --pb-st-l-bad-bd:  #f1bdb7;
  --pb-st-l-info-bg: #e7f1fb; --pb-st-l-info-fg: #17578a; --pb-st-l-info-bd: #b4d3ee;

  --pb-st-d-ok-bg:   #0f2b25; --pb-st-d-ok-fg:   #68e3c0; --pb-st-d-ok-bd:   #1f5346;
  --pb-st-d-warn-bg: #32250c; --pb-st-d-warn-fg: #f0c566; --pb-st-d-warn-bd: #5d481a;
  --pb-st-d-bad-bg:  #391c1a; --pb-st-d-bad-fg:  #f7a79f; --pb-st-d-bad-bd:  #6a332e;
  --pb-st-d-info-bg: #11273a; --pb-st-d-info-fg: #85c4f0; --pb-st-d-info-bd: #2a4e6e;
}

/* ==========================================================================
   2 · TOKENS — semantic, LIGHT (default)
   ========================================================================== */

:root {
  --pb-bg:            #f1f4f7;
  --pb-bg-2:          #e9eef2;
  --pb-surface:       #ffffff;
  --pb-surface-2:     #f9fbfc;
  --pb-surface-3:     #f1f4f6;
  --pb-surface-hover: #f5f8f9;

  --pb-text:          #101820;
  --pb-text-2:        #414d57;
  --pb-text-3:        #5b6771;
  --pb-text-on-accent:#ffffff;

  --pb-border:        #e0e5e9;
  --pb-border-2:      #d3dade;
  --pb-border-strong: #7b8790;   /* >=3:1 — used for control edges */

  --pb-accent:        var(--pb-acc-l);
  --pb-accent-hover:  var(--pb-acc-l-hover);
  --pb-accent-active: var(--pb-acc-l-active);
  --pb-accent-link:   var(--pb-acc-l-link);
  --pb-accent-soft:   var(--pb-acc-l-soft);
  --pb-accent-soft-2: var(--pb-acc-l-soft-2);
  --pb-on-soft:       var(--pb-acc-l-on-soft);
  --pb-ring:          var(--pb-acc-l-ring);

  --pb-deep:          var(--pb-deep-l);
  --pb-deep-2:        var(--pb-deep-l-2);
  --pb-hero-a:        var(--pb-hero-l-a);
  --pb-hero-b:        var(--pb-hero-l-b);

  /* text on deep brand surfaces */
  --pb-on-deep:       #ffffff;
  --pb-on-deep-2:     #d8e6e7;
  --pb-on-deep-3:     #c0d5d6;
  --pb-on-deep-accent:#6fe0cd;
  --pb-on-deep-line:  rgba(255, 255, 255, .14);
  --pb-on-deep-fill:  rgba(255, 255, 255, .07);
  --pb-on-deep-fill-2:rgba(255, 255, 255, .12);

  --pb-ok-bg:   var(--pb-st-l-ok-bg);   --pb-ok-fg:   var(--pb-st-l-ok-fg);   --pb-ok-bd:   var(--pb-st-l-ok-bd);
  --pb-warn-bg: var(--pb-st-l-warn-bg); --pb-warn-fg: var(--pb-st-l-warn-fg); --pb-warn-bd: var(--pb-st-l-warn-bd);
  --pb-bad-bg:  var(--pb-st-l-bad-bg);  --pb-bad-fg:  var(--pb-st-l-bad-fg);  --pb-bad-bd:  var(--pb-st-l-bad-bd);
  --pb-info-bg: var(--pb-st-l-info-bg); --pb-info-fg: var(--pb-st-l-info-fg); --pb-info-bd: var(--pb-st-l-info-bd);

  --pb-focus:        #0a5b55;
  --pb-focus-on-deep:#8fe9d8;
  --pb-on-deep-btn:       #ffffff;
  --pb-on-deep-btn-hover: #eef7f6;
  --pb-on-deep-btn-active:#e2f1ef;
  --pb-mask-solid:        #000000;

  --pb-sh-1: 0 1px 2px rgba(15, 30, 40, .05), 0 1px 1px rgba(15, 30, 40, .03);
  --pb-sh-2: 0 1px 2px rgba(15, 30, 40, .05), 0 4px 10px -2px rgba(15, 30, 40, .06);
  --pb-sh-3: 0 1px 2px rgba(15, 30, 40, .05), 0 8px 20px -4px rgba(15, 30, 40, .08), 0 16px 32px -12px rgba(15, 30, 40, .08);
  --pb-sh-4: 0 2px 4px rgba(15, 30, 40, .06), 0 14px 32px -8px rgba(15, 30, 40, .12), 0 32px 64px -24px rgba(15, 30, 40, .18);

  --pb-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%235b6771' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pb-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath d='M1.2 5.1 4.7 8.6 11.8 1.5' fill='none' stroke='%230a7a72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pb-check-invert: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath d='M1.2 5.1 4.7 8.6 11.8 1.5' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   3 · TOKENS — semantic, DARK
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    color-scheme: dark;

    --pb-bg:            #0b0f13;
    --pb-bg-2:          #10161b;
    --pb-surface:       #141a20;
    --pb-surface-2:     #1a222a;
    --pb-surface-3:     #212b34;
    --pb-surface-hover: #1e262f;

    --pb-text:          #e9eef2;
    --pb-text-2:        #b6c1ca;
    --pb-text-3:        #98a3ad;
    --pb-text-on-accent:#06181c;

    --pb-border:        #253039;
    --pb-border-2:      #313e48;
    --pb-border-strong: #6d7b87;

    --pb-accent:        var(--pb-acc-d);
    --pb-accent-hover:  var(--pb-acc-d-hover);
    --pb-accent-active: var(--pb-acc-d-active);
    --pb-accent-link:   var(--pb-acc-d-link);
    --pb-accent-soft:   var(--pb-acc-d-soft);
    --pb-accent-soft-2: var(--pb-acc-d-soft-2);
    --pb-on-soft:       var(--pb-acc-d-on-soft);
    --pb-ring:          var(--pb-acc-d-ring);

    --pb-deep:          var(--pb-deep-d);
    --pb-deep-2:        var(--pb-deep-d-2);
    --pb-hero-a:        var(--pb-hero-d-a);
    --pb-hero-b:        var(--pb-hero-d-b);

    --pb-on-deep:       #ffffff;
    --pb-on-deep-2:     #d8e6e7;
    --pb-on-deep-3:     #c0d5d6;
    --pb-on-deep-accent:#6fe0cd;
    --pb-on-deep-line:  rgba(255, 255, 255, .11);
    --pb-on-deep-fill:  rgba(255, 255, 255, .05);
    --pb-on-deep-fill-2:rgba(255, 255, 255, .09);

    --pb-ok-bg:   var(--pb-st-d-ok-bg);   --pb-ok-fg:   var(--pb-st-d-ok-fg);   --pb-ok-bd:   var(--pb-st-d-ok-bd);
    --pb-warn-bg: var(--pb-st-d-warn-bg); --pb-warn-fg: var(--pb-st-d-warn-fg); --pb-warn-bd: var(--pb-st-d-warn-bd);
    --pb-bad-bg:  var(--pb-st-d-bad-bg);  --pb-bad-fg:  var(--pb-st-d-bad-fg);  --pb-bad-bd:  var(--pb-st-d-bad-bd);
    --pb-info-bg: var(--pb-st-d-info-bg); --pb-info-fg: var(--pb-st-d-info-fg); --pb-info-bd: var(--pb-st-d-info-bd);

    --pb-focus:        #7fe4d2;
    --pb-focus-on-deep:#8fe9d8;

    --pb-sh-1: 0 1px 2px rgba(0, 0, 0, .5);
    --pb-sh-2: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 10px -2px rgba(0, 0, 0, .45);
    --pb-sh-3: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 20px -4px rgba(0, 0, 0, .5), 0 16px 32px -12px rgba(0, 0, 0, .55);
    --pb-sh-4: 0 2px 4px rgba(0, 0, 0, .55), 0 14px 32px -8px rgba(0, 0, 0, .6), 0 32px 64px -24px rgba(0, 0, 0, .7);

    --pb-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%2398a3ad' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --pb-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath d='M1.2 5.1 4.7 8.6 11.8 1.5' fill='none' stroke='%235fd6c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --pb-check-invert: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath d='M1.2 5.1 4.7 8.6 11.8 1.5' fill='none' stroke='%230b2019' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

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

  --pb-bg:            #0b0f13;
  --pb-bg-2:          #10161b;
  --pb-surface:       #141a20;
  --pb-surface-2:     #1a222a;
  --pb-surface-3:     #212b34;
  --pb-surface-hover: #1e262f;

  --pb-text:          #e9eef2;
  --pb-text-2:        #b6c1ca;
  --pb-text-3:        #98a3ad;
  --pb-text-on-accent:#06181c;

  --pb-border:        #253039;
  --pb-border-2:      #313e48;
  --pb-border-strong: #6d7b87;

  --pb-accent:        var(--pb-acc-d);
  --pb-accent-hover:  var(--pb-acc-d-hover);
  --pb-accent-active: var(--pb-acc-d-active);
  --pb-accent-link:   var(--pb-acc-d-link);
  --pb-accent-soft:   var(--pb-acc-d-soft);
  --pb-accent-soft-2: var(--pb-acc-d-soft-2);
  --pb-on-soft:       var(--pb-acc-d-on-soft);
  --pb-ring:          var(--pb-acc-d-ring);

  --pb-deep:          var(--pb-deep-d);
  --pb-deep-2:        var(--pb-deep-d-2);
  --pb-hero-a:        var(--pb-hero-d-a);
  --pb-hero-b:        var(--pb-hero-d-b);

  --pb-on-deep:       #ffffff;
  --pb-on-deep-2:     #d8e6e7;
  --pb-on-deep-3:     #c0d5d6;
  --pb-on-deep-accent:#6fe0cd;
  --pb-on-deep-line:  rgba(255, 255, 255, .11);
  --pb-on-deep-fill:  rgba(255, 255, 255, .05);
  --pb-on-deep-fill-2:rgba(255, 255, 255, .09);

  --pb-ok-bg:   var(--pb-st-d-ok-bg);   --pb-ok-fg:   var(--pb-st-d-ok-fg);   --pb-ok-bd:   var(--pb-st-d-ok-bd);
  --pb-warn-bg: var(--pb-st-d-warn-bg); --pb-warn-fg: var(--pb-st-d-warn-fg); --pb-warn-bd: var(--pb-st-d-warn-bd);
  --pb-bad-bg:  var(--pb-st-d-bad-bg);  --pb-bad-fg:  var(--pb-st-d-bad-fg);  --pb-bad-bd:  var(--pb-st-d-bad-bd);
  --pb-info-bg: var(--pb-st-d-info-bg); --pb-info-fg: var(--pb-st-d-info-fg); --pb-info-bd: var(--pb-st-d-info-bd);

  --pb-focus:        #7fe4d2;
  --pb-focus-on-deep:#8fe9d8;

  --pb-sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --pb-sh-2: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 10px -2px rgba(0, 0, 0, .45);
  --pb-sh-3: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 20px -4px rgba(0, 0, 0, .5), 0 16px 32px -12px rgba(0, 0, 0, .55);
  --pb-sh-4: 0 2px 4px rgba(0, 0, 0, .55), 0 14px 32px -8px rgba(0, 0, 0, .6), 0 32px 64px -24px rgba(0, 0, 0, .7);

  --pb-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%2398a3ad' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pb-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath d='M1.2 5.1 4.7 8.6 11.8 1.5' fill='none' stroke='%235fd6c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pb-check-invert: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath d='M1.2 5.1 4.7 8.6 11.8 1.5' fill='none' stroke='%230b2019' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   4 · BASE / RESET-ISH
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--pb-bg);
  color: var(--pb-text);
  font-family: var(--pb-font-sans);
  font-size: var(--pb-fs-body);
  font-weight: var(--pb-fw-regular);
  line-height: var(--pb-lh-base);
  letter-spacing: 0;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums lining-nums;
}

body,
main,
section,
article,
header,
footer,
nav,
ol,
ul,
div {
  min-width: 0;
}

h1, h2, h3, h4, h5 {
  font-family: var(--pb-font-display);
  color: var(--pb-text);
  font-weight: var(--pb-fw-bold);
  letter-spacing: var(--pb-tracking-tight);
  line-height: var(--pb-lh-snug);
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0;
  text-wrap: pretty;
}

b, strong { font-weight: var(--pb-fw-semibold); }

::selection {
  background: var(--pb-accent-soft-2);
  color: var(--pb-on-soft);
}

/* one focus treatment everywhere ------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
details:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--pb-focus);
  outline-offset: 2px;
  border-radius: var(--pb-r-sm);
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) { outline: none; }

/* anchors on the one-page home must clear the sticky header */
main [id],
section[id] { scroll-margin-top: calc(var(--pb-nav-h) + var(--pb-s5)); }

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

/* shared "eyebrow" typography for every section kicker ---------------- */
.landing-section > header small,
.workflow small,
.about-premium small,
.final-cta small,
.page-hero > span,
.page-grid small,
.module-groups small,
.contact-info > div > small,
.contact-form-card > small,
.legal-document header span {
  display: inline-block;
  color: var(--pb-accent);
  font-size: var(--pb-fs-xs);
  font-weight: var(--pb-fw-bold);
  letter-spacing: var(--pb-tracking-caps);
  text-transform: uppercase;
  line-height: 1.4;
}

/* ==========================================================================
   5 · HEADER / NAVIGATION
   ========================================================================== */

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--pb-nav-h);
  align-items: center;
  column-gap: clamp(10px, 1.6vw, 26px);
  padding-block: var(--pb-s2);
  padding-inline: max(var(--pb-gutter), calc((100% - var(--pb-container)) / 2));
  /* Çubuk TAM OPAK. Daha önce %92/%96 saydamdı ve arkasında bulanıklık
     (backdrop-filter) yoktu; koyu kahraman bölümü ve başlık yazısı
     çubuğun içinden hayalet gibi görünüyordu. Saydamlık, bulanıklık
     olmadan hiçbir şey kazandırmıyor, okunurluğu bozuyordu. */
  background: var(--pb-bg);
  border-bottom: var(--pb-hairline) solid var(--pb-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* brand lock-up ------------------------------------------------------- */
.landing-brand {
  gap: var(--pb-s3);
  min-width: 0;
  padding: var(--pb-s1) var(--pb-s2) var(--pb-s1) 0;
  border-radius: var(--pb-r-lg);
  color: var(--pb-text);
}
.landing-brand span {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: var(--pb-r-lg);
  background: linear-gradient(160deg, var(--pb-deep) 0%, var(--pb-deep-2) 100%);
  color: var(--pb-on-deep-accent);
  font-size: 21px;
  font-weight: var(--pb-fw-black);
  letter-spacing: 0;
  box-shadow: var(--pb-sh-1);
}
.landing-brand b {
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: var(--pb-fw-bold);
  letter-spacing: var(--pb-tracking-tight);
  white-space: nowrap;
}
.landing-brand em { font-style: normal; color: var(--pb-accent); }

/* desktop links ------------------------------------------------------- */
.landing-nav nav { gap: 2px; }
.landing-nav nav > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--pb-s2) clamp(8px, .76vw, 13px);
  border-radius: var(--pb-r-md);
  color: var(--pb-text-2);
  font-size: clamp(13px, .92vw, 15px);
  font-weight: var(--pb-fw-medium);
  letter-spacing: -.005em;
  transition: background var(--pb-dur-1) var(--pb-ease),
              color var(--pb-dur-1) var(--pb-ease);
}
.landing-nav nav > a:hover {
  background: var(--pb-surface-3);
  color: var(--pb-text);
}
.landing-nav nav > a.active {
  background: var(--pb-accent-soft);
  color: var(--pb-on-soft);
  font-weight: var(--pb-fw-semibold);
}

/* header buttons ------------------------------------------------------ */
.landing-nav .nav-actions { gap: var(--pb-s2); }
.landing-nav .nav-actions > .primary,
.landing-nav .nav-actions > .ghost {
  min-height: 44px;
  padding: var(--pb-s3) var(--pb-s5);
  border-radius: var(--pb-r-md);
  font-size: var(--pb-fs-md);
  font-weight: var(--pb-fw-semibold);
  letter-spacing: -.004em;
  white-space: nowrap;
}

.primary {
  background: var(--pb-accent);
  color: var(--pb-text-on-accent);
  border: 1px solid transparent;
  box-shadow: var(--pb-sh-1);
  transition: background var(--pb-dur-1) var(--pb-ease),
              box-shadow var(--pb-dur-2) var(--pb-ease),
              transform var(--pb-dur-1) var(--pb-ease);
}
.primary:hover { background: var(--pb-accent-hover); box-shadow: var(--pb-sh-2); }
.primary:active { background: var(--pb-accent-active); transform: translateY(1px); }

.ghost {
  background: var(--pb-surface);
  border: 1px solid var(--pb-border-2);
  color: var(--pb-text);
  transition: border-color var(--pb-dur-1) var(--pb-ease),
              background var(--pb-dur-1) var(--pb-ease);
}
.ghost:hover { border-color: var(--pb-border-strong); background: var(--pb-surface-hover); }

/* account chip (logged-in header) -------------------------------------- */
.public-account {
  min-height: 46px;
  padding: var(--pb-s1) var(--pb-s3) var(--pb-s1) var(--pb-s1);
  border: 1px solid var(--pb-border-2);
  border-radius: var(--pb-r-lg);
  background: var(--pb-surface);
  color: var(--pb-text);
  transition: border-color var(--pb-dur-2) var(--pb-ease),
              box-shadow var(--pb-dur-2) var(--pb-ease);
}
.public-account:hover {
  border-color: var(--pb-accent);
  box-shadow: var(--pb-sh-2);
  transform: none;
}
.public-account-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: var(--pb-r-md);
  background: var(--pb-accent);
  color: var(--pb-text-on-accent);
  font-size: var(--pb-fs-md);
  font-weight: var(--pb-fw-bold);
}
.public-account-copy b { font-size: var(--pb-fs-sm); font-weight: var(--pb-fw-semibold); }
.public-account-copy small { color: var(--pb-text-3); font-size: var(--pb-fs-2xs); font-weight: var(--pb-fw-medium); }
.public-account i { color: var(--pb-accent); }
.public-logout { white-space: nowrap; }

/* hamburger ------------------------------------------------------------ */
.landing-nav .nav-toggle {
  width: 46px;
  height: 46px;
  border: 1px solid var(--pb-border-2);
  border-radius: var(--pb-r-md);
  background: var(--pb-surface);
  color: var(--pb-text);
  cursor: pointer;
  transition: border-color var(--pb-dur-1) var(--pb-ease),
              background var(--pb-dur-1) var(--pb-ease);
}
.landing-nav .nav-toggle:hover { border-color: var(--pb-border-strong); background: var(--pb-surface-hover); }
.landing-nav .nav-toggle:before { font-size: 20px; line-height: 1; }
.landing-nav .nav-toggle[aria-expanded="true"]:before { font-size: 26px; line-height: 1; }

.landing-nav a:focus-visible,
.landing-nav button:focus-visible {
  outline: 3px solid var(--pb-focus);
  outline-offset: 2px;
}

/* mobile drop panel (chrome only below the nav breakpoint) -------------- */
.mobile-nav-actions { border-top-color: var(--pb-border); }
.mobile-nav-actions > a {
  min-height: 48px;
  font-size: var(--pb-fs-md);
  font-weight: var(--pb-fw-semibold);
}
.mobile-login-link {
  border: 1px solid var(--pb-border-2);
  background: var(--pb-surface);
  color: var(--pb-text);
}
.mobile-apply-link,
.mobile-logout-link {
  background: var(--pb-accent) !important;
  color: var(--pb-text-on-accent) !important;
  border: 1px solid transparent;
}
.mobile-account-link {
  background: var(--pb-accent-soft) !important;
  color: var(--pb-on-soft);
  border: 1px solid var(--pb-accent-soft-2);
}
.mobile-account-link small { color: var(--pb-on-soft); opacity: .82; }

/* The desktop bar carries brand + 7 links + 2 actions (+ an account chip when
   signed in). Tighten the scale in the tight band so nothing ever collides
   before the 1100px hamburger breakpoint. */
@media (min-width: 1101px) and (max-width: 1400px) {
  .landing-nav { column-gap: 10px; }
  .landing-nav nav > a { padding-inline: 6px; font-size: 12.5px; }
  .landing-nav .nav-actions > .primary,
  .landing-nav .nav-actions > .ghost { padding-inline: 14px; font-size: var(--pb-fs-sm); }
  .landing-brand b { font-size: 17px; }
  .landing-brand span { width: 38px; height: 38px; flex: 0 0 38px; font-size: 19px; }
}
@media (min-width: 1101px) and (max-width: 1620px) {
  .landing-nav:has(.public-account) { column-gap: 10px; }
  .landing-nav:has(.public-account) nav > a { padding-inline: 6px; font-size: 12.5px; }
  .landing-nav:has(.public-account) .public-account { min-width: 0; max-width: 228px; }
  .landing-nav:has(.public-account) .public-account-copy b { max-width: 116px; }
  .landing-nav:has(.public-account) .public-account i { display: none; }
  .landing-nav:has(.public-account) .public-logout { padding-inline: 14px; font-size: var(--pb-fs-sm); }
}

@media (max-width: 1100px) {
  .landing-nav { min-height: 66px; padding-inline: var(--pb-gutter); }
  .landing-nav > nav {
    background: var(--pb-surface);
    border: 1px solid var(--pb-border);
    box-shadow: var(--pb-sh-4);
    left: var(--pb-gutter);
    right: var(--pb-gutter);
    padding: var(--pb-s2);
    border-radius: var(--pb-r-xl);
    gap: 2px;
  }
  .landing-nav nav > a {
    min-height: 46px;
    padding: var(--pb-s3) var(--pb-s4);
    font-size: var(--pb-fs-lg);
    border-radius: var(--pb-r-md);
  }
}

/* ==========================================================================
   6 · HERO (home)
   ========================================================================== */

.landing-hero {
  position: relative;
  max-width: var(--pb-container);
  min-height: 0;
  margin: clamp(20px, 3vw, 44px) auto 0;
  padding: clamp(36px, 4.6vw, 72px) clamp(24px, 4vw, 64px) clamp(32px, 4vw, 60px);
  border: 1px solid var(--pb-border);
  border-radius: clamp(20px, 2.2vw, 28px);
  background:
    radial-gradient(120% 110% at 8% 0%, rgba(111, 224, 205, .11) 0%, transparent 58%),
    linear-gradient(152deg, var(--pb-hero-a) 0%, var(--pb-hero-b) 100%);
  color: var(--pb-on-deep);
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
  box-shadow: var(--pb-sh-4);
  isolation: isolate;
  --pb-focus: var(--pb-focus-on-deep);
}
.landing-hero:before {
  background-image:
    linear-gradient(var(--pb-on-deep-fill) 1px, transparent 1px),
    linear-gradient(90deg, var(--pb-on-deep-fill) 1px, transparent 1px);
  background-size: 68px 68px;
  opacity: .55;
  -webkit-mask-image: linear-gradient(to bottom, var(--pb-mask-solid) 0%, transparent 78%);
  mask-image: linear-gradient(to bottom, var(--pb-mask-solid) 0%, transparent 78%);
}

.hero-copy .eyebrow {
  align-items: center;
  gap: 0;
  padding: var(--pb-s2) var(--pb-s4);
  border: 1px solid var(--pb-on-deep-line);
  border-radius: var(--pb-r-pill);
  background: var(--pb-on-deep-fill);
  color: var(--pb-on-deep-accent);
  font-size: var(--pb-fs-sm);
  font-weight: var(--pb-fw-semibold);
  letter-spacing: .01em;
  line-height: 1.3;
}

.hero-copy h1 {
  margin: clamp(20px, 2.4vw, 32px) 0 var(--pb-s5);
  color: var(--pb-on-deep);
  font-size: var(--pb-fs-hero);
  font-weight: var(--pb-fw-bold);
  line-height: 1.04;
  letter-spacing: var(--pb-tracking-tighter);
  text-wrap: balance;
}
.hero-copy h1 em {
  display: block;
  font-style: normal;
  color: var(--pb-on-deep-accent);
}
.hero-copy > p {
  max-width: 50ch;
  color: var(--pb-on-deep-2);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: var(--pb-lh-copy);
}

.hero-buttons { gap: var(--pb-s3); margin-top: clamp(24px, 2.6vw, 34px); }
.hero-buttons a {
  min-height: 50px;
  padding: var(--pb-s3) var(--pb-s7);
  border-radius: var(--pb-r-lg);
  font-size: var(--pb-fs-lg);
  font-weight: var(--pb-fw-semibold);
  letter-spacing: -.006em;
}
.hero-buttons .primary {
  background: var(--pb-on-deep);
  color: var(--pb-hero-a);
  border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
}
.hero-buttons .primary:hover { background: var(--pb-on-deep-btn-hover); }
.hero-buttons .primary:active { background: var(--pb-on-deep-btn-active); }
.hero-buttons .glass {
  background: var(--pb-on-deep-fill);
  border: 1px solid var(--pb-on-deep-line);
  color: var(--pb-on-deep);
  transition: background var(--pb-dur-1) var(--pb-ease), border-color var(--pb-dur-1) var(--pb-ease);
}
.hero-buttons .glass:hover { background: var(--pb-on-deep-fill-2); border-color: rgba(255, 255, 255, .3); }

.hero-facts {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--pb-s5) var(--pb-s6);
  margin-top: clamp(32px, 3.4vw, 46px);
  padding-top: clamp(24px, 2.6vw, 32px);
  border-top: 1px solid var(--pb-on-deep-line);
}
.hero-facts span {
  color: var(--pb-on-deep-3);
  font-size: var(--pb-fs-sm);
  line-height: 1.45;
}
.hero-facts b {
  margin-bottom: var(--pb-s1);
  color: var(--pb-on-deep);
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: var(--pb-fw-bold);
  letter-spacing: var(--pb-tracking-tight);
}

/* ---- product mock ---------------------------------------------------- */
.product-window {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--pb-r-xl);
  background: var(--pb-surface);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3);
}
.product-window > header {
  height: 44px;
  padding: 0 var(--pb-s4);
  gap: 6px;
  background: var(--pb-deep);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: var(--pb-on-deep-3);
  font-size: var(--pb-fs-2xs);
  font-weight: var(--pb-fw-medium);
  letter-spacing: .02em;
}
.product-window > header i { width: 8px; height: 8px; background: rgba(255, 255, 255, .22); }
.product-window > header b {
  padding: 3px 8px;
  border-radius: var(--pb-r-pill);
  background: rgba(111, 224, 205, .16);
  color: var(--pb-on-deep-accent);
  font-size: 9px;
  font-weight: var(--pb-fw-bold);
  letter-spacing: .08em;
}
.product-body { grid-template-columns: 60px minmax(0, 1fr); min-height: 0; }
.product-body > aside {
  gap: var(--pb-s3);
  padding: var(--pb-s4) 0;
  background: var(--pb-deep-2);
}
.product-body > aside strong {
  width: 30px; height: 30px;
  margin-bottom: var(--pb-s2);
  border-radius: var(--pb-r-sm);
  background: var(--pb-on-deep-accent);
  color: var(--pb-deep);
  font-size: var(--pb-fs-sm);
}
.product-body > aside i { width: 24px; height: 24px; border-radius: var(--pb-r-xs); background: rgba(255, 255, 255, .08); }
.product-body > aside i:first-of-type { background: rgba(111, 224, 205, .3); }

.product-body > section {
  padding: clamp(18px, 1.8vw, 26px);
  background: var(--pb-surface-2);
  color: var(--pb-text);
}
.product-body section > small {
  display: block;
  margin-bottom: var(--pb-s2);
  color: var(--pb-text-3);
  font-size: 9.5px;
  font-weight: var(--pb-fw-bold);
  letter-spacing: var(--pb-tracking-caps);
}
.mock-title { gap: var(--pb-s3); margin-bottom: var(--pb-s5); }
.mock-title h3 { font-size: clamp(15px, 1.3vw, 19px); letter-spacing: var(--pb-tracking-tight); }
.mock-title button {
  padding: 9px 13px;
  border-radius: var(--pb-r-sm);
  background: var(--pb-accent);
  color: var(--pb-text-on-accent);
  font-size: var(--pb-fs-xs);
  font-weight: var(--pb-fw-semibold);
  white-space: nowrap;
}
.mock-metrics { gap: var(--pb-s2); }
.mock-metrics article {
  padding: var(--pb-s3);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-r-md);
  background: var(--pb-surface);
  box-shadow: var(--pb-sh-1);
}
.mock-metrics small { color: var(--pb-text-3); font-size: 10px; font-weight: var(--pb-fw-medium); }
.mock-metrics b {
  margin: 5px 0 3px;
  color: var(--pb-text);
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: var(--pb-fw-bold);
  letter-spacing: var(--pb-tracking-tight);
}
.mock-metrics span { color: var(--pb-text-3); font-size: 10px; }

.mock-table {
  margin-top: var(--pb-s4);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-r-md);
  background: var(--pb-surface);
  box-shadow: var(--pb-sh-1);
}
.mock-table h4,
.mock-table p {
  display: flex;
  align-items: center;
  gap: var(--pb-s2);
  padding: 11px var(--pb-s3);
  border-bottom: 1px solid var(--pb-border);
  font-size: var(--pb-fs-xs);
}
.mock-table p:last-child { border-bottom: 0; }
.mock-table h4 { background: var(--pb-surface-3); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--pb-text-3); }
.mock-table h4 small,
.mock-table p span {
  float: none;
  margin-left: auto;
  color: var(--pb-text-3);
  font-size: 10px;
  font-weight: var(--pb-fw-regular);
  white-space: nowrap;
}
.mock-table p b { font-family: var(--pb-font-mono); font-size: 11px; font-weight: var(--pb-fw-medium); letter-spacing: -.01em; }
.mock-table p i { width: 7px; height: 7px; margin-right: 0; flex: 0 0 7px; }
.green { background: var(--pb-ok-fg); }
.amber { background: var(--pb-warn-fg); }
.red   { background: var(--pb-bad-fg); }

/* ==========================================================================
   7 · TRUST STRIP
   ========================================================================== */

.trust-strip {
  max-width: var(--pb-container);
  margin: clamp(28px, 3.5vw, 44px) auto clamp(48px, 6vw, 72px);
  padding-inline: var(--pb-gutter);
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pb-s3) clamp(16px, 2.6vw, 38px);
  color: var(--pb-text-3);
  font-size: var(--pb-fs-2xs);
  font-weight: var(--pb-fw-bold);
  letter-spacing: var(--pb-tracking-caps);
  overflow: visible;
  white-space: normal;
  text-align: center;
}
.trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: var(--pb-s3);
}
.trust-strip span + span:before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pb-border-2);
}

/* ==========================================================================
   8 · GENERIC SECTION RHYTHM (home)
   ========================================================================== */

.landing-section {
  max-width: var(--pb-container);
  margin: var(--pb-section-y) auto;
  padding-inline: var(--pb-gutter);
}
.landing-section > header {
  max-width: 44ch;
  margin-bottom: clamp(32px, 3.6vw, 52px);
}
.landing-section h2,
.workflow h2,
.about-premium h2,
.final-cta h2 {
  font-family: var(--pb-font-display);
  font-size: var(--pb-fs-h2);
  font-weight: var(--pb-fw-bold);
  line-height: 1.12;
  letter-spacing: var(--pb-tracking-tighter);
  margin: var(--pb-s3) 0 0;
}
.landing-section header p,
.about-premium p {
  max-width: var(--pb-measure);
  margin-top: var(--pb-s4);
  color: var(--pb-text-2);
  font-size: var(--pb-fs-lg);
  line-height: var(--pb-lh-copy);
}

/* ---- feature cards --------------------------------------------------- */
.feature-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}
@media (max-width: 1000px) { .feature-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .feature-cards { grid-template-columns: minmax(0, 1fr); } }
.feature-cards article {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--pb-card-pad);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-r-xl);
  background: var(--pb-surface);
  box-shadow: var(--pb-sh-1);
  transition: border-color var(--pb-dur-2) var(--pb-ease),
              box-shadow var(--pb-dur-2) var(--pb-ease),
              transform var(--pb-dur-2) var(--pb-ease);
}
.feature-cards article:hover {
  border-color: var(--pb-border-2);
  box-shadow: var(--pb-sh-3);
  transform: translateY(-2px);
}
.feature-cards span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--pb-s5);
  border-radius: var(--pb-r-sm);
  background: var(--pb-accent-soft);
  color: var(--pb-on-soft);
  font-family: var(--pb-font-mono);
  font-size: var(--pb-fs-sm);
  font-weight: var(--pb-fw-bold);
}
.feature-cards h3 {
  margin-bottom: var(--pb-s3);
  font-size: var(--pb-fs-h3);
  font-weight: var(--pb-fw-semibold);
}
.feature-cards p {
  color: var(--pb-text-2);
  font-size: var(--pb-fs-base);
  line-height: var(--pb-lh-copy);
}

/* ---- workflow band --------------------------------------------------- */
.workflow {
  background: linear-gradient(180deg, var(--pb-deep) 0%, var(--pb-deep-2) 100%);
  color: var(--pb-on-deep);
  padding-block: clamp(56px, 6.5vw, 96px);
  padding-inline: max(var(--pb-gutter), calc((100% - var(--pb-container)) / 2));
  border-block: 1px solid var(--pb-border);
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
  --pb-focus: var(--pb-focus-on-deep);
}
.workflow small { color: var(--pb-on-deep-accent); }
.workflow h2 { color: var(--pb-on-deep); max-width: 18ch; }
.workflow ol { gap: var(--pb-s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin: 0; }
.workflow li {
  display: flex;
  flex-direction: column;
  padding: var(--pb-s6);
  border: 1px solid var(--pb-on-deep-line);
  border-radius: var(--pb-r-xl);
  background: var(--pb-on-deep-fill);
}
.workflow li > b {
  display: block;
  margin-bottom: var(--pb-s4);
  color: var(--pb-on-deep-accent);
  font-family: var(--pb-font-mono);
  font-size: var(--pb-fs-md);
  font-weight: var(--pb-fw-bold);
  letter-spacing: .06em;
}
.workflow li h3 {
  margin-bottom: var(--pb-s2);
  color: var(--pb-on-deep);
  font-size: var(--pb-fs-h3);
  font-weight: var(--pb-fw-semibold);
}
.workflow p { color: var(--pb-on-deep-2); font-size: var(--pb-fs-base); line-height: var(--pb-lh-copy); }

/* ---- about panel ----------------------------------------------------- */
.about-premium {
  max-width: var(--pb-container);
  margin: var(--pb-section-y) auto;
  padding: clamp(28px, 3.6vw, 56px);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-r-3xl);
  background: var(--pb-surface);
  box-shadow: var(--pb-sh-2);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.about-premium ul { margin: 0; }
.about-premium li {
  display: flex;
  align-items: flex-start;
  gap: var(--pb-s3);
  padding: var(--pb-s4) 0;
  border-bottom: 1px solid var(--pb-border);
  color: var(--pb-text);
  font-size: var(--pb-fs-base);
  font-weight: var(--pb-fw-medium);
  line-height: var(--pb-lh-base);
}
.about-premium li:last-child { border-bottom: 0; }
.about-premium li:before {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border-radius: 50%;
  background: var(--pb-accent-soft) var(--pb-check) no-repeat center / 12px 9px;
  color: transparent;
}

/* ==========================================================================
   9 · PRICING (home)
   ========================================================================== */

.landing-section.pricing > header { max-width: 40ch; }

.price-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
  gap: clamp(14px, 1.4vw, 20px);
  align-items: stretch;
  padding-top: var(--pb-s4);
}
.price-grid article {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: clamp(24px, 2.4vw, 32px);
  border: 2px solid var(--pb-border);
  border-radius: var(--pb-r-2xl);
  background: var(--pb-surface);
  color: var(--pb-text);
  box-shadow: var(--pb-sh-1);
  transform: none;
  transition: box-shadow var(--pb-dur-2) var(--pb-ease),
              border-color var(--pb-dur-2) var(--pb-ease);
}
.price-grid article:hover { box-shadow: var(--pb-sh-3); }

.price-grid article.featured {
  background: var(--pb-surface);
  color: var(--pb-text);
  border: 2px solid var(--pb-accent);
  box-shadow: var(--pb-sh-4);
  transform: none;
  z-index: 1;
}
/* recommended flag — pill, not a corner ribbon */
.price-grid article > span {
  position: absolute;
  top: 0;
  right: clamp(16px, 2vw, 28px);
  left: auto;
  transform: translateY(-50%);
  padding: 6px var(--pb-s3);
  border: 1px solid var(--pb-accent);
  border-radius: var(--pb-r-pill);
  background: var(--pb-accent);
  color: var(--pb-text-on-accent);
  font-size: var(--pb-fs-2xs);
  font-weight: var(--pb-fw-bold);
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: var(--pb-sh-1);
}

.price-grid small {
  display: block;
  color: var(--pb-accent);
  font-size: var(--pb-fs-xs);
  font-weight: var(--pb-fw-bold);
  letter-spacing: var(--pb-tracking-caps);
}
.price-grid h3 {
  min-height: 2.6em;
  margin: var(--pb-s2) 0 0;
  color: var(--pb-text-2);
  font-size: var(--pb-fs-base);
  font-weight: var(--pb-fw-medium);
  letter-spacing: 0;
  line-height: 1.35;
}
.price-grid strong {
  margin: var(--pb-s4) 0 var(--pb-s5);
  padding-bottom: var(--pb-s5);
  border-bottom: 1px solid var(--pb-border);
  color: var(--pb-text);
  font-size: var(--pb-fs-price);
  font-weight: var(--pb-fw-bold);
  letter-spacing: var(--pb-tracking-tighter);
  line-height: 1.1;
}
.price-grid strong i {
  display: block;
  margin-top: var(--pb-s2);
  color: var(--pb-text-3);
  font-size: var(--pb-fs-sm);
  font-style: normal;
  font-weight: var(--pb-fw-medium);
  letter-spacing: 0;
}
.price-grid ul {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.5;
}
.price-grid li {
  display: flex;
  align-items: flex-start;
  gap: var(--pb-s3);
  padding: var(--pb-s2) 0;
  color: var(--pb-text-2);
  font-size: var(--pb-fs-base);
}
.price-grid li:before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--pb-accent-soft) var(--pb-check) no-repeat center / 10px 8px;
}
.price-grid a {
  min-height: 48px;
  margin-top: var(--pb-s6);
  padding: var(--pb-s3) var(--pb-s5);
  border: 1px solid var(--pb-border-2);
  border-radius: var(--pb-r-md);
  background: var(--pb-surface);
  color: var(--pb-text);
  font-size: var(--pb-fs-md);
  font-weight: var(--pb-fw-semibold);
  align-items: center;
  transition: border-color var(--pb-dur-1) var(--pb-ease), background var(--pb-dur-1) var(--pb-ease);
}
.price-grid a:hover { border-color: var(--pb-border-strong); background: var(--pb-surface-hover); }
.price-grid article.featured a {
  border-color: transparent;
  background: var(--pb-accent);
  color: var(--pb-text-on-accent);
  box-shadow: var(--pb-sh-1);
}
.price-grid article.featured a:hover { background: var(--pb-accent-hover); }

/* ==========================================================================
   10 · FAQ (home + standalone page)
   ========================================================================== */

.faq { max-width: min(var(--pb-measure), 100%); }
.landing-section.faq { max-width: var(--pb-container); }
.landing-section.faq > header,
.landing-section.faq details { max-width: var(--pb-measure); }

.faq details {
  margin: 0 0 var(--pb-s3);
  padding: 0;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-r-lg);
  background: var(--pb-surface);
  box-shadow: var(--pb-sh-1);
  transition: border-color var(--pb-dur-2) var(--pb-ease);
}
.faq details[open] { border-color: var(--pb-border-2); box-shadow: var(--pb-sh-2); }
.faq summary {
  display: flex;
  align-items: center;
  gap: var(--pb-s4);
  min-height: 56px;
  padding: var(--pb-s4) var(--pb-s5);
  color: var(--pb-text);
  font-size: var(--pb-fs-lg);
  font-weight: var(--pb-fw-semibold);
  letter-spacing: var(--pb-tracking-tight);
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  border-radius: var(--pb-r-lg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary:hover { color: var(--pb-accent-link); }
.faq summary:after {
  content: "";
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--pb-accent-soft);
  color: transparent;
  /* chevron drawn with two pseudo-free borders via mask-free approach */
  background-image:
    linear-gradient(to right, var(--pb-on-soft), var(--pb-on-soft)),
    linear-gradient(to right, var(--pb-on-soft), var(--pb-on-soft));
  background-repeat: no-repeat;
  background-size: 9px 2px, 2px 9px;
  background-position: center, center;
  transition: transform var(--pb-dur-2) var(--pb-ease), background-size var(--pb-dur-2) var(--pb-ease);
}
.faq details[open] > summary:after { background-size: 9px 2px, 0 0; }
.faq details > p,
.faq details > div {
  margin: 0;
  padding: 0 var(--pb-s5) var(--pb-s5);
  max-width: var(--pb-measure);
  color: var(--pb-text-2);
  font-size: var(--pb-fs-base);
  line-height: var(--pb-lh-copy);
}
.faq.standalone { max-width: min(880px, 100%); margin-inline: 0; }
.faq.standalone details { max-width: none; }

/* ==========================================================================
   11 · FINAL CTA (home)
   ========================================================================== */

.final-cta {
  max-width: var(--pb-container);
  margin: var(--pb-section-y) auto clamp(56px, 6vw, 88px);
  padding: clamp(32px, 4vw, 60px);
  border-radius: var(--pb-r-3xl);
  background:
    radial-gradient(110% 130% at 12% 10%, rgba(111, 224, 205, .14) 0%, transparent 60%),
    linear-gradient(140deg, var(--pb-hero-a) 0%, var(--pb-hero-b) 100%);
  color: var(--pb-on-deep);
  border: 1px solid var(--pb-border);
  gap: clamp(24px, 3vw, 48px);
  box-shadow: var(--pb-sh-3);
  --pb-focus: var(--pb-focus-on-deep);
}
.final-cta small { color: var(--pb-on-deep-accent); }
.final-cta h2 { color: var(--pb-on-deep); max-width: 20ch; }
.final-cta p {
  max-width: 52ch;
  margin-top: var(--pb-s4);
  color: var(--pb-on-deep-2);
  font-size: var(--pb-fs-lg);
  line-height: var(--pb-lh-copy);
}
.final-cta .primary {
  flex: 0 0 auto;
  min-height: 52px;
  padding: var(--pb-s4) var(--pb-s8);
  border-radius: var(--pb-r-lg);
  background: var(--pb-on-deep);
  color: var(--pb-hero-a);
  font-size: var(--pb-fs-lg);
  font-weight: var(--pb-fw-semibold);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
}
.final-cta .primary:hover { background: var(--pb-on-deep-btn-hover); }

/* ==========================================================================
   12 · INNER PAGES — shell + hero
   ========================================================================== */

.public-page {
  max-width: var(--pb-container);
  margin: 0 auto;
  padding: clamp(24px, 3.4vw, 48px) var(--pb-gutter) clamp(64px, 7vw, 104px);
  min-height: 40vh;
}

.page-hero {
  padding: clamp(32px, 4.4vw, 60px) clamp(24px, 4vw, 56px);
  border-radius: clamp(20px, 2.2vw, 26px);
  margin-bottom: clamp(24px, 3vw, 40px);
  background:
    radial-gradient(120% 120% at 6% 0%, rgba(111, 224, 205, .14) 0%, transparent 58%),
    linear-gradient(140deg, var(--pb-hero-a) 0%, var(--pb-hero-b) 100%);
  color: var(--pb-on-deep);
  border: 1px solid var(--pb-border);
  box-shadow: var(--pb-sh-3);
  --pb-focus: var(--pb-focus-on-deep);
}
.page-hero > span { color: var(--pb-on-deep-accent); }
.page-hero h1 {
  margin: var(--pb-s4) 0 0;
  color: var(--pb-on-deep);
  font-family: var(--pb-font-display);
  font-size: var(--pb-fs-h1);
  font-weight: var(--pb-fw-bold);
  line-height: 1.08;
  letter-spacing: var(--pb-tracking-tighter);
}
.page-hero p {
  max-width: 58ch;
  margin-top: var(--pb-s5);
  color: var(--pb-on-deep-2);
  font-size: var(--pb-fs-lg);
  line-height: var(--pb-lh-copy);
}
.contact-hero { text-align: center; padding-block: clamp(36px, 4.6vw, 64px); }
.contact-hero h1 { font-family: var(--pb-font-display); font-size: var(--pb-fs-h1); letter-spacing: var(--pb-tracking-tighter); line-height: 1.08; }
.contact-hero h1 em {
  display: block;
  margin-top: var(--pb-s2);
  font-family: var(--pb-font-display);
  font-style: normal;
  font-weight: var(--pb-fw-bold);
  color: var(--pb-on-deep-accent);
}
.contact-hero p { margin-inline: auto; }

/* ---- generic inner card grid ---------------------------------------- */
.page-grid,
.module-groups {
  gap: clamp(14px, 1.5vw, 20px);
  align-items: stretch;
}
.page-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: start; }

.page-grid article,
.module-groups article,
.apply-layout > div:not([class]),
.application-form,
.apply-layout > .success-box {
  padding: var(--pb-card-pad);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-r-xl);
  background: var(--pb-surface);
  box-shadow: var(--pb-sh-1);
}
.page-grid article,
.module-groups article {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.page-grid h2,
.module-groups h2,
.apply-layout h2 {
  font-family: var(--pb-font-display);
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  font-weight: var(--pb-fw-bold);
  letter-spacing: var(--pb-tracking-tighter);
  line-height: 1.16;
  margin: var(--pb-s3) 0 0;
}
.page-grid p,
.module-groups p,
.steps p {
  max-width: var(--pb-measure);
  margin-top: var(--pb-s4);
  color: var(--pb-text-2);
  font-size: var(--pb-fs-base);
  line-height: var(--pb-lh-copy);
}
.page-grid h3 {
  font-size: var(--pb-fs-h3);
  font-weight: var(--pb-fw-semibold);
  margin-bottom: var(--pb-s3);
}
.page-grid ul { margin: 0; padding: 0; list-style: none; }
.page-grid li {
  display: flex;
  align-items: flex-start;
  gap: var(--pb-s3);
  padding: var(--pb-s3) 0;
  border-bottom: 1px solid var(--pb-border);
  color: var(--pb-text-2);
  font-size: var(--pb-fs-base);
}
.page-grid li:last-child { border-bottom: 0; }
.page-grid li:before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--pb-accent-soft) var(--pb-check) no-repeat center / 10px 8px;
}

/* pricing page: the module cards that carry a CTA become a 3-up plan row */
.module-groups article { min-height: 0; }
.module-groups:not(:has(a)) { align-items: start; }
.module-groups:not(:has(a)) article:before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: var(--pb-s5);
  border-radius: 2px;
  background: var(--pb-accent);
}
.module-groups:has(a) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.module-groups:has(a) article { padding-bottom: var(--pb-card-pad); }
/* recommended plan = the middle card, matching the home-page price grid */
.module-groups:has(a) article { border-width: 2px; }
.module-groups:has(a) article:nth-child(2) {
  border: 2px solid var(--pb-accent);
  box-shadow: var(--pb-sh-4);
}
.module-groups:has(a) article:not(:nth-child(2)) > a.primary {
  background: var(--pb-surface);
  border: 1px solid var(--pb-border-2);
  color: var(--pb-text);
  box-shadow: none;
}
.module-groups:has(a) article:not(:nth-child(2)) > a.primary:hover {
  border-color: var(--pb-border-strong);
  background: var(--pb-surface-hover);
}
.module-groups h2 i {
  display: block;
  margin-top: var(--pb-s2);
  color: var(--pb-text-3);
  font-size: var(--pb-fs-sm);
  font-style: normal;
  font-weight: var(--pb-fw-medium);
  letter-spacing: 0;
}
.module-groups p + a,
.module-groups article > a.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: auto;
  padding: var(--pb-s3) var(--pb-s6);
  border-radius: var(--pb-r-md);
  font-size: var(--pb-fs-md);
  font-weight: var(--pb-fw-semibold);
}
.module-groups article > a.primary { margin-top: var(--pb-s6); }

/* ---- how-it-works steps --------------------------------------------- */
.steps { gap: var(--pb-s3); margin: 0; max-width: min(940px, 100%); }
.steps li {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--pb-s5);
  align-items: start;
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-r-xl);
  background: var(--pb-surface);
  box-shadow: var(--pb-sh-1);
}
.steps li > b {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--pb-r-md);
  background: var(--pb-accent-soft);
  color: var(--pb-on-soft);
  font-family: var(--pb-font-mono);
  font-size: var(--pb-fs-lg);
  font-weight: var(--pb-fw-bold);
}
.steps h2 {
  margin: 0;
  font-family: var(--pb-font-display);
  font-size: var(--pb-fs-h3);
  font-weight: var(--pb-fw-semibold);
  letter-spacing: var(--pb-tracking-tight);
}
.steps p { margin-top: var(--pb-s2); }

/* ==========================================================================
   13 · FORMS (apply + contact)
   ========================================================================== */

.apply-layout {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}
.apply-layout > div:not([class]) {
  position: sticky;
  top: calc(var(--pb-nav-h) + var(--pb-s5));
  padding: clamp(24px, 2.6vw, 34px);
  border-top: 3px solid var(--pb-accent);
  border-radius: var(--pb-r-xl);
}
/* confirmation view: one calm centred column, no empty form rail */
.apply-layout:has(.success-box) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
  margin-inline: auto;
}
.apply-layout:has(.success-box) > div:not([class]) { position: static; }
.apply-layout > div h2 {
  font-size: clamp(1.3rem, 1.05rem + .9vw, 1.8rem);
  line-height: 1.16;
}
.apply-layout > div p {
  max-width: 40ch;
  margin-top: var(--pb-s4);
  color: var(--pb-text-2);
  font-size: var(--pb-fs-base);
  line-height: var(--pb-lh-copy);
}

.application-form,
.contact-form-card { border-top: 3px solid var(--pb-accent); }
.application-form {
  gap: var(--pb-s4) var(--pb-s4);
  padding: clamp(24px, 2.8vw, 36px);
  border-radius: var(--pb-r-xl);
  box-shadow: var(--pb-sh-2);
}

/* field label + control ----------------------------------------------- */
.application-form label,
.contact-form label {
  gap: var(--pb-s2);
  color: var(--pb-text-2);
  font-size: var(--pb-fs-sm);
  font-weight: var(--pb-fw-semibold);
  letter-spacing: .005em;
  line-height: 1.4;
}

.application-form input,
.application-form select,
.application-form textarea,
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--pb-s3) var(--pb-s4);
  border: 1px solid var(--pb-border-strong);
  border-radius: var(--pb-r-md);
  background: var(--pb-surface);
  color: var(--pb-text);
  font: inherit;
  font-size: var(--pb-fs-body);
  font-weight: var(--pb-fw-regular);
  line-height: 1.4;
  outline: 0;
  box-shadow: none;
  transition: border-color var(--pb-dur-1) var(--pb-ease),
              box-shadow var(--pb-dur-1) var(--pb-ease);
}
.application-form input::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--pb-text-3); opacity: 1; }

.application-form select,
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--pb-s10);
  background-image: var(--pb-select-arrow);
  background-repeat: no-repeat;
  background-position: right var(--pb-s4) center;
  background-size: 12px 8px;
  cursor: pointer;
}

.application-form textarea,
.contact-form textarea {
  min-height: 140px;
  padding-block: var(--pb-s3);
  line-height: var(--pb-lh-base);
  resize: vertical;
}

.application-form input:hover,
.application-form select:hover,
.application-form textarea:hover,
.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover { border-color: var(--pb-text-3); }

.application-form input:focus,
.application-form select:focus,
.application-form textarea:focus,
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--pb-accent);
  box-shadow: 0 0 0 3px var(--pb-ring);
}
.application-form input:focus-visible,
.application-form select:focus-visible,
.application-form textarea:focus-visible,
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--pb-focus);
  outline-offset: 1px;
}

/* submit --------------------------------------------------------------- */
.application-form button,
.contact-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: var(--pb-s2);
  padding: var(--pb-s4) var(--pb-s8);
  border: 1px solid transparent;
  border-radius: var(--pb-r-md);
  background: var(--pb-accent);
  color: var(--pb-text-on-accent);
  font: inherit;
  font-size: var(--pb-fs-lg);
  font-weight: var(--pb-fw-semibold);
  letter-spacing: -.004em;
  cursor: pointer;
  box-shadow: var(--pb-sh-1);
  transition: background var(--pb-dur-1) var(--pb-ease), box-shadow var(--pb-dur-2) var(--pb-ease);
}
.application-form button:hover,
.contact-form button:hover { background: var(--pb-accent-hover); box-shadow: var(--pb-sh-2); }
.application-form button:active,
.contact-form button:active { background: var(--pb-accent-active); }

/* feedback boxes -------------------------------------------------------- */
.error-box {
  display: flex;
  align-items: flex-start;
  gap: var(--pb-s3);
  padding: var(--pb-s4) var(--pb-s5);
  border: 1px solid var(--pb-bad-bd);
  border-radius: var(--pb-r-md);
  background: var(--pb-bad-bg);
  color: var(--pb-bad-fg);
  font-size: var(--pb-fs-base);
  font-weight: var(--pb-fw-medium);
  line-height: var(--pb-lh-base);
}
.error-box:before {
  content: "!";
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--pb-bad-fg);
  color: var(--pb-bad-bg);
  font-size: var(--pb-fs-sm);
  font-weight: var(--pb-fw-black);
}

.success-box,
.contact-success {
  display: grid;
  gap: var(--pb-s3);
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--pb-ok-bd);
  border-radius: var(--pb-r-xl);
  background: var(--pb-ok-bg);
  color: var(--pb-ok-fg);
  box-shadow: var(--pb-sh-1);
}
.success-box {
  justify-items: center;
  align-content: start;
  padding: clamp(32px, 4vw, 52px) clamp(24px, 3vw, 40px);
  font-size: var(--pb-fs-body);
  text-align: center;
}
.success-box:before,
.contact-success:before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: var(--pb-s4);
  background: var(--pb-ok-fg);
  -webkit-mask: var(--pb-check) no-repeat center / 26px 20px;
  mask: var(--pb-check) no-repeat center / 26px 20px;
}
.apply-layout > .success-box,
.contact-form-card .contact-success {
  border: 1px solid var(--pb-ok-bd);
  background: var(--pb-ok-bg);
}
.success-box:before {
  width: 56px;
  height: 56px;
  margin-bottom: var(--pb-s5);
  border: 2px solid var(--pb-ok-bd);
  border-radius: 50%;
  -webkit-mask: none;
  mask: none;
  background: var(--pb-ok-fg) var(--pb-check-invert) no-repeat center / 24px 18px;
}
@supports not (mask: url("")) {
  .success-box:before, .contact-success:before { display: none; }
}
.success-box b,
.contact-success b {
  color: var(--pb-ok-fg);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  font-weight: var(--pb-fw-bold);
  letter-spacing: var(--pb-tracking-tight);
  line-height: 1.25;
}
.contact-success span { color: var(--pb-ok-fg); font-size: var(--pb-fs-base); line-height: var(--pb-lh-copy); max-width: var(--pb-measure); }

/* ---- contact layout --------------------------------------------------- */
.contact-layout { max-width: var(--pb-container); gap: clamp(20px, 3vw, 44px); }
.contact-info h2,
.contact-form-card h2 {
  margin: var(--pb-s3) 0 0;
  font-family: var(--pb-font-display);
  font-size: clamp(1.3rem, 1.1rem + .85vw, 1.8rem);
  font-weight: var(--pb-fw-bold);
  letter-spacing: var(--pb-tracking-tighter);
}
.contact-card,
.contact-form-card {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-r-xl);
  background: var(--pb-surface);
  box-shadow: var(--pb-sh-2);
}
.contact-card { padding: var(--pb-s2) var(--pb-s5); }
.contact-card > a,
.contact-card > div {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--pb-s4);
  padding: var(--pb-s4) 0;
  border-bottom: 1px solid var(--pb-border);
  border-radius: var(--pb-r-sm);
}
.contact-card > a { min-height: 56px; }
.contact-card i {
  width: 34px;
  height: 34px;
  border-radius: var(--pb-r-sm);
  background: var(--pb-accent-soft);
  color: var(--pb-on-soft);
  font-size: var(--pb-fs-md);
}
.contact-card small { color: var(--pb-text-3); font-size: var(--pb-fs-2xs); font-weight: var(--pb-fw-semibold); letter-spacing: .04em; text-transform: uppercase; }
.contact-card b { color: var(--pb-text); font-size: var(--pb-fs-base); font-weight: var(--pb-fw-semibold); line-height: 1.45; }
.contact-card > a:hover b { color: var(--pb-accent-link); }

.contact-help { padding: var(--pb-s2) 0 0; }
.contact-help h3 { font-size: var(--pb-fs-h3); font-weight: var(--pb-fw-semibold); }
.contact-help p { max-width: var(--pb-measure); margin-top: var(--pb-s3); color: var(--pb-text-2); font-size: var(--pb-fs-base); line-height: var(--pb-lh-copy); }
.contact-help a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--pb-s2);
  color: var(--pb-accent-link);
  font-size: var(--pb-fs-base);
  font-weight: var(--pb-fw-semibold);
}
.contact-help a:hover { text-decoration: underline; text-underline-offset: 3px; }

.contact-form-card { padding: clamp(24px, 2.8vw, 36px); }
.contact-form-card > p { max-width: var(--pb-measure); margin-top: var(--pb-s3); color: var(--pb-text-2); font-size: var(--pb-fs-base); line-height: var(--pb-lh-copy); }
.contact-form { gap: var(--pb-s4); margin-top: clamp(20px, 2.2vw, 28px); }
.contact-form label > small { text-align: right; color: var(--pb-text-3); font-size: var(--pb-fs-xs); font-weight: var(--pb-fw-regular); }

.contact-consent {
  align-items: flex-start;
  gap: var(--pb-s3) !important;
  padding: var(--pb-s4);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-r-md);
  background: var(--pb-surface-3);
  color: var(--pb-text-2);
  font-size: var(--pb-fs-base);
  font-weight: var(--pb-fw-regular);
  line-height: var(--pb-lh-base);
  cursor: pointer;
}
.contact-consent input {
  flex: 0 0 20px;
  width: 20px !important;
  height: 20px;
  min-height: 20px !important;
  margin-top: 2px;
  accent-color: var(--pb-accent);
  cursor: pointer;
}
.contact-consent a { color: var(--pb-accent-link); text-decoration: underline; text-underline-offset: 2px; font-weight: var(--pb-fw-semibold); }

/* ==========================================================================
   14 · LEGAL / LONG-FORM DOCUMENTS
   ========================================================================== */

.legal-document { max-width: 100%; margin: 0 auto; }

/* The gradient page-hero already carries the document title, so the inner
   header becomes a quiet lead block instead of a second hero. */
.legal-document > header {
  margin-bottom: var(--pb-s2);
  padding: clamp(8px, 1.4vw, 18px) var(--pb-s2) clamp(20px, 2.4vw, 32px);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pb-text);
  box-shadow: none;
}
.legal-document header span { color: var(--pb-accent); }
.legal-document header h2 {
  margin: var(--pb-s3) 0 0;
  font-family: var(--pb-font-display);
  font-size: clamp(1.15rem, 1.02rem + .5vw, 1.45rem);
  font-weight: var(--pb-fw-semibold);
  letter-spacing: var(--pb-tracking-tight);
  line-height: 1.2;
}
.legal-document header p {
  max-width: var(--pb-measure);
  margin-top: var(--pb-s4);
  color: var(--pb-text-2);
  font-size: var(--pb-fs-lg);
  line-height: var(--pb-lh-loose);
}

.legal-card {
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-r-xl);
  background: var(--pb-surface);
  box-shadow: var(--pb-sh-1);
}
.legal-card h3 {
  font-size: var(--pb-fs-2xl);
  font-weight: var(--pb-fw-bold);
  letter-spacing: var(--pb-tracking-tight);
}
.legal-card > p,
.legal-note p {
  max-width: var(--pb-measure);
  color: var(--pb-text-2);
  font-size: var(--pb-fs-lg);
  line-height: var(--pb-lh-loose);
}
/* NOTE: render_public_legal() prints $doc[1] twice — once in <header><p> and
   again as the first <p> of .legal-card. The duplicate is suppressed here;
   the real fix belongs in app/public_legal.php. */
.legal-card > h3 { margin-bottom: var(--pb-s5); }

.legal-note {
  margin: var(--pb-s6) 0;
  padding: var(--pb-s5) var(--pb-s6);
  border: 1px solid var(--pb-warn-bd);
  border-left: 4px solid var(--pb-warn-fg);
  border-radius: var(--pb-r-md);
  background: var(--pb-warn-bg);
}
.legal-note b {
  display: block;
  margin-bottom: var(--pb-s2);
  color: var(--pb-warn-fg);
  font-size: var(--pb-fs-md);
  font-weight: var(--pb-fw-bold);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.legal-note p { color: var(--pb-warn-fg); font-size: var(--pb-fs-base); line-height: var(--pb-lh-copy); }

.official-links { gap: var(--pb-s2); margin-top: var(--pb-s6); }
.official-links b {
  width: 100%;
  margin-bottom: var(--pb-s2);
  color: var(--pb-text);
  font-size: var(--pb-fs-md);
  font-weight: var(--pb-fw-semibold);
}
.official-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--pb-s3) var(--pb-s4);
  border: 1px solid var(--pb-accent-soft-2);
  border-radius: var(--pb-r-md);
  background: var(--pb-accent-soft);
  color: var(--pb-on-soft);
  font-size: var(--pb-fs-md);
  font-weight: var(--pb-fw-semibold);
  line-height: 1.35;
  transition: background var(--pb-dur-1) var(--pb-ease), border-color var(--pb-dur-1) var(--pb-ease);
}
.official-links a:hover { background: var(--pb-accent-soft-2); border-color: var(--pb-accent); }

/* ==========================================================================
   15 · FOOTER
   ========================================================================== */

.premium-footer {
  margin-top: clamp(48px, 6vw, 88px);
  padding: clamp(48px, 5.5vw, 80px) max(var(--pb-gutter), calc((100% - var(--pb-container)) / 2)) clamp(24px, 3vw, 32px);
  background: linear-gradient(180deg, var(--pb-deep) 0%, var(--pb-deep-2) 100%);
  color: var(--pb-on-deep);
  border-top: 1px solid var(--pb-border);
  --pb-focus: var(--pb-focus-on-deep);
}
.footer-main { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.55fr); gap: clamp(36px, 5vw, 80px); }
.footer-logo { gap: var(--pb-s3); }
.footer-logo span {
  width: 44px;
  height: 44px;
  border-radius: var(--pb-r-lg);
  background: var(--pb-on-deep-accent);
  color: var(--pb-deep);
  font-size: 22px;
  font-weight: var(--pb-fw-black);
}
.footer-logo b { font-size: 20px; font-weight: var(--pb-fw-bold); letter-spacing: var(--pb-tracking-tight); }
.footer-logo em { font-style: normal; color: var(--pb-on-deep-accent); }
.footer-brand p {
  max-width: 46ch;
  margin-top: var(--pb-s5);
  color: var(--pb-on-deep-2);
  font-size: var(--pb-fs-base);
  line-height: var(--pb-lh-copy);
}
.footer-badges { gap: var(--pb-s2); margin-top: var(--pb-s6); }
.footer-badges span {
  padding: var(--pb-s2) var(--pb-s3);
  border: 1px solid var(--pb-on-deep-line);
  border-radius: var(--pb-r-pill);
  background: var(--pb-on-deep-fill);
  color: var(--pb-on-deep-2);
  font-size: var(--pb-fs-xs);
  font-weight: var(--pb-fw-medium);
}
.footer-main > nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.footer-main nav div { gap: 0; }
.footer-main nav b {
  margin-bottom: var(--pb-s3);
  color: var(--pb-on-deep);
  font-size: var(--pb-fs-xs);
  font-weight: var(--pb-fw-bold);
  letter-spacing: var(--pb-tracking-caps);
  text-transform: uppercase;
}
.footer-main nav a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding-block: var(--pb-s1);
  color: var(--pb-on-deep-2);
  font-size: var(--pb-fs-md);
  font-weight: var(--pb-fw-regular);
  line-height: 1.4;
  border-radius: var(--pb-r-xs);
  transition: color var(--pb-dur-1) var(--pb-ease);
}
.footer-main nav a:hover { color: var(--pb-on-deep-accent); transform: none; text-decoration: underline; text-underline-offset: 3px; }

.footer-bottom {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--pb-s4) var(--pb-s6);
  margin-top: clamp(40px, 4.5vw, 64px);
  padding-top: var(--pb-s6);
  border-top: 1px solid var(--pb-on-deep-line);
  color: var(--pb-on-deep-3);
  font-size: var(--pb-fs-sm);
}
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--pb-on-deep-accent);
  font-weight: var(--pb-fw-semibold);
}
.footer-bottom a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   16 · RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  .landing-hero { grid-template-columns: minmax(0, 1fr); }
  .workflow { grid-template-columns: minmax(0, 1fr); }
  .workflow h2 { max-width: none; }
  .about-premium { grid-template-columns: minmax(0, 1fr); }
  .apply-layout { grid-template-columns: minmax(0, 1fr); }
  .apply-layout > div { position: static; }
  .page-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .footer-main { grid-template-columns: minmax(0, 1fr); }
  .footer-main > nav { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
  .footer-bottom { grid-template-columns: minmax(0, 1fr); }
  .footer-main nav a { min-height: 44px; }
  .final-cta { flex-direction: column; align-items: flex-start; }
  .final-cta .primary { width: 100%; }
}

@media (max-width: 760px) {
  .landing-hero {
    max-width: none;
    margin: var(--pb-s4) var(--pb-gutter) 0;
    padding: clamp(28px, 6vw, 40px) clamp(20px, 5vw, 28px);
    border-radius: var(--pb-r-2xl);
  }
  .hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pb-s4) var(--pb-s3); }
  .hero-facts b { font-size: 17px; }
  .hero-facts span { font-size: var(--pb-fs-xs); }
  .about-premium,
  .final-cta { margin-inline: var(--pb-gutter); max-width: none; }
  .steps li { grid-template-columns: 44px minmax(0, 1fr); gap: var(--pb-s4); }
  .application-form,
  .contact-form { grid-template-columns: minmax(0, 1fr); }
  .application-form .wide,
  .contact-form .wide,
  .contact-form .error-box,
  .application-form .error-box { grid-column: 1 / -1; }
  .module-groups,
  .module-groups:has(a),
  .page-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  :root { --pb-gutter: 16px; }
  .public-page { padding-inline: var(--pb-gutter); }
  .landing-section { padding-inline: var(--pb-gutter); }
  .landing-nav { padding-inline: var(--pb-gutter); gap: var(--pb-s3); }
  .landing-brand span { width: 38px; height: 38px; flex-basis: 38px; font-size: 19px; }
  .landing-brand b { font-size: 16px; }
  .landing-nav .nav-toggle { width: 44px; height: 44px; flex-basis: 44px; }
  .landing-nav > nav { left: var(--pb-gutter); right: var(--pb-gutter); }
  .hero-copy h1 { font-size: clamp(1.9rem, 8.6vw, 2.5rem); overflow-wrap: anywhere; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-buttons a { width: 100%; }
  .page-hero { padding-inline: clamp(20px, 5vw, 28px) !important; }
  .contact-hero { padding: clamp(32px, 7vw, 44px) var(--pb-s5); }
  .trust-strip { padding-inline: var(--pb-gutter); font-size: 10px; letter-spacing: .08em; }
  .footer-main > nav { grid-template-columns: minmax(0, 1fr); gap: var(--pb-s7); }
  .footer-main > nav div:last-child { grid-column: auto; }
  .premium-footer { padding-inline: var(--pb-gutter); }
  .legal-card,
  .legal-document > header { border-radius: var(--pb-r-lg); padding: var(--pb-s5); }
  .official-links { flex-direction: column; align-items: stretch; }
  .official-links a { width: 100%; }
  .faq summary { padding: var(--pb-s4); font-size: var(--pb-fs-base); }
  .faq details > p { padding: 0 var(--pb-s4) var(--pb-s4); }
  .contact-info { grid-template-columns: minmax(0, 1fr); }
  .contact-info > div:first-child,
  .contact-help { grid-column: auto; }
  .contact-form-card { padding: var(--pb-s5); }
  .contact-card { padding-inline: var(--pb-s4); }
  .application-form { padding: var(--pb-s5); }
}

@media (max-width: 400px) {
  .price-grid article > span { right: var(--pb-s3); font-size: 10px; }
  .mock-title { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   17 · LEGACY v1 PUBLIC MARKUP (app/public_home.php) — token alignment only
   ========================================================================== */

.public-site { background: var(--pb-bg); color: var(--pb-text); }
.public-nav,
.public-footer { border-color: var(--pb-border); }
.public-hero { background: linear-gradient(140deg, var(--pb-hero-a), var(--pb-hero-b)); color: var(--pb-on-deep); }
.public-section { max-width: var(--pb-container); margin-inline: auto; padding-inline: var(--pb-gutter); }
.plan-grid,
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--pb-s4); }
.outline-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--pb-s3) var(--pb-s5);
  border: 1px solid var(--pb-border-2); border-radius: var(--pb-r-md);
  background: var(--pb-surface); color: var(--pb-text); font-weight: var(--pb-fw-semibold);
}

/* ==================================================================
   v52.10 — Fiyatlarımız
   ================================================================== */

.pr-hero {
  display: grid; gap: var(--pb-s5);
  padding: var(--pb-s10) var(--pb-gutter) var(--pb-s8);
  max-width: var(--pb-container); margin: 0 auto; text-align: center;
  justify-items: center;
}
.pr-eyebrow {
  font-size: var(--pb-fs-2xs); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pb-accent);
}
.pr-hero h1 {
  margin: var(--pb-s3) 0 0; max-width: 18ch;
  font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.1; letter-spacing: -.02em;
}
.pr-hero h1 em { font-style: normal; color: var(--pb-accent); }
.pr-hero-text > p { margin: var(--pb-s4) auto 0; max-width: 58ch; color: var(--pb-text-2); }
.pr-hero-points {
  display: flex; flex-wrap: wrap; gap: var(--pb-s4); justify-content: center;
  margin-top: var(--pb-s5); font-size: var(--pb-fs-sm); color: var(--pb-text-2);
}

.pr-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  border: 1px solid var(--pb-border); border-radius: 999px;
  background: var(--pb-surface-2);
}
.pr-toggle button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px var(--pb-s5); border: 0; border-radius: 999px;
  background: transparent; color: var(--pb-text-2);
  font-size: var(--pb-fs-sm); font-weight: 700; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.pr-toggle button.is-active { background: var(--pb-accent); color: var(--pb-text-on-accent); }
.pr-toggle button:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; }
.pr-save {
  padding: 1px 7px; border-radius: 999px;
  background: var(--pb-ok-bg); color: var(--pb-ok-fg);
  font-size: var(--pb-fs-2xs); font-weight: 800;
}
.pr-toggle button.is-active .pr-save {
  background: color-mix(in srgb, var(--pb-text-on-accent) 18%, transparent);
  color: var(--pb-text-on-accent);
}

/* --- Plan kartları --- */
.pr-plans {
  display: grid; gap: var(--pb-s5);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  max-width: var(--pb-container); margin: 0 auto; padding: 0 var(--pb-gutter) var(--pb-s8);
  align-items: start;
}
.pr-plan {
  position: relative; display: grid; gap: var(--pb-s4);
  padding: var(--pb-s6);
  border: 1px solid var(--pb-border); border-radius: var(--pb-r-xl);
  background: var(--pb-surface);
}
.pr-plan.is-featured {
  border-color: var(--pb-accent); box-shadow: 0 18px 46px -24px var(--pb-accent);
}
.pr-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 4px var(--pb-s4); border-radius: 999px;
  background: var(--pb-accent); color: var(--pb-text-on-accent);
  font-size: var(--pb-fs-2xs); font-weight: 800; white-space: nowrap;
}
.pr-plan h2 { margin: 0; font-size: var(--pb-fs-lg); }
.pr-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pr-price b { font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -.02em; }
.pr-price small { color: var(--pb-text-3); font-size: var(--pb-fs-sm); }
.pr-yearly-note { margin: -8px 0 0; font-size: var(--pb-fs-xs); color: var(--pb-text-3); }

.pr-limits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pb-s4); }
.pr-limits li { font-size: var(--pb-fs-xs); color: var(--pb-text-2); }
.pr-limits b { display: block; font-size: var(--pb-fs-md); color: var(--pb-text); }

.pr-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pr-features li {
  position: relative; padding-left: 22px;
  font-size: var(--pb-fs-sm); color: var(--pb-text-2);
}
.pr-features li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--pb-accent); font-weight: 800;
}

.pr-cta {
  display: block; padding: 12px var(--pb-s5); border-radius: var(--pb-r-md);
  background: var(--pb-accent); color: var(--pb-text-on-accent);
  font-weight: 700; text-align: center; text-decoration: none;
  transition: filter .18s ease;
}
.pr-cta:hover { filter: brightness(1.08); }
.pr-cta.secondary { background: transparent; color: var(--pb-text); border: 1px solid var(--pb-border); }
.pr-cta:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; }
.pr-cta-note { display: block; text-align: center; font-size: var(--pb-fs-2xs); color: var(--pb-text-3); }

/* --- Karşılaştırma tablosu --- */
.pr-compare { max-width: var(--pb-container); margin: 0 auto; padding: var(--pb-s8) var(--pb-gutter); }
.pr-compare h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.pr-compare-note { margin: var(--pb-s2) 0 var(--pb-s5); color: var(--pb-text-2); font-size: var(--pb-fs-sm); }
.pr-table-wrap { overflow-x: auto; border: 1px solid var(--pb-border); border-radius: var(--pb-r-lg); }
.pr-table { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--pb-surface); }
.pr-table th, .pr-table td { padding: var(--pb-s3) var(--pb-s4); text-align: left; }
.pr-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--pb-surface-2); font-size: var(--pb-fs-sm);
  border-bottom: 1px solid var(--pb-border);
}
.pr-table thead th:not(:first-child), .pr-table td { text-align: center; }
.pr-table tbody th { font-weight: 600; }
.pr-table tbody th b { display: block; font-size: var(--pb-fs-sm); }
.pr-table tbody th small { display: block; font-size: var(--pb-fs-2xs); color: var(--pb-text-3); }
.pr-table tbody tr + tr th, .pr-table tbody tr + tr td { border-top: 1px solid var(--pb-border); }
.pr-mark { font-weight: 800; font-size: var(--pb-fs-md); }
.pr-mark.is-yes { color: var(--pb-accent); }
.pr-mark.is-no { color: var(--pb-text-3); }

/* --- SSS --- */
.pr-faq { max-width: 860px; margin: 0 auto; padding: var(--pb-s8) var(--pb-gutter); }
.pr-faq h2 { margin: 0 0 var(--pb-s5); font-size: clamp(1.5rem, 2.6vw, 2rem); }
.pr-faq-list { display: grid; gap: var(--pb-s3); }
.pr-faq details {
  border: 1px solid var(--pb-border); border-radius: var(--pb-r-lg);
  background: var(--pb-surface); padding: var(--pb-s4) var(--pb-s5);
}
.pr-faq summary {
  cursor: pointer; font-weight: 700; font-size: var(--pb-fs-md);
  list-style: none; display: flex; justify-content: space-between; gap: var(--pb-s4);
}
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::after { content: '+'; color: var(--pb-accent); font-weight: 800; }
.pr-faq details[open] summary::after { content: '−'; }
.pr-faq details p { margin: var(--pb-s3) 0 0; color: var(--pb-text-2); line-height: 1.7; }

/* --- Kapanış --- */
.pr-final {
  display: flex; flex-wrap: wrap; gap: var(--pb-s5); align-items: center;
  max-width: var(--pb-container); margin: 0 auto var(--pb-s10);
  padding: var(--pb-s7) var(--pb-s6);
  border-radius: var(--pb-r-xl);
  background: var(--pb-surface-2); border: 1px solid var(--pb-border);
}
.pr-final > div:first-child { flex: 1 1 320px; }
.pr-final h2 { margin: 0 0 var(--pb-s2); font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.pr-final p { margin: 0; color: var(--pb-text-2); }
.pr-final-actions { display: flex; flex-wrap: wrap; gap: var(--pb-s3); }
.pr-final-actions .pr-cta { padding: 12px var(--pb-s6); }

@media (max-width: 760px) {
  .pr-final { margin-left: var(--pb-gutter); margin-right: var(--pb-gutter); }
  .pr-final-actions { width: 100%; }
  .pr-final-actions .pr-cta { flex: 1 1 100%; }
}

/* Ekran okuyucuya özel metin (görsel olarak gizli).
   Uygulama tarafında premium.css'te tanımlı; tanıtım sitesinde
   eksikti, bu yüzden tablo başlıkları ekranda görünüyordu. */
.sr-only, .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   v52.13 · ÜST MENÜ BÜYÜTME + ORTAK FİYAT BLOĞU + YENİ ANA SAYFA BÖLÜMLERİ
   ========================================================================== */

/* --- 1 · Üst menü bir tık büyür -----------------------------------------
   Çubuk 76 → 88px, marka kilidi ve bağlantılar orantılı büyütüldü.
   Dar bantta (1101–1560px) çakışmasın diye sıkıştırma kuralı korunur;
   büyüyen ölçüler yüzünden o bandın üst sınırı 1400 → 1560px'e alındı. */
:root { --pb-nav-h: 88px; }

.landing-nav { column-gap: clamp(12px, 1.8vw, 30px); }
.landing-brand { gap: var(--pb-s3); }
.landing-brand span {
  width: 50px; height: 50px; flex: 0 0 50px;
  border-radius: var(--pb-r-xl);
  font-size: 25px;
}
.landing-brand b { font-size: clamp(18px, 1.45vw, 22px); }

.landing-nav nav { gap: 3px; }
.landing-nav nav > a {
  min-height: 46px;
  padding: var(--pb-s2) clamp(10px, .95vw, 16px);
  font-size: clamp(14px, 1.02vw, 16.5px);
  font-weight: var(--pb-fw-semibold);
}
.landing-nav .nav-actions { gap: var(--pb-s3); }
.landing-nav .nav-actions > .primary,
.landing-nav .nav-actions > .ghost {
  min-height: 50px;
  padding: var(--pb-s3) clamp(18px, 1.5vw, 26px);
  font-size: var(--pb-fs-lg);
}
.landing-nav .public-account { min-height: 52px; }
.landing-nav .public-account-avatar { flex: 0 0 40px; width: 40px; height: 40px; }
.landing-nav .nav-toggle { width: 50px; height: 50px; flex-basis: 50px; }

/* Sıkıştırma bantları — marka + 7 bağlantı + 2 düğme aynı satıra sığmalı.
   Tek bir bant yerine KADEMELİ üç bant var: ekran daralttıkça yazı tipi
   bir basamak küçülür, böylece 1600'lük ekranda da menü eskisinden
   belirgin biçimde büyük kalır. Sınırlar ölçümle bulundu: 1620px'te
   tam boy şerit 934px yer istiyor, sütun ise 923px. */
@media (min-width: 1561px) and (max-width: 1700px) {
  .landing-nav nav > a { padding-inline: 9px; font-size: 14.5px; }
}
@media (min-width: 1101px) and (max-width: 1560px) {
  .landing-nav { column-gap: 10px; }
  .landing-nav nav > a { padding-inline: 6px; font-size: 12.5px; }
  .landing-nav .nav-actions > .primary,
  .landing-nav .nav-actions > .ghost { min-height: 46px; padding-inline: 14px; font-size: var(--pb-fs-sm); }
  .landing-brand b { font-size: 17px; }
  .landing-brand span { width: 42px; height: 42px; flex: 0 0 42px; font-size: 21px; }
}
/* oturum açıkken sağda bir de hesap kartı var: bant daha geniş */
@media (min-width: 1101px) and (max-width: 1820px) {
  .landing-nav:has(.public-account) nav > a { padding-inline: 6px; font-size: 12.5px; }
  .landing-nav:has(.public-account) .landing-brand b { font-size: 17px; }
  .landing-nav:has(.public-account) .landing-brand span { width: 42px; height: 42px; flex: 0 0 42px; font-size: 21px; }
  .landing-nav:has(.public-account) .public-account { min-height: 46px; }
}
@media (max-width: 1100px) {
  .landing-nav { min-height: 72px; }
  .landing-brand span { width: 44px; height: 44px; flex: 0 0 44px; font-size: 22px; }
  .landing-brand b { font-size: 19px; }
}

/* --- 2 · Ortak fiyat bloğu ----------------------------------------------
   Aynı işaretleme hem ana sayfada hem Fiyatlarımız sayfasında çizilir. */
.pr-plans-wrap { display: block; }

.pr-toggle-row {
  display: flex;
  justify-content: center;
  padding: 0 var(--pb-gutter) var(--pb-s6);
}
.pr-plan-for {
  margin: calc(var(--pb-s2) * -1) 0 0;
  color: var(--pb-text-3);
  font-size: var(--pb-fs-sm);
  line-height: 1.45;
}

/* Ana sayfada blok zaten .landing-section'ın içinde; kendi kenar boşluğunu
   ve genişlik sınırını bir daha uygulamamalı, yoksa çift boşluk oluşur. */
.landing-section.pricing .pr-plans,
.landing-section.pricing .pr-toggle-row {
  max-width: none;
  padding-inline: 0;
}
.landing-section.pricing .pr-plans { padding-bottom: 0; }

.pricing-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pb-s4);
  margin-top: var(--pb-s7);
  padding-top: var(--pb-s6);
  border-top: 1px solid var(--pb-border);
}
.pricing-foot > span { color: var(--pb-text-3); font-size: var(--pb-fs-sm); }
.pricing-foot .pr-cta { width: auto; }

/* --- 3 · Kimler kullanıyor / Güvenlik ve uyum ---------------------------- */
.audience-grid,
.trust-grid {
  display: grid;
  gap: clamp(14px, 1.4vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
/* Güvenlik bölümünde ALTI kart var: otomatik yerleşim geniş ekranda
   4 + 2 yapıp sağda iki boş göz bırakıyordu. Üçe böldük: 3 + 3. */
@media (min-width: 1000px) {
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
}
.audience-grid article,
.trust-grid article {
  padding: var(--pb-card-pad);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-r-2xl);
  background: var(--pb-surface);
  box-shadow: var(--pb-sh-1);
  transition: box-shadow var(--pb-dur-2) var(--pb-ease),
              border-color var(--pb-dur-2) var(--pb-ease);
}
.audience-grid article:hover,
.trust-grid article:hover { border-color: var(--pb-border-2); box-shadow: var(--pb-sh-3); }
.audience-grid b,
.trust-grid b {
  display: block;
  margin-bottom: var(--pb-s2);
  color: var(--pb-text);
  font-size: var(--pb-fs-lg);
  font-weight: var(--pb-fw-semibold);
  letter-spacing: var(--pb-tracking-tight);
}
.audience-grid p,
.trust-grid p { margin: 0; color: var(--pb-text-2); line-height: 1.65; }

.trust-grid b::before {
  content: "✓";
  display: inline-block;
  margin-right: 9px;
  color: var(--pb-accent);
  font-weight: var(--pb-fw-black);
}

.security-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-s2) var(--pb-s5);
  margin: var(--pb-s6) 0 0;
}
.security-links > a {
  color: var(--pb-accent-link);
  font-size: var(--pb-fs-sm);
  font-weight: var(--pb-fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.security-links > a:hover { color: var(--pb-accent-hover); }

/* --- 4 · Kapanış çağrısı ve başvuru formu -------------------------------- */
.final-cta-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-s2) var(--pb-s5);
  margin: var(--pb-s5) 0 0;
  padding: 0;
  list-style: none;
  color: var(--pb-on-deep-2);
  font-size: var(--pb-fs-sm);
  font-weight: var(--pb-fw-medium);
}
.final-cta-points > li::before {
  content: "✓";
  margin-right: 7px;
  color: var(--pb-on-deep-accent);
  font-weight: var(--pb-fw-black);
}
.final-cta-actions { display: flex; flex-wrap: wrap; gap: var(--pb-s3); }

.apply-points {
  display: grid;
  gap: var(--pb-s2);
  margin: var(--pb-s5) 0 0;
  padding: 0;
  list-style: none;
  color: var(--pb-text-2);
  font-size: var(--pb-fs-sm);
}
.apply-points > li::before {
  content: "✓";
  margin-right: 8px;
  color: var(--pb-accent);
  font-weight: var(--pb-fw-black);
}
.success-box span { display: block; margin-top: var(--pb-s2); color: var(--pb-text-2); font-size: var(--pb-fs-sm); }

@media (max-width: 760px) {
  .pricing-foot { flex-direction: column; align-items: stretch; }
  .pricing-foot .pr-cta { width: 100%; }
  .final-cta-actions { width: 100%; }
  .final-cta-actions > a { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   v52.17 · ALT BİLGİ YENİLENDİ
   Dört dengeli sütun, iletişim bloğu, güven şeridi ve baştaki çağrı bandı.
   En alttaki "Güvenli giriş" düğmesi kaldırıldı; giriş ve başvuru artık
   çağrı bandında, ait oldukları yerde.
   ========================================================================== */

/* --- Çağrı bandı ------------------------------------------------------ */
.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pb-s5);
  margin-bottom: clamp(36px, 4vw, 56px);
  padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.8vw, 36px);
  border: 1px solid var(--pb-on-deep-line);
  border-radius: var(--pb-r-2xl);
  background: var(--pb-on-deep-fill);
}
.footer-cta > div:first-child { display: grid; gap: 6px; min-width: min(100%, 30ch); }
.footer-cta b {
  color: var(--pb-on-deep);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: var(--pb-fw-bold);
  letter-spacing: var(--pb-tracking-tight);
}
.footer-cta span { color: var(--pb-on-deep-3); font-size: var(--pb-fs-sm); }
.footer-cta-actions { display: flex; flex-wrap: wrap; gap: var(--pb-s3); }
.footer-cta-actions > a { min-height: 48px; padding-inline: var(--pb-s6); white-space: nowrap; }
/* Koyu zeminde ikincil düğme: yüzey rengi yerine ince çerçeve */
.footer-cta-actions > .ghost {
  background: transparent;
  border-color: var(--pb-on-deep-line);
  color: var(--pb-on-deep);
}
.footer-cta-actions > .ghost:hover {
  background: var(--pb-on-deep-fill-2);
  border-color: var(--pb-on-deep-accent);
}

/* --- Sütun dengesi ----------------------------------------------------
   Eskiden üç sütun vardı ve "Yasal" on satırla diğerlerinin iki katı
   uzunluktaydı. Dörde bölününce en uzun sütun yediye indi. */
/* İKİ SÜTUNLU DÜZEN YALNIZCA GENİŞ EKRANDA. Bu kural dosyanın sonunda
   olduğu için, medya sorgusu olmadan yazıldığında yukarıdaki
   "max-width: 900px" kuralını da eziyor ve telefonda marka bloğu ile
   bağlantılar yan yana sıkışıyordu. */
@media (min-width: 901px) {
  .footer-main { grid-template-columns: minmax(260px, 1fr) minmax(0, 2.15fr); }
  .footer-main > nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 34px); }
}
.footer-main nav a { font-size: var(--pb-fs-sm); }

/* --- İletişim bloğu --------------------------------------------------- */
.footer-contact {
  display: grid;
  gap: var(--pb-s3);
  margin: var(--pb-s6) 0 0;
  padding: 0;
  list-style: none;
}
.footer-contact > li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--pb-s2);
  align-items: start;
  color: var(--pb-on-deep-2);
  font-size: var(--pb-fs-sm);
  line-height: 1.5;
}
.footer-contact i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--pb-r-sm);
  background: var(--pb-on-deep-fill);
  color: var(--pb-on-deep-accent);
  font-size: 12px;
  font-style: normal;
  font-weight: var(--pb-fw-bold);
}
.footer-contact a { color: var(--pb-on-deep-2); }
.footer-contact a:hover {
  color: var(--pb-on-deep-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Güven şeridi ----------------------------------------------------- */
.footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-s3) clamp(18px, 2.4vw, 38px);
  margin-top: clamp(32px, 3.6vw, 52px);
  padding-top: var(--pb-s6);
  border-top: 1px solid var(--pb-on-deep-line);
}
.footer-trust > span {
  display: inline-flex;
  align-items: center;
  gap: var(--pb-s2);
  color: var(--pb-on-deep-3);
  font-size: var(--pb-fs-sm);
}
.footer-trust i { color: var(--pb-on-deep-accent); font-style: normal; font-weight: var(--pb-fw-black); }

/* --- Alt satır -------------------------------------------------------- */
.footer-bottom { margin-top: var(--pb-s6); }
.footer-mini { display: flex; flex-wrap: wrap; gap: var(--pb-s2) var(--pb-s5); }
.footer-mini > a {
  color: var(--pb-on-deep-3);
  font-size: var(--pb-fs-sm);
  font-weight: var(--pb-fw-medium);
}
.footer-mini > a:hover { color: var(--pb-on-deep-accent); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 901px) and (max-width: 1100px) {
  .footer-main > nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .footer-cta { flex-direction: column; align-items: stretch; }
  .footer-cta-actions { width: 100%; }
  .footer-cta-actions > a { flex: 1 1 100%; justify-content: center; }
  .footer-bottom { gap: var(--pb-s3); }
}
@media (max-width: 560px) {
  .footer-main > nav { grid-template-columns: minmax(0, 1fr); gap: var(--pb-s5); }
}

/* ==========================================================================
   v52.18 · ÜST MENÜ CANLANDIRMA + KAHRAMAN BÖLÜMÜ ÜSTE YASLANIYOR
   ========================================================================== */

/* --- 1 · Menü bir tık daha büyük ---------------------------------------
   DİKKAT: ölçü artışları bir ALT SINIRLA korunur. Bu blok dosyanın
   sonunda olduğu için, medya sorgusuz yazıldığında yukarıdaki
   1101–1560px ve 1561–1700px sıkıştırma bantlarını da eziyor ve
   1440px'lik ekranda marka ile bağlantılar üst üste biniyordu.

   Bağlantı iç boşluğu tek bir belirteçte tutulur: alttaki çizgi de
   aynı değeri kullandığı için her bantta bağlantıyla aynı hizada başlar. */
:root { --pb-nav-h: 96px; --pb-navlink-pad: 6px; }

@media (min-width: 1561px) and (max-width: 1700px) {
  :root { --pb-navlink-pad: 9px; }
}
@media (min-width: 1701px) {
  :root { --pb-navlink-pad: clamp(11px, 1vw, 17px); }
  .landing-brand span { width: 52px; height: 52px; flex: 0 0 52px; font-size: 26px; }
  .landing-brand b { font-size: clamp(19px, 1.5vw, 23px); }
  .landing-nav nav > a { font-size: clamp(14.5px, 1.06vw, 17px); }
  .landing-nav .nav-actions > .primary,
  .landing-nav .nav-actions > .ghost { font-size: var(--pb-fs-lg); }
}

/* Yükseklik ve dokunma alanı her bantta büyür; genişliği etkilemez. */
.landing-nav nav > a { position: relative; min-height: 48px; }
.landing-nav .nav-actions > .primary,
.landing-nav .nav-actions > .ghost { min-height: 52px; }

/* --- 2 · Canlandırma ---------------------------------------------------
   Bağlantının altında, fareyle gelindiğinde ORTADAN AÇILAN bir çizgi.
   Ayrı bir öğe değil, ::after olduğu için işaretleme değişmez. */
.landing-nav nav > a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--pb-accent);
  opacity: 0;
  transition: left var(--pb-dur-3) var(--pb-ease-out),
              right var(--pb-dur-3) var(--pb-ease-out),
              opacity var(--pb-dur-2) var(--pb-ease);
}
.landing-nav nav > a:hover::after,
.landing-nav nav > a:focus-visible::after,
.landing-nav nav > a.active::after {
  left: var(--pb-navlink-pad);
  right: var(--pb-navlink-pad);
  opacity: 1;
}

.landing-brand { transition: transform var(--pb-dur-2) var(--pb-ease); }
.landing-brand:hover { transform: translateY(-1px); }
.landing-nav .nav-actions > .primary:hover { transform: translateY(-1px); }

/* --- 3 · Kaydırma durumu ----------------------------------------------
   Sayfa başındayken çubuğun alt çizgisi YOKTUR: kahraman bölümü doğrudan
   menünün altından akar. Aşağı kaydırıldığında çizgi ve gölge belirir,
   çubuk bir miktar kısalır. */
/* BİLDİRİLEN HATA: "ana sayfada titreme var aşağı yukarı gidince."
   SEBEBİ: çubuk position:sticky, yani AKIŞTA YER KAPLAR. 'is-stuck'
   durumunda min-height 14px kısalıyordu; sınıf her değiştiğinde sayfanın
   tamamı 14px yeniden akıyor, kahraman bölümü zıplıyordu. Eşik 8px olduğu
   için küçük bir kaydırmada sınıf gidip geliyor — ölçümde kısa bir
   hareket sırasında 9 kez değişti, menü yüksekliği 82 ile 96 arasında
   gidip geldi, belge yüksekliği 14px oynadı.
   ÇÖZÜM: kaydırma durumu artık YALNIZCA BOYAMA özellikleriyle anlatılır
   (çizgi, gölge, zemin). Yükseklik iki durumda da aynıdır; hiçbir sınıf
   değişimi sayfayı yeniden akıtmaz. Canlılık, akışı etkilemeyen
   transform ile korunur. */
.landing-nav {
  border-bottom-color: transparent;
  transition: box-shadow var(--pb-dur-3) var(--pb-ease),
              border-color var(--pb-dur-3) var(--pb-ease),
              background var(--pb-dur-3) var(--pb-ease);
}
.landing-nav.is-stuck {
  border-bottom-color: var(--pb-border);
  box-shadow: var(--pb-sh-2);
  background: var(--pb-bg);
}
/* Logo küçülmesi transform ile: width/height akışı değiştirip aynı
   titremeyi geri getirirdi. transform yalnızca boyama katmanında çalışır. */
.landing-brand span { transition: transform var(--pb-dur-3) var(--pb-ease); }
.landing-nav.is-stuck .landing-brand span { transform: scale(.92); }

/* Hareketi azaltılmış kullanıcıda hiçbir geçiş çalışmaz */
@media (prefers-reduced-motion: reduce) {
  .landing-nav,
  .landing-nav nav > a::after,
  .landing-brand,
  .landing-nav .nav-actions > .primary,
  .landing-brand span { transition: none; }
  .landing-nav.is-stuck .landing-brand span { transform: none; }
}

/* --- 4 · Kahraman bölümü menüye yaslanır -------------------------------
   Eskiden araya 43px (iç sayfalarda 48px) boşluk giriyordu; koyu panel
   havada asılı duruyordu. Artık menünün hemen altından, kenardan kenara
   başlıyor. İçerik hizası menüyle aynı kapta kalır. */
.landing-hero {
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-block: clamp(44px, 5vw, 78px) clamp(40px, 4.4vw, 66px);
  padding-inline: max(var(--pb-gutter), calc((100% - var(--pb-container)) / 2));
}

/* İç sayfalarda başlık bloğu <main>'in DIŞINA taşındı; aynı şekilde
   kenardan kenara ve menüye yaslı. */
.page-hero {
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-block: clamp(40px, 4.6vw, 64px);
  padding-inline: max(var(--pb-gutter), calc((100% - var(--pb-container)) / 2));
}
.page-hero > span,
.page-hero h1,
.page-hero p { max-width: var(--pb-container); margin-inline: auto; }
.public-page { padding-top: clamp(28px, 3.4vw, 48px); }

@media (max-width: 760px) {
  .landing-hero { padding-block: clamp(34px, 7vw, 48px) clamp(30px, 6vw, 42px); }
}

/* ==================================================================
   Özellikler sayfası — yaşam döngüsü şeridi ve yetenek listeleri
   ------------------------------------------------------------------
   Sayfa dört kısa karttan ibaretti ve altında büyük bir boşluk vardı.
   Şerit, ürünün asıl anlattığı şeyi tek bakışta veriyor: beyannameden
   kapanışa giden hat. Renkler mevcut belirteçlerden gelir; koyu temada
   ayrıca tanımlanır, otomatik ters çevirmeye bırakılmaz.
   ================================================================== */
.feat-flow {
  margin: 0 0 clamp(22px, 3vw, 38px);
  padding: clamp(24px, 3vw, 38px);
  border: var(--pb-hairline) solid var(--pb-border);
  border-radius: var(--pb-r-lg, 22px);
  background: var(--pb-surface-2, #f6f9f9);
}
.feat-flow-head { max-width: 760px; }
.feat-flow-head h2 { margin: 8px 0 10px; font-size: clamp(26px, 3vw, 38px); }
.feat-flow-head p { color: var(--pb-text-2); line-height: 1.65; }

.feat-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: feat;
}
.feat-steps > li {
  position: relative;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: var(--pb-s4, 16px);
  border: var(--pb-hairline) solid var(--pb-border);
  border-radius: var(--pb-r-md, 14px);
  background: var(--pb-bg);
}
/* Kutular arasına bağlantı çizgisi KOYULMADI: kutunun dışına taşan bir
   süsleme, kutunun kaydırma genişliğini büyütüyor ve "içerik taşıyor"
   ölçümünü kirletiyordu. Akış yönünü zaten numaralar veriyor. */
.feat-step-no {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: var(--pb-accent-soft);
  color: var(--pb-accent);
  font-size: 12px;
  font-weight: var(--pb-fw-bold);
}
.feat-steps small {
  color: var(--pb-accent);
  font-size: var(--pb-fs-xs);
  font-weight: var(--pb-fw-bold);
  letter-spacing: var(--pb-tracking-caps);
}
.feat-steps b { color: var(--pb-text); font-size: var(--pb-fs-md, 15px); }
.feat-step-note { color: var(--pb-text-2); font-size: var(--pb-fs-sm, 13px); line-height: 1.5; }

/* Kart içi yetenek listesi */
.feat-list { margin: var(--pb-s3, 12px) 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.feat-list > li {
  position: relative;
  padding-left: 18px;
  color: var(--pb-text-2);
  font-size: var(--pb-fs-sm, 13px);
  line-height: 1.55;
}
.feat-list > li::before {
  content: '';
  position: absolute;
  left: 2px; top: .62em;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--pb-accent);
}
.module-groups article { min-height: 0; }

/* SSS — gruplu görünüm.
   Sayfada tek başlık ve üç soru vardı; artık konu başlıklarıyla gruplanır. */
.faq-grouped { display: grid; gap: clamp(20px, 2.6vw, 34px); }
.faq-group > h2 {
  margin: 0 0 var(--pb-s3, 12px);
  font-size: clamp(20px, 2vw, 26px);
  color: var(--pb-text);
}
.faq-group > details {
  border: var(--pb-hairline) solid var(--pb-border);
  border-radius: var(--pb-r-md, 14px);
  background: var(--pb-bg);
  margin-bottom: 8px;
  padding: var(--pb-s3, 12px) var(--pb-s4, 16px);
}
.faq-group > details > summary {
  cursor: pointer;
  color: var(--pb-text);
  font-weight: var(--pb-fw-semibold);
  line-height: 1.5;
}
.faq-group > details > p {
  margin: var(--pb-s2, 8px) 0 0;
  color: var(--pb-text-2);
  line-height: 1.7;
}

/* ==========================================================================
   v53.1 · OKUMA SÜTUNU ORTALANIR

   Ölçüldü (1440x900): SSS sayfasında içerik 880px genişliğinde ve
   sola yaslıydı; sağında 520x1240 piksellik boş bir alan kalıyordu.
   "Nasıl Çalışır"da aynı kalıp, 460x580. Sütunu daraltmak bilinçli
   bir okunabilirlik tercihi (68ch), sorun genişlik değil HİZA:
   artan yer tek yanda toplanınca sayfa yarım görünüyor. Ortalanınca
   aynı boşluk iki yana bölünüyor ve kenar boşluğu gibi okunuyor.
   ========================================================================== */
.public-page > .faq,
.public-page > .steps,
.public-page > .legal-document {
  margin-inline: auto;
}