/**
 * MAĞAZA KATMANI — shop.css
 * ---------------------------------------------------------------------
 * ana.css'in ÜZERİNE yüklenir (bkz. functions.php, enqueue sırası).
 * Sadece e-ticarete özgü bileşenler burada: header araması, sepet,
 * ürün kartı, hesaplayıcı, numune bandı ve WooCommerce'in kendi
 * ekranlarına (sepet, checkout) yapılan uyum düzeltmeleri.
 *
 * NEDEN AYRI DOSYA: ana.css üç temada birden kullanılan ortak katman.
 * Mağazaya özgü kuralları oraya karıştırmak, ileride ana.css'i ortak
 * bir pakete taşımayı imkânsız hale getirirdi.
 *
 * RENK KULLANIMI — kural:
 *   --dpx-ana-renk (#1F1F1F) = taşıyıcı. Koyu bantlar, footer, yazı.
 *   --dpx-ikincil-renk (#F75B02) = VURGU. Buton, fiyat, rozet, sonuç
 *   sayısı. Geniş yüzeye YAYILMAZ — ürün fotoğrafları meşe/gri/beton
 *   tonunda, turuncu büyük alanda onlarla yarışır.
 */

:root {
	--dpx-yuzey: #FFFFFF;
	--dpx-yuzey-alt: #F6F5F3;      /* hafif sıcak gri — bölüm zeminleri */
	--dpx-cizgi: #E4E1DC;
	--dpx-soluk: #6E6A66;          /* ikincil metin */
	--dpx-yesil: #2E7D4F;          /* stok/teslim onayı — turuncuyla karışmasın */

	/* Ürün galerisi kutusunun sabit oranı. Müşteri "kutu daha kare
	   olsun" derse SADECE burayı çevirmek yeterli — galeri, küçük
	   resimler ve mobil kuralları hepsi bu değeri okuyor. */
	--dpx-galeri-oran: 4 / 3;
}

/* =====================================================================
 * ERİŞİLEBİLİRLİK
 * ===================================================================== */

.dpx-atlama-linki {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--dpx-ana-renk);
	color: #fff;
	text-decoration: none;
}

.dpx-atlama-linki:focus {
	left: 12px;
	top: 12px;
}

/* Klavye odağı her yerde görünür olsun — WooCommerce'in kendi
   formlarında outline sıklıkla sıfırlanıyor. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--dpx-ikincil-renk);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* =====================================================================
 * HEADER
 * ===================================================================== */

/* Üst şerit TURUNCU.
   Sitede turuncunun geniş yüzeye yayıldığı TEK yer burası ve
   sorun çıkarmıyor, çünkü şerit ince (32px) ve içinde ürün
   fotoğrafı yok — turuncunun ürünle yarışma riski yalnızca
   fotoğrafların yanında doğuyor. Header'ın kendisi beyaz kalmaya
   devam ediyor. */
.dpx-ust-serit {
	background: var(--dpx-ikincil-renk);
	color: #fff;
	font-size: 13px;
}

.dpx-ust-serit-ic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.dpx-ust-serit-vaatler {
	display: flex;
	min-width: 0;
	overflow: hidden;
}

.dpx-serit-ray {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
}

/* Masaüstünde kopyaya gerek yok: hepsi zaten sığıyor. */
.dpx-serit-ray--kopya {
	display: none;
}

.dpx-ust-serit-vaatler span,
.dpx-ust-serit-vaatler a {
	white-space: nowrap;
}

/* --- Mobilde kayan şerit ---------------------------------------------
   Maddeler alt alta düşüp şeridi üç satıra çıkarıyordu. Tek satırda,
   sağdan sola kayıyorlar; telefon numarası sabit kalıyor.

   ERİŞİLEBİLİRLİK: sürekli hareket eden metin WCAG'ye göre
   durdurulabilir olmalı. Dokunma/üzerine gelme hareketi durduruyor ve
   cihazda "hareketi azalt" açıksa animasyon hiç çalışmıyor — o durumda
   şerit parmakla kaydırılabilir bir listeye dönüyor. */
@media (max-width: 860px) {

	.dpx-ust-serit-ic {
		flex-wrap: nowrap;
		gap: 12px;
	}

	.dpx-ust-serit-vaatler {
		flex: 1 1 auto;
		min-width: 0;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
	}

	.dpx-serit-ray {
		flex-wrap: nowrap;
		flex: 0 0 auto;
		padding-right: 26px;
		animation: dpx-serit-kay 18s linear infinite;
	}

	.dpx-serit-ray--kopya {
		display: flex;
	}

	.dpx-ust-serit-vaatler:hover .dpx-serit-ray,
	.dpx-ust-serit-vaatler:focus-within .dpx-serit-ray {
		animation-play-state: paused;
	}

	.dpx-ust-telefon {
		flex: 0 0 auto;
	}
}

@keyframes dpx-serit-kay {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {

	.dpx-ust-serit-vaatler {
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.dpx-ust-serit-vaatler::-webkit-scrollbar {
		display: none;
	}

	.dpx-serit-ray {
		animation: none;
	}

	.dpx-serit-ray--kopya {
		display: none;
	}
}

.dpx-ust-serit-vaatler a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.45);
	text-underline-offset: 3px;
}

.dpx-ust-serit-vaatler a:hover {
	text-decoration-color: #fff;
}

.dpx-ust-telefon {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.dpx-ust-telefon svg {
	width: 15px;
	height: 15px;
}

.dpx-ust-telefon:hover {
	text-decoration: underline;
}

#site-header.dpx-header--shop {
	background: var(--dpx-yuzey);
	border-bottom: 1px solid var(--dpx-cizgi);
	position: relative;
}

.dpx-header-ic {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.dpx-logo {
	flex: 0 0 auto;
	line-height: 0;
}

.dpx-logo-metin {
	font-family: var(--dpx-baslik-font);
	font-weight: 800;
	font-size: 22px;
	color: var(--dpx-ana-renk);
	text-decoration: none;
}

/* --- Arama --- */
.dpx-arama {
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
	max-width: 560px;
	border: 1.5px solid var(--dpx-cizgi);
	border-radius: var(--dpx-buton-radius);
	overflow: hidden;
	background: var(--dpx-yuzey);
	transition: border-color 0.15s ease;
}

.dpx-arama:focus-within {
	border-color: var(--dpx-ana-renk);
}

.dpx-arama input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	padding: 11px 14px;
	font: inherit;
	font-size: 15px;
	background: transparent;
	outline: none;
}

.dpx-arama button {
	flex: 0 0 auto;
	width: 48px;
	border: 0;
	background: var(--dpx-ikincil-renk);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.dpx-arama button svg {
	width: 19px;
	height: 19px;
}

.dpx-arama button:hover {
	filter: brightness(0.93);
}

/* --- Sepet --- */
.dpx-header-eylemler {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

.dpx-sepet-link {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--dpx-ana-renk);
	border-radius: var(--dpx-buton-radius);
}

.dpx-sepet-link svg {
	width: 25px;
	height: 25px;
}

.dpx-sepet-link:hover {
	background: var(--dpx-yuzey-alt);
}

.dpx-hesap-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 44px;
	padding: 0 10px;
	color: var(--dpx-ana-renk);
	text-decoration: none;
	border-radius: var(--dpx-buton-radius);
	font-family: var(--dpx-baslik-font);
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}

.dpx-hesap-link svg {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

.dpx-hesap-link:hover {
	background: var(--dpx-yuzey-alt);
}

/* Giriş yapılmışsa ikonun köşesinde yeşil nokta. Metin de zaten
   "Mein Konto" oluyor, ama mobilde metin gizli — orada durumu bu
   nokta taşıyor. */
.dpx-hesap-link--girisli::after {
	content: "";
	position: absolute;
	top: 9px;
	left: 26px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dpx-yesil);
	box-shadow: 0 0 0 2px #fff;
}

.dpx-sepet-sayi {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--dpx-cizgi);
	color: var(--dpx-soluk);
	font-size: 11px;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
}

.dpx-sepet-sayi--dolu {
	background: var(--dpx-ikincil-renk);
	color: #fff;
}

/* --- Menü şeridi --- */
.dpx-menu-serit {
	border-top: 1px solid var(--dpx-cizgi);
	background: var(--dpx-yuzey);
}

.dpx-menu-serit .dpx-ana-menu > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dpx-menu-serit .dpx-ana-menu > ul > li > a {
	display: block;
	padding: 13px 14px;
	font-family: var(--dpx-baslik-font);
	font-weight: 600;
	font-size: 15px;
	color: var(--dpx-ana-renk);
	text-decoration: none;
	border-bottom: 3px solid transparent;
}

.dpx-menu-serit .dpx-ana-menu > ul > li > a:hover,
.dpx-menu-serit .dpx-ana-menu > ul > li.current-menu-item > a {
	border-bottom-color: var(--dpx-ikincil-renk);
}

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

.dpx-bolum {
	padding-top: 64px;
	padding-bottom: 64px;
}

/* TUZAK (tema-03'ten ders): .dpx-container ile aynı elemente kısayol
   padding vermek container'ın yan boşluğunu sıfırlıyor. Tekil
   padding-top/bottom kullanmak zorunlu. */

.dpx-bolum-basligi {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.dpx-bolum-basligi h2 {
	margin: 0;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--dpx-ana-renk);
}

.dpx-bolum-basligi p {
	margin: 6px 0 0;
	color: var(--dpx-soluk);
	max-width: 62ch;
}

.dpx-bolum-link {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--dpx-ana-renk);
	text-decoration: none;
	border-bottom: 2px solid var(--dpx-ikincil-renk);
	padding-bottom: 2px;
}

.dpx-bolum-link:hover {
	color: var(--dpx-ikincil-renk);
}

/* =====================================================================
 * GÜVEN ŞERİDİ
 * ===================================================================== */

.dpx-guven-serit {
	background: var(--dpx-yuzey-alt);
	border-bottom: 1px solid var(--dpx-cizgi);
}

.dpx-guven-ic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding-top: 22px;
	padding-bottom: 22px;
}

