/* ============================= */
/* LOGIN MODAL STYLES - FINAL     */
/* ============================= */

/* Modal Genel */
/* Başlık Yukarı, Linkler Aşağı */
/* Form elemanları arası boşluk */
#loginForm .top-form {
    gap: 15px; /* Inputlar arası boşluk */
    margin-bottom: 15px;
}

#loginForm .rembar {
    margin-bottom: 20px; /* Checkbox ile buton arası boşluk */
}

#loginForm .login-btn {
    margin-top: 10px;
    margin-bottom: 20px; /* Buton ile linkler arası boşluk */
}

#loginForm .links {
    gap: 12px; /* Alt linkler arası boşluk */
    margin-top: 15px;
    margin-bottom: 15px;
}
/* Başlık ile input arası boşluk */
#loginForm h1 {
    margin-bottom: 25px; /* Başlıktan sonra ekstra boşluk */
}

/* Formu biraz aşağı çekme */
#loginForm {
    padding-top: 30px; /* Üstten boşluk eklenir */
}
/* Google ile giriş yap */
.google-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 0.5rem 1rem;
  color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
  max-width: 220px; /* küçültme */
  margin: 0 auto;
  transition: all 0.3s ease;
  box-shadow: inset 0 0 10px rgba(255,255,255,0.05),
              0 0 10px rgba(255,0,0,0.25);
}

.google-login:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255,255,255,0.4);
}

.google-icon svg {
  fill: white;
  width: 16px;
  height: 16px;
}

.google-login:hover .google-icon svg {
  fill: #ff4d4d;
}

.google-text {
  letter-spacing: 0.3px;
}

/* Google ile Kayıt Ol Üye ol sayfasında */
.google-register {
  display: flex;
  justify-content: center;
  margin-top: 25px; /* arttırıldı */
  margin-bottom: 15px; /* alt boşluk eklendi */
}

.google-register .google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 0.5rem 1rem;
  color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
  max-width: 220px;
  width: 100%;
  margin: 0 auto;
  transition: all 0.3s ease;
  box-shadow: inset 0 0 10px rgba(255,255,255,0.05),
              0 0 10px rgba(255,0,0,0.25);
  cursor: pointer;
}

.google-register .google-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255,255,255,0.4);
}

.google-register .google-btn img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.google-register .google-btn:hover img {
  filter: invert(39%) sepia(99%) saturate(7473%) hue-rotate(352deg) brightness(101%) contrast(102%);
}

.google-register .google-btn span {
  letter-spacing: 0.3px;
}

.login-modal.hidden { display: none; }
.login-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 110svh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.login-modal.show {
    opacity: 1;
}

.login-modal-overlay {
    position:absolute; top:0; left:0;
    width:100%; height:100%;
}

/* Login Kart */
.login-card {
    position: relative;
    width: 320px; /* genişlik büyütüldü */
    height: 550px; /* yükseklik register için artırıldı */
    padding: 50px;
    border-radius: 20px;
    background: rgba(20, 20, 20, 0.35);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 50px rgba(0,0,0,0.4);
    z-index: 2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;      
    gap: 20px;
    padding-top: 20px;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 0.6s ease-in-out;
}

.login-modal.show .login-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Kart form geçiş animasyonları */
.login-card.form-fade-out {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
    transition: all 0.4s ease-in-out;
}

.login-card.form-fade-in {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: all 0.4s ease-in-out;
}

/* İç Glow */
.login-card::before, 
.login-card::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
    animation: float 5s ease-in-out infinite alternate;
}
.login-card::before { background: #ff0000; top: -50px; left: -50px; }
.login-card::after { background: #ff4d4d; bottom: -50px; right: -50px; }

@keyframes float { to { transform: translateY(-30px); } }

/* Başlık */
.login-card h1 {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 0;
    text-align: center;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-modal.show .login-card h1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.05s;
}

/* Form */
.alt-form,
.top-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;   
    gap: 10px;
}

/* Inputlar */
.input-box input {
    width: 280px; /* input genişliği artırıldı */
    padding: 1rem 1.1rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1);
    color: white;
    text-align: left;
}
.input-box input::placeholder { color: rgba(255,255,255,0.5); }
.input-box input:focus {
    outline: none;
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.15);
}

