/* ==========================================================================
   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 {
    /* Tek tema: açık. light-dark() bu sayede her yerde ilk (açık)
       değeri seçer; ayrı bir koyu tema kuralı gerekmez. */
    color-scheme: light;

    /* Marka — logodan türetilen OKLCH skalası */
    --brand-950: oklch(24% .055 275);
    --brand-900: oklch(31% .072 275);
    --brand-800: oklch(38% .085 275);
    --brand-700: oklch(48% .098 275);
    --brand-600: oklch(56% .108 275);
    --brand-500: oklch(64% .118 275);
    --brand-400: oklch(74% .118 275);
    --brand-300: oklch(83% .092 275);
    --signal:    oklch(53% .132 228);
    --signal-lt: oklch(70% .118 228);
    --aqua:      oklch(78% .148 228);
    /* Hata ve uyarı. Eylem renginden bağımsızdır: panelden seçilen
       renk ne olursa olsun hata kırmızı kalır. */
    --danger:    oklch(55% .19 27);
    --danger-lt: oklch(72% .16 27);

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

    /* Yüzeyler — light-dark() ile tek tanımda iki tema */
    --bg:        oklch(100% 0 0);
    --bg-2:      oklch(97.6% .006 275);
    --bg-3:      oklch(94.6% .011 275);
    --surface:   oklch(100% 0 0);
    --line:      oklch(90.5% .014 275);
    --line-soft: oklch(95% .009 275);

    --text:   oklch(26% .036 275);
    --text-2: oklch(48% .034 275);
    /* %62 beyaz üzerinde 3.66:1 kalıyordu; küçük yazılar için düşük. */
    --text-3: oklch(56% .028 275);
    /* Vurgu yüzeyleri. Eskiden lacivert panellerdi; site tek ve açık
       temalı olduğu için artık marka tonunda AÇIK panel, üzerindeki yazı
       koyu. Kahraman bölümü, üst şerit, alt bilgi, çağrı şeridi, bento
       vurgu hücresi ve açılan paneller bu ikiliyi kullanır. */
    --surface-deep:   oklch(96.5% .013 275);
    --surface-deep-2: oklch(93.5% .023 275);
    --surface-deep-3: oklch(90% .034 275);
    --text-on-deep:   oklch(27% .046 275);
    --text-on-deep-2: oklch(45% .036 275);

    /* Koyu zemin üzerine yazı — yalnızca bakım sayfası ve atlama
       bağlantısı gibi gerçekten koyu kalan birkaç yerde kullanılır. */
    --text-inv: oklch(96% .008 275);
    --text-inv-2: oklch(76% .036 275);

    /* Odak çerçevesi --brand-400 iken karşıtlık beyazda 2.35, en açık
       gri zeminde 2.01'di; arayüz öğesi için gereken 3:1'in altında,
       yani klavyeyle gezinen biri odağın nerede olduğunu göremiyordu.
       --brand-600 ile en kötü durum 4.06 (--bg-3 üzerinde). */
    --focus: var(--brand-600);

    /* 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 275 / .06), 0 3px 10px oklch(24% .05 275 / .05);
    --sh-2: 0 6px 16px oklch(24% .05 275 / .08), 0 18px 42px oklch(24% .05 275 / .08);
    --sh-3: 0 22px 60px oklch(24% .05 275 / .2);
    --sh-brand: 0 10px 28px oklch(48% .098 275 / .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);
  }

}

/* ========================================================== 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: var(--ink-900);
    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; }
  /* h1'den h3'e atlamayı önlemek için bölüm başlıkları h2 yapıldı;
     görsel boyut eski h3 (--fs-h3) olarak korunuyor. */
  .sec-h { font-size: var(--fs-h3); }
  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: var(--ink-900); }
  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); }
  /* Yorum bırakma formu. section--paper zemininin üstünde durduğu
     için kendi yüzeyi var: form alanları zeminle karışmasın. */
  .yorum-form {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-xl); padding: clamp(24px, 3.2vw, 40px);
  }
  /* Vurgu bölümü (eski adı section--dark). Sayfanın akışını bölen,
     marka tonunda açık bir şerit. */
  .section--accent {
    background: linear-gradient(170deg, var(--surface-deep), var(--surface-deep-2));
    color: var(--text-on-deep-2);
    border-block: 1px solid var(--line-soft);
  }
  .section--accent h2, .section--accent h3, .section--accent h4 { color: var(--text-on-deep); }
  .section--accent .lead, .section--accent p { color: var(--text-on-deep-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; }
  /* Bölüm başlığı + yanındaki açıklama.

     ESKİ HÂLİ ŞÖYLE BOZUKTU: iki sütun "align-items: end" ile ALT
     kenarlarından hizalanıyordu, dolayısıyla açıklamanın dikey
     başlangıcı yalnızca KENDİ satır sayısına bağlı kalıyordu. 1920px'te
     ölçüldü: açıklamanın ilk satırı başlığın ilk satırına göre 70px
     yukarıdan 26px aşağıya savruluyordu. Sol sütun da 1.4fr ile sabit
     genişti ama başlık metni onu doldurmuyordu; aradaki görsel boşluk
     bölümden bölüme 133-391px arasında geziniyordu. İkisi birlikte
     başlıkla açıklamanın birbirine ait görünmemesine yol açıyordu.

     ÇÖZÜM: sarmalayıcı div'i display:contents ile ızgaraya açıp başlığı
     ve açıklamayı AYNI satırın iki hücresi yapmak. Satır "start"
     hizalı, iki kutunun üst kenarı tanım gereği aynı; açıklama 1 satır
     da olsa 5 satır da olsa başlangıç noktası kaymıyor. */
  .head--split {
    max-width: none; display: grid; align-items: start;
    gap: 0 clamp(26px, 2.6vw, 48px);
  }
  .head--split > div { display: contents; }
  /* Satır boşluğu 0; dar ekranda başlık-açıklama aralığı buradan. */
  .head--split > .lead { margin-block-start: 12px; }

  @media (min-width: 900px) {
    /* fit-content sütunu başlık metninin kendisine yapıştırır, böylece
       boşluk gap kadar kalır. 24rem bir ÜST SINIR DEĞİLDİR: track
       max(min-content, min(24rem, max-content)) ile boyutlanır, yani
       tek bir sözcük 24rem'den uzunsa sütun o sözcük kadar genişler
       (Almanca "Gardinenreinigung" gibi). Taşma olmaz, yalnızca sağdaki
       sütun daralır; dört dilde de ölçüldü. */
    .head--split { grid-template-columns: fit-content(24rem) minmax(0, 1fr); }
    .head--split > div > .eyebrow { grid-area: 1 / 1; }
    .head--split > div > h2       { grid-area: 2 / 1; }
    .head--split > .lead          { grid-area: 2 / 2; margin-block-start: 0; }
  }

  .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-700); 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--accent .eyebrow, .hero .eyebrow { color: var(--brand-700); }
  .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(53% .132 228 / .38); }
  .btn--dark  { --btn-bg: var(--ink-900); }
  .btn--light { --btn-bg: #fff; --btn-fg: var(--ink-900); box-shadow: var(--sh-1); }
  .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink-900); border-color: var(--line); }
  .btn--ghost:hover { border-color: var(--brand-500); color: var(--brand-600); box-shadow: none; }
  .section--accent .btn--ghost, .hero .btn--ghost { --btn-fg: var(--text-on-deep); border-color: var(--line); }
  .section--accent .btn--ghost:hover, .hero .btn--ghost:hover { border-color: var(--brand-500); color: var(--brand-600); }
  .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(--surface-deep); color: var(--text-on-deep-2);
    font-size: .8rem; border-block-end: 1px solid var(--line-soft);
  }
  .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-on-deep-2); display: inline-flex; align-items: center; gap: 7px; }
  .topbar a:hover { color: var(--brand-700); }
  .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;
    /* %7 beyaz, açık şerit üzerinde görünmüyordu. */
    background: oklch(40% .06 275 / .07); color: var(--text-on-deep-2);
    transition: background .2s, color .2s, translate .2s;
  }
  /* Rengi de çeviriyoruz: yoksa koyu simge koyu zemine gömülüyor. */
  .topbar__socials a:hover { background: var(--brand-700); color: #fff; translate: 0 -2px; }
  .topbar__socials svg { inline-size: 13px; block-size: 13px; opacity: 1; }
  /* Telefonda dokunma hedefi 28 piksel kalıyordu. */
  @media (width < 640px) { .topbar__socials a { inline-size: 38px; block-size: 38px; } }
  @media (width < 880px) { .topbar__list--left { display: none; } .topbar__inner { justify-content: center; } }

  /* ------------------------------------------------- dil anahtarı */
  .dil-sec { display: flex; align-items: center; gap: 2px; }
  .dil-sec__oge {
    padding: 3px 7px; border-radius: 7px; font-size: .74rem; font-weight: 650;
    letter-spacing: .04em; color: var(--text-on-deep-2);
    transition: background .18s, color .18s;
  }
  .dil-sec__oge:hover { background: oklch(40% .06 275 / .1); color: var(--brand-700); }
  .dil-sec__oge.is-aktif { background: var(--brand-700); color: #fff; }
  @media (width < 520px) { .dil-sec__oge { padding: 3px 5px; font-size: .7rem; } }

  /* ---------------------------------------------------- başlık */
  .site-header {
    position: sticky; inset-block-start: 0; z-index: 90;
    background: oklch(100% 0 0 / .82);
    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 275 / .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 dosyasının saydam kenarı kırpılı: block-size artık doğrudan
     çizimin boyu. Kırpmadan önce 48px kutunun içinde çizim 26px
     görünüyordu; buradaki 34px onun bir tık üstü. */
  .brand img { block-size: 34px; inline-size: auto; }
  @media (width < 560px) { .brand img { block-size: 28px; } }
  /* Logo dosyası henüz yüklenmediyse sitenin adı yazı olarak basılır;
     kırık resim görünmesin. Logo gelince bu kural devreye girmez. */
  .brand__yazi {
    font-family: var(--font-display); font-weight: 750;
    font-size: clamp(1.15rem, 2.4vw, 1.45rem); letter-spacing: -.03em;
    color: var(--brand-800); white-space: nowrap;
  }
  .footer__logo .brand__yazi { color: var(--text-on-deep); }

  .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: var(--ink-850);
  }
  /* 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 275 / .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: var(--ink-900); }
  .mega__desc { display: block; font-size: .77rem; color: var(--text-3); line-height: 1.45; }
  .mega__aside {
    background: linear-gradient(155deg, var(--surface-deep), var(--surface-deep-3));
    border-radius: var(--r-lg); padding: 26px; color: var(--text-on-deep-2);
    border: 1px solid var(--line); align-self: start;
  }
  .mega__aside h4 { color: var(--text-on-deep); margin-block-end: 8px; }
  .mega__aside p { color: var(--text-on-deep-2); font-size: .85rem; margin-block-end: 18px; }

  /* Sağ grubu kenara iten tek şey .nav üzerindeki `margin-inline-start:
     auto` idi; 1200px altında .nav gizlenince o marj da yok oluyor ve
     arama ile hamburger logonun dibine yapışıyordu. Marj burada da
     duruyor: .nav görünür olsa da olmasa da sağ kenara yaslanır. */
  .header__actions {
    display: flex; align-items: center; gap: 9px; flex: none;
    margin-inline-start: auto;
  }
  .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: var(--ink-850); 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; }
  .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(30% .04 275 / .45); backdrop-filter: blur(8px); }
  .sheet[popover]:popover-open { display: block; }

  .mobile-nav__panel {
    background: var(--bg); color: var(--text); 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 var(--line);
    color: var(--text); display: grid; place-items: center;
  }
  /* ":not(.btn)" şart: bu kural düğmelerin kendi yazı rengini eziyor,
     mobil menüdeki mavi "Teklif Alın" düğmesi koyu yazıyla çıkıyordu. */
  .mobile-nav a:not(.btn) { color: var(--text); }
  .mobile-nav__list a {
    display: block; padding-block: 15px; border-block-end: 1px solid var(--line-soft);
    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-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 var(--line); color: var(--text);
    font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2.3rem);
    padding: 14px 4px; outline: none;
  }
  .search-panel input::placeholder { color: var(--text-3); }
  .search-panel .hint { color: var(--text-2); font-size: .84rem; margin-block-start: 16px; }

  /* ---------------------------------------------------- KAHRAMAN */
  .hero {
    position: relative; overflow: clip; color: var(--text-on-deep-2);
    /* Slayt şeridi varsa onun hemen altında başlar; ayrım şeridin
       kendi alt çizgisiyle kurulur. */
    background:
      radial-gradient(1100px 640px at 82% 6%, oklch(94% .038 275 / .95), transparent 62%),
      radial-gradient(900px 520px at 8% 92%, oklch(97% .02 275 / .55), transparent 60%),
      /* Bitiş rengi eskiden --surface-deep-2 (%93.5) idi; üstteki %99.5
         ile arasındaki fark bölümü aşağı doğru koyulaştırıyordu. */
      linear-gradient(168deg, oklch(99.5% .003 275) 0%, oklch(98.6% .008 275) 55%, oklch(98% .012 275) 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(72% .11 275 / .22) 60deg, transparent 140deg,
      oklch(78% .12 228 / .14) 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 275 / .055) 1px, transparent 1px),
      linear-gradient(90deg, oklch(83% .092 275 / .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: var(--text-on-deep); margin-block-end: 22px; }
  .hero h1 .accent {
    /* Başlık vurgusu marka mavilerinde kalır; kırmızı yalnızca eylem
       düğmelerine ayrılmıştır, metinde kullanılmaz. */
    background: linear-gradient(96deg, var(--brand-700) 0%, oklch(56% .12 275) 55%, var(--brand-500) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero__lead { color: var(--text-on-deep-2); 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(100% 0 0 / .72); border: 1px solid var(--line);
    font-size: .8rem; color: var(--text-on-deep-2);
  }
  .hero__badge b { color: var(--text-on-deep); font-weight: 640; }
  .pulse-dot {
    inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--aqua);
    position: relative; flex: none; margin-inline-start: 5px;
  }
  .pulse-dot::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 1.5px solid var(--aqua); 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 / .66); border: 1px solid var(--line-soft);
  }
  .hero__stat b {
    display: block; font-family: var(--font-display); font-weight: 750;
    font-size: clamp(2rem, 3.4vw, 2.6rem); color: var(--text-on-deep);
    line-height: 1.05; letter-spacing: -.035em; margin-block-end: 4px;
  }
  /* Yalnızca etiket: ">" olmadan <b> içindeki sayaç span'ı da seçiliyor
     ve rakam etiket boyutuna düşüyordu. */
  .hero__stat > span { font-size: .8rem; color: var(--text-on-deep-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;
  }
  /* Son ek kelimeyse (ör. "yıl") üst simge olarak okunmuyor: taban
     çizgisinde, araya boşluk konarak basılır. */
  .stat-ek {
    font-style: normal; font-size: .42em; font-weight: 620;
    letter-spacing: 0; margin-inline-start: .3em; opacity: .9;
  }
  /* Değer alanına uzun bir kelime yazılırsa kutudan taşmasın.
     text-wrap: balance BURADA KULLANILMAZ: "20" ile "+" işaretini
     dengelemek için alt alta koyuyor. */
  .stat b, .hero__stat b { overflow-wrap: anywhere; }

  /* Cam panel */
  .hero__panel {
    background: linear-gradient(155deg, oklch(100% 0 0 / .92), oklch(100% 0 0 / .72));
    border: 1px solid var(--line); border-radius: var(--r-xl);
    padding: 26px; backdrop-filter: blur(14px); box-shadow: var(--sh-2);
    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: var(--text-on-deep); }
  .hero__panel-tag {
    font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--brand-800);
    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: var(--bg-2); border: 1px solid var(--line-soft);
    transition: background .25s, translate .25s var(--ease-out);
  }
  .hero__row:hover { background: var(--bg-3); translate: -3px 0; }
  .hero__row-icon {
    inline-size: 34px; block-size: 34px; border-radius: 10px; display: grid; place-items: center;
    flex: none; background: color-mix(in oklch, var(--brand-500) 14%, transparent); color: var(--brand-700);
  }
  .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: var(--text-on-deep); }
  .hero__row-main span { font-size: .74rem; color: var(--text-on-deep-2); }
  .hero__row-val { font-family: var(--font-display); font-size: .83rem; font-weight: 650; color: var(--brand-700); }
  @container (width < 300px) { .hero__row-main span { display: none; } }
  /* ---------------------------------------------------- SLAYTLAR
     Fotoğraf ya da kısa video şeridi. Tek bir görünüm penceresi içinde
     slaytlar üst üste durur; geçiş opaklıkla yapılır, böylece farklı
     en-boy oranındaki görseller birbirini itmez. */
