/*
Theme Name:        Mesamy Mobilya
Author:            Mesamy
Description:       Mobilya ve ev dekorasyonu perakendesi icin gorsel kategori hub (Visual Subcategory Tiles) mimarisine sahip, Core Web Vitals ve teknik SEO odakli WooCommerce temasi. Sifir JS framework, tek stylesheet, native term meta ile yonetilen kategori inis sayfalari, JSON-LD (CollectionPage / ItemList / BreadcrumbList / FAQPage) ciktisi.
Version:           1.7.0
Requires at least: 6.5
Tested up to:      6.8
Requires PHP:      8.0
WC requires at least: 8.0
WC tested up to:   9.6
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       mesamy
Domain Path:       /languages
Tags:              e-commerce, woocommerce, custom-logo, custom-menu, translation-ready, accessibility-ready
*/

/* ==========================================================================
   00. DESIGN TOKENS
   Tek kaynak. Marka degisiminde yalnizca bu blok duzenlenir.
   ========================================================================== */
:root {
	/* -- Renk: sicak, canli, yuksek kontrastli marka paleti --
	   Notr zemin + tek bir guclu vurgu (terrakota) + ikincil derinlik (yesil).
	   Vurgu rengi yalnizca eyleme cagiran ogelerde kullanilir; boylece canli
	   kalirken gurultu yapmaz. */
	--ms-bg: #ffffff;
	--ms-shell: #f5f8fc;
	--ms-surface: #eef3fa;
	--ms-surface-2: #dde7f4;
	--ms-line: #e1e8f2;
	--ms-line-strong: #a9bad6;
	--ms-ink: #0d1b33;
	--ms-ink-2: #2b3a55;
	--ms-muted: #5b6b82;

	--ms-accent: #012c8a;
	--ms-accent-ink: #011f63;
	--ms-accent-soft: #e6ecf7;
	--ms-accent-2: #6083c0;
	--ms-accent-2-soft: #e3f3ec;
	/* Uzerine beyaz metin gelen yerlerde kullanilir: #6083c0 ile beyaz
	   3.85:1 kalir, kucuk metin icin AA esigi 4.5:1. */
	--ms-accent-2-ink: #3f619c;
	--ms-gold: #a9d8c5;

	/* Vitrin duzeni: koyu espresso zemin + altin vurgu */
	--ms-dark: #00143f;
	--ms-dark-2: #011f5c;
	--ms-cream: #f7f9fc;
	--ms-cream-2: #edf2f9;
	--ms-cream-3: #dfe7f2;

	--ms-sale: #c2261c;
	--ms-ok: #1e7a4f;
	--ms-inverse: #ffffff;

	/* -- Tipografi --
	   Self-hosted variable font eklenirse:
	   --ms-font-display: "MesamyDisplay", var(--ms-font-sans); */
	--ms-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
	/* Vitrin duzenindeki baslik yigini. Sistem serifleri kullanilir: sifir ag
	   istegi, sifir render engeli. Fraunces gibi bir degisken font kendi
	   sunucunuzdan servis edilecekse yalnizca bu satir degistirilir. */
	--ms-font-display: var(--ms-font-sans);
	--ms-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

	--ms-fs-2xs: 0.6875rem;
	--ms-fs-xs: 0.75rem;
	--ms-fs-sm: 0.8125rem;
	--ms-fs-base: 0.9375rem;
	--ms-fs-md: 1.0625rem;
	--ms-fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
	--ms-fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
	--ms-fs-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
	--ms-fs-h1: clamp(1.875rem, 1.35rem + 2.3vw, 3.25rem);

	--ms-lh-tight: 1.1;
	--ms-lh-snug: 1.3;
	--ms-lh-base: 1.65;
	--ms-track-tight: -0.022em;
	--ms-track-wide: 0.08em;

	/* -- Uzamsal olcek (4px tabanli) -- */
	--ms-1: 0.25rem;
	--ms-2: 0.5rem;
	--ms-3: 0.75rem;
	--ms-4: 1rem;
	--ms-5: 1.5rem;
	--ms-6: 2rem;
	--ms-7: 2.5rem;
	--ms-8: 3.5rem;
	--ms-9: 5rem;
	--ms-10: 7rem;

	/* -- Layout -- */
	--ms-container: 1480px;
	--ms-container-text: 74ch;
	--ms-gutter: clamp(1rem, 3.5vw, 3rem);
	--ms-header-h: 64px;

	/* -- Yuzey -- */
	--ms-r-xs: 2px;
	--ms-r-sm: 4px;
	--ms-r: 8px;
	--ms-r-lg: 14px;
	--ms-r-pill: 999px;
	--ms-shadow-sm: 0 1px 2px rgba(1, 20, 63, 0.08);
	--ms-shadow: 0 10px 30px -12px rgba(1, 20, 63, 0.20);
	--ms-shadow-lg: 0 28px 64px -24px rgba(1, 20, 63, 0.28);
	--ms-shadow-accent: 0 12px 28px -14px rgba(1, 44, 138, 0.55);

	/* -- Hareket --
	   ease-out-expo hissi veren egri; kisa mesafelerde bile "yumusak duran"
	   bir bitis uretir. Sureler kademeli: mikro etkilesim / gecis / gorsel. */
	--ms-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ms-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
	--ms-dur-fast: 180ms;
	--ms-dur: 320ms;
	--ms-dur-slow: 620ms;

	/* -- Gorsel oranlari (CLS kilidi) -- */
	--ms-ratio-tile: 4 / 5;
	--ms-ratio-card: 4 / 5;
	--ms-ratio-hero: 21 / 9;
}

@media (min-width: 1024px) {
	:root {
		--ms-header-h: 76px;
	}
}

/* ==========================================================================
   01. RESET / BASE
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ms-header-h) + var(--ms-4));
}

body {
	margin: 0;
	background: var(--ms-bg);
	color: var(--ms-ink);
	font-family: var(--ms-font-sans);
	font-size: var(--ms-fs-base);
	line-height: var(--ms-lh-base);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

body.ms-no-scroll {
	overflow: hidden;
}

img,
picture,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

h1,
h2,
h3,
h4 {
	font-family: var(--ms-font-display);
	font-weight: 600;
	line-height: var(--ms-lh-tight);
	letter-spacing: var(--ms-track-tight);
	margin: 0 0 var(--ms-3);
	color: var(--ms-ink);
	text-wrap: balance;
}

h1 { font-size: var(--ms-fs-h1); }
h2 { font-size: var(--ms-fs-h2); }
h3 { font-size: var(--ms-fs-h3); }
h4 { font-size: var(--ms-fs-lg); }

p { margin: 0 0 var(--ms-4); }

p:last-child,
ul:last-child,
ol:last-child { margin-bottom: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--ms-accent);
	outline-offset: 3px;
	border-radius: var(--ms-r-xs);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ms-skip {
	position: absolute;
	left: var(--ms-4);
	top: -100px;
	z-index: 999;
	background: var(--ms-ink);
	color: var(--ms-inverse);
	padding: var(--ms-3) var(--ms-4);
	border-radius: var(--ms-r);
	transition: top 160ms var(--ms-ease);
}

.ms-skip:focus {
	top: var(--ms-4);
}

/* ==========================================================================
   02. LAYOUT
   ========================================================================== */
.ms-container {
	width: 100%;
	max-width: var(--ms-container);
	margin-inline: auto;
	padding-inline: var(--ms-gutter);
}

.ms-container--narrow {
	max-width: 960px;
}

.ms-section {
	padding-block: var(--ms-7);
}

.ms-section--tight { padding-block: var(--ms-5); }
.ms-section--loose { padding-block: var(--ms-8); }

