.op {
    --op-z1: light-dark(#bfe6e1, #134e4a); --op-z1-yazi: light-dark(#0b3a36, #e3fbf7);
    --op-z2: light-dark(#f5c9ae, #7a2e10); --op-z2-yazi: light-dark(#4a1806, #ffeee4);
    --op-z3: light-dark(#f2c1d5, #7d1a46); --op-z3-yazi: light-dark(#4a0b26, #ffe6f0);
    --op-z4: light-dark(#363b66, #c3c7ee); --op-z4-yazi: light-dark(#ffffff, #14163a);
    display: grid; gap: 12px; max-width: 720px; margin: 0 auto 24px; padding: 0 12px; color: var(--body-txt-color);
}
.op-ust { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 12px; }
.op-tarih { margin: 0; font-size: 1.3rem; text-align: center; }
.op-bugune { color: var(--baglanti); }
.op-not { margin: 0; text-align: center; font-style: italic; color: var(--yazi-2); }
.op-yonerge { margin: 0; text-align: center; color: var(--yazi-2); }
.op-cozulen { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.op-cozulen:empty { display: none; }
.op-grup { padding: 10px 14px; border-radius: 10px; text-align: center; }
.op-z1 { background: var(--op-z1); color: var(--op-z1-yazi); }
.op-z2 { background: var(--op-z2); color: var(--op-z2-yazi); }
.op-z3 { background: var(--op-z3); color: var(--op-z3-yazi); }
.op-z4 { background: var(--op-z4); color: var(--op-z4-yazi); }
.op-acilmadi { outline: 3px dashed currentColor; outline-offset: -6px; }
.op-grup-ust { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 8px; margin: 0; }
.op-simge { font-size: 1.1rem; }
.op-zorluk { font-size: .85rem; font-weight: 600; }
.op-grup-ad { font-size: 1.1rem; }
.op-grup-kelimeler { margin: 4px 0 0; font-weight: 600; letter-spacing: .03em; overflow-wrap: anywhere; }
.op-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.op-izgara:empty { display: none; }
.op-kart { min-width: 0; min-height: 68px; padding: 6px 4px; border: 2px solid var(--yazi-soluk); border-radius: 10px; background: var(--yuzey); color: var(--body-txt-color); font: inherit; font-size: clamp(.72rem, 2.7vw, 1rem); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; cursor: pointer; touch-action: manipulation; }
.op-kart[aria-pressed="true"] { border-color: var(--body-txt-color); background: var(--body-txt-color); color: var(--body-bg-color); }
.op-kart:focus-visible, .op-dugme:focus-visible { outline: 3px solid var(--focus-otl-color); outline-offset: 2px; }
.op-geri { min-height: 1.6rem; margin: 0; font-weight: 700; text-align: center; }
.op-geri-hata { color: var(--hata); }
.op-geri-iyi { color: var(--body-txt-color); }
.op-geri-bilgi { color: var(--yazi-2); }
.op-hak-satir { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--yazi-2); }
.op-hak { display: inline-flex; gap: 6px; }
.op-nokta { width: 14px; height: 14px; border: 2px solid var(--yazi-soluk); border-radius: 50%; box-sizing: border-box; }
.op-nokta.op-dolu { border-color: var(--body-txt-color); background: var(--body-txt-color); }
.op-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.op-dugme { min-height: 48px; 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; }
.op-dugme-ana { border-color: var(--body-txt-color); }
.op-dugme:disabled { opacity: .5; cursor: default; }
.op-klavye { margin: 0; color: var(--yazi-soluk); font-size: .85rem; text-align: center; }
.op-sonuc { display: grid; justify-items: center; gap: 6px; text-align: center; }
.op-sonuc[hidden] { display: none; }
.op-sonuc p { margin: 0; }
.op-soluk { color: var(--yazi-2); font-size: .92rem; }
.op-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); }
.op-kutu summary { cursor: pointer; font-weight: 700; }
.op-kutu h3 { margin: 0 0 6px; font-size: 1.05rem; }
.op-dun .op-cozulen { margin-top: 10px; }
.op-arsiv ul { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.op-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); }
.op-icerik table { border-collapse: collapse; margin: 8px 0 16px; }
.op-icerik th, .op-icerik td { padding: 4px 10px; border: 1px solid var(--cizgi-guclu); text-align: left; }
@media (prefers-reduced-motion: reduce) {
    .op * { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
    .op-grup { border: 2px solid CanvasText; }
    .op-kart[aria-pressed="true"] { border-width: 4px; }
}
@media (max-width: 520px) {
    .op-izgara { gap: 6px; }
    .op-kart { min-height: 60px; }
}