/* Fancy checkbox */
.rembar {
  --size: 22px;
  --stroke: currentColor;
  --checked: var(--accent, #e11d2e);
  --muted: var(--muted, #b4b7c2);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  line-height: 1;
}
.rembar-check { position: absolute; opacity: 0; width: 0; height: 0; }
.rembar-label { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; color: var(--muted); user-select: none; }
.rembar-box { width: var(--size); height: var(--size); flex: 0 0 var(--size); }
.rembar-rect { fill: none; stroke: var(--stroke); stroke-width: 3; opacity: .6; transition: opacity .2s ease, filter .2s ease; }
.rembar-path { fill: none; stroke: var(--stroke); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; opacity: 0; transition: stroke-dashoffset .5s ease, opacity .2s ease; }
.rembar-label:hover .rembar-rect { opacity: .9; }
.rembar-check:checked + .rembar-label { color: inherit; }
.rembar-check:checked + .rembar-label .rembar-path { stroke: var(--checked); stroke-dashoffset: 0; opacity: 1; }
.rembar-check:checked + .rembar-label .rembar-rect { stroke: var(--checked); opacity: 1; filter: drop-shadow(0 0 6px color-mix(in oklab, var(--checked), transparent 70%)); }
.rembar-text { font-size: .95rem; }

/* Giriş Butonu */
.login-btn {
    width: 150px;
    max-width: 280px;
    padding: 0.8rem 0.7rem;
    margin-top: 10px;
    border-radius: 12px;
    background: linear-gradient(90deg, #ff0000, #b30000);
    border: none;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    margin: auto;
}
.login-btn:hover {
    background: linear-gradient(90deg, #ff2a2a, #cc0000);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(255,0,0,0.4);
}

/* Linkler */
.links {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.links a {
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
    font-weight: 300;
    text-decoration: none;
    transition: all 0.3s ease;
}
.links a:hover { color: white; transform: translateY(-1px); }
.links a strong { color: rgba(255,255,255,0.85); }

/* REGISTER FORM */
#registerForm {
  margin-bottom: 60px; /* azaltıldı, daha fazla alan için */
  padding-top: 0; /* tüm içerik aşağı çekildi */
}

/* Doğru hedefleme: parent'a stil */
.login-card:has(#registerForm:not(.hidden)) {
  min-height: 600px;   /* ihtiyacınıza göre */
}

#loginForm {
  /* Animasyon kaldırıldı, sadece görünürlük kontrolü */
}

#registerForm,
#forgotForm {
  /* Animasyon kaldırıldı, sadece görünürlük kontrolü */
}

#registerForm h1 {
  text-align: center;
  margin-bottom: 10px;
}
#registerForm .subtitle {
  font-size: 11px;
  margin-bottom: 16px;
  color: rgba(255,255,255,0.7);
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#registerForm.show .subtitle {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}
#registerForm .top-form { gap: 8px; }
#registerForm .top-form .input-box input { width: 280px; }
#registerForm .alt-form { margin-top: 15px; } /* azaltıldı */
#registerForm .links.single { margin-top: 15px; text-align: center; } /* azaltıldı */
#registerForm .links.single a { font-size: 13px; color: rgba(255,255,255,0.7); }

/* FORGOT FORM (Kartın içinde hizalanmış) */
#forgotForm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px; /* Elemanlar arası boşluk */
  padding-top: 20px; /* Üstten boşluk */
  width: 100%;
}

#forgotForm h1 {
  font-size: 1.6rem;
  margin-bottom: 8px;
  color: #fff;
  text-align: center;
}

#forgotForm .subtitle {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  margin: 0 0 20px 0; /* Başlıktan sonra boşluk */
  text-align: center;
  max-width: 260px;
}

#forgotForm .alt-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#forgotForm .input-box input {
  width: 260px; /* login ile aynı genişlik */
  padding: 0.8rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  color: white;
}

#forgotForm .input-box input::placeholder {
  color: rgba(255,255,255,0.5);
}

