/*
Theme Name: Verdano
Template: astra
Description: Verdano — botanik editoryal e-ticaret kimliği. Fraunces + Manrope, çam yeşili / krem / terracotta.
Version: 1.1.0
Text Domain: verdano-child
*/

:root {
	--v-ink: #142B25;        /* en koyu çam */
	--v-pine: #1E4038;       /* çam yeşili */
	--v-moss: #2F5233;
	--v-cream: #F6F1E7;      /* kağıt */
	--v-sand: #EAE1CF;       /* koyu kağıt */
	--v-terra: #C96F3B;      /* terracotta */
	--v-terra-d: #A85A2E;
	--v-serif: "Fraunces", Georgia, serif;
	--v-sans: "Manrope", "Helvetica Neue", sans-serif;
}

/* ---------- Genel zemin ve tipografi ---------- */
body {
	background: var(--v-cream);
	font-family: var(--v-sans);
	color: var(--v-ink);
	font-size: 17px;
}
h1, h2, h3, h4, h5, h6,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.product_title {
	font-family: var(--v-serif) !important;
	font-weight: 560;
	letter-spacing: -0.015em;
	color: var(--v-ink);
}
::selection { background: var(--v-terra); color: #fff; }

/* Doku: çok hafif noise + lif hissi */
body::before {
	content: "";
	position: fixed; inset: 0; pointer-events: none; z-index: 1;
	opacity: .05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

/* ---------- Header ---------- */
.site-header, .main-header-bar, .ast-primary-header-bar {
	background: var(--v-cream) !important;
	border-bottom: 1px solid rgba(20, 43, 37, 0.12) !important;
}
.main-header-menu a {
	font-family: var(--v-sans);
	font-weight: 700 !important;
	font-size: 0.82rem !important;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--v-ink) !important;
}
.main-header-menu .current-menu-item > a,
.main-header-menu a:hover { color: var(--v-terra) !important; }

/* ---------- Ortak yapı ---------- */
.v-wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.v-section { padding: 96px 0; position: relative; }
.v-eyebrow {
	font: 800 0.78rem/1 var(--v-sans);
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--v-terra); margin: 0 0 18px;
}
.v-h2 {
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	line-height: 1.05; margin: 0 0 14px;
}
.v-lead { font-size: 1.08rem; line-height: 1.7; color: #3E5049; max-width: 56ch; }

/* Butonlar */
.v-btn {
	display: inline-block; font: 800 0.85rem/1 var(--v-sans);
	letter-spacing: 0.08em; text-transform: uppercase;
	padding: 18px 36px; border-radius: 999px;
	background: var(--v-terra); color: #fff !important;
	border: 2px solid var(--v-terra);
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.v-btn:hover {
	background: var(--v-terra-d); border-color: var(--v-terra-d);
	transform: translateY(-3px);
	box-shadow: 0 16px 30px -12px rgba(201, 111, 59, 0.55);
}
.v-btn--ghost {
	background: transparent; color: var(--v-ink) !important;
	border-color: rgba(20, 43, 37, 0.35);
}
.v-btn--ghost:hover {
	background: var(--v-ink); border-color: var(--v-ink);
	color: var(--v-cream) !important; box-shadow: none;
}

/* Reveal animasyonu */
.v-reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.8,.3,1); }
.v-reveal.v-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .v-reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- HERO ---------- */
.v-hero {
	position: relative; overflow: hidden;
	padding: 84px 0 110px;
	background:
		radial-gradient(1200px 600px at 85% -10%, rgba(30, 64, 56, 0.10), transparent 60%),
		var(--v-cream);
}
.v-hero .v-wrap {
	display: grid; grid-template-columns: 1.05fr 0.95fr;
	gap: 48px; align-items: center; position: relative; z-index: 2;
}
.v-hero-watermark {
	position: absolute; z-index: 1; inset: auto -2% -34px auto;
	font: 700 clamp(7rem, 17vw, 15rem)/0.8 var(--v-serif);
	letter-spacing: 0.02em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(30, 64, 56, 0.14);
	pointer-events: none; user-select: none; white-space: nowrap;
}
.v-hero h1 {
	font-size: clamp(3rem, 6vw, 5rem);
	line-height: 0.98; margin: 0 0 26px; font-weight: 480;
}
.v-hero h1 em {
	font-style: italic; font-weight: 380; color: var(--v-pine);
	position: relative;
}
.v-hero h1 em::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 4px;
	height: 10px; background: rgba(201, 111, 59, 0.32); z-index: -1;
	border-radius: 4px;
}
.v-hero .v-lead { margin-bottom: 38px; }
.v-hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* Kolaj — kemerli maskeler */
.v-collage { position: relative; height: 560px; }
.v-collage figure {
	position: absolute; margin: 0; overflow: hidden;
	box-shadow: 0 30px 60px -22px rgba(20, 43, 37, 0.45);
	background: var(--v-sand);
}
.v-collage img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.v-collage figure:hover img { transform: scale(1.06); }
.v-c1 {
	width: 58%; height: 78%; left: 0; top: 4%;
	border-radius: 999px 999px 26px 26px; z-index: 2;
}
.v-c2 {
	width: 46%; height: 56%; right: 0; top: 0;
	border-radius: 26px; transform: rotate(2.5deg); z-index: 1;
}
.v-c3 {
	width: 44%; height: 46%; right: 6%; bottom: 0;
	border-radius: 26px 26px 999px 999px; transform: rotate(-2deg); z-index: 3;
	outline: 6px solid var(--v-cream);
}
.v-collage::after {
	content: "✳"; position: absolute; left: 54%; top: -2%;
	font-size: 3rem; color: var(--v-terra); z-index: 4;
	animation: v-spin 14s linear infinite;
}
@keyframes v-spin { to { transform: rotate(360deg); } }

