/*
 * Erişen — tasarım sistemi.
 * Token'lar mobil uygulamadan (ErisenMobile/Theme/ErisenColors.swift) birebir alınmıştır.
 *
 * 1. Fontlar   2. Token'lar   3. Temel   4. Yerleşim   5. Bileşenler   6. Sayfalar   7. Hareket
 */

/* 1. Fontlar ------------------------------------------------------------- */

@font-face {
	font-family: Newsreader;
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Newsreader;
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url("../fonts/newsreader-latin-ext-opsz-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: Newsreader;
	font-style: italic;
	font-display: swap;
	font-weight: 200 800;
	src: url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Newsreader;
	font-style: italic;
	font-display: swap;
	font-weight: 200 800;
	src: url("../fonts/newsreader-latin-ext-opsz-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Token'lar ----------------------------------------------------------- */

:root {
	/* Mürekkep */
	--ink: #1a1614;
	--ink-soft: #2e2c2a;
	--mute: #7a6f62;
	--mute-light: #a89c8a;
	--mute-soft: #b5a89a;

	/* Zemin */
	--canvas: #faf8f5;
	--canvas-deep: #f0eee9;
	--card: #ffffff;

	/* Altın */
	--gold: #b8924b;
	--gold-text: #8f6b2c; /* küçük metin için koyu altın (WCAG AA) */
	--gold-soft: #f5dda8;
	--gold-cream: #fbf4d9;
	--gold-border: #ede3b8;
	--gold-divider: #f2e9c0;
	--gold-cream-warm: #fbf5e8;
	--gold-cream-deep: #f0dfa0;

	/* Çizgi */
	--border: #efeae2;
	--border-deep: #e8dfcc;
	--border-soft: #d9ccb0;
	--stripe-warm: #fdfbf7;
	--stripe-cool: #f5efe3;

	/* Durum */
	--success: #2f8a4f;
	--danger: #c0392b;

	/* Tipografi — Apple aygıtlarında uygulamadaki sistem fontları (New York / SF) */
	--serif: ui-serif, "New York", newsreader, georgia, serif;
	--sans: -apple-system, blinkmacsystemfont, inter, "Segoe UI", roboto, sans-serif;

	/* Ölçü */
	--gutter: 18px;
	--container: 1240px;
	--header-h: 64px;
	--radius-sm: 10px;
	--radius: 14px;
	--radius-lg: 18px;
	--radius-xl: 22px;
	--shadow-card: 0 8px 24px rgb(0 0 0 / 4%);
	--shadow-lift: 0 8px 22px rgb(0 0 0 / 10%);
	--shadow-gold: 0 8px 28px rgb(184 146 75 / 30%);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (width >= 768px) {
	:root {
		--gutter: 32px;
		--header-h: 84px;
	}
}

/* 3. Temel --------------------------------------------------------------- */

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

html {
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var(--canvas);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
}

.site-main {
	flex: 1;
}

body.is-locked {
	overflow: hidden;
}

img,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

h1,
h2,
h3,
p,
ul,
dl,
dd,
figure {
	margin: 0;
}

ul {
	padding: 0;
	list-style: none;
}

:focus-visible {
	outline: 2px solid var(--gold-text);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection {
	background: var(--gold-soft);
	color: var(--ink);
}

[hidden] {
	display: none !important;
}

.icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--ink);
	color: #ffffff;
	border-radius: var(--radius-sm);
}

.skip-link:focus {
	top: 12px;
}

.eyebrow {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mute);
}

.eyebrow--gold {
	color: var(--gold-text);
}

.tagline {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--gold-text);
}

.prose {
	max-width: 68ch;
	font-size: 16px;
	line-height: 1.75;
}

.prose > * + * {
	margin-top: 1em;
}

/* 4. Yerleşim ------------------------------------------------------------ */

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	padding-block: 48px;
}

.section--tight {
	padding-block: 8px 56px;
}

.section--paper {
	background: var(--card);
	border-block: 1px solid var(--border);
}

@media (width >= 768px) {
	.section {
		padding-block: 88px;
	}

	.section--tight {
		padding-block: 12px 88px;
	}
}

.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}

.section-head__title {
	margin-top: 8px;
	font-family: var(--serif);
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.015em;
}

@media (width >= 768px) {
	.section-head {
		margin-bottom: 36px;
	}
}

