/**
 * Giriş ekranı — tek kolon kart düzeni.
 *
 * Referans tasarım: üstte görsel, altında başlık ve alt metin, sonra ikonlu
 * dolgu alanlar, anahtar biçiminde "beni hatırla", tam genişlikte koyu
 * düğme, en altta bağlantılar. Aynı düzen her genişlikte geçerli; iki
 * panelli eski kurgu kaldırıldı çünkü masaüstünde ve telefonda farklı
 * ekranlar çıkıyordu.
 *
 * Renkler ve yazı tipi panelin kendi değerleri: Inter, ve seçili panel
 * temasının paleti PHP tarafında satır içi basılıyor.
 *
 * WordPress'in giriş yapısına dokunulmuyor. Marka bloğu login_header
 * kancasıyla gövdenin başına basılıyor; #login'den önce geldiği için
 * sıralama kendiliğinden doğru çıkıyor. Kart iki kardeş öğeden oluşuyor:
 * üst yarı .lfa-login-aside, alt yarı #login. Gölge her ikisine tek yönlü
 * verilir, yoksa birleşme yerinde gölge şeridi kalıyor.
 */

body.lfa-login {
  --lfa-radius: 22px;
  --lfa-radius-sm: 12px;
  --lfa-radius-field: 14px;
  --lfa-card-w: 420px;

  display: flex;
  min-height: 100vh;
  margin: 0;
  padding: 36px 18px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  background: var(--lfa-canvas);
  color: var(--lfa-ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Kartın iki yarısı ------------------------------------------------------ */
.lfa-login-aside,
body.lfa-login #login {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--lfa-card-w);
  border-right: 1px solid var(--lfa-border);
  border-left: 1px solid var(--lfa-border);
  background: var(--lfa-card);
}

.lfa-login-aside {
  position: static;
  display: block;
  padding: 34px 30px 0;
  overflow: visible;
  border-top: 1px solid var(--lfa-border);
  border-radius: var(--lfa-radius) var(--lfa-radius) 0 0;
  box-shadow: 0 -10px 30px rgba(16, 24, 20, 0.05);
}

/*
 * Kenar boşluğu açıkça sıfırlanıyor. Çekirdek #login'e "margin: auto"
 * veriyor; öğe esnek kolonun çocuğu olduğu için dikey auto değerler
 * artan boşluğun tamamını emiyor ve kartı ikiye ayırıyordu.
 */
body.lfa-login #login {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 0 30px 30px;
  border-bottom: 1px solid var(--lfa-border);
  border-radius: 0 0 var(--lfa-radius) var(--lfa-radius);
  box-shadow: 0 12px 30px rgba(16, 24, 20, 0.06);
}

.lfa-login-aside-inner {
  max-width: none;
}

/* Görsel ---------------------------------------------------------------- */
.lfa-login-art {
  margin-bottom: 26px;
  text-align: center;
}

.lfa-login-art img {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
}

.lfa-login-art-logo img {
  max-height: 84px;
}

/* Başlık ve alt metin --------------------------------------------------- */
.lfa-login-aside h2 {
  margin: 0 0 7px;
  color: var(--lfa-aside-ink);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
}

