/* ============================================================
   Endüs3D — MARKA KATMANI (2026-10-15)
   ============================================================
   Kaan: "Çok boş duruyor, kompakt ve bütün durmalı; özellikle mobilde aşırı
   amatör. Ucuz bir WordPress sayfasından, yıllardır hizmet veren bir markaya."

   Teşhis (mobilde ölçüldü, 375px): duyuru çubuğu 2 satır (64px) + başlık 2
   satır (182px) + Storefront'un başlık altına koyduğu ~60px boş bant = içerik
   ilk ekranın altında başlıyordu; hero 629px; paneller 4x240px çizgili yer
   tutucu; footer'da boş sütun.

   Bu dosya diğer tüm tema CSS'lerinden SONRA yüklenir (bkz. theme-setup.php)
   ve onları geçersiz kılar; böylece tek dosyadan okunur/geri alınır.

   İlkeler: tek satırlı sıkı üst bölüm · boşluk ritmi 8'in katları · kesik
   köşe (clip-path) imzası her yerde aynı · koyu yeşil/mürekkep tonları +
   krem · kutular yer tutucu değil, çizimle dolu.
   ============================================================ */

/* ---------- Genel ---------- */
body { overflow-x: clip; } /* tam genişlik (100vw) bölümler yatay kaydırma yaratmasın */

/* ---------- Duyuru çubuğu: ince, tek satır ---------- */
.e3d-announce {
	padding: 7px 20px;
	font-size: 11px;
	letter-spacing: .13em;
	justify-content: center;
	text-align: center;
	gap: 2px 28px;
}
@media (min-width: 901px) {
	.e3d-announce { padding: 8px 56px; font-size: 11.5px; justify-content: space-between; }
}
@media (max-width: 600px) {
	/* Telefonda tek mesaj: ikinci cümle hem uzun hem tekrar. */
	.e3d-announce .e3d-announce-accent { display: none; }
}

/* ---------- Başlık: sıkı, sabit, tek satır ---------- */
/* Storefront .site-header'a (a) 1.6-2.6em iç boşluk ve (b) `.home.blog .site-header`
   ile 4.24em ALT boşluk veriyor; ikincisi gövde sınıfları yüzünden her normal
   kuralımızdan güçlü. Mobilde ölçüldü: başlığın altında 68px boş beyaz bant.
   Bu iki özellik bilerek !important. */
html body .site-header.e3d-header {
	margin-bottom: 0 !important;
	padding: 0 !important;
}
.site-header.e3d-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 60;
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: saturate(1.2) blur(8px);
	backdrop-filter: saturate(1.2) blur(8px);
}
.e3d-header-inner { padding: 14px 56px; }
.e3d-logo-mark { width: 30px; height: 30px; font-size: 14px; }
.e3d-logo-word { font-size: 20px; }

/* Mobil menüdeki ek bölüm (arama + giriş); masaüstünde yok. */
.e3d-nav-extra { display: none; }