#forgotForm .login-btn {
  width: 230px; /* login ile aynı kısa buton */
  padding: 0.8rem 1rem;
  margin-top: 10px;
  border-radius: 12px;
  background: linear-gradient(90deg, #ff0000, #b30000);
  border: none;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

#forgotForm .login-btn:hover {
  background: linear-gradient(90deg, #ff2a2a, #cc0000);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255,0,0,0.4);
}

/* Geri dön linki */
#forgotForm .links {
  margin-top: 15px;
  text-align: center;
}

#forgotForm .links a {
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem;
  text-decoration: none;
}

#forgotForm .links a:hover {
  color: white;
}
/* Inputlar ile buton+link arasına mesafe */
#forgotForm .top-form {
  margin-bottom: 40px; /* input grubu ile alt kısım arası boşluk */
}

/* Alt kısmı biraz aşağı kaydırma */
#forgotForm .alt-form {
  margin-top: 70px; /* kartın içinde en alta iter */
  padding-bottom: 20px; /* alta nefes boşluğu */
}
/* Şifre Göster/Gizle Göz İkonu */
.password-box { position: relative; }
.password-box .toggle-password {
  position: absolute;
  top: 50%; right: 10px;
  transform: translateY(-50%);
  background: none; border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
}
.password-box .toggle-password:hover { color: rgba(255,255,255,0.9); }
.password-box .toggle-password svg { width: 18px; height: 18px; fill: currentColor; }
/* placeholder'ı fokus olunca gizle */
.input-box input::placeholder{opacity:.7;transition:opacity .2s ease}
.input-box input:focus::placeholder{opacity:0}

/* Safari için */
.input-box input::-webkit-input-placeholder{opacity:.7;transition:opacity .2s ease}
.input-box input:focus::-webkit-input-placeholder{opacity:0}
/* Şeffaf gibi görünen (autofill boyasını öldüren) hack */
:root { --bdr: rgba(255,255,255,.20); --af0: rgba(0,0,0,.001); } /* neredeyse %0 opak */
.login-card input { color-scheme: dark; border-radius: 10px; }

.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff !important; caret-color:#fff;
  background:transparent !important;
  /* UA rengini örtmek için görünmez overlay */
  -webkit-box-shadow:0 0 0 1000px var(--af0) inset, 0 0 0 1px var(--bdr) inset !important;
          box-shadow:0 0 0 1000px var(--af0) inset, 0 0 0 1px var(--bdr) inset !important;
  border:1px solid var(--bdr) !important;
  transition: background-color 99999s ease 0s !important; /* flash fix */
}

/* Firefox */
.login-card input:-moz-autofill{
  -moz-text-fill-color:#fff !important; background:transparent !important;
  box-shadow:0 0 0 1000px var(--af0) inset !important;
  border:1px solid var(--bdr) !important;
}
/* ========== LOGOUT CONFIRM MODAL (COMPACT • TOP-CENTER) ========== */
.confirm-modal{ position:fixed; inset:0; z-index:10050; display:none; }
.confirm-modal.active{ display:block; }

/* daha hafif backdrop */
.confirm-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(4px);
  animation: cmFade .18s ease;
}
@keyframes cmFade{ from{opacity:0} to{opacity:1} }

/* küçük kart: üst-orta */
.confirm-card{
  position:absolute; left:50%; top:32px;
  transform: translate(-50%, -14px) scale(.98);
  width:min(420px, 92vw);
  background: rgba(16,16,19,.82);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  overflow:hidden; opacity:0;
  animation: cmIn .22s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes cmIn{
  to{ transform: translate(-50%, 0) scale(1); opacity:1; }
}
@keyframes cmOut{
  to{ transform: translate(-50%, -14px) scale(.98); opacity:.0; }
}

/* küçük nebula */
.confirm-nebula{
  position:absolute; inset:-18% -12% -12% -12%; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px 360px at 14% -10%, rgba(255,42,42,.36), transparent 55%),
    radial-gradient(480px 320px at 86% 10%, rgba(179,0,0,.28), transparent 60%),
    linear-gradient(180deg, rgba(11,11,12,.92), rgba(11,11,12,.80));
  filter: blur(40px) saturate(1.25);
  animation: cmNeb 9s ease-in-out infinite alternate;
}
@keyframes cmNeb{ from{transform:translateY(0)} to{transform:translateY(-14px)} }

