/* ============================================================
 * forgot-password-screen.css — ITER 517 (2026-05-18)
 *
 * Şifre sıfırlama ekranı stilleri. Login modal içinde
 * #forgotPasswordScreen düğümünü hedefler. Slide-in animasyon
 * + back-link + hint text + alert-box varyantları.
 *
 * Davranış kontratı:
 *   - Default: .d-none ile gizli (mevcut utility)
 *   - Açıkken: forgot-password-bind.min.js .d-none kaldırır,
 *     ardından .forgot-password-anim-in toggle ile keyframe
 *     restart eder (translateX + opacity).
 *   - .login-text-block / .login-form / .login-btn / .login-forgot
 *     gibi mevcut sınıflar login-page-fixes.css'ten miras alır;
 *     bu dosya yalnızca SIFRE SIFIRLAMA'ya özel override + yeni
 *     selector'lar tanımlar (margin, hint, back-link, animasyon).
 *
 * BS referans davranışı (canlı extract, m.bahissende301.com login
 * modal → forgot password tıklaması): sağdan ~24px slide-in +
 * opacity 0→1, ~280-320ms cubic-bezier(0.16,1,0.3,1).
 *
 * Rule refs: rule #20 (numerical proof — translateX 24→0 ölçülmüş),
 *            rule #114 (token cascade — varsayılan tokenlardan
 *            sapmaz, sadece yeni component), rule #115 (transition
 *            timing parity).
 * ============================================================ */

/* ----- Forgot screen container — sayfa-içi mini-screen.
   Login screen ile aynı padding/layout, slide-in için relative+overflow. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  /* Slide-in başlangıç durumu — keyframe çalışmadan önce de OK görünmesi için
     hafif initial offset ver, animasyon class eklenir eklenmez bundan 0'a doğru
     mock-restart hisset. Ancak .d-none aktifken zaten görünmez. */
  transform: translateX(0);
  opacity: 1;
}

/* When the d-none utility is applied, ensure no flash from the animation class
   lingering — d-none has higher specificity normally but defensive override. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen.d-none {
  display: none !important;
}

/* ----- Slide-in animation — class toggled by JS after d-none removed.
   Restart trick: JS removes class, forces reflow (void offsetWidth),
   re-adds class — keyframe runs fresh every open. */
@keyframes forgotPasswordSlideIn {
  0% {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

html.mobile-root body.mobile-site #login2 .forgot-password-screen.forgot-password-anim-in {
  animation: forgotPasswordSlideIn 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}

/* Respect reduced-motion preference — opacity-only fade, no translate. */
@media (prefers-reduced-motion: reduce) {
  @keyframes forgotPasswordSlideIn {
    0% { opacity: 0; transform: none; }
    100% { opacity: 1; transform: none; }
  }
  html.mobile-root body.mobile-site #login2 .forgot-password-screen.forgot-password-anim-in {
    animation-duration: 150ms;
  }
}

/* ----- Text block — same margins as login-text-block but room for hint */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-text-block {
  margin: 0 0 16px !important;
  padding: 0 7px !important;
  text-align: center !important;
}

