/* ══════════════════════════════════════════════════════════
   TURKUAZ IT — Subdomain Ticket Portal
   Auth Pages Styles (Login + Forgot Password)
   ══════════════════════════════════════════════════════════ */

/* Theme variables for standalone auth pages */
:root, [data-theme="light"] {
    --bodyBg: #f4f4f5;
    --cardBg: #ffffff;
    --cardBorder: #e4e4e7;
    --textColor: #18181b;
    --textMuted: #71717a;
    --inputBg: #fafafa;
    --inputBorder: #d4d4d8;
    --inputFocus: #6366f1;
    --inputFocusRing: rgba(99,102,241,.12);
    --btnPrimary: #6366f1;
    --btnPrimaryHover: #4f46e5;
    --linkColor: #6366f1;
    --headingColor: #09090b;
    --errorBg: #fef2f2;
    --errorText: #dc2626;
    --errorBorder: #fecaca;
    --successBg: #ecfdf5;
    --successText: #16a34a;
    --successBorder: #a7f3d0;
    --shadow: 0 4px 24px rgba(0,0,0,.06);
    --brandColor: #27272a;
    --brandSubColor: #a1a1aa;
    --toggleBg: #f4f4f5;
    --toggleBorder: #e4e4e7;
    --toggleHoverBg: #e4e4e7;
    --poweredColor: #a1a1aa;
    --poweredLinkColor: #6366f1;
    --shimmerHighlight: #2dd4bf;
    --shimmerAccent: #14b8a6;
}
[data-theme="dark"] {
    --bodyBg: #09090b;
    --cardBg: #18181b;
    --cardBorder: #27272a;
    --textColor: #e4e4e7;
    --textMuted: #a1a1aa;
    --inputBg: #27272a;
    --inputBorder: #3f3f46;
    --inputFocus: #818cf8;
    --inputFocusRing: rgba(129,140,248,.15);
    --btnPrimary: #6366f1;
    --btnPrimaryHover: #818cf8;
    --linkColor: #818cf8;
    --headingColor: #fafafa;
    --errorBg: #450a0a;
    --errorText: #fca5a5;
    --errorBorder: #991b1b;
    --successBg: #052e16;
    --successText: #86efac;
    --successBorder: #14532d;
    --shadow: 0 4px 24px rgba(0,0,0,.3);
    --brandColor: #d4d4d8;
    --brandSubColor: #71717a;
    --toggleBg: #27272a;
    --toggleBorder: #3f3f46;
    --toggleHoverBg: #3f3f46;
    --poweredColor: #52525b;
    --poweredLinkColor: #818cf8;
    --shimmerHighlight: #5eead4;
    --shimmerAccent: #2dd4bf;
}

/* ── Transitions ── */
html {
    transition: background-color .3s ease, color .3s ease;
}

/* Sayfa ilk yüklenirken transition'ı blokla — FOUC önlemi */
html.no-transition,
html.no-transition *,
html.no-transition *::before,
html.no-transition *::after {
    transition: none !important;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bodyBg);
    color: var(--textColor);
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    transition: background-color .3s ease, color .3s ease;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1rem;
    padding: env(safe-area-inset-top, 1rem) 1rem env(safe-area-inset-bottom, 1rem);
}

/* ── Auth Page (full-page flex container) ── */
.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    gap: 0;
}

/* Auth wrapper */
.auth-wrapper {
    width: 100%;
    max-width: 400px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Logo / Branding (like sidebar header) ── */
.auth-logo {
    text-align: center;
    margin-bottom: 1.75rem;
}

.auth-logo__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.auth-logo__name {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--brandColor);
    letter-spacing: .04em;
    background: linear-gradient(
        105deg,
        var(--brandColor) 0%,
        var(--brandColor) 30%,
        var(--shimmerAccent) 42%,
        var(--shimmerHighlight) 50%,
        var(--shimmerAccent) 58%,
        var(--brandColor) 70%,
        var(--brandColor) 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: authShimmer 3.5s ease-in-out infinite;
}

@keyframes authShimmer {
    0%, 100% { background-position: 100% 50%; }
    50% { background-position: 0% 50%; }
}

.auth-logo__sub {
    font-size: .65rem;
    font-weight: 500;
    color: var(--brandSubColor);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-top: 3px;
    transition: color .3s ease;
}

/* ── Card ── */
.auth-card {
    background: var(--cardBg);
    border: 1px solid var(--cardBorder);
    border-radius: 16px;
    padding: 1.75rem 1.5rem 2rem;
    box-shadow: var(--shadow);
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* Card header (title + theme toggle on same row) */
.auth-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--cardBorder);
    transition: border-color .3s ease;
}

