/* Mikron Yapı — temel görsel tasarım sistemi. Kaynak: kullanıcının sağladığı
   referans mockup'lar (ana sayfa + ürün sayfası) ve şartname Bölüm 4/10/11/23.5/30.
   Gerçek görseller gelene kadar foto alanları CSS placeholder olarak çizilir. */

*, *::before, *::after { box-sizing: border-box; }

/* Mobil tarayıcıların dokunma anında gösterdiği varsayılan vurgu rengi
   (cihaza göre pembemsi/mor olabiliyor) yerine sitenin yeşili kullanılır. */
a, button { -webkit-tap-highlight-color: rgba(11, 107, 58, .15); }

html {
	overflow-x: hidden;
	max-width: 100%;
}

body.mikron-yapi-child {
	margin: 0;
	width: 100%;
	max-width: 100vw;
	/* overflow-x:hidden burada YOK — html'de zaten var ve gerçek viewport
	   scroll'una o taşınıyor (kök elemanın overflow'u viewport'a "propagate"
	   edilir). Body'de AYRICA tekrarlamak overflow-y'yi de zımnen 'auto' yapıp
	   body'yi position:sticky çocukları için ayrı bir scroll container gibi
	   gösteriyor — bazı tarayıcılarda .myp-header'ın sticky'sinin mobilde hiç
	   yapışmamasına (sayfa kaydırılırken kaybolmasına) yol açıyordu. */
	position: relative;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--color-text);
	background: var(--color-white);
	line-height: 1.55;
}

/* #page'de overflow-x:hidden YOKTUR — html'de zaten var (yatay taşma önlemi
   için tek başına yeterli) ve #page üzerinde tekrar tanımlamak
   overflow-y'yi de zımnen 'auto' yapıp (CSS overflow spec kuralı) .myp-header'ın
   position:sticky'sini gerçek viewport yerine #page'e bağlıyor, bu da mobilde
   sayfa kaydırılırken sticky header'ın normal içerik gibi kayıp kaybolmasına
   (yapışık kalmamasına) yol açıyordu. */
#page { max-width: 100vw; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0 0 var(--space-3); line-height: 1.2; }

.myp-container {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--space-5);
}

/* ---------- Butonlar ---------- */
.myp-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 12px 22px;
	border-radius: var(--radius-button);
	font-weight: 600;
	font-size: 15px;
	border: 1.5px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.myp-btn:hover { transform: translateY(-1px); }
.myp-btn--primary { background: var(--color-primary); color: var(--color-white); }
.myp-btn--primary:hover { background: var(--color-primary-hover); color: var(--color-white); }
.myp-btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.myp-btn--outline:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.myp-btn--whatsapp { background: var(--color-white); color: var(--color-primary); border-color: var(--color-primary-border); }
.myp-btn--whatsapp:hover { background: var(--color-primary-soft); }
.myp-btn--phone { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.myp-btn--sm { padding: 8px 16px; font-size: 13px; }
.myp-btn--block { width: 100%; justify-content: center; }

/* ---------- Üst bilgi çubuğu ---------- */
.myp-utility-bar { background: var(--color-secondary); color: rgba(255,255,255,.92); font-size: 13px; }
.myp-utility-bar__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 8px var(--space-5);
	display: flex;
	align-items: center;
	gap: var(--space-5);
}
.myp-utility-bar a { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.myp-utility-bar a:hover { color: var(--color-white); }
.myp-utility-bar__msg { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; opacity: .9; }
.myp-utility-bar .myp-icon { width: 14px; height: 14px; }

/* ---------- Ana header ---------- */
.myp-header { background: var(--color-white); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 40; }
/* WP admin çubuğu giriş yapmış kullanıcılarda sabit (fixed) durur; onsuz
   sticky header'ımız admin çubuğunun ALTINA kayıp kayma sırasında
   üst üste biniyor/zıplıyormuş gibi görünüyordu. */
body.admin-bar .myp-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 782px) {
	body.admin-bar .myp-header { top: 0; }
}
.myp-header__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 16px var(--space-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
}
.myp-header__logo a { display: flex; align-items: center; font-size: 22px; font-weight: 800; color: var(--color-secondary); }
.myp-header__logo img { height: 40px; width: auto; }
.myp-main-nav { flex: 1; }
.myp-main-nav > ul { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.myp-main-nav li { position: relative; }
.myp-main-nav a { font-weight: 600; font-size: 14.5px; color: var(--color-text); padding: 6px 0; display: inline-flex; align-items: center; }
.myp-main-nav a:hover { color: var(--color-primary); }
.myp-main-nav .menu-item-has-children > a::after {
	content: ""; display: inline-block; width: 6px; height: 6px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg); margin-left: 6px; margin-top: -3px;
}
.myp-main-nav .sub-menu {
	position: absolute; top: 100%; left: 0; margin-top: 10px; min-width: 230px;
	background: var(--color-white); border: 1px solid var(--color-border); border-radius: 10px;
	box-shadow: var(--shadow-lg); padding: 8px; display: flex; flex-direction: column; gap: 2px;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 50;
}
.myp-main-nav li:hover > .sub-menu, .myp-main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.myp-main-nav .sub-menu a { padding: 9px 10px; border-radius: 6px; white-space: nowrap; width: 100%; }
.myp-main-nav .sub-menu a:hover { background: var(--color-surface); }
.myp-header__actions { display: flex; align-items: center; gap: var(--space-3); }

