/* =========================================================
   EducaStep V13 - Ortak Üyelik / Giriş Arayüzü
   SADECE GÖRSEL KATMAN
   - tercih-auth.js iş mantığına dokunmaz.
   - Net Sihirbazı auth-ui.js iş mantığına dokunmaz.
   - Site renkleri: lacivert + EducaStep kırmızısı.
   ========================================================= */

:root{
  --es-auth-navy:#002244;
  --es-auth-navy-2:#17245f;
  --es-auth-red:#c20000;
  --es-auth-red-dark:#9f0000;
  --es-auth-text:#11233b;
  --es-auth-muted:#667085;
  --es-auth-line:#e3e8ef;
  --es-auth-soft:#f6f8fb;
  --es-auth-shadow:0 32px 90px rgba(2,18,38,.30);
}

/* ---------- Header: bütün sayfalarda aynı giriş dili ---------- */
.navbar .btn-giris,
#authHeaderBtn.btn-giris{
  min-height:44px !important;
  padding:9px 17px !important;
  border:1px solid rgba(0,34,68,.08) !important;
  border-radius:12px !important;
  background:var(--es-auth-navy) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap;
  box-shadow:0 10px 24px rgba(0,34,68,.18) !important;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.navbar .btn-giris:hover,
#authHeaderBtn.btn-giris:hover{
  transform:translateY(-1px) !important;
  filter:brightness(1.06);
  box-shadow:0 14px 28px rgba(0,34,68,.22) !important;
}

/* Giriş yapılmış görünüm: iki auth sistemini görsel olarak eşitle */
.navbar .tercih-auth-userbox{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-left:8px;
}
.navbar .tercih-auth-user,
#authHeaderBtn.user-account-btn{
  min-height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:9px 15px !important;
  border:1px solid #dfe6ee !important;
  border-radius:12px !important;
  background:#f7f9fc !important;
  color:var(--es-auth-navy) !important;
  box-shadow:none !important;
  font-size:13px !important;
  font-weight:800 !important;
  white-space:nowrap;
}
.navbar .tercih-auth-user::before,
#authHeaderBtn.user-account-btn::before{
  content:"●";
  margin-right:7px;
  color:#15965f;
  font-size:9px;
}
.navbar .tercih-auth-logout,
.navbar .btn-logout{
  min-height:44px !important;
  margin-left:0 !important;
  padding:9px 13px !important;
  border:0 !important;
  border-radius:12px !important;
  background:#fff1f2 !important;
  color:var(--es-auth-red) !important;
  box-shadow:none !important;
  font-size:13px !important;
  font-weight:800 !important;
  cursor:pointer;
}
.navbar .tercih-auth-logout:hover,
.navbar .btn-logout:hover{background:#fee2e2 !important;filter:none !important;}

/* ---------- Ortak karartma ---------- */
.tercih-auth-modal-overlay,
#authModal.auth-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:100000 !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.10), transparent 28%),
    linear-gradient(135deg,rgba(0,20,42,.82),rgba(23,36,95,.78)) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
.tercih-auth-modal-overlay.is-open{display:flex !important;}
#authModal[hidden]{display:none !important;}

/* ---------- Kart: Tercih/Puan + statik sayfalar ---------- */
.tercih-auth-modal,
#authModal .auth-modal-card{
  width:min(540px,96vw) !important;
  max-height:min(92vh,780px) !important;
  overflow-y:auto !important;
  position:relative !important;
  padding:0 !important;
  border:1px solid rgba(226,232,240,.95) !important;
  border-radius:26px !important;
  background:#fff !important;
  color:var(--es-auth-text) !important;
  box-shadow:var(--es-auth-shadow) !important;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
}
.tercih-auth-modal::before,
#authModal .auth-modal-card::before{
  content:"" !important;
  display:block !important;
  height:6px !important;
  background:linear-gradient(90deg,var(--es-auth-red) 0 31%,var(--es-auth-navy-2) 31% 100%) !important;
}