/* --- Blok tabanli bolumler ---
   Anasayfa bolumleri blok editorunden dizilir (inc/blocks.php). Zemin ve
   dikey bosluk her blokta ayni iki secenektir; sinif uretimi PHP tarafinda
   tek yerde durdugu icin burada da tek kural kumesi yeter.                 */
.ms-block {
	padding-block: var(--ms-7);
}

.ms-block--white { background: #fff; }
.ms-block--soft  { background: var(--ms-shell); }

.ms-block--dark {
	background: var(--ms-dark);
	color: #fff;
}

.ms-block--dark h2,
.ms-block--dark h3 { color: #fff; }

.ms-block--dark p { color: rgba(255, 255, 255, 0.76); }

/* Iki sinif kullanilir cunku bant siniflari (.ms-cta gibi) dosyada daha
   sonra gelir ve tek sinifli bir kural onlara yenik duserdi; o zaman blok
   ayarindaki dikey bosluk secimi sessizce etkisiz kalirdi. */
.ms-block.ms-block--tight  { padding-block: var(--ms-5); }
.ms-block.ms-block--normal { padding-block: var(--ms-7); }
.ms-block.ms-block--loose  { padding-block: var(--ms-8); }

/* Kendi zeminini ve bosluguyla gelen bantlar (guven bandi, teklif bandi)
   sarmalayicidan bosluk almaz; yoksa bant iki kat paylidir gorunur. Zemini
   burada sifirlamak ise bandin kendi koyu zeminini de silerdi: bant sinifi
   (.ms-cta, .ms-usp) dosyada daha sonra geldigi icin zemini zaten o belirler. */
.ms-block.ms-block--bare {
	padding-block: 0;
}

/* Bolum icindeki ust baslik blogu kendi alt bosluguyla gelir; blok zaten
   dikey bosluk verdigi icin ikisi ust uste binmesin. */
.ms-block .ms-home-intro { margin-bottom: 0; }

.ms-block .ms-seo {
	margin-top: 0;
	border-top: 0;
	padding-top: 0;
}

/* Yalnizca editorde gorunur: bolum neden bos basmiyor. */
.ms-block-notice {
	margin: 0;
	padding: var(--ms-4) var(--ms-5);
	border: 1px dashed var(--ms-accent-2);
	border-radius: var(--ms-r-sm);
	background: var(--ms-accent-soft);
	color: var(--ms-accent-ink);
	font-size: var(--ms-fs-sm);
}

.ms-shell { background: var(--ms-shell); }

.ms-eyebrow {
	display: inline-block;
	font-size: var(--ms-fs-2xs);
	font-weight: 600;
	letter-spacing: var(--ms-track-wide);
	text-transform: uppercase;
	color: var(--ms-muted);
	margin-bottom: var(--ms-2);
}

.ms-lede {
	font-size: var(--ms-fs-md);
	color: var(--ms-ink-2);
	max-width: 62ch;
	line-height: 1.55;
}

.ms-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ms-4);
	margin-bottom: var(--ms-5);
}

/* ==========================================================================
   03. BUTONLAR
   ========================================================================== */
.ms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ms-2);
	min-height: 46px;
	padding: 0 var(--ms-5);
	border-radius: var(--ms-r-sm);
	font-size: var(--ms-fs-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
	transition: background-color var(--ms-dur) var(--ms-ease),
		color var(--ms-dur) var(--ms-ease),
		border-color var(--ms-dur) var(--ms-ease),
		box-shadow var(--ms-dur) var(--ms-ease),
		transform var(--ms-dur-fast) var(--ms-ease);
}

/* Basma hissi: kalkis kisa, geri donus yumusak. */
.ms-btn:active { transform: translateY(1px); }

.ms-btn--primary {
	background: var(--ms-accent);
	color: var(--ms-inverse);
	box-shadow: var(--ms-shadow-accent);
}

.ms-btn--primary:hover {
	background: var(--ms-accent-ink);
	transform: translateY(-2px);
	box-shadow: 0 18px 34px -16px rgba(1, 31, 99, 0.62);
}

.ms-btn--ghost {
	border-color: var(--ms-line-strong);
	color: var(--ms-ink);
	background: transparent;
}

.ms-btn--ghost:hover {
	border-color: var(--ms-accent);
	color: var(--ms-accent-ink);
	background: var(--ms-accent-soft);
}

.ms-btn--block { width: 100%; }

.ms-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--ms-2);
	font-size: var(--ms-fs-sm);
	font-weight: 600;
	color: var(--ms-ink);
	border-bottom: 1px solid var(--ms-line-strong);
	padding-bottom: 2px;
	transition: border-color var(--ms-dur) var(--ms-ease);
}

.ms-link-arrow:hover { border-color: var(--ms-ink); }

.ms-link-arrow svg {
	transition: transform var(--ms-dur) var(--ms-ease);
}

.ms-link-arrow:hover svg { transform: translateX(3px); }

/* ==========================================================================
   04. HEADER / NAVIGASYON
   ========================================================================== */
/* z-index 90: Elementor kapsayicilari ve WooCommerce bildirimleri
   varsayilan yigin sirasinda kalir, baslik her zaman onlerindedir. */
.ms-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--ms-bg);
	border-bottom: 1px solid var(--ms-line);
	transition: box-shadow var(--ms-dur) var(--ms-ease), background-color var(--ms-dur) var(--ms-ease);
}

/* --- Yonetici cubugu ---
   Oturum acikken WordPress sayfanin ustune sabit bir cubuk koyar. Yapiskan
   baslik top:0 ile viewport'un tepesine oturdugu icin cubugun altinda kalir
   ve baslik ustten kesilmis gorunur; bu yuzden cubuk yuksekligi kadar
   asagiya alinir. 782px altinda cubuk 46px olur, 600px altinda ise sabit
   degil akista durup kaydirmayla yukari cikar, orada kaydirma gerekmez. */
body.admin-bar .ms-header { top: 32px; }

/* Bolum baglantilari (Elementor menu capasi gibi) yapiskan basligin altina
   inmesin. Kaydirma dolgusu <html> uzerindedir, yonetici cubugu sinifi ise
   <body>'de; :has() ile ikisi birlestirilir. Destegi olmayan tarayicida
   kural yok sayilir, kaydirma yine calisir yalnizca baslik kadar yukari
   oturur. */
html:has(body.admin-bar) {
	scroll-padding-top: calc(var(--ms-header-h) + 32px + var(--ms-4));
}

@media screen and (max-width: 782px) {
	html:has(body.admin-bar) {
		scroll-padding-top: calc(var(--ms-header-h) + 46px + var(--ms-4));
	}
}

@media screen and (max-width: 600px) {
	html:has(body.admin-bar) {
		scroll-padding-top: calc(var(--ms-header-h) + var(--ms-4));
	}
}


@media screen and (max-width: 782px) {
	body.admin-bar .ms-header { top: 46px; }
}

@media screen and (max-width: 600px) {
	body.admin-bar .ms-header { top: 0; }
}

/* Sayfa kaydirildiginda baslik yuzeyden ayrilir. */
.ms-header--stuck {
	box-shadow: 0 6px 20px -14px rgba(1, 20, 63, 0.45);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
}

.ms-header__bar {
	display: flex;
	align-items: center;
	gap: var(--ms-4);
	min-height: var(--ms-header-h);
}