.dpx-guven-oge {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.dpx-guven-ikon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--dpx-yuzey);
	border: 1px solid var(--dpx-cizgi);
	color: var(--dpx-ikincil-renk);
}

.dpx-guven-ikon svg {
	width: 18px;
	height: 18px;
}

.dpx-guven-metin strong {
	display: block;
	font-family: var(--dpx-baslik-font);
	font-size: 15px;
	color: var(--dpx-ana-renk);
}

.dpx-guven-metin small {
	display: block;
	font-size: 13px;
	color: var(--dpx-soluk);
	line-height: 1.45;
}

/* =====================================================================
 * KATEGORİ ŞERİDİ — beş kart, yazı fotoğrafın altında
 * ---------------------------------------------------------------------
 * Yazı eskiden fotoğrafın üstündeydi ve okunması için karartma perdesi
 * gerekiyordu; perde de fotoğrafın yarısını yiyordu. Altına alınınca
 * fotoğraf temiz kalıyor, ad da daha okunaklı.
 *
 * Flex + wrap + justify-content:center: eksik kalan son satır
 * ortalanıyor ve kategori sayısı değişse de (4, 5, 7…) ek kural
 * gerekmiyor. Yön satır olduğu için flex-basis GENİŞLİK demek —
 * ref. dok. md. 7.6'daki dikey tuzak burada geçerli değil.
 * ===================================================================== */

.dpx-kategori-izgara {
	--dpx-kat-sutun: 5;
	--dpx-kat-bosluk: 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--dpx-kat-bosluk);
}

.dpx-kategori-izgara > .dpx-kategori-kart {
	flex: 0 0 calc((100% - (var(--dpx-kat-sutun) - 1) * var(--dpx-kat-bosluk)) / var(--dpx-kat-sutun));
	min-width: 0;
	display: block;
	text-decoration: none;
	text-align: center;
}

.dpx-kategori-gorsel {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-color: var(--dpx-yuzey-alt);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.dpx-kategori-gorsel--bos {
	background-image: linear-gradient(140deg, #45403d, #221f1d);
}

.dpx-kategori-kart:hover .dpx-kategori-gorsel,
.dpx-kategori-kart:focus-visible .dpx-kategori-gorsel {
	transform: translateY(-6px) scale(1.02);
	box-shadow: 0 16px 32px rgba(31, 31, 31, 0.20);
}

.dpx-kategori-ad {
	display: block;
	margin-top: 12px;
	font-family: var(--dpx-baslik-font);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	color: var(--dpx-ana-renk);
}

.dpx-kategori-kart:hover .dpx-kategori-ad {
	color: var(--dpx-ikincil-renk);
}

/* =====================================================================
 * HERO
 * ---------------------------------------------------------------------
 * Solda metin, sağda fotoğraf. Fotoğraf sağ kenara kadar taşıyor
 * (full-bleed); metin container hizasında kalıyor. Bunu tek bir grid
 * ile yapmak için bölüm tam genişlikte, sol sütun container'ın sol
 * boşluğu kadar iç dolgu alıyor.
 * ===================================================================== */

.dpx-hero {
	background: #F6F2EC;
	overflow: hidden;
}

.dpx-hero-ic {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	min-height: 460px;
}

/* TUZAK — bir kez canlıda yaşandı:
   Bu kutuya aynı anda max-width, justify-self:end ve ekran genişliğine
   bağlı büyük bir sol dolgu verilmişti. Üçü birbiriyle çarpışınca
   metin kutusu birkaç kelimelik bir şeride sıkışıyor, başlık kelime
   kelime alt satıra düşüyordu (2560px'lik ekranda sol dolgu tek
   başına 680px ediyordu).

   Doğrusu: sütun zaten ekranın yarısı; kutu o sütunu TAMAMEN
   kaplasın, hizalamayı yalnızca sol dolgu yapsın. 50vw - 600px,
   1200px'lik container'ın sol kenarına denk geliyor. */
.dpx-hero-metin {
	box-sizing: border-box;
	width: 100%;
	padding: 56px clamp(24px, 3vw, 48px) 56px max(24px, calc(50vw - 600px));
}

.dpx-hero-ust {
	margin: 0 0 10px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--dpx-soluk);
}

.dpx-hero-metin h1 {
	margin: 0 0 14px;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--dpx-ana-renk);
}

.dpx-hero-aciklama {
	margin: 0 0 22px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--dpx-soluk);
	max-width: 46ch;
}

.dpx-hero-butonlar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.dpx-hero-buton1 {
	background: var(--dpx-ikincil-renk);
	padding: 14px 26px;
	font-size: 15px;
}

.dpx-hero-buton1:hover {
	background: var(--dpx-ana-renk);
}

.dpx-hero-buton1 span {
	margin-left: 8px;
}

.dpx-hero-buton2 {
	display: inline-flex;
	align-items: center;
	padding: 14px 26px;
	border: 1.5px solid var(--dpx-cizgi);
	border-radius: var(--dpx-buton-radius);
	background: #fff;
	color: var(--dpx-ana-renk);
	font-family: var(--dpx-baslik-font);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}

.dpx-hero-buton2:hover {
	border-color: var(--dpx-ana-renk);
}

.dpx-hero-usp {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.dpx-hero-usp li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--dpx-soluk);
	line-height: 1.3;
	/* max-width VERİLMEZ: 15ch sınırı "Verlegeservice rund um Greven"i
	   üç satıra bölüyordu. Sığmazsa madde komple alt satıra iner. */
}

.dpx-hero-usp svg {
	width: 19px;
	height: 19px;
	color: var(--dpx-ana-renk);
	flex: 0 0 auto;
}

/* Görsel AKIŞTAN ÇIKARILDI (position:absolute).
   Akışta kalınca kendi doğal yüksekliğini dayatıyordu: 1600×1100'lük
   bir fotoğraf 1280px genişliğinde bir sütunda 880px yer kaplıyor ve
   hero 800 pikseli aşıyordu. Mutlak konumlandırılınca satır
   yüksekliğini metin ve min-height belirliyor, fotoğraf o alana
   kırpılarak oturuyor. */
.dpx-hero-gorsel {
	position: relative;
	align-self: stretch;
	min-height: 0;
}

.dpx-hero-gorsel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dpx-hero--gorselsiz .dpx-hero-ic {
	grid-template-columns: minmax(0, 1fr);
}

/* =====================================================================
 * NUMUNE BANDI — solda fotoğraf, sağda metin
 * ===================================================================== */

.dpx-muster-band {
	background: #F6F2EC;
	overflow: hidden;
}

.dpx-muster-band-ic {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: center;
	min-height: 340px;
}

.dpx-muster-gorsel {
	position: relative;
	align-self: stretch;
	min-height: 0;
}

.dpx-muster-gorsel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dpx-muster-metin {
	box-sizing: border-box;
	width: 100%;
	/* Hero'nun aynası: hizalayan dolgu bu kez SAĞDA. */
	padding: 44px max(24px, calc(50vw - 600px)) 44px clamp(24px, 3vw, 48px);
}

.dpx-muster-metin h2 {
	margin: 0 0 10px;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--dpx-ana-renk);
}

.dpx-muster-metin p {
	margin: 0 0 20px;
	font-size: 16px;
	color: var(--dpx-soluk);
	max-width: 44ch;
}

.dpx-muster-metin .dpx-buton {
	background: var(--dpx-ikincil-renk);
	padding: 13px 24px;
}

.dpx-muster-metin .dpx-buton:hover {
	background: var(--dpx-ana-renk);
}

.dpx-muster-metin .dpx-buton span {
	margin-left: 8px;
}

