/* Giriş, kayıt, parola, e-posta doğrulama ve ödeme ekranlarının ortak biçimi.
   Renkler masaüstü sürümündeki ekranlarla (Panel/setup/app/giris.html) aynı
   belirteçlerden geliyor; iki sürüm arasında görsel kopukluk olmasın diye.

   Kontrast notu: metin renkleri (--muted, --ok-fg, --crit-fg) WCAG AA (4.5:1)
   için zemin renklerine göre seçildi; dolgu renkleri (--ok, --crit) yalnızca
   kenarlık ve ikon gibi büyük/metinsiz yüzeylerde kullanılır. */
:root {
  --bg: #f8f8fc; --surface: #ffffff; --surface-2: #f8f8fc;
  --line: #dcdbee; --fg: #18192b; --fg-2: #44465e; --muted: #656780;
  --accent: #5444ec; --accent-hover: #4436d6; --accent-soft: #e9e7fd; --accent-bg: #5444ec; --accent-bg-hover: #4436d6;
  --ok: #10a46e; --ok-soft: #e0f6ed; --ok-fg: #0a6b49;
  --crit: #e2463a; --crit-soft: #feebe9; --crit-fg: #a8281d;
  --uyari-soft: #fff4d6; --uyari-fg: #6b4c00;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0e18; --surface: #181b2a; --surface-2: #1f2234; --line: #2e3048;
    --fg: #ededf8; --fg-2: #b8bad0; --muted: #9a9db7;
    --accent: #9388fb; --accent-hover: #a79eff; --accent-soft: #2a284e; --accent-bg: #6355f0; --accent-bg-hover: #5648e6;
    --ok: #34d399; --ok-soft: #123a2c; --ok-fg: #5fe0b0;
    --crit: #f87171; --crit-soft: #3d1f1d; --crit-fg: #ff9a94;
    --uyari-soft: #3b3010; --uyari-fg: #f3d27a;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--fg);
}
.kart {
  width: 100%; max-width: 460px; background: var(--surface); margin: auto;
  border: 1px solid var(--line); border-radius: 18px; padding: 30px 32px 28px;
  box-shadow: 0 18px 48px rgba(20, 18, 60, .10);
}
a { color: var(--accent); }
a:hover { text-decoration: none; }

/* Odak: klavye kullanıcısı nerede olduğunu her zaman görebilmeli. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}

/* Marka başlığı (ana sayfaya bağlantı) */
.marka { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.marka a.marka-baglanti { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.logo {
  width: 42px; height: 42px; border-radius: 12px; background: var(--accent-bg);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px;
  flex: none;
}
.marka h1 { font-size: 17px; margin: 0; letter-spacing: -.2px; line-height: 1.25; }
.marka p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.35; }

label { display: block; font-size: 12.5px; font-weight: 600; color: var(--fg-2); margin: 13px 0 5px; }
input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--fg); border-radius: 9px; padding: 10px 12px; font-size: 14px;
  font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--muted); opacity: .75; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input:read-only:not([type="checkbox"]) { opacity: .8; }
.ipucu { font-size: 12px; color: var(--muted); margin: 6px 0 0; line-height: 1.45; }
.ipucu a { color: var(--accent); }
.zorunlu-notu { font-size: 12px; color: var(--muted); margin: 14px 0 0; }

/* Parola alanı + göster/gizle düğmesi */
.parola-kap { position: relative; }
.parola-kap input { padding-right: 70px; }
.parola-goster {
  position: absolute; top: 0; right: 0; height: 100%; min-width: 64px;
  background: transparent; border: 0; border-radius: 0 9px 9px 0; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent); padding: 0 12px;
}
.parola-goster:hover { background: var(--accent-soft); }

/* Onay kutusu satırı (indirme sözleşmeleri, isteğe bağlı ileti izni) */
.kutu { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px 12px; font-size: 13px; line-height: 1.5; border-top: 1px dashed var(--line); }
.kutu input { width: auto; margin-top: 3px; flex: none; }
.kutu.kilitli { opacity: .55; }
.bilgi {
  margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--fg-2);
  background: var(--accent-soft); border-radius: 9px; padding: 11px 13px;
}

