/* =====================================================================
   trhelp_login — TEMA (light + dark, dashed kimlik)
   ===================================================================== */
:root{
  /* Koyu tema (varsayılan) */
  --trhelp-bg: #0a0a0f;
  --trhelp-bg-soft: #101018;
  --trhelp-card: #14141d;
  --trhelp-card-2: #1a1a26;
  --trhelp-b1: rgba(255,255,255,.06);
  --trhelp-b2: rgba(255,255,255,.12);
  --trhelp-b3: rgba(255,255,255,.18);
  --trhelp-tx: #f5f5fa;
  --trhelp-mt: #9ca3af;
  --trhelp-mt2: #6b7280;
  --trhelp-mt3: #4b5563;
  --trhelp-ac: #6366f1;
  --trhelp-ac-hover: #818cf8;
  --trhelp-ac-soft: rgba(99,102,241,.10);
  --trhelp-ac-border: rgba(99,102,241,.25);
  --trhelp-ac-glow: rgba(99,102,241,.35);
  --trhelp-green: #22c55e;
  --trhelp-green-soft: rgba(34,197,94,.10);
  --trhelp-green-border: rgba(34,197,94,.25);
  --trhelp-red: #ef4444;
  --trhelp-red-soft: rgba(239,68,68,.10);
  --trhelp-red-border: rgba(239,68,68,.25);
  --trhelp-font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --trhelp-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --trhelp-shadow: 0 4px 12px rgba(0,0,0,.4);
  --trhelp-shadow-md: 0 8px 24px rgba(0,0,0,.5);
  --trhelp-shadow-lg: 0 24px 48px rgba(0,0,0,.6);
  --trhelp-ease: cubic-bezier(.4,0,.2,1);
  --trhelp-ease-out: cubic-bezier(.16,1,.3,1);
  --trhelp-card-bg: linear-gradient(180deg,rgba(20,20,29,.7) 0%,rgba(20,20,29,.9) 100%);
  --trhelp-input-bg: rgba(255,255,255,.025);
  --trhelp-input-focus-bg: rgba(99,102,241,.05);
  --trhelp-nav-bg: rgba(10,10,10,.8);
  --trhelp-pw-toggle-bg: rgba(255,255,255,.03);
  --trhelp-tabs-bg: rgba(255,255,255,.03);
}

