/* ============================================================================ VITASANCTUS — SITE GENISLETMESI (v5.5) vs-base.css (dondurulmus B tasarimi) UZERINE eklenir. vs-base.css DEGISTIRILMEZ; buradaki kurallar yalnizca EK bilesenleri tanimlar: breadcrumb, icerik sayfasi tipografisi, tablo, form, yasal sayfa, dil secici. Renk, tipografi ve bosluk degerleri vs-base.css'teki token'lardan alinir. Yeni renk TANIMLANMAZ. ============================================================================ */ /* --- dil secici (header) --- OLCULEN KUSUR: header'a eklenen dil secici .hdr__cta'yi viewport disina itiyordu (360px -> scrollWidth 467 · 1024px -> 1096). vs-base.css'te bu sinif icin olculmus bir .cta-short/.cta-full cozumu zaten vardi; dil secici onu yeniden bozuyordu. COZUM: genis masaustunde header'da, daha dar her yerde MOBIL MENUDE. --- */ .lang{display:flex;align-items:center;gap:2px;margin-left:8px;flex:0 0 auto} .lang a{display:inline-block;padding:5px 7px;border-radius:6px;font:600 12px/1 var(--f-b); color:var(--muted);text-decoration:none;letter-spacing:.04em} .lang a[aria-current="true"]{background:var(--blue-wash);color:var(--blue-deep)} .lang a:hover{color:var(--blue-deep)} .lang a:focus-visible{outline:2px solid var(--blue);outline-offset:2px} @media (max-width:1100px){.lang{display:none}} /* --- breadcrumb --- */ .crumb{background:var(--mist);border-bottom:1px solid var(--line-soft)} .crumb ol{display:flex;flex-wrap:wrap;gap:6px;align-items:center; list-style:none;margin:0;padding:12px 0;font-size:13px} .crumb li{display:flex;align-items:center;gap:6px;color:var(--muted)} .crumb li+li::before{content:"/";color:var(--line);font-size:12px} .crumb a{color:var(--muted);text-decoration:none} .crumb a:hover{color:var(--blue-deep);text-decoration:underline} .crumb [aria-current="page"]{color:var(--ink);font-weight:600} /* --- sayfa basligi (hero disi sayfalar) --- */ .phead{background:var(--bone);border-bottom:1px solid var(--line-soft)} .phead__in{padding:clamp(34px,5vw,62px) 0 clamp(28px,4vw,46px);max-width:72ch} .phead h1{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;margin:10px 0 16px} .phead .lead{font-size:clamp(15.5px,1.25vw,18px);color:var(--body);max-width:62ch} /* --- icerik tipografisi --- */ .prose{max-width:68ch} .prose h2{font-size:clamp(21px,2.1vw,28px);letter-spacing:-.02em;margin:34px 0 12px} .prose h3{font-size:clamp(16.5px,1.5vw,19px);margin:24px 0 8px;color:var(--ink)} .prose p{margin:0 0 14px;color:var(--body)} .prose ul,.prose ol{margin:0 0 16px;padding-left:20px;color:var(--body)} .prose li{margin:0 0 7px} .prose a{color:var(--blue-deep)} .prose strong{color:var(--ink)} /* --- durum rozeti: iddia seviyesini GORUNUR kilar --- */ .tag{display:inline-block;padding:2px 8px;border-radius:999px; font:600 11px/1.5 var(--f-b);letter-spacing:.03em;white-space:nowrap; border:1px solid transparent;vertical-align:middle} .tag--active{background:#E6F2EA;color:#1C5B36;border-color:#C6E2D1} .tag--cap{background:var(--blue-wash);color:var(--blue-deep);border-color:#CFE0EF} .tag--plan{background:#FDF3E3;color:#7A5212;border-color:#F0DFBE} .tag--legal{background:#FBE9E9;color:#8C2B2B;border-color:#F0CFCF} /* --- bilgi kutusu --- */ .note{border:1px solid var(--line);border-left:3px solid var(--blue); background:var(--paper);border-radius:0 10px 10px 0; padding:16px 18px;margin:18px 0} .note p{margin:0 0 8px;color:var(--body);font-size:14.5px} .note p:last-child{margin:0} .note--warn{border-left-color:#C47F17;background:#FFFBF4} /* --- tablo --- */ .tbl-wrap{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:10px} .tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px} .tbl th,.tbl td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft); vertical-align:top} .tbl th{background:var(--mist);font:600 13px/1.4 var(--f-b);color:var(--ink); letter-spacing:.02em} .tbl tr:last-child td{border-bottom:0} /* --- form --- */ .form{display:grid;gap:16px;max-width:640px} .form__row{display:grid;gap:6px} .form__row--2{grid-template-columns:1fr 1fr;gap:16px} @media (max-width:560px){.form__row--2{grid-template-columns:1fr}} .form label{font:600 13.5px/1.4 var(--f-b);color:var(--ink)} .form .req{color:#8C2B2B} .form input,.form select,.form textarea{ width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:8px; font:400 15px/1.5 var(--f-b);color:var(--ink);background:var(--paper)} .form textarea{min-height:128px;resize:vertical} .form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{ outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)} .form__hint{font-size:12.5px;color:var(--muted)} .form__consent{display:flex;gap:10px;align-items:flex-start} .form__consent input{width:auto;margin-top:3px;flex:0 0 auto} .form__consent label{font-weight:400;font-size:13.5px;color:var(--body)} /* --- iletisim kartlari --- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px); align-items:start} @media (max-width:900px){.contact-grid{grid-template-columns:1fr}} .contact-list{display:grid;gap:14px;margin:0;padding:0;list-style:none} .contact-list div{font-size:15px;color:var(--body)} .contact-list b{display:block;font:600 13px/1.5 var(--f-b);color:var(--muted); letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px} /* --- icerik kart izgarasi (genel amacli) --- */ .gcards{display:grid;gap:clamp(16px,1.8vw,22px); grid-template-columns:repeat(auto-fit,minmax(248px,1fr))} .gcard{border:1px solid var(--line);border-radius:var(--r);background:var(--paper); padding:clamp(20px,2.2vw,28px)} .gcard h3{font-size:17px;margin:0 0 8px;color:var(--ink)} .gcard p{margin:0;font-size:14.5px;color:var(--body)} .gcard__top{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap} /* --- adim listesi --- KALDIRILDI: vs-base.css zaten .steps/.step bilesenini tanimliyor (4 sutunlu izgara). Burada yeniden tanimlamak cakisma uretiyordu; olculen kusur: adim metinleri dar sutunlara sikisiyordu. --- */ /* --- sayfa ici gezinme --- */ .toc{border:1px solid var(--line);border-radius:10px;background:var(--paper); padding:16px 18px;margin:0 0 26px} .toc p{margin:0 0 8px;font:600 12px/1.4 var(--f-b);letter-spacing:.06em; text-transform:uppercase;color:var(--muted)} .toc ul{margin:0;padding-left:18px} .toc li{margin:0 0 5px;font-size:14.5px} /* --- iki sutun icerik --- */ .twocol{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(28px,4vw,64px);align-items:start} @media (max-width:900px){.twocol{grid-template-columns:1fr}} .aside{border:1px solid var(--line);border-radius:var(--r);background:var(--mist); padding:clamp(20px,2.2vw,26px)} .aside h3{font-size:15.5px;margin:0 0 10px;color:var(--ink)} .aside ul{margin:0;padding-left:18px;font-size:14px;color:var(--body)} .aside li{margin:0 0 6px} /* --- gorsel bileseni --- */ .fig{margin:0 0 20px;position:relative;border-radius:var(--r);overflow:hidden; background:var(--mist)} .fig img{display:block;width:100%;height:100%;object-fit:cover} .fig--3x2{aspect-ratio:3/2} .fig--16x9{aspect-ratio:16/9} @media (max-width:900px){.fig--3x2{aspect-ratio:2/1}} @media (max-width:640px){.fig--3x2{aspect-ratio:16/9}} .fig__cred{position:absolute;right:8px;bottom:8px;background:rgba(255,255,255,.92); border-radius:5px;padding:3px 7px;font:500 10.5px/1.3 var(--f-b); color:#3C5265;letter-spacing:.01em} .fig__cap{font-size:13px;color:var(--muted);margin:8px 0 0} /* --- atlama baglantisi --- DUZELTME: `left:-9999px` yatay tarama alanini genisletiyordu (olculdu: 360px'te scrollWidth 467). Transform ile gizlenir. --- */ .skiplink{position:absolute;left:0;top:0;z-index:100; transform:translateY(-200%); background:var(--blue);color:#fff;padding:10px 16px;border-radius:0 0 8px 0; font:600 14px/1 var(--f-b);text-decoration:none} .skiplink:focus{transform:translateY(0)} /* --- baski --- */ @media print{.crumb,.lang{display:none}} /* --- CTA bandi tasma duzeltmesi --- OLCULEN KUSUR (dondurulmus tasarimdan DEVRALINDI, bu katmanin hatasi degil): 901-1000px araliginda .cta-band iki sutun kaliyor ve birincil buton viewport'u ~7px asiyordu. Kanit: v5.4 HOMEPAGE_OPTION_B.html -> 940:985, 960:986, 980:987 scrollWidth. Tek sutuna gecis esigi 1000px'e cikarilir. Kompozisyon ve karakter degismez. */ @media (max-width:1000px){.cta-band{grid-template-columns:1fr}} /* --- Header daralma esigi duzeltmesi --- OLCULEN KUSUR (dondurulmus tasarimdan DEVRALINDI): vs-base.css masaustu menusunu <=900px'te gizliyor. Ancak 901-1000px araliginda marka + 5 menu ogesi + birincil CTA `.wrap` icine sigmiyor; header CTA viewport'u ~7px asiyordu. Kanit: v5.4 HOMEPAGE_OPTION_B.html -> 940:985, 960:986, 980:987 scrollWidth (tasan oge: header .btn--p, metni "Proje Degerlendirmesi"). Cozum: menu/burger gecisi 1000px'e cikarilir. Mobil menu zaten tum baglantilari ve dil secimini icerir. Kompozisyon ve karakter degismez. */ @media (max-width:1000px){ .nav{display:none} .burger{display:flex} .hdr__cta{margin-left:auto} } /* --- aktif dil gostergesi --- Islevsiz href="#" uretmemek icin aktif dil olarak render edilir. */ .lang__cur{display:inline-block;padding:5px 7px;border-radius:6px; font:600 12px/1 var(--f-b);letter-spacing:.04em; background:var(--blue-wash);color:var(--blue-deep)} /* --- form durum ve hata mesajlari (v5.6) --- */ .form__err{margin:4px 0 0;font:500 13px/1.45 var(--f-b);color:#8C2B2B} .form input[aria-invalid="true"],.form select[aria-invalid="true"], .form textarea[aria-invalid="true"]{border-color:#B4453F;background:#FFF8F8} .form__status{margin:10px 0 0;padding:11px 14px;border-radius:8px; font:500 14px/1.5 var(--f-b);border:1px solid var(--line); background:var(--mist);color:var(--body)} .form__status--ok{background:#E6F2EA;border-color:#C6E2D1;color:#1C5B36} .form__status--err{background:#FBE9E9;border-color:#F0CFCF;color:#8C2B2B} .form__status--warn{background:#FFFBF4;border-color:#F0DFBE;color:#7A5212} .form__status a{color:inherit;font-weight:600} /* --- devre disi form: durum gorsel olarak da belirgin olmali --- */ .form input:disabled,.form select:disabled,.form textarea:disabled{ background:var(--mist);color:var(--muted);cursor:not-allowed;border-color:var(--line-soft)} .form button:disabled{opacity:.55;cursor:not-allowed} /* --- yalnizca ekran okuyucu icin baslik --- Tasarimda gorunur h2 bulunmayan bolumlerde baslik hiyerarsisinin h1 -> h3 atlamasini onler (WCAG 1.3.1 / 2.4.6). Gorunum DEGISMEZ. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* --- WCAG 2.2 SC 1.4.10 Reflow: 320 px --- OLCULEN KUSUR (bagimsiz denetim bulgusu, dogrulandi): 320 px'te header CTA viewport'u asiyordu -> scrollWidth 360 (TR) / 338 (EN). Taban katmanda `.cta-short` icin ALT SINIR yoktu; 640 px altinda kisa metne geciyor ama 320 px'te o da sigmiyor. Icerik kaybi YOK: mobil menunun ILK ogesi zaten "Proje Degerlendirmesi Isteyin" / "Request a Project Assessment". Erisilebilir ad `aria-label` ile korunur. */ @media (max-width:359px){ .hdr__cta{display:none} } /* Kaydirilabilir tablo bolgesi klavyeyle odaklanir (WCAG 2.1.1); odak GORUNUR olmali (WCAG 2.4.7). */ .tbl-wrap:focus-visible{outline:3px solid var(--blue);outline-offset:2px} .tbl-wrap:focus:not(:focus-visible){outline:none} /* ===== v5.7 / CSP: satir ici stil yerine yardimci siniflar ===== Gorsel sonuc v5.6 ile BIREBIR ayni; yalnizca stilin yeri degisti. Oncesi: style="margin-top:10px" / "margin-top:28px" / "font-size:13px" */ .mt-10{margin-top:10px} .mt-28{margin-top:28px} .fs-13{font-size:13px} /* Satir ici stil EN YUKSEK oncelige sahipti. Sinifa tasindiginda ozgulluk yarisini kaybediyor; asagidaki iki kural OLCULEN regresyonu kapatir: .gcard p{margin:0} (0,2,0) -> .mt-10 (0,1,0) eziliyordu .ft p{font-size:14px} (0,1,1) -> .fs-13 (0,1,0) eziliyordu Hedef: v5.6'daki satir ici degerlerle BIREBIR ayni hesaplanan stil. */ .gcard p.mt-10{margin-top:10px} .ft p.fs-13{font-size:13px} /* Hero kadraj bantlari — v5.4'te 9 genislikte OLCULDU. Tek bir yuzde responsive olarak guvenli DEGIL: kutu orani breakpoint'e gore duzensiz degisir (pencere 1024: %42,4 · 1200: %52,8 · 1440: %51,1). Olculen figur sinirlari: 3. kisi yuzu x %27–34,5 / kadin yuzu x %39–47 / kadin eli x %46–51. Secilen degerlerde sol kenar hep temiz bolgede. v5.6'da satir ici