/* ==========================================================================
   Sydney Paint Warehouse — düzen düzeltmeleri ve marka ince ayarları
   ========================================================================== */

/* 1. Tam genişlik bölümler ilk boyamada doğru olsun ------------------------
   Elementor "stretched" bölümleri JS ile genişletiyor; sayfa önce dar,
   sonra geniş çiziliyordu. CSS'e alınca sıçrama kayboluyor. */
.elementor-section.elementor-section-stretched {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc( 50% - 50vw ) !important;
	margin-right: calc( 50% - 50vw ) !important;
	left: auto !important;
}
html, body { overflow-x: hidden; }

/* 1b. Elementor Flexbox Container dolgusu ---------------------------------
   Woodmart'ın reset'i `div { padding: 0 }` diyor ve Elementor'un
   `.e-con { padding-block-start: var(--padding-top) }` kuralını eziyor.
   Klasik bölümler etkilenmiyor (dolguları yüksek özgüllükte yazılıyor),
   ama konteynerler — ürün karuselleri — dolgusuz kalıyordu. */
.elementor .e-con,
.elementor .e-con-inner {
	padding-block-start: var(--padding-top, 0px);
	padding-block-end: var(--padding-bottom, 0px);
	padding-inline-start: var(--padding-left, 0px);
	padding-inline-end: var(--padding-right, 0px);
}

/* 1c. Karusel kapları tam genişlikte ---------------------------------------
   Ürün karuselleri Flexbox Container; klasik bölümlerdeki `stretch_section`
   karşılığı yok. Kapsayıcı tema gövdesi içinde kaldığı için iç kapları diğer
   bantların 1200px'lik kolonuyla hizalanmıyordu (dar ekranda 43px'e karşı 28px).
   Kabı ekran genişliğine açıyoruz; iç kap zaten boxed ve ortalı. */
body.home .elementor > .e-con {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* 2. Footer --------------------------------------------------------------- */
.spw-footer svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px; display: block; }
.spw-footer a { transition: color .15s ease; }
.spw-footer a:hover,
.spw-footer ul li a:hover { color: #fff !important; }

/* 3. İç sayfa başlık alanı ------------------------------------------------- */
.page-title.title-size-default,
.page-title.title-design-default { padding-top: 42px; padding-bottom: 6px; background: transparent; }
.page-title .entry-title { letter-spacing: -.5px; }

/* 4. Ürün kartı ------------------------------------------------------------ */
.wd-product .wd-entities-title { font-size: 15px; line-height: 1.4; min-height: 2.8em; }
.wd-product .price { font-weight: 700; }

/* 5. Hero — üç arka planın çapraz geçişi -----------------------------------
   Elementor'un giriş animasyonları içeriği kalıcı görünmez bırakabiliyor,
   bu yüzden saf CSS: iki ek katman, opaklık döngüsü. İçerik daima görünür. */
/* Elementor `_css_classes` ayarı Woodmart'ta çıktıya yansımıyor; hero zaten
   tanım gereği ana sayfanın ilk bölümü, konuma göre hedefliyoruz. */
body.home .elementor-top-section:first-child { position: relative; overflow: hidden; }
body.home .elementor-top-section:first-child::before,
body.home .elementor-top-section:first-child::after {
	content: "";
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	z-index: 0;
	opacity: 0;
	animation: spwHeroFade 15s infinite;
	pointer-events: none;
}
/* İkinci ve üçüncü hero görseli sayfa açılışında İNMİYOR: opacity:0 olsa da
   background-image hemen indirilir ve ilk ekrandaki asıl görselle yarışır.
   `spw-hero-ready` sınıfı sayfa yüklendikten sonra ekleniyor (functions.php);
   ilk geçiş 5. saniyede olduğu için arada inmeye bol vakit var.
   WebP: 830/857 KB JPG → 255/266 KB. */
body.home .elementor-top-section:first-child::before { animation-delay: 5s; }
body.home .elementor-top-section:first-child::after  { animation-delay: 10s; }
html.spw-hero-ready body.home .elementor-top-section:first-child::before {
	background-image: url('/wp-content/uploads/2026/09/spw-argyle-stores.webp');
}
html.spw-hero-ready body.home .elementor-top-section:first-child::after {
	background-image: url('/wp-content/uploads/2026/09/spw-sydenham-station-1.webp');
}
/* Tablet/telefonda 1024px sürümler yeter (~135 KB, tam boy ~260 KB). */
@media (max-width: 1024px) {
	html.spw-hero-ready body.home .elementor-top-section:first-child::before {
		background-image: url('/wp-content/uploads/2026/09/spw-argyle-stores-1024x576.webp');
	}
	html.spw-hero-ready body.home .elementor-top-section:first-child::after {
		background-image: url('/wp-content/uploads/2026/09/spw-sydenham-station-1-1024x576.webp');
	}
}
body.home .elementor-top-section:first-child > .elementor-background-overlay { z-index: 1; }
body.home .elementor-top-section:first-child > .elementor-container { position: relative; z-index: 2; }

/* 15 sn'lik döngüde üç görsel, her biri ~5 sn. Önceki 24 sn'lik kurguda ilk
   9 saniye yalnızca temel görsel görünüyordu; ziyaretçi genellikle hero'dan
   önce ayrıldığı için site tek görselli sanılıyordu. */
@keyframes spwHeroFade {
	0%    { opacity: 0; }
	5.3%  { opacity: 1; }
	33.3% { opacity: 1; }
	38.7% { opacity: 0; }
	100%  { opacity: 0; }
}

/* 6. Ortalanmış kart ızgaraları --------------------------------------------- */
/* Renk ailesi ve kategori bölümleri aynı dili konuşuyor: ortalanmış başlık,
   ortalanmış giriş cümlesi, sayfaya göre ortalanmış dikey kartlar. */
.spw-lede-tight { margin-top: 10px; max-width: 46ch; }
.spw-lede {
	margin: 14px auto 0;
	max-width: 58ch;
	font-size: 16.5px;
	line-height: 1.7;
	color: #4A5164;
	text-align: center;
}
:root {
	/* Fırça darbesi (başlık çizgileri, hero vurgusu) ve fırça kenarlı bölüm geçişi (§39). */
	--spw-firca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cpath d='M7 8Q46 3 92 6T190 5T293 7Q300 14 294 21Q248 27 190 24T92 26T9 23Q1 15 7 8Z'/%3E%3Cpath d='M20 2Q90 0 150 2T284 3L283 5Q220 4 150 4T21 4Z' opacity='.55'/%3E%3Cpath d='M30 27Q100 29 170 27T280 26L279 28Q210 30 170 29T31 29Z' opacity='.5'/%3E%3C/svg%3E");
	--spw-kenar-ust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40L0 11.0L70 5.8L100 10.7L122 11.1L136 8.7L150 11.6L164 17.2L182 14.8L204 14.8L242 8.6L280 13.5L350 9.2L368 17.6L406 10.0L428 11.8L446 19.7L516 11.5L568 12.1L582 6.4L634 8.1L648 11.8L670 8.1L684 8.5L714 14.7L752 12.5L770 9.8L800 13.3L818 14.3L870 14.7L908 10.1L946 4.4L984 13.1L1036 8.6L1054 14.2L1106 6.9L1158 14.1L1176 12.6L1206 12.9L1244 13.0L1266 20.3L1296 17.7L1348 10.2L1370 20.3L1440 11.0L1440 40Z'/%3E%3C/svg%3E");
	--spw-kenar-alt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0L0 29.0L70 34.2L100 29.3L122 28.9L136 31.3L150 28.4L164 22.8L182 25.2L204 25.2L242 31.4L280 26.5L350 30.8L368 22.4L406 30.0L428 28.2L446 20.3L516 28.5L568 27.9L582 33.6L634 31.9L648 28.2L670 31.9L684 31.5L714 25.3L752 27.5L770 30.2L800 26.7L818 25.7L870 25.3L908 29.9L946 35.6L984 26.9L1036 31.4L1054 25.8L1106 33.1L1158 25.9L1176 27.4L1206 27.1L1244 27.0L1266 19.7L1296 22.3L1348 29.8L1370 19.7L1440 29.0L1440 0Z'/%3E%3C/svg%3E");
	--spw-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
@keyframes spwRise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* 6e. Contact — harita ------------------------------------------------------ */
.spw-map {
	position: relative;
	margin: 20px auto 0;
	max-width: 1120px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(16, 26, 60, .12);
	background: #E6E9F0;
	aspect-ratio: 16 / 5;
}
.spw-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.spw-map-bar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 14px 20px;
	max-width: 1120px;
	margin: 16px auto 0;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid #E6E9F0;
	border-radius: 14px;
	text-align: left;
}
.spw-map-addr {
	display: flex; align-items: flex-start; gap: 10px;
	color: #1C48D8;
	font-family: Archivo, sans-serif; font-weight: 600; font-size: 15px; line-height: 1.5;
}
.spw-map-addr > span { color: #16181C; }
.spw-map-addr small { display: block; margin-top: 3px; font-weight: 400; font-size: 13.5px; color: #6B7386; }
.spw-map-addr svg { flex: none; margin-top: 2px; }
.spw-map-btn {
	flex: none;
	display: inline-block; padding: 12px 22px; border-radius: 999px;
	background: #1C48D8; color: #fff; text-decoration: none;
	font-family: Archivo, sans-serif; font-weight: 700; font-size: 14.5px;
	transition: background .18s ease, transform .18s ease;
}
.spw-map-btn:hover { background: #163AAE; color: #fff; transform: translateY(-2px); }

/* 6f. Ürün ızgarası girişi -------------------------------------------------
   Saf CSS animasyonu: JS'e bağlı değil, bu yüzden Elementor'un giriş
   animasyonlarında yaşadığımız "içerik kalıcı olarak görünmez kalıyor"
   sorununu üretemez — `forwards` her koşulda görünür hâlde bitirir. */
.wd-products .product-grid-item,
.products .product-grid-item {
	opacity: 0;
	animation: spwRise .45s ease forwards;
}
.wd-products .product-grid-item:nth-child(n+1)  { animation-delay: .02s; }
.wd-products .product-grid-item:nth-child(n+3)  { animation-delay: .06s; }
.wd-products .product-grid-item:nth-child(n+5)  { animation-delay: .10s; }
.wd-products .product-grid-item:nth-child(n+7)  { animation-delay: .14s; }
.wd-products .product-grid-item:nth-child(n+9)  { animation-delay: .18s; }
.wd-products .product-grid-item:nth-child(n+11) { animation-delay: .22s; }

/* 6h. Açılış perdesi -------------------------------------------------------
   Markup'ı JS basıyor; script çalışmazsa perde hiç var olmaz ve sayfa normal
   görünür. `spw-loading` yalnızca perde ekrandayken kök elemanda duruyor. */
.spw-preloader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	background: #0F1219;
	opacity: 1;
	transition: opacity .45s ease;
}
.spw-preloader img {
	width: 230px;
	max-width: 62vw;
	height: auto;
	animation: spwPulse 1.5s ease-in-out infinite;
}
.spw-preloader-bar {
	display: block;
	width: 148px;
	max-width: 44vw;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .14);
	overflow: hidden;
}
.spw-preloader-bar i {
	display: block;
	width: 40%;
	height: 100%;
	border-radius: 2px;
	background: #1C48D8;
	animation: spwBar 1.1s ease-in-out infinite;
}
.spw-preloader-out { opacity: 0; pointer-events: none; }
html.spw-loading { overflow: hidden; }

@keyframes spwPulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .55; }
}
@keyframes spwBar {
	0%   { transform: translateX(-110%); }
	100% { transform: translateX(260%); }
}

/* 6i. Kaydırdıkça belirme ---------------------------------------------------
   `.spw-reveal` sınıfını JS ekliyor; CSS tek başına hiçbir şeyi gizlemiyor. */
.spw-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}
.spw-reveal.spw-in {
	opacity: 1;
	transform: none;
}

/* Hero, perde kalkar kalkmaz kendi girişini yapsın — "pat" diye belirmesin.
   04.10: tek blok yerine öğe öğe (alt başlık + başlık, metin, düğmeler, ölçü şeridi). */
body.home .elementor-top-section:first-child > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element {
	animation: spwHeroIn .85s cubic-bezier(.22, .61, .36, 1) both;
	animation-delay: .1s;
}
body.home .elementor-top-section:first-child > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(2) { animation-delay: .25s; }
body.home .elementor-top-section:first-child > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(3),
body.home .elementor-top-section:first-child > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(4) { animation-delay: .4s; }
body.home .elementor-top-section:first-child > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(n+5) { animation-delay: .55s; }
@keyframes spwHeroIn {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}

/* 6j. "Call for price" — sepet ikonu görünmesin -----------------------------
   Enquire bağlantısı Woodmart'ın `.wd-add-btn-replace` sarmalayıcısı içine
   düşüyor. Sepet ikonu bir alt eleman DEĞİL: bağlantının kendi `::before`'u
   (woodmart-font, mutlak konumlu, 36px aşağı park edilmiş) hover'da yukarı
   kayıp yazının üstüne biniyor. Bu ürünler sepete eklenemediği için ikon
   yanıltıcı — pseudo'lar tamamen kapatılıyor. */
.spw-cfp-button::before,
.spw-cfp-button::after {
	content: none !important;
	display: none !important;
}
.wd-add-btn:has(.spw-cfp-button) > a {
	overflow: visible;
	--wd-btn-icon: none;
}
/* Woodmart ileride ikonu alt eleman olarak basarsa o da gizli kalsın. */
.wd-add-btn:has(.spw-cfp-button) .wd-action-icon,
.spw-cfp-button .wd-action-icon { display: none !important; }
.wd-add-btn:has(.spw-cfp-button) > a:hover .wd-action-text,
.spw-cfp-button:hover .wd-action-text { transform: none !important; }

