/* Pazarlama ve giriş sayfalarının kabukla ortak dili — docs/spec-pazarlama-dashboard-dili.md
   Yükleme sırası: gömülü STYLE (pages.py) → velvet-ortak.css (tokenlar, temalar, buton sistemi;
   ÜRETİLMİŞ) → bu dosya → marketing-refined.css (yalnız ana sayfa) → marketing-liquid.css.
   Burada RENK YAZILMAZ: her şey kabuk tokenıdır; tema değişince site de değişir. */

/* ---- 1. Köprü. Gömülü STYLE 650 yerde eski adları kullanıyor ve /breakdown ile ortak; ona
   dokunmuyoruz. Bu dosya yalnız pazarlama ve giriş sayfalarında yüklendiği için köprü de yalnız
   orada kurulur. Açık sitede --black "mürekkep", --white "kâğıt" demekti; anlam aynen taşınır. */
:root {
  --white: var(--bg); --black: var(--fg);
  --gray-50: var(--bg-1); --gray-100: var(--bg-2); --gray-300: var(--line-2);
  --gray-500: var(--fg-mute); --gray-700: var(--fg-dim);
  --good: var(--ok); --good-soft: var(--ok-soft);
}

/* ---- 2. Gövde ve yazı. Tek aile: kabuğun --font-ui'si (çerezle değişir). Mono etiketler kalkar;
   kod örnekleri mono kalır. !important bilerek: STYLE yüzlerce yerde `font:` kısayoluyla aileyi
   yeniden yazıyor, tek tek kovalamak yerine kural tek yerde durur. */