.dpx-muster-band--gorselsiz .dpx-muster-band-ic {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1024px) {

	.dpx-kategori-izgara {
		--dpx-kat-sutun: 3;
	}

	.dpx-hero-ic,
	.dpx-muster-band-ic {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	/* Mobilde fotoğraf metnin ÜSTÜNE geçiyor: önce ne sattığımız
	   görünsün, sonra metin okunsun. */
	.dpx-hero-metin,
	.dpx-muster-metin {
		order: 2;
		max-width: none;
		justify-self: stretch;
		padding: 32px 24px 36px;
	}

	/* Görsel mutlak konumlandığı için yüksekliği kendisi veremez;
	   oran kutusu burada zorunlu. */
	.dpx-hero-gorsel,
	.dpx-muster-gorsel {
		order: 1;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 640px) {

	.dpx-kategori-izgara {
		--dpx-kat-sutun: 2;
		--dpx-kat-bosluk: 10px;
	}

	.dpx-kategori-ad {
		margin-top: 9px;
		font-size: 14.5px;
	}

	/* Tek başına kalan son kart iki sütunu birden kaplasın.
	   Beş kategori iki sütuna dizilince sonuncusu yarım genişlikte
	   ortada asılı kalıyordu. :last-child:nth-child(odd) tam olarak
	   "satırda tek kalan" durumunu yakalıyor: kategori sayısı çift
	   olursa kural kendiliğinden devre dışı kalıyor, ek bir şey
	   yapmak gerekmiyor.

	   Görsel de kareden yatay orana geçiyor; tam genişlikte kare bir
	   kart ekranın yarısını kaplardı. */
	.dpx-kategori-izgara > .dpx-kategori-kart:last-child:nth-child(odd) {
		flex-basis: 100%;
	}

	.dpx-kategori-izgara > .dpx-kategori-kart:last-child:nth-child(odd) .dpx-kategori-gorsel {
		aspect-ratio: 16 / 9;
	}

	.dpx-hero-usp li {
		max-width: none;
		flex: 1 1 100%;
	}
}

/* =====================================================================
 * ÜRÜN IZGARASI VE KART
 * ===================================================================== */

ul.products.dpx-urun-izgara,
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none; /* WooCommerce'in eski float clearfix'i grid'i bozuyor */
}

li.dpx-urun-kart {
	display: flex;
	flex-direction: column;
	background: var(--dpx-yuzey);
	border: 1px solid var(--dpx-cizgi);
	border-radius: 4px;
	overflow: hidden;
	width: auto !important; /* WooCommerce columns-N yüzdelik genişliği */
	margin: 0 !important;
	float: none !important;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

li.dpx-urun-kart:hover {
	border-color: #c9c5bf;
	box-shadow: 0 6px 20px rgba(31, 31, 31, 0.07);
}

.dpx-kart-gorsel {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--dpx-yuzey-alt);
}

.dpx-kart-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dpx-kart-rozet {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 9px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #fff;
	background: var(--dpx-ana-renk);
}

.dpx-kart-rozet--indirim {
	background: var(--dpx-ikincil-renk);
}

/* İki rozet aynı anda çıkabilir (indirimli VE numuneli). İkincisi
   alta iner, üst üste binmesin. */
.dpx-kart-rozet--bestseller {
	background: var(--dpx-ana-renk);
}

.dpx-kart-rozet--muster {
	top: auto;
	bottom: 10px;
	background: rgba(31, 31, 31, 0.88);
	font-weight: 600;
}

.dpx-kart-govde {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 15px 16px;
	flex: 1 1 auto;
}

.dpx-kart-kategori {
	margin: 0;
	font-size: 12px;
	color: var(--dpx-soluk);
}

.dpx-kart-baslik {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.dpx-kart-baslik a {
	color: var(--dpx-ana-renk);
	text-decoration: none;
}

.dpx-kart-baslik a:hover {
	color: var(--dpx-ikincil-renk);
}

.dpx-kart-sku {
	margin: 0;
	font-size: 12px;
	color: #9a9691;
	font-variant-numeric: tabular-nums;
}

.dpx-kart-fiyat {
	margin-top: auto;
	padding-top: 10px;
}

/* Büyük olan BİRİM fiyat (€/m²). Alman müşteri zemini metrekare
   fiyatıyla karşılaştırıyor; paket fiyatını öne çıkarmak bizi
   rakiplerden pahalı gösteriyor. */
.dpx-kart-birim-fiyat {
	display: block;
	font-family: var(--dpx-baslik-font);
	font-size: 22px;
	font-weight: 700;
	color: var(--dpx-ana-renk);
	line-height: 1.15;
}

.dpx-kart-birim-fiyat del {
	font-size: 15px;
	font-weight: 500;
	color: #a8a39d;
	margin-right: 6px;
}

.dpx-kart-birim-fiyat ins {
	text-decoration: none;
	color: var(--dpx-ikincil-renk);
}

.dpx-kart-paket-fiyat {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--dpx-soluk);
}

.dpx-kart-paket-fiyat del {
	margin-right: 4px;
}

.dpx-kart-lieferzeit {
	margin: 0;
}

.dpx-lieferzeit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--dpx-soluk);
}

.dpx-lieferzeit-nokta {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dpx-yesil);
	flex: 0 0 auto;
}

li.dpx-urun-kart .dpx-kart-sepet,
li.dpx-urun-kart a.button {
	display: block;
	margin-top: 12px;
	padding: 10px 14px;
	text-align: center;
	background: var(--dpx-ana-renk);
	color: #fff;
	border-radius: var(--dpx-buton-radius);
	font-family: var(--dpx-baslik-font);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

li.dpx-urun-kart .dpx-kart-sepet:hover,
li.dpx-urun-kart a.button:hover {
	background: var(--dpx-ikincil-renk);
}

li.dpx-urun-kart a.added_to_cart {
	display: block;
	margin-top: 6px;
	text-align: center;
	font-size: 13px;
	color: var(--dpx-ikincil-renk);
}

/* =====================================================================
 * FİYAT DETAYI (ürün sayfası)
 * ===================================================================== */

.dpx-fiyat-detay {
	margin: 4px 0 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13.5px;
	color: var(--dpx-soluk);
}

.dpx-grundpreis {
	font-family: var(--dpx-baslik-font);
	font-size: 17px;
	font-weight: 700;
	color: var(--dpx-ana-renk);
	margin-right: 10px;
}

.dpx-mwst-hinweis a {
	color: var(--dpx-soluk);
}

/* =====================================================================
 * m² HESAPLAYICI
 * ---------------------------------------------------------------------
 * Sayfanın cesur olduğu tek yer burası. Geri kalan her şey sakin
 * kalsın diye bilinçli: koyu zemin + tek büyük turuncu sayı.
 * ===================================================================== */

.dpx-rechner {
	border: 1.5px solid var(--dpx-cizgi);
	border-radius: 6px;
	padding: 18px;
	margin-bottom: 22px;
	background: var(--dpx-yuzey-alt);
}

.dpx-rechner-baslik h3 {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	color: var(--dpx-ana-renk);
}

.dpx-rechner-baslik p {
	margin: 0 0 14px;
	font-size: 13.5px;
	color: var(--dpx-soluk);
}

.dpx-rechner-girdi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.dpx-rechner-girdi label {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dpx-ana-renk);
	/* TUZAK (tema-03, madde 7.6): flex kapsayıcı dikey olunca
	   flex-basis YÜKSEKLİK anlamına geliyor. Burada grid kullanıldı,
	   o yüzden aynı hataya düşülemez. */
}

.dpx-rechner-alan {
	display: flex;
	align-items: stretch;
	border: 1.5px solid var(--dpx-cizgi);
	border-radius: var(--dpx-buton-radius);
	background: #fff;
	overflow: hidden;
}

.dpx-rechner-alan:focus-within {
	border-color: var(--dpx-ana-renk);
}

.dpx-rechner-alan input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	padding: 10px 12px;
	font: inherit;
	font-size: 16px; /* 16px altı iOS'ta sayfayı zumluyor */
	outline: none;
	background: transparent;
}

.dpx-rechner-birim {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	padding: 0 12px;
	background: var(--dpx-yuzey-alt);
	color: var(--dpx-soluk);
	font-size: 14px;
	border-left: 1px solid var(--dpx-cizgi);
}

.dpx-rechner-girdi select {
	padding: 10px 12px;
	border: 1.5px solid var(--dpx-cizgi);
	border-radius: var(--dpx-buton-radius);
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: var(--dpx-ana-renk);
}

.dpx-rechner-sonuc {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed var(--dpx-cizgi);
}

.dpx-rechner-sayi {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.dpx-rechner-sayi strong {
	font-family: var(--dpx-baslik-font);
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	color: var(--dpx-ikincil-renk);
	font-variant-numeric: tabular-nums;
}

.dpx-rechner-sayi span {
	font-family: var(--dpx-baslik-font);
	font-size: 17px;
	font-weight: 600;
	color: var(--dpx-ana-renk);
}

.dpx-rechner-aciklama {
	margin: 8px 0 14px;
	font-size: 13.5px;
	color: var(--dpx-soluk);
	max-width: 58ch;
}

.dpx-rechner-uygula {
	background: var(--dpx-ikincil-renk);
}

/* --- Anasayfa bandı: koyu varyant --- */
.dpx-rechner-band {
	background: var(--dpx-ana-renk);
	color: #fff;
}

.dpx-rechner-band-ic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	align-items: center;
	padding-top: 56px;
	padding-bottom: 56px;
}

.dpx-rechner-band-metin h2 {
	margin: 0 0 12px;
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: #fff;
}

.dpx-rechner-band-metin p {
	margin: 0;
	color: rgba(255, 255, 255, 0.74);
	max-width: 52ch;
}

.dpx-rechner--band {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.16);
	margin-bottom: 0;
}

.dpx-rechner--band .dpx-rechner-girdi {
	grid-template-columns: 1fr 1fr;
}

.dpx-rechner--band .dpx-rechner-girdi label {
	color: rgba(255, 255, 255, 0.85);
}

/* Fire seçimi tam satır kaplasın — iki ölçü kutusunun altında. */
.dpx-rechner--band .dpx-rechner-girdi label:last-child {
	grid-column: 1 / -1;
}

.dpx-rechner--band .dpx-rechner-alan,
.dpx-rechner--band .dpx-rechner-girdi select {
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.dpx-rechner--band .dpx-rechner-alan input {
	color: #fff;
}

.dpx-rechner--band .dpx-rechner-alan input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.dpx-rechner--band .dpx-rechner-birim {
	background: rgba(255, 255, 255, 0.08);
	border-left-color: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.75);
}

.dpx-rechner--band .dpx-rechner-sonuc {
	border-top-color: rgba(255, 255, 255, 0.2);
}

.dpx-rechner--band .dpx-rechner-sayi span {
	color: #fff;
}

.dpx-rechner--band .dpx-rechner-aciklama {
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 0;
}

/* =====================================================================
 * NUMUNE (MUSTER)
 * ===================================================================== */

.dpx-muster-buton {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	padding: 13px 16px;
	border: 1.5px dashed var(--dpx-ikincil-renk);
	border-radius: var(--dpx-buton-radius);
	background: rgba(247, 91, 2, 0.05);
	text-decoration: none;
	color: var(--dpx-ana-renk);
}

.dpx-muster-buton:hover {
	background: rgba(247, 91, 2, 0.1);
}

.dpx-muster-ikon {
	flex: 0 0 auto;
	color: var(--dpx-ikincil-renk);
}

.dpx-muster-ikon svg {
	width: 24px;
	height: 24px;
}

.dpx-muster-metin strong {
	display: block;
	font-family: var(--dpx-baslik-font);
	font-size: 15px;
}

.dpx-muster-metin small {
	display: block;
	font-size: 12.5px;
	color: var(--dpx-soluk);
}

