/* =====================================================================
 *  Auth (Login / Register) — Calm, minimal light theme
 *  Same layout as before (login split + activity feed on the left,
 *  register centered) but with a clean, neutral palette: near-white
 *  background, white cards with a subtle border, monochrome accents.
 * ===================================================================== */

.auth-body {
    /* Palette — neutral light */
    --auth-bg:        #fafafa;
    --auth-surface:   #ffffff;
    --auth-text:      #18181b;
    --auth-text-soft: #27272a;
    --auth-muted:     #52525b;
    --auth-dim:       #71717a;
    --auth-dim-2:     #a1a1aa;

    --auth-border:        #e4e4e7;
    --auth-border-soft:   #f1f1f3;
    --auth-border-hover:  #d4d4d8;
    --auth-row-line:      #f4f4f5;

    --auth-input-bg:        #ffffff;
    --auth-input-bg-hover:  #fafafa;
    --auth-input-focus:     #18181b;
    --auth-focus-ring:      rgba(24, 24, 27, 0.08);

    --auth-accent:        #18181b;
    --auth-accent-hover:  #27272a;
    --auth-accent-soft:   #6366f1;

    --auth-shadow-card:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 10px 30px -8px rgba(0, 0, 0, 0.08);

    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--auth-bg);
    color: var(--auth-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    position: relative;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

/* Optional very soft warm highlight at the top — barely visible. */
.auth-body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 40% at 50% -10%,
            rgba(99, 102, 241, 0.05) 0%,
            transparent 70%);
}

/* Hide the dark-theme aurora markup (kept in HTML for compatibility). */
.auth-aurora { display: none !important; }

/* ---- Wrap ---- */
.auth-wrap {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px;
}

/* Auto-margin sticky-center pattern: brand pulls top-space and the
   footer pulls bottom-space when content is shorter than viewport;
   on tall content the auto-margins collapse and the page scrolls. */
.auth-wrap > .auth-brand  { margin-top: auto; }
.auth-wrap > .auth-footer { margin-bottom: auto; }

/* ---- Brand ---- */
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--auth-text);
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: -0.025em;
    margin-bottom: 28px;
    transition: transform .2s ease;
}
.auth-brand:hover { transform: translateY(-1px); }
.auth-brand__badge {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--auth-accent);
    color: #ffffff;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 4px 12px -4px rgba(0, 0, 0, 0.12);
    transition: background .2s ease, transform .2s ease;
}
.auth-brand:hover .auth-brand__badge {
    background: var(--auth-accent-hover);
}
.auth-brand__badge svg { display: block; position: relative; z-index: 1; }

/* ---- Split layout (login) ---- */
.auth-split {
    width: 100%;
    max-width: 1180px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "right"
        "left";
    gap: 22px;
}
.auth-split__left    { grid-area: left; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.auth-split__right   { grid-area: right; min-width: 0; display: flex; justify-content: center; }
.auth-split__divider { display: none; }

@media (min-width: 1024px) {
    .auth-split {
        grid-template-columns: 1.08fr 1px 0.92fr;
        grid-template-areas: "left divider right";
        gap: 0 56px;
        align-items: center;
    }
    .auth-split__left {
        align-items: flex-start;
        gap: 28px;
        justify-content: center;
    }
    .auth-split__right { justify-content: flex-end; }
    .auth-split__divider {
        display: block;
        grid-area: divider;
        width: 1px;
        height: 70%;
        justify-self: center;
        align-self: center;
        background: linear-gradient(180deg,
            transparent 0%,
            var(--auth-border) 18%,
            var(--auth-border) 82%,
            transparent 100%);
    }
}

/* ---- Hero (desktop only) ---- */
.auth-hero { display: none; }
@media (min-width: 1024px) {
    .auth-hero { display: block; max-width: 540px; animation: authCardIn .45s ease both; }
}
.auth-hero__title {
    margin: 0 0 16px;
    color: var(--auth-text);
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}
.auth-hero__title em {
    font-style: normal;
    color: var(--auth-accent-soft);
}
.auth-hero__sub {
    margin: 0;
    color: var(--auth-muted);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 500px;
}
.auth-hero__bento {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 520px;
}
.auth-hero__bento span {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--auth-border);
    background: var(--auth-surface);
    color: var(--auth-muted);
    font-size: 0.74rem;
    text-align: center;
    letter-spacing: 0.02em;
}
.auth-hero__bento span strong {
    display: block;
    color: var(--auth-text);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}

