/* ==========================================================================
   style.css — Qoder ana sayfa klonu (Türkçe içerik)
   Referans: .neta/sources/image-c803cbd5.png + https://qoder.com/ canlı ölçüm
   Sıra: temel → topbar → header → hero → ürün ekranı → sekmeler
         → kartlar → kurumsal → footer → responsive
   ========================================================================== */

/* ---------- 1. Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* Kaydırma çubuğu: saydam ray, ince nört tutamaç (admin talebi 30.10.2026) */
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 13, 12, 0.22) transparent;
}

html::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-corner {
  background: transparent;
}
html::-webkit-scrollbar-thumb {
  background: rgba(15, 13, 12, 0.22);
  border: 3px solid transparent;
  border-radius: var(--r-full);
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover {
  background-color: rgba(15, 13, 12, 0.40);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
  text-wrap: balance;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
code, pre { font-family: var(--font-mono); }

:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-3);  /* 16 → 12px: sağ/sol boşluk azaltıldı (admin, 30.10.2026) */
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -60px;
  z-index: 90;
  padding: var(--s-2) var(--s-4);
  background: var(--accent-strong);
  color: var(--fg-on-accent);
  border-radius: var(--r-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-3); }

/* ---------- 2. Butonlar ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 36px; padding: 0 var(--s-4); font-size: var(--t-sm); }

.btn--primary {
  /* qoder --ant-color-primary-btn (açık tema): #3d8c66 yerine koyu orman
     yeşili — referans karedeki Download butonu bu tondadır, beyaz yazı 7.6:1 */
  background: #255a41;
  color: var(--fg-on-accent);
}
.btn--primary:hover { background: #317052; }

.btn--outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--fg);
}
.btn--outline:hover { background: #ffffff; border-color: var(--fg-ter); }

.btn--ghost {
  background: var(--card);
  border-color: var(--line-strong);
  color: var(--fg);
}
.btn--ghost:hover { background: var(--card-02); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-weight: 500;
  color: var(--accent-strong);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.link-arrow:hover { border-color: currentColor; gap: var(--s-3); }

/* ---------- 3. Duyuru şeridi ---------- */
.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: var(--s-2) var(--s-8);
  background: var(--accent-tint);
  color: var(--accent-hover);
  font-size: var(--t-sm);
}
.topbar.is-closed { display: none; }
.topbar__track { position: relative; width: 100%; min-height: 22px; }
.topbar__msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-1);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-4) var(--ease-soft), transform var(--dur-4) var(--ease-soft);
  pointer-events: none;
}
.topbar__msg.is-active { opacity: 1; transform: none; pointer-events: auto; }
.topbar__msg a {
  color: var(--accent-hover);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.topbar__close {
  position: absolute;
  right: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--accent-hover);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.topbar__close:hover { background: rgba(44, 115, 83, 0.12); }

/* Mobil duyuru şeridi (admin 30.10.2026: "mobilde sığmıyor").
   Mesajlar absolute yığından grid yığınına geçer: satır kırılınca şerit
   büyür, metin kırpılmaz. Kapatma düğmesi sağ üstte kalır. */
@media (max-width: 860px) {
  /* Sağ dolgu kapatma düğmesinin (28px + 12px) altını temizler:
     v5 ölçümü metinSag=334 / dugmeSol=326 → 8px çakışma vardı. */
  .topbar {
    padding: var(--s-2) var(--s-7) var(--s-2) var(--s-4);
    min-height: 0;
    font-size: var(--t-xs);
  }
  .topbar__track { display: grid; min-height: 0; }
  .topbar__msg {
    position: static;
    grid-area: 1 / 1;
    inset: auto;
    justify-content: flex-start;
    text-align: left;
    line-height: 1.45;
  }
}

/* ---------- 4. Header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-head.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(242, 244, 242, 0.94);
  backdrop-filter: blur(10px);
}
.site-head__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: var(--nav-h);
}

.brand { display: inline-flex; align-items: center; gap: var(--s-2); flex: none; }
.brand__mark { color: var(--accent-strong); flex: none; }
/* header logosu: img/logo.png 2172x724 (şeffaf PNG), yüksekliğe göre ölçeklenir */
.brand__logo {
  display: block;
  height: 60px;
  width: auto;
  max-width: 100%;
  flex: none;
}
/* 860px altında logo küçülür ama okunur kalır (admin isteği 30.10.2026:
   26px "minnacık" görünüyordu → 36px). Masaüstü 60px kilitli. */
@media (max-width: 860px) {
  .brand__logo { height: 36px; }
}
@media (max-width: 380px) {
  .brand__logo { height: 34px; }
}
.brand__name {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 40;
}

.nav { flex: 1; min-width: 0; }
/* Mobil menü aksiyonları (Giriş/İndir) yalnız ≤860px'te görünür. */
.nav__actions { display: none; }
/* Menü aralığı bir tık açıldı, yazı bir tık küçültüldü (admin isteği 30.10.2026).
   Header logosu 60px kalır: .brand__logo (satır 226) DEĞİŞMEDİ. */
.nav__list { display: flex; align-items: center; gap: 10px; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  color: var(--fg-02);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover { background: var(--card-02); color: var(--fg); }
.nav__chev {
  opacity: 0.55;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* ---------- 4b. Ürün açılır menüsü ----------
   Masaüstünde hover/focus, dokunmatik ve klavyede tıklama; panel
   header'ın altına absolute yerleşir (header sticky, overflow kırpması yok). */
.nav__item { position: relative; }
.nav__item--panel { display: flex; }
.nav__trigger {
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.nav__trigger[aria-expanded="true"] { background: var(--card-02); color: var(--fg); }
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); opacity: 0.9; }

.nav__panel {
  position: absolute;
  top: calc(100% + var(--s-3));
  left: calc(var(--s-3) * -1);
  z-index: 60;
  width: 34rem;
  max-width: calc(100vw - var(--s-6));
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms var(--ease-soft), transform 160ms var(--ease-soft),
    visibility 0s linear 160ms;
}
@media (hover: hover) {
  .nav__item--panel:hover .nav__panel { opacity: 1; visibility: visible; transform: none; transition: opacity 160ms var(--ease-soft), transform 160ms var(--ease-soft), visibility 0s linear 0s; }
}
.nav__item--panel:focus-within .nav__panel,
.nav__item--panel.is-open .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 160ms var(--ease-soft), transform 160ms var(--ease-soft),
    visibility 0s linear 0s;
}
/* Hover ile açılan panelde fare trigger'dan panele geçerken boşluk
   kalmasın diye görünmez köprü. */
@media (hover: hover) {
  .nav__item--panel::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: var(--s-3);
  }
}

/* Kurumsal ve Kaynaklar panelinde sağ alanın tam ortasında marka işareti
   (admin isteği 30.10.2026). Panel kendi containing block'u (position:
   absolute, satır 277) olduğu için logo panelin sağ iç kenarına ortalanır;
   metin altına girmesin diye .nav__panel--logo sağdan boşluk ayırır. */
.nav__panel--logo { padding-right: calc(var(--s-4) + 34px + var(--s-3)); }
.nav__panel-logo {
  position: absolute;
  top: 50%;
  right: var(--s-4);
  transform: translateY(-50%);
  width: 164px;
  height: 164px;
  object-fit: contain;
  opacity: 0.9;
  pointer-events: none;
}

.nav__panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-4);
}
.nav__panel-main { display: flex; flex-direction: column; gap: var(--s-1); }
/* Sağ kolon: ajan entegrasyonu başlıkları — kart, çerçeve ve arka plan YOK. */
.nav__panel-side { display: flex; flex-direction: column; gap: var(--s-2); }
.nav__panel-title {
  margin: 0 0 var(--s-1);
  padding: 0 var(--s-2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-sec);
}

/* Masaüstü/Mobil girişleri sağ kolonla aynı dilde: kutu, çerçeve ve
   arka plan yok; hover'da yalnız başlık rengi değişir. */
.nav__card {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--s-1) var(--s-2);
  background: transparent;
}
.nav__card:hover .nav__card-head,
.nav__card:focus-visible .nav__card-head { color: var(--accent-strong); }
.nav__card-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--fg);
  transition: color var(--dur) var(--ease);
}
.nav__badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nav__card-desc {
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--fg-sec);
}

