/* ==========================================================================
   Ankageo Atlas — Tanıtım sitesi
   Saf CSS. Bağımlılık yok.

   İçindekiler
   01. Tasarım token'ları
   02. Reset & temel
   03. Tipografi
   04. Yardımcı sınıflar / layout
   05. Butonlar
   06. Header & navigasyon
   07. Hero
   08. Mockup sistemi — çerçeve, panel, harita, tablo
   09. Mockup — parçalar (dropzone, form, stil, paylaşım, grafik)
   10. Özellik ızgarası + kart görselleri
   11. Derin bölümler (alternating)
   12. Veri kaynakları akış diyagramı
   13. Mobil bölümü + telefon çerçevesi
   14. Nasıl çalışır
   15. SSS akordiyonu
   16. Son CTA
   17. Footer
   18. Animasyonlar (scroll reveal)
   19. RTL düzeltmeleri
   20. Responsive
   21. Reduced motion & print
   ========================================================================== */


/* 01. Tasarım token'ları
   ========================================================================== */

:root {
  /* Marka — Ankageo turuncusu. Sadece CTA, aktif durum ve küçük vurgularda. */
  --brand:          #E84F1D;
  --brand-strong:   #C93F13;
  --brand-soft:     #FDF0EB;

  /* Mürekkep */
  --ink:            #101828;
  --ink-2:          #475467;
  --ink-3:          #667085;
  --ink-4:          #98A2B3;

  /* Yüzeyler */
  --bg:             #FFFFFF;
  --bg-2:           #F7F8FA;
  --line:           #EAECF0;
  --line-2:         #D0D5DD;

  /* Koyu bantlar (hero + son CTA) */
  --dark:           #0F1419;
  --dark-2:         #171E27;
  --dark-line:      #232C38;
  --on-dark:        #FFFFFF;
  --on-dark-2:      #A6B0BF;

  /* Yarıçap */
  --r-xs:  6px;
  --r-sm:  8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Gölge — çok yumuşak, sakin kart dili */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow:    0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .07), 0 2px 4px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .10), 0 4px 8px rgba(16, 24, 40, .04);

  /* Ritim */
  --container: 1200px;
  --gutter: 24px;
  --section-y: 96px;

  /* Hareket */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 150ms var(--ease);
  --t: 240ms var(--ease);

  /* Tipografi — harici font isteği yok.
     Zincir; latin → CJK → arapça sırasıyla sistem fontlarını dener,
     böylece 6 dilin hiçbirinde tofu (□□□) çıkmaz. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
          "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo",
          "Noto Sans Arabic", "Segoe UI Historic", "Apple Color Emoji",
          "Segoe UI Emoji", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
}


/* 02. Reset & temel
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header'ın anchor hedeflerini örtmemesi için */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr { border: 0; border-block-start: 1px solid var(--line); margin: 0; }

/* SVG sprite kabı — görünmez, yalnız <symbol> tanımlarını taşır */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Odak halkası — her yerde görünür, fare tıklamasında değil */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.section--dark :focus-visible { outline-color: #FF8A63; }

/* İçeriğe atla */
.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 16px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-sm);
  transition: inset-block-start var(--t);
}
.skip-link:focus { inset-block-start: 16px; }


/* 03. Tipografi
   ========================================================================== */

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.375rem); letter-spacing: -.01em; }
h4 { font-size: 1rem; letter-spacing: 0; }

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

/* Uzun paragraflar okunabilir genişlikte kalsın */
.lede,
.section__intro,
.feature__body,
.split__body { max-width: 62ch; }

.lede {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.65;
}

/* Bölüm üstü küçük etiket */
.eyebrow {
  display: inline-block;
  margin-block-end: 14px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
}
/* CJK ve Arapça'da harf aralığı ve büyük harf dönüşümü kötü durur */
html[lang="zh"] .eyebrow,
html[lang="ja"] .eyebrow,
html[lang="ar"] .eyebrow { text-transform: none; letter-spacing: .02em; }

.section--dark .eyebrow { color: #FF8A63; }
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--on-dark); }
.section--dark p { color: var(--on-dark-2); }


