@import url('font.css');

/* AppFactory Kimlik — eşik ekranı.
   Kart yok: tam ekran ikiye bölünür. Solda mürekkep alan (nereye gidiyorsun),
   sağda beyaz çalışma yüzeyi (şimdi ne yapıyorsun). */

:root{
  --murekkep:#10262E;      /* derin petrol */
  --murekkep-ust:#1B3945;  /* alan içi ayrım çizgisi */
  --kagit:#FFFFFF;
  --zemin:#E8EAE6;
  --pirinc:#9B7B2F;        /* birincil eylem, odak halkası */
  --pirinc-parlak:#B8963F;
  --sessiz:#5E6B70;
  --cizgi:#D3D8D6;
  --hata:#8C2F2A;
  --hata-zemin:#FAF0EF;

  --olcu-1:0.8125rem;
  --olcu-2:0.9375rem;
  --olcu-3:1.0625rem;
  --olcu-4:1.5rem;
  --olcu-5:2.25rem;
}

*,*::before,*::after{box-sizing:border-box}

/* Sınıf seçicilerinin display kuralı [hidden] özniteliğini ezer (UA stili daha
   düşük özgüllükte). Gizleme her yerde çalışsın diye tek kural. */
[hidden]{display:none !important}


html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  background:var(--zemin);
  color:var(--murekkep);
  font-family:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:var(--olcu-2);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------------- eşik */
.esik{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);
}

/* --------------------------------------------------------- mürekkep alan */
.alan{
  background:var(--murekkep);
  color:#DCE4E6;
  padding:3.5rem 3rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(2rem,7vh,4rem);
}
.alan-marka{
  font-size:var(--olcu-1);
  letter-spacing:0.01em;
  color:#8FA3A9;
  margin:0;
}
.alan-baslik{
  font-family:'IBM Plex Serif',Georgia,serif;
  font-weight:500;
  font-size:var(--olcu-5);
  line-height:1.15;
  letter-spacing:-0.015em;
  color:#FFFFFF;
  margin:1.25rem 0 0;
  max-width:14ch;
}
.alan-aciklama{
  margin:1.125rem 0 0;
  max-width:38ch;
  color:#A9BDC2;
  font-size:var(--olcu-2);
}

/* açılan kapılar: gerçek uygulama kataloğu, süs değil */
.kapilar{list-style:none;margin:0;padding:0}
.kapilar-basligi{
  margin:0 0 0.875rem;
  font-size:var(--olcu-1);
  color:#8FA3A9;
}
.kapi{
  display:flex;
  align-items:baseline;
  gap:0.75rem;
  padding:0.5rem 0;
  border-top:1px solid var(--murekkep-ust);
  font-size:var(--olcu-2);
  color:#C6D4D8;
}
.kapi:last-child{border-bottom:1px solid var(--murekkep-ust)}
.kapi-simge{
  width:5px;height:5px;border-radius:50%;
  background:var(--murekkep-ust);
  flex:none;transform:translateY(-2px);
}
.kapi[data-uye="evet"]{color:#FFFFFF}
.kapi[data-uye="evet"] .kapi-simge{background:var(--pirinc-parlak)}
.kapi-rol{margin-left:auto;font-size:var(--olcu-1);color:#8FA3A9}

/* ------------------------------------------------------------ çalışma yüzeyi */
.yuzey{
  background:var(--kagit);
  padding:3.5rem 3rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.form-kutu{width:100%;max-width:24rem}
.form-baslik{
  font-size:var(--olcu-4);
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 0.5rem;
}
.form-giris{color:var(--sessiz);margin:0 0 2rem;max-width:34ch}

label{display:block;font-size:var(--olcu-1);font-weight:600;margin:0 0 0.375rem}
.alan-grup{margin:0 0 1.125rem}
.alan-grup:last-of-type{margin-bottom:1.5rem}

input[type=email],input[type=password],input[type=text]{
  width:100%;
  padding:0.6875rem 0.8125rem;
  font:inherit;
  color:var(--murekkep);
  background:var(--kagit);
  border:1px solid var(--cizgi);
  border-radius:6px;
}
input:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--pirinc);
  outline-offset:2px;
}
input[aria-invalid="true"]{border-color:var(--hata)}
.ipucu{display:block;margin-top:0.375rem;font-size:var(--olcu-1);color:var(--sessiz)}

.onay-satir{display:flex;gap:0.625rem;align-items:flex-start;margin:0 0 1rem}
.onay-satir input{margin:0.25rem 0 0;flex:none;width:1rem;height:1rem;accent-color:var(--pirinc)}
.onay-satir label{font-weight:400;font-size:var(--olcu-1);line-height:1.5;margin:0}

button.eylem{
  width:100%;
  padding:0.75rem 1rem;
  font:inherit;
  font-weight:600;
  color:#FFFFFF;
  background:var(--pirinc);
  border:1px solid var(--pirinc);
  border-radius:6px;
  cursor:pointer;
}
button.eylem:hover:not(:disabled){background:var(--pirinc-parlak);border-color:var(--pirinc-parlak)}
button.eylem:disabled{opacity:0.55;cursor:progress}
button.ikincil{
  background:transparent;color:var(--murekkep);border-color:var(--cizgi);
}
button.ikincil:hover:not(:disabled){background:var(--zemin);border-color:var(--sessiz)}

.form-alt{margin:1.5rem 0 0;font-size:var(--olcu-2);color:var(--sessiz)}
.form-alt + .form-alt{margin-top:0.5rem}
a{color:var(--murekkep);text-decoration-color:var(--pirinc);text-underline-offset:3px}
a:hover{color:var(--pirinc)}

/* ------------------------------------------------------------------ durum */
.durum{
  margin:0 0 1.25rem;
  padding:0.75rem 0.875rem;
  border-radius:6px;
  font-size:var(--olcu-2);
  border:1px solid var(--cizgi);
  background:var(--zemin);
}
.durum[data-tip="hata"]{border-color:var(--hata);background:var(--hata-zemin);color:var(--hata)}
.durum[hidden]{display:none}

.bilgi-kutu{
  border-left:3px solid var(--pirinc);
  padding:0 0 0 1rem;
  margin:0 0 1.75rem;
}
.bilgi-kutu p{margin:0 0 0.5rem}
.bilgi-kutu p:last-child{margin:0}

/* --------------------------------------------------------------- mobil */
@media (max-width:900px){
  .esik{grid-template-columns:1fr;min-height:100dvh}
  .alan{padding:2rem 1.5rem 1.75rem;gap:1.5rem}
  .alan-baslik{font-size:1.625rem;max-width:none}
  .alan-aciklama{font-size:var(--olcu-2)}
  #kapilar{display:none}
  .yuzey{padding:2rem 1.5rem 3rem;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
}