.nav__ways { display: flex; flex-direction: column; gap: 1px; margin: 0; }
.nav__panel-main .nav__panel-title--sub { margin-top: var(--s-1); }
/* Sol kolondaki liste satırları kartlarla aynı sıkılıkta; sağ kolon dokunulmaz. */
.nav__panel-main .nav__way {
  padding: var(--s-1) var(--s-2);
  color: var(--fg-sec); /* Varsayılan metin rengi */
}
/* Arka plansız liste: hover'da kutu değil, yalnız başlık rengi değişir. */
/* Tüm nav__way listelerinde varsayılan metin rengi açık tema için fg-sec (#4d4b48), hover'da accent-strong olur. */
/* Linklerin varsayılan mavisini ezmesi için specificity artırıldı. */
.nav__panel-main .nav__way {
  color: var(--fg-sec) !important;
  padding: var(--s-1) var(--s-2);
}

.nav__ways .nav__way a,
.nav__ways--plain .nav__way a {
  color: inherit;
}

.nav__ways .nav__way-name,
.nav__ways--plain .nav__way-name {
  color: inherit;
}

.nav__ways .nav__way:hover .nav__way-name,
.nav__ways .nav__way:focus-visible .nav__way-name,
.nav__ways--plain .nav__way:hover .nav__way-name,
.nav__ways--plain .nav__way:focus-visible .nav__way-name {
  color: var(--accent-strong) !important;
}
.nav__way {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: calc(var(--s-1) + 4px) var(--s-2);
  border-radius: 0;
  border: 0;
  background: transparent;
  transition: color var(--dur) var(--ease);
}
/* Satirin kendi <a>'si de kutu uretmesin: hover'da yalnizca renk. */
.nav__way a { background: transparent; border: 0; box-shadow: none; text-decoration: none; }
.nav__way:hover a,
.nav__way:hover .nav__way-desc,
.nav__way:focus-visible a,
.nav__way:focus-visible .nav__way-desc { color: var(--accent-strong); }
/* Alt menü satirlarinda hover KUTU degil METIN rengiyle belirtilir:
   arka plan, cerceve, golge ve yer degistirme YOK (admin karari 30.10.2026). */
.nav__way:hover,
.nav__way:focus-visible {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none;
  /* Odak halkasina dokunulmadi: css/style.css:43 global :focus-visible kalir. */
}
.nav__way-name { font-size: var(--t-sm); font-weight: 600; color: var(--fg); transition: color var(--dur) var(--ease); }
.nav__way-desc { font-size: var(--t-xs); line-height: 1.4; color: var(--fg-sec); margin-top: 2px; }

/* margin-left: auto → mobilde menü absolute olduğu için boşta kalan alanı
   aksiyonlar doldurur; hamburger her zaman en sağda kalır (admin isteği). */
.site-head__actions { display: flex; align-items: center; gap: var(--s-2); flex: none; margin-left: auto; }
.head-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--fg-sec);
}
.head-link:hover { color: var(--fg); background: var(--card-02); }

.icon-btn {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--fg-sec);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn { width: 36px; height: 36px; border-radius: var(--r-full); }
.icon-btn:hover { background: var(--card-02); color: var(--fg); }
/* Header'daki yuvarlak "A" hesap düğmesi kaldırıldı (30.10.2026):
   yerine İndir ile aynı dilde "Giriş" butonu (btn btn--ghost btn--sm) gelir. */

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
}
/* İkon 30.10.2026'da iki çizgiden üç çizgili SVG'ye geçti; açık durumda
   üst/alt çizgi X olur, ortadaki solar. Dönme merkezi çizginin kendi
   kutusudur (transform-box: fill-box). */
.burger__icon {
  display: block;
  width: 22px;
  height: 22px;
  fill: var(--fg);
}
.burger__bar {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger[aria-expanded="true"] .burger__bar--top { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar--mid { opacity: 0; transform: scaleX(0.4); }
.burger[aria-expanded="true"] .burger__bar--bot { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- 5. Hero ---------- */
.hero { padding: var(--s-8) 0 var(--s-6); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.65);
  font-size: var(--t-sm);
  color: var(--fg-sec);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.pill:hover { border-color: var(--line-strong); background: #fff; }
.pill__dot {
  display: none; /* referans karede pill'de nokta yok */
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--s-6);
  margin-top: var(--s-5);
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 500;  /* admin 30.10.2026: başlık daha ince (600 → 500) */
  line-height: 1.02;
  letter-spacing: -0.042em;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}
.hero__col { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }

.hero__aside { padding-bottom: 6px; }
.hero__lede {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--fg-sec);
  margin-left: auto;
  max-width: 32ch;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.hero__cta .btn { padding: 0 var(--s-6); }

/* scroll-reveal */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.35; } }
@keyframes caret { 50% { opacity: 0; } }

/* ---------- 6. Ürün ekranı (yeşil sahne + IDE mock) ---------- */
.showcase { padding-bottom: var(--s-8); }

.showcase__stage {
  position: relative;
  /* site genişliğiyle hizalı: .wrap ile aynı kenar boşluğu (16px), sağ-sol simetrik (29.10.2026) */
  width: calc(100% - (var(--s-4) * 2));
  max-width: calc(var(--wrap) - (var(--s-4) * 2));
  margin-inline: auto;
  padding: var(--s-10) var(--s-10) 0;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #82c46b 0%, #6cb457 100%);
  overflow: hidden;
  min-height: 420px;
}
.stage__deco { position: absolute; inset: 0; pointer-events: none; }
.stage__deco svg { width: 100%; height: 100%; }

.mock {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 540px;
  background: #ffffff;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 24px 60px rgba(15, 40, 20, 0.26);
  overflow: hidden;
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px var(--s-4);
  border-bottom: 1px solid var(--line);
  color: var(--fg-ter);
}
.mock__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mock__dot--r { background: #ff5f57; }
.mock__dot--y { background: #febc2e; }
.mock__dot--g { background: #28c840; }
.mock__bar-sep { width: 1px; height: 14px; background: var(--line); margin: 0 var(--s-2); }
.mock__bar-icon { display: grid; place-items: center; width: 20px; height: 20px; }

.mock__body {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

.mock__side {
  padding: var(--s-3);
  border-right: 1px solid var(--line);
  background: #fcfcfc;
  font-size: var(--t-sm);
  overflow: hidden;
}
.mock__modes { display: flex; gap: 4px; margin-bottom: var(--s-3); }
.mock__mode {
  padding: 3px 10px;
  border-radius: var(--r-sm);
  background: var(--card-02);
  color: var(--fg-02);
  font-size: var(--t-xs);
}
.mock__mode.is-on { background: var(--card-03); color: var(--fg); }
.mock__menu { display: flex; flex-direction: column; gap: 1px; margin-bottom: var(--s-2); }
.mock__menu li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px var(--s-2);
  border-radius: var(--r-sm);
  color: var(--fg-02);
}
.mock__menu li.is-active { background: var(--card-02); }
.mi { width: 14px; color: var(--fg-ter); font-size: 11px; text-align: center; }
.mi--green { color: var(--accent-strong); }
.tag {
  margin-left: auto;
  padding: 0 5px;
  border-radius: var(--r-xs);
  background: var(--accent-tint);
  color: var(--accent-hover);
  font-size: 10px;
  font-style: normal;
}
.mock__sub {
  padding-left: 26px;
  color: var(--fg-ter);
  font-size: var(--t-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock__label { margin: var(--s-3) var(--s-2) var(--s-1); font-size: 11px; color: var(--fg-ter); }
.mock__muted { color: var(--fg-ter); font-size: var(--t-xs); }

.mock__main { display: flex; flex-direction: column; min-width: 0; }
.mock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--s-5);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--fg-02);
}
.mock__head-dots { color: var(--fg-ter); letter-spacing: 2px; }
.mock__scroll { padding: var(--s-5) var(--s-6); overflow: hidden; }

.bubble {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--card-02);
  color: var(--fg-02);
  font-size: var(--t-sm);
  line-height: 1.55;
  max-width: 62ch;
}
.run-line {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--t-xs);
  color: var(--fg-ter);
}
.run-arrow {
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 9px;
  flex: none;
}
.run-arrow--spin { animation: spin 1.6s linear infinite; }
.mock__text { font-size: var(--t-sm); color: var(--fg-02); line-height: 1.6; max-width: 68ch; }
.steps { margin-top: var(--s-2); display: flex; flex-direction: column; gap: 6px; }
.steps li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--fg-sec);
}
.ok {
  display: grid;
  place-items: center;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1px solid #cdecc8;
  color: var(--accent-strong);
  font-size: 8px;
  flex: none;
}
.ok--pulse { animation: pulse 1.4s var(--ease) infinite; }
.steps code {
  padding: 0 4px;
  border-radius: var(--r-xs);
  background: var(--card-02);
  font-size: 11px;
}
.mock__note {
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-left: 2px solid var(--line);
  color: var(--fg-ter);
  font-size: var(--t-xs);
  line-height: 1.55;
}
.caret {
  display: inline-block;
  width: 6px; height: 12px;
  margin-left: 3px;
  background: var(--accent-strong);
  animation: caret 1.05s steps(1) infinite;
  vertical-align: -1px;
}