@media (max-width: 900px) {
	.e3d-header-inner { padding: 10px 20px; gap: 10px; }
	.e3d-logo { order: 1; }
	.e3d-header-actions { order: 2; margin-left: auto; gap: 10px; }
	.e3d-nav { order: 3; flex-basis: 100%; padding: 4px 0 14px; margin-top: 8px; }
	.e3d-logo-mark { width: 28px; height: 28px; font-size: 13px; }
	.e3d-logo-word { font-size: 17px; letter-spacing: .14em; }
	/* Ara / Giriş menünün içine taşındı; üstte sadece sepet + menü kaldı. */
	.e3d-header-actions .e3d-action-link { display: none; }
	.e3d-cart-link { padding: 6px 11px; font-size: 12.5px; }

	.e3d-nav-link { padding: 13px 0; font-size: 15px; }
	.e3d-nav-link.is-vurgu { border-bottom-color: var(--e3d-border); }
	.e3d-nav-extra { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
	.e3d-nav-extra a { font-size: 14px; color: var(--e3d-muted-1) !important; }
}

/* ---------- Ana sayfa: hero ---------- */
.e3d-hero--tek {
	min-height: 0;
	padding: clamp(40px, 7vw, 88px) 20px clamp(32px, 5vw, 60px);
	position: relative;
	background:
		radial-gradient(ellipse 60% 70% at 50% 0%, rgba(53, 176, 167, .11), transparent 70%);
}
/* İnce dikey çizgi: teknik çizim kâğıdı / atölye imzası. */
.e3d-hero--tek::before {
	content: ''; width: 1px; height: 36px; justify-self: center;
	background: linear-gradient(to bottom, transparent, var(--e3d-teal));
	margin-bottom: 14px;
}
.e3d-hero--tek .e3d-hero-copy { padding: 0; gap: 16px; max-width: 760px; }
.e3d-hero--tek .e3d-hero-title { font-size: clamp(34px, 6.4vw, 66px); line-height: 1.05; letter-spacing: .005em; }
.e3d-hero--tek .e3d-hero-title span { display: inline-block; }
.e3d-hero--tek .e3d-hero-desc { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.62; max-width: 52ch; }
.e3d-hero--tek .e3d-hero-actions { padding-top: 10px; gap: 12px; }
.e3d-hero--tek .e3d-btn { padding: 14px 28px; }

@media (max-width: 600px) {
	.e3d-hero--tek .e3d-hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; margin-inline: auto; }
	.e3d-hero--tek .e3d-btn { padding: 13px 20px; font-size: 14px; text-align: center; justify-content: center; }
}

/* ---------- Güvence satırı ---------- */
.e3d-guven {
	list-style: none; margin: 0; padding: 16px 20px;
	width: 100vw; margin-left: calc(50% - 50vw);
	display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 30px;
	background: #fff; border-top: 1px solid var(--e3d-border); border-bottom: 1px solid var(--e3d-border);
	font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--e3d-muted-2);
}
.e3d-guven li { display: flex; align-items: center; gap: 10px; }
.e3d-guven li::before {
	content: ''; width: 6px; height: 6px; flex: none; background: var(--e3d-teal); transform: rotate(45deg);
}
@media (max-width: 600px) {
	.e3d-guven { gap: 6px 18px; font-size: 10.5px; padding: 14px 16px; letter-spacing: .08em; }
}

/* ---------- Bölüm başlıkları ---------- */
.e3d-section-head { padding: 52px 56px 0; }
.e3d-section-head h2 { font-size: clamp(26px, 3.4vw, 34px); }
.e3d-olustur .e3d-section-head { padding-bottom: 22px; }
@media (max-width: 1100px) { .e3d-section-head { padding: 40px 24px 0; } }
@media (max-width: 600px) { .e3d-section-head { padding: 32px 20px 0; } .e3d-olustur .e3d-section-head { padding-bottom: 16px; } }

