/* ==================================================================
   FinalWork — tanıtım sitesi stil dosyası

   TEK KAYNAK. Sayfanın hiçbir yerinde `style="…"` yoktur, hiçbir yerde
   elle renk kodu yazılmaz. `npm run check:site` bunu denetler.

   Ölçekler sabittir (bkz. .claude/skills/finalwork-site/SKILL.md):
     yazı boyu  12 · 13 · 15 · 17 · 19 · 24 · 34 · 44
     boşluk      4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96
     köşe        8 · 12 · 20 · 999
     gölge       3 kademe
   Ara değer YOKTUR. Yeni bir değer gerekiyorsa ölçek değişir, istisna
   eklenmez — istisnalar ölçeği bir yılda dağıtıyor.
   ================================================================== */

/* ── Sıfırlama ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
/*
 * `hidden` özniteliği HER ZAMAN gizler.
 * Tarayıcının varsayılanı `display:block`; `display:grid` veren bir sınıf
 * onu sessizce eziyor ve gizlenmesi gereken bölüm ekranda kalıyordu.
 */
[hidden] { display: none !important; }

/* ── Belirteçler: AÇIK tema ──────────────────────────────────────────
   Açık tema temel; koyu tema aşağıda yalnız DEĞİŞEN belirteçleri
   yeniden tanımlıyor. Böylece bir rengin tek bir tanımı oluyor.
   ------------------------------------------------------------------ */
:root {
  /* Zemin ve yüzeyler */
  --zemin:        #ffffff;
  --zemin-2:      #f6f7f9;
  --kart:         #ffffff;
  --kart-2:       #f9fafb;
  --cizgi:        #e5e7eb;
  --cizgi-2:      #d1d5db;

  /* Metin */
  --metin:        #0d1024;
  --metin-2:      #4b5162;
  --metin-3:      #8b91a1;

  /* Marka — yeşil.
     Açık zeminde KOYU yeşil kullanılır: parlak #00b386 üzerine beyaz
     yazının karşıtlığı 2.69 ve WCAG AA'yı geçmiyor. #007d5e üzerine
     beyaz 5.13. Uygulama da aynı kararı vermiş (constants/colors.ts). */
  --yesil:        #007d5e;
  --yesil-koyu:   #006b50;
  --yesil-metin:  #00785b;
  --yesil-zemin:  rgba(0, 125, 94, .08);
  --yesil-cizgi:  rgba(0, 125, 94, .22);
  --yesil-parlak: #00b386;

  /*
   * KIRMIZI — sitenin paletine sonradan girdi ve TEK BİR İŞİ var:
   * sektör sayfasındaki karşılaştırmada "mevcut düzeniniz" tarafını
   * işaretlemek. Hata rengi olarak siteye yayılmıyor.
   *
   * Değerler uydurulmadı, uygulamanın kendi kırmızısı (constants/colors.ts):
   * açık temada #c92a3a (kontrast 5.42), koyu temada #ff4757 (5.38).
   * Yeşilde olduğu gibi zemin ve çerçeve saydam tonlar.
   */
  --kirmizi-metin: #c92a3a;
  --kirmizi-zemin: rgba(201, 42, 58, .09);
  --kirmizi-cizgi: rgba(201, 42, 58, .22);

  /* Lacivert — uygulamanın kendi zemini. Hero, ürün turu ve altlıkta
     kullanılır; site böylece uygulamaya bağlanır ama uzun metinler
     koyu zeminde okunmaya zorlanmaz. */
  --lacivert:     #151728;
  --lacivert-2:   #1b1d31;
  --lacivert-3:   #262943;

  /* Turkuaz — YALNIZ marka simgesi ve dokunma izi. Dekoratif kullanım
     yok; markanın kendi rengi ucuzlaşmasın. */
  --turkuaz:      #08e5c0;
  --turkuaz-hale: rgba(8, 229, 192, .18);

  /* Düğme üstü yazı — parlak yeşilde lacivert, koyu yeşilde beyaz */
  --dugme-yazi:   #ffffff;

  /* Telefon çerçevesi — cihazın kendi rengi, temaya bağlı değil */
  --cerceve:      #0a0b16;

  /* Pencere perdesi */
  --perde:        rgba(13, 16, 36, .6);

  /*
   * Platform markalarının kendi renkleri. Tema belirteci DEĞİL — Apple'ın
   * siyahı, Android'in yeşili temayla değişmez; koyu temada da aynı kalır.
   */
  --marka-appstore: #0d84ff;
  --marka-android: #3ddc84;
  --marka-windows: #0078d4;

  /* Üst çubuk */
  --ust-cam:      rgba(255, 255, 255, .86);

  /* Gölge — üç kademe, dördüncüsü yok */
  --golge-1: 0 1px 2px rgba(13, 16, 36, .06);
  --golge-2: 0 4px 16px rgba(13, 16, 36, .08);
  --golge-3: 0 16px 48px rgba(13, 16, 36, .12);

  /* Ölçek */
  --y-10: .6rem;     --y-12: .75rem;    --y-13: .8125rem; --y-15: .9375rem;
  --y-17: 1.0625rem;
  --y-19: 1.1875rem; --y-24: 1.5rem;    --y-34: 2.125rem; --y-44: 2.75rem;

  --b-4: 4px;   --b-8: 8px;   --b-12: 12px; --b-16: 16px; --b-24: 24px;
  --b-32: 32px; --b-48: 48px; --b-64: 64px; --b-96: 96px;

  --k-8: 8px; --k-12: 12px; --k-20: 20px; --k-tam: 999px;

  --genislik: 1180px;
}

/* ── Belirteçler: KOYU tema ──────────────────────────────────────── */
[data-tema="koyu"] {
  --zemin:        #0b0d1a;
  --zemin-2:      #101223;
  --kart:         #151728;
  --kart-2:       #1b1d31;
  --cizgi:        #262943;
  --cizgi-2:      #343854;

  --metin:        #f2f3f7;
  --metin-2:      #a7adbf;
  --metin-3:      #6f7689;

  /* Koyu zeminde PARLAK yeşil kullanılır — karşıtlığı yeterli ve
     uygulamanın vurgu rengiyle birebir aynı. */
  --yesil:        #00b386;
  --yesil-koyu:   #009e78;
  --yesil-metin:  #08e5c0;
  --yesil-zemin:  rgba(0, 179, 134, .12);
  --yesil-cizgi:  rgba(0, 179, 134, .28);

  --kirmizi-metin: #ff4757;
  --kirmizi-zemin: rgba(255, 71, 87, .13);
  --kirmizi-cizgi: rgba(255, 71, 87, .28);

  --ust-cam:      rgba(11, 13, 26, .86);

  --golge-1: 0 1px 2px rgba(0, 0, 0, .4);
  --golge-2: 0 4px 16px rgba(0, 0, 0, .45);
  --golge-3: 0 16px 48px rgba(0, 0, 0, .55);
}

/* ── Gövde ───────────────────────────────────────────────────────── */
body {
  background: var(--zemin);
  color: var(--metin);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--y-15);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .baslik-font {
  font-family: "Plus Jakarta Sans", Inter, -apple-system, sans-serif;
  line-height: 1.22;
  letter-spacing: -.02em;
}

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

/* Klavyeyle gezenler için görünür odak — turkuaz halka, markadan */
:focus-visible {
  outline: 2px solid var(--turkuaz);
  outline-offset: 2px;
  border-radius: var(--k-8);
}