/* ---------- 7. Bölüm başlıkları ---------- */
.sec-head { max-width: 720px; margin-bottom: var(--s-7); }
.sec-head--tight { margin-bottom: var(--s-6); }
.sec-title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 48;
  text-wrap: balance;
}
.sec-lede {
  margin-top: var(--s-3);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--fg-sec);
  max-width: 62ch;
}

/* ---------- 8. Ürün seçimi (Kendi Yolunla İnşa Et) ----------
   Referans (image.png, 29.10.2026): ortada başlık, altında pill sekme
   şeridi, en altta tek geniş kart — solda nötr kopya, sağda yeşil
   zemin üzerinde ürün görseli. Sekmeler kutu içinde değil, şeritte. -- */
.build { padding: var(--s-9) 0 var(--s-8); }

.sec-head--center {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.sec-head--center .sec-lede { margin-inline: auto; }

.build__board { display: block; }
.build__rail {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-7);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  max-width: 100%;
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background: var(--bg-deep);
  color: var(--fg-02);
  font: inherit;
  font-size: var(--t-base);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tab:hover { background: var(--card-04); color: var(--fg); }
.tab:active { transform: translateY(1px); }
.tab:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.tab.is-on {
  background: var(--card);
  border-color: var(--line);
  color: var(--fg);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.tab__name { letter-spacing: -0.01em; }
/* Sekme altındaki açıklama şeritte yeri olmadığı için görsel olarak
   gizlenir; ekran okuyucu okumaya devam eder. ---------------------- */
.tab__note {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.panel-stack { position: relative; }
.panel {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-6);
  border: 1px solid #ececec;
  /* Kart köşe yarıçapı 5px — admin isteği, 29.10.2026.
     tokens.css ölçeğine (6/12px) dokunulmadı, sapma burada yerel. */
  border-radius: 5px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(15, 13, 12, 0.03), 0 12px 32px rgba(15, 13, 12, 0.05);
  animation: panelIn var(--dur-3) var(--ease-out) both;
}
.panel[hidden] { display: none; }

/* ---------- 8b. Ürün kartları — seçili ortada, komşular yanlarda ----
   Seçili kart ortada, tab sırasında bir önceki solda, bir sonraki
   sağda durur. Kartlar DOM'da yer değiştirmez; grid sütunu +
   is-prev/is-next sınıfıyla konumlanır, böylece odak sırası ve ekran
   okuyucu akışı bozulmaz. Yan kartlar sütunlarından dışa taşar ve
   .build__viewport içinde kırpılır (referans: image.png). ----------- */
.build__viewport {
  /* Aktif kart en fazla "100% - 2*(boşluk + 120px)" genişliğinde olur:
     yan komşulardan her biri en az 120px görünür kalır. 888px panelde
     eski clamp(680px, 62vw, 1040px) 680px veriyordu ve yan kartlar
     73px'lik okunmaz şeride düşüyordu (29.10.2026 ölçümü). ------------ */
  --panel-min-edge: 120px;
  /* Genişlik GÖRÜNÜM ALANINA göre hesaplanır: % birimi grid sütununa
     çözünür ve sütun da kart genişliğine bağlı olduğu için döngüsel
     sonuç veriyordu (29.10.2026 ölçümü: 1185px'te şerit 194→66px'e indi).
     vw - kaydırma çubuğu payı = .build__viewport genişliği. ------------ */
  --panel-w: min(
    clamp(680px, 62vw, 1040px),
    calc(100vw - var(--sbw, 0px) - 2 * (var(--panel-gap) + var(--panel-min-edge)))
  );
  --panel-gap: var(--s-5);
  position: relative;
  /* 100vw dikey kaydırma çubuğunu saymadığı için 8px yatay taşma
     ölçüldü (29.10.2026 harness: scrollW 1193 / clientW 1185).
     Çubuk payı JS'te --sbw olarak yazılır; yoksa 0 kabul edilir. */
  width: calc(100vw - var(--sbw, 0px));
  margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2);
  padding-block: var(--s-2);
  overflow: hidden;
}

.build__track {
  display: grid;
  /* Aktif kart "auto" sütununda; iki yan sütun eşit kalan alanı alır,
     böylece aktif kart her zaman görünüm alanının tam ortasında durur. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: var(--panel-gap);
  align-items: stretch;
}

.build__track > .panel {
  grid-row: 1;
  width: var(--panel-w);
  max-width: var(--panel-w);
  /* panelIn animasyonu "both" dolgusuyla opacity'yi 1'de kilitliyor;
     sıra değişiminde pasif karartmayı ezmesin diye burada kapatıldı. */
  animation: none;
  transition: opacity var(--dur-panel) var(--ease-soft), filter var(--dur-panel) var(--ease-soft),
    box-shadow var(--dur-panel) var(--ease-soft);
}

.build__track > .panel.is-on {
  grid-column: 2;
  justify-self: center;
  opacity: 1;
  filter: none;
  box-shadow: 0 1px 2px rgba(15, 13, 12, 0.04), 0 18px 40px rgba(15, 13, 12, 0.07);
}

/* Yan kartlar komşuya yaslanır (prev sağa, next sola) ve dışa taşar. */
.build__track > .panel.is-prev {
  grid-column: 1;
  justify-self: end;
  opacity: 0.62;
  filter: saturate(0.9);
  box-shadow: 0 1px 2px rgba(15, 13, 12, 0.02);
}

.build__track > .panel.is-next {
  grid-column: 3;
  justify-self: start;
  opacity: 0.62;
  filter: saturate(0.9);
  box-shadow: 0 1px 2px rgba(15, 13, 12, 0.02);
}

.build__track > .panel.is-prev:hover,
.build__track > .panel.is-next:hover { opacity: 0.85; }

/* Sıranın dışında kalan kartlar render edilmez. -------------------- */
.build__track > .panel:not(.is-on):not(.is-prev):not(.is-next) { display: none; }

/* Seçilen karta giriş animasyonu: JS her seçimde is-entering ekler,
   animationend sınıfı kaldırır. "both" dolgusu kalıcı olsaydı kart
   yana düştüğünde pasif karartmayı ezerdi. ------------------------- */
.build__track > .panel.is-entering {
  animation: panelSlideIn var(--dur-panel) var(--ease-out) both;
}

@keyframes panelSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .build__track > .panel { transition: none; }
  /* Süre sıfırlanır ama animasyon yine koşar: animationend tetiklensin
     ve is-entering sınıfı temizlensin. ---------------------------- */
  .build__track > .panel.is-entering { animation-duration: 1ms; }
}
.panel__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--s-4) 0 var(--s-4) var(--s-4);
}
.panel__chip {
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--fg-ter);
  font-size: var(--t-sm);
  line-height: 1.3;
}
.panel__title {
  display: flex;
  flex-direction: column;
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: var(--fg);
}
.panel__title-sub {
  margin-top: 2px;
  font-family: inherit;
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--fg-sec);
}
.panel__text {
  margin-top: var(--s-4);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--fg-sec);
  max-width: 34ch;
}
.panel__copy .link-arrow {
  margin-top: var(--s-5);
  gap: var(--s-2);
  font-size: var(--t-md);
  font-weight: 600;
  border-bottom: 0;
  color: var(--accent-strong);
}
.panel__copy .link-arrow:hover { color: var(--accent-hover); gap: var(--s-3); }
.panel__copy .link-arrow__mark { font-size: 1.05em; line-height: 1; }