.lfa-login-tagline {
  margin: 0 0 22px;
  max-width: none;
  color: var(--lfa-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
}

/*
 * Maddeler bu düzende gösterilmiyor; referans tasarımda liste yok ve
 * görselle birlikte formu ekranın altına itiyordu. Ayarlardaki
 * "Maddeleri göster" anahtarı bu yüzden bu düzende bir şey değiştirmiyor.
 */
.lfa-login-points {
  display: none;
}

/*
 * Çekirdeğin başlığı gizli kalıyor. Görünür yapıldığında bağlantı metni,
 * satır içi basılan logo arka planıyla aynı kutuda üst üste biniyor.
 * display:none yerine kırpma kullanılıyor: ekran okuyucular sayfanın
 * hangi site olduğunu yine duyurabiliyor.
 */
body.lfa-login #login h1,
body.lfa-login #login .wp-login-logo,
body.lfa-login #login .login__header {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Form ------------------------------------------------------------------ */
body.lfa-login #loginform,
body.lfa-login #lostpasswordform,
body.lfa-login #registerform,
body.lfa-login #resetpassform {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

body.lfa-login form p {
  margin: 0;
}

/*
 * Etiketler yalnızca yer tutucu metinler yerleştirildikten sonra
 * gizleniyor. O iş betikle yapılıyor; betik çalışmazsa etiketler
 * görünür kalır ve alanlar yine anlaşılır olur.
 */
body.lfa-login label[for="user_login"],
body.lfa-login label[for="user_pass"] {
  display: block;
  margin-bottom: 7px;
  color: var(--lfa-muted);
  font-size: 12px;
  font-weight: 600;
}

body.lfa-login.lfa-login-placeholders label[for="user_login"],
body.lfa-login.lfa-login-placeholders label[for="user_pass"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

body.lfa-login form .input,
body.lfa-login input[type="text"],
body.lfa-login input[type="password"],
body.lfa-login input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  margin: 0 0 12px;
  padding: 0 16px 0 44px;
  border: 1px solid transparent;
  border-radius: var(--lfa-radius-field);
  background-color: var(--lfa-field);
  background-repeat: no-repeat;
  background-position: 15px center;
  box-shadow: none;
  color: var(--lfa-ink);
  font-size: 13px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

body.lfa-login #user_login {
  background-image: var(--lfa-icon-user);
}

body.lfa-login #user_pass {
  background-image: var(--lfa-icon-lock);
}

body.lfa-login form .input::placeholder,
body.lfa-login input::placeholder {
  color: var(--lfa-muted);
  opacity: 1;
}

body.lfa-login form .input:focus,
body.lfa-login input[type="text"]:focus,
body.lfa-login input[type="password"]:focus,
body.lfa-login input[type="email"]:focus {
  border-color: var(--lfa-primary);
  background-color: var(--lfa-card);
  box-shadow: 0 0 0 3px var(--lfa-ring);
  outline: none;
}

body.lfa-login .user-pass-wrap,
body.lfa-login .wp-pwd {
  margin-bottom: 0;
}

body.lfa-login .wp-pwd {
  position: relative;
}

body.lfa-login .wp-pwd input {
  padding-right: 48px;
}

body.lfa-login .button.wp-hide-pw {
  position: absolute;
  top: 0;
  right: 4px;
  width: 44px;
  height: 46px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--lfa-muted);
}

body.lfa-login .button.wp-hide-pw:hover {
  color: var(--lfa-primary);
}

body.lfa-login .button.wp-hide-pw:focus {
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

/* "Beni hatırla" anahtarı ----------------------------------------------- */
/*
 * Onay kutusu anahtara dönüştürülüyor. İşaretleme <input><label> sırasında
 * geldiği için etiket order ile sola alınıyor.
 */
body.lfa-login .forgetmenot {
  display: flex;
  margin: 4px 0 20px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  float: none;
  line-height: 1.4;
}

body.lfa-login .forgetmenot label {
  margin: 0;
  color: var(--lfa-ink);
  font-size: 12.5px;
  font-weight: 600;
}

/* Referans tasarımda anahtarın yanında ikon yok. */
body.lfa-login .forgetmenot .dashicons {
  display: none;
}

body.lfa-login #rememberme {
  position: relative;
  width: 38px;
  height: 21px;
  flex: 0 0 38px;
  order: 2;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--lfa-input);
  box-shadow: none;
  cursor: pointer;
  transition: background 0.16s ease;
}

body.lfa-login #rememberme::before {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  margin: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 20, 0.28);
  color: transparent;
  content: "";
  font-size: 0;
  transition: transform 0.16s ease;
}

body.lfa-login #rememberme:checked {
  background: var(--lfa-submit);
}

body.lfa-login #rememberme:checked::before {
  transform: translateX(17px);
}

body.lfa-login #rememberme:focus-visible {
  box-shadow: 0 0 0 3px var(--lfa-ring);
  outline: none;
}

/* Beni hatırla gizliyse düğme boşlukta kalmasın. */
body.lfa-hide-remember .submit {
  margin-top: 6px;
}

/* Düğme ----------------------------------------------------------------- */
body.lfa-login .submit {
  margin: 0;
}

body.lfa-login .button-primary,
body.lfa-login #wp-submit {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  float: none;
  border: 0;
  border-radius: var(--lfa-radius-field);
  background: var(--lfa-submit);
  box-shadow: 0 2px 8px rgba(16, 24, 20, 0.16);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-shadow: none;
  transition: background 0.16s ease, transform 0.08s ease;
}