button.birincil {
  width: 100%; font-family: inherit; font-weight: 700; cursor: pointer;
  border: 0; border-radius: 10px; padding: 12px 16px; font-size: 14.5px;
  background: var(--accent-bg); color: #fff; margin-top: 20px;
  transition: background .15s; display: inline-flex; align-items: center;
  justify-content: center; gap: 9px;
}
button.birincil:hover:not(:disabled) { background: var(--accent-bg-hover); }
button.birincil:disabled { opacity: .65; cursor: progress; }
button.ikincil {
  font-family: inherit; font-weight: 600; cursor: pointer; font-size: 13px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--fg);
  border-radius: 8px; padding: 7px 12px;
}
button.ikincil:hover { border-color: var(--accent); color: var(--accent); }

/* Yükleniyor göstergesi: düğme metninin önüne dönen halka koyar. */
button.yukleniyor::before {
  content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: don .7s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  button.yukleniyor::before { animation-duration: 2.4s; }
}

.durum {
  display: none; margin-top: 16px; padding: 11px 13px; border-radius: 9px;
  font-size: 13px; line-height: 1.5; overflow-wrap: anywhere;
}
.durum.hata { background: var(--crit-soft); color: var(--crit-fg); display: block; }
.durum.iyi  { background: var(--ok-soft);  color: var(--ok-fg);  display: block; }
.durum.bilgi-durum { background: var(--accent-soft); color: var(--fg-2); display: block; }
.durum a { color: inherit; font-weight: 600; text-decoration: underline; }
.durum .eylem { display: block; margin-top: 6px; }

.altlik {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted); text-align: center;
}
.altlik a { color: var(--accent); font-weight: 650; text-decoration: none; margin-left: 6px; }
.altlik a:hover { text-decoration: underline; }

/* Sayfa altı yasal bağlantılar */
.yasal {
  margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 4px 16px; font-size: 12px;
}
.yasal a { color: var(--muted); text-decoration: none; }
.yasal a:hover { color: var(--accent); text-decoration: underline; }

.ortada { text-align: center; }
.parola-unuttum { text-align: center; margin: 14px 0 0; font-size: 13px; }
.parola-unuttum a { color: var(--accent); text-decoration: none; font-weight: 600; }
.parola-unuttum a:hover { text-decoration: underline; }

.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .ikili { grid-template-columns: 1fr; gap: 0; } }

.gizli { display: none !important; }

/* Telefon ve küçük ekranlar: kenar boşluklarını daralt, iOS'un odakta
   yaptığı otomatik yakınlaştırmayı önlemek için alan yazısını 16px yap. */
@media (max-width: 520px) {
  body { padding: 14px; align-items: flex-start; }
  .kart { padding: 22px 18px 22px; border-radius: 14px; box-shadow: 0 8px 24px rgba(20, 18, 60, .08); }
  input { font-size: 16px; }
}

/* ---------------------------------------------------------------------
   Ödeme ekranları (odeme.html, odeme-sonuc.html)
   --------------------------------------------------------------------- */
.kart.genis { max-width: 640px; }
.urun-ozet {
  display: flex; gap: 14px; justify-content: space-between; align-items: flex-start;
  background: var(--accent-soft); border-radius: 12px; padding: 14px 16px; margin: 0 0 6px;
}
.urun-ozet .ad { display: block; font-size: 15px; font-weight: 700; }
.urun-ozet .acik { display: block; margin-top: 3px; font-size: 13px; color: var(--fg-2); line-height: 1.45; }
.urun-ozet .tutar-kutu { text-align: right; flex: none; }
.urun-ozet .tutar { display: block; font-size: 21px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.urun-ozet .kdv { display: block; font-size: 11.5px; color: var(--fg-2); }
@media (max-width: 420px) { .urun-ozet { flex-direction: column; } .urun-ozet .tutar-kutu { text-align: left; } }

.test-uyari {
  background: var(--uyari-soft); color: var(--uyari-fg); border-radius: 9px;
  padding: 9px 12px; font-size: 12.5px; margin-bottom: 10px; line-height: 1.45;
}
.guven { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.55; }

fieldset.yontemler { border: 0; margin: 14px 0 0; padding: 0; min-width: 0; }
fieldset.yontemler legend { font-size: 12.5px; font-weight: 600; color: var(--fg-2); padding: 0; margin-bottom: 6px; }
.yontem-secenek {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 8px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 11px; cursor: pointer;
  background: var(--surface-2); font-weight: 400; font-size: 13.5px; color: var(--fg);
}
.yontem-secenek:hover { border-color: var(--accent); }
.yontem-secenek:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.yontem-secenek input { width: auto; margin: 3px 0 0; flex: none; }
.yontem-secenek b { display: block; font-size: 14px; }
.yontem-secenek small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--fg-2); line-height: 1.4; }