.ms-brand {
	font-family: var(--ms-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-right: auto;
	white-space: nowrap;
}

/* Logo baglantisi ve gorseli blok olmali: satir ici img taban cizgisinin
   altinda bos bir serit birakir, bu da logonun altinda beyaz bir kutu gibi
   gorunur. */
.ms-brand .custom-logo-link,
.ms-brand a {
	display: block;
}

.ms-brand img {
	display: block;
	max-height: 40px;
	width: auto;
}

.ms-nav {
	display: none;
}

@media (min-width: 1024px) {
	.ms-nav { display: block; }

	/* Solda yerlesim: menu logonun hemen yaninda, ikonlar saga itilir. */
	.ms-header__bar--left .ms-nav { margin-right: auto; }
	.ms-header__bar--left .ms-brand { margin-right: var(--ms-6); }

	/*
	 * Ortada yerlesim: uc sutunlu izgara. Yan sutunlar esit genislikte
	 * oldugu icin menu, logo ve ikon grubunun genisliginden bagimsiz olarak
	 * sayfanin tam ortasinda durur.
	 */
	.ms-header__bar--center {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--ms-4);
	}

	.ms-header__bar--center .ms-brand { margin-right: 0; }
	.ms-header__bar--center .ms-nav { justify-self: center; }
	.ms-header__bar--center .ms-header__actions { justify-self: end; }
}

.ms-nav__list {
	display: flex;
	align-items: center;
	gap: var(--ms-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-nav__list a {
	display: inline-block;
	padding-block: var(--ms-3);
	font-size: var(--ms-fs-sm);
	font-weight: 500;
	position: relative;
}

.ms-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: 2px;
	border-radius: 2px;
	background: var(--ms-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ms-dur) var(--ms-ease);
}

.ms-nav__list a:hover::after,
.ms-nav__list .current-menu-item > a::after,
.ms-nav__list .current-product_cat-ancestor > a::after { transform: scaleX(1); }

/* --- Acilir alt menu ---
   Yalnizca CSS ile calisir: :hover fare icin, :focus-within klavye icin
   yeterlidir. Masaustu disinda menu zaten cekmeceye dustugu icin dokunmatik
   bir acma/kapama dugmesine gerek kalmaz. */
.ms-nav__list > li { position: relative; }

.ms-nav__list .menu-item-has-children > a { padding-right: 14px; }

.ms-nav__list .menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--ms-dur) var(--ms-ease);
}

.ms-nav__list .menu-item-has-children:hover > a::before,
.ms-nav__list .menu-item-has-children:focus-within > a::before {
	transform: translateY(-30%) rotate(-135deg);
}

.ms-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 95;
	min-width: 15rem;
	margin: 0;
	padding: var(--ms-2);
	list-style: none;
	background: var(--ms-bg);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-r);
	box-shadow: var(--ms-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(8px);
	transition: opacity var(--ms-dur) var(--ms-ease),
		transform var(--ms-dur) var(--ms-ease),
		visibility var(--ms-dur) var(--ms-ease);
}

.ms-nav__list > li:hover > .sub-menu,
.ms-nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.ms-nav__list .sub-menu a {
	display: block;
	padding: var(--ms-2) var(--ms-3);
	font-size: var(--ms-fs-sm);
	font-weight: 500;
	white-space: nowrap;
	border-radius: var(--ms-r-sm);
	color: var(--ms-ink);
	transition: background-color var(--ms-dur) var(--ms-ease), color var(--ms-dur) var(--ms-ease);
}

.ms-nav__list .sub-menu a::after { content: none; }

.ms-nav__list .sub-menu a:hover,
.ms-nav__list .sub-menu a:focus-visible {
	background: var(--ms-accent-soft);
	color: var(--ms-accent-ink);
}

.ms-header__actions {
	display: flex;
	align-items: center;
	gap: var(--ms-1);
}

.ms-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ms-r-sm);
	color: var(--ms-ink);
	transition: background-color var(--ms-dur) var(--ms-ease);
}

.ms-iconbtn:hover {
	background: var(--ms-accent-soft);
	color: var(--ms-accent-ink);
}

.ms-iconbtn__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-accent);
	color: var(--ms-inverse);
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

@media (min-width: 1024px) {
	.ms-iconbtn--menu { display: none; }
}

/* Mobil cekmece */
.ms-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
}

.ms-drawer[data-open="true"] { visibility: visible; }

.ms-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 20, 63, 0.45);
	opacity: 0;
	transition: opacity var(--ms-dur) var(--ms-ease);
}

.ms-drawer[data-open="true"] .ms-drawer__scrim { opacity: 1; }

.ms-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: min(86vw, 380px);
	background: var(--ms-bg);
	padding: var(--ms-4);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(-100%);
	transition: transform var(--ms-dur-slow) var(--ms-ease);
	box-shadow: var(--ms-shadow-lg);
}

.ms-drawer[data-open="true"] .ms-drawer__panel { transform: none; }

.ms-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--ms-3);
}

.ms-drawer__list,
.ms-drawer__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-drawer__list a {
	display: block;
	padding: var(--ms-3) var(--ms-2);
	border-bottom: 1px solid var(--ms-line);
	font-size: var(--ms-fs-md);
	font-weight: 500;
}

.ms-drawer__list ul a {
	padding-left: var(--ms-5);
	font-size: var(--ms-fs-base);
	font-weight: 400;
	color: var(--ms-muted);
}

/* ==========================================================================
   05. BREADCRUMB
   ========================================================================== */
.ms-breadcrumb {
	padding-block: var(--ms-3);
	font-size: var(--ms-fs-xs);
	color: var(--ms-muted);
}

.ms-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ms-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-breadcrumb li {
	display: flex;
	align-items: center;
	gap: var(--ms-2);
}

.ms-breadcrumb li + li::before {
	content: "/";
	color: var(--ms-line-strong);
}

.ms-breadcrumb a:hover { color: var(--ms-ink); text-decoration: underline; }

.ms-breadcrumb [aria-current="page"] { color: var(--ms-ink-2); }

/* ==========================================================================
   06. HUB HERO
   ========================================================================== */
.ms-hub-hero {
	position: relative;
	margin-bottom: var(--ms-6);
}

.ms-hub-hero__media {
	position: relative;
	aspect-ratio: var(--ms-ratio-hero);
	min-height: 220px;
	max-height: 460px;
	overflow: hidden;
	border-radius: var(--ms-r-lg);
	background: var(--ms-surface);
}

.ms-hub-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ms-hub-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 20, 63, 0.64) 0%, rgba(0, 20, 63, 0.2) 55%, rgba(0, 20, 63, 0) 100%);
}

.ms-hub-hero__inner {
	position: relative;
	z-index: 2;
}

.ms-hub-hero--media .ms-hub-hero__inner {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	max-width: 640px;
	padding: var(--ms-5);
	color: var(--ms-inverse);
}

.ms-hub-hero--media h1,
.ms-hub-hero--media .ms-lede { color: var(--ms-inverse); }

.ms-hub-hero--media .ms-lede { opacity: 0.92; }

.ms-hub-hero--plain {
	padding-block: var(--ms-5) var(--ms-2);
}

.ms-hub-hero__count {
	font-size: var(--ms-fs-sm);
	color: var(--ms-muted);
	margin-top: var(--ms-3);
}

.ms-hub-hero--media .ms-hub-hero__count { color: rgba(255, 255, 255, 0.85); }

/* ==========================================================================
   07. GORSEL ALT KATEGORI KARTLARI (Visual Subcategory Tiles)  -- CEKIRDEK
   ========================================================================== */
.ms-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ms-4) var(--ms-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.ms-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ms-5) var(--ms-4); }
}

