:root{
  --panel:rgba(15,13,11,0.9);
  --line:rgba(255,214,137,.25);
  --text:#eae7df;
  --muted:#bdae8a;
  --gold1:#ffd889;
  --gold2:#cfa044;
}

html,body{height:100%;margin:0;padding:0}

/* ======= RESET (register.css'in auth arka planını iptal et) ======= */
body.login-bg{background:none !important;}
.page-auth,.verify,.verify-page{background:transparent !important;}
.page-auth::before,.page-auth::after,
.verify::before,.verify::after,
.verify-page::before,.verify-page::after{content:none !important;}
/* bazı temalarda kartı saran dış kapta gölge/arka plan olabiliyor */
.container-auth,.auth-wrap,.verify-wrap{background:transparent !important;box-shadow:none !important;border:none !important}

/* ======= TEK VE HAREKETLİ ARKA PLAN ======= */
.login-bg{
  display:flex;align-items:center;justify-content:center;min-height:100vh;color:#fff;
  background:
    radial-gradient(1200px 600px at 10% -10%,rgba(255,214,113,.09),transparent 60%),
    radial-gradient(800px 500px at 90% 120%,rgba(255,164,64,.06),transparent 65%),
    linear-gradient(180deg,#0b0b0e 0%,#0b0b0e 40%,#0f0f15 100%) !important;
  overflow:hidden;position:relative;
}
.login-bg::before,.login-bg::after{
  content:"";position:fixed;inset:-20%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(245,208,122,.09),transparent 70%);
  filter:blur(55px);animation:floatGlow 18s ease-in-out infinite alternate;opacity:.9;
}
.login-bg::after{
  animation-duration:26s;animation-delay:-4s;
  background:radial-gradient(closest-side,rgba(255,184,92,.08),transparent 70%);
}
@keyframes floatGlow{
  0%{transform:translate(-3%,-2%) scale(1)}
  50%{transform:translate(4%,3%) scale(1.06)}
  100%{transform:translate(-2%,1%) scale(1.02)}
}

