/* ==========================================================================
   JETCP — ana stylesheet
   Statik site: CMS yok, veritabanı yok, harici bağımlılık yok.
   Bölümler: 1 tokenlar · 2 temel · 3 tipografi · 4 yerleşim · 5 butonlar
             6 header/menü · 7 hero · 8 bölümler · 9 footer · 10 yüzen ögeler
             11 iç sayfalar · 12 responsive
   ========================================================================== */

/* ---------- 1. Tokenlar ----------
   PALET KURALI (2026 yenilemesi): sitede YALNIZCA iki renk ailesi vardır.
     • --brand  : petrol mavisi — birincil eylem, bağlantı, vurgu yüzeyleri
     • --accent : sıcak kehribar — göz kırpma, madde imi, numaralar
   Geri kalan her şey nötr gri-mavi skalasıdır. Eski çok renkli tokenlar
   (turuncu / mor / pembe / mint / camgöbeği) silinmedi; bu iki aileye
   BAĞLANDI, böylece stil dosyasının tamamı ve chatbot tek elden renk alır.
   Renkler ne rengarenk ne de karanlık: orta tonlu, düşük doygunluklu. */
:root {
  --color-ink-900: #000000;
  /* True Blue Teması */
  /* Birincil renk: True Blue (#2d68c4) */
  --brand: #2d68c4;
  --brand-strong: #23529d;
  --brand-deep: #1a3b72;
  --brand-soft: #eef4fc;
  --brand-tint: rgba(45, 104, 196, .15);
  --progress: #a8b6ee;

  /* İkincil renk: Pembe */
  --accent: #ec4899;
  --accent-text: #be185d;
  --accent-soft: #fce7f3;
  --accent-tint: rgba(236, 72, 153, .12);

  /* Üçüncül renk: Mor (Geçişler için) */
  --tertiary: #8b5cf6;
  --tertiary-text: #6d28d9;
  --tertiary-soft: #ede9fe;
  --tertiary-tint: rgba(139, 92, 246, .15);

  /* hero sahnesinin kendi yüzeyleri — sahne ögeleri açık zemine
     karışmasın diye zeminden belirgin biçimde ayrı tutulur */
  --scene-panel: #c3dcec;
  --scene-surface: #ffffff;
  --scene-line: #8aa3b8;
  --scene-line-soft: #b3c6d4;

  /* nötr metin skalası */
  --navy: #1f2b3a;
  /* başlık mürekkebi */
  --navy-deep: #131c28;
  --body: #57657a;
  --body-soft: #7c8899;

  /* eski çok renkli tokenlar → yeni paletin takma adları */
  --orange: var(--accent);
  --purple: var(--brand);
  --pink: var(--brand-soft);
  --pink-soft: var(--brand-soft);
  --mint: var(--accent-soft);
  --green-dark: var(--brand-strong);
  --cyan: var(--brand-soft);
  --whatsapp: #25d366;
  /* markanın kendi rengi — dokunulmaz */

  /* nötr yüzeyler */
  --white: #ffffff;
  --off: #f4f7f9;
  --raised: #ffffff;
  /* yükseltilmiş yüzey — koyu temada açılır */
  --line: #e4eaef;
  --line-strong: #cfd9e2;
  --numeral: #c3cfda;

  /* tipografi */
  --font-head: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ölçüler — hap şeklindeki yuvarlaklık bırakıldı, daha keskin kurumsal dil */
  --header-h: 88px;
  --container: 1180px;
  --grid-max: 1650px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-btn: 10px;

  /* gölgeler — yumuşak ve az; ayrım öncelikle ÇİZGİ ile yapılır */
  --shadow-sm: 0 1px 3px rgba(31, 43, 58, .07);
  --shadow: 0 10px 30px rgba(31, 43, 58, .09);
  --shadow-lg: 0 22px 56px rgba(31, 43, 58, .13);

  --ease: cubic-bezier(.4, 0, .2, 1);

  /* Dalga SVG'lerinin dolgusu. Ayrı token, çünkü dalga her zaman KOMŞU
     bölümün zeminine boyanır; aşağıdaki marka bantlarında yeniden
     tanımlanan --white'tan etkilenmemeli. */
  --wave: #ffffff;
  /* iletisim bandinin altindaki dalga FOOTER'a karisir, sayfa yuzeyine degil */
  --wave-footer: #223c4d;
}

/* ---------- 1b. Koyu tema ----------
   <html data-theme="dark"> ile açılır. Yalnızca nötr yüzey ve metin
   tokenları değişir; marka renkleri (turuncu, mor, pembe, mint, camgöbeği)
   aynı kalır. Tema seçilmediğinde site bugünküyle birebir aynı görünür. */
:root[data-theme="dark"] {
  --color-ink-900: #ffffff;
  /* koyu temada birincil renk açılır, yoksa koyu zeminde okunmaz */
  --brand: #3b82f6;
  --brand-strong: #60a5fa;
  --brand-deep: #1e3a8a;
  --brand-soft: #172554;
  --brand-tint: rgba(59, 130, 246, .15);

  --accent: #f472b6;
  --accent-text: #fbcfe8;
  /* koyu zeminde metin için AÇILIR */
  --accent-soft: #500724;
  --accent-tint: rgba(244, 114, 182, .15);
  --progress: #33437e;

  --scene-panel: #0a192f;
  /* panel KOYULAŞIR, pano üstünde kalkık dursun */
  --scene-surface: #112240;
  --scene-line: #2e4573;
  --scene-line-soft: #1d2d50;

  --navy: #ccd6f6;
  /* başlık metni — koyu temada açık tona döner */
  --navy-deep: #e6f1ff;
  --body: #c5d0d8;
    --body-soft: #94a3b8;

  --white: #0a192f;
  /* sayfa yüzeyi */
  --off: #112240;
  /* ikincil yüzey */
  --raised: #1d2d50;
  /* yükseltilmiş yüzey — zemin üstünde duran kutular */
  --line: #2e4573;
  --line-strong: #3b578c;
  --numeral: #4a679d;

  --wave: #0a192f;
  --wave-footer: #061124;
  /* koyu temada footer rengi */

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow: 0 10px 30px rgba(0, 0, 0, .46);
  --shadow-lg: 0 22px 56px rgba(0, 0, 0, .56);
}

/* --navy koyu temada metin rengi olduğu için, onu ZEMİN olarak kullanan
   yerlerde yerini birincil renge bırakır; aksi hâlde açık zemin üstünde
   beyaz yazı kalırdı. */
:root[data-theme="dark"] .skip-link,
:root[data-theme="dark"] .btn--navy {
  background: var(--brand);
  color: #0f1a22;
}

:root[data-theme="dark"] .anchor-nav a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #0f1a22;
}

/* Marka bantları (hero, iç sayfa hero'su, CTA, footer) koyu temada da koyu
   olmalı — ama artık tek renk ailesinde: petrol mavisi. */
/* Yalnızca arka plan değişir. Buraya bir zamanlar margin-bottom da
   sıkışmıştı; açık temada .hero ve .page-hero'da böyle bir boşluk olmadığı
   için tema değiştirince sayfa aşağı kayıyordu. (.cta-band kendi
   margin-bottom'ını açık temada zaten taşıyor.) */
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .page-hero,
:root[data-theme="dark"] .cta-band {
  background: linear-gradient(150deg, #16242f 0%, #1e394a 60%, #24455a 100%);
}

:root[data-theme="dark"] .page-hero p,
:root[data-theme="dark"] .cta-band p,
:root[data-theme="dark"] .hero-lead {
  color: #a9bcc9;
}

:root[data-theme="dark"] .footer {
  background: #0d161e;
}

/* Bu bantlardaki beyaz CTA butonu koyu zeminde kaybolmasın diye
   birincil renge döner. */
:root[data-theme="dark"] .btn--white {
  background: var(--brand);
  color: #0f1a22;
  border-color: var(--brand);
}

/* Koyu temada zemin üstünde duran kutular yükseltilmiş yüzeye geçer.
   Hepsi var(--white) kullandığı için, sayfa yüzeyiyle aynı renk oluyor ve
   "lacivert üstüne lacivert" gibi kayboluyorlardı. Gölge koyu zeminde
   ayrım yaratmadığından çerçeve de ekleniyor. */
/* .tile ve .mega açık temada da 1px border taşıyor; burada yalnızca rengi
   değişir, kutu boyutu aynı kalır. */
:root[data-theme="dark"] .tile,
:root[data-theme="dark"] .mega {
  background: var(--raised);
  border: 1px solid var(--line-strong);
}

/* .contact-card'ın açık temada border'ı YOK. Burada border eklemek kutuyu
   2px büyütüp tema değişiminde kaymaya yol açıyordu; aynı ayrımı layout'a
   dokunmayan iç halka ile veriyoruz. */
:root[data-theme="dark"] .contact-card {
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

/* Tema değişimi anında tüm geçişler kapatılır (assets/js/main.js tarafından
   yalnızca o an eklenir/kaldırılır). Renkleri CSS değişkeninden alan ve
   üzerinde `transition: color` bulunan ögeler, değişken değişince eski
   renklerine takılı kalıyordu; geçiş kapalıyken renk anında güncellenir. */
.tema-degisiyor *,
.tema-degisiyor *::before,
.tema-degisiyor *::after {
  transition: none !important;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--body);
  background: var(--white);
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* `overflow-x: hidden` body üzerinde bir kaydırma kabı yaratır ve içerideki
     position:sticky ögeleri (sayfa içi gezinme çubuğu) çalışmaz hâle getirir.
     `clip` aynı taşma korumasını kap yaratmadan sağlar; desteklemeyen eski
     tarayıcılar bir üstteki `hidden` değerinde kalır. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

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

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

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

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

input {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  background: var(--navy);
  color: #fff;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

/* ---------- 3. Tipografi ---------- */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.18;
  letter-spacing: -.015em;
}

h1 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 700;
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.2rem);
  font-weight: 700;
}

h3 {
  font-size: 1.3rem;
  font-weight: 600;
}

h4 {
  font-size: 1.06rem;
  font-weight: 600;
}

p {
  margin: 0 0 .9em;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  color: var(--navy);
  font-weight: 700;
}

.eyebrow {
  margin: 0 0 .6rem;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--orange);
}

.lead {
  font-size: 1.12rem;
}

/* mint vurgu — "Bizi ARAYIN?" başlığındaki gibi */
.mark {
  display: inline;
  padding: 0 .12em;
  background: linear-gradient(to top, var(--mint) 0 .34em, transparent .34em);
}

/* ---------- 4. Yerleşim ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.container--wide {
  max-width: 1440px;
}

.container--narrow {
  max-width: 820px;
}

section {
  position: relative;
  z-index: 1;
}

.section {
  padding: clamp(46px, 5.4vw, 80px) 0;
  background: var(--white);
}

/* Hero'dan sonraki İLK bölüm daha dar bir üst boşlukla başlar; böylece
   sayfanın ilk iç başlığı yukarı gelir. Hero'nun kendi ölçüleri değişmez,
   bölümler arasındaki genel ritim de aynı kalır — yalnızca bu ilk boşluk
   daralır. İki yapı var: bayi/iletişim/legal'de hero'yu doğrudan .section
   izler, kurumsal/çözümler/xpoda/entegrasyonlar'da araya yapışkan çubuk
   (.anchor-bar) girer. */
.page-hero + .section,
.anchor-bar + .section {
  padding-top: clamp(26px, 2.6vw, 38px);
}

.section--tight {
  padding: clamp(34px, 3.6vw, 54px) 0;
}

.section--off {
  background: var(--off);
}

