.dk {
    --dk-cizgi: light-dark(#2d3c94, #a9b6ff); --dk-eski: light-dark(#8a96c8, #5a6699);
    display: grid; justify-items: center; gap: 8px; max-width: 720px; margin: 0 auto 24px; container-type: inline-size; padding: 0 12px; color: var(--body-txt-color);
}
.dk-ust { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px 16px; }
.dk-tarih { margin: 0; font-size: 1.3rem; }
.dk-bugune { color: var(--baglanti); }
.dk-not { margin: 0; font-style: italic; color: var(--yazi-2); text-align: center; }
.dk-durum { margin: 0; color: var(--yazi-2); font-size: .95rem; text-align: center; }
.dk-yazilan { min-height: 2.2rem; margin: 0; font-size: 1.8rem; font-weight: 800; letter-spacing: .1em; }
.dk-kare { position: relative; width: min(340px, 100cqi); aspect-ratio: 1; }
.dk-cizgi { position: absolute; inset: 0; width: 100%; height: 100%; }
.dk-kenar { fill: var(--yuzey); stroke: var(--body-txt-color); stroke-width: 3; }
.dk-cizgi polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dk-cizgi-eski { stroke: var(--dk-eski); stroke-width: 4; stroke-dasharray: 8 6; }
.dk-cizgi-yeni { stroke: var(--dk-cizgi); stroke-width: 5; }
.dk-harf { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; border: 3px solid var(--body-txt-color); border-radius: 50%; background: var(--yuzey); color: var(--body-txt-color); font: inherit; font-size: 1.35rem; font-weight: 800; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.dk-harf.dk-kullanildi { background: var(--body-txt-color); color: var(--body-bg-color); }
.dk-harf.dk-son { box-shadow: 0 0 0 4px var(--dk-cizgi); }
.dk-harf.dk-yasak { border-style: dashed; opacity: .55; }
.dk-harf:focus-visible, .dk-dugme:focus-visible { outline: 3px solid var(--focus-otl-color); outline-offset: 3px; }
.dk-harf:disabled { cursor: default; }
.dk-geri { min-height: 1.5rem; margin: 0; font-weight: 700; text-align: center; }
.dk-geri-hata { color: var(--hata); }
.dk-geri-iyi { color: var(--body-txt-color); }
.dk-geri-bilgi { color: var(--yazi-2); }
.dk-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.dk-dugme { min-height: 44px; padding: 0 18px; border: 2px solid var(--cizgi-guclu); border-radius: 999px; background: var(--yuzey); color: var(--body-txt-color); font: inherit; font-weight: 700; cursor: pointer; }
.dk-dugme-ana { border-color: var(--body-txt-color); }
.dk-dugme:disabled { opacity: .5; cursor: default; }
.dk-kelimeler { margin: 0; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.dk-klavye { margin: 0; color: var(--yazi-soluk); font-size: .85rem; text-align: center; }
.dk-sonuc { display: grid; justify-items: center; gap: 6px; text-align: center; }
.dk-sonuc[hidden] { display: none; }
.dk-sonuc p { margin: 0; }
.dk-soluk { color: var(--yazi-2); font-size: .92rem; }
.dk-kutu { box-sizing: border-box; width: 100%; max-width: 720px; margin: 0 auto 16px; padding: 12px 14px; border: 1px solid var(--cizgi-guclu); border-radius: 12px; background: var(--yuzey); }
.dk-kutu summary { cursor: pointer; font-weight: 700; }
.dk-kutu h3 { margin: 0 0 6px; font-size: 1.05rem; }
.dk-arsiv ul { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.dk-arsiv a { color: var(--baglanti); }
.oyun-diger { box-sizing: border-box; max-width: 720px; margin: 0 auto 16px; padding: 12px 14px; border: 1px solid var(--cizgi-guclu); border-radius: 12px; background: var(--yuzey); }
.oyun-diger h3 { margin: 0 0 6px; font-size: 1.05rem; }
.oyun-diger ul { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.oyun-diger a { color: var(--baglanti); }
@media (prefers-reduced-motion: reduce) {
    .dk * { transition: none !important; }
}
@media (forced-colors: active) {
    .dk-harf.dk-kullanildi { forced-color-adjust: none; background: CanvasText; color: Canvas; }
}