/* ==========================================================================
   GAZALI AVIATION — parca-satisi.css
   Yalniz /parca-satisi sayfasinda eslesen kurallar.
   Ortak katman main.css'tedir; bu dosya ONUN USTUNE biner.
   ========================================================================== */

/* --------------------------------------------------------------------------
   23. Parça arama ve teklif sepeti — parca-satisi.php
   --------------------------------------------------------------------------
   2.316 parça /api/parcalar ucundan fetch ile gelir; arama ve
   süzme tarayıcıda yapılır, sonuçlar sayfalanarak basılır (hepsi birden DOM'a
   basılırsa sayfa donuyor). Sepet localStorage'da tutulur.
   ⚠ Veride FİYAT YOK — karar gereği fiyat gösterilmiyor, teklif sepetiyle
   çalışılıyor. Fiyatı istemci tarafında gizlemek gizlemek değildir; bu yüzden
   fiyat sütunu JSON'a hiç konmadı.
   -------------------------------------------------------------------------- */

/* --- arama kutusu --- */

/* ⚠ position BURADA DEĞİL .parca-ara__kutu'da: bu kapsayıcı ETİKETİ DE
   içeriyor ve ikonun 'top: 50%'i etiket+girdi ikilisine göre
   hesaplanıyordu — ölçüldü, ikon 14 px yukarıda duruyordu. */
.parca-ara__kutu {
  position: relative;
  display: block;
}

.parca-ara .input {
  padding-inline-start: 3rem;
  font-size: var(--step-1);
}

.parca-ara__ikon {
  position: absolute;
  inset-inline-start: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--slate-500);
  pointer-events: none;
}

/* --- durum süzgeç düğmeleri --- */

