/* ==========================================================================
   AtlasDrop — Ana stil dosyası
   Bölümler:
   01. Değişkenler & sıfırlama
   02. Arka plan katmanları
   03. Header / navigasyon / dil butonu / mobil menü
   04. Hero
   05. Metrikler
   06. Genel bölüm düzeni
   07. Tanıtım (intro)
   08. Ürün kartları
   09. Galeri
   10. Yol haritası
   11. Öne çıkanlar (features)
   12. Teknik özellikler
   13. Uygulama alanları
   14. Ekip
   15. Çözümler
   16. Kapanış / iletişim
   17. Footer
   18. Animasyonlar & erişilebilirlik
   19. Responsive
   ========================================================================== */

/* 01. Değişkenler & sıfırlama ---------------------------------------------- */
:root {
  --bg: #050506;
  --paper: #f7f7f4;
  --muted: #a8a8ae;
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.22);
  --blue: #70cbff;
  --blue-deep: #4490ff;
  --card: rgba(255, 255, 255, 0.02);
  --radius: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1200px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Sabit header'ın başlıkları kesmemesi için */
  scroll-padding-top: 110px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--paper);
  font-family: Quicksand, "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

::selection { background: var(--blue); color: #071014; }

/* Klavye kullanıcıları için görünür odak halkası */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* İçeriğe atla bağlantısı (ekran okuyucu / klavye) */
.skip-link {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 200;
  background: var(--paper);
  color: #071014;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  /* Sadece klavye ile odaklanınca görünür — sayfa genişliğini etkilemez */
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }

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

/* 02. Arka plan katmanları -------------------------------------------------- */
#stars {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.page-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 67% 21%, rgba(112, 203, 255, 0.11), transparent 26%);
  pointer-events: none;
}

/* 03. Header ---------------------------------------------------------------- */
/* Yüzen kapsül başlık: marka + menü yuvarlak bir kutunun içinde,
   dil değiştirici ve demo butonu kutunun dışında sağda durur. */
