/* ═══════════════════════════════════════════════════════════
   assets/css/auth-shared.css  —  Evlilik Marketi Auth v7
   Tüm auth sayfaları YALNIZCA bu dosyayı kullanır.
   style.css / premium.css / premium-theme.css /
   obsidian-theme.css / tailwind  auth klasöründe yasaktır.
═══════════════════════════════════════════════════════════ */

/* ── 1. SIFIRLAMA ─────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html {
  font-size: 16px; height: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100%; width: 100%;
  background: #ffffff !important;
  color: #0f172a !important;
  font-family: -apple-system, 'DM Sans', BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  /* Tüm eski tema class'larını etkisiz kıl */
  --brand: #e11d48;
  --brand-light: #fff1f2;
  --brand-border: #fecdd3;
  --violet: #9333ea;
  --ink: #0d1117;
  --ink-soft: #475569;
  --ink-faint: #94a3b8;
  --line: #e8ecf0;
  --surface: #f8fafc;
}

/* Eski tema class'larının body üstündeki etkisini sıfırla */
body.auth-premium { background: #ffffff !important; }

/* ── 2. ARKA PLAN SÜSÜ ───────────────────────────────── */
body::before {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  top: -120px; left: -120px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(147,51,234,.09), transparent 68%);
  animation: aOrb1 9s ease-in-out infinite alternate;
}
body::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  bottom: -90px; right: -90px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(225,29,72,.07), transparent 68%);
  animation: aOrb2 11s ease-in-out infinite alternate;
}
@keyframes aOrb1 { to { transform: translate(24px,-32px) scale(1.12); } }
@keyframes aOrb2 { to { transform: translate(-18px,22px) scale(.88); } }

