/* OG Play: Kafa Kafaya sayfası.
   Tüm sınıflar ogkk- önekli. Taban gündüz, [data-theme="dark"] gece.
   Link renkleri !important taşır: site.css'teki genel gece link kuralı (:not zinciri,
   özgüllüğü yüksek) aksi halde buton yazılarını mercan kırmızısına çeviriyor. */

.ogkk-page {
    --kk-card: #ffffff;
    --kk-card-2: #f2f4f9;
    --kk-text: #18202e;
    --kk-muted: #576274;
    --kk-border: rgba(24, 32, 46, 0.1);
    --kk-chip: rgba(24, 32, 46, 0.06);
    --kk-accent: #6c5ce7;
    --kk-accent-text: #5444d6;
    --kk-blue: #2f80ed;
    --kk-red: #e5484d;
    --kk-overlay: rgba(244, 246, 251, 0.84);
    --kk-overlay-solid: rgba(244, 246, 251, 0.94);
    --kk-shadow: 0 16px 38px rgba(24, 32, 46, 0.16);
    --kk-scroll: rgba(24, 32, 46, 0.22);
    font-family: 'Outfit', sans-serif;
    color: var(--kk-text);
    padding: 22px 0 56px;
}

[data-theme="dark"] .ogkk-page {
    --kk-card: #131a2e;
    --kk-card-2: #182039;
    --kk-text: #e9edf3;
    --kk-muted: #9ba6b9;
    --kk-border: rgba(255, 255, 255, 0.1);
    --kk-chip: rgba(255, 255, 255, 0.07);
    --kk-accent: #8b7bff;
    --kk-accent-text: #b3a6ff;
    --kk-overlay: rgba(7, 10, 24, 0.78);
    --kk-overlay-solid: rgba(7, 10, 24, 0.92);
    --kk-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
    --kk-scroll: rgba(255, 255, 255, 0.2);
}

/* ============ Sayfa başı ============ */
.ogkk-crumbs { font-size: .85rem; color: var(--kk-muted); margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.ogkk-page .ogkk-crumbs a { color: var(--kk-accent-text) !important; font-weight: 700; text-decoration: none; }
.ogkk-page .ogkk-crumbs a:hover { text-decoration: underline; }

.ogkk-head { margin-bottom: 18px; max-width: 860px; }
.ogkk-head h1 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    letter-spacing: .3px;
    margin: 0 0 8px;
    color: var(--kk-text);
}
.ogkk-lead { color: var(--kk-muted); font-size: 1.02rem; line-height: 1.65; margin: 0; }
.ogkk-lead strong { color: var(--kk-text); }

/* Gömülü mod (/play/kafa-kafaya/embed): Sayfa boşluğu yok, yalnız oyun kutusu */
.ogkk-page.ogkk-embed { padding: 12px; }
.ogkk-embed .ogkk { margin-bottom: 0; }
/* Haber kartı (~780 px) sahası alçak: Menü sığsın diye başlık küçük, alt yazı yok, iki sütun korunur */
.ogkk-embed .ogkk-overlay { padding: 10px 14px; }
.ogkk-embed .ogkk-brand { font-size: 1.6rem; margin-bottom: 8px; }
.ogkk-embed .ogkk-brand-sub { display: none; }
.ogkk-embed .ogkk-field { margin-bottom: 10px; }
.ogkk-embed .ogkk-menu-foot { margin-top: 8px; padding-top: 10px; }
.ogkk-embed .ogkk-btn-primary { font-size: 16px; padding: 9px 20px; }
@media (min-width: 640px) {
    .ogkk-embed .ogkk-menu-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; }
}