/* Başlık öbeğiyle altındaki içerik arasındaki boşluk TEK yerden yönetilir.
   Önceden boşluk, kardeş öğedeki .mt-section sınıfına bağlıydı; o sınıfı
   taşımayan yerlerde (İletişim sayfasındaki SSS gibi) başlık soruya
   yapışıyordu. Boşluk artık .section-head kuralının kendi alt marjında olduğu için
   kardeşteki satır içi margin de bunu ezemez ve tüm sayfalarda aynı çıkar. */
.section-head {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: clamp(2.2rem, 3.6vw, 3.4rem);
  text-align: center;
}

/* Boşluk yukarıda verildi; hemen ardından gelen .mt-section kardeşi bunu
   ikiye katlamasın. */
.section-head + .mt-section {
  margin-top: 0;
}

.section-head p {
  margin-top: .8rem;
}

/* orijinal temanın dekoratif dikey kolon çizgileri */
.grid-lines {
  position: fixed;
  inset: 0;
  z-index: 0;
  max-width: var(--grid-max);
  margin-inline: auto;
  pointer-events: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.grid-lines::before,
.grid-lines::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.grid-lines::before {
  left: 33.3333%;
}

.grid-lines::after {
  left: 66.6666%;
}

/* dalga ayırıcı */
.wave {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: clamp(52px, 7vw, 104px);
  z-index: 2;
  pointer-events: none;
}

.wave--bottom {
  bottom: -1px;
}

.wave--top {
  top: -1px;
}

/* SVG'lerde fill="currentColor" kullanılır; renk buradan gelir. */
.wave svg {
  width: 100%;
  height: 100%;
  color: var(--wave);
}

.wave--footer svg {
  color: var(--wave-footer);
}

/* ---------- Sekme sahneleri ----------
   Dört sahnenin dördü de sayfada durur; hepsi aynı grid gözüne yerleşir,
   böylece kap en uzun sahneye göre boyutlanır ve sekme değişince yükseklik
   zıplamaz. Yalnızca .is-active olan görünür. */
.tab-media {
  display: grid;
}

.tab-illus {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
}

.tab-illus.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.tab-scene {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .tab-illus {
    transition-duration: .9s;
    transform: none;
  }
}

/* ---------- Temaya duyarlı logolar ----------
   Kelime markası lacivert olduğu için koyu temada her yerde açık tonlu
   varyanta geçilir (marka bantları da artık koyu). */
.logo-dark {
  display: none;
}

:root[data-theme="dark"] .logo-light {
  display: none;
}

:root[data-theme="dark"] .logo-dark {
  display: block;
}

/* FOOTER İSTİSNASI: footer bandı artık HER İKİ temada da koyu. Lacivert
   kelime markası orada zemine karışıyordu, bu yüzden footer içinde tema
   ne olursa olsun açık tonlu logo gösterilir. */
.footer .logo-light {
  display: none;
}

.footer .logo-dark {
  display: block;
}

/* ---------- Tema düğmesi ---------- */
.theme-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--navy);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.theme-toggle:hover {
  color: var(--purple);
  border-color: var(--purple);
  background: var(--off);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  grid-area: 1 / 1;
}

/* Açık temada ay (koyuya geç), koyu temada güneş (açığa dön) görünür */
.theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* ---------- 5. Butonlar ----------
   TASARIM KURALI: her buton tipi hem ZEMİN hem ÇERÇEVE olarak farklıdır,
   böylece yan yana geldiklerinde tek bir blok gibi görünmezler. Hepsinde
   2px'lik görünür bir çerçeve var; dolgusuz tipte çerçeve tek ayırt edici
   öge olduğu için renkli. Hap yuvarlaklığı bırakıldı: köşeli kenar
   butonların birbirinden ayrıldığını gözle daha kolay okutuyor. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.9rem;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
    background-color .2s var(--ease), border-color .2s var(--ease),
    color .2s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

/* Butonlar arasında GÖZLE GÖRÜLÜR boşluk. İkiden fazla eylem yan yana
   geldiğinde .btn-row kullanılır; tek başına duran butonlar etkilenmez. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1rem;
  align-items: center;
}

.btn-row--center {
  justify-content: center;
}

/* 1 — BİRİNCİL: dolu petrol mavisi */
.btn--navy,
.btn--purple,
.btn--primary {
  background: var(--brand);
  background-image: linear-gradient(135deg, var(--brand) 0%, var(--tertiary) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px var(--brand-tint);
}

.btn--navy:hover,
.btn--purple:hover,
.btn--primary:hover {
  background: var(--tertiary);
  background-image: linear-gradient(135deg, var(--tertiary) 0%, var(--tertiary-text) 100%);
  border-color: transparent;
  box-shadow: 0 10px 26px var(--tertiary-tint);
  transform: translateY(-2px);
}

/* 2 — İKİNCİL: Sadece Pembe (tertiary) ağırlıklı canlı gradient */
.btn--green,
.btn--accent {
  background: var(--tertiary);
  background-image: linear-gradient(135deg, var(--tertiary) 0%, var(--tertiary-text) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px var(--tertiary-tint);
}

.btn--green:hover,
.btn--accent:hover {
  background: var(--tertiary-text);
  background-image: linear-gradient(135deg, var(--tertiary-text) 0%, #9d174d 100%);
  border-color: transparent;
  box-shadow: 0 10px 26px var(--tertiary-tint);
  transform: translateY(-2px);
}

/* 3 — TERS: koyu/renkli bantların üstünde duran beyaz kart butonu */
.btn--white {
  background: var(--white);
  border-color: var(--white);
  color: var(--brand-strong);
  box-shadow: var(--shadow);
}

.btn--white:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft);
  box-shadow: var(--shadow-lg);
}

/* 4 — DOLGUSUZ: yalnız çerçeve. Dolu butonların yanında hiçbir zaman
   ikinci bir dolu blok gibi okunmaz. */
.btn--outline {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
}

.btn--outline:hover {
  background: var(--brand-soft);
  border-color: var(--brand-strong);
  color: var(--brand-strong);
}

/* koyu bant üstündeki dolgusuz buton */
.btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}

.btn--outline-light:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  color: #fff;
}

.btn--sm {
  padding: .72rem 1.35rem;
  font-size: .77rem;
}

/* buton içindeki ok, üzerine gelince ilerler */
.btn-arrow {
  transition: transform .2s var(--ease);
}

.btn:hover .btn-arrow {
  transform: translateX(3px);
}

/* ---------- 6. Header / menü ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease),
    background-color .3s var(--ease);
}

:root[data-theme="dark"] .header {
  background: rgba(19, 28, 37, .88);
}

.header.is-stuck {
  box-shadow: 0 4px 20px rgba(31, 43, 58, .07);
  border-bottom-color: var(--line-strong);
}

/* Kaydırma ilerleme çubuğu — sayfanın neresinde olduğunu header'ın alt
   kenarında gösterir. Genişliği JS'ten (--scroll-progress) gelir. */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--brand), var(--accent), var(--tertiary));
  pointer-events: none;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-height: var(--header-h);
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: clamp(20px, 3vw, 48px);
}

.brand {
  flex: 0 0 auto;
}

.brand img {
  width: 128px;
}

.nav {
  flex: 1 1 auto;
}

.nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem, 1.8vw, 1.6rem);
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  padding: .6rem .55rem;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}

/* altındaki ince gösterge — üzerine gelince ortadan dışa açılır */
.nav-link::after {
  content: "";
  position: absolute;
  left: .55rem;
  right: .55rem;
  bottom: .16rem;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .24s var(--ease);
}

.nav-link:hover,
.nav-item.is-open>.nav-link,
.nav-item.is-current>.nav-link {
  color: var(--brand);
}

.nav-link:hover::after,
.nav-item.is-open>.nav-link::after,
.nav-item.is-current>.nav-link::after {
  transform: scaleX(1);
}

.nav-caret {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  transition: transform .25s var(--ease);
}

.nav-item.is-open .nav-caret {
  transform: rotate(180deg);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.demo-link {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--navy);
  white-space: nowrap;
}

.demo-link:hover {
  color: var(--brand);
}

.demo-dot {
  display: block;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 16px rgba(43, 95, 126, .28);
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}

.demo-link:hover .demo-dot {
  background: var(--brand-strong);
}

.demo-link:hover .demo-dot {
  transform: scale(1.07);
}

.demo-dot svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 17px;
  height: 17px;
}

/* dil geçişi */
.lang {
  display: flex;
  align-items: center;
  gap: .2rem;
  padding-left: 1rem;
  border-left: 1px solid var(--line-strong);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.lang a,
.lang .lang-current {
  padding: .3rem .45rem;
  border-radius: 6px;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}

.lang a {
  color: var(--body-soft);
}

.lang a:hover {
  color: var(--navy);
  background: var(--off);
}

.lang .lang-current {
  color: var(--purple);
}

/* --- açılır menüler --- */
.has-mega {
  position: relative;
}

.mega {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  translate: -50% 0;
  z-index: 70;
  /* 268px'te "Müşteri İlişkileri Yönetimi (CRM)" gibi başlıklar iki satıra
     sarıyor ve maddeler iç içe geçmiş gibi görünüyordu. */
  min-width: 360px;
  padding: 1.6rem 1.8rem 1.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 20px 50px rgba(31, 43, 58, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}

.mega::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  translate: -50% 0;
  width: 16px;
  height: 16px;
  rotate: 45deg;
  border-radius: 3px;
  background: var(--white);
}

/* Tetikleyici ile menü arasındaki 6px boşluk imleç için ölü bölgeydi: üzerinden
   geçerken hover kopuyor ve menü kapanıyordu. Bu görünmez köprü boşluğu menünün
   tam genişliğince kapatır. Menü gizliyken visibility:hidden devraldığı için
   arkasındaki ögelerin tıklanmasını engellemez. */
.mega::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.has-mega:hover>.mega,
.has-mega:focus-within>.mega,
.nav-item.is-open>.mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Menüden bir bağlantıya tıklanınca menü kapanır. İmleç hâlâ ögenin üzerinde
   olduğu için :hover kuralını ezmesi gerekiyor — bu yüzden hemen sonrasında
   ve aynı özgüllükte tanımlı. İmleç ayrılınca JS sınıfı kaldırır. */
.nav-item.is-dismissed>.mega {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
}

.mega-title {
  margin: 0 0 1.5rem;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--navy);
}

.mega-list li+li {
  margin-top: .38rem;
}

.mega-list a {
  display: block;
  padding: .5rem .7rem;
  margin-inline: -.7rem;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--body);
  transition: color .18s var(--ease), background-color .18s var(--ease),
    transform .18s var(--ease);
}

.mega-list a:hover,
.mega-list a:focus-visible {
  color: var(--brand-strong);
  background: var(--brand-soft);
  transform: translateX(3px);
}

/* menüden seçilen madde bir an vurgulanır: "seçtim ve oraya gidiyorum" */
.mega-list a.is-picked {
  color: #fff;
  background: var(--brand);
}

/* geniş (Xpoda) mega menü */
.mega--wide {
  min-width: min(1080px, calc(100vw - 48px));
  padding: 2.4rem 2.6rem;
}

/* İhtiyaçlar artık tek sütun olduğu için üçü de eşit genişlikte. */
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
}

/* Başlık kutusu METNE kadar daralır (inline-block); altındaki çizgi de
   width:100% ile tam metin genişliğinde durur. Blok kaldığında çizgi
   sütunun tamamına uzuyor, sabit genişlik verildiğinde ise "Uygulama
   Alanı" gibi uzun başlıklarda metinden kısa kalıyordu. */
.mega-col-title {
  position: relative;
  display: inline-block;
  margin: 0 0 .75rem;
  padding-bottom: .5rem;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--navy);
}

