/* Tüketici yüzeyi. 2026-08-20'ye kadar bu dosya ürünün ÜÇÜNCÜ tasarım * sistemiydi ve panelin sistemiyle tek bir değer bile paylaşmıyordu. * * En pahalı kısmı bir renk değil bir AD karışıklığıydı: burada * `--accent:#58e0a5` YEŞİL demekti, styles.css'te `--accent` MAVİ ve üstelik * kiracının kendi marka rengi. Aynı ad, iki yüzeyde zıt rol — iki dosyaya da * bakan bir geliştirici için tuzak. Eski satır şuydu: * * --accent:#58e0a5;--blue:#436ad9 * * Yani platform mavisi burada ikinci sınıf bir takma ada (`--blue`) sürülmüş, * marka aksanı adını bir DURUM rengine kaptırmıştı. Yeni hâli: * * - `--accent` → her yüzeyde aynı rol: marka aksanı (mavi), tokens.css'ten. * - `--success-ink` / `--success-bg` → yeşil, artık bir durum rengi. * * Yüzeyin kendi karakteri KALIYOR (12 sütunluk ızgara, geniş kaplar, kendi * başlık çubuğu) ama artık ayrı bir sistem değil: renk, yarıçap, ağırlık, * ölçek ve süre /tokens.css'ten okunuyor. * * KALDIRILAN DEKOR: `radial-gradient(circle at 80% 0,#12382d 0,transparent 35%)` * — sayfanın sağ üstünde duran, %35 yarıçaplı yeşil bir yıkama. Vitrindeki üç * `blur(90px)` lekesiyle aynı kalıp ve aynı gerekçeyle gitti (PRODUCT.md:21, * "loud decoration"). Bu bir arama ve rezervasyon aracı; görsel ilgisi * sonuçlardan gelir. * * TARİHÎ NOT — bu sayfanın düğmesi bir zamanlar `#4f7dff → #38bdf8` degradesi * üzerine beyaz yazı basıyordu: koyu uçta 3,68:1, açık uçta 2,14:1. Salim'in * 2026-08-06 kararı beyaz yazıyı korumak ve rengi indirmekti: `#436ad9 → #0369a1`, * en kötü uçta 4,88:1. Bugün degradenin kendisi de gitti — düğme düz `--accent`, * üzerinde ve basılı tonları tokens.css'te `color-mix` ile TÜRETİLİYOR, çünkü * `--accent` beyaz etiketli bir değer ve sabit yazılmış bir hover kiracı * `#ffffff` seçtiğinde okunmaz olurdu. * * The Syne rules here used to use the `font:` shorthand with a bare, unquoted, * single-family value (`font:700 20px Syne`). A shorthand supplies no fallback * list, so if Syne failed to load the browser dropped to its default serif — * Times New Roman on most desktops — including on this page's largest heading. * Expanded to longhand with the same chain the rest of the app uses. */ /* Sayfanın 'ine yeni bir koymak consumer.html'e dokunmak olurdu ve o dosya şu an başka bir ajanda; `@import` aynı işi bu dosyanın içinden yapıyor. app.mjs'in statik yol tablosunda "/tokens.css" satırı olmadan bu istek 404 döner ve sayfa renksiz açılır — bkz. rapordaki engelleyici. */ @import url("./tokens.css"); :root { font-family: var(--font-body); } * { box-sizing: border-box; } /* Gövde boyu ve satır yüksekliği bu dosyada HİÇ kararlaştırılmamıştı: sayfa tarayıcının `normal` değerine düşüyordu (Inter'de ~1,21), yani okuma satır aralığını hiç kimse seçmemişti. 16/24 — ölçeğin gövde basamağı. */ body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-size: var(--text-md); line-height: var(--leading-md); } a { color: inherit; } /* --------------------------------- Başlık --------------------------------- */ .consumer-header { height: 76px; padding: 0 max(22px, calc((100vw - 1320px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); /* Sabit `#07100ed9` idi: zeminin %85'i. Aynı oran, ama zemin token'dan — yoksa açık temada koyu bir şerit kalırdı. */ background: color-mix(in srgb, var(--bg) 85%, transparent); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(16px); } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: var(--weight-heading); font-size: var(--text-lg); line-height: var(--leading-lg); font-family: var(--font-heading); } /* `.brand-mark` — 38px'lik `linear-gradient(135deg,var(--blue),#0369a1)` kare — buradaydı. İşaret artık /bannerView.css'te, favicon.svg'nin yıldızıyla aynı şekil, üç yüzeyde tek tanım. */ nav { display: flex; gap: 18px; } nav a { color: var(--muted); text-decoration: none; font-size: var(--text-sm); line-height: var(--leading-sm); } /* --------------------------------- Düzen ---------------------------------- */ .consumer-shell { max-width: 1320px; margin: auto; padding: 54px 22px 80px; } .hero { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; margin-bottom: 30px; } /* `clamp(34px,5vw,64px)` idi — vitrinin 50px tavanından da büyük, ve iki uç arasındaki hiçbir genişlikte satır kutusu 8'in katı değildi. Burası bir pazarlama afişi değil bir araç: ölçeğin en üst basamağı yetiyor. */ .hero h1 { font-weight: var(--weight-display); font-size: var(--text-2xl); line-height: var(--leading-2xl); font-family: var(--font-heading); margin: 8px 0 12px; max-width: 850px; } .hero p { color: var(--muted); max-width: 720px; } /* Yeşildi (`--accent`); artık marka aksanının okunabilir tonu: #a9c1ff / #080b12 = 11,02:1 koyu, #3757b3 / #f4f6f9 = 6,11:1 açık. Seçici `p.eyebrow`, çünkü hero'daki eyebrow bir

ve yukarıdaki `.hero p` kuralı (0,1,1) `.eyebrow`den (0,1,0) daha özgül: sayfanın EN ÜSTTEKİ eyebrow'u bu yüzden ötekilerden farklı renkteydi ve kimse fark etmemişti. Tek renk, sekiz yerde. */ p.eyebrow { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-heading); letter-spacing: .16em; color: var(--accent-tint-text); margin: 0; } .consumer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; } /* `linear-gradient(145deg,var(--panel),#0e1715)` idi. Düz yüzey: bir kabın zemininin iki ucu arasında fark olması, üstündeki metnin kontrastını ölçülemez yapıyor. */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-container); padding: 22px; min-width: 0; } .auth-panel { grid-column: span 8; } .membership-panel { grid-column: span 4; } .search-panel { grid-column: span 5; } .results-panel { grid-column: span 7; } .appointments-panel { grid-column: 1 / -1; } .panel-heading { margin-bottom: 18px; } .panel-heading h2 { font-weight: var(--weight-heading); font-size: var(--text-xl); line-height: var(--leading-xl); font-family: var(--font-heading); margin: 8px 0; } .horizontal { display: flex; align-items: center; justify-content: space-between; } /* Oturum ve güven kartları yeşil bir adaydı (#3a5b50 / #163128 / #c9ffe7) — sayfanın geri kalanı maviye döndüğünde geriye kalan tek yeşil yüzey. */ .session-card, .trust-card { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-container); background: var(--panel-2); color: var(--ink); } /* -------------------------------- Formlar --------------------------------- */ .auth-grid { display: grid; gap: 24px; } .auth-tabs { display: flex; gap: 8px; margin-bottom: 18px; } .auth-tabs button { flex: 1; min-height: var(--control-touch); background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-weight: var(--weight-medium); } .auth-tabs button:hover { background: var(--surface-2-hover); color: var(--ink); } /* Seçili sekme birincil dolgu: beyaz yazı 4,88:1. Eskiden 135° degradeydi. */ .auth-tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-hover); } .auth-switch { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); } .auth-switch button { display: inline; width: auto; min-height: var(--control-touch); padding: 0; background: none; border: 0; color: var(--accent-tint-text); font-weight: var(--weight-medium); text-decoration: underline; cursor: pointer; } form { display: grid; gap: 13px; } label { display: grid; gap: 7px; color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-medium); } input, select, button { font: inherit; border-radius: var(--radius-control); transition: var(--transition-control); } input, select { width: 100%; min-height: var(--control-md); padding: var(--control-pad-md); background: var(--field); border: 1px solid var(--line); color: var(--ink); } input:focus, select:focus { border-color: var(--accent); } /* Birincil düğme: düz dolgu, bir adım koyu kenar, 510 ağırlık, özellik başına geçiş. Ölçüldü — beyaz yazı: dolgu 4,88:1 · üzerinde 5,43:1 · basılı 6,61:1. `filter: brightness()` ve degrade YOK. */ button { min-height: var(--control-md); padding: var(--control-pad-md); border: 1px solid var(--accent-hover); background: var(--accent); color: var(--accent-ink); font-weight: var(--weight-medium); cursor: pointer; } button:hover { background: var(--accent-hover); border-color: var(--accent-pressed); } button:active { background: var(--accent-pressed); border-color: var(--accent-pressed); transform: translateY(1px); } button.secondary, button.ghost { background: var(--surface-2); border-color: var(--line); color: var(--ink); } button.secondary:hover, button.ghost:hover { background: var(--surface-2-hover); border-color: var(--line-strong); } button.secondary:active, button.ghost:active { background: var(--surface-2-pressed); } /* `opacity:.5` idi: kenarı ve metni altındaki zeminle karıştırdığı için aynı düğme kartın üstünde başka, panelin üstünde başka bir kontrast veriyordu — yani ölçülemiyordu. Gerçek renk: #757f90 / #171f2c = 4,09:1, ve WCAG 2.2 1.4.3 devre dışı denetimi açıkça muaf tutuyor. */ button:disabled { background: var(--disabled-bg); border-color: var(--disabled-line); color: var(--disabled-ink); cursor: not-allowed; transform: none; } .consent { display: grid; grid-template-columns: auto 1fr; align-items: start; } .consent input { width: auto; min-height: 0; margin-top: 2px; } /* ----------------------------- Durum ve sonuçlar --------------------------- */ .muted { color: var(--muted); } .status { min-height: 22px; color: var(--muted); } .status.error { color: var(--danger-ink); } .status.success { color: var(--success-ink); } .badge { padding: 6px 12px; background: var(--neutral-bg); border-radius: var(--radius-round); color: var(--neutral-ink); font-size: var(--text-xs); line-height: var(--leading-xs); } .map { height: 300px; border-radius: var(--radius-container); margin-top: 18px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; } .results { display: grid; gap: 12px; } .result { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-container); background: var(--panel-2); } .result-head { display: flex; justify-content: space-between; gap: 14px; } .result strong { font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-heading); } .result small { display: block; color: var(--muted); margin-top: 5px; } /* Puan bir DURUM: "iyi" demek, marka rengi değil. #22c55e / #121a26 = 5,80:1 koyu, #14762f / #e6f6ec zemin üstünde 5,12:1 açık. */ .score { color: var(--success-ink); font-weight: var(--weight-heading); white-space: nowrap; } .directions { display: inline-block; margin-top: 10px; color: var(--accent-tint-text); } .review-form { grid-template-columns: 100px 1fr auto; margin-top: 12px; } .attendance-arrived { color: var(--success-ink); } .featured-panel { grid-column: 1 / -1; } .featured-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } /* Üst kenar yeşildi (eski `--accent`); artık marka aksanı. Bu bir durum değil bir vurgu: "öne çıkarılmış" demek. */ .featured-card { padding: 15px; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius-container); background: var(--panel-2); } .featured-card strong { display: block; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-heading); overflow-wrap: anywhere; } .featured-card span { display: block; margin-top: 5px; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); } /* Form-scoped hata metni. Her hata sayfanın en üstündeki tek satıra yazıldığı sürece, en alttaki formu gönderen kişi için ekran dışında kalıyordu. Bu düğüm başarısız olan denetimin dibinde durur ve `aria-describedby` ile alanlarına bağlıdır; `hidden` olduğunda hiç yer kaplamaz. */ .form-error { margin: 0; color: var(--danger-ink); font-size: var(--text-sm); line-height: var(--leading-sm); } /* `.form-error[hidden]{display:none}` used to sit here. It was the right fix applied to exactly one class: `hidden` loses to any author `display` rule, which somebody noticed on the error node and nowhere else — while the `form{display:grid}` rule in this same file was quietly doing it to BOTH auth forms, putting the login and register fields on screen together. base.css answers it once now, for every element on every page. */ /* Sunucunun reddettiği alan. Yalnız renk değil, kenarlık da değişir: kırmızıyı ayırt edemeyen biri için renk tek başına bir işaret değildir. */ input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger-ink); outline: 1px solid var(--danger-ink); } /* Üyelik iptalinin onay adımı. Kabı işletme panelindeki ikiziyle aynı sınıfları kullanıyor (`billing-manage`, `billing-manage-actions`, `.secondary`, `.ghost`) ama o sınıfların tanımı `styles.css`te ve /consumer o dosyayı yüklemiyor. İkisi birden ıskalanıyordu: - `.billing-manage-actions` yoktu, yani iki düğme aralarında hiç boşluk olmadan bitişik çıkıyordu. - `.ghost` yoktu, yani "Vazgeç" bu dosyanın varsayılan `button` kuralına düşüyordu: mavi degrade, kartın en yüksek sesli düğmesi. Onay düğmesi (`.secondary`) ise sessiz olanı. consumer.js:506 tam bunun tersini söylüyor -- "onayı kısıp Vazgeç'i büyütmek" düzenlemelerin adını koyduğu desen ve sözleşmedeki "tek tıkla" ifadesiyle çelişiyor. `.ghost` bu yüzden `button.secondary` ile birebir aynı: eşit ağırlık, styles.css:85'in iki sınıfı tek kuralda birleştirmesiyle aynı sebeple. */ .billing-manage-actions { display: flex; flex-wrap: wrap; gap: 8px; } .billing-manage-actions button { flex: 1 1 160px; } /* Hesabımı sil (A1 Task 6, 2026-09-06). Kart kırmızı bir çizgiyle işaretli -- işletme panelindeki `.settings-danger-card` ile aynı tanım -- ve düğme sözlüğü de aynı: `.danger` çerçeveli (koyu zeminde 5,43:1, açık zeminde 6,02:1), dolgu yalnız onay adımının son düğmesinde (`.danger-solid`, beyaz 6,02:1). Tanımlar styles.css'te ve /consumer o dosyayı yüklemiyor; `.billing-manage-actions` ile aynı sebep, aynı çare: birebir kopya. Bir yüzeyde farklı bir "sil" düğmesi, ikisinden birinin yanlış olması demektir. */ .account-panel { grid-column: 1 / -1; border-color: var(--danger-line); } .account-panel .muted { max-width: 72ch; } .account-legal { margin: 0 0 14px; font-size: var(--text-sm); line-height: var(--leading-sm); } .account-legal a { color: var(--accent-tint-text); } /* 560, işletme panelindeki 440 değil: orada kabı bir parola alanı sınırlıyor, burada iki düğme yan yana duruyor ve "Hesabımı kalıcı olarak sil" 440'ta ikiye kırılıyordu (1280 genişlikte ölçüldü). */ .danger-confirm { display: grid; gap: 12px; max-width: 560px; margin-top: 12px; } .danger-confirm .muted { margin: 0; } button.danger { background: transparent; border-color: var(--danger-line); color: var(--danger-ink); } button.danger:hover { background: var(--danger-wash); border-color: var(--danger-line-strong); } button.danger:active { background: var(--danger-bg); } button.danger-solid { background: var(--danger-solid); border-color: var(--danger-solid); color: var(--danger-solid-ink); } button.danger-solid:hover { background: color-mix(in srgb, var(--danger-solid) 93.8%, #000); border-color: color-mix(in srgb, var(--danger-solid) 82.3%, #000); } button.danger-solid:active { background: color-mix(in srgb, var(--danger-solid) 82.3%, #000); } button.danger:disabled, button.danger-solid:disabled { background: var(--disabled-bg); border-color: var(--disabled-line); color: var(--disabled-ink); } button.danger:disabled { background: transparent; } /* 900 px altında `nav{display:none}` yazıyordu ve o gezinme, sayfanın dışarı açılan **tek** iki bağlantısını taşıyor: /app ve /admin. Hamburger yok, menü düğmesi yok, altbilgi yok, sayfa içinde ikinci bir kopya yok — 390 px'te sabit başlık bir marka işareti ve boşluktan ibaretti, ve /consumer'a yanlışlıkla düşen bir işletme sahibinin kendi portalına dönmek için URL'yi elle düzeltmekten başka yolu yoktu. İki kısa etiket zaten sığıyor; kaldırmak gerekmiyordu. */ @media(max-width:900px){ .consumer-header{height:auto;min-height:76px;flex-wrap:wrap;gap:10px;padding-block:12px} .consumer-header nav{gap:10px;flex-wrap:wrap} /* 24 px WCAG tabanı değil, bu kod tabanının her yerde kullandığı 44 px. Sayı burada elle yazılı ve öyle kalıyor: tests/interaction.mjs:340 bu kuralı METİN olarak okuyor. */ .consumer-header nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px} .hero { grid-template-columns: 1fr; } .consumer-grid { display: block; } .panel { margin-bottom: 16px; } .auth-grid { grid-template-columns: 1fr; } } @media (max-width: 520px) { .consumer-shell { padding: 34px 14px 60px; } .panel { padding: 17px; } .result-head { display: block; } .review-form { grid-template-columns: 1fr; } } /* Kaba işaretçide her denetim dokunma tabanına çıkar — panelin ve vitrinin yaptığının aynısı. */ @media (pointer: coarse) { button, input, select { min-height: var(--control-touch); } .consent input { min-height: 0; } } /* Oturum kartı artık bir ad ve bir çıkış düğmesi taşıyor. Çıkış hiç yoktu: oturumu kapatmanın tek yolu sekmeyi kapatmaktı. */ .session-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .session-card button { min-height: var(--control-touch); padding: var(--control-pad-md); font-size: var(--text-sm); } /* Dil değiştirici. Panelin sözlüğü M15 adım 3'te bağlandı ama sayfada onu çevirecek hiçbir kontrol yoktu: ürünün tek dil düğmesi pazarlama sayfasında duruyor ve oraya yazdığı şey (onaya bağlı localStorage), oturum açıldıktan sonra bu sayfanın okuduğu şey değil. Bu dosyanın genel `button` kuralı dolgulu ve beyaz yazılı; bir şeritteki iki düğmenin ikisi de öyle görünürse hangisinin seçili olduğu anlaşılmaz. Seçili olan zemin alır, seçili olmayan yalnız `--muted` yazı -- ayrım renk adıyla değil, kontrast farkıyla kuruluyor. 44 px, kod tabanının her yerde kullandığı dokunma tabanı: bu düğme, Türkçe okumayan birinin sayfada isabet etmesi gereken ilk şey. */ .lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-control); overflow: hidden; } .lang-switch button { min-width: var(--control-touch); min-height: var(--control-touch); padding: var(--control-pad-md); background: transparent; border: 0; border-radius: 0; color: var(--muted); font-weight: var(--weight-medium); font-size: var(--text-sm); } .lang-switch button:hover { background: var(--hover); color: var(--ink); } /* --ink / %14 aksan+zemin = 14,93:1 koyu, 14,28:1 açık. */ .lang-switch button[aria-pressed="true"] { background: var(--accent-tint-bg); color: var(--ink); }