/* ---- Card ---- */
.auth-card {
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
    background: var(--auth-surface);
    border: 1px solid var(--auth-border);
    border-radius: 16px;
    padding: 34px 30px 28px;
    box-shadow: var(--auth-shadow-card);
    position: relative;
    overflow: hidden;
    animation: authCardIn .35s ease both;
}
.auth-card--wide { max-width: 480px; }

@keyframes authCardIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-card__head {
    text-align: center;
    margin: 4px 0 22px;
}
.auth-card__head h1 {
    margin: 0 0 6px;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--auth-text);
}
.auth-card__head p {
    margin: 0;
    color: var(--auth-muted);
    font-size: 0.93rem;
}

/* ---- Perks (register) ---- */
.auth-perks {
    list-style: none;
    padding: 14px 16px;
    margin: 0 0 22px;
    background: #fafafa;
    border: 1px solid var(--auth-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.auth-perks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.86rem;
    color: var(--auth-text-soft);
    line-height: 1.45;
}
.auth-perks svg {
    flex: none;
    color: #ffffff;
    background: var(--auth-accent);
    border-radius: 999px;
    padding: 4px;
    width: 20px;
    height: 20px;
}

/* ---- Alerts ---- */
.auth-card .alert {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.86rem;
    margin-bottom: 14px;
    border: 1px solid;
}
.auth-card .alert-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}
.auth-card .alert-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

/* ---- Form ---- */
.auth-form .form-group { margin-bottom: 14px; }
.auth-form .form-label {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--auth-text-soft);
    margin-bottom: 6px;
    display: inline-block;
    letter-spacing: -0.005em;
}

/* Inputs without icon wrapper (e.g. register: first/last name) */
.auth-form .form-input {
    box-sizing: border-box;
    width: 100%;
    padding: 11px 13px;
    font-size: 0.94rem;
    font-family: inherit;
    background: var(--auth-input-bg);
    border: 1px solid var(--auth-border);
    color: var(--auth-text);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-form .form-input::placeholder { color: var(--auth-dim-2); }
.auth-form .form-input:hover { border-color: var(--auth-border-hover); }
.auth-form .form-input:focus {
    outline: none;
    border-color: var(--auth-input-focus);
    background: var(--auth-input-bg);
    box-shadow: 0 0 0 3px var(--auth-focus-ring);
}
.auth-form .form-input:-webkit-autofill,
.auth-form .form-input:-webkit-autofill:hover,
.auth-form .form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--auth-text);
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    caret-color: var(--auth-text);
}

.auth-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Input-with-icon wrapper */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--auth-input-bg);
    border: 1px solid var(--auth-border);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.input-with-icon:hover { border-color: var(--auth-border-hover); }
.input-with-icon > svg {
    position: absolute;
    left: 13px;
    color: var(--auth-dim);
    pointer-events: none;
    transition: color .15s;
}
.input-with-icon input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    padding: 11px 12px 11px 40px;
    font-size: 0.94rem;
    font-family: inherit;
    color: var(--auth-text);
    min-width: 0;
    width: 100%;
}
.input-with-icon input::placeholder { color: var(--auth-dim-2); }
.input-with-icon input:-webkit-autofill,
.input-with-icon input:-webkit-autofill:hover,
.input-with-icon input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--auth-text);
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    caret-color: var(--auth-text);
}
.input-with-icon:focus-within {
    border-color: var(--auth-input-focus);
    box-shadow: 0 0 0 3px var(--auth-focus-ring);
}
.input-with-icon:focus-within > svg { color: var(--auth-text); }

.input-toggle {
    background: transparent;
    border: 0;
    color: var(--auth-dim);
    padding: 0 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: color .12s;
}
.input-toggle:hover { color: var(--auth-text); }