.mega-col-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.mega-brand {
  align-self: start;
  padding: 0;
  border: none;
  background: transparent;
}

.mega-brand img {
  width: 168px;
}

/* --- mobil menü --- */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  color: var(--navy);
}

.nav-toggle:hover {
  background: var(--off);
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
}

.nav-toggle .icon-close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* ---------- 7. Hero ----------
   Eski gökkuşağı gradyanı (camgöbeği→mavi→mor→pembe) kaldırıldı. Yerine
   TEK renk ailesinden çok yumuşak bir zemin + yavaşça salınan iki hale
   geldi. Zemin açık kalır: ne rengarenk ne karanlık. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 6vw, 86px) 0 clamp(76px, 9vw, 124px);
  background:
    radial-gradient(1100px 520px at 12% -10%, var(--brand-soft) 0%, transparent 62%),
    radial-gradient(900px 460px at 92% 8%, var(--accent-soft) 0%, transparent 60%),
    linear-gradient(180deg, #fbfcfd 0%, var(--white) 100%);
}

.table-container {
  overflow-x: auto;
  margin-top: 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
}

.img-light {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  filter: contrast(1.05) brightness(1.02);
}

.img-dark {
  width: 100%;
  height: auto;
  display: none !important;
}

:root[data-theme="dark"] .img-light {
  display: none !important;
}

:root[data-theme="dark"] .img-dark {
  display: block !important;
}

.flat-dark-adapt {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  display: block;
}

:root[data-theme="dark"] .flat-dark-adapt {
  mix-blend-mode: screen !important;
  filter: invert(1) hue-rotate(180deg) contrast(1.1) !important;
}

.features-wrap {
  background-color: #f8f9fa;
  padding: 3rem 2rem;
  border-radius: 20px;
}

:root[data-theme="dark"] .features-wrap {
  background-color: transparent;
}

/* dekoratif zemin katmanı — tamamen aria-hidden */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ince ızgara dokusu: sayfa "boş" görünmesin diye zemine hafif ritim verir */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(43, 95, 126, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(43, 95, 126, .07) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(72% 62% at 50% 34%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(72% 62% at 50% 34%, #000 0%, transparent 100%);
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .5;
}

.hero-blob--a {
  width: 30vw;
  min-width: 260px;
  aspect-ratio: 1;
  left: -6%;
  top: 6%;
  background: rgba(43, 95, 126, .26);
  animation: heroDrift 17s ease-in-out infinite;
}

.hero-blob--b {
  width: 26vw;
  min-width: 230px;
  aspect-ratio: 1;
  right: -4%;
  bottom: 2%;
  background: rgba(179, 118, 47, .2);
  animation: heroDrift 21s ease-in-out infinite reverse;
}

@keyframes heroDrift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(38px, -30px) scale(1.12);
  }
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(1.8rem, 4vw, 3.6rem);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.15rem;
  padding: .42rem .95rem .42rem .55rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand-strong);
}

.hero-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
  animation: heroPing 2.6s ease-in-out infinite;
}

@keyframes heroPing {

  0%,
  100% {
    box-shadow: 0 0 0 3px var(--accent-tint);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(179, 118, 47, .05);
  }
}

/* Rozetin zemini sabit beyaz yazılmıştı: koyu temada açık bir pilin üstünde
   açık mavi yazı kalıyor ve okunmuyordu. Koyu temada yüzey de koyulaşır. */
:root[data-theme="dark"] .hero-badge {
  background: rgba(255, 255, 255, .06);
  color: var(--brand-strong);
}

.hero h1 {
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
  line-height: 1.1;
  max-width: 22ch;
}

.hero h1 em {
  font-style: normal;
  color: var(--brand);
  white-space: nowrap;
}

.hero-kicker {
  margin: 0 0 1.15rem;
  font-family: var(--font-head);
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  font-weight: 600;
  color: var(--navy);
}

.hero-lead {
  max-width: 46ch;
  margin: 1.1rem 0 0;
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  color: var(--body);
}

.hero .btn-row {
  margin-top: clamp(1.5rem, 2.4vw, 2.1rem);
}

/* hero altındaki küçük güven şeridi */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2.2rem;
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
  padding-top: clamp(1.2rem, 2vw, 1.7rem);
  border-top: 1px solid var(--line);
}

.hero-facts li {
  display: grid;
  gap: .1rem;
}

.hero-facts b {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand);
}

.hero-facts span {
  font-size: .85rem;
  color: var(--body-soft);
}

.hero-media {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 981px) {
  .hero-media svg {
    transform: scale(1.25) translateX(calc(4% + 40px));
    transform-origin: center right;
  }
}

/* iç sayfa hero'su — aynı dil, daha alçak */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 6vw, 92px) 0 clamp(80px, 9vw, 128px);
  text-align: center;
  aspect-ratio: 16 / 6;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(780px 380px at 16% -12%, rgba(45, 104, 196, 0.2) 0%, transparent 62%),
    radial-gradient(680px 330px at 86% 2%, rgba(139, 92, 246, 0.2) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(45, 104, 196, 0.08) 100%);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--brand-tint) 1px, transparent 1px),
    linear-gradient(to bottom, var(--brand-tint) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(66% 70% at 50% 26%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(66% 70% at 50% 26%, #000 0%, transparent 100%);
}

/* Başlık puntosu büyütüldü: iç sayfaların üst bandı anasayfa kadar
   ağırlık taşısın. */
.page-hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  max-width: 20ch;
  margin-inline: auto;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Bant koyulaştığı için buradaki metinler global gövde renginden bir tık
   koyu tutulur; aksi hâlde bandın en koyu noktasında AA'nın altına
   düşüyorlar. Koyu temadaki karşılıkları aşağıda ayrıca eziliyor. */
.page-hero p {
  max-width: 62ch;
  margin: 1.05rem auto 0;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.page-hero .breadcrumb {
  color: var(--brand-strong);
}

.page-hero .breadcrumb a:hover {
  color: var(--navy);
}

:root[data-theme="dark"] .page-hero .breadcrumb {
  color: var(--brand-strong);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1.1rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--body-soft);
}

.breadcrumb a:hover {
  color: var(--brand);
}

.breadcrumb span[aria-hidden] {
  opacity: .5;
}

/* ---------- 8. Bölümler ---------- */

/* 8a. iki kolonlu düzen */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 3.4vw, 3.2rem);
  align-items: center;
}

/* grid ögeleri varsayılan min-width:auto yüzünden içeriğinden dar olamıyor;
   bu da dar ekranda yatay taşmaya yol açıyordu */
.split>* {
  min-width: 0;
}

.split--media-right>.split-media {
  order: 2;
}

.split-media img {
  margin-inline: auto;
}

/* Demo formu (iletişim sayfası) illüstrasyonu — ilçe sayfası sidebar
   kartıyla aynı satır-içi SVG, burada büyütülmüş. Vektör olduğu için
   büyütmek kaliteyi düşürmez (bitmap değil, çözünürlükten bağımsız). */
.split-media .demo-illus {
  width: min(440px, 92%);
  height: auto;
  margin-inline: auto;
  display: block;
}

/* 8b. numaralı fayda listesi (01–05) */
.numbered {
  margin: 0;
}

.numbered li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}

.numbered li:last-child {
  border-bottom: 0;
}

.numbered b {
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--numeral);
}

.numbered span {
  font-family: var(--font-head);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy);
}

/* 8c. özellik kartları */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.card {
  padding: clamp(1.6rem, 2.4vw, 2.4rem) clamp(1.2rem, 2vw, 2rem);
  text-align: center;
  border-right: 1px solid var(--line);
}

.card:last-child {
  border-right: 0;
}

.card img {
  width: 74px;
  margin: 0 auto 1.4rem;
}

.card h3 {
  margin-bottom: .8rem;
}

.card p {
  font-size: 1rem;
}

/* 8d. sekmeli bölüm */
/* Sekmeler bir "segment kontrol": her sekme kendi çerçevesiyle ayrı bir
   düğme gibi durur, seçili olan dolu marka rengine geçer. */
.tabs {
  margin-bottom: clamp(1.7rem, 3vw, 2.7rem);
}

.tablist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  padding: 0;
  background: none;
}

.tab {
  position: relative;
  padding: .9rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: var(--white);
  font-family: var(--font-body);
  font-size: .93rem;
  font-weight: 600;
  color: var(--body);
  text-align: center;
  transition: background-color .25s var(--ease), color .25s var(--ease),
    border-color .25s var(--ease), transform .25s var(--ease);
}

.tab:hover {
  color: var(--brand-strong);
  border-color: var(--brand);
  background: var(--brand-soft);
  transform: translateY(-2px);
}

.tab[aria-selected="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 6px 16px rgba(43, 95, 126, .24);
}

:root[data-theme="dark"] .tab[aria-selected="true"] {
  color: #0f1a22;
}

.tabpanel[hidden] {
  display: none;
}

/* 8f. iletişim bölümü (pembe dalgalı) */
.contact-band {
  position: relative;
  isolation: isolate;
  padding: clamp(40px, 5vw, 66px) 0 clamp(80px, 10vw, 124px);
  background: var(--white);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr .8fr 1.15fr;
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: center;
}

/* illüstrasyonsuz varyant (iletişim sayfası) */
.contact-grid--split {
  grid-template-columns: 1fr 1fr;
}

.contact-copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
}

.contact-copy p {
  margin: 1.2rem 0 2.2rem;
}

.contact-figure img {
  width: min(230px, 100%);
  margin-inline: auto;
}

.contact-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--white);
  border-radius: 6px;
  box-shadow: var(--shadow);
}

.contact-card>div {
  padding: 1.8rem clamp(1.2rem, 2vw, 2rem);
}

.contact-card>div+div {
  border-left: 1px solid var(--line);
}

.contact-card dt {
  margin-bottom: .45rem;
  font-size: .95rem;
  color: var(--body-soft);
}

.contact-card dd {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  font-weight: 600;
  color: var(--navy);
  word-break: break-word;
}

.contact-card a:hover {
  color: var(--purple);
}

/* ilçe sayfaları: sağ sidebar (sektör + iletişim) */
.ilce-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.ilce-sidebar {
  align-self: start;
  position: sticky;
  /* Kart, header'ın ALTINDAKİ görünür alanda ortalanır (ekranın tam
     ortasında değil — header bir pay çaldığı için "%50 - yarı yükseklik"
     kartı header'a çok yakın, ekran altına çok uzak bırakıyordu). Kullanılabilir
     alan [header'ın altı, ekranın altı] aralığıdır; kart bu aralığın ortasına
     yerleştirilir, böylece kaydırırken header'a olan boşlukla ekran altına
     olan boşluk eşit olur. transform:translateY KULLANILMIYOR: transform
     sticky'nin üst/alt sınır hesaplamasından SONRA uygulanır, bu yüzden
     kartın üstte hero görselinin, altta footer'ın üzerine taşmasına yol
     açıyordu. Düz bir top değeri ise tarayıcı tarafından doğru şekilde
     sınırlanır — kart yukarıda .ilce-main'in başında (hero'nun hemen
     altında), aşağıda ise .ilce-main'in bittiği yerde (Google kartıyla
     hizalı) doğal olarak durur, hiçbir zaman taşmaz.
     Formül: top = header-h + (100vh - header-h - kartYüksekliği) / 2
                 = 50vh + header-h/2 - kartYüksekliği/2
     Kart yüksekliği ~443px (yarısı ~222px) ölçülerek sabitlendi. */
  top: calc(50vh + var(--header-h) / 2 - 222px);
}

.ilce-demo-card {
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.2rem, 2vw, 1.6rem) 1.4rem 1.5rem;
}

.ilce-demo-card__illus {
  margin: 0 auto .8rem;
  width: 100%;
  max-width: 130px;
}

