/* ==========================================================================
   Tribün Archive — Ön Yüz Stilleri
   Referans: Nike / modern sports / premium football archive estetiği
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* --------------------------------------------------------------------
   1. Değişkenler
   -------------------------------------------------------------------- */
:root {
	--tribun-siyah: #0a0a0a;
	--tribun-siyah-2: #141414;
	--tribun-siyah-3: #1d1d1d;
	--tribun-beyaz: #ffffff;
	--tribun-altin: #f5b301;
	--tribun-altin-koyu: #d99a00;
	--tribun-gri-metin: #a8a8a8;
	--tribun-border: rgba(255, 255, 255, 0.08);
	--tribun-radius: 4px;
	--tribun-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tribun-container: 1400px;
}

body.tema-koyu {
	--bg: var(--tribun-siyah);
	--bg-alt: var(--tribun-siyah-2);
	--bg-kart: var(--tribun-siyah-2);
	--metin: var(--tribun-beyaz);
	--metin-ikincil: var(--tribun-gri-metin);
	--border: var(--tribun-border);
}

body.tema-acik {
	--bg: #ffffff;
	--bg-alt: #f6f6f6;
	--bg-kart: #ffffff;
	--metin: #0a0a0a;
	--metin-ikincil: #5a5a5a;
	--border: rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------
   2. Sıfırlama & Temel
   -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--tribun-font);
	background: var(--bg);
	color: var(--metin);
	-webkit-font-smoothing: antialiased;
	transition: background 0.25s ease, color 0.25s ease;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.02em; }

.container,
.site-header__inner,
.hero,
.guven-alani,
.sizden-gelenler,
.vitrin,
.yeni-eklenenler,
.tum-urunler,
.kategoriler,
.avantajlar,
.site-footer__ust,
.katalog-sayfa,
.forma-detay {
	max-width: var(--tribun-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.bolum-baslik {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}
.bolum-baslik h2 { font-size: 22px; letter-spacing: 0.02em; }
.tumunu-gor { color: var(--tribun-altin); font-weight: 600; font-size: 14px; white-space: nowrap; }

.buton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: var(--tribun-radius);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	transition: opacity 0.2s ease, transform 0.15s ease;
}
.buton:hover { opacity: 0.88; }
.buton--altin { background: var(--tribun-altin); color: #0a0a0a; }
.buton--genis {
	width: 100%;
	justify-content: center;
	margin: 24px 0 10px;
	padding: 18px 24px;
	font-size: 15px;
	letter-spacing: 0.06em;
	gap: 12px;
}

/* --------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------- */
.duyuru-seridi { background: #050505; border-bottom: 1px solid rgba(245, 179, 1, 0.18); padding: 9px 0; }
.duyuru-seridi .oto-kaydir-maske { margin: 0; padding: 0; }
.duyuru-seridi__grup { display: flex; align-items: center; flex: 0 0 auto; }
.duyuru-seridi__oge {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tribun-altin);
	white-space: nowrap;
	padding: 0 14px;
}
.duyuru-seridi__ayirici { color: rgba(245, 179, 1, 0.35); font-size: 11px; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bg);
	border-bottom: 1px solid rgba(245, 179, 1, 0.15);
}
/* WordPress'in siyah admin çubuğu giriş yapılmışken sayfanın en üstüne
   sabitlenir; menümüz de top:0'a yapışınca çubuğun ARKASINDA kalıp üst
   kısmı kırpılmış gibi görünüyordu. Admin çubuğu varken menüyü onun
   yüksekliği kadar aşağıdan başlatıyoruz (ziyaretçiler bunu hiç görmez,
   sadece giriş yapmış yöneticiyi etkiler). */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	height: 100px;
}
.site-logo__metin {
	font-weight: 900;
	font-size: 26px;
	line-height: 1.1;
	letter-spacing: 0.02em;
}
.site-logo__metin em { color: var(--tribun-altin); font-style: normal; }
.site-logo__mobil { display: none; }

.site-nav__liste { display: flex; gap: 44px; }
.site-nav__liste a {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.85;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}
.site-nav__liste a:hover {
	color: var(--tribun-altin);
	opacity: 1;
	border-bottom-color: var(--tribun-altin);
}
.site-nav__liste .current-menu-item a,
.site-nav__liste .current_page_item a {
	color: var(--tribun-altin);
	opacity: 1;
	border-bottom-color: var(--tribun-altin);
}

.site-header__araclar { display: flex; align-items: center; gap: 8px; }
.site-header__araclar button,
.site-header__araclar .favorilerim-ac {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--border);
}
.favorilerim-ac { color: var(--metin); transition: border-color 0.2s ease, color 0.2s ease; }
.favorilerim-ac:hover { border-color: var(--tribun-altin); color: var(--tribun-altin); }
.tema-degistir__ikon { display: flex; align-items: center; justify-content: center; }
.tema-degistir__ikon svg { width: 18px; height: 18px; }
/* Koyu modda ay, açık modda güneş gösterilir. */
.tema-degistir__ikon .tribun-ikon--gunes { display: none; }
body.tema-acik .tema-degistir__ikon .tribun-ikon--ay { display: none; }
body.tema-acik .tema-degistir__ikon .tribun-ikon--gunes { display: block; }

.site-arama-kutusu { border-top: 1px solid var(--border); padding: 16px 24px; }
.site-arama-kutusu form { max-width: var(--tribun-container); margin: 0 auto; display: flex; gap: 8px; }
.site-arama-kutusu input {
	flex: 1;
	padding: 12px 16px;
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--tribun-radius);
	color: var(--metin);
}
.site-arama-kutusu button {
	padding: 12px 20px;
	background: var(--tribun-altin);
	color: #0a0a0a;
	font-weight: 700;
	border-radius: var(--tribun-radius);
}

/* --------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------- */
/* Hero — metin ve görsel tek panel içinde, görsel sağ yarıda tam taşar */
.hero-panel {
	position: relative;
	max-width: var(--tribun-container);
	margin: 24px auto 0;
	border-radius: 14px;
	overflow: hidden;
	background: var(--bg-alt);
	border: 1px solid var(--border);
	min-height: 480px;
	display: flex;
	align-items: center;
	isolation: isolate;
}

/* Görsel sağ yarıyı kaplar, sola doğru karartma ile metne yer açar */
.hero-panel__gorsel {
	position: absolute;
	inset: 0 0 0 42%;
	z-index: 0;
}
.hero-panel__slayt {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
}
.hero-panel__slayt.aktif { opacity: 1; visibility: visible; }

/* Görselin sol kenarını panele yumuşakça bağlayan geçiş */
.hero-panel__gorsel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, var(--bg-alt) 0%, rgba(0,0,0,0.35) 26%, transparent 60% );
	pointer-events: none;
}

.hero-panel__icerik {
	position: relative;
	z-index: 1;
	padding: 56px 48px;
	max-width: 560px;
}
.hero-panel--gorselsiz .hero-panel__icerik { max-width: 720px; }

.hero__ust-baslik {
	display: block;
	color: var(--tribun-altin);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	margin-bottom: 16px;
}
.hero__baslik {
	font-size: clamp(42px, 5.2vw, 72px);
	line-height: 0.94;
	margin-bottom: 20px;
	color: #fff;
}
.hero__aciklama {
	color: rgba(255, 255, 255, 0.78);
	font-size: 16px;
	max-width: 400px;
	margin-bottom: 28px;
	line-height: 1.6;
}