/* kapatma (düz X, çerçevesiz hissiyat) */
.confirm-close{
  position:absolute; right:10px; top:10px;
  width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center; cursor:pointer; z-index:2;
  color:#fff; background: transparent; border:none;
}
.confirm-close:hover{ background: rgba(255,255,255,.10); }

/* header kompakt */
.confirm-header{
  position:relative; z-index:1; display:flex; align-items:center; gap:12px;
  padding:16px 14px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,42,42,.06), rgba(255,42,42,0));
  color:#f5f7fb;
}
.confirm-icon{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; font-size:16px;
  color:#fff;
  background: linear-gradient(135deg, rgba(255,42,42,.28), rgba(179,0,0,.20));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(255,42,42,.22);
}
.confirm-titles h3{ margin:0; font-size:16px; font-weight:800; letter-spacing:.2px; }
.confirm-sub{ margin:.20rem 0 0; font-size:12.5px; color:#c8ccd7; }

/* buton bölümü */
.confirm-actions{
  position:relative; z-index:1;
  display:flex; justify-content:flex-end; gap:8px;
  padding:12px 12px 14px;
}
.confirm-btn{
  padding:9px 12px; border-radius:10px; font-weight:800; font-size:13px;
  border:1px solid rgba(255,255,255,.12); color:#fff; cursor:pointer;
  background: rgba(255,255,255,.06); transition: transform .1s ease, background .15s ease;
}
.confirm-btn:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); }
.confirm-btn:active{ transform: translateY(0); }
.confirm-btn.ghost{ background: transparent; }
.confirm-btn.red{
  background: linear-gradient(90deg, #ff2a2a, #b30000);
  border-color: rgba(255,42,42,.40);
  box-shadow: 0 10px 24px rgba(255,42,42,.25);
}

/* kapanış için sınıf (istersen JS’te kullan) */
.confirm-card.cm-leave{ animation: cmOut .18s cubic-bezier(.2,.8,.2,1) forwards; }

/* mobil ufak dokunuş */
@media (max-width:520px){
  .confirm-card{ border-radius:14px; }
  .confirm-header{ padding:14px 12px 8px; }
  .confirm-titles h3{ font-size:15px; }
}
/* ============================================================
   AJANS SU — REHELLO (Top-Center) • TEK POPUP CSS
   ============================================================ */

:root{
  /* Tema */
  --as-brand1:#ff2a2a;
  --as-brand2:#b30000;
  --as-bg:   rgba(16,16,19,.86);
  --as-bg2:  rgba(20,20,24,.74);
  --as-text: #fff;
  --as-muted:#cfd3dd;
  --as-border:  rgba(255,255,255,.10);
  --as-border2: rgba(255,255,255,.08);

  /* Nebula ayarları */
  --nebula-dur: 18s;
  --nebula-blur: 38px;
  --nebula-sat: 1.25;

  /* Timer süresi (JS ile override edilebilir) */
  --rh-dur: 6000ms;
}

/* === Kapsayıcı ================================================= */
.rehello{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 10080;
  display: none;
  pointer-events: none;
}
.rehello.hidden{ display: none; }

/* GDPR Cookies Success Popup Override */
.consent-banner:not(.hidden),
.cookie-success-popup:not(.hidden) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.consent-banner.show,
.cookie-success-popup.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.rehello.show{ display: block; }

/* === Kart (Top-Center) ======================================== */
.rehello-card{
  position: absolute !important;
  left: 50% !important;
  top: 25px !important;
  transform: translate(-50%, 0) scale(.98) !important;
  width: min(480px, 90vw) !important;
  border-radius: 20px;
  overflow: hidden;
  pointer-events: auto;

  background: var(--as-bg2);
  color: var(--as-text);
  border: 1px solid var(--as-border2);
  box-shadow: 0 30px 120px rgba(0,0,0,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  opacity: 0;
  animation: rhSlideIn .30s cubic-bezier(.2,.8,.2,1) forwards;
}
.rehello-card.hiding{ animation: rhSlideOut .22s ease forwards; }

/* İç karartma (okunabilirlik) */
.rehello-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(0,0,0,.35), transparent 55%),
    radial-gradient(120% 100% at 50% 110%, rgba(0,0,0,.42), transparent 55%);
  z-index:0;
}

