/* ============================================================ Prefux — prefux.com kurumsal site tasarım sistemi Sıfır bağımlılık: tek CSS dosyası, gömülü yazı tipi yok (yığın sistem fontlarına düşer), ÇİFT TEMA (açık = kâğıt / koyu = mürekkep). Marka rengi iki temada da AYNI: kehribar #F59E0B + is siyahı #1C1917 — ikisi de logo SVG'sinde ve Android launcher zemininde sabit, değiştirilemez. Değişen şey amber'in NASIL kullanıldığı: kâğıtta metin/bağlantı için koyu ton (#9A4A08 — #F59E0B beyazda 1.9:1, okunamaz), dolgu için tam amber. ── Katman 1: değişmezler ── tema ile değişmeyen her şey. ── Katman 2: anlamsal ── her tema kendi değerlerini verir. Bileşenler ASLA ham renk kullanmaz, yalnız bu adları kullanır. `check-shell.py` bunu "token bloklarının dışında renk literali yok" iddiasıyla zorlar. ── Katman 3: geçici alias ── eski isimler (--bg, --card, --muted, --faint…) yeni anlamsal isimlere işaret eder. 870 satırlık mevcut CSS onlarla yazılmış; Merge C bölümleri yeniden kurarken alias katmanı SİLİNECEK. TEMA SEÇİMİ: varsayılan açık. `prefers-color-scheme: dark` koyuya çevirir, AMA yalnız kullanıcı elle seçim yapmadıysa (`:root:not(.light):not(.dark)`). Elle seçim ``'e `.light`/`.dark` sınıfı basar ve İKİ YÖNDE de kazanır. `light-dark()` KULLANILMIYOR: Chrome 123/Safari 17.5 gerekiyor ve TR KOBİ kitlesindeki eski Android WebView'da özellik geçersiz olup RENKSİZ sayfa çıkar. ============================================================ */ /* ---------- Katman 1: değişmezler ---------- */ :root { --amber: #f59e0b; /* logo amber — iki temada aynı */ --amber-lit: #fbbf24; --amber-deep: #b45309; --ink: #1c1917; /* logo plakası + Android launcher zemini */ --radius: 14px; --dur: 120ms; --ease: cubic-bezier(0.2, 0.6, 0.3, 1); --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* Serif: gömülü dosya YOK. `ui-serif` macOS/iOS'ta New York'a, Windows'ta tanınmayıp Georgia'ya (2000'den beri her sürümde, WGL4 ile Türkçe), Android/Linux'ta Noto Serif'e düşer — her platformda tam Türkçe kapsamlı GERÇEK bir serif. "Source Serif 4" başta duruyor: kullanıcı woff2 onayı verirse @font-face eklenir ve yığının geri kalanı fallback olur. */ --font-serif: "Source Serif 4", ui-serif, "New York", Georgia, "Noto Serif", "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Dolgu gradyanı: iki temada aynı, üstündeki metin DAİMA mürekkep. ⚠️ KOYU UÇ ÖLÇÜLEREK seçildi: eski #b45309 üstünde mürekkep 3.48:1 = AA ALTI (butonun sol üst köşesi okunmuyordu). Mürekkebin geçtiği en koyu amber #c96b0c (4.66:1); marj için #d97706 kullanılıyor → 5.49:1. */ --grad-fill: linear-gradient(135deg, #d97706 0%, #f59e0b 55%, #fbbf24 100%); } /* ---------- Katman 2: anlamsal — AÇIK (kâğıt), varsayılan ---------- */ :root { color-scheme: light; /* Kâğıtta yükseltilmiş yüzey KOYULAŞIR. Açık temayı koyunun tersi olarak türetmek soluk sonuç verir; kâğıtta bir yüzey gölgeyle yükselir. */ --surface: #faf7f1; --surface-2: #f1ebe0; --surface-3: #e8e0d2; --text: #1c1917; --text-2: #4a423b; --text-3: #6b6157; --rule: rgba(28, 25, 23, 0.16); --rule-soft: rgba(28, 25, 23, 0.08); --rule-strong: rgba(28, 25, 23, 0.28); --rule-accent: rgba(154, 74, 8, 0.45); --overlay-1: rgba(28, 25, 23, 0.035); --overlay-2: rgba(28, 25, 23, 0.07); --accent-text: #9a4a08; --accent-rule: #b4610f; --accent-tint: rgba(180, 83, 9, 0.09); --accent-tint-2: rgba(180, 83, 9, 0.22); --accent-tint-3: rgba(180, 83, 9, 0.38); --accent-tint-soft: rgba(180, 83, 9, 0.07); --glow-1: rgba(245, 158, 11, 0.16); --glow-2: rgba(180, 83, 9, 0.1); --select-bg: rgba(245, 158, 11, 0.3); /* Metin gradyanı açık temada KOYU uçlarla kurulur — #fbbf24 kâğıtta 1.7:1. Ölçüldü: en AÇIK uç #a9540a (kâğıtta 4.96:1) — eski #c2700f 3.5:1 idi, yani yalnız "büyük metin" eşiğini geçiyordu ve marjı yoktu. Üç durak da ≥4.5. */ --grad-text: linear-gradient(135deg, #7c3a06 0%, #96490a 55%, #a9540a 100%); --btn-fg: var(--ink); --btn-shadow: 0 6px 18px rgba(28, 25, 23, 0.14); --btn-shadow-hover: 0 10px 26px rgba(28, 25, 23, 0.2); --mark-glow: 0 4px 14px rgba(28, 25, 23, 0.16); --focus: #9a4a08; --header-bg: rgba(250, 247, 241, 0.86); --shadow: 0 18px 44px rgba(28, 25, 23, 0.1); /* İkincil vurgu (canlı noktası, tik). Eski palette --accent teal #2dd4bf ilan edilmişti ama alfa türevleri emerald rgba(52,211,153) kullanıyordu — üç yerde sessiz tutarsızlık. Artık tek kaynak. */ --dot: #0e7c6b; --dot-glow: rgba(14, 124, 107, 0.35); --tick-fg: #0b6b5c; --tick-bg: rgba(11, 107, 92, 0.1); --tick-rule: rgba(11, 107, 92, 0.3); /* Dekoratif tarayıcı çipi (Merge C'de tümüyle silinecek). */ --tl-1: rgba(214, 60, 50, 0.85); --tl-2: rgba(196, 140, 20, 0.85); --tl-3: rgba(30, 140, 60, 0.85); --tl-idle: rgba(28, 25, 23, 0.18); } /* ---------- Katman 2: anlamsal — KOYU (mürekkep) ---------- */ /* .dark ile @media bloğu KASTEN birebir kopya. Alias/indirection ile tekilleştirmek mümkün ama custom property ikamesi bildirildiği elemanda çözüldüğü için okunurluğu bozar ve alt-ağaç yeniden temalandırmayı zorlaştırır. İkisi ELLE senkron tutulur. */ :root.dark { color-scheme: dark; --surface: #12100e; /* eski #0d0c0b'den bir tık ılık: %15 saç teli çizgiler görünsün */ --surface-2: #1a1714; --surface-3: #221e1b; --text: #f5f1ea; --text-2: #b8afa4; --text-3: #93897e; /* eski #7d7469 mürekkep üstünde 4.26:1 = AA ALTI */ --rule: rgba(247, 243, 236, 0.15); --rule-soft: rgba(247, 243, 236, 0.075); --rule-strong: rgba(247, 243, 236, 0.22); --rule-accent: rgba(245, 158, 11, 0.4); --overlay-1: rgba(255, 255, 255, 0.03); --overlay-2: rgba(255, 255, 255, 0.06); --accent-text: #fcd34d; --accent-rule: #f59e0b; --accent-tint: rgba(245, 158, 11, 0.1); --accent-tint-2: rgba(245, 158, 11, 0.28); --accent-tint-3: rgba(245, 158, 11, 0.45); --accent-tint-soft: rgba(245, 158, 11, 0.08); --glow-1: rgba(245, 158, 11, 0.25); --glow-2: rgba(180, 83, 9, 0.18); --select-bg: rgba(251, 191, 36, 0.35); --grad-text: linear-gradient(135deg, #d97706 0%, #f59e0b 55%, #fbbf24 100%); --btn-fg: var(--ink); --btn-shadow: 0 8px 28px rgba(245, 158, 11, 0.35); --btn-shadow-hover: 0 12px 36px rgba(245, 158, 11, 0.5); --mark-glow: 0 4px 16px rgba(245, 158, 11, 0.28); --focus: #f59e0b; --header-bg: rgba(18, 16, 14, 0.8); --shadow: 0 20px 60px rgba(0, 0, 0, 0.45); --dot: #2dd4bf; --dot-glow: rgba(45, 212, 191, 0.55); --tick-fg: #2dd4bf; --tick-bg: rgba(45, 212, 191, 0.1); --tick-rule: rgba(45, 212, 191, 0.3); --tl-1: rgba(255, 95, 87, 0.75); --tl-2: rgba(254, 188, 46, 0.75); --tl-3: rgba(40, 200, 64, 0.75); --tl-idle: rgba(255, 255, 255, 0.14); } @media (prefers-color-scheme: dark) { /* :not(.light):not(.dark) → elle seçim yapılmışsa sistem tercihi DEVREYE GİRMEZ. Yukarıdaki .dark bloğunun birebir kopyası; ikisini birlikte güncelle. */ :root:not(.light):not(.dark) { color-scheme: dark; --surface: #12100e; --surface-2: #1a1714; --surface-3: #221e1b; --text: #f5f1ea; --text-2: #b8afa4; --text-3: #93897e; --rule: rgba(247, 243, 236, 0.15); --rule-soft: rgba(247, 243, 236, 0.075); --rule-strong: rgba(247, 243, 236, 0.22); --rule-accent: rgba(245, 158, 11, 0.4); --overlay-1: rgba(255, 255, 255, 0.03); --overlay-2: rgba(255, 255, 255, 0.06); --accent-text: #fcd34d; --accent-rule: #f59e0b; --accent-tint: rgba(245, 158, 11, 0.1); --accent-tint-2: rgba(245, 158, 11, 0.28); --accent-tint-3: rgba(245, 158, 11, 0.45); --accent-tint-soft: rgba(245, 158, 11, 0.08); --glow-1: rgba(245, 158, 11, 0.25); --glow-2: rgba(180, 83, 9, 0.18); --select-bg: rgba(251, 191, 36, 0.35); --grad-text: linear-gradient(135deg, #d97706 0%, #f59e0b 55%, #fbbf24 100%); --btn-fg: var(--ink); --btn-shadow: 0 8px 28px rgba(245, 158, 11, 0.35); --btn-shadow-hover: 0 12px 36px rgba(245, 158, 11, 0.5); --mark-glow: 0 4px 16px rgba(245, 158, 11, 0.28); --focus: #f59e0b; --header-bg: rgba(18, 16, 14, 0.8); --shadow: 0 20px 60px rgba(0, 0, 0, 0.45); --dot: #2dd4bf; --dot-glow: rgba(45, 212, 191, 0.55); --tick-fg: #2dd4bf; --tick-bg: rgba(45, 212, 191, 0.1); --tick-rule: rgba(45, 212, 191, 0.3); --tl-1: rgba(255, 95, 87, 0.75); --tl-2: rgba(254, 188, 46, 0.75); --tl-3: rgba(40, 200, 64, 0.75); --tl-idle: rgba(255, 255, 255, 0.14); } } /* ---------- Katman 3: geçici alias (Merge C'de SİLİNECEK) ---------- */ /* Mevcut 870 satır bu adlarla yazılmış. Alias'lar :root'ta duruyor ve anlamsal tokenlar da :root'ta ezildiği için ikame doğru temayı alır. DİKKAT: bir ALT AĞACI yeniden temalandırmak için anlamsal tokenları o alt ağaçta yeniden bildirmek gerekir — alias'ı ezmek yetmez. */ :root { --bg: var(--surface); --bg-soft: var(--surface-2); --card: var(--surface-2); --card-2: var(--surface-3); --border: var(--rule); --border-soft: var(--rule-soft); --muted: var(--text-2); --faint: var(--text-3); --brand: var(--accent-rule); --brand-ink: var(--accent-text); --font: var(--font-sans); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--surface); color: var(--text); font-size: 1.0625rem; line-height: 1.62; overflow-x: hidden; } /* -webkit-font-smoothing:antialiased YALNIZ koyu temada: macOS'ta kâğıt üstündeki mürekkebi inceltip soluklaştırıyor. */ :root.dark body { -webkit-font-smoothing: antialiased; } @media (prefers-color-scheme: dark) { :root:not(.light):not(.dark) body { -webkit-font-smoothing: antialiased; } } img, svg { max-width: 100%; display: block; } a { color: var(--brand-ink); text-decoration: none; } a:hover { color: var(--text); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--select-bg); } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* ---------- Tipografi ---------- */ /* Başlıklar SERİF, gövde sans. Sitenin kişiliği neredeyse tamamen buradan geliyordu ve tek sistem-sans yığını onu sıfırlamıştı. Serif harf biçimleri ağırlığı kendi taşıdığı için 650/600 yeterli — eski 800/750/650 değil. */ h1, h2, h3 { font-family: var(--font-serif); text-wrap: balance; } h1 { font-size: clamp(2.35rem, 5.2vw, 3.75rem); line-height: 1.06; letter-spacing: -0.018em; font-weight: 650; } h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.15; letter-spacing: -0.014em; font-weight: 650; } h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.008em; } /* Serif koyu zeminde optik olarak zayıflar (ışık yayılması). Görmezden gelme, düzelt — ama yalnız başlıklarda, gövde sans zaten yeterli. */ :root.dark h1, :root.dark h2, :root.dark h3 { font-weight: 680; } @media (prefers-color-scheme: dark) { :root:not(.light):not(.dark) h1, :root:not(.light):not(.dark) h2, :root:not(.light):not(.dark) h3 { font-weight: 680; } } .lead { color: var(--muted); font-size: clamp(1.02rem, 1.9vw, 1.18rem); max-width: 42em; } .g { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } /* background-clip:text desteklenmezse metin GÖRÜNMEZ olur (unstyled değil). */ @supports not ((background-clip: text) or (-webkit-background-clip: text)) { .g { background: none; color: var(--accent-text); } } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-tint); border: 1px solid var(--accent-tint-2); border-radius: 999px; padding: 6px 14px; margin-bottom: 18px; } .center { text-align: center; } .center .lead { margin-left: auto; margin-right: auto; } /* ---------- Butonlar ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 650; font-size: 0.98rem; border-radius: 10px; padding: 12px 24px; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease; white-space: nowrap; } /* 🔴 Kontrast düzeltmesi: `color:#fff` amber gradyanın üstünde 2.15:1'di — her sayfadaki birincil butonda canlı bir WCAG AA ihlali. Mürekkep/amber 8.1:1 veriyor ve zaten logonun renk çiftidir. İki temada da ink. */ .btn-primary { background: var(--grad-fill); color: var(--btn-fg); box-shadow: var(--btn-shadow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--btn-shadow-hover); color: var(--btn-fg); } .btn-ghost { background: var(--overlay-1); border-color: var(--border); color: var(--text); } .btn-ghost:hover { background: var(--overlay-2); border-color: var(--rule-strong); color: var(--text); } .btn-lg { padding: 15px 30px; font-size: 1.05rem; border-radius: 12px; } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-soft); } .nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; } .logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.12rem; letter-spacing: -0.02em; color: var(--text); } .logo:hover { color: var(--text); } /* Marka: tek kaynak `assets/logo-mark.svg`. HTML'de P duruyor ama harf GİZLENİR (font-size:0) — 10 sayfayı tek tek düzenlemek yerine marka buradan değişsin diye. Logoyu değiştirmek = tek SVG dosyası. */ .logo .mark { width: 34px; height: 34px; border-radius: 9px; background: url("logo-mark.svg") center / contain no-repeat; font-size: 0; flex: none; box-shadow: var(--mark-glow); } .logo .suite { color: var(--faint); font-weight: 500; } .nav-links { display: flex; align-items: center; gap: 26px; } .nav-links a { color: var(--muted); font-size: 0.94rem; font-weight: 550; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); } .nav-cta { display: flex; align-items: center; gap: 12px; } .nav-cta .btn { padding: 9px 18px; font-size: 0.9rem; } .lang-switch { font-size: 0.82rem; font-weight: 650; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; letter-spacing: 0.04em; } .lang-switch:hover { color: var(--text); border-color: var(--rule-strong); } /* Tema düğmesi: iki ikon üst üste, aktif olan görünür. Metin DEĞİL ikon — "Açık/Koyu" kelimesi iki dilde çeviri gerektirirdi, ikon gerektirmiyor. */ .theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); cursor: pointer; padding: 0; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .theme-toggle:hover { color: var(--text); border-color: var(--rule-strong); } .theme-toggle svg { width: 17px; height: 17px; } /* Açık temada ay (koyuya geç), koyu temada güneş (açığa geç) gösterilir. */ .theme-toggle .i-sun { display: none; } :root.dark .theme-toggle .i-sun { display: block; } :root.dark .theme-toggle .i-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not(.light):not(.dark) .theme-toggle .i-sun { display: block; } :root:not(.light):not(.dark) .theme-toggle .i-moon { display: none; } } .nav-toggle { display: none; background: none; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); cursor: pointer; font-size: 1.05rem; line-height: 1; } .mobile-menu { display: none; flex-direction: column; gap: 4px; padding: 10px 0 18px; } .mobile-menu.open { display: flex; } .mobile-menu a { color: var(--muted); font-weight: 550; padding: 10px 4px; border-bottom: 1px solid var(--border-soft); } .mobile-menu a:last-child { border-bottom: none; } .mobile-menu a:hover { color: var(--text); } /* ---------- Hero ---------- */ .hero { position: relative; padding: clamp(72px, 11vw, 128px) 0 clamp(48px, 7vw, 84px); overflow: hidden; } /* Glow'lar filter:blur yerine radial-gradient — blur(90px) katmanı bazı compositor'larda scroll sonrası siyah tile bırakıyor (pahalı rasterizasyon). */ .hero::before, .hero::after { content: ""; position: absolute; pointer-events: none; } .hero::before { width: 900px; height: 900px; background: radial-gradient(circle, var(--glow-1) 0%, transparent 62%); top: -390px; left: -310px; } .hero::after { width: 780px; height: 780px; background: radial-gradient(circle, var(--glow-2) 0%, transparent 62%); top: -230px; right: -310px; } .hero .wrap { position: relative; z-index: 1; } .hero-inner { max-width: 760px; } .hero .lead { margin: 22px 0 34px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-note { margin-top: 18px; font-size: 0.88rem; color: var(--faint); display: flex; align-items: center; gap: 8px; } .hero-note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 10px var(--dot-glow); } /* ---------- Ürün mockup (stilize, dekoratif) ---------- */ .mockup { margin-top: clamp(40px, 6vw, 64px); border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, var(--card-2) 0%, var(--card) 100%); box-shadow: var(--shadow); overflow: hidden; } .mockup-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); background: var(--overlay-1); } .mockup-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--tl-idle); } .mockup-bar i:nth-child(1) { background: var(--tl-1); } .mockup-bar i:nth-child(2) { background: var(--tl-2); } .mockup-bar i:nth-child(3) { background: var(--tl-3); } .mockup-bar .addr { margin-left: 10px; flex: 1; max-width: 320px; height: 22px; border-radius: 6px; background: var(--overlay-2); border: 1px solid var(--border-soft); color: var(--faint); font-size: 0.7rem; display: flex; align-items: center; padding: 0 10px; } /* `.mockup-body` yalnız hero şemasının kabuğu olarak yaşıyor (aşağıdaki `.mockup-body.flow-body`). Panel taklidi yapan .mockup-side/-main/-stats/-chart kuralları HTML'de SIFIR kez kullanılıyordu — silindi (ölü CSS, ~100 satır). */ .mockup-body { display: grid; min-height: 320px; } /* ---------- Bölümler ---------- */ section { padding: clamp(56px, 8vw, 96px) 0; } .section-soft { background: var(--bg-soft); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .section-head { max-width: 640px; margin-bottom: clamp(32px, 5vw, 52px); } .section-head.center { margin-left: auto; margin-right: auto; } .section-head .lead { margin-top: 14px; } /* ---------- Kart grid'leri ---------- */ .grid { display: grid; gap: 18px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .card:hover { transform: translateY(-3px); border-color: var(--rule-accent); background: var(--card-2); } .card .icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-tint); border: 1px solid var(--accent-tint-2); margin-bottom: 16px; font-size: 1.15rem; } .card h3 { margin-bottom: 8px; } .card p { color: var(--muted); font-size: 0.92rem; } .card .key { display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--faint); background: var(--overlay-1); border: 1px solid var(--border-soft); border-radius: 6px; padding: 2px 8px; } /* ---------- Özellik listesi (check) ---------- */ .checks { list-style: none; display: grid; gap: 12px; } .checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: 0.96rem; } .checks li::before { content: "✓"; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 0.78rem; font-weight: 800; color: var(--tick-fg); background: var(--tick-bg); border: 1px solid var(--tick-rule); margin-top: 2px; } .checks b { color: var(--text); font-weight: 650; } /* ---------- İkili (metin + panel) yerleşim ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .split .lead { margin: 14px 0 26px; } .panel { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); } /* ---------- Adımlar ---------- */ .steps { counter-reset: step; } .step { position: relative; padding-left: 0; } .step .num { width: 44px; height: 44px; border-radius: 12px; background: var(--grad-fill); color: var(--btn-fg); font-weight: 800; font-size: 1.1rem; display: grid; place-items: center; margin-bottom: 16px; box-shadow: var(--btn-shadow); } /* ---------- Fiyatlandırma ---------- */ .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .plan { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 16px; } .plan.hot { border-color: var(--accent-tint-3); background: linear-gradient(180deg, var(--accent-tint-soft) 0%, var(--card) 45%); position: relative; } .plan .name { font-size: 1.1rem; font-weight: 700; } .plan .desc { color: var(--muted); font-size: 0.88rem; min-height: 2.6em; } .plan .price { display: flex; align-items: baseline; gap: 6px; } .plan .price b { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; } .plan .price span { color: var(--faint); font-size: 0.85rem; } .plan .mods { display: flex; flex-wrap: wrap; gap: 6px; } .mod-chip { font-size: 0.72rem; font-weight: 600; color: var(--accent-text); background: var(--accent-tint); border: 1px solid var(--accent-tint-2); border-radius: 999px; padding: 3px 10px; } .plan .btn { margin-top: auto; } /* Modül fiyat tablosu */ .price-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .price-table th, .price-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); font-size: 0.94rem; } .price-table th { color: var(--faint); font-size: 0.76rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.07em; background: var(--overlay-1); } .price-table tr:last-child td { border-bottom: none; } .price-table td.num { text-align: right; font-weight: 650; white-space: nowrap; } .price-table td .mkey { font-family: var(--font-mono); font-size: 0.72rem; color: var(--faint); display: block; } .table-scroll { overflow-x: auto; border-radius: var(--radius); } .pricing-status { border: 1px dashed var(--border); border-radius: var(--radius); padding: 36px 24px; text-align: center; color: var(--muted); } .pricing-status .btn { margin-top: 18px; } /* ---------- SSS ---------- */ .faq { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; } .faq details { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; } .faq summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--brand-ink); font-size: 1.3rem; font-weight: 400; transition: transform 0.2s ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { color: var(--muted); font-size: 0.94rem; padding-top: 12px; } /* ---------- CTA band ---------- */ .cta-band { padding: clamp(56px, 8vw, 90px) 0; } .cta-box { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--accent-tint-3); background: radial-gradient(600px 300px at 20% 0%, var(--glow-1), transparent 70%), radial-gradient(500px 260px at 85% 100%, var(--glow-2), transparent 70%), var(--card); padding: clamp(40px, 6vw, 64px); text-align: center; } .cta-box .lead { margin: 14px auto 30px; } .cta-box .hero-actions { justify-content: center; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border-soft); background: var(--bg-soft); padding: 52px 0 32px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; } .footer-brand p { color: var(--faint); font-size: 0.88rem; margin-top: 12px; max-width: 30em; } .footer-col h4 { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin-bottom: 14px; } .footer-col ul { list-style: none; display: grid; gap: 10px; } .footer-col a { color: var(--muted); font-size: 0.9rem; } .footer-col a:hover { color: var(--text); } .footer-base { border-top: 1px solid var(--border-soft); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--faint); font-size: 0.82rem; } /* ---------- Reveal animasyonları ---------- */ /* 🔴 Sağlamlık hatası düzeltildi: `.reveal{opacity:0}` KOŞULSUZ CSS'teydi — site.js yüklenmezse ya da IntersectionObserver hata verirse 216 öğe görünmez kalıyor ve site BOŞ SAYFA oluyordu. Artık varsayılan durum GÖRÜNÜR; gizleme yalnız JS `.js` sınıfını bastıysa uygulanır (bootstrap script'i basıyor). */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; } .card:hover, .btn-primary:hover { transform: none; } } /* ---------- 404 ---------- */ .err-page { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 80px 0; } .err-code { font-size: clamp(5rem, 16vw, 9rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .plan-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } .split { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .nav-links { display: none; } .nav-toggle { display: block; } /* Tema düğmesi mobilde KALIR — sistem tercihini ezme imkânı navigasyonla birlikte gizlenmemeli. Gizlenen yalnız ikincil "Giriş Yap" butonu. */ .nav-cta .btn-ghost { display: none; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .hero-actions .btn { flex: 1 1 auto; } } /* ---------- Hero şeması: dağınık kayıt → tek kayıt ---------- `.mockup` kabuğunu ürün panelinden şemaya çevirir. Seçici BİLEŞİK (`.mockup-body.flow-body`) — eskiden tek sınıftı ve yalnız dosyada SONRA geldiği için kazanıyordu, yani bölümleri yeniden sıralamak hero'yu sessizce bozuyordu. Artık özgüllük (0,2,0) kazanıyor, sıra önemsiz. */ .mockup-body.flow-body { grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(14px, 3vw, 32px); padding: clamp(22px, 4vw, 36px); min-height: 260px; } .flow-scattered { display: grid; gap: 10px; } .flow-box { border: 1px dashed var(--border); border-radius: 10px; background: var(--overlay-1); color: var(--faint); font-size: 0.88rem; padding: 11px 14px; } .flow-arrow { color: var(--brand); font-size: 1.7rem; line-height: 1; text-align: center; } .flow-single { border: 1px solid var(--accent-tint-3); border-radius: 12px; background: linear-gradient(180deg, var(--accent-tint-2), var(--accent-tint-soft)); box-shadow: var(--shadow); color: var(--text); font-weight: 700; font-size: 1.06rem; text-align: center; padding: 28px 18px; } @media (max-width: 720px) { .mockup-body.flow-body { grid-template-columns: 1fr; } .flow-arrow { transform: rotate(90deg); } } /* ---------- Sayfa-içi çapa düzeltmesi ---------- */ /* .site-header sticky (68px) olduğu için #id'ye atlayınca bölümün başlığı header'ın ALTINDA kalıyordu — mobilde eyebrow tamamen görünmez oluyor. Masaüstünde bölüm padding'i (clamp) kazayı gizliyor, dar ekranda gizlemiyor. Kural TÜM id'li bölümlere verilir ki ileride eklenen çapalar da kendiliğinden doğru dursun. */ section[id] { scroll-margin-top: 84px; } /* ---------- Satır içi stillerden taşınan yardımcı sınıflar (GEÇİCİ KATMAN) ---------- */ /* 140 `style=` özniteliği buraya taşındı. DEĞERLER AYNEN korundu; bu katmanın amacı görünümü değiştirmek DEĞİL, boşluk kararlarını markup'tan çıkarmak — satır içi stil her sınıfı yener ve sessizce kazanır, dolayısıyla onlar markup'ta dururken yeni bölüm ritmini akıl yürütmek imkânsız. Bu bir SKALA DEĞİL; keyfi değerlerin dürüst kaydı (mt-14 ve mt-16 yan yana duruyor, çünkü markup öyle diyordu). Merge B/C bölümleri yeniden kurarken bu katman 9 adımlı gerçek boşluk skalasına eriyecek — o zamana kadar `check-shell.py` "sıfır style= özniteliği" iddiasıyla geri sızmasını engelliyor. Dosyanın SONUNDA duruyor: eşit özgüllükte çakışmada kazanması gerekiyor. (`.flow-*` bloğunun kaynak-sırası bağımlılığı bundan etkilenmez — bu katman `grid-template-columns` gibi hiçbir yerleşim property'sine dokunmuyor.) */ .mt-0 { margin-top: 0; } .mt-12 { margin-top: 12px; } .mt-14 { margin-top: 14px; } .mt-16 { margin-top: 16px; } .mt-22 { margin-top: 22px; } .mt-24 { margin-top: 24px; } .mt-26 { margin-top: 26px; } .mt-28 { margin-top: 28px; } .mt-32 { margin-top: 32px; } .mt-36 { margin-top: 36px; } .mt-56 { margin-top: 56px; } .mb-10 { margin-bottom: 10px; } .mb-14 { margin-bottom: 14px; } .mb-18 { margin-bottom: 18px; } .mb-26 { margin-bottom: 26px; } .mb-28 { margin-bottom: 28px; } .pt-24 { padding-top: 24px; } .pb-8 { padding-bottom: 8px; } .pb-16 { padding-bottom: 16px; } .pb-24 { padding-bottom: 24px; } .order-1 { order: 1; } .order-2 { order: 2; } .justify-center { justify-content: center; } .measure-46em { max-width: 46em; } .measure-820 { max-width: 820px; } .measure-760-center { max-width: 760px; margin-left: auto; margin-right: auto; } /* Küçük punto yardımcı metin — üç varyant, üçü de markup'ta gerçekten kullanılıyordu. ÖZGÜLLÜK NOTU: sınıf adı KASTEN iki kez yazılı (0,2,0). Satır içi stil her sınıfı yeniyordu; tek sınıfa çevirince `.card p` / `.faq details p` / `.footer-brand p` gibi (0,1,1) kuralları devraldı ve rengi/puntoyu sessizce değiştirdi — ölçümle yakalandı (hesap-silme'de --faint 0.9rem yerine --muted 0.92rem oluyordu). `!important` DEĞİL: o satır içi stilden bile güçlü olurdu ve gereksiz. Bu katman Merge B/C'de eridiğinde bu numara da gider. */ .note.note { color: var(--muted); font-size: 0.94rem; } .note-sm.note-sm { color: var(--muted); font-size: 0.9rem; } .note-faint.note-faint { color: var(--faint); font-size: 0.9rem; } /* 404 sayfası */ .err-title { font-size: 1.6rem; margin: 18px 0 10px; } .err-lead { margin: 0 auto 8px; }