/* Hareketi azalt ayarı açıksa BÜTÜN animasyonlar kapanır */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Yerleşim ──────────────────────────────────────────────────────
   IZGARA SÜTUNLARI HEP `minmax(0, 1fr)`.
   Düz `1fr` içeriğin en dar hâlinin (min-content) altına inmiyor; uzun bir
   kelime ya da kısa cümle sütunu şişirip sayfayı YATAY KAYDIRIR. Dar
   ekranda ölçüldü: istatistik ve adım kartları 390 piksellik pencereyi
   452 piksele taşırıyordu.
   ------------------------------------------------------------------ */
.kap { width: 100%; max-width: var(--genislik); margin: 0 auto; padding: 0 var(--b-24); }

/*
 * Çapa bağlantısı (#ozellikler gibi) tıklanınca bölüm başlığı yapışkan üst
 * çubuğun ALTINDA kalıyordu. Kaydırma payı üst çubuğun yüksekliği kadar.
 */
section[id] { scroll-margin-top: 80px; }
.yazi-govde h2[id] { scroll-margin-top: 80px; }
.bolum { padding: var(--b-96) 0; }
.bolum-dar { padding: var(--b-64) 0; }
.bolum-alt { background: var(--zemin-2); }

/* Koyu bölüm — hero, ürün turu, altlık. Kendi belirteçlerini ezerek
   içindeki her şeyin doğru renkte olmasını sağlıyor. */
.koyu {
  background: var(--lacivert);
  --zemin: var(--lacivert);
  --zemin-2: var(--lacivert-2);
  --kart: var(--lacivert-2);
  --kart-2: var(--lacivert-3);
  --cizgi: var(--lacivert-3);
  --cizgi-2: #343854;
  --metin: #f2f3f7;
  --metin-2: #a7adbf;
  --metin-3: #6f7689;
  --yesil: #00b386;
  --yesil-koyu: #009e78;
  --yesil-metin: #08e5c0;
  --yesil-zemin: rgba(0, 179, 134, .12);
  --yesil-cizgi: rgba(0, 179, 134, .28);
  color: var(--metin);
}

/* ── Tipografi kademeleri ────────────────────────────────────────── */
.bolum-basi { max-width: 680px; margin: 0 auto var(--b-48); text-align: center; }
.bolum-basi.sola { margin-left: 0; text-align: left; }

h1, .y-hero  { font-size: var(--y-34); font-weight: 800; }
h2, .y-bolum { font-size: var(--y-24); font-weight: 700; }
h3, .y-kart  { font-size: var(--y-19); font-weight: 700; line-height: 1.3; }
.y-one       { font-size: var(--y-17); line-height: 1.7; color: var(--metin-2); }
.y-govde     { font-size: var(--y-15); color: var(--metin-2); }
.y-kucuk     { font-size: var(--y-13); color: var(--metin-2); }
.y-etiket    { font-size: var(--y-12); color: var(--metin-3); }

@media (min-width: 768px) {
  h1, .y-hero  { font-size: var(--y-44); }
  h2, .y-bolum { font-size: var(--y-34); }
  .y-one       { font-size: var(--y-19); }
}

.bolum-basi h2 { margin-bottom: var(--b-16); }
.bolum-basi .y-one { margin: 0 auto; }

/* ── Ortalanmış rozet ────────────────────────────────────────────
   Yuvarlak ve kare rozetlerin (baş harfler, adım numarası, ikon kutusu)
   ORTAK temeli.

   NEDEN GEREKLİ: `place-items: center` kutuyu ortalıyor ama gövdeden gelen
   `line-height: 1.72` satır kutusunu asimetrik yapıyor ve yazı bir-iki
   piksel yukarıda duruyordu. `line-height: 1` satır kutusunu harf kutusuna
   eşitliyor; sorun kökten kalkıyor.
   ---------------------------------------------------------------- */
.daire {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
  text-align: center;
}

/* ── İkon ────────────────────────────────────────────────────────
   Tek kaynak: site/ikonlar.svg. Uygulamanın kullandığı Ionicons
   ailesinden, aynı kavram için aynı ikon (TASARIM.md §6).
   Boyutlar yalnız 16 / 20 / 24 / 32.
   ---------------------------------------------------------------- */
.ikon { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }
.ikon-16 { width: 16px; height: 16px; }
.ikon-24 { width: 24px; height: 24px; }
.ikon-32 { width: 32px; height: 32px; }

/* İkon kutusu — özellik ve adım kartlarında */
.ikon-kutu {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; line-height: 1;
  border-radius: var(--k-12);
  background: var(--yesil-zemin);
  color: var(--yesil-metin);
}

/* ── Rozet ───────────────────────────────────────────────────────── */
.rozet {
  display: inline-flex; align-items: center; gap: var(--b-8);
  padding: var(--b-4) var(--b-12);
  border: 1px solid var(--yesil-cizgi);
  border-radius: var(--k-tam);
  background: var(--yesil-zemin);
  color: var(--yesil-metin);
  font-size: var(--y-12);
  font-weight: 600;
}
.rozet-nokta {
  width: 6px; height: 6px; border-radius: var(--k-tam);
  background: var(--yesil); flex: 0 0 auto;
}

/* ── Düğme ───────────────────────────────────────────────────────
   ÜÇ tür var, dördüncüsü yok: dolu (birincil), çerçeveli (ikincil),
   düz (üçüncül). Her ekranda tek birincil düğme bulunur.
   ---------------------------------------------------------------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--b-8);
  height: 44px;                 /* dokunma hedefi en az 44 */
  padding: 0 var(--b-24);
  border: 1px solid transparent;
  border-radius: var(--k-12);
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: var(--y-13);
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.dugme-dolu    { background: var(--yesil); color: var(--dugme-yazi); }
.dugme-dolu:hover { background: var(--yesil-koyu); }
.dugme-cerceve { background: transparent; border-color: var(--cizgi-2); color: var(--metin); }
.dugme-cerceve:hover { border-color: var(--yesil); color: var(--yesil-metin); }
.dugme-duz     { background: transparent; color: var(--metin-2); }
.dugme-duz:hover { color: var(--metin); }
.dugme-buyuk   { height: 52px; padding: 0 var(--b-32); font-size: var(--y-15); }

/*
 * Koyu zeminde PARLAK yeşil düğme kullanılıyor ve üzerine LACİVERT yazı
 * konuyor. Beyaz yazının parlak yeşil üzerindeki karşıtlığı 2.69 —
 * okunmuyor. Lacivert yazı 8.5.
 */
.koyu .dugme-dolu { background: var(--yesil-parlak); --dugme-yazi: var(--lacivert); color: var(--dugme-yazi); }
.koyu .dugme-dolu:hover { background: var(--yesil-metin); }

/* ── Kart ────────────────────────────────────────────────────────── */
.kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--k-20);
  padding: var(--b-24);
}
/*
 * Kart üzerine gelince YALNIZ kenar rengi değişir.
 * Büyütme + döndürme + parıltı üçlüsü ucuz görünüyor; tek bir sakin
 * geri bildirim yeterli.
 */
.kart-etkilesim { transition: border-color .18s ease, box-shadow .18s ease; }
.kart-etkilesim:hover { border-color: var(--yesil-cizgi); box-shadow: var(--golge-2); }

