/* ==========================================================================
   BİLEŞEN — FORM ELEMANLARI
   Beyaz zeminde çalışır; renkleri daima semantik değişkenlerden alır.
   ========================================================================== */

/* ------------------------------------------------------------- alan sarmalı */
.mu-alan { display: flex; flex-direction: column; gap: 7px; position: relative; }
.mu-alan--tam { grid-column: 1 / -1; }

.mu-alan__etiket {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--metin);
  letter-spacing: -0.005em;
}
.mu-alan__etiket .mu-alan__ops {
  font-family: var(--font-metin);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--metin-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mu-alan__etiket abbr { color: var(--kirmizi-500); text-decoration: none; font-weight: 800; }

/* ------------------------------------------------------------------ girdi */
/* `--alan-bg` VE `--alan-cizgi` BURADA TÜKETİLİR — ÖLÇÜLMÜŞ KUSUR.

   Temada altı ayrı yer bu iki değişkeni yazıyor (blog bülten kutusu,
   franchise, kariyer, şubelerimiz, adres diyaloğu) ve HERBIRİ koyu
   zeminli bir form kurmaya çalışıyor. Ama hiçbir kural onları
   OKUMUYORDU: `.mu-girdi` doğrudan `--yuzey` (beyaz) yazıyordu.

   Ölçüldü (`/adreslerim` adres diyaloğu): girdi zemini
   `rgb(255,255,255)`, girdi metni `rgb(255,255,255)` — kullanıcı yazdığı
   şeyi GÖREMİYORDU. Yazılan değişken ölü olduğu için kusur altı sayfaya
   birden yayılmıştı.

   Yedekli yazılıyor (`var(--alan-bg, var(--yuzey))`): değişkeni
   yazmayan sayfaların hiçbiri değişmez. */
.mu-girdi {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  background: var(--alan-bg, var(--yuzey));
  border: 1.5px solid var(--alan-cizgi, var(--cizgi-koyu));
  border-radius: var(--r-sm);
  color: var(--metin);
  font-size: var(--fs-md);
  font-family: inherit;
  transition: border-color var(--t-2) var(--e-std), background var(--t-2), box-shadow var(--t-2);
  appearance: none;
}
.mu-girdi::placeholder { color: var(--metin-3); }
.mu-girdi:hover:not(:disabled) { border-color: var(--metin-3); }
.mu-girdi:focus {
  outline: none;
  border-color: var(--kirmizi-500);
  box-shadow: 0 0 0 3px var(--kirmizi-sis);
}
.mu-girdi:disabled { opacity: 0.55; cursor: not-allowed; background: var(--zemin-2); }
.mu-girdi[readonly] { background: var(--zemin-2); cursor: default; }

textarea.mu-girdi { min-height: 116px; resize: vertical; line-height: 1.6; }

select.mu-girdi {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238A94A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.4 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
  cursor: pointer;
}

/* Mono girdi (kart no, kupon, telefon) */
.mu-girdi--fis {
  font-family: var(--font-metin);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* İkonlu alan */
.mu-alan--ikonlu { position: relative; }
.mu-alan--ikonlu .mu-girdi { padding-left: 44px; }
.mu-alan__ikon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--metin-3);
  pointer-events: none;
  width: 18px; height: 18px;
}
.mu-alan--ikonlu .mu-alan__etiket + .mu-girdi + .mu-alan__ikon,
.mu-alan--ikonlu .mu-alan__ikon { top: auto; bottom: 15px; transform: none; }

/* Sonek butonu (kupon uygula gibi) */
.mu-alan--sonekli { display: flex; gap: 8px; align-items: stretch; }
.mu-alan--sonekli .mu-girdi { flex: 1; }

/* Yardım metni */
.mu-alan__ipucu { font-size: var(--fs-xs); color: var(--metin-3); line-height: 1.5; }

/* Hata */
.mu-alan.is-hatali .mu-girdi {
  border-color: var(--hata-500);
  background: var(--hata-sis);
}
.mu-alan.is-hatali .mu-girdi:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16); }
.mu-alan__hata {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--hata-500);
  line-height: 1.45;
}
.mu-alan__hata .mu-ikon { width: 14px; height: 14px; flex: none; margin-top: 1px; }