@media (min-width: 1024px) {
	.ms-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1400px) {
	.ms-tiles--dense { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.ms-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	transition: transform var(--ms-dur) var(--ms-ease);
}

@media (hover: hover) {
	.ms-tile:hover { transform: translateY(-6px); }
}

.ms-tile__media {
	position: relative;
	aspect-ratio: var(--ms-ratio-tile);
	overflow: hidden;
	border-radius: var(--ms-r);
	background: var(--ms-surface);
	box-shadow: var(--ms-shadow-sm);
	transition: box-shadow var(--ms-dur) var(--ms-ease);
}

.ms-tile:hover .ms-tile__media { box-shadow: var(--ms-shadow); }

/* Uzerine gelindiginde gorsele cok hafif bir marka tonu duser. */
.ms-tile__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(1, 44, 138, 0.24), rgba(1, 44, 138, 0) 55%);
	opacity: 0;
	transition: opacity var(--ms-dur) var(--ms-ease);
}

.ms-tile:hover .ms-tile__media::after { opacity: 1; }

.ms-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ms-dur-slow) var(--ms-ease-soft);
}

.ms-tile:hover .ms-tile__media img { transform: scale(1.06); }

.ms-tile__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--ms-line-strong);
}

.ms-tile__body {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ms-2);
	padding-top: var(--ms-3);
}

/* Kart basligi gercek H2 -- SEO hiyerarsisi */
.ms-tile__title {
	font-size: var(--ms-fs-base);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: var(--ms-lh-snug);
	margin: 0;
}

@media (min-width: 768px) {
	.ms-tile__title { font-size: var(--ms-fs-md); }
}

/* Tum kart tiklanabilir: tek <a>, anlamli link metni, ekstra DOM yok */
.ms-tile__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--ms-r);
}

.ms-tile__title span {
	display: inline-block;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size var(--ms-dur) var(--ms-ease);
	padding-bottom: 2px;
}

.ms-tile:hover .ms-tile__title span { background-size: 100% 1px; }

.ms-tile__title { transition: color var(--ms-dur) var(--ms-ease); }

.ms-tile:hover .ms-tile__title { color: var(--ms-accent-ink); }

.ms-tile__count {
	flex: none;
	font-size: var(--ms-fs-xs);
	color: var(--ms-muted);
	font-variant-numeric: tabular-nums;
}

.ms-tile__desc {
	margin: var(--ms-1) 0 0;
	font-size: var(--ms-fs-sm);
	color: var(--ms-muted);
	line-height: 1.5;
}

/* Hizli erisim cipsleri (3. seviye / populer giris noktalari) */
.ms-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ms-2);
	list-style: none;
	margin: 0 0 var(--ms-6);
	padding: 0;
}

.ms-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 var(--ms-4);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-r-pill);
	background: var(--ms-bg);
	font-size: var(--ms-fs-sm);
	white-space: nowrap;
	transition: border-color var(--ms-dur) var(--ms-ease),
		background-color var(--ms-dur) var(--ms-ease),
		color var(--ms-dur) var(--ms-ease),
		transform var(--ms-dur) var(--ms-ease);
}

.ms-chips a:hover {
	border-color: var(--ms-accent);
	background: var(--ms-accent-soft);
	color: var(--ms-accent-ink);
	transform: translateY(-2px);
}

/* ==========================================================================
   08. URUN GRIDI
   ========================================================================== */
.woocommerce ul.products,
ul.ms-products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ms-6) var(--ms-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.woocommerce ul.products,
	ul.ms-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ms-7) var(--ms-4); }
}

@media (min-width: 1200px) {
	.woocommerce ul.products,
	ul.ms-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	position: relative;
	display: flex;
	flex-direction: column;
}

.ms-card__media {
	position: relative;
	aspect-ratio: var(--ms-ratio-card);
	overflow: hidden;
	border-radius: var(--ms-r);
	background: var(--ms-surface);
	box-shadow: var(--ms-shadow-sm);
	transition: box-shadow var(--ms-dur) var(--ms-ease), transform var(--ms-dur) var(--ms-ease);
}

@media (hover: hover) {
	.product:hover .ms-card__media {
		box-shadow: var(--ms-shadow);
		transform: translateY(-6px);
	}
}

.ms-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--ms-dur) var(--ms-ease-soft), transform var(--ms-dur-slow) var(--ms-ease-soft);
}

@media (hover: hover) {
	.product:hover .ms-card__media img { transform: scale(1.04); }
}

.ms-card__media .ms-card__alt {
	position: absolute;
	inset: 0;
	opacity: 0;
}

@media (hover: hover) {
	.product:hover .ms-card__media .ms-card__alt { opacity: 1; }
}

.ms-card__badges {
	position: absolute;
	top: var(--ms-2);
	left: var(--ms-2);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ms-1);
	z-index: 2;
}

.ms-badge {
	display: inline-block;
	padding: 3px var(--ms-2);
	border-radius: var(--ms-r-xs);
	background: var(--ms-ink);
	color: var(--ms-inverse);
	font-size: var(--ms-fs-2xs);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.ms-badge--sale { background: var(--ms-sale); }
.ms-badge--new { background: var(--ms-accent-2-ink); }
.ms-badge--out { background: var(--ms-muted); }

.ms-card__body {
	padding-top: var(--ms-3);
	display: flex;
	flex-direction: column;
	gap: var(--ms-1);
}

.ms-card__cat {
	font-size: var(--ms-fs-2xs);
	letter-spacing: var(--ms-track-wide);
	text-transform: uppercase;
	color: var(--ms-muted);
}

.ms-card__title {
	font-size: var(--ms-fs-base);
	font-weight: 500;
	line-height: var(--ms-lh-snug);
	margin: 0;
}

.ms-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ms-card__price {
	font-size: var(--ms-fs-md);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.ms-card__price del {
	color: var(--ms-muted);
	font-weight: 400;
	font-size: var(--ms-fs-sm);
	margin-right: var(--ms-2);
}

.ms-card__price ins { text-decoration: none; color: var(--ms-sale); }

.ms-card__cta {
	margin-top: var(--ms-2);
	position: relative;
	z-index: 3;
	align-self: flex-start;
}

.ms-card__cta .button {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--ms-4);
	border: 1px solid var(--ms-line-strong);
	border-radius: var(--ms-r-sm);
	background: var(--ms-bg);
	color: var(--ms-ink);
	font-size: var(--ms-fs-sm);
	font-weight: 600;
}

.ms-card__cta .button {
	transition: background-color var(--ms-dur) var(--ms-ease),
		border-color var(--ms-dur) var(--ms-ease),
		color var(--ms-dur) var(--ms-ease);
}

.ms-card__cta .button:hover {
	background: var(--ms-accent);
	border-color: var(--ms-accent);
	color: var(--ms-inverse);
}

.ms-card__cta .added_to_cart { display: none; }

/* Sonuc sayisi + siralama */
.ms-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ms-3);
	padding-block: var(--ms-4);
	border-block: 1px solid var(--ms-line);
	margin-bottom: var(--ms-6);
}

.woocommerce .woocommerce-result-count {
	margin: 0;
	font-size: var(--ms-fs-sm);
	color: var(--ms-muted);
}

.woocommerce .woocommerce-ordering { margin: 0; }

.woocommerce .woocommerce-ordering select {
	min-height: 42px;
	padding: 0 var(--ms-6) 0 var(--ms-3);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-r-sm);
	background: var(--ms-bg);
	font-size: var(--ms-fs-sm);
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ms-2);
	justify-content: center;
	margin-top: var(--ms-7);
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-r-sm);
	padding: 0 var(--ms-3);
	font-size: var(--ms-fs-sm);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--ms-ink);
	border-color: var(--ms-ink);
	color: var(--ms-inverse);
}

/* ==========================================================================
   09. SEO METIN BLOGU + SSS
   ========================================================================== */
.ms-seo {
	border-top: 1px solid var(--ms-line);
	margin-top: var(--ms-8);
	padding-top: var(--ms-7);
}

