/*
Theme Name: Woodmart Child
Theme URI: https://woodmart.xtemos.com/
Author: XTemos
Author URI: http://themeforest.net/user/xtemos
Description: Woodmart child theme for pro.unluboya.com.tr — safe place for custom code that survives parent theme updates.
Template: woodmart
Version: 1.0.0
Requires PHP: 7.4
Text domain: woodmart
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: two-columns, right-sidebar, custom-menu, featured-images, translation-ready
*/

/* Add your custom CSS below. Parent theme styles load first (see functions.php). */

/* ==========================================================================
   Header "Kategoriler" mega-menu — elegant redesign
   Scope: the secondary header nav (aria-label "Header categories menu").
   Goal: a balanced, "designed" panel that fills its width — brand-colour dot
   headers, hairline dividers, soft hover pills, layered panel depth.
   ========================================================================== */

/* --- Panel: full-width tinted backdrop + inner floating card --------------- */
.wd-header-secondary-nav .menu-mega-dropdown > .wd-dropdown-menu {
	border: 0;
	box-shadow: 0 24px 50px -30px rgba(30, 24, 90, 0.25);
	border-radius: 0 0 18px 18px;
	overflow: hidden;
	background: linear-gradient(180deg, #f4f3fb 0%, #eeedf8 100%);
	padding: 30px 0 40px;
}

/* the actual content sits on a white rounded card, floating on the backdrop */
.wd-header-secondary-nav .menu-mega-dropdown > .wd-dropdown-menu .container.wd-entry-content {
	max-width: 1520px;
	margin: 0 auto;
	padding: 42px 50px 46px;
	background: #ffffff;
	border: 1px solid rgba(20, 20, 40, 0.05);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(20, 20, 30, 0.04), 0 22px 50px -26px rgba(30, 24, 90, 0.28);
}

/* Subtle eyebrow strip above the grid */
.wd-header-secondary-nav .menu-mega-dropdown > .wd-dropdown-menu .container.wd-entry-content::before {
	content: "Ürün Kategorileri";
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wd-primary-color, #4933d1);
	opacity: 0.85;
	margin-bottom: 26px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(20, 20, 40, 0.07);
}

/* --- Even, gap-filling grid of category groups ---------------------------- */
.wd-header-secondary-nav .menu-mega-dropdown .wd-sub-menu-wrapp {
	padding: 0;
}

.wd-header-secondary-nav .menu-mega-dropdown > .wd-dropdown-menu ul.wd-sub-menu {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: 40px;
	row-gap: 40px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wd-header-secondary-nav .menu-mega-dropdown > .wd-dropdown-menu ul.wd-sub-menu > li.item-level-1 {
	width: auto !important;
	max-width: none !important;
	padding: 0;
	margin: 0;
	float: none;
}

/* --- Column headers (level 1): brand dot + hairline underline -------------- */
.wd-header-secondary-nav .menu-mega-dropdown .wd-sub-menu > li.item-level-1 > a.woodmart-nav-link {
	position: relative;
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #171722;
	padding: 0 0 12px 18px;
	margin-bottom: 14px;
	line-height: 1.35;
	border-bottom: 1px solid rgba(20, 20, 40, 0.08);
}

/* brand-colour dot to the left of each title */
.wd-header-secondary-nav .menu-mega-dropdown .wd-sub-menu > li.item-level-1 > a.woodmart-nav-link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wd-primary-color, #4933d1);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wd-header-secondary-nav .menu-mega-dropdown .wd-sub-menu > li.item-level-1 > a.woodmart-nav-link:hover::before {
	transform: scale(1.25);
	box-shadow: 0 0 0 4px rgba(73, 51, 209, 0.12);
}

/* Groups with no sub-items (e.g. Yalıtım, İncelticiler) read as bare headers.
   Turn them into intentional direct-link tiles instead of "missing items". */
.wd-header-secondary-nav .menu-mega-dropdown .wd-sub-menu > li.item-level-1:not(:has(.item-level-2)) > a.woodmart-nav-link {
	border-bottom: 0;
	margin-left: -12px;
	padding: 8px 30px 8px 30px;
	border-radius: 9px;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.wd-header-secondary-nav .menu-mega-dropdown .wd-sub-menu > li.item-level-1:not(:has(.item-level-2)) > a.woodmart-nav-link::before {
	left: 12px;
}

.wd-header-secondary-nav .menu-mega-dropdown .wd-sub-menu > li.item-level-1:not(:has(.item-level-2)) > a.woodmart-nav-link::after {
	content: "›";
	margin-left: 8px;
	font-size: 15px;
	line-height: 1;
	color: var(--wd-primary-color, #4933d1);
	opacity: 0;
	transition: opacity 0.18s ease, transform 0.18s ease;
	display: inline-block;
}

.wd-header-secondary-nav .menu-mega-dropdown .wd-sub-menu > li.item-level-1:not(:has(.item-level-2)) > a.woodmart-nav-link:hover {
	background-color: rgba(73, 51, 209, 0.07);
	color: var(--wd-primary-color, #4933d1);
}

.wd-header-secondary-nav .menu-mega-dropdown .wd-sub-menu > li.item-level-1:not(:has(.item-level-2)) > a.woodmart-nav-link:hover::after {
	opacity: 1;
	transform: translateX(3px);
}

/* --- List items (level 2): soft hover pill -------------------------------- */
.wd-header-secondary-nav .menu-mega-dropdown .sub-sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wd-header-secondary-nav .menu-mega-dropdown .sub-sub-menu > li.item-level-2 {
	margin: 0;
}

.wd-header-secondary-nav .menu-mega-dropdown .sub-sub-menu > li.item-level-2 > a.woodmart-nav-link {
	display: block;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: #5f5f6b;
	padding: 6px 12px;
	margin: 1px 0 1px -12px;
	border-radius: 8px;
	transition: color 0.18s ease, background-color 0.18s ease, padding-left 0.18s ease;
}

.wd-header-secondary-nav .menu-mega-dropdown .sub-sub-menu > li.item-level-2 > a.woodmart-nav-link:hover {
	color: var(--wd-primary-color, #4933d1);
	background-color: rgba(73, 51, 209, 0.07);
	padding-left: 16px;
}

/* --- Keep it clean: only group headers (L1) + their items (L2) ------------- */
/* Deeper levels (L3/L4) rendered inline make the panel tall and cluttered;
   hide them for a crisp two-level layout. Subcategories remain reachable from
   each category page. Remove this rule to restore full depth. */
.wd-header-secondary-nav .menu-mega-dropdown li.item-level-2 .sub-sub-menu {
	display: none !important;
}

/* Drop the child-indicator carets on L2 (no fly-out anymore) */
.wd-header-secondary-nav .menu-mega-dropdown li.item-level-2 > .wd-nav-arrow,
.wd-header-secondary-nav .menu-mega-dropdown li.item-level-2 > a > .wd-nav-arrow {
	display: none !important;
}

/* ==========================================================================
   Homepage hero slider (#slider-1698) — split hero for product-on-white photos
   Our product images are square/portrait studio shots on a WHITE background
   with varied framing. The theme's object-fit:cover fill cropped them huge and
   the centred headline overlapped the product. Instead: text on the LEFT,
   product contained on the RIGHT — no vertical overlap, works for any framing.
   The card goes white (so the photos' white bg blends seamlessly) with a
   hairline border to match the "Fırsatlar" box beside it.
   ========================================================================== */

/* white card + hairline frame so white-bg product photos blend in cleanly */
#slider-1698 .wd-slide-bg {
	background-color: #ffffff !important;
}
#slider-1698 .wd-slide {
	border: 1px solid rgba(0, 0, 0, 0.11);
	border-radius: 20px;
	overflow: hidden;
}

/* text block → left half, left-aligned */
#slider-1698 .wd-slide-container {
	--wd-justify-content: flex-start !important;
	--wd-align-items: center !important;
	padding-left: 50px;
	padding-right: 0;
}
#slider-1698 .wd-slide-inner {
	max-width: 50%;
}
#slider-1698 .wd-slide .title,
#slider-1698 .wd-slide .title-after_title,
#slider-1698 .wd-slide .wd-slide-inner {
	text-align: left !important;
}
#slider-1698 .wd-slide .title {
	color: #16161c;
}
#slider-1698 .wd-slide .title-after_title {
	color: #6a6a72 !important;
	margin-top: 6px;
}
#slider-1698 .wd-slide .wd-button,
#slider-1698 .wd-slide .btn {
	margin-top: 10px;
}