/* ============ Oyun kabı ============ */
.ogkk {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #05070f;
    border: 1px solid var(--kk-border);
    box-shadow: var(--kk-shadow);
    margin-bottom: 34px;
}
.ogkk-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px 8px 14px;
    background: var(--kk-card);
    border-bottom: 1px solid var(--kk-border);
    color: var(--kk-text);
}
.ogkk-tb-brand { font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; font-size: 1rem; }
.ogkk-tb-brand i { color: var(--kk-accent); margin-right: 6px; }
.ogkk-tb-info { color: var(--kk-muted); font-size: .85rem; margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogkk-tb-actions { margin-left: auto; display: flex; gap: 6px; }
.ogkk-iconbtn {
    width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid var(--kk-border); background: var(--kk-chip); color: var(--kk-text);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.ogkk-iconbtn:hover:not(:disabled) { background: var(--kk-accent); color: #fff; border-color: transparent; }
.ogkk-iconbtn:disabled { opacity: .4; cursor: default; }
.ogkk-iconbtn:focus-visible, .ogkk-btn:focus-visible, .ogkk-seg button:focus-visible, .ogkk-char:focus-visible { outline: 3px solid var(--kk-accent); outline-offset: 2px; }

.ogkk-stage { position: relative; aspect-ratio: 16 / 9; background: #05070f; outline: none; }
.ogkk-canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ogkk.is-playing .ogkk-canvas { cursor: crosshair; }

/* ============ Katmanlar (menü, mola, sonuç) ============ */
.ogkk-overlay {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
    background: var(--kk-overlay);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    overflow: auto;
    color: var(--kk-text);
}
.ogkk-overlay[hidden] { display: none; }
.ogkk-panel { width: min(900px, 100%); margin: auto; }
.ogkk-panel-sm { width: min(460px, 100%); text-align: center; }

.ogkk-brand {
    font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase;
    font-size: clamp(1.8rem, 4.2vw, 2.8rem); letter-spacing: 1.5px; line-height: 1;
    margin: 0 0 4px;
    display: flex; align-items: center; gap: 12px;
}
.ogkk-brand-ball {
    width: .9em; height: .9em; border-radius: 50%; flex-shrink: 0;
    background: radial-gradient(circle at 35% 35%, #fff 0 45%, #d9dce4 70%), #fff;
    box-shadow: inset -3px -4px 0 rgba(0,0,0,.12), 0 0 0 2px #1b1d24;
    position: relative; animation: ogkk-bounce 1.4s ease-in-out infinite;
}
.ogkk-brand-ball::after { content: ""; position: absolute; inset: 32%; background: #1b1d24; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
@keyframes ogkk-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.ogkk-brand-sub { color: var(--kk-muted); margin: 0 0 16px; font-size: .95rem; }

.ogkk-menu-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; }
.ogkk-field { margin-bottom: 14px; }
.ogkk-label {
    display: block; margin-bottom: 6px;
    font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px;
    color: var(--kk-muted);
}
.ogkk-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--kk-chip); border: 1px solid var(--kk-border); }
.ogkk-seg button {
    border: 0; background: transparent; color: var(--kk-text);
    font: 700 14px 'Outfit', sans-serif; padding: 7px 13px; border-radius: 9px; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ogkk-seg button:hover { background: var(--kk-chip); }
.ogkk-seg button.is-active { background: var(--kk-accent); color: #fff; box-shadow: 0 6px 16px rgba(108, 92, 231, .35); }
/* Mod seçimi menünün üstünde tam genişlik: Dört düğme eşit pay */
.ogkk-seg-mode { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; box-sizing: border-box; }
.ogkk-seg-mode button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 8px 6px; }
@media (max-width: 560px) { .ogkk-seg-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ogkk-seg-mode button:last-child { grid-column: span 2; } }

.ogkk-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .9rem; line-height: 1.45; }
.ogkk-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--kk-accent); flex-shrink: 0; }
.ogkk-check small { display: block; color: var(--kk-muted); font-size: .8rem; }

.ogkk-picker + .ogkk-picker { margin-top: 12px; }
.ogkk-picker-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ogkk-picker-head .ogkk-label { margin: 0; }
.ogkk-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ogkk-dot-0 { background: var(--kk-blue); }
.ogkk-dot-1 { background: var(--kk-red); }
.ogkk-chars { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
.ogkk-char {
    border: 2px solid transparent; background: var(--kk-chip); color: var(--kk-text);
    border-radius: 12px; padding: 4px 2px 6px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.ogkk-char:hover { transform: translateY(-2px); }
.ogkk-chars[data-slot="0"] .ogkk-char.is-active { border-color: var(--kk-blue); background: rgba(47, 128, 237, .14); }
.ogkk-chars[data-slot="1"] .ogkk-char.is-active { border-color: var(--kk-red); background: rgba(229, 72, 77, .14); }
.ogkk-char-face { width: 100%; max-width: 52px; height: auto; aspect-ratio: 1; }
.ogkk-char-name { font-size: 11px; font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ogkk-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; font-size: .82rem; color: var(--kk-muted); min-height: 20px; }
.ogkk-stats b { color: var(--kk-text); font-weight: 800; }
.ogkk-stat { display: inline-flex; align-items: center; gap: 6px; }
.ogkk-pips { display: inline-flex; gap: 2px; }
.ogkk-pips i { width: 9px; height: 9px; border-radius: 3px; background: var(--kk-border); }
.ogkk-pips i.on { background: var(--kk-accent); }

.ogkk-menu-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--kk-border); }
.ogkk-keys-hint { color: var(--kk-muted); font-size: .84rem; line-height: 1.5; flex: 1; min-width: 220px; }
.ogkk.has-touch .ogkk-keys-hint { display: none; }

.ogkk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--kk-border); background: var(--kk-chip); color: var(--kk-text);
    font: 700 15px 'Outfit', sans-serif; padding: 10px 18px; border-radius: 12px; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ogkk-btn:hover { transform: translateY(-2px); }