/* ---------- Mobil off-canvas menü ---------- */
.myp-nav-toggle {
	display: none; flex-direction: column; justify-content: center; gap: 5px;
	width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: 8px;
	background: var(--color-white); cursor: pointer; padding: 0;
	/* Mobil tarayıcıların varsayılan dokunma vurgusu (genelde pembemsi/mor)
	   yerine sitenin kendi yeşilini kullan. */
	-webkit-tap-highlight-color: transparent;
}
.myp-nav-toggle span { display: block; width: 18px; height: 2px; background: var(--color-secondary); margin-inline: auto; }
.myp-nav-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Ebeveyn Hello Elementor teması her <button> için button:focus,button:hover
   kuralıyla pembe (#CC3366) arka plan basıyor; burada sitenin yeşiliyle
   geçersiz kılınıyor. */
.myp-nav-toggle:hover, .myp-nav-toggle:focus, .myp-nav-toggle:active { background: var(--color-primary-soft); border-color: var(--color-primary-border); }

.myp-nav-backdrop { position: fixed; inset: 0; background: rgba(10, 20, 15, .5); z-index: 60; }
.myp-nav-backdrop[hidden], .myp-mobile-nav[hidden] { display: none; }

.myp-mobile-nav {
	position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 85vw); z-index: 61;
	background: var(--color-white); box-shadow: var(--shadow-lg);
	display: flex; flex-direction: column; padding: var(--space-5);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* Panelin kendi scroll sınırına (en üst/en alt) ulaşınca kaydırma
	   hareketinin arka plandaki body'ye "zincirlenip" sayfayı kaydırmasını
	   (ve panelin kayboluyormuş gibi görünmesini) engeller — body'yi
	   position:fixed ile kilitleyip sonra eski konumuna geri döndürmek yerine
	   bu daha basit yöntem tercih edildi çünkü o yöntem kapanışta anasayfanın
	   bir an en üste zıplayıp geri dönmesine (görünür "sıçrama") yol açıyordu. */
	overscroll-behavior: contain;
}
.myp-mobile-nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); font-weight: 800; color: var(--color-secondary); }
.myp-nav-close { width: 32px; height: 32px; border: none; background: var(--color-surface); border-radius: 8px; font-size: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.myp-nav-close:hover, .myp-nav-close:focus, .myp-nav-close:active { background: var(--color-primary-soft); }
.myp-nav-close:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.myp-mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }
.myp-mobile-nav ul a { display: block; padding: 12px 8px; font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--color-border); }
/* Alt kategori accordion'u (Bölüm 10.7) — açma/kapama düğmesi JS ile
   (mobile-menu.js) her .menu-item-has-children'a eklenir. */
.myp-mobile-nav li.menu-item-has-children { position: relative; }
.myp-mobile-nav li.menu-item-has-children > a { padding-right: 44px; }
.myp-submenu-toggle {
	position: absolute; top: 0; right: 0; width: 44px; height: 44px;
	background: none; border: none; padding: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	-webkit-tap-highlight-color: transparent;
}
.myp-submenu-toggle:hover, .myp-submenu-toggle:focus, .myp-submenu-toggle:active { background: var(--color-primary-soft); }
.myp-submenu-toggle::after {
	content: ""; width: 8px; height: 8px;
	border-right: 1.6px solid var(--color-muted); border-bottom: 1.6px solid var(--color-muted);
	transform: rotate(45deg); transition: transform .2s ease;
}
li.menu-item-has-children.is-open > .myp-submenu-toggle::after { transform: rotate(-135deg); }
.myp-mobile-nav .sub-menu { display: none; padding-left: var(--space-4); gap: 0; }
li.menu-item-has-children.is-open > .sub-menu { display: flex; flex-direction: column; }
.myp-mobile-nav .sub-menu a { font-weight: 500; font-size: 14px; color: var(--color-muted); padding: 10px 8px; }
.myp-mobile-nav__quick { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-6); }

body.myp-nav-open { overflow: hidden; }