/* Sayfanın açılış görseli: kenardan kenara, başlığın hemen altında. */
  .slider-band { position: relative; }
  .slider {
    position: relative; overflow: hidden; background: var(--surface-deep);
    border-block-end: 1px solid var(--line);
  }
  .slider__viewport {
    /* inline-size kesin olmalı: aspect-ratio ile max-block-size birlikte
       verildiğinde, genişlik "auto" kalırsa tarayıcı oranı korumak için
       GENİŞLİĞİ daraltıyor ve şerit tam genişlik olmuyor. */
    position: relative; inline-size: 100%;
    aspect-ratio: 16 / 7; min-block-size: 340px; max-block-size: 78vh;
  }
  @media (width < 980px) { .slider__viewport { aspect-ratio: 16 / 10; min-block-size: 300px; } }
  @media (width < 620px) { .slider__viewport { aspect-ratio: 4 / 5; min-block-size: 0; } }

  .slider__slide {
    position: absolute; inset: 0; margin: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .6s var(--ease-out), visibility .6s;
  }
  .slider__slide.is-aktif { opacity: 1; visibility: visible; }
  .slider__media {
    inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  }

  /* Yazı, görselin üstünde okunabilir kalsın diye alttan yukarı koyulaşan
     bir perde.

     Perde YAZI KUTUSUNUN DEĞİL, slaydın üstünde duruyor. Kutuya bağlıyken
     tam da başlığın bulunduğu üst kenarda şeffaflaşıyordu: açık renkli
     fotoğraflarda (tül perde, gelinlik) beyaz başlığın kontrastı 2.9'a
     kadar düşüyor, yani okunmuyordu. Slayda yayılınca yazı bandında
     ölçülen en düşük kontrast 5.8 — alttaki koyuluk ise eskisi kadar
     (.84 ≈ .82), fotoğraf bastırılmış olmuyor. */
  .slider__slide::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top,
      oklch(18% .04 275 / .84) 0%,
      oklch(18% .04 275 / .68) 20%,
      oklch(18% .04 275 / .26) 42%,
      transparent 65%);
  }
  /* Dar ekranda slayt 4/5'e döndüğü için kısalıyor; yazı, perdenin daha
     zayıf olduğu üst bölgesine çıkıyor. Ölçümde başlık 3.5'e iniyordu,
     bu stoplarla 6.1. */
  @media (width < 620px) {
    .slider__slide::after {
      background: linear-gradient(to top,
        oklch(18% .04 275 / .88) 0%,
        oklch(18% .04 275 / .76) 28%,
        oklch(18% .04 275 / .34) 54%,
        transparent 76%);
    }
  }

  .slider__yazi {
    position: absolute; inset-inline: 0; inset-block-end: 0;
    z-index: 1;                       /* perde ::after, yani yazıdan sonra çizilir */
    max-block-size: 78%; overflow: hidden;
    padding-block: clamp(18px, 4vw, 44px) clamp(40px, 5vw, 62px);
    padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
    display: grid; justify-items: start; gap: 10px;
    color: #fff;
  }
  .slider__yazi .slider__baslik {
    color: #fff; font-size: clamp(1.3rem, 2.6vw, 2.1rem); margin: 0;
    text-wrap: balance; text-shadow: 0 1px 14px oklch(20% .04 275 / .5);
  }
  .slider__yazi p {
    color: oklch(94% .012 275); margin: 0; max-inline-size: 60ch;
    font-size: clamp(.84rem, 1.3vw, 1rem);
  }
  @media (width < 620px) {
    .slider__yazi p {
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  /* Oklar ve noktalar */
  .slider__ok {
    position: absolute; inset-block-start: 50%; translate: 0 -50%;
    inline-size: 44px; block-size: 44px; border-radius: 50%;
    display: grid; place-items: center; z-index: 3;
    background: oklch(100% 0 0 / .86); border: 1px solid var(--line);
    color: var(--text-on-deep); box-shadow: var(--sh-1);
    transition: background .2s, scale .2s var(--ease-out);
  }
  .slider__ok:hover { background: #fff; scale: 1.07; }
  .slider__ok--geri {
    inset-inline-start: max(14px, calc((100% - var(--container)) / 2 + 14px));
    rotate: 180deg;
  }
  .slider__ok--ileri {
    inset-inline-end: max(14px, calc((100% - var(--container)) / 2 + 14px));
  }

  /* Ses düğmesi — yalnızca panelde sesi açık olan video slaytlarında.
     Sağ ÜSTTE durur; oklar dikey ortada olduğu için çakışmaz. */
  .slider__ses {
    position: absolute; z-index: 3;
    inset-block-start: 16px;
    inset-inline-end: max(14px, calc((100% - var(--container)) / 2 + 14px));
    inline-size: 40px; block-size: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: oklch(20% .03 275 / .5); border: 1px solid oklch(100% 0 0 / .3);
    color: #fff; backdrop-filter: blur(6px);
    transition: background .2s, scale .2s var(--ease-out);
  }
  .slider__ses:hover { background: oklch(20% .03 275 / .72); scale: 1.07; }
  /* Duraklat/oynat düğmesi — ses düğmesinin eşi, sol üstte. */
  .slider__dur {
    position: absolute; z-index: 3;
    inset-block-start: 16px;
    inset-inline-start: max(14px, calc((100% - var(--container)) / 2 + 14px));
    inline-size: 40px; block-size: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: oklch(20% .03 275 / .5); border: 1px solid oklch(100% 0 0 / .3);
    color: #fff; cursor: pointer; transition: background .2s, scale .2s;
  }
  .slider__dur:hover { background: oklch(20% .03 275 / .72); scale: 1.07; }
  .slider__dur-oynat { display: none; }
  .slider__dur.is-durdu .slider__dur-duraklat { display: none; }
  .slider__dur.is-durdu .slider__dur-oynat { display: block; }
  .slider__ses.is-acik { background: var(--signal); border-color: transparent; }
  .slider__ses-acik { display: none; }
  .slider__ses.is-acik .slider__ses-kapali { display: none; }
  .slider__ses.is-acik .slider__ses-acik { display: block; }
  /* Dar ekranda oklar yazının üstüne biniyor; nokta ve parmakla kaydırma
     zaten var, oklar gizlenir. */
  @media (width < 620px) { .slider__ok { display: none; } }

  .slider__noktalar {
    position: absolute; inset-block-end: 14px; inset-inline: 0; z-index: 3;
    display: flex; justify-content: center; gap: 8px;
  }
  .slider__nokta {
    inline-size: 9px; block-size: 9px; border-radius: 50%; padding: 0;
    background: oklch(100% 0 0 / .55); border: 1px solid oklch(20% .04 275 / .25);
    transition: inline-size .25s var(--ease-out), background .25s;
  }
  .slider__nokta.is-aktif { inline-size: 26px; border-radius: 999px; background: #fff; }

  /* Yazısız slaytlarda noktalar görselin üstünde kaybolmasın. */
  .slider__noktalar::before {
    content: ""; position: absolute; inset: -10px -14px;
    background: oklch(20% .04 275 / .18); border-radius: 999px; z-index: -1;
  }

  @media (prefers-reduced-motion: reduce) {
    .slider__slide { transition: none; }
    .slider__nokta { transition: none; }
  }

  /* ---------------------------------------------------- BENTO */
  /* dense: 2x2 fotoğraflı kart yüzünden açılan delikleri sonraki küçük
     kartlar doldurur. Olmazsa sağ altta boş hücreler kalıyor. */
  .bento {
    display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: row dense;
  }
  @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); }
  /* Genel hücre yazısı. Çeşit kuralları (--feature, --accent) bu
     satırlarla AYNI özgüllükte olduğu için onlardan önce gelmeli;
     sonra gelirse çeşitlerin rengini ezer. */
  .bento__cell h3 { font-size: 1.14rem; }
  .bento__cell p { font-size: .91rem; color: var(--text-2); margin: 0; }
  .bento__cell--wide { grid-column: span 2; }
  /* Dört sütunlu düzende geniş kart boydan boya: son satır yarım
     kalmasın, bant gibi dursun. */
  @media (width >= 1000px) { .bento__cell--wide { grid-column: 1 / -1; } }
  .bento__cell--tall { grid-row: span 2; }

  .bento__cell--feature {
    grid-column: span 2; grid-row: span 2; color: var(--text-on-deep-2);
    border-color: var(--line);
    background:
      radial-gradient(600px 320px at 100% 0%, oklch(92% .05 275 / .9), transparent 65%),
      linear-gradient(160deg, var(--surface-deep), var(--surface-deep-3));
    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: var(--text-on-deep); font-size: clamp(1.35rem, 2.4vw, 1.95rem); }
  .bento__cell--feature p { color: var(--text-on-deep-2); }
  .bento__cell--accent {
    color: #fff; border-color: transparent;
    background: linear-gradient(150deg, var(--signal), oklch(48% .17 228));
  }
  .bento__cell--accent h3, .bento__cell--accent .bento__stat { color: #fff; }
  .bento__cell--accent p { color: oklch(96% .03 228 / .88); }
  .bento__cell--accent .link-arrow { color: #fff; }

  .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--accent .bento__icon { background: oklch(100% 0 0 / .18); color: #fff; }
  .bento__cell--feature .bento__icon {
    background: oklch(100% 0 0 / .8); color: var(--brand-700);
  }
  .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: var(--ink-900);
  }
  .bento__mesh {
    position: absolute; inset-block-start: -30%; inset-inline-end: -20%;
    inline-size: 320px; block-size: 320px; opacity: .5; pointer-events: none;
  }
  /* Fotoğraflı büyük kart: görsel hücreyi kaplar, yazı perdenin üstünde.
     Önceden içerik dibe itiliyor ve üstte büyük bir boşluk kalıyordu. */
  /* Taban rengi şart: fotoğraf yüklenene kadar (ya da hiç gelmezse)
     beyaz yazı açık zeminde kayboluyordu. */
  .bento__cell:has(.bento__foto) { background: oklch(26% .05 275); border-color: transparent; }
  .bento__foto {
    position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
    object-fit: cover; z-index: 0;
  }
  .bento__perde {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top,
      oklch(21% .05 275 / .92) 0%, oklch(21% .05 275 / .72) 38%,
      oklch(21% .05 275 / .28) 70%, oklch(21% .05 275 / .1) 100%);
  }
  .bento__cell:has(.bento__foto) > :not(.bento__foto):not(.bento__perde) {
    position: relative; z-index: 2;
  }
  .bento__cell:has(.bento__foto) :is(h3, p, .bento__stat) { color: #fff; }
  .bento__cell:has(.bento__foto) p { color: oklch(95% .01 275 / .9); }
  .bento__cell:has(.bento__foto) .link-arrow { color: #fff; }
  .bento__cell:has(.bento__foto) .bento__icon {
    background: oklch(100% 0 0 / .18); color: #fff;
  }

  /* ---------------------------------------------------- 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; }

  /* ------------------------------------------------------ fiyat tablosu */
  .price-group { margin-block-end: 44px; }
  .price-group:last-of-type { margin-block-end: 0; }
  .price-group__title {
    display: flex; align-items: center; gap: 12px;
    font-size: var(--fs-h3); margin-block-end: 14px;
  }
  /* Başlık içindeki ikon kart ikonundan küçük: satıra otursun. */
  .price-group__title .card__icon {
    inline-size: 40px; block-size: 40px; border-radius: 11px;
    margin: 0; flex: none; box-shadow: none;
  }
  .price-group__title .card__icon svg { inline-size: 21px; block-size: 21px; }
  .price-table { inline-size: 100%; border-collapse: collapse; }
  .price-table tr { border-block-end: 1px solid var(--line); }
  .price-table tr:last-child { border-block-end: 0; }
  .price-table th {
    text-align: start; font-weight: 600; vertical-align: top;
    padding: 14px 16px 14px 0; line-height: 1.35;
  }
  .price-table th small {
    display: block; font-weight: 400; font-size: .82rem;
    color: var(--text-3); margin-block-start: 4px; max-inline-size: 48ch;
  }
  .price-table td {
    text-align: end; white-space: nowrap; vertical-align: top;
    padding: 14px 0; font-weight: 650; font-variant-numeric: tabular-nums;
  }
  .price-table td small { font-weight: 400; color: var(--text-3); }
  @media (width < 420px) {
    .price-table th { padding-inline-end: 10px; }
    .price-table th small { font-size: .78rem; }
  }
  .card :is(h2, 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;
    /* Filigran rakam. --bg-3 ile neredeyse görünmezdi. */
    color: oklch(88% .028 275); 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 275);
    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);
  }
  /* Yazı --brand-600 iken kendi zemininde karşıtlık 4.11'di; küçük metin
     için gereken 4.5'in altında. --brand-700 ile 5.78 oluyor. */
  .badge--brand { background: color-mix(in oklch, var(--brand-500) 14%, transparent); color: var(--brand-700); }
  .badge--signal { background: color-mix(in oklch, var(--signal) 14%, transparent); color: var(--signal); }
  .badge--ok { background: color-mix(in oklch, var(--aqua) 22%, transparent); color: oklch(52% .12 228); }

  /* ---------------------------------------------------- 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 / .8); border: 1px solid var(--line);
    color: var(--brand-700); 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--accent .stat { background: var(--surface); }
  .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--accent .stat b { color: var(--brand-700); }
  /* Yalnızca etiket — yukarıdaki not geçerli. */
  .stat > span { display: block; margin-block-start: 9px; font-size: .84rem; color: var(--text-2); }
  .section--accent .stat > span { color: var(--text-on-deep-2); }

  /* -------------------------------------------- önce/sonra galerisi
     Hizmet sayfasında panelden yönetilen görsel şeridi. Kutular eşit
     oranlı: önce/sonra çiftleri yan yana gelince aynı boyda dursun. */
  .galeri {
    margin: 22px 0 0; display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .galeri__oge { margin: 0; }
  .galeri__oge img {
    inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
    border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2);
  }
  .galeri__oge figcaption {
    margin-block-start: 8px; font-size: .82rem; color: var(--text-2);
    text-align: center; font-weight: 600;
  }

  /* --------------------------------------- video galerisi (hizmet, Hakkımızda) */
  .hizmet-video { margin: 32px 0 0; display: grid; gap: 14px; }
  .hizmet-video figure { margin: 0; }
  /* Birden çok video varsa yan yana; tek videoda tam genişlik. */
  @media (width >= 620px) {
    .hizmet-video--coklu {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      justify-content: center;
    }
  }
  /* Yedek metin yalnızca tarayıcı videoyu oynatamazsa görünür; kutu o
     zaman koyu kalıyor, yazı da sayfanın koyu rengini alıyordu. */
  .hizmet-video video { color: #fff; }
  .hizmet-video video {
    inline-size: 100%; block-size: auto; display: block;
    border-radius: var(--r-lg); background: var(--ink-950);
    max-block-size: 70vh; object-fit: contain;
  }
  /* Tek video sayfanın tamamını kaplayabilir; galeride kutular eşitlensin.
     Galerideki videolar telefonla dikey çekilmiş oluyor, o yüzden kutu da
     dikey. Genişlik 260px'te duruyor: sütun ne kadar genişlerse genişlesin
     dikey bir video sayfayı boydan boya kaplamasın.
     `contain`, `cover` değil — kırpmak yerine bantlamak: galeriye oranı
     farklı (hatta yatay) bir video eklendiğinde görüntü kaybolmasın.
     Yükseklik sınırı YOK; oranla birlikte kullanıldığında kutuyu bozup
     her videoyu bantlıyordu. */
  .hizmet-video--coklu video {
    aspect-ratio: 9 / 16; object-fit: contain;
    max-inline-size: 260px; margin-inline: auto; max-block-size: none;
  }

  /* ---------------------------------------------------- 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: var(--ink-900);
  }
  .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 */
  /* align-content: start olmadan, yan yana duran iki alandan biri ipucu
     satırı taşıdığında diğerinin kutusu gerilip aşağı kayıyor. */
  .field { display: grid; gap: 7px; margin-block-end: 17px; align-content: start; }
  .field label { font-family: var(--font-display); font-size: .82rem; font-weight: 620; color: var(--ink-850); }
  .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: var(--text-on-deep-2); }
  .contact-card .consent-check a { color: var(--brand-700); 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(--aqua) 18%, transparent); color: oklch(48% .11 228); border: 1px solid color-mix(in oklch, var(--aqua) 34%, transparent); }
  .alert--err { background: color-mix(in oklch, var(--danger) 10%, transparent); color: oklch(47% .18 27); border: 1px solid color-mix(in oklch, var(--danger) 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(--surface-deep), var(--surface-deep-3));
    border: 1px solid var(--line);
    border-radius: var(--r-xl); padding: clamp(28px, 3.4vw, 44px); color: var(--text-on-deep-2);
    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 :is(h2, h3) { color: var(--text-on-deep); }
  .contact-card p { color: var(--text-on-deep-2); }
  .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 / .85); color: var(--brand-700);
  }
  .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: var(--text-on-deep-2); font-weight: 620; margin-block-end: 4px;
  }
  .contact-item :is(a, span:not(.contact-item__icon)) { color: var(--text-on-deep); font-size: .95rem; }
  .contact-item a:hover { color: var(--brand-700); }

  /* Birden çok şube olduğunda haritalar yan yana. */
  .map-grid { display: grid; gap: 16px; }
  @media (width >= 780px) { .map-grid:has(> * + *) { grid-template-columns: 1fr 1fr; } }
  .map-frame {
    border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
    line-height: 0; margin: 0; background: var(--bg-2);
  }
  .map-frame iframe { inline-size: 100%; block-size: 100%; min-block-size: 320px; border: 0; display: block; }
  .map-frame figcaption {
    line-height: 1.4; font-size: .84rem; font-weight: 560; color: var(--text-2);
    padding: 10px 14px; background: var(--surface); border-block-start: 1px solid var(--line);
  }
  /* Şube kartı. Bu sınıfların hiç kuralı yoktu: kart zeminsiz,
     çerçevesiz ve dolgusuz çiziliyor, satırlardaki simge ile metin de
     ayrı satırlara düşüyordu (reset'te `svg { display: block }` var,
     satır ise flex değildi). Kabuk .card ile aynı dili konuşuyor. */
  .branch-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: clamp(22px, 2.2vw, 30px);
    display: flex; flex-direction: column;
  }
  .branch-card__media {
    border-radius: var(--r-md); overflow: hidden; margin-block-end: 18px;
    background: var(--bg-2); aspect-ratio: 16 / 10;
  }
  .branch-card__media img {
    inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  }
  /* Fotoğrafı olmayan şube: kutu yine çizilir ki iki kartın başlığı aynı
     yükseklikte başlasın. İçinde marka amblemi, soluk ve ortalı. */
  .branch-card__media--bos {
    display: grid; place-items: center;
    background: linear-gradient(160deg, var(--surface-deep), var(--bg-2));
    border: 1px solid var(--line);
  }
  .branch-card__media--bos .branch-card__amblem {
    inline-size: 46%; block-size: auto; object-fit: contain; opacity: .22;
  }
  .branch-card__body { display: flex; flex-direction: column; flex: 1; }
  /* Başlık kart ölçeğinde: sayfa h2'si 45 piksel ve kart sütununda uzun
     şube adı üç satıra sarıyor, kısa olan iki satırda kalıyordu — rozet
     ve altındaki her şey iki kartta farklı yükseklikte başlıyordu.
     min-block-size iki satır yer ayırır, böylece kısa adlı kartta da
     rozet aynı hizaya gelir. `balance` satırları eşit böler. */
  .branch-card__body h2 {
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    line-height: 1.25; text-wrap: balance;
    min-block-size: 2lh;
  }
  .branch-card__row {
    display: flex; gap: 11px; align-items: flex-start;
    margin-block-start: 12px; font-size: .92rem; color: var(--text-2);
  }
  .branch-card__row svg { flex: none; margin-block-start: 3px; color: var(--brand-600); }
  .branch-card__row a { color: inherit; }
  .branch-card__row a:hover { color: var(--brand-500); }
  .branch-card__foot {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-block-start: auto; padding-block-start: 20px;
  }

  /* Şube kartındaki harita kutusunun hiç kuralı yoktu; iframe
     tarayıcı varsayılanı olan 300x150 boyutunda kalıyordu. */
  .branch-card__map {
    border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line);
    margin-block-start: 18px; line-height: 0; background: var(--bg-2);
  }
  /* Harita kartın en altında, başlıktan uzakta kalıyor; hangi şubeye ait
     olduğu anlaşılmıyordu. Başlık haritanın ÜSTÜNDE duruyor. */
  .branch-card__map figcaption {
    display: flex; align-items: center; gap: 7px;
    line-height: 1.4; font-size: .82rem; font-weight: 600; color: var(--text-2);
    padding: 9px 13px; background: var(--surface);
    border-block-end: 1px solid var(--line);
  }
  .branch-card__map figcaption svg { flex: none; color: var(--brand-600); }
  .branch-card__map iframe {
    inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9;
    min-block-size: 200px; border: 0; display: block;
  }

  /* ---------------------------------------------------- CTA */
  .cta-band {
    position: relative; overflow: hidden; border-radius: var(--r-2xl);
    background: linear-gradient(118deg, var(--surface-deep), var(--surface-deep-2) 55%, var(--surface-deep-3));
    border: 1px solid var(--line);
    color: var(--text-on-deep-2); 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: var(--text-on-deep); margin-block-end: 10px; }
  .cta-band p { color: var(--text-on-deep-2); 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 / .5); pointer-events: none;
  }

  /* ---------------------------------------------------- alt bilgi */
  .footer {
    background: linear-gradient(180deg, var(--surface-deep), var(--surface-deep-2));
    color: var(--text-on-deep-2); border-block-start: 1px solid var(--line);
    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: var(--text-on-deep); font-size: .8rem; letter-spacing: .15em; text-transform: uppercase;
    margin-block-end: 20px; font-weight: 650;
  }
  .footer a { color: var(--text-on-deep-2); font-size: .9rem; }
  .footer a:hover { color: var(--brand-700); }
  /* ul[class] sıfırlaması sınıfsız listeleri atlıyor; alt bilgi
     listelerinde madde imi kalıyordu. */
  .footer ul { list-style: none; padding: 0; margin: 0; }
  .footer li { margin-block-end: 11px; }
  .footer__logo img { block-size: 40px; 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-700); 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 / .85); border: 1px solid var(--line);
    color: var(--text-on-deep); transition: background .22s, translate .22s var(--ease-out);
  }
  .footer__socials a:hover { background: var(--brand-700); border-color: transparent; color: #fff; 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 var(--line); background: var(--surface); color: var(--text);
    font-size: .88rem; outline: none;
  }
  .newsletter input::placeholder { color: var(--text-3); }
  .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); color: #fff; }
  .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); }
  /* Gizliyken visibility:hidden: opacity:0 tek başına düğmeyi klavye
     tab sırasından çıkarmıyordu (görünmez odak). visibility geçişte
     adımlı olduğu için önce solma oynar, sonra gizlenir. */
  .floater--top { background: var(--ink-900); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s linear .3s, scale .22s; }
  .floater--top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .wa-bubble {
    position: absolute; inset-inline-end: 62px; inset-block-end: 4px; white-space: nowrap;
    background: var(--surface); color: var(--ink-900);
    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: oklch(100% 0 0 / .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: var(--text-on-deep-2);
    background: linear-gradient(152deg, var(--surface-deep), var(--surface-deep-2));
    border-block-end: 1px solid var(--line);
    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 275 / .05) 1px, transparent 1px),
                      linear-gradient(90deg, oklch(83% .092 275 / .05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(102deg, #000, transparent 70%);
  }
  .page-head__inner { position: relative; z-index: 1; }
  /* Panel artık AÇIK; beyaz başlık okunmuyordu. */
  .page-head h1 { color: var(--text-on-deep); margin-block-end: 12px; }
  .page-head p { color: var(--text-on-deep-2); max-width: 62ch; margin: 0; }
  .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .82rem; margin-block-end: 16px; color: var(--text-on-deep-2); }
  .crumbs a { color: var(--text-on-deep-2); }
  .crumbs a:hover { color: var(--text-on-deep); }
  .crumbs [aria-current] { color: var(--text-on-deep); }

  /* ------------------------------------------- başlık boşlukları
     h1..h5'in alt marjı yok; bileşenlerin çoğu boşluğu `gap` ile
     verdiği için genel bir marj çift boşluk üretirdi. Aşağıdakiler,
     ölçümde 0-2 piksel çıkan (yani gerçekten bitişik duran) yerler. */
  .head > :is(h2, h3) + p { margin-block-start: 10px; }
  .contact-card :is(h2, h3, h4) + p { margin-block-start: 8px; }
  .solution-layout :is(h3, h4) + :is(p, ul, ol, table) { margin-block-start: 14px; }
  .branch-card :is(h2, h3) + :is(.badge, p, .row) { margin-block-start: 10px; }
  .card :is(h2, h3, h4) + p { margin-block-start: 8px; }
  .sticky-flow__aside :is(h2, h3) + p { margin-block-start: 10px; }
  .mega__aside :is(h3, h4) + p { margin-block-start: 8px; }
  /* Başlığın hemen ardından gelen makale gövdesi. */
  :is(h1, h2, h3) + .prose { margin-block-start: 14px; }
  /* Süreç kartlarında 6 piksel kalıyordu — biraz nefes. */
  .flow-step :is(h3, h4) + p { margin-block-start: 9px; }

  /* ---------------------------------------------------- makale */
  .prose { font-size: 1.04rem; line-height: 1.78; color: var(--text-2); max-width: 74ch; }
  .prose :is(h2, h3) { color: var(--ink-900); }
  .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: var(--ink-900); }

  .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(--aqua) 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 228); border-block-end: 2px solid oklch(52% .12 228);
  }
  .section--accent .checklist li { color: var(--text-on-deep-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: var(--ink-900); }
  .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: var(--ink-900); border-color: transparent; color: #fff; }

  /* ---------------------------------------------------- site haritası
     Bölüm başına bir kart. Listeler farklı uzunlukta olduğu için
     kartlar satır yüksekliğine uzamaz (align-items: start). */
  .harita { align-items: start; }
  .harita__blok { padding: 26px 28px 22px; }
  .harita__baslik {
    font-size: .76rem; font-weight: 640; letter-spacing: .16em; text-transform: uppercase;
    color: var(--brand-700); margin-block-end: 18px;
    display: flex; align-items: center; gap: 10px;
  }
  .harita__baslik::before {
    content: ""; inline-size: 22px; block-size: 2px; border-radius: 2px; flex: none;
    background: linear-gradient(90deg, var(--signal), var(--brand-500));
  }
  .harita__liste { list-style: none; margin: 0; padding: 0; }
  .harita__liste li + li { border-block-start: 1px solid var(--line-soft); }
  .harita__liste a {
    display: block; padding: 9px 0; font-size: .93rem; color: var(--text-2);
    transition: color .2s var(--ease-out), padding-inline-start .2s var(--ease-out);
  }
  .harita__liste a:hover { color: var(--brand-600); padding-inline-start: 6px; }

  /* ---------------------------------------------------- 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 275 / .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; }
  /* Simge + yazı bağlantısı. .row'un çıplak metin düğümü bölünemeyen
     tek bir flex öğesi: uzun etiketlerde yazının tamamı alt satıra
     düşüp simgeyi yukarıda yalnız bırakıyordu. Burada simge hiç
     küçülmez, yazı kendi kutusunda sarar. */
  .row--ikon { flex-wrap: nowrap; align-items: start; }
  .row--ikon > svg { flex: none; margin-block-start: .2em; }
  .row--ikon > span { min-inline-size: 0; }
  .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%;
    }
    /* Yalnızca hafif bir kayma. Eskiden burada opacity de .25'e
       iniyordu; kaydırırken kahraman metni soluklaşıp okunmaz hâle
       geliyordu — kaldırıldı. */
    @keyframes hero-drift { to { 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; }
}