@keyframes panelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.panel__art {
  position: relative;
  border-radius: var(--r-2xl);
  border: 0;
  background-color: #75b998;
  background-image: linear-gradient(150deg, #7dbf9e 0%, #6fb392 46%, #57a281 100%);
  padding: var(--s-4);
  min-height: 320px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* Referanstaki ince açılı bant: panellerin köşesinden geçen koyu yeşil şerit. */
.panel__art::before {
  content: "";
  position: absolute;
  inset: auto -30% -45% auto;
  width: 70%;
  height: 130%;
  background: linear-gradient(154deg, transparent 46%, rgba(38, 107, 76, 0.16) 46.4%, rgba(38, 107, 76, 0.16) 58%, transparent 58.4%);
  pointer-events: none;
}
/* Masaüstü paneli: img/deskop.png 1712x919 — çerçevenin içinde taşmadan durur */
.build__shot {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  border-radius: var(--r-lg);
}
/* Mobil paneli: img/mobil.png 1536x1024 (3:2 yatay kare) — aynı desen;
   min-width:0 grid sütununda küçülür, aspect-ratio yüksekliği baştan ayırıp
   görsel yüklenirken kutunun zıplamasını önler. */
.build__shot--mobile {
  aspect-ratio: 1536 / 1024;
  object-fit: contain;
  box-shadow: var(--shadow-lg);
}

/* izleyici kartları: hafif 3B eğim (JS data-tilt ile) */
.app-window,
.phone,
.editor,
.term {
  transform-style: preserve-3d;
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}

/* Masaüstü uygulama penceresi + etkileşimli görev listesi ------------ */
.app-window {
  width: 100%;
  max-width: 460px;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-size: var(--t-xs);
}
.app-window__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px var(--s-3);
  border-bottom: 1px solid var(--line);
  background: var(--card-01);
}
.app-window__name {
  margin-left: var(--s-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-ter);
}
.app-window__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--accent-hover);
}
.app-window__ask {
  margin: var(--s-3) var(--s-3) 0;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  background: var(--card-02);
  color: var(--fg-02);
  line-height: 1.5;
}
.app-window__hint {
  margin: 0;
  padding: var(--s-2) var(--s-3) var(--s-3);
  font-size: 10.5px;
  color: var(--fg-ter);
}

.meter {
  height: 4px;
  margin: var(--s-3) var(--s-3) 0;
  border-radius: var(--r-full);
  background: var(--card-03);
  overflow: hidden;
}
.meter__fill {
  display: block;
  width: 75%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
  transition: width var(--dur-3) var(--ease-out);
}

.tasklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-3) var(--s-3) 0;
}
.task {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px var(--s-2);
  border-radius: var(--r-sm);
  background: var(--card-01);
  transition: background-color var(--dur) var(--ease);
}
.task:hover { background: var(--accent-soft); }
.task__check {
  flex: none;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--card);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.task__check::after {
  content: "";
  display: block;
  width: 7px;
  height: 4px;
  margin: 3px auto 0;
  border-left: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
  transform: rotate(-45deg);
}
.task.is-done .task__check { background: var(--accent-strong); border-color: var(--accent-strong); }
.task.is-done .task__check::after { border-color: #fff; }
.task__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.task__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.35;
}
.task__who { font-size: 10px; color: var(--fg-ter); }
.task__state {
  flex: none;
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--card-03);
  color: var(--fg-02);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.task.is-done .task__state { background: var(--accent-tint); color: var(--accent-hover); }

.chip {
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--accent-tint);
  color: var(--accent-hover);
  font-size: 10px;
  font-weight: 600;
  flex: none;
}
.chip--btn {
  margin-left: auto;
  border: 1px solid #cde8c6;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip--btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.chip--btn[aria-pressed="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }

/* Mobil telefon: çerçeve + gerçek bir giriş akışı ------------------- */
.phone {
  position: relative;
  width: 236px;
  padding: 10px 8px 12px;
  border: 1px solid #cfd9cd;
  border-radius: 34px;
  background: linear-gradient(180deg, #ffffff 0%, #f7faf6 100%);
  box-shadow: var(--shadow-lg), inset 0 0 0 6px #f0f4ef;
}
.phone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 14px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-02);
}
.phone__bars {
  width: 26px;
  height: 8px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, var(--fg-02) 0 18%, transparent 18% 28%, var(--fg-02) 28% 46%, transparent 46% 56%, var(--fg-02) 56% 74%, transparent 74% 84%, var(--fg-02) 84% 100%);
  opacity: 0.55;
}
.phone__screen {
  min-height: 244px;
  padding: var(--s-4) var(--s-3) var(--s-3);
  border-radius: 24px;
  background: #fbfdfa;
  border: 1px solid #edf2ec;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.phone__title {
  margin: var(--s-4) 0 var(--s-1);
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.phone__sub { font-size: 10.5px; line-height: 1.45; color: var(--fg-ter); padding: 0 var(--s-2); }
.phone__actions { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.phone__btn {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 8px 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--fg);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.phone__btn:hover { background: var(--card-02); border-color: var(--accent); }
.phone__btn:active { transform: scale(0.985); }
.phone__btn--dark { background: var(--fg); border-color: var(--fg); color: #fff; }
.phone__btn--dark:hover { background: #2a2926; border-color: #2a2926; }

.phone__run {
  margin-top: auto;
  padding: var(--s-3) var(--s-2) var(--s-2);
  border-top: 1px solid #e7eee6;
  text-align: left;
  animation: panelIn var(--dur-3) var(--ease-out) both;
}
.phone__run[hidden] { display: none; }
.phone__run-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-hover);
}
.phone__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-strong);
  animation: pulse 1.4s var(--ease) infinite;
}
.phone__run-line {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--fg-02);
}
.phone__run-bar {
  height: 3px;
  margin-top: var(--s-2);
  border-radius: var(--r-full);
  background: #e4ece3;
  overflow: hidden;
}
.phone__run-bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-strong);
  animation: runbar 1.6s var(--ease) infinite;
}
.phone__reset {
  margin-top: var(--s-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-hover);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}
@keyframes runbar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(280%); }
}