.izgara { display: grid; gap: var(--b-24); }
.izgara-2 { grid-template-columns: minmax(0, 1fr); }
.izgara-3 { grid-template-columns: minmax(0, 1fr); }
/*
 * TELEFONDA TEK SÜTUN. Bu kural bir zaman `repeat(2, …)` ile başlıyordu ve
 * üç ızgara sınıfı arasındaki tek istisnaydı: 390 piksellik telefonda karta
 * 147 piksel kalıyor, bunun 32'sini adım numarası dairesi yiyordu — metne
 * ~75 piksel. Artık kardeşleriyle aynı: 1 → 2 → 4.
 */
.izgara-4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px)  { .izgara-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                             .izgara-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                             .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                             .izgara-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Üst çubuk ───────────────────────────────────────────────────── */
.ust {
  position: sticky; top: 0; z-index: 50;
  background: var(--ust-cam);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ic { display: flex; align-items: center; gap: var(--b-12); min-height: 64px; }

/*
 * Dar ekranda üst çubuktaki büyük çağrı düğmesi gizleniyor — yerine
 * hamburger menü var ve hero'daki asıl düğme zaten hemen altta.
 * Görünmesi için gerekli genişlik: 480 piksel.
 */
.ust-eylemler .dugme { display: none; }
@media (min-width: 480px) { .ust-eylemler .dugme { display: inline-flex; } }
.ust-baglantilar { display: none; align-items: center; gap: var(--b-24); margin-left: var(--b-32); }
.ust-baglantilar a { font-size: var(--y-13); font-weight: 600; color: var(--metin-2); transition: color .18s ease; }
.ust-baglantilar a:hover { color: var(--metin); }
.ust-eylemler { display: flex; align-items: center; gap: var(--b-8); margin-left: auto; }
@media (min-width: 1024px) { .ust-baglantilar { display: flex; } }

.marka { display: inline-flex; align-items: center; gap: var(--b-12); flex: 0 0 auto; }
.marka-simge { width: 36px; height: 36px; border-radius: 17.19%; flex: 0 0 auto; }
/*
 * İç içe span'ler blok olmalı. Satır içi kalırlarsa marka adı ile slogan
 * yan yana akıp birbirine giriyor — dar ekranda üst çubuk dağılıyor.
 */
.marka-yazi { display: block; }
.marka-ad { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: var(--y-15); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.marka-slogan { display: none; font-size: var(--y-10); font-weight: 700; color: var(--metin-3); line-height: 1.3; }
@media (min-width: 640px) {
  .marka-ad { font-size: var(--y-17); }
  .marka-slogan { display: block; }
}

.simge-dugme {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; line-height: 1;
  border: 1px solid var(--cizgi);
  border-radius: var(--k-12);
  background: transparent;
  color: var(--metin-2);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.simge-dugme:hover { border-color: var(--cizgi-2); color: var(--metin); }
.dil-dugme { width: auto; padding: 0 var(--b-12); font-size: var(--y-13); font-weight: 700; }

/*
 * HAMBURGER MASAÜSTÜNDE GİZLİ.
 *
 * Kural `.simge-dugme` tanımından SONRA ve iki sınıflı seçiciyle yazılıyor.
 * Öncesinde `.ust-ham { display: none }` daha yukarıdaydı; `.simge-dugme`
 * ile aynı ağırlıkta olduğu için sonra gelen kazanıyor ve düğme masaüstünde
 * de görünüyordu. İki sınıflı seçici sıraya bağlı kalmıyor.
 */
@media (min-width: 1024px) {
  .ust-eylemler .ust-ham { display: none; }
}

/* Mobil çekmece */
.cekmece { display: none; border-top: 1px solid var(--cizgi); background: var(--zemin); }
.cekmece.acik { display: block; }
.cekmece a {
  display: flex; align-items: center; gap: var(--b-12);
  padding: var(--b-12) var(--b-24);
  font-size: var(--y-15); font-weight: 600; color: var(--metin-2);
}
.cekmece a:hover { color: var(--metin); background: var(--zemin-2); }
@media (min-width: 1024px) { .cekmece { display: none !important; } }

/* Dil şeridi — tarayıcısı İngilizce olana tek satır bilgi */
/* Üst çubuğun ÜSTÜNDE, sayfa akışının en başında duruyor */
.dil-serit {
  display: none;
  align-items: center; gap: var(--b-12);
  padding: var(--b-8) var(--b-24);
  background: var(--yesil-zemin);
  border-bottom: 1px solid var(--yesil-cizgi);
  font-size: var(--y-13);
}
.dil-serit.acik { display: flex; }
.dil-serit a { color: var(--yesil-metin); font-weight: 700; text-decoration: underline; }
.dil-serit button { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--metin-3); }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero { padding: var(--b-64) 0 var(--b-96); overflow: hidden; }
.hero-izgara { display: grid; gap: var(--b-48); align-items: center; }
@media (min-width: 1024px) { .hero-izgara { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--b-64); } }

.hero h1 { margin: var(--b-24) 0 var(--b-16); }
.hero h1 .vurgu { color: var(--yesil-metin); }

/*
 * AÇIKLAMA H1'İN HEMEN ARDINDA ve büyük punto.
 * H1 markayı söylüyor; ürünün ne yaptığını söyleyen cümle bu. Ziyaretçi
 * iki-üç saniyede "mesai, görev, personel takibi" diyebilmeli, o yüzden
 * slogan bu cümleden SONRAYA alındı.
 */
.hero-aciklama { font-size: var(--y-15); line-height: 1.75; color: var(--metin-2); max-width: 62ch; }
@media (min-width: 768px) { .hero-aciklama { font-size: var(--y-17); } }

/*
 * Kahraman sloganının rengini `.slogan-yesil` / `.slogan-lacivert` veriyor.
 * BURAYA `.hero-slogan span { color: ... }` GİBİ GENİŞ BİR KURAL YAZMAYIN:
 * iki sınıflı seçiciyi ezer ve slogan üç renk yerine tek renk çıkar.
 * Tam olarak bu olmuştu — "Takip et." lacivert yerine yeşil görünüyordu.
 */
.hero-slogan { margin-top: var(--b-16); font-size: var(--y-15); font-weight: 700; }

.hero-dugmeler { display: flex; flex-wrap: wrap; gap: var(--b-12); margin-top: var(--b-32); }
.hero-not { margin-top: var(--b-16); font-size: var(--y-13); color: var(--metin-3); }

.hero-guven { display: flex; align-items: center; gap: var(--b-16); margin-top: var(--b-32);
              padding-top: var(--b-24); border-top: 1px solid var(--cizgi); flex-wrap: wrap; }
.hero-guven-sayi { font-family: "Plus Jakarta Sans", sans-serif; font-size: var(--y-24); font-weight: 800; color: var(--metin); }
.hero-yildiz { display: inline-flex; align-items: center; gap: var(--b-4); color: var(--yesil-metin); font-size: var(--y-13); font-weight: 700; }

/*
 * ETİKET ŞERİDİ KAHRAMANIN TAM GENİŞLİĞİNDE.
 *
 * Beş etiket ~995 px yer istiyor; metin sütunu 561 px. Sütunun içinde
 * kaldıkları sürece hangi ölçüyü kısarsak kısalım ÜÇ SATIRA düşüyorlardı
 * (2+2+1) ve 1024 px'lik ekranda daha da kötüleşiyordu. Şerit iki sütunun
 * altına, tam genişliğe alındı: 1132 px'te üç etiket rahat sığıyor.
 */
.hero-rozetler { display: flex; flex-wrap: wrap; gap: var(--b-8); margin-top: var(--b-48); }
/*
 * Üçüncü etiketten sonra ZORUNLU satır kesme.
 *
 * Yalnız `flex-wrap`a güvenmek genişliğe bağlı: pencere birkaç piksel
 * daralınca dizilim 3+2'den 2+2+1'e dönüyordu. Kesme öğesi dizilimi
 * genişlikten bağımsız olarak sabitliyor.
 */
.rozet-kes { flex-basis: 100%; height: 0; margin: 0; }
@media (max-width: 767px) { .rozet-kes { display: none; } }
.hero-rozet {
  display: inline-flex; align-items: center; gap: var(--b-8);
  padding: var(--b-8) var(--b-12);
  border: 1px solid var(--cizgi); border-radius: var(--k-tam);
  font-size: var(--y-12); font-weight: 600; color: var(--metin-2);
}
.hero-rozet .ikon { color: var(--yesil-metin); }

/* ── Telefon ─────────────────────────────────────────────────────
   İçindeki her şey gerçek uygulamadan alınmış ekran görüntüsüdür.
   Yalnız çerçeve kodla çiziliyor.
   ---------------------------------------------------------------- */
.telefon {
  position: relative;
  width: 100%; max-width: 300px; margin: 0 auto;
  aspect-ratio: 390 / 844;
  background: var(--lacivert);
  border: 8px solid var(--cerceve);
  border-radius: 44px;
  box-shadow: var(--golge-3);
  overflow: hidden;
}
/*
 * EKRAN ÇENTİĞİN ALTINDAN BAŞLIYOR.
 *
 * Ekran görüntüsü uygulamanın en üstünden başlıyor; çentik onun üstüne
 * binince başlık kesiliyordu. Üstte kalan koyu şerit gerçek telefondaki
 * durum çubuğu alanı gibi duruyor.
 */
/*
 * EKRAN KUTUSU GÖRÜNTÜNÜN GERÇEK ORANINDA.
 *
 * `inset: 26px 0 0` verilince kutu 284×607,2 oluyordu ama görüntü 390/844
 * oranında 284×614,6 çiziliyordu; `object-fit: cover` aradaki 7,4 pikseli
 * alttan kırpıyordu. Dokunma izinin yüzdesi ise KUTUYA göre uygulandığı
 * için hedef aşağı indikçe iz yukarı kayıyordu — alt sekmelerde 7 piksel.
 *
 * Kutu artık görüntünün oranını taşıyor; yüzdeler birebir doğru.
 * Taşan 7,4 pikseli `.telefon` (overflow: hidden) kırpıyor.
 * BURAYA `height` ya da `inset: … 0` YAZMAYIN — oran bozulur, iz kayar.
 */
.telefon-ekran {
  position: absolute; top: 26px; left: 0; width: 100%;
  aspect-ratio: 390 / 844;
  overflow: hidden;
}
.telefon-ekran img { display: block; width: 100%; height: 100%; }
.telefon-centik {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 108px; height: 26px;
  background: var(--cerceve); border-radius: 0 0 var(--k-20) var(--k-20);
  z-index: 2;
}

/* Sahne geçişi — çapraz geçiş, başka efekt yok */
.sahne { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.sahne.etkin { opacity: 1; }

/*
 * DOKUNMA İZİ — kare değişmeden hemen önce bir kez çıkıp sönüyor.
 * Konumu ekran görüntüsü alınırken GERÇEK öğeden ölçülüyor.
 *
 * Sürekli nabız atan odak çerçevesi KALDIRILDI (kullanıcı kararı): baskın
 * duruyordu. Geriye gerçek telefondaki gibi tek seferlik, ince bir halka
 * kaldı. 32 px seçildi ki alt sekmeye dokunurken büyüyen halka telefon
 * çerçevesinin dışına taşıp kırpılmasın.
 */
.dokunus {
  position: absolute;
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border: 2px solid var(--turkuaz);
  background: var(--turkuaz-hale);
  border-radius: var(--k-tam);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.dokunus.calis { animation: dokunusDalga .55s ease-out; }
@keyframes dokunusDalga {
  0%   { opacity: .4; transform: scale(.5); }
  100% { opacity: 0;  transform: scale(1.3); }
}
/*
 * Hareket azaltma açıkken animasyon .001 sn'ye iniyor ve iz hiç görünmüyor.
 * Odak çerçevesi de kalktığı için bu ziyaretçiler turu dokunuşsuz
 * izleyecekti — anlatı tamamen kaybolurdu. Sınıf duruyorken iz sabit
 * görünsün.
 */
@media (prefers-reduced-motion: reduce) {
  .dokunus.calis { animation: none; opacity: .4; }
}

/* ── Demo bölümü ─────────────────────────────────────────────────── */
.demo-izgara { display: grid; gap: var(--b-48); align-items: center; }
@media (min-width: 1024px) { .demo-izgara { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }

.rol-secim { display: inline-flex; padding: var(--b-4); border: 1px solid var(--cizgi);
             border-radius: var(--k-tam); background: var(--kart); }
.rol-secim button {
  padding: var(--b-8) var(--b-16);
  border: 0; border-radius: var(--k-tam);
  background: transparent; color: var(--metin-2);
  font-size: var(--y-13); font-weight: 600; cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.rol-secim button[aria-selected="true"] { background: var(--yesil-zemin); color: var(--yesil-metin); }

.akis-liste { display: grid; gap: var(--b-8); margin-top: var(--b-32); }
.akis {
  display: flex; align-items: flex-start; gap: var(--b-16);
  padding: var(--b-16);
  border: 1px solid transparent; border-radius: var(--k-12);
  background: transparent; text-align: left; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
  width: 100%;
}
.akis:hover { background: var(--zemin-2); }
.akis[aria-current="true"] { background: var(--yesil-zemin); border-color: var(--yesil-cizgi); }
/*
 * ADIM NUMARASI ÇEMBERİ.
 *
 * `.akis > span { display: block }` kuralı buradaki `display: flex`i
 * EZİYORDU (iki parçalı seçici tek sınıflıyı yener) ve rakam çemberin
 * 8,5 piksel yukarısında duruyordu. Çıplak `span` seçicisi kaldırıldı;
 * metin sarmalayıcısının artık kendi adı var (`.akis-metin`).
 * BURAYA BİR DAHA ÇIPLAK `span` KURALI YAZMAYIN — `check:site` yakalar.
 */
.akis-no {
  width: 28px; height: 28px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; text-align: center;
  border-radius: var(--k-tam);
  background: var(--kart-2); color: var(--yesil-metin);
  font-size: var(--y-12); font-weight: 700;
  transition: background-color .18s ease, color .18s ease;
}
.akis:hover .akis-no { background: var(--yesil-zemin); color: var(--yesil-parlak); }
/*
 * Etkin adım numarası. Açık zeminde koyu yeşil + beyaz (5.13); koyu zeminde
 * PARLAK yeşil + lacivert yazı (8.5). Parlak yeşil üstüne beyaz 2.69 —
 * okunmuyor, o yüzden iki temada iki farklı çift.
 */
.akis[aria-current="true"] .akis-no { background: var(--yesil); color: var(--dugme-yazi); }
.koyu .akis[aria-current="true"] .akis-no {
  background: var(--yesil-parlak);
  color: var(--lacivert);
}
.akis-metin { display: block; }
.akis-ad { display: block; font-weight: 700; font-size: var(--y-15); }
.akis-aciklama { display: block; font-size: var(--y-13); color: var(--metin-2); }

.demo-alt { display: flex; align-items: center; gap: var(--b-16); margin-top: var(--b-24); flex-wrap: wrap; }
.demo-not { font-size: var(--y-12); color: var(--metin-3); }

/* ── İstatistik ──────────────────────────────────────────────────── */
.istatistik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-24); text-align: center; }
@media (min-width: 900px) { .istatistik { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.istatistik-sayi { font-family: "Plus Jakarta Sans", sans-serif; font-size: var(--y-34); font-weight: 800; line-height: 1.1; color: var(--yesil-metin); }
.istatistik-ad { font-size: var(--y-15); font-weight: 700; margin-top: var(--b-4); }
.istatistik-alt { font-size: var(--y-13); color: var(--metin-3); }

/* ── Özellik kartı ───────────────────────────────────────────────── */
.ozellik-kart { display: flex; flex-direction: column; gap: var(--b-16); }
.ozellik-kart h3 { margin-top: var(--b-8); }
.ozellik-onizleme {
  margin-top: auto; padding-top: var(--b-16);
  border-radius: var(--k-12); overflow: hidden;
}
.ozellik-onizleme img {
  width: 100%; height: 148px; object-fit: cover; object-position: top center;
  border-radius: var(--k-12); border: 1px solid var(--cizgi);
}

/* ── Adım ────────────────────────────────────────────────────────── */
.adim { display: flex; gap: var(--b-16); }
.adim-no {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; text-align: center;
  border-radius: var(--k-tam);
  background: var(--yesil-zemin); color: var(--yesil-metin);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: var(--y-13);
}
.adim h3 { font-size: var(--y-17); }
.adim-sure { display: inline-flex; align-items: center; gap: var(--b-4);
             margin-top: var(--b-8); font-size: var(--y-12); font-weight: 600; color: var(--yesil-metin); }

/* ── Sektör ──────────────────────────────────────────────────────
   Kart ızgarası yerine YATAY KAYDIRMA: 16 kartı mobilde gizlemek
   yerine erişilebilir bırakıyor, sayfayı da uzatmıyor.
   ---------------------------------------------------------------- */
.sektor-serit {
  display: grid; grid-auto-flow: column; grid-auto-columns: 260px;
  gap: var(--b-16);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--b-16);
  scrollbar-width: thin;
}
.sektor-serit > * { scroll-snap-align: start; }
@media (min-width: 640px)  { .sektor-serit { grid-auto-flow: row; grid-auto-columns: auto;
                                             grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } }
@media (min-width: 900px)  { .sektor-serit { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sektor-serit { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sektor-kart { display: flex; flex-direction: column; gap: var(--b-12); }
.sektor-kim { font-size: var(--y-12); font-weight: 600; color: var(--yesil-metin); }
.sektor-digerleri {
  margin-top: var(--b-32); padding: var(--b-24);
  border: 1px dashed var(--cizgi-2); border-radius: var(--k-20);
  text-align: center;
}

/* ── Yorum ───────────────────────────────────────────────────────── */
.yorum-serit {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(88vw, 380px);
  gap: var(--b-24);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--b-16);
}
.yorum-serit > * { scroll-snap-align: center; }
.yorum-kart { display: flex; flex-direction: column; gap: var(--b-16); height: 100%; }
.yorum-yildiz { display: flex; gap: var(--b-4); color: var(--yesil-metin); }
.yorum-metin { font-size: var(--y-15); line-height: 1.8; color: var(--metin); }
.yorum-kisi { display: flex; align-items: center; gap: var(--b-12); margin-top: auto; padding-top: var(--b-16); border-top: 1px solid var(--cizgi); }
.yorum-bas {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; text-align: center;
  border-radius: var(--k-tam);
  background: var(--yesil-zemin); color: var(--yesil-metin);
  font-weight: 800; font-size: var(--y-13);
}
.yorum-kimlik { display: block; }
.yorum-ad { display: block; font-weight: 700; font-size: var(--y-13); }
.yorum-rol { display: block; font-size: var(--y-12); color: var(--metin-3); }
.serit-oklar { display: flex; gap: var(--b-8); justify-content: center; margin-top: var(--b-24); }

/* ── SSS ─────────────────────────────────────────────────────────
   `<details>` kullanılıyor: JavaScript olmadan açılıp kapanıyor ve arama
   motoru içeriği HER ZAMAN görüyor. Gizlenen içerik indekslenmez diye
   sekmeli bir yapı seçilmedi.
   ---------------------------------------------------------------- */
.sss-izgara { display: grid; gap: var(--b-12); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .sss-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

.sss {
  border: 1px solid var(--cizgi);
  border-radius: var(--k-12);
  background: var(--kart);
  transition: border-color .18s ease;
}
.sss[open] { border-color: var(--yesil-cizgi); }

.sss summary {
  display: flex; align-items: flex-start; gap: var(--b-12);
  padding: var(--b-16);
  font-weight: 700; font-size: var(--y-15); line-height: 1.5;
  cursor: pointer;
  list-style: none;
}
/* Tarayıcının kendi üçgeni kaldırılıyor — yerine kendi ikonumuz var */
.sss summary::-webkit-details-marker { display: none; }
.sss summary::marker { content: ""; }
.sss summary:hover { color: var(--yesil-metin); }

.sss-ok { margin-left: auto; color: var(--metin-3); transition: transform .2s ease; }
.sss[open] .sss-ok { transform: rotate(180deg); color: var(--yesil-metin); }

.sss-cevap {
  padding: 0 var(--b-16) var(--b-16);
  font-size: var(--y-15); line-height: 1.75; color: var(--metin-2);
}
.sss-cevap > * + * { margin-top: var(--b-12); }

/* ── Çağrı (CTA) ─────────────────────────────────────────────────── */
.cta-kutu { text-align: center; padding: var(--b-64) var(--b-24); border-radius: var(--k-20); }
.cta-avantajlar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--b-16); margin-top: var(--b-24); }
.cta-avantaj { display: inline-flex; align-items: center; gap: var(--b-8); font-size: var(--y-13); font-weight: 600; color: var(--metin-2); }
.cta-avantaj .ikon { color: var(--yesil-metin); }
.cta-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--b-12); margin-top: var(--b-32); }
.cta-not { margin-top: var(--b-24); font-size: var(--y-13); color: var(--metin-3); }

/* ── Altlık ──────────────────────────────────────────────────────── */
.altlik { padding: var(--b-64) 0 var(--b-32); }
.altlik-izgara { display: grid; gap: var(--b-32); }
@media (min-width: 640px)  { .altlik-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .altlik-izgara { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); } }
.altlik h4 { font-size: var(--y-13); font-weight: 700; margin-bottom: var(--b-16); }
.altlik ul { list-style: none; display: grid; gap: var(--b-8); }
.altlik a, .altlik li { font-size: var(--y-13); color: var(--metin-2); }
.altlik a:hover { color: var(--yesil-metin); }
.altlik-marka-metin { margin-top: var(--b-16); max-width: 42ch; }
.altlik-etiketler { display: flex; flex-wrap: wrap; gap: var(--b-8); margin-top: var(--b-16); }
.etiket {
  padding: var(--b-4) var(--b-8);
  border: 1px solid var(--cizgi); border-radius: var(--k-8);
  font-size: var(--y-12); font-weight: 600; color: var(--metin-2);
}
.etiket-yesil { border-color: var(--yesil-cizgi); background: var(--yesil-zemin); color: var(--yesil-metin); }
.altlik-alt {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-8);
  margin-top: var(--b-48); padding-top: var(--b-24);
  border-top: 1px solid var(--cizgi);
  font-size: var(--y-12); color: var(--metin-3);
}
.ofis-satir { font-size: var(--y-12); color: var(--metin-2); line-height: 1.7; }
.ofis-ulke { display: flex; align-items: center; gap: var(--b-8); font-weight: 700; font-size: var(--y-12); color: var(--metin); margin-top: var(--b-12); }

/* ── İndirme penceresi ───────────────────────────────────────────── */
.perde {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: var(--b-24);
  background: var(--perde);
  backdrop-filter: blur(4px);
}
.perde.acik { display: flex; }
.pencere {
  width: 100%; max-width: 520px;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--k-20); padding: var(--b-32);
  box-shadow: var(--golge-3);
  max-height: 90vh; overflow-y: auto;
}
/* Pencerenin kendisi konumlanma zemini — kapatma düğmesi köşeye otursun */
.pencere { position: relative; }
.pencere-basi { margin-bottom: var(--b-24); padding-right: var(--b-48); }

/* Kapatma düğmesi SAĞ ÜST KÖŞEDE, akışın dışında */
.pencere-kapat { position: absolute; top: var(--b-16); right: var(--b-16); }

.indirme-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-12); }
.indirme-kart {
  display: flex; flex-direction: column; gap: var(--b-8);
  padding: var(--b-16);
  border: 1px solid var(--cizgi); border-radius: var(--k-12);
  transition: border-color .18s ease;
}
.indirme-kart:hover { border-color: var(--yesil-cizgi); }
.indirme-ad { display: block; font-weight: 700; font-size: var(--y-13); }
.indirme-alt { display: block; font-size: var(--y-12); color: var(--metin-3); }