/* Açık modda panel içi metin okunur kalsın diye panel koyu tutulur */
body.tema-acik .hero-panel { background: #111; border-color: rgba(0,0,0,0.12); }
body.tema-acik .hero-panel__gorsel::after {
	background: linear-gradient( 90deg, #111 0%, rgba(0,0,0,0.35) 26%, transparent 60% );
}

/* 01 / 02 / 03 geçiş noktaları — butonun altında */
.hero-panel__noktalar {
	display: flex;
	gap: 22px;
	margin-top: 28px;
}
.hero-panel__nokta {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.55);
	padding-bottom: 6px;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.hero-panel__nokta:hover { color: #fff; }
.hero-panel__nokta.aktif { color: #fff; border-bottom-color: var(--tribun-altin); }

/* Panelin sol/sağ kenarındaki geçiş okları */
.hero-panel__ok {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.25);
	background: rgba(0,0,0,0.35);
	backdrop-filter: blur(4px);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-panel__ok:hover { background: rgba(0,0,0,0.7); border-color: var(--tribun-altin); }
.hero-panel__ok svg { width: 20px; height: 20px; }
.hero-panel__ok--sol { left: 18px; }
.hero-panel__ok--sag { right: 18px; }

/* --------------------------------------------------------------------
   5. Güven / Destek Alanı
   -------------------------------------------------------------------- */
.guven-alani {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	padding: 28px 24px 36px;
}
.guven-kutu {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 20px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--bg-kart);
	transition: border-color 0.2s ease, transform 0.15s ease;
}
.guven-kutu__ikon {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	color: var(--tribun-altin);
}
.guven-kutu h3 {
	font-size: 15px;
	letter-spacing: 0.03em;
	margin-bottom: 5px;
}
.guven-kutu p {
	margin: 0;
	font-size: 14px;
	color: var(--metin-ikincil);
	line-height: 1.5;
}

/* Destek hattı kutusu WhatsApp'a yönlendirir */
.guven-kutu--tiklanabilir { cursor: pointer; }
.guven-kutu--tiklanabilir:hover {
	border-color: var(--tribun-altin);
	transform: translateY(-2px);
}
.guven-kutu--tiklanabilir:hover h3 { color: var(--tribun-altin); }

/* --------------------------------------------------------------------
   6. Forma Grid & Kart (Yeni Eklenenler + Katalog ortak)
   -------------------------------------------------------------------- */
.yeni-eklenenler,
.kategoriler,
.avantajlar { padding-top: 56px; padding-bottom: 56px; }

.forma-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}
.forma-grid--genis { grid-template-columns: repeat(4, 1fr); }

.forma-kart {
	background: var(--bg-kart);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.forma-kart:hover { transform: translateY(-4px); border-color: var(--tribun-altin); }

.forma-kart__gorsel-baglanti { position: relative; display: block; background: #000; aspect-ratio: 1 / 1; }
.forma-kart__gorsel-baglanti img { width: 100%; height: 100%; object-fit: cover; }

.forma-kart__etiket {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--tribun-altin);
	color: #0a0a0a;
	font-size: 11px;
	font-weight: 800;
	padding: 4px 10px;
	border-radius: 3px;
	letter-spacing: 0.04em;
}
.forma-kart__favori {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.5);
	border-radius: 50%;
	color: #fff;
	transition: color 0.15s ease, transform 0.15s ease;
}
.forma-kart__favori.aktif { color: #e0344c; }
.forma-kart__favori.aktif svg { transform: scale(1.05); }

.forma-kart__bilgi { padding: 14px 16px 18px; }
.forma-kart__ad { font-size: 15px; margin-bottom: 4px; }
.forma-kart__turu { margin: 0 0 8px; font-size: 12px; color: var(--metin-ikincil); }
.forma-kart__fiyat { display: flex; align-items: baseline; gap: 8px; }
.fiyat-eski { text-decoration: line-through; color: var(--metin-ikincil); font-size: 13px; }
.fiyat-guncel { font-weight: 800; font-size: 16px; color: var(--tribun-altin); }

.bos-durum { color: var(--metin-ikincil); text-align: center; padding: 40px 0; }

/* --------------------------------------------------------------------
   6.45 Kendiliğinden kayan şerit — Vitrin ve Sizden Gelenler ortak mekaniği
   Her iki bölüm de aynı yapıyı kullanır: içerik iki kez basılır, sürekli
   translateX(-50%) animasyonuyla kayar, üzerine gelince/dokununca durur.
   -------------------------------------------------------------------- */
.oto-kaydir-maske { overflow: hidden; margin: 0 -24px; padding: 0 24px; }

.oto-kaydir-serit {
	display: flex;
	width: max-content;
	animation-name: oto-kaydir;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.oto-kaydir-serit.duraklat { animation-play-state: paused; }
/* Sadece gerçek fare/imleç olan cihazlarda üzerine gelince duraklasın —
   dokunmatik cihazlarda "hover" takılı kalıp şeridi donmuş gösterebiliyor. */
@media (hover: hover) and (pointer: fine) {
	.oto-kaydir-maske:hover .oto-kaydir-serit { animation-play-state: paused; }
}

@keyframes oto-kaydir {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------
   6.5 Sizden Gelenler (WhatsApp ekran görüntüleri şeridi)
   -------------------------------------------------------------------- */
.sizden-gelenler { padding-top: 56px; padding-bottom: 8px; }
.sizden-gelenler .bolum-baslik h2 { display: flex; align-items: center; gap: 10px; }
.sizden-gelenler__ikon { display: inline-flex; color: #25d366; }
.sizden-gelenler__ikon svg { width: 20px; height: 20px; }

.sizden-gelenler__grup { display: flex; gap: 18px; padding-right: 18px; flex: 0 0 auto; }

.sizden-gelenler__kart {
	flex: 0 0 auto;
	width: 240px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--bg-kart);
	border: 1px solid var(--border);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	transition: transform 0.2s ease, border-color 0.2s ease;
	padding: 0;
	display: block;
	cursor: zoom-in;
}
.sizden-gelenler__kart:hover { transform: translateY(-4px); border-color: var(--tribun-altin); }
.sizden-gelenler__kart img { width: 100%; height: auto; display: block; }

@media (max-width: 600px) {
	.sizden-gelenler__kart { width: 200px; }
}

/* --------------------------------------------------------------------
   6.55 Vitrin (ana sayfa — kendiliğinden kayan öne çıkan formalar,
   Sizden Gelenler ile aynı kart boyutu/tasarımı)
   -------------------------------------------------------------------- */
.vitrin { padding-top: 56px; padding-bottom: 0; }
.vitrin .bolum-baslik { margin-bottom: 24px; justify-content: flex-start; }

.vitrin__grup { display: flex; gap: 18px; padding-right: 18px; flex: 0 0 auto; }

.vitrin__kart {
	flex: 0 0 auto;
	height: 420px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--bg-kart);
	border: 1px solid var(--border);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	transition: transform 0.2s ease, border-color 0.2s ease;
	padding: 0;
	display: block;
	cursor: zoom-in;
}
.vitrin__kart:hover { transform: translateY(-4px); border-color: var(--tribun-altin); }
.vitrin__kart img { height: 100%; width: auto; display: block; }

.vitrin__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 56px; }
.vitrin__cta .buton { width: 100%; max-width: 420px; justify-content: center; }
.vitrin__whatsapp-ikon { display: inline-flex; color: #25d366; }
.vitrin__whatsapp-ikon svg { width: 18px; height: 18px; }

.buton--altin-cizgili {
	border: 1px solid var(--tribun-altin);
	color: var(--tribun-altin);
	background: transparent;
}
.buton--altin-cizgili:hover { background: rgba(245, 179, 1, 0.1); opacity: 1; }

@media (max-width: 600px) {
	.vitrin__kart { height: 340px; }
}

/* --------------------------------------------------------------------
   6.58 Büyütme (lightbox) — Vitrin ve Sizden Gelenler görsellerine tıklayınca
   -------------------------------------------------------------------- */
.tribun-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 10, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}
.tribun-lightbox.acik { opacity: 1; visibility: visible; }
.tribun-lightbox__resim {
	max-width: min(90vw, 900px);
	max-height: 88vh;
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.tribun-lightbox__kapat {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}
.tribun-lightbox__kapat:hover { background: rgba(255, 255, 255, 0.18); }
body.tribun-lightbox-acik { overflow: hidden; }

@media (max-width: 600px) {
	.tribun-lightbox { padding: 24px 16px; }
	.tribun-lightbox__kapat { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 20px; }
}

/* --------------------------------------------------------------------
   6.6 Tüm Ürünler (ana sayfa — Shopier tarzı kategori sekmeli katalog)
   -------------------------------------------------------------------- */
.tum-urunler { padding-top: 56px; padding-bottom: 56px; }
.tum-urunler__sayac { color: var(--metin-ikincil); font-size: 13px; white-space: nowrap; }

.tum-urunler__araclar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.tum-urunler__filtre {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	flex: 1;
	min-width: 0;
	padding: 2px 2px 8px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.tum-urunler__filtre::-webkit-scrollbar { display: none; }

.tum-urunler__filtre-link {
	flex: 0 0 auto;
	padding: 8px 16px;
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--metin-ikincil);
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tum-urunler__filtre-link.aktif,
.tum-urunler__filtre-link:hover {
	background: var(--tribun-altin);
	border-color: var(--tribun-altin);
	color: #0a0a0a;
}

.tum-urunler__sirala {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.tum-urunler__sirala label { font-size: 13px; color: var(--metin-ikincil); white-space: nowrap; }
.tum-urunler__sirala select {
	padding: 9px 14px;
	background: var(--bg-kart);
	border: 1px solid var(--border);
	border-radius: var(--tribun-radius);
	color: var(--metin);
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
}
.tum-urunler__sirala select:focus { outline: none; border-color: var(--tribun-altin); }
.tum-urunler__sirala button { display: none; }

@media (max-width: 700px) {
	.tum-urunler__araclar { flex-wrap: wrap; }
	.tum-urunler__filtre { order: 1; flex: 1 1 100%; }
	.tum-urunler__sirala { order: 2; margin-left: auto; }
}

.tum-urunler__daha {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 32px;
	padding: 32px 0 8px;
}
.tum-urunler__yukleniyor { color: var(--metin-ikincil); font-size: 13px; }

/* --------------------------------------------------------------------
   7. Kategoriler
   -------------------------------------------------------------------- */
/* Sütun sayısı kategori adedine göre kendiliğinden ayarlanır;
   4 kategori varsa 4 sütun olur, sağda boşluk kalmaz. */
.kategori-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 20px;
}
.kategori-kart {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bg-kart);
}
/* Görselin tamamı kırpılmadan gösterilir; arkadaki bulanık kopya
   oran farkından doğan boşluğu doldurur. Böylece yatay, dikey veya
   kare — hangi görseli yüklerseniz yükleyin kart dolgun görünür. */
.kategori-kart__zemin {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: blur(18px) brightness(0.55);
	transform: scale(1.15);
	z-index: 0;
}
.kategori-kart__gorsel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 1;
}
.kategori-kart::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
}
.kategori-kart__bilgi {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 16px;
	z-index: 3;
	color: #fff;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
}
.kategori-kart__bilgi h3 { font-size: 14px; letter-spacing: 0.02em; }
.kategori-kart__bilgi p { font-size: 12px; color: #d9d9d9; margin: 2px 0 0; }
.kategori-kart__ok { color: var(--tribun-altin); font-size: 18px; }

/* --------------------------------------------------------------------
   8. Avantajlar
   -------------------------------------------------------------------- */
.avantajlar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
/* Güven kutularıyla aynı kart görünümü */
.avantaj-kutu {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 20px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--bg-kart);
	text-align: left;
}
.avantaj-kutu__ikon {
	display: block;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	color: var(--tribun-altin);
	margin-bottom: 0;
}
.avantaj-kutu__metin { min-width: 0; }
.avantaj-kutu h3 {
	font-size: 15px;
	letter-spacing: 0.03em;
	margin-bottom: 5px;
}
.avantaj-kutu p {
	margin: 0;
	font-size: 14px;
	color: var(--metin-ikincil);
	line-height: 1.5;
}

/* --------------------------------------------------------------------
   9. Katalog / Kategori Arşivi
   -------------------------------------------------------------------- */
.katalog-baslik { padding-top: 48px; padding-bottom: 16px; }
.katalog-baslik h1 { font-size: 32px; margin-bottom: 8px; }
.katalog-baslik p { color: var(--metin-ikincil); }

.katalog-filtre {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-bottom: 32px;
	max-width: var(--tribun-container);
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}
.katalog-filtre__link {
	padding: 8px 16px;
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--metin-ikincil);
}
.katalog-filtre__link.aktif,
.katalog-filtre__link:hover {
	background: var(--tribun-altin);
	border-color: var(--tribun-altin);
	color: #0a0a0a;
}

.katalog-sayfa .forma-grid { padding-bottom: 24px; }
.katalog-sayfalama {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 24px 0 64px;
}
.katalog-sayfalama .page-numbers {
	padding: 8px 14px;
	border: 1px solid var(--border);
	border-radius: 4px;
	font-size: 13px;
}
.katalog-sayfalama .current { background: var(--tribun-altin); color: #0a0a0a; border-color: var(--tribun-altin); }

/* --------------------------------------------------------------------
   10. Forma Detay Sayfası
   -------------------------------------------------------------------- */
.forma-detay__breadcrumb {
	padding: 20px 0;
	font-size: 13px;
	color: var(--metin-ikincil);
	display: flex;
	gap: 8px;
	max-width: var(--tribun-container);
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}
.forma-detay__breadcrumb a:hover { color: var(--tribun-altin); }

.forma-detay__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	padding: 28px;
	margin-bottom: 64px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--bg-kart);
}
.forma-detay__sag { padding-top: 4px; }