.dpx-muster-rozet {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 3px;
	background: var(--dpx-ikincil-renk);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.dpx-muster-bedava {
	font-weight: 700;
	color: var(--dpx-yesil);
}

/* =====================================================================
 * VERLEGESERVICE
 * ===================================================================== */

.dpx-verlege {
	padding-top: 64px;
	padding-bottom: 64px;
}

.dpx-verlege-ic {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 48px;
	align-items: center;
}

.dpx-verlege-metin h2 {
	margin: 0 0 12px;
	font-size: clamp(26px, 3.2vw, 34px);
	font-weight: 700;
	letter-spacing: -0.015em;
}

.dpx-verlege-metin p {
	margin: 0 0 20px;
	color: var(--dpx-soluk);
	max-width: 56ch;
}

.dpx-verlege-gorseller {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 12px;
	height: 100%;
	min-height: 300px;
}

.dpx-verlege-gorseller img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

.dpx-verlege-gorseller img:first-child {
	grid-row: 1 / 3;
}

/* =====================================================================
 * WOOCOMMERCE EKRAN UYUMU
 * ---------------------------------------------------------------------
 * Sepet, checkout ve ürün detayı WooCommerce'in kendi markup'ıyla
 * geliyor. Burada tema diline çekiliyorlar — şablonları kopyalamadan.
 * ===================================================================== */

.dpx-woo-icerik {
	padding-top: 44px;
	padding-bottom: 64px;
}

.woocommerce div.product .product_title {
	font-size: clamp(24px, 3vw, 33px);
	font-weight: 700;
	letter-spacing: -0.015em;
	margin-bottom: 8px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--dpx-baslik-font);
	font-size: 28px;
	font-weight: 700;
	color: var(--dpx-ana-renk);
}

.woocommerce div.product p.price ins {
	text-decoration: none;
	color: var(--dpx-ikincil-renk);
}

.woocommerce div.product p.price del {
	font-size: 19px;
	color: #a8a39d;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt,
.woocommerce button.button.alt {
	background: var(--dpx-ana-renk);
	color: #fff;
	border-radius: var(--dpx-buton-radius);
	font-family: var(--dpx-baslik-font);
	font-weight: 600;
	padding: 12px 24px;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--dpx-ikincil-renk);
	color: #fff;
}

/* "Sepete ekle" ana eylem — turuncu, çünkü sayfadaki tek asıl amaç o. */
.woocommerce div.product form.cart button.single_add_to_cart_button {
	background: var(--dpx-ikincil-renk);
	font-size: 16px;
	padding: 14px 30px;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
	background: var(--dpx-ana-renk);
}

.woocommerce .quantity .qty {
	padding: 12px 8px;
	border: 1.5px solid var(--dpx-cizgi);
	border-radius: var(--dpx-buton-radius);
	font-size: 16px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-radius: 4px 4px 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: #fff;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--dpx-ikincil-renk);
	border-radius: 4px;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--dpx-ikincil-renk);
}

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	padding: 9px 12px;
	border: 1.5px solid var(--dpx-cizgi);
	border-radius: var(--dpx-buton-radius);
	background: #fff;
	font: inherit;
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	gap: 6px;
	display: flex;
	justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--dpx-cizgi);
	border-radius: 4px;
	padding: 8px 14px;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--dpx-ana-renk);
	color: #fff;
	border-color: var(--dpx-ana-renk);
}

/* =====================================================================
 * ÜRÜN GALERİSİ
 * ---------------------------------------------------------------------
 * ÇÖZÜLEN İKİ SORUN:
 *
 * 1) SAYFA ZIPLAMASI
 *    Aynı ürüne biri yatay biri dikey fotoğraf yüklendiğinde galeri
 *    kutusu her görsel değişiminde yeniden boyutlanıyor, dikey
 *    fotoğrafa geçilince sayfa aşağı doğru uzuyor ve "Sepete ekle"
 *    butonu katlamanın altına kayıyordu. En kötüsü bu: kullanıcı
 *    fotoğrafa baktı diye satın alma butonunu kaybediyor.
 *
 *    ÖZGÜLLÜK NOTU: aşağıdaki seçicilerin hepsinde "div.images"
 *    var. WooCommerce kendi galeri kurallarını
 *    ".woocommerce div.product div.images ..." biçiminde yazıyor
 *    (0,4,x); "div.images" olmadan bizim kurallarımız 0,3,x kalıp
 *    eziliyor. Özellikle .flex-control-thumbs'ın margin:0 kuralı bu
 *    yüzden geçmiyordu — "küçük resimlerle arada boşluk yok"
 *    şikâyetinin sebebi buydu, float değil.
 *
 *    Çözüm: kutu SABİT ORANDA (--dpx-galeri-oran), görseller
 *    object-fit: contain ile ortalanıyor. Dikey fotoğrafın kenarları
 *    beyaz kalıyor — kırpmaktansa bu iyi, çünkü zemin ve panel
 *    fotoğraflarında kenarı kırpmak deseni yalan söyletiyor. Detay
 *    ihtiyacı lightbox'ta karşılanıyor.
 *
 *    NOT: object-fit kullanıldığı için jQuery zoom eklentisi devre
 *    dışı bırakıldı (functions.php). Zoom, object-fit'i tanımıyor ve
 *    büyütmeyi beyaz kenarlar dahil kutunun tamamına yayıyor.
 *
 * 2) KÜÇÜK RESİMLERLE ARADA BOŞLUK YOKTU
 *    WooCommerce küçük resimleri float ile diziyor ve ana görsele
 *    yapıştırıyor. Float bırakıldı, yerine grid kullanıldı — hem üst
 *    boşluk hem aralar kontrol altına girdi.
 * ===================================================================== */

.dpx-urun-breadcrumb {
	margin-bottom: 18px;
}

.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery {
	margin-bottom: 0;
}

/* --- Ana görsel: sabit oranlı kutu --- */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
	aspect-ratio: var(--dpx-galeri-oran);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--dpx-cizgi);
	border-radius: 4px;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	/* contain = kırpma yok, oran korunur, artan yer beyaz kalır */
	object-fit: contain;
	object-position: center;
	/* WooCommerce img'e inline width/height basıyor; ezilmesi şart */
	max-width: 100%;
	max-height: 100%;
}

/* Flexslider viewport'u slaytların en uzununa göre şişmesin — tüm
   slaytlar zaten aynı oranda, ama tarayıcı yuvarlamasından 1-2px
   fark çıkabiliyor ve o da titreme olarak görünüyor. */
.woocommerce div.product div.images .flex-viewport {
	border-radius: 4px;
}

/* Tam ekran (lightbox) tetikleyicisi — köşede, görselin üstünde */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	top: 12px;
	right: 12px;
	left: auto;
	z-index: 9;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--dpx-cizgi);
	color: var(--dpx-ana-renk);
	box-shadow: 0 2px 8px rgba(31, 31, 31, 0.12);
	font-size: 0; /* WooCommerce'in kendi büyüteç karakterini gizle */
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
	content: "";
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-radius: 50%;
	position: static;
	margin: 0;
	background: none;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
	content: "";
	position: absolute;
	right: 9px;
	bottom: 9px;
	width: 9px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transform: rotate(45deg);
	transform-origin: right center;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover {
	background: #fff;
	border-color: var(--dpx-ikincil-renk);
	color: var(--dpx-ikincil-renk);
}

/* --- Küçük resim şeridi --- */
.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	/* Ana görselle arasındaki boşluk — asıl şikâyet buydu */
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	overflow: visible;
}

.woocommerce div.product div.images .flex-control-thumbs::after {
	content: none; /* WooCommerce'in float clearfix'i grid'i bozuyor */
}

.woocommerce div.product div.images .flex-control-thumbs li {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	width: 100%;
	/* Küçük resimler de contain: yatay/dikey karışık yüklenen bir
	   üründe kare kırpma dikey fotoğrafın ortasından bir şerit
	   gösteriyor ve hangi görsel olduğu anlaşılmıyor. */
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--dpx-cizgi);
	border-radius: 3px;
	opacity: 1;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.woocommerce div.product div.images .flex-control-thumbs img:hover {
	border-color: #b9b4ad;
}

.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
	border-color: var(--dpx-ikincil-renk);
	border-width: 2px;
}

/* Tek görselli üründe şerit hiç çizilmez; WooCommerce boş <ol>
   bırakabiliyor ve o da 12px boşluk olarak görünüyor. */
.woocommerce div.product div.images .flex-control-thumbs:empty {
	display: none;
}

/* =====================================================================
 * KATALOG DÜZENİ VE FİLTRELER
 * ---------------------------------------------------------------------
 * Masaüstünde solda sabit kenar çubuğu, mobilde soldan açılan çekmece.
 * Aynı HTML iki düzende de kullanılıyor — filtre kutusu ikinci kez
 * basılmıyor. Bunun bedeli şu: çekmece açıldığında kenar çubuğunun
 * kendisi konumlandırılıyor, o yüzden position/transform kuralları
 * sadece mobil kesitte tanımlı.
 * ===================================================================== */

.dpx-katalog {
	display: grid;
	grid-template-columns: 262px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.dpx-katalog-icerik {
	min-width: 0; /* grid çocuğunun taşmasını engeller */
}

/* EMNİYET AĞI — PHP tarafı bir daha aynı hatayı yaparsa görünüm
   çökmesin. Kenar çubuğu herhangi bir sebeple basılmazsa içerik tek
   başına kalır; o zaman 262 piksellik ilk sütuna sıkışmak yerine
   satırın tamamını kaplar. Bir kez bu yüzden ürün kartları 55px'e
   düştü; kural ucuz, tekrarı pahalı. */
.dpx-katalog > .dpx-katalog-icerik:only-child {
	grid-column: 1 / -1;
}

/* --- Kenar çubuğu --- */
.dpx-filtre {
	position: sticky;
	top: 16px;
	background: var(--dpx-yuzey);
	border: 1px solid var(--dpx-cizgi);
	border-radius: 5px;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px); /* mobil adres çubuğu için */
	overflow-y: auto;
	overscroll-behavior: contain;
}

.dpx-filtre-form {
	display: flex;
	flex-direction: column;
}

.dpx-filtre-ust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--dpx-cizgi);
	position: sticky;
	top: 0;
	background: var(--dpx-yuzey);
	z-index: 2;
}

.dpx-filtre-ust h2 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--dpx-ana-renk);
}

/* Kapatma düğmesi sadece mobil çekmecede anlamlı. */
.dpx-filtre-kapat {
	display: none;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: var(--dpx-soluk);
	cursor: pointer;
	padding: 0 4px;
}

/* --- Filtre grubu --- */
.dpx-filtre-grup {
	padding: 14px 16px;
	border-bottom: 1px solid var(--dpx-cizgi);
}

