/* ============================================================================= Roots & Talks — ürün katmanı tasarım sistemi ============================================================================= Bu dosya bir "tema" değil, bir tasarım sistemidir. eski motorun hiçbir sınıfını, değişkenini veya yerleşim kuralını devralmaz ve motorun js-css birleştiricisine hiç girmez (public/rt altından servis edilir). KATMANLAR — UX/UI Stratejisi 2026-09, "Design system" bölümü ------------------------------------------------------------- foundation : ham ölçekler. Anlam taşımaz. "Bu renk şu koddur." semantic : rol. "Birincil eylem şu renktir." Bileşenler YALNIZ bunu okur. primitive : yapı taşları (container, stack, grid, görsel gizleme). component : genel bileşenler (düğme, alan, kart, rozet, not, çekmece...). domain : Roots & Talks'a özgü bileşenler (öğretmen hikâyesi, çocuk profili, öğrenme yolculuğu, gelişim adımı, tanışma kartı...). page : sayfa şablonu yerleşimleri (kabuk, pazarlama sayfası, panel). util : son çare yardımcıları. Yeni kodda kullanılmaz. @layer sırası bağlayıcıdır: aşağıdaki katman yukarıdakini ezer. Bu sayede "hangi CSS dosyası alfabetik olarak sonra geliyor" kazası tasarımı belirlemez. KURALLAR -------- 1. Bileşen CSS'i ham renk yazmaz. Yalnız semantic token okur. 2. Dokunma alanı ürün standardı 44 px, rahat hedef 48 px. WCAG 2.2 asgarisi 24x24'tür; çocuk ve mobil kullanım nedeniyle daha yükseği seçilmiştir. 3. Mobile-first: taban stiller telefon içindir, min-width ile büyütülür. 4. Mantıksal özellikler (inline/block) kullanılır; Arapça (rtl) aynı dosyayla çalışır. 5. Renk tek başına bilgi taşımaz; durum her zaman ikon veya metinle birlikte verilir. Renk değerlerinin kaynağı ve ölçülmüş kontrast oranları: docs/DESIGN_TOKENS.md Sistemin kullanımı ve bileşen sözleşmeleri: docs/DESIGN_SYSTEM.md ============================================================================= */ @layer rt.reset, rt.foundation, rt.semantic, rt.primitive, rt.component, rt.domain, rt.page, rt.util; /* Düğmelerin dolan dairesi (rt.component .rt-btn::after) bu kayıtlı özelliğin geçişiyle büyür. Kayıt katman dışında durur: @property katmanlanmaz. Destek yoksa daire geçişsiz dolar. */ @property --rt-bloom { syntax: ""; inherits: false; initial-value: 0%; } @layer rt.foundation { /* YAZI TİPİ (Owner 2026-09-12: "fontu da Novakid'in fontundan yap ya da ona yakın"). Novakid'in fontu Mikado'dur ve ticari lisanslıdır; yerine biçim olarak en yakın ÜCRETSİZ karşılık olan Nunito kullanılır (SIL Open Font License 1.1 — web'de gömme ve barındırma serbest). Dosyalar KENDİ SUNUCUMUZDADIR: Google Fonts'a istek gitmez, ziyaretçinin IP'si üçüncü tarafa taşınmaz (CSP ve mahremiyet kuralı). İki alt küme: latin + latin-ext (Türkçe ş/ğ/ı/İ latin-ext'te). Değişken ağırlık (400-800) tek dosyada; toplam ~75 KB, başarım bütçesinin içinde. */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/nunito-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+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: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/nunito-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; } } /* ============================================================================= 1. FOUNDATION — ham ölçekler, anlam yok ============================================================================= */ @layer rt.foundation { :root { /* --- Renk ölçeği ---------------------------------------------------- PALET (Owner 2026-09-12, birebir: "site renklerini aynı onlar gibi kullan. aynı renkleri"). Tonlar örnekten ESİNLENİR ama aynısı DEĞİLDİR (Owner 2026-09-12: "çalmış gibi olmayalım…`r`n daha mükemmel bir ton seç"): mor yerine İNDİGO #3B2E9E — markanın kendi lacivertine (#2A3E8F) komşu olduğu için logo ve site aynı ailede konuşur; yeşil ise neon #79FD7F yerine #74E88A — biraz daha sıcak ve daha az "oyun konsolu", koyu indigo yazıyla AA kontrastı korur. Eski ölçüm: mor #4221B8 / #2E1781, parlak yeşil #79FD7F, açık mavi yüzey #E1F3FE, metin #2C2A33. Anlam katmanı değişmediği için tüm sayfalar döner. Marka LOGOSU kendi renklerini korur; o bir görseldir. */ --rt-c-navy: #3B2E9E; --rt-c-navy-deep: #281E73; --rt-c-navy-tint: #E8ECFD; --rt-c-navy-on-dark: #CBD2FA; /* Pembe ve altın markanın kendi renkleridir ve KULLANILIR (Owner 2026-09-12: "pembeyi de kullanmalıyız biz. goldu da"); tonları yeni palete göre ayarlandı. Parlak yeşil ayrı bir token'dır (--rt-c-lime) ve zemin/şerit aksanı olarak kullanılır. */ --rt-c-coral: #D94A7E; --rt-c-coral-deep: #B93867; --rt-c-coral-tint: #FCE6EF; --rt-c-gold: #E0A93B; --rt-c-gold-deep: #A97717; /* Küçük altın metin için mürekkep tonu (2026-09-14 denetimi): #A97717 açık zeminde 12 px kalın yazıda 3.71:1 kalıyordu (AA 4.5:1). Bu ton #F6F8FF üzerinde 6.3:1, beyazda 6.6:1 okunur. */ --rt-c-gold-ink: #7A5610; --rt-c-gold-tint: #FCF0DC; --rt-c-green: #2E7D46; --rt-c-lime: #74E88A; --rt-c-lime-deep: #4CCB66; --rt-c-green-tint: #E6FBEA; --rt-c-red: #B3261E; --rt-c-red-tint: #F8E3E1; --rt-c-cream: #F6F8FF; --rt-c-cream-deep: #FFFFFF; --rt-c-white: #FFFFFF; --rt-c-ink: #2C2A33; --rt-c-ink-muted: #5A5650; --rt-c-line: #D9DEF2; --rt-c-line-strong: #8F877A; /* --- Tipografi ölçeği ------------------------------------------------ */ /* Sistem yığını: dış font isteği yok. Gerekçe: CSP, hız ve mahremiyet (Google Fonts isteği ziyaretçinin IP'sini üçüncü tarafa taşır). */ --rt-f-body: "Nunito", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --rt-f-display: "Nunito", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --rt-f-2xs: 0.6875rem; --rt-f-xs: 0.75rem; --rt-f-sm: 0.875rem; --rt-f-md: 1rem; --rt-f-lg: 1.125rem; --rt-f-xl: 1.375rem; --rt-f-2xl: 1.75rem; --rt-f-3xl: 2.125rem; --rt-f-4xl: 2.75rem; --rt-lh-tight: 1.2; --rt-lh-snug: 1.35; --rt-lh-normal: 1.6; --rt-fw-regular: 400; --rt-fw-medium: 500; --rt-fw-bold: 700; /* --- Boşluk ölçeği (4 px tabanı) ------------------------------------- */ --rt-sp-0: 0; --rt-sp-1: 0.25rem; --rt-sp-2: 0.5rem; --rt-sp-3: 0.75rem; --rt-sp-4: 1rem; --rt-sp-5: 1.5rem; --rt-sp-6: 2rem; --rt-sp-7: 3rem; --rt-sp-8: 4rem; --rt-sp-9: 6rem; /* --- Biçim ------------------------------------------------------------ */ --rt-rd-sm: 6px; --rt-rd-md: 12px; --rt-rd-lg: 20px; --rt-rd-pill: 999px; --rt-el-1: 0 1px 2px rgba(31, 58, 104, 0.06), 0 1px 3px rgba(31, 58, 104, 0.08); --rt-el-2: 0 4px 12px rgba(31, 58, 104, 0.08), 0 2px 4px rgba(31, 58, 104, 0.06); --rt-el-3: 0 16px 40px rgba(31, 58, 104, 0.14); /* --- Hareket ---------------------------------------------------------- */ --rt-mo-fast: 120ms; --rt-mo-base: 160ms; --rt-mo-slow: 280ms; --rt-mo-ease: cubic-bezier(0.2, 0, 0.2, 1); /* --- Katman sırası ---------------------------------------------------- */ --rt-z-sticky: 100; --rt-z-drawer: 200; --rt-z-modal: 300; --rt-z-toast: 400; /* --- Kırılım noktaları (belge amaçlı; @media bunları okuyamaz) --------- */ --rt-bp-sm: 480px; --rt-bp-md: 720px; --rt-bp-lg: 960px; --rt-bp-xl: 1200px; } } /* ============================================================================= 2. SEMANTIC — rol. Bileşenler YALNIZ bu katmanı okur. ============================================================================= */ @layer rt.semantic { :root { /* Yüzey */ --rt-surface-default: var(--rt-c-white); --rt-surface-page: var(--rt-c-cream); --rt-surface-sunken: var(--rt-c-cream-deep); --rt-surface-inverse: var(--rt-c-navy); --rt-surface-accent: var(--rt-c-navy-tint); /* Metin */ --rt-text-primary: var(--rt-c-ink); --rt-text-secondary: var(--rt-c-ink-muted); --rt-text-heading: var(--rt-c-navy); --rt-text-on-inverse: var(--rt-c-white); --rt-text-on-inverse-muted: var(--rt-c-navy-on-dark); /* Bağlantı ve sessiz eylem MOR: parlak yeşil beyaz üstünde okunmaz, yalnız ZEMİN olarak kullanılır. */ --rt-text-link: var(--rt-c-coral-deep); /* Eylem */ /* BİRİNCİL EYLEM (Owner 2026-09-12: "butonlar novakiddekiyle aynı renk olsun. bu bir pazarlama stratejisi"): parlak yeşil zemin + koyu mor yazı, hap biçimli. Ölçüler örnekten alındı: yükseklik 52 px, yazı 18 px. Pembe site içinde aksan olarak kullanılmaya devam eder. */ --rt-action-primary-bg: var(--rt-c-lime); --rt-action-primary-bg-hover: var(--rt-c-lime-deep); --rt-action-primary-text: var(--rt-c-navy-deep); --rt-action-secondary-bg: var(--rt-c-navy); --rt-action-secondary-bg-hover: var(--rt-c-navy-deep); --rt-action-secondary-text: var(--rt-c-white); --rt-action-quiet-text: var(--rt-c-navy); --rt-action-quiet-bg-hover: var(--rt-c-navy-tint); --rt-action-danger-bg: var(--rt-c-red); --rt-action-danger-text: var(--rt-c-white); /* DOLAN DAİRE (düğme üzerine gelme): alttan büyüyen dairenin rengi ve üstündeki yazı rengi (rt.component .rt-btn::after). */ --rt-action-bloom: #FFDD33; --rt-action-bloom-text: var(--rt-c-navy-deep); --rt-action-outline-bloom: var(--rt-c-navy); --rt-action-outline-bloom-text: var(--rt-c-white); --rt-action-quiet-bloom: var(--rt-c-navy-tint); /* Durum — her zaman ikon/metinle birlikte kullanılır */ --rt-status-success-fg: var(--rt-c-green); --rt-status-success-bg: var(--rt-c-green-tint); /* gold-deep (#A97717) sarı zeminde ~3,5:1'di: 12 px rozet yazısı WCAG AA'yı geçmiyordu (panel entegrasyon denetimi C3, 2026-09-15). gold-ink ~5,9:1. */ --rt-status-warning-fg: var(--rt-c-gold-ink); --rt-status-warning-bg: var(--rt-c-gold-tint); --rt-status-error-fg: var(--rt-c-red); --rt-status-error-bg: var(--rt-c-red-tint); --rt-status-info-fg: var(--rt-c-navy); --rt-status-info-bg: var(--rt-c-navy-tint); /* Öğrenme — stratejinin "learning/progress" anlamsal grubu. Gelişim mercan DEĞİLDİR: mercan eylem rengidir, ilerleme yeşildir. */ --rt-learning-progress-fg: var(--rt-c-green); --rt-learning-progress-track: var(--rt-c-green-tint); --rt-learning-milestone-fg: var(--rt-c-gold-deep); --rt-learning-milestone-bg: var(--rt-c-gold-tint); --rt-learning-upcoming-fg: var(--rt-c-navy); --rt-learning-upcoming-bg: var(--rt-c-navy-tint); /* Çizgi ve odak */ --rt-border-subtle: var(--rt-c-line); --rt-border-strong: var(--rt-c-line-strong); --rt-border-focus: var(--rt-c-navy); --rt-focus-ring-width: 3px; --rt-focus-ring-offset: 2px; /* Dekoratif — altın yalnız çizgi/zemin olarak, metin rengi olarak asla */ --rt-accent-rule: var(--rt-c-gold); /* Kalem çizgisi vurgusu (.rt-mark) ve dokunma hissi veren düğmenin konturu/sert gölgesi (.rt-btn--tactile) — 2026-09-13 görsel yön. Açık zeminde mercan, koyu zeminde lime (aşağıda). */ --rt-ink-mark: var(--rt-c-coral); /* Başlık kalem çizgisinin YOĞUN MÜREKKEPLİ başlangıcı (PenLine v8 "mürekkep"; Owner 2026-09-18, birebir: "C. Mürekkep hissi. ve sondaki inceliş çok iyi."): gövdenin ilk %18–26'sı bu tonun --rt-ink-mark ile karışımından akar (renk, kalınlık değil). Koyu kuşakta lime-deep (aşağıdaki koyu yüzey blokları). */ --rt-ink-mark-deep: var(--rt-c-coral-deep); --rt-action-ink: var(--rt-c-navy-deep); /* Dokunsal düğmenin sert gölgesi: açık zeminde koyu indigo; koyu yüzeyler aşağıda kendi tonunu verir (lacivert kuşakta lacivert gölge kayboluyordu — 2026-09-14 inceleme bulgusu). */ --rt-action-shadow: var(--rt-action-ink); /* MARKA ÇİZİM AİLESİ (_c/doodle.php, .rt-doodle — 2026-09-14): TEK KALEM (4 px) ve dört renk rolü. Koyu kuşakta ana çizgi lime olur (aşağıdaki koyu yüzey bloğu). KURAL DEĞİŞTİ (2026-09-18): başlık vurgusu (.rt-mark) artık bu kalemi KULLANMAZ. Owner karşılaştırma sayfasında C adayını seçti (birebir: "C. Mürekkep hissi. ve sondaki inceliş çok iyi."): başlık kalemi --rt-mark-pen'dir, orta uçlu jel kalem — masaüstünde 3 px, 400 px ve altında 2,5 px, arada akıcı. Çizim ailesi (yol, ok, balon, arka plan çizimleri) 4 px kalemini korur. */ --rt-doodle-pen: 4px; --rt-doodle-pen-sm: 2.5px; --rt-mark-pen: clamp(2.5px, 1.5px + 0.25vw, 3px); --rt-doodle-ink: var(--rt-c-navy-deep); --rt-doodle-accent: var(--rt-c-coral); --rt-doodle-leaf: var(--rt-c-lime); --rt-doodle-sun: var(--rt-c-gold); --rt-doodle-paper: var(--rt-c-white); --rt-doodle-word: var(--rt-c-navy-deep); /* Bileşenlerin daha önce ham renk okuduğu yerlerin anlamsal karşılıkları. Kural 1 (bileşen yalnız semantic okur) 2026-09-11 incelemesinde üç yerde ihlal ediliyordu; bu token'lar o ihlali kapatır. */ --rt-text-eyebrow: var(--rt-c-gold-ink); --rt-text-required: var(--rt-c-coral-deep); /* Canlı/çevrim içi durum her panelde yeşildir. Pembe marka aksanı durum anlamı taşımaz. */ --rt-status-live-fg: var(--rt-c-green); --rt-status-live-bg: var(--rt-c-green-tint); --rt-scrim: rgba(29, 29, 29, 0.5); --rt-skeleton-shine: rgba(255, 255, 255, 0.65); /* Koyu yüzey üzerindeki etkileşim ve çizgi; video kapağı karartması (kamu fazı 2026-09-11). */ --rt-hover-on-inverse: rgba(255, 255, 255, 0.12); --rt-border-on-inverse: rgba(255, 255, 255, 0.18); --rt-scrim-soft: rgba(29, 29, 29, 0.55); /* Dokunma hedefi — ürün standardı. WCAG 2.2 SC 2.5.8 asgarisi 24 px'dir; çocuk ve mobil kullanım nedeniyle 44/48 seçilmiştir. */ --rt-target-min: 44px; --rt-target-comfort: 48px; /* Yerleşim ölçüleri */ --rt-measure: 68ch; --rt-container-max: 1180px; --rt-container-narrow: 760px; --rt-header-height: 64px; } @media (min-width: 960px) { :root { --rt-header-height: 72px; } } /* Koyu yüzeyde odak halkası. Varsayılan odak rengi navy'dir; navy zemin üzerinde oranı 1:1'dir ve halka görünmez (WCAG 2.2 SC 2.4.7, 1.4.11). Koyu yüzeylerde beyaz kullanılır: navy üzerinde 11.27:1. */ .rt-footer, .rt-section--inverse, .rt-teachers-band--nk, [data-rt-surface="inverse"] { --rt-border-focus: var(--rt-c-white); /* Koyu kuşakta vurgu çizgisi lime: mercan lacivert üstünde 2.6:1 ile sönük kalır, lime 9.9:1. Yoğun başlangıç lime-deep (PenLine v8; lacivert hero'da 8× büyütmede mürekkep gibi okunduğu görüldü, 2026-09-18). */ --rt-ink-mark: var(--rt-c-lime); --rt-ink-mark-deep: var(--rt-c-lime-deep); /* Koyu yüzeyde birincil düğmenin sert gölgesi yarı saydam beyaz (alt bilgiyle aynı). */ --rt-action-shadow: rgba(255, 255, 255, 0.34); /* Çizim ailesi koyu kuşakta: ana çizgi lime olur; balon içi beyaz, balon yazısı koyu indigo kalır. */ --rt-doodle-ink: var(--rt-c-lime); } /* Yüksek kontrast tercihi: çizgileri güçlendir, gölgeyi kaldır. */ @media (prefers-contrast: more) { :root { --rt-border-subtle: var(--rt-c-line-strong); --rt-el-1: none; --rt-el-2: none; --rt-el-3: 0 0 0 1px var(--rt-c-ink); } } } /* ============================================================================= 3. RESET — yalnız .rt ağacı içinde. Motorun sayfalarına dokunmaz. ============================================================================= */ @layer rt.reset { .rt *, .rt *::before, .rt *::after { box-sizing: border-box; } .rt { margin: 0; background: var(--rt-surface-page); color: var(--rt-text-primary); font-family: var(--rt-f-body); font-size: var(--rt-f-md); line-height: var(--rt-lh-normal); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } .rt h1, .rt h2, .rt h3, .rt h4, .rt h5, .rt h6 { margin: 0; color: var(--rt-text-heading); font-weight: var(--rt-fw-bold); line-height: var(--rt-lh-tight); text-wrap: balance; } .rt h1 { font-size: var(--rt-f-3xl); letter-spacing: -0.02em; } .rt h2 { font-size: var(--rt-f-2xl); letter-spacing: -0.01em; } .rt h3 { font-size: var(--rt-f-xl); } .rt h4 { font-size: var(--rt-f-lg); } .rt h5, .rt h6 { font-size: var(--rt-f-md); } @media (min-width: 720px) { .rt h1 { font-size: var(--rt-f-4xl); } .rt h2 { font-size: var(--rt-f-3xl); } } .rt p, .rt ul, .rt ol, .rt figure { margin: 0; } .rt ul, .rt ol { padding-inline-start: 1.2em; } .rt a { color: var(--rt-text-link); text-decoration: none; } .rt a:hover { text-decoration: underline; } .rt img, .rt svg, .rt video { max-width: 100%; height: auto; display: block; } /* Tek odak kuralı. Motorun altı ayrı "outline: none" kuralı bu ağaca ulaşmaz, çünkü .rt ağacı motorun CSS paketini hiç yüklemez. */ .rt :focus-visible { outline: var(--rt-focus-ring-width) solid var(--rt-border-focus); outline-offset: var(--rt-focus-ring-offset); border-radius: var(--rt-rd-sm); } /* WCAG 2.2 SC 2.4.11 Focus Not Obscured: yapışkan başlık odaklanan ögeyi örtmesin diye kaydırma payı bırakılır. */ .rt [id], .rt a, .rt button, .rt input, .rt select, .rt textarea, .rt summary, .rt [tabindex] { scroll-margin-block-start: calc(var(--rt-header-height) + var(--rt-sp-4)); } @media (prefers-reduced-motion: reduce) { /* .rt-btn ayrıca: .rt adasının kendisi olan ya da adanın dışında çizilen düğmeler (panel) de hareketsiz kalsın. */ .rt *, .rt *::before, .rt *::after, .rt-btn, .rt-btn::before, .rt-btn::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } } /* ============================================================================= 4. PRIMITIVE — yapı taşları ============================================================================= */ @layer rt.primitive { .rt-container { width: 100%; max-width: var(--rt-container-max); margin-inline: auto; padding-inline: var(--rt-sp-4); } .rt-container--narrow { max-width: var(--rt-container-narrow); } @media (min-width: 720px) { .rt-container { padding-inline: var(--rt-sp-5); } } .rt-section { padding-block: var(--rt-sp-7); } .rt-section--tight { padding-block: var(--rt-sp-5); } .rt-section--surface { background: var(--rt-surface-default); } .rt-section--sunken { background: var(--rt-surface-sunken); } .rt-section--inverse { background: var(--rt-surface-inverse); color: var(--rt-text-on-inverse); } .rt-section--inverse :is(h1, h2, h3, h4) { color: var(--rt-text-on-inverse); } @media (min-width: 960px) { .rt-section { padding-block: var(--rt-sp-8); } .rt-section--tight { padding-block: var(--rt-sp-6); } } .rt-stack { display: flex; flex-direction: column; } .rt-stack--1 { gap: var(--rt-sp-1); } .rt-stack--2 { gap: var(--rt-sp-2); } .rt-stack--3 { gap: var(--rt-sp-3); } .rt-stack--4 { gap: var(--rt-sp-4); } .rt-stack--5 { gap: var(--rt-sp-5); } .rt-stack--6 { gap: var(--rt-sp-6); } .rt-row { display: flex; align-items: center; gap: var(--rt-sp-3); flex-wrap: wrap; } .rt-row--between { justify-content: space-between; } .rt-row--end { justify-content: flex-end; } .rt-row--start { align-items: flex-start; } .rt-row--nowrap { flex-wrap: nowrap; } /* Mobile-first ızgara: taban tek sütun, genişledikçe açılır. */ .rt-grid { display: grid; gap: var(--rt-sp-5); grid-template-columns: minmax(0, 1fr); } @media (min-width: 720px) { .rt-grid--2, .rt-grid--3, .rt-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .rt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .rt-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .rt-prose { max-width: var(--rt-measure); } .rt-prose > * + * { margin-block-start: var(--rt-sp-4); } /* Bölünmemesi gereken kısa ifade (ör. "4–17" yaş aralığı; tarayıcı uzun tireden sonra satır kırabilir). */ .rt-nowrap { white-space: nowrap; } /* Görsel gizleme: ekran okuyucu okur, göz görmez. Odaklanınca görünür hale gelmesi gereken bağlantılar için --focusable kullanılır. */ .rt-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .rt-sr-only--focusable:focus, .rt-sr-only--focusable:focus-visible { position: fixed; inset-block-start: var(--rt-sp-3); inset-inline-start: var(--rt-sp-3); z-index: calc(var(--rt-z-toast) + 1); width: auto; height: auto; padding: var(--rt-sp-3) var(--rt-sp-4); margin: 0; overflow: visible; clip-path: none; background: var(--rt-surface-default); color: var(--rt-text-heading); border-radius: var(--rt-rd-md); box-shadow: var(--rt-el-3); font-weight: var(--rt-fw-bold); } /* Görünürlük yardımcıları (.rt-hide-sm / .rt-hide-lg) rt.util katmanındadır; gerekçe orada. */ } /* ============================================================================= 5. COMPONENT — genel bileşenler ============================================================================= */ @layer rt.component { /* --- Tipografi bileşenleri ------------------------------------------- */ .rt-display { font-family: var(--rt-f-display); font-weight: var(--rt-fw-bold); } .rt-eyebrow { font-size: var(--rt-f-xs); font-weight: var(--rt-fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rt-text-eyebrow); } /* Giriş metni ölçüye bağlıdır (2026-09-14 denetimi: sayfa başlarında 84–87 karakterlik satırlar ölçüldü). */ .rt-lead { font-size: var(--rt-f-lg); line-height: var(--rt-lh-snug); color: var(--rt-text-secondary); max-inline-size: var(--rt-measure); } .rt-muted { color: var(--rt-text-secondary); } /* Sessiz not paragrafları da ölçüye bağlıdır (kapsayıcı boyunca 1.100 px'lik tek satırlar ölçüldü). */ p.rt-muted { max-inline-size: var(--rt-measure); } .rt-small { font-size: var(--rt-f-sm); } .rt-center { text-align: center; } .rt-rule { inline-size: 48px; block-size: 3px; border: 0; border-radius: var(--rt-rd-pill); background: var(--rt-accent-rule); margin: 0; } /* --- Düğme ------------------------------------------------------------ */ /* Düğme ölçüleri örnekteki gibidir (Owner 2026-09-12): 52 px yükseklik, 18 px yazı, hap biçim. */ .rt-btn { --rt-btn-min: 52px; display: inline-flex; align-items: center; justify-content: center; gap: var(--rt-sp-2); min-block-size: var(--rt-btn-min); min-inline-size: var(--rt-btn-min); padding: var(--rt-sp-2) var(--rt-sp-5); border: 2px solid transparent; border-radius: var(--rt-rd-pill); font: inherit; /* 18 px örnekteki ölçüdür; 320 px'lik ekranda uzun Türkçe etiket kutudan taşıyordu, bu yüzden dar ekranda bir tık küçülür ve düğme kutusuna sığar. */ font-size: clamp(16px, 0.9rem + 0.5vw, 18px); max-inline-size: 100%; font-weight: var(--rt-fw-bold); line-height: var(--rt-lh-snug); text-align: center; /* Türkçe etiketler İngilizceden uzundur; sarmalamaya izin verilir ve yükseklik min-block-size ile korunur. nowrap kullanılmaz. */ white-space: normal; cursor: pointer; text-decoration: none; transition: background-color var(--rt-mo-base) var(--rt-mo-ease), border-color var(--rt-mo-base) var(--rt-mo-ease), color var(--rt-btn-label-t, var(--rt-mo-base)) var(--rt-mo-ease); } .rt-btn:hover { text-decoration: none; } .rt-btn[disabled], .rt-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } /* BİRİNCİL DÜĞME SİTE GENELİNDE BASILABİLİR (2026-09-14 tasarım turu, Owner standardı: "Butonlarda kontrollü kontur ve gölgeyle basılabilirlik hissi oluştur … tutarlı uygula"): lime dolgu + koyu indigo kontur + 3 px sert gölge; üzerine gelince hafif yükselir, basınca oturur (hareket tercihi açıkken). İkincil/çerçeveli düğmeler düz kalır — görsel ağırlık hiyerarşisi korunur. Tıklama alanı sabittir. */ .rt-btn--primary { background: var(--rt-action-primary-bg); color: var(--rt-action-primary-text); border-color: var(--rt-action-ink); box-shadow: 3px 3px 0 0 var(--rt-action-shadow); transition: background-color var(--rt-mo-base) var(--rt-mo-ease), color var(--rt-btn-label-t, var(--rt-mo-base)) var(--rt-mo-ease), transform var(--rt-mo-fast) var(--rt-mo-ease), box-shadow var(--rt-mo-fast) var(--rt-mo-ease); } .rt-btn--primary:hover { background: var(--rt-action-primary-bg-hover); color: var(--rt-action-primary-text); } @media (prefers-reduced-motion: no-preference) { .rt-btn--primary:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 var(--rt-action-shadow); } .rt-btn--primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--rt-action-shadow); } .rt-btn--primary[disabled]:hover, .rt-btn--primary[aria-disabled="true"]:hover { transform: none; box-shadow: 3px 3px 0 0 var(--rt-action-shadow); } } .rt-btn--secondary { background: var(--rt-action-secondary-bg); color: var(--rt-action-secondary-text); } .rt-btn--secondary:hover { background: var(--rt-action-secondary-bg-hover); color: var(--rt-action-secondary-text); } .rt-btn--outline { background: transparent; color: var(--rt-action-quiet-text); border-color: var(--rt-action-secondary-bg); } .rt-btn--outline:hover { background: var(--rt-action-quiet-bg-hover); } .rt-btn--quiet { background: transparent; color: var(--rt-action-quiet-text); padding-inline: var(--rt-sp-3); } .rt-btn--quiet:hover { background: var(--rt-action-quiet-bg-hover); } .rt-btn--danger { background: var(--rt-action-danger-bg); color: var(--rt-action-danger-text); } /* Koyu yüzeyde ikincil eylem (kapanış bandı). */ .rt-btn--inverse { background: transparent; color: var(--rt-text-on-inverse); border-color: var(--rt-text-on-inverse); } .rt-btn--inverse:hover { background: var(--rt-hover-on-inverse); color: var(--rt-text-on-inverse); } /* DÜĞME DURUMLARI — TUTARLI BASILABİLİRLİK (Owner brief 2026-09-14, birebir: "Butonlarda kontrollü kontur ve gölgeyle basılabilirlik hissi oluştur. Üzerine gelme, basılma, seçili ve klavye odağı durumlarını tutarlı uygula.") Birincil düğme dolgulu + 3 px sert gölgedir. İkincil, çerçeveli ve koyu zemin düğmeleri AYNI dili daha hafif taşır: kontur + 2 px sert gölge; görsel ağırlık sırası dolguyla korunur. Üzerine gelince 1 px yükselir, basınca oturur; seçili düğme (aria-pressed / aria-current) oturmuş kalır. Odak halkası temadaki TEK :focus-visible kuralıdır, burada yeniden yazılmaz. Hareket yalnız prefers-reduced-motion: no-preference içindedir. */ .rt-btn--secondary, .rt-btn--outline, .rt-btn--inverse { box-shadow: 2px 2px 0 0 var(--rt-action-shadow); transition: background-color var(--rt-mo-base) var(--rt-mo-ease), color var(--rt-btn-label-t, var(--rt-mo-base)) var(--rt-mo-ease), border-color var(--rt-mo-base) var(--rt-mo-ease), transform var(--rt-mo-fast) var(--rt-mo-ease), box-shadow var(--rt-mo-fast) var(--rt-mo-ease); } .rt-btn--secondary { border-color: var(--rt-action-ink); } /* Sessiz düğme (.rt-btn--quiet) konturu ve gölgesi olmayan metin düğmesidir; seçili hâli kendi rengindedir. */ .rt-btn:not(.rt-btn--quiet)[aria-pressed="true"], .rt-btn:not(.rt-btn--quiet)[aria-current="page"] { box-shadow: 1px 1px 0 0 var(--rt-action-shadow); } @media (prefers-reduced-motion: no-preference) { .rt-btn--secondary:hover, .rt-btn--outline:hover, .rt-btn--inverse:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 var(--rt-action-shadow); } .rt-btn--secondary:active, .rt-btn--outline:active, .rt-btn--inverse:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 var(--rt-action-shadow); } .rt-btn[aria-pressed="true"], .rt-btn[aria-current="page"] { transform: translate(1px, 1px); } .rt-btn--secondary[disabled]:hover, .rt-btn--outline[disabled]:hover, .rt-btn--inverse[disabled]:hover { transform: none; box-shadow: 2px 2px 0 0 var(--rt-action-shadow); } } /* Metin bağlantısı + yön oku. Dokunma alanı düğmeyle aynıdır. */ .rt-link-arrow { display: inline-flex; align-items: center; gap: var(--rt-sp-2); min-block-size: var(--rt-target-min); font-weight: var(--rt-fw-bold); color: var(--rt-text-link); } [dir="rtl"] .rt-icon--directional { transform: scaleX(-1); } /* --- Sayfa yolu ---------------------------------------------------------- */ .rt-breadcrumb__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--rt-sp-2); font-size: var(--rt-f-sm); color: var(--rt-text-secondary); } .rt-breadcrumb__item + .rt-breadcrumb__item::before { content: "/"; margin-inline-end: var(--rt-sp-2); color: var(--rt-border-strong); } .rt-breadcrumb__link { display: inline-flex; align-items: center; min-block-size: var(--rt-target-min); } /* --- Bölüm başlığı ---------------------------------------------------- */ .rt-section-head { display: flex; flex-direction: column; gap: var(--rt-sp-3); max-inline-size: 48rem; } .rt-section-head--center { margin-inline: auto; text-align: center; align-items: center; } .rt-section-head__title { font-family: var(--rt-f-display); } /* --- Soru ve bilgi kutuları ---------------------------------------------- */ .rt-faq { display: flex; flex-direction: column; gap: var(--rt-sp-3); } .rt-faq__item { background: var(--rt-surface-default); border: 1px solid var(--rt-border-subtle); border-radius: var(--rt-rd-md); } .rt-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--rt-sp-3); min-block-size: var(--rt-target-comfort); padding: var(--rt-sp-3) var(--rt-sp-4); cursor: pointer; list-style: none; font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-faq__q::-webkit-details-marker { display: none; } .rt-faq__q .rt-icon { transition: transform var(--rt-mo-base) var(--rt-mo-ease); } .rt-faq__item[open] .rt-faq__q .rt-icon { transform: rotate(180deg); } .rt-faq__a { padding: 0 var(--rt-sp-4) var(--rt-sp-4); } .rt-callout { display: flex; flex-direction: column; gap: var(--rt-sp-3); padding: var(--rt-sp-5); background: var(--rt-surface-default); border: 1px solid var(--rt-border-subtle); border-inline-start: 4px solid var(--rt-accent-rule); border-radius: var(--rt-rd-lg); } .rt-callout__title { font-size: var(--rt-f-xl); } /* Karar soruları düz bir listedir: tek altın çizgi listenin kenarında durur. Eskiden her soru beyaz bir kutuydu ve mobilde tıklanabilir seçenek gibi okunuyordu (2026-09-14 denetimi). */ .rt-questions { list-style: none; margin: 0; padding: 0; padding-inline-start: var(--rt-sp-4); display: flex; flex-direction: column; gap: var(--rt-sp-2); border-inline-start: 3px solid var(--rt-accent-rule); } .rt-questions__item { color: var(--rt-text-primary); } .rt-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--rt-sp-2); } .rt-chip { display: inline-flex; align-items: center; padding: var(--rt-sp-1) var(--rt-sp-3); border-radius: var(--rt-rd-pill); background: var(--rt-learning-upcoming-bg); color: var(--rt-learning-upcoming-fg); font-size: var(--rt-f-sm); font-weight: var(--rt-fw-bold); } /* Küçük düğme GÖRSEL olarak küçüktür, dokunma alanı küçülmez: 44 px korunur, yalnız iç boşluk ve yazı ölçüsü azalır. */ .rt-btn--sm { padding-inline: var(--rt-sp-4); font-size: var(--rt-f-xs); } .rt-btn--lg { --rt-btn-min: 52px; padding-inline: var(--rt-sp-6); font-size: var(--rt-f-md); } .rt-btn--block { inline-size: 100%; } /* --- Dokunma hissi veren düğme (.rt-btn--tactile) — 2026-09-13 görsel yön ------------------- Önemli eylemler için değişke: kontur + SERT (bulanık olmayan) gölge ile basılabilir görünür. Üzerine gelince yüzey hafif yükselir ve gölge uzar; varsa yön oku kısa bir adım atar. Basınca yüzey oturur ve gölge kısalır. Tıklama alanı değişmez: hareket yalnız transform iledir. Her düğmeye verilmez (görsel ağırlık eşitlenmesin); pasif hâlde yükselme yok, gölge kısa. Hareketi azalt tercihinde yüzey yerinde durur, yalnız renk değişir. */ .rt-btn--tactile { border-color: var(--rt-action-ink); box-shadow: 4px 4px 0 0 var(--rt-action-ink); transition: background-color var(--rt-mo-base) var(--rt-mo-ease), color var(--rt-btn-label-t, var(--rt-mo-base)) var(--rt-mo-ease), transform var(--rt-mo-fast) var(--rt-mo-ease), box-shadow var(--rt-mo-fast) var(--rt-mo-ease); } .rt-btn--tactile .rt-icon--directional { transition: transform var(--rt-mo-fast) var(--rt-mo-ease); } .rt-btn--tactile[disabled], .rt-btn--tactile[aria-disabled="true"] { box-shadow: 2px 2px 0 0 var(--rt-action-ink); } /* Yükselme/oturma ve ok adımı YALNIZ hareket tercihi açıkken: "hareketi azalt"ta yüzey de gölge de yerinde durur, yalnız renk değişir (inceleme 2026-09-13: gölge tek başına da hareket sayılır). RTL: dönüşümler sağdan sola uygulanır; ayna + (+3px) birleşimi oku SOLA taşır. */ @media (prefers-reduced-motion: no-preference) { .rt-btn--tactile:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--rt-action-ink); } .rt-btn--tactile:hover .rt-icon--directional { transform: translateX(3px); } [dir="rtl"] .rt-btn--tactile:hover .rt-icon--directional { transform: scaleX(-1) translateX(3px); } .rt-btn--tactile:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 0 var(--rt-action-ink); } .rt-btn--tactile[disabled]:hover, .rt-btn--tactile[aria-disabled="true"]:hover { transform: none; box-shadow: 2px 2px 0 0 var(--rt-action-ink); } } /* --- DOLAN DAİRE: bütün düğmelerde üzerine gelme ----------------------------------------------------- Owner 2026-09-14 (birebir): "ÜCRETSİZ deneme seansı planlayın kısmındaki butonun renk değiştirme şekline bayıldım. bu kodu öğren ve tüm sitedeki butonlara bu kodu uygula." Teknik (kendi kodumuz): düğmenin içinde, alt kenarın ortasında sıfır boyutlu bir daire durur; üzerine gelince (dokunmatikte basınca, klavyede odakta) yumuşak bir eğriyle büyüyüp düğmeyi doldurur, yazı rengi dairenin rengine göre değişir. Daire z-index -1 ile yazının ALTINDA, düğmenin zemininin ÜSTÜNDEdir (isolation). Daire, düğmenin kendi yüzeyini dolduran katmanda RADYAL DEGRADE olarak büyür: düğmeye overflow verilmez (a11y.rt_btn_labels_can_wrap — uzun Türkçe etiketler sarabilmeli), kontur ve sert gölge görünür kalır. Büyüme kayıtlı --rt-bloom özelliğiyle yumuşar (@property, dosyanın başında); destek yoksa ve hareketi azalt tercihinde daire geçişsiz dolar. Dinlenirken katman görünmez (opacity), geri çekilince önce küçülür sonra söner. */ .rt-btn { position: relative; isolation: isolate; } .rt-btn::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 50% 100%, var(--rt-btn-bloom, transparent) var(--rt-bloom, 0%), transparent calc(var(--rt-bloom, 0%) + 1px)); opacity: 0; transition: --rt-bloom 520ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0s linear 520ms; } .rt-btn--primary, .rt-btn--secondary, .rt-btn--inverse { --rt-btn-bloom: var(--rt-action-bloom); } .rt-btn--outline { --rt-btn-bloom: var(--rt-action-outline-bloom); } .rt-btn--quiet { --rt-btn-bloom: var(--rt-action-quiet-bloom); } .rt-btn:focus-visible::after, .rt-btn:active::after { --rt-bloom: 101%; opacity: 1; transition: --rt-bloom 520ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0s; } .rt-btn--primary:focus-visible, .rt-btn--primary:active, .rt-btn--secondary:focus-visible, .rt-btn--secondary:active, .rt-btn--inverse:focus-visible, .rt-btn--inverse:active { color: var(--rt-action-bloom-text); } .rt-btn--outline:focus-visible, .rt-btn--outline:active { color: var(--rt-action-outline-bloom-text); } @media (hover: hover) { .rt-btn:hover::after { --rt-bloom: 101%; opacity: 1; transition: --rt-bloom 520ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0s; } .rt-btn--primary:hover, .rt-btn--secondary:hover, .rt-btn--inverse:hover { color: var(--rt-action-bloom-text); } .rt-btn--outline:hover { color: var(--rt-action-outline-bloom-text); background: transparent; } .rt-btn--quiet:hover { background: transparent; } } .rt-btn[disabled]::after, .rt-btn[aria-disabled="true"]::after { display: none; } /* YAZI HER AN OKUNUR (Owner 2026-09-17, birebir: "butonlara ilk değdiğimde önce beyaz oluyor ve hiç okunmuyor. sonradan renk ve yazılar geliyor."). Ölçüm 2026-10-01 (geçişler 20 kat yavaşlatılarak, scratchpad hover_slow/bloom_static): yazı rengi 0–160 ms'de YAVAŞÇA beyaza dönüyor, daire yazının uçlarına ~160–200 ms'de varıyordu; 40–100 ms arasında yazı açık lavanta bir ara tondaydı ve ne açık zeminde ne lacivert dairede okunuyordu (okunur nokta oranı en düşük %42). Daire alttan ortadan büyüdüğü için TEK yazı rengi her an her harfte doğru olamaz; bu yüzden: 1) yazı ara tonda beklemez: girişte rengini anında alır (--rt-btn-label-t 0; çıkışta eski 160 ms geçiş kalır); 2) yazı, dairenin renginde ince bir HALE taşır: daire henüz ulaşmamış harf eski (ya da üzerine gelince koyulaşan) zeminde de okunur, dairenin içindeki harfte hale görünmez (dairenin rengindedir). Birincil düğme de dahil: üzerine gelince zemini koyulaşır ve koyu yazı daire gelene kadar o zeminde kayboluyordu. Sessiz düğmede yazı rengi dönmez, hale yok. Hareketi azalt tercihinde daire geçişsiz dolar. */ .rt-btn:focus-visible, .rt-btn:active { --rt-btn-label-t: 0s; } .rt-btn:not(.rt-btn--quiet):is(:focus-visible, :active) { text-shadow: 0 0 1px var(--rt-btn-bloom), 0 0 2px var(--rt-btn-bloom), 0 0 3px var(--rt-btn-bloom), 0 0 5px var(--rt-btn-bloom); } @media (hover: hover) { .rt-btn:hover { --rt-btn-label-t: 0s; } .rt-btn:not(.rt-btn--quiet):hover { text-shadow: 0 0 1px var(--rt-btn-bloom), 0 0 2px var(--rt-btn-bloom), 0 0 3px var(--rt-btn-bloom), 0 0 5px var(--rt-btn-bloom); } } @media (prefers-reduced-motion: reduce) { .rt-btn::after { transition: none; } } /* --- Vurgu: kalem çizgisi (.rt-mark) — markanın imzası --------------------------------------- Bir başlıkta anlamlı ifadenin altında el çizimi hissi veren tek kalem çizgisi (tek biçim: .rt-mark--pen; eski --wave / --double / --ring varyantları 2026-09-14'te kalktı). Çizgi satır içi SVG'dir: metnin genişliğine uyar (preserveAspectRatio=none), kalınlığı ekranda sabittir (non-scaling-stroke). RtView::mark() üretir. --draw: ekrana ilk girişte bir kez çizilir; hareketi azalt tercihinde çizili gelir. Metin inline-block olduğu için vurgulu ifade satır ortasından bölünmez (altı çizili ifade tek satırda kalır); ifade en çok üç kelime tutulur, dar ekranda ölçüldü (320 px). */ /* Vurgu kendi çizgi payını AYIRIR (padding): işaretli ifade başlığın ilk ya da orta satırındaysa çizgi alt satırın harflerine binmez (inceleme 2026-09-13: İngilizce başlıkta "[[Live Turkish lessons]]" ilk satırdaydı ve çizgi "for kids" üstünden geçiyordu). Çizgi bu payın içine çizilir. */ .rt-mark { position: relative; display: inline-block; padding-block-end: 0.32em; } .rt-mark__text { position: relative; z-index: 1; } .rt-mark__ink { position: absolute; z-index: 0; pointer-events: none; overflow: visible; inset-inline: -0.06em; inset-block-end: 0; block-size: 0.36em; inline-size: calc(100% + 0.12em); /* Çizgi metinden GENİŞ olabilmelidir: sıfırlama katmanındaki `.rt svg { max-width: 100% }` onu metin genişliğine kırpıyordu ve halka son harflerin üstünden geçiyordu (2026-09-14 ekranda görüldü). */ max-inline-size: none; /* Başlık kalemi --rt-mark-pen'dir (PenLine v8: orta uçlu jel kalem, masaüstünde 3 px, telefonda 2,5 px). Çizim ailesinin 4 px kalemi (--rt-doodle-pen) artık okunmaz (Owner 2026-09-18 C seçimi; kural değişikliği rt.semantic'te). color: degrade bulunamazsa gövdenin düştüğü düz renk (RtView: stroke="url(#…) currentColor"). */ fill: none; stroke: var(--rt-ink-mark); color: var(--rt-ink-mark); stroke-width: var(--rt-mark-pen); stroke-linecap: round; stroke-linejoin: round; } .rt-mark__ink path { vector-effect: non-scaling-stroke; } /* KALKIŞTA İNCELME (Owner 2026-09-18: "sondaki inceliş çok iyi"): kuyruk aynı eğrinin dört kısa parçasıdır; her parça bir öncekinin içinden başlar ve kalem %92 → %67'ye iner (3 px → 2 px). Basamakta yalnız geniş parçanın yuvarlak ucu görünür. */ .rt-mark__ink .rt-mark__lift--1 { stroke-width: calc(var(--rt-mark-pen) * 0.92); } .rt-mark__ink .rt-mark__lift--2 { stroke-width: calc(var(--rt-mark-pen) * 0.83); } .rt-mark__ink .rt-mark__lift--3 { stroke-width: calc(var(--rt-mark-pen) * 0.75); } .rt-mark__ink .rt-mark__lift--4 { stroke-width: calc(var(--rt-mark-pen) * 0.67); } /* YOĞUN BAŞLANGIÇ (renk, kalınlık değil): gövdenin degradesi --rt-ink-mark-deep'in %70 karışımından --rt-ink-mark'a akar. color-mix bilmeyen tarayıcı düz deep tonunu alır: var() içeren geçersiz stop-color siyaha düşerdi, yedek bu yüzden @supports ile yazılır. Zorunlu renk modunda çizgi sistem metin rengidir. */ .rt-mark__ink .rt-mark__dense { stop-color: var(--rt-ink-mark-deep); } .rt-mark__ink .rt-mark__flow { stop-color: var(--rt-ink-mark); } @supports (color: color-mix(in oklab, red 50%, blue)) { .rt-mark__ink .rt-mark__dense { stop-color: color-mix(in oklab, var(--rt-ink-mark-deep) 70%, var(--rt-ink-mark)); } } @media (forced-colors: active) { .rt-mark__ink path { stroke: CanvasText; } } /* Gövde + ayrı kuyruk, çift çizgi ve halka KALDIRILDI (Owner 2026-09-14: "parçalı birleştirme gibi"); RtView::mark artık yalnız tek parça kalem çizgisini (.rt-mark--pen) üretir. */ /* BAŞLIK KALEM ÇİZGİSİ (RtView::mark, PenLine): her başlıkta başka bir el hareketi (Owner 2026-09-14: "kalemle çizilmiş gibi ama çizgi asimetrik değil, çizim asimetrik … Eğitim Ekibimiz yazısının altındaki çizgi gibi ama daha güzel"). v5–v7'nin titremesi, bastırılmış ucu ve kıvrımları KALDIRILDI (Owner 2026-09-17: "… kalem batırma kısımları çok aşırı kalın. hiç beğenmedim. pilot kalem efekti istiyorum."). PenLine v8 "mürekkep" (Owner 2026-09-18 seçimi: "C. Mürekkep hissi. ve sondaki inceliş çok iyi."): tek, sakin bir kavis; sabit gövde (--rt-mark-pen), başta yoğun mürekkep (renk), kalemin kalktığı son %8–12'de hafif incelme; titreme, damla, kıvrım yok. Hero başlığında kavis KEMERDİR (ortası yazıya doğru yukarıda, iki uç biraz aşağıda: RtView::mark(…, 'arch')); diğer başlıklarda kemer/gülümseme ve tepenin yeri (baş/orta/son) değişir. EN AZ 16 PX YÜKSEKLİK: bir birim telefonda 1,0 px, 48 px başlıkta 1,02 px, 56 px'te 1,19 px'tir. Pay (padding) kutuyla birlikte büyür (başlık altında ~3 px), çizginin metne mesafesi değişmez (0,02em). */ .rt-mark--pen { padding-block-end: max(0.38em, calc(16px + 0.04em)); } .rt-mark--pen .rt-mark__ink { block-size: max(0.34em, 16px); inset-block-end: 0.02em; } /* ÇİZİLEREK GELME: çizgi soldan sağa AÇILIR (clip-path). Kesik çizgi hilesi (stroke-dasharray + pathLength) KULLANILMAZ: esnetilmiş SVG'de non-scaling-stroke ile tarayıcı kesik uzunluğunu yanlış hesaplıyor ve başlığın altında KESİKLİ çizgi kalıyordu (Owner 2026-09-14, birebir: "başlık altı kesikli çizgi olmasın. 3 kolay adımdaki ve headırdaki. normal çizgi olsun"). Negatif iç pay yuvarlak uçların kırpılmasını önler. */ /* GÖRÜNÜNCE ÇİZİLİR (Owner 2026-09-14, birebir: "altı çizili tüm başlıklar gelirken yavaşça altının çizilişini görelim. hazır çizili karşımıza çıkmasın"): çizgi başta gizlidir; başlık ekrana girince rt.js (drawOnView) .is-drawn ekler ve kalem 1,3 saniyede soldan sağa çizer. Betik çalışmıyorsa ya da hareketi azalt tercihinde çizgi hazır çizili durur. ÖZGÜLLÜK (R1 2026-09-15): yedekler .is-drawn ve RTL kurallarını AYNI özgüllükte kapatır. Eskiden iki sınıflı yedek üç sınıflı .is-drawn kuralına yeniliyordu: hareketi azalt tercihinde de çizim oynuyordu, betiksiz RTL'de çizgi hiç görünmüyordu. */ .rt-mark--draw .rt-mark__ink { clip-path: inset(-60% 102% -60% -4%); } [dir="rtl"] .rt-mark--draw .rt-mark__ink { clip-path: inset(-60% -4% -60% 102%); } .rt-mark--draw.is-drawn .rt-mark__ink { animation: rt-mark-reveal 1300ms cubic-bezier(0.6, 0.05, 0.3, 1) 120ms forwards; } @keyframes rt-mark-reveal { to { clip-path: inset(-60% -4% -60% -4%); } } @media (scripting: none) { .rt-mark--draw .rt-mark__ink, [dir="rtl"] .rt-mark--draw .rt-mark__ink, .rt-mark--draw.is-drawn .rt-mark__ink { clip-path: none; animation: none; } } @media (prefers-reduced-motion: reduce) { .rt-mark--draw .rt-mark__ink, [dir="rtl"] .rt-mark--draw .rt-mark__ink, .rt-mark--draw.is-drawn .rt-mark__ink { clip-path: none; animation: none; } } /* --- Marka çizim ailesi (.rt-doodle, _c/doodle.php) -------------------------------------------------- Owner brief 2026-09-14: "tutarlı çizgi kalınlığı, yuvarlak uçlar, kontrollü organik eğrilik ve ortak renk ilişkileri". TEK KALEM: --rt-doodle-pen; kalınlık çizimin boyutundan bağımsızdır (non-scaling-stroke). Dört renk rolü (ink / accent / leaf / sun) rt.semantic'tedir ve koyu kuşakta kendiliğinden döner. Hepsi dekoratiftir: tıklama almaz, ekran okuyucudan gizlidir. YERLEŞİM bileşende değil bölüm stilindedir (rt.page). Not: seçici listeleri :is() ile yazılmaz (compact üreticinin virgül bölmesi :is içini kırar). */ .rt-doodle { display: block; flex: none; overflow: visible; pointer-events: none; fill: none; stroke: none; } .rt-doodle path, .rt-doodle circle, .rt-doodle ellipse, .rt-doodle rect { vector-effect: non-scaling-stroke; stroke-width: var(--rt-doodle-pen); stroke-linecap: round; stroke-linejoin: round; } .rt-doodle--sm path, .rt-doodle--sm circle, .rt-doodle--sm ellipse, .rt-doodle--sm rect { stroke-width: var(--rt-doodle-pen-sm); } .rt-doodle__ink { fill: none; stroke: var(--rt-doodle-ink); } .rt-doodle__line { fill: none; stroke: var(--rt-doodle-line, var(--rt-doodle-ink)); } .rt-doodle__dash { fill: none; stroke: var(--rt-doodle-ink); stroke-dasharray: 6 8; } .rt-doodle__accent, .rt-doodle__root { fill: none; stroke: var(--rt-doodle-accent); } .rt-doodle__leaf { fill: var(--rt-doodle-leaf); stroke: var(--rt-doodle-ink); } .rt-doodle__sun, .rt-doodle__star { fill: var(--rt-doodle-sun); stroke: var(--rt-doodle-ink); } .rt-doodle__bud { fill: var(--rt-doodle-accent); stroke: var(--rt-doodle-ink); } .rt-doodle__dot { fill: var(--rt-doodle-line, var(--rt-doodle-ink)); stroke: none; } .rt-doodle__paper { fill: var(--rt-doodle-paper); stroke: var(--rt-doodle-ink); } .rt-doodle__word { fill: var(--rt-doodle-word); stroke: none; font-family: var(--rt-f-display); font-weight: var(--rt-fw-bold); font-size: 20px; letter-spacing: 0; } .rt-doodle--leaf { --rt-doodle-line: var(--rt-doodle-leaf); } .rt-doodle--accent { --rt-doodle-line: var(--rt-doodle-accent); } .rt-doodle--sun { --rt-doodle-line: var(--rt-doodle-sun); } /* --- Rozet ------------------------------------------------------------ */ .rt-badge { display: inline-flex; align-items: center; gap: var(--rt-sp-1); padding: 2px var(--rt-sp-3); border-radius: var(--rt-rd-pill); font-size: var(--rt-f-xs); font-weight: var(--rt-fw-bold); background: var(--rt-status-info-bg); color: var(--rt-status-info-fg); } .rt-badge--age { background: var(--rt-learning-milestone-bg); color: var(--rt-learning-milestone-fg); } .rt-badge--success { background: var(--rt-status-success-bg); color: var(--rt-status-success-fg); } .rt-badge--warning { background: var(--rt-status-warning-bg); color: var(--rt-status-warning-fg); } .rt-badge--live { background: var(--rt-status-live-bg); color: var(--rt-status-live-fg); } /* --- Kart -------------------------------------------------------------- */ .rt-card { background: var(--rt-surface-default); border: 1px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); padding: var(--rt-sp-5); box-shadow: var(--rt-el-1); } .rt-card--flat { box-shadow: none; } .rt-card--interactive { transition: box-shadow var(--rt-mo-base) var(--rt-mo-ease), transform var(--rt-mo-base) var(--rt-mo-ease); } .rt-card--interactive:hover { box-shadow: var(--rt-el-2); transform: translateY(-2px); } .rt-card--interactive:focus-within { box-shadow: var(--rt-el-2); } .rt-card__media { margin: calc(var(--rt-sp-5) * -1) calc(var(--rt-sp-5) * -1) var(--rt-sp-4); border-start-start-radius: var(--rt-rd-lg); border-start-end-radius: var(--rt-rd-lg); overflow: hidden; } .rt-card__title { font-size: var(--rt-f-lg); } .rt-card__footer { margin-block-start: var(--rt-sp-4); padding-block-start: var(--rt-sp-4); border-block-start: 1px solid var(--rt-border-subtle); } /* --- Form alanı -------------------------------------------------------- */ .rt-field { display: flex; flex-direction: column; gap: var(--rt-sp-2); } .rt-field__label { font-size: var(--rt-f-sm); font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-field__hint { font-size: var(--rt-f-sm); color: var(--rt-text-secondary); } .rt-field__error { font-size: var(--rt-f-sm); color: var(--rt-status-error-fg); font-weight: var(--rt-fw-medium); } .rt-field__required { color: var(--rt-text-required); } .rt-input, .rt-select, .rt-textarea { inline-size: 100%; min-block-size: var(--rt-target-comfort); padding: var(--rt-sp-3) var(--rt-sp-4); border: 1px solid var(--rt-border-strong); border-radius: var(--rt-rd-md); background: var(--rt-surface-default); color: var(--rt-text-primary); font: inherit; transition: border-color var(--rt-mo-base) var(--rt-mo-ease), box-shadow var(--rt-mo-base) var(--rt-mo-ease); } .rt-textarea { min-block-size: 120px; resize: vertical; } .rt-input::placeholder, .rt-textarea::placeholder { color: var(--rt-text-secondary); opacity: 1; } .rt-input:focus, .rt-select:focus, .rt-textarea:focus { border-color: var(--rt-border-focus); box-shadow: 0 0 0 3px var(--rt-surface-accent); } .rt-field--invalid :is(.rt-input, .rt-select, .rt-textarea) { border-color: var(--rt-status-error-fg); background: var(--rt-status-error-bg); } /* --- Durum: boş / hata / başarı ---------------------------------------- */ .rt-state { text-align: center; padding: var(--rt-sp-7) var(--rt-sp-4); border-radius: var(--rt-rd-lg); } .rt-state__icon { inline-size: 48px; block-size: 48px; margin: 0 auto var(--rt-sp-4); color: var(--rt-text-heading); } .rt-state__title { font-size: var(--rt-f-xl); color: var(--rt-text-heading); font-weight: var(--rt-fw-bold); } .rt-state__text { margin-block-start: var(--rt-sp-2); color: var(--rt-text-secondary); } .rt-state__action { margin-block-start: var(--rt-sp-5); } .rt-state--empty { background: var(--rt-surface-sunken); border: 1px dashed var(--rt-border-subtle); } .rt-state--error { background: var(--rt-status-error-bg); } .rt-state--error :is(.rt-state__icon, .rt-state__title) { color: var(--rt-status-error-fg); } .rt-state--success { background: var(--rt-status-success-bg); } .rt-state--loading { background: var(--rt-surface-sunken); } .rt-state--success :is(.rt-state__icon, .rt-state__title) { color: var(--rt-status-success-fg); } /* --- Yükleniyor -------------------------------------------------------- */ .rt-skeleton { position: relative; overflow: hidden; border-radius: var(--rt-rd-md); background: var(--rt-surface-accent); min-block-size: 16px; } .rt-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--rt-skeleton-shine), transparent); animation: rt-shimmer 1.4s infinite; } .rt-skeleton--text { block-size: 12px; margin-block-end: var(--rt-sp-2); } .rt-skeleton--title { block-size: 24px; inline-size: 60%; } .rt-skeleton--block { block-size: 160px; } @keyframes rt-shimmer { 100% { transform: translateX(100%); } } .rt-spinner { inline-size: 24px; block-size: 24px; border-radius: 50%; border: 3px solid var(--rt-surface-accent); border-block-start-color: var(--rt-border-focus); animation: rt-spin 700ms linear infinite; } @keyframes rt-spin { to { transform: rotate(360deg); } } /* --- Not kutusu -------------------------------------------------------- */ .rt-note { display: flex; gap: var(--rt-sp-3); padding: var(--rt-sp-4); border-radius: var(--rt-rd-md); border-inline-start: 4px solid var(--rt-status-info-fg); background: var(--rt-status-info-bg); color: var(--rt-status-info-fg); } .rt-note--success { border-inline-start-color: var(--rt-status-success-fg); background: var(--rt-status-success-bg); color: var(--rt-status-success-fg); } .rt-note--warning { border-inline-start-color: var(--rt-status-warning-fg); background: var(--rt-status-warning-bg); color: var(--rt-status-warning-fg); } .rt-note--error { border-inline-start-color: var(--rt-status-error-fg); background: var(--rt-status-error-bg); color: var(--rt-status-error-fg); } .rt-note__body { color: var(--rt-text-primary); } /* --- Ayrı kayıt bildirimi (views-rt/_c/recording-notice.php) ------------ 2026-09-18 (Owner: "belirsizlik huzursuzluk verir"): bildirim bir OKUMA metnidir. Rezervasyon onayında (ortalı panel) .rt-note'un yan yana düzeni 375 px'te metni dar bir sütuna, "Ders kayıtları ayarına git" bağlantısını ikinci bir sütuna sıkıştırıyordu: metin üstte ve başa hizalı, bağlantı altında. Tek ders kartındaki kısa satır karttan ayrı nefes alır. */ .rt-rec-notice { margin: 0; text-align: start; line-height: var(--rt-lh-normal); } .rt-rec-notice.rt-note { flex-direction: column; align-items: flex-start; gap: var(--rt-sp-2); } .rt-rec-notice__text { max-inline-size: 68ch; } .rt-rec-notice__link { font-weight: 700; } .rt-rec-notice--short { margin-block-start: var(--rt-sp-3); font-size: var(--rt-f-sm); } .rt-rec-notice--short .rt-rec-notice__link { white-space: nowrap; } /* --- İkon -------------------------------------------------------------- */ .rt-icon { inline-size: 1.25em; block-size: 1.25em; display: inline-block; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } .rt-icon--lg { inline-size: 2em; block-size: 2em; } /* --- Çekmece ----------------------------------------------------------- */ .rt-drawer { position: fixed; inset: 0; z-index: var(--rt-z-drawer); display: none; } .rt-drawer[data-open="true"] { display: block; } .rt-drawer__scrim { position: absolute; inset: 0; background: var(--rt-scrim); } .rt-drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: min(360px, 88vw); background: var(--rt-surface-default); padding: var(--rt-sp-5); overflow-y: auto; box-shadow: var(--rt-el-3); display: flex; flex-direction: column; gap: var(--rt-sp-4); } .rt-drawer__item { display: flex; align-items: center; min-block-size: var(--rt-target-min); padding-block: var(--rt-sp-2); border-block-end: 1px solid var(--rt-border-subtle); color: var(--rt-text-heading); font-weight: var(--rt-fw-medium); } /* --- Kalıcı pencere ---------------------------------------------------- */ .rt-modal { position: fixed; inset: 0; z-index: var(--rt-z-modal); display: none; align-items: center; justify-content: center; padding: var(--rt-sp-4); } .rt-modal[data-open="true"] { display: flex; } .rt-modal__scrim { position: absolute; inset: 0; background: var(--rt-scrim); } .rt-modal__panel { position: relative; inline-size: min(560px, 100%); max-block-size: 86vh; overflow-y: auto; background: var(--rt-surface-default); border-radius: var(--rt-rd-lg); padding: var(--rt-sp-6); box-shadow: var(--rt-el-3); display: flex; flex-direction: column; gap: var(--rt-sp-4); } .rt-modal__close { position: absolute; inset-block-start: var(--rt-sp-3); inset-inline-end: var(--rt-sp-3); display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--rt-target-min); min-block-size: var(--rt-target-min); background: transparent; border: 0; border-radius: var(--rt-rd-sm); cursor: pointer; color: var(--rt-text-heading); } /* --- Bildirim ---------------------------------------------------------- */ .rt-toasts { position: fixed; inset-block-end: var(--rt-sp-5); inset-inline-end: var(--rt-sp-5); z-index: var(--rt-z-toast); display: flex; flex-direction: column; gap: var(--rt-sp-3); max-inline-size: min(400px, 90vw); } .rt-toast { display: flex; gap: var(--rt-sp-3); padding: var(--rt-sp-4); border-radius: var(--rt-rd-md); background: var(--rt-surface-default); box-shadow: var(--rt-el-3); border-inline-start: 4px solid var(--rt-status-info-fg); } .rt-toast--success { border-inline-start-color: var(--rt-status-success-fg); } .rt-toast--error { border-inline-start-color: var(--rt-status-error-fg); } .rt-toast--warning { border-inline-start-color: var(--rt-status-warning-fg); } .rt-toast__close { margin-inline-start: auto; min-inline-size: var(--rt-target-min); min-block-size: var(--rt-target-min); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: var(--rt-text-secondary); } /* === TEMA V2.1 TEMEL BİLEŞENLERİ (v2/foundation/foundation.css §4, css-replacements.md R0) — İLK rt.component bloğunun içinde: tests/test_rt_foundation.py ham renk taramasını yalnız bu blokta yapar. === */ /* --- 4.1 Başlık sesi ------------------------------------------------------------------------------------------ */ .rt-title { margin: 0; font-family: var(--rt-f-display); font-weight: var(--rt-fw-black); line-height: var(--rt-lh-display); letter-spacing: var(--rt-ls-display); color: var(--rt-text-heading); text-wrap: balance; } .rt-title--hero { font-size: var(--rt-f-display-2xl); } .rt-title--page { font-size: var(--rt-f-display-xl); } .rt-title--section { font-size: var(--rt-f-display-lg); } .rt-title--sub { font-size: var(--rt-f-display-md); line-height: var(--rt-lh-snug); } .rt-section-head__title { text-wrap: balance; } /* --- 4.2 Eğik marka etiketi (.rt-tag) — bölüm başına EN ÇOK BİR (SPEC §9) -------------------------------------- */ .rt-tag { display: inline-flex; align-items: center; gap: var(--rt-sp-1); align-self: flex-start; inline-size: fit-content; max-inline-size: 100%; padding: 5px 12px; border-radius: var(--rt-rd-pill); background: var(--rt-tag-bg); color: var(--rt-tag-fg); font-size: var(--rt-f-xs); font-weight: var(--rt-fw-black); line-height: 1.2; letter-spacing: var(--rt-ls-tag); text-transform: uppercase; } .rt-section-head--center .rt-tag { align-self: center; } .rt-tag--tilt { border: 2px solid var(--rt-offset-ink); box-shadow: calc(var(--rt-offset-1) * var(--rt-dir)) var(--rt-offset-1) 0 0 var(--rt-offset-ink); transform: rotate(calc(var(--rt-tilt-sm) * -1 * var(--rt-dir))); } /* V2.1: eski adı .rt-tag--coral idi ama altın boyanıyordu; ad gerçeği söyler (hediye tonu). */ .rt-tag--gift { --rt-tag-bg: var(--rt-gift-bg); --rt-tag-fg: var(--rt-gift-text); } .rt-tag--lime { --rt-tag-bg: var(--rt-action-primary-bg); --rt-tag-fg: var(--rt-action-primary-text); } /* --- 4.3 HEDİYE köşe rozeti (.rt-corner-badge) --------------------------------------------------------------- Owner (birebir): "hediye yazıları sağ üste çapraz eklensin. asimetriyi temamızda kullanalım". */ .rt-corner-host { position: relative; } .rt-corner-badge { position: absolute; z-index: 2; inset-block-start: -18px; inset-inline-end: -10px; display: inline-flex; align-items: center; gap: 7px; min-block-size: 36px; padding-inline: 12px 16px; border: 2px solid var(--rt-offset-ink); border-radius: var(--rt-rd-pill); background: var(--rt-gift-bg); color: var(--rt-gift-text); font-size: 0.9375rem; font-weight: var(--rt-fw-black); line-height: 1.2; letter-spacing: 0.02em; white-space: nowrap; box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-offset-ink); transform: rotate(calc(var(--rt-tilt-badge) * var(--rt-dir))); pointer-events: none; } .rt-corner-badge .rt-icon { inline-size: 20px; block-size: 20px; stroke-width: 2.2; flex: none; } .rt-badge--gift { background: var(--rt-gift-bg); color: var(--rt-gift-text); } @media (max-width: 599.98px) { .rt-corner-badge { inset-inline-end: -4px; font-size: var(--rt-f-sm); } } /* Köşe rozetine yer: uzun başlık rozetin altına girmez (card.php rt-card--corner-room). */ .rt-card--corner-room > .rt-stack > :first-child { padding-inline-end: 7rem; } /* --- 4.4 Kompakt kart (.rt-card--compact) ---------------------------------------------------------------------- Owner (birebir): "çok yazı var. çok göz yoruyor" / "tek seferde ekrana öğretmen kartı sığmıyor. kompakt değil". BAŞLIK KESİLMEZ (ad ve yaş bandı gerçek bilgidir). Gövde yalnız tam metne yol varsa 3 satırda kesilir. */ .rt-card--compact { display: flex; flex-direction: column; gap: var(--rt-sp-2); padding: clamp(1rem, 0.85rem + 0.5vw, 1.5rem); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); box-shadow: none; } .rt-card--compact .rt-card__title { font-size: var(--rt-f-lg); line-height: var(--rt-lh-snug); margin: 0; } .rt-card--compact .rt-card__body { margin: 0; font-size: var(--rt-f-sm); } .rt-card--compact .rt-card__body--clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .rt-card--compact .rt-card__media { margin: 0 0 var(--rt-sp-2); border-radius: var(--rt-rd-md); } .rt-card--compact .rt-card__footer { margin-block-start: auto; padding-block-start: var(--rt-sp-3); } /* Kompakt kartın eylemi normal düğmedir: 64×48'lik 14 px leke değil (inceleme 2026-09-15). */ .rt-card--compact .rt-card__footer .rt-btn { --rt-btn-min: 48px; min-inline-size: 7.5rem; min-block-size: 48px; font-size: var(--rt-f-md); } .rt-card--compact.rt-card--interactive:hover { border-color: var(--rt-offset-ink); } @media (prefers-reduced-motion: no-preference) { .rt-card--compact.rt-card--interactive:hover { transform: translate(calc(-2px * var(--rt-dir)), -2px); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-offset-ink); } } /* Mevcut .rt-card--interactive:hover translateY(-2px) hareket korumasının dışındaydı; azaltılmış harekette durdurulur. */ @media (prefers-reduced-motion: reduce) { .rt-card--interactive:hover { transform: none; } } /* --- 4.5 Sert gölgeli yüzey (.rt-offset) --------------------------------------------------------------------- */ .rt-offset { border: 2px solid var(--rt-offset-ink); border-radius: var(--rt-rd-lg); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-offset-ink); } .rt-offset--leaf { box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-offset-leaf); } /* --- 4.6 Video oynat düğmesi (.rt-play) — Owner F: parlak sarı daire, lacivert üçgen. Medya oynat üçgeni RTL'de AYNALANMAZ (evrensel medya simgesi); yalnız optik kaydırma mantıksaldır. */ .rt-play { display: inline-grid; place-items: center; inline-size: 76px; block-size: 76px; border: 3px solid var(--rt-play-ink); border-radius: 50%; background: var(--rt-play-bg); color: var(--rt-play-ink); box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-play-ink); } .rt-play .rt-icon { inline-size: 34px; block-size: 34px; margin-inline-start: 4px; } @media (prefers-reduced-motion: no-preference) { .rt-play { transition: transform var(--rt-mo-base) var(--rt-mo-ease); } .rt-play:hover { transform: scale(1.06); } } /* --- 4.7 Büyüme evreleri v3.1 (.rt-growth, _c/doodle.php name=growth — 2026-10-02) — tohum → kök ve filiz → fide → genç bitki → tomurcuk → konuşma balonu, geniş toprak adasında (önü kesit: tohum ve kökler görünür). Owner 02.10 (birebir, kayıtta doğrulandı): "yine marka renginde-yine benzer anlamda semboller. ama premium tasarım UI UX Saas." Yumuşak gradyanlı katmanlar, kontur yok; renkler YALNIZ --rt-growth-* belirteçlerinden gelir (bileşen katmanı ham palet okumaz; belirteçler rt.semantic'te). Üreteç: offline-work/buyume-simgeleri-v3-2026-10-02/uretec/build.cjs (elle düzenlenmez). svg kendi boy kabıdır (container-type): 48 px ve altında gradyanlar düz renge iner, ince ayrıntı gizlenir, ana kökler kalınlaşır, ada daralır, bitki evreye göre büyür. container-type içerik genişliğini sıfırladığı için varsayılan boy 64 px'tir; bugünkü bütün bağlamlar kendi boyunu verir. Panelde sıradaki adımın soluk görünümü panel-skin.css'tedir (gri + opaklık). Eski g-plate / g-glyph / g-keyline sınıfları yoktur. */ .rt-growth { display: block; flex: none; overflow: visible; pointer-events: none; max-inline-size: none; inline-size: 64px; block-size: 64px; container-type: inline-size; } .rt-growth .s-accent { stop-color: var(--rt-growth-accent); } .rt-growth .s-accent-deep { stop-color: var(--rt-growth-accent-deep); } .rt-growth .s-accent-hi { stop-color: var(--rt-growth-accent-hi); } .rt-growth .s-leaf { stop-color: var(--rt-growth-leaf); } .rt-growth .s-leaf-deep { stop-color: var(--rt-growth-leaf-deep); } .rt-growth .s-leaf-hi { stop-color: var(--rt-growth-leaf-hi); } .rt-growth .s-soil { stop-color: var(--rt-growth-soil); } .rt-growth .s-soil-deep { stop-color: var(--rt-growth-soil-deep); } .rt-growth .s-soil-hi { stop-color: var(--rt-growth-soil-hi); } .rt-growth .s-soil-shade { stop-color: var(--rt-growth-soil-shade); } .rt-growth .p-accent { fill: var(--rt-growth-accent); } .rt-growth .p-accent-hi { fill: var(--rt-growth-accent-hi); } .rt-growth .p-accent-shade { fill: var(--rt-growth-accent-shade); } .rt-growth .p-leaf-deep { fill: var(--rt-growth-leaf-deep); } .rt-growth .p-leaf-shade { fill: var(--rt-growth-leaf-shade); } .rt-growth .p-paper { fill: var(--rt-growth-paper); } .rt-growth .p-root { fill: var(--rt-growth-root); } .rt-growth .p-soil { fill: var(--rt-growth-soil); } .rt-growth .p-soil-deep { fill: var(--rt-growth-soil-deep); } .rt-growth .p-soil-shade { fill: var(--rt-growth-soil-shade); } .rt-growth .p-spark { fill: var(--rt-growth-spark); } .rt-growth .p-sun { fill: var(--rt-growth-sun); } .rt-growth .k-accent { fill: none; stroke: var(--rt-growth-accent); stroke-width: 2px; stroke-linecap: round; } .rt-growth .k-leaf-hi { fill: none; stroke: var(--rt-growth-leaf-hi); stroke-width: .65px; stroke-linecap: round; } /* KÜÇÜK BOY: otomatik (≤ 48 px) ve açık sınıf (.rt-growth--sm) aynı sonucu verir. */ @container (max-width: 48px) { .rt-growth .f-halo { display: none; } .rt-growth .f-soil { fill: var(--rt-growth-soil); } .rt-growth .f-soil-face { fill: var(--rt-growth-soil-deep); } .rt-growth .f-leaf { fill: var(--rt-growth-leaf); } .rt-growth .f-stem { fill: var(--rt-growth-leaf-deep); } .rt-growth .f-accent { fill: var(--rt-growth-accent); } .rt-growth .g-fine { display: none; } .rt-growth .g-root { stroke: var(--rt-growth-root); stroke-width: .9px; stroke-linejoin: round; } .rt-growth .g-fold { fill-opacity: 1; } .rt-growth .g-isl { transform: matrix(0.9, 0, 0, 0.86, 3.2, 8.272); } .rt-growth.rt-growth--1 .g-plant { transform: matrix(1.18, 0, 0, 1.18, -5.76, -6.064); } .rt-growth.rt-growth--2 .g-plant { transform: matrix(1.4, 0, 0, 1.4, -12.8, -15.92); } .rt-growth.rt-growth--3 .g-plant { transform: matrix(1.24, 0, 0, 1.24, -7.68, -8.752); } .rt-growth.rt-growth--4 .g-plant { transform: matrix(1.08, 0, 0, 1.08, -2.56, -1.584); } .rt-growth.rt-growth--5 .g-plant { transform: matrix(1.06, 0, 0, 1.06, -1.92, -0.688); } .rt-growth.rt-growth--6 .g-plant { transform: matrix(1.03, 0, 0, 1.03, -0.96, 0.656); } } .rt-growth.rt-growth--sm .f-halo { display: none; } .rt-growth.rt-growth--sm .f-soil { fill: var(--rt-growth-soil); } .rt-growth.rt-growth--sm .f-soil-face { fill: var(--rt-growth-soil-deep); } .rt-growth.rt-growth--sm .f-leaf { fill: var(--rt-growth-leaf); } .rt-growth.rt-growth--sm .f-stem { fill: var(--rt-growth-leaf-deep); } .rt-growth.rt-growth--sm .f-accent { fill: var(--rt-growth-accent); } .rt-growth.rt-growth--sm .g-fine { display: none; } .rt-growth.rt-growth--sm .g-root { stroke: var(--rt-growth-root); stroke-width: .9px; stroke-linejoin: round; } .rt-growth.rt-growth--sm .g-fold { fill-opacity: 1; } .rt-growth.rt-growth--sm .g-isl { transform: matrix(0.9, 0, 0, 0.86, 3.2, 8.272); } .rt-growth.rt-growth--sm.rt-growth--1 .g-plant { transform: matrix(1.18, 0, 0, 1.18, -5.76, -6.064); } .rt-growth.rt-growth--sm.rt-growth--2 .g-plant { transform: matrix(1.4, 0, 0, 1.4, -12.8, -15.92); } .rt-growth.rt-growth--sm.rt-growth--3 .g-plant { transform: matrix(1.24, 0, 0, 1.24, -7.68, -8.752); } .rt-growth.rt-growth--sm.rt-growth--4 .g-plant { transform: matrix(1.08, 0, 0, 1.08, -2.56, -1.584); } .rt-growth.rt-growth--sm.rt-growth--5 .g-plant { transform: matrix(1.06, 0, 0, 1.06, -1.92, -0.688); } .rt-growth.rt-growth--sm.rt-growth--6 .g-plant { transform: matrix(1.03, 0, 0, 1.03, -0.96, 0.656); } /* YÜKSEK KONTRAST: ayrıntı gizlenir; ana hat şekilleri (g-k) zemin rengiyle dolar ve sistem metin rengiyle çizilir. Çizim sırası korunduğu için öndeki şekil arkadakinin çizgisini örter (tek, birleşik kontur). */ @media (forced-colors: active) { .rt-growth :is(.g-isl, .g-plant) > :not(.g-k) { visibility: hidden; } .rt-growth :is(.g-isl, .g-plant) > .g-k { fill: Canvas; fill-opacity: 1; stroke: CanvasText; stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; } } /* --- 4.8 YAN SÜSLER (.rt-decor, _c/decor.php) ---------------------------------------------------------------------- Owner D: "boş bulduğun yerlere sayfalara göre çeşitli çeşitli bağlam içerisinde bize özel". EV SAHİBİ AÇIK SINIFTIR (.rt-decor-host): şablon ekler. Ev sahibi yatayda KIRPILMAZ; süs z-index:-1 ile zeminin üstünde, içeriğin altında boyanır (isolation). Süs kenardan 14 px içeride durur: 240 px'lik şeritte 6° eğim yatayda ≈12,5 px taşar, bu yüzden sayfa asla yana kaymaz. Varsayılan GİZLİDİR; yalnız şeridin var olduğu genişlikte görünür. */ .rt-decor-host { position: relative; isolation: isolate; } .rt-decor { --rt-decor-edge: 14px; --rt-decor-lane: calc((100% - var(--rt-container-max)) / 2 + 24px - var(--rt-decor-edge)); --rt-decor-h: 190px; --rt-decor-tilt: calc(6deg * var(--rt-dir)); --rt-decor-src: none; position: absolute; z-index: -1; display: none; box-sizing: border-box; inline-size: var(--rt-decor-lane); block-size: var(--rt-decor-h); max-inline-size: none; padding-inline: 24px; pointer-events: none; user-select: none; background-color: var(--rt-decor-ink); -webkit-mask-image: var(--rt-decor-src); mask-image: var(--rt-decor-src); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-origin: content-box; mask-origin: content-box; -webkit-mask-clip: content-box; mask-clip: content-box; transform: rotate(var(--rt-decor-tilt)); } .rt-decor--start { inset-inline-start: var(--rt-decor-edge); --rt-decor-tilt: calc(-5deg * var(--rt-dir)); } .rt-decor--end { inset-inline-end: var(--rt-decor-edge); } .rt-decor--narrow { --rt-decor-lane: calc((100% - var(--rt-container-narrow)) / 2 + 24px - var(--rt-decor-edge)); } /* İÇ ŞERİT: tek sütunlu düzenin boş yarısı. Şerit = kapsayıcı içeriği − metin sütunu (en çok 360 px); şeridin bitişi kapsayıcı içeriğinin bitişidir. Metin sütunu sütun genişliğini aşmadıkça çizim metne binemez (1024'te 216 px şerit). */ .rt-decor--inside { --rt-decor-col: 760px; --rt-decor-lane: clamp(0px, calc(min(100%, var(--rt-container-max)) - 48px - var(--rt-decor-col)), 360px); } .rt-decor--col-640 { --rt-decor-col: 640px; } .rt-decor--col-560 { --rt-decor-col: 560px; } .rt-decor--inside.rt-decor--end { inset-inline-end: calc((100% - min(100%, var(--rt-container-max))) / 2 + 24px); } .rt-decor--inside.rt-decor--start { inset-inline-start: calc((100% - min(100%, var(--rt-container-max))) / 2 + 24px); } .rt-decor--sm { --rt-decor-h: 140px; } .rt-decor--md { --rt-decor-h: 190px; } .rt-decor--lg { --rt-decor-h: 240px; } .rt-decor--top { inset-block-start: clamp(20px, 10%, 72px); } .rt-decor--middle { inset-block-start: calc(50% - var(--rt-decor-h) / 2); } .rt-decor--bottom { inset-block-end: clamp(20px, 10%, 64px); } .rt-decor--fine { background-color: var(--rt-decor-ink-fine); } .rt-decor--strong { background-color: var(--rt-decor-ink-strong); } .rt-decor--accent { background-color: var(--rt-decor-ink-accent); } /* Motif kaydı: url yalnız burada (rt.css'e göre göreli: public/rt/deco/). konusan-agac yeniden çizilene kadar YOK. */ .rt-decor--m-lale { --rt-decor-src: url("deco/lale.svg"); } .rt-decor--m-cay { --rt-decor-src: url("deco/cay.svg"); } .rt-decor--m-masal-kitabi { --rt-decor-src: url("deco/masal-kitabi.svg"); } .rt-decor--m-kagit-ucak { --rt-decor-src: url("deco/kagit-ucak.svg"); } .rt-decor--m-sicak-hava-balonu { --rt-decor-src: url("deco/sicak-hava-balonu.svg"); } .rt-decor--m-dunya-baglanti { --rt-decor-src: url("deco/dunya-baglanti.svg"); } .rt-decor--m-acik-mektup { --rt-decor-src: url("deco/acik-mektup.svg"); } .rt-decor--m-zamanlayici-25 { --rt-decor-src: url("deco/zamanlayici-25.svg"); } .rt-decor--m-kardes-baloncuklar { --rt-decor-src: url("deco/kardes-baloncuklar.svg"); } .rt-decor--m-nine-goruntulu { --rt-decor-src: url("deco/nine-goruntulu.svg"); } .rt-decor--m-genc-sesi { --rt-decor-src: url("deco/genc-sesi.svg"); } .rt-decor--m-faq-bubbles { --rt-decor-src: url("deco/faq-bubbles.svg"); } .rt-decor--m-gift-box { --rt-decor-src: url("deco/gift-box.svg"); } .rt-decor--m-review-hearts { --rt-decor-src: url("deco/review-hearts.svg"); } .rt-decor--m-sleeping-cat { --rt-decor-src: url("deco/sleeping-cat.svg"); } .rt-decor--m-headphones { --rt-decor-src: url("deco/headphones.svg"); } .rt-decor--m-laptop-call { --rt-decor-src: url("deco/laptop-call.svg"); } .rt-decor--m-alphabet-blocks { --rt-decor-src: url("deco/alphabet-blocks.svg"); } .rt-decor--m-notebook-pencil { --rt-decor-src: url("deco/notebook-pencil.svg"); } .rt-decor--m-lesson-timer { --rt-decor-src: url("deco/lesson-timer.svg"); } /* GÖRÜNÜRLÜK — yalnız açık ev sahibinin doğrudan çocuğu çizilir (ev sahibi unutulursa süs rastgele yerde belirmez). inside + narrow 1024'ten, gutter 1600'den. 1024 altında yalnız corner=true süs köşe çıkartması olur. */ @media (min-width: 1024px) { .rt-decor-host > .rt-decor--inside, .rt-decor-host > .rt-decor--narrow { display: block; } } @media (min-width: 1024px) and (max-width: 1279.98px) { .rt-decor--lg { --rt-decor-h: 190px; } } @media (min-width: 1600px) { .rt-decor-host > .rt-decor--gutter { display: block; } } /* KÖŞE ÇIKARTMASI (360–1023 px): 96×72 px, soluk mürekkep (%16 lacivert / %18 beyaz), bölümün üst bitiş köşesinde. Ev sahibi .rt-decor-host--corner üst iç boşluğu 96 px yapar (rt.page), çizim 12–84 px arasında kalır: metne binmez. */ @media (max-width: 1023.98px) { .rt-decor-host > .rt-decor.rt-decor--corner { display: block; inset-block: 12px auto; inset-inline: auto 16px; inline-size: 96px; block-size: 72px; padding-inline: 0; background-color: var(--rt-decor-ink-soft); --rt-decor-tilt: calc(8deg * var(--rt-dir)); } } @media (prefers-reduced-motion: no-preference) { .rt-decor--float { animation: rt-decor-float var(--rt-mo-float) ease-in-out infinite alternate; } } @keyframes rt-decor-float { to { translate: 0 -10px; } } @media (forced-colors: active) { .rt-decor { visibility: hidden; } } @media print { .rt-decor { visibility: hidden; } } /* --- 4.9 SAYFA İÇİ YUKARI + SOHBET (.rt-fab, _c/fab.php) -------------------------------------------------------- Owner G: "sayfa içi up ve sohbet butonları da yok anasayfada". Sağ alt köşe (RTL'de sol alt). */ .rt-fab { --rt-fab-lift: 0px; --rt-fab-bottom: 16px; position: fixed; z-index: var(--rt-z-fab); inset-inline-end: 16px; inset-block-end: calc(var(--rt-fab-bottom) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: var(--rt-sp-3); pointer-events: none; transform: translateY(calc(var(--rt-fab-lift) * -1)); } .rt-fab > * { pointer-events: auto; } /* yield: klavye odağı düğmelerin altındaki öğede (SC 2.4.11). covering: son çare (alt bilgi 960 altında yer ayırır); odak sohbet panelindeyken rt.js covering yazmaz. */ .rt-fab[data-rt-yield="true"], .rt-fab[data-rt-covering="true"] { visibility: hidden; } @media (min-width: 960px) { .rt-fab { inset-inline-end: 24px; --rt-fab-bottom: 24px; } } /* :has() yoksa kural düşer; rt.js aynı değeri satır içi --rt-fab-bottom olarak yazar. */ @media (max-width: 719px) { .rt:has(.rt-mobile-cta:not([data-rt-offscreen="true"])) .rt-fab { --rt-fab-bottom: 88px; } } .rt-fab__btn { display: inline-grid; place-items: center; inline-size: 56px; block-size: 56px; border: 2px solid var(--rt-offset-ink); border-radius: 50%; background: var(--rt-fab-bg); color: var(--rt-fab-ink); box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-offset-ink); cursor: pointer; list-style: none; text-decoration: none; } .rt-fab__btn:hover { text-decoration: none; color: var(--rt-fab-ink); } .rt-fab__btn .rt-icon { inline-size: 28px; block-size: 28px; stroke-width: 2; } .rt-fab__btn::-webkit-details-marker { display: none; } .rt-fab__up { inline-size: 48px; block-size: 48px; background: var(--rt-fab-quiet-bg); } .rt-fab__up .rt-icon { inline-size: 22px; block-size: 22px; } .rt-fab__chat { position: relative; } .rt-fab__chat[open] > .rt-fab__talk { background: var(--rt-fab-quiet-bg); } /* TELEFON (< 600 px; CONSISTENCY 21 — home-top REQUESTS 7, home-bottom 19, journey §2): düğmeler kaydırırken gövde metnini örtüyordu. 44 px hedef, sohbet kenardan 12 px, yığın aralığı daralır. Yukarı düğmesinin yalnız YUKARI kaydırırken görünmesi rt.js fab modülündedir. */ @media (max-width: 599.98px) { .rt-fab { inset-inline-end: 12px; gap: var(--rt-sp-2); } .rt-fab__btn { inline-size: 44px; block-size: 44px; } .rt-fab__btn .rt-icon { inline-size: 24px; block-size: 24px; } .rt-fab__up .rt-icon { inline-size: 20px; block-size: 20px; } } @media (prefers-reduced-motion: no-preference) { .rt-fab { transition: transform var(--rt-mo-base) var(--rt-mo-ease); } .rt-fab__btn { transition: transform var(--rt-mo-fast) var(--rt-mo-ease), box-shadow var(--rt-mo-fast) var(--rt-mo-ease), background-color var(--rt-mo-base) var(--rt-mo-ease); } .rt-fab__btn:hover { transform: translate(calc(-1px * var(--rt-dir)), -1px); box-shadow: calc(4px * var(--rt-dir)) 4px 0 0 var(--rt-offset-ink); } .rt-fab__btn:active { transform: translate(calc(2px * var(--rt-dir)), 2px); box-shadow: calc(1px * var(--rt-dir)) 1px 0 0 var(--rt-offset-ink); } } /* Panel markanın konuşma balonudur: kuyruğu sohbet düğmesini gösterir. Önce kanallar, sonra tek satır not. */ .rt-fab__panel { position: absolute; inset-block-end: calc(100% + 16px); inset-inline-end: 0; inline-size: min(20rem, calc(100vw - 32px)); display: flex; flex-direction: column; gap: var(--rt-sp-3); padding: var(--rt-sp-4); border: 2px solid var(--rt-offset-ink); border-radius: var(--rt-rd-lg); background: var(--rt-surface-default); color: var(--rt-text-primary); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-offset-ink); } .rt-fab__panel::after { content: ""; position: absolute; inset-block-end: -9px; inset-inline-end: 22px; inline-size: 16px; block-size: 16px; background: var(--rt-surface-default); border-inline-end: 2px solid var(--rt-offset-ink); border-block-end: 2px solid var(--rt-offset-ink); border-end-end-radius: 3px; transform: rotate(calc(45deg * var(--rt-dir))); } .rt-fab__head { display: flex; align-items: center; justify-content: space-between; gap: var(--rt-sp-3); } .rt-fab__title { margin: 0; font-family: var(--rt-f-display); font-size: var(--rt-f-lg); font-weight: var(--rt-fw-black); line-height: var(--rt-lh-snug); color: var(--rt-text-heading); } .rt-fab__close { display: inline-grid; place-items: center; flex: none; inline-size: var(--rt-target-min); block-size: var(--rt-target-min); margin-block-start: -4px; margin-inline-end: -8px; border: 0; border-radius: 50%; background: transparent; color: var(--rt-text-heading); cursor: pointer; } .rt-fab__close:hover { background: var(--rt-action-quiet-bg-hover); } .rt-fab__note { margin: 0; font-size: var(--rt-f-xs); color: var(--rt-text-secondary); } .rt-fab__channel { display: block; } .rt-fab__link { display: flex; align-items: center; gap: var(--rt-sp-3); min-block-size: var(--rt-target-comfort); padding: var(--rt-sp-2) var(--rt-sp-3); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-md); color: var(--rt-text-heading); text-decoration: none; } .rt-fab__link:hover { border-color: var(--rt-offset-ink); background: var(--rt-surface-accent); text-decoration: none; } .rt-fab__link > .rt-icon { inline-size: 18px; block-size: 18px; flex: none; margin-inline-start: auto; } [dir="rtl"] .rt-fab__link > .rt-icon { transform: scaleX(-1); } /* Kanal simgesi: lime daire içinde sohbet balonu (üç kanal da WhatsApp; /start ve İletişim ile aynı `chat` simgesi, CONSISTENCY 14), lacivert-derin kontur ve çizgi (9,9:1). Satırlar bir bakışta taranır. */ .rt-fab__glyph { display: inline-grid; place-items: center; flex: none; inline-size: 36px; block-size: 36px; border: 2px solid var(--rt-offset-ink); border-radius: 50%; background: var(--rt-fab-bg); color: var(--rt-fab-ink); } .rt-fab__glyph .rt-icon { inline-size: 18px; block-size: 18px; stroke-width: 2; } .rt-fab__link-text { display: flex; flex-direction: column; min-inline-size: 0; } .rt-fab__label { font-size: var(--rt-f-xs); font-weight: var(--rt-fw-bold); color: var(--rt-text-secondary); } .rt-fab__value { font-weight: var(--rt-fw-black); font-variant-numeric: tabular-nums; text-align: start; } @media print { .rt-fab { display: none; } } /* --- 4.10 PANEL KANCALARI (Owner M) — panel grubu işaretlemeyi kurunca kullanılır; yalnız semantic token okur. -- */ .rt-panel-shell { background: var(--rt-panel-shell-bg); } .rt-panel-sidebar { background: var(--rt-panel-sidebar-bg); color: var(--rt-panel-sidebar-fg); } .rt-panel-nav__item[aria-current="page"] { background: var(--rt-panel-nav-active-bg); color: var(--rt-panel-nav-active-fg); box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-panel-nav-active-shadow); } .rt-panel-card { border: 2px solid var(--rt-panel-card-border); border-radius: var(--rt-rd-lg); box-shadow: none; } } /* ============================================================================= 6. DOMAIN — Roots & Talks'a özgü bileşen token'ları ----------------------------------------------------------------------------- Bileşenlerin kendisi faz spesifikasyonuyla gelir. Burada duran, o bileşenlerin okuyacağı anlamsal ölçülerdir; böylece bileşen yazıldığında ham değer seçilmez. Strateji belgesindeki domain listesi: TeacherStoryCard, ChildProfileCard, LearningJourney, ProgressMilestone, AvailabilityPicker, TrialLessonCard, CoordinatorRecommendation, PackagePlan, LessonTimeline. ============================================================================= */ @layer rt.domain { :root { /* Öğretmen hikâye kartı — fiyat/derecelendirme ızgarası DEĞİL, portre + hikâye */ --rt-teacher-portrait-size: 96px; --rt-teacher-portrait-radius: var(--rt-rd-lg); --rt-teacher-card-gap: var(--rt-sp-4); /* Çocuk profili */ --rt-child-avatar-size: 56px; --rt-child-accent: var(--rt-c-coral-tint); /* Öğrenme yolculuğu ve gelişim adımı */ --rt-journey-line: var(--rt-border-subtle); --rt-journey-dot: var(--rt-learning-upcoming-fg); --rt-journey-dot-done: var(--rt-learning-progress-fg); --rt-journey-dot-size: 14px; --rt-progress-track: var(--rt-learning-progress-track); --rt-progress-fill: var(--rt-learning-progress-fg); --rt-progress-height: 10px; /* Plan kartı */ --rt-plan-highlight: var(--rt-c-gold); } /* İlerleme çubuğu: erişilebilir taban. Renk tek başına bilgi taşımaz, yanında her zaman metin değer bulunur. */ .rt-progress { inline-size: 100%; block-size: var(--rt-progress-height); border-radius: var(--rt-rd-pill); background: var(--rt-progress-track); overflow: hidden; } .rt-progress__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--rt-progress-fill); } /* --- Kamu fazı domain token'ları ------------------------------------------ */ :root { --rt-illus-halo: var(--rt-surface-accent); --rt-illus-a: var(--rt-surface-inverse); --rt-illus-b: var(--rt-action-primary-bg); --rt-illus-line: var(--rt-text-on-inverse); --rt-illus-root: var(--rt-accent-rule); --rt-video-scrim: linear-gradient(to top, var(--rt-scrim-soft), transparent 65%); } /* --- Portre: öğretmenin mevcut fotoğrafı, 1:1 çerçeve (kaynaklar kare; kırpma yok) --- */ .rt-portrait { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--rt-teacher-portrait-radius); background: var(--rt-surface-accent); } .rt-portrait--sm { border-radius: var(--rt-rd-md); } .rt-portrait__img { inline-size: 100%; block-size: 100%; object-fit: cover; } .rt-portrait__monogram { display: grid; place-items: center; inline-size: 100%; block-size: 100%; font-family: var(--rt-f-display); font-size: var(--rt-f-3xl); color: var(--rt-text-heading); } /* --- Öğretmen kartı (TeacherStoryCard): portre + hikâye, fiyat/puan yok --- */ .rt-edu-card { position: relative; display: flex; flex-direction: column; gap: var(--rt-teacher-card-gap); block-size: 100%; padding: var(--rt-sp-4); background: var(--rt-surface-default); border: 1px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); box-shadow: var(--rt-el-1); transition: box-shadow var(--rt-mo-base) var(--rt-mo-ease), transform var(--rt-mo-base) var(--rt-mo-ease); } .rt-edu-card:hover, .rt-edu-card:focus-within { box-shadow: var(--rt-el-2); } .rt-edu-card:hover { transform: translateY(-2px); } .rt-edu-card__body { display: flex; flex-direction: column; gap: var(--rt-sp-2); flex: 1 1 auto; } .rt-edu-card__name { font-family: var(--rt-f-display); font-size: var(--rt-f-xl); } .rt-edu-card__highlight { font-weight: var(--rt-fw-medium); color: var(--rt-text-primary); } /* --- Öğretmen güven satırı ve "Veliler ne diyor" (Owner 2026-09-12) ------------------------------------------ Kart: ad ve rolün altında tek satır, en fazla 3 metrik. Profil: sol özet paneli (puan, yıldız, dağılım, öğrenci/ders), sağda yorum kartları (masaüstünde iki sütun). Yıldız dekoratiftir; anlam metinde ve erişilebilir adda taşınır. */ /* Metrikler küçük çiplerdir (2026-09-14): nokta ayraçlar satır kırılınca başa geçip sarkıyordu. */ .rt-edu-stats { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--rt-sp-1) var(--rt-sp-2); font-size: var(--rt-f-sm); color: var(--rt-text-secondary); } .rt-profile-head__copy .rt-edu-stats { font-size: var(--rt-f-md); } .rt-stars { display: inline-flex; gap: 0.125rem; } .rt-stars__star .rt-icon { inline-size: 1.125rem; block-size: 1.125rem; color: var(--rt-border-strong); fill: currentColor; } .rt-stars__star.is-on .rt-icon { color: var(--rt-c-gold, var(--rt-accent-rule)); } .rt-stars--sm .rt-stars__star .rt-icon { inline-size: 0.875rem; block-size: 0.875rem; } /* Özet üstte yatay bant (puan | dağılım | öğrenci-ders), yorum kartları altında: profilin ana sütunu aside yüzünden dar olduğu için yan yana özet + iki sütun kartları sıkıştırıyordu (2026-09-12 ekran ölçümü). */ .rt-reviews-layout { display: grid; gap: var(--rt-sp-5); grid-template-columns: minmax(0, 1fr); } .rt-reviews-summary { display: grid; gap: var(--rt-sp-4); padding: var(--rt-sp-5); align-items: center; background: var(--rt-surface-sunken); border-radius: var(--rt-rd-lg); } @media (min-width: 720px) { .rt-reviews-summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--rt-sp-6); } .rt-reviews-summary__facts { border-block-start: 0; padding-block-start: 0; border-inline-start: 1px solid var(--rt-border-subtle); padding-inline-start: var(--rt-sp-5); } } .rt-reviews-summary__head { display: flex; flex-direction: column; gap: var(--rt-sp-1); } .rt-reviews-summary__score { margin: 0; display: flex; flex-direction: column; gap: var(--rt-sp-1); } .rt-reviews-summary__score strong { font-family: var(--rt-f-display); font-size: 3rem; line-height: 1; color: var(--rt-text-heading); } .rt-reviews-summary__count { margin: 0; font-size: var(--rt-f-sm); color: var(--rt-text-secondary); } .rt-reviews-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; } .rt-reviews-dist__row { display: grid; grid-template-columns: 1ch minmax(0, 1fr) 3ch; align-items: center; gap: var(--rt-sp-2); font-size: var(--rt-f-xs); color: var(--rt-text-secondary); } .rt-reviews-dist__bar { display: block; block-size: 0.5rem; border-radius: var(--rt-rd-pill); background: var(--rt-surface-default); overflow: hidden; } .rt-reviews-dist__bar > span { display: block; block-size: 100%; border-radius: inherit; background: var(--rt-c-gold, var(--rt-accent-rule)); } .rt-reviews-dist__n { text-align: end; } .rt-reviews-summary__facts { list-style: none; margin: 0; padding: var(--rt-sp-3) 0 0; border-block-start: 1px solid var(--rt-border-subtle); display: flex; flex-wrap: wrap; gap: var(--rt-sp-4); font-size: var(--rt-f-sm); color: var(--rt-text-secondary); } .rt-reviews-summary__facts strong { display: block; font-size: var(--rt-f-lg); color: var(--rt-text-heading); } /* Kartlar içerik boyundadır (align-items: start): eşit yükseklik kısa yorumlarda %40 boşluk bırakıyordu; tek yorum tam genişlikte durur (2026-09-14). */ .rt-reviews { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--rt-sp-4); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 720px) { .rt-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .rt-review { display: flex; } .rt-review:only-child { grid-column: 1 / -1; } .rt-review__card { flex: 1; display: flex; flex-direction: column; gap: var(--rt-sp-2); padding: var(--rt-sp-5); background: var(--rt-surface-default); border: 1px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); } .rt-review__top { display: flex; align-items: center; justify-content: space-between; gap: var(--rt-sp-2); } .rt-review__date { font-size: var(--rt-f-xs); color: var(--rt-text-secondary); } .rt-review__title { font-size: var(--rt-f-md); line-height: 1.35; } .rt-review__text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; } .rt-review__text.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } .rt-review__more { align-self: flex-start; min-block-size: var(--rt-target-min); padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: var(--rt-fw-bold); color: var(--rt-text-link); text-decoration: underline; text-underline-offset: 0.2em; } .rt-review__by { margin: auto 0 0; padding-block-start: var(--rt-sp-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--rt-sp-1) var(--rt-sp-3); font-size: var(--rt-f-sm); } .rt-review__author { font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-review__place { display: inline-flex; align-items: center; gap: var(--rt-sp-1); color: var(--rt-text-secondary); } /* Ülkesi olmayan yorumda bu öge hiç çizilmez; flex boşluğu kalmaz, hizalama bozulmaz. */ .rt-flag { inline-size: 20px; block-size: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--rt-border-subtle); flex: none; } .rt-reviews__more-wrap { margin: var(--rt-sp-4) 0 0; } /* Owner 2026-09-12: "efekt yok" — profil yorum kartı gölgeli durur, üzerine gelince hafifçe yükselir. */ .rt-review__card { box-shadow: 0 1px 2px rgba(20, 24, 60, 0.06), 0 8px 24px rgba(20, 24, 60, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; } .rt-review__card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(20, 24, 60, 0.08), 0 16px 32px rgba(20, 24, 60, 0.1); } @media (prefers-reduced-motion: reduce) { .rt-review__card { transition: none; } .rt-review__card:hover { transform: none; } } .rt-edu-card__link { margin-block-start: auto; display: inline-flex; align-items: center; gap: var(--rt-sp-2); min-block-size: var(--rt-target-min); font-weight: var(--rt-fw-bold); color: var(--rt-text-link); } /* Bütün kart tıklanır: bağlantının görünmez uzantısı kartı kaplar (iç içe bağlantı yok). */ .rt-edu-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .rt-edu-card--compact { padding: var(--rt-sp-3); gap: var(--rt-sp-3); } .rt-edu-card--compact .rt-edu-card__name { font-size: var(--rt-f-lg); } .rt-edu-card--compact .rt-edu-card__highlight { font-size: var(--rt-f-sm); } /* --- Öğrenme yolculuğu (LearningJourney) ---------------------------------- */ .rt-journey { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--rt-sp-4); } .rt-journey__step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--rt-sp-4); align-items: start; } .rt-journey__step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 19px; inset-block-start: 44px; inset-block-end: calc(var(--rt-sp-4) * -1); border-inline-start: 2px solid var(--rt-journey-line); } .rt-journey__num { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--rt-surface-default); border: 2px solid var(--rt-journey-dot); color: var(--rt-text-heading); font-family: var(--rt-f-display); font-weight: var(--rt-fw-bold); } .rt-journey__title { font-size: var(--rt-f-lg); } .rt-journey__text { margin-block-start: var(--rt-sp-1); color: var(--rt-text-secondary); max-inline-size: var(--rt-measure); } .rt-journey--list .rt-journey__step { padding-block-end: var(--rt-sp-2); } @media (min-width: 1100px) { /* Adım sayısı içerikten gelir (2026-09-11: yedi adımdan beşe indi); sütun sayısı sabitlenmez. */ .rt-journey--track { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--rt-sp-4); } .rt-journey--track .rt-journey__step { grid-template-columns: minmax(0, 1fr); gap: var(--rt-sp-3); } .rt-journey--track .rt-journey__step::before { content: none; } .rt-journey--track .rt-journey__step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 20px; inset-inline-start: 48px; inset-inline-end: calc(var(--rt-sp-4) * -1 + 8px); border-block-start: 2px solid var(--rt-journey-line); } .rt-journey--track .rt-journey__title { font-size: var(--rt-f-md); } .rt-journey--track .rt-journey__text { font-size: var(--rt-f-sm); } } /* --- Ders biçimi kartı (PackagePlan'ın fiyatsız bilgi hâli) ----------------- */ .rt-format { --rt-format-accent: var(--rt-learning-upcoming-fg); display: flex; flex-direction: column; gap: var(--rt-sp-3); padding: var(--rt-sp-5); background: var(--rt-surface-default); border: 1px solid var(--rt-border-subtle); border-block-start: 4px solid var(--rt-format-accent); border-radius: var(--rt-rd-lg); } .rt-format--group { --rt-format-accent: var(--rt-plan-highlight); } .rt-format__title { font-family: var(--rt-f-display); font-size: var(--rt-f-2xl); } .rt-format__text { color: var(--rt-text-secondary); } .rt-format__facts { margin: 0; display: grid; } .rt-format__fact { display: grid; grid-template-columns: minmax(6.5rem, 34%) minmax(0, 1fr); gap: var(--rt-sp-3); padding-block: var(--rt-sp-2); border-block-start: 1px solid var(--rt-border-subtle); } .rt-format__fact dt { font-size: var(--rt-f-sm); font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-format__fact dd { margin: 0; } /* Dar telefonda etiket ve değer alt alta: yan yana dururken değer 3–4 satıra kırılıyordu. */ @media (max-width: 479.98px) { .rt-format__fact { grid-template-columns: minmax(0, 1fr); gap: 2px; } } .rt-format__note { display: flex; align-items: flex-start; gap: var(--rt-sp-2); padding: var(--rt-sp-3); border-radius: var(--rt-rd-md); background: var(--rt-status-info-bg); color: var(--rt-status-info-fg); font-size: var(--rt-f-sm); } /* --- Tanıtım videosu kapağı ------------------------------------------------ */ .rt-video { display: flex; flex-direction: column; gap: var(--rt-sp-2); } .rt-video__facade { position: relative; display: block; max-inline-size: 520px; border-radius: var(--rt-rd-lg); overflow: hidden; } .rt-video__facade .rt-portrait { border-radius: 0; } /* ---- ANA SAYFA TANITIM FİLMİ -------------------------------------------------- UX kararları (Owner 2026-09-12: "video yeri … dizayn olarak özensiz; profesyonel bir çözüm"): 1) Film kendi KOYU KUŞAĞINDA durur — sayfanın akışında kaybolmaz, "burada izlenecek bir şey var" der. Etrafındaki yumuşak ışık huzmesi ilgiyi ortaya çeker. 2) Kart, markanın altın çizgisiyle ÇERÇEVELENİR ve katmanlı gölgeyle zeminden ayrılır; üzerine gelince hafifçe yükselir — tıklanabilir olduğu dokunmadan anlaşılır. 3) Oynat düğmesi ORTADADIR ve etrafında yavaşça genişleyen iki halka vardır; bu, videonun canlı olduğunu söyleyen bilinen bir işarettir. Hareket, "hareketi azalt" tercihinde durur. 4) Oran 16:9 SABİTTİR: video yüklenince sayfa zıplamaz (CLS yok) ve açılışta YouTube'a hiçbir istek gitmez — kapak markanın kendi yüzeyidir. */ .rt-video--brand { align-items: center; } .rt-video--brand .rt-video__facade { inline-size: min(100%, 760px); margin-inline: auto; padding: 6px; border-radius: 28px; background: linear-gradient(140deg, var(--rt-c-gold) 0%, rgba(199, 154, 50, 0.25) 45%, rgba(255, 255, 255, 0.18) 100%); box-shadow: 0 28px 60px rgba(8, 18, 36, 0.45), 0 4px 14px rgba(8, 18, 36, 0.3); transition: transform 0.25s ease, box-shadow 0.25s ease; } .rt-video--brand .rt-video__facade:hover { transform: translateY(-4px); box-shadow: 0 34px 70px rgba(8, 18, 36, 0.5); } /* Kuşak zaten koyu olduğu için kapağın üstüne ayrıca karartma konmaz. */ .rt-video--brand .rt-video__facade::after { display: none; } /* Logo ÜST ÜÇTE BİRDE durur; oynat düğmesi ortada kalır, ikisi üst üste binmez. */ .rt-video__cover { display: grid; align-content: start; justify-items: center; padding-block-start: 13%; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: linear-gradient(140deg, #16305C 0%, var(--rt-c-navy-deep) 55%, #241A2E 100%); } /* Renk filtresi YOK: brightness(0) invert(1) saydam olmayan HER pikseli beyaza çevirir, balonun içindeki beyaz "&" de kaybolurdu. Koyu zemin sürümü ayrı dosyadır (brand/logo-mark-dark.svg). */ .rt-video__cover-logo { inline-size: min(34%, 240px); block-size: auto; } /* Oynat düğmesi YUVARLAKTIR ve yalnız simge taşır; yazısı ekran okuyucular için gizlenir — uzun etiket kapağın ortasında görsel gürültü yapıyordu. Halkalar düğmenin arkasından genişler. */ .rt-video--brand .rt-video__play { /* 72 %: sarı düğmenin halkası logonun "&" balonuna değiyordu (2026-09-14 ekranda görüldü). */ inset: 72% auto auto 50%; transform: translate(-50%, -50%); margin: 0; padding: 0; inline-size: 76px; block-size: 76px; min-block-size: 0; justify-content: center; border-radius: 50%; box-shadow: 0 10px 24px rgba(8, 18, 36, 0.32); } /* SARI OYNAT DÜĞMESİ (Owner 2026-09-14, birebir: "video ikonumuz da onlarınki gibi olsun"): Novakid'deki gibi parlak sarı daire ve içinde lacivert, köşeleri yumuşak dolu üçgen. Simgenin ince dış halkası bu düğmede çizilmez. */ .rt-video--brand .rt-video__play .rt-icon { inline-size: 64px; block-size: 64px; } .rt-video--brand .rt-video__play .rt-icon circle { display: none; } .rt-video--brand .rt-video__play > span { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rt-video--brand .rt-video__play::before, .rt-video--brand .rt-video__play::after { content: ""; position: absolute; inset: -6px; z-index: -1; border-radius: var(--rt-rd-pill); border: 2px solid rgba(255, 214, 10, 0.6); } .rt-video--brand .rt-video__facade:hover .rt-video__play { transform: translate(-50%, -50%) scale(1.04); } .rt-video--brand .rt-video__note { text-align: center; color: rgba(255, 255, 255, 0.75); } .rt-video__facade::after { content: ""; position: absolute; inset: 0; background: var(--rt-video-scrim); } .rt-video__play { position: absolute; z-index: 1; inset-inline-start: var(--rt-sp-4); inset-block-end: var(--rt-sp-4); margin-inline-end: var(--rt-sp-4); display: inline-flex; align-items: center; gap: var(--rt-sp-3); min-block-size: var(--rt-target-comfort); padding: var(--rt-sp-2) var(--rt-sp-4); border-radius: var(--rt-rd-pill); /* Bütün video kapaklarında oynat düğmesi aynı sarıdır (Owner 2026-09-14: "video ikonumuz da onlarınki gibi olsun"). */ background: #FFDD33; color: var(--rt-c-navy-deep); font-weight: var(--rt-fw-bold); } .rt-video__facade:hover .rt-video__play { background: #FFD000; } .rt-video__frame { display: block; inline-size: 100%; max-inline-size: 720px; aspect-ratio: 16 / 9; border: 0; border-radius: var(--rt-rd-lg); background: var(--rt-surface-inverse); } /* --- Dekoratif marka çizimi -------------------------------------------------- */ .rt-illus { inline-size: 100%; max-inline-size: 460px; margin-inline: auto; } .rt-illus__halo { fill: var(--rt-illus-halo); } .rt-illus__bubble-a { fill: var(--rt-illus-a); } .rt-illus__bubble-b { fill: var(--rt-illus-b); } .rt-illus__lines line { stroke: var(--rt-illus-line); stroke-width: 10; stroke-linecap: round; } .rt-illus__root { fill: none; stroke: var(--rt-illus-root); stroke-width: 6; stroke-linecap: round; } .rt-illus__seed { fill: var(--rt-illus-root); } /* --- Profil zaman çizelgesi, yaş bantları, "Türkçe nerede yaşar" -------------- */ .rt-timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .rt-timeline__title { font-size: var(--rt-f-md); margin-block-start: var(--rt-sp-3); } .rt-timeline__item { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--rt-sp-3); padding-block: var(--rt-sp-3); border-block-start: 1px solid var(--rt-border-subtle); } .rt-timeline__years { font-size: var(--rt-f-sm); color: var(--rt-text-secondary); font-variant-numeric: tabular-nums; } .rt-timeline__what { grid-column: 2; display: flex; flex-direction: column; gap: 2px; } /* ÖZGEÇMİŞ (Owner 2026-09-12, birebir: "sayfa kurgusu https://preply.com/tr/öğretmen/75020 buradaki gibi olacak eğitim iş deneyimi ve sertifikalar kısmında"). Ölçüler örnekten 1280 px'te alındı: 32/36 başlık, 16/24 600 sekmeler (8×16 iç boşluk), etkin sekmenin altında renkli çizgi, kayıt satırı 110 px yıl + kalan genişlik, satırlar arası 16 px, metin 16/24, onay satırı 14/20 600 yeşil + 16 px ikon. Renkler BİZİMDİR. */ .rt-resume { display: flex; flex-direction: column; gap: var(--rt-sp-4); } .rt-resume__title { margin: 0; font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2rem); line-height: 1.125; } /* Sekmeler sığmazsa SARAR (2026-09-14): yatay kaydırma görünmez bir ipucuyla üçüncü sekmeyi "İş deneyi" diye kesiyordu. */ .rt-resume__tabs { display: flex; flex-wrap: wrap; gap: 4px; border-block-end: 1px solid var(--rt-border-subtle); } .rt-resume__tab { position: relative; flex: none; min-block-size: 44px; padding: 8px 16px; border: 0; border-radius: 8px 8px 0 0; background: none; cursor: pointer; font: inherit; font-size: 1rem; line-height: 1.5; font-weight: 600; white-space: nowrap; color: var(--rt-text-secondary); transition: color 0.15s ease, background-color 0.15s ease; } .rt-resume__tab:hover { color: var(--rt-text-heading); background: var(--rt-surface-sunken); } .rt-resume__tab[aria-selected="true"] { color: var(--rt-text-heading); } .rt-resume__tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 4px; border-radius: 2px; background: var(--rt-c-coral); } .rt-resume__panel { display: flex; flex-direction: column; gap: var(--rt-sp-4); } .rt-resume__panel[hidden], .rt-resume__item[hidden], .rt-resume__tabs[hidden] { display: none; } .rt-resume__group { margin: var(--rt-sp-2) 0 0; font-size: var(--rt-f-md); } .rt-resume.is-tabbed .rt-resume__group { display: none; } .rt-resume__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .rt-resume__item { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; } .rt-resume__years, .rt-resume__name, .rt-resume__sub { margin: 0; font-size: 1rem; line-height: 1.5; } .rt-resume__years { color: var(--rt-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; } .rt-resume__name { color: var(--rt-text-heading); } .rt-resume__sub { color: var(--rt-text-secondary); } .rt-resume__what { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; } .rt-resume__verified { margin: 4px 0 0; display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; line-height: 1.43; font-weight: 600; color: var(--rt-c-green); } .rt-resume__verified .rt-icon { inline-size: 16px; block-size: 16px; flex: none; } .rt-resume__more { align-self: flex-start; } @media (max-width: 479px) { .rt-resume__item { grid-template-columns: minmax(0, 1fr); gap: 2px; } } .rt-bands { margin: 0; display: grid; gap: var(--rt-sp-2); } .rt-bands__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--rt-sp-3); padding: var(--rt-sp-3) var(--rt-sp-4); background: var(--rt-surface-default); border: 1px solid var(--rt-border-subtle); border-radius: var(--rt-rd-md); } .rt-bands__range { font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-bands__text { margin: 0; } } /* ============================================================================= 7. PAGE — sayfa şablonu yerleşimleri (kabuk dahil) ============================================================================= */ @layer rt.page { .rt-shell { display: flex; flex-direction: column; min-block-size: 100vh; min-block-size: 100dvh; } .rt-shell__main { flex: 1 0 auto; } /* --- Başlık ------------------------------------------------------------ */ .rt-header { position: sticky; inset-block-start: 0; z-index: var(--rt-z-sticky); background: var(--rt-surface-default); border-block-end: 1px solid var(--rt-border-subtle); } .rt-header__inner { display: flex; align-items: center; gap: var(--rt-sp-4); min-block-size: var(--rt-header-height); } /* Koyu hero'lu sayfada üst bar en üstte kuşakla AYNI renktir; kaydırınca beyaza döner (rt.js). */ .rt-header--over { background: var(--rt-surface-inverse); border-block-end-color: transparent; transition: background-color 200ms ease; } .rt-header--over :is(.rt-nav-link, .rt-btn--quiet) { color: var(--rt-text-on-inverse); } /* İki logo dosyası: renkli ve beyaz. Filtre KULLANILMAZ — filtre "&" işaretini de beyazlatıp yok ediyordu. Hangi sürümün görüneceğine barın durumu karar verir. */ .rt-header__logo--white { display: none; } .rt-header--over .rt-header__logo--color { display: none; } .rt-header--over .rt-header__logo--white { display: block; } .rt-header--over.is-scrolled { background: var(--rt-surface-default); } .rt-header--over.is-scrolled :is(.rt-nav-link, .rt-btn--quiet) { color: var(--rt-text-heading); } .rt-header--over.is-scrolled .rt-header__logo--color { display: block; } .rt-header--over.is-scrolled .rt-header__logo--white { display: none; } @media (prefers-reduced-motion: reduce) { .rt-header--over { transition: none; } } /* Üst bardaki tek eylem: giriş. Hap biçimli, ince çerçeveli ve oklu — sakin ama davetkâr (Owner 2026-09-12: "sadece giriş olsun … oklu vs hoş olsun"). */ .rt-header__login { display: inline-flex; align-items: center; gap: var(--rt-sp-2); min-block-size: 44px; padding-inline: var(--rt-sp-4); border: 1.6px solid currentColor; border-radius: var(--rt-rd-pill); font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); text-decoration: none; } .rt-header__login svg { inline-size: 16px; block-size: 16px; transition: transform var(--rt-mo-fast) var(--rt-mo-ease); } .rt-header__login:hover { background: var(--rt-action-quiet-bg-hover); text-decoration: none; } /* Üzerine gelince ok kısa bir adım atar (2026-09-13 etkileşim standardı). Sağdan sola dillerde ayna: dönüşümler sağdan sola uygulanır, ayna + (+3px) oku SOLA taşır. Hareketi azalt tercihinde adım yok. */ @media (prefers-reduced-motion: no-preference) { .rt-header__login:hover svg { transform: translateX(3px); } [dir="rtl"] .rt-header__login:hover svg { transform: scaleX(-1) translateX(3px); } } @media (prefers-reduced-motion: reduce) { .rt-header__login svg { transition: none; } } /* Masaüstü dil seçici (2026-09-14): iki kısa kod, etkin olan dolu hap. Koyu kuşakta beyaz tonlar. */ .rt-header__locale { display: inline-flex; padding: 0; border: 1px solid var(--rt-border-subtle); border-radius: var(--rt-rd-pill); } .rt-header__locale a { display: grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; border-radius: var(--rt-rd-pill); font-size: var(--rt-f-xs); font-weight: var(--rt-fw-bold); letter-spacing: 0.04em; color: var(--rt-text-secondary); text-decoration: none; } .rt-header__locale a:hover { color: var(--rt-text-heading); text-decoration: none; } .rt-header__locale a[aria-current] { background: var(--rt-surface-inverse); color: var(--rt-text-on-inverse); } .rt-header--over:not(.is-scrolled) .rt-header__locale { border-color: rgba(255, 255, 255, 0.4); } .rt-header--over:not(.is-scrolled) .rt-header__locale a { color: rgba(255, 255, 255, 0.8); } .rt-header--over:not(.is-scrolled) .rt-header__locale a[aria-current] { background: var(--rt-c-white); color: var(--rt-c-navy-deep); } .rt-header--over .rt-header__login { color: var(--rt-text-on-inverse); } /* Koyu kuşağın üstünde giriş SESSİZ kalır (yeni velinin ana eylemi hero'daki karttır): çerçeve yarı saydam beyaz, dolgu yok; kaydırınca beyaz barda normal rengine döner. */ .rt-header--over:not(.is-scrolled) .rt-header__login { border-color: rgba(255, 255, 255, 0.55); } .rt-header--over .rt-header__login:hover { background: rgba(255, 255, 255, 0.14); } .rt-header--over.is-scrolled .rt-header__login { color: var(--rt-text-heading); } /* Yaş kutusunun üstündeki tek satır. */ .rt-header__brand { display: inline-flex; align-items: center; gap: var(--rt-sp-2); flex: 0 0 auto; min-block-size: var(--rt-target-min); } .rt-header__brand img { max-block-size: 40px; inline-size: auto; } /* Owner 2026-09-12 logosu: yatay kilit (2172x724), üst barda yüksekliğe göre ölçeklenir. En-boy oranı img'nin width/height'ından gelir, bu yüzden yükleme sırasında yerleşim kaymaz. */ /* Owner 2026-09-12 (birebir): "yazıların olduğu alanı büyütmeden sadece logoyu büyüt … alan sabit kalsın." Bu yüzden logo, çubuğun YÜKSEKLİĞİNİ değiştirmeden ondan taşar: marka bağlantısı çubuk yüksekliğinde sabit bir kutudur, logo o kutunun içinde dikey ortalanmış, kutudan büyük çizilir. Çubuğun kendi yüksekliği (--rt-header-height) ve dokunma hedefleri değişmez. */ /* Koyu hero'lu sayfada üst bar en üstte kuşakla AYNI renktir; kaydırınca beyaza döner (rt.js). */ .rt-header--over { background: var(--rt-surface-inverse); border-block-end-color: transparent; transition: background-color 200ms ease; } .rt-header--over :is(.rt-nav-link, .rt-btn--quiet) { color: var(--rt-text-on-inverse); } /* İki logo dosyası: renkli ve beyaz. Filtre KULLANILMAZ — filtre "&" işaretini de beyazlatıp yok ediyordu. Hangi sürümün görüneceğine barın durumu karar verir. */ .rt-header__logo--white { display: none; } .rt-header--over .rt-header__logo--color { display: none; } .rt-header--over .rt-header__logo--white { display: block; } .rt-header--over.is-scrolled { background: var(--rt-surface-default); } .rt-header--over.is-scrolled :is(.rt-nav-link, .rt-btn--quiet) { color: var(--rt-text-heading); } .rt-header--over.is-scrolled .rt-header__logo--color { display: block; } .rt-header--over.is-scrolled .rt-header__logo--white { display: none; } @media (prefers-reduced-motion: reduce) { .rt-header--over { transition: none; } } .rt-header__brand { position: relative; block-size: var(--rt-header-height); inline-size: clamp(132px, 17vw, 172px); } /* Seçici ÖZGÜLLÜĞÜ önemlidir: yukarıdaki `.rt-header__brand img` kuralı (0,1,1) tek sınıflı bir kuralı (0,1,0) ezip logoyu 40 piksele kilitliyordu — logo büyütme istekleri bu yüzden işe yaramıyordu. Bu yüzden kural marka kutusuyla birlikte yazılır. */ .rt-header__brand .rt-header__logo { position: absolute; inset-block-start: 50%; inset-inline-start: 0; transform: translateY(-50%); /* Owner 2026-09-12: eski 40 piksel küçük, 110 ve 76 piksel büyüktü; yerleşen ölçü budur — eskisinden belirgin biçimde büyük ama çubuğu ezmiyor. Çubuk yüksekliği hiç değişmez. */ block-size: clamp(24px, 2.4vw, 30px); inline-size: auto; max-block-size: none; max-inline-size: 100%; } /* Yalnız metin büyütmede (%200) bar taşmasın: gezinme gerekirse ikinci satıra sarar (a11y incelemesi 2026-09-13). */ .rt-header__nav { display: none; flex-wrap: wrap; align-items: center; gap: var(--rt-sp-5); margin-inline-start: auto; min-inline-size: 0; } .rt-header__actions { display: flex; align-items: center; gap: var(--rt-sp-2); } .rt-nav-link { display: inline-flex; align-items: center; min-block-size: var(--rt-target-min); padding-block: var(--rt-sp-2); color: var(--rt-text-heading); font-weight: var(--rt-fw-medium); font-size: var(--rt-f-sm); border-block-end: 2px solid transparent; } .rt-nav-link:hover { text-decoration: none; border-block-end-color: var(--rt-accent-rule); } .rt-nav-link[aria-current="page"] { border-block-end-color: var(--rt-action-primary-bg); font-weight: var(--rt-fw-bold); } .rt-burger { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--rt-target-min); block-size: var(--rt-target-min); margin-inline-start: auto; background: transparent; border: 1px solid var(--rt-border-subtle); border-radius: var(--rt-rd-sm); color: var(--rt-text-heading); cursor: pointer; } @media (min-width: 960px) { .rt-header__nav { display: flex; } .rt-burger { display: none; } } /* --- Panel kabuğu: rol farkındalıklı yan gezinme ----------------------- */ .rt-app { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rt-sp-5); align-items: start; } .rt-sidenav { display: flex; flex-direction: row; gap: var(--rt-sp-1); overflow-x: auto; padding-block-end: var(--rt-sp-2); scrollbar-width: thin; } .rt-sidenav__item { display: flex; align-items: center; gap: var(--rt-sp-3); flex: 0 0 auto; min-block-size: var(--rt-target-min); padding: var(--rt-sp-2) var(--rt-sp-4); border-radius: var(--rt-rd-md); color: var(--rt-text-heading); font-weight: var(--rt-fw-medium); } .rt-sidenav__item:hover { background: var(--rt-action-quiet-bg-hover); text-decoration: none; } .rt-sidenav__item[aria-current="page"] { background: var(--rt-surface-inverse); color: var(--rt-text-on-inverse); } @media (min-width: 960px) { .rt-app { grid-template-columns: 264px minmax(0, 1fr); gap: var(--rt-sp-6); } .rt-sidenav { position: sticky; inset-block-start: calc(var(--rt-header-height) + var(--rt-sp-4)); flex-direction: column; overflow-x: visible; padding-block-end: 0; } } /* --- Çocuk kabuğu: daha büyük hedef, daha az yoğunluk, satın alma yok --- */ .rt-shell--child { --rt-target-min: 56px; --rt-target-comfort: 56px; --rt-f-md: 1.0625rem; } .rt-shell--child .rt-sidenav__item { font-size: var(--rt-f-lg); } .rt-shell--child .rt-card { border-radius: var(--rt-rd-lg); } /* --- Alt bilgi --------------------------------------------------------- */ /* --- Alt bilgi (Owner 2026-09-12: "modern ux", sıfırdan yeniden kurgu) ---------- Eski hâli düz lacivert bir blok ve altı sıra bağlantıydı; hiyerarşi yoktu. Yeni hâlde: üstte ince altın bir ışık çizgisi (markanın vurgu rengi), derinlik veren yumuşak bir degrade, marka sütunu logoyla, bağlantı başlıkları daha sessiz, bağlantılar hover'da altın çizgiyle yanıt veriyor. Renkler yalnız token'lardan gelir. */ .rt-footer { position: relative; background: radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, 0.07), transparent 60%), var(--rt-surface-inverse); color: var(--rt-text-on-inverse); padding-block: var(--rt-sp-8) var(--rt-sp-5); margin-block-start: var(--rt-sp-8); } .rt-footer::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: linear-gradient(90deg, var(--rt-c-coral), var(--rt-c-gold), var(--rt-c-coral)); } .rt-footer a { color: var(--rt-text-on-inverse-muted); } .rt-footer a:hover { color: var(--rt-text-on-inverse); } .rt-footer :is(h2, h3, h4) { color: var(--rt-text-on-inverse); font-size: var(--rt-f-sm); text-transform: uppercase; letter-spacing: 0.08em; } .rt-footer__link { display: inline-flex; align-items: center; min-block-size: var(--rt-target-min); } /* .rt-footer__bottom tanımı kamu alt bilgisi bölümündedir (tek kural; eski ikinci tanım 2026-09-13'te silindi). */ /* İletişim kanalları: etiket üstte küçük, değer altta okunur — telefon ve e-posta göz taramasında ayrılır. */ .rt-footer__channel-label { text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; } .rt-footer__channel .rt-footer__link { font-weight: var(--rt-fw-medium); } /* --- Pazarlama sayfası şablonu ----------------------------------------- */ .rt-hero { padding-block: var(--rt-sp-7); } .rt-hero__inner { display: grid; gap: var(--rt-sp-6); align-items: center; grid-template-columns: minmax(0, 1fr); } .rt-hero__title { font-family: var(--rt-f-display); } @media (min-width: 960px) { .rt-hero { padding-block: var(--rt-sp-7) var(--rt-sp-8); } /* Sahne metinden geniş: hero'nun görsel ağırlığı sağda, iki bilgisayar arasındaki mesafe görünür olsun. */ .rt-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); gap: var(--rt-sp-6); align-items: start; } } /* --- Kamu sayfaları (2026-09-11) ------------------------------------------- */ .rt-header__cta-sm { margin-inline-start: auto; } .rt-header__cta-sm + .rt-burger { margin-inline-start: 0; } @media (max-width: 419.98px) { .rt-header__cta-sm { display: none; } .rt-header__cta-sm + .rt-burger { margin-inline-start: auto; } } .rt-hero--home { padding-block: var(--rt-sp-7) var(--rt-sp-8); } .rt-hero__copy { display: flex; flex-direction: column; gap: var(--rt-sp-4); max-inline-size: 40rem; } .rt-hero__title { font-size: clamp(2.125rem, 1.55rem + 2.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.02em; } .rt-hero__lead { max-inline-size: 36rem; } /* Hero sorusu: veli derdini tarif eder; soru cümlesi olduğu için büyük harf/aralıklı eyebrow biçimi kullanılmaz. */ .rt-hero__actions { display: flex; flex-wrap: wrap; gap: var(--rt-sp-3); margin-block-start: var(--rt-sp-2); } /* Çizim dekoratiftir: dar ekranda karar metninden ve eylemden önce gelmez, yer kaplamaz. */ .rt-hero__art { display: none; } /* --- Hero sahnesi: kendi çizimimiz, döngüsel canlandırma (Owner 2026-09-12) ---- Dış kütüphane yok; hareketin tamamı CSS. Hareket tercihi kapalıysa sahne durur ama görünür kalır. */ .rt-hero__art--scene { display: block; } /* Sahne hero'nun sağ yarısını dolduracak kadar büyük ve metinle aynı hizada yukarıda durur (Owner 2026-09-12: "hero çok aşağıda ve çok dar bir alanda … daha yukarıda ve daha geniş"). */ .rt-scene { inline-size: 100%; block-size: auto; max-block-size: 700px; overflow: visible; } .rt-hero__art--scene { align-self: start; margin-block-start: calc(var(--rt-sp-4) * -1); } @media (min-width: 1080px) { .rt-hero__art--scene { margin-inline-end: calc(var(--rt-sp-6) * -1); } } /* SVG'de boyanmayan her öğe siyah dolgu alır; bu yüzden sahnenin TAMAMI burada tanımlıdır. */ .rt-scene * { fill: none; stroke: none; } /* Dünya: deniz mavisi okyanus, tanınır kıta siluetleri, kutup buzulları (Owner 2026-09-12: "kıtalar ve renkler açısından daha iyi kurgula"). Kıta şeridi kayarak küreyi döndürür. */ /* Dünya renkleri CANLI (Owner 2026-09-12: "çok koyu ve birbirini boğmuş"): okyanus parlak deniz mavisi, kıtalar canlı yeşil (kıta rengi world.svg dosyasının içindedir). */ .rt-scene__ocean { fill: #2E9BE6; } /* Kıtalar ayrı bir dosyadan gelir (public/rt/brand/world.svg, CC0). Renk dosyanın içinde tanımlıdır; burada yalnız kenar yumuşatma ve mürekkep yoğunluğu ayarlanır. */ .rt-scene__world { opacity: 0.95; } /* Kutup buzulları KALDIRILDI (Owner 2026-09-12: "dünyanın altındaki ve üstündeki beyazlıkları da sil"). Ekrandaki küçük "kendi görüntün" pencereleri de kaldırıldı: sahne karışık görünüyordu. */ .rt-scene__globe-edge { fill: none; stroke: #1B7FC4; stroke-width: 3; } .rt-scene__meridian { stroke: var(--rt-c-white); stroke-width: 1.2; opacity: 0.22; fill: none; } /* Bağlantı artık kesik çizgi değil, SİNYAL ÇUBUKLARIDIR (Owner 2026-09-12): hep dolu ve yeşil, altındaki ince çizgi hattın kendisi. Eski kesik çizgi/akan nokta kuralları kaldırıldı. */ /* Bağlantı yayları: kesik çizgi, iki bilgisayarı birleştirir; balonla dönüşümlü görünür. */ /* Bağlantı renkleri FOSFORLU yeşildir (Owner 2026-09-12: "daha canlı ve fosforlu renkler olsun"); koyu monitör zemininde ve açık ekran içinde bağlantının çalıştığı uzaktan okunsun diye. */ /* BAĞLANTI (Owner 2026-09-12: "profesyonel görünmüyor … internet bağlantısı olduğu belli olsun"): kesikli yay yerine AĞ DİYAGRAMI dili — ince sürekli hat, uçlarında halkalı düğüm noktaları ve hat üzerinde akan veri paketleri. Kesik çizgi "çizim" gibi duruyordu; bu kurgu "veri akıyor" anlatıyor. */ /* Owner 2026-09-12: "bağlantı kesikli çizgi olacak" — ağ diyagramı dili korunur (düğüm + akan paket), hattın kendisi kesiklidir. */ .rt-scene__link { fill: none; stroke: #22C55E; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 9 9; opacity: 0.55; } /* Düğüm: dışı halka, içi dolu — ağ şemalarındaki uç nokta işareti. */ .rt-scene__node circle { fill: none; stroke: #22C55E; stroke-width: 2.5; } .rt-scene__node-core { fill: #16A34A; stroke: none; } /* Veri paketi: hat üzerinde ilerleyen parlak nokta. Yollar SVG'deki iki yayla birebir aynıdır; sahne koordinatları değişirse ikisi birlikte değişir. */ /* Veri paketi hattın BAŞINDA durur (hareketsiz modda düğümün üstünde). Hareket transform ile yapılır (rt-packet anahtar kareleri yayın 16 eşit uzunluklu noktasıdır): offset-path/offset-distance her karede yerleşim hesaplatıyordu ve sahne görünürken ana iş parçacığının %40'ını (telefonda 4x yavaşlatmada %93) tek başına harcıyordu (2026-09-17 ölçümü). */ .rt-scene__packet { fill: #00E676; } .rt-scene__packet--a, .rt-scene__packet--b { transform: translate(300px, 44px); } .rt-scene__packet--c, .rt-scene__packet--d { transform: translate(158px, 254px); } /* İki hat da her zaman görünür; hareket kapalıyken yerinde durur, yalnız kesikleri akmaz. */ .rt-scene__link--over, .rt-scene__link--under { opacity: 1; } .rt-scene__bar { fill: var(--rt-c-green); } .rt-scene__camera { fill: #6E7C8C; } .rt-scene__chin { fill: #2A3A52; } /* İki ayrı BİLGİSAYAR (Owner 2026-09-12: "iki farklı mekan iki farklı bilgisayar ekranı gibi tasarla"): koyu monitör gövdesi ve açık ekran; ekranın içinde karşı taraf görünür. */ /* Çerçeve ince: ekran olduğu anlaşılsın yeter, monitör gövdesi sahneden yer çalmaz (Owner 2026-09-12). */ .rt-scene__monitor { fill: var(--rt-c-navy-deep); } .rt-scene__screen { fill: #EAF2FA; } /* İki oda iki ayrı yer: çocuk serin mavi odada, öğretmen en açık yeşil odada (Owner 2026-09-12). */ .rt-scene__screen--teacher { fill: #F4FDF5; } /* Çevrimiçi göstergesi: dikkat çeken CANLI yeşil, yanıp söner (Owner 2026-09-12: "daha net ve belirgin bir yeşil olmalı. dikkat çekmeli"). Tema yeşili (--rt-c-green) koyu ve sakin olduğu için burada kasıtlı olarak daha parlak bir yeşil kullanılır; bu renk yalnız sahnenin canlı rozetine aittir. Hareket kapalıysa sabit ve tam parlak kalır. */ .rt-scene__live { fill: #00E676; } /* Çip bayrakları: renkler SINIFLA verilir. SVG'de fill özniteliği CSS'ten düşük önceliklidir ve sahnedeki `.rt-scene *` kuralı onu ezip bayrakları şeffaf bırakıyordu (Owner 2026-09-12). */ .rt-scene__f-white { fill: #FFFFFF; } /* Almanya bayrağı (Owner 2026-09-12: Ela artık Almanya'da): siyah / kırmızı / altın. */ .rt-scene__f-black { fill: #000000; } .rt-scene__f-red { fill: #DD0000; } .rt-scene__f-gold { fill: #FFCE00; } .rt-scene__f-tr { fill: #E30A17; } .rt-scene__chip-flag rect:first-child { stroke: rgba(0, 0, 0, 0.25); stroke-width: 0.8; } /* Kim olduğunu YAZAN etiket: sahnenin en güçlü işareti (Owner 2026-09-12). */ /* İsim bandı: yarı saydam MAVİ bant (Owner 2026-09-12; önce pembe denendi, Owner beğenmedi). Üstündeki beyaz yazı kalın olduğu için %72 opaklıkta okunur kalır. */ .rt-scene__chip { fill: var(--rt-c-navy); opacity: 0.72; } /* Ülke adı çipin içinde, ismin yanındadır (Owner 2026-09-12: "Ela - Almanya yazsın"). */ .rt-scene__chip-text { fill: var(--rt-c-white); font-family: var(--rt-f-body, inherit); font-size: 15px; font-weight: var(--rt-fw-bold); } /* Ortak yüz parçaları (Owner 2026-09-12: "daha sevimli … gözleri saçları ten rengi ve aksesuarlı"). İki farklı ten tonu kullanılır; ton, sahnenin kendi paletindedir ve başka hiçbir yerde kullanılmaz. */ .rt-scene { --rt-skin-child: #F4C9A6; --rt-skin-teacher: #D89B72; --rt-hair-child: #3A2A20; } .rt-scene__head--child { fill: var(--rt-skin-child); } .rt-scene__sclera { fill: var(--rt-c-white); } .rt-scene__pupil { fill: #2A2118; } .rt-scene__glint { fill: var(--rt-c-white); } /* Kirpikler kısa ve ince kalır; uzun çizildiğinde birbirine değip yüzü kirletiyordu (Owner 2026-09-12). */ /* Kirpik: her gözün üstünde üçer kısa tüy, ince ve yuvarlak uçlu. Kalın/uzun olduğunda gözü çerçeveleyip gözlük görüntüsü veriyordu; tek çizgi ise kaba duruyordu (Owner 2026-09-12). */ .rt-scene__teeth { fill: var(--rt-c-white); } .rt-scene__eye-happy { stroke: #2A2118; stroke-width: 3.4; stroke-linecap: round; fill: none; } .rt-scene__smile { stroke: #7A3B46; stroke-width: 3; stroke-linecap: round; fill: none; } .rt-scene__mouth-open { fill: #7A3B46; } /* Konuşma ağzı: gülümseme ")" yay, kahkaha "D" ağız, konuşma ise ikisinin arası — açılıp kapanan küçük bir "D". Varsayılan gizlidir; yalnız kendi konuşma anlarında görünür. */ /* Konuşma ağzı bir GRUPTUR (ağız boşluğu + diş sırası); animasyon grubun opaklığını oynatır. Renk gruba değil ŞEKİLLERE verilir: `.rt-scene *{fill:none}` grubu ezerdi. */ /* Ağız yalnız KENDİ balonu ekrandayken oynar; konuşanı hero-dialogue.js `data-speaker` ile söyler. */ /* Kollar VARSAYILAN OLARAK AŞAĞIDADIR; yalnız selamlama anında kalkar (bkz. is-greet kuralları). DÖNME EKSENİ, kolun BAŞLANGIÇ NOKTASIYLA aynı olmalıdır; aksi hâlde kol dönerken kökü gövdeden ayrılır ve takma kol gibi durur. Kol ağzı (sleeve) omuz ekini örter. */ .rt-scene__rig--child .rt-scene__waving { transform: rotate(140deg); transform-origin: 192px 322px; } /* Öğretmenin kolu ekranın ALT KENARININ ALTINA iner: görüntülü derste eller masada durur, havada asılı kalmaz (Owner 2026-09-12: "kolları sakat gibi duruyor" ve "ellerini sadece merhaba derken sallayacaklardı"). -62 derece kolu yana açıyordu; -130 derece aşağı indirir. */ .rt-scene__waving--teacher { transform: rotate(-130deg); transform-origin: 408px 348px; } .rt-scene__sleeve--teacher { fill: #AEC3D8; } .rt-scene__mouth-talk { opacity: 0; } .rt-scene[data-speaker="child"] .rt-scene__mouth-talk--child, .rt-scene[data-speaker="teacher"] .rt-scene__mouth-talk--teacher { opacity: 1; } .rt-scene__mouth-talk-in { fill: #7A3B46; } /* Üç hâl: düz çizgi -> gülümseme -> açık "D". Hareket kapalıyken yalnız gülümseme durur. */ .rt-scene__mouth-talk-line, .rt-scene__mouth-talk-smile { fill: none; stroke: #7A3B46; stroke-width: 3.2; stroke-linecap: round; opacity: 0; } .rt-scene__mouth-talk-smile { opacity: 1; } .rt-scene__mouth-talk-open { opacity: 0; } .rt-scene__blush { fill: var(--rt-c-coral); opacity: 0.38; } /* Yüz iki hâlde çizilir; CSS sırayla gösterir. Hareket kapalıysa yalnız sakin hâl görünür. */ .rt-scene__face--laugh { opacity: 0; } /* DİKKAT: sahnedeki `.rt-scene *` kuralı HER öğeye fill:none verir; bu yüzden renk GRUBA değil, grubun içindeki şekillere yazılmalıdır. Örgüler grup seçicisiyle boyanınca çizilmiyordu ve çocuk kel görünüyordu (Owner 2026-09-12 bildirdi). */ .rt-scene__braid circle { fill: var(--rt-hair-child); } .rt-scene__ribbon path, .rt-scene__ribbon circle { fill: #E30A17; } /* ÇOCUK: örgülü saç, kâkül, kıyafet */ .rt-scene__hair--child { fill: var(--rt-hair-child); } /* KAŞ YOKTUR (Owner 2026-09-12: "kaşa ve gözlüğe gerek yok"): yüzde yalnız iri gözler, ışıltılar, minik burun ve gülümseme var — bebeksi ve neşeli görünüm bundan geliyor. */ .rt-scene__cardigan { fill: var(--rt-c-coral); } .rt-scene__tee { fill: var(--rt-c-gold-tint); } .rt-scene__button { fill: var(--rt-c-coral-deep); } .rt-scene__arm--child { stroke: var(--rt-skin-child); stroke-width: 10; stroke-linecap: round; } .rt-scene__hand--child { fill: var(--rt-skin-child); } /* ÖĞRETMENİN ÇİZİMİ aşağıdaki "YALNIZ ÖĞRETMENİN ÇİZİMİ" bloğundadır; burada yalnız İKİ FİGÜRÜN ORTAK parçaları tanımlıdır. */ /* GÖZLÜK YOKTUR (Owner 2026-09-12: "gözlük gibi şeyler yapma", "Ela'nın gözlüğünü de sil"): iki figürde de yalnız göz, kirpik ve kaş vardır. Gözlük kuralları kaldırıldı; geri eklenmemeli. Kulaklıklar belirgin renktedir ("kulaklık renkleri hiç belli olmuyor") ve KULAK hizasındadır — göz hizasına konduğunda gözlük gibi görünüyordu. Bant ince, çünkü kalın bant saçı örtüyordu. */ /* Kulaklık saçtan belirgin biçimde ayrışsın diye kalın ve doygun renkte (Owner 2026-09-12: "kulaklık belli olması için saçtan belirgin bir şekilde farklı renkte olsun"). */ /* Kulaklık iyice belirgin: kalın bant, büyük pedler, koyu kontur (Owner 2026-09-12: "kulaklıklar belli değil. daha belirgin olsun"). */ .rt-scene__headband { stroke-width: 9; fill: none; stroke-linecap: round; } .rt-scene__earcup { stroke: var(--rt-c-navy-deep); stroke-width: 2; } .rt-scene__headband--child { stroke: var(--rt-c-coral-deep); } .rt-scene__earcup--child { fill: var(--rt-c-coral-deep); } .rt-scene__mic { stroke-width: 3.4; stroke-linecap: round; fill: none; } .rt-scene__mic--child { stroke: var(--rt-c-coral-deep); } .rt-scene__mic-tip--child { fill: var(--rt-c-coral-deep); } /* ================= YALNIZ ÖĞRETMENİN ÇİZİMİ (2026-09-12) ================= Owner bir illüstrasyon gönderdi ve birebir şunu söyledi: "sadecce öğretmeni değiştir dedim. konsept değişmesin ... sadece çizim olarak öğretmen bu kişinin aynısı olacak." Bu yüzden sahnenin KURGUSU (iki çapraz bilgisayar, dünya, kesikli bağlantı, balonlar) olduğu gibi durur; aşağıdaki kurallar yalnız öğretmen figürünü yeniler: iki topuz, pembe kulaklık, açık mavi polo, yeşil kukla. Bu blok kasıtlı olarak yukarıdaki öğretmen kurallarının SONRASINDADIR (aynı özgüllükte sonraki kural kazanır); bu yüzden ezilen her `--child` eşleniği hemen altında yeniden yazılır. UYARI (tekrarlayan tuzak): `.rt-scene *{fill:none}` her öğeyi şeffaflaştırır — renk GRUBA değil, ŞEKLE yazılır. Sınıf adı değiştirilirse animasyon ve test seçicileri de aranmalıdır. */ /* Öğretmenin teni illüstrasyondaki gibi açık; çocuğunki değişmedi. */ .rt-scene { --rt-skin-teacher: #F6C8A8; } /* Polo: açık mavi gövde, beyaz yaka, ince ön pat. Kol ağzı gövdeyle aynı kumaştır. */ .rt-scene__polo { fill: #BBD9EE; } .rt-scene__polo-collar { fill: #FFFFFF; } .rt-scene__polo-placket { fill: #E9EDF3; } .rt-scene__sleeve--teacher { fill: #BBD9EE; } /* Yakanın üstü boyundur ve ten rengindedir (Owner 2026-09-12). */ .rt-scene__neck { fill: var(--rt-skin-teacher); } /* Göğüsteki işaret markanın KENDİ logosudur (Owner'ın daha önceki kesin isteği: "sağ göğsünün tam üstünde olmalı logo, daha küçük olmalı"); illüstrasyondaki rozetin yerini birebir alır. Rengi dosyanın içindedir, bu yüzden burada boyama kuralı yoktur — varlığı browser.sceneAssets denetler. */ /* SAÇ (Owner 2026-09-12: "saçı değişmeden önceki gibi kıvırcık ve at kuyruğu olsun"): kıvırcık taç + at kuyruğu, ucunda altın bağ. Kulaklık illüstrasyondaki gibi PEMBEDİR. Renk GRUBA değil ŞEKLE verilir: `.rt-scene *{fill:none}` grup dolgusunu ezer. */ .rt-scene__hair--teacher { fill: #4A3227; } .rt-scene__curl circle { fill: #4A3227; } .rt-scene__ponytail path { fill: #4A3227; } .rt-scene__head { fill: var(--rt-skin-teacher); } .rt-scene__head--child { fill: var(--rt-skin-child); } .rt-scene__headband { fill: none; stroke: #F2799F; stroke-width: 9; stroke-linecap: round; } .rt-scene__earcup { fill: #F2799F; stroke: var(--rt-c-navy-deep); stroke-width: 2; } /* Çocuğun kulaklığı kendi rengindedir; üstteki iki kural onu da ezerdi. */ .rt-scene__headband--child { stroke: var(--rt-c-coral-deep); } .rt-scene__earcup--child { fill: var(--rt-c-coral-deep); } /* Elde TÜRK BAYRAĞI (Owner 2026-09-12: "elinde kukla değil türk bayrağı olsun"): dersin dili. Sallanma kuralı aşağıdadır (.rt-scene__holding, rt-sway) — dalgalanan bayraktır, el değil. */ .rt-scene__pole { stroke: var(--rt-c-gold-deep); stroke-width: 3.5; stroke-linecap: round; fill: none; } .rt-scene__hand-flag rect { fill: #E30A17; } .rt-scene__hand-flag .rt-scene__crescent, .rt-scene__hand-flag .rt-scene__star { fill: var(--rt-c-white); } /* Konuşma balonları */ /* Balonlar belirgin; metin kutudan taşmasın diye punto en uzun cümleye göre seçildi (Owner 2026-09-12). */ /* MODERN BALON (Owner 2026-09-12: "daha güzel dizayn … kimin konuştuğu belli olsun … daha modern"): kalın lacivert çerçeve kaldırıldı; balon konuşanın kendi renginde yumuşak bir yüzey, ince kenarlı. Kuyruk ekranı gösterir, böylece balon hangi bilgisayardan çıktığı belli olur. */ /* Balon BELİRGİNDİR (Owner 2026-09-12: "hiç belli olmuyor, belirgin ve harika bir dizayn olsun"): beyaz yüzey + konuşanın renginde kalın kenar + altında yumuşak gölge. Kenar rengi ve ekranı gösteren kuyruk, kimin konuştuğunu ad yazmadan anlatır. */ .rt-scene__say-box { fill: var(--rt-c-white); stroke-width: 3; } /* tspan AYRI bir öğedir ve `.rt-scene *` kuralından fill:none alır; yalnız `text` boyanırsa çok satırlı balonlar BOŞ çizilir (2026-09-12'de yaşandı). Bu yüzden tspan da açıkça boyanır. */ /* Punto en UZUN cümleye göre seçilir (Owner 2026-09-12: "konuşulanlar her zaman konuşma balonuna sığmalı"): 356 px'lik balonda 27 karakterlik cümle bu puntoda kenar boşluğuyla birlikte sığar. Senaryoya daha uzun bir cümle eklenirse punto değil CÜMLE kısaltılmalıdır. */ .rt-scene__say text, .rt-scene__say tspan { fill: var(--rt-text-heading); stroke: none; font-family: var(--rt-f-display); font-size: 21px; font-weight: var(--rt-fw-bold); } /* Yüzey saf beyaz kalır, KENARLIK kontrast rengi taşır (Owner 2026-09-12: "gerekiyorsa konuşma balonlarının çerçevesi kontrast bir renk olsun") — açık yeşil/krem zeminlerde balon böyle ayrışır. */ /* Renk, ile kopyalanan şeklin KENDİ sınıfına yazılır: torun seçiciler sınırını geçmez. */ .rt-scene__say-box--teacher { stroke: var(--rt-c-navy); } .rt-scene__say-box--child { stroke: var(--rt-c-coral-deep); } /* Akışta tek anda tek balon görünür. Hareket kapalıysa (ya da JS çalışmazsa) yalnız sunucunun yazdığı açılış cümlesi durur: sahne boş görünmez. Görünürlüğü artık hero-dialogue.js verir. */ .rt-scene__say { opacity: 0; } .rt-scene__say--step1, .rt-scene__say.is-on { opacity: 1; } /* El sallayan çocuk ve kuklayı tutan öğretmen (Owner 2026-09-12). Parmaklar artık ayrı dolgulu şekillerdir (lule3 bloğu); eski çizgi parmak/başparmak, kirpik, parlama, çocuk kol ağzı ve at kuyruğu bağı kuralları işaretlemede karşılığı kalmadığı için 2026-09-17'de silindi. */ .rt-scene__arm--teacher { stroke: var(--rt-skin-teacher); stroke-width: 10; stroke-linecap: round; fill: none; } .rt-scene__hand--teacher { fill: var(--rt-skin-teacher); } /* KONTUR ve bitmiş çizgi film görünümü (Owner 2026-09-14, birebir: "daha kaliteli daha iyi çizilmiş ve daha tatlı-güzel karakterler"): baş, saç, giysi, örgü/bukle ve eller ince koyu konturla çizilir; göz beyazı ince çizgili, göz kapağı yayı yumuşak ve kalın, saçta beyaz parlama. Bu kurallar `.rt-scene *` tabanından SONRA geldiği için stroke'u açar; renkler yine ŞEKLE yazılır. */ .rt-scene__head, .rt-scene__head--child, .rt-scene__hair--child, .rt-scene__hair--teacher, .rt-scene__cardigan, .rt-scene__polo, .rt-scene__braid circle, .rt-scene__curl circle, .rt-scene__ponytail path, .rt-scene__hand--child, .rt-scene__hand--teacher, .rt-scene__sleeve--teacher, .rt-scene__mouth-open { stroke: #2A2118; stroke-width: 2; stroke-linejoin: round; } .rt-scene__sclera { stroke: #2A2118; stroke-width: 1.4; } /* === HERO KARAKTERLERİ (lule3) BAŞLANGIÇ === */ /* Owner 2026-09-17 ikinci tur (birebir): "ikisinin de burnu yok. hala sevimsizler. saçları lüle lüle olmalı öğretmenin. ayrıca disney karakteri gibi çok güzel gözükmeli ela gözleri ve dudağının üstündeki o beniyle.. ayrıca yeterince neşeli değiller hala." Bu tur Moana dalgalarının ve 2026-09-12 "burun olmasın" kuralının YERİNE geçer (hero3 final: storybook tabanı + üç yargıcın düzeltmeleri). Owner seçimi 2026-09-17 (birebir): "son sürüm ama öğretmenin göz rengi ve kaş şekli 1. satırdaki gibi olsun" (1. satır = önceki demo; aynı günün "ela gözleri" isteğinin yerine geçer): öğretmenin iris rengi, bebek/iris oranı, iris ışığı rengi ve kaş yolu önceki demodan aynen alındı (final2). SAÇ (Owner 2026-09-18, birebir: "istediğim saç modeli tam olarak böyleydi öğretmende"; "saçları düzelt artık."; "A, fotoğrafa yaklaştır"; "saçların son halini göster. artık ben onaylayayım. yüzünü sonra yaparsın"): siyaha yakın, sıcak parıltılı, iri ve seyrek yaylı lüleler; çene-omuz hizasında en geniş tek yuvarlak kütle, tepe bandın altında pürüzsüz (boynuz yok), şakaklarda birer yumuşak lüle, iki omzun önüne lüle düşer (logo, yaka, bayraklı el ve kulaklık açık kalır). Yüz bu turda DEĞİŞMEDİ. Öğretmen: önceki demodaki ince kavisli kaşlar, badem gözler, önceki demodaki sıcak kehribar-kahve iris, üç göz ışığı, gülüş köşesinin üstünde ben, küçük sevimli burun (göz hizasının TAMAMEN altında, burun sırtı çizgisi yok, masaüstünde okunur), dudak kenarları kalkık küçük gülüş. Ela: minik düğme burun, iri açık yeşil gözler (iris kirpiğin altına girer, yanda ve altta ince beyaz), ince kirpik çizgisi, yukarıda kavisli kaşlar, yanakları kaldıran küçük dişli gülüş. İkisinde de ağız ve dişler küçük kalır (Owner 2026-09-14). Dinleyen karakter karşısındakini başıyla onaylar ve kaşlarını hafifçe kaldırır; gülme yalnız hero-dialogue.js'in işaretlediği cümlede olur (Owner 2026-09-14). Önceki turların kuralları sürer: göz altında şekil yok, göz kırpma üç çizilmiş pozun adım adım yer değiştirmesidir (açık -> yarım 33 ms -> kapalı 83 ms -> açık; yalnız opacity; 2026-09-17'de açılıştaki yarım kare kaldırıldı), sakin ve gülen yüz İKİ KARAKTERDE DE tek karede değişir, hareketsiz modda hiçbir şey oynamaz. TUZAK: `.rt-scene *{fill:none}` — renk GRUBA değil ŞEKLE yazılır; sınıf adı değişirse aşağıdaki animasyon seçicileri de değişmelidir. */ .rt-scene .rt-scene__kid *, .rt-scene .rt-scene__adult * { stroke: none; } /* ================= ELA ================= */ .rt-scene .rt-scene__kid .rt-scene-dn-hairback { fill: url(#rt-scene-dn-k-hairback); } .rt-scene .rt-scene__kid .rt-scene__arm--child { fill: url(#rt-scene-dn-k-sleeve); } .rt-scene .rt-scene__kid .rt-scene-dn-cuff { fill: none; stroke: #FFB6C6; stroke-width: 4; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene-dn-finger { fill: #F7C8AC; stroke: rgba(196, 118, 88, 0.65); stroke-width: 0.8; } .rt-scene .rt-scene__kid .rt-scene__hand--child { fill: url(#rt-scene-dn-k-hand); } .rt-scene .rt-scene__kid .rt-scene-dn-palm-line { fill: none; stroke: rgba(180, 100, 75, 0.45); stroke-width: 0.8; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene-dn-neck { fill: url(#rt-scene-dn-k-skin); } .rt-scene .rt-scene__kid .rt-scene-dn-ao { fill: url(#rt-scene-dn-k-ao); } .rt-scene .rt-scene__kid .rt-scene__tee { fill: url(#rt-scene-dn-k-tee); } .rt-scene .rt-scene__kid .rt-scene-dn-tee-rib { fill: none; stroke: #E4CFAC; stroke-width: 2.2; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene__cardigan { fill: url(#rt-scene-dn-k-cardi); } .rt-scene .rt-scene__kid .rt-scene-dn-cardi-hi { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 2.4; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene-dn-cardi-fold { fill: none; stroke: rgba(120, 20, 60, 0.22); stroke-width: 2; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene-dn-cardi-trim { fill: none; stroke: #FFB3C4; stroke-width: 3.6; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene__button { fill: #FFE6ED; stroke: rgba(150, 40, 80, 0.5); stroke-width: 0.8; } .rt-scene .rt-scene__kid .rt-scene-dn-braid-tuft { fill: url(#rt-scene-dn-k-braid); } .rt-scene .rt-scene__kid .rt-scene__braid circle { fill: url(#rt-scene-dn-k-braid); } .rt-scene .rt-scene__kid .rt-scene-dn-braid-line { fill: none; stroke: rgba(60, 25, 8, 0.5); stroke-width: 1.4; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene-dn-braid-hi { fill: none; stroke: rgba(255, 215, 170, 0.45); stroke-width: 1.8; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene-dn-ribbon-tail { fill: none; stroke: #D11E26; stroke-width: 2.6; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene__ribbon path, .rt-scene .rt-scene__kid .rt-scene__ribbon circle { fill: url(#rt-scene-dn-k-ribbon); } .rt-scene .rt-scene__kid .rt-scene__head { fill: url(#rt-scene-dn-k-skin); } .rt-scene .rt-scene__kid .rt-scene__hair--child { fill: url(#rt-scene-dn-k-hair); } .rt-scene .rt-scene__kid .rt-scene-dn-hair-strand { fill: none; stroke: rgba(80, 35, 12, 0.45); stroke-width: 1.3; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene-dn-hair-sheen { fill: rgba(255, 222, 180, 0.38); } .rt-scene .rt-scene__kid .rt-scene__headband { fill: none; stroke: url(#rt-scene-dn-k-band); stroke-width: 8; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene-dn-band-hi { fill: none; stroke: rgba(255, 255, 255, 0.38); stroke-width: 2.2; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene__earcup { fill: url(#rt-scene-dn-k-cup); } .rt-scene .rt-scene__kid .rt-scene-dn-cup-gloss { fill: rgba(255, 255, 255, 0.45); } .rt-scene .rt-scene__kid .rt-scene__mic { fill: none; stroke: #B8305A; stroke-width: 3; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene__mic-tip { fill: url(#rt-scene-dn-k-cup); } .rt-scene .rt-scene__kid .rt-scene-dn-freckle { fill: #C98060; opacity: 0.7; } .rt-scene .rt-scene__kid .rt-scene__sclera { fill: url(#rt-scene-dn-k-sclera); } .rt-scene .rt-scene__kid .rt-scene__iris { fill: url(#rt-scene-dn-k-iris); } .rt-scene .rt-scene__kid .rt-scene__iris-hi { fill: rgba(210, 255, 190, 0.35); } .rt-scene .rt-scene__kid .rt-scene__glint { fill: #FFFFFF; } .rt-scene .rt-scene__kid .rt-scene-dn-lash-line { fill: #3A1F14; } .rt-scene .rt-scene__kid .rt-scene__mouth-talk-in, .rt-scene .rt-scene__kid .rt-scene__mouth-open { fill: url(#rt-scene-dn-k-mouth); } .rt-scene .rt-scene__kid .rt-scene__blush { fill: url(#rt-scene-dn-k-blush); opacity: 1; } /* Ela'nın yüzü (hero3 final): göz altı çizgisi/torba yok; kırpma kapağı yüzle aynı ten degradesi; ağız ve dişler küçük, çizgiler ince. */ .rt-scene .rt-scene__kid .rt-scene-ex-k-lid { fill: url(#rt-scene-dn-k-skin); } .rt-scene .rt-scene__kid .rt-scene-ex-k-apple { fill: url(#rt-scene-dn-k-blush); } .rt-scene .rt-scene__kid .rt-scene-ex-k-apple-hi { fill: rgba(255, 255, 255, 0.3); } .rt-scene .rt-scene__kid .rt-scene__face .rt-scene__pupil { fill: #1F2A18; } .rt-scene .rt-scene__kid .rt-scene-ex-k-shut, .rt-scene .rt-scene__kid .rt-scene-ex-k-lidhalf { opacity: 0; } .rt-scene .rt-scene__kid .rt-scene-ex-k-lash-tick { fill: none; stroke: #3A1F14; stroke-width: 1.2; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene__face--laugh .rt-scene-h3-k-happy-tick { stroke-width: 1.5; } /* Burun: ucun altında yumuşak sıcak gölge, uçta küçük ışık. */ .rt-scene .rt-scene__kid .rt-scene-h3-k-nose-sh { fill: url(#rt-scene-h3-k-nose-g); } .rt-scene .rt-scene__kid .rt-scene-h3-k-nose { fill: rgba(176, 84, 62, 0.92); } .rt-scene .rt-scene__kid .rt-scene-h3-k-nose-hi { fill: rgba(255, 255, 255, 0.75); } .rt-scene .rt-scene__kid .rt-scene__face .rt-scene__brow { fill: none; stroke: #A36A43; stroke-width: 2.5; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene__face .rt-scene__smile { fill: none; stroke: #B5525A; stroke-width: 1.5; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene__face .rt-scene__mouth-talk-line, .rt-scene .rt-scene__kid .rt-scene__face .rt-scene__mouth-talk-smile { fill: none; stroke: #B5525A; stroke-width: 2; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene__face .rt-scene__eye-happy { fill: none; stroke: #3A1F14; stroke-width: 2.5; stroke-linecap: round; } .rt-scene .rt-scene__kid .rt-scene__face .rt-scene__teeth, .rt-scene .rt-scene__kid .rt-scene__face .rt-scene-dn-grin-teeth { fill: #FFFBF7; } .rt-scene .rt-scene__kid .rt-scene__face .rt-scene-dn-tongue { fill: #F08A96; } .rt-scene .rt-scene__kid .rt-scene-dn-grin-mouth { fill: url(#rt-scene-dn-k-mouth); } /* Kol dinlenirken gövdenin arkasında aşağıda durur (dönme ekseni omuz: 192,322). */ .rt-scene .rt-scene__rig--child .rt-scene__waving { transform: rotate(140deg); transform-origin: 192px 322px; } /* ================= DÜNYA ÖĞRETMEN ================= */ /* SAÇ (Owner 2026-09-18, birebir: "istediğim saç modeli tam olarak böyleydi öğretmende"; "saçları düzelt artık."; "A, fotoğrafa yaklaştır"; "saçların son halini göster. artık ben onaylayayım. yüzünü sonra yaparsın"): siyaha yakın TEK yuvarlak kütle + iri, seyrek, yaylı lüleler (renkler #120C0A–#2E2119 arası, düz #000 yok). Lüle halkası ile çoğaltılır; kopyası boyasını halkanın KENDİ sınıfından alır (ata seçicisi sınırını geçmez), bu yüzden halka kuralları yalnız sınıf seçicisidir. Halka gövdesi yukarıdan aşağı koyulaşan degrade; üst kenarda geniş yumuşak parıltı + sıcak kahve ışık + küçük parlak nokta, alt kenarda bir sonraki halkanın gölgesi. */ .rt-scene .rt-scene__adult .rt-scene-mx-t-hairback, .rt-scene .rt-scene__adult .rt-scene__curl circle, .rt-scene .rt-scene__adult .rt-scene-h5-t-clump { fill: url(#rt-scene-mx-t-hair); } .rt-scene .rt-scene__adult .rt-scene__hair--teacher { fill: url(#rt-scene-mx-t-front); } .rt-scene .rt-scene__adult .rt-scene-h3-t-capsheen { fill: none; stroke: rgba(140, 100, 78, 0.32); stroke-width: 2.2; stroke-linecap: round; } .rt-scene-h5-t-coil { fill: url(#rt-scene-h5-t-coil-g); stroke: none; } .rt-scene-h5-t-coil-lo { fill: none; stroke: rgba(6, 3, 2, 0.8); stroke-width: 1.1; stroke-linecap: round; } .rt-scene-h5-t-coil-gloss { fill: none; stroke: rgba(120, 94, 80, 0.16); stroke-width: 2.2; stroke-linecap: round; } .rt-scene-h5-t-coil-hi { fill: none; stroke: rgba(150, 118, 100, 0.52); stroke-width: 1.15; stroke-linecap: round; } .rt-scene-h5-t-coil-spec { fill: none; stroke: rgba(236, 214, 196, 0.6); stroke-width: 0.6; stroke-linecap: round; } /* Telefonda kaybolan ince çizgiler (2026-09-17 doğrulama: 375 px'te gülüş kıvrımı 0,56 px, pat ve yaka kenarı 0,6–0,7 px) ekrandan bağımsız 1 CSS px çizilir; masaüstünde (sahne ölçeği ≈ 1,04) kalınlık neredeyse aynıdır. */ .rt-scene .rt-scene__adult .rt-scene__smile, .rt-scene .rt-scene__adult .rt-scene-dn-placket-line, .rt-scene .rt-scene__adult .rt-scene-dn-collar-edge { vector-effect: non-scaling-stroke; stroke-width: 1px; } .rt-scene .rt-scene__adult .rt-scene__arm--teacher { fill: url(#rt-scene-dn-t-arm); } .rt-scene .rt-scene__adult .rt-scene-dn-finger-t { fill: #E2A77A; stroke: rgba(150, 85, 55, 0.6); stroke-width: 0.8; } .rt-scene .rt-scene__adult .rt-scene__hand--teacher { fill: url(#rt-scene-dn-t-hand); } .rt-scene .rt-scene__adult .rt-scene-dn-palm-line { fill: none; stroke: rgba(140, 80, 50, 0.45); stroke-width: 0.8; stroke-linecap: round; } .rt-scene .rt-scene__adult .rt-scene__neck { fill: url(#rt-scene-dn-t-skin); } .rt-scene .rt-scene__adult .rt-scene-dn-ao { fill: url(#rt-scene-dn-t-ao); } .rt-scene .rt-scene__adult .rt-scene__polo { fill: url(#rt-scene-dn-t-polo); } .rt-scene .rt-scene__adult .rt-scene__sleeve--teacher { fill: url(#rt-scene-dn-t-sleeve); } .rt-scene .rt-scene__adult .rt-scene-dn-seam { fill: none; stroke: rgba(80, 120, 160, 0.5); stroke-width: 1.3; stroke-linecap: round; } .rt-scene .rt-scene__adult .rt-scene-dn-polo-fold { fill: none; stroke: rgba(70, 110, 150, 0.28); stroke-width: 2; stroke-linecap: round; } .rt-scene .rt-scene__adult .rt-scene__chest-logo { opacity: 0.92; mix-blend-mode: multiply; } .rt-scene .rt-scene__adult .rt-scene-dn-polo-shade { fill: url(#rt-scene-dn-t-polo-shade); } .rt-scene .rt-scene__adult .rt-scene-dn-collar-in { fill: rgba(60, 40, 40, 0.35); } .rt-scene .rt-scene__adult .rt-scene__polo-placket { fill: #CFE3F3; } .rt-scene .rt-scene__adult .rt-scene-dn-placket-line { fill: none; stroke: rgba(80, 120, 160, 0.4); stroke-width: 1; } .rt-scene .rt-scene__adult .rt-scene-dn-polo-btn { fill: #F5F8FB; stroke: rgba(90, 120, 150, 0.6); stroke-width: 0.7; } .rt-scene .rt-scene__adult .rt-scene__polo-collar { fill: url(#rt-scene-dn-t-collar); } .rt-scene .rt-scene__adult .rt-scene-dn-collar-edge { fill: none; stroke: rgba(120, 140, 165, 0.55); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; } .rt-scene .rt-scene__adult .rt-scene__head { fill: url(#rt-scene-dn-t-skin); } /* Alt çene boyunca ve çenenin altında tek, eşit, yumuşak gölge. */ .rt-scene .rt-scene__adult .rt-scene-dn-jaw { fill: url(#rt-scene-dn-t-jawshade); } .rt-scene .rt-scene__adult .rt-scene-v3-t-chincast { fill: url(#rt-scene-dn-t-chincast); } .rt-scene .rt-scene__adult .rt-scene-v5-t-chin-hi { fill: url(#rt-scene-dn-t-chinlight); stroke: none; } .rt-scene .rt-scene__adult .rt-scene__headband { fill: none; stroke: url(#rt-scene-dn-t-band); stroke-width: 8; stroke-linecap: round; } .rt-scene .rt-scene__adult .rt-scene-dn-band-hi { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 2.2; stroke-linecap: round; } .rt-scene .rt-scene__adult .rt-scene__earcup { fill: url(#rt-scene-dn-t-cup); } .rt-scene .rt-scene__adult .rt-scene-dn-cup-gloss { fill: rgba(255, 255, 255, 0.45); } .rt-scene .rt-scene__adult .rt-scene-dn-mole { fill: #6A3B27; } /* Burun: ucun altında yumuşak gölge ve koyu sıcak alt kavis, uçta küçük ışık; burun sırtı çizgisi yok (gözlük köprüsü gibi okunmaz). */ .rt-scene .rt-scene__adult .rt-scene-h3-t-nose-sh { fill: url(#rt-scene-h3-t-nose-g); } .rt-scene .rt-scene__adult .rt-scene-h3-t-nose { fill: rgba(128, 62, 36, 0.88); } .rt-scene .rt-scene__adult .rt-scene-h3-t-nose-hi { fill: rgba(255, 238, 220, 0.72); } /* Yüz: sıcak koyu kahve, önceki demodaki ince kavisli kaş (yol aynen; renk saçla uyumlu koyu kahve); badem göz (üst kapak irise hafifçe değer), önceki demodaki sıcak kehribar-kahve iris ve iris ışığı (Owner 2026-09-17: "göz rengi ... 1. satırdaki gibi"), üç göz ışığı; üst kirpik çizgisi, dışta kanat ve iki kısa kirpik; hafif pembe kapak tonu; alt dudakta pembe ışık. */ .rt-scene .rt-scene__adult .rt-scene-mx-t-brow { fill: #4B2D20; } .rt-scene .rt-scene__adult .rt-scene-h3-t-lidtint { fill: rgba(176, 96, 92, 0.15); } /* Elmacık kemiği (Owner 2026-09-17 gece: "elmacık kemiği daha belirgin olsun"): ışık ve gölge yalnız degradedir, kenar çizgisi yok. */ .rt-scene .rt-scene__adult .rt-scene-h3-t-bone-hi { fill: url(#rt-scene-h3-t-bone-hi-g); } .rt-scene .rt-scene__adult .rt-scene-h3-t-bone-hi--r { fill: url(#rt-scene-h3-t-bone-hir-g); } .rt-scene .rt-scene__adult .rt-scene-h3-t-bone-sh { fill: url(#rt-scene-h3-t-bone-sh-g); } .rt-scene .rt-scene__adult .rt-scene-h3-t-cheekshine { fill: rgba(255, 244, 232, 0.5); } .rt-scene .rt-scene__adult .rt-scene__sclera { fill: url(#rt-scene-dn-t-sclera); } .rt-scene .rt-scene__adult .rt-scene__iris { fill: url(#rt-scene-mx-t-iris); } .rt-scene .rt-scene__adult .rt-scene__pupil { fill: #1A0C05; } .rt-scene .rt-scene__adult .rt-scene__iris-hi { fill: rgba(255, 200, 130, 0.32); } .rt-scene .rt-scene__adult .rt-scene__glint { fill: #FFFFFF; } .rt-scene .rt-scene__adult .rt-scene-mx-t-lash { fill: #28140B; } .rt-scene .rt-scene__adult .rt-scene-mx-t-wing { fill: none; stroke: #28140B; stroke-width: 0.95; stroke-linecap: round; } .rt-scene .rt-scene__adult .rt-scene-h3-t-lip { fill: rgba(214, 108, 114, 0.55); } .rt-scene .rt-scene__adult .rt-scene-mx-t-lid { fill: url(#rt-scene-dn-t-skin); } .rt-scene .rt-scene__adult .rt-scene-mx-t-half, .rt-scene .rt-scene__adult .rt-scene-mx-t-shut { opacity: 0; } /* Ağız: küçük açık gülüş, ince diş şeridi; köşelerde minik yukarı kıvrım. */ .rt-scene .rt-scene__adult .rt-scene-dn-grin-mouth, .rt-scene .rt-scene__adult .rt-scene__mouth-open, .rt-scene .rt-scene__adult .rt-scene__mouth-talk-in { fill: url(#rt-scene-dn-t-mouth); stroke: rgba(200, 96, 104, 0.6); stroke-width: 0.8; stroke-linejoin: round; } .rt-scene .rt-scene__adult .rt-scene__mouth-talk-smile { fill: url(#rt-scene-dn-t-mouth); stroke: none; } .rt-scene .rt-scene__adult .rt-scene__mouth-talk-line { fill: none; stroke: #A24D5B; stroke-width: 1.3; stroke-linecap: round; } .rt-scene .rt-scene__adult .rt-scene-dn-grin-teeth, .rt-scene .rt-scene__adult .rt-scene__teeth { fill: url(#rt-scene-dn-t-teeth); stroke: none; } .rt-scene .rt-scene__adult .rt-scene-dn-tongue { fill: #D9707E; } .rt-scene .rt-scene__adult .rt-scene__smile { fill: none; stroke: rgba(160, 80, 84, 0.6); stroke-width: 0.9; stroke-linecap: round; } .rt-scene .rt-scene__adult .rt-scene__eye-happy { fill: none; stroke: #2E1A10; stroke-width: 2; stroke-linecap: round; } .rt-scene .rt-scene__adult .rt-scene__face--laugh .rt-scene-ex-t-happy-tick { stroke-width: 1.4; } .rt-scene .rt-scene__adult .rt-scene-ex-t-apple { fill: url(#rt-scene-ex-t-apple); } .rt-scene .rt-scene__adult .rt-scene-v5-t-crease { fill: rgba(170, 92, 80, 0.4); stroke: none; } .rt-scene .rt-scene__adult .rt-scene__blush { fill: url(#rt-scene-mx-t-blush); opacity: 1; } /* Kahkahada bütün alt yüz güler (face-v5): çene 120 ms'de 2,3 birim iner, 0,3 taşıp oturur; ağız ve dil çeneyle birlikte açılır. */ .rt-scene__rig--teacher .rt-scene__adult .rt-scene-v5-t-jawrig { transform-box: fill-box; transform-origin: 50% 47.41%; } .rt-scene.is-laugh-t .rt-scene__rig--teacher .rt-scene__adult .rt-scene-v5-t-jawrig { transform: scale(1.0226, 1.0471); } .rt-scene.is-laugh-t .rt-scene__rig--teacher .rt-scene__adult .rt-scene-v3-t-chincast { transform: translateY(2.3px); } .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--laugh .rt-scene__mouth-open { transform-box: fill-box; transform-origin: 50% 0%; } @media (prefers-reduced-motion: no-preference) { .rt-scene__rig--teacher .rt-scene__adult .rt-scene-v5-t-jawrig, .rt-scene__rig--teacher .rt-scene__adult .rt-scene-v3-t-chincast { transition: transform 120ms ease-out; } .rt-scene.is-laugh-t .rt-scene__rig--teacher .rt-scene__adult .rt-scene-v5-t-jawrig { transition: none; animation: rt-t-jawdrop 180ms linear both; } .rt-scene.is-laugh-t .rt-scene__rig--teacher .rt-scene__adult .rt-scene-v3-t-chincast { transition: none; animation: rt-t-chindrop 180ms linear both; } .rt-scene.is-laugh-t .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--laugh .rt-scene__mouth-open { animation: rt-t-laughjaw-open 180ms linear both; } .rt-scene.is-laugh-t .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--laugh .rt-scene-dn-tongue { animation: rt-t-laughjaw-drop 180ms linear both; } } @keyframes rt-t-jawdrop { 0% { transform: scale(1, 1); animation-timing-function: ease-out; } 66.667% { transform: scale(1.0226, 1.0533); animation-timing-function: ease-in-out; } 100% { transform: scale(1.0226, 1.0471); } } @keyframes rt-t-chindrop { 0% { transform: translateY(0px); animation-timing-function: ease-out; } 66.667% { transform: translateY(2.6px); animation-timing-function: ease-in-out; } 100% { transform: translateY(2.3px); } } @keyframes rt-t-laughjaw-open { 0% { transform: scaleY(0.7); animation-timing-function: ease-out; } 66.667% { transform: scaleY(1.04); animation-timing-function: ease-in-out; } 100% { transform: none; } } @keyframes rt-t-laughjaw-drop { 0% { transform: translateY(-2.3px); animation-timing-function: ease-out; } 66.667% { transform: translateY(0.3px); animation-timing-function: ease-in-out; } 100% { transform: none; } } /* Konuşurken yanaklar gülümseyen ağız karesinde (0,9 s döngünün 300-600 ms'si) 0,8 birim kalkar; konuşmuyorken durur. DURMAK = DURAKLATMAK (2026-09-17 başarım ölçümü: döngü kimse konuşmazken de her karede çalışıyordu): animasyon yalnız öğretmen konuşurken ilerler; --rt-v5-cheek kayıtlı sayıdır ve 0,2 s'de söner, yanak yerine sıçramadan iner. */ @property --rt-v5-cheek { syntax: ""; inherits: false; initial-value: 0; } .rt-scene .rt-scene__rig--teacher .rt-scene__adult .rt-scene__blush.rt-scene-v5-t-cheek { --rt-v5-cheek: 0; } .rt-scene[data-speaker="teacher"] .rt-scene__rig--teacher .rt-scene__adult .rt-scene__blush.rt-scene-v5-t-cheek { --rt-v5-cheek: 1; } @media (prefers-reduced-motion: no-preference) { .rt-scene .rt-scene__rig--teacher .rt-scene__adult ellipse.rt-scene__blush.rt-scene-v5-t-cheek { animation: rt-v5-t-cheek-talk 0.9s linear infinite paused; transition: --rt-v5-cheek 0.2s ease-out; } .rt-scene[data-speaker="teacher"] .rt-scene__rig--teacher .rt-scene__adult ellipse.rt-scene__blush.rt-scene-v5-t-cheek { animation-play-state: running; } } @keyframes rt-v5-t-cheek-talk { 0%, 33.333% { transform: translateY(0px); animation-timing-function: ease-out; } 38.889% { transform: translateY(calc(var(--rt-v5-cheek) * -0.8px)); } 66.667% { transform: translateY(calc(var(--rt-v5-cheek) * -0.8px)); animation-timing-function: ease-in-out; } 88.889%, 100% { transform: translateY(0px); } } /* Kahkahada yanak elmaları 120 ms'de yükselir; sakin ve gülen yüz arasında yarı saydam çift poz yok (tek karede değişir). */ .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--laugh .rt-scene-ex-t-apple, .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--laugh .rt-scene-v5-t-crease { transform-box: fill-box; transform-origin: 50% 50%; } .rt-scene__rig--teacher .rt-scene__adult .rt-scene__blush { transform-box: fill-box; transform-origin: center; } /* kahkahada allığın yerini kapalı gözün altındaki yuvarlak pembe yanak alır (iki pembe leke üst üste binmez) */ .rt-scene.is-laugh-t .rt-scene__rig--teacher .rt-scene__adult .rt-scene__blush { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--calm, .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--laugh, .rt-scene .rt-scene__rig--teacher .rt-scene__adult .rt-scene__blush { transition: none; } .rt-scene.is-laugh-t .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--laugh .rt-scene-ex-t-apple, .rt-scene.is-laugh-t .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--laugh .rt-scene-v5-t-crease { animation: rt-t-cheek-lift 120ms ease-out both; } } @keyframes rt-t-cheek-lift { from { transform: translateY(1.8px) scale(0.9); } to { transform: none; } } .rt-scene .rt-scene__adult .rt-scene__pole { fill: none; stroke: #B8862A; stroke-width: 3.4; stroke-linecap: round; } .rt-scene .rt-scene__adult .rt-scene-dn-pole-hi { fill: none; stroke: #F0D28C; stroke-width: 1.1; stroke-linecap: round; } .rt-scene .rt-scene__adult .rt-scene__hand-flag rect { fill: url(#rt-scene-dn-t-flag); } .rt-scene .rt-scene__adult .rt-scene__hand-flag .rt-scene__crescent, .rt-scene .rt-scene__adult .rt-scene__hand-flag .rt-scene__star { fill: #FFFFFF; } .rt-scene .rt-scene__adult .rt-scene-dn-thumb-t { fill: #E0A477; } /* Doğal kollar: önkolda yumuşak gölge; bayraklı yumrukta direği saran parmaklar. */ .rt-scene .rt-scene__adult .rt-scene-ph-arm-shade { fill: none; stroke: rgba(140, 80, 50, 0.22); stroke-width: 2.2; stroke-linecap: round; } .rt-scene .rt-scene__adult .rt-scene-ph-finger-roll { fill: #E3AA7E; } .rt-scene .rt-scene__adult .rt-scene-ph-finger-gap { fill: none; stroke: rgba(150, 85, 50, 0.35); stroke-width: 0.8; stroke-linecap: round; } .rt-scene .rt-scene__adult .rt-scene-ph-knuckle-hi { fill: none; stroke: rgba(255, 230, 205, 0.55); stroke-width: 1; stroke-linecap: round; } /* EL EKRANIN ALTINDAN YÜKSELİR (Owner 2026-09-14, birebir: "el salladığı kolu hala takma kol gibi sallanıyor. düzelt"): görüntülü derste olduğu gibi önkol çerçevenin altından kalkar; dirsek hep çerçevenin dışındadır, kol gövdenin içinde bir eksen etrafında dönmez. Dinlenirken kol çerçevenin altında gizlidir. Sallama bilekten olur, önkol yalnız hafifçe eşlik eder. Yalnız "Merhaba" cümlesinde ve hareket tercihi açıkken oynar. */ .rt-scene .rt-scene__rig--teacher .rt-scene__waving--teacher { transform: translate(0px, 124px); transform-origin: 394px 392px; } .rt-scene .rt-scene__rig--teacher .rt-scene-ph-hand { transform-origin: 378px 304px; } @media (prefers-reduced-motion: no-preference) { .rt-scene.is-greet[data-speaker="teacher"] .rt-scene__rig--teacher .rt-scene__waving--teacher { animation: rt-wave-arm-teacher 2.4s cubic-bezier(0.35, 0, 0.25, 1) both; } .rt-scene.is-greet[data-speaker="teacher"] .rt-scene__rig--teacher .rt-scene-ph-hand { animation: rt-wave-hand-teacher 2.4s ease-in-out both; } } @keyframes rt-wave-arm-teacher { 0% { transform: translate(0px, 124px) rotate(6deg); } 18% { transform: translate(0px, 0px) rotate(0deg); } 38% { transform: translate(0px, 0px) rotate(-2.5deg); } 58% { transform: translate(0px, 0px) rotate(2deg); } 82% { transform: translate(0px, 0px) rotate(0deg); } 100% { transform: translate(0px, 124px) rotate(6deg); } } @keyframes rt-wave-hand-teacher { 0%, 16% { transform: rotate(0deg); } 26% { transform: rotate(-15deg); } 36% { transform: rotate(13deg); } 46% { transform: rotate(-15deg); } 56% { transform: rotate(13deg); } 66% { transform: rotate(-10deg); } 76% { transform: rotate(6deg); } 84%, 100% { transform: rotate(0deg); } } /* ================= GÖZ KIRPMA (iki karakter) ================= Klasik çizgi film kırpması: kapak kaymaz, göz yassılmaz. Açık / yarım / kapalı üç ayrı ÇİZİLMİŞ pozdur ve adım adım yer değiştirir (5,2 s döngü; açık -> yarım %91 -> kapalı %91,615 -> açık %93,212). Öğretmen 1,7 s gecikmeli, iki yüz birlikte kırpmaz. Eski rt-eyelid (scaleY) kırpması göz akına, bebeğe ve ışığa dokunmaz: aşağıdaki kurallar onu ezer. Hareketsiz modda kırpma yoktur. */ @media (prefers-reduced-motion: no-preference) { /* Ela: göz küresi (göz akı, iris, bebek, ışıklar) hiç yassılmaz, kapalı pozda gizlenir; yarım ve kapalı kapak pozları üstüne gelir; üst kirpik çizgisi ve köşe kirpikleri yalnız açık pozda. */ .rt-scene__rig--child .rt-scene__kid .rt-scene__face--calm .rt-scene__sclera, .rt-scene__rig--child .rt-scene__kid .rt-scene__face--calm .rt-scene__iris, .rt-scene__rig--child .rt-scene__kid .rt-scene__face--calm .rt-scene__iris-hi, .rt-scene__rig--child .rt-scene__kid .rt-scene__face--calm .rt-scene__pupil, .rt-scene__rig--child .rt-scene__kid .rt-scene__face--calm .rt-scene__glint { animation: rt-mx-blink-ball 5.2s linear infinite; } .rt-scene__rig--child .rt-scene__kid .rt-scene__face--calm .rt-scene-ex-k-lidopen { animation: rt-mx-blink-open 5.2s linear infinite; } .rt-scene__rig--child .rt-scene__kid .rt-scene__face--calm .rt-scene-ex-k-lidhalf { animation: rt-mx-blink-half 5.2s linear infinite; } .rt-scene__rig--child .rt-scene__kid .rt-scene__face--calm .rt-scene-ex-k-shut { animation: rt-mx-blink-shut 5.2s linear infinite; } /* öğretmen: göz küresi hiç yassılmaz, yarım ve kapalı kapak pozları üstüne gelir, dış kirpik kanadı yalnız açık pozda */ .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--calm .rt-scene__sclera, .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--calm .rt-scene__iris, .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--calm .rt-scene__iris-hi, .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--calm .rt-scene__pupil, .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--calm .rt-scene__glint { animation: none; } .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--calm .rt-scene-mx-t-wing, .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--calm .rt-scene-h3-t-lashopen { animation: rt-mx-blink-open 5.2s linear 1.7s infinite; } .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--calm .rt-scene-mx-t-half { animation: rt-mx-blink-half 5.2s linear 1.7s infinite; } .rt-scene__rig--teacher .rt-scene__adult .rt-scene__face--calm .rt-scene-mx-t-shut { animation: rt-mx-blink-shut 5.2s linear 1.7s infinite; } } /* Açılışta yarım poz YOK (2026-09-17 doğrulama: yarım kapak kısa da olsa uykulu/kayıtsız bir kare olarak yakalanıyordu): göz kapanırken 33 ms yarım, 83 ms kapalı, sonra doğrudan açık. */ @keyframes rt-mx-blink-open { 0% { opacity: 1; animation-timing-function: step-end; } 91% { opacity: 0; animation-timing-function: step-end; } 93.212% { opacity: 1; animation-timing-function: step-end; } 100% { opacity: 1; } } @keyframes rt-mx-blink-half { 0% { opacity: 0; animation-timing-function: step-end; } 91% { opacity: 1; animation-timing-function: step-end; } 91.615% { opacity: 0; animation-timing-function: step-end; } 100% { opacity: 0; } } @keyframes rt-mx-blink-shut { 0% { opacity: 0; animation-timing-function: step-end; } 91.615% { opacity: 1; animation-timing-function: step-end; } 93.212% { opacity: 0; animation-timing-function: step-end; } 100% { opacity: 0; } } @keyframes rt-mx-blink-ball { 0% { opacity: 1; animation-timing-function: step-end; } 91.615% { opacity: 0; animation-timing-function: step-end; } 93.212% { opacity: 1; animation-timing-function: step-end; } 100% { opacity: 1; } } /* ================= NEŞE VE CANLILIK (iki karakter) ================= Konuşan kişinin sabit gülüşü gizlenir, yerine açılıp kapanan konuşma ağzı görünür. Gülme yalnız cümlenin kendi işaretinde (is-laugh-c / is-laugh-t) olur; kendiliğinden gülme döngüsü yoktur. */ .rt-scene[data-speaker="child"] .rt-scene__rig--child .rt-scene-dn-grin, .rt-scene[data-speaker="teacher"] .rt-scene__rig--teacher .rt-scene-dn-grin { opacity: 0; } .rt-scene__rig--child .rt-scene__kid .rt-scene__blush { transform-box: fill-box; transform-origin: center; } .rt-scene.is-laugh-c .rt-scene__rig--child .rt-scene__kid .rt-scene__blush { transform: translateY(-2px) scale(1.1); } /* SIÇRAMASIZ GEÇİŞ (2026-09-17 doğrulama: konuşan değişince aynı gruptaki animasyon değişiyor, dönüşüm baştan başlıyor ve iki karakter her geçişte tek karede 9,5 birime kadar sıçrıyordu). Yeni düzen: - Dış grup (.rt-scene__bob) YALNIZ boştaki sallanmayı çalar ve animasyonu hiç değişmez; genliği --rt-idle ile yumuşakça kısılır. - Konuşma, dinleme ve kıkırdama iç içe üç gruptur (.rt-scene__act--talk/--listen/--giggle, hero-scene.php). Her biri kendi döngüsünü çalar; o hâl yokken DURAKLATILIR ve genliği (--rt-act) 0'a yumuşakça iner, hâl gelince döngü kaldığı yerden sürer ve genlik 1'e çıkar. Aynı yol kaşlarda: dinlerken kalkma (--rt-brow-lift) ve konuşurken tempo (--rt-brow-talk). Değişkenler @property ile kayıtlı sayıdır (geçiş yapılabilsin diye). Kaydı tanımayan tarayıcıda değer tek karede değişir; eski davranıştan kötü değildir. */ @property --rt-idle { syntax: ""; inherits: false; initial-value: 1; } @property --rt-act { syntax: ""; inherits: false; initial-value: 0; } @property --rt-brow-lift { syntax: ""; inherits: false; initial-value: 0; } @property --rt-brow-talk { syntax: ""; inherits: false; initial-value: 0; } @property --rt-sway { syntax: ""; inherits: false; initial-value: 1; } .rt-scene__bob { --rt-idle: 1; } .rt-scene__holding { --rt-sway: 1; } .rt-scene__act { --rt-act: 0; } .rt-scene .rt-scene__rig--teacher .rt-scene-mx-t-brow, .rt-scene .rt-scene__rig--child .rt-scene__face--calm .rt-scene__brow { transform-box: fill-box; transform-origin: center; --rt-brow-lift: 0; --rt-brow-talk: 0; } @media (prefers-reduced-motion: no-preference) { /* İki karakter de hafifçe sağa sola sallanır; konuşurken başı tempoyla hareket eder, gülerken kıkırdar. Dönme ekseni gövdenin alt ortasıdır, beden ekranın alt kenarından kopmaz. */ .rt-scene__bob--child { transform-origin: 149px 345px; animation: rt-bob 3.4s ease-in-out infinite; } .rt-scene__bob--teacher { transform-origin: 453px 372px; animation: rt-bob 3.8s ease-in-out -1.3s infinite; } .rt-scene__bob--child .rt-scene__act { transform-origin: 149px 345px; } .rt-scene__bob--teacher .rt-scene__act { transform-origin: 453px 372px; } .rt-scene__bob { transition: --rt-idle 0.4s ease-in-out; } .rt-scene__act { transition: --rt-act 0.3s ease-out; } .rt-scene__act--talk { animation: rt-bob-talk 0.9s ease-in-out infinite paused; } .rt-scene__act--listen { animation: rt-listen 1.8s ease-in-out infinite paused; } .rt-scene__act--giggle { animation: rt-giggle 0.44s ease-in-out infinite paused; transition-duration: 0.18s; } .rt-scene__bob--teacher .rt-scene__act--listen { animation-delay: -0.4s; } /* Biri konuşurken ya da biri gülerken boştaki sallanma kısılır (eskiden konuşma döngüsü onun YERİNE geçiyordu). */ .rt-scene[data-speaker] .rt-scene__bob, .rt-scene.is-laugh-c .rt-scene__bob--child, .rt-scene.is-laugh-t .rt-scene__bob--teacher { --rt-idle: 0.35; } /* DİNLEYEN ONAYLAR (Owner 2026-09-17: "ikisi de fazla donuk"): karşısındaki konuşurken dinleyen başıyla "hı hı" der gibi iki kez hafifçe iner ve kaşlarını az kaldırır; ilgili ve neşeli görünür. */ .rt-scene[data-speaker="child"] .rt-scene__bob--child .rt-scene__act--talk, .rt-scene[data-speaker="teacher"] .rt-scene__bob--teacher .rt-scene__act--talk, .rt-scene[data-speaker="teacher"] .rt-scene__bob--child .rt-scene__act--listen, .rt-scene[data-speaker="child"] .rt-scene__bob--teacher .rt-scene__act--listen, .rt-scene.is-laugh-c .rt-scene__bob--child .rt-scene__act--giggle, .rt-scene.is-laugh-t .rt-scene__bob--teacher .rt-scene__act--giggle { --rt-act: 1; animation-play-state: running; } /* Gülerken kıkırdama konuşmanın ve dinlemenin yerine geçer (eski kuralla aynı öncelik). */ .rt-scene.is-laugh-c .rt-scene__bob--child .rt-scene__act--talk, .rt-scene.is-laugh-c .rt-scene__bob--child .rt-scene__act--listen, .rt-scene.is-laugh-t .rt-scene__bob--teacher .rt-scene__act--talk, .rt-scene.is-laugh-t .rt-scene__bob--teacher .rt-scene__act--listen { --rt-act: 0; animation-play-state: paused; } .rt-scene .rt-scene__rig--teacher .rt-scene__face--calm .rt-scene-mx-t-brow, .rt-scene .rt-scene__rig--child .rt-scene__face--calm .rt-scene__brow { animation: rt-brow-talk 1.8s ease-in-out infinite paused; transition: --rt-brow-lift 0.35s ease-out, --rt-brow-talk 0.3s ease-out; } .rt-scene[data-speaker="child"] .rt-scene__rig--teacher .rt-scene__face--calm .rt-scene-mx-t-brow { --rt-brow-lift: 1; } .rt-scene[data-speaker="teacher"] .rt-scene__rig--child .rt-scene__face--calm .rt-scene__brow { --rt-brow-lift: 1.2; } /* Konuşan kaşlarını tempoyla oynatır: anlatırken yüz canlanır (en çok 1,4 birim). */ .rt-scene[data-speaker="child"] .rt-scene__rig--child .rt-scene__face--calm .rt-scene__brow, .rt-scene[data-speaker="teacher"] .rt-scene__rig--teacher .rt-scene__face--calm .rt-scene-mx-t-brow { --rt-brow-talk: 1; animation-play-state: running; } /* Ela'nın sakin ve gülen yüzü de öğretmeninki gibi TEK KAREDE değişir (2026-09-17 doğrulama: eski 0,3 s'lik opaklık geçişi ortada çift kaş, yarı saydam yeşil gözler ve çift ağız gösteriyordu). */ .rt-scene__rig--child .rt-scene__kid .rt-scene__face--calm, .rt-scene__rig--child .rt-scene__kid .rt-scene__face--laugh { transition: none; } } @keyframes rt-bob { 0%, 100% { transform: rotate(0deg) translateY(0px); } 25% { transform: rotate(calc(var(--rt-idle) * -2deg)) translateY(calc(var(--rt-idle) * -2px)); } 50% { transform: rotate(0deg) translateY(0px); } 75% { transform: rotate(calc(var(--rt-idle) * 2deg)) translateY(calc(var(--rt-idle) * -2px)); } } @keyframes rt-bob-talk { 0%, 100% { transform: rotate(calc(var(--rt-act) * -1.2deg)) translateY(0px); } 50% { transform: rotate(calc(var(--rt-act) * 1.5deg)) translateY(calc(var(--rt-act) * -3px)); } } @keyframes rt-giggle { 0%, 100% { transform: rotate(calc(var(--rt-act) * -2deg)) translateY(0px); } 50% { transform: rotate(calc(var(--rt-act) * 2deg)) translateY(calc(var(--rt-act) * -4px)); } } @keyframes rt-listen { 0%, 50%, 100% { transform: rotate(0deg) translateY(0px); } 15% { transform: rotate(calc(var(--rt-act) * 0.5deg)) translateY(calc(var(--rt-act) * 2px)); } 65% { transform: rotate(calc(var(--rt-act) * -0.3deg)) translateY(calc(var(--rt-act) * 1.6px)); } } @keyframes rt-brow-talk { 0%, 100% { transform: translateY(calc(var(--rt-brow-lift) * -1px)); } 35% { transform: translateY(calc(var(--rt-brow-lift) * -1px + var(--rt-brow-talk) * -1.4px)); } 70% { transform: translateY(calc(var(--rt-brow-lift) * -1px + var(--rt-brow-talk) * 0.3px)); } } /* === HERO KARAKTERLERİ (lule3) BİTİŞ === */ /* Hareket: tamamı CSS. "Hareketi azalt" tercihinde sahne durur ama eksiksiz görünür. */ @media (prefers-reduced-motion: no-preference) { /* Bağlantı yayları balonlarla senkron: 6 saniyelik döngü, balon akışının (12 s / 4 adım) tam yarısı. Böylece üst balon çıkarken alt yay, alt balon çıkarken üst yay görünür; ikisi hiç çakışmaz. Kesikler ayrıca akar: hat çalışıyor izlenimi verir. */ /* Hat SÜREKLİ görünür ve kesikleri akar (Owner 2026-09-12: "yukarıdan hep aynı noktada sabit ve dinamik olsun"). Balonlarla dönüşüm gerekmiyor: balonlar artık ekranların yanında, hat ise üstlerinden geçiyor — çakışmıyorlar. */ /* Veri paketleri hat boyunca akar: üst hatta ileri, alt hatta geri — gidiş-dönüş trafiği gibi. İkişer paket aralıklı çıkar, böylece akış sürekli görünür. */ .rt-scene__packet--a { animation: rt-packet 2.6s linear infinite; } .rt-scene__packet--b { animation: rt-packet 2.6s linear infinite 1.3s; } .rt-scene__packet--c { animation: rt-packet-back 2.6s linear infinite 0.65s; } .rt-scene__packet--d { animation: rt-packet-back 2.6s linear infinite 1.95s; } /* Düğümler nabız gibi atar: uç noktaların canlı olduğu görülsün. */ .rt-scene__node-core { animation: rt-blink 2s ease-in-out infinite; } /* Sinyal çubukları sırayla parlar: bağlantı canlı görünsün ama hep dolu kalsın. */ .rt-scene__bar--1 { animation: rt-bar 2.4s ease-in-out infinite; } .rt-scene__bar--2 { animation: rt-bar 2.4s ease-in-out infinite 0.2s; } .rt-scene__bar--3 { animation: rt-bar 2.4s ease-in-out infinite 0.4s; } .rt-scene__bar--4 { animation: rt-bar 2.4s ease-in-out infinite 0.6s; } /* ON adımlı akış (Owner 2026-09-12): HER CÜMLE ayrı balon, sırayla gelir ve gider; aynı kişinin arka arkaya cümleleri bile ayrı balonlardır. Döngü 25 saniye, adım başına 2,5 saniye. Sıra: Merhaba / Merhaba öğretmenim / Hoş geldin / Hoş bulduk 🙂 / Nasılsın? / İyiyim. / Teşekkürler / Siz nasılsınız? / Ben de iyiyim. / Teşekkür ederim. Pencere tam %10'dur, yani iki balon ASLA aynı anda görünmez. */ /* Tempo: Owner 2026-09-12 "konuşmaları daha seri geçsin" -> döngü 25 s'den 15 s'ye indi, adım başına 1,5 saniye. Cümleler kısa olduğu için okunurluk korunuyor. */ /* SENARYO ZAMAN ÇİZELGESİ (Owner 2026-09-12: "sürekli başa sarmasın … bir süre sonra … bekleyince bu konuşmalar ortaya çıksın"). Döngü 90 saniye = 30 kutu x 3 saniye. Kutu numarası balonun --step{n} sınıfıdır ve gecikmesi (n-1)x3 saniyedir; ATLANAN numaralar sessizliktir: 1-6 selamlaşma | 7-8 sessiz | 9-13 dersi neden seviyor | 14-15 sessiz 16-20 anneanne | 21-22 sessiz | 23-28 başlamayı bekleyenler | 29-30 sessiz Kutu numaraları hero-scene.php'deki $rtDialogue dizisiyle birebir aynıdır. */ /* KONUŞMA AKIŞI ARTIK JS'TEDİR (public/rt/hero-dialogue.js): yüz cümlelik senaryo sahne sahne akar, aradaki duraklarda susar. CSS yalnız görünme/kaybolma geçişini ve ağzı sürer. Yirmi iki kutuluk eski zaman çizelgesi kaldırıldı. */ .rt-scene__say { transition: opacity 0.25s ease-in-out; } /* Kahkaha ve el sallama da o anki cümleye bağlı: JS `is-laugh-c/-t` ve `is-greet` sınıfını koyar. */ .rt-scene__rig--child .rt-scene__face--laugh, .rt-scene__rig--teacher .rt-scene__face--laugh { transition: opacity 0.3s ease-in-out; } .rt-scene__rig--child .rt-scene__face--calm, .rt-scene__rig--teacher .rt-scene__face--calm { transition: opacity 0.3s ease-in-out; } .rt-scene.is-laugh-c .rt-scene__rig--child .rt-scene__face--laugh, .rt-scene.is-laugh-t .rt-scene__rig--teacher .rt-scene__face--laugh { opacity: 1; } .rt-scene.is-laugh-c .rt-scene__rig--child .rt-scene__face--calm, .rt-scene.is-laugh-t .rt-scene__rig--teacher .rt-scene__face--calm { opacity: 0; } /* El sallama SÜREKLİ DEĞİLDİR: yalnız "Merhaba" cümlesinde bir kez oynar (Owner 2026-09-12: "ellerini sadece merhaba derken sallayacaklardı"). Kollar varsayılan olarak aşağıdadır (aşağıdaki taban kural), sallama bitince `both` ile yine aşağıda kalır. */ .rt-scene.is-greet[data-speaker="child"] .rt-scene__rig--child .rt-scene__waving { animation: rt-wave-once 2.2s ease-in-out both; transform-origin: 192px 322px; } .rt-scene.is-greet[data-speaker="teacher"] .rt-scene__waving--teacher { animation: rt-wave-once-teacher 2.2s ease-in-out both; } /* Tanıtım filmindeki oynat düğmesinin halkaları yavaşça genişleyip söner: "burada bir video var" işareti. İki halka aynı animasyonu yarım tur farkla oynar. */ .rt-video--brand .rt-video__play::before { animation: rt-pulse-ring 2.8s ease-out infinite; } .rt-video--brand .rt-video__play::after { animation: rt-pulse-ring 2.8s ease-out infinite 1.4s; } /* Öğretmenin elindeki BAYRAK dalgalanmaya devam eder; o bir bayraktır, el değil. Dönme ekseni omuzdur (486,344): eksen bayrağın kendisine konursa kol kökü gövdeden ayrılır. */ .rt-scene__holding { animation: rt-sway 3.6s ease-in-out infinite; transform-origin: 486px 344px; transition: --rt-sway 1.2s ease-in-out; } /* KAHKAHA — seçiciler sahnenin güncel sınıflarına (rig--child / rig--teacher) bağlıdır. Daha önce eski "tile--" adlarına bağlıydı ve bu yüzden kahkaha hiç oynamıyordu; yüzler sürekli gülümsüyordu. Zamanlama konuşma akışıyla eşlenir (12 s): herkes kendi cümlesini söyledikten sonra gülüyor — çocuk 2. adımdan sonra, öğretmen 4. adımdan sonra. */ /* Kahkaha konuşmaya bağlı: Ela "Hoş bulduk 🙂" derken (4. adım, 7,5 s), öğretmen "Siz nasılsınız?" sorusunu duyduktan sonra (8. adımın ardından, 20 s) gülüyor. Döngü balonlarla aynı: 25 s. */ /* Kahkaha senaryonun duygulu anlarına bağlandı (90 s döngü): Ela "Hepsini anlıyorum 🙂" derken (19. kutu, 54 s), öğretmen onu duyunca (20. kutu, 57 s) gülüyor. */ /* El sallama yalnız Ela KONUŞURKEN (2. adım, 3-6 s); geri kalan zamanda el durur (Owner 2026-09-12: "ela sadece merhaba derken el sallasın. durmaksızın değil"). */ /* El sallama yalnız KENDİ "Merhaba" anında: Ela 2. adımda (1,5 s), öğretmen 1. adımda (0 s). Döngü konuşmayla aynı: 15 saniye. */ .rt-scene__live { animation: rt-blink 1.4s ease-in-out infinite; } /* Ağız yalnız o kişi KONUŞURKEN oynar. 15 s'lik döngüde Ela'nın cümleleri 2, 4, 6, 7, 8. adımlar (%10-20, %30-40, %50-80), öğretmeninkiler 1, 3, 5, 9, 10. adımlardır (%0-10, %20-30, %40-50, %80-100). */ /* Ağız: görünürlük senaryo kutularına bağlı (90 s), açılıp kapanma ise kendi ritminde (0,5 s). İki animasyon AYRI özellikleri sürer (opacity / transform), bu yüzden çakışmazlar. */ /* Üç hâl AYNI 0,9 s'lik ritimde sırayla değişir: çizgi -> gülümseme -> "D". Üçü de aynı süreyi ve aynı başlangıcı paylaştığı için senkron kalırlar. */ /* Yalnız KONUŞANIN ağzında çalışır (2026-09-17 başarım ölçümü: iki ağız kimse konuşmazken de gizli olarak dönüyordu); her cümle çizgi karesinden başlar. */ .rt-scene[data-speaker="child"] .rt-scene__mouth-talk--child .rt-scene__mouth-talk-line, .rt-scene[data-speaker="teacher"] .rt-scene__mouth-talk--teacher .rt-scene__mouth-talk-line { animation: rt-talk-line 0.9s steps(1, end) infinite; } .rt-scene[data-speaker="child"] .rt-scene__mouth-talk--child .rt-scene__mouth-talk-smile, .rt-scene[data-speaker="teacher"] .rt-scene__mouth-talk--teacher .rt-scene__mouth-talk-smile { animation: rt-talk-smile 0.9s steps(1, end) infinite; } .rt-scene[data-speaker="child"] .rt-scene__mouth-talk--child .rt-scene__mouth-talk-open, .rt-scene[data-speaker="teacher"] .rt-scene__mouth-talk--teacher .rt-scene__mouth-talk-open { animation: rt-talk-open 0.9s steps(1, end) infinite; } /* Dünya döner: kıtalar daire içinde kayar (Owner 2026-09-12: "dönsün"). */ /* Ad rt-globe-spin: rt-spin bileşen katmanındaki yükleme halkasının (döndürme) adıdır; aynı adlı anahtar kareler sonraki katmanda (rt.page) kazandığı için halka dönmek yerine 494 px sola kayıyordu (2026-09-17). */ .rt-scene__land { animation: rt-globe-spin 26s linear infinite; } /* ANİMASYON GELİŞTİRMESİ (Owner 2026-09-13, birebir: "Animasyonu da geliştir." — ilk talimattaki "HERO ANİMASYONU AYNEN KALACAK" bu sözle kalktı). Sahne HTML'i (hero-scene.php) ve senaryo (hero-dialogue.js) DEĞİŞMEDİ; hareket yalnız CSS'te zenginleşti, üçü de bu bloğun içinde olduğu için "hareketi azalt" tercihinde oynamaz: 1) İki bilgisayar hafifçe SÜZÜLÜR (±5 px, 6,5 s, yarım tur farkla): sahne canlı bir görüntülü görüşme gibi nefes alır; balon kuyrukları 5 px'lik kaymayı fark ettirmez. 2) Balonlar ZIPLAYARAK belirir (0,9 → 1 ölçek, hafif aşım): yeni cümle göze çarpar. 3) Gözler KIRPAR: her 5,2 s'de bir kısa kapanış; öğretmen 1,7 s gecikmeli, iki yüz senkron kırpmaz. Kırpma göz parçalarına (beyaz, bebek, ışıltı) kendi merkezleri etrafında scaleY uygulanır; kahkaha yüzü ayrı olduğu için kahkaha anında etkisi yoktur. */ /* 4) GİRİŞ KOREOGRAFİSİ (Owner 2026-09-14: "hero'daki animasyonu da geliştir"): sayfa açılınca önce dünya belirir (0,25 s), ardından iki bilgisayar köşelerinden hafifçe yükselip yerine oturur (0,45 / 0,6 s), hat ve düğümler o sırada solar (0,7 s), ilk balon 1,1 s'de zıplayarak gelir. Giriş bitince süzülme devreye girer (aynı transform kanalı: giriş "both" ile biter, süzülme gecikmeyle başlar; ikisinin de başlangıç/bitiş konumu 0'dır, sıçrama olmaz). 5) Veri paketleri hafif PARLAR (drop-shadow): hat üzerinde akan ışık noktaları gibi okunur. Transform öznitelik taşıyan gruplara (kid/adult/chip-flag) dokunulmaz: CSS transform onları ezer. */ .rt-scene__rig--child { transform-box: fill-box; transform-origin: center; animation: rt-rig-in 720ms cubic-bezier(0.2, 0.8, 0.2, 1) 450ms both, rt-float 6.5s ease-in-out 1.2s infinite; } .rt-scene__rig--teacher { transform-box: fill-box; transform-origin: center; animation: rt-rig-in 720ms cubic-bezier(0.2, 0.8, 0.2, 1) 600ms both, rt-float 6.5s ease-in-out -2.05s infinite; } /* DİNGİN SON (2026-09-17 başarım bulgusu: "son cümleden sonra ortam döngüleri incelsin"; SVG sahnesinde sürekli dönen her transform animasyonu bütün sahneyi her karede yeniden yerleştirip boyatıyor): son cümle bitince hero-dialogue.js .is-rest koyar. İki bilgisayarın süzülmesi olduğu yerde durur; karakterlerin sallanması ve bayrağın dalgalanması genliği 1,2 s'de sönerek dik duruşa oturur (sıçramaz). Göz kırpma, canlı rozeti, dünya ve veri paketleri 10 s daha sürer: ders bitmiş, bağlantı canlı. Sonra .is-still bunları da durdurur (rt.util "HAREKETSİZ SON"). */ /* Giriş (bitmiş, "both") ve süzülme AYNI ANDA duraklatılır. TUZAK (2026-09-17 fix2 ölçümü): önce süzülme, sonra (.is-still ya da .is-paused ile) giriş duraklatılırsa tarayıcı son duraklatılanı üste koyuyor; girişin bitiş değeri süzülmeyi eziyor ve ekran tek karede 4,8 birim sıçrıyordu. İkisi birlikte duraklayınca sıra korunur, sonraki duraklatmalar değer değiştirmez. */ .rt-scene.is-rest .rt-scene__rig { animation-play-state: paused; } .rt-scene.is-rest .rt-scene__bob { --rt-idle: 0; animation-play-state: paused; transition-duration: 1.2s; } .rt-scene.is-rest .rt-scene__holding { --rt-sway: 0; animation-play-state: paused; } .rt-scene__globe { transform-box: fill-box; transform-origin: center; animation: rt-globe-in 820ms cubic-bezier(0.2, 0.8, 0.2, 1) 250ms both; } .rt-scene__link, .rt-scene__node { animation: rt-fade-in 700ms ease-out 700ms both; } .rt-scene__packet { filter: drop-shadow(0 0 3px rgba(0, 230, 118, 0.9)); } .rt-scene__say--step1 { animation: rt-say-pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.25) 1100ms both; transform-box: fill-box; transform-origin: 50% 100%; } .rt-scene__say.is-on { animation: rt-say-pop 380ms cubic-bezier(0.2, 0.9, 0.3, 1.25) both; transform-box: fill-box; transform-origin: 50% 100%; } .rt-scene__face--calm .rt-scene__sclera, .rt-scene__face--calm .rt-scene__pupil, .rt-scene__face--calm .rt-scene__glint { transform-box: fill-box; transform-origin: center; animation: rt-eyelid 5.2s ease-in-out infinite; } .rt-scene__rig--teacher .rt-scene__face--calm .rt-scene__sclera, .rt-scene__rig--teacher .rt-scene__face--calm .rt-scene__pupil, .rt-scene__rig--teacher .rt-scene__face--calm .rt-scene__glint { animation-delay: 1.7s; } } @keyframes rt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes rt-say-pop { from { opacity: 0; transform: scale(0.9) translateY(4px); } to { opacity: 1; transform: none; } } @keyframes rt-eyelid { 0%, 91%, 100% { transform: scaleY(1); } 94.5% { transform: scaleY(0.08); } } @keyframes rt-rig-in { from { opacity: 0; transform: translateY(26px) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes rt-globe-in { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: none; } } @keyframes rt-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Gülme ve gülümseme arasındaki geçiş ZAMANLI DEĞİL, konuşmaya bağlıdır: hero-dialogue.js `is-laugh-c/-t` sınıfını koyar, geçişi yukarıdaki transition yapar. Eski zaman çizelgesine dayalı rt-laugh/rt-calm kareleri kaldırıldı. */ /* El sallama: kol KALKAR, üç kez sallanır, sonra İNER ve döngünün kalanında aşağıda durur (Owner 2026-09-12: "merhaba deyip el salladıktan sonra ellerini indirsinler"). Aşağıdaki hâl, omuz etrafında geniş bir dönüşle elde edilir. */ @keyframes rt-pulse-ring { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } /* Selamlama: kol kalkar, üç kez sallanır, iner ve aşağıda kalır (2,2 s'lik TEK seferlik oynatım). */ @keyframes rt-wave-once { 0% { transform: rotate(140deg); } 12% { transform: rotate(0deg); } 28% { transform: rotate(-20deg); } 44% { transform: rotate(0deg); } 60% { transform: rotate(-20deg); } 76% { transform: rotate(0deg); } 100% { transform: rotate(140deg); } } @keyframes rt-wave-once-teacher { 0% { transform: rotate(-130deg); } 12% { transform: rotate(0deg); } 28% { transform: rotate(20deg); } 44% { transform: rotate(0deg); } 60% { transform: rotate(20deg); } 76% { transform: rotate(0deg); } 100% { transform: rotate(-130deg); } } /* Zaman çizelgesine dayalı eski sallama kareleri (rt-wave-slot*) kaldırıldı: sallama artık yalnız "Merhaba" cümlesinde, tek seferlik oynatımla yapılıyor. */ /* Paket hattın başından sonuna gider ve söner; geri dönüş hattında ters yönde ilerler. Konumlar yayların (üst: M300 44C420 -4 566 78 622 306, alt: M158 254C214 482 360 564 480 516) 16 EŞİT UZUNLUKLU noktasıdır (eski offset-distance ile aynı hız); üreteç: scratchpad wf/fixer/packetkf.cjs. Yay değişirse bu kareler de yeniden üretilmelidir. */ @keyframes rt-packet { 0% { transform: translate(300px, 44px); opacity: 0; } 6.25% { transform: translate(328.2px, 35.2px); } 8% { opacity: 1; } 12.5% { transform: translate(357.4px, 31.1px); } 18.75% { transform: translate(386.9px, 31.8px); } 25% { transform: translate(415.9px, 37.4px); } 31.25% { transform: translate(443.7px, 47.3px); } 37.5% { transform: translate(469.7px, 61.2px); } 43.75% { transform: translate(493.8px, 78.3px); } 50% { transform: translate(515.7px, 98.1px); } 56.25% { transform: translate(535.5px, 120px); } 62.5% { transform: translate(553.1px, 143.7px); } 68.75% { transform: translate(568.8px, 168.7px); } 75% { transform: translate(582.6px, 194.8px); } 81.25% { transform: translate(594.7px, 221.8px); } 87.5% { transform: translate(605.3px, 249.4px); } 92% { opacity: 1; } 93.75% { transform: translate(614.3px, 277.5px); } 100% { transform: translate(622px, 306px); opacity: 0; } } @keyframes rt-packet-back { 0% { transform: translate(480px, 516px); opacity: 0; } 6.25% { transform: translate(451.8px, 524.8px); } 8% { opacity: 1; } 12.5% { transform: translate(422.6px, 528.9px); } 18.75% { transform: translate(393.1px, 528.2px); } 25% { transform: translate(364.1px, 522.6px); } 31.25% { transform: translate(336.3px, 512.7px); } 37.5% { transform: translate(310.3px, 498.8px); } 43.75% { transform: translate(286.2px, 481.7px); } 50% { transform: translate(264.3px, 461.9px); } 56.25% { transform: translate(244.5px, 440px); } 62.5% { transform: translate(226.9px, 416.3px); } 68.75% { transform: translate(211.2px, 391.3px); } 75% { transform: translate(197.4px, 365.2px); } 81.25% { transform: translate(185.3px, 338.2px); } 87.5% { transform: translate(174.7px, 310.6px); } 92% { opacity: 1; } 93.75% { transform: translate(165.7px, 282.5px); } 100% { transform: translate(158px, 254px); opacity: 0; } } /* Konuşma ağzının üç hâli: düz çizgi / gülümseme / açık "D". Görünürlüğü hero-dialogue.js verir, bu yüzden zaman çizelgesine dayalı eski ağız kareleri (rt-mouth-*) kaldırıldı. */ @keyframes rt-talk-line { 0% { opacity: 1; } 33.33%, 100% { opacity: 0; } } @keyframes rt-talk-smile { 0% { opacity: 0; } 33.33% { opacity: 1; } 66.66%, 100% { opacity: 0; } } @keyframes rt-talk-open { 0% { opacity: 0; } 66.66% { opacity: 1; } 100% { opacity: 0; } } /* Genlik --rt-sway ile kısılabilir (DİNGİN SON); kayıt ve varsayılan lule3 bloğundaki @property kayıtlarının yanındadır. */ @keyframes rt-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(calc(var(--rt-sway) * -7deg)); } } /* Harita şeridi iki kez çizildiği için tam bir şerit boyu (haritanın kendi genişliği) kayınca desen kesintisiz tekrarlar. Değer _c/world-map.php içindeki RT_WORLD_MAP_W ile aynı olmalıdır. */ @keyframes rt-globe-spin { from { transform: translateX(0); } to { transform: translateX(-494.7px); } } /* Canlı rozeti hiç sönmez, yalnız nabız gibi zayıflayıp güçlenir — "çevrimiçi" olduğu her an okunur. */ @keyframes rt-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes rt-bar { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* --- Hero görseli (Owner 2026-09-12) --------------------------------------- Görsel her ekranda görünür ama karar metninin ÖNÜNE geçmez: mobilde eylemlerden SONRA gelir (kaynak sırası korunur, yalnız ızgara sırası değişmez), geniş ekranda metnin yanındadır. Üstüne yazı yazılmaz; yumuşak köşe, ince çerçeve ve markanın altın vurgusu ile kart gibi durur. */ .rt-hero__art--photo { display: block; } .rt-hero__art--photo picture { display: block; } @media (min-width: 720px) { } @media (min-width: 1280px) { } @media (prefers-reduced-motion: no-preference) { .rt-hero__art--photo { animation: rt-hero-rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } } @keyframes rt-hero-rise { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } } @media (min-width: 720px) { .rt-hero__art { display: block; } } .rt-split { display: grid; gap: var(--rt-sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 960px) { .rt-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--rt-sp-8); } } .rt-page-head { padding-block: var(--rt-sp-7) var(--rt-sp-6); border-block-end: 1px solid var(--rt-border-subtle); } /* Sayfa başı kapsayıcı genişliğindedir; yalnız METİN dar ölçüye bağlıdır. Böylece başlık her sayfada altındaki ilk bloğun sol kenarından başlar: geniş gövdeli sayfada 74 px, dar gövdeli sayfada (şablon `rt-container--narrow` ekler) 284 px. Ortalanmış 760 px'lik baş, geniş gövdeye göre 210 px sağa kayıyordu (2026-09-14 inceleme). */ .rt-page-head__inner { display: flex; flex-direction: column; gap: var(--rt-sp-3); } .rt-page-head__inner > * { max-inline-size: var(--rt-container-narrow); } .rt-page-head__title { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); } /* Blog yazısı başlığı: 90+ karakterlik başlıklar telefonda 5 satır oluyordu. */ .rt-page-head__title--post { font-size: clamp(1.625rem, 1.2rem + 2vw, 2.5rem); line-height: 1.2; } /* ---- İÇERİK (CMS) SAYFALARI: Hakkımızda, Gizlilik, Şartlar, Hikâyemiz, Manifesto ------------- Gövde panelden gelen uzun metindir ve RtCms ile biçimden arındırılmıştır (sınıf/stil yok). Bu yüzden tipografinin TAMAMI burada tanımlanır; devralınan bootstrap ızgarasına dayanılmaz. Ölçü satırı okunur uzunlukta, başlıklar arasında nefes, bağlantılar metin içinde ayırt edilir. */ /* overflow-wrap: gövdedeki 130+ karakterlik düz adresler telefonda sayfayı yana taşırıyordu. */ .rt-cms { max-width: none; font-size: 1.0625rem; line-height: 1.75; color: var(--rt-text-primary); overflow-wrap: anywhere; } .rt-cms > * + * { margin-block-start: var(--rt-sp-4); } .rt-cms h2, .rt-cms h3, .rt-cms h4 { font-family: var(--rt-f-display); font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); line-height: 1.25; text-wrap: balance; } .rt-cms h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); margin-block-start: var(--rt-sp-7); } .rt-cms h3 { font-size: clamp(1.175rem, 1rem + 0.6vw, 1.4rem); margin-block-start: var(--rt-sp-6); } .rt-cms h4 { font-size: 1.0625rem; margin-block-start: var(--rt-sp-5); } /* Başlığın hemen ardındaki paragraf başlığa yakın durur: başlık metnine ait olduğu okunur. */ .rt-cms :is(h2, h3, h4) + * { margin-block-start: var(--rt-sp-3); } .rt-cms > :first-child { margin-block-start: 0; } /* Yalnız alt ve yan kenar sıfırlanır: üst boşluğu kardeş kuralı (> * + *) verir. `margin: 0` daha özgül olduğu için o kuralı eziyordu ve blog yazıları tek blok metin olarak çiziliyordu (2026-09-14). */ .rt-cms p { margin-block-end: 0; margin-inline: 0; max-inline-size: var(--rt-measure); } .rt-cms :is(ul, ol) { margin: 0; padding-inline-start: var(--rt-sp-5); display: grid; gap: var(--rt-sp-2); max-inline-size: var(--rt-measure); } .rt-cms li::marker { color: var(--rt-c-coral); font-weight: var(--rt-fw-bold); } .rt-cms a { color: var(--rt-text-link); text-decoration: underline; text-underline-offset: 3px; } .rt-cms a:hover { text-decoration-thickness: 2px; } .rt-cms strong, .rt-cms b { font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-cms img { display: block; max-inline-size: 100%; block-size: auto; margin-inline: auto; border-radius: var(--rt-rd-lg); background: var(--rt-surface-sunken); } .rt-cms blockquote { margin: 0; padding: var(--rt-sp-3) var(--rt-sp-4); border-inline-start: 4px solid var(--rt-c-lime); background: var(--rt-surface-sunken); border-radius: 0 var(--rt-rd-md) var(--rt-rd-md) 0; } .rt-cms hr { border: 0; border-block-start: 1px solid var(--rt-border-subtle); margin-block: var(--rt-sp-6); } /* Tablo dar ekranda SAYFAYI değil KENDİNİ kaydırır. */ .rt-cms table { inline-size: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .rt-cms :is(th, td) { border: 1px solid var(--rt-border-subtle); padding: var(--rt-sp-2) var(--rt-sp-3); text-align: start; } .rt-cms th { background: var(--rt-surface-sunken); font-weight: var(--rt-fw-bold); } .rt-team { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--rt-sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 720px) { .rt-team { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---- TANIŞMA DERSİ AKIŞI: TEK SORU, TEK EKRAN ------------------------------- Owner 2026-09-12: "gittiği sayfanın tasarımı, yazıları aynı olacak." Ölçüler örnek akıştan ölçüldü: soru 36 px/700 ortalanmış; denetimler 357 px genişliğinde tek sütun; giriş alanı ve seçenekler 20 px köşe, 1,6 px çerçeve ve 3-4 px SERT gölge; ana düğme 52 px, 20 px köşe, 18 px yazı. Sayfa beyaz, üstte geri oku + ince ilerleme çubuğu. */ /* Satır yönü: taban kural .rt-trial__progress'i SÜTUN yapıyor; burada satıra çevrilir, yoksa çubuk sıfır genişlikte kalıyordu. */ /* Seçici iki sınıflıdır: taban .rt-trial__progress kuralı DOSYADA SONRA geldiği için tek sınıflı bir kural onu ezemiyordu ve çubuk sütun akışında sıfır genişlikte kalıyordu. */ .rt-trial__progress.rt-quizbar { display: flex; flex-direction: row; align-items: center; gap: var(--rt-sp-4); inline-size: min(100%, 640px); margin-inline: auto; } .rt-quizbar__back { inline-size: 44px; block-size: 44px; flex: 0 0 auto; display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: var(--rt-text-heading); } .rt-quizbar__back svg { transform: rotate(180deg); inline-size: 20px; block-size: 20px; } .rt-trial__progress.rt-quizbar .rt-trial__bar { flex: 1 1 auto; block-size: 10px; border-radius: 10px; background: #F4F4F4; overflow: hidden; } .rt-trial__progress.rt-quizbar .rt-trial__bar-fill { display: block; block-size: 100%; background: var(--rt-action-primary-bg); } .rt-trial__form--js .rt-step[data-rt-active="true"] { max-inline-size: 420px; margin-inline: auto; text-align: center; } .rt-trial__form--js .rt-step__legend { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 700; color: var(--rt-text-primary); text-align: center; inline-size: 100%; } .rt-trial__form--js .rt-step__hint { text-align: center; color: var(--rt-text-secondary); } .rt-trial__form--js .rt-options { grid-template-columns: minmax(0, 1fr); gap: 10px; } .rt-trial__form--js .rt-options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rt-trial__form--js .rt-option__label { min-block-size: 52px; border-radius: 20px; border: 1.6px solid var(--rt-c-navy-deep); box-shadow: 4px 4px 0 0 var(--rt-c-navy-deep); font-weight: 800; color: var(--rt-c-navy); justify-content: center; text-align: center; /* Radyo işareti gizli olduğu hâlde sol iç boşluk 44 px kalıyordu; "Öğleden sonra" bu yüzden kırılıyordu (2026-09-14). */ padding-inline: var(--rt-sp-3); } /* SEÇİLEN seçenek DÜĞME YEŞİLİYLE dolar (Owner 2026-09-12: "seçildiği hiç belli olmuyor"). */ .rt-trial__form--js .rt-option__input:checked + .rt-option__label, .rt-trial__form--js .rt-option__input:checked + .rt-option__label:hover { background: var(--rt-action-primary-bg); color: var(--rt-action-primary-text); min-block-size: 52px; border-radius: 20px; border: 1.6px solid var(--rt-c-navy-deep); box-shadow: 3px 4px 0 0 var(--rt-c-navy-deep); } .rt-trial__form--js :is(.rt-input, .rt-select) { min-block-size: 52px; border-radius: 20px; border: 1.6px solid var(--rt-c-navy-deep); box-shadow: 3px 4px 0 0 var(--rt-c-navy-deep); } .rt-trial__form--js .rt-step__nav { justify-content: center; } .rt-trial__form--js .rt-step__nav .rt-btn--primary { inline-size: 100%; } /* Geri düğmesi artık üst çubuktadır; adım içindeki kopyası gizlenir. */ .rt-trial__form--js .rt-step__nav .rt-btn--quiet[data-rt-trial-nav="back"] { display: none; } /* Akış ekranında seçenekler işaret KUTUSUZ durur (örnekteki gibi): seçim, dolgu rengiyle görünür. Radyo düğmesi erişilebilirlik için yerinde kalır, yalnız görsel işareti gizlenir. */ .rt-trial__form--js .rt-option__label::before { display: none; } /* Ekranda YALNIZ SORU ve seçenekler kalır (Owner 2026-09-12: "gereksiz yazı ekleme"): ipucu cümleleri ve alan etiketleri görsel olarak kaldırıldı; etiket ekran okuyucuya kalır. */ .rt-trial__form--js .rt-step__hint { display: none; } .rt-trial__form--js .rt-field__hint { display: none; } /* Alan etiketi YALNIZCA tek alanlı adımda gizlenir (soru zaten onu söylüyor). Hesap ve ülke adımlarında birden çok kutu vardır; orada etiket GÖRÜNÜR kalır — yoksa hangi kutuya ne yazılacağı belli olmuyor (Owner 2026-09-12). */ .rt-trial__form--js .rt-step[data-rt-step="child"] .rt-field__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } .rt-trial__form--js .rt-step[data-rt-step="account"] .rt-field, .rt-trial__form--js .rt-step[data-rt-step="place"] .rt-field { text-align: start; } .rt-trial__form--js .rt-step[data-rt-step="account"] .rt-field__label, .rt-trial__form--js .rt-step[data-rt-step="place"] .rt-field__label { display: block; margin-block-end: 6px; font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-trial__form--js .rt-step[data-rt-step="account"] .rt-field__hint { display: block; text-align: start; } /* SEÇİLEN ÖĞRETMEN belli olsun: kart yeşil zeminle işaretlenir (Owner 2026-09-12). 2026-09-14: seçici kartın kendi sınıflarına çevrildi (.rt-option__* değil .rt-trial-teacher__*) — kural hiç çalışmıyordu. */ .rt-trial-teacher__input:checked + .rt-trial-teacher__label, .rt-trial-teachers [aria-pressed="true"] { background: var(--rt-action-primary-bg); border-color: var(--rt-c-navy-deep); color: var(--rt-action-primary-text); } .rt-trial-teacher__input:checked + .rt-trial-teacher__label :is(.rt-trial-teacher__name, .rt-trial-teacher__role, .rt-trial-teacher__highlight, .rt-trial-teacher__ages) { color: var(--rt-action-primary-text); } /* Öğretmen kartı akıştaki hap seçeneklerle aynı dokunsal dildedir; metin sola hizalı (etkin adım ortalar). */ .rt-trial__form--js .rt-trial-teacher { text-align: start; } .rt-trial__form--js .rt-trial-teacher__label { border: 1.6px solid var(--rt-c-navy-deep); border-radius: 20px; box-shadow: 4px 4px 0 0 var(--rt-c-navy-deep); padding: var(--rt-sp-3) var(--rt-sp-4); } /* Profil rozetinin yeri yalnız ad satırında ayrılır; kartın tamamında 96 px ayırmak 320 px'te metni 86 px'e sıkıştırıyordu. */ .rt-trial__form--js .rt-trial-teacher__name { padding-inline-end: 84px; } .rt-trial__form--js .rt-trial-teacher__input:checked + .rt-trial-teacher__label { box-shadow: 3px 4px 0 0 var(--rt-c-navy-deep); } .rt-trial__form--js .rt-trial-teacher__profile { position: absolute; inset-block-start: 10px; inset-inline-end: 12px; gap: 4px; min-block-size: var(--rt-target-min); padding-inline: 12px; border-radius: var(--rt-rd-pill); font-size: var(--rt-f-xs); font-weight: var(--rt-fw-bold); text-decoration: none; background: var(--rt-surface-accent); color: var(--rt-text-heading); } .rt-trial__form--js .rt-trial-teacher__profile .rt-icon { inline-size: 14px; block-size: 14px; } .rt-trial__form--js .rt-trial-teacher__profile:hover { background: var(--rt-c-navy-deep); color: var(--rt-c-white); } /* Devam düğmesi bu adımda gizlidir: öğretmen + saat seçilince akış kendi ilerler (2026-09-14). */ .rt-trial__form--js .rt-step[data-rt-step="teacher"] .rt-step__nav .rt-btn--primary { display: none; } .rt-trial__form--js .rt-slots__heading { font-size: var(--rt-f-lg); } /* Geri oku ilk adımda pasiftir; görünümü de öyle olmalı. */ .rt-quizbar__back:disabled { opacity: 0.35; cursor: default; } /* İki sütunlu hap ızgarasında tek kalan son hap tam genişliğe yayılır (yetim hücre yok). */ .rt-trial__form--js .rt-options--2 > .rt-option:last-child:nth-child(odd) { grid-column: 1 / -1; } /* Saat aralığı hapları: ad + küçük saat satırı, hepsi eşit boyda. */ .rt-option__sub { display: block; font-size: var(--rt-f-xs); font-weight: 600; opacity: 0.8; } /* Hesap adımı: ülke kodu + numara tek satır; onay kutuları 20 px ve 44 px'lik satırlar. */ .rt-trial__form--js .rt-field-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto auto; gap: var(--rt-sp-3); text-align: start; } /* Alt ızgara: etiket iki satıra kırılsa da (320 px) iki kutu aynı satırda durur. */ .rt-trial__form--js .rt-field-row > .rt-field { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-items: end; } .rt-check { display: flex; align-items: flex-start; gap: 10px; min-block-size: var(--rt-target-min); padding-block: 6px; text-align: start; font-size: var(--rt-f-sm); line-height: 1.45; cursor: pointer; } .rt-check input { flex: 0 0 auto; inline-size: 20px; block-size: 20px; margin: 1px 0 0; accent-color: var(--rt-c-navy); } .rt-check a { color: var(--rt-text-link); text-decoration: underline; text-underline-offset: 2px; } /* Akış sayfasında büyük sayfa başlığı ve gizlilik cümlesi YOK: ekranda tek soru kalır. Gizlilik cümlesi hesap adımının yanında durur (orada veri veriliyor). */ .rt-page-head--quiz { padding-block: 0; background: none; border: 0; } .rt-trial__privacy { display: none; } .rt-trial__form--js .rt-step[data-rt-step="account"] ~ .rt-trial__privacy, .rt-step[data-rt-step="account"][data-rt-active="true"] ~ .rt-trial__privacy { display: block; } /* HERO SORU KARTI (Owner onayı 2026-09-12) — örnekteki kurgunun aynısı: soru üstte, seçenekler büyük hap düğmeler hâlinde; birine basılınca sonraki soru AYNI YERDE açılır, "ileri" yoktur. Üç nokta nerede olunduğunu söyler. Seçenekler 52 px yüksekliğinde (dokunma hedefi + örnek ölçü). */ /* HERO KUŞAĞI (Owner onayı 2026-09-12): örnekteki ritim — üstte küçük yeşil satır, altında büyük beyaz başlık, hemen ardından soru kartı. Koyu zeminde yaş düğmeleri açık çerçeveli olur. */ .rt-hero--quiz { background: var(--rt-surface-inverse); color: var(--rt-text-on-inverse); } /* HERO ARKA PLAN KATMANI (2026-09-13 görsel yön "Türkçeyle kurulan bağ"): sahnenin arkasında hafif açık, organik bir leke derinlik verir; kenarlarda üç küçük dört köşeli yıldız (lime, altın, mercan) kalem izi gibi durur. Hepsi dekoratif ve düşük kontrastlı: sahneyle yarışmaz, içeriği kapatmaz, tıklama almaz. Kuşak taşanı keser (overflow: clip kaydırma alanı oluşturmaz, sayfa genişlemez). 1000 px altında kapalı: dar ekranda süsler azalır, marka karakteri başlık çizgisi, ok ve çıkartmayla sürer. */ .rt-hero--quiz { position: relative; overflow: clip; isolation: isolate; } .rt-hero--quiz .rt-hero__inner { position: relative; z-index: 1; } .rt-hero--quiz::before { content: ""; position: absolute; z-index: 0; pointer-events: none; inset-inline-end: -4%; inset-block-start: 8%; inline-size: 44%; block-size: 86%; background: rgba(255, 255, 255, 0.055); border-radius: 58% 42% 47% 53% / 46% 52% 48% 54%; transform: rotate(-9deg); } .rt-hero--quiz::after { content: ""; position: absolute; z-index: 0; pointer-events: none; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 30'%3E%3Cpath fill='%2374E88A' d='M9 0C9.9 10.6 11 13.6 18 15C11 16.4 9.9 19.4 9 30C8.1 19.4 7 16.4 0 15C7 13.6 8.1 10.6 9 0Z'/%3E%3C/svg%3E") right 7% top 11% / 22px 36px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 30'%3E%3Cpath fill='%23E0A93B' d='M9 0C9.9 10.6 11 13.6 18 15C11 16.4 9.9 19.4 9 30C8.1 19.4 7 16.4 0 15C7 13.6 8.1 10.6 9 0Z'/%3E%3C/svg%3E") right 46% bottom 9% / 14px 24px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 30'%3E%3Cpath fill='%23D94A7E' d='M9 0C9.9 10.6 11 13.6 18 15C11 16.4 9.9 19.4 9 30C8.1 19.4 7 16.4 0 15C7 13.6 8.1 10.6 9 0Z'/%3E%3C/svg%3E") left 47% top 10% / 12px 20px no-repeat; opacity: 0.85; } @media (max-width: 999.98px) { .rt-hero--quiz::before, .rt-hero--quiz::after { display: none; } } /* Sahne metinlerle dikeyde ORTALANIR (Owner 2026-09-12: "hero çok yukarıda kalmış"). */ .rt-hero--quiz .rt-hero__inner { align-items: center; } /* Metin sütunu geniş, sahne sağa çekilir (Owner 2026-09-12: "hero'yu biraz sağa kaydır … 3 satır olacak"): başlık üç satıra sığar, sahne de kutuyu ezmez. */ @media (min-width: 1000px) { .rt-hero--quiz .rt-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--rt-sp-6); } /* Sahne sütununu doldurur ve metin bloğunun ortasına hizalanır (Owner 2026-09-12: "hero biraz büyümeli ve biraz aşağıya inmeli, ortalı değil"). Ölçek sütun genişliğinden gelir. */ .rt-hero--quiz .rt-hero__art { justify-self: stretch; align-self: center; } .rt-hero--quiz .rt-hero__art .rt-scene { inline-size: min(100%, 640px); block-size: auto; margin-block-start: var(--rt-sp-5); } } /* İmza çizgisinin payı .rt-mark'ın kendi iç boşluğundadır; başlığa ek boşluk gerekmez. 320–339 px'te vurgulu ifade tek satıra sığmadığı için başlık bir tık küçülür (ölçüldü: 33 px'te ifade 294 px, sütun 288 px). */ /* Başlık ağırlığı 800: Nunito değişken dosyası bu ağırlığı taşır; koyu kuşakta büyük başlık daha dolgun okunur. Satır aralığı 1.16: imza çizgisi artık İLK satırın ("Yurt dışında büyüyen") altında; çizgi satır boşluğuna oturur, ikinci satırın k/l gibi uzun harflerine değmez (hesap: 1.16 − 0.72 = 0.44em üst, çizgi −0.36em'de biter). */ .rt-hero--quiz .rt-hero__title { text-wrap: balance; font-weight: 800; line-height: 1.16; } /* Çizgi KENDİ satırına aittir (2026-09-17 doğrulama: 375 px'te çizgi "Yurt dışında"nın 12 px altında, "çocuklar için"in yalnız 7,7 px üstündeydi; alt satıra ait gibi okunuyordu). Hero'da çizgi payı 0,1em küçülür (çizgi yazıya yaklaşır) ve payın altına 0,08em boşluk girer (alt satır uzaklaşır); hero başlığı 13 px'lik kutuya göre 1–2,3 px uzar. Ölçüm (çizgi–üst yazı / çizgi–alt satır): 1440 px 10/16, 375 px 8/10,7, 320 px 7/8,3; yazıya ya da kuyruklu harflere çarpma yok. PenLine v8 (2026-09-18): hero çizgisi KEMERDİR (ortası yukarıda), tepesi "ş" çengelinin altına düşer; PenLine kemeri ARCH_DROP kadar aşağıda tutar. Ölçüm (çizgi–ş çengeli / çizgi–alt satır): 1440 px 9/19, 1100 px 7/15, 768 px 7/14,5, 375 px 7/13, 320 px 7,3/11,3. */ .rt-hero--quiz .rt-hero__title .rt-mark--pen { padding-block-end: max(0.28em, calc(16px - 0.06em)); margin-block-end: 0.08em; } /* 1000–1199 px'te metin sütunu 484 px: "Yurt dışında büyüyen" 51 px'te 490 px olup satır ortasından kırılıyordu; bir tık küçük punto iki satırı korur. 320–339 px'te aynı sebeple 1.8rem. */ @media (min-width: 1000px) and (max-width: 1199.98px) { .rt-hero--quiz .rt-hero__title { font-size: 2.9rem; } } @media (max-width: 339.98px) { .rt-hero--quiz .rt-hero__title { font-size: 1.8rem; } } .rt-hero--quiz :is(h1, h2, h3) { color: var(--rt-text-on-inverse); } /* Kart BEYAZDIR: koyu kuşağın beyaz odak halkası kartın içinde görünmez olurdu (2026-09-13 ölçümü: yaş düğmesinde klavye odağı beyaz üstünde beyazdı). Kartın içinde halka lacivert (beyazda 12.6:1). */ .rt-hero--quiz .rt-quiz { --rt-border-focus: var(--rt-c-navy-deep); } .rt-hero--quiz .rt-hero__lead { color: rgba(255, 255, 255, 0.88); } /* Üst satır BÜYÜK ve belirgin; alt satır tek satıra sığsın diye küçük (Owner 2026-09-12). */ .rt-hero__topline { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 var(--rt-sp-2); font-size: clamp(1rem, 0.88rem + 0.5vw, 1.3rem); font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; color: var(--rt-c-lime); } /* Dört köşeli yıldız (akan banttakiyle aynı çizim): küçük eşlikçi, ilk görünüşte kısa belirme (Owner 2026-09-14: "eskinin güzellerini getir"). */ .rt-hero__spark { flex: 0 0 auto; inline-size: 14px; block-size: 24px; margin-block-start: 0.05em; fill: var(--rt-c-lime); } @media (prefers-reduced-motion: no-preference) { .rt-hero__spark { animation: rt-spark-in 520ms cubic-bezier(0.2, 0.9, 0.3, 1.3) 120ms both; } } @keyframes rt-spark-in { from { opacity: 0; transform: scale(0.4) rotate(-30deg); } to { opacity: 1; transform: none; } } .rt-hero--quiz .rt-hero__lead { font-size: 0.9375rem; line-height: 1.5; max-inline-size: 48rem; } .rt-hero--quiz .rt-chip { background: rgba(255, 255, 255, 0.12); color: var(--rt-text-on-inverse); } /* Kart beyaz olduğu için içindeki yazı ve düğmeler kuşağın rengini DEĞİL, kendi renklerini kullanır: .rt-quiz kendi metin rengini kurar, düğme/bağlantı renkleri aşağıdaki .rt-quiz__* kurallarındadır (kuşağa özel kopyalar 2026-09-13'te silindi — birebir aynıydılar). */ .rt-hero--quiz .rt-btn--outline { border-color: rgba(255, 255, 255, 0.6); color: var(--rt-text-on-inverse); } .rt-hero--quiz .rt-btn--outline:hover { background: rgba(255, 255, 255, 0.12); color: var(--rt-text-on-inverse); } /* Soru kutusu: koyu kuşağın üstünde BEYAZ, net sınırlı bir kart (Owner 2026-09-12: "yaşlar aynı örnekteki gibi bir kutunun içinde net belirgin olacak"). Kart tek işi taşır: yaşı seç. */ /* KART = REFERANS DÜZENİ (Owner 2026-09-14 brief, birebir): "Kart masaüstünde yaklaşık 500–520 px genişliğinde … Beyaz yüzey, yuvarlatılmış köşeler ve referanstakine yakın mor/yeşil/sarı çevre vurgusu … Mevcut kalın, sağa ve alta taşan yeşil tabakayı kaldır … Kart içine açıklama, rozet, isim alanı, ek CTA veya başka dekor ekleme." Beyaz yüzey, 22 px köşe, 3 px degrade çerçeve (indigo → lime → altın), altında yumuşak gölge. İçerik ORTALIDIR; genişlik masaüstünde 32rem (512 px), dar ekranda sütun kadar. */ .rt-quiz { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; inline-size: min(100%, 32rem); color: var(--rt-text-primary); /* Kartın çerçevesi TAŞAN LİME KATMANDIR (Owner 2026-09-14, birebir: "taşan yeşil katman güzeldi. o olacak"): beyaz kart, 20 px köşe, sağa-aşağı 8 px sert lime gölge (düğmelerdeki sert gölgeyle aynı aile) ve altında yumuşak gölge. Degrade halka denemesi geri alındı. */ border: 0; border-radius: 20px; background: var(--rt-surface-default); /* Üst iç boşluk çıkartmaya yer bırakır (çıkartma üst kenara 14 px biner); 10 px dış boşluk çıkartmanın giriş satırına değmemesi içindir. */ /* 30 px dış boşluk: büyüyen hediye etiketi üstteki giriş cümlesine biniyordu (Owner 2026-09-14: "headerdaki hediye ders rozeti biraz aşağı inmeli. üstteki yazıyla üst üste binmiş"). */ padding: 42px 28px 22px; margin-block-start: 30px; box-shadow: 8px 8px 0 0 var(--rt-c-lime), 0 3px 8px rgba(0, 0, 0, 0.14); } /* EĞİK ÇIKARTMA (Owner 2026-09-14: "çıkartma/nokta vs olsun … her yerde olsun"): altın zemin, koyu indigo yazı (6.3:1), kontur + sert gölge; sol üst köşeye -4° ile yapıştırılmış gibi. Gerçek bilgi taşır. */ /* HEDİYE ETİKETİ — okunaklı sürüm (Owner 2026-09-14: "header daki hediye ders ifadesi UX standartlarında okunaklı değil. daha belirgin yap"): 12 px yerine 15 px / 800, 38 px yükseklik, hediye paketi simgesi, daha kalın kontur ve gölge. Fiyat kartlarındaki .rt-price__badge AYNI tasarımdır ("hediye rozetleri header daki hediye ifadesindekiyle aynı olsun"). */ .rt-quiz__sticker { position: absolute; z-index: 2; inset-block-start: -18px; inset-inline-end: -10px; display: inline-flex; align-items: center; gap: 7px; min-block-size: 38px; padding-inline: 12px 16px; border: 2px solid var(--rt-offset-ink); border-radius: var(--rt-rd-pill); background: var(--rt-gift-bg); color: var(--rt-gift-text); box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-offset-ink); font-size: 0.9375rem; line-height: 1.2; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; /* Owner E: "hediye yazıları sağ üste çapraz eklensin" — same geometry as .rt-corner-badge (top-right, +6°, RTL mirrored). */ transform: rotate(calc(var(--rt-tilt-badge) * var(--rt-dir))); transform-origin: 50% 50%; } /* Phone: the rotated pill stays inside the card corner so it keeps the 16 px gutter (round 1's -4px put it 11–12 px from the edge). */ @media (max-width: 599.98px) { .rt-quiz__sticker { inset-inline-end: 4px; } } .rt-quiz__sticker .rt-icon { inline-size: 20px; block-size: 20px; flex: 0 0 auto; stroke-width: 2.2; } @media (max-width: 400px) { .rt-quiz__sticker { font-size: 0.875rem; min-block-size: 36px; padding-inline: 10px 13px; } } /* Adım noktası YOKTUR (Owner 2026-09-14 çalışma çerçevesi: "adım noktası … bulunmaması"). */ /* Kart ilk boyamada kısa bir yükselişle gelir (küçük belirme hareketi); hareketi azalt tercihinde rt.reset süreyi sıfırlar ve kart yerinde görünür. ÖLÇEKLEME YOK: scale(0.985) hareket sürerken dokunma hedeflerini 43,3 px ölçtürüyordu (browser.target_sizes); yalnız kaydırma + saydamlık. */ @media (prefers-reduced-motion: no-preference) { .rt-hero--quiz .rt-quiz { animation: rt-card-rise 520ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms both; } } @keyframes rt-card-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .rt-quiz__nojs { margin-block-start: var(--rt-sp-2); } /* Yaş adımı: ortalı etiket + küçük ok → 18 px → kutular → 6 px → "devamını göster" (referans ritmi). */ .rt-quiz__step[data-rt-quiz-step="age"] { display: flex; flex-direction: column; align-items: center; gap: 18px; } /* Etiket ORTALI, 22 px/800; yanında referans ölçeğinde küçük kıvrımlı ok (koyu indigo, 3 px kalem). */ .rt-quiz__q { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; margin: 0; font-size: 1.375rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; color: var(--rt-text-heading); text-align: center; } .rt-quiz__q--start { justify-content: flex-start; text-align: start; font-size: 1.25rem; } .rt-quiz__doodle { flex: 0 0 auto; inline-size: 44px; block-size: 30px; margin-block-start: 4px; color: var(--rt-c-navy-deep); } .rt-quiz__doodle path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* DÖRT EŞİT SÜTUN, her genişlikte (Owner 2026-09-14: "İlk görünümde dört eşit sütun ve iki sıra kullan. Yedi sütunlu mevcut düzeni kaldır. Yaş düğmeleri eşit boyutta, kareye yakın ve düzenli aralıklı olsun."). Masaüstü: 76x66 kutular, 22 px aralık → grup 370 px, kartın içinde ortalı. "devamını göster" 12–17'yi aynı dört sütunda açar; kartın yüksekliği artar, genişliği değişmez. */ .rt-quiz__ages { display: grid; grid-template-columns: repeat(4, 76px); gap: 22px; list-style: none; padding: 0; margin: 0; justify-content: center; } .rt-quiz__ages--collapsed .rt-quiz__age--more { display: none; } .rt-quiz .rt-quiz__age-btn { inline-size: 76px; block-size: 66px; } /* Dar ekranda kart metin sütununu doldurur, dört sütun eşit paylaşır; kutu en az 48 px kalır. */ @media (max-width: 719.98px) { .rt-quiz { inline-size: 100%; padding: 40px 18px 18px; gap: 18px; } .rt-quiz__ages { grid-template-columns: repeat(4, minmax(48px, 72px)); gap: 14px; inline-size: 100%; } .rt-quiz .rt-quiz__age-btn { inline-size: 100%; block-size: 60px; } } @media (max-width: 400px) { .rt-quiz { padding: 38px 14px 16px; } .rt-quiz__ages { gap: 10px; } } /* KISA TELEFON EKRANI (R1 N5, 2026-09-15; 360×740 ve 375×667 ölçüldü): 76 px'lik mobil deneme çubuğu kartın alt kenarını, 375×667'de ikinci yaş sırasını ve "devamını göster"i örtüyordu; sohbet düğmesi "11"in üstündeydi. Yalnız YÜKSEKLİĞİ 760 px'ten kısa telefonlarda YALNIZ BOŞLUKLAR ve yaş kutusunun yüksekliği sıkışır; YAZI BOYU DEĞİŞMEZ (Owner 2026-09-14, birebir: "headırı çok küçülttün. hem yazılar küçüldü…"; kısa dizüstündeki kuralla aynı ilke). Kart çubuğun en az 12 px üstünde biter (ölçümden hesap, başlık ≈ 34,5 px aynı: 375×667 kart altı ≈ 577, çubuk üstü 591; 360×740 ≈ 576 / 664). Kartın üst iç boşluğu 30 px'in altına inmez: eğik hediye etiketi kartın içine ≈ 24 px sarkar ve sorunun üstünde durmalıdır. Yaş kutusu 52 px (44 px hedefin üstünde), "devamını göster" 44 px hedefini korur. 390×844 ve daha uzun ekranlar DEĞİŞMEZ. 320×568'de başlık + kart ekrana sığmaz; orada sohbet düğmesi kartın denetimlerini örttüğü sürece çekilir (rt.js fab). */ @media (max-width: 599.98px) and (max-height: 760px) { .rt-hero--home { padding-block-start: var(--rt-sp-3); } .rt-hero--home .rt-hero__copy { gap: var(--rt-sp-3); } .rt-hero--home .rt-hero__topline { margin-block-end: 0; } .rt-hero--home .rt-quiz { padding-block: 30px 10px; gap: 12px; } .rt-hero--home .rt-quiz__step[data-rt-quiz-step="age"] { gap: 12px; } .rt-hero--home .rt-quiz__ages { row-gap: 8px; } .rt-hero--home .rt-quiz .rt-quiz__age-btn { block-size: 52px; } } /* TABLET (600–959 px; R1 2026-09-15: 768×1024'te hero ilk ekranın 216 px altında bitiyordu, tek sütunda sahne 720×517 px'ti). Sahne kutusu ekran yüksekliğinin %30'uyla (en az 240 px) sınırlanır ve kuşağın alt boşluğu 32 px olur. Sahne ÇİZİLİ kalır: SVG oranı korunur ve kutuda ortalanır. Hesap 768×1024: kopya altı 643 → sahne 659–966 → kuşak altı 998; 900×1024: 1008. */ @media (min-width: 600px) and (max-width: 959.98px) { .rt-hero--home { padding-block-end: var(--rt-sp-6); } .rt-hero--quiz .rt-hero__art .rt-scene { max-block-size: max(240px, 30vh); } } /* DURUMLAR (2026-09-13 etkileşim standardı): üzerine gelince yüzey hafif YÜKSELİR (gölge uzar), basınca OTURUR (gölge kısalır), seçiliyken lime dolgu + oturmuş yüzey + içte beyaz ikinci çizgi — durum yalnız renkle değil biçimle de okunur ve seçim geri dönüşte korunur (aria-pressed). Tıklama alanı sabittir; hareket yalnız transform. Klavye odağı temanın tek odak kuralındandır. */ /* Kontur 2 px: 1,6 px 1x ekranda 1 px'e yuvarlanıyor ve Devam düğmesinin 2 px konturuyla çelişiyordu. */ .rt-quiz__age-btn { inline-size: 64px; block-size: 60px; border: 2px solid var(--rt-c-navy-deep); border-radius: 16px; background: transparent; color: var(--rt-c-navy); /* 16 px tabanı korunur (iOS odakta yakınlaştırmasın), metin büyütmeyle birlikte büyür. */ font: inherit; font-size: max(1rem, 16px); font-weight: 800; cursor: pointer; /* Örneğin imza ayrıntısı: 4 px sağa-aşağı SERT gölge (blursuz). */ box-shadow: 4px 4px 0 0 var(--rt-c-navy-deep); transition: background-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease; } .rt-quiz__age-btn:hover { background: var(--rt-action-primary-bg); border-color: var(--rt-c-navy-deep); color: var(--rt-action-primary-text); } @media (prefers-reduced-motion: no-preference) { .rt-quiz__age-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--rt-c-navy-deep); } .rt-quiz__age-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 0 var(--rt-c-navy-deep); } } .rt-quiz__age-btn[aria-pressed="true"], .rt-quiz__age-btn[aria-pressed="true"]:hover { background: var(--rt-action-primary-bg); border-color: var(--rt-c-navy-deep); color: var(--rt-action-primary-text); transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--rt-c-navy-deep), inset 0 0 0 2.5px var(--rt-c-white); } /* "Devamını göster": ortalı, altı çizili, 44 px dokunma hedefi (örnekteki gibi). */ .rt-quiz__expand { align-self: center; border: 0; background: none; padding: 0 var(--rt-sp-2); color: var(--rt-c-navy); font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-block-size: 44px; margin-block-start: -8px; } /* İkinci adım kartın tam genişliğini kullanır (giriş alanı ve düğmeler yan yana). */ .rt-quiz__step[data-rt-quiz-step="child"] { inline-size: 100%; min-inline-size: 316px; } /* İkinci adımın bağlamı: seçilen yaş lime çip olarak durur, yanında "Yaşı değiştir" geri götürür. */ .rt-quiz__context { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rt-sp-2) var(--rt-sp-3); } .rt-quiz__chip { display: inline-flex; align-items: center; min-block-size: 32px; padding-inline: 12px; border-radius: var(--rt-rd-pill); background: var(--rt-action-primary-bg); color: var(--rt-action-primary-text); font-size: var(--rt-f-sm); font-weight: 800; } .rt-quiz__chip:empty { display: none; } .rt-quiz__back { border: 0; background: none; padding: 0; min-block-size: 44px; color: var(--rt-c-navy); font: inherit; font-size: var(--rt-f-sm); font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } /* Ana sayfadaki ad + cinsiyet adımı: giriş alanı ve iki düğme, örnekteki ölçülerle. */ .rt-quiz__input { inline-size: 100%; min-block-size: 52px; padding: 8px 14px; border: 2px solid var(--rt-c-navy-deep); border-radius: 20px; box-shadow: 4px 4px 0 0 var(--rt-c-navy-deep); font: inherit; font-size: max(1rem, 16px); background: var(--rt-surface-default); color: var(--rt-text-primary); } /* Hata: çerçeve ve sert gölge hata rengine döner, altında çözümü söyleyen metin (aria-invalid + role=alert). */ .rt-quiz__input[aria-invalid="true"] { border-color: var(--rt-status-error-fg); box-shadow: 4px 4px 0 0 var(--rt-status-error-fg); } .rt-quiz__error { margin: 0; font-size: var(--rt-f-sm); font-weight: var(--rt-fw-bold); color: var(--rt-status-error-fg); } .rt-quiz__genders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* Cinsiyet düğmeleri yaş düğmeleriyle AYNI durum dilini konuşur (inceleme 2026-09-13: hover/basma geri bildirimi yoktu): üzerine gelince yükselir, basınca oturur, seçiliyken lime + oturmuş + iç çizgi. */ .rt-quiz__gender { display: flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 52px; border-radius: 20px; border: 2px solid var(--rt-c-navy-deep); box-shadow: 4px 4px 0 0 var(--rt-c-navy-deep); background: var(--rt-surface-default); color: var(--rt-c-navy); font: inherit; font-size: max(1rem, 16px); font-weight: 800; cursor: pointer; transition: background-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease; } .rt-quiz__gender:hover { background: var(--rt-action-primary-bg); color: var(--rt-action-primary-text); } @media (prefers-reduced-motion: no-preference) { .rt-quiz__gender:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--rt-c-navy-deep); } .rt-quiz__gender:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 0 var(--rt-c-navy-deep); } } .rt-quiz__gender[aria-pressed="true"], .rt-quiz__gender[aria-pressed="true"]:hover { background: var(--rt-action-primary-bg); color: var(--rt-action-primary-text); transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--rt-c-navy-deep), inset 0 0 0 2.5px var(--rt-c-white); } .rt-quiz__gender-icon { font-size: 20px; } .rt-quiz__step[data-rt-quiz-step="child"] { display: grid; gap: 10px; } /* AKAN ŞERİT: "Süper eğlenceli Türkçe öğretmenlerimizle tanışın" yazısı yatay akar (Owner 2026-09-12). İki özdeş kopya yan yana durur ve şerit tam bir kopya boyu (%50) kaydığında başa döner — dikiş görünmez. Kenarlarda yumuşak maske, yazının ekran kenarında kesilmesini engeller. */ /* Ölçüler örnekteki bandın ÖLÇÜLENMİŞ değerleridir (Owner 2026-09-12 "bantın şekli hızı vs. herşey"): bant yüksekliği 52 px, yazı 18 px / 800 ağırlık / büyük harf, tekrarlar arası 42 px, akış 60 saniyede bir tur ve doğrusal hız. Renkler BİZİM markamızındır: koyu kuşağın üstünde altın bant, üstünde lacivert yazı. Bant kuşağın en üstünde kenardan kenara uzanır. */ .rt-marquee { overflow: hidden; block-size: 52px; background: var(--rt-c-lime); margin-inline: calc(50% - 50vw); } .rt-marquee__track { display: flex; inline-size: max-content; block-size: 100%; } .rt-marquee__group { display: flex; align-items: center; } .rt-marquee__text { font-family: var(--rt-f-body); font-weight: 800; font-size: 18px; line-height: 52px; text-transform: uppercase; color: var(--rt-c-navy-deep); white-space: nowrap; padding-inline-start: 42px; } .rt-marquee__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--rt-c-navy-deep); flex: 0 0 auto; margin-inline-start: 42px; } @media (prefers-reduced-motion: no-preference) { .rt-marquee__track { animation: rt-marquee 60s linear infinite; } } /* Öğretmen kuşağı: tek parça koyu zemin, kartlar ve şerit onun üstünde. */ .rt-teachers-band { overflow: hidden; } .rt-teachers-band > .rt-container > .rt-section-head :is(p, .rt-muted) { color: rgba(255, 255, 255, 0.85); } /* Kartlar BEYAZDIR: koyu kuşağın metin rengi kartların içine sızmamalı. */ .rt-teachers-band :is(.rt-card, .rt-edu-card) { color: var(--rt-text-primary); } .rt-teachers-band :is(.rt-card, .rt-edu-card) :is(h1, h2, h3, h4, p, span, strong, li) { color: inherit; } .rt-teachers-band :is(.rt-card, .rt-edu-card) :is(h1, h2, h3, h4) { color: var(--rt-text-heading); } .rt-teachers-band :is(.rt-card, .rt-edu-card) a { color: var(--rt-text-link); } .rt-teachers-band .rt-eyebrow { color: var(--rt-c-gold); } /* Başlığın altında yeşil çizgi ve ortalanmış dar açıklama (Owner 2026-09-12: örnekle aynı). */ .rt-teachers-band .rt-section-head__title { display: inline-block; padding-block-end: 6px; border-block-end: 4px solid var(--rt-c-lime); border-radius: 2px; } .rt-teachers-band .rt-section-head__lead { max-inline-size: 42ch; margin-inline: auto; } .rt-teachers-band__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--rt-sp-4); margin-block-start: var(--rt-sp-2); } @keyframes rt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ANA SAYFA ÖĞRETMEN KAROSU (Owner 2026-09-12: "aynı onlar gibi — foto ve video oynatma düğmesi, isim vs yazmadan"): kart tümüyle fotoğraftır, üstünde tek bir oynatma işareti durur ve tamamı öğretmenin sayfasına bağlanır. Ad yalnız ekran okuyucuya verilir (rt-sr-only). */ .rt-edu-card--compact { position: relative; overflow: hidden; border-radius: 20px; padding: 0; border: 0; aspect-ratio: 3 / 4; background: var(--rt-surface-accent); } .rt-edu-card--compact .rt-portrait, .rt-edu-card--compact .rt-portrait img { inline-size: 100%; block-size: 100%; border-radius: 0; object-fit: cover; } .rt-edu-card__cover { position: absolute; inset: 0; } .rt-edu-card__play { position: absolute; inset-block-end: 14px; inset-inline-start: 14px; z-index: 1; inline-size: 44px; block-size: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--rt-action-primary-bg); color: var(--rt-action-primary-text); box-shadow: 0 6px 16px rgba(12, 24, 48, 0.25); } .rt-edu-card--compact:hover .rt-edu-card__play { background: var(--rt-action-primary-bg-hover); } /* ÖĞRETMEN RAYI (ana sayfa) — Owner 2026-09-12: "alt alta dizilmesin, ilk satıra sığmayanlar yana kaydırmalı olsun, oka tıkladıkça diğerleri gözüksün." Tek satır yatay kaydırma + tutma noktaları. Oklar yalnız kaydırılacak yer varken görünür (rt.js açar/kapatır); parmakla kaydırma her zaman çalıştığı için içerik oklar olmadan da erişilebilir kalır. */ .rt-team-rail { position: relative; } .rt-team-rail__track { /* Kart genişliği SABİTTİR: ekranda dört kart tam boyuyla durur, geri kalanlar okla gelir. Owner 2026-09-12 (birebir): "hepsini küçültüp sığdırmaya çalıştın. olmaz böyle." Bu yüzden burada esneme yoktur — kartlar küçülmez, ray kayar. */ display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 280px); grid-template-columns: none; overflow-x: auto; overscroll-behavior-inline: contain; /* proximity: düğmeyle giden SAYFA hedefini bozmaz, parmakla kaydırmada kartı hizalar. */ scroll-snap-type: inline proximity; padding-block-end: var(--rt-sp-2); scrollbar-width: thin; } @media (min-width: 720px) { /* Dört kartlık görünüm: eski ızgaradaki kart genişliğinin BİREBİR aynısı. */ .rt-team-rail__track { grid-auto-columns: calc((100% - 3 * var(--rt-sp-4)) / 4); } } /* `scroll-snap-stop: always` parmakla hızlı kaydırmada da sayfayı atlamayı engeller. */ .rt-team-rail__track > .rt-team__item { scroll-snap-align: start; scroll-snap-stop: always; } /* ÖĞRETMEN KUŞAĞI — ÖRNEKLE BİREBİR DÜZEN (Owner 2026-09-13, birebir: "öğretmen kısmı novakid in birebir aynısı olmamış. başlık vs kısmına bantın geçtiği kısma bak"). Ölçüler örnekten (1280 px): akan bant kuşağın EN ÜSTÜNDE 52 px · bant → başlık 88 · başlık 48/56 700 · altında ORTAYA hizalı 250 px el çizimi yeşil çizgi · başlık → metin 28 · metin 16/22, en fazla 370 px · metin → kartlar 44 · kart 272×337, aralık 24 · kartlar → düğme 44 · alt boşluk 60. Bant yazısı 24 px ve tekrarlar arasında dört köşeli yıldız; hız ≈85 px/sn. Dar ekranda başlık 30, bant yazısı 18 px. Oynat işareti kartın ortasında yarı saydam köşeli kutu; düğme 20 px köşe, 18 px yazı, sağda ok. Renkler BİZİMDİR. */ .rt-teachers-band--nk { position: relative; padding-block: 0; background: var(--rt-c-navy); color: var(--rt-text-on-inverse); } .rt-teachers-band--nk > .rt-marquee { margin-inline: 0; } .rt-teachers-band--nk .rt-marquee__text { font-size: 24px; padding-inline-start: 24px; } .rt-marquee__star { flex: 0 0 auto; inline-size: 18px; block-size: 30px; margin-inline-start: 24px; fill: var(--rt-c-navy); } @media (prefers-reduced-motion: no-preference) { .rt-teachers-band--nk .rt-marquee__track { animation-duration: 27s; } /* 2273 px yarım iz / 27 sn ≈ 84 px/sn (örnek 85) */ } .rt-teachers-band__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 44px; padding-block: 88px 60px; } .rt-teachers-band__head { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; } .rt-teachers-band__title { margin: 0; font-family: var(--rt-f-display); font-weight: 700; letter-spacing: 0; font-size: clamp(1.875rem, 1.05rem + 2.6vw, 3rem); line-height: 1.17; color: var(--rt-text-on-inverse); text-wrap: balance; } /* Başlığın altındaki DURAĞAN fırça lekesi (span::after arka planı) ve onu taşıyan "> span" konum kuralı KALDIRILDI (R1 B6, 2026-09-15): başlık RtView::mark ile yazılır ve ailenin kalem çizgisi görününce çizilir (.rt-mark--draw; Owner 2026-09-14: "altı çizili tüm başlıklar gelirken yavaşça altının çizilişini görelim"). span.rt-mark başlığın DOĞRUDAN çocuğudur: eski "> span { display: inline-block }" kuralı kalsaydı işaret satır içi blok olur, başlığın dengeli kırılımını bozardı. Koyu kuşakta kalem kendiliğinden lime'dır: --rt-ink-mark semantic katmanda .rt-teachers-band--nk için lime'a döner; ayrıca renk kuralı yazılmaz. */ .rt-teachers-band__lead { max-inline-size: 370px; display: flex; flex-direction: column; } .rt-teachers-band__lead p { margin: 0; font-size: 16px; line-height: 22px; color: var(--rt-text-on-inverse); } .rt-teachers-band--nk .rt-team-rail { inline-size: 100%; } .rt-teachers-band--nk .rt-team-rail__track { gap: 24px; padding-block-end: 0; } @media (min-width: 720px) { .rt-teachers-band--nk .rt-team-rail__track { grid-auto-columns: calc((100% - 3 * 24px) / 4); } } .rt-teachers-band--nk .rt-edu-card--compact { aspect-ratio: 272 / 337; box-shadow: none; } .rt-teachers-band--nk .rt-edu-card .rt-edu-card__play { inset-block: 50% auto; inset-inline: 50% auto; margin-block-start: -24px; transform: translate(-50%, -50%); inline-size: 80px; block-size: 44px; border-radius: 10px; background: rgba(255, 255, 255, 0.4); color: #FFFFFF; box-shadow: none; pointer-events: none; transition: background-color 0.3s ease-in-out; } .rt-teachers-band--nk .rt-edu-card__play svg { display: block; transition: transform 0.3s ease-in-out; } .rt-teachers-band--nk .rt-edu-card--compact:hover .rt-edu-card__play { background: rgba(255, 255, 255, 0.65); } .rt-teachers-band--nk .rt-edu-card--compact:hover .rt-edu-card__play svg { transform: scale(1.2); } .rt-teachers-band--nk .rt-teachers-band__actions { margin-block-start: 0; } .rt-teachers-band--nk .rt-teachers-band__actions .rt-btn { border-radius: 20px; font-size: 18px; font-weight: 600; padding-inline: 22px; gap: 14px; } /* Ok işareti ::before'dadır ve order ile yazının SONUNA gelir: ::after düğmelerin dolan dairesidir (rt.component). */ .rt-teachers-band--nk .rt-teachers-band__actions .rt-btn::before { content: ""; order: 2; flex: none; inline-size: 8px; aspect-ratio: 1 / 1; margin-inline-end: 4px; /* sabit yükseklik yok: a11y.rt_btn_labels_can_wrap */ border-block-start: 2px solid currentColor; border-inline-end: 2px solid currentColor; transform: rotate(45deg); } /* Süsler (kendi çizimimiz): solda zikzak, sağ altta yıldız; kuşak taşanı keser. */ .rt-teachers-band--nk::before, .rt-teachers-band--nk::after { content: ""; position: absolute; pointer-events: none; background: center / contain no-repeat; } .rt-teachers-band--nk::before { inset-inline-start: -26px; inset-block-start: 298px; inline-size: 166px; block-size: 127px; background-image: url("brand/doodle-zigzag.svg"); } .rt-teachers-band--nk::after { inset-inline-end: -30px; inset-block-end: 24px; inline-size: 94px; block-size: 109px; background-image: url("brand/doodle-star.svg"); } @media (prefers-reduced-motion: reduce) { .rt-teachers-band--nk .rt-edu-card__play, .rt-teachers-band--nk .rt-edu-card__play svg { transition: none; } } @media (max-width: 719px) { .rt-teachers-band--nk .rt-marquee__text { font-size: 18px; } .rt-teachers-band__inner { padding-block: 74px 88px; } /* Dar ekranda süs metnin üstüne binmesin: bant ile başlık arasındaki boşluğa, sol kenara oturur. */ .rt-teachers-band--nk::before { inline-size: 92px; block-size: 70px; inset-block-start: 58px; inset-inline-start: -30px; } .rt-teachers-band--nk::after { inline-size: 58px; block-size: 68px; inset-inline-end: -20px; } } /* Odak halkası için ayrı kural YAZILMAZ: temada tek bir :focus-visible kuralı vardır (a11y kontrolü bunu şart koşar) ve kaydırma alanı tabindex aldığı için o kural buraya da uygulanır. */ .rt-rail-btn { position: absolute; inset-block-start: 40%; z-index: 2; inline-size: 44px; block-size: 44px; display: grid; place-items: center; border: 1px solid var(--rt-c-line); border-radius: 50%; background: var(--rt-surface-default); color: var(--rt-text-heading); box-shadow: 0 6px 18px rgba(12, 24, 48, 0.14); cursor: pointer; } .rt-rail-btn:hover { background: var(--rt-surface-accent); } .rt-rail-btn--prev { inset-inline-start: calc(-1 * var(--rt-sp-3)); } .rt-rail-btn--next { inset-inline-end: calc(-1 * var(--rt-sp-3)); } .rt-rail-btn--prev svg { transform: rotate(180deg); } /* Yorum rayı: aynı mekanizma. Geniş ekranda DÖRT kartlık sayfa — örnekte de dört kart yan yana durur (315 px kart, 1280 px ekran; ölçüldü 2026-09-12). Dar ekranda tek kart kayar. */ .rt-quote-rail .rt-team-rail__track { grid-auto-columns: min(86%, 340px); } @media (min-width: 900px) { .rt-quote-rail .rt-team-rail__track { grid-auto-columns: calc((100% - 2 * var(--rt-sp-4)) / 3); } } @media (min-width: 1180px) { .rt-quote-rail .rt-team-rail__track { grid-auto-columns: calc((100% - 3 * var(--rt-sp-4)) / 4); } } .rt-quote-rail .rt-quotes { gap: var(--rt-sp-4); grid-template-columns: none; } .rt-quote-rail .rt-quote__text { color: var(--rt-text-primary); } /* Yorum kartı örnekteki ölçülerle: açık mavi yüzey, 20 px köşe, 16 px iç boşluk, çerçevesiz. */ .rt-quote-rail .rt-quote { background: var(--rt-c-navy-tint); border: 0; border-radius: 20px; padding: 16px; } /* ================= ANA SAYFA BÖLÜM DİLİ (Owner 2026-09-12) ==================================== Owner örnek olarak Novakid'i verdi ve dört bölüm için "tasarım birebir aynısı olsun" dedi: üç adım, tanıtım filmi, yorumlar, ücret bilgilendirmesi ve sorular-cevaplar. Ölçüler örnek sayfadan 1280 px'te ÖLÇÜLEREK alındı (etiket 16/21 700, başlık 48/56-61 700, kart köşeleri 12/16/20 px, adım numarası sütunu 32 px, yorum kartı 315 px, SSS satırı 50 px köşe). RENKLER BİZİMDİR: örnekteki mor #4221B8 yerine kendi lacivertimiz, yeşil #79FD7F yerine kendi limemiz, kırmızı etiket yerine kendi mercanımız kullanılır (Owner: "çalmış gibi olmayalım"). */ /* BÖLÜM GEÇİŞLERİ (Owner 2026-09-12: "geçişler belirgin olsun … arka plan açık renkten açık renge geçmesin"): ana sayfa ÜÇ zemin arasında sırayla gider — BEYAZ, AÇIK MAVİ, KOYU LACİVERT. Komşu iki bölüm asla aynı zemini kullanmaz; koyu kuşaklar sayfayı bölümlere ayırır. Sıra: hero KOYU · adımlar BEYAZ · film MAVİ · programlar BEYAZ · öğretmenler KOYU · ödüller BEYAZ · yorumlar MAVİ · planlar BEYAZ · SSS KOYU · kapanış LİME. */ .rt-nk { padding-block: var(--rt-sp-8); } .rt-nk--light { background: var(--rt-surface-page); color: var(--rt-text-primary); } .rt-nk--white { background: var(--rt-surface-default); color: var(--rt-text-primary); } .rt-nk--tint { background: var(--rt-c-navy-tint); color: var(--rt-text-primary); } .rt-nk--dark { background: var(--rt-c-navy); color: var(--rt-text-on-inverse); } .rt-section--white { background: var(--rt-surface-default); } /* Açık mavi zeminde kart ve satırlar BEYAZA döner; aksi hâlde kart zeminle aynı renk olur. */ .rt-nk--tint .rt-price, .rt-nk--tint .rt-steps__card { background: var(--rt-surface-default); } .rt-nk--tint .rt-quote { background: var(--rt-surface-default); } /* Kapanış bandının lime varyantı için bkz. .rt-cta-band tanımının hemen altı: kural ORADA durur, çünkü aynı özgüllükteki .rt-cta-band daha sonra geliyor ve buradaki tanımı eziyordu. */ .rt-nk__inner { display: flex; flex-direction: column; align-items: center; gap: var(--rt-sp-4); text-align: center; } .rt-nk-labels { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; } /* Yazı ölçüleri örnekten ALINMIŞTIR (Owner 2026-09-12: "yazıların boyutları da novakiddeki gibi olsun"): etiket 16/21 700, başlık 48/56 700, alt cümle 18/25, kart başlığı 16/22 700, kart metni 16/22 400. Başlık dar ekranda küçülür; 1280 px'te tam 48 px'tir. */ .rt-nk-label { display: inline-block; padding: 4px 10px; border-radius: 4px; background: var(--rt-c-coral); color: var(--rt-c-white); font-size: 16px; line-height: 21px; font-weight: var(--rt-fw-bold); } .rt-nk-title { margin: 0; font-family: var(--rt-f-display); font-weight: var(--rt-fw-bold); font-size: clamp(1.75rem, 1.05rem + 2.6vw, 3rem); line-height: 1.17; text-wrap: balance; max-inline-size: 22ch; } .rt-nk--dark .rt-nk-title { color: var(--rt-text-on-inverse); } .rt-nk-sub { margin: 0; font-size: var(--rt-f-md); color: var(--rt-text-secondary); max-inline-size: 44ch; } .rt-nk-note { margin: 0; font-size: var(--rt-f-sm); color: var(--rt-text-secondary); max-inline-size: 60ch; } /* Bölüm düğmesi örnektekiyle aynı: DOLGULU lacivert hap, 52 px yükseklik, 20 px köşe, 18 px yazı ve sütun genişliğinde (389 px). Owner 2026-09-12: "buton renkleri, tasarımı, içinin boyalı olması vs. aynı olsun." */ .rt-nk-cta { margin-block-start: var(--rt-sp-2); inline-size: min(100%, 389px); --rt-btn-min: 52px; border-radius: 20px; font-size: 18px; background: var(--rt-c-navy); color: var(--rt-c-white); border-color: var(--rt-c-navy-deep); /* Lacivert dolgulu düğmede sert gölge LİME (2026-09-14): koyu gölge koyu dolguda kaybolur; lime katman yaş kartının taşan katmanıyla aynı dili kurar. */ box-shadow: 3px 3px 0 0 var(--rt-c-lime); } .rt-nk-cta:hover { background: var(--rt-c-navy-deep); border-color: var(--rt-c-navy-deep); } @media (prefers-reduced-motion: no-preference) { .rt-nk-cta:hover { box-shadow: 4px 4px 0 0 var(--rt-c-lime); } .rt-nk-cta:active { box-shadow: 1px 1px 0 0 var(--rt-c-lime); } } /* Üç adım: 32 px numara sütunu, aralarında dikey bağlantı çizgisi, 16 px köşeli kart. */ .rt-steps { list-style: none; margin: var(--rt-sp-2) 0 0; padding: 0; display: flex; flex-direction: column; inline-size: min(100%, 389px); text-align: start; } .rt-steps__row { display: flex; gap: var(--rt-sp-4); align-items: stretch; } .rt-steps__num { position: relative; flex: 0 0 32px; display: flex; align-items: flex-start; justify-content: center; font-size: var(--rt-f-sm); font-weight: var(--rt-fw-bold); color: var(--rt-c-navy); } .rt-steps__num::before { content: ""; position: absolute; inset-block-start: 6px; inline-size: 32px; block-size: 32px; border: 1px solid var(--rt-c-navy); border-radius: 50%; background: var(--rt-surface-default); } .rt-steps__num::after { /* Numaraları birleştiren dikey hat; son adımda gizlenir. 2026-09-14: KESİKLİ YOL (marka bağ çizgisi) — adımlar bir rotanın durakları gibi okunur. */ content: ""; position: absolute; inset-block: 40px 2px; inline-size: 2px; border-radius: 1px; background: repeating-linear-gradient(to bottom, var(--rt-c-navy) 0 6px, transparent 6px 11px); opacity: 0.55; } .rt-steps__row:last-child .rt-steps__num::after { display: none; } .rt-steps__num > span { position: relative; z-index: 1; line-height: 44px; } /* HATA DÜZELTMESİ 2026-09-13 (örnekle karşılaştırma ölçümü): numara span'ın içinde doğrudan metin olarak durur (iç yok), bu yüzden mutlak konumlu beyaz daire (::before) rakamın ÜSTÜNE boyanıyor ve 1/2/3 görünmüyordu. Daire ve bağlantı çizgisi numara kutusunun kendi yığın bağlamında ARKAYA alınır; rakam dairenin ortasına oturur (daire 6 px'ten başlar, 32 px çapındadır → merkez 22 px = 44 px satır yüksekliğinin ortası). */ .rt-steps__num { isolation: isolate; line-height: 44px; } .rt-steps__num::before, .rt-steps__num::after { z-index: -1; } /* HATA DÜZELTMESİ 2026-09-13: filmin altındaki not koyu kuşak için yazılmış %75 beyazla kalmıştı; bölüm artık açık mavi olduğundan okunmuyordu (kontrast ≈1,2:1). Açık zeminde ikincil metin rengi kullanılır. */ .rt-nk--film .rt-video--brand .rt-video__note { color: var(--rt-text-secondary); } .rt-steps__card { flex: 1 1 auto; margin-block-end: var(--rt-sp-3); padding: 14px 16px; border: 1px solid var(--rt-c-navy); border-radius: 16px; background: var(--rt-surface-default); display: flex; flex-direction: column; gap: 2px; } .rt-steps__title { margin: 0; font-size: var(--rt-f-md); font-weight: var(--rt-fw-bold); color: var(--rt-c-navy-deep); } .rt-steps__text { margin: 0; font-size: var(--rt-f-sm); color: var(--rt-c-navy); } /* Ücret bilgilendirmesi: alt alta satır kartları, solda ad, sağda değer. */ .rt-prices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; inline-size: min(100%, 592px); text-align: start; } .rt-price { display: flex; gap: var(--rt-sp-4); justify-content: space-between; align-items: center; padding: 20px 16px; border: 1px solid var(--rt-c-line); border-radius: 12px; background: var(--rt-c-navy-tint); } .rt-price__main { display: flex; flex-direction: column; gap: 2px; } .rt-price__title { margin: 0; font-size: var(--rt-f-md); font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-price__note { margin: 0; font-size: var(--rt-f-sm); color: var(--rt-text-secondary); } .rt-price__side { text-align: end; display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; } .rt-price__value { margin: 0; font-size: var(--rt-f-md); font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-price__meta { margin: 0; font-size: var(--rt-f-sm); color: var(--rt-text-secondary); } /* HEDİYE ROZETİ (Owner 2026-09-14: "hediyeler onların hediyeleri gibi gösterilsin ikon ve tasarım olarak. ücretsiz değil hediye yazsın"): Novakid'in kampanya rozeti gibi kartın üst kenarının ortasına oturan küçük etiket; mercan zemin, beyaz yazı, hediye paketi simgesi. Rozet kartın üstüne taştığı için hediye kartlarının üst boşluğu ve arası açılır. */ /* ASİMETRİ (Owner 2026-09-14, birebir: "hediye yazıları sağ üste çarpraz eklensin. asimetriyi temamızda kullanalım"): rozet kartın SAĞ ÜST köşesine çapraz oturur, köşeden biraz taşar; yapıştırılmış bir hediye etiketi gibi durur. */ .rt-price--gift { position: relative; } .rt-prices > .rt-price--gift + .rt-price { margin-block-start: 6px; } .rt-price--gift .rt-price__value { color: var(--rt-c-navy); } .rt-price--gift .rt-price__side { padding-block-start: 10px; } /* Hero'daki hediye etiketiyle AYNI tasarım (Owner 2026-09-14: "hediye rozetleri header daki hediye ifadesindekiyle aynı olsun"): altın zemin, koyu indigo yazı ve kontur, sert gölge, hediye paketi simgesi, 15 px / 800. */ .rt-price__badge { position: absolute; z-index: 1; inset-block-start: -18px; inset-inline-end: -10px; transform: rotate(calc(var(--rt-tilt-badge) * var(--rt-dir))); transform-origin: 50% 50%; display: inline-flex; align-items: center; gap: 7px; min-block-size: 38px; padding-inline: 12px 16px; border: 2px solid var(--rt-offset-ink); border-radius: var(--rt-rd-pill); background: var(--rt-gift-bg); color: var(--rt-gift-text); font-size: 0.9375rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.01em; white-space: nowrap; box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-offset-ink); } .rt-price__badge .rt-icon { inline-size: 20px; block-size: 20px; flex: 0 0 auto; stroke-width: 2.2; } @media (max-width: 599.98px) { .rt-price__badge { inset-inline-end: -4px; font-size: 0.875rem; min-block-size: 36px; } } /* Yorumlar: açık zeminli kartlar tek sırada kayar, altta dairesel oklar ve sayaç. */ .rt-nk--reviews .rt-quote-rail { inline-size: 100%; } .rt-nk--reviews .rt-quotes__item { scroll-snap-align: start; } .rt-nk--reviews .rt-quote { background: var(--rt-c-navy-tint); border: 0; border-radius: 20px; padding: 16px; block-size: 100%; box-shadow: none; margin-block-end: 0; gap: var(--rt-sp-3); text-align: start; } /* Örnekte balon kuyruğu yoktur; kart düz bir kutudur. */ .rt-nk--reviews .rt-quote::before, .rt-nk--reviews .rt-quote::after { display: none; } /* Ad üstte, ülke adın ALTINDA (örnekteki gibi); yorum metni onların altında başlar. */ .rt-nk--reviews .rt-quote__by { flex-direction: column; align-items: flex-start; gap: 2px; } .rt-nk--reviews .rt-quote__place { margin-inline-start: 0; } .rt-nk--reviews .rt-quote__text { font-size: var(--rt-f-sm); line-height: 1.55; } /* TÜM YORUMLAR sayfası: ailelerin sözleri ızgarada, öğretmen yorumları iki sütunda. */ .rt-reviews-page__stories { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rt-sp-4); grid-template-columns: minmax(0, 1fr); } @media (min-width: 720px) { .rt-reviews-page__stories { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .rt-reviews-page__stories { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .rt-reviews-page__list { display: grid; gap: var(--rt-sp-4); grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .rt-reviews-page__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .rt-reviews-page__teacher { margin: var(--rt-sp-2) 0 0; } /* "Öğretmen: …" bağlantısı 19 px yüksekti; dokunma alanı satır yüksekliğini değiştirmeden 44 px'e çıkar. */ .rt-reviews-page__teacher a { display: inline-block; padding-block: 13px; margin-block: -13px; } /* Aile sözü kartındaki yıldızlar (Owner listesindeki puan) ve profildeki sözler ızgarası. */ .rt-quote__stars { display: inline-flex; gap: 2px; } /* Profilde sözler DAR ana sütunun içindedir: dört sütun kartları kelime kelime kıracak kadar daraltıyordu. Burada en fazla İKİ sütun kullanılır (kurallar yorumlar sayfası ızgarasından SONRA gelir ki aynı özgüllükte onu ezsin). */ .rt-profile__stories { margin-block-start: var(--rt-sp-3); grid-template-columns: minmax(0, 1fr); } @media (min-width: 720px) { .rt-profile__stories { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .rt-profile__stories { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* YORUM KARTLARI — OKUNURLUK (Owner 2026-09-12, birebir: "yorumlar kısmının UX düzeni berbat. Bunu acil çöz. Okunmuyor. efekt yok. birşey yok. minicik ve yazılar biribirine girmiş"). Ekranda ölçülen sorunlar: (1) açık mavi bölümde kart da açık maviydi, kartın sınırı görünmüyordu (.rt-nk--reviews kuralı .rt-nk--tint'in beyaz kart kuralını eziyordu); (2) metin 14 px'ti; (3) 1280 px'te dört dar sütun ve 16 px aralık vardı, metinler yan sütunla karışıyordu; (4) ray oku son kartın metninin üstüne biniyordu; (5) uzun yorum kartı çok uzatıyordu. Yeni düzen: BEYAZ kart + ince çerçeve + gölge, 16/1.6 metin, geniş ekranda ÜÇ kart ve 24 px aralık, üzerine gelince kart yükselir, uzun metin 6 satırda kısalır ve "Devamını oku" ile açılır (rt.js quoteClamp), oklar kartların ALTINDA. */ .rt-nk--reviews .rt-quote { background: var(--rt-surface-default); border: 1px solid var(--rt-border-subtle); border-radius: 20px; padding: var(--rt-sp-5); gap: var(--rt-sp-3); box-shadow: 0 1px 2px rgba(20, 24, 60, 0.06), 0 8px 24px rgba(20, 24, 60, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .rt-nk--reviews .rt-quote:hover { transform: translateY(-4px); border-color: var(--rt-border-strong); box-shadow: 0 2px 4px rgba(20, 24, 60, 0.08), 0 18px 40px rgba(20, 24, 60, 0.12); } .rt-nk--reviews .rt-quote__by { font-size: 1rem; gap: 4px; } .rt-nk--reviews .rt-quote__name { font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-nk--reviews .rt-quote__place { font-size: 0.875rem; } .rt-nk--reviews .rt-quote__text { font-size: 1rem; line-height: 1.6; color: var(--rt-text-primary); } .rt-nk--reviews .rt-quote__text p { margin: 0; } .rt-nk--reviews .rt-quote__text p + p { margin-block-start: var(--rt-sp-2); } .rt-nk--reviews .rt-quote__title { font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-nk--reviews .rt-quote__stars .rt-stars__star .rt-icon { inline-size: 1.125rem; block-size: 1.125rem; } .rt-quote [data-rt-quote-text].is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; } .rt-quote__more { align-self: flex-start; min-block-size: var(--rt-target-min); padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 1rem; font-weight: var(--rt-fw-bold); color: var(--rt-text-link); text-decoration: underline; text-underline-offset: 0.2em; } /* Ana sayfa rayı: dar ekranda tek kart (yanındaki kartın kenarı görünür), 900 px'te iki, 1180 px'te ÜÇ kart. */ .rt-nk--reviews .rt-quote-rail { padding-block-end: 64px; } .rt-nk--reviews .rt-quote-rail .rt-team-rail__track { gap: var(--rt-sp-5); padding: 8px 2px 16px; grid-auto-columns: min(88%, 380px); } @media (min-width: 900px) { .rt-nk--reviews .rt-quote-rail .rt-team-rail__track { grid-auto-columns: calc((100% - var(--rt-sp-5)) / 2); } } @media (min-width: 1180px) { .rt-nk--reviews .rt-quote-rail .rt-team-rail__track { grid-auto-columns: calc((100% - 2 * var(--rt-sp-5)) / 3); } } .rt-nk--reviews .rt-quote-rail .rt-rail-btn { inset-block: auto 0; transform: none; } .rt-nk--reviews .rt-quote-rail .rt-rail-btn--prev { inset-inline-start: calc(50% - 52px); } .rt-nk--reviews .rt-quote-rail .rt-rail-btn--next { inset-inline-end: calc(50% - 52px); } /* Tüm yorumlar sayfası: duvar düzeni — kısa ve uzun kartlar arasında boş yer kalmaz, sütunlar karışmaz. */ .rt-nk--reviews .rt-reviews-page__stories { display: block; columns: 1; column-gap: var(--rt-sp-5); } @media (min-width: 720px) { .rt-nk--reviews .rt-reviews-page__stories { columns: 2; } } @media (min-width: 1100px) { .rt-nk--reviews .rt-reviews-page__stories { columns: 3; } } .rt-nk--reviews .rt-reviews-page__stories > li { break-inside: avoid; padding-block-start: 4px; margin-block-end: var(--rt-sp-5); } .rt-nk--reviews .rt-reviews-page__teacher { font-size: 0.875rem; } /* AİLE YORUMLARI — PREMIUM KART (Owner 2026-09-13, birebir: "aile yorumları için de tasarım UX ultra süper premium üst düzey kalitede olsun"). Örnekle aynı iskelet: dönüşümlü 1° eğik kartlar, tek kart adımı, rayın altında ortalı DOLU yuvarlak oklar ve "3 / 21" sayacı. Üstüne: baş harf rozeti, köşede büyük tırnak süsü, katmanlı yumuşak gölge, üzerine gelince kartın düzelip yükselmesi, okların içten dolan hareketi. Renkler BİZİMDİR. */ .rt-nk--reviews .rt-quote { position: relative; overflow: hidden; isolation: isolate; padding: 28px 28px 24px; border-radius: 24px; gap: 14px; background: var(--rt-surface-default); border: 1px solid rgba(59, 46, 158, 0.08); box-shadow: 0 1px 2px rgba(20, 24, 60, 0.05), 0 14px 34px -10px rgba(20, 24, 60, 0.16); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; } /* Köşedeki büyük tırnak: dekoratif, metnin arkasında. (.rt-quote'un balon kuyruğu kuralları burada sıfırlanır.) */ .rt-nk--reviews .rt-quote::before { content: "\201C"; display: block; position: absolute; z-index: -1; pointer-events: none; inset-block-start: -22px; inset-inline-start: auto; inset-inline-end: 12px; inline-size: auto; block-size: auto; border: 0; font-family: Georgia, "Times New Roman", serif; font-size: 150px; line-height: 1; color: var(--rt-c-lime); opacity: 0.35; } .rt-nk--reviews .rt-quote::after { display: none; } .rt-quote__head { display: flex; align-items: center; gap: 12px; min-inline-size: 0; } .rt-nk--reviews .rt-quote__by { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-inline-size: 0; } .rt-nk--reviews .rt-quote__name { font-size: 1rem; line-height: 1.3; font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-nk--reviews .rt-quote__place { margin: 0; font-size: 0.875rem; line-height: 1.3; font-weight: 500; color: var(--rt-text-secondary); } /* Baş harf dairesi (.rt-quote__avatar) ve üzerindeki küçük bayrak rozeti: dosya sonundaki "YORUM-VURGUSU-VE-BAYRAK-2026-09-18" bloğunda (Owner 2026-09-18: "UX standartlarında premium yap"). Eski doygun degrade tonlar kaldırıldı: adın yanındaki tek renk vurgusu bayraktır. */ /* Ülke ve tarih aynı satırda; ikisi birlikteyse aralarında nokta (Owner 2026-09-13: "verdiğim tarihler de eklensin"). */ .rt-quote__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 0.875rem; line-height: 1.3; } .rt-quote__date { color: var(--rt-text-secondary); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .rt-quote__place + .rt-quote__date::before { content: "·"; margin-inline-end: 8px; color: var(--rt-text-secondary); } .rt-nk--reviews .rt-quote__stars { gap: 3px; } .rt-nk--reviews .rt-quote__stars .rt-stars__star .rt-icon { inline-size: 1.125rem; block-size: 1.125rem; } .rt-nk--reviews .rt-quote__text { font-size: 1rem; line-height: 1.65; color: var(--rt-text-primary); } .rt-nk--reviews .rt-reviews-page__teacher { margin: 2px 0 0; padding-block-start: 12px; border-block-start: 1px solid var(--rt-border-subtle); } /* Ana sayfa rayı: kartlar dönüşümlü 1° eğik (örnekteki gibi); üzerine gelince düzelir ve yükselir. */ .rt-nk--reviews .rt-quote-rail { padding-block-end: 0; } .rt-nk--reviews .rt-quote-rail .rt-team-rail__track { padding: 14px 6px 22px; scroll-padding-inline: 6px; scroll-snap-type: inline mandatory; scrollbar-width: none; } .rt-nk--reviews .rt-quote-rail .rt-team-rail__track::-webkit-scrollbar { display: none; } .rt-nk--reviews .rt-quote-rail .rt-quotes__item { scroll-snap-align: start; scroll-snap-stop: always; } .rt-nk--reviews .rt-quote-rail .rt-quotes__item:nth-child(odd) .rt-quote { transform: rotate(-1deg); } .rt-nk--reviews .rt-quote-rail .rt-quotes__item:nth-child(even) .rt-quote { transform: rotate(1deg); } .rt-nk--reviews .rt-quote-rail .rt-quotes__item .rt-quote:hover, .rt-nk--reviews .rt-quote-rail .rt-quotes__item .rt-quote:focus-within { transform: rotate(0deg) translateY(-6px); border-color: rgba(59, 46, 158, 0.18); box-shadow: 0 2px 4px rgba(20, 24, 60, 0.06), 0 24px 48px -12px rgba(20, 24, 60, 0.24); } .rt-nk--reviews .rt-reviews-page__stories .rt-quote:hover { transform: translateY(-4px); border-color: rgba(59, 46, 158, 0.18); box-shadow: 0 2px 4px rgba(20, 24, 60, 0.06), 0 24px 48px -12px rgba(20, 24, 60, 0.22); } /* Kontrol satırı: rayın altında ortalı; iki DOLU yuvarlak ok (56 px) ve sayaç. Üzerine gelince lime içten dolar. */ .rt-rail-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-block-start: 28px; } .rt-nk--reviews .rt-rail-controls .rt-rail-btn { position: relative; inset: auto; transform: none; overflow: hidden; isolation: isolate; inline-size: 56px; block-size: 56px; border: 0; border-radius: 50%; background: var(--rt-c-navy); color: #FFFFFF; box-shadow: 0 10px 22px -8px rgba(59, 46, 158, 0.6); transition: color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; } .rt-nk--reviews .rt-rail-controls .rt-rail-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--rt-c-lime); transform: scale(0); transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1); } .rt-nk--reviews .rt-rail-controls .rt-rail-btn:hover, .rt-nk--reviews .rt-rail-controls .rt-rail-btn:focus-visible { background: var(--rt-c-navy); color: var(--rt-c-navy-deep); } .rt-nk--reviews .rt-rail-controls .rt-rail-btn:hover::before, .rt-nk--reviews .rt-rail-controls .rt-rail-btn:focus-visible::before, .rt-nk--reviews .rt-rail-controls .rt-rail-btn:active::before { transform: scale(1); } .rt-nk--reviews .rt-rail-controls .rt-rail-btn:active { transform: scale(0.96); } .rt-nk--reviews .rt-rail-controls .rt-rail-btn .rt-icon { inline-size: 20px; block-size: 20px; } .rt-rail-count { margin: 0 0 0 8px; min-inline-size: 5.5ch; display: inline-flex; align-items: baseline; gap: 4px; font-size: 16px; line-height: 22px; font-weight: 800; color: var(--rt-c-navy); font-variant-numeric: tabular-nums; } .rt-rail-count__sep { color: var(--rt-text-secondary); font-weight: 600; } @media (max-width: 719px) { .rt-nk--reviews .rt-quote { padding: 22px 20px 20px; } .rt-nk--reviews .rt-rail-controls .rt-rail-btn { inline-size: 48px; block-size: 48px; } } @media (prefers-reduced-motion: reduce) { .rt-nk--reviews .rt-quote-rail .rt-quotes__item .rt-quote, .rt-nk--reviews .rt-quote-rail .rt-quotes__item .rt-quote:hover { transform: none; transition: none; } .rt-nk--reviews .rt-rail-controls .rt-rail-btn, .rt-nk--reviews .rt-rail-controls .rt-rail-btn::before { transition: none; } } @media (prefers-reduced-motion: reduce) { .rt-nk--reviews .rt-quote { transition: none; } .rt-nk--reviews .rt-quote:hover { transform: none; } } /* Ödüller ve katılımlar: kesintisiz akan rozet şeridi (örnekteki dönen logo alanının karşılığı). Şerit iki kopyadan oluşur; ikincisi yalnız dikiş yerini gizler ve ekran okuyuculardan gizlidir. */ .rt-awards { inline-size: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .rt-awards__track { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--rt-sp-4); inline-size: max-content; } .rt-awards__item { flex: 0 0 auto; } /* Kutu ölçüsü SABİT, logo oranını bozmadan içine sığar: farklı en-boy oranındaki logolar şeritte aynı boyda görünür (Owner 2026-09-12: "aynı boyuttaki versiyonlarını ekle"). */ .rt-award { inline-size: 220px; block-size: 120px; display: flex; align-items: center; justify-content: center; padding: 16px 20px; background: var(--rt-surface-default); border: 1px solid var(--rt-c-line); border-radius: var(--rt-rd-md); } /* Logolar ortak tuvaldedir (scripts/rt_award_logos_2026_09_13.php, alan eşitlemeli); kutuyu tam doldurur ki hepsi AYNI boyda dursun (Owner 2026-09-13: "logoları aynı boyda düzenli bir şekilde"). İç alan 180×88 = tuval/2. */ .rt-award__logo { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; } .rt-award__org { font-size: var(--rt-f-xs); font-weight: var(--rt-fw-bold); color: var(--rt-text-secondary); text-align: center; line-height: 1.3; } @media (prefers-reduced-motion: no-preference) { .rt-awards__track { animation: rt-awards-run 38s linear infinite; } .rt-awards:hover .rt-awards__track { animation-play-state: paused; } } @keyframes rt-awards-run { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Sorular ve cevaplar: koyu zemin, tam yuvarlatılmış satır, sağda dairesel "+" işareti. */ /* SSS kuşağının kenarlarında iki ORGANİK KIVRIM (2026-09-14 tasarım turu, görsel yön: "Sık sorulan sorularda kenarlara yerleşen organik kıvrımlar"): lime sol üstte, mercan sağ altta; düşük opaklık, içeriğe girmez, tıklama almaz; kuşak taşanı keser. 1000 px altında kapalı. */ .rt-nk--faq { position: relative; overflow: clip; } .rt-nk--faq > .rt-container { position: relative; z-index: 1; } .rt-nk--faq::before, .rt-nk--faq::after { content: ""; position: absolute; z-index: 0; pointer-events: none; opacity: 0.7; background: center / contain no-repeat; } .rt-nk--faq::before { inset-inline-start: -30px; inset-block-start: 40px; inline-size: 190px; block-size: 150px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 150'%3E%3Cpath d='M6 118c30-18 34-58 12-80 42-6 66 30 50 62-14 28-50 36-62 18M110 24c14-6 30-2 40 10' fill='none' stroke='%2374E88A' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); } .rt-nk--faq::after { inset-inline-end: -26px; inset-block-end: 30px; inline-size: 170px; block-size: 140px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 140'%3E%3Cpath d='M164 26c-32 12-40 54-14 80-42 4-66-34-46-66 14-24 50-30 60-10M40 120c-12 6-26 4-36-6' fill='none' stroke='%23D94A7E' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); } @media (max-width: 999.98px) { .rt-nk--faq::before, .rt-nk--faq::after { display: none; } } .rt-faq--nk { inline-size: min(100%, 843px); text-align: start; display: grid; gap: 12px; } .rt-faq--nk .rt-faq__item { background: transparent; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 50px; padding: 18px 24px; } /* Dokunma hedefi 44 px'in altına DÜŞMEZ: satırın kendisi tıklanabilir olduğu için yükseklik erişilebilirlik kontrolünde ölçülür (browser.target_sizes 2026-09-12'de bunu yakaladı). */ .rt-faq--nk .rt-faq__q { padding: 0; color: var(--rt-text-on-inverse); font-size: var(--rt-f-lg); font-weight: 400; gap: var(--rt-sp-4); min-block-size: 44px; } .rt-faq--nk .rt-faq__a { padding: var(--rt-sp-3) 0 0; color: var(--rt-text-on-inverse-muted); } .rt-faq--nk .rt-faq__a a { color: var(--rt-c-lime); } .rt-faq--nk .rt-faq__q .rt-icon { flex: 0 0 32px; inline-size: 32px; block-size: 32px; padding: 6px; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 50%; } /* ---- BLOG: liste kartları ve kategori şeridi ------------------------------------------------ Kart YALNIZ görsel + kategori + tarih + başlık taşır; özet alanı veride boş olduğu için kartta da yoktur (bkz. _c/post-card.php). Görsel oranı 16:9'dur ve motorun MEDIUM boyutuyla (700x394) birebir aynıdır, böylece kart yüklenirken zıplamaz. */ .rt-posts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--rt-sp-5); grid-template-columns: minmax(0, 1fr); } @media (min-width: 600px) { .rt-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .rt-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .rt-post { display: flex; flex-direction: column; block-size: 100%; background: var(--rt-surface-default); border: 1px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .rt-post:hover { transform: translateY(-2px); border-color: var(--rt-c-navy); box-shadow: 0 10px 24px rgba(40, 30, 115, 0.12); } /* Motorun MEDIUM görseli 700×315'tir (20:9); 16:9 çerçeve yüz ve logoları kırpıyordu. */ .rt-post__media { display: block; aspect-ratio: 20 / 9; background: var(--rt-surface-sunken); } .rt-post__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .rt-post__body { display: flex; flex-direction: column; gap: var(--rt-sp-2); padding: var(--rt-sp-4); } .rt-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rt-sp-2); margin: 0; font-size: var(--rt-f-xs); color: var(--rt-text-secondary); } .rt-post__cat { color: var(--rt-text-eyebrow); font-weight: var(--rt-fw-bold); text-transform: uppercase; letter-spacing: 0.04em; } /* Kategori bağlantısı 19 px yüksekti; dokunma alanı görünümü bozmadan büyütülür. */ a.rt-post__cat { display: inline-block; padding-block: 13px; margin-block: -13px; text-decoration: none; } a.rt-post__cat:hover { text-decoration: underline; } .rt-post__title { margin: 0; font-size: var(--rt-f-md); line-height: 1.35; } .rt-post__title a { color: var(--rt-text-heading); text-decoration: none; } .rt-post__title a:hover { text-decoration: underline; text-underline-offset: 3px; } .rt-post__cover { display: block; inline-size: 100%; max-inline-size: 700px; block-size: auto; margin-inline: auto; border-radius: var(--rt-rd-lg); } /* Kategori şeridi bağlantılardan oluşur: rozet değil, dokunulabilir hedef (en az 44 px). */ .rt-chips a.rt-chip { min-block-size: 44px; text-decoration: none; background: var(--rt-surface-default); color: var(--rt-text-heading); border: 1px solid var(--rt-border-subtle); } .rt-chips a.rt-chip:hover { border-color: var(--rt-c-navy); } .rt-chips a.rt-chip--on { background: var(--rt-c-navy); color: var(--rt-c-white); border-color: var(--rt-c-navy); } .rt-profile-crumb { padding-block-start: var(--rt-sp-4); } .rt-profile-head { padding-block: var(--rt-sp-4) var(--rt-sp-7); } .rt-profile-head__inner { display: grid; gap: var(--rt-sp-5); grid-template-columns: minmax(0, 1fr); align-items: center; } @media (min-width: 720px) { .rt-profile-head__inner { grid-template-columns: 240px minmax(0, 1fr); gap: var(--rt-sp-7); } } @media (min-width: 960px) { .rt-profile-head__inner { grid-template-columns: 320px minmax(0, 1fr); } } .rt-profile-head__copy { display: flex; flex-direction: column; gap: var(--rt-sp-3); max-inline-size: 44rem; } .rt-profile-head__name { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); } .rt-profile-head__highlight { font-size: var(--rt-f-lg); font-weight: var(--rt-fw-medium); color: var(--rt-text-heading); } .rt-profile { display: grid; gap: var(--rt-sp-6); grid-template-columns: minmax(0, 1fr); padding-block-end: var(--rt-sp-8); } @media (min-width: 960px) { .rt-profile { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--rt-sp-8); } } /* Az bilgili profil: tek sütun, eşleştirme kutusu okunur genişlikte ve yapışkan değil. */ @media (min-width: 960px) { .rt-profile--sparse { grid-template-columns: minmax(0, 1fr); } } .rt-profile--sparse .rt-profile__aside { max-inline-size: 44rem; } .rt-profile--sparse .rt-callout--sticky { position: static; } .rt-profile__main { display: flex; flex-direction: column; gap: var(--rt-sp-7); min-inline-size: 0; } .rt-profile__section { display: flex; flex-direction: column; gap: var(--rt-sp-3); } @media (min-width: 960px) { .rt-callout--sticky { position: sticky; inset-block-start: calc(var(--rt-header-height) + var(--rt-sp-4)); } } .rt-start { display: grid; gap: var(--rt-sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 960px) { .rt-start { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--rt-sp-8); } } .rt-cta-band { background: var(--rt-surface-inverse); color: var(--rt-text-on-inverse); padding-block: var(--rt-sp-8); border-block-end: 1px solid var(--rt-border-on-inverse); } .rt-cta-band__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--rt-sp-4); } .rt-cta-band__title { color: var(--rt-text-on-inverse); font-size: var(--rt-f-2xl); max-inline-size: 40rem; } @media (min-width: 720px) { .rt-cta-band__title { font-size: var(--rt-f-3xl); } } .rt-cta-band__text { color: var(--rt-text-on-inverse-muted); max-inline-size: var(--rt-measure); } .rt-cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--rt-sp-3); } /* KAPANIŞ BANDI — ana sayfa varyantı. Önce parlak yeşil denendi (Owner: "olmamış"), sonra krem; Owner 2026-09-12 son kararı birebir: "bu kısmın arka planı açık mavi olsun". Üstündeki koyu SSS kuşağı ile altındaki lacivert alt bilgi arasında açık mavi bir nefes bırakır. Eylem düğmesi lacivert dolgu, ikincil düğme lacivert çerçevedir; ikisi de bu zeminde AA kontrastı sağlar. */ .rt-cta-band--tint { background: var(--rt-c-navy-tint); color: var(--rt-c-ink); border-block: 1px solid var(--rt-c-line); } .rt-cta-band--tint .rt-cta-band__title { color: var(--rt-c-navy-deep); } .rt-cta-band--tint .rt-cta-band__text { color: var(--rt-c-ink); } .rt-cta-band--tint .rt-btn--primary { background: var(--rt-c-navy); color: var(--rt-c-white); border-color: var(--rt-c-navy-deep); box-shadow: 3px 3px 0 0 var(--rt-c-lime); } .rt-cta-band--tint .rt-btn--primary:hover { background: var(--rt-c-navy-deep); border-color: var(--rt-c-navy-deep); } @media (prefers-reduced-motion: no-preference) { .rt-cta-band--tint .rt-btn--primary:hover { box-shadow: 4px 4px 0 0 var(--rt-c-lime); } .rt-cta-band--tint .rt-btn--primary:active { box-shadow: 1px 1px 0 0 var(--rt-c-lime); } } .rt-cta-band--tint .rt-btn--outline { border-color: var(--rt-c-navy-deep); color: var(--rt-c-navy-deep); background: transparent; } /* Açık kapanış bandı ana sayfanın ortalı bölüm diliyle ORTALIDIR (2026-09-14 kapanış hakemi: sola yaslı başlık ve düğmeler üstündeki ortalı SSS kuşağından kopuyordu). Telefonda iki düğme alt alta, tam genişlikte durur. */ .rt-cta-band--tint .rt-cta-band__inner { align-items: center; text-align: center; } .rt-cta-band--tint .rt-cta-band__title, .rt-cta-band--tint .rt-cta-band__text { margin-inline: auto; } .rt-cta-band--tint .rt-cta-band__actions { justify-content: center; } @media (max-width: 479.98px) { .rt-cta-band--tint .rt-cta-band__actions { flex-direction: column; align-items: stretch; align-self: stretch; } .rt-cta-band--tint .rt-cta-band__actions .rt-btn { justify-content: center; } } /* Kapanış bandı alt bilgiye bitişir; arada krem şerit kalmaz. GENEL kardeş (~) kullanılır, BİTİŞİK kardeş (+) değil: ana bölüm ile alt bilgi arasında mobil eylem düğmesi (.rt-mobile-cta) durur ve '+' seçicisi bu yüzden hiç eşleşmiyordu — kapanış bandının altında 64 px'lik boş bir şerit kalıyordu (2026-09-12'de ölçüldü). */ .rt-shell__main:has(> .rt-cta-band:last-child) ~ .rt-footer { margin-block-start: 0; } /* Sayfa kapanış bandıyla bitiyorsa alt bilgideki aynı düğme çizilmez: aynı eylem 400 px içinde ikinci kez tekrar etmez (2026-09-14 denetimi: telefonda dört kez üst üste görülüyordu). */ .rt-shell__main:has(> .rt-cta-band:last-child) ~ .rt-footer .rt-footer__action { display: none; } /* --- Kamu kabuğu: başlık kırılımı (2026-09-11) ------------------------------ Kamu menüsü beş bağlantı + Giriş + Ücretsiz Deneme taşır. Türkçe etiketler uzundur; 960–1079 px arasında menü taşmasın diye gezinme bağlantıları çekmecede kalır. GİRİŞ BARDA KALIR (R1 2026-09-15: 1024 px'te barda yalnız "Menü" vardı, "Giriş yap" çekmecedeydi): kamu kabuğunda dil seçici ve "Giriş yap" (.rt-header__actions) barda durur, bağlantılar gizlenir, çekmece düğmesi görünür kalır (tests/rt_menu_browser.cjs: 1080 px altında çekmece). Ölçü (1080 px'te ölçüldü): dil 90 + aralık 8 + giriş 123 = 221 px; 960 px'te marka 163 + 16 + 12 + 221 + 16 + çekmece 85 + iki kenar 48 = 561 px ≤ 960 px, taşma yok. Panel kabuğu eskisi gibi yalnız çekmece kullanır. */ @media (min-width: 960px) and (max-width: 1079.98px) { .rt-header__nav { display: none; } .rt-burger { display: inline-flex; } .rt-shell--marketing .rt-header__nav { display: flex; } .rt-shell--marketing .rt-header__nav > :not(.rt-header__actions) { display: none; } .rt-shell--marketing .rt-burger { margin-inline-start: 0; } } @media (min-width: 1080px) { .rt-header__cta-sm { display: none; } } @media (min-width: 1080px) and (max-width: 1279.98px) { .rt-header__nav { gap: var(--rt-sp-4); } /* Match the container gutter so the hero does not widen the page at this breakpoint. */ .rt-hero__art--scene { margin-inline-end: calc(var(--rt-sp-5) * -1); } } /* --- KAMU ALT BİLGİSİ --------------------------------------------------------- Owner 2026-09-12: "yepyeni premium UX … gereksiz bilgi olmasın, kategorizasyonlar iyi kurgulansın, tertemiz hissi versin." Üç katman: 1) ÜST: marka + tek cümle + tek eylem. Sayfanın sonuna gelen ziyaretçi ne yapacağını bilir. 2) ORTA: en çok üç kategori + iletişim. Yasal ve dil buradan çıkarıldı; altı sütunluk eski dizilim kalabalığın kaynağıydı. 3) ALT ŞERİT: telif, şirket, yasal ve dil — künye bilgisi, sessiz tonda tek satır. Katmanlar saç teli inceliğinde çizgilerle ayrılır; renk yerine BOŞLUK ve hiyerarşi kullanılır. */ .rt-footer__body { display: flex; flex-direction: column; gap: var(--rt-sp-6); } /* Alt bilgideki düğme, alt bilginin genel bağlantı renginden ETKİLENMEZ: .rt-footer a kuralı (0,1,1) düğmenin kendi kuralını (0,1,0) eziyordu ve yeşil zeminde yeşil yazı çıkıyordu. */ .rt-footer .rt-btn--primary { color: var(--rt-action-primary-text); box-shadow: 3px 3px 0 0 rgba(255, 255, 255, 0.34); } .rt-footer .rt-btn--primary:hover { color: var(--rt-action-primary-text); } @media (prefers-reduced-motion: no-preference) { .rt-footer .rt-btn--primary:hover { box-shadow: 4px 4px 0 0 rgba(255, 255, 255, 0.34); } .rt-footer .rt-btn--primary:active { box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.34); } } /* Sayfa siyah şeritle kapanır: kuşağın alt boşluğu şeride bırakılır. */ .rt-footer { padding-block-end: 0; } .rt-footer__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--rt-sp-5); padding-block-end: var(--rt-sp-5); border-block-end: 1px solid rgba(255, 255, 255, 0.12); } .rt-footer__identity { display: flex; flex-direction: column; gap: var(--rt-sp-3); max-inline-size: 32rem; } /* Koyu kuşakta renkli logo kullanılamaz — lacivert harf (#2A3E8F) mor kuşakta (#3B2E9E) 1.05:1, yani görünmez. Eskiden bu `filter: brightness(0) invert(1)` ile çözülüyordu ama filtre saydam olmayan HER pikseli beyaza çevirdiği için balonun içindeki beyaz "&" de yok oluyor, balon düz bir lekeye dönüyordu. Artık ayrı dosya kullanılır (brand/logo-mark-dark.svg): yazı beyaz, balon ALTIN, "&" kuşağın moruna oyulmuş. FİLTRE GERİ EKLENMEZ, "&" işaretini öldürür. */ /* align-self: sütun esnek kutusunda görsel geriliyor ve içerik ortada kalıyordu; sola hizalı durur (2026-09-14). */ .rt-footer__logo { block-size: 54px; inline-size: auto; display: block; align-self: flex-start; } .rt-footer__action { flex: 0 0 auto; } .rt-footer__grid { display: grid; gap: var(--rt-sp-6) var(--rt-sp-5); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); } .rt-footer__col { display: flex; flex-direction: column; gap: var(--rt-sp-2); } .rt-footer__col-title { margin: 0 0 var(--rt-sp-1); font-family: var(--rt-f-body); font-size: var(--rt-f-xs); font-weight: var(--rt-fw-bold); text-transform: uppercase; letter-spacing: 0.12em; color: var(--rt-c-gold); opacity: 1; } /* EN ALT ŞERİT SİYAHTIR (Owner 2026-09-12: "en alt bizde de siyah olsun"): künye bilgisi kuşaktan ayrılır ve sayfa siyah bir çizgiyle kapanır. Kenardan kenara uzanır. 2026-09-13 YATAY TAŞMA DÜZELTMESİ: şerit artık kapsayıcının DIŞINDA durur (footer.php) ve kendi .rt-container'ını taşır; eski margin-inline: calc(50% - 50vw) yöntemi, vw dikey kaydırma çubuğunu saydığı için masaüstünde sayfayı 8 px taşırıyor ve alta yatay kaydırma çubuğu çıkarıyordu. Kaynak çözüldü: vw hesabı yok, sayfa geneli overflow-x gizleme yok. */ .rt-footer__bottom { display: block; /* Şeridin üst boşluğu eski görünümle aynıdır: gövde aralığı (sp-6) + eski şerit boşluğu (sp-7). */ margin-block-start: calc(var(--rt-sp-6) + var(--rt-sp-7)); padding-block: var(--rt-sp-4); background: #101014; border-block-start: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--rt-f-sm); color: var(--rt-text-on-inverse-muted); } .rt-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rt-sp-2) var(--rt-sp-5); } .rt-footer__meta { display: flex; flex-wrap: wrap; gap: var(--rt-sp-4); } .rt-footer__meta:last-child { margin-inline-start: auto; } /* Bağlantı başlıkları sessiz, bağlantılar hover'da altın çizgiyle yanıt verir. */ .rt-footer__link { position: relative; inline-size: fit-content; transition: color 120ms ease; } .rt-footer__link::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -3px; block-size: 2px; background: var(--rt-c-gold); transform: scaleX(0); transform-origin: left center; transition: transform 160ms ease; } .rt-footer__link:hover::after, .rt-footer__link:focus-visible::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .rt-footer__link::after { transition: none; } } /* Sosyal bağlantılar da dokunma hedefi ölçüsündedir (44 px); alt bilgide yan yana dururlar. */ .rt-footer__social { display: flex; flex-wrap: wrap; gap: var(--rt-sp-3); } /* Yuvarlak simge bağlantısı (Owner 2026-09-12: "ikonları ile koy"): 44x44 dokunma hedefi. */ .rt-footer__social-link { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.10); color: var(--rt-text-on-inverse); } .rt-footer__social-link:hover { background: rgba(255, 255, 255, 0.2); color: var(--rt-text-on-inverse); } .rt-social-icon { display: block; } .rt-footer__pitch { color: var(--rt-text-on-inverse-muted); max-inline-size: var(--rt-measure); } .rt-footer__company { font-size: var(--rt-f-sm); } .rt-footer__contact { font-style: normal; } .rt-footer__channels { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--rt-sp-3); } .rt-footer__channel { display: flex; flex-direction: column; gap: 2px; } .rt-footer__channel-label { font-size: var(--rt-f-xs); color: var(--rt-text-on-inverse-muted); } .rt-footer__channel-label { font-size: var(--rt-f-xs); color: var(--rt-text-on-inverse-muted); } /* --- Ana sayfa (MASTER-CONTENT-SPEC HOME-01…08) ------------------------------ */ @media (min-width: 720px) { } /* --- Ücretsiz deneme soru akışı (/free-trial) -------------------------------- Sorular tek tek gelir (JS yoksa hepsi alt alta görünür ve form yine tamamlanır). Seçenekler büyük dokunma hedefli radyo/checkbox kartlarıdır; renk tek başına anlam taşımaz (işaret + çerçeve). */ .rt-trial { padding-block: var(--rt-sp-6) var(--rt-sp-8); } .rt-trial__inner { max-inline-size: 44rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--rt-sp-5); } .rt-trial__progress { display: flex; flex-direction: column; gap: var(--rt-sp-2); font-size: var(--rt-f-sm); color: var(--rt-text-secondary); } .rt-trial__bar { block-size: 6px; border-radius: var(--rt-rd-sm); background: var(--rt-surface-sunken); overflow: hidden; } .rt-trial__bar-fill { display: block; block-size: 100%; inline-size: 0; background: var(--rt-action-primary-bg); transition: inline-size var(--rt-mo-base) var(--rt-mo-ease); } /* Aşama göstergesi: 3 aşama; durum renk + numara/işaret + kalınlıkla anlatılır (renk tek başına anlam taşımaz). */ /* Dar ekranda kelime ortadan bölünmez: numara üstte, etiket altta. */ @media (max-width: 519px) { } .rt-trial__privacy { font-size: var(--rt-f-sm); color: var(--rt-text-secondary); } .rt-trial__suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rt-sp-2); } /* Mobilde sabit deneme düğmesi (720 px altı). İçerik altta düğmenin arkasında kalmasın diye alt bilgiye boşluk eklenir. */ .rt-mobile-cta { display: none; } @media (max-width: 719px) { .rt-mobile-cta { display: block; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; padding: var(--rt-sp-3) var(--rt-sp-4) calc(var(--rt-sp-3) + env(safe-area-inset-bottom, 0px)); background: var(--rt-surface-default); box-shadow: 0 -1px 0 var(--rt-border-subtle), 0 -6px 16px rgba(0, 0, 0, 0.06); transition: transform var(--rt-mo-base) var(--rt-mo-ease); } .rt-mobile-cta[data-rt-offscreen="true"] { transform: translateY(110%); visibility: hidden; } /* Alt boşluk yalnız alt bilgide değil, sayfanın bütün içeriğinin sonunda olmalı: alt bilgisiz ya da içeriği alt bilgiye yakın biten sayfada son satır düğmenin arkasında kalıyordu (dokunma-fd, 2026-09-12). */ .rt:has(.rt-mobile-cta) .rt-shell { padding-block-end: calc(4.5rem + env(safe-area-inset-bottom, 0px)); } /* Klavye ya da bağlantı hedefi bir ögeye kaydırdığında tarayıcı onu düğmenin üstünde bırakır (SC 2.4.11). */ html:has(.rt-mobile-cta) { scroll-padding-block-end: calc(5rem + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { .rt-mobile-cta { transition: none; } } .rt-trial__error:empty { display: none; } .rt-step { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--rt-sp-4); } .rt-step[data-rt-active="true"] { animation: rt-step-in var(--rt-mo-base) var(--rt-mo-ease); } .rt-step__legend { font-family: var(--rt-f-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); padding: 0; margin-block-end: var(--rt-sp-2); } .rt-step__hint { color: var(--rt-text-secondary); } .rt-step__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rt-sp-3); margin-block-start: var(--rt-sp-2); } .rt-step__nav .rt-btn--quiet { margin-inline-end: auto; } @keyframes rt-step-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .rt-options { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--rt-sp-3); grid-template-columns: minmax(0, 1fr); } @media (min-width: 600px) { .rt-options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rt-options--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .rt-option { position: relative; } .rt-option__input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; } .rt-option__label { display: flex; flex-direction: column; gap: 2px; min-block-size: var(--rt-target-min); padding: var(--rt-sp-3) var(--rt-sp-4) var(--rt-sp-3) calc(var(--rt-sp-4) + 28px); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-md); background: var(--rt-surface-default); cursor: pointer; position: relative; } .rt-option__label::before { content: ""; position: absolute; inset-inline-start: var(--rt-sp-4); inset-block-start: 50%; transform: translateY(-50%); inline-size: 18px; block-size: 18px; border: 2px solid var(--rt-border-subtle); border-radius: 50%; background: var(--rt-surface-default); } .rt-option__input[type="checkbox"] + .rt-option__label::before { border-radius: 4px; } .rt-option__input:checked + .rt-option__label { border-color: var(--rt-action-primary-bg); } .rt-option__input:checked + .rt-option__label::before { background: var(--rt-action-primary-bg); border-color: var(--rt-action-primary-bg); box-shadow: inset 0 0 0 3px var(--rt-surface-default); } /* Görsel olarak gizli girdinin odağı etikette gösterilir. Tasarım sistemi outline'ı tek kuralda (.rt :focus-visible) çizer; burada aynı renk token'ıyla halka box-shadow olarak verilir (a11y.single_focus_visible_outline_rule). */ .rt-option__input:focus-visible + .rt-option__label { box-shadow: 0 0 0 2px var(--rt-surface-default), 0 0 0 5px var(--rt-border-focus); } .rt-option__title { font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-trial-teachers { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--rt-sp-3); } .rt-trial-teacher { position: relative; display: flex; flex-direction: column; gap: var(--rt-sp-1); } .rt-trial-teacher__input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; } .rt-trial-teacher__label { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--rt-sp-4); align-items: center; padding: var(--rt-sp-3); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); background: var(--rt-surface-default); cursor: pointer; } .rt-trial-teacher__label .rt-portrait { inline-size: 72px; } .rt-trial-teacher__input:checked + .rt-trial-teacher__label { border-color: var(--rt-action-primary-bg); } .rt-trial-teacher__input:focus-visible + .rt-trial-teacher__label { box-shadow: 0 0 0 2px var(--rt-surface-default), 0 0 0 5px var(--rt-border-focus); } .rt-trial-teacher__body { display: flex; flex-direction: column; gap: 2px; } .rt-trial-teacher__name { font-family: var(--rt-f-display); font-size: var(--rt-f-lg); font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-trial-teacher__role, .rt-trial-teacher__ages { font-size: var(--rt-f-sm); color: var(--rt-text-secondary); } .rt-trial-teacher__profile { align-self: flex-start; font-size: var(--rt-f-sm); min-block-size: var(--rt-target-min); display: inline-flex; align-items: center; } .rt-slots { display: flex; flex-direction: column; gap: var(--rt-sp-4); } .rt-slots__day { display: flex; flex-direction: column; gap: var(--rt-sp-2); } .rt-slots__date { font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-slots__times { display: flex; flex-wrap: wrap; gap: var(--rt-sp-2); } .rt-slots__time { min-block-size: var(--rt-target-min); min-inline-size: 5.5rem; padding-inline: var(--rt-sp-3); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-md); background: var(--rt-surface-default); color: var(--rt-text-heading); font: inherit; cursor: pointer; } .rt-slots__time[aria-pressed="true"] { border-color: var(--rt-action-primary-bg); background: var(--rt-action-primary-bg); color: var(--rt-action-primary-text); } .rt-trial__done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--rt-sp-4); position: relative; overflow: hidden; padding-block: var(--rt-sp-6); } .rt-trial__summary { margin: 0; display: grid; gap: var(--rt-sp-2); text-align: start; min-inline-size: min(100%, 22rem); } .rt-trial__summary div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--rt-sp-3); } .rt-trial__summary dt { color: var(--rt-text-secondary); } .rt-trial__summary dd { margin: 0; font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } @media (prefers-reduced-motion: reduce) { .rt-step[data-rt-active="true"] { animation: none; } .rt-trial__bar-fill { transition: none; } } /* /start ve İletişim: doğrulanmış iletişim kanalları (WhatsApp). Sayfanın asıl eylemi bunlardır; bu yüzden düz numara değil dokunsal düğme (2026-09-14 denetimi). Dokunma hedefi en az 44 px. */ .rt-channels { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--rt-sp-4) var(--rt-sp-5); } .rt-channels__item { display: flex; flex-direction: column; gap: var(--rt-sp-2); } .rt-channels__label { font-size: var(--rt-f-xs); font-weight: var(--rt-fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--rt-text-secondary); } .rt-channels__link { display: inline-flex; align-items: center; gap: var(--rt-sp-2); align-self: flex-start; min-block-size: var(--rt-target-min); padding-inline: var(--rt-sp-4); border: 1.6px solid var(--rt-action-ink); border-radius: var(--rt-rd-pill); background: var(--rt-action-primary-bg); color: var(--rt-action-primary-text); box-shadow: 3px 3px 0 0 var(--rt-action-ink); font-size: var(--rt-f-md); font-weight: var(--rt-fw-bold); font-variant-numeric: tabular-nums; text-decoration: none; } .rt-channels__link:hover { text-decoration: none; } @media (prefers-reduced-motion: no-preference) { .rt-channels__link { transition: transform var(--rt-mo-base) var(--rt-mo-ease), box-shadow var(--rt-mo-base) var(--rt-mo-ease); } .rt-channels__link:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 var(--rt-action-ink); } .rt-channels__link:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--rt-action-ink); } } @media (min-width: 720px) { } /* Yaş kartı: ana sayfadaki diğer kartlarla (yol, plan) aynı dil — sade yüzey, xl başlık, eşit uzunlukta tek cümle. */ @media (min-width: 720px) { } .rt-quotes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--rt-sp-5); grid-template-columns: minmax(0, 1fr); } @media (min-width: 720px) { .rt-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --- Aile sözleri: KONUŞMA BALONU ------------------------------------------- Owner 2026-09-12 (birebir): "aileler ne anlatıyor kısmında konuşma balonu gibi bir tasarım olsun ya da tırnak işareti gibi. ne olduğu belli olmuyor böyle." Eski hâli soldan çizgili düz bir kutuydu; alıntı olduğu okunmadan anlaşılmıyordu. Yeni hâlde iki işaret birden var: köşeye oturan büyük tırnak sembolü ve balonun kuyruğu. Kuyruk saf CSS'tir (ek istek yok) ve zeminle aynı rengi taşır. */ .rt-quote { position: relative; margin: 0; block-size: 100%; display: flex; flex-direction: column; gap: var(--rt-sp-3); padding: var(--rt-sp-6) var(--rt-sp-5) var(--rt-sp-5); background: var(--rt-surface-default); border: 1px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg, 20px); box-shadow: var(--rt-el-1); margin-block-end: var(--rt-sp-4); } /* Balonun kuyruğu: kutunun sol altından çıkar, çerçeveyle aynı çizgi rengini korur. */ .rt-quote::after, .rt-quote::before { content: ""; position: absolute; inline-size: 0; block-size: 0; inset-block-start: 100%; inset-inline-start: var(--rt-sp-6); } .rt-quote::before { border-inline: 13px solid transparent; border-block-start: 15px solid var(--rt-border-subtle); } .rt-quote::after { border-inline: 11px solid transparent; border-block-start: 13px solid var(--rt-surface-default); } .rt-quote__text { margin: 0; color: var(--rt-text-primary); flex: 1 0 auto; } .rt-quote__by { display: flex; align-items: center; gap: var(--rt-sp-2); font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); font-size: var(--rt-f-sm); } /* Ülke: kaydın kendi yazdığı yer adı + bayrak (Owner 2026-09-12). Bayrak yoksa yalnız yer adı görünür. */ .rt-quote__place { display: inline-flex; align-items: center; gap: var(--rt-sp-1); margin-inline-start: auto; font-weight: var(--rt-fw-medium); font-size: var(--rt-f-xs); color: var(--rt-text-secondary); } /* Satır içi SVG bayrak: her işletim sisteminde aynı görünür (emoji bayrağı Windows'ta çizilmez). */ .rt-flag { inline-size: 22px; block-size: auto; display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); } /* Adın başındaki küçük madalyon: kimin konuştuğunu göz taramasında yakalatır. */ /* Contact details retain the interface typography inside semantic address markup. */ .rt-contact-hub__address { font-style: normal; } /* Roots & Talks navigation: clear lesson choices, quieter supporting pages. */ .rt-shell--marketing .rt-header__nav { gap: var(--rt-sp-1); } .rt-shell--marketing .rt-nav-link { padding-inline: var(--rt-sp-3); gap: var(--rt-sp-2); border: 0; border-radius: var(--rt-rd-pill); font-weight: var(--rt-fw-bold); font-size: 16px; white-space: nowrap; cursor: pointer; } .rt-shell--marketing .rt-nav-link:hover, .rt-shell--marketing .rt-nav-link[aria-current="page"], .rt-shell--marketing .rt-nav-link.is-current, .rt-nav-disclosure[open] > summary { background: var(--rt-surface-accent); color: var(--rt-text-heading); } .rt-shell--marketing .rt-nav-link[aria-current="page"] { box-shadow: inset 0 -3px var(--rt-action-primary-bg); } .rt-header--over:not(.is-scrolled) .rt-nav-link:hover, .rt-header--over:not(.is-scrolled) .rt-nav-link[aria-current="page"], .rt-header--over:not(.is-scrolled) .rt-nav-link.is-current, .rt-header--over:not(.is-scrolled) .rt-nav-disclosure[open] > summary { background: color-mix(in srgb, var(--rt-text-on-inverse) 14%, transparent); color: var(--rt-text-on-inverse); } .rt-shell--marketing .rt-header__actions { margin-inline-start: var(--rt-sp-3); } .rt-burger { inline-size: auto; padding-inline: var(--rt-sp-3); gap: var(--rt-sp-2); border-radius: var(--rt-rd-pill); font-weight: var(--rt-fw-bold); } .rt-header--over:not(.is-scrolled) .rt-burger { color: var(--rt-text-on-inverse); border-color: var(--rt-text-on-inverse-muted); } /* Koyu kuşağın üstündeki barda HER odaklanabilir öğe beyaz halka alır: giriş bağlantısı ve logo eskiden lacivert halkayla (1:1) görünmezdi (erişilebilirlik incelemesi 2026-09-13). */ .rt-header--over:not(.is-scrolled) :is(.rt-burger, .rt-nav-link, .rt-header__login, .rt-header__brand) { --rt-border-focus: var(--rt-text-on-inverse); } .rt-nav-disclosure { position: relative; } .rt-nav-disclosure > summary { list-style: none; } .rt-nav-disclosure > summary::-webkit-details-marker { display: none; } .rt-nav-disclosure > summary .rt-icon { inline-size: 1rem; block-size: 1rem; transition: transform 160ms ease; } .rt-nav-disclosure[open] > summary .rt-icon { transform: rotate(180deg); } .rt-nav-disclosure__panel { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 14px); inline-size: 34rem; padding: var(--rt-sp-4); background: var(--rt-surface-default); border: 1px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); box-shadow: var(--rt-el-3); color: var(--rt-text-primary); } .rt-nav-disclosure__eyebrow { margin: 0; padding: var(--rt-sp-2) var(--rt-sp-3); color: var(--rt-text-secondary); font-size: var(--rt-f-sm); font-weight: var(--rt-fw-bold); } .rt-nav-disclosure__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rt-sp-2); } .rt-nav-card { display: flex; align-items: flex-start; gap: var(--rt-sp-3); padding: var(--rt-sp-3); color: var(--rt-text-heading); border-radius: var(--rt-rd-md); min-block-size: 64px; } .rt-nav-card:hover, .rt-nav-card[aria-current="page"] { background: var(--rt-surface-accent); text-decoration: none; } .rt-nav-card__icon { inline-size: 36px; block-size: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: var(--rt-rd-md); background: var(--rt-surface-accent); color: var(--rt-text-heading); } .rt-nav-card__label { display: block; font-size: var(--rt-f-md); line-height: 1.4; font-weight: var(--rt-fw-bold); } .rt-nav-card__description { display: block; margin-block-start: 4px; color: var(--rt-text-secondary); font-size: var(--rt-f-sm); line-height: 1.45; white-space: normal; } /* Çekmecede açıklama satırı yoktur: dört kartın açıklaması ana eylemi ekranın altına itiyordu (2026-09-14). */ .rt-site-menu .rt-nav-card__description { display: none; } .rt-site-menu__panel { inline-size: min(420px, 100%); max-inline-size: 100%; padding: 0; gap: 0; overscroll-behavior: contain; } .rt-site-menu__head { position: sticky; inset-block-start: 0; z-index: 1; background: var(--rt-surface-default); display: flex; align-items: center; justify-content: space-between; gap: var(--rt-sp-3); padding: var(--rt-sp-4) var(--rt-sp-5); border-block-end: 1px solid var(--rt-border-subtle); } .rt-site-menu__head h2 { margin: 0; font-size: var(--rt-f-xl); } .rt-site-menu__content { display: flex; flex-direction: column; gap: var(--rt-sp-5); padding: var(--rt-sp-5); } .rt-site-menu__group { display: grid; gap: var(--rt-sp-1); } .rt-site-menu__group-title { margin: 0 0 var(--rt-sp-2); color: var(--rt-text-secondary); font-size: var(--rt-f-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--rt-fw-bold); } .rt-site-menu .rt-nav-card { margin-inline: calc(-1 * var(--rt-sp-2)); padding: var(--rt-sp-3) var(--rt-sp-2); } .rt-site-menu .rt-nav-card[aria-current="page"] { box-shadow: inset 3px 0 var(--rt-action-primary-bg); } .rt-site-menu__support { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rt-sp-2); } .rt-site-menu__support a { min-block-size: var(--rt-target-min); display: flex; align-items: center; padding: var(--rt-sp-2) var(--rt-sp-3); border-radius: var(--rt-rd-md); color: var(--rt-text-heading); font-size: var(--rt-f-sm); font-weight: var(--rt-fw-bold); } .rt-site-menu__support a:hover, .rt-site-menu__support a[aria-current="page"] { background: var(--rt-surface-accent); } .rt-site-menu__start { padding: var(--rt-sp-4); border: 1px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); background: var(--rt-surface-accent); } .rt-site-menu__start h3 { font-size: var(--rt-f-lg); margin: 0 0 var(--rt-sp-2); } .rt-site-menu__start p { margin: 0 0 var(--rt-sp-4); color: var(--rt-text-secondary); font-size: var(--rt-f-sm); line-height: 1.5; } .rt-site-menu__account { display: flex; flex-wrap: wrap; gap: var(--rt-sp-3); } .rt-site-menu__locale { padding-block-start: var(--rt-sp-3); border-block-start: 1px solid var(--rt-border-subtle); display: flex; flex-wrap: wrap; align-items: center; gap: var(--rt-sp-2); } .rt-site-menu__locale > span { font-size: var(--rt-f-sm); color: var(--rt-text-secondary); margin-inline-end: auto; } .rt-site-menu__locale a { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--rt-target-min); padding-inline: var(--rt-sp-3); border-radius: var(--rt-rd-pill); color: var(--rt-text-heading); font-weight: var(--rt-fw-bold); } .rt-site-menu__locale a[aria-current="true"] { background: var(--rt-surface-accent); box-shadow: inset 0 -2px var(--rt-action-primary-bg); } .rt-footer__channel-label { opacity: 1; } .rt-footer__col .rt-footer__link[aria-current="page"] { color: var(--rt-text-on-inverse); font-weight: var(--rt-fw-bold); text-decoration: underline; text-underline-offset: 5px; } .rt-footer__col-title { text-transform: none; letter-spacing: 0; font-size: var(--rt-f-md); } @media (max-width: 599.98px) { .rt-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rt-sp-6) var(--rt-sp-4); } .rt-footer__col { min-inline-size: 0; gap: var(--rt-sp-1); } .rt-footer__col .rt-footer__link { font-size: var(--rt-f-sm); overflow-wrap: anywhere; } .rt-footer__channel-label { font-size: var(--rt-f-xs); letter-spacing: 0; } } @media (prefers-reduced-motion: reduce) { .rt-nav-disclosure > summary .rt-icon { transition: none; } } /* --- Yazdırma ---------------------------------------------------------- */ @media print { .rt-header, .rt-footer, .rt-drawer, .rt-toasts, .rt-burger { display: none !important; } .rt { background: #fff; } } } /* ============================================================================= 8. UTIL — son çare. Yeni kodda kullanılmaz; eski ekran taşınırken köprü olur. ============================================================================= */ @layer rt.util { /* Görünürlük yardımcıları bu katmandadır, çünkü bileşen ve sayfa katmanındaki "display" kurallarını YENMELERİ gerekir. @layer sırasında primitive, page'den önce gelir: yardımcı orada kalsaydı .rt-header__actions { display: flex } onu sessizce ezerdi (2026-09-11 incelemesinde 375 px'te ölçüldü). Yalnız GİZLER; hiçbir genişlikte display değeri ATAMAZ. Böylece ögenin kendi display değeri (flex, grid, inline-flex) korunur. revert kullanılmaz: revert yazar stillerini atlayıp tarayıcı varsayılanına döner. */ /* hidden özniteliği tarayıcı varsayılanıdır ve yazar katmanındaki display kurallarınca (ör. .rt-step { display: flex }) ezilir; soru akışında adımlar ve durum panelleri hidden ile açılıp kapanır (2026-09-11 tarayıcı ölçümü). */ .rt [hidden] { display: none !important; } /* HERO SAHNESİ DURAKLATMA (2026-09-17 başarım ölçümü: sahne ekrandan 6 700 px uzaktayken ya da sekme gizliyken de 58 animasyon çalışıyordu). Sahne görünmüyorsa hero-dialogue.js .is-paused koyar; her animasyon olduğu yerde durur ve görününce sürer. Bu katmandadır: sahnenin animation kısaltmaları (rt.page) oynatma durumunu "running"e sıfırlar ve çoğu daha özgüldür; son katman özgüllükten bağımsız kazanır (!important gerekmez). */ .rt-scene.is-paused, .rt-scene.is-paused *, .rt-scene.is-still * { animation-play-state: paused; } /* HAREKETSİZ SON (2026-09-17 fix2 ölçümü, 375 px, 4x yavaş işlemci: dinginlikte ana iş parçacığı boştu ama göz kırpma, dünya, veri paketleri, sinyal çubukları ve canlı rozeti bileşik katmanda saniyede 54 kare çizdiriyordu; hepsi durunca 0). Konuşma bitip sahne dinginleştikten 10 s sonra hero-dialogue.js .is-still koyar: dünya ve süzülme olduğu yerde durur (sıçramaz); gözler, paketler, çubuklar ve rozet "hareketi azalt" görünümüne döner. Gözler duraklatılmaz, kırpma karesinde kapalı donmasın diye animasyonsuz açık poza döner. */ .rt-scene.is-still .rt-scene__face--calm *, .rt-scene.is-still .rt-scene__packet, .rt-scene.is-still .rt-scene__bar, .rt-scene.is-still .rt-scene__node-core, .rt-scene.is-still .rt-scene__live { animation: none; } @media (max-width: 959.98px) { } @media (min-width: 960px) { .rt-hide-lg { display: none !important; } } } /* Public learning architecture: shared by age, format, readiness and resource pages. */ @layer rt.page { .rt-header__inner { position: relative; } .rt-nav-disclosure--wide { position: static; } .rt-nav-disclosure__panel.rt-mega { inset-inline-end: var(--rt-sp-5); inset-block-start: calc(100% - 1px); inline-size: min(680px, calc(100vw - 48px)); padding: 0; max-block-size: calc(100dvh - var(--rt-header-height) - 24px); overflow-y: auto; overscroll-behavior: contain; } .rt-mega__columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--rt-sp-5); padding: var(--rt-sp-5); } .rt-mega__group { min-inline-size: 0; } .rt-mega__title { margin: 0 0 var(--rt-sp-3); font-size: var(--rt-f-sm); color: var(--rt-text-secondary); } .rt-mega__link { display: flex; align-items: center; gap: var(--rt-sp-3); min-block-size: var(--rt-target-min); padding: var(--rt-sp-2) var(--rt-sp-3); border-radius: var(--rt-rd-md); color: var(--rt-text-heading); font-weight: var(--rt-fw-bold); font-size: var(--rt-f-sm); } .rt-mega__link .rt-icon { flex: 0 0 20px; inline-size: 20px; block-size: 20px; } .rt-mega__link:hover, .rt-mega__link[aria-current="page"] { background: var(--rt-surface-accent); text-decoration: none; } .rt-mega__all { display: flex; align-items: center; justify-content: space-between; gap: var(--rt-sp-3); min-block-size: 56px; padding: var(--rt-sp-3) var(--rt-sp-5); border-block-start: 1px solid var(--rt-border-subtle); background: var(--rt-surface-accent); color: var(--rt-text-heading); font-weight: var(--rt-fw-bold); } .rt-site-submenu > summary { list-style: none; cursor: pointer; } .rt-site-submenu > summary::-webkit-details-marker { display: none; } .rt-site-submenu > summary > .rt-icon { flex: 0 0 16px; inline-size: 16px; margin-inline-start: auto; } .rt-site-submenu[open] > summary > .rt-icon { transform: rotate(180deg); } .rt-site-submenu__body { padding: 0 var(--rt-sp-2) var(--rt-sp-3) var(--rt-sp-4); border-inline-start: 2px solid var(--rt-border-subtle); margin: 0 0 var(--rt-sp-3) var(--rt-sp-4); } .rt-site-submenu__body h4 { margin: var(--rt-sp-4) 0 var(--rt-sp-1); font-size: var(--rt-f-xs); color: var(--rt-text-secondary); } .rt-site-submenu__body a { display: flex; align-items: center; min-block-size: var(--rt-target-min); padding: var(--rt-sp-2); font-size: var(--rt-f-sm); border-radius: var(--rt-rd-sm); color: var(--rt-text-heading); } .rt-site-submenu__body a:hover, .rt-site-submenu__body a[aria-current="page"] { background: var(--rt-surface-accent); } .rt-site-submenu__all { font-weight: var(--rt-fw-bold); } .rt-site-submenu--resources { margin-block-start: var(--rt-sp-3); } .rt-site-submenu--resources > summary { min-block-size: var(--rt-target-min); display: flex; align-items: center; justify-content: space-between; gap: var(--rt-sp-3); font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-footer-directory { border-block-start: 1px solid var(--rt-text-on-inverse-muted); padding-block: var(--rt-sp-4); } .rt-footer-directory > a, .rt-footer-directory summary { display: flex; align-items: center; justify-content: space-between; gap: var(--rt-sp-3); min-block-size: var(--rt-target-min); color: var(--rt-text-on-inverse); } .rt-footer-directory summary { cursor: pointer; list-style: none; font-weight: var(--rt-fw-bold); } .rt-footer-directory summary::-webkit-details-marker { display: none; } .rt-footer-directory__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--rt-sp-6); padding-block: var(--rt-sp-5); } .rt-footer-directory__grid nav { display: flex; flex-direction: column; min-inline-size: 0; } .rt-footer-directory__grid h2 { font-size: var(--rt-f-sm); color: var(--rt-text-on-inverse); margin-block-end: var(--rt-sp-3); } .rt-footer-directory__grid a { font-size: var(--rt-f-sm); } .rt-footer-directory__all { display: flex; align-items: center; gap: var(--rt-sp-2); min-block-size: var(--rt-target-min); padding-block-end: var(--rt-sp-3); font-weight: var(--rt-fw-bold); } .rt-content-hub__head { max-inline-size: 760px; } .rt-topic-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--rt-sp-4); } .rt-topic-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--rt-sp-3); padding: var(--rt-sp-5); border: 1px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); background: var(--rt-surface-default); color: var(--rt-text-heading); transition: border-color 160ms ease, box-shadow 160ms ease; } .rt-topic-card:hover { border-color: var(--rt-border-focus); box-shadow: var(--rt-el-2); text-decoration: none; } .rt-topic-card h3 { font-size: var(--rt-f-lg); line-height: 1.35; } .rt-topic-card p { color: var(--rt-text-secondary); font-size: var(--rt-f-sm); line-height: 1.65; } .rt-topic-card__icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; background: var(--rt-surface-accent); border-radius: var(--rt-rd-md); color: var(--rt-text-heading); } .rt-topic-card__action { display: flex; align-items: center; gap: var(--rt-sp-2); margin-block-start: auto; padding-block-start: var(--rt-sp-2); color: var(--rt-text-link); font-size: var(--rt-f-sm); font-weight: var(--rt-fw-bold); } .rt-topic-card--age:nth-child(3n+2) .rt-topic-card__icon { background: var(--rt-c-coral-tint); } .rt-topic-card--age:nth-child(3n+3) .rt-topic-card__icon { background: var(--rt-c-gold-tint); } /* Dört kartlı kümeler tek sırada durur; 3 sütunda son kart yalnız kalıyordu (2026-09-14 denetimi). */ @media (min-width: 960px) { .rt-topic-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* KOMPAKT KÜME (alt sayfalar): simge · başlık + tek satır · ok. Ana sayfadaki resimli kartlar aynı içeriği ikinci kez 210 px'lik kutularla tekrar ediyordu; burada satır başına ~72 px yeter. */ .rt-topic-grid--compact { gap: var(--rt-sp-3); } .rt-topic-card--compact { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; grid-template-rows: auto auto; align-items: center; column-gap: var(--rt-sp-3); row-gap: 2px; padding: var(--rt-sp-3) var(--rt-sp-4); border-radius: var(--rt-rd-md); } .rt-topic-card--compact .rt-topic-card__icon { grid-row: 1 / span 2; inline-size: 40px; block-size: 40px; border-radius: var(--rt-rd-sm); } .rt-topic-card--compact .rt-topic-card__icon .rt-icon { inline-size: 22px; block-size: 22px; } .rt-topic-card--compact h3 { grid-column: 2; font-size: var(--rt-f-md); line-height: 1.3; } .rt-topic-card--compact p { grid-column: 2; font-size: var(--rt-f-xs); line-height: 1.45; } .rt-topic-card--compact .rt-topic-card__action { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0; color: var(--rt-text-heading); } .rt-topic-card--compact:hover .rt-topic-card__action { color: var(--rt-text-link); } .rt-guide-hero { --rt-text-eyebrow: var(--rt-text-heading); padding-block: var(--rt-sp-4) var(--rt-sp-8); background: var(--rt-surface-accent); border-block-end: 1px solid var(--rt-border-subtle); } .rt-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rt-sp-2); font-size: var(--rt-f-xs); margin-block-end: var(--rt-sp-6); color: var(--rt-text-secondary); } .rt-breadcrumb a { display: inline-flex; align-items: center; min-block-size: var(--rt-target-min); color: var(--rt-text-secondary); } .rt-breadcrumb > span[aria-current] { overflow-wrap: anywhere; } .rt-guide-hero__grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.9fr); gap: var(--rt-sp-8); align-items: center; } .rt-guide-hero h1 { font-size: clamp(2rem,3.6vw,3.4rem); line-height: 1.13; letter-spacing: -.025em; max-inline-size: 18ch; } .rt-guide-hero .rt-lead { max-inline-size: 55ch; } .rt-guide-hero__secondary { display: inline-flex; align-items: center; gap: var(--rt-sp-2); min-block-size: var(--rt-target-min); color: var(--rt-text-heading); font-weight: var(--rt-fw-bold); } .rt-guide-summary__points { list-style: none; padding: 0; display: grid; gap: var(--rt-sp-3); } .rt-guide-summary__points li { display: flex; align-items: flex-start; gap: var(--rt-sp-3); font-size: var(--rt-f-sm); line-height: 1.55; } .rt-guide-summary__points .rt-icon { flex: 0 0 20px; inline-size: 20px; margin-block-start: 2px; color: var(--rt-text-heading); } .rt-guide-section__grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: var(--rt-sp-8); } /* Maddesiz bölüm (yalnız başlık + bir paragraf) tek sütunda ve daha dar boşlukla durur: iki sütunlu ızgara masaüstünde 270 px'lik bandın %60'ını boş bırakıyordu (2026-09-14 denetimi). */ .rt-guide-section--plain { padding-block: var(--rt-sp-6); } .rt-guide-section--plain .rt-guide-section__grid { grid-template-columns: minmax(0, 1fr); gap: var(--rt-sp-3); } /* The container keeps its own width and centring; only the reading column is narrow (Owner I: "sayfada bir düzen yok"). */ .rt-guide-section--plain .rt-guide-section__grid > * { max-inline-size: var(--rt-container-narrow); } .rt-guide-section--plain h2 { max-inline-size: none; } .rt-guide-section__number { font-size: var(--rt-f-sm); color: var(--rt-text-secondary); letter-spacing: .15em; font-weight: var(--rt-fw-bold); } .rt-guide-section h2 { max-inline-size: 20ch; } .rt-guide-list { display: grid; gap: var(--rt-sp-3); list-style: none; padding: 0; } .rt-guide-list li { display: flex; align-items: flex-start; gap: var(--rt-sp-3); padding: var(--rt-sp-4); background: var(--rt-surface-accent); border-radius: var(--rt-rd-md); line-height: 1.65; } .rt-guide-list .rt-icon { flex: 0 0 20px; inline-size: 20px; margin-block-start: 3px; color: var(--rt-text-heading); } .rt-guide-guidance { display: flex; align-items: center; justify-content: space-between; gap: var(--rt-sp-6); } .rt-guide-guidance > div { max-inline-size: 650px; } .rt-guide-guidance > .rt-btn { flex-shrink: 0; } .rt-guide-price { padding: var(--rt-sp-6); border: 1px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); background: var(--rt-surface-accent); align-items: flex-start; } .rt-guide-price__value { font-size: var(--rt-f-3xl); line-height: 1.25; font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } /* Site haritası kümeleri sütunlarda AKAR (CSS columns): ızgarada 14 bağlantılık küme 5 bağlantılık komşularının altında 350 px boşluk bırakıyordu (2026-09-14 denetimi). */ .rt-directory-grid { display: block; columns: 3; column-gap: var(--rt-sp-8); } .rt-directory-group { display: flex; flex-direction: column; min-inline-size: 0; break-inside: avoid; margin-block-end: var(--rt-sp-6); } .rt-directory-group h2 { font-size: var(--rt-f-xl); margin-block-end: var(--rt-sp-3); } .rt-directory-group a { min-block-size: var(--rt-target-min); display: flex; align-items: center; justify-content: space-between; gap: var(--rt-sp-3); padding-block: var(--rt-sp-2); border-block-end: 1px solid var(--rt-border-subtle); font-size: var(--rt-f-sm); } .rt-directory-group a .rt-icon { flex: 0 0 16px; inline-size: 16px; } .rt-word-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--rt-sp-4); } .rt-word-card { padding: var(--rt-sp-5); border: 1px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); background: var(--rt-surface-default); min-inline-size: 0; } .rt-word-card h3 { font-size: var(--rt-f-sm); color: var(--rt-text-secondary); } .rt-word-card__picture { display: grid; place-items: center; block-size: 110px; color: var(--rt-text-heading); } .rt-word-card__picture .rt-icon { inline-size: 72px; block-size: 72px; } .rt-word-card__choices { display: flex; flex-wrap: wrap; gap: var(--rt-sp-2); } .rt-word-card__choices .rt-btn { flex-grow: 1; } .rt-word-card__choices [aria-pressed="true"] { background: var(--rt-surface-accent); } .rt-word-card__result { min-block-size: 3.2em; font-size: var(--rt-f-sm); line-height: 1.55; margin-block: var(--rt-sp-3); } .rt-word-card__answer summary { display: flex; align-items: center; min-block-size: var(--rt-target-min); font-size: var(--rt-f-sm); cursor: pointer; color: var(--rt-text-heading); } .rt-word-card__answer p { font-size: var(--rt-f-sm); padding-block: var(--rt-sp-3); } .rt-word-card__write { display: none; } @media (max-width: 959.98px) { .rt-guide-hero__grid { gap: var(--rt-sp-5); } .rt-topic-grid,.rt-word-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .rt-directory-grid { columns: 2; column-gap: var(--rt-sp-6); } .rt-guide-guidance { align-items: flex-start; flex-direction: column; } } @media (max-width: 639.98px) { .rt-guide-hero__grid,.rt-guide-section__grid { grid-template-columns: minmax(0,1fr); gap: var(--rt-sp-5); } .rt-guide-hero { padding-block-end: var(--rt-sp-6); } .rt-guide-hero h1 { max-inline-size: none; } .rt-topic-grid,.rt-word-grid { grid-template-columns: minmax(0,1fr); } .rt-directory-grid { columns: 1; } .rt-topic-card { padding: var(--rt-sp-4); } .rt-topic-card--compact { padding: var(--rt-sp-3) var(--rt-sp-4); } .rt-footer-directory__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--rt-sp-5) var(--rt-sp-3); } .rt-footer-directory__grid a { overflow-wrap: anywhere; } } @media (prefers-reduced-motion: reduce) { .rt-topic-card { transition: none; } } @media print { body.rt-print-words .rt-shell__main > :not(.rt-word-practice) { display: none !important; } body.rt-print-words .rt-word-practice { padding: 0; } body.rt-print-words .rt-word-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } body.rt-print-words .rt-word-card { break-inside: avoid; box-shadow: none; padding: 12px; } body.rt-print-words .rt-word-card__answer,body.rt-print-words .rt-word-card__result,body.rt-print-words .rt-word-practice > div > p { display: none; } body.rt-print-words .rt-word-card__write { display: block; block-size: 32px; border-block-end: 1px solid currentColor; } body.rt-print-words .rt-word-card__choices button { border: 1px solid currentColor; min-block-size: 30px; } } } /* Bulunamayan sayfa (views-rt/error/index.php, 2026-09-14). Sayfa katmanı: marka illüstrasyonu ham palet okur (kabuk kuralı bileşen katmanı içindir); yerleşim ve bağlantılar anlamsal token kullanır. */ @layer rt.page { .rt-notfound { min-block-size: 60vh; display: flex; align-items: center; } .rt-notfound__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rt-sp-6); align-items: center; } .rt-notfound__links { display: flex; flex-direction: column; gap: var(--rt-sp-2); padding-block-start: var(--rt-sp-3); } .rt-notfound__art { display: none; justify-self: center; } .rt-notfound__art .rt-notfound__talk { inline-size: min(220px, 60vw); block-size: auto; } .rt-notfound__bubble { fill: var(--rt-c-gold-tint); stroke: var(--rt-c-navy-deep); stroke-width: 3; stroke-linejoin: round; } .rt-notfound__mark { fill: none; stroke: var(--rt-c-navy-deep); stroke-width: 7; stroke-linecap: round; } .rt-notfound__dot { fill: var(--rt-c-coral); } @media (min-width: 1024px) { .rt-notfound__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .rt-notfound__art { display: block; } } } /* ============================================================================= MARKA ÇİZİM AİLESİ — ANA SAYFA BÖLÜMLERİ (2026-09-14) Owner brief (birebir): "Her bölümde bir ana görsel vurgu seç; gerektiğinde bir veya iki küçük eşlikçi ekle. Öğeleri içeriğin anlamına göre yerleştir … Dekoratif öğeler içerik alanlarını kapatmasın. Büyük çizimler bölüm kenarlarından kontrollü biçimde görünebilir; sayfa genişliğini artırmasın." Sıra Owner'ın ekran görüntüsü sırasıdır. Çizimin kendisi _c/doodle.php + bileşen katmanındaki .rt-doodle'dır; burada yalnız yer, boy ve görünürlük vardır. Bu blok aynı katmandaki eski süs kurallarından SONRA gelir ve onları kapatır (zikzak, eski SSS kıvrımları, düz kesikli adım çizgisi, Georgia tırnak). ============================================================================= */ @layer rt.page { /* 1) ÜÇ ADIM — numaraları bağlayan el çizimi kesikli yol (ilk aralık dalgalı, ikincisi döngülü). */ .rt-steps__num::after { display: none; } /* Yol numara dairesinin hemen altından başlar ve bir sonraki dairenin üstünde biter (2026-09-14 aile denetimi: 42 px'ten başlayınca dairenin altında boşluk kalıyordu). */ .rt-steps__route { position: absolute; z-index: -1; inset-inline-start: 0; inset-block-start: 38px; inline-size: 32px; block-size: calc(100% - 36px); } /* KALEM ÇİZGİSİYLE BAĞLANAN ADIMLAR (Owner 2026-09-14, birebir: "sayılar arası kesik çizgiler profesyonel durmuyor. orada da kalemle çiziyor gibi bir kurgu ve çizgi ile birleştirme yapabiliriz"): numaraları birleştiren yol DÜZ bir kalem çizgisidir (başlık çizgileriyle aynı kalem). Ekrana girince (rt.js drawOnView → .is-drawn) yukarıdan aşağı yavaşça çizilir; betik yoksa ya da hareketi azalt tercihinde hazır çizili durur. Yedekler .is-drawn kuralını da kapatır (R1 2026-09-15, özgüllük: eskiden tek sınıflı yedek iki sınıflı .is-drawn kuralına yeniliyordu). */ .rt-steps__route .rt-doodle__dash { stroke-dasharray: none; stroke-width: 3px; } .rt-steps__route { clip-path: inset(0 -40% 100% -40%); } .rt-steps__route.is-drawn { animation: rt-route-draw 1100ms cubic-bezier(0.6, 0.05, 0.3, 1) 200ms forwards; } @keyframes rt-route-draw { to { clip-path: inset(0 -40% 0 -40%); } } @media (scripting: none) { .rt-steps__route, .rt-steps__route.is-drawn { clip-path: none; animation: none; } } @media (prefers-reduced-motion: reduce) { .rt-steps__route, .rt-steps__route.is-drawn { clip-path: none; animation: none; } } /* 2) TANITIM FİLMİ — ok kaldırıldı (Owner 2026-09-14); sinema kuşağı home-top.css'tedir. */ .rt-nk--film .rt-video--brand .rt-video__facade { background: var(--rt-surface-default); border: 2px solid var(--rt-c-navy-deep); box-shadow: 6px 6px 0 0 var(--rt-c-lime); } .rt-nk--film .rt-video--brand .rt-video__facade:hover { box-shadow: 8px 8px 0 0 var(--rt-c-lime); } /* 3) EĞİTİM EKİBİ — sol kenarda ses çizgili "Merhaba!" balonu (konuşma ve anlatma), sağ altta yıldız. Başlık altı çizgisi fırça lekesi yerine ailenin kalemidir. Açıklama 370 px'te sekiz satıra bölünüyordu; iki paragraf 34rem ölçüde ve aralarında nefesle okunur (Owner standardı: "kontrollü satır uzunlukları"). */ .rt-teachers-band--nk::before, .rt-teachers-band--nk::after { display: none; } .rt-teachers-band__talk { position: absolute; z-index: 0; display: none; } .rt-teachers-band__talk { inline-size: 186px; block-size: 124px; inset-inline-start: max(16px, calc(50% - 610px)); inset-block-start: 236px; transform: rotate(-6deg); } @media (min-width: 1100px) { .rt-teachers-band__talk { display: block; } } .rt-teachers-band__lead { max-inline-size: 34rem; gap: 10px; } /* HATA DÜZELTMESİ (2026-09-14 ekranda görüldü): koyu kuşaktaki "Tüm öğretmenleri inceleyin" bağlantısı mercandı — lacivert üstünde ≈2,6:1, okunmuyordu. Koyu yüzeyde lime (≈9,9:1). */ .rt-teachers-band--nk .rt-link-arrow { color: var(--rt-c-lime); } /* 5) AİLE YORUMLARI — KONUŞMA ÇERÇEVESİ: kart kabuğu kalkar; ad satırı üstte, söz altındaki balonda. Balonun kuyruğu rozeti gösterir, köşede el çizimi tırnak durur. Eğiklik ve üzerine gelince yükselme balona taşındı. */ .rt-quote__mark { display: none; } .rt-nk--reviews .rt-quote { background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; isolation: auto; gap: 14px; } .rt-nk--reviews .rt-quote::before, .rt-nk--reviews .rt-quote::after { display: none; } .rt-nk--reviews .rt-quote__head { padding-inline: 6px; } .rt-nk--reviews .rt-quote__bubble { position: relative; isolation: isolate; flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 20px; border-radius: 24px; background: var(--rt-surface-default); border: 1px solid rgba(59, 46, 158, 0.12); /* Gölge kaydırma alanının iç boşluğuna SIĞAR: eski 34 px'lik yayılma rayın kenarında kesilip kartların arkasında açık renkli bir dikdörtgen iz bırakıyordu (2026-09-14 ekranda görüldü). */ box-shadow: 0 1px 2px rgba(20, 24, 60, 0.05), 0 12px 20px -14px rgba(20, 24, 60, 0.24); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .rt-nk--reviews .rt-quote-rail .rt-team-rail__track { padding: 16px 12px 34px; scroll-padding-inline: 12px; } .rt-nk--reviews .rt-quote__bubble::before { content: ""; position: absolute; z-index: 1; inset-block-start: -10px; inset-inline-start: 20px; inline-size: 18px; block-size: 18px; transform: rotate(45deg); border-radius: 4px 0 0 0; background: var(--rt-surface-default); border-block-start: 1px solid rgba(59, 46, 158, 0.12); border-inline-start: 1px solid rgba(59, 46, 158, 0.12); } .rt-nk--reviews .rt-quote__mark { display: block; position: absolute; z-index: -1; inline-size: 48px; block-size: 36px; inset-block-start: 16px; inset-inline-end: 18px; } .rt-nk--reviews .rt-quote-rail .rt-quotes__item:nth-child(odd) .rt-quote, .rt-nk--reviews .rt-quote-rail .rt-quotes__item:nth-child(even) .rt-quote { transform: none; } .rt-nk--reviews .rt-quote-rail .rt-quotes__item:nth-child(odd) .rt-quote__bubble { transform: rotate(-1deg); } .rt-nk--reviews .rt-quote-rail .rt-quotes__item:nth-child(even) .rt-quote__bubble { transform: rotate(1deg); } .rt-nk--reviews .rt-quote-rail .rt-quotes__item .rt-quote:hover, .rt-nk--reviews .rt-quote-rail .rt-quotes__item .rt-quote:focus-within, .rt-nk--reviews .rt-reviews-page__stories .rt-quote:hover { transform: none; border-color: transparent; box-shadow: none; } .rt-nk--reviews .rt-quote-rail .rt-quotes__item .rt-quote:hover .rt-quote__bubble, .rt-nk--reviews .rt-quote-rail .rt-quotes__item .rt-quote:focus-within .rt-quote__bubble, .rt-nk--reviews .rt-reviews-page__stories .rt-quote:hover .rt-quote__bubble { transform: rotate(0deg) translateY(-6px); border-color: rgba(59, 46, 158, 0.22); box-shadow: 0 2px 4px rgba(20, 24, 60, 0.06), 0 18px 24px -14px rgba(20, 24, 60, 0.3); } @media (max-width: 719px) { .rt-nk--reviews .rt-quote { padding: 0; } .rt-nk--reviews .rt-quote__bubble { padding: 22px 18px 18px; } } @media (prefers-reduced-motion: reduce) { .rt-nk--reviews .rt-quote-rail .rt-quotes__item .rt-quote__bubble, .rt-nk--reviews .rt-quote-rail .rt-quotes__item .rt-quote:hover .rt-quote__bubble, .rt-nk--reviews .rt-reviews-page__stories .rt-quote:hover .rt-quote__bubble { transform: none; transition: none; } } /* 7–8) REHBER KÜMELERİ — ana sayfanın bölüm diliyle ortalı başlık (aynı ölçek), yaş rehberinde büyüme evreleri. Telefonda altı uzun kart 1.500 px kaydırma yapıyordu: kart simge · başlık + tek satır · ok satırına döner. */ .rt-content-hub--center .rt-content-hub__head { margin-inline: auto; align-items: center; text-align: center; max-inline-size: 48rem; } /* Satır aralığı 1.3: başlıktaki organik halka (RtView::mark ring) iki satıra bölünen başlıkta alt satırın harflerine biniyordu (2026-09-14 aile denetimi). */ .rt-content-hub--center .rt-content-hub__head h2 { font-size: clamp(1.75rem, 1.05rem + 2.6vw, 3rem); line-height: 1.3; text-wrap: balance; } .rt-content-hub--center .rt-content-hub__head .rt-lead { margin-inline: auto; max-inline-size: 60ch; } /* BÜYÜME EVRELERİ — ölçüler (v3.1, 2026-10-02). Çizim ve renk kuralları bileşen katmanındadır (4.7 .rt-growth). Buradaki eski ikinci renk kopyası (ham paleti okuyor ve sonra gelen katman olduğu için --rt-growth-* belirteçlerini eziyordu), kayık baskı hizası ve yüksek kontrast kuralları v3 ile kaldırıldı; aşağıdaki ölçüler değişmedi. */ .rt-topic-card__icon--growth { inline-size: 70px; block-size: 70px; } .rt-topic-card__icon--growth .rt-growth { inline-size: 56px; block-size: 56px; } @media (max-width: 599.98px) { .rt-content-hub--cards .rt-topic-card__icon .rt-growth { inline-size: 40px; block-size: 40px; } } @media (max-width: 599.98px) { .rt-content-hub--cards .rt-topic-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; grid-template-rows: auto auto; align-items: center; column-gap: var(--rt-sp-3); row-gap: 2px; padding: var(--rt-sp-3) var(--rt-sp-4); } .rt-content-hub--cards .rt-topic-card__icon { grid-row: 1 / span 2; inline-size: 48px; block-size: 48px; } .rt-content-hub--cards .rt-topic-card__icon .rt-doodle { inline-size: 40px; block-size: 40px; } .rt-content-hub--cards .rt-topic-card h3 { grid-column: 2; font-size: var(--rt-f-md); line-height: 1.3; } .rt-content-hub--cards .rt-topic-card p { grid-column: 2; font-size: var(--rt-f-xs); line-height: 1.45; } .rt-content-hub--cards .rt-topic-card__action { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0; } .rt-content-hub--cards .rt-topic-card__action-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* 9) SIK SORULANLAR — kenarlardan görünen iki organik kıvrım (eski veri adresli kıvrımların yerine, ailenin kalemiyle). Soru satırları 843 px'tir; kıvrımlar yalnız satırlara binmeyecekleri genişlikte (≥1200 px) görünür. */ .rt-nk--faq::before, .rt-nk--faq::after { display: none; } .rt-nk-faq__curl { position: absolute; z-index: 0; display: none; inline-size: 200px; block-size: 160px; } .rt-nk-faq__curl--start { inset-inline-start: -34px; inset-block-start: 36px; } .rt-nk-faq__curl--end { inset-inline-end: -30px; inset-block-end: 36px; } @media (min-width: 1200px) { .rt-nk-faq__curl { display: block; } } /* 10) KAPANIŞ — kelime uçurtması Owner kararıyla KALDIRILDI (2026-09-14, birebir: "uçurtma çok kötü olmuş uçurtmayı kaldır"). Yerine gelecek vurgu ayrıca değerlendirilir; o zamana kadar band tipografi ve iki eylemden oluşur. */ } /* ============================================================================= OWNER DÜZELTMELERİ — 2026-09-14 GECE Dolan daire yazı renkleri, giriş düğmesi, kompakt hero, premium yorum kartları, hediye konfetisi. ============================================================================= */ @layer rt.page { /* 1) DOLAN DAİRE — yazı rengi her yüzeyde okunur kalır. Sayfa katmanındaki bölüm kuralları düğmelerin rengini sabitliyordu (kapanış bandında sarı üstünde beyaz, lacivert üstünde lacivert yazı ölçüldü); bu kurallar onların üstündedir. */ @media (hover: hover) { .rt .rt-btn.rt-btn--primary:hover, .rt .rt-btn.rt-btn--secondary:hover, .rt .rt-btn.rt-btn--inverse:hover { color: var(--rt-action-bloom-text); } .rt .rt-btn.rt-btn--outline:hover { color: var(--rt-action-outline-bloom-text); background: transparent; } } .rt .rt-btn.rt-btn--primary:focus-visible, .rt .rt-btn.rt-btn--primary:active, .rt .rt-btn.rt-btn--secondary:focus-visible, .rt .rt-btn.rt-btn--secondary:active, .rt .rt-btn.rt-btn--inverse:focus-visible, .rt .rt-btn.rt-btn--inverse:active { color: var(--rt-action-bloom-text); } .rt .rt-btn.rt-btn--outline:focus-visible, .rt .rt-btn.rt-btn--outline:active { color: var(--rt-action-outline-bloom-text); } /* Koyu yüzeydeki çerçeveli düğme lacivert daireyle kaybolurdu: orada daire sarıdır, yazı koyu indigodur. */ .rt-hero--quiz .rt-btn--outline, .rt-section--inverse .rt-btn--outline, .rt-nk--dark .rt-btn--outline { --rt-btn-bloom: var(--rt-action-bloom); } @media (hover: hover) { .rt .rt-hero--quiz .rt-btn.rt-btn--outline:hover, .rt .rt-section--inverse .rt-btn.rt-btn--outline:hover, .rt .rt-nk--dark .rt-btn.rt-btn--outline:hover { color: var(--rt-action-bloom-text); } } /* Üst menüdeki "Giriş yap" da aynı dolan daireyi taşır (Owner: "tüm sitedeki butonlara"). Koyu hero üstünde sarı. */ .rt-header__login { position: relative; isolation: isolate; --rt-btn-bloom: var(--rt-action-outline-bloom); } /* Yazı her an okunur (Owner 2026-09-17; .rt-btn "YAZI HER AN OKUNUR" notu): renk anında döner, daire ulaşmamış harf dairenin renginde ince haleyle açık zeminde de okunur. */ .rt-header__login:focus-visible { text-shadow: 0 0 1px var(--rt-btn-bloom), 0 0 2px var(--rt-btn-bloom), 0 0 3px var(--rt-btn-bloom), 0 0 5px var(--rt-btn-bloom); } @media (hover: hover) { .rt-header__login:hover { text-shadow: 0 0 1px var(--rt-btn-bloom), 0 0 2px var(--rt-btn-bloom), 0 0 3px var(--rt-btn-bloom), 0 0 5px var(--rt-btn-bloom); } } .rt-header__login::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 50% 100%, var(--rt-btn-bloom) var(--rt-bloom, 0%), transparent calc(var(--rt-bloom, 0%) + 1px)); opacity: 0; transition: --rt-bloom 520ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0s linear 520ms; } .rt-header--over:not(.is-scrolled) .rt-header__login { --rt-btn-bloom: var(--rt-action-bloom); } .rt-header__login:focus-visible::after { --rt-bloom: 101%; opacity: 1; transition: --rt-bloom 520ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0s; } @media (hover: hover) { .rt-header__login:hover::after { --rt-bloom: 101%; opacity: 1; transition: --rt-bloom 520ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0s; } .rt .rt-header .rt-header__login:hover { background: transparent; color: var(--rt-action-outline-bloom-text); } .rt .rt-header--over:not(.is-scrolled) .rt-header__login:hover { background: transparent; color: var(--rt-action-bloom-text); } } @media (prefers-reduced-motion: reduce) { .rt-header__login::after { transition: none; } } /* DOLAN DAİRE — .rt-btn OLMAYAN GERÇEK DÜĞMELERDE DE (R1 N4, 2026-09-15). Owner 2026-09-14 (birebir): "bu kodu öğren ve tüm sitedeki butonlara bu kodu uygula." Kapsam: yaş kutuları, "devamını göster", deneme çubuğunun geri düğmesi, ray okları, rehber "Bu sayfada" şeridinin kenar okları, sayfa içi yukarı + sohbet düğmeleri ve konu çipleri. Teknik .rt-btn::after ile aynıdır: alt kenarın ortasından büyüyen radyal degrade, kayıtlı --rt-bloom geçişi, overflow YOK. ::after'ı zaten kullanan öğe ALINMAZ: özgeçmiş sekmesi (seçili çizgisi ::after'dır). Seçili çipte daire çizilmez (lacivert zemindeki beyaz yazı lime daire üstünde okunmaz). SEÇİLİ YAŞ KUTUSUNDA da çizilmez: seçim yalnız renkle değil içteki beyaz ikinci çizgiyle (inset box-shadow) okunur; z-index -1'lik daire öğenin zemini ve iç gölgesinin ÜSTÜNE boyanır ve üzerine gelince, basınca ya da klavye odağında (geri dönüşte seçili kutu odak alır) o çizgiyi lime ile örterdi. Renk yüzeye göre: açık yüzeyde lime (--rt-action-primary-bg), zaten lime olan sohbet düğmesinde güneş sarısı (--rt-play-bg). Yorum rayının eski ölçeklenen lime katmanı (::before) aynı dolan daireye bırakılır. Hareketi azalt tercihinde daire geçişsiz dolar. Ray okları ve rehber şeridi okları mutlak konumludur: position yazılmaz, yalnız isolation. */ .rt-quiz__age-btn, .rt-quiz__expand, .rt-quizbar__back, .rt-fab__btn, .rt-chips a.rt-chip { position: relative; isolation: isolate; } .rt-rail-btn, .rt-guide-toc .rt-guide-toc__arrow { isolation: isolate; } .rt-quiz__expand { border-radius: var(--rt-rd-pill); } .rt-quizbar__back { border-radius: 50%; } .rt-quiz__age-btn, .rt-quiz__expand, .rt-quizbar__back, .rt-rail-btn, .rt-guide-toc .rt-guide-toc__arrow, .rt-chips a.rt-chip { --rt-btn-bloom: var(--rt-action-primary-bg); } .rt-fab__btn { --rt-btn-bloom: var(--rt-play-bg); } .rt-quiz__age-btn::after, .rt-quiz__expand::after, .rt-quizbar__back::after, .rt-rail-btn::after, .rt-guide-toc .rt-guide-toc__arrow::after, .rt-fab__btn::after, .rt-chips a.rt-chip::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 50% 100%, var(--rt-btn-bloom) var(--rt-bloom, 0%), transparent calc(var(--rt-bloom, 0%) + 1px)); opacity: 0; transition: --rt-bloom 520ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0s linear 520ms; } .rt-quiz__age-btn:focus-visible::after, .rt-quiz__age-btn:active::after, .rt-quiz__expand:focus-visible::after, .rt-quiz__expand:active::after, .rt-quizbar__back:focus-visible::after, .rt-quizbar__back:active::after, .rt-rail-btn:focus-visible::after, .rt-rail-btn:active::after, .rt-guide-toc .rt-guide-toc__arrow:focus-visible::after, .rt-guide-toc .rt-guide-toc__arrow:active::after, .rt-fab__btn:focus-visible::after, .rt-fab__btn:active::after, .rt-chips a.rt-chip:focus-visible::after, .rt-chips a.rt-chip:active::after { --rt-bloom: 101%; opacity: 1; transition: --rt-bloom 520ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0s; } @media (hover: hover) { .rt-quiz__age-btn:hover::after, .rt-quiz__expand:hover::after, .rt-quizbar__back:hover::after, .rt-rail-btn:hover::after, .rt-guide-toc .rt-guide-toc__arrow:hover::after, .rt-fab__btn:hover::after, .rt-chips a.rt-chip:hover::after { --rt-bloom: 101%; opacity: 1; transition: --rt-bloom 520ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0s; } /* Yaş kutusunun üzerine gelince anında lime olan zemini dairenin büyümesini örtüyordu: zemini daire boyar. Seçili kutu ([aria-pressed="true"], daha özgül) lime kalır. */ .rt-quiz__age-btn:hover { background: transparent; } } /* Dairesiz durumlar: pasif geri düğmesi, seçili çip, seçili yaş kutusu (iç beyaz çizgi görünür kalır; yukarıdaki not). */ .rt-quizbar__back:disabled::after, .rt-chips a.rt-chip--on::after, .rt-quiz__age-btn[aria-pressed="true"]::after { display: none; } .rt-nk--reviews .rt-rail-controls .rt-rail-btn::before { display: none; } /* Dokunmatik ekranda :hover dokunuştan sonra takılı kalır: yorum rayının üzerine-gelme rengi (lacivert-koyu yazı, lacivert zemin, ~1,5:1) daire yalnız (hover: hover)'da dolduğu için okunmaz kalırdı (fixes-r1 inceleme bulgusu). Dokunmatikte ok beyaz kalır; klavye odağındaki daire olduğu gibi durur. */ @media (hover: none) { .rt-nk--reviews .rt-rail-controls .rt-rail-btn:hover:not(:focus-visible) { color: var(--rt-c-white); } } @media (prefers-reduced-motion: reduce) { .rt-quiz__age-btn::after, .rt-quiz__expand::after, .rt-quizbar__back::after, .rt-rail-btn::after, .rt-guide-toc .rt-guide-toc__arrow::after, .rt-fab__btn::after, .rt-chips a.rt-chip::after { transition: none; } } /* 2) KOMPAKT HERO (Owner 2026-09-14, birebir: "headerdaki yaş kutusu novakid gibi biraz küçülmeli. header taşıyor. header UX UI kusursuz olsun"). Kart 512 px'ten 432 px'e iner, yaş kutuları 76×66'dan 64×54'e; 1366×768 ve 1280×720 dizüstü ekranlarda başlık, kart ve sahne ilk ekrana sığar (ölçüm: scratchpad brand/home.cjs). */ @media (min-width: 720px) { .rt-quiz { inline-size: min(100%, 27rem); padding: 36px 24px 18px; gap: 14px; } .rt-quiz__step[data-rt-quiz-step="age"] { gap: 14px; } .rt-quiz__q { font-size: 1.25rem; } .rt-quiz__ages { grid-template-columns: repeat(4, 64px); gap: 14px; } .rt-quiz .rt-quiz__age-btn { inline-size: 64px; block-size: 54px; border-radius: 14px; } } /* Hero İLK EKRANI DOLDURUR (Owner 2026-09-14, birebir: "headırı çok küçülttün. hem yazılar küçüldü hem de alt taraf beyaz kaldı"): başlık ve boşluklar eski ölçüsündedir; kuşak en az ekran yüksekliği − üst menü kadar uzar ve içerik dikeyde ortalanır, altta beyaz bölüm görünmez. Yalnız yaş kartı küçüldü (yukarıdaki kural). */ @media (min-width: 1000px) { .rt-hero--quiz { min-block-size: calc(100svh - 73px); display: flex; align-items: center; } .rt-hero--quiz > .rt-hero__inner { inline-size: 100%; } } /* Kısa dizüstü ekranda (1280×720) yalnız kuşağın iç boşluğu daralır; yazı boyu değişmez. */ @media (min-width: 1000px) and (max-height: 740px) { .rt-hero--quiz { padding-block: 20px 28px; } } /* 3) PREMIUM YORUM KARTLARI — ana sayfa rayı (Owner 2026-09-14: "yorum tasarımını da premium ux yap anasayfada hiç iyi değil"). Söz balonu ÜSTTE, aile bilgisi (rozet, ad, bayrak) ALTTA; balonun kuyruğu aşağıda sözü söyleyeni gösterir. Kartlar eşit boydadır, eğiklik yoktur, yazı ölçüsü rahattır; yıldızlar üstte sabit durur. Kısa sözlü kartta söz, yıldızların altındaki alanda dikeyde ORTALANAN büyük alıntı olarak durur (R1 R5, 2026-09-15; ayrıntı aşağıda "KISA SÖZ — ALINTI KARTI"). */ .rt-nk--reviews .rt-quote-rail .rt-quotes__item { display: flex; } .rt-nk--reviews .rt-quote-rail .rt-quote { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; block-size: auto; } .rt-nk--reviews .rt-quote-rail .rt-quote__head { order: 2; padding-inline: 22px; } .rt-nk--reviews .rt-quote-rail .rt-quote__bubble { order: 1; flex: 1 1 auto; gap: 14px; padding: 28px 28px 24px; border-radius: 28px; border: 1px solid rgba(59, 46, 158, 0.1); box-shadow: 0 1px 2px rgba(20, 24, 60, 0.05), 0 16px 28px -18px rgba(20, 24, 60, 0.28); } .rt-nk--reviews .rt-quote-rail .rt-quote__bubble::before { inset-block: auto -9px; inset-inline-start: 36px; border-radius: 0 0 4px 0; border-block-start: 0; border-inline-start: 0; border-block-end: 1px solid rgba(59, 46, 158, 0.1); border-inline-end: 1px solid rgba(59, 46, 158, 0.1); } .rt-nk--reviews .rt-quote-rail .rt-quotes__item:nth-child(odd) .rt-quote__bubble, .rt-nk--reviews .rt-quote-rail .rt-quotes__item:nth-child(even) .rt-quote__bubble { transform: none; } .rt-nk--reviews .rt-quote-rail .rt-quote__text { font-size: 1.0625rem; line-height: 1.7; color: var(--rt-text-primary); } .rt-nk--reviews .rt-quote-rail .rt-quote__title { font-size: 1.0625rem; } .rt-nk--reviews .rt-quote-rail .rt-quote__name { font-size: 1.0625rem; } .rt-nk--reviews .rt-quote-rail .rt-team-rail__track { padding: 16px 12px 30px; } @media (max-width: 719.98px) { .rt-nk--reviews .rt-quote-rail .rt-quote__bubble { padding: 22px 20px 20px; border-radius: 22px; } .rt-nk--reviews .rt-quote-rail .rt-quote__head { padding-inline: 14px; } } /* 4) HEDİYE ETİKETİ + KONFETİ (Owner 2026-09-14: "hediye yazan stickerların yanına konfeti emojisi ekle" ve "hediye yazısının içine koyduğun için konfetiler gözükmüyor. rozetin dışında olsun"). Konfeti ile rozet birlikte kartın sağ üst köşesine çapraz oturan bir gruptur; konfeti rozetin SOLUNDA, rozetten bağımsız ve iridir. */ .rt-price__tag { position: absolute; z-index: 1; inset-block-start: -20px; inset-inline-end: -10px; display: inline-flex; align-items: center; gap: 2px; transform: rotate(calc(var(--rt-tilt-badge) * var(--rt-dir))); transform-origin: 100% 50%; pointer-events: none; } /* RTL: the angle mirrors through --rt-dir; the pivot moves to the inline end, which is the left edge in RTL. */ [dir="rtl"] .rt-price__tag { transform-origin: 0 50%; } .rt-price__tag .rt-price__badge { position: static; inset: auto; transform: none; } .rt-price__confetti { display: inline-block; font-size: 1.75rem; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; transform: rotate(-16deg) translateY(-4px); } @media (max-width: 599.98px) { .rt-price__tag { inset-inline-end: -4px; } .rt-price__confetti { font-size: 1.5rem; } } /* İlk kartın konfetili etiketi bölüm açıklamasına değiyordu (2026-09-14 ekranda görüldü): liste biraz aşağıdan başlar. */ .rt-nk .rt-prices { margin-block-start: 22px; } } /* ============================================================================= TEMA V2.1 TEMELİ — v2/foundation/foundation.css §1 FOUNDATION, §2 SEMANTIC, §3 PRIMITIVE, §5 PAGE (css-replacements.md R0). §4 COMPONENT bu dosyanın ilk @layer rt.component bloğunun içindedir. Katman sırası dosya başındaki @layer bildirimiyle sabittir. R1 (rehber düz bölümü) yalnız yerinde uygulanır (guides G-R3); §5 geçici kopyayı taşımaz (CONSISTENCY 4). ============================================================================= */ /* ---------------------------------------------------------------- 1. FOUNDATION */ @layer rt.foundation { :root { /* Parlak güneş sarısı — YALNIZ video oynat düğmesi zemini (Owner F: parlak sarı daire, lacivert üçgen). */ --rt-c-sun: #FFD23F; /* KUŞAK ZEMİNLERİ V2.1 (Owner L: "geçişler belirgin olsun"). Ölçü CIELAB açıklık farkı ΔL*: komşu açık zeminler en az 4,5 ayrılır. Beyaz 100 · mist-deep 95,2 · sky (navy-tint) 93,6 · sky-deep 89,8. Eski krem #F6F8FF beyazdan yalnız 2,4 ayrılıyordu (ölçüldü: rehber SSS → sonraki adımlar, sayfa başı → SSS listesi). */ --rt-c-mist-deep: #EEF1FD; --rt-c-sky-deep: #DEE1F7; /* Başlık ölçeği (Nunito 800). Akışkan: 390 px'te alt sınır, 1440 px'te üst sınır. */ --rt-f-display-2xl: clamp(2.25rem, 1.6rem + 2.7vw, 3.75rem); --rt-f-display-xl: clamp(2rem, 1.55rem + 1.9vw, 3rem); --rt-f-display-lg: clamp(1.625rem, 1.35rem + 1.15vw, 2.375rem); --rt-f-display-md: clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem); --rt-fw-black: 800; --rt-lh-display: 1.1; --rt-ls-display: -0.022em; --rt-ls-tag: 0.08em; --rt-sp-10: 8rem; --rt-rd-xl: 28px; /* KONTROLLÜ ASİMETRİ (Owner E: "asimetriyi temamızda kullanalım"). Açılar ve sert gölge kaymaları token'dır. */ --rt-tilt-sm: 2deg; --rt-tilt-md: 4deg; --rt-tilt-badge: 6deg; --rt-offset-1: 2px; --rt-offset-2: 3px; --rt-offset-3: 6px; --rt-mo-float: 9s; --rt-z-fab: 90; } } /* ---------------------------------------------------------------- 2. SEMANTIC */ @layer rt.semantic { :root { /* Yazı yönü çarpanı: sert gölge ve eğim RTL'de aynalanır (box-shadow mantıksal değildir). */ --rt-dir: 1; /* KUŞAK ZEMİNLERİ — komşu iki kuşak aynı aileyi taşımaz (SPEC §5; önizleme ΔL* ≥ 4,5 ya da ton değişimi ister). */ --rt-band-paper: var(--rt-c-white); --rt-band-sky: var(--rt-c-navy-tint); --rt-band-mist: var(--rt-c-mist-deep); --rt-band-head: var(--rt-c-sky-deep); --rt-band-ink: var(--rt-c-navy); --rt-band-deep: var(--rt-c-navy-deep); --rt-band-blush: var(--rt-c-coral-tint); --rt-band-honey: var(--rt-c-gold-tint); --rt-offset-ink: var(--rt-c-navy-deep); --rt-offset-leaf: var(--rt-c-lime); /* HEDİYE rozeti: canlıdaki onaylı rozetle AYNI — altın zemin + lacivert-derin yazı ve kontur (6,5:1, AA). Owner (birebir, rt.css .rt-price__badge notu): "hediye rozetleri header daki hediye ifadesindekiyle aynı olsun". Brief'teki "mercan" bundan eskidir; lider Owner'a teyit ettirir (REQUESTS.md). */ --rt-gift-bg: var(--rt-c-gold); --rt-gift-text: var(--rt-c-navy-deep); --rt-tag-bg: var(--rt-c-gold-tint); --rt-tag-fg: var(--rt-c-gold-ink); --rt-play-bg: var(--rt-c-sun); --rt-play-ink: var(--rt-c-navy-deep); /* YAN SÜS MÜREKKEBİ. rgba değerleri color-mix desteklemeyen tarayıcı yedeğidir; aşağıdaki @supports bloğu aynı değerleri marka token'larından türetir (marka rengi değişirse süs de izler). DİKKAT: yorumda yıldız-eğik çizgi dizisi yorumu erken kapatır ve sonraki bildirimi yutar. */ --rt-decor-ink: rgba(59, 46, 158, 0.28); --rt-decor-ink-strong: rgba(59, 46, 158, 0.4); --rt-decor-ink-fine: rgba(59, 46, 158, 0.36); --rt-decor-ink-soft: rgba(59, 46, 158, 0.16); --rt-decor-ink-accent: rgba(217, 74, 126, 0.3); --rt-fab-bg: var(--rt-c-lime); --rt-fab-ink: var(--rt-c-navy-deep); --rt-fab-quiet-bg: var(--rt-c-white); /* Büyüme evreleri v3.1 (bileşen 4.7). Işık tonu beyazla, gölge tonu lacivert-derinle karışır; color-mix'li tanımlar aşağıdaki @supports bloğundadır, burada ana palet rengine düşen yedekleri durur. */ --rt-growth-soil-hi: var(--rt-c-gold); /* color-mix yedeği; aşağıda %55 gold + white = #EED093 */ --rt-growth-soil: var(--rt-c-gold); --rt-growth-soil-deep: var(--rt-c-gold-deep); --rt-growth-soil-shade: var(--rt-c-gold-deep); /* color-mix yedeği; aşağıda %72 gold-deep + navy-deep = #855E31 */ --rt-growth-root: var(--rt-c-gold-tint); --rt-growth-leaf-hi: var(--rt-c-lime); /* color-mix yedeği; aşağıda %55 lime + white = #B3F2BF */ --rt-growth-leaf: var(--rt-c-lime); --rt-growth-leaf-deep: var(--rt-c-lime-deep); --rt-growth-leaf-shade: var(--rt-c-lime-deep); /* color-mix yedeği; aşağıda %78 lime-deep + navy-deep = #44A569 */ --rt-growth-accent-hi: var(--rt-c-coral); /* color-mix yedeği; aşağıda %62 coral + white = #E78FAF */ --rt-growth-accent: var(--rt-c-coral); --rt-growth-accent-deep: var(--rt-c-coral-deep); --rt-growth-accent-shade: var(--rt-c-coral-deep); /* color-mix yedeği; aşağıda %80 coral-deep + navy-deep = #9C3369 */ --rt-growth-sun: var(--rt-c-gold); --rt-growth-spark: var(--rt-c-lime-deep); --rt-growth-paper: var(--rt-c-white); /* PANEL UZANTISI (Owner M: tema girişten sonra panelde sürer). Panel grubu bu token'ları okur; yeni renk yok. SPEC §17. */ --rt-panel-shell-bg: var(--rt-band-mist); --rt-panel-sidebar-bg: var(--rt-band-deep); --rt-panel-sidebar-fg: var(--rt-text-on-inverse-muted); --rt-panel-nav-active-bg: var(--rt-action-primary-bg); --rt-panel-nav-active-fg: var(--rt-action-primary-text); --rt-panel-nav-active-shadow: var(--rt-c-white); --rt-panel-card-border: var(--rt-border-subtle); } [dir="rtl"] { --rt-dir: -1; } .rt-band--ink, .rt-band--deep, .rt-cta-band:not(.rt-cta-band--tint) { --rt-text-heading: var(--rt-text-on-inverse); --rt-border-focus: var(--rt-c-white); --rt-ink-mark: var(--rt-c-lime); --rt-ink-mark-deep: var(--rt-c-lime-deep); --rt-action-shadow: rgba(255, 255, 255, 0.34); --rt-doodle-ink: var(--rt-c-lime); --rt-offset-ink: var(--rt-c-lime); } /* Koyu kuşakta süs: beyaz %22 (V2.1; %16 lacivert-derin zeminde ölçüldüğünde silikti). */ .rt-footer, .rt-section--inverse, .rt-teachers-band--nk, .rt-nk--dark, [data-rt-surface="inverse"], .rt-band--ink, .rt-band--deep, .rt-cta-band:not(.rt-cta-band--tint) { --rt-decor-ink: rgba(255, 255, 255, 0.22); --rt-decor-ink-strong: rgba(255, 255, 255, 0.3); --rt-decor-ink-fine: rgba(255, 255, 255, 0.32); --rt-decor-ink-soft: rgba(255, 255, 255, 0.18); --rt-decor-ink-accent: rgba(116, 232, 138, 0.3); } @supports (color: color-mix(in srgb, red, blue)) { :root { --rt-decor-ink: color-mix(in srgb, var(--rt-c-navy) 28%, transparent); --rt-decor-ink-strong: color-mix(in srgb, var(--rt-c-navy) 40%, transparent); --rt-decor-ink-fine: color-mix(in srgb, var(--rt-c-navy) 36%, transparent); --rt-decor-ink-soft: color-mix(in srgb, var(--rt-c-navy) 16%, transparent); --rt-decor-ink-accent: color-mix(in srgb, var(--rt-c-coral) 30%, transparent); } .rt-footer, .rt-section--inverse, .rt-teachers-band--nk, .rt-nk--dark, [data-rt-surface="inverse"], .rt-band--ink, .rt-band--deep, .rt-cta-band:not(.rt-cta-band--tint) { --rt-decor-ink: color-mix(in srgb, var(--rt-c-white) 22%, transparent); --rt-decor-ink-strong: color-mix(in srgb, var(--rt-c-white) 30%, transparent); --rt-decor-ink-fine: color-mix(in srgb, var(--rt-c-white) 32%, transparent); --rt-decor-ink-soft: color-mix(in srgb, var(--rt-c-white) 18%, transparent); --rt-decor-ink-accent: color-mix(in srgb, var(--rt-c-lime) 30%, transparent); } } /* Büyüme evreleri v3.1: türetilmiş tonlar (yukarıdaki :root yedeklerinin color-mix karşılıkları). */ @supports (color: color-mix(in srgb, red, blue)) { :root { --rt-growth-soil-hi: color-mix(in srgb, var(--rt-c-gold) 55%, var(--rt-c-white)); --rt-growth-soil-shade: color-mix(in srgb, var(--rt-c-gold-deep) 72%, var(--rt-c-navy-deep)); --rt-growth-leaf-hi: color-mix(in srgb, var(--rt-c-lime) 55%, var(--rt-c-white)); --rt-growth-leaf-shade: color-mix(in srgb, var(--rt-c-lime-deep) 78%, var(--rt-c-navy-deep)); --rt-growth-accent-hi: color-mix(in srgb, var(--rt-c-coral) 62%, var(--rt-c-white)); --rt-growth-accent-shade: color-mix(in srgb, var(--rt-c-coral-deep) 80%, var(--rt-c-navy-deep)); } } } /* ---------------------------------------------------------------- 3. PRIMITIVE — kuşak ritmi */ @layer rt.primitive { .rt-band { --rt-band-pad: clamp(3.5rem, 2.4rem + 3.2vw, 6rem); padding-block: var(--rt-band-pad); background: var(--rt-band-bg, var(--rt-band-paper)); color: var(--rt-band-fg, var(--rt-text-primary)); } .rt-band--tight { --rt-band-pad: clamp(2.5rem, 2rem + 1.8vw, 4rem); } .rt-band--paper { --rt-band-bg: var(--rt-band-paper); } .rt-band--sky { --rt-band-bg: var(--rt-band-sky); } .rt-band--mist { --rt-band-bg: var(--rt-band-mist); } .rt-band--head { --rt-band-bg: var(--rt-band-head); } .rt-band--blush { --rt-band-bg: var(--rt-band-blush); } .rt-band--honey { --rt-band-bg: var(--rt-band-honey); } .rt-band--ink { --rt-band-bg: var(--rt-band-ink); --rt-band-fg: var(--rt-text-on-inverse); } .rt-band--deep { --rt-band-bg: var(--rt-band-deep); --rt-band-fg: var(--rt-text-on-inverse); } .rt-band--ink h1, .rt-band--ink h2, .rt-band--ink h3, .rt-band--deep h1, .rt-band--deep h2, .rt-band--deep h3 { color: var(--rt-text-on-inverse); } .rt-band--paper + .rt-band--paper, .rt-band--sky + .rt-band--sky, .rt-band--mist + .rt-band--mist, .rt-band--head + .rt-band--head { border-block-start: 1px solid var(--rt-border-subtle); } } /* ---------------------------------------------------------------- 5. PAGE (rt.css'in SONUNA) */ @layer rt.page { /* Sohbet panelindeki kanal listesi
    sınıfını taşır (test taraması muafiyeti); /start ve İletişim'deki büyük kanal düğmesi düzeni burada panel ölçüsüne indirilir. */ .rt-fab .rt-channels { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--rt-sp-2); margin: 0; padding: 0; list-style: none; } /* KAMU KABUĞU ZEMİNİ: şeffaf bölümler (.rt-section) artık mist-deep üzerinde durur; beyaz (--surface) ile ΔL* 4,8. Token ana içerik kapsamında yeniden tanımlanır: sayfa zeminini okuyan her bileşen yeni zemine uyar. */ .rt-shell--marketing .rt-shell__main { --rt-surface-page: var(--rt-band-mist); background-color: var(--rt-band-mist); } /* İÇ SAYFA BAŞI (SPEC §13): sky-deep kuşağı (mist-deep liste ile ΔL* 5,4; beyaz bölümle 10,2). Özgüllük (0,1,0): ".rt-x .rt-page-head" gibi sayfa özel başlık kuralları (blog yazısı, 404, iletişim) ÜSTÜN kalır. Quiz başı eşleşmez. İç boşluk değişmez (eski kural). */ .rt-page-head:where(:not(.rt-page-head--quiz)) { background-color: var(--rt-band-head); } .rt-page-head__title { letter-spacing: var(--rt-ls-display); text-wrap: balance; } /* ORTAK sayfa başı etiketi (SPEC §13 tek etiket): başlıkla arasında sabit küçük boşluk. company.css'ten buraya taşındı (CONSISTENCY 20): orada kapsamsızdı ve bütün grupların başlarını değiştiriyordu; artık bilinçli, tek yerde tanımlı kuraldır. */ .rt-page-head__inner > .rt-tag { margin-block-end: var(--rt-sp-1); } /* Başlığın altındaki bölüm gökyüzü tonundaysa (Yorumlar: .rt-nk--tint) başlık kağıt beyazına döner (ΔL* 6,4). */ .rt-page-head:where(:not(.rt-page-head--quiz)):has(+ .rt-nk--tint) { background-color: var(--rt-band-paper); } /* REHBER KUŞAK SIRASI (SPEC §5): hero (sky) + "Bu sayfada" şeridi TEK kuşaktır (şerit beyazdı ve beyaz 01 bölümüne yapışıyordu) → 01 beyaz → 02 mist → 03 beyaz → SSS soru kuşağı (sky-deep; önceki beyaz 03 ile birleşiyordu ve sonraki mist ile zayıftı) → konu kartları → kapanış. */ .rt-guide-hero + .rt-guide-toc { background-color: var(--rt-surface-accent); } section[aria-labelledby="rt-guide-faq"] { background-color: var(--rt-band-head); } /* R1 (rehber düz bölümü sola yapışık, Owner I) artık YALNIZ rt.css içinde yerinde uygulanır: guides css-replacements.md G-R3. Buradaki geçici iki satırlık kopya çözüm adımında silindi (CONSISTENCY 4); aynı düzeltme üç yerde durmaz. */ /* KÖŞE SÜSÜ EV SAHİBİ (1024 altı): 96 px üst iç boşluk; köşe çıkartması 12–84 px arasında, metin 96 px'ten başlar. */ @media (max-width: 1023.98px) { .rt-shell__main .rt-decor-host--corner { padding-block-start: 6rem; } } /* KOYU KAPANIŞ BANDI + ALT BİLGİ: ikisi de lacivertti ve bitişikti; alt bilgi lacivert-derin zemindedir. */ .rt-footer { background: radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, 0.06), transparent 60%), var(--rt-band-deep); } /* SAYFA SONUNDA DÜĞMELER GİZLENMEZ (Owner G): alt bilgi sağda düğmelere yer ayırır. 960 altı: düğme 56 + kenar 16 + 16 nefes = 88 px. 960–1339: kenar 24 olduğu için 104 px; 1340 ve üstünde 1180'lik kapsayıcının sağ kenarı düğmenin solunda kalır (ölçüldü: 1280'de 6 px, 1024'te 56 px kesişiyordu). Eskiden 390'da yürüyüşün 7/15 adımında gizleniyordu. */ @media (max-width: 959.98px) { .rt-shell--marketing .rt-footer__body, .rt-shell--marketing .rt-footer__bottom-inner { padding-inline-end: 88px; } } @media (min-width: 960px) and (max-width: 1339.98px) { .rt-shell--marketing .rt-footer__body, .rt-shell--marketing .rt-footer__bottom-inner { padding-inline-end: 104px; } } /* SAYFA KOYU ŞERİTLE BİTER (Owner A, L): mobil deneme çubuğunun 72 px'lik boşluğu kabuktan siyah şeride taşınır; çubuk sayfa sonunda gizlenince altta açık lavanta şerit kalmıyor. Alt bilgisiz sayfada eski boşluk sürer. */ @media (max-width: 719px) { .rt:has(.rt-mobile-cta) .rt-shell:has(.rt-footer__bottom) { padding-block-end: 0; } .rt:has(.rt-mobile-cta) .rt-footer__bottom { padding-block-end: calc(var(--rt-sp-4) + 4.5rem + env(safe-area-inset-bottom, 0px)); } } } @layer rt.page { /* ============================================================================= ANA SAYFA ÜST YARI — TEMA V2 (home-top grubu, 2026-09-15, 2. tur). rt.css'in SONUNA eklenir (temel V2.1 bloklarından SONRA). Kapsam: üç adım · tanıtım filmi (baştan tasarım) · eğitim ekibi kuşağı. Hero sticker'ı css-replacements.md H1'dedir. Owner: "UX standartlarında premium bir site istiyorum. kusursuz olsun. marka teması olmalı" (A), "çok yazı var. çok göz yoruyor. düzensiz" (H), "nasıl işler kısmının tasarımı berbat. o ok işaretini de kaldır" (C), "asimetriyi temamızda kullanalım" (E), video oynat düğmesi parlak sarı daire + lacivert üçgen (F). KURALLAR: :is() virgül listesi yok, 50vw yok, hareket yalnız no-preference içinde, mantıksal özellikler, --rt-dir aynası, :focus-visible kuralı YAZILMAZ (a11y.single_focus_visible_outline_rule). BAĞIMLILIK: temel R0 token'ları (--rt-play-*, --rt-offset-*, --rt-dir, --rt-band-mist, --rt-f-display-lg) ve .rt-tag/.rt-play/ .rt-decor. R0'dan ÖNCE eklenirse gölgeler, sarı düğme ve süs sessizce kaybolur. ============================================================================= */ /* --- Ortak bölüm başı: TEK eğik etiket → başlık → tek cümle (SPEC §9 "never stack chips") --------------------------- */ .rt-home-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .rt-home-head .rt-tag { align-self: center; margin-block-end: 4px; } .rt-home-head .rt-nk-title { font-weight: var(--rt-fw-black); letter-spacing: var(--rt-ls-display); } /* .rt-home-head__lead KALDIRILDI (Owner 2026-09-18 ana sayfa sadeleştirmesi: "çıkarılacak bir şey kalmadığında bir şey kusursuzdur"): kullanan iki cümle (üç adım giriş cümlesi, "Size uygun ders biçimi" girişi) sayfadan çıktı. */ /* --- 1) ÜÇ ADIM ---------------------------------------------------------------------------------------------------- */ .rt-home-steps { padding-block: clamp(3rem, 2.2rem + 2.6vw, 4.75rem); } .rt-home-steps > .rt-nk__inner { gap: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); } /* Etiket: sayfanın TEK nötr eğik etiket görünümü (SPEC §9 altın tonu; lime yalnız yaş/kitle). Bölüme özel renk YOK (CONSISTENCY 8: ana sayfada üç ayrı etiket rengi vardı). */ /* 40rem sütun. 1024 px ve üstünde diskler başlangıç yönüne ≈ yarım disk + aralık kadar taşar: kartlar eksende, numaralar kenarda asılı durur (kontrollü asimetri, Owner E). 1024 px altında liste ORTALIDIR (R1 2026-09-15, 768'de ölçüldü: 640 px'lik liste 720 px'lik sütunda 33 px kayınca diskler kenar boşluğuna 7 px kalıyordu, ortalı başlığın altında sola yaslı okunuyordu). */ .rt-home-steps__list { inline-size: min(100%, 40rem); margin: 0; gap: 14px; } @media (min-width: 1024px) { .rt-home-steps__list { position: relative; inset-inline-start: -33px; } } .rt-home-steps__list .rt-steps__row { gap: 18px; align-items: stretch; } /* Numara diski 48 px: markanın büyüme renkleri, lacivert-derin kontur, 3 px sert gölge. KONTRAST: mercan diskteki "3" lacivert-derin ile 3,43:1'dir ve YALNIZ büyük metin olarak geçer (21 px / 800). Bu boyut hiçbir ekran genişliğinde 18,66 px kalının altına İNDİRİLMEZ. */ .rt-home-steps__list .rt-steps__num { flex: 0 0 48px; line-height: 58px; font-family: var(--rt-f-display); font-size: 1.3125rem; font-weight: var(--rt-fw-black); color: var(--rt-c-navy-deep); } .rt-home-steps__list .rt-steps__num::before { inset-block-start: 5px; inset-inline-start: 0; inline-size: 48px; block-size: 48px; box-sizing: border-box; border: 2px solid var(--rt-c-navy-deep); background: var(--rt-c-gold); box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-c-navy-deep); } .rt-home-steps__list .rt-steps__row--2 .rt-steps__num::before { background: var(--rt-c-lime); } .rt-home-steps__list .rt-steps__row--3 .rt-steps__num::before { background: var(--rt-c-coral); } /* Kalem çizgisi disk altından (56 px) bir sonraki diskin üstüne uzanır. Yol index.php'de satır içidir (tek yavaş kıvrım); düz, 3 px, yuvarlak uç. Çizim animasyonu rt.css .rt-steps__route kurallarındadır (drawOnView, reduce/scripting:none yedekli). */ .rt-home-steps__list .rt-steps__route { inset-inline-start: 8px; inset-block-start: 56px; inline-size: 32px; block-size: calc(100% - 38px); } .rt-home-steps__list .rt-steps__route path { stroke-width: 3px; stroke-dasharray: none; stroke-linecap: round; vector-effect: non-scaling-stroke; } .rt-home-steps__list .rt-steps__card { margin: 0; padding: 14px 20px; justify-content: center; gap: 3px; min-block-size: 58px; border: 0; border-radius: 20px; background: var(--rt-band-mist); } .rt-home-steps__list .rt-steps__title { font-size: 1.0625rem; font-weight: var(--rt-fw-black); line-height: 1.3; color: var(--rt-c-navy-deep); } .rt-home-steps__list .rt-steps__text { font-size: 0.9375rem; line-height: 1.45; color: var(--rt-text-secondary); } .rt-home-steps .rt-nk-cta { margin-block-start: 0; } @media (max-width: 599.98px) { .rt-home-steps__list .rt-steps__row { gap: 14px; } .rt-home-steps__list .rt-steps__card { padding: 12px 16px; } .rt-home-steps__list .rt-steps__title { font-size: 1rem; } } /* Yan süs (ders saati) 1280 px ve üstünde kartların bitişinden ≈120 px uzakta durur: dar şeridin dış kenarında 440 px'lik boş beyazın karşısında kopuk kalıyordu. Kutu 229 px = 181 px çizim + 2 × 24 px iç boşluk. Yeni süs EKLENMEZ. */ @media (min-width: 1280px) { .rt-home-steps > .rt-decor { inset-inline-end: auto; inset-inline-start: calc(50% + 20rem + 63px); inline-size: 229px; } } /* --- 2) TANITIM FİLMİ — SİNEMA KUŞAĞI (ok YOK; Owner C) ------------------------------------------------------------ */ .rt-home-film { padding-block: clamp(3rem, 2.2rem + 2.6vw, 4.75rem); } .rt-home-film__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "media"; align-items: center; gap: 36px; } .rt-home-film__copy { grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: start; } /* Tek sütunda film 40rem ile sınırlı: 768 px'te 720 px'lik kart kuşağı 883 px'e uzatıyordu (ölçüldü). */ .rt-home-film__media { grid-area: media; position: relative; min-inline-size: 0; max-inline-size: 40rem; } @media (min-width: 960px) { .rt-home-film__media { max-inline-size: none; } .rt-home-film__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "media copy"; gap: clamp(48px, 1rem + 4vw, 88px); } } .rt-home-film__copy .rt-tag { margin-block-end: 4px; } /* Temel ölçekteki bölüm başlığı (26 → 38 px): nk-title 48 px'i 1024'te dar sütunda üç satıra bölüyordu (ölçüldü). */ .rt-home-film__title { max-inline-size: 18ch; font-size: var(--rt-f-display-lg); font-weight: var(--rt-fw-black); letter-spacing: var(--rt-ls-display); line-height: var(--rt-lh-display); text-wrap: balance; } @media (min-width: 1200px) { .rt-home-film__title { font-size: clamp(2.375rem, 1.2rem + 1.6vw, 2.75rem); } } .rt-home-film__lead { margin: 0; max-inline-size: 38ch; font-size: 1.125rem; line-height: 1.5; color: var(--rt-text-secondary); } .rt-home-film__facts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .rt-home-film__fact { display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: var(--rt-fw-bold); line-height: 1.35; color: var(--rt-c-navy-deep); } /* Simge kutusu DEKORATİFTİR: kenarlıksız yumuşak kare, iki satırda aynı ton. 40 px konturlu daire yüzen yukarı/sohbet düğmelerine benzeyip tıklanabilir okunuyordu. */ .rt-home-film__fact-icon { display: inline-grid; place-items: center; flex: none; inline-size: 36px; block-size: 36px; border-radius: 12px; background: var(--rt-c-green-tint); color: var(--rt-c-navy-deep); } .rt-home-film__fact-icon .rt-icon { inline-size: 20px; block-size: 20px; stroke-width: 2.2; } /* Film kartı: eski altın degrade çerçeve + yumuşak gölge + nabız halkaları yerine temanın dokunsal dili. Bölümün TEK vurgusu taşan lime katmandır (köşe ışınları 2. turda kalktı). Odak halkası temanın tek :focus-visible kuralıdır: 3 px lacivert, 2 px dışarıda; lime katmanın üstünde ve sky zeminde görünür (shots/after/tr-film-focus-1440.png). */ .rt-home-film .rt-video--brand { align-items: stretch; gap: 10px; } .rt-home-film .rt-video--brand .rt-video__facade { inline-size: 100%; max-inline-size: none; margin: 0; padding: 0; border: 2px solid var(--rt-c-navy-deep); border-radius: 26px; background: var(--rt-c-navy-deep); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-c-lime); transition: none; } .rt-home-film .rt-video--brand .rt-video__facade:hover { transform: none; box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-c-lime); } @media (prefers-reduced-motion: no-preference) { .rt-home-film .rt-video--brand .rt-video__facade { transition: transform var(--rt-mo-base) var(--rt-mo-ease), box-shadow var(--rt-mo-base) var(--rt-mo-ease); } .rt-home-film .rt-video--brand .rt-video__facade:hover { transform: translate(calc(-2px * var(--rt-dir)), -2px); box-shadow: calc(9px * var(--rt-dir)) 9px 0 0 var(--rt-c-lime); } } /* Kapak: temiz lacivert-derin zemin ve başlangıç üst köşede TEK yumuşak lime ışık. Mercan ışık lacivertte kahverengi-mora dönüyordu (kaldırıldı). Filmden gerçek bir kare (yerel dosya) gelince bu zeminin önüne konur: REQUESTS.md "poster". */ .rt-home-film .rt-video__cover { border-radius: 24px; padding-block-start: 12%; background: radial-gradient(75% 95% at 10% 0%, rgba(116, 232, 138, 0.17), transparent 64%), var(--rt-c-navy-deep); } [dir="rtl"] .rt-home-film .rt-video__cover { background: radial-gradient(75% 95% at 90% 0%, rgba(116, 232, 138, 0.17), transparent 64%), var(--rt-c-navy-deep); } .rt-home-film .rt-video__cover-logo { inline-size: min(30%, 210px); } /* position:absolute burada AÇIKÇA yazılır: .rt-play ileride position:relative alırsa marka filmi düğmesi yerinden kaymaz. */ .rt-home-film .rt-video--brand .rt-video__play.rt-play { position: absolute; inset: 66% auto auto 50%; transform: translate(-50%, -50%); inline-size: 84px; block-size: 84px; border: 3px solid var(--rt-play-ink); background: var(--rt-play-bg); color: var(--rt-play-ink); box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-c-lime); } .rt-home-film .rt-video--brand .rt-video__play.rt-play .rt-icon { inline-size: 64px; block-size: 64px; margin-inline-start: 5px; } /* Nabız halkaları kaldırıldı: sonsuz dikkat hareketi SPEC §15'te yasak ("infinite CTA bouncing"). */ .rt-home-film .rt-video--brand .rt-video__play::before, .rt-home-film .rt-video--brand .rt-video__play::after { display: none; animation: none; } /* SIRA ÖNEMLİ: bu kural bileşendeki scale(1.04) hover'ından SONRA gelmelidir (dosyanın sonuna ekle); hareketi azalt tercihinde düğme ölçek zıplaması yapmaz. */ .rt-home-film .rt-video--brand .rt-video__facade:hover .rt-video__play { transform: translate(-50%, -50%); } @media (prefers-reduced-motion: no-preference) { .rt-home-film .rt-video--brand .rt-video__play.rt-play { transition: transform var(--rt-mo-base) var(--rt-mo-ease); } .rt-home-film .rt-video--brand .rt-video__facade:hover .rt-video__play { transform: translate(-50%, -50%) scale(1.06); } } .rt-home-film .rt-video--brand .rt-video__note { text-align: start; color: var(--rt-text-secondary); padding-inline-start: 4px; } @media (max-width: 599.98px) { .rt-home-film .rt-video--brand .rt-video__play.rt-play { inline-size: 64px; block-size: 64px; inset-block-start: 68%; } .rt-home-film .rt-video--brand .rt-video__play.rt-play .rt-icon { inline-size: 50px; block-size: 50px; } .rt-home-film .rt-video--brand .rt-video__facade { border-radius: 20px; } .rt-home-film .rt-video__cover { border-radius: 18px; } } /* --- 2b) PORTRE VİDEO KAPAĞI (öğretmen profili) — sitede TEK oynat görünümü (CONSISTENCY 10, teachers T4) ------------ Owner F: her video oynat düğmesi parlak sarı daire + lacivert üçgendir. _c/video-facade.php iki kapak türünde de .rt-play basar; burada portre kapağındaki eski yazılı hap düğme (rt.css rt.domain .rt-video__play) alt başlangıç köşesinde 64 px daireye döner. Yazı ekran okuyucu adı olarak kalır, görsel olarak gizlenir (marka filmindeki desenin aynısı). */ .rt-video:not(.rt-video--brand) .rt-video__play.rt-play { position: absolute; z-index: 1; inset-block: auto var(--rt-sp-4); inset-inline: var(--rt-sp-4) auto; display: inline-grid; place-items: center; gap: 0; margin: 0; padding: 0; inline-size: 64px; block-size: 64px; min-block-size: 0; border: 3px solid var(--rt-play-ink); border-radius: 50%; background: var(--rt-play-bg); color: var(--rt-play-ink); box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-play-ink); } .rt-video:not(.rt-video--brand) .rt-video__play.rt-play .rt-icon { inline-size: 48px; block-size: 48px; margin-inline-start: 4px; } .rt-video:not(.rt-video--brand) .rt-video__play.rt-play .rt-icon circle { display: none; } .rt-video:not(.rt-video--brand) .rt-video__play.rt-play > span { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rt-video:not(.rt-video--brand) .rt-video__facade:hover .rt-video__play.rt-play { background: var(--rt-play-bg); } /* --- 3) EĞİTİM EKİBİ KUŞAĞI — kompakt baş, kanıt satırları, sarı oynat ---------------------------------------------- */ .rt-teachers-band--nk .rt-teachers-band__inner { gap: clamp(28px, 1.2rem + 1.4vw, 40px); padding-block: clamp(56px, 2.6rem + 2.2vw, 80px) clamp(56px, 2.6rem + 1.6vw, 72px); } .rt-teachers-band--nk .rt-teachers-band__head { gap: 22px; } .rt-teachers-band--nk .rt-teachers-band__title { font-weight: var(--rt-fw-black); letter-spacing: var(--rt-ls-display); } .rt-teachers-band--nk .rt-teachers-band__lead { max-inline-size: 56rem; gap: 20px; align-items: center; } .rt-teachers-band--nk .rt-teachers-band__lead p { max-inline-size: 42rem; font-size: 1.0625rem; line-height: 1.55; text-wrap: balance; color: var(--rt-text-on-inverse); } .rt-home-proof { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; inline-size: 100%; } .rt-home-proof__item { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; padding-block: 4px; padding-inline: 6px 16px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: var(--rt-rd-pill); background: rgba(255, 255, 255, 0.08); font-size: 0.9375rem; font-weight: var(--rt-fw-bold); line-height: 1.25; color: var(--rt-text-on-inverse); text-align: start; } /* 720 px'ten itibaren üç kanıt TEK SIRADA (içerik genişliğinde üç sütun, ortalı): 768'de 2 + 1 bölünüp ortada yetim bir çip kalıyordu. Kısa üçüncü kanıt ("Öğretmen Akademisi") ile 14 px'te 768'de sığar (ölçüldü). */ @media (min-width: 720px) { .rt-home-proof { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 10px; inline-size: auto; } .rt-home-proof__item { font-size: 0.875rem; padding-inline-end: 18px; } } .rt-home-proof__icon { display: inline-grid; place-items: center; flex: none; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--rt-c-lime); color: var(--rt-c-navy-deep); } .rt-home-proof__icon .rt-icon { inline-size: 16px; block-size: 16px; stroke-width: 2.8; } @media (max-width: 719.98px) { .rt-teachers-band--nk .rt-teachers-band__head { gap: 18px; } .rt-teachers-band--nk .rt-teachers-band__lead { gap: 14px; } .rt-teachers-band--nk .rt-teachers-band__lead p { font-size: 1rem; line-height: 1.5; } } /* "Merhaba!" balonu başlığın başlangıç yanında durur (bölümün tek eşlikçisi); eğim RTL'de aynalanır. */ .rt-teachers-band--nk .rt-teachers-band__talk { inline-size: 170px; block-size: 114px; inset-inline-start: max(16px, calc(50% - 570px)); inset-block-start: 118px; transform: rotate(calc(-6deg * var(--rt-dir))); } /* Ray okları kartın fotoğrafına binmez. ≥ 1280 px: kapsayıcının dışındaki boşlukta (kartla 12 px aralık, ekran kenarına ≥ 18 px). 720–1279 px: kenarda yer yok, oklar rayın altında ortalı bir kontrol sırasıdır (yorum rayıyla aynı dil). Hedef 44 px kalır. Telefonda ok ikinci (yarım görünen) kartın üstündedir, ilk karta binmez. */ @media (min-width: 1280px) { .rt-teachers-band--nk .rt-rail-btn--next { inset-inline-end: -56px; } .rt-teachers-band--nk .rt-rail-btn--prev { inset-inline-start: -56px; } } @media (min-width: 720px) and (max-width: 1279.98px) { .rt-teachers-band--nk .rt-team-rail { padding-block-end: 60px; } .rt-teachers-band--nk .rt-rail-btn { inset-block: auto 0; } .rt-teachers-band--nk .rt-rail-btn--prev { inset-inline-start: calc(50% - 52px); } .rt-teachers-band--nk .rt-rail-btn--next { inset-inline-end: calc(50% - 52px); } } /* Oynat işareti Novakid gibi PARLAK SARI DAİRE + lacivert üçgen (Owner F); yüzü örtmesin diye alt başlangıç köşesinde. */ .rt-teachers-band--nk .rt-edu-card .rt-edu-card__play { inset-block: auto 14px; inset-inline: 14px auto; margin: 0; transform: none; inline-size: 52px; block-size: 52px; border-radius: 50%; border: 3px solid var(--rt-play-ink); background: var(--rt-play-bg); color: var(--rt-play-ink); box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-play-ink); } .rt-teachers-band--nk .rt-edu-card__play svg { inline-size: 22px; block-size: 22px; margin-inline-start: 3px; } .rt-teachers-band--nk .rt-edu-card--compact:hover .rt-edu-card__play { background: var(--rt-play-bg); } .rt-teachers-band--nk .rt-edu-card--compact:hover .rt-edu-card__play svg { transform: none; } @media (prefers-reduced-motion: no-preference) { .rt-teachers-band--nk .rt-edu-card--compact .rt-edu-card__play { transition: transform var(--rt-mo-base) var(--rt-mo-ease); } .rt-teachers-band--nk .rt-edu-card--compact:hover .rt-edu-card__play { transform: scale(1.08); } } /* Kartlara ince beyaz kenar + hover'da sert lime gölge: fotoğraflar koyu zeminde çerçevesiz "yapıştırılmış" duruyordu. outline burada YAZILMAZ (odak .rt-edu-card__cover bağlantısındadır; tek :focus-visible kuralı çizer). */ .rt-teachers-band--nk .rt-edu-card--compact { border: 2px solid rgba(255, 255, 255, 0.16); } @media (prefers-reduced-motion: no-preference) { .rt-teachers-band--nk .rt-edu-card--compact { transition: transform var(--rt-mo-base) var(--rt-mo-ease), box-shadow var(--rt-mo-base) var(--rt-mo-ease); } .rt-teachers-band--nk .rt-edu-card--compact:hover { transform: translate(calc(-2px * var(--rt-dir)), -2px); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-c-lime); } } } /* ============================================================================= HOME-BOTTOM — Tema V2.1 ana sayfa alt yarısı: aile yorumları → ücretler → yaş rehberi → ihtiyaç rehberi → SSS → kapanış. UYGULAMA: bu blok rt.css'in EN SONUNA eklenir (foundation §5 PAGE bloğundan ve home-top.css'ten sonra). Yalnız rt.page. Kurallar (tests/test_rt_foundation.py): virgüllü :is() yok, görüntü genişliğine dayalı kenardan kenara hile yok, yeni odak halkası kuralı yok, hareket yalnız prefers-reduced-motion: no-preference içinde, eğim ve sert gölge --rt-dir ile RTL'de aynalanır. Renkler token'dır (panel ve koyu tema aynı token'ları okur, Owner M); bu blokta ham renk YOKTUR. Kapsam: her kural ana sayfaya özgü bir sınıfla başlar (.rt-home-reviews, .rt-home-prices, .rt-home-faq, .rt-cta-band--panel) ya da ana sayfa rehberlerinin başlık kimliğiyle (aria-labelledby) sınırlıdır; /yorumlar ve diğer sayfaların .rt-nk--reviews / .rt-cta-band / .rt-topic-card görünümü DEĞİŞMEZ. Belge: scratchpad v2/home-bottom/CHANGES.md ============================================================================= */ @layer rt.page { /* ---------------------------------------------------------------- 1) AİLE YORUMLARI (head kuşak) Zemin HEAD (--rt-band-head, sky-deep): iki komşusu da beyaz (ödüller, ücretler) ve sky ile adım yalnız ΔL* 6,4'tü; head ile iki yana ΔL* 10,2 (Owner L "geçişler belirgin olsun"). Beyaz balonlar da daha net ayrışır. SPEC §5 izinli çift: paper ↔ head. */ .rt-home-reviews { background-color: var(--rt-band-head); } .rt-home-reviews .rt-nk__inner { gap: var(--rt-sp-3); } .rt-home-reviews__tag { align-self: center; margin: 0; } .rt-home-reviews .rt-quote-rail { margin-block-start: var(--rt-sp-2); } .rt-home-reviews .rt-quote-rail .rt-team-rail__track { padding: 12px 10px 26px; scroll-padding-inline: 10px; } .rt-home-reviews .rt-quote-rail .rt-quote { gap: 14px; } /* Balon: yumuşak gölge yerine 2 px kontur (sakin); üzerine gelince lacivert kontur + 6 px sert gölge (SPEC §1.4, §10). */ .rt-home-reviews .rt-quote-rail .rt-quote__bubble { gap: 12px; padding: 24px 26px 22px; border-radius: 26px; border: 2px solid var(--rt-c-line); box-shadow: none; } .rt-home-reviews .rt-quote-rail .rt-quote__bubble::before { inset-block: auto -10px; inset-inline-start: 34px; border-block-end: 2px solid var(--rt-c-line); border-inline-end: 2px solid var(--rt-c-line); } .rt-home-reviews .rt-quote-rail .rt-quote__text { font-size: 1.0625rem; line-height: 1.65; } .rt-home-reviews .rt-quote-rail .rt-quotes__item .rt-quote:hover .rt-quote__bubble, .rt-home-reviews .rt-quote-rail .rt-quotes__item .rt-quote:focus-within .rt-quote__bubble { transform: none; border-color: var(--rt-c-navy-deep); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-offset-ink); } .rt-home-reviews .rt-quote-rail .rt-quotes__item .rt-quote:hover .rt-quote__bubble::before, .rt-home-reviews .rt-quote-rail .rt-quotes__item .rt-quote:focus-within .rt-quote__bubble::before { border-color: var(--rt-c-navy-deep); } @media (prefers-reduced-motion: no-preference) { .rt-home-reviews .rt-quote-rail .rt-quotes__item .rt-quote:hover .rt-quote__bubble { transform: translate(calc(-2px * var(--rt-dir)), -2px); } } /* KISA SÖZ (başlık + metin ≤ 90 grafem, _c/review-quote.php feature=true) — ALINTI KARTI (R1 R5, 2026-09-15). Eşit boydaki kartta kısa söz 312 px'lik balonun üstünde 29 px'lik tek satırdı ve altı boş kalıyordu (1440 px'te ölçüldü). Söz artık boş alanı BİLİNÇLİ doldurur: yıldızların altındaki alanda dikeyde ortalanan büyük söz (display yazı, 22–26 px / 800, lacivert-derin, dengeli satır) ve alt bitiş köşesinde büyüyen soluk marka tırnağı; alt iç pay sözü tırnaktan ayırır. Eski not ("dikey ortalama 70 px boşluk bırakıyordu") 1.25rem / 600 gövde yazısı içindi; büyük alıntı yazısında boşluk kompozisyonun parçasıdır. Başlık varsa başlık büyük söz satırıdır, metin altında normal gövde yazısıyla durur. Hangi yorumların gösterildiği DEĞİŞMEZ (R2 Owner kararıdır); yalnız görünüm değişir, metin aynen yazılır. */ .rt-home-reviews .rt-quote__bubble--short .rt-quote__text { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding-block-end: 48px; } .rt-home-reviews .rt-quote__bubble--short .rt-quote__text > p { margin: 0; } .rt-home-reviews .rt-quote__bubble--short .rt-quote__text > p:first-child { font-family: var(--rt-f-display); font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.625rem); font-weight: var(--rt-fw-black); line-height: 1.3; letter-spacing: -0.01em; color: var(--rt-c-navy-deep); text-wrap: balance; } .rt-home-reviews .rt-quote__bubble--short .rt-quote__title + [data-rt-quote-text] { font-size: 1.0625rem; font-weight: 400; line-height: 1.6; color: var(--rt-text-primary); } .rt-home-reviews .rt-quote__qmark { position: absolute; z-index: 0; inset-block-end: 18px; inset-inline-end: 22px; inline-size: 84px; block-size: 63px; max-inline-size: none; opacity: 0.34; pointer-events: none; /* Ailenin açılış tırnağı (66) 180° döner: sözün SONUNDA kapanış tırnağı (99) okunur. Durağan; hareket değil. */ transform: rotate(180deg); } /* Oklar: sert gölgeli lacivert daire (tema düğme dili), içten dolan lime hareket korunur. */ .rt-home-reviews .rt-rail-controls { margin-block-start: 6px; } .rt-home-reviews .rt-rail-controls .rt-rail-btn { border: 2px solid var(--rt-c-navy-deep); box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-offset-ink); } /* Not + "Tüm yorumlar" tek satır. */ .rt-home-reviews__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 20px; margin-block-start: var(--rt-sp-2); } .rt-home-reviews__note { margin: 0; max-inline-size: 60ch; } .rt-home-reviews__foot .rt-link-arrow { min-block-size: var(--rt-target-min); color: var(--rt-c-navy-deep); } @media (min-width: 900px) { .rt-home-reviews__note { max-inline-size: none; } } @media (max-width: 719.98px) { .rt-home-reviews .rt-quote-rail .rt-quote__bubble { padding: 20px 20px 18px; border-radius: 22px; } .rt-home-reviews .rt-quote-rail .rt-quote__text { font-size: 1rem; } .rt-home-reviews .rt-quote__bubble--short .rt-quote__text { padding-block-end: 40px; } .rt-home-reviews .rt-quote__bubble--short .rt-quote__text > p:first-child { font-size: 1.3125rem; } .rt-home-reviews .rt-quote__qmark { inset-block-end: 14px; inset-inline-end: 16px; inline-size: 64px; block-size: 48px; } } /* ---------------------------------------------------------------- 2) ÜCRETLER (paper kuşak) */ .rt-home-prices { background-color: var(--rt-band-paper); } .rt-home-prices .rt-nk-sub { max-inline-size: 52ch; } .rt-home-prices .rt-prices { inline-size: min(100%, 720px); gap: 12px; margin-block-start: 34px; } .rt-home-prices .rt-price { align-items: center; gap: var(--rt-sp-4); padding: 18px 22px; border: 2px solid transparent; border-radius: 18px; } /* HEDİYE satırları: BEYAZ yüzey + 2 px hediye rengi çerçeve. Bal zeminde altın rozet zayıf ayrışıyordu (figür/zemin); beyazda altın rozet ve lacivert gölgesi öne çıkar. Çerçeve rozetle aynı token'ı okur: rozet rengi Owner kararıyla değişirse (REQUESTS 3) çerçeve de izler. Satırlar arası 22 px: 20 px taşan rozet üst satırın yazısına değmez. */ .rt-home-prices .rt-price--gift { background: var(--rt-band-paper); border-color: var(--rt-gift-bg); } .rt-home-prices .rt-prices > .rt-price--gift + .rt-price--gift { margin-block-start: 22px; } /* Ücretli grup: mist zemin; iki grup arasında belirgin nefes. */ .rt-home-prices .rt-price--paid { background: var(--rt-band-mist); border-color: var(--rt-c-line); } .rt-home-prices .rt-prices > .rt-price--gift + .rt-price--paid { margin-block-start: 28px; } .rt-home-prices .rt-price__main { gap: 3px; min-inline-size: 0; } .rt-home-prices .rt-price__title { font-size: 1.0625rem; line-height: 1.3; font-weight: var(--rt-fw-black); color: var(--rt-c-navy-deep); } .rt-home-prices .rt-price__note { line-height: 1.4; } .rt-home-prices .rt-price__side { gap: 2px; } .rt-home-prices .rt-price--gift .rt-price__side { padding-block-start: 14px; } .rt-home-prices .rt-price--gift .rt-price__value { font-weight: var(--rt-fw-bold); color: var(--rt-c-navy-deep); } .rt-home-prices .rt-price--paid .rt-price__value { font-size: var(--rt-f-sm); line-height: 1.2; font-weight: var(--rt-fw-bold); color: var(--rt-c-navy); } /* Tutar: görüntü yazısı. Metin RtRules'tan birebir; yalnız "$sayı" parçası büyür. */ .rt-home-prices .rt-price__amount { font-family: var(--rt-f-display); font-size: var(--rt-f-display-md); font-weight: var(--rt-fw-black); letter-spacing: -0.01em; color: var(--rt-c-navy-deep); font-variant-numeric: tabular-nums; } .rt-home-prices .rt-price__meta { line-height: 1.35; } /* Rozet grubu (konfeti + HEDİYE): tema eğimi token'dan. transform-origin taban kuraldan gelir ve DOĞRU aynadır: LTR 100% 50% (rozet bitiş kenarına asılı), RTL 0 50% (bitiş kenarı RTL'de soldadır); açı --rt-dir ile −6°'ye döner. */ .rt-home-prices .rt-price__tag { inset-block-start: -20px; transform: rotate(calc(var(--rt-tilt-badge) * var(--rt-dir))); } /* Konfeti boyu canlı Owner kuralındadır (rt.css .rt-price__confetti 1,75rem; telefonda 1,5rem) — CSS-MERGE.md D7-1. */ /* YAN SÜS — açılmış hediye kutusu (gift-box, SPEC §8.5 "yalnız gerçek HEDİYE yanında"): başlangıç kenarında, HEDİYE satırlarının hizasında. ≥1200 px: 1024–1199'da şerit 142–220 px'e iniyor ve çizim açıklama cümlesine sıkışıyordu. 1024 altında köşe çıkartmasıdır (foundation kuralı; buradaki konum kuralı yalnız ≥1200'de geçerlidir). */ @media (min-width: 1024px) and (max-width: 1199.98px) { .rt-home-prices > .rt-decor--m-gift-box { display: none; } } @media (min-width: 1200px) { .rt-home-prices > .rt-decor--m-gift-box { inset-block-start: clamp(12rem, 9rem + 5vw, 15.5rem); } } @media (max-width: 599.98px) { .rt-home-prices .rt-prices { margin-block-start: 30px; } .rt-home-prices .rt-price { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; padding: 16px 18px; } .rt-home-prices .rt-price--gift { padding-block-start: 26px; } .rt-home-prices .rt-price__main { flex: 1 1 100%; } .rt-home-prices .rt-price__side { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; text-align: start; } .rt-home-prices .rt-price--gift .rt-price__side { padding-block-start: 0; } } /* ---------------------------------------------------------------- 3) YAŞ REHBERİ — BÜYÜME YOLU (honey kuşak) Zemin BAL: toprak ve kök rengi. Beyaz ücretler ile koyu SSS arasında (2026-09-18'e kadar beyaz ihtiyaç kuşağı) lavanta yerine sıcak ton (Owner L "geçişler belirgin olsun"; ölçü: ΔL* 4,8 + ΔE 11 iki komşuya da, sky ↔ mist gibi aynı aile değil). Evre karoları BEYAZ + 2 px lacivert kontur; karonun çevresinde zemin rengi halka, arkadan geçen KÖK ÇİZGİSİNİ keser. Kök çizgisi token rengiyle boyanan bir maskedir (deco/growth-route.svg, düz dalgalı; kesik değil) ve karo ölçüsünden HESAPLANIR: sihirli sayı yok (--rt-age-*). Kartlar yüzeysizdir: yol ve karolar okunur; üzerine gelince ya da odakta kart beyaz yüzeye çıkar (:focus-within odak halkasının yanında aynı yüzeyi gösterir; yeni odak halkası kuralı değil). 2026-10-03 (Owner 23:3x): karodaki evre çizimi okulun illüstratörünün tarzındadır (img.rt-topic-card__art, 224 px webp); karo bu yüzden büyüdü: telefon 48 → 68, tablet 60 → 84, masaüstü 80 → 112 px. Çizim karonun iç kutusunu doldurur. */ section[aria-labelledby="rt-home-age-guide"] { --rt-age-tile: 68px; --rt-age-ring: 5px; --rt-age-pad-y: 8px; --rt-age-pad-x: 12px; --rt-age-gap: 6px; --rt-age-route: 24px; background-color: var(--rt-band-honey); } section[aria-labelledby="rt-home-age-guide"] .rt-topic-grid { position: relative; isolation: isolate; gap: var(--rt-age-gap); } section[aria-labelledby="rt-home-age-guide"] .rt-topic-grid::before { content: ""; position: absolute; z-index: -1; pointer-events: none; background-color: var(--rt-growth-soil); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: 0 0; mask-position: 0 0; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card { border: 2px solid transparent; border-radius: 18px; background: transparent; box-shadow: none; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card .rt-topic-card__icon--growth { box-sizing: border-box; inline-size: var(--rt-age-tile); block-size: var(--rt-age-tile); border-radius: 16px; background: var(--rt-band-paper); border: 2px solid var(--rt-c-navy-deep); overflow: hidden; box-shadow: 0 0 0 var(--rt-age-ring) var(--rt-band-honey); } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card .rt-topic-card__icon--growth .rt-growth { inline-size: calc(var(--rt-age-tile) - 6px); block-size: calc(var(--rt-age-tile) - 6px); } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card .rt-topic-card__icon--growth .rt-topic-card__art { display: block; inline-size: calc(var(--rt-age-tile) - 4px); block-size: calc(var(--rt-age-tile) - 4px); max-inline-size: none; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card h3 { margin: 0; color: var(--rt-c-navy-deep); } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card p { margin: 0; color: var(--rt-text-primary); } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card__action { margin: 0; padding: 0; color: var(--rt-c-navy-deep); } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card__action-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card:hover, section[aria-labelledby="rt-home-age-guide"] .rt-topic-card:focus-within { background: var(--rt-band-paper); border-color: var(--rt-c-navy-deep); box-shadow: none; text-decoration: none; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card:hover .rt-topic-card__icon--growth, section[aria-labelledby="rt-home-age-guide"] .rt-topic-card:focus-within .rt-topic-card__icon--growth { box-shadow: 0 0 0 var(--rt-age-ring) var(--rt-band-paper); } @media (prefers-reduced-motion: no-preference) { section[aria-labelledby="rt-home-age-guide"] .rt-topic-card { transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card:hover { transform: translate(calc(-2px * var(--rt-dir)), -2px); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-offset-ink); } } /* ≥1100 px: altı evre TEK SIRADA; yatay kök çizgisi birinci karonun merkezinden altıncının merkezine, karo merkez hizasında. Ok, başlığın hemen yanında satır içidir (ayrı ok satırı yok). */ @media (min-width: 1100px) { section[aria-labelledby="rt-home-age-guide"] { --rt-age-tile: 112px; --rt-age-ring: 8px; --rt-age-pad-y: 18px; --rt-age-pad-x: 8px; --rt-age-gap: 12px; --rt-age-route: 28px; padding-block-end: clamp(3rem, 1.5rem + 2vw, 4rem); } section[aria-labelledby="rt-home-age-guide"] .rt-topic-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } section[aria-labelledby="rt-home-age-guide"] .rt-topic-grid::before { inset-inline: calc((100% - 5 * var(--rt-age-gap)) / 12); inset-block-start: calc(2px + var(--rt-age-pad-y) + var(--rt-age-tile) / 2 - var(--rt-age-route) / 2); block-size: var(--rt-age-route); -webkit-mask-image: url("deco/growth-route.svg"); mask-image: url("deco/growth-route.svg"); } /* Satırlar AÇIK yazılır: tam genişlikli açıklama otomatik yerleşimde oku dördüncü satıra itiyordu. */ section[aria-labelledby="rt-home-age-guide"] .rt-topic-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; justify-items: center; column-gap: 6px; row-gap: 6px; padding: var(--rt-age-pad-y) var(--rt-age-pad-x) 16px; border-radius: 22px; text-align: center; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card .rt-topic-card__icon--growth { grid-column: 1 / -1; grid-row: 1; border-radius: 28px; margin-block-end: 8px; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card .rt-topic-card__icon--growth .rt-growth { inline-size: calc(var(--rt-age-tile) - 10px); block-size: calc(var(--rt-age-tile) - 10px); } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card h3 { grid-column: 2; grid-row: 2; font-size: 1rem; line-height: 1.3; text-wrap: balance; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card__action { grid-column: 3; grid-row: 2; align-self: center; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card__action .rt-icon { inline-size: 18px; block-size: 18px; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card p { grid-column: 1 / -1; grid-row: 3; font-size: var(--rt-f-sm); line-height: 1.5; } } /* 1100 px altı: aynı yol DİKEY bir zaman çizgisidir. Tek sütun; satırlar eşit yükseklikte (1fr) olduğu için kök çizgisi ilk ve son karo merkezleri arasında hesaplanır. Karo halkası YOK: kısa aralıklarda halka çizgiyi parçalara bölüp kesik çizgi gibi gösteriyordu; çizgi karodan karoya kesintisiz bir filiz gibi uzanır. Kart ızgarası dört satırdır (1fr · başlık · açıklama · 1fr): karo iki içerik satırından yüksek olduğunda fazlalık uç satırlara gider, başlık ile açıklama ayrılmaz (align-content tek başına yetmiyordu: kapsayan karo iç satırları büyütüyordu). */ @media (max-width: 1099.98px) { section[aria-labelledby="rt-home-age-guide"] { --rt-age-ring: 0px; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; max-inline-size: 36rem; margin-inline: auto; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-grid::before { inset-block: calc((100% - 5 * var(--rt-age-gap)) / 12); inset-inline-start: calc(2px + var(--rt-age-pad-x) + var(--rt-age-tile) / 2 - var(--rt-age-route) / 2); inline-size: var(--rt-age-route); -webkit-mask-image: url("deco/growth-route-v.svg"); mask-image: url("deco/growth-route-v.svg"); } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card { display: grid; grid-template-columns: var(--rt-age-tile) minmax(0, 1fr) 20px; grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); align-content: center; align-items: center; column-gap: 16px; row-gap: 1px; padding: var(--rt-age-pad-y) var(--rt-age-pad-x); text-align: start; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card .rt-topic-card__icon--growth { grid-column: 1; grid-row: 1 / -1; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card h3 { grid-column: 2; grid-row: 2; font-size: var(--rt-f-md); line-height: 1.3; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card p { grid-column: 2; grid-row: 3; font-size: var(--rt-f-sm); line-height: 1.45; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card__action { grid-column: 3; grid-row: 1 / -1; } } @media (min-width: 600px) and (max-width: 1099.98px) { /* Tablette satırlar tek satırlık açıklamayla kısadır: iç boşluk ve aralık, karolar arasında görünen kök parçasını ~46 px'e çıkarır; daha kısa parça kesik çizgi gibi okunuyordu. */ section[aria-labelledby="rt-home-age-guide"] { --rt-age-tile: 84px; --rt-age-pad-y: 16px; --rt-age-pad-x: 14px; --rt-age-gap: 10px; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card .rt-topic-card__icon--growth { border-radius: 20px; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-card .rt-topic-card__icon--growth .rt-growth { inline-size: calc(var(--rt-age-tile) - 8px); block-size: calc(var(--rt-age-tile) - 8px); } } /* ---------------------------------------------------------------- 4) İHTİYAÇ REHBERİ — ANA SAYFADAN KALDIRILDI Owner 2026-09-18 (birebir: "çıkarılacak bir şey kalmadığında bir şey kusursuzdur"): "Türkçede kendi yolunu bulsun." altı hedef kartı ana sayfadan çıktı; yaş kartları kalır. Aynı kartlar Nasıl işler sayfasında kendi (site-hub compact) stiliyle durur. Buradaki section[aria-labelledby="rt-home-needs-guide"] kuralları silindi; kopyası var/removed-home-sections-2026-09-18/removed-styles-and-script.txt içindedir. */ /* ---------------------------------------------------------------- 5) SSS (ink kuşak) — koyu yüzey token'ları */ .rt-home-faq { background-color: var(--rt-band-ink); } .rt-home-faq .rt-nk__inner { gap: var(--rt-sp-5); } .rt-home-faq .rt-faq--nk { inline-size: min(100%, 820px); gap: 10px; } .rt-home-faq .rt-faq--nk .rt-faq__item { padding-block: 6px; padding-inline: 26px 10px; border: 2px solid var(--rt-border-on-inverse); border-radius: 30px; } .rt-home-faq .rt-faq--nk .rt-faq__item:hover { border-color: var(--rt-text-on-inverse-muted); } .rt-home-faq .rt-faq--nk .rt-faq__item[open] { padding-block-end: 22px; border-color: var(--rt-c-lime); } .rt-home-faq .rt-faq--nk .rt-faq__q { min-block-size: 52px; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; } .rt-home-faq .rt-faq--nk .rt-faq__q .rt-icon { flex: 0 0 40px; inline-size: 40px; block-size: 40px; padding: 9px; border: 2px solid var(--rt-text-on-inverse-muted); border-radius: 50%; } .rt-home-faq .rt-faq--nk .rt-faq__item[open] .rt-faq__q .rt-icon { background: var(--rt-c-lime); border-color: var(--rt-c-lime); color: var(--rt-c-navy-deep); transform: rotate(180deg); } .rt-home-faq .rt-faq--nk .rt-faq__a { padding-block: 4px 0; padding-inline: 0 56px; max-inline-size: calc(68ch + 56px); line-height: 1.65; } .rt-home-faq__all { margin: 0; } .rt-home-faq .rt-link-arrow { min-block-size: var(--rt-target-min); color: var(--rt-c-lime); } @media (prefers-reduced-motion: no-preference) { .rt-home-faq .rt-faq--nk .rt-faq__item { transition: border-color 160ms ease; } .rt-home-faq .rt-faq--nk .rt-faq__q .rt-icon { transition: transform 200ms ease, background-color 160ms ease; } } @media (max-width: 599.98px) { .rt-home-faq .rt-faq--nk .rt-faq__item { padding-inline: 20px 8px; border-radius: 26px; } .rt-home-faq .rt-faq--nk .rt-faq__q { font-size: var(--rt-f-md); } .rt-home-faq .rt-faq--nk .rt-faq__a { padding-inline-end: 12px; } } /* ---------------------------------------------------------------- 6) KAPANIŞ — KONUŞMA BALONU PANELİ (sky kuşak) */ .rt-cta-band--panel { --rt-cta-panel-max: 760px; background-color: var(--rt-band-sky); border-block: 0; padding-block: clamp(4rem, 3rem + 3vw, 6rem) clamp(5rem, 4rem + 3vw, 7rem); } .rt-cta-band--panel .rt-cta-band__inner { display: block; } .rt-cta-band__panel { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--rt-sp-4); max-inline-size: var(--rt-cta-panel-max); margin-inline: auto; padding-block: clamp(2.75rem, 2.2rem + 2vw, 3.75rem) clamp(2.25rem, 1.8rem + 1.6vw, 3rem); padding-inline: clamp(1.25rem, 0.4rem + 3.4vw, 3.5rem); text-align: center; background: var(--rt-surface-default); border: 2px solid var(--rt-c-navy-deep); border-radius: 32px; box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-offset-ink); } .rt-cta-band--panel .rt-cta-band__title { margin: 0; max-inline-size: 22ch; font-size: var(--rt-f-display-lg); line-height: var(--rt-lh-display); letter-spacing: var(--rt-ls-display); color: var(--rt-c-navy-deep); text-wrap: balance; } .rt-cta-band--panel .rt-cta-band__text { margin: 0; max-inline-size: 52ch; font-size: var(--rt-f-md); line-height: 1.55; color: var(--rt-c-ink); } .rt-cta-band--panel .rt-cta-band__actions { justify-content: center; margin-block-start: var(--rt-sp-2); } /* Etiket: bu yarının TEK etiket görünümü (yorumlar üst etiketiyle aynı: altın-açık zemin, lacivert kontur, −2°). HEDİYE rozeti ayrı roldür (+6°, altın). Lime burada kullanılmaz: panelin tek lime öğesi birincil düğmedir. */ .rt-cta-band__tag { position: absolute; inset-block-start: -17px; inset-inline-start: clamp(20px, 5%, 40px); margin: 0; } .rt-cta-band__tail { position: absolute; inset-block-start: 100%; inset-inline-start: clamp(36px, 9%, 72px); inline-size: 50px; block-size: 44px; max-inline-size: none; overflow: visible; pointer-events: none; } [dir="rtl"] .rt-cta-band__tail { transform: scaleX(-1); } .rt-cta-band__tail-shade { fill: var(--rt-c-navy-deep); } .rt-cta-band__tail-fill { fill: var(--rt-surface-default); } .rt-cta-band__tail-line { fill: none; stroke: var(--rt-c-navy-deep); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; } /* Kâğıt uçak şeridi panelin 16 px ÖNÜNDE biter (dar sütun şeridi panelin iç boşluğuna giriyordu); çizim içeriği şeridin 24 px iç boşluğunda kalır, mürekkep panelden en az 40 px uzaktadır. 1200 px altında gizli: 1024–1199'da 158×202'ye sıkışıp panele dayanıyordu. */ .rt-cta-band--panel > .rt-decor--narrow { --rt-decor-lane: calc((100% - var(--rt-cta-panel-max)) / 2 - var(--rt-decor-edge) - 16px); } @media (max-width: 1199.98px) { .rt-cta-band--panel > .rt-decor--m-kagit-ucak { display: none; } } @media (max-width: 479.98px) { .rt-cta-band--panel .rt-cta-band__actions { flex-direction: column; align-items: stretch; align-self: stretch; } .rt-cta-band--panel .rt-cta-band__actions .rt-btn { justify-content: center; } .rt-cta-band__panel { border-radius: 26px; } } @media (forced-colors: active) { .rt-cta-band__tail { display: none; } section[aria-labelledby="rt-home-age-guide"] .rt-topic-grid::before { display: none; } } } /* ============================================================================= REHBER SAYFALARI — TEMA V2.1 (guides grubu, 2026-09-15, 2. tur). rt.css'in SONUNA eklenir: foundation.css §5'ten ve home-bottom.css'ten SONRA (bu blok --rt-band-*, --rt-offset-*, --rt-dir, --rt-tilt-sm, --rt-fw-black, --rt-rd-xl, --rt-f-display-*, --rt-decor-ink-soft token'larını okur; kapanış paneli home-bottom.css §6'dadır). Owner (birebir): "UX tasarımı berbat. üstteki yazı sol dibe kadar dayanmış. sayfada bir düzen yok. markaya özel tasarımsal sayfa dekoru yok. korkunç". Şablon: views-rt/learning/view.php. Belge: scratchpad v2/guides/CHANGES.md. Kurallar: :is() virgül listesi yok, 50vw yok, yeni odak kuralı yok, hareket yalnız no-preference içinde, mantıksal özellikler (RTL), dokunma hedefi ≥ 44 px. Sayfa katmanıdır; tek literal renk maske gradyanındaki saydamlık siyahıdır. Katmanlama: şerit z-index 60 = içeriğin üstü; alt deneme çubuğu (30) şeridin altında ama şerit < 960 px akıştadır; yüzen düğmeler (--rt-z-fab 90), üst bilgi ve menü panelleri (--rt-z-sticky 100), çekmece (200) şeridin ÜSTÜNDEdir. ============================================================================= */ @layer rt.page { /* --- 0. ŞERİT YÜKSEKLİĞİ: tek kaynak. Başlıkların scroll-margin'i buradan hesaplanır (şerit < 960 px akışta: 0). ---- */ .rt-shell__main { --rt-guide-toc-h: 0px; } @media (min-width: 960px) { .rt-shell__main { --rt-guide-toc-h: 3.625rem; } } /* --- 1. SAYFA BAŞI ------------------------------------------------------------------------------------------------ */ .rt-guide-hero { padding-block: var(--rt-sp-4) clamp(2.5rem, 1.6rem + 3vw, 4.5rem); border-block-end: 0; } .rt-guide-hero .rt-breadcrumb { margin-block-end: clamp(0.25rem, 0rem + 1.2vw, 1.25rem); } .rt-guide-hero .rt-guide-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--rt-sp-6); align-items: center; } .rt-guide-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--rt-sp-4); min-inline-size: 0; } .rt-guide-hero__copy > * { margin: 0; } .rt-guide-hero .rt-guide-hero__title { max-inline-size: 20ch; font-size: var(--rt-f-display-xl); line-height: var(--rt-lh-display); letter-spacing: var(--rt-ls-display); } .rt-guide-hero .rt-lead { max-inline-size: 54ch; } .rt-guide-hero .rt-hero__actions { align-items: center; gap: var(--rt-sp-3) var(--rt-sp-5); margin-block-start: var(--rt-sp-2); } .rt-guide-hero__secondary:hover { text-decoration: underline; text-underline-offset: 4px; } .rt-guide-hero__secondary .rt-icon { inline-size: 18px; block-size: 18px; } [dir="rtl"] .rt-guide-hero__secondary .rt-icon { transform: scaleX(-1); } /* 720 px'ten iki sütun: 768'de kart başlığın yanında durur, bandın sağ yarısı boş kalmaz. */ @media (min-width: 720px) { .rt-guide-hero .rt-guide-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 5rem); } } /* "Bir bakışta" = markanın konuşma balonu (Owner B konuşma öğeleri; E kontrollü asimetri: eğik etiket + sert gölge). Kuyruk yan yana düzende başlığa (başlangıç kenarı), alt alta düzende yukarıdaki eylemlere bakar. */ .rt-guide-hero .rt-guide-summary { position: relative; display: flex; flex-direction: column; gap: var(--rt-sp-4); inline-size: 100%; padding: clamp(1.125rem, 0.9rem + 1vw, 1.75rem); background: var(--rt-surface-default); border: 2px solid var(--rt-offset-ink); border-radius: var(--rt-rd-xl); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-offset-ink); } .rt-guide-summary::after { content: ""; position: absolute; inset-block-start: -11px; inset-inline-start: 44px; inline-size: 18px; block-size: 18px; background: var(--rt-surface-default); border-block-start: 2px solid var(--rt-offset-ink); border-inline-start: 2px solid var(--rt-offset-ink); border-start-start-radius: 3px; transform: rotate(calc(45deg * var(--rt-dir))); } @media (min-width: 720px) { .rt-guide-summary::after { inset-block-start: 52px; inset-inline-start: -11px; border-block-start: 0; border-start-start-radius: 0; border-block-end: 2px solid var(--rt-offset-ink); border-end-start-radius: 3px; } } @media (min-width: 960px) { .rt-guide-hero .rt-guide-summary { justify-self: end; max-inline-size: 30rem; } } .rt-guide-summary .rt-guide-summary__head { display: flex; align-items: center; justify-content: space-between; gap: var(--rt-sp-3); } .rt-guide-summary .rt-guide-summary__label { margin: 0; } /* Yalnız yaş sayfaları: büyüme evresi (Owner K). Diğer sayfalarda simge yok (Owner C: zayıf çizim hiç olmamasından kötü). */ .rt-guide-summary .rt-guide-summary__symbol { position: static; display: grid; place-items: center; flex: none; inline-size: 72px; block-size: 72px; border-radius: var(--rt-rd-lg); background: var(--rt-band-honey); transform: none; } .rt-guide-summary__symbol .rt-growth { inline-size: 58px; block-size: 58px; } /* Owner 2026-10-04 "bir bakışta da kullan": evre illüstratör tarzındaki webp çizimse (illus/yas/evre-N.webp) kutuyu doldurur. */ .rt-guide-summary__symbol .rt-guide-summary__art { display: block; inline-size: 68px; block-size: 68px; max-inline-size: none; } .rt-guide-summary .rt-guide-summary__points { display: grid; gap: var(--rt-sp-3); margin: 0; padding: 0; list-style: none; } .rt-guide-summary .rt-guide-summary__points li { display: flex; align-items: flex-start; gap: var(--rt-sp-3); font-size: var(--rt-f-md); line-height: 1.45; color: var(--rt-text-primary); } .rt-guide-summary__check { display: grid; place-items: center; flex: none; inline-size: 26px; block-size: 26px; margin-block-start: -2px; border-radius: 50%; background: var(--rt-action-primary-bg); color: var(--rt-action-primary-text); } .rt-guide-summary__points .rt-guide-summary__check .rt-icon { flex: none; inline-size: 16px; block-size: 16px; margin: 0; color: inherit; stroke-width: 2.8; } @media (min-width: 640px) and (max-width: 719.98px) { .rt-guide-summary .rt-guide-summary__points { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --- 2. "BU SAYFADA" ŞERİDİ: her genişlikte TEK satır --------------------------------------------------------------- Sığmayan bağlantılar yatay kayar; bitiş kenarı solar (kaydırılabilir olduğu okunur). ≥ 960 px yapışkan ve yüksekliği --rt-guide-toc-h'dir; < 960 px akışta durur (telefonda üst bilgi + şerit + alt deneme çubuğu üç katman olmuyor). */ .rt-guide-toc { position: relative; z-index: 60; background-color: var(--rt-surface-accent); border-block: 1px solid var(--rt-border-subtle); } .rt-guide-toc .rt-guide-toc__inner { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--rt-sp-1); padding-block: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-inline: contain; -webkit-mask-image: linear-gradient(to right, rgb(0 0 0) 0, rgb(0 0 0) calc(100% - 3rem), transparent 100%); mask-image: linear-gradient(to right, rgb(0 0 0) 0, rgb(0 0 0) calc(100% - 3rem), transparent 100%); } [dir="rtl"] .rt-guide-toc .rt-guide-toc__inner { -webkit-mask-image: linear-gradient(to left, rgb(0 0 0) 0, rgb(0 0 0) calc(100% - 3rem), transparent 100%); mask-image: linear-gradient(to left, rgb(0 0 0) 0, rgb(0 0 0) calc(100% - 3rem), transparent 100%); } /* rt.js (REQUESTS G2) kaydırılınca başlangıç kenarını da soldurur. */ .rt-guide-toc .rt-guide-toc__inner[data-rt-toc-scrolled="true"] { -webkit-mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0) 2.5rem, rgb(0 0 0) calc(100% - 3rem), transparent 100%); mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0) 2.5rem, rgb(0 0 0) calc(100% - 3rem), transparent 100%); } [dir="rtl"] .rt-guide-toc .rt-guide-toc__inner[data-rt-toc-scrolled="true"] { -webkit-mask-image: linear-gradient(to left, transparent 0, rgb(0 0 0) 2.5rem, rgb(0 0 0) calc(100% - 3rem), transparent 100%); mask-image: linear-gradient(to left, transparent 0, rgb(0 0 0) 2.5rem, rgb(0 0 0) calc(100% - 3rem), transparent 100%); } .rt-guide-toc .rt-guide-toc__inner::-webkit-scrollbar { display: none; } /* Son bağlantı soluk kenardan tam çıkabilsin diye kaydırma alanının sonuna boşluk. */ .rt-guide-toc .rt-guide-toc__inner::after { content: ""; flex: 0 0 2.5rem; block-size: 1px; } .rt-guide-toc .rt-guide-toc__label { flex: none; margin-inline-end: var(--rt-sp-2); color: var(--rt-text-secondary); font-size: var(--rt-f-xs); font-weight: var(--rt-fw-black); letter-spacing: var(--rt-ls-tag); text-transform: uppercase; white-space: nowrap; } .rt-guide-toc .rt-guide-toc__inner > a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--rt-target-min); padding-inline: 14px; border: 2px solid transparent; border-radius: var(--rt-rd-pill); background: transparent; color: var(--rt-text-heading); font-size: var(--rt-f-sm); font-weight: var(--rt-fw-bold); white-space: nowrap; text-decoration: none; } .rt-guide-toc .rt-guide-toc__inner > a:hover { background: var(--rt-surface-default); border-color: var(--rt-border-subtle); text-decoration: none; } .rt-guide-toc .rt-guide-toc__inner > a[aria-current="true"] { background: var(--rt-action-primary-bg); color: var(--rt-action-primary-text); border-color: var(--rt-offset-ink); } .rt-guide-toc .rt-guide-toc__text { display: block; min-inline-size: 0; color: inherit; font-size: inherit; font-weight: inherit; } .rt-guide-toc .rt-guide-toc__num { flex: none; color: var(--rt-text-heading); font-size: var(--rt-f-xs); font-weight: var(--rt-fw-black); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; opacity: 1; } .rt-guide-toc .rt-guide-toc__inner > a[aria-current="true"] .rt-guide-toc__num { color: inherit; } @media (max-width: 959.98px) { .rt-guide-toc .rt-guide-toc__inner > a { background: var(--rt-surface-default); border-color: var(--rt-border-subtle); padding-inline: 12px; } } @media (min-width: 960px) { .rt-guide-toc { position: sticky; inset-block-start: var(--rt-header-height); block-size: var(--rt-guide-toc-h); } .rt-guide-toc .rt-guide-toc__inner { block-size: 100%; padding-block: 0; } /* Uzun bölüm adları tek satırda kısalır; tam ad bağlantının erişilebilir adında kalır. */ .rt-guide-toc .rt-guide-toc__text { max-inline-size: 15rem; overflow: hidden; text-overflow: ellipsis; } } /* KENAR OKLARI (R1 P2, 2026-09-15; /tr/turkiye-ve-koklerimiz 1024 px'te 1024 px'lik şeritte 1549 px bağlantı, 1440'ta 1180'de 1549): şerit sığmıyorsa 1024 px ve üstünde bitiş (ve kaydırılınca başlangıç) kenarında yuvarlak ok görünür; basınca şerit yatay kayar. Oklar rt.js'in eklediği işaretçi kısayoludur (aria-hidden, sekme sırasında yok): klavye her bağlantıya zaten Tab ile gider ve odaklanan bağlantı şeridi kaydırır. Şerit yüksekliği (--rt-guide-toc-h) ve yapışkanlık DEĞİŞMEZ. Üzerine gelme/basma durumu sitenin dolan dairesidir (rt.page OWNER DÜZELTMELERİ, "DOLAN DAİRE" bloğu): düz vurgu zemini vurgulu şeritte görünmüyordu. */ .rt-guide-toc__arrow { display: none; } @media (min-width: 1024px) { .rt-guide-toc .rt-guide-toc__arrow { position: absolute; z-index: 1; inset-block-start: 50%; transform: translateY(-50%); display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 2px solid var(--rt-offset-ink); border-radius: 50%; background: var(--rt-surface-default); color: var(--rt-text-heading); cursor: pointer; box-shadow: calc(var(--rt-offset-1) * var(--rt-dir)) var(--rt-offset-1) 0 0 var(--rt-offset-ink); } .rt-guide-toc .rt-guide-toc__arrow--prev { inset-inline-start: max(8px, calc((100% - var(--rt-container-max)) / 2 + 8px)); } .rt-guide-toc .rt-guide-toc__arrow--next { inset-inline-end: max(8px, calc((100% - var(--rt-container-max)) / 2 + 8px)); } .rt-guide-toc .rt-guide-toc__arrow::before { content: ""; inline-size: 9px; block-size: 9px; border-block-start: 2.5px solid currentColor; border-inline-end: 2.5px solid currentColor; transform: translateX(-2px) rotate(45deg); } .rt-guide-toc .rt-guide-toc__arrow--prev::before { transform: translateX(2px) rotate(-135deg); } /* RTL: kenarlar mantıksaldır (border-inline-end RTL'de SOL kenar), köşe sol-üsttedir; bu yüzden açılar LTR'nin aynası değil. */ [dir="rtl"] .rt-guide-toc .rt-guide-toc__arrow::before { transform: translateX(2px) rotate(-45deg); } [dir="rtl"] .rt-guide-toc .rt-guide-toc__arrow--prev::before { transform: translateX(-2px) rotate(135deg); } } /* Bağlantı hedefi başlık, üst bilgi + şerit altında kalmaz (şerit yüksekliği token'dan). */ .rt-guide-section .rt-guide-section__title, .rt-guide-faq .rt-guide-faq__title { scroll-margin-block-start: calc(var(--rt-header-height) + var(--rt-guide-toc-h) + 1.5rem); } /* --- 3. BÖLÜMLER ---------------------------------------------------------------------------------------------------- Maddeli bölüm: [numara + başlık + metin | madde çipleri]. Maddesiz bölüm: tek okuma sütunu (40rem), bitişte boş şerit sayfanın bağlam çizimine kalır. Art arda maddesiz bölümler .rt-guide-band içinde tek kuşak + ince ayraç. */ .rt-guide-section.rt-section, .rt-guide-band, .rt-guide-faq, .rt-guide-prices { padding-block: clamp(3rem, 2.2rem + 2.6vw, 5rem); } .rt-guide-band > .rt-guide-section { padding-block: 0; } .rt-guide-band > .rt-guide-section + .rt-guide-section { margin-block-start: clamp(2rem, 1.5rem + 1.5vw, 3rem); } .rt-guide-band > .rt-guide-section + .rt-guide-section > .rt-guide-section__grid::before { content: ""; display: block; inline-size: 100%; max-inline-size: 40rem; block-size: 2px; margin-block-end: clamp(2rem, 1.5rem + 1.5vw, 3rem); border-radius: 2px; background: var(--rt-decor-ink-soft); } .rt-guide-section .rt-guide-section__grid, .rt-guide-faq .rt-guide-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rt-sp-5) var(--rt-sp-6); align-items: start; } .rt-guide-section.rt-guide-section--plain .rt-guide-section__grid { row-gap: 0; } @media (min-width: 960px) { .rt-guide-section:not(.rt-guide-section--plain) .rt-guide-section__grid, .rt-guide-faq .rt-guide-faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 5vw, 5rem); } .rt-guide-section .rt-guide-section__body { align-self: center; } } .rt-guide-section__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--rt-sp-3); min-inline-size: 0; } .rt-guide-section.rt-guide-section--plain .rt-guide-section__head { max-inline-size: 40rem; } .rt-guide-section .rt-guide-section__number { display: inline-flex; align-items: center; min-block-size: 30px; padding-inline: 12px; border: 2px solid var(--rt-offset-ink); border-radius: var(--rt-rd-pill); background: var(--rt-action-primary-bg); color: var(--rt-action-primary-text); box-shadow: calc(var(--rt-offset-1) * var(--rt-dir)) var(--rt-offset-1) 0 0 var(--rt-offset-ink); font-size: var(--rt-f-sm); font-weight: var(--rt-fw-black); line-height: 1; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; transform: rotate(calc(var(--rt-tilt-sm) * -1 * var(--rt-dir))); } .rt-guide-section .rt-guide-section__title, .rt-guide-faq .rt-guide-faq__title, section[aria-labelledby="rt-guide-related"] .rt-content-hub__head h2 { margin: 0; max-inline-size: 22ch; font-family: var(--rt-f-display); font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem); font-weight: var(--rt-fw-black); line-height: 1.15; letter-spacing: var(--rt-ls-display); color: var(--rt-text-heading); text-wrap: balance; } .rt-guide-section.rt-guide-section--plain .rt-guide-section__title { max-inline-size: 28ch; } section[aria-labelledby="rt-guide-related"] .rt-content-hub__head h2 { max-inline-size: none; } .rt-guide-section .rt-guide-section__text { margin: var(--rt-sp-1) 0 0; max-inline-size: 60ch; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); line-height: 1.7; color: var(--rt-text-primary); } .rt-guide-section.rt-guide-section--plain .rt-guide-section__text { font-size: var(--rt-f-lg); line-height: 1.65; } .rt-guide-section__body { min-inline-size: 0; } .rt-guide-section .rt-guide-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .rt-guide-section .rt-guide-list li { display: flex; align-items: center; gap: var(--rt-sp-3); min-block-size: 56px; padding: 10px 16px; border-radius: var(--rt-rd-lg); background: var(--rt-band-mist); color: var(--rt-text-heading); font-weight: var(--rt-fw-bold); line-height: 1.4; } .rt-guide-section:not(.rt-section--surface) .rt-guide-list li { background: var(--rt-band-paper); } .rt-guide-list__check { display: grid; place-items: center; flex: none; inline-size: 28px; block-size: 28px; border: 2px solid var(--rt-offset-ink); border-radius: 50%; background: var(--rt-action-primary-bg); color: var(--rt-action-primary-text); } .rt-guide-list .rt-guide-list__check .rt-icon { flex: none; inline-size: 15px; block-size: 15px; margin: 0; color: inherit; stroke-width: 2.8; } /* Birleşik kuşakta köşe çıkartması taşıyan bölüm (< 1024): kuşak kuralı iç boşluğu sıfırladığı için 96 px geri verilir. */ @media (max-width: 1023.98px) { .rt-guide-band > .rt-guide-section.rt-decor-host--corner { padding-block-start: 6rem; } } /* --- 4. SSS -------------------------------------------------------------------------------------------------------- */ .rt-guide-faq__head { display: flex; flex-direction: column; gap: var(--rt-sp-3); min-inline-size: 0; } .rt-guide-faq .rt-faq { gap: 10px; } .rt-guide-faq .rt-faq__item { border: 2px solid var(--rt-surface-default); border-radius: var(--rt-rd-lg); background: var(--rt-surface-default); } .rt-guide-faq .rt-faq__item:hover { border-color: var(--rt-border-subtle); } .rt-guide-faq .rt-faq__item[open] { border-color: var(--rt-offset-ink); box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-offset-ink); } .rt-guide-faq .rt-faq__q { min-block-size: 60px; padding: 12px 20px; font-size: var(--rt-f-md); } .rt-guide-faq .rt-faq__a { padding: 0 20px 18px; line-height: 1.7; color: var(--rt-text-primary); } /* --- 5. FİYAT BLOĞU (yalnız ücretler sayfası; rakamlar RtRules'tan) -------------------------------------------------- */ .rt-guide-prices .rt-guide-price { position: relative; align-items: flex-start; gap: var(--rt-sp-3); padding: clamp(1.25rem, 1rem + 1vw, 2rem); border: 2px solid var(--rt-offset-ink); border-radius: var(--rt-rd-xl); background: var(--rt-band-honey); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-offset-ink); } .rt-guide-prices .rt-guide-price > * { margin: 0; } .rt-guide-price__icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border: 2px solid var(--rt-offset-ink); border-radius: 50%; background: var(--rt-surface-default); color: var(--rt-text-heading); } .rt-guide-price__icon .rt-icon { inline-size: 24px; block-size: 24px; } .rt-guide-prices .rt-guide-price h2 { font-size: var(--rt-f-display-md); font-weight: var(--rt-fw-black); } .rt-guide-prices .rt-guide-price__value { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); font-weight: var(--rt-fw-black); line-height: 1.1; letter-spacing: var(--rt-ls-display); } .rt-guide-price__unit { color: var(--rt-text-secondary); font-size: var(--rt-f-sm); } .rt-guide-prices .rt-guide-prices__note { color: var(--rt-text-secondary); font-size: var(--rt-f-sm); } /* --- 5b. KARAKTERLERİMİZ (yalnız 'characters' kaydı; Owner 2026-10-03: "Roots and Talks karakterlerini tanıtan bir sayfa da olsun"). Telefonda yatay kart (görsel solda, metin sağda, tek sütun); 720 px'ten 3, 1080 px'ten 4 sütun dikey kart. Görselin zemini marka kuşak renkleri sırayla; kart kenarı rehber fiyat kartlarıyla aynı mürekkep gölgesi. Sıralama/rütbe yok. */ .rt-chars-hero__copy { max-inline-size: 46rem; } /* Toplu görsel (Owner 20:5x "hepsinin toplu olduğu bir görsel de olmalı"): giriş metninin altında, kapsayıcı genişliğinde. */ .rt-chars-hero__group { margin: var(--rt-sp-6) 0 0; } .rt-chars-hero__group img { display: block; inline-size: 100%; max-inline-size: 64rem; block-size: auto; margin-inline: auto; } .rt-chars { padding-block: clamp(2.5rem, 2rem + 2.4vw, 4.5rem); } .rt-chars__grid { display: grid; gap: var(--rt-sp-4); margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); } .rt-chars__card { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: var(--rt-sp-4); padding: var(--rt-sp-3); border: 2px solid var(--rt-offset-ink); border-radius: var(--rt-rd-xl); background: var(--rt-surface-default); box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-offset-ink); } .rt-chars__art { display: flex; align-items: flex-end; justify-content: center; block-size: 9.5rem; padding-block-start: var(--rt-sp-2); border-radius: var(--rt-rd-lg); background: var(--rt-band-sky); overflow: hidden; } .rt-chars__card:nth-child(3n+2) .rt-chars__art { background: var(--rt-band-blush); } .rt-chars__card:nth-child(3n+3) .rt-chars__art { background: var(--rt-band-honey); } /* Kart görselleri ORTAK tuvaldedir (aynı en-boy, ayaklar aynı taban çizgisinde; araclar/gorsel_uret.py): her biri kutunun yüksekliğini alır, böylece hepsi AYNI ölçekte görünür (Ela belirgin kısa, Gamze ve Ahmet aynı boy). object-fit YOK. */ .rt-chars__art img { display: block; block-size: 100%; inline-size: auto; } .rt-chars__body { display: flex; flex-direction: column; gap: var(--rt-sp-2); min-inline-size: 0; } .rt-chars__name { margin: 0; font-size: var(--rt-f-lg); font-weight: var(--rt-fw-black); color: var(--rt-text-heading); line-height: 1.2; } .rt-chars__text { margin: 0; color: var(--rt-text-primary); font-size: var(--rt-f-sm); line-height: 1.6; } @media (min-width: 720px) { .rt-chars__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rt-sp-5); } .rt-chars__card { grid-template-columns: minmax(0, 1fr); align-items: stretch; align-content: start; padding: var(--rt-sp-4); } .rt-chars__art { block-size: clamp(11rem, 8rem + 6vw, 13.5rem); } } @media (min-width: 720px) and (max-width: 1079.98px) { .rt-chars__card:last-child { grid-column: 2; } } @media (min-width: 1080px) { .rt-chars__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rt-chars__card:nth-child(9) { grid-column: 2; } } /* KARAKTER-KART-2026-10-07:BASLANGIC (karakter-gorsel-site-t2-2026-10-06; Karakterlerimiz kart etkileşimi; bağlam yamasıyla "--- 6. SONRAKİ ADIMLAR" çapasının ÖNÜNE eklenir) */ /* --- 5b-2. KARAKTERLERİMİZ KART ETKİLEŞİMİ (karakter-gorsel-site-t2-2026-10-06). Owner 04.10 01:2x ve 06.10 23:4x (özü): "dokunduğum kartın dokunulduğu belli olacak şekilde öne doğru gelsin … ana sayfadaki gibi … tıkladığımda da böyle bayağı büyük … tüm kartlar". ÖNE GELME: ana sayfa yaş rehberi kartlarının hareketi (2 px öne + büyük mürekkep gölgesi, 160 ms; aynı belirteçler --rt-dir / --rt-offset-3); DÖNÜŞEN RENK marka lime (--rt-c-lime #74E88A, Owner kuralı): gölge lime, çerçeve lacivert-koyu. Fare: :hover (yalnız hover destekleyen aygıtta; dokunmatikte takılı kalmasın). Dokunma ve tıklama: düğmenin :active ve :focus hâli — dokunulan kart odak alır, büyük kart kapanınca odak ona döner; böylece "hangi karta dokundum" pencere kapandıktan sonra da görünür (başka yere dokununca söner). Klavye: ayrıca :focus-visible odak halkası. Hareket azaltılmışsa YER DEĞİŞMEZ; yalnız çerçeve ve lime gölge. Kartın tamamı tek düğmedir (.rt-chars__open kartı kaplar; başlık anlamı korunur). */ .rt-chars__card { position: relative; } .rt-chars__open { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: zoom-in; -webkit-tap-highlight-color: transparent; } .rt-chars__open:focus { outline: none; } .rt-chars__open:focus-visible { outline: 3px solid var(--rt-border-focus); outline-offset: 4px; } .rt-chars__card:has(> .rt-chars__open:is(:focus, :active)) { border-color: var(--rt-c-navy-deep); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-c-lime); } @media (hover: hover) { .rt-chars__card:hover { border-color: var(--rt-c-navy-deep); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-c-lime); } } @media (prefers-reduced-motion: no-preference) { .rt-chars__card { transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .rt-chars__card:has(> .rt-chars__open:is(:focus, :active)) { transform: translate(calc(-2px * var(--rt-dir)), -2px); } @media (hover: hover) { .rt-chars__card:hover { transform: translate(calc(-2px * var(--rt-dir)), -2px); } } } /* BÜYÜK KART: var olan .rt-modal katmanı (rt.js: odak tuzağı, Esc, arka plan tıklaması, kaydırma kilidi, odak açan karta döner). Modal yalnız -2x.webp kullanır; 1× kart görseli büyütülmez. Masaüstünde karakter büyük ve solda, açıklama sağda; 720 px altında erişilebilir tek sütun/TAM EKRAN (köşe/çerçeve yok, içerik kendi içinde kayar). Kapat düğmesi 44 px. */ .rt-chars-modal__panel { inline-size: min(1180px, 100%); max-block-size: 96vh; padding: var(--rt-sp-5); display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--rt-sp-4); border: 2px solid var(--rt-c-navy-deep); border-radius: var(--rt-rd-xl); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-c-lime); } .rt-chars-modal__close { z-index: 1; border: 2px solid var(--rt-c-navy-deep); border-radius: 50%; background: var(--rt-surface-default); color: var(--rt-c-navy-deep); } .rt-chars-modal__close:is(:hover, :focus-visible, :active) { background: var(--rt-c-lime); } .rt-chars-modal__close:focus-visible { outline: 3px solid var(--rt-border-focus); outline-offset: 3px; } .rt-chars-modal__art { display: flex; align-items: flex-end; justify-content: center; block-size: min(58vh, 520px); padding-block-start: var(--rt-sp-3); border-radius: var(--rt-rd-lg); background: var(--rt-band-sky); overflow: hidden; } .rt-chars-modal--2 .rt-chars-modal__art { background: var(--rt-band-blush); } .rt-chars-modal--3 .rt-chars-modal__art { background: var(--rt-band-honey); } .rt-chars-modal__art img { display: block; block-size: 100%; inline-size: auto; max-inline-size: 100%; object-fit: contain; } .rt-chars-modal__body { display: flex; flex-direction: column; align-self: center; gap: var(--rt-sp-3); min-inline-size: 0; } .rt-chars-modal__name { margin: 0; font-size: var(--rt-f-display-md); font-weight: var(--rt-fw-black); color: var(--rt-text-heading); line-height: 1.15; } .rt-chars-modal__text { margin: 0; font-size: var(--rt-f-lg); line-height: 1.65; color: var(--rt-text-primary); } @media (max-width: 719.98px) { .rt-chars-modal { padding: 0; } /* Görünüm alanına sabit (inset 0): içerik ne kadar uzun olursa olsun panel ekranı tam kaplar, kaydırma panelin içinde. */ .rt-chars-modal__panel { position: fixed; inset: 0; inline-size: auto; block-size: auto; max-block-size: none; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding: var(--rt-sp-4); border: 0; border-radius: 0; box-shadow: none; } .rt-chars-modal__art { block-size: min(55vh, 480px); margin-block-start: var(--rt-sp-7, 3rem); } /* Tam ekranda içerik kayar; Kapat her zaman görünür kalır (ekranın sağ üstüne sabit). */ .rt-chars-modal__close { position: fixed; inset-block-start: var(--rt-sp-3); inset-inline-end: var(--rt-sp-3); } } @media (min-width: 800px) { .rt-chars-modal__panel { grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.8fr); gap: var(--rt-sp-6); padding: var(--rt-sp-6); } .rt-chars-modal__art { block-size: min(78vh, 720px); } } @keyframes rt-chars-grow { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } } @keyframes rt-chars-fade { from { opacity: 0; } to { opacity: 1; } } .rt-chars-modal[data-open="true"] .rt-chars-modal__panel { animation: rt-chars-fade 140ms linear; } @media (prefers-reduced-motion: no-preference) { .rt-chars-modal[data-open="true"] .rt-chars-modal__panel { animation: rt-chars-grow 200ms ease-out; } } @media (forced-colors: active) { .rt-chars__card:hover, .rt-chars__card:has(> .rt-chars__open:is(:focus, :active)) { outline: 2px solid Highlight; } } /* KARAKTER-KART-2026-10-07:BITIS */ /* --- 6. SONRAKİ ADIMLAR (yalnız rehber kümesi; ana sayfa ve Nasıl işler kümeleri kendi gruplarındadır) --------------- */ section[aria-labelledby="rt-guide-related"] .rt-topic-grid { padding-block-start: var(--rt-sp-2); } section[aria-labelledby="rt-guide-related"] .rt-topic-card { border: 2px solid var(--rt-border-subtle); } section[aria-labelledby="rt-guide-related"] .rt-topic-card:hover { border-color: var(--rt-offset-ink); box-shadow: none; } section[aria-labelledby="rt-guide-related"] .rt-topic-card h3 { font-weight: var(--rt-fw-black); } section[aria-labelledby="rt-guide-related"] .rt-topic-card:nth-child(3n+1) .rt-topic-card__icon { background: var(--rt-band-sky); } section[aria-labelledby="rt-guide-related"] .rt-topic-card:nth-child(3n+2) .rt-topic-card__icon { background: var(--rt-band-blush); } section[aria-labelledby="rt-guide-related"] .rt-topic-card:nth-child(3n+3) .rt-topic-card__icon { background: var(--rt-band-honey); } @media (prefers-reduced-motion: no-preference) { section[aria-labelledby="rt-guide-related"] .rt-topic-card { transition: transform var(--rt-mo-fast) var(--rt-mo-ease), box-shadow var(--rt-mo-fast) var(--rt-mo-ease), border-color var(--rt-mo-fast) var(--rt-mo-ease); } section[aria-labelledby="rt-guide-related"] .rt-topic-card:hover { transform: translate(calc(-2px * var(--rt-dir)), -2px); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-offset-ink); } } /* site-hub.php'nin HEDİYE kartı (bu değiştirici yalnız rozet çizildiğinde vardır; hangi kümede olursa olsun). */ .rt-topic-card.rt-topic-card--gift { padding-block-start: 1.625rem; } /* --- 7. KELİME OYUNU (etkinlik sayfaları; test kancaları aynen) ------------------------------------------------------ */ .rt-word-practice__head { max-inline-size: 48rem; } .rt-word-practice__head > * { margin: 0; } .rt-word-grid > .rt-word-card { display: flex; flex-direction: column; gap: var(--rt-sp-2); padding: 16px 18px; border: 2px solid var(--rt-border-subtle); } .rt-word-grid > .rt-word-card > * { margin: 0; } .rt-word-card h3 { font-size: var(--rt-f-xs); font-weight: var(--rt-fw-black); letter-spacing: var(--rt-ls-tag); text-transform: uppercase; } .rt-word-card .rt-word-card__picture { block-size: 88px; border-radius: var(--rt-rd-lg); background: var(--rt-band-sky); } .rt-word-grid > .rt-word-card:nth-child(3n+2) .rt-word-card__picture { background: var(--rt-band-blush); } .rt-word-grid > .rt-word-card:nth-child(3n+3) .rt-word-card__picture { background: var(--rt-band-honey); } .rt-word-card .rt-word-card__picture .rt-icon { inline-size: 52px; block-size: 52px; } /* Seçenekler sert gölgesiz (18 düğmelik ızgarada gölgeler gürültüydü); seçilen lime. */ .rt-word-card__choices .rt-btn { min-block-size: var(--rt-target-min); font-size: var(--rt-f-md); } .rt-word-card__choices .rt-btn, .rt-word-card__choices .rt-btn:hover, .rt-word-card__choices .rt-btn:active { box-shadow: none; transform: none; } .rt-word-card__choices .rt-btn[aria-pressed="true"] { background: var(--rt-action-primary-bg); color: var(--rt-action-primary-text); border-color: var(--rt-offset-ink); } /* Sonuç satırı boşken yer tutmaz (kart kısa kalır); cevap gelince tek-iki satır açılır. Canlı bölge görünür kalır. */ .rt-word-card .rt-word-card__result { min-block-size: 0; margin: 0; font-size: var(--rt-f-sm); line-height: 1.5; } /* --- 8. SİTE HARİTASI ---------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) { /* Dünya bağlantısı çizimi (sm, 140 px) bandın içinde en az 14 px payla durur. < 1024 köşe boşluğu foundation'dadır. */ .rt-page-head.rt-page-head--map { padding-block: clamp(3.5rem, 2.5rem + 2vw, 4.5rem); } } .rt-directory-group h2 { font-size: var(--rt-f-display-md); font-weight: var(--rt-fw-black); letter-spacing: var(--rt-ls-display); } .rt-directory-group a { color: var(--rt-text-heading); font-size: var(--rt-f-md); } .rt-directory-group a .rt-icon { color: var(--rt-text-link); } .rt-directory-group a:hover { color: var(--rt-text-link); } /* --- 9. TELEFON: kompakt sayfa başı (Owner H "kompakt değil"; hedef: sayfa başı 560 px'ten önce biter) -------------- */ @media (max-width: 639.98px) { .rt-guide-hero { padding-block: 0 var(--rt-sp-5); } .rt-guide-hero .rt-breadcrumb { flex-wrap: nowrap; margin-block-end: 0; } .rt-guide-hero .rt-breadcrumb > * { flex: none; } .rt-guide-hero .rt-breadcrumb > span[aria-current] { flex: 0 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; } .rt-guide-hero .rt-guide-hero__grid { gap: var(--rt-sp-5); } .rt-guide-hero__copy { gap: var(--rt-sp-3); } .rt-guide-hero .rt-guide-hero__title { max-inline-size: none; } /* Giriş KIRPILMAZ, ikincil bağlantı gizlenmez (R1 P2, 2026-09-15): üç satırlık kırpma açma düğmesi olmadan girişin yarısını saklıyordu (390 px'te 168 px'lik giriş 72 px'e iniyordu) ve ikincil bağlantı telefonda hiç yoktu. Boy sorun olursa metin kısaltılır, üç noktayla kesilmez. */ .rt-guide-hero .rt-guide-hero__lead { font-size: var(--rt-f-md); line-height: 1.5; } .rt-guide-hero .rt-hero__actions { margin-block-start: 0; } .rt-guide-hero .rt-guide-summary { gap: var(--rt-sp-2); padding: 12px 16px; box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-offset-ink); } /* Etiket ve büyüme simgesi telefonda görsel olarak gizli (aria-labelledby adı korunur): kart 3 maddelik şerittir. */ .rt-guide-summary .rt-guide-summary__head { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rt-guide-summary .rt-guide-summary__points { gap: 6px; } .rt-guide-summary .rt-guide-summary__points li { gap: var(--rt-sp-2); font-size: var(--rt-f-sm); line-height: 1.4; } .rt-guide-summary__check { inline-size: 22px; block-size: 22px; margin-block-start: -1px; } .rt-guide-summary__points .rt-guide-summary__check .rt-icon { inline-size: 13px; block-size: 13px; } .rt-guide-section .rt-guide-list li { min-block-size: 52px; padding: 8px 14px; font-size: var(--rt-f-sm); } .rt-guide-section.rt-guide-section--plain .rt-guide-section__text { font-size: var(--rt-f-md); } } /* SOHBET DÜĞMESİ PAYI (R1 N6, 2026-09-15; /tr/sifirdan-turkce 390×844 ölçümü): telefonda sabit sohbet düğmesi (44 px, kenardan 12 px; 334–378) bölüm metninin ve SSS cevabının satır sonlarının üstünde duruyordu (metin sağ kenarı 363 / 352). Düğme gizlenmez (Owner G: "sayfa içi up ve sohbet butonları da yok anasayfada"); 480 px altında metin sütunu bitişte düğmenin ayak izi (56 px) + 4 px içeride biter. Kapsayıcı zaten 16 px, SSS kartı 22 px içeride olduğundan eklenen pay farktır. Başlık ve madde çipleri değişmez. */ @media (max-width: 479.98px) { .rt-guide-section .rt-guide-section__text { padding-inline-end: 44px; } .rt-guide-faq .rt-faq__a { padding-inline-end: 42px; } } } /* ============================================================================= TEMA V2.1 — COMPANY GRUBU (Hakkımızda, Hikâyemiz, Manifesto, Programlar, Gizlilik, Şartlar, İletişim, SSS) 2026-09-15. rt.css'in SONUNA, temel (foundation) bloklarından SONRA eklenir. Belge: company/CHANGES.md. Kurallar: :is() virgül listesi yok, vw ile tam genişlik hilesi yok, hareket yalnız no-preference içinde, mantıksal özellikler, sert gölge ve eğim --rt-dir ile aynalanır. Kuşak zeminleri foundation token'larıdır (--rt-band-*). Ham --rt-c-* token'ı OKUNMAZ: §7 (SSS kart satırları) bileşen biçimlidir ve lead tarafından rt.component'e taşınabilir; bu yüzden bütün dosya yalnız semantic/foundation token'larıyla yazıldı. ============================================================================= */ @layer rt.page { /* --- 0. Ortak --------------------------------------------------------------------------------------------- */ /* Sayfa başı etiket aralığı artık foundation.css §5'teki ORTAK sayfa başı kuralıdır (CONSISTENCY 20: burada kapsamsızdı ve blog, yorumlar, öğretmenler, nasıl işler, start başlarını da değiştiriyordu). */ /* Yasal başlar kısa ve sakin: süs ve etiket yok. */ .rt-page-head--legal { padding-block: var(--rt-sp-6) var(--rt-sp-5); } /* --- 1. HAKKIMIZDA ---------------------------------------------------------------------------------------- */ /* 1.1 Adımızın hikâyesi: ROOTS (bal = kök/miras) · TALKS (pembe = konuşma). Renk hikâyesi büyüme simgeleriyle aynı. Karolar eğik ve 2 px konturludur; sert gölge YOK (sayfada en çok iki gölgeli nesne: HEDİYE rozeti + koordinatör). */ .rt-about-name__pair { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rt-sp-4); grid-template-columns: minmax(0, 1fr); } @media (min-width: 720px) { .rt-about-name__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rt-sp-5); } } .rt-about-name__word { display: flex; align-items: center; gap: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); padding: clamp(1rem, 0.8rem + 1vw, 1.75rem); border-radius: var(--rt-rd-xl); background: var(--rt-band-honey); } .rt-about-name__word--talks { background: var(--rt-band-blush); } .rt-about-name__tile { flex: none; display: grid; place-items: center; inline-size: 88px; block-size: 88px; border: 2px solid var(--rt-offset-ink); border-radius: 24px; background: var(--rt-surface-default); transform: rotate(calc(-3deg * var(--rt-dir))); } .rt-about-name__word--talks .rt-about-name__tile { transform: rotate(calc(3deg * var(--rt-dir))); } .rt-about-name__tile .rt-growth { inline-size: 64px; block-size: 64px; } .rt-about-name__text { display: flex; flex-direction: column; gap: var(--rt-sp-1); min-inline-size: 0; } .rt-about-name__title { margin: 0; font-family: var(--rt-f-display); font-size: var(--rt-f-display-md); font-weight: var(--rt-fw-black); line-height: var(--rt-lh-tight); letter-spacing: var(--rt-ls-display); color: var(--rt-text-heading); } .rt-about-name__text p { margin: 0; color: var(--rt-text-primary); } @media (max-width: 479.98px) { .rt-about-name__tile { inline-size: 64px; block-size: 64px; border-radius: 18px; } .rt-about-name__tile .rt-growth { inline-size: 48px; block-size: 48px; } } /* 1.2 Değerler: kompakt kart, ikon lavanta karoda. */ .rt-about-values__list { list-style: none; margin: 0; padding: 0; } .rt-about-value { background: var(--rt-surface-default); } .rt-about-value__icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; margin-block-end: var(--rt-sp-1); border-radius: 14px; background: var(--rt-band-sky); color: var(--rt-action-ink); } .rt-about-value__icon .rt-icon { inline-size: 24px; block-size: 24px; } .rt-about-value .rt-card__body { color: var(--rt-text-primary); } /* 1.3 Derslerimiz bir bakışta: dört gerçek, tablo değil kutucuk. Tanışma dersi HEDİYE rozeti taşır. */ .rt-about-facts__grid { display: grid; gap: var(--rt-sp-6); grid-template-columns: minmax(0, 1fr); } @media (min-width: 960px) { .rt-about-facts__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--rt-sp-8); align-items: center; } } .rt-about-facts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rt-sp-5) var(--rt-sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 600px) { .rt-about-facts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .rt-about-fact { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--rt-sp-1); min-block-size: 6.5rem; padding: var(--rt-sp-4); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); background: var(--rt-band-mist); } .rt-about-fact--format { grid-column: 1 / -1; min-block-size: 0; } @media (max-width: 599.98px) { .rt-about-fact--trial { grid-column: 1 / -1; } } .rt-about-fact__label { font-size: var(--rt-f-xs); font-weight: var(--rt-fw-black); letter-spacing: var(--rt-ls-tag); text-transform: uppercase; color: var(--rt-text-secondary); } .rt-about-fact__value { font-family: var(--rt-f-display); font-size: var(--rt-f-display-md); font-weight: var(--rt-fw-black); line-height: var(--rt-lh-tight); color: var(--rt-text-heading); font-variant-numeric: tabular-nums; } .rt-about-fact--format .rt-about-fact__value { font-size: var(--rt-f-lg); line-height: var(--rt-lh-snug); } /* 1.4 Başlangıç: koordinatör kartı sayfanın ikinci (ve son) sert gölgeli nesnesidir. */ .rt-about-team__grid { display: grid; gap: var(--rt-sp-6); grid-template-columns: minmax(0, 1fr); } @media (min-width: 960px) { .rt-about-team__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--rt-sp-8); align-items: center; } } .rt-about-guide { display: flex; flex-direction: column; align-items: flex-start; gap: var(--rt-sp-3); padding: clamp(1.25rem, 1rem + 1vw, 2rem); background: var(--rt-surface-default); } .rt-about-guide p { margin: 0; } .rt-about-guide__glyph, .rt-contact__glyph { display: grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px; border: 2px solid var(--rt-offset-ink); border-radius: 50%; background: var(--rt-fab-bg); color: var(--rt-fab-ink); } .rt-about-guide__glyph .rt-icon, .rt-contact__glyph .rt-icon { inline-size: 22px; block-size: 22px; stroke-width: 2; } .rt-about-guide__title, .rt-contact__card-title { margin: 0; font-family: var(--rt-f-display); font-size: var(--rt-f-xl); font-weight: var(--rt-fw-black); line-height: var(--rt-lh-snug); color: var(--rt-text-heading); } /* --- 2. HİKÂYEMİZ: numaralı yol ------------------------------------------------------------------------------ */ .rt-chapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .rt-chapters__item { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: clamp(1rem, 0.7rem + 1vw, 1.75rem); padding-block-end: clamp(2rem, 1.6rem + 1.4vw, 3rem); } .rt-chapters__item:last-child { padding-block-end: 0; } .rt-chapters__num { grid-column: 1; grid-row: 1; align-self: start; display: grid; place-items: center; inline-size: 56px; block-size: 56px; border: 2px solid var(--rt-offset-ink); border-radius: 50%; background: var(--rt-band-mist); color: var(--rt-text-heading); font-family: var(--rt-f-display); font-size: var(--rt-f-lg); font-weight: var(--rt-fw-black); font-variant-numeric: tabular-nums; } /* Yolun başı sayfanın TEK sert gölgeli çıkartmasıdır (lime); diğer duraklar düz. */ .rt-chapters__item:first-child .rt-chapters__num { background: var(--rt-action-primary-bg); color: var(--rt-action-primary-text); box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-offset-ink); } /* Rota: dairenin altından bir sonraki daireye. KALEM ÇİZGİSİ (R1 B9, 2026-09-15): ana sayfadaki üç adımın yoluyla AYNI dil — düz 3 px kalem; ekrana girince (rt.js drawOnView → .is-drawn) yukarıdan aşağı yavaşça çizilir, betik yoksa ya da hareketi azalt tercihinde hazır çizili durur. Eskiden ailenin kesik çizgisini (.rt-doodle__dash, 6/8) taşıyordu ve hiç çizilmiyordu (Owner 2026-09-14, birebir: "sayılar arası kesik çizgiler profesyonel durmuyor. orada da kalemle çiziyor gibi bir kurgu ve çizgi ile birleştirme yapabiliriz"). Süre ve eğri adımların yoluyla aynıdır; çizim hareketi bu grubun kuralı gereği yalnız no-preference içindedir (başlangıç kırpması ve yedekler dışarıda). */ .rt-chapters__route { position: absolute; inset-block-start: 68px; inset-inline-start: 12px; inline-size: 32px; block-size: calc(100% - 80px); max-inline-size: none; } [dir="rtl"] .rt-chapters__route { transform: scaleX(-1); } .rt-chapters__route .rt-doodle__dash { stroke-dasharray: none; stroke-width: 3px; } .rt-chapters__route { clip-path: inset(0 -40% 100% -40%); } @media (prefers-reduced-motion: no-preference) { .rt-chapters__route.is-drawn { animation: rt-route-draw 1100ms cubic-bezier(0.6, 0.05, 0.3, 1) 200ms forwards; } } @media (scripting: none) { .rt-chapters__route, .rt-chapters__route.is-drawn { clip-path: none; animation: none; } } @media (prefers-reduced-motion: reduce) { .rt-chapters__route, .rt-chapters__route.is-drawn { clip-path: none; animation: none; } } .rt-chapters__body { grid-column: 2; grid-row: 1; min-inline-size: 0; padding-block-start: 10px; } .rt-chapters__title { margin: 0 0 var(--rt-sp-2); font-family: var(--rt-f-display); font-size: var(--rt-f-display-md); font-weight: var(--rt-fw-black); line-height: var(--rt-lh-snug); letter-spacing: var(--rt-ls-display); color: var(--rt-text-heading); text-wrap: balance; } .rt-chapters__body p { margin: 0; line-height: 1.7; color: var(--rt-text-primary); max-inline-size: 62ch; } @media (max-width: 479.98px) { .rt-chapters__item { grid-template-columns: 44px minmax(0, 1fr); } .rt-chapters__num { inline-size: 44px; block-size: 44px; font-size: var(--rt-f-md); } .rt-chapters__route { inset-block-start: 54px; inset-inline-start: 6px; block-size: calc(100% - 64px); } .rt-chapters__body { padding-block-start: 6px; } } /* --- 3. MANİFESTO: dört ilke kartı (beyaz kuşakta mist kartlar) -------------------------------------------------- */ .rt-principles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rt-sp-5); grid-template-columns: minmax(0, 1fr); } @media (min-width: 720px) { .rt-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .rt-principle { display: flex; flex-direction: column; gap: var(--rt-sp-3); padding: clamp(1.25rem, 1rem + 1vw, 2rem); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); background: var(--rt-band-mist); } /* İlk ilke açılış cümlesidir: tek sert gölgeli kart (kontrollü asimetri, sayfada bir kez). */ .rt-principle:first-child { border-color: var(--rt-offset-ink); background: var(--rt-surface-default); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-offset-ink); } /* Numara: --rt-text-link (mercan-derin, 5,9:1) — küçülse de AA kalır. */ .rt-principle__num { font-family: var(--rt-f-display); font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); font-weight: var(--rt-fw-black); line-height: 1; letter-spacing: -0.03em; color: var(--rt-text-link); font-variant-numeric: tabular-nums; } .rt-principle__title { margin: 0; font-family: var(--rt-f-display); font-size: var(--rt-f-display-md); font-weight: var(--rt-fw-black); line-height: var(--rt-lh-snug); letter-spacing: var(--rt-ls-display); color: var(--rt-text-heading); text-wrap: balance; } .rt-principle__text { margin: 0; line-height: 1.7; color: var(--rt-text-primary); } /* --- 4. YASAL: sakin belge + içindekiler ----------------------------------------------------------------------- */ .rt-legal .rt-cms { font-size: 1rem; line-height: 1.7; } .rt-legal .rt-cms h2 { font-size: var(--rt-f-display-md); font-weight: var(--rt-fw-black); margin-block-start: var(--rt-sp-6); scroll-margin-block-start: calc(var(--rt-header-height) + var(--rt-sp-4)); } .rt-legal .rt-cms h3 { font-size: var(--rt-f-lg); } .rt-legal__grid { display: grid; gap: var(--rt-sp-5); grid-template-columns: minmax(0, 1fr); } .rt-legal-toc__box, .rt-legal-toc__side { border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); background: var(--rt-band-mist); } .rt-legal-toc__side { display: none; } .rt-legal-toc__summary, .rt-legal-toc__heading { display: flex; align-items: center; gap: var(--rt-sp-2); min-block-size: var(--rt-target-comfort); margin: 0; padding: var(--rt-sp-2) var(--rt-sp-4); font-weight: var(--rt-fw-black); color: var(--rt-text-heading); } .rt-legal-toc__summary { cursor: pointer; list-style: none; } .rt-legal-toc__summary::-webkit-details-marker { display: none; } .rt-legal-toc__summary .rt-icon { margin-inline-start: auto; } .rt-legal-toc__box[open] .rt-legal-toc__summary .rt-icon { transform: rotate(180deg); } .rt-legal-toc__count { display: inline-grid; place-items: center; min-inline-size: 28px; block-size: 24px; padding-inline: 6px; border-radius: var(--rt-rd-pill); background: var(--rt-surface-default); font-size: var(--rt-f-xs); font-variant-numeric: tabular-nums; } .rt-legal-toc__list { list-style: none; margin: 0; padding: 0 var(--rt-sp-2) var(--rt-sp-3); display: flex; flex-direction: column; } .rt-legal-toc__box .rt-legal-toc__list { max-block-size: min(60vh, 32rem); overflow-y: auto; } .rt-legal-toc__list a { display: flex; align-items: center; min-block-size: var(--rt-target-min); padding: var(--rt-sp-1) var(--rt-sp-2); border-radius: var(--rt-rd-md); font-size: var(--rt-f-sm); line-height: var(--rt-lh-snug); color: var(--rt-text-heading); text-decoration: none; } .rt-legal-toc__list a:hover { background: var(--rt-surface-default); text-decoration: underline; } @media (min-width: 1080px) { .rt-legal__grid { grid-template-columns: minmax(0, 760px) minmax(0, 300px); justify-content: space-between; gap: var(--rt-sp-8); align-items: start; } .rt-legal__doc { grid-column: 1; grid-row: 1; } /* Yapışkan sütun görünür alanı ASLA aşmaz: nav'ın kendisi sınırlıdır, liste kalan yükseklikte kayar. */ .rt-legal-toc { grid-column: 2; grid-row: 1; position: sticky; inset-block-start: calc(var(--rt-header-height) + var(--rt-sp-5)); display: flex; flex-direction: column; max-block-size: calc(100vh - var(--rt-header-height) - var(--rt-sp-5) * 2); } .rt-legal-toc__box { display: none; } .rt-legal-toc__side { display: flex; flex-direction: column; min-block-size: 0; max-block-size: 100%; } .rt-legal-toc__side .rt-legal-toc__list { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; } } /* --- 5. PROGRAMLAR ----------------------------------------------------------------------------------------------- */ /* Beyaz karşılaştırma kuşağında kartlar mist dolgulu (beyaz üstüne beyaz kart okunmuyordu). */ .rt-prog-compare .rt-format { background: var(--rt-band-mist); border-color: var(--rt-border-subtle); } .rt-prog-compare__details { max-inline-size: var(--rt-container-narrow); } /* Owner H "kompakt değil": telefonda bir kart bir ekrana sığar. Etiket küçük büyük harf, değer hemen altında; satır araları sıkı. Asıl çözüm format-card kompakt çeşidi (REQUESTS R-C3); bu, o gelene kadar sayfa katmanıdır. */ @media (max-width: 719.98px) { .rt-prog-compare .rt-format { gap: var(--rt-sp-2); padding: var(--rt-sp-4); } .rt-prog-compare .rt-format__title { font-size: var(--rt-f-xl); line-height: var(--rt-lh-snug); } .rt-prog-compare .rt-format__text { font-size: var(--rt-f-sm); line-height: 1.55; } .rt-prog-compare .rt-format__fact { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 6px; } .rt-prog-compare .rt-format__fact dt { font-size: var(--rt-f-xs); letter-spacing: var(--rt-ls-tag); text-transform: uppercase; color: var(--rt-text-secondary); } .rt-prog-compare .rt-format__fact dd { font-size: var(--rt-f-sm); line-height: 1.45; } .rt-prog-compare .rt-format__note { padding: var(--rt-sp-2) var(--rt-sp-3); } } /* Owner I: uygunluk bölümü sayfanın sol çizgisinde başlar; okuma sütunu çocuklarda daralır (kapsayıcıda değil). */ .rt-prog-fit__inner > * { max-inline-size: var(--rt-container-narrow); } .rt-prog-fit__list { counter-reset: rt-fit; gap: var(--rt-sp-3); padding-inline-start: 0; border-inline-start: 0; } .rt-prog-fit__list .rt-questions__item { counter-increment: rt-fit; position: relative; display: flex; align-items: center; min-block-size: 36px; padding-inline-start: 50px; font-weight: var(--rt-fw-bold); color: var(--rt-text-heading); } .rt-prog-fit__list .rt-questions__item::before { content: counter(rt-fit); position: absolute; inset-inline-start: 0; inset-block-start: 0; display: grid; place-items: center; inline-size: 36px; block-size: 36px; box-sizing: border-box; border: 2px solid var(--rt-accent-rule); border-radius: 50%; background: var(--rt-band-honey); color: var(--rt-text-eyebrow); font-family: var(--rt-f-display); font-size: var(--rt-f-sm); font-weight: var(--rt-fw-black); } /* --- 6. İLETİŞİM (beyaz kuşak) ------------------------------------------------------------------------------------- */ .rt-contact__grid { display: grid; gap: var(--rt-sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 960px) { .rt-contact__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--rt-sp-7); } } .rt-contact__main { display: flex; flex-direction: column; gap: var(--rt-sp-3); padding: clamp(1.25rem, 1rem + 1.2vw, 2.25rem); background: var(--rt-surface-default); } .rt-contact__title { margin: 0; font-family: var(--rt-f-display); font-size: var(--rt-f-display-lg); font-weight: var(--rt-fw-black); line-height: var(--rt-lh-display); letter-spacing: var(--rt-ls-display); color: var(--rt-text-heading); } .rt-contact__text { margin: 0; color: var(--rt-text-secondary); } /*
    tarayıcıda italiktir; rakamlar dik kalır (rt.css 3950'deki kural buna ek güvence). */ .rt-contact .rt-contact-hub__address { font-style: normal; } .rt-contact .rt-channels { flex-direction: column; flex-wrap: nowrap; gap: var(--rt-sp-2); margin-block-start: var(--rt-sp-2); } .rt-contact .rt-channels__item { display: block; } .rt-contact .rt-contact__link { display: flex; align-items: center; gap: var(--rt-sp-3); align-self: stretch; inline-size: 100%; box-sizing: border-box; min-block-size: 68px; padding-block: var(--rt-sp-2); padding-inline: var(--rt-sp-3) var(--rt-sp-4); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); background: var(--rt-band-mist); color: var(--rt-text-heading); box-shadow: none; font-size: var(--rt-f-md); text-decoration: none; } .rt-contact .rt-contact__link:hover { border-color: var(--rt-offset-ink); background: var(--rt-surface-default); text-decoration: none; } /* Ok ikonu rt-icon--directional taşır; transform burada verilmez ki rt.css'in RTL aynalaması (scaleX(-1)) kalsın. */ .rt-contact .rt-contact__link > .rt-icon { inline-size: 20px; block-size: 20px; flex: none; margin-inline-start: auto; } .rt-contact__link-text { display: flex; flex-direction: column; min-inline-size: 0; gap: 2px; } .rt-contact .rt-channels__label { font-size: var(--rt-f-xs); line-height: var(--rt-lh-tight); } .rt-contact__value { font-family: var(--rt-f-display); font-size: var(--rt-f-xl); font-weight: var(--rt-fw-black); line-height: var(--rt-lh-tight); font-variant-numeric: tabular-nums; text-align: start; overflow-wrap: anywhere; } @media (max-width: 399.98px) { .rt-contact__value { font-size: var(--rt-f-lg); } .rt-contact .rt-contact__link { gap: var(--rt-sp-2); padding-inline: var(--rt-sp-2) var(--rt-sp-3); } } .rt-contact__note { margin: 0; font-size: var(--rt-f-xs); color: var(--rt-text-secondary); } @media (prefers-reduced-motion: no-preference) { .rt-contact .rt-contact__link { transition: transform var(--rt-mo-fast) var(--rt-mo-ease), box-shadow var(--rt-mo-fast) var(--rt-mo-ease), border-color var(--rt-mo-base) var(--rt-mo-ease); } .rt-contact .rt-contact__link:hover { transform: translate(calc(-1px * var(--rt-dir)), -1px); box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-offset-ink); } .rt-contact .rt-contact__link:active { transform: none; box-shadow: none; } } .rt-contact__aside { display: flex; flex-direction: column; gap: var(--rt-sp-5); } .rt-contact__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--rt-sp-3); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); background: var(--rt-band-mist); } .rt-contact__card p { margin: 0; } .rt-contact__card-glyph { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 14px; background: var(--rt-surface-default); color: var(--rt-action-ink); } .rt-contact__card-glyph .rt-icon { inline-size: 22px; block-size: 22px; } .rt-contact__more { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .rt-contact__row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--rt-sp-1); padding-block: var(--rt-sp-4); } .rt-contact__row + .rt-contact__row { border-block-start: 1px solid var(--rt-border-subtle); } .rt-contact__row:first-child { padding-block-start: 0; } .rt-contact__row-title { margin: 0; font-family: var(--rt-f-display); font-size: var(--rt-f-lg); font-weight: var(--rt-fw-black); line-height: var(--rt-lh-snug); color: var(--rt-text-heading); } .rt-contact__row p { margin: 0; font-size: var(--rt-f-sm); color: var(--rt-text-secondary); } /* --- 7. SSS kart satırları (_c/faq.php variant card) — yalnız semantic token; rt.component'e taşınabilir --------- */ .rt-faq--card { gap: var(--rt-sp-3); } .rt-faq--card .rt-faq__item { border: 2px solid var(--rt-border-subtle); border-radius: 18px; background: var(--rt-band-mist); } .rt-faq--card .rt-faq__q { justify-content: flex-start; gap: var(--rt-sp-3); min-block-size: 64px; padding-block: var(--rt-sp-3); padding-inline: var(--rt-sp-4) var(--rt-sp-3); line-height: var(--rt-lh-snug); } .rt-faq--card .rt-faq__text { flex: 1 1 auto; min-inline-size: 0; } .rt-faq__num { flex: none; min-inline-size: 1.75rem; font-family: var(--rt-f-display); font-size: var(--rt-f-sm); font-weight: var(--rt-fw-black); letter-spacing: 0.04em; color: var(--rt-text-link); font-variant-numeric: tabular-nums; } .rt-faq__toggle { flex: none; display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--rt-surface-default); color: var(--rt-action-ink); } .rt-faq--card .rt-faq__item:hover { border-color: var(--rt-offset-ink); } .rt-faq--card .rt-faq__item[open] { border-color: var(--rt-offset-ink); background: var(--rt-surface-default); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-offset-ink); } .rt-faq--card .rt-faq__item[open] .rt-faq__toggle { background: var(--rt-action-primary-bg); } .rt-faq--card .rt-faq__a { padding-block: 0 var(--rt-sp-4); padding-inline: var(--rt-sp-4); line-height: 1.7; } .rt-faq--numbered .rt-faq__a { padding-inline-start: calc(var(--rt-sp-4) + 1.75rem + var(--rt-sp-3)); } @media (max-width: 479.98px) { .rt-faq--numbered .rt-faq__a { padding-inline-start: var(--rt-sp-4); } } @media (prefers-reduced-motion: no-preference) { .rt-faq--card .rt-faq__item { transition: border-color var(--rt-mo-base) var(--rt-mo-ease), box-shadow var(--rt-mo-base) var(--rt-mo-ease); } } } /* ============================================================================= TEMA V2.1 — İÇERİK GRUBU (blog, blog yazısı, yorumlar, 404, giriş / şifre yenileme) — 2026-09-15 UYGULAMA: bu blok rt.css'in EN SONUNA, temel (foundation) §5 PAGE bloğundan SONRA eklenir. Önce css-replacements.md (C1–C3) yerinde uygulanır. Belge: scratchpad v2/content/CHANGES.md. KURALLAR: yalnız rt.page (ham renk ve --rt-c-* burada serbest); :is() virgül listesi yok; 50vw yok; yeni :focus-visible outline kuralı yok (odak halkası box-shadow); hareket yalnız prefers-reduced-motion: no-preference içinde, reduce altında hazır/durgun. Temel token'larına (--rt-dir, --rt-offset-*, --rt-band-*, --rt-decor-*) yedek değer verilir: temel birleşmeden uygulanırsa sayfa bozulmaz (yine de sıra temel → içerik). ============================================================================= */ @layer rt.page { /* ---------------------------------------------------------------- 1. BLOG LİSTESİ (/blog, /blog/category/{id}) */ /* Kuşaklar (Owner L "geçişler belirgin olsun"): sayfa başı sky-deep #DEE1F7 (temel) → liste kağıt beyazı #FFF (ΔL* 10,2) → lacivert kapanış. Eskiden ikisi de aynı açık lavantaydı. */ .rt-section.rt-blog-list { background-color: var(--rt-band-paper, #FFFFFF); } .rt-blog-head .rt-page-head__inner { gap: var(--rt-sp-3); } .rt-blog-head__tag { margin-block-end: var(--rt-sp-1); } /* Konu şeridi girişin hemen altında, sayfa başının içinde: başlık → giriş → konular tek denetim alanıdır. */ .rt-blog-cats { margin-block-start: var(--rt-sp-2); } .rt-blog-cats .rt-chips { gap: var(--rt-sp-2); } .rt-blog-cats .rt-chips a.rt-chip { min-block-size: var(--rt-target-min); padding-inline: var(--rt-sp-4); border: 2px solid var(--rt-c-navy); background: var(--rt-c-white); color: var(--rt-c-navy); text-decoration: none; } .rt-blog-cats .rt-chips a.rt-chip:hover { background: var(--rt-c-navy-tint); } .rt-blog-cats .rt-chips a.rt-chip--on, .rt-blog-cats .rt-chips a.rt-chip--on:hover { background: var(--rt-c-navy-deep); border-color: var(--rt-c-navy-deep); color: var(--rt-c-white); box-shadow: calc(var(--rt-offset-1, 2px) * var(--rt-dir, 1)) var(--rt-offset-1, 2px) 0 0 var(--rt-c-lime); } /* Izgara: öne çıkan kart satırın tamamı, kalanlar iki sütun (üç sütun 3 yazıda yarım satır boşluk bırakıyordu; Owner H). */ .rt-blog-list .rt-posts { gap: var(--rt-sp-6) var(--rt-sp-5); } @media (min-width: 720px) { .rt-blog-list .rt-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rt-blog-list .rt-posts__item--feature { grid-column: 1 / -1; } } @media (min-width: 960px) { .rt-blog-list .rt-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Kart: 2 px sakin kontur, tamamı tıklanır (başlık bağlantısının ::after katmanı), odakta halka. */ .rt-blog-list .rt-post { position: relative; border: 2px solid var(--rt-border-subtle); box-shadow: none; transition: none; } .rt-blog-list .rt-post__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .rt-blog-list .rt-post:hover { border-color: var(--rt-c-navy-deep); box-shadow: none; transform: none; } .rt-blog-list .rt-post:hover .rt-post__title a { text-decoration: underline; text-underline-offset: 3px; } .rt-blog-list .rt-post:focus-within { border-color: var(--rt-c-navy-deep); box-shadow: 0 0 0 3px var(--rt-c-navy); } .rt-blog-list .rt-post__body { flex: 1 1 auto; gap: var(--rt-sp-3); padding: var(--rt-sp-5); } .rt-blog-list .rt-post__title { font-size: var(--rt-f-xl); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; } /* AYRAÇ SATIR BAŞINA DÜŞMEZ (R1 2026-09-15, 390 px'te ölçüldü: kategori + tarih ilk satırı doldurunca "· Yazan:" alt satıra "·" ile başlıyordu). Ayraç öğenin ÖNÜNDEKİ boşluğa mutlak konumla çizilir; sarılan satırın ilk öğesinin ayracı kapsayıcının başlangıç kenarının dışında kalır ve kırpılır. overflow-x: clip yalnız yatayı keser (kaydırma alanı açmaz, dikey taşma görünür kalır). */ .rt-blog-list .rt-post__meta, .rt-post-head__meta { column-gap: 1.25rem; overflow-x: clip; } .rt-blog-list .rt-post__meta > *, .rt-post-head__meta > * { position: relative; } .rt-blog-list .rt-post__meta > * + *::before, .rt-post-head__meta > * + *::before { content: "·"; position: absolute; inset-inline-end: calc(100% + 0.5rem); color: var(--rt-text-secondary); } .rt-blog-list .rt-post__more { margin-block-start: auto; min-block-size: 0; padding-block-start: var(--rt-sp-1); font-size: var(--rt-f-sm); } .rt-blog-list .rt-post__more .rt-icon { inline-size: 18px; block-size: 18px; } /* ÖNE ÇIKAN KART (Owner A, E): 900 px ve üstünde görsel 7 / metin 5, lacivert-derin kontur ve 6 px sert gölge. */ @media (min-width: 900px) { .rt-blog-list .rt-post--feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-color: var(--rt-c-navy-deep); box-shadow: calc(var(--rt-offset-3, 6px) * var(--rt-dir, 1)) var(--rt-offset-3, 6px) 0 0 var(--rt-c-navy-deep); } .rt-blog-list .rt-post--feature:hover { box-shadow: calc(var(--rt-offset-3, 6px) * var(--rt-dir, 1)) var(--rt-offset-3, 6px) 0 0 var(--rt-c-navy-deep); } .rt-blog-list .rt-post--feature:focus-within { box-shadow: 0 0 0 3px var(--rt-c-navy), calc(var(--rt-offset-3, 6px) * var(--rt-dir, 1)) var(--rt-offset-3, 6px) 0 0 var(--rt-c-navy-deep); } .rt-blog-list .rt-post--feature .rt-post__media { aspect-ratio: auto; block-size: 100%; min-block-size: 18rem; } .rt-blog-list .rt-post--feature .rt-post__body { justify-content: center; gap: var(--rt-sp-4); padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); } .rt-blog-list .rt-post--feature .rt-post__title { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.2; } .rt-blog-list .rt-post--feature .rt-post__more { margin-block-start: var(--rt-sp-2); font-size: var(--rt-f-md); } } @media (prefers-reduced-motion: no-preference) { .rt-blog-list .rt-post { transition: transform var(--rt-mo-base) var(--rt-mo-ease), box-shadow var(--rt-mo-base) var(--rt-mo-ease), border-color var(--rt-mo-base) var(--rt-mo-ease); } .rt-blog-list .rt-post:hover { transform: translate(calc(-2px * var(--rt-dir, 1)), -2px); box-shadow: calc(var(--rt-offset-3, 6px) * var(--rt-dir, 1)) var(--rt-offset-3, 6px) 0 0 var(--rt-c-navy-deep); } .rt-blog-list .rt-post__more .rt-icon { transition: translate var(--rt-mo-base) var(--rt-mo-ease); } .rt-blog-list .rt-post:hover .rt-post__more .rt-icon { translate: calc(3px * var(--rt-dir, 1)) 0; } } @media (prefers-reduced-motion: reduce) { .rt-blog-list .rt-post, .rt-blog-list .rt-post:hover { transition: none; transform: none; } } /* ---------------------------------------------------------------- 2. BLOG YAZISI */ .rt-post-head .rt-page-head__inner { gap: var(--rt-sp-3); } .rt-post-head__topic { margin: 0; } .rt-post-head__cat { position: relative; text-decoration: none; } /* Eğik etiket 26 px'tir; görünümü değiştirmeden dokunma alanı 44 px'e çıkar. */ .rt-post-head__cat::after { content: ""; position: absolute; inset: -11px -6px; } .rt-post-head__cat:hover { text-decoration: underline; text-underline-offset: 2px; } .rt-post-head__meta { font-size: var(--rt-f-sm); color: var(--rt-text-secondary); } /* Yazı kağıt beyazında okunur: sayfa başı #DEE1F7 → yazı #FFF (ΔL* 10,2) → lacivert kapanış. */ .rt-section.rt-post-article { background-color: var(--rt-band-paper, #FFFFFF); } .rt-post-article__inner { display: flex; flex-direction: column; gap: var(--rt-sp-6); } /* KAPAK TAŞMASI (Owner A, E): sayfa başı alttan 72 px uzar, kapak yazı bölümünün başından o kadar yukarı çıkar ve sayfa başı kuşağının üstüne biner. Sütun genişliğinde kalır; gölge 6 px (telefonda 16 px kenar boşluğunun içinde). */ .rt-post-head--cover { padding-block-end: calc(var(--rt-sp-6) + 4.5rem); border-block-end: 0; } .rt-section.rt-post-article--cover { padding-block-start: 0; } .rt-post__figure { position: relative; z-index: 1; margin: -4.5rem 0 0; overflow: hidden; border: 2px solid var(--rt-c-navy-deep); border-radius: var(--rt-rd-lg); background: var(--rt-c-white); box-shadow: calc(var(--rt-offset-3, 6px) * var(--rt-dir, 1)) var(--rt-offset-3, 6px) 0 0 var(--rt-c-lime); } .rt-post__figure .rt-post__cover { inline-size: 100%; max-inline-size: none; block-size: auto; margin: 0; border-radius: 0; } @media (max-width: 719.98px) { .rt-post-head--cover { padding-block-end: calc(var(--rt-sp-5) + 3rem); } .rt-post__figure { margin-block-start: -3rem; } } .rt-post-foot { padding-block-start: var(--rt-sp-5); border-block-start: 2px solid var(--rt-border-subtle); } .rt-post-foot__back { gap: var(--rt-sp-3); text-decoration: none; } .rt-post-foot__back:hover { text-decoration: underline; text-underline-offset: 3px; } .rt-post-foot__icon { display: inline-grid; place-items: center; flex: none; inline-size: 36px; block-size: 36px; border: 2px solid var(--rt-c-navy-deep); border-radius: 50%; background: var(--rt-c-lime); color: var(--rt-c-navy-deep); } /* GERİ OKU: 'arrow' ileri gösterir. LTR'de aynalanır (sola); RTL'de dönüşüm yoktur (sağa = RTL'de geri). */ .rt-post-foot__icon .rt-icon { inline-size: 18px; block-size: 18px; stroke-width: 2.2; transform: scaleX(-1); } [dir="rtl"] .rt-post-foot__icon .rt-icon { transform: none; } /* ---------------------------------------------------------------- 3. YORUMLAR (/yorumlar, /reviews) */ /* Kuşaklar: sayfa başı kağıt beyazı → liste sky-deep #DEE1F7 (ΔL* 10,2; eski navy-tint #E8ECFD ile kağıt arası 6,4 idi ve ekranda zor seçiliyordu). Beyaz konuşma balonları koyu lavanta üstünde belirginleşir. */ .rt-page-head.rt-reviews-head { background-color: var(--rt-band-paper, #FFFFFF); } .rt-nk--tint.rt-reviews-list { background-color: var(--rt-band-head, #DEE1F7); } .rt-reviews-head .rt-page-head__inner { gap: var(--rt-sp-3); } .rt-reviews-facts { list-style: none; margin: var(--rt-sp-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--rt-sp-3); } .rt-reviews-facts__item { display: inline-flex; align-items: center; gap: var(--rt-sp-2); min-block-size: 44px; padding: 6px 16px 6px 6px; border-radius: var(--rt-rd-pill); background: var(--rt-c-navy-tint); color: var(--rt-c-navy-deep); font-size: var(--rt-f-sm); font-weight: 800; line-height: 1.2; } .rt-reviews-facts__icon { display: inline-grid; place-items: center; flex: none; inline-size: 32px; block-size: 32px; border: 2px solid var(--rt-c-navy-deep); border-radius: 50%; background: var(--rt-c-lime); color: var(--rt-c-navy-deep); } .rt-reviews-facts__icon .rt-icon { inline-size: 18px; block-size: 18px; stroke-width: 2; } .rt-reviews-facts__flags { display: inline-flex; align-items: center; padding-inline-start: 6px; } .rt-reviews-facts__flags .rt-flag { inline-size: 24px; block-size: 16px; max-inline-size: none; flex: none; border-radius: 3px; box-shadow: 0 0 0 2px var(--rt-c-navy-tint); } .rt-reviews-facts__flags .rt-flag + .rt-flag { margin-inline-start: -5px; } /* Liste: sütun (masonry) yerine satır satır ızgara — okuma sırası soldan sağa, kartlar aynı satırda başlar (Owner H, I). */ .rt-reviews-list .rt-reviews-page__stories { display: grid; columns: auto; align-items: start; grid-template-columns: minmax(0, 1fr); gap: var(--rt-sp-6) var(--rt-sp-5); } @media (min-width: 720px) { .rt-reviews-list .rt-reviews-page__stories { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .rt-reviews-list .rt-reviews-page__stories { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .rt-reviews-list .rt-reviews-page__stories > li { margin-block-end: 0; padding-block-start: 4px; } /* Metin duvarı yok (Owner H): uzun söz 4 satırda kısalır, "Devamını oku" açar (rt.js quoteClamp; metin DOM'da kalır). */ .rt-reviews-list .rt-quote [data-rt-quote-text].is-clamped { -webkit-line-clamp: 4; } .rt-reviews-list .rt-quote__bubble { gap: 10px; } /* ---------------------------------------------------------------- 4. BULUNAMAYAN SAYFA (404) */ .rt-notfound__copy { display: flex; flex-direction: column; gap: var(--rt-sp-4); min-inline-size: 0; } .rt-notfound__copy > .rt-tag { margin-block-end: var(--rt-sp-1); } .rt-notfound__copy .rt-page-head__title { margin: 0; } .rt-notfound__links { gap: var(--rt-sp-3); padding-block-start: var(--rt-sp-4); } .rt-notfound__label { margin: 0; font-size: var(--rt-f-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rt-text-secondary); } .rt-notfound__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rt-sp-2); } @media (min-width: 560px) { .rt-notfound__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rt-sp-3); } } .rt-notfound__link { display: flex; align-items: center; justify-content: space-between; gap: var(--rt-sp-3); min-block-size: 52px; padding: var(--rt-sp-2) var(--rt-sp-4); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-md); background: var(--rt-surface-default); color: var(--rt-text-heading); font-weight: var(--rt-fw-bold); text-decoration: none; } .rt-notfound__link .rt-icon { flex: none; inline-size: 18px; block-size: 18px; stroke-width: 2.2; color: var(--rt-text-link); } .rt-notfound__link:hover, .rt-notfound__link:focus-visible { border-color: var(--rt-border-focus); background: var(--rt-surface-accent); text-decoration: none; } @media (prefers-reduced-motion: no-preference) { .rt-notfound__link { transition: border-color var(--rt-mo-base) var(--rt-mo-ease), background-color var(--rt-mo-base) var(--rt-mo-ease); } .rt-notfound__link .rt-icon { transition: translate var(--rt-mo-base) var(--rt-mo-ease); } .rt-notfound__link:hover .rt-icon { translate: calc(3px * var(--rt-dir, 1)) 0; } } /* Marka sahnesi (1024 px ve üstü; C1 kırılımı): uyuyan kedi (süs ailesinin çizimi, maske) + eğik soru balonu + güneş yıldızı. */ .rt-notfound__art { position: relative; inline-size: min(100%, 23rem); aspect-ratio: 23 / 20; } .rt-notfound__art .rt-notfound__talk { position: absolute; inset-block-start: 0; inset-inline-end: 2%; inline-size: 56%; block-size: auto; max-inline-size: none; transform: rotate(calc(4deg * var(--rt-dir, 1))); } .rt-notfound__shadow { fill: var(--rt-c-lime); } .rt-notfound__cat { position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 82%; aspect-ratio: 268 / 200; background-color: var(--rt-decor-ink-strong, rgba(59, 46, 158, 0.4)); -webkit-mask: url("deco/sleeping-cat.svg") no-repeat center / contain; mask: url("deco/sleeping-cat.svg") no-repeat center / contain; } .rt-notfound__art .rt-notfound__star { position: absolute; inset-block-start: 10%; inset-inline-start: 8%; inline-size: 40px; block-size: 40px; max-inline-size: none; } /* İki kedi asla birlikte görünmez: sahne 1024'ten itibaren, süs (köşe çıkartması) yalnız 1024 altında. */ @media (min-width: 1024px) { .rt-notfound > .rt-decor.rt-notfound__decor { display: none; } } @media (forced-colors: active) { .rt-notfound__cat { visibility: hidden; } } /* 404 kapanış bandıyla bitmez: alt bilginin 64 px üst boşluğunda gövde zemini (#F6F8FF) açık bir şerit olarak görünüyordu (preview 1440 ve 390). Kapanış bandı için rt.css'te zaten var olan kalıbın aynısı (tek argümanlı :has; desteklemeyen tarayıcıda yalnız eski şerit kalır). */ .rt-shell__main:has(> .rt-notfound:last-child) ~ .rt-footer { margin-block-start: 0; } /* ---------------------------------------------------------------- 5. GİRİŞ + ŞİFRE YENİLEME (auth.css sayfaları) */ /* Zemin marka mistidir: beyaz form kartı öne çıkar (auth.css aynı katmanda sonra yüklenir; özgüllük yüksek tutulur). */ body.rt.rt-auth-page { background-color: var(--rt-band-mist, #EEF1FD); } .rt-auth-stage { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; } .rt-auth-story { display: none; } /* Kalem vurgusu bir kez çizilir (rt.js yok): başta gizli, 350 ms sonra soldan sağa açılır; reduce altında hazır. */ .rt-auth-card .rt-mark__ink { clip-path: inset(-60% -4% -60% -4%); } @media (prefers-reduced-motion: no-preference) { .rt-auth-card .rt-mark__ink { animation: rt-auth-pen 1100ms cubic-bezier(0.6, 0.05, 0.3, 1) 350ms both; } [dir="rtl"] .rt-auth-card .rt-mark__ink { animation-name: rt-auth-pen-rtl; } } @media (prefers-reduced-motion: reduce) { .rt-auth-card .rt-mark__ink { animation: none; clip-path: none; } } @keyframes rt-auth-pen { from { clip-path: inset(-60% 102% -60% -4%); } to { clip-path: inset(-60% -4% -60% -4%); } } @keyframes rt-auth-pen-rtl { from { clip-path: inset(-60% -4% -60% 102%); } to { clip-path: inset(-60% -4% -60% -4%); } } /* 1100 px ve üstü: form solda (476), marka hikâyesi sağda (420); yardım bağlantısı formun altında ortada. */ @media (min-width: 1100px) { .rt-auth-stage { grid-template-columns: minmax(0, 476px) minmax(0, 420px); grid-template-areas: "card story" "help ."; justify-content: center; column-gap: clamp(2rem, 1rem + 2vw, 3.5rem); } .rt-auth-stage > .rt-auth-card { grid-area: card; margin-inline: 0; } .rt-auth-stage > .rt-auth-help { grid-area: help; justify-self: center; margin-inline: 0; } .rt-auth-stage > .rt-auth-story { grid-area: story; align-self: stretch; } .rt-auth-story { position: relative; isolation: isolate; overflow: hidden; /* İçerik dikeyde ORTADADIR: giriş kartı (658 px) ile şifre kartı (446 px) farklı boydadır; başlığı üste, büyüme sırasını alta yaslamak uzun panelde 330 px'lik boş bir orta bırakıyordu (preview login-1440). */ display: flex; flex-direction: column; justify-content: center; gap: var(--rt-sp-4); padding: 44px 40px 40px; border-radius: 28px; background-color: var(--rt-c-navy-deep); color: var(--rt-c-white); box-shadow: calc(var(--rt-offset-3, 6px) * var(--rt-dir, 1)) var(--rt-offset-3, 6px) 0 0 var(--rt-c-lime); } } .rt-auth-story__title { margin: 0; max-inline-size: 13ch; font-family: var(--rt-f-display); font-size: 2.25rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.022em; color: var(--rt-c-white); text-wrap: balance; } .rt-auth-story__accent { color: var(--rt-c-lime); } .rt-auth-story__text { margin: 0; max-inline-size: 30ch; font-size: 1.0625rem; line-height: 1.55; color: var(--rt-c-navy-on-dark); } /* Nine görüntülü: yarı saydam beyaz, eğik; büyüme sırasının YANINDAKİ boş köşede (alt bitiş). Şifre yenileme kartı kısadır (446 px): metnin altına konan büyük çizim açıklamaya biniyordu (preview ölçtü); köşe her iki panel boyunda da boştur. Temel birleşmediyse --rt-decor-src tanımsızdır: yedek maske tamamen saydamdır, beyaz kutu boyanmaz. */ .rt-auth-story__motif { position: absolute; z-index: -1; pointer-events: none; inset-block-end: 26px; inset-inline-end: 22px; inline-size: 104px; block-size: 100px; background-color: rgba(255, 255, 255, 0.22); -webkit-mask: var(--rt-decor-src, linear-gradient(transparent, transparent)) no-repeat center / contain; mask: var(--rt-decor-src, linear-gradient(transparent, transparent)) no-repeat center / contain; transform: rotate(calc(6deg * var(--rt-dir, 1))); } .rt-auth-growth { margin-block-start: var(--rt-sp-3); display: flex; align-items: center; gap: 14px; } .rt-auth-growth__step { display: grid; place-items: center; flex: none; inline-size: 72px; block-size: 72px; border-radius: 50%; background: var(--rt-c-white); } .rt-auth-growth__step + .rt-auth-growth__step { position: relative; } .rt-auth-growth__step + .rt-auth-growth__step::before { content: ""; position: absolute; inset-inline-end: calc(100% + 3px); inset-block-start: 50%; inline-size: 8px; block-size: 3px; border-radius: 2px; background: var(--rt-c-lime); } .rt-auth-growth__step svg { inline-size: 56px; block-size: 56px; max-inline-size: none; } @media (forced-colors: active) { .rt-auth-story__motif { visibility: hidden; } } } /* ============================================================================= JOURNEY GRUBU — Nasıl işler (/how-it-works), Koordinatörle görüşün (/start), Tanışma dersi akışı (/free-trial) Tema V2.1 (2026-09-15, 2. tur). rt.css'in SONUNA, foundation.css'in rt.page bloğundan SONRA eklenir. Belge: scratchpad v2/journey/CHANGES.md. Önkoşul: foundation yaması (--rt-offset-*, --rt-dir, --rt-band-*, --rt-rd-xl, --rt-fw-black, --rt-f-display-md/lg, --rt-lh-display, --rt-ls-display, --rt-ls-tag, .rt-decor-host, .rt-corner-badge). Kurallar: :is() virgül listesi yok, calc(50% - 50vw) yok, :has() tek argümanlı ve düşerse sayfa bozulmaz, hareket yalnız prefers-reduced-motion: no-preference içinde, mantıksal özellikler (RTL). ============================================================================= */ @layer rt.page { /* ---------------------------------------------------------------- 0. ORTAK */ /* Yolculuğun sonu (/start hazırlık kuşağı, /free-trial sahnesi): alt bilgi bitişir (kapanış bandıyla biten sayfalardaki kuralın aynısı). Alt bilgideki deneme düğmesi ve sabit mobil çubuk artık footer.php'de sunucuda çizilmez (kind start / free-trial; CONSISTENCY 11, foundation footer.php) — eski ".rt-footer__action { display: none }" kuralı bu yüzden silindi. */ .rt-shell__main:has(> .rt-journey-end:last-child) ~ .rt-footer { margin-block-start: 0; } /* Numaralı adımlar (Nasıl işler + /start): lime rozet, lacivert kontur, sert gölge; rozetleri TEK PARÇA DÜZ kalem çizgisi bağlar (Owner C: kesik çizgi yok). Çizgi ölçüleri özel özelliklerden türetilir: rozet boyu, çizgi kalınlığı, kart iç boşluğu ya da adımlar arası boşluk değişirse çizgi yine rozetin ortasından bir sonraki rozete iner. */ .rt-how-journey .rt-journey, .rt-start-steps .rt-journey { --rt-step-badge: 44px; /* rozetin dış boyu (box-sizing: border-box, kontur dahil) */ --rt-step-line: 3px; /* bağlantı çizgisinin kalınlığı */ --rt-step-air: 6px; /* rozet ile çizgi arasındaki nefes (rozetin 2 px gölgesi dahil) */ --rt-step-pad: 0px; /* adım kartının iç boşluğu (kartsız izde 0) */ --rt-step-gap: var(--rt-sp-5); gap: var(--rt-step-gap); } .rt-how-journey .rt-journey__num, .rt-start-steps .rt-journey__num { box-sizing: border-box; inline-size: var(--rt-step-badge); block-size: var(--rt-step-badge); border: 2px solid var(--rt-c-navy-deep); background: var(--rt-action-primary-bg); color: var(--rt-c-navy-deep); font-size: var(--rt-f-lg); font-weight: var(--rt-fw-black); box-shadow: calc(var(--rt-offset-1) * var(--rt-dir)) var(--rt-offset-1) 0 0 var(--rt-c-navy-deep); } .rt-how-journey .rt-journey__step, .rt-start-steps .rt-journey__step { grid-template-columns: var(--rt-step-badge) minmax(0, 1fr); gap: var(--rt-sp-4); padding-block-end: 0; } .rt-how-journey .rt-journey__step:not(:last-child)::before, .rt-start-steps .rt-journey__step:not(:last-child)::before { inset-inline-start: calc(var(--rt-step-pad) + (var(--rt-step-badge) - var(--rt-step-line)) / 2); inset-block-start: calc(var(--rt-step-pad) + var(--rt-step-badge) + var(--rt-step-air)); /* Bir sonraki rozetin üstünde aynı nefesle biter: adımlar arası boşluk + sonraki kartın iç boşluğu − nefes. */ inset-block-end: calc((var(--rt-step-gap) + var(--rt-step-pad) - var(--rt-step-air)) * -1); border-inline-start: var(--rt-step-line) solid var(--rt-c-navy); border-radius: var(--rt-step-line); } .rt-how-journey .rt-journey__title, .rt-start-steps .rt-journey__title { margin: 0; font-family: var(--rt-f-display); font-size: var(--rt-f-lg); font-weight: var(--rt-fw-black); line-height: var(--rt-lh-snug); color: var(--rt-text-heading); } .rt-how-journey .rt-journey__text, .rt-start-steps .rt-journey__text { margin-block-start: 4px; font-size: 0.9375rem; line-height: 1.55; } /* ---------------------------------------------------------------- 1. NASIL İŞLER */ .rt-how-head .rt-page-head__inner { gap: var(--rt-sp-4); } .rt-how-head .rt-hero__actions { margin-block-start: var(--rt-sp-2); } /* Yolculuk (KAĞIT kuşak): solda başlık + konuşma balonu, sağda adım kartları (mist). */ .rt-how-journey__grid { display: grid; gap: var(--rt-sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; } .rt-how-journey__intro { display: flex; flex-direction: column; gap: var(--rt-sp-5); min-inline-size: 0; } .rt-how-journey__steps { display: flex; flex-direction: column; gap: var(--rt-sp-5); min-inline-size: 0; } @media (min-width: 960px) { .rt-how-journey__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 0.5rem + 4vw, 5.5rem); } } /* Yapışkan giriş yalnız başlığın ve girişin rahat sığdığı ekranda (≥ 1100 × 720). Üst pay başlık yüksekliği + 32 px'tir: başlık bir duyuru satırıyla 32 px'e kadar uzasa da giriş başlığın altına girmez (preview: header +24 px ölçüldü). */ @media (min-width: 1100px) and (min-height: 720px) { .rt-how-journey__intro { position: sticky; inset-block-start: calc(var(--rt-header-height) + var(--rt-sp-6)); } } .rt-how-journey .rt-journey { --rt-step-pad: var(--rt-sp-4); --rt-step-gap: var(--rt-sp-3); } .rt-how-journey .rt-journey__step { padding-block: var(--rt-step-pad); padding-inline: var(--rt-step-pad) var(--rt-sp-5); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); background: var(--rt-band-mist); } .rt-how-journey .rt-journey__step:not(:last-child)::before { z-index: 1; } .rt-how-journey .rt-faq__item { border-width: 2px; border-radius: var(--rt-rd-lg); } /* İkinci yol: markanın konuşma balonu (kuyruk başlangıç tarafında, aşağı bakar). */ .rt-how-fork { position: relative; display: flex; flex-direction: column; gap: 2px; align-self: flex-start; max-inline-size: 26rem; margin-block-end: 12px; padding-block: var(--rt-sp-4) var(--rt-sp-3); padding-inline: var(--rt-sp-5); border: 2px solid var(--rt-c-navy-deep); border-radius: var(--rt-rd-lg); background: var(--rt-surface-default); box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-c-navy-deep); } .rt-how-fork::after { content: ""; position: absolute; inset-block-end: -10px; inset-inline-start: 32px; inline-size: 18px; block-size: 18px; background: var(--rt-surface-default); border-inline-end: 2px solid var(--rt-c-navy-deep); border-block-end: 2px solid var(--rt-c-navy-deep); border-end-end-radius: 3px; transform: rotate(calc(45deg * var(--rt-dir))); } .rt-how-fork__title { margin: 0; font-family: var(--rt-f-display); font-size: var(--rt-f-lg); font-weight: var(--rt-fw-black); line-height: var(--rt-lh-snug); color: var(--rt-text-heading); } /* Ders + ilk gözlem (MIST kuşak): iki kağıt kart; gözlem kartı bölümün tek vurgusudur (sert gölge, masaüstünde aşağı kayık). */ .rt-how-lesson__grid { display: grid; gap: var(--rt-sp-5); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 900px) { .rt-how-lesson__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--rt-sp-6); } .rt-how-card--note { margin-block-start: var(--rt-sp-7); } } .rt-how-card { display: flex; flex-direction: column; gap: var(--rt-sp-3); padding: clamp(1.25rem, 0.85rem + 1.4vw, 2.25rem); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-xl); background: var(--rt-surface-default); } .rt-how-card--note { border-color: var(--rt-c-navy-deep); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-c-navy-deep); } .rt-how-card__icon { display: inline-grid; place-items: center; align-self: flex-start; inline-size: 48px; block-size: 48px; margin-block-end: var(--rt-sp-1); border: 2px solid var(--rt-c-navy-deep); border-radius: 14px; background: var(--rt-band-mist); color: var(--rt-c-navy-deep); } .rt-how-card--note .rt-how-card__icon { background: var(--rt-c-gold-tint); } .rt-how-card__icon .rt-icon { inline-size: 24px; block-size: 24px; } .rt-how-card__title { margin: 0; font-family: var(--rt-f-display); font-size: var(--rt-f-display-md); font-weight: var(--rt-fw-black); line-height: 1.2; letter-spacing: -0.01em; color: var(--rt-text-heading); text-wrap: balance; } .rt-how-card__text { margin: 0; max-inline-size: 62ch; color: var(--rt-text-primary); } /* Telefonda sakin ve kısa (Owner H "çok yazı var … kompakt değil"): adım kartı ve ders kartları daha az iç boşluk, rozet 40 px. Çizgi ölçüleri özel özelliklerden geldiği için kendiliğinden hizalanır. Metin kısalmaz, yalnız kabuk. */ @media (max-width: 519.98px) { .rt-how-journey .rt-journey { --rt-step-badge: 40px; --rt-step-pad: var(--rt-sp-3); } .rt-how-journey .rt-journey__step { gap: var(--rt-sp-3); padding-inline-end: var(--rt-sp-4); } .rt-how-journey .rt-journey__text { font-size: var(--rt-f-sm); } .rt-how-journey__grid { gap: var(--rt-sp-5); } .rt-how-card { padding: var(--rt-sp-4); gap: var(--rt-sp-2); } .rt-how-card__icon { inline-size: 40px; block-size: 40px; border-radius: 12px; } .rt-how-card__icon .rt-icon { inline-size: 20px; block-size: 20px; } } /* Veli nerede? (KAĞIT kuşak) Tek sütunlu başlık (≤ 640 px; yanındaki iç şeritte lesson-timer süsü), altında yaş bantları: masaüstünde yan yana üç kart, telefonda satırlar. Evre karoları sky / blush / honey döngüsü. */ .rt-how-presence__grid { display: grid; gap: var(--rt-sp-6); grid-template-columns: minmax(0, 1fr); } .rt-how-presence__head { display: flex; flex-direction: column; gap: var(--rt-sp-4); max-inline-size: 640px; } /* Süs şeridi başlığın yanındadır (üstten ≤ 72 px + 140 px). Başlık alanı bu yüksekliği ayırır; kartlar hiçbir genişlikte süsün altına girmez. 1024 altında süs çizilmez, ayrılan yükseklik de yoktur. */ @media (min-width: 1024px) { .rt-how-presence__head { min-block-size: 9rem; } } .rt-how-presence__note { display: flex; align-items: flex-start; gap: var(--rt-sp-2); margin: 0; max-inline-size: 40ch; font-size: var(--rt-f-sm); color: var(--rt-text-secondary); } .rt-how-presence__note .rt-icon { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 1px; color: var(--rt-text-heading); } .rt-how-bands { gap: var(--rt-sp-3); grid-template-columns: minmax(0, 1fr); } .rt-how-bands .rt-bands__row { grid-template-columns: minmax(9rem, auto) minmax(0, 1fr); align-items: center; gap: var(--rt-sp-4); padding-block: var(--rt-sp-3); padding-inline: var(--rt-sp-3) var(--rt-sp-5); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); background: var(--rt-band-mist); } .rt-how-bands .rt-bands__range { display: flex; align-items: center; gap: var(--rt-sp-3); font-family: var(--rt-f-display); font-size: var(--rt-f-lg); font-weight: var(--rt-fw-black); white-space: nowrap; } .rt-how-bands__icon { display: grid; place-items: center; flex: none; inline-size: 60px; block-size: 60px; border-radius: 16px; background: var(--rt-band-sky); } .rt-how-bands .rt-bands__row:nth-child(3n+2) .rt-how-bands__icon { background: var(--rt-band-blush); } .rt-how-bands .rt-bands__row:nth-child(3n) .rt-how-bands__icon { background: var(--rt-band-honey); } .rt-how-bands__icon .rt-growth { inline-size: 48px; block-size: 48px; } .rt-how-bands .rt-bands__text { color: var(--rt-text-primary); } @media (min-width: 900px) { .rt-how-bands { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .rt-how-bands .rt-bands__row { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; gap: var(--rt-sp-3); padding: var(--rt-sp-4); } } @media (max-width: 519.98px) { .rt-how-bands .rt-bands__row { grid-template-columns: minmax(0, 1fr); gap: var(--rt-sp-2); padding-inline-end: var(--rt-sp-4); } .rt-how-bands__icon { inline-size: 48px; block-size: 48px; } .rt-how-bands__icon .rt-growth { inline-size: 40px; block-size: 40px; } .rt-how-bands .rt-bands__text { padding-inline-start: calc(48px + var(--rt-sp-3)); } } /* ---------------------------------------------------------------- 2. KOORDİNATÖRLE GÖRÜŞÜN (/start) */ .rt-start-grid { display: grid; gap: var(--rt-sp-7); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 960px) { .rt-start-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 0.5rem + 4vw, 5.5rem); } } /* Asıl eylem kartı: kağıt kuşakta kağıt kart, lacivert kontur, 6 px sert gölge. Başlığı "İlk adımlar"dan büyüktür. */ .rt-start-reach { display: flex; flex-direction: column; gap: var(--rt-sp-4); min-inline-size: 0; padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem); border: 2px solid var(--rt-c-navy-deep); border-radius: var(--rt-rd-xl); background: var(--rt-surface-default); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-c-navy-deep); } .rt-start-reach__title { margin: 0; font-family: var(--rt-f-display); font-size: var(--rt-f-display-lg); font-weight: var(--rt-fw-black); line-height: var(--rt-lh-display); letter-spacing: var(--rt-ls-display); color: var(--rt-text-heading); } .rt-start-reach .rt-channels { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--rt-sp-3); } .rt-start-reach .rt-channels__item { display: block; } .rt-start-reach .rt-channels__link { display: flex; align-items: center; gap: var(--rt-sp-3); inline-size: 100%; min-block-size: 68px; padding-block: var(--rt-sp-2); padding-inline: var(--rt-sp-2) var(--rt-sp-4); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); background: var(--rt-band-mist); color: var(--rt-text-heading); box-shadow: none; font-weight: var(--rt-fw-bold); } .rt-start-reach .rt-channels__link:hover { border-color: var(--rt-c-navy-deep); background: var(--rt-surface-default); color: var(--rt-text-heading); box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-c-navy-deep); } @media (prefers-reduced-motion: no-preference) { .rt-start-reach .rt-channels__link { transition: border-color var(--rt-mo-base) var(--rt-mo-ease), background-color var(--rt-mo-base) var(--rt-mo-ease), box-shadow var(--rt-mo-base) var(--rt-mo-ease), transform var(--rt-mo-base) var(--rt-mo-ease); } .rt-start-reach .rt-channels__link:hover { transform: translate(calc(-1px * var(--rt-dir)), -1px); } .rt-start-reach .rt-channels__link:active { transform: translate(calc(2px * var(--rt-dir)), 2px); box-shadow: none; } } /* Satır simgesi: lime daire içinde sohbet balonu (üç kanal da WhatsApp; üçüncü taraf logosu çizilmez). */ .rt-start-reach__glyph { display: inline-grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px; border: 2px solid var(--rt-c-navy-deep); border-radius: 50%; background: var(--rt-action-primary-bg); color: var(--rt-c-navy-deep); } .rt-start-reach__glyph .rt-icon { inline-size: 22px; block-size: 22px; stroke-width: 2; } .rt-start-reach__text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; } /* Etiketler doğal yazımıyla ("Birleşik Krallık telefonu (WhatsApp)"): büyük harf dönüşümü 390'da iki satıra kırıyordu. */ .rt-start-reach .rt-channels__label { font-size: var(--rt-f-xs); font-weight: var(--rt-fw-bold); letter-spacing: 0; text-transform: none; line-height: 1.3; color: var(--rt-text-secondary); } .rt-start-reach__value { font-family: var(--rt-f-display); font-size: 1.25rem; font-weight: var(--rt-fw-black); line-height: 1.2; font-variant-numeric: tabular-nums; text-align: start; white-space: nowrap; color: var(--rt-text-heading); } .rt-start-reach .rt-channels__link > .rt-icon { flex: none; inline-size: 20px; block-size: 20px; margin-inline-start: auto; } .rt-start-reach__note { display: flex; align-items: flex-start; gap: var(--rt-sp-2); margin: 0; font-size: var(--rt-f-sm); color: var(--rt-text-secondary); } .rt-start-reach__note .rt-icon { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 2px; color: var(--rt-text-heading); } .rt-start-reach__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rt-sp-3); padding-block-start: var(--rt-sp-4); border-block-start: 1px solid var(--rt-border-subtle); } /* Telefonda kart tek ekrana sığar (Owner H; ≤ 560 px, 390×844). Satırın tamamı bağlantıdır; sondaki ok 480 altında çizilmez, etiket tek satırda kalır. */ @media (max-width: 479.98px) { .rt-start-reach { gap: var(--rt-sp-3); padding: var(--rt-sp-4); } .rt-start-reach .rt-channels { gap: var(--rt-sp-2); } .rt-start-reach .rt-channels__link { min-block-size: 60px; padding-inline-end: var(--rt-sp-3); } .rt-start-reach .rt-channels__link > .rt-icon { display: none; } .rt-start-reach__value { font-size: var(--rt-f-lg); } .rt-start-reach__actions { gap: var(--rt-sp-2); padding-block-start: var(--rt-sp-3); } .rt-start-reach__actions .rt-btn { inline-size: 100%; } } /* İlk adımlar: kartsız dikey iz, başlık bir kademe küçük (display-md). */ .rt-start-steps { display: flex; flex-direction: column; gap: var(--rt-sp-4); min-inline-size: 0; } .rt-start-steps__title { margin: 0; font-family: var(--rt-f-display); font-size: var(--rt-f-display-md); font-weight: var(--rt-fw-black); line-height: 1.2; color: var(--rt-text-heading); } .rt-start-steps__more { margin: 0; } /* Hazırlık soruları (MIST kuşak): tek sütunlu başlık (≤ 640 px; yanındaki iç şeritte çay süsü), altında üç konuşma balonu. Asimetri yerleşimdedir (ortadaki balon aşağıda, telefonda sağa-sola), yazı eğilmez. Balon zeminleri kağıt / honey / blush; kuyruk zeminle aynı renktir. */ .rt-start-prep__inner { display: grid; gap: var(--rt-sp-6); grid-template-columns: minmax(0, 1fr); } .rt-start-prep__head { display: flex; flex-direction: column; gap: var(--rt-sp-3); max-inline-size: 640px; } @media (min-width: 1024px) { .rt-start-prep__head { min-block-size: 9rem; } } .rt-start-prep__note { margin: 0; color: var(--rt-text-secondary); } .rt-start-bubbles { --rt-bubble-bg: var(--rt-surface-default); display: grid; gap: var(--rt-sp-5); grid-template-columns: minmax(0, 1fr); padding-inline-start: 0; border-inline-start: 0; } .rt-start-bubble { position: relative; margin-block-end: 12px; max-inline-size: 30rem; padding-block: var(--rt-sp-4); padding-inline: var(--rt-sp-5); border: 2px solid var(--rt-c-navy-deep); border-radius: 22px; background: var(--rt-bubble-bg); color: var(--rt-text-heading); font-family: var(--rt-f-display); font-size: var(--rt-f-lg); font-weight: var(--rt-fw-bold); line-height: var(--rt-lh-snug); } .rt-start-bubble::after { content: ""; position: absolute; inset-block-end: -10px; inset-inline-start: 30px; inline-size: 18px; block-size: 18px; background: var(--rt-bubble-bg); border-inline-end: 2px solid var(--rt-c-navy-deep); border-block-end: 2px solid var(--rt-c-navy-deep); border-end-end-radius: 3px; transform: rotate(calc(45deg * var(--rt-dir))); } .rt-start-bubble:nth-child(2) { --rt-bubble-bg: var(--rt-band-honey); } .rt-start-bubble:nth-child(2)::after { inset-inline-start: auto; inset-inline-end: 30px; } .rt-start-bubble:nth-child(3) { --rt-bubble-bg: var(--rt-band-blush); } @media (max-width: 719.98px) { .rt-start-bubble { max-inline-size: 88%; } .rt-start-bubble:nth-child(2) { justify-self: end; } } @media (min-width: 720px) { .rt-start-bubbles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rt-sp-4); align-items: start; } .rt-start-bubble { max-inline-size: none; } .rt-start-bubble:nth-child(2) { margin-block-start: var(--rt-sp-6); } } /* ---------------------------------------------------------------- 3. TANIŞMA DERSİ AKIŞI (/free-trial) — yalnız görünüm Owner kararları korunur (2026-09-12): tek soru, üstte geri oku + ince çubuk, büyük sayfa başlığı ve ipuçları yok. Yeni olan: akış bir kağıt "sahne" kartındadır, köşesinde HEDİYE rozeti (Owner E/F); soru markanın başlık sesiyle yazılır; çubuk ve geri oku zeminde görünür hale gelir. 720 üstünde sahne ilk ekranın ortasındadır; telefonda sayfa kartla biter (boş lavanta alan kalmaz). */ .rt-trial { padding-block: var(--rt-sp-5) var(--rt-sp-7); } @media (min-width: 720px) { .rt-trial { display: grid; align-content: center; min-block-size: calc(100vh - var(--rt-header-height)); min-block-size: calc(100svh - var(--rt-header-height)); padding-block: var(--rt-sp-7); } } .rt-trial__inner { max-inline-size: 46rem; } .rt-trial__stage { position: relative; display: flex; flex-direction: column; gap: var(--rt-sp-5); padding-block: clamp(1.75rem, 1rem + 2.6vw, 3rem) clamp(2rem, 1.2rem + 2.6vw, 3.25rem); padding-inline: clamp(1rem, 0.2rem + 3.2vw, 3rem); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-xl); background: var(--rt-surface-default); } .rt-trial__progress.rt-quizbar { inline-size: min(100%, 560px); } .rt-trial .rt-quizbar__back { border: 2px solid var(--rt-c-navy-deep); border-radius: 50%; background: var(--rt-surface-default); color: var(--rt-c-navy-deep); box-shadow: calc(var(--rt-offset-1) * var(--rt-dir)) var(--rt-offset-1) 0 0 var(--rt-c-navy-deep); } .rt-trial .rt-quizbar__back:disabled { box-shadow: none; } .rt-trial__progress.rt-quizbar .rt-trial__bar { block-size: 12px; border-radius: var(--rt-rd-pill); border: 1.5px solid var(--rt-c-navy-deep); background: var(--rt-band-mist); } .rt-trial__progress.rt-quizbar .rt-trial__bar-fill { border-radius: var(--rt-rd-pill); background: var(--rt-action-primary-bg); } /* Soru başlığı ile ilk alan/seçenek arasında 16 px (eskiden 8 px): akış nefes alır. */ .rt-trial__form--js .rt-step__legend { margin-block-end: var(--rt-sp-4); font-family: var(--rt-f-display); font-size: clamp(1.625rem, 1.25rem + 1.3vw, 2.25rem); font-weight: var(--rt-fw-black); line-height: 1.15; letter-spacing: var(--rt-ls-display); color: var(--rt-text-heading); text-wrap: balance; } /* Gün ve saat grupları: küçük büyük harfli ara başlık (etiket kutu gibi durmaz). */ .rt-trial__form--js .rt-step[data-rt-min-one] > legend { margin-block: var(--rt-sp-2); font-size: var(--rt-f-xs); font-weight: var(--rt-fw-black); letter-spacing: var(--rt-ls-tag); text-transform: uppercase; color: var(--rt-text-secondary); } .rt-trial__form--js .rt-option__input:not(:checked) + .rt-option__label:hover { background: var(--rt-surface-accent); } /* Dokunma hedefleri (WCAG 2.5.5 / Owner A): cümle içindeki bağlantılar (Şartlar, Gizlilik, "Neyi neden aldığımızı okuyun", "Şifrenizi mi unuttunuz?") 44 px yüksek hedef olur. Negatif blok kenar boşluğu dolguyu geri alır: satır yüksekliği ve yerleşim değişmez. "Hesabınız var mı? Giriş yapın" düğmesi de 44 px'e çıkar. */ .rt-trial .rt-check a, .rt-trial .rt-trial__privacy a, .rt-trial [data-rt-trial-login-note] a { display: inline-block; padding-block: 12px; margin-block: -12px; line-height: 20px; } .rt-trial [data-rt-trial-login-toggle] { min-block-size: 44px; } /* Gizlilik cümlesi: hesap adımında görünür (eski kardeş seçicisi cümle formun DIŞINDA olduğu için hiç eşleşmiyordu; sahne kartı ortak atadır). Betik yoksa bütün sorular, hesap alanları dahil, alt alta görünür: cümle de görünür. */ .rt-trial__stage:has(.rt-step[data-rt-step="account"][data-rt-active="true"]) .rt-trial__privacy, .rt-trial__stage:has(.rt-trial__form:not(.rt-trial__form--js)) .rt-trial__privacy { display: block; max-inline-size: 420px; margin-inline: auto; text-align: center; font-size: var(--rt-f-xs); } /* Tamamlandı paneli açıkken hesap adımı hâlâ data-rt-active="true" taşır. Gösterme kuralı (0,5,0) ile eşit kalmasın diye sınıf üç kez yazılır (0,6,0) ve kural gösterme kuralından SONRA gelir: cümle başarı panelinin üstünde görünmez. */ .rt-trial__stage:has([data-rt-trial-done]:not([hidden])) .rt-trial__privacy.rt-trial__privacy.rt-trial__privacy { display: none; } /* Tamamlandı: markanın konuşma balonu evresi (tohum → konuşma) + özet kartı. */ .rt-trial__done { padding-block: var(--rt-sp-2) 0; } .rt-trial__done .rt-growth.rt-trial__done-art { inline-size: 96px; block-size: 96px; } .rt-trial__done h2 { margin: 0; font-family: var(--rt-f-display); font-size: var(--rt-f-display-lg); font-weight: var(--rt-fw-black); line-height: var(--rt-lh-display); color: var(--rt-text-heading); text-wrap: balance; } .rt-trial__summary { min-inline-size: min(100%, 24rem); padding-block: var(--rt-sp-4); padding-inline: var(--rt-sp-5); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-lg); background: var(--rt-band-mist); } @media (max-width: 479.98px) { .rt-trial__summary div { grid-template-columns: minmax(0, 1fr); gap: 0; } } } /* ============================================================================= TEMA V2.1 — ÖĞRETMENLER GRUBU (teachers/index.php, teachers/view.php, _c/educator-card.php, _c/educator-stats.php) UYGULAMA: bu blok rt.css'in EN SONUNA, foundation §5 PAGE bloğundan SONRA eklenir (APPLY ORDER, CHANGES.md). Katman rt.page: --rt-c-* okunabilir; component katmanına TAŞINMAZ (orada yalnız semantic token). Kurallar: :is() virgül listesi yok, calc(50% - 50vw) yok, yeni :focus-visible outline kuralı yok, hareket yalnız prefers-reduced-motion: no-preference içinde, yönler mantıksal (sert gölge ve eğim --rt-dir ile aynalanır, oynat üçgeni aynalanmaz). .rt-sr-only rt.primitive katmanındadır: bu dosya sr-only taşıyan öğeyi SEÇMEZ (page katmanı onu ezerdi). Owner: A premium tema, B vurgu ailesi, D yan süs, E asimetri, F HEDİYE + sarı oynat, H kompakt, I düzen, K büyüme, L zemin. ============================================================================= */ @layer rt.page { /* ---------------------------------------------------------------- 1. ÖĞRETMENLER SAYFA BAŞI (sky-deep, SPEC §13) */ .rt-edu-head { border-block-end: 0; } .rt-edu-head .rt-page-head__inner { gap: var(--rt-sp-3); } /* Eğik etiket 16 px telefon kenar boşluğunda kırpılmaz: -2° dönüşün yatay taşması < 2 px, kapsayıcı kırpmaz. */ .rt-edu-head__tag { margin-block-end: var(--rt-sp-1); } .rt-edu-head .rt-page-head__title { font-weight: var(--rt-fw-black); line-height: var(--rt-lh-display); } /* Baş süsü kuşağın İÇİNDE durur (R1 2026-09-15; ölçüldü): 230 px'lik başta 240 px'lik şerit -5 px'ten başlıyor, 6° eğimle üst bilginin altına taşıyordu (1024 px'te 17 px). Şerit başın yüksekliğine göre alt ve üstte en az 40 px payla kısalır ve ortada kalır; çizim şeride contain ile sığar. 1024 px altındaki köşe çıkartması değişmez. */ @media (min-width: 1024px) { .rt-edu-head > .rt-decor.rt-decor--middle { inset-block-start: max(40px, calc(50% - var(--rt-decor-h) / 2)); max-block-size: calc(100% - 80px); } } /* ---------------------------------------------------------------- 2. ÖĞRETMEN IZGARASI (mist) */ .rt-edu-team__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--rt-sp-2) var(--rt-sp-6); } .rt-edu-team__note { margin: 0; display: inline-flex; align-items: flex-start; gap: var(--rt-sp-2); max-inline-size: 34rem; font-size: var(--rt-f-sm); line-height: 1.5; color: var(--rt-text-secondary); } .rt-edu-team__note .rt-icon { inline-size: 20px; block-size: 20px; flex: none; color: var(--rt-c-green); } .rt-edu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rt-sp-4); grid-template-columns: minmax(0, 1fr); } @media (min-width: 600px) { .rt-edu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rt-sp-5); } } @media (min-width: 960px) { .rt-edu-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .rt-edu-list__item { display: flex; min-inline-size: 0; } .rt-edu-list__item > .rt-edu-card { flex: 1 1 auto; min-inline-size: 0; } /* ---------------------------------------------------------------- 3. KART (tam / solo / mini) */ .rt-edu-card--full, .rt-edu-card--mini { gap: var(--rt-sp-3); padding: var(--rt-sp-3); background: var(--rt-surface-default); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-xl); box-shadow: none; } /* Owner E: üzerine gelince kart sert lacivert gölgeyle "kaldırılır" (6 px, RTL'de aynalı). Hareket yalnız no-preference. */ .rt-edu-card--full:hover, .rt-edu-card--mini:hover, .rt-edu-card--full:focus-within, .rt-edu-card--mini:focus-within { border-color: var(--rt-offset-ink); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-offset-ink); } .rt-edu-card--full:hover, .rt-edu-card--mini:hover { transform: translate(calc(-2px * var(--rt-dir)), -2px); } @media (prefers-reduced-motion: reduce) { .rt-edu-card--full:hover, .rt-edu-card--mini:hover { transform: none; } } /* Medya sarmalayıcı yığın bağlamı KURMAZ (z-index yok): kartı kaplayan bağlantı uzantısı (::after) portrenin üstündedir, portreye tıklamak profile gider (rt_public_browser.cjs card_opens_same_teacher). */ /* KAPSAM (CONSISTENCY 20): kart iç öğeleri yalnız tam/mini (solo = tam + ek sınıf) varyantta biçimlenir; ana sayfa rayının .rt-edu-card--compact kartı (home-top .rt-teachers-band--nk) bu kurallardan etkilenmez. */ .rt-edu-card--full .rt-edu-card__media, .rt-edu-card--mini .rt-edu-card__media { position: relative; flex: none; } .rt-edu-card--full .rt-portrait { aspect-ratio: 5 / 4; border-radius: var(--rt-rd-lg); } .rt-edu-card--full .rt-portrait__img { object-position: 50% 30%; } .rt-edu-card--mini .rt-portrait { border-radius: var(--rt-rd-md); } /* Owner F: parlak sarı daire + lacivert üçgen; fotoğrafın alt bitiş köşesine taşan çıkartma. Beyaz halka + lacivert kontur + sert gölge her fotoğrafta 3:1 ayrışır (sarı/lacivert 9,5:1). Tıklama almaz. */ .rt-edu-card--full .rt-edu-card__video, .rt-edu-card--mini .rt-edu-card__video { position: absolute; inset-block-end: -12px; inset-inline-end: 14px; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border: 2px solid var(--rt-play-ink); border-radius: 50%; background: var(--rt-play-bg); color: var(--rt-play-ink); box-shadow: 0 0 0 2px var(--rt-c-white), calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 2px var(--rt-play-ink); pointer-events: none; } /* Üçgen RTL'de aynalanmaz: optik kaydırma fiziksel translate ile (evrensel medya simgesi). */ .rt-edu-card--full .rt-edu-card__video svg, .rt-edu-card--mini .rt-edu-card__video svg { inline-size: 20px; block-size: 20px; translate: 1px 0; } .rt-edu-card--full .rt-edu-card__body { gap: var(--rt-sp-2); padding-inline: var(--rt-sp-1); } .rt-edu-card--full .rt-edu-card__tag, .rt-edu-card--mini .rt-edu-card__tag { margin: 0 0 2px; white-space: normal; border-radius: 14px; } .rt-edu-card--full .rt-edu-card__name, .rt-edu-card--mini .rt-edu-card__name { margin: 0; font-size: var(--rt-f-display-md); font-weight: var(--rt-fw-black); line-height: 1.15; letter-spacing: var(--rt-ls-display); color: var(--rt-text-heading); } /* Owner H: uzmanlık en çok iki satır; iki satırlık yer ayrılır ki güven şeritleri aynı hizada dursun. */ .rt-edu-card--full .rt-edu-card__highlight, .rt-edu-card--mini .rt-edu-card__highlight { margin: 0; font-size: var(--rt-f-sm); line-height: 1.45; font-weight: var(--rt-fw-medium); color: var(--rt-text-secondary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .rt-edu-card--full .rt-edu-card__highlight { min-block-size: calc(2em * 1.45); } /* Yaş çipleri (Owner H: tek satır; Owner K: marka filizi). */ .rt-edu-card--full .rt-edu-card__ages, .rt-edu-card--mini .rt-edu-card__ages { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 6px; min-inline-size: 0; } .rt-edu-card--full .rt-edu-card__ages-label, .rt-edu-card--mini .rt-edu-card__ages-label { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: var(--rt-f-xs); font-weight: var(--rt-fw-black); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rt-text-secondary); } .rt-edu-card--full .rt-edu-card__ages-label .rt-icon, .rt-edu-card--mini .rt-edu-card__ages-label .rt-icon { inline-size: 18px; block-size: 18px; stroke-width: 2; color: var(--rt-c-green); } .rt-edu-card--full .rt-edu-card__ages-label, .rt-edu-card--mini .rt-edu-card__ages-label { min-block-size: 22px; } .rt-edu-card--full .rt-edu-card__age-list, .rt-edu-card--mini .rt-edu-card__age-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 3px; min-inline-size: 0; } .rt-edu-card--full .rt-edu-card__age-list > li, .rt-edu-card--mini .rt-edu-card__age-list > li { padding: 2px 6px; border-radius: var(--rt-rd-pill); background: var(--rt-c-green-tint); color: var(--rt-c-navy-deep); box-shadow: inset 0 0 0 1px var(--rt-c-lime-deep); font-size: var(--rt-f-xs); font-weight: var(--rt-fw-black); line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; } .rt-edu-card--full .rt-edu-card__link { align-self: flex-start; gap: 6px; font-weight: var(--rt-fw-black); } .rt-edu-card--full .rt-edu-card__link .rt-icon, .rt-edu-card--mini .rt-edu-card__link .rt-icon { inline-size: 20px; block-size: 20px; stroke-width: 2.2; } /* TELEFON (< 600): foto solda 132 px (4:5) — markanın en güçlü varlığı olan eğlenceli fotoğraf küçülmez; ad, uzmanlık (3 satır) ve yaş çipleri yanında; güven şeridi ve eylem tam genişlikte. Gövde display:contents ile ızgaraya açılır. */ @media (max-width: 599.98px) { .rt-edu-card--full { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr auto auto; grid-template-areas: "tag tag" "media name" "media high" "media ages" "media ." "stats stats" "link link"; column-gap: var(--rt-sp-3); row-gap: 0; align-items: start; } .rt-edu-card--full > .rt-edu-card__body { display: contents; } .rt-edu-card--full .rt-edu-card__media { grid-area: media; margin-block-end: var(--rt-sp-3); } .rt-edu-card--full .rt-portrait { aspect-ratio: 4 / 5; border-radius: var(--rt-rd-md); } .rt-edu-card--full .rt-edu-card__tag { grid-area: tag; justify-self: start; margin-block-end: var(--rt-sp-3); } .rt-edu-card--full .rt-edu-card__name { grid-area: name; margin-block: 2px 4px; } .rt-edu-card--full .rt-edu-card__highlight { grid-area: high; min-block-size: 0; margin-block-end: var(--rt-sp-2); -webkit-line-clamp: 3; } .rt-edu-card--full .rt-edu-card__ages { grid-area: ages; } .rt-edu-card--full .rt-edu-stats { grid-area: stats; } .rt-edu-card--full .rt-edu-card__link { grid-area: link; margin-block-start: var(--rt-sp-1); } /* Kapsamlı (CONSISTENCY 20): taban kurallar (0,2,0) olduğu için telefon kuralları da aynı öneki taşır; mini kartın kendi kuralları (aşağıda, daha sonra) yine üstün gelir. */ .rt-edu-card--full .rt-edu-card__video, .rt-edu-card--mini .rt-edu-card__video { inline-size: 36px; block-size: 36px; inset-block-end: -10px; inset-inline-end: 8px; } .rt-edu-card--full .rt-edu-card__video svg, .rt-edu-card--mini .rt-edu-card__video svg { inline-size: 18px; block-size: 18px; } /* Etiket metni telefonda yalnız ekran okuyucuya: filiz simgesi + çipler tek satır. */ .rt-edu-card--full .rt-edu-card__ages-text, .rt-edu-card--mini .rt-edu-card__ages-text { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* SOHBET DÜĞMESİ PAYI (R1 N6, 2026-09-15; /tr/ogretmenler 390×844 ölçümü): sabit sohbet düğmesi (334–378) sağ sütundaki uzmanlık metninin satır sonlarına biniyordu (metin sağ kenarı 359, koordinatör kartında 344; koordinatör girişi 373). Düğme gizlenmez (Owner G); 480 px altında metin, düğmenin ayak izi (56 px) + 4 px içeride biter. Kart gövdesi display:contents olduğu için pay gövdeye değil metnin kendisine verilir; kart zaten 28 px içeride, eklenen pay farktır. Uzmanlık yine en çok 3 satırdır (Owner H). Uzmanlık payı 360 px'ten başlar: 320 px'te sütun 116 px'ten 84 px'e inip yedi kartın yedisinde de uzmanlığı üç noktayla kesiyordu (ölçüm; payısız ikisi); orada düğme eskisi gibi kalır. */ @media (max-width: 479.98px) { .rt-edu-staff__copy .rt-lead { padding-inline-end: 44px; } } @media (min-width: 360px) and (max-width: 479.98px) { .rt-edu-card--full .rt-edu-card__highlight { padding-inline-end: 32px; } } /* SOLO (eğitim koordinatörü): 600+ yatay kart, foto 4:5. Telefonda tam kartın ızgarasını kullanır (etiket üst satırda tam genişlikte, uzun rol temiz kırılır). */ @media (min-width: 600px) { .rt-edu-card--solo { flex-direction: row; align-items: stretch; gap: var(--rt-sp-4); } .rt-edu-card--solo .rt-edu-card__media { flex: 0 0 180px; align-self: flex-start; } .rt-edu-card--solo .rt-portrait { aspect-ratio: 4 / 5; } .rt-edu-card--solo .rt-edu-card__body { min-inline-size: 0; padding-block: var(--rt-sp-1); } .rt-edu-card--solo .rt-edu-card__highlight { min-block-size: 0; } } @media (min-width: 960px) { .rt-edu-card--solo .rt-edu-card__media { flex-basis: 200px; } } /* ---------------------------------------------------------------- 4. GÜVEN ŞERİDİ (_c/educator-stats) */ /* Tek çerçeveli şerit, eşit hücreler, aralarında ince çizgi. Sayı görüntü ağırlığında, etiket soluk. 320 px'te bile üç hücre tek satırdır (min-inline-size 0, etiket nowrap + üç nokta). Eski çip görünümü (.rt-edu-stats > *) burada sıfırlanır. */ .rt-edu-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: stretch; gap: 0; margin: 0; padding: 0; border: 2px solid var(--rt-border-subtle); border-radius: 14px; background: var(--rt-band-mist); font-size: var(--rt-f-md); color: var(--rt-text-secondary); } .rt-edu-stats > .rt-edu-stats__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-inline-size: 0; min-block-size: 52px; padding: 6px 4px; border-radius: 0; background: none; text-align: center; text-decoration: none; color: inherit; } .rt-edu-stats > .rt-edu-stats__cell + .rt-edu-stats__cell { border-inline-start: 1px solid var(--rt-border-subtle); } .rt-edu-stats__num { display: inline-flex; align-items: center; gap: 3px; font-family: var(--rt-f-display); font-size: var(--rt-f-lg); font-weight: var(--rt-fw-black); line-height: 1.1; color: var(--rt-text-heading); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Yıldız altın-koyu: mist üstünde 3,4:1, beyaz üstünde 3,9:1 (AA metin dışı 3:1). */ .rt-edu-stats__num .rt-icon { inline-size: 16px; block-size: 16px; color: var(--rt-c-gold-deep); fill: currentColor; stroke: none; } .rt-edu-stats__label { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--rt-f-xs); font-weight: var(--rt-fw-bold); line-height: 1.25; color: var(--rt-text-secondary); } /* Profilde puan hücresi yorumlara giden bağlantıdır: hücre boyu dokunma alanı (≥ 52 px), odak halkası temanın tek kuralı. */ a.rt-edu-stats__cell { border-start-start-radius: 12px; border-end-start-radius: 12px; } a.rt-edu-stats__cell .rt-edu-stats__label { color: var(--rt-text-link); text-decoration: underline; text-underline-offset: 0.2em; } a.rt-edu-stats__cell:hover { background: var(--rt-surface-default); } /* ---------------------------------------------------------------- 5. KOORDİNATÖR + KARARSIZ MISINIZ (beyaz) */ .rt-edu-staff__grid { display: grid; gap: var(--rt-sp-5); grid-template-columns: minmax(0, 1fr); align-items: start; } .rt-edu-staff__copy { display: flex; flex-direction: column; gap: var(--rt-sp-3); } .rt-edu-staff__copy .rt-lead { margin: 0; } .rt-edu-list.rt-edu-list--solo { grid-template-columns: minmax(0, 1fr); max-inline-size: 46rem; } /* 960+: solda başlık + koordinatör kartı, sağda kararsızlık kutusu (iki sütun aynı boyda biter; kart sağda yalnız kaldığında altında 350 px boşluk kalıyordu). Tek sütunda DOM sırası: başlık → kart → yardım. */ @media (min-width: 960px) { .rt-edu-staff__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy help" "card help"; grid-template-rows: auto 1fr; column-gap: var(--rt-sp-8); row-gap: var(--rt-sp-5); } .rt-edu-staff__copy { grid-area: copy; } .rt-edu-staff__grid > .rt-edu-list--solo { grid-area: card; } .rt-edu-staff__grid > .rt-edu-help { grid-area: help; } } /* Kararsızlık kutusu: marka paneli (2 px lacivert kontur + 6 px sert gölge, Owner E) + sağ üstte eğik HEDİYE rozeti. */ .rt-edu-help { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--rt-sp-3); padding: var(--rt-sp-6) var(--rt-sp-5) var(--rt-sp-5); background: var(--rt-band-mist); border: 2px solid var(--rt-offset-ink); border-radius: var(--rt-rd-xl); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-offset-ink); } .rt-edu-help__title { margin: 0; padding-inline-end: 7rem; font-size: var(--rt-f-display-md); font-weight: var(--rt-fw-black); line-height: 1.2; color: var(--rt-text-heading); } .rt-edu-help__text { margin: 0; max-inline-size: 62ch; color: var(--rt-text-primary); } .rt-edu-help .rt-faq { align-self: stretch; } /* ---------------------------------------------------------------- 6. PROFİL ÜST KUŞAĞI (sky-deep) */ .rt-profile-top { background-color: var(--rt-band-head); padding-block-end: var(--rt-sp-7); } .rt-profile-top .rt-breadcrumb { margin-block-end: var(--rt-sp-5); } .rt-profile-top .rt-profile-head { padding-block: 0; } .rt-profile-head__inner { gap: var(--rt-sp-5); align-items: start; } @media (min-width: 720px) { .rt-profile-head__inner { grid-template-columns: 240px minmax(0, 1fr); gap: var(--rt-sp-6); } } @media (min-width: 960px) { .rt-profile-head__inner { grid-template-columns: 300px minmax(0, 1fr); gap: var(--rt-sp-7); } } /* Metin sütunu 1180+ en çok 564 px: portre 300 + boşluk 48 + 564 = 912 → süs şeridi bunun bitişinde (bkz. §6 süs). */ @media (min-width: 1180px) { .rt-profile-head__copy { max-inline-size: 564px; } } .rt-profile-head__media { position: relative; inline-size: 100%; } /* Portre: lacivert kontur + lime sert gölge (Owner E). Fotoğraf eğilmez (SPEC §9). */ .rt-profile-head__media .rt-portrait { border: 3px solid var(--rt-offset-ink); border-radius: var(--rt-rd-xl); box-shadow: calc(8px * var(--rt-dir)) 8px 0 0 var(--rt-c-lime); } /* Owner F: sarı daire + lacivert üçgen (.rt-play token seti), portrenin alt bitiş köşesine taşar. ≥ 44 px, odak halkası temanın :focus-visible kuralıdır (daire köşeyle birlikte çizilir). */ .rt-profile-head__play { position: absolute; inset-block-end: -14px; inset-inline-end: -14px; display: grid; place-items: center; inline-size: 60px; block-size: 60px; border: 3px solid var(--rt-play-ink); border-radius: 50%; background: var(--rt-play-bg); color: var(--rt-play-ink); box-shadow: calc(var(--rt-offset-2) * var(--rt-dir)) var(--rt-offset-2) 0 0 var(--rt-play-ink); text-decoration: none; } .rt-profile-head__play svg { inline-size: 28px; block-size: 28px; translate: 2px 0; } @media (prefers-reduced-motion: no-preference) { .rt-profile-head__play { transition: transform var(--rt-mo-base) var(--rt-mo-ease); } .rt-profile-head__play:hover { transform: scale(1.06); } } .rt-profile-head__copy { gap: var(--rt-sp-3); } .rt-profile-head__role { margin: 0 0 var(--rt-sp-1); white-space: normal; border-radius: 14px; } .rt-profile-head__name { margin: 0; font-size: var(--rt-f-display-xl); font-weight: var(--rt-fw-black); line-height: var(--rt-lh-display); letter-spacing: var(--rt-ls-display); color: var(--rt-text-heading); } .rt-profile-head__highlight { margin: 0; font-size: var(--rt-f-lg); font-weight: var(--rt-fw-bold); line-height: 1.35; } .rt-profile-head__copy .rt-edu-stats { max-inline-size: 30rem; background: var(--rt-surface-default); font-size: var(--rt-f-md); } .rt-profile-head__intro { margin: 0; max-inline-size: 60ch; font-size: var(--rt-f-md); line-height: 1.6; color: var(--rt-text-primary); } .rt-profile-head__ages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rt-sp-2); } .rt-profile-head__ages-label { font-size: var(--rt-f-xs); font-weight: var(--rt-fw-black); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rt-text-secondary); } .rt-profile-head__ages .rt-chips { gap: 6px; } .rt-profile-head__ages .rt-chip { padding: 3px 10px; background: var(--rt-surface-default); color: var(--rt-c-navy-deep); box-shadow: inset 0 0 0 1px var(--rt-border-subtle); font-size: var(--rt-f-sm); font-weight: var(--rt-fw-black); } .rt-profile-head__actions { margin-block-start: var(--rt-sp-1); } /* TELEFON (< 720): portre 112 px solda, rol + ad yanında; geri kalan tam genişlik. Kopya display:contents ile ızgaraya açılır. */ @media (max-width: 719.98px) { .rt-profile-head__inner { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--rt-sp-4); row-gap: 0; } .rt-profile-head__copy { display: contents; } .rt-profile-head__media { grid-column: 1; grid-row: 1 / span 3; margin-block-end: var(--rt-sp-5); } .rt-profile-head__media .rt-portrait { border-width: 2px; box-shadow: calc(5px * var(--rt-dir)) 5px 0 0 var(--rt-c-lime); } .rt-profile-head__role { grid-column: 2; grid-row: 1; justify-self: start; margin-block-end: var(--rt-sp-2); } .rt-profile-head__name { grid-column: 2; grid-row: 2; align-self: start; } .rt-profile-head__copy > :not(.rt-profile-head__role):not(.rt-profile-head__name) { grid-column: 1 / -1; margin-block-end: var(--rt-sp-3); } .rt-profile-head__play { inline-size: 44px; block-size: 44px; inset-block-end: -10px; inset-inline-end: -10px; border-width: 2px; } .rt-profile-head__play svg { inline-size: 20px; block-size: 20px; translate: 1px 0; } } /* Üst kuşak süsü (Owner D): decor.php 'inside' tek sütunludur; bu iki sütunlu bantta sütun 912 px sayılır (portre + boşluk + 564 px metin). 1180+ şerit 220 px ve metnin bittiği yerden başlar; 1024–1179 arasında şerit metne değeceği için gizli. */ .rt-profile-top > .rt-profile-top__decor { --rt-decor-col: 912px; } @media (min-width: 1024px) and (max-width: 1179.98px) { .rt-decor-host > .rt-profile-top__decor.rt-decor--inside { display: none; } } /* 1024 altı köşe çıkartması: bu bantta ilk satır kısa yol satırıdır; 96 px yerine 28 px üst boşluk yeter — çıkartma 12–84 px, yol satırının bitişi çıkartmanın solunda, başlık 84 px'in altında başlar (preview.cjs çakışma ölçümü 390 ve 768). */ @media (max-width: 1023.98px) { .rt-shell__main .rt-profile-top.rt-decor-host--corner { padding-block-start: 1.75rem; } } /* ---------------------------------------------------------------- 7. PROFİL GÖVDESİ (mist) */ .rt-profile-body { padding-block: var(--rt-sp-7) var(--rt-sp-8); } .rt-profile-body > .rt-profile { padding-block-end: 0; } .rt-profile__main { gap: var(--rt-sp-5); } /* Beyaz panolar mist zeminde ΔL* 4,8 + 2 px çizgi: zemine erimez (Owner L). */ .rt-profile__section { min-inline-size: 0; padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem); background: var(--rt-surface-default); border: 2px solid var(--rt-border-subtle); border-radius: var(--rt-rd-xl); } .rt-profile__title { margin: 0; font-size: var(--rt-f-display-md); font-weight: var(--rt-fw-black); line-height: 1.2; letter-spacing: var(--rt-ls-display); color: var(--rt-text-heading); } /* Davet: konuşma balonu (Owner B: bölümün TEK vurgusu). Kuyruk yukarıda, portreye bakar; iki üçgen katmanı (lacivert kontur + beyaz dolgu) simetriktir, RTL'de yalnız konumu aynalanır. El çizimi tırnak sağ üstte. */ .rt-profile-invite { position: relative; margin-block-start: 14px; padding-inline-end: clamp(4.5rem, 3.4rem + 3vw, 6.5rem); border-color: var(--rt-offset-ink); box-shadow: calc(var(--rt-offset-3) * var(--rt-dir)) var(--rt-offset-3) 0 0 var(--rt-offset-ink); } .rt-profile-invite::before, .rt-profile-invite::after { content: ""; position: absolute; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .rt-profile-invite::before { inset-block-start: -17px; inset-inline-start: 40px; inline-size: 30px; block-size: 17px; background: var(--rt-offset-ink); } .rt-profile-invite::after { inset-block-start: -12.5px; inset-inline-start: 43.5px; inline-size: 23px; block-size: 15px; background: var(--rt-surface-default); } .rt-profile-invite__quote { position: absolute; inset-block-start: 20px; inset-inline-end: 22px; inline-size: clamp(40px, 2.2rem + 1.4vw, 60px); block-size: auto; max-inline-size: none; } .rt-profile-invite__title { margin: 0; font-size: var(--rt-f-sm); font-weight: var(--rt-fw-black); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rt-text-eyebrow); } .rt-profile-invite__text { margin: 0; max-inline-size: 62ch; font-size: var(--rt-f-lg); line-height: 1.55; color: var(--rt-text-primary); } /* Yorum özeti: mist şerit panonun içinde; 5'ten az yorumda tek satır (puan + yıldız + sayı). */ .rt-reviews-summary { background: var(--rt-band-mist); border-radius: var(--rt-rd-lg); } @media (min-width: 720px) { .rt-reviews-summary { grid-template-columns: auto minmax(0, 1fr); } } .rt-reviews-summary.rt-reviews-summary--simple { display: flex; align-items: center; padding: var(--rt-sp-3) var(--rt-sp-4); } .rt-reviews-summary--simple .rt-reviews-summary__head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--rt-sp-2) var(--rt-sp-4); } .rt-reviews-summary--simple .rt-reviews-summary__score { flex-direction: row; align-items: center; gap: var(--rt-sp-3); } .rt-reviews-summary--simple .rt-reviews-summary__score strong { font-size: 2.25rem; } .rt-reviews-block .rt-review__card { background: var(--rt-band-mist); border-color: transparent; box-shadow: none; } /* Seçim kutusu: beyaz, 2 px lacivert kontur; eski altın sol çizgi kalkar (tek vurgu davet balonundadır). */ .rt-callout.rt-profile-choice { gap: var(--rt-sp-3); padding: var(--rt-sp-5); background: var(--rt-surface-default); border: 2px solid var(--rt-offset-ink); border-radius: var(--rt-rd-xl); } .rt-profile-choice .rt-callout__title { margin: 0; font-size: var(--rt-f-display-md); font-weight: var(--rt-fw-black); line-height: 1.2; } .rt-profile-choice p { margin: 0; color: var(--rt-text-primary); } /* ---------------------------------------------------------------- 8. DİĞER ÖĞRETMENLER (beyaz) */ .rt-profile-others__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--rt-sp-2) var(--rt-sp-5); } .rt-profile-others__all { display: inline-flex; align-items: center; gap: var(--rt-sp-2); min-block-size: var(--rt-target-min); font-weight: var(--rt-fw-black); color: var(--rt-text-link); text-decoration: none; } .rt-profile-others__all:hover span { text-decoration: underline; text-underline-offset: 0.2em; } .rt-profile-others__all .rt-icon { inline-size: 20px; block-size: 20px; stroke-width: 2.2; } .rt-edu-list.rt-edu-list--mini { grid-template-columns: minmax(0, 1fr); gap: var(--rt-sp-3); } @media (min-width: 600px) { .rt-edu-list.rt-edu-list--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .rt-edu-list.rt-edu-list--mini { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--rt-sp-4); } } /* Mini kartta bağlantı metni görsel olarak gizli (erişilebilir adı durur), yalnız ok görünür. */ .rt-edu-card--mini .rt-edu-card__link { align-self: flex-end; min-block-size: var(--rt-target-min); color: var(--rt-text-heading); } .rt-edu-card--mini .rt-edu-card__link > span { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rt-edu-card--mini .rt-edu-card__body { gap: 4px; min-inline-size: 0; } /* Mini karoda oynat çıkartması küçüktür (72 px'lik fotoğrafın yarısını örtmez). */ .rt-edu-card--mini .rt-edu-card__video { inline-size: 32px; block-size: 32px; inset-block-end: -8px; inset-inline-end: 8px; } .rt-edu-card--mini .rt-edu-card__video svg { inline-size: 16px; block-size: 16px; } .rt-edu-card--mini .rt-edu-card__name { font-size: var(--rt-f-lg); } @media (max-width: 959.98px) { .rt-edu-card--mini { display: grid; grid-template-columns: 72px minmax(0, 1fr) 24px; grid-template-areas: "media name link" "media high link"; grid-template-rows: auto 1fr; column-gap: var(--rt-sp-3); row-gap: 2px; align-items: center; padding: 10px; } .rt-edu-card--mini > .rt-edu-card__body { display: contents; } .rt-edu-card--mini .rt-edu-card__media { grid-area: media; align-self: center; } .rt-edu-card--mini .rt-edu-card__name { grid-area: name; align-self: end; } .rt-edu-card--mini .rt-edu-card__highlight { grid-area: high; align-self: start; font-size: var(--rt-f-xs); } .rt-edu-card--mini .rt-edu-card__link { grid-area: link; align-self: center; } .rt-edu-card--mini .rt-edu-card__video { inline-size: 26px; block-size: 26px; inset-block-end: -6px; inset-inline-end: -6px; border-width: 1.5px; } .rt-edu-card--mini .rt-edu-card__video svg { inline-size: 13px; block-size: 13px; } } } /* ARKA-PLAN-BLOGU:BASLANGIC */ /* ============================================================================= SAYFA ARKA PLAN GÖRSELLERİ (.rt-bg, _c/page-bg.php) — 2026-09-17 Owner (birebir): "blog sayfasında çok iyi yazılı bir arka plan var - bu olmaz. belki üzücü bir şey yazacağız bir gün? bu riskli. her sayfa için farklı arka plan görseli oluştur. birebir aynısı olması hiçbirinin." - Her kamu sayfası (ana sayfa hariç) TEK arka plan görseli taşır; iki sayfa aynı (ana, eşlikçi, ayna) üçlüsünü almaz. - İki maske katmanı: ana nesne + eşlikçi (400 × 300 tuval, contain; katmanlar aynı kutuya birebir oturur). Renk token'dır: açık kuşakta --rt-decor-ink (lacivert %28), koyu kuşakta aynı token beyaza döner; telefonda --rt-decor-ink-soft. - Kalem 4 px (SVG'de non-scaling-stroke = --rt-doodle-pen); telefon köşesinde *-sm.svg 2,5 px (= --rt-doodle-pen-sm). - Metne binmez: masaüstünde metin sütununun DIŞINDAKİ şeritte, 1024 altında bölümün üst bitiş köşesinde (ev sahibi .rt-decor-host--corner 96 px üst boşluğu zaten ayırır; sınıflar korunduğu için sayfa düzeni kaymaz). - Yazı, rakam, yüz, kalp yok (çizimler üreteçte denetlenir). Ekran okuyucudan gizli (aria-hidden), tıklama almaz. ============================================================================= */ @layer rt.page { .rt-bg-host { position: relative; isolation: isolate; } .rt-bg { --rt-bg-main: none; --rt-bg-accent: none; --rt-bg-main-sm: none; --rt-bg-accent-sm: none; --rt-bg-flip: 1; --rt-bg-pos: right center; /* 1180'lik kapsayıcının içerik bitişi (kenardan) ve kapsayıcı dışındaki boşluğa en çok 96 px taşma. */ --rt-bg-edge: calc((100% - min(100%, var(--rt-container-max))) / 2 + 24px); --rt-bg-bleed: clamp(0px, calc((100% - var(--rt-container-max)) / 2 - 40px), 96px); position: absolute; z-index: -1; display: none; box-sizing: border-box; inset-block-start: 50%; translate: 0 -50%; block-size: min(330px, calc(100% - 48px)); max-inline-size: none; pointer-events: none; user-select: none; background-color: var(--rt-decor-ink); -webkit-mask-image: var(--rt-bg-main), var(--rt-bg-accent); mask-image: var(--rt-bg-main), var(--rt-bg-accent); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: var(--rt-bg-pos); mask-position: var(--rt-bg-pos); -webkit-mask-size: contain; mask-size: contain; /* Ayna: çizim aynalanır, tuval yine dış kenara yaslanır (konum aynadan ÖNCE sola alınır). RTL'de --rt-dir çevirir. */ transform: scaleX(calc(var(--rt-bg-flip) * var(--rt-dir, 1))); } .rt-bg--flip { --rt-bg-flip: -1; --rt-bg-pos: left center; } /* === SAYFA ARKA PLAN KAYDI BAŞLANGIÇ (üreteç çıktısı: gen/build.cjs; elle düzenlemeyin) === */ .rt-bg--m-abacus { --rt-bg-main: url("bg/m-abacus.svg"); --rt-bg-main-sm: url("bg/m-abacus-sm.svg"); } .rt-bg--m-backpack { --rt-bg-main: url("bg/m-backpack.svg"); --rt-bg-main-sm: url("bg/m-backpack-sm.svg"); } .rt-bg--m-balloon { --rt-bg-main: url("bg/m-balloon.svg"); --rt-bg-main-sm: url("bg/m-balloon-sm.svg"); } .rt-bg--m-binoculars { --rt-bg-main: url("bg/m-binoculars.svg"); --rt-bg-main-sm: url("bg/m-binoculars-sm.svg"); } .rt-bg--m-book-stack { --rt-bg-main: url("bg/m-book-stack.svg"); --rt-bg-main-sm: url("bg/m-book-stack-sm.svg"); } .rt-bg--m-bookshelf { --rt-bg-main: url("bg/m-bookshelf.svg"); --rt-bg-main-sm: url("bg/m-bookshelf-sm.svg"); } .rt-bg--m-branch { --rt-bg-main: url("bg/m-branch.svg"); --rt-bg-main-sm: url("bg/m-branch-sm.svg"); } .rt-bg--m-bridge { --rt-bg-main: url("bg/m-bridge.svg"); --rt-bg-main-sm: url("bg/m-bridge-sm.svg"); } .rt-bg--m-bubble-cluster { --rt-bg-main: url("bg/m-bubble-cluster.svg"); --rt-bg-main-sm: url("bg/m-bubble-cluster-sm.svg"); } .rt-bg--m-calendar { --rt-bg-main: url("bg/m-calendar.svg"); --rt-bg-main-sm: url("bg/m-calendar-sm.svg"); } .rt-bg--m-camera { --rt-bg-main: url("bg/m-camera.svg"); --rt-bg-main-sm: url("bg/m-camera-sm.svg"); } .rt-bg--m-card-box { --rt-bg-main: url("bg/m-card-box.svg"); --rt-bg-main-sm: url("bg/m-card-box-sm.svg"); } .rt-bg--m-clipboard { --rt-bg-main: url("bg/m-clipboard.svg"); --rt-bg-main-sm: url("bg/m-clipboard-sm.svg"); } .rt-bg--m-clock-tower { --rt-bg-main: url("bg/m-clock-tower.svg"); --rt-bg-main-sm: url("bg/m-clock-tower-sm.svg"); } .rt-bg--m-compass { --rt-bg-main: url("bg/m-compass.svg"); --rt-bg-main-sm: url("bg/m-compass-sm.svg"); } .rt-bg--m-crayons { --rt-bg-main: url("bg/m-crayons.svg"); --rt-bg-main-sm: url("bg/m-crayons-sm.svg"); } .rt-bg--m-desk-globe { --rt-bg-main: url("bg/m-desk-globe.svg"); --rt-bg-main-sm: url("bg/m-desk-globe-sm.svg"); } .rt-bg--m-desk-lamp { --rt-bg-main: url("bg/m-desk-lamp.svg"); --rt-bg-main-sm: url("bg/m-desk-lamp-sm.svg"); } .rt-bg--m-door { --rt-bg-main: url("bg/m-door.svg"); --rt-bg-main-sm: url("bg/m-door-sm.svg"); } .rt-bg--m-easel { --rt-bg-main: url("bg/m-easel.svg"); --rt-bg-main-sm: url("bg/m-easel-sm.svg"); } .rt-bg--m-folded-map { --rt-bg-main: url("bg/m-folded-map.svg"); --rt-bg-main-sm: url("bg/m-folded-map-sm.svg"); } .rt-bg--m-folder-tabs { --rt-bg-main: url("bg/m-folder-tabs.svg"); --rt-bg-main-sm: url("bg/m-folder-tabs-sm.svg"); } .rt-bg--m-gate { --rt-bg-main: url("bg/m-gate.svg"); --rt-bg-main-sm: url("bg/m-gate-sm.svg"); } .rt-bg--m-gift-parcel { --rt-bg-main: url("bg/m-gift-parcel.svg"); --rt-bg-main-sm: url("bg/m-gift-parcel-sm.svg"); } .rt-bg--m-headphones { --rt-bg-main: url("bg/m-headphones.svg"); --rt-bg-main-sm: url("bg/m-headphones-sm.svg"); } .rt-bg--m-hill-flag { --rt-bg-main: url("bg/m-hill-flag.svg"); --rt-bg-main-sm: url("bg/m-hill-flag-sm.svg"); } .rt-bg--m-hourglass { --rt-bg-main: url("bg/m-hourglass.svg"); --rt-bg-main-sm: url("bg/m-hourglass-sm.svg"); } .rt-bg--m-house { --rt-bg-main: url("bg/m-house.svg"); --rt-bg-main-sm: url("bg/m-house-sm.svg"); } .rt-bg--m-keys { --rt-bg-main: url("bg/m-keys.svg"); --rt-bg-main-sm: url("bg/m-keys-sm.svg"); } .rt-bg--m-laptop-talk { --rt-bg-main: url("bg/m-laptop-talk.svg"); --rt-bg-main-sm: url("bg/m-laptop-talk-sm.svg"); } .rt-bg--m-lightbulb { --rt-bg-main: url("bg/m-lightbulb.svg"); --rt-bg-main-sm: url("bg/m-lightbulb-sm.svg"); } .rt-bg--m-lighthouse { --rt-bg-main: url("bg/m-lighthouse.svg"); --rt-bg-main-sm: url("bg/m-lighthouse-sm.svg"); } .rt-bg--m-magnifier { --rt-bg-main: url("bg/m-magnifier.svg"); --rt-bg-main-sm: url("bg/m-magnifier-sm.svg"); } .rt-bg--m-maple-leaf { --rt-bg-main: url("bg/m-maple-leaf.svg"); --rt-bg-main-sm: url("bg/m-maple-leaf-sm.svg"); } .rt-bg--m-microphone { --rt-bg-main: url("bg/m-microphone.svg"); --rt-bg-main-sm: url("bg/m-microphone-sm.svg"); } .rt-bg--m-mortarboard { --rt-bg-main: url("bg/m-mortarboard.svg"); --rt-bg-main-sm: url("bg/m-mortarboard-sm.svg"); } .rt-bg--m-opera-house { --rt-bg-main: url("bg/m-opera-house.svg"); --rt-bg-main-sm: url("bg/m-opera-house-sm.svg"); } .rt-bg--m-padlock { --rt-bg-main: url("bg/m-padlock.svg"); --rt-bg-main-sm: url("bg/m-padlock-sm.svg"); } .rt-bg--m-palette { --rt-bg-main: url("bg/m-palette.svg"); --rt-bg-main-sm: url("bg/m-palette-sm.svg"); } .rt-bg--m-paper-boat { --rt-bg-main: url("bg/m-paper-boat.svg"); --rt-bg-main-sm: url("bg/m-paper-boat-sm.svg"); } .rt-bg--m-pencil-cup { --rt-bg-main: url("bg/m-pencil-cup.svg"); --rt-bg-main-sm: url("bg/m-pencil-cup-sm.svg"); } .rt-bg--m-phone-bubble { --rt-bg-main: url("bg/m-phone-bubble.svg"); --rt-bg-main-sm: url("bg/m-phone-bubble-sm.svg"); } .rt-bg--m-pinboard { --rt-bg-main: url("bg/m-pinboard.svg"); --rt-bg-main-sm: url("bg/m-pinboard-sm.svg"); } .rt-bg--m-plant-pot { --rt-bg-main: url("bg/m-plant-pot.svg"); --rt-bg-main-sm: url("bg/m-plant-pot-sm.svg"); } .rt-bg--m-price-tag { --rt-bg-main: url("bg/m-price-tag.svg"); --rt-bg-main-sm: url("bg/m-price-tag-sm.svg"); } .rt-bg--m-puzzle { --rt-bg-main: url("bg/m-puzzle.svg"); --rt-bg-main-sm: url("bg/m-puzzle-sm.svg"); } .rt-bg--m-quill-ink { --rt-bg-main: url("bg/m-quill-ink.svg"); --rt-bg-main-sm: url("bg/m-quill-ink-sm.svg"); } .rt-bg--m-ruler-set { --rt-bg-main: url("bg/m-ruler-set.svg"); --rt-bg-main-sm: url("bg/m-ruler-set-sm.svg"); } .rt-bg--m-school { --rt-bg-main: url("bg/m-school.svg"); --rt-bg-main-sm: url("bg/m-school-sm.svg"); } .rt-bg--m-scissors { --rt-bg-main: url("bg/m-scissors.svg"); --rt-bg-main-sm: url("bg/m-scissors-sm.svg"); } .rt-bg--m-shape-blocks { --rt-bg-main: url("bg/m-shape-blocks.svg"); --rt-bg-main-sm: url("bg/m-shape-blocks-sm.svg"); } .rt-bg--m-sheet-nib { --rt-bg-main: url("bg/m-sheet-nib.svg"); --rt-bg-main-sm: url("bg/m-sheet-nib-sm.svg"); } .rt-bg--m-signpost { --rt-bg-main: url("bg/m-signpost.svg"); --rt-bg-main-sm: url("bg/m-signpost-sm.svg"); } .rt-bg--m-sprout { --rt-bg-main: url("bg/m-sprout.svg"); --rt-bg-main-sm: url("bg/m-sprout-sm.svg"); } .rt-bg--m-stacking-rings { --rt-bg-main: url("bg/m-stacking-rings.svg"); --rt-bg-main-sm: url("bg/m-stacking-rings-sm.svg"); } .rt-bg--m-stairs { --rt-bg-main: url("bg/m-stairs.svg"); --rt-bg-main-sm: url("bg/m-stairs-sm.svg"); } .rt-bg--m-story-book { --rt-bg-main: url("bg/m-story-book.svg"); --rt-bg-main-sm: url("bg/m-story-book-sm.svg"); } .rt-bg--m-suitcase { --rt-bg-main: url("bg/m-suitcase.svg"); --rt-bg-main-sm: url("bg/m-suitcase-sm.svg"); } .rt-bg--m-tea-glass { --rt-bg-main: url("bg/m-tea-glass.svg"); --rt-bg-main-sm: url("bg/m-tea-glass-sm.svg"); } .rt-bg--m-telescope { --rt-bg-main: url("bg/m-telescope.svg"); --rt-bg-main-sm: url("bg/m-telescope-sm.svg"); } .rt-bg--m-two-bubbles { --rt-bg-main: url("bg/m-two-bubbles.svg"); --rt-bg-main-sm: url("bg/m-two-bubbles-sm.svg"); } .rt-bg--m-webcam { --rt-bg-main: url("bg/m-webcam.svg"); --rt-bg-main-sm: url("bg/m-webcam-sm.svg"); } .rt-bg--a-birds { --rt-bg-accent: url("bg/a-birds.svg"); --rt-bg-accent-sm: url("bg/a-birds-sm.svg"); } .rt-bg--a-cloud-pair { --rt-bg-accent: url("bg/a-cloud-pair.svg"); --rt-bg-accent-sm: url("bg/a-cloud-pair-sm.svg"); } .rt-bg--a-cloud-trail { --rt-bg-accent: url("bg/a-cloud-trail.svg"); --rt-bg-accent-sm: url("bg/a-cloud-trail-sm.svg"); } .rt-bg--a-dot-wave { --rt-bg-accent: url("bg/a-dot-wave.svg"); --rt-bg-accent-sm: url("bg/a-dot-wave-sm.svg"); } .rt-bg--a-leaf-loop { --rt-bg-accent: url("bg/a-leaf-loop.svg"); --rt-bg-accent-sm: url("bg/a-leaf-loop-sm.svg"); } .rt-bg--a-pebbles { --rt-bg-accent: url("bg/a-pebbles.svg"); --rt-bg-accent-sm: url("bg/a-pebbles-sm.svg"); } .rt-bg--a-sparkle-dots { --rt-bg-accent: url("bg/a-sparkle-dots.svg"); --rt-bg-accent-sm: url("bg/a-sparkle-dots-sm.svg"); } .rt-bg--a-sparkle-loop { --rt-bg-accent: url("bg/a-sparkle-loop.svg"); --rt-bg-accent-sm: url("bg/a-sparkle-loop-sm.svg"); } .rt-bg--a-star-pair { --rt-bg-accent: url("bg/a-star-pair.svg"); --rt-bg-accent-sm: url("bg/a-star-pair-sm.svg"); } .rt-bg--a-sun-rays { --rt-bg-accent: url("bg/a-sun-rays.svg"); --rt-bg-accent-sm: url("bg/a-sun-rays-sm.svg"); } .rt-bg--a-swirl { --rt-bg-accent: url("bg/a-swirl.svg"); --rt-bg-accent-sm: url("bg/a-swirl-sm.svg"); } .rt-bg--a-twin-leaves { --rt-bg-accent: url("bg/a-twin-leaves.svg"); --rt-bg-accent-sm: url("bg/a-twin-leaves-sm.svg"); } /* === SAYFA ARKA PLAN KAYDI BİTİŞ === */ /* ---- MASAÜSTÜ (1024+) ---- */ @media (min-width: 1024px) { .rt-bg-host > .rt-bg { display: block; } /* head: 760 px metin sütunu, 1180'lik kapsayıcı. Şerit = içerik − sütun − 32 px nefes (+ dış boşluğa taşma). */ .rt-bg--head { inset-inline-end: calc(var(--rt-bg-edge) - var(--rt-bg-bleed)); inline-size: clamp(0px, calc(min(100%, var(--rt-container-max)) - 48px - var(--rt-container-narrow) - 32px + var(--rt-bg-bleed)), 440px); } /* narrow: ortalanmış 760 px sütun (blog yazısı, SSS, Hikâyemiz, Gizlilik): sütunun bitiş tarafındaki boşluk. */ .rt-bg--narrow { inset-inline-end: 24px; inline-size: clamp(0px, calc((100% - var(--rt-container-narrow)) / 2 - 64px), 440px); } /* section: rehberin maddesiz bölümü (40rem okuma sütunu). */ .rt-bg--section { inset-inline-end: calc(var(--rt-bg-edge) - var(--rt-bg-bleed)); inline-size: clamp(0px, calc(min(100%, var(--rt-container-max)) - 48px - 40rem - 48px + var(--rt-bg-bleed)), 440px); } /* Birleşik kuşaktaki (art arda maddesiz bölümler) ev sahibi bölüm kısadır (≈ 190 px): çizim bölümün üstünden başlar ve aynı kuşaktaki sonraki bölümün boş şeridine uzanır (metin sütunu 40rem; şerit onun dışında, kuşak zemini ortak). */ .rt-guide-section--merged > .rt-bg--section { inset-block-start: 32px; translate: none; block-size: 270px; } /* Yasal sayfa başı yalnız başlıktır (≈ 115 px): çizim okunur boyda olsun diye baş 1024 ve üstünde en az 168 px'tir. */ .rt-page-head--legal.rt-bg-host { min-block-size: 10.5rem; } .rt-page-head--legal > .rt-bg { block-size: calc(100% - 24px); } /* faq: maddesiz bölümü olmayan rehberde SSS başlık sütununun (5/12) altındaki boşluk; başlık üstte kalır. */ .rt-bg--faq { --rt-bg-pos: left bottom; inset-block: auto 40px; translate: none; inset-inline-start: var(--rt-bg-edge); inline-size: calc((min(100%, var(--rt-container-max)) - 48px - clamp(2.5rem, 5vw, 5rem)) * 5 / 12 - 24px); block-size: clamp(0px, calc(100% - 200px), 240px); } .rt-bg--faq.rt-bg--flip { --rt-bg-pos: right bottom; } /* profile: öğretmen üst kuşağı iki sütundur (portre 300 + 48 + metin 564 = 912 px). 1024–1179 arası şerit metne değer: gizli. */ .rt-bg--profile { inset-inline-end: calc(var(--rt-bg-edge) - var(--rt-bg-bleed)); inline-size: clamp(0px, calc(min(100%, var(--rt-container-max)) - 48px - 912px - 24px + var(--rt-bg-bleed)), 440px); } /* quiz: ücretsiz deneme kartının (46rem) bitiş yanındaki boşluk; kartın ve HEDİYE rozetinin dışında. */ .rt-bg--quiz { inset-inline-end: 16px; inline-size: clamp(0px, calc((100% - 46rem) / 2 - 64px), 340px); block-size: min(260px, calc(100% - 48px)); } /* notfound: 404 sahnesinin (kedi + soru balonu) ÜSTÜNDEKİ bitiş köşesi, dış boşluğa taşarak. Sahnenin altı denendi: bulutlar kedinin minderine biniyordu (after2 ekran görüntüsü). Ana nesne tuvalin alt bitişinde, balonun bitiş kenarının dışında kalır. */ .rt-bg--notfound { --rt-bg-pos: right top; inset-block: 16px auto; translate: none; inset-inline-end: calc(var(--rt-bg-edge) - var(--rt-bg-bleed)); inline-size: 240px; block-size: 140px; } .rt-bg--notfound.rt-bg--flip { --rt-bg-pos: left top; } } /* 1024–1179: sahne dar sütunda sağa yaslanır ve soru balonunun üst kenarı ≈ 134 px'e çıkar; 140 px'lik kutuda tabela direği balona değiyordu (r2 overlap.cjs, 1024: 632 px). Kutu 8 px'ten 96 px: direğin ucu ≈ 102 px'te, balon kutusunun (111 px) üstünde biter. */ @media (min-width: 1024px) and (max-width: 1179.98px) { .rt-bg-host > .rt-bg--notfound { inset-block-start: 8px; block-size: 96px; } } @media (min-width: 1024px) and (max-width: 1179.98px) { .rt-bg-host > .rt-bg--profile { display: none; } } /* DAR ŞERİT 1024–1279 (2026-09-17 üçüncü doğrulama): narrow ve quiz şeridi 1024'te 68–80 px'e iniyordu; 4 px kalemle okuma koltuğu 59 × 45 px'lik bir leke oluyordu (mürekkep yoğunluğu 0,24–0,37; 1280/1440'ta 0,09–0,18). Şerit dış kenara 16 px (sayfa oluğu) yaslanır ve sütuna 28 px nefes bırakır (metin sütunun 24 px iç boşluğuyla ≥ 52 px uzakta): 1024'te 104 × 78 px (quiz 116 px); kutu 1280'deki ölçüde (196 px, quiz 208 px) durur, boy 1280'e atlarken değişmez. 1200 altında telefon köşesinin 2,5 px kalemli (-sm) maskeleri kullanılır; 1200'de kutu 192 px'tir ve 4 px kalem 1280 ile aynı yoğunluktadır (fix2 narrow.cjs, r3-narrow-after: 1024'te yoğunluk 0,12–0,19, mürekkep 90–108 px, içeriğe ≥ 77 px). */ @media (min-width: 1024px) and (max-width: 1279.98px) { .rt-bg-host > .rt-bg--narrow, .rt-bg-host > .rt-bg--quiz { inset-inline-end: 16px; } .rt-bg-host > .rt-bg--narrow { inline-size: clamp(0px, calc((100% - var(--rt-container-narrow)) / 2 - 28px), 196px); } .rt-bg-host > .rt-bg--quiz { inline-size: clamp(0px, calc((100% - 46rem) / 2 - 28px), 208px); } } @media (min-width: 1024px) and (max-width: 1199.98px) { .rt-bg-host > .rt-bg--narrow, .rt-bg-host > .rt-bg--quiz { -webkit-mask-image: var(--rt-bg-main-sm), var(--rt-bg-accent-sm); mask-image: var(--rt-bg-main-sm), var(--rt-bg-accent-sm); } } /* ---- GİRİŞ KAPISI ---- 1100 px ve üstünde koyu panelin ÜST bitiş köşesi (başlığın yanı ve üstü, her panel boyunda boş); altında sayfanın en altında, yardım bağlantısının altında ayrılmış 96 px'lik şeritte. İki kopya aynı bileşimdir. */ .rt-bg-host > .rt-bg--auth-panel, .rt-bg-host > .rt-bg--auth-page { display: none; } @media (min-width: 1100px) { /* ÜST KÖŞE (2026-09-17 ikinci doğrulama): çizim eskiden alt köşedeydi ve kısa panelde (şifremi unuttum, 450 px) büyüme sırasının altında yalnız ≈ 84 px kalıyordu; kutu 168 × 78 px'e iniyor, anahtarlar 83 × 61 px'lik bir leke gibi okunuyordu. Panel içeriği dikeyde ortadadır, bu yüzden başlığın ÜSTÜ ve bitiş YANI her panel boyunda boştur (panel koordinatı, 420 px genişlik: başlık en çok x 225, kısa panelde y 98'de başlar; açıklamanın ilk satırı y 199, x 341'e kadar). 192 × 144 px'lik kutu (tuval 400 × 300 ile birebir 4:3, ölçek 0,48): eşlikçiler (tuvalde y ≤ 132) y ≤ 82'de biter, başlığın 16 px üstünde; ana nesne (tuval x 165–392, y 56–294) x 289–398, y 45–159 arasındadır: başlığın 64 px sağında, açıklamanın 40 px üstünde. Ölçüm (fix2 auth2.cjs, 1100/1440/1920): anahtar 151 × 110 px, kapı 181 × 126 px; metne en yakın mürekkep 20,5 px (en), 12 px içinde mürekkep yok. Kutu panel boyundan bağımsızdır: e-posta ve yeni şifre panelleri daha uzundur, başlık aşağı iner. İNCE KALEM: panel çizimi telefon köşesinin 2,5 px kalemli (-sm) maskelerini kullanır (4 px kalemle anahtar halkaları doluyordu). AYNA: giriş kapısı tohumları (0–3) aynalanmaz; aynalı bir bileşim eklenirse ana nesne başlık tarafına geçer, yeniden ölçülmeli. */ .rt-auth-story.rt-bg-host > .rt-bg--auth-panel { display: block; inset-block: 18px auto; translate: none; inset-inline-end: 18px; inline-size: 192px; block-size: 144px; --rt-bg-pos: right top; -webkit-mask-image: var(--rt-bg-main-sm), var(--rt-bg-accent-sm); mask-image: var(--rt-bg-main-sm), var(--rt-bg-accent-sm); } .rt-auth-story.rt-bg-host > .rt-bg--auth-panel.rt-bg--flip { --rt-bg-pos: left top; } } @media (max-width: 1099.98px) { body.rt-auth-page .rt-auth-main.rt-bg-host { padding-block-end: 7rem; } /* BAŞLANGIÇ köşesi (2026-09-17 doğrulama): sohbet düğmesi sağ alttadır ve sayfa sonuna kaydırınca 56 px'lik düğme 116 × 87 px'lik çizimin üstüne biniyordu (1024 × 768'de kapı neredeyse tamamen örtülüydü). Şeridin başlangıç yanı boştur. */ .rt-auth-main.rt-bg-host > .rt-bg--auth-page { display: block; inset-block: auto 12px; translate: none; inset-inline: 16px auto; inline-size: 116px; block-size: 87px; background-color: var(--rt-decor-ink-soft); -webkit-mask-image: var(--rt-bg-main-sm), var(--rt-bg-accent-sm); mask-image: var(--rt-bg-main-sm), var(--rt-bg-accent-sm); } } /* ---- TELEFON VE TABLET (< 1024) ---- bölümün üst bitiş köşesi (ev sahibi 96 px üst boşluk ayırır; çizim 2–77 px). 2026-09-17 doğrulama: 116 × 87 px'lik çizim bazı sayfalarda alttaki etikete/başlığa 3–13 px kalıyordu ve kenara 12 px yaslanıyordu (sayfa oluğu 16 px). Çizim 104 × 78 px'e indi, kenar payı oluk ile aynı 16 px. İkinci ölçüm (fix2 corner375.cjs, 375): /tr/start tepe-bayrak mürekkebi başlığın kalem vurgulu satırına hâlâ 13 px kalıyordu (ana nesnenin zemini tuvalin altına, y 294'e iner). Kutu 100 × 75 px ve 2 px'ten başlar: mürekkep en geç ≈ 76 px'te biter, başlık 96 px'te (kalem vurgulu satır ≈ 93 px) — en az 17 px nefes. */ @media (max-width: 1023.98px) { .rt-decor-host--corner > .rt-bg, .rt-trial.rt-bg-host > .rt-bg--quiz { display: block; inset-block-start: 2px; translate: none; inset-inline-end: 16px; inline-size: 100px; block-size: 75px; background-color: var(--rt-decor-ink-soft); -webkit-mask-image: var(--rt-bg-main-sm), var(--rt-bg-accent-sm); mask-image: var(--rt-bg-main-sm), var(--rt-bg-accent-sm); } /* Öğretmen üst kuşağı: yol satırı kısa, üst boşluk 28 px (rt.css profil kuralı); çizim eski çıkartmanın ölçüsündedir. */ .rt-profile-top.rt-decor-host--corner > .rt-bg { inset-block-start: 12px; inline-size: 96px; block-size: 72px; } /* Kuşak DIŞINDAKİ rehber bölümü 48 px üst boşlukla başlar (96 px köşe payı bölüm kuralınca ezilir): numara rozeti 47–79 px, başlık 90 px'te. 87 px'lik çizim başlığın üst kenarına değiyordu (r2 overlap.cjs, 375: 5–143 px). Çizim rozet satırında kalır. 96 × 72 px'lik kutuda (6 px) mürekkep başlığa 10–11 px kalıyordu (fix2 corner375.cjs: derinleşme, okul çağı, aile toplulukları); kutu 88 × 66 px ve 4 px'ten başlar: mürekkep ≈ 69 px'te biter, başlığın ≈ 21 px üstünde. */ .rt-guide-section.rt-decor-host--corner:not(.rt-guide-band > .rt-guide-section) > .rt-bg { inset-block-start: 4px; inline-size: 88px; block-size: 66px; } /* Ücretsiz deneme: HEDİYE rozeti kartın bitiş köşesindedir; çizim BAŞLANGIÇ köşesine geçer ve kart 96 px aşağıdan başlar. */ .rt-trial.rt-bg-host { padding-block-start: 6rem; } .rt-trial.rt-bg-host > .rt-bg--quiz { inset-inline: 16px auto; } } @media (forced-colors: active) { .rt-bg { visibility: hidden; } } @media print { .rt-bg { visibility: hidden; } } } /* ARKA-PLAN-BLOGU:BITIS */ /* ARKA-PLAN-ADLAR:BASLANGIC */ /* ============================================================================= ARKA PLAN KAYDI r3 (2026-09-17) — blog ailesi yeniden çizimi + öğretmen adıyla uyumlu motifler Owner (birebir): "blog kısmının arka plan görselini değiştir. hiç olmamış." ve "her öğretmenin arka planına kendi ismiyle uyumlu görsel koy. baykuşa baykuş güneşe güneş vb." - Yalnız kayıt satırları: yerleşim, renk token'ı, kalem ve telefon köşesi yukarıdaki SAYFA ARKA PLAN GÖRSELLERİ bloğundan gelir. - Blog: dizin = kemerli pencere önü (win-nook); yazılar = okuma koltuğu, duvar rafı, tepside demlik, portmanto; kategoriler = yün sepeti, saksı sehpası; sakin eşlikçiler = yaprak, bulut. Yazı, rakam, yüz, kalp, yıldız, ok yok. - Öğretmen: kimlik -> motif eşlemesi conf/rt-teacher-backgrounds.php (seçici öğretmen adı taşımaz). - SVG'ler üreteçten gelir (scratchpad queued/bg/gen: blog-family.cjs, names.cjs, pages3.cjs -> build3.cjs); elle düzenlenmez. Katmanlı çizimlerde öndeki nesne arkadakinin çizgisini SVG içi maskeyle keser. Üreteç her dosyada tuval sınırını denetler (bounds.cjs: çizgi her yönde ≥ 6 tuval birimi içeride; non-scaling kalem küçük kutuda kalınlaşır, kenarda düz kesilir). - r4 (2026-09-17 gece, doğrulama bulguları): Berry çizimi yeniden (ahududu = tırtıklı koni + çanak, yaban mersini = taçlı daire; yaprak ucu tuval dışındaydı); Dünya küresi kesintisiz çizgi + çizgiye değmeyen Avrasya ve Afrika; öğretmenler dizini (/tr/ogretmenler) masa küresi + kuşlar yerine el ele kâğıt bebek zinciri (paper-dolls): Dünya profiliyle neredeyse aynıydı. ============================================================================= */ @layer rt.page { .rt-bg--m-coat-hooks { --rt-bg-main: url("bg/m-coat-hooks.svg"); --rt-bg-main-sm: url("bg/m-coat-hooks-sm.svg"); } .rt-bg--m-doll { --rt-bg-main: url("bg/m-doll.svg"); --rt-bg-main-sm: url("bg/m-doll-sm.svg"); } .rt-bg--m-forest-berries { --rt-bg-main: url("bg/m-forest-berries.svg"); --rt-bg-main-sm: url("bg/m-forest-berries-sm.svg"); } .rt-bg--m-globe { --rt-bg-main: url("bg/m-globe.svg"); --rt-bg-main-sm: url("bg/m-globe-sm.svg"); } .rt-bg--m-owl { --rt-bg-main: url("bg/m-owl.svg"); --rt-bg-main-sm: url("bg/m-owl-sm.svg"); } .rt-bg--m-paper-dolls { --rt-bg-main: url("bg/m-paper-dolls.svg"); --rt-bg-main-sm: url("bg/m-paper-dolls-sm.svg"); } .rt-bg--m-planets { --rt-bg-main: url("bg/m-planets.svg"); --rt-bg-main-sm: url("bg/m-planets-sm.svg"); } .rt-bg--m-plant-stand { --rt-bg-main: url("bg/m-plant-stand.svg"); --rt-bg-main-sm: url("bg/m-plant-stand-sm.svg"); } .rt-bg--m-reading-chair { --rt-bg-main: url("bg/m-reading-chair.svg"); --rt-bg-main-sm: url("bg/m-reading-chair-sm.svg"); } .rt-bg--m-strawberry { --rt-bg-main: url("bg/m-strawberry.svg"); --rt-bg-main-sm: url("bg/m-strawberry-sm.svg"); } .rt-bg--m-sun { --rt-bg-main: url("bg/m-sun.svg"); --rt-bg-main-sm: url("bg/m-sun-sm.svg"); } .rt-bg--m-teapot-tray { --rt-bg-main: url("bg/m-teapot-tray.svg"); --rt-bg-main-sm: url("bg/m-teapot-tray-sm.svg"); } .rt-bg--m-wall-shelf { --rt-bg-main: url("bg/m-wall-shelf.svg"); --rt-bg-main-sm: url("bg/m-wall-shelf-sm.svg"); } .rt-bg--m-waves { --rt-bg-main: url("bg/m-waves.svg"); --rt-bg-main-sm: url("bg/m-waves-sm.svg"); } .rt-bg--m-win-nook { --rt-bg-main: url("bg/m-win-nook.svg"); --rt-bg-main-sm: url("bg/m-win-nook-sm.svg"); } .rt-bg--m-yarn-basket { --rt-bg-main: url("bg/m-yarn-basket.svg"); --rt-bg-main-sm: url("bg/m-yarn-basket-sm.svg"); } .rt-bg--a-berry-sprig { --rt-bg-accent: url("bg/a-berry-sprig.svg"); --rt-bg-accent-sm: url("bg/a-berry-sprig-sm.svg"); } .rt-bg--a-blossom { --rt-bg-accent: url("bg/a-blossom.svg"); --rt-bg-accent-sm: url("bg/a-blossom-sm.svg"); } .rt-bg--a-cloud-leaf { --rt-bg-accent: url("bg/a-cloud-leaf.svg"); --rt-bg-accent-sm: url("bg/a-cloud-leaf-sm.svg"); } .rt-bg--a-drift-leaves { --rt-bg-accent: url("bg/a-drift-leaves.svg"); --rt-bg-accent-sm: url("bg/a-drift-leaves-sm.svg"); } .rt-bg--a-globe-birds { --rt-bg-accent: url("bg/a-globe-birds.svg"); --rt-bg-accent-sm: url("bg/a-globe-birds-sm.svg"); } .rt-bg--a-leaf-pair { --rt-bg-accent: url("bg/a-leaf-pair.svg"); --rt-bg-accent-sm: url("bg/a-leaf-pair-sm.svg"); } .rt-bg--a-moon { --rt-bg-accent: url("bg/a-moon.svg"); --rt-bg-accent-sm: url("bg/a-moon-sm.svg"); } .rt-bg--a-sky-gulls { --rt-bg-accent: url("bg/a-sky-gulls.svg"); --rt-bg-accent-sm: url("bg/a-sky-gulls-sm.svg"); } .rt-bg--a-soft-cloud { --rt-bg-accent: url("bg/a-soft-cloud.svg"); --rt-bg-accent-sm: url("bg/a-soft-cloud-sm.svg"); } .rt-bg--a-star-dust { --rt-bg-accent: url("bg/a-star-dust.svg"); --rt-bg-accent-sm: url("bg/a-star-dust-sm.svg"); } .rt-bg--a-sun-clouds { --rt-bg-accent: url("bg/a-sun-clouds.svg"); --rt-bg-accent-sm: url("bg/a-sun-clouds-sm.svg"); } .rt-bg--a-toy-ball { --rt-bg-accent: url("bg/a-toy-ball.svg"); --rt-bg-accent-sm: url("bg/a-toy-ball-sm.svg"); } } /* ARKA-PLAN-ADLAR:BITIS */ /* ENTEGRASYON:B:BASLANGIC */ /* ENTEGRASYON 2026-09-17 — şerit B: scratchpad wf/pending-css/B.css (@layer rt.component). Kaynak şerit raporu wf/reports/B.md. */ /* ===================================================================================================================== ARANABİLİR SEÇİM KUTUSU — public/rt/rt-combobox.js (lane B, 2026-09-17) Owner (birebir): "kayıt olurken ülkelerin tamamı seçilemiyor." Aranabilir seçim kararı: "mantıklı olanı yap". Ülke, ülke telefon kodu ve saat dilimi