/* ---------- MARQUEE ---------- */
.v-marquee {
	background: var(--v-pine); color: var(--v-cream);
	overflow: hidden; padding: 18px 0;
	border-top: 1px solid rgba(246, 241, 231, 0.12);
	border-bottom: 1px solid rgba(246, 241, 231, 0.12);
	transform: rotate(-1.2deg) scale(1.02); margin: 8px 0;
}
.v-marquee-track {
	display: inline-flex; gap: 0; white-space: nowrap;
	animation: v-marquee 28s linear infinite; will-change: transform;
}
.v-marquee span {
	font: 700 0.95rem/1 var(--v-sans); letter-spacing: 0.18em;
	text-transform: uppercase; padding: 0 22px;
}
.v-marquee span::after { content: "✦"; color: var(--v-terra); margin-left: 44px; }
@keyframes v-marquee { to { transform: translateX(-50%); } }

/* ---------- KATEGORİLER ---------- */
.v-cats {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 26px; margin-top: 54px;
}
.v-cat {
	position: relative; display: block; overflow: hidden;
	background: var(--v-sand);
	border-radius: 22px;
}
.v-cat:nth-child(2), .v-cat:nth-child(5) { border-radius: 999px 999px 22px 22px; }
.v-cat:nth-child(3n) { transform: translateY(26px); }
.v-cat img {
	width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
	transition: transform .9s cubic-bezier(.22,.8,.3,1);
}
.v-cat:hover img { transform: scale(1.07); }
.v-cat-label {
	position: absolute; left: 14px; right: 14px; bottom: 14px;
	display: flex; align-items: center; justify-content: space-between;
	background: rgba(246, 241, 231, 0.92); backdrop-filter: blur(6px);
	border-radius: 14px; padding: 14px 20px;
}
.v-cat-label strong { font: 560 1.25rem/1 var(--v-serif); color: var(--v-ink); }
.v-cat-label span { font: 800 0.72rem/1 var(--v-sans); letter-spacing: 0.14em; color: var(--v-terra); text-transform: uppercase; }
.v-cat-label span::after { content: " →"; display: inline-block; transition: transform .25s ease; }
.v-cat:hover .v-cat-label span::after { transform: translateX(6px); }