/* Açık tema */
:root[data-trhelp-theme="light"], html:not(.dark)[data-trhelp-theme]{
  --trhelp-bg: #fafafa;
  --trhelp-bg-soft: #f4f4f5;
  --trhelp-card: #ffffff;
  --trhelp-card-2: #f4f4f5;
  --trhelp-b1: rgba(0,0,0,.06);
  --trhelp-b2: rgba(0,0,0,.12);
  --trhelp-b3: rgba(0,0,0,.18);
  --trhelp-tx: #0a0a0f;
  --trhelp-mt: #52525b;
  --trhelp-mt2: #71717a;
  --trhelp-mt3: #a1a1aa;
  --trhelp-ac: #4f46e5;
  --trhelp-ac-hover: #4338ca;
  --trhelp-ac-soft: rgba(79,70,229,.08);
  --trhelp-ac-border: rgba(79,70,229,.20);
  --trhelp-ac-glow: rgba(79,70,229,.25);
  --trhelp-green: #16a34a;
  --trhelp-green-soft: rgba(22,163,74,.08);
  --trhelp-green-border: rgba(22,163,74,.25);
  --trhelp-red: #dc2626;
  --trhelp-red-soft: rgba(220,38,38,.08);
  --trhelp-red-border: rgba(220,38,38,.25);
  --trhelp-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --trhelp-shadow: 0 4px 12px rgba(0,0,0,.06);
  --trhelp-shadow-md: 0 8px 24px rgba(0,0,0,.08);
  --trhelp-shadow-lg: 0 24px 48px rgba(0,0,0,.10);
  --trhelp-card-bg: linear-gradient(180deg,#ffffff 0%,#fafafa 100%);
  --trhelp-input-bg: rgba(0,0,0,.02);
  --trhelp-input-focus-bg: rgba(79,70,229,.04);
  --trhelp-nav-bg: rgba(255,255,255,.8);
  --trhelp-pw-toggle-bg: rgba(0,0,0,.03);
  --trhelp-tabs-bg: rgba(0,0,0,.03);
}

/* Sistem teması için otomatik light mode (kullanıcı seçmediğinde) */
@media (prefers-color-scheme: light){
  :root:not([data-trhelp-theme]){
    --trhelp-bg: #fafafa;
    --trhelp-bg-soft: #f4f4f5;
    --trhelp-card: #ffffff;
    --trhelp-card-2: #f4f4f5;
    --trhelp-b1: rgba(0,0,0,.06);
    --trhelp-b2: rgba(0,0,0,.12);
    --trhelp-b3: rgba(0,0,0,.18);
    --trhelp-tx: #0a0a0f;
    --trhelp-mt: #52525b;
    --trhelp-mt2: #71717a;
    --trhelp-mt3: #a1a1aa;
    --trhelp-ac: #4f46e5;
    --trhelp-ac-hover: #4338ca;
    --trhelp-ac-soft: rgba(79,70,229,.08);
    --trhelp-ac-border: rgba(79,70,229,.20);
    --trhelp-ac-glow: rgba(79,70,229,.25);
    --trhelp-green: #16a34a;
    --trhelp-green-soft: rgba(22,163,74,.08);
    --trhelp-green-border: rgba(22,163,74,.25);
    --trhelp-red: #dc2626;
    --trhelp-red-soft: rgba(220,38,38,.08);
    --trhelp-red-border: rgba(220,38,38,.25);
    --trhelp-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --trhelp-shadow: 0 4px 12px rgba(0,0,0,.06);
    --trhelp-shadow-md: 0 8px 24px rgba(0,0,0,.08);
    --trhelp-shadow-lg: 0 24px 48px rgba(0,0,0,.10);
    --trhelp-card-bg: linear-gradient(180deg,#ffffff 0%,#fafafa 100%);
    --trhelp-input-bg: rgba(0,0,0,.02);
    --trhelp-input-focus-bg: rgba(79,70,229,.04);
    --trhelp-nav-bg: rgba(255,255,255,.8);
    --trhelp-pw-toggle-bg: rgba(0,0,0,.03);
    --trhelp-tabs-bg: rgba(0,0,0,.03);
  }
}

*{box-sizing:border-box;margin:0;padding:0;border-color:var(--trhelp-b2)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--trhelp-bg);
  min-height:100vh;
  font-family:var(--trhelp-font);
  color:var(--trhelp-tx);
  line-height:1.6;
  position:relative;
  overflow-x:hidden;
  transition:background .25s var(--trhelp-ease),color .25s var(--trhelp-ease);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:transparent;
  transition:background .35s var(--trhelp-ease);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:transparent;
}

/* ===== NAVIGATION ===== */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;height:64px;
  background:var(--trhelp-nav-bg);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--trhelp-b1);
  position:sticky;top:0;z-index:100;
  transition:background .25s var(--trhelp-ease),border-color .25s var(--trhelp-ease);
}
.logo{
  font-size:18px;font-weight:700;color:var(--trhelp-tx);
  letter-spacing:-.3px;display:flex;align-items:center;gap:8px;
  cursor:pointer;text-decoration:none;
}
.logo-dot{
  width:8px;height:8px;border-radius:2px;
  background:var(--trhelp-ac);
  animation:pulseDot 2s ease-in-out infinite;flex-shrink:0;
}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.5}}
.logo-badge{
  background:var(--trhelp-ac);color:#fff;
  font-size:9px;font-weight:800;padding:2px 7px;border-radius:4px;letter-spacing:.5px;
}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-btn{
  background:transparent;border:1px solid var(--trhelp-b1);border-radius:8px;
  color:var(--trhelp-mt);font-size:13px;font-weight:600;padding:8px 16px;
  cursor:pointer;transition:all .2s var(--trhelp-ease);font-family:var(--trhelp-font);
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
}
.nav-btn:hover{color:var(--trhelp-tx);border-color:var(--trhelp-b2);background:rgba(0,0,0,.02)}
:root[data-trhelp-theme="dark"] .nav-btn:hover,
.dark .nav-btn:hover{background:rgba(255,255,255,.03)}
.nav-btn.primary{
  background:var(--trhelp-ac);border-color:transparent;color:#fff;
  box-shadow:0 2px 8px rgba(99,102,241,.3);
}
.nav-btn.primary:hover{background:var(--trhelp-ac-hover);box-shadow:0 4px 16px rgba(99,102,241,.5);transform:translateY(-1px)}