/* === Nebula (arka plan, iki katman) ============================ */
.rehello-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:inherit;
  z-index:-1;
  overflow:hidden;
  filter: saturate(var(--nebula-sat));
}
.rehello-bg::before{
  content:"";
  position:absolute;
  inset:-60% -40% -40% -40%;
  filter: blur(var(--nebula-blur));
  opacity:.95;
  will-change: transform;
  background:
    radial-gradient(60% 50% at 20% 25%, rgba(255,42,42,.30), transparent 60%),
    radial-gradient(55% 45% at 80% 30%, rgba(179,0,0,.26), transparent 60%),
    radial-gradient(70% 60% at 50% 80%, rgba(255,42,42,.22), transparent 60%),
    radial-gradient(50% 50% at 60% 55%, rgba(255,255,255,.07), transparent 70%);
  animation: nebulaDriftXY var(--nebula-dur) ease-in-out infinite alternate;
}
.rehello-bg::after{
  content:"";
  position:absolute;
  inset:-65% -45% -45% -45%;
  filter: blur(calc(var(--nebula-blur) * 1.15));
  opacity:.7;
  will-change: transform;
  background:
    radial-gradient(60% 50% at 15% 65%, rgba(179,0,0,.24), transparent 62%),
    radial-gradient(55% 50% at 85% 70%, rgba(255,42,42,.22), transparent 60%),
    radial-gradient(40% 40% at 50% 40%, rgba(255,255,255,.06), transparent 65%);
  animation: nebulaDriftXY calc(var(--nebula-dur) * 1.4) ease-in-out infinite alternate-reverse;
}

/* Ek nebula (ister daha soft olsun) */
.rehello-nebula{
  position:absolute;
  inset:-18% -12% -12% -12%;
  pointer-events:none;
  filter:saturate(1.4) blur(60px);
  opacity:.35;
  animation: nebulaDrift 12s ease-in-out infinite alternate;
  background:
    radial-gradient(60% 70% at 25% 30%, rgba(255,42,42,.28), transparent 60%),
    radial-gradient(50% 60% at 70% 40%, rgba(179,0,0,.22), transparent 60%),
    radial-gradient(40% 50% at 50% 75%, rgba(255,255,255,.10), transparent 60%);
}

/* === İçerik ==================================================== */
.rehello-body{
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px 18px 18px;
}
.rehello-icon{ margin-bottom: 10px; }
.rehello-body h3{
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.rehello-body p{
  margin: 0;
  font-size: 14px;
  color: var(--as-muted);
  font-weight: 500;
}

/* === Timer (alt çizgi) ======================================== */
.rehello-timer{
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--as-brand1), var(--as-brand2));
  transform-origin: left center;
  animation: rhTimer var(--rh-dur) linear forwards;
}