.auth-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--headingColor);
    line-height: 34px;
    transition: color .3s ease;
}

/* ── Theme Toggle (inside card header) ── */
.auth-theme-toggle {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--toggleBg);
    border: 1px solid var(--toggleBorder);
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}

.auth-theme-toggle:hover {
    background: var(--toggleHoverBg);
    border-color: var(--inputBorder);
}

.auth-theme-toggle:active {
    transform: scale(.9);
}

.auth-theme-toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--textMuted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .3s ease;
}

.auth-theme-toggle__sun  { display: none; }
.auth-theme-toggle__moon { display: block; }
[data-theme="dark"] .auth-theme-toggle__sun  { display: block; }
[data-theme="dark"] .auth-theme-toggle__moon { display: none; }

/* Flash messages */
.flash {
    padding: .65rem .9rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: .85rem;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.flash--error { background: var(--errorBg); color: var(--errorText); border: 1px solid var(--errorBorder); }
.flash--success { background: var(--successBg); color: var(--successText); border: 1px solid var(--successBorder); }

/* Form */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--textColor);
    margin-bottom: 6px;
    transition: color .3s ease;
}

.form-input {
    width: 100%;
    padding: .7rem .85rem;
    font-size: 16px; /* >= 16px prevents iOS Safari zoom on focus */
    background: var(--inputBg);
    border: 1.5px solid var(--inputBorder);
    border-radius: 10px;
    color: var(--textColor);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s, box-shadow .2s, background-color .3s ease, color .3s ease;
}

.form-input:focus {
    border-color: var(--inputFocus);
    box-shadow: 0 0 0 3px var(--inputFocusRing);
}

.form-input::placeholder { color: var(--textMuted); }

.info-text { font-size: .85rem; color: var(--textMuted); line-height: 1.5; margin-bottom: 1.25rem; }

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.form-check {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    color: var(--textMuted);
    cursor: pointer;
}

.form-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--btnPrimary);
}

.form-link {
    font-size: .85rem;
    color: var(--linkColor);
    text-decoration: none;
    font-weight: 500;
}

.form-link:hover { text-decoration: underline; }

/* Buttons */
.btn {
    display: block;
    width: 100%;
    padding: .75rem;
    font-size: .95rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .2s, transform .15s;
}

.btn:active { transform: scale(.98); }

.btn-primary {
    background: var(--btnPrimary);
    color: #fff;
}

.btn-primary:hover { background: var(--btnPrimaryHover); }

/* Footer */
.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .85rem;
    color: var(--textMuted);
}

.auth-footer a {
    color: var(--linkColor);
    text-decoration: none;
    font-weight: 600;
}

.auth-footer a:hover { text-decoration: underline; }

/* ── Powered By Footer ── */
.auth-powered {
    padding: 1.5rem 0 1.25rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    flex-shrink: 0;
}

.auth-powered__text {
    font-size: .75rem;
    color: var(--poweredColor);
    letter-spacing: .02em;
    transition: color .3s ease;
}

.auth-powered__link {
    font-size: .75rem;
    font-weight: 700;
    color: var(--poweredLinkColor);
    text-decoration: none;
    letter-spacing: .02em;
    transition: color .2s ease;
}

.auth-powered__link:hover {
    text-decoration: underline;
}

/* ── Old theme-btn (kept for forgot-password compat) ── */
.theme-btn {
    position: fixed;
    top: 1rem;
    right: 1rem;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cardBg);
    border: 1px solid var(--cardBorder);
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
    transition: transform .3s;
}
.theme-btn:hover { transform: rotate(25deg); }
.theme-btn svg { width: 18px; height: 18px; stroke: var(--textColor); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn__sun  { display: none; }
.theme-btn__moon { display: block; }
[data-theme="dark"] .theme-btn__sun  { display: block; }
[data-theme="dark"] .theme-btn__moon { display: none; }

/* ── View Transition: Ripple theme reveal ── */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 9999; }
[data-transition="to-light"]::view-transition-old(root) { z-index: 9999; }
[data-transition="to-light"]::view-transition-new(root) { z-index: 1; }

[data-transition],
[data-transition] *,
[data-transition] *::before,
[data-transition] *::after {
    transition-duration: 0s !important;
}