'ye max-width dayatilmaz. Diger `.ft-page` sayfalari 48rem'de kalir.
`:not(.woocommerce-order-received)`: tesekkur sayfasi tek kolonlu bir metin
sayfasi, orada 48rem okuma olcusu DOGRU (govde sinifi canlida dogrulandi). */
body.woocommerce-cart .ft-page,
body.woocommerce-checkout:not(.woocommerce-order-received) .ft-page {
max-width: 72rem;
}
/* --- (2) Baglantilar: tarayici varsayilani #0000EE mavi / #551A8B mor ---
Bu sayfalardaki urun adi ve sartlar baglantilarina eslesen TEK renk kurali
UA'nin `a:-webkit-any-link { color: -webkit-link }` kurali (CDP
getMatchedStylesForNode ile dogrulandi; yazar tarafinda hicbir renk kurali
yok). Monokrom kimlikte sayfanin tek rengi olmasi kabul edilemez.
`:visited` AYRI yazilmali, yoksa ziyaret sonrasi mor geri gelir —
tarayici `getComputedStyle` ile :visited rengini gizlilik geregi sizdirmadigi
icin bu tek olcemedigim degerdir, kural savunma amaclidir. */
body.woocommerce-cart .ft-page a:not(.button):not(.wp-block-button__link):not(.wc-block-components-button),
body.woocommerce-cart .ft-page a:not(.button):not(.wp-block-button__link):not(.wc-block-components-button):visited,
body.woocommerce-checkout .ft-page a:not(.button):not(.wp-block-button__link):not(.wc-block-components-button),
body.woocommerce-checkout .ft-page a:not(.button):not(.wp-block-button__link):not(.wc-block-components-button):visited,
body.woocommerce-account .ft-page a:not(.button):not(.wp-block-button__link):not(.wc-block-components-button),
body.woocommerce-account .ft-page a:not(.button):not(.wp-block-button__link):not(.wc-block-components-button):visited {
color: var(--fg);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/* Sepetteki urun adi bir BASLIK gibi okunmali; alt cizgi yalniz hover'da.
Özgüllük (0,2,1) — yukarıdaki :not() zincirini (0,5,1) geçemez, bu yüzden
ayni :not() zinciri burada da tekrarlanir. */
body.woocommerce-cart .ft-page a.wc-block-components-product-name:not(.button),
body.woocommerce-cart .ft-page a.wc-block-components-product-name:not(.button):visited {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.35;
text-decoration: none;
}
@media (hover: hover) {
body.woocommerce-cart .ft-page a.wc-block-components-product-name:hover {
text-decoration: underline;
text-underline-offset: 0.2em;
}
}
/* --- (3) Blok butonlari: WordPress cekirdeginin #32373C varsayilani ---
Ezilen kural `:root :where(.wp-element-button, .wp-block-button__link)` —
`:where()` 0 katki yapar, kural fiilen (0,1,0). Ayrica wc-blocks'un
`body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link)`
kurali `min-height: 3em` (= 39px) veriyor -> 44px dokunma hedefinin altinda.
Asagidaki secici (0,3,0)/(0,3,1) ikisini de gecer.
Hareket: YALNIZ transform + opacity (kural geregi); Woo'nun
`transition: box-shadow .1s linear` gecisi de boylece degistirilir. */
body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-checkout .wc-block-checkout__actions button.wc-block-components-checkout-place-order-button {
min-height: 44px;
background-color: var(--fill-accent);
color: var(--on-fill-accent);
border-radius: var(--radius);
font-family: var(--font-display);
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.01em;
transition: opacity var(--dur-press) var(--ease-out),
transform var(--dur-press) var(--ease-out);
}
body.woocommerce-cart .wc-block-cart__submit-button:active,
body.woocommerce-checkout .wc-block-checkout__actions button.wc-block-components-checkout-place-order-button:active {
transform: scale(0.97);
}
@media (hover: hover) {
body.woocommerce-cart .wc-block-cart__submit-button:hover,
body.woocommerce-checkout .wc-block-checkout__actions button.wc-block-components-checkout-place-order-button:hover {
opacity: 0.88;
}
}
@media (prefers-reduced-motion: reduce) {
body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-checkout .wc-block-checkout__actions button.wc-block-components-checkout-place-order-button {
transition: none;
}
body.woocommerce-cart .wc-block-cart__submit-button:active,
body.woocommerce-checkout .wc-block-checkout__actions button.wc-block-components-checkout-place-order-button:active {
transform: none;
}
}
/* Sitenin EN KRITIK butonunun odak halkasi SEFFAF idi
(`outline: rgba(0,0,0,0) solid 3px` — wc-blocks) -> WCAG 2.4.7 ihlali.
Ayni sayfadaki metin girisleriyle ayni dil: 2px is siyahi + 2px offset. */
body.woocommerce-cart .wc-block-cart__submit-button:focus-visible,
body.woocommerce-checkout .wc-block-checkout__actions button.wc-block-components-checkout-place-order-button:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
/* --- (4) Etiket/deger dili: kimligin yerlesik deseni ---
ETIKETLER mono 12px uppercase ls .06em muted · DEGERLER Mulish ink.
Sepet ve checkout'ta hicbir satirda uygulanmamisti (hepsi Mulish 13px 400/500,
etiket ile deger arasinda tipografik ayrim YOK). */
body.woocommerce-cart .wc-block-cart-items__header th,
body.woocommerce-cart .wc-block-cart__totals-title,
body.woocommerce-cart .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__label,
body.woocommerce-cart .wc-block-components-totals-footer-item-tax,
body.woocommerce-checkout .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-footer-item-tax {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-muted);
}
body.woocommerce-cart .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-components-totals-item__value {
font-family: var(--font-body);
font-variant-numeric: tabular-nums;
color: var(--fg);
}
/* `:not(.wc-block-components-totals-footer-item)` SART: genel toplam satiri da
`.wc-block-components-totals-item` sinifini tasiyor — disari alinmasaydi
"Estimated total" 20px'ten 12px mono'ya duserdi (canlida dogrulandi).
Genel toplam sayfadaki tek vurgulu satir: baslik sesi (Jost). */
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-family: var(--font-display);
font-weight: 400;
color: var(--fg);
}
/* "Order summary" bir `` — h1..h4 font kuralina
yakalanmiyor, ayrica `.ft-page p` (0,1,1) onu muted griye boyuyordu.
(0,3,0) yazildi, (0,2,0) DEGIL: (0,2,0) ile font-family gecti ama font-weight
500'de kaldi — wc-blocks tarafinda esit ozgullukte, sonra gelen bir kural
var (canlida olculdu). */
body.woocommerce-checkout .ft-page .wc-block-components-checkout-order-summary__title-text {
font-family: var(--font-display);
font-weight: 400;
color: var(--fg);
}
/* Bolum basliklarinin punto olcegi: wc-blocks
`.wc-block-components-title.wc-block-components-title` (0,2,0) temanin
`.ft-page h2` clamp'ini (0,1,1) eziyordu -> 1440'ta 28px yerine 20px.
H1 (40px) ile arasindaki basamak cok sertti. (0,3,1) ile geri alinir. */
body.woocommerce-checkout .ft-page h2.wc-block-components-title {
font-size: clamp(1.35rem, 2.5vw, 1.75rem);
font-weight: 400;
}
/* --- (5) Urun ozet meta'si ---
Ata `.wc-block-cart-item__wrap` flex + align-items:flex-start oldugu icin
meta bloku shrink-to-fit'te 99,4px'e sikisiyor ve "2.42 m per length" gibi
17 karakterlik degerler iki satira boluniyordu (1440'ta bile). Cocuga
dogrudan `align-self` yazmak atanin align-items'inin cozdugu `auto` degerini
HER ZAMAN yener (ozgulluk yarisi degil, kaskad duzeyi kurali).
⚠️ CSS ILE COZULEMEYEN kalan kisim: DOM'da `
Colour
Baroque Oak 1730
`
— etiket,
oncesindeki CIPLAK METIN DUGUMU. CSS metin dugumu secemez,
dolayisiyla "ETIKET mono / DEGER Mulish" deseni buraya salt CSS ile
uygulanamaz; burada yalniz okunabilirlik (kontrast + 13px + satir araligi)
kurtarilir. Gercek desen icin urunlerin kisa aciklamasi / ile
yeniden yazilmali (icerik isi, 27 urun). */
body.woocommerce-cart .wc-block-components-product-metadata {
align-self: stretch;
width: 100%;
}
body.woocommerce-cart .wc-block-components-product-metadata .wc-block-components-product-metadata__description > p,
body.woocommerce-checkout .wc-block-components-product-metadata .wc-block-components-product-metadata__description > p {
font-family: var(--font-body);
font-size: 0.8125rem; /* 11,375px -> 13px; 11px govde metni kimlikte yok */
line-height: 1.5;
color: var(--fg-muted);
margin: 0 0 0.4rem;
}
/* --- (6) Adet kontrolu (-/+) ---
Olculen: kapsayici 4px yuvarlak, cerceve `color-mix(currentColor 30%)` ->
beyaz uzerinde #B8B8B8 = 1,97:1 (WCAG 1.4.11 icin gereken 3:1 ALTINDA);
butonlar 30x25,4px (44px dokunma hedefinin altinda), font Arial.
--color-line (#E7E4DE) cerceve icin KULLANILMADI: beyazda 1,27:1, 1.4.11'i
yine gecemezdi. Ayirici CIZGILERDE --color-line dogru token, interaktif
kontrol cercevesinde degil. */
body.woocommerce-cart .wc-block-components-quantity-selector {
border-radius: var(--radius);
border: 1px solid var(--fg);
/* wc-blocks butonlara `width: 30px` (min-width degil) yaziyor; kapsayici da
icerik boyunda kaliyordu -> butonlari 44px'e cikarinca kapsayici BUYUMEDI,
sadece ortadaki input 45 -> 27px'e eziliyordu (olculdu). `width: auto`
kapsayicinin buyumesine izin verir: 130px. Kapsayan hucre 375'te 182px,
768+'da 166px — tasma yok (dort genislikte olculdu). */
width: auto;
max-width: 100%;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button {
border-radius: var(--radius);
width: auto; /* wc-blocks'un sabit 30px'ini birak */
min-width: 44px;
min-height: 44px;
font-family: var(--font-body);
font-size: 1rem;
color: var(--fg);
transition: opacity var(--dur-press) var(--ease-out),
transform var(--dur-press) var(--ease-out);
}
body.woocommerce-cart .wc-block-components-quantity-selector__input {
min-width: 40px;
min-height: 44px;
font-family: var(--font-body);
font-size: 0.9375rem;
color: var(--fg);
}
body.woocommerce-cart .wc-block-components-quantity-selector__button:active:not(:disabled) {
transform: scale(0.97);
}
@media (hover: hover) {
body.woocommerce-cart .wc-block-components-quantity-selector__button:hover:not(:disabled) {
opacity: 0.7;
}
}
@media (prefers-reduced-motion: reduce) {
body.woocommerce-cart .wc-block-components-quantity-selector__button {
transition: none;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button:active:not(:disabled) {
transform: none;
}
}
/* Cop kutusu (kaldir): olculen 24x24px. Ikon 24px kalir, TIKLANABILIR ALAN
44x44'e cikar (inline-flex + min-*). Ikincil eylem -> muted, hover'da ink. */
body.woocommerce-cart .wc-block-cart-item__remove-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
color: var(--fg-muted);
text-decoration: none;
transition: opacity var(--dur-press) var(--ease-out),
transform var(--dur-press) var(--ease-out);
}
body.woocommerce-cart .wc-block-cart-item__remove-link:active {
transform: scale(0.97);
}
@media (hover: hover) {
body.woocommerce-cart .wc-block-cart-item__remove-link:hover {
color: var(--fg);
}
}
@media (prefers-reduced-motion: reduce) {
body.woocommerce-cart .wc-block-cart-item__remove-link {
transition: none;
}
body.woocommerce-cart .wc-block-cart-item__remove-link:active {
transform: none;
}
}
/* --- (7) "Add coupons" acilir kontrolu ---
`role="button" tabindex="0"` tasiyan bir DIV; olculen yukseklik 18px.
`display: block` KORUNUR — chevron ikonu `position: absolute; right: 0` ile
konumlaniyor, flex'e cevirmek hizalamayi bozar. Yukseklik dolgudan buyur,
ikon dikeyde ortalanir. Mono etiket dili "bu bir KONTROL" bilgisini tasir. */
body.woocommerce-cart .wc-block-components-panel__button,
body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
min-height: 44px;
padding-top: 0.8125rem;
padding-bottom: 0.8125rem;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg);
}
body.woocommerce-cart .wc-block-components-panel__button-icon,
body.woocommerce-checkout .wc-block-components-panel__button-icon {
top: 50%;
transform: translateY(-50%);
}
body.woocommerce-cart .wc-block-components-panel__button:focus-visible,
body.woocommerce-checkout .wc-block-components-panel__button:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
/* --- (8) Mobilde sabitlenen "Proceed to Checkout" cubugu ---
`position: fixed` YALNIZ is-medium/is-small/is-mobile kapsayici sinifinda
olusuyor (600/480/375'te olculdu; is-large'da static). Zemin beyaz + golge
yok + cerceve yok oldugu icin ustune bindigi icerikten ayrilmiyordu.
⚠️ Ust cizgi icin --color-line (#E7E4DE) YETMEZ: beyaz uzerinde 1,27:1, yani
cubugun altindan KAYAN icerikten hala ayrilmiyor (375 ekran goruntusunde
dogrulandi — cubuk ikinci urunun uzerine biniyor ve kesme noktasi
gorunmuyordu). Sabit cubuk bir KENAR'dir, bir ayrac degil; galeri dilinde
bunun karsiligi tam guclu 1px hairline. --color-ink: 18,42:1. */
body.woocommerce-cart .wc-block-cart:not(.is-large) .wc-block-cart__submit-container {
background-color: var(--bg-raised);
border-top: 1px solid var(--fg);
border-radius: var(--radius);
}
/* --- (9) Checkout form alanlari: 4px yuvarlak kose + soguk gri cerceve ---
Olculen cerceve `color-mix(in srgb, currentColor 80%, transparent)` ->
beyaz uzerinde #555759 (soguk gri, temanin sicak notr ailesine yabanci).
--color-ink-2 (#6E6A63, beyazda 5,38:1) 1.4.11'in 3:1 esigini rahat gecer;
--color-line (#E7E4DE, 1,28:1) form alaninda KULLANILMAZ. */
body.woocommerce-checkout .wc-block-components-text-input input[type],
body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
body.woocommerce-checkout .wc-block-components-textarea {
border-radius: var(--radius);
border-color: var(--fg-muted);
}
body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
border-radius: var(--radius);
}
/* Secili kargo/odeme kutusu: yalniz SECILI durumda 4px yuvarlaklik olusuyordu.
Radio dugmenin kendisi (20x20, border-radius 50%) GERCEK dairedir —
--radius-round kapsaminda, dokunulmaz. */
body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted,
body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
border-radius: var(--radius);
box-shadow: inset 0 0 0 1.5px var(--fg);
}
/* Ozet karti 5px yuvarlakti; ic ayraclar `color-mix(currentColor 20%)` =
#D0D0D0 (token DEGIL). Keskin kose + marka hairline. */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
border-radius: var(--radius);
border-color: var(--line);
}
body.woocommerce-checkout .wc-block-components-totals-wrapper {
border-top-color: var(--line);
}
/* Telefon alanı yardım metni (inc/checkout-uk.php). WooCommerce
yardim satirina `white-space: nowrap` veriyor: uzun metin alanin min-content
genisligini buyutup Postcode + Phone satirini ikiye boluyordu (olculdu:
iki alan da 697px). `.ft-page p` govde olcusu de burada fazla buyuk. */
body.woocommerce-checkout .ft-page p.wc-block-components-text-input__help {
margin: 0.375rem 0 0;
font-size: 0.8125rem;
line-height: 1.4;
white-space: normal;
color: var(--fg-muted);
}