/*
Theme Name: Mochea
Theme URI: https://mochea.com.tr
Description: Mochéa takma kirpik markası için Twenty Twenty-Five child teması. Pembe/çilek marka paleti, Playfair Display başlık tipografisi.
Author: Mochea
Template: twentytwentyfive
Version: 1.1.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: mochea
*/

/* ---- Genel ince ayarlar ---- */

.wp-block-site-title a {
	text-decoration: none;
}

/* Woo'nun navigasyona otomatik eklediği mini-cart ikonunu gizle
   (header'da kendi "Sepet" linkimiz var, çift görünmesin) */
header .wc-block-mini-cart {
	display: none;
}

/* Footer listeleri: madde imsiz, sade */
footer .wp-block-list {
	list-style: none;
	padding-left: 0;
}

footer .wp-block-list a {
	text-decoration: none;
}

footer .wp-block-list a:hover {
	text-decoration: underline;
}

footer .wp-block-list li {
	margin-bottom: .4em;
}

/* ---- Hero görseli: yumuşak gölge ---- */

.mochea-hero-img img {
	box-shadow: 0 24px 60px -24px rgba(122, 62, 70, 0.45);
}

/* Hero kirpik illüstrasyonu: dikişsiz, gölgesiz */
.mochea-hero-lash img {
	display: block;
}

/* Ürün kartları: hafif kalkma efekti */
.woocommerce ul.products li.product {
	transition: transform .25s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
}

/* Adım listesi: rakamları çilek renginde, serif */
.mochea-steps {
	list-style: none;
	counter-reset: adim;
	padding-left: 0;
}

.mochea-steps > li {
	counter-increment: adim;
	position: relative;
	padding-left: 3.2rem;
	margin-bottom: 1.1rem;
}

.mochea-steps > li::before {
	content: "0" counter(adim);
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--wp--preset--font-family--playfair-display), serif;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--accent-1);
}

/* Header logosu: link altı çizgisiz */
.wp-block-site-logo a {
	text-decoration: none;
}

/* ---- Otomatik kayan görsel galerisi ---- */

.mochea-slider {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: #F6EEF0;
}

