/* ═══════════════════════════════════════════════════════════════ Online Akademi — pazarlama yüzeyi ─────────────────────────────────────────────────────────────── Sistem yığını gövde/buton/nav için hâlâ geçerli (0 dış istek, LCP'yi geciktirmez). Başlıklar İÇİN (h1/h2/h3) TEK bir değişken font kendi sunucumuzdan self-host ediliyor (bkz. aşağıdaki @font-face) — dış istek yok, preload + font-display:swap ile LCP korunuyor. Sistem yığını macOS/iOS'ta SF Pro, Windows'ta Segoe UI verir — ikisi de Türkçe glyph'leri (ç ğ ı İ ö ş ü) tam destekler; başlık fontu da (Bricolage Grotesque) aynı karakter setini kapsıyor (latin + latin-ext altset). ═══════════════════════════════════════════════════════════════ */ @font-face{ font-family:"Bricolage Grotesque"; font-style:normal; font-weight:400 800; font-display:swap; src:url("/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:"Bricolage Grotesque"; font-style:normal; font-weight:400 800; font-display:swap; src:url("/fonts/bricolage-grotesque-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root{ /* ── Marka: enerjik limon-yeşili + neredeyse-siyah ───────────────────── 2026-08-15 kararı — önceki koyu zümrüt (#065F46) "durgun/kurumsal" hissettirdi. Brevo'nun deseninden (koyu zemin + canlı limon vurgu) ilham alındı, TONLAR farklı tutuldu (bizim limon daha sarıya kaçık, #D4FF7A — Brevo'nun kendi tonu değil). ⚠️ LIME (--mint) yalnız KOYU zeminde metin (buton) ya da AÇIK zeminde ARKA PLAN bloğu olarak kullanılır — kendisi açık bir renk olduğu için beyaz/açık zemin üstünde İNCE metin/kenarlık olarak ASLA kullanılmaz (kontrast yetersiz). */ --brand:#10140D; /* buton/ana zemin — neredeyse siyah, beyazdan çok daha güçlü */ --brand-700:#1F2A1A; /* hover, link metni — hâlâ koyu, hafif yeşil iması */ --brand-900:#000000; /* en koyu vurgu, bant zemini */ --tint:#F4FADC; /* çok açık limon zemin (eyebrow, ikon kutusu) */ --mint:#D4FF7A; /* enerjik limon — buton metni, vurgu şeridi, rozet */ --accent:#CC5B35; /* sıcak terrakota — yalnız "sorun" kartlarında */ /* ── Nötrler: SICAK ──────────────────────────────────────────────────── Bu kısım rengin kendisi kadar önemli. Önceki palette griler lavantaya kaçıyordu (ink #0C0A1D, kenarlık #E7E4F2) çünkü mor için ayarlanmıştı. Yeşili o soğuk grilerin üstüne koyunca renkler kavga ediyor ve sonuç "eczane yeşili" gibi ucuz duruyor. Sıcak griler + kırık beyaz zemin aynı yeşili editöryel gösteriyor. */ --ink:#12160F; --body:#41493F; --muted:#6E766B; --faint:#9AA197; --border:#E5E5DE; --border-2:#D3D3C9; --bg:#FBFBF8; /* sayfa — SAF BEYAZ DEĞİL, kırık beyaz */ --alt:#F3F3ED; /* dönüşümlü bölüm zemini */ --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px; --r-pill:999px; --sh-sm:0 1px 2px rgba(18,22,15,.05); --sh:0 4px 16px rgba(18,22,15,.07); --sh-lg:0 18px 48px rgba(4,55,41,.12); --wrap:1280px; --ff:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px} body{ margin:0; background:var(--bg); color:var(--body); font-family:var(--ff); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{max-width:100%; display:block} a{color:var(--brand-700); text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{color:var(--ink); margin:0; line-height:1.15; letter-spacing:-.022em; font-weight:700; font-family:"Bricolage Grotesque",var(--ff)} p{margin:0} ul,ol{margin:0; padding:0; list-style:none} code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:var(--tint); color:var(--brand-900); padding:.12em .4em; border-radius:6px} .wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px} .wrap-narrow{max-width:820px} .skip{position:absolute; left:-9999px} .skip:focus{left:16px; top:16px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--r)} :focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:4px} /* ── Butonlar ───────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:600; font-size:.95rem; line-height:1; padding:13px 22px; border-radius:var(--r); border:1px solid transparent; cursor:pointer; transition:transform .14s ease, box-shadow .14s ease, background .14s ease; white-space:nowrap; text-decoration:none; } .btn:hover{text-decoration:none} .btn-lg{padding:16px 30px; font-size:1.03rem} .btn-block{width:100%} .btn-primary{background:var(--brand); color:var(--mint); box-shadow:0 6px 18px rgba(16,20,13,.26)} .btn-primary:hover{background:var(--brand-700); transform:translateY(-1px); box-shadow:0 10px 26px rgba(16,20,13,.32)} .btn-outline{background:#fff; color:var(--ink); border-color:var(--border-2)} .btn-outline:hover{border-color:var(--brand); color:var(--brand-700)} .btn-ghost{background:transparent; color:var(--ink)} .btn-ghost:hover{background:var(--tint); color:var(--brand-700)} .btn-link{background:none; color:var(--brand-700); padding:13px 6px} .btn-link:hover{text-decoration:underline} /* ── Navigasyon ─────────────────────────────────────────────── */ .nav{ position:sticky; top:0; z-index:50; background:rgba(251,251,248,.88); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--border); } /* Grid, flex DEĞİL: logo ve nav-cta genişlikleri farklı olduğu için flex+ margin-left:auto menüyü gerçek ortaya değil, sağa yaklaştırırdı. 3 sütun (1fr auto 1fr) logo/cta genişliğinden bağımsız gerçek ortalama sağlar. */ .nav-in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:28px; height:68px} .nav-in .logo{justify-self:start} .nav-in .nav-cta{justify-self:end} .logo{display:flex; align-items:center; gap:10px; color:var(--brand)} .logo:hover{text-decoration:none} /* İŞARET SAYFADA KULLANILMIYOR — bilerek. Kelime birincil, işaret ikincil: amblem yalnız KARE gereken yerlerde yaşıyor (favicon, uygulama ikonu, sosyal avatar). Yatay kilit bu üründe zorunlu değil; beyaz etiketli bir altyapı markası kiracının kendi kimliğinin yanında geri çekilmeli. Kural siliniyor değil, bekletiliyor. */ .logo-mark{display:flex; color:var(--brand)} /* Kelime markası BAŞLIK YÜZÜYLE yazılıyor, sistem yığınıyla değil. Sistem yığını macOS'ta SF, Windows'ta Segoe verir — yani logo cihaza göre değişirdi. Bricolage zaten sayfada yüklü olduğu için ek istek yok ve marka CANLI METİN kalıyor: her boyutta keskin, koyu temada kendiliğinden doğru, sabit görsel bakımı yok. (Gotham bu yüzden seçilmedi — lisans sorunu değil, logoyu donmuş bir dosyaya çevirmesi sorun.) */ /* İKİ AĞIRLIK — ama 400/800, 600/800 DEĞİL. Önce 600/800 basılıyordu ve fark ALGI EŞİĞİNİN ALTINDAYDI: niyetli bir yapı gibi değil, baskı düzensizliği gibi okunuyordu. Bir ara tek ağırlığa çekildi; yanlıştı. Gerçek boyutlarda (21.6 px ve 17 px, açık ve KOYU zemin) basılıp karşılaştırıldığında: · 400/800 her dört durumda da okunur — "ince ağırlık koyu zeminde erir" endişesi bu boyutlarda tutmuyor. · Tek 800 blok gibi duruyor; bileşik yapıyı taşıması beklenen BÜYÜK A, ağır tipografinin içinde eriyor. · 400/800 adı İKİYE AYIRMIYOR, VURGULUYOR — FedEx ve PayPal'ın deseni (büyük harf + ikinci bir işaret; fazlalık değil pekiştirme). Asıl mesele: isim jenerik olduğu için ayırt ediciliği tipografi taşımak zorunda (bkz. docs/MARKA.md). Tek ağırlık o işi yapmıyor. yerine : ağırlık farkı salt görsel, logo "önemli metin" değil. BOYUT 1.18 → 1.35rem: header'da işaret yok, yani marka varlığının tamamı bu kelime. Nav bağlantıları .94rem; 1.18'de oran 1.26 idi ve logo menüyle aynı hizada duruyordu. 1.35'te oran 1.44 — logo net biçimde üstte. */ .logo-text{ font-family:"Bricolage Grotesque",var(--ff); color:var(--ink); font-weight:800; letter-spacing:-.035em; /* ⚠️ SABİT 1.35rem HEADER'I TAŞIRIYOR. Dar ekranda başlıkta üç öğe var (hamburger + logo + "Akademini kur"); 1.35rem'de 375 px'lik telefonda buton 14 px dışarı çıkıp SAYFAYI YATAY KAYDIRIYORDU. clamp: 375 px'te 1.06rem, 900 px ve üstünde 1.35rem — arada düzgün geçiş, kırılma noktası cliff'i yok. Masaüstündeki oran (nav .94rem'e karşı 1.44×) korunuyor. */ font-size:clamp(1.06rem, 0.857rem + 0.876vw, 1.35rem); } /* "Online" ince, "Akademi" kalın. 400 bilinçli: 300'de ilk yarı ikinciyle orantısız zayıflıyor, 600'de fark görünmüyor. */ .logo-text span{font-weight:400} .nav-links{display:flex; gap:26px; justify-self:center} /* Hamburger — saf CSS (checkbox), masaüstünde tamamen gizli. */ .nav-toggle{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none} .nav-burger{display:none} .nav-only-mobile{display:none} .nav-links a{color:var(--body); font-size:.94rem; font-weight:500} .nav-links a:hover{color:var(--brand-700); text-decoration:none} .nav-cta{display:flex; align-items:center; gap:8px} /* ── Hero ───────────────────────────────────────────────────── */ .hero{position:relative; overflow:hidden; padding:88px 0 72px; text-align:center; background:linear-gradient(180deg,var(--tint) 0%,var(--bg) 62%)} .hero-glow{ position:absolute; inset:-40% 0 auto 50%; transform:translateX(-50%); width:min(1100px,120vw); aspect-ratio:1/1; pointer-events:none; background:radial-gradient(circle at 50% 42%,rgba(212,255,122,.38) 0%,rgba(212,255,122,.12) 38%,transparent 66%); } .hero-in{position:relative} .eyebrow{ display:inline-block; font-size:.79rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-700); background:var(--tint); border-radius:var(--r-pill); padding:7px 15px; margin-bottom:22px; } .hero h1{font-size:clamp(2.2rem,5.6vw,4rem); letter-spacing:-.035em; margin-bottom:22px} .hero h1 .hl{ background:linear-gradient(180deg,transparent 62%,var(--mint) 62%); padding:0 .08em; } .lead{font-size:clamp(1.06rem,2vw,1.24rem); color:var(--muted); max-width:660px; margin:0 auto; line-height:1.6} /* Sahiplik söylemi ("%100 senin") — lead gri, bu ifade koyu ve altı limon. H1'deki dönen pill ile yarışmasın diye dolu zemin değil, alt şerit. */ .lead strong{ color:var(--ink); font-weight:700; background:linear-gradient(180deg,transparent 66%,var(--mint) 66%); padding:0 .12em; } /* ── Dönen kelime (Notion deseni) ───────────────────────────── ⚠️ SABİT GENİŞLİK KULLANILMIYOR — VE KULLANILMAMALI. Önceki iki deneme, her kelimenin genişliğini tarayıcıda ölçüp `em` olarak sabitliyordu. İkisi de kırıldı, çünkü sabit değer YALNIZ ölçümün yapıldığı koşulda doğru: 1) Bricolage Grotesque değişken bir font ve optik boyut (opsz) ekseni var — harfler punto büyüdükçe inceliyor, em genişliği %5 kayıyor. 2) `font-display:swap` yüzünden İLK BOYAMA sistem yazı tipiyle yapılıyor; onun metrikleri bambaşka, dolayısıyla font yüklenene kadar pill kelimeden dar kalıp yanındaki "için"in üstüne biniyor. (Ölçümler font yüklendikten SONRA çalıştığı için bunu göstermiyor — hata yalnız gerçek ilk yüklemede görünüyordu.) Ayrıca kelime metni değişse ya da başka dile çevrilse yine kırılırdı. ÇÖZÜM: genişliği tarayıcı hesaplasın. Kelimeler artık üst üste DEĞİL, normal akışta yan yana; aktif olmayanlar `max-width:0` + `padding:0` ile yer kaplamıyor. Kutunun genişliği doğal olarak = o an açık olan kelime. Hiçbir ölçü sabitlenmiyor, her fontta/punto/dilde doğru. max-width 0 → 6em'e YUMUŞAK gidiyor: eleman kendi doğal genişliğine ulaşınca büyümesi durur (min(doğal, max-width)), kalan yol görünmez. Böylece Notion'daki kayarak açılma korunuyor ama ölçü sabitlenmiyor. Taşan metni `clip-path` kesiyor, `overflow:hidden` DEĞİL: overflow inline-block'un taban çizgisini kutunun altına kaydırır ve pill, yanındaki "için" ile hizasız kalırdı. RENKLER: her kelime kendi pastel tonunda; aynı anda yalnız biri açık olduğu için palet dağılmıyor. İlk sıra marka limonu. Metin rengi kendi renk ailesinin koyu ucundan. */ .rot{display:inline} .rot > span{ display:inline-block; vertical-align:baseline; white-space:nowrap; max-width:0; padding:0; opacity:0; border-radius:var(--r-pill); clip-path:inset(0 round 999px); animation:rotslot 12.5s infinite; } .rot > span:nth-child(1){background:#D4FF7A; color:#1B3B00} .rot > span:nth-child(2){background:#FFD9A8; color:#5A3609; animation-delay:2.5s} .rot > span:nth-child(3){background:#B8E3FF; color:#0C3E5C; animation-delay:5s} .rot > span:nth-child(4){background:#DCCBFF; color:#34215C; animation-delay:7.5s} .rot > span:nth-child(5){background:#FFC9D9; color:#5C1B30; animation-delay:10s} @keyframes rotslot{ 0% {max-width:0; padding:.02em 0; opacity:0} 4% {max-width:6em; padding:.02em .38em; opacity:1} 17% {max-width:6em; padding:.02em .38em; opacity:1} 20% {max-width:0; padding:.02em 0; opacity:0} 100% {max-width:0; padding:.02em 0; opacity:0} } /* .signature KALDIRILDI (2026-08-16) — slogan hero'dan çıkıp meta description + footer künyesine taşındı, kullanan tek yer burasıydı. */ .hero-cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; margin:32px 0 0} /* Risk satırı: nokta ile ayrılmış tek gri cümle yerine tikli üç madde. CTA ile yarışmasın diye tik küçük ve soluk zeminde; metin --muted değil --body (bir tık okunur), çünkü bu satır sayfanın en güçlü ikna kaldıracı (bkz. docs/ANALIZ.md §6). Tik ikonu data-uri — dış istek yok. */ .risk{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; margin:18px 0 0; font-size:.9rem; color:var(--body); } /* Yol haritası notu — henüz yayında olmayan özellik sayfalarında. Uyarı rengi (terrakota) BİLEREK: limon "hazır/olumlu" anlamını taşıyor, burada yanlış sinyal olurdu. Ziyaretçi CTA'ya basmadan önce görmeli. */ .durum-not{ display:inline-block; max-width:640px; margin:18px auto 0; background:#FBEDE7; border:1px dashed #E0A88C; border-radius:var(--r); padding:11px 18px; color:#8A3B1C; font-size:.94rem; font-weight:500; } .risk li{display:inline-flex; align-items:center; gap:7px} .risk li::before{ content:""; flex:none; width:17px; height:17px; border-radius:50%; background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A1A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; } .trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-width:900px; margin:56px auto 0; border:1px solid var(--border); border-radius:var(--r-lg); background:#fff; padding:26px 12px; box-shadow:var(--sh-sm); } .trust li{display:flex; flex-direction:column; gap:5px; padding:0 12px; text-align:center} .trust strong{font-size:1.55rem; font-weight:800; color:var(--ink); letter-spacing:-.03em} .trust span{font-size:.82rem; color:var(--muted); line-height:1.4} /* ── Bölüm iskeleti ─────────────────────────────────────────── */ .sec{padding:84px 0} .sec-alt{background:var(--alt); border-block:1px solid var(--border)} .sec-head{text-align:center; max-width:720px; margin:0 auto 52px} .sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem); margin-bottom:16px} .sec-lead{color:var(--muted); font-size:1.06rem} .sec-close{text-align:center; margin-top:44px; color:var(--muted); font-size:.98rem} .sec-close strong{color:var(--ink)} /* .sec-close-box KALDIRILDI (2026-08-16): ayrı bir kutu olarak listeden kopuk duruyordu; içeriği listenin 04'üncü satırına taşındı (.costs-win). */ .grid{display:grid; gap:20px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} /* Alt sayfa hero'su — ana sayfanınkinden daha kısa. Buraya gelen ziyaretçi markayı zaten tanıyor, ikinci kez tam boy karşılama ekranı göstermek asıl içeriği fold'un altına iter. */ .hero-sub{padding:56px 0 48px} .hero-sub h1{font-size:clamp(1.9rem,4.2vw,3rem)} .wins .card{padding:26px 24px} .card{ background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:28px 26px; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .card h3{font-size:1.12rem; margin-bottom:10px} .card p{font-size:.97rem; color:var(--muted)} .card:hover{border-color:var(--border-2); box-shadow:var(--sh); transform:translateY(-2px)} /* ── Sorun listesi (ana sayfa + comparison + persona, 2026-08-24'te birleşti) ── Üç beyaz kutulu ızgara SaaS klişesiydi; burası artık editoryal bir döküm: iri sıra numarası + ince ayraç çizgiler + (varsa) sağda bedel damgası. Kutu/gölge yok, sayfanın kendi zemini üzerinde duruyor. .costs-tag/.costs-out yalnız ana sayfanın "bedel" anlatısında var — markup'ta yoklarsa .costs li'nin üçüncü grid sütunu boş kalır, sorun çıkarmaz. */ .costs{max-width:940px; margin:0 auto; counter-reset:none} .costs li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px 28px; align-items:start; padding:30px 0; border-top:1px solid var(--border-2); } .costs li:last-child{border-bottom:1px solid var(--border-2)} .costs-no{ font-family:"Bricolage Grotesque",var(--ff); font-size:1.9rem; font-weight:700; line-height:1; color:var(--border-2); letter-spacing:-.03em; padding-top:2px; } .costs h3{font-size:1.24rem; margin-bottom:9px} .costs p{color:var(--muted); font-size:1rem} .costs strong{color:var(--ink); font-weight:700} .costs-out{margin-top:10px; color:var(--ink) !important; font-weight:500} /* Bedel damgası — hafif eğik, "üstüne basılmış" hissi. Terrakota ailesi: uyarı rengi ama kırmızı kadar sert değil. */ .costs-tag{ justify-self:end; white-space:nowrap; transform:rotate(-2deg); font-size:.82rem; font-weight:700; letter-spacing:.02em; color:#8A3B1C; background:#FBEDE7; border:1px dashed #E0A88C; border-radius:var(--r-sm); padding:7px 13px; } /* 04 — üç sorunun cevabı. Ayrı bir kutu değil, listenin son satırı: aynı ızgara, aynı ritim, TERS renk. Okuyucu üç kayıp satırını geçtikten sonra çözümü aynı yerde, aynı formatta görüyor; kopukluk böyle kalkıyor. */ .costs-win{ background:var(--brand); color:#fff; border-top:0 !important; border-radius:var(--r-lg); padding:30px 28px !important; margin-top:14px; } .costs-win h3{color:#fff} .costs-win p{color:rgba(255,255,255,.76)} .costs-win strong{color:#fff} .costs-win .costs-no{color:rgba(212,255,122,.5)} .costs-win .costs-out{color:var(--mint) !important} .costs-win .costs-tag{ color:var(--brand-900); background:var(--mint); border:1px solid transparent; transform:rotate(2deg); } /* ── Adımlar ────────────────────────────────────────────────── */ .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; counter-reset:s} .steps li{position:relative; padding-top:8px} .step-no{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:14px; margin-bottom:18px; background:var(--brand); color:var(--mint); font-weight:800; font-size:1.12rem; box-shadow:0 6px 18px rgba(16,20,13,.24); } .steps h3{font-size:1.2rem; margin-bottom:10px} .steps p{color:var(--muted); font-size:.99rem} /* Adımın ayırt edici vaadi — paragrafın içinde kaybolmasın diye limon sol şeritle ayrı satır. Rozet/pill DEĞİL: adım kartında zaten koyu bir numara var, ikinci bir dolu şekil gürültü yaratıyordu. */ .steps .step-win{ margin-top:12px; padding:9px 0 9px 13px; border-left:3px solid var(--mint); color:var(--ink) !important; font-size:.94rem; font-weight:600; border-radius:0; } /* ── Özellik kartları ───────────────────────────────────────── */ .feats .feat{padding:26px 24px} .feat-ico{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; margin-bottom:16px; background:var(--tint); color:var(--brand-700); } .feat h3{font-size:1.05rem} .feat p{font-size:.94rem} /* ── Türkiye farkı (iki sütun) ──────────────────────────────── */ .split{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:start} .split-text h2{font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:16px} .split-text .sec-lead{margin-bottom:28px} .checks li{ position:relative; padding:0 0 20px 38px; margin-bottom:20px; border-bottom:1px solid var(--border); color:var(--muted); font-size:.99rem; } .checks li:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0} .checks li strong{display:block; color:var(--ink); font-weight:650; margin-bottom:3px} .checks li::before{ content:""; position:absolute; left:0; top:3px; width:24px; height:24px; border-radius:8px; background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A1A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat; } /* Kirilmamis liste — karsilastirma sayfasinda "rakip sunda iyi" bloğu. .checks'in tik ikonu burada YANLIS sinyal olurdu (bunlar bizim ozelligimiz degil, rakibin ustunlugu); ayni tipografi, ikon yok. */ .checks-plain li{padding-left:0} .checks-plain li::before{display:none} .checks-plain li strong{display:block; margin-bottom:4px} /* ── Persona ────────────────────────────────────────────────── */ /* ── Kimler için: iki panel ────────────────────────────────── Bölüm dört persona için yazılmıştı; ikisi kaldırılınca kartlar çeyrek genişlikte kalıp boşlukta yüzüyordu. Artık iki panel alanı bölüşüyor, dolayısıyla içerik de zenginleşebiliyor (ikon + madde listesi). Kart yükseklikleri eşit: `align-items:stretch` + iç flex, yoksa kısa olan panel yarım kalıp bölümü yine boş gösteriyor. */ .personas{align-items:stretch} .persona{ border-radius:var(--r-lg); background:#fff; display:flex; flex-direction:column; padding:32px 30px; } .persona h3{font-size:1.18rem; margin-bottom:8px} .persona p{font-size:.95rem; line-height:1.6} /* İkon marka işaretinin türevi (bkz. docs/MARKA.md). Limon zemin ÜZERİNDE koyu çizgi — limon açık bir renk, ince çizgi olarak kullanılamaz. */ .persona-ikon{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin-bottom:18px; border-radius:16px; background:var(--tint); color:var(--brand); } .persona-list{ list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:9px; font-size:.9rem; color:var(--body); line-height:1.5; } .persona-list li{position:relative; padding-left:20px} /* Nokta işareti de aynı dili konuşuyor: küçük dolu daire, tik değil. Bunlar "özellik var/yok" listesi değil, senaryo tarifi. */ .persona-list li::before{ content:""; position:absolute; left:2px; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--brand); opacity:.32; } /* CTA en alta yapışıyor — iki panelde aynı hizada dursun. */ .persona .card-cta{margin-top:auto; padding-top:20px} /* ── Taşıma bandı ───────────────────────────────────────────── */ .banner{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; background:linear-gradient(135deg,var(--brand-900) 0%,var(--brand) 100%); border-radius:var(--r-xl); padding:52px 48px; color:#fff; box-shadow:var(--sh-lg); } .banner h2{color:#fff; font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:14px} .banner .eyebrow{background:rgba(255,255,255,.16); color:#fff} .banner .sec-lead{color:rgba(255,255,255,.86); max-width:640px} .banner .sec-lead strong{color:#fff} /* Koşul/istisna satırı — lead'den bir tık soluk, yasal-küçük-yazı gibi görünmeden ama vaadin sınırını da saklamadan. */ .sec-note{color:var(--muted); font-size:.94rem; margin-top:12px} .banner .sec-note{color:rgba(255,255,255,.72); max-width:640px} .banner .btn-primary{background:var(--mint); color:var(--brand-900); box-shadow:0 8px 22px rgba(0,0,0,.24)} .banner .btn-primary:hover{background:#fff; color:var(--brand-900)} /* ── Fiyat kartları ─────────────────────────────────────────── */ .plans{align-items:start} .plan{display:flex; flex-direction:column; position:relative; padding:32px 28px} .plan:hover{transform:none} .plan-hot{border-color:var(--brand); box-shadow:var(--sh-lg)} .plan-tag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--brand); color:#fff; font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 14px; border-radius:var(--r-pill); white-space:nowrap; } .plan h3{font-size:1.24rem; margin-bottom:6px} .plan-for{font-size:.9rem !important; color:var(--muted); min-height:42px; margin-bottom:18px} .plan-price{margin-bottom:22px; display:flex; align-items:baseline; gap:4px} .plan-price .amount{font-size:2.5rem; font-weight:800; color:var(--ink); letter-spacing:-.04em} .plan-price .amount-sm{font-size:1.7rem} .plan-price .per{color:var(--muted); font-size:1rem; font-weight:500} .plan-list{margin-top:24px; padding-top:22px; border-top:1px solid var(--border)} .plan-list li{position:relative; padding-left:27px; margin-bottom:11px; font-size:.93rem; color:var(--body)} .plan-list li::before{ content:""; position:absolute; left:0; top:6px; width:17px; height:17px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310140D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } /* "Yakında" — yol haritasındaki plan özelliği. Tik işareti SAAT ile değişiyor: aynı tikle çıksaydı satır "var" diye okunur, rozet gözden kaçabilirdi. İşaret ve rozet aynı şeyi iki kez söylüyor, çünkü buradaki yanlış anlaşılmanın bedeli parayla ödeniyor. */ .plan-list li.is-yakinda{color:var(--muted)} /* ── Ödeme dönemi geçişi (aylık ⇄ yıllık) ─────────────────── SAF CSS, JS YOK: pazarlama sayfalarının 0-JS kuralı korunuyor. Radio'lar .plans'tan ÖNCE gelmek zorunda — `~` yalnız SONRAKİ kardeşleri görür. Görünmezler ama display:none DEĞİLLER: o hâlde odaklanamaz ve klavyeyle ok tuşlarıyla geçiş yapılamazdı. */ .bs-y,.bs-m{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none} .bs-tabs{ display:inline-flex; gap:4px; margin:0 auto 28px; padding:4px; background:var(--alt); border:1px solid var(--border); border-radius:999px; } .bill-switch{display:flex; flex-direction:column; align-items:center} .bill-switch>.plans{width:100%} .bs-tabs label{ padding:8px 18px; border-radius:999px; cursor:pointer; white-space:nowrap; font-size:.93rem; font-weight:600; color:var(--muted); transition:background .16s ease, color .16s ease; } .bs-y:checked~.bs-tabs label[for$="-y"], .bs-m:checked~.bs-tabs label[for$="-m"]{background:#fff; color:var(--ink); box-shadow:var(--sh-sm)} /* Klavye odağı görünür kalmalı — radio gizli olduğu için halka etiketin. */ .bs-y:focus-visible~.bs-tabs label[for$="-y"], .bs-m:focus-visible~.bs-tabs label[for$="-m"]{outline:2px solid var(--brand); outline-offset:2px} .bs-hint{font-size:.78rem; font-weight:600; color:var(--brand-ink,#3F6212)} /* Varsayılan YILLIK: aylık karşılıklar gizli başlar (brief madde 4.3). Yıllık hem bize (nakit bugün) hem alıcıya (≈%23 ucuz) daha iyi. ⚠️ display DEĞERİ HER DURUM İÇİN AÇIKÇA YAZILIYOR — tek bir `.plans .ayl{display:none}` yetmiyor: fiyat satırındaki flex kuralı aynı özgüllükte ve sonra geldiği için onu eziyor, iki fiyat yan yana görünüyordu. Seçili-durum kuralları (:checked~) daha özgül olduğu için üstte kalır. */ .plan-price .yil{display:flex; align-items:baseline; gap:4px} .plan-price .ayl{display:none} .plan-terms .yil{display:block} .plan-terms .ayl{display:none} .bs-m:checked~.plans .plan-price .yil{display:none} .bs-m:checked~.plans .plan-price .ayl{display:flex; align-items:baseline; gap:4px} .bs-m:checked~.plans .plan-terms .yil{display:none} .bs-m:checked~.plans .plan-terms .ayl{display:block} /* Taksit / kıyas satırı. min-height, dönem değiştirilirken kartın SIÇRAMAMASI için. Yıllık taraf daha uzun (taksit rozeti + toplam + kıyas satırı ≈ 82px), aylık iki satır ≈ 62px. Yükseklik UZUN olana göre sabit; yoksa geçişte CTA düğmesi kayıyor ve kullanıcı dönem değiştirirken sayfa titriyor. Rozet ya da kıyas satırı değişirse bu değer ölçülüp güncellenmeli. */ .plan-terms{ margin:-14px 0 20px; font-size:.86rem; line-height:1.5; color:var(--muted); min-height:82px; } .plan-terms .plan-alt{display:block; margin-top:3px; font-weight:600; color:var(--ink)} /* Ek satırlar — kartların altında, kademe yapısının devamı. */ /* Risk kaldırma satırı: düğmenin hemen altında, fiyatla yarışmayacak kadar küçük ama okunacak kadar net. İkinci satır (iade) daha soluk — ikisi eşit ağırlıkta olursa hiçbiri okunmuyor. */ .plan-risk{ margin:9px 0 0; text-align:center; font-size:.78rem; line-height:1.45; color:var(--muted); } .plan-risk span{display:block; opacity:.8} /* Taksit rozeti — kartın en güçlü tek satırı, o yüzden marka renginde. "yakında" rozetinden (amber) bilerek FARKLI renk: biri bugün geçerli bir ödeme kolaylığı, diğeri henüz olmayan bir özellik. İkisi aynı görünürse alıcı hangisinin bugün geçerli olduğunu ayırt edemez. */ .rozet-taksit{ display:inline-block; margin-bottom:7px; padding:3px 10px; font-size:.75rem; font-weight:700; letter-spacing:.01em; white-space:nowrap; color:#2F4A12; background:#EAFBD0; border:1px solid #D4F3A8; border-radius:999px; } /* Kıyas çıpası: fiyatla yarışmasın diye küçük ve soluk; yalnız kazanç rakamı koyu. */ .plan-kiyas{display:block; margin-top:4px; font-size:.8rem; color:var(--muted)} .plan-kiyas s{opacity:.75} .plan-kiyas strong{color:var(--ink); font-weight:600} .plan-addons{ margin-top:20px; text-align:center; font-size:.9rem; color:var(--muted); } .plan-addons strong{color:var(--ink); font-weight:600; white-space:nowrap} .plan-list li.is-yakinda::before{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E766B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat; } /* ── Son CTA ────────────────────────────────────────────────── */ .cta-final{background:var(--alt); border-top:1px solid var(--border)} .cta-in{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:52px; align-items:center} .cta-in h2{font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:14px} .cta-in .hero-cta{justify-content:flex-start} .proof{ background:#fff; border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:var(--r-lg); padding:28px 28px; box-shadow:var(--sh-sm); } .proof-quote{font-size:1.02rem; color:var(--ink); line-height:1.6} .proof-by{margin-top:14px; font-size:.86rem; color:var(--muted); font-weight:500} /* ── SSS ────────────────────────────────────────────────────── */ .faq{border:1px solid var(--border); border-radius:var(--r-lg); background:#fff; overflow:hidden} .faq details{border-bottom:1px solid var(--border)} .faq details:last-child{border-bottom:0} .faq summary{ display:flex; align-items:center; gap:14px; cursor:pointer; padding:20px 24px; list-style:none; transition:background .14s ease; } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{background:var(--alt)} .faq summary h3{font-size:1.02rem; font-weight:600; flex:1; letter-spacing:-.01em} .faq summary::after{ content:""; flex:none; width:20px; height:20px; transition:transform .18s ease; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E766B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; } .faq details[open] summary::after{transform:rotate(180deg)} .faq details[open] summary{background:var(--alt)} .faq-a{padding:0 24px 22px; color:var(--muted); font-size:.99rem} .faq-a p{max-width:66ch} /* ── "Yakında" sayfası ──────────────────────────────────────── */ .soon{text-align:center; padding:110px 0 120px} .soon h1{font-size:clamp(1.9rem,4vw,2.8rem); margin-bottom:18px} .soon .lead{margin-bottom:8px} /* ── Footer ─────────────────────────────────────────────────── */ .foot{background:var(--ink); color:#A7AEA3; padding:64px 0 30px; font-size:.93rem} .foot-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:56px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.10)} /* ── Footer'daki kelime markası ────────────────────────────── TERS KONTRAST DÜZELTMESİ. Açık zeminde koyu yazı ile koyu zeminde açık yazı AYNI ağırlıkta görünmez: ışıma etkisi yüzünden ters yazı optik olarak şişer. Ölçüldü — header ve footer birebir aynı (21.6 px, 148 px genişlik) ama footer gözle daha iri duruyordu. Düzeltme boyut değil AĞIRLIK: 800 → 700. Ölçü ilişkisi bozulmadan optik denklik kuruluyor. ("Online" 400'de kalıyor; @font-face aralığı 400-800, daha incesi zaten yok.) ⚠️ RENK VURGUSU YOK — bilerek. Eskiden `strong{color:var(--mint)}` vardı ama header'da böyle bir ayrım yoktu; aynı marka iki yerde iki farklı biçimde yazılıyordu. Ayrım TEK cihazla yapılıyor: ağırlık. Limon, gerçek arayüz vurgularına (buton, rozet) ayrılmış durumda — altyapı markası imzasını atarken bağırmamalı. (Kural `strong` için yazılmıştı ve ``e geçince zaten ölmüştü.) */ .foot .logo-text{color:#fff; font-weight:700} .foot-brand p{margin-top:14px; max-width:320px; line-height:1.6} .foot-mail a{color:#fff; font-weight:500} .foot-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:32px} .foot-cols h3{color:#fff; font-size:.86rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; margin-bottom:16px} .foot-cols a{display:block; color:#A7AEA3; margin-bottom:11px} .foot-cols a:hover{color:#fff; text-decoration:none} .foot-bot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:26px; font-size:.86rem; color:#79806F} /* ── Çerez rıza bandı ─────────────────────────────────────────── Yalnız GTM yapılandırılmışsa VE hiç tercih yapılmamışsa basılır (sunucuda karar verilir, bkz. partials/consent.blade.php). Alta sabit, tam genişlik. */ .cc{ position:fixed; left:0; right:0; bottom:0; z-index:9998; background:#fff; border-top:1px solid var(--border-2); box-shadow:0 -8px 28px rgba(18,22,15,.10); } .cc-in{ max-width:var(--wrap); margin:0 auto; padding:16px 24px; display:flex; align-items:center; gap:18px 24px; flex-wrap:wrap; } /* display:flex, HTML'in `hidden` özniteliğini ezer — ayarlar paneli baştan açık geliyordu. Öznitelik kazanmalı. */ .cc-in[hidden]{display:none} .cc-text{flex:1 1 320px; font-size:.92rem; color:var(--body); line-height:1.55} .cc-text a{text-decoration:underline} .cc-act{display:flex; gap:10px; margin-left:auto; flex-wrap:wrap} .cc-act .btn{font-size:.9rem; padding:10px 18px} @media (max-width:640px){ .cc-in{padding:14px 18px; gap:12px} .cc-act{width:100%; margin-left:0} .cc-act .btn{flex:1} } /* ── Çerez tercihleri paneli ──────────────────────────────────── MODAL DEĞİL — üstteki bant ile AYNI mantık: karartma yok, sayfayı bloklamıyor, "kurtulmak için tıkla" refleksi yaratmıyor (bkz. .cc üstündeki not). Yalnız daha yüksek bir şerit: ekranın ~1/3'ü, akordeon kategori satırları (Zorunlu için "Her zaman aktif" etiketi, diğerleri anahtar) içeride kayar, başlık ve butonlar sabit kalır. */ .cc-overlay{ position:fixed; left:0; right:0; bottom:0; z-index:9999; background:#fff; border-top:1px solid var(--border-2); box-shadow:0 -8px 28px rgba(18,22,15,.10); } .cc-overlay[hidden]{display:none} .cc-modal{ max-width:var(--wrap); margin:0 auto; width:100%; height:33vh; min-height:360px; max-height:min(600px,80vh); display:flex; flex-direction:column; } .cc-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; border-bottom:1px solid var(--border-2); flex:none; } .cc-modal-head h2{margin:0; font-size:1.15rem; color:var(--ink)} .cc-modal-close{ flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--border-2); background:#fff; color:var(--muted); font-size:1.05rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .16s ease,color .16s ease; } .cc-modal-close:hover{border-color:var(--brand); color:var(--brand-700)} .cc-modal-body{padding:20px 24px; overflow-y:auto} .cc-modal-intro{font-size:.9rem; color:var(--body); line-height:1.6; margin:0 0 18px} .cc-more-btn{ background:none; border:0; padding:0; margin-left:4px; color:var(--brand-700); font-size:.9rem; text-decoration:underline; cursor:pointer; } .cc-cat{border-top:1px solid var(--border-2); padding:14px 0} .cc-cat:first-of-type{border-top:0; padding-top:0} .cc-cat summary{display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none} .cc-cat summary::-webkit-details-marker{display:none} .cc-chevron{flex:none; width:14px; color:var(--muted); transition:transform .16s ease} .cc-chevron::before{content:'›'; font-size:1.2rem; line-height:1} .cc-cat[open] > summary .cc-chevron{transform:rotate(90deg)} .cc-cat-name{flex:1; font-size:.95rem; font-weight:600; color:var(--ink)} .cc-always{flex:none; font-size:.82rem; font-weight:700; color:var(--brand-700)} .cc-cat p{margin:8px 0 0 24px; font-size:.85rem; color:var(--muted); line-height:1.55} .cc-modal-foot{ display:flex; gap:10px; flex-wrap:wrap; padding:18px 24px; border-top:1px solid var(--border-2); flex:none; } .cc-modal-foot .btn{flex:1; font-size:.88rem; padding:11px 14px; justify-content:center; text-align:center} /* Anahtar (switch) — campusonline.com'un canlı çerez panelindeki ve co_platform'un cconsent-toggle'ındaki AYNI görsel dil. Gerçek altta kalıyor (erişilebilirlik + form durumu için), yalnız görünmez kılınıp üstüne çizilen track+dot ile switch gibi gösteriliyor. */ .cc-switch{ position:relative; display:inline-block; flex:none; width:40px; height:24px; border-radius:999px; background:var(--border-2); cursor:pointer; transition:background .16s ease; } .cc-switch input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer} .cc-switch-dot{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(18,22,15,.25); transition:transform .16s ease; } .cc-switch:has(input:checked){background:var(--brand)} .cc-switch:has(input:checked) .cc-switch-dot{transform:translateX(16px)} .cc-switch:has(input:focus-visible){outline:3px solid var(--brand); outline-offset:2px} .cc-switch.is-locked{background:var(--brand); cursor:default} .cc-switch.is-locked .cc-switch-dot{transform:translateX(16px)} @media (max-width:640px){ .cc-modal-foot{flex-direction:column} } /* ── Ekran okuyucuya özel ───────────────────────────────────── */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ── Kırıntı gezinti ────────────────────────────────────────── */ .crumbs{border-bottom:1px solid var(--border); background:var(--alt); font-size:.86rem} .crumbs .wrap{display:flex; gap:9px; align-items:center; padding-block:13px; color:var(--muted)} .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--brand-700)} .sec-tight{padding-top:56px} /* ── Karşılaştırma tablosu ──────────────────────────────────── */ /* Dar ekranda tablo KENDİ kabında yatay kayar; sayfa gövdesi asla kaymaz. */ .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--r-lg); background:#fff; } .matrix{border-collapse:collapse; width:100%; min-width:640px; font-size:.94rem} .matrix th,.matrix td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--border)} .matrix thead th{ position:sticky; top:0; background:#fff; z-index:1; font-size:.82rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); border-bottom:2px solid var(--border-2); } .matrix tbody th{font-weight:500; color:var(--body); width:42%} .matrix td{text-align:center; color:var(--body)} .matrix thead th:not(:first-child){text-align:center} .matrix tbody tr:last-child th,.matrix tbody tr:last-child td{border-bottom:0} .matrix .col-hot{background:rgba(212,255,122,.16)} .matrix thead .col-hot{color:var(--brand-700)} .matrix-group th{ background:var(--alt); color:var(--ink) !important; font-weight:700 !important; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; width:auto !important; } .matrix .yes{display:inline-flex; color:var(--brand)} .matrix .no{color:var(--faint)} .matrix .val{font-size:.88rem; color:var(--muted)} /* Yol haritasındaki özellik — TİK YERİNE geçer, yanına eklenmez. Marka renginden (tik) bilerek uzak, amber: "var" diye okunmamalı. Plan kartlarındaki rozetle AYNI sınıf; iki yüzey tek görünüm. Durum config/site.php → 'yakinda' listesinden, CSS'te liste YOK. */ .rozet-yakinda{ display:inline-block; padding:1px 8px; font-size:.72rem; font-weight:600; line-height:1.5; white-space:nowrap; color:#8A5A16; background:#FDF6EA; border:1px solid #F0E2C8; border-radius:999px; } /* Plan kartı içinde satır metninin yanında dururken nefes payı gerekiyor; tablo hücresinde ortalanmış tek öğe olduğu için orada margin İSTENMİYOR. */ .plan-list .rozet-yakinda{margin-left:6px; vertical-align:1px} .plan-list li.is-yakinda{color:var(--muted)} .matrix-compare tbody th{width:34%; font-weight:600; color:var(--ink)} /* ⚠️ BAŞLIK VE HÜCRE AYNI HİZADA OLMAK ZORUNDA. Temel `.matrix` kuralı başlıkları ORTALIYOR (`thead th:not(:first-child)`), bu tablo ise hücreleri sola yaslıyordu — sütunlar kaymış görünüyordu. İkisi de artık sola yaslı. */ .matrix-compare td, .matrix-compare thead th:not(:first-child){text-align:left} /* Para ve oran rakamları hizalı okunsun. */ .matrix-compare td{font-variant-numeric:tabular-nums} /* "Kendi akademiniz" sütunu vurgulu — kıyasın kazanan tarafı okunur olmalı. */ .matrix-compare .col-hot strong{color:var(--ink)} /* Blog yazısı içindeki SSS başlığı — gövdenin H2'leriyle aynı hizada görünsün diye .legal-body dışında ayrı yazıldı (gövde `.legal-body h2` kuralını miras almıyor). */ .blog-faq-h2{ font-size:1.3rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; margin:36px 0 16px; } /* ── Blog kapak görselleri ─────────────────────────────────── Kapaklar üretimli (tools/make-blog-covers.py) ve marka geometrisinden türüyor. Kartta üstte, yazıda başlığın altında. width/height nitelikleri şablonda VAR ve aspect-ratio buradan geliyor: ikisi birlikte yükleme sırasında yer ayırıyor, görsel gelince sayfa zıplamıyor (CLS). */ .blog-kapak{ display:block; width:100%; height:auto; aspect-ratio:1200/630; border-radius:var(--r); margin-bottom:16px; background:var(--brand); } /* Yazı içindeki kapak biraz daha nefesli — başlıkla gövde arasında durur. */ .blog-kapak-hero{margin:22px 0 30px; border-radius:var(--r-lg)} /* ── Blog/yasal gövde içindeki tablolar ────────────────────── Markdown'dan gelen tablolar tamamen stilsiz basılıyordu (1 px padding, kenarlıksız) — ham HTML tablosu gibi duruyordu. Karşılaştırma tablosu bu yazıların en okunur parçası; okunaksız olması yazıyı da götürüyor. Dar ekranda KENDİ KABINDA kayar, sayfa gövdesi asla yatay kaymaz. */ .legal-body table{ width:100%; border-collapse:collapse; margin:22px 0; font-size:.94rem; display:block; overflow-x:auto; } .legal-body table thead th{ text-align:left; white-space:nowrap; font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:var(--alt); border-bottom:2px solid var(--border-2); padding:11px 14px; } .legal-body table td, .legal-body table tbody th{ padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top; text-align:left; } /* İlk sütun satır etiketi: rakamlarla yarışmasın diye koyu ve dar. */ .legal-body table td:first-child, .legal-body table tbody th{color:var(--ink); font-weight:600} /* Para/oran sütunları hizalı okunsun. */ .legal-body table td{font-variant-numeric:tabular-nums} .legal-body table tbody tr:last-child td, .legal-body table tbody tr:last-child th{border-bottom:0} /* Alıntı — mevzuat metni aktarılan yerler. Gövdeden ayrılmalı ki okuyucu "bu benim yorumum değil, hükmün kendisi" ayrımını görsün. */ .legal-body blockquote{ margin:22px 0; padding:14px 20px; border-left:3px solid var(--brand); background:var(--alt); border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--body); font-size:.96rem; } .legal-body blockquote p:last-child{margin-bottom:0} /* Avantaj listesi — tablodan sonra, TEK BAKIŞTA okunacak. Yatay ve tikli: hero'daki .risk deseniyle aynı dil. Buranın işi paragraf değil, dört madde; tabloyu açıklayan metin tablodan uzun olmamalı. */ .avantaj{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 28px; list-style:none; padding:0; margin:26px 0 0; font-size:.95rem; color:var(--body); } .avantaj li{position:relative; padding-left:26px} .avantaj li::before{ content:""; position:absolute; left:0; top:.18em; width:17px; height:17px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310140D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } .avantaj strong{color:var(--ink); font-weight:650} /* Kaynak/uyarı notu — okunması gereken ama okumayı kesmemesi gereken metin. */ .kaynak-not{ display:block; max-width:62ch; margin:14px auto 0; font-size:.83rem; line-height:1.55; color:var(--faint, var(--muted)); opacity:.85; } /* Hücre içi küçük açıklama ("kampanya fiyatı", "%37") rakamla yarışmasın. */ .hucre-not{display:block; font-size:.8rem; color:var(--muted); margin-top:2px} .row-us{background:rgba(212,255,122,.2)} .row-us th,.row-us td{color:var(--brand-900) !important} /* ── Form sayfası ───────────────────────────────────────────── */ .form-sec{padding-top:64px} .form-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:64px; align-items:start} .form-side h1{font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px} .form-side .lead{margin:0 0 30px; text-align:left} .form-checks li{font-size:.95rem; padding-bottom:16px; margin-bottom:16px} .form-alt{margin-top:26px; font-size:.94rem; color:var(--muted)} .form-card{ background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); padding:34px 32px; box-shadow:var(--sh-lg); } .field{margin-bottom:18px} .field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px} .field label{display:block; font-size:.88rem; font-weight:600; color:var(--ink); margin-bottom:7px} .field label .opt{font-weight:400; color:var(--faint)} .field input,.field select,.field textarea{ width:100%; font:inherit; font-size:.97rem; color:var(--ink); background:#fff; padding:12px 14px; border:1px solid var(--border-2); border-radius:var(--r); transition:border-color .14s ease, box-shadow .14s ease; } .field textarea{resize:vertical; min-height:104px} .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(16,20,13,.13); } .field input[aria-invalid]{border-color:#DC2626} .field ::placeholder{color:var(--faint)} .form-note{margin-top:16px; font-size:.82rem; color:var(--muted); line-height:1.55} /* Bal küpü — gerçek kullanıcı ne görür ne sekmeyle ulaşır. display:none KULLANILMIYOR: bazı botlar gizli alanları atlamak için tam da onu kontrol ediyor; ekran dışına almak daha sessiz bir tuzak. */ .hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden} .alert{ background:#FEF2F2; border:1px solid #FCA5A5; color:#991B1B; border-radius:var(--r); padding:14px 16px; margin-bottom:22px; font-size:.92rem; } .alert ul{margin-top:7px; padding-left:18px; list-style:disc} .alert li{margin-top:3px} /* ── Teşekkür sayfası ───────────────────────────────────────── */ .tick{ display:inline-flex; align-items:center; justify-content:center; width:66px; height:66px; border-radius:50%; margin-bottom:24px; background:var(--tint); color:var(--brand); } .next{margin-top:56px; text-align:left} .next h2{font-size:1.2rem; margin-bottom:18px; text-align:center} .next-card{display:block} .next-card:hover{text-decoration:none} .next-card h3{color:var(--brand-700); font-size:1rem} /* ── Yasal metinler ─────────────────────────────────────────── */ /* Bu sayfalar baştan sona OKUNMAZ, TARANIR: kullanıcı aradığı maddeyi gözle bulur. O yüzden başlıklar belirgin, satır uzunluğu dar, boşluk cömert. */ .legal h1{font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:10px} .legal-meta{font-size:.86rem; color:var(--muted); margin-bottom:40px; padding-bottom:20px; border-bottom:1px solid var(--border)} .legal-body{font-size:1rem; line-height:1.75; color:var(--body); max-width:68ch} .legal-body h2{font-size:1.25rem; margin:44px 0 14px; padding-top:4px} .legal-body h3{font-size:1.03rem; margin:28px 0 10px} .legal-body p{margin-bottom:16px} .legal-body ul{margin:0 0 18px; padding-left:22px; list-style:disc} .legal-body li{margin-bottom:9px} .legal-body code{font-size:.86em} .legal-lead{font-size:1.1rem; color:var(--ink); margin-bottom:28px} /* Blog gövdesi Markdown'dan geliyor — ol/strong/blockquote de kapsanmalı. */ .blog-body ol{margin:0 0 18px; padding-left:22px; list-style:decimal} .blog-body ol li{margin-bottom:9px} .blog-body strong{color:var(--ink); font-weight:650} .blog-body a{text-decoration:underline} .blog-body blockquote{ margin:24px 0; padding:14px 20px; border-left:4px solid var(--border-2); color:var(--muted); font-size:.96rem; } .blog-card-meta{font-size:.8rem; color:var(--muted); margin-bottom:8px !important; font-weight:500} /* Dikkat çekilmesi gereken paragraf — cayma hakkı istisnası, veri sahipliği, "reklam çerezi yok" gibi kullanıcının kaçırmaması gereken kısımlar. */ .legal-body .note{ background:var(--tint); border-left:4px solid var(--brand); border-radius:0 var(--r) var(--r) 0; padding:16px 20px; margin:24px 0; font-size:.97rem; } .legal-dl{margin:0 0 24px} .legal-dl dt{font-weight:650; color:var(--ink); margin-top:14px; font-size:.92rem} .legal-dl dd{margin:2px 0 0; color:var(--muted)} .legal-table{border-collapse:collapse; width:100%; margin:20px 0 26px; font-size:.93rem} .legal-table th,.legal-table td{ padding:11px 14px; text-align:left; border:1px solid var(--border); vertical-align:top; } .legal-table thead th{background:var(--alt); font-size:.82rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)} /* İşletmeci künyesi — her yasal sayfanın altında aynı blok. Mesafeli satışta satıcı kimliğinin görünürlüğü mevzuat gereği. */ .legal-firm{ margin-top:56px; padding:26px 28px; background:var(--alt); border:1px solid var(--border); border-radius:var(--r-lg); } .legal-firm h2{font-size:.86rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:16px} .legal-firm dl{display:grid; grid-template-columns:auto 1fr; gap:8px 20px; margin:0; font-size:.92rem} .legal-firm dt{font-weight:600; color:var(--ink); white-space:nowrap} .legal-firm dd{margin:0; color:var(--muted)} .contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0 12px} .contact-cards .card{padding:22px 20px} .contact-cards h3{font-size:1rem; color:var(--brand-700)} .contact-cards p{font-size:.9rem; margin-bottom:12px} .card-cta{font-size:.86rem; font-weight:600; color:var(--brand-700)} /* ═══ Duyarlılık ═══════════════════════════════════════════════ */ @media (max-width:1000px){ /* Üç plan kartı bu genişlikten sonra yan yana okunmuyor: fiyat ve özellik listesi sıkışıyor. İkiye düşüyor, öne çıkan kart tam satır alıyor. */ .plans{grid-template-columns:repeat(2,1fr)} .plans .plan-hot{grid-column:1/-1} .grid-3,.grid-4,.steps,.contact-cards{grid-template-columns:repeat(2,1fr)} .grid-2{grid-template-columns:1fr} .split,.cta-in,.form-grid{grid-template-columns:1fr; gap:36px} .banner{grid-template-columns:1fr; padding:40px 32px} .foot-top{grid-template-columns:1fr; gap:36px} /* Formda önce kart gelsin: mobilde asıl iş formu doldurmak, yan panel destek. */ .form-side{order:2} .form-card{order:1} } @media (max-width:820px){ /* Dar ekranda başlık: hamburger + logo + TEK birincil CTA. "Giriş" menünün içine iniyor (aşağıda .nav-only-mobile), üç eylem yan yana sıkışmasın diye. */ .nav-in{grid-template-columns:auto 1fr auto; gap:12px} .nav-in .logo{justify-self:start} .nav-cta .btn-ghost{display:none} .nav-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:0 9px; cursor:pointer; border-radius:var(--r-sm); justify-self:start; /* Dokununca mavi vurgu / metin seçimi kalmasın. */ -webkit-tap-highlight-color:transparent; user-select:none; } .nav-burger span{ display:block; height:2px; border-radius:2px; background:var(--ink); transition:transform .18s ease, opacity .18s ease; } .nav-toggle:checked ~ .nav-in .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle:checked ~ .nav-in .nav-burger span:nth-child(2){opacity:0} .nav-toggle:checked ~ .nav-in .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-toggle:focus-visible ~ .nav-in .nav-burger{outline:3px solid var(--brand); outline-offset:2px} /* Açılır panel — başlığın altına iner, sayfayı itmez. */ .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; justify-self:stretch; background:var(--bg); border-bottom:1px solid var(--border); padding:6px 24px 14px; box-shadow:var(--sh); } .nav-toggle:checked ~ .nav-in .nav-links{display:flex} .nav-links a{padding:13px 0; border-bottom:1px solid var(--border); font-size:1rem} .nav-links a:last-child{border-bottom:0} .nav-only-mobile{display:block} .trust{grid-template-columns:repeat(2,1fr); gap:22px 8px} } @media (max-width:760px){ /* Numara + metin üstte yan yana, bedel damgası alta geçer — dar ekranda üç sütun sıkışıp damga kırpılıyordu. */ .costs li{grid-template-columns:auto minmax(0,1fr); gap:10px 18px; padding:26px 0} .costs-no{font-size:1.5rem} .costs-tag{grid-column:2; justify-self:start; transform:none} } @media (max-width:640px){ body{font-size:16px} .hero{padding:56px 0 52px} .sec{padding:60px 0} .grid-3,.grid-4,.steps,.plans,.foot-cols,.field-row,.contact-cards{grid-template-columns:1fr} .sec-head{margin-bottom:36px} .form-card{padding:26px 20px} /* Künye dar ekranda iki sütunda sıkışıyordu — alt alta daha okunur. */ .legal-firm dl{grid-template-columns:1fr; gap:2px} .legal-firm dt{margin-top:12px} .legal-table{font-size:.86rem} .legal-table th,.legal-table td{padding:9px 10px} .hero-cta{flex-direction:column; align-items:stretch} .hero-cta .btn{width:100%} .btn-lg{padding:15px 24px} .banner{padding:32px 24px} .plan-for{min-height:0} .foot-bot{flex-direction:column; gap:6px} } @media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important} .btn:hover,.card:hover{transform:none} /* Animasyon durunca tüm kelimeler max-width:0 / opacity:0'da kalırdı (hiçbiri görünmez) — yalnız ilki açık gösterilir, diğerleri akıştan tamamen çıkar (aksi hâlde beşi yan yana dizilirdi). */ .rot > span{display:none !important} .rot > span:first-child{ display:inline-block !important; max-width:none !important; padding:.02em .38em !important; opacity:1 !important; } /* Aynı gerekçe dönen placeholder için (bkz. .ph-rot): animasyon durunca hepsi opacity:0'da kalır ve alan boş görünürdü. */ .ph-rot span{display:none !important} .ph-rot span:first-child{display:flex !important; opacity:1 !important; transform:none !important} } @media print{ .nav,.foot,.hero-glow{display:none} body{font-size:12pt} } /* ── Kimlik ekranları (/basla, /giris) — ortalanmış kart, global SaaS deseni ── 2026-08-24: önceki /basla iki sütun + madde listeleri + risk şeridiyle bir pazarlama sayfası gibi davranıyordu ("yayvan") → tek dar sütuna indirildi. 2026-08-25 ikinci tur: dar sütun tek başına yetmedi, sayfa "tasarlanmış ekran" değil "boş sayfaya bırakılmış form" gibi duruyordu. Eksik olan üç şey vardı ve üçü de burada: (1) kartın kendi YÜZEYİ yok, zeminle aynı renkti → zemin kırık beyaza (--alt) çekildi, kart beyaz kaldı; (2) içerik dikey ortalanmıyor, yukarıdan sarkıyordu; (3) logo köşede yalnızdı → kartın üstünde, blokla birlikte ortalandı. Stripe/Linear deseni. Şifre alanı YOK (OTP akışı, bkz. GirisWebController/SignupWebController). */ .auth-main{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px} .auth-wrap{width:100%; max-width:420px} /* .logo display:flex — ortalamak için justify-content yeterli. */ .auth-logo{justify-content:center; margin-bottom:26px} .auth-card{background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); padding:36px 32px; box-shadow:var(--sh)} .auth-card h1{font-size:1.55rem; margin-bottom:8px} .auth-card .lead{margin:0 0 28px; text-align:left; max-width:none; font-size:.98rem} .auth-field{margin-bottom:16px} .auth-field label{display:block; font-size:.88rem; font-weight:600; color:var(--ink); margin-bottom:7px} .auth-field input{display:block; width:100%; padding:13px 14px; font-size:1.05rem; border:1px solid var(--border-2); border-radius:var(--r); color:var(--ink); background:#fff; transition:border-color .14s ease, box-shadow .14s ease} .auth-field input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(16,20,13,.13)} /* Kod alanı: harf aralığı + ortalanmış rakamlar, tek bakışta doğrulanabilir. */ .auth-field input[name="code"]{letter-spacing:.4em; font-variant-numeric:tabular-nums; text-align:center; font-weight:600} /* ── Dönen örnek isim ("Akademinizin adı" placeholder'ı) ───────────────── Örnekler input'un ÜSTÜNDE değil ARKASINDA duruyor (input zemini şeffaf); odaklanınca ya da bir değer girilince `:placeholder-shown` ile gizleniyor. Gerçek `placeholder` tek boşluk — tarayıcının kendi placeholder'ı hiç görünmüyor ama `:placeholder-shown` seçicisi çalışmaya devam ediyor. ⚠️ HAREKET NEDEN "DAKTİLO" DEĞİL (2026-08-25 kararı, tekrar açılmasın): daktilo efekti bir INPUT'un içinde "birisi yazıyor" illüzyonu yaratıyor — kullanıcı orada gerçek bir değer olup olmadığından emin olamıyor, yani placeholder/değer ayrımı bulanıklaşıyor. Ayrıca harf harf açılan metni okumak beklemeyi gerektirir; placeholder'ın işi ANINDA bilgi vermek. Teknik tarafta da CSS-only daktilo `steps()` ile her ismin karakter sayısına göre ayrı ölçü ister — .rot bloğundaki "sabit genişlik ölçme" tuzağının aynısı. ⚠️ .rot'tan farkı: BURADA GENİŞLİK HİÇ ANİME EDİLMİYOR. Örnekler üst üste (absolute) duruyor ve yalnız opacity + transform değişiyor, yani ölçülen hiçbir değer yok — font yüklenmesi (font-display:swap) veya dil değişimi bu bloğu kıramaz. Dikey hizayı da `top/bottom:0` + flex veriyor; sabit bir `top:13px` input'un 1px kenarlığı yüzünden metni bir piksel yukarı kaydırıyordu. */ .ph-wrap{position:relative} .ph-wrap input{position:relative; z-index:1; background:transparent} /* line-height:normal — input'unki de öyle. Gövdeden miras kalan 1.65 span'in satır kutusunu 1px büyütüyor ve metni yarım piksel yukarı kaydırıyordu. */ .ph-rot{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; font-size:1.05rem; line-height:normal; color:var(--faint); transition:opacity .12s ease} .ph-wrap input:focus ~ .ph-rot, .ph-wrap input:not(:placeholder-shown) ~ .ph-rot{opacity:0} .ph-rot span{ /* left: 1px kenarlık + 14px iç boşluk = input metniyle birebir aynı hiza. */ position:absolute; left:15px; right:14px; top:0; bottom:0; display:flex; align-items:center; white-space:nowrap; opacity:0; animation:phRotslot 15s infinite; } .ph-rot span:nth-child(1){animation-delay:0s} .ph-rot span:nth-child(2){animation-delay:3s} .ph-rot span:nth-child(3){animation-delay:6s} .ph-rot span:nth-child(4){animation-delay:9s} .ph-rot span:nth-child(5){animation-delay:12s} /* Yukarı kayarak geçiş: alttan gelir, üstten çıkar. 6px küçük bir mesafe — placeholder bir vurgu öğesi değil, hareket fark edilmeli ama göz yormamalı. Yalnız transform+opacity (compositor'da çalışır, layout yok). */ @keyframes phRotslot{ 0% {opacity:0; transform:translateY(7px)} 3% {opacity:1; transform:translateY(0)} 18% {opacity:1; transform:translateY(0)} 21% {opacity:0; transform:translateY(-7px)} 100% {opacity:0; transform:translateY(-7px)} } .auth-card .btn{width:100%; justify-content:center; margin-top:20px} .auth-alt{margin-top:24px; font-size:.92rem; color:var(--muted); text-align:center} .auth-alt a{font-weight:600} /* Onay kutuları (üyelik/KVKK — zorunlu, pazarlama izni — opsiyonel). Checkbox metinle ÜSTTEN hizalı (align-items:flex-start), metin iki satıra düşünce kutu ortada asılı kalmasın diye. */ .auth-check{display:flex; align-items:flex-start; gap:10px; margin-top:14px; font-size:.86rem; color:var(--muted); line-height:1.5; cursor:pointer} .auth-check input{flex:0 0 auto; width:17px; height:17px; margin-top:2px; accent-color:var(--brand)} .auth-check a{text-decoration:underline; color:var(--muted)} .auth-check a:hover{color:var(--brand-700)} .auth-err{background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; border-radius:var(--r); padding:14px 16px; margin-bottom:22px; font-size:.9rem; line-height:1.6} .auth-err ul{margin:8px 0 0; padding-left:18px} /* Hesap seçimi (aynı e-posta birden fazla akademide owner) — buton listesi, dropdown değil: tek elle tıklanabilir, JS'siz sayfada