/* ==========================================================================
   NextKat — design polish layer
   Adds depth, texture and character on top of the base conversion layout.
   Loaded by mu-plugins/nextkat-scroll-reveal.php. Nothing here changes the
   markup contract: every rule is additive and degrades to the base styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Section shells — replace the flat fill with a layered, lit surface
   -------------------------------------------------------------------------- */

.nk-sec {
	position: relative;
	isolation: isolate;
	/* The decorative glow below hangs past the right edge on purpose; without
	   this clip it widens the document and the page scrolls sideways on
	   phones. Keep it. */
	overflow: hidden;
	padding: clamp(56px, 8vw, 96px) 24px;
	border-top: 0;
}

/* Hairline that fades out at both ends instead of a hard rule. */
.nk-sec::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg,
		transparent, var(--dgz-line) 18%, var(--dgz-line) 82%, transparent);
}

.nk-sec:first-child::before { display: none; }

/* Soft light from the top-left, so sections read as surfaces rather than blocks. */
.nk-sec--soft {
	background:
		radial-gradient(120% 90% at 12% 0%, #fff 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(180deg, #fbfbf9 0%, var(--dgz-soft) 100%);
}

/* Warm accent glow tucked into a corner — the "lit edge" of the section. */
.nk-sec--soft::after,
.nk-sec--dark::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: min(520px, 55vw);
	height: min(520px, 55vw);
	top: -180px;
	right: -140px;
	border-radius: 50%;
	background: radial-gradient(circle at center,
		rgba(255, 90, 31, .13) 0%, rgba(255, 90, 31, 0) 68%);
	pointer-events: none;
	filter: blur(6px);
}

.nk-sec--dark {
	background:
		radial-gradient(130% 100% at 10% 0%, #232538 0%, rgba(35, 37, 56, 0) 60%),
		linear-gradient(180deg, #1b1d2e 0%, #14151f 100%);
}

.nk-sec--dark::before {
	background: linear-gradient(90deg,
		transparent, rgba(255, 255, 255, .14) 20%, rgba(255, 255, 255, .14) 80%, transparent);
}

.nk-sec--dark::after {
	background: radial-gradient(circle at center,
		rgba(255, 205, 74, .16) 0%, rgba(255, 205, 74, 0) 68%);
}

/* --------------------------------------------------------------------------
   2. Titles — add an eyebrow and a drawn accent so headings feel authored
   -------------------------------------------------------------------------- */

.nk-sec__title {
	position: relative;
	margin-bottom: 14px;
	text-wrap: balance;
}

/* Short accent stroke under the title, weighted like a hand-drawn underline. */
.nk-sec__title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin: 18px auto 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--dgz-orange), var(--dgz-yellow));
}

.nk-sec--dark .nk-sec__title { color: #fff; }

.nk-sec--dark .nk-sec__title::after {
	background: linear-gradient(90deg, var(--dgz-yellow), var(--dgz-orange));
}

/* Lead paragraph directly under a title gets a measure cap so lines stay readable. */
.nk-sec__title + p {
	max-width: 62ch;
	margin-inline: auto;
	color: var(--dgz-muted);
	font-size: 1.02rem;
	line-height: 1.75;
}

.nk-sec--dark .nk-sec__title + p { color: rgba(255, 255, 255, .74); }

/* --------------------------------------------------------------------------
   3. Cards — real depth: gradient rim, inner highlight, layered shadow
   -------------------------------------------------------------------------- */

.nk-sec__inner > div:not([class]),
.nk-sec .nk-trust__item,
.nk-sec .product-card {
	position: relative;
}

/* Any plain card-ish block inside a section gets the surface treatment. */
.nk-sec__inner > div > div[class*="card"],
.nk-sec__inner > div > div[class*="item"],
.nk-sec__inner > div > div[class*="box"] {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	background: var(--dgz-surface);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 1px 2px rgba(21, 21, 21, .04),
		0 12px 28px -12px rgba(21, 21, 21, .14);
	transition:
		transform 320ms cubic-bezier(.22, .61, .36, 1),
		box-shadow 320ms cubic-bezier(.22, .61, .36, 1);
}

/* Inner top highlight — the single detail that stops a card looking flat.
   The conversion cards (.nk-card / .nk-moment / .nk-step) are excluded: they
   carry the flower motif on ::before, and this selector is more specific than
   a bare class, so it would silently win and hide the motif. */
.nk-sec__inner > div > div[class*="card"]:not(.nk-card):not(.nk-moment):not(.nk-step)::before,
.nk-sec__inner > div > div[class*="item"]:not(.nk-card):not(.nk-moment):not(.nk-step)::before,
.nk-sec__inner > div > div[class*="box"]:not(.nk-card):not(.nk-moment):not(.nk-step)::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg,
		transparent, rgba(255, 255, 255, .95) 30%, rgba(255, 255, 255, .95) 70%, transparent);
}