/* === Animasyonlar ============================================= */
@keyframes rhSlideIn{
  0%   { opacity:0; transform:translate(-50%, -16px) scale(.98); }
  100% { opacity:1; transform:translate(-50%, 0) scale(1); }
}
@keyframes rhSlideOut{
  0%   { opacity:1; transform:translate(-50%, 0) scale(1); }
  100% { opacity:0; transform:translate(-50%, -16px) scale(.98); }
}
@keyframes rhTimer{
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@keyframes nebulaDrift{
  0%   { transform: translateY(0) scale(1); }
  100% { transform: translateY(-20px) scale(1.02); }
}
@keyframes nebulaDriftXY{
  0%   { transform: translate3d(-2%, 0, 0) scale(1.02) rotate(0.2deg); }
  50%  { transform: translate3d(1%, -10px, 0) scale(1.03) rotate(0deg); }
  100% { transform: translate3d(3%, -22px, 0) scale(1.05) rotate(-0.2deg); }
}

/* === Responsive =============================================== */
@media (max-width:520px){
  .rehello-card{ border-radius: 16px; }
  .rehello-body h3{ font-size: 20px; }
}
.rehello-x{ display:none; }


/* ============================= */
/* LOGIN RESPONSIVE (TELEFON)    */
/* ============================= */

@media (max-width: 600px){

  /* Kart: daha dar ve kompakt */
  .login-card{
    width: 92vw;
    max-width: 260px;          /* kart genişliğini düşürdük */
    height: auto;
    padding: 28px 18px 22px;
    border-radius: 16px;
    gap: 14px;
  }

  /* Başlık */
  .login-card h1{
    font-size: 1.6rem;
    margin: 6px 0 8px;
    text-align: center;
  }

  /* Form blokları */
  #loginForm{ padding-top: 0; }
  #loginForm .top-form{ gap: 12px; margin-bottom: 10px; }
  #loginForm .rembar{ margin: 6px 0 12px; }

  /* Inputlar: tam genişlik + sağda göz için boşluk */
  .input-box{ width: 100%; }
  .input-box input{
    width: 70%;
    padding: 12px 44px 12px 14px;  /* sağa ikon boşluğu */
    font-size: .95rem;
    border-radius: 12px;
  }

  /* Şifre kutusu: göz ikonunu inputun SAĞINA daya */
  .password-box{ position: relative; }
  .toggle-password{
    position: absolute;
    right: 10px;                 /* sağa dayalı */
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: #fff; cursor: pointer;
  }
  .toggle-password i{ font-size: 14px; opacity: .95; }

  /* Giriş butonu */
  .login-btn{
    width: 100%;
    max-width: none;
    padding: 12px;
    font-size: 1rem;
    border-radius: 12px;
    margin: 10px 0 12px;
  }

  /* Alt linkler */
  .links{ gap: 10px; margin: 8px 0 10px; }
  .links a{ font-size: .9rem; }

/* Google ile giriş: ince ve zarif */
.google-login{
  width: 85%;
  max-width: 240px;  /* çok genişlemesin */
  padding: 6px 10px; /* inceltilmiş yükseklik */
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 6px rgba(255,0,0,0.12);

  color: white;
  cursor: pointer;
  transform: scale(0.9); /* küçültme */
  transform-origin: center;
}

.google-login i{
  font-size: 14px; /* daha ufak ikon */
}

.google-login:hover{
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 10px rgba(255,0,0,0.25);
}

  /* Checkbox yazısı biraz küçülsün */
  .rembar{ font-size: .9rem; }
}

/* ============================= */
/* LOGIN – GENEL İYİLEŞTİRME     */
/* (mobil + desktop için küçük   */
/*  görsel düzeltmeler)          */
/* ============================= */

/* Toggle ikonları tıklanabilir olsun */
.toggle-password{ user-select: none; }

/* Input focus: netlik */
.input-box input:focus{
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.14);
}

/* Google hover biraz yumuşak */
.google-login:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.35);
}
/* ============================= */
/* REGISTER & FORGOT – RESPONSIVE (TELEFON) */
/* ============================= */

@media (max-width: 600px){

  /* Başlık + alt başlıklar */
  #registerForm h1,
  #forgotForm h1{
    font-size: 1.6rem;
    margin: 6px 0 6px;
    text-align: center;
  }
  #registerForm .subtitle,
  #forgotForm .subtitle{
    font-size: .85rem;
    margin: 0 0 12px;
    color: rgba(255,255,255,.75);
    text-align: center;
  }

  /* Üst form blokları */
  #registerForm .top-form,
  #forgotForm .top-form{
    gap: 12px;
    margin-bottom: 10px;
    align-items: center;             /* inputları ortala */
  }

  /* Inputlar: login’deki gibi kompakt (70%) */
  #registerForm .top-form .input-box input,
  #forgotForm  .input-box input{
    width: 85%;
    padding: 12px 14px;
    font-size: .95rem;
    border-radius: 12px;
  }

  /* Şifre kutuları: sağa göz için ekstra padding */
  #registerForm .password-box input{
    padding-right: 44px;
  }

  /* Göz ikonu: inputun sağına dayalı (login ile aynı görünüm) */
  #registerForm .password-box{ position: relative; }
  #registerForm .password-box .toggle-password{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    display: grid; place-items: center;
    color: #fff; cursor: pointer;
  }
  #registerForm .password-box .toggle-password i{ font-size: 14px; opacity:.95; }

  /* Ana butonlar */
  #registerForm .login-btn,
  #forgotForm  .login-btn{
    width: 100%;
    max-width: none;
    padding: 12px;
    font-size: 1rem;
    border-radius: 12px;
    margin: 10px 0 12px;
  }

  /* Alt link alanları */
  #registerForm .links.single,
  #forgotForm  .links{
    margin-top: 10px;
    text-align: center;
  }
  #registerForm .links.single a,
  #forgotForm  .links a{
    font-size: .9rem;
  }

  /* Google ile kayıt (register) – daha küçük ve sade */
  .google-register{ justify-content: center; margin-top: 12px; }
  .google-register .google-btn{
    width: 100%;
    max-width: none;
    padding: 10px 12px;
    font-size: .95rem;
    gap: 10px;
    border-radius: 12px;
    box-shadow: inset 0 0 8px rgba(255,255,255,.04),
                0 0 8px rgba(255,0,0,.18);
    scale: 0,9;
  }

  /* Forgot spacing’leri sıkılaştır (aşırı boşlukları kaldır) */
  #forgotForm .top-form{ margin-bottom: 14px; }
  #forgotForm .alt-form{
    margin-top: 16px;
    padding-bottom: 10px;
    gap: 10px;
  }
  /* REGISTER FORM – kartı kısaltma */