/* Başlık */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgb(250 248 245 / 88%);
	backdrop-filter: saturate(1.4) blur(18px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s, background-color 0.3s;
}

.site-header.is-scrolled {
	border-bottom-color: var(--border);
}

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: var(--header-h);
}

.site-logo {
	grid-column: 2;
	display: block;
}

.site-logo img {
	width: auto;
	height: 44px;
	transition: height 0.3s var(--ease);
}

@media (width >= 768px) {
	.site-logo img {
		height: 58px;
	}

	.site-header.is-scrolled .site-logo img {
		height: 48px;
	}
}

.site-nav {
	display: none;
}

.site-nav ul {
	display: flex;
	gap: 32px;
}

.site-nav a {
	position: relative;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--ink-soft);
}

.site-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--ease);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
	transform: scaleX(1);
}

.site-header__search-m {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	margin-left: -10px;
}

.site-actions {
	grid-column: 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
	margin-right: -10px;
}

.site-actions .site-actions__search {
	display: none;
}

@media (width >= 1024px) {
	.site-nav {
		display: block;
		grid-column: 1;
		grid-row: 1;
	}

	.site-header .site-header__search-m {
		display: none;
	}

	.site-actions .site-actions__search {
		display: inline-flex;
	}
}

.icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--ink);
	transition: background-color 0.2s;
}

.icon-btn:hover {
	background: rgb(26 22 20 / 5%);
}

.fav-link__count {
	position: absolute;
	top: 6px;
	right: 4px;
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	border-radius: 9px;
	background: var(--gold);
	color: #ffffff;
	font-size: 10px;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
}

/* Uygulamadaki menü ikonu: 22 / 16 / 22 px çizgiler, sağa hizalı */
.menu-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 4px;
	width: 44px;
	height: 44px;
	padding-right: 10px;
}

.menu-btn span {
	display: block;
	width: 22px;
	height: 1.5px;
	border-radius: 1px;
	background: var(--ink);
	transition: width 0.3s var(--ease);
}

.menu-btn span:nth-child(2) {
	width: 16px;
}

.menu-btn:hover span:nth-child(2) {
	width: 22px;
}

/* Altlık */
.site-footer {
	background: var(--card);
	border-top: 1px solid var(--border);
	padding-top: 56px;
	font-size: 14px;
}

.site-footer__grid {
	display: grid;
	gap: 40px;
}

@media (width >= 900px) {
	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
		gap: 48px;
	}
}

.site-footer__brand img {
	width: 150px;
	margin-left: -14px;
}

.site-footer__brand .tagline {
	margin-top: 10px;
}

.site-footer__col .eyebrow {
	margin-bottom: 16px;
}

.site-footer__col li + li {
	margin-top: 10px;
}

.site-footer__col a {
	color: var(--ink-soft);
	transition: color 0.2s;
}

.site-footer__col a:hover {
	color: var(--gold-text);
}

.site-footer__contact a {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.site-footer__contact .icon {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--mute);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 48px;
	padding-block: 20px 28px;
	background: linear-gradient(var(--border), var(--border)) center top / calc(100% - var(--gutter) * 2) 1px no-repeat;
	font-size: 12px;
	color: var(--mute);
}

/* 5. Bileşenler ---------------------------------------------------------- */

/* Düğmeler — uygulamadaki dolu mürekkep / beyaz / krem düğmeler */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}

.btn .icon {
	width: 18px;
	height: 18px;
}

.btn:active {
	transform: scale(0.98);
}

.btn--ink {
	background: var(--ink);
	color: #ffffff;
}

.btn--ink:hover {
	background: var(--ink-soft);
}

.btn--ghost {
	background: var(--card);
	color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--border-deep);
}

.btn--ghost:hover {
	box-shadow: inset 0 0 0 1px var(--border-soft);
}

.btn--cream {
	background: var(--gold-cream);
	color: var(--ink-soft);
	box-shadow: inset 0 0 0 1px var(--gold-border);
	font-weight: 500;
	font-size: 13px;
}

.btn--block {
	display: flex;
	width: 100%;
}

/* Uzun ok (uygulamadaki LongArrow) */
.btn__arrow,
.link-arrow__line {
	position: relative;
	display: inline-block;
	width: 26px;
	height: 1.5px;
	background: currentcolor;
	transition: width 0.35s var(--ease);
}