/* Validation states (consumed by JS) */
.input-with-icon.is-valid {
    border-color: #86efac;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}
.input-with-icon.is-invalid {
    border-color: #fca5a5;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* Password meter */
.pw-meter { margin-top: 8px; }
.pw-bar {
    width: 100%;
    height: 4px;
    background: var(--auth-border);
    border-radius: 999px;
    overflow: hidden;
}
.pw-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: transparent;
    border-radius: 999px;
    transition: width .25s ease, background .25s ease;
}
.pw-hint {
    margin-top: 6px;
    font-size: 0.76rem;
    color: var(--auth-muted);
}
.pw-match-hint {
    margin-top: 6px;
    font-size: 0.76rem;
    min-height: 16px;
    transition: color .15s;
}

/* ---- Submit ---- */
.auth-submit {
    width: 100%;
    margin-top: 16px;
    padding: 13px 18px;
    background: var(--auth-accent);
    color: #ffffff;
    border: 1px solid var(--auth-accent);
    border-radius: 10px;
    font-size: 0.97rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: -0.005em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: transform .12s ease, box-shadow .2s ease, background .15s ease;
}
.auth-submit:hover {
    transform: translateY(-1px);
    background: var(--auth-accent-hover);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 6px 16px -6px rgba(0, 0, 0, 0.18);
}
.auth-submit:active { transform: translateY(0); }
.auth-submit:focus {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(24, 24, 27, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.05);
}

.auth-card__switch {
    margin: 20px 0 0;
    text-align: center;
    font-size: 0.88rem;
    color: var(--auth-muted);
}
.auth-card__switch a {
    color: var(--auth-text);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease;
}
.auth-card__switch a:hover { border-bottom-color: var(--auth-text); }

/* ---- Footer ---- */
.auth-footer {
    margin-top: 28px;
    color: var(--auth-dim);
    font-size: 0.76rem;
    text-align: center;
    letter-spacing: 0.01em;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .auth-wrap { padding: 28px 16px; }
    .auth-brand { margin-bottom: 22px; font-size: 1rem; }
    .auth-brand__badge { width: 38px; height: 38px; border-radius: 11px; }
    .auth-card { padding: 28px 22px 24px; border-radius: 14px; }
    .auth-card--wide { max-width: 100%; }
    .auth-card__head { margin: 4px 0 20px; }
    .auth-card__head h1 { font-size: 1.42rem; }
    .auth-card__head p { font-size: 0.9rem; }
    .auth-perks { padding: 12px 14px; margin-bottom: 18px; border-radius: 10px; }
    .auth-perks li { font-size: 0.84rem; }
    .auth-form .form-group { margin-bottom: 12px; }
    .input-with-icon input,
    .auth-form .form-input { padding-top: 12px; padding-bottom: 12px; font-size: 0.95rem; }
    .input-with-icon input { padding-left: 40px; padding-right: 12px; }
    .auth-submit { padding: 13px 18px; font-size: 0.95rem; }
}

@media (max-width: 480px) {
    .auth-wrap { padding: 24px 14px; }
    .auth-brand { margin-bottom: 18px; }
    .auth-card { padding: 24px 18px 22px; border-radius: 14px; }
    .auth-card__head h1 { font-size: 1.3rem; }
    .auth-grid-2 { grid-template-columns: 1fr; gap: 0; }
    .auth-card__switch { font-size: 0.86rem; }
}

@media (max-width: 375px) {
    .auth-wrap { padding: 20px 12px; }
    .auth-brand { font-size: 0.95rem; gap: 9px; margin-bottom: 16px; }
    .auth-brand__badge { width: 34px; height: 34px; border-radius: 10px; }
    .auth-card { padding: 22px 16px 20px; }
    .auth-card__head h1 { font-size: 1.22rem; }
    .auth-card__head p { font-size: 0.86rem; }
    .auth-perks { padding: 11px 12px; gap: 8px; }
    .auth-perks li { font-size: 0.8rem; }
    .auth-perks svg { width: 18px; height: 18px; }
    .input-with-icon input,
    .auth-form .form-input { font-size: 0.92rem; }
    .auth-submit { padding: 12px 16px; font-size: 0.92rem; }
    .auth-footer { margin-top: 22px; font-size: 0.72rem; }
}

@media (max-height: 720px) {
    .auth-wrap { padding-top: 24px; padding-bottom: 24px; }
    .auth-brand { margin-bottom: 18px; }
    .auth-footer { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card,
    .auth-hero { animation: none !important; }
}

/* =====================================================================
 *  Auth Vignettes — Login sayfasının sol kolonunda, sakin ve minimal
 *  bir "tanıtım kartı". 4 ambient sahne, ~5 sn aralıklarla crossfade
 *  ile geçer; toplam döngü ≈ 20 sn.
 *
 *  Yapı:
 *      .auth-vignettes
 *        └─ .auth-vignettes__card
 *             ├─ .auth-vignettes__stage   (sahnelerin üst üste yerleştiği alan)
 *             │     └─ .vg-scene * 4      (her biri tek bir vignette)
 *             └─ .auth-vignettes__foot
 *                   ├─ .auth-vignettes__caption (aria-live="polite")
 *                   └─ .auth-vignettes__dots    (4 küçük gösterge nokta)
 *
 *  Bu blok yalnızca yeni Auth Vignettes bileşenini stiller; üstteki
 *  auth.css'in geri kalanına dokunmaz.
 * ===================================================================== */

.auth-vignettes {
    display: none;
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
    margin: 0 auto;
}
@media (min-width: 1024px) {
    .auth-vignettes { display: block; margin: 0; }
}

.auth-vignettes__card {
    position: relative;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fafc 0%, #f5f3ff 100%);
    border: 1px solid var(--auth-border);
    box-shadow: var(--auth-shadow-card);
    overflow: hidden;
    animation: authCardIn .45s ease both;
}

/* ---- Sahne alanı: tüm vignette'ler burada üst üste yerleşir ---- */
.auth-vignettes__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden;
}

/* ---- Tek bir vignette: asimetrik crossfade ---- *
 *  Üç durum:
 *    default       — sahne henüz girmedi: opacity 0, scale 0.98 (içeri büyüyerek girer)
 *    .is-active    — sahne görünür:     opacity 1, scale 1
 *    .is-leaving   — sahne çıkıyor:      opacity 0, scale 1.02 (dışarı doğru yumuşakça açılır)
 */
.vg-scene {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 32px;
    box-sizing: border-box;
    opacity: 0;
    transform: scale(0.98);
    transition:
        opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.vg-scene.is-active {
    opacity: 1;
    transform: scale(1);
}
.vg-scene.is-leaving {
    opacity: 0;
    transform: scale(1.02);
}

.vg-scene__body {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/* =====================================================================
 *  Sahne 1 · "Bütçen nefes alır." — net sayaç + sine dalgası + etiketler
 * ===================================================================== */
.vg-breath {
    gap: 14px;
}
.vg-breath__num {
    font-size: 1.9rem;
    font-weight: 700;
    color: #18181b;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    min-height: 1.2em;
}
.vg-breath__wave {
    width: 70%;
    height: 50px;
    display: block;
    overflow: visible;
}
.vg-breath__line {
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
}
.vg-scene[data-vg-scene="1"].is-active .vg-breath__line {
    animation:
        vgWaveDraw 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        vgWaveBreathe 3.6s ease-in-out 2.4s infinite;
}
@keyframes vgWaveDraw {
    to { stroke-dashoffset: 0; }
}
@keyframes vgWaveBreathe {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1px); }
}
.vg-breath__tags {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: 2px;
}
.vg-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--auth-muted);
    letter-spacing: -0.005em;
}
.vg-tag__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}
.vg-tag__dot--in  { background: #10b981; }
.vg-tag__dot--out { background: #f43f5e; }

/* =====================================================================
 *  Sahne 2 · "Borçlarını sakince kapat." — 4 yatay progress bar
 * ===================================================================== */
.vg-bars {
    width: 100%;
    max-width: 320px;
    gap: 12px;
}
.vg-bar {
    display: grid;
    grid-template-columns: 70px 1fr 16px;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.vg-bar__name {
    font-size: 0.82rem;
    color: var(--auth-text-soft);
    font-weight: 500;
    letter-spacing: -0.005em;
}
.vg-bar__track {
    position: relative;
    height: 6px;
    background: #e4e4e7;
    border-radius: 999px;
    overflow: hidden;
}
.vg-bar__fill {
    position: absolute;
    inset: 0;
    width: 0;
    background: linear-gradient(90deg, #a5b4fc 0%, #6366f1 100%);
    border-radius: 999px;
    transition:
        width 900ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--d, 0ms);
}
.vg-bar.is-fill .vg-bar__fill {
    width: var(--target, 50%);
}
.vg-bar__check {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #10b981;
    opacity: 0;
    transform: scale(0.6);
    transition:
        opacity 240ms ease,
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vg-bar.is-fill[style*="100%"] .vg-bar__check {
    opacity: 1;
    transform: scale(1);
    /* Doluş bittikten sonra check belirsin (900ms + 100ms buffer + bar delay) */
    transition-delay: calc(var(--d, 0ms) + 1000ms);
}

/* =====================================================================
 *  Sahne 3 · "Tekrarlı işler kendi kendine." — 7 günlük şerit + chip'ler
 * ===================================================================== */
.vg-week {
    position: relative;
    width: 100%;
    max-width: 320px;
    gap: 0;
}
.vg-week__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
.vg-week__hair {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
}
.vg-scene[data-vg-scene="3"].is-active .vg-week__hair--1 {
    animation: vgHairDraw 700ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
}
.vg-scene[data-vg-scene="3"].is-active .vg-week__hair--2 {
    animation: vgHairDraw 700ms cubic-bezier(0.22, 1, 0.36, 1) 600ms forwards;
}
.vg-scene[data-vg-scene="3"].is-active .vg-week__hair--3 {
    animation: vgHairDraw 700ms cubic-bezier(0.22, 1, 0.36, 1) 1000ms forwards;
}
@keyframes vgHairDraw {
    to { stroke-dashoffset: 0; }
}

.vg-week__chips {
    position: relative;
    width: 100%;
    height: 110px;
}
.vg-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--auth-border);
    color: var(--auth-text-soft);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    opacity: 0;
    transform: translateY(4px);
    transition:
        opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
    white-space: nowrap;
}
/* Hairline yollarının bittiği noktalara hizalı yerleşim
   (viewBox 260 x 110): Pzt→(52,30), Cum→(132,58), Cmt→(208,86) */
.vg-chip--1 { left: 8%;  top: 18%;  transition-delay: 240ms; }
.vg-chip--2 { left: 38%; top: 46%;  transition-delay: 640ms; }
.vg-chip--3 { left: 60%; top: 72%;  transition-delay: 1040ms; }

.vg-scene[data-vg-scene="3"].is-active .vg-chip {
    opacity: 1;
    transform: translateY(0);
}

.vg-week__strip {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    width: 100%;
    margin-top: 4px;
}
.vg-week__dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--auth-dim);
    font-size: 0.66rem;
    letter-spacing: 0.02em;
}
.vg-week__dot i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e4e4e7;
    display: inline-block;
}
.vg-week__dot em {
    font-style: normal;
}
.vg-week__dot.is-on i {
    background: #6366f1;
}
.vg-week__dot.is-on em {
    color: var(--auth-text-soft);
}

