/* * Çerez tercih yöneticisi. * * Sitenin diliyle aynı: kâğıt beyazı zemin, ince çizgiler, süsen * vurgusu. "Reddet" ve "Kabul et" AYNI boyutta, AYNI görünümde — * "reddet"i küçültmek ya da soluklaştırmak karanlık desen sayılıyor ve * alınan rızayı geçersiz kılıyor. Ayrım yalnızca metinde. */ .cmc-ck { --ck-line: var(--cmc-line, #E3E8E0); --ck-ink: var(--cmc-ink, #17201A); --ck-body: var(--cmc-body, #4E5A52); --ck-muted: var(--cmc-muted, #5A655D); --ck-surface: var(--cmc-surface, #fff); --ck-accent: var(--cmc-accent, #5A4A8F); --ck-accent-soft: var(--cmc-accent-soft, rgba(90,74,143,.10)); } /* ---------- 1. katman: köşe kartı ---------- * * NEDEN BANT DEĞİL KART * * Önceki hâli sayfanın altına yapışan tam genişlikli bir banttı. * Tam genişlikli bant, tarayıcı arayüzünün bir parçası gibi okunuyor * ve göz onu "sayfanın dibi" sanıp atlıyordu; ayrıca gövdeye onun * yüksekliği kadar boşluk eklemek gerekiyor, bu da sayfanın sonunu * bozuyordu. * * Köşeye oturan sınırlı genişlikte bir kart, içeriğin ÜSTÜNDE duran * ayrı bir nesne gibi okunuyor: fark ediliyor ama sayfayı da * kapatmıyor. Telefonda genişlik kalmadığı için alttan açılan tam * genişlikli tabakaya dönüyor. * * Sol alt köşe seçildi: sağ altta kalıcı WhatsApp düğmesi var ve * onu geçici bir kartla kapatmak dönüşüm kaybı olurdu. */ .cmc-ck__bar { position: fixed; z-index: 9500; inset: auto auto 22px 22px; width: min(420px, calc(100vw - 44px)); background: var(--ck-surface); border: 1px solid var(--ck-line); border-radius: 14px; box-shadow: 0 2px 10px -4px rgba(23,32,26,.14), 0 26px 60px -30px rgba(23,32,26,.42); animation: cmc-ck-up .42s cubic-bezier(.16,1,.3,1); } .cmc-ck__bar[hidden] { display: none; } .cmc-ck__bar.is-out { animation: cmc-ck-down .3s ease forwards; } @keyframes cmc-ck-up { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes cmc-ck-down { from { transform: none; opacity: 1; } to { transform: translateY(14px) scale(.98); opacity: 0; } } .cmc-ck__bar-in { padding: 18px 18px 16px; display: grid; gap: 14px; } .cmc-ck__intro { min-width: 0; } /* * Telefon ve küçük tablet: köşeye sığmaz, alttan tam genişlikli * tabaka olur. * * Kırılım 600'den 768'e çekildi. Arada kalan genişliklerde kart * köşede duruyor ama temanın sabit alt eylem çubuğu (Ara · WhatsApp · * Çiçek Gönder) da orada; ikisi üst üste biniyordu. Tam genişlikli * tabaka çubuğun ÜSTÜNDE duruyor ve belirsizlik kalmıyor. */ @media (max-width: 768px) { .cmc-ck__bar { inset: auto 0 0 0; width: auto; border-radius: 16px 16px 0 0; border-inline: 0; border-block-end: 0; } /* * TELEFON: 360 px'te ≤ 140 px (2.1.0). Başlık görsel olarak gizli * (bölgenin adı ekran okuyucuda kalıyor); metin tek paragraf. */ .cmc-ck__bar-in { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 8px; } .cmc-ck__t { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .cmc-ck__p { font-size: .84rem; line-height: 1.45; } @keyframes cmc-ck-up { from { transform: translateY(100%); } to { transform: none; } } } .cmc-ck__t { margin: 0 0 5px; font-size: 1.02rem; line-height: 1.3; color: var(--ck-ink); font-weight: 600; } .cmc-ck__p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--ck-body); max-width: 74ch; } /* Politika bağlantısı ve "Tercihleri yönet" BİRLİKTE kırılır; ayraç satır başına düşmez. */ .cmc-ck__links { white-space: nowrap; } .cmc-ck__links > span[aria-hidden] { margin-inline: .25em; color: var(--ck-muted); } /* * "Tercihleri yönet" cümlenin içinde bir METİN DÜĞMESİ (2.1.0). Bant * yüksekliğinin yarısı üçüncü tam genişlikli düğmeydi. Reddet/Kabul * eşitliği bozulmuyor: ayrıntı bir karar düğmesi değil, ikinci katmanı * açıyor. Dikey iç boşluk dokunma alanını büyütür. */ .cmc-ck__prefs { display: inline; padding: 2px 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ck-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; cursor: pointer; } .cmc-ck__prefs:hover { color: var(--ck-accent); text-decoration-thickness: 2px; } .cmc-ck__prefs:focus-visible { outline: 2px solid var(--ck-accent); outline-offset: 2px; border-radius: 3px; } /* * Metin içindeki bağlantı yalnızca RENKLE ayırt ediliyordu: süsen moru * ile gövde grisi arasındaki parlaklık farkı ~1,02:1 (WCAG 1.4.1 en az * 3:1 ya da renk dışı bir işaret ister). PageSpeed masaüstü erişilebilirlik * puanının 100'den 97'ye düşmesinin tek nedeni buydu. Alt çizgi eklendi. */ .cmc-ck__p a, .cmc-ck__lead a, .cmc-ck__more a { color: var(--ck-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } .cmc-ck__p a:hover, .cmc-ck__p a:focus-visible, .cmc-ck__lead a:hover, .cmc-ck__more a:hover { text-decoration-thickness: 2px; } /* * İKİ KARAR DÜĞMESİ: YAN YANA, AYNI GENİŞLİK, AYNI GÖRÜNÜM (2.1.0). * Eskiden "Tümünü Kabul Et" dolgu mor, "Tümünü Reddet" çerçeveliydi; * görsel ağırlık kabule yönlendiriyordu (KVKK Çerez Rehberi: eşit * sunum). Şimdi ikisi de aynı koyu dolgu, 44 piksel yükseklik; ayrım * yalnızca metinde. */ .cmc-ck__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cmc-ck__acts .cmc-ck__b { width: 100%; min-height: 44px; background: var(--ck-ink); border-color: var(--ck-ink); color: #fff; } .cmc-ck__acts .cmc-ck__b:hover { background: var(--ck-accent); border-color: var(--ck-accent); color: #fff; } /* * Temel düğme (ikinci katmanın alt satırı da bunu kullanır). Bantta * iki karar düğmesi 1fr 1fr ızgarada: genişlikleri matematiksel olarak * EŞİT — eski iki sütunlu denemedeki 185/378 piksel farkı, düğmelerin * içeriğe göre boyutlanmasındandı. */ .cmc-ck__b { min-height: 42px; padding: 10px 18px; border-radius: 100px; border: 1px solid var(--cmc-line-2, #CBD4C7); background: transparent; color: var(--ck-ink); font: inherit; font-size: .86rem; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: border-color .16s ease, background-color .16s ease; } .cmc-ck__b:hover { border-color: var(--ck-accent); background: var(--ck-accent-soft); } .cmc-ck__b:focus-visible { outline: 2px solid var(--ck-accent); outline-offset: 2px; } .cmc-ck__b--yes { background: var(--ck-accent); border-color: var(--ck-accent); color: #fff; } .cmc-ck__b--yes:hover { filter: brightness(1.08); background: var(--ck-accent); color: #fff; } /* ---------- 2. katman: panel ---------- */ .cmc-ck__scrim { position: fixed; inset: 0; z-index: 9600; background: rgba(23,32,26,.42); opacity: 0; transition: opacity .26s ease; } .cmc-ck__scrim.is-in { opacity: 1; } .cmc-ck__scrim[hidden] { display: none; } .cmc-ck__panel { position: fixed; z-index: 9700; left: 50%; top: 50%; width: min(660px, calc(100vw - 32px)); max-height: min(84vh, 780px); overflow-y: auto; overscroll-behavior: contain; background: var(--ck-surface); border: 1px solid var(--ck-line); border-radius: 14px; box-shadow: 0 10px 30px -10px rgba(23,32,26,.28), 0 50px 90px -60px rgba(23,32,26,.6); padding: 24px clamp(20px, 4vw, 32px) 22px; transform: translate(-50%, -46%); opacity: 0; transition: opacity .26s ease, transform .26s cubic-bezier(.16,1,.3,1); } .cmc-ck__panel.is-in { opacity: 1; transform: translate(-50%, -50%); } .cmc-ck__panel[hidden] { display: none; } .cmc-ck__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .cmc-ck__x { flex: none; width: 34px; height: 34px; border: 0; background: none; color: var(--ck-muted); font-size: 25px; line-height: 1; cursor: pointer; border-radius: 8px; } .cmc-ck__x:hover { background: var(--cmc-wash, #F2F4F0); color: var(--ck-ink); } .cmc-ck__x:focus-visible { outline: 2px solid var(--ck-accent); outline-offset: 2px; } .cmc-ck__lead { margin: 6px 0 20px; font-size: .89rem; line-height: 1.7; color: var(--ck-muted); } .cmc-ck__list { display: grid; gap: 2px; } .cmc-ck__row { padding: 15px 0; border-top: 1px solid var(--ck-line); } .cmc-ck__row:first-child { border-top: 0; padding-top: 0; } .cmc-ck__rowhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; } /* Anahtar — kutu değil, açık/kapalı olduğu bakışta belli olsun. */ .cmc-ck__sw { display: flex; align-items: center; gap: 11px; cursor: pointer; min-width: 0; } .cmc-ck__sw input { position: absolute; opacity: 0; width: 0; height: 0; } .cmc-ck__track { flex: none; width: 42px; height: 24px; border-radius: 100px; background: var(--cmc-line-2, #CBD4C7); position: relative; transition: background-color .18s ease; } .cmc-ck__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.22); transition: transform .18s cubic-bezier(.16,1,.3,1); } .cmc-ck__sw input:checked + .cmc-ck__track { background: var(--ck-accent); } .cmc-ck__sw input:checked + .cmc-ck__track::after { transform: translateX(18px); } .cmc-ck__sw input:focus-visible + .cmc-ck__track { outline: 2px solid var(--ck-accent); outline-offset: 2px; } .cmc-ck__sw input:disabled + .cmc-ck__track { background: var(--ck-accent); opacity: .45; } .cmc-ck__sw input:disabled ~ .cmc-ck__name { color: var(--ck-muted); } .cmc-ck__name { font-weight: 600; color: var(--ck-ink); font-size: .95rem; } .cmc-ck__always, .cmc-ck__n { flex: none; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ck-muted); white-space: nowrap; } .cmc-ck__always { color: var(--ck-accent); } .cmc-ck__n--empty { opacity: .7; text-transform: none; letter-spacing: 0; font-weight: 400; } .cmc-ck__d { margin: 9px 0 0 53px; font-size: .86rem; line-height: 1.7; color: var(--ck-body); max-width: 62ch; } .cmc-ck__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ck-line); } .cmc-ck__more { margin: 14px 0 0; font-size: .82rem; } .cmc-ck__more a { color: var(--ck-accent); } /* * Alt bardaki kalıcı bağlantı. * * Dokunma hedefi 27 pikselde kalıyordu; WCAG 2.2'nin 24 piksel alt * sınırını geçiyor ama alt bardaki diğer bağlantılarla aynı rahatlıkta * değildi. Dikey iç boşlukla 34 piksele çıkarıldı. * * Odak halkası da yoktu: bu bir