.dpx-filtre-grup:last-child {
	border-bottom: 0;
}

.dpx-filtre-grup h3 {
	margin: 0 0 9px;
	font-size: 13px;
	font-weight: 700;
	color: var(--dpx-ana-renk);
}

.dpx-filtre-secenekler {
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* Çok terimli bir grupta (Marke, Kollektion) liste kenar çubuğunu
	   metrelerce uzatıyordu. Kendi içinde kayıyor. */
	max-height: 232px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.dpx-filtre-secenek {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 4px;
	border-radius: 3px;
	font-size: 13.5px;
	color: var(--dpx-ana-renk);
	cursor: pointer;
	line-height: 1.3;
}

.dpx-filtre-secenek:hover {
	background: var(--dpx-yuzey-alt);
}

.dpx-filtre-secenek input[type="checkbox"] {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--dpx-ikincil-renk);
	cursor: pointer;
}

.dpx-filtre-metin {
	flex: 1 1 auto;
	min-width: 0;
}

.dpx-filtre-sayi {
	flex: 0 0 auto;
	font-size: 12px;
	color: #9a9691;
	font-variant-numeric: tabular-nums;
}

/* --- Renk kutucukları --- */
.dpx-filtre-renk {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	/* İç gölge, açık renkleri (Weiß, Beige) beyaz zeminde görünür
	   tutuyor; dıştan border vermek koyu renklerde halka etkisi
	   yapıyordu. */
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

.dpx-filtre-grup--renk .dpx-filtre-secenek input:checked ~ .dpx-filtre-renk {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 0 0 2px var(--dpx-ikincil-renk);
}

/* --- Aralık (von / bis) --- */
.dpx-filtre-aralik {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dpx-filtre-aralik label {
	flex: 1 1 0;
	min-width: 0;
}

.dpx-filtre-aralik input {
	width: 100%;
	min-width: 0;
	padding: 8px 9px;
	border: 1.5px solid var(--dpx-cizgi);
	border-radius: var(--dpx-buton-radius);
	font: inherit;
	font-size: 16px; /* 16px altı iOS'ta sayfayı zumluyor */
	background: #fff;
	color: var(--dpx-ana-renk);
}

.dpx-filtre-aralik input:focus {
	outline: none;
	border-color: var(--dpx-ana-renk);
}

.dpx-filtre-aralik-ayrac,
.dpx-filtre-birim {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--dpx-soluk);
}

/* --- "Weitere Filter" --- */
.dpx-filtre-ekstra {
	border-bottom: 1px solid var(--dpx-cizgi);
}

.dpx-filtre-ekstra > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 16px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--dpx-ana-renk);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.dpx-filtre-ekstra > summary::-webkit-details-marker {
	display: none;
}

.dpx-filtre-ekstra > summary:hover {
	background: var(--dpx-yuzey-alt);
}

.dpx-filtre-ok {
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--dpx-soluk);
	border-bottom: 2px solid var(--dpx-soluk);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.18s ease;
}

.dpx-filtre-ekstra[open] .dpx-filtre-ok {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.dpx-filtre-ekstra-ic .dpx-filtre-grup {
	border-top: 1px solid var(--dpx-cizgi);
	border-bottom: 0;
}

/* --- Alt eylemler --- */
.dpx-filtre-alt {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px;
	border-top: 1px solid var(--dpx-cizgi);
}

/* Buton her düzende görünür kalıyor.
   Masaüstünde onay kutusu seçildiği an JavaScript formu gönderdiği
   için buton çoğu zaman gereksiz — ama sayı kutuları (von/bis)
   otomatik gönderilmiyor, onların gönderimi bu butona bağlı. JS
   kapalıysa da tek çalışan yol bu. İkisi birden düşünülünce butonu
   gizlemek kazançtan çok risk. */
.dpx-filtre-uygula {
	width: 100%;
	text-align: center;
}

.dpx-filtre-sifirla {
	text-align: center;
	font-size: 13px;
	color: var(--dpx-soluk);
	text-decoration: underline;
}

.dpx-filtre-sifirla:hover {
	color: var(--dpx-ikincil-renk);
}

/* =====================================================================
 * KATALOG ARAÇ ÇUBUĞU
 * ===================================================================== */

.dpx-katalog-arac {
	margin-bottom: 18px;
}

.dpx-katalog-arac-ust {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--dpx-cizgi);
}

.dpx-katalog-sonuc {
	flex: 1 1 auto;
	font-size: 13.5px;
	color: var(--dpx-soluk);
	margin: 0;
}

.dpx-katalog-sonuc p {
	margin: 0;
}

.dpx-katalog-sirala {
	flex: 0 0 auto;
}

.dpx-katalog-sirala form {
	margin: 0;
}

.dpx-katalog-sirala select {
	padding: 9px 12px;
	border: 1.5px solid var(--dpx-cizgi);
	border-radius: var(--dpx-buton-radius);
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: var(--dpx-ana-renk);
	cursor: pointer;
}

/* Mobil butonlar masaüstünde gizli */
.dpx-mobil-buton {
	display: none;
	align-items: center;
	gap: 7px;
	padding: 10px 14px;
	border: 1.5px solid var(--dpx-cizgi);
	border-radius: var(--dpx-buton-radius);
	background: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--dpx-ana-renk);
	cursor: pointer;
}

.dpx-mobil-buton svg {
	width: 17px;
	height: 17px;
}

.dpx-mobil-rozet {
	display: inline-grid;
	place-items: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--dpx-ikincil-renk);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

/* --- Aktif filtre çipleri --- */
.dpx-aktif-filtreler {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	padding-top: 12px;
}

.dpx-aktif-baslik {
	font-size: 13px;
	color: var(--dpx-soluk);
	margin-right: 2px;
}

.dpx-cip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 10px;
	border: 1px solid var(--dpx-cizgi);
	border-radius: 999px;
	background: var(--dpx-yuzey-alt);
	font-size: 13px;
	color: var(--dpx-ana-renk);
	text-decoration: none;
	line-height: 1.3;
}

.dpx-cip:hover {
	border-color: var(--dpx-ikincil-renk);
	color: var(--dpx-ikincil-renk);
}

.dpx-cip-x {
	font-size: 15px;
	line-height: 1;
	color: var(--dpx-soluk);
}

.dpx-cip:hover .dpx-cip-x {
	color: var(--dpx-ikincil-renk);
}

.dpx-cip--sifirla {
	background: none;
	border-style: dashed;
	color: var(--dpx-soluk);
}

/* =====================================================================
 * MOBİL ÇEKMECE
 * ===================================================================== */

/* TUZAK — referans doküman md. 7.7, bir kez slider'da yaşanmıştı ve
   burada TEKRAR yaşandı: opacity:0 tıklamayı ENGELLEMEZ.

   Perde çekmece kapanınca görünmez oluyordu ama tam ekran, z-index 998
   ile sayfanın üstünde durmaya devam ediyordu. Mobilde filtreyi bir kez
   açıp kapatan kullanıcı artık hiçbir ürüne tıklayamıyordu — dokunuşları
   görünmez perde yutuyordu.

   pointer-events:none tıklamayı serbest bırakıyor. visibility ise
   ekran okuyucu ve klavye odağı için; kapanırken solma animasyonu
   bitene kadar GECİKMELİ gizleniyor, yoksa perde bir anda kaybolurdu. */