.ilce-demo-card__illus svg {
  width: 100%;
  height: auto;
  display: block;
}

.ilce-demo-card__title {
  margin: 0 0 .5rem;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 700;
  color: var(--navy);
}

.ilce-demo-card__text {
  margin: 0 0 1.1rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--body-soft);
}

.ilce-demo-card__btn {
  display: block;
  width: 100%;
  border-radius: 50px;
  padding: .75rem 1.1rem;
  font-weight: 600;
  text-decoration: none;
}

.ilce-demo-card__call {
  margin: .9rem 0 0;
  font-size: .85rem;
  color: var(--body-soft);
}

.ilce-demo-card__call a {
  display: block;
  margin-top: .2rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
}

@media (max-width: 980px) {
  .ilce-layout {
    grid-template-columns: 1fr;
  }
  .ilce-sidebar {
    position: static;
    transform: none;
    margin-top: 2rem;
  }
}

/* ---------- 9. Footer ----------
   Pembe bant kaldırıldı. Yerine markanın koyu petrol tonu geldi: sayfayı
   aşağıda kapatacak kadar ağır, "karanlık tema" hissi verecek kadar değil. */
.footer {
  position: relative;
  margin-top: -35px;
  padding-bottom: 2.4rem;
  background: #223c4d;
  color: #cfdbe3;
}

.footer h4 {
  color: #fff;
}

.footer a {
  color: #cfdbe3;
}

.footer a:hover {
  color: #fff;
}

.footer .footer-brand p {
  color: #a8bcc8;
}

/* E-bülten çubuğu kaldırıldı; bant artık yalnızca iletişim öbeğini taşıyor:
   sosyal ikonlar + e-posta + telefon tek satırda, ortalanmış. */
.footer-top {
  display: flex;
  justify-content: center;
  padding: clamp(1.9rem, 3.4vw, 2.9rem) 0 clamp(1.7rem, 2.8vw, 2.4rem);
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.4rem;
  justify-content: center;
}

.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 600;
}

.footer-contact svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.footer-contact a:hover {
  opacity: .72;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.1fr repeat(3, 1fr) auto;
  gap: 2.6rem clamp(1.6rem, 3vw, 3rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.footer-brand img {
  width: 132px;
  margin-bottom: 1.1rem;
}

.footer-brand p {
  font-size: .95rem;
  line-height: 1.7;
}

.footer-col h4 {
  margin: 0 0 1.2rem;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.footer-col li+li {
  margin-top: .55rem;
}

.footer-col a {
  font-size: .92rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: opacity .18s var(--ease);
}

.footer-col a:hover {
  opacity: .65;
}

.socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
}

.socials a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, .07);
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
    transform .2s var(--ease);
}

.socials a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: translateY(-2px);
}

.socials svg {
  width: 20px;
  height: 20px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(1.4rem, 2.6vw, 2.1rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .88rem;
}

/* ---------- 10. Yüzen ögeler ---------- */
.floaters {
  position: fixed;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 26px);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: .7rem;
}

.to-top {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--scroll-progress, 0) * 100%);
  background: var(--progress);
  border-top: 2px solid var(--brand);
  pointer-events: none;
}

.to-top svg {
  position: relative;
  z-index: 2;
  width: 18px;
  height: 18px;
}

.wa {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  background: var(--whatsapp);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 500;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .3);
  transition: transform .25s var(--ease);
}

.wa:hover {
  transform: translateY(-3px);
}

.wa svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* ---------- 11. İç sayfa içerikleri ---------- */

/* özellik/çözüm ızgarası */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
}

.tile {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}

.tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

.tile-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: .35rem .8rem;
  margin-bottom: 1.1rem;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--purple);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tile h3 {
  margin-bottom: .7rem;
}

.tile p {
  font-size: 1rem;
}

.tile ul {
  margin-top: 1.1rem;
  display: grid;
  gap: .55rem;
}

.tile ul li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .97rem;
}

.tile ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

/* çapa hedefli uzun içerik blokları */
.stack {
  display: grid;
  gap: clamp(1.8rem, 3.2vw, 2.9rem);
}

.block {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.block>h2 {
  margin-bottom: 1.2rem;
}

.block h3 {
  margin: 2rem 0 .8rem;
}

.prose h3 {
  margin: 2.2rem 0 .8rem;
}

.prose ul {
  display: grid;
  gap: .6rem;
  margin: 1.1rem 0;
}

.prose ul li {
  position: relative;
  padding-left: 1.55rem;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

.prose ol {
  display: grid;
  gap: .6rem;
  margin: 1.1rem 0;
  counter-reset: n;
}

.prose ol li {
  position: relative;
  padding-left: 2rem;
  counter-increment: n;
}

.prose ol li::before {
  content: counter(n) ".";
  position: absolute;
  left: 0;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--orange);
}

/* Yapışkan kapsam — çubuk sayfa boyunca ilerlesin diye
   position: sticky yalnızca ÜST ögenin kutusu kadar sürer. Entegrasyonlar
   ve Kurumsal'da bütün içerik tek .container içinde olduğu için çubuk sayfa
   sonuna kadar yapışık kalıyor. Çözümler ve Xpoda sayfalarında ise bölümler
   ayrı <section>'lar; çubuk kendi kısa bölümünde kalınca ilk kaydırmada
   kayboluyordu. .anchor-scope tüm bölümleri sarar, .anchor-bar da onun
   doğrudan çocuğu olarak aynı davranışı kazanır. */
.anchor-scope {
  padding-top: clamp(1.6rem, 3vw, 2.6rem);
}

.anchor-bar {
  position: sticky;
  top: calc(var(--header-h) + 8px);
  z-index: 40;
  padding: .35rem 0;
}

/* Çubuğun içindeyken yapışkan olan sarmalayıcıdır; nav'ın kendisi akışta
   kalmalı, yoksa iki katmanlı yapışkanlık oluşur. */
.anchor-bar .anchor-nav {
  position: static;
  margin-bottom: 0;
  padding: 0;
}

/* anchor-nav: ortada yatay, çevreleyen kutu yok */
.anchor-nav {
  position: sticky;
  top: calc(var(--header-h) + 8px);
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  margin-bottom: clamp(1.5rem, 2.4vw, 2.2rem);
  padding: .5rem 0;
  background: transparent;
}

:root[data-theme="dark"] .anchor-nav {
  background: transparent;
}

@media (max-width: 760px) {
  .anchor-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .anchor-nav::-webkit-scrollbar {
    display: none;
  }

  .anchor-nav a {
    flex: 0 0 auto;
  }
}

.anchor-nav a {
  padding: .58rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: var(--white);
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
    color .2s var(--ease), transform .2s var(--ease);
}

.anchor-nav a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: translateY(-2px);
}

/* tanım listesi (banka hesapları vb.) */
.datalist {
  display: grid;
  gap: 1rem;
}

.datarow {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: .4rem 1.6rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}

.datarow:last-child {
  border-bottom: 0;
}

.datarow dt {
  font-weight: 700;
  color: var(--navy);
}

.datarow dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* vurgu bandı (CTA) — tek renk ailesi, açık zemin, net çerçeve */
.cta-band { margin-bottom: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 3.4vw, 3rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(620px 300px at 10% 0%, var(--brand-soft) 0%, transparent 66%),
    radial-gradient(520px 260px at 92% 100%, var(--accent-soft) 0%, transparent 64%),
    var(--white);
  text-align: center;
}

/* yavaşça kayan ince çizgi dokusu */
.cta-band::before {
  content: "";
  position: absolute;
  inset: -40%;
  background-image: repeating-linear-gradient(-45deg, rgba(43, 95, 126, .05) 0 1px, transparent 1px 15px);
  animation: ctaSlide 24s linear infinite;
  pointer-events: none;
}

@keyframes ctaSlide {
  to {
    transform: translateX(21px);
  }
}

.cta-band>* {
  position: relative;
}

.cta-band h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.cta-band p {
  max-width: 56ch;
  margin: 1rem auto 1.8rem;
  color: var(--body);
}

/* küçük yardımcılar */
.text-center {
  text-align: center;
}

.mt-section {
  margin-top: clamp(1.7rem, 3vw, 2.7rem);
}

.mt-md {
  margin-top: 1rem;
}

.mt-sm {
  margin-top: .75rem;
}

/* bilgi notu */
.note {
  padding: 1.3rem 1.6rem;
  border-left: 4px solid var(--orange);
  border-radius: 0 10px 10px 0;
  background: var(--off);
  font-size: 1rem;
}

/* ---------- 12. Responsive ---------- */

/* Ara adım: 1180–1340px arasında menü + demo + tema düğmesi + dil tek satıra
   sığmıyor ve header sağa taşıyordu (tema düğmesi eklendiğinden beri).
   Etiketleri gizlemeden önce boşlukları daraltmak yetiyor. */
@media (max-width: 1340px) {
  .header-inner {
    gap: .9rem;
    padding-inline: clamp(14px, 1.5vw, 26px);
  }

  .header-actions {
    gap: .7rem;
  }

  .nav-list {
    gap: clamp(.4rem, 1.1vw, 1rem);
  }

  .nav-link {
    font-size: .81rem;
    letter-spacing: .04em;
  }
}

@media (max-width: 1180px) {
  .nav-list {
    gap: .4rem;
  }

  .nav-link {
    font-size: .8rem;
  }

  .demo-link span {
    display: none;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr 1fr;
  }

}

@media (max-width: 1024px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }

  .card:nth-child(2) {
    border-right: 0;
  }

  .card:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

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

  .contact-figure {
    display: none;
  }

  .tablist {
    grid-template-columns: 1fr 1fr;
    border-radius: var(--radius);
  }

  .tab {
    border-radius: 12px;
  }
}