.hesap-bagi { margin: 12px 0 0; font-size: 12.5px; color: var(--fg-2); line-height: 1.5; }
.hesap-bagi a { font-weight: 600; }

iframe#paytriframe { width: 100%; border: 0; min-height: 560px; }

/* Havale talimat ekranı */
.havale-baslik { font-size: 16px; font-weight: 700; margin: 4px 0 4px; }
.havale-giris { font-size: 13px; color: var(--fg-2); line-height: 1.55; margin: 0 0 12px; }
dl.havale { margin: 0; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
dl.havale .satir {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 11px 14px; border-top: 1px solid var(--line); flex-wrap: wrap;
}
dl.havale .satir:first-child { border-top: 0; }
dl.havale dt { font-size: 12px; font-weight: 600; color: var(--muted); flex: 0 0 120px; }
dl.havale dd { margin: 0; flex: 1 1 180px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; user-select: all; }
dl.havale dd.iban { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .3px; }
dl.havale .satir.vurgulu { background: var(--accent-soft); }
dl.havale .satir.vurgulu dd { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 15px; color: var(--accent); }
.havale-uyari {
  margin: 12px 0 0; font-size: 13px; line-height: 1.55; padding: 11px 13px;
  border-radius: 9px; background: var(--uyari-soft); color: var(--uyari-fg);
}
.havale-bilgi { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--fg-2); }
@media (max-width: 520px) { dl.havale dt { flex-basis: 100%; } }

/* Ödeme sonucu */
.sonuc-ikon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  margin: 4px auto 14px; font-size: 26px; font-weight: 700;
}
.sonuc-ikon.iyi { background: var(--ok-soft); color: var(--ok-fg); }
.sonuc-ikon.hata { background: var(--crit-soft); color: var(--crit-fg); }
.sonuc-ikon.bekle { background: var(--accent-soft); color: var(--accent); }
.sonuc-ozet { text-align: center; margin: 0 0 8px; }
.sonuc-ozet h2 { font-size: 18px; margin: 0 0 4px; }
.sonuc-ozet p { margin: 0; font-size: 13px; color: var(--fg-2); line-height: 1.5; }
.siparis-no {
  margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--muted);
}
.siparis-no code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--fg); user-select: all; }

/* UX denetimi (2026-10-03): tablet/telefonda 16 px form yazisi (iOS yakinlastirmasin), dokunmatik hedefler */
@media (max-width: 820px) { input { font-size: 16px !important; } }
@media (pointer: coarse) {
  .altlik a, .yasal a, .parola-unuttum a, .ipucu a { display: inline-block; padding: 12px 8px; }
  button.birincil, button.ikincil, .parola-goster { min-height: 44px; }
}


/* Ust gezinti seridi (2026-10-04): her sayfadan ana sayfaya donus + temel baglantilar. Sabit konumlu: sayfa duzenini bozmaz. */
.ust-serit {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px max(14px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-bottom: 1px solid var(--line); font-size: 13px; backdrop-filter: blur(8px);
}
.ust-serit a { color: var(--fg-2); text-decoration: none; padding: 5px 9px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
.ust-serit a:hover { background: var(--accent-soft); color: var(--accent); }
.ust-serit a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
.ust-serit .ust-ana { color: var(--accent); }
.ust-serit .ust-linkler { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
body.ust-serit-var { padding-top: 64px; }
@media (max-width: 520px) { .ust-serit { font-size: 12.5px; padding-block: 7px; } .ust-serit a { padding: 5px 7px; } .ust-serit .ust-ek { display: none; } }
@media print { .ust-serit { display: none; } body.ust-serit-var { padding-top: 24px; } }
.logo.terazi { background: none; padding: 0; overflow: hidden; }
.logo.terazi svg { width: 100%; height: 100%; display: block; }