html { background: var(--bg); }
body { background: var(--bg); color: var(--fg); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
:is(.marketing, .login-page, .login-panel) :not(code, pre, kbd, samp, code *, pre *),
:is(.marketing, .login-page, .login-panel) :not(code, pre, kbd, samp)::before,
:is(.marketing, .login-page, .login-panel) :not(code, pre, kbd, samp)::after { font-family: var(--font-ui) !important; }
:is(.marketing, .login-page) :is(code, pre, kbd, samp) { background: var(--bg-2); color: var(--fg); border-radius: 4px; }
/* Komut kutusu. Bu iki satıra kadar `pre` yalnız bir zemin rengi alıyordu: dolgusu yoktu ve
   taşma kuralı yoktu, yani uzun bir komut (jetonlu adres) dar ekranda SAYFAYI yana kaydırıyordu.
   Kural burada, ortak katmanda duruyor — sayfaya özel ikinci bir <style> bloğu açmak, tam da
   `olcum.py`den kaldırdığımız şey olurdu. `overflow-wrap` satır içi `code` içindir: uzun adres
   kutunun içinde kırılır, kutunun dışına taşmaz. */
:is(.marketing, .login-page) pre { margin: 14px 0; padding: 14px 16px; overflow-x: auto; max-width: 100%; font-size: 14px; line-height: 1.6; }
:is(.marketing, .login-page) :not(pre) > code { padding: 1px 5px; overflow-wrap: anywhere; }
::selection { background: var(--accent-soft); color: var(--fg); }

/* ---- 3. Odak: kabukla aynı halka. */
:is(.marketing, .login-page, .login-panel) :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---- 4. Düğmeler buton sistemidir (.btn, velvet-ortak.css). Burada yalnız yerleşim. */
.marketing a.btn, .login-page a.btn, .login-panel a.btn { text-decoration: none; }
/* Gezinmedeki düğme bir bağlantı değil düğmedir: `.marketing-links a` kuralları (9 px, büyük harf, gri)
   onu ezmesin. Ölçüm: yazı/zemin kontrastı 1.17'ye düşmüştü. */
.marketing-links a.btn, .marketing-links a.btn:hover { color: var(--_fg); font-size: var(--_fs); font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; }
.hero-actions { align-items: center; }
.login-form .btn { width: 100%; margin-top: 30px; }
.waitlist-form .btn { align-self: end; }
.workflow-footer .btn { flex: none; }

/* ---- 5. Ters bloklar. Açık sitede "siyah zemin, beyaz yazı" olan vurgu blokları köprüden sonra koyu
   sayfada parlak levhaya dönerdi. Vurgu, kabukta olduğu gibi YÜKSELTİLMİŞ YÜZEYLE verilir. */
.login-art, .featured, .empty-work-mark, .layer-card.primary, .process-title {
  background: var(--bg-1); color: var(--fg); }
.layer-card.primary { background: var(--bg-2); border-color: var(--line-2); }
.login-art { border-right: 1px solid var(--line); }
.login-art::after { -webkit-text-stroke-color: var(--line-2); }
.avatar { background: var(--bg-3); color: var(--fg); }
/* Seçili süzgeç: kabuktaki basılı düğmeyle aynı (zemin tutar, ters dönmez). */
.library-filter { border-color: var(--line-2); border-radius: 999px; color: var(--fg-dim); background: transparent; }
.library-filter:hover, .library-filter.active { background: var(--bg-3); color: var(--fg); border-color: var(--fg-mute); }
.library-more { border-radius: var(--radius-sm); }
.library-more:hover { background: var(--bg-2); color: var(--fg); }
/* 1 piksellik ızgara çizgileri zeminle çiziliyordu (background + gap: 1px): çizgi rengi olur. */
.showcase-grid, .security-grid, .workflow-grid { background: var(--line); border-color: var(--line); }
.flow-step:not(:last-child)::after { background: var(--bg); color: var(--fg-mute); border-color: var(--line-2); }

/* ---- 5b. Mürekkeple çizilen çizgiler. Açık sitede 1 piksellik SİYAH çizgi dilin parçasıydı; köprüden
   sonra aynı çizgi koyu sayfada parlak beyaz olur ve her şeyin önüne geçer. Kabukta ayraç --line,
   kart kenarı --line-2'dir. Liste, gömülü STYLE'da kenarlığını var(--black) ile çizen pazarlama
   kurallarından çıkarıldı (uygulama ekranları hariç). */
.marketing-nav, .marketing-hero, .proof-strip, .marketing-section, .library-hero, .library-tools, .library-empty, .docs-toc-head, .docs-head,
.library-stats div, .layer-bridge, .section-heading, .empty, .card, .badge { border-bottom-color: var(--line); }
.system-line, .feature-grid, .concept-map, .process-step:first-child, .library-principles, .layer-bridge { border-top-color: var(--line); }
.layer-grid, .production-flow, .library-stats, .library-more, .plan-card, .docs-badge, .docs-search input { border-color: var(--line-2); }
.layer-bridge, .system-summary { border-left-color: var(--line); }
.layer-bridge, .library-stats div { border-right-color: var(--line); }
.marketing-links a.nav-switch:hover, .docs-role:hover, .docs-role.active { border-color: var(--fg-mute); }
.docs-role.active { background: var(--bg-3); color: var(--fg); }
/* Vurgu kartındaki etiketler: yüzey --bg-2 olunca eski gri üstünde okunmuyordu. */
.layer-card.primary .layer-list li, .layer-card .layer-list li { color: var(--fg-dim); border-color: var(--line-2); }
.layer-card.primary > p, .layer-card.primary .layer-kicker { color: var(--fg-mute); }

/* ---- 6. Medya temalanmaz: kullanıcının karesinin altı ve üstü kabukta da sabittir. */
.showcase-media, .showcase-media video, .workflow-media, .workflow-media.generated { background: var(--media-bg); }
.workflow-media.generated { color: var(--on-media); }
.showcase-media::after, .workflow-number, .workflow-route, .demo-frame-label { background: var(--on-media-bg); color: var(--on-media); border-color: transparent; }

/* ---- 7. Ürün maketi uygulamanın kendisi gibi görünür (tokenları liquid'de köprülenir). */
.demo-track span { background: var(--bg-2); border-color: var(--line-2); }
.demo-track span.active { background: var(--bg-3); border-color: var(--fg-dim); }
.demo-command, .demo-panel { background: var(--bg-1); }
/* Maketin birincil düğmesi uygulamadaki birincil düğmedir: vurgu zemini, --on-accent yazı. */
.demo-generate { background: var(--accent); color: var(--on-accent); border-color: transparent; border-radius: var(--radius-sm); font-weight: 600; }

/* ---- 8. Yapışkan araç çubuğu ve üst gezinme: kabuğun camı. */
.library-tools { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-color: var(--line); }

/* ---- 9. Girdi alanları: alt çizgili kâğıt formu yerine kabuğun kutusu. */
:is(.login-form, .waitlist-form, .docs-search, .library-tools) input:not([type=checkbox], [type=radio]),
:is(.login-form, .waitlist-form, .library-tools) select {
  height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--input); color: var(--fg); font-size: var(--t-md); }
:is(.login-form, .waitlist-form, .docs-search, .library-tools) input:focus { border-color: var(--accent); border-bottom-width: 1px; }
:is(.login-form, .waitlist-form, .docs-search, .library-tools) input::placeholder { color: var(--fg-mute); }
.login-form label, .waitlist-form label { color: var(--fg-dim); }
.error { border-color: color-mix(in srgb, var(--danger) 45%, var(--line-2)); background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-sm); }
.notice, .waitlist-notice { border-radius: var(--radius-sm); }

/* ---- 10. Rehber: tür rozetleri durum diliyle. */
.docs-kind-open { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line-2)); background: var(--ok-soft); }
.docs-kind-api { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line-2)); background: var(--warn-soft); }
.docs-role { background: transparent; border-color: var(--line-2); color: var(--fg-dim); }
.docs-search input { background: var(--input); }


@media (max-width: 760px) {
  .hero-actions .btn, .waitlist-form .btn { width: 100%; }
}