/* =================================================================
   "modern" tema — Tasarım Sistemi (Faz 1)
   emare.com.tr'den ilham alan sade / toprak tonu görsel dil.
   Bu dosya henüz bir OpenCart tema iskeletine bağlı değil (Faz 2'de
   catalog/view/template/... dosyaları bu sınıfları kullanacak şekilde
   kurulacak). Faz 1'in kapsamı: renk, tipografi, boşluk ölçeği ve
   temel bileşen (buton/link/form) stillerini burada sabitlemek.
================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300..600&display=swap');

:root {
	/* --- Renk paleti: nötr toprak/taş tonları --- */
	--color-bg:          #ffffff;
	--color-bg-soft:     #f7f5f1;  /* bölüm arka planı, sıcak kırık beyaz */
	--color-bg-dark:     #2b2a26;  /* koyu bölümler (footer üstü vb.) */

	--color-text:        #2b2a26;  /* sıcak neredeyse-siyah */
	--color-text-muted:  #8a8579;
	--color-text-invert: #f7f5f1;

	--color-accent:      #8a7c64;  /* ana vurgu: toprak/vizon */
	--color-accent-dark: #6b5f4c;  /* hover / active */
	--color-accent-soft: #e9e3d8;  /* açık vurgu zemin */

	--color-border:      #e7e2d9;
	--color-error:       #b3554a;
	--color-success:     #6f7d5c;

	/* --- Tipografi --- */
	--font-heading: 'Cormorant Garamond', 'Times New Roman', serif;
	--font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

	--fs-h1: 44px;
	--fs-h2: 34px;
	--fs-h3: 26px;
	--fs-h4: 19px;
	--fs-h5: 15px;
	--fs-h6: 13px;

	--fs-body:  15px;
	--fs-small: 13px;
	--fs-label: 11px; /* büyük harf etiketler: kategori, buton vb. */

	--lh-heading: 1.15;
	--lh-body:    1.7;

	--ls-heading: 0.01em;
	--ls-label:   0.14em; /* büyük harf etiketlerde geniş harf aralığı */

	/* --- Boşluk ölçeği (4px taban, 1.6 katsayı) --- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 14px;
	--space-4: 22px;
	--space-5: 34px;
	--space-6: 54px;
	--space-7: 84px;
	--space-8: 128px;

	/* --- Grid / kapsayıcı --- */
	--container-max: 1280px;
	--gutter: var(--space-4);

	/* --- Diğer --- */
	--radius: 0;          /* köşeler keskin, minimal his */
	--radius-pill: 999px; /* sadece rozet/etiket gibi yuvarlak öğelerde */
	--transition: 200ms ease;
	--shadow-soft: 0 8px 28px rgba(43, 42, 38, 0.08);
}

/* ---------------------------------------------------------------
   Temel sıfırlama / gövde
------------------------------------------------------------------ */
* {
	box-sizing: border-box;
}

body {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	/* Kategori kartları ızgarası (.demo-category-grid) tam viewport
	   genişliğine taşmak için 100vw + negatif margin tekniği kullanıyor;
	   bazı tarayıcılarda 100vw dikey scrollbar'ın genişliğini saymadığından
	   birkaç piksellik yatay taşma/scrollbar oluşabiliyor. Bunu güvenceye
	   almak için burada kapatıyoruz. */
	overflow-x: hidden;
}

.container {
	max-width: var(--container-max);
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* ---------------------------------------------------------------
   Tipografi ölçeği
------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-heading);
	font-weight: 500;
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	color: var(--color-text);
	margin: 0 0 var(--space-3) 0;
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 500; }
h5, .h5 { font-size: var(--fs-h5); font-family: var(--font-body); font-weight: 500; }
h6, .h6 { font-size: var(--fs-h6); font-family: var(--font-body); font-weight: 500; }

p {
	margin: 0 0 var(--space-3) 0;
	color: var(--color-text);
}

.text-muted { color: var(--color-text-muted); }

/* Büyük harf, geniş aralıklı etiket stili — kategori adı, buton metni,
   üst menü linkleri gibi "etiket" niteliğindeki metinler için. */
.label-caps {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-text);
}

/* ---------------------------------------------------------------
   Link
------------------------------------------------------------------ */
a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition);
}
a:hover, a:focus {
	color: var(--color-accent-dark);
	text-decoration: none;
}

/* ---------------------------------------------------------------
   Butonlar
------------------------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	padding: 13px 28px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn-primary {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text-invert);
}
.btn-primary:hover, .btn-primary:focus {
	background: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: var(--color-text-invert);
}

.btn-outline {
	background: transparent;
	border-color: var(--color-text);
	color: var(--color-text);
}
.btn-outline:hover, .btn-outline:focus {
	background: var(--color-text);
	border-color: var(--color-text);
	color: var(--color-text-invert);
}

.btn-link {
	padding: 0;
	border: none;
	background: none;
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.btn-link:hover {
	color: var(--color-accent-dark);
}

/* ---------------------------------------------------------------
   Form elemanları
------------------------------------------------------------------ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 12px 14px;
	width: 100%;
	/* Bootstrap'ın .form-control'e verdiği sabit height:34px, bizim
	   12px'lik dikey padding'imizle çakışıyor — <select> öğelerinde
	   seçili metnin üst kısmının kırpılmasına sebep oluyordu (34px
	   sabit yükseklik - 24px padding = metne sadece 10px kalıyordu). */
	height: auto;
	transition: border-color var(--transition);
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-accent);
}

label {
	font-family: var(--font-body);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	margin-bottom: var(--space-1);
}

/* ---------------------------------------------------------------
   Kart / panel yüzeyleri (ileride ürün kartı, bilgi kutusu vb. bunun
   üzerine kurulacak — Faz 4-6)
------------------------------------------------------------------ */
.surface {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}
.surface-soft {
	background: var(--color-bg-soft);
}
.surface-elevated {
	box-shadow: var(--shadow-soft);
	border: none;
}

/* ---------------------------------------------------------------
   Bölüm boşlukları (ana sayfa blokları, Faz 4'te kullanılacak)
------------------------------------------------------------------ */
.section {
	padding-top: var(--space-7);
	padding-bottom: var(--space-7);
}
.section-tight {
	padding-top: var(--space-5);
	padding-bottom: var(--space-5);
}

/* ---------------------------------------------------------------
   Yardımcı sınıflar
------------------------------------------------------------------ */
.hr-soft {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: var(--space-5) 0;
}

/* =================================================================
   Faz 3 — Header / Footer / Menü
   Not: Bootstrap grid + common.js'in bağlı olduğu ID/class'lar
   (#top, #menu, #cart, #search, .dropdown-toggle, .navbar-collapse vb.)
   kasıtlı olarak korunuyor — sadece görsel katman değiştiriliyor.
================================================================= */

/* --- Üst şerit: tek satır, ortalı WhatsApp/kampanya mesajı --- */
#top {
	background: var(--color-bg-dark);
	border-bottom: none;
	padding: 0;
	min-height: 0;
	font-size: var(--fs-small);
	overflow: hidden;
}
/* Üst şerit duyuru kaydırıcısı (emare.com.tr referansı) — Swiper 3 slide
   efekti + loop, bkz. header.twig'deki .top-swiper init script'i. */
.top-swiper {
	width: 100%;
}
.top-swiper .swiper-slide {
	width: 100%;
}
.top-inner {
	text-align: center;
	padding: var(--space-2) var(--gutter);
}
/* Rengi/arka planı normalde Modern Tema > Site Üst Bölüm'den, mesaj başına
   inline style ile geliyor (bkz. header.twig) — buradaki color, admin hiç
   özel renk vermediği (eski tek-mesajlık ayarlardan geçiş) durumlar için
   varsayılan/fallback. */
.top-announce {
	display: inline-block;
	color: var(--color-text-invert);
	letter-spacing: .02em;
}

/* --- Header: logo | menü | ikonlar — TEK satır (emare.com.tr referansı) --- */
header {
	background: var(--color-bg);
	padding: var(--space-2) 0;
	margin: 0;
	border-bottom: 1px solid var(--color-border);
	/* Sayfa aşağı kaydırılınca header her zaman üstte sabit kalsın, üstteki
	   duyuru şeridi (#top) ise normal akışta kalıp sayfayla birlikte
	   kaybolsun diye — #top, header'dan hemen önce geliyor (bkz.
	   header.twig), header sticky+top:0 olunca #top'un scroll edip
	   gözden kaybolduğu an tam da header'ın yerine "yapışması" tetikleniyor.
	   Ekstra JS gerekmiyor, hem masaüstü hem mobilde aynı şekilde çalışıyor. */
	position: sticky;
	top: 0;
	/* Swiper kütüphanesi .swiper-container'a z-index:1 veriyor. header'ın
	   kendi z-index'i "auto" olduğundan (position:relative tek başına yeni
	   bir stacking context açmıyor), kategori açılır menüsündeki z-index:1000
	   işe yaramıyordu — .home-hero-wrap içindeki swiper (hero banner) DOM'da
	   sonra geldiği ve kendi z-index'i olduğu için üstte kalıp "Yeni" gibi
	   kategorilerin alt menüsünü görsel olarak eziyordu. Header'a kendi
	   z-index'ini vermek onu ayrı bir stacking context yapıp hero'nun üstüne
	   çıkarıyor. */
	z-index: 50;
}
/* Modern Tema > Site Üst Bölüm'den "Sabit Header" kapatıldığında eklenir. */
header.header-static {
	position: static;
}
/* Header, site genelindeki dar .container'ı (max-width:1280px) DEĞİL —
   emare.com.tr referansındaki gibi neredeyse tam genişlik kullanır. Geniş
   ekranlarda logo/sepet arada kalan boşlukla ortada sıkışmasın diye header
   içindeki .container'ın max-width'ini kaldırıyoruz (kenar padding'i kalır). */
header .container {
	/* Bootstrap'ın .container'a breakpoint başına verdiği SABİT piksel width'i
	   (ör. @media (min-width:1200px) { .container{width:1170px} }) max-width:none
	   tek başına yetmiyor, width'i de ezmek gerekiyor. */
	width: 100%;
	max-width: none;
}
.header-inner {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--space-4);
}
#logo {
	flex: 0 0 auto;
}
#logo h1 {
	margin: 0;
}
/* Metin logosu (System > Settings'te görsel logo yüklenmemişse #logo h1 a
   olarak düşer). Görsel logo yüklendiğinde markup #logo > a > img olur —
   bu yüzden aşağıdaki kural kasıtlı olarak SADECE h1 içindeki a'yı hedefliyor,
   #logo > a img sarmalayıcısına sızıp gereksiz font/line-height kutusu
   yaratmasın diye. */
#logo h1 a {
	font-family: var(--font-heading);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: .38em;
	text-transform: uppercase;
	color: var(--color-text);
	white-space: nowrap;
	padding-left: .38em; /* ilk harfin de sağa kayan letter-spacing'i alması için */
}
#logo h1 a:hover {
	color: var(--color-accent);
}
/* Görsel logo (System > Settings'ten yüklenen) — orijinal dosya çok
   büyük gelebiliyor (ör. 1890x591px); masaüstü/mobilde makul, sabit bir
   yüksekliğe oturt, oranı koru. #logo > a varsayılan olarak inline'dır ve
   üstteki h1 a kuralından font-size/line-height miras alıp img'nin
   etrafında ~35-40px'lik görünmez boşluk yaratıyordu (header'ı gereğinden
   uzun gösteriyordu) — display:block bunu kapatır. */
#logo > a {
	display: block;
}
#logo > a:hover img {
	opacity: .85;
}
#logo img {
	width: var(--hdr-logo-width, auto);
	height: auto;
	max-width: 100%;
	display: block;
	transition: opacity var(--transition);
}

.header-icons {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-left: auto;
}
.header-icon, #cart-toggle {
	color: var(--hdr-icon-color, var(--color-text));
}
.header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	background: transparent;
	font-size: 20px;
	transition: color var(--transition);
}
.header-icon:hover {
	color: var(--color-accent);
}
/* Arama / hesap / sepet ikonları — emare.com.tr referansındaki ince
   çizgili (line-style) SVG'lerle birebir aynı path'ler (bkz. header.twig,
   cart.twig). fill:currentColor sayesinde renk/hover .header-icon ve
   #cart-toggle'dan miras alınıyor. Modern Tema > Site Üst Bölüm'den "Dolu"
   stili seçilirse bunun yerine font-awesome tabanlı .icon-font kullanılır —
   boyut/renk her iki stilde de aynı CSS değişkenlerinden (--hdr-icon-*) gelir. */
.icon-svg {
	width: var(--hdr-icon-size, 25px);
	height: var(--hdr-icon-size, 25px);
	display: block;
	fill: currentColor;
}
.icon-font {
	font-size: var(--hdr-icon-size, 25px);
	line-height: 1;
}
@media (max-width: 767px) {
	.icon-svg {
		width: var(--hdr-icon-size-mobile, var(--hdr-icon-size, 25px));
		height: var(--hdr-icon-size-mobile, var(--hdr-icon-size, 25px));
	}
	.icon-font {
		font-size: var(--hdr-icon-size-mobile, var(--hdr-icon-size, 25px));
	}
}

/* --- Arama: ikon tetikli, header altına açılan panel --- */
.header-search-panel {
	max-height: 0;
	overflow: hidden;
	background: var(--color-bg-soft);
	border-bottom: 0 solid var(--color-border);
	transition: max-height var(--transition), border-color var(--transition);
}
.header-search-panel .container {
	padding-top: 0;
	padding-bottom: 0;
	transition: padding var(--transition);
}
.header-search-panel.is-open {
	max-height: 90px;
	border-bottom-width: 1px;
}
.header-search-panel.is-open .container {
	padding-top: var(--space-4);
	padding-bottom: var(--space-4);
}
#search {
	display: flex;
	align-items: stretch;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	overflow: hidden;
	max-width: 520px;
	transition: border-color var(--transition), box-shadow var(--transition);
}
#search:focus-within {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-accent-soft);
}
#search .form-control {
	flex: 1 1 auto;
	border: none;
	background: transparent;
	box-shadow: none;
	padding: 10px var(--space-4);
	height: auto;
}
#search .form-control:focus {
	border: none;
	box-shadow: none;
}
#search button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	border: none;
	background: transparent;
	color: var(--color-text-muted);
	transition: color var(--transition), background var(--transition);
}
#search button:hover {
	color: var(--color-text-invert);
	background: var(--color-accent);
}

