/* Giriş ekranı — iki sütun: sol form, sağ WebGL sahnesi (public/js/login-3d.js).
   Bu sayfa panelin tema sisteminin DIŞINDA ve her zaman koyu; renkler panelin
   koyu teması + marka indigosu ile aynı. form-system.css bilerek yüklenmiyor
   (input'lara !important dayatıyor). */
.lg-body {
    --lg-bg: #14151f;
    --lg-yuzey: #1b1d2a;
    --lg-yuzey-2: #20222f;
    --lg-cizgi: #33364a;
    --lg-ink: #eef0f7;
    --lg-muted: #9297b3;
    --lg-marka: #4f46e5;
    --lg-marka-acik: #6366f1;
    --lg-hata: #f87171;
    --lg-uyari: #fbbf24;
    margin: 0;
    background: var(--lg-bg);
    color: var(--lg-ink);
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    -webkit-font-smoothing: antialiased;
}
.lg-body *, .lg-body *::before, .lg-body *::after { box-sizing: border-box; }

.lg { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(380px, 5fr) minmax(0, 7fr); }

/* ---------- Sol panel ---------- */
.lg__form { display: flex; align-items: center; justify-content: center; padding: 40px 32px; background: var(--lg-bg); position: relative; z-index: 1; }
.lg__form-inner { width: 100%; max-width: 400px; }
.lg__logo { display: inline-block; margin-bottom: 36px; line-height: 0; border-radius: 6px; }
.lg__logo img { display: block; width: 150px; height: auto; }
.lg__logo:focus-visible { outline: 2px solid var(--lg-marka-acik); outline-offset: 6px; }
.lg__title { margin: 0 0 6px; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.lg__lede { margin: 0 0 28px; color: var(--lg-muted); font-size: 15px; line-height: 1.5; }

.lg-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.45; margin-bottom: 20px; border: 1px solid transparent; }
.lg-alert[hidden] { display: none; }
.lg-alert i { margin-top: 2px; }
.lg-alert--danger { background: rgba(220, 38, 38, .12); border-color: rgba(248, 113, 113, .35); color: #fecaca; }
.lg-alert--danger i { color: var(--lg-hata); }
.lg-alert--warn { background: rgba(217, 119, 6, .12); border-color: rgba(251, 191, 36, .35); color: #fde68a; }
.lg-alert--warn i { color: var(--lg-uyari); }

.lg-field { margin-bottom: 18px; }
.lg-field > label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: #c4c7d6; }
.lg-field__hata { margin: 7px 0 0; font-size: 13px; color: var(--lg-hata); }

.lg-input { position: relative; display: flex; align-items: center; background: var(--lg-yuzey-2); border: 1px solid var(--lg-cizgi); border-radius: 12px; transition: border-color .15s, box-shadow .15s, background .15s; }
.lg-input > i { position: absolute; left: 14px; color: var(--lg-muted); font-size: 15px; pointer-events: none; transition: color .15s; }
.lg-input input { width: 100%; height: 48px; padding: 0 14px 0 42px; background: transparent; border: 0; outline: 0; color: var(--lg-ink); font: inherit; font-size: 15px; border-radius: 12px; }
.lg-input input::placeholder { color: #6b7189; }
.lg-input:hover { border-color: #4a4e69; }
.lg-input:focus-within { border-color: var(--lg-marka-acik); box-shadow: 0 0 0 3px rgba(99, 102, 241, .28); background: #232536; }
.lg-input:focus-within > i { color: var(--lg-marka-acik); }
.lg-input.is-invalid { border-color: var(--lg-hata); }
.lg-input.is-invalid:focus-within { box-shadow: 0 0 0 3px rgba(248, 113, 113, .25); }
/* Tarayıcı otomatik doldurma beyaz zemini */
.lg-input input:-webkit-autofill { -webkit-text-fill-color: var(--lg-ink); caret-color: var(--lg-ink); box-shadow: 0 0 0 1000px #232536 inset; transition: background-color 9999s; }
.lg-input__goz { position: absolute; right: 6px; width: 36px; height: 36px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 8px; color: var(--lg-muted); cursor: pointer; }
.lg-input__goz:hover { color: var(--lg-ink); background: rgba(255, 255, 255, .06); }
.lg-input__goz:focus-visible { outline: 2px solid var(--lg-marka-acik); outline-offset: 1px; }
.lg-input input[type="password"], .lg-input input.lg-sifre-acik { padding-right: 48px; }

.lg-recaptcha { min-height: 78px; overflow: hidden; }
/* Widget iframe 304x78, içindeki kutu 1px boşluk + 1px gri kenarlıklı; çerçeve ikisini de kırpıp yerine
   inputlarla aynı kenarlık/köşeyi koyar. #222 = Google koyu temasının zemini. */
.lg-recaptcha__kutu { width: 301px; height: 76px; overflow: hidden; border: 1px solid var(--lg-cizgi); border-radius: 12px; background: #222; transform-origin: 0 0; }
.lg-recaptcha__kutu .g-recaptcha { margin: -2px; }
/* Sayfa color-scheme:dark, Google'ın iframe'i açık şemada: şemalar farklı olunca
   tarayıcı iframe'in arkasını opak BEYAZ boyar (köşelerde beyaz çizgiler).
   iframe'i aynı şemaya almak arkayı saydam bırakır. */
.lg-recaptcha iframe { color-scheme: light; display: block; }

.lg-btn { position: relative; width: 100%; height: 50px; margin-top: 6px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--lg-marka-acik), var(--lg-marka)); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 22px -8px rgba(79, 70, 229, .75); transition: transform .12s, box-shadow .15s, filter .15s; }
.lg-btn:hover { filter: brightness(1.08); box-shadow: 0 12px 26px -8px rgba(79, 70, 229, .85); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lg-btn__yukleniyor { display: none; }
.lg-btn.is-loading { cursor: progress; filter: none; pointer-events: none; opacity: .9; }
.lg-btn.is-loading .lg-btn__metin { display: none; }
.lg-btn.is-loading .lg-btn__yukleniyor { display: inline; }
.lg-btn:disabled { opacity: .6; cursor: not-allowed; }

.lg__ipucu { margin: 22px 0 0; padding: 10px 12px; border: 1px dashed var(--lg-cizgi); border-radius: 10px; color: var(--lg-muted); font-size: 12.5px; }
.lg__ipucu strong { color: var(--lg-ink); }
.lg__alt { margin: 26px 0 0; color: #6b7189; font-size: 12.5px; }

/* ---------- Sağ panel (WebGL) ---------- */
.lg__sahne { position: relative; overflow: hidden; background: #0b0c14; isolation: isolate; pointer-events: none; }
/* WebGL çalışmasa da görünen statik zemin = yedek görünüm */
.lg__sahne-zemin {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(60% 55% at 70% 30%, rgba(99, 102, 241, .45), transparent 70%),
        radial-gradient(50% 50% at 25% 75%, rgba(34, 211, 238, .16), transparent 70%),
        radial-gradient(40% 40% at 85% 85%, rgba(167, 139, 250, .25), transparent 70%),
        linear-gradient(160deg, #11122a 0%, #0b0c14 60%);
}
.lg__sahne-zemin::after {
    content: ""; position: absolute; inset: 0; opacity: .5;
    background-image: radial-gradient(rgba(165, 180, 252, .45) 1px, transparent 1.5px);
    background-size: 38px 38px;
    -webkit-mask-image: radial-gradient(circle at 60% 40%, #000, transparent 70%);
            mask-image: radial-gradient(circle at 60% 40%, #000, transparent 70%);
}
.lg__canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.6s ease; pointer-events: none; }
.lg__sahne.is-hazir .lg__canvas { opacity: 1; }
.lg__sahne-yazi { position: absolute; left: 48px; right: 48px; bottom: 44px; z-index: 2; max-width: 440px; }
.lg__sahne-etiket { display: inline-block; padding: 5px 12px; border: 1px solid rgba(165, 180, 252, .35); border-radius: 999px; background: rgba(79, 70, 229, .18); color: #c7d2fe; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px); }
.lg__sahne-yazi p { margin: 14px 0 0; color: rgba(238, 240, 247, .82); font-size: 18px; line-height: 1.5; font-weight: 500; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.lg__sahne::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(11, 12, 20, .85), transparent 38%), linear-gradient(to right, rgba(20, 21, 31, .9), transparent 14%); }

/* ---------- Tablet: sahne üstte ince bir şerit ---------- */
@media (max-width: 1000px) {
    .lg { grid-template-columns: 1fr; grid-template-rows: 220px auto; }
    .lg__sahne { order: -1; }
    .lg__sahne::before { background: linear-gradient(to top, rgba(20, 21, 31, 1), transparent 60%); }
    .lg__sahne-yazi { display: none; }
    .lg__form { align-items: flex-start; padding: 28px 28px 48px; }
}
/* ---------- Mobil: 3D alan gizli, form öncelikli ---------- */
@media (max-width: 640px) {
    .lg { grid-template-rows: auto; }
    .lg__sahne { display: none; }
    .lg__form { padding: 28px 20px 40px; }
    .lg__logo { margin-bottom: 28px; }
    .lg__title { font-size: 24px; }
    /* reCAPTCHA (304px) dar ekranda taşmasın */
    .lg-recaptcha__kutu { transform: scale(.92); }
}
@media (max-width: 340px) { .lg-recaptcha__kutu { transform: scale(.82); } }

@media (prefers-reduced-motion: reduce) {
    .lg-input, .lg-btn, .lg__canvas { transition: none; }
}