/*
 * Menü tasarımı — beyaz kanvas, fotoğraf ağırlıklı.
 *
 * Neden nötr gri, sıcak gri değil? Fotoğraf ağırlıklı bir sayfada renk
 * fotoğraftan gelir. Sıcak tonlu zemin (eski #fbf8f5) yemek fotoğraflarının
 * beyazlarıyla kavga ediyor ve "sarımsı" duruyordu; nötr beyaz fotoğrafı
 * olduğu gibi gösteriyor.
 *
 * Sistem (bkz. docs/CONTEXT.md D10-D14):
 *  - Ölçekler sabit: boşluk 4/8/12/16/24/32/48, tip 12/14/16/18/22/30. 13px yok.
 *  - Web fontu yok: Türkiye'de Google Fonts erişim engelli. Serif yalnızca
 *    marka ve bölüm başlıklarında; ürün adları/fiyatlar sans — fotoğrafla
 *    yarışmıyor ve uzun Türkçe adlarda daha okunaklı.
 *  - Emoji yok: kategori işaretleri src/icons.ts'ten inline SVG.
 *  - Fotoğrafı olan ürün "kart" olur (ızgara), olmayan ürün "satır" olur ve
 *    iki sütunu birden kaplar. Sahibi fotoğraf ekledikçe menü kendiliğinden
 *    galeriye dönüşür; tek bir ayar gerekmez.
 */

:root {
	--ink-900: #101113;
	--ink-700: #3f4146;
	--ink-500: #6b6e75;
	--ink-400: #9a9da4;
	--line: #e9e9eb;
	--line-soft: #f2f2f4;
	--paper: #ffffff;
	--surface: #ffffff;
	--surface-2: #f5f5f6;
	--shot-bg: #f0f0f2;

	--ok: #2f6b46;
	--warn: #9a4a17;

	--accent: #a65521;
	--accent-ink: #ffffff;

	/* Boşluk ölçeği */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-6: 24px;
	--s-8: 32px;
	--s-12: 48px;

	/* Kenar boşluğu: dar telefonda içerik alanı kazanmak için daralıyor. */
	--gutter: clamp(16px, 5vw, 24px);
	--measure: 40rem;

	--radius: 12px;
	--radius-sm: 8px;

	/* İki parçalı gölge: ince + keskin, geniş + yumuşak */
	--shadow-sm: 0 1px 2px rgba(16, 17, 19, 0.06);
	--shadow-md: 0 1px 2px rgba(16, 17, 19, 0.05), 0 8px 20px -8px rgba(16, 17, 19, 0.14);

	--font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
	--font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

@media (prefers-color-scheme: dark) {
	:root {
		--ink-900: #f4f4f5;
		--ink-700: #c9cace;
		--ink-500: #9a9da4;
		--ink-400: #74767c;
		--line: #292a2d;
		--line-soft: #1f2022;
		--paper: #0c0d0e;
		--surface: #141517;
		--surface-2: #1b1c1f;
		--shot-bg: #1b1c1f;
		--ok: #74b58c;
		--warn: #d9915d;
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
		--shadow-md: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 24px -10px rgba(0, 0, 0, 0.6);
	}
}

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	background: var(--paper);
	color: var(--ink-900);
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	padding-bottom: env(safe-area-inset-bottom);
}

svg {
	display: block;
	flex: none;
}

img {
	max-width: 100%;
}

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

.skip {
	position: absolute;
	left: var(--s-4);
	top: -999px;
	z-index: 10;
	padding: var(--s-2) var(--s-4);
	background: var(--surface);
	color: var(--ink-900);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	font-size: 14px;
	font-weight: 600;
}

.skip:focus {
	top: var(--s-4);
}

/* ------------------------------------------------------------------ üst blok */

.masthead {
	max-width: var(--measure);
	margin: 0 auto;
	padding: clamp(var(--s-8), 10vw, var(--s-12)) var(--gutter) var(--s-4);
	text-align: center;
}

.masthead__logo {
	width: 64px;
	height: 64px;
	margin: 0 auto var(--s-4);
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var(--shadow-sm);
}

.masthead__name {
	font-family: var(--font-display);
	font-size: clamp(30px, 9vw, 38px);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.1;
	text-wrap: balance;
}

.masthead__tagline {
	margin-top: var(--s-2);
	color: var(--ink-500);
	font-size: 16px;
	line-height: 1.5;
	max-width: 32ch;
	margin-inline: auto;
	text-wrap: pretty;
}

/* İkincil bilgi: küçük, geniş aralıklı, hafif — veriyle yarışmaz. */
.notice {
	max-width: var(--measure);
	margin: 0 auto var(--s-4);
	padding: 0 var(--gutter);
}

