:root{
  --bg:#ffffff;
  --ink:#000000;
  --muted: rgba(0,0,0,0.5);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* Genel ekran */
.screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hidden{ display:none; }

/* Wrapper */
.login-wrapper{
  width: 100%;
  display:flex;
  justify-content:center;
}

/* Görsel konteyner */
.image-container{
  position: relative;
  width: min(1000px, 95vw);
}

/* Büyük header görsel */
.title-image{
  width: 100%;
  height: auto;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* FORM – görselin üstünde */
.form-overlay{
  position: absolute;
  top: 55%;
  left: 65%;
  transform: translate(-50%, -50%);
  width: 420px;

  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}

/* Inputlar */
.input{
  width:100%;
  padding: 14px;
  border: 1px solid #000;
  background:#fff;
  color:#000;
  font-size:14px;
  text-align:center;
  outline:none;
}

.input:focus{
  border-color:#000;
}

/* ENTER butonu */
.btn{
  border: 1px solid #000;
  background:#000;
  color:#fff;
  cursor:pointer;
}

.btn-small{
  margin-top: 6px;
  padding: 9px 20px;
  font-size:13px;
  width: auto;
}

.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn.ghost{
  background:#fff;
  color:#000;
}

/* Error */
.error{
  min-height: 16px;
  font-size: 12px;
  color: var(--muted);
  text-align:center;
}

/* MAIN */
.main{
  width:min(900px, 92vw);
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
}

.menu{
  display:flex;
  gap:16px;
}

.menu a{
  color:#000;
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.menu a:hover{
  border-bottom:1px solid #000;
}