/* get.stopersolutions.com — Sepetim sayfası satır-liste görünümü (kullanıcı
   isteği, ekran görüntüsüyle netleşti: 2026-07-28). Tekliflerim'in kart-grid
   bileşeninden (dash-teklifler.js kartHtml) FARKLI, bu sayfaya özel. */

/* Sol/sağ boşluk artık RESPONSIVE (kullanıcı isteği: 2026-07-29, sabit piksel
   DEĞİL) — max-width + margin:auto ile geniş ekranda kendiliğinden ortalanıp
   büyük boşluk bırakır, dar ekranda max-width'in altına inince boşluk
   .dash-upload-area'nın kendi 28px padding'ine düşer (sola doğru "gider"). */
.dsl-wrap { display: flex; gap: 24px; align-items: flex-start; padding: 20px 0; max-width: 1440px; margin: 0 auto; }
.dsl-liste { flex: 1; min-width: 0; }
.dsl-ozet-col { width: 340px; flex-shrink: 0; }

/* ---- Kategori bölümü ---- */
.dsl-kategori { background: #fff; border: 1px solid var(--stoper-border); border-radius: 10px; margin-bottom: 18px; overflow: hidden; }
.dsl-kategori-baslik {
	display: flex; align-items: center; gap: 8px;
	background: var(--stoper-blue-bg); color: var(--stoper-blue);
	font-size: 14px; font-weight: 700;
	padding: 12px 16px;
}
.dsl-kategori-baslik i { font-size: 14px; }

/* ---- Satır ---- */
.dsl-satir { display: flex; align-items: flex-start; gap: 16px; padding: 16px; border-bottom: 1px solid var(--stoper-border); position: relative; }
.dsl-satir:last-child { border-bottom: 0; }

.dsl-thumb {
	width: 144px; height: 144px; flex-shrink: 0; border-radius: 8px;
	background: transparent; display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.dsl-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Sabit genişlik (flex:1 DEĞİL, kullanıcı isteği: 2026-07-29) — böylece
   isim/adet sütunu tüm boş alanı yutmaz, kalan alan .dsl-detay-wrap'a kalır
   ve .dsl-detay orada ORTALANIR (isim sütunu ile fiyat sütunu arasında). */
.dsl-info { width: 260px; flex-shrink: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.dsl-ad { font-size: 15px; font-weight: 700; color: #1d2939; margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsl-dims { font-size: 13px; color: var(--stoper-text); margin: 0 0 10px; }
/* (KÖK NEDEN — 2026-07-29) .dsl-info dikey bir flex konteyner OLDUĞUNDAN,
   align-items varsayılanı "stretch" — .dsl-adet (inline-flex olmasına rağmen
   bir flex ÇOCUĞU olarak) satırın TÜM genişliğine geriliyordu, kullanıcının
   işaretlediği uzun boş kutucuk buydu. align-self:flex-start ile sadece
   içeriği kadar genişlik alır. */
.dsl-adet { display: inline-flex; align-self: flex-start; align-items: center; border: 1px solid var(--stoper-border); border-radius: 8px; overflow: hidden; }
.dsl-adet button { width: 28px; height: 28px; border: 0; background: #fff; color: var(--stoper-text); font-size: 14px; cursor: pointer; }
.dsl-adet button:hover { background: var(--stoper-blue-bg); color: var(--stoper-blue); }
.dsl-adet input { width: 40px; height: 28px; border: 0; border-left: 1px solid var(--stoper-border); border-right: 1px solid var(--stoper-border); text-align: center; font-size: 13px; font-weight: 600; color: #1d2939; }

/* Kalan alanı kaplayan sarmalayıcı, içindeki sabit-genişlikli .dsl-detay'ı
   yatayda ORTALAR (kullanıcı isteği: 2026-07-29 — isim ile fiyat sütunları
   arasında eşit boşlukla ortalanmalı). */
.dsl-detay-wrap { flex: 1; min-width: 0; display: flex; justify-content: center; align-self: stretch; align-items: center; }
.dsl-detay { width: 230px; flex-shrink: 0; font-size: 13px; }
.dsl-detay-satir { padding: 2px 4px; margin: 0 -4px; color: #1d2939; cursor: pointer; border-radius: 4px; transition: background .12s, color .12s; }
.dsl-detay-satir:hover { background: var(--stoper-blue-bg); color: var(--stoper-blue); }
.dsl-detay-satir:hover .dsl-detay-label { color: var(--stoper-blue); }
.dsl-detay-satir .dsl-detay-label { color: var(--stoper-text); margin-right: 4px; }

.dsl-sag { width: 150px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; align-self: stretch; }
.dsl-ust-aksiyon { display: flex; align-items: center; gap: 10px; }
.dsl-check { width: 17px; height: 17px; cursor: pointer; margin: 0; flex-shrink: 0; }
.dsl-trash {
	width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	color: var(--stoper-text); font-size: 15px; cursor: pointer; background: none; border: 0; padding: 0;
}
.dsl-trash:hover { color: #c0392b; }
/* Not eklenmiş kartlarda GÖRÜNÜR ataş rozeti (kullanıcı isteği: 2026-07-30). */
.dsl-not-rozet {
	width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	color: var(--stoper-blue); font-size: 14px; cursor: pointer; background: var(--stoper-blue-bg); border: 0;
	border-radius: 50%; padding: 0;
}
.dsl-not-rozet:hover { background: var(--stoper-blue); color: #fff; }
.dsl-more-wrap { position: relative; }
.dsl-more-btn {
	width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	background: none; border: 0; color: var(--stoper-text); cursor: pointer; padding: 0;
}
.dsl-more-btn:hover { color: var(--stoper-blue); }
.dsl-more-btn .dt-uc-nokta span { background: var(--stoper-text); }
.dsl-more-wrap:hover .dsl-more-btn .dt-uc-nokta span { background: var(--stoper-blue); }
.dsl-more-menu {
	display: none; position: absolute; top: 24px; right: 0; z-index: 15;
	min-width: 170px; background: #fff; border: 1px solid var(--stoper-border);
	border-radius: 8px; box-shadow: 0 8px 24px rgba(29,41,57,.14); padding: 4px;
}
/* Kullanıcı isteği: 3-nokta üzerine GELİNCE (hover) açılsın — tıklama gerekmez.
   Boşluk (menü ile buton arası) fare hareketinde menünün erken kapanmaması için
   ::before ile köprüleniyor. */
.dsl-more-wrap::before {
	content: ''; position: absolute; top: 20px; right: 0; width: 100%; height: 10px;
}
.dsl-more-wrap:hover .dsl-more-menu { display: block; }
.dsl-more-menu button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 9px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; color: #1d2939; cursor: pointer; text-align: left; }
.dsl-more-menu button:hover { background: var(--stoper-blue-bg); color: var(--stoper-blue); }

.dsl-fiyat-blok { text-align: right; }
.dsl-fiyat { font-size: 18px; font-weight: 700; color: #1d2939; white-space: nowrap; }
.dsl-fiyat-alt { font-size: 12px; color: var(--stoper-text); }

/* ---- Sağ: Sipariş Özeti / İndirim Kodu ---- */
.dsl-ozet-kart { background: #fff; border: 1px solid var(--stoper-border); border-radius: 12px; padding: 20px; margin-bottom: 18px; }
.dsl-ozet-baslik { font-size: 18px; font-weight: 700; color: #1d2939; margin: 0 0 4px; }
.dsl-ozet-alt { font-size: 13px; color: var(--stoper-text); margin: 0; }
.dsl-ozet-hr { border: 0; border-top: 1px solid var(--stoper-border); margin: 16px 0; }
.dsl-ozet-satir { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #1d2939; margin-bottom: 10px; }
.dsl-ozet-satir:last-child { margin-bottom: 0; }
.dsl-ozet-satir .dsl-ozet-label { color: var(--stoper-text); }
.dsl-ozet-satir .dsl-ozet-deger { font-weight: 700; }
.dsl-genel-toplam { display: flex; justify-content: space-between; align-items: baseline; }
.dsl-genel-toplam-label { font-size: 20px; font-weight: 700; color: #1d2939; }
.dsl-genel-toplam-deger { font-size: 20px; font-weight: 700; color: #1d2939; }
.dsl-genel-alt { font-size: 12.5px; color: var(--stoper-text); margin: 4px 0 0; }
.dsl-odeme-btn {
	display: block; width: 100%; text-align: center; margin-top: 18px;
	background: var(--stoper-blue); color: #fff; border: 0; border-radius: 8px;
	padding: 14px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.dsl-odeme-btn:hover { background: #003f75; }
.dsl-odeme-btn:disabled { opacity: .5; cursor: not-allowed; }

.dsl-kupon-input-row { display: flex; gap: 8px; margin-top: 14px; }
.dsl-kupon-input-row input { flex: 1; border: 1px solid var(--stoper-border); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.dsl-kupon-btn { width: 100%; margin-top: 10px; background: #fff; color: var(--stoper-blue); border: 1px solid var(--stoper-blue); border-radius: 8px; padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer; }
.dsl-kupon-btn:hover { background: var(--stoper-blue-bg); }

/* Sepet boşken (JS .dsl-wrap-bos ekler): özet paneli gizli, boş mesajı hem
   DİKEYDE hem YATAYDA sayfanın ortasında (kullanıcı isteği: 2026-07-30).
   Yükseklik, .dash-upload-area'nın (middle-panel, height:100%) tamamını
   kaplayacak şekilde 100% + esnek min-height ile responsive. */
.dsl-wrap-bos {
	justify-content: center;
	align-items: center;
	min-height: calc(100vh - 130px); /* üst bar (~64px) + kendi dikey padding'i düşülür */
	padding: 0;
}
.dsl-wrap-bos .dsl-liste { flex: 0 1 auto; width: 100%; }
.dsl-bos {
	text-align: center; padding: 24px 20px; color: var(--stoper-text);
	max-width: 420px; margin: 0 auto;
}
.dsl-bos i { font-size: 44px; opacity: .35; margin-bottom: 14px; display: block; }
.dsl-bos a { color: var(--stoper-blue); font-weight: 600; text-decoration: none; display: inline-block; margin-top: 8px; }

@media (max-width: 991.98px) {
	.dsl-wrap { flex-direction: column; }
	.dsl-ozet-col { width: 100%; }
	.dsl-satir { flex-wrap: wrap; }
	.dsl-detay-wrap { width: 100%; order: 3; justify-content: flex-start; }
	.dsl-detay { width: 100%; }
	.dsl-sag { width: auto; order: 2; }
}

/* (2026-08-16) Telefon: 144px küçük resim + 260px sabit isim sütunu 375px
   ekrana sığmıyordu (isim alt satıra düşüp orantı bozuluyordu). */
@media (max-width: 576px) {
	.dsl-thumb { width: 96px; height: 96px; }
	.dsl-info { width: auto; flex: 1 1 auto; min-width: 0; }
}

/* (2026-08-04) MANUEL ONAY ROZETİ — kullanıcı isteği: manuel onay gerektiren
   parça hem sepetteki kartında hem ödeme özetinde BELİRGİN işaretlensin.
   Sepetim ve Tekliflerim kartları aynı sınıfı kullanır. */
.dsl-manuel-onay {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	padding: 3px 8px;
	border-radius: 999px;
	background: #fff4d6;
	border: 1px solid #f0c24b;
	color: #8a6d00;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}