/* 04. Yardımcı sınıflar / layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--alt  { background: var(--bg-2); }
.section--dark { background: var(--dark); color: var(--on-dark-2); }

.section__head {
  max-width: 720px;
  margin-block-end: 56px;
}
.section__head--center {
  margin-inline: auto;
  text-align: center;
}
.section__head--center .section__intro { margin-inline: auto; }

.section__intro {
  margin-block-start: 16px;
  font-size: 1.0625rem;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* 05. Butonlar
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  transition: background-color var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--brand-strong); }

.btn--secondary {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover { background: var(--bg-2); border-color: var(--ink-4); }

/* Koyu zemin üstünde ikincil buton */
.btn--ghost-light {
  background: rgba(255, 255, 255, .06);
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, .18);
}
.btn--ghost-light:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .32);
}

.btn--sm { padding: 9px 16px; font-size: .875rem; }
.btn--lg { padding: 14px 28px; font-size: 1rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* 06. Header & navigasyon
   ========================================================================== */

.header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .85);
  border-block-end: 1px solid transparent;
  transition: border-color var(--t), box-shadow var(--t), background-color var(--t);
}
@supports (backdrop-filter: blur(1px)) {
  .header { backdrop-filter: saturate(180%) blur(12px); }
}
/* JS sayfa kaydırıldığında ekler */
.header.is-scrolled {
  border-block-end-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
}
.brand img { height: 26px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-end: auto;
}
.nav__link {
  padding: 8px 12px;
  border-radius: var(--r-xs);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color var(--t-fast), background-color var(--t-fast);
}
.nav__link:hover { color: var(--ink); background: var(--bg-2); }

.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

/* Dil seçici — native <select>: erişilebilir, mobilde OS seçicisi açılır */
.lang {
  position: relative;
  display: flex;
  align-items: center;
}
.lang__icon {
  position: absolute;
  inset-inline-start: 10px;
  pointer-events: none;
  color: var(--ink-3);
}
.lang__select {
  appearance: none;
  padding-block: 9px;
  padding-inline: 34px 30px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink-2);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.lang__select:hover { border-color: var(--ink-4); }
.lang__chevron {
  position: absolute;
  inset-inline-end: 10px;
  pointer-events: none;
  color: var(--ink-3);
}

/* Mobil menü tetikleyicisi */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  cursor: pointer;
  color: var(--ink);
}

/* Mobil panel */
.mobile-nav {
  display: none;
  position: fixed;
  inset-block: 72px 0;
  inset-inline: 0;
  z-index: 99;
  padding: 24px var(--gutter) 40px;
  background: var(--bg);
  border-block-start: 1px solid var(--line);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.mobile-nav.is-open { opacity: 1; transform: translateY(0); visibility: visible; }
.mobile-nav__link {
  display: block;
  padding: 14px 4px;
  border-block-end: 1px solid var(--line);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
}
.mobile-nav .btn { width: 100%; margin-block-start: 24px; }

/* Panel açıkken arka plan kaymasın */
body.nav-open { overflow: hidden; }


/* 07. Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 104px;
  background: var(--dark);
  color: var(--on-dark-2);
  isolation: isolate;
}

/* Arka plan: çizilmiş harita ızgarası + kontur motifi.
   Çok düşük opaklık — dokunun varlığı hissedilir, içerikle yarışmaz. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  color: #2B3846;
  opacity: .5;
  pointer-events: none;
}

/* Sitedeki tek gradient: hero ortasında çok düşük opaklıkta radial glow */
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: -22%;
  inset-inline-start: 50%;
  z-index: -1;
  width: min(1200px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at center,
              rgba(232, 79, 29, .18) 0%,
              rgba(232, 79, 29, .05) 36%,
              transparent 66%);
  pointer-events: none;
}

