/*
 * Satın alma akışı — tanıtım sitesinin dili (22.10.2026).
 * Kullanır: templates/satin_al.html (/satin-al), kod_dogrula.html (/billing/eposta-dogrula), kayit_basarili.html,
 * dogrula_basarili.html, login.html (/login, /giris-yap), kayit.html (/kayit, /kayit-ol).
 * Onaylanan eskiz: _wf/dis-sayfa/satin/eskiz-satin-al.png.
 *
 * Açık levha zemin, beyaz alanlar, ince çizgi, Inter; başlık Inter 700. Sayfada tek siyah ana düğme. BÜYÜK HARF etiket,
 * ikon kutusu, emoji, degrade, renkli rozet ve renkli kart logosu yok; turuncu yalnız logoda. Tutarlarda ₺ sonda.
 * Renkler tanitim-2026.css'in açık zemin token'larıyla aynı (o dosya burada yüklenmez; yalnız değerler alındı).
 * Önek: sa-.
 */

:root {
  --sa-zemin: #F6F3EE;      /* tanitim --tn-levha */
  --sa-acik-2: #ECE7E0;     /* --tn-acik-2 */
  --sa-acik-3: #DDD6CD;     /* --tn-acik-3 */
  --sa-beyaz: #FFFFFF;
  --sa-yazi: #1C1916;       /* --tn-a-yazi */
  --sa-yazi-2: #4A433D;     /* --tn-a-yazi-2 */
  --sa-yazi-3: #665E57;     /* --tn-a-yazi-3 */
  --sa-cizgi: #E3DDD4;      /* --tn-a-cizgi */
  --sa-girdi-cizgi: #D3CBC0;
  --sa-girdi-ust: #A79D91;
  --sa-yer-tutucu: #7A7168;  /* beyazda 4,78:1 (AA, 16 px metin) */
  --sa-yer-tutucu-iri: #9A9087;  /* beyazda 3,13:1 (AA iri metin: kod alanı 28 px · 600) */
  --sa-dugme: #1C1916;
  --sa-dugme-ust: #000000;
  /* Bildirimler (Polaris tonları, kısık) */
  --sa-hata: #A12B1D;    --sa-hata-zemin: #FDF2F0;    --sa-hata-cizgi: #F0D2CC;
  --sa-uyari: #7A4B00;   --sa-uyari-zemin: #FBF5E8;   --sa-uyari-cizgi: #EBDDBB;
  --sa-basari: #1D6440;  --sa-basari-zemin: #EFF6F1;  --sa-basari-cizgi: #CDE3D5;
  --sa-golge: 0 0 0 1px rgba(28, 25, 22, .03), 0 1px 2px rgba(28, 25, 22, .04), 0 8px 24px -12px rgba(28, 25, 22, .08);
  --sa-kenar: 16px;
}
@media (min-width: 640px)  { :root { --sa-kenar: 32px; } }
@media (min-width: 1024px) { :root { --sa-kenar: 48px; } }

@font-face {            /* yazı tipi gelene kadar kayma olmasın: Inter ölçüsüne ayarlı yedek (tanitim-2026.css ile aynı) */
  font-family: "Inter Yedek"; src: local("Arial");
  size-adjust: 107%; ascent-override: 90.5%; descent-override: 22.5%; line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.sa {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--sa-zemin); color: var(--sa-yazi); overflow-x: clip;
  font-family: Inter, "Inter Yedek", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.5; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.sa :where(h1, h2, p, ul, ol, dl, dd) { margin: 0; }
.sa :where(ul, ol) { padding: 0; list-style: none; }
:where(.sa) img { display: block; max-width: 100%; height: auto; }
:where(.sa) a { color: inherit; }   /* :where — bileşen sınıfları (.sa-dugme) rengi ezebilsin */
.sa :focus-visible { outline: 2px solid var(--sa-yazi); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--sa-acik-3); color: var(--sa-yazi); }
.sa-rakam { font-variant-numeric: tabular-nums; }