/* IDE editörü: dosya seçilebilir ağaç + sekmeli kod paneli ------------ */
.editor {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  width: 100%;
  max-width: 430px;
  background: var(--ink-panel);
  border: 1px solid #26251f;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-on-ink);
  overflow: hidden;
}
.editor__tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3) var(--s-2);
  border-right: 1px solid var(--line-on-ink);
  background: #131311;
  color: var(--fg-on-ink-sec);
}
.editor__eyebrow { font-size: 9px; letter-spacing: 0.08em; color: #77756f; margin-bottom: 6px; }
.editor__folder { padding: 0 0 4px; font-size: 10px; color: var(--fg-on-ink-sec); }
.editor__file {
  padding: 3px 6px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--fg-on-ink-sec);
  font-family: inherit;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.editor__file:hover { background: rgba(245, 245, 244, 0.08); color: #fff; }
.editor__file.is-on { background: rgba(135, 213, 120, 0.14); color: var(--code-add); }
.editor__main { min-width: 0; }
.editor__pane {
  margin: 0;
  padding: var(--s-3);
  line-height: 1.85;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  animation: paneIn var(--dur-2) var(--ease-out) both;
}
.editor__pane[hidden] { display: none; }
.editor__pane .cm { color: #6f8f68; }
.editor__pane .kw { color: #e1a974; }
.editor__pane .fn { color: #77c4d6; }
.editor__pane .st { color: #abd1cd; }

@keyframes paneIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* JetBrains: yeniden düzenleme öncesi/sonrası ------------------------ */
.app-window--code {
  max-width: 400px;
  background: var(--ink-panel);
  border-color: #26251f;
  color: var(--fg-on-ink);
}
.app-window--code .app-window__bar {
  border-bottom: 1px solid var(--line-on-ink);
  background: #131311;
}
.app-window--code .app-window__name { color: #a9a7a0; }
.code-block {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  color: var(--fg-on-ink-sec);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  animation: paneIn var(--dur-3) var(--ease-out) both;
}
.code-block[hidden] { display: none; }
.code-block .cm { color: #6f8f68; }
.code-block .kw { color: #e1a974; }
.code-block .fn { color: #77c4d6; }
.code-block .st { color: #abd1cd; }

/* terminal: çalıştırılabilir komut düğmeleri ------------------------- */
.term {
  width: 100%;
  max-width: 420px;
  padding: var(--s-4);
  border: 1px solid #26251f;
  border-radius: var(--r-lg);
  background: var(--ink-panel);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.85;
  color: var(--fg-on-ink);
}
.term__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-on-ink);
  color: var(--fg-on-ink-sec);
  font-size: 10px;
}
.term__tag {
  padding: 1px 6px;
  border-radius: var(--r-2xs);
  background: rgba(245, 245, 244, 0.16);
  /* 29.10.2026 ölçüm: eski #a9a7a0 + 0.1 zemin 1.31:1 kontrast veriyordu.
     Küçük punto (9.5px) için en az 4.5:1 gerekiyor; renk açıldı. -------- */
  color: #e9e7e4;
  font-size: 9.5px;
}
.term__body { display: block; min-height: 92px; }
.term__body p { margin: 0; }
.term__body p.is-fresh { animation: paneIn var(--dur-3) var(--ease-out) both; }
.term__cmds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line-on-ink);
}
.term__cmd {
  padding: 3px 10px;
  border: 1px solid var(--line-on-ink);
  border-radius: var(--r-full);
  background: rgba(245, 245, 244, 0.06);
  color: var(--fg-on-ink-sec);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.term__cmd:hover { background: rgba(135, 213, 120, 0.18); border-color: #3f6b4f; color: #d7f5cd; }
.term__cmd:active { transform: translateY(1px); }
.term__p { color: var(--code-ok); margin-right: 6px; }
.term__dim { color: #8b8880; }

/* ---------- 9. Kodun Ötesinde kartları ---------- */
.beyond { padding: var(--s-8) 0 var(--s-9); }

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.card {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.card__art {
  height: 96px;
  margin-bottom: var(--s-4);
  border-radius: var(--r-md);
  background: #f6faf4;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.art-svg { width: 100%; height: 100%; }
.card__title { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.018em; }
.card__text {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--fg-sec);
}
.card--cta {
  justify-content: center;
  background: var(--accent-tint);
  border-color: #cdecc8;
}
.card--cta .card__text { color: var(--accent-hover); }

/* ---------- 10. Kurumsal ---------- */
.ent {
  padding: var(--s-8) 0;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.ent__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
  gap: var(--s-7) var(--s-8);
}
.ent__inner > *:first-child { grid-column: 1 / -1; }

/* Editoryal satır listesi: kart yok, ayırıcı çizgi ve hiyerarşi var. */
.ent__rows {
  grid-column: 1 / 2;
  border-top: 1px solid var(--line-strong);
}
.ent__row {
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
.ent__row-title {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.ent__row-text {
  margin-top: var(--s-2);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--fg-sec);
  max-width: 58ch;
}
.ent__row-meta {
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  color: var(--fg-ter);
}

.ent__cta {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  position: sticky;
  top: calc(var(--nav-h) + var(--s-6));
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
}
.ent__cta-note {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--fg-ter);
}
.ent .btn { justify-self: start; }

/* ---------- 11. Footer ----------
   Yapı referansı: admin karesi (image.png, 30.10.2026) — solda logo + iki
   satırlık slogan + ikon şeklinde sosyal kanallar, sağda beş link kolonu,
   altta telif sol / "yukarı dön" sağda beyaz kapsül. Koyu degrade ve ok
   işaretli hover düzeni bu karar gereği kaldırıldı; site açık teması
   (tokens.css) footer'a da uygulanıyor. */
.foot {
  padding: var(--s-9) 0 var(--s-8);
  background: var(--card-02);
  color: var(--fg-02);
  font-family: var(--font-sans);
}
.foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--s-9);
  align-items: start;
}

/* Sol blok: logo.png (yükseklik header'daki 60px'ten bağımsız, footer'da
   küçültülmüş ölçüde) + slogan + sosyal ikonlar */
.foot__logo { display: inline-flex; align-items: center; }
.foot__logo-img { display: block; width: auto; height: 44px; }
.foot__tag {
  margin: var(--s-5) 0 0;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: var(--fg);
  max-width: 20ch;
}
.foot__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  color: var(--fg-ter);
  transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.foot__social svg { width: 17px; height: 17px; fill: currentColor; }
.foot__social a:hover { color: var(--fg); background-color: var(--card-03); }
.foot__social a:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

/* Sağ blok: beş eşit kolon */
.foot__cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-5);
}
.foot__col { display: flex; flex-direction: column; }
.foot__h {
  margin: 0 0 var(--s-4);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg-quiet);
}
.foot__h--sub { margin-top: var(--s-6); }
.foot__col a {
  width: fit-content;
  margin-bottom: var(--s-3);
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--fg-02);
  transition: color var(--dur-1) var(--ease);
}
.foot__col a:last-child { margin-bottom: 0; }
.foot__col a:hover { color: var(--accent-strong); }
.foot__col a:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; border-radius: var(--r-2xs); }
.foot__col a[aria-current="page"] { color: var(--fg); font-weight: 600; }

/* Alt şerit: telif solda, yukarı dön sağda */
.foot__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.foot__copy {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--fg-quiet);
}
.foot__top {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  padding: 11px var(--s-5);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--fg);
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.foot__top:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.foot__top:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

@media (max-width: 1080px) {
  .foot { padding: var(--s-8) 0 var(--s-7); }
  .foot__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .foot__tag { max-width: 28ch; }
  .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
}
@media (max-width: 640px) {
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__tag { font-size: var(--t-lg); }
}
@media (max-width: 420px) {
  .foot__cols { grid-template-columns: minmax(0, 1fr); }
  .foot__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- 12. Responsive ----------
   Panel genişliği ~888px ölçüldü; masaüstü eşiği 860px'ta tutuluyor. */
/* 1024px altı: qoder canlı sitede de (880px kare) nav burger'a düşüyor ve
   hero tek kolona geçiyor — başlık, altında lede, altında butonlar. */
@media (max-width: 1024px) {
  .head-link { display: none; }

  .nav {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    /* display:none → block geçişi animasyonsuz sıçrıyordu. Menü kapalıyken
       de, max-height/opacity/transform ile yumuşak açılıp kapanıyor.
       visibility sonda kapanır (delay) ki kapanma görünsün. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
    overflow: hidden;
    padding: 0 var(--s-4);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transition: max-height var(--dur-panel) var(--ease-soft),
      opacity var(--dur-2) var(--ease-soft),
      transform var(--dur-panel) var(--ease-soft),
      padding var(--dur-panel) var(--ease-soft),
      visibility 0s linear var(--dur-panel);
  }
  .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    /* Admin 30.10.2026: "menüde scroll yok, aşağı kayamıyorum". Sabit 26rem
       yerine görünür alan kadar açılır ve içeriği kendi kaydırır. */
    max-height: calc(100dvh - var(--nav-h) - var(--s-6));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--s-3) var(--s-4) var(--s-5);
    transition: max-height var(--dur-panel) var(--ease-soft),
      opacity var(--dur-2) var(--ease-soft) 40ms,
      transform var(--dur-panel) var(--ease-soft),
      padding var(--dur-panel) var(--ease-soft),
      visibility 0s linear 0s;
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    justify-content: space-between;
    padding: var(--s-3) var(--s-2);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: var(--t-md);
  }
  .nav__link:hover { background: transparent; }

  /* Açılır menü mobilde panel değil, akordeon: nav zaten
     max-height ile açılıyor, absolute panel onu kırpardı. */
  .nav__item--panel { display: block; }
  .nav__trigger { width: 100%; justify-content: space-between; }
  .nav__panel {
    position: static;
    width: auto;
    max-width: none;
    margin: 0 0 var(--s-2);
    padding: var(--s-3) 0 var(--s-2) var(--s-3);
    border: 0;
    border-left: 2px solid var(--accent-soft);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav__item--panel.is-open .nav__panel { display: block; }
  .nav__panel-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .nav__panel-title { padding-left: 0; }
  /* Akordeonda panel dikey akış: sağdaki logo gizlenir, ayırdığı boşluk kalkar. */
  .nav__panel-logo { display: none; }
  .nav__panel--logo { padding-right: 0; }
  .nav__card { padding: var(--s-1) var(--s-1) var(--s-1) 0; }
  .nav__panel-main .nav__way { padding-left: 0; }
  .nav__way { padding: var(--s-2) 0; }
  .nav__way:hover, .nav__way:focus-visible { background: transparent; }
  .nav__way-name { color: var(--accent-strong); }
  .burger { display: flex; }
  .icon-btn { display: none; }
  /* Giriş/İndir header'dan menünün içine taşınır (admin isteği 30.10.2026). */
  .site-head__actions .btn--sm { display: none; }
  /* Butonlar menünün BAŞINDA durur: uzun akordeon açılsa da
     "Giriş / İndir" kaydırmadan görünür (v5: altta btnAlt=703 > 603). */
  .nav__actions {
    display: flex;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--line);
  }
  .nav__actions .btn { flex: 1 1 auto; justify-content: center; }

  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
  .hero__title br { display: none; }
  .hero__lede { margin-left: 0; max-width: none; font-size: var(--t-md); }
  .hero__lede br { display: none; }
}

/* Orta genişlik: dikey ray metni sıkıştırdığı için şeride dönüşür.
   1080px eşiği ölçüldü: ray + iki sütunlu panel bu genişliğin altında
   sol metni 26ch'nin altına düşürüyordu. ------------------------------- */
@media (max-width: 1080px) {
  .panel { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); padding: var(--s-5); }
  .panel__copy { padding: var(--s-3) 0 var(--s-3) var(--s-2); }
  .panel__text { max-width: none; }
  .panel__title { font-size: var(--t-xl); }
}

@media (max-width: 860px) {
  .wrap { padding-inline: var(--s-3); }  /* dar ekranda da 12px (30.10.2026) */

  .hero { padding: var(--s-7) 0 var(--s-5); }
  .hero__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .hero__cta { margin-top: var(--s-5); }
  .hero__cta .btn { flex: 1 1 auto; }

  .showcase__stage { padding: var(--s-5) var(--s-3) 0; border-radius: var(--r-md); min-height: 0; }
  .mock { height: 420px; }
  .mock__body { grid-template-columns: minmax(0, 1fr); }
  .mock__side { display: none; }
  .mock__scroll { padding: var(--s-4); }

  .build { padding: var(--s-7) 0; }
  .build__rail { justify-content: flex-start; margin-bottom: var(--s-5); }
  /* Dar ekranda pill şeridi tek satırda kalır ve yatay kayar;
     sarmak yerine kaydırmak sekme sırasını görünür tutar.
     min-width:0 olmadan flex öğesi min-content'e şişip sayfayı
     yatay kaydırıyordu (376px'te +50px taşma ölçüldü). ------- */
  .tabs {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; padding: 9px 15px; font-size: var(--t-sm); }
  /* Slider: telefonda kart neredeyse tam genişlik, komşu kenarından
     yalnızca ~14px görünür — kart içeriği daralmaz. -------------- */
  /* 860px altında üç kart sığmıyor: 738px görünümde seçili kart zaten
     697px, yanlara 2×24px boşluk kalıyor ve komşu yalnız 9px görünüyordu
     (29.10.2026 ölçümü). Bu genişlikte yalnız seçili kart gösterilir. -- */
  /* 100vw kaydırma çubuğunu da saydığı için kart sağa 12px taşıyordu
     (v5: sol=0 sağ=-12). Mobilde komşu kart gösterilmediği için tam
     taşma gerekmiyor: görünüm alanı içerik genişliğine oturur. */
  .build__viewport {
    --panel-w: 100%;
    --panel-gap: var(--s-3);
    width: auto;
    margin-left: 0;
  }
  .build__track { grid-template-columns: minmax(0, 1fr); }
  .build__track > .panel.is-prev,
  .build__track > .panel.is-next { display: none; }
  .build__track > .panel.is-on { justify-self: center; }
  /* Köşe yarıçapı mobilde de 5px — admin isteği 29.10.2026, ölçüm:
     burada var(--r-2xl) kaldığı için 753px'te radius 16px çıkıyordu. */
  .panel { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); gap: var(--s-4); border-radius: 5px; }
  .panel__copy { padding: 0; }
  .panel__title { margin-top: var(--s-4); }
  .panel__title-sub { font-size: var(--t-md); }
  .panel__text { max-width: none; }
  .panel__art { min-height: 232px; padding: var(--s-4); border-radius: var(--r-lg); }
  .app-window, .editor, .term { max-width: 100%; }
  .phone { width: 220px; }

  .cards { grid-template-columns: minmax(0, 1fr); }
  .ent__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

@media (max-width: 380px) {
  .btn--ghost.btn--sm { display: none; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
}

/* ---------- 13. Hareket tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* Menü ve akordeon: evrensel sıfırlama zaten süreyi kısıyor; burada
     görünürlük gecikmesi ve transform da tamamen kaldırılıyor ki
     reduced-motion'da hiçbir ara kare çizilmesin. */
  .nav,
  .nav.is-open { transition: none; transform: none; }
  .faq__a:not([hidden]) { animation: none; }
  .flow__step::before { transition: none; }
}

/* ==========================================================================
   14. Netaramı animasyon dili + yeni bölümler
   Hareket yalnızca durum değişimini anlatır: açılışta tek sıra (logo → pill →
   başlık → lede yazımı), sonra bölüm göründükçe sayı sayımı. prefers-reduced-
   motion açıksa hepsi kapalı (bkz. bölüm 13).
   ========================================================================== */

/* sprite: sembol tanımı ekranda yer kaplamaz */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* logo: sayfa açılışında tek çeyrek tur + oturma */
.brand__mark {
  transform-origin: 50% 50%;
  animation: markSettle var(--dur-slow) var(--ease-out) both;
}
@keyframes markSettle {
  from { transform: rotate(-32deg) scale(0.86); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ---------- 14a. Rakamlarla Netaramı ----------
   Dört eşit kutu yerine tek birincil rakam + sağında üç destek satırı.
   Hiyerarşi rakamın boyutundan gelir, kutu sayısından değil. ---------- */
.scale-band {
  padding: var(--s-9) 0 var(--s-9);
  border-top: 1px solid var(--line);
}
.scale {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s-8) var(--s-9);
  align-items: stretch;
}
.scale__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-6) 0;
  border-left: 2px solid var(--accent);
  padding-left: var(--s-6);
}
.scale__cap {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-ter);
}
.scale__big {
  font-family: var(--font-display);
  font-size: clamp(5rem, 13vw, 9rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-variant-numeric: tabular-nums;
}
.scale__unit {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent-strong);
}
.scale__desc {
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--fg-02);
  max-width: 34ch;
}
.scale__stamp {
  font-size: var(--t-xs);
  color: var(--fg-ter);
  padding-top: var(--s-2);
}
.scale__rest {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  border-top: 1px solid var(--line);
}
.scale__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
.scale__num {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.scale__num .scale__unit {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--accent-strong);
}
.scale__label {
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--fg);
  line-height: 1.35;
}
.scale__note {
  margin-top: var(--s-1);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--fg-ter);
  max-width: 32ch;
}

