/* ==========================================================================
   SolidPing Monitor - auth ekrani
   SolidPing'in auth-split-layout + aurora-panel tasariminin 1:1 portu.
   Renkler, olculer, golgeler ve tipografi dogrudan SolidPing'in
   web/dash0/src/index.css design token'larindan alindi.
   Font: Inter Variable (degisken, 100-900) - yerel olarak sunulur.
   ========================================================================== */

/* --- Inter Variable (self-hosted) --- */
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Design token'lar (SolidPing index.css) --- */
:root {
    --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --primary: oklch(0.55 0.22 262);
    --primary-foreground: oklch(0.99 0 0);
    --primary-fill: oklch(0.53 0.2 262);
    --primary-fill-foreground: oklch(1 0 0);
    --primary-gradient: linear-gradient(135deg, oklch(0.55 0.17 245) 0%, oklch(0.53 0.21 266) 50%, oklch(0.47 0.2 270) 100%);

    --brand: oklch(0.58 0.22 5);
    --brand-foreground: oklch(0.98 0.01 5);
    --brand-muted: oklch(0.92 0.05 5);

    --accent: oklch(0.95 0.03 255);
    --accent-foreground: oklch(0.42 0.18 262);

    --background: oklch(0.98 0.006 250);
    --foreground: oklch(0.18 0.03 258);

    --card: oklch(1 0 0);
    --card-foreground: oklch(0.18 0.03 258);
    --control: oklch(1 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.18 0.03 258);

    --secondary: oklch(0.962 0.01 255);
    --secondary-foreground: oklch(0.26 0.04 258);
    --muted: oklch(0.962 0.01 255);
    --muted-foreground: oklch(0.5 0.03 255);

    --border: oklch(0.915 0.012 255);
    --input: oklch(0.87 0.015 255);
    --ring: oklch(0.55 0.22 262);

    --sidebar: oklch(0.18 0.05 263);
    --sidebar-gradient: linear-gradient(180deg, oklch(0.21 0.055 262), oklch(0.145 0.04 265));
    --sidebar-foreground: oklch(0.92 0.02 255);
    --sidebar-muted-foreground: oklch(0.66 0.04 255);
    --sidebar-primary: oklch(0.75 0.14 220);
    --sidebar-accent: oklch(1 0 0 / 0.05);
    --sidebar-accent-foreground: oklch(0.98 0.01 255);
    --sidebar-border: oklch(0.27 0.05 262);
    --sidebar-ring: oklch(0.72 0.15 252);

    --aurora-cyan: oklch(0.7 0.15 225);
    --aurora-accent: oklch(0.85 0.12 220);

    --destructive: oklch(0.57 0.22 25);
    --destructive-foreground: oklch(1 0 0);

    --chart-5: oklch(0.55 0.2 285);

    --radius: 0.625rem;
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --shadow-card: 0 1px 2px 0 rgba(15, 23, 42, 0.05);

    --page-glow: radial-gradient(45% 200px at 12% 0, oklch(0.7 0.15 225 / 0.13), transparent 70%),
        radial-gradient(40% 180px at 65% 0, oklch(0.5 0.23 275 / 0.09), transparent 70%);
}

.dark {
    --primary: oklch(0.72 0.15 252);
    --primary-foreground: oklch(0.16 0.03 262);
    --brand: oklch(0.65 0.2 5);
    --brand-foreground: oklch(0.15 0.02 5);
    --brand-muted: oklch(0.3 0.08 5);
    --accent: oklch(0.3 0.07 260);
    --accent-foreground: oklch(0.92 0.05 255);
    --background: oklch(0.145 0.02 262);
    --foreground: oklch(0.96 0.01 255);
    --card: oklch(0.185 0.026 262);
    --card-foreground: oklch(0.96 0.01 255);
    --control: oklch(0.165 0.024 262);
    --popover: oklch(0.185 0.026 262);
    --popover-foreground: oklch(0.96 0.01 255);
    --secondary: oklch(0.225 0.03 262);
    --secondary-foreground: oklch(0.95 0.01 250);
    --muted: oklch(0.225 0.03 262);
    --muted-foreground: oklch(0.7 0.03 255);
    --border: oklch(0.28 0.035 262);
    --input: oklch(0.33 0.04 262);
    --ring: oklch(0.72 0.15 252);
    --destructive: oklch(0.65 0.2 25);
    --destructive-foreground: oklch(1 0 0);
    --chart-5: oklch(0.65 0.17 285);
    --primary-fill: oklch(0.55 0.2 262);
    --primary-fill-foreground: oklch(1 0 0);
    --primary-gradient: linear-gradient(135deg, oklch(0.55 0.17 245) 0%, oklch(0.53 0.21 266) 50%, oklch(0.47 0.2 270) 100%);
    --page-glow: radial-gradient(45% 220px at 12% 0, oklch(0.7 0.15 225 / 0.2), transparent 70%),
        radial-gradient(40% 200px at 65% 0, oklch(0.5 0.23 275 / 0.15), transparent 70%);
}

