/* ==========================================================================
   NT ÇÖZÜM — Kurumsal site tasarım sistemi
   Modern web platformu: @layer, OKLCH, light-dark(), container queries,
   scroll-driven animations, view transitions, anchor-free popover.
   ========================================================================== */

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

/* Sayfalar arası geçiş — çok sayfalı sitede tek sayfa uygulaması hissi. */
@view-transition { navigation: auto; }

/* Animasyonlanabilir özel özellikler */
@property --spot-x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --spot-y { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --aurora { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ring { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

/* ========================================================== 1. RESET */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
  body { min-height: 100svh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  p, h1, h2, h3, h4, h5 { overflow-wrap: break-word; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
  ::selection { background: var(--brand-500); color: #fff; }

  @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;
    }
    @view-transition { navigation: none; }
  }
}

/* ========================================================== 2. TOKENS */
@layer tokens {
  :root {
    /* Site ziyaretçinin işletim sistemi tercihine uyar: bilgisayarı koyu
       temadaysa site de koyu açılır. Başlıktaki düğmeyle bunu geçersiz
       kılabilir; seçimi tarayıcısında saklanır. */
    color-scheme: light dark;

    /* Marka — logodan türetilen OKLCH skalası */
    --brand-950: oklch(24% .055 232);
    --brand-900: oklch(31% .072 231);
    --brand-800: oklch(38% .085 231);
    --brand-700: oklch(48% .098 232);
    --brand-600: oklch(56% .108 233);
    --brand-500: oklch(64% .118 234);
    --brand-400: oklch(74% .118 232);
    --brand-300: oklch(83% .092 220);
    --signal:    oklch(58% .205 28);
    --signal-lt: oklch(70% .175 30);
    --mint:      oklch(78% .148 168);

    --ink-950: oklch(18% .034 233);
    --ink-900: oklch(23% .044 232);
    --ink-850: oklch(27% .049 232);
    --ink-800: oklch(31% .053 232);

    /* Yüzeyler — light-dark() ile tek tanımda iki tema */
    --bg:        light-dark(oklch(100% 0 0),        oklch(19% .028 233));
    --bg-2:      light-dark(oklch(97.6% .006 232),  oklch(22% .032 233));
    --bg-3:      light-dark(oklch(94.6% .011 232),  oklch(26% .036 233));
    --surface:   light-dark(oklch(100% 0 0),        oklch(24% .033 233));
    --line:      light-dark(oklch(90.5% .014 232),  oklch(32% .036 233));
    --line-soft: light-dark(oklch(95% .009 232),    oklch(28% .032 233));

    --text:   light-dark(oklch(26% .036 233), oklch(95% .008 232));
    --text-2: light-dark(oklch(48% .034 233), oklch(78% .022 232));
    --text-3: light-dark(oklch(62% .028 233), oklch(64% .024 232));
    --text-inv: oklch(96% .008 232);
    --text-inv-2: oklch(76% .036 226);

    --focus: var(--brand-400);

    /* Tipografi */
    --font-display: "Sora", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
    --font-body: "Inter", ui-sans-serif, "Segoe UI", system-ui, -apple-system, sans-serif;
    --fs-hero: clamp(2.35rem, 1.2rem + 4.6vw, 4.25rem);
    --fs-h2:   clamp(1.8rem, 1.15rem + 2.2vw, 2.85rem);
    --fs-h3:   clamp(1.15rem, 1.02rem + .45vw, 1.5rem);
    --fs-lead: clamp(1.02rem, .96rem + .32vw, 1.19rem);

    /* Ölçü */
    --container: 1280px;
    --gutter: clamp(18px, 4vw, 44px);
    --section-y: clamp(64px, 7vw, 124px);
    --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-2xl: 44px;

    /* Gölge */
    --sh-1: 0 1px 2px oklch(24% .05 233 / .06), 0 3px 10px oklch(24% .05 233 / .05);
    --sh-2: 0 6px 16px oklch(24% .05 233 / .08), 0 18px 42px oklch(24% .05 233 / .08);
    --sh-3: 0 22px 60px oklch(24% .05 233 / .2);
    --sh-brand: 0 10px 28px oklch(48% .098 232 / .34);

    --ease: linear(0, .0018, .0071 2.2%, .0288 4.5%, .1096 8.9%, .2295 13.3%, .3798 18%, .8593 32.2%, 1.0369 39.4%, 1.0912 44.4%, 1.0872 49.6%, 1.0246 60.1%, .9963 70.6%, 1);
    --ease-out: cubic-bezier(.22, .61, .36, 1);
  }

  [data-theme="light"] { color-scheme: light; }
  [data-theme="dark"]  { color-scheme: dark; }
}

/* ========================================================== 3. BASE */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: 16.5px;
    line-height: 1.68;
    color: var(--text);
    background: var(--bg);
    overflow-x: clip;
    font-feature-settings: "cv05" 1, "ss01" 1;
  }

  h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: light-dark(var(--ink-900), oklch(97% .01 232));
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-hero); letter-spacing: -.035em; }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }
  h4 { font-size: 1.08rem; }
  p  { text-wrap: pretty; }
  p:not(:last-child) { margin-block-end: 1.1em; }

  a { color: var(--brand-700); text-decoration: none; transition: color .2s var(--ease-out); }
  a:hover { color: var(--brand-500); }
  strong { font-weight: 640; color: light-dark(var(--ink-900), #fff); }
  hr { border: 0; border-block-start: 1px solid var(--line); margin-block: 2rem; }

  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--bg-2); }
  ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid var(--bg-2); }
  ::-webkit-scrollbar-thumb:hover { background: var(--brand-500); }
}