.dpx-filtre-perde {
	position: fixed;
	inset: 0;
	background: rgba(18, 16, 15, 0.5);
	z-index: 998;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

body.dpx-filtre-acik .dpx-filtre-perde {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.22s ease, visibility 0s linear 0s;
}

@media (max-width: 1024px) {

	.dpx-katalog {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.dpx-mobil-buton {
		display: inline-flex;
	}

	/* Sonuç sayısı ve sıralama menüsü mobilde gizleniyor: sıralamayı
	   "Sortieren" butonu açıyor (filtre.js select'i tetikliyor, yani
	   telefonun kendi seçim ekranı çıkıyor — özel bir açılır menü
	   yazmaktan hem daha erişilebilir hem daha tanıdık). */
	.dpx-katalog-sonuc {
		width: 100%;
		order: 3;
	}

	.dpx-katalog-sirala {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.dpx-filtre {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(88vw, 360px);
		max-height: none;
		border: 0;
		border-radius: 0;
		z-index: 999;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 0.26s ease, visibility 0s linear 0.26s;
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
	}

	body.dpx-filtre-acik .dpx-filtre {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.26s ease, visibility 0s linear 0s;
	}

	/* Çekmece açıkken arka plan kaymasın. */
	body.dpx-filtre-acik {
		overflow: hidden;
	}

	.dpx-filtre-form {
		height: 100%;
	}

	.dpx-filtre-kapat {
		display: block;
	}

	/* Çekmecede "Ergebnisse anzeigen" butonu ŞART — mobilde her
	   seçimde otomatik gönderim yapmıyoruz, kullanıcı birkaç kutu
	   işaretleyip tek seferde uyguluyor. Alt eylemler sabit kalıyor. */
	.dpx-filtre-alt {
		position: sticky;
		bottom: 0;
		background: var(--dpx-yuzey);
	}
}

@media (min-width: 1025px) {

	/* Masaüstünde perde hiç oluşmasın. */
	.dpx-filtre-perde {
		display: none;
	}
}

@media (max-width: 640px) {

	.dpx-katalog-arac-ust {
		gap: 8px;
	}

	.dpx-mobil-buton {
		flex: 1 1 0;
		justify-content: center;
	}
}

/* =====================================================================
 * SERİ ŞERİDİ — "Weitere Dekore der Serie …"
 * ---------------------------------------------------------------------
 * Yatay kayan küçük kartlar. Dekor seçimi görsel bir karar, o yüzden
 * kare görsel + altında ad. Etkin dekor turuncu çerçeveyle işaretli ki
 * kullanıcı "şu an hangisindeyim" sorusunu sormasın.
 * ===================================================================== */

.dpx-seri {
	clear: both;
	margin: 36px 0 8px;
	padding-top: 28px;
	border-top: 1px solid var(--dpx-cizgi);
}

.dpx-seri h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 19px;
	font-weight: 700;
	color: var(--dpx-ana-renk);
}

.dpx-seri-sayi {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--dpx-yuzey-alt);
	color: var(--dpx-soluk);
	font-size: 12px;
	font-weight: 700;
}

.dpx-seri-liste {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 2px 2px 10px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
}

.dpx-seri-oge {
	flex: 0 0 118px;
	scroll-snap-align: start;
}

.dpx-seri-oge a {
	display: flex;
	flex-direction: column;
	gap: 7px;
	text-decoration: none;
	color: var(--dpx-ana-renk);
}

.dpx-seri-gorsel {
	display: block;
	aspect-ratio: 1 / 1;
	border: 1.5px solid var(--dpx-cizgi);
	border-radius: 4px;
	overflow: hidden;
	background: var(--dpx-yuzey-alt);
	transition: border-color 0.15s ease;
}

.dpx-seri-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dpx-seri-oge a:hover .dpx-seri-gorsel {
	border-color: #b9b4ad;
}

.dpx-seri-oge--aktif .dpx-seri-gorsel {
	border: 2px solid var(--dpx-ikincil-renk);
}

.dpx-seri-ad {
	font-size: 12.5px;
	line-height: 1.3;
	/* Uzun dekor adları ("Incredible Classic Oak") iki satırda kesilsin */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dpx-seri-oge--aktif .dpx-seri-ad {
	font-weight: 700;
}

/* =====================================================================
 * HESAP SAYFALARI (Mein Konto)
 * ---------------------------------------------------------------------
 * Kurallar yalnızca .woocommerce-account gövde sınıfı altında — ödeme
 * sayfasının görünümü bilinçli olarak DEĞİŞTİRİLMEDİ.
 *
 * ÖZGÜLLÜK: WooCommerce'in kendi hesap kuralları
 * ".woocommerce-account .woocommerce-MyAccount-navigation" (0,2,0) ve
 * ".woocommerce .col2-set .col-1" (0,3,0) biçiminde. Aşağıdakiler en
 * az bir seviye güçlü yazıldı; galeri bölümünde "div.images" olmadan
 * kuralların ezildiği tuzağa burada düşülmesin.
 * ===================================================================== */

/* page.php içeriği okuma genişliğine (920px) ve makale
   tipografisine (17px / 1.8) sabitliyor — metin sayfası için doğru,
   sipariş tablosu ve formlar için sıkışık ve şişkin. Hesap sayfasında
   ikisi de kaldırılıyor. */
.woocommerce-account .dpx-yazi-govde.dpx-sayfa-govde {
	max-width: none;
	font-size: 15px;
	line-height: 1.6;
}

/* --- Giriş yapılmış: sol menü + içerik ızgarası --- */
.woocommerce-account.logged-in .dpx-woo-icerik .woocommerce,
.woocommerce-account.logged-in .entry-content .woocommerce,
.woocommerce-account.logged-in main .woocommerce {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/* Float clearfix sözde-öğeleri grid içinde kendi hücresini kapıyor;
   ürün ızgarasında da aynı sebeple kapatılmıştı. */
.woocommerce-account.logged-in main .woocommerce::before,
.woocommerce-account.logged-in main .woocommerce::after {
	content: none;
}

.woocommerce-account.logged-in main .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.woocommerce-account.logged-in main .woocommerce .woocommerce-MyAccount-navigation,
.woocommerce-account.logged-in main .woocommerce .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
}

/* --- Sol menü --- */
.woocommerce-account main .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--dpx-yuzey);
	border: 1px solid var(--dpx-cizgi);
	border-radius: 5px;
	position: sticky;
	top: 16px;
}

.woocommerce-account main .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account main .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 14px;
	border-radius: 4px;
	border-left: 3px solid transparent;
	color: var(--dpx-ana-renk);
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 500;
}

.woocommerce-account main .woocommerce-MyAccount-navigation li a:hover {
	background: var(--dpx-yuzey-alt);
}

.woocommerce-account main .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--dpx-yuzey-alt);
	border-left-color: var(--dpx-ikincil-renk);
	font-weight: 700;
}

/* "Abmelden" diğerlerinden ayrık dursun — yanlışlıkla tıklanmasın. */
.woocommerce-account main .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 6px !important;
	padding-top: 6px !important;
	border-top: 1px solid var(--dpx-cizgi);
}

.woocommerce-account main .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--dpx-soluk);
}

/* --- İçerik alanı --- */
.woocommerce-account main .woocommerce-MyAccount-content {
	font-size: 15px;
	line-height: 1.6;
}

.woocommerce-account main .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

.woocommerce-account main .woocommerce-MyAccount-content h2,
.woocommerce-account main .woocommerce-MyAccount-content h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--dpx-ana-renk);
	margin: 0 0 12px;
}

/* --- Sipariş tablosu --- */
.woocommerce-account main table.shop_table {
	width: 100%;
	border: 1px solid var(--dpx-cizgi);
	border-radius: 5px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: 0 0 24px;
}

.woocommerce-account main table.shop_table th {
	background: var(--dpx-yuzey-alt);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--dpx-soluk);
	text-align: left;
	padding: 11px 14px;
	border: 0;
}

.woocommerce-account main table.shop_table td {
	padding: 13px 14px;
	border-top: 1px solid var(--dpx-cizgi);
	vertical-align: middle;
}

.woocommerce-account main .woocommerce-orders-table__cell-order-number a {
	font-weight: 700;
	color: var(--dpx-ana-renk);
}

.woocommerce-account main .woocommerce-orders-table__cell-order-actions .button {
	padding: 8px 14px;
	font-size: 13px;
	margin: 2px 4px 2px 0;
}

/* Sipariş detayındaki numara/tarih/durum vurguları */
.woocommerce-account main mark.order-number,
.woocommerce-account main mark.order-date,
.woocommerce-account main mark.order-status {
	background: none;
	color: var(--dpx-ana-renk);
	font-weight: 700;
}

/* --- Adres kutuları --- */
.woocommerce-account main .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.woocommerce-account main .woocommerce-Addresses::before,
.woocommerce-account main .woocommerce-Addresses::after {
	content: none;
}

.woocommerce-account main .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	max-width: none;
	padding: 18px;
	border: 1px solid var(--dpx-cizgi);
	border-radius: 5px;
	background: var(--dpx-yuzey);
}

.woocommerce-account main .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.woocommerce-account main .woocommerce-Address-title h2,
.woocommerce-account main .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 16px;
}

.woocommerce-account main .woocommerce-Address-title .edit {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--dpx-ikincil-renk);
	float: none;
}

.woocommerce-account main .woocommerce-Address address {
	font-style: normal;
	line-height: 1.6;
	color: var(--dpx-soluk);
}

/* --- Formlar (giriş, kayıt, hesap bilgileri, adres düzenleme) --- */
.woocommerce-account main .woocommerce form .form-row {
	margin: 0 0 14px;
	padding: 0;
}

.woocommerce-account main .woocommerce form .form-row label {
	display: block;
	margin-bottom: 5px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--dpx-ana-renk);
	line-height: 1.4;
}

.woocommerce-account main .woocommerce form .form-row .required {
	color: var(--dpx-ikincil-renk);
	text-decoration: none;
	border: 0;
}

.woocommerce-account main .woocommerce form .form-row input.input-text,
.woocommerce-account main .woocommerce form .form-row select,
.woocommerce-account main .woocommerce form .form-row textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1.5px solid var(--dpx-cizgi);
	border-radius: var(--dpx-buton-radius);
	background: #fff;
	font: inherit;
	font-size: 16px; /* 16px altı iOS'ta sayfayı zumluyor */
	color: var(--dpx-ana-renk);
	line-height: 1.3;
}

.woocommerce-account main .woocommerce form .form-row input.input-text:focus,
.woocommerce-account main .woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--dpx-ana-renk);
}

/* WooCommerce "şifreyi göster" gözü input'un içinde durmalı */
.woocommerce-account main .woocommerce form .password-input {
	display: block;
	position: relative;
}

.woocommerce-account main .woocommerce form fieldset {
	margin: 20px 0 8px;
	padding: 16px 18px 4px;
	border: 1px solid var(--dpx-cizgi);
	border-radius: 5px;
}

.woocommerce-account main .woocommerce form fieldset legend {
	padding: 0 6px;
	font-weight: 700;
	font-size: 14px;
}

.woocommerce-account main .woocommerce form .form-row-first,
.woocommerce-account main .woocommerce form .form-row-last {
	width: 48.5%;
}

/* --- Giriş / kayıt (giriş yapılmamış) --- */
.woocommerce-account main #customer_login {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
}

.woocommerce-account main #customer_login::before,
.woocommerce-account main #customer_login::after {
	content: none;
}

.woocommerce-account main #customer_login .u-column1,
.woocommerce-account main #customer_login .u-column2 {
	float: none;
	width: auto;
	padding: 24px;
	border: 1px solid var(--dpx-cizgi);
	border-radius: 6px;
	background: var(--dpx-yuzey);
}

/* Kayıt kutusu hafif gri: iki kutu yan yana eş ağırlıkta durunca
   göz hangisinin "ana" eylem olduğunu seçemiyordu. Dönen müşteri
   için giriş ana eylem. */
.woocommerce-account main #customer_login .u-column2 {
	background: var(--dpx-yuzey-alt);
}

.woocommerce-account main #customer_login h2 {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 700;
	color: var(--dpx-ana-renk);
}

/* WooCommerce form çerçevesi kutunun içinde ikinci çerçeve yapıyordu */
.woocommerce-account main .woocommerce form.login,
.woocommerce-account main .woocommerce form.register,
.woocommerce-account main .woocommerce form.lost_reset_password {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* Kayıt kapalıyken WooCommerce sadece giriş formunu sütunsuz basıyor;
   o zaman ekranın tamamına yayılmasın. */
.woocommerce-account main .woocommerce > form.login,
.woocommerce-account main .woocommerce > form.lost_reset_password {
	max-width: 460px;
	padding: 24px;
	border: 1px solid var(--dpx-cizgi);
	border-radius: 6px;
}

.woocommerce-account main .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-right: 14px;
	font-size: 14px;
	font-weight: 500 !important;
}

