/* Kontakt page-specific (uses global dark theme in main.css) */

main{padding:40px 20px 60px}
.container{max-width:700px;margin:0 auto;position:relative;z-index:1}

h1{
  font-size:2rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 26px;
}

.form{
  display:flex;
  flex-direction:column;
  gap:18px;
  background:rgba(5,10,20,.82);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:26px;
  box-shadow:0 18px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
}

.form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.9rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  opacity:.9;
}

.input,.textarea{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  color:#f5f5f5;
  font-size:.95rem;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input:hover,.textarea:hover{border-color:rgba(255,255,255,.25)}
.input:focus,.textarea:focus{
  outline:none;
  border-color:#00d4ff;
  box-shadow:0 0 0 1px rgba(0,212,255,.4), 0 0 12px rgba(0,212,255,.35);
}

.button{align-self:flex-start}

@media (max-width:600px){
  h1{font-size:1.6rem}
  .form{padding:20px}
}