/* =========================
   Sepet — FINAL (v7)
   4 sütun: Ürün | Adet | Tutar | Sil
   ========================= */

/* Kutu */
.sepet-wrap{
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  padding:12px;
}

/* TABLO — auto yerlesim (colgroup ile kontrol) */
.sepet-tablo{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
}
.sepet-tablo th,
.sepet-tablo td{
  padding:10px;
  border-bottom:1px solid #f0f1f3;
  text-align:left;
  vertical-align:middle;
}

/* colgroup genislikleri (HTML'de <col class="col-..."> ile) */
.col-urun  { width:auto; }   /* kalan alan her zaman Ürün'e */
.col-adet  { width:220px; }
.col-tutar { width:140px; }
.col-sil   { width:90px;  }

/* Ürün adi: dogal sarim; harf harf kirma yok */
.sepet-tablo td:nth-child(1){
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;   /* sadece uzun TEK kelimeyi kir */
  line-height:1.25;
  min-width:300px;            /* dar ekranda çökmesin */
}

/* Adet kontrol grubu */
.q-ctl{
  display:inline-flex;
  align-items:center;
  border:1px solid #e4e7ec;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.q-ctl button{
  width:30px; height:32px;
  border:0; background:#f6f7f9; cursor:pointer;
}
.q-ctl input{
  width:56px; height:32px;
  border:0; text-align:center; font-weight:700;
}

/* =========================
   ALT BÖLÜM
   ========================= */

/* Alt blok: özet üstte, butonlar altta */
.sepet-alt{
  display:block;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #eee;  /* tablo ile görsel ayrim */
}

/* ÖZET: tek satir "çiftler" (Toplam Adet: X  •  Genel Toplam: Y) */
.sepet-ozet{
  display:flex;
  align-items:baseline;
  gap:32px;                   /* çiftler arasi bosluk */
  margin-bottom:12px;
  flex-wrap:wrap;             /* dar ekranda ikinci satira izin ver */
}
.sepet-ozet .cift{
  display:inline-grid;
  grid-auto-flow:column;
  grid-auto-columns:max-content;
  column-gap:8px;
}
.sepet-ozet .etiket{ color:#6b7280; }
.sepet-ozet .deger{ font-weight:800; }

/* BUTONLAR: özetin altinda, soldan hizali */
/* === ALT BLOK — SON DÜZEN (ASKER GIBI) === */
.sepet-alt{
  display:block;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #eee;
}

/* Özet: iki sütun (Etiket | Deger) — iki farkli markup'i da destekle */
.sepet-ozet,
.sepet-toplam{
  display:grid;
  grid-template-columns:max-content 1fr;  /* etiket | deger */
  column-gap:12px;
  row-gap:6px;
  align-items:baseline;
  max-width:520px;                         /* tablonun altinda kompakt */
}

/* Eger .cift kullaniyorsan */
.sepet-ozet .cift{ display:contents; }     /* içindeki etiket/deger hücreye yayilir */
.sepet-ozet .etiket,
.sepet-toplam .etiket{ color:#6b7280; }
.sepet-ozet .deger,
.sepet-toplam .deger{ font-weight:800; justify-self:end; }

/* Eger eski yapidaysa (etiket/deger ardisik div'ler) */
.sepet-toplam > div:nth-child(odd){ color:#6b7280; }       /* etiket */
.sepet-toplam > div:nth-child(even){ font-weight:800; justify-self:end; } /* deger */

/* Butonlar: özetin ALTINDA, soldan hizali */
.sepet-btns,
.sepet-islem{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;              /* dar ekranda alt satira iner */
}
.btn{ height:42px; padding:0 16px; border-radius:12px; font-weight:800; }
.btn-ghost{ background:#fff; border:1px solid #e5e7eb; }
.btn-primary{ background:#f59e0b; color:#fff; }

/* =========================
   Bos sepet
   ========================= */
.sepet-bos{
  background:#fff;
  border:1px dashed #e5e7eb;
  border-radius:14px;
  padding:20px;
  text-align:center;
}

/* =========================
   Mobil uyarlamalar
   ========================= */
@media (max-width: 900px){
  .sepet-ozet{ gap:16px 24px; }      /* çiftler arasi bosluk azalt */
}

@media (max-width: 860px){
  .col-urun{ width:auto; }
  .col-adet, .col-tutar, .col-sil{ width:auto; }
  .sepet-tablo td:nth-child(1){ min-width:0; }
}
/* ===== TFOOT: özet + butonlar (tablonun içinde) ===== */
.sepet-tablo tfoot td{
  border-bottom: none;
  padding-top: 12px;
}

.sepet-tablo tfoot .tf-ozet td{
  padding: 10px 10px 6px;
  border-top: 1px solid #eee;       /* gövdeyle ayrim */
}

.sepet-tablo tfoot .tf-ozet .etiket{
  color:#6b7280;
  font-weight:600;
  text-align:left;
}
.sepet-tablo tfoot .tf-ozet .deger{
  font-weight:800;
  text-align:right;
}

.sepet-tablo tfoot .tf-btn .btn-hucre{
  padding: 8px 10px 14px;
}
.sepet-tablo tfoot .tf-btn .btn-hucre{
  display:flex;
  gap:10px;
  flex-wrap:wrap;                   /* dar ekranda alta iner */
}
.btn{ height:42px; padding:0 16px; border-radius:12px; font-weight:800; }
.btn-ghost{ background:#fff; border:1px solid #e5e7eb; }
.btn-primary{ background:#f59e0b; color:#fff; }

/* Mobil dokunus */
@media (max-width:900px){
  .sepet-tablo tfoot .tf-ozet .deger{ text-align:left; } /* dar ekranda düz hizala */
}