/* ---------- Kapat ---------- */
.tercih-auth-close,
#authModal .auth-close{
  position:absolute !important;
  top:15px !important;
  right:15px !important;
  width:38px !important;
  height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #e2e8f0 !important;
  border-radius:999px !important;
  background:#f8fafc !important;
  color:#475569 !important;
  font-size:24px !important;
  line-height:1 !important;
  cursor:pointer !important;
  transition:background .18s ease,color .18s ease,transform .18s ease !important;
}
.tercih-auth-close:hover,
#authModal .auth-close:hover{
  transform:rotate(90deg);
  background:#fff1f2 !important;
  color:var(--es-auth-red) !important;
}

/* ---------- Başlık ---------- */
.tercih-auth-head,
#authModal .auth-head{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin:0 !important;
  padding:27px 66px 17px 28px !important;
  border-bottom:1px solid #eef1f5;
  background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
}
.tercih-auth-icon,
#authModal .auth-lock{
  width:52px !important;
  height:52px !important;
  flex:0 0 52px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:16px !important;
  background:linear-gradient(145deg,var(--es-auth-navy-2),var(--es-auth-navy)) !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(0,34,68,.18) !important;
  font-size:24px !important;
}
.tercih-auth-title,
#authModal .auth-head h2{
  margin:0 !important;
  color:var(--es-auth-navy) !important;
  font-size:22px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
}
.tercih-auth-title::before,
#authModal .auth-head h2::before{
  content:"EDUCASTEP";
  display:block;
  margin-bottom:5px;
  color:var(--es-auth-red);
  font-size:10.5px;
  line-height:1;
  letter-spacing:.14em;
  font-weight:900;
}
.tercih-auth-desc,
#authModal .auth-head p{
  margin:6px 0 0 !important;
  color:var(--es-auth-muted) !important;
  font-size:13.5px !important;
  line-height:1.48 !important;
}

/* ---------- Giriş / Üye Ol sekmeleri ---------- */
.tercih-auth-tabs,
#authModal .auth-tabs{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:5px !important;
  margin:18px 28px 0 !important;
  padding:5px !important;
  border:1px solid #e7ebf0 !important;
  border-radius:14px !important;
  background:#f3f5f8 !important;
}
.tercih-auth-tab,
#authModal .auth-tab{
  min-height:42px !important;
  border:0 !important;
  border-radius:10px !important;
  background:transparent !important;
  color:#526072 !important;
  font-size:13.5px !important;
  font-weight:850 !important;
  cursor:pointer !important;
  box-shadow:none !important;
}
.tercih-auth-tab.is-active,
#authModal .auth-tab.active{
  background:#fff !important;
  color:var(--es-auth-navy) !important;
  box-shadow:0 6px 18px rgba(15,23,42,.08) !important;
  position:relative;
}
.tercih-auth-tab.is-active::after,
#authModal .auth-tab.active::after{
  content:"";
  position:absolute;
  left:22%;
  right:22%;
  bottom:0;
  height:3px;
  border-radius:999px 999px 0 0;
  background:var(--es-auth-red);
}

/* ---------- Form ---------- */
.tercih-auth-form,
#authModal .auth-form{
  padding:18px 28px 26px !important;
}
.tercih-auth-form.is-active{display:block !important;}
#authModal .auth-form.active{display:grid !important;gap:12px !important;}
.tercih-auth-field{margin-bottom:13px !important;}
.tercih-auth-field label,
#authModal .auth-form label{
  color:#334155 !important;
  font-size:12.5px !important;
  font-weight:800 !important;
}
#authModal .auth-form label{display:grid !important;gap:7px !important;}
.tercih-auth-field label{display:block !important;margin:0 0 7px !important;}
.tercih-auth-field input,
#authModal .auth-form input{
  width:100% !important;
  height:48px !important;
  padding:0 14px !important;
  border:1.4px solid #dbe2ea !important;
  border-radius:12px !important;
  outline:none !important;
  background:#fbfcfe !important;
  color:#162235 !important;
  font:inherit !important;
  font-size:14px !important;
  box-shadow:none !important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease !important;
}
.tercih-auth-field input:focus,
#authModal .auth-form input:focus{
  border-color:#8ca0b5 !important;
  background:#fff !important;
  box-shadow:0 0 0 4px rgba(0,34,68,.07) !important;
}
.tercih-auth-field input::placeholder,
#authModal .auth-form input::placeholder{color:#9aa5b3 !important;}