.durum-suzgec {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.durum-suzgec button {
  padding: 0.45rem 0.95rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate-600);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.durum-suzgec button:hover {
  border-color: var(--gold-600);
  color: var(--navy-800);
}

.durum-suzgec button.is-active {
  color: var(--white);
  background: var(--navy-700);
  border-color: var(--navy-700);
}

/* --- sonuç listesi --- */

.parca-liste {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* --- sepet: sabit düğme + panel --- */

/* ⚠ bottom ÇEREZ ŞERİDİNİ HESABA KATAR: şerit sayfanın altını kaplar ve
     düğmeyi örtüyordu — şerit kapatılmadan sepete tıklanamıyordu. Şerit
     görünürken düğme onun üstüne çıkar. Eski şerit için burada sabit
     12rem / 14rem (dar ekran) TAHMİNİ yazılıydı; yeni şeridin yüksekliği
     dile ve genişliğe göre değişiyor — cerez.js ÖLÇÜP --cerez-bar-h'ye
     yazar (şerit yokken 0, sistem kapalıyken tanımsız → 0). */
.sepet-dugme {
  position: fixed;
  inset-inline-end: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + var(--cerez-bar-h, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.4rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy-950);
  background: linear-gradient(135deg, var(--gold-600), var(--gold-500));
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}

.sepet-dugme b {
  display: grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: 0.35rem;
  font-size: 0.8125rem;
  color: var(--gold-500);
  background: var(--navy-950);
  border-radius: var(--radius-pill);
}

/* Yukarı çık düğmesi (main.css 18. bölüm) de inline-end köşesinde; sepet
   düğmesi görünürken onun ÜSTÜNE çıkar. Sepet düğmesi 54 px (ölçüldü,
   1280 ve 390 px) + iki düğmenin dip boşlukları arasındaki fark + 0,75rem
   ara. Çerez şeridi görünürken ikisi birlikte şeridin üstüne çıkar
   (--cerez-bar-h her iki bottom'da da var). */
body:has(.sepet-dugme:not([hidden])) {
  --yukari-cik-ek: calc(54px + clamp(1rem, 3vw, 2rem) - var(--kose-bosluk) + 0.75rem);
}

.sepet-panel {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  /* ⚠ 'end center' DEĞİL: kutu ekranın ALTINA yapışıyordu — ölçüldü
     (1280x720): üst boşluk 112 px, alt boşluk 32 px. Ortalanmış bir
     kutu, uzun sepette de kısa sepette de aynı yerde açılır. */
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  background: rgba(0, 20, 45, 0.55);
  backdrop-filter: blur(3px);
}

.sepet-panel__kutu {
  width: min(44rem, 100%);
  /* 80vh -> 90vh: 720 px'lik ekranda kutu 576 px'e sıkışıyor ve içerik
     sığmadığı için gereksiz kayıyordu. */
  max-height: min(90vh, 48rem);
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  /* ⚠ TEK KAYDIRMA ALANI BURASI. Bir ara liste de kendi içinde kayıyordu
     (ölçüldü: ikisi de scrollHeight > clientHeight): kullanıcı hangi
     çubuğu süreceğini bilemiyor, iç listede kaydırma dış kutuyu hiç
     oynatmıyor, iç liste bitince zincirlenip dışı kaydırıyor — imlecin
     altındaki şey aniden değişiyor. Liste kendi sınırını bıraktı. */
  overflow-y: auto;
  /* Kutunun sonunda kaydırma ARKADAKİ SAYFAYA zincirlenmesin. Arka plan
     JS'te body.overflow=hidden ile zaten kilitli, ama o kilit modal
     kapanınca kalkar; bu satır kilit olmasa da doğru davranışı verir. */
  overscroll-behavior: contain;
}

.sepet-panel__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  /* ⚠ STICKY: kutunun tamamı kaydığı için uzun sepette başlık ve
     "Kapat" düğmesi yukarı kaçıyordu. Kapatma yolu HER ZAMAN görünür
     durmalı — modal içinde kaybolan bir kapatma düğmesi, kullanıcıyı
     Esc'i bilmeye mecbur bırakır.
     ⚠ Negatif margin + eşit padding: sticky başlık kutunun yatay
       dolgusunu da örtmeli, yoksa altından kayan içerik kenarlardan
       görünür. */
  position: sticky;
  top: calc(clamp(1.25rem, 3vw, 2rem) * -1);
  z-index: 2;
  margin-inline: calc(clamp(1.25rem, 3vw, 2rem) * -1);
  padding-inline: clamp(1.25rem, 3vw, 2rem);
  padding-top: clamp(1.25rem, 3vw, 2rem);
  margin-top: calc(clamp(1.25rem, 3vw, 2rem) * -1);
  background: var(--white);
}

.sepet-panel__liste {
  /* ⚠ KENDİ KAYDIRMASI YOK — kasten. Bir ara max-height:15rem +
     overflow-y:auto taşıyordu; o sınır "form dışarı itiliyor" diye
     konmuştu, ama kutunun KENDİSİ kaydığı için form zaten dışarı
     itilemez. Sınır yalnızca ikinci bir kaydırma çubuğu üretiyordu. */
  flex: 0 0 auto;
  margin-block: 1rem;
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

/* ==========================================================================
   PARÇA KATALOĞU — araç çubuğu, kart ızgarası, liste görünümü
   --------------------------------------------------------------------------
   ⚠ BU BLOK main.css'TEN TAŞINDI: `.parca*` yalnız /parca-satisi'nda
     üretiliyor (üç yerde arandı: PHP, JS, üretilen HTML — başka sayfada
     tek geçiş yok). Ortak katmanda durması her sayfaya bedava bayt
     bindiriyordu.
   ⚠ TEK ŞABLON, İKİ GÖRÜNÜM: JS tek bir <article class="parca"> basar;
     ızgara ile liste farkını YALNIZ bu dosya yapar. İki ayrı şablon
     yazılsaydı biri güncellenip öteki unutulurdu.
   ========================================================================== */

/* ---- araç çubuğu ---- */
.parca-arac {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 1.75rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--line);
}

.parca-arac__sayac {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--slate-600);            /* beyaz zemin: 7.53:1 */
}

