/* ═══════ Form ekranları ortak dili — flash, eyebrow, sihirbaz adımları, boş durum, login ═══════ */

/* Başlık üstü küçük bölüm etiketi */
.pa-eyebrow {
    display: block; font-size: .68rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
[data-theme="dark"] .pa-eyebrow { color: var(--muted); }

/* Flash mesajları (hata / başarı / uyarı) — inline stillerin yerine tek dil */
.flash {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 15px; border-radius: 10px; font-size: .88rem; line-height: 1.45;
    margin: 0 0 14px; border: 1px solid transparent;
    animation: flash-in .3s ease both;
}
.flash::before { font-weight: 900; flex: none; }
.flash.error { background: var(--no-bg); color: var(--no); border-color: color-mix(in srgb, var(--no) 30%, transparent); }
.flash.error::before { content: '!'; width: 18px; height: 18px; border-radius: 50%; background: var(--no); color: var(--bg-card); display: flex; align-items: center; justify-content: center; font-size: .72rem; }
.flash.ok { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.flash.ok::before { content: '✓'; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: var(--bg-card); display: flex; align-items: center; justify-content: center; font-size: .72rem; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── Sihirbaz adım bandı — Akış Hattı dilinin form içi küçük hali ── */
.wiz { display: flex; gap: 6px; margin-bottom: 16px; }
.wiz-step {
    position: relative; display: flex; align-items: center; gap: 9px;
    padding: 9px 18px; min-width: 0;
    background: var(--bg-card); color: var(--ink-2);
    font-size: .8rem; font-weight: 700;
    border: none; cursor: default; font-family: inherit;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
    filter: drop-shadow(0 1px 2px rgba(15, 12, 30, .07));
}
.wiz-step:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); border-radius: 8px 0 0 8px; padding-left: 18px; }
.wiz-step:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); border-radius: 0 8px 8px 0; }
.wiz-step .wn {
    width: 20px; height: 20px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--line-2); color: var(--ink-2); font-size: .7rem; font-weight: 800;
}
.wiz-step.active { background: var(--brand); color: var(--bg-card); }
.wiz-step.active .wn { background: rgba(255,255,255,.2); color: inherit; }
.wiz-step.done { color: var(--brand); cursor: pointer; }
.wiz-step.done .wn { background: var(--brand-light); color: var(--brand); }
.wiz-step.done:hover { filter: none; text-decoration: underline; }

/* ── Boş durum / engel kartı ── */
.empty-state {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 46px 24px 42px; gap: 6px;
}
.empty-state .es-icon {
    width: 56px; height: 56px; border-radius: 16px; margin-bottom: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-light); color: var(--brand);
}
.empty-state .es-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.empty-state h2 { margin: 0; font-size: 1.05rem; }
.empty-state p { margin: 0 0 14px; color: var(--ink-2); font-size: .88rem; max-width: 420px; }

/* ═══════ Giriş ekranı ═══════ */
.lg-body {
    min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: var(--bg);
}
[data-theme="dark"] .lg-body { background: var(--bg); }