.notice__text {
	display: block;
	padding: var(--s-3) var(--s-4);
	background: var(--surface-2);
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-700);
}

/* -------------------------------------------------------- yapışkan arama+rail */

.sticky {
	position: sticky;
	top: 0;
	z-index: 5;
	background: color-mix(in srgb, var(--paper) 82%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--line);
	padding-top: var(--s-3);
}

@supports not (backdrop-filter: blur(1px)) {
	.sticky {
		background: var(--paper);
	}
}

/* Saydamlığı azaltmayı tercih eden kullanıcıda bulanıklık okunabilirliği düşürüyor:
   çubuğu düz zemine çeviriyoruz (apple-design: prefers-reduced-transparency). */
@media (prefers-reduced-transparency: reduce) {
	.sticky {
		background: var(--paper);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

.search {
	position: relative;
	max-width: var(--measure);
	margin: 0 auto;
	padding: 0 var(--gutter) var(--s-3);
}

.search__icon {
	position: absolute;
	left: calc(var(--gutter) + 12px);
	top: calc(50% - 9px);
	width: 18px;
	height: 18px;
	color: var(--ink-400);
	pointer-events: none;
}

/* Dolgulu alan: beyaz zeminde çerçeveden daha sakin duruyor. */
.search input {
	width: 100%;
	padding: 11px 44px 11px 40px;
	font: inherit;
	font-size: 16px; /* mobilde odaklanınca sayı büyütmesin (iOS) */
	color: var(--ink-900);
	background: var(--surface-2);
	border: 1px solid transparent;
	border-radius: var(--radius);
	transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out),
		box-shadow 150ms var(--ease-out);
	appearance: none;
}

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

.search input::placeholder {
	color: var(--ink-500);
}

.search input:focus {
	outline: none;
	background: var(--surface);
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.search__clear {
	position: absolute;
	right: calc(var(--gutter) + 6px);
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--line-soft);
	color: var(--ink-500);
	cursor: pointer;
	transition: transform 140ms var(--ease-out), background-color 140ms ease, color 140ms ease;
}

.search__clear-icon {
	width: 14px;
	height: 14px;
}

.search__clear[hidden] {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.search__clear:hover {
		background: var(--line);
		color: var(--ink-900);
	}
}

.search__clear:active {
	transform: translateY(-50%) scale(0.92);
}

/* kategori şeridi: yatay kaydırmalı, çubuğu gizli */
.rail {
	display: flex;
	gap: var(--s-2);
	max-width: var(--measure);
	margin: 0 auto;
	padding: 0 var(--gutter) var(--s-2);
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

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

.chip {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	min-height: 40px; /* parmak hedefi */
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink-500);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 140ms var(--ease-out), color 140ms ease, border-color 140ms ease,
		background-color 140ms ease;
}

.chip__icon {
	width: 15px;
	height: 15px;
	opacity: 0.75;
	transition: opacity 140ms ease;
}

.chip[hidden] {
	display: none;
}

.chip.is-active {
	background: var(--ink-900);
	border-color: var(--ink-900);
	color: var(--paper);
}

.chip.is-active .chip__icon {
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	.chip:hover {
		border-color: var(--ink-400);
		color: var(--ink-900);
	}
}

.chip:active {
	transform: scale(0.96);
}

/* --------------------------------------------------------------------- menü */

#menu {
	max-width: var(--measure);
	margin: 0 auto;
	padding: var(--s-6) var(--gutter) var(--s-12);
}

.cat + .cat {
	margin-top: var(--s-12);
}

/* Çubuğun yüksekliği menu.js'te ölçülüp --sticky-h olarak yazılıyor. */
.cat,
.item {
	scroll-margin-top: calc(var(--sticky-h, 116px) + var(--s-4));
}

/* Bölüm başlığı serif ve büyük: fotoğrafların arasında gezinirken nerede
   olduğunu söyleyen tek işaret. */
.cat__title {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-4);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: clamp(22px, 5.5vw, 26px);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--ink-900);
}

.cat__icon {
	width: 24px;
	height: 24px;
	color: var(--accent);
}

.cat__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* adet: en az dikkat çeken yer */
.cat__count {
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--ink-500);
	font-variant-numeric: tabular-nums;
}

/*
 * Kategori listesi: kart blokları ve tam genişlik satırlar alt alta dizilir.
 * Izgara DEĞİL: tam genişlik bir satır ızgaraya girince akışı kırıp bir önceki
 * kartın yanında boşluk bırakıyordu.
 */