/*
 * Platform simgeleri marka renginde. Her platformun kendi rengi olduğu
 * için bunlar tema belirteci DEĞİL — App Store mavisi temayla değişmez.
 *
 * iOS ve Android kartlarında jenerik elma/robot değil MAĞAZA logoları var:
 * ziyaretçi "nereden indireceğim" sorusunun cevabını simgeden okuyor.
 * macOS kartı tarayıcıya yönlendirdiği için nötr renkte kalıyor.
 */
.indirme-kart .ikon { color: var(--metin); }
.platform-ios .ikon { color: var(--marka-appstore); }
.platform-android .ikon { color: var(--marka-android); }
.platform-windows .ikon { color: var(--marka-windows); }

/*
 * "İndir / Aç" gerçek düğme.
 * Pasif hâlde soluk VE tıklanamaz: `pointer-events: none` olmadan düğme
 * sönük görünüp yine de tepki verirdi — kullanıcıyı yanıltırdı.
 */
.indirme-dugme {
  margin-top: auto;
  width: 100%;
  height: 36px;
  font-size: var(--y-12);
}
.indirme-dugme[aria-disabled="true"] {
  background: var(--kart-2);
  color: var(--metin-3);
  border-color: var(--cizgi);
  cursor: default;
  pointer-events: none;
}
.pencere-ayirac { display: flex; align-items: center; gap: var(--b-12); margin: var(--b-24) 0; color: var(--metin-3); font-size: var(--y-12); }
.pencere-ayirac::before, .pencere-ayirac::after { content: ""; flex: 1; height: 1px; background: var(--cizgi); }

