/* kanaworking — palet: yeşil #013334 + sarı nokta #FFC72C (logo seti, KANAWORKING_LOGO/); font Inter (kendi sunucumuzdan) */
@font-face {
  font-family: "Inter";
  src: url("inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --brand: #013334;          /* koyu bölüm, açık zeminde birincil buton ve vurgu yazısı */
  --brand-hover: #0B4647;
  --accent: #FFC72C;         /* yalnız nokta, küçük işaret, koyu zeminde CTA dolgusu; beyaz üstünde yazı olmaz */
  --ink: #0A0A0A;
  --ink-2: #5B6B6A;          /* beyaz üstünde 5,6:1 */
  --ink-2-dark: #A9C2BF;     /* yeşil üstünde 7,3:1 */
  --bg: #FFFFFF;
  --bg-soft: #F1F5F4;
  --line: #D9E3E1;
  --line-2: var(--ink-2);   /* kontrol kutusu ve girdi kenarı: en az 3:1 (WCAG 1.4.11) */
  --line-dark: rgba(255, 255, 255, .14);
  --err: #B42318;
  --r: 20px;
  --wrap: 1160px;
  --gut: 24px;
  --nav-h: 78px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 1023px) { html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; color: inherit; text-wrap: balance; }
h2 { font-size: clamp(30px, 4.5vw, 46px); line-height: 1.1; letter-spacing: -0.015em; }
h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
::selection { background: rgba(255, 199, 44, .5); color: var(--ink); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap.narrow { max-width: var(--wrap); }
.wrap.narrow .faq { max-width: 812px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* başlık sonu noktası: açık zeminde yeşil, koyu zeminde sarı (Fable D1.9) */
.dot { font-style: normal; color: var(--brand); }
.on-dark .dot { color: var(--accent); }

/* üst etiketler HTML'de büyük harf yazılır; CSS dönüşümü yok (Türkçe İ/ı güvenliği) */
.eyebrow { margin-bottom: 16px; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--brand); }
.on-dark .eyebrow { color: #fff; }
.kicker { margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--ink-2); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: var(--accent); }

/* metin linki */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-weight: 500;
  color: var(--brand);
  text-decoration: none;
}
.tlink .tl { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.tlink .chev { display: inline-block; transition: transform .2s var(--ease-out); }
.tlink:hover .chev { transform: translateX(2px); }
.on-dark .tlink { color: #fff; }


/* ========== hareket modülü: butonlar (21st #38278) — kaynak fx/button.css ========== */
/* ---------- butonlar ----------
   dolgu: .btn-primary (açık zemin), .btn-accent (koyu zemin) — fareyle girişte tek parlama
   çizgi: .btn-line (açık zemin), .btn-ghost (koyu zemin) — parlama yok
   hepsi: basınca küçülür, odak halkası, sondaki .chev hover'da 2px kayar
   işaretleme: <a class="btn btn-primary" href="#">Etiket <span class="chev" aria-hidden="true">›</span></a> */
.btn {
  --kw-spring: cubic-bezier(.25,.23,.13,1);  /* yay yedeği: linear() yoksa */
  position: relative;
  isolation: isolate;                        /* parlama yazının altında kalır */
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.011em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
/* --kw-sheen: parlamanın tepe opaklığı; yeşilde beyaz yazı en kötü anda ≥7:1, sarıda karşıtlık artar */
.btn-primary { --kw-sheen: .14; background-color: var(--brand); color: #fff; }
.btn-accent  { --kw-sheen: .5; background-color: var(--accent); color: var(--brand); }
/* çizgi gölgeyle: Chrome 1.5px kenarı 1px'e yuvarlıyor */
.btn-line    { --kw-edge: inset 0 0 0 1.5px var(--brand); color: var(--brand); }
.btn-ghost   { --kw-edge: inset 0 0 0 1.5px #fff; color: #fff; }
.btn-line,
.btn-ghost   { background-color: transparent; box-shadow: var(--kw-edge); }
.btn .chev   { display: inline-block; }

/* basış: hemen küçülür (azaltılmış harekette de, ama yaysız) */
.btn:active { transform: scale(.97); }

/* odak: açık zeminde marka rengi + 2px beyaz boşluk, koyu zeminde sarı */
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: var(--kw-edge, 0 0 #0000), 0 0 0 2px var(--bg); }
.on-dark .btn:focus-visible { outline-color: var(--accent); box-shadow: var(--kw-edge, 0 0 #0000); }

/* yüksek karşıtlık: dolgu ve gölge kaybolur, kenar kalsın */
@media (forced-colors: active) {
  .btn { padding: 10.5px 20.5px; border: 1.5px solid; }
}

/* iOS: basış geri bildirimi bizde (button.js), gri dokunma kutusu kapalı */
.kw-tap .btn { -webkit-tap-highlight-color: transparent; }

@media (hover: hover) {
  .btn-primary:hover { background-color: var(--brand-hover); }
  .btn:hover .chev { transform: translateX(2px); }
}

/* hareket yalnız izin varsa; yoksa durum anında değişir */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform .3s var(--kw-spring); }          /* bırakış: ~300 ms, sekmesiz */
  .btn:active { transition: transform .08s var(--ease-out); }  /* basış: ≤100 ms */
  .btn .chev { transition: transform .2s var(--ease-out); }
}
/* kritik sönümlü yay (ω≈24/sn), 300 ms'ye örneklenmiş */
@supports (transition-timing-function: linear(0, 1)) {
  .btn { --kw-spring: linear(0, .026 3.4%, .121 8.2%, .504 23.4%, .667 31.6%, .791 40.4%, .884 50.7%, .95 64.1%, .99 85%, 1); }
}

/* parlama: fareyle her girişte bir kez, ~700 ms; yarıda çıkılırsa yerinde söner, zıplamaz */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn-primary::before,
  .btn-accent::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.3) 39%, rgba(255,255,255,.85) 46%, #fff 50%, rgba(255,255,255,.85) 54%, rgba(255,255,255,.3) 61%, rgba(255,255,255,0) 70%);
    opacity: 0;
    transform: translateX(-85%);
    transition: opacity .15s linear, transform 0s .15s;  /* çıkış: önce söner, sonra görünmeden başa döner */
  }
  .btn-primary:hover::before,
  .btn-accent:hover::before {
    opacity: var(--kw-sheen);
    transform: translateX(85%);
    transition: opacity .1s linear, transform .7s cubic-bezier(.3,.1,.4,1);
  }
}

/* ========== hareket modülü: başlık girişi (21st #23864) — kaynak fx/blurup.css ========== */
/* Blur Out Up — kelime 6 px bulanık, 10 px aşağıdan, 28 ms arayla 0,56 sn'de yerine oturur (21st #23864).
   Kelimeler yalnız JS böldükten sonra (.is-split) gizlenir. Yükleme başlığı bölünene dek gizli;
   JS hiç çalışmazsa 2 sn sonra kendiliğinden açılır. JS kapalıyken .js yok: hep görünür. */
[data-split] { --bu-dur: .56s; --bu-step: 28ms; --bu-ease: cubic-bezier(.22, 1, .36, 1); --bu-y: 10px; --bu-blur: 6px; }

@media screen {
  .js [data-split="load"]:not(.is-split) { opacity: 0; animation: kw-bu-show .2s 2s forwards; }

  .is-split .w { display: inline-block; white-space: nowrap; opacity: 0; }
  /* bitişik parça (kelimedeki nokta, etiketle bölünmüş kelime): satır kırılımı değişmesin diye inline; kaymaz, yalnız netleşir */
  .is-split .wj, .is-split .w .w { display: inline; }
  .is-split.is-lift .w { opacity: 1; animation: kw-bu-in var(--bu-dur) var(--bu-ease) calc(var(--i, 0) * var(--bu-step)) both; }
  .is-split.is-lift:not(.is-done) .w { will-change: opacity, transform, filter; }
  .is-split.is-done .w { animation: none; }
}
@keyframes kw-bu-show { to { opacity: 1; } }
/* geçiş değil anahtar kare: Chrome, font önden yüklenirken sayfa açılışındaki geçişleri hiç başlatmıyor */
@keyframes kw-bu-in {
  from { opacity: 0; transform: translateY(var(--bu-y)); filter: blur(var(--bu-blur)); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* azaltılmış hareket: aynı animasyon kaymasız, bulanıksız, arasız 0,15 sn opaklık.
   Yalnız değişkenler değişir; ayar yolda değişirse animasyon baştan başlamaz, yalnız ileri gider. */
@media (prefers-reduced-motion: reduce) {
  [data-split] { --bu-dur: .15s; --bu-step: 0ms; --bu-y: 0px; --bu-blur: 0px; }
  /* azaltılmış harekette hiçbir başlık gizli başlamaz (görünür olmayı beklemez) */
  .js [data-split]:not(.is-split), .is-split .w, .is-split.is-lift .w { opacity: 1; animation: none; }
}

/* ========== hareket modülü: kart ışığı (21st #35180) — kaynak fx/spotlight.css ========== */
/* Spotlight: imleci izleyen yumuşak ışık + kenar halkası.
   Kart: class="spot" (yeşil kart: "spot spot-dark"); JS: kwSpotlight(".spot").
   Yalnız fare/kalem; dokunmatikte hiçbir şey çizilmez. Işık içeriğin altında kalır.
   Kartın ::before (ışık) ve ::after (halka) öğelerini kullanır. Sarı yok. */

.spot {
  position: relative;
  isolation: isolate;                          /* ışık kartın içinde, içeriğin altında */
  --spot-r: 320px;                             /* ışık yarıçapı */
  --spot-rgb: 1, 51, 52;                       /* --brand */
  --spot-a: .06;                               /* ışık gücü */
  --spot-edge: rgba(var(--spot-rgb), .2);      /* sabit kenar */
}
.spot-dark {
  --spot-rgb: 255, 255, 255;
  --spot-a: .07;
}

@media (hover: hover) and (pointer: fine) {
  .spot::before,
  .spot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s var(--ease-out, cubic-bezier(.2, .8, .2, 1));
  }

  /* ışık */
  .spot::before {
    background: radial-gradient(var(--spot-r) circle at var(--mx, 50%) var(--my, 50%),
      rgba(var(--spot-rgb), var(--spot-a)), rgba(var(--spot-rgb), 0) 70%);
  }

  /* halka: 1px çerçevenin üstünde, maske yalnız kenarı bırakır */
  .spot::after {
    inset: -1px;
    padding: 1px;
    background: radial-gradient(var(--spot-r) circle at var(--mx, 50%) var(--my, 50%),
      rgba(var(--spot-rgb), .35), rgba(var(--spot-rgb), 0) 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
  /* çerçeve yok ya da taşma kırpılıyor: halka kartın içinde (JS ekler) */
  .spot-in::after { inset: 0; }

  .spot.is-lit::before,
  .spot.is-lit::after { opacity: 1; }

  /* klavye odağı: konumsuz sabit kenar */
  .spot:focus-visible::after { opacity: 1; background: var(--spot-edge); }
  .spot:has(:focus-visible)::after { opacity: 1; background: var(--spot-edge); }

  /* JS yoksa: üstüne gelince sabit kenar */
  html:not(.js) .spot::after { background: var(--spot-edge); }
  html:not(.js) .spot:hover::after { opacity: 1; }
}

/* az hareket: takip ve ışık yok, üstüne gelince yalnız sabit kenar (kısa solma) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .spot::before { content: none; }
  .spot::after { background: var(--spot-edge); transition-duration: .15s; }
}

/* ========== hareket modülü: SSS akordeonu (21st #29774) — kaynak fx/faq.css ========== */
/* SSS akordiyon (kwFaq). Renkler yalnız :root tokenları. JS yoksa her şey açık. */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { margin: 0; font: inherit; letter-spacing: normal; }

/* soru satırı: tüm satır dokunma alanı, en az 56 px; yanlara 8 px taşar (odak halkası metne değmesin) */
.faq-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-sizing: border-box; width: calc(100% + 16px); min-height: 56px; margin: 0 -8px; padding: 16px 8px;
  border: 0; border-radius: 0; background: none; color: var(--ink);
  font: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; letter-spacing: -.011em;
  text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (min-width: 768px) { .faq-btn { font-size: 1.125rem; } }
.faq-on .faq-btn { cursor: pointer; }
.faq-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; border-radius: 12px; }
@media (hover: hover) {
  .faq-on .faq-btn:hover { color: var(--brand); }
  .faq-on .faq-btn:hover .faq-ico { background: var(--line); }
}

/* artı → çarpı: iki çubuk; açıyı JS yazar (--faq-r) */
.faq-ico { display: none; }
.faq-on .faq-ico {
  position: relative; display: block; flex: none; width: 32px; height: 32px;
  border-radius: 50%; background: var(--bg-soft); transition: opacity .2s var(--ease-out);
}
.faq-on .faq-ico::before, .faq-on .faq-ico::after {
  content: ""; position: absolute; left: 9px; top: 15px; width: 14px; height: 2px;
  border-radius: 1px; background: var(--brand); transform: rotate(var(--faq-r, 0deg));
}
.faq-on .faq-ico::after { transform: rotate(calc(var(--faq-r, 0deg) + 90deg)); }
.faq-on .faq-btn:active .faq-ico { opacity: .6; transition-duration: 0s; } /* basışta anında */

/* cevap: sağ boşluk ikon kadar, metin soru sütunuyla hizalı */
.faq-a {
  display: flow-root; padding: 0 48px 20px 0;
  color: var(--ink-2); font-size: 1rem; line-height: 1.6;
}
.faq-a > :first-child { margin-top: 0; }
.faq-a > :last-child { margin-bottom: 0; }
.faq-a > * + * { margin-top: .75em; }
.faq-a > * { max-width: 52ch; } /* okunur satır boyu */
.faq-a a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.faq-on .faq-a { opacity: 0; } /* solmayı JS yapar (açılış 150 ms, azaltılmış harekette de) */
.faq-on .is-open .faq-a { opacity: 1; }

/* buton boyları (modülün tabanı 48 px) */
.btn-sm { min-height: 44px; padding: 10px 16px; font-size: 15px; }
.btn-lg { min-height: 54px; padding: 14px 26px; font-size: 17px; }
.btn-block { width: 100%; }

/* ---------- logo (lockup) ----------
   Kural: işaret yüksekliği = k yüksekliği × 1,25 (Inter k = 0,7275 em); boşluk = işaret genişliği × 0,45;
   işaret k yüksekliğine dikey ortalı. Açık zeminde işaret yeşil + yazı siyah, koyu zeminde ikisi beyaz; nokta hep sarı. */
.lockup { display: inline-block; padding-block: max(0px, calc((44px - 1em) / 2)); font-size: var(--lk, 33px); line-height: 1; color: var(--ink); white-space: nowrap; }
.lk-mark { display: inline-block; width: .683em; height: .9094em; margin-right: .2475em; vertical-align: -.0909em; fill: currentColor; color: var(--brand); }
.lk-word { font-weight: 400; letter-spacing: -0.02em; font-feature-settings: normal; font-variation-settings: "opsz" 18; }
.lk-word b { font-weight: 700; }
.lk-word i { font-style: normal; font-weight: 700; color: var(--accent); }
.on-dark .lockup, .on-dark .lk-mark { color: #fff; }

/* ---------- nav: yarı saydam katman, içerik altından akar ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.nav.is-scrolled { border-bottom-color: rgba(1, 51, 52, .1); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav { background: #fff; } }
@media (prefers-reduced-transparency: reduce) { .nav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.nav-links { display: flex; gap: 32px; font-size: 15px; font-weight: 500; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta .l-short { display: none; }

/* ---------- hero: metin odaklı, ortalı ---------- */
.hero { display: flex; align-items: center; min-height: min(calc(72vh - var(--nav-h)), 700px); padding: 64px 0 56px; text-align: center; }
.hero-in { display: flex; flex-direction: column; align-items: center; }
.hero-title { font-size: clamp(38px, 7vw, 68px); line-height: 1.05; letter-spacing: -0.02em; }
.hero-title .hl { color: var(--brand); }
.lead { max-width: 36em; margin-top: 24px; font-size: clamp(17px, 1.5vw, 19px); color: var(--ink-2); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 32px; }
.hero-price { margin-top: 20px; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hero-price b { font-weight: 600; color: var(--ink); }

/* ---------- bölümler ---------- */
.sec { padding: 112px 0; }
.sec.soft { background: var(--bg-soft); }
.sec.dark { background: var(--brand); color: #fff; }
.sec-head { max-width: 760px; margin-bottom: 48px; }
.sec-head .sub { max-width: 54ch; margin-top: 16px; font-size: 18px; color: var(--ink-2); }
.on-dark .sec-head .sub { color: var(--ink-2-dark); }
.h2-pre { margin-bottom: 10px; font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2); }
.on-dark .h2-pre { color: var(--ink-2-dark); }

/* görünme: bir kez, 0,4 sn opaklık + 8 px; JS yoksa ya da azaltılmış harekette hiç gizlenmez */
@media screen {
  .js .reveal { opacity: 0; transform: translateY(8px); }
  .js .reveal.is-in { opacity: 1; transform: none; transition: opacity .4s var(--ease-out) calc(var(--d, 0) * 60ms), transform .4s var(--ease-out) calc(var(--d, 0) * 60ms); }
  .js:not(.fx-ready) .reveal { animation: kw-show 0s 2.5s forwards; }
}
@keyframes kw-show { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* onay işaretli liste: yeşil daire, sarı tik */
.ticks { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.ticks li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.5 2.5 5.1-5.6' fill='none' stroke='%23FFC72C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.ticks.sm li { font-size: 15px; }

/* ---------- eksik kontrolü ---------- */
.gaps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gap {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 88px;
  padding: 20px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .3s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.gap:hover { border-color: var(--line-2); }
.gap:active { transform: scale(.985); transition-duration: .2s, .2s, .08s; }
.gap.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.gap-box { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1.5px solid var(--line-2); border-radius: 7px; transition: background .2s, border-color .2s; }
.gap-box svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .25s var(--ease-out); }
.gap.is-on .gap-box { background: var(--brand); border-color: var(--brand); }
.gap.is-on .gap-box svg { stroke-dashoffset: 0; transition-delay: .05s; }
.gap-txt { display: grid; grid-template-rows: auto 1fr; align-content: start; transition: grid-template-rows .35s var(--ease-out); }
.js .gap-txt { grid-template-rows: auto 0fr; }
.js .gap.is-on .gap-txt { grid-template-rows: auto 1fr; }
.gap-txt b { font-size: 16.5px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.gap-txt small { overflow: hidden; min-height: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); transition: opacity .25s; }
.gap-txt small::before { content: ""; display: block; height: 8px; }
.js .gap-txt small { opacity: 0; }
.js .gap.is-on .gap-txt small { opacity: 1; transition-delay: .08s; }
/* JS yokken işaretleme çalışmaz: kutu ve sonuç çubuğu gizli, çözümler açık */
html:not(.js) .gap-box, html:not(.js) .gap-result { display: none; }
@media (prefers-reduced-motion: reduce) {
  .gap-txt, .gap-box svg { transition: none; }
}
.gap-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  padding: 18px 18px 18px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.gap-say { font-size: 16px; color: var(--ink-2); }
.gap-num { margin-right: 4px; font-size: 18px; font-weight: 600; color: var(--ink); }
#gap-n { display: inline-block; min-width: .7em; color: var(--brand); font-variant-numeric: tabular-nums; }

/* ---------- hizmetler ---------- */
.card { position: relative; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.card h3 + p, .card .svc-main-txt > p:not(.kicker) { margin-top: 12px; color: var(--ink-2); }
.svc-main { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: center; margin-bottom: 20px; padding: 40px; }
.svc-main h3 { font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -0.02em; }
.svc-main-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; background: var(--bg-soft); border-radius: 16px; }
.svc-price { font-size: 17px; color: var(--ink-2); }
.svc-price b { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.svc-price span { display: block; margin-top: 2px; font-size: 15px; }
.svc-main-side .btn { margin-top: 8px; }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc-grid h3 { font-size: 21px; }
.svc-grid .card h3 + p.svc-out { color: var(--ink); font-weight: 500; }

/* ---------- fiyat ---------- */
.price { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.price .sec-head { margin-bottom: 0; }
.price-card { padding: 44px 40px 36px; text-align: center; color: #fff; background: var(--brand); border-radius: 24px; }
.price-tag { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--ink-2-dark); }
.price-num { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 18px; }
.price-num b { font-size: clamp(56px, 6vw, 76px); font-weight: 600; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.price-num span { font-size: 18px; color: var(--ink-2-dark); }
.price-term { margin-top: 12px; font-size: 17px; font-variant-numeric: tabular-nums; }
.price-card .btn { margin-top: 28px; }
.price-note { margin-top: 18px; font-size: 14px; color: var(--ink-2-dark); }

/* ---------- neden ---------- */
.why { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-dark); }
.why-i { padding: 32px 32px 0 0; }
.why-i + .why-i { padding-left: 32px; border-left: 1px solid var(--line-dark); }
.why-n { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--accent); font-variant-numeric: tabular-nums; }
.why-i h3 { margin-top: 14px; color: #fff; }
.why-i p { margin-top: 10px; font-size: 16px; color: var(--ink-2-dark); }

/* ---------- süreç ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.step { padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.step-n { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--brand); font-variant-numeric: tabular-nums; }
.step h3 { margin-top: 14px; font-size: 21px; }
.step ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.step li { position: relative; padding-left: 16px; font-size: 15px; color: var(--ink-2); }
.step li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.live { display: block; margin-top: 36px; font-size: 15px; color: var(--ink-2); }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: .1em; border-radius: 50%; background: var(--brand); }

/* ---------- iletişim ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-l .sub { max-width: 34em; margin-top: 16px; font-size: 18px; color: var(--ink-2); }
.contact-l .btn { margin-top: 28px; }
.contact-info { display: grid; gap: 16px; margin: 36px 0 0; }
.contact-info dt { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.contact-info dd { margin: 2px 0 0; font-size: 17px; }
.contact-info dd a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.form { display: grid; gap: 14px; padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.form-title { margin-bottom: 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.form label { display: grid; gap: 8px; font-size: 15px; font-weight: 500; }
.form input, .form textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font-size: 17px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.form textarea { min-height: 120px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--ink-2); opacity: 1; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(1, 51, 52, .16); }
.form .is-err { border-color: var(--err); }
.form .is-err:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .16); }
.field-err { display: none; margin-top: -6px; font-size: 14px; color: var(--err); }
.field-err.is-on { display: block; }
.form-note { font-size: 14px; color: var(--ink-2); }

/* ---------- footer ---------- */
.foot { padding: 72px 0 28px; color: #fff; background: var(--brand); }
.foot-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; align-items: start; }
.foot-brand p { margin-top: 18px; font-size: 15px; color: var(--ink-2-dark); }
.foot-nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 32px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.foot-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-cta { display: grid; justify-items: start; gap: 4px; }
.foot-cta .btn { margin-bottom: 8px; }
.foot-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; font-size: 14px; color: var(--ink-2-dark); background: linear-gradient(var(--line-dark), var(--line-dark)) center top / calc(100% - 2 * var(--gut)) 1px no-repeat; }

/* ---------- mobil sabit çubuk + masaüstü yüzen buton ---------- */
.mbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-top: 1px solid rgba(1, 51, 52, .1);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .35s cubic-bezier(.8, 0, .8, .2), visibility 0s .35s;  /* çıkış: girişin aynası */
}
.mbar.is-on { transform: none; visibility: visible; transition: transform .35s var(--ease-out); }
.mbar-txt { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mbar-txt b { font-weight: 600; color: var(--ink); }
.mbar .btn { flex: none; }
@media (prefers-reduced-transparency: reduce) { .mbar { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .mbar { transform: none; opacity: 0; transition: opacity .2s, visibility 0s .2s; }
  .mbar.is-on { opacity: 1; transition: opacity .2s; }
}
.wa-float { display: none; }
@media (min-width: 1024px) {
  .mbar { display: none; }
  .wa-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 60;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    color: #fff;
    background: var(--brand);
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85), 0 12px 28px -12px rgba(1, 51, 52, .55);
    transition: transform .3s var(--ease-out), background .2s, opacity .2s, visibility 0s;
  }
  .wa-float:hover { background: var(--brand-hover); }
  .wa-float:active { transform: scale(.94); transition-duration: .08s; }
  .js .wa-float.is-off { opacity: 0; visibility: hidden; transition: transform .3s var(--ease-out), background .2s, opacity .2s, visibility 0s .2s; }
  .wa-float:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand); }
}

/* ---------- duyarlı ---------- */
@media (max-width: 1060px) {
  .gaps, .svc-grid, .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --gut: 20px; --nav-h: 68px; }
  .nav .lockup { --lk: 28px; }
  .nav-links { display: none; }
  .sec { padding: 88px 0; }
  .svc-main { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .price { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .price .sec-head { display: contents; }
  .price-card { margin-top: 28px; }
  .price .ticks { order: 1; margin-top: 28px; }
  .price-card, .svc-main-side { max-width: 520px; }
  .why { grid-template-columns: 1fr; }
  .why-i, .why-i + .why-i { padding: 26px 0; border-left: 0; }
  .why-i + .why-i { border-top: 1px solid var(--line-dark); }
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  :root { --gut: 16px; --nav-h: 64px; }
  .nav .lockup { --lk: 26.4px; }
  .nav-cta .l-full { display: none; }
  .nav-cta .l-short { display: inline; }
  .hero { min-height: auto; padding: 48px 0 44px; }
  .lead { margin-top: 20px; }
  .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 4px; margin-top: 28px; }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas .tlink { justify-content: center; }
  .gaps, .svc-grid, .steps { grid-template-columns: 1fr; }
  .sec { padding: 64px 0; }
  .sec-head { margin-bottom: 32px; }
  .sec-head .sub, .contact-l .sub { font-size: 17px; }
  .gap { min-height: 0; padding: 18px 16px; }
  .gap-result { flex-direction: column; align-items: stretch; padding: 18px 16px; }
  .gap-result .btn { width: 100%; }
  .card, .svc-main { padding: 22px; }
  .svc-main-side { padding: 20px; }
  .price-card { padding: 32px 22px 26px; }
  .contact-l .btn { width: 100%; }
  .form { padding: 22px 18px; }
  .foot { padding: 56px 0 calc(28px + env(safe-area-inset-bottom)); }
  .foot-in { grid-template-columns: 1fr; gap: 28px; }
  .foot-bottom { flex-direction: column; gap: 6px; }
}

/* ---------- inceleme turu 1 düzeltmeleri (Fable onaylı, 4 Kas) ---------- */
.nav-cta { flex: none; }
.nav-links a[aria-current] { color: var(--ink); }
.h2-pre .dot { color: inherit; }
.soft .faq-on .faq-ico { background: #fff; }
@media (min-width: 901px) {
  .nav-in { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav .lockup { justify-self: start; }
  .nav-cta { justify-self: end; }
}
@media (min-width: 621px) { #gap-cta { min-width: 251px; } }
@media (max-width: 374px) { .mbar-txt { font-size: 14px; } }
@media (max-width: 359px) {
  .nav .wrap { padding-inline: 12px; }
  .nav-cta { font-size: 14px; padding-inline: 8px; }
  .hero .eyebrow { letter-spacing: .06em; }
}
@media (forced-colors: active) {
  .faq-on .faq-ico::before, .faq-on .faq-ico::after { background: CanvasText; }
  .gap.is-on .gap-box { background: Highlight; border-color: Highlight; }
  .gap-box svg { stroke: HighlightText; }
  .form input:focus, .form textarea:focus { outline: 2px solid; }
}

/* ---------- referanslar (Fable kararı, 4 Kas) — üretici, veri ve notlar: KANA_REFERANS/ ----------
   Linkli kart: bütün kart tek <a> (yeni sekme); linksiz kart <article>, ışıksız ve oksuz.
   İlk 6 kart görünür, gerisi (li.ref-more) düğmeyle açılır; JS yokken hepsi açık, düğme gizli. */
.ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.ref-grid > li { display: flex; }
.card.ref { display: flex; flex: 1; flex-direction: column; padding: 0; color: inherit; }
.ref-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; background: var(--bg-soft); }
.ref-shot > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ref-phone { position: absolute; right: 12px; bottom: 12px; width: 26%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 0 0 2px #fff; }
.ref-txt { padding: 18px 20px 20px; }
.ref .kicker { margin-bottom: 6px; font-size: 12px; }
.ref h3 { font-size: 20px; }
.ref .ref-link { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 15px; font-weight: 500; color: var(--brand); overflow-wrap: anywhere; }
.ref-arr { flex: none; width: 12px; height: 12px; transition: transform .2s var(--ease-out); }
.ref .ref-note { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.ref .ref-ortak { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
@media (hover: hover) {
  a.ref:hover .ref-link { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
  a.ref:hover .ref-arr { transform: translate(2px, -2px); }
}
@media (prefers-reduced-motion: reduce) { .ref-arr { transition: none; } }
.js .ref-grid:not(.is-open) .ref-more { display: none; }
.ref-act { display: flex; justify-content: center; margin-top: 32px; }
.ref-act[hidden] { display: none; }
@media (max-width: 1060px) {
  .ref-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .ref-grid { grid-template-columns: 1fr; gap: 16px; }
  .ref-act .btn { width: 100%; }
}