.btn__arrow::after,
.link-arrow__line::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 7px;
	height: 7px;
	border-top: 1.5px solid currentcolor;
	border-right: 1.5px solid currentcolor;
	transform: translateY(-50%) rotate(45deg);
}

.btn:hover .btn__arrow,
.link-arrow:hover .link-arrow__line {
	width: 38px;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	padding-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-soft);
}

/* Çipler — uygulamadaki FilterChip */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.chips--scroll {
	flex-wrap: nowrap;
	overflow-x: auto;
	margin-inline: calc(var(--gutter) * -1);
	padding: 2px var(--gutter);
	scrollbar-width: none;
}

.chips--scroll::-webkit-scrollbar {
	display: none;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--border);
	font-size: 12px;
	font-weight: 500;
	color: var(--ink);
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.chip:hover {
	box-shadow: inset 0 0 0 1px var(--border-soft);
}

.chip.is-active {
	background: var(--ink);
	color: #ffffff;
	box-shadow: inset 0 0 0 1px var(--ink);
}

.chip__badge {
	padding: 1px 5px;
	border-radius: 8px;
	background: var(--gold-cream-warm);
	color: var(--gold-text);
	font-size: 10px;
	font-weight: 600;
}

.chip.is-active .chip__badge {
	background: var(--gold);
	color: #ffffff;
}

/* Kategori kartı — uygulamadaki CategoryCard */
.category-grid {
	display: grid;
	gap: 10px;
}

@media (width >= 640px) {
	.category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

@media (width >= 1024px) {
	.category-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
}

.category-card {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	background: var(--ink);
	box-shadow: var(--shadow-lift);
	isolation: isolate;
}

.category-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease);
}

.category-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(0 0 0 / 0%) 35%, rgb(26 22 20 / 62%) 100%);
}

.category-card:hover .category-card__media img {
	transform: scale(1.045);
}

.category-card__body {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 14px 16px;
	color: #ffffff;
}

.category-card__name {
	display: block;
	font-family: var(--serif);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.category-card__count {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	letter-spacing: 0.03em;
	color: rgb(255 255 255 / 78%);
}

.category-card__chevron {
	width: 16px;
	height: 16px;
	color: var(--gold-soft);
	stroke-width: 2;
	transition: transform 0.35s var(--ease);
}

.category-card:hover .category-card__chevron {
	transform: translateX(4px);
}

@media (width >= 1024px) {
	.category-card__body {
		padding: 20px 22px;
	}

	.category-card__name {
		font-size: 24px;
	}
}

/* Ürün kartı — uygulamadaki ProductGridCard */
.product-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5px;
}

@media (width >= 768px) {
	.product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}
}

@media (width >= 1100px) {
	.product-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}
}

.product-card {
	position: relative;
	background: var(--card);
}

.section--paper .product-card {
	box-shadow: inset 0 0 0 1px var(--border);
}

.product-card__link {
	display: block;
}

.product-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--stripe-warm);
}

.product-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease);
}

.product-card:hover .product-card__media img {
	transform: scale(1.04);
}

.product-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, var(--stripe-warm) 0 6px, var(--stripe-cool) 6px 7px);
	font-family: var(--serif);
	font-size: 32px;
	font-style: italic;
	color: var(--gold);
}

.product-card__body {
	display: block;
	padding: 9px 10px 13px;
}

.product-card__name {
	display: block;
	overflow: hidden;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.product-card__meta {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	letter-spacing: 0.03em;
	color: var(--mute);
}

@media (width >= 768px) {
	.product-card__body {
		padding: 12px 14px 16px;
	}

	.product-card__name {
		font-size: 14px;
	}

	.product-card__meta {
		font-size: 12px;
	}
}

.product-card.is-hidden {
	display: none;
}

.label-new {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	padding: 4px 8px;
	background: var(--danger);
	color: #ffffff;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	pointer-events: none;
}

/* Favori kalbi */
.fav-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgb(255 255 255 / 92%);
	box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
	color: var(--ink);
	transition: transform 0.3s var(--ease);
}

.fav-btn .icon {
	width: 16px;
	height: 16px;
	stroke-width: 1.8;
}

.fav-btn:hover {
	transform: scale(1.08);
}

.fav-btn[aria-pressed="true"] {
	color: var(--danger);
}