/* Galeri — thumbnail'lar solda dikey sütun, büyük görsel sağda */
.forma-galeri {
	display: grid;
	grid-template-columns: 78px 1fr;
	gap: 14px;
	align-items: start;
}

.forma-galeri__thumbler {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.forma-galeri__thumb {
	width: 78px;
	height: 92px;
	border-radius: 6px;
	overflow: hidden;
	border: 2px solid var(--border);
	background: var(--bg-alt);
	padding: 0;
	transition: border-color 0.2s ease;
}
.forma-galeri__thumb:hover { border-color: var(--metin-ikincil); }
.forma-galeri__thumb.aktif { border-color: var(--tribun-altin); }
.forma-galeri__thumb img { width: 100%; height: 100%; object-fit: cover; }

.forma-galeri__buyuk {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--bg-alt);
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--border);
}
.forma-galeri__ana-gorsel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.3s ease;
}
.forma-galeri__ana-gorsel.aktif { opacity: 1; visibility: visible; }
.forma-galeri__buyuk.yakinlastir .forma-galeri__ana-gorsel.aktif {
	transform: scale(1.7);
	cursor: zoom-out;
}

.forma-galeri__ok {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px; height: 42px;
	border-radius: 50%;
	background: rgba(0,0,0,0.55);
	backdrop-filter: blur(4px);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	z-index: 2;
	transition: background 0.2s ease;
}
.forma-galeri__ok:hover { background: rgba(0,0,0,0.8); }
.forma-galeri__ok svg { width: 20px; height: 20px; }
.forma-galeri__ok--sol { left: 14px; }
.forma-galeri__ok--sag { right: 14px; }