/* =====================================================================
 *  Sahne 4 · "Her şey tek bir yerde." — 2x2 madalyon + çevresel hairline
 * ===================================================================== */
.vg-grid {
    position: relative;
    width: 100%;
    max-width: 220px;
}
.vg-grid__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
.vg-grid__ring-path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
}
.vg-scene[data-vg-scene="4"].is-active .vg-grid__ring-path {
    animation: vgRingDraw 1100ms cubic-bezier(0.22, 1, 0.36, 1) 720ms forwards;
}
@keyframes vgRingDraw {
    to { stroke-dashoffset: 0; }
}

.vg-grid__cells {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 36px;
    width: 100%;
    padding: 18px 22px;
    box-sizing: border-box;
    justify-items: center;
}
.vg-med {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--auth-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--auth-text-soft);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transform: scale(0.95);
    opacity: 0;
    transition:
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 320ms ease;
}
.vg-med--1 { transition-delay: 60ms; }
.vg-med--2 { transition-delay: 180ms; }
.vg-med--3 { transition-delay: 300ms; }
.vg-med--4 { transition-delay: 420ms; }

.vg-scene[data-vg-scene="4"].is-active .vg-med {
    opacity: 1;
    transform: scale(1);
}

/* =====================================================================
 *  Caption + sahne göstergesi
 * ===================================================================== */