.hero__inner {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 24px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--dark-line);
  border-radius: 999px;
  background: rgba(15, 20, 25, .72);
  font-size: .8125rem;
  color: var(--on-dark-2);
}
.hero__badge b {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.hero h1 { color: var(--on-dark); }

.hero__lede {
  margin-block-start: 22px;
  margin-inline: auto;
  color: var(--on-dark-2);
}

.hero .btn-row {
  justify-content: center;
  margin-block-start: 36px;
}

.hero__note {
  margin-block-start: 18px;
  font-size: .875rem;
  color: #7C8798;
}

.hero__visual {
  max-width: 1120px;
  margin: 72px auto 0;
  padding-inline: var(--gutter);
}
.hero__visual .mock { display: flex; flex-direction: column; }
/* Hero mockup'ının sabit yüksekliği — harita SVG'sine yer açar */
.hero__visual .mock__app { flex: 1; height: 520px; }


/* 08. Mockup sistemi
   --------------------------------------------------------------------------
   Sitedeki ürün görselleri saf CSS + SVG ile çizilmiştir; görsel dosyası yok.
   Gerçek ekran görüntüsü geldiğinde .mock bloğunun tamamı tek bir <img> ile
   değiştirilir — index.html içindeki MOCKUP yorumlarına ve README'ye bakın.
   ========================================================================== */

.mock {
  /* Harita renk paleti — .mock--dark bunları ezer */
  --map-bg:       #EBEEF2;
  --map-grid:     rgba(16, 24, 40, .05);
  --map-land:     #DFE4EA;
  --map-landline: #C6CDD7;
  --map-building: #C8D0DA;
  --map-road:     #FFFFFF;
  --map-park:     #D6E6D4;
  --map-water:    #CFDFEE;

  /* Panel/arayüz renkleri */
  --ui-bg:     #FFFFFF;
  --ui-bg-2:   #F7F8FA;
  --ui-line:   #E4E7EC;
  --ui-text:   #344054;
  --ui-text-2: #98A2B3;
  --ui-chrome: #F0F1F4;

  position: relative;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--r-lg);
  background: var(--ui-bg);
  box-shadow: var(--shadow-lg);
  /* Mockup içi metinler her zaman küçük; kullanıcı seçimine kapalı */
  user-select: none;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ui-text);
}

.mock--dark {
  --map-bg:       #0D1319;
  --map-grid:     rgba(255, 255, 255, .04);
  --map-land:     #232E3A;
  --map-landline: #3A4757;
  --map-building: #2E3B49;
  --map-road:     #0B1016;
  --map-park:     #1B3128;
  --map-water:    #14293B;

  --ui-bg:     #141B23;
  --ui-bg-2:   #1A222B;
  --ui-line:   #262F3A;
  --ui-text:   #C3CBD6;
  --ui-text-2: #6E7A89;
  --ui-chrome: #1A222B;

  border-color: var(--dark-line);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
}

/* --- tarayıcı çubuğu --- */

.mock__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-block-end: 1px solid var(--ui-line);
  background: var(--ui-chrome);
}
.mock__dots { display: flex; gap: 5px; flex: none; }
.mock__dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ui-line);
}
.mock__url {
  flex: 1;
  max-width: 340px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  color: var(--ui-text-2);
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
}

/* --- uygulama gövdesi --- */

.mock__app {
  display: grid;
  grid-template-columns: 168px 1fr 150px;
  grid-template-rows: 1fr auto;
  height: 100%;
  min-height: 0;
}
/* Yan panelsiz / tablosuz varyantlar */
.mock__app--split  { grid-template-columns: 1fr 1fr;   grid-template-rows: 1fr; }
.mock__app--simple { grid-template-columns: 1fr 170px; grid-template-rows: 1fr; }
.mock__app--map    { grid-template-columns: 1fr;       grid-template-rows: 1fr; }

/* --- yan paneller --- */

.mock__aside {
  padding: 12px;
  background: var(--ui-bg);
  border-inline-end: 1px solid var(--ui-line);
  overflow: hidden;
}
.mock__aside--end {
  border-inline-end: 0;
  border-inline-start: 1px solid var(--ui-line);
}

.mock__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ui-text-2);
}
html[lang="zh"] .mock__title,
html[lang="ja"] .mock__title,
html[lang="ar"] .mock__title { text-transform: none; letter-spacing: 0; }

/* katman satırı */
.mock__layer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  border-radius: var(--r-xs);
  color: var(--ui-text);
}
.mock__layer + .mock__layer { margin-block-start: 2px; }
.mock__layer.is-active { background: var(--ui-bg-2); }
.mock__layer.is-off { color: var(--ui-text-2); }