/* --- mobil menü devreye giriyor --- */
@media (max-width: 960px) {
  :root {
  --color-ink-900: #000000;
    --header-h: 76px;
  }

  .grid-lines {
    display: none;
  }

  .nav-toggle {
    display: grid;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    z-index: 65;
    padding: 1.2rem clamp(20px, 5vw, 32px) 3rem;
    background: var(--white);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  .nav-item {
    border-bottom: 1px solid var(--line);
  }

  .nav-link {
    justify-content: space-between;
    padding: 1.1rem .2rem;
    font-size: .95rem;
  }

  .nav-caret {
    width: 12px;
    height: 12px;
  }

  /* açılır menüler akordeona dönüşür */
  .mega,
  .mega--wide {
    position: static;
    translate: none;
    min-width: 0;
    padding: 0 0 1rem .2rem;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  .mega::before {
    display: none;
  }

  .has-mega:hover>.mega,
  .has-mega:focus-within>.mega {
    display: none;
  }

  .nav-item.is-open>.mega {
    display: block;
  }

  .mega-title {
    display: none;
  }

  .mega-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .mega-brand {
    justify-self: start;
  }

  .mega-list a {
    padding: .55rem .2rem;
    margin-inline: 0;
  }

  .header-actions .demo-link span {
    display: inline;
  }

  .lang {
    padding-left: .7rem;
  }

  body.nav-open {
    overflow: hidden;
  }
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }

  .split--media-right>.split-media {
    order: 0;
  }

  /* sabit 420px, dar ekranda kaptan taşıyordu — kap daha darsa ona uyar */
  .split-media img {
    max-width: min(420px, 100%);
  }

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

  .footer-main {
    grid-template-columns: 1fr 1fr;
  }

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

@media (max-width: 640px) {
  body {
    font-size: 1rem;
  }

  .header-inner {
    gap: .5rem;
  }

  .brand img {
    width: 104px;
  }

  /* 860px blogundaki ".header-actions .demo-link span" daha ozgul oldugu icin
     buradaki gizleme calismiyordu; ayni ozgullukle yaziyoruz. */
  .header-actions .demo-link span {
    display: none;
  }

  .demo-dot {
    width: 40px;
    height: 40px;
  }

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

  .card {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .card:last-child {
    border-bottom: 0;
  }

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

  .numbered li {
    grid-template-columns: 1fr;
    gap: .3rem;
  }

  .numbered b {
    font-size: 1.6rem;
  }

  .contact-card {
    grid-template-columns: 1fr;
  }

  .contact-card>div+div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .footer-main {
    grid-template-columns: 1fr;
  }

  .wa span {
    display: none;
  }

  .wa {
    padding: .85rem;
  }

}

/* ---------- Baskı & erişilebilirlik tercihleri ---------- */
@media (prefers-reduced-motion: reduce) {
  /* scroll-behavior: auto kaldırıldı — çapaya tıklayınca sayfa zıplıyordu;
     yumuşak kaydırma kullanıcı deneyimi için korunuyor. */

  /* Buradaki eski kural `*` üzerinde `!important` ile animation-duration'ı
     .01ms yapıyor, yani sitedeki BÜTÜN animasyonları tamamen kapatıyordu.
     İşletim sisteminde bu ayar açık olan ziyaretçiler hiçbir hareketi
     göremiyordu — bileşenlerin kendi yumuşatma kuralları da eziliyordu.
     Kaldırıldı: artık her bileşen kendi reduce kuralıyla YAVAŞLIYOR
     (aşağıdaki si-*, sc-* ve SVG içi kurallar), tamamen durmuyor.
     Hareketi bütünüyle kapatmak isterseniz eski kuralı geri koyabilirsiniz. */
  .btn:hover,
  .tile:hover,
  .wa:hover,
  .socials a:hover {
    transform: none;
  }
}

@media print {

  .header,
  .footer,
  .floaters,
  .grid-lines,
  .wave,
  .anchor-nav {
    display: none !important;
  }

  body {
    color: #000;
  }
}

/* ==========================================================================
   13. Çözüm sayfaları — kart ızgaraları ve animasyonlu simgeler
   ========================================================================== */

/* ---------- simge animasyonları ----------
   Simgeler satır içi SVG; renk currentColor ile temadan gelir. */
.si-spin {
  animation: siSpin 14s linear infinite;
}

.si-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: siPulse 3.2s ease-in-out infinite;
}

.si-rise {
  transform-box: fill-box;
  transform-origin: center;
  animation: siRise 3.4s ease-in-out infinite;
}

.si-grow {
  transform-box: fill-box;
  transform-origin: left center;
  animation: siGrow 3.6s ease-in-out infinite;
}

.si-bar {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: siBar 3.2s ease-in-out infinite;
}

.si-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: siDraw 3.4s ease-in-out infinite;
}

.si-flow {
  stroke-dasharray: 5 4;
  animation: siFlow 1.8s linear infinite;
}

.si-d2 {
  animation-delay: -.5s;
}

.si-d3 {
  animation-delay: -1s;
}

@keyframes siSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Yanip sonme yerine hareket: opaklik sabit kalir, oge hafifce yukselip buyur. */
@keyframes siPulse {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-2.5px) scale(1.07);
  }
}

@keyframes siRise {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes siGrow {

  0%,
  100% {
    transform: scaleX(.55);
  }

  50% {
    transform: scaleX(1);
  }
}

@keyframes siBar {

  0%,
  100% {
    transform: scaleY(.6);
  }

  50% {
    transform: scaleY(1);
  }
}

@keyframes siDraw {
  0% {
    stroke-dashoffset: 1;
  }

  45%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes siFlow {
  to {
    stroke-dashoffset: -18;
  }
}

/* ---------- detay sayfası girişi ---------- */
.sol-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
}

.sol-intro-icon {
  display: grid;
  place-items: center;
  width: clamp(88px, 12vw, 124px);
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--brand-soft);
  color: var(--purple);
}

.sol-intro-icon svg {
  width: 54%;
  height: 54%;
}

.sol-intro .lead {
  margin: .4rem 0 0;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
}

/* ---------- kart ızgarası ---------- */
.sol-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.sol-grid>* {
  flex: 1 1 min(255px, 100%);
  max-width: 420px;
}

/* numaralı bilgi kartı */
.sol-card {
  position: relative;
  padding: 1.25rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

/* üstte animasyonla dolan marka şeridi */
.sol-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transition: width .4s var(--ease);
}

.sol-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}

.sol-card:hover::before {
  width: 100%;
}

.sol-card p {
  margin: 0;
  font-size: .97rem;
}

.sol-card-num {
  display: block;
  margin-bottom: .7rem;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--numeral);
  transition: color .25s var(--ease);
}

.sol-card:hover .sol-card-num {
  color: var(--purple);
}

/* ---------- özet sayfası kutuları ---------- */
.sol-grid--tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.sol-grid--tiles>* {
  flex: 1 1 min(272px, 100%);
  max-width: 420px;
}

.sol-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.4rem 1.3rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.sol-tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: var(--purple);
}

.sol-tile-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 1.1rem;
  border-radius: 16px;
  background: var(--brand-soft);
  color: var(--purple);
  animation: solTileFloat 4s ease-in-out infinite;
}

.sol-tile:nth-child(2) .sol-tile-icon {
  animation-delay: -.6s;
}

.sol-tile:nth-child(3) .sol-tile-icon {
  animation-delay: -1.2s;
}

.sol-tile:nth-child(4) .sol-tile-icon {
  animation-delay: -1.8s;
}

.sol-tile:nth-child(5) .sol-tile-icon {
  animation-delay: -2.4s;
}

.sol-tile:nth-child(6) .sol-tile-icon {
  animation-delay: -3.0s;
}

.sol-tile:nth-child(7) .sol-tile-icon {
  animation-delay: -3.6s;
}

.sol-tile:nth-child(8) .sol-tile-icon {
  animation-delay: -0.3s;
}

@keyframes solTileFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.sol-tile-icon svg {
  width: 60%;
  height: 60%;
}

.sol-tile-abbr {
  display: inline-block;
  margin-bottom: .5rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--off);
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--purple);
}

.sol-tile h3 {
  margin: 0 0 .55rem;
  font-size: 1.16rem;
}

.sol-tile p {
  margin: 0 0 1.2rem;
  font-size: .93rem;
}

.sol-tile-go {
  margin-top: auto;
  font-family: var(--font-head);
  font-size: .86rem;
  font-weight: 600;
  color: var(--purple);
  transition: letter-spacing .25s var(--ease);
}

.sol-tile:hover .sol-tile-go {
  letter-spacing: .04em;
}

/* ---------- diğer çözümler şeridi ---------- */
.sol-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: .8rem;
}

.sol-link {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: .3rem .75rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  transition: border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}

.sol-link:hover {
  border-color: var(--purple);
  background: var(--off);
  transform: translateY(-2px);
}

.sol-link-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--brand-tint);
  color: var(--purple);
}

.sol-link-icon svg {
  width: 60%;
  height: 60%;
}

.sol-link-abbr {
  align-self: end;
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--purple);
}

.sol-link-name {
  grid-column: 2 / -1;
  align-self: start;
  font-size: .87rem;
  line-height: 1.35;
  color: var(--body);
}


/* ---------- responsive ---------- */
@media (max-width: 620px) {
  .sol-intro {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .sol-intro .prose {
    text-align: left;
  }
}

/* ---------- hareket azaltma ----------
   "reduce" = kaldır değil, yumuşat: hareket korunur ama yavaşlar,
   hızlı akış animasyonu kapanır. */
@media (prefers-reduced-motion: reduce) {
  .si-spin {
    animation-duration: 26s;
  }

  .si-pulse {
    animation-duration: 6s;
  }

  .si-rise {
    animation-duration: 6.5s;
  }

  .si-grow {
    animation-duration: 6.5s;
  }

  .si-bar {
    animation-duration: 6s;
  }

  .si-draw {
    animation-duration: 6.5s;
  }

  .si-flow {
    animation: none;
  }

  .sol-card,
  .sol-tile,
  .sol-link {
    transition: none;
  }

  .sol-card:hover,
  .sol-tile:hover,
  .sol-link:hover {
    transform: none;
  }
}

/* ---------- animasyonlu sahne görseli ----------
   Sahne, anasayfadaki roket gibi bütün olarak süzülür. İçeride kıpırdayan
   ayrı ayrı ögeler yok — okumayı bölüyor ve yanıp sönüyormuş gibi duruyordu.
   Yalnızca üç katman hareket eder: sahnenin tamamı, iki rozet ve arka hale. */
.sol-intro-media {
  min-width: 0;
}

.sol-scene {
  width: 100%;
  height: auto;
  overflow: visible;
  transform-box: fill-box;
  transform-origin: center;
  animation: scFloat 6.5s ease-in-out infinite;
}

/* bütün sahne: yukarı–aşağı, hafif yana salınımla */
@keyframes scFloat {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(6px, -12px);
  }
}

/* ---------- giriş bölümündeki öne çıkanlar ---------- */
.sol-points {
  display: grid;
  gap: .55rem;
  margin: 1.4rem 0 0;
}

.sol-points li {
  position: relative;
  padding-left: 1.7rem;
  font-size: .97rem;
}

.sol-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--purple);
  transform: rotate(45deg);
}

/* ---------- işleyiş adımları ---------- */
.sol-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: clamp(.9rem, 1.6vw, 1.4rem);
  counter-reset: none;
}

.sol-step {
  position: relative;
  padding: 1.15rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

/* adımlar arası ok — son adımda ve tek sütunda gizlenir */
.sol-step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1.05rem;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--line-strong);
  border-top: 2px solid var(--line-strong);
  transform: translateY(-50%) rotate(45deg);
}

.sol-step:last-child::after {
  display: none;
}

.sol-step-num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: .75rem;
  border-radius: 50%;
  background: var(--purple);
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
}

.sol-step p {
  margin: 0;
  font-size: .94rem;
}

/* .sol-step rengi 14. bölümdeki ters kontrast token setinden gelir */

@media (max-width: 900px) {
  .sol-intro {
    grid-template-columns: 1fr;
  }

  .sol-step::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sol-scene {
    animation-duration: 11s;
  }
}

/* ==========================================================================
   14. Kart yüzeyleri
   ESKİ DAVRANIŞ: kutular açık temada KOYU lacivert zeminliydi; sayfa
   içinde ağır, karanlık lekeler oluşturuyordu. YENİ: kutular sayfayla aynı
   açık aileden; ayrım GÖLGE ile değil, net bir ÇİZGİ ve hafif renk farkıyla
   yapılıyor. Böylece hiçbir yerde "çok koyu" bir blok kalmıyor ve kartlar
   yine de zeminden ayırt edilebiliyor.
   ========================================================================== */
:root {
  --color-ink-900: #000000;
  --card-bg: #ffffff;
  --card-fg: var(--body);
  --card-strong: var(--navy);
  --card-line: var(--line);
  --card-tint: var(--brand-soft);
  --card-accent: var(--brand);
  --card-muted: var(--numeral);
}

:root[data-theme="dark"] {
  --color-ink-900: #ffffff;
  --card-bg: var(--raised);
  --card-fg: var(--body);
  --card-strong: var(--navy);
  --card-line: var(--line-strong);
  --card-tint: var(--brand-tint);
  --card-accent: var(--brand);
  --card-muted: var(--numeral);
}

.sol-card,
.sol-step,
.sol-tile,
.sol-link {
  background: var(--card-bg);
  border-color: var(--card-line);
  color: var(--card-fg);
}

.sol-card p,
.sol-step p,
.sol-tile p,
.sol-link-name {
  color: var(--card-fg);
}