.fav-btn[aria-pressed="true"] .icon {
	fill: currentcolor;
}

.fav-btn.is-pop {
	animation: pop 0.4s var(--ease);
}

@keyframes pop {
	40% {
		transform: scale(1.25);
	}
}

.fav-btn--lg {
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
}

.fav-btn--lg .icon {
	width: 20px;
	height: 20px;
}

/* Arama alanı — uygulamadaki mağaza arama kutusu */
.search-trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 560px;
	margin-top: 22px;
	padding: 13px 14px;
	border-radius: 12px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--border);
	font-size: 14px;
	color: var(--mute-soft);
	text-align: left;
	transition: box-shadow 0.2s;
}

.search-trigger:hover {
	box-shadow: inset 0 0 0 1px var(--border-soft);
}

.search-trigger .icon {
	width: 18px;
	height: 18px;
	color: var(--mute);
}

.search-trigger kbd {
	display: none;
	margin-left: auto;
	padding: 1px 7px;
	border-radius: 5px;
	box-shadow: inset 0 0 0 1px var(--border-deep);
	font-family: var(--sans);
	font-size: 11px;
	color: var(--mute);
}

@media (width >= 1024px) {
	.search-trigger kbd {
		display: inline-block;
	}
}

/* Sayfa başı */
.page-head {
	padding-block: 24px 20px;
}

@media (width >= 768px) {
	.page-head {
		padding-block: 48px 32px;
	}
}

.page-head--center {
	text-align: center;
}

.page-head__logo {
	width: auto;
	height: 72px;
	margin: 0 auto 6px;
}

.page-title {
	margin-top: 8px;
	font-family: var(--serif);
	font-size: clamp(34px, 5vw, 60px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.page-head--center .eyebrow {
	margin-top: 10px;
}

.page-sub {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	font-size: 13px;
	color: var(--mute);
}

.page-sub__dot {
	color: var(--border-soft);
}

.page-sub .is-new {
	font-weight: 600;
	color: var(--gold-text);
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: -4px;
	font-size: 13px;
	color: var(--mute);
	transition: color 0.2s;
}

.back-link .icon {
	width: 16px;
	height: 16px;
}

.back-link:hover {
	color: var(--ink);
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-block: 56px;
	text-align: center;
	color: var(--mute);
}

.empty-state > .icon {
	width: 32px;
	height: 32px;
	margin-bottom: 4px;
}

.empty-state .page-title {
	color: var(--ink);
}

.empty-state h2 {
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 400;
	color: var(--ink);
}

.empty-state .btn {
	margin-top: 10px;
}

.empty-state--page {
	padding-block: 96px;
}

.empty-state--page .hero__actions {
	justify-content: center;
}

.empty-note {
	padding-block: 40px;
	text-align: center;
	font-size: 13px;
	color: var(--mute);
}

/* Bilgi listesi */
.info-list li {
	display: flex;
	gap: 14px;
	padding-block: 16px;
}

.info-list li + li {
	border-top: 1px solid var(--border);
}

.info-list .icon {
	width: 22px;
	height: 22px;
	color: var(--gold);
}

.info-list__label {
	display: block;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--mute-light);
}

.info-list__value {
	display: block;
	margin-top: 3px;
	font-size: 15px;
	line-height: 1.45;
}

a.info-list__value:hover {
	color: var(--gold-text);
}

/* Yan menü — uygulamadaki SideMenu */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
}

.drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 35%);
	opacity: 0;
	transition: opacity 0.35s;
}

.drawer__panel {
	position: absolute;
	inset: 0 auto 0 0;
	display: flex;
	flex-direction: column;
	width: min(86vw, 320px);
	overflow-y: auto;
	background: var(--card);
	box-shadow: 4px 0 24px rgb(0 0 0 / 25%);
	transform: translateX(-100%);
	transition: transform 0.45s var(--ease);
	overscroll-behavior: contain;
}

.drawer__panel:focus {
	outline: none;
}

.drawer.is-open .drawer__backdrop {
	opacity: 1;
}

.drawer.is-open .drawer__panel {
	transform: none;
}

.drawer__top {
	padding: 12px 8px 0;
}

.drawer__brand {
	padding: 4px 22px 22px;
	border-bottom: 1px solid var(--border);
}