.items {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* Ardışık fotoğraflı ürünler tek ızgara bloğunda toplanır (bkz. render.ts). */
.gal {
	list-style: none;
	padding: 0;
	margin-block: var(--s-2);
}

/*
 * Izgara 360px'ten itibaren hep iki sütun. Sütun sayısı ekranla değişen
 * `auto-fill`'a göre daha öngörülü: kart ölçüsü büyüyor, masa üstünde de
 * fotoğraf iri kalıyor. 320px'te tek sütun — dar telefonda fotoğraf tam genişlik.
 */
.gal__grid {
	display: grid;
	/* ul varsayılanı: 40px iç boşluk. Sıfırlanmazsa ızgara daralıp kartlar küçülür. */
	list-style: none;
	padding: 0;
	grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
	gap: var(--s-6) var(--s-4);
	align-items: start;
}

/*
 * Sütun sayısı kullanım amacına göre:
 *  - kompakt: arama sonuçları (ana sayfa) — çok ürün, küçük kart
 *  - iri: kategori sayfası — az ürün, fotoğraf tam genişlik (390px'te 358px)
 */
.items--compact {
	--cols: 1;
}

.items--big {
	--cols: 1;
}

@media (min-width: 360px) {
	.items--compact {
		--cols: 2;
	}
}

@media (min-width: 600px) {
	.items--big {
		--cols: 2;
	}
}

/* ------------------------------------------- fotoğraflı ürün: galeri kartı */

.item--card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.item__shot {
	display: block;
	width: 100%;
	/* height:auto ŞART: HTML'deki height="360" sunumsal ipucu olarak 360px yükseklik
	   dayatıyor ve aspect-ratio'yu eziyordu (fotoğraf 4:3 yerine dikey çıkıyordu).
	   width/height öznitelikleri yine yerinde: CSS gelmeden önce yer ayırıyorlar. */
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
	background: var(--shot-bg);
	box-shadow: var(--shadow-sm);
}

.item--card .item__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: var(--s-2);
}

.item--card .item__name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.005em;
	color: var(--ink-900);
	text-wrap: pretty;
}

.item--card .item__desc {
	font-size: 13px;
	line-height: 1.45;
	color: var(--ink-500);
	/* Kart yükseklikleri dağılmasın: en fazla iki satır. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.item--card .item__price {
	margin-top: 2px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink-900);
	font-variant-numeric: tabular-nums;
}

/* Rozet fotoğrafın üstünde: metin alanını yemesin. */
.item--card .badge {
	position: absolute;
	top: var(--s-2);
	left: var(--s-2);
	margin: 0;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--ink-900);
	box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-transparency: reduce) {
	.item--card .badge {
		background: var(--surface);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

.item--card .badge--new {
	background: var(--accent);
	color: var(--accent-ink);
}

.item--card.item--out .item__shot {
	filter: grayscale(0.75);
	opacity: 0.5;
}

.item--card[hidden] {
	display: none;
}

.item--card.item--wide[hidden] {
	display: none;
}

/*
 * Blokta tek sayıda kart kaldığında son kart iki sütunu kaplar: artakalan boşluk
 * olmaz. Tam genişlikte dikey kart garip durduğu için yatay düzene geçiyor:
 * fotoğraf solda, ad/açıklama/fiyat sağda.
 */
/* İki sütunlu düzenlerde geçerli; tek sütunda kart normal kalır. */
@media (min-width: 360px) {
	.items--compact .item--wide {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--s-4);
		align-items: center;
	}

	.items--compact .item--wide .item__shot {
		aspect-ratio: 16 / 10;
	}

	.items--compact .item--wide .item__body {
		padding-top: 0;
	}

	.items--compact .item--wide .item__name {
		font-size: 18px;
	}

	.items--compact .item--wide .item__price {
		font-size: 17px;
	}
}

@media (min-width: 600px) {
	.items--big .item--wide {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--s-4);
		align-items: center;
	}

	.items--big .item--wide .item__shot {
		aspect-ratio: 4 / 3;
	}

	.items--big .item--wide .item__body {
		padding-top: 0;
	}

	.items--big .item--wide .item__name {
		font-size: 20px;
	}

	.items--big .item--wide .item__price {
		font-size: 18px;
	}
}

/* --------------------------------------- fotoğrafsız ürün: kompakt satır */

/* İki sütunu birden kaplar; ızgaranın arasında tam genişlik satır olur. */
.item--row {
	min-width: 0;
	padding: var(--s-4) 0;
}

.item--row + .item--row {
	border-top: 1px solid var(--line-soft);
}

.item--row:first-child {
	padding-top: 0;
}

.item--row[hidden] {
	display: none;
}