/* product photo → right half, contained, vertically centred.
   In this theme .wd-fill img is NOT absolutely positioned, so we lay the
   background layer out as flex and align the photo to the right. */
#slider-1698 .wd-slide-bg.wd-fill {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	padding: 0 4% 0 0 !important;
}
#slider-1698 .wd-slide-bg.wd-fill img {
	position: static !important;
	object-fit: contain !important;
	object-position: center !important;
	width: 44% !important;
	height: 84% !important;
	max-width: 44% !important;
	margin: 0 !important;
	inset: auto !important;
}

/* ==========================================================================
   Product page — "Kartela" (colour swatches) hover preview
   The pa_kartela attribute is rendered by the THWVS plugin as image tiles:
     <ul.thwvs-wrapper-ul> > <li.thwvs-wrapper-item-li title="Renk Adı">
        <img.swatch-preview.swatch-image ...>
   On hover a floating CARD (built by kartela-tooltip.js) pops up DIRECTLY ABOVE
   the swatch — never covering it — showing an enlarged copy of the swatch image
   plus its colour name, inside a padded, shadowed box. The tile itself only gets
   a subtle hover cue (it does not grow over its neighbours).
   ========================================================================== */

/* swatch tile: crisp rounded chip + subtle hover feedback */
.thwvs_fields .thwvs-wrapper-item-li {
	cursor: pointer;
}