/* Başarı */
.mu-alan.is-basarili .mu-girdi { border-color: var(--basari-600); }

/* Form geneli uyarı bandı */
.mu-form-uyari {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px;
  background: var(--hata-sis);
  border: 1px solid rgba(220, 38, 38, 0.32);
  border-radius: var(--r-sm);
  color: var(--hata-500);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--sp-4);
}
.mu-form-uyari .mu-ikon { width: 18px; height: 18px; flex: none; }
/* Kendi kutusunda tek başına duran uyarı: alt boşluğu taşımaz.
   `style="margin:0"` olarak yazılmıştı (siparis-detay.js); satır içi
   biçem yasak (CLAUDE.md) ve kural burada tekil durmalı. */
.mu-form-uyari--yalin { margin: 0; }

.mu-form-basari {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 15px 17px;
  background: var(--basari-sis);
  border: 1px solid rgba(21, 163, 74, 0.34);
  border-radius: var(--r-sm);
  color: var(--metin);
  font-size: var(--fs-sm);
}
.mu-form-basari .mu-ikon { width: 19px; height: 19px; flex: none; color: var(--basari-500); }
.mu-form-basari strong { display: block; margin-bottom: 3px; color: var(--metin); }

/* --------------------------------------------------------------- ızgara */
.mu-form-izgara { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .mu-form-izgara--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .mu-form-izgara--3 { grid-template-columns: repeat(3, 1fr); } }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend {
  padding: 0;
  font-family: var(--font-baslik);
  font-size: var(--fs-h4);
  font-weight: 800;
  color: var(--metin);
  margin-bottom: var(--sp-4);
}

/* --------------------------------------------------- onay kutusu / radyo */
.mu-secim {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--metin-2);
  line-height: 1.55;
}
.mu-secim input { position: absolute; opacity: 0; width: 0; height: 0; }
.mu-secim__kutu {
  flex: none;
  width: 21px; height: 21px;
  margin-top: 1px;
  border: 1.5px solid var(--cizgi-koyu);
  border-radius: var(--r-xs);
  background: var(--yuzey);
  display: grid; place-items: center;
  transition: all var(--t-2) var(--e-std);
}
.mu-secim__kutu::after {
  content: "";
  width: 11px; height: 6px;
  border-left: 2.2px solid #fff;
  border-bottom: 2.2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform var(--t-2) var(--e-yay);
  margin-top: -2px;
}
.mu-secim input:checked ~ .mu-secim__kutu { background: var(--kirmizi-500); border-color: var(--kirmizi-500); }
.mu-secim input:checked ~ .mu-secim__kutu::after { transform: rotate(-45deg) scale(1); }
.mu-secim input:focus-visible ~ .mu-secim__kutu { outline: 2px solid var(--kirmizi-500); outline-offset: 2px; }
.mu-secim:hover .mu-secim__kutu { border-color: var(--kirmizi-500); }
.mu-secim input:disabled ~ .mu-secim__kutu { opacity: 0.4; }
.mu-secim a { color: var(--kirmizi-500); text-decoration: underline; text-underline-offset: 2px; }

/* Radyo yuvarlak */
.mu-secim--radyo .mu-secim__kutu { border-radius: 50%; }
.mu-secim--radyo .mu-secim__kutu::after {
  width: 9px; height: 9px;
  border: 0; border-radius: 50%;
  background: #fff;
  transform: scale(0);
  margin: 0;
}
.mu-secim--radyo input:checked ~ .mu-secim__kutu::after { transform: scale(1); }

.mu-secim__metin strong { display: block; color: var(--metin); font-weight: 700; }