@media (max-width: 600px){

  #registerForm{
    padding-top: 0;              /* üstten boşluğu kaldır */
    margin-bottom: 20px;         /* kartın altını da kısalt */
  }

  #registerForm h1{ 
    margin: 4px 0;               /* başlık arası küçüldü */
    font-size: 1.4rem;           /* biraz daha küçük başlık */
  }

  #registerForm .subtitle{
    margin-bottom: 8px;          /* alt başlık boşluğu azaldı */
    font-size: 0.8rem;           
  }

  #registerForm .top-form{
    gap: 6px;                    /* input araları daraldı */
    margin-bottom: 8px;          
  }
  #registerForm .top-form .input-box input{
    padding: 10px 12px;          /* input yüksekliği kısaldı */
    font-size: 0.9rem;
  }

  #registerForm .alt-form{
    margin-top: 12px;            /* alttaki buton grubu yaklaştı */
  }

  /* Google butonunu küçültme */
  #registerForm .google-register .google-btn{
    transform: scale(0.9);       /* %90 boyut */
    transform-origin: center;
    margin-top: 6px;
  }
}
}
/* ===== AJANS SU — ALERT (Hero Style | Top-Center) ===== */

:root{
  --as-brand1:#ff2a2a;
  --as-brand2:#b30000;
  --as-glass1: rgba(26,26,30,.72);
  --as-glass2: rgba(16,16,20,.72);
  --as-text: #fff;
  --as-muted:#cfd3dd;

  /* alert auto-close süresi için default; JS değiştirmiyorsa burası geçerli */
  --ajsu-alert-dur: 3500ms;
}

/* Katman: üst-orta geniş */
.ajsu-alert-layer{
  position: fixed !important;
  top: 25px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: min(460px, 88vw) !important;
  max-width: 460px !important;
  pointer-events: none !important;
  z-index: 100000 !important;
  align-items: center !important;
}

/* Kart (hero) */
.ajsu-alert{
  position:relative;
  pointer-events:auto;

  display:flex;
  flex-direction:column;           /* ikon üstte, metin altta */
  align-items:center; gap:12px;

  padding:28px 24px 22px;
  border-radius:22px;

  color:var(--as-text);
  background:
    linear-gradient(180deg, var(--as-glass1), var(--as-glass2));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);

  overflow:hidden;
  animation: rhSlideIn .28s cubic-bezier(.2,.8,.2,1) both;
}

/* Arkadaki kırmızı nebula */
.ajsu-alert::before{
  content:"";
  position:absolute; inset:-40% -20% -35% -20%;
  filter: blur(44px) saturate(120%);
  opacity:.9; z-index:0;
  background:
    radial-gradient(55% 45% at 20% 28%, rgba(255,42,42,.28), transparent 60%),
    radial-gradient(55% 50% at 78% 36%, rgba(179,0,0,.24), transparent 62%),
    radial-gradient(60% 60% at 52% 78%, rgba(255,42,42,.18), transparent 64%),
    radial-gradient(40% 40% at 60% 55%, rgba(255,255,255,.06), transparent 70%);
  animation: nebulaDriftXY 18s ease-in-out infinite alternate;
}