.sol-tile h3 {
  color: var(--card-strong);
}

/* numara ve rozetler */
.sol-card-num {
  color: var(--card-muted);
}

.sol-card:hover .sol-card-num {
  color: var(--card-accent);
}

.sol-tile-abbr,
.sol-link-abbr,
.sol-tile-go {
  color: var(--card-accent);
}

.sol-tile-abbr {
  background: var(--card-tint);
}

/* kutu içindeki simge alanları */
.sol-tile-icon,
.sol-link-icon {
  background: var(--card-tint);
  color: var(--card-accent);
}

/* hover: çerçeve markaya döner, zemin çok hafif tonlanır */
.sol-card:hover,
.sol-tile:hover,
.sol-link:hover {
  border-color: var(--card-accent);
}

.sol-link:hover {
  background: var(--card-tint);
}

/* adım numarası — her iki temada da beyaz yazıyla okunur */
.sol-step-num {
  background: var(--brand);
  color: #fff;
}

:root[data-theme="dark"] .sol-step-num {
  color: #0f1a22;
}

/* adımlar arası ok kutu dışında kalıyor, sayfa çizgisini kullanır */
.sol-step::after {
  border-color: var(--line-strong);
}

/* En dar cihazlar (≤400px): marka + demo + tema + dil + hamburger tek satıra
   sığmıyordu. CTA'yı kaldırmak yerine ögeleri küçültüyoruz. */
@media (max-width: 400px) {
  .header-inner {
    gap: .35rem;
    padding-inline: 12px;
  }

  .header-actions {
    gap: .4rem;
  }

  .brand img {
    width: 88px;
  }

  .demo-dot {
    width: 34px;
    height: 34px;
  }

  .theme-toggle {
    width: 32px;
    height: 32px;
  }

  .theme-toggle svg {
    width: 15px;
    height: 15px;
  }

  .lang {
    padding-left: .3rem;
    font-size: .78rem;
  }

  .nav-toggle {
    width: 38px;
  }
}

/* .split ile aynı sorun: grid ögeleri min-width:auto yüzünden içeriğinden
   dar olamıyor. IBAN gibi bölünemeyen uzun metinler dar ekranda taşırıyordu. */
.stack>* {
  min-width: 0;
}

.datalist dd {
  overflow-wrap: anywhere;
}

/* Koyu temada tüm birincil butonlar aynı marka morunda olsun.
   .btn--green açık temada koyu yeşil bir vurgu; koyu zeminde hem soluk
   kalıyor hem de diğer butonlarla uyumsuz görünüyordu. */
:root[data-theme="dark"] .btn--green {
  background: var(--purple);
  color: #fff;
}

:root[data-theme="dark"] .btn--green:hover {
  background: #6a1fd0;
}

/* Grup sayfalarında görsel/metin sırası dönüşümlü olsun (ritim için) */
.sol-intro--rev .sol-intro-media {
  order: 2;
}

@media (max-width: 900px) {
  .sol-intro--rev .sol-intro-media {
    order: 0;
  }
}

/* İhtiyaçlar sütunu ESKİDEN iki alt sütuna bölünüyordu (8 madde, 4 satır).
   Üçüncü sütuna Xpoda logosu eklendiğinden beri menü zaten uzun; 4 satırlık
   liste sütunun altında ~130px boşluk bırakıyordu. Tek sütuna alındı: 8
   satır sütunu dolduruyor ve üç sütun da aynı hizada bitiyor. */

/* Geniş (Xpoda) mega menü 1080px; tetikleyici sola yakın olduğu için
   ona göre ortalanınca ekranın solundan taşıp kırpılıyordu. Ögeyi
   position:static yaparak menüyü sticky header'a — yani sayfaya —
   ortalıyoruz. Ok işareti artık tetikleyiciyi göstermediği için gizlenir. */
.nav-item.has-mega--wide {
  position: static;
}

.mega--wide::before {
  display: none;
}

/* Bölüm içindeki kompakt akış satırı: adımlar ok ile ayrılmış küçük etiketler */
.sol-flowline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .55rem;
  margin: 1.2rem 0 0;
  font-size: .84rem;
}

.sol-flowline-label {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--orange);
}

.sol-flowline-step {
  padding: .18rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--body);
}

.sol-flowline-step+.sol-flowline-step::before {
  content: "→";
  margin-right: .5rem;
  margin-left: -.25rem;
  color: var(--numeral);
}

/* ==========================================================================
   15. Kaydırmaya bağlı hareket — ŞU AN ETKİSİZ
   Bu kurallar yalnızca <html class="js-reveal"> varken çalışır; o sınıfı
   ekleyen JS bloğu kapatıldığı için (bkz. assets/js/main.js, "Kaydırdıkça
   beliren ögeler — KAPATILDI") hiçbir öge gizlenmez, tüm içerik sayfa
   açılır açılmaz görünür. Kurallar, animasyon ileride geri istenirse
   yeniden yazılmasın diye bırakıldı.
   ========================================================================== */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
}

.reveal {
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* aynı grubun ögeleri peş peşe girsin */
.reveal[data-delay="1"] {
  transition-delay: .08s;
}

.reveal[data-delay="2"] {
  transition-delay: .16s;
}

.reveal[data-delay="3"] {
  transition-delay: .24s;
}

.reveal[data-delay="4"] {
  transition-delay: .32s;
}

.reveal[data-delay="5"] {
  transition-delay: .40s;
}

.reveal[data-delay="6"] {
  transition-delay: .48s;
}

.reveal[data-delay="7"] {
  transition-delay: .56s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition-duration: 1.4s;
    transform: translateY(8px);
  }
}

/* Menüden gelen hedef bölüm kısaca vurgulanır: kullanıcı hangi başlığa
   getirildiğini gözden kaçırmasın. */
@keyframes anchorFlash {
  0% {
    box-shadow: 0 0 0 0 var(--brand-tint);
    background-color: var(--brand-tint);
  }

  100% {
    box-shadow: 0 0 0 14px rgba(0, 0, 0, 0);
    background-color: transparent;
  }
}

.is-anchor-target {
  border-radius: var(--radius);
  animation: anchorFlash 0.65s var(--ease) 1;
}

.is-anchor-target:focus {
  outline: none;
}

/* ==========================================================================
   16. Anasayfa hero sahnesi (satır içi SVG)
   Hareket eden "canlı pano": kartlar süzülür, çubuklar nefes alır,
   çizgiler akar. Tek renk ailesinde kaldığı için sayfayı kirletmez.
   ========================================================================== */
.hero-scene {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Kartlar ve pano arka panelin üstünden kalksın: gölge olmadan hepsi
   aynı düzlemde duruyor ve zemine yapışmış gibi görünüyordu. */
.hero-scene .hs-board {
  animation: hsFloat 7s ease-in-out infinite;
  filter: drop-shadow(0 14px 30px rgba(14, 68, 99, .22));
}

.hero-scene .hs-card {
  animation: hsCard 5.4s ease-in-out infinite;
  filter: drop-shadow(0 10px 22px rgba(14, 68, 99, .24));
}

.hero-scene .hs-card--b {
  animation-delay: -1.8s;
}

.hero-scene .hs-card--c {
  animation-delay: -3.6s;
}

.hero-scene .hs-bar {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: hsBar 3s ease-in-out infinite;
}

.hero-scene .hs-bar--2 {
  animation-delay: -.4s;
}

.hero-scene .hs-bar--3 {
  animation-delay: -.8s;
}

.hero-scene .hs-bar--4 {
  animation-delay: -1.2s;
}

.hero-scene .hs-bar--5 {
  animation-delay: -1.6s;
}

.hero-scene .hs-line {
  stroke-dasharray: 6 6;
  animation: hsFlow 2.2s linear infinite;
}

.hero-scene .hs-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: hsRing 12s linear infinite;
}

.hero-scene .hs-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: hsDot 3.4s ease-in-out infinite;
}

.hero-scene .hs-dot--b {
  animation-delay: -1.7s;
}

@keyframes hsFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes hsCard {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes hsBar {

  0%,
  100% {
    transform: scaleY(.55);
  }

  50% {
    transform: scaleY(1);
  }
}

@keyframes hsFlow {
  to {
    stroke-dashoffset: -24;
  }
}

@keyframes hsRing {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hsDot {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-6px) scale(1.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scene .hs-board {
    animation-duration: 14s;
  }

  .hero-scene .hs-card {
    animation-duration: 11s;
  }

  .hero-scene .hs-bar {
    animation-duration: 6s;
  }

  .hero-scene .hs-line {
    animation: none;
  }

  .hero-scene .hs-ring {
    animation-duration: 30s;
  }

  .hero-blob {
    animation-duration: 40s;
  }

  .cta-band::before {
    animation: none;
  }
}

/* ==========================================================================
   17. Rakam şeridi — sayfa "boş" görünmesin diye bölümler arası dolgu
   ========================================================================== */
/* Kutular tek bir beyaz şerit içinde ince çizgilerle ayrılıyordu ve
   sayfadan ayrışmıyordu. Artık DÖRT AYRI kutu: aralarında boşluk var ve
   her biri orta koyulukta marka zemininde — koyu değil, ama zeminden
   tereddütsüz ayrılıyor. */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.8rem, 1.6vw, 1.3rem);
}

.stat {
  padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(1rem, 2vw, 1.5rem);
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--brand);
  background-image: linear-gradient(135deg, var(--brand) 0%, var(--tertiary) 100%);
  box-shadow: 0 6px 18px var(--brand-tint);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(139, 92, 246, .24);
  /* Purplish shadow on hover */
}

.stat b {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
}

.stat span {
  display: block;
  margin-top: .45rem;
  font-size: .93rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .82);
}

/* Koyu temada aynı kutular yüzeyden bir tık AÇILARAK ayrışır.
   Açık temada .stat border'sız olduğu için ayrım border yerine iç halkayla
   veriliyor — aksi hâlde kutu 2px büyüyüp tema değişiminde kayma yaratıyordu. */