/* ---------- 14b. Akış (01-03 gerçek bir sıra) ---------- */
.flow { padding: var(--s-9) 0; background: var(--card); border-top: 1px solid var(--line); }
.flow__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  counter-reset: none;
}
.flow__step {
  position: relative;
  padding-top: var(--s-5);
  border-top: 2px solid var(--line);
}
.flow__step::before {
  content: "";
  position: absolute;
  inset: -2px auto auto 0;
  width: 100%;
  height: 2px;
  background: var(--accent-strong);
  /* width yerine transform: 900ms'lik layout animasyonu her karede yeniden
     düzen hesaplatıyordu; scaleX aynı çizgiyi GPU'da çiziyor. */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.flow__step.is-in::before { transform: scaleX(1); }
.flow__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--accent-strong);
  margin-bottom: var(--s-2);
}
.flow__title {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.028em;
  font-variation-settings: "opsz" 32;
}
.flow__text {
  margin-top: var(--s-2);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--fg-sec);
  max-width: 34ch;
}

/* ---------- 14c. Müşteri sözü ---------- */
.quote {
  padding: var(--s-9) 0;
  background: var(--ink-panel);
  color: var(--fg-on-ink);
}
.quote__inner { max-width: 900px; }
.quote__eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-on-ink-sec);
  margin-bottom: var(--s-5);
}
.quote__body { margin: 0; }
.quote__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.026em;
  font-variation-settings: "opsz" 40;
  color: var(--fg-on-ink);
  text-wrap: pretty;
}
.quote__who {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
  font-size: var(--t-base);
  color: var(--fg-on-ink);
}
.quote__who strong { font-weight: 600; }
.quote__role {
  display: block;
  font-size: var(--t-sm);
  color: var(--fg-on-ink-sec);
  margin-top: 2px;
}
.quote__avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--accent-strong);
  color: var(--fg-on-accent);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- 14d. SSS ---------- */
.faq { padding: var(--s-9) 0 var(--s-10); border-top: 1px solid var(--line); }
.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--s-8);
  align-items: start;
}
/* Sol sütunda başlık, sağda ayırıcı çizgiyle bölünmüş soru listesi.
   Kart yok: satır çizgisi bilgi taşır, kutu dekor değil. --------------- */
.faq__ask {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.faq__ask:hover { color: var(--accent-hover); }
.faq__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-strong);
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q-wrap { margin: 0; font-weight: inherit; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--fg);
  transition: color var(--dur) var(--ease);
}
.faq__q:hover { color: var(--accent-strong); }
.faq__q:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.faq__icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--accent-strong);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); opacity: 0; }
.faq__a {
  padding-bottom: var(--s-5);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--fg-sec);
  max-width: 62ch;
}
.faq__a[hidden] { display: none; }
/* Açılan cevap aniden belirmesin: her yeni görünür panelde yumuşak giriş. */
.faq__a:not([hidden]) { animation: paneIn var(--dur-3) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .faq__icon::before, .faq__icon::after { transition: none; }
}

