/* ============================================================
   Kayıt sayfasının stili.

   Belirteçler tanıtım sayfasıyla (index.html) birebir aynı: aynı
   petrol, aynı kâğıt, aynı yazı tipleri. index.html kendi stilini
   içinde taşıyor — oradaki her düzenleme bu dosyaya dokunmadığı
   için kayıt akışı, tanıtım sayfası değiştiğinde kırılmıyor.
   Karşılığında bir bedel var: iki dosyadaki palet elle eşleniyor.
   Renk değiştirilecekse iki yerde birden değişmeli.

   Uygulamanın wwwroot/stil.css dosyasından da ayrıdır: ana site
   uygulamanın sürümünden bağımsız yayına çıkabilmelidir.
   ============================================================ */

:root {
  --kagit:      #FAF9F6;
  --yuzey:      #FFFFFF;
  --yuzey-2:    #F2F1EC;
  --murekkep:   #0E1A18;
  --soluk:      #5E716D;
  --cizgi:      #E4E1DA;
  --ince:       #EFEDE7;

  --petrol:     #0D6169;
  --petrol-2:   #14868F;

  /* Birincil düğmenin yazı rengi belirteç: petrol açık temada koyu
     zeminde beyaz, karanlık temada açık zeminde koyu istiyor. */
  --dugme-yazi: #FFFFFF;
  --mine:       #CFEFE8;

  --damga:      #8A5A12;
  --damga-z:    #F6EFDF;

  --kotu:       #A13A26;
  --kotu-z:     #F7E7E2;
  --iyi:        #1F6B4C;
  --iyi-z:      #E2F0E9;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --govde:   Sora, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --tek:     "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --olcu: 1000px;
  --yumusak: cubic-bezier(.22,.61,.36,1);

  color-scheme: light;
}

/* Seçim yapılmadıysa işletim sisteminin tercihi geçerli; açık tema
   açıkça seçilmişse sistem karanlık olsa bile seçim kazanıyor. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --kagit:     #0B1312;
    --yuzey:     #111D1B;
    --yuzey-2:   #172523;
    --murekkep:  #E9EFEC;
    --soluk:     #93A8A3;
    --cizgi:     #223230;
    --ince:      #1A2826;

    --petrol:    #4FBFC4;
    --petrol-2:  #7FD8DA;
    --dugme-yazi:#07201F;
    --mine:      #133A38;

    --damga:     #D2A857;
    --damga-z:   #2A2314;

    --kotu:      #E28C75;
    --kotu-z:    #2E1B16;
    --iyi:       #74C79E;
    --iyi-z:     #12281F;

    color-scheme: dark;
  }
}

:root[data-tema="karanlik"] {
  --kagit:     #0B1312;
  --yuzey:     #111D1B;
  --yuzey-2:   #172523;
  --murekkep:  #E9EFEC;
  --soluk:     #93A8A3;
  --cizgi:     #223230;
  --ince:      #1A2826;

  --petrol:    #4FBFC4;
  --petrol-2:  #7FD8DA;
  --dugme-yazi:#07201F;
  --mine:      #133A38;

  --damga:     #D2A857;
  --damga-z:   #2A2314;

  --kotu:      #E28C75;
  --kotu-z:    #2E1B16;
  --iyi:       #74C79E;
  --iyi-z:     #12281F;

  color-scheme: dark;
}

/* ============================================================
   Temel
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font-family: var(--govde);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 3px;
  border-radius: 4px;
}

.olcu {
  max-width: var(--olcu);
  width: 100%;
  margin: 0 auto;
  padding-inline: 24px;
}

.etiket {
  font-family: var(--tek);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soluk);
}

@keyframes bel {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.bel { animation: bel .55s var(--yumusak) backwards; }
.g1 { animation-delay: .04s } .g2 { animation-delay: .12s }

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

/* ============================================================
   Üst çubuk — tanıtım sayfasıyla aynı yükseklik ve aynı düzen
   ============================================================ */

.ust {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--kagit) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s;
}

.ust.kaydi { border-bottom-color: var(--cizgi); }

.ust-ic {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 66px;
}

.marka {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.02em;
  color: inherit;
}

.marka-im {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--petrol);
  color: var(--dugme-yazi);
  display: grid;
  place-items: center;
  font-size: 16px;
  flex: none;
}

.bosluk { flex: 1 }

/* ============================================================
   Düğmeler
   ============================================================ */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid var(--petrol);
  background: var(--petrol);
  color: var(--dugme-yazi);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s var(--yumusak), box-shadow .16s, background .16s;
}

.dugme:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px var(--petrol); }
.dugme:active { transform: none; }

.dugme:disabled {
  opacity: .55;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.dugme.sade {
  background: transparent;
  border-color: var(--cizgi);
  color: var(--murekkep);
}

.dugme.sade:hover { border-color: var(--petrol); box-shadow: none; }

.dugme.tam { width: 100%; padding-block: 13px; font-size: 15px; }

.ikon-dugme {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--cizgi);
  background: transparent;
  color: var(--murekkep);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 15px;
  flex: none;
}