/* ── 3. ANIMASYONLAR ─────────────────────────────────── */
@keyframes aUp  { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes aPop { from { opacity:0; transform:scale(.5); }        to { opacity:1; transform:scale(1); } }
@keyframes aPulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@keyframes aShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
@keyframes aGrad  { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.a-up  { animation: aUp  .55s cubic-bezier(.16,1,.3,1) both; }
.a-up2 { animation: aUp  .60s cubic-bezier(.16,1,.3,1) .08s both; }
.a-up3 { animation: aUp  .65s cubic-bezier(.16,1,.3,1) .16s both; }
.a-up4 { animation: aUp  .70s cubic-bezier(.16,1,.3,1) .22s both; }
.a-shake { animation: aShake .4s ease; }

/* ── 4. LAYOUT ───────────────────────────────────────── */
.auth-page  { display:flex; flex-direction:column; min-height:100vh; }
.auth-shell { flex:1; display:flex; flex-direction:column; width:100%; max-width:480px; margin:0 auto; }

/* ── 5. MARKA ────────────────────────────────────────── */
.brand-area { padding: 52px 28px 0; }
.logo-icon  {
  width:60px; height:60px; border-radius:18px;
  background: linear-gradient(135deg,#9333ea,#e11d48) !important;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; margin-bottom:14px;
  box-shadow: 0 12px 28px rgba(225,29,72,.26);
}
.brand-name    { font-size:22px; font-weight:800; color:#0d1117 !important; letter-spacing:-.5px; }
.brand-name em { color:#e11d48 !important; font-style:normal; }
.brand-tag     { font-size:13px; color:#94a3b8 !important; font-weight:500; margin-top:4px; }

/* ── 6. ADIM NOKTALARI ───────────────────────────────── */
.step-dots { display:flex; gap:6px; justify-content:center; padding:16px 0 4px; }
.step-dot  { width:6px; height:6px; border-radius:3px; background:#e2e8f0; transition:all .3s; }
.step-dot.on { background:#e11d48 !important; width:20px; }

/* ── 7. BAŞLIK ───────────────────────────────────────── */
.pane-head { padding:24px 28px 0; }
.badge {
  display:inline-flex; align-items:center; gap:6px;
  background:#fff1f2 !important; color:#e11d48 !important;
  border:1px solid #fecdd3 !important; border-radius:20px;
  padding:4px 12px; font-size:11px; font-weight:700; margin-bottom:10px;
}
.badge-dot { width:6px; height:6px; border-radius:50%; background:#e11d48; animation:aPulse 1.6s ease infinite; }
.pane-title { font-size:26px; font-weight:800; color:#0d1117 !important; letter-spacing:-.7px; line-height:1.2; font-family:Georgia,serif; }
.pane-sub   { font-size:13px; color:#64748b !important; margin-top:6px; font-weight:500; }

/* ── 8. FLASH MESAJLARI ──────────────────────────────── */
.flash {
  margin:10px 28px 0; padding:12px 16px; border-radius:14px;
  font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px;
  animation: aUp .4s ease both;
}
.flash-error   { background:#fff1f2 !important; color:#be123c !important; border:1px solid #fecdd3 !important; }
.flash-success { background:#f0fdf4 !important; color:#15803d !important; border:1px solid #bbf7d0 !important; }
.flash-warning { background:#fffbeb !important; color:#d97706 !important; border:1px solid #fde68a !important; }

/* ── 9. FORM ALANI ───────────────────────────────────── */
.form-area { padding:22px 28px 0; flex:1; }
.field      { margin-bottom:18px; }
.field-label {
  font-size:11px; font-weight:800; color:#475569 !important;
  text-transform:uppercase; letter-spacing:.8px;
  margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;
}
.field-label a { font-size:12px; font-weight:700; color:#e11d48 !important; text-decoration:none; letter-spacing:0; text-transform:none; }
.field-wrap    { position:relative; }
.field-ico {
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:#94a3b8; font-size:13px; pointer-events:none; transition:color .2s;
}

/* ── 10. INPUT — HER KOŞULDA AÇIK/KOYU ──────────────── */
.inp {
  display:block; width:100%; height:52px;
  padding:0 48px 0 44px;
  border-radius:16px; border:1.5px solid #e8ecf0 !important;
  background-color:#f8fafc !important;
  color:#0f172a !important; -webkit-text-fill-color:#0f172a !important;
  font-size:14px; font-weight:600; font-family:inherit;
  outline:none; -webkit-appearance:none; appearance:none;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.inp::placeholder            { color:#b0bac8 !important; -webkit-text-fill-color:#b0bac8 !important; font-weight:500; }
.inp:focus                   { border-color:#e11d48 !important; background-color:#fff !important; box-shadow:0 0 0 4px rgba(225,29,72,.07); }
.inp:focus + .field-ico      { color:#e11d48; }
.inp:-webkit-autofill        { -webkit-box-shadow:0 0 0 100px #f8fafc inset !important; -webkit-text-fill-color:#0f172a !important; }
.inp:-webkit-autofill:focus  { -webkit-box-shadow:0 0 0 100px #fff     inset !important; }
input[type="date"].inp       { color:#64748b !important; -webkit-text-fill-color:#64748b !important; }

/* OTP / kod girişi */
.inp-otp {
  display:block; width:100%; height:64px;
  border-radius:16px; border:1.5px solid #e8ecf0 !important;
  background-color:#f8fafc !important;
  color:#0f172a !important; -webkit-text-fill-color:#0f172a !important;
  font-size:28px; font-weight:900; text-align:center; letter-spacing:.4em;
  outline:none; -webkit-appearance:none; appearance:none;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
  font-family:inherit;
}
.inp-otp::placeholder         { color:#b0bac8 !important; -webkit-text-fill-color:#b0bac8 !important; letter-spacing:.4em; }
.inp-otp:focus                { border-color:#e11d48 !important; background:#fff !important; box-shadow:0 0 0 4px rgba(225,29,72,.07); }
.inp-otp:-webkit-autofill     { -webkit-box-shadow:0 0 0 100px #f8fafc inset !important; }

/* Şifre göster/gizle */
.pw-eye {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:none !important; border:none !important; padding:4px; cursor:pointer;
  color:#94a3b8; font-size:14px; transition:color .2s;
}
.pw-eye:hover { color:#475569; }

/* ── 11. YARDIMCI ELEMANLAR ──────────────────────────── */
.check-row   { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.check-label { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#475569 !important; cursor:pointer; }
.check-label input[type="checkbox"] { accent-color:#e11d48; width:15px; height:15px; }

.divider { display:flex; align-items:center; gap:12px; margin:16px 0; font-size:12px; font-weight:700; color:#94a3b8; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:#e8ecf0; }

/* Şifre güç çubukları */
.pw-bars { display:flex; gap:4px; margin-top:8px; }
.pw-bar  { flex:1; height:3px; border-radius:2px; background:#e2e8f0; transition:background .3s; }
.pw-bar.w { background:#f43f5e !important; }
.pw-bar.m { background:#f59e0b !important; }
.pw-bar.s { background:#22c55e !important; }

/* Info kutusu */
.info-box       { background:#fff7ed !important; border:1px solid #fed7aa !important; border-radius:14px; padding:14px 16px; margin-top:8px; }
.info-box-title { font-size:13px; font-weight:700; color:#c2410c !important; margin-bottom:4px; }
.info-box-text  { font-size:12px; color:#9a3412 !important; line-height:1.6; font-weight:500; }

/* Debug kutusu */
.debug-box { background:#fffbeb !important; border:1px solid #fde68a !important; border-radius:14px; padding:14px 16px; margin-top:16px; text-align:center; }

/* ── 12. BUTONLAR ────────────────────────────────────── */

/* Sosyal buton */
.btn-social {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; height:50px; border-radius:16px; text-decoration:none;
  border:1.5px solid #e2e8f0 !important; background-color:#f8fafc !important;
  color:#334155 !important; -webkit-text-fill-color:#334155 !important;
  font-size:14px; font-weight:700; font-family:inherit; cursor:pointer;
  transition:all .15s; -webkit-appearance:none;
}
.btn-social:active { transform:scale(.97); }

/* Alt aksiyon çubuğu */
.bottom-bar {
  position:sticky; bottom:0; z-index:10;
  padding:12px 28px calc(28px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, #fff 76%, transparent);
}
.bar-row { display:flex; gap:10px; align-items:center; }

/* Ghost buton */
.btn-ghost {
  flex:1; height:54px; border-radius:18px; text-decoration:none;
  border:1.5px solid #e2e8f0 !important; background-color:#f8fafc !important;
  color:#334155 !important; -webkit-text-fill-color:#334155 !important;
  font-size:14px; font-weight:700; font-family:inherit; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s; -webkit-appearance:none;
}
.btn-ghost:hover  { background-color:#f1f5f9 !important; }
.btn-ghost:active { transform:scale(.97); }

/* CTA gradient buton */
.btn-cta {
  flex:1.4; height:54px; border-radius:18px; border:none !important;
  background:linear-gradient(135deg,#ff4b6e,#e11d48,#c2185b) !important;
  background-size:200% 200%;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  font-size:15px; font-weight:800; font-family:inherit; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 10px 24px rgba(225,29,72,.30); -webkit-appearance:none;
  transition:transform .15s, box-shadow .15s;
  animation:aGrad 4s ease infinite;
}
.btn-cta:active  { transform:scale(.97); box-shadow:0 5px 14px rgba(225,29,72,.20); }

/* Tam genişlik CTA */
.btn-cta-full {
  display:flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; width:100%; max-width:300px; height:54px;
  border-radius:18px; border:none !important;
  background:linear-gradient(135deg,#ff4b6e,#e11d48) !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  font-size:15px; font-weight:800; font-family:inherit; cursor:pointer;
  box-shadow:0 10px 24px rgba(225,29,72,.30); -webkit-appearance:none;
  margin-top:28px;
}

/* Tek satır link buton */
.btn-link {
  background:none !important; border:none !important;
  color:#e11d48 !important; font-size:13px; font-weight:700;
  cursor:pointer; text-decoration:none; font-family:inherit;
  transition:opacity .15s;
}
.btn-link:active { opacity:.7; }

/* ── 13. BAŞARI EKRANI ───────────────────────────────── */
.success-wrap {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  padding:60px 28px; min-height:100vh;
}
.success-circle {
  width:100px; height:100px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:44px;
  margin-bottom:28px; animation:aPop .5s cubic-bezier(.16,1,.3,1) both;
}
.success-circle.green  { background:linear-gradient(135deg,#22c55e,#16a34a) !important; box-shadow:0 16px 32px rgba(34,197,94,.28); }
.success-circle.rose   { background:linear-gradient(135deg,#ff4b6e,#e11d48) !important; box-shadow:0 16px 32px rgba(225,29,72,.28); }
.success-circle.violet { background:linear-gradient(135deg,#9333ea,#7c3aed) !important; box-shadow:0 16px 32px rgba(147,51,234,.28); }
.success-title { font-size:26px; font-weight:800; color:#0d1117 !important; font-family:Georgia,serif; margin-bottom:10px; letter-spacing:-.5px; }
.success-msg   { font-size:14px; color:#64748b !important; font-weight:500; line-height:1.65; max-width:280px; }
.success-note  { font-size:12px; color:#94a3b8 !important; font-weight:500; line-height:1.6; max-width:260px; margin-top:14px; }

/* ── 14. VERİFY OTP EKRANı ──────────────────────────── */
.otp-hint { font-size:12px; color:#94a3b8 !important; text-align:center; margin-top:8px; font-weight:500; }

/* ── 15. KONFETTI ────────────────────────────────────── */
@keyframes aConfetti {
  0%   { transform:translateY(-20px) rotate(0deg);   opacity:1; }
  100% { transform:translateY(120vh)  rotate(720deg); opacity:0; }
}
.confetti { position:fixed; top:-10px; width:8px; height:8px; border-radius:2px; pointer-events:none; z-index:999; animation:aConfetti linear forwards; }