/* ==========================================================================
   Groyt — Komut önizlemeleri r11 (10 Ekim 2026): Milyoner tahtası, meslek
   seçici, borsa tablosu. Kompakt, koyu Discord teması; emoji dışında görsel yok.
   ========================================================================== */
.r11-mil { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; padding: 10px; border-radius: 12px; background: radial-gradient(120% 140% at 50% 0%, #142057 0%, #0b1030 55%, #070a1e 100%); border: 1px solid rgba(255, 193, 7, 0.25); font-size: 11.5px; }
.r11-mil-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #b9c3ff; font-size: 10.5px; }
.r11-mil-time { flex: 0 0 90px; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.r11-mil-time i { display: block; height: 100%; width: calc(var(--w, 0.5) * 100%); background: linear-gradient(90deg, #22c55e, #ffc107); }
.r11-mil-q { grid-column: 1; padding: 9px 12px; border-radius: 999px; background: #0a0f2e; border: 1.5px solid #ffc107; color: #fff; font-weight: 600; text-align: center; line-height: 1.35; }
.r11-mil-opts { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.r11-mil-opts span { padding: 7px 10px; border-radius: 999px; background: #0a0f2e; border: 1.5px solid #4f6bff; color: #e8ecff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r11-mil-opts span b { color: #ffc107; margin-right: 3px; }
.r11-mil-opts span.is-cut { opacity: 0.35; text-decoration: line-through; border-color: #2a3360; }
.r11-mil-opts span.is-pick { background: #ff8a00; border-color: #ffb347; color: #1a1200; }
.r11-mil-opts span.is-right { background: #16a34a; border-color: #4ade80; color: #fff; }
.r11-mil-opts span.is-wrong { background: #b91c1c; border-color: #f87171; color: #fff; }
.r11-mil-jokers { grid-column: 1; display: flex; gap: 6px; flex-wrap: wrap; }
.r11-mil-jokers em { font-style: normal; font-size: 10.5px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255, 193, 7, 0.55); color: #ffe08a; }
.r11-mil-jokers em.is-used { text-decoration: line-through; opacity: 0.45; border-color: rgba(255, 255, 255, 0.2); color: #9aa4bd; }
.r11-ladder { grid-column: 2; grid-row: 2 / span 3; display: flex; flex-direction: column; justify-content: space-between; gap: 2px; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 193, 7, 0.25); font-size: 9.5px; }
.r11-ladder i { display: flex; justify-content: space-between; gap: 4px; padding: 1px 5px; border-radius: 6px; color: #8b94b8; font-style: normal; }
.r11-ladder i b { color: #6f7aa3; font-weight: 700; }
.r11-ladder i.is-safe, .r11-ladder i.is-safe b { color: #f4f6ff; }
.r11-ladder i.is-done, .r11-ladder i.is-done b { color: #ffd166; }
.r11-ladder i.is-cur { background: #ff8a00; color: #1a1200 !important; }
.r11-ladder i.is-cur b { color: #1a1200; }

.r11-select { margin-top: 8px; border-radius: 8px; background: #1e1f22; border: 1px solid #111214; overflow: hidden; font-size: 11.5px; }
.r11-select-head { display: flex; justify-content: space-between; padding: 7px 10px; color: #dbdee1; background: #2b2d31; }
.r11-select-head i { font-style: normal; color: #949ba4; }
.r11-select-row { display: flex; gap: 8px; padding: 6px 10px; color: #b5bac1; border-top: 1px solid rgba(255, 255, 255, 0.04); }
.r11-select-row b { font-weight: 500; color: #f2f3f5; }
.r11-select-row.is-lock { opacity: 0.55; }

.r11-mkt { display: grid; gap: 4px; margin: 6px 0; font-size: 11.5px; }
.r11-mkt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 5px 8px; border-radius: 7px; background: rgba(255, 255, 255, 0.04); color: #dbdee1; }
.r11-mkt-row b { color: #fff; font-variant-numeric: tabular-nums; }
.r11-mkt-row em { font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 999px; }
.r11-mkt-row em.is-up { background: rgba(34, 197, 94, 0.18); color: #86efac; }
.r11-mkt-row em.is-dn { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }

/* 15 Ekim 2026 — /tepkirol önizlemesinde tepki sayaçları (previews-r14.js). */
.r14-react { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.r14-react span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; background: rgba(88, 101, 242, 0.15); border: 1px solid rgba(88, 101, 242, 0.55); font-size: 14px; animation: r14Pop 0.5s ease both; }
.r14-react span:nth-child(2) { animation-delay: 0.15s; }
.r14-react span:nth-child(3) { animation-delay: 0.3s; }
@keyframes r14Pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

/* 🎡 /ekonomi çark önizlemesi (15 Ekim 2026): katmanlar, gövde döner. */
.r14-wheel { position: relative; width: min(220px, 100%); aspect-ratio: 1; margin-top: 10px; border-radius: 6px; overflow: hidden; }
.r14-wheel img { position: absolute; inset: 0; width: 100%; height: 100%; }
.r14-wheel-body { animation: r14WheelSpin 4.6s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
@keyframes r14WheelSpin { 0% { transform: rotate(0deg); } 70%, 100% { transform: rotate(1305deg); } }
@media (prefers-reduced-motion: reduce) { .r14-wheel-body { animation: none; transform: rotate(225deg); } }

/* 📦 Kasa açma şeridi (15 Ekim 2026) */
.r14-strip { display: grid; gap: 2px; margin-top: 8px; font-size: 20px; line-height: 1.2; letter-spacing: 1px; }
.r14-strip div:nth-child(2) { animation: r14StripSlide 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
@keyframes r14StripSlide { 0% { transform: translateX(60%); opacity: 0.4; } 60%, 100% { transform: translateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .r14-strip div:nth-child(2) { animation: none; } }