/* ---------- Ana eylem ---------- */
.tercih-auth-submit,
#authModal .auth-primary-btn{
  width:100% !important;
  min-height:50px !important;
  margin-top:3px !important;
  border:0 !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,var(--es-auth-red),#d51b24) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  box-shadow:0 12px 24px rgba(194,0,0,.19) !important;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease !important;
}
.tercih-auth-submit:hover,
#authModal .auth-primary-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.04) !important;
  box-shadow:0 15px 28px rgba(194,0,0,.23) !important;
}

/* ---------- İkincil bağlantılar ---------- */
.tercih-auth-link-btn,
#authModal .auth-link-btn{
  width:100% !important;
  min-height:40px !important;
  margin-top:7px !important;
  padding:8px 10px !important;
  border:0 !important;
  border-radius:10px !important;
  background:transparent !important;
  color:var(--es-auth-navy) !important;
  font-size:12.5px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  text-align:center !important;
  box-shadow:none !important;
}
.tercih-auth-link-btn:hover,
#authModal .auth-link-btn:hover{background:#f5f7fa !important;}
.tercih-auth-resend-btn{color:var(--es-auth-red) !important;}

/* ---------- Sonuç / uyarı ---------- */
.tercih-auth-message,
#authModal .auth-feedback{
  margin-top:11px !important;
  padding:10px 12px !important;
  border-radius:10px !important;
  font-size:12.5px !important;
  font-weight:800 !important;
  line-height:1.45 !important;
  text-align:center !important;
}
.tercih-auth-lock-note{
  margin:0 !important;
  padding:13px 28px 20px !important;
  border-top:1px solid #eef1f5;
  color:#7a8797 !important;
  background:#fbfcfe;
  font-size:11.5px !important;
  text-align:center !important;
}
.tercih-auth-lock-note::before{
  content:"Tek hesapla Tercih Robotu, Puan Hesaplama ve üyelere özel analizlere erişebilirsiniz.";
  display:block;
  margin-bottom:5px;
  color:#536175;
  font-weight:700;
}

/* Net Sihirbazı feedback formun altında kalır */
#authModal .auth-feedback{margin:0 28px 24px !important;}

/* ---------- Mobil ---------- */
@media(max-width:768px){
  .navbar .tercih-auth-userbox{gap:5px;margin-left:4px;}
  .navbar .tercih-auth-user,
  #authHeaderBtn.user-account-btn{max-width:150px;padding:8px 10px !important;font-size:11.5px !important;overflow:hidden;text-overflow:ellipsis;}
  .navbar .tercih-auth-logout,
  .navbar .btn-logout{padding:8px 10px !important;font-size:11.5px !important;}

  .tercih-auth-modal-overlay,
  #authModal.auth-modal{padding:12px !important;align-items:flex-start !important;overflow-y:auto !important;}
  .tercih-auth-modal,
  #authModal .auth-modal-card{width:100% !important;margin:auto 0 !important;border-radius:20px !important;max-height:none !important;}
  .tercih-auth-head,
  #authModal .auth-head{padding:23px 55px 15px 18px !important;gap:11px !important;}
  .tercih-auth-icon,
  #authModal .auth-lock{width:46px !important;height:46px !important;flex-basis:46px !important;border-radius:14px !important;}
  .tercih-auth-title,
  #authModal .auth-head h2{font-size:19px !important;}
  .tercih-auth-desc,
  #authModal .auth-head p{font-size:12.5px !important;}
  .tercih-auth-tabs,
  #authModal .auth-tabs{margin:14px 18px 0 !important;}
  .tercih-auth-form,
  #authModal .auth-form{padding:15px 18px 20px !important;}
  #authModal .auth-feedback{margin:0 18px 18px !important;}
  .tercih-auth-lock-note{padding:12px 18px 17px !important;}
}

@media(prefers-reduced-motion:reduce){
  .tercih-auth-close,
  #authModal .auth-close,
  .tercih-auth-submit,
  #authModal .auth-primary-btn,
  .navbar .btn-giris{transition:none !important;}
}