/* MapClass web sayfalari (MCLS-129). Tek dosya, bagimliliksiz. */

:root {
  --metin: #1c1c21;
  --soluk: #5c5c68;
  --cizgi: #e2e2e8;
  --zemin: #ffffff;
  --kart: #f7f7fa;
  --vurgu: #2f6df6;
  --tehlike: #c0392b;
  --iyi: #1e7b46;
}

@media (prefers-color-scheme: dark) {
  :root {
    --metin: #ececf1;
    --soluk: #a3a3b0;
    --cizgi: #34343d;
    --zemin: #16161a;
    --kart: #1f1f25;
    --vurgu: #6f9bff;
    --tehlike: #ff7a6b;
    --iyi: #5fd18f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 3rem 1rem 4rem;
}

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; }

ul { padding-left: 1.2rem; }
li { margin: .35rem 0; }

.not {
  color: var(--soluk);
  font-size: .9rem;
  border-left: 3px solid var(--cizgi);
  padding-left: .8rem;
}

form { margin: 1.5rem 0 0; }

label { display: block; font-weight: 600; margin-bottom: .35rem; }

input {
  width: 100%;
  padding: .7rem .8rem;
  font: inherit;
  color: var(--metin);
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: .5rem;
}

input:focus-visible,
button:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

button {
  margin-top: 1rem;
  width: 100%;
  padding: .8rem 1rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--vurgu);
  border: 0;
  border-radius: .5rem;
  cursor: pointer;
}
/* Dugme gibi gorunen baglanti. Magaza adresi bir <a> cunku sayfadan
   ayriliyor; button olsaydi JavaScript ile yonlendirmek gerekirdi ve
   orta tikla yeni sekmede acma gibi tarayici davranislari kaybolurdu. */
.dugme {
  display: block;
  margin-top: 1rem;
  padding: .8rem 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--vurgu);
  border-radius: .5rem;
  text-align: center;
  text-decoration: none;
}


button.tehlike { background: var(--tehlike); }

button[disabled] { opacity: .6; cursor: default; }

.durum {
  margin-top: 1.2rem;
  padding: .8rem 1rem;
  border-radius: .5rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
}

.durum.hata { color: var(--tehlike); }
.durum.iyi { color: var(--iyi); }

a { color: var(--vurgu); }

/* ---------------------------------------------------------------
   Tanitim ve gizlilik sayfalari.

   Renkler uygulamanin kendi paletinden alindi (Colors.xaml):
     Brand      #A39741   acilis ve marka seridi
     BrandLight #FFF58F   marka serdi uzerindeki kelime isareti
     Accent     #E16D50   vurgu

   Hesap silme sayfalarinin renkleri DEGISTIRILMEDI: o sayfalar
   tarayicida uctan uca kosulmustu, dokunmak yeniden dogrulama
   gerektirirdi. Marka birligi ayri bir is.
   --------------------------------------------------------------- */

:root {
  --marka: #a39741;
  --marka-acik: #fff58f;
  --marka-vurgu: #e16d50;
}

.hero {
  background: var(--marka);
  color: #fff;
  padding: 3.5rem 1rem 3rem;
}

.hero-ic { max-width: 34rem; margin: 0 auto; }

.kelime-isareti {
  margin: 0 0 1.75rem;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--marka-acik);
}

.hero h1 {
  margin: 0 0 .75rem;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  line-height: 1.25;
}

.hero-alt { margin: 0; font-size: 1.05rem; opacity: .92; }

.rozet {
  display: inline-block;
  margin: 1.75rem 0 0;
  padding: .3rem .7rem;
  font-size: .85rem;
  font-weight: 600;
  color: #4a4415;
  background: var(--marka-acik);
  border-radius: .4rem;
}

section { margin-top: 2.5rem; }

/* Ilk bolum, main'in ust dolgusunun ustune bir de margin eklemesin.
   Basligin margin'i de sectiondan disari tasip ayni boslugu buyutuyordu. */
main > section:first-of-type { margin-top: 0; }
main > section:first-of-type > h2 { margin-top: 0; }

ul.ozellik { list-style: none; padding: 0; }

ul.ozellik li {
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--cizgi);
}

ul.ozellik strong { color: var(--metin); }

.dogru-olsun ul.ozellik li { border-left-color: var(--marka-vurgu); }

h3 { font-size: .95rem; margin: 1.5rem 0 .4rem; }

code {
  padding: .1rem .3rem;
  font-size: .9em;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: .25rem;
}

.ust-baglanti { margin: 0 0 2rem; font-size: .9rem; }

footer {
  max-width: 34rem;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
  border-top: 1px solid var(--cizgi);
}

footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.soluk-kucuk { margin: 1.25rem 0 0; color: var(--soluk); font-size: .85rem; }