.forma-galeri__zoom {
	position: absolute;
	top: 14px; right: 14px;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(0,0,0,0.55);
	backdrop-filter: blur(4px);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	z-index: 2;
}
.forma-galeri__zoom:hover { background: rgba(0,0,0,0.8); }
.forma-galeri__zoom svg { width: 16px; height: 16px; }

body.tema-acik .forma-galeri__buyuk { background: #f0f0f0; }

/* Bilgi bloğu */
.forma-detay__marka { color: var(--tribun-altin); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; }
.forma-detay__ad {
	font-size: clamp(26px, 2.4vw, 38px);
	margin: 10px 0 18px;
	line-height: 1.12;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.forma-detay__fiyat { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.forma-detay__fiyat .fiyat-guncel { font-size: 28px; }
.forma-detay__fiyat .fiyat-eski { font-size: 15px; }
.indirim-etiketi {
	background: var(--tribun-altin);
	color: #0a0a0a;
	font-size: 12px;
	font-weight: 800;
	padding: 4px 10px;
	border-radius: 4px;
}

.forma-detay__meta { color: var(--metin-ikincil); font-size: 13px; margin: 0 0 20px; }

.forma-detay__aciklama { border-top: 1px solid var(--border); padding-top: 22px; margin-top: 18px; }
.forma-detay__aciklama h2 { font-size: 12px; letter-spacing: 0.08em; margin-bottom: 12px; color: var(--metin); }
.forma-detay__aciklama .icerik { color: var(--metin-ikincil); font-size: 14px; line-height: 1.7; }

.forma-detay__guven {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding-top: 22px;
	border-top: 1px solid var(--border);
}
.forma-detay__guven .guven-mini + .guven-mini {
	border-left: 1px solid var(--border);
	padding-left: 24px;
}
.guven-mini {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 12px;
	flex: 1;
	min-width: 190px;
}
.guven-mini strong { display: block; font-size: 12px; margin-bottom: 3px; letter-spacing: 0.02em; }
.guven-mini > div span { color: var(--metin-ikincil); line-height: 1.45; }
.guven-mini__ikon {
	display: block;
	width: 26px;
	height: 26px;
	color: var(--tribun-altin);
	flex-shrink: 0;
}
.guven-mini__ikon svg { width: 26px; height: 26px; }

/* --------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); margin-top: 40px; background: var(--bg); }
.site-footer__ust {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 32px;
	padding-top: 56px;
	padding-bottom: 40px;
}
.site-footer__marka p { color: var(--metin-ikincil); font-size: 13px; line-height: 1.6; max-width: 320px; margin: 14px 0 18px; }
.site-footer__sosyal { display: flex; gap: 10px; }
.site-footer__sosyal a {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1px solid var(--border);
	display: flex; align-items: center; justify-content: center;
}
.site-footer__sosyal svg { width: 16px; height: 16px; color: var(--metin); }
.site-footer__sosyal a:hover svg { color: var(--tribun-altin); }
.site-footer__sosyal a:hover { border-color: var(--tribun-altin); }

.site-footer__kolon h4 { font-size: 13px; letter-spacing: 0.04em; margin-bottom: 16px; }
.site-footer__kolon ul li { margin-bottom: 10px; }
.site-footer__kolon a { font-size: 13px; color: var(--metin-ikincil); }
.site-footer__kolon a:hover { color: var(--tribun-altin); }

.site-footer__alt {
	border-top: 1px solid var(--border);
	padding: 20px 24px;
	max-width: var(--tribun-container);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 12px;
	color: var(--metin-ikincil);
}

/* --------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.forma-grid { grid-template-columns: repeat(3, 1fr); }
	.forma-grid--genis { grid-template-columns: repeat(3, 1fr); }
	.guven-alani { grid-template-columns: repeat(2, 1fr); }
	.avantajlar { grid-template-columns: repeat(2, 1fr); }
	.site-footer__ust { grid-template-columns: 1fr 1fr; }
	.forma-detay__grid { grid-template-columns: 1fr; gap: 32px; padding: 20px; }
}

@media (max-width: 640px) {
	/* Mobilde thumbnail'lar büyük görselin altına yatay olarak iner. */
	.forma-galeri { grid-template-columns: 1fr; }
	.forma-galeri__thumbler {
		flex-direction: row;
		order: 2;
		overflow-x: auto;
		padding-bottom: 4px;
	}
	.forma-galeri__buyuk { order: 1; }
	.forma-galeri__thumb { width: 64px; height: 76px; flex-shrink: 0; }
	.forma-detay__guven .guven-mini + .guven-mini { border-left: none; padding-left: 0; }
}

@media (max-width: 768px) {
	.site-nav { display: none; } /* Mobilde hamburger menü ile açılacak şekilde JS'e bağlanabilir. */

	/* Mobilde görsel yine metnin arkasına geçiyor (eski hâl), ama koyu
	   katman öncekinden daha saydam — görsel daha net/canlı görünsün. */
	.hero-panel { min-height: 460px; }
	.hero-panel__gorsel { inset: 0; }
	.hero-panel__gorsel::after {
		background: linear-gradient( 180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.6) 100% );
	}
	body.tema-acik .hero-panel__gorsel::after {
		background: linear-gradient( 180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.6) 100% );
	}
	.hero-panel__icerik { padding: 40px 24px; }
	.hero-panel__ok { width: 38px; height: 38px; }
	.hero-panel__ok--sol { left: 10px; }
	.hero-panel__ok--sag { right: 10px; }
	.site-logo__masaustu { display: none; }
	.site-logo__mobil { display: block; max-height: 36px; }
	.forma-grid { grid-template-columns: repeat(2, 1fr); }
	.forma-grid--genis { grid-template-columns: repeat(2, 1fr); }
	/* Anasayfa "Yeni Eklenenler": mobilde 15 formadan sadece ilk 6'sı gösterilir. */
	.yeni-eklenenler .forma-grid > .forma-kart:nth-child(n+7) { display: none; }
	.guven-alani { grid-template-columns: 1fr; gap: 12px; }
	.guven-kutu { padding: 18px 16px; gap: 14px; }
	.guven-kutu__ikon { width: 28px; height: 28px; }
	.avantajlar { grid-template-columns: 1fr; }
	.site-footer__ust { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.forma-grid, .forma-grid--genis { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.kategori-grid, .kategori-grid--sayfa { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.hero__baslik { font-size: 40px; }
	.site-header__inner { height: 64px; }
}

/* --------------------------------------------------------------------
   13. Genel Sayfalar (Hakkımızda, İletişim, SSS, Bilgi Sayfaları)
   -------------------------------------------------------------------- */
.genel-sayfa {
	max-width: var(--tribun-container);
	margin: 0 auto;
	padding: 0 24px 64px;
}
.genel-sayfa__baslik { padding: 48px 0 24px; }
.genel-sayfa__baslik h1 { font-size: 34px; margin-bottom: 10px; }
.genel-sayfa__baslik p { color: var(--metin-ikincil); margin: 0; }

.genel-sayfa__icerik {
	max-width: 760px;
	color: var(--metin-ikincil);
	font-size: 15px;
	line-height: 1.8;
}
.genel-sayfa__icerik h2,
.genel-sayfa__icerik h3 { color: var(--metin); margin: 28px 0 10px; font-size: 18px; }
.genel-sayfa__icerik a { color: var(--tribun-altin); }
.genel-sayfa__icerik ul { list-style: disc; padding-left: 20px; }
.genel-sayfa__icerik ul li { margin-bottom: 8px; }


/* İletişim */
.iletisim-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 40px;
	align-items: start;
}
.iletisim-kart {
	display: block;
	padding: 20px;
	border: 1px solid var(--border);
	border-radius: 8px;
	margin-bottom: 14px;
	background: var(--bg-kart);
	transition: border-color 0.2s ease;
}
.iletisim-kart:hover { border-color: var(--tribun-altin); }
.iletisim-kart h3 { font-size: 15px; margin-bottom: 6px; }
.iletisim-kart p { margin: 0; font-size: 13px; color: var(--metin-ikincil); }

.iletisim-form__alan { margin-bottom: 16px; }
.iletisim-form__alan label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}
.iletisim-form__alan input,
.iletisim-form__alan textarea {
	width: 100%;
	padding: 12px 14px;
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--tribun-radius);
	color: var(--metin);
	font-family: inherit;
	font-size: 14px;
}
.iletisim-form__alan input:focus,
.iletisim-form__alan textarea:focus {
	outline: none;
	border-color: var(--tribun-altin);
}