.ms-prose {
	max-width: var(--ms-container-text);
	font-size: var(--ms-fs-base);
	color: var(--ms-ink-2);
}

.ms-prose h2,
.ms-prose h3 { margin-top: var(--ms-6); }

.ms-prose h2:first-child,
.ms-prose h3:first-child { margin-top: 0; }

.ms-prose a {
	color: var(--ms-accent-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--ms-dur) var(--ms-ease), text-decoration-thickness var(--ms-dur) var(--ms-ease);
}

.ms-prose a:hover {
	color: var(--ms-accent);
	text-decoration-thickness: 2px;
}

.ms-prose ul,
.ms-prose ol { padding-left: 1.2em; margin-bottom: var(--ms-4); }

.ms-prose li { margin-bottom: var(--ms-2); }

/* Katlanabilir metin: icerik DOM icinde her zaman tam halde kalir (crawl icin) */
.ms-readmore {
	position: relative;
	max-height: 13.5rem;
	overflow: hidden;
	transition: max-height 420ms var(--ms-ease);
}

.ms-readmore[data-expanded="true"] {
	max-height: none;
}

.ms-readmore:not([data-expanded="true"])::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 6rem;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ms-bg));
	pointer-events: none;
}

.ms-readmore__toggle { margin-top: var(--ms-4); }

.ms-faq {
	max-width: var(--ms-container-text);
	margin-top: var(--ms-7);
}

.ms-faq__item {
	border-bottom: 1px solid var(--ms-line);
}

.ms-faq__item { transition: background-color var(--ms-dur) var(--ms-ease); }

.ms-faq__item[open] { background: var(--ms-accent-soft); }

.ms-faq__q:hover { color: var(--ms-accent-ink); }

.ms-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ms-4);
	padding: var(--ms-4) var(--ms-3);
	font-size: var(--ms-fs-md);
	font-weight: 600;
	line-height: var(--ms-lh-snug);
	cursor: pointer;
	list-style: none;
}

.ms-faq__q::-webkit-details-marker { display: none; }

.ms-faq__q::after {
	content: "";
	flex: none;
	width: 11px;
	height: 11px;
	border-right: 1.5px solid var(--ms-accent);
	border-bottom: 1.5px solid var(--ms-accent);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform var(--ms-dur-slow) var(--ms-ease);
}

.ms-faq__item[open] .ms-faq__q::after { transform: rotate(-135deg); }

.ms-faq__a {
	padding: 0 var(--ms-3) var(--ms-4);
	color: var(--ms-ink-2);
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.ms-footer {
	margin-top: var(--ms-9);
	background: var(--ms-ink);
	color: rgba(255, 255, 255, 0.82);
	padding-block: var(--ms-8) var(--ms-5);
	font-size: var(--ms-fs-sm);
}

.ms-footer a { color: inherit; }
.ms-footer a:hover { color: var(--ms-inverse); text-decoration: underline; }

.ms-footer__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ms-6) var(--ms-4);
}

@media (min-width: 900px) {
	.ms-footer__grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--ms-7); }
}

.ms-footer h2 {
	font-size: var(--ms-fs-sm);
	letter-spacing: var(--ms-track-wide);
	text-transform: uppercase;
	color: var(--ms-inverse);
	margin-bottom: var(--ms-4);
}

.ms-footer ul { list-style: none; margin: 0; padding: 0; }
.ms-footer li { margin-bottom: var(--ms-2); }

.ms-footer__bottom {
	margin-top: var(--ms-7);
	padding-top: var(--ms-4);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ms-3);
	justify-content: space-between;
	font-size: var(--ms-fs-xs);
	color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   11. ICERIK SAYFALARI / 404 / ARAMA
   ========================================================================== */
/*
 * Sayfa metni kendi genisliginde ORTALANIR.
 *
 * Kapsayici 960px'ti ama icindeki .ms-prose kendi dar genisligine (74ch)
 * sahipti ve sola yaslaniyordu; genis ekranda sagda yuzlerce piksellik bir
 * bosluk kaliyor, sayfa sola yapismis gorunuyordu. Kapsayici artik dogrudan
 * metin genisligi kadar: basliklar da metinle ayni hizada baslayip biter.
 */
.ms-page {
	padding-block: var(--ms-7) var(--ms-8);
	max-width: calc(var(--ms-container-text) + 2 * var(--ms-gutter));
}

.ms-page__head { margin-bottom: var(--ms-6); }

.ms-empty {
	padding: var(--ms-8) var(--ms-4);
	text-align: center;
	background: var(--ms-shell);
	border-radius: var(--ms-r-lg);
}

.ms-search {
	display: flex;
	gap: var(--ms-2);
	max-width: 520px;
}

.ms-search input[type="search"] {
	flex: 1;
	min-height: 46px;
	padding: 0 var(--ms-4);
	border: 1px solid var(--ms-line-strong);
	border-radius: var(--ms-r-sm);
	background: var(--ms-bg);
}

/* ==========================================================================
   11b. ANASAYFA SLIDER
   CSS scroll-snap ile calisir: JavaScript kapaliyken bile slaytlar yatay
   kaydirmayla gezilebilir ve tum slayt metinleri DOM icinde kalir.
   ========================================================================== */
.ms-slider {
	position: relative;
	background: var(--ms-surface);
}

.ms-slider__track {
	display: flex;
	align-items: stretch;
	/* Yukseklik hem rayda hem slaytta tanimli: biri bir dis kuralla
	   ezilse bile slider ince bir seride dusmez. */
	min-height: clamp(400px, 58vh, 620px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.ms-slider__track::-webkit-scrollbar { display: none; }

.ms-slider__track:focus-visible { outline-offset: -3px; }

.ms-slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	min-height: clamp(400px, 58vh, 620px);
	display: flex;
}

.ms-slide__media {
	position: absolute;
	inset: 0;
	background: var(--ms-surface-2);
}

.ms-slide__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ms-slide__media::after {
	content: "";
	position: absolute;
	inset: 0;
}

/*
 * Karartma yonu metnin tarafina gore degisir (--ms-slide-dir, slider.php).
 * Gorselin metin disinda kalan bolumu neredeyse hic karartilmaz; boylece
 * fotografin rengi canli kalirken baslik okunakli olur.
 */
.ms-slide--light .ms-slide__media::after {
	background: linear-gradient(
		var(--ms-slide-dir, 100deg),
		rgba(0, 20, 63, 0.84) 0%,
		rgba(0, 20, 63, 0.5) 40%,
		rgba(0, 20, 63, 0.06) 74%,
		rgba(0, 20, 63, 0) 100%
	);
}

.ms-slide--dark .ms-slide__media::after {
	background: linear-gradient(
		var(--ms-slide-dir, 100deg),
		rgba(247, 249, 252, 0.9) 0%,
		rgba(247, 249, 252, 0.58) 40%,
		rgba(247, 249, 252, 0.1) 74%,
		rgba(247, 249, 252, 0) 100%
	);
}

/* Dar ekranda metin gorselin ustune biner: alttan yukari tam karartma. */
@media (max-width: 767px) {
	.ms-slide--light .ms-slide__media::after {
		background: linear-gradient(to top, rgba(0, 20, 63, 0.9) 0%, rgba(0, 20, 63, 0.5) 55%, rgba(0, 20, 63, 0.24) 100%);
	}

	.ms-slide--dark .ms-slide__media::after {
		background: linear-gradient(to top, rgba(247, 249, 252, 0.92) 0%, rgba(247, 249, 252, 0.6) 55%, rgba(247, 249, 252, 0.3) 100%);
	}
}

.ms-slide__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--ms-container);
	margin-inline: auto;
	padding: var(--ms-8) var(--ms-gutter) var(--ms-9);
	display: flex;
	align-items: center;
	justify-content: var(--ms-slide-align, start);
}