/* ── Üst bar: logo + giriş bağlantısı ── */
.sa-bar { border-bottom: 1px solid var(--sa-cizgi); }
.sa-bar__ic {
  width: 100%; max-width: calc(1200px + 2 * var(--sa-kenar)); margin-inline: auto; padding-inline: var(--sa-kenar);
  height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sa-bar__logo { display: block; flex-shrink: 0; border-radius: 6px; }
.sa-bar__logo img { height: 26px; width: auto; }
.sa-bar__giris { font-size: 14px; line-height: 20px; color: var(--sa-yazi-2); text-align: right; }
.sa-bar__giris a { color: var(--sa-yazi); font-weight: 500; text-decoration: none; margin-left: 4px; }
.sa-bar__giris a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sa-bar__soru { display: none; }
@media (min-width: 480px) { .sa-bar__soru { display: inline; } }
@media (min-width: 1024px) {
  .sa-bar__ic { height: 88px; }
  .sa-bar__logo img { height: 30px; }
  .sa-bar__giris { font-size: 15px; }
}

/* ── Satın alma düzeni: telefonda özet satırı üstte, form altında; 960 px'ten itibaren solda form, sağda yapışkan özet ── */
.sa-ana {
  flex: 1 0 auto; width: 100%; max-width: calc(632px + 2 * var(--sa-kenar)); margin-inline: auto;
  padding: 20px var(--sa-kenar) 64px;
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; align-items: start;
}
@media (min-width: 960px) {
  .sa-ana {
    max-width: calc(1200px + 2 * var(--sa-kenar)); padding-top: 44px; padding-bottom: 96px;
    grid-template-columns: minmax(0, 6fr) minmax(340px, 5fr); column-gap: clamp(48px, 7vw, 100px);
  }
  .sa-ana > .sa-ozet { grid-column: 2; grid-row: 1; position: sticky; top: 24px; }
  .sa-ana > .sa-form { grid-column: 1; grid-row: 1; }
}

.sa-baslik { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.sa-giris { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--sa-yazi-2); text-wrap: pretty; }
@media (min-width: 640px) {
  .sa-baslik { font-size: 34px; line-height: 40px; letter-spacing: -0.03em; }
  .sa-giris { font-size: 17px; line-height: 26px; }
}

/* ── Bildirim (flash) ── */
.sa-bildirimler { margin-top: 24px; display: grid; gap: 10px; }
.sa-bildirimler:empty { display: none; }
.sa-bildirim {
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--sa-cizgi); background: var(--sa-beyaz);
  font-size: 14px; line-height: 21px; color: var(--sa-yazi);
  overflow-wrap: anywhere;   /* 29.10.2026: boşluksuz uzun parça telefonda kutudan taşıp kesilmesin */
}
.sa-bildirim--hata { background: var(--sa-hata-zemin); border-color: var(--sa-hata-cizgi); color: var(--sa-hata); }
.sa-bildirim--uyari { background: var(--sa-uyari-zemin); border-color: var(--sa-uyari-cizgi); color: var(--sa-uyari); }
.sa-bildirim--basari { background: var(--sa-basari-zemin); border-color: var(--sa-basari-cizgi); color: var(--sa-basari); }