body.lfa-login .button-primary:hover,
body.lfa-login #wp-submit:hover {
  background: var(--lfa-submit-hover);
}

body.lfa-login .button-primary:active,
body.lfa-login #wp-submit:active {
  transform: translateY(1px);
}

body.lfa-login .button-primary:focus,
body.lfa-login #wp-submit:focus {
  box-shadow: 0 0 0 3px var(--lfa-ring);
  outline: none;
}

/* Bağlantılar ve dil seçici --------------------------------------------- */
/*
 * Bu öğeler #login'in kardeşi olarak basılıyor, yani kartın dışında
 * kalıyorlar. Kartın altına ortalanıp sayfa zemininde duruyorlar.
 */
body.lfa-login #nav,
body.lfa-login #backtoblog,
body.lfa-login .privacy-policy-page-link,
body.lfa-login .language-switcher {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--lfa-card-w);
  margin: 0 auto;
  padding: 0 30px;
  text-align: center;
}

body.lfa-login #nav {
  padding-top: 20px;
}

body.lfa-login #backtoblog {
  padding-top: 10px;
}

body.lfa-login .privacy-policy-page-link,
body.lfa-login .language-switcher {
  padding-top: 14px;
}

body.lfa-login #nav a,
body.lfa-login #backtoblog a,
body.lfa-login .privacy-policy-page-link a {
  color: var(--lfa-muted);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
}

body.lfa-login #nav a {
  color: var(--lfa-primary);
  font-weight: 650;
}

body.lfa-login #nav a:hover,
body.lfa-login #backtoblog a:hover,
body.lfa-login .privacy-policy-page-link a:hover {
  color: var(--lfa-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.lfa-login .language-switcher select {
  height: 38px;
  border: 1px solid var(--lfa-input);
  border-radius: var(--lfa-radius-sm);
  background: var(--lfa-field);
}

/* Bildirimler ----------------------------------------------------------- */
body.lfa-login .message,
body.lfa-login #login_error,
body.lfa-login .notice {
  position: relative;
  z-index: 2;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--lfa-border);
  border-left-width: 3px;
  border-radius: var(--lfa-radius-sm);
  background: var(--lfa-field);
  box-shadow: none;
  font-size: 12.5px;
  line-height: 1.5;
}

body.lfa-login #login_error {
  border-left-color: #c0392b;
}

body.lfa-login .message {
  border-left-color: var(--lfa-primary);
}

/* Dar ekran ------------------------------------------------------------- */
/*
 * Kart telefonda da çerçevesini koruyor, yalnızca ekrana yayılıyor.
 * Tam genişliğe oturup çerçevesini bırakması denendi; kenarlar zeminle
 * birleşince ekran çerçevesiz ve dağınık görünüyordu.
 */
@media screen and (max-width: 600px) {
  body.lfa-login {
    padding: 16px 14px 26px;
    justify-content: flex-start;
  }

  .lfa-login-aside,
  body.lfa-login #login {
    max-width: none;
  }

  .lfa-login-aside {
    padding: 26px 20px 0;
  }

  body.lfa-login #login {
    padding: 0 20px 24px;
  }

  .lfa-login-art {
    margin-bottom: 20px;
  }

  .lfa-login-art img {
    max-height: 150px;
  }

  .lfa-login-aside h2 {
    font-size: 24px;
  }

  body.lfa-login #nav,
  body.lfa-login #backtoblog,
  body.lfa-login .privacy-policy-page-link,
  body.lfa-login .language-switcher {
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Çok kısa ekranda görsel küçülür, form görünürde kalır. */
@media screen and (max-height: 720px) {
  .lfa-login-art img {
    max-height: 120px;
  }

  .lfa-login-art {
    margin-bottom: 18px;
  }
}

/* -------------------------------------------------------------------------
 * Ayarlardan gizlenen alanlar
 *
 * Öğeler kaldırılmıyor, gizleniyor. Böylece parola sıfırlama gibi işlevler
 * adresten çalışmaya devam ediyor ve eklentilerin eklediği alanlar bozulmuyor.
 * ---------------------------------------------------------------------- */
body.lfa-hide-remember .forgetmenot {
  display: none;
}

body.lfa-hide-nav #nav {
  display: none;
}

body.lfa-hide-language .language-switcher {
  display: none;
}

body.lfa-hide-privacy .privacy-policy-page-link {
  display: none;
}