.ms-slide__box { max-width: 34rem; }

.ms-slide--light .ms-slide__box,
.ms-slide--light .ms-slide__title { color: var(--ms-inverse); }

.ms-slide--light .ms-eyebrow { color: rgba(255, 255, 255, 0.82); }

.ms-slide--dark .ms-slide__box,
.ms-slide--dark .ms-slide__title { color: var(--ms-ink); }

.ms-slide__title {
	font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3.5rem);
	margin-bottom: var(--ms-3);
}

.ms-slide__text {
	font-size: var(--ms-fs-md);
	line-height: 1.55;
	margin-bottom: var(--ms-5);
	max-width: 46ch;
}

.ms-slide--light .ms-btn--primary {
	background: var(--ms-inverse);
	color: var(--ms-ink);
}

.ms-slide--light .ms-btn--primary:hover { background: var(--ms-surface); }

/* Oklar + noktalar tek cubukta: hicbir genislikte slayt metnini ortmez. */
.ms-slider__controls {
	position: absolute;
	z-index: 3;
	bottom: var(--ms-4);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: var(--ms-2);
	padding: var(--ms-1);
	border-radius: var(--ms-r-pill);
	background: rgba(0, 20, 63, 0.38);
	backdrop-filter: blur(8px);
}

@media (min-width: 768px) {
	.ms-slider__controls {
		bottom: var(--ms-5);
		left: auto;
		transform: none;
		inset-inline-end: var(--ms-gutter);
	}
}

.ms-slider__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: var(--ms-r-pill);
	background: rgba(255, 255, 255, 0.92);
	color: var(--ms-ink);
	transition: background-color var(--ms-dur) var(--ms-ease),
		color var(--ms-dur) var(--ms-ease),
		transform var(--ms-dur-fast) var(--ms-ease);
}

.ms-slider__nav:hover {
	background: var(--ms-accent);
	color: var(--ms-inverse);
	transform: scale(1.08);
}

.ms-slider__nav:active { transform: scale(0.96); }

.ms-slider__dots {
	display: flex;
	align-items: center;
	gap: var(--ms-2);
	padding-inline: var(--ms-2);
}

.ms-slider__dot {
	width: 22px;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.5);
	transition: width var(--ms-dur) var(--ms-ease), background-color var(--ms-dur) var(--ms-ease);
}

.ms-slider__dot[aria-current="true"] {
	width: 34px;
	background: var(--ms-accent);
}

.ms-slider__dot:hover { background: rgba(255, 255, 255, 0.85); }

/* ==========================================================================
   11c. ANASAYFA BOLUMLERI
   ========================================================================== */
.ms-home-intro {
	max-width: 62ch;
	margin-bottom: var(--ms-7);
}

.ms-home-intro h1 { margin-bottom: var(--ms-3); }

.ms-usp {
	background: var(--ms-shell);
	border-block: 1px solid var(--ms-line);
	padding-block: var(--ms-5);
}

.ms-usp__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ms-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.ms-usp__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ms-usp__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ms-3);
}

.ms-usp__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-accent-soft);
	color: var(--ms-accent-ink);
	transition: background-color var(--ms-dur) var(--ms-ease), transform var(--ms-dur) var(--ms-ease);
}

.ms-usp__item:hover .ms-usp__icon {
	background: var(--ms-accent);
	color: var(--ms-inverse);
	transform: scale(1.06);
}

.ms-usp__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ms-usp__body strong { font-size: var(--ms-fs-base); }

.ms-usp__body span {
	font-size: var(--ms-fs-sm);
	color: var(--ms-muted);
	line-height: 1.45;
}

.ms-footer__brand p { max-width: 38ch; }

.ms-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ms-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-footer__legal li { margin: 0; }

.ms-link-arrow--inverse {
	color: var(--ms-inverse);
	border-color: rgba(255, 255, 255, 0.35);
}

.ms-link-arrow--inverse:hover {
	border-color: var(--ms-inverse);
	text-decoration: none;
}

/* ==========================================================================
   11e. TEKLIF AKISI VE WHATSAPP
   Fiyati girilmemis urunlerde sepet yerine calisan akis.
   ========================================================================== */
:root {
	--ms-wa: #25d366;
	--ms-wa-ink: #128c4a;
}

.ms-price-quote {
	font-size: var(--ms-fs-sm);
	font-weight: 600;
	color: var(--ms-accent-ink);
}

/*
 * WhatsApp yesili artik zorunlu degil: renk ve golge degiskenden gelir,
 * Elementor'dan baska bir renk verildiginde golge de onunla uyumlu kalsin
 * diye golge rengi ayri bir degiskendir.
 */
.ms-btn--quote {
	--ms-quote-shadow: rgba(18, 140, 74, 0.9);
	background: var(--ms-wa);
	color: var(--ms-inverse, #fff);
	box-shadow: 0 10px 24px -14px var(--ms-quote-shadow);
}

.ms-btn--quote:hover {
	background: var(--ms-wa-ink);
	color: var(--ms-inverse, #fff);
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -16px var(--ms-quote-shadow);
}

.ms-btn--sm {
	min-height: 40px;
	padding: 0 var(--ms-4);
}

.ms-btn--lg {
	min-height: 54px;
	padding: 0 var(--ms-6);
	font-size: var(--ms-fs-base);
}

/* Tek urun sayfasinda fiyat/sepet alaninin yerini alan blok. */
.ms-quote {
	margin: var(--ms-5) 0;
	padding: var(--ms-5);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-r-lg);
	background: var(--ms-shell);
}

.ms-quote__title {
	margin: 0 0 var(--ms-2);
	font-family: var(--ms-font-display);
	font-size: var(--ms-fs-lg);
	font-weight: 600;
	letter-spacing: var(--ms-track-tight);
	color: var(--ms-ink);
}

.ms-quote__text {
	margin: 0 0 var(--ms-4);
	font-size: var(--ms-fs-sm);
	color: var(--ms-muted);
	max-width: 46ch;
}

/* Kosedeki WhatsApp butonu: kapali halde daire, uzerine gelince etiket acilir. */
.ms-wa-float {
	position: fixed;
	right: var(--ms-4);
	bottom: var(--ms-4);
	z-index: 80;
	display: inline-flex;
	align-items: center;
	gap: var(--ms-2);
	height: 54px;
	padding: 0 14px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-wa);
	color: #fff;
	box-shadow: 0 14px 30px -12px rgba(18, 140, 74, 0.75);
	transition: background-color var(--ms-dur) var(--ms-ease),
		transform var(--ms-dur) var(--ms-ease),
		box-shadow var(--ms-dur) var(--ms-ease);
}

.ms-wa-float:hover {
	background: var(--ms-wa-ink);
	transform: translateY(-3px);
	box-shadow: 0 20px 38px -14px rgba(18, 140, 74, 0.85);
}

.ms-wa-float__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: var(--ms-fs-sm);
	font-weight: 600;
	opacity: 0;
	transition: max-width var(--ms-dur-slow) var(--ms-ease), opacity var(--ms-dur) var(--ms-ease);
}

@media (hover: hover) {
	.ms-wa-float:hover .ms-wa-float__label,
	.ms-wa-float:focus-visible .ms-wa-float__label {
		max-width: 8rem;
		opacity: 1;
	}
}

.ms-footer__wa {
	display: inline-flex;
	align-items: center;
	gap: var(--ms-2);
	font-weight: 600;
	color: var(--ms-inverse);
}

.ms-footer__wa:hover { color: var(--ms-wa); text-decoration: none; }