/* ------------------------------------------------------- sohbet penceresi
   Telefon/WhatsApp düğmelerinin üstünde, onlarla aynı sütunda durur.
   Pencere açıkken düğme gizlenir; dar ekranda tam genişliğe yayılır. */
/* Kendiliğinden çıkan karşılama balonu.
   Renk temaya göre DEĞİŞMEZ: balon sayfanın üstünde yüzüyor ve arkasındaki
   zemin kaydırdıkça değişiyor (üstte koyu hero, aşağıda açık bölümler).
   Marka mavisi ikisinde de okunur. */
.sohbet__selam {
  position: relative;
  inline-size: min(320px, calc(100vw - 104px));
  margin-inline-end: 62px;
  filter: drop-shadow(0 16px 36px oklch(20% .08 275 / .45));
  animation: sohbet-selam-gir .42s cubic-bezier(.2, 1.3, .4, 1);
}
/* Sohbet ikonuna bakan kuyruk: balonun o düğmeye ait olduğu görünsün.
   Düğme 18-70 px aralığında; kuyruk merkezi 26 px yukarıda, yani tam
   düğmenin ortası hizasında. */
.sohbet__selam::after {
  content: ""; position: absolute;
  /* Ölçülerek ayarlandı: boşluk 20 px, düğme merkezi balon altından 26 px
     yukarıda. Kuyruk tam o aralığı köprüler ve ikonun ortasını gösterir. */
  inset-block-end: 26px; inset-inline-end: -20px;
  inline-size: 0; block-size: 0;
  border-block: 7px solid transparent;
  border-inline-start: 20px solid oklch(45% .16 275);
}