@media (hover: hover) {
	.nk-sec__inner > div > div[class*="card"]:hover,
	.nk-sec__inner > div > div[class*="item"]:hover,
	.nk-sec__inner > div > div[class*="box"]:hover {
		transform: translateY(-4px);
		box-shadow:
			0 1px 0 rgba(255, 255, 255, .9) inset,
			0 2px 4px rgba(21, 21, 21, .05),
			0 24px 48px -16px rgba(21, 21, 21, .22);
	}
}

.nk-sec--dark .nk-sec__inner > div > div[class*="card"],
.nk-sec--dark .nk-sec__inner > div > div[class*="item"],
.nk-sec--dark .nk-sec__inner > div > div[class*="box"] {
	background: rgba(255, 255, 255, .05);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .12) inset,
		0 20px 40px -20px rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------------------------
   4. Product cards — richer rim and a slower, weightier lift
   Applies everywhere (homepage shelves AND product-page conversion sections).
   -------------------------------------------------------------------------- */

.product-card {
	position: relative;
	border: 1px solid #ecece6;
	border-radius: 18px;
	background: #fff;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .95) inset,
		0 2px 4px rgba(21, 21, 21, .05),
		0 18px 34px -18px rgba(21, 21, 21, .28);
	transition:
		transform 380ms cubic-bezier(.22, .61, .36, 1),
		box-shadow 380ms cubic-bezier(.22, .61, .36, 1),
		border-color 380ms ease;
}

@media (hover: hover) {
	.product-card:hover {
		transform: translateY(-6px);
		border-color: rgba(255, 90, 31, .38);
		box-shadow:
			0 2px 4px rgba(21, 21, 21, .04),
			0 28px 56px -20px rgba(255, 90, 31, .30);
	}
}

/* Image inside a card eases in scale on hover — cheap, but reads as quality. */
.product-card__media { overflow: hidden; }

.product-card__media img {
	transition: transform 600ms cubic-bezier(.22, .61, .36, 1);
}

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

/* Badges get a touch of depth so they lift off the photo. */
.product-card__badge {
	box-shadow: 0 6px 16px -8px rgba(21, 21, 21, .45);
	letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   4b. Homepage shelves — same lit-surface treatment as the conversion sections
   -------------------------------------------------------------------------- */

.market-shelf {
	position: relative;
	isolation: isolate;
	padding-block: clamp(48px, 6vw, 84px);
}

.market-shelf--soft {
	background:
		radial-gradient(120% 90% at 12% 0%, #fff 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(180deg, #fbfbf9 0%, var(--dgz-soft) 100%);
}

.market-shelf__heading {
	text-wrap: balance;
}

/* The heading row is a flex box (title + "Tümünü gör" link), so the accent
   stroke has to hang off the h2 itself — on the row it would sit at the far
   right next to the link. */
.market-shelf__heading h2 {
	position: relative;
	padding-bottom: 18px;
}

.market-shelf__heading h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--dgz-orange), var(--dgz-yellow));
}

/* --------------------------------------------------------------------------
   4c. Hero — a warm light source behind the headline
   -------------------------------------------------------------------------- */

.marketplace-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.marketplace-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: auto -10% -40% -10%;
	height: 70%;
	background:
		radial-gradient(45% 60% at 22% 60%, rgba(255, 90, 31, .16) 0%, rgba(255, 90, 31, 0) 70%),
		radial-gradient(40% 55% at 78% 50%, rgba(114, 131, 108, .16) 0%, rgba(114, 131, 108, 0) 70%);
	filter: blur(10px);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   4d. Footer benefit strip — tinted tiles instead of a bare row
   -------------------------------------------------------------------------- */

.prefooter-benefits {
	position: relative;
	padding-block: clamp(40px, 5vw, 68px);
	border-top: 1px solid transparent;
	border-image: linear-gradient(90deg,
		transparent, var(--dgz-line) 20%, var(--dgz-line) 80%, transparent) 1;
}

.prefooter-benefits > * + * { margin-top: 0; }