/* ===== TEMA DEĞİŞTİRİCİ ===== */
.theme-toggle{
  position:relative;
  display:inline-flex;
  border:1px dashed var(--trhelp-b2);
  border-radius:8px;
  background:var(--trhelp-tabs-bg);
  padding:3px;gap:2px;
}
.theme-btn{
  background:transparent;border:none;
  width:30px;height:28px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;
  color:var(--trhelp-mt);
  cursor:pointer;
  transition:all .2s var(--trhelp-ease);
}
.theme-btn:hover{color:var(--trhelp-tx)}
.theme-btn.active{
  background:var(--trhelp-card-2);
  color:var(--trhelp-tx);
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.theme-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===== AUTH LAYOUT ===== */
.auth-page{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:calc(100vh - 64px);padding:48px 24px;position:relative;
}

.auth-shell{
  width:100%;max-width:440px;position:relative;
  border-radius:16px;
  border:1px dashed var(--trhelp-b2);
  background:var(--trhelp-card-bg);
  box-shadow:var(--trhelp-shadow-lg);
  padding:32px 28px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  animation:fadeUp .7s var(--trhelp-ease-out) both;
  transition:background .25s var(--trhelp-ease),border-color .25s var(--trhelp-ease);
}

.auth-shell::before{
  content:'';position:absolute;top:-80px;left:50%;
  transform:translateX(-50%);
  width:300px;height:200px;border-radius:50%;
  background:transparent;
  pointer-events:none;z-index:0;
}

.auth-form{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px}
.auth-form-top{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:8px;margin-bottom:4px;
}
.auth-form-title{
  font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--trhelp-tx);
  transition:color .25s var(--trhelp-ease);
}
.auth-form-sub{color:var(--trhelp-mt);font-size:13px;line-height:1.5}

