/*
Teklif Sepeti — çok ürünlü "Teklif Al" akışının localStorage tabanlı sepet parçası.
Sabit konumlu (floating action button) sayaç ikonu + sağdan kayan drawer paneli.
Desen: mini-cart-drawer.css ile aynı iskelet (backdrop + transform: translateX drawer),
ama bağımsız bir bileşen — mini-cart sınıflarına dokunulmaz, çakışma riski yok.
Aç/kapa + veri davranışı: assets/js/teklif-sepeti.js. Token kullanımı zorunlu (01-TASARIM-SISTEMI.md §1).
*/

/* ---------- .dga-btn-circle--outline — mevcut .dga-btn-circle'ın ikincil varyantı ----------
   product-card-spec.php'deki "Teklife ekle" butonu için: dolu kırmızı yerine kenarlıklı,
   böylece ana "Sepete ekle" ile görsel hiyerarşi karışmaz (button.css'teki .dga-btn-circle
   temel kutu/boyut kurallarını miras alır, sadece renk/arkaplan burada geçersiz kılınır). */
.dga-btn-circle--outline {
	background: transparent;
	border-color: var(--color-border-strong);
	color: var(--color-text);
}
.dga-btn-circle--outline:hover,
.dga-btn-circle--outline:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-surface);
	transform: translateY(-2px);
}

/* .dga-product-card__price-bar zemini --color-surface-dark: yukarıdaki koyu
   metin/kenarlık burada görünmez oluyordu ("dolu siyah daire" bugu). Bu
   bağlamda açık renge çevrilir, hover davranışı aynı kalır. */
.dga-product-card__price-bar .dga-btn-circle--outline {
	border-color: rgba(255, 255, 255, 0.35);
	color: var(--color-surface);
}

/* ---------- Sayaç ikonu (floating action button) ---------- */
.dga-teklif-sepeti-fab {
	position: fixed;
	right: var(--space-3);
	bottom: var(--space-3);
	z-index: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-icon);
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	color: var(--color-surface);
	cursor: pointer;
	box-shadow: var(--shadow-card);
	transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}
.dga-teklif-sepeti-fab:hover,
.dga-teklif-sepeti-fab:focus-visible {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	transform: translateY(-2px);
}

/* .dga-mobil-alt-nav (56px, mobile-bottom-nav.css) üzerinde kalır — scroll-top.css'teki AYNI
   offset deseni. Denetimde mobil mağaza gridinde FAB'ın ilk satır ürün kartının Hızlı Bakış
   ikonunu kısmen örttüğü bulundu; PDP'de sticky Sepete Ekle barı zaten kendi padding-right'ıyla
   (single-product.css) FAB'a yer açıyor, bu kural o düzeltmeyle çakışmaz. */
@media (max-width: 767.98px) {
	.dga-teklif-sepeti-fab {
		bottom: calc(56px + var(--space-2) + env(safe-area-inset-bottom));
	}
}
.dga-teklif-sepeti-fab svg {
	width: 24px;
	height: 24px;
	stroke: currentColor;
	stroke-width: 2px;
	fill: none;
}

.dga-teklif-sepeti-fab__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	border-radius: var(--radius-icon);
	background: var(--color-surface);
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.dga-teklif-sepeti-fab__badge[hidden] {
	display: none;
}

/* ---------- Drawer arkaplanı ---------- */
.dga-teklif-sepeti-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 19, 19, 0.5);
	z-index: 750;
	opacity: 0;
	transition: opacity var(--transition);
}
.dga-teklif-sepeti-backdrop.is-open {
	opacity: 1;
}

/* ---------- Drawer paneli ---------- */
.dga-teklif-sepeti-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100vw);
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	box-shadow: var(--shadow-header);
	z-index: 751;
	transform: translateX(100%);
	transition: transform var(--transition);
}
.dga-teklif-sepeti-drawer.is-open {
	transform: translateX(0);
}

.dga-teklif-sepeti-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--color-border);
	flex: none;
}
.dga-teklif-sepeti-drawer__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text);
}
.dga-teklif-sepeti-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-icon);
	border: 1px solid var(--color-border-strong);
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.dga-teklif-sepeti-drawer__close:hover,
.dga-teklif-sepeti-drawer__close:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-surface);
}
.dga-teklif-sepeti-drawer__close svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	stroke-width: 2px;
	fill: none;
}

.dga-teklif-sepeti-drawer__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.dga-teklif-sepeti-drawer__empty {
	margin: 0;
	padding: var(--space-4) var(--space-3);
	color: var(--color-text-muted);
	font-size: 14px;
}
.dga-teklif-sepeti-drawer__empty[hidden] {
	display: none;
}

.dga-teklif-sepeti-drawer__items {
	list-style: none;
	margin: 0;
	padding: 0 var(--space-3);
}
.dga-teklif-sepeti-drawer__items[hidden] {
	display: none;
}

.dga-teklif-sepeti-drawer__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-border);
}
.dga-teklif-sepeti-drawer__item:last-child {
	border-bottom: none;
}
.dga-teklif-sepeti-drawer__item-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.dga-teklif-sepeti-drawer__item-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-text);
	overflow-wrap: anywhere;
}
.dga-teklif-sepeti-drawer__item-qty {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--color-text-muted);
}
.dga-teklif-sepeti-drawer__item-remove {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 32px;
	padding-inline: var(--space-1);
	border: none;
	border-radius: var(--radius-tab);
	background: transparent;
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}
.dga-teklif-sepeti-drawer__item-remove:hover,
.dga-teklif-sepeti-drawer__item-remove:focus-visible {
	background: var(--color-primary-soft);
	color: var(--color-primary);
}

.dga-teklif-sepeti-drawer__footer {
	flex: none;
	padding: var(--space-3);
	border-top: 1px solid var(--color-border);
	background: var(--color-surface);
}
.dga-teklif-sepeti-drawer__submit {
	width: 100%;
}
.dga-teklif-sepeti-drawer__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Drawer açıkken arka plan kaydırmayı engelle (JS: document.body.classList) */
body.dga-teklif-sepeti-open {
	overflow: hidden;
}

@media (max-width: 480px) {
	.dga-teklif-sepeti-drawer {
		width: 100vw;
	}
}

/* Bu buton ekleme geri bildirimi sırasında geçici olarak metne döner (JS: textContent) */
.dga-product-card__teklif-btn.is-added-feedback {
	background: var(--color-stock);
	border-color: var(--color-stock);
	color: var(--color-surface);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: -0.02em;
	white-space: nowrap;
}