/* --- Sepet: ikon satırında, sayı rozetli (badge) --- */
#cart {
	display: block;
	position: relative;
}
#cart > .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--color-text);
	font-size: 20px;
	border-radius: 0;
}
#cart > .btn:hover,
#cart > .btn:focus {
	background: transparent;
	color: var(--color-accent);
}
/* İkon-only sepet butonu: metin (ör. "2 ürün - 349,90 TL") görsel olarak
   gizleniyor, sadece rozet (badge) sayısı gösteriliyor. Metin DOM'da
   kalmaya devam ediyor (footer.twig'teki script bu metinden sayıyı
   okuyor). */
#cart-total {
	display: none;
}
/* JS ile #cart-total metninden ayrıştırılan sayı, sağ üstte kırmızı
   rozet olarak gösterilir (bkz. footer.twig sonundaki script). */
#cart > .btn .cart-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: #c0392b;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
}
#cart > .btn .cart-badge:empty {
	display: none;
}
/* --- Sepet çekmecesi (drawer) — emare.com.tr referansı: sepet ikonuna
   tıklayınca küçük bir dropdown yerine sağdan kayarak açılan, tam
   yükseklikte bir panel + arkada karartma. #cart.cart-drawer-open ile
   açılır (bkz. cart.twig'in sonundaki script). --- */
body.cart-drawer-locked {
	overflow: hidden;
}
.cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	pointer-events: none;
}
#cart.cart-drawer-open .cart-drawer {
	visibility: visible;
	pointer-events: auto;
}
.cart-drawer-overlay {
	position: absolute;
	inset: 0;
	background: rgba(43, 42, 38, .5);
	opacity: 0;
	transition: opacity var(--transition);
}
#cart.cart-drawer-open .cart-drawer-overlay {
	opacity: 1;
}
.cart-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: 100%;
	background: var(--color-bg);
	box-shadow: var(--shadow-soft);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--transition);
}
#cart.cart-drawer-open .cart-drawer-panel {
	transform: translateX(0);
}
.cart-drawer-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}
.cart-drawer-title {
	/* footer h5 ile aynı düz/sade gövde fontu, bkz. login-heading-plain */
	font-family: var(--font-body);
	letter-spacing: 0;
	font-size: var(--fs-h3);
	font-weight: 500;
}
.cart-drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: var(--color-text);
	flex-shrink: 0;
	transition: color var(--transition);
}
.cart-drawer-close:hover {
	color: var(--color-accent);
}
.cart-drawer-close svg {
	width: 20px;
	height: 20px;
}
.cart-drawer-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0 var(--space-4);
}
.cart-drawer-item {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border);
}
.cart-drawer-item-thumb {
	flex: 0 0 auto;
	width: 72px;
	height: 90px;
	background: var(--color-bg-soft);
	overflow: hidden;
}
.cart-drawer-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cart-drawer-item-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.cart-drawer-item-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-2);
}
.cart-drawer-item-name {
	color: var(--color-text);
	font-size: var(--fs-body);
}
.cart-drawer-item-name:hover {
	color: var(--color-accent);
}
.cart-drawer-item-remove {
	flex-shrink: 0;
	display: inline-flex;
	border: none;
	background: transparent;
	color: var(--color-text-muted);
	padding: 2px;
	transition: color var(--transition);
}
.cart-drawer-item-remove:hover {
	color: var(--color-error);
}
.cart-drawer-item-remove svg {
	width: 17px;
	height: 17px;
}
.cart-drawer-item-option {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}
.cart-drawer-item-bottom {
	margin-top: auto;
	padding-top: var(--space-2);
	align-items: center;
}
.cart-drawer-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--color-border);
}
.cart-drawer-qty button {
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	color: var(--color-text);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.cart-drawer-qty button:hover:not(:disabled) {
	color: var(--color-accent);
}
.cart-drawer-qty button:disabled {
	color: var(--color-border);
	cursor: default;
}
.cart-drawer-qty span {
	min-width: 28px;
	text-align: center;
	font-size: var(--fs-small);
}
.cart-drawer-item-price {
	font-weight: 500;
	white-space: nowrap;
}
/* Ücretsiz kargo ilerleme çubuğu — Modern Tema > Sepet Barı'ndan yönetilir
   (bkz. yan-sepet.png). Panel'in en üstünde, ürün listesinin hemen üzerinde,
   sabit (scroll'a girmez). */
.cart-drawer-shipping {
	flex: 0 0 auto;
	padding: var(--space-3) var(--space-4) var(--space-4);
	border-bottom: 1px solid var(--color-border);
}
.cart-drawer-shipping-text {
	font-size: var(--fs-small);
	color: var(--color-text);
	margin: 0 0 var(--space-2);
}
.cart-drawer-shipping-bar {
	height: 6px;
	background: var(--color-bg-soft);
	overflow: hidden;
}
.cart-drawer-shipping-fill {
	height: 100%;
	transition: width var(--transition);
}
.cart-drawer-foot {
	flex: 0 0 auto;
	border-top: 1px solid var(--color-border);
	background: var(--color-bg-soft);
	padding: var(--space-4);
}
.cart-drawer-total-row {
	display: flex;
	justify-content: space-between;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	padding: var(--space-1) 0;
}
/* Ürün listesinin altındaki, sepet sayfasına gitmeden doğrudan kasaya
   yönlendiren metin bağlantısı — yazı boyutu admin'den ayarlanır. */
.cart-drawer-checkout-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-2);
	color: var(--color-text) !important;
	font-family: var(--font-body);
	font-weight: 600;
	text-decoration: none !important;
}
.cart-drawer-checkout-link:hover {
	color: var(--color-accent) !important;
}
.cart-drawer-checkout-link svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}
/* Panelin en altındaki sabit bar — arka plan/yazı rengi admin'den ayarlanır
   (bkz. yan-sepet.png'deki koyu yeşil bar). */
.cart-drawer-summary {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4);
}
.cart-drawer-summary-info {
	display: flex;
	flex-direction: column;
}
.cart-drawer-summary-label {
	font-size: var(--fs-small);
	opacity: 0.8;
}
.cart-drawer-summary-value {
	font-size: var(--fs-h4);
}
.cart-drawer-checkout {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	flex: 0 0 auto;
	color: inherit !important;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 600;
	text-decoration: none !important;
}
.cart-drawer-checkout svg {
	width: 18px;
	height: 18px;
}
.cart-drawer-empty {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding: var(--space-6);
	text-align: center;
}
.cart-drawer-empty svg {
	width: 72px;
	height: 72px;
	color: var(--color-border);
}
.cart-drawer-empty p {
	color: var(--color-text-muted);
	margin: 0;
}
.cart-drawer-continue {
	display: inline-flex;
	padding: 13px 28px;
	border: 1px solid var(--color-text);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	transition: background var(--transition), color var(--transition);
}
.cart-drawer-continue:hover {
	background: var(--color-text);
	color: var(--color-text-invert);
}
@media (max-width: 480px) {
	.cart-drawer-panel {
		width: 100%;
	}
}

/* --- Ana menü: header ile aynı satırda, sade büyük/küçük harf karışık --- */
#menu.navbar {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
	min-height: 0;
	flex: 1 1 auto;
	/* Logo ve ikonlar arasındaki alana sığacak kadar küçülebilsin diye
	   (aksi halde varsayılan min-width:auto, en az "sığmadan taşan" içerik
	   kadar geniş kalmaya zorlardı). Sığmayan kategoriler bu daralan alanda
	   #menu .navbar-nav'ın flex-wrap:wrap'ı sayesinde KENDİ İÇİNDE ikinci
	   bir satıra düşüyor — .header-inner'ın kendisi sabit tek satır
	   (nowrap) kaldığı için logo sol-üstte, ikonlar sağ-üstte sabit kalıyor
	   (bkz. res2444.png referansı: emare.com.tr'de İndirim/Koleksiyonlar
	   sığmayınca alta, ortaya düşüyor ama logo/sepet yerinden oynamıyor). */
	min-width: 0;
}
/* Çok sayıda üst kategori varsa (ör. 9+) menü 2 satıra bölünüp dağınık
   görünüyordu — tek satırda tutmaya çalışıyoruz. NOT: burada overflow-x:auto
   + overflow-y:hidden ile "sığmazsa yatay kaydır" denenmişti, ama CSS'te bir
   eksende overflow visible olmayınca diğer eksen de otomatik olarak clip
   davranışına geçiyor (spec: "computed to auto") — bu da alt kategori
   dropdown-menu'sünü (üstteki satırın hemen altına, position:absolute ile
   açılan kutu) görünmez şekilde kırpıyordu (masaüstünde "Yeni" gibi alt
   kategorisi olan öğelerin menüsü hiç açılmıyordu). Şu an kategori sayısı
   zaten tek satıra sığdığı için (bkz. .navbar-nav genişlik hesapları) kaydırma
   fallback'ine gerek yok — dropdown'ların çalışması daha kritik, o yüzden
   overflow clip'ini kaldırdık. İleride kategori sayısı yine sığmaz olursa
   overflow yerine farklı bir çözüm (ör. dropdown'ları fixed konumlandırmak)
   gerekir. */
@media (min-width: 768px) {
	/* Bootstrap'ın kendisi .navbar-collapse.collapse için overflow-x:visible
	   !important veriyor (bkz. bootstrap.min.css) — bizimkini de !important
	   yapmazsak (daha yüksek spesifiteye rağmen) kaybediyor. */
	#menu .navbar-collapse.collapse {
		display: block !important;
		height: auto !important;
		padding: 0;
	}
	#menu .navbar-nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: var(--space-1);
		/* Kategoriler arası yatay boşluk — Modern Tema > Site Üst Bölüm'den
		   yönetilir. Bu, öğelerin KENDİ padding'ine EK bir boşluk değil, TEK
		   boşluk kaynağı (bkz. #menu .navbar-nav > li > a'daki yatay
		   padding'in kaldırılması) — böylece admin 0'a kadar azaltıp
		   kategorileri bitiştirebiliyor (padding negatif olamadığı için
		   sadece padding ile bu mümkün değildi). */
		column-gap: var(--hdr-nav-gap, 16px);
		float: none;
	}
	#menu .navbar-nav > li {
		float: none;
		flex: 0 0 auto;
		white-space: nowrap;
	}
}
#menu .navbar-nav > li > a {
	font-family: var(--font-body);
	font-size: var(--hdr-nav-font-size, 24px);
	/* Normal (400) kalın, 300 fazla ince geldi — Jost artık değişken font
	   olarak yükleniyor (wght@300..600), o yüzden 350 gibi aradaki
	   değerler de gerçekten enterpole ediliyor, en yakın sabit ağırlığa
	   yuvarlanmıyor. */
	font-weight: 350;
	letter-spacing: normal;
	text-transform: none;
	color: var(--hdr-nav-color, var(--color-text));
	/* Yatay boşluk artık burada değil, .navbar-nav'ın column-gap'inde (bkz.
	   yukarısı) — dikey padding tıklama alanı için korunuyor. */
	padding: var(--space-2) 0;
	background: transparent;
	/* Hover'da altına çizgi (bkz. kayar-sekil.png referansı) — kaymayı
	   önlemek için çizgi kapalıyken de yer kaplıyor, sadece rengi
	   currentColor sayesinde her kategorinin kendi (özel renk/nav-sale
	   dahil) hover rengiyle otomatik eşleşiyor. */
	border-bottom: 2px solid transparent;
	transition: color var(--transition), border-color var(--transition);
}
/* "İndirim" vurgusu — emare.com.tr referansında kırmızı (bkz. menu.twig'deki nav-sale) */
#menu .navbar-nav > li.nav-sale > a {
	color: #ff0003;
}
#menu .navbar-nav > li.nav-sale > a:hover,
#menu .navbar-nav > li.nav-sale > a:focus {
	color: #ff0003;
	opacity: .8;
	border-bottom-color: currentColor;
}
#menu .navbar-nav > li > a:hover,
#menu .navbar-nav > li > a:focus,
#menu .navbar-nav > li.open > a {
	color: var(--color-accent);
	border-bottom-color: currentColor;
	background: transparent;
}
#menu .dropdown-menu {
	border-radius: 0;
	border: 1px solid transparent;
	box-shadow: var(--shadow-soft);
	min-width: 220px;
	/* Aşağıya doğru kayarak açılma (bkz. kayar-sekil.png) — Bootstrap'ın
	   display:none/.open>.dropdown-menu{display:block} anahtarlaması
	   ANİMASYONA UYGUN DEĞİL (display transition olamaz), o yüzden display
	   her zaman block'a sabitlenip görünürlük max-height/overflow ile
	   kontrol ediliyor (aynı teknik: .header-search-panel). Kenarlık da
	   kapalıyken transparent yapılıp kayarken beliriyor ki kapalı halde
	   0 yükseklikli kutunun etrafında ince bir çizgi görünmesin. */
	display: block;
	max-height: 0;
	overflow: hidden;
	padding: 0 var(--space-4);
	transition: max-height var(--transition), padding var(--transition), border-color var(--transition);
}
@media (min-width: 768px) {
	#menu .dropdown:hover .dropdown-menu {
		max-height: 500px;
		padding: var(--space-4);
		border-color: var(--color-border);
	}
}
#menu li.dropdown.open > .dropdown-menu {
	max-height: 500px;
}
/* Çok sayıda üst kategori olduğunda sağa yakın olanların açılır menüsü
   viewport dışına taşabiliyor — sondaki birkaç öğeyi sağa hizala. */