/* ---------- Footer ---------- */
.myp-footer { background: var(--color-secondary); color: rgba(255,255,255,.78); padding-top: var(--space-10); }
.myp-footer__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 0 var(--space-5) var(--space-8);
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
	gap: var(--space-7);
}
.myp-footer__brand { color: var(--color-white); font-size: 20px; font-weight: 800; margin-bottom: var(--space-3); }
.myp-footer__col h4 { color: var(--color-white); font-size: 15px; margin-bottom: var(--space-4); }
.myp-footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.myp-footer__col a:hover { color: var(--color-white); }
.myp-footer__contact { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-3); }
.myp-footer__contact span, .myp-footer__contact a { display: flex; align-items: flex-start; gap: 8px; }
.myp-footer__social { display: flex; gap: 10px; margin-top: var(--space-5); }
.myp-footer__social a { width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; }
.myp-footer__bottom {
	border-top: 1px solid rgba(255,255,255,.15);
	padding: var(--space-4) var(--space-5);
	max-width: 1200px;
	margin-inline: auto;
	font-size: 13px;
	display: flex;
	justify-content: space-between;
}

/* ---------- Mobil sabit iletişim çubuğu ---------- */
.myp-mobile-bar {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 50;
	height: 60px;
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
	box-shadow: var(--shadow-lg);
	/* iPhone alt "home indicator" çentiğinin butonların üzerine binmesini
	   önler; ayrıca yükseklik sabit olduğu için mobil tarayıcı adres çubuğu
	   kayarken (scroll) çubuğun küçülüyormuş gibi görünmesini engeller. */
	padding-bottom: env(safe-area-inset-bottom, 0);
	box-sizing: content-box;
}
.myp-mobile-bar__item {
	flex: 1;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--color-secondary);
}
.myp-mobile-bar__item--whatsapp { background: #25D366; color: var(--color-white); }

/* Sol alttaki sabit "çerez tercihlerini tekrar aç" butonu kaldırıldı —
   kullanıcı tercihini Çerez Politikası sayfasından yönetebilir. */
.cky-btn-revisit-wrapper { display: none !important; }

/* ---------- Genel bölüm düzeni ---------- */
.myp-section { padding-block: var(--space-10); }
.myp-section--surface { background: var(--color-surface); }
.myp-section__head { max-width: 640px; margin-bottom: var(--space-6); }
.myp-eyebrow { color: var(--color-primary); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--space-2); }
.myp-section__head p { color: var(--color-muted); }
.myp-section__cta { text-align: center; margin-top: var(--space-6); }

/* Görsel placeholder (gerçek fotoğraflar gelene kadar) */
.myp-ph {
	background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface));
	border: 1px dashed var(--color-primary-border);
	border-radius: var(--radius-image);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	min-height: 120px;
}
.myp-ph .myp-icon { width: 34px; height: 34px; opacity: .55; }

/* ---------- Hero ---------- */
.myp-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; padding-block: var(--space-10); }
.myp-hero .myp-eyebrow { }
.myp-hero h1 { font-size: 46px; font-weight: 800; color: var(--color-secondary); }
.myp-hero p { color: var(--color-muted); font-size: 17px; max-width: 46ch; margin-bottom: var(--space-5); }
.myp-hero__cta { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; }
.myp-hero__trust { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.myp-hero__trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--color-muted); font-weight: 600; }
.myp-hero__trust .myp-icon { color: var(--color-primary); width: 16px; height: 16px; }
.myp-hero__media { position: relative; }
.myp-hero__media .myp-ph { aspect-ratio: 4 / 3; min-height: 320px; }
.myp-hero__media-img { aspect-ratio: 4 / 3; min-height: 320px; border-radius: var(--radius-image); overflow: hidden; }
.myp-hero__media-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.myp-hero__badge {
	position: absolute; left: -16px; bottom: -16px;
	background: var(--color-secondary); color: var(--color-white);
	border-radius: var(--radius-card); padding: var(--space-4);
	display: flex; gap: 10px; align-items: center;
	box-shadow: var(--shadow-md);
	max-width: 260px;
	max-width: min(260px, calc(100vw - 32px));
}
.myp-hero__badge strong { display: block; font-size: 14px; }
.myp-hero__badge small { opacity: .8; font-size: 12px; }

/* ---------- Hızlı kategori şeridi ---------- */
.myp-quick-cats ul { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
.myp-quick-cats a {
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	text-align: center; padding: var(--space-5) var(--space-3);
	background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-card);
	font-weight: 600; font-size: 13.5px;
	transition: box-shadow .15s ease, border-color .15s ease;
}
.myp-quick-cats a:hover { box-shadow: var(--shadow-sm); border-color: var(--color-primary-border); }
.myp-quick-cats .myp-icon-wrap {
	width: 48px; height: 48px; border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	transition: transform .2s ease;
}
/* Her kart, sitenin mevcut token paletinden (yeni bir renk eklemeden) kendi
   vurgu tonunu alır — üçü de aynı düz yeşil yerine biraz daha canlı görünür. */