.form-bildirim {
	padding: 12px 16px;
	border-radius: var(--tribun-radius);
	font-size: 14px;
	margin-bottom: 20px;
	border: 1px solid var(--border);
}
.form-bildirim--basarili { border-color: var(--tribun-altin); color: var(--tribun-altin); }
.form-bildirim--hata { border-color: #e05252; color: #e05252; }

/* SSS akordeon */
.sss-liste { max-width: 800px; }
.sss-oge {
	border-bottom: 1px solid var(--border);
}
.sss-oge__soru {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	text-align: left;
	font-size: 15px;
	font-weight: 600;
	color: var(--metin);
}
.sss-oge__soru:hover { color: var(--tribun-altin); }
.sss-oge__ikon {
	color: var(--tribun-altin);
	font-size: 20px;
	flex-shrink: 0;
	line-height: 1;
}
.sss-oge__cevap {
	padding: 0 0 20px;
	color: var(--metin-ikincil);
	font-size: 14px;
	line-height: 1.7;
}
.sss-oge__cevap p:first-child { margin-top: 0; }

@media (max-width: 900px) {
	.iletisim-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* --------------------------------------------------------------------
   14. Inline SVG İkonlar
   -------------------------------------------------------------------- */
.tribun-ikon {
	width: 100%;
	height: 100%;
	display: block;
}
.guven-kutu__ikon,
.avantaj-kutu__ikon {
	display: block;
	flex-shrink: 0;
}
.guven-kutu__ikon { width: 24px; height: 24px; }
.site-header__araclar svg { width: 18px; height: 18px; }
.forma-kart__favori svg { width: 16px; height: 16px; }
.forma-galeri__zoom svg { width: 16px; height: 16px; }
.guven-mini { align-items: flex-start; }

/* --------------------------------------------------------------------
   15. Puan / Yıldızlar
   -------------------------------------------------------------------- */
.forma-puan {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
}
.forma-puan__yildizlar {
	display: inline-flex;
	gap: 2px;
	color: var(--tribun-altin);
}
.forma-puan__yildiz {
	width: 17px;
	height: 17px;
	display: block;
}
.forma-puan__yildiz svg { width: 100%; height: 100%; display: block; }
.forma-puan__yildiz--bos { opacity: 0.45; }
.forma-puan__sayi {
	font-size: 13px;
	color: var(--metin-ikincil);
}

/* --------------------------------------------------------------------
   16. Kategoriler Sayfası / Arama / 404
   -------------------------------------------------------------------- */

/* Kategoriler sayfasında kartlar biraz daha büyük */
.kategori-grid--sayfa {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
}
.kategori-grid--sayfa .kategori-kart { aspect-ratio: 3 / 4; }

/* Çizgili (ikincil) buton */
.buton--cizgili {
	border: 1px solid var(--border);
	color: var(--metin);
}
.buton--cizgili:hover { border-color: var(--tribun-altin); color: var(--tribun-altin); opacity: 1; }

/* Arama sayfası */
.arama-yeniden {
	max-width: var(--tribun-container);
	margin: 0 auto;
	padding: 0 24px 32px;
}
.arama-yeniden form { display: flex; gap: 8px; max-width: 520px; }
.arama-yeniden input {
	flex: 1;
	padding: 12px 16px;
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--tribun-radius);
	color: var(--metin);
	font-family: inherit;
}
.arama-yeniden input:focus { outline: none; border-color: var(--tribun-altin); }
.arama-yeniden button {
	padding: 12px 22px;
	background: var(--tribun-altin);
	color: #0a0a0a;
	font-weight: 700;
	border-radius: var(--tribun-radius);
}

.arama-diger {
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 18px;
	background: var(--bg-kart);
}
.arama-diger h3 { font-size: 15px; margin-bottom: 6px; }
.arama-diger p { margin: 0; font-size: 13px; color: var(--metin-ikincil); line-height: 1.5; }
.arama-diger a:hover h3 { color: var(--tribun-altin); }

/* 404 */
.hata-sayfasi {
	max-width: var(--tribun-container);
	margin: 0 auto;
	padding: 80px 24px 100px;
	display: flex;
	justify-content: center;
	text-align: center;
}
.hata-sayfasi__icerik { max-width: 560px; }
.hata-sayfasi__kod {
	display: block;
	font-size: clamp(72px, 12vw, 130px);
	font-weight: 900;
	line-height: 1;
	color: var(--tribun-altin);
	letter-spacing: -0.04em;
}
.hata-sayfasi h1 { font-size: clamp(22px, 3vw, 32px); margin: 12px 0 14px; }
.hata-sayfasi p { color: var(--metin-ikincil); line-height: 1.7; margin: 0 0 28px; }
.hata-sayfasi__butonlar {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 36px;
}
.hata-sayfasi__arama form { display: flex; gap: 8px; }
.hata-sayfasi__arama input {
	flex: 1;
	padding: 12px 16px;
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--tribun-radius);
	color: var(--metin);
	font-family: inherit;
}
.hata-sayfasi__arama input:focus { outline: none; border-color: var(--tribun-altin); }
.hata-sayfasi__arama button {
	padding: 12px 22px;
	background: var(--tribun-altin);
	color: #0a0a0a;
	font-weight: 700;
	border-radius: var(--tribun-radius);
}