@media (min-width: 768px) {
	#menu .navbar-nav > li:nth-last-child(-n+3) .dropdown-menu {
		left: auto;
		right: 0;
	}
}
#menu .dropdown-menu a {
	color: var(--hdr-nav-color, var(--color-text));
	/* Ana kategori ile aynı font (body ile zaten aynıydı ama netlik için
	   açıkça yazılıyor), sadece ana kategoriyle aynı ara ağırlıkta (bkz.
	   kayar-sekil.png referansı, #menu .navbar-nav > li > a'daki 350
	   yorumu). Boyut Modern Tema > Site Üst Bölüm'den ayarlanır, masaüstü/
	   mobil aynı değeri kullanır. */
	font-family: var(--font-body);
	font-weight: 350;
	font-size: var(--hdr-sub-font-size, 13px);
	padding: var(--space-1) 0;
}
#menu .dropdown-menu a:hover {
	color: var(--color-accent);
}
#menu .see-all {
	display: inline-block;
	margin-top: var(--space-2);
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-accent);
}
#menu .navbar-header {
	display: none;
	margin: 0;
}
/* Sade, çerçevesiz hamburger — sadece ikon (referans: mobile-bolumu-header.png) */
#menu .navbar-toggle {
	border: none;
	background: transparent;
	border-radius: 0;
	margin: 0;
	padding: 6px 8px 6px 0;
	box-shadow: none;
}
#menu .navbar-toggle:hover,
#menu .navbar-toggle:focus {
	background: transparent;
}
#menu .navbar-toggle .fa {
	color: var(--color-text);
	font-size: 20px;
}

/* --- Mega menü çoklu sütun düzeni (masaüstü) ---
   default temadan devralınan mekanizma: menu.twig, alt kategorileri
   category.column sayısına göre birden fazla <ul> içine bölüyor
   (batch()); bunları yan yana dizmek için display:table kullanılıyor. */
#menu .dropdown-inner {
	display: table;
	table-layout: fixed;
}
#menu .dropdown-inner ul {
	display: table-cell;
	padding-right: var(--space-5);
	vertical-align: top;
}
#menu .dropdown-inner ul:last-child {
	padding-right: 0;
}
#menu .dropdown-inner a {
	display: block;
	min-width: 160px;
	white-space: nowrap;
}

/* --- 3. seviye (alt kategorinin altındaki kategoriler) — bkz.
   alt-kat-alt.png referansı: "Ferace" gibi kendi alt kategorisi olan bir
   alt kategori, yanında (masaüstü) veya altında (mobil, akordeon gibi)
   3. bir liste açar. Aynı max-height kayma tekniği kullanılıyor (bkz.
   #menu .dropdown-menu) — masaüstünde sağa, mobilde aşağı doğru açılır. */
#menu .dropdown-inner li.has-children {
	position: relative;
}
#menu .dropdown-inner .submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}
#menu .dropdown-inner .submenu-toggle .fa-angle-right {
	font-size: 12px;
	color: var(--color-text-muted);
	transition: transform var(--transition);
}
#menu .dropdown-inner li.has-children.open > .submenu-toggle .fa-angle-right {
	transform: rotate(90deg);
}
#menu .dropdown-submenu {
	position: absolute;
	top: 0;
	left: 100%;
	margin-left: var(--space-2);
	min-width: 200px;
	max-height: 0;
	overflow: hidden;
	padding: 0 var(--space-4);
	transition: max-height var(--transition), padding var(--transition);
	z-index: 10;
	/* DİKKAT: background/border/box-shadow burada YOK, sadece açık halde
	   (aşağıdaki :hover/.open kuralları) veriliyor. position:absolute
	   olduğu için (normal akış dışında) kapalıyken bunları rezerve etmeye
	   gerek yok — ve rezerve edilirse (ör. border:1px solid transparent)
	   border'ın kendi 2px kalınlığı + arka plan max-height:0'a rağmen
	   sıkışmayıp mor-boyle.png'deki gibi ince beyaz bir çizgi olarak
	   görünüyordu. */
}
@media (min-width: 768px) {
	#menu .dropdown-inner li.has-children:hover > .dropdown-submenu {
		max-height: 500px;
		padding: var(--space-4);
		background: var(--color-bg);
		border: 1px solid var(--color-border);
		box-shadow: var(--shadow-soft);
	}
}
/* .open sınıfı sadece mobilde (JS ile, dokunma) eklendiği için bu kural
   fiilen mobil-only — mobilde .dropdown-submenu zaten position:static +
   arka plansız/çerçevesiz akordeon (bkz. aşağıdaki mobil medya sorgusu),
   o görünümü bozmamak için burada SADECE max-height değişiyor. */
#menu .dropdown-inner li.has-children.open > .dropdown-submenu {
	max-height: 500px;
}

/* --- Mobil: hamburger + logo + ikonlar tek satırda, menü altta açılır --- */
@media (max-width: 767px) {
	.header-inner {
		gap: var(--space-2);
	}
	#logo h1 a {
		font-size: 17px;
		letter-spacing: .28em;
		padding-left: .28em;
	}
	#logo img {
		width: var(--hdr-logo-width-mobile, var(--hdr-logo-width, auto));
	}
	#menu.navbar {
		flex: 0 0 auto;
		order: -1;
		/* Bootstrap'ın .navbar'a verdiği position:relative'i kapat — açık
		   değilse aşağıdaki .navbar-collapse (position:absolute; left:0; right:0)
		   header yerine bu dar (sadece hamburger butonu genişliğindeki) kutuya
		   göre konumlanıyor ve menü ~30px'lik görünmez bir şeride sıkışıyordu. */
		position: static;
	}
	#menu .navbar-header {
		display: block;
	}
	#menu .navbar-collapse {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 40;
		background: var(--color-bg);
		border-top: 1px solid var(--color-border);
		border-color: var(--color-border);
		box-shadow: var(--shadow-soft);
		max-height: 80vh;
		overflow-y: auto;
	}
	#menu .navbar-nav {
		margin: 0;
		padding: var(--space-3) var(--gutter);
	}
	#menu .navbar-nav > li > a {
		padding: var(--space-3) 0;
		border-bottom: 1px solid var(--color-border);
		font-size: var(--hdr-nav-font-size-mobile, 18px);
	}
	#menu .dropdown-menu {
		position: static;
		float: none;
		width: 100%;
		/* common.js sayfa yüklenince masaüstü mega-menünün sağdan taşmaması için
		   her .dropdown-menu'ye satır-içi margin-left (ör. -64px) yazıyor
		   (bkz. catalog/view/javascript/common.js ~satır 73-81). Mobilde bu
		   panel zaten position:static + width:100% olduğundan o offset'e hiç
		   gerek yok — ama inline style, !important'sız bu margin:0'ı eziyordu
		   ve panel sola kayıp kenardan kırpılıyordu. !important ile kapatıyoruz. */
		margin: 0 !important;
		border: none;
		/* Kapalıyken (max-height:0) bile padding/border kendi başına yer
		   kaplayıp ince bir şerit gibi görünüyordu (bkz. mobil-boyle.png) —
		   max-height içeriği kırpar ama padding'i "sıkıştırmaz". Alt
		   padding ve çizgi rengi bu yüzden .open olana kadar sıfır/şeffaf. */
		border-bottom: 1px solid transparent;
		box-shadow: none;
		padding: 0 0 0 var(--space-3);
		background: var(--color-bg-soft);
		transition: padding var(--transition), border-color var(--transition);
	}
	#menu li.dropdown.open > .dropdown-menu {
		padding-bottom: var(--space-3);
		border-bottom-color: var(--color-border);
	}
	#menu .dropdown-inner {
		display: block;
	}
	#menu .dropdown-inner ul {
		display: block;
		padding-right: 0;
	}
	#menu .dropdown-inner a {
		min-width: 0;
		white-space: normal;
		padding: var(--space-2) 0;
	}
	#menu .see-all {
		margin-top: 0;
	}
	/* 3. seviye mobilde sağa açılan panel değil, "Ferace" satırının altına
	   girintili şekilde açılan bir akordeon (bkz. #menu .dropdown-inner
	   li.has-children.open > .dropdown-submenu — max-height kuralı zaten
	   ortak/media-sorgusuz tanımlı, burada sadece konumlandırma değişiyor). */
	#menu .dropdown-submenu {
		position: static;
		left: auto;
		top: auto;
		margin-left: 0;
		border: none;
		box-shadow: none;
		background: transparent;
		padding: 0 0 0 var(--space-3);
		min-width: 0;
	}
}

/* --- İkincil şerit: header altında iki kısa link (mobil referansında
   "Kombin Önerileri | Mağazalarımız") — sade, isteğe bağlı kullanım. --- */
.header-subnav {
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--fs-small);
}
@media (max-width: 767px) {
	.header-subnav {
		display: flex;
	}
}
.header-subnav a {
	color: var(--color-text);
}
.header-subnav a:hover {
	color: var(--color-accent);
}
.header-subnav .divider {
	width: 1px;
	height: 14px;
	background: var(--color-border);
}

/* --- Footer (masaustu-footer.png / mobil-footer.png referansı) ---
   Renk/boşluk Modern Tema > Site Alt Bölümü'nden satır-içi style ile
   geliyor (bkz. footer.twig) — buradaki background/padding sadece admin
   panel hiç açılmamışsa (ayar hiç kaydedilmemişse) devreye giren
   varsayılan. footer.twig #content'in İÇİNDE değil, common/home.twig'de
   {{ footer }} en dışta (section'ın dışında) çağrıldığından zaten tam
   genişlikte — kategori kartlarındaki gibi ayrı bir "breakout" hilesine
   gerek yok (canlıda doğrulandı). */
footer {
	background: var(--color-bg-dark);
	color: var(--color-text-invert);
	padding: var(--space-7) 0 var(--space-4);
	margin-top: var(--space-7);
}
footer h5 {
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-text-invert);
	margin-bottom: var(--space-3);
}
footer a {
	color: #c8c2b6;
}
footer a:hover {
	color: var(--color-text-invert);
}
footer p {
	color: #c8c2b6;
	font-size: var(--fs-small);
}

/* --- Alt bilgi (copyright) şeridi: footer'ın DIŞINDA ayrı bir şerit
   (bkz. footer.twig) — böylece footer'ın kendi sol/sağ boşluk ayarından
   bağımsız olarak her zaman tam genişlikte kalır, admin panelden kendi
   arka plan/yazı rengi + boyutu + metni ayrı yönetilir. */
.footer-copyright {
	width: 100%;
	background: var(--color-accent-dark);
}
.footer-copyright-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-3);
	width: 100%;
	/* .container'ın orta genişlik/otomatik-boşluk davranışı yerine
	   şeridi gerçekten uçtan uca kullanıp yazıyı sol, ikonları sağ kenara
	   admin panelden ayarlanan boşlukla dayıyor (--copyright-pad-* satır
	   içi style ile footer.twig'den geliyor, masaüstü/mobil ayrı). */
	padding-top: var(--space-3);
	padding-bottom: var(--space-3);
	padding-left: var(--copyright-pad-left, 10px);
	padding-right: var(--copyright-pad-right, 10px);
}
@media (max-width: 767px) {
	.footer-copyright-inner {
		padding-left: var(--copyright-pad-left-mobile, 10px);
		padding-right: var(--copyright-pad-right-mobile, 10px);
	}
}
.footer-copyright p {
	margin: 0;
	letter-spacing: 0.02em;
}
.footer-payment-icons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
}
.footer-payment-icons img {
	height: 26px;
	width: auto;
	display: block;
	/* İkonlar hangi renkte gelirse gelsin (kaynak SVG/PNG'nin kendi rengi
	   ne olursa olsun) düz beyaza çeviriyor: önce her pikseli siyaha
	   düşürüp (brightness 0), sonra tersine çeviriyor (invert). Şeffaflık
	   korunur, sadece dolu pikseller etkilenir. */
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

/* --- Footer sütunları + bülten aboneliği --- */
.footer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr) 1.4fr;
	gap: var(--space-6);
	padding-bottom: var(--space-6);
}
.footer-column-links li {
	margin-bottom: var(--space-2);
}
.footer-column-links li:last-child {
	margin-bottom: 0;
}
.footer-newsletter p {
	color: #c8c2b6;
	font-size: var(--fs-small);
	margin: 0 0 var(--space-3);
}
.footer-newsletter-form {
	display: flex;
	gap: var(--space-2);
}
.footer-newsletter-form input {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--space-2) var(--space-3);
	border: none;
	background: var(--color-text-invert);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-small);
}
.footer-newsletter-form input::placeholder {
	color: var(--color-text-muted);
}
.footer-newsletter-form button {
	flex: 0 0 auto;
	padding: var(--space-2) var(--space-4);
	background: var(--color-accent);
	color: var(--color-text-invert);
	border: none;
	white-space: nowrap;
	font-family: var(--font-body);
	font-size: var(--fs-small);
	transition: background var(--transition);
}
.footer-newsletter-form button:hover {
	background: var(--color-accent-dark);
}
@media (max-width: 767px) {
	.footer-grid {
		display: block;
		padding-bottom: 0;
	}
	.footer-column {
		border-bottom: 1px solid rgba(247, 245, 241, 0.15);
		padding: var(--space-3) 0;
	}
	.footer-column-toggle {
		position: relative;
		margin: 0;
		padding-right: var(--space-5);
		cursor: pointer;
	}
	.footer-column-toggle::after {
		content: '+';
		position: absolute;
		right: 0;
		top: 0;
		font-size: 1.3em;
		line-height: 1;
		transition: transform var(--transition);
	}
	.footer-column.is-open .footer-column-toggle {
		margin-bottom: var(--space-3);
	}
	.footer-column.is-open .footer-column-toggle::after {
		transform: rotate(45deg);
	}
	.footer-column-links {
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--transition);
	}
	.footer-column.is-open .footer-column-links {
		max-height: 500px;
	}
	.footer-newsletter {
		padding: var(--space-5) 0 var(--space-3);
	}
}