/* --- base --- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    background: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--primary); }

/* ==========================================================================
   AuthSplitLayout: grid-cols-1 / lg:grid-cols-2, min-h-dvh
   ========================================================================== */
.auth-split {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--background);
}
@media (min-width: 1024px) {
    .auth-split { grid-template-columns: 1fr 1fr; }
}

/* --- AuroraPanel --- */
.aurora-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    display: none;
    flex-direction: column;
    padding: 3rem;
    background-color: var(--sidebar);
    background-image: var(--sidebar-gradient);
}
@media (min-width: 1024px) {
    .aurora-panel { display: flex; }
}
@media (min-width: 1280px) {
    .aurora-panel { padding: 4rem; }
}
.aurora-panel .wash {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom right, oklch(0.7 0.15 225 / .25), transparent, oklch(0.55 0.2 285 / .25));
}
.aurora-panel .blob { position: absolute; border-radius: 9999px; pointer-events: none; }
.aurora-panel .b1 { left: -25%; top: -25%; width: 70%; height: 70%; background: oklch(0.7 0.15 225 / .40); filter: blur(120px); }
.aurora-panel .b2 { bottom: -25%; right: -10%; width: 65%; height: 65%; background: oklch(0.55 0.22 262 / .40); filter: blur(120px); }
.aurora-panel .b3 { right: 0; top: 15%; width: 45%; height: 45%; background: oklch(0.55 0.2 285 / .30); filter: blur(100px); }
.aurora-panel .aurora-inner {
    position: relative; z-index: 10;
    display: flex; height: 100%; width: 100%; flex-direction: column;
}
.aurora-panel .aurora-glass {
    max-width: 28rem;
    margin: 0 auto;
    width: 100%;
    display: flex; flex: 1; flex-direction: column; justify-content: center;
}
.glass {
    background-color: color-mix(in oklab, white 8%, transparent);
    border: 1px solid color-mix(in oklab, white 18%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 1.5rem;
    padding: 2rem;
}
.glass h2 {
    font-size: 1.875rem; font-weight: 700; line-height: 1.25; letter-spacing: -.025em;
    margin: 0 0 1rem; color: #fff;
}
.glass h2 em { font-style: normal; color: var(--aurora-accent); }
.glass p { color: rgba(255, 255, 255, .7); margin: 0 0 1.5rem; font-size: .95rem; }
.glass ul { list-style: none; padding: 0; margin: 0; }
.glass li {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem 0; color: rgba(255, 255, 255, .9); font-size: .875rem;
}
.glass li svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--aurora-accent); }
.aurora-panel .copyright { font-size: .75rem; color: rgba(255, 255, 255, .5); }

/* --- Logo (SolidPing Logo bileseni: ikon + wordmark) --- */
.logo { display: inline-flex; align-items: center; gap: .5rem; }
.logo img { display: block; }
.logo .wordmark { font-weight: 600; letter-spacing: -.025em; }
.aurora-panel .logo .wordmark { color: #fff; }

/* --- Form sutunu --- */
.auth-form-col {
    display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.5rem; padding: 1rem;
    background-image: var(--page-glow);
}
.auth-mobile-wordmark { display: flex; justify-content: center; }
@media (min-width: 1024px) { .auth-mobile-wordmark { display: none; } }
.auth-cardwrap { position: relative; width: 100%; max-width: 28rem; }

/* --- Tools (dil + tema) kartin sag ust kosesinde --- */
.auth-tools {
    position: absolute; right: .5rem; top: .5rem; z-index: 20;
    display: flex; align-items: center; gap: .25rem;
}
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border: 0; border-radius: var(--radius-md);
    background: transparent; color: var(--muted-foreground); cursor: pointer;
    transition: color .15s, background-color .15s;
}
.icon-btn:hover { background: var(--accent); color: var(--accent-foreground); }
.icon-btn svg { width: 1rem; height: 1rem; }
.lang-switch { display: flex; gap: .125rem; padding: .125rem; border-radius: var(--radius-md); background: var(--accent); }
.lang-switch button {
    border: 0; background: transparent; border-radius: calc(var(--radius-md) - 1px);
    font: inherit; font-size: .75rem; font-weight: 500; color: var(--accent-foreground);
    padding: .25rem .5rem; cursor: pointer;
}
.lang-switch button.active { background: var(--card); color: var(--foreground); }