.item__body {
	min-width: 0;
}

.item--row .item__line {
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
}

.item--row .item__name {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.005em;
	color: var(--ink-900);
	min-width: 0;
	text-wrap: pretty;
}

/* Noktalı çizgi: basılı menünün fiyat hiza yöntemi.
   `align-self` YOK: kapsayıcıdaki baseline hizası miras alınıyor. Böylece ad iki
   satıra kırıldığında çizgi (ve fiyat) İLK satırda kalıyor; ortada asılı kalmıyor. */
.item__leader {
	flex: 1;
	min-width: var(--s-6);
	height: 1px;
	background-image: radial-gradient(circle, var(--ink-400) 0.6px, transparent 0.7px);
	background-size: 5px 1px;
	background-repeat: repeat-x;
	background-position: left center;
	opacity: 0.45;
}

.item--row .item__price {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink-900);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	padding-left: var(--s-2);
}

.item--row .item__desc {
	margin-top: var(--s-1);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-500);
	max-width: 46ch;
	text-wrap: pretty;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	vertical-align: 0.18em;
	margin-left: var(--s-2);
	padding: 2px 7px;
	border-radius: 999px;
	font-family: var(--font-ui);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
}

.badge__icon {
	width: 10px;
	height: 10px;
}

.badge--new {
	background: var(--accent);
	color: var(--accent-ink);
}

.badge--fav {
	background: transparent;
	color: var(--warn);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent);
}

.badge--out {
	background: transparent;
	color: var(--ink-500);
	box-shadow: inset 0 0 0 1px var(--line);
}

/* Tükendi: satırı soluklaştırır ama yerinde bırakır — menü düzeni bozulmaz. */
.item--out {
	opacity: 0.55;
}

.item--out .item__name {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------- ana sayfa */

/* Kapak: kategori kartları. Fotoğraf varsa kapak olur, yoksa ikon nötr zeminde. */
.cats {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-4);
}

@media (min-width: 340px) {
	.cats {
		grid-template-columns: 1fr 1fr;
	}
}

.catcard {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	min-width: 0;
	color: inherit;
	text-decoration: none;
	transition: transform 160ms var(--ease-out);
}

.catcard__media {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--shot-bg);
	box-shadow: var(--shadow-sm);
}

.catcard__shot {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.catcard__glyph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--surface-2);
}

.catcard__icon {
	width: 34px;
	height: 34px;
	color: var(--accent);
}

.catcard__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.catcard__name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.catcard__count {
	font-size: 13px;
	color: var(--ink-500);
}

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

@media (hover: hover) and (pointer: fine) {
	.catcard:hover .catcard__name {
		color: var(--accent);
	}
}

.lede {
	margin-bottom: var(--s-4);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-700);
}

.lede--hint {
	margin: var(--s-6) 0 0;
	font-size: 13px;
	color: var(--ink-500);
	text-align: center;
}

/* --------------------------------------------------------- arama sonuçları */

.hits {
	display: flex;
	flex-direction: column;
}

/* Sonuç bir bağlantıdır: dokununca ürünün kendi kategori sayfasına gider. */
.hit {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	min-height: 56px;
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--line-soft);
	color: var(--ink-900);
	text-decoration: none;
}