/* =================================================================
   Faz 4 — Ana Sayfa Tasarımı (Görsel Düzen)
   Kalan .demo-* sınıfları hâlâ kullanımda: kategori kartları (henüz gerçek
   modülü yok) ve marka söylemi (artık HTML modülünün içeriğine gömülü,
   bkz. Faz 10). Hero/öne-çıkanlar sahte blokları Faz 10'da gerçek
   banner/featured modülleriyle değiştirildiği için kaldırıldı.
================================================================= */

/* --- Bölüm başlığı (kategori/öne çıkanlar ortak) --- */
.demo-section-head {
	text-align: center;
	margin-bottom: var(--space-6);
}
.demo-section-head h2 {
	margin-top: var(--space-2);
}

/* --- Kategori kartları --- */
/* Kartlar .demo-categories'in .container'ı (max-width + gutter) içinde
   kalmak yerine viewport genişliğine taşıyor — "container breakout"
   tekniği: calc(-50vw + 50%) her zaman geçerli sol/sağ kenar boşluğunu
   sıfırlar (üst elementin genişliğinden bağımsız). Modern Tema > Ana
   Sayfa'dan yönetilen --cat-inset-left/right (bkz. home.twig) bu sıfırdan
   itibaren ekstra bir iç boşluk bırakmak için kullanılıyor — admin panelde
   "Sağ/Sol Boşluk" 0 ise tam taşma, pozitif değer verilirse o kadar kenar
   boşluğu kalır. Kartlar arası boşluk da --cat-gap ile aynı yerden gelir.
   Başlık (.demo-section-head) .container'ın padding'inde kalmaya devam
   ediyor, sadece kart ızgarası taşıyor. */
/* .section sınıfının kendi padding-top/bottom'ını (var(--space-7)) sıfırlıyoruz
   — bölüm boşluğu artık admin'den gelen inline margin-top/bottom ile
   yönetiliyor (negatif değerle komşu bölüme yaklaştırılabilsin diye,
   padding negatif olamaz). Sıfırlamazsak ikisi toplanır. */
.demo-categories {
	padding-top: 0;
	padding-bottom: 0;
}
/* KÖK NEDEN (soldan boşluk, sağdan taşma bug'ı): Bootstrap'ın .container
   kuralı her breakpoint'te SABİT bir width verir (ör. ≥1200px'te 1170px),
   .row/margin(-auto) ile dengelenmek üzere TASARLANMIŞTIR — ama bu bölüm
   artık content_bottom üzerinden #content.col-sm-12'nin İÇİNDE render
   ediliyor, yani .container'ın asıl ebeveyni fazladan bir .col-sm-12
   padding'i kadar DAHA DAR. Sabit width bu daha dar alana sığmayınca
   margin:auto simetrik bölüşemiyor (tamamı sağda taşma olarak birikiyor).
   width:100% ile Bootstrap'ın sabit değerini geçersiz kılıp gerçek
   mevcut genişliğe göre esnetiyoruz; max-width (yukarıdaki .container
   kuralından) üst sınırı zaten koruyor. */
.demo-categories .container {
	width: 100%;
}
.demo-category-grid {
	display: grid;
	grid-template-columns: repeat(var(--cat-columns, 4), 1fr);
	gap: var(--cat-gap, 2px);
	margin-left: calc(-50vw + 50% + var(--cat-inset-left, 0px));
	margin-right: calc(-50vw + 50% + var(--cat-inset-right, 0px));
}
.demo-category-card {
	/* Yükseklik sabit değil — Modern Tema > Ana Sayfa'daki Genişlik/Yükseklik
	   ayarından gelen orana göre (bkz. home.twig'deki inline aspect-ratio)
	   otomatik hesaplanıyor, dikey (portre) bir kutu elde etmek için. */
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: var(--card-tint, var(--color-bg-soft));
	border: 1px solid var(--color-border);
	padding: var(--space-4);
	transition: box-shadow var(--transition);
}
.demo-category-card:hover {
	box-shadow: var(--shadow-soft);
}
.demo-category-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Görselli kartlarda okunabilirlik için alttan koyu bir gradyan — tint'li
   (görselsiz) kartlar bundan etkilenmez, eski haliyle kalır. */
.demo-category-card.has-image {
	border-color: transparent;
}
.demo-category-card.has-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 60%);
}
.demo-category-name {
	position: relative;
	z-index: 1;
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-text);
}
.demo-category-card.has-image .demo-category-name {
	color: #fff;
}

/* Mobilde sütun sayısı da admin'den (Sütun Sayısı - Mobil) yönetiliyor —
   masaüstü değerinden bağımsız, --cat-mobile-columns (bkz. categories.twig). */
@media (max-width: 767px) {
	.demo-category-grid {
		grid-template-columns: repeat(var(--cat-mobile-columns, 2), 1fr);
	}
}

/* --- Marka söylemi: sade ama güçlü ikili düzen (görsel + metin) ---
   Görsel sol/metin sağ (masaüstü); mobilde metin önce, görsel sonra
   gelsin diye DOM sırası aynı kalıp column-reverse ile görsel çevriliyor
   (bkz. son-satir-dizayn.png referansı). Artık HTML modülünün içeriğinde
   (admin'den resim + başlık + boş satırla ayrılmış paragraflar). */
.demo-statement {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	display: flex;
	align-items: stretch;
}
.demo-statement-media {
	flex: 0 0 40%;
	max-width: 40%;
	min-height: 420px;
}
.demo-statement-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.demo-statement-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--space-7) var(--space-6);
}
.demo-statement-body h2 {
	margin: 0 0 var(--space-4);
}
.demo-statement-body p {
	color: var(--color-text-muted);
	margin: 0 0 var(--space-3);
}
.demo-statement-body p:last-child {
	margin-bottom: 0;
}
.demo-statement.is-reversed {
	flex-direction: row-reverse;
}
@media (max-width: 767px) {
	.demo-statement,
	.demo-statement.is-reversed {
		flex-direction: column-reverse;
	}
	.demo-statement-media,
	.demo-statement-body {
		max-width: 100%;
		width: 100%;
	}
	.demo-statement-media {
		min-height: 320px;
	}
	.demo-statement-body {
		padding: var(--space-5) var(--space-4);
		text-align: center;
	}
}

/* --- Yorumlarınız (müşteri yorumları) ---
   Kategori kartlarıyla aynı desen: admin'den gelen margin ile boşluk
   (.section'ın kendi padding'i sıfırlanıyor), .container genişliği
   #content.col-sm-12 içine doğru sığsın diye 100% (bkz. .demo-categories
   .container'daki aynı düzeltmenin notu). */
.demo-testimonials {
	padding-top: 0;
	padding-bottom: 0;
}
.demo-testimonials .container {
	width: 100%;
}
.demo-testimonials-grid {
	display: grid;
	grid-template-columns: repeat(var(--test-columns, 3), 1fr);
	gap: var(--test-gap, 24px);
}
.demo-testimonial-card {
	text-align: center;
	padding: var(--space-5);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
}
.demo-testimonial-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	margin: 0 auto var(--space-3);
}
.demo-testimonial-text {
	font-style: italic;
	color: var(--color-text-muted);
	line-height: var(--lh-body);
	margin: 0 0 var(--space-3);
}
.demo-testimonial-name {
	display: block;
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-accent);
}
@media (max-width: 767px) {
	.demo-testimonials-grid {
		grid-template-columns: repeat(var(--test-mobile-columns, 1), 1fr);
	}
}

/* --- Öne Çıkan Ürünler kartı (anasayfa-urunler.png referansı) ---
   Sade: görsel + isim + indirim rozeti/fiyat. Puan, açıklama ve
   sepete-ekle/favori/karşılaştır butonları kasıtlı olarak yok — kart
   tıklanınca ürün sayfasına gidiyor. */
/* .section-tight'ın kendi padding-top/bottom'ını (var(--space-5)) sıfırlıyoruz
   — bkz. .demo-categories'teki aynı not, bölüm boşluğu artık admin'den
   gelen inline margin-top/bottom ile yönetiliyor. */
.demo-featured-section {
	padding-top: 0;
	padding-bottom: 0;
}
/* Başlık ("Koleksiyonun Öne Çıkanları") ile ürün ızgarası arasındaki
   boşluk — .demo-section-head Kategori Kartları ile paylaşılan genel bir
   class olduğundan, onu etkilemeden sadece bu bölüme özel daraltıyoruz. */
.demo-featured-section .demo-section-head {
	margin-bottom: var(--space-3);
}
/* Ürün ızgarası artık gerçek bir Swiper (hero banner ile aynı kütüphane) —
   masaüstünde 6, tablette 3, mobilde 2 ürün aynı anda görünür (bkz.
   featured.twig'deki breakpoints), geri kalanı ok tuşlarıyla veya
   parmakla kaydırılarak açılır. Kategori kartlarındaki gibi "container
   breakout" ile .container'ın gutter'ından taşıp viewport genişliğine
   yayılıyor — Sağ/Sol boşluk alanları --feat-inset-left/right ile
   taşmadan itibaren bırakılacak kenar boşluğu anlamına geliyor. */
/* opencart.css (3. parti) .swiper-viewport'a varsayılan olarak beyaz 4px
   çerçeve + gölge + alt boşluk basıyor (hero slider'da olduğu gibi burada
   da "çerçeve" gibi görünüyordu) — hero banner'da .home-hero-wrap için
   zaten sıfırlanmıştı, aynı sıfırlamayı burada da uyguluyoruz. */
.demo-featured-section .swiper-viewport {
	margin: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}
.demo-featured-grid.swiper-container {
	margin-left: calc(-50vw + 50% + var(--feat-inset-left, 0px));
	margin-right: calc(-50vw + 50% + var(--feat-inset-right, 0px));
	padding-top: 4px;
	padding-bottom: 4px;
}
.demo-featured-grid .swiper-slide {
	height: auto;
}
/* opencart.css'in .swiper-button-prev/next'e :before ile bastığı kendi ok
   ikonunu kapatıyoruz — banner.twig'deki hero slider'la aynı sebep,
   kendi <i> ikonumuzla üst üste binmesin diye. */
.demo-featured-grid .swiper-button-prev:before,
.demo-featured-grid .swiper-button-next:before {
	content: none !important;
}
.demo-featured-section .banner-nav {
	position: absolute !important;
	top: 40% !important;
	transform: translateY(-50%);
	z-index: 10;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: var(--feat-nav-size, 40px);
	height: var(--feat-nav-size, 40px);
	border-radius: var(--feat-nav-radius, 20px);
	color: var(--color-text);
	font-size: calc(var(--feat-nav-size, 40px) * 0.36);
	background: rgba(255, 255, 255, var(--feat-nav-opacity, .95));
	box-shadow: var(--shadow-soft);
	cursor: pointer;
}
.demo-featured-section .banner-nav-prev {
	left: var(--space-2) !important;
}
.demo-featured-section .banner-nav-next {
	right: var(--space-2) !important;
}
.demo-featured-card {
	display: block;
	color: var(--color-text);
	text-decoration: none;
}
.demo-featured-card:hover,
.demo-featured-card:focus {
	color: var(--color-text);
	text-decoration: none;
}
.demo-featured-image {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--color-bg-soft);
	margin-bottom: var(--space-2);
	overflow: hidden;
}
.demo-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition);
}
.demo-featured-card:hover .demo-featured-image img {
	transform: scale(1.03);
}
.demo-featured-addcart {
	position: absolute;
	left: var(--space-3);
	right: var(--space-3);
	bottom: var(--space-3);
	border: 2px solid var(--color-text);
	border-radius: var(--radius);
	background: var(--color-bg);
	color: var(--color-text);
	font-size: var(--fs-small);
	font-weight: 700;
	text-align: center;
	padding: var(--space-2) var(--space-3);
	cursor: pointer;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity var(--transition), transform var(--transition);
}
.demo-featured-addcart.is-outofstock {
	cursor: not-allowed;
	color: var(--color-text-muted);
	border-color: var(--color-border);
}
.demo-featured-card:hover .demo-featured-addcart {
	opacity: 1;
	transform: translateY(0);
}
.demo-featured-name {
	font-size: var(--fs-small);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: var(--space-1);
}
.demo-featured-price-row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.demo-featured-discount {
	flex: 0 0 auto;
	background: var(--color-text);
	color: var(--color-text-invert);
	font-size: var(--fs-small);
	font-weight: 600;
	padding: var(--space-1) var(--space-2);
	border-radius: 4px;
}
.demo-featured-prices {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.demo-featured-price-old {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	text-decoration: line-through;
}
.demo-featured-price-new {
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--color-error);
}

/* =================================================================
   Faz 10 — Ana Sayfa İçerik Modülleri (gerçek Banner/Featured modülleri)
================================================================= */

/* --- Hero (Banner modülü, swiper) ---
   catalog/view/javascript/jquery/swiper/css/opencart.css (üçüncü parti,
   kütüphaneyle birlikte geliyor) .swiper-viewport'a beyaz kenarlık,
   gölge ve margin veriyor, .swiper-container'a da margin:auto uyguluyor
   — ikisi birleşince hero tam genişlik yerine ortada dar bir kutu gibi
   görünüyordu. Tüm sarmalayıcıları !important ile tam genişliğe
   sabitleyip o dekoratif stilleri burada bilinçli olarak eziyoruz. */
/* Artık content_bottom'daki diğer modüllerle aynı .container içinde
   render edildiğinden (bkz. Faz — Sürükle-Bırak Bölümler), tam genişlik
   için container breakout gerekiyor — kategori/öne çıkan ızgaralarıyla
   aynı --hero-inset-left/right deseni (bkz. banner.twig). */