.myp-icon-wrap--primary { background: var(--color-primary-soft); color: var(--color-primary); }
.myp-icon-wrap--secondary { background: color-mix(in srgb, var(--color-secondary) 22%, var(--color-primary-soft)); color: var(--color-secondary); }
.myp-icon-wrap--warning { background: color-mix(in srgb, var(--color-warning) 18%, white); color: var(--color-warning); }
/* :hover mobil dokunmatik ekranlarda kalıcı bir durum değil (parmak kalkınca
   anında biter, bazı tarayıcılarda hiç tetiklenmez); dokunma anında aynı
   animasyonu vermesi için :active de eklendi. */
.myp-quick-cats a:hover .myp-icon-wrap, .myp-quick-cats a:active .myp-icon-wrap { transform: scale(1.08) rotate(-4deg); }

/* ---------- Kategori/ürün kartları (grid) ---------- */
.myp-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.myp-card {
	background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-card);
	overflow: hidden; transition: box-shadow .15s ease, transform .15s ease;
}
.myp-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.myp-card .myp-ph { border-radius: 0; aspect-ratio: 4 / 3; min-height: 0; }
.myp-gallery-item { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-image); overflow: hidden; }
.myp-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.myp-gallery-item:hover img { transform: scale(1.04); }
.myp-card__media {
	background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface));
	aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: var(--space-4);
	overflow: hidden;
}
.myp-card__media img { width: 100%; height: 100%; object-fit: cover; margin: calc(var(--space-4) * -1); }
.myp-cat-illust { width: 100%; max-width: 220px; height: auto; overflow: visible; }
.myp-cat-illust__shadow { fill: var(--color-secondary); opacity: .1; }
.myp-cat-illust__ghost { fill: var(--color-primary-soft); stroke: var(--color-primary-border); stroke-width: 2; }
.myp-cat-illust__unit { animation: mypContainerFloat 4.5s ease-in-out infinite; transform-origin: 200px 240px; }
.myp-cat-illust__base { fill: var(--color-secondary); }
.myp-cat-illust__body { fill: var(--color-white); stroke: var(--color-secondary); stroke-width: 3.5; }
.myp-cat-illust__roof { fill: var(--color-primary); }
.myp-cat-illust__roof--pitched { stroke: var(--color-primary); stroke-width: 2; stroke-linejoin: round; }
.myp-cat-illust__chimney { fill: var(--color-secondary); }
.myp-cat-illust__door { fill: var(--color-primary-soft); stroke: var(--color-secondary); stroke-width: 3; }
.myp-cat-illust__handle { fill: var(--color-secondary); }
.myp-cat-illust__rib { stroke: var(--color-primary-border); stroke-width: 2; }
.myp-cat-illust__rib--door { stroke: var(--color-secondary); stroke-width: 2; }
.myp-cat-illust__mullion { stroke: var(--color-secondary); stroke-width: 2; }
.myp-cat-illust__window { stroke: var(--color-secondary); stroke-width: 3; animation: mypContainerGlow 3.6s ease-in-out infinite; }
.myp-cat-illust__window--1 { animation-delay: 0s; }
.myp-cat-illust__window--2 { animation-delay: 1.8s; }
@media (prefers-reduced-motion: reduce) {
	.myp-cat-illust__unit, .myp-cat-illust__window { animation: none; }
}
.myp-card__body { padding: var(--space-4); }
.myp-card__body h3 { font-size: 16px; margin-bottom: 6px; }
.myp-card__body ul { margin: var(--space-3) 0; display: flex; flex-direction: column; gap: 6px; }
.myp-card__body li { font-size: 13.5px; color: var(--color-muted); display: flex; gap: 6px; }
.myp-card__body li .myp-icon { color: var(--color-primary); width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; }
.myp-card__actions { display: flex; gap: 8px; margin-top: var(--space-4); }
.myp-card__actions .myp-btn { flex: 1; justify-content: center; }

/* ---------- Kurumsal + Neden Biz ---------- */
.myp-about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }

/* Anasayfa "Hakkımızda" kabin/konteyner illüstrasyonu — harici kütüphane
   gerektirmeyen hafif SVG+CSS animasyon (Bölüm 34.3: dış ikon/animasyon
   bağımlılığı yok). */