/* ---------- RENK PALETİ ---------- */
.v-palette {
	background: var(--v-ink); color: var(--v-cream);
	padding: 100px 0; position: relative; overflow: hidden;
}
.v-palette::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(900px 500px at 15% 110%, rgba(201, 111, 59, 0.18), transparent 60%);
}
.v-palette .v-h2, .v-palette h2 { color: var(--v-cream); }
.v-palette .v-eyebrow { color: var(--v-terra); }
.v-palette-grid {
	display: flex; flex-wrap: wrap; gap: 14px;
	margin: 44px 0 24px; max-width: 760px; position: relative;
}
.v-dot {
	width: 44px; height: 44px; border-radius: 50%;
	border: 2px solid rgba(246, 241, 231, 0.25);
	cursor: pointer;
	transition: transform .25s ease, border-color .25s ease;
}
.v-dot:hover { transform: scale(1.28); border-color: var(--v-cream); }
.v-palette-name {
	font: 380 italic 2rem/1.2 var(--v-serif);
	color: var(--v-cream); min-height: 2.6rem; display: block; opacity: .95;
}
.v-palette-note { color: rgba(246, 241, 231, 0.65); font-size: 0.95rem; max-width: 52ch; }

/* ---------- ÜRÜN VİTRİNİ (WooCommerce kart restyle) ---------- */
.v-products { padding: 96px 0 60px; }
.woocommerce ul.products li.product {
	background: #FDFBF6;
	border: 1px solid rgba(20, 43, 37, 0.09);
	border-radius: 20px; overflow: hidden;
	padding: 14px 14px 22px !important;
	transition: transform .35s ease, box-shadow .35s ease;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-8px);
	box-shadow: 0 26px 44px -20px rgba(20, 43, 37, 0.35);
}
.woocommerce ul.products li.product img {
	border-radius: 14px;
	transition: transform .7s ease;
}
.woocommerce ul.products li.product:hover img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.18rem !important; padding-top: 14px !important;
}
.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button {
	background: transparent !important; color: var(--v-ink) !important;
	border: 2px solid rgba(20, 43, 37, 0.3) !important; border-radius: 999px !important;
	font: 800 0.78rem/1 var(--v-sans) !important; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 12px 24px !important;
	transition: all .25s ease !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover { background: var(--v-ink) !important; color: var(--v-cream) !important; border-color: var(--v-ink) !important; }

/* ---------- MANİFESTO ---------- */
.v-manifesto {
	background: var(--v-pine); color: var(--v-cream);
	padding: 120px 0; text-align: center; position: relative; overflow: hidden;
}
.v-manifesto::before, .v-manifesto::after {
	content: "❋"; position: absolute; font-size: 9rem; opacity: 0.1; color: var(--v-terra);
}
.v-manifesto::before { left: -20px; top: -30px; }
.v-manifesto::after { right: -16px; bottom: -40px; }
.v-manifesto blockquote {
	margin: 0 auto; max-width: 21ch; border: 0; padding: 0;
	font: 380 italic clamp(2rem, 4.6vw, 3.6rem)/1.18 var(--v-serif);
	color: var(--v-cream);
}
.v-manifesto blockquote strong { color: var(--v-terra); font-style: normal; font-weight: 560; }
.v-manifesto cite {
	display: block; margin-top: 30px;
	font: 800 0.78rem/1 var(--v-sans); letter-spacing: 0.22em; text-transform: uppercase;
	color: rgba(246, 241, 231, 0.6); font-style: normal;
}

/* ---------- SON CTA ---------- */
.v-cta { text-align: center; padding: 110px 0; }
.v-cta .v-h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }

/* ---------- Footer ---------- */
.site-footer, .ast-footer-copyright, footer .ast-builder-grid-row-container {
	background: var(--v-ink) !important; color: rgba(246, 241, 231, 0.75) !important;
}
.site-footer a { color: var(--v-cream) !important; }

/* ---------- Ürün detay küçük rötuşlar ---------- */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--v-terra); }
.woocommerce div.product p.stock.out-of-stock { color: var(--v-terra-d); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.v-hero .v-wrap { grid-template-columns: 1fr; gap: 56px; }
	.v-collage { height: 480px; }
	.v-cats { grid-template-columns: repeat(2, 1fr); }
	.v-cat:nth-child(3n) { transform: none; }
}
@media (max-width: 640px) {
	.v-section { padding: 64px 0; }
	.v-hero { padding: 56px 0 72px; }
	.v-collage { height: 380px; }
	.v-cats { grid-template-columns: 1fr; }
	.v-dot { width: 36px; height: 36px; }
}