.mock__eye {
  flex: none;
  width: 12px; height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  opacity: .55;
  position: relative;
}
.mock__layer:not(.is-off) .mock__eye { opacity: 1; background: currentColor; }
.mock__layer:not(.is-off) .mock__eye::after {
  content: "";
  position: absolute;
  inset-block-start: 1px;
  inset-inline-start: 3px;
  width: 4px; height: 7px;
  border: solid var(--ui-bg);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}

.mock__swatch {
  flex: none;
  width: 11px; height: 11px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .12);
}
.mock__layer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- harita sahnesi --- */

.mock__stage {
  position: relative;
  overflow: hidden;
  background: var(--map-bg);
  min-height: 0;
}
.mock__map {
  display: block;
  width: 100%;
  height: 100%;
}
/* Harita üstündeki ölçü etiketleri ("172,6 m") RTL'de ters dönmesin */
.mock__map text { direction: ltr; }

/* harita üstünde yüzen arayüz parçaları */
.mock__toolbar {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  box-shadow: var(--shadow);
}
.mock__tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: var(--r-xs);
  color: var(--ui-text-2);
}
.mock__tool svg { width: 13px; height: 13px; }
.mock__tool.is-active { background: var(--brand); color: #fff; }

.mock__zoom {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  display: grid;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  box-shadow: var(--shadow);
}
.mock__zoom i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  font-style: normal;
  font-size: 13px;
  color: var(--ui-text-2);
}
.mock__zoom i + i { border-block-start: 1px solid var(--ui-line); }

/* ölçüm / bilgi rozeti */
.mock__badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--r-xs);
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  box-shadow: var(--shadow);
  font-size: 10px;
  white-space: nowrap;
}
.mock__badge b { color: var(--ui-text); font-weight: 600; }
.mock__badge--measure { inset-block-end: 12px; inset-inline-start: 12px; }
.mock__badge--scale   { inset-block-end: 12px; inset-inline-end: 12px; color: var(--ui-text-2); }

/* lejant kutusu */
.mock__legend {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: 12px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  box-shadow: var(--shadow);
}
.mock__legend .mock__title { margin-block-end: 6px; }
.mock__legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--ui-text);
}
.mock__legend-row + .mock__legend-row { margin-block-start: 4px; }
.mock__legend-row i {
  width: 9px; height: 9px;
  border-radius: 2px;
  flex: none;
}

/* --- öznitelik tablosu --- */

.mock__table {
  grid-column: 1 / -1;
  border-block-start: 1px solid var(--ui-line);
  background: var(--ui-bg);
  font-size: 10px;
}
.mock__tr {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 12px;
  padding: 7px 14px;
  color: var(--ui-text);
}
.mock__tr + .mock__tr { border-block-start: 1px solid var(--ui-line); }
.mock__tr--head {
  background: var(--ui-bg-2);
  color: var(--ui-text-2);
  font-weight: 600;
  letter-spacing: .03em;
}
.mock__tr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__tr--sel { background: color-mix(in srgb, var(--brand) 8%, transparent); }


/* 09. Mockup — parçalar
   ========================================================================== */

.mock__pane {
  padding: 16px;
  background: var(--ui-bg);
  overflow: hidden;
}
.mock__pane + .mock__pane { border-inline-start: 1px solid var(--ui-line); }

/* dosya bırakma alanı */
.mock__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 14px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--ui-bg-2);
  text-align: center;
  color: var(--ui-text-2);
}
.mock--dark .mock__drop { border-color: #333F4D; }
.mock__drop svg { width: 22px; height: 22px; color: var(--brand); }
.mock__drop b { color: var(--ui-text); font-size: 11px; }

/* yüklenen dosya satırı */
.mock__file {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--ui-line);
  border-radius: var(--r-xs);
  background: var(--ui-bg);
}
.mock__file + .mock__file { margin-block-start: 6px; }
.mock__file-ext {
  flex: none;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  direction: ltr;
}
.mock--dark .mock__file-ext { background: rgba(232, 79, 29, .16); color: #FF9270; }
.mock__file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__file-size { color: var(--ui-text-2); font-size: 10px; direction: ltr; }
.mock__file-ok { flex: none; width: 13px; height: 13px; color: #17966A; }

/* ilerleme çubuğu */
.mock__progress {
  height: 4px;
  border-radius: 999px;
  background: var(--ui-line);
  overflow: hidden;
}
.mock__progress i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }

/* form alanı */
.mock__field + .mock__field { margin-block-start: 9px; }
.mock__label {
  display: block;
  margin-block-end: 4px;
  font-size: 10px;
  color: var(--ui-text-2);
}
.mock__input {
  padding: 7px 10px;
  border: 1px solid var(--ui-line);
  border-radius: var(--r-xs);
  background: var(--ui-bg-2);
  color: var(--ui-text);
  font-family: var(--font-mono);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}
.mock__input--focus { border-color: var(--brand); background: var(--ui-bg); }

.mock__row { display: flex; gap: 8px; }
.mock__row > * { flex: 1; min-width: 0; }

/* mockup içi buton */
.mock__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: var(--r-xs);
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}
.mock__btn--ghost {
  background: var(--ui-bg-2);
  color: var(--ui-text);
  border: 1px solid var(--ui-line);
}
.mock__btn--full { display: flex; width: 100%; }