.thwvs_fields .thwvs-wrapper-item-li img.swatch-preview {
	display: block;
	border-radius: 8px;
	border: 1px solid rgba(20, 20, 40, 0.12);
	box-shadow: 0 1px 2px rgba(20, 20, 30, 0.08);
	transition: box-shadow 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.thwvs_fields .thwvs-wrapper-item-li:hover img.swatch-preview {
	transform: scale(1.08);
	border-color: var(--wd-primary-color, #4933d1);
	box-shadow: 0 4px 10px -3px rgba(20, 20, 30, 0.3);
}

.thwvs_fields .thwvs-wrapper-item-li.selected img.swatch-preview,
.thwvs_fields .thwvs-wrapper-item-li.thwvs-selected img.swatch-preview {
	border-color: var(--wd-primary-color, #4933d1);
	box-shadow: 0 0 0 2px var(--wd-primary-color, #4933d1);
}

/* --- Floating preview card (positioned by kartela-tooltip.js) -------------- */
.kartela-preview {
	position: fixed;
	top: 0;
	left: -9999px;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px 12px 10px;
	background: #ffffff;
	border: 1px solid rgba(20, 20, 40, 0.1);
	border-radius: 14px;
	box-shadow: 0 18px 40px -12px rgba(20, 20, 30, 0.45), 0 4px 12px -6px rgba(20, 20, 30, 0.3);
	opacity: 0;
	transform: translateY(6px) scale(0.96);
	transform-origin: bottom center;
	transition: opacity 0.15s ease, transform 0.15s ease;
	pointer-events: none;
}

.kartela-preview.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.kartela-preview__img {
	display: block;
	width: 132px;
	height: 132px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid rgba(20, 20, 40, 0.08);
}

.kartela-preview__name {
	max-width: 160px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	color: #16161c;
}

/* caret pointing DOWN at the swatch (card sits above) */
.kartela-preview::after {
	content: "";
	position: absolute;
	top: 100%;
	left: var(--caret-x, 50%);
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-top-color: #ffffff;
	filter: drop-shadow(0 3px 2px rgba(20, 20, 30, 0.12));
}

/* when there's no room above, the card flips below → caret points UP */
.kartela-preview.kartela-preview--below {
	transform-origin: top center;
}
.kartela-preview.kartela-preview--below::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: #ffffff;
	filter: drop-shadow(0 -3px 2px rgba(20, 20, 30, 0.12));
}


/* ==========================================================================
   Ürün kartı: kampanya rozetleri (Woo Discount Rules) + ÜnlüPuan etiketi — kompakt
   2026-10-13. Rozet rengi/metni WDR kuralından gelir; burada yalnız biçim.
   ========================================================================== */
.awdr_discount_bar {
	display: inline-flex !important;
	align-items: center;
	max-width: 100%;
	margin: 0 4px 6px 0 !important;
	padding: 6px 10px !important;
	border-radius: 4px !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	vertical-align: top;
}
.awdr_discount_bar_content {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wlr-product-message {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	margin: 0 0 6px;
	padding: 6px 10px !important;
	border: 1px solid rgba(201, 163, 91, .55) !important;
	border-radius: 4px !important;
	background: #1b1d22 !important;
	color: #f1dfb3 !important;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.4 !important;
	white-space: nowrap;
}
.wlr-product-message::before {
	content: "Ü";
	display: inline-grid;
	place-items: center;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: linear-gradient(145deg, #e9cf94, #b98a3e);
	color: #2a1e08;
	font-size: 11px;
	font-weight: 800;
}
/* Listede ÜnlüPuan etiketi bir kez: fiyat/sepet düğmesi yanındaki tekrar gizli. */
.wd-add-btn-wrapp .wlr-product-message,
.wd-add-btn .wlr-product-message {
	display: none !important;
}

/* ---------- Yasal metinler (KVKK vb.): okunur genişlik, düzenli tablo ---------- */
.ub-legal {
	max-width: 920px;
	margin: 10px auto 60px;
	color: #3a3a40;
	line-height: 1.75;
}
.ub-legal h1 {
	margin-bottom: 6px;
	font-size: 38px;
	letter-spacing: -0.02em;
}
.ub-legal .ub-legal-meta {
	margin-bottom: 28px;
	color: #8a8a92;
	font-size: 14px;
}
.ub-legal h2 {
	margin: 40px 0 14px;
	padding-top: 24px;
	border-top: 1px solid #ececef;
	font-size: 22px;
}
.ub-legal h3 {
	margin: 26px 0 10px;
	font-size: 18px;
}
.ub-legal ul {
	padding-left: 20px;
}
.ub-legal li {
	margin-bottom: 6px;
}
.ub-legal .ub-legal-table {
	margin: 18px 0 22px;
	overflow-x: auto;
}
.ub-legal .ub-legal-table table {
	min-width: 720px;
	border: 1px solid #e9e9ee;
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.55;
}
.ub-legal .ub-legal-table th {
	background: #f6f6f8;
	color: #1d1d1f;
	font-weight: 700;
	text-align: left;
}
.ub-legal .ub-legal-table :is(th, td) {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid #e9e9ee;
	vertical-align: top;
}
.ub-legal .ub-legal-table tr:last-child td {
	border-bottom: 0;
}
.ub-legal .ub-legal-table td:first-child {
	width: 18%;
	color: #1d1d1f;
}
@media (max-width: 600px) {
	.ub-legal h1 {
		font-size: 28px;
	}
}


/* ==========================================================================
   Başlık: hesap baş harfleri — giriş yapmış kullanıcıda kullanıcı ikonu yerine bordo daire + beyaz baş harf.
   2026-10-26. Harfler inc/account-ui.php (wp_head, gövde sınıfı ub-has-initials).
   ========================================================================== */
/* Başlık oluşturucunun öğe rengi (.whb-row .whb-<id>.wd-tools-element > a > .wd-tools-icon) bir sınıf farkla ezilir. */
.ub-has-initials .wd-header-my-account .wd-tools-icon,
.ub-has-initials .whb-row .wd-header-my-account.wd-tools-element > a > .wd-tools-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #960031;
	transition: background-color .2s ease;
}
/* Tasarım 7 (masaüstü) boyutu WoodMart'tan gelir (yan ikonlarla aynı); diğer tasarımların kutusu yoktur. */
.ub-has-initials .wd-header-my-account:not([class*=wd-design-7]) .wd-tools-icon {
	width: 38px;
	height: 38px;
}
.ub-has-initials .wd-header-my-account .wd-tools-icon::before {
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	color: #fff;
}
.ub-has-initials .wd-header-my-account:hover .wd-tools-icon,
.ub-has-initials .whb-row .wd-header-my-account.wd-tools-element:hover > a > .wd-tools-icon {
	background: #7a0028;
}

/* Footer logosu (Elementor footer şablonu #962, öğe 6e7eb70): 190px basılıyordu, küçültüldü (kullanıcı isteği 2026-10-30). */
.elementor-962 .elementor-element-6e7eb70 img {
	width: 120px;
	height: auto;
}

@media (max-width: 767px) {
	.elementor-962 .elementor-element-6e7eb70 img {
		width: 110px;
	}
}