body{

  margin: 0;

  padding: 0;



  min-height: 100vh;



  display: flex;

  justify-content: center;

  align-items: center;



  background:

  radial-gradient(circle at top left,#7b2cff44,transparent 30%),

  radial-gradient(circle at bottom right,#c026ff22,transparent 30%),

  #090312;



  overflow: hidden;

}



/* CONTAINER */

.form-container {

  width: 250px;

  height: 600px;



  background:

  linear-gradient(

  180deg,

  rgba(28, 10, 45, 0.95) 0%,

  rgba(15, 6, 25, 0.98) 100%

  );



  border-radius: 28px;



  box-sizing: border-box;



  padding: 35px 30px;



  border: 1px solid rgba(255,255,255,0.08);



  backdrop-filter: blur(14px);



  box-shadow:

  0 0 25px rgba(123,44,255,.30),

  0 0 60px rgba(192,38,255,.12);



  position: relative;

  overflow: hidden;

}



/* GLOW */

.form-container::before{

  content: "";



  position: absolute;

  inset: -2px;



  background:

  linear-gradient(

  135deg,

  #c026ff,

  #7b2cff,

  #9333ea

  );



  opacity: .15;



  filter: blur(25px);



  z-index: -1;

}



/* TITLE */

.title {

  text-align: center;



  margin: 10px 0 30px 0;



  font-size: 34px;

  font-weight: 900;



  font-family: Arial, Helvetica, sans-serif;



  background:

  linear-gradient(

  90deg,

  #f0abfc,

  #c026ff,

  #7b2cff

  );



  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;



  letter-spacing: 1px;

}



/* FORM */

.form {

  width: 100%;



  display: flex;

  flex-direction: column;



  gap: 18px;



  margin-bottom: 18px;

}



/* INPUT */

.input {

  border-radius: 18px;



  border: 1px solid rgba(255,255,255,0.08);



  outline: 0 !important;



  background:

  rgba(255,255,255,0.04);



  color: white;



  box-sizing: border-box;



  padding: 15px 18px;



  transition: .3s ease;



  box-shadow:

  inset 0 0 8px rgba(255,255,255,.02);

}



.input::placeholder{

  color: #9ca3af;

}



.input:focus {

  border-color: #c026ff;



  box-shadow:

  0 0 12px rgba(192,38,255,.35),

  0 0 25px rgba(123,44,255,.2);

}



/* FORGOT PASSWORD */

.page-link {

  text-decoration: none;



  margin: 0;



  text-align: end;

}



.page-link-label {

  cursor: pointer;



  font-size: 11px;

  font-weight: 700;



  color: #d946ef;



  transition: .3s ease;

}



.page-link-label:hover {

  color: #f0abfc;

}



/* LOGIN BUTTON */

.form-btn {

  padding: 14px 15px;



  border-radius: 18px;



  border: 0 !important;

  outline: 0 !important;



  background:

  linear-gradient(

  135deg,

  #c026ff,

  #7b2cff,

  #9333ea

  );



  background-size: 300% 300%;



  animation: gradientMove 5s ease infinite;



  color: white;



  font-size: 15px;

  font-weight: bold;



  cursor: pointer;



  box-shadow:

  0 0 18px rgba(123,44,255,.35),

  0 0 35px rgba(192,38,255,.15);



  transition: .3s ease;

}



.form-btn:hover{

  transform: translateY(-3px) scale(1.02);



  box-shadow:

  0 0 25px rgba(192,38,255,.45),

  0 0 45px rgba(123,44,255,.25);

}



.form-btn:active {

  transform: scale(0.96);

}



/* SIGNUP */

.sign-up-label {

  margin: 0;



  font-size: 11px;



  color: #a1a1aa;



  text-align: center;

}



.sign-up-link {

  margin-left: 4px;



  font-size: 11px;



  text-decoration: none;



  color: #d946ef;



  cursor: pointer;



  font-weight: 800;



  transition: .3s ease;

}



.sign-up-link:hover{

  color: #f0abfc;

}



/* SOCIAL */

.buttons-container {

  width: 100%;



  display: flex;

  flex-direction: column;



  justify-content: flex-start;



  margin-top: 22px;



  gap: 15px;

}



.apple-login-button,

.google-login-button {



  border-radius: 18px;



  box-sizing: border-box;



  padding: 13px 15px;



  cursor: pointer;



  display: flex;

  justify-content: center;

  align-items: center;



  font-size: 12px;



  gap: 8px;



  transition: .3s ease;



  border: 1px solid rgba(255,255,255,0.08);



  background:

  rgba(255,255,255,0.04);



  color: white;



  box-shadow:

  0 0 15px rgba(123,44,255,.08);

}



.apple-login-button:hover,

.google-login-button:hover{



  transform: translateY(-4px);



  border-color: #c026ff;



  box-shadow:

  0 0 18px rgba(192,38,255,.25);

}



.apple-login-button {

  color: #f3f4f6;

}



.google-login-button {

  color: #f3f4f6;

}



.apple-icon,

.google-icon {

  font-size: 18px;



  margin-bottom: 1px;

}



/* BUTTON ANIMATION */

@keyframes gradientMove{



  0%{

    background-position: 0% 50%;

  }



  50%{

    background-position: 100% 50%;

  }



  100%{

    background-position: 0% 50%;

  }



}



/* TITLE */

.title {

  font-size: 42px;

}



/* INPUT */

.input {

  font-size: 16px;

  padding: 18px 20px;

}



.input::placeholder{

  font-size: 15px;

}



/* FORGOT PASSWORD */

.page-link-label {

  font-size: 14px;

}



/* LOGIN BUTTON */

.form-btn {

  font-size: 18px;

  padding-block: 17px;

}



/* SIGN UP TEXT */

.sign-up-label {

  font-size: 14px;

}



.sign-up-link {

  font-size: 14px;

}



/* SOCIAL BUTTONS */

.apple-login-button,

.google-login-button {

  font-size: 15px;

  padding: 15px;

}



.apple-icon,

.google-icon {

  font-size: 22px;

}







body{

  margin: 0;

  padding: 0;



  min-height: 100vh;



  display: flex;

  justify-content: center;

  align-items: center;



  background:

  radial-gradient(circle at top left,#7b2cff44,transparent 30%),

  radial-gradient(circle at bottom right,#c026ff22,transparent 30%),

  #090312;



  overflow: hidden;



  position: relative;

}







/* FORM ÜSTTE KALSIN */

.form-container{

  position: relative;

  z-index: 2;

}



/* HAFİF HAREKET */

@keyframes logoFloat{



  0%{

    transform: translateY(0px) scale(1);

  }



  50%{

    transform: translateY(-15px) scale(1.03);

  }



  100%{

    transform: translateY(0px) scale(1);

  }



}





*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: Arial, Helvetica, sans-serif;

}



body{

  min-height: 100vh;



  display: flex;

  justify-content: center;

  align-items: center;



  background:

  radial-gradient(circle at top left,#7b2cff33,transparent 30%),

  radial-gradient(circle at bottom right,#c026ff22,transparent 30%),

  #090312;



  overflow: hidden;



  position: relative;

}



/* ARKA LOGO */

.background-logo{

  position: fixed;



  inset: 0;



  display: flex;

  justify-content: center;

  align-items: center;



  z-index: 0;



  overflow: hidden;

}



.background-logo img{

  width: 100vw;



  opacity: 0.06;



  filter:

  blur(6px)

  drop-shadow(0 0 35px #7b2cff);



  animation: logoFloat 8s ease-in-out infinite;

}



/* LOGIN CARD */

.form-container {

  width: 500px;



  padding: 35px;



  border-radius: 28px;



  background:

  linear-gradient(

  180deg,

  rgba(25, 10, 40, 0.92),

  rgba(12, 5, 22, 0.96)

  );



  border: 1px solid rgba(255,255,255,0.08);



  backdrop-filter: blur(14px);



  box-shadow:

  0 0 25px rgba(123,44,255,.25),

  0 0 55px rgba(192,38,255,.12);



  position: relative;

  z-index: 2;

}



/* TITLE */

.title {

  text-align: center;



  font-size: 42px;

  font-weight: 900;



  margin-bottom: 30px;



  background:

  linear-gradient(

  90deg,

  #f0abfc,

  #c026ff,

  #7b2cff

  );



  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



/* FORM */

.form {

  display: flex;

  flex-direction: column;



  gap: 18px;

}



/* INPUT */

.input {

  width: 100%;



  padding: 17px 20px;



  border-radius: 18px;



  border: 1px solid rgba(255,255,255,0.08);



  background:

  rgba(255,255,255,0.04);



  color: white;



  font-size: 16px;



  outline: none;



  transition: .3s ease;

}



.input::placeholder{

  color: #9ca3af;

}



.input:focus{

  border-color: #c026ff;



  box-shadow:

  0 0 15px rgba(192,38,255,.35),

  0 0 25px rgba(123,44,255,.15);

}



/* FORGOT PASSWORD */

.page-link{

  text-align: right;

}



.page-link-label{

  color: #d946ef;



  font-size: 14px;



  cursor: pointer;



  transition: .3s ease;

}



.page-link-label:hover{

  color: #f0abfc;

}



/* BUTTON */

.form-btn {

  width: 100%;



  padding: 16px;



  border: none;



  border-radius: 18px;



  background:

  linear-gradient(

  135deg,

  #c026ff,

  #7b2cff,

  #9333ea

  );



  background-size: 300% 300%;



  animation: gradientMove 5s ease infinite;



  color: white;



  font-size: 18px;

  font-weight: bold;



  cursor: pointer;



  box-shadow:

  0 0 20px rgba(123,44,255,.35),

  0 0 35px rgba(192,38,255,.15);



  transition: .3s ease;

}



.form-btn:hover{

  transform: translateY(-3px) scale(1.02);



  box-shadow:

  0 0 25px rgba(192,38,255,.45),

  0 0 45px rgba(123,44,255,.25);

}



/* SIGNUP */

.sign-up-label{

  margin-top: 25px;



  text-align: center;



  color: #b4b4c7;



  font-size: 15px;

}



.sign-up-link{

  margin-left: 6px;



  color: #d946ef;



  font-weight: bold;



  cursor: pointer;



  transition: .3s ease;

}



.sign-up-link:hover{

  color: #f0abfc;

}



/* LOGO FLOAT */

@keyframes logoFloat{



  0%{

    transform: scale(1.08) translateY(0px);

  }



  50%{

    transform: scale(1.12) translateY(-12px);

  }



  100%{

    transform: scale(1.08) translateY(0px);

  }



}



/* BUTTON ANIMATION */

@keyframes gradientMove{



  0%{

    background-position: 0% 50%;

  }



  50%{

    background-position: 100% 50%;

  }



  100%{

    background-position: 0% 50%;

  }



}







.background-logo img{

  width: 100vw;



  opacity: 0.07;



  filter:

  blur(7px)

  drop-shadow(0 0 45px #7b2cff);



  animation: logoFloat 8s ease-in-out infinite;

}