.auth-vignettes__foot {
    padding: 14px 22px 16px;
    background: rgba(255, 255, 255, 0.55);
    border-top: 1px solid var(--auth-row-line);
    text-align: center;
}
.auth-vignettes__caption {
    font-size: 0.9rem;
    color: var(--auth-dim);
    font-weight: 500;
    letter-spacing: -0.005em;
    min-height: 1.4em;
    transition: opacity .35s ease;
}
.auth-vignettes__caption em {
    font-style: normal;
    color: #18181b;
    font-weight: 600;
}
.auth-vignettes__dots {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.auth-vignettes__dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d4d4d8;
    display: inline-block;
    transition:
        background 250ms ease,
        transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.auth-vignettes__dots i.is-on {
    background: #6366f1;
    transform: scale(1.4);
}

/* ---- Reduced motion: hareket yok, sadece 1. sahne görünür ---- */
@media (prefers-reduced-motion: reduce) {
    .auth-vignettes__card,
    .vg-scene,
    .vg-breath__line,
    .vg-bar__fill,
    .vg-bar__check,
    .vg-chip,
    .vg-week__hair,
    .vg-grid__ring-path,
    .vg-med,
    .auth-vignettes__caption,
    .auth-vignettes__dots i {
        animation: none !important;
        transition: none !important;
    }
    .vg-scene,
    .vg-scene.is-leaving {
        opacity: 0;
        transform: none !important;
    }
    .vg-scene.is-active {
        opacity: 1;
    }
    .vg-breath__line {
        stroke-dashoffset: 0 !important;
    }
    .vg-week__hair,
    .vg-grid__ring-path {
        stroke-dashoffset: 0 !important;
    }
    .vg-bar__fill { width: var(--target, 50%) !important; }
    .vg-bar.is-fill[style*="100%"] .vg-bar__check,
    .vg-med,
    .vg-chip {
        opacity: 1 !important;
        transform: none !important;
    }
}