/* Alt tarafta ince zaman çizgisi */
.ajsu-alert::after{
  content:"";
  position:absolute; left:0; bottom:0; height:3px; width:100%;
  transform-origin:left center;
  animation: alertTimer var(--ajsu-alert-dur) linear forwards;
  background: linear-gradient(90deg, var(--as-brand1), var(--as-brand2));
  opacity:.95;
}

/* İkon: sade, çerçevesiz */
.ajsu-alert .ico{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:auto; height:auto;
  background:none; border:none; box-shadow:none;
  margin-top:2px;
}
/* JS'in koyduğu svg'yi gizle, kendi sembolümüzü kullan */
.ajsu-alert .ico svg{ display:none !important; }

/* Varsayılan (danger/err) kırmızı çarpı */
.ajsu-alert .ico::before{
  content:"✖";
  font-size:36px;
  line-height:1;
  color:#33ff7a; /* fallback olarak yeşil görünmesin diye hemen override edeceğiz */
}
.ajsu-alert.danger .ico::before,
.ajsu-alert.err .ico::before{
  color:#ff3b3b;
}

/* success (ok) — yeşil ✓ (istersen durur, hata için zaten danger kullanacağız) */
.ajsu-alert.ok .ico::before{
  content:"✓";
  color:#27d17a;
}

/* info / warn simgeleri (opsiyonel) */
.ajsu-alert.info .ico::before{ content:"ℹ"; color:#5fb3ff; font-weight:700; }
.ajsu-alert.warn .ico::before{ content:"!";  color:#ffb43b; font-weight:800; }

/* Mesaj tipografisi — başlık büyük, alt metin küçük */
.ajsu-alert .msg{
  position:relative; z-index:1;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  gap:6px; max-width:92%;
}
.ajsu-alert .msg strong{
  display:block;
  font-size:32px;
  font-weight:900;
  letter-spacing:-.015em;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.ajsu-alert .msg{
  font-size:16px;
  font-weight:600;
  color:var(--as-muted);
}

/* Kapatma tuşu kullanılmıyor */
.ajsu-alert .x{ display:none !important; }

/* === Animasyonlar === */
@keyframes rhSlideIn{
  0%   { opacity:0; transform: translateY(-12px) scale(.985); }
  100% { opacity:1; transform: translateY(0)     scale(1);    }
}
@keyframes alertTimer{
  from { transform:scaleX(1); }
  to   { transform:scaleX(0); }
}
@keyframes nebulaDriftXY{
  0%   { transform: translate3d(-2%, 0, 0) scale(1.02) rotate(0.2deg); }
  50%  { transform: translate3d( 1%, -10px, 0) scale(1.03) rotate(0deg); }
  100% { transform: translate3d( 3%, -22px, 0) scale(1.05) rotate(-0.2deg); }
}

/* === Varyant renklendirme (çizgi + nebula tonları) === */
.ajsu-alert.danger::after,
.ajsu-alert.err::after{
  background: linear-gradient(90deg, #ff2a2a, #b30000);
}
.ajsu-alert.ok::after{
  background: linear-gradient(90deg, #27d17a, #16a05b);
}
.ajsu-alert.info::after{
  background: linear-gradient(90deg, #409cff, #1a6dd8);
}
.ajsu-alert.warn::after{
  background: linear-gradient(90deg, #ffc85a, #ff8a00);
}

/* Mobile uyum */
@media (max-width: 640px){
  .ajsu-alert-layer{
    width: min(95vw, 380px);
    top: 15px;
  }
  .ajsu-alert{
    border-radius: 16px;
    padding: 20px 16px 16px;
    max-width: 100%;
  }
  .ajsu-alert .msg strong{ font-size: 20px; }
  .ajsu-alert .msg{ font-size: 13px; }
  .ajsu-alert .ico::before{ font-size: 24px; }

  .rehello-card {
    top: 15px;
    width: min(95vw, 380px);
    transform: translate(-50%, 0) scale(1);
  }
  .rehello-body {
    padding: 20px 16px 16px;
  }
  .rehello-body h3 {
    font-size: 18px;
  }
  .rehello-body p {
    font-size: 13px;
  }
}