/* ============================================================================
   GİRİŞ / KURULUM / RANDEVU ONAYI KABUĞU ("Dalga")
   ----------------------------------------------------------------------------
   _AuthLayout'un görünümü: tam ekran canvas dalgalar (js/giris-dalga.js),
   kartın arkasında nefes alan ışık, ortada buzlu cam kart. Dalga renkleri
   temaya göre burada tanımlı (--gd-*); geri kalan her renk site.css
   token'larından. Yüzen etiketli alanlar (.gi-alan) Login formunda kullanılır;
   Setup ve RandevuOnay eski .form-row düzeniyle aynı kartta çalışmaya devam eder.
   ========================================================================== */

/* ---------- dalga renkleri (r,g,b) ve zemin */
:root {
    --gd-1: 34,184,198; --gd-2: 127,227,208; --gd-3: 12,131,144;
    /* giriş düğmesi: temaya göre gradyan uçları ve yazı rengi */
    --gd-buton-a: #22b8c6; --gd-buton-b: #0c8390; --gd-buton-yazi: #ffffff;
    --gd-zemin-a: #f3fbfc; --gd-zemin-b: #dff3f6;
    --gd-kart: rgba(255,255,255,.72); --gd-kart-cizgi: rgba(255,255,255,.9);
    --gd-kart-golge: rgba(12,60,70,.16);
}
[data-theme="koyu"] {
    --gd-1: 47,201,215; --gd-2: 20,110,122; --gd-3: 122,224,234;
    /* Koyu temada "primary-dark" açık tondur (#7ae0ea); düğmede neon kaçmasın diye derin turkuaz. */
    --gd-buton-a: #22b8c6; --gd-buton-b: #0f7d89; --gd-buton-yazi: #ffffff;
    --gd-zemin-a: #0d1418; --gd-zemin-b: #0f2228;
    --gd-kart: rgba(26,34,42,.66); --gd-kart-cizgi: rgba(255,255,255,.12);
    --gd-kart-golge: rgba(0,0,0,.45);
}
[data-theme="kurumsal"] {
    --gd-1: 47,75,124; --gd-2: 122,150,196; --gd-3: 29,49,89;
    --gd-buton-a: #35538a; --gd-buton-b: #1d3159; --gd-buton-yazi: #ffffff;
    --gd-zemin-a: #f4f5f8; --gd-zemin-b: #e3e7ef;
}
[data-theme="zumrut"] {
    --gd-1: 15,157,122; --gd-2: 120,220,190; --gd-3: 10,111,87;
    --gd-buton-a: #16a884; --gd-buton-b: #0a6f57; --gd-buton-yazi: #ffffff;
    --gd-zemin-a: #f1f9f5; --gd-zemin-b: #dcefe6;
}

.login-page {
    position: relative; min-height: 100vh;
    display: grid; place-items: center; padding: 84px 20px 40px;
    background: linear-gradient(180deg, var(--gd-zemin-a), var(--gd-zemin-b));
    isolation: isolate;
}
.gi-dalga { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; pointer-events: none; }
/* Kartın arkasında 7 saniyede bir nefes alan ışık. */
.gi-nefes {
    position: fixed; left: 50%; top: 50%; width: 70vmin; height: 70vmin; z-index: -1; pointer-events: none;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gd-1), .28), rgba(var(--gd-1), 0) 70%);
    animation: giNefes 7s ease-in-out infinite;
}
@keyframes giNefes { 50% { transform: translate(-50%, -50%) scale(1.18); opacity: .7; } }

/* Sağ üst: tema seçici (site.css'teki .tema-secici konumunu bırakır). */
.gi-ust { position: fixed; top: 22px; right: 26px; z-index: 2; display: flex; justify-content: flex-end; align-items: center; pointer-events: none; }
.gi-ust > * { pointer-events: auto; }
.login-page .tema-secici { position: static; padding: 3px; border-radius: 999px; background: var(--gd-kart); border: 1px solid var(--gd-kart-cizgi); backdrop-filter: blur(10px); }