.site-header {
  /* Sayfa kaydırılınca başlık bizimle geliyor. */
  position: sticky;
  top: 0;
  /* Mobil menü panelinden (z-index 80) YÜKSEK olmalı,
     aksi halde menü açıkken kapatma (X) butonu panelin altında kalır. */
  z-index: 90;
  max-width: 1440px;
  padding: 16px 30px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
/* Başlık artık sayfayla kaydığı için altından metin geçmiyor;
   arkasındaki bulanıklık bandına gerek kalmadı. */
.header-bar {
  position: relative;   /* karartma bandının üstünde kalsın */
  display: flex;
  align-items: center;
  gap: 34px;
  min-width: 0;
  padding: 9px 26px 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(9, 13, 19, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s,
              padding 0.3s var(--ease);
}
.header-bar, .header-tools { position: relative; }

/* Marka: kare işaret + gerçek metin yazı markası.
   Yazıyı görsel yapmak yerine metin bırakmak her boyutta net durmasını,
   ekran okuyucuların okumasını ve dosya boyutunun küçük kalmasını sağlar. */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand-mark {
  display: block;
  width: auto;
  height: 42px;
  /* Renk SVG dosyasının içinde. <img> ile yüklenen SVG'ye sayfanın
     CSS rengi geçmez; o yüzden burada color vermek işe yaramaz. */
  transition: opacity 0.25s, transform 0.25s var(--ease);
}
.brand:hover .brand-mark { opacity: 0.82; transform: translateY(-1px); }
/* Menü kapsülün içinde; alt çizgi kapsül kenarına değmesin */
.header-bar .desktop-nav a { padding: 4px 0; }

/* Marka ile menüyü ayıran ince dikey çizgi (örnekteki gibi) */
.header-bar .brand + .desktop-nav::before {
  content: "";
  align-self: stretch;
  width: 1px;
  margin: -2px 20px -2px 0;
  background: var(--line-strong);
  flex: 0 0 auto;
}
.header-bar .desktop-nav { align-items: center; }
[dir="rtl"] .header-bar .brand + .desktop-nav::before { margin: -2px 0 -2px 20px; }

.brand-word {
  color: var(--paper);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1;
}
.brand-word span { color: var(--blue); }

/* Görsel yüklenmezse yazı tek başına marka olarak kalır */
.brand.no-logo .brand-mark { display: none; }

.desktop-nav { display: flex; gap: 30px; }

.desktop-nav a,
.text-link {
  color: #c8c8ce;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.desktop-nav a { position: relative; padding: 6px 0; white-space: nowrap; }

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--blue);
  transition: width 0.3s var(--ease);
}
.desktop-nav a:hover::after,
.desktop-nav a.active::after { width: 100%; }
.desktop-nav a.active,
.desktop-nav a:hover { color: #fff; }

.header-tools { position: relative; display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

/* Dil değiştirici */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  padding: 3px;
  gap: 2px;
}
.lang-switch button {
  appearance: none;
  background: none;
  border: 0;
  color: #9a9aa2;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 6px 11px;
  border-radius: 99px;
  cursor: pointer;
  transition: 0.2s;
}
.lang-switch button:hover { color: #fff; }
.lang-switch button[aria-pressed="true"] {
  background: var(--paper);
  color: #071014;
}

.header-cta,
.button {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: #fff;
  text-decoration: none;
  border: 1px solid #d4d4d8;
  /* Kapsül başlıkla aynı dil: tüm butonlar hap biçiminde */
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 14px;
  font-family: inherit;
  white-space: nowrap;
  transition: 0.25s var(--ease);
}
.header-cta .arrow { font-size: 20px; line-height: 1; }

.button.primary {
  color: #071014;
  background: var(--paper);
  font-weight: 700;
  border: 0;
}
.button:hover,
.header-cta:hover {
  transform: translateY(-3px);
  background: var(--blue);
  border-color: var(--blue);
  color: #071014;
}
.text-link:hover { color: var(--blue); }

/* Mobil menü butonu (hamburger) */
.menu-button {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  z-index: 90;
}
.menu-button span {
  display: block;
  background: #fff;
  width: 25px;
  height: 1.5px;
  margin: 6px 0;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.menu-button[aria-expanded="true"] span:first-child { transform: translateY(7.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobil menü paneli */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(5, 5, 6, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 108px 26px 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav a {
  color: #dcdce2;
  text-decoration: none;
  font-size: 22px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-of-type { border-bottom: 0; }
.mobile-nav .button {
  margin-top: 26px;
  justify-content: center;
  gap: 14px;
  font-size: 15px;
  padding: 15px 20px;
  border-bottom: 0;
}
body.nav-open { overflow: hidden; }

/* 04. Hero ------------------------------------------------------------------ */
.hero {
  min-height: 650px;
  max-width: 1280px;
  margin: auto;
  padding: 85px 32px 55px;
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: center;
  /* Mobilde küre kenarlardan taştığı için burada kırpılır:
     bu olmazsa sayfada 13px yatay kaydırma oluşuyor. */
  overflow: hidden;
}
.hero-copy { z-index: 2; }

.eyebrow {
  color: #9a9aa2;
  font-size: 11px;
  letter-spacing: 1.6px;
  font-weight: 700;
  margin: 0 0 20px;
  text-transform: uppercase;
}
/* Başlık üstündeki küçük mavi çizgi.
   DİKKAT: sadece .line sınıfına uygulanır — ".eyebrow span" yazılırsa
   içerideki çeviri span'i de 25px'e sıkışır ve yazı alt satıra taşar. */
.eyebrow .line {
  display: inline-block;
  width: 25px; height: 1px;
  background: var(--blue);
  vertical-align: middle;
  margin-right: 8px;
}

.hero h1 {
  font-size: clamp(45px, 5.4vw, 79px);
  line-height: 0.98;
  letter-spacing: -0.07em;
  margin: 0 0 27px;
  font-weight: 500;
}
.hero h1 .accent { color: var(--blue); }

.lede { max-width: 480px; margin: 0; color: #b4b4ba; font-size: 17px; line-height: 1.65; }

/* Üç eylem var: iki buton + bir metin link. Dar sütunda metin link
   alt satıra kayar; butonlar yan yana kalır. */
.hero-actions {
  display: flex; align-items: center;
  gap: 14px 18px;
  margin-top: 33px;
  flex-wrap: wrap;
}
.hero-actions .text-link { margin-left: 4px; }
[dir="rtl"] .hero-actions .text-link { margin-left: 0; margin-right: 4px; }

.orb-wrap { height: 590px; position: relative; margin-top: -60px; }
.orb-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: rotate(-12deg);
}
.orbit-one { width: 88%; height: 23%; bottom: 20px; left: 7%; }
.orbit-two { width: 72%; height: 17%; bottom: 4px; left: 16%; }

.orb-label { position: absolute; color: #929299; font-size: 9px; letter-spacing: 1.2px; }
.orb-label b {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
  margin-left: 5px;
  animation: pulse 2.4s infinite;
}
.label-one { right: 8%; top: 23%; }
.label-two { left: 5%; bottom: 23%; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(112, 203, 255, 0.55); }
  70%      { box-shadow: 0 0 0 7px rgba(112, 203, 255, 0); }
}

/* 05. Metrikler ------------------------------------------------------------- */
.metrics-wrap {
  max-width: var(--maxw);
  margin: -20px auto 128px;
  padding: 0 20px;
}
.metrics-wrap .eyebrow { margin-bottom: 18px; }

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

/* Rakamların ölçüm değil hedef olduğunu söyleyen not */
.metric-note {
  margin: 18px 0 0;
  max-width: 720px;
  color: #8a8a92;
  font-size: 13px;
  line-height: 1.6;
}
.metric-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  min-height: 110px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 17px;
  background: var(--card);
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.metric-card:hover { border-color: rgba(112, 203, 255, 0.45); transform: translateY(-4px); }
.metric-card strong { font-size: 30px; letter-spacing: -1.5px; display: block; }
.metric-card small { font-size: 17px; }
.metric-card p { font-size: 13px; color: #ababaf; margin: 7px 0 0; }

/* İkonlar: elle çizilmiş SVG. Renk currentColor ile gelir,
   mavi vurgu parçaları .ic-a sınıfını taşır. */
.icon {
  display: block;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  overflow: visible;
}
.icon .ic-a { fill: var(--blue); stroke: var(--blue); }
.icon path.ic-a { fill: none; }
.icon .ic-f { fill: var(--blue); stroke: none; }

/* KARMA İKON SİSTEMİ
   Küçük boyutta (≤40px) dolu ikon kullanılır — çizgi ikonlar o boyutta siliniyor.
   Büyük boyutta ince çizgi kullanılır — dolu olan ağır durur.
   Dolu ikonların iç detayları "cut" ile açılır; rengi zeminle aynı olmalı,
   farklı zeminli bir yere koyarsan o kapsayıcıda --icon-cut değerini değiştir. */
.icon-solid {
  fill: currentColor;
  stroke: none;
}
.icon-solid .cut { fill: var(--icon-cut, #0a0a0b); }

.metric-icon {
  width: 36px; height: 36px;
  flex: 0 0 auto;
  color: #eaeaee;
  transition: color 0.3s;
}
.metric-card:hover .metric-icon { color: #fff; }

/* 06. Genel bölüm düzeni ---------------------------------------------------- */
.section {
  max-width: var(--maxw);
  margin: auto;
  padding: 100px 20px;
  border-top: 1px solid var(--line);
}
.section h2 {
  font-size: clamp(36px, 4vw, 61px);
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 500;
  margin: 0;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 44px;
}
.section-head .eyebrow { margin-bottom: 18px; }

/* 07. Tanıtım --------------------------------------------------------------- */
.intro-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 80px; align-items: end; }
.intro-grid p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }

/* 08. Ürün kartları --------------------------------------------------------- */
/* Kartın üstünde artık ikon değil cihazın kendi konsept görseli var; ürün
   ailesi ile cihaz vitrini tek bölümde birleşti.
   Izgara yerine esnek satır: 8 kart 3+3+2 diziliyor ve son satır ortalanıyor.
   Grid'de son satırdaki iki kart sola yapışık kalıyor, dengesiz duruyordu. */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.product-card {
  /* Sabit sütun genişliği: son satırdaki iki kart, üstteki üçlü satırla
     birebir aynı boyda olsun diye esneme kapalı. */
  flex: 0 0 calc((100% - 32px) / 3);
  max-width: calc((100% - 32px) / 3);
  display: block;
  padding: 0 0 52px;
  border: 1px solid rgba(112, 203, 255, 0.25);
  border-radius: 13px;
  background: linear-gradient(145deg, #0d1826, #080b10);
  color: var(--paper);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: 0.25s var(--ease);
}
/* Mavi parıltı görselin altında, metnin arkasında kalıyor */
.product-card::before {
  content: "";
  position: absolute;
  width: 190px; height: 190px;
  right: -46px; bottom: -74px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(68, 144, 255, 0.32), transparent 68%);
}
.product-card:hover {
  transform: translateY(-5px);
  border-color: var(--blue);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
}

/* Görsel çerçevesi — kartın tam genişliğinde, üst köşeleri kart yarıçapında */
.product-visual {
  position: relative; z-index: 1;
  display: block;
  width: auto; height: auto;
  margin: 0 0 18px;
  aspect-ratio: 3 / 2;
  border: 0;
  border-bottom: 1px solid rgba(112, 203, 255, 0.18);
  border-radius: 12px 12px 0 0;
  background: #08101a;
  overflow: hidden;
}
.product-visual img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}
.product-card:hover .product-visual img { transform: scale(1.05); }

.product-card h3 {
  position: relative; z-index: 1;
  text-transform: uppercase;
  font-size: 18px;
  margin: 0 0 8px;
  padding: 0 20px;
}
.product-card p {
  position: relative; z-index: 1;
  margin: 0;
  padding: 0 20px;
  color: #b8bdc8;
  font-size: 14px;
  line-height: 1.5;
}
.product-card b {
  position: absolute; z-index: 1;
  bottom: 19px; left: 20px;
  color: var(--blue);
  font-size: 12px;
  letter-spacing: 0.4px;
}

/* #cihazlar eski bağlantısı bozulmasın diye görünmez çapa */
.anchor-alias { display: block; height: 0; }

/* 09. Galeri ---------------------------------------------------------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-grid article {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0d0e10;
}
.gallery-media {
  /* Görsel yüklenmezse arkada boşluk yerine degrade görünür */
  background: linear-gradient(145deg, #101d2c, #0a0d13);
  aspect-ratio: 4 / 3;
}
.gallery-grid img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.gallery-grid article:hover img { transform: scale(1.05); }
.gallery-grid article > div:last-child { padding: 20px 22px 24px; }
.gallery-grid p { font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.gallery-grid p span { color: var(--blue); }
.gallery-grid h3 { font-size: 19px; margin: 0 0 8px; font-weight: 500; }
.gallery-grid small { color: #aaaab0; font-size: 13px; line-height: 1.5; display: block; }

/* 10. Yol haritası ---------------------------------------------------------- */
.roadmap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.roadmap-grid article {
  padding: 22px 20px;
  border-top: 1px solid rgba(112, 203, 255, 0.6);
  background: rgba(255, 255, 255, 0.025);
  transition: background 0.3s;
}
.roadmap-grid article:hover { background: rgba(112, 203, 255, 0.06); }
.roadmap-grid span { color: var(--blue); font-size: 12px; letter-spacing: 0.5px; }
.roadmap-grid h3 { font-size: 20px; margin: 38px 0 10px; font-weight: 500; }
.roadmap-grid p { margin: 0; color: #aaaab0; font-size: 14px; line-height: 1.55; }

/* 11. Öne çıkanlar ---------------------------------------------------------- */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.feature-grid p {
  margin: 0;
  padding: 22px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.feature-grid b { display: inline-block; width: 44px; color: var(--blue); font-size: 12px; }

/* 12. Teknik özellikler ----------------------------------------------------- */
.specs > h2 { margin-bottom: 42px; }
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.spec-grid article {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.3s;
}
.spec-grid article:hover { border-color: rgba(112, 203, 255, 0.4); }
.spec-grid h3 { font-size: 20px; margin: 0 0 12px; font-weight: 500; }
.spec-grid p { margin: 0; color: #aaaab0; font-size: 14px; line-height: 1.55; }

/* 13. Uygulama alanları ----------------------------------------------------- */
.application-list { display: flex; gap: 10px; flex-wrap: wrap; }
.application-list span {
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  color: #ddd;
  font-size: 14px;
  transition: 0.25s;
}
.application-list span:hover { border-color: var(--blue); color: #fff; }

/* 14. Ekip ------------------------------------------------------------------ */
.team-card {
  max-width: 760px;
  display: grid;
  grid-template-columns: 210px 1fr;
  align-items: center;
  gap: 34px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
/* Fotoğraf KIRPILMIYOR: kare olmayan bir görsel verildiğinde "cover"
   yüzün yarısını kesiyordu. "contain" ne verilirse tamamını gösteriyor;
   kare bir portre verilirse kutuyu zaten tam dolduruyor. */
.team-card img {
  width: 210px; height: 210px;
  object-fit: contain;
  border-radius: 9px;
  background: linear-gradient(145deg, #101d2c, #0a0d13);
}
.team-card p { font-size: 11px; letter-spacing: 1.5px; color: var(--blue); margin: 0 0 12px; }
.team-card h3 { font-size: 34px; margin: 0 0 15px; font-weight: 500; letter-spacing: -0.03em; }
.team-card span { color: #aaaab0; font-size: 14px; line-height: 1.5; }

/* 15. Çözümler -------------------------------------------------------------- */
/* Dört çözüm alanı, sekiz cihazı kapsıyor. Kartların tamamı artık bağlantı:
   her biri cozumler.html'deki kendi bölümüne gidiyor. */
.solution-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.solution-card {
  display: block;
  min-height: 300px;
  padding: 24px 24px 62px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  background: radial-gradient(circle at 85% 15%, rgba(112, 203, 255, 0.08), transparent 30%);
  color: var(--paper);
  text-decoration: none;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.solution-card:hover { border-color: rgba(112, 203, 255, 0.45); transform: translateY(-4px); }
.solution-grid span { font-size: 12px; color: var(--blue); }
/* İki satıra taşan başlık ("Operasyon ve kontrol") altındaki metni aşağı
   itiyor, kartlar hizasız duruyordu. Başlık kutusu iki satıra sabitlendi. */
.solution-grid h3 {
  font-size: 22px;
  margin: 52px 0 12px;
  min-height: 54px;
  font-weight: 500;
}
.solution-grid p { color: #aaaab0; font-size: 14px; line-height: 1.55; margin: 0; }
.solution-dev {
  position: absolute;
  left: 24px; right: 56px; bottom: 22px;
  color: #7d8794;
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}
.solution-grid i { position: absolute; right: 24px; bottom: 20px; font-size: 24px; font-style: normal; color: var(--blue); }

/* 16. Kapanış / iletişim ---------------------------------------------------- */
.closing { text-align: center; padding: 140px 20px; }
.closing h2 { margin-bottom: 22px; }
.closing .lede { margin: 0 auto 35px; }
.closing .eyebrow { display: block; }
.contact-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* 17. Footer ---------------------------------------------------------------- */
.site-footer {
  max-width: var(--maxw);
  margin: auto;
  padding: 34px 20px 40px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  color: #77777e;
  font-size: 12px;
}
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: #9a9aa2; text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--blue); }

/* Sunucuya ulaşılamadığında beliren "e-posta ile gönder" bağlantısı */
.form-mail {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 6px 15px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
/* Hover'da `background: currentColor` yazıyordu; hemen ardından rengi de
   koyuya çevirince arka plan da koyu oluyor, buton simsiyah bir bloğa
   dönüşüyordu. Renkler artık açıkça yazılı. */
.form-mail:hover,
.form-mail:focus-visible {
  background: #ff9a9a;
  border-color: #ff9a9a;
  color: #2a0d0d;
}
.form-mail:focus-visible { outline: 2px solid #ff9a9a; outline-offset: 2px; }
[dir="rtl"] .form-mail { margin-left: 0; margin-right: 10px; }

/* Sosyal medya rozetleri */
.footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #9a9aa2;
  transition: 0.22s var(--ease);
}
.footer-social svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.footer-social a:hover {
  color: #071014;
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.footer-social a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* 18. Animasyonlar & erişilebilirlik ---------------------------------------- */
/* ÖNEMLİ: Gizleme kuralları yalnızca <html class="js-anim"> varken geçerlidir.
   Bu sınıfı index.html'in <head> bölümündeki küçük script ekler.
   Böylece JavaScript kapalıysa veya bir hata verirse içerik gizli kalmaz,
   sayfa bomboş görünmez. */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js-anim .reveal.is-visible { opacity: 1; transform: none; }

/* Izgara içindeki kartlar sırayla belirir */
.js-anim .reveal-group > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js-anim .reveal-group.is-visible > * { opacity: 1; transform: none; }
.js-anim .reveal-group.is-visible > *:nth-child(1) { transition-delay: 0.00s; }
.js-anim .reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.07s; }
.js-anim .reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.14s; }
.js-anim .reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.21s; }
.js-anim .reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.28s; }
.js-anim .reveal-group.is-visible > *:nth-child(6) { transition-delay: 0.35s; }

/* Hareket azaltma tercihi olan kullanıcılar için tüm animasyonlar kapanır */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js-anim .reveal,
  .js-anim .reveal-group > * { opacity: 1 !important; transform: none !important; }
}

/* Yazdırma */
@media print {
  #stars, .page-glow, .orb-wrap, .menu-button, .mobile-nav, .lang-switch { display: none !important; }
  body { background: #fff; color: #000; }
  .section { break-inside: avoid; }
}

/* 19. Responsive ------------------------------------------------------------ */
/* Menüde 8 madde var; dar ekranda kademeli olarak sıkışır.
   Demo butonu 560px'e kadar görünür kalır — sitenin ana eylemi o. */
@media (max-width: 1260px) {
  .site-header { padding: 0 30px; }
  .desktop-nav { gap: 19px; }
  .desktop-nav a { font-size: 13px; }
  .header-cta { padding: 10px 14px; font-size: 13px; gap: 10px; }
  .header-cta .arrow { font-size: 17px; }
}

@media (max-width: 1080px) {
  .site-header { padding: 12px 20px; gap: 14px; }
  .header-bar { gap: 16px; padding-left: 14px; padding-right: 16px; }
  .desktop-nav { gap: 13px; }
  .desktop-nav a { font-size: 12.5px; }
  .header-tools { gap: 10px; }
  .lang-switch button { padding: 5px 8px; font-size: 11px; }
  .header-cta { padding: 9px 12px; font-size: 12.5px; gap: 8px; }
}

/* Menüye dokuzuncu öğe ("Ana sayfa") eklenince 1000 px altında sığmıyor;
   hamburger artık 900 değil 1000 px'ten itibaren devreye giriyor. */
@media (max-width: 1000px) {
  .desktop-nav { display: none; }
  .menu-button { display: block; }
}

@media (max-width: 900px) {
  .site-header { padding: 12px 18px; }
  .brand-mark { height: 34px; }
  .brand-word { font-size: 21px; }
  .desktop-nav { display: none; }
  .menu-button { display: block; }

  .hero { grid-template-columns: 1fr; min-height: auto; padding: 60px 22px 0; }
  .hero h1 { font-size: clamp(42px, 9vw, 57px); }
  .lede { font-size: 16px; }
  .orb-wrap { height: 425px; margin: -20px -35px 0; }

  .metrics-wrap { margin: 0 auto 65px; padding: 0 22px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-card { min-height: 90px; padding: 14px; }
  .metric-card strong { font-size: 25px; }
  .metric-icon { width: 30px; height: 30px; }

  .section { padding: 72px 22px; }
  .section-head { align-items: start; flex-direction: column; gap: 18px; }

  .intro-grid,
  .gallery-grid { grid-template-columns: 1fr; gap: 24px; }
  .solution-grid { grid-template-columns: 1fr; gap: 14px; }
  .roadmap-grid,
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .solution-dev { position: static; display: block; margin-top: 16px; right: auto; }
  .solution-card { padding-bottom: 46px; min-height: 0; }
  .product-card { flex-basis: calc((100% - 16px) / 2); max-width: calc((100% - 16px) / 2); }
  .feature-grid { grid-template-columns: 1fr; }

  .team-card { grid-template-columns: 1fr; }
  .team-card img { width: 100%; height: 220px; }
  .team-card h3 { font-size: 28px; }

  .closing { padding: 90px 22px; }
  .site-footer { margin: 0 22px; padding-left: 0; padding-right: 0; flex-direction: column; align-items: flex-start; }
  .label-two { display: none; }
}

@media (max-width: 480px) {
  .metrics { grid-template-columns: 1fr; }
  .roadmap-grid, .spec-grid { grid-template-columns: 1fr; }
  .product-card { flex-basis: 100%; max-width: 100%; }
  .orb-wrap { height: 340px; }
  .hero-actions { gap: 13px; }
  .text-link { font-size: 13px; }
  .solution-grid h3 { margin-top: 40px; }
}

/* Çok dar ekran (320-360 px: eski iPhone SE, küçük Android)
   -------------------------------------------------------------------------
   Marka + dil düğmeleri + demo butonu + hamburger yan yana sığmıyor ve sayfa
   yatay kayıyordu. Demo butonu burada gizleniyor — mobil menüde ve hero'da
   zaten var, yani erişim kaybolmuyor. */
@media (max-width: 360px) {
  .header-cta { display: none; }
  .header-tools { gap: 8px; }
  .lang-switch button { padding: 5px 6px; font-size: 10.5px; letter-spacing: 0.3px; }
  .site-header { padding-left: 10px; padding-right: 10px; }
  .header-bar { padding-left: 12px; padding-right: 14px; }
  .section, .hero { padding-left: 16px; padding-right: 16px; }
  .menu-button { width: 36px; }
}

/* 404 sayfası --------------------------------------------------------------- */
.error-page {
  min-height: calc(100vh - 96px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 60px 22px;
}
.error-page .code {
  font-size: clamp(90px, 18vw, 190px);
  line-height: 1;
  letter-spacing: -0.08em;
  margin: 0 0 10px;
  font-weight: 500;
  color: var(--blue);
}
.error-page h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 500; margin: 0 0 18px; letter-spacing: -0.04em; }
.error-page .lede { margin: 0 auto 32px; }

/* ==========================================================================
   20. ALT SAYFA BİLEŞENLERİ
   (ürün detay, yatırımcı, blog, KVKK sayfaları + anasayfa yeni bölümleri)
   ========================================================================== */

/* --- Alt sayfa başlığı --- */
.page-hero {
  max-width: var(--maxw);
  margin: auto;
  padding: 60px 20px 20px;
}
.page-hero h1 {
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.055em;
  font-weight: 500;
  margin: 0 0 24px;
}
.page-hero .lede { max-width: 620px; }

.breadcrumb {
  display: inline-block;
  color: #9a9aa2;
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 26px;
  transition: color 0.2s;
}
.breadcrumb:hover { color: var(--blue); }

/* Uzun paragraf — bölüm içi açıklama metni */
.big-text {
  max-width: 720px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.72;
  margin: 0 0 8px;
}
.big-text b { color: var(--paper); font-weight: 600; }

/* Ürün sayfasındaki büyük simge */
.product-intro .intro-grid { align-items: center; }
.product-visual.big {
  width: 152px; height: 152px;
  border-radius: 28px;
  margin: 0 0 0 auto;
}
.product-visual.big .icon { width: 82px; height: 82px; stroke-width: 1; }

/* --- Diğer ürünler kutucukları --- */
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mini-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--paper);
  text-decoration: none;
  background: var(--card);
  transition: 0.25s var(--ease);
}
.mini-card:hover { border-color: rgba(112, 203, 255, 0.5); transform: translateY(-3px); }
.mini-icon { width: 30px; height: 30px; color: var(--blue); flex: 0 0 auto; }
.mini-card b { font-size: 15px; font-weight: 600; }

/* --- Yatırımcı sayfası rakamları --- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card {
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: radial-gradient(circle at 82% 12%, rgba(112, 203, 255, 0.09), transparent 42%);
}
.stat-card strong {
  display: block;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.04em;
  color: var(--blue);
  margin-bottom: 8px;
}
.stat-card p { margin: 0; font-size: 13px; color: #ababaf; line-height: 1.45; }

/* ── PAZAR KARTLARI BAŞLANGIÇ ────────────────────────────────────────────
   Cihaz bazlı pazar kartları. Sekiz cihazın her biri kendi pazarıyla.
   Kaynaklar farklı kuruluşlardan geldiği için kart altında kuruluş adı
   yazıyor; rakamlar toplanamaz. Bu blok build/market8.py tarafından
   üretilir — elle değiştirirsen script bir dahaki çalıştırmada ezer. */
.mkt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mkt-card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: radial-gradient(circle at 82% 12%, rgba(112, 203, 255, 0.07), transparent 46%);
}
.mkt-dev {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.mkt-no {
  flex: 0 0 auto; padding: 2px 8px; font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; color: var(--blue);
  border: 1px solid var(--line-strong); border-radius: 999px;
}
.mkt-name { margin: 0 0 14px; font-size: 12px; line-height: 1.4; color: #8f8f97; }
/* Yıldız: kapsamı diğerlerinden farklı olan iki satırı alttaki nota bağlar. */
.mkt-star { color: var(--blue); font-weight: 600; }
.mkt-val { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* Punto bilerek ölçülü: en uzun değer ("2,2–5,4 mlr $") yanındaki taban
   yılıyla birlikte tek satırda kalsın, kartlar arası hizalama bozulmasın. */
.mkt-val strong {
  font-size: clamp(19px, 1.75vw, 24px); letter-spacing: -0.04em; color: var(--blue);
}
.mkt-val > span { font-size: 12px; color: #8f8f97; white-space: nowrap; }
.mkt-next { margin: 4px 0 0; font-size: 13px; color: #ababaf; }
/* Ok, okuma yönünü gösteriyor; Arapçada sağdan sola dönmesi gerekiyor. */
.mkt-arrow { display: inline-block; }
[dir="rtl"] .mkt-arrow { transform: scaleX(-1); }
.mkt-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 4px 12px;
  margin: auto 0 0; padding-top: 12px;
  font-size: 12px; color: #75757d;
}
.mkt-foot .mkt-cagr { color: #ababaf; }
.mkt-foot .mkt-cagr b { color: var(--ink); font-weight: 600; }
.mkt-card + .mkt-card { margin-top: 0; }
@media (max-width: 1180px) { .mkt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .mkt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .mkt-grid { grid-template-columns: 1fr; } }
/* ── PAZAR KARTLARI BİTİŞ ─────────────────────────────────────────────── */

.source-note {
  max-width: 720px;
  margin: 26px 0 34px;
  padding-left: 16px;
  border-left: 2px solid rgba(112, 203, 255, 0.4);
  color: #8f8f97;
  font-size: 13px;
  line-height: 1.6;
}

/* --- SSS (açılır kapanır) --- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 44px 24px 0;
  font-size: 18px;
  font-weight: 500;
  position: relative;
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue); }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  font-weight: 400;
  color: var(--blue);
  transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { padding: 0 60px 26px 0; }
.faq-a p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.72; }

/* --- İletişim formu --- */
.contact-form-wrap {
  max-width: 680px;
  margin: 70px auto 0;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  text-align: left;
}
.contact-form-wrap h3 {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 24px;
  letter-spacing: -0.02em;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field > span { font-size: 13px; color: #b4b4ba; }

.field input,
.field textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 13px 14px;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: rgba(112, 203, 255, 0.05);
}
.field input[aria-invalid],
.field textarea[aria-invalid] { border-color: #ff8080; }

.field-error { color: #ff9a9a; font-size: 12px; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 22px 0 24px;
  font-size: 13px;
  color: #ababaf;
  line-height: 1.55;
  position: relative;
}
.consent input { margin-top: 2px; accent-color: var(--blue); width: 16px; height: 16px; flex: 0 0 auto; }
.consent a { color: var(--blue); }
.consent .field-error { display: block; margin-top: 6px; }

/* Spam tuzağı — ekranda görünmez ama HTML'de durur ki bot doldursun.
   DİKKAT: "left: -9999px" KULLANMA. Sağdan sola (Arapça) düzende taşma
   yönü tersine döner ve sayfa 10.000 piksel genişler. clip yöntemi
   her iki yönde de güvenlidir. */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-status { margin: 16px 0 0; font-size: 14px; min-height: 20px; }
.form-status.is-ok { color: #8ee6a8; }
.form-status.is-err { color: #ff9a9a; }
.form-status.is-busy { color: #ababaf; }

/* --- Kontrol paneli tanıtımı --- */
.dash {
  margin-top: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: linear-gradient(160deg, #0b1420, #07090d);
  overflow: hidden;
}
.dash-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.dash-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6ee7a0;
  animation: pulse 2.4s infinite;
  flex: 0 0 auto;
}
.dash-top b { font-size: 11px; letter-spacing: 1.4px; color: #6ee7a0; }
.dash-note { margin-left: auto; font-size: 11px; color: #77777e; }

/* Duraklat / devam düğmesi */
.dash-toggle {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: transparent;
  color: #9a9aa2;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: 0.2s;
}
.dash-toggle:hover { border-color: var(--blue); color: var(--paper); }
.dash-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Duraklatılmışken yeşil nabız atmasın — durum yanlış okunmasın */
.dash.is-paused .dash-dot { animation: none; background: #77777e; }
.dash.is-paused .dash-top b { color: #77777e; }

.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}
.dash-kpis article { padding: 22px; border-right: 1px solid var(--line); }
.dash-kpis article:last-child { border-right: 0; }
.dash-kpis strong { display: block; font-size: 30px; letter-spacing: -1.4px; margin-bottom: 5px; }
.dash-kpis p { margin: 0; font-size: 12px; color: #9a9aa2; }

.dash-body { padding: 22px; }
.dash-h { margin: 0 0 16px; font-size: 12px; letter-spacing: 1.2px; color: #77777e; text-transform: uppercase; }
.dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dash-list li {
  display: grid;
  /* kimlik · cihaz ikonu · rota · durum · ilerleme */
  grid-template-columns: 62px 22px 1fr 118px 120px;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.015);
  font-size: 13px;
  transition: border-color 0.4s, background 0.4s;
}
/* Cihaz değiştiği an satır kısa süre vurgulanıyor — aktarım görünür olsun */
.dash-list li.is-hand {
  border-color: rgba(112, 203, 255, 0.5);
  background: rgba(112, 203, 255, 0.06);
}
.dash-list li.is-done { opacity: 0.55; }
.dash-list li.is-done .dash-bar i { background: #6ee7a0; }

.dash-dev { display: block; color: var(--blue); --icon-cut: #0a121c; }
.dash-dev svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.dash-dev svg .cut { fill: var(--icon-cut); }
.dash-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dash-list b { color: var(--blue); font-size: 12px; letter-spacing: 0.4px; }
.dash-route { color: #d4d4d8; }
.dash-state { color: #9a9aa2; font-size: 12px; }
.dash-bar { display: block; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.dash-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue));
  transition: width 0.9s linear, background 0.4s;
}

/* --- Blog --- */
.blog-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.blog-card {
  display: block;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--paper);
  text-decoration: none;
  transition: 0.25s var(--ease);
}
.blog-card:hover { border-color: rgba(112, 203, 255, 0.45); transform: translateY(-4px); }
.blog-card h2 { font-size: 25px; line-height: 1.15; margin: 14px 0 12px; letter-spacing: -0.03em; }
.blog-card p { margin: 0 0 18px; color: #aaaab0; font-size: 14px; line-height: 1.6; }
.blog-meta { font-size: 11px; letter-spacing: 1.2px; color: #77777e; text-transform: uppercase; display: block; }
.blog-meta b { color: var(--blue); }
.blog-more { color: var(--blue); font-size: 13px; }

/* --- Uzun metin (blog yazısı, KVKK) --- */
.post .lede, .legal .lede { max-width: 680px; }
.post .blog-meta { margin: 18px 0 14px; }
.post h1, .legal h1 { max-width: 780px; }

.prose { max-width: 720px; }
.prose h2 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 46px 0 16px;
  line-height: 1.25;
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 18px; color: var(--muted); font-size: 16px; line-height: 1.78; }
.prose p b { color: var(--paper); font-weight: 600; }
.prose .num {
  display: inline-block;
  min-width: 30px;
  color: var(--blue);
  font-size: 15px;
}
.post-cta { margin-top: 50px; }
.legal .updated { color: #77777e; font-size: 13px; margin: 0 0 44px; padding: 0 20px; max-width: var(--maxw); }
.legal .page-hero { padding-bottom: 8px; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .page-hero { padding: 36px 22px 12px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .mini-grid { grid-template-columns: 1fr; }
  .blog-list { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 24px; margin-top: 48px; }
  .product-visual.big { margin: 24px 0 0; width: 112px; height: 112px; }
  .product-visual.big .icon { width: 62px; height: 62px; }
  .dash-kpis { grid-template-columns: 1fr 1fr; }
  .dash-kpis article:nth-child(2) { border-right: 0; }
  .dash-kpis article:nth-child(1), .dash-kpis article:nth-child(2) { border-bottom: 1px solid var(--line); }
  .dash-list li { grid-template-columns: 58px 22px 1fr; row-gap: 8px; }
  .dash-state { grid-column: 1 / -1; }
  .dash-note { font-size: 10.5px; }
  .dash-bar { grid-column: 1 / -1; }
  .faq-item summary { font-size: 16px; padding-right: 38px; }
  .faq-a { padding-right: 30px; }
  .legal .updated { padding: 0 22px; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  /* KPI'lar tek sütuna düşünce panel gereksiz uzuyordu; 2x2 kalıyor */
  .dash-kpis article { padding: 16px; }
  .dash-kpis strong { font-size: 25px; }
  .blog-card { padding: 22px; }
  .blog-card h2 { font-size: 21px; }
}

@media (max-width: 360px) {
  .dash-kpis { grid-template-columns: 1fr; }
  .dash-kpis article { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* Dar ekranda panel başlığındaki not alt satıra insin */
@media (max-width: 560px) {
  .dash-top { flex-wrap: wrap; row-gap: 6px; }
  .dash-note { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   21. VİDEO OYNATICI (video.html)
   ========================================================================== */
.video-section { padding-top: 40px; }

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  overflow: hidden;
  background: #07090d;
}

/* Kapak — oynata basılana kadar görünen buton */
.player-poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  display: block;
}
.player-poster img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease), filter 0.4s;
}
.player-shade {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(5,5,6,.15), rgba(5,5,6,.72));
  transition: background 0.35s;
}
.player-poster:hover img { transform: scale(1.03); }
.player-poster:hover .player-shade { background: radial-gradient(circle at 50% 50%, rgba(5,5,6,.05), rgba(5,5,6,.6)); }

.player-btn {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #071014;
  background: var(--paper);
  box-shadow: 0 0 0 0 rgba(112, 203, 255, 0.45);
  transition: transform 0.3s var(--ease), background 0.25s;
  animation: playPulse 2.8s infinite;
}
.player-poster:hover .player-btn {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--blue);
}
@keyframes playPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(112, 203, 255, 0.4); }
  70%      { box-shadow: 0 0 0 26px rgba(112, 203, 255, 0); }
}

.player-meta {
  position: absolute;
  left: 30px; bottom: 26px;
  text-align: left;
}
.player-meta b { display: block; color: var(--paper); font-size: 19px; font-weight: 600; }
.player-meta i {
  display: block;
  margin-top: 5px;
  color: var(--blue);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Oynatıldıktan sonra yerleşen video / iframe */
.player-frame {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
  background: #000;
}
.player-error { color: #ff9a9a; padding: 30px; text-align: center; }

.player-note {
  margin: 18px 0 0;
  color: #77777e;
  font-size: 13px;
  text-align: center;
}

/* Filmde ne var — bölümler */
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 42px;
}
.chapter-grid article {
  padding: 26px;
  border-top: 1px solid rgba(112, 203, 255, 0.5);
  background: rgba(255, 255, 255, 0.025);
}
.chapter-grid b { color: var(--blue); font-size: 12px; letter-spacing: 1px; }
.chapter-grid h3 { font-size: 21px; font-weight: 500; margin: 30px 0 10px; }
.chapter-grid p { margin: 0; color: #aaaab0; font-size: 14px; line-height: 1.6; }

/* Yakında gelecek video yer tutucusu */
.video-soon {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 34px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  color: #77777e;
}
.video-soon .mini-icon { width: 34px; height: 34px; }
.video-soon p { margin: 0; font-size: 15px; }

@media (max-width: 900px) {
  .player { border-radius: 12px; }
  .player-btn { width: 68px; height: 68px; }
  .player-btn svg { width: 26px; height: 26px; }
  .player-meta { left: 18px; bottom: 16px; }
  .player-meta b { font-size: 15px; }
  .chapter-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 30px; }
  .video-soon { padding: 24px; }
}

/* ==========================================================================
   22. ARAPÇA — YAZI TİPİ VE SAĞDAN SOLA DÜZEN (RTL)
   --------------------------------------------------------------------------
   Cairo yazı tipi kendi sunucumuzda; unicode-range sayesinde SADECE Arapça
   harf ekranda varsa indirilir. Türkçe/İngilizce ziyaretçi bu dosyayı
   hiç indirmez.

   Düzenin çoğu dir="rtl" ile tarayıcı tarafından otomatik çevrilir
   (flex ve grid sırası, metin hizası). Aşağıdaki kurallar yalnızca
   mutlak konumlu ve yöne bağlı birkaç öğe için gerekli.
   ========================================================================== */
@font-face {
  font-family: AtlasArabic;
  src: url("assets/fonts/cairo-arabic-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
                 U+FE70-FEFF, U+102E0-102FB, U+10E60-10E7E;
}

/* Quicksand'de Arapça harf yok; tarayıcı o harfler için AtlasArabic'e düşer */
body { font-family: Quicksand, AtlasArabic, "Segoe UI", system-ui, -apple-system, sans-serif; }

/* Arapça harfler biraz daha büyük ve gevşek satır ister */
[dir="rtl"] body { line-height: 1.6; }
[dir="rtl"] .hero h1,
[dir="rtl"] .page-hero h1,
[dir="rtl"] .section h2 { letter-spacing: 0; line-height: 1.2; }
[dir="rtl"] .eyebrow,
[dir="rtl"] .blog-meta,
[dir="rtl"] .dash-h,
[dir="rtl"] .player-meta i,
[dir="rtl"] .team-card p { letter-spacing: 0; }

/* --- Yön bağlı düzeltmeler --- */
[dir="rtl"] .eyebrow .line { margin-right: 0; margin-left: 8px; }

[dir="rtl"] .skip-link { left: auto; right: 16px; }
[dir="rtl"] .dash-route .ar { display: inline-block; transform: scaleX(-1); }

[dir="rtl"] .label-one { right: auto; left: 8%; }
[dir="rtl"] .label-two { left: auto; right: 5%; }

[dir="rtl"] .solution-grid i { right: auto; left: 24px; }
[dir="rtl"] .product-card::before { right: auto; left: -46px; }
[dir="rtl"] .product-card b { left: auto; right: 20px; }

[dir="rtl"] .faq-item summary { padding-right: 0; padding-left: 44px; }
[dir="rtl"] .faq-item summary::after { right: auto; left: 6px; }
[dir="rtl"] .faq-a { padding-right: 0; padding-left: 60px; }

[dir="rtl"] .source-note {
  padding-left: 0; padding-right: 16px;
  border-left: 0; border-right: 2px solid rgba(112, 203, 255, 0.4);
}

[dir="rtl"] .player-meta { left: auto; right: 30px; text-align: right; }
[dir="rtl"] .dash-note { margin-left: 0; margin-right: auto; }
[dir="rtl"] .product-visual.big { margin: 0 auto 0 0; }
[dir="rtl"] .dash-kpis article { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .dash-kpis article:last-child { border-left: 0; }

/* Oklar ters yöne baksın (→ sağdan sola akışta ← olmalı) */
[dir="rtl"] .button b,
[dir="rtl"] .header-cta .arrow,
[dir="rtl"] .text-link span[aria-hidden],
[dir="rtl"] .breadcrumb span[aria-hidden],
[dir="rtl"] .solution-grid i {
  display: inline-block;
  transform: scaleX(-1);
}

/* Metin hizası: başlıklar ve uzun metinler sağdan başlar */
[dir="rtl"] .contact-form-wrap { text-align: right; }
[dir="rtl"] .closing,
[dir="rtl"] .closing .lede { text-align: center; }

@media (max-width: 900px) {
  [dir="rtl"] .product-visual.big { margin: 24px 0 0 auto; }
  [dir="rtl"] .faq-item summary { padding-left: 38px; }
  [dir="rtl"] .faq-a { padding-left: 30px; }
  [dir="rtl"] .dash-kpis article:nth-child(2) { border-left: 0; }
}

/* ==========================================================================
   23. GEZİNME HİSSİ — sayfa geçişi, ilerleme, derinlik, imleç
   --------------------------------------------------------------------------
   Buradaki her şey hareket temellidir. Kullanıcının işletim sisteminde
   "hareketi azalt" ayarı açıksa hepsi devre dışı kalır (en altta).
   ========================================================================== */

/* --- Okuma ilerleme çubuğu --- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 100;
  pointer-events: none;
}
.scroll-progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue));
  box-shadow: 0 0 14px rgba(112, 203, 255, 0.55);
}
[dir="rtl"] .scroll-progress i { transform-origin: right center; }

/* --- Sayfa geçişi ---
   Modern tarayıcılarda tarayıcının kendi geçiş motoru kullanılır. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pageOut 0.26s ease forwards; }
::view-transition-new(root) { animation: pageIn 0.34s var(--ease) forwards; }
@keyframes pageOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } }

/* Desteklemeyen tarayıcılar için JS yedeği — doğrudan body üzerinde */
body { transition: opacity 0.24s ease, transform 0.24s ease; }
html.is-leaving body { opacity: 0; transform: translateY(-8px); }
html.is-entering body { opacity: 0; transform: translateY(10px); }

/* --- İmleci takip eden yumuşak ışık --- */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(112, 203, 255, 0.10), transparent 62%);
  transition: opacity 0.5s ease;
  will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }

/* --- Derinlik: kart eğilmesi --- */
.product-grid,
.mini-grid,
.blog-list { perspective: 1200px; }

.product-card,
.mini-card,
.blog-card { will-change: transform; }

/* Eğilme JS ile veriliyor; hover'daki yükselme onunla birleşiyor.
   Bu yüzden hover transform'unu tilt açıkken devre dışı bırakıyoruz. */
html.has-tilt .product-card:hover,
html.has-tilt .mini-card:hover,
html.has-tilt .blog-card:hover { transform: none; }

/* Kart içindeki başlık hafifçe öne çıksın (derinlik hissi) */
/* Görsel kartın kenarına dayandığı için translateZ verilmiyor — öne
   çıkarsa yuvarlatılmış köşenin dışına taşıyor. Sadece başlık öne geliyor. */
.product-card h3 { transform: translateZ(22px); }
.blog-card h2 { transform: translateZ(16px); }

/* --- Daha belirgin hover geri bildirimi --- */
.product-card::after,
.blog-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(112, 203, 255, 0.13), transparent 62%);
}
.product-card:hover::after,
.blog-card:hover::after { opacity: 1; }
.blog-card { position: relative; overflow: hidden; }

/* --- Manyetik buton --- */
.button, .header-cta { will-change: transform; }

/* --- Hareketi azalt --- */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .cursor-glow { display: none; }
  @view-transition { navigation: none; }
  body,
  html.is-leaving body,
  html.is-entering body { opacity: 1 !important; transform: none !important; }
  .product-card h3, .blog-card h2 { transform: none; }
}

/* ==========================================================================
   24. DEMO BUTONLARI
   ========================================================================== */

/* Header'daki demo butonu — dolu, her sayfada görünür.
   İletişim menüde olduğu için buradaki tek buton demoya ayrıldı. */
.header-cta.is-demo {
  background: var(--paper);
  color: #071014;
  border-color: var(--paper);
  font-weight: 700;
  gap: 12px;
}
.header-cta.is-demo:hover {
  background: var(--blue);
  border-color: var(--blue);
}

/* Hero'daki üçüncü buton — çerçeveli, birincil butonla yarışmasın */
.button.ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: #dcdce2;
  font-weight: 600;
  gap: 12px;
}
.button.ghost:hover {
  background: rgba(112, 203, 255, 0.1);
  border-color: var(--blue);
  color: #fff;
}

/* ==========================================================================
   25. DEMO BİLGİLENDİRME SAYFASI
   ========================================================================== */
.demo-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  counter-reset: step;
}
.demo-steps article {
  position: relative;
  padding: 30px 26px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.demo-steps article::before {
  counter-increment: step;
  content: counter(step);
  display: block;
  width: 32px; height: 32px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1px solid rgba(112, 203, 255, 0.5);
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}
.demo-steps h3 { font-size: 19px; font-weight: 500; margin: 0 0 9px; }
.demo-steps p { margin: 0; color: #aaaab0; font-size: 14px; line-height: 1.6; }

/* Uyarı kutusu — demo bir simülasyondur */
/* "Tasarım aşaması" kutusu
   ---------------------------------------------------------------------------
   Sol kenarı sayfanın diğer metinleriyle aynı hizada (başlık, açıklama),
   dikeyde ise üstündeki ve altındaki çizginin tam ortasında duruyor.
   Bunun için kendi bölümüne .notice-band veriliyor: üst ve alt boşluk eşit. */
.notice {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  /* Kendi bandındayken dar ve sola yaslı; demo sayfasında olduğu gibi bir
     ızgaranın altına geldiğinde ızgarayla aynı genişlikte olmalı — dar
     kalınca sol sütunun altında yamuk duruyordu. */
  max-width: none;
  margin: 0;
  padding: 26px 28px;
  border: 1px solid rgba(112, 203, 255, 0.34);
  border-radius: 14px;
  background: rgba(112, 203, 255, 0.05);
}
/* Izgaranın hemen altına gelen uyarı kutusu, ızgaranın kendi aralığı kadar
   boşluk bırakır — bitişik durunca son satırla tek parça gibi görünüyordu. */
.demo-features + .notice { margin-top: 16px; }

.notice-band { padding-top: 72px; padding-bottom: 72px; }
.notice-band .notice { max-width: 820px; }
.notice .icon { width: 30px; height: 30px; color: var(--blue); flex: 0 0 auto; margin-top: 2px; }
.notice h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.notice p { margin: 0; color: #b4b4ba; font-size: 14.5px; line-height: 1.65; }

/* Demoya götüren büyük blok */
.demo-launch {
  margin-top: 52px;
  padding: 46px 40px;
  border: 1px solid rgba(112, 203, 255, 0.3);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(13, 24, 38, 0.9), rgba(8, 11, 16, 0.9));
  text-align: center;
}
.demo-launch h2 { font-size: clamp(26px, 3vw, 40px); margin: 0 0 14px; }
.demo-launch .lede { margin: 0 auto 30px; }

@media (max-width: 900px) {
  .demo-steps { grid-template-columns: 1fr; }
  .notice { flex-direction: column; gap: 12px; padding: 22px; }
  .demo-launch { padding: 32px 22px; }
  /* Menü hamburgere geçince demo butonuna yer açılır */
  .header-cta.is-demo { padding: 10px 15px; font-size: 13.5px; gap: 10px; }
  .header-cta.is-demo .arrow { font-size: 18px; }
}
@media (max-width: 560px) {
  .header-cta.is-demo { display: none; }   /* çok dar ekranda mobil menüdeki buton yeter */
}

/* Demo sayfası — özellik listesi */
.demo-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.demo-features article {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  transition: border-color 0.3s;
}
.demo-features article:hover { border-color: rgba(112, 203, 255, 0.4); }
.demo-features .mini-icon { width: 34px; height: 34px; margin-top: 2px; }
.demo-features h3 { font-size: 19px; font-weight: 500; margin: 0 0 9px; }
.demo-features p { margin: 0; color: #aaaab0; font-size: 14.5px; line-height: 1.62; }

@media (max-width: 900px) {
  .demo-features { grid-template-columns: 1fr; }
  .demo-features article { padding: 22px; gap: 16px; }
}

/* ==========================================================================
   26. AŞAMA BİLDİRİMİ VE HEDEF ETİKETLERİ
   --------------------------------------------------------------------------
   AtlasDrop konsept aşamasında. Sitedeki teknik değerler ölçüm değil hedef.
   Bu bölüm o gerçeği görünür kılan öğeleri biçimlendirir — silme.
   ========================================================================== */

.stage-banner {
  border-top: 1px solid rgba(112, 203, 255, 0.22);
  border-bottom: 1px solid rgba(112, 203, 255, 0.22);
  background: rgba(112, 203, 255, 0.055);
}
/* Konsept aşaması bandı: içerik kendi alanında ORTALANIR.
   Eskiden sola yaslıydı, yol haritası bağlantısı da sağa itiliyordu;
   geniş ekranda arada kocaman bir boşluk kalıyordu. */
.stage-inner {
  max-width: var(--maxw);
  margin: auto;
  padding: 11px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.5;
}
.stage-inner b {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--blue);
  color: #071014;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
}
.stage-inner span { color: #c2c2c8; }
.stage-inner a {
  flex: 0 0 auto;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(112, 203, 255, 0.4);
}
.stage-inner a:hover { border-bottom-color: var(--blue); }


/* Bölüm içi "bunlar hedef" notu
   ---------------------------------------------------------------------------
   Negatif üst boşluk SADECE .section-head'den sonra veriliyor: o kutunun
   44px'lik alt boşluğunun içine çekilmesi için. Başlık düz bir <div> ise
   (teknik özellikler bölümü böyle) çekecek boşluk yok — negatif marj notu
   doğrudan başlığın üstüne bindiriyordu. */
.section-note {
  max-width: 720px;
  margin: 18px 0 30px;
  color: #8a8a92;
  font-size: 13.5px;
  line-height: 1.6;
}
.section-head + .section-note { margin-top: -18px; }

/* Yol haritasında bulunduğumuz aşama */
.roadmap-grid article.is-current {
  border-top-color: var(--blue);
  background: rgba(112, 203, 255, 0.07);
}
.stage-now {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--blue);
  color: #071014 !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

@media (max-width: 900px) {
  .stage-inner { padding: 12px 22px; font-size: 12.5px; gap: 10px; }
  .section-note { margin: 14px 0 24px; }
  .section-head + .section-note { margin-top: -8px; }
}

/* ==========================================================================
   27. CİHAZ GÖRSELLERİ
   --------------------------------------------------------------------------
   Her cihaz 660x440 (3:2) tek tip karta yerleştirildi: kırpık ortada,
   arka plan kendi bulanık kopyasından üretildi. Böylece hem hiçbir cihaz
   kesilmiyor hem de bütün kartlar aynı oranda.

   ⚠️ Kaynak konsept çizimleri ~300 px genişliğindeydi; kart görselleri
   bunun büyütülmüş hali. Kart 1200 px'lik bölümde ~389 px çıkıyor;
   daha da büyütülürse yumuşama görünür hale gelir.
   ========================================================================== */
.fleet-note {
  margin: 26px 0 0;
  text-align: center;
  color: #77777e;
  font-size: 13px;
}

/* Ürün sayfasındaki cihaz görseli */
.product-shot {
  margin: 0 0 0 auto;
  max-width: 330px;
}
.product-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.product-shot figcaption {
  margin-top: 10px;
  color: #77777e;
  font-size: 12px;
  line-height: 1.5;
}
[dir="rtl"] .product-shot { margin: 0 auto 0 0; }

@media (max-width: 900px) {
  .product-shot { margin: 24px 0 0; max-width: 100%; }
  [dir="rtl"] .product-shot { margin: 24px 0 0; }
}


/* ==========================================================================
   28. ÇÖZÜMLER SAYFASI (cozumler.html)
   --------------------------------------------------------------------------
   Akış kartları roadmap görünümünü paylaşıyor ama 6 adım var: 4 sütunda
   son satırda iki kart kalıyordu, 3 sütuna alındı (3+3).
   ========================================================================== */
.flow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.flow-grid article {
  padding: 22px 20px;
  border-top: 1px solid rgba(112, 203, 255, 0.6);
  background: rgba(255, 255, 255, 0.025);
  transition: background 0.3s;
}
.flow-grid article:hover { background: rgba(112, 203, 255, 0.06); }
.flow-grid span { color: var(--blue); font-size: 12px; letter-spacing: 0.5px; }
.flow-grid h3 { font-size: 19px; margin: 30px 0 10px; font-weight: 500; }
.flow-grid p { margin: 0; color: #aaaab0; font-size: 14px; line-height: 1.55; }

/* Alan içi ara başlıklar */
.solution-area .big-text { max-width: 900px; }
.area-label { margin: 40px 0 16px; }

/* Seçim tablosu */
.pick-wrap { overflow-x: auto; }
.pick-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  text-align: left;
}
.pick-table th,
.pick-table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.pick-table th {
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border-bottom-color: rgba(112, 203, 255, 0.4);
}
.pick-table td:first-child { color: var(--paper); }
.pick-table td:last-child { color: #9aa3ae; }
.pick-table tbody tr:hover td { background: rgba(112, 203, 255, 0.05); }
[dir="rtl"] .pick-table { text-align: right; }

/* SSS altındaki çözümler bağlantısı */
.faq-more { margin: 34px 0 14px; }

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

@media (max-width: 640px) {
  .flow-grid { grid-template-columns: 1fr; }
  .pick-table th, .pick-table td { padding: 13px 14px; font-size: 14px; }
}

/* Ekip fotoğrafı henüz yoksa: kırık görsel ikonu yerine baş harfler.
   Kart düzeni bozulmuyor, sadece görsel yerine tasarlanmış bir kutu geliyor. */
.team-card.no-photo img { display: none; }
.team-card .team-initials {
  display: grid;
  place-items: center;
  width: 210px; height: 210px;
  border-radius: 9px;
  border: 1px solid rgba(112, 203, 255, 0.25);
  background: linear-gradient(145deg, #101d2c, #0a0d13);
  color: var(--blue);
  font-size: 62px;
  font-weight: 600;
  letter-spacing: 1px;
}
@media (max-width: 900px) {
  .team-card .team-initials { width: 100%; height: 200px; font-size: 54px; }
}