@media (max-width: 1100px) {
}
@media (max-width: 768px) {
}

/* Kategori kartında logo/arma tipi görseller kırpılmasın diye
   üstte hafif bir iç boşluk ve contain davranışı. */
.kategori-kart img {
	object-position: center;
}
.kategori-kart__bilgi h3 {
	text-transform: none; /* PHP tarafında Türkçe uyumlu büyütülüyor */
}

/* Footer — Shopier güvence yazısı ve logosu */
.site-footer__shopier-guvence {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}
.site-footer__shopier-logo {
	display: inline-flex;
	align-items: center;
	opacity: 0.9;
	transition: opacity 0.2s ease;
}
.site-footer__shopier-logo:hover { opacity: 1; }
.site-footer__shopier-logo img {
	height: 20px;
	width: auto;
	display: block;
}

@media (max-width: 600px) {
	.site-footer__alt { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------
   17. Hakkımızda Sayfası
   -------------------------------------------------------------------- */
.hakkimizda-sayfa { padding-bottom: 40px; }

/* Üst blok — başlık ve opsiyonel görsel */
.hakkimizda-hero {
	max-width: var(--tribun-container);
	margin: 0 auto;
	padding: 56px 24px 40px;
}
.hakkimizda-hero--gorselli {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.hakkimizda-hero h1 {
	font-size: clamp(34px, 4.5vw, 56px);
	line-height: 1.05;
	margin: 10px 0 16px;
	text-transform: uppercase;
}
.hakkimizda-hero__slogan {
	font-size: 18px;
	color: var(--tribun-altin);
	font-weight: 600;
	margin: 0;
}
.hakkimizda-hero__gorsel {
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--bg-alt);
}
.hakkimizda-hero__gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Metin gövdesi — başlıkla aynı sol hizada, okunaklılık için genişliği sınırlı */
.hakkimizda-icerik {
	max-width: var(--tribun-container);
	margin: 0 auto;
	padding: 0 24px 56px;
	font-size: 16px;
	line-height: 1.85;
	color: var(--metin-ikincil);
}
.hakkimizda-icerik > * {
	max-width: 780px;
}
.hakkimizda-icerik p { margin: 0 0 18px; }

/* İlk paragraf giriş cümlesi gibi öne çıkar */
.hakkimizda-icerik > p:first-of-type {
	font-size: 19px;
	line-height: 1.7;
	color: var(--metin);
	padding-bottom: 24px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--border);
}

/* Ara başlıklar — solunda sarı çizgi */
.hakkimizda-icerik h2,
.hakkimizda-icerik h3,
.hakkimizda-icerik h4 {
	color: var(--metin);
	font-size: 20px;
	letter-spacing: -0.01em;
	margin: 40px 0 14px;
	padding-left: 16px;
	border-left: 3px solid var(--tribun-altin);
	line-height: 1.3;
}

/* Metin içi vurgular sarı */
.hakkimizda-icerik strong,
.hakkimizda-icerik b { color: var(--tribun-altin); font-weight: 700; }

.hakkimizda-icerik a { color: var(--tribun-altin); }
.hakkimizda-icerik ul { list-style: disc; padding-left: 22px; margin: 0 0 18px; }
.hakkimizda-icerik li { margin-bottom: 8px; }

/* Kapanış çağrısı */
.hakkimizda-cta {
	max-width: var(--tribun-container);
	margin: 0 auto;
	padding: 48px 32px;
	text-align: center;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--bg-kart);
}
.hakkimizda-cta h2 {
	font-size: clamp(20px, 2.6vw, 28px);
	margin-bottom: 10px;
}
.hakkimizda-cta p {
	color: var(--metin-ikincil);
	margin: 0 0 26px;
	font-size: 15px;
}
.hakkimizda-cta__butonlar {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

@media (max-width: 900px) {
	.hakkimizda-hero--gorselli { grid-template-columns: 1fr; gap: 28px; }
	.hakkimizda-hero__gorsel { order: -1; }
}

/* --------------------------------------------------------------------
   18. Bilgi Sayfaları (Gizlilik / Kargo / Kullanım Şartları)
   -------------------------------------------------------------------- */
.bilgi-sayfa {
	max-width: var(--tribun-container);
	margin: 0 auto;
	padding: 0 24px 72px;
}

.bilgi-sayfa__baslik {
	padding: 52px 0 28px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 36px;
}
.bilgi-sayfa__baslik h1 {
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.1;
	margin-bottom: 14px;
	text-transform: uppercase;
}
.bilgi-sayfa__rozet {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--tribun-altin);
	border: 1px solid var(--tribun-altin);
	border-radius: 999px;
	padding: 5px 14px;
}

/* İki sütunlu düzen: solda içindekiler, sağda metin */
.bilgi-sayfa__duzen--toc {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 56px;
	align-items: start;
}

/* İçindekiler — masaüstünde kaydırırken sabit kalır */
.bilgi-toc__ic {
	position: sticky;
	top: 104px;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 20px;
	background: var(--bg-kart);
	max-height: calc(100vh - 140px);
	overflow-y: auto;
}
.bilgi-toc__baslik {
	font-size: 12px;
	letter-spacing: 0.08em;
	margin-bottom: 14px;
	color: var(--metin);
}
.bilgi-toc ul { display: flex; flex-direction: column; gap: 2px; }
.bilgi-toc__oge a {
	display: block;
	font-size: 13px;
	line-height: 1.45;
	color: var(--metin-ikincil);
	padding: 6px 0 6px 12px;
	border-left: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.bilgi-toc__oge a:hover {
	color: var(--tribun-altin);
	border-left-color: var(--tribun-altin);
}
.bilgi-toc__oge--h3 a { padding-left: 24px; font-size: 12.5px; }

/* Metin gövdesi */
.bilgi-sayfa__icerik {
	max-width: 780px;
	font-size: 15.5px;
	line-height: 1.85;
	color: var(--metin-ikincil);
}
.bilgi-sayfa__icerik > p:first-of-type {
	font-size: 17px;
	color: var(--metin);
	line-height: 1.75;
}
.bilgi-sayfa__icerik p { margin: 0 0 16px; }

/* Numaralı ana başlıklar — üstte ince çizgi, altın renkli */
.bilgi-sayfa__icerik h2,
.bilgi-sayfa__icerik h3 {
	color: var(--metin);
	font-size: 19px;
	line-height: 1.35;
	margin: 44px 0 16px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
	scroll-margin-top: 110px; /* sticky header'ın altında kalmasın */
}
.bilgi-sayfa__icerik h3 { font-size: 17px; }
.bilgi-sayfa__icerik > *:first-child { margin-top: 0; }

/* Listeler — sarı işaretli */
.bilgi-sayfa__icerik ul {
	list-style: none;
	padding-left: 4px;
	margin: 0 0 18px;
}
.bilgi-sayfa__icerik ul li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 9px;
}
.bilgi-sayfa__icerik ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tribun-altin);
}
.bilgi-sayfa__icerik ol { padding-left: 22px; margin: 0 0 18px; }
.bilgi-sayfa__icerik ol li { margin-bottom: 9px; }

