/* ============================================================
   THEME.CSS — Theme toggle button
   Bağımlılık: base.css (CSS değişkenleri)
   HTML: <button class="theme-toggle" type="button"
                 onclick="theme.toggleTheme()" aria-label="Tema değiştir">
           <span class="theme-toggle-label">Koyu tema</span>
         </button>
   ============================================================ */

.theme-toggle {
    position: relative;
    display: inline-grid;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    cursor: pointer;
    margin: 0;
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.theme-toggle:hover {
    color: var(--text);
    background: var(--surface-muted);
    border-color: var(--brand-border);
    box-shadow: 0 3px 8px rgba(15, 23, 42, .07);
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.theme-toggle::before {
    content: "";
    width: 17px;
    height: 17px;
    background: currentColor;
    -webkit-mask: var(--theme-toggle-sun) center / contain no-repeat;
    mask: var(--theme-toggle-sun) center / contain no-repeat;
}

[data-theme="dark"] .theme-toggle::before {
    -webkit-mask-image: var(--theme-toggle-moon);
    mask-image: var(--theme-toggle-moon);
}

[data-theme="dark"] .theme-toggle {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}

[data-theme="dark"] .theme-toggle:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .24);
}

.theme-toggle-icon,
.theme-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:root {
    --theme-toggle-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.65 17.65l1.42 1.42M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.65 6.35l1.42-1.42'/%3E%3C/svg%3E");
    --theme-toggle-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2 15.1A8.5 8.5 0 0 1 8.9 3.8 8.5 8.5 0 1 0 20.2 15.1Z'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle {
        transition: none;
    }
}