/* Any tile-ish child gets the soft accent surface. */
.prefooter-benefits [class*="item"],
.prefooter-benefits [class*="card"],
.prefooter-benefits [class*="benefit"]:not(:has([class*="item"])) {
	border-radius: 16px;
	background: linear-gradient(180deg, #fff 0%, var(--dgz-soft) 100%);
	border: 1px solid var(--dgz-line);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 12px 28px -18px rgba(21, 21, 21, .22);
	transition:
		transform 320ms cubic-bezier(.22, .61, .36, 1),
		box-shadow 320ms cubic-bezier(.22, .61, .36, 1),
		border-color 320ms ease;
}

@media (hover: hover) {
	.prefooter-benefits [class*="item"]:hover,
	.prefooter-benefits [class*="card"]:hover {
		transform: translateY(-4px);
		border-color: rgba(255, 90, 31, .3);
		box-shadow:
			0 2px 4px rgba(21, 21, 21, .05),
			0 22px 44px -18px rgba(255, 90, 31, .26);
	}
}

/* --------------------------------------------------------------------------
   5. Trust strip (the 4-up reassurance row) — tinted tiles, not bare text
   -------------------------------------------------------------------------- */

.nk-trust { gap: 14px; }

.nk-trust__item {
	padding: 18px 18px 16px;
	border-radius: 16px;
	border: 1px solid rgba(255, 90, 31, .14);
	background:
		linear-gradient(180deg, #fff 0%, var(--dgz-orange-soft) 100%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 10px 24px -14px rgba(255, 90, 31, .35);
}

.nk-trust__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 6px 16px -8px rgba(255, 90, 31, .5);
	font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   6. Motion — scroll reveal variants + a slow drift on the accent glows
   -------------------------------------------------------------------------- */

.js [data-nk-anim] {
	opacity: 0;
	will-change: opacity, transform, filter, clip-path;
	transition:
		opacity 720ms cubic-bezier(.22, .61, .36, 1),
		transform 720ms cubic-bezier(.22, .61, .36, 1),
		filter 720ms cubic-bezier(.22, .61, .36, 1),
		clip-path 900ms cubic-bezier(.65, 0, .35, 1);
}

.js [data-nk-anim="up"]     { transform: translateY(30px); }
.js [data-nk-anim="left"]   { transform: translateX(-32px); }
.js [data-nk-anim="right"]  { transform: translateX(32px); }
.js [data-nk-anim="scale"]  { transform: scale(.93); }
.js [data-nk-anim="blur"]   { filter: blur(12px); transform: translateY(18px); }
.js [data-nk-anim="clip"]   { clip-path: inset(0 0 100% 0); transform: translateY(10px); }
.js [data-nk-anim="rise"]   { transform: translateY(46px) scale(.97); }

.js [data-nk-anim].nk-revealed {
	opacity: 1;
	transform: none;
	filter: none;
	clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
	.js [data-nk-anim],
	.js [data-nk-anim].nk-revealed {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   7. Info-box flowers
   Superseded by flowers-drift.css. The static corner motifs read as
   pasted-on, so the flowers now drift top-to-bottom inside each box as it
   scrolls. The old padding reserve is no longer needed either.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   9. Product photography slot (.nk-shot)
   Used inside the "Gündüz bir figür, akşam bir atmosfer" section. The image is
   referenced from the product description, so swapping it means replacing the
   file at wp-content/uploads/nextkat-gul/ — no template edit needed.
   -------------------------------------------------------------------------- */

.nk-shot {
	position: relative;
	margin: 0 auto 30px;
	max-width: 1000px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 2px 6px rgba(21, 21, 21, .06),
		0 30px 60px -26px rgba(21, 21, 21, .38);
}

.nk-shot img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 900ms cubic-bezier(.22, .61, .36, 1);
}

@media (hover: hover) {
	.nk-shot:hover img { transform: scale(1.03); }
}

/* Soft vignette so the photo sits inside the section instead of punching a
   hard rectangle into it. */
.nk-shot::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(21, 21, 21, .06) 0%, rgba(21, 21, 21, 0) 26%,
		rgba(21, 21, 21, 0) 74%, rgba(21, 21, 21, .10) 100%);
}

/* Caption, when one is supplied. */
.nk-shot figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 34px 22px 16px;
	color: #fff;
	font-size: .76rem;
	letter-spacing: .01em;
	background: linear-gradient(180deg, rgba(21, 21, 21, 0) 0%, rgba(21, 21, 21, .62) 100%);
}

@media (max-width: 640px) {
	.nk-shot { border-radius: 14px; margin-bottom: 22px; }
	.nk-shot img { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   10. Fallback: the previous reveal system keeps working untouched
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.nk-sec__inner > div > div[class*="card"],
	.nk-sec .product-card,
	.nk-trust__item { transition: none; }
}