:root {
    --ink: #15231f;
    --muted: #71807a;
    --green: #0d7a55;
    --brand: #d93c40;
}

* { box-sizing: border-box }

body {
    margin: 0;
    min-height: 100vh;
    font: 14px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: #f4f7f5;
}

.login {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    min-height: 100vh;
}

/* =====================================================================
   Sol: marka yüzü
   ===================================================================== */

.login-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 44px clamp(32px, 4.4vw, 62px);
    background: #060606;
    color: #f5f5f5;
}

/* --- Yavaşça sürüklenen ışık. İki katman ters yönde hareket ediyor,
       böylece döngü fark edilmiyor. --- */
.aurora {
    position: absolute;
    inset: -30%;
    z-index: -2;
    background:
        radial-gradient(38% 42% at 78% 18%, rgba(217, 60, 64, .30), transparent 70%),
        radial-gradient(34% 38% at 22% 82%, rgba(69, 212, 159, .12), transparent 72%),
        radial-gradient(46% 46% at 55% 50%, rgba(217, 60, 64, .08), transparent 70%);
    animation: drift 26s ease-in-out infinite alternate;
}

@keyframes drift {
    0%   { transform: translate3d(0, 0, 0) scale(1) }
    50%  { transform: translate3d(-3%, 2.5%, 0) scale(1.08) }
    100% { transform: translate3d(2.5%, -2%, 0) scale(1.03) }
}

/* --- İnce grenli doku: düz siyahı "ucuz" görünmekten kurtarıyor.
       Gömülü SVG; hiçbir dış istek yok. --- */
.grain {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .16;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --- Üst: logo --- */

.lb-top img {
    display: block;
    width: 176px;
    height: auto;
}

.lb-top .kicker {
    margin-top: 9px;
    padding-left: 2px;
    color: #8a8a8a;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* --- Orta blok: dikeyde ORTALANIR. Eski `space-between` uzun ekranlarda
       içeriği iki uca fırlatıp ortada büyük bir boşluk bırakıyordu. --- */

.lb-mid {
    margin: auto 0;
    padding: 40px 0;
}

.lb-mid h1 {
    max-width: 14ch;
    margin: 26px 0 14px;
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.1;
    font-weight: 750;
    letter-spacing: -.025em;
}

.lb-mid > p {
    max-width: 44ch;
    margin: 0;
    color: #9c9c9c;
    font-size: 15px;
}

/* --- Ses ölçer -------------------------------------------------------- */

/* Çubuklar dikeyde ORTALANIYOR: yükseklik büyüyünce iki yöne birden açılıyor,
   yani gerçek bir dalga formu gibi simetrik görünüyor. */
.meter {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    max-width: 44ch;
    height: 104px;
}

.meter i {
    flex: 1 1 0;
    min-width: 3px;
    height: 8%;
    border-radius: 4px;
    background: linear-gradient(180deg, #ff6165 0%, #d93c40 45%, #8e2226 100%);
    box-shadow: 0 0 14px rgba(217, 60, 64, .28);
    /* Yükseklik JS'ten geliyor; geçiş yumuşatmayı CSS yapıyor. */
    transition: height .11s cubic-bezier(.3, .9, .4, 1);
    will-change: height;
}

/* JS çalışmazsa (veya devre dışıysa) ölçer düz bir çizgi olarak kalmasın. */
.meter.static i { animation: idle 1.6s ease-in-out infinite }

@keyframes idle {
    0%, 100% { height: 10% }
    50%      { height: 62% }
}

/* --- Örnek görüşme akışı ---------------------------------------------- */

.flow {
    margin-top: 34px;
    max-width: 42ch;
}

.flow-label {
    display: block;
    margin-bottom: 12px;
    color: #6b6b6b;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.flow-line {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    /* En uzun örnek satır hem masaüstünde hem mobilde İKİ satıra sığıyor.
       Yüksekliği baştan ayırıyoruz; yoksa daktilo efekti ikinci satıra
       geçtiğinde altındaki her şey zıplıyor. */
    min-height: 3.4em;
}

.flow-who {
    flex: 0 0 auto;
    margin-top: 1px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    background: rgba(255, 255, 255, .07);
    color: #9c9c9c;
}

.flow-line.is-agent .flow-who {
    background: rgba(217, 60, 64, .16);
    color: #ef7c7f;
}

.flow-text {
    color: #e4e4e4;
    font-size: 14.5px;
    line-height: 1.5;
}

.flow-text::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -2px;
    background: currentColor;
    animation: caret 1s step-end infinite;
}

.flow-line.is-done .flow-text::after { animation: none; opacity: 0 }

@keyframes caret { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }

/* --- Alt: durum --- */

.lb-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6f6f6f;
    font-size: 12px;
}

.lb-foot i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #45d49f;
    box-shadow: 0 0 0 0 rgba(69, 212, 159, .5);
    animation: ping 2.4s ease-out infinite;
}

@keyframes ping {
    0%   { box-shadow: 0 0 0 0 rgba(69, 212, 159, .45) }
    70%  { box-shadow: 0 0 0 9px rgba(69, 212, 159, 0) }
    100% { box-shadow: 0 0 0 0 rgba(69, 212, 159, 0) }
}

/* =====================================================================
   Sağ: form
   ===================================================================== */

.login-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 46px 40px;
    background: #fff;
}

.login-card { width: 100%; max-width: 352px }

.login-card h2 {
    margin: 0 0 5px;
    font-size: 24px;
    letter-spacing: -.015em;
}

.login-card .sub { margin: 0 0 26px; color: var(--muted) }

.login-card label {
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 13px;
}

.login-card input {
    display: block;
    width: 100%;
    margin-top: 7px;
    padding: 12px 13px;
    font: inherit;
    font-weight: 400;
    color: var(--ink);
    background: #fff;
    border: 1px solid #dce4e0;
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}

.login-card input:focus {
    outline: 0;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(13, 122, 85, .13);
}

.login-card button {
    width: 100%;
    margin-top: 9px;
    padding: 13px;
    font: inherit;
    font-weight: 650;
    color: #fff;
    background: #153e32;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, transform .06s;
}

.login-card button:hover { background: #0d2a22 }
.login-card button:active { transform: translateY(1px) }

.login-hata {
    display: flex;
    gap: 9px;
    margin-bottom: 20px;
    padding: 11px 13px;
    border-radius: 10px;
    background: #fae5e5;
    color: #b43f3f;
    font-size: 13px;
}

.login-note {
    margin: 22px 0 0;
    color: #9aa5a0;
    font-size: 11.5px;
    line-height: 1.55;
}

.login-note code {
    font-size: 11px;
    background: #f1f4f2;
    padding: 1px 4px;
    border-radius: 4px;
}

/* =====================================================================
   Duyarlı
   ===================================================================== */

@media (max-width: 900px) {
    .login { grid-template-columns: 1fr }

    .login-brand { padding: 26px 24px 30px }
    .lb-mid { margin: 22px 0 0; padding: 0 }
    .lb-mid h1 { margin: 18px 0 10px; max-width: none }
    .lb-mid > p, .lb-foot { display: none }
    .meter { height: 44px }
    .flow { margin-top: 22px; max-width: none }
    .login-form { padding: 32px 24px 52px }
    .login-card { max-width: none }
}

@media (prefers-reduced-motion: reduce) {
    .aurora { animation: none }
    .meter i { transition: none }
    .meter.static i { animation: none; height: 45% }
    .flow-text::after { animation: none }
    .lb-foot i { animation: none }
}