.home-hero-wrap {
	/* width KASITLI OLARAK yok — auto width, aşağıdaki margin'lerin
	   kutuyu viewport kenarlarına tam olarak germesine izin veriyor.
	   width:100% eklenirse kutu .container'ın genişliğine SABİTLENİR ve
	   margin'ler sadece onu kaydırır, tam genişlik kırılır. */
	margin-left: calc(-50vw + 50% + var(--hero-inset-left, 0px));
	margin-right: calc(-50vw + 50% + var(--hero-inset-right, 0px));
}
.home-hero-wrap .swiper-viewport,
.home-hero-wrap .swiper-container,
.home-hero-wrap .swiper-wrapper,
.home-hero-wrap .swiper-slide {
	width: 100% !important;
	max-width: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
/* margin:0!important .home-hero-wrap'in KENDİSİNDEN kasıtlı olarak
   çıkarıldı — Modern Tema > Ana Sayfa'dan yönetilen slider boşluğu
   (bkz. home.twig inline style) buraya inline margin yazıyor, inline
   stil ancak !important OLMAYAN kural varsa kazanabiliyor. İç swiper
   elementleri (Bootstrap/varsayılan margin'lerini ezmek için) yine de
   !important ile sıfırlanmaya devam ediyor. */
.home-hero-wrap .swiper-viewport,
.home-hero-wrap .swiper-container,
.home-hero-wrap .swiper-wrapper,
.home-hero-wrap .swiper-slide {
	margin: 0 !important;
}
.home-hero-wrap .swiper-viewport {
	overflow: hidden;
	position: relative;
}
.home-hero-wrap .swiper-container {
	position: relative;
}
.home-hero-wrap .swiper-slide {
	position: relative;
}
.home-hero-wrap .swiper-slide img {
	width: 100%;
	display: block;
}
/* opencart.css, .swiper-button-prev/next'e :before ile kendi ok
   ikonunu basıyor; biz banner.twig içinde kendi <i> ikonumuzu
   koyduğumuz için o ikisi üst üste binmesin diye kapatıyoruz. */
.home-hero-wrap .swiper-button-prev:before,
.home-hero-wrap .swiper-button-next:before {
	content: none !important;
}

/* Masaüstü/mobil ayrı slider (Modern Tema > Ana Sayfa'dan yönetilir) —
   ikisi de DOM'da birlikte render edilir, hangisinin görüneceği ekran
   genişliğine göre CSS ile belirlenir (breakpoint: 768px, sitenin geri
   kalanıyla aynı). Görsellerin ORANI admin panelde ayarlanan
   genişlik/yükseklik değerine göre resize() ile belirlenir — masaüstünde
   olduğu gibi mobilde de img doğal (auto) yükseklikte, tam genişlikte
   basılır; yüklenen görsel bu orana tam uymazsa boşluk (letterbox)
   oluşabilir, o yüzden admin formundaki ölçüler yüklenen görsellerle
   birebir eşleşmeli. */
@media (max-width: 767px) {
	.hero-desktop-slider {
		display: none !important;
	}
}
@media (min-width: 768px) {
	.hero-mobile-slider {
		display: none !important;
	}
}

/* Görsel üzerine bindirilen başlık (banner_image.title) — emare.com.tr
   referansındaki büyük, harf aralıklı, ortada başlık hissi. */
.banner-caption {
	position: absolute;
	left: 0;
	right: 0;
	top: 62%;
	transform: translateY(-50%);
	text-align: center;
	pointer-events: none;
	padding: 0 var(--gutter);
}
.banner-caption-text {
	display: inline-block;
	max-width: 100%;
	font-family: var(--font-heading);
	font-size: clamp(28px, 5vw, 64px);
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
	white-space: normal;
}

/* Önceki/sonraki ok kontrolleri — sade, arka planı olmayan, kenarlara
   yakın, dikeyde ortalı. Swiper 3.x'in nextButton/prevButton seçenekleri
   ile bu class'lara bağlanıyor (bkz. banner.twig). */
/* opencart.css'in .swiper-viewport .swiper-button-prev/next kuralları
   (left/right/opacity, masaüstünde hover'da belirme) bizimkinden daha
   spesifik olduğu için bu değerleri !important ile eziyoruz — aksi halde
   oklar görünmez/yanlış konumda kalıyordu. */
.home-hero-wrap .banner-nav {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%);
	z-index: 10;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	color: var(--color-text);
	font-size: 16px;
	background: rgba(255, 255, 255, .5);
	box-shadow: var(--shadow-soft);
	cursor: pointer;
	transition: opacity var(--transition), background var(--transition);
	opacity: .9 !important;
}
.home-hero-wrap .banner-nav:hover {
	opacity: 1 !important;
	background: rgba(255, 255, 255, .85);
}
.home-hero-wrap .banner-nav-prev {
	left: var(--space-3) !important;
}
.home-hero-wrap .banner-nav-next {
	right: var(--space-3) !important;
}
.banner-nav.swiper-button-disabled {
	display: none;
}

@media (max-width: 767px) {
	.banner-caption-text {
		font-size: clamp(22px, 8vw, 36px);
	}
}

/* --- Öne çıkanlar (Featured modülü) ---
   Featured modülü aynı .product-thumb/.product-layout sınıflarını
   kullanıyor, Faz 5'teki kurallardan otomatik faydalanıyor. Sadece
   başlığı ve üstteki boşluğu ayarlıyoruz. */
#common-home #content > h3 {
	text-align: center;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: var(--fs-h2);
	text-transform: none;
	letter-spacing: normal;
	margin-bottom: var(--space-6);
}
/* Konteynerin kenar boşluğuna ek güvence — sağ/sol boşluk hiçbir
   koşulda sıfırlanmasın. */
#common-home {
	padding-left: 0;
	padding-right: 0;
}
#common-home .container {
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}
@media (max-width: 480px) {
	#common-home .container {
		padding-left: var(--space-3);
		padding-right: var(--space-3);
	}
}

/* =================================================================
   Faz 5 — Kategori / Listeleme Sayfası
   Not: grid/liste geçişi common.js (#list-view / #grid-view) tarafından
   .product-grid / .product-list class'larını element üzerinde DEĞİŞTİREREK
   yapılıyor — bu yüzden float/margin mantığı (görsel solda, caption
   yanında vb.) korunuyor, sadece renk/tipografi/boşluk değişti.
================================================================= */

#product-category .breadcrumb,
.breadcrumb {
	background: var(--color-bg-soft);
	border-radius: 0;
	padding: var(--space-2) var(--space-3);
	font-size: var(--fs-small);
}
.breadcrumb > li + li::before {
	color: var(--color-text-muted);
}
.breadcrumb a {
	color: var(--color-text-muted);
}
.breadcrumb a:hover {
	color: var(--color-accent);
}
.breadcrumb > .active {
	color: var(--color-text);
}

#product-category h2,
#product-search h2 {
	margin-top: var(--space-5);
}
#product-category h3 {
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-text-muted);
	border-bottom: 1px solid var(--color-border);
	padding-bottom: var(--space-2);
}

/* --- Sırala / göster / görünüm kontrolleri --- */
#product-category .btn-group .btn,
#compare-total.btn {
	border-radius: 0;
	border-color: var(--color-border);
	color: var(--color-text);
	background: var(--color-bg);
}
#product-category .btn-group .btn.active,
#product-category .btn-group .btn:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text-invert);
}
#compare-total.btn {
	text-decoration: none;
}
.input-group-addon {
	background: var(--color-bg-soft);
	border-color: var(--color-border);
	border-radius: 0;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}
#input-sort, #input-limit {
	border-radius: 0;
}

/* --- Ürün kartı (grid + liste ortak) --- */
.product-thumb {
	border: 1px solid var(--color-border);
	margin-bottom: var(--space-4);
	overflow: auto;
	transition: box-shadow var(--transition);
}
.product-thumb:hover {
	box-shadow: var(--shadow-soft);
}
.product-thumb .image {
	text-align: center;
	background: var(--color-bg-soft);
}
.product-thumb .image a {
	display: block;
}
.product-thumb .image a:hover {
	opacity: 0.85;
}
.product-thumb .image img {
	margin-left: auto;
	margin-right: auto;
}
.product-grid .product-thumb .image {
	float: none;
}
@media (min-width: 767px) {
	.product-list .product-thumb .image {
		float: left;
		width: 230px;
		padding: 0;
	}
}
.product-thumb h4 {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-small);
	text-transform: uppercase;
	letter-spacing: .02em;
	margin-top: var(--space-3);
}
.product-thumb h4 a {
	color: var(--color-text);
}
.product-thumb h4 a:hover {
	color: var(--color-accent);
}
.product-thumb .caption {
	padding: var(--space-3) var(--space-4);
	min-height: 180px;
}
.product-list .product-thumb .caption {
	margin-left: 230px;
}
@media (max-width: 1200px) {
	.product-grid .product-thumb .caption {
		min-height: 210px;
		padding: var(--space-3) var(--space-2);
	}
}
@media (max-width: 767px) {
	.product-list .product-thumb .caption {
		min-height: 0;
		margin-left: 0;
		padding: var(--space-3) var(--space-2);
	}
	.product-grid .product-thumb .caption {
		min-height: 0;
	}
}

.product-thumb .rating {
	padding-bottom: var(--space-2);
}
.rating .fa-stack {
	font-size: 8px;
}
.rating .fa-star-o {
	color: var(--color-border);
	font-size: 14px;
}
.rating .fa-star {
	color: var(--color-accent);
	font-size: 14px;
}
.rating .fa-star + .fa-star-o {
	color: var(--color-accent-dark);
}

.product-thumb .price {
	color: var(--color-text);
	font-size: var(--fs-body);
}
.product-thumb .price-new {
	font-weight: 600;
	color: var(--color-accent-dark);
}
.product-thumb .price-old {
	color: var(--color-text-muted);
	text-decoration: line-through;
	margin-left: var(--space-2);
	font-weight: 400;
}
.product-thumb .price-tax {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	display: block;
}

.product-thumb .button-group {
	border-top: 1px solid var(--color-border);
	background: var(--color-bg);
	overflow: auto;
}
.product-list .product-thumb .button-group {
	border-left: 1px solid var(--color-border);
}
@media (max-width: 768px) {
	.product-list .product-thumb .button-group {
		border-left: none;
	}
}
.product-thumb .button-group button {
	width: 60%;
	border: none;
	display: inline-block;
	float: left;
	background: var(--color-bg);
	color: var(--color-text);
	line-height: 42px;
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-align: center;
	text-transform: uppercase;
}
.product-thumb .button-group button + button {
	width: 20%;
	border-left: 1px solid var(--color-border);
}
.product-thumb .button-group button:hover {
	color: var(--color-text-invert);
	background: var(--color-accent);
	text-decoration: none;
	cursor: pointer;
}
@media (max-width: 1200px), (max-width: 767px) {
	.product-thumb .button-group button,
	.product-thumb .button-group button + button {
		width: 33.33%;
	}
}

/* =================================================================
   Faz 6 — Ürün Detay Sayfası
   Not: HTML/twig yapısı DEĞİŞTİRİLMEDİ (sepete ekleme AJAX'ı, review,
   dosya yükleme, tarih seçici gibi JS'e bağlı riskli alan) — sadece
   CSS ile giydirildi. `.product-thumb` altındaki ilgili ürünler bloğu
   Faz 5'teki kurallardan otomatik faydalanıyor.
================================================================= */

#product-product h1 {
	font-size: var(--fs-h2);
	margin: 0;
}
/* name-resm.png referansındaki gibi düz/sade gövde fontu — admin'den
   tema başlık fontu (Cormorant) ile değiştirilebilir. */
#product-product h1.product-title-plain {
	font-family: var(--font-body);
	letter-spacing: 0;
}
/* Ürün başlığı + alışveriş listesi / karşılaştırma ikonları — tek satırda,
   ikonlar arka plansız/çerçevesiz düz simge (name-resm.png referansı). */
#product-product .product-title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-3);
}
#product-product .wishlist-plain-btn {
	flex-shrink: 0;
	background: none;
	border: none;
	padding: var(--space-1);
	margin-top: 2px;
	font-size: 22px;
	line-height: 1;
	color: var(--color-text);
	cursor: pointer;
	transition: var(--transition);
}
#product-product .wishlist-plain-btn:hover {
	color: var(--color-accent);
}
#product-product .wishlist-plain-btn + .wishlist-plain-btn {
	margin-left: -4px;
}

/* --- Görsel galerisi --- */
.thumbnails {
	overflow: auto;
	clear: both;
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-3) 0;
}
.thumbnails > li {
	display: block;
}
.thumbnails > li > .thumbnail {
	display: block;
	border: 1px solid var(--color-border);
	border-radius: 0;
	padding: 0;
}
.thumbnails > li > .thumbnail:hover {
	border-color: var(--color-accent);
}
.thumbnails .image-additional {
	display: inline-block;
	width: 74px;
	margin: var(--space-2) var(--space-2) 0 0;
}

/* --- Sekmeler (açıklama / özellik / yorum) --- */
.nav-tabs {
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-4);
}
.nav-tabs > li > a {
	border-radius: 0;
	border: none;
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	padding: var(--space-2) var(--space-3);
	margin-right: var(--space-2);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	color: var(--color-text);
	background: transparent;
	border: none;
	border-bottom: 2px solid var(--color-accent);
}
.nav-tabs > li > a:hover {
	background: transparent;
	border-color: transparent;
	color: var(--color-text);
}

/* --- Fiyat & stok bilgisi --- */
#product-product .list-unstyled li {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	margin-bottom: var(--space-1);
}
#product-product .list-unstyled h2 {
	color: var(--color-accent-dark);
	margin: var(--space-2) 0;
}

/* --- Ürün seçenekleri & sepete ekle --- */
#product h3 {
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-weight: 500;
}
#product hr {
	border-color: var(--color-border);
}
#button-cart {
	margin-top: var(--space-2);
}

/* --- Güven rozetleri (Modern Tema > Ürün Sayfası'ndan yönetilir) --- */
.product-badges {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: var(--space-4) 0 0 0;
	padding: var(--space-3) 0 0 0;
	border-top: 1px solid var(--color-border);
}
.product-badges li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}
.product-badges .fa {
	width: 18px;
	text-align: center;
	color: var(--color-accent);
}