/* Kartın tamamı düğme. */
.sohbet__selam-ic {
  inline-size: 100%; display: flex; gap: 11px; align-items: flex-start;
  padding: 15px 36px 15px 15px; border: 0; cursor: pointer; text-align: start;
  font: inherit; color: #fff;
  background: linear-gradient(152deg, oklch(53% .16 275), oklch(43% .16 275));
  border-radius: 18px; border-end-end-radius: 5px;
  transition: translate .18s var(--ease-out), filter .18s;
}
.sohbet__selam-ic:hover { translate: 0 -2px; filter: brightness(1.07); }
.sohbet__selam-ic:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.sohbet__selam-avatar {
  flex: none; inline-size: 36px; block-size: 36px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: oklch(100% 0 0 / .17);
}
.sohbet__selam-avatar svg { inline-size: 19px; block-size: 19px; }
.sohbet__selam-govde { display: block; min-inline-size: 0; }
.sohbet__selam-ad {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: oklch(100% 0 0 / .72); text-transform: uppercase; margin-block-end: 3px;
}
.sohbet__selam-mesaj {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .89rem; line-height: 1.5; font-weight: 400;
}
.sohbet__selam-cta {
  display: block; margin-block-start: 8px; font-size: .78rem; font-weight: 650;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: oklch(100% 0 0 / .5);
}
.sohbet__selam-ic:hover .sohbet__selam-cta { text-decoration-color: #fff; }

.sohbet__selam-kapat {
  position: absolute; inset-block-start: 8px; inset-inline-end: 8px;
  inline-size: 24px; block-size: 24px; border-radius: 50%;
  display: grid; place-items: center; color: oklch(100% 0 0 / .65); z-index: 1;
}
.sohbet__selam-kapat:hover { background: oklch(100% 0 0 / .18); color: #fff; }
@keyframes sohbet-selam-gir { from { opacity: 0; translate: 0 14px; scale: .94; } }
@media (prefers-reduced-motion: reduce) {
  .sohbet__selam { animation: none; }
  .sohbet__selam-ic:hover { translate: 0 0; }
}

/* Düğmede okunmamış işareti + dikkat çeken nabız. */
.floater--sohbet.is-cagiriyor { animation: sohbet-nabiz 1.7s ease-out 4; }
.floater--sohbet.is-cagiriyor::after {
  content: "1"; position: absolute; inset-block-start: -2px; inset-inline-end: -2px;
  min-inline-size: 20px; block-size: 20px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid oklch(97% .005 275);
}
@keyframes sohbet-nabiz {
  0%, 100% { box-shadow: var(--sh-3); }
  50% { box-shadow: var(--sh-3), 0 0 0 12px oklch(55% .17 275 / .26); }
}
@media (prefers-reduced-motion: reduce) { .floater--sohbet.is-cagiriyor { animation: none; } }

/* Pencere yüzen düğme yığınının üstünde durur; düğmenin kendisi o
   yığının son üyesidir (bkz. base.php), yoksa WhatsApp'ı örtüyordu.
   Düğme açıkken gizlenmez — gizlenseydi yığın çöküp diğer düğmeler
   her açılışta yer değiştirirdi. */
/* Kapsayıcı sohbet DÜĞMESİNİN hizasında durur; pencere kendi alt boşluğuyla
   yığının üstüne çıkar. Balon 82 pikselden açılınca WhatsApp ve telefon
   düğmelerinin yanında kalıyor, "WhatsApp'tan geliyor" izlenimi veriyordu. */
.sohbet { position: fixed; inset-inline-end: 18px; inset-block-end: 18px; z-index: 71; }
/* Pencere açıkken karşılama balonu gizlenir. Yalnız JS'e bırakılırsa, durum
   bir kez şaşınca ikisi üst üste biniyor ve yığın ekranın üstünü aşıp
   sabit başlığın altına giriyordu (kullanıcı bildirdi). Bu kural garanti. */
.sohbet.is-acik .sohbet__selam { display: none; }
.floater--sohbet { background: var(--brand-600, #1f6feb); position: relative; }
.floater--sohbet[aria-expanded="true"] { background: var(--ink-900); }

/* [hidden] varsayılanı display:none'dur ama buradaki display:grid onu
   ezer; pencere her sayfa açılışında açık gelirdi. */
/* ----------------------------------------------------- duyuru penceresi
   Siteye girişte çıkan küçük pencere (Ayarlar → Duyuru penceresi).
   Yerel <dialog>: odak tuzağı, Esc ile kapanma ve arka plan perdesi
   tarayıcıdan geliyor, elle yazmaya gerek yok. */
.duyuru {
  inline-size: min(420px, calc(100vw - 32px));
  /* `* { margin: 0 }` sıfırlaması <dialog>'un kendi `margin: auto`
     ortalamasını eziyor ve pencere sol üst köşeye yapışıyordu. */
  margin: auto;
  padding: 0; border: 1px solid var(--line);
  border-radius: var(--r-xl); background: var(--surface); color: var(--ink-900);
  box-shadow: 0 26px 70px oklch(15% .04 275 / .3);
  overflow: hidden;
}
.duyuru::backdrop { background: oklch(18% .04 275 / .45); backdrop-filter: blur(2px); }
.duyuru[open] { animation: duyuru-gir .24s var(--ease-out); }
@keyframes duyuru-gir { from { opacity: 0; translate: 0 14px; scale: .98; } }
@media (prefers-reduced-motion: reduce) { .duyuru[open] { animation: none; } }

.duyuru__kapat-sar { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 1; }
.duyuru__kapat {
  inline-size: 34px; block-size: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  display: grid; place-items: center; color: var(--ink-850); cursor: pointer;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.duyuru__kapat:hover { background: var(--bg-3); color: var(--ink-900); }

/* Görselde kutu sabit oranlı: yüklenirken sayfa zıplamasın. */
.duyuru__medya { aspect-ratio: 16 / 10; background: var(--ink-950); }
.duyuru__medya img {
  inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
}
/* Videoda oran SABİT DEĞİL: duyuru videosu çoğu zaman telefonla dikey
   çekiliyor, 16/10 kutuya `contain` ile konunca iki yanı kocaman siyah
   kalıyordu. Video kendi oranını korur, yüksekliği ekrana göre sınırlanır. */
.duyuru__medya--video { aspect-ratio: auto; }
.duyuru__medya--video video {
  inline-size: 100%; block-size: auto; max-block-size: min(420px, 46dvh);
  object-fit: contain; display: block; margin-inline: auto;
}

.duyuru__govde { padding: clamp(20px, 3vw, 28px); }
.duyuru__govde h2 { font-size: clamp(1.15rem, 2.4vw, 1.45rem); margin: 0; }
.duyuru__govde p { margin-block-start: 10px; font-size: .94rem; color: var(--text-2); }
.duyuru__alt { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 20px; }
.duyuru__alt form { margin: 0; }


.sohbet__pencere[hidden] { display: none; }
.sohbet__pencere {
  /* Pencere bilerek temanın TERSİ: açık temada koyu, koyu temada açık.
     Böylece sayfanın üstünde ayrı bir yüzey gibi durur, içine karışmaz.
     light-dark() açık temada ilk değeri verir — ilk değerler koyu. */
  --p-bg:     oklch(21% .032 275);
  --p-fg:     oklch(94% .008 275);
  --p-line:   oklch(31% .03 275);
  --p-bot:    oklch(27% .03 275);
  --p-sessiz: oklch(68% .02 275);
  --p-giris:  oklch(26% .03 275);

  inline-size: min(360px, calc(100vw - 36px));
  max-block-size: min(560px, calc(100dvh - 210px));
  /* Akış boşken (canlı görüşme beklerken ya da ilk yanıt gelmeden)
     pencere yüksekliği içerikten geliyordu ve başlıkla yazma alanı
     arasında 28 piksellik bir şerit kalıyordu. */
  min-block-size: min(420px, calc(100dvh - 240px));
  margin-block-end: 64px;            /* düğme yığınının üstünde dursun */
  display: grid; grid-template-rows: auto 1fr auto auto auto;
  background: var(--p-bg); color: var(--p-fg);
  border: 1px solid var(--p-line);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 56px oklch(15% .04 275 / .42);
  animation: sohbet-gir .22s var(--ease-out);
}
@keyframes sohbet-gir { from { opacity: 0; translate: 0 12px; } }
/* Tam ekranda kaydırma yok: pencere ekranı birebir doldurmalı. */
@keyframes sohbet-gir-tam { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sohbet__pencere { animation: none; } }

/* Başlık her iki temada da marka mavisi: koyu panelde koyu başlık
   ayırt edilmiyordu, ayrıca karşılama balonuyla aynı dili konuşuyor. */
.sohbet__ust {
  display: flex; align-items: center; gap: 9px; padding: 13px 14px;
  background: linear-gradient(152deg, oklch(53% .16 275), oklch(43% .16 275));
  color: #fff;
}
.sohbet__nokta { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #34d399; flex: none; }
.sohbet__ad { flex: 1; font-size: .92rem; }
.sohbet__kapat { color: #fff; opacity: .75; display: grid; place-items: center; }
.sohbet__kapat:hover { opacity: 1; }

.sohbet__akis {
  padding: 14px; overflow-y: auto; display: grid; gap: 10px;
  align-content: start; overscroll-behavior: contain;
  /* Izgara öğesinin varsayılan alt sınırı `auto`: 1fr satırı içerik kadar
     büyüyor ve overflow-y: auto hiç devreye girmiyordu. 0 vermek satırın
     küçülmesine, dolayısıyla akışın gerçekten kaydırılmasına izin verir.
     Boş pencerenin ince bir şeride inmemesi ise pencerenin kendi
     min-block-size değeriyle çözülüyor. */
  min-block-size: 0;
}
.sohbet__balon {
  max-inline-size: 84%; padding: 10px 13px; border-radius: 14px;
  font-size: .87rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}
.sohbet__balon--bot {
  justify-self: start; border-end-start-radius: 4px;
  background: var(--p-bot); color: var(--p-fg);
}
.sohbet__balon--ben {
  justify-self: end; border-end-end-radius: 4px;
  background: var(--brand-700); color: #fff;
}
.sohbet__balon a { text-decoration: underline; }
.sohbet__balon--yaziyor { display: flex; gap: 4px; align-items: center; }
.sohbet__balon--yaziyor i {
  inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor;
  opacity: .45; animation: sohbet-zipla 1s infinite;
}
.sohbet__balon--yaziyor i:nth-child(2) { animation-delay: .15s; }
.sohbet__balon--yaziyor i:nth-child(3) { animation-delay: .3s; }
@keyframes sohbet-zipla { 50% { opacity: 1; translate: 0 -3px; } }
@media (prefers-reduced-motion: reduce) { .sohbet__balon--yaziyor i { animation: none; } }

/* Yanıt bulunamadığında çıkan eylem düğmeleri (yetkiliye bağlan / ara). */
.sohbet__eylem { display: flex; flex-wrap: wrap; gap: 7px; justify-self: start; max-inline-size: 92%; }
.sohbet__eylem-dugme {
  font-size: .82rem; font-weight: 580; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--p-line); color: var(--p-fg); background: transparent;
  cursor: pointer; text-align: start; transition: background .15s, border-color .15s;
}
.sohbet__eylem-dugme:hover { border-color: var(--brand-600); background: var(--p-bot); }
.sohbet__eylem-dugme--ana {
  background: var(--brand-700); border-color: var(--brand-700); color: #fff;
}
.sohbet__eylem-dugme--ana:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

/* --- sohbet içindeki talep formu ---
   Alanlar /teklif sayfasıyla birebir aynı: panele düşen kayıt iki yoldan
   da aynı görünsün. Serbest metinden ad/telefon ayıklamaya göre hem daha
   güvenilir hem de firma/çözüm/bütçe gibi alanları da getiriyor. */
.sohbet__talep {
  display: grid; gap: 8px; padding: 13px;
  border: 1px solid var(--p-line); border-radius: 14px;
  background: var(--p-bot); color: var(--p-fg);
  border-end-start-radius: 4px;
}
.sohbet__alan { display: grid; gap: 3px; }
.sohbet__alan > span {
  font-size: .7rem; font-weight: 620; letter-spacing: .04em;
  text-transform: uppercase; color: var(--p-sessiz);
}
.sohbet__talep input,
.sohbet__talep select,
.sohbet__talep textarea {
  inline-size: 100%; font: inherit; font-size: .85rem;
  padding: 8px 10px; border-radius: 9px;
  /* Kutu zemini kartın değil PENCERENİN zemini: --p-giris karta fazla
     yakın kaldığı için alanlar görünmüyordu (ölçüldü: 0.26'ya karşı 0.27). */
  border: 1px solid var(--p-line); background: var(--p-bg); color: var(--p-fg);
}
.sohbet__talep textarea { resize: vertical; min-block-size: 46px; }
.sohbet__talep ::placeholder { color: var(--p-sessiz); }
.sohbet__talep :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--brand-600); outline-offset: 1px; border-color: var(--brand-600);
}
/* Bal küpü: insana görünmez, ekran okuyucuya da kapalı (aria-hidden). */
.sohbet__kupe {
  position: absolute !important; inline-size: 1px !important; block-size: 1px !important;
  padding: 0 !important; border: 0 !important; overflow: hidden; clip-path: inset(50%);
}
.sohbet__onay {
  display: flex; gap: 8px; align-items: start;
  font-size: .76rem; line-height: 1.5; color: var(--p-sessiz);
}
.sohbet__onay input { inline-size: auto; flex: none; margin-block-start: 2px; accent-color: var(--brand-600); }
.sohbet__onay a { color: inherit; text-decoration: underline; }
.sohbet__talep-hata {
  font-size: .78rem; font-weight: 560; color: var(--danger);
}
.sohbet__talep-hata[hidden] { display: none; }
.sohbet__talep button[type="submit"] { justify-self: stretch; text-align: center; }

/* NOT: pencereye color-scheme VERİLMEZ. Verilince pencerenin kendi
   --p-* değişkenleri light-dark() ile çözüldüğü için tersine dönüyor ve
   koyu pencere bembeyaz oluyordu (denendi, geri alındı). Tarayıcının
   açılır listesi sayfanın şemasında kalır; okunaklı, sorun değil. */

.sohbet__oneri { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.sohbet__oneri:empty { display: none; }
.sohbet__oneri button {
  font-size: .78rem; padding: 7px 11px; border-radius: 999px;
  border: 1px solid var(--p-line); color: var(--p-fg); background: transparent;
  text-align: start; transition: border-color .15s, background .15s;
}
.sohbet__oneri button:hover { border-color: var(--brand-600); background: var(--p-bot); }

.sohbet__form label { position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sohbet__form { display: flex; gap: 8px; padding: 11px; border-block-start: 1px solid var(--p-line); }
.sohbet__form input {
  flex: 1; min-inline-size: 0; padding: 10px 13px; border-radius: 999px;
  border: 1px solid var(--p-line); background: var(--p-giris);
  font: inherit; font-size: .87rem; color: var(--p-fg);
}
.sohbet__form input::placeholder { color: var(--p-sessiz); }
.sohbet__form input:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 1px; }
.sohbet__form button {
  inline-size: 40px; block-size: 40px; flex: none; border-radius: 50%;
  background: var(--brand-700); color: #fff; display: grid; place-items: center;
}
.sohbet__form button:disabled { opacity: .45; }

.sohbet__dip {
  margin: 0; padding: 0 14px 11px; font-size: .7rem; line-height: 1.5;
  color: var(--p-sessiz);
}
.sohbet__dip a { text-decoration: underline; color: inherit; }
.sohbet__uyari {
  margin: 0; padding: 9px 14px; font-size: .76rem; text-align: center;
  background: oklch(80% .13 85 / .22); color: oklch(88% .1 88);
}

@media (width < 640px) {
  .sohbet { inset-inline: 12px; inset-block-end: 12px; }
  .sohbet__pencere { inline-size: 100%; max-block-size: calc(100dvh - 160px); }

  /* Telefonda sohbet AÇIKKEN tam ekran bir sayfa gibi davranır.
     350 piksellik kutuda sekiz alanlı talep formu iki ekran boyu
     kalıyordu; klavye açılınca okunabilir alan iyice daralıyordu.
     z-index yüzen düğme yığınının (70) üstünde: perde onları örter,
     kapatma başlıktaki düğmeyle yapılır. */
  .sohbet.is-acik { inset: 0; z-index: 80; }
  .sohbet.is-acik .sohbet__pencere {
    inline-size: 100%; block-size: 100dvh; max-block-size: 100dvh;
    margin-block-end: 0; border: 0; border-radius: 0;
    /* Açılış animasyonu 12 pikselden başlıyor; tam ekranda bu, pencereyi
       aşağı itip yazı alanını ekran dışında bırakıyordu. Animasyon
       normal bildirimleri ezdiği için kaydırmasız sürüme geçiliyor. */
    animation-name: sohbet-gir-tam;
    translate: 0 0;
  }
  .sohbet.is-acik .sohbet__ust { padding-block: 16px; }
  .sohbet.is-acik .sohbet__akis { padding: 16px; }
  .sohbet.is-acik .sohbet__balon { max-inline-size: 88%; }

  /* 16 pikselin ALTINDAKİ yazı tipi iOS Safari'de odaklanınca sayfayı
     yakınlaştırıyor ve bir daha geri gelmiyor. Tüm sohbet alanları 16. */
  .sohbet__talep input,
  .sohbet__talep select,
  .sohbet__talep textarea,
  .sohbet__form input { font-size: 16px; }
  .sohbet__talep textarea { min-block-size: 64px; }

  /* Parmakla basılabilir hedefler (en az ~44 piksel). */
  .sohbet__kapat { inline-size: 40px; block-size: 40px; }
  .sohbet__form { padding: 10px 12px; }
  .sohbet__form button { inline-size: 46px; block-size: 46px; flex: none; }
  .sohbet__eylem-dugme { padding-block: 12px; }
  .sohbet__talep button[type="submit"] { padding-block: 14px; }
  .sohbet__onay { font-size: .82rem; }
  .sohbet__onay input { inline-size: 20px; block-size: 20px; }

  /* Karşılama balonu dar ekranda da yüzen düğmelerin yanına sığsın. */
  .sohbet__selam-mesaj { -webkit-line-clamp: 3; }
}

/* Telefonda sohbet açıkken arkadaki sayfa kaymasın: perdenin altında
   gezinmek kafa karıştırıyor, klavye açılınca da zıplıyordu. */
body.sohbet-kilit { overflow: hidden; }

/* ------------------------------------------------- S.S.S. sayfası */
.sss-ara { margin-block-end: 26px; }
.sss-ara input {
  inline-size: 100%; padding: 14px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-size: .95rem; color: inherit;
}
.sss-ara input:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.sss-ara__sonuc { margin: 9px 0 0; font-size: .82rem; color: var(--text-3); min-block-size: 1.2em; }

.sss-kategori { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 38px; }
.sss-kategori a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  font-size: .85rem; font-weight: 540; transition: border-color .15s, color .15s;
}
.sss-kategori a:hover { border-color: var(--brand-600); color: var(--brand-600); }
.sss-kategori a span {
  font-size: .72rem; font-variant-numeric: tabular-nums;
  color: var(--text-2); background: var(--bg-3);
  padding: 1px 7px; border-radius: 999px;
}

.sss-grup { margin-block-end: 42px; scroll-margin-block-start: 110px; }
.sss-grup[hidden] { display: none; }
.sss-grup__baslik {
  display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
  font-size: 1.22rem; margin-block-end: 16px;
  padding-block-end: 10px; border-block-end: 1px solid var(--line);
}
.sss-grup__adet { font-size: .78rem; font-weight: 500; color: var(--text-3); }
.sss-bos { text-align: center; padding: 40px 20px; color: var(--text-3); }
.sss-bos a { text-decoration: underline; }