/* --------------------------------------------- seçilebilir kart (radio card) */
.mu-secim-kart {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 16px;
  background: var(--yuzey);
  border: 1.5px solid var(--cizgi-koyu);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-2) var(--e-std), background var(--t-2), box-shadow var(--t-2);
}
.mu-secim-kart:hover { border-color: var(--metin-3); }
.mu-secim-kart input { position: absolute; opacity: 0; width: 0; height: 0; }
.mu-secim-kart__isaret {
  flex: none;
  width: 21px; height: 21px;
  margin-top: 1px;
  border: 1.5px solid var(--cizgi-koyu);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: all var(--t-2) var(--e-std);
}
.mu-secim-kart__isaret::after {
  content: "";
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff; transform: scale(0);
  transition: transform var(--t-2) var(--e-yay);
}
.mu-secim-kart--coklu .mu-secim-kart__isaret { border-radius: var(--r-xs); }
.mu-secim-kart--coklu .mu-secim-kart__isaret::after {
  width: 11px; height: 6px; border-radius: 0; background: none;
  border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff;
  transform: rotate(-45deg) scale(0); margin-top: -2px;
}
.mu-secim-kart--coklu input:checked ~ .mu-secim-kart__isaret::after { transform: rotate(-45deg) scale(1); }
.mu-secim-kart input:checked ~ .mu-secim-kart__isaret { background: var(--kirmizi-500); border-color: var(--kirmizi-500); }
.mu-secim-kart input:checked ~ .mu-secim-kart__isaret::after { transform: scale(1); }
.mu-secim-kart:has(input:checked) {
  border-color: var(--kirmizi-500);
  background: var(--kirmizi-sis);
  box-shadow: 0 0 0 1px var(--kirmizi-500);
}
.mu-secim-kart:has(input:focus-visible) { outline: 2px solid var(--kirmizi-500); outline-offset: 2px; }
.mu-secim-kart:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

.mu-secim-kart__govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mu-secim-kart__bas {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--metin);
}
.mu-secim-kart__aciklama { font-size: var(--fs-xs); color: var(--metin-2); line-height: 1.5; }
.mu-secim-kart__fiyat {
  font-family: var(--font-metin); font-size: var(--fs-xs); font-weight: 700;
  color: var(--kirmizi-500); white-space: nowrap;
}
.mu-secim-kart__ikon { flex: none; color: var(--metin-3); }
.mu-secim-kart:has(input:checked) .mu-secim-kart__ikon { color: var(--kirmizi-500); }

/* Kompakt seçim ızgarası */
.mu-secim-liste { display: grid; gap: 10px; }
@media (min-width: 640px) { .mu-secim-liste--2 { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------- açma/kapama */
.mu-anahtar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); cursor: pointer;
}
.mu-anahtar input { position: absolute; opacity: 0; width: 0; height: 0; }
.mu-anahtar__ray {
  flex: none;
  width: 46px; height: 26px;
  border-radius: var(--r-pill);
  background: var(--cizgi-koyu);
  position: relative;
  transition: background var(--t-2) var(--e-std);
}
.mu-anahtar__ray::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform var(--t-2) var(--e-yay);
}
.mu-anahtar input:checked ~ .mu-anahtar__ray { background: var(--kirmizi-500); }
.mu-anahtar input:checked ~ .mu-anahtar__ray::after { transform: translateX(20px); }
.mu-anahtar input:focus-visible ~ .mu-anahtar__ray { outline: 2px solid var(--kirmizi-500); outline-offset: 2px; }
.mu-anahtar__metin { font-size: var(--fs-sm); color: var(--metin-2); }
.mu-anahtar__metin strong { display: block; color: var(--metin); font-weight: 700; margin-bottom: 2px; }

/* -------------------------------------------------------- segment seçici */
.mu-segment {
  display: inline-flex;
  padding: 4px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--r-sm);
  gap: 3px;
}
.mu-segment__oge {
  padding: 8px 15px;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--metin-2);
  transition: background var(--t-2), color var(--t-2);
  white-space: nowrap;
}
.mu-segment__oge:hover { color: var(--metin); }
.mu-segment__oge[aria-selected="true"], .mu-segment__oge.is-aktif {
  background: var(--kirmizi-500); color: #fff;
}

/* --------------------------------------------------------- form eylemleri */
.mu-form-alt {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding-top: var(--sp-2);
}
.mu-form-alt--ayri { justify-content: space-between; }