/* --- Card (card.tsx) --- */
.card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: var(--shadow-card);
    --card-pad: 1rem;
}
@media (min-width: 640px) { .card { --card-pad: 1.5rem; } }
.dark .card {
    border-color: rgba(255, 255, 255, .1);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .04), transparent);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .06);
}
.card-header { display: flex; flex-direction: column; gap: .375rem; padding: var(--card-pad); }
.card-content { padding: var(--card-pad); padding-top: 0; }
.card-title { font-size: 1.25rem; font-weight: 600; line-height: 1; letter-spacing: -.025em; margin: 0; }
.card-desc { font-size: .875rem; color: var(--muted-foreground); }
.card-footer { display: flex; align-items: center; padding: var(--card-pad); padding-top: 0; }

/* Auth sayfalarinda kartin ustunde 4px marka (kirmizi) seridi — button.tsx yorumu.
   .dark .card da border-color ile hepsini yeniden yazdigi icin marka rengi
   burada daha spesifik bir seciciyle geri getiriliyor. */
.card.card-brand { border-top: 4px solid var(--brand); }

/* --- Input (input.tsx) --- */
.input {
    display: flex; height: 2.25rem; width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--input);
    background: var(--control);
    padding: .25rem .75rem;
    font-size: 1rem; line-height: 1.5rem;
    color: var(--foreground);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    transition: color .15s, border-color .15s, box-shadow .15s;
}
@media (min-width: 768px) { .input { font-size: .875rem; } }
.input::placeholder { color: var(--muted-foreground); }
.input:focus-visible {
    border-color: var(--ring);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent);
}
.input:disabled { cursor: not-allowed; opacity: .5; }

/* --- Label (label.tsx) --- */
.label {
    font-size: .875rem; font-weight: 500; line-height: 1;
    display: inline-flex; align-items: center; gap: .5rem;
    cursor: pointer;
}

/* --- PasswordInput --- */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 2.5rem; }
.pw-toggle {
    position: absolute; inset-block: 0; right: 0;
    display: flex; height: 100%; width: 2.5rem;
    align-items: center; justify-content: center;
    border: 0; background: transparent; border-radius: var(--radius-md);
    color: var(--muted-foreground); cursor: pointer;
    transition: color .15s;
}
.pw-toggle:hover { color: var(--foreground); }
.pw-toggle svg { width: 1rem; height: 1rem; }

/* --- Button (button.tsx) --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    white-space: nowrap; border-radius: var(--radius-md);
    font-size: .875rem; font-weight: 500;
    height: 2.25rem; padding: .5rem 1rem;
    border: 1px solid transparent; cursor: pointer;
    transition: color .15s, background-color .15s, background-position .3s;
}
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--background);
}
.btn:disabled { pointer-events: none; opacity: .5; }
.btn svg { width: 1rem; height: 1rem; flex: none; }
.btn-brand { background-color: var(--brand); color: var(--brand-foreground); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); }
.btn-brand:hover { background-color: color-mix(in oklab, var(--brand) 90%, transparent); }
.btn-outline { border-color: var(--input); background: var(--control); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); }
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-block { width: 100%; }
.btn-lg { height: 2.5rem; padding-inline: 2rem; }

/* --- Alert (alert.tsx) --- */
.alert {
    display: grid; grid-template-columns: 1rem 1fr; gap: .5rem;
    padding: 1rem; border-radius: var(--radius-lg);
    font-size: .875rem;
    border: 1px solid var(--border);
    background: var(--card); color: var(--card-foreground);
}
.alert svg { width: 1rem; height: 1rem; margin-top: .125rem; }
.alert-desc { grid-column: 2; grid-column-start: 2; display: grid; justify-items: start; gap: .25rem; font-size: .875rem; }
.alert-destructive {
    border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    background: color-mix(in oklab, var(--destructive) 8%, transparent);
    color: var(--destructive);
}
.alert-destructive svg { color: var(--destructive); }

/* --- Form yardimcilari --- */
.form-stack { display: grid; gap: .75rem; }
.form-field { display: grid; gap: .375rem; }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.hint { font-size: .75rem; color: var(--muted-foreground); }
.divider { display: flex; align-items: center; gap: .75rem; margin: .25rem 0; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.divider span { font-size: .75rem; color: var(--muted-foreground); }
.sep { text-align: center; font-size: .8125rem; color: var(--muted-foreground); margin: .25rem 0; }
.center { text-align: center; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-2 { gap: .5rem; }
.stack-sm { display: grid; gap: .5rem; }
.stack-md { display: grid; gap: .75rem; }
.text-sm { font-size: .875rem; }
.text-muted { color: var(--muted-foreground); }
.font-medium { font-weight: 500; }