.mochea-slider__ray {
	display: flex;
	transition: transform .7s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

.mochea-slider__slayt {
	flex: 0 0 100%;
	min-width: 100%;
}

.mochea-slider__slayt img {
	display: block;
	width: 100%;
	height: auto;
}

/* Alt kontrol çubuğu: [‹] noktalar [›] */
.mochea-slider__kontrol {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.mochea-slider__ok {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--wp--preset--color--contrast, #2E1F22);
	box-shadow: 0 3px 12px -4px rgba(46, 31, 34, .45);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.mochea-slider__ok:hover,
.mochea-slider__ok:focus-visible {
	background: #fff;
	transform: scale(1.08);
}

.mochea-slider__ok svg {
	display: block;
	width: 14px;
	height: 14px;
}

.mochea-slider__noktalar {
	display: flex;
	align-items: center;
	gap: 7px;
}

.mochea-slider__nokta {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 1px 4px rgba(46, 31, 34, .35);
	cursor: pointer;
	transition: width .3s ease, background-color .3s ease;
}

.mochea-slider__nokta.is-aktif {
	width: 22px;
	border-radius: 999px;
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {

	.mochea-slider__ray {
		transition: none;
	}
}

/* ---- Önce / sonra görseli etiketleri ---- */

.mochea-oncesonra {
	position: relative;
	display: block;
}

.mochea-oncesonra .elementor-widget-container,
.mochea-oncesonra figure,
.mochea-oncesonra img {
	display: block;
	width: 100%;
}

.mochea-oncesonra::before,
.mochea-oncesonra::after {
	position: absolute;
	bottom: 14px;
	z-index: 2;
	padding: .4rem .85rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	color: var(--wp--preset--color--contrast, #2E1F22);
	font-family: var(--wp--preset--font-family--manrope), sans-serif;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1;
	box-shadow: 0 4px 14px -6px rgba(46, 31, 34, .4);
	pointer-events: none;
}

.mochea-oncesonra::before {
	content: "ÖNCE";
	left: 14px;
}

.mochea-oncesonra::after {
	content: "SONRA";
	right: 14px;
	background: var(--wp--preset--color--contrast, #2E1F22);
	color: #fff;
}

@media (max-width: 600px) {

	.mochea-oncesonra::before,
	.mochea-oncesonra::after {
		bottom: 10px;
		padding: .32rem .65rem;
		font-size: .6rem;
	}

	.mochea-oncesonra::before { left: 10px; }
	.mochea-oncesonra::after  { right: 10px; }

	/* Dar ekranda oklar ÖNCE/SONRA rozetlerine değmesin */
	.mochea-slider__kontrol {
		bottom: 10px;
		gap: 8px;
	}

	.mochea-slider__ok {
		width: 26px;
		height: 26px;
	}
}

/* ---- Sepete eklendi bildirimi ---- */

.mochea-toast {
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 99999;
	width: 320px;
	max-width: calc(100vw - 32px);
	background: #fff;
	border: 1px solid #EFE6E8;
	border-radius: 16px;
	box-shadow: 0 24px 60px -20px rgba(46, 31, 34, .28);
	padding: 1rem 1.1rem .85rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity .28s ease, transform .28s ease, visibility .28s;
	overflow: hidden;
}

.mochea-toast.is-acik {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mochea-toast__ust {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
}

.mochea-toast__tik {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-1, #B93A42);
	color: #fff;
	font-size: .82rem;
	line-height: 26px;
	text-align: center;
}

.mochea-toast__baslik {
	display: block;
	font-size: .95rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #2E1F22);
	line-height: 1.3;
}

.mochea-toast__ad {
	display: block;
	margin-top: .15rem;
	font-size: .84rem;
	line-height: 1.45;
	color: var(--wp--preset--color--accent-4, #6E6164);
}

.mochea-toast__link {
	display: block;
	margin: .85rem 0 .1rem;
	padding: .62rem 1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast, #2E1F22);
	color: #fff !important;
	text-align: center;
	text-decoration: none;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	transition: background-color .2s ease;
}

.mochea-toast__link:hover {
	background: var(--wp--preset--color--accent-1, #B93A42);
	color: #fff !important;
}

.mochea-toast__kapat {
	position: absolute;
	top: 6px;
	right: 10px;
	border: 0;
	background: none;
	color: #A89396;
	font-size: 1.2rem;
	line-height: 1;
	padding: .25rem;
	cursor: pointer;
}

.mochea-toast__kapat:hover {
	color: var(--wp--preset--color--contrast, #2E1F22);
}

/* 3 saniyelik, soldan sağa ilerleyen zamanlayıcı */
.mochea-toast__cubuk {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: #F6E9EC;
}

.mochea-toast__cubuk > span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--wp--preset--color--accent-1, #B93A42);
}

.mochea-toast__cubuk > span.is-calisiyor {
	animation: mochea-sayac 3s linear forwards;
}

.mochea-toast.is-duraklatildi .mochea-toast__cubuk > span {
	animation-play-state: paused;
}

@keyframes mochea-sayac {
	from { width: 0; }
	to   { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {

	.mochea-toast {
		transition: none;
	}

	.mochea-toast__cubuk > span.is-calisiyor {
		animation-duration: .01s;
	}
}

@media (max-width: 600px) {

	.mochea-toast {
		top: 12px;
		right: 12px;
		left: 12px;
		width: auto;
	}
}

/* ============================================================
   HERO RENKLERİ — SABİTLENDİ
   Bu değerler Elementor'da da kayıtlı; ancak editör açıkken yapılan
   kayıtlar bunları sıfırlayabildiği için burada da sabitlendi.
   Değiştirmek gerekirse önce bu blok kaldırılmalı.
   ============================================================ */

.elementor-element-f46167c .elementor-heading-title {
	color: #E9A1AA !important;
}

.elementor-element-68dbdaa,
.elementor-element-68dbdaa p {
	color: rgba(255, 255, 255, .82) !important;
}

/* Koleksiyonu Keşfet — krem zemin, bordo yazı */
.elementor-element-8e8a59d .elementor-button {
	background-color: #F8E9E6 !important;
	color: #2A171B !important;
}

.elementor-element-8e8a59d .elementor-button:hover,
.elementor-element-8e8a59d .elementor-button:focus {
	background-color: #B93A42 !important;
	color: #FFFFFF !important;
}

/* Nasıl Uygulanır? — şeffaf zemin, krem çerçeve, beyaz yazı */
.elementor-element-7f19540 .elementor-button {
	background-color: transparent !important;
	color: #FFFFFF !important;
	border: 1px solid #F8E9E6 !important;
}

.elementor-element-7f19540 .elementor-button:hover,
.elementor-element-7f19540 .elementor-button:focus {
	background-color: #F8E9E6 !important;
	color: #2A171B !important;
	border-color: #F8E9E6 !important;
}

/* ============================================================
   MOBİL DÜZENLEMELER
   Tamamı max-width:767px içinde — masaüstü görünümü etkilenmez.
   ============================================================ */

@media (max-width: 767px) {

	/* --- Dokunma hedefleri (WCAG 44x44) --- */
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	header .wc-block-cart-link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* --- Başlık çubuğu: iki satıra düşmesin, tek satırda dursun --- */
	header .wp-block-group.alignwide {
		flex-wrap: nowrap !important;
		gap: .5rem;
	}

	header .wp-block-site-logo {
		flex: 0 1 auto;
		min-width: 0;
	}

	header .wp-block-site-logo img {
		max-width: 112px;
		height: auto;
	}

	header .wp-block-group.alignwide > .wp-block-group {
		flex: 0 0 auto;
		gap: .35rem !important;
	}

	header .wc-block-cart-link {
		font-size: 0;           /* "Sepet" yazısını gizle, ikon kalsın */
		padding-inline: .35rem;
	}

	header .wc-block-cart-link::before,
	header .wc-block-cart-link svg {
		font-size: 1rem;
	}

	/* --- Bölüm dolguları: mobilde daha derli toplu --- */
	.e-con.e-parent {
		--padding-top: 60px;
		--padding-bottom: 60px;
	}

	/* --- Ürün kartları: metinler kırılmasın --- */
	.woocommerce ul.products {
		gap: 1rem;
	}

	.woocommerce ul.products li.product {
		padding: .75rem .7rem 1.1rem;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: .95rem;
		margin-top: .7rem;
	}

	.woocommerce ul.products li.product .price {
		margin-bottom: .75rem;
		font-size: .95rem;
	}

	.woocommerce ul.products li.product .button {
		width: 100%;
		white-space: nowrap;     /* "SEPETE EKLE" iki satıra bölünmesin */
		padding: .7em .5em;
		font-size: .68rem;
		letter-spacing: .05em;
	}

	/* --- Kategori kartları ---
	   Kartlar masaüstünde 380px; mobilde dar-uzun olunca geniş formatlı
	   arka plan görseli yanlardan kırpılıyor ve çilek/pırıltılar kayboluyordu.
	   230px'te görselin tamamı yatayda sığıyor. */
	.elementor-element-033d851 .e-con.e-child {
		--min-height: 230px;
		min-height: 230px;
	}

	.elementor-element-033d851 .e-con.e-child .elementor-widget-heading {
		margin-bottom: 0;
	}

	/* --- Arka plan görselli bölümlerde metin okunabilirliği --- */
	.elementor-element-a3b778a {
		position: relative;
		isolation: isolate;
	}

	.elementor-element-a3b778a::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		background: rgba(46, 31, 34, .55);
		pointer-events: none;
	}

	.elementor-element-a3b778a > * {
		position: relative;
		z-index: 1;
	}

	/* --- Alt bilgi: satır aralığını topla --- */
	footer .wp-block-list {
		line-height: 1.9;
	}
}

.wp-block-button__link {
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ---- WooCommerce ürün kartları (shortcode / klasik grid) ---- */

.woocommerce ul.products li.product {
	text-align: center;
}

.woocommerce ul.products li.product img {
	border-radius: 12px;
}

/* Ürün ızgarası: Woo'nun float düzeni yerine CSS Grid.
   Grid satırları eşit yükseklikte olduğu için kartlar hizalanır. */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

@media (min-width: 782px) {

	.woocommerce ul.products.columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.woocommerce ul.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Premium ürün kartı: ince kontur, ferah iç boşluk.
   Flex + margin-top:auto sayesinde başlık kaç satır olursa olsun
   "Sepete Ekle" butonları tüm kartlarda aynı hizada durur. */
.woocommerce ul.products li.product {
	border: 1px solid #EFE6E8;
	border-radius: 18px;
	padding: 1.1rem 1.1rem 1.6rem;
	background: #fff;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.woocommerce ul.products li.product > a:not(.button) {
	display: block;
}

.woocommerce ul.products li.product .price {
	margin-bottom: 1rem;
}

.woocommerce ul.products li.product .button {
	margin-top: auto;
	align-self: center;
}

/* Woo'nun butonun yanına eklediği "Sepeti görüntüle" bağlantısı:
   yerine sağ üstte kendi bildirimimizi gösteriyoruz. */
.woocommerce a.added_to_cart {
	display: none !important;
}

.woocommerce ul.products li.product:hover {
	border-color: #E2CDD2;
	box-shadow: 0 18px 40px -24px rgba(46, 31, 34, .28);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--playfair-display), serif;
	font-size: 1.08rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	margin-top: .9rem;
}

/* Sepete ekle butonu: küçük, büyük harf, premium */
.woocommerce ul.products li.product .button {
	font-size: .78rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	font-weight: 600;
}

.woocommerce ul.products li.product .price {
	color: var(--wp--preset--color--accent-1);
	font-weight: 600;
}

.woocommerce ul.products li.product .button {
	background-color: var(--wp--preset--color--accent-1);
	color: #ffffff;
	border-radius: 999px;
	padding: .6em 1.6em;
	transition: background-color .2s ease;
}

.woocommerce ul.products li.product .button:hover {
	background-color: var(--wp--preset--color--accent-3);
	color: #ffffff;
}

/* Pembe header zemininde nav hover: accent-1 kontrastı yetmez, koyu vişne kullan */
header .wp-block-navigation a:hover,
header .wp-block-navigation a:focus {
	color: var(--wp--preset--color--contrast);
}

/* ---- Tek ürün sayfası ---- */

.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--playfair-display), serif;
	font-weight: 500;
}

.woocommerce div.product p.price {
	color: var(--wp--preset--color--accent-1);
	font-weight: 600;
}