/* --- Puanlama (ürün üstü özet) --- */
#product-product .rating .fa-star-o {
	color: var(--color-border);
}
#product-product .rating .fa-star {
	color: var(--color-accent);
}

/* --- İlişkili ürünler başlığı ("Benzer Ürünler") ---
   #product-product içinde #content'in doğrudan altındaki tek h3 budur
   (seçenek başlıkları #product içinde daha derinde, yukarıdaki #product h3
   kuralına düşüyor). #product-product ile scoplamak category.twig'teki
   aynı id="content" ile çakışmayı önlüyor. */
#product-product #content > h3 {
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-text);
	margin-top: var(--space-6);
	margin-bottom: var(--space-4);
}

/* =================================================================
   Faz 7 — Diğer Sayfalar (Görsel Tutarlılık)
   Bu bölüm sayfa-özel twig kopyalamak yerine, sepet/checkout/hesabım/
   arama/statik sayfalar/404 gibi ~40 sayfada ORTAK kullanılan Bootstrap
   bileşenlerini (panel, table, alert, accordion vb.) tasarım sistemine
   göre kaplar. Bu sayfalar `modern/template/` altında henüz kopyalanmadı
   — event/theme.php per-route fallback ile `default` temanın HTML'ini
   kullanıyorlar, ama header/footer (dolayısıyla bu stylesheet) `modern`e
   ait olduğu için otomatik olarak görsel tutarlılık kazanıyorlar. İleride
   bir sayfanın YAPISI da değişecekse (ör. checkout adımları) o zaman ayrı
   bir twig kopyalanıp Faz 3/5/6'daki gibi işlenir; işlevsel test Faz 12'de.
================================================================= */

/* --- Paneller (checkout adımları, hesabım kutuları) --- */
.panel {
	border-radius: 0;
	border: 1px solid var(--color-border);
	box-shadow: none;
	margin-bottom: var(--space-4);
}
.panel-default > .panel-heading {
	background: var(--color-bg-soft);
	border-color: var(--color-border);
	border-radius: 0;
	padding: var(--space-3) var(--space-4);
}
.panel-title {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 500;
	color: var(--color-text);
}
.panel-title .accordion-toggle {
	color: var(--color-text);
}
.panel-title .accordion-toggle:hover {
	color: var(--color-accent);
}
.panel-body {
	padding: var(--space-4);
}
.panel-group .panel {
	margin-bottom: var(--space-3);
}

/* --- Tablolar (sepet, sipariş listesi) --- */
.table {
	font-size: var(--fs-small);
}
.table > thead > tr > th {
	border-bottom: 2px solid var(--color-border);
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th {
	border-color: var(--color-border);
	vertical-align: middle;
}
.table-hover > tbody > tr:hover {
	background: var(--color-bg-soft);
}

/* --- Uyarılar --- */
.alert {
	border-radius: 0;
	border-width: 1px;
	font-size: var(--fs-small);
}
.alert-success {
	background: var(--color-accent-soft);
	border-color: var(--color-accent);
	color: var(--color-text);
}
.alert-danger {
	background: #f6e9e7;
	border-color: var(--color-error);
	color: var(--color-error);
}
.alert-info {
	background: var(--color-bg-soft);
	border-color: var(--color-border);
	color: var(--color-text);
}
.alert-warning {
	background: #f7f0e2;
	border-color: #c9a24a;
	color: #6b5320;
}

/* --- Ek buton renkleri (sil / bilgi) --- */
.btn-danger {
	background: transparent;
	border: 1px solid var(--color-error);
	color: var(--color-error);
	border-radius: 0;
}
.btn-danger:hover {
	background: var(--color-error);
	color: var(--color-text-invert);
}
.btn-info {
	background: var(--color-text);
	border: 1px solid var(--color-text);
	color: var(--color-text-invert);
	border-radius: 0;
}
.btn-info:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
}

/* --- Etiket / rozet --- */
.label {
	border-radius: 0;
	font-weight: 500;
	letter-spacing: .03em;
}

/* --- Sayfalama --- */
.pagination > li > a,
.pagination > li > span {
	border-radius: 0 !important;
	border-color: var(--color-border);
	color: var(--color-text);
}
.pagination > li > a:hover {
	background: var(--color-accent-soft);
	color: var(--color-text);
}
.pagination > .active > a,
.pagination > .active > span {
	background: var(--color-accent);
	border-color: var(--color-accent);
}

/* --- 404 / boş durum sayfaları --- */
#error-not-found h1,
#information-contact h1,
#information-information h1 {
	font-size: var(--fs-h2);
	margin-bottom: var(--space-4);
}

/* --- Hesabım Sayfası (Modern Tema > Hesabım Sayfası'ndan yönetilir) --- */
.account-welcome {
	margin-bottom: var(--space-5);
}
.account-welcome h1 {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	margin: 0 0 var(--space-2) 0;
}
.account-welcome p {
	color: var(--color-text-muted);
	margin: 0;
}
.account-hub-section {
	margin-bottom: var(--space-5);
}
.account-hub-section h3 {
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-weight: 500;
	margin: 0 0 var(--space-3) 0;
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--color-border);
}
.account-hub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--space-3);
}
.account-hub-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-4);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.account-hub-card:hover {
	border-color: var(--color-accent);
	color: var(--color-text);
	text-decoration: none;
	transform: translateY(-2px);
}
.account-hub-card .fa {
	font-size: 22px;
	color: var(--color-accent);
}
.account-hub-card span {
	font-size: var(--fs-small);
}

/* --- Sepet Sayfası (Modern Tema > Sepet Sayfası'ndan yönetilir) — bkz.
   sepet-sayfasi-ayni-olsun.png: solda ürün listesi, sağda "Sipariş Özeti"
   kartı (toplamlar, buton, güven rozetleri). --- */
.cart-page-heading {
	font-size: var(--fs-h3);
	margin-bottom: var(--space-4);
}
.cart-page-message {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	background: var(--color-accent-soft);
	color: var(--color-text);
	font-size: var(--fs-small);
	margin-bottom: var(--space-4);
}
.cart-page-layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: var(--space-6);
	align-items: start;
}
.cart-page-list {
	display: flex;
	flex-direction: column;
}
.cart-page-row {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border);
}
.cart-page-row:first-child {
	padding-top: 0;
}
.cart-page-thumb {
	width: 90px;
	height: 110px;
	flex: 0 0 90px;
	background: var(--color-bg-soft);
	display: block;
}
.cart-page-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cart-page-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.cart-page-body-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-2);
}
.cart-page-info {
	min-width: 0;
}
.cart-page-name {
	display: block;
	color: var(--color-text);
	font-weight: 500;
}
.cart-page-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	margin-top: var(--space-2);
}
.cart-page-meta-item,
.cart-page-option {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}
.cart-page-remove {
	flex: 0 0 auto;
	border: none;
	background: transparent;
	color: var(--color-text-muted);
	cursor: pointer;
	padding: 2px;
	transition: color var(--transition);
}
.cart-page-remove:hover {
	color: var(--color-error);
}
.cart-page-remove svg {
	width: 18px;
	height: 18px;
}
.cart-page-body-bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: auto;
}
.cart-page-qty label {
	display: block;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	margin-bottom: var(--space-1);
	font-weight: 400;
}
.cart-page-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--color-border);
}
.cart-page-stepper button {
	width: 30px;
	height: 30px;
	border: none;
	background: transparent;
	color: var(--color-text);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.cart-page-stepper button:hover:not(:disabled) {
	color: var(--color-accent);
}
.cart-page-stepper button:disabled {
	color: var(--color-border);
	cursor: default;
}
.cart-page-stepper span {
	min-width: 30px;
	text-align: center;
	font-size: var(--fs-small);
	font-weight: 500;
}
.cart-page-price {
	flex: 0 0 auto;
	text-align: right;
}
.cart-page-price-total {
	display: block;
	font-size: var(--fs-h5);
}
.cart-page-edit {
	display: inline-block;
	margin-top: var(--space-1);
	font-size: var(--fs-small);
	color: var(--color-text);
	text-decoration: underline;
}
.cart-page-row-voucher {
	align-items: center;
}

/* --- Sipariş Özeti kartı --- */
.cart-page-summary-card {
	border: 1px solid var(--color-border);
	padding: var(--space-5);
}
.cart-page-summary-card h2 {
	font-size: var(--fs-h5);
	margin: 0 0 var(--space-4);
}
.cart-page-totals {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.cart-page-total-row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	font-size: var(--fs-body);
	color: var(--color-text-muted);
}
.cart-page-total-row span:last-child {
	text-align: right;
}
.cart-page-total-row.is-grand {
	margin-top: var(--space-2);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
	color: var(--color-text);
	font-weight: 600;
	font-size: var(--fs-h6, var(--fs-body));
}
.cart-page-shipping-note {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	margin: var(--space-4) 0;
}
.cart-page-checkout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: none;
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: opacity var(--transition);
}
.cart-page-checkout-btn:hover {
	opacity: 0.88;
}
.cart-page-checkout-btn svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}
.cart-page-badges {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
}
.cart-page-badge {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-small);
}
.cart-page-badge svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}
.cart-page-continue {
	margin-top: var(--space-3);
	text-align: center;
}
.cart-page-continue a {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	text-decoration: underline;
}
@media (max-width: 767px) {
	.cart-page-layout {
		grid-template-columns: 1fr;
	}
}

/* --- Footer sosyal medya (Modern Tema > Site Alt Bölümü'nden yönetilir) --- */
.footer-social {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-4);
}
.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(247, 245, 241, 0.3);
	border-radius: var(--radius-pill);
	color: var(--color-text-invert);
}
.footer-social a:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text-invert);
}

/* --- Kategori Sayfası: Üst/Alt Bloklar (Modern Tema > Kategori Sayfası
   admin panelinden yönetilir) — banner (görsel + üzerine yazı) veya ürün
   vitrini (başlık + kart şeridi, .demo-featured-* ile aynı tasarım). --- */
.category-block {
	margin: var(--space-5) 0;
}
.category-block-banner {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
}
.category-block-banner img {
	width: 100%;
	height: auto;
	display: block;
}
.category-block-caption {
	position: absolute;
	left: var(--space-4);
	bottom: var(--space-4);
	color: var(--color-text-invert);
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-heading);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.category-block-caption-heading {
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	text-align: center;
	margin: 0 0 var(--space-4);
}
.category-block-text {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	padding: var(--space-5) var(--space-3);
}
.category-block-text-body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text);
}

/* --- Kategori Sayfası: yan-yana-res.png referansı — sade ızgara,
   admin panelden (Modern Tema > Kategori Sayfası) sütun sayısı, kenar
   boşluğu ve fiyat rengi ayarlanır. --- */
.category-header {
	/* Ürün ızgarasıyla aynı "container'dan taşırma" tekniği — başlık ve
	   sıralama kutusu da sola/sağa dayalı, kendi (ızgaradan bağımsız)
	   admin boşluğuyla. */
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding-left: var(--cat-header-pad-left, 20px);
	padding-right: var(--cat-header-pad-right, 20px);
	box-sizing: border-box;
}
#product-category h2,
#product-search h2 {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	flex-wrap: wrap;
	/* ust-barda.png referansı: "Üst Giyim" yazısı yakından incelendiğinde
	   serif DEĞİL — hiçbir harfte serif çıkıntısı yok, "G" tek katlı ve
	   geometrik, "y" düz kuyruklu. Bu, sitenin zaten kullandığı Jost'a
	   (--font-body) çok yakın, ince (300) ağırlıklı bir geometrik
	   sans-serif. Önceki denemede yanlışlıkla serif (--font-heading)
	   kullanılmıştı. */
	font-family: var(--font-body) !important;
	font-weight: 300 !important;
}
.category-product-count {
	font-family: var(--font-body);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	font-weight: 400;
}
.category-toolbar {
	display: flex;
	justify-content: flex-end;
	margin: var(--space-4) 0;
}

/* --- Arama Sonuçları Sayfası: kategori ızgarasıyla aynı görsel dil,
   üstüne eklenen tek fark bu filtre çubuğu (kelime/kategori/alt kategori/
   açıklama). Kategori başlığıyla aynı "container'dan taşırma" boşluğunu
   paylaşır (bkz. .category-header) - admin panelden aynı boşluk
   ayarlarını kullanır (theme_modern_search_header_padding_*). --- */
.search-filter-bar {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding-left: var(--cat-header-pad-left, 20px);
	padding-right: var(--cat-header-pad-right, 20px);
	padding-top: var(--space-5);
	box-sizing: border-box;
}
.search-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.search-filter-keyword {
	flex: 1 1 260px;
}
.search-filter-category {
	flex: 0 1 240px;
}
.search-filter-row .btn {
	flex: 0 0 auto;
}
.search-filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-2);
}
.search-filter-checkbox {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	cursor: pointer;
	margin-bottom: 0;
}
.search-filter-checkbox input[type="checkbox"] {
	width: auto;
	margin: 0;
}
.search-filter-checkbox.is-disabled {
	opacity: .5;
	cursor: not-allowed;
}
@media (max-width: 767px) {
	.search-filter-bar {
		padding-left: var(--cat-header-pad-left-mobile, 12px);
		padding-right: var(--cat-header-pad-right-mobile, 12px);
	}
	.search-filter-row {
		flex-direction: column;
	}
	.search-filter-category,
	.search-filter-row .btn {
		flex: 1 1 auto;
	}
}
/* filtre-boyle.png referansındaki özel sıralama paneli — native <select>
   yerine buton + açılır liste. */