/* ==========================================================================
   11f. VITRIN DUZENI (template-parts/home/showcase.php)
   Koyu sinematik kapak + krem kesitler + altin vurgu.
   ========================================================================== */

/* --- Ortak tipografi --- */
.ms-display {
	font-family: var(--ms-font-serif);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.08;
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
	margin: 0 0 var(--ms-4);
}

.ms-display span {
	display: block;
	color: var(--ms-accent-2);
}

.ms-kicker {
	font-size: var(--ms-fs-2xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ms-muted);
	margin: 0 0 var(--ms-3);
}

.ms-kicker--light { color: rgba(255, 255, 255, 0.55); }

.ms-btn--gold {
	background: var(--ms-gold);
	color: var(--ms-ink);
	box-shadow: 0 12px 26px -14px rgba(169, 216, 197, 0.55);
}

.ms-btn--gold:hover {
	background: #8ec7b1;
	color: var(--ms-ink);
	transform: translateY(-2px);
}

.ms-btn--outline {
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(6px);
}

.ms-btn--outline:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	transform: translateY(-2px);
}

/* --- Kapak uzerine binen baslik ---
   Baslik akista kalmaya devam eder (sticky); kapak negatif ust bosluk ile
   altina cekilir. Boylece hem seffaf gorunur hem de kaydirmada yapiskanlik
   ve .ms-header--stuck gecisi korunur. */
.ms-home-showcase .ms-header {
	background: transparent;
	border-bottom-color: transparent;
}

.ms-home-showcase .ms-header:not(.ms-header--stuck) .ms-brand a,
.ms-home-showcase .ms-header:not(.ms-header--stuck) .ms-brand,
.ms-home-showcase .ms-header:not(.ms-header--stuck) .ms-nav__list a,
.ms-home-showcase .ms-header:not(.ms-header--stuck) .ms-iconbtn {
	color: #fff;
}

.ms-home-showcase .ms-header:not(.ms-header--stuck) .ms-iconbtn:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.ms-home-showcase .ms-header:not(.ms-header--stuck) .ms-nav__list a::after {
	background: var(--ms-gold);
}

/* Acilir menu her zaman acik zeminlidir; seffaf baslikta beyaz metin
   kurali alt menu baglantilarina tasinmamali. */
.ms-home-showcase .ms-header:not(.ms-header--stuck) .ms-nav__list .sub-menu a {
	color: var(--ms-ink);
}

.ms-home-showcase .ms-header:not(.ms-header--stuck) .ms-nav__list .sub-menu a:hover {
	color: var(--ms-accent-ink);
}

.ms-home-showcase .ms-header--stuck {
	background: rgba(255, 255, 255, 0.94);
	border-bottom-color: var(--ms-line);
}

.ms-home-showcase .ms-hero {
	margin-top: calc(var(--ms-header-h) * -1);
	padding-top: calc(var(--ms-header-h) + clamp(var(--ms-8), 10vh, var(--ms-10)));
}

/* --- 1. Kapak --- */
.ms-hero {
	position: relative;
	background: var(--ms-dark);
	color: #fff;
	padding-block: clamp(var(--ms-9), 12vh, var(--ms-10)) 0;
	overflow: hidden;
	isolation: isolate;
}

.ms-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.ms-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Iki katmanli karartma: ustten asagi okunabilirlik, alttan zemine gecis. */
.ms-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(23, 17, 10, 0.72) 0%, rgba(23, 17, 10, 0.62) 45%, rgba(23, 17, 10, 0.94) 100%),
		radial-gradient(120% 90% at 50% 20%, rgba(23, 17, 10, 0) 0%, rgba(23, 17, 10, 0.55) 100%);
}

.ms-hero__inner {
	position: relative;
	text-align: center;
	max-width: 62rem;
	padding-bottom: var(--ms-8);
}

.ms-hero__eyebrow {
	font-size: var(--ms-fs-2xs);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	margin: 0 0 var(--ms-5);
}

.ms-hero__title {
	font-family: var(--ms-font-serif);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.015em;
	font-size: clamp(2.125rem, 1.2rem + 4.2vw, 4.25rem);
	color: #fff;
	margin: 0 0 var(--ms-5);
	text-wrap: balance;
}

.ms-hero__title span {
	display: block;
	color: var(--ms-gold);
}

.ms-hero__lede {
	max-width: 46rem;
	margin: 0 auto var(--ms-5);
	font-size: var(--ms-fs-md);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

.ms-hero__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ms-2);
	list-style: none;
	margin: 0 0 var(--ms-6);
	padding: 0;
}

.ms-hero__chips li {
	display: inline-flex;
	align-items: center;
	gap: var(--ms-2);
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--ms-r-sm);
	background: rgba(255, 255, 255, 0.05);
	font-size: var(--ms-fs-2xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.86);
}

.ms-hero__chips svg { color: var(--ms-gold); }

.ms-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ms-3);
}

/* Kapagin alt kenarina oturan kart seridi. */
.ms-hero__deck {
	position: relative;
	display: flex;
	gap: var(--ms-3);
	justify-content: flex-start;
	padding: 0 var(--ms-gutter) var(--ms-6);
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}

.ms-hero__deck::-webkit-scrollbar { display: none; }

@media (min-width: 1100px) {
	.ms-hero__deck {
		justify-content: center;
		overflow: visible;
	}
}

.ms-deck-card {
	position: relative;
	flex: 0 0 auto;
	width: 168px;
	scroll-snap-align: center;
	border-radius: var(--ms-r);
	overflow: hidden;
	background: var(--ms-dark-2);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.9);
	transition: transform var(--ms-dur-slow) var(--ms-ease), box-shadow var(--ms-dur) var(--ms-ease);
}

/* Kartlar hafifce yelpazelenir; ortadakiler one cikar. Acilar tek tek
   yazilir: hesaplanan bir aci icin gereken CSS abs() fonksiyonu yeterince
   yaygin degil ve desteklenmediginde transform bildiriminin tamami duser. */
@media (min-width: 1100px) {
	.ms-deck-card { width: 190px; }

	.ms-hero__deck .ms-deck-card:nth-child(1) { transform: rotate(-5deg) translateY(14px); }
	.ms-hero__deck .ms-deck-card:nth-child(2) { transform: rotate(-3deg) translateY(7px); }
	.ms-hero__deck .ms-deck-card:nth-child(3) { transform: rotate(-1deg); }
	.ms-hero__deck .ms-deck-card:nth-child(4) { transform: rotate(1deg); }
	.ms-hero__deck .ms-deck-card:nth-child(5) { transform: rotate(3deg) translateY(7px); }
	.ms-hero__deck .ms-deck-card:nth-child(6) { transform: rotate(5deg) translateY(14px); }

	.ms-hero__deck .ms-deck-card:hover { transform: translateY(-10px) rotate(0deg); }
}

.ms-deck-card:hover {
	transform: translateY(-10px) rotate(0deg);
	box-shadow: 0 30px 54px -22px rgba(0, 0, 0, 0.95);
	z-index: 2;
}

.ms-deck-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ms-deck-card__label {
	display: block;
	padding: var(--ms-2) var(--ms-3) var(--ms-3);
	font-family: var(--ms-font-serif);
	font-size: var(--ms-fs-sm);
	color: #fff;
}

/* --- 2. Tanitim --- */
.ms-split {
	background: var(--ms-cream-2);
	padding-block: var(--ms-9);
}

.ms-split__grid {
	display: grid;
	gap: var(--ms-6);
	align-items: center;
}