.drawer__brand img {
	width: auto;
	height: 56px;
	margin-left: -8px;
}

.drawer__brand .tagline {
	margin-top: 10px;
}

.drawer__nav {
	padding-block: 8px;
	border-bottom: 1px solid var(--border);
}

.drawer__nav a,
.drawer__nav button {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 50px;
	padding: 0 22px;
	font-size: 15px;
	text-align: left;
	transition: background-color 0.2s;
}

.drawer__nav a:hover,
.drawer__nav button:hover {
	background: var(--canvas);
}

.drawer__nav .icon {
	width: 19px;
	height: 19px;
	color: var(--mute);
}

.drawer__caret {
	margin-left: auto;
	transition: transform 0.3s var(--ease);
}

[aria-expanded="true"] > .drawer__caret {
	transform: rotate(180deg);
}

.drawer__sub {
	padding-bottom: 6px;
}

.drawer__sub a {
	min-height: 42px;
	padding-left: 55px;
	font-size: 14px;
	color: var(--ink-soft);
}

.drawer__count {
	margin-left: auto;
	font-size: 11px;
	color: var(--mute-light);
}

.drawer__nav--secondary {
	border-bottom: 0;
}

.drawer__foot {
	margin-top: auto;
	padding: 16px 22px 28px;
	border-top: 1px solid var(--border);
}

.drawer__social {
	display: inline-flex;
	margin-top: 14px;
	color: var(--mute);
}

.drawer__copy {
	margin-top: 10px;
	font-size: 10px;
	color: var(--mute-light);
}

/* Arama katmanı */
.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 70;
}

.search-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(250 248 245 / 72%);
	backdrop-filter: blur(10px);
	opacity: 0;
	transition: opacity 0.3s;
}

.search-overlay__panel {
	position: relative;
	max-height: 100%;
	overflow-y: auto;
	background: var(--card);
	border-bottom: 1px solid var(--border);
	box-shadow: 0 24px 48px rgb(26 22 20 / 8%);
	transform: translateY(-16px);
	opacity: 0;
	transition: transform 0.4s var(--ease), opacity 0.3s;
}

.search-overlay.is-open .search-overlay__backdrop,
.search-overlay.is-open .search-overlay__panel {
	opacity: 1;
}

.search-overlay.is-open .search-overlay__panel {
	transform: none;
}

.search-field {
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--header-h);
	border-bottom: 1px solid var(--border);
}

.search-field > .icon {
	color: var(--mute);
}

.search-field input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: none;
	font-family: var(--serif);
	font-size: clamp(20px, 2.4vw, 28px);
	color: var(--ink);
}

.search-field input::placeholder {
	color: var(--mute-soft);
}

.search-field input::-webkit-search-cancel-button {
	display: none;
}

.search-overlay__body {
	padding-block: 20px 28px;
}

.search-overlay__suggest .eyebrow {
	margin-bottom: 12px;
}

.search-overlay__status {
	font-size: 13px;
	color: var(--mute);
}

.search-results {
	display: grid;
	gap: 2px;
	margin-top: 8px;
}

@media (width >= 900px) {
	.search-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px 24px;
	}
}

.search-results a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px;
	margin-inline: -8px;
	border-radius: 12px;
	transition: background-color 0.2s;
}

.search-results a:hover,
.search-results a:focus-visible {
	background: var(--canvas);
}

.search-results img {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--stripe-warm);
}

.search-results__name {
	display: block;
	font-size: 14px;
	font-weight: 500;
}

.search-results__meta {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--mute);
}

.search-results__all {
	grid-column: 1 / -1;
	margin-top: 12px;
}

/* Büyütülmüş görsel */
.lightbox {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #0e0c0b;
	color: #ffffff;
}

.lightbox::backdrop {
	background: #0e0c0b;
}

.lightbox[open] {
	display: flex;
	flex-direction: column;
	animation: fade 0.3s;
}

@keyframes fade {
	from {
		opacity: 0;
	}
}

.lightbox__bar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 8px 8px 8px 20px;
}