/* Top-text + main-title inherit login-text-block sizing from login-page-fixes.css.
   Defensive re-declarations in case selectors miss due to nested scoping. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-top-text {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  line-height: 14px !important;
  text-transform: none !important;
}

html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-main-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: rgb(255, 255, 255) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  line-height: 22px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

/* ----- Hint text — descriptive paragraph beneath the title.
   BS-paralel: 12px, muted white, line-height 16px, top margin 4px. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-hint-text {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin: 4px 0 0 !important;
  padding: 0 4px !important;
  line-height: 16px !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ----- Form — same vertical rhythm as login form.
   .login-form rules from login-page-fixes.css already apply;
   we just nudge form-group spacing slightly so single-input form
   doesn't look cramped. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-form.forgot-form {
  margin-top: 0 !important;
  padding: 0 7px !important;
}

html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-form.forgot-form .form-group {
  margin-bottom: 12px !important;
}

/* Submit button — match login-btn primary CTA, full width.
   Inherits gradient + height from login-page-fixes.css; we just
   ensure the forgot form variant has same top spacing as login. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-btn,
html.mobile-root body.mobile-site #login2 .forgot-password-screen button.login-btn[type="submit"] {
  margin-top: 4px !important;
  width: 100% !important;
}

/* ----- Alert boxes — success/error variants.
   Reuse .login-success-box (green) + .login-error-box (red) from
   login-page-fixes.css. Add forgot-specific margin tightening so
   they don't push the back-link too far down. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-success-box,
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-success {
  font-size: 13px !important;
  color: rgb(34, 197, 94) !important;
  background-color: rgba(34, 197, 94, 0.08) !important;
  border: 1px solid rgba(34, 197, 94, 0.18) !important;
  padding: 8px 10px !important;
  margin: 0 0 8px !important;
  border-radius: 4px !important;
  line-height: 16px !important;
  text-align: center !important;
}

html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-error-box,
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-ajax-alert {
  font-size: 13px !important;
  color: rgb(231, 31, 31) !important;
  background-color: rgba(231, 31, 31, 0.08) !important;
  border: 1px solid rgba(231, 31, 31, 0.18) !important;
  padding: 8px 10px !important;
  margin: 0 0 8px !important;
  border-radius: 4px !important;
  line-height: 16px !important;
  text-align: center !important;
}

/* d-none hides alerts when no message — defensive */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-success-box.d-none,
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-error-box.d-none {
  display: none !important;
}

/* ----- Back-link — "GİRİŞE GERİ DÖN" anchor with left arrow icon.
   BS-paralel: top margin 16px, centered, fs 14, fw 500, muted-white,
   no underline, arrow + text inline with 6px gap. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-forgot.forgot-back-wrap {
  margin: 16px 0 0 !important;
  padding: 0 7px !important;
  text-align: center !important;
}

html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-back-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  line-height: 16px !important;
  border-radius: 4px !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
}

html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-back-link:hover,
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-back-link:focus {
  color: rgb(255, 255, 255) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  outline: none !important;
}

/* Arrow icon — match BS visual weight. Most BS deployments use the
   bc-i-arrow-left glyph from bc icon font; fallback chevron via
   border-trick if glyph missing. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-back-link i.bc-i-arrow-left,
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-back-link > i {
  font-size: 12px !important;
  line-height: 1 !important;
  display: inline-block !important;
  color: inherit !important;
}

/* CSS-only chevron fallback when icon font is missing — drawn via
   border (left + bottom borders rotated 45deg). Activated only on
   :empty i (no font glyph rendered). */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-back-link > i:empty::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(1px, -1px);
}

/* ----- Defensive: when the forgot screen is visible, ensure the login form
   itself doesn't overlay it. login.min.js's #loginFormScreen toggle should
   handle this, but if a code path forgets to add .d-none on the form, the
   forgot screen still wins via z-index / order. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen:not(.d-none) {
  z-index: 2;
  position: relative;
}

/* ----- KÖK SEBEP FIX (2026-06-05) — SİYAH FORGOT EKRANI.
   theme-robinbet-mobile.css'te şu kural forgot ekranını gizliyor:
     #login2 #forgotPasswordScreen:not(.visible):not(.active)
       { display:none !important; visibility:hidden !important }
   Specificity = (2 id, 4 class [.mobile-root,.mobile-site,.visible,.active], 2 type)
   = (2,4,2). Theme forgot ekranını SADECE .visible/.active class'ı varsa gösteriyor.
   AMA forgot-password-bind.js sadece .d-none toggle eder, .visible/.active EKLEMEZ
   → theme'in hide kuralı eşleşir → bind d-none'u kaldırsa BİLE display:none +
   visibility:hidden kalıyordu → modal ortası boş, header+form d-none → KOMPLE SİYAH.
   Kullanıcı: "şifremi unuttuma basınca siyah sayfa açılıyor".
   ÇÖZÜM: :not(.d-none):not(.visible):not(.active) ile (2,5,2 > theme 2,4,2) açık
   durumda theme'in hide'ını yen → forgot görünür. Canlı doğrulandı: display zorlayınca
   tüm form render (ŞİFREYİ SIFIRLA + E-posta + GÖNDER + GİRİŞE GERİ DÖN). */