.ikon-dugme:hover { background: var(--yuzey-2); }

/* ============================================================
   Gövde düzeni

   Solda form, sağda hesabın açılmasıyla ne olduğu. Sağ sütun
   pazarlama değil: kullanıcı "kaydol" düğmesine basmadan önce
   ne kurulacağını bilsin diye var.
   ============================================================ */

main {
  flex: 1;
  padding-block: clamp(28px, 5vw, 56px) clamp(40px, 6vw, 72px);
}

.duzen {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .82fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* Dar ekranda tek sütun ve form önce: buraya gelen kullanıcı kararını
   vermiş durumda, açıklama formu aşağı itmemeli. */
@media (max-width: 860px) {
  .duzen { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- kayıt kartı ---------- */

.kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 18px;
  padding: clamp(22px, 3vw, 32px);
}

.kart h1 {
  font-size: clamp(27px, 3.6vw, 34px);
  font-weight: 800;
  margin-bottom: 8px;
}

.kart .alt {
  color: var(--soluk);
  font-size: 15px;
  margin-bottom: 26px;
  max-width: 46ch;
}

form { display: grid; gap: 16px; }

.alan { display: grid; gap: 6px; }

.alan label {
  font-size: 13px;
  font-weight: 500;
  color: var(--soluk);
}

.alan input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--cizgi);
  border-radius: 11px;
  background: var(--kagit);
  color: var(--murekkep);
  font: inherit;
  font-size: 15px;
  transition: border-color .16s, background .16s;
}

.alan input::placeholder { color: color-mix(in srgb, var(--soluk) 65%, transparent); }

.alan input:hover { border-color: color-mix(in srgb, var(--petrol) 40%, var(--cizgi)); }

.alan input:focus {
  outline: none;
  border-color: var(--petrol);
  background: var(--yuzey);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--petrol) 18%, transparent);
}

.alan .ipucu { font-size: 12.5px; color: var(--soluk); }

.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 520px) { .ikili { grid-template-columns: 1fr; } }

/* Parola ölçütleri: yazarken tek tek yeşile dönüyor. Kullanıcı
   kuralı formu gönderdikten sonra değil, yazarken öğreniyor. */

.olcutler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12.5px;
  color: var(--soluk);
}

.olcut { display: inline-flex; align-items: center; gap: 6px; }

.olcut::before {
  content: "○";
  font-family: var(--tek);
  font-size: 11px;
  line-height: 1;
}

.olcut.tamam { color: var(--iyi); }
.olcut.tamam::before { content: "●"; }

/* ---------- geri bildirim ---------- */

.uyari, .basari {
  padding: 12px 15px;
  border-radius: 11px;
  font-size: 14px;
  margin-bottom: 18px;
  border: 1px solid;
}

.uyari { background: var(--kotu-z); color: var(--kotu); border-color: color-mix(in srgb, var(--kotu) 45%, transparent); }
.basari { background: var(--iyi-z);  color: var(--iyi);  border-color: color-mix(in srgb, var(--iyi) 45%, transparent); }

.kart-alt {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--ince);
  font-size: 14px;
  color: var(--soluk);
  text-align: center;
}

.kart-alt a { color: var(--petrol); font-weight: 500; }

/* ---------- yan sütun ---------- */

.yan { display: grid; gap: 26px; }

.yan h2 {
  font-size: 19px;
  margin-bottom: 14px;
}

/* Sıra numarası burada süs değil: hesap açılışı gerçekten bu
   sırayla oluyor ve her adım bir öncekine bağlı. */
.adimlar { display: grid; gap: 0; counter-reset: adim; }

.adim {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  padding-block: 14px;
  border-bottom: 1px solid var(--ince);
}

.adim:last-child { border-bottom: 0; }

.adim::before {
  counter-increment: adim;
  content: counter(adim);
  font-family: var(--tek);
  font-size: 12px;
  font-weight: 600;
  color: var(--petrol);
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--mine);
  display: grid;
  place-items: center;
}

.adim b { display: block; font-weight: 600; font-size: 14.5px; }
.adim span { font-size: 13.5px; color: var(--soluk); }

.kutu {
  background: var(--yuzey-2);
  border: 1px solid var(--ince);
  border-radius: 14px;
  padding: 18px 20px;
}

.kutu p { font-size: 13.5px; color: var(--soluk); }

.rozet {
  display: inline-block;
  font-family: var(--tek);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--damga);
  background: var(--damga-z);
  border: 1px solid color-mix(in srgb, var(--damga) 30%, transparent);
  border-radius: 6px;
  padding: 3px 8px;
  margin-bottom: 10px;
}

/* ============================================================
   Alt bilgi
   ============================================================ */

.alt-bilgi {
  border-top: 1px solid var(--ince);
  padding-block: 22px;
}

.alt-ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  font-size: 13.5px;
  color: var(--soluk);
}

.alt-ic a { text-decoration: none; }
.alt-ic a:hover { color: var(--murekkep); }
.alt-ic .sag { margin-left: auto; }

@media (max-width: 620px) { .alt-ic .sag { margin-left: 0; } }