/**
 * Jet Barkod. Giriş sayfası.
 * ============================================================================
 *
 * Bu sayfa çoğu ziyaretçinin gördüğü ilk ekran. İki işi var: giriş yaptırmak
 * ve hesabı olmayanı bize yazmaya götürmek. O yüzden sol tarafta form değil,
 * ne yaptığımızın kısa ve somut anlatımı duruyor.
 *
 * RENK
 * Zemin derin mürekkep, tek vurgu logodaki mavi (#135bec). Arkadaki canlı
 * gradyan da yalnızca mavinin tonlarında geziniyor. Kart beyaz ve keskin:
 * koyu zeminin üstünde gözün gideceği tek yer orası.
 *
 * KAYMA YOK
 * Giriş animasyonları yalnızca opacity ve transform. Arka plan tuvali akış
 * dışında (`position: fixed`), yeniden boyutlanırken sayfayı itmiyor.
 *
 * WEBGL YOKSA
 * Tuvalin arkasında CSS ile çizilmiş sabit bir zemin var. Tuval kurulamazsa
 * ya da bağlam kaybolursa sayfa boş kalmıyor, sadece durgun görünüyor.
 * ============================================================================
 */

:root {
    --g-murekkep: #050810;
    --g-mavi: #135bec;
    --g-mavi-ac: #6ea3ff;
    --g-ak: #eef2f8;
    --g-ak-soluk: rgb(238 242 248 / 0.62);
    --g-cizgi: rgb(255 255 255 / 0.10);
    --g-cizgi-guclu: rgb(255 255 255 / 0.18);
    --g-yay: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Zemin
   ========================================================================== */

body.giris {
    min-height: 100svh;
    margin: 0;
    background: var(--g-murekkep);
    color: var(--g-ak);
    overflow-x: hidden;
}

/* Tuval kurulamazsa görünen sabit zemin. Tek renk ailesi, bant yok. */
.giris-zemin {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(70% 55% at 22% 18%, rgb(19 91 236 / 0.30), transparent 62%),
        radial-gradient(60% 50% at 82% 78%, rgb(14 42 99 / 0.42), transparent 66%),
        var(--g-murekkep);
}

#girisTuval {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity 900ms ease-out;
}

#girisTuval.hazir { opacity: 1; }

/* Okunurluk perdesi: yazı gradyanın parlak yerine denk gelse de okunuyor */
.giris-perde {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgb(5 8 16 / 0.55) 0%, rgb(5 8 16 / 0.20) 38%, rgb(5 8 16 / 0.72) 100%);
}

/* ==========================================================================
   Yerleşim
   ========================================================================== */

.giris-kabuk {
    position: relative;
    z-index: 3;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.giris-ust {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Çentik: sayfa `viewport-fit=cover` ve durum çubuğu saydam, gövde
       ekranın en tepesinden başlıyor. Dolgu olmadan marka ve "Destek"
       düğmesi çentiğin altında kalıyor. */
    padding: calc(1.15rem + env(safe-area-inset-top)) clamp(1rem, 4vw, 2.5rem) 1.15rem;
}

.giris-marka {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
    text-decoration: none;
    font-weight: 680;
    letter-spacing: -0.025em;
    font-size: 1.02rem;
}

.giris-marka img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: contain;
    background: rgb(255 255 255 / 0.07);
    padding: 2px;
}

.giris-ust__bosluk { flex: 1; }

.giris-ustbag {
    padding: 0.42rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--g-ak-soluk);
    font: inherit;
    font-size: 0.87rem;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.giris-ustbag:hover {
    color: #fff;
    background: rgb(255 255 255 / 0.08);
    border-color: var(--g-cizgi);
}

.giris-orta {
    flex: 1;
    display: grid;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 3.5rem);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
    .giris-orta {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 420px);
        align-items: center;
    }
}

/* ==========================================================================
   Anlatım
   ========================================================================== */

.giris-anlatim { min-width: 0; }

.giris-rozet {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.26rem 0.7rem 0.26rem 0.5rem;
    border: 1px solid var(--g-cizgi-guclu);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.06);
    color: var(--g-ak);
    font-size: 0.72rem;
    font-weight: 550;
    letter-spacing: 0.01em;
}

.giris-rozet__nokta {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgb(52 211 153 / 0.20);
    animation: g-nabiz 2.6s ease-in-out infinite;
}

@keyframes g-nabiz {
    0%, 100% { box-shadow: 0 0 0 3px rgb(52 211 153 / 0.20); }
    50% { box-shadow: 0 0 0 6px rgb(52 211 153 / 0.06); }
}

