/* ==========================================================================
   asilsaat.net — ürün sayfası düzeni
   Woodmart child. Tema güncellemesinde silinmez.
   ========================================================================== */

:root {
	/* Eski kırmızı rgb(222,18,25) fazla sertti; bu ton daha doygun ve
	   pahalı duruyor, logodaki kırmızıyla da çakışmıyor. */
	--asil-kirmizi:       #c8102e;
	--asil-kirmizi-koyu:  #a00d24;
	--asil-kirmizi-acik:  #fdf2f4;
	--asil-yesil:         #189d4e;
	--asil-yesil-koyu:    #147e3f;
	--asil-murekkep:      #1b222c;
	--asil-soluk:         #6d7480;
	--asil-cizgi:         #e6e8ee;
	--asil-zemin:         #fbfcfe;

	/* Maske olarak kullanılan simgeler — renk `background` ile verilir,
	   böylece aynı SVG her yerde metin rengini alır. */
	--asil-takvim:    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7ZM5 9h14v10H5V9Z"/></svg>');
	--asil-cikan-ok:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 17 17 7m0 0H9m8 0v8" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	/* Kart başlıklarındaki simgeler — maske değil, renkli zemin üstünde. */
	--asil-rozet:     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c8102e"><path d="m12 2 2.2 1.6 2.7-.3 1 2.5 2.4 1.2-.6 2.6L21 12l-1.3 2.4.6 2.6-2.4 1.2-1 2.5-2.7-.3L12 22l-2.2-1.6-2.7.3-1-2.5-2.4-1.2.6-2.6L3 12l1.3-2.4-.6-2.6 2.4-1.2 1-2.5 2.7.3L12 2Zm-1 12.2-2.3-2.3L7.3 13.3l3.7 3.7 5.7-5.7-1.4-1.4-4.3 4.3Z"/></svg>');
	--asil-kulaklik:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c8102e"><path d="M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h1a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H6v-1a6 6 0 1 1 12 0v1h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h1a3 3 0 0 0 3-3v-5a8 8 0 0 0-8-8Z"/></svg>');
}

/* --- 1. Tema kırmızısını yumuşat ------------------------------------------
   Woodmart her şeyi --wd-primary-color üzerinden boyuyor. Asıl değişiklik
   tema ayarında (primary-color) yapıldı; bu satırlar yedek. */
:root,
.wd-page-wrapper,
body {
	--wd-primary-color: var(--asil-kirmizi);
	--btns-accented-bgcolor: var(--asil-kirmizi);
	--btns-accented-bgcolor-hover: var(--asil-kirmizi-koyu);
}

/* --- 2. Başlık fiyatın üstüne taşındı -------------------------------------
   Woodmart Single Product Builder başlığı sayfanın en üstüne, görselden de
   önce koyuyordu. Üstteki blok gizlendi; başlık PHP ile fiyatın üstünde
   yeniden basılıyor (inc/urun-sayfasi.php).

   ⚠️ Gizlenen öğe builder bloğu `.wd-single-title`. Builder düzeni baştan
   kurulursa sınıf aynı kalır, kural çalışmaya devam eder. */
.single-product .wd-single-title { display: none !important; }

/* Sekme şeridi gizlendi: içerik tek bir sekmenin içinde basılıyor ama
   artık sekme değil, alt alta bölümler. Şerit boş kalacağı için gidiyor. */
.single-product .wd-single-tabs .wd-nav-tabs,
.single-product .woocommerce-tabs > ul.tabs { display: none !important; }

/* Panel kabı sade kalsın; kartların kendi çerçevesi var. */
.single-product .wd-single-tabs .woocommerce-Tabs-panel,
.single-product .wd-single-tabs .wd-tab-content {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

/* Başlık + fiyat + marka tek ızgarada: başlık tam satır, altında fiyat
   solda / marka düğmesi sağda, aynı hizada.

   ⚠️ Fiyat ve marka AYRI builder öğeleri (`.wd-single-price` ve
   `.wd-single-brands`), ikisi de aynı `.wpb_wrapper`'ın çocuğu. Aynı satıra
   almanın yolu: sarmalayıcıyı ızgara yap, fiyat kutusunu `display: contents`
   ile saydamlaştır ki başlık ve fiyat da ızgara öğesi olsun. */
.single-product .wpb_wrapper:has(> .wd-single-price) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 16px;
}

.single-product .wd-single-price { display: contents; }

/* Woodmart boş `<p>` basıyor; ızgarada hücre işgal etmesin. */
.single-product .wd-single-price > p:empty { display: none; }

.asil-urun-basligi {
	grid-column: 1 / -1;
	margin: 0 0 8px;
	color: var(--asil-murekkep);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
}

.single-product .wd-single-price .woocommerce-Price-amount { justify-self: start; }
.single-product .wd-single-brands { margin: 0; justify-self: end; }

.single-product .wd-single-brands .wd-product-brands a {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--asil-cizgi);
	border-radius: 10px;
	background: #fff;
	color: var(--asil-murekkep);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease;
}

.single-product .wd-single-brands .wd-product-brands a:hover {
	border-color: var(--asil-kirmizi);
	color: var(--asil-kirmizi);
}

/* Satın alma düğmeleri: WhatsApp düğmesiyle aynı köşe yarıçapı.

   ⚠️ Kapsayıcıya `--btn-brd-radius` VERME: adet kutusundaki `-` / `+`
   düğmeleri de aynı değişkeni okuyor, yuvarlanınca bitişik grup üç ayrı
   kutuya bölünüyordu. Yarıçap yalnız bu iki düğmeye verilir. */
.single-product .wd-single-add-cart .single_add_to_cart_button,
.single-product .wd-single-add-cart .wd-buy-now-btn { border-radius: 10px; }

/* Adet kutusu bitişik ve köşesiz kalsın. */
.single-product .wd-single-add-cart .quantity,
.single-product .wd-single-add-cart .quantity .btn,
.single-product .wd-single-add-cart .quantity input { border-radius: 0; }

/* Başlık / fiyat / satın alma alanlarını ince çizgilerle ayır. */
.asil-urun-basligi { padding-bottom: 12px; border-bottom: 1px solid var(--asil-cizgi); }
.single-product .wd-single-add-cart { padding-top: 18px; border-top: 1px solid var(--asil-cizgi); }

/* --- 3. Breadcrumb: YALNIZ MOBİLDE tek satır + yana kaydırma --------------
   Masaüstünde yer sorunu yok, orada doğal akışında kalsın.
   ⚠️ Bu sayfada WooCommerce'in `.woocommerce-breadcrumb`'ı YOK; breadcrumb
   Rank Math'in `nav.rank-math-breadcrumb` öğesi. */