/* veri kaynağı sekmeleri */
.mock__tabs {
  display: flex;
  gap: 4px;
  margin-block-end: 12px;
  padding-block-end: 8px;
  border-block-end: 1px solid var(--ui-line);
}
.mock__tab {
  padding: 4px 9px;
  border-radius: var(--r-xs);
  font-size: 10px;
  color: var(--ui-text-2);
}
.mock__tab.is-active { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.mock--dark .mock__tab.is-active { background: rgba(232, 79, 29, .16); color: #FF9270; }

/* stil paneli: renk kutucukları ve kaydırıcı */
.mock__colors { display: flex; gap: 5px; flex-wrap: wrap; }
.mock__colors i {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .1);
}
.mock__colors i.is-sel { outline: 2px solid var(--brand); outline-offset: 1px; }

.mock__slider {
  position: relative;
  height: 4px;
  margin-block: 8px 4px;
  border-radius: 999px;
  background: var(--ui-line);
}
.mock__slider i {
  position: absolute;
  inset-block-start: 50%;
  width: 11px; height: 11px;
  margin-block-start: -5.5px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--ui-bg);
  box-shadow: var(--shadow-sm);
}
.mock__slider::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--val, 50%);
  border-radius: 999px;
  background: var(--brand);
}

.mock__group + .mock__group {
  margin-block-start: 12px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--ui-line);
}

/* mini sütun grafiği */
.mock__chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 74px;
  padding-block-start: 8px;
}
.mock__chart i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--brand);
  opacity: .35;
}
.mock__chart i:nth-child(2) { opacity: .55; }
.mock__chart i:nth-child(3) { opacity: 1; }
.mock__chart i:nth-child(4) { opacity: .45; }
.mock__chart i:nth-child(5) { opacity: .7; }

/* paylaşım diyaloğu */
.mock__dialog {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: min(300px, 82%);
  padding: 16px;
  border-radius: var(--r);
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  box-shadow: 0 16px 48px rgba(16, 24, 40, .22);
}
[dir="rtl"] .mock__dialog { transform: translate(50%, -50%); }
.mock--dark .mock__dialog { box-shadow: 0 16px 48px rgba(0, 0, 0, .55); }
.mock__dialog h4 { font-size: 12px; color: var(--ui-text); margin-block-end: 12px; }
.mock__scrim { position: absolute; inset: 0; background: rgba(16, 24, 40, .28); }
.mock--dark .mock__scrim { background: rgba(0, 0, 0, .5); }

/* davetli e-posta etiketleri */
.mock__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.mock__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ui-bg-2);
  border: 1px solid var(--ui-line);
  font-size: 10px;
  direction: ltr;
}
.mock__avatar {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.mock__avatar--b { background: #2E6FD9; }
.mock__avatar--c { background: #17966A; }


/* 10. Özellik ızgarası
   ========================================================================== */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.feature {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              border-color var(--t-fast);
}
.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-2);
}

/* Kart başındaki çizilmiş mini önizleme */
.feature__visual {
  position: relative;
  height: 92px;
  border-block-end: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
}
.feature__visual svg {
  width: 100%;
  height: 100%;
  color: var(--ink-4);
}

.feature__text { padding: 20px 22px 24px; }

.feature h3 { margin-block-end: 8px; font-size: 1.0625rem; }

.feature__body {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-2);
}