.giris-baslik {
    /* Önceki hâli billboard gibiydi. Burası bir giriş ekranı; yazı
       bağırmamalı, kartın yanında dengeli durmalı. */
    margin: 1rem 0 0.75rem;
    max-width: 21ch;
    font-size: clamp(1.55rem, 2.6vw, 2.15rem);
    font-weight: 640;
    line-height: 1.16;
    letter-spacing: -0.032em;
    color: #fff;
}

.giris-baslik em {
    display: block;
    font-style: italic;
    font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -0.018em;
    color: var(--g-mavi-ac);
}

.giris-ozet {
    margin: 0 0 1.4rem;
    max-width: 48ch;
    color: var(--g-ak-soluk);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* --- Rakamlar --- */

.giris-rakamlar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 2rem;
    margin: 0 0 1.4rem;
    padding: 0.9rem 0 0;
    border-top: 1px solid var(--g-cizgi);
}

.giris-rakam { min-width: 0; }

.giris-rakam__sayi {
    display: block;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.028em;
    font-variant-numeric: tabular-nums;
    color: #fff;
    line-height: 1.2;
}

.giris-rakam__not {
    display: block;
    margin-top: 0.1rem;
    color: rgb(238 242 248 / 0.45);
    font-size: 0.72rem;
    line-height: 1.35;
}

/* --- Simülasyon bağlantısı ---
   Tanıtım panelindeki tek çağrı. Özellik satırlarının üstünde duruyor:
   listeyi okumadan önce görülüyor, okuyanı da listeden ayrı bir şey
   olduğu için rahatsız etmiyor. */