/* Tabs */
.tabs{
  position:relative;display:flex;
  background:var(--trhelp-tabs-bg);
  border:1px solid var(--trhelp-b1);
  border-radius:10px;padding:4px;gap:4px;
  transition:background .25s var(--trhelp-ease);
}
.tab{
  flex:1;padding:9px 14px;background:transparent;border:none;
  color:var(--trhelp-mt);font-size:13px;font-weight:600;
  border-radius:8px;cursor:pointer;font-family:var(--trhelp-font);
  transition:color .2s var(--trhelp-ease);
  position:relative;z-index:2;
}
.tab.active{color:#fff}
.tab-indicator{
  position:absolute;top:4px;bottom:4px;width:calc(50% - 4px);
  border-radius:8px;
  background:var(--trhelp-ac);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .35s var(--trhelp-ease);
  z-index:1;
}

/* Form */
.form-stack{display:flex;flex-direction:column;gap:14px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{
  font-size:11px;font-weight:700;
  color:var(--trhelp-mt);text-transform:uppercase;letter-spacing:.8px;
}
.input-wrap{position:relative}
.input-wrap svg.iico{
  position:absolute;left:13px;top:50%;
  transform:translateY(-50%);
  width:18px;height:18px;
  stroke:var(--trhelp-mt);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;
  transition:all .25s var(--trhelp-ease);opacity:.7;
}
.form-input{
  width:100%;
  background:var(--trhelp-input-bg);
  border:1px solid var(--trhelp-b1);
  border-radius:10px;
  padding:12px 14px 12px 40px;
  font-size:14px;color:var(--trhelp-tx);outline:none;
  transition:all .2s var(--trhelp-ease);font-family:var(--trhelp-font);
}
.form-input::placeholder{color:var(--trhelp-mt2)}
.form-input:hover{border-color:var(--trhelp-b2)}
.form-input:focus{
  border-color:var(--trhelp-ac);
  background:var(--trhelp-input-focus-bg);
  box-shadow:0 0 0 3px var(--trhelp-ac-soft);
}
.input-wrap:focus-within svg.iico{
  stroke:var(--trhelp-ac);opacity:1;
  transform:translateY(-50%) scale(1.05);
}

.pw-toggle{
  position:absolute;right:10px;top:50%;
  transform:translateY(-50%);
  background:var(--trhelp-pw-toggle-bg);
  border:1px solid var(--trhelp-b1);
  border-radius:6px;cursor:pointer;color:var(--trhelp-mt);
  display:flex;padding:5px;
  transition:all .25s var(--trhelp-ease);
}
.pw-toggle:hover{
  color:var(--trhelp-ac-hover);
  background:var(--trhelp-ac-soft);
  border-color:var(--trhelp-ac-border);
}
.pw-toggle svg{width:14px;height:14px;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke:currentColor}

.form-row{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:var(--trhelp-mt);margin-top:-2px;
}
.check{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;
}
.check input{
  appearance:none;-webkit-appearance:none;
  width:14px;height:14px;
  border:1px solid var(--trhelp-b2);border-radius:4px;
  background:var(--trhelp-bg-soft);cursor:pointer;
  display:grid;place-items:center;
  transition:all .2s var(--trhelp-ease);
}
.check input:checked{background:var(--trhelp-ac);border-color:var(--trhelp-ac)}
.check input:checked::after{
  content:'';width:7px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
}
.link-btn{
  background:none;border:none;color:var(--trhelp-ac-hover);
  font-size:12px;cursor:pointer;font-family:var(--trhelp-font);
  font-weight:600;padding:0;transition:color .2s var(--trhelp-ease);
}
.link-btn:hover{color:var(--trhelp-ac)}

.btn-primary{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px 16px;border:none;border-radius:10px;
  color:#fff;font-size:14px;font-weight:700;
  background:var(--trhelp-ac);
  cursor:pointer;font-family:var(--trhelp-font);
  box-shadow:0 2px 8px rgba(99,102,241,.25);
  transition:background .2s var(--trhelp-ease),transform .2s var(--trhelp-ease),box-shadow .2s var(--trhelp-ease);
}
.btn-primary:hover{background:var(--trhelp-ac-hover);transform:translateY(-1px);box-shadow:0 4px 16px rgba(99,102,241,.4)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-primary svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.form-foot{
  text-align:center;font-size:12px;color:var(--trhelp-mt2);margin-top:2px;
}
.form-foot button{
  color:var(--trhelp-tx);font-weight:600;background:none;border:none;
  cursor:pointer;font-family:var(--trhelp-font);font-size:12px;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(0,0,0,.2);
  transition:text-decoration-color .2s var(--trhelp-ease);
}
:root[data-trhelp-theme="dark"] .form-foot button,
.dark .form-foot button{text-decoration-color:rgba(255,255,255,.2)}
.form-foot button:hover{text-decoration-color:var(--trhelp-ac-hover)}

.field-slide{
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .35s var(--trhelp-ease),opacity .25s var(--trhelp-ease),margin .35s var(--trhelp-ease);
  margin-top:-14px;
}
.field-slide.show{max-height:120px;opacity:1;margin-top:0}

.form-msg{
  display:none;border-radius:10px;padding:11px 14px;
  font-size:12px;font-weight:500;margin-bottom:14px;
}
.form-msg.show{display:block;animation:fadeUp .3s var(--trhelp-ease-out)}
.form-msg.success{background:var(--trhelp-green-soft);border:1px solid var(--trhelp-green-border);color:var(--trhelp-green)}
.form-msg.error{background:var(--trhelp-red-soft);border:1px solid var(--trhelp-red-border);color:var(--trhelp-red)}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:520px){
  .nav{padding:0 16px}
  .auth-page{padding:32px 16px}
  .auth-shell{padding:26px 20px;border-radius:14px}
  .form-row{flex-direction:column;align-items:flex-start;gap:8px}
  .logo-badge{display:none}
}