/* 11. Derin bölümler (alternating)
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 64px;
}
.split--reverse { grid-template-columns: 1.15fr 1fr; }
.split + .split { margin-block-start: 112px; }

/* Tek numaralı bloklarda görsel sola geçer */
.split--reverse .split__media { order: -1; }

.split__body { margin-block-start: 16px; font-size: 1.0625rem; }

.split__list {
  display: grid;
  gap: 12px;
  margin-block-start: 26px;
}
.split__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9375rem;
  color: var(--ink-2);
}
.split__list .icon-check {
  flex: none;
  margin-block-start: 3px;
  color: var(--brand);
}

/* Mockup'ların bölüm içindeki yüksekliği */
.split__media .mock { height: 380px; display: flex; flex-direction: column; }
.split__media .mock__app,
.split__media .mock__stage { flex: 1; min-height: 0; }


/* 12. Veri kaynakları akış diyagramı
   ========================================================================== */

.flow {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 40px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
}

.flow__col { flex: 1; display: grid; gap: 10px; align-content: center; }

.flow__node {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.flow__node:hover { border-color: var(--line-2); box-shadow: var(--shadow); }

.flow__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--ink-2);
}
.flow__mark svg { width: 18px; height: 18px; }

.flow__name { font-weight: 600; color: var(--ink); font-size: .875rem; }
.flow__kind { font-size: .75rem; color: var(--ink-3); }

/* Ortadaki Atlas kutusu */
.flow__hub {
  flex: none;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 30px;
  border-radius: var(--r-lg);
  background: var(--dark);
  color: var(--on-dark);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.flow__hub img { height: 22px; width: auto; }
.flow__hub-note {
  font-size: .75rem;
  color: var(--on-dark-2);
  max-width: 18ch;
}

/* Bağlayıcı çizgiler — sütun yüksekliğine göre esner.
   preserveAspectRatio="none" ile birlikte path'lerde
   vector-effect="non-scaling-stroke" kullanıldığı için
   esnemede çizgi kalınlığı sabit kalır. */
.flow__link {
  flex: none;
  width: 76px;
  display: flex;
  color: var(--line-2);
}
.flow__link svg { width: 100%; height: 100%; }

/* Sağ taraf: ekip */
.flow__out { flex: 1; display: grid; gap: 10px; align-content: center; }

.formats {
  margin-block-start: 32px;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-2);
}
.formats__label {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 16px;
}
html[lang="zh"] .formats__label,
html[lang="ja"] .formats__label,
html[lang="ar"] .formats__label { text-transform: none; letter-spacing: .02em; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--ink-2);
}
.chip svg { width: 13px; height: 13px; color: var(--ink-4); flex: none; }

.formats__note {
  margin-block-start: 16px;
  font-size: .875rem;
  color: var(--ink-3);
}


/* 13. Mobil bölümü + telefon çerçevesi
   ========================================================================== */

.mobile-split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 72px;
}
.mobile-split__media { display: flex; justify-content: center; }

/* CSS ile çizilmiş telefon */
.phone {
  position: relative;
  width: 268px;
  padding: 10px;
  border: 0;
  border-radius: 38px;
  background: #0B1015;
  box-shadow: 0 24px 56px rgba(16, 24, 40, .28),
              inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--map-bg, #10161D);
  aspect-ratio: 9 / 18.5;
  display: flex;
  flex-direction: column;
}
/* çentik — ekranın üst kenarına oturur (10px = .phone padding'i) */
.phone__notch {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 96px; height: 20px;
  border-radius: 0 0 12px 12px;
  background: #0B1015;
}
[dir="rtl"] .phone__notch { transform: translateX(50%); }

.phone__map { position: relative; flex: 1; min-height: 0; }
.phone__map .mock__map { height: 100%; }

/* konum göstergesi */
.phone__dot {
  position: absolute;
  inset-block-start: 46%;
  inset-inline-start: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #2E6FD9;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 8px rgba(46, 111, 217, .18);
}
[dir="rtl"] .phone__dot { margin-inline: 0 -7px; }