.myp-about__media {
	background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface));
	border: 1px solid var(--color-primary-border);
	border-radius: var(--radius-image);
	display: flex; align-items: center; justify-content: center;
	min-height: 320px; padding: var(--space-6);
}
.myp-container-anim { width: 100%; max-width: 380px; height: auto; overflow: visible; }
.myp-container-anim__shadow { fill: var(--color-secondary); opacity: .1; }
.myp-container-anim__unit { animation: mypContainerFloat 4.5s ease-in-out infinite; transform-origin: 240px 288px; }
.myp-container-anim__base { fill: var(--color-secondary); }
.myp-container-anim__body { fill: var(--color-white); stroke: var(--color-secondary); stroke-width: 4; }
.myp-container-anim__roof { fill: var(--color-primary); }
.myp-container-anim__panel-line { fill: var(--color-primary-border); }
.myp-container-anim__door { fill: var(--color-primary-soft); stroke: var(--color-secondary); stroke-width: 3; }
.myp-container-anim__handle { fill: var(--color-secondary); }
.myp-container-anim__window { stroke: var(--color-secondary); stroke-width: 3; animation: mypContainerGlow 3.6s ease-in-out infinite; }
.myp-container-anim__window--1 { animation-delay: 0s; }
.myp-container-anim__window--2 { animation-delay: 1.8s; }
@keyframes mypContainerFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}
@keyframes mypContainerGlow {
	0%, 100% { fill: var(--color-primary-border); }
	50% { fill: #FFD98A; }
}
@media (prefers-reduced-motion: reduce) {
	.myp-container-anim__unit, .myp-container-anim__window { animation: none; }
}
.myp-why-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
.myp-why-grid .myp-icon-wrap {
	width: 44px; height: 44px; border-radius: 12px; background: var(--color-primary-soft);
	display: flex; align-items: center; justify-content: center; color: var(--color-primary); margin-bottom: var(--space-3);
}
.myp-why-grid h4 { font-size: 14.5px; margin-bottom: 4px; }
.myp-why-grid p { font-size: 13px; color: var(--color-muted); margin: 0; }

/* ---------- CTA bandı ---------- */
.myp-cta-banner { background: var(--color-secondary); color: var(--color-white); border-radius: var(--radius-card); }
.myp-cta-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) var(--space-8); flex-wrap: wrap; }
.myp-cta-banner h3 { color: var(--color-white); margin-bottom: 4px; }
.myp-cta-banner p { margin: 0; opacity: .85; }
.myp-cta-banner__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.myp-cta-banner .myp-btn--outline { color: var(--color-white); border-color: rgba(255,255,255,.5); }
.myp-cta-banner .myp-btn--outline:hover { background: rgba(255,255,255,.1); }

/* ---------- SSS / Referans / Blog üçlü blok ---------- */
.myp-triple { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-6); }
.myp-triple h3 { font-size: 17px; margin-bottom: var(--space-4); }
.myp-faq-item { border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.myp-faq-item summary { padding: 12px 14px; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.myp-faq-item summary::-webkit-details-marker { display: none; }
.myp-faq-item p { padding: 0 14px 14px; margin: 0; font-size: 13.5px; color: var(--color-muted); }
.myp-ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.myp-ref-grid--page { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.myp-ref-grid--page .myp-ref-grid__item { aspect-ratio: 16 / 9; padding: var(--space-5); }
.myp-ref-grid .myp-ph { aspect-ratio: 3 / 2; min-height: 0; border-radius: 10px; }
.myp-ref-grid__item {
	display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; border-radius: 10px;
	background: var(--color-white); border: 1px solid var(--color-border); padding: var(--space-3);
}
.myp-ref-grid__item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.myp-blog-list { display: flex; flex-direction: column; gap: var(--space-4); }
.myp-blog-list a { display: flex; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 600; }
.myp-blog-list .myp-ph { width: 64px; height: 48px; min-height: 0; border-radius: 8px; flex-shrink: 0; }
.myp-blog-list img { width: 64px; height: 48px; border-radius: 8px; flex-shrink: 0; object-fit: cover; }

/* ---------- İletişim bilgi kartları (Bölüm 29.2) ---------- */
.myp-contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.myp-contact-cards a, .myp-contact-cards div.myp-contact-card {
	display: block; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-card);
	padding: var(--space-6) var(--space-5); text-align: center; transition: box-shadow .15s ease, border-color .15s ease;
}
.myp-contact-cards a:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary-border); }
.myp-contact-cards .myp-icon-wrap {
	width: 48px; height: 48px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary);
	display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4);
}
.myp-contact-cards h4 { font-size: 13px; color: var(--color-muted); font-weight: 600; margin-bottom: 4px; }
.myp-contact-cards p { font-size: 15px; font-weight: 700; color: var(--color-secondary); margin: 0; }
.myp-map-block { margin-top: var(--space-8); text-align: center; }
.myp-map-block .myp-ph { min-height: 320px; margin-bottom: var(--space-4); }

/* ---------- Blog listeleme (Bölüm 27.1) ---------- */
.myp-blog-featured {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center;
	background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-card);
	padding: var(--space-6); margin: var(--space-8) 0; transition: box-shadow .15s ease;
}
.myp-blog-featured:hover { box-shadow: var(--shadow-md); }
.myp-blog-featured .myp-ph { min-height: 240px; }
.myp-blog-featured__body h2 { font-size: 24px; margin: var(--space-3) 0 var(--space-2); color: var(--color-secondary); }
.myp-blog-featured__body p { color: var(--color-muted); }
.myp-blog-featured__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--color-primary); margin-top: var(--space-3); }