:root[data-theme="dark"] .stat {
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

:root[data-theme="dark"] .stat b {
  color: var(--brand);
}

:root[data-theme="dark"] .stat span {
  color: var(--body);
}

/* Kutular artık ayrı ayrı olduğu için dar ekranda sadece sütun sayısı
   değişir; çizgi düzeltmelerine gerek kalmadı. */
@media (max-width: 860px) {
  .stat-strip {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .stat-strip {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   18. Küçük düzeltmeler
   ========================================================================== */

/* Kart ızgarası: kartlar birbirinden çizgiyle ayrılıyordu, artık kendi
   çerçeveleri var — yan yana geldiklerinde tek blok gibi okunmuyorlar. */
.cards {
  gap: clamp(.9rem, 1.6vw, 1.4rem);
}

.card {
  border: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: transform .25s var(--ease), border-color .25s var(--ease),
    box-shadow .25s var(--ease);
}

.card:last-child {
  border-right: 1px solid var(--line);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: var(--shadow);
}

.card img,
.card .card-icon {
  transition: transform .35s var(--ease);
}

.card:hover img,
.card:hover .card-icon {
  transform: translateY(-4px) scale(1.04);
}

/* ---------- vektör ikonlar ----------
   Eski PNG'ler (112–120 px) yüksek DPI ekranda pikselleşiyordu; ikonlar
   artık SVG. Ölçek ne olursa olsun keskin kalırlar. */
.card-icon {
  display: block;
  width: 74px;
  height: 74px;
  margin: 0 auto 1.4rem;
}

/* ---------- 19. Bulut platformu sahnesi ---------- */
.cloud-scene {
  display: block;
  width: 100%;
  max-width: 620px;
  /* önceki 520px'ten büyütüldü */
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

.pf-cloud {
  transform-box: fill-box;
  transform-origin: center;
  animation: pfFloat 7s ease-in-out infinite;
}

.pf-badge {
  transform-box: fill-box;
  transform-origin: center;
  animation: pfBadge 4.5s ease-in-out infinite;
}

.pf-device {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: pfDevice 6s ease-in-out infinite;
}

.pf-device--b {
  animation-delay: -2s;
}

.pf-device--c {
  animation-delay: -4s;
}

/* buluttan cihazlara akan veri izi */
.pf-flow {
  stroke-dasharray: 14 250;
  animation: pfFlow 2.6s linear infinite;
}

@keyframes pfFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

@keyframes pfBadge {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-5px) scale(1.06);
  }
}

@keyframes pfDevice {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes pfFlow {
  from {
    stroke-dashoffset: 264;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-cloud {
    animation-duration: 14s;
  }

  .pf-badge {
    animation-duration: 9s;
  }

  .pf-device {
    animation-duration: 12s;
  }

  .pf-flow {
    animation: none;
    opacity: 0;
  }
}

@media (max-width: 1024px) {
  .card:nth-child(2) {
    border-right: 1px solid var(--line);
  }

  .card:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 640px) {

  .card,
  .card:last-child {
    border: 1px solid var(--line);
  }
}

/* Yüzen "başa dön" düğmesi de yeni buton diliyle aynı olsun */
.to-top {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
}

.to-top:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* Tema düğmesi kare-yuvarlak, header'daki diğer düğmelerle aynı dilde */
.theme-toggle {
  border-radius: var(--radius-btn);
}

.theme-toggle:hover {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--brand-soft);
}

/* Dalgalar yeni tasarımda daha alçak: bölüm geçişi yumuşak kalsın ama
   sayfanın üçte birini yemesin. */
.wave {
  height: clamp(40px, 5vw, 74px);
}

/* Dekoratif dikey kolon çizgileri daha silik — yeni zeminlerle yarışmasın */
.grid-lines {
  opacity: .55;
}

/* Ana bölüm zeminleri sırayla değişerek ritim kurar */
.section--off {
  background: var(--off);
}

/* ---------- hero: dar ekran ---------- */
@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-media {
    order: -1;
    max-width: 460px;
    margin-inline: auto;
  }

  .hero h1 {
    max-width: none;
  }

  .hero-lead {
    max-width: none;
  }
}

@media (max-width: 620px) {
  .hero {
    padding-top: clamp(34px, 6vw, 48px);
  }

  .hero-facts {
    gap: .8rem 1.6rem;
  }

  .hero-facts li {
    flex: 1 1 40%;
  }

  .btn-row .btn {
    flex: 1 1 100%;
  }
}

/* Kehribarın METİN olarak geçtiği yerler koyu varyanta bağlanır (AA). */
.eyebrow,
.sol-flowline-label,
.prose ol li::before {
  color: var(--accent-text);
}

/* ==========================================================================
   20. İç sayfa başlık bandının süslemesi
   Bant yalnızca kırıntı + başlık + bir satır metin taşıdığı için boş
   görünüyordu. Aşağıdakiler tamamen dekoratif (aria-hidden) ve metin
   sütununun dışında durur; okumayı bölmezler.
   ========================================================================== */
.page-hero-deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* yumuşak haleler */
.ph-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  opacity: .55;
}

.ph-blob--a {
  width: 26vw;
  min-width: 240px;
  aspect-ratio: 1;
  left: -5%;
  top: -18%;
  background: rgba(43, 95, 126, .3);
  animation: phDrift 19s ease-in-out infinite;
}

.ph-blob--b {
  width: 22vw;
  min-width: 210px;
  aspect-ratio: 1;
  right: -4%;
  bottom: -20%;
  background: rgba(179, 118, 47, .24);
  animation: phDrift 24s ease-in-out infinite reverse;
}

@keyframes phDrift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(30px, 24px) scale(1.1);
  }
}

/* metin sütununun iki yanında süzülen modül rozetleri */
.ph-chip {
  position: absolute;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--brand);
  box-shadow: 0 8px 22px rgba(31, 43, 58, .1);
  animation: phFloat 6.5s ease-in-out infinite;
}

.ph-chip svg {
  width: 27px;
  height: 27px;
}

.ph-chip--1 {
  left: 6%;
  top: 30%;
  animation-delay: 0s;
}

.ph-chip--2 {
  left: 13%;
  top: 66%;
  animation-delay: -1.6s;
  color: var(--accent);
}

.ph-chip--3 {
  right: 7%;
  top: 34%;
  animation-delay: -3.2s;
  color: var(--accent);
}

.ph-chip--4 {
  right: 14%;
  top: 70%;
  animation-delay: -4.8s;
}

@keyframes phFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-11px);
  }
}

/* Koyu temada rozet yüzeyi de koyar; beyaz pil koyu bantta yama gibi
   duruyordu. */
:root[data-theme="dark"] .ph-chip {
  background: rgba(255, 255, 255, .07);
  border-color: var(--line-strong);
  box-shadow: none;
}

/* Dar ekranda rozetler başlığın üstüne biner — gizlenirler, haleler kalır. */
@media (max-width: 1100px) {
  .ph-chip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ph-blob {
    animation-duration: 45s;
  }

  .ph-chip {
    animation-duration: 14s;
  }
}

/* ==========================================================================
   21. Anasayfa süreç sahnesi
   "İş Süreçlerinizi Dijitalleştirin!" bölümündeki üç stok fotoğrafın yerini
   alan vektör sahne. Dört aşama (sipariş → üretim → depo → teslimat) tek
   ekranın altında sıralanır; aralarında veri akışı görünür.
   ========================================================================== */
.process-scene {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: clamp(1.6rem, 3vw, 2.5rem) auto 0;
  overflow: visible;
}

.ps-panel {
  animation: psFloat 7.5s ease-in-out infinite;
}

.ps-node {
  animation: psNode 5.5s ease-in-out infinite;
}

.ps-node--2 {
  animation-delay: -1.4s;
}

.ps-node--3 {
  animation-delay: -2.8s;
}

.ps-node--4 {
  animation-delay: -4.2s;
}

/* ekrandan aşamalara akan veri izi */
.ps-flow {
  stroke-dasharray: 18 420;
  animation: psFlow 3s linear infinite;
}

/* grafiğin kendini çizmesi */
.ps-trend {
  stroke-dasharray: 320;
  animation: psTrend 5s ease-in-out infinite;
}