html.mobile-root body.mobile-site #login2 #forgotPasswordScreen:not(.d-none):not(.visible):not(.active) {
  display: block !important;
  visibility: visible !important;
}

/* ============================================================
 * BS-EXACT (2026-06-05) — m.bahissende307.com forgot ekranı canlı extract.
 * Kullanıcı: "bs ile tam karşılaştır, exact aynı olmak zorunda A-Z."
 * BS forgot MİNİMAL: başlık + email + Sıfırla butonu + info-tooltip.
 * Ferrari'de FAZLA olanlar (üst yazı, hint paragrafı) gizlenir; başlık BS
 * metrikleriyle eşitlenir. (Buton metni "GÖNDER"→"Sıfırla" AuthModals'ta.)
 * BS extract: title{fw:400, ta:start(left), mb:15px}, label{12px, rgba(.4)},
 * input{14px, bg rgba(.15), radius 4px, pad 20/44/4/15}, btn{12px, fw:500,
 * h:36px, uppercase}.
 * ============================================================ */

/* Başlık — BS: weight 400 (Ferrari 700 idi), SOLA yaslı (Ferrari center idi),
   alt boşluk 15px (Ferrari 6px idi). */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-main-title {
  font-weight: 400 !important;
  text-align: left !important;
  margin: 0 0 15px !important;
}
/* Text-block sola yaslı (BS form sola hizalı: başlık + label hepsi start) */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-text-block {
  text-align: left !important;
  margin: 0 !important;
}
/* BS forgot ekranında ÜST YAZI ("Şifrenizi mi unuttunuz?") + HİNT paragrafı YOK
   → gizle (BS minimal: doğrudan başlık + email). */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-top-text,
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-hint-text {
  display: none !important;
}
/* Buton: BS DOM metni "Sıfırla" + uppercase ile "SIFIRLA" gösterir (Ferrari markup
   artık "Sıfırla"). BS metrik: font-weight 500, uppercase. */
html.mobile-root body.mobile-site #login2 .forgot-password-screen #forgotPasswordSubmit,
html.mobile-root body.mobile-site #login2 .forgot-password-screen #forgotPasswordSubmit .btn-text {
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* (Seçenek 2) BUTON BOŞKEN GRİ — BS davranışı: e-posta boşken SIFIRLA butonu
   gri/pasif (bg rgba(255,255,255,0.1), text rgba(255,255,255,0.3)), e-posta
   yazılınca varsayılan altın CTA geri gelir. #forgotEmail placeholder=" " →
   boşken :placeholder-shown eşleşir; :has() ile butona yansıtılır. Modern mobil
   tarayıcılar :has + :placeholder-shown destekler; desteklemeyen eski tarayıcıda
   buton altın kalır (graceful degrade, işlev bozulmaz). */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .forgot-form:has(#forgotEmail:placeholder-shown) #forgotPasswordSubmit {
  background: rgba(255, 255, 255, 0.1) !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* (Seçenek 3) INFO SATIRI — BS: buton altında (i) + bilgi mesajı. BS'in çevirisi
   BOZUK ("şifre_sıfırla_bilgi_mesajı" key'i) → düzgün Türkçe mesaj kullanıyoruz.
   CSS ::after ile (markup/build gerektirmez). Form son elemanı buton → mesaj
   butonun altında çıkar (BS-paralel konum). */
html.mobile-root body.mobile-site #login2 .forgot-password-screen .login-form.forgot-form::after {
  content: "ⓘ  Şifre sıfırlama bağlantısı e-posta adresinize gönderilecektir.";
  display: block;
  margin: 10px 7px 0 !important;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
  letter-spacing: normal;
}