/* ── Blog ────────────────────────────────────────────────────────── */
.blog-basi { padding: var(--b-64) 0 var(--b-48); }
.blog-izgara { display: grid; gap: var(--b-32); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px)  { .blog-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .blog-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/*
 * KAPAK GÖRSELİ — `height: auto` OLMADAN `aspect-ratio` ÇALIŞMAZ.
 * <img> üzerindeki height="630" özniteliği yüksekliği 630 pikselde
 * sabitliyor; aspect-ratio yalnız bir boyut `auto` olduğunda devreye
 * giriyor. Bu satır eksikken kart kutusu 306×630 (oran 0,49) oluyordu ve
 * object-fit: cover, 1200×630'luk görselin %74'ünü kırpıyordu — ekranda
 * "AGEMENT" gibi yarım kelimeler görünüyordu. Öznitelikler HTML'de
 * kalıyor: tarayıcı yeri önceden ayırsın, sayfa zıplamasın.
 */
.blog-kapak {
  width: 100%; height: auto;
  aspect-ratio: 1200 / 630;
  background: var(--zemin-2);
  object-fit: cover;
}
.blog-kapak-yok {
  width: 100%;
  aspect-ratio: 1200 / 630;
  background: var(--yesil-zemin);
  display: flex; align-items: center; justify-content: center;
  color: var(--yesil-metin);
}

/*
 * KART: kapak kartın kenarına yapışıyor, yazı kısmı kendi boşluğunu
 * taşıyor. Kartın tamamı tek bir bağlantı.
 */
.blog-kart { padding: 0; overflow: hidden; }
.blog-kart-bag { display: flex; flex-direction: column; height: 100%; }
.blog-kart .blog-kapak, .blog-kart .blog-kapak-yok { border-bottom: 1px solid var(--cizgi); }
.blog-kart-govde { flex: 1; display: flex; flex-direction: column; gap: var(--b-12); padding: var(--b-24); }
.blog-kart-baslik { font-size: var(--y-17); }
.blog-kart:hover .blog-kart-baslik { color: var(--yesil-metin); }
.blog-kart-ozet {
  font-size: var(--y-13); color: var(--metin-2);
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden;
}
.blog-kart-alt { margin-top: auto; padding-top: var(--b-12); display: grid; gap: var(--b-12); }
.blog-kart-devam { display: inline-flex; align-items: center; gap: var(--b-8); font-size: var(--y-13); font-weight: 600; color: var(--yesil-metin); }

.blog-ust-bilgi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-12); font-size: var(--y-12); color: var(--metin-3); }
.blog-ust-bilgi time, .blog-sure { display: inline-flex; align-items: center; gap: var(--b-4); }
.blog-etiketler { display: flex; flex-wrap: wrap; gap: var(--b-8); }

