/* ====== THEME SWITCHER STYLES - use .theme-toggle (compatible with old #themeToggle too) ====== */
.theme-toggle,
#themeToggle {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 40px;
    padding: 0;
    gap: 0;
    border-radius: 999px;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    transition: background .22s ease, box-shadow .22s ease, transform .12s ease;
    border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
    box-sizing: border-box;
    min-width: 44px;
    min-height: 36px;
    cursor: pointer;
    overflow: visible;
}

    /* focus */
    .theme-toggle:focus-visible,
    #themeToggle:focus-visible {
        outline: 3px solid var(--ring);
        outline-offset: 3px;
    }

    /* Ensure inline display:none on the moon icon doesn't break us */
    .theme-toggle svg,
    #themeToggle svg {
        display: block !important;
    }

    /* Both svgs are absolutely centered and stacked */
    .theme-toggle svg,
    #themeToggle svg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(1);
        width: 18px;
        height: 18px;
        pointer-events: none;
        opacity: 0;
        transition: opacity .22s ease, transform .28s ease;
        color: var(--primary-600); /* stroke uses currentColor */
    }

    /* icon selector compatibility:
                                   - prefer class names used in mobile/offcanvas: .icon-sun / .icon-moon
                                   - fallback to legacy ids: #iconSun / #iconMoon
                                */
    .theme-toggle[aria-pressed="false"] .icon-sun,
    #themeToggle[aria-pressed="false"] #iconSun,
    .theme-toggle[aria-pressed="false"] svg.icon-sun,
    #themeToggle[aria-pressed="false"] svg#iconSun {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Dark state: moon visible */
    .theme-toggle[aria-pressed="true"] .icon-moon,
    #themeToggle[aria-pressed="true"] #iconMoon,
    .theme-toggle[aria-pressed="true"] svg.icon-moon,
    #themeToggle[aria-pressed="true"] svg#iconMoon {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.02) rotate(10deg);
    }

    /* subtle off-state positions for smooth motion */
    .theme-toggle[aria-pressed="false"] .icon-moon,
    #themeToggle[aria-pressed="false"] #iconMoon,
    .theme-toggle[aria-pressed="false"] svg.icon-moon,
    #themeToggle[aria-pressed="false"] svg#iconMoon {
        transform: translate(-50%, -50%) scale(.85) rotate(-12deg);
    }

    .theme-toggle[aria-pressed="true"] .icon-sun,
    #themeToggle[aria-pressed="true"] #iconSun,
    .theme-toggle[aria-pressed="true"] svg.icon-sun,
    #themeToggle[aria-pressed="true"] svg#iconSun {
        transform: translate(-50%, -50%) scale(.85) rotate(-6deg);
    }

    /* hover polish */
    .theme-toggle:hover,
    #themeToggle:hover {
        transform: translateY(-1px);
    }

        .theme-toggle:hover svg,
        #themeToggle:hover svg {
            transform: translate(-50%, -50%) scale(1.06);
        }

    /* pressed (dark) background + visual style */
    .theme-toggle[aria-pressed="true"],
    #themeToggle[aria-pressed="true"] {
        background: linear-gradient(90deg, color-mix(in srgb, var(--primary-500) 18%, transparent), color-mix(in srgb, var(--primary-400) 10%, transparent) );
        color: #fff;
        border-color: transparent;
        box-shadow: 0 8px 28px rgba(51,102,255,0.12);
    }

        /* ensure white icons when active (stroke is currentColor) */
        .theme-toggle[aria-pressed="true"] svg,
        #themeToggle[aria-pressed="true"] svg {
            color: #fff;
        }

/* small screens */
@media (max-width: 575px) {
    .theme-toggle, #themeToggle {
        width: 40px;
        height: 36px;
        padding: 0;
        min-width: 40px;
    }
}

/* optional: smaller variants (if you want different sizes in offcanvas / mobile)
                                   You can add class .theme-toggle--sm for smaller icon sizes.
                                */
.theme-toggle.theme-toggle--sm,
#themeToggle.theme-toggle--sm {
    width: 38px;
    height: 34px;
    min-width: 36px;
}

    .theme-toggle.theme-toggle--sm svg,
    #themeToggle.theme-toggle--sm svg {
        width: 14px;
        height: 14px;
    }

/* keep visually-hidden text accessible but non-visible */
.theme-toggle .toggle-text,
#themeToggleText {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}



/* sade, tek renkli auth-link (var(--accent-700) kullanılır) */
.auth-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .56rem 1rem;
    font-weight: 600;
    font-size: .95rem;
    color: #fff;
    background: var(--accent-700);
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 6px 18px rgba(22,160,133,0.14); /* #16a085 -> rgb(22,160,133) */
    position: relative;
    overflow: visible;
    transition: transform var(--motion-slow) cubic-bezier(.22,1,.36,1), box-shadow var(--motion-slow), filter var(--motion-slow);
}

    /* hover / active */
    .auth-link:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgba(22,160,133,0.18);
        filter: brightness(1.04); /* tek renk korunur, biraz parlatma hissi verir */
    }

    .auth-link:active {
        transform: translateY(0);
        box-shadow: 0 6px 14px rgba(22,160,133,0.12);
    }

    /* erişilebilir odak hali */
    .auth-link:focus-visible {
        outline: 3px solid rgba(22,160,133,0.22);
        outline-offset: 3px;
    }

/* küçük ekran inceltmesi */
@media (max-width: 575px) {
    .auth-link {
        padding: .45rem .8rem;
        font-size: .9rem;
    }
}



.btn-primary-custom {
    border-radius: 12px;
    padding: .7rem 1.05rem;
    font-weight: 700;
    background: var(--grad-primary);
    border: none;
    color: var(--btn-foreground);
    transition: transform .12s ease, box-shadow .18s ease;
    box-shadow: 0 10px 28px rgba(51,102,255,0.08);
}

    /* hover efekti: hafif yukarı ve primary renginde gölge */
    .btn-primary-custom:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px rgba(51,102,255,0.18);
    }

    /* tıklandığında daha küçük gölge */
    .btn-primary-custom:active {
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(51,102,255,0.12);
    }

    /* odak erişilebilirliği */
    .btn-primary-custom:focus-visible {
        outline: 3px solid rgba(51,102,255,0.12);
        outline-offset: 3px;
    }