.bilgi-sayfa__icerik strong,
.bilgi-sayfa__icerik b { color: var(--metin); font-weight: 700; }
.bilgi-sayfa__icerik a { color: var(--tribun-altin); }

@media (max-width: 1000px) {
	/* İçindekiler metnin üstüne taşınır, sabitlik kaldırılır */
	.bilgi-sayfa__duzen--toc { grid-template-columns: 1fr; gap: 28px; }
	.bilgi-toc__ic { position: static; max-height: none; }
	.bilgi-toc ul { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
	.bilgi-toc__oge a { padding: 4px 0 4px 10px; }
	.bilgi-toc__oge--h3 a { padding-left: 10px; }
}

/* --------------------------------------------------------------------
   19. Mobil Menü
   -------------------------------------------------------------------- */

/* Hamburger butonu — sadece mobilde görünür.
   Seçici, .site-header__araclar button kuralını ezecek kadar
   güçlü olmalı; aksi halde masaüstünde de görünüyor. */
.site-header__araclar .menu-ac {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}
.menu-ac__cizgi {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--metin);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}
.menu-ac.acik .menu-ac__cizgi:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-ac.acik .menu-ac__cizgi:nth-child(2) { opacity: 0; }
.menu-ac.acik .menu-ac__cizgi:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Açılan panel */
.mobil-menu {
	border-top: 1px solid var(--border);
	background: var(--bg);
	padding: 12px 24px 28px;
	max-height: calc(100vh - 84px);
	overflow-y: auto;
}
.mobil-menu__liste { display: flex; flex-direction: column; }
.mobil-menu__liste li { border-bottom: 1px solid var(--border); }
.mobil-menu__liste a {
	display: block;
	padding: 16px 2px;
	font-size: 17px;
	font-weight: 600;
	color: var(--tribun-altin);
	opacity: 0.85;
}
.mobil-menu__liste a:hover,
.mobil-menu__liste .current-menu-item a,
.mobil-menu__liste .current_page_item a { opacity: 1; }

.mobil-menu__butonlar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 22px;
}
.mobil-menu__butonlar .buton { justify-content: center; }

/* Menü açıkken arka plan kaymasın */
body.menu-acik { overflow: hidden; }

@media (max-width: 768px) {
	.site-header__araclar .menu-ac { display: flex; }
}
@media (min-width: 769px) {
	.mobil-menu { display: none !important; }
}

/* --------------------------------------------------------------------
   20. Mobil İnce Ayarlar
   -------------------------------------------------------------------- */
@media (max-width: 768px) {
	/* Avantaj ve güven kutuları mobilde daha kompakt */
	.avantajlar { gap: 12px; padding-top: 36px; padding-bottom: 36px; }
	.avantaj-kutu { padding: 18px 16px; gap: 14px; }
	.avantaj-kutu__ikon { width: 28px; height: 28px; }

	/* Kategori kartlarında uzun isimler görselin üstüne binmesin */
	.kategori-kart__bilgi { padding: 12px; }
	.kategori-kart__bilgi h3 { font-size: 12.5px; line-height: 1.25; }
	.kategori-kart__bilgi p { font-size: 11px; }
	.kategori-kart__ok { font-size: 15px; }

	/* Bölüm başlıkları ve "Tümünü Gör" bağlantısı sığmadığında alt alta */
	.bolum-baslik { flex-wrap: wrap; gap: 8px; }
	.bolum-baslik h2 { font-size: 20px; }

	/* Hakkımızda üst bloğundaki fazla boşluk */
	.hakkimizda-hero { padding: 36px 24px 20px; }
	.hakkimizda-icerik > p:first-of-type { font-size: 17px; }
}

/* Breadcrumb — öğeler kelime ortasından bölünmesin, sığmazsa
   yatay kaydırılsın. */
.forma-detay__breadcrumb {
	flex-wrap: nowrap;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
	-ms-overflow-style: none;
	align-items: center;
}
.forma-detay__breadcrumb::-webkit-scrollbar { display: none; }
.forma-detay__breadcrumb a,
.forma-detay__breadcrumb span { flex-shrink: 0; }

@media (max-width: 768px) {
	.forma-detay__breadcrumb { font-size: 12px; padding-top: 16px; padding-bottom: 12px; }

	/* Fiyat, indirim rozeti ve puan satırı mobilde daha derli toplu */
	.forma-detay__fiyat { gap: 10px; margin-bottom: 10px; }
	.forma-detay__fiyat .fiyat-guncel { font-size: 26px; }
	.forma-puan { margin-bottom: 12px; }

	/* Güven kutuları alt alta gelince dikey çizgi gereksiz kalıyor */
	.forma-detay__guven { gap: 16px; }
	.forma-detay__guven .guven-mini + .guven-mini {
		border-left: none;
		padding-left: 0;
	}
}

/* Ürün sayfasındaki ikincil Shopier butonu.
   Ana butonla karışmaması için dolu değil çerçeveli, ama
   fark edilir olması için çerçevesi ve yazısı altın renginde. */
.buton--ikincil {
	margin-top: 0;
	margin-bottom: 4px;
	padding: 16px 24px;
	font-size: 14px;
	border: 2px solid var(--tribun-altin);
	color: var(--tribun-altin);
	background: transparent;
	transition: background 0.2s ease, color 0.2s ease;
}
.buton--ikincil:hover {
	background: var(--tribun-altin);
	color: #0a0a0a;
	opacity: 1;
}

/* --------------------------------------------------------------------
   21. Katalog Sıralama
   -------------------------------------------------------------------- */
