/* ZTO HAL — Authentication (Login) stilleri
   Bootstrap KULLANILMAZ. hal-design-tokens.css token'ları + ZTO yeşil marka (#0F2A1F).
   Aura tarzı: solda marka paneli, sağda temiz form kartı.
*/

:root {
    --hal-auth-brand:        #0F2A1F;   /* ZTO koyu yeşil */
    --hal-auth-brand-2:      #163d2c;   /* gradyan ikinci ton */
    --hal-auth-brand-soft:   #e8f5ee;   /* açık metin */
    --hal-auth-accent:       #1f7a4d;   /* yeşil aksan (focus/hover) */
}

.hal-auth-body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--font-family-base, "IBM Plex Sans", sans-serif);
    color: var(--color-text-primary, #111827);
    background: var(--hal-auth-brand);
}

/* ZTO Fabrika login tarzı zemin: tam marka rengi + ince kare ızgara deseni +
   merkezde yumuşak ışık. Fabrika'da mavi olan doku, ZTO Bazaar kurumsal
   yeşiliyle uygulanır. Katman sırası: ışık → ızgara (yatay+dikey) → gradyan. */
.hal-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    /* border-box ŞART: content-box'ta min-height 100vh + padding = her zaman
       taşma → sayfa hep bir tık scrollar. */
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh; /* mobil adres çubuğu için dinamik yükseklik */
    /* Dikey padding EKRAN YÜKSEKLİĞİNE bağlı (vw değil vh): kısa ekranda küçülür. */
    padding: clamp(0.75rem, 3vh, 2.5rem);
    background:
        radial-gradient(1100px 640px at 50% 36%, rgba(255, 255, 255, 0.10), transparent 65%),
        linear-gradient(rgba(232, 245, 238, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232, 245, 238, 0.06) 1px, transparent 1px),
        linear-gradient(165deg, #14382a 0%, var(--hal-auth-brand) 55%, #081712 100%);
    background-size: auto, 44px 44px, 44px 44px, auto;
}

/* ── SOL: Marka paneli ─────────────────────────────────────────── */
.hal-auth__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(2rem, 5vw, 4rem);
    background: linear-gradient(160deg, var(--hal-auth-brand) 0%, var(--hal-auth-brand-2) 100%);
    color: var(--hal-auth-brand-soft);
    overflow: hidden;
}

.hal-auth__brand::after {
    /* dekoratif yumuşak ışık */
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    right: -160px;
    bottom: -160px;
    background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
    pointer-events: none;
}

.hal-auth__brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-family-display, "Outfit", sans-serif);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.04em;
}

.hal-auth__brand-logo img {
    height: 40px;
    width: auto;
    object-fit: contain;
    background: #fff;
    border-radius: 10px;
    padding: 4px 8px;
}

.hal-auth__brand-copy {
    max-width: 420px;
}

.hal-auth__brand-copy h2 {
    font-family: var(--font-family-display, "Outfit", sans-serif);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.2;
    margin: 0 0 12px 0;
}

.hal-auth__brand-copy p {
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.85;
    margin: 0;
}

.hal-auth__brand-foot {
    font-size: 12px;
    opacity: 0.6;
}

/* ── SAĞ: Form paneli ──────────────────────────────────────────── */
.hal-auth__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--color-bg-primary, #fff);
}

.hal-auth__card {
    width: min(420px, 100%);
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-xl, 16px);
    /* Dikey padding ekran yüksekliğine bağlı — kısa ekranda daralır (scroll önleme) */
    padding: clamp(1.25rem, 3vh, 2.75rem) clamp(1.5rem, 4vw, 2.75rem);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.06),
        0 28px 64px -16px rgba(0, 0, 0, 0.45),
        0 4px 14px rgba(0, 0, 0, 0.12);
}

.hal-auth__head-logo {
    display: flex; /* Aura: tek kart — logo her zaman kartın üstünde, ortalı */
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-family: var(--font-family-display, "Outfit", sans-serif);
    margin-bottom: clamp(0.75rem, 2vh, 1.5rem);
    color: var(--hal-auth-brand);
}

/* Yatay ZTO Bazaar logosu — isim logonun içinde, ayrı span yok */
.hal-auth__head-logo img { height: 44px; width: auto; }

/* ── Süreç zinciri (ZTO Fabrika tarzı) ─────────────────────────── */
.hal-auth__chain {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0 0 clamp(0.6rem, 1.6vh, 1rem) 0;
}

.hal-auth__chain-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--hal-auth-brand-soft);
    color: var(--hal-auth-brand);
    font-size: 15px;
    box-shadow: 0 1px 2px rgba(15, 42, 31, 0.10);
    /* Fabrika tarzı: vurgu zincir boyunca sırayla "yürür" (her kutu gecikmeli) */
    animation: halChainWalk 4.8s ease-in-out infinite;
}