.lg-card {
    display: grid; grid-template-columns: 300px 1fr; width: min(760px, 100%);
    border-radius: 20px; overflow: hidden; background: var(--bg-card);
    box-shadow: 0 24px 70px rgba(38, 22, 64, .22);
    animation: lg-pop .45s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes lg-pop { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* Marka paneli — Remzi bordosunun koyu cilt tonu, üst menüyle aynı yüzey.
   Düz renk; gradyan yok. Kullanıcı giriş ekranında gördüğü rengi menüde
   yeniden görür, o yüzden kimlik ilk saniyede kurulur. */
.lg-brand {
    position: relative; overflow: hidden; padding: 34px 30px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
    background: #3D0D1B;
    color: #fdf2f5;
}
.lg-logo { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.lg-logo b { color: #fdf2f5; font-weight: 700; }

/* ── RAF (kitabevi imzası) ─────────────────────────────────────────────
   Düz, doygun sırtlar — gradyan YOK. Renkler menüdeki modül sırtlarının
   ta kendisi: giriş ekranı, uygulamanın renk dilini önceden tanıtır.
   Sırtlar sırayla "rafa oturur"; sonuncusu hafif yaslanır çünkü gerçek raf
   asla kusursuz dizili değildir. */
.lg-shelf {
    position: relative; display: flex; align-items: flex-end; gap: 4px;
    height: 76px; margin-bottom: 4px; pointer-events: none;
}
.lg-shelf::after {
    content: ''; position: absolute; left: -4px; right: -4px; bottom: -6px;
    height: 3px; border-radius: 2px; background: rgba(253,242,245,.28);
}
.lg-shelf i {
    flex: 1; border-radius: 2px 2px 0 0; transform-origin: bottom;
    animation: raf-otur .42s cubic-bezier(.34,1.32,.64,1) both;
}
.lg-shelf i:nth-child(1) { height: 72%; background: var(--spine-orange);  animation-delay: .06s; }
.lg-shelf i:nth-child(2) { height: 92%; background: var(--spine-crimson); animation-delay: .13s; }
.lg-shelf i:nth-child(3) { height: 62%; background: var(--spine-ochre);   animation-delay: .20s; }
.lg-shelf i:nth-child(4) { height: 84%; background: var(--spine-teal);    animation-delay: .27s; }
.lg-shelf i:nth-child(5) { height: 78%; background: var(--spine-blue);    animation-delay: .34s; }
.lg-shelf i:nth-child(6) { height: 56%; background: var(--spine-plum);    animation-delay: .41s;
    animation-name: raf-yasla; }
@keyframes raf-otur  { from { opacity: 0; transform: scaleY(.15); } to { opacity: 1; transform: none; } }
@keyframes raf-yasla { from { opacity: 0; transform: scaleY(.15); }
                       to   { opacity: 1; transform: rotate(-8deg) translate(3px, 1px); } }

@media (prefers-reduced-motion: reduce) {
    .lg-shelf i { animation: none; }
    .lg-shelf i:nth-child(6) { transform: rotate(-8deg) translate(3px, 1px); }
}
.lg-sub { font-size: .74rem; color: rgba(253,242,245,.6); margin-top: 3px; letter-spacing: .04em; }

/* İmza: durum rayı. Ürünün gerçekten yaptığı iş — belgenin aşamadan aşamaya
   geçmesi — ince bir ray üzerinde kare düğümlerle anlatılır. Süs değil, ürünün
   kendi modeli. Kehribar düğüm "sizde" demek; uygulama içinde de aynı dili
   kullanır, o yüzden giriş ekranı kullanıcıya arayüzü öğretir. */
.lg-rail { position: relative; display: flex; flex-direction: column; gap: 0; }
.lg-rail .lr-step {
    display: flex; align-items: center; gap: 12px;
    font-size: .82rem; font-weight: 550; color: rgba(253,242,245,.9);
    font-variant-numeric: tabular-nums;
}
.lg-rail .lr-node {
    width: 9px; height: 9px; flex: none; border-radius: 2px;
    background: rgba(253,242,245,.35);
    animation: rail-in .45s cubic-bezier(.22,.61,.36,1) both;
}
.lg-rail .lr-step:nth-child(1) .lr-node { animation-delay: .05s; }
.lg-rail .lr-step:nth-child(3) .lr-node { animation-delay: .18s; }
.lg-rail .lr-step:nth-child(5) .lr-node { animation-delay: .31s; }
/* Tek kehribar düğüm: "şu an sizden beklenen adım" */
.lg-rail .lr-step.is-you .lr-node { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251,191,36,.16); }
.lg-rail .lr-step.is-you { color: #fff; font-weight: 650; }
.lg-rail .lr-line { width: 1px; height: 16px; background: rgba(253,242,245,.2); margin-left: 4px; }
.lg-rail .lr-cap { margin-top: 14px; font-size: .72rem; font-weight: 500; color: rgba(253,242,245,.55); letter-spacing: .02em; }
@keyframes rail-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .lg-rail .lr-node { animation: none; }
}

/* Form paneli */
.lg-form { padding: 38px 36px 34px; display: flex; flex-direction: column; justify-content: center; }
.lg-form h1 { margin: 0 0 2px; font-size: 1.25rem; letter-spacing: -.01em; color: var(--ink); }
.lg-form .lg-hint { margin: 0 0 22px; font-size: .82rem; color: var(--ink-2); }
.lg-form label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.lg-input {
    width: 100%; padding: 12px 14px; margin-bottom: 16px;
    border: 1.5px solid var(--line-input); border-radius: 10px;
    background: var(--bg-input); color: var(--ink); font-size: .92rem; font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lg-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.lg-btn { width: 100%; justify-content: center; padding: 12px; font-size: .95rem; margin-top: 4px; }

@media (max-width: 680px) {
    .lg-card { grid-template-columns: 1fr; }
    .lg-brand { padding: 22px 24px; gap: 18px; flex-direction: row; align-items: center; }
    .lg-rail { display: none; }
    .lg-form { padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .lg-card, .flash, .lg-shelf i { animation: none; }
}