/* alt araç çubuğu */
.phone__bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 12px 14px 18px;
  background: var(--ui-bg, #141B23);
  border-block-start: 1px solid var(--ui-line, #262F3A);
}
.phone__bar i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  color: #6E7A89;
}
.phone__bar i svg { width: 16px; height: 16px; }
.phone__bar i.is-active { background: var(--brand); color: #fff; }

/* üstteki arama alanı */
.phone__search {
  position: absolute;
  inset-block-start: 30px;
  inset-inline: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(20, 27, 35, .92);
  border: 1px solid #262F3A;
  color: #6E7A89;
  font-size: 11px;
}
.phone__search svg { width: 13px; height: 13px; flex: none; }


/* 14. Nasıl çalışır
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.step {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
}

.step__visual {
  height: 132px;
  border-block-end: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
}
.step__visual svg { width: 100%; height: 100%; color: var(--ink-4); }

.step__text { padding: 22px 24px 26px; }

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  margin-block-end: 14px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: .8125rem;
  font-weight: 700;
}

.step h3 { margin-block-end: 10px; }
.step p { font-size: .9375rem; color: var(--ink-2); }


/* 15. SSS akordiyonu
   ========================================================================== */

.faq {
  max-width: 780px;
  margin-inline: auto;
  border-block-start: 1px solid var(--line);
}

.faq__item { border-block-end: 1px solid var(--line); }

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 4px;
  border: 0;
  background: none;
  text-align: start;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: color var(--t-fast);
}
.faq__trigger:hover { color: var(--brand); }

.faq__icon {
  flex: none;
  color: var(--ink-3);
  transition: transform var(--t), color var(--t-fast);
}
.faq__trigger[aria-expanded="true"] .faq__icon {
  transform: rotate(180deg);
  color: var(--brand);
}

/* grid-template-rows 0fr→1fr: max-height hack'i olmadan doğru animasyon */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t);
}
.faq__panel > div { overflow: hidden; }
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }

.faq__answer {
  padding: 0 4px 24px;
  max-width: 68ch;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--ink-2);
}


/* 16. Son CTA
   ========================================================================== */

.cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: 104px;
  isolation: isolate;
}
.cta__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  color: #2B3846;
  opacity: .45;
  pointer-events: none;
}
.cta__inner { max-width: 660px; margin-inline: auto; }
.cta .btn-row { justify-content: center; margin-block-start: 34px; }
.cta__note { margin-block-start: 20px; font-size: .875rem; color: #7C8798; }


/* 17. Footer
   ========================================================================== */

.footer {
  padding-block: 64px 40px;
  border-block-start: 1px solid var(--line);
  background: var(--bg);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-block-end: 48px;
}

.footer__brand img { height: 26px; margin-block-end: 16px; }
.footer__tagline {
  max-width: 34ch;
  font-size: .9375rem;
  color: var(--ink-3);
}

.footer__col h4 {
  margin-block-end: 14px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
html[lang="zh"] .footer__col h4,
html[lang="ja"] .footer__col h4,
html[lang="ar"] .footer__col h4 { text-transform: none; letter-spacing: .02em; }

.footer__col li + li { margin-block-start: 10px; }
.footer__col a {
  font-size: .9375rem;
  color: var(--ink-2);
  transition: color var(--t-fast);
}
.footer__col a:hover { color: var(--brand); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-block-start: 28px;
  border-block-start: 1px solid var(--line);
  font-size: .875rem;
  color: var(--ink-3);
}


/* 18. Animasyonlar (scroll reveal)
   --------------------------------------------------------------------------
   Yalnız transform + opacity → compositor'da çalışır, layout tetiklemez.
   .reveal sınıfı JS tarafından IntersectionObserver ile .is-visible alır.
   JS çalışmazsa (no-js) içerik olduğu gibi görünür kalır.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Kart gruplarında 60ms'lik kademe — JS --i değişkenini atar */
.js .reveal[style*="--i"] { transition-delay: calc(var(--i) * 60ms); }


/* 19. RTL düzeltmeleri
   --------------------------------------------------------------------------
   Layout'un tamamı logical property ile yazıldığı için dir="rtl" tek başına
   yeterli. Burada yalnız yön bildiren grafikler ve LTR kalması gereken
   teknik metinler ele alınıyor.
   ========================================================================== */

[dir="rtl"] .icon-arrow { transform: scaleX(-1); }

/* Akış diyagramının okları yön değiştirsin */
[dir="rtl"] .flow__link svg { transform: scaleX(-1); }

/* Arapça'da sıkı letter-spacing harfleri koparır */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 { letter-spacing: 0; }

/* Latin teknik metinler (format adları, URL, koordinat) ters sıralanmasın */
[dir="rtl"] .chip { direction: ltr; }
[dir="rtl"] .mock__url,
[dir="rtl"] .mock__input,
[dir="rtl"] .mock__file-size,
[dir="rtl"] .mock__badge--scale,
[dir="rtl"] .mock__tag { direction: ltr; }

/* Sayısal değerler ("1,58 ha") Arapça etiketin yanında sırasını korusun */
[dir="rtl"] .mock__badge b,
[dir="rtl"] .mock__tr span,
[dir="rtl"] .flow__name { unicode-bidi: isolate; }


/* 20. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  :root { --section-y: 80px; }

  .feature-grid { grid-template-columns: repeat(2, 1fr); }

  .split,
  .split--reverse { grid-template-columns: 1fr 1fr; gap: 40px; }
  .split + .split { margin-block-start: 88px; }

  .mobile-split { gap: 48px; }

  /* Akış diyagramı: dikeye dön, bağlayıcıları 90° çevir */
  .flow {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 24px;
  }
  .flow__col, .flow__out { width: 100%; max-width: 440px; }
  .flow__link { width: 100%; max-width: 440px; height: 40px; }
  .flow__link svg { transform: rotate(90deg); }
  [dir="rtl"] .flow__link svg { transform: rotate(90deg); }

  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .step__visual { height: 150px; }
}

@media (max-width: 860px) {
  /* Nav ve masaüstü CTA gizlenir, hamburger devreye girer */
  .nav,
  .header__actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-nav { display: block; }
}

@media (max-width: 768px) {
  :root { --section-y: 64px; --gutter: 20px; }

  html { scroll-padding-top: 76px; }

  .hero { padding-block: 72px; }
  .hero__visual { margin-block-start: 48px; }
  .hero__visual .mock__app { height: 400px; }

  .section__head { margin-block-end: 40px; }

  .feature-grid { grid-template-columns: 1fr; }

  /* Tek sütuna inince görsel her zaman metnin altında kalsın */
  .split,
  .split--reverse,
  .mobile-split { grid-template-columns: 1fr; gap: 32px; }
  .split--reverse .split__media { order: 0; }
  .split + .split { margin-block-start: 64px; }

  .split__media .mock { height: 320px; }

  .formats { padding: 22px 20px; }

  .cta { padding-block: 72px; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .btn-row .btn { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  /* Mockup'lar dar ekranda okunmaz hale gelmesin:
     yan panelleri gizle, haritayı ve tabloyu bırak. */
  .mock__app { grid-template-columns: 1fr; }
  .mock__aside { display: none; }
  .mock__app--split { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .mock__pane + .mock__pane {
    border-inline-start: 0;
    border-block-start: 1px solid var(--ui-line);
  }
  .mock__app--simple { grid-template-columns: 1fr; }
  .split__media .mock { height: auto; }
  .split__media .mock__stage { min-height: 240px; }

  .phone { width: 232px; }
}

@media (max-width: 420px) {
  .hero__badge { flex-wrap: wrap; justify-content: center; }
  .footer__grid { grid-template-columns: 1fr; }
  .mock__tr { grid-template-columns: 1.4fr 1fr 1fr; }
  .mock__tr > :last-child { display: none; }
}


/* 21. Reduced motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* İçerik reveal'e takılıp görünmez kalmasın */
  .js .reveal { opacity: 1; transform: none; }

  .btn:active { transform: none; }
  .feature:hover { transform: none; }
}

@media print {
  .header, .mobile-nav, .skip-link, .nav-toggle { display: none; }
  .hero, .section--dark { background: #fff; color: #000; }
  .hero__bg, .cta__bg, .hero::before { display: none; }
  .section--dark h1, .section--dark h2, .section--dark h3,
  .section--dark p, .hero h1 { color: #000; }
  .js .reveal { opacity: 1; transform: none; }
}