/* ---------- 14e. Yazma (typing) efekti ---------- */
[data-type] { position: relative; }
.type-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--accent-strong);
  animation: caret 1.05s steps(1) infinite;
}
[data-type].is-typed .type-caret { animation: none; opacity: 0.35; }
@media (prefers-reduced-motion: reduce) {
  .type-caret { display: none; }
}

/* ---------- 14f. Yanıtlar (yeni bölümlerin responsive hâli) ---------- */
@media (max-width: 1024px) {
  .scale { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .scale__main { padding: var(--s-4) 0 var(--s-4) var(--s-5); }
  .scale__rest { gap: 0; }
  .scale__row { padding: var(--s-4) 0; }
  .faq__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .ent__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .ent__rows, .ent__cta { grid-column: 1 / -1; }
  .ent__cta { grid-row: auto; position: static; }
}
@media (max-width: 860px) {
  .scale-band, .flow, .quote { padding: var(--s-8) 0; }
  .flow__list { grid-template-columns: 1fr; gap: var(--s-5); }
  .flow__step { padding-top: var(--s-4); }
  .scale__big { font-size: clamp(4rem, 22vw, 6rem); }
  .scale__row { grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr); gap: var(--s-4); }
  .quote__title { font-size: var(--t-xl); line-height: 1.4; }
  .faq { padding: var(--s-8) 0 var(--s-9); }
  .faq__q { padding: var(--s-4) 0; font-size: var(--t-base); }
  .faq__a { padding-bottom: var(--s-4); }
  .ent__row { padding: var(--s-4) 0; }
  .ent__row-title { font-size: var(--t-md); }
}
@media (max-width: 420px) {
  .scale__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}

/* ==========================================================================
   15. Entegrasyon bölümü (Agent SDK / Cloud Agents)
   Referans: admin görseli image-d4b23dbc — başlık + gri zeminli iki kart,
   her kartta başlık/açıklama/yeşil bağlantı ve altında pencere mockup'ı.
   Sınıf öneki itg__ : mevcut sınıflarla çakışmaz.
   ========================================================================== */
.itg { padding: var(--s-9) 0 var(--s-8); }
.itg__head { max-width: 68ch; }

.itg__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: stretch;
}

.itg__card {
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--s-6) 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.itg__card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }

.itg__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.itg__text {
  margin-top: var(--s-3);
  max-width: 52ch;
  font-size: var(--t-base);
  line-height: 1.62;
  color: var(--fg-sec);
}

.itg__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: flex-start;
  margin-top: var(--s-4);
  padding: var(--s-1) 0;
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--accent-strong) !important;
  border-radius: var(--r-xs);
  text-decoration: none;
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.itg__link svg { flex: none; transition: transform var(--dur) var(--ease); }
.itg__link:hover { color: var(--accent-hover); }
.itg__link:hover svg { transform: translateX(2px); }
.itg__link:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  text-decoration: underline;
}

/* ---------- Pencere mockup'ı (kartın altında, alt kenarda kırpılır) ------- */
.itg__demo {
  margin-top: var(--s-6);
  margin-inline: calc(var(--s-6) * -1);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--card-01);
  overflow: hidden;
}

.itg__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding-inline: var(--s-4);
  background: var(--card-03);
  border-bottom: 1px solid var(--line);
}
.itg__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: #f0b23f;
}
.itg__dot:nth-child(2) { background: #e0705e; }
.itg__dot:nth-child(3) { background: var(--accent); }

/* Kod paneli */
.itg__code {
  margin: 0;
  padding: var(--s-5) var(--s-4) var(--s-6);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--fg);
  overflow-x: auto;
  tab-size: 2;
}

.itg__line { display: flex; gap: var(--s-4); white-space: pre; }
.itg__num {
  flex: none;
  min-width: 2.2ch;
  text-align: right;
  color: var(--fg-quiet);
  user-select: none;
}
.tok-k { font-weight: 600; }
.tok-s { color: var(--accent-strong); }
.tok-f { color: var(--fg-02); }

/* Görev listesi paneli (Cloud Agents) */
.itg__tasks {
  list-style: none;
  margin: 0;
  padding: var(--s-5) var(--s-4) var(--s-6);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.itg__task {
  padding: var(--s-3) var(--s-4);
  background: var(--card-01);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.itg__task-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

.itg__state {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  border: 1px solid var(--accent);
  background: transparent;
  transform: translateY(-2px);
}
.itg__state--run { background: var(--accent); }

.itg__task-name {
  flex: 1 1 auto;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--fg);
}

.itg__task-tag {
  flex: none;
  font-size: var(--t-xs);
  color: var(--accent-strong);
  white-space: nowrap;
}
.itg__task-tag--run { color: var(--fg-ter); }

.itg__task-note {
  margin-top: var(--s-2);
  padding-left: calc(6px + var(--s-3));
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--fg-ter);
}

.itg__sess {
  margin-top: var(--s-2);
  margin-left: calc(6px + var(--s-3));
  padding: var(--s-2) var(--s-3);
  background: var(--card-02);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--fg-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Yanıtlar: entegrasyon bölümü ---------- */
@media (max-width: 860px) {
  .itg { padding: var(--s-8) 0; }
  .itg__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .itg__card { padding: var(--s-5) var(--s-5) 0; }
  .itg__demo { margin-inline: calc(var(--s-5) * -1); }
  .itg__code { font-size: 0.75rem; }
}
@media (max-width: 420px) {
  .itg__card { padding: var(--s-4) var(--s-4) 0; }
  .itg__demo { margin-inline: calc(var(--s-4) * -1); }
  .itg__code { font-size: 0.7rem; padding-inline: var(--s-3); }
  .itg__line { gap: var(--s-2); }
}

@media (prefers-reduced-motion: reduce) {
  .itg__card, .itg__link, .itg__link svg { transition: none; }
}

/* ============ Şeffaflık Banner'ı (site zemini, çerçevesiz, sade) ============
   Admin talebi 30.10.2026: zemin normal site rengiyle aynı; border, gölge ve
   arkadaki dalga katmanı kaldırıldı. */
.banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 999;
  box-sizing: border-box;
  padding: var(--s-4) 0;

  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  border: 0;
  box-shadow: none;
}

.banner__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}


/* Slidelar tek yiginda durur: grid-area 1/1 → mesaj degisirken yukseklik
   ziplamaz, fade+slide akici kalir. */
.banner__slides {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}
.banner__slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--s-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}
.banner__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility 0s;
}

.banner__icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent-strong);
}

/* Admin talebi 30.10.2026 (ikinci tur): bandaki yazilarin HEPSI tek satirda
   dursun, HICBIRI kalın olmasin (400) ve marka adi yerine img/logo.png
   satir icinde dur sun. Baslik <strong> degil <span class="banner__lead">.
   Montserrat (--font-display) yalniz topluluk mesajinda ve lead'de. */
.banner__text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.006em;
  color: var(--fg-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banner__lead {
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 400;
  letter-spacing: -0.018em;
}
/* Marka adi yerine kullanim: header logosu ayni dosya, satir ici kucuk hali.
   60px'lik header yüksekligine dokunulmaz (admin kilidi) — bu bant ayri. */
.banner__brand {
  display: inline-block;
  height: 20px;
  width: auto;
  vertical-align: -5px;
}
.banner__sep { color: var(--fg-quiet); padding: 0 var(--s-2); }
.banner__cost { color: var(--accent-strong); font-weight: 400; }

/* Admin talebi: "Yazilm toplulugumuza katin" mesaji Montserrat. */
.banner__slide--community .banner__text {
  font-family: var(--font-display);
  font-weight: 400;
}

/* Mesaj gostergesi: tiklaninca o slide'a atlar, JS duraklatmayi buraya
   birakir. */
.banner__dots {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}
.banner__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: rgba(15, 13, 12, 0.20);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.banner__dot:hover { background: rgba(15, 13, 12, 0.45); }
.banner__dot:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}
.banner__dot.is-active {
  background: var(--accent-strong);
  transform: scale(1.35);
}

@media (max-width: 768px) {
  .banner { padding: var(--s-3) 0; }
  .banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }
  /* Mobilde metin kırpılmaz, satıra sığmadığında alt satıra geçer. */
  .banner__slide { align-items: flex-start; }
  .banner__text {
    font-size: var(--t-sm);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.45;
  }
  .banner__dots { align-self: flex-start; }
}
@media (max-width: 480px) {
  .banner__text { font-size: var(--t-xs); }
  .banner__brand { height: 17px; vertical-align: -4px; }
}