.category-sort {
	position: relative;
}
.category-sort-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	width: auto;
	min-width: 200px;
	height: 44px;
	padding: 0 14px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	color: var(--color-text);
	cursor: pointer;
}
.category-sort-toggle svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--color-text-muted);
}
.category-sort-panel {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	min-width: 240px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-soft);
	z-index: 20;
}
.category-sort.is-open .category-sort-panel {
	display: block;
}
.category-sort-option {
	display: block;
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--color-text);
	text-decoration: none;
	border-bottom: 1px solid var(--color-border);
}
.category-sort-option:last-child {
	border-bottom: none;
}
.category-sort-option:hover {
	background: var(--color-bg-soft);
	color: var(--color-text);
	text-decoration: none;
}
.category-sort-option.is-active {
	background: var(--color-bg-soft);
	font-weight: 500;
}
.category-product-grid {
	/* .container'ın orta genişlik sınırını kırıp ızgarayı gerçek viewport
	   genişliğine yayıyor (100vw KULLANMIYORUZ — dikey scrollbar varken
	   taşmaya sebep olur), sonra admin'den ayarlanan sol/sağ boşluğu
	   padding ile geri veriyor. */
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding-left: var(--cat-pad-left, 20px);
	padding-right: var(--cat-pad-right, 20px);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(var(--cat-cols-desktop, 3), 1fr);
	/* Sütunlar arası (yatay) ve sıralar arası (dikey) boşluk admin panelden
	   ayrı ayrı ayarlanır — ürün adı/fiyatı görselin hemen altında sıkı
	   dururken, alttaki ürün sırasıyla arada istenen kadar ayrım olsun. */
	column-gap: var(--cat-gap, 8px);
	row-gap: var(--cat-row-gap, 54px);
}
.category-product-card a {
	display: block;
	color: inherit;
	text-decoration: none;
}
.category-product-image {
	overflow: hidden;
	background: var(--color-bg-soft);
	position: relative;
}
.category-product-image img {
	width: 100%;
	height: auto;
	display: block;
}
.category-product-name {
	/* "resmin altında çok yakın olsun" — sıkı boşluk. Font: başlıkla
	   (#product-category h2) aynı aile (Jost) ama biraz daha kalın (400) —
	   300 okunaklılık için fazla inceydi. */
	margin-top: var(--space-2);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fs-body);
	color: var(--color-text);
}
.category-product-price {
	/* "ürün isminin hemen altında çok yakın olsun" — daha da sıkı. Ürün
	   adıyla aynı kalınlık (400). */
	margin-top: 2px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fs-body);
	color: var(--cat-price-color, #e73424);
}
.category-product-price-old {
	color: var(--color-text-muted);
	text-decoration: line-through;
	margin-left: var(--space-2);
	font-size: var(--fs-small);
}
/* Kategori ızgarası "Sepete Ekle" / "Stokta Yok" butonu (bkz.
   uzerine-gelince.png) — pill şekli demo-featured-addcart'tan (var(--radius),
   köşesi keskin) BİLİNÇLİ OLARAK farklı, --radius-pill kullanıyor. */
.category-product-addcart {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1.5px solid var(--color-text);
	border-radius: var(--radius-pill);
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-small);
	text-align: center;
	padding: var(--space-2) var(--space-3);
	cursor: pointer;
}
.category-product-addcart.is-outofstock {
	cursor: not-allowed;
	color: var(--color-text-muted);
	border-color: var(--color-border);
}
/* Masaüstü: resmin üzerinde, sadece kart hover'ındayken (uzerine-gelince.png
   ile birebir). Mobilde dokunmatikte :hover kalıcı takılabildiğinden bu
   buton mobilde tamamen gizlenip yerine fiyatın altındaki sabit buton
   gösteriliyor — aşağıdaki media query'ye bakın. */
.category-product-addcart-hover {
	position: absolute;
	left: var(--space-3);
	right: var(--space-3);
	bottom: var(--space-3);
	width: auto;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity var(--transition), transform var(--transition);
}
.category-product-card:hover .category-product-addcart-hover {
	opacity: 1;
	transform: translateY(0);
}
/* Mobilde her zaman görünür, fiyatın altında sabit duran buton — masaüstünde
   gizli (hover overlay yeterli). */
.category-product-addcart-static {
	display: none;
}
#category-load-more {
	display: flex;
	justify-content: center;
	padding: var(--space-6) 0;
}
.category-loading {
	font-size: 22px;
	color: var(--color-text-muted);
}
@media (max-width: 767px) {
	.category-header {
		padding-left: var(--cat-header-pad-left-mobile, 12px);
		padding-right: var(--cat-header-pad-right-mobile, 12px);
	}
	.category-product-grid {
		grid-template-columns: repeat(var(--cat-cols-mobile, 2), 1fr);
		padding-left: var(--cat-pad-left-mobile, 12px);
		padding-right: var(--cat-pad-right-mobile, 12px);
	}
	/* Mobilde dokunmatik ekranda :hover kalıcı takılabildiği için resmin
	   üzerindeki overlay buton yerine fiyatın altında sabit "Sepete Ekle"
	   gösteriliyor (bkz. talep: "mobilde ürünün altında fiyatın altında
	   aynı tasarım sepete ekle sabit kalsın"). */
	.category-product-addcart-hover {
		display: none;
	}
	.category-product-addcart-static {
		display: block;
		margin-top: var(--space-2);
	}
	.category-toolbar {
		justify-content: stretch;
	}
	.category-sort {
		width: 100%;
	}
	.category-sort-toggle {
		width: 100%;
		min-width: 0;
	}
	.category-sort-panel {
		left: 0;
		right: 0;
		min-width: 0;
	}
}

/* =========================================================
   Ürün Sayfası (product/product.twig) — emare.com.tr esinli
   Modern Tema > Ürün Sayfası admin panelinden yönetilir.
   ========================================================= */

#product-product .breadcrumb {
	background: none;
	padding: var(--space-3) 0;
	font-family: var(--font-body);
	font-size: var(--fs-small);
}

/* Galeri: ana görsel (gallery-main) + küçük resim şeridi (gallery-thumb-viewport).
   Şerit masaüstünde admin'den ayarlanan sayıda (varsayılan 5, --thumb-desktop-count)
   küçük resim gösterir; fazlası varsa sağ/sol ok butonlarıyla kayar (bkz.
   product.twig altındaki swiper init script'i, kategori sayfasındaki aynı kütüphane). */
#product-product .thumbnails {
	/* Eski tema kalıntısı .thumbnails{overflow:auto} kuralını geçersiz kılar
	   — aksi halde galeri şeridinin dışına taşan ok butonları kırpılıyordu. */
	overflow: visible;
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-3) 0;
}
#product-product .thumbnails a.thumbnail {
	display: block;
	border: none;
	border-radius: var(--radius);
	overflow: hidden;
	transition: var(--transition);
}
#product-product .product-gallery-col.show-image-border .thumbnails a.thumbnail {
	border: 1px solid var(--color-border);
}
#product-product .product-gallery-col.show-image-border .gallery-thumb-viewport a.thumbnail:hover {
	border-color: var(--color-accent);
	opacity: 1;
}
#product-product .gallery-thumb-viewport a.thumbnail {
	opacity: 1;
	transition: opacity var(--transition);
}
#product-product .gallery-thumb-viewport a.thumbnail:hover {
	opacity: .7;
}
#product-product .thumbnails img {
	width: 100%;
	height: auto;
	display: block;
}
#product-product .gallery-main-viewport {
	margin: 0 0 var(--gallery-top-gap, 32px);
	position: relative;
}
#product-product .gallery-main-swiper {
	overflow: hidden;
}

/* Seçili küçük resmi vurgula (tıklanınca ana görselde gösterilen) */
#product-product .gallery-thumb-viewport .swiper-slide.image-additional.active a.thumbnail {
	opacity: .55;
}
#product-product .product-gallery-col.show-image-border .gallery-thumb-viewport .swiper-slide.image-additional.active a.thumbnail {
	border-color: var(--color-text);
}

/* Küçük resim şeridinin (diğer resimler) TÜM BÖLÜMÜ admin'den ayarlanan
   sabit bir kutu boyutunda (varsayılan 680x200) — tek tek görsellerin kendi
   dosya boyutundan (Galeri Şeridi Görsel Boyutu ayrı bir ayar) bağımsız. */
#product-product .gallery-thumb-viewport {
	position: relative;
	z-index: 2;
	width: var(--gallery-box-width, 680px);
	max-width: 100%;
	height: var(--gallery-box-height, 200px);
	box-sizing: border-box;
	padding: 0 var(--gallery-gap, 32px);
	margin-left: auto;
	margin-right: auto;
}
#product-product .product-thumb-swiper {
	overflow: hidden;
	height: 100%;
}
#product-product .product-thumb-swiper .swiper-wrapper {
	display: flex;
	height: 100%;
	gap: var(--thumb-gap, 5px);
}
#product-product .product-thumb-swiper .swiper-slide {
	flex: 0 0 calc((100% - (var(--thumb-desktop-count, 5) - 1) * var(--thumb-gap, 5px)) / var(--thumb-desktop-count, 5));
	width: calc((100% - (var(--thumb-desktop-count, 5) - 1) * var(--thumb-gap, 5px)) / var(--thumb-desktop-count, 5));
}
#product-product .product-thumb-swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Swiper kütüphanesinin varsayılan :before oku (40px FontAwesome glyph)
   kendi <i class="fa"> ikonumuzla üst üste binmesin diye kapatılıyor. */
#product-product .gallery-thumb-nav:before {
	content: none;
}
#product-product .gallery-thumb-nav {
	position: absolute;
	top: 50%;
	margin-top: -16px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--color-text);
	font-size: 26px;
	cursor: pointer;
	z-index: 20;
	opacity: 1;
	transition: var(--transition);
}
#product-product .gallery-thumb-nav-prev {
	left: 0;
}
#product-product .gallery-thumb-nav-next {
	right: 0;
}
#product-product .gallery-thumb-nav:hover {
	color: var(--color-accent);
}
#product-product .gallery-thumb-nav.swiper-button-disabled {
	opacity: 0;
	pointer-events: none;
}

/* Galeri konumu: masaüstünde ana görselin solunda dikey şerit */
#product-product .product-gallery-col.gallery-position-left {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
#product-product .product-gallery-col.gallery-position-left .thumbnails {
	display: flex;
	flex-direction: row-reverse;
	width: 100%;
	gap: var(--space-3);
}
#product-product .product-gallery-col.gallery-position-left .gallery-main-viewport {
	flex: 1 1 65%;
	min-width: 0;
	margin: 0;
}
#product-product .product-gallery-col.gallery-position-left .gallery-thumb-viewport {
	flex: 0 0 120px;
	width: 120px;
	height: auto;
	margin: 0;
}
#product-product .product-gallery-col.gallery-position-left .product-thumb-swiper .swiper-wrapper {
	flex-direction: column;
}
#product-product .product-gallery-col.gallery-position-left .product-thumb-swiper .swiper-slide {
	flex: 0 0 auto;
	width: 100%;
}

/* Bağımsız açılır-kapanır bölümler: Ürün Açıklaması / Kumaş Bilgisi /
   Teslimat ve İade (sepet-buton.png referansı) — sağ sütunda, sepete
   ekle/rozetlerin altında. Bootstrap tab mekanizması kullanmıyor, her
   biri kendi başına açılıp kapanıyor (bkz. sayfa altındaki JS). */
#product-product .product-accordion {
	margin-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}
#product-product .accordion-item {
	border-bottom: 1px solid var(--color-border);
}
#product-product .accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) 0;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 500;
	color: var(--color-text);
}
#product-product .accordion-icon {
	color: var(--color-text-muted);
	font-size: 1.2em;
	line-height: 1;
}
#product-product .accordion-body {
	padding: 0 0 var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}
#product-product .accordion-body table {
	width: 100%;
}

/* Yorumlar — artık akordeonun dışında, bağımsız bir bölüm olarak
   sayfanın en altında, Benzer Ürünler'in hemen üstünde. */
#product-product .product-reviews-section {
	margin: var(--space-6) 0;
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

/* Ürün başlığının altındaki puan özeti (degerlen.png referansı): dolu
   altın/sarı yıldızlar + "X değerlendirme" metni, aşağıdaki bağımsız
   Yorumlar bölümüne tıklanınca kaydırır. */
#product-product .product-rating-summary {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: var(--space-2) 0 0;
	color: inherit;
	text-decoration: none;
}
#product-product .product-rating-summary .fa-star,
#product-product .product-rating-summary .fa-star-o {
	color: #e8b84b;
	font-size: 16px;
}
#product-product .product-rating-summary .product-rating-count {
	margin-left: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	font-family: var(--font-body);
}

/* Düşük stok uyarısı (name-resm.png referansı: kırmızı saat ikonu + "Tükeniyor") */
#product-product .product-low-stock {
	color: var(--color-error);
	font-size: var(--fs-small);
	font-weight: 500;
	margin: var(--space-2) 0 0;
}
#product-product .product-low-stock .fa {
	margin-right: var(--space-1);
}

/* Fiyat bloğu — indirim rozeti + eski/yeni fiyat (name-resm.png referansı) */
#product-product .product-price-block {
	margin: var(--space-3) 0;
}
#product-product .product-price-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
#product-product .product-discount-badge {
	flex-shrink: 0;
	background: var(--color-text);
	color: var(--color-text-invert);
	font-size: var(--fs-small);
	font-weight: 600;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius);
}
#product-product .product-price-stack {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
#product-product .product-price-old {
	font-size: var(--fs-body);
	color: var(--color-text-muted);
	text-decoration: line-through;
}
#product-product .product-price-new {
	font-size: var(--fs-h3);
	font-weight: 600;
	color: var(--color-error);
	font-family: var(--font-body);
}
#product-product .product-points-text {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	margin-top: var(--space-2);
}

/* Adet (miktar) seçici admin'den gizlenebilir; input DOM'da kalır
   (sepete ekleme JS'i değerini okuyor), sadece görsel olarak kaldırılır. */
#product-product .quantity-field-hidden {
	display: none;
}

/* Promosyon banner */
#product-product .promo-banner {
	background: var(--color-bg-soft);
	border: 1px dashed var(--color-accent);
	color: var(--color-text);
	padding: var(--space-2) var(--space-3);
	margin: var(--space-3) 0;
	font-size: var(--fs-small);
	text-align: center;
}