/* Yazı sayfası */
/*
 * YAZI SAYFASI TAM GENİŞLİKTE. Eskiden kapak 900, gövde 720 pikselle
 * sınırlıydı. Kullanıcı kararıyla xbarkod.com/tr/blog düzenine geçildi:
 * kapak ve metin kapsayıcının tamamını (1180px) kullanıyor.
 * Sıra da oradaki gibi: iz → etiket → kapak → başlık → tarih.
 * Satır aralığı 1.85 korunuyor — geniş satırda okumayı ayakta tutan şey o.
 */
.yazi { padding: var(--b-48) 0 var(--b-96); }
.yazi-ust { display: grid; gap: var(--b-16); margin-bottom: var(--b-24); }
.yazi-basi { margin: var(--b-32) 0; padding-bottom: var(--b-24); border-bottom: 1px solid var(--cizgi); }
.yazi-basi h1 { font-size: var(--y-34); margin-bottom: var(--b-16); }
.yazi-kapak { border-radius: var(--k-20); border: 1px solid var(--cizgi); }
.yazi-govde { font-size: var(--y-17); line-height: 1.85; }
.yazi-govde > * + * { margin-top: var(--b-24); }
.yazi-govde h2 { font-size: var(--y-24); margin-top: var(--b-48); }
.yazi-govde h3 { font-size: var(--y-19); margin-top: var(--b-32); }
.yazi-govde ul, .yazi-govde ol { padding-left: var(--b-24); display: grid; gap: var(--b-8); }
.yazi-govde a { color: var(--yesil-metin); text-decoration: underline; }
.yazi-govde img { border-radius: var(--k-12); border: 1px solid var(--cizgi); }
.yazi-govde blockquote {
  padding-left: var(--b-24);
  border-left: 3px solid var(--yesil-cizgi);
  color: var(--metin-2);
}
.yazi-govde pre {
  padding: var(--b-16); border-radius: var(--k-12);
  background: var(--zemin-2); overflow-x: auto;
  font-size: var(--y-13);
}
.yazi-govde code { font-size: var(--y-13); }
.yazi-govde table { width: 100%; border-collapse: collapse; font-size: var(--y-13); }
.yazi-govde th, .yazi-govde td { padding: var(--b-8) var(--b-12); border: 1px solid var(--cizgi); text-align: left; }
.yazi-govde th { background: var(--zemin-2); font-weight: 700; }

