/* ========================================================================= noqt social — ORTAK TASARIM SİSTEMİ Tek kaynak: /assets/site.css · 5 sayfanın tamamı buradan beslenir. Kaynak doğruluğu: değerler /Users/furkankaraca/noqt/eventmatch/lib/theme/ app_theme.dart dosyasından alınmıştır (AppColors / AppSpacing / AppRadius / AppShadows / TextTheme). Uygulamadan sapılan HER değerin yanında NEDEN sapıldığı yazılıdır — sapmaların tamamı erişilebilirlik (WCAG AA) kaynaklıdır. Harici bağımlılık YOKTUR: CDN, Google Fonts, analytics, script yok. Fontlar /assets/ içindeki yerel dosyalardan yüklenir. İÇİNDEKİLER 01 Token katmanı (açık tema) 02 Token katmanı (koyu tema) 03 Font yüzleri 04 Reset ve temel katman 05 Tipografi ölçeği 06 Yerleşim (konteyner, bölüm, grid) 07 Bileşen: buton 08 Bileşen: pill / chip / rozet 09 Bileşen: kart 10 Bileşen: bölüm başlığı 11 Bileşen: nav (üst çubuk + segmentli kapsül) 12 Bileşen: footer 13 Bileşen: adım kartı ve özellik satırı 14 Bileşen: telefon çerçevesi ve ekran galerisi 15 Bileşen: SSS akordeonu 16 Bileşen: uzun metin (legal) tipografisi 17 Erişilebilirlik 18 Yardımcı sınıflar ========================================================================= */ /* ========================================================================= 01 TOKEN KATMANI — AÇIK TEMA ========================================================================= */ :root { /* ---- Zemin katmanları (AppColors) --------------------------------- */ --bg: #F4F8FC; /* AppColors.background */ --surface: #FFFFFF; /* AppColors.surface */ --surface-2: #F0F5FA; /* AppColors.surfaceElevated — DİKKAT: eski sürümde hataen #FFFFFF idi, app değeri budur */ --outline: #EDF1F6; /* AppColors.outline */ /* İMZA ZEMİN GRADYANI (AppColors.heroGradient). Uygulamada MainNavigationScreen tüm ekranları bu gradyana sarar — yani uygulamanın gerçek zemini düz #F4F8FC DEĞİL, bu gradyandır. Web'in de zemini bu; siteyi uygulamaya benzeten tek en güçlü karar budur. */ --bg-grad: linear-gradient(180deg, #B7D9F5 0%, #D9EFFB 45%, #E7F6EE 100%); /* ---- Vurgu (tema bağımsız — iki modda da aynı) --------------------- */ --accent: #D6F84C; /* AppColors.accent — imza lime */ --accent-pressed: #BFE22E; /* AppColors.accentPressed */ --on-accent: #14171F; /* AppColors.onAccent — lime dolgu üstü metin */ --accent-soft: #F6FCD6; /* AppColors.accentSoft (açık) */ /* METİN OLARAK lime. app_theme'de accent/accentPressed küçük metinde de kullanılıyor; web'de bu WCAG AA'yı geçmez, o yüzden ayrı token. Ham #D6F84C açık zeminde 1.13:1, #BFE22E 1.6:1 — okunmaz. CLAUDE.md'nin önerdiği #6B8F00 de YETERSİZ: beyazda 3.78:1, gradyan tepesinde (#B7D9F5) 2.57:1 → AA normal metin (4.5:1) eşiğinin altında. #456000 sitedeki EN KÖTÜ açık zeminde bile 4.87:1 verir. */ --accent-text: #456000; /* Dekoratif lime kenarlık (metin değil, kontrast şartı yok) */ --accent-line: rgba(107, 143, 0, 0.28); /* ---- Metin --------------------------------------------------------- */ --text: #14171F; /* AppColors.textPrimary */ /* AA SAPMASI: app'in textSecondary'si #6B7280, gradyan tepesinde 3.28:1 ile AA'yı geçmiyor. #525863 en kötü zeminde 4.86:1 verir. Beyaz kart üstünde app'inkinden bir tık koyu görünür — kabul edilen bedel. */ --text-2: #525863; /* AA SAPMASI: app'in textTertiary'si #9CA3AF, gradyan üstünde 1.72:1 — kullanılamaz. Açık temada üçüncül gri, ikincile ÇOK yaklaşır; bu bilinçli: uygulamanın kendi ekranlarında da hiyerarşi renkle değil BOYUT+AĞIRLIKLA kuruluyor (bkz. koyu temada textSecondary'nin neredeyse beyaz olması). */ --text-3: #565D68; /* ---- Durum renkleri ------------------------------------------------ */ --success: #34C77B; /* AppColors.success — yalnız DOLGU/ikon olarak */ --error: #FF5C5C; /* AppColors.error — yalnız DOLGU/ikon olarak */ /* Metin olarak kullanılabilir koyu türevler (ham hâlleri AA'da kalıyor: #34C77B 2.19:1, #FF5C5C 3.0:1 altı) */ --success-text: #146237; /* en kötü açık zeminde 5.03:1 */ --error-text: #A81E17; /* en kötü açık zeminde 4.98:1 */ --error-soft: rgba(255, 92, 92, 0.07); --error-line: rgba(255, 92, 92, 0.34); /* ---- Rozet kademeleri (DOLGU rengi — asla metin rengi değil) -------- */ --gold: #E5B93C; /* AppColors.verifiedGold */ --silver: #9FB2C8; /* AppColors.verifiedSilver */ --verified: #4CC3F8; /* AppColors.verifiedFree */ /* Üçünün de üstünde koyu metin okunur: 9.67 / 8.26 / 8.93 */ --on-badge: #14171F; /* ---- Yarıçap (AppRadius) ------------------------------------------ */ --r-pill: 999px; /* AppRadius.pill */ --r-hero: 30px; /* AppRadius.cardHero */ --r-sheet: 26px; /* AppRadius.sheet */ --r-card: 22px; /* AppRadius.cardStandard */ --r-card-sm: 16px; /* app'te en sık gerçek kart yarıçapı (14–18) */ --r-btn: 18px; /* ElevatedButton/OutlinedButton — TAM HAP DEĞİL */ --r-input: 18px; /* inputDecorationTheme */ --r-chip: 8px; /* küçük etiket/rozet */ /* ---- Gölge (AppShadows) — tek katman, geniş blur, düşük opaklık ----- */ --shadow-card: 0 8px 20px rgba(20, 23, 31, 0.07); --shadow-pill: 0 2px 8px rgba(20, 23, 31, 0.05); --shadow-float: 0 4px 12px rgba(20, 23, 31, 0.12); /* Koyu temada gölge yerine kenarlık kullanılır; açık temada kenarlık yok. Bu token ikisini tek yerden yönetir (bkz. .card). */ --card-border: transparent; /* ---- Boşluk merdiveni (AppSpacing + koddaki gerçek kullanım) -------- Uygulama saf 8pt grid DEĞİL: 14 ve 20 gibi ara adımlar token seviyesinde tanımlı, 6/10/18 ise kodda yoğun kullanılıyor. Merdiven birebir odur. */ --s-1: 4px; --s-2: 6px; --s-3: 8px; --s-4: 10px; --s-5: 12px; --s-6: 14px; --s-7: 16px; --s-8: 20px; --s-9: 24px; --s-10: 32px; /* Web'e özgü bölüm ritmi (uygulamada karşılığı yok, sayfa ölçeği için) */ --s-11: 40px; --s-12: 56px; --s-13: 72px; /* ---- Yerleşim ------------------------------------------------------ */ --container: 1080px; /* pazarlama genişliği */ --container-narrow: 720px; /* okuma genişliği (~68ch) */ --gutter: clamp(16px, 4vw, 24px); /* mobil 16 → geniş ekran 24 */ /* ---- Hareket ------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out */ --dur: 220ms; /* ---- Odak halkası -------------------------------------------------- KRİTİK: ham lime halka açık zeminde GÖRÜNMEZ (beyazda 1.21:1, gradyanda 1.02:1) — WCAG "odak göstergesi" şartını karşılamaz. Bu yüzden odak halkası iki katmanlıdır: koyu çekirdek (kontrastı taşır) + lime hale (markayı taşır). Koyu temada roller yer değiştirir. */ --focus-core: #14171F; --focus-halo: rgba(214, 248, 76, 0.75); } /* ========================================================================= 02 TOKEN KATMANI — KOYU TEMA (2026-08-08 itibarıyla DEVRE DIŞI) Brief'in "ŞART" dediği madde. Uygulamanın koyu paleti birebir. Furkan'ın kararıyla devre dışı bırakıldı: pazarlama sitesinin imza mavi gradyan zemini marka kimliği olarak SABİT kalmalı, ziyaretçinin sistem temasına göre siyaha dönmemeli. Bu yüzden aşağıdaki 7 blokta medya sorgusuna kasıtlı olarak asla doğru olmayacak ikinci bir koşul eklendi (`and (prefers-color-scheme: light)`) — tokenlar silinmedi, yalnızca etkisiz hale getirildi. Geri açmak için o ek koşulu kaldırmak yeterli. ========================================================================= */ @media (prefers-color-scheme: dark) and (prefers-color-scheme: light) { :root { --bg: #000000; --surface: #121212; --surface-2: #1E1E1E; --outline: #1F1F22; --bg-grad: linear-gradient(180deg, #000000 0%, #0A0A0A 45%, #0E1206 100%); --accent-soft: #23270F; /* Koyu zeminde ham lime zaten güvenli: #000 üstünde 17.39:1, #121212 üstünde 15.51:1 → türeve gerek yok. */ --accent-text: #D6F84C; --accent-line: rgba(214, 248, 76, 0.32); --text: #FFFFFF; --text-2: #E6E8EC; /* app: koyu temada ikincil metin neredeyse beyaz */ /* SAPMA: app'in koyu textTertiary'si LİME (#D6F84C). Bunu geniş metne (tarih, dipnot, telif) uygularsak hem okuma zorlaşır hem accent oranı patlar — uygulamada lime yalnız gerçek vurgu noktalarında. Üçüncül metin nötr kalır (#121212 üstünde 7.38:1). Lime vurgu için --accent-text kullanılır. */ --text-3: #9CA3AF; /* Koyu zeminde ham durum renkleri okunur → türeve gerek yok */ --success-text: #34C77B; /* #121212 üstünde 7.62:1 */ --error-text: #FFB4AB; /* #121212 üstünde 11.03:1 */ --error-soft: rgba(255, 92, 92, 0.10); --error-line: rgba(255, 92, 92, 0.38); /* Siyah zeminde gölge GÖRÜNMEZ — ayrımı yüzey farkı + kenarlık taşır. (app: koyu modda elevation 0 + outline #1F1F22) */ --shadow-card: none; --shadow-pill: none; --shadow-float: none; --card-border: #1F1F22; /* Odak halkası tersine döner: lime çekirdek + koyu hale */ --focus-core: #D6F84C; --focus-halo: rgba(0, 0, 0, 0.85); } } /* ========================================================================= 03 FONT YÜZLERİ — yerel dosyalar, harici CDN yok ========================================================================= */ /* Lufga'nın GERÇEKTE iki ağırlığı var (SemiBold 600 + Bold 700). Uygulamada geçen w800 Flutter tarafından 700'e yuvarlanır — web'de de Lufga için 400/500/800/900 İSTEME: tarayıcı sahte (synthetic) bold üretir ve harfler bulanıklaşır. Başlıklarda yalnız 600 veya 700 kullan. */ @font-face { font-family: 'Lufga'; src: url('/assets/LufgaSemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Lufga'; src: url('/assets/LufgaBold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* Inter değişken font — gövde metni, 100–900 arası tüm ağırlıklar gerçek */ @font-face { font-family: 'Inter'; src: url('/assets/Inter-VariableFont_opsz,wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --font-head: 'Lufga', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ========================================================================= 04 RESET VE TEMEL KATMAN ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { /* Yatay taşmaya karşı SON emniyet ağı. `clip`, `hidden`den farklı olarak yeni bir kaydırma konteyneri açmaz → position:sticky bozulmaz. NOT: bu maskeleme değil ağdır; taşmanın kendisi yerleşimde çözülür (grid çocuklarında min-width:0, görsellerde max-width:100%). */ overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background-color: var(--bg); /* gradyan yüklenene kadarki taban renk */ } body { min-height: 100vh; font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--text); background: transparent; /* gerçek zemin body::before'da */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* İmza gradyan zemin. Sabit (fixed) bir pseudo-eleman olarak veriliyor; böylece uzun sayfada gradyan TEKRAR ETMEZ, `background-attachment: fixed`in iOS Safari'deki bilinen sorunlarına da girilmez. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--bg-grad); pointer-events: none; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } /* Grid/flex çocuklarının içeriklerinden taşmasını engeller — yatay kaydırmanın en yaygın gerçek sebebi budur. */ main, section, article, header, footer, div { min-width: 0; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } hr { border: none; border-top: 1px solid var(--outline); margin: var(--s-9) 0; } ::selection { background: var(--accent); color: var(--on-accent); } /* ========================================================================= 05 TİPOGRAFİ ÖLÇEĞİ Uygulamanın ölçeği iki uçludur: büyük başlık (Lufga) ile gövde (Inter) arasında kasıtlı bir uçurum var, 19–25 arası neredeyse boş. Web'de bu oran korunur; yalnız display akışkan hâle getirilir. ========================================================================= */ :root { --fs-display: clamp(34px, 6.5vw, 56px); /* yalnız hero — app'te 36–44 */ --fs-h1: clamp(28px, 4vw, 38px); --fs-h2: clamp(22px, 3vw, 30px); /* app headlineMedium 26 civarı */ --fs-h3: clamp(18px, 1.6vw, 22px); /* app titleLarge 20 / headlineSmall 22 */ --fs-h4: 17px; /* app titleMedium */ --fs-lead: 17px; --fs-body: 16px; /* app bodyLarge */ --fs-sm: 14px; /* app bodyMedium */ --fs-xs: 13px; /* app titleSmall / PillChip */ --fs-2xs: 12px; /* app bodySmall */ } h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 700; color: var(--text); line-height: 1.15; /* app: başlıklarda 1.0–1.2, sıkı */ letter-spacing: -0.01em; text-wrap: balance; /* destekleyen tarayıcıda dengeli satır kırma */ } h1 { font-size: var(--fs-h1); line-height: 1.12; } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; } h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; } p { line-height: 1.5; } /* app: gövdede 1.3–1.45, web'de 1.5 rahat */ strong, b { font-weight: 600; } /* Hero başlığı — sayfada YALNIZ BİR KEZ kullanılır */ .display { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.02em; } /* Lime vurgulu başlık parçası. Açık zeminde lime METİN okunmaz — uygulamadaki gibi lime DOLGU + koyu metin kullanılır. Koyu temada da aynı kalır (dolgu üstü koyu metin). */ .display .hl, .hl { background: var(--accent); color: var(--on-accent); padding: 0.02em 0.32em 0.1em; border-radius: var(--r-card-sm); box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* Gövde varyantları */ .lead { font-size: var(--fs-lead); color: var(--text-2); line-height: 1.5; } .body-sm { font-size: var(--fs-sm); color: var(--text-2); } .meta { font-size: var(--fs-2xs); color: var(--text-3); } /* Bölüm üstü küçük etiket */ .kicker { display: block; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); } /* ========================================================================= 06 YERLEŞİM ========================================================================= */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* Okuma genişliği — hukuki/destek sayfaları */ .container--narrow { max-width: var(--container-narrow); } .section { padding-block: clamp(48px, 8vw, 88px); } .section--tight { padding-block: clamp(32px, 5vw, 56px); } /* Dikey ritim yardımcısı: doğrudan çocuklar arasına eşit boşluk koyar */ .stack > * + * { margin-top: var(--s-7); } .stack--sm > * + * { margin-top: var(--s-3); } .stack--lg > * + * { margin-top: var(--s-9); } /* AKIŞKAN GRID — breakpoint'e ihtiyaç duymadan 360px'ten 1440px'e pürüzsüz akar. Kart minimumu 260px; sığdığı kadar sütun açılır. */ .grid { display: grid; gap: var(--s-7); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } /* En fazla 2 sütun isteyen bloklar için */ .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); } /* Geniş ekranda 3 sütunu aşmasın */ .grid--3 { max-width: 100%; } @media (min-width: 1180px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } } /* Yatay kaydırmalı şerit (ekran galerisi gibi bilinçli taşmalar). Gutter'ı taşırıp kenarlara yaslamak için negatif margin kullanır. */ .scroll-x { display: flex; gap: var(--s-8); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-block: var(--s-3) var(--s-8); padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); scrollbar-width: thin; scrollbar-color: var(--outline) transparent; } .scroll-x > * { flex: 0 0 auto; scroll-snap-align: start; } .scroll-x::-webkit-scrollbar { height: 6px; } .scroll-x::-webkit-scrollbar-thumb { background: var(--outline); border-radius: var(--r-pill); } /* ========================================================================= 07 BİLEŞEN: BUTON GERÇEK UYGULAMA KURALI: ana butonlar 18px köşeli DİKDÖRTGENDİR. Tam hap (pill) SADECE PillChip/etiket ve alt menüde kullanılır. (Önceki web sürümünde butonlar hataen tam hap yapılmıştı — tekrarlama.) Uygulamada butonlarda elevation 0 → GÖLGE YOK. ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 48px; /* dokunma hedefi ≥44px */ padding: var(--s-7) var(--s-10); /* app: 16v / 32h */ border-radius: var(--r-btn); border: 1.2px solid transparent; font-family: var(--font-head); font-weight: 700; font-size: 16px; line-height: 1.2; text-align: center; cursor: pointer; box-shadow: none; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } /* Birincil — imza lime dolgu + koyu metin (14.84:1) */ .btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .btn--primary:hover { background: var(--accent-pressed); border-color: var(--accent-pressed); } .btn--primary:active { transform: translateY(1px); } /* İkincil — OutlinedButton: şeffaf zemin + 1.2px outline kenarlık */ .btn--secondary { background: transparent; color: var(--text); border-color: var(--outline); } .btn--secondary:hover { border-color: var(--text-3); background: var(--surface); } /* Üçüncül — TextButton: kroma yok, ikincil metin rengi */ .btn--quiet { background: transparent; color: var(--text-2); padding-inline: var(--s-6); } .btn--quiet:hover { color: var(--text); } /* Ters/koyu buton — app'teki Apple girişi dili (koyu dolgu + zemin rengi metin) */ .btn--inverse { background: var(--text); color: var(--surface); border-color: var(--text); } .btn--inverse:hover { opacity: 0.88; } /* Boyut ve genişlik varyantları */ .btn--sm { min-height: 44px; padding: var(--s-4) var(--s-8); font-size: var(--fs-sm); } .btn--block { display: flex; width: 100%; } .btn[aria-disabled="true"], .btn:disabled { background: var(--surface-2); color: var(--text-3); border-color: transparent; cursor: not-allowed; pointer-events: none; } /* ========================================================================= 08 BİLEŞEN: PILL / CHIP / ROZET Uygulamanın en çok tekrar eden atomu (PillChip). Rozet, etiket, kategori ve mikro-CTA'ların hepsi bu tek atomdan türer. app: radius 999, padding 14h/8v, etiket 13/Inter w600, ikon 14, gap 6 ========================================================================= */ .pill { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-6); border-radius: var(--r-pill); border: 1px solid transparent; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; white-space: nowrap; } .pill > svg, .pill > .pill__ico { width: 14px; height: 14px; flex-shrink: 0; } /* Varsayılan = outline: surface dolgu + ince kenarlık (pasif filtre chip'i) */ .pill--outline { background: var(--surface); border-color: var(--outline); color: var(--text); box-shadow: var(--shadow-pill); } @media (prefers-color-scheme: dark) and (prefers-color-scheme: light) { .pill--outline { border-color: var(--outline); } } /* Solid — koyu dolgu + zemin rengi metin. Koyu temada OTOMATİK tersine döner (dolgu beyazlaşır, metin koyulaşır) — app'teki onPrimaryFill mantığı. */ .pill--solid { background: var(--text); color: var(--surface); } @media (prefers-color-scheme: dark) and (prefers-color-scheme: light) { .pill--solid { background: #FFFFFF; color: #14171F; } } /* Accent — yumuşak lime dolgu + okunur koyu lime metin */ .pill--accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); } /* Frosted — YALNIZ fotoğraf/görsel üstünde. Düz zeminde kullanma. */ .pill--frosted { background: rgba(255, 255, 255, 0.30); color: #FFFFFF; border-color: transparent; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @media (prefers-color-scheme: dark) and (prefers-color-scheme: light) { .pill--frosted { background: rgba(0, 0, 0, 0.45); } } /* Card — fotoğraf üstünde yüksek kontrastlı rozet (her iki temada açık dolgu) */ .pill--card { background: rgba(255, 255, 255, 0.85); color: #14171F; } /* Vurgulu hâl — accent kenarlık (app: highlighted, 1.4px) */ .pill--highlight { border-color: var(--accent); border-width: 1.4px; } /* --- Küçük kare rozet (kademe etiketleri) ------------------------------- ÖNEMLİ: gold/silver/verified DOLGU renkleridir, METİN rengi DEĞİL. #E5B93C metin olarak beyazda 1.85:1 — okunmaz. Dolgu + koyu metin: 9.67:1. */ .badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: 2px var(--s-3); border-radius: var(--r-chip); font-family: var(--font-head); font-weight: 700; font-size: 11px; line-height: 1.5; letter-spacing: 0.02em; color: var(--on-badge); white-space: nowrap; } .badge--gold { background: var(--gold); } .badge--silver { background: var(--silver); } .badge--verified { background: var(--verified); } .badge--accent { background: var(--accent); } /* ========================================================================= 09 BİLEŞEN: KART İki AYRI aile — karıştırma. A) .card → içerik kartı: surface dolgu, açık temada KENARLIKSIZ (app yorumu: "ayırma işini kenarlık değil boşluk + çok hafif gölge yapar — sert kontur yok") B) .card-hero → görsel kartı: 30px yarıçap, scrim + üstünde tipografi ========================================================================= */ .card { background: var(--surface); border-radius: var(--r-card-sm); border: 1px solid var(--card-border); /* açık: transparent, koyu: #1F1F22 */ padding: var(--s-8); box-shadow: var(--shadow-card); } .card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; } /* Daha yumuşak, büyük kart (bölüm kutusu) */ .card--lg { border-radius: var(--r-card); padding: var(--s-9); } /* Tıklanabilir kart — hover'da yalnız hafif yükselme, renk patlaması yok */ .card--interactive { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); } @media (prefers-color-scheme: dark) and (prefers-color-scheme: light) { .card--interactive:hover { border-color: var(--accent-line); transform: translateY(-3px); } } /* Yumuşak lime kutu — vurgulanacak tek bir blok için (güven mesajı vb.) */ .card--accent { background: var(--accent-soft); border-color: var(--accent-line); box-shadow: none; } /* --- Hero (görsel) kartı ---------------------------------------------- */ .card-hero { position: relative; border-radius: var(--r-hero); overflow: hidden; isolation: isolate; } .card-hero__media { width: 100%; height: 100%; object-fit: cover; } /* Okunabilirlik scrim'i (AppColors.cardScrim): şeffaf %50 → siyah %88. Fotoğraf üstüne scrim OLMADAN asla beyaz metin koyma. */ .card-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.88) 100%); pointer-events: none; } .card-hero__body { position: absolute; z-index: 1; left: var(--s-9); right: var(--s-9); bottom: var(--s-8); color: #FFFFFF; } /* Fotoğraf üstü tipografi — scrim + metin gölgesi birlikte çalışır */ .card-hero__body h2, .card-hero__body h3, .on-media { color: #FFFFFF; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); } .card-hero__tags { position: absolute; z-index: 1; top: var(--s-8); left: var(--s-8); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); } /* ========================================================================= 10 BİLEŞEN: BÖLÜM BAŞLIĞI ========================================================================= */ .section-head { max-width: 620px; margin-bottom: var(--s-11); } .section-head .kicker { margin-bottom: var(--s-4); } .section-head h2 { margin-bottom: var(--s-6); } /* ========================================================================= 11 BİLEŞEN: NAV (üst çubuk) İMZA KARARI: "aktif/seçili" fikri uygulamada neredeyse HİÇ lime ile değil, KOYU DOLGULU KAPSÜL ile anlatılır (segmentli kapsül — event_list_screen). Web'in aktif link durumu da bu dili kullanır. Lime'ı aktif durum rengi YAPMA; uygulamanın karakterini bozar. ========================================================================= */ .site-header { position: sticky; top: 0; z-index: 50; /* Gradyan zeminin üstünde yüzer; kendi rengi yok, yalnız bulanıklık */ backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); background: var(--bg); /* color-mix desteklenmeyen tarayıcı için taban */ background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); } /* backdrop-filter desteklenmiyorsa düz zemin (okunabilirlik garantisi) */ @supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--bg); } } .site-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); min-height: 64px; padding-block: var(--s-4); } /* Marka kilidi */ .brand { display: inline-flex; align-items: center; gap: var(--s-4); font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--text); flex-shrink: 0; } /* Logo dosyası BEYAZ çizimdir → açık temada koyu rozet içine oturur. Koyu temada rozet gereksizleşir, şeffaflaşır. */ .brand__mark { width: 34px; height: 34px; border-radius: 9px; background: var(--text); display: grid; place-items: center; flex-shrink: 0; } .brand__mark img { width: 22px; height: 22px; object-fit: contain; } @media (prefers-color-scheme: dark) and (prefers-color-scheme: light) { .brand__mark { background: transparent; } } .brand__accent { color: var(--accent-text); } /* Segmentli kapsül — app'in imza bileşeni. Dış kapsül surface dolgu + 999 yarıçap + 3–4px iç padding + pill gölgesi. */ .nav-links { display: flex; align-items: center; gap: var(--s-1); padding: 4px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-pill); } .nav-link { display: inline-flex; align-items: center; min-height: 44px; /* dokunma hedefi ≥44px (app'te segment daha kısadır; web'de erişilebilirlik şartı ağır basar) */ padding: var(--s-3) var(--s-6); border-radius: var(--r-pill); font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 700; color: var(--text-2); white-space: nowrap; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .nav-link:hover { color: var(--text); } /* Aktif sayfa — HTML'de aria-current="page" ile işaretlenir; stil ona bağlı, ayrı bir sınıfa gerek yok (tek kaynak: erişilebilirlik özniteliği). */ .nav-link[aria-current="page"] { background: var(--text); color: var(--surface); } @media (prefers-color-scheme: dark) and (prefers-color-scheme: light) { .nav-link[aria-current="page"] { background: #FFFFFF; color: #14171F; } } /* Dar ekranda segmentli kapsül taşmasın — kaydırılabilir olsun */ @media (max-width: 760px) { .nav-links { overflow-x: auto; scrollbar-width: none; max-width: 100%; } .nav-links::-webkit-scrollbar { display: none; } } /* Çok dar ekranda ikincil nav gizlenebilir (footer zaten tüm bağlantıları taşır) */ @media (max-width: 520px) { .nav-links--collapse { display: none; } } /* ========================================================================= 12 BİLEŞEN: FOOTER ========================================================================= */ .site-footer { border-top: 1px solid var(--outline); padding-block: var(--s-10) var(--s-11); margin-top: var(--s-12); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6) var(--s-9); } .footer-brand { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-xs); color: var(--text-3); } .footer-brand .brand__mark { width: 24px; height: 24px; border-radius: 7px; } .footer-brand .brand__mark img { width: 15px; height: 15px; } /* Dar ekranda tek satıra sığmaz — alta sarsın, taşma yapmasın */ .footer-links { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-9); font-size: var(--fs-xs); } .footer-links a { color: var(--text-2); font-weight: 500; min-height: 32px; display: inline-flex; align-items: center; } .footer-links a:hover { color: var(--text); text-decoration: underline; } /* ========================================================================= 13 BİLEŞEN: ADIM KARTI ve ÖZELLİK SATIRI ========================================================================= */ /* Numaralı adım kartı */ .step__num { width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 17px; margin-bottom: var(--s-7); } .step h3 { margin-bottom: var(--s-3); } .step p { color: var(--text-2); font-size: var(--fs-sm); } /* Özellik/perk satırı — upgrade_screen._perkRow kalıbının birebir web hâli. Siteye "aynı ekipten" hissini en ucuz veren desen. */ .perk-list > li + li { margin-top: var(--s-8); } .perk { display: flex; align-items: flex-start; gap: var(--s-6); } .perk__icon { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; flex-shrink: 0; font-size: 17px; line-height: 1; } .perk__icon svg { width: 17px; height: 17px; } .perk__title { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .perk__desc { font-size: var(--fs-xs); line-height: 1.35; color: var(--text-2); } /* İkon rozeti (kart üstü) — perk__icon'un kare akrabası */ .icon-badge { width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; font-size: 21px; line-height: 1; margin-bottom: var(--s-6); } /* ========================================================================= 14 BİLEŞEN: TELEFON ÇERÇEVESİ ve EKRAN GALERİSİ Yeni ekran görüntüleri 609 px genişliktedir. Telefon çerçevesi 220 CSS px'dir. ========================================================================= */ .phone { --phone-w: 220px; width: var(--phone-w); aspect-ratio: 203 / 440; /* kaynak görselin gerçek oranı */ background: #14171F; /* cihaz çerçevesi her iki temada koyu kalır */ border-radius: 32px; padding: 9px; position: relative; box-shadow: var(--shadow-float); flex-shrink: 0; } /* Çentik */ .phone::before { content: ''; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 66px; height: 18px; background: #14171F; border-radius: 14px; z-index: 2; } .phone__screen { width: 100%; height: 100%; border-radius: 24px; overflow: hidden; background: #1A1A1C; } .phone__screen img { width: 100%; height: 100%; object-fit: cover; } .shot { text-align: center; } .shot__caption { margin-top: var(--s-6); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); } /* ========================================================================= 15 BİLEŞEN: SSS AKORDEONU Anlamlı HTML:
… JavaScript gerekmez (harici script yasağıyla da uyumlu). ========================================================================= */ .faq { border-top: 1px solid var(--outline); } .faq__item { border-bottom: 1px solid var(--outline); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); min-height: 56px; /* dokunma hedefi */ padding-block: var(--s-6); cursor: pointer; list-style: none; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h4); color: var(--text); } /* Tarayıcı varsayılan üçgenini kaldır */ .faq__q::-webkit-details-marker { display: none; } .faq__q::marker { content: ''; } /* Kendi göstergemiz: + / − (dekoratif, ekran okuyucu okumaz) */ .faq__q::after { content: ''; width: 20px; height: 20px; flex-shrink: 0; background: linear-gradient(var(--text-2), var(--text-2)) center/12px 2px no-repeat, linear-gradient(var(--text-2), var(--text-2)) center/2px 12px no-repeat; transition: transform var(--dur) var(--ease); } .faq__item[open] .faq__q::after { /* dikey çizgi kaybolur → "−" */ background: linear-gradient(var(--text-2), var(--text-2)) center/12px 2px no-repeat; transform: rotate(180deg); } .faq__a { padding-bottom: var(--s-8); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; } .faq__a > * + * { margin-top: var(--s-5); } /* ========================================================================= 16 BİLEŞEN: UZUN METİN (LEGAL) TİPOGRAFİSİ gizlilik / kullanim-kosullari / destek / hesap-silme sayfaları. Metinler mağaza incelemesinden geçmiştir — burada yalnız KABUK vardır. ========================================================================= */ /* Okuma yüzeyi: uzun metin gradyanın üstünde çıplak durmaz, surface'e oturur. Bu hem uygulamanın "içerik kartlarda yaşar" mantığına uyar hem de metin kontrastını zemin gradyanından bağımsız sabitler. */ .prose-sheet { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: clamp(20px, 4vw, 40px); } .prose { line-height: 1.65; } /* uzun metinde rahat satır aralığı */ .prose > * + * { margin-top: var(--s-5); } .prose h2 { font-size: clamp(20px, 2.4vw, 24px); /* eskiden sabit 17px — hiyerarşi zayıftı */ font-weight: 700; margin-top: var(--s-10); margin-bottom: var(--s-3); } .prose h3 { font-size: var(--fs-h4); font-weight: 600; margin-top: var(--s-8); margin-bottom: var(--s-2); } .prose > h2:first-child, .prose > h3:first-child { margin-top: 0; } .prose p, .prose li { color: var(--text-2); font-size: 15px; } .prose ul, .prose ol { padding-left: var(--s-8); margin-block: var(--s-3); } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-block: var(--s-1); } .prose li::marker { color: var(--text-3); } /* Gövde içi bağlantı — renk TEK BAŞINA ayırt edici olamaz (WCAG 1.4.1), bu yüzden altı çizili. */ .prose a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .prose a:hover { text-decoration-thickness: 2px; } /* Sayfa üstü tarih satırı */ .page-date { color: var(--text-3); font-size: var(--fs-xs); } /* İçerik kutusu — adım/bilgi blokları */ .box { background: var(--surface-2); border: 1px solid var(--outline); border-radius: var(--r-card-sm); padding: var(--s-8) var(--s-9); margin-block: var(--s-8); } .box > :first-child { margin-top: 0; } .box > :last-child { margin-bottom: 0; } /* Uyarı kutusu — mağaza incelemesi için kritik uyarılar (ör. "Hesabınızı silmek aboneliğinizi iptal etmez") */ .warn { background: var(--error-soft); border: 1px solid var(--error-line); border-radius: var(--r-card-sm); padding: var(--s-8) var(--s-9); margin-block: var(--s-8); } .warn > :first-child { margin-top: 0; } .warn > :last-child { margin-bottom: 0; } .warn > h2:first-child, .warn > h3:first-child { color: var(--error-text); } /* Uygulama içi yol rozeti — ör. Ayarlar > Gizlilik. Açık temada #456000/#F6FCD6 kombinasyonu yüksek kontrastlıdır. */ .path { display: inline-block; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-chip); padding: 1px var(--s-3); font-size: 13.5px; font-weight: 600; color: var(--accent-text); white-space: nowrap; } @media (max-width: 520px) { .path { white-space: normal; } /* dar ekranda taşmasın */ } /* Sayfa altı bağlantı listesi (hukuki sayfalarda) */ .page-links { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-9); margin-top: var(--s-11); padding-top: var(--s-8); border-top: 1px solid var(--outline); font-size: var(--fs-xs); } .page-links a { color: var(--text-2); font-weight: 600; } .page-links a:hover { color: var(--text); text-decoration: underline; } /* ========================================================================= 17 ERİŞİLEBİLİRLİK ========================================================================= */ /* --- Odak halkası ------------------------------------------------------ İKİ KATMANLI olmak ZORUNDA: ham lime halka açık zeminde görünmez (beyazda 1.21:1, gradyan tepesinde 1.02:1). Koyu çekirdek kontrastı, lime hale markayı taşır. Koyu temada roller yer değiştirir (bkz. tokenlar). */ :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus-core); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); border-radius: var(--r-chip); } /* Yuvarlak bileşenlerde halka bileşenin biçimini korusun */ .btn:focus-visible { border-radius: var(--r-btn); } .pill:focus-visible, .nav-link:focus-visible { border-radius: var(--r-pill); } /* Odak halkasını asla animasyona sokma (transition: all yasağı) */ /* --- İçeriğe geç bağlantısı ------------------------------------------- Her sayfanın içindeki İLK öğe olmalı: */ .skip-link { position: absolute; left: var(--s-4); top: var(--s-4); z-index: 100; transform: translateY(-200%); padding: var(--s-4) var(--s-7); border-radius: var(--r-chip); background: var(--text); color: var(--surface); font-weight: 600; font-size: var(--fs-sm); transition: transform var(--dur) var(--ease); } .skip-link:focus-visible { transform: translateY(0); } /* --- Yapışkan çubuğun örttüğü anchor hedefleri ------------------------- ŞERİT DIŞI İSTEK — üç şerit de aynı eksiği bildirdi, karşılığı buraya alındı. .site-header sticky (min-height 64px); bir #anchor'a atlandığında hedef başlık çubuğun ALTINDA kalıyor, kullanıcı yanlış yere baktığını sanıyor. 64px çubuk + 20px nefes payı = 84px. Beş sayfa da bunu ayrı ayrı sayfa-içi