/* Kutular dash'lerle dönüşümlü sıralandığından tek indeksli (1,3,5,7,9,11)
   nth-child = zincirdeki 1.–6. ikon. Her biri 0.5sn gecikmeyle yürür. */
.hal-auth__chain-item:nth-child(1)  { animation-delay: 0s; }
.hal-auth__chain-item:nth-child(3)  { animation-delay: 0.5s; }
.hal-auth__chain-item:nth-child(5)  { animation-delay: 1.0s; }
.hal-auth__chain-item:nth-child(7)  { animation-delay: 1.5s; }
.hal-auth__chain-item:nth-child(9)  { animation-delay: 2.0s; }
.hal-auth__chain-item:nth-child(11) { animation-delay: 2.5s; }

@keyframes halChainWalk {
    0%, 62.5%, 100% {
        background: var(--hal-auth-brand-soft);
        color: var(--hal-auth-brand);
        transform: scale(1) translateY(0);
        box-shadow: 0 1px 2px rgba(15, 42, 31, 0.10);
    }
    /* aktif an: dolu marka rengi + hafif büyüme (yaklaşık 0.5sn'lik pencere) */
    8%, 12.5% {
        background: linear-gradient(135deg, var(--hal-auth-brand), var(--hal-auth-accent));
        color: #fff;
        transform: scale(1.16) translateY(-3px);
        box-shadow: 0 8px 18px rgba(15, 42, 31, 0.30);
    }
}

.hal-auth__chain-dash {
    flex: 0 0 auto;
    width: 14px;
    border-top: 2px dashed var(--color-border, #cfe3d7);
    opacity: 0.8;
}

/* Hareket hassasiyeti olan kullanıcılarda animasyonu kapat (erişilebilirlik) */
@media (prefers-reduced-motion: reduce) {
    .hal-auth__chain-item { animation: none; }
}

/* Slogan bandı — Fabrika'daki gibi ince kutu */
.hal-auth__tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 clamp(0.85rem, 2vh, 1.5rem) 0;
    padding: clamp(9px, 1.4vh, 12px) 16px;
    border-radius: var(--radius-md, 8px);
    background: var(--hal-auth-brand-soft);
    color: var(--hal-auth-brand);
    font-family: var(--font-family-display, "Outfit", sans-serif);
    font-weight: 600;
    font-size: 14px;
    text-align: center;
}

.hal-auth__tagline i { font-size: 13px; opacity: 0.85; }