/*
 * Yazı sonundaki çağrı ve "diğer yazılar" okuma sütunundan biraz geniş ama
 * sayfa genişliğinden dar — metinden ayrıldıkları belli olsun, sayfayı da
 * ikiye bölmesinler.
 */
.yazi-cta { margin: var(--b-64) 0 0; }
.yazi-digerleri { margin: var(--b-64) 0 0; }
.yazi-digerleri h2 { margin-bottom: var(--b-24); }
.yazi-digerleri .dugme { margin-top: var(--b-24); }

.icindekiler {
  margin: 0 0 var(--b-32);
  padding: var(--b-24);
  border: 1px solid var(--cizgi); border-radius: var(--k-12);
  background: var(--zemin-2);
}
.icindekiler h2 { font-size: var(--y-13); margin-bottom: var(--b-12); }
.icindekiler ol { padding-left: var(--b-24); display: grid; gap: var(--b-8); font-size: var(--y-13); }
.icindekiler a { color: var(--metin-2); }
.icindekiler a:hover { color: var(--yesil-metin); }

.iz { display: flex; flex-wrap: wrap; gap: var(--b-8); font-size: var(--y-12); color: var(--metin-3); }
.iz a:hover { color: var(--yesil-metin); }

.sayfalama { display: flex; justify-content: center; gap: var(--b-8); margin-top: var(--b-48); }
.sayfalama a, .sayfalama span {
  min-width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0 var(--b-12);
  border: 1px solid var(--cizgi); border-radius: var(--k-8);
  font-size: var(--y-13); font-weight: 600; color: var(--metin-2);
}
.sayfalama a:hover { border-color: var(--yesil-cizgi); color: var(--yesil-metin); }
.sayfalama .simdiki { background: var(--yesil-zemin); border-color: var(--yesil-cizgi); color: var(--yesil-metin); }

/* Görünürken belirme — tek efekt, her öğeye değil bölüm başına.
 *
 * `.js` KOŞULU ŞART: içerik varsayılan olarak GÖRÜNÜR. JavaScript
 * çalışmazsa (eski tarayıcı, betik engelleyici, ağ hatası) sayfanın yarısı
 * bomboş kalırdı. Gizleme yalnız betiğin çalıştığı doğrulandıktan sonra
 * uygulanıyor — betik `<head>` içinde bu sınıfı ekliyor.
 */