/* Teslimat süresi yazısı */
#product-product .delivery-text {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	margin: var(--space-2) 0 var(--space-4);
}
#product-product .delivery-text .fa {
	color: var(--color-accent);
	margin-right: var(--space-1);
}

/* Paylaş: WhatsApp ikonu (name-resm.png referansı) */
#product-product .product-share-row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
}
#product-product .product-share-label {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}
#product-product .product-share-whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--share-icon-size, 16px) + 14px);
	height: calc(var(--share-icon-size, 16px) + 14px);
	border: 1px solid var(--share-icon-color, #25d366);
	border-radius: 6px;
	color: var(--share-icon-color, #25d366);
	font-size: var(--share-icon-size, 16px);
	transition: var(--transition);
}
#product-product .product-share-whatsapp:hover {
	background: var(--share-icon-color, #25d366);
	color: var(--color-text-invert);
}
#product-product .product-share-whatsapp-frameless {
	width: auto;
	height: auto;
	border-color: transparent;
}
#product-product .product-share-whatsapp-frameless:hover {
	background: none;
	color: var(--share-icon-color, #25d366);
	opacity: 0.75;
}

/* Ürün sayfasının maksimum genişliği admin'den ayarlanır (Modern Tema >
   Ürün Sayfası), bkz. product.twig'deki inline max-width. Bootstrap'ın
   .container'a breakpoint başına verdiği SABİT width'i (ör. 1170px) ezmek
   için width:100% de gerekiyor (bkz. header .container ile aynı teknik). */
#product-product.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* CorsairSoft Ürün Variant (prodvar) eklentisi — ürün seçeneklerinin hemen
   üstünde, bir satırda 5 görsel, fazlası alt satıra sarar. Boyut admin'den
   (Modern Tema > Ürün Sayfası) yönetilir, varsayılan 120x90. */
#product-product .prodvar-block {
	margin: 0 0 var(--space-4);
}
#product-product .prodvar-title {
	font-size: var(--fs-h6);
	font-family: var(--font-body);
	margin: 0 0 var(--space-2);
}
#product-product ul.prodvar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding: 0;
	margin: 0;
	list-style: none;
}
#product-product ul.prodvar li {
	flex: 0 0 calc((100% - 4 * var(--space-2)) / 5);
	max-width: calc((100% - 4 * var(--space-2)) / 5);
}
#product-product ul.prodvar li a {
	display: block;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: var(--transition);
}
#product-product ul.prodvar li a:hover {
	border-color: var(--color-text);
}
#product-product ul.prodvar li img {
	width: 100%;
	height: auto;
	display: block;
}
@media (max-width: 480px) {
	#product-product ul.prodvar li {
		flex: 0 0 calc((100% - 2 * var(--space-2)) / 3);
		max-width: calc((100% - 2 * var(--space-2)) / 3);
	}
}

/* Renk / beden seçenekleri — buton/swatch stili */
#product-product .options-swatch-style .option-radio-group .radio {
	display: inline-block;
	margin: 0 var(--space-2) var(--space-2) 0;
}
#product-product .options-swatch-style .option-radio-group .radio label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-weight: normal;
	margin: 0;
}
#product-product .options-swatch-style .option-radio-group.option-size .radio label {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-2) var(--space-4);
	min-width: 44px;
	text-align: center;
	transition: var(--transition);
}
#product-product .options-swatch-style .option-radio-group.option-size .radio label img {
	display: none;
}
#product-product .options-swatch-style .option-radio-group.option-size .radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
#product-product .options-swatch-style .option-radio-group.option-size .radio:has(input[type="radio"]:checked) label,
#product-product .options-swatch-style .option-radio-group.option-size .radio label:hover {
	border-color: var(--color-text);
	background: var(--color-text);
	color: var(--color-text-invert);
}
#product-product .options-swatch-style .option-radio-group.option-color .radio label img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid transparent;
	padding: 2px;
}
#product-product .options-swatch-style .option-radio-group.option-color .radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
#product-product .options-swatch-style .option-radio-group.option-color .radio:has(input[type="radio"]:checked) label img,
#product-product .options-swatch-style .option-radio-group.option-color .radio label:hover img {
	border-color: var(--color-text);
}

/* Sepete Ekle butonu — keskin (köşeli) hatlar, üzerine gelince beyaz
   zemin / siyah yazıya dönüşür. */
#product-product #button-cart {
	background: var(--color-text);
	border: 1px solid var(--color-text);
	border-radius: 0;
	color: var(--color-text-invert);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	padding: var(--space-3) var(--space-5);
	transition: var(--transition);
}
#product-product #button-cart:hover {
	background: var(--color-bg);
	border-color: var(--color-text);
	color: var(--color-text);
}

/* Güven rozetleri satırı */
#product-product .product-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin: var(--space-4) 0;
	padding: var(--space-3) 0;
	border-top: none;
	border-bottom: none;
}
#product-product .product-badges li {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--fs-small);
	color: var(--color-text);
	line-height: 1.3;
}
#product-product .product-badges .fa {
	color: var(--color-text);
	font-size: 1.7em;
	flex-shrink: 0;
	width: 1em;
	text-align: center;
}

/* Mobilde sabit "Sepete Ekle" barı */
@media (max-width: 767px) {
	/* Mobilde galeri konumu ne olursa olsun ana görsel üstte tam genişlik,
	   küçük resim şeridi altında yatay kayar (masaüstündeki "solda dikey
	   şerit" düzeni dar ekranda uygulanmaz). */
	#product-product .product-gallery-col.gallery-position-left {
		flex-direction: column;
	}
	#product-product .product-gallery-col.gallery-position-left .thumbnails {
		flex-direction: column;
	}
	#product-product .product-gallery-col.gallery-position-left .gallery-main-viewport {
		flex: 1 1 auto;
		width: 100%;
	}
	#product-product .product-gallery-col.gallery-position-left .gallery-thumb-viewport {
		flex: 1 1 auto;
		width: 100%;
	}
	#product-product .product-gallery-col.gallery-position-left .product-thumb-swiper .swiper-wrapper {
		flex-direction: row;
	}
	#product-product .product-thumb-swiper .swiper-slide {
		flex: 0 0 calc((100% - (var(--thumb-mobile-count, 3) - 1) * var(--thumb-gap, 5px)) / var(--thumb-mobile-count, 3));
		width: calc((100% - (var(--thumb-mobile-count, 3) - 1) * var(--thumb-gap, 5px)) / var(--thumb-mobile-count, 3));
	}

	#product-product:has(.sticky-add-to-cart) {
		padding-bottom: 72px;
	}
	#product-product .sticky-add-to-cart {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		background: var(--color-bg);
		padding: var(--space-2) var(--space-3);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
		margin: 0;
	}
	#product-product .sticky-add-to-cart label,
	#product-product .sticky-add-to-cart input#input-quantity,
	#product-product .sticky-add-to-cart input[type="hidden"],
	#product-product .sticky-add-to-cart br {
		display: none;
	}
	#product-product .sticky-add-to-cart #button-cart {
		display: block;
		width: 100%;
	}
	#product-product .product-badges {
		flex-direction: column;
		gap: var(--space-2);
	}
}

/* =================================================================
   Giriş Yap sayfası (account/login) — split-screen modern tasarım:
   solda görsel panel (admin'den yönetilir, Modern Tema > Hesabım
   Sayfası), sağda "Kayıtlı Müşteri" / "Yeni Müşteri" kartları.
================================================================= */
#account-login.login-page {
	padding-top: var(--space-5);
	padding-bottom: var(--space-7);
}
#account-login .login-layout {
	display: flex;
	align-items: stretch;
	gap: var(--space-6);
	min-height: 520px;
}
#account-login .login-hero {
	flex: 1 1 50%;
	background-size: cover;
	background-position: center;
	border-radius: var(--radius);
}
#account-login:not(.login-page-with-hero) .login-hero {
	display: none;
}
#account-login .login-panels {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-4);
	max-width: 440px;
}
#account-login:not(.login-page-with-hero) .login-panels {
	max-width: 440px;
	margin: 0 auto;
}
#account-login .login-panel {
	padding: var(--space-5);
	border: 1px solid var(--color-border);
}
#account-login .login-panel-secondary {
	background: var(--color-bg-soft);
	border-color: transparent;
}
#account-login .login-panel h2 {
	margin: 0 0 var(--space-2);
}
/* footer h5 ile aynı düz/sade gövde fontu — admin'den tema başlık
   fontu (Cormorant) ile değiştirilebilir, bkz. product-title-plain.
   #account-register'daki h1/legend'lar da aynı sınıfı paylaşıyor. */
#account-login .login-panel h2.login-heading-plain,
#account-register h1.login-heading-plain,
#account-register legend.login-heading-plain {
	font-family: var(--font-body);
	letter-spacing: 0;
}
/* Hesabım sayfası VE tüm alt sayfaları (adres, sipariş, şifre, iade,
   ödül puanı, e-bülten vb. — OpenCart'ın id="account-*" kalıbını
   kullanan her sayfa) başlıklarında footer başlıklarıyla aynı sade
   gövde fontu kullanılır. Giriş/Kayıt sayfaları hariç — onlar admin'den
   ayrıca font seçilebilen kendi anahtarlarını (login_heading_font /
   register_heading_font) kullanıyor, burada ezilmesinler diye :not() ile
   dışarıda bırakıldı. */
[id^="account-"]:not(#account-login):not(#account-register) h1,
[id^="account-"]:not(#account-login):not(#account-register) h2,
[id^="account-"]:not(#account-login):not(#account-register) h3,
[id^="account-"]:not(#account-login):not(#account-register) legend {
	font-family: var(--font-body);
	letter-spacing: 0;
}
[id^="account-"]:not(#account-login):not(#account-register) legend {
	font-size: var(--fs-h4);
	font-weight: 500;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border);
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-4);
}
#account-login .login-panel-sub {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	margin: 0 0 var(--space-4);
}
#account-login .login-panel .form-group {
	margin-bottom: var(--space-3);
}
#account-login .login-panel label {
	display: block;
	margin-bottom: var(--space-1);
}
#account-login .login-forgot-link {
	display: inline-block;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-bottom: var(--space-4);
}
#account-login .login-forgot-link:hover {
	color: var(--color-accent);
}
#account-login .login-submit {
	width: 100%;
}
@media (max-width: 991px) {
	#account-login .login-hero {
		display: none;
	}
	#account-login .login-panels {
		max-width: 440px;
		margin: 0 auto;
	}
}

/* =================================================================
   Sipariş Başarılı sayfası (checkout/success) — Modern Tema >
   Sipariş Başarılı Sayfası admin panelinden yönetilir (rozetler,
   önerilen ürün sayısı, teslimat gün aralığı, sipariş no öneki).
================================================================= */
#checkout-success .success-hero {
	max-width: 760px;
	margin: var(--space-6) auto var(--space-5);
	padding: var(--space-6) var(--space-4) var(--space-5);
	text-align: center;
}
#checkout-success .success-icon-wrap {
	position: relative;
	width: 100px;
	height: 100px;
	margin: 0 auto var(--space-4);
}
#checkout-success .success-icon {
	position: relative;
	z-index: 2;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: var(--color-success);
	color: var(--color-text-invert);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
}
#checkout-success .success-confetti {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-accent-soft);
}
#checkout-success .success-confetti-1 { top: -6px;  left: 4px;    width: 7px;  height: 7px; background: var(--color-success); }
#checkout-success .success-confetti-2 { top: 10px;  left: -22px;  }
#checkout-success .success-confetti-3 { top: 60px;  left: -30px;  width: 6px;  height: 6px; background: var(--color-accent); }
#checkout-success .success-confetti-4 { top: -14px; right: -18px; width: 8px;  height: 8px; background: var(--color-accent); }
#checkout-success .success-confetti-5 { top: 22px;  right: -30px; }
#checkout-success .success-confetti-6 { top: 68px;  right: -14px; width: 6px;  height: 6px; background: var(--color-success); }
#checkout-success .success-heading {
	margin: 0 0 var(--space-3);
}
#checkout-success .success-text {
	color: var(--color-text-muted);
	line-height: var(--lh-body);
	max-width: 520px;
	margin: 0 auto var(--space-5);
}
#checkout-success .success-info-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}
#checkout-success .success-info-card {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	text-align: left;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	padding: var(--space-3) var(--space-4);
	flex: 1 1 220px;
	max-width: 260px;
}
#checkout-success .success-info-icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-accent-soft);
	color: var(--color-accent-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}
#checkout-success .success-info-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
#checkout-success .success-info-label {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}
#checkout-success .success-info-value {
	font-weight: 500;
	line-height: 1.3;
}
#checkout-success .success-note {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	margin: 0 0 var(--space-5);
}
#checkout-success .success-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}
#checkout-success .success-btn {
	min-width: 200px;
}
#checkout-success .success-badges {
	max-width: 1040px;
	margin: 0 auto var(--space-7);
	padding: var(--space-5) var(--space-4);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}
#checkout-success .success-badge {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
#checkout-success .success-badge-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-bg-soft);
	color: var(--color-accent-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
#checkout-success .success-badge-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
#checkout-success .success-badge-title {
	font-weight: 500;
	font-size: var(--fs-small);
}
#checkout-success .success-badge-text {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}
#checkout-success .success-recommended {
	max-width: 1200px;
	margin: 0 auto;
}
#checkout-success .success-recommended-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--space-4);
}
#checkout-success .success-recommended-head h3 {
	margin: 0;
}
@media (max-width: 767px) {
	#checkout-success .success-hero {
		margin-top: var(--space-4);
		padding: var(--space-4) var(--space-2) var(--space-3);
	}
	#checkout-success .success-info-cards {
		flex-direction: column;
		align-items: stretch;
	}
	#checkout-success .success-info-card {
		max-width: none;
	}
	#checkout-success .success-buttons {
		flex-direction: column;
	}
	#checkout-success .success-btn {
		width: 100%;
	}
	#checkout-success .success-badges {
		grid-template-columns: 1fr;
		gap: var(--space-3);
	}
}