.giris-sim {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgb(238 242 248 / 0.16);
    border-radius: 12px;
    background: rgb(238 242 248 / 0.05);
    color: #fff;
    text-decoration: none;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.giris-sim:hover {
    border-color: rgb(238 242 248 / 0.3);
    background: rgb(238 242 248 / 0.09);
    transform: translateY(-1px);
}

.giris-sim:active { transform: none; }

.giris-sim__im {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgb(238 242 248 / 0.1);
}

.giris-sim__im svg { width: 19px; height: 19px; }

.giris-sim__yazi { flex: 1 1 auto; min-width: 0; }

.giris-sim__ad {
    display: block;
    font-size: 0.85rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.giris-sim__not {
    display: block;
    margin-top: 0.08rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgb(238 242 248 / 0.45);
}

.giris-sim__ok {
    flex: none;
    display: inline-flex;
    color: rgb(238 242 248 / 0.45);
    transition: transform 140ms ease, color 140ms ease;
}

.giris-sim__ok svg { width: 17px; height: 17px; }

.giris-sim:hover .giris-sim__ok { transform: translateX(2px); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .giris-sim,
    .giris-sim__ok { transition: none; }
    .giris-sim:hover { transform: none; }
    .giris-sim:hover .giris-sim__ok { transform: none; }
}

/* --- Özellik satırları --- */

.giris-ozellikler {
    display: grid;
    gap: 0.45rem;
    margin: 0 0 1.4rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
    .giris-ozellikler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.giris-ozellik {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--g-cizgi);
    border-radius: 10px;
    background: rgb(255 255 255 / 0.045);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: border-color 220ms ease, background 220ms ease, transform 260ms var(--g-yay);
}

.giris-ozellik:hover {
    border-color: var(--g-cizgi-guclu);
    background: rgb(255 255 255 / 0.08);
    transform: translateY(-2px);
}

.giris-ozellik__im {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 8px;
    background: rgb(19 91 236 / 0.22);
    color: var(--g-mavi-ac);
}

.giris-ozellik__im svg { width: 0.88rem; height: 0.88rem; }

.giris-ozellik__ad {
    margin: 0;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 580;
    letter-spacing: -0.01em;
}

.giris-ozellik__not {
    margin: 0.05rem 0 0;
    color: rgb(238 242 248 / 0.45);
    font-size: 0.71rem;
}

/* --- Bize yazın --- */

.giris-cagri {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid rgb(19 91 236 / 0.38);
    border-radius: 12px;
    background: rgb(19 91 236 / 0.10);
}

.giris-cagri__yazi { min-width: 0; flex: 1; }

.giris-cagri__ad {
    margin: 0;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 590;
}

.giris-cagri__not {
    margin: 0.1rem 0 0;
    color: rgb(238 242 248 / 0.58);
    font-size: 0.75rem;
    line-height: 1.45;
}

.giris-cagri__dugme {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.52rem 0.95rem;
    border: 0;
    border-radius: 9px;
    background: var(--g-mavi);
    color: #fff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 180ms ease, transform 240ms var(--g-yay), box-shadow 240ms var(--g-yay);
}

.giris-cagri__dugme svg { width: 1rem; height: 1rem; }

.giris-cagri__dugme:hover {
    background: #0f4fd4;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px -10px rgb(19 91 236 / 0.75);
}

.giris-cagri__dugme:active { transform: translateY(0) scale(0.98); }

/* ==========================================================================
   Giriş kartı
   ==========================================================================
   Beyaz bir levha koyu zeminin üstünde yamalı duruyordu; sayfanın parçası
   değil, üstüne yapıştırılmış gibiydi. Kart artık koyu cam: zeminin rengini
   içinden geçiriyor, kompozisyona ait oluyor. Gözü yine kendine çekiyor ama
   ışıkla değil, netlikle. */

.giris-kart {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 16px;
    background: rgb(255 255 255 / 0.055);
    border: 1px solid rgb(255 255 255 / 0.14);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    box-shadow:
        0 24px 60px -28px rgb(0 0 0 / 0.75),
        inset 0 1px 0 rgb(255 255 255 / 0.09);
    overflow: hidden;
    color: var(--g-ak);
}

.giris-kart__bas {
    padding: 1.35rem 1.5rem 1rem;
    text-align: center;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.giris-kart__logo {
    width: 36px;
    height: 36px;
    margin: 0 auto 0.55rem;
    object-fit: contain;
}

.giris-kart__ad {
    margin: 0;
    font-size: 1rem;
    font-weight: 640;
    letter-spacing: -0.024em;
    color: #fff;
}

.giris-kart__alt {
    margin: 0.15rem 0 0;
    color: rgb(238 242 248 / 0.5);
    font-size: 0.78rem;
}

.giris-kart__govde { padding: 1.25rem 1.5rem 1.4rem; }

.giris-alan { margin-bottom: 0.85rem; }

.giris-alan__etiket {
    display: block;
    margin-bottom: 0.35rem;
    color: rgb(238 242 248 / 0.72);
    font-size: 0.76rem;
    font-weight: 570;
}

.giris-alan__kutu { position: relative; }

.giris-alan__im {
    position: absolute;
    top: 50%;
    left: 0.8rem;
    transform: translateY(-50%);
    color: rgb(238 242 248 / 0.38);
    pointer-events: none;
}

.giris-alan__im svg { width: 0.95rem; height: 0.95rem; display: block; }

.giris-kart input[type='text'],
.giris-kart input[type='password'] {
    width: 100%;
    padding: 0.68rem 0.85rem 0.68rem 2.35rem;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 10px;
    background: rgb(255 255 255 / 0.05);
    color: #fff;
    font: inherit;
    font-size: 0.9rem;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 220ms var(--g-yay);
}

.giris-kart input::placeholder { color: rgb(238 242 248 / 0.32); }

.giris-kart input[type='text']:focus,
.giris-kart input[type='password']:focus {
    outline: none;
    background: rgb(255 255 255 / 0.09);
    border-color: rgb(110 163 255 / 0.7);
    box-shadow: 0 0 0 3px rgb(19 91 236 / 0.22);
}

/* Tarayıcı otomatik doldurunca beyaz zemin basıyordu; koyu kartta
   okunmaz hâle geliyordu. */
.giris-kart input:-webkit-autofill,
.giris-kart input:-webkit-autofill:hover,
.giris-kart input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 60px #101725 inset;
    caret-color: #fff;
}

.giris-gonder {
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.72rem 1rem;
    border: 0;
    border-radius: 10px;
    background: var(--g-mavi);
    color: #fff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 620;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 180ms ease, transform 240ms var(--g-yay), box-shadow 240ms var(--g-yay);
}

.giris-gonder:hover {
    background: #2f70f2;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -12px rgb(19 91 236 / 0.85);
}

.giris-gonder:active { transform: translateY(0) scale(0.99); }

/*
 * Giriş sırasındaki durum.
 *
 * `auth.js` yazı ile döneni `hidden` sınıfını alıp vererek değiştiriyor.
 * Önceki işaretlemede dönenin üstünde satır içi `display:none` vardı;
 * satır içi stil sınıfı yendiği için `hidden` kalksa da dönen görünmüyordu.
 * Yazı gizleniyor, dönen gelmiyor, düğme boşalıyordu. Görünürlük artık
 * yalnızca sınıfla belirleniyor.
 */
.giris-gonder .hidden { display: none !important; }

.giris-yukleniyor {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.giris-donen {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid rgb(255 255 255 / 0.35);
    border-top-color: #fff;
    animation: g-donen 700ms linear infinite;
}

@keyframes g-donen { to { transform: rotate(360deg); } }

/* Giriş sürerken tekrar basılmasın: iki istek gitmesin */
.giris-gonder:disabled,
.giris-gonder[aria-busy='true'] { opacity: 0.85; cursor: progress; }

.giris-kart__dip {
    margin: 0.95rem 0 0;
    text-align: center;
    color: rgb(238 242 248 / 0.5);
    font-size: 0.78rem;
}

.giris-kart__dip button {
    border: 0;
    background: transparent;
    color: var(--g-mavi-ac);
    font: inherit;
    font-weight: 620;
    cursor: pointer;
    padding: 0;
}

.giris-kart__dip button:hover { color: #fff; }

/* Kart içindeki durum kutuları da koyu düzene uyuyor */
.giris-kutu--hata {
    margin-top: 0.9rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background: rgb(180 35 31 / 0.16);
    border: 1px solid rgb(248 113 113 / 0.32);
    color: #fecaca;
    font-size: 0.81rem;
}

.giris-kutu--oturum {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background: rgb(255 255 255 / 0.05);
    border: 1px solid rgb(255 255 255 / 0.1);
    text-align: center;
}

.giris-kutu--oturum p { margin: 0; }
.giris-kutu--oturum .oturum-ad { font-size: 0.95rem; font-weight: 620; color: #fff; }
.giris-kutu--oturum .oturum-alt {
    margin-top: 0.15rem;
    margin-bottom: 0.85rem;
    font-size: 0.78rem;
    color: rgb(238 242 248 / 0.55);
}

.giris-cikis {
    flex: none;
    padding: 0.72rem 0.95rem;
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: 10px;
    background: transparent;
    color: rgb(238 242 248 / 0.75);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 590;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.giris-cikis:hover {
    background: rgb(255 255 255 / 0.07);
    color: #fff;
    border-color: rgb(255 255 255 / 0.24);
}

/* ==========================================================================
   Dip
   ========================================================================== */

.giris-dip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.4rem;
    padding: 0 clamp(1rem, 4vw, 2.5rem) 1.4rem;
    color: rgb(238 242 248 / 0.42);
    font-size: 0.79rem;
}

.giris-dip a { color: rgb(238 242 248 / 0.62); text-decoration: none; }
.giris-dip a:hover { color: #fff; }

/* ==========================================================================
   Sohbet düğmesine dikkat çekme
   ==========================================================================
   Hesabı olmayan ziyaretçinin gideceği yer burası. Halka bir kez değil,
   uzun aralıklarla atıyor: göz ucuyla fark ediliyor ama rahatsız etmiyor. */

body.giris #openChat { position: relative; }

body.giris #openChat::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    border: 2px solid rgb(19 91 236 / 0.55);
    opacity: 0;
    pointer-events: none;
    animation: g-halka 4.5s var(--g-yay) infinite;
}

@keyframes g-halka {
    0%, 62% { transform: scale(0.86); opacity: 0; }
    72% { opacity: 0.85; }
    100% { transform: scale(1.25); opacity: 0; }
}

/* ==========================================================================
   Giriş animasyonu
   ========================================================================== */

.g-gir {
    animation: g-gir 700ms var(--g-yay) both;
    animation-delay: calc(var(--s, 0) * 80ms);
}

@keyframes g-gir {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Küçük ekran
   ========================================================================== */

@media (max-width: 1023px) {
    /* Telefonda önce kart: gelen kişi çoğunlukla giriş yapmaya geliyor.
       Anlatım altında, isteyen aşağı iniyor. */
    .giris-orta { grid-template-columns: minmax(0, 1fr); }
    .giris-kart { order: -1; }
    .giris-baslik { max-width: 20ch; }
}

@media (max-width: 560px) {
    /* Çentik dolgusu burada da korunuyor. `padding` kısayolu yazılırsa
       üstteki `padding-top: env(...)` siliniyor ve tam da telefonda,
       yani çentiğin olduğu yerde, marka çubuğu çentiğin altına giriyordu. */
    .giris-ust { padding: calc(0.9rem + env(safe-area-inset-top)) 1rem 0.9rem; }
    .giris-rakamlar { gap: 0 1.2rem; }
    .giris-cagri { flex-direction: column; align-items: stretch; text-align: center; }
    .giris-cagri__dugme { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .g-gir, .giris-rozet__nokta, body.giris #openChat::after { animation: none !important; }
    .g-gir { opacity: 1; transform: none; }
    .giris-ozellik, .giris-gonder, .giris-cagri__dugme { transition: none; }
    #girisTuval { transition: none; }
}