.woocommerce-account main .woocommerce-form-login__rememberme input {
	accent-color: var(--dpx-ikincil-renk);
}

.woocommerce-account main .woocommerce form .button {
	margin-top: 4px;
}

/* Giriş/kayıt ana eylemi turuncu — sayfadaki tek asıl amaç o. */
.woocommerce-account main .woocommerce-form-login__submit,
.woocommerce-account main .woocommerce-form-register__submit {
	background: var(--dpx-ikincil-renk) !important;
	min-width: 160px;
}

.woocommerce-account main .woocommerce-form-login__submit:hover,
.woocommerce-account main .woocommerce-form-register__submit:hover {
	background: var(--dpx-ana-renk) !important;
}

.woocommerce-account main .woocommerce-LostPassword {
	margin: 14px 0 0;
	font-size: 14px;
}

.woocommerce-account main .woocommerce-LostPassword a,
.woocommerce-account main .woocommerce-privacy-policy-text a {
	color: var(--dpx-ikincil-renk);
}

.woocommerce-account main .woocommerce-privacy-policy-text {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--dpx-soluk);
	margin-bottom: 12px;
}

/* --- Mobil --- */
@media (max-width: 860px) {

	.woocommerce-account.logged-in main .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	/* Sol menü mobilde yatay kayan şerit: dikey liste içeriği ekranın
	   altına itiyordu. Tema-03'te katalog kategori filtresi için
	   aynı çözüm kullanılmıştı. */
	.woocommerce-account main .woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: 4px;
		overflow-x: auto;
		position: static;
		white-space: nowrap;
	}

	.woocommerce-account main .woocommerce-MyAccount-navigation li a {
		border-left: 0;
		border-bottom: 3px solid transparent;
		padding: 9px 12px;
	}

	.woocommerce-account main .woocommerce-MyAccount-navigation li.is-active a {
		border-bottom-color: var(--dpx-ikincil-renk);
	}

	.woocommerce-account main .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0 !important;
		padding-top: 0 !important;
		border-top: 0;
	}

	.woocommerce-account main #customer_login,
	.woocommerce-account main .woocommerce-Addresses {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-account main .woocommerce form .form-row-first,
	.woocommerce-account main .woocommerce form .form-row-last {
		width: 100%;
		float: none;
	}

	/* Header'da hesap metni gizli, sadece ikon — mobilde yer yok. */
	.dpx-hesap-metin {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.dpx-hesap-link {
		padding: 0;
		width: 44px;
		justify-content: center;
	}

	.dpx-hesap-link--girisli::after {
		left: 26px;
	}
}

/* --- Tek sipariş görünümü (Bestellungen > Anzeigen) ---
   WooCommerce sipariş numarasını, tarihini ve durumunu <mark> ile
   basıyor. Tarayıcının varsayılanı SARI VURGU — "Bestellung #123
   wurde am … aufgegeben" cümlesi fosforlu kalemle çizilmiş gibi
   görünüyordu. Vurgu kalın yazıya çevrildi, durum da küçük bir
   rozete. */
.woocommerce-account main .woocommerce-MyAccount-content mark {
	background: none;
	color: var(--dpx-ana-renk);
	font-weight: 700;
	padding: 0;
}

.woocommerce-account main .woocommerce-MyAccount-content mark.order-status {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--dpx-yuzey-alt);
	border: 1px solid var(--dpx-cizgi);
	font-size: 13px;
	font-weight: 600;
}

/* Sipariş tablosunun alt satırları (Zwischensumme, Versand, Gesamt) */
.woocommerce-account main table.shop_table tfoot th,
.woocommerce-account main table.shop_table tfoot td {
	background: var(--dpx-yuzey-alt);
}

.woocommerce-account main table.shop_table tfoot tr:last-child th,
.woocommerce-account main table.shop_table tfoot tr:last-child td {
	font-size: 16px;
	font-weight: 700;
	color: var(--dpx-ana-renk);
}

/* Sipariş altındaki fatura / teslimat adresleri — "Adressen"
   sekmesindeki kartlarla aynı görünsün. WooCommerce'in varsayılanı
   sağ-alt kenarı kalın, eğik yazılı bir kutu; aynı bilgi iki farklı
   kılıkta görünüyordu. */
.woocommerce-account main .woocommerce-customer-details .woocommerce-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.woocommerce-account main .woocommerce-customer-details .woocommerce-column {
	float: none;
	width: auto;
	max-width: none;
	padding: 18px;
	border: 1px solid var(--dpx-cizgi);
	border-radius: 5px;
	background: var(--dpx-yuzey);
}

.woocommerce-account main .woocommerce-customer-details .woocommerce-column__title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
}

.woocommerce-account main .woocommerce-customer-details address {
	font-style: normal;
	line-height: 1.6;
	color: var(--dpx-soluk);
	border: 0;
	padding: 0;
}

.woocommerce-account main .woocommerce-customer-details .woocommerce-columns::before,
.woocommerce-account main .woocommerce-customer-details .woocommerce-columns::after {
	content: none; /* float clearfix'i grid'i bozuyor */
}

@media (max-width: 640px) {
	.woocommerce-account main .woocommerce-customer-details .woocommerce-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =====================================================================
 * ÜRÜN DETAYI — birim fiyat baskın
 * ---------------------------------------------------------------------
 * m² fiyatı büyük (müşteri isteği), paket fiyatı altında. Paket fiyatı
 * PAngV gereği açıkça okunabilir kalmalı — soluk griye çekilmedi.
 * ===================================================================== */
.woocommerce div.product p.price.dpx-fiyat-birim {
	margin: 0 0 4px;
	font-size: clamp(28px, 3.4vw, 36px);
	line-height: 1.15;
}

.woocommerce div.product p.price.dpx-fiyat-birim .dpx-grundpreis {
	font-size: inherit;
	margin: 0;
	color: inherit;
}

.woocommerce div.product p.price.dpx-fiyat-birim del .amount {
	font-size: 0.6em;
}

.woocommerce div.product .dpx-fiyat-paket {
	margin: 0 0 12px;
	font-size: 16px;
	color: var(--dpx-ana-renk);
}

.woocommerce div.product .dpx-fiyat-paket del {
	color: #a8a39d;
	margin-right: 4px;
}

.woocommerce div.product .dpx-fiyat-paket ins {
	text-decoration: none;
	font-weight: 700;
}

/* =====================================================================
 * WARENKORB VE KASSE (klasik sürüm)
 * ---------------------------------------------------------------------
 * page.php içeriği makale genişliğine ve makale yazısına sabitliyor
 * (920px, 17px / 1.8). Hesap sayfasında olduğu gibi burada da
 * kaldırılıyor — sepet tablosu ve iki sütunlu kasa formu için dar ve
 * şişkin kalıyordu.
 *
 * Seçiciler WooCommerce'in kendi kurallarından (".woocommerce form
 * .form-row ...") en az bir seviye güçlü yazıldı.
 * ===================================================================== */
.woocommerce-cart .dpx-yazi-govde.dpx-sayfa-govde,
.woocommerce-checkout .dpx-yazi-govde.dpx-sayfa-govde {
	max-width: none;
	font-size: 15px;
	line-height: 1.6;
}

/* --- Tablolar --- */
.woocommerce-cart main table.shop_table,
.woocommerce-checkout main table.shop_table {
	border: 1px solid var(--dpx-cizgi);
	border-radius: 5px;
	border-collapse: separate;
	overflow: hidden;
}

.woocommerce-cart main table.shop_table th,
.woocommerce-checkout main table.shop_table th {
	background: var(--dpx-yuzey-alt);
	font-size: 13px;
	font-weight: 700;
	color: var(--dpx-ana-renk);
}

.woocommerce-cart main table.shop_table td,
.woocommerce-checkout main table.shop_table td {
	border-top: 1px solid var(--dpx-cizgi);
	vertical-align: middle;
}

.woocommerce-cart main table.cart img {
	width: 72px;
	border-radius: 3px;
	border: 1px solid var(--dpx-cizgi);
}

.woocommerce-cart main table.cart .product-name a {
	color: var(--dpx-ana-renk);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-cart main table.cart .product-remove a.remove {
	color: var(--dpx-soluk) !important;
	font-size: 20px;
}

.woocommerce-cart main table.cart .product-remove a.remove:hover {
	background: var(--dpx-ikincil-renk);
	color: #fff !important;
}

/* Kupon kutusu */
.woocommerce-cart main table.cart td.actions .coupon .input-text {
	width: 180px;
	padding: 10px 12px;
	border: 1.5px solid var(--dpx-cizgi);
	border-radius: var(--dpx-buton-radius);
	font: inherit;
}

/* --- "Warenkorb aktualisieren" ---
   JS açıkken sepet adet değişince kendiliğinden güncelleniyor
   (assets/js/sepet.js), buton gereksiz — gizli.

   JS kapalıyken buton görünür kalıyor ve okunaklı olmalı. WooCommerce'in
   devre dışı buton kuralı yazı rengini "inherit" yapıyordu: koyu zemin
   üstünde koyu yazı + yarı saydamlık, buton okunmuyordu. Kuralı onunkiyle
   aynı özgüllükte ([disabled]) ve sonra yazarak eziyoruz. */
body.dpx-sepet-oto .woocommerce-cart-form button[name="update_cart"] {
	display: none;
}

.woocommerce-cart main .woocommerce-cart-form button.button[name="update_cart"],
.woocommerce-cart main .woocommerce-cart-form button.button[name="update_cart"]:disabled,
.woocommerce-cart main .woocommerce-cart-form button.button[name="update_cart"]:disabled[disabled] {
	background: #fff;
	color: var(--dpx-ana-renk);
	border: 1.5px solid var(--dpx-cizgi);
	opacity: 1;
	padding: 10px 18px;
}

.woocommerce-cart main .woocommerce-cart-form button.button[name="update_cart"]:disabled,
.woocommerce-cart main .woocommerce-cart-form button.button[name="update_cart"]:disabled[disabled] {
	color: var(--dpx-soluk);
	cursor: not-allowed;
}

/* --- Sepet toplamı kutusu --- */
.woocommerce-cart main .cart-collaterals .cart_totals {
	padding: 20px;
	border: 1px solid var(--dpx-cizgi);
	border-radius: 5px;
	background: var(--dpx-yuzey-alt);
}

.woocommerce-cart main .cart-collaterals .cart_totals h2 {
	margin: 0 0 12px;
	font-size: 19px;
}

.woocommerce-cart main .cart-collaterals .cart_totals table.shop_table {
	background: #fff;
}

/* Ana eylem düğmeleri turuncu ve tam genişlik — sayfanın tek amacı bu */
.woocommerce-cart main .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout main #place_order {
	display: block;
	width: 100%;
	padding: 16px 20px;
	background: var(--dpx-ikincil-renk);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	border-radius: var(--dpx-buton-radius);
}

.woocommerce-cart main .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout main #place_order:hover {
	background: var(--dpx-ana-renk);
}