/* ========================================================== 4. LAYOUT */
@layer layout {
  .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
  .container--narrow { max-width: 940px; }

  .section { padding-block: var(--section-y); position: relative; }
  .section--tight { padding-block: clamp(44px, 5vw, 78px); }
  .section--paper { background: var(--bg-2); }
  .section--dark { background: var(--ink-950); color: var(--text-inv); }
  .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
  .section--dark .lead, .section--dark p { color: var(--text-inv-2); }

  .grid { display: grid; gap: clamp(16px, 1.6vw, 24px); }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
  .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 292px), 1fr)); }
  .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); }

  .head { max-width: 730px; margin-block-end: clamp(34px, 4vw, 58px); }
  .head--center { margin-inline: auto; text-align: center; }
  .head--split { max-width: none; display: grid; gap: 22px; align-items: end; }
  @media (min-width: 900px) { .head--split { grid-template-columns: 1.4fr 1fr; } }

  .skip-link {
    position: absolute; inset-inline-start: -9999px; inset-block-start: 0; z-index: 999;
    background: var(--ink-950); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
  }
  .skip-link:focus { inset-inline-start: 0; color: #fff; }
}

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

  /* ---------------------------------------------------- tipografik öbek */
  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-display);
    font-size: .74rem; font-weight: 640; letter-spacing: .18em; text-transform: uppercase;
    color: var(--brand-600); margin-block-end: 16px;
  }
  .eyebrow::before {
    content: ""; inline-size: 28px; block-size: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--signal), var(--brand-500));
  }
  .section--dark .eyebrow, .hero .eyebrow { color: var(--brand-300); }
  .lead { font-size: var(--fs-lead); color: var(--text-2); max-width: 62ch; }

  /* ---------------------------------------------------- düğmeler */
  .btn {
    --btn-bg: var(--brand-700); --btn-fg: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--font-display); font-size: .93rem; font-weight: 620;
    padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent;
    background: var(--btn-bg); color: var(--btn-fg);
    transition: translate .22s var(--ease-out), box-shadow .22s var(--ease-out),
                background .2s, color .2s, border-color .2s;
    white-space: nowrap; position: relative; overflow: hidden; isolation: isolate;
  }
  .btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
    background: radial-gradient(120px circle at var(--spot-x) var(--spot-y), #fff3, transparent 70%);
    transition: opacity .3s;
  }
  .btn:hover { translate: 0 -2px; color: var(--btn-fg); box-shadow: var(--sh-brand); }
  .btn:hover::before { opacity: 1; }
  .btn:active { translate: 0 0; }
  .btn svg { inline-size: 17px; block-size: 17px; flex: none; }

  .btn--signal { --btn-bg: var(--signal); }
  .btn--signal:hover { box-shadow: 0 12px 30px oklch(58% .205 28 / .38); }
  .btn--dark  { --btn-bg: var(--ink-900); }
  .btn--light { --btn-bg: light-dark(#fff, var(--ink-800)); --btn-fg: light-dark(var(--ink-900), #fff); box-shadow: var(--sh-1); }
  .btn--ghost { --btn-bg: transparent; --btn-fg: light-dark(var(--ink-900), #fff); border-color: var(--line); }
  .btn--ghost:hover { border-color: var(--brand-500); color: var(--brand-600); box-shadow: none; }
  .section--dark .btn--ghost, .hero .btn--ghost { --btn-fg: #fff; border-color: oklch(100% 0 0 / .24); }
  .section--dark .btn--ghost:hover, .hero .btn--ghost:hover { border-color: var(--brand-300); color: var(--brand-300); }
  .btn--sm { padding: 10px 18px; font-size: .85rem; }
  .btn--lg { padding: 17px 32px; font-size: 1rem; }
  .btn--block { inline-size: 100%; }

  .link-arrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-weight: 620; font-size: .9rem;
  }
  .link-arrow svg { inline-size: 16px; block-size: 16px; transition: translate .25s var(--ease-out); }
  .link-arrow:hover svg { translate: 5px 0; }

  /* ---------------------------------------------------- üst bar */
  .topbar {
    background: var(--ink-950); color: var(--text-inv-2);
    font-size: .8rem; border-block-end: 1px solid oklch(100% 0 0 / .06);
  }
  .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-block-size: 42px; }
  .topbar__list { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
  .topbar a { color: var(--text-inv-2); display: inline-flex; align-items: center; gap: 7px; }
  .topbar a:hover { color: #fff; }
  .topbar svg { inline-size: 14px; block-size: 14px; opacity: .72; }
  .topbar__socials { display: flex; gap: 6px; }
  .topbar__socials a {
    inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center;
    background: oklch(100% 0 0 / .07); transition: background .2s, translate .2s;
  }
  .topbar__socials a:hover { background: var(--brand-700); translate: 0 -2px; }
  .topbar__socials svg { inline-size: 13px; block-size: 13px; opacity: 1; }
  @media (width < 880px) { .topbar__list--left { display: none; } .topbar__inner { justify-content: center; } }

  /* ---------------------------------------------------- başlık */
  .site-header {
    position: sticky; inset-block-start: 0; z-index: 90;
    background: light-dark(oklch(100% 0 0 / .82), oklch(19% .028 233 / .8));
    backdrop-filter: saturate(1.8) blur(16px);
    border-block-end: 1px solid var(--line-soft);
    transition: box-shadow .3s var(--ease-out), border-color .3s;
    view-transition-name: site-header;
  }
  .site-header:has(~ * .is-stuck), .site-header.is-stuck { box-shadow: 0 10px 34px oklch(24% .05 233 / .1); }
  .site-header__inner { display: flex; align-items: center; gap: 20px; min-block-size: 78px; }
  .brand { display: flex; align-items: center; flex: none; view-transition-name: brand-logo; }
  /* Logo kilidi kareye yakın oranda; yükseklik eski geniş logoya göre daha
     büyük olmalı ki görsel ağırlığı aynı kalsın. */
  .brand img { block-size: 48px; inline-size: auto; }
  @media (width < 560px) { .brand img { block-size: 40px; } }
  /* Koyu zeminde logo beyaza döner. İki kural gerekir: biri ziyaretçinin
     işletim sistemi tercihi, diğeri başlıktaki düğmeyle yapılan seçim için. */
  html[data-theme="dark"] .brand img { filter: brightness(0) invert(1); }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .brand img { filter: brightness(0) invert(1); }
  }

  .nav { margin-inline-start: auto; }
  .nav__list { display: flex; align-items: center; gap: 2px; }
  /* Menü etiketleri hiçbir genişlikte iki satıra bölünmez: dar ekranda
     esneme yerine boşluk daralır, yetmezse mobil menüye geçilir. */
  .nav__list > li { flex: none; }
  .nav__link {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px; border-radius: var(--r-sm); white-space: nowrap;
    font-family: var(--font-display); font-size: .89rem; font-weight: 560;
    color: light-dark(var(--ink-850), oklch(90% .015 232));
  }
  /* Menünün sığmadığı dar masaüstü aralığında yatay boşluklar kısılır. */
  @media (width < 1280px) {
    .nav__link { padding-inline: 10px; font-size: .86rem; }
    .site-header__inner { gap: 14px; }
  }
  .nav__link:hover { color: var(--brand-600); background: var(--bg-2); }
  .nav__link.is-active { color: var(--brand-600); }
  .nav__link.is-active::after {
    content: ""; position: absolute; inset-inline: 14px; inset-block-end: 3px;
    block-size: 2px; border-radius: 2px; background: var(--signal);
  }
  .nav__caret { inline-size: 11px; block-size: 11px; opacity: .55; transition: rotate .25s var(--ease-out); }
  .nav__item--mega:hover .nav__caret { rotate: 180deg; }

  .mega {
    position: absolute; inset-inline: 0; inset-block-start: 100%;
    background: var(--surface); border-block-start: 1px solid var(--line-soft);
    box-shadow: 0 28px 54px oklch(24% .05 233 / .16);
    opacity: 0; visibility: hidden; translate: 0 -8px;
    transition: opacity .26s var(--ease-out), translate .26s var(--ease-out), visibility .26s;
    z-index: 80;
  }
  .nav__item--mega:hover .mega, .nav__item--mega:focus-within .mega { opacity: 1; visibility: visible; translate: 0; }
  .mega__inner { display: grid; gap: 34px; padding-block: 34px 38px; }
  @media (width >= 1000px) { .mega__inner { grid-template-columns: 1fr 286px; } }
  .mega__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 4px; }
  .mega__link { display: flex; gap: 12px; padding: 11px 13px; border-radius: var(--r-md); transition: background .2s; }
  .mega__link:hover { background: var(--bg-2); }
  .mega__icon {
    inline-size: 36px; block-size: 36px; flex: none; border-radius: 11px; display: grid; place-items: center;
    background: linear-gradient(140deg, var(--brand-800), var(--brand-500)); color: #fff;
  }
  .mega__icon svg { inline-size: 18px; block-size: 18px; }
  .mega__title { display: block; font-family: var(--font-display); font-weight: 620; font-size: .89rem; color: light-dark(var(--ink-900), #fff); }
  .mega__desc { display: block; font-size: .77rem; color: var(--text-3); line-height: 1.45; }
  .mega__aside {
    background: linear-gradient(155deg, var(--ink-900), var(--brand-800));
    border-radius: var(--r-lg); padding: 26px; color: #fff; align-self: start;
  }
  .mega__aside h4 { color: #fff; margin-block-end: 8px; }
  .mega__aside p { color: var(--text-inv-2); font-size: .85rem; margin-block-end: 18px; }

  .header__actions { display: flex; align-items: center; gap: 9px; flex: none; }
  .icon-btn {
    inline-size: 40px; block-size: 40px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--surface); display: grid; place-items: center;
    color: light-dark(var(--ink-850), #fff); transition: all .2s var(--ease-out);
  }
  .icon-btn:hover { border-color: var(--brand-500); color: var(--brand-600); }
  .icon-btn svg { inline-size: 17px; block-size: 17px; }
  .theme-toggle .sun { display: none; }
  html[data-theme="dark"] .theme-toggle .sun { display: block; }
  html[data-theme="dark"] .theme-toggle .moon { display: none; }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .theme-toggle .sun { display: block; }
    html:not([data-theme="light"]) .theme-toggle .moon { display: none; }
  }
  .burger { display: none; }
  /* Sekiz menü başlığı tek satırda ancak ~1190px'den itibaren sığıyor;
     altında yatay menü yerine mobil menüye geçilir. */
  @media (width < 1200px) {
    .nav { display: none; }
    .burger { display: grid; }
    .header__cta { display: none; }
  }

  /* ---------------------------------------------------- popover katmanları */
  .sheet {
    position: fixed; inset: 0; margin: 0; max-inline-size: none; max-block-size: none;
    inline-size: 100%; block-size: 100%; border: 0; padding: 0; background: transparent;
    overflow: hidden;
  }
  .sheet::backdrop { background: oklch(18% .034 233 / .72); backdrop-filter: blur(6px); }
  .sheet[popover]:popover-open { display: block; }

  .mobile-nav__panel {
    background: var(--ink-950); color: #fff; block-size: 100%;
    display: flex; flex-direction: column; padding: 22px var(--gutter) 34px;
    overflow-y: auto; margin-inline-start: auto; inline-size: min(420px, 100%);
    translate: 100% 0; transition: translate .34s var(--ease-out);
  }
  .sheet:popover-open .mobile-nav__panel { translate: 0 0; }
  @starting-style { .sheet:popover-open .mobile-nav__panel { translate: 100% 0; } }
  .mobile-nav__top { display: flex; align-items: center; justify-content: space-between; margin-block-end: 24px; }
  .mobile-nav__close {
    inline-size: 42px; block-size: 42px; border-radius: 50%; border: 1px solid oklch(100% 0 0 / .18);
    color: #fff; display: grid; place-items: center;
  }
  .mobile-nav a { color: #fff; }
  .mobile-nav__list a {
    display: block; padding-block: 15px; border-block-end: 1px solid oklch(100% 0 0 / .08);
    font-family: var(--font-display); font-size: 1.06rem; font-weight: 580;
  }
  .mobile-nav__sub { padding-inline-start: 14px; }
  .mobile-nav__sub a { font-size: .92rem; font-weight: 460; color: var(--text-inv-2); padding-block: 11px; }
  .mobile-nav__foot { margin-block-start: auto; padding-block-start: 26px; display: grid; gap: 10px; }

  .search-panel {
    display: grid; place-items: start center; padding-block-start: 15vh; block-size: 100%;
  }
  .search-panel form { inline-size: min(700px, 88vw); }
  .search-panel input {
    inline-size: 100%; background: transparent; border: 0;
    border-block-end: 2px solid oklch(100% 0 0 / .26); color: #fff;
    font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2.3rem);
    padding: 14px 4px; outline: none;
  }
  .search-panel input::placeholder { color: oklch(100% 0 0 / .34); }
  .search-panel .hint { color: var(--text-inv-2); font-size: .84rem; margin-block-start: 16px; }

  /* ---------------------------------------------------- KAHRAMAN */
  .hero {
    position: relative; overflow: clip; color: #fff;
    background:
      radial-gradient(1100px 640px at 82% 6%, oklch(38% .1 228 / .9), transparent 62%),
      radial-gradient(900px 520px at 8% 92%, oklch(34% .12 262 / .55), transparent 60%),
      linear-gradient(168deg, var(--ink-950) 0%, oklch(21% .05 233) 48%, oklch(25% .07 231) 100%);
    view-transition-name: hero;
  }
  /* Dönen aurora katmanı — CSS @property ile animasyonlu konik degrade */
  .hero::before {
    content: ""; position: absolute; inset: -40% -10%;
    background: conic-gradient(from var(--aurora),
      transparent 0deg, oklch(58% .16 232 / .16) 60deg, transparent 140deg,
      oklch(58% .2 28 / .1) 220deg, transparent 300deg);
    animation: aurora 26s linear infinite; pointer-events: none;
    filter: blur(46px);
  }
  @keyframes aurora { to { --aurora: 360deg; } }

  .hero__canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: .55; }
  .hero__grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(oklch(83% .092 220 / .055) 1px, transparent 1px),
      linear-gradient(90deg, oklch(83% .092 220 / .055) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: radial-gradient(circle at 50% 38%, #000 18%, transparent 74%);
  }
  .hero__inner { position: relative; z-index: 2; padding-block: clamp(62px, 8vw, 118px) clamp(54px, 6vw, 92px); }
  .hero__layout { display: grid; gap: clamp(38px, 5vw, 62px); align-items: center; }
  @media (width >= 1020px) { .hero__layout { grid-template-columns: 1.1fr .9fr; } }

  .hero h1 { color: #fff; margin-block-end: 22px; }
  .hero h1 .accent {
    background: linear-gradient(96deg, var(--brand-300) 0%, oklch(85% .12 200) 48%, var(--signal-lt) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero__lead { color: oklch(85% .036 226); font-size: var(--fs-lead); max-width: 55ch; margin-block-end: 30px; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-end: 38px; }

  .hero__badge {
    display: inline-flex; align-items: center; gap: 10px; margin-block-end: 24px;
    padding: 7px 16px 7px 9px; border-radius: 999px;
    background: oklch(83% .092 220 / .1); border: 1px solid oklch(83% .092 220 / .22);
    font-size: .8rem; color: oklch(92% .03 224);
  }
  .hero__badge b { color: #fff; font-weight: 640; }
  .pulse-dot {
    inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--mint);
    position: relative; flex: none; margin-inline-start: 5px;
  }
  .pulse-dot::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 1.5px solid var(--mint); animation: pulse 2.4s var(--ease-out) infinite;
  }
  @keyframes pulse { 0% { scale: .55; opacity: .85 } 100% { scale: 1.55; opacity: 0 } }

  .hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(134px, 1fr)); gap: 12px; }
  .hero__stat {
    padding: 18px 20px; border-radius: var(--r-md);
    background: oklch(100% 0 0 / .045); border: 1px solid oklch(100% 0 0 / .09);
  }
  .hero__stat b {
    display: block; font-family: var(--font-display); font-weight: 750;
    font-size: clamp(2rem, 3.4vw, 2.6rem); color: #fff;
    line-height: 1.05; letter-spacing: -.035em; margin-block-end: 4px;
  }
  .hero__stat span { font-size: .8rem; color: var(--text-inv-2); line-height: 1.35; }

  /* "+" ve "%" gibi ekler rakamdan iri durmasın. */
  .stat-suffix {
    font-style: normal; font-size: .62em; font-weight: 650;
    vertical-align: .28em; margin-inline-start: .06em; opacity: .85;
  }

  /* Cam panel */
  .hero__panel {
    background: linear-gradient(155deg, oklch(100% 0 0 / .1), oklch(100% 0 0 / .028));
    border: 1px solid oklch(100% 0 0 / .13); border-radius: var(--r-xl);
    padding: 26px; backdrop-filter: blur(14px); box-shadow: 0 30px 70px oklch(15% .03 233 / .45);
    container-type: inline-size;
  }
  .hero__panel-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 20px; }
  .hero__panel-title { font-family: var(--font-display); font-weight: 640; font-size: .96rem; color: #fff; }
  .hero__panel-tag {
    font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--mint);
    display: inline-flex; align-items: center; gap: 7px;
  }
  .hero__rows { display: grid; gap: 9px; }
  .hero__row {
    display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: var(--r-md);
    background: oklch(18% .034 233 / .42); border: 1px solid oklch(100% 0 0 / .06);
    transition: background .25s, translate .25s var(--ease-out);
  }
  .hero__row:hover { background: oklch(18% .034 233 / .62); translate: -3px 0; }
  .hero__row-icon {
    inline-size: 34px; block-size: 34px; border-radius: 10px; display: grid; place-items: center;
    flex: none; background: oklch(74% .118 232 / .15); color: var(--brand-300);
  }
  .hero__row-icon svg { inline-size: 17px; block-size: 17px; }
  .hero__row-main { flex: 1; min-inline-size: 0; }
  .hero__row-main b { display: block; font-size: .85rem; font-weight: 600; color: #fff; }
  .hero__row-main span { font-size: .74rem; color: var(--text-inv-2); }
  .hero__row-val { font-family: var(--font-display); font-size: .83rem; font-weight: 650; color: var(--mint); }
  @container (width < 300px) { .hero__row-main span { display: none; } }

  .trust {
    border-block-start: 1px solid oklch(100% 0 0 / .08); position: relative; z-index: 2;
    padding-block: 22px; background: oklch(18% .034 233 / .5);
  }
  .trust { padding-block: 26px; }
  .trust__inner { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; justify-content: center; }
  .trust__label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: oklch(72% .04 226); }
  .trust__logos { display: flex; align-items: center; gap: 38px; flex-wrap: wrap; justify-content: center; }
  /* Logolar kırpılmış (boşluksuz) olduğundan iki eksende de sınırlanır;
     böylece geniş kelime-logolar ile kare logolar dengeli görünür. */
  .trust__logos img {
    block-size: auto; inline-size: auto;
    max-block-size: 34px; max-inline-size: 124px; object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .72; transition: opacity .25s, scale .25s;
  }
  .trust__logos img:hover { opacity: 1; scale: 1.07; }
  @media (width < 720px) {
    .trust__logos { gap: 26px; }
    .trust__logos img { max-block-size: 28px; max-inline-size: 96px; }
  }

  /* ---------------------------------------------------- BENTO */
  .bento { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
  @media (width < 1000px) { .bento { grid-template-columns: repeat(2, 1fr); } }
  @media (width < 620px)  { .bento { grid-template-columns: 1fr; } }

  .bento__cell {
    position: relative; overflow: hidden; border-radius: var(--r-lg);
    border: 1px solid var(--line); background: var(--surface);
    padding: 28px; display: flex; flex-direction: column; gap: 12px;
    container-type: inline-size;
    transition: border-color .3s, box-shadow .3s var(--ease-out), translate .3s var(--ease-out);
  }
  .bento__cell:hover { translate: 0 -4px; box-shadow: var(--sh-2); border-color: color-mix(in oklch, var(--brand-500) 45%, transparent); }
  .bento__cell--wide { grid-column: span 2; }
  .bento__cell--tall { grid-row: span 2; }

  .bento__cell--feature {
    grid-column: span 2; grid-row: span 2; color: #fff; border-color: transparent;
    background:
      radial-gradient(600px 320px at 100% 0%, oklch(48% .12 232 / .85), transparent 65%),
      linear-gradient(160deg, var(--ink-950), oklch(26% .07 232));
    justify-content: flex-end; min-block-size: 340px;
  }
  /* Tek sütuna düşünce hiçbir hücre 2 sütun kaplamamalı;
     aksi hâlde ızgara örtük bir ikinci sütun üretip düzeni bozuyor. */
  @media (width < 620px) {
    .bento__cell--wide, .bento__cell--tall, .bento__cell--feature {
      grid-column: auto; grid-row: auto;
    }
  }
  .bento__cell--feature h3 { color: #fff; font-size: clamp(1.35rem, 2.4vw, 1.95rem); }
  .bento__cell--feature p { color: var(--text-inv-2); }
  .bento__cell--accent {
    color: #fff; border-color: transparent;
    background: linear-gradient(150deg, var(--signal), oklch(48% .17 22));
  }
  .bento__cell--accent h3, .bento__cell--accent .bento__stat { color: #fff; }
  .bento__cell--accent p { color: oklch(96% .03 30 / .88); }

  .bento__icon {
    inline-size: 48px; block-size: 48px; border-radius: 14px; display: grid; place-items: center;
    background: color-mix(in oklch, var(--brand-500) 14%, transparent);
    color: var(--brand-600); flex: none;
  }
  .bento__cell--feature .bento__icon, .bento__cell--accent .bento__icon {
    background: oklch(100% 0 0 / .14); color: #fff;
  }
  .bento__icon svg { inline-size: 24px; block-size: 24px; }
  .bento__stat {
    font-family: var(--font-display); font-weight: 780; letter-spacing: -.04em;
    font-size: clamp(2.4rem, 5cqi + 1rem, 3.6rem); line-height: .95;
    color: light-dark(var(--ink-900), #fff);
  }
  .bento__cell h3 { font-size: 1.14rem; }
  .bento__cell p { font-size: .91rem; color: var(--text-2); margin: 0; }
  .bento__mesh {
    position: absolute; inset-block-start: -30%; inset-inline-end: -20%;
    inline-size: 320px; block-size: 320px; opacity: .5; pointer-events: none;
  }

  /* ---------------------------------------------------- kartlar */
  .card {
    position: relative; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 28px; overflow: hidden;
    display: flex; flex-direction: column; container-type: inline-size;
    transition: translate .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
  }
  /* İmleci takip eden ışık — JS yalnızca iki değişken günceller */
  .card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(340px circle at var(--spot-x) var(--spot-y),
                color-mix(in oklch, var(--brand-500) 12%, transparent), transparent 62%);
    transition: opacity .35s;
  }
  .card:hover::after { opacity: 1; }
  .card::before {
    content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px;
    background: linear-gradient(90deg, var(--signal), var(--brand-500));
    scale: 0 1; transform-origin: left; transition: scale .4s var(--ease-out);
  }
  .card:hover { translate: 0 -5px; box-shadow: var(--sh-2); border-color: transparent; }
  .card:hover::before { scale: 1 1; }
  .card > * { position: relative; z-index: 1; }
  .card__icon {
    inline-size: 54px; block-size: 54px; border-radius: 16px; display: grid; place-items: center;
    background: linear-gradient(145deg, var(--brand-800), var(--brand-500));
    color: #fff; margin-block-end: 20px; box-shadow: var(--sh-brand);
    transition: rotate .35s var(--ease-out), scale .35s var(--ease-out);
  }
  .card:hover .card__icon { scale: 1.07; rotate: -5deg; }
  .card__icon svg { inline-size: 26px; block-size: 26px; }
  .card h3 { font-size: 1.12rem; margin-block-end: 10px; }
  .card p { color: var(--text-2); font-size: .92rem; margin-block-end: 18px; }
  .card__foot { margin-block-start: auto; }
  .card__num {
    position: absolute; inset-inline-end: 20px; inset-block-start: 14px;
    font-family: var(--font-display); font-size: 2.6rem; font-weight: 780;
    color: var(--bg-3); line-height: 1; pointer-events: none;
  }
  @container (width < 260px) { .card__num { display: none; } }

  .tile {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    overflow: hidden; display: flex; flex-direction: column;
    transition: translate .3s var(--ease-out), box-shadow .3s var(--ease-out);
  }
  .tile:hover { translate: 0 -4px; box-shadow: var(--sh-2); }
  /* Marka ve ürün görselleri saydam zeminli; koyu temada kaybolmamaları için
     bu kutular her iki temada da açık kalır. */
  .logo-plate,
  .tile__media {
    background: oklch(97.5% .004 232);
    display: grid; place-items: center; overflow: hidden;
  }
  .tile__media {
    aspect-ratio: 16 / 10; padding: 20px;
    border-block-end: 1px solid var(--line-soft);
  }
  .logo-plate { border-radius: var(--r-md); padding: 16px; }
  .tile__media img { max-block-size: 100%; inline-size: auto; object-fit: contain; transition: scale .45s var(--ease-out); }
  .tile:hover .tile__media img { scale: 1.06; }
  .tile__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
  .tile__body h3 { font-size: 1rem; margin-block-end: 8px; }
  .tile__body p { font-size: .87rem; color: var(--text-2); margin-block-end: 16px; }

  .badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
    font-size: .73rem; font-weight: 620; font-family: var(--font-display);
    background: var(--bg-3); color: var(--text-2);
  }
  .badge--brand { background: color-mix(in oklch, var(--brand-500) 14%, transparent); color: var(--brand-600); }
  .badge--signal { background: color-mix(in oklch, var(--signal) 14%, transparent); color: var(--signal); }
  .badge--ok { background: color-mix(in oklch, var(--mint) 22%, transparent); color: oklch(52% .12 168); }

  /* ---------------------------------------------------- kaydırmalı şerit */
  .marquee { overflow: clip; position: relative; padding-block: 10px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee__track { display: flex; gap: 56px; inline-size: max-content; animation: slide 48s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  @keyframes slide { to { translate: -50% 0; } }
  .marquee__item { display: grid; place-items: center; block-size: 64px; flex: none; }
  .marquee__item img {
    block-size: auto; inline-size: auto;
    max-block-size: 46px; max-inline-size: 148px; object-fit: contain;
    filter: grayscale(1); opacity: .55;
    transition: filter .3s, opacity .3s, scale .3s;
  }
  /* Koyu zeminde marka logoları okunmuyor; beyaz siluete çevriliyor.
     Hem sistem tercihi hem düğmeyle yapılan seçim karşılanmalı. */
  html[data-theme="dark"] .marquee__item img {
    filter: grayscale(1) brightness(0) invert(1); opacity: .5;
  }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .marquee__item img {
      filter: grayscale(1) brightness(0) invert(1); opacity: .5;
    }
  }
  .marquee__item:hover img { filter: grayscale(0); opacity: 1; scale: 1.08; }
  /* Logo dosyası olmayan markalar için kelime-logo. Üreticinin gerçek logosunu
     taklit etmez; sitenin kendi tipografisiyle marka adını gösterir. */
  .wordmark {
    font-family: var(--font-display); font-weight: 750; letter-spacing: -.03em;
    font-size: 1.15rem; color: var(--text-3); white-space: nowrap;
    transition: color .3s;
  }
  .marquee__item:hover .wordmark { color: var(--brand-600); }
  .trust__logos .wordmark { font-size: 1.05rem; color: oklch(100% 0 0 / .68); }
  .trust__logos a:hover .wordmark { color: #fff; }

  /* ---------------------------------------------------- yatay kaydırma (snap) */
  .scroller {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(300px, 78vw);
    gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-block-end: 14px; scrollbar-width: thin;
    scroll-padding-inline: var(--gutter);
  }
  .scroller > * { scroll-snap-align: start; }

  /* ---------------------------------------------------- yapışkan süreç */
  .sticky-flow { display: grid; gap: 40px; }
  /* Yapışkanlık YALNIZCA iki sütunlu düzende. Tek sütunda yan panel
     adımların üstünde ayrı bir satırdır; sticky kalırsa saydam olduğu için
     altından akan adımların üzerine biner. */
  @media (width >= 960px) {
    .sticky-flow { grid-template-columns: .85fr 1.15fr; gap: 64px; }
    .sticky-flow__aside { position: sticky; inset-block-start: 120px; align-self: start; }
  }
  .flow-step {
    display: grid; grid-template-columns: auto 1fr; gap: 22px;
    padding-block: 28px; border-block-end: 1px solid oklch(100% 0 0 / .1);
  }
  .flow-step:last-child { border-block-end: 0; }
  .flow-step__no {
    inline-size: 46px; block-size: 46px; border-radius: 14px; display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 700; font-size: .95rem;
    background: oklch(100% 0 0 / .07); border: 1px solid oklch(100% 0 0 / .12);
    color: var(--brand-300); flex: none;
    transition: background .3s, color .3s, scale .3s var(--ease-out);
  }
  .flow-step:hover .flow-step__no { background: var(--signal); color: #fff; border-color: transparent; scale: 1.08; }
  .flow-step h4 { font-size: 1.1rem; margin-block-end: 6px; }
  .flow-step p { font-size: .92rem; margin: 0; }

  /* --------------------------------------------- çözüm detay iki sütun */
  .solution-layout { display: grid; gap: clamp(30px, 4vw, 58px); align-items: start; }
  .solution-layout__aside { display: grid; gap: 18px; }
  @media (width >= 1000px) {
    .solution-layout { grid-template-columns: 1fr 360px; }
    /* Yan panel yalnız iki sütunlu düzende yapışkan olur. */
    .solution-layout__aside { position: sticky; inset-block-start: 112px; }
  }

  /* ---------------------------------------------------- istatistik */
  .stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden;
  }
  .stat { background: var(--surface); padding: 32px 26px; text-align: center; }
  .section--dark .stat { background: var(--ink-900); }
  .stat b {
    display: block; font-family: var(--font-display); font-weight: 780;
    font-size: clamp(2.3rem, 4.4vw, 3.2rem); line-height: 1.05; letter-spacing: -.04em;
    color: var(--brand-600);
  }
  .section--dark .stat b { color: var(--brand-300); }
  .stat span { display: block; margin-block-start: 9px; font-size: .84rem; color: var(--text-2); }
  .section--dark .stat span { color: var(--text-inv-2); }

  /* ---------------------------------------------------- akordiyon (native) */
  .accordion { border-block-start: 1px solid var(--line); }
  .accordion details {
    border-block-end: 1px solid var(--line);
    interpolate-size: allow-keywords;
  }
  .accordion summary {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding-block: 22px; cursor: pointer; list-style: none;
    font-family: var(--font-display); font-weight: 620; font-size: 1.02rem;
    color: light-dark(var(--ink-900), #fff);
  }
  .accordion summary::-webkit-details-marker { display: none; }
  .accordion summary:hover { color: var(--brand-600); }
  .accordion__sign { inline-size: 26px; block-size: 26px; position: relative; flex: none; }
  .accordion__sign::before, .accordion__sign::after {
    content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%;
    background: var(--brand-600); translate: -50% -50%; transition: rotate .3s var(--ease-out), opacity .3s;
  }
  .accordion__sign::before { inline-size: 14px; block-size: 2px; }
  .accordion__sign::after { inline-size: 2px; block-size: 14px; }
  .accordion details[open] .accordion__sign::after { rotate: 90deg; opacity: 0; }
  .accordion details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete;
  }
  .accordion details[open]::details-content { block-size: auto; }
  .accordion details > div { padding-block-end: 20px; color: var(--text-2); font-size: .95rem; }

  /* ---------------------------------------------------- formlar */
  .field { display: grid; gap: 7px; margin-block-end: 17px; }
  .field label { font-family: var(--font-display); font-size: .82rem; font-weight: 620; color: light-dark(var(--ink-850), #e6f0f6); }
  .field label .req { color: var(--signal); }
  .field :is(input, select, textarea) {
    inline-size: 100%; font-size: .95rem; padding: 13px 15px;
    border: 1.5px solid var(--line); border-radius: var(--r-md);
    background: var(--surface); color: var(--text);
    transition: border-color .2s, box-shadow .2s; outline: none;
  }
  .field textarea { resize: vertical; min-block-size: 128px; field-sizing: content; max-block-size: 340px; }
  .field :is(input, select, textarea):focus-visible {
    border-color: var(--brand-500); outline: none;
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--brand-500) 18%, transparent);
  }
  .field:has(input:required:invalid:not(:placeholder-shown)) input { border-color: color-mix(in oklch, var(--signal) 60%, transparent); }
  .field__hint { font-size: .77rem; color: var(--text-3); }
  .consent-check {
    display: flex; gap: 11px; align-items: flex-start; margin-block-end: 18px;
    font-size: .84rem; color: var(--text-2); line-height: 1.55; cursor: pointer;
  }
  .consent-check input {
    inline-size: 18px; block-size: 18px; margin-block-start: 2px; flex: none;
    accent-color: var(--brand-600);
  }
  .contact-card .consent-check { color: oklch(84% .03 226); }
  .contact-card .consent-check a { color: var(--brand-300); text-decoration: underline; }
  .field-row { display: grid; gap: 0 16px; }
  @media (width >= 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
  .honeypot { position: absolute; inset-inline-start: -9999px; opacity: 0; block-size: 0; inline-size: 0; }

  .alert {
    padding: 15px 18px; border-radius: var(--r-md); font-size: .9rem; margin-block-end: 20px;
    display: flex; gap: 11px; align-items: flex-start;
  }
  .alert svg { inline-size: 18px; block-size: 18px; flex: none; margin-block-start: 2px; }
  .alert--ok  { background: color-mix(in oklch, var(--mint) 18%, transparent); color: oklch(48% .11 168); border: 1px solid color-mix(in oklch, var(--mint) 34%, transparent); }
  .alert--err { background: color-mix(in oklch, var(--signal) 11%, transparent); color: oklch(50% .18 28); border: 1px solid color-mix(in oklch, var(--signal) 26%, transparent); }

  /* ---------------------------------------------------- iletişim */
  .contact-grid { display: grid; gap: clamp(26px, 4vw, 52px); }
  @media (width >= 940px) { .contact-grid { grid-template-columns: .85fr 1.15fr; } }
  .contact-card {
    background: linear-gradient(165deg, var(--ink-950), var(--brand-800));
    border-radius: var(--r-xl); padding: clamp(28px, 3.4vw, 44px); color: #fff;
    position: relative; overflow: hidden;
  }
  .contact-card::after {
    content: ""; position: absolute; inset-inline-end: -70px; inset-block-end: -70px;
    inline-size: 240px; block-size: 240px; border-radius: 50%;
    border: 40px solid oklch(100% 0 0 / .035);
  }
  .contact-card h3 { color: #fff; }
  .contact-card p { color: oklch(85% .036 226); }
  .contact-item {
    display: flex; gap: 15px; padding-block: 17px; position: relative; z-index: 1;
    border-block-end: 1px solid oklch(100% 0 0 / .1);
  }
  .contact-item:last-child { border-block-end: 0; }
  .contact-item__icon {
    inline-size: 40px; block-size: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
    background: oklch(100% 0 0 / .09); color: var(--brand-300);
  }
  .contact-item__icon svg { inline-size: 18px; block-size: 18px; }
  .contact-item b {
    display: block; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
    color: oklch(74% .04 226); font-weight: 620; margin-block-end: 4px;
  }
  .contact-item :is(a, span:not(.contact-item__icon)) { color: #fff; font-size: .95rem; }
  .contact-item a:hover { color: var(--brand-300); }

  .map-frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); line-height: 0; }
  .map-frame iframe { inline-size: 100%; block-size: 380px; border: 0; }

  /* ---------------------------------------------------- CTA */
  .cta-band {
    position: relative; overflow: hidden; border-radius: var(--r-2xl);
    background: linear-gradient(118deg, var(--ink-950), var(--brand-800) 60%, var(--brand-600));
    color: #fff; padding: clamp(34px, 5vw, 62px);
    display: grid; gap: 26px; align-items: center;
  }
  @media (width >= 880px) { .cta-band { grid-template-columns: 1fr auto; } }
  .cta-band h2 { color: #fff; margin-block-end: 10px; }
  .cta-band p { color: oklch(85% .036 226); margin: 0; max-width: 56ch; }
  .cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }
  .cta-band::after {
    content: ""; position: absolute; inset-block-start: -50%; inset-inline-end: -8%;
    inline-size: 420px; aspect-ratio: 1; border-radius: 50%;
    border: 60px solid oklch(100% 0 0 / .04); pointer-events: none;
  }

  /* ---------------------------------------------------- alt bilgi */
  .footer { background: var(--ink-950); color: var(--text-inv-2); padding-block-start: clamp(52px, 6vw, 84px); }
  .footer__grid { display: grid; gap: 36px; padding-block-end: 48px; }
  @media (width >= 800px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.25fr; } }
  .footer h4 {
    color: #fff; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase;
    margin-block-end: 20px; font-weight: 650;
  }
  .footer a { color: var(--text-inv-2); font-size: .9rem; }
  .footer a:hover { color: var(--brand-300); }
  .footer li { margin-block-end: 11px; }
  .footer__logo img { block-size: 58px; inline-size: auto; opacity: .95; margin-block-end: 14px; }
  /* Slogan — Ayarlar → Genel → Slogan. Boş bırakılırsa hiç çizilmez. */
  .footer__tagline {
    font-family: var(--font-display); font-size: .95rem; font-weight: 600;
    color: var(--brand-300); margin-block-end: 10px; letter-spacing: -.01em;
  }
  .footer__about { font-size: .89rem; line-height: 1.7; margin-block-end: 20px; }
  .footer__socials { display: flex; gap: 9px; }
  .footer__socials a {
    inline-size: 36px; block-size: 36px; border-radius: 11px; display: grid; place-items: center;
    background: oklch(100% 0 0 / .06); transition: background .22s, translate .22s var(--ease-out);
  }
  .footer__socials a:hover { background: var(--brand-700); translate: 0 -3px; }
  .footer__socials svg { inline-size: 16px; block-size: 16px; }
  .newsletter { display: flex; gap: 8px; margin-block-start: 14px; }
  .newsletter input {
    flex: 1; min-inline-size: 0; padding: 12px 14px; border-radius: var(--r-md);
    border: 1px solid oklch(100% 0 0 / .14); background: oklch(100% 0 0 / .05); color: #fff;
    font-size: .88rem; outline: none;
  }
  .newsletter input::placeholder { color: oklch(64% .03 226); }
  .newsletter input:focus-visible { border-color: var(--brand-500); outline: none; }
  .newsletter button {
    padding: 12px 16px; border-radius: var(--r-md); background: var(--brand-700);
    color: #fff; display: grid; place-items: center; transition: background .2s;
  }
  .newsletter button:hover { background: var(--brand-500); }
  .footer__bottom {
    border-block-start: 1px solid oklch(100% 0 0 / .08); padding-block: 22px 30px;
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
    font-size: .82rem;
  }
  .footer__bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }

  /* ---------------------------------------------------- yüzen düğmeler */
  .floaters { position: fixed; inset-inline-end: 18px; inset-block-end: 18px; z-index: 70; display: grid; gap: 10px; }
  .floater {
    inline-size: 52px; block-size: 52px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; box-shadow: var(--sh-3); transition: scale .22s var(--ease-out);
  }
  .floater:hover { scale: 1.09; color: #fff; }
  .floater svg { inline-size: 24px; block-size: 24px; }
  .floater--wa { background: #25d366; position: relative; }
  .floater--tel { background: var(--brand-700); }
  .floater--top { background: var(--ink-900); opacity: 0; pointer-events: none; transition: opacity .3s, scale .22s; }
  .floater--top.is-visible { opacity: 1; pointer-events: auto; }
  .wa-bubble {
    position: absolute; inset-inline-end: 62px; inset-block-end: 4px; white-space: nowrap;
    background: var(--surface); color: light-dark(var(--ink-900), #fff);
    font-size: .82rem; font-weight: 560; padding: 9px 15px; border-radius: 999px;
    box-shadow: var(--sh-2); opacity: 0; translate: 8px 0;
    transition: opacity .25s, translate .25s var(--ease-out); pointer-events: none;
  }
  .floater--wa:hover .wa-bubble { opacity: 1; translate: 0 0; }
  @media (width < 640px) { .wa-bubble { display: none; } }

  /* ---------------------------------------------------- çerez bildirimi */
  .consent {
    position: fixed; inset-inline: 14px; inset-block-end: 14px; z-index: 80;
    max-inline-size: 640px; margin-inline: auto;
    background: light-dark(oklch(100% 0 0 / .96), oklch(24% .033 233 / .96));
    backdrop-filter: blur(14px);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh-3); padding: 18px 20px;
    opacity: 0; translate: 0 16px;
    transition: opacity .3s var(--ease-out), translate .3s var(--ease-out);
  }
  .consent.is-in { opacity: 1; translate: 0 0; }
  .consent__body { display: grid; gap: 14px; }
  @media (width >= 620px) { .consent__body { grid-template-columns: 1fr auto; align-items: center; } }
  .consent p { font-size: .85rem; color: var(--text-2); margin: 0; line-height: 1.6; }
  .consent__actions { display: flex; gap: 8px; flex-wrap: wrap; }
  @media (width < 640px) { .consent { inset-block-end: 84px; } }

  /* ---------------------------------------------------- okuma çubuğu */
  .read-progress {
    position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 3px; z-index: 100;
    background: linear-gradient(90deg, var(--signal), var(--brand-400));
    transform-origin: 0 50%; scale: 0 1;
  }
  @supports (animation-timeline: scroll()) {
    .read-progress { animation: progress linear; animation-timeline: scroll(root block); }
    @keyframes progress { to { scale: 1 1; } }
  }

  /* ---------------------------------------------------- sayfa başlığı */
  .page-head {
    position: relative; overflow: clip; color: #fff;
    background: linear-gradient(152deg, var(--ink-950), var(--brand-800));
    padding-block: clamp(48px, 6vw, 86px) clamp(42px, 5vw, 68px);
  }
  .page-head::after {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(oklch(83% .092 220 / .05) 1px, transparent 1px),
                      linear-gradient(90deg, oklch(83% .092 220 / .05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(102deg, #000, transparent 70%);
  }
  .page-head__inner { position: relative; z-index: 1; }
  .page-head h1 { color: #fff; margin-block-end: 12px; }
  .page-head p { color: oklch(85% .036 226); max-width: 62ch; margin: 0; }
  .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .82rem; margin-block-end: 16px; color: oklch(74% .04 226); }
  .crumbs a { color: oklch(74% .04 226); }
  .crumbs a:hover { color: #fff; }
  .crumbs [aria-current] { color: #fff; }

  /* ---------------------------------------------------- makale */
  .prose { font-size: 1.04rem; line-height: 1.78; color: var(--text-2); max-width: 74ch; }
  .prose :is(h2, h3) { color: light-dark(var(--ink-900), #fff); }
  .prose h2 { font-size: 1.6rem; margin-block: 2em .6em; }
  .prose h3 { font-size: 1.24rem; margin-block: 1.8em .5em; }
  .prose :is(ul, ol) { padding-inline-start: 1.3em; margin-block-end: 1.1em; }
  .prose li { margin-block-end: .4em; }
  .prose li::marker { color: var(--brand-500); }
  .prose blockquote {
    margin-block: 1.8em; padding: 18px 24px; border-inline-start: 3px solid var(--signal);
    background: var(--bg-2); border-radius: 0 var(--r-md) var(--r-md) 0; font-style: italic;
  }
  .prose img { border-radius: var(--r-md); margin-block: 1.6em; }
  .prose table { inline-size: 100%; border-collapse: collapse; margin-block: 1.6em; font-size: .93rem; }
  .prose :is(th, td) { padding: 11px 14px; border: 1px solid var(--line); text-align: start; }
  .prose th { background: var(--bg-2); font-family: var(--font-display); font-weight: 620; color: light-dark(var(--ink-900), #fff); }

  .checklist li { position: relative; padding-inline-start: 32px; margin-block-end: 13px; color: var(--text-2); font-size: .95rem; }
  .checklist li::before {
    content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 4px;
    inline-size: 20px; block-size: 20px; border-radius: 50%;
    background: color-mix(in oklch, var(--mint) 26%, transparent);
  }
  .checklist li::after {
    content: ""; position: absolute; inset-inline-start: 6.5px; inset-block-start: 9.5px;
    inline-size: 7px; block-size: 4px; rotate: -45deg;
    border-inline-start: 2px solid oklch(52% .12 168); border-block-end: 2px solid oklch(52% .12 168);
  }
  .section--dark .checklist li { color: var(--text-inv-2); }

  /* ---------------------------------------------------- blog */
  .post-card {
    display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden;
    transition: translate .3s var(--ease-out), box-shadow .3s var(--ease-out);
  }
  .post-card:hover { translate: 0 -4px; box-shadow: var(--sh-2); }
  .post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-3); }
  .post-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale .5s var(--ease-out); }
  .post-card:hover .post-card__media img { scale: 1.06; }
  .post-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
  .post-card__meta { display: flex; gap: 12px; align-items: center; font-size: .78rem; color: var(--text-3); margin-block-end: 11px; flex-wrap: wrap; }
  .post-card h3 { font-size: 1.08rem; margin-block-end: 10px; }
  .post-card h3 a { color: light-dark(var(--ink-900), #fff); }
  .post-card h3 a:hover { color: var(--brand-600); }
  .post-card p { font-size: .89rem; color: var(--text-2); margin-block-end: 16px; }

  .pagination { display: flex; gap: 7px; justify-content: center; margin-block-start: 44px; flex-wrap: wrap; }
  .pagination :is(a, span) {
    min-inline-size: 42px; block-size: 42px; padding-inline: 12px; border-radius: var(--r-md);
    display: grid; place-items: center; border: 1px solid var(--line); font-size: .9rem;
    font-family: var(--font-display); font-weight: 560; color: var(--text-2); background: var(--surface);
  }
  .pagination a:hover { border-color: var(--brand-500); color: var(--brand-600); }
  .pagination .is-current { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }

  .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 30px; }
  .chip {
    padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
    font-size: .85rem; font-family: var(--font-display); font-weight: 560; color: var(--text-2);
    transition: all .2s var(--ease-out);
  }
  .chip:hover { border-color: var(--brand-500); color: var(--brand-600); }
  .chip.is-active { background: light-dark(var(--ink-900), var(--brand-700)); border-color: transparent; color: #fff; }

  /* ---------------------------------------------------- LinkedIn bandı */
  .li-band {
    background: linear-gradient(150deg, var(--ink-950), oklch(30% .08 245));
    border-radius: var(--r-2xl); padding: clamp(28px, 3.6vw, 46px);
    color: #fff; display: grid; gap: 28px; position: relative; overflow: hidden;
  }
  .li-band::after {
    content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -6%;
    inline-size: 340px; aspect-ratio: 1; border-radius: 50%;
    border: 52px solid oklch(100% 0 0 / .04); pointer-events: none;
  }
  .li-band h2 { color: #fff; }
  .li-band p { color: oklch(84% .04 232); font-size: .95rem; }
  .li-band .eyebrow { color: oklch(80% .1 245); }
  .li-band__intro {
    display: grid; gap: 18px; align-items: center; position: relative; z-index: 1;
  }
  @media (width >= 860px) {
    .li-band__intro { grid-template-columns: auto 1fr auto; gap: 22px; }
  }
  .li-band__logo {
    inline-size: 56px; block-size: 56px; border-radius: 16px; flex: none;
    display: grid; place-items: center; background: #0a66c2; color: #fff;
    box-shadow: 0 10px 26px oklch(45% .16 258 / .45);
  }

  .li-posts {
    display: grid; gap: 14px; position: relative; z-index: 1;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  }
  .li-post {
    display: flex; flex-direction: column; gap: 12px; padding: 20px;
    border-radius: var(--r-md); background: oklch(100% 0 0 / .06);
    border: 1px solid oklch(100% 0 0 / .1); color: #fff;
    transition: background .25s, translate .25s var(--ease-out), border-color .25s;
  }
  .li-post:hover {
    background: oklch(100% 0 0 / .1); translate: 0 -3px; color: #fff;
    border-color: oklch(100% 0 0 / .22);
  }
  .li-post__meta {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .76rem; color: oklch(78% .06 245);
  }
  .li-post p {
    margin: 0; font-size: .89rem; line-height: 1.6; color: oklch(90% .02 232);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .li-post .link-arrow { margin-block-start: auto; color: var(--brand-300); font-size: .84rem; }

  /* ---------------------------------------------------- broşür kartı */
  .doc-card {
    display: flex; flex-direction: column; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
    transition: translate .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
  }
  .doc-card:hover { translate: 0 -4px; box-shadow: var(--sh-2); border-color: transparent; }
  .doc-card__cover {
    aspect-ratio: 3 / 4; max-block-size: 300px; overflow: hidden;
    background: linear-gradient(160deg, var(--ink-900), var(--brand-800));
    display: grid; place-items: center; position: relative;
  }
  .doc-card__cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .doc-card:hover .doc-card__cover img { scale: 1.04; transition: scale .5s var(--ease-out); }
  .doc-card__glyph {
    display: grid; place-items: center; gap: 8px; color: oklch(83% .092 220 / .85);
  }
  .doc-card__glyph b {
    font-family: var(--font-display); font-size: .78rem; letter-spacing: .2em;
    color: oklch(83% .092 220 / .6);
  }
  .doc-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
  .doc-card__body h3 { font-size: 1.05rem; margin-block-end: 8px; }
  .doc-card__body p { font-size: .88rem; color: var(--text-2); margin-block-end: 16px; }
  .doc-card__foot {
    margin-block-start: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  }

  /* ---------------------------------------------------- indirme satırı */
  .dl-row {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
    transition: border-color .2s, translate .2s var(--ease-out), box-shadow .2s;
  }
  .dl-row:hover { border-color: var(--brand-500); translate: 0 -2px; box-shadow: var(--sh-1); }
  .dl-row__icon {
    inline-size: 42px; block-size: 42px; border-radius: 11px; flex: none;
    display: grid; place-items: center;
    background: color-mix(in oklch, var(--signal) 12%, transparent); color: var(--signal);
  }
  .dl-row__main { flex: 1; min-inline-size: 0; }
  .dl-row__main b {
    display: block; font-size: .94rem; color: light-dark(var(--ink-900), #fff);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dl-row__main span { font-size: .8rem; color: var(--text-3); }
  .dl-row__cta {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    font-family: var(--font-display); font-weight: 620; font-size: .86rem;
    color: var(--brand-600);
  }
  @media (width < 520px) { .dl-row__cta span { display: none; } }

  }

  /* ---------------------------------------------------- sosyal akış */
  .feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 12px; }
  .feed-item { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--bg-3); }
  .feed-item img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale .45s var(--ease-out); }
  .feed-item:hover img { scale: 1.08; }
  .feed-item__overlay {
    position: absolute; inset: 0; padding: 14px; display: flex; align-items: flex-end;
    background: linear-gradient(0deg, oklch(18% .034 233 / .88), transparent 60%);
    opacity: 0; transition: opacity .28s; color: #fff; font-size: .78rem; line-height: 1.45;
  }
  .feed-item:hover .feed-item__overlay { opacity: 1; }
}

/* ========================================================== 6. UTILITIES */
@layer utilities {
  .muted { color: var(--text-3); }
  .text-center { text-align: center; }
  .mt-0 { margin-block-start: 0; } .mb-0 { margin-block-end: 0; }
  .mt-4 { margin-block-start: 36px; } .mb-4 { margin-block-end: 36px; }
  .stack { display: grid; gap: 14px; }
  .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  .divider { block-size: 1px; background: var(--line); margin-block: 36px; }
  .defer-render { content-visibility: auto; contain-intrinsic-size: auto 600px; }
  .sr-only {
    position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .empty {
    text-align: center; padding: 60px 24px; color: var(--text-3);
    border: 1.5px dashed var(--line); border-radius: var(--r-lg);
  }
}

/* ========================================================== 7. HAREKET */

/* Görünürlük animasyonu.
   Kaydırma zaman çizelgesi (view()) burada bilinçli olarak kullanılmıyor:
   sayfa açılışında ekranda olan öğeler "entry" evresine hiç girmediği için
   görünmez kalıyor. IntersectionObserver ilk karede de doğru davranıyor.
   Başlangıç durumu yalnızca .js sınıfı varken uygulanır; böylece JavaScript
   kapalıyken içerik görünür kalır. */
html.js [data-reveal] { opacity: 0; translate: 0 24px; }
html.js [data-reveal].is-in {
  opacity: 1; translate: 0 0;
  transition: opacity .7s var(--ease-out), translate .7s var(--ease-out);
}
html.js [data-reveal][data-delay="1"].is-in { transition-delay: .08s; }
html.js [data-reveal][data-delay="2"].is-in { transition-delay: .16s; }
html.js [data-reveal][data-delay="3"].is-in { transition-delay: .24s; }
html.js [data-reveal][data-delay="4"].is-in { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; translate: none; }
}

/* Kaydırmaya bağlı gerçek etkiler: kahraman katmanının uzaklaşması.
   Bunlar "çıkış" evresine bağlı olduğu için ilk karede sorun çıkarmaz. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__inner {
      animation: hero-drift linear both;
      animation-timeline: view();
      animation-range: exit-crossing 0% exit-crossing 100%;
    }
    @keyframes hero-drift { to { opacity: .25; translate: 0 -60px; } }

    .hero__grid {
      animation: grid-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes grid-drift { to { translate: 0 80px; } }
  }
}

/* Sayfa geçişi */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .22s var(--ease-out) both; }
  ::view-transition-new(root) { animation: vt-in .32s var(--ease-out) both; }
  @keyframes vt-out { to { opacity: 0; translate: 0 -10px; } }
  @keyframes vt-in { from { opacity: 0; translate: 0 14px; } }
  ::view-transition-group(site-header),
  ::view-transition-group(brand-logo) { animation-duration: .01ms; }
}