/* Form kutusu ve form alanları — bütün sitede TEK biçim (08.10, kullanıcı: "bütün site aynı format olacak").
   Kullanan sayfalar: ödeme, güncelleme hakkı (TR/EN), hesap oluşturma, lisans anahtarı, lisans ekle, telefonla
   doğrulama. Önceden ödeme ve güncelleme koyu zeminde kendi kopyalarını, hesap sayfaları ise açık zeminde beyaz
   kartı taşıyordu (yerine geçtiği hesap.css silindi).
   style.css'ten SONRA, sayfanın kendi <style>'ından ÖNCE yüklenir. Alan kuralları :where(.kutu) ile yazıldı:
   özgüllükleri tek öğe kadar kalır, sayfaya özel kurallar (.invoice-toggle, .onay label, .paket…) bunları ezer. */
.kutu {
  width: min(560px, 100%);
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--r-pano);
  padding: var(--p-pano);
  background: var(--zemin-pano);
  text-align: left;
}
:where(.kutu) form {
  display: grid;
  gap: 16px;
}
:where(.kutu) label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
:where(.kutu) label i,
:where(.kutu) label small {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
}
:where(.kutu) input,
:where(.kutu) textarea {
  font: inherit;
  font-size: 15px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--txt);
  width: 100%;
  min-width: 0;
}
:where(.kutu) input:focus,
:where(.kutu) textarea:focus {
  outline: 2px solid rgba(28, 201, 192, 0.45);
  border-color: var(--teal);
}
:where(.kutu) select {
  width: 100%;
  padding: 12px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #102435;
  color: var(--txt);
}
:where(.kutu) fieldset {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 16px;
  min-width: 0;
}
/* Kutunun ana düğmesi tam genişlikte; boyu öteki düğmelerle aynı (49 px). */
:where(.kutu) .pill.tam,
:where(.kutu) button[type='submit'] {
  justify-content: center;
  width: 100%;
  padding: 13px;
}
:where(.kutu) .pill:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: none;
}
/* İletiler: hata kırmızı, başarı yeşil, bilgi/uyarı sarı — bütün formlarda aynı. */
.msg {
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 14px;
  margin: 0;
  line-height: 1.55;
}
.msg.err {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #ffc9c9;
}
.msg.ok {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #c6f6e2;
}
.msg.bilgi,
.msg.uyari {
  background: rgba(251, 191, 36, 0.07);
  border: 1px solid rgba(251, 191, 36, 0.28);
  color: #e8d9b5;
}
/* Tarayıcının varsayılan mavisi koyu zeminde okunmuyordu. */
.msg a {
  color: #ffe0a3;
  font-weight: 600;
}
/* Küçük açıklama satırı (kutu içinde ve altında). */
.kvkk {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.kvkk a {
  color: var(--teal);
}
/* Kutunun altındaki not ("Kart bilgileriniz bu sayfaya girilmez…"). */
.kutu-notu {
  width: min(560px, 100%);
  margin: 18px auto 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}
/* Adres önerisi (08.10, /adres-onerisi.js): liste adres alanının altında, sayfayı itmeden açılır. */
.adres-sarma {
  position: relative;
}
/* Satır içi metin kutusunun alt boşluğu listeyi 6 px aşağı itiyordu. */
.adres-sarma textarea {
  display: block;
}
.adres-onerileri {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #102435;
  border: 1px solid var(--teal);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  text-transform: none;
  letter-spacing: 0;
}
.adres-onerileri li {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.adres-onerileri li:hover,
.adres-onerileri li[aria-selected='true'] {
  background: rgba(28, 201, 192, 0.14);
}
.adres-onerileri b {
  font-size: 14px;
  font-weight: 600;
  color: var(--txt);
}
.adres-onerileri span {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}
[hidden] {
  display: none !important;
}
@media (max-width: 640px) {
  :where(.kutu) input,
  :where(.kutu) textarea,
  :where(.kutu) select {
    font-size: 16px;
  }
}
/* Şifre alanında «Göster / Gizle» (03.11, oturum.js ekler). Düğme alanın içinde sağda; dokunma hedefi 44 px. */
.sifre-alan {
  position: relative;
  display: block;
}
:where(.kutu) .sifre-alan input {
  padding-right: 84px;
}
.sifre-goster {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  min-width: 72px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--teal, #32d7c9);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.sifre-goster:hover {
  background: rgba(28, 201, 192, 0.12);
}
.sifre-goster:focus-visible {
  outline: 2px solid rgba(28, 201, 192, 0.6);
}