:root {
  --encre: #10141b;
  --douce: #5a6472;
  --faible: #98a1af;
  --bord: #e2e6ee;
  --accent: #2555ff;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

.giris-sayfa {
  margin: 0; min-height: 100vh; position: relative; overflow-x: hidden;
  font-family: Poppins, "Segoe UI", system-ui, sans-serif;
  color: var(--encre); background: #f3f4f7;
  display: grid; place-items: center; padding: 2rem 1.25rem;
}

.giris-marka {
  position: absolute; top: 1.6rem; left: 2rem; z-index: 3;
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.03em;
  color: var(--accent); text-decoration: none;
}

/*
 * Décor : des maquettes de site en enfilade, dessinées en CSS. Aucune image à
 * charger, et le fond reste net quelle que soit la taille de l'écran.
 */
.giris-fon { position: absolute; inset: 0; overflow: hidden; }
.giris-fon .ekran {
  position: absolute; width: 12rem; height: 17rem; border-radius: 10px;
  background: #fff; box-shadow: 0 20px 50px rgba(16,20,27,.13);
  transform: rotate(-9deg) skewY(4deg); overflow: hidden;
}
.giris-fon .ekran i { display: block; height: 5.5rem; }
.giris-fon .ekran b { display: block; height: .5rem; border-radius: 3px;
  background: #e6e9f0; margin: .9rem .9rem .4rem; width: 55%; }
.giris-fon .ekran s { display: block; height: .34rem; border-radius: 3px;
  background: #eef0f5; margin: 0 .9rem .35rem; }

.giris-orta { position: relative; z-index: 2; width: min(28rem, 100%); }

.kart {
  position: relative; background: #fff; border-radius: 14px; padding: 2.5rem 2.25rem 1.75rem;
  box-shadow: 0 24px 64px rgba(16,20,27,.14);
}
.kart h1 { margin: 0 0 .35rem; font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; text-align: center; }
.kart__alt { margin: 0 0 1.75rem; text-align: center; font-size: .88rem; color: var(--douce); }
.kart__alt a, .kart__not a { color: var(--accent); }
/* L'e-mail seul sur le premier écran surprend : on annonce la suite. */
.kart__ipucu { margin: .7rem 0 0; text-align: center; font-size: .78rem; color: var(--faible); }
.kart__not { margin: 1.5rem 0 0; font-size: .74rem; color: var(--faible); text-align: center; line-height: 1.6; }
.kart__geri {
  position: absolute; top: 1rem; left: 1rem; border: 0; background: transparent;
  cursor: pointer; font: inherit; font-size: .82rem; color: var(--douce); padding: .3rem;
}
.kart__geri:hover { color: var(--encre); }

.saglayici {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .78rem 1rem; border: 1px solid var(--bord); border-radius: 9px; background: #fff;
  font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; position: relative;
}
.saglayici:hover:not([disabled]) { border-color: #c3cad8; }
.saglayici[disabled] { cursor: not-allowed; color: var(--faible); }
.saglayici[disabled] svg { opacity: .45; }
.saglayici__rozet {
  position: absolute; right: .7rem; font-size: .62rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  background: #f1f3f8; color: var(--faible); border-radius: 999px; padding: .15rem .45rem;
}

.ayirac { display: flex; align-items: center; gap: .85rem; margin: 1.35rem 0; color: var(--faible); font-size: .8rem; }
.ayirac::before, .ayirac::after { content: ""; flex: 1; height: 1px; background: var(--bord); }

.giris-alan { display: grid; gap: .3rem; margin-bottom: .9rem; }
.giris-alan span { font-size: .74rem; font-weight: 600; color: var(--douce); }
.giris-alan input {
  font: inherit; font-size: .92rem; padding: .72rem .9rem; width: 100%;
  border: 1px solid var(--bord); border-radius: 9px; background: #fff; color: inherit;
}
.giris-alan input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,85,255,.14); }
.giris-alan input[readonly] { background: #f7f8fb; color: var(--douce); }

.giris-dugme {
  width: 100%; margin-top: .4rem; padding: .8rem; border: 0; border-radius: 9px;
  background: var(--accent); color: #fff; font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
}
.giris-dugme:hover { background: #1a3fc4; }
.giris-dugme[disabled] { opacity: .55; cursor: progress; }

.giris-hata { margin: 0 0 .5rem; font-size: .82rem; color: #b42318; }
/* « Mot de passe oublié », aligné à droite sous le champ : à sa place quand
   on en a besoin, discret quand on ne le cherche pas. */
.giris-alt { margin: -.4rem 0 .9rem; text-align: right; font-size: .8rem; }
.giris-alt a { color: var(--douce); text-decoration: none; }
.giris-alt a:hover { color: var(--accent); text-decoration: underline; }
/* La confirmation d'envoi : verte, parce qu'il ne s'est rien passé de mal. */
.giris-not { margin: 0 0 .6rem; font-size: .82rem; color: #1e7a45; line-height: 1.5; }

@media (max-width: 640px) {
  .giris-fon { display: none; }
  .kart { padding: 2rem 1.5rem 1.5rem; }
}