@media (max-width: 1024px) {
	.single-product nav.rank-math-breadcrumb,
	.single-product nav.rank-math-breadcrumb p {
		display: block;
		margin: 0;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		font-size: 12px;
		line-height: 1.6;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		/* Sağda devamı olduğu belli olsun. */
		-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
		mask-image: linear-gradient(90deg, #000 88%, transparent);
	}

	.single-product nav.rank-math-breadcrumb::-webkit-scrollbar,
	.single-product nav.rank-math-breadcrumb p::-webkit-scrollbar { display: none; }

	/* ⚠️ Kaydırma bu sarmalayıcı olmadan ÇALIŞMIYOR: `.wd-text-block`
	   inline-block, yani içeriği kadar büyüyor — nowrap breadcrumb onu
	   878 px'e çıkarıyor, taşan kısım üst kapta kırpılıyordu. Blok yapıp
	   genişliği sütuna bağlayınca `nav p` gerçekten kaydırılır oluyor. */
	.single-product .wd-text-block:has(nav.rank-math-breadcrumb) {
		display: block;
		max-width: 100%;
		margin-bottom: 12px !important;
		overflow: hidden;
	}

	/* Ürün başlığı da tek satır + yana kaydırma.
	   375 px'de 4 satıra çıkıp fiyatı ve satın alma alanını çok aşağı
	   itiyordu. Izgara öğesi olduğu için genişliği sütuna bağlı; breadcrumb'taki
	   inline-block tuzağı burada yok. */
	.asil-urun-basligi {
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: 10px;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		/* Sağda devamı olduğu belli olsun. */
		-webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
		mask-image: linear-gradient(90deg, #000 90%, transparent);
	}

	.asil-urun-basligi::-webkit-scrollbar { display: none; }
}

/* --- 4. Ürünün yanındaki "Ürün Özellikleri" kutusu ------------------------
   İçeriği aşağıdaki "Ürün Bilgileri" ızgarasına taşındı; iki yerde durmasın.
   Silmek yerine gizlendi — builder öğesi, geri alınabilir olsun. */
.single-product .wd-single-attrs { display: none !important; }

/* --- 5. Sipariş kanalları + güven kartı ------------------------------------ */
.asil-kanal-kart {
	margin: 22px 0 0;
	padding: 20px 22px;
	border: 1px solid var(--asil-cizgi);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(18, 22, 38, .04), 0 10px 28px rgba(27, 34, 44, .055);
}

.asil-kanal-bas { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

.asil-kanal-ikon {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--asil-kirmizi-acik);
	color: var(--asil-kirmizi);
}

.asil-kanal-ikon .asil-ikon { width: 22px; height: 22px; }
.asil-kanal-bas strong { display: block; color: var(--asil-murekkep); font-size: 16px; font-weight: 800; line-height: 1.35; }
.asil-kanal-bas small { display: block; margin-top: 3px; color: var(--asil-soluk); font-size: 13.5px; line-height: 1.45; }

.asil-kanal-yollar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }

.asil-kanal-wa,
.asil-kanal-ara {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 46px;
	padding: 0 14px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.asil-kanal-wa { border: 1px solid var(--asil-yesil); background: var(--asil-yesil); color: #fff; }
.asil-kanal-wa:hover, .asil-kanal-wa:focus { border-color: var(--asil-yesil-koyu); background: var(--asil-yesil-koyu); color: #fff; }
.asil-kanal-ara { border: 1px solid var(--asil-cizgi); background: #fff; color: var(--asil-murekkep); }
.asil-kanal-ara:hover, .asil-kanal-ara:focus { border-color: var(--asil-kirmizi); background: var(--asil-kirmizi-acik); color: var(--asil-kirmizi); }

.asil-kanal-wa span, .asil-kanal-ara span { flex: 1; text-align: center; }
.asil-kanal-wa .asil-ikon, .asil-kanal-ara .asil-ikon { flex: none; }
.asil-ikon { width: 19px; height: 19px; }
.asil-ikon-ok { width: 17px; height: 17px; opacity: .85; }

.asil-kanal-guven {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 18px -22px -20px;
	padding: 15px 22px;
	border-top: 1px solid var(--asil-cizgi);
}

.asil-kanal-guven > span {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 11px;
	padding: 0 13px;
	border-left: 1px solid var(--asil-cizgi);
}

.asil-kanal-guven > span:first-child { padding-left: 0; border-left: 0; }
.asil-kanal-guven .asil-ikon { grid-row: span 2; color: var(--asil-kirmizi); }
.asil-kanal-guven b { color: var(--asil-murekkep); font-size: 13.5px; font-weight: 700; }
.asil-kanal-guven small { color: var(--asil-soluk); font-size: 12.5px; line-height: 1.35; }

@media (max-width: 760px) {
	.asil-kanal-kart { padding: 18px; }
	.asil-kanal-yollar { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.asil-kanal-wa, .asil-kanal-ara { min-height: 44px; font-size: 14px; }
	.asil-kanal-guven {
		grid-template-columns: minmax(0, 1fr);
		gap: 13px;
		margin: 16px -18px -18px;
		padding: 15px 18px;
	}
	.asil-kanal-guven > span { padding: 0; border-left: 0; }
}

/* --- 6. Ek ürün teklifi (saat kutusu vb.) ---------------------------------- */
.asil-ek-urunler { display: grid; gap: 10px; width: 100%; margin: 0 0 16px; }

.asil-ek-urun {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--asil-cizgi);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	/* Woodmart sepet formunu ortalıyor; miras alınan hizalama ürün adını
	   ve fiyatı ortalayıp kartı dağıtıyordu. */
	text-align: left;
	transition: border-color .18s ease, background .18s ease;
}

.asil-ek-urun:hover { border-color: #cfd3dd; }
.asil-ek-urun:has(.asil-ek-kutu:checked) { border-color: var(--asil-kirmizi); background: var(--asil-kirmizi-acik); }

/* Gerçek kutu gizli ama erişilebilir: klavye ve ekran okuyucu çalışsın. */
.asil-ek-kutu {
	position: absolute;
	width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.asil-ek-anahtar {
	position: relative;
	flex: none;
	width: 46px; height: 26px;
	border-radius: 13px;
	background: #d7dae2;
	transition: background .2s ease;
}

.asil-ek-anahtar::after {
	content: '';
	position: absolute;
	top: 3px; left: 3px;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
	transition: transform .2s ease;
}

.asil-ek-kutu:checked + .asil-ek-anahtar { background: var(--asil-kirmizi); }
.asil-ek-kutu:checked + .asil-ek-anahtar::after { transform: translateX(20px); }
.asil-ek-kutu:focus-visible + .asil-ek-anahtar { outline: 2px solid var(--asil-kirmizi); outline-offset: 2px; }

.asil-ek-bilgi { display: grid; gap: 4px; min-width: 0; }
.asil-ek-ad { color: var(--asil-murekkep); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.asil-ek-fiyat { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.asil-ek-fiyat del { color: var(--asil-soluk); font-size: 13px; text-decoration: line-through; }
.asil-ek-fiyat ins { color: var(--asil-kirmizi); font-size: 15px; font-weight: 800; text-decoration: none; background: none; }
.asil-ek-fiyat del .woocommerce-Price-amount,
.asil-ek-fiyat ins .woocommerce-Price-amount { color: inherit; }
.asil-ek-gorsel { flex: none; }
.asil-ek-gorsel img { display: block; width: 62px; height: 62px; border-radius: 8px; object-fit: cover; }

@media (max-width: 480px) {
	.asil-ek-urun { gap: 11px; padding: 11px 12px; }
	.asil-ek-gorsel img { width: 52px; height: 52px; }
	.asil-ek-ad { font-size: 13px; }
}

/* ==========================================================================
   7. Alt bölümler — sekme yerine alt alta bloklar
   Dört sekme başlığı mobilde ikinci satıra düşüyordu. Sekme mantığı
   tamamen kaldırıldı (inc/bolumler.php).
   ========================================================================== */

.asil-bolumler { display: grid; gap: 22px; margin-top: 30px; }

.asil-bolum {
	border: 1px solid var(--asil-cizgi);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
}

.asil-bolum-bas {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 17px 22px;
	border-bottom: 1px solid var(--asil-cizgi);
	background: linear-gradient(180deg, #fdf7f8, #fff);
}

.asil-bolum-ikon {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px; height: 38px;
	border-radius: 10px;
	background: var(--asil-kirmizi-acik);
	color: var(--asil-kirmizi);
}

.asil-bolum-ikon .asil-ikon { width: 19px; height: 19px; }
.asil-bolum-bas strong { display: block; color: var(--asil-murekkep); font-size: 16px; font-weight: 800; line-height: 1.3; }
.asil-bolum-bas small { display: block; margin-top: 2px; color: var(--asil-soluk); font-size: 13px; }

.asil-bolum-govde { padding: 20px 22px; }

/* Metin bloklarının okunabilirliği */
.asil-yazi { color: #41485a; font-size: 14.5px; line-height: 1.75; }
.asil-yazi > :first-child { margin-top: 0; }
.asil-yazi > :last-child { margin-bottom: 0; }
.asil-yazi p { margin: 0 0 14px; }
.asil-yazi strong, .asil-yazi b { color: var(--asil-murekkep); font-weight: 700; }
.asil-yazi a { color: var(--asil-kirmizi); }
.asil-yazi h2, .asil-yazi h3, .asil-yazi h4 { margin: 22px 0 10px; color: var(--asil-murekkep); line-height: 1.3; }
.asil-yazi h2 { font-size: 19px; }
.asil-yazi h3 { font-size: 17px; }
.asil-yazi ul, .asil-yazi ol { margin: 0 0 14px; padding-left: 20px; }
.asil-yazi li { margin-bottom: 6px; }

/* --- İade ve Teslimat + Ürün Bilgileri: iki panel yan yana --- */
/* align-items: start — paneller birbirinin boyuna uymasın. Eşit yükseklikte
   olunca kısa olan panel (Ürün Bilgileri) geriliyor ve kutular arasında
   kocaman boşluklar kalıyordu. */
.asil-iade-bilgi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 20px;
}

.asil-iade-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	color: #e3dadb;
	background: linear-gradient(165deg, #2a1216, #1d0c10 55%, #150a0d);
}

/* Üstteki ince kırmızı şerit — panele imza katıyor. */
.asil-iade-panel::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--asil-kirmizi), #e8566d);
}

.asil-iade-panel .asil-bolum-bas,
.asil-bolum-bas-koyu {
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	background: transparent;
}

.asil-bolum-bas-koyu .asil-bolum-ikon { background: rgba(255, 255, 255, .12); color: #fff; }
.asil-bolum-bas-koyu strong { color: #fff; }
.asil-bolum-bas-koyu small { color: #b9a4a8; }

.asil-iade-govde { padding: 18px 22px; }

/* İade metninde görsel istenmiyor; PHP'de sökülüyor, bu kural da güvence. */
.asil-iade-govde img,
.asil-iade-govde figure { display: none; }

/* Blok WPBakery'de iki sütunluydu: solda galeri, sağda metin. Galeri
   sökülünce sol sütun boşaldı ama genişliğini tutuyor, metin yarım
   sütuna sıkışıp paneli 1210 px'e çıkarıyordu. Sütunları tam genişliğe
   açınca boş olan kendiliğinden kayboluyor (yüksekliği sıfır). */
.asil-iade-govde .vc_row { display: flex; flex-wrap: wrap; margin-left: 0; margin-right: 0; }
.asil-iade-govde .wpb_column { width: 100%; max-width: 100%; flex: 0 0 100%; }
/* !important şart: WPBakery `vc_custom_*` kuralını kendisi !important basıyor. */
.asil-iade-govde .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; }
.asil-iade-govde.asil-yazi { color: #d4c6c8; font-size: 13.5px; }
.asil-iade-govde.asil-yazi strong,
.asil-iade-govde.asil-yazi b { color: #fff; }
.asil-iade-govde.asil-yazi a { color: #ff9aa8; }

.asil-bilgi-panel {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--asil-cizgi);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
}

.asil-bilgi-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 18px 22px;
}

.asil-bilgi-kutu {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 14px;
	border: 1px solid var(--asil-cizgi);
	border-radius: 11px;
	background: var(--asil-zemin);
}

.asil-bilgi-ikon {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px; height: 32px;
	border-radius: 9px;
	background: var(--asil-kirmizi-acik);
	color: var(--asil-kirmizi);
}

.asil-bilgi-ikon .asil-ikon { width: 16px; height: 16px; }
.asil-bilgi-kutu small { display: block; color: var(--asil-soluk); font-size: 12.5px; line-height: 1.3; }
.asil-bilgi-kutu strong { display: block; margin-top: 1px; color: var(--asil-murekkep); font-size: 13.5px; font-weight: 700; line-height: 1.3; }

/* Kategoriler tıklanabilir; bağlantı olduğu belli olsun ama kutu metninden
   kopmasın — altı yalnız üzerine gelince çizilir. */
.asil-bilgi-kutu strong a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dashed var(--asil-cizgi);
	transition: color .18s ease, border-color .18s ease;
}

.asil-bilgi-kutu strong a:hover,
.asil-bilgi-kutu strong a:focus-visible { color: var(--asil-kirmizi); border-bottom-color: var(--asil-kirmizi); }

.asil-bilgi-alt { padding: 14px 22px; border-top: 1px solid var(--asil-cizgi); }

.asil-bilgi-alt a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--asil-yesil);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
}

.asil-bilgi-alt a:hover { text-decoration: underline; }

@media (max-width: 1024px) {
	/* YALNIZ MOBİLDE: "Ürün Bilgileri" açıklamanın ÜSTÜNE çıkar.
	   Masaüstünde dokunulmuyor — orada İade ve Teslimat'ın yanında kalıyor.

	   ⚠️ Panel `.asil-iade-bilgi` ikilisinin içinde; `display: contents` ile
	   o sarmalayıcı kaldırılıyor, iki panel doğrudan `.asil-bolumler`
	   ızgarasının öğesi oluyor ve `order` uygulanabiliyor. */
	.asil-iade-bilgi { display: contents; }
	.asil-bilgi-panel { order: -1; }

	.asil-bolumler { gap: 16px; margin-top: 22px; }
	.asil-bolum-bas { padding: 15px 17px; }
	.asil-bolum-govde,
	.asil-iade-govde,
	.asil-bilgi-grid { padding: 16px 17px; }
	.asil-bilgi-alt { padding: 13px 17px; }
	.asil-yazi { font-size: 14px; }
}

@media (max-width: 520px) {
	.asil-bilgi-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
}

/* --- Yorum alanı --- */
.asil-bolum-yorum .asil-bolum-govde { padding-top: 6px; }
.asil-bolum-yorum #reviews { margin: 0; }
.asil-bolum-yorum .woocommerce-Reviews-title,
.asil-bolum-yorum #reply-title { display: none; }

.asil-bolum-yorum .commentlist { margin: 0; padding: 0; list-style: none; }

.asil-bolum-yorum .commentlist > li {
	margin: 0 0 12px;
	padding: 16px 18px;
	border: 1px solid var(--asil-cizgi);
	border-radius: 12px;
	background: var(--asil-zemin);
}

.asil-bolum-yorum .commentlist > li:last-child { margin-bottom: 0; }
.asil-bolum-yorum .comment_container { display: flex; gap: 14px; }
.asil-bolum-yorum .commentlist img.avatar { width: 42px; height: 42px; border-radius: 50%; }
.asil-bolum-yorum .comment-text { flex: 1; min-width: 0; }
.asil-bolum-yorum .woocommerce-review__author { color: var(--asil-murekkep); font-weight: 700; }
.asil-bolum-yorum .woocommerce-review__published-date { color: var(--asil-soluk); font-size: 12.5px; }
.asil-bolum-yorum .star-rating span::before { color: #f0a500; }

.asil-bolum-yorum #review_form_wrapper {
	margin-top: 16px;
	padding: 18px;
	border: 1px solid var(--asil-cizgi);
	border-radius: 12px;
	background: #fff;
}

.asil-bolum-yorum .comment-form textarea,
.asil-bolum-yorum .comment-form input[type="text"],
.asil-bolum-yorum .comment-form input[type="email"] {
	border-radius: 9px;
	border: 1px solid var(--asil-cizgi);
}

.asil-bolum-yorum .comment-form .submit {
	border-radius: 9px;
	background: var(--asil-kirmizi);
	border-color: var(--asil-kirmizi);
}

.asil-bolum-yorum .comment-form .submit:hover {
	background: var(--asil-kirmizi-koyu);
	border-color: var(--asil-kirmizi-koyu);
}

.asil-bolum-yorum .woocommerce-noreviews {
	margin: 0;
	padding: 16px 18px;
	border: 1px dashed var(--asil-cizgi);
	border-radius: 12px;
	background: var(--asil-zemin);
	color: var(--asil-soluk);
}

/* --- 8. Sık sorulanlar (sepet kartının altı) -----------------------------
   Kutusuz ürünlerde sağ sütun boş kalıyordu. `<details>` kullanıldığı için
   JavaScript yok; hepsi kapalı açılıyor. */
.asil-sss {
	margin-top: 14px;
	overflow: hidden;
	border: 1px solid var(--asil-cizgi);
	border-radius: 14px;
	background: #fff;
}

.asil-sss-oge + .asil-sss-oge { border-top: 1px solid var(--asil-cizgi); }

.asil-sss-oge > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	color: var(--asil-murekkep);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
	transition: background .18s ease, color .18s ease;
}

/* Tarayıcının kendi üçgeni gitsin; yerine kendi okumuz var. */
.asil-sss-oge > summary::-webkit-details-marker { display: none; }
.asil-sss-oge > summary::marker { content: ''; }
.asil-sss-oge > summary:hover { background: var(--asil-kirmizi-acik); color: var(--asil-kirmizi); }

.asil-sss-oge > summary .asil-ikon {
	flex: none;
	width: 17px;
	height: 17px;
	opacity: .55;
	transition: transform .2s ease;
}

.asil-sss-oge[open] > summary { color: var(--asil-kirmizi); }
.asil-sss-oge[open] > summary .asil-ikon { transform: rotate(180deg); opacity: 1; }

.asil-sss-cevap {
	padding: 0 18px 16px;
	color: var(--asil-soluk);
	font-size: 13.5px;
	line-height: 1.65;
}

/* --- 9. "Bunlara da Göz Atabilirsiniz" ürün kartları --------------------
   Kartlar çerçevesiz, zeminsiz duruyordu.

   ⛔ BLOG KARTINA DOKUNULMUYOR: özel tasarım denendi ve iyi olmadı,
   Woodmart'ın kendi blog tasarımı kullanılıyor. Buraya `.wd-post*`
   kuralı EKLEME. */
.single-product .wd-products-element .wd-product {
	padding: 14px;
	border: 1px solid var(--asil-cizgi);
	border-radius: 14px;
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}

/* ⛔ Hareket yok: kartın yükselmesi de görselin büyümesi de istenmiyor. */
.single-product .wd-products-element .wd-product:hover {
	border-color: var(--asil-kirmizi);
	box-shadow: 0 8px 22px rgba(20, 20, 20, .08);
}

/* Kart içindeki görsel de köşeli kalmasın. */
.single-product .wd-products-element .wd-product .product-image-link,
.single-product .wd-products-element .wd-product .wd-product-grid-slider {
	overflow: hidden;
	border-radius: 10px;
}

/* Karuselde altta kaydırma çubuğu görünmesin. */
.single-product .wd-products-element .wd-scroll { display: none; }

/* Bölüm başlıkları: solda, yanından sağa uzanan çizgi.
   ⚠️ Woodmart'ın sarmalayıcı sınıfı `liner-continer` — yazım hatası temada,
   düzeltilmiş hâliyle aramayın. */
.single-product .liner-continer {
	display: flex;
	align-items: center;
	gap: 18px;
}

.single-product .liner-continer .woodmart-title-container.title {
	flex: none;
	margin: 0;
	text-align: left;
}

.single-product .liner-continer::after {
	content: '';
	flex: 1 1 auto;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--asil-kirmizi), rgba(200, 16, 46, 0));
}

/* Alt bilgideki sütun başlıkları da aynı sarmalayıcıyı kullanıyor;
   oradaki dar sütunlarda çizgi iyi durmuyor. */
.single-product .footer-container .liner-continer { display: block; }
.single-product .footer-container .liner-continer::after { content: none; }

@media (max-width: 1024px) {
	.asil-sss-oge > summary { padding: 13px 15px; font-size: 13.5px; }
	.asil-sss-cevap { padding: 0 15px 14px; font-size: 13px; }
	.single-product .wd-products-element .wd-product { padding: 11px; }
}

/* --- 11. Ürün açıklaması: fhngarden düzeni ------------------------------
   Üst etiket + kısa çizgi, büyük başlık, çerçeveli beyaz kart ve okunaklı
   metin. Kart çerçevesi `.asil-bolum`dan geliyor; burada içerik biçimi var. */
.asil-bolum-ust {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 7px;
	color: var(--asil-kirmizi);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.asil-bolum-ust::after {
	content: '';
	width: 30px;
	height: 2px;
	border-radius: 2px;
	background: var(--asil-kirmizi);
}

.asil-bolum-aciklama .asil-bolum-bas strong { font-size: 22px; letter-spacing: -.01em; }

/* --- Metin biçimi --- */
.asil-bolum-aciklama .asil-yazi { font-size: 15.5px; line-height: 1.8; }

/* İlk paragraf giriş cümlesi gibi dursun. */
.asil-bolum-aciklama .asil-yazi > p:first-of-type {
	padding-left: 16px;
	border-left: 3px solid var(--asil-kirmizi);
	color: var(--asil-murekkep);
	font-size: 16.5px;
	font-weight: 500;
}

.asil-bolum-aciklama .asil-yazi > p { margin: 0 0 16px; }
.asil-bolum-aciklama .asil-yazi > p:last-child { margin-bottom: 0; }

.asil-bolum-aciklama .asil-yazi h2,
.asil-bolum-aciklama .asil-yazi h3,
.asil-bolum-aciklama .asil-yazi h4 {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 30px 0 12px;
	color: var(--asil-murekkep);
	font-weight: 700;
	line-height: 1.35;
}

.asil-bolum-aciklama .asil-yazi h2 { font-size: 20px; }
.asil-bolum-aciklama .asil-yazi h3 { font-size: 17.5px; }
.asil-bolum-aciklama .asil-yazi h4 { font-size: 16px; }

.asil-bolum-aciklama .asil-yazi h2::before,
.asil-bolum-aciklama .asil-yazi h3::before {
	content: '';
	flex: none;
	width: 4px;
	height: 1.05em;
	border-radius: 3px;
	background: var(--asil-kirmizi);
}

.asil-bolum-aciklama .asil-yazi ul,
.asil-bolum-aciklama .asil-yazi ol { margin: 0 0 16px; padding-left: 20px; }
.asil-bolum-aciklama .asil-yazi li { margin-bottom: 7px; }
.asil-bolum-aciklama .asil-yazi li::marker { color: var(--asil-kirmizi); }
.asil-bolum-aciklama .asil-yazi strong { color: var(--asil-murekkep); }

.asil-bolum-aciklama .asil-yazi img {
	height: auto;
	max-width: 100%;
	border: 1px solid var(--asil-cizgi);
	border-radius: 14px;
}

.asil-bolum-aciklama .asil-yazi table {
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--asil-cizgi);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
}

.asil-bolum-aciklama .asil-yazi th,
.asil-bolum-aciklama .asil-yazi td { padding: 10px 14px; border-bottom: 1px solid var(--asil-cizgi); text-align: left; }
.asil-bolum-aciklama .asil-yazi th { background: var(--asil-zemin); font-weight: 700; }
.asil-bolum-aciklama .asil-yazi tr:last-child td { border-bottom: 0; }

@media (max-width: 1024px) {
	.asil-bolum-aciklama .asil-bolum-bas strong { font-size: 19px; }
	.asil-bolum-aciklama .asil-yazi { font-size: 15px; }
	.asil-bolum-aciklama .asil-yazi > p:first-of-type { font-size: 15.5px; padding-left: 13px; }
	.asil-bolum-aciklama .asil-yazi h2 { font-size: 18px; }
}

/* --- 12. Kategori / mağaza sol filtre çubuğu ----------------------------
   Filtreler sol kenar çubuğunda (`sidebar-shop`): Kategoriler · Marka ·
   Fiyat. Tema ayarı `shop_layout: sidebar-left`; mobil ve tablette düğmeyle
   açılan çekmeceye düşüyor. */
.woocommerce .sidebar-container .widget,
.woocommerce .wd-sidebar .widget {
	margin-bottom: 16px;
	padding: 16px 18px;
	border: 1px solid var(--asil-cizgi);
	border-radius: 14px;
	background: #fff;
}

.woocommerce .sidebar-container .widget-title,
.woocommerce .sidebar-container .widgettitle,
.woocommerce .wd-sidebar .widget-title {
	margin: 0 0 12px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--asil-cizgi);
	color: var(--asil-murekkep);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Kategori listesi uzun (60+ terim); çubuk sayfadan uzun olmasın. */
.woocommerce .sidebar-container .widget_product_categories > ul,
.woocommerce .wd-sidebar .widget_product_categories > ul {
	max-height: 340px;
	overflow-y: auto;
	padding-right: 6px;
	scrollbar-width: thin;
}

.woocommerce .sidebar-container .widget ul { margin: 0; padding: 0; list-style: none; }
.woocommerce .sidebar-container .widget li { margin: 0; }

.woocommerce .sidebar-container .widget li a {
	display: inline-block;
	padding: 5px 0;
	color: var(--asil-murekkep);
	font-size: 13.5px;
	text-decoration: none;
	transition: color .15s ease;
}

.woocommerce .sidebar-container .widget li a:hover,
.woocommerce .sidebar-container .widget li.current-cat > a,
.woocommerce .sidebar-container .widget li.chosen > a { color: var(--asil-kirmizi); font-weight: 600; }

.woocommerce .sidebar-container .widget li .count {
	color: var(--asil-soluk);
	font-size: 12px;
}

/* Marka açılır kutusu ve fiyat kaydırıcısı */
.woocommerce .sidebar-container .select2-container .select2-selection--single,
.woocommerce .sidebar-container select {
	height: 40px;
	border: 1px solid var(--asil-cizgi);
	border-radius: 10px;
	font-size: 13.5px;
}

.woocommerce .sidebar-container .select2-container .select2-selection__rendered { line-height: 38px; }
.woocommerce .sidebar-container .select2-container .select2-selection__arrow { height: 38px; }

.woocommerce .sidebar-container .price_slider_wrapper .ui-slider { background: var(--asil-cizgi); }
.woocommerce .sidebar-container .ui-slider .ui-slider-range { background: var(--asil-kirmizi); }
.woocommerce .sidebar-container .ui-slider .ui-slider-handle { background: var(--asil-kirmizi); border-color: #fff; }

.woocommerce .sidebar-container .price_slider_amount .button {
	height: 36px;
	padding: 0 16px;
	border-radius: 9px;
	font-size: 12.5px;
}

@media (max-width: 1024px) {
	.woocommerce .sidebar-container .widget { padding: 14px 15px; border-radius: 12px; }
}

/* Sayfa 3000 px; filtreler kaydırırken ekranda kalsın.
   Yalnız masaüstü: mobil/tablette çubuk zaten çekmecede. */
@media (min-width: 1025px) {
	.woocommerce .sidebar-container.sidebar-left .widget-area {
		position: sticky;
		top: 90px;
	}
}

/* --- 13. Ortalanmış metinleri sola al -----------------------------------
   ⚠️ Builder `.wd-single-add-cart` ve sekme bölgesine `text-align: center`
   veriyor; S.S.S., kanal kartı ve altındaki her şey ortalanıyordu. */
.asil-sss,
.asil-sss-oge > summary,
.asil-sss-cevap,
.asil-kanal-kart,
.asil-kanal-bas,
.asil-kanal-guven,
.asil-kanal-guven > span,
.asil-bolumler,
.asil-bolum,
.asil-bolum-bas,
.asil-bolum-govde,
.asil-iade-govde,
.asil-bilgi-panel,
.asil-bilgi-kutu,
.asil-ek-urun,
.asil-yazi { text-align: left; }

/* Düğmelerin kendi ortalaması bozulmasın. */
.asil-kanal-wa,
.asil-kanal-ara,
.asil-kanal-wa span,
.asil-kanal-ara span { text-align: center; }

/* --- 14. "Neden Asil Saat" galerisi: mobilde ikili ve küçük -------------
   Dört görsel 280×360 alt alta geliyordu, bölüm 2677 px oluyordu. */
@media (max-width: 1024px) {
	.asil-bolum-neden .asil-yazi .wd-grid-g {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.asil-bolum-neden .asil-yazi .wd-gallery-item { width: auto; }

	.asil-bolum-neden .asil-yazi .wd-gallery-image {
		width: 100%;
		height: 130px;
		border-radius: 10px;
		object-fit: cover;
	}
}

/* --- 15. Kategori açıklaması: başlıklı, kaydırılabilir kart -------------
   Metin 500+ kelime; sayfanın altında upuzun duruyordu. İçerik DOM'da
   olduğu gibi kalıyor (arama motoru görüyor), yalnız görünür alan sınırlı. */
.asil-kat-aciklama { margin-top: 30px; }

.asil-kat-govde {
	max-height: 460px;
	overflow-y: auto;
	padding: 18px 22px;
	font-size: 15px;
	line-height: 1.75;
	scrollbar-width: thin;
	scrollbar-color: var(--asil-cizgi) transparent;
}

.asil-kat-govde::-webkit-scrollbar { width: 8px; }
.asil-kat-govde::-webkit-scrollbar-thumb { border-radius: 8px; background: var(--asil-cizgi); }

.asil-kat-govde > *:first-child { margin-top: 0; }
.asil-kat-govde > *:last-child { margin-bottom: 0; }
.asil-kat-govde p { margin: 0 0 14px; }

.asil-kat-govde h2,
.asil-kat-govde h3,
.asil-kat-govde h4 {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 26px 0 11px;
	color: var(--asil-murekkep);
	font-weight: 700;
	line-height: 1.35;
}

.asil-kat-govde h2 { font-size: 19px; }
.asil-kat-govde h3 { font-size: 17px; }
.asil-kat-govde h4 { font-size: 15.5px; }

.asil-kat-govde h2::before,
.asil-kat-govde h3::before {
	content: '';
	flex: none;
	width: 4px;
	height: 1.05em;
	border-radius: 3px;
	background: var(--asil-kirmizi);
}

.asil-kat-govde ul,
.asil-kat-govde ol { margin: 0 0 14px; padding-left: 20px; }
.asil-kat-govde li { margin-bottom: 6px; }
.asil-kat-govde li::marker { color: var(--asil-kirmizi); }
.asil-kat-govde a { color: var(--asil-kirmizi); }

.asil-kat-govde img {
	height: auto;
	max-width: 100%;
	border: 1px solid var(--asil-cizgi);
	border-radius: 12px;
}

@media (max-width: 1024px) {
	.asil-kat-govde { max-height: 380px; padding: 16px 17px; font-size: 14.5px; }
	.asil-kat-govde h2 { font-size: 17.5px; }
}

/* --- 16. Başlık şeritleri: kırmızı gradyan topbar + mürekkep menü --------
   Önce ikisi de düz gri (#4a4a4a) idi; üstteki şerit markanın kırmızısıyla,
   menü şeridi de site mürekkep tonuyla (--asil-murekkep ailesi) yeniden
   renklendirildi. Aradaki beyaz logo bandı olduğu gibi kaldı.

   ⚠️ `!important` GEREKMİYOR: Woodmart'ın ürettiği başlık CSS'i yalnız
   `background-color` veriyor, biz `background-image` ile gradyan koyuyoruz —
   gradyan zaten rengin üstünde duruyor. */
.whb-top-bar {
	background-image: linear-gradient(115deg, #8e0b20 0%, #c8102e 48%, #a30e26 78%, #7d0a1c 100%);
}

.whb-top-bar,
.whb-top-bar a { color: #fff; }
.whb-top-bar a:hover { color: rgba(255, 255, 255, .8); }

.whb-header-bottom {
	background-image: linear-gradient(180deg, #232c3a 0%, #161c25 100%);
	/* Üstteki kırmızı şeritle bağ kuran ince çizgi. */
	box-shadow: inset 0 2px 0 rgba(200, 16, 46, .9);
}

.whb-header-bottom .wd-nav-main > li > a { color: rgba(255, 255, 255, .92); }
.whb-header-bottom .wd-nav-main > li > a:hover,
.whb-header-bottom .wd-nav-main > li.current-menu-item > a { color: #fff; }

/* --- 17. Ana sayfa: hero (sol kategori paneli + slider) -----------------
   Solda sabit genişlikte kategori paneli, sağda kaydırmalı slayt.
   Yükseklikleri eşit; mobilde panel gizlenip yerini yuvarlak şerit alıyor. */
.asil-hero {
	display: grid;
	grid-template-columns: 290px minmax(0, 1fr);
	gap: 24px;
	/* Sabit yükseklik: liste uzadıkça hero büyüyordu (759 px olmuştu).
	   Kategoriler panelin içinde kayıyor. */
	height: 480px;
	margin-bottom: 34px;
}

.asil-hero-kat {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--asil-cizgi);
	border-radius: 16px;
	background: #fff;
}

.asil-hero-kat > header {
	padding: 16px 20px;
	background: linear-gradient(115deg, #8e0b20, #c8102e 60%, #a30e26);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.asil-hero-kat ul {
	flex: 1 1 auto;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	scrollbar-width: thin;
}

.asil-hero-kat li + li { border-top: 1px solid var(--asil-cizgi); }

.asil-hero-kat li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 20px;
	color: var(--asil-murekkep);
	font-size: 14px;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.asil-hero-kat li a:hover { background: var(--asil-kirmizi-acik); color: var(--asil-kirmizi); }
.asil-hero-kat li a .asil-ikon { width: 15px; height: 15px; opacity: .35; }
.asil-hero-kat li a:hover .asil-ikon { opacity: 1; }

.asil-hero-kat > footer { padding: 13px 20px; border-top: 1px solid var(--asil-cizgi); background: var(--asil-zemin); }
.asil-hero-kat > footer a { color: var(--asil-kirmizi); font-size: 13.5px; font-weight: 700; text-decoration: none; }

/* --- Slayt --- */
.asil-hero-slayt { position: relative; overflow: hidden; border-radius: 16px; }

.asil-hero-ray {
	display: flex;
	overflow-x: auto;
	height: 100%;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.asil-hero-ray::-webkit-scrollbar { display: none; }

.asil-slayt {
	position: relative;
	display: flex;
	flex: 0 0 100%;
	min-height: 100%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	scroll-snap-align: start;
}

.asil-slayt .asil-slayt-gorsel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fotoğrafın üstünde yazı okunsun diye koyu perde. */
.asil-slayt::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(12, 15, 20, .78) 0%, rgba(12, 15, 20, .5) 55%, rgba(12, 15, 20, .28) 100%);
}

.asil-slayt-yazi {
	position: relative;
	z-index: 2;
	max-width: 540px;
	padding: 40px;
	text-align: center;
}

.asil-slayt-yazi small {
	display: block;
	margin-bottom: 12px;
	color: rgba(255, 255, 255, .78);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.asil-slayt-yazi h2 {
	margin: 0 0 14px;
	color: #fff;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
}

.asil-slayt-yazi p { margin: 0 0 24px; color: rgba(255, 255, 255, .85); font-size: 15px; line-height: 1.65; }

.asil-slayt-dugme {
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 28px;
	border-radius: 10px;
	background: var(--asil-kirmizi);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background .18s ease;
}

.asil-slayt-dugme:hover { background: var(--asil-kirmizi-koyu); color: #fff; }

/* Oklar ve noktalar */
.asil-slayt-ok {
	position: absolute;
	z-index: 3;
	top: 50%;
	width: 42px;
	height: 42px;
	/* ⚠️ Tema düğmelere `min-height` veriyor; 34 px istenince kutu 34×42
	   olup oval görünüyordu. `min-height: 0` olmadan yükseklik tutmuyor. */
	min-width: 0;
	min-height: 0;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background .15s ease;
}

.asil-slayt-ok:hover { background: #fff; }
.asil-slayt-geri { left: 16px; }
.asil-slayt-ileri { right: 16px; }

.asil-slayt-ok::before {
	content: '';
	display: block;
	width: 11px;
	height: 11px;
	margin: 0 auto;
	border-top: 2px solid var(--asil-murekkep);
	border-right: 2px solid var(--asil-murekkep);
}

.asil-slayt-geri::before { transform: translateX(2px) rotate(-135deg); }
.asil-slayt-ileri::before { transform: translateX(-2px) rotate(45deg); }


/* --- 18. Yuvarlak kategori şeridi --------------------------------------- */
.asil-halka { margin-bottom: 38px; }

.asil-halka ul {
	display: flex;
	overflow-x: auto;
	gap: 26px;
	margin: 0;
	padding: 4px 0 10px;
	list-style: none;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.asil-halka ul::-webkit-scrollbar { display: none; }
.asil-halka li { flex: 0 0 auto; scroll-snap-align: start; }

.asil-halka a {
	display: block;
	width: 112px;
	color: var(--asil-murekkep);
	text-align: center;
	text-decoration: none;
}

.asil-halka-gorsel {
	display: grid;
	width: 104px;
	height: 104px;
	margin: 0 auto 10px;
	overflow: hidden;
	border: 1px solid var(--asil-cizgi);
	border-radius: 50%;
	background: var(--asil-zemin);
	place-items: center;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.asil-halka a:hover .asil-halka-gorsel {
	border-color: var(--asil-kirmizi);
	box-shadow: 0 6px 18px rgba(200, 16, 46, .16);
}

.asil-halka-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.asil-halka-gorsel b { color: var(--asil-kirmizi); font-size: 30px; font-weight: 700; }

.asil-halka strong { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.asil-halka small { display: block; margin-top: 3px; color: var(--asil-soluk); font-size: 12px; }

@media (max-width: 1024px) {
	/* Kategori paneli mobilde yer kaplıyor; aynı bağlantılar yuvarlak
	   şeritte zaten var. */
	.asil-hero { grid-template-columns: minmax(0, 1fr); height: auto; gap: 0; }
	.asil-hero-kat { display: none; }
	.asil-hero-slayt { height: 320px; }
	.asil-slayt { min-height: 320px; }
	.asil-slayt-yazi { max-width: 100%; padding: 26px 22px; }
	.asil-slayt-yazi h2 { font-size: 23px; }
	.asil-slayt-yazi p { font-size: 14px; margin-bottom: 18px; }
	.asil-slayt-ok { width: 34px; height: 34px; }
	.asil-slayt-geri { left: 8px; }
	.asil-slayt-ileri { right: 8px; }
	/* Yazı okların altında kalmasın: iki yandan ok genişliği kadar boşluk. */
	.asil-slayt-yazi { padding: 26px 52px; }
	.asil-halka a { width: 92px; }
	.asil-halka-gorsel { width: 84px; height: 84px; }
	.asil-halka ul { gap: 18px; }
}

/* --- 19. Vitrin: solda tanıtım paneli, sağda ürün karuseli -------------- */
.asil-vitrin {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 20px;
	margin-bottom: 40px;
}

.asil-vitrin-panel {
	position: relative;
	display: flex;
	overflow: hidden;
	align-items: flex-end;
	min-height: 300px;
	border: 1px solid var(--asil-cizgi);
	border-radius: 16px;
	background: linear-gradient(170deg, #fdf2f4 0%, #f7f3ee 100%);
}

/* Kategorinin kendi görseli soluk bir fon olarak. */
.asil-vitrin-fon {
	position: absolute;
	right: -18%;
	bottom: -8%;
	width: 86%;
	opacity: .22;
	pointer-events: none;
}

.asil-vitrin-ic { position: relative; z-index: 2; padding: 22px; }
.asil-vitrin-ic small { display: block; margin-bottom: 8px; color: var(--asil-soluk); font-size: 12.5px; font-weight: 600; }

.asil-vitrin-ic strong {
	display: block;
	margin-bottom: 10px;
	color: var(--asil-murekkep);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.asil-vitrin-ic p { margin: 0 0 18px; color: var(--asil-soluk); font-size: 13.5px; line-height: 1.6; }

.asil-vitrin-ic a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 42px;
	padding: 0 18px;
	border-radius: 10px;
	background: var(--asil-murekkep);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	transition: background .18s ease;
}

.asil-vitrin-ic a:hover { background: var(--asil-kirmizi); color: #fff; }
.asil-vitrin-ic a .asil-ikon { width: 16px; height: 16px; }

/* --- 20. Marka sekmeleri ------------------------------------------------
   ⚠️ JavaScript yok: gizli `radio` + `:checked ~` ile panel seçiliyor. */
.asil-sekmeler { margin-bottom: 40px; }

.asil-sekme-serit {
	display: flex;
	overflow-x: auto;
	gap: 8px;
	margin-bottom: 20px;
	padding-bottom: 4px;
	scrollbar-width: none;
}

.asil-sekme-serit::-webkit-scrollbar { display: none; }
.asil-sekme-serit input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.asil-sekme-serit label {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 18px;
	border: 1px solid var(--asil-cizgi);
	border-radius: 999px;
	background: #fff;
	color: var(--asil-murekkep);
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 700;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.asil-sekme-serit label b {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--asil-zemin);
	color: var(--asil-soluk);
	font-size: 11.5px;
	font-weight: 700;
}

.asil-sekme-serit label:hover { border-color: var(--asil-kirmizi); color: var(--asil-kirmizi); }

.asil-sekme-serit input:checked + label {
	border-color: var(--asil-kirmizi);
	background: var(--asil-kirmizi);
	color: #fff;
}

.asil-sekme-serit input:checked + label b { background: rgba(255, 255, 255, .22); color: #fff; }
.asil-sekme-serit input:focus-visible + label { outline: 2px solid var(--asil-kirmizi); outline-offset: 2px; }

/* Paneller: hepsi DOM'da, yalnız seçili olan görünür. */
.asil-sekme-panel { display: none; }
.asil-sekme-serit:has(input:nth-of-type(1):checked) ~ .asil-sekme-panel[data-sira="0"],
.asil-sekme-serit:has(input:nth-of-type(2):checked) ~ .asil-sekme-panel[data-sira="1"],
.asil-sekme-serit:has(input:nth-of-type(3):checked) ~ .asil-sekme-panel[data-sira="2"],
.asil-sekme-serit:has(input:nth-of-type(4):checked) ~ .asil-sekme-panel[data-sira="3"],
.asil-sekme-serit:has(input:nth-of-type(5):checked) ~ .asil-sekme-panel[data-sira="4"] { display: block; }

.asil-sekme-tumu {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 14px;
	color: var(--asil-kirmizi);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
}

.asil-sekme-tumu:hover { text-decoration: underline; }
.asil-sekme-tumu .asil-ikon { width: 16px; height: 16px; }

@media (max-width: 1024px) {
	.asil-vitrin { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.asil-vitrin-panel { min-height: 170px; }
	.asil-vitrin-ic { padding: 18px; }
	.asil-vitrin-ic strong { font-size: 20px; }
	.asil-sekme-serit label { height: 38px; padding: 0 14px; font-size: 13px; }
}

/* Ana sayfanın H1'i — yuvarlak şeridin başlığı. */
.asil-halka-bas { margin: 0 0 18px; }
.asil-halka-bas h1 { margin: 0 0 6px; color: var(--asil-murekkep); font-size: 24px; font-weight: 700; line-height: 1.25; }
.asil-halka-bas p { margin: 0; color: var(--asil-soluk); font-size: 14px; }

@media (max-width: 1024px) {
	.asil-halka-bas h1 { font-size: 20px; }
}

/* --- 21. Ana sayfa "Neden Biz?" + S.S.S. --------------------------------
   Yapı zaten iki sütundu; hunerhediyelik düzenine getiriyoruz: solda
   kaydırılabilir açıklama kartı, sağda açılır S.S.S.

   ⚠️ Satır kancası `:has(.wd-accordion)` — ana sayfada akordiyon yalnız bu
   satırda var, ayrı bir sınıf eklemeye gerek kalmıyor. */
.home .vc_row:has(.wd-accordion) > .wpb_column > .vc_column-inner {
	overflow: hidden;
	height: 100%;
	border: 1px solid var(--asil-cizgi);
	border-radius: 16px;
	background: #fff;
}

.home .vc_row:has(.wd-accordion) .wpb_wrapper { display: flex; height: 100%; flex-direction: column; }

/* İki kart birbirine yapışmasın.
   ⚠️ Satıra `gap` VERME: satır flex ve sütunlar 646+646 px; 24 px boşluk
   eklenince toplam kaba sığmıyor ve ikinci kart alt satıra düşüyor.
   Boşluğu kartların kendi kenar boşluğundan veriyoruz, dış hizalama bozulmuyor. */
.home .vc_row:has(.wd-accordion) > .wpb_column > .vc_column-inner { margin-right: 12px; }
.home .vc_row:has(.wd-accordion) > .wpb_column:last-child > .vc_column-inner { margin-right: 0; margin-left: 12px; }

/* Kart başlığı: gri şerit değil, beyaz zemin + yuvarlak ikon kutusu. */
.home .vc_row:has(.wd-accordion) .title-wrapper {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 18px 22px;
	border-bottom: 1px solid var(--asil-cizgi);
	background: #fff;
}

.home .vc_row:has(.wd-accordion) .title-wrapper::before {
	content: '';
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--asil-kirmizi-acik) var(--asil-rozet) center / 20px 20px no-repeat;
}

.home .vc_row:has(.wd-accordion) .wpb_column:has(.wd-accordion) .title-wrapper::before {
	background-image: var(--asil-kulaklik);
}

.home .vc_row:has(.wd-accordion) .title-wrapper .woodmart-title-container {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--asil-murekkep);
	font-size: 19px;
	text-align: left;
}

/* Sol: uzun metin kart içinde kaysın, sayfa uzamasın. */
.home .vc_row:has(.wd-accordion) .wd-text-block {
	flex: 1 1 auto;
	max-height: 430px;
	overflow-y: auto;
	margin: 0;
	/* Metin başlık çizgisine ve kart altına yapışmasın. */
	padding: 26px 24px 28px;
	color: var(--asil-soluk);
	font-size: 14.5px;
	line-height: 1.75;
	scrollbar-width: thin;
}

.home .vc_row:has(.wd-accordion) .wd-text-block strong { color: var(--asil-murekkep); }
.home .vc_row:has(.wd-accordion) .wd-button-wrapper { padding: 0 22px 20px; text-align: left; }

/* Sağ: S.S.S. */
.home .vc_row:has(.wd-accordion) .wd-accordion { margin: 0; padding: 6px 22px 20px; }
.home .vc_row:has(.wd-accordion) .wd-accordion-item { border-bottom: 1px solid var(--asil-cizgi); }
.home .vc_row:has(.wd-accordion) .wd-accordion-item:last-child { border-bottom: 0; }

.home .vc_row:has(.wd-accordion) .wd-accordion-title {
	padding: 15px 0;
	color: var(--asil-murekkep);
	font-size: 14.5px;
	font-weight: 600;
}

.home .vc_row:has(.wd-accordion) .wd-accordion-item.wd-active .wd-accordion-title { color: var(--asil-kirmizi); }
.home .vc_row:has(.wd-accordion) .wd-accordion-content { padding-bottom: 15px; color: var(--asil-soluk); font-size: 13.5px; line-height: 1.7; }

@media (max-width: 1024px) {
	.home .vc_row:has(.wd-accordion) .title-wrapper { padding: 15px 17px; }
	.home .vc_row:has(.wd-accordion) .title-wrapper .woodmart-title-container { font-size: 17px; }
	.home .vc_row:has(.wd-accordion) .wd-text-block { max-height: 320px; padding: 20px 17px 22px; font-size: 14px; }
	.home .vc_row:has(.wd-accordion) .wd-accordion { padding: 4px 17px 16px; }
	.home .vc_row:has(.wd-accordion) .wd-button-wrapper { padding: 0 17px 16px; }
}

/* --- 22. Ana sayfa blog ızgarası: eşit yükseklik -----------------------
   ⚠️ Kart tasarımına DOKUNULMUYOR (temanın `meta-image` tasarımı). Burada
   yalnız hizalama var: başlık uzun olunca kartlar kayıyordu. */
.home .wd-blog-holder .wd-post { display: flex; }
.home .wd-blog-holder .wd-post-inner { display: flex; width: 100%; flex-direction: column; }
.home .wd-blog-holder .wd-post-content { display: flex; flex: 1 1 auto; flex-direction: column; }

/* Başlık iki, özet üç satırda kesilsin; kartlar aynı boyda dursun. */
.home .wd-blog-holder .wd-post-title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.home .wd-blog-holder .wd-post-excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.home .wd-blog-holder .wd-post-btn,
.home .wd-blog-holder .read-more-section { margin-top: auto; }

/* --- 23. Yuvarlak şerit: menü genişliğinde, oklu karusel ---------------- */
.asil-halka { position: relative; }

.asil-halka-ok {
	position: absolute;
	z-index: 3;
	top: 42px;
	display: grid;
	width: 36px;
	height: 36px;
	min-width: 0;
	min-height: 0;
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid var(--asil-cizgi);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 3px 12px rgba(20, 20, 20, .1);
	cursor: pointer;
	place-items: center;
}

.asil-halka-ok:hover { border-color: var(--asil-kirmizi); }
.asil-halka-geri { left: -14px; }
.asil-halka-ileri { right: -14px; }

.asil-halka-ok::before {
	content: '';
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--asil-murekkep);
	border-right: 2px solid var(--asil-murekkep);
}

.asil-halka-geri::before { transform: translateX(2px) rotate(-135deg); }
.asil-halka-ileri::before { transform: translateX(-2px) rotate(45deg); }

@media (max-width: 1024px) {
	.home .vc_row:has(.wd-accordion) .title-wrapper::before { width: 36px; height: 36px; background-size: 17px 17px; }
	.asil-halka-ok { top: 24px; width: 32px; height: 32px; }
	.asil-halka-geri { left: -6px; }
	.asil-halka-ileri { right: -6px; }
}

/* --- 24. Ana sayfa blogu: mobilde yana kaydırmalı ----------------------
   Masaüstünde temanın `meta-image` ızgarası kalıyor. Mobilde dört/beş kart
   alt alta çok uzun sürüyordu; aynı kartlar yan yana dizilip parmakla
   kaydırılıyor. Kart tasarımına dokunulmuyor, yalnız kap yön değiştiriyor. */
@media (max-width: 768px) {
	.home .wd-blog-holder {
		display: flex;
		overflow-x: auto;
		gap: 14px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.home .wd-blog-holder::-webkit-scrollbar { display: none; }

	.home .wd-blog-holder .wd-post {
		flex: 0 0 82%;
		max-width: 82%;
		margin: 0;
		scroll-snap-align: start;
	}
}

/* --- 25. Mobil: alt bar ve alt bilgi ------------------------------------ */
@media (max-width: 768px) {
	/* Alt bar beyazdı; sayfa da beyaz olunca sınırı belli olmuyordu.
	   Menü şeridiyle aynı mürekkep tonu + üstte kırmızı çizgi. */
	.wd-toolbar {
		background: linear-gradient(180deg, #232c3a 0%, #161c25 100%);
		box-shadow: inset 0 2px 0 rgba(200, 16, 46, .9), 0 -4px 18px rgba(16, 20, 27, .18);
	}

	.wd-toolbar .wd-toolbar-item > a,
	.wd-toolbar .wd-toolbar-label,
	.wd-toolbar .wd-tools-icon { color: rgba(255, 255, 255, .88); }

	.wd-toolbar .wd-toolbar-item > a:hover,
	.wd-toolbar .wd-toolbar-item.wd-active > a { color: #fff; }

	/* Simge çizgileri de aynı tonda olsun. */
	.wd-toolbar .wd-tools-icon::before,
	.wd-toolbar [class*="wd-icon"]::before { color: inherit; }

	.wd-toolbar svg { fill: currentColor; stroke: currentColor; }

	/* Alt bilgideki "Size Özel" ve "Çok Arananlar" yan yana.
	   ⚠️ Satır `display: block`; sütuna genişlik vermek yetmiyor, blok
	   öğeler yine alt alta diziliyor. Satırı esnek yapmak şart. */
	.footer-container .vc_row:has(> .wpb_column.vc_col-sm-3) {
		display: flex;
		flex-wrap: wrap;
	}

	.footer-container .vc_row > .wpb_column.vc_col-sm-3 {
		flex: 0 0 50%;
		width: 50%;
		max-width: 50%;
	}

	/* "Kısaca Asil Saat" altta tam genişlik kalsın. */
	.footer-container .vc_row:has(> .wpb_column.vc_col-sm-3) > .wpb_column.vc_col-sm-6 {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}
}

/* Fiyatı girilmemiş üründe rakam yerine iletişim çağrısı. */
.asil-fiyat-sor {
	display: inline-block;
	color: var(--asil-soluk);
	font-size: .82em;
	font-weight: 600;
	font-style: italic;
}

.single-product .wd-single-price .asil-fiyat-sor { font-size: 17px; font-style: normal; }

/* --- 26. "Neden Asil Saat" galerisi: masaüstü düzeni --------------------
   Site genişleyince bölüm 1539 px'e çıktı ve düzen dağıldı. Ölçüm:
   ızgara hücresi 360 px ama görsel dosyası 280 px genişliğinde; tema
   hücre içinde ortaladığı için (--wd-justify-content:center) iki görselin
   ARASINDA 100 px boşluk kalıyordu. Metin de 740 px'lik, okunamayacak
   kadar uzun bir satır ölçüsüne yayılmıştı.

   Çözüm: görseller hücrelerini doldursun, ızgara 570 px'e sabitlensin
   (görsel 280 → 275 px). Aradaki boşluk böylece 100 → 20 px'e iniyor.
   Satır esnek kutuya çevrilip iki sütun dikeyde ortalanıyor; WPBakery
   satırı varsayılan olarak `display:block` geldiği için bu şart.

   ⚠️ Aralığı `--wd-gap-lg` ile daraltmayı denemeyin: tema bu değişkeni
   `.wd-grid-g` üzerine SATIR İÇİ stille basıyor, dış biçem dosyası
   yenemiyor. Zaten 20 px yeterli. */

/* ⚠️ Kural yalnız masaüstünde: 1024 px altında 14. bölümdeki mobil
   düzen geçerli, ona dokunulmuyor. */
@media (min-width: 1025px) {
	.asil-bolum-neden .asil-yazi .vc_row {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	/* Sol sütun tam galeri kadar: 570 px ızgara + 2 × 15 px WPBakery payı.
	   Yüzdede bıraksak 1600 px'te sütun 770 px oluyor, galeri 520 px'te
	   kaldığı için metinle arasında 250 px ölü boşluk kalıyordu. */
	.asil-bolum-neden .asil-yazi .vc_row > .wpb_column:first-child {
		flex: 0 0 600px;
		max-width: 600px;
	}

	/* Metin kalan genişliği alır; 45 px sütun aralığı bırakıyoruz. */
	.asil-bolum-neden .asil-yazi .vc_row > .wpb_column:last-child {
		flex: 1 1 0;
		max-width: none;
		padding-left: 45px;
	}

	/* Izgarayı sınırla ve bölümün sol kenarına yasla. */
	.asil-bolum-neden .wd-images-gallery {
		max-width: 570px;
		margin-right: auto;
	}

	/* Hücreyi görsel değil ızgara belirlesin. */
	.asil-bolum-neden .wd-gallery-item { width: auto; }

	.asil-bolum-neden .wd-gallery-image {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 10px;
	}

	/* Çok geniş ekranda satır ölçüsü büsbütün uzamasın. */
	.asil-bolum-neden .asil-yazi .wpb_text_column { max-width: 900px; }
}

/* --- 27. Otomatik iç bağlantılar ---------------------------------------
   Metin içinde doğal dursun: normal bağlantı rengi, ince alt çizgi. */
.asil-ic-link {
	color: var(--asil-kirmizi);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.asil-ic-link:hover { text-decoration-thickness: 2px; }