/* ── Form ── */
.sa-formu { margin-top: 28px; }
.sa-bolum { margin: 28px 0 14px; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; }
.sa-alan { margin-bottom: 16px; }
.sa-alan > label { display: block; margin-bottom: 6px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sa-yazi); }
.sa-girdi {
  display: block; width: 100%; height: 48px; padding: 0 14px; margin: 0;
  border: 1px solid var(--sa-girdi-cizgi); border-radius: 10px; background: var(--sa-beyaz); color: var(--sa-yazi);
  font: inherit; font-size: 16px; line-height: 24px; outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sa-girdi::placeholder { color: var(--sa-yer-tutucu); opacity: 1; }
.sa-girdi:hover { border-color: var(--sa-girdi-ust); }
.sa-girdi:focus { border-color: var(--sa-yazi); box-shadow: 0 0 0 1px var(--sa-yazi); }
.sa-girdi:focus-visible { outline: none; }
/* Boş zorunlu alan (JS .error koyar): kırmızı çerçeve + renge bağlı olmayan kısa yazı. Alan doldurulunca
   (yer tutucu kaybolunca) uyarı kendiliğinden söner; JS ve doğrulama aynı. */
.sa-girdi.error:placeholder-shown { border-color: var(--sa-hata); box-shadow: 0 0 0 1px var(--sa-hata); background: #FFFBFA; }
.sa-alan:has(> .sa-girdi.error:placeholder-shown)::after {
  content: "Bu alanı doldur."; display: block; margin-top: 6px; font-size: 13px; line-height: 19px; color: var(--sa-hata);
}
/* Hatalı alan odaktayken de odak seçilsin (kırmızı halka odağı gizlemesin): tek siyah odak halkası */
.sa-girdi.error:focus { outline: 2px solid var(--sa-yazi); outline-offset: 2px; }
.sa-ipucu { margin-top: 6px; font-size: 13px; line-height: 19px; color: var(--sa-yazi-3); }
.sa-ikili { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
.sa-uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
@media (max-width: 420px) { .sa-uclu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sa-uclu > :last-child { grid-column: 1 / -1; } }

.sa-not { margin: 4px 0 0; font-size: 14px; line-height: 21px; color: var(--sa-yazi-2); text-wrap: pretty; }

/* Onay kutusu */
.sa-onay {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; cursor: pointer;
  font-size: 14px; line-height: 21px; color: var(--sa-yazi-2); text-wrap: pretty;
}
.sa-onay input {
  flex-shrink: 0; width: 20px; height: 20px; margin: 0; margin-top: 1px; cursor: pointer;
  accent-color: var(--sa-yazi); border-radius: 5px;
}
.sa-onay input.error:not(:checked) { outline: 2px solid var(--sa-hata); outline-offset: 2px; }
.sa-onay input.error:focus-visible { outline-color: var(--sa-yazi); }
.sa-onay:has(> input.error:not(:checked)) > span::after {
  content: "Devam etmek için onay kutusunu işaretle."; display: block; margin-top: 6px; font-size: 13px; line-height: 19px;
  color: var(--sa-hata);
}
.sa-onay a { color: var(--sa-yazi); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sa-onay a:hover { text-decoration-thickness: 2px; }

/* Bot doğrulaması */
.sa-turnstile { margin: 18px 0 0; }
.sa-bekle {
  gap: 10px; align-items: flex-start; margin-top: 12px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--sa-cizgi); background: var(--sa-beyaz); font-size: 14px; line-height: 21px; color: var(--sa-yazi-2);
}
.sa-donen {
  flex-shrink: 0; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%;
  border: 2px solid var(--sa-acik-3); border-top-color: var(--sa-yazi); animation: sa-don .8s linear infinite;
}
@keyframes sa-don { to { transform: rotate(360deg); } }

/* ── Ana düğme: sayfada tek, siyah kapsül ── */
.sa-dugme {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 22px;
  padding: 12px 24px; border: 0; border-radius: 999px; background: var(--sa-dugme); color: #FFFFFF; cursor: pointer;
  font: inherit; font-size: 16px; line-height: 22px; font-weight: 600; text-align: center; text-decoration: none;
  transition: background-color .15s ease;
}
.sa-dugme:hover { background: var(--sa-dugme-ust); }
.sa-dugme:disabled { opacity: .6; cursor: default; }
.sa-dugme:focus-visible { outline: 2px solid var(--sa-yazi); outline-offset: 3px; border-radius: 999px; }
.sa-dipnot { margin-top: 14px; font-size: 13px; line-height: 20px; color: var(--sa-yazi-3); text-wrap: pretty; }

/* ── Sipariş özeti ── */
.sa-ozet__kart {
  background: var(--sa-beyaz); border: 1px solid var(--sa-cizgi); border-radius: 16px; box-shadow: var(--sa-golge);
}
.sa-ozet__satir { display: block; padding: 14px 16px; cursor: pointer; list-style: none; font-size: 15px; line-height: 22px; border-radius: 16px; }
/* summary'nin kendisi esnek kutu yapılmaz (eski Safari'de çalışmıyor); iç sarmalayıcı esnek */
.sa-ozet__satir-ic { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sa-ozet__satir::-webkit-details-marker { display: none; }
.sa-ozet__satir::marker { content: ""; }
.sa-ozet__satir b { font-weight: 600; }
.sa-ozet__ac { display: inline-flex; align-items: center; gap: 8px; color: var(--sa-yazi-2); font-size: 14px; }
.sa-ozet__ac::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.sa-ozet__ayrinti[open] .sa-ozet__ac::after { transform: rotate(-135deg); margin-top: 3px; }
.sa-ozet__ayrinti[open] .sa-ozet__ac-kapali, .sa-ozet__ayrinti:not([open]) .sa-ozet__ac-acik { display: none; }
.sa-ozet__ic { padding: 4px 16px 18px; border-top: 1px solid var(--sa-cizgi); }
@media (min-width: 960px) {
  .sa-ozet__kart { border-radius: 20px; }
  .sa-ozet__satir { display: none; }
  .sa-ozet__ic { padding: 28px 28px 26px; border-top: 0; }
}

.sa-paket__ad { margin-top: 14px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.sa-paket__alt { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--sa-yazi-3); }
@media (min-width: 960px) { .sa-paket__ad { margin-top: 0; font-size: 20px; line-height: 26px; } }

/* Aylık / Yıllık seçici (setIv) */
.sa-aralik {
  display: inline-flex; gap: 2px; margin-top: 18px; padding: 4px; border-radius: 999px; background: var(--sa-acik-2);
}
.int-btn {
  border: 0; margin: 0; padding: 8px 18px; border-radius: 999px; background: transparent; color: var(--sa-yazi-2); cursor: pointer;
  font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; transition: background-color .15s ease, color .15s ease;
}
.int-btn:hover { color: var(--sa-yazi); }
.int-btn.active { background: var(--sa-beyaz); color: var(--sa-yazi); box-shadow: 0 1px 2px rgba(28, 25, 22, .10), 0 0 0 1px rgba(28, 25, 22, .04); }
.int-btn span { margin-left: 6px; color: var(--sa-yazi-3); font-weight: 400; }
.int-btn:focus-visible { border-radius: 999px; }

.sa-tablo { margin-top: 20px; }
.sa-tablo__satir {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0;
  border-top: 1px solid var(--sa-cizgi); font-size: 15px; line-height: 22px;
}
.sa-tablo__satir:first-child { border-top: 0; padding-top: 4px; }
.sa-tablo__satir dt { color: var(--sa-yazi); }
.sa-tablo__satir dd { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-tablo__satir dd small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--sa-yazi-3); white-space: normal; }
.sa-tablo__satir s { margin-right: 6px; color: var(--sa-yazi-3); }
.sa-tablo__satir s:empty { display: none; }
.sa-tablo__satir--bugun dt { font-size: 16px; font-weight: 500; }
.sa-tutar { display: block; font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -0.02em; }
/* Dar telefonda (320 px) yıllık tutar "10.789,20 ₺" kartın iç kenarını aşıyordu: küçült */
@media (max-width: 374.98px) { .sa-tutar { font-size: 26px; line-height: 32px; } }
@media (min-width: 960px) { .sa-tutar { font-size: 36px; line-height: 42px; } }

.sa-ozellik {
  display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 10px 16px; margin-top: 4px; padding-top: 18px;
  border-top: 1px solid var(--sa-cizgi); font-size: 13px; line-height: 18px; color: var(--sa-yazi-2);
}
.sa-guvence {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sa-cizgi);
  font-size: 13px; line-height: 20px; color: var(--sa-yazi-3);
}
.sa-guvence p + p { margin-top: 2px; }

/* ── Alt bilgi: yasal bağlantılar ── */
.sa-alt { border-top: 1px solid var(--sa-cizgi); }
.sa-alt__ic {
  width: 100%; max-width: calc(1200px + 2 * var(--sa-kenar)); margin-inline: auto; padding: 20px var(--sa-kenar) 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  font-size: 13px; line-height: 20px; color: var(--sa-yazi-3);
}
.sa-alt__linkler { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.sa-alt__linkler a { color: var(--sa-yazi-2); text-decoration: none; }
.sa-alt__linkler a:hover { color: var(--sa-yazi); text-decoration: underline; text-underline-offset: 3px; }

/* ══ Ortalı tek kart (e-posta kodu, başarı sayfaları) ══ */
.sa-orta {
  flex: 1 0 auto; width: 100%; max-width: calc(480px + 2 * var(--sa-kenar)); margin-inline: auto;
  padding: 32px var(--sa-kenar) 56px; display: flex; flex-direction: column; justify-content: center;
}
.sa-orta__logo { display: block; align-self: center; margin-bottom: 28px; border-radius: 6px; }
.sa-orta__logo img { height: 28px; width: auto; }
.sa-kart {
  background: var(--sa-beyaz); border: 1px solid var(--sa-cizgi); border-radius: 20px; box-shadow: var(--sa-golge);
  padding: 28px 22px 24px;
}
@media (min-width: 480px) { .sa-kart { padding: 36px 36px 30px; } }
.sa-kart__baslik { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.sa-kart__metin { margin-top: 10px; font-size: 15px; line-height: 23px; color: var(--sa-yazi-2); text-wrap: pretty; }
.sa-kart__metin b { color: var(--sa-yazi); font-weight: 600; overflow-wrap: anywhere; }
.sa-kart .sa-bildirimler { margin-top: 20px; }
.sa-kart__not {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sa-cizgi);
  font-size: 13px; line-height: 20px; color: var(--sa-yazi-3); text-wrap: pretty;
}
.sa-kart__not b, .sa-kart__not strong { color: var(--sa-yazi-2); font-weight: 600; }
.sa-kart__not a { color: var(--sa-yazi); text-decoration: underline; text-underline-offset: 3px; }

/* Kod girişi */
.sa-kod {
  display: block; width: 100%; height: 64px; margin-top: 24px; padding: 0 12px 0 calc(12px + .45em);
  border: 1px solid var(--sa-girdi-cizgi); border-radius: 12px; background: var(--sa-beyaz); color: var(--sa-yazi);
  font: inherit; font-size: 28px; font-weight: 600; letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums;
  outline: none; -webkit-appearance: none; appearance: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.sa-kod::placeholder { color: var(--sa-yer-tutucu-iri); opacity: 1; }
.sa-kod:hover { border-color: var(--sa-girdi-ust); }
.sa-kod:focus { border-color: var(--sa-yazi); box-shadow: 0 0 0 1px var(--sa-yazi); }
.sa-kod:focus-visible { outline: none; }

.sa-kod-alt {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 16px;
  font-size: 14px; line-height: 20px;
}
.sa-kod-alt form { margin: 0; }
.sa-baglanti {
  border: 0; margin: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: var(--sa-yazi);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.sa-baglanti:hover { text-decoration-thickness: 2px; }
.sa-baglanti:disabled { color: var(--sa-yazi-3); cursor: default; text-decoration: none; }
.sa-baglanti--sessiz { color: var(--sa-yazi-2); text-decoration: none; }
.sa-baglanti--sessiz:hover { color: var(--sa-yazi); text-decoration: underline; }

/* Adım listesi (başarı sayfaları): ikon kutusu yok, durum düz yazı */
.sa-adimlar { margin-top: 22px; border-top: 1px solid var(--sa-cizgi); }
.sa-adimlar li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0;
  border-bottom: 1px solid var(--sa-cizgi); font-size: 15px; line-height: 22px;
}
.sa-adimlar li span:last-child { flex-shrink: 0; font-size: 13px; color: var(--sa-yazi-3); }
.sa-adimlar li.sa-adim--sirada span:first-child { color: var(--sa-yazi-2); }

/* ══ Giriş ve kayıt (29.10.2026) ══ */
/* Bilgi bildirimi (info): nötr kısık kutu. satin_al.html de bu sınıfı kullanıyordu, kuralı yoktu (beyaz görünürdü). */
.sa-bildirim--bilgi { background: var(--sa-acik-2); border-color: var(--sa-acik-3); color: var(--sa-yazi); }
/* Hata bildirimi betikle odak alır (ekran okuyucu okusun); odak halkası gerekmez, öğe etkileşimli değil. */
.sa-bildirim[tabindex="-1"]:focus { outline: none; }

/* Kayıt kartı: iki sütunlu satırlar için daha geniş */
.sa-orta--genis { max-width: calc(560px + 2 * var(--sa-kenar)); }
/* Kart içindeki formda ilk bölüm başlığı üst boşluğu ikiye katlamasın */
.sa-formu > .sa-bolum:first-child { margin-top: 0; }
/* Bölüm başlığının hemen altındaki açıklama (alanlardan önce) */
.sa-not--ust { margin: 0 0 16px; }
/* Kartın iç genişliği ~440 px'in altına inince "(isteğe bağlı)" etiketleri iki satıra düşüp yan alanı kaydırıyordu:
   kart 560 px'e sığmadığı her genişlikte tek sütun */
@media (max-width: 559.98px) { .sa-ikili { grid-template-columns: minmax(0, 1fr); } }
.sa-istege-bagli { font-weight: 400; color: var(--sa-yazi-3); }

/* Şifre alanı + Göster/Gizle düğmesi (dokunma alanı en az 44 px) */
.sa-sifre { position: relative; }
.sa-girdi--sifre { padding-right: 84px; }
/* Edge'in kendi göz/temizle simgesi bizim Göster düğmesiyle çakışmasın */
.sa-girdi--sifre::-ms-reveal, .sa-girdi--sifre::-ms-clear { display: none; }
.sa-goster {
  position: absolute; top: 50%; right: 2px; transform: translateY(-50%);
  min-width: 44px; min-height: 44px; padding: 0 12px; margin: 0; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sa-yazi-2);
}
.sa-goster:hover { color: var(--sa-yazi); text-decoration: underline; text-underline-offset: 3px; }
/* Caps Lock notu: hep DOM'da (canlı bölge), kapalıyken boş ve yer kaplamaz */
.sa-caps { color: var(--sa-uyari); }   /* üst boşluk .sa-ipucu'dan */
.sa-caps:empty { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}