:root{
  --bg:#0F212C;
  --panel:#122536;
  --field:#1a2b43;
  --field-focus:#274066;
  --ink:#ffffff;
  --muted:#b7c6d8;
  --accent:#66aaff;
  --accent-2:#9acbff;
  --danger:#ff6b6b;
  --ok:#7CFFB2;
  --line:#2f4e75;
  --shadow:0 16px 36px rgba(0,0,0,.55);
  --header-h:72px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  display:flex; flex-direction:column; min-height:100vh;
}
#header-container{position:relative; z-index:5;}

main {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 10px; /* üst boşluk sıfır */
  background:
    radial-gradient(800px 280px at 10% -10%, rgba(102,170,255,.08), transparent),
    linear-gradient(180deg, var(--panel), #0f2a44);
  border: 1px solid rgba(47,78,117,.35);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 28px 22px 26px;
}

/* 📱 Mobilde header’a yapışsın */
@media (max-width: 600px) {
  main {
    margin-top: 0;         /* header'a yapışır */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
    border-radius: 0;      /* opsiyonel: mobilde tam genişlik */
    max-width: 100%;       /* opsiyonel: tam genişlik */
  }
}

h1.page-title{
  margin:0 0 14px;
  font-size:2rem; line-height:1.2;
  font-weight:900; letter-spacing:.2px; text-align:center; color:#fff;
}

form{ display:grid; gap:14px; margin-top:6px }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:700px){ .row-2{ grid-template-columns:1fr } }

label{ font-weight:800; color:#e6eef8; font-size:.96rem }
.hint{ font-size:.85rem; color:var(--muted) }

input, select{
  width:100%; padding:.78rem .9rem; border-radius:12px; border:1.6px solid var(--line);
  background:var(--field); color:#eaf4ff; font-size:1rem; outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
input::placeholder{ color:#a7b6c9 }
input:focus, select:focus{
  border-color:var(--accent);
  background:var(--field-focus);
  box-shadow:0 0 0 4px rgba(102,170,255,.15);
}

.file{
  display:grid; gap:8px;
  border:1.6px dashed var(--line); border-radius:12px; padding:12px; background:#132a44;
}
.file input[type="file"]{ background:transparent; border:none; padding:0 }
.preview{ display:flex; gap:12px; align-items:center; margin-top:4px; flex-wrap:wrap }
.preview img{
  width:72px; height:72px; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:#0f2133;
}

button[type="submit"]{
  margin-top:6px; padding:.95rem 1rem; border:none; border-radius:12px; cursor:pointer;
  background: linear-gradient(180deg,#74b5ff,#4b93f0);
  color:#062235; font-weight:900; font-size:1.05rem;
  box-shadow:0 10px 24px rgba(102,170,255,.35);
  transition:transform .06s, box-shadow .2s, filter .15s;
}
button[type="submit"]:hover{ transform:translateY(-1px); filter:brightness(1.03) }
button[disabled]{ opacity:.65; cursor:not-allowed; transform:none; filter:grayscale(.15) }

checks{ display:grid; gap:8px; margin-top:2px }
.check{
  display:flex; gap:10px; align-items:flex-start; background:#132a44; border:1px solid var(--line);
  padding:10px 12px; border-radius:12px;
}
.check input{ width:18px; height:18px; margin-top:3px; accent-color:var(--accent) }
.check a{ color:var(--accent); text-decoration:underline; font-weight:800 }
.check a:hover{ color:var(--accent-2) }

#message{ margin-top:10px; min-height:24px; text-align:center; font-weight:800 }

.cta-wrap{ margin-top:14px; display:grid; gap:10px; justify-items:center; text-align:center }
.account-cta{ color:var(--muted); font-weight:800 }
.account-cta a{ color:var(--accent); text-decoration:underline }
.account-cta a:hover{ color:var(--accent-2) }

.alt-cta{ display:grid; gap:8px; justify-items:center }
.alt-cta .alt-btn{
  display:inline-block; padding:.85rem 1rem; background:#0f2133; color:#fff; font-weight:900;
  border:1px solid var(--line); border-radius:12px; text-decoration:none;
  transition:background .2s, border-color .2s, transform .06s, box-shadow .2s;
  width:100%; max-width:320px; box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.alt-cta .alt-btn:hover{ background:#142d4c; border-color:var(--accent); transform:translateY(-1px) }

.hidden { display: none; }

/* 📱 Responsive uyum */
@media (max-width:768px){
  main{ padding:20px 16px }
  h1.page-title{ font-size:1.6rem }
  input, select{ font-size:.95rem; padding:.7rem .85rem }
  button[type="submit"]{ font-size:1rem; padding:.85rem }
}
@media (max-width:480px){
  body{ padding:0 8px }
  main{ margin: calc(var(--header-h) + 10px) auto 20px; padding:16px 12px }
  h1.page-title{ font-size:1.4rem }
  input, select{ font-size:.9rem; padding:.65rem .8rem }
  .preview img{ width:60px; height:60px }
  .alt-cta .alt-btn{ font-size:.95rem; padding:.7rem }
}

/* ---------- 📱 Mobil tipografi: başlıklar 15px, diğer tüm metin 12px ---------- */
/* Bu blok EN SONDA: üstteki mobil ölçülerden daha baskın olsun diye !important kullanıyoruz. */
@media (max-width: 768px){
  /* Varsayılan (tüm metin) 12px */
  main,
  main *{
    font-size:12px !important;
    line-height:1.4;
  }

  /* Başlıkları 15px */
  main h1,
  main h2,
  main h3,
  main h4,
  main h5,
  main h6,
  main .page-title{
    font-size:15px !important;
    line-height:1.25;
  }

  /* Placeholder / option */
  main input::placeholder{ font-size:12px !important; }
  main select,
  main option{ font-size:12px !important; }
}