.hit__main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.hit__name {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.hit__cat {
	font-size: 13px;
	color: var(--ink-500);
}

.hit__price {
	flex: none;
	font-size: 16px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.hit:active {
	background: var(--surface-2);
}

/* ---------------------------------------------------------- geri düğmesi */

.search__back {
	position: absolute;
	left: var(--gutter);
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--ink-700);
	text-decoration: none;
	transition: background-color 140ms ease, transform 140ms var(--ease-out);
}

.search__back-icon {
	width: 20px;
	height: 20px;
}

@media (hover: hover) and (pointer: fine) {
	.search__back:hover {
		background: var(--surface-2);
		color: var(--ink-900);
	}
}

.search__back:active {
	transform: translateY(-50%) scale(0.92);
}

/* Geri düğmesi girişin soluna giriyor: alanı ve ikonu kaydır. */
.search--with-back {
	padding-left: calc(var(--gutter) + 48px);
}

.search--with-back .search__icon {
	left: calc(var(--gutter) + 48px + 12px);
}

/* --------------------------------------------------------- kompakt başlık */

.masthead--compact {
	padding: var(--s-4) var(--gutter) var(--s-3);
}

/* Marka bağlantısı aynı zamanda "ana sayfaya dön": parmak hedefi 44px olmalı.
   Ölçüldü: 23px kalıyordu. Negatif kenar boşluğu, hedef büyürken hizayı bozmasın. */
.masthead__home {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: 44px;
	margin: 0 calc(var(--s-2) * -1);
	padding: 0 var(--s-2);
	color: inherit;
	text-decoration: none;
	border-radius: var(--radius-sm);
}

.masthead--compact .masthead__logo {
	width: 32px;
	height: 32px;
	margin: 0;
}

.masthead--compact .masthead__name {
	font-size: 21px;
}

/* ------------------------------------------------------------- sayfalama */

.pager {
	display: flex;
	gap: var(--s-3);
	margin-top: var(--s-8);
	padding-top: var(--s-6);
	border-top: 1px solid var(--line);
}

.pager__link {
	flex: 1;
	min-width: 0;
	min-height: 56px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	padding: var(--s-3) var(--s-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink-900);
	text-decoration: none;
	transition: border-color 140ms ease, transform 140ms var(--ease-out);
}

.pager__link--next {
	text-align: right;
}

.pager__link--empty {
	border: 0;
	padding: 0;
}

.pager__dir {
	font-size: 12px;
	color: var(--ink-500);
}

.pager__name {
	font-size: 15px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	.pager__link:not(.pager__link--empty):hover {
		border-color: var(--ink-400);
	}
}

.pager__link:not(.pager__link--empty):active {
	transform: scale(0.985);
}

/* ------------------------------------------------------------- boş/durumlar */

.empty {
	padding: var(--s-8) 0;
	text-align: center;
	color: var(--ink-500);
	font-size: 15px;
	line-height: 1.6;
	max-width: 32ch;
	margin-inline: auto;
}

.foot {
	max-width: var(--measure);
	margin: 0 auto;
	padding: var(--s-6) var(--gutter);
	border-top: 1px solid var(--line);
	color: var(--ink-500);
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
}

.foot__note + .foot__brand,
.foot__note {
	margin-top: var(--s-2);
}

.foot__brand {
	margin-top: var(--s-3);
	color: var(--ink-500);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.empty-page {
	max-width: 30ch;
	margin: 0 auto;
	padding: clamp(64px, 20vh, 160px) var(--gutter);
	text-align: center;
}

.empty-page__icon {
	width: 40px;
	height: 40px;
	margin: 0 auto var(--s-4);
	color: var(--ink-400);
}

.empty-page h1 {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 400;
	margin-bottom: var(--s-2);
}

.empty-page p {
	color: var(--ink-500);
	font-size: 15px;
	line-height: 1.6;
}

.empty-page__link {
	display: inline-block;
	margin-top: var(--s-6);
	padding: 10px 20px;
	background: var(--ink-900);
	color: var(--paper);
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 140ms var(--ease-out);
}

.empty-page__link:active {
	transform: scale(0.97);
}

/* --------------------------------------------------------------- hareket */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	/* renk geri bildirimi anlaşmayı sağladığı için kalıyor; konum değişimi gidiyor */
	.chip:active,
	.empty-page__link:active,
	.search__clear:active {
		transform: none;
	}
}

/* ---------------------------------------------------------------- yazdırma */

@media print {
	:root {
		--paper: #fff;
		--surface: #fff;
		--ink-900: #000;
		--ink-500: #333;
		--ink-400: #666;
		--line: #ccc;
		--line-soft: #e5e5e5;
	}

	.sticky,
	.skip,
	.notice,
	.item__shot,
	.catcard__media,
	.pager,
	.foot__brand {
		display: none !important;
	}

	body {
		background: #fff;
		font-size: 11pt;
	}

	/* Kâğıtta fotoğraf yok: bloklar tek sütunlu listeye döner, kâğıt/toner gider. */
	.items {
		display: block;
	}

	.gal__grid {
		display: block;
	}

	.item--row,
	.item--card {
		padding: var(--s-2) 0;
	}

	.cat + .cat {
		margin-top: var(--s-6);
	}

	#menu {
		max-width: none;
		padding: 0;
	}

	.masthead {
		padding: 0 0 var(--s-4);
		text-align: left;
	}

	/* yazıcıda arka plan rengi varsayılan olarak basılmıyor: ikon soluk kalmasın */
	.cat__icon {
		color: #000;
	}

	/* Kart rozeti fotoğrafın üstüne konumlanıyor. Kâğıtta fotoğraf yok: rozet
	   ürün adının üstüne biniyordu, akışa geri alınıyor. */
	.item--card .badge {
		position: static;
		margin-left: var(--s-2);
		background: none;
		box-shadow: none;
		color: #000;
	}

	.cat,
	.item {
		break-inside: avoid;
	}

	.item__name {
		font-size: 13pt;
	}

	.item__price {
		font-size: 12pt;
	}
}