.ogkk-btn-primary {
    background: linear-gradient(135deg, #6c5ce7, #a78bfa); border-color: transparent; color: #fff;
    font-family: 'Oswald', sans-serif; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; padding: 11px 26px;
    box-shadow: 0 10px 24px rgba(108, 92, 231, .35);
}
.ogkk-btn-primary:hover { box-shadow: 0 14px 30px rgba(108, 92, 231, .45); }
.ogkk-btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* "Karakterim" kutusu: kendi karakteri; henüz yoksa kesik çizgili "Oluştur" */
.ogkk-char.ogkk-char-me { border-style: dashed; border-color: var(--kk-border); }
.ogkk-char.ogkk-char-me.is-empty { justify-content: center; min-height: 72px; }
.ogkk-char-plus { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--kk-accent); color: #fff; margin: 6px 0 3px; }
.ogkk-linkbtn {
    margin-top: 8px; border: 0; background: transparent; padding: 4px 0; cursor: pointer;
    font: 700 13px 'Outfit', sans-serif; color: var(--kk-accent-text);
    display: inline-flex; align-items: center; gap: 6px;
}
.ogkk-linkbtn:hover { text-decoration: underline; }

/* ============ Karakter oluşturucu ============ */
.ogkk-creator { width: min(940px, 100%); }
.ogkk-cr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ogkk-brand-sm { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 0; }
.ogkk-cr-tokens { font-weight: 800; font-size: .9rem; color: #b8860b; background: rgba(227, 179, 65, .14); border: 1px solid rgba(227, 179, 65, .35); padding: 5px 12px; border-radius: 999px; }
[data-theme="dark"] .ogkk-cr-tokens { color: #f2c14e; }
.ogkk-cr-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; }
.ogkk-cr-left { display: flex; flex-direction: column; gap: 6px; }
.ogkk-cr-preview {
    width: 100%; max-width: 210px; aspect-ratio: 1; border-radius: 16px; align-self: center;
    background: radial-gradient(circle at 50% 40%, rgba(108, 92, 231, .22), transparent 65%), var(--kk-chip);
    border: 1px solid var(--kk-border); margin-bottom: 6px;
}
.ogkk-input {
    width: 100%; box-sizing: border-box; border: 1px solid var(--kk-border); background: var(--kk-card); color: var(--kk-text);
    border-radius: 10px; padding: 8px 12px; font: 600 15px 'Outfit', sans-serif;
}
.ogkk-input:focus { outline: 3px solid var(--kk-accent); outline-offset: 1px; }
.ogkk-cr-statlabel { margin-top: 8px; display: flex; justify-content: space-between; }
.ogkk-cr-left-pts { text-transform: none; letter-spacing: 0; font-size: 12px; }
.ogkk-cr-left-pts b { color: var(--kk-text); }
.ogkk-cr-left-pts.is-warn b { color: #e5484d; }
.ogkk-cr-stats { display: flex; flex-direction: column; gap: 6px; }
.ogkk-cr-stat { display: grid; grid-template-columns: 70px 28px 1fr 28px; align-items: center; gap: 8px; font-size: .86rem; }
.ogkk-cr-stat .ogkk-pips { justify-content: center; }
.ogkk-cr-stat .ogkk-pips i { width: 14px; height: 10px; }
.ogkk-cr-step {
    width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--kk-border); background: var(--kk-chip);
    color: var(--kk-text); font: 800 16px 'Outfit', sans-serif; cursor: pointer; line-height: 1;
}
.ogkk-cr-step:disabled { opacity: .35; cursor: default; }
.ogkk-cr-tabs { margin-bottom: 10px; }
.ogkk-cr-tabs button.is-active { background: var(--kk-accent); color: #fff; }
.ogkk-cr-options { display: flex; flex-direction: column; gap: 12px; max-height: 340px; overflow-x: hidden; overflow-y: auto; padding: 0 8px 8px 0; }   /* alt boşluk: kilit etiketi (bottom:-6px) taşıp boşuna çubuk açmasın */
.ogkk-cr-field .ogkk-label { margin-bottom: 5px; }
.ogkk-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ogkk-opt {
    position: relative; border: 2px solid var(--kk-border); background: var(--kk-chip); color: var(--kk-text);
    border-radius: 10px; padding: 6px 11px; font: 700 13px 'Outfit', sans-serif; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.ogkk-opt:hover { border-color: var(--kk-accent); }
.ogkk-opt.is-active { border-color: var(--kk-accent); background: rgba(108, 92, 231, .16); }
.ogkk-opt.is-color { padding: 4px; border-radius: 50%; }
.ogkk-opt .sw { width: 26px; height: 26px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.ogkk-opt.is-locked { border-style: dashed; }
.ogkk-opt .lk {
    font-size: 10px; font-weight: 800; color: #b8860b; display: inline-flex; align-items: center; gap: 3px;
}
[data-theme="dark"] .ogkk-opt .lk { color: #f2c14e; }
.ogkk-opt.is-color .lk {
    position: absolute; right: -6px; bottom: -6px; background: var(--kk-card); border: 1px solid var(--kk-border);
    border-radius: 999px; padding: 1px 4px;
}
.ogkk-cr-numwrap { display: inline-flex; align-items: center; gap: 6px; }
.ogkk-cr-num { width: 56px; text-align: center; font-family: 'Oswald', sans-serif; font-size: 1.1rem; padding: 6px 8px; }
.ogkk-cr-numwrap .ogkk-cr-step { width: 34px; height: 34px; border-radius: 10px; }
.ogkk-cr-numwrap .ogkk-cr-step:hover:not(:disabled) { background: var(--kk-accent); color: #fff; border-color: transparent; }

/* Kaydırma çubukları: Tarayıcının beyaz çubuğu yerine temanın ince çubuğu (oluşturucu, katmanlar, tablolar) */
.ogkk-page ::-webkit-scrollbar { width: 8px; height: 8px; }
.ogkk-page ::-webkit-scrollbar-track { background: transparent; }
.ogkk-page ::-webkit-scrollbar-thumb { background: var(--kk-scroll); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.ogkk-page ::-webkit-scrollbar-thumb:hover { background-color: var(--kk-accent); }
.ogkk-page ::-webkit-scrollbar-button, .ogkk-page ::-webkit-scrollbar-corner { display: none; background: transparent; }
@supports not selector(::-webkit-scrollbar) {
    .ogkk-page * { scrollbar-width: thin; scrollbar-color: var(--kk-scroll) transparent; }
}
.ogkk-cr-locks { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ogkk-cr-locks p { margin: 0; width: 100%; font-size: .86rem; color: var(--kk-muted); }
.ogkk-cr-locks a { color: var(--kk-accent-text) !important; font-weight: 700; }
.ogkk-cr-buy { padding: 7px 12px; font-size: 13px; }
.ogkk-cr-buy:disabled { opacity: .5; cursor: default; transform: none; }
.ogkk-cr-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kk-border); }
.ogkk-cr-msg { margin: 0 auto 0 0; font-size: .86rem; font-weight: 700; color: var(--kk-muted); }
.ogkk-cr-msg[data-kind="ok"] { color: #0f9d6b; }
.ogkk-cr-msg[data-kind="err"] { color: #e5484d; }
[data-theme="dark"] .ogkk-cr-msg[data-kind="ok"] { color: #5dcaa5; }
.ogkk-btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }

/* Mod bazlı göster/gizle: data-show boşlukla ayrılmış mod listesi taşır ("bot kupa gunun") */
.ogkk[data-mode="bot"] [data-show]:not([data-show~="bot"]),
.ogkk[data-mode="kupa"] [data-show]:not([data-show~="kupa"]),
.ogkk[data-mode="gunun"] [data-show]:not([data-show~="gunun"]),
.ogkk[data-mode="pvp"] [data-show]:not([data-show~="pvp"]) { display: none !important; }

/* ============ Kupa ağacı (menü) ============ */
.ogkk-cup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ogkk-cup-head b { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .4px; text-transform: uppercase; }
.ogkk-cup-head b i { color: #c99a06; margin-right: 4px; }
[data-theme="dark"] .ogkk-cup-head b i { color: #f2c14e; }
.ogkk-cup-head span { color: var(--kk-muted); font-size: .82rem; font-weight: 600; }
.ogkk-cup-rounds { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ogkk-cup-rounds li {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center;
    padding: 6px 4px 8px; border-radius: 12px; background: var(--kk-chip); border: 2px solid transparent;
}
.ogkk-cup-rounds canvas { width: 44px; height: 44px; }
.ogkk-cup-rounds .rn { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.ogkk-cup-rounds .op { font-size: 11px; color: var(--kk-muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogkk-cup-rounds .st { position: absolute; top: 6px; right: 7px; font-size: 11px; color: var(--kk-muted); }
.ogkk-cup-rounds li.is-next { border-color: var(--kk-accent); background: rgba(108, 92, 231, .14); }
.ogkk-cup-rounds li.is-next .st { color: var(--kk-accent-text); }
.ogkk-cup-rounds li.is-won { border-color: rgba(15, 157, 107, .55); }
.ogkk-cup-rounds li.is-won .st { color: #0f9d6b; }
.ogkk-cup-rounds li.is-lost { border-color: rgba(229, 72, 77, .55); opacity: .8; }
.ogkk-cup-rounds li.is-lost .st { color: var(--kk-red); }
.ogkk-cup-rounds li.is-locked canvas { opacity: .55; filter: grayscale(.6); }
[data-theme="dark"] .ogkk-cup-rounds li.is-won .st { color: #5dcaa5; }
.ogkk-cup-note { color: var(--kk-muted); font-size: .8rem; line-height: 1.45; margin: 8px 0 0; }
.ogkk-cup .ogkk-linkbtn { margin-top: 2px; }

/* ============ Günün maçı kartı (menü) ============ */
.ogkk-daily-top { display: flex; align-items: center; gap: 10px; }
.ogkk-daily-top canvas { width: 48px; height: 48px; border-radius: 12px; background: var(--kk-chip); flex-shrink: 0; }
.ogkk-daily-top b { display: block; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .4px; text-transform: uppercase; }
.ogkk-daily-top span { color: var(--kk-muted); font-size: .82rem; }
.ogkk-daily-top .ogkk-pill-st {
    margin-left: auto; flex-shrink: 0; padding: 4px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800; color: var(--kk-muted); background: var(--kk-chip); border: 1px solid var(--kk-border);
}
.ogkk-daily-top .ogkk-pill-st.done { color: #0f9d6b; background: rgba(15, 157, 107, .12); border-color: rgba(15, 157, 107, .35); }
[data-theme="dark"] .ogkk-daily-top .ogkk-pill-st.done { color: #5dcaa5; }
.ogkk-daily-list { list-style: none; margin: 10px 0 0; padding: 0; font-size: .88rem; line-height: 1.45; }
.ogkk-daily-list li { margin: 3px 0; }
.ogkk-daily-list i { width: 18px; text-align: center; color: var(--kk-accent-text); }

/* Kalan ödüllü maç / misafir çağrısı (menü altı) */
.ogkk-reward-left { width: 100%; margin: 0; color: var(--kk-muted); font-size: .82rem; }
.ogkk-reward-left:empty { display: none; }
.ogkk-page .ogkk-reward-left a, .ogkk-page .ogkk-res-reward a { color: var(--kk-accent-text) !important; font-weight: 800; }

/* ============ Sonuç ============ */
.ogkk-res-title { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); text-transform: uppercase; letter-spacing: 1px; margin: 0; }
.ogkk-res-title[data-res="win"] { color: #0f9d6b; }
.ogkk-res-title[data-res="loss"] { color: var(--kk-red); }
.ogkk-res-title[data-res="blue"] { color: var(--kk-blue); }
.ogkk-res-title[data-res="red"] { color: var(--kk-red); }
[data-theme="dark"] .ogkk-res-title[data-res="win"] { color: #5dcaa5; }
.ogkk-res-score { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 14px; }
.ogkk-res-score b {
    font-family: 'Oswald', sans-serif; font-size: 2.2rem; line-height: 1; color: #fff;
    min-width: 54px; padding: 6px 10px; border-radius: 12px;
}
.ogkk-res-score b.s0 { background: var(--kk-blue); }
.ogkk-res-score b.s1 { background: var(--kk-red); }
.ogkk-res-name { font-weight: 800; font-size: .95rem; }
.ogkk-res-dash { color: var(--kk-muted); font-weight: 800; }
.ogkk-res-stats { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 0 auto; }
.ogkk-res-stats td, .ogkk-res-stats th { padding: 6px 8px; border-bottom: 1px solid var(--kk-border); }
.ogkk-res-stats th { color: var(--kk-muted); font-weight: 600; text-align: center; }
.ogkk-res-stats td { font-family: 'Oswald', sans-serif; font-size: 1.1rem; width: 25%; }
.ogkk-res-stats td:first-child { text-align: left; color: var(--kk-blue); }
.ogkk-res-stats td:last-child { text-align: right; color: var(--kk-red); }
.ogkk-res-rec { color: var(--kk-muted); font-size: .85rem; margin: 12px 0 0; }
.ogkk-res-mode { color: var(--kk-muted); font-size: .88rem; font-weight: 700; margin: 4px 0 0; }

/* Ödül alanı: XP, jeton, bonuslar, yeni rozetler */
.ogkk-res-reward { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--kk-chip); border: 1px solid var(--kk-border); font-size: .88rem; }
.ogkk-res-reward[hidden] { display: none; }
.ogkk-res-reward p { margin: 0; }
.ogkk-res-reward .muted { color: var(--kk-muted); }
.ogkk-chips-r { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 6px; }
.ogkk-chip-r {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
    font-weight: 800; font-size: 13px; background: var(--kk-card); border: 1px solid var(--kk-border); color: var(--kk-text);
}
.ogkk-chip-r.xp { color: var(--kk-accent-text); }
.ogkk-chip-r.tk { color: #a87500; }
[data-theme="dark"] .ogkk-chip-r.tk { color: #f2c14e; }
.ogkk-achs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.ogkk-achs .ogkk-label { width: 100%; margin: 0; }
.ogkk-ach {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px;
    background: var(--kk-card); border: 1px solid var(--kk-border); font-size: 13px;
}
.ogkk-ach img { width: 28px; height: 28px; }

/* ============ Dokunmatik düğmeler ============ */
.ogkk-touch {
    display: none; justify-content: space-between; gap: 10px;
    padding: 10px 12px;
    background: var(--kk-card); border-top: 1px solid var(--kk-border);
}
.ogkk.has-touch.is-playing .ogkk-touch { display: flex; }
.ogkk-tgroup { display: flex; gap: 8px; }
.ogkk-tbtn {
    width: 62px; height: 56px; border-radius: 14px;
    border: 1px solid var(--kk-border); background: var(--kk-chip); color: var(--kk-text);
    font: 700 13px 'Outfit', sans-serif;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.ogkk-tbtn i { font-size: 18px; }
.ogkk-tbtn.is-down { background: var(--kk-accent); color: #fff; border-color: transparent; transform: scale(.96); }
.ogkk-tbtn-kick { background: rgba(229, 72, 77, .14); }
.ogkk-tbtn-jump { background: rgba(47, 128, 237, .14); }

/* ============ Tam ekran ============ */
.ogkk.is-fs { border-radius: 0; border: 0; margin: 0; display: flex; flex-direction: column; width: 100vw; height: 100vh; background: #000; }
.ogkk.is-fs .ogkk-stage { flex: 1; min-height: 0; aspect-ratio: auto; display: flex; align-items: center; justify-content: center; background: #000; }
.ogkk.is-fs .ogkk-canvas { flex: none; }
.ogkk.is-fs .ogkk-overlay { position: absolute !important; inset: 0 !important; min-height: 0 !important; }

/* ============ Bilgi bölümleri ============ */
.ogkk-section { margin-bottom: 36px; }
.ogkk-h2 {
    font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.45rem; letter-spacing: .3px;
    margin: 0 0 14px; color: var(--kk-text);
    display: flex; align-items: center; gap: 10px;
}
.ogkk-h2 i { color: var(--kk-accent); font-size: 1.05rem; }
.ogkk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ogkk-card { background: var(--kk-card); border: 1px solid var(--kk-border); border-radius: 16px; padding: 16px 18px; }
.ogkk-card h3 { font-size: 1rem; font-weight: 800; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; color: var(--kk-text); }
.ogkk-card h3 i { color: var(--kk-accent); }
.ogkk-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ogkk-card li { color: var(--kk-muted); font-size: .9rem; line-height: 1.5; }
.ogkk-card p { color: var(--kk-muted); font-size: .9rem; line-height: 1.55; margin: 0; }
.ogkk-page .ogkk-card a { color: var(--kk-accent-text) !important; font-weight: 700; }

/* Rozet vitrini (KafaKafayaRules.Badges) */
.ogkk-badges { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ogkk-badges li { display: flex; align-items: center; gap: 10px; background: var(--kk-card); border: 1px solid var(--kk-border); border-radius: 14px; padding: 8px 12px 8px 8px; }
.ogkk-badges img { width: 48px; height: 48px; flex-shrink: 0; }
.ogkk-badges b { display: block; font-weight: 800; font-size: .92rem; color: var(--kk-text); }
.ogkk-badges small { color: var(--kk-muted); font-size: .8rem; line-height: 1.35; }
.ogkk-page kbd {
    display: inline-block; min-width: 24px; text-align: center;
    font: 700 12px 'Outfit', sans-serif; color: var(--kk-text);
    background: var(--kk-card-2); border: 1px solid var(--kk-border); border-bottom-width: 3px;
    border-radius: 7px; padding: 2px 7px; margin: 0 1px;
}

.ogkk-steps { margin: 0; padding-left: 1.3rem; color: var(--kk-muted); line-height: 1.7; max-width: 860px; }
.ogkk-steps li { margin-bottom: 6px; }
.ogkk-steps strong { color: var(--kk-text); }

.ogkk-table-wrap { overflow-x: auto; border: 1px solid var(--kk-border); border-radius: 16px; background: var(--kk-card); }
.ogkk-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 520px; }
.ogkk-table th, .ogkk-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--kk-border); color: var(--kk-text); }
.ogkk-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .6px; color: var(--kk-muted); background: var(--kk-card-2); }
.ogkk-table tbody tr:last-child td, .ogkk-table tbody tr:last-child th { border-bottom: 0; }
.ogkk-table td.num { font-family: 'Oswald', sans-serif; font-size: 1.05rem; }
.ogkk-table td.desc { color: var(--kk-muted); }

.ogkk-rec { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ogkk-rec-item { background: var(--kk-card); border: 1px solid var(--kk-border); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ogkk-rec-lv { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--kk-muted); }
.ogkk-rec-val { color: var(--kk-muted); font-size: .9rem; }
.ogkk-rec-val b { font-family: 'Oswald', sans-serif; font-size: 1.3rem; color: var(--kk-text); margin-left: 4px; }
.ogkk-rec-val b:first-child { margin-left: 0; }
.ogkk-note { color: var(--kk-muted); font-size: .82rem; margin: 10px 0 0; }

.ogkk-faq { display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.ogkk-faq details { background: var(--kk-card); border: 1px solid var(--kk-border); border-radius: 14px; padding: 0 16px; }
.ogkk-faq summary {
    cursor: pointer; list-style: none; padding: 13px 0; font-weight: 700; color: var(--kk-text);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ogkk-faq summary::-webkit-details-marker { display: none; }
.ogkk-faq summary::after { content: "+"; font-size: 1.3rem; color: var(--kk-accent); line-height: 1; transition: transform .2s ease; }
.ogkk-faq details[open] summary::after { transform: rotate(45deg); }
.ogkk-faq details p { color: var(--kk-muted); line-height: 1.65; margin: 0 0 14px; }

.ogkk-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ogkk-page a.ogkk-rel {
    display: flex; align-items: center; gap: 12px;
    background: var(--kk-card); border: 1px solid var(--kk-border); border-radius: 14px; padding: 14px 16px;
    text-decoration: none; color: var(--kk-text) !important;
    transition: transform .2s ease, border-color .2s ease;
}
.ogkk-page a.ogkk-rel:hover { transform: translateY(-3px); border-color: var(--kk-accent); color: var(--kk-text) !important; }
.ogkk-rel i { font-size: 1.2rem; color: var(--kk-accent); width: 24px; text-align: center; }
.ogkk-rel b { display: block; font-weight: 800; }
.ogkk-rel small { color: var(--kk-muted); font-size: .8rem; }

.ogkk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ogkk-noscript { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; padding: 20px; text-align: center; }

/* ============ Duyarlılık ============ */
@media (max-width: 860px) {
    .ogkk-menu-grid { grid-template-columns: 1fr; gap: 6px; }
    .ogkk-cr-grid { grid-template-columns: 1fr; }
    .ogkk-cr-left { align-items: stretch; }
    .ogkk-cr-preview { max-width: 200px; margin: 0 auto 6px; }
    .ogkk-cr-options { max-height: none; }
}
/* Dar ekranda menü sahneye sığmaz: Katman akışa girer, sahne uzar, tuval arkada kırpılarak kalır */
@media (max-width: 720px) {
    .ogkk-stage.has-overlay { aspect-ratio: auto; }
    .ogkk-stage.has-overlay .ogkk-canvas { position: absolute; inset: 0; object-fit: cover; }
    .ogkk-stage.has-overlay .ogkk-overlay:not([hidden]) { position: relative; min-height: 300px; background: var(--kk-overlay-solid); }
    .ogkk-overlay { padding: 14px; }
    .ogkk-tb-info { display: none; }
    .ogkk-res-score b { font-size: 1.7rem; min-width: 44px; }
}
@media (max-width: 560px) {
    .ogkk-chars { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .ogkk-cup-rounds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .ogkk-tbtn { width: 54px; height: 52px; }
    .ogkk-tgroup { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .ogkk-brand-ball { animation: none; }
    .ogkk-page * { transition: none !important; }
}

/* ============ Özel lig sayfaları (ogkl-) ============ */
.ogkl { max-width: 1040px; }
.ogkl-h1 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 6px 0 6px; color: var(--kk-text); letter-spacing: .3px; }
.ogkl-h2 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.25rem; margin: 0 0 12px; color: var(--kk-text); display: flex; align-items: center; gap: 8px; }
.ogkl-h2 i { color: var(--kk-accent); }
.ogkl-sub { color: var(--kk-muted); margin: 0 0 4px; font-size: .95rem; }
.ogkl .ogkl-sub a, .ogkl .ogkl-members a, .ogkl .ogkl-pl a { color: var(--kk-accent-text) !important; font-weight: 700; text-decoration: none; }
.ogkl a.ogkk-btn { text-decoration: none; }
.ogkl a.ogkk-btn:not(.ogkk-btn-primary) { color: var(--kk-text) !important; }
.ogkl a.ogkk-btn-primary { color: #fff !important; }
.ogkl-section { margin-bottom: 28px; }
.ogkl-card { background: var(--kk-card); border: 1px solid var(--kk-border); border-radius: 18px; padding: 18px 20px; margin-bottom: 24px; box-shadow: var(--kk-shadow); }
.ogkl-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ogkl-cta p { color: var(--kk-muted); margin: 0; }
.ogkl-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ogkl-alert { padding: 10px 14px; border-radius: 12px; margin: 0 0 18px; font-weight: 700; font-size: .92rem; border: 1px solid var(--kk-border); }
.ogkl-alert.is-ok { color: #0b7a53; background: rgba(15, 157, 107, .1); border-color: rgba(15, 157, 107, .3); }
.ogkl-alert.is-err { color: #b42318; background: rgba(229, 72, 77, .1); border-color: rgba(229, 72, 77, .3); }
[data-theme="dark"] .ogkl-alert.is-ok { color: #5dcaa5; }
[data-theme="dark"] .ogkl-alert.is-err { color: #ff8d8f; }
.ogkl-empty { color: var(--kk-muted); margin: 0; }
.ogkl-hint { color: var(--kk-muted); font-size: .84rem; line-height: 1.5; margin: 8px 0 0; }

.ogkl-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; border: 1px solid var(--kk-border); background: var(--kk-chip); color: var(--kk-muted); }
.ogkl-pill.is-open { color: var(--kk-accent-text); border-color: rgba(108, 92, 231, .35); background: rgba(108, 92, 231, .12); }
.ogkl-pill.is-live { color: #0b7a53; border-color: rgba(15, 157, 107, .35); background: rgba(15, 157, 107, .12); }
[data-theme="dark"] .ogkl-pill.is-live { color: #5dcaa5; }

/* Liglerim */
.ogkl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ogkl a.ogkl-item { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--kk-card); border: 1px solid var(--kk-border); color: var(--kk-text) !important; text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.ogkl a.ogkl-item:hover { transform: translateY(-2px); border-color: var(--kk-accent); }
.ogkl-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ogkl-item-top b { font-size: 1.05rem; font-weight: 800; }
.ogkl-item-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--kk-muted); font-size: .85rem; }
.ogkl-item-meta b { color: var(--kk-text); }
.ogkl-pending { color: var(--kk-accent-text); font-weight: 700; }

/* Kurma / katılma formları */
.ogkl-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 32px; }
.ogkl-grid .ogkl-card { margin-bottom: 0; }
.ogkl-form { display: flex; flex-direction: column; gap: 6px; }
.ogkl-form .ogkk-label { margin-top: 6px; }
.ogkl-form .ogkk-btn { align-self: flex-start; margin-top: 10px; }
.ogkl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ogkl-row fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ogkl-radio { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--kk-text); cursor: pointer; }
.ogkl-radio input { accent-color: var(--kk-accent); width: 16px; height: 16px; }
.ogkl-code-input { font-family: 'Oswald', sans-serif; letter-spacing: 3px; text-transform: uppercase; font-size: 1.15rem; }
.ogkl .ogkk-input[type="date"] { color-scheme: light; }
[data-theme="dark"] .ogkl .ogkk-input[type="date"] { color-scheme: dark; }

/* Lig sayfası */
.ogkl-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ogkl-champ { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 22px; border-radius: 16px; background: linear-gradient(135deg, rgba(242, 193, 78, .22), rgba(242, 193, 78, .06)); border: 1px solid rgba(242, 193, 78, .45); }
.ogkl-champ i { color: #c99a06; font-size: 1.4rem; }
[data-theme="dark"] .ogkl-champ i { color: #f2c14e; }
.ogkl-champ span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--kk-muted); }
.ogkl-champ b { font-family: 'Oswald', sans-serif; font-size: 1.25rem; color: var(--kk-text); }
.ogkl-invite p { color: var(--kk-muted); margin: 0 0 10px; }
.ogkl-code { font-family: 'Oswald', sans-serif; letter-spacing: 2px; color: var(--kk-text); }
.ogkl-copy { display: flex; gap: 8px; flex-wrap: wrap; }
.ogkl-copy .ogkk-input { flex: 1 1 260px; min-width: 0; }
.ogkl-owner { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ogkl-owner form { margin: 0; }

.ogkl-matches { display: flex; flex-direction: column; gap: 8px; }
.ogkl-match { display: grid; grid-template-columns: 84px minmax(0, 1fr) 70px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--kk-card); border: 1px solid var(--kk-border); }
.ogkl-match.is-played { opacity: .85; }
.ogkl-match.is-waiting { border-color: #0f9d6b; box-shadow: 0 0 0 3px rgba(15, 157, 107, .15); }
.ogkl-md { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--kk-muted); }
.ogkl-team { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; color: var(--kk-text); }
.ogkl-team span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogkl-team.is-away { justify-content: flex-end; text-align: right; }
.ogkl-score { font-family: 'Oswald', sans-serif; font-size: 1.15rem; text-align: center; color: var(--kk-text); }
.ogkl-play { padding: 8px 16px; font-size: 15px; }
.ogkl-wait { grid-column: 1 / -1; font-size: .84rem; font-weight: 800; color: #0b7a53; display: flex; align-items: center; gap: 6px; }
.ogkl-wait i { font-size: 8px; animation: ogkl-blink 1.2s ease-in-out infinite; }
[data-theme="dark"] .ogkl-wait { color: #5dcaa5; }
@keyframes ogkl-blink { 50% { opacity: .25; } }
.ogkl-wait[hidden] { display: none; }

.ogkl-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--kk-chip); }
.ogkl-av-i { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: #fff; background: var(--kk-accent); }
.ogkl-pl { display: inline-flex; align-items: center; gap: 8px; }
.ogkl-table { min-width: 560px; }
.ogkl-table td.num, .ogkl-table thead th { text-align: center; }
.ogkl-table thead th:nth-child(2) { text-align: left; }
.ogkl-table tbody th { font-weight: 600; }
.ogkl-table tr.is-me th, .ogkl-table tr.is-me td { background: rgba(108, 92, 231, .1); }

.ogkl-members { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ogkl-members li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--kk-card); border: 1px solid var(--kk-border); }
.ogkl-members .ogkl-av { width: 32px; height: 32px; }
.ogkl-tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; color: var(--kk-accent-text); background: rgba(108, 92, 231, .12); padding: 2px 8px; border-radius: 999px; }
.ogkl-inline { margin: 0 0 0 auto; }
.ogkl-linkbtn { border: 0; background: transparent; cursor: pointer; font: 700 13px 'Outfit', sans-serif; color: var(--kk-accent-text); padding: 4px 0; display: inline-flex; align-items: center; gap: 6px; }
.ogkl-linkbtn.is-danger { color: #c4322f; }
[data-theme="dark"] .ogkl-linkbtn.is-danger { color: #ff8d8f; }
.ogkl-danger { border-top: 1px solid var(--kk-border); padding-top: 14px; }
.ogkl-danger form { margin: 0; }

.ogkl-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ogkl-day { background: var(--kk-card); border: 1px solid var(--kk-border); border-radius: 14px; padding: 4px 14px; }
.ogkl-day summary { cursor: pointer; padding: 8px 0; font-weight: 800; color: var(--kk-text); display: flex; justify-content: space-between; gap: 8px; }
.ogkl-day summary span { font-weight: 600; color: var(--kk-muted); font-size: .85rem; }
.ogkl-day ul { list-style: none; margin: 0 0 8px; padding: 0; }
.ogkl-day li { display: grid; grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--kk-border); font-size: .9rem; color: var(--kk-text); }
.ogkl-day li .h { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ogkl-day li .a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ogkl-day li b { text-align: center; font-family: 'Oswald', sans-serif; }
.ogkl-day li.is-mine { font-weight: 800; }

/* Davet */
.ogkl-join { max-width: 560px; margin: 10px auto 30px; text-align: center; }
.ogkl-join-ico { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, #6c5ce7, #a78bfa); margin-bottom: 8px; }
.ogkl-join form { margin: 14px 0 0; }
.ogkl-join .ogkl-actions { justify-content: center; margin-top: 12px; }
.ogkl-facts { list-style: none; margin: 12px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; color: var(--kk-text); font-size: .95rem; }
.ogkl-facts i { color: var(--kk-accent); width: 20px; }

@media (max-width: 760px) {
    .ogkl-grid { grid-template-columns: 1fr; }
    .ogkl-row { grid-template-columns: 1fr; }
    .ogkl-match { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); }
    .ogkl-md { grid-column: 1 / -1; }
    .ogkl-play { grid-column: 1 / -1; justify-content: center; }
}

/* ============ Çevrim içi: menü kartı ve oda katmanı ============ */
.ogkk-on-card { background: var(--kk-chip); border: 1px solid var(--kk-border); border-radius: 14px; padding: 12px 14px; }
.ogkk-on-title { display: flex; align-items: center; gap: 8px; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .4px; text-transform: uppercase; }
.ogkk-on-title i { color: var(--kk-accent); }
.ogkk-on-card p { color: var(--kk-muted); font-size: .86rem; line-height: 1.5; margin: 6px 0 10px; }
.ogkk-on-join { display: flex; gap: 8px; }
.ogkk-on-join .ogkk-input { width: 110px; flex: 0 0 auto; font-family: 'Oswald', sans-serif; font-size: 1.1rem; letter-spacing: 3px; text-transform: uppercase; text-align: center; }
.ogkk-page .ogkk-on-league { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; font-size: 13px; color: var(--kk-accent-text) !important; text-decoration: none; }
.ogkk-page .ogkk-on-league:hover { text-decoration: underline; }

.ogkk-online { width: min(520px, 100%); }
.ogkk-online .ogkk-brand { justify-content: center; gap: 10px; }
.ogkk-online .ogkk-brand i { color: var(--kk-accent); font-size: .8em; }
.ogkk-on-sub { color: var(--kk-muted); margin: 0 0 8px; font-weight: 600; }
.ogkk-on-codebox { margin: 0 0 6px; display: flex; align-items: center; justify-content: center; gap: 4px 14px; flex-wrap: wrap; }
.ogkk-on-codebox .ogkk-label { margin: 0; width: 100%; }
.ogkk-on-code { font-family: 'Oswald', sans-serif; font-size: 2.1rem; letter-spacing: 8px; line-height: 1.1; color: var(--kk-text); }
.ogkk-on-codebox .ogkk-btn-row { margin-top: 0; gap: 6px; }
.ogkk-on-codebox .ogkk-btn { padding: 7px 12px; font-size: 13px; }
.ogkk-on-players { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 4px 0 6px; }
.ogkk-on-pl { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 8px; border-radius: 14px; background: var(--kk-chip); border: 2px solid transparent; min-width: 0; }
.ogkk-on-pl canvas { width: 52px; height: 52px; }
.ogkk-on-pl b { font-weight: 800; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogkk-on-pl small { color: var(--kk-muted); font-size: .75rem; }
.ogkk-on-pl.is-ready { border-color: #0f9d6b; }
.ogkk-on-pl.is-empty { border-style: dashed; border-color: var(--kk-border); }
.ogkk-on-q { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--kk-muted); }
.ogkk-on-state { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--kk-muted); margin-top: 2px; }
.ogkk-on-pl.is-ready .ogkk-on-state { color: #0b7a53; }
[data-theme="dark"] .ogkk-on-pl.is-ready .ogkk-on-state { color: #5dcaa5; }
.ogkk-on-vs { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--kk-muted); }
.ogkk-on-status { min-height: 1.4em; color: var(--kk-muted); font-size: .88rem; margin: 2px 0 0; }
.ogkk-online .ogkk-btn-row { margin-top: 10px; }
.ogkk-on-ping { margin: 4px 0 0; font-size: .8rem; color: var(--kk-muted); }
.ogkk-on-ping[hidden] { display: none; }
.ogkk-on-ping b { color: var(--kk-text); }
.ogkk-on-ping[data-q="good"] i { color: #0f9d6b; }
.ogkk-on-ping[data-q="ok"] i { color: #c99a06; }
.ogkk-on-ping[data-q="bad"] i { color: var(--kk-red); }
[data-theme="dark"] .ogkk-on-ping[data-q="good"] i { color: #5dcaa5; }
[data-theme="dark"] .ogkk-on-ping[data-q="ok"] i { color: #f2c14e; }
.ogkk-btn.is-on { background: linear-gradient(135deg, #0f9d6b, #34c38f); box-shadow: 0 10px 24px rgba(15, 157, 107, .3); }