.hal-auth__title {
    font-family: var(--font-family-display, "Outfit", sans-serif);
    font-weight: 800;
    font-size: 28px;
    margin: 0 0 6px 0;
    color: var(--color-text-primary, #111827);
}

.hal-auth__subtitle {
    font-size: 14px;
    color: var(--color-text-muted, #6b7280);
    margin: 0 0 clamp(1rem, 2.5vh, 1.75rem) 0;
}

/* Hata özeti */
.hal-auth__alert {
    background: var(--color-danger-50, #fef5f5);
    border: 1px solid var(--color-danger-200, #fdcccf);
    color: var(--color-danger-700, #b21c2f);
    border-radius: var(--radius-md, 6px);
    padding: 12px 14px;
    margin-bottom: 1.25rem;
    font-size: 13px;
}

.hal-auth__alert ul { margin: 0; padding-left: 18px; }

.hal-auth__alert--success {
    background: var(--color-success-50, #f2faf5);
    border-color: var(--color-success-200, #c4e8d1);
    color: var(--color-success-700, #1d7a44);
}

/* Form */
.hal-auth__form {
    display: flex;
    flex-direction: column;
    gap: clamp(0.6rem, 1.5vh, 1rem);
}

.hal-auth__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.hal-auth__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #374151);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hal-auth__input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 6px);
    font-family: inherit;
    font-size: 14px;
    color: var(--color-text-primary, #111827);
    background: var(--color-bg-primary, #fff);
    transition: border-color 180ms, box-shadow 180ms;
}

.hal-auth__input::placeholder { color: var(--color-text-light, #9ca3af); }

.hal-auth__input:focus {
    outline: none;
    border-color: var(--hal-auth-accent);
    box-shadow: 0 0 0 3px rgba(15, 42, 31, 0.14);
}

/* Input içi ikon (sol) + göz butonu (sağ) sarmalayıcısı */
.hal-auth__input-wrap { position: relative; display: block; }

.hal-auth__input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-light, #9ca3af);
    font-size: 14px;
    pointer-events: none;
    transition: color 180ms;
}

.hal-auth__input--icon { padding-left: 42px; }

/* Odaklanınca soldaki ikon marka rengine döner */
.hal-auth__input-wrap:focus-within .hal-auth__input-icon { color: var(--hal-auth-accent); }

.hal-auth__field--pass .hal-auth__input--icon { padding-right: 44px; }

.hal-auth__pass-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-light, #9ca3af);
    font-size: 15px;
    cursor: pointer;
    padding: 6px;
    transition: color 180ms;
}

.hal-auth__pass-toggle:hover { color: var(--hal-auth-brand); }

.hal-auth__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
}

.hal-auth__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary, #374151);
    cursor: pointer;
    user-select: none;
}

.hal-auth__check input { width: 16px; height: 16px; accent-color: var(--hal-auth-brand); }

.hal-auth__link {
    font-size: 13px;
    font-weight: 600;
    color: var(--hal-auth-accent);
    text-decoration: none;
}

.hal-auth__link:hover { text-decoration: underline; }

/* Butonlar */
.hal-auth__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    border-radius: var(--radius-md, 6px);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 180ms, box-shadow 180ms, border-color 180ms, transform 120ms;
}

.hal-auth__btn:active { transform: translateY(1px); }

.hal-auth__btn--primary {
    background: var(--hal-auth-brand);
    color: #fff;
    box-shadow: 0 6px 16px rgba(15, 42, 31, 0.2);
    margin-top: 4px;
}

.hal-auth__btn--primary:hover { background: var(--hal-auth-brand-2); }

.hal-auth__btn--ghost {
    flex: 1;
    background: #fff;
    color: var(--color-text-primary, #111827);
    border-color: var(--color-border, #e5e7eb);
}

.hal-auth__btn--ghost:hover {
    border-color: var(--hal-auth-brand);
    color: var(--hal-auth-brand);
}

/* ── PWA kurulum butonu (şimdilik pasif) ───────────────────────── */
.hal-auth__install {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin-top: clamp(0.6rem, 1.5vh, 1rem);
    padding: clamp(9px, 1.3vh, 12px) 14px;
    border: 1.5px dashed var(--color-border, #cfe3d7);
    border-radius: var(--radius-md, 8px);
    background: var(--hal-auth-brand-soft);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 180ms, background 180ms, box-shadow 180ms;
}

.hal-auth__install:not(:disabled):hover {
    border-style: solid;
    border-color: var(--hal-auth-accent);
    box-shadow: 0 4px 14px rgba(15, 42, 31, 0.14);
}

/* Pasif durum: tıklanamaz, soluk (PWA hazır olunca disabled kaldırılır) */
.hal-auth__install:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.hal-auth__install-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--hal-auth-brand);
    color: #fff;
    font-size: 16px;
}

.hal-auth__install-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}

.hal-auth__install-text strong {
    font-family: var(--font-family-display, "Outfit", sans-serif);
    font-weight: 700;
    font-size: 14px;
    color: var(--hal-auth-brand);
}

.hal-auth__install-text small {
    font-size: 11.5px;
    color: var(--color-text-muted, #6b7280);
}

.hal-auth__install-badge {
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--hal-auth-brand);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Ayraç */
.hal-auth__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: clamp(0.85rem, 2vh, 1.5rem) 0 clamp(0.6rem, 1.4vh, 1rem);
    color: var(--color-text-light, #9ca3af);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hal-auth__divider::before,
.hal-auth__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border, #e5e7eb);
}

/* Alt aksiyonlar (ztofactory + LinkedIn) */
.hal-auth__alt {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.hal-auth__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    flex-shrink: 0;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 6px);
    color: #0a66c2; /* LinkedIn mavisi */
    font-size: 18px;
    text-decoration: none;
    transition: background 180ms, border-color 180ms;
}

.hal-auth__icon-btn:hover {
    background: #0a66c2;
    border-color: #0a66c2;
    color: #fff;
}

.hal-auth__foot {
    margin-top: clamp(0.85rem, 2vh, 1.75rem);
    text-align: center;
    font-size: 11px;
    color: var(--color-text-light, #9ca3af);
}

/* ── Çok kısa ekran (landscape telefon vb.): boşlukları zaten yukarıdaki
   vh-clamp'ler daraltır; burada yalnız ELEMAN BOYUTLARINI küçültüp sabit
   içerik yüksekliğini de düşürerek scroll'u tamamen keseriz. ───────── */
@media (max-height: 640px) {
    .hal-auth__head-logo img { height: 34px; }
    .hal-auth__chain-item { width: 30px; height: 30px; font-size: 12px; }
    .hal-auth__tagline { font-size: 12.5px; }
    .hal-auth__input { padding: 9px 12px; }
    .hal-auth__input--icon { padding-left: 40px; }
    .hal-auth__install-icon { width: 32px; height: 32px; font-size: 14px; }
}

/* Çok dar telefonlarda zincir sığmazsa kutuları biraz küçült (yatay scroll yok) */
@media (max-width: 420px) {
    .hal-auth__chain { gap: 2px; }
    .hal-auth__chain-item { width: 30px; height: 30px; font-size: 12px; }
    .hal-auth__chain-dash { width: 8px; }
}

/* ── Responsive: dar ekranda marka panelini gizle ──────────────── */
@media (max-width: 900px) {
    .hal-auth { grid-template-columns: 1fr; }
    .hal-auth__brand { display: none; }
    .hal-auth__head-logo { display: inline-flex; }
}