.katalog-baslik { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.katalog-baslik > div:first-child { flex: 1; min-width: 200px; }

.katalog-sirala {
	max-width: var(--tribun-container);
	margin: 0 auto;
	padding: 0 24px 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
}
.katalog-sirala label {
	font-size: 13px;
	color: var(--metin-ikincil);
	white-space: nowrap;
}
.katalog-sirala select {
	padding: 9px 14px;
	background: var(--bg-kart);
	border: 1px solid var(--border);
	border-radius: var(--tribun-radius);
	color: var(--metin);
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
}
.katalog-sirala select:focus { outline: none; border-color: var(--tribun-altin); }
.katalog-sirala button { display: none; }

@media (max-width: 600px) {
	.katalog-sirala { justify-content: flex-start; }
	.katalog-sirala select { flex: 1; }
}

/* --------------------------------------------------------------------
   23. Müşteri Yorumları (gerçek, onaylı, üyelik gerektiren sistem)
   -------------------------------------------------------------------- */
.forma-yorumlar {
	max-width: var(--tribun-container);
	margin: 0 auto;
	padding: 32px 24px 0;
}
.forma-yorumlar__baslik {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 24px;
}
.forma-yorumlar__baslik h2 { font-size: 18px; letter-spacing: 0.02em; }
.forma-yorumlar__sayi { font-size: 13px; color: var(--metin-ikincil); }

.forma-yorum-liste { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.forma-yorum-liste ul.children { list-style: none; padding-left: 40px; margin-top: 14px; }

.forma-yorum-oge {
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 18px 20px;
	background: var(--bg-kart);
}
.forma-yorum-oge.depth-2 { background: var(--bg); border-style: dashed; }

.forma-yorum-oge__ust { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.forma-yorum-oge__ust img { border-radius: 50%; display: block; }
.forma-yorum-oge__isim { display: block; font-size: 14px; font-weight: 700; }
.forma-yorum-oge__tarih { display: block; font-size: 12px; color: var(--metin-ikincil); }

.forma-yorum-oge__puan { display: flex; gap: 2px; margin-bottom: 10px; font-size: 15px; letter-spacing: 1px; color: var(--metin-ikincil); opacity: 0.5; }
.forma-yorum-oge__puan .dolu { color: var(--tribun-altin); opacity: 1; }

.forma-yorum-oge__metin { font-size: 14px; line-height: 1.65; color: var(--metin-ikincil); }
.forma-yorum-oge__metin p { margin: 0 0 8px; }
.forma-yorum-oge__metin p:last-child { margin-bottom: 0; }

.forma-yorum-bos {
	padding: 24px;
	text-align: center;
	border: 1px dashed var(--border);
	border-radius: 10px;
	color: var(--metin-ikincil);
	font-size: 14px;
	margin-bottom: 28px;
}

/* Yorum formu */
.forma-yorum-formu { max-width: 560px; }
.forma-yorum-formu .comment-reply-title { font-size: 16px; margin-bottom: 16px; }
.forma-yorum-formu .comment-notes { font-size: 13px; color: var(--metin-ikincil); margin-bottom: 16px; }
.forma-yorum-notu { font-size: 12.5px; color: var(--metin-ikincil); margin-top: 10px; }

.forma-yorum-formu label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}
.forma-yorum-formu textarea,
.forma-yorum-formu input[type="text"],
.forma-yorum-formu input[type="email"],
.forma-yorum-formu input[type="url"] {
	width: 100%;
	padding: 12px 14px;
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--tribun-radius);
	color: var(--metin);
	font-family: inherit;
	font-size: 14px;
	margin-bottom: 16px;
}
.forma-yorum-formu textarea:focus,
.forma-yorum-formu input:focus { outline: none; border-color: var(--tribun-altin); }

/* Tıklanabilir yıldız puanlama */
.forma-yorum-puan-alani { margin-bottom: 16px; }
.forma-yorum-yildiz-secim { display: inline-flex; gap: 4px; }
.yildiz-buton {
	font-size: 26px;
	line-height: 1;
	color: var(--border);
	transition: color 0.15s ease, transform 0.1s ease;
}
.yildiz-buton:hover { transform: scale(1.1); }
.yildiz-buton.dolu { color: var(--tribun-altin); }

/* Giriş / üyelik uyarısı */
.forma-yorum-giris-gerekli {
	padding: 24px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--bg-kart);
	text-align: center;
}
.forma-yorum-giris-gerekli p { margin: 0 0 16px; color: var(--metin-ikincil); font-size: 14px; }
.forma-yorum-giris-gerekli__butonlar { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.forma-yorum-kapali { color: var(--metin-ikincil); font-size: 14px; text-align: center; padding: 20px 0; }

/* --------------------------------------------------------------------
   24. Beden Tablosu
   -------------------------------------------------------------------- */
.beden-tablosu {
	border: 1px solid var(--border);
	border-radius: 8px;
	margin: 18px 0;
	overflow: hidden;
}
.beden-tablosu summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	list-style: none;
}
.beden-tablosu summary::-webkit-details-marker { display: none; }
.beden-tablosu__ok { color: var(--tribun-altin); transition: transform 0.2s ease; }
.beden-tablosu[open] .beden-tablosu__ok { transform: rotate(180deg); }

.beden-tablosu__icerik { padding: 0 18px 18px; }
.beden-tablosu table { width: 100%; border-collapse: collapse; font-size: 13px; }
.beden-tablosu th,
.beden-tablosu td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var(--border);
}
.beden-tablosu th { color: var(--metin-ikincil); font-weight: 600; font-size: 12px; }
.beden-tablosu__not {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--metin-ikincil);
	line-height: 1.5;
}

/* --------------------------------------------------------------------
   25. Benzer Formalar
   -------------------------------------------------------------------- */
.benzer-formalar {
	max-width: var(--tribun-container);
	margin: 8px auto 0;
	padding: 0 24px 56px;
}

/* --------------------------------------------------------------------
   26. Favorilerim Sayfası
   -------------------------------------------------------------------- */
.favorilerim-sayfa {
	max-width: var(--tribun-container);
	margin: 0 auto;
	padding: 40px 24px 64px;
}
.favorilerim-sayfa .bolum-baslik { margin-bottom: 24px; }
.favorilerim-bos {
	color: var(--metin-ikincil);
	font-size: 15px;
	line-height: 1.6;
	max-width: 460px;
	padding: 32px 0;
}

/* --------------------------------------------------------------------
   27. Yüzen Butonlar (Shopier + WhatsApp)
   -------------------------------------------------------------------- */
.whatsapp-yuzen,
.shopier-yuzen {
	position: fixed;
	right: 20px;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0,0,0,0.35);
	z-index: 60;
	transition: transform 0.2s ease;
}
.whatsapp-yuzen { bottom: 20px; background: #25d366; color: #fff; }
.shopier-yuzen { bottom: 88px; background: var(--tribun-altin); color: #0a0a0a; }
.whatsapp-yuzen:hover,
.shopier-yuzen:hover { transform: scale(1.07); }
.whatsapp-yuzen svg,
.shopier-yuzen svg { width: 28px; height: 28px; }

@media (max-width: 480px) {
	.whatsapp-yuzen,
	.shopier-yuzen { width: 48px; height: 48px; right: 14px; }
	.whatsapp-yuzen { bottom: 14px; }
	.shopier-yuzen { bottom: 74px; }
	.whatsapp-yuzen svg,
	.shopier-yuzen svg { width: 24px; height: 24px; }
}

/* --------------------------------------------------------------------
   28. Çerez Onay Bandı
   -------------------------------------------------------------------- */
.cerez-banner[hidden] { display: none; }
.cerez-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	background: var(--bg-alt);
	border-top: 1px solid var(--border);
	padding: 16px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.cerez-banner p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--metin-ikincil);
	max-width: 640px;
}
.cerez-banner p a { color: var(--tribun-altin); text-decoration: underline; }
.cerez-banner__butonlar { display: flex; gap: 10px; flex-shrink: 0; }
.cerez-banner .buton { padding: 10px 18px; font-size: 13px; }

@media (max-width: 640px) {
	.cerez-banner { flex-direction: column; align-items: stretch; text-align: left; }
	.cerez-banner__butonlar { justify-content: flex-end; }
}