.js .belir { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.js .belir.gorundu { opacity: 1; transform: none; }

/* Hareketi azalt açıksa gizleme hiç yapılmaz */
@media (prefers-reduced-motion: reduce) {
  .js .belir { opacity: 1; transform: none; }
}

/*
 * "İçeriğe atla" — klavyeyle gezen ziyaretçi menüyü her sayfada tek tek
 * geçmek zorunda kalmasın. Yalnız odaklanınca görünüyor.
 */
.atla {
  position: absolute; left: var(--b-8); top: -60px; z-index: 200;
  padding: var(--b-8) var(--b-16);
  background: var(--yesil); color: var(--dugme-yazi);
  border-radius: var(--k-8);
  font-size: var(--y-13); font-weight: 700;
  transition: top .15s ease;
}
.atla:focus { top: var(--b-8); }

/* Slogan — üç parça, üç renk (marka renklerinden) */
.slogan-yesil { color: var(--yesil-metin); }
.slogan-lacivert { color: var(--metin); }

/* Yalnız ekran okuyucular için */
.gizli-metin {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Sektör sayfası ──────────────────────────────────────────────
   Turun bütün stilleri (.demo-izgara, .akis, .telefon) OLDUĞU GİBİ
   kullanılıyor — anasayfayla tek kaynak. Burada yalnız sektöre özel
   başlık, telefonun üstüne düşen bildirim şeridi ve kartın demo
   bağlantısı tanımlı.
   ---------------------------------------------------------------- */
.sektor-hero { padding: var(--b-64) 0 var(--b-48); }
/*
 * SOLDA SEKTÖRÜ ANLATAN ÇİZİM, SAĞDA YAZI. Çizim süs değil: ziyaretçi
 * sayfaya düştüğü anda hangi sektörde olduğunu okumadan anlıyor.
 * Telefonda çizim küçülüp yazının üstüne geçiyor.
 */
.sektor-hero-izgara { display: grid; gap: var(--b-32); align-items: center; }
.sektor-cizim { color: var(--metin); max-width: 320px; }
.sektor-cizim-resim { display: block; width: 100%; height: auto; }
/* Çizimdeki vurgu parçaları marka yeşiline boyanıyor */
.cizim-vurgu { color: var(--yesil-metin); }
@media (min-width: 900px) {
  .sektor-hero-izgara { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--b-64); }
  .sektor-cizim { max-width: none; }
}
/*
 * BU SINIF `.kap` İLE AYNI ÖĞEYE KONMAZ.
 *
 * Konduğunda `max-width: 720px` — sonra yazıldığı için — `.kap`'ın 1180'ini
 * eziyor ama `.kap`'ın `margin: 0 auto` değeri ayakta kalıyor: kutu 720'ye
 * düşüp ORTADA kalıyor, içindeki yazı sola yaslı duruyor. 1280 piksellik
 * ekranda başlık, üst çubuktaki logodan 230 piksel içeriden başlıyordu.
 * Doğrusu iç içe: <div class="kap"><div class="sektor-hero-ic">…
 * Anasayfanın kahramanı da böyle (`.hero-izgara` max-width vermiyor).
 */
.sektor-hero-ic { display: grid; gap: var(--b-16); max-width: 720px; }
/*
 * Izgara çocukları varsayılan olarak GERİLİR. Rozet baştan başa uzayıp
 * hap görünümünü kaybediyordu; başlık ve paragrafın gerilmesi ise doğru,
 * bu yüzden hepsine birden değil yalnız rozete veriliyor.
 */
.sektor-hero-ic > .rozet { justify-self: start; }
.sektor-hero-eylem {
  display: flex; flex-wrap: wrap; gap: var(--b-12); margin-top: var(--b-8);
}
.sektor-cagri-eylem { justify-content: center; }

/*
 * SEKTÖR TURUNDA TELEFON YUKARIDA. Solda 10 adım var; ortalanınca telefon
 * listenin ortasına düşüyor ve ekranın altında kalıyordu. Geniş ekranda
 * kaydırırken yapışıp kalıyor, böylece adımları okurken görünür duruyor.
 *
 * Bu kural YALNIZ sektör sayfasına veriliyor: `.demo-izgara` anasayfayla
 * ortak ve orada 4 adım var, ortalama orada doğru duruyor.
 */
@media (min-width: 1024px) {
  .sektor-demo { align-items: start; }
  .sektor-demo .telefon { position: sticky; top: 96px; }
}

/* ── "Neden ihtiyacım var" — zorluk / karşılığı ──────────────────
   Solda zorluk, tam sağında çözümü. Telefonda alt alta.
   KART DEĞİL: sitede zaten üç kart ızgarası var (özellikler, sektörler,
   adımlar); dördüncüsü bütün bölümleri birbirinin aynı yapardı. Satırlar
   ince çizgiyle ayrılıyor.
   ---------------------------------------------------------------- */
/*
 * SOLDAN SAĞA: mevcut düzen → FinalWork. Sol taraf hafif kırmızı, sağ taraf
 * hafif yeşil, ortada sağa bakan ok. Göz soldan sağa kayarken "kötüden
 * iyiye" geçişi kendiliğinden okuyor.
 *
 * Kutular kart DEĞİL — sitede zaten üç kart ızgarası var. Zemin saydam,
 * çerçeve ince; kartların dolu zemini ve gölgesi yok.
 *
 * Orta sütun SABİT 32 px: başlık satırı ile içerik satırları ayrı ızgaralar,
 * `auto` bırakılsa ikisinin orta sütunu farklı genişlikte çıkar ve
 * başlıklar sütunlarından kayardı.
 */
.neden-liste { display: grid; gap: var(--b-16); }
.neden-basliklar { display: none; }
.neden-satir { display: grid; gap: var(--b-12); }
.neden-yan {
  display: flex; align-items: flex-start; gap: var(--b-12);
  padding: var(--b-16);
  border: 1px solid transparent; border-radius: var(--k-12);
}
.neden-zorluk {
  background: var(--kirmizi-zemin); border-color: var(--kirmizi-cizgi);
  color: var(--metin-2);
}
.neden-cozum {
  background: var(--yesil-zemin); border-color: var(--yesil-cizgi);
  color: var(--metin); font-weight: 600;
}
.neden-isaret { flex: 0 0 auto; line-height: 1; }
.neden-isaret-kotu { color: var(--kirmizi-metin); }
.neden-isaret-iyi { color: var(--yesil-metin); }
.neden-metin { display: block; }
/* Telefonda kutular alt alta; ok da aşağı bakıyor */
.neden-ok {
  display: flex; align-items: center; justify-content: center;
  color: var(--metin-3); transform: rotate(90deg);
}
.neden-kapanis {
  max-width: 680px; margin: var(--b-32) auto 0;
  text-align: center; color: var(--metin-2);
}
@media (min-width: 900px) {
  .neden-basliklar {
    display: grid; grid-template-columns: 1fr 32px 1fr; gap: var(--b-16);
    padding: 0 var(--b-16);
    font-size: var(--y-12); font-weight: 700; color: var(--metin-3);
  }
  .neden-basliklar-sonra { grid-column: 3; color: var(--yesil-metin); }
  .neden-satir { grid-template-columns: 1fr 32px 1fr; gap: var(--b-16); }
  .neden-ok { transform: none; }
}

/*
 * Telefonun üstüne düşen bildirim şeridi.
 *
 * NEDEN SİTE ÇİZİYOR: bu şeridi İŞLETİM SİSTEMİ çiziyor, uygulama değil —
 * uygulamanın ekran görüntüsünde hiç görünmüyor, dolayısıyla
 * fotoğraflanamıyor. Şeridin METNİ uygulamanın gerçek bildirim metninden
 * geliyor (`worker/src/services/hatirlatma.ts`); uydurma cümle yok.
 * Telefonun İÇİ hâlâ gerçek ekran görüntüsü.
 */
.telefon-bildirim {
  position: absolute; z-index: 3;
  left: var(--b-8); right: var(--b-8); top: var(--b-8);
  display: grid; gap: var(--b-4);
  padding: var(--b-12);
  border-radius: var(--k-12);
  background: var(--kart-2);
  border: 1px solid var(--cizgi-2);
  box-shadow: var(--golge-2);
}
.telefon-bildirim-ust {
  display: flex; align-items: center; gap: var(--b-8);
  font-size: var(--y-12); font-weight: 700; color: var(--metin);
}
.telefon-bildirim-govde {
  font-size: var(--y-12); line-height: 1.5; color: var(--metin-2);
}
.sahne.etkin .telefon-bildirim { animation: bildirimDus .32s ease-out; }
@keyframes bildirimDus {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sahne.etkin .telefon-bildirim { animation: none; }
}

/*
 * Sektör kartının demo bağlantısı.
 *
 * Kartlar bugüne kadar `kart-etkilesim` ile üzerine gelince oynuyor ama
 * hiçbir yere gitmiyordu — görünüşte tıklanabilir, gerçekte değil.
 * Artık her kartın kendi sayfası var.
 */
/*
 * Kartın demo bağlantısı DÜĞME. Yeşil bir yazı bağlantısıyken kartın içinde
 * kayboluyordu; sektör sayfasına giden tek kapı o. Yeni düğme türü icat
 * edilmiyor — sitenin kendi `dugme dugme-dolu` sınıfı kullanılıyor.
 * `align-self` olmadan flex sütunda baştan başa gerilir.
 */
.sektor-kart-baglanti { margin-top: auto; align-self: flex-start; }

/* ------------------------------------------------------------------ */
/* Yasal sayfalar — gizlilik, koşullar, KVKK, hesap silme, destek       */
/* ------------------------------------------------------------------ */
/* `.kap` 1180'e yayar; okunabilir satır uzunluğu için İÇTE ayrı bir
   sütun — aynı öğeye iki sınıf konmaz (gotchas: ortalama iptal olur). */
.yasal-govde { max-width: 760px; margin: 0 auto; }
.yasal-govde .yazi-basi h1 { font-size: var(--y-34); }
.yasal-govde .yazi-govde p, .yasal-govde .yazi-govde li { color: var(--metin-2); }
.yasal-govde .yazi-govde li { margin-top: 0; }
.tablo-kaydir { overflow-x: auto; }
.yasal-tablo { width: 100%; border-collapse: collapse; font-size: var(--y-15); line-height: 1.6; }
.yasal-tablo th, .yasal-tablo td { text-align: left; vertical-align: top; padding: var(--b-12) var(--b-16); border-bottom: 1px solid var(--cizgi); }
.yasal-tablo th { font-weight: 600; color: var(--metin); background: var(--zemin-2); }
.yasal-geri { margin-top: var(--b-48); }
.altlik-yasal-baslik { margin-top: var(--b-24); }

/* ------------------------------------------------------------------ */
/* Mağaza uygulaması satırı — yalnız telefonda, site.js ekler           */
/* ------------------------------------------------------------------ */
/* Proje sahibinin kararı (2026-09-15): telefondan gelen ziyaretçiye en
   altta "mobil uygulamayı yükleyin". İndirme penceresinin (100) ALTINDA
   kalır. Satır açıkken sayfanın sonu satırın arkasında kalmasın diye
   gövdeye alt boşluk verilir. Yeni düğme türü yok: `dugme dugme-dolu`. */
.magaza-seridi {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: var(--b-12);
  padding: var(--b-8) var(--b-16);
  padding-bottom: calc(var(--b-8) + env(safe-area-inset-bottom));
  background: var(--kart);
  border-top: 1px solid var(--cizgi);
  box-shadow: var(--golge-2);
}
.magaza-seridi-simge { flex: 0 0 auto; width: 32px; height: 32px; }
.magaza-seridi-metin {
  flex: 1; min-width: 0;
  font-size: var(--y-13); font-weight: 600; line-height: 1.35; color: var(--metin);
}
.magaza-seridi-dugme { flex: 0 0 auto; padding: 0 var(--b-16); }
body.magaza-seridi-acik { padding-bottom: 72px; }