/* ---------- kart */
.login-shell { width: min(100%, 440px); padding: 0; }
.login-box {
    width: 100%; padding: 36px 36px 28px; border-radius: 26px;
    background: var(--gd-kart); border: 1px solid var(--gd-kart-cizgi);
    backdrop-filter: blur(22px) saturate(1.3);
    box-shadow: 0 30px 80px var(--gd-kart-golge), inset 0 1px 0 rgba(255,255,255,.5);
    display: grid; gap: 20px;
    animation: giGir .8s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes giGir { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
/* Marka: gradyanlı diş + aralıklı HKTS yan yana (yan menüdeki markanın büyüğü),
   altında kart başlığı. Disk, halka, hale yok. */
.login-box .brand { display: grid; justify-items: center; gap: 14px; margin: 0; }
.gi-logo { display: inline-flex; align-items: center; gap: 10px; }
.gi-logo img { width: 44px; height: 44px; filter: drop-shadow(0 6px 14px rgba(var(--gd-1), .3)); }
.gi-logo b { font-size: 26px; font-weight: 800; letter-spacing: .14em; color: var(--hkts-heading); line-height: 1; }
.gi-kart-baslik { font-size: 21px; font-weight: 700; color: var(--hkts-heading); letter-spacing: -.01em; }
.login-box .login-alt-baslik { margin: -10px 0 0; font-size: 13px; color: var(--hkts-muted); }
.login-box form { display: grid; gap: 14px; margin: 0; }
.login-box .alert { margin: 0; }
.login-box .form-row { margin: 0; }
.login-box .form-row input { height: 48px; border-radius: 12px; }

/* Yüzen etiketli alan: etiket odaklanınca ya da doluyken yukarı küçülür. */
.gi-alan { position: relative; }
.gi-alan input {
    width: 100%; height: 56px; padding: 22px 46px 6px 16px; border-radius: 14px;
    border: 1px solid var(--hkts-input-border); background: var(--hkts-card-bg); color: var(--hkts-heading); font-size: 14.5px;
    transition: border-color .15s, box-shadow .15s;
}
.gi-alan input:focus { outline: none; border-color: var(--hkts-primary); box-shadow: 0 0 0 4px var(--hkts-focus-ring); }
.gi-alan input::placeholder { color: transparent; }
.gi-alan label { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--hkts-muted); pointer-events: none; transition: top .15s, font-size .15s, color .15s; }
.gi-alan input:focus + label, .gi-alan input:not(:placeholder-shown) + label { top: 15px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--hkts-primary-dark); }
.gi-goz {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
    border: 0; border-radius: 10px; background: transparent; color: var(--hkts-muted); cursor: pointer; display: grid; place-items: center; font-size: 15px;
}
.gi-goz:hover { background: var(--hkts-surface-2); color: var(--hkts-heading); }

/* Giriş düğmesi: kompakt, tema gradyanı, metnin yanında küçük ok. Üzerine gelince
   ok sağa kayar; gönderimde metin "Giriş yapılıyor…" olur, ok dönen simgeye döner. */
.login-gonder {
    position: relative; width: 100%; height: 46px; padding: 0 18px; border: 0; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 14.5px; font-weight: 700; color: var(--gd-buton-yazi); cursor: pointer;
    background: linear-gradient(120deg, var(--gd-buton-a), var(--gd-buton-b));
    box-shadow: 0 8px 20px rgba(var(--gd-1), .28);
    transition: transform .12s, box-shadow .15s, filter .15s;
}
.login-gonder:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(var(--gd-1), .36); filter: brightness(1.04); }
.login-gonder:active { transform: translateY(0); }
.login-gonder:focus-visible { outline: 3px solid var(--hkts-focus-ring); outline-offset: 2px; }
.login-gonder .ok { font-size: 12px; transition: transform .2s; }
.login-gonder:hover .ok { transform: translateX(3px); }
.login-gonder.yukleniyor { pointer-events: none; filter: saturate(.85); }
.login-gonder.yukleniyor .ok { animation: giDon 1s linear infinite; }
@keyframes giDon { to { transform: rotate(360deg); } }
/* Diğer kartlar (kurulum, şifre sıfırlama) aynı düğmeyi ikonlu düz metinle kullanır. */
.login-gonder.btn { gap: 8px; }

.gi-yardim { margin: 0; text-align: center; font-size: 12.5px; color: var(--hkts-muted); }
.gi-alt { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 12px; color: var(--hkts-muted); padding-top: 14px; border-top: 1px solid var(--hkts-border); }
.gi-alt > i { width: 6px; height: 6px; border-radius: 50%; background: var(--hkts-success); }

@media (prefers-reduced-motion: reduce) {
    .gi-nefes, .login-box, .login-gonder .ok { animation: none !important; }
}
@media (max-width: 520px) {
    .login-page { padding: 76px 14px 28px; }
    .gi-ust { top: 12px; right: 14px; }
    .login-box { padding: 28px 22px 22px; border-radius: 22px; }
}

/* Şifremi unuttum satırı ve kart altındaki bağlantılar. */
.gi-satir { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12.5px; color: var(--hkts-muted); padding-top: 4px; }
.gi-satir a, .gi-alt a { color: var(--hkts-primary-dark); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.gi-satir a:hover, .gi-alt a:hover { text-decoration: underline; }
.gi-guvenli { display: inline-flex; align-items: center; gap: 8px; }
.gi-guvenli i { width: 6px; height: 6px; border-radius: 50%; background: var(--hkts-success); }
.login-box .login-alt-baslik { text-align: center; line-height: 1.5; }