.myp-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-8); }
.myp-blog-card {
	background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-card);
	overflow: hidden; transition: box-shadow .15s ease, transform .15s ease;
}
.myp-blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.myp-blog-card .myp-ph { display: block; border-radius: 0; aspect-ratio: 4 / 3; min-height: 0; }
.myp-blog-card > img, .myp-blog-card > a > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.myp-blog-featured > img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.myp-blog-card__body { padding: var(--space-4); }
.myp-blog-card__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); font-size: 12px; color: var(--color-muted); }
.myp-blog-card__body h3 { font-size: 16px; margin-bottom: 6px; }
.myp-blog-card__body h3 a { color: var(--color-secondary); }
.myp-blog-card__body p { font-size: 13.5px; color: var(--color-muted); margin-bottom: var(--space-4); }

/* ---------- İletişim / teklif bölümü ---------- */
.myp-contact { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-7); display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-8); }
.myp-contact__side h3 { font-size: 20px; }
.myp-contact__side p { color: var(--color-muted); }
.myp-contact__side .myp-footer__contact { color: var(--color-text); }
.myp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.myp-form-grid .myp-field--full { grid-column: 1 / -1; }
.myp-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.myp-field input, .myp-field select, .myp-field textarea {
	width: 100%; padding: 11px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-field);
	font-family: inherit; font-size: 14px; background: var(--color-surface);
}
.myp-field textarea { resize: vertical; min-height: 90px; }
.myp-form-note { font-size: 12.5px; color: var(--color-muted); display: flex; align-items: center; gap: 6px; margin-top: var(--space-3); }

/* ---------- Product CTA (WooCommerce) ---------- */
.myp-product-cta { display: flex; gap: 10px; flex-wrap: wrap; margin: var(--space-4) 0; }
.myp-product-cta--card { padding: 0 var(--space-4) var(--space-4); }
.myp-product-cta--card .myp-btn { flex: 1; justify-content: center; }
.myp-product-quote-message {
	background: var(--color-primary-soft); border: 1px solid var(--color-primary-border);
	border-radius: 10px; padding: var(--space-4); font-size: 13.5px; color: var(--color-secondary);
}

/* ---------- WooCommerce katalog (arşiv döngüsü) ---------- */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
/* WooCommerce'in float clearfix'i (ul.products::before/::after) grid'de
   görünmez bir hücre olarak yer kaplayıp tüm ürünleri bir kaydırıyordu. */
ul.products::before, ul.products::after { content: none !important; display: none !important; }
ul.products li.product {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	float: none !important;
	clear: none !important;
	transition: box-shadow .15s ease, transform .15s ease;
	position: relative;
}
ul.products li.product:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
ul.products li.product a.woocommerce-LoopProduct-link { display: block; }
ul.products li.product img {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface));
}
ul.products li.product .woocommerce-loop-product__title {
	font-size: 16px; margin: var(--space-4) var(--space-4) 4px; padding: 0; text-align: center;
}
ul.products li.product .myp-card__tag {
	display: block; width: fit-content; margin: var(--space-4) auto 0; padding: 3px 10px;
	background: var(--color-primary-soft); color: var(--color-primary);
	border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700;
}
ul.products li.product .myp-card__features { margin: var(--space-3) var(--space-4) 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
ul.products li.product .myp-card__features li { font-size: 13px; color: var(--color-muted); display: flex; align-items: flex-start; gap: 6px; }
ul.products li.product .myp-card__features .myp-icon { color: var(--color-primary); width: 13px; height: 13px; flex-shrink: 0; margin-top: 3px; }
ul.products li.product .price { display: none; }

.woocommerce-pagination { margin-top: var(--space-8); }
.woocommerce-pagination ul { display: flex; gap: 8px; justify-content: center; }
.woocommerce-pagination a, .woocommerce-pagination span {
	display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px;
	border: 1px solid var(--color-border); border-radius: 8px; font-size: 13px;
}
.woocommerce-pagination .current { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }

/* ---------- Kategori arşiv sayfası (taxonomy-product_cat.php) ---------- */
.myp-breadcrumb { font-size: 13px; color: var(--color-muted); margin-bottom: var(--space-4); }
.myp-breadcrumb a:hover { color: var(--color-primary); }
.myp-cat-hero { padding-block: var(--space-8); }
.myp-cat-hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-7); align-items: center; }
.myp-cat-hero h1 { font-size: 36px; color: var(--color-secondary); }
.myp-cat-hero p { color: var(--color-muted); max-width: 60ch; }
.myp-cat-hero__cta { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }
.myp-cat-hero__trust { display: flex; gap: var(--space-5); margin-top: var(--space-5); flex-wrap: wrap; }
.myp-cat-hero__trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-muted); font-weight: 600; }
.myp-cat-hero__trust .myp-icon { color: var(--color-primary); width: 15px; height: 15px; }
.myp-cat-hero__media {
	background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface));
	border: 1px solid var(--color-primary-border);
	border-radius: var(--radius-image);
	display: flex; align-items: center; justify-content: center;
	min-height: 260px; overflow: hidden;
}
.myp-cat-hero__media .myp-cat-illust { max-width: 300px; }
.myp-cat-hero__media img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }

.myp-subcats ul { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: 4px; }
.myp-subcats a {
	flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 16px;
	border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600;
	white-space: nowrap;
}
.myp-subcats a:hover, .myp-subcats a.is-active { background: var(--color-primary-soft); border-color: var(--color-primary-border); color: var(--color-primary); }

.myp-filter-bar {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
	flex-wrap: wrap; margin: var(--space-6) 0; padding: var(--space-4); background: var(--color-surface);
	border: 1px solid var(--color-border); border-radius: var(--radius-card);
}
.myp-filter-bar__filters { display: flex; gap: 10px; flex-wrap: wrap; }
.myp-filter-bar select {
	padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-field);
	background: var(--color-white); font-size: 13px;
}
.myp-filter-bar__sort { display: flex; align-items: center; gap: 8px; font-size: 13px; }

.myp-empty-state { text-align: center; padding: var(--space-10) 0; color: var(--color-muted); }

/* ---------- Ürün detay sayfası (single-product) ---------- */
.myp-product-header { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; padding-block: var(--space-6); }
.myp-product-header > .woocommerce-tabs, .myp-product-header > .related { grid-column: 1 / -1; }
/* WooCommerce'in woocommerce_before_single_product hook'u (notices wrapper) grid'in
   ilk hücresini görünmeden işgal edip galeri/özeti bir kaydırıyordu. */
.myp-product-header > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.myp-product-header > .woocommerce-notices-wrapper:empty { display: none; }
/* WooCommerce'in varsayılan .images/.summary float+width kuralları (38%/48%)
   grid hücresinin içinde metni daraltıyordu. */
.myp-product-gallery, .myp-product-summary { width: 100% !important; float: none !important; margin: 0 !important; }
.woocommerce div.product div.images { width: 100% !important; float: none !important; margin: 0; }
.woocommerce div.product div.images img { width: 100%; border-radius: var(--radius-image); aspect-ratio: 4/3; object-fit: cover; }
.woocommerce div.product div.images .flex-viewport { width: 100% !important; }
.woocommerce div.product div.images ol.flex-control-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.woocommerce div.product div.images ol.flex-control-thumbs li { width: calc(25% - var(--space-2) * 3 / 4); }
.woocommerce div.product div.images ol.flex-control-thumbs img { aspect-ratio: 1/1; border-radius: var(--radius-sm, 6px); }
.woocommerce div.product .woocommerce-product-gallery__trigger { display: none; }
.myp-product-badge {
	display: inline-block; margin-bottom: var(--space-3); padding: 4px 12px;
	background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-pill);
	font-size: 12px; font-weight: 700;
}
.woocommerce div.product .product_title { font-size: 30px; color: var(--color-secondary); }
.myp-product-subtitle { color: var(--color-muted); margin-top: -8px; margin-bottom: var(--space-4); }
.myp-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-5) 0; }
.myp-feature-grid__item { display: flex; gap: 10px; align-items: flex-start; }
.myp-feature-grid__item .myp-icon-wrap { width: 34px; height: 34px; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.myp-feature-grid__item strong { display: block; font-size: 13.5px; }
.myp-feature-grid__item span { font-size: 12.5px; color: var(--color-muted); }

.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; padding: 0; margin: var(--space-8) 0 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { list-style: none; margin: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--color-muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); }
.woocommerce div.product .woocommerce-tabs .panel { padding: var(--space-6) 0; }
.myp-spec-table { width: 100%; border-collapse: collapse; }
.myp-spec-table td { padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 13.5px; }
.myp-spec-table td:first-child { color: var(--color-muted); width: 40%; display: flex; align-items: center; gap: 8px; }
.myp-spec-table .myp-icon { color: var(--color-primary); width: 15px; height: 15px; }

.myp-related h2 { font-size: 20px; margin-top: var(--space-10); margin-bottom: var(--space-5); }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
	.myp-card-grid { grid-template-columns: repeat(2, 1fr); }
	.myp-quick-cats ul { grid-template-columns: repeat(3, 1fr); }
	.myp-why-grid { grid-template-columns: repeat(3, 1fr); }
	.myp-hero__inner, .myp-about__inner, .myp-contact { grid-template-columns: 1fr; }
	.myp-footer__inner { grid-template-columns: 1fr 1fr; }
	.myp-triple { grid-template-columns: 1fr; }
	ul.products { grid-template-columns: repeat(2, 1fr) !important; }
	.myp-cat-hero__inner, .myp-product-header { grid-template-columns: 1fr; }
	.myp-blog-grid { grid-template-columns: repeat(2, 1fr); }
	.myp-blog-featured { grid-template-columns: 1fr; }
	.myp-contact-cards { grid-template-columns: repeat(2, 1fr); }
	.myp-feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1279px) {
	.myp-main-nav { display: none; }
	.myp-header__actions .myp-btn { display: none; }
	.myp-nav-toggle { display: flex; }
}