@media (min-width: 900px) {
	.ms-split__grid { grid-template-columns: 1fr 1fr; gap: var(--ms-8); }
	.ms-split__grid--why { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
}

.ms-split__body p { color: var(--ms-ink-2); max-width: 46ch; }

/* Bolum basliklariyla ayni dil: sayfadaki diger h2'ler sans, bu baslik da
   oyle olsun. Serif gorunum yalniz koyu teklif bandina ait. */
.ms-split__title { margin-bottom: var(--ms-4); }

.ms-split__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--ms-r-lg);
	box-shadow: var(--ms-shadow);
}

.ms-checklist {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ms-2) var(--ms-4);
	list-style: none;
	margin: var(--ms-5) 0;
	padding: 0;
}

.ms-checklist li {
	display: inline-flex;
	align-items: center;
	gap: var(--ms-2);
	font-size: var(--ms-fs-sm);
	font-weight: 600;
	color: var(--ms-ink-2);
}

.ms-checklist svg { color: var(--ms-accent); }

/* --- 3. Koleksiyonlar --- */
.ms-section__head--stack { align-items: flex-end; }

.ms-section__head--stack .ms-display { margin-bottom: 0; }

.ms-coll {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ms-5) var(--ms-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.ms-coll { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.ms-coll { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ms-coll__item {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ms-cream-3);
	border-radius: var(--ms-r);
	background: var(--ms-bg);
	overflow: hidden;
	transition: transform var(--ms-dur) var(--ms-ease), box-shadow var(--ms-dur) var(--ms-ease), border-color var(--ms-dur) var(--ms-ease);
}

@media (hover: hover) {
	.ms-coll__item:hover {
		transform: translateY(-6px);
		box-shadow: var(--ms-shadow);
		border-color: var(--ms-accent-2);
	}
}

.ms-coll__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ms-surface);
}

.ms-coll__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ms-dur-slow) var(--ms-ease-soft);
}

.ms-coll__item:hover .ms-coll__media img { transform: scale(1.06); }

.ms-coll__body {
	display: flex;
	flex-direction: column;
	gap: var(--ms-2);
	padding: var(--ms-4);
	flex: 1;
}

.ms-coll__title {
	font-family: var(--ms-font-serif);
	font-size: var(--ms-fs-md);
	font-weight: 500;
	line-height: 1.25;
	margin: 0;
}

.ms-coll__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ms-coll__item { position: relative; }

.ms-coll__text {
	margin: 0;
	font-size: var(--ms-fs-sm);
	color: var(--ms-muted);
	line-height: 1.5;
}

.ms-coll__more {
	display: inline-flex;
	align-items: center;
	gap: var(--ms-2);
	margin-top: auto;
	padding-top: var(--ms-3);
	font-size: var(--ms-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ms-accent);
}

.ms-coll__item:hover .ms-coll__more svg { transform: translateX(3px); }

.ms-coll__more svg { transition: transform var(--ms-dur) var(--ms-ease); }

/* --- 4. Filtre cipleri --- */
.ms-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ms-2);
	margin-bottom: var(--ms-6);
}

.ms-filter__chip {
	min-height: 38px;
	padding: 0 var(--ms-4);
	border: 1px solid var(--ms-cream-3);
	border-radius: var(--ms-r-pill);
	background: var(--ms-bg);
	font-size: var(--ms-fs-2xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ms-ink-2);
	transition: background-color var(--ms-dur) var(--ms-ease),
		border-color var(--ms-dur) var(--ms-ease),
		color var(--ms-dur) var(--ms-ease);
}

.ms-filter__chip:hover { border-color: var(--ms-accent); color: var(--ms-accent); }

.ms-filter__chip[aria-pressed="true"] {
	background: var(--ms-ink);
	border-color: var(--ms-ink);
	color: #fff;
}

.ms-filter__empty {
	margin-top: var(--ms-5);
	font-size: var(--ms-fs-sm);
	color: var(--ms-muted);
}

/* --- 5. Neden --- */
.ms-why {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ms-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.ms-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ms-why__item {
	padding: var(--ms-5);
	border: 1px solid var(--ms-cream-3);
	border-radius: var(--ms-r);
	background: var(--ms-cream);
	transition: border-color var(--ms-dur) var(--ms-ease), transform var(--ms-dur) var(--ms-ease);
}

@media (hover: hover) {
	.ms-why__item:hover { border-color: var(--ms-accent-2); transform: translateY(-4px); }
}

.ms-why__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: var(--ms-3);
	border-radius: var(--ms-r-sm);
	background: var(--ms-cream-2);
	color: var(--ms-accent);
}

.ms-why__title {
	font-family: var(--ms-font-serif);
	font-size: var(--ms-fs-md);
	font-weight: 500;
	margin: 0 0 var(--ms-2);
}

.ms-why__text {
	margin: 0;
	font-size: var(--ms-fs-sm);
	color: var(--ms-muted);
	line-height: 1.55;
}

/* --- 6. Surec --- */
.ms-steps__title { margin-bottom: var(--ms-7); }

.ms-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ms-5);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

@media (min-width: 640px) {
	.ms-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.ms-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ms-6); }
}

.ms-steps__item {
	position: relative;
	padding-top: var(--ms-4);
	border-top: 2px solid var(--ms-cream-3);
	transition: border-color var(--ms-dur) var(--ms-ease);
}

.ms-steps__item:hover { border-color: var(--ms-accent-2); }

.ms-steps__num {
	display: block;
	font-family: var(--ms-font-serif);
	font-size: 2rem;
	line-height: 1;
	color: var(--ms-accent);
	margin-bottom: var(--ms-2);
}

.ms-steps__name {
	font-family: var(--ms-font-serif);
	font-size: var(--ms-fs-md);
	font-weight: 500;
	margin: 0 0 var(--ms-1);
}

.ms-steps__text {
	margin: 0;
	font-size: var(--ms-fs-sm);
	color: var(--ms-muted);
	line-height: 1.55;
}

/* --- 7. Teklif bandi --- */
/*
 * Bandin renkleri degisken uzerinden verilir: Elementor'daki stil sekmesi bu
 * degiskenleri ezer, dolayisiyla bant basina ayri renk vermek icin ayri bir
 * CSS kurali gerekmez. Varsayilanlar bugunku degerlerdir.
 */
.ms-cta {
	--ms-cta-ink: var(--ms-inverse, #fff);
	--ms-cta-text: rgba(255, 255, 255, 0.76);
	background: var(--ms-dark);
	color: var(--ms-cta-ink);
	padding-block: var(--ms-9);
}

.ms-cta__inner { text-align: center; max-width: 54rem; }

.ms-cta__title { color: var(--ms-cta-ink); }

/* Koyu bantta ikinci satir mint kalir; acik zemin kurali burada gecersiz. */
.ms-cta__title span { color: var(--ms-gold); }

.ms-cta__text {
	max-width: 44ch;
	margin: 0 auto var(--ms-6);
	color: var(--ms-cta-text);
}

.ms-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ms-3);
}

/* Teklif bandi koyu, alt bilgi de koyu: arada beyaz serit kalmasin. */
.ms-home-showcase .ms-footer { margin-top: 0; }

/* ==========================================================================
   11d. SAYFA GECISLERI
   Cross-document View Transitions: destekleyen tarayicilarda sayfa gecisleri
   ani kesilme yerine yumusak bir capraz gecisle olur. Desteklemeyen tarayici
   kurali yok sayar; ek JavaScript veya SPA gerekmez.
   ========================================================================== */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 280ms;
	animation-timing-function: var(--ms-ease);
}

/* ==========================================================================
   12. HAREKET TERCIHI
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   13. YAZDIRMA
   ========================================================================== */
@media print {
	.ms-header,
	.ms-footer,
	.ms-drawer,
	.ms-shop-toolbar { display: none !important; }

	body { color: #000; }
}