/* ═══ SpeedSIS — proje geneli ince ayarlar (kit dışı, tema token'larıyla) ═══
   Kart sahneleri scenes.css'te; burası bölüm düzeni gibi küçük dokunuşlar.
   Tema linkinden ÖNCE yüklenir (çakışan kuralda tema kazansın). */

/* Apps bölümü: buton satırı ortalı, mağaza ikonu buton içinde */
.store-row { justify-content: center; margin-top: 26px; }
.store-btn { display: inline-flex; align-items: center; gap: 10px; }
.store-btn img { width: 22px; height: 22px; border-radius: 6px; }

/* Demo formu: iki sütun alan ızgarası (dar ekranda tek sütun) */
.demo-form { display: flex; flex-direction: column; gap: 14px; }
/* `hidden` özniteliği display:flex'e yenilmesin (gönderim sonrası form gizlenir) */
.demo-form[hidden] { display: none; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .demo-grid { grid-template-columns: 1fr; } }

/* Demo formu gönderildi: teşekkür bloğu */
.demo-done { display: flex; flex-direction: column; gap: 8px; }

/* Modül sayfası: sahne kutusu kartın 185px'inden büyük (özgüllük tema kuralını geçer) */
.split-art .fcard-scene.feature-scene { height: 300px; }

/* Marka görseli (nav + footer): kit .logo-mark harfi yerine yuvarlak köşeli logo */
.logo-img { width: 28px; height: 28px; border-radius: 8px; display: block; flex: none; }

/* ── Hero maketi: laptop (arka) + telefon (ön sağ alt); çerçeveler tema token'larıyla ──
   Ekran görüntüleri web/images/shots/{desktop,phone}.png (çerçevesiz ham ekran; telefon
   görüntüsü kendi durum çubuğunu taşır; island + ana çizgi çerçeveden, oranlı). */
.devices { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 16 / 11; }
/* content-box: aspect-ratio çerçeve DAHİL değil, görüntünün kendi kutusuna uygulanır → kırpma yok */
.dev-screen { box-sizing: content-box; overflow: hidden; background: var(--ink); box-shadow: var(--hard); }
.dev-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dev-laptop { position: absolute; left: 0; top: 0; width: 88%; }
/* Laptop ekranı: koyulan görüntünün oranı (2676×1692) → hiçbir kenar kırpılmaz. Görüntü değişirse oranı güncelle. */
.dev-laptop .dev-screen { aspect-ratio: 2676 / 1692; border: 5px solid var(--ink); border-bottom-width: 7px; border-radius: 10px 10px 3px 3px; }
.dev-laptop .dev-base { height: 12px; margin: 0 -4%; border-radius: 0 0 10px 10px; background: var(--ink-soft); }
.dev-laptop .dev-base::after { content: ''; display: block; width: 18%; height: 4px; margin: 0 auto; background: var(--ink); border-radius: 0 0 4px 4px; opacity: .6; }
.dev-phone { position: absolute; right: 0; bottom: 0; width: 27%; }
.dev-phone .dev-screen { position: relative; aspect-ratio: 9 / 19.5; border: 4px solid var(--ink); border-radius: 24px; }
.dev-phone .dev-screen img { border-radius: 20px; }
/* iPhone 14/15 Pro geometrisi, ekran kutusuna oranla (393×852pt): island 126×37pt @ üstten 11pt,
   ana çizgi 134×5pt @ alttan 8pt. Ekran görüntüsünün durum çubuğu (saat/pil) kenarlarda kalır. */
.dev-phone .dev-screen::before { content: ''; position: absolute; left: 50%; top: 1.3%; width: 32%; height: 4.35%; transform: translateX(-50%); background: #0b0b0f; border-radius: 999px; z-index: 1; }
.dev-phone .dev-screen::after { content: ''; position: absolute; left: 50%; bottom: .95%; width: 34%; height: .6%; min-height: 2px; transform: translateX(-50%); background: rgba(0, 0, 0, .85); border-radius: 999px; z-index: 1; }
@media (max-width: 900px) {
  .dev-laptop { display: none; }
  .devices { aspect-ratio: auto; max-width: 360px; }
  .dev-phone { position: static; width: 240px; margin: 0 auto; } /* akış kartı telefondan geniş kalsın (metin kesilmesin) */
}

/* ── Canlı akış: laptop sol altında kart (üst şerit + 3 satır); liste 3,5 sn'de bir satır yukarı
   kayar (6 satır + 3 tekrar = kesintisiz 21 sn döngü). Renkler tema token'ları; degrade/blur yok. ── */
.live-feed {
  --row: 26px; --head: 22px; position: absolute; left: -3%; bottom: -6px; width: 52%; padding: 0 12px 4px;
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--splash);
  border-radius: var(--radius-sm); box-shadow: var(--hard-sm); font-family: var(--font-head);
}
.live-feed-head { height: var(--head); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed var(--line); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.live-feed-head b { display: flex; align-items: center; gap: 5px; color: var(--ink); }
.live-feed-head b i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: lf-pulse 1.6s ease-in-out infinite; }
@keyframes lf-pulse { 50% { opacity: .35; transform: scale(.8); } }
/* Kayan liste KENDİ kutusunda kırpılır (şeridin altında), kartın kenarında değil. */
.live-feed-body { height: calc(var(--row) * 3); overflow: hidden; }
.live-feed-list { list-style: none; margin: 0; padding: 0; animation: lf-scroll 21s linear infinite; }
.live-feed-list li { height: var(--row); display: flex; align-items: center; gap: 8px; font-size: .68rem; font-weight: 700; color: var(--ink); border-bottom: 1px dashed var(--line); }
.live-feed-list li > i { flex: none; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: .62rem; background: color-mix(in srgb, var(--c, var(--pine)) 18%, var(--card)); }
.live-feed-list li > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Güçlü token'lar: --sage bazı temalarda (kurumsal-ajanda) beyaza yakın, kullanılmaz. */
.lf-pine { --c: var(--pine); } .lf-sky { --c: var(--sky); } .lf-red { --c: var(--red); } .lf-mustard { --c: var(--mustard); }
@keyframes lf-scroll {
  0%, 14.3%    { transform: translateY(0); }
  16.67%, 31%  { transform: translateY(calc(var(--row) * -1)); }
  33.33%, 47.6% { transform: translateY(calc(var(--row) * -2)); }
  50%, 64.3%   { transform: translateY(calc(var(--row) * -3)); }
  66.67%, 81%  { transform: translateY(calc(var(--row) * -4)); }
  83.33%, 97.6% { transform: translateY(calc(var(--row) * -5)); }
  100%         { transform: translateY(calc(var(--row) * -6)); }
}
@media (max-width: 900px) { .live-feed { position: static; width: 100%; margin-top: 14px; --row: 26px; } .live-feed-list li { font-size: .74rem; } }
@media (prefers-reduced-motion: reduce) { .live-feed-list, .live-feed-head b i { animation: none; } }

/* Özellik kartı: tamamı tıklanabilir (client/feature_cards.dart) */
.fcard[data-href] { cursor: pointer; }