@media (max-width: 767px) {
	.myp-utility-bar__inner > *:not(.myp-utility-bar__msg) { display: none; }
	.myp-mobile-bar { display: flex; }
	body.mikron-yapi-child { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); }

	/* CookieYes çerez bildirimi mobilde ekranın büyük kısmını kaplamasın */
	.cky-consent-container { width: calc(100vw - 24px) !important; max-width: 360px !important; left: 12px !important; right: auto !important; }
	.myp-hero h1 { font-size: 32px; }
	.myp-hero__badge { left: 8px; }
	.myp-card-grid { grid-template-columns: 1fr; }
	/* 3 kutu (Kabinler/Konteynerler/Prefabrik Evler) 2'li ızgarada tek başına
	   kalan üçüncü kutu boşluklu görünüyordu — mobilde tek sütun altta yığılır. */
	.myp-quick-cats ul { grid-template-columns: 1fr; }
	/* "Hangi Çözüme İhtiyacınız Var?" bölümü mobilde kaldırıldı (kullanıcı isteği). */
	.myp-solution-finder { display: none; }
	/* Anasayfadaki "Referanslarımız" logo bloğu mobilde kaldırıldı (kullanıcı
	   isteği) — boyut sorunu kesin çözülsün diye küçültmek yerine gizlendi.
	   Not: /referanslar/ sayfasındaki tam liste bundan etkilenmez, o duruyor. */
	.myp-home-refs { display: none; }
	.myp-ref-grid--page { grid-template-columns: repeat(2, 1fr); }
	.myp-why-grid { grid-template-columns: 1fr 1fr; }
	.myp-footer__inner { grid-template-columns: 1fr; }
	.myp-form-grid { grid-template-columns: 1fr; }
	ul.products { grid-template-columns: 1fr !important; }
	.myp-filter-bar { flex-direction: column; align-items: stretch; }
	.myp-blog-grid { grid-template-columns: 1fr; }
	.myp-contact-cards { grid-template-columns: 1fr; }

	/* Bölüm/footer dikey boşlukları masaüstü için tasarlanmış (80px/48px/40px);
	   mobilde art arda gelen bölümlerde orantısız büyük görünüp "boşluk çok
	   fazla" hissi veriyordu. */
	.myp-section { padding-block: var(--space-6); }
	.myp-footer { padding-top: var(--space-7); }
	.myp-footer__inner { padding-bottom: var(--space-6); }
	.myp-cat-hero { padding-block: var(--space-6); }
	.myp-hero__inner { padding-block: var(--space-7); }
	.myp-map-block .myp-ph { min-height: 220px; }

	/* Kutunun kendi büyük padding'i + .myp-container'ın 24px yatay padding'i
	   üst üste binince mobilde içerik alanı aşırı daralıyordu. */
	.myp-cta-banner__inner { padding: var(--space-5); }
	.myp-contact { padding: var(--space-5); }

	/* min-height, aspect-ratio ile birlikte kullanılınca dar genişlikte
	   görseli olması gerekenden uzun/orantısız gösteriyordu. */
	.myp-hero__media .myp-ph, .myp-hero__media-img { min-height: 0; }
	.myp-cat-hero__media, .myp-cat-hero__media img { min-height: 180px; }

	/* Mobilde telefon/e-posta gizlenince tek kalan mesaj margin-left:auto
	   yüzünden sağa yapışıp solda boş alan bırakıyordu. */
	.myp-utility-bar__inner { justify-content: center; }
	.myp-utility-bar__msg { margin-left: 0; }

	/* justify-content:space-between + wrap tanımsızlığı, iki metin satırı
	   (copyright + "Web Tasarım: …") mobilde sıkışıp taşma riski taşıyordu. */
	.myp-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); }

	/* .myp-product-header'ın 48px grid gap'i masaüstünde galeri/özet SÜTUNLARI
	   arasındaki yatay boşluk için tasarlanmış; mobilde tek sütuna düşünce aynı
	   48px her bloğun (galeri→özet→sekmeler) arasında dikey boşluğa dönüşüyor.
	   Sekmelerin kendi üst margin'iyle üst üste binince CTA butonları ile
	   "Açıklama" sekmesi arasında ~112px'lik gereksiz boşluk oluşuyordu. */
	.myp-product-header { gap: var(--space-4); }
	.woocommerce div.product .woocommerce-tabs ul.tabs { margin-top: var(--space-5); }
}