/* 6k. Header menüsü — daha iri ve kalın ---------------------------------
   Punto büyüyünce altı öğe header'ın sol kolonuna sığmayıp ikinci satıra
   taşıyordu. İki önlem:
   1) Punto ve öğe arası `clamp()` ile ekrana göre esniyor.
   2) 1366px altında sol/sağ kolonların eşit genişlik zorlaması kalkıyor;
      logo tam ortada değil ama menü tek satırda kalıyor — iki satıra
      taşan bir menüden çok daha iyi. */
.whb-header .wd-nav-main > li > a .nav-link-text {
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: clamp(14px, 1.16vw, 16px);
	letter-spacing: .005em;
}
.whb-header .wd-nav-main.wd-gap-m { column-gap: clamp(9px, 1vw, 16px); }

/* 1280px ve üstünde menü ortalanmış logoyla tek satıra sığıyor; yalnızca daha
   dar masaüstlerinde eşit kolon zorlaması kaldırılıyor. Logo o bantta biraz
   sağa kayıyor — iki satıra taşan bir menüden iyi. */
@media (min-width: 1025px) and (max-width: 1279px) {
	/* Woodmart bu kolonlara `flex: 1 1 0%` veriyor; özgüllüğü aşmak için
	   header sınıfı da seçiciye ekleniyor. */
	.whb-header .whb-general-header-inner > .whb-column.whb-col-left,
	.whb-header .whb-general-header-inner > .whb-column.whb-col-right { flex: 0 0 auto; }
	/* Artan boşluk logo kolonuna veriliyor: menü kendi genişliğini alıyor,
	   logo kalan alanın ortasında duruyor. Sol kolona `flex-grow` verilseydi
	   bütün boşluğu yutar, logoyu 250px+ sağa iterdi. */
	.whb-header .whb-general-header-inner > .whb-column.whb-col-center {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* 6l. Header iletişim şeridi ------------------------------------------------
   `header-bottom` satırı demo'dan boş ve gizli geliyordu; telefon, e-posta,
   adres ve sosyal hesaplar için kullanıldı. Satır zemini Woodmart tarafından
   veriliyor (#1C48D8), buradaki kurallar yalnızca içerik. */
/* Satırın yüksekliği ve zemini Woodmart'ın derlenmiş header CSS'inden geliyor;
   o dosya cache temizliğinde yeniden üretilene kadar satır 0 yükseklikte kalıyor.
   Kritik iki değeri burada sabitliyoruz ki görünüm cache'e bağlı olmasın. */
.whb-row.whb-header-bottom { background-color: #1C48D8; }
.whb-row.whb-header-bottom .whb-flex-row { min-height: 44px; }
.whb-row.whb-header-bottom .whb-column { min-height: 44px; }
/* Blok tek kolonda; satırın tamamını kaplasın ki içerik diğer bantlarla
   aynı 1200px'lik kolonda ortalanabilsin. */
.whb-row.whb-header-bottom .whb-flex-row > .whb-col-left { flex: 1 1 100%; }
.whb-row.whb-header-bottom .whb-flex-row > .whb-col-center,
.whb-row.whb-header-bottom .whb-flex-row > .whb-col-right { display: none; }
.whb-row.whb-header-bottom .wd-header-html { width: 100%; }

.spw-topbar { width: 100%; }
.spw-tb-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	max-width: 1200px;
	margin: 0 auto;
	padding-inline: 28px;
}
.spw-tb-left,
.spw-tb-right { display: flex; align-items: center; gap: 22px; min-width: 0; }

.spw-tb-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, .92);
	text-decoration: none;
	font-family: Archivo, sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1;
	white-space: nowrap;
	transition: color .16s ease;
}
.spw-tb-item svg { flex: none; opacity: .8; }
a.spw-tb-item:hover { color: #fff; }
a.spw-tb-item:hover svg { opacity: 1; }
.spw-tb-addr { color: rgba(255, 255, 255, .78); font-weight: 500; }

.spw-tb-socs {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-left: 20px;
	border-left: 1px solid rgba(255, 255, 255, .22);
}
.spw-tb-soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #fff;
	background: rgba(255, 255, 255, .13);
	transition: background .16s ease, transform .16s ease;
}
.spw-tb-soc:hover { background: rgba(255, 255, 255, .26); transform: translateY(-1px); color: #fff; }

/* Dar masaüstünde önce adres, sonra ikinci telefon düşsün. */
@media (max-width: 1279px) {
	.spw-tb-addr { display: none; }
	.spw-tb-left, .spw-tb-right { gap: 16px; }
}
@media (max-width: 1080px) {
	.spw-tb-mail { display: none; }
}

/* Şerit eklendiği için içerik sarmalayıcısının üst boşluğu gereksiz kaldı;
   ana sayfada hero doğrudan şeridin altına otursun. */
body.home .wd-page-content { padding-top: 0; }
body.home main.wd-content-layout { padding-top: 0; }

/* Services (#878) ve About (#758) da ana sayfa gibi tam genişlikli bir hero ile
   başlıyor; Woodmart'ın içerik alanına verdiği 40px üst dolgu, mavi şeritle hero
   arasında krem bir şerit bırakıyordu. Başlık çubuğu olan sayfalarda (Contact,
   Shop, kategoriler) dolgu duruyor. */
body.page-id-878 main.wd-content-layout,
body.page-id-758 main.wd-content-layout { padding-top: 0; }

/* Şeridin altına nefes payı. Yalnızca şerit görünürken (>=1025px) uygulanıyor;
   altında şerit zaten gizli olduğu için fazladan boşluk gerekmiyor.
   `.wd-page-title` tam olarak Contact, Shop ve kategori sayfalarında çıkıyor —
   ana sayfa, Services ve About'ta başlık çubuğu kapalı, onların tam genişlikli
   hero'ları şeride yaslı kalmaya devam ediyor. */
@media (min-width: 1025px) {
	/* Woodmart `.wd-page-title { padding-block: var(--wd-title-sp) }` veriyor ve
	   `page-title.css` spw.css'ten sonra yükleniyor; eşit özgüllükte kural
	   kaybediyor. Bir seviye ekleyip (0,2,0) yapıyoruz. */
	.wd-page-content .wd-page-title { padding-top: 76px; }
	body.single-product .wd-page-content main.wd-content-layout { padding-top: 72px; }
}

/* 6m. "One tin" koyu paneli ------------------------------------------------
   Dulux'un Wash&Wear panelindeki düzen: tek koyu kart, solda metin, sağda
   yuvarlak kutuda görsel. Zemin bölüme değil iç kaba veriliyor — o kap zaten
   1200px ve ortalı, panel böylece diğer bantlarla aynı kolonda duruyor. */
body.home .elementor-element-607e4af > .elementor-container {
	background: linear-gradient(140deg, #141B2E 0%, #0D1220 100%);
	border-radius: 26px;
	padding: 54px 48px;
	overflow: hidden;
}
body.home .elementor-element-607e4af .elementor-widget-wd_image_or_svg img {
	border-radius: 16px;
	display: block;
	width: 100%;
	height: 100%;
	max-height: 380px;
	object-fit: cover;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
}
/* Rozetler: koyu zeminde yarı saydam, hover'da belirginleşiyor. */
body.home .elementor-element-607e4af a[style*="border"] {
	transition: background .18s ease, border-color .18s ease;
}
body.home .elementor-element-607e4af a[style*="border"]:hover {
	background: rgba(255, 255, 255, .2) !important;
	border-color: rgba(255, 255, 255, .5) !important;
}

@media (max-width: 1024px) {
	body.home .elementor-element-607e4af > .elementor-container { padding: 38px 26px; border-radius: 20px; }
	body.home .elementor-element-607e4af .elementor-widget-wd_image_or_svg img { max-height: 260px; }
}

/* 6n. Ürün sayfası boyut seçimi --------------------------------------------
   Woodmart'ın metin swatch'ları zeminsiz, kenarlıksız ve dolgusuz geliyordu:
   "Size 200 ml 1 Litre 3 Litres" düz bir metin satırı gibi görünüyor, seçim
   yapılabileceği anlaşılmıyordu. Seçilebilir düğmeye çeviriliyor. */
.wd-swatches-product .wd-swatch.wd-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 74px;
	min-height: 42px;
	padding: 0 18px;
	border: 1.5px solid #D7DCE8;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.wd-swatches-product .wd-swatch.wd-text .wd-swatch-text {
	font-family: Archivo, sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1;
	color: #16181C;
	white-space: nowrap;
}
.wd-swatches-product .wd-swatch.wd-text:hover {
	border-color: #1C48D8;
	box-shadow: 0 2px 10px rgba(28, 72, 216, .14);
}
/* Seçili durum: dolu marka mavisi — hangi boyutun seçili olduğu uzaktan belli. */
.wd-swatches-product .wd-swatch.wd-text.wd-active {
	background: #1C48D8;
	border-color: #1C48D8;
	box-shadow: 0 4px 14px rgba(28, 72, 216, .28);
}
.wd-swatches-product .wd-swatch.wd-text.wd-active .wd-swatch-text { color: #fff; }
/* Stokta olmayan boyut tıklanabilir görünmesin. */
.wd-swatches-product .wd-swatch.wd-text.wd-disabled {
	opacity: .4;
	cursor: not-allowed;
	text-decoration: line-through;
}
.wd-swatches-product .wd-swatch.wd-text:focus-visible {
	outline: 2px solid #1C48D8;
	outline-offset: 2px;
}
.wd-swatches-product { display: flex; flex-wrap: wrap; gap: 10px; }

/* Woodmart `[class*="wd-swatches"].wd-text-style-1 .wd-swatch.wd-text` ile
   min-height:20px veriyor — (0,4,0) özgüllük ve spw.css'ten SONRA yükleniyor.
   Yüksekliği geçirmek için bir sınıf daha ekleyip (0,5,0)'a çıkıyoruz. */
.variations .wd-swatches-product.wd-text-style-1 .wd-swatch.wd-text {
	min-height: 42px;
	height: auto;
}

/* Etiket ("Size") ve sıfırlama bağlantısı */
.variations .label label {
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6B7386;
}
.reset_variations {
	font-size: 13px;
	color: #6B7386;
	text-decoration: underline;
}
.reset_variations:hover { color: #1C48D8; }

/* 7b. Kapanış bandı — fırça silueti -------------------------------------- */
body.home .elementor-top-section:last-child {
	position: relative;
	overflow: hidden;
	/* Yatay yarıçap %50, dikey 56px: genişliğe yayılan sığ bir kubbe.
	   Tam yuvarlak değil, köşeleri kırılmış düz bir dikdörtgen de değil. */
	border-radius: 50% 50% 0 0 / 56px 56px 0 0;
}

/* Woodmart içerik sarmalayıcısı 40px alt dolgu veriyor; son bant tam genişlikte
   olduğu için footer'ın üstünde beyaz bir şerit bırakıyordu. */
body.home main.wd-content-layout { padding-bottom: 0; }
body.home .elementor-top-section:last-child::after {
	content: "";
	position: absolute;
	right: -60px;
	bottom: -70px;
	width: 520px;
	height: 520px;
	pointer-events: none;
	opacity: .13;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transform: rotate(-18deg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='%23ffffff'%3E%3Cpath d='M92 8h16a6 6 0 0 1 6 6v74H86V14a6 6 0 0 1 6-6z'/%3E%3Crect x='80' y='90' width='40' height='16' rx='3'/%3E%3Cpath d='M78 110h44a4 4 0 0 1 4 4v30a26 26 0 0 1-26 26h-0a26 26 0 0 1-26-26v-30a4 4 0 0 1 4-4z'/%3E%3Cpath d='M46 176c14-6 26-6 34-2 9 4 19 4 28-1 10-5 22-6 36-1l-4 10c-11-4-20-3-28 1-11 6-24 6-35 1-6-3-16-3-27 2z'/%3E%3C/svg%3E");
}
body.home .elementor-top-section:last-child > .elementor-container { position: relative; z-index: 2; }

/* 8. "Call for price" ürünleri --------------------------------------------- */
.spw-cfp a { color: #1C48D8; text-decoration: none; font-weight: 700; }
.spw-cfp a:hover { text-decoration: underline; }
.spw-cfp-note {
	margin: 12px 0 18px; padding: 12px 14px;
	background: #F3F5FA; border: 1px solid #E6E9F0; border-radius: 10px;
	font-size: 14.5px; line-height: 1.6; color: #4A5164;
}
.spw-cfp-note a { color: #1C48D8; text-decoration: none; font-weight: 600; }

/* 9. Hareketi azalt tercihi ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body.home .elementor-top-section:first-child::before,
	body.home .elementor-top-section:first-child::after { animation: none; opacity: 0; }
	.wd-info-box,
	.wd-products .product-grid-item, .products .product-grid-item { animation: none; opacity: 1; }
	.spw-reveal { opacity: 1; transform: none; transition: none; }
	.spw-preloader img { animation: none; }
	.spw-preloader-bar i { animation: none; width: 100%; }
	body.home .elementor-top-section:first-child > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element { animation: none; }
	.spw-map-btn:hover { transform: none; }
	.spw-tb-soc:hover { transform: none; }
	.wd-info-box:hover { transform: none; }
	.wd-info-box:hover .info-box-icon img { transform: none; }
	.wd-info-box::after { transform: none; }
}

/* 10. Küçük ekran ---------------------------------------------------------- */
@media (max-width: 768px) {
	.elementor-section.elementor-section-stretched > .elementor-container { padding-inline: 4vw; }
	body.home .elementor-top-section:last-child::after { width: 300px; height: 300px; opacity: .1; }
	body.home .elementor-top-section:last-child { border-radius: 50% 50% 0 0 / 34px 34px 0 0; }
	.spw-map { aspect-ratio: 3 / 2; }
	.spw-map-bar { flex-direction: column; align-items: flex-start; }
	.spw-map-btn { width: 100%; text-align: center; }
}

/* 11. Hareket ve mikro etkileşimler ------------------------------------------
   Hepsi `no-preference` içinde: hareketi azalt açık olan ziyaretçi hiçbirini görmez.
   Gizleme yalnızca `.spw-reveal:not(.spw-in)` altında yapılıyor; JS çalışmazsa bu
   sınıf hiç eklenmediği için içerik her koşulda görünür kalır. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }

	/* Kart girişleri bölüm ekrana girince başlasın, sırayla. Önceden sayfa açılır
	   açılmaz oynuyordu ve ziyaretçi aşağı indiğinde çoktan bitmiş oluyordu. */
	.spw-reveal:not(.spw-in) .wd-info-box,
	.spw-reveal:not(.spw-in) .product-grid-item { animation-play-state: paused; }

	/* Bölüm başlığının altındaki çizgi, bölüm göründüğünde soldan sağa açılıyor. */
	/* 04.10: çizgi fırça darbesi; ölçeklemek dokuyu ezdiği için kırpma ile "boyanıyor". */
	.title-wrapper .liner-continer:is(:has(> h2), :has(> h3), :has(> h4))::after {
		clip-path: inset(0 0 0 0);
		transition: clip-path .8s cubic-bezier(.65, .05, .36, 1) .25s;
	}
	.spw-reveal:not(.spw-in) .title-wrapper .liner-continer:is(:has(> h2), :has(> h3), :has(> h4))::after { clip-path: inset(0 100% 0 0); }

	/* Ürün kartı: kaldırmayı Woodmart zaten yapıyor (ızgarada -10px, karuselde
	   kapalı). Biz yalnızca gölge, görselde hafif yakınlaşma ve başlık rengi
	   ekliyoruz. Kartın `transition: all .3s` ayarı Woodmart'tan geliyor. */
	.wd-product:hover .wd-product-wrapper { box-shadow: 0 12px 26px rgba(16, 26, 60, .09); }
	.wd-product .wd-product-thumb img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
	.wd-product:hover .wd-product-thumb img { transform: scale(1.04); }
	.wd-product .wd-entities-title a { transition: color .18s ease; }
	.wd-product:hover .wd-entities-title a { color: #1C48D8; }

	/* Ana düğmeler: kalkış + marka mavisi gölge. */
	.btn.btn-color-primary,
	.btn.btn-style-bordered,
	.single_add_to_cart_button,
	.checkout-button,
	.spw-cfp-button {
		transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
	}
	.btn.btn-color-primary:hover,
	.single_add_to_cart_button:hover,
	.checkout-button:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 22px rgba(28, 72, 216, .28);
	}
	.btn.btn-style-bordered:hover { transform: translateY(-2px); }

	/* Sayfa okuma çubuğu: yalnızca kaydırmaya bağlı animasyonu destekleyen
	   tarayıcılarda (Chrome/Edge); diğerlerinde hiç görünmüyor. */
	@supports (animation-timeline: scroll()) {
		body::after {
			content: "";
			position: fixed; inset: 0 0 auto 0;
			height: 3px; z-index: 100000;
			background: linear-gradient(90deg, #1C48D8, #5C82FF);
			transform-origin: 0 50%;
			transform: scaleX(0);
			pointer-events: none;
			animation: spwProgress linear both;
			animation-timeline: scroll(root block);
		}
		@keyframes spwProgress { to { transform: scaleX(1); } }
	}
}

/* Başlık altı çizgisi — h2/h3/h4 bölüm başlıklarında (bazı bölüm başlıkları h4
   olarak kurulmuş, çizgisiz kalıyordu). About'taki istatistik kutuları da Woodmart
   başlığı ama <div>; onlara çizgi gelmiyor. */
.title-wrapper .liner-continer:is(:has(> h2), :has(> h3), :has(> h4))::after {
	content: "";
	display: block;
	width: 78px; height: 10px;
	margin: 14px auto 0;
	background: #1C48D8;
	-webkit-mask: var(--spw-firca) center / 100% 100% no-repeat;
	mask: var(--spw-firca) center / 100% 100% no-repeat;
}
.title-wrapper.text-left .liner-continer::after { margin-left: 0; }
body.home .elementor-element-607e4af .title-wrapper .liner-continer:is(:has(> h2), :has(> h3), :has(> h4))::after { background: #7FA0FF; }

/* Yapışkan header kaydırınca hafif gölge alsın; içerikten ayrışsın. */
.whb-sticked .whb-main-header { box-shadow: 0 6px 20px rgba(16, 26, 60, .08); }

/* Klavye ile gezinen ziyaretçi için belirgin odak halkası. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid #1C48D8;
	outline-offset: 3px;
}

/* 12. Kart içi hızlı alışveriş (Woodmart quick shop) ----------------------------
   Boyut seçilince fiyat + "Add to cart" de panele ekleniyor; panel yalnızca görsel
   alanı kadar (≈224px) ve içerik ≈245px tutuyordu → düğme alttan kesiliyordu.
   Ürün sayfası için büyüttüğümüz boyut düğmeleri (§6n) burada küçültülüyor, "Size"
   etiketi ve "Clear" bağlantısı gizleniyor (panelde zaten Close var). */
.quick-shop-wrapper .quick-shop-form { padding-top: 34px; }
.quick-shop-wrapper .variations th.label,
.quick-shop-wrapper .variations .wd-reset-var { display: none !important; }
.quick-shop-wrapper .variations td,
.quick-shop-wrapper .variations tr { display: block; padding: 0; }
.quick-shop-wrapper .variations { margin-bottom: 6px; }
.quick-shop-wrapper .woocommerce-variation-description:empty,
.quick-shop-wrapper .woocommerce-variation-availability:empty { display: none; }
.quick-shop-wrapper .wd-swatches-product.wd-text-style-1 {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
}
.quick-shop-wrapper .variations .wd-swatches-product.wd-text-style-1 .wd-swatch.wd-text {
	min-height: 30px;
	min-width: 0;
	margin: 0;
	padding: 0 7px;
	font-size: 12.5px;
	border-radius: 8px;
}
.quick-shop-wrapper .woocommerce-variation-price .price { font-size: 16px; margin: 0 0 4px; line-height: 1.2; }
.quick-shop-wrapper .single_variation_wrap { margin-top: 0; }
.quick-shop-wrapper .single_add_to_cart_button { min-height: 36px; }

/* 13. İletişim formu -------------------------------------------------------
   Kart ve alanlar burada; CF7 her alanı <p> ile sarıyor, o yüzden form ızgara,
   <p>'ler hücre. Ad/e-posta ve telefon/konu yan yana, mesaj ve düğme tam genişlik. */
.spw-form-card {
	background: #fff;
	border: 1px solid #E6E9F0;
	border-radius: 14px;
	padding: 26px 24px;
}
.spw-form-card .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 14px;
}
.spw-form-card .wpcf7-form > p { margin: 0; }
.spw-form-card .wpcf7-form > p:has(textarea),
.spw-form-card .wpcf7-form > p:has(.wpcf7-submit),
.spw-form-card .wpcf7-form > .wpcf7-response-output,
.spw-form-card .wpcf7-form > .screen-reader-response { grid-column: 1 / -1; }
.spw-form-card .wpcf7-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #4A5164;
	line-height: 1.5;
}
.spw-form-card .wpcf7-form input[type="text"],
.spw-form-card .wpcf7-form input[type="email"],
.spw-form-card .wpcf7-form input[type="tel"],
.spw-form-card .wpcf7-form select,
.spw-form-card .wpcf7-form textarea {
	width: 100%;
	margin-top: 5px;
	border: 1px solid #DDE2EC;
	border-radius: 10px;
	background: #FBFCFE;
	font-size: 14.5px;
}
/* Woodmart seçim kutusuna ok koymuyor; kutu düz metin gibi duruyordu. */
.spw-form-card .wpcf7-form select {
	appearance: none;
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5164' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
}
.spw-form-card .wpcf7-form textarea { height: 110px; min-height: 110px; padding-top: 10px; }
.spw-form-card .wpcf7-form :is(input, select, textarea):focus {
	border-color: #1C48D8;
	background: #fff;
}
.spw-form-card .wpcf7-submit {
	width: 100%;
	min-height: 46px;
	border-radius: 999px;
	font-family: Archivo, sans-serif;
	font-weight: 700;
	letter-spacing: .02em;
}
.spw-form-card .wpcf7-form .wpcf7-not-valid {
	border-color: #D8342B;
	background: #FFF7F6;
}
.spw-form-card .wpcf7-not-valid-tip { font-size: 12.5px; color: #C62A22; margin-top: 4px; }
.spw-form-card .wpcf7-response-output { margin: 4px 0 0; border-radius: 10px; font-size: 13.5px; }

@media (max-width: 768px) {
	.spw-form-card { padding: 22px 18px; }
	.spw-form-card .wpcf7-form { grid-template-columns: 1fr; }
}

/* İletişim sayfası kompakt: başlık blokları ve harita şeridi arasındaki boşluklar
   diğer sayfalardan daha sıkı — sayfa tek ekranda daha çok bilgi göstersin. */
body.page-id-761 .elementor-top-section .elementor-widget:not(:last-child) { margin-bottom: 12px; }
body.page-id-761 .spw-map-bar { margin-top: 12px; }

/* 14. Üstteki kayan duyuru şeridi -------------------------------------------
   Inter 400 / 16px düz bir cümle gibi duruyordu. Site dilinde "etiket" yazısı
   Archivo, büyük harf ve geniş harf aralığı (hero rozeti §6g ile aynı dil). */
.header-banner .wd-marquee .wp-block-wd-paragraph {
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .94);
	line-height: 1.2;
}
/* Ayraç: 78 KB'lık dekoratif SVG çıktıdan kaldırıldı (functions.php), yerine nokta.
   Şeritteki tek ikon bloğu bu ayraç. */
.header-banner .wd-marquee .wp-block-wd-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
}
.header-banner .wd-marquee .wp-block-wd-icon::before {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #4B76FF;
}

/* Hareketi azalt: şerit dursun, yazılar okunur kalsın. */
@media (prefers-reduced-motion: reduce) {
	.header-banner .wd-marquee-content { animation: none; }
}

/* 15. İletişim bilgisi kutuları (Woodmart Info Box) --------------------------
   Satırlar artık ham HTML değil `wd_infobox` widget'ı: ikon medya kitaplığından
   geliyor, doğal boyutu 128px olduğu için 22px'e sabitleniyor. Satır ayracı ve
   etiket rengi de burada; widget ayarlarında karşılığı yok. */
body.page-id-761 .wd-info-box {
	border-bottom: 1px solid #E6E9F0;
}
body.page-id-761 .wd-info-box .info-box-subtitle {
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8A93A6;
	margin-bottom: 5px;
}
body.page-id-761 .wd-info-box .info-box-inner { font-size: 16.5px; line-height: 1.6; color: #16181C; }
body.page-id-761 .wd-info-box .info-box-inner a { color: #1C48D8; }

/* 16. Hizmet kartları (Woodmart Info Box) -----------------------------------
   Kartlar artık widget; Elementor sütunları içerikleri kadar yükseldiği için
   kartlara tam yükseklik ve satır arası boşluk burada veriliyor. */
/* Kart ızgaraları: Elementor sütunu içeriği kadar yükseldiği için kartlar
   farklı boyda kalıyordu; zincirin tamamına tam yükseklik veriliyor. */
.elementor-inner-section .elementor-column > .elementor-widget-wrap,
.elementor-inner-section .elementor-widget-wd_infobox,
.elementor-inner-section .elementor-widget-wd_infobox .elementor-widget-container,
.elementor-inner-section .wd-info-box,
.elementor-inner-section .info-box-wrapper { height: 100%; }
.elementor-inner-section + .elementor-inner-section { margin-top: 20px; }
.wd-info-box .info-box-title { font-family: Archivo, sans-serif; font-weight: 700; }

/* 17. "One tin" panelindeki kategori etiketleri ----------------------------
   İçerik artık `wd_list` widget'ında (satır ekle/çıkar, bağlantı alanı);
   hap görünümü burada. Woodmart widget'ın `css_classes` ayarını çıktıya basmıyor,
   bu yüzden hedef widget'ın Elementor kimliği. */
.elementor-element-spwonetinlist ul.wd-list {
	display: flex;
	flex-direction: row; /* Woodmart listeyi alt alta diziyor */
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.elementor-element-spwonetinlist li { margin: 0; }
.elementor-element-spwonetinlist li a,
.elementor-element-spwonetinlist li > span {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff;
	font-size: 14.5px;
	text-decoration: none;
	transition: background .18s ease;
}
.elementor-element-spwonetinlist li a:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* İstatistik widget'larının başlıkları: hero şeridinde 22px Archivo, beyaz banttaki
   büyük rakamlarda 40px Anton — widget'ın başlık boyutu ayarı bu ölçüleri vermiyor. */
body.home .elementor-element-b88fc5d .wd-info-box .info-box-title {
	font-size: 22px;
	line-height: 1.15;
}
body.home .elementor-element-5ae9292 .wd-info-box .info-box-title {
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: 40px;
	line-height: 1;
}
body.home .elementor-element-5ae9292 .wd-info-box .info-box-inner strong {
	display: block;
	font-family: Archivo, sans-serif;
	font-size: 15px;
	color: #16181C;
	margin-bottom: 4px;
}

/* 18. Widget kartlarının hareketi ------------------------------------------
   Kartlar artık Woodmart Info Box widget'ı; eski `.spw-fam/.spw-cat/.spw-svc`
   sınıflarına bağlı giriş ve hover efektleri buraya taşındı. Bölüm, ekrana
   girince (`.spw-in`) kartlar sırayla beliriyor; sıra, Elementor sütununun
   konumundan geliyor. Hepsi `no-preference` altında. */
@media (prefers-reduced-motion: no-preference) {
	/* Giriş animasyonu `transform` yerine `translate` kullanıyor: `forwards` ile
	   biten bir transform animasyonu, hover'daki `transform` kuralını eziyordu
	   (animasyon değerleri normal bildirimlerin önüne geçiyor). */
	.elementor-inner-section .wd-info-box {
		opacity: 0;
		animation: spwRiseKart .5s ease forwards;
	}
	@keyframes spwRiseKart {
		from { opacity: 0; translate: 0 16px; }
		to   { opacity: 1; translate: 0 0; }
	}
	.spw-reveal:not(.spw-in) .elementor-inner-section .wd-info-box { animation-play-state: paused; }
	.elementor-inner-section > .elementor-container > .elementor-column:nth-child(2) .wd-info-box { animation-delay: .07s; }
	.elementor-inner-section > .elementor-container > .elementor-column:nth-child(3) .wd-info-box { animation-delay: .14s; }
	.elementor-inner-section > .elementor-container > .elementor-column:nth-child(4) .wd-info-box { animation-delay: .21s; }

	/* Kart hover: hafif kalkış + gölge, kenarlık belirginleşiyor. */
	.wd-info-box.box-style-border,
	.wd-info-box.box-style-bg-hover {
		transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
	}
	.wd-info-box.box-style-border:hover {
		transform: translateY(-4px);
		border-color: #C3CEEA;
		box-shadow: 0 14px 30px rgba(16, 26, 60, .11);
	}
	.wd-info-box.box-style-bg-hover:hover { transform: translateY(-3px); }

	/* Kart görseli (kategori kartlarında ürün fotoğrafı, renk ailesinde şerit). */
	.wd-info-box .info-box-icon img { transition: transform .25s ease; }
	.wd-info-box.box-style-border:hover .info-box-icon img { transform: scale(1.06); }

	/* Hizmet kartlarının ikonu: zeminli ikon hafifçe büyüyüp eğiliyor. */
	.wd-info-box .box-icon-wrapper { transition: transform .25s ease; }
	.wd-info-box.box-style-border:hover .box-icon-with-bg { transform: scale(1.08) rotate(-4deg); }

}

/* 19. Widget kartlarının estetiği ------------------------------------------
   Dönüşümden sonra kalan görsel sorunlar: renk şeridi karta göre eziliyordu,
   kategori fotoğrafları zeminsiz duruyordu, hizmet ikonu tüm satıra yayılıp
   pil gibi görünüyordu ve 4 sütun dar ekranda çok ince kalıyordu. */

/* a) Renk ailesi kartı: şerit kartın tam genişliğinde, üst köşeleri yuvarlak. */
/* Woodmart, ikon görselini `width/height: inherit !important` ile sarmalayıcıdan
   miras aldırıyor; bu yüzden ölçü sarmalayıcıya veriliyor, kırpma img'ye. */
/* Woodmart ikon kutusuna 30px yan dolgu ve -37px alt boşluk veriyor; şerit kartın
   kenarına dayansın diye sıfırlanıyor. */
.elementor-element-spwailer1 .wd-info-box .box-icon-wrapper,
.elementor-element-spwailer2 .wd-info-box .box-icon-wrapper {
	width: 100%;
}
.elementor-element-spwailer1 .wd-info-box .info-box-icon,
.elementor-element-spwailer2 .wd-info-box .info-box-icon {
	display: block;
	width: 100%;
	max-width: none; /* Woodmart ikon kutusuna max-width:100% veriyor, şerit taşamıyordu */
}
.elementor-element-spwailer1 .wd-info-box .info-svg-wrapper,
.elementor-element-spwailer2 .wd-info-box .info-svg-wrapper {
	display: block;
	width: calc(100% + 32px) !important;
	max-width: none !important;
	height: 88px !important;
	margin: -16px -16px 0;
	overflow: hidden;
	border-radius: 15px 15px 0 0;
}
.elementor-element-spwailer1 .wd-info-box .info-svg-wrapper img,
.elementor-element-spwailer2 .wd-info-box .info-svg-wrapper img {
	object-fit: cover;
	display: block;
	max-width: none;
}
/* İkinci sıradaki üç kart, ilk sıradakilerle aynı genişlikte ve ortalanmış. */
@media (min-width: 1025px) {
	.elementor-element-spwailer2 > .elementor-container { justify-content: center; }
	.elementor-element-spwailer2 > .elementor-container > .elementor-column { width: 25%; }
}

/* b) Kategori kartı: ürün fotoğrafı yumuşak zeminli bir kutunun içinde. */
.elementor-element-spwkatr1 .wd-info-box .info-box-icon,
.elementor-element-spwkatr2 .wd-info-box .info-box-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 124px;
	height: 124px;
	margin: 0 auto;
	padding: 10px;
	border-radius: 16px;
	background: #F3F5FA;
	overflow: hidden;
}
.elementor-element-spwkatr1 .wd-info-box .info-box-icon img,
.elementor-element-spwkatr2 .wd-info-box .info-box-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* b2) Kart çerçevesi: Woodmart onu `.info-box-content`'e koyuyor, bu yüzden renk
   şeridi/görsel çerçevenin dışında kalıyordu. Çerçeve kartın tamamına alınıyor. */
.elementor-inner-section .wd-info-box.box-style-border {
	background: #fff;
	border: 1px solid #E6E9F0;
	border-radius: 16px;
	overflow: hidden;
}
.elementor-inner-section .wd-info-box .info-box-content {
	border: 0 !important;
	border-radius: 0 !important;
}

/* c0) Woodmart kenarlıklı kartlarda ikon kutusuna negatif alt boşluk veriyor
   (ikonun yarısını içeriğin üstüne bindirmek için). Bizim kartlarımızda bu,
   başlığı ikonun altına sokuyordu; tüm kart ızgaralarında sıfırlanıyor. */
.elementor-inner-section .wd-info-box .box-icon-wrapper {
	padding: 0 !important;
	margin: 0 0 14px !important;
}

/* c) İkon kutusu: satıra yayılmak yerine sabit kare. */
.elementor-inner-section .wd-info-box .box-icon-with-bg {
	display: inline-flex;
	padding: 0;
}
.wd-info-box .box-icon-wrapper { display: block; }

/* d) Kart ızgaraları dar ekranda: 4 sütun 1280px altında çok inceliyor. */
@media (max-width: 1279px) {
	/* Elementor iç bölümü `flex-wrap: nowrap` kullanıyor; sarma açılmazsa sütunlar
	   yeni satıra geçmek yerine sıkışıp eski genişliğine dönüyor. */
	.elementor-inner-section > .elementor-container { flex-wrap: wrap; }
	.elementor-inner-section > .elementor-container > .elementor-column { width: 50%; }
	.elementor-element-spwailer2 > .elementor-container > .elementor-column { width: 50%; }
}
@media (max-width: 767px) {
	.elementor-inner-section > .elementor-container { flex-wrap: wrap; }
	.elementor-inner-section > .elementor-container > .elementor-column,
	.elementor-element-spwailer2 > .elementor-container > .elementor-column { width: 100%; }
}

/* e) Metin ritmi. Woodmart içerik kutusuna 27-30px kendi dolgusunu veriyor; kart
   dolgusuyla üst üste binip kartın altında büyük boşluk bırakıyordu. */
.elementor-inner-section .wd-info-box .info-box-content {
	padding: 0 !important;
	margin-top: 0 !important;
}
.wd-info-box .info-box-title { margin-bottom: 6px; }
.wd-info-box .info-box-inner { font-size: 14.5px; line-height: 1.6; color: #5B6170; }

/* f) İletişim satırları: son satırda ayraç olmasın, ikon metinle aynı hizada. */
body.page-id-761 .wd-info-box { display: flex; gap: 14px; align-items: flex-start; }
body.page-id-761 .wd-info-box .box-icon-wrapper { flex: none; margin-top: 3px; }
body.page-id-761 .elementor-widget:last-child .wd-info-box { border-bottom: 0; }
body.page-id-761 .wd-info-box .info-box-inner { font-size: 16.5px; color: #16181C; }

/* 20. Hizmet kartları — çerçevesiz düzen --------------------------------------
   Kartın çevresindeki dikdörtgen ve ikonun kutusu ağır duruyordu. Artık kart
   çerçevesiz: renkli ikon, başlık ve metin; ayrım için ikonun altındaki ince
   renkli çizgi. Renk bilgisi widget'ın ikon zemin renginden geliyor. */
/* Woodmart kenarlıklı stilde çerçeveyi kartın kendisine değil `.info-box-content`
   kutusuna veriyor; "ikonun altındaki dikdörtgen" buydu. */
.elementor-element-spwsvcr1 .wd-info-box,
.elementor-element-spwsvcr2 .wd-info-box {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 4px 18px 4px 0 !important;
}
.elementor-element-spwsvcr1 .wd-info-box .info-box-content,
.elementor-element-spwsvcr2 .wd-info-box .info-box-content {
	border: 0 !important;
	border-radius: 0 !important;
}
/* Renkli zemin Elementor tarafından `.info-box-icon`'a yazılıyor (dış sarmalayıcıya
   değil), ölçü de oraya verilmeli. */
.elementor-element-spwsvcr1 .wd-info-box .info-box-icon,
.elementor-element-spwsvcr2 .wd-info-box .info-box-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0; /* Woodmart 20px yan dolgu veriyor, ikon 16px'e sıkışıyordu */
	border-radius: 16px;
	transition: background-color .2s ease, transform .2s ease;
}
/* İkon görseli kutunun içinde küçük kalmasın. */
.elementor-element-spwsvcr1 .wd-info-box .info-svg-wrapper,
.elementor-element-spwsvcr2 .wd-info-box .info-svg-wrapper {
	width: 28px !important;
	height: 28px !important;
}
.elementor-element-spwsvcr1 .wd-info-box .info-box-title,
.elementor-element-spwsvcr2 .wd-info-box .info-box-title {
	font-size: 16.5px;
	margin-bottom: 8px;
}
.elementor-element-spwsvcr1 .wd-info-box .info-box-inner,
.elementor-element-spwsvcr2 .wd-info-box .info-box-inner {
	font-size: 14.5px;
	line-height: 1.65;
}
/* Kartlar arasında dikey ayraç: kutu yerine ince çizgi. */
@media (min-width: 768px) {
	.elementor-element-spwsvcr1 > .elementor-container > .elementor-column + .elementor-column .wd-info-box,
	.elementor-element-spwsvcr2 > .elementor-container > .elementor-column + .elementor-column .wd-info-box {
		border-left: 1px solid #E6E9F0 !important;
		padding-left: 22px !important;
	}
	.elementor-element-spwsvcr2 { margin-top: 34px; }
}
/* Çerçeve kalkınca hover'daki kutu kalkışı da anlamsız; sadece ikon ve başlık. */
@media (prefers-reduced-motion: no-preference) {
	.elementor-element-spwsvcr1 .wd-info-box:hover,
	.elementor-element-spwsvcr2 .wd-info-box:hover { transform: none; }
	.elementor-element-spwsvcr1 .wd-info-box .info-box-title,
	.elementor-element-spwsvcr2 .wd-info-box .info-box-title { transition: color .18s ease; }
	.elementor-element-spwsvcr1 .wd-info-box:hover .info-box-title,
	.elementor-element-spwsvcr2 .wd-info-box:hover .info-box-title { color: #1C48D8; }
	/* İkon kutusu hover'da öne çıksın: renk tonu koyulaşıyor (widget ayarı) ve
	   kutu hafifçe büyüyor. */
	.elementor-element-spwsvcr1 .wd-info-box:hover .info-box-icon,
	.elementor-element-spwsvcr2 .wd-info-box:hover .info-box-icon { transform: scale(1.06); }
}

/* 21. "Recent work" bölümü --------------------------------------------------
   Kalite rozetleri düz bir liste, proje görselleri de küçük ve başlıkları
   okunmaz hâldeydi. Rozetler hap biçiminde bir sıraya, projeler gölgeli ve
   yuvarlak köşeli kartlara alındı; başlık altta koyu geçişin üzerinde. */
.elementor-element-spwrozetler ul.wd-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
}
.elementor-element-spwrozetler ul.wd-list li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 15px 9px 12px;
	border-radius: 999px;
	background: #EAEFFE;
	color: #1C3B8F;
	font-size: 14px;
	font-weight: 600;
}
.elementor-element-spwrozetler ul.wd-list .wd-icon { display: inline-flex; }
.elementor-element-spwrozetler ul.wd-list .wd-icon img { width: 18px; height: 18px; }

/* Proje kartları */
.elementor-element-spwprojr .promo-banner {
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(16, 26, 60, .12);
}
/* Yükseklik widget ayarından geliyor (Banner → görsel yüksekliği 280px);
   burada yalnızca kırpma biçimi veriliyor. */
.elementor-element-spwprojr .banner-image img {
	width: 100%;
	object-fit: cover;
	display: block;
}
/* Başlık, görselin altında koyu bir geçişin üzerinde. */
.elementor-element-spwprojr .promo-banner .wrapper-content-banner {
	position: absolute;
	inset: auto 0 0 0;
	padding: 60px 18px 16px;
	background: linear-gradient(to top, rgba(10, 14, 28, .82), rgba(10, 14, 28, 0));
}
.elementor-element-spwprojr .promo-banner .banner-title {
	margin: 0;
	color: #fff;
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.elementor-element-spwprojr .promo-banner .banner-subtitle,
.elementor-element-spwprojr .promo-banner .banner-inner { display: none; }

/* 22. Ana sayfa — koyu panel ve istatistik şeridi ---------------------------- */
/* "One tin" panelinde görsel sütunun altında büyük boşluk bırakıyordu; sütunu
   dolduruyor ve panelin köşe yarıçapıyla uyumlu hâle geliyor. */
body.home .elementor-element-607e4af .elementor-widget-wd_image_or_svg,
body.home .elementor-element-607e4af .elementor-widget-wd_image_or_svg .elementor-widget-container,
body.home .elementor-element-607e4af .elementor-widget-wd_image_or_svg figure { height: 100%; }
body.home .elementor-element-607e4af img {
	width: 100%;
	height: 100%;
	min-height: 380px;
	object-fit: cover;
	border-radius: 18px;
	display: block;
}

/* İstatistik şeridi: rakamlar arasında ince ayraç, dikey ritim. */
@media (min-width: 768px) {
	body.home .elementor-element-5ae9292 > .elementor-container > .elementor-column + .elementor-column .wd-info-box {
		border-left: 1px solid #E6E9F0;
		padding-left: 28px;
	}
}
body.home .elementor-element-5ae9292 .wd-info-box .info-box-inner strong { margin-top: 10px; }

/* 23. About sayfası --------------------------------------------------------- */
/* Görseller sütunlarını doldursun (altlarında boşluk kalmasın), köşeleri yumuşak. */
body.page-id-758 .elementor-element-3c5c7bd .elementor-widget-wd_image_or_svg,
body.page-id-758 .elementor-element-54387d9 .elementor-widget-wd_image_or_svg,
body.page-id-758 .elementor-element-3c5c7bd .elementor-widget-wd_image_or_svg .elementor-widget-container,
body.page-id-758 .elementor-element-54387d9 .elementor-widget-wd_image_or_svg .elementor-widget-container { height: 100%; }
body.page-id-758 .elementor-element-3c5c7bd img,
body.page-id-758 .elementor-element-54387d9 img {
	width: 100%;
	height: 100%;
	min-height: 340px;
	object-fit: cover;
	border-radius: 18px;
	display: block;
}

/* Dört ölçü kutusu: rakam vurgulu, aralarında ince ayraç. */
body.page-id-758 .elementor-element-520a374 .woodmart-title-container {
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #16181C;
}
@media (min-width: 768px) {
	body.page-id-758 .elementor-element-520a374 > .elementor-container > .elementor-column + .elementor-column > .elementor-widget-wrap {
		border-left: 1px solid #E6E9F0;
		padding-left: 26px;
	}
}
body.page-id-758 .elementor-element-520a374 .wd-text-block p { margin-top: 6px; }

/* 24. İletişim formu başlığı kartın içinde --------------------------------
   Başlık ayrı bir widget (Elementor'da düzenlenebilsin diye) ama görsel olarak
   kartın parçası: üst köşeleri yuvarlak beyaz bir başlık bandı. */
body.page-id-761 .elementor-widget-wd_title.elementor-element-spwformh .elementor-widget-container {
	background: #fff;
	border: 1px solid #E6E9F0;
	border-bottom: 0;
	border-radius: 14px 14px 0 0;
	padding: 22px 24px 0;
}
body.page-id-761 .elementor-element-spwformh { margin-bottom: 0 !important; }
body.page-id-761 .elementor-element-spwformh .title-wrapper { margin-bottom: 0; }
body.page-id-761 .elementor-element-spwformh .liner-continer:has(> h2)::after { margin: 12px 0 0; }
body.page-id-761 .spw-form-card {
	border-top: 0;
	border-radius: 0 0 14px 14px;
	padding-top: 18px;
}

/* 25. Hero ölçü şeridi ------------------------------------------------------
   Şeridin üstünde, hero sütununun sağ dolgusu yüzünden ortada kesilen bir
   çizgi duruyordu. Çizgi kaldırıldı; ayrım boşlukla yapılıyor. */
body.home .elementor-element-c0bc783 {
	border-top: 0 !important;
	margin-top: 26px !important;
	padding-top: 0 !important;
}

/* 26. Üst sayfa menüsü satırı ----------------------------------------------
   Header artık iki menü satırı: üstte sayfalar (Home/About/Services/Contact),
   altta ürün kategorileri + logo. Üst satır ince, ortalanmış ve sakin. */
.whb-top-bar .wd-nav > li > a {
	font-family: Archivo, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #4A5164;
}
.whb-top-bar .wd-nav > li > a:hover,
.whb-top-bar .wd-nav > li.current-menu-item > a { color: #1C48D8; }
/* Menü, ortadaki sütunun tamamını kapladığı için sola yaslı kalıyordu. */
.whb-top-bar .wd-nav { justify-content: center; width: 100%; }
.whb-top-bar {
	background-color: #F5F1EB; /* logo satırıyla aynı krem, aralarında ince çizgi */
	border-bottom: 1px solid #E8E2D8;
}

/* 27. Sepet — boş çapraz satış bloğu ---------------------------------------
   "You may be interested in…" bloğu ürün olmasa da başlığını basıyordu.
   Ürün yoksa blok tamamen gizleniyor. */
.wc-block-cart .wp-block-woocommerce-product-collection:not(:has(li.product, .wc-block-product, .wp-block-post)) {
	display: none;
}

/* 28. Kategori tanıtım metni ------------------------------------------------ */
.term-description {
	max-width: 76ch;
	margin: 0 0 22px;
	font-size: 16px;
	line-height: 1.7;
	color: #4A5164;
}
.term-description p:last-child { margin-bottom: 0; }

/* 29. Yasal sayfalar -------------------------------------------------------
   Uzun metinler tam genişlikte okunmuyordu; okuma genişliği ve ritim. */
body.page-id-1026 .entry-content,
body.page-id-1028 .entry-content,
body.page-id-3 .entry-content {
	max-width: 74ch;
	font-size: 16px;
	line-height: 1.75;
	color: #3F4658;
}
body.page-id-1026 .entry-content h2,
body.page-id-1028 .entry-content h2,
body.page-id-3 .entry-content h2 {
	margin: 34px 0 10px;
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #16181C;
}
body.page-id-1026 .entry-content p,
body.page-id-1028 .entry-content p,
body.page-id-3 .entry-content p { margin-bottom: 14px; }
body.page-id-1026 .entry-content a,
body.page-id-1028 .entry-content a,
body.page-id-3 .entry-content a { color: #1C48D8; text-decoration: underline; }

/* 30. Boya hesaplayıcı ------------------------------------------------------ */
.spw-hesap {
	max-width: 620px;
	margin: 26px auto 0;
	padding: 26px 26px 24px;
	border: 1px solid #E6E9F0;
	border-radius: 18px;
	background: #FBFCFE;
	text-align: center;
}
.spw-hesap-satir {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}
.spw-hesap-alan {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
	flex: 1 1 200px;
	font-size: 13px;
	font-weight: 600;
	color: #4A5164;
}
.spw-hesap-girdi { position: relative; display: block; }
.spw-hesap-girdi i {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-style: normal;
	font-size: 14px;
	color: #8A93A6;
}
.spw-hesap input,
.spw-hesap select {
	width: 100%;
	min-height: 46px;
	padding: 0 40px 0 14px;
	border: 1px solid #DDE2EC;
	border-radius: 10px;
	background: #fff;
	font-size: 16px;
	color: #16181C;
}
.spw-hesap select { padding-right: 14px; }
.spw-hesap :is(input, select):focus { border-color: #1C48D8; outline: none; }

.spw-hesap-sonuc { margin: 22px 0 20px; }
.spw-hesap-litre {
	margin: 0;
	font-family: Anton, sans-serif;
	font-size: 40px;
	line-height: 1;
	color: #1C48D8;
}
.spw-hesap-litre strong { font-weight: 400; }
/* Müşteri isteği (01.10): sonuç kesin değil, "approximately" yazsın. Anton 40px'te
   uzun kelime satırı taşırıyordu; sayının üstünde küçük bir etiket olarak duruyor. */
.spw-hesap-yaklasik {
	display: block;
	margin-bottom: 6px;
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6B7386;
}
.spw-hesap-tin {
	margin: 8px 0 0;
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #16181C;
}
.spw-hesap-not { margin: 8px 0 0; font-size: 13.5px; color: #6B7386; }

@media (max-width: 600px) {
	.spw-hesap { padding: 20px 16px; }
	.spw-hesap-litre { font-size: 32px; }
}

/* 31. "Why linseed oil paint" karşılaştırması -------------------------------
   Tek beyaz kart, ortada ince ayraç. Renkli zemin yok; mavi yalnızca tiklerde.
   Satırlar bölüm ekrana girince sırayla beliriyor. */
.elementor-element-spwkarsir2 > .elementor-container {
	align-items: stretch;
	max-width: 980px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #ECEFF5;
	border-radius: 22px;
	box-shadow: 0 18px 40px rgba(16, 26, 60, .07);
	overflow: hidden;
}
.elementor-element-spwkarsir2 > .elementor-container > .elementor-column > .elementor-widget-wrap {
	height: 100%;
	padding: 30px 32px 28px;
}
@media (min-width: 768px) {
	.elementor-element-spwkarsir2 > .elementor-container > .elementor-column + .elementor-column > .elementor-widget-wrap {
		border-left: 1px solid #ECEFF5;
	}
}
@media (max-width: 767px) {
	.elementor-element-spwkarsir2 > .elementor-container > .elementor-column + .elementor-column > .elementor-widget-wrap {
		border-top: 1px solid #ECEFF5;
	}
}

.spw-karsi-baslik {
	margin: 0 0 18px !important;
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #16181C;
}

.elementor-element-spwkarsir2 ul.wd-list { display: block; margin: 0; padding: 0; }
.elementor-element-spwkarsir2 ul.wd-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 4px;
	padding: 9px 12px;
	border-radius: 12px;
	font-size: 15.5px;
	line-height: 1.6;
}
.elementor-element-spwkarsir2 ul.wd-list li:last-child { margin-bottom: 0; }
.elementor-element-spwkarsir2 ul.wd-list .wd-icon { flex: none; margin-top: 3px; }
.elementor-element-spwkarsicolsol li { color: #16181C; }
/* Sağ sütun soluk değil, yalnızca bir ton daha sakin. */
.elementor-element-spwkarsicolsag li { color: #4F566B; }
.elementor-element-spwkarsicolsag .spw-karsi-baslik { color: #6B7386; }

/* Satırların sırayla belirmesi; bölüm görünene kadar bekliyor. */
@media (prefers-reduced-motion: no-preference) {
	.elementor-element-spwkarsir2 ul.wd-list li {
		opacity: 0;
		animation: spwKarsiSatir .45s ease forwards;
	}
	.spw-reveal:not(.spw-in) .elementor-element-spwkarsir2 ul.wd-list li { animation-play-state: paused; }
	.elementor-element-spwkarsir2 ul.wd-list li:nth-child(2) { animation-delay: .07s; }
	.elementor-element-spwkarsir2 ul.wd-list li:nth-child(3) { animation-delay: .14s; }
	.elementor-element-spwkarsir2 ul.wd-list li:nth-child(4) { animation-delay: .21s; }
	.elementor-element-spwkarsir2 ul.wd-list li:nth-child(5) { animation-delay: .28s; }
	@keyframes spwKarsiSatir {
		from { opacity: 0; translate: 0 10px; }
		to   { opacity: 1; translate: 0 0; }
	}
	/* Satır hover: zemin belirir, satır hafifçe sağa kayar, ikon büyür. */
	.elementor-element-spwkarsir2 ul.wd-list li {
		transition: background-color .2s ease, transform .2s ease;
	}
	.elementor-element-spwkarsir2 ul.wd-list li:hover { transform: translateX(4px); }
	.elementor-element-spwkarsicolsol li:hover { background: #EEF3FF; }
	.elementor-element-spwkarsicolsag li:hover { background: #F4F5F8; }
	.elementor-element-spwkarsir2 ul.wd-list .wd-icon img { transition: transform .2s ease; }
	.elementor-element-spwkarsir2 ul.wd-list li:hover .wd-icon img { transform: scale(1.18); }
	.elementor-element-spwkarsir2 > .elementor-container { transition: box-shadow .3s ease; }
	.elementor-element-spwkarsir2 > .elementor-container:hover { box-shadow: 0 22px 48px rgba(16, 26, 60, .10); }
}
@media (prefers-reduced-motion: reduce) {
	.elementor-element-spwkarsir2 ul.wd-list li { opacity: 1; animation: none; }
}

/* 32. "What are you painting?" kartları -------------------------------------
   Önce ürün fotoğrafı denendi: çekimler beyaz fonlu stüdyo kareleri olduğu için
   yuvarlağın içi boş beyaz disk gibi duruyordu. Artık görselin kendisi daire
   (data/ikonlar/spw-daire-N.svg), o yüzden burada kırpma/zemin yok — yalnız
   boyut, hizalama ve hover. Bölümde beliriş animasyonu bilerek kapalı. */
.elementor-element-spwissec .wd-info-box {
	display: flex;
	align-items: center;
	gap: 16px;
	opacity: 1 !important;
	animation: none !important;
	transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}
.elementor-element-spwissec .wd-info-box .box-icon-wrapper {
	flex: none;
	width: 76px;
	margin: 0 !important;
}
.elementor-element-spwissec .wd-info-box .info-box-icon {
	width: 76px;
	height: 76px;
	padding: 0;
	background: none;
	border-radius: 50%;
	display: block;
}
.elementor-element-spwissec .wd-info-box .info-box-icon img {
	width: 76px !important;
	height: 76px !important;
	display: block;
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(26, 32, 44, .16);
	transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}
.elementor-element-spwissec .wd-info-box .info-box-content { flex: 1 1 auto; }
.elementor-element-spwissec .wd-info-box .info-box-title { margin-bottom: 4px; }

@media (prefers-reduced-motion: no-preference) {
	.elementor-element-spwissec .wd-info-box:hover .info-box-icon img {
		transform: scale(1.06) rotate(-3deg);
		box-shadow: 0 10px 22px rgba(26, 32, 44, .24);
	}
}

@media (max-width: 575px) {
	.elementor-element-spwissec .wd-info-box .box-icon-wrapper,
	.elementor-element-spwissec .wd-info-box .info-box-icon { width: 64px; }
	.elementor-element-spwissec .wd-info-box .info-box-icon { height: 64px; }
	.elementor-element-spwissec .wd-info-box .info-box-icon img {
		width: 64px !important;
		height: 64px !important;
	}
}

/* 33. "Bize ulaşın" boyları (functions.php spw_sadece_teklif) ---------------
   Fiyat görünür kalıyor; sepet butonu ve adet alanı yalnız o boy seçiliyken gizli. */
form.variations_form.spw-teklif-secili .woocommerce-variation-add-to-cart { display: none !important; }
.spw-teklif {
	margin: 14px 0 6px;
	padding: 16px 18px;
	border: 1px solid #D7DCE8;
	border-left: 4px solid #1C48D8;
	border-radius: 10px;
	background: #fff;
	font-size: 14.5px;
	line-height: 1.6;
	color: #4F566B;
}
.spw-teklif p { margin: 0; }
.spw-teklif strong { color: #16181C; }
.spw-teklif-butonlar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px !important; }
.spw-teklif-butonlar .btn { margin: 0; }
/* Woodmart'ın .btn renk sınıfları burada (varyasyon şablonunun içinde) uygulanmıyor,
   butonlar gri kalıyordu — renkleri doğrudan veriyoruz. */
.spw-teklif-butonlar a {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 20px;
	border: 1.5px solid #1C48D8;
	border-radius: 999px;
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-transform: none;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.spw-teklif-butonlar a:first-child { background: #1C48D8; color: #fff; }
.spw-teklif-butonlar a:first-child:hover { background: #1538A8; border-color: #1538A8; }
.spw-teklif-butonlar a:last-child { background: transparent; color: #1C48D8; }
.spw-teklif-butonlar a:last-child:hover { background: #EEF2FD; }

/* 34. "Mix your own colour" bölümü (data/renk_karisimi.php) --------------------
   02.10 üçüncü sürüm: kenardan kenara koyu bölüm. Solda metin + ekrana girince sayan
   "8,000+" (functions.php), sağda [spw_renk_duvari]: 32 rengin zıt yönlerde akan dört
   sütunu. Akış CSS animasyonu; liste iki kez basılıp -50% kaydırılınca dikişsiz dönüyor.
   Üzerine gelince duruyor (karolar ürün sayfasına bağlı), hareket azaltmada hiç akmıyor.
   Zemin antrasit — mavi geniş zemin karşılaştırma bölümünde beğenilmemişti. */
.spw-karisim-sec {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(60% 80% at 85% 50%, rgba(28, 72, 216, .22) 0%, rgba(28, 72, 216, 0) 70%),
		radial-gradient(40% 60% at 10% 10%, rgba(187, 134, 32, .10) 0%, rgba(187, 134, 32, 0) 70%),
		#12151C;
	color: #fff;
}
.spw-karisim-sec > .elementor-container { min-height: 600px; }
.spw-karisim-sol > .elementor-widget-wrap { padding: 72px 30px 72px 0 !important; }
.spw-karisim-sag > .elementor-widget-wrap { padding: 0 !important; }

/* Başlık + etiket */
.spw-karisim-sec .spw-karisim-sol .elementor-widget-wd_title:first-child .title-subtitle {
	display: inline-block;
	margin-bottom: 14px;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #C9D5FA;
	background: rgba(255, 255, 255, .04);
}
.spw-karisim-sec .spw-karisim-sol .elementor-widget-wd_title:first-child .title {
	/* !important yok: Elementor'daki yazı tipi/renk ayarı (0,4,0) bunu ezebilsin (03.10). */
	font-size: clamp(36px, 4vw, 52px);
	line-height: 1.05;
	color: #fff;
}
.spw-karisim-sol .elementor-widget-wd_title:first-child .wd-title-divider,
.spw-karisim-sol .elementor-widget-wd_title:first-child .title-separator { display: none; }

/* Sayaç */
.spw-karisim-sayac { margin: 26px 0 18px !important; }
.spw-karisim-sec .spw-karisim-sayac .title {
	font-family: Anton, sans-serif;
	font-size: clamp(76px, 9vw, 128px);
	line-height: .9;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	background: linear-gradient(100deg, #F1D088 0%, #E4EDF3 35%, #7398A5 60%, #A96B68 85%, #F1D088 100%);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent; /* Elementor'dan renk verilirse düz renge döner */
}
.spw-karisim-sec .spw-karisim-sayac .title-after_title {
	margin-top: 10px;
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #8E99B3;
}
.spw-karisim-sol p { font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .78); }
.spw-karisim-not {
	margin-top: 18px !important;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-left: 3px solid #F1D088;
	border-radius: 12px;
	background: rgba(255, 255, 255, .04);
	font-size: 15px !important;
}
.spw-karisim-not strong { color: #fff; }
.spw-karisim-sol .elementor-widget-wd_button { margin-top: 10px; }

/* Renk duvarı */
.spw-renk-duvari {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	height: 600px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.spw-renk-sutun { position: relative; overflow: hidden; }
.spw-renk-akis { display: flex; flex-direction: column; gap: 14px; }
.spw-renk-kopya { display: flex; flex-direction: column; gap: 14px; }
.spw-renk-karo {
	position: relative;
	display: flex;
	align-items: flex-end;
	flex: none;
	height: 132px;
	padding: 12px 14px;
	border-radius: 18px;
	background: var(--renk);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 24px rgba(0, 0, 0, .25);
	text-decoration: none;
	transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}
.spw-renk-karo span {
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .92);
	opacity: .0;
	transform: translateY(4px);
	transition: opacity .3s ease, transform .3s ease;
}
.spw-renk-karo.is-acik span { color: rgba(22, 24, 28, .82); }
.spw-renk-karo:hover { transform: scale(1.04); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 16px 34px rgba(0, 0, 0, .35); z-index: 2; }
.spw-renk-karo:hover span { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
	.spw-renk-akis { animation: spwRenkAkis var(--sure, 50s) linear infinite; }
	.spw-renk-akis.is-ters { animation-direction: reverse; }
	.spw-renk-duvari:hover .spw-renk-akis { animation-play-state: paused; }
	.spw-karisim-sayac .title { animation: spwRenkParilti 9s ease-in-out infinite alternate; }
}
@keyframes spwRenkAkis {
	from { transform: translateY(0); }
	to { transform: translateY(calc(-50% - 7px)); } /* yarım liste + aradaki boşluğun yarısı */
}
@keyframes spwRenkParilti {
	from { background-position: 0% 50%; }
	to { background-position: 100% 50%; }
}

/* Hareket azaltma: akış yok, adlar hep görünür (bilgi kaybolmasın). */
@media (prefers-reduced-motion: reduce) {
	.spw-renk-karo span { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {
	.spw-karisim-sol > .elementor-widget-wrap { padding: 56px 0 28px !important; }
	.spw-renk-duvari { height: 440px; grid-template-columns: repeat(4, 1fr); gap: 10px; }
	.spw-renk-akis, .spw-renk-kopya { gap: 10px; }
	.spw-renk-karo { height: 104px; border-radius: 14px; }
	@keyframes spwRenkAkis { to { transform: translateY(calc(-50% - 5px)); } }
}
@media (max-width: 767px) {
	.spw-karisim-sec > .elementor-container { min-height: 0; }
	.spw-renk-duvari { height: 340px; margin-bottom: 40px; }
	.spw-renk-karo { height: 84px; }
	.spw-renk-karo span { display: none; }
}

/* Kategori kartındaki "Quick Shop" formu kartın görsel alanını kaplıyor (~220px).
   Ürün sayfasındaki tam kutu buraya sığmıyor, kartın dışına taşıyordu (01.10 hatası);
   butonları küçültmek de yetmedi, kaydırma alanının altında kalıyorlardı. Kartta yalnız
   kısa sürüm: başlık + tek satır telefon bağlantısı. Tam kutu ürün sayfasında. */
.spw-teklif-kisa { display: none; }
.quick-shop-form .spw-teklif {
	margin: 4px 0 0;
	padding: 5px 8px;
	border: 1px solid #D7DCE8;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}
.quick-shop-form .spw-teklif-aciklama,
.quick-shop-form .spw-teklif-butonlar { display: none !important; }
.quick-shop-form .spw-teklif strong { display: inline; }
.quick-shop-form .spw-teklif p { line-height: 1.35; }
.quick-shop-form .spw-teklif-kisa { display: inline; }
.quick-shop-form .spw-teklif-kisa a { font-weight: 700; color: #1C48D8; }
/* 35. Blog arşivi kartları (02.10) ------------------------------------------
   Kare ürün fotoğrafı ile yatay bina fotoğrafı yan yana gelince kart yükseklikleri
   farklılaşıyor, ızgara dağınık duruyordu. Görsel alanı sabit 16:10, kırpılarak dolar. */
.blog-post-loop .wd-post-img { aspect-ratio: 16 / 10; overflow: hidden; }
.blog-post-loop .wd-post-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: no-preference) {
	.blog-post-loop:hover .wd-post-img img { transform: scale(1.04); }
}
.blog-post-loop .wd-entities-title { font-size: 19px; line-height: 1.3; }

/* 36. Blog yazı sayfası (02.10, ikinci tur) -----------------------------------
   İlk sürüm her şeyi 760px'e sıkıştırmıştı: görsel ve metin dar, alttaki etiket/paylaşım,
   Newer/Older ve yorum formu ise 1410px'e yayılıyordu. Üç genişlik:
     --spw-yazi-genis  1240px  kapak görseli, ilgili yazılar
     --spw-yazi-metin   960px  metin, etiketler, gezinme
     başlık bloğu      1040px
   (02.10 üçüncü tur: 1180/820/940 hâlâ dar bulundu, biraz genişletildi.)
   Kapaklar yatay fotoğraf (data/blog_sayfa_tasarimi.php); 2:1 kırpılıyor. */
.single-post .wd-content-area {
	--spw-yazi-genis: 1240px;
	--spw-yazi-metin: 960px;
}
.post-single-page .wd-single-post-header {
	max-width: var(--spw-yazi-genis);
	margin: 0 auto 44px;
	text-align: center;
}
.post-single-page .wd-post-cat,
.post-single-page .wd-post-title,
.post-single-page .wd-post-meta { max-width: 1040px; margin-left: auto; margin-right: auto; }
.post-single-page .wd-post-title {
	margin-top: 14px;
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: clamp(34px, 4.6vw, 56px);
	line-height: 1.08;
	color: #16181C;
}
.post-single-page .wd-post-meta { margin-top: 14px; color: #6B7386; }
.post-single-page .wd-post-image {
	max-width: none;
	margin-top: 34px;
	overflow: hidden;
	border-radius: 24px;
	box-shadow: 0 18px 44px rgba(22, 24, 28, .12);
}
.post-single-page .wd-post-image img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

/* Metin */
.post-single-page > .wd-entry-content {
	max-width: var(--spw-yazi-metin);
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.8;
	color: #3D4354;
}
.post-single-page > .wd-entry-content > p:first-child {
	font-size: 21px;
	line-height: 1.6;
	color: #16181C;
}
.post-single-page > .wd-entry-content h2 {
	margin: 1.9em 0 .55em;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.2;
	color: #16181C;
}
.post-single-page > .wd-entry-content a {
	color: #1C48D8;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* Etiketler + paylaşım */
.single-post .wd-single-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: var(--spw-yazi-metin);
	margin: 40px auto 0;
	padding-top: 24px;
	border-top: 1px solid #E4E8F1;
}
.single-post .wd-single-footer .wd-tags-list a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 5px 13px;
	border: 1px solid #D7DCE8;
	border-radius: 999px;
	font-size: 13px;
	color: #4F566B;
	background: #fff;
}
.single-post .wd-single-footer .wd-tags-list a:hover { border-color: #1C48D8; color: #1C48D8; }

/* Newer / Older: iki kart, ortada listeye dönüş */
.single-post .wd-page-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 14px;
	max-width: var(--spw-yazi-metin);
	margin: 34px auto 0;
	padding: 0;
	border: 0;
}
.single-post .wd-page-nav .wd-page-nav-btn { min-width: 0; }
.single-post .wd-page-nav .wd-page-nav-btn > a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: 18px 22px;
	border: 1px solid #E4E8F1;
	border-radius: 16px;
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.single-post .wd-page-nav .next-btn > a { text-align: right; }
.single-post .wd-page-nav .wd-page-nav-btn > a:hover {
	border-color: #1C48D8;
	box-shadow: 0 10px 24px rgba(28, 72, 216, .10);
	transform: translateY(-2px);
}
.single-post .wd-page-nav .wd-label {
	margin-bottom: 4px;
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6B7386;
}
.single-post .wd-page-nav .wd-entities-title {
	font-size: 16px;
	line-height: 1.35;
	color: #16181C;
}
.single-post .wd-page-nav .wd-page-nav-icon { display: none; }
.single-post .wd-page-nav .back-to-archive {
	align-self: center;
	width: 52px;
	height: 52px;
	border: 1px solid #E4E8F1;
	border-radius: 50%;
	background: #fff;
}

/* İlgili yazılar */
.single-post .related-posts-slider {
	max-width: var(--spw-yazi-genis);
	margin: 72px auto 0;
}
.single-post .related-posts-slider .slider-title,
.single-post .related-posts-slider .wd-el-title { text-align: center; }
.single-post .related-posts-slider .wd-post-img { aspect-ratio: 16 / 10; overflow: hidden; }
.single-post .related-posts-slider .wd-post-img img { width: 100%; height: 100%; object-fit: cover; }

/* Yorum formu: kart */
.single-post .comments-area {
	max-width: var(--spw-yazi-metin);
	margin: 64px auto 0;
	padding: 34px 36px 30px;
	border: 1px solid #E4E8F1;
	border-radius: 20px;
	background: #fff;
}
.single-post .comments-area .comment-reply-title { margin-top: 0; font-size: 26px; }
.single-post .comments-area .comment-notes { font-size: 14px; color: #6B7386; }
.single-post .comments-area textarea { min-height: 140px; border-radius: 14px; }

@media (max-width: 767px) {
	.post-single-page .wd-post-image { border-radius: 16px; margin-top: 24px; }
	.post-single-page .wd-post-image img { aspect-ratio: 16 / 10; }
	.post-single-page > .wd-entry-content { font-size: 17px; }
	.post-single-page > .wd-entry-content > p:first-child { font-size: 19px; }
	.single-post .wd-page-nav { grid-template-columns: 1fr 1fr; }
	.single-post .wd-page-nav .back-to-archive { display: none; }
	.single-post .comments-area { padding: 24px 20px; }
}
/* Woodmart gezinmeye `.wd-page-nav` 2px üst/alt çizgi ve düğmelere `max-width:50%;
   flex:0 1 50%` veriyor; ızgara içinde düğme sütunun yarısında kalıyordu. */
.single-post .wd-page-nav.wd-design-1 { border-top: 0 !important; border-bottom: 0 !important; }
.single-post .wd-page-nav .wd-page-nav-btn { max-width: none !important; flex: none !important; width: 100%; }
/* Woodmart mobilde gezinme kartlarındaki yazı başlığını gizliyor; kartlarda yalnız
   "NEWER / OLDER" kalıyordu. */
@media (max-width: 767px) {
	.single-post .wd-page-nav .wd-entities-title { display: block !important; font-size: 14px; }
	.single-post .wd-page-nav .wd-page-nav-btn > a { padding: 14px 16px; }
}

/* Blog sayfa başlığı ("Blog" + breadcrumb) ortada — yalnız blog arşivi, yazı ve etiket
   sayfalarında. Woodmart'ın genel başlık ayarı mağazayı da ortalardı. */
.single-post .wd-page-title .container,
.blog .wd-page-title .container,
.tag .wd-page-title .container,
.category .wd-page-title .container { text-align: center; align-items: center; } /* kapsayıcı flex sütunu, çocukları sola yaslıyordu */
.single-post .wd-page-title .wd-breadcrumbs,
.blog .wd-page-title .wd-breadcrumbs,
.tag .wd-page-title .wd-breadcrumbs,
.category .wd-page-title .wd-breadcrumbs { justify-content: center; }

/* Yorumlar kapalı (functions.php): yorum sayısı balonu da kalksın. */
.wd-post-reply,
.single-post .comments-area { display: none !important; }

/* 37. Giriş / kayıt (02.10) ------------------------------------------------
   Hesap sayfası (oturum kapalı) ve header'daki yan panel. Woodmart'ın "login tabs"
   düzeni korunuyor — sağ paneldeki buton giriş ↔ kayıt formunu Woodmart'ın kendi JS'iyle
   değiştiriyor, biz yalnız görünümü veriyoruz. Metinler data/hesap_sayfasi.php. */
:root {
	--spw-form-kenar: #D7DCE8;
	--spw-form-zemin: #FBFAF8;
	--spw-mavi: #1C48D8;
}

/* Sayfa başlığı ortada (blog ile aynı) */
.woocommerce-account:not(.logged-in) .wd-page-title .container { text-align: center; align-items: center; }
.woocommerce-account:not(.logged-in) .wd-page-title .wd-breadcrumbs { justify-content: center; }

.wd-registration-page {
	max-width: 1080px;
	margin: 8px auto 40px;
}
.wd-registration-page > .wd-grid-f-col {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: stretch;
	margin: 0 !important; /* Woodmart ızgarası -15px kenar boşluğu veriyor, mobilde kartlar ekrana yapışıyordu */
}
.wd-registration-page .wd-col { width: auto !important; max-width: none !important; margin: 0 !important; }

/* Form kartı */
.wd-registration-page .col-login,
.wd-registration-page .col-register {
	padding: 44px 44px 38px !important;
	border: 1px solid #E4E8F1 !important;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 18px 44px rgba(22, 24, 28, .07);
}
.wd-registration-page .wd-login-title {
	margin: 0 0 22px;
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: 36px;
	line-height: 1.1;
	text-align: left;
	color: #16181C;
}
.wd-registration-page .col-login .wd-login-title::before,
.wd-registration-page .col-register .wd-login-title::before {
	display: block;
	margin-bottom: 10px;
	font-family: Archivo, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--spw-mavi);
}
.wd-registration-page .col-login .wd-login-title::before { content: "Welcome back"; }
.wd-registration-page .col-register .wd-login-title::before { content: "Join us"; }

/* Alanlar (sayfa + yan panel) */
.wd-registration-page .form-row label,
.login-form-side .form-row label {
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 14px;
	color: #16181C;
}
.wd-registration-page .input-text,
.login-form-side .input-text {
	height: 50px;
	padding: 0 18px;
	border: 1.5px solid var(--spw-form-kenar);
	border-radius: 12px;
	background: var(--spw-form-zemin);
	font-size: 15px;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.wd-registration-page .input-text:focus,
.login-form-side .input-text:focus {
	border-color: var(--spw-mavi);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(28, 72, 216, .12);
	outline: none;
}
.wd-registration-page .woocommerce-form-login__submit,
.wd-registration-page .woocommerce-form-register__submit,
.login-form-side .woocommerce-form-login__submit {
	width: 100%;
	min-height: 52px;
	margin-top: 6px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: 0 10px 22px rgba(28, 72, 216, .22);
}
.wd-registration-page .login-form-footer,
.login-form-side .login-form-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 16px;
	font-size: 14px;
}
.wd-registration-page .lost_password a,
.login-form-side .lost_password a { color: var(--spw-mavi); font-weight: 600; }
.wd-registration-page .woocommerce-privacy-policy-text { font-size: 13px; color: #6B7386; }

/* Geçiş paneli: fotoğraflı koyu kart */
.wd-registration-page .col-register-text {
	position: relative;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 48px 46px !important;
	border: 0 !important;
	border-radius: 24px;
	overflow: hidden;
	text-align: left;
	color: #fff;
	background:
		linear-gradient(165deg, rgba(15, 18, 25, .50) 0%, rgba(15, 18, 25, .86) 62%, rgba(15, 18, 25, .94) 100%),
		url('/wp-content/uploads/2026/09/spw-argyle-stores-1024x576.webp') center / cover no-repeat;
}
.wd-registration-page .col-register-text .wd-login-divider { display: none !important; }
.wd-registration-page .col-register-text .wd-login-title { color: #fff; font-size: 34px; }
.wd-registration-page .col-register-text .registration-info,
.wd-registration-page .col-register-text .login-info { text-align: left; }
.wd-registration-page .col-register-text p {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .86);
}
.spw-hesap-faydalar { margin: 20px 0 6px; padding: 0; list-style: none; }
.spw-hesap-faydalar li {
	position: relative;
	margin: 12px 0;
	padding-left: 34px;
	font-weight: 500;
	line-height: 1.45;
	color: #fff;
}
.spw-hesap-faydalar li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--spw-mavi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.wd-registration-page .col-register-text .wd-switch-to-register {
	margin-top: 26px;
	min-height: 50px;
	padding: 0 30px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--spw-mavi);
	font-weight: 700;
	font-size: 15px;
	text-transform: none;
	transition: background-color .2s ease, transform .2s ease;
}
.wd-registration-page .col-register-text .wd-switch-to-register:hover { background: #EEF2FD; transform: translateY(-1px); }

@media (max-width: 767px) {
	.wd-registration-page > .wd-grid-f-col { grid-template-columns: 1fr; gap: 18px; }
	.wd-registration-page .col-login,
	.wd-registration-page .col-register { padding: 30px 22px 26px !important; }
	.wd-registration-page .col-register-text { padding: 32px 24px !important; }
	.wd-registration-page .wd-login-title { font-size: 30px; }
}

/* Header'daki yan panel */
/* Woodmart genişliği --wd-side-hidden-w değişkeniyle veriyor (kapalı konum da ona göre). */
.login-form-side.wd-side-hidden { --wd-side-hidden-w: 400px; }
.login-form-side .wd-heading { padding: 22px 26px; border-bottom: 1px solid #E4E8F1; }
.login-form-side .wd-heading .title {
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: 28px;
	text-transform: none;
	color: #16181C;
}
.login-form-side .woocommerce-form-login { padding: 26px 26px 6px; }
.login-form-side .create-account-question {
	margin: 18px 26px 26px;
	padding: 26px 22px;
	border: 0;
	border-radius: 18px;
	background: #F5F1EB;
	text-align: center;
}
.login-form-side .create-account-question::before { display: none !important; }
.login-form-side .create-account-question p {
	margin-bottom: 4px;
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: #16181C;
}
.login-form-side .create-account-question p::after {
	content: "Track orders, save addresses and keep a wishlist.";
	display: block;
	margin-top: 4px;
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #6B7386;
}
.login-form-side .create-account-button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 14px;
	padding: 0 24px;
	border: 1.5px solid var(--spw-mavi);
	border-radius: 999px;
	background: transparent;
	color: var(--spw-mavi);
	font-weight: 700;
	text-transform: none;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.login-form-side .create-account-button:hover { background: var(--spw-mavi); color: #fff; }

/* 38. Rehber kartları — kategori, ürün, ana sayfa (functions.php spw_rehber_kartlari) ------
   Tek bileşen, üç yerde aynı görünüm. Iç linkleme için (03.10). */
.spw-rehberler { margin: 64px 0 28px; }
.spw-rehberler-bas { margin-bottom: 28px; text-align: center; }
.spw-rehberler-etiket {
	display: inline-block;
	margin-bottom: 10px;
	padding: 5px 13px;
	border-radius: 999px;
	background: #EEF2FD;
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #1C48D8;
}
.spw-rehberler-baslik {
	margin: 0;
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.1;
	color: #16181C;
}
.spw-rehberler-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}
.spw-rehber-kart {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #E4E8F1;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 8px 22px rgba(22, 24, 28, .05);
	text-decoration: none !important;
	transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease;
}
.spw-rehber-gorsel { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #F5F1EB; }
.spw-rehber-gorsel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.spw-rehber-govde { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.spw-rehber-baslik { font-family: Archivo, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3; color: #16181C; }
.spw-rehber-ozet { font-size: 14.5px; line-height: 1.6; color: #6B7386; }
.spw-rehber-devam { margin-top: auto; padding-top: 6px; font-weight: 600; font-size: 14px; color: #1C48D8; }
.spw-rehber-devam span { display: inline-block; transition: transform .25s ease; }
.spw-rehber-kart:hover { border-color: #C9D5FA; box-shadow: 0 16px 34px rgba(28, 72, 216, .10); }
@media (prefers-reduced-motion: no-preference) {
	.spw-rehber-kart:hover { transform: translateY(-4px); }
	.spw-rehber-kart:hover .spw-rehber-gorsel img { transform: scale(1.05); }
	.spw-rehber-kart:hover .spw-rehber-devam span { transform: translateX(4px); }
}
.spw-rehberler-tumu { margin: 26px 0 0; text-align: center; }
.spw-rehberler-tumu a { font-weight: 700; color: #1C48D8; text-decoration: none; }
.spw-rehberler-tumu a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Ana sayfa bölümünde Elementor zaten boşluk veriyor */
.elementor-widget-shortcode .spw-rehberler { margin: 0; }
/* Ana sayfada kartlar Elementor içinde: `.elementor img { height:auto }` aynı öncelikte ve
   sonra yüklendiği için görsel kutuyu doldurmuyordu, kart yükseklikleri farklılaşıyordu. */
.spw-rehber-kart .spw-rehber-gorsel img { height: 100% !important; max-width: none; }

/* 39. Ana sayfa animasyonları (04.10) ------------------------------------------
   Hepsi CSS + functions.php'deki küçük script; ek kütüphane yok. Gizleyen/başlangıç
   durumları `no-preference` ve `.spw-reveal:not(.spw-in)` altında: hareket azaltma açıksa
   ya da JS çalışmazsa her şey son hâliyle görünür. İçerik Elementor'dan düzenlenebilir;
   etkiler bölüm kimliklerine (data-id) bağlı, metin/görsel değişince aynen uygulanır. */

/* 39a. Hero vurgusu — başlıktaki <u>…</u> kısmının altına fırça darbesi boyanıyor.
   Müşteri Elementor'da başka kelimeleri <u> ile sararsa vurgu oraya taşınır. */
body.home .elementor-top-section:first-child h1 u {
	text-decoration: none;
	padding: 0 .06em .02em;
	margin: 0 -.06em;
	background: no-repeat 0 84% / 100% .42em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none' fill='%233D6BFF'%3E%3Cpath d='M7 8Q46 3 92 6T190 5T293 7Q300 14 294 21Q248 27 190 24T92 26T9 23Q1 15 7 8Z'/%3E%3Cpath d='M20 2Q90 0 150 2T284 3L283 5Q220 4 150 4T21 4Z' opacity='.55'/%3E%3Cpath d='M30 27Q100 29 170 27T280 26L279 28Q210 30 170 29T31 29Z' opacity='.5'/%3E%3C/svg%3E");
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
	body.home .elementor-top-section:first-child h1 u { animation: spwFirca .9s cubic-bezier(.65, .05, .36, 1) .75s both; }
}
@keyframes spwFirca { from { background-size: 0% .42em; } to { background-size: 100% .42em; } }

/* 39b. Fırça kenarlı bantlar — koyu "Mix your own colour" bandı ve beyaz hesaplayıcı
   kutusunun alt/üst kenarı fırçayla boyanmış gibi (maske; komşu bölümlerden ve aradaki
   boşluklardan bağımsız). İlk sürümde bant ekrana girince clip-path ile soldan sağa açılıyordu;
   bant ~1000px olduğu için içerik eşiği gelene kadar alan boş kalıyordu → kaldırıldı (04.10).
   Dar ekranda desen sıkışıp dişli görünmesin diye en az 960px genişlikte, yan yana tekrarlı
   (SVG'nin iki ucu aynı yükseklikte, dikişsiz). */
.elementor-top-section[data-id="spwkarisimsec"],
.elementor-top-section[data-id="spwhesapsec"] {
	--spw-kenar-h: 26px;
	-webkit-mask:
		var(--spw-kenar-ust) 0 0 / max(100%, 960px) var(--spw-kenar-h) repeat-x,
		linear-gradient(#000, #000) 0 calc(var(--spw-kenar-h) - 1px) / 100% calc(100% - 2 * var(--spw-kenar-h) + 2px) no-repeat,
		var(--spw-kenar-alt) 0 100% / max(100%, 960px) var(--spw-kenar-h) repeat-x;
	mask:
		var(--spw-kenar-ust) 0 0 / max(100%, 960px) var(--spw-kenar-h) repeat-x,
		linear-gradient(#000, #000) 0 calc(var(--spw-kenar-h) - 1px) / 100% calc(100% - 2 * var(--spw-kenar-h) + 2px) no-repeat,
		var(--spw-kenar-alt) 0 100% / max(100%, 960px) var(--spw-kenar-h) repeat-x;
}
@media (max-width: 768px) {
	.elementor-top-section[data-id="spwkarisimsec"],
	.elementor-top-section[data-id="spwhesapsec"] { --spw-kenar-h: 16px; }
}

/* 39c. Renk ailesi kartları — imleç karta nereden girerse ailenin ortalama rengi oradan
   daire olarak yayılıyor (renk ve konum functions.php'deki scriptten). Koyu ailelerde
   yazı beyaza dönüyor. */
.spw-aile-kart { position: relative; overflow: hidden; isolation: isolate; }
.spw-aile-kart::before {
	content: "";
	position: absolute;
	left: var(--spw-x, 50%); top: var(--spw-y, 50%);
	width: 24px; height: 24px;
	margin: -12px 0 0 -12px;
	border-radius: 50%;
	background: var(--spw-aile);
	transform: scale(0);
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
	z-index: -1;
	pointer-events: none;
}
.spw-aile-kart .info-box-title,
.spw-aile-kart .info-box-inner,
.spw-aile-kart .info-box-inner * { transition: color .3s ease .05s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.spw-aile-kart:hover::before { transform: scale(40); }
	.spw-aile-kart.is-koyu:hover .info-box-title,
	.spw-aile-kart.is-koyu:hover .info-box-inner,
	.spw-aile-kart.is-koyu:hover .info-box-inner * { color: #fff; }
	/* Açık ailelerde (okr, beyaz) gri alt metin zeminde soluyordu → koyulaşıyor. */
	.spw-aile-kart:not(.is-koyu):hover .info-box-title { color: #14161C; }
	.spw-aile-kart:not(.is-koyu):hover .info-box-inner,
	.spw-aile-kart:not(.is-koyu):hover .info-box-inner * { color: #2A2F3A; }
}

/* 39d. Ürün kartı — üzerine gelince kartın altından ürünün kendi renginde şerit doluyor
   (renk `spw-renk-<slug>` sınıfından, başlıktaki #spw-renkler bloğu). Renksiz ürünlerde marka mavisi. */
.wd-product .wd-product-wrapper::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 4px;
	background: var(--spw-renk, #1C48D8);
	box-shadow: 0 -1px 0 rgba(16, 26, 60, .08); /* beyaz/krem renkler beyaz kartta kaybolmasın */
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
	pointer-events: none;
	z-index: 2;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wd-product:hover .wd-product-wrapper::after { transform: scaleX(1); }
}

/* 39e. Sayı şeridi — sayarken genişlik zıplamasın. */
.spw-sayan { font-variant-numeric: tabular-nums; }

/* 40. Yayın öncesi mobil düzeltmeler (05.10) ---------------------------------------------
   375px'de 24 sayfa ölçüldü: yatay kaydırma yok, kırık görsel yok. Düzeltilenler:
   40a. Footer tam genişlik zemini satır içi stilde `margin:0 -100vw; padding:0 100vw` ile
        yapılmıştı; öğe görünür alanın iki yanına 360px taşıyordu (html/body overflow-x:hidden
        kırpıyordu ama iOS Safari'de yana kaydırmaya dönüşebiliyor). Gölge + kırpma: düzen
        genişliği değişmiyor, görünüm aynı. HTML bloğu müşteri düzenlemesine açık olduğu için
        satır içi stile dokunmadan, burada eziliyor. */
.spw-footer {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-shadow: 0 0 0 100vmax #0F1219;
	clip-path: inset(0 -100vmax);
}
/* 40b. Dokunma alanları — telefon parmağı için en az ~40px (Google'ın önerisi 48px civarı,
   aralıklarla birlikte). Görünür boyut değişmiyor; dolgu tıklanabilir alanı büyütüyor. */
@media (max-width: 768px) {
	.spw-footer ul li { margin-bottom: 2px !important; }
	.spw-footer ul li a { display: inline-block; padding: 7px 0; }
	.wd-breadcrumbs a, .woocommerce-breadcrumb a { padding: 9px 0; }
	.single-product .quantity input[type="button"],
	.single-product .quantity .minus,
	.single-product .quantity .plus { min-width: 40px; }
	.single-product .quantity input.qty { min-width: 44px; }
	.wd-product-nav-btn { width: 40px; height: 40px; }
	.single-product .wd-wishlist-btn a,
	.single-product .wd-compare-btn a { padding-top: 10px; padding-bottom: 10px; }
	/* "Sold out" rozeti 10px'di. */
	.product-label { font-size: 11px; }
}
/* 40c. "One tin" etiketleri iç içe iki hap görünüyordu: Woodmart yapısı li > span.list-content > a,
   §17 hem span'e hem a'ya hap stili veriyordu. Bağlantılı satırda span sıfırlanıyor
   (bağlantısız satır eklenirse span hap olarak kalır). */
.elementor-element-spwonetinlist li > span:has(> a) {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
/* 40d. Sayı şeridi telefonda alt alta: bir maddenin açıklaması sonrakinin rakamına yapışıyordu. */
@media (max-width: 767px) {
	body.home .elementor-element-5ae9292 > .elementor-container > .elementor-column + .elementor-column .wd-info-box {
		margin-top: 22px;
		padding-top: 24px;
		border-top: 1px solid #E6E9F0;
	}
}
/* 40e. "The rest of the range" sekmeleri telefonda karusel oklarının altına giriyordu
   ("STRIPPERS" kesik). Sekmeler zaten kaydırılabilir, karusel parmakla kayıyor → oklar gizli. */
@media (max-width: 768px) {
	.wd-products-tabs .wd-nav-arrows,
	.wd-products-tabs .wd-arrow-inner { display: none !important; }
	.wd-products-tabs .wd-tabs-header { padding-right: 0; }
}
/* 40f. İletişim: bilgi sütunu (adres/telefon/e-posta/saat) negatif boşluklu bölümde iç boşluksuzdu;
   telefonda ikonlar sayfa başlığından 10px solda (5px'e karşı 15px) kalıyordu. */
@media (max-width: 767px) {
	.elementor-widget-wrap:has(> .elementor-element-spwci1) { padding-left: 10px !important; padding-right: 10px !important; }
}
/* 40g. Woodmart'ın otomatik büyük harf yapması: seçili boy "200 Ml", mobil menüde "IQuip". */
.variations .wd-attr-selected { text-transform: none; }
.wd-nav-mobile .woodmart-nav-link,
.wd-nav-mobile .nav-link-text { text-transform: none; }
/* 40h. Seçili boy düğmesi zaten mavi dolgulu (§6n); temanın altına çizdiği 2px koyu çizgi fazlaydı. */
.wd-swatches-product .wd-swatch.wd-text::after { display: none; }
/* 40i. Tablet (768–1279px): §19d dört sütunlu ızgaraları 2×2 yapıyor, ama üç sütunlu satırlarda
   ("What are you painting?", "Shop the range") her satırdan bir kart artık kalıyordu (2+1, 2+1).
   Üçlü satırlar üçlü kalıyor. */
@media (min-width: 768px) and (max-width: 1279px) {
	.elementor-inner-section > .elementor-container > .elementor-column.elementor-col-33 { width: 33.333%; }
}
/* 40j. Sayı şeridi ve hero ölçüleri tablette iki satıra bölünüyordu ("15–20 / m²", "VOC <5 / mg/L"). */
@media (min-width: 768px) and (max-width: 1023px) {
	body.home .elementor-element-5ae9292 .wd-info-box .info-box-title { font-size: 30px; white-space: nowrap; }
	body.home .elementor-element-5ae9292 > .elementor-container > .elementor-column + .elementor-column .wd-info-box { padding-left: 16px; }
	body.home .elementor-element-b88fc5d .wd-info-box .info-box-title { font-size: 18px; white-space: nowrap; }
}
/* 40k. 768–1023px: "What are you painting?" üçlü satırda ikon + metin yan yana sığmıyordu
   ("Weatherboard" taşıyordu) → bu aralıkta ikon üstte, metin altta ortalı. */
@media (min-width: 768px) and (max-width: 1023px) {
	.elementor-element-spwissec .wd-info-box.box-icon-align-left { flex-direction: column; align-items: center; text-align: center; }
	.elementor-element-spwissec .wd-info-box.box-icon-align-left .box-icon-wrapper { margin: 0 0 12px; }
	.elementor-element-spwissec .wd-info-box.box-icon-align-left .info-box-content { text-align: center; }
}
/* 40l. Footer e-postası dar sütunda kelime ortasından bölünüyordu ("…wareho / use.com.au");
   [spw_eposta] artık @ ve alan adı uzantısından önce <wbr> koyuyor (inc/yonetim-paneli.php). */

/* 41. Eski müşteri karşılama sayfası /welcome/ ve giriş formu notu (05.10, inc/davet.php) ------
   Giriş/kayıt kartlarıyla (§37) aynı dil: beyaz kart, mavi küçük etiket, Anton başlık. */
.spw-hosgeldin { display: flex; justify-content: center; padding: 10px 0 40px; }
.spw-hg-kart {
	width: 100%;
	max-width: 520px;
	padding: 44px 44px 38px;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 18px 44px rgba(22, 24, 28, .07);
}
.spw-hg-kart > .spw-hg-etiket {
	margin: 0 0 10px;
	font-family: Archivo, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #1C48D8;
}
.spw-hg-kart h2 { margin: 0 0 14px; font-family: Anton, sans-serif; font-weight: 400; font-size: 34px; line-height: 1.1; }
.spw-hg-kart > p { color: #4A5164; line-height: 1.65; }
.spw-hg-form { margin-top: 22px; }
.spw-hg-form label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; color: #16181C; }
.spw-hg-form input[type="email"],
.spw-hg-form input[type="password"] {
	width: 100%;
	height: 50px;
	padding: 0 18px;
	border: 1.5px solid var(--spw-form-kenar, #D7DCE8);
	border-radius: 12px;
	background: var(--spw-form-zemin, #F7F8FB);
	font-size: 16px; /* iOS'ta odaklanınca yakınlaştırmasın */
}
.spw-hg-form input:focus { border-color: #1C48D8; background: #fff; box-shadow: 0 0 0 4px rgba(28, 72, 216, .12); outline: none; }
.spw-hg-form input[readonly] { color: #4A5164; background: #EEF0F5; }
.spw-hg-form small { display: block; margin-top: 6px; color: #6B7286; font-size: 13px; }
.spw-hg-form button[type="submit"],
.spw-hosgeldin a.btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%; min-height: 52px; padding: 0 24px;
	border: 0; border-radius: 999px;
	background: #1C48D8; color: #fff;
	font-family: Archivo, sans-serif; font-weight: 700; font-size: 15px;
	text-transform: none; letter-spacing: 0; cursor: pointer;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.spw-hg-form button[type="submit"]:hover,
.spw-hosgeldin a.btn:hover { background: #153AB4; color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(28, 72, 216, .25); }
.spw-hg-hata, .spw-hg-tamam { padding: 12px 14px; border-radius: 10px; font-size: 14.5px; line-height: 1.55; }
.spw-hg-hata { background: #FDECEC; color: #8A1C1C; }
.spw-hg-tamam { background: #E8F4EC; color: #1A5C33; }
.spw-hg-tuzak { position: absolute; left: -9999px; }
.spw-hg-alt { margin: 18px 0 0; font-size: 14px; }
.spw-eski-musteri { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; background: #F3F5FA; font-size: 14px; line-height: 1.55; color: #4A5164; }
.spw-eski-musteri a { color: #1C48D8; font-weight: 600; }
@media (max-width: 767px) {
	.spw-hg-kart { padding: 30px 22px 26px; border-radius: 18px; }
	.spw-hg-kart h2 { font-size: 28px; }
}