/* PAKYÜREK — Dilek ve Şikayet Sistemi
   Mobil öncelikli. Harici yazı tipi, çerçeve ve CDN YOK: sahada 3G ile de
   açılsın, CSP dar kalsın. Toplam ağırlık 60 KB altında. */

:root {
  --zemin:        #f4f5f7;
  --kart:         #ffffff;
  --metin:        #1b1f24;
  --soluk:        #5b6470;
  --cizgi:        #d8dde4;
  --vurgu:        #0b5cad;
  --vurgu-koyu:   #084a8c;
  --uyari:        #b3261e;
  --uyari-zemin:  #fdecea;
  --tamam:        #146c2e;
  --sikayet:      #a8480c;
  --golge:        0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
  --yuvarlak:     12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --zemin:       #14171c;
    --kart:        #1d2228;
    --metin:       #e8eaed;
    --soluk:       #9aa4b0;
    --cizgi:       #333b45;
    --vurgu:       #5aa9f5;
    --vurgu-koyu:  #7dbcf8;
    --uyari:       #f2857c;
    --uyari-zemin: #3a1e1c;
    --tamam:       #6ed08b;
    --sikayet:     #f0a06a;
    --golge:       0 1px 2px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  /* Sistem yazı tipi yığını — indirilecek dosya yok. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  /* 16px ALTINA İNMEYİN: küçükse iOS Safari odaklanınca sayfayı zorla
     yakınlaştırır ve kullanıcı formu kaybeder. */
  font-size: 16px;
  line-height: 1.55;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------- üst */

.ust {
  background: var(--kart);
  border-bottom: 1px solid var(--cizgi);
  padding: .85rem 1.25rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}

.marka {
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--metin);
  text-decoration: none;
  font-size: 1.05rem;
}

.ust-alt { color: var(--soluk); font-size: .85rem; }

/* --------------------------------------------------------------- kap */

.kap {
  width: 100%;
  max-width: 30rem;      /* tek sütun; ayrı masaüstü düzeni gerekmiyor */
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
  flex: 1;
}

h1 { font-size: 1.5rem; line-height: 1.3; margin: .25rem 0 .5rem; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; }

.giris  { color: var(--soluk); margin: 0 0 1.5rem; }
.kucuk  { font-size: .8rem; color: var(--soluk); }
.ipucu  { font-size: .82rem; color: var(--soluk); margin: .4rem 0 0; }
.ops    { font-weight: 400; color: var(--soluk); font-size: .85em; }
.zor    { color: var(--uyari); }

.geri {
  display: inline-block;
  color: var(--soluk);
  text-decoration: none;
  font-size: .9rem;
  padding: .5rem .25rem .5rem 0;   /* dokunma hedefi */
  margin-bottom: .25rem;
}
.geri:hover { color: var(--metin); }

.simge-baslik { font-size: 1.1em; }

/* ------------------------------------------------------------- seçim */

.secim { display: flex; flex-direction: column; gap: .85rem; }

.kart {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--vurgu);
  border-radius: var(--yuvarlak);
  padding: 1.1rem 1rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--golge);
  min-height: 72px;              /* dokunma hedefi 48px üstünde */
  transition: transform .12s ease, border-color .12s ease;
}

.kart:active { transform: scale(.985); }
.kart:hover  { border-color: var(--vurgu); }

.kart-sikayet { border-left-color: var(--sikayet); }
.kart-sikayet:hover { border-color: var(--sikayet); }

.simge { font-size: 1.65rem; line-height: 1; flex: none; }

.kart-metin { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kart-metin strong { font-size: 1.05rem; }
.kart-metin small  { color: var(--soluk); font-size: .85rem; }

.ok { color: var(--soluk); font-size: 1.5rem; line-height: 1; flex: none; }

/* -------------------------------------------------------------- form */

.alan { margin-bottom: 1.35rem; }

label {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: .4rem;
}

input[type="text"],
textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;               /* iOS yakınlaştırma freni */
  color: var(--metin);
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  padding: .8rem .85rem;
  min-height: 48px;
}

textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }

input[type="text"]:focus,
textarea:focus {
  outline: 2px solid var(--vurgu);
  outline-offset: 1px;
  border-color: var(--vurgu);
}

/* Bal küpü — ekran okuyucudan da gizli, sekmeyle odaklanılamaz.
   display:none kullanılmıyor: bazı botlar onu fark edip atlıyor. */
.bal-kupu {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.gonder {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--vurgu);
  border: 0;
  border-radius: 10px;
  padding: .95rem 1rem;
  min-height: 52px;
  cursor: pointer;
  margin-top: .5rem;
}

.gonder:hover { background: var(--vurgu-koyu); }
.gonder:active { transform: scale(.99); }
.gonder:disabled { opacity: .6; cursor: default; }

.gonder-sikayet { background: var(--sikayet); }
.gonder-sikayet:hover { background: #8c3c0a; }

.kvkk { margin-top: 1.1rem; text-align: center; }
.kvkk a { color: var(--vurgu); }

/* Sayaç: sınıra yaklaşınca renk değiştirir. */
#sayac { font-variant-numeric: tabular-nums; }
#sayac.yakin { color: var(--sikayet); font-weight: 600; }
#sayac.yetersiz { color: var(--soluk); }

/* ------------------------------------------------------------- uyarı */

.uyari {
  background: var(--uyari-zemin);
  border-left: 4px solid var(--uyari);
  border-radius: 8px;
  padding: .85rem 1rem;
  margin: 0 0 1.25rem;
  font-size: .92rem;
}

/* ------------------------------------------------------ teşekkür/hata */

.tamam { text-align: center; padding-top: 1.5rem; }

.tamam-simge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--tamam);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: .75rem;
}

.hata-simge { background: var(--uyari); }

.referans {
  background: var(--kart);
  border: 1px dashed var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 1rem;
  margin: 1.25rem 0;
}

.referans small { display: block; color: var(--soluk); font-size: .8rem; }
.referans strong {
  font-size: 1.5rem;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.tamam .gonder { margin-top: 1.5rem; }

/* --------------------------------------------- süreç diyagramı (4 adım)

   Mobilde dikey, geniş ekranda yatay. Tamamlanan adım dolu, mevcut adım
   çerçeveli, gelecek adım soluk — panel ve e-posta ile aynı dil.        */

.sonuc { margin-top: 2rem; }

.surec { list-style: none; margin: 1rem 0 0; padding: 0; }

.surec li {
  display: flex;
  gap: .9rem;
  padding-bottom: 1.4rem;
  position: relative;
}

.surec li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: var(--cizgi);
}

.surec li.gecti:not(:last-child)::before { background: var(--tamam); }

.nokta {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--cizgi);
  background: var(--zemin);
  margin-top: 4px;
  z-index: 1;
}

.surec li.gecti  .nokta { background: var(--tamam); border-color: var(--tamam); }
.surec li.simdi  .nokta { border-color: var(--vurgu); border-width: 4px; }
.surec li.bekliyor { opacity: .5; }

.surec-metin { display: flex; flex-direction: column; }
.surec-metin strong { font-size: .95rem; }
.surec-metin small  { color: var(--soluk); font-size: .82rem; }

/* --------------------------------------------------------- KVKK metni */

.metin { font-size: .95rem; }
.metin ul { padding-left: 1.2rem; }
.metin li { margin-bottom: .4rem; }

/* ---------------------------------------------------------------- alt */

.alt {
  border-top: 1px solid var(--cizgi);
  padding: 1.25rem;
  text-align: center;
  background: var(--kart);
}

.alt nav {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}

.alt a {
  color: var(--soluk);
  text-decoration: none;
  font-size: .85rem;
  padding: .35rem 0;
}

.alt a:hover { color: var(--vurgu); text-decoration: underline; }
.alt p { margin: 0; }

/* Hareket duyarlılığı olan kullanıcıya animasyon yok. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .kart:active, .gonder:active { transform: none; }
}