.
Çakışmayı önlemek için aşağıdaki kurallar `[data-arac]`
özniteliğiyle KAPSANMIŞTIR — kart kuralları olduğu gibi
yürürlükte kalır, kök kap yalnız kendi kurallarını alır.
Bu kapsamı KALDIRMA: kaldırılırsa hub'daki araç kartları
kart görünümünü kaybeder.
========================================================== */
/* 20.1 Araç kök kabı */
.arac[data-arac]{
display:block;position:relative;
background:var(--zemin-2);border:1px solid var(--cizgi);
border-radius:var(--kose-l);padding:clamp(1.1rem,.8rem + 1vw,1.8rem);
box-shadow:var(--golge-2);overflow:hidden;
margin-block:1.6rem;color:var(--metin);text-decoration:none;
}
/* Kart kuralındaki hover zıplaması kök kapta anlamsızdır. */
.arac[data-arac]:hover{
transform:none;box-shadow:var(--golge-2);border-color:var(--cizgi);
}
.arac[data-arac]::before{
content:"";position:absolute;inset:0 0 auto;height:5px;
background:linear-gradient(90deg,var(--vurgu),color-mix(in srgb,var(--vurgu) 30%,var(--zemin-2)));
}
/* 20.2 Eğlence şeridi — sözleşme 3.6, KALDIRILAMAZ.
Şablon bunu tools.tip='eglence' iken kendisi basar ve araç
arayüzünden ÖNCE gelir. display:none VERİLMEZ: basılmamış bir
uyarıyla aynı sonucu doğurur (23B.2'deki tıbbi uyarı kuralı). */
.arac__eglence-serit{
display:flex;gap:.6rem;align-items:flex-start;
background:color-mix(in srgb,#C2483B 10%,var(--zemin-2));
border:1px solid color-mix(in srgb,#C2483B 40%,var(--cizgi));
border-left:5px solid #C2483B;
border-radius:var(--kose-s);padding:.85rem 1rem;margin-block:1.2rem;
font-size:var(--fs-kk);line-height:1.55;color:var(--metin);
}
.arac__eglence-serit b{color:#A63A2E;font-weight:800}
/* 20.3 "Verileriniz cihazınızda saklanır" rozeti (yerel_veri=1) */
.arac__yerel-rozet{
display:inline-flex;align-items:center;gap:.45rem;
margin-top:1rem;padding:.4rem .8rem;border-radius:99px;
background:var(--vurgu-yumusak);
border:1px dashed color-mix(in srgb,var(--vurgu) 45%,transparent);
font-family:var(--f-mono);font-size:var(--fs-mini);
letter-spacing:.05em;color:var(--vurgu-metin);
}
.arac__yerel-rozet svg{width:14px;height:14px}
/* 20.4 Form */
.arac__form{display:grid;gap:1.05rem;margin-top:1.1rem}
@media (min-width:640px){
.arac__form--iki{grid-template-columns:1fr 1fr}
.arac__form--iki .arac__form-alt{grid-column:1 / -1}
}
.arac__form-alt{
display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;
border-top:1px solid var(--cizgi);padding-top:1rem;
}
.arac__alan{display:grid;gap:.4rem;min-width:0}
.arac__alan-etiket{
font-family:var(--f-govde);font-weight:800;
font-size:var(--fs-kk);color:var(--metin);
}
.arac__alan-girdi{
width:100%;font:inherit;font-size:1rem;color:var(--metin);
background:var(--zemin);border:1.5px solid var(--cizgi);
border-radius:12px;padding:.68rem .85rem;
transition:border-color var(--gecis),box-shadow var(--gecis);
}
.arac__alan-girdi::placeholder{color:var(--metin-2);opacity:.85}
.arac__alan-girdi:focus{
outline:0;border-color:var(--vurgu);
box-shadow:0 0 0 4px color-mix(in srgb,var(--vurgu) 18%,transparent);
}
.arac__alan-girdi--hatali{border-color:#C2483B}
.arac__alan-girdi--hatali:focus{
box-shadow:0 0 0 4px color-mix(in srgb,#C2483B 20%,transparent);
}
.arac__alan-ipucu{margin:0;font-size:var(--fs-mini);line-height:1.5;color:var(--metin-2)}
.arac__alan-hata{margin:0;font-size:var(--fs-kk);font-weight:700;line-height:1.5;color:#C2483B}
/* Onay kutusu: kutu solda, etiket sağda. */
.arac__alan--onay{
grid-template-columns:1.15rem 1fr;align-items:start;gap:.3rem .6rem;
}
.arac__alan--onay .arac__alan-etiket{font-weight:600;cursor:pointer}
.arac__alan--onay .arac__alan-ipucu,
.arac__alan--onay .arac__alan-hata{grid-column:2}
.arac__alan-kutu{
width:1.05rem;height:1.05rem;margin:.28rem 0 0;
accent-color:var(--vurgu-metin);cursor:pointer;
}
/* .dugme ailesinin üzerine yalnız hizalama ekler. */
.arac__dugme{flex:0 0 auto}
@media (max-width:520px){
.arac__dugme{width:100%}
}
/* 20.5 Sonuç kutusu */
.arac__sonuc{
margin-top:1.4rem;display:grid;gap:.85rem;
background:var(--vurgu-yumusak);
border:1px solid color-mix(in srgb,var(--vurgu) 45%,transparent);
border-radius:var(--kose);padding:1.15rem;
}
/* JS henüz sonuç yazmadıysa kutu hiç görünmez; boş bir renkli
dikdörtgen "araç bozuk" izlenimi verirdi. */
.arac__sonuc:empty{display:none}
.arac__sonuc--hatali{
background:color-mix(in srgb,#C2483B 8%,var(--zemin-2));
border-color:color-mix(in srgb,#C2483B 38%,var(--cizgi));
}
.arac__hata{margin:0;font-size:var(--fs-kk);font-weight:700;line-height:1.55;color:#A63A2E}
.arac__sonuc-buyuk{
font-family:var(--f-baslik);font-weight:700;line-height:1.08;
font-size:clamp(1.6rem,1.25rem + 1.5vw,2.3rem);
font-variation-settings:"opsz" 90,"SOFT" 50,"WONK" 1;
color:var(--metin);margin:0;
}
.arac__sonuc-alt{margin:0;font-size:var(--fs-kk);color:var(--metin-2)}
.arac__sonuc-baslik{font-size:var(--fs-h3);margin:.2rem 0 0}
.arac__sonuc-metin{margin:0;font-size:var(--fs-kk);line-height:1.6;color:var(--metin)}
.arac__sonuc-not{margin:0;font-size:var(--fs-mini);line-height:1.55;color:var(--metin-2)}
.arac__sonuc-uyari{margin:0;font-size:var(--fs-kk);line-height:1.55;font-weight:700;color:#A63A2E}
.arac__sonuc-liste{
margin:0;padding-left:1.15rem;font-size:var(--fs-kk);
color:var(--metin);display:grid;gap:.3rem;
}
.arac__sonuc-satirlar{background:var(--zemin-2);border-radius:var(--kose-s);padding:.2rem .9rem}
.arac__sonuc-satir{
display:flex;justify-content:space-between;gap:1rem;
padding:.58rem 0;border-bottom:1px dashed var(--cizgi);font-size:var(--fs-kk);
}
.arac__sonuc-satir:last-child{border-bottom:0}
.arac__sonuc-satir b{font-family:var(--f-mono);font-weight:600;color:var(--metin)}
/* 20.6 "Nasıl hesaplanır?" — yöntem ve formül bloğu */
.arac__yontem{
margin-block:1.6rem;background:var(--zemin-2);
border:1px solid var(--cizgi);border-radius:var(--kose);
padding:clamp(1rem,.8rem + .7vw,1.5rem);
}
.arac__yontem > h2,.arac__yontem > h3{margin-top:0}
.arac__yontem p,.arac__yontem li{font-size:var(--fs-kk);color:var(--metin-2);line-height:1.65}
.arac__yontem ul,.arac__yontem ol{margin:.6rem 0;padding-left:1.15rem;display:grid;gap:.3rem}
.arac__yontem code,.arac__formul{
font-family:var(--f-mono);font-size:.86rem;
background:var(--zemin-3);border-radius:6px;padding:.12rem .38rem;color:var(--metin);
}
.arac__formul{
display:block;padding:.75rem .9rem;margin-block:.8rem;
border-left:3px solid var(--vurgu);border-radius:0 var(--kose-s) var(--kose-s) 0;
overflow-x:auto;white-space:pre-wrap;
}
/* Veri sürümü / kaynak damgası — WHO ve aşı takvimi gibi araçlarda
sözleşme gereği GÖRÜNÜR basılır (3.7 ve 3.8). Gizleme. */
.arac__veri-damgasi{
margin-top:.9rem;font-family:var(--f-mono);
font-size:var(--fs-mini);letter-spacing:.05em;color:var(--metin-2);
}
/* Doğrulanmamış referans/liste uyarısı (LopediArac.dogrulamaUyarisi).
Damgadan AYRI ve daha görünür: damga bir künyedir, bu bir uyarıdır.
display:none VERİLMEZ — doğrulanmamış bir tıbbi listeyi damgasız
göstermek, okuyucunun onu doğrulanmış sanmasına yol açar. */
.arac__veri-uyarisi{
/* Renk BURADA tanımlanır: --uyari-renk 18a bölümünde .tibbi-uyari
kapsamına yazılmıştır ve buraya cascade ETMEZ. Aynı değeri kullanıyoruz
ki iki uyarı görsel olarak akraba dursun. */
--arac-uyari-renk:#C2483B;
margin-top:.7rem;padding:.7rem .9rem;
border-left:3px solid var(--arac-uyari-renk);
background:rgba(194,72,59,.07);
font-size:var(--fs-kk);line-height:1.6;color:var(--metin);
}
/* color-mix desteklenmeyen tarayıcıda düz zemin: --uyari-yumusak yoksa
ikinci değer devreye girer, kural her koşulda görünür kalır. */
/* 20.7 Araç hub kartları (/hesaplama) */
.arac-hub{margin-block:1.8rem}
.arac-hub__giris{
max-width:var(--en-dar);font-size:var(--fs-kk);
color:var(--metin-2);line-height:1.7;margin-bottom:1.2rem;
}
.arac-hub__izgara{
display:grid;gap:var(--aralik);
grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
.arac-hub__kart{
display:grid;gap:.5rem;align-content:start;
background:var(--zemin-2);border:1px solid var(--cizgi);
border-radius:var(--kose-l);padding:1.15rem;
text-decoration:none;color:var(--metin);
transition:transform var(--gecis),box-shadow var(--gecis),border-color var(--gecis);
}
.arac-hub__kart:hover{
transform:translateY(-4px);box-shadow:var(--golge-2);
border-color:var(--vurgu);color:var(--metin);
}
.arac-hub__kart-ust{
display:flex;align-items:center;justify-content:space-between;gap:.6rem;
font-family:var(--f-mono);font-size:var(--fs-mini);
letter-spacing:.12em;text-transform:uppercase;color:var(--vurgu-metin);font-weight:600;
}
.arac-hub__kart-ad{
font-family:var(--f-baslik);font-weight:700;font-size:1.1rem;line-height:1.25;
font-variation-settings:"opsz" 40,"SOFT" 45,"WONK" 0;
}
.arac-hub__kart-aciklama{font-size:var(--fs-kk);color:var(--metin-2);line-height:1.6}
/* Eğlence araçları listede de ayırt edilir (sözleşme 3.6 ruhu). */
.arac-hub__kart--eglence .arac-hub__kart-ust{color:#A63A2E}
/* Izgara
'dur: kartlar anlamsal bir listedir ve ekran okuyucu "N öğe"
diyebilmelidir. Madde imi ve varsayılan dolgu burada söner; - kendisi
grid öğesi olduğu için kartın kutuyu tam doldurması ona bağlıdır. */
.arac-hub__izgara{list-style:none;padding:0;margin:0}
.arac-hub__izgara>li{display:grid}
.arac-hub__kart-tip{white-space:nowrap}
/* Eğlence etiketi tip rozetinden AYRI bir düğümdür ve öyle kalmalıdır:
"Eğlence" tipini okumayan biri bile bu çerçeveli etiketi görür. Rengi
soluklaştırma ya da yalnız tip rozetiyle birleştirme — hub'da gezinen
okuyucu, aracı tıklamadan önce bilimsel olmadığını bilmelidir. */
.arac-hub__kart-eglence{
flex:none;padding:.14rem .5rem;border:1px solid currentColor;
border-radius:999px;font-size:var(--fs-mini);letter-spacing:.06em;
text-transform:none;font-weight:600;
}
/* 20.8 Sıralanabilir tablo başlığı (sözleşme 3.9)
Düğme,
| 'nin kendi dolgusunu NEGATİF marjla dengeler; böylece
11. bölümdeki `.tablo th` kuralına dokunmadan tüm hücre tıklanabilir
olur. `.tablo th` dolgusu değişirse burayı da güncelle. */
.tablo__sirala{
display:inline-flex;align-items:center;justify-content:space-between;gap:.4rem;
width:calc(100% + 1.8rem);margin:-.7rem -.9rem;padding:.7rem .9rem;
background:none;border:0;border-radius:0;
font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
text-align:left;cursor:pointer;
}
.tablo__sirala:hover{color:var(--vurgu-metin)}
.tablo__sirala-metin{display:inline-block}
.tablo__sirala-im{
flex:0 0 auto;width:0;height:0;
border-left:4px solid transparent;border-right:4px solid transparent;
border-bottom:5px solid currentColor;opacity:.3;
transition:transform var(--gecis),opacity var(--gecis);
}
.tablo th[aria-sort="ascending"] .tablo__sirala-im{opacity:1}
.tablo th[aria-sort="descending"] .tablo__sirala-im{opacity:1;transform:rotate(180deg)}
.tablo th[aria-sort="ascending"],
.tablo th[aria-sort="descending"]{color:var(--vurgu-metin)}
/* JS yoksa düğme hiçbir şey yapmaz: imleç ve ok sinyali verilmez
(onyukleme.js üzerine "js" sınıfını koyar). */
html:not(.js) .tablo__sirala{cursor:default}
html:not(.js) .tablo__sirala-im{display:none}
/* 20.9 Koyu zeminli "isimler" teması — kırmızı/uyarı tonları okunur
kalmalı (18a ve 19. bölümde yapılanın aynısı). */
body[data-tema="isimler"] .arac__alan-hata,
body[data-tema="isimler"] .arac__hata,
body[data-tema="isimler"] .arac__sonuc-uyari,
body[data-tema="isimler"] .arac__eglence-serit b{color:#F1A096}
body[data-tema="isimler"] .arac__alan-girdi--hatali{border-color:#F1A096}
/* 20.10 Dar ekran */
@media (max-width:520px){
.arac[data-arac]{padding:1rem;border-radius:var(--kose)}
.arac__form-alt{align-items:stretch}
.arac__sonuc{padding:.95rem}
.arac__sonuc-satir{flex-direction:column;gap:.15rem}
.arac__sonuc-satir b{align-self:flex-start}
.arac-hub__izgara{grid-template-columns:1fr}
}
/* 20.11 Hareket tercihi — 16. bölümdeki genel kural geçişleri zaten
kısar; burada yalnız zıplama kaldırılır ve sıralama oku yönünü
korur (geçiş kapanınca transform'un kendisi silinmemeli). */
@media (prefers-reduced-motion:reduce){
.arac-hub__kart:hover{transform:none}
.tablo th[aria-sort="descending"] .tablo__sirala-im{transform:rotate(180deg)}
}
/* 20.12 Baskı: form ve düğmeler kâğıtta anlamsızdır, sonuç kalır. */
@media print{
.arac__form,.arac__dugme,.tablo__sirala-im{display:none!important}
.arac[data-arac],.arac__sonuc{box-shadow:none;border-color:#999}
}
/* 20.13 KONTROL LİSTESİ (dogum-cantasi-listesi.js)
Liste .arac__form'un DIŞINA, doğrudan kök kaba basılır. Gerekçe: 20.12
formu baskıda gizler; liste form içinde olsaydı kâğıda hiç inmezdi.
Düğmeler bilinçli olarak form içinde kalır ve kâğıda inmez. */
.canta{display:grid;gap:1.4rem;margin-top:1.4rem}
.canta__ilerleme{display:grid;gap:.45rem}
.canta__ilerleme-metin{
margin:0;font-family:var(--f-mono);
font-size:var(--fs-mini);letter-spacing:.05em;color:var(--metin-2);
}
/* |