/* --- Kasa formu --- */
.woocommerce-checkout main .woocommerce form .form-row label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--dpx-ana-renk);
}

.woocommerce-checkout main .woocommerce form .form-row input.input-text,
.woocommerce-checkout main .woocommerce form .form-row textarea,
.woocommerce-checkout main .woocommerce form .form-row select {
	padding: 11px 12px;
	border: 1.5px solid var(--dpx-cizgi);
	border-radius: var(--dpx-buton-radius);
	background: #fff;
	font: inherit;
	font-size: 16px; /* 16px altı iOS'ta sayfayı zumluyor */
}

.woocommerce-checkout main .woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout main .woocommerce form .form-row textarea:focus {
	border-color: var(--dpx-ana-renk);
	outline: none;
}

/* Ülke/eyalet seçimi (selectWoo) — diğer kutularla aynı yükseklik */
.woocommerce-checkout main .select2-container .select2-selection--single {
	height: 46px;
	border: 1.5px solid var(--dpx-cizgi);
	border-radius: var(--dpx-buton-radius);
}

.woocommerce-checkout main .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 44px;
	padding-left: 12px;
}

.woocommerce-checkout main .select2-container .select2-selection--single .select2-selection__arrow {
	height: 44px;
}

/* Sipariş özeti ve ödeme kutusu */
.woocommerce-checkout main #order_review_heading {
	margin-top: 8px;
	font-size: 20px;
}

.woocommerce-checkout main #payment {
	background: var(--dpx-yuzey-alt);
	border: 1px solid var(--dpx-cizgi);
	border-radius: 5px;
}

.woocommerce-checkout main #payment div.payment_box {
	background: #fff;
	border: 1px solid var(--dpx-cizgi);
	color: var(--dpx-ana-renk);
}

.woocommerce-checkout main #payment div.payment_box::before {
	border-bottom-color: #fff;
}

/* Masaüstünde fatura bilgileri solda, sipariş özeti sağda */
@media (min-width: 1025px) {
	.woocommerce-checkout main form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		column-gap: 40px;
		align-items: start;
	}

	.woocommerce-checkout main form.checkout > * {
		grid-column: 1 / -1;
	}

	.woocommerce-checkout main form.checkout #customer_details {
		grid-column: 1;
		grid-row: span 3;
	}

	.woocommerce-checkout main form.checkout #customer_details .col-1,
	.woocommerce-checkout main form.checkout #customer_details .col-2 {
		float: none;
		width: 100%;
	}

	.woocommerce-checkout main form.checkout #order_review_heading,
	.woocommerce-checkout main form.checkout #order_review {
		grid-column: 2;
	}

	.woocommerce-checkout main form.checkout #order_review {
		position: sticky;
		top: 16px;
	}
}

/* =====================================================================
 * VERLEGESERVICE — ürün sayfası kutusu ve kasa kutucuğu
 * ===================================================================== */
.dpx-verlegung {
	margin-top: 14px;
	padding: 14px 16px;
	border: 1px solid var(--dpx-cizgi);
	border-radius: var(--dpx-buton-radius);
	background: var(--dpx-yuzey-alt);
}

.dpx-verlegung-ust {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.dpx-verlegung-ikon {
	flex: 0 0 auto;
	color: var(--dpx-ikincil-renk);
	margin-top: 2px;
}

.dpx-verlegung-ikon svg {
	width: 22px;
	height: 22px;
}

.dpx-verlegung-ust strong {
	display: block;
	font-family: var(--dpx-baslik-font);
	font-size: 15px;
	color: var(--dpx-ana-renk);
}

.dpx-verlegung-ust p {
	margin: 2px 0 0;
	font-size: 13.5px;
	color: var(--dpx-soluk);
	line-height: 1.5;
}

.dpx-verlegung-ust p .amount {
	color: var(--dpx-ana-renk);
	font-weight: 700;
}

.dpx-verlegung-plz {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 12px 0 0 34px;
	font-size: 13.5px;
}

.dpx-verlegung-plz label {
	font-weight: 600;
	color: var(--dpx-ana-renk);
}

.dpx-verlegung-plz input {
	width: 92px;
	padding: 7px 10px;
	border: 1.5px solid var(--dpx-cizgi);
	border-radius: var(--dpx-buton-radius);
	font: inherit;
	font-size: 16px; /* iOS zum önlemi */
	background: #fff;
}

.dpx-verlegung-plz input:focus {
	outline: none;
	border-color: var(--dpx-ana-renk);
}

.dpx-verlegung-sonuc--evet {
	color: var(--dpx-yesil);
	font-weight: 600;
}

.dpx-verlegung-sonuc--hayir {
	color: var(--dpx-soluk);
}

.dpx-verlegung-not {
	margin: 10px 0 0 34px;
	font-size: 12.5px;
	color: var(--dpx-soluk);
	line-height: 1.5;
}

.dpx-verlegung-not a {
	color: var(--dpx-ana-renk);
	font-weight: 600;
	margin-left: 4px;
}

/* Kasa kutucuğu — sipariş notlarının altında, fark edilsin diye kutu içinde */
.woocommerce-checkout main .dpx-verlegung-kasa {
	margin-top: 18px;
	padding: 14px 16px;
	border: 1.5px solid var(--dpx-ikincil-renk);
	border-radius: 5px;
	background: rgba(247, 91, 2, 0.04);
}

.woocommerce-checkout main .dpx-verlegung-kasa .form-row {
	margin: 0;
}

.woocommerce-checkout main .dpx-verlegung-kasa label.checkbox {
	font-weight: 600;
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.woocommerce-checkout main .dpx-verlegung-kasa input[type="checkbox"] {
	margin-top: 3px;
	accent-color: var(--dpx-ikincil-renk);
}

.woocommerce-checkout main .dpx-verlegung-kasa .description {
	display: block;
	margin: 6px 0 0 24px;
	font-size: 12.5px;
	color: var(--dpx-soluk);
	font-weight: 400;
}

@media (max-width: 640px) {
	.dpx-verlegung-plz,
	.dpx-verlegung-not {
		margin-left: 0;
	}
}

/* =====================================================================
 * FOOTER — yasal linkler
 * ===================================================================== */

.dpx-footer-yasal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dpx-footer-yasal a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	font-size: 13.5px;
}

.dpx-footer-yasal a:hover {
	color: #fff;
	text-decoration: underline;
}

.dpx-footer-alt-ic {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

/* =====================================================================
 * DUYARLI (RESPONSIVE)
 * ===================================================================== */

@media (max-width: 1024px) {

	ul.products.dpx-urun-izgara,
	.woocommerce ul.products {
		grid-template-columns: repeat(3, 1fr);
	}

	.dpx-guven-ic {
		grid-template-columns: repeat(2, 1fr);
	}

	.dpx-rechner-band-ic,
	.dpx-muster-band-ic,
	.dpx-verlege-ic {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 860px) {

	/* Arama kutusu logo ile sepet arasında sıkışıyor — kendi satırına
	   iniyor. Mobilde arama, mağazanın en çok kullanılan girişi;
	   hamburger menünün arkasına saklamak dönüşümü düşürüyor. */
	.dpx-header-ic {
		flex-wrap: wrap;
		gap: 12px;
	}

	.dpx-arama {
		order: 3;
		flex: 1 0 100%;
		max-width: none;
	}

	.dpx-arama--mobil {
		display: none; /* mobil menüdeki kopyası gereksiz kalıyor */
	}

	.dpx-menu-serit {
		display: none; /* menü hamburger'e taşınıyor */
	}

	.dpx-ust-serit-ic {
		font-size: 12px;
	}
}

@media (max-width: 640px) {

	/* Dar ekranda 4/3 kutu çok basık kalıyor ve dikey fotoğrafın
	   beyaz kenarları görselden geniş görünüyor. Kareye yaklaştırmak
	   ikisini birden çözüyor. */
	:root {
		--dpx-galeri-oran: 1 / 1;
	}

	.woocommerce div.product div.images .flex-control-thumbs {
		gap: 8px;
	}

	/* Ürün ızgarası tek sütuna iner. İki sütunda kart ~150px'e
	   düşüyor ve dekor deseni seçilemiyor — tema-03'te katalogda
	   aynı karar verilmişti. */
	ul.products.dpx-urun-izgara,
	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}

	.dpx-guven-ic {
		grid-template-columns: 1fr;
		gap: 14px;
	}


	.dpx-bolum-basligi {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.dpx-rechner-girdi,
	.dpx-rechner--band .dpx-rechner-girdi {
		grid-template-columns: 1fr;
	}

	.dpx-rechner-sayi strong {
		font-size: 36px;
	}

	.dpx-verlege-gorseller {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		min-height: 0;
	}

	.dpx-verlege-gorseller img:first-child {
		grid-row: auto;
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
	}

	.dpx-bolum {
		padding-top: 44px;
		padding-bottom: 44px;
	}
}