/* ======= KART ======= */
/* ==== KART BOYUTU VE DİZAYNI ==== */
/* ==== GENİŞ VE TEMİZ KART DİZAYNI ==== */
.auth-shell{
  width:min(960px, 94%);
  margin-inline:auto;
  position:relative;
  z-index:1;
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:24px;
  padding:56px 72px;
  box-shadow:
    0 24px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(20px);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 34px 110px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* Başlık/Logo hiyerarşisi */
.logo{
  font-size:26px;
  font-weight:600;
  letter-spacing:.2px;
  margin:0 0 6px;
  color:#f0d89b;
}
.title{
  margin:0 0 28px;
  font-size:36px;
  line-height:1.15;
}

/* Form düzeni: aralıklar ve yükseklikler */
.form{display:grid; gap:16px;}
label{font-size:14px; color:#d8cdb3; margin:2px 0 6px; display:block;}

input{
  width:100%;
  height:52px;
  padding:0 16px;
  border-radius:14px;
  background:#0f0d0b;
  border:1px solid var(--line);
  color:var(--text);
  font-size:16px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
input:focus{
  border-color:#e9c979;
  box-shadow:0 0 0 4px rgba(233,201,121,.12);
}

/* Beni hatırla & Şifremi unuttum satırı */
.row-between{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; margin:6px 0 6px;
}
.remember{display:inline-flex; align-items:center; gap:10px; cursor:pointer;}
.remember input[type="checkbox"]{
  width:18px; height:18px; accent-color:#e9c979;
}
.muted{color:var(--muted); font-size:14px;}
.link{color:#e9c979; text-decoration:none; font-weight:600;}
.link:hover{text-decoration:underline;}
.link.subtle{opacity:.9}

/* Buton daha tok */
.btn{
  display:inline-flex; justify-content:center; align-items:center;
  width:100%; height:52px;
  border-radius:999px; border:0; cursor:pointer;
  font-weight:700; font-size:16px; letter-spacing:.2px; color:#1c160f;
  background:linear-gradient(135deg, var(--gold1), var(--gold2));
  box-shadow:0 14px 28px rgba(207,160,68,.28), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
  box-shadow:0 20px 40px rgba(207,160,68,.35), inset 0 1px 0 rgba(255,255,255,.55);
}

/* Alt bağlantı kısmı */
.auth-alt{margin-top:18px; display:flex; gap:8px; align-items:center; justify-content:center;}

/* OTP kutularına ufak aralık düzeltmesi (verify sayfası) */
.otp-inputs{gap:12px}

/* Mobil uyum */
@media (max-width: 700px){
  .card{padding:36px 20px; border-radius:20px;}
  .title{font-size:30px; margin-bottom:22px;}
  input,.btn{height:48px; font-size:15px;}
  .auth-shell{width:92%;}
}


.card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* iç elemanlar biraz genişletildi */
.form {
  display: grid;
  gap: 18px;
}

input {
  padding: 14px 16px;
  font-size: 15px;
}

.title {
  font-size: 30px;
  margin-bottom: 10px;
}

.logo {
  font-size: 24px;
  margin-bottom: 22px;
}

.btn {
  padding: 14px 20px;
  font-size: 15px;
}

.logo{font-size:22px;letter-spacing:.3px;margin-bottom:18px;color:#f0d89b}
.title{margin:0 0 6px;font-size:28px}
.subtitle{color:var(--muted)}
.muted{color:var(--muted);font-size:14px}

/* ======= FORM ======= */
.form{display:grid;gap:14px}
label{font-size:13px;color:#d8cdb3;display:block;margin:4px 2px 6px}
input{
  width:100%;padding:12px 14px;border-radius:12px;
  background:#0f0d0b;border:1px solid var(--line);
  color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s;
}
input:focus{border-color:#e9c979;box-shadow:0 0 0 3px rgba(233,201,121,.12)}

.row-between{display:flex;align-items:center;justify-content:space-between;margin:6px 0 14px}
.remember{display:flex;align-items:center;gap:8px;cursor:pointer}
.link{color:#e9c979;text-decoration:none}
.link:hover{text-decoration:underline}
.link.subtle{opacity:.9}

/* ======= BUTON ======= */
.btn{
  display:flex;justify-content:center;align-items:center;
  padding:12px 18px;border-radius:999px;cursor:pointer;
  font-weight:700;letter-spacing:.3px;border:0;color:#1c160f;
  background:linear-gradient(135deg,var(--gold1),var(--gold2));
  box-shadow:0 10px 20px rgba(207,160,68,.25),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .15s ease,filter .15s ease,box-shadow .2s ease;
}
.btn:hover{
  transform:translateY(-1px);filter:brightness(1.03);
  box-shadow:0 14px 26px rgba(207,160,68,.35),inset 0 1px 0 rgba(255,255,255,.55);
}

/* ALT BÖLÜM */
.auth-alt{margin-top:12px;display:flex;gap:6px;align-items:center;justify-content:center}

/* HATA & BİLGİ */
.error{color:#ff9aa2;font-size:13px;margin-top:6px;display:none}
.notice.success{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.4);
  color:#d7fbe8;padding:12px 20px;border-radius:12px;
  font-family:'Inter',system-ui,sans-serif;box-shadow:0 4px 10px rgba(0,0,0,.25);
  z-index:9999;backdrop-filter:blur(8px);animation:slideDown .5s ease;
}
.notice.success strong{color:#7effb0}
@keyframes slideDown{from{opacity:0;transform:translate(-50%,-15px)}to{opacity:1;transform:translate(-50%,0)}}
.notice.success.fade-out{opacity:0;transform:translate(-50%,-10px);transition:opacity .8s ease,transform .8s ease}

/* OTP */
.otp-inputs{display:flex;justify-content:center;gap:10px;margin:12px 0}
.otp{width:44px;height:50px;text-align:center;font-size:20px;border-radius:10px;border:1px solid var(--line);background:#0f0d0b;color:var(--text)}
.otp:focus{border-color:#e9c979;outline:none;box-shadow:0 0 0 2px rgba(233,201,121,.1)}



/* ==== ŞİFRE GÖSTER/GİZLE ==== */
.password-wrapper {
  position: relative;
  width: 100%;
}

.password-wrapper input {
  width: 100%;
  padding-right: 48px; /* ikon için yer */
}

.password-wrapper button {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #d8cdb3;
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.password-wrapper button:hover {
  opacity: 1;
  color: #e9c979;
}

.password-wrapper svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
}




/* OTP sayfasını tam ortala */
.auth-center{
  min-height: 100vh;
  display: grid;
  place-items: center;
}

/* Doğrulama kartında tilt/hover kapat */
.card.no-tilt:hover{
  transform: none !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* Aynı genişlik ve sol hizayı koru (login ile tutarlı) */
.auth-center .card{
  width: min(560px, 94%);
  padding: 26px 26px 22px;
}



/* ===== Şifre göster/gizle (login) ===== */
.password-wrapper {
  position: relative;
  width: 100%;
}
.password-wrapper input {
  width: 100%;
  padding-right: 48px; /* buton alanı */
}
.password-wrapper .toggle-password {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  color: #d8cdb3;
  opacity: .85;
  padding: 4px;
  line-height: 0;
  transition: opacity .2s ease, color .2s ease, transform .15s ease;
}
.password-wrapper .toggle-password:hover {
  opacity: 1;
  color: #e9c979;
  transform: translateY(-50%) scale(1.04);
}
.password-wrapper .icon-eye,
.password-wrapper .icon-monkey {
  display: inline-block;
  vertical-align: middle;
}

/* ===== Fancy “Beni hatırla” ===== */
.remember.fancy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.remember.fancy input {
  /* native kutuyu gizle */
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.remember.fancy .box {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #0f0d0b;
  box-shadow: inset 0 0 0 0 rgba(233,201,121,0);
  transition: all .18s ease;
  display: inline-block;
  position: relative;
}
.remember.fancy input:focus + .box {
  outline: 2px solid rgba(233,201,121,.25);
  outline-offset: 2px;
}
.remember.fancy input:checked + .box {
  border-color: #e9c979;
  background: linear-gradient(135deg, var(--gold1), var(--gold2));
  box-shadow: 0 2px 6px rgba(207,160,68,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
.remember.fancy .box::after {
  content: "";
  position: absolute;
  top: 3px; left: 5px;
  width: 6px; height: 10px;
  border: solid #1b180f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.7);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.remember.fancy input:checked + .box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}



/* ==== TAHA THEME SWITCH (Beni Hatırla) ==== */
.tc-switch{
  --h: 26px;             /* yükseklik */
  --w: 46px;             /* genişlik  */
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
.tc-switch .label{font-size:14px;}

/* input'u gizle, ama erişilebilir kalsın */
.tc-switch input{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
  padding:0;
  margin:-1px;
}

/* arka ray */
.tc-switch .track{
  inline-size:var(--w);
  block-size:var(--h);
  background:#0f0d0b;
  border:1px solid var(--line);
  border-radius:999px;
  position:relative;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

/* hareketli başlık (thumb) */
.tc-switch .thumb{
  position:absolute;
  inset-block-start:2px;
  inset-inline-start:2px;
  inline-size:calc(var(--h) - 4px);
  block-size:calc(var(--h) - 4px);
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold1), var(--gold2));
  box-shadow:
    0 3px 8px rgba(207,160,68,.35),
    inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .20s ease;
}

/* hover efekti */
.tc-switch:hover .track{ filter:brightness(1.04); }

/* focus (klavye ile erişilebilir) */
.tc-switch input:focus-visible + .track{
  box-shadow:
    0 0 0 4px rgba(233,201,121,.18),
    0 10px 26px rgba(207,160,68,.25);
  border-color:rgba(255,216,137,.45);
}

/* checked hali */
.tc-switch input:checked + .track{
  background:rgba(207,160,68,.16);
  border-color:rgba(255,216,137,.35);
  box-shadow:
    0 0 0 4px rgba(233,201,121,.10),
    0 12px 24px rgba(207,160,68,.22);
}
.tc-switch input:checked + .track .thumb{
  /* 46 - 22 - 4 = 20px kaydır */
  transform:translateX(20px);
}

/* disabled (ileride işine yarar) */
.tc-switch input:disabled + .track{
  opacity:.6; filter:saturate(.6);
  cursor:not-allowed;
}
.tc-switch input:disabled ~ .label{opacity:.7}

/* küçük ekranlarda biraz küçült */
@media (max-width: 420px){
  .tc-switch{ --h:24px; --w:42px; gap:8px; }
}



/* ==== Fancy checkbox (login) – sabit boyut/tema fix ==== */
.remember.fancy {
  --sz: 18px;
  --ring: rgba(233,201,121,.18);
}

.remember.fancy input {
  /* asıl checkbox'ı tamamen gizle */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.remember.fancy .box{
  width: var(--sz);
  height: var(--sz);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0f0d0b;
  box-shadow: 0 0 0 0 var(--ring);
  transition: box-shadow .2s, border-color .2s, background .2s;
}

.remember.fancy .box::after{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: transparent;
  transition: background .15s ease;
}

/* klavye odağı */
.remember.fancy input:focus + .box{
  box-shadow: 0 0 0 4px var(--ring);
  border-color: #e9c979;
}

/* işaretliyken altın iç dolgu */
.remember.fancy input:checked + .box::after{
  background: linear-gradient(135deg, var(--gold1), var(--gold2));
}