.kk {
    --kk-yer: light-dark(#2d3c94, #a9b6ff); --kk-yer-yazi: light-dark(#ffffff, #10173d);
    --kk-var: light-dark(#a8411b, #f6b08f); --kk-var-yazi: light-dark(#ffffff, #3a1204);
    display: grid; justify-items: center; gap: 10px; max-width: 720px; margin: 0 auto 24px; padding: 0 12px; color: var(--body-txt-color);
}
.kk-ust { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px 16px; }
.kk-tarih { margin: 0; font-size: 1.3rem; }
.kk-bugune { color: var(--baglanti); }
.kk-zor { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--yazi-2); }
.kk-izgara { display: grid; gap: 6px; }
.kk-satir { display: grid; grid-template-columns: repeat(5, var(--kk-k, 58px)); gap: 6px; }
.kk-karo { position: relative; display: flex; align-items: center; justify-content: center; height: var(--kk-k, 58px); box-sizing: border-box; border: 2px solid var(--yazi-soluk); border-radius: 12px; background: repeating-linear-gradient(180deg, transparent 0 5px, color-mix(in srgb, var(--yazi-soluk) 18%, transparent) 5px 6px) top / 100% 10px no-repeat, repeating-linear-gradient(180deg, transparent 0 5px, color-mix(in srgb, var(--yazi-soluk) 18%, transparent) 5px 6px) bottom / 100% 10px no-repeat, var(--yuzey); font-size: 1.7rem; font-weight: 800; }
.kk-dolu { border-color: var(--body-txt-color); }
.kk-aktif .kk-karo { box-shadow: 0 2px 0 var(--yazi-soluk); }
.kk-d2 { border-color: var(--kk-yer); background: var(--kk-yer); color: var(--kk-yer-yazi); }
.kk-d1 { border-color: var(--kk-var); background: var(--kk-var); color: var(--kk-var-yazi); }
.kk-d0 { border-style: dashed; background: var(--yuzey); color: var(--body-txt-color); }
.kk-d0 .kk-harf { opacity: .75; }
.kk-simge { position: absolute; right: 5px; bottom: 2px; font-size: .78rem; line-height: 1; }
.kk-geri { min-height: 1.5rem; margin: 0; font-weight: 700; text-align: center; }
.kk-geri-hata { color: var(--hata); }
.kk-geri-iyi { color: var(--body-txt-color); }
.kk-geri-bilgi { color: var(--yazi-2); }
.kk-klavye { width: 100%; max-width: 520px; }
.kk-klavye-satir { display: flex; justify-content: center; gap: 4px; margin: 4px 0; }
.kk-tus { position: relative; flex: 1 1 0; min-width: 0; max-width: 46px; min-height: 52px; padding: 0; border: 1px solid var(--yazi-soluk); border-radius: 8px; background: var(--yuzey); color: var(--body-txt-color); font: inherit; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.kk-tus-genis { flex: 1.7 1 0; max-width: 74px; font-size: .8rem; }
.kk-tus.kk-d0 { border-style: dashed; }
.kk-tus.kk-d0 .kk-tus-harf { opacity: .6; }
.kk-tus-simge { position: absolute; right: 3px; bottom: 1px; font-size: .62rem; }
.kk-tus:focus-visible, .kk-dugme:focus-visible { outline: 3px solid var(--focus-otl-color); outline-offset: 2px; }
.kk-anahtar { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 0; color: var(--yazi-2); font-size: .9rem; }
.kk-sonuc { display: grid; justify-items: center; gap: 6px; text-align: center; }
.kk-sonuc[hidden], .kk-not[hidden] { display: none; }
.kk-sonuc p { margin: 0; }
.kk-sonuc a { color: var(--baglanti); }
.kk-not { font-style: italic; color: var(--yazi-2); }
.kk-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; }
.kk-soluk { color: var(--yazi-2); font-size: .92rem; }
.kk-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); }
.kk-kutu summary { cursor: pointer; font-weight: 700; }
.kk-kutu h3 { margin: 0 0 6px; font-size: 1.05rem; }
.kk-kutu a { color: var(--baglanti); }
.kk-dun-kelime { font-size: 1.4rem; font-weight: 800; letter-spacing: .1em; }
.kk-arsiv ul { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.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); }
.kk-icerik table { border-collapse: collapse; margin: 8px 0 16px; }
.kk-icerik th, .kk-icerik td { padding: 4px 10px; border: 1px solid var(--cizgi-guclu); text-align: left; }
@media (max-width: 420px) {
    .kk { --kk-k: 52px; }
    .kk-karo { font-size: 1.5rem; }
}
@media (forced-colors: active) {
    .kk-d2 { border-width: 4px; }
    .kk-d1 { border-style: double; border-width: 4px; }
}