/* ── Seçim Terazisi — CSS Custom Properties (light + dark) ── */

.st-scale-widget {
    --st-bg:          #ffffff;
    --st-bg-muted:    #f7f7f7;
    --st-bg-hover:    #f0f0f0;
    --st-border:      #e0e0e0;
    --st-text:        #1a1a1a;
    --st-text-muted:  #666666;
    --st-text-hint:   #999999;
    --st-chrome:      #cccccc;
    --st-chrome-dark: #bbbbbb;
}

/* Sistem dark mode */
@media (prefers-color-scheme: dark) {
    .st-scale-widget {
        --st-bg:          #1e1e1e;
        --st-bg-muted:    #2a2a2a;
        --st-bg-hover:    #333333;
        --st-border:      #3a3a3a;
        --st-text:        #f0f0f0;
        --st-text-muted:  #aaaaaa;
        --st-text-hint:   #666666;
        --st-chrome:      #555555;
        --st-chrome-dark: #444444;
    }
}

/* WordPress dark mode body class desteği */
.is-dark-theme .st-scale-widget,
.dark-mode .st-scale-widget,
[data-theme="dark"] .st-scale-widget,
body.dark .st-scale-widget {
    --st-bg:          #1e1e1e;
    --st-bg-muted:    #2a2a2a;
    --st-bg-hover:    #333333;
    --st-border:      #3a3a3a;
    --st-text:        #f0f0f0;
    --st-text-muted:  #aaaaaa;
    --st-text-hint:   #666666;
    --st-chrome:      #555555;
    --st-chrome-dark: #444444;
}

.st-scale-widget {
    max-width: 680px;
    width: 100%;
    margin: 24px auto;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    color: var(--st-text);
    box-sizing: border-box;
    contain: layout;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.st-scale-widget *,
.st-scale-widget *::before,
.st-scale-widget *::after {
    box-sizing: border-box;
    min-width: 0;
}

.st-scale-outer {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.st-title { font-size: 20px; font-weight: 600; text-align: center; margin: 0 0 20px; color: var(--st-text); }

.st-vs-row { display: flex; align-items: stretch; gap: 12px; margin-bottom: 16px; }

.st-side { flex: 1; background: var(--st-bg); border: 1px solid var(--st-border); border-radius: 10px; padding: 14px 16px; text-align: center; }

.st-side-name { font-size: 15px; font-weight: 600; color: var(--st-text); margin-bottom: 10px; }

.st-weights-visual { display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 72px; padding: 0; overflow: hidden; }

@keyframes st-wdrop {
    0%   { transform: translateY(-20px) scale(0.7); opacity: 0; }
    65%  { transform: translateY(2px) scale(1.05); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.st-weight-svg { display: block; animation: st-wdrop 0.38s cubic-bezier(.4,2,.5,1) both; transform-origin: bottom center; }

.st-vs-badge { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--st-text-hint); background: var(--st-bg-muted); border: 1px solid var(--st-border); border-radius: 50%; width: 40px; height: 40px; align-self: center; flex-shrink: 0; }

.st-scale-visual { position: relative; height: 80px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 12px; }

.st-beam { position: absolute; bottom: 24px; width: 320px; height: 4px; background: var(--st-chrome); border-radius: 2px; transform-origin: center bottom; transition: transform 0.55s cubic-bezier(.4,2,.5,1); }

.st-pan { position: absolute; bottom: 4px; width: 60px; height: 8px; background: var(--st-chrome); border-radius: 3px; transition: bottom 0.55s cubic-bezier(.4,2,.5,1); }
.st-pan-left  { left: 0; }
.st-pan-right { right: 0; }

.st-pivot-tri { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 24px solid var(--st-chrome-dark); }

.st-bar-wrap { margin-bottom: 20px; }
.st-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--st-bg-muted); }
.st-bar-l, .st-bar-r { transition: width 0.45s; }
.st-bar-pcts { display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; font-weight: 600; }

.st-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.st-leg-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--st-text-muted); }
.st-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.st-intro { font-size: 13px; color: var(--st-text-muted); margin: 0 0 10px; }

.st-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 20px; }

.st-topic-chip { background: var(--st-bg-muted); border: 1px solid var(--st-border); border-radius: 8px; padding: 8px 8px; transition: border-color 0.15s; }
.st-topic-chip:hover { border-color: var(--st-chrome); }

.st-chip-name { font-size: 13px; font-weight: 500; color: var(--st-text); margin-bottom: 8px; line-height: 1.3; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }

.st-imp-badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 20px; border: 1px solid; white-space: nowrap; flex-shrink: 0; }

.st-chip-btns { display: flex; gap: 4px; }

.st-chip-btn {
    flex: 1;
    min-width: 0;
    border: 1px solid #aaaaaa;
    background: #2c2c2c;
    border-radius: 4px;
    font-size: 10px;
    padding: 4px 2px;
    cursor: pointer;
    color: #f0f0f0;
    font-weight: 600;
    transition: background 0.12s, color 0.12s;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-chip-btn:hover { background: #3a3a3a; }
.st-chip-btn.st-active-l,
.st-chip-btn.st-active-r { color: #ffffff !important; border-color: transparent; }

.st-result { background: var(--st-bg-muted); border: 1px solid var(--st-border); border-radius: 10px; padding: 16px; text-align: center; margin-top: 8px; }
.st-result-label { font-size: 13px; color: var(--st-text-muted); margin-bottom: 6px; }
.st-result-winner { font-size: 22px; font-weight: 700; }

.st-error { color: #e24b4a; font-size: 14px; }

@media (max-width: 480px) {
    .st-topics { grid-template-columns: 1fr; }
    .st-legend { gap: 8px; }
    .st-topic-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
    .st-chip-name { flex: 1; margin-bottom: 0; font-size: 13px; }
    .st-chip-btns { flex-shrink: 0; gap: 6px; }
    .st-chip-btn  { min-width: 80px; font-size: 11px; padding: 6px 4px; }
}