/* Hareket azaltma tercihi: mesaj degisimi aninda olur, kayma yok. */
@media (prefers-reduced-motion: reduce) {
  .banner__slide,
  .banner__slide.is-active,
  .banner__dot {
    transition: none;
  }
  .banner__dot.is-active { transform: none; }
}

/* Bant sabit oldugu için footer'in alt satirlarini ortmemesi icin yer birakilir.
   Tek satira düsünce bant kisaldi: bosluk 104/132px yerine 72/64px. */
body { padding-bottom: 72px; }
/* Mobilde bant iki satıra düşüyor: yer payı 64 → 104px (harness ölçümü). */
@media (max-width: 768px) { body { padding-bottom: 104px; } }

/* "Kendi Yolunla Insa Et" bolumu ekrandayken bant kaybolur (js/app.js
   bolum 11 IntersectionObserver'i .is-hidden ekler/cikarir). */
.banner {
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease),
    visibility 0s linear var(--dur-3);
}
.banner.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(100% + 8px));
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease),
    visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .banner, .banner.is-hidden { transition: none; transform: none; }
}

/* ============ Açılış perdesi (splash, 2 sn) ============
   Sayfa ilk açıldığında ekranın tam ortasında marka işareti durur; arkası
   bulanıktır. js/app.js perdeyi üstüne gelen 2 sn'lik gecikmeden sonra
   .is-done ile kaldırır. JS hiç çalışmazsa (veya hata verirse) aynı
   gecikmeyle başlayan CSS animasyonu perdeyi kendisi görünmez yapar:
   site asla kilitli kalmaz. Ekran okuyucu perdeyi görmez (aria-hidden).
   Perde position:fixed olduğu için sayfanın düzenine dokunmaz. -------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;                    /* en üst katman: sayfa bunun altında kalır */
  display: grid;
  place-items: center;
  padding: var(--s-6);
  background-color: rgba(242, 244, 242, 0.88);   /* --bg, sayfa seyrek seçilsin */
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-4) var(--ease),
              visibility 0s linear var(--dur-4);
  /* JS yedeği: perde JS olmasa da bu gecikmeden sonra kalkar. */
  animation: splash-out 420ms var(--ease) 2000ms forwards;
}

/* --- Perdedeki işaret: kısa bir giriş, sonra sakin duruş --- */
.splash__logo {
  width: clamp(112px, 14vw, 148px);   /* perdede tek odak: işaret küçük kalmasın */
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(15, 13, 12, 0.12));
  animation: splash-logo-in 520ms var(--ease-out) both;
}

/* --- JS perdeyi kaldırdığında --- */
.splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;                  /* CSS yedeği devreye girmesin */
}

/* Kaldırıldıktan sonra katman tamamen çıkar: tıklamayı, kaydırmayı, odak halkasını engellemez. */
.splash.is-done::after { content: none; }

/* --- Lazy görseller: yer ayrılır, yüklenince sakinçe belirir ---
   Gizleme YALNIZ data-src durumuna bağlıdır: adres yazılır yazılmaz
   (data-src silinir) görsel akışta görünür, yükleme olayı gecikse bile
   içerik görünmez kalmaz. Yer, HTML'deki width/height ile ayrıldığı
   için yükleme sırasında düzen zıplamaz (CLS yok). */
.build__shot { transition: opacity var(--dur-3) var(--ease), filter var(--dur-4) var(--ease-out); }
img.build__shot[data-src] {
  opacity: 0;
  background-color: var(--card-02);   /* yüklenene kadar nötr yüzey */
}
.build__shot.is-failed { outline: 1px dashed var(--line-strong); }

/* --- İskelet (shimmer): görsel inerken çerçevede sakin bir bekleme yüzeyi ---
   Yüzey görselin kutusuna değil çerçeveye boyanır (::before ince yeşil bant,
   ::after serbest). Yalnız JS'in eklediği .is-skeleton sınıfıyla görünür:
   böylece CLI/IDE gibi lazy görseli olmayan panellerde asla çizilmez.
   Yüksekliği HTML'deki width/height + çerçevenin kendi kutusu belirler, 0 yüksekliğe düşmez. */
.panel__art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-color: var(--card-02);
  background-image: linear-gradient(
    100deg,
    rgba(61, 140, 102, 0) 18%,
    rgba(61, 140, 102, 0.10) 42%,
    rgba(255, 255, 255, 0.34) 50%,
    rgba(61, 140, 102, 0.10) 58%,
    rgba(61, 140, 102, 0) 82%
  );
  background-size: 220% 100%;
  background-position: 180% 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease);
}
/* Görsel iskeletin ÜSTÜNDE kalır: blur-up sürerken fotoğraf onu kapatır. */
.panel__art > .build__shot { position: relative; z-index: 1; }
.panel__art.is-skeleton::after {
  opacity: 1;
  animation: skeleton-sweep 1600ms linear infinite;
}

/* --- Blur-up: adres yazıldığı an kutu boş kalmaz. Görsel yumuşak bir
   bulanıklıktan netliğe geçer; 
   opacity .is-loaded gelene kadar 1'de kalır ki ağ yavaşken içerik
   görünmez olmasın (eski kuralın güvencesi korunuyor). --- */
.build__shot.is-loading { filter: blur(14px); }
.build__shot.is-loaded { filter: blur(0); }

@keyframes skeleton-sweep {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

@keyframes splash-logo-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes splash-out {
  to { opacity: 0; visibility: hidden; }
}

/* Hareket azaltma: logo yerinden oynamaz, perde yine 2 sn sonra anında kalkar. */
@media (prefers-reduced-motion: reduce) {
  .splash {
    transition: none;
    animation: splash-out 0s linear 2000ms forwards;
  }
  .splash__logo { animation: none; }
  .splash.is-done { opacity: 0; visibility: hidden; }

  /* Lazy yüzeyi: kayan ışık ve bulanıklık yok, görsel hazır olunca anında gelir. */
  .panel__art.is-skeleton::after { animation: none; }
  .build__shot,
  .build__shot.is-loading,
  .build__shot.is-loaded { transition: none; filter: none; }
}

/* ============ Kademeli açılış (30.10.2026) ============
   Perde (splash) 2 sn durur; perde kalktıktan sonra sayfa yukarıdan
   aşağı sırayla belirir (js/app.js bölüm 10, toplam ~2.4 sn).

   Kuralın güvenliği tek noktaya bağlı: gizleme YALNIZ <html>`de .lz-on
   varken geçerlidir. Bu sınıfı JS ekler; JS çalışmazsa sayfa hiç
   gizlenmez. Motor bir sebeple yarıda kalırsa (a) 4200 ms sonraki CSS
   yedeği (lz-guard-in) ve (b) js/app.js`teki finish() devreye girer:
   sayfa hiçbir koşulda yarım kalmaz. */
.lz-on main > section,
.lz-on main > div,
.lz-on footer {
  transition:
    opacity 480ms var(--ease-out),
    filter 640ms var(--ease-out);
}

.lz-on main > section:not(.is-revealed),
.lz-on main > div:not(.is-revealed),
.lz-on footer:not(.is-revealed) {
  opacity: 0;
  /* Bulanıklıktan netliğe: bölüm yer değiştirmez, odak oturur.
     Görsellerdeki blur-up diliyle aynı — açılış tek bir görsel
     dil konuşur. */
  filter: blur(7px);
  /* Yedek: JS sırayı yürütemezse 4200 ms sonra bölüm kendi belirir.
     .is-revealed eklenince bu animasyon kalkar, geçiş devralır. */
  animation: lz-guard-in 520ms var(--ease-out) 4200ms both;
}

/* .ent içindeki .ent__cta yapışkandır (css/style.css:1569). Filtreli ata
   yapışkanlığı bozabildiği için o bölüm yalnız saydamlıkla belirir. */
.lz-on .ent { filter: none; }

@keyframes lz-guard-in {
  to { opacity: 1; filter: none; }
}

/* Hareket azaltma: yer değiştirme yok, beliriş kısa bir saydamlıkla olur;
   yedek animasyon da beklemeden biter. */
@media (prefers-reduced-motion: reduce) {
  .lz-on main > section,
  .lz-on main > div,
  .lz-on footer { transition: opacity 200ms linear; }

  .lz-on main > section:not(.is-revealed),
  .lz-on main > div:not(.is-revealed),
  .lz-on footer:not(.is-revealed) {
    filter: none;
    animation-duration: 1ms;
    animation-delay: 4200ms;
  }
}