/* ==========================================================================
   PengusCraft — giris / dogrulama / sifre sifirlama ekranlari
   Yalnizca bu sayfalarda yuklenir. Sinif adlari "gr-" on ekli.
   ========================================================================== */

.gr-sahne{padding:64px 0 80px}

.gr-kart{
  max-width:400px;margin:0 auto;padding:36px 32px 30px;
  background:#fff;border:1px solid var(--cizgi);border-radius:14px;
  box-shadow:0 10px 30px -18px rgba(16,58,74,.35);
}
.gr-logo{display:block;width:56px;height:56px;margin:0 auto 18px;border-radius:12px}
.gr-kart h1{margin:0 0 6px;font-size:1.45rem;text-align:center}
.gr-kart .gr-aciklama{margin:0 0 24px;text-align:center;color:var(--yazi-orta);font-size:.92rem}
.gr-kart .gr-aciklama b{color:var(--yazi);font-weight:600}

/* alanlar */
.gr-alan{margin-bottom:16px}
.gr-alan label{display:block;margin-bottom:6px;font-size:.86rem;font-weight:600}
.gr-girdi{position:relative}
.gr-alan input{
  width:100%;height:46px;padding:0 14px;
  background:#fff;color:var(--yazi);
  border:1px solid var(--cizgi-acik);border-radius:9px;
  font:inherit;font-size:.95rem;transition:border-color .15s, box-shadow .15s;
}
.gr-alan input:focus{outline:none;border-color:var(--vurgu);box-shadow:0 0 0 3px rgba(22,184,198,.15)}
.gr-girdi input{padding-right:44px}

.gr-goz{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;border-radius:7px;background:none;
  color:var(--yazi-soluk);cursor:pointer;display:grid;place-items:center;
}
.gr-goz:hover{color:var(--vurgu-acik)}
.gr-goz svg{width:18px;height:18px}
.gr-goz .kapali{display:none}
.gr-goz.acik .acik-ikon{display:none}
.gr-goz.acik .kapali{display:block}

.gr-satir{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 20px;font-size:.88rem}
.gr-satir label{display:flex;align-items:center;gap:8px;color:var(--yazi-orta);cursor:pointer}
.gr-satir input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--vurgu-koyu)}

.gr-bag{color:var(--vurgu-acik);font-weight:600}
.gr-bag:hover{text-decoration:underline}

/* buton */
.gr-dugme{
  width:100%;height:46px;border:0;border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font:inherit;font-size:.96rem;font-weight:600;color:#fff;background:var(--vurgu-koyu);
  transition:background .15s;
}
.gr-dugme:hover{background:var(--vurgu-acik)}
.gr-dugme:disabled{opacity:.7;cursor:default}
.gr-dugme .gr-donen{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:gr-don .7s linear infinite}
.gr-dugme.yukleniyor .gr-donen{display:block}
.gr-dugme.yukleniyor .gr-dugme-metin{display:none}
@keyframes gr-don{to{transform:rotate(360deg)}}

.gr-metin-dugme{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-weight:600;color:var(--vurgu-acik)}
.gr-metin-dugme:hover:not(:disabled){text-decoration:underline}
.gr-metin-dugme:disabled{color:var(--yazi-soluk);cursor:default}

/* bildirim */
.gr-not{margin:0 0 18px;padding:11px 13px;border-radius:9px;font-size:.88rem;line-height:1.5}
.gr-not.hata{background:#fdf1f1;border:1px solid #f2cccc;color:#9b3434}
.gr-not.ok{background:#eef9f3;border:1px solid #c5e8d4;color:#1d6e48}

/* kartin altindaki tek satir */
.gr-alt{margin:18px 0 0;text-align:center;font-size:.88rem;color:var(--yazi-orta)}

/* 6 haneli kod */
.gr-kod{display:flex;gap:8px;justify-content:center;margin:0 0 20px}
.gr-kod input{
  width:46px;height:54px;padding:0;text-align:center;
  font:700 1.4rem ui-monospace,Consolas,monospace;color:var(--yazi);
  background:#fff;border:1px solid var(--cizgi-acik);border-radius:9px;
}
.gr-kod input:focus{outline:none;border-color:var(--vurgu);box-shadow:0 0 0 3px rgba(22,184,198,.15)}
.gr-kod.hatali input{border-color:#e39a9a}

@media (max-width:480px){
  .gr-sahne{padding:28px 0 48px}
  .gr-kart{padding:28px 20px 24px}
  .gr-kod{gap:6px}
  .gr-kod input{width:42px;height:50px}
}