.lightbox__title {
	overflow: hidden;
	font-family: var(--serif);
	font-size: 17px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.lightbox__count {
	margin-left: auto;
	font-size: 12px;
	letter-spacing: 0.1em;
	color: rgb(255 255 255 / 60%);
	font-variant-numeric: tabular-nums;
}

.lightbox .icon-btn {
	color: #ffffff;
}

.lightbox .icon-btn:hover {
	background: rgb(255 255 255 / 10%);
}

.lightbox__stage {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.lightbox__stage::-webkit-scrollbar {
	display: none;
}

.lightbox__slide {
	display: flex;
	flex: 0 0 100%;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 16px 24px;
	overflow: hidden;
	scroll-snap-align: center;
	cursor: zoom-in;
}

.lightbox__slide img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.4s var(--ease);
}

.lightbox__slide.is-zoomed {
	cursor: zoom-out;
}

.lightbox__slide.is-zoomed img {
	transform: scale(2.2);
}

.lightbox__nav {
	position: absolute;
	top: 50%;
	display: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgb(255 255 255 / 8%);
	color: #ffffff;
	transform: translateY(-50%);
	transition: background-color 0.2s;
}

.lightbox__nav:hover {
	background: rgb(255 255 255 / 16%);
}

.lightbox__nav--prev {
	left: 24px;
}

.lightbox__nav--next {
	right: 24px;
}

@media (width >= 900px) and (hover: hover) {
	.lightbox__nav {
		display: inline-flex;
	}
}

/* 6. Sayfalar ------------------------------------------------------------ */

/* Ana sayfa açılışı */
.hero {
	padding-block: 28px 48px;
}

.hero__grid {
	display: grid;
	gap: 36px;
}

@media (width >= 1024px) {
	.hero {
		padding-block: 72px 40px;
	}

	.hero__grid {
		grid-template-columns: 1.15fr 0.85fr;
		align-items: center;
		gap: 80px;
	}
}

.display {
	margin-top: 18px;
	font-family: var(--serif);
	font-size: clamp(42px, 6.4vw, 88px);
	font-weight: 380;
	line-height: 1;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.display em {
	font-style: italic;
	color: var(--gold-text);
}

.lead {
	max-width: 46ch;
	margin-top: 22px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--mute);
}

@media (width >= 768px) {
	.lead {
		font-size: 17px;
	}
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 30px;
}

.hero__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 480px;
	margin-top: 40px;
	border-top: 1px solid var(--border-deep);
}

.hero__facts div {
	padding-top: 16px;
}

.hero__facts div + div {
	padding-left: 20px;
	border-left: 1px solid var(--border);
}

.hero__facts dt {
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--mute-light);
}

.hero__facts dd {
	margin-top: 4px;
	font-family: var(--serif);
	font-size: 26px;
	letter-spacing: -0.01em;
}

/* Açılış görseli — öne çıkan koleksiyon */
.hero__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-xl);
	background: var(--ink);
	box-shadow: var(--shadow-lift);
	isolation: isolate;
}

@media (width >= 1024px) {
	.hero__media {
		aspect-ratio: 4 / 5;
	}
}

.hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.6s var(--ease);
}

.hero__media:hover img {
	transform: scale(1.035);
}

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(0 0 0 / 0%) 50%, rgb(26 22 20 / 58%) 100%);
}

.hero__media-caption {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	display: grid;
	gap: 4px;
	padding: 22px 24px;
	color: #ffffff;
}

.hero__media-caption .eyebrow {
	color: var(--gold-soft);
}

.hero__media-name {
	font-family: var(--serif);
	font-size: clamp(26px, 2.6vw, 34px);
	letter-spacing: -0.01em;
}

.hero__media-count {
	font-size: 12px;
	color: rgb(255 255 255 / 78%);
}

/* Uygulama ana ekranındaki büyük "MAĞAZA" düğmesi (yalnız mobil) */
.store-cta {
	display: block;
	margin-top: 20px;
	padding: 28px 26px;
	border-radius: var(--radius-lg);
	background: linear-gradient(90deg, var(--gold-soft), var(--gold-cream-deep));
	box-shadow: inset 0 0 0 1px rgb(184 146 75 / 55%), var(--shadow-gold);
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
}

@media (width >= 1024px) {
	.store-cta {
		display: none;
	}
}

/* Mağaza bloğu */
.store-block__grid {
	display: grid;
	gap: 16px;
}

@media (width >= 900px) {
	.store-block__grid {
		grid-template-columns: 1.25fr 1fr;
		gap: 24px;
	}
}