.parca-arac__sag {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.parca-arac__sirala {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.parca-arac__etiket {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-600);
  white-space: nowrap;
}

/* ⚠ Dar ekranda etiket gizlenir, <select> kalır: "Sırala" sözcüğü
   olmadan da açılır listenin ilk seçeneği ne işe yaradığını söylüyor.
   Etiket görsel olarak gizlenir ama EKRAN OKUYUCUDAN GİZLENMEZ —
   label hâlâ select'i adlandırıyor. */
@media (max-width: 560px) {
  .parca-arac__etiket {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.input--sm {
  /* ⚠ MANTIKSAL: fiziksel dört değerli kısayol RTL'de okun boşluğunu ters
     tarafta bırakıyordu (ev kuralı: fiziksel left/right yazılmaz). */
  padding-block: 0.45rem;
  padding-inline: 0.75rem 2rem;
  font-size: 0.875rem;
}

/* ---- görünüm değiştirici ---- */
.parca-gorunum {
  display: inline-flex;
  padding: 2px;
  /* ⚠ --bg-soft JETONU YOK (denetim bulgusu): yedek değer hep kullanılıyordu,
     yani ekrana sabit hex basılıyor ve renk paletinden KOPUK kalıyordu.
     Var olan jetona (--paper #f7f9fc) bağlandı. */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.parca-gorunum button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 1.9rem;
  color: var(--slate-600);            /* 7.53:1 */
  background: none;
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

.parca-gorunum button svg {
  width: 15px;
  height: 15px;
}

.parca-gorunum button:hover {
  color: var(--navy-900);
}

/* ⚠ SEÇİLİ DURUM RENKLE DEĞİL ZEMİNLE: yalnız renk değişseydi renk körü
   kullanıcı hangi görünümde olduğunu göremezdi. Beyaz kutu + gölge,
   düğmeyi fiziksel olarak "basılı" gösteriyor. */
.parca-gorunum button[aria-pressed="true"] {
  color: var(--navy-900);             /* beyaz üzerinde 13.46:1 */
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* ⚠ gold-400 DEĞİL gold-700: ölçüldü, gold-400 bu zeminde (#f4f6f9)
   1.56:1 — grafik eşiği 3:1. gold-700 = 4.92:1. */
.parca-gorunum button:focus-visible {
  outline: 2px solid var(--gold-700);
  outline-offset: 1px;
}

/* ---- liste kabı ---- */
.parca-liste {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
  transition: opacity 0.15s ease;
}

/* ⚠ ARAMA SUNUCUDA: yanıt yoldayken eski sonuçlar ekranda kalır.
   Soluklaştırma "bu liste henüz yeni sorguya ait değil" der; olmasa
   kullanıcı eski sonuçları yeni aramanınki sanabilirdi. Gecikme: hızlı
   yanıtta (çoğu arama <150 ms) liste yanıp sönmesin. */
.parca-liste[aria-busy="true"] {
  opacity: 0.55;
  transition-delay: 0.12s;
}

/* ⚠ auto-fill + minmax: sütun sayısı EKRANA göre belirlenir, sabit bir
   sayı yazılmaz. Sabit 4 sütun 1000 px'de sıkışır, 1800 px'de boşluk
   bırakırdı. 15rem taban: en uzun parça numarası ('980-4750-003') tek
   satıra sığar. */
.parca-liste--izgara {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.parca-liste--liste {
  grid-template-columns: 1fr;
  gap: 0.625rem;
}

/* ---- kart ---- */
.parca {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.parca:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

/* ⚠ GÖRSEL KUTUSU TEMSİLİ FOTOĞRAF DEĞİL: parcalar tablosunda görsel
   kolonu yok. Başka bir parçanın fotoğrafı BU parçanınki sanılırdı
   (ev kuralı: uydurma veri yok). Nötr bir simge ve açık bir bildirim,
   boşluğu dürüstçe dolduruyor. */
.parca__gorsel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* ⚠ ORAN DEĞİL SABİT YÜKSEKLİK — ve KISA. Ölçüldü: 4/3 oranıyla kutu
     kartın %51ini kaplıyordu (387 px kartta 197 px) ve içinde HİÇBİR
     bilgi yok; parcalar tablosunda görsel kolonu yok, hiçbir parçada
     fotoğraf YOK ve olmayacak. Referans sitede bu kutu büyük çünkü
     BAZI ürünlerin fotoğrafı var. Burada yarım kartı boşluğa vermek,
     kataloğun asıl işini (parça numarası taramak) zorlaştırıyordu.
     Kutu duruyor — kart kimliğini veriyor — ama bir şerit kadar. */
  flex-direction: row;
  height: 4.5rem;
  /* ⚠ Yedek değer jetonun GERÇEK değeriyle uyuşmuyordu (#9aa5b5 ≠ #9aa5b1):
     jeton yüklenmezse iki farklı gri çıkardı. Yedek kaldırıldı — jeton
     main.css'te tanımlı ve o dosya her sayfada yükleniyor. */
  color: var(--slate-400);
  background:
    linear-gradient(135deg, rgba(6, 42, 109, 0.035), rgba(6, 42, 109, 0.012));
  border-bottom: 1px solid var(--line);
}

.parca__gorsel svg {
  width: 1.5rem;
  height: 1.5rem;
}

.parca__gorselYok {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Ölçüldü: #6a7278 / #f7f8fa = 4.58:1 — AA eşiğinin üstünde.
     --slate-400 (2.5:1) yalnız SİMGEDE kullanılıyor, metinde değil. */
  color: #6a7278;
}

.parca__govde {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.875rem 1rem 0.75rem;
}

.parca__no {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  word-break: break-word;
}

/* ⚠ İKİ SATIRDA KIRPILIR, kesilmez: kartlar eşit yükseklikte durmalı
   yoksa ızgara kademeli görünür. Tam metin title'da DEĞİL — tanım
   zaten aranabilir ve liste görünümünde tamamı okunuyor. */
.parca__ad {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--slate-600);            /* 7.53:1 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.parca__durum {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.15rem 0 0;
}

.parca__durumEtiket {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--slate-600);
}

.parca__ekle {
  margin: 0 1rem 1rem;
}

/* ==========================================================================
   LİSTE GÖRÜNÜMÜ — aynı kart, yatay dizilim
   ⚠ Görsel kutusu KÜÇÜLÜR, kaybolmaz: kaybolsaydı iki görünüm arasında
     geçiş yapan kullanıcı bir şeyin silindiğini sanırdı.
   ========================================================================== */
.parca-liste--liste .parca {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding-inline-end: 1rem;
}

.parca-liste--liste .parca__gorsel {
  flex: 0 0 auto;
  width: 3.5rem;
  aspect-ratio: 1;
  border-bottom: 0;
  border-inline-end: 1px solid var(--line);
}

.parca-liste--liste .parca__gorsel svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* Liste satırında "GÖRSEL YOK" yazısına yer yok; simge kalır. */
.parca-liste--liste .parca__gorselYok {
  display: none;
}

.parca-liste--liste .parca__govde {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
}

.parca-liste--liste .parca__no {
  flex: 0 0 auto;
  min-width: 11rem;
}

.parca-liste--liste .parca__ad {
  flex: 1 1 auto;
  -webkit-line-clamp: 1;
}

.parca-liste--liste .parca__durum {
  flex: 0 0 auto;
  margin: 0;
}

.parca-liste--liste .parca__durumEtiket {
  display: none;   /* rozet kendi başına yeterli; satırda yer dar */
}

.parca-liste--liste .parca__ekle {
  flex: 0 0 auto;
  margin: 0;
}

/* ---- dar ekran: liste görünümü karta düşer ----
   ⚠ 640 px altında yatay dizilim okunmaz hâle geliyordu (parça no + tanım
     + rozet + düğme tek satıra sığmıyor). Görünüm tercihi korunur ama
     düzen kart gibi davranır. */
@media (max-width: 640px) {
  .parca-liste--liste .parca,
  .parca-liste--liste .parca__govde {
    flex-direction: column;
    align-items: stretch;
  }

  .parca-liste--liste .parca {
    padding-inline-end: 0;
  }

  .parca-liste--liste .parca__gorsel {
    width: 100%;
    aspect-ratio: 5 / 2;
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
  }

  .parca-liste--liste .parca__govde {
    gap: 0.35rem;
    padding: 0.875rem 1rem 0.75rem;
  }

  .parca-liste--liste .parca__no {
    min-width: 0;
  }

  .parca-liste--liste .parca__ekle {
    margin: 0 1rem 1rem;
  }
}


/* ⚠ aria-disabled GÖRSEL KARŞILIĞI: düğme artık disabled DEĞİL (odak
   kaybolmasın diye), ama kullanıcı sepette olduğunu görmeli. Tarayıcının
   :disabled görünümü aria-disabled'a uygulanmaz, bu yüzden elle.
   ⚠ pointer-events: none YAZILMAZ — o, odağı da öldürürdü; tıklama JS'te
   sessizce yok sayılıyor (sepette(pn) → return). */
.parca__ekle.is-disabled,
.btn.is-disabled {
  opacity: 0.55;
  cursor: default;
}

/* Odak halkası devre dışı düğmede de görünür kalır. */
.btn.is-disabled:focus-visible {
  opacity: 1;
}