/* Bolum 6 - Alis fiyati: sekme (tasarim: AlisFiyati, telefonda TelAlis), urun ayrintisindaki
 * bolum, Ayarlar'daki varsayimlar. Siniflar al- onekli; ortak parcalar stil.css'te. */

/* ---------------- sonekli giris (tasarim: .affix .sfx) ---------------- */
.al-girdi { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.al-girdi input { width: 112px; text-align: right; padding-right: 32px; }
.al-girdi > .alt { position: absolute; right: 16px; pointer-events: none; }
.al-roi-girdi input { width: 88px; }

/* ---------------- arac cubugu: liste, ROI hedefi, ek masraflar ---------------- */
.al-arac { gap: 8px 12px; }
.al-arac select { width: auto; max-width: 280px; }
.al-roi-alan { color: var(--text-2); padding-left: 8px; }
.al-sag { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.al-masraf { width: 360px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.al-masraf .al-alan { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.al-masraf .al-girdi input { width: 136px; padding-right: 64px; }
.al-masraf-alt { display: flex; justify-content: flex-end; padding-top: 4px; }

/* ---------------- tablo ---------------- */
.al-tablo { min-width: 960px; }
.al-tablo td { height: 56px; white-space: nowrap; }
.al-tablo .al-k-urun { width: 100%; max-width: 0; }
.al-tablo .al-k-urun .urun-hucre { cursor: pointer; }
.al-tablo .al-k-urun .urun-hucre:hover .urun-ad { color: var(--link); }
.al-tablo .al-hedef { background: var(--link-bg); font-weight: 500; }
.al-tablo td.al-k-teklif { padding-top: 0; padding-bottom: 0; }
.al-th { display: inline-flex; align-items: center; }
.al-roi { display: inline-flex; align-items: center; gap: 4px; }
.al-roi .ikon { width: 14px; height: 14px; }
.al-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------------- urun ayrintisi ve Ayarlar ---------------- */
.al-ayrinti dd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.al-ayrinti dt label { color: inherit; font-size: inherit; line-height: 36px; }
.al-ayrinti dd .ikon { width: 14px; height: 14px; vertical-align: -2px; }
.al-ayar-kutu { display: flex; flex-direction: column; gap: 16px; }
.al-ayar { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 16px; }
.al-ayar .al-alan { display: flex; flex-direction: column; gap: 4px; }
.al-ayar .al-alan-ad { font-size: 12px; line-height: 16px; color: var(--text-2); padding-left: 16px; }
.al-ayar .al-girdi input { width: 100%; padding-right: 64px; }

/* ---------------- telefon: tablo kart listesine doner (tasarim: TelAlis) ---------------- */
@media (max-width: 700px) {
  .al-arac select { max-width: none; flex: 1 1 100%; }
  .al-sag { margin-left: 0; }
  .al-masraf { width: calc(100vw - 32px); }
  .al-tablo, .al-tablo tbody { display: block; min-width: 0; }
  .al-tablo thead { display: none; }
  /* Her urun bir kart: ad, altinda etiket solda deger sagda; en buyuk sayi hedef alis */
  .al-tablo tr.al-satir {
    display: flex; flex-direction: column; gap: 4px; padding: 16px; border-bottom: 1px solid var(--border);
  }
  .al-tablo tr.al-satir > td { display: flex; justify-content: space-between; align-items: center; gap: 8px;
    height: auto; min-height: 24px; padding: 0; border: 0; white-space: normal; }
  .al-tablo tr.al-satir > td[data-ad]::before { content: attr(data-ad); color: var(--text-2); }
  .al-tablo tr.al-satir > td.al-k-urun { max-width: none; width: auto; padding-bottom: 8px; }
  .al-tablo tr.al-satir > td.al-hedef { background: none; font-size: 18px; line-height: 24px; padding: 4px 0; }
  .al-tablo tr.al-satir > td.al-kar:empty, .al-tablo tr.al-satir > td.al-roi-hucre:empty { display: none; }
  .al-tablo tbody tr:not(.al-satir) > td { display: block; }
  .al-alt { flex-direction: column; align-items: stretch; }
}