.store-block__map {
	overflow: hidden;
	min-height: 280px;
	border-radius: var(--radius-lg);
	background: var(--canvas-deep);
	box-shadow: inset 0 0 0 1px var(--border);
}

.store-block__map iframe {
	width: 100%;
	height: 100%;
	min-height: 280px;
	border: 0;
	filter: grayscale(0.35) contrast(1.02);
}

.store-block__info {
	padding: 8px 24px 24px;
	border-radius: var(--radius-lg);
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--border), var(--shadow-card);
}

.store-block__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.store-block__actions .btn {
	flex: 1 1 auto;
}

/* Ürün sayfası */
.product {
	display: grid;
	gap: 24px;
	padding-block: 8px 56px;
}

@media (width >= 1024px) {
	.product {
		grid-template-columns: 1.15fr 0.85fr;
		align-items: start;
		gap: 72px;
		padding-block: 40px 96px;
	}

	.product__info {
		position: sticky;
		top: calc(var(--header-h) + 32px);
	}
}

.gallery {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: var(--radius-xl);
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--border);
}

.gallery__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.gallery__track::-webkit-scrollbar {
	display: none;
}

.gallery__slide {
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: start;
	cursor: zoom-in;
}

.gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery .label-new {
	top: 12px;
	left: 12px;
}

.gallery__zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgb(255 255 255 / 92%);
	box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}

.gallery__zoom .icon {
	width: 16px;
	height: 16px;
}

.gallery__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 14px;
}

.gallery__dots span {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: var(--border-soft);
	transition: width 0.35s var(--ease), background-color 0.35s;
}

.gallery__dots .is-active {
	width: 18px;
	background: var(--ink);
}

.gallery__thumbs {
	display: none;
	gap: 10px;
	margin-top: 14px;
}

.gallery__thumbs button {
	overflow: hidden;
	width: 76px;
	height: 76px;
	border-radius: 12px;
	box-shadow: inset 0 0 0 1px var(--border);
	opacity: 0.6;
	transition: opacity 0.25s, box-shadow 0.25s;
}

.gallery__thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

.gallery__thumbs button:hover,
.gallery__thumbs .is-active {
	opacity: 1;
}

.gallery__thumbs .is-active {
	box-shadow: inset 0 0 0 1.5px var(--ink);
}

@media (width >= 1024px) {
	.gallery__dots {
		display: none;
	}

	.gallery__thumbs {
		display: flex;
	}
}

.product__info .back-link {
	display: none;
}

@media (width >= 1024px) {
	.product__info .back-link {
		display: inline-flex;
		margin-bottom: 20px;
	}

	.product__eyebrow {
		display: none;
	}
}

.product__eyebrow {
	margin-top: 4px;
	font-size: 10px;
	letter-spacing: 0.24em;
}

.product__title {
	margin-top: 8px;
	font-family: var(--serif);
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 32px;
	margin-top: 22px;
	padding-block: 16px;
	border-block: 1px solid var(--border);
}

.metrics dt {
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--mute-light);
}

.metrics dd {
	margin-top: 4px;
	font-size: 14px;
	font-weight: 500;
}

.metrics .is-success {
	color: var(--success);
}

.metrics .is-danger {
	color: var(--danger);
}

.product__desc {
	margin-top: 22px;
	font-size: 15px;
	line-height: 1.7;
}

.product__desc .eyebrow {
	margin-bottom: 8px;
	font-size: 9px;
	color: var(--mute-light);
}

.product__desc p + p {
	margin-top: 0.8em;
}

.product__cta {
	display: grid;
	gap: 10px;
	margin-top: 28px;
}

.product__note {
	display: flex;
	gap: 10px;
	margin-top: 6px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--gold-cream-warm);
	box-shadow: inset 0 0 0 1px var(--gold-divider);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-soft);
}

.product__note .icon {
	width: 18px;
	height: 18px;
	color: var(--gold);
}

/* 7. Hareket ------------------------------------------------------------- */

.js .reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.js .reveal.is-in {
	opacity: 1;
	transform: none;
}

.reveal:nth-child(2) {
	transition-delay: 0.06s;
}

.reveal:nth-child(3) {
	transition-delay: 0.12s;
}

.reveal:nth-child(4) {
	transition-delay: 0.18s;
}

.reveal:nth-child(5) {
	transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.js .reveal {
		opacity: 1;
		transform: none;
	}
}