/* ---------- "Ne üretelim?" paneli: çizimli, koyu tonlu ---------- */
.e3d-kol-serit .e3d-kol-panel .e3d-kol-panel-zemin {
	background: linear-gradient(158deg, var(--e3d-p1, #00543A), var(--e3d-p2, #003D2A));
}
.e3d-kol-serit .e3d-kol-panel:nth-child(4n+1) { --e3d-p1: #00543A; --e3d-p2: #003826; }
.e3d-kol-serit .e3d-kol-panel:nth-child(4n+2) { --e3d-p1: #22221C; --e3d-p2: #12120D; }
.e3d-kol-serit .e3d-kol-panel:nth-child(4n+3) { --e3d-p1: #0C5A52; --e3d-p2: #053B36; }
.e3d-kol-serit .e3d-kol-panel:nth-child(4n+4) { --e3d-p1: #38372D; --e3d-p2: #1A1A15; }
/* Çizim kâğıdı ızgarası, sağ üstten solan. */
.e3d-kol-panel-zemin::before {
	content: ''; position: absolute; inset: 0; opacity: .13;
	background-image:
		linear-gradient(to right, #9FD3C7 1px, transparent 1px),
		linear-gradient(to bottom, #9FD3C7 1px, transparent 1px);
	background-size: 30px 30px;
	-webkit-mask-image: radial-gradient(circle at 72% 30%, #000 8%, transparent 70%);
	mask-image: radial-gradient(circle at 72% 30%, #000 8%, transparent 70%);
}
.e3d-kol-panel .cizim {
	position: absolute; right: 7%; top: 12%; width: clamp(84px, 15vw, 190px);
	color: #EAF2EC; opacity: .24; pointer-events: none;
	transition: opacity .5s ease, transform .7s cubic-bezier(.16, .8, .3, 1);
}
.e3d-kol-panel .cizim svg { width: 100%; height: auto; display: block; stroke-width: 1.2; }
.e3d-kol-panel.is-active .cizim { opacity: .42; transform: translateY(-6px) scale(1.07); }

.e3d-kol-serit--ana { --e3d-panel-yukseklik: min(50vh, 430px); margin-bottom: 34px; }

/* Süreç şeridi: ana sayfada sıkı. */
.e3d-olustur .e3d-surec-seridi { margin: 0; padding: 0 56px; }
.e3d-olustur .e3d-surec-adim { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.e3d-olustur .e3d-surec-adim::before { width: 34px; height: 34px; margin-bottom: 10px; }
.e3d-olustur .e3d-surec-adim::after { top: 21px; left: calc(-50% + 17px); width: calc(100% - 34px); }
@media (max-width: 1100px) { .e3d-olustur .e3d-surec-seridi { padding: 0 24px; } }

@media (max-width: 900px) {
	/* Telefonda: 4 dev kart yerine 2x2 kompakt döşeme. */
	.e3d-kol-serit--ana {
		display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
		height: auto; width: 100%; margin: 0 0 28px; padding: 0 20px;
	}
	.e3d-kol-serit--ana .e3d-kol-panel {
		height: 168px; margin: 0 !important; border-radius: 0;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
		transform: none !important; opacity: 1 !important; /* e3d-kol-serit.js'in satır içi ölçeğini ezer */
	}
	.e3d-kol-serit--ana .e3d-kol-panel-govde { padding: 14px 14px 16px; }
	.e3d-kol-serit--ana .baslik { font-size: 16px; line-height: 1.2; }
	.e3d-kol-serit--ana .aciklama { display: none; }
	.e3d-kol-serit--ana .alt-satir { margin-top: 8px; font-size: 11px; max-height: none; opacity: 1; transform: none; }
	.e3d-kol-serit--ana .teslim-suresi { display: none; }
	/* Çizim sağ üst köşede küçük kalsın; 3 satırlık başlıkların arkasına binmesin. */
	.e3d-kol-serit--ana .cizim { width: 50px; right: 10px; top: 10px; opacity: .3; }
	.e3d-olustur .e3d-surec-seridi { padding: 0 20px; row-gap: 22px; }
}

/* Hub (kisiye-ozel) şeridi: mobilde çizim biraz küçük. */
@media (max-width: 900px) {
	.e3d-kol-panel .cizim { width: 84px; top: 16px; right: 16px; }
}

/* ---------- Hazır ürünler ---------- */
.e3d-family-grid { padding: 24px 56px 52px; gap: 20px; }
.e3d-family-media--marka {
	background: linear-gradient(158deg, #00543A, #003826);
	display: flex; align-items: center; justify-content: center;
}
.e3d-family-media--marka::after {
	content: 'E3'; font-family: var(--e3d-font-display); font-size: 44px; letter-spacing: .08em; color: rgba(234, 242, 236, .22);
}
.e3d-family-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1100px) { .e3d-family-grid { padding: 20px 24px 40px; } }
@media (max-width: 600px) {
	.e3d-family-grid { padding: 16px 20px 32px; gap: 14px; }
	.e3d-family-media { aspect-ratio: 16 / 10; }
	.e3d-family-body { padding: 16px 16px 18px; }
	.e3d-family-body h3 { font-size: 20px; }
}

.e3d-b2b-banner { padding: 40px 56px; }
@media (max-width: 600px) { .e3d-b2b-banner { padding: 32px 20px; gap: 20px; } .e3d-b2b-copy h3 { font-size: 26px; } }

/* ---------- Footer: koyu yeşil, sıkı, boş sütun yok ---------- */
/* Storefront'un özelleştirici CSS'i `.site-footer`a açık gri zemin, kendi metin/bağlantı
   renkleri ve ~6.6em üst boşluk basıyor (satır içi, sonradan yüklenir). Zemin, iç boşluk
   ve renkler bu yüzden bilerek !important + yüksek özgüllük. */
html body .site-footer.e3d-footer {
	background: var(--e3d-green-deep) !important;
	color: #B9D0C6 !important;
	border-top: 0;
	padding: 0 !important;
}
html body .site-footer.e3d-footer .e3d-footer-logo { color: var(--e3d-cream) !important; }
html body .site-footer.e3d-footer .e3d-footer-brand p { color: #A5C0B4 !important; }
html body .site-footer.e3d-footer .e3d-footer-col,
html body .site-footer.e3d-footer .e3d-footer-col a:not(.button) { color: #B9D0C6 !important; text-decoration: none; }
html body .site-footer.e3d-footer .e3d-footer-col a:not(.button):hover { color: #fff !important; text-decoration: underline; }
html body .site-footer.e3d-footer .e3d-footer-heading { color: var(--e3d-teal-light) !important; }
html body .site-footer.e3d-footer .e3d-footer-alt,
html body .site-footer.e3d-footer .e3d-footer-alt span { color: #8FB0A3 !important; }
.e3d-footer-inner {
	display: grid;
	grid-template-columns: minmax(220px, 1.6fr) repeat(auto-fit, minmax(140px, 1fr));
	gap: 28px 40px;
	padding: 44px 56px 36px;
}
.e3d-footer-logo { color: var(--e3d-cream); font-size: 19px; }
.e3d-footer-brand p { color: #A5C0B4; max-width: 300px; }
.e3d-footer-col, .e3d-footer-col a { color: #B9D0C6; }
.e3d-footer-col a:hover { color: #fff; }
.e3d-footer-heading { color: var(--e3d-teal-light); font-size: 11px; letter-spacing: .16em; }
.e3d-footer-alt {
	border-top: 1px solid rgba(247, 243, 236, .12);
	padding: 16px 56px; font-size: 12px; color: #8FB0A3;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px;
}
@media (max-width: 900px) {
	.e3d-footer-inner { grid-template-columns: 1fr 1fr; padding: 32px 20px 26px; gap: 24px 20px; }
	.e3d-footer-brand { grid-column: 1 / -1; }
	.e3d-footer-alt { padding: 14px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.e3d-kol-panel .cizim { transition: none; transform: none !important; }
}

/* ============================================================
   BREADCRUMB + MOBİL GEZİNME (2026-10-15, ikinci tur)
   ============================================================
   Kaan: "breadcrumb çok ucuz duruyor; mobilde navbar alanı çok amatör."

   Breadcrumb'ın sorunları (ölçüldü): ayrı beyaz bantta duruyordu (88px +
   altında 59px boşluk), başlıktaki logoyla hizasızdı, alt çizgili linkler +
   küçük "ev" ikonu eski bir web stili veriyordu. Artık: krem zeminde ince bir
   şerit, logoyla aynı hizada, duyuru çubuğu/güvence satırıyla aynı küçük harfli
   yazı sesi, çizgisiz linkler, ince ok ayraçlar. Mobilde tek bir "‹ Üst sayfa"
   geri bağlantısı (uygulama gibi, tek satır, taşmaz).
   Storefront bu özellikleri yüksek özgüllükle basıyor; o yüzden `html body ...`
   ile ezilir. */

html body .storefront-breadcrumb {
	background: var(--e3d-cream);
	margin: 0;
	padding: 18px 0 0;
	border: 0;
}
html body .storefront-breadcrumb .col-full {
	max-width: none;
	margin: 0;
	padding: 0 56px;
}
html body .woocommerce-breadcrumb {
	margin: 0;
	padding: 0;
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--e3d-black);
	line-height: 1.4;
}
/* Storefront'un FontAwesome "ev" ikonu */
html body .woocommerce-breadcrumb a:first-of-type::before { content: none; display: none; }
html body .woocommerce-breadcrumb a {
	color: var(--e3d-muted-3);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
html body .woocommerce-breadcrumb a:hover { color: var(--e3d-green); border-bottom-color: var(--e3d-teal); }
/* Ayraç: metin "/" yerine ince bir ok. */
html body .woocommerce-breadcrumb .breadcrumb-separator {
	display: inline-block;
	font-size: 0;
	width: 5px;
	height: 5px;
	margin: 0 12px 1px;
	border-top: 1px solid var(--e3d-muted-3);
	border-right: 1px solid var(--e3d-muted-3);
	transform: rotate(45deg);
	vertical-align: middle;
}
/* Başlık bloğu zaten kendi üst boşluğunu taşıyor; şeritle çift boşluk olmasın. */
.e3d-kisiye-ozel-kol { padding-top: 28px; }

@media (max-width: 900px) {
	html body .storefront-breadcrumb { padding-top: 14px; }
	html body .storefront-breadcrumb .col-full { padding: 0 20px; }
	/* Tek satır "‹ Üst sayfa": nav'ın yazı boyutu 0, yalnız SON bağlantı görünür
	   (güncel sayfa bir metin düğümü, font-size:0 onu da gizler). */
	html body .woocommerce-breadcrumb { font-size: 0; letter-spacing: 0; }
	html body .woocommerce-breadcrumb a,
	html body .woocommerce-breadcrumb .breadcrumb-separator { display: none; }
	html body .woocommerce-breadcrumb a:last-of-type {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 11.5px;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--e3d-muted-1);
		padding: 4px 0;
	}
	html body .woocommerce-breadcrumb a:last-of-type::before {
		content: '';
		display: inline-block;
		width: 6px;
		height: 6px;
		border-left: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		margin-right: 2px;
	}
	.e3d-kisiye-ozel-kol { padding-top: 20px; }
}

/* ---------- Sepet: masaüstünde metin, mobilde ikon + rozet ---------- */
.e3d-cart-ikon, .e3d-cart-sayi { display: none; }

/* ---------- Hamburger: ince iki-üç çizgi, açılınca çarpı ---------- */
.e3d-menu-toggle { width: 40px; height: 40px; gap: 6px; align-items: center; margin-right: -6px; }
.e3d-menu-toggle-bar {
	width: 22px; height: 1.5px; border-radius: 1px; background: var(--e3d-black);
	transition: transform .3s cubic-bezier(.16, .8, .3, 1), opacity .2s ease, width .3s ease;
}
.e3d-menu-toggle-bar:nth-of-type(3) { width: 14px; align-self: flex-end; margin-right: 9px; }
.e3d-menu-toggle[aria-expanded="true"] .e3d-menu-toggle-bar:nth-of-type(2) { transform: translateY(7.5px) rotate(45deg); }
.e3d-menu-toggle[aria-expanded="true"] .e3d-menu-toggle-bar:nth-of-type(3) { opacity: 0; }
.e3d-menu-toggle[aria-expanded="true"] .e3d-menu-toggle-bar:nth-of-type(4) { transform: translateY(-7.5px) rotate(-45deg); }

@keyframes e3d-menu-ac { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes e3d-menu-oge { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
	/* --- üst çubuk: logo solda; sağda sepet ikonu + menü --- */
	.e3d-header-actions { gap: 4px; }
	.e3d-cart-link {
		position: relative; display: inline-flex; align-items: center; justify-content: center;
		width: 40px; height: 40px; padding: 0; border: 0; color: var(--e3d-black) !important;
	}
	.e3d-cart-link:hover { border: 0; }
	.e3d-cart-ikon { display: block; width: 24px; height: 24px; }
	.e3d-cart-metin { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.e3d-cart-sayi {
		display: flex; align-items: center; justify-content: center;
		position: absolute; top: 3px; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
		border-radius: 9px; background: var(--e3d-green); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 1;
	}
	.e3d-cart-sayi[hidden] { display: none; }

	/* --- açılır panel: sayfayı itmez, perdeli panel olarak biner --- */
	.e3d-nav {
		display: none;
		position: absolute; top: 100%; left: 0; right: 0; z-index: 2;
		order: 0; flex-basis: auto; margin: 0; padding: 4px 20px 24px;
		background: #fff; border-top: 1px solid var(--e3d-border);
		box-shadow: 0 30px 44px -26px rgba(20, 20, 15, .4);
		max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); overflow-y: auto;
		overscroll-behavior: contain;
	}
	.e3d-nav.is-open { display: flex; flex-direction: column; animation: e3d-menu-ac .3s cubic-bezier(.16, .8, .3, 1); }
	.e3d-nav.is-open > * { animation: e3d-menu-oge .4s cubic-bezier(.16, .8, .3, 1) both; }
	.e3d-nav.is-open > :nth-child(2) { animation-delay: .05s; }
	.e3d-nav.is-open > :nth-child(3) { animation-delay: .1s; }
	.e3d-nav.is-open > :nth-child(4) { animation-delay: .15s; }
	.e3d-nav.is-open > :nth-child(5) { animation-delay: .2s; }

	/* perde: panelin altındaki sayfa kararır; dokununca menü kapanır (e3d-header.js) */
	/* display/width bilerek açık: Storefront'un clearfix'i `.site-header::after { display:table }`
	   veriyor ve bu, mutlak konumlu perdeyi 0px genişliğe düşürüp görünmez yapıyordu. */
	.e3d-header:has(.e3d-nav.is-open)::after {
		content: ''; display: block; position: absolute; top: 100%; left: 0; right: 0; width: 100%; height: 100vh; z-index: 1;
		background: rgba(20, 20, 15, .4);
	}
	html.e3d-menu-acik { overflow: hidden; }

	/* menü bağlantıları: büyük, ferah, başlık yazısıyla */
	.e3d-nav-link {
		font-family: var(--e3d-font-display);
		font-size: 21px; letter-spacing: .01em; line-height: 1.2;
		padding: 17px 0; color: var(--e3d-black) !important;
		border-bottom: 1px solid var(--e3d-border);
	}
	.e3d-nav-link.is-vurgu {
		display: flex; align-items: center; gap: 12px;
		color: var(--e3d-green) !important; font-weight: 400;
	}
	.e3d-nav-link.is-vurgu::before {
		content: ''; width: 7px; height: 7px; flex: none; background: var(--e3d-teal); transform: rotate(45deg);
	}
	.e3d-nav-link.is-muted { color: var(--e3d-muted-1) !important; }

	/* arama + hesap */
	.e3d-nav-extra { gap: 16px; padding-top: 20px; }
	.e3d-nav-extra a {
		font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--e3d-muted-1) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.e3d-nav.is-open, .e3d-nav.is-open > * { animation: none; }
	.e3d-menu-toggle-bar { transition: none; }
}