/* Rafta — e-posta bağlantılarının açıldığı sayfalar.
   Çerçeve yok, CDN yok: bu sayfalar mail istemcisinden tıklanınca açılıyor, çoğu zaman mobil
   veride ve tek seferlik. Tek bir CSS dosyası, harici istek sıfır. */

:root {
  color-scheme: light dark;
  --zemin: #f6f6f4;
  --kart: #ffffff;
  --metin: #1a1a18;
  --soluk: #6b6b66;
  --cizgi: #e4e4e0;
  --vurgu: #1a1a18;
  --basari: #1f7a4d;
  --hata: #b3261e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #131312;
    --kart: #1d1d1b;
    --metin: #f2f2ef;
    --soluk: #9a9a93;
    --cizgi: #2e2e2b;
    --vurgu: #f2f2ef;
    --basari: #5dd39e;
    --hata: #ff8a80;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--zemin);
  color: var(--metin);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.kart {
  width: 100%;
  max-width: 420px;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
}

.marka {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soluk);
  margin-bottom: 28px;
}

h1 {
  font-size: 21px;
  line-height: 1.35;
  margin: 0 0 10px;
  font-weight: 650;
}

p {
  margin: 0 0 8px;
  color: var(--soluk);
  font-size: 15px;
}

/* Durum simgesi — metinden önce okunan ilk şey. */
.simge {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
}
.simge.basari { background: color-mix(in srgb, var(--basari) 16%, transparent); color: var(--basari); }
.simge.hata   { background: color-mix(in srgb, var(--hata) 16%, transparent);   color: var(--hata); }

/* Bekleme göstergesi: sayfa açılır açılmaz istek atıldığı için kullanıcı boş ekran görmemeli. */
.donen {
  width: 34px;
  height: 34px;
  margin: 6px auto 18px;
  border: 3px solid var(--cizgi);
  border-top-color: var(--vurgu);
  border-radius: 50%;
  animation: don 0.8s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .donen { animation-duration: 2.4s; }
}

.dugme {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 13px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--vurgu);
  color: var(--kart);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.dugme:disabled { opacity: 0.5; cursor: default; }

.dugme.ikincil {
  background: transparent;
  color: var(--soluk);
  border: 1px solid var(--cizgi);
}

label {
  display: block;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  margin: 18px 0 6px;
}

input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  background: var(--zemin);
  color: var(--metin);
  font-size: 16px; /* 16px altı iOS'ta odaklanınca sayfayı yakınlaştırıyor */
  font-family: inherit;
}
input[type="password"]:focus {
  outline: 2px solid var(--vurgu);
  outline-offset: 1px;
}

.kurallar {
  text-align: left;
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--hata);
}

.gizli { display: none; }

.dipnot {
  margin-top: 22px;
  font-size: 13px;
  color: var(--soluk);
}