/* =====================================================================
 *  GİRİŞ / ŞİFREMİ UNUTTUM - çerçeveli kart, gece mavisi zemin
 *  Sadece görünüm; form alanları ve metinler eski sayfayla aynı.
 * ===================================================================== */
html, body { height:100%; }
body.gr { margin:0; color:#2f3a45; font-family:"Open Sans","Segoe UI",Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased; background:#111a2f; }
.gr * { box-sizing:border-box; }

/* zemin: eski arka plan görseli + gece mavisi örtü */
.gr-zemin { position:fixed; inset:0; z-index:0;
	background:linear-gradient(135deg, rgba(27,42,74,.92) 0%, rgba(26,39,68,.88) 50%, rgba(17,26,47,.95) 100%), url('../img/index-bg.jpg') center/cover no-repeat; }
.gr-zemin:before, .gr-zemin:after { content:""; position:absolute; border-radius:50%; filter:blur(10px); }
.gr-zemin:before { width:520px; height:520px; left:-140px; top:-160px; background:radial-gradient(circle, rgba(61,139,253,.28) 0%, rgba(61,139,253,0) 70%); }
.gr-zemin:after { width:460px; height:460px; right:-120px; bottom:-140px; background:radial-gradient(circle, rgba(143,184,255,.18) 0%, rgba(143,184,255,0) 70%); }

/* ortadaki kart */
.gr-orta { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 16px; }
.gr-kart { width:100%; max-width:410px; background:#fff; border-radius:16px; box-shadow:0 24px 60px rgba(5,10,25,.45), 0 2px 6px rgba(5,10,25,.2); overflow:hidden; animation:grGel .45s ease-out; }
.gr-kart-ust { height:5px; background:linear-gradient(90deg, #1b2a4a 0%, #3d8bfd 50%, #2a4a7f 100%); }
.gr-kart-ic { padding:36px 36px 30px; text-align:center; }
@keyframes grGel { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

.gr-logo { margin:0 auto 22px; min-height:40px; }
.gr-logo img { max-width:210px; max-height:72px; height:auto; }
.gr-kart h3 { font-size:22px; font-weight:600; margin:0 0 6px; color:#1d2633; letter-spacing:-.2px; }
.gr-kart-ic > p { color:#7b8794; margin:0 0 24px; font-size:13.5px; line-height:1.5; }
.gr-kart form { text-align:left; margin-top:0; }

.gr-alan { position:relative; margin-bottom:14px; }
.gr-alan > i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#9aa5b1; width:16px; text-align:center; z-index:2; }
.gr-alan .form-control { height:46px; padding-left:40px; border:1px solid #dde3ea; border-radius:10px; font-size:14px; box-shadow:none; background:#f8fafc; transition:border-color .15s, box-shadow .15s, background .15s; }
.gr-alan .form-control:focus { border-color:#3d8bfd; background:#fff; box-shadow:0 0 0 3px rgba(61,139,253,.15); }
.gr-alan #txtpassword { padding-right:44px; }
.gr-goz { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px; line-height:34px; border:0; background:transparent; color:#9aa5b1; padding:0; cursor:pointer; text-align:center; z-index:2; }
.gr-goz:hover { color:#3d8bfd; }

.gr-hata, .gr-bilgi { border-radius:10px; padding:10px 12px; font-size:13px; margin:2px 0 14px; }
.gr-hata { background:#fdecea; color:#b03a2e; }
.gr-bilgi { background:#eaf2ff; color:#1d4ed8; }

.gr-btn { width:100%; height:46px; margin-top:4px; border:0; border-radius:10px; background:linear-gradient(90deg, #1b2a4a 0%, #2a4a7f 100%); color:#fff; font-weight:600; font-size:15px; letter-spacing:.3px; cursor:pointer; box-shadow:0 6px 16px rgba(27,42,74,.28); transition:filter .15s, transform .05s, box-shadow .15s; }
.gr-btn:hover { filter:brightness(1.12); box-shadow:0 8px 20px rgba(27,42,74,.34); }
.gr-btn:active { transform:translateY(1px); }
.gr-btn[disabled] { opacity:.8; cursor:wait; }

.gr-alt-link { display:block; text-align:center; margin-top:18px; color:#3d8bfd; font-size:13.5px; font-weight:500; }
.gr-alt-link:hover { color:#1d4ed8; text-decoration:none; }

/* kartın altındaki bayi iletişim bilgileri */
.gr-iletisim { margin-top:22px; text-align:center; color:rgba(255,255,255,.72); font-size:12.5px; line-height:1.7; max-width:410px; }
.gr-iletisim b { color:#fff; font-weight:600; }
.gr-iletisim a { color:#cfe0ff; }

@media (max-width:480px) {
	.gr-orta { justify-content:flex-start; padding-top:40px; }
	.gr-kart-ic { padding:28px 22px 24px; }
}