/* KART ÖDEME ALANI KALDIRILDI — karar #30 (Sprint 33)

   `.mu-kart-form` korumasız bir `display: grid` taşıyordu ve tarayıcının
   `[hidden] { display: none }` kuralını yeniyordu; kaldırılmış bir ödeme
   yöntemi için kart numarası ve CVV soran form açılışta GÖRÜNÜYORDU.
   Görünüm, sayfa betiği ve mock dalı birlikte çıkarıldı; geriye yalnız
   biçem kalsaydı hangi kuralın kime ait olduğu bir sonraki okuyucuya
   sorulurdu.

   Tasarım kaynağı `theme-reference/odeme.html` formu koruyor (karar #9);
   sağlayıcı sözleşmesi yapıldığında oradan geri gelir. */

/* Onay kutusu gibi .mu-alan sarmalayıcısı olmayan alanların hatası */
.mu-alan__hata--tekil { margin-top: -4px; padding-left: 32px; }
label.mu-secim.is-hatali .mu-secim__kutu { border-color: var(--hata-500); background: var(--hata-sis); }
.mu-secim-kart.is-hatali { border-color: var(--hata-500); }

/* ---------------------------------------------- adres başlığı pilleri

   Radyo düğmelerinin pill biçimi: "Ev · Ofis · Diğer". İkİ yerde
   kullanılıyor — ödeme adımının yeni adres formu ve `/adreslerim`
   diyaloğu — bu yüzden sayfa dosyasında değil, her sayfanın yüklediği
   form bileşenlerinde durur. `odeme.css`te dururken diyalogdaki hali
   biçimsizdi (ölçüldü). */
.mu-yeni-adres__etiketler { display: flex; gap: 8px; flex-wrap: wrap; }
.mu-yeni-adres__etiket {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  border: 1.5px solid var(--cizgi-koyu);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--metin-2);
  cursor: pointer;
  transition: all var(--t-2);
}
.mu-yeni-adres__etiket .mu-ikon { width: 15px; height: 15px; }
.mu-yeni-adres__etiket input { position: absolute; opacity: 0; }
.mu-yeni-adres__etiket:has(input:checked) {
  border-color: var(--kirmizi-500); background: var(--kirmizi-sis); color: var(--kirmizi-500);
}

/* ---------------------------------------------------------------------------
   `[hidden]` KORUMASI — ÖLÇÜLEN KUSUR (Sprint 33)

   Tarayıcının `[hidden] { display: none }` kuralı KULLANICI AJANI
   katmanındadır; yazar katmanındaki her `display` onu yener. Aşağıdaki
   sınıflar Razor'da `hidden` özniteliğiyle yazılıyor ama korumasız bir
   `display` aldıkları için AÇILIŞTA GÖRÜNÜYORLARDI. `prop("hidden", ...)`
   çağrıları da bu yüzden hiçbir şey yapmıyordu.

   Proje bu tuzağı zaten biliyordu (`avantajli-menu.css` · `grid.css`);
   dokuz yer o korumayı almamıştı. `SozGizliKalirTests` artık onuncuyu
   engelliyor.
   --------------------------------------------------------------------------- */
/* Boş hata kutusu her alanın altında duruyordu. */
.mu-alan__hata[hidden] { display: none; }

/* AYRIK FORM EYLEMİ (B-101, Sprint 39).

   Dört ekranda `style="margin-top:20px"` yazıyordu: form eylemi bir önceki
   bloktan görsel olarak ayrılsın diye. Satır içi biçem yasak (CLAUDE.md) ve
   bu bir TASARIM kararı — hesaplanmış bir değer değil, sınıfı olmalı. */
.mu-form-alt--ayrik { margin-top: var(--sp-5); }

/* DAR ALAN: tek başına duran bir girdi, formun tamamı kadar geniş olmamalı
   (şifre kutusu gibi). `max-width` bir tasarım kararıdır. */
.mu-alan--dar { max-width: 320px; }

/* SEÇİM LİSTESİ: art arda gelen onay kutuları arasındaki aralık, tek
   satırlık alanlarınkinden geniştir. */
.mu-alan--secimler { gap: var(--sp-3); }