:root{
  --accent:#ff6000;
  --ink:#0b1220;
  --muted:rgba(11,18,32,.62);
  --glass:rgba(255,255,255,.80);
  --line:rgba(2,6,23,.12);
  --shadow:0 40px 110px rgba(0,0,0,.42);
}

*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}

body{
  min-height:100vh;
  background:
    linear-gradient(120deg, rgba(2,6,23,.38), rgba(2,6,23,.62)),
    url("https://adentekniksiparis.com.tr/bg.jpg") center/cover no-repeat fixed;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  color:var(--ink);
}

.auth-shell{
  width:100%;
  max-width:520px;
}

.auth-card{
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
}

.brand-sticky{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  z-index:5;
}

.brand-wrap{
  padding:18px 18px 12px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.brand-logo{
  width:100%;
  height:auto;
  max-height:100px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.18));
}

.brand-txt{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.brand-title{
  font-weight:1000;
  letter-spacing:.2px;
  color:var(--ink);
  font-size:14px;
}

.brand-sub{
  font-weight:850;
  color:var(--muted);
  font-size:12px;
}

.brand-line{
  height:3px;
  background:linear-gradient(90deg, var(--accent), rgba(255,96,0,.18));
}

.auth-body{
  padding:18px 18px 20px 18px;
  background:rgba(250,246,239,.92);
}

.hero{
  padding:14px 14px 10px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,96,0,.10), rgba(255,255,255,.0));
  border:1px solid rgba(255,96,0,.18);
  margin-bottom:14px;
}

.hero-big{
  font-size:24px;
  font-weight:1000;
  letter-spacing:.2px;
  color:var(--ink);
  line-height:1.15;
}

.hero-big span{color:var(--accent)}

.hero-small{
  margin-top:8px;
  font-size:13px;
  font-weight:850;
  color:rgba(11,18,32,.66);
}

.err{
  background:rgba(244,63,94,.10);
  border:1px solid rgba(244,63,94,.22);
  color:rgba(153,27,27,.92);
  padding:10px 12px;
  border-radius:14px;
  margin-bottom:12px;
  font-size:12px;
  font-weight:950;
}

.form{display:flex;flex-direction:column;gap:12px}

.field{display:flex;flex-direction:column;gap:6px}

.lbl{
  font-size:12px;
  font-weight:1000;
  color:rgba(11,18,32,.72);
}

.inp{
  width:100%;
  padding:12px 13px;
  border-radius:14px;
  border:1px solid rgba(2,6,23,.14);
  background:#fff;
  color:var(--ink);
  font-size:14px;
  font-weight:900;
  outline:none;
  transition:border .14s ease, box-shadow .14s ease;
}

.inp:focus{
  border-color:rgba(255,96,0,.55);
  box-shadow:0 0 0 4px rgba(255,96,0,.16);
}

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:2px;
}

.chk{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  font-size:12px;
  color:rgba(11,18,32,.62);
}

.chk input{width:16px;height:16px;accent-color:var(--accent)}

.lnk{
  font-size:12px;
  font-weight:1000;
  color:var(--accent);
  text-decoration:none;
}

.lnk:hover{text-decoration:underline}

.btn{
  width:100%;
  padding:13px 14px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  background:linear-gradient(135deg,#ff7a18,#ff6000);
  color:#1b0d00;
  font-weight:1000;
  letter-spacing:.2px;
  box-shadow:0 18px 50px rgba(255,96,0,.28);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 24px 70px rgba(255,96,0,.34);
  filter:brightness(1.02);
}

.btn:active{
  transform:translateY(0);
  box-shadow:0 16px 46px rgba(255,96,0,.24);
}

.foot{
  margin-top:6px;
  font-size:11px;
  font-weight:900;
  color:rgba(11,18,32,.50);
  text-align:center;
}

@media (max-width:480px){
  .auth-shell{max-width:420px}
  .brand-wrap{padding:16px 14px 10px}
  .auth-body{padding:16px 14px 18px}
  .hero-big{font-size:22px}
  .brand-logo{max-height:92px}
}
.foot .dev{
  display:block;
  margin-top:4px;
  font-size:11px;
  font-weight:850;
  color:rgba(11,18,32,.55);
}

.foot .dev a{
  color:#ff6000;
  text-decoration:none;
  font-weight:950;
}

.foot .dev a:hover{
  text-decoration:underline;
}
.btn-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.btn-ic{
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:14px;
  line-height:1;
}
.foot{
  margin-top:8px;
  font-size:11px;
  font-weight:900;
  color:rgba(11,18,32,.50);
  text-align:center;
}

.foot .dev{
  display:block;
  margin-top:4px;
  font-weight:850;
}

.foot .dev a{
  color:#ff6000;
  text-decoration:none;
  font-weight:950;
}

.foot .dev a:hover{
  text-decoration:underline;
}

.foot .copy{
  display:block;
  margin-top:4px;
  font-size:11px;
  opacity:.75;
}
.btn-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  position:relative;
}

.btn-ic{
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:14px;
  line-height:1;
}

.btn-sp{
  width:16px;height:16px;
  border-radius:999px;
  border:2px solid rgba(0,0,0,.18);
  border-top-color: rgba(0,0,0,.55);
  display:none;
}

.btn.is-loading .btn-ic{display:none}
.btn.is-loading .btn-sp{display:inline-block; animation:spin .7s linear infinite}
.btn.is-loading .btn-tx{opacity:.95}

.btn:disabled{
  opacity:.75;
  cursor:not-allowed;
  filter:saturate(.9);
}

@keyframes spin{to{transform:rotate(360deg)}}

.inp{
  -webkit-text-size-adjust:100%;
  font-size:16px;
}

@media(min-width:520px){
  .inp{font-size:14px}
}

.foot .dev{
  display:block;
  margin-top:4px;
  font-size:11px;
  font-weight:850;
  color:rgba(11,18,32,.55);
}

.foot .dev a{
  color:#ff6000;
  text-decoration:none;
  font-weight:950;
}

.foot .dev a:hover{ text-decoration:underline }

.foot .copy{
  display:block;
  margin-top:4px;
  font-size:11px;
  opacity:.75;
}
.btn-primary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary[disabled] {
    opacity: .75;
    cursor: not-allowed;
}

.btn-loader {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(10,31,59,.25);
    border-top-color: #0a1f3b;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}