@keyframes psFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@keyframes psNode {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes psFlow {
  from {
    stroke-dashoffset: 438;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes psTrend {
  0% {
    stroke-dashoffset: 320;
  }

  45%,
  100% {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-panel {
    animation-duration: 15s;
  }

  .ps-node {
    animation-duration: 12s;
  }

  .ps-flow {
    animation: none;
    opacity: 0;
  }

  .ps-trend {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   23. Sekme sahnelerinin hareketleri + iletişim telefonu
   ========================================================================== */

/* 1 — Dijital Özgürlük: modül kutucukları sırayla kıpırdar */
.ts-tile {
  transform-box: fill-box;
  transform-origin: center;
  animation: tsTile 5.5s ease-in-out infinite;
}

.ts-tile--2 {
  animation-delay: -.5s;
}

.ts-tile--3 {
  animation-delay: -1s;
}

.ts-tile--4 {
  animation-delay: -1.5s;
}

.ts-tile--5 {
  animation-delay: -2s;
}

.ts-tile--6 {
  animation-delay: -2.5s;
}

@keyframes tsTile {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.ts-chip {
  transform-box: fill-box;
  transform-origin: center;
  animation: tsChip 6s ease-in-out infinite;
}

.ts-chip--b {
  animation-delay: -3s;
}

@keyframes tsChip {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-11px);
  }
}

/* 2 — Bulut: kalkan nefes alır, senkron oku döner, raflar sırayla yanar */
.ts-shield {
  transform-box: fill-box;
  transform-origin: center;
  animation: tsShield 4.5s ease-in-out infinite;
}

@keyframes tsShield {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

.ts-sync {
  transform-box: fill-box;
  transform-origin: 210px 250px;
  animation: tsSync 7s linear infinite;
}

@keyframes tsSync {
  to {
    transform: rotate(360deg);
  }
}

.ts-rack {
  transform-box: fill-box;
  transform-origin: center;
  animation: tsRack 4.2s ease-in-out infinite;
}

.ts-rack--2 {
  animation-delay: -1.4s;
}

.ts-rack--3 {
  animation-delay: -2.8s;
}

@keyframes tsRack {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}

/* 3 — Her Yerden: cihazlar ayrı ritimlerde süzülür, yay akar */
.ts-dev {
  transform-box: fill-box;
  transform-origin: center;
  animation: tsDev 6s ease-in-out infinite;
}

.ts-dev--phone {
  animation-delay: -2s;
}

.ts-dev--tablet {
  animation-delay: -4s;
}

@keyframes tsDev {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

.ts-arc {
  animation: tsArc 2.4s linear infinite;
}

@keyframes tsArc {
  to {
    stroke-dashoffset: -38;
  }
}

/* 4 — Verimlilik: eğri çizilir, dişli döner, rozet süzülür */
.ts-trend {
  stroke-dasharray: 460;
  animation: tsTrend 5.5s ease-in-out infinite;
}

@keyframes tsTrend {
  0% {
    stroke-dashoffset: 460;
  }

  45%,
  100% {
    stroke-dashoffset: 0;
  }
}

.ts-gear {
  transform-box: fill-box;
  transform-origin: 112px 392px;
  animation: tsGear 14s linear infinite;
}

@keyframes tsGear {
  to {
    transform: rotate(360deg);
  }
}

.ts-badge {
  transform-box: fill-box;
  transform-origin: center;
  animation: tsBadge 5s ease-in-out infinite;
}

@keyframes tsBadge {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

/* iletişim bandındaki telefon */
.contact-scene {
  display: block;
  width: min(230px, 100%);
  height: auto;
  margin-inline: auto;
}

.cs-bubble {
  transform-box: fill-box;
  transform-origin: center;
  animation: csBubble 4.6s ease-in-out infinite;
}

.cs-bubble--b {
  animation-delay: -2.3s;
}

@keyframes csBubble {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.cs-ping {
  transform-box: fill-box;
  transform-origin: center;
  animation: csPing 3.4s ease-in-out infinite;
}

.cs-ping--b {
  animation-delay: -1.7s;
}

@keyframes csPing {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.22);
  }
}

@media (prefers-reduced-motion: reduce) {

  .ts-tile,
  .ts-chip,
  .ts-shield,
  .ts-rack,
  .ts-dev,
  .ts-badge,
  .cs-bubble,
  .cs-ping {
    animation-duration: 14s;
  }

  .ts-sync,
  .ts-gear {
    animation-duration: 40s;
  }

  .ts-arc {
    animation: none;
  }

  .ts-trend {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* Sekmedeki roket görseli, vektör sahnelerle aynı ölçüde dursun */
.tab-photo {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin-inline: auto;
}

/* ==========================================================================
   24. SSS akordeonu
   Native <details>/<summary> kullanılıyor: JS gerekmez, klavye ve ekran
   okuyucu desteği tarayıcıdan gelir, script yüklenmese de açılıp kapanır.
   ========================================================================== */
.faq {
  display: grid;
  gap: .7rem;
}

.faq-item {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.faq-item[open] {
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}

.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.05rem 3.2rem 1.05rem 1.3rem;
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}

/* varsayılan üçgen işaretini kaldır */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  content: '';
}

/* kendi artı/eksi işaretimiz */
.faq-item summary::after {
  content: '';
  position: absolute;
  right: 1.3rem;
  width: 13px;
  height: 13px;
  border-right: 2.5px solid var(--brand);
  border-bottom: 2.5px solid var(--brand);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .25s var(--ease);
}

.faq-item[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.faq-item summary:hover {
  color: var(--brand);
}

.faq-item>p {
  margin: 0;
  padding: 0 1.3rem 1.25rem;
  font-size: 1rem;
  color: var(--body);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after {
    transition: none;
  }
}

/* ==========================================================================
   25. Bölüm illüstrasyonları (_build/illus.js)
   Dokuz renkli çizimin ortak hareketleri. Renkler SVG içinde sabit yazılı;
   yalnızca hareket buradan gelir.
   ========================================================================== */
.il-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: ilGlow 9s ease-in-out infinite;
}

.il-bob {
  transform-box: fill-box;
  transform-origin: center;
  animation: ilBob 4.2s ease-in-out infinite;
}

.il-float {
  transform-box: fill-box;
  transform-origin: center;
  animation: ilFloat 6.5s ease-in-out infinite;
}

.il-card {
  transform-box: fill-box;
  transform-origin: center;
  animation: ilCard 5s ease-in-out infinite;
}

.il-card--b,
.il-card--2 {
  animation-delay: -1.7s;
}

.il-card--3 {
  animation-delay: -3.4s;
}

.il-orbit {
  transform-box: fill-box;
  transform-origin: center;
  animation: ilSpin 26s linear infinite;
}

.il-spin {
  animation: ilSpin 18s linear infinite;
}

.il-spin-rev {
  animation: ilSpin 14s linear infinite reverse;
}

.il-flame {
  transform-box: fill-box;
  transform-origin: top center;
  animation: ilFlame .5s ease-in-out infinite alternate;
}

.il-bar {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: ilBar 3.2s ease-in-out infinite;
}

.il-bar--2 {
  animation-delay: -.4s;
}

.il-bar--3 {
  animation-delay: -.8s;
}

.il-bar--4 {
  animation-delay: -1.2s;
}

.il-rack {
  transform-box: fill-box;
  transform-origin: center;
  animation: ilRack 4.4s ease-in-out infinite;
}

.il-rack--2 {
  animation-delay: -1.5s;
}

.il-rack--3 {
  animation-delay: -3s;
}

.il-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: ilNode 4s ease-in-out infinite;
}

.il-node--2 {
  animation-delay: -1s;
}

.il-node--3 {
  animation-delay: -2s;
}

.il-node--4 {
  animation-delay: -3s;
}

.il-stamp {
  transform-box: fill-box;
  transform-origin: center;
  animation: ilStamp 5s ease-in-out infinite;
}

.il-twk {
  transform-box: fill-box;
  transform-origin: center;
  animation: ilTwk 3.2s ease-in-out infinite;
}

.il-twk--2 {
  animation-delay: -1.1s;
}

.il-twk--3 {
  animation-delay: -2.2s;
}

.il-draw {
  stroke-dasharray: 420;
  animation: ilDraw 5.5s ease-in-out infinite;
}

.il-flow {
  stroke-dasharray: 26 340;
  animation: ilFlow 3.2s linear infinite;
}

@keyframes ilGlow {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

@keyframes ilBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes ilFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes ilCard {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes ilSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ilFlame {
  from {
    transform: scaleY(.82) scaleX(.94);
    opacity: .85;
  }

  to {
    transform: scaleY(1.12);
    opacity: 1;
  }
}

@keyframes ilBar {

  0%,
  100% {
    transform: scaleY(.6);
  }

  50% {
    transform: scaleY(1);
  }
}

@keyframes ilRack {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(6px);
  }
}

@keyframes ilNode {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.09);
  }
}

@keyframes ilStamp {

  0%,
  100% {
    transform: scale(1) rotate(0);
  }

  50% {
    transform: scale(1.07) rotate(-4deg);
  }
}

@keyframes ilTwk {

  0%,
  100% {
    transform: scale(.72);
  }

  50% {
    transform: scale(1.18);
  }
}

@keyframes ilDraw {
  0% {
    stroke-dashoffset: 420;
  }

  45%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes ilFlow {
  from {
    stroke-dashoffset: 366;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* "reduce" = kaldır değil, yavaşlat; hızlı titreşimler kapanır. */
@media (prefers-reduced-motion: reduce) {

  .il-bob,
  .il-float,
  .il-card,
  .il-bar,
  .il-rack,
  .il-node,
  .il-stamp,
  .il-twk {
    animation-duration: 13s;
  }

  .il-glow {
    animation-duration: 24s;
  }

  .il-orbit,
  .il-spin,
  .il-spin-rev {
    animation-duration: 70s;
  }

  .il-flame,
  .il-flow {
    animation: none;
  }

  .il-draw {
    animation: none;
    stroke-dashoffset: 0;
  }
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: normal;
}

:root[data-theme="dark"] .hero-video {
  opacity: 0.65;
  mix-blend-mode: normal;
}
.page-hero-deco .hero-video { opacity: 0.95; }
:root[data-theme="dark"] .page-hero-deco .hero-video { opacity: 0.85; }

.custom-kurumsal-img { opacity: 0.95 !important; }
:root[data-theme="dark"] .custom-kurumsal-img { opacity: 0.85 !important; }

.breadcrumb { display: none !important; }


:root[data-theme="dark"] p,
:root[data-theme="dark"] .lead,
:root[data-theme="dark"] .sol-intro p,
:root[data-theme="dark"] .card p,
:root[data-theme="dark"] .faq-item>p,
:root[data-theme="dark"] .stat span {
  color: var(--navy-deep) !important;
}

/* Ana sayfa video karartma (overlay) ve beyaz metinler */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 25, 47, 0.65);
  z-index: 1;
}
.hero-inner {
  position: relative;
  z-index: 2;
}
.hero-copy h1,
.hero-copy h1 span,
.hero-copy .hero-lead,
.hero-copy .hero-facts b {
  color: #ffffff !important;
}
.hero-copy .hero-facts span {
  color: #e6f1ff !important;
}


/* Diger sayfalar icin video karartma (overlay) ve beyaz metinler */
.page-hero-deco::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 25, 47, 0.65);
  z-index: 1;
}
.page-hero .container {
  position: relative;
  z-index: 2;
}
.page-hero h1,
.page-hero p,
.page-hero .breadcrumb,
.page-hero .breadcrumb a,
.page-hero .breadcrumb span {
  color: #ffffff !important;
}
.page-hero .breadcrumb a:hover {
  color: #c5d0d8 !important;
}


/* Hero icerisindeki outline butonun arka planini seffaf olmaktan cikar */
.hero-copy .btn--outline {
  background: #ffffff !important;
  color: var(--brand) !important;
  border-color: #ffffff !important;
  font-weight: 600;
}
.hero-copy .btn--outline:hover {
  background: #f0f4f8 !important;
  color: var(--brand-strong) !important;
}


.page-hero--short {
  aspect-ratio: auto !important;
  min-height: 450px !important;
}


/* --- MOBILE TWEAKS: Hero elements and large images --- */
@media (max-width: 768px) {
  .page-hero {
    min-height: 250px !important;
    padding: 60px 0 40px !important; 
    aspect-ratio: auto !important;
  }
  .page-hero h1 {
    font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
  }
  .page-hero p {
    font-size: 0.95rem !important;
    margin-top: 0.5rem !important;
  }
  
  /* Prevent large images like Xpoda octopus from taking full height */
  #demo .split-media img,
  .xpoda-octopus-img {
    max-height: 240px !important;
    width: auto !important;
    margin: 0 auto;
  }
}

/* --- MOBILE TWEAKS: Keep Demo form side-by-side --- */
@media (max-width: 860px) {
  #demo .split {
    grid-template-columns: 1.5fr 1fr !important;
    gap: 1rem;
    align-items: center;
  }
  #demo .split-media img {
    max-height: 180px !important;
    width: auto !important;
    margin: 0 auto;
  }
  #demo .prose {
    font-size: 0.9rem;
  }
  #demo .prose h2 {
    font-size: 1.5rem;
  }
}
/* Service areas layout fix */
.service-areas-col {
    grid-column: 1 / -1;
    width: 100%;
}
@media (max-width: 1180px) and (min-width: 861px) {
    .service-areas-col {
        grid-column: 2 / -1;
    }
}

@media (max-width: 860px) {
  .split--mobile-reverse > .split-media {
    order: 2;
  }
}

/* ==========================================================================
   Çerez onay banner'ı (assets/js/analytics.js tarafından enjekte edilir)
   Sınıf adı bilinçli olarak "cookie-banner" değil, "jetcp-consent" — bazı
   reklam/çerez engelleyici tarayıcı eklentileri ".cookie-banner" gibi çok
   yaygın sınıf adlarını tanıyıp banner'ı otomatik gizliyor.
   ========================================================================== */
.jetcp-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  background: var(--raised);
  color: var(--body);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
  font-size: 0.92rem;
}

.jetcp-consent p {
  margin: 0;
  max-width: 60ch;
  line-height: 1.6;
}

.jetcp-consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.jetcp-consent__actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.jetcp-consent__actions button {
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  border: 1px solid transparent;
}

.jetcp-consent__accept {
  background: var(--brand, #3b82f6);
  color: #fff;
}

.jetcp-consent__reject {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

@media (max-width: 640px) {
  .jetcp-consent {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .jetcp-consent__actions {
    justify-content: center;
  }
}

/* ==========================================================================
   Mobil: ana içerik ortalanır
   Dar ekranda hero öbeği, buton grupları, güven şeridi ve footer sütunları
   sola dayalı duruyordu; sayfa dengesiz görünüyordu. Burada yalnızca KISA
   metinler ve eylemler ortalanır. Uzun paragraflar (.prose), madde
   listeleri, SSS soruları ve kart içi metinler okunabilirlik için bilerek
   sola dayalı bırakılmıştır — ortalanmış uzun metinde satır başları kayar.
   ========================================================================== */
/* Dekoratif blur katmanları (.split-media içindeki inline "left:-5%;width:110%"
   kutuları) ~600px civarında gövdeyi 4px yatay kaydırıyordu. clip, hidden ile
   karşılaştırıldığında yapışkan başlığı (.header position: sticky) bozmaz. */
html {
  overflow-x: clip;
}

@media (max-width: 640px) {

  /* --- Anasayfa hero --- */
  /* h1 clamp değerinin alt sınırı 2.8rem olarak sabitti ve <em> nowrap taşıyordu;
     "bulut teknolojisi" 375px ekranda satıra sığmayıp .hero (overflow: hidden)
     tarafından sağdan kırpılıyordu. Dar ekranda ölçek viewporta bağlanır ve
     satır kırılmasına izin verilir. */
  .hero h1 {
    font-size: clamp(1.9rem, 8.6vw, 2.8rem);
  }

  .hero h1 em {
    white-space: normal;
  }

  .hero-copy {
    text-align: center;
  }

  /* rozet satırı: index.html içinde satır içi flex olarak duruyor */
  .hero-copy>div:first-child {
    justify-content: center;
  }

  .hero-lead {
    margin-inline: auto;
  }

  .hero-facts {
    justify-content: center;
    text-align: center;
  }

  /* --- Buton grupları (hero, CTA, prose içi) --- */
  .btn-row {
    justify-content: center;
  }

  /* --- Footer --- */
  .footer-brand {
    text-align: center;
  }

  .footer-brand img,
  .footer-brand>a {
    margin-inline: auto;
  }

  .footer-col {
    text-align: center;
  }

  /* ikonlar üstte, e-posta ve telefon altında; hepsi ortada */
  .footer-contact {
    flex-direction: column;
    gap: 1rem;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}