/*
 * EsnafLink — İŞLETME VİTRİNİ
 *
 * TEMEL KARAR: BU SAYFA İŞLETMENİN, PLATFORMUN DEĞİL
 * Vitrinde başka işletmeye giden hiçbir bağlantı yoktur. Ne üst menüde
 * "işletmeleri keşfet", ne altta "benzer işletmeler". Esnaf bu sayfanın
 * parasını kendi müşterisini tutmak için ödüyor; ziyaretçiyi rakibine
 * göndermek doğrudan ona zarar verir. Sayfadaki tek EsnafLink izi, en
 * altta küçük bir künyedir.
 *
 * BAĞIMSIZ SAYFA
 * Tema başlığı/altbilgisi kullanılmaz. Sayfa tek CSS dosyası ve satır içi
 * JS ile tamamlanır: dış yazı tipi yok, ikon kütüphanesi yok, çerçeve yok.
 *
 * SEKTÖR TEMALARI
 * 8 sabit tema var (berber, güzellik, yemek, teknik, oto, sağlık, spor,
 * genel). Tema yalnızca gövdedeki data-vitrin değeriyle seçilir; hepsi bu
 * dosyada olduğu için sektör değişimi EK İSTEK ÜRETMEZ. İşletme renk
 * seçmez: 1000 işletmenin 1000 kötü tasarımı yerine 8 iyi tasarım.
 */

/* ===================================================== TASARIM DEĞİŞKENLERİ */

:root {
	/* Nötr ölçek */
	--n-900: #0b1020;
	--n-800: #161d2f;
	--n-700: #2b3446;
	--n-600: #4a5567;
	--n-500: #6b7688;
	--n-400: #98a2b3;
	--n-300: #d3d9e2;
	--n-200: #e7ebf1;
	--n-100: #f2f5f9;
	--n-050: #f8fafc;
	--white: #fff;

	/* Varsayılan (genel) tema */
	--v-ink: #0b1020;
	--v-ink-2: #151d33;
	--v-accent: #ff5a1f;
	--v-accent-2: #ff8348;
	--v-on-accent: #2a0d00;
	--v-soft: #fff1ea;
	--v-line: #e7ebf1;
	--v-glow: rgba(255, 90, 31, .34);

	--v-radius: 20px;
	--v-radius-sm: 13px;
	--v-shadow: 0 1px 2px rgba(11, 16, 32, .05), 0 18px 40px -24px rgba(11, 16, 32, .4);
	--v-shadow-lg: 0 2px 6px rgba(11, 16, 32, .06), 0 40px 80px -40px rgba(11, 16, 32, .55);
	--v-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--v-shell: min(1180px, 100% - 34px);
}

/* --- Sektör temaları --------------------------------------------------- */

[data-vitrin="berber"] {
	--v-ink: #12100e; --v-ink-2: #1f1b16;
	--v-accent: #c8992f; --v-accent-2: #e3b955; --v-on-accent: #23190200;
	--v-on-accent: #241a02; --v-soft: #fbf4e4; --v-glow: rgba(200, 153, 47, .34);
}
[data-vitrin="guzellik"] {
	--v-ink: #2b1024; --v-ink-2: #3d1a33;
	--v-accent: #e85c97; --v-accent-2: #f486b4; --v-on-accent: #3a0620;
	--v-soft: #fdf0f6; --v-glow: rgba(232, 92, 151, .34);
}
[data-vitrin="yemek"] {
	--v-ink: #1b0f06; --v-ink-2: #2c1a0c;
	--v-accent: #f0632b; --v-accent-2: #ff8a54; --v-on-accent: #2f0f00;
	--v-soft: #fef1e9; --v-glow: rgba(240, 99, 43, .34);
}
[data-vitrin="teknik"] {
	--v-ink: #071a2e; --v-ink-2: #0d2a47;
	--v-accent: #2483f5; --v-accent-2: #5aa4ff; --v-on-accent: #001531;
	--v-soft: #e9f2fe; --v-glow: rgba(36, 131, 245, .36);
}
[data-vitrin="oto"] {
	--v-ink: #101215; --v-ink-2: #1c2026;
	--v-accent: #e8352a; --v-accent-2: #ff6154; --v-on-accent: #fff;
	--v-soft: #fdeceb; --v-glow: rgba(232, 53, 42, .36);
}
[data-vitrin="saglik"] {
	--v-ink: #062a2c; --v-ink-2: #0b3f42;
	--v-accent: #0fa79a; --v-accent-2: #2fcbbc; --v-on-accent: #002420;
	--v-soft: #e7f6f5; --v-glow: rgba(15, 167, 154, .34);
}
[data-vitrin="spor"] {
	--v-ink: #0d1113; --v-ink-2: #171d20;
	--v-accent: #93e01b; --v-accent-2: #b4f04f; --v-on-accent: #182600;
	--v-soft: #f3fbe3; --v-glow: rgba(147, 224, 27, .36);
}
/* Perakende: mağaza/market/giyim — ürün öne çıkar, sıcak ve davetkâr. */
[data-vitrin="perakende"] {
	--v-ink: #17120c; --v-ink-2: #241c12;
	--v-accent: #d98324; --v-accent-2: #f0a750; --v-on-accent: #1d1206;
	--v-soft: #fdf1e2; --v-glow: rgba(217, 131, 36, .34);
}
/* Usta ve atölye: mobilya, marangoz, terzi, tamir — koyu ahşap tonu. */
[data-vitrin="usta"] {
	--v-ink: #14100d; --v-ink-2: #201a15;
	--v-accent: #a4703c; --v-accent-2: #c8965c; --v-on-accent: #1b1209;
	--v-soft: #f6eee4; --v-glow: rgba(164, 112, 60, .34);
}
/* Eğitim ve kurs: güven veren lacivert, sakin ve kurumsal. */
[data-vitrin="egitim"] {
	--v-ink: #0a1430; --v-ink-2: #12204a;
	--v-accent: #3563e9; --v-accent-2: #6a8df5; --v-on-accent: #fff;
	--v-soft: #e8eefd; --v-glow: rgba(53, 99, 233, .34);
}

/* ================================================================ TEMEL */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body.v-body {
	margin: 0;
	font-family: var(--v-font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--n-700);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

h1, h2, h3, h4 { color: var(--n-900); line-height: 1.12; letter-spacing: -.03em; font-weight: 800; margin: 0 0 .4em; }
p { margin: 0 0 1em; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--v-accent); outline-offset: 3px; border-radius: 6px; }

.v-shell { width: var(--v-shell); margin-inline: auto; }

.v-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Etiket: her bölümün üstündeki küçük büyük harfli metin */
.v-kicker {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 11.5px;
	font-weight: 900;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--v-accent);
	margin-bottom: 10px;
}
.v-kicker::before {
	content: "";
	width: 22px; height: 2px;
	background: var(--v-accent);
	border-radius: 2px;
}

/* ============================================================== DÜĞMELER */

.v-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	min-height: 52px;
	padding: 14px 24px;
	border: 2px solid transparent;
	border-radius: 14px;
	font: inherit;
	font-size: 16px;
	font-weight: 750;
	letter-spacing: -.01em;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s, filter .16s, background .16s, color .16s, border-color .16s;
	white-space: nowrap;
}
.v-btn:active { transform: translateY(1px); }
.v-btn-primary {
	color: var(--v-on-accent);
	background: linear-gradient(135deg, var(--v-accent-2), var(--v-accent));
	box-shadow: 0 14px 32px -14px var(--v-glow);
}
.v-btn-primary:hover { filter: brightness(1.07); }
.v-btn-glass {
	color: #fff;
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .28);
}
.v-btn-glass:hover { background: rgba(255, 255, 255, .2); }
.v-btn-solid { color: #fff; background: var(--n-900); }
.v-btn-solid:hover { filter: brightness(1.2); }
.v-btn-line { color: var(--n-900); background: #fff; border-color: var(--n-300); }
.v-btn-line:hover { border-color: var(--v-accent); color: var(--v-accent); }

/* ============================================================= ÜST ÇUBUK */

/*
 * Vitrin üst çubuğu KEŞFET BAĞLANTISI İÇERMEZ. Yalnızca işletmenin kendi
 * adı ve tek eylemi (ara) vardır. Ziyaretçi buradan rakibe gidemez.
 */
/*
 * sticky DEĞİL fixed: gizliyken (translateY -101%) akışta yer kaplamamalı.
 * sticky bırakılsaydı sayfanın en üstünde 62 px boş beyaz şerit kalırdı.
 */
.v-topbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .93);
	border-bottom: 1px solid var(--n-200);
	transform: translateY(-101%);
	transition: transform .28s ease;
}
.v-topbar.is-on { transform: translateY(0); }
.v-topbar-in {
	display: flex; align-items: center; gap: 14px;
	min-height: 62px;
}
.v-topbar-id { display: flex; align-items: center; gap: 11px; min-width: 0; margin-right: auto; }
.v-topbar-id img, .v-topbar-id > span {
	width: 36px; height: 36px; flex: 0 0 auto;
	border-radius: 11px;
	object-fit: cover;
	display: grid; place-items: center;
	background: var(--v-ink);
	color: #fff; font-weight: 900; font-size: 15px;
}
.v-topbar-id b {
	font-size: 15.5px; font-weight: 750; color: var(--n-900);
	letter-spacing: -.02em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v-topbar .v-btn { min-height: 44px; padding: 10px 18px; font-size: 14.5px; }
@media (max-width: 560px) { .v-topbar-id b { max-width: 42vw; } }

/* ============================================================== KAHRAMAN */

.v-hero {
	position: relative;
	isolation: isolate;
	color: #fff;
	background: linear-gradient(160deg, var(--v-ink) 0%, var(--v-ink-2) 100%);
	overflow: hidden;
	padding: 46px 0 52px;
}
.v-hero-bg { position: absolute; inset: 0; z-index: -3; }
.v-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.v-hero-veil {
	position: absolute; inset: 0; z-index: -2;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--v-ink) 72%, transparent) 0%, color-mix(in srgb, var(--v-ink) 40%, transparent) 38%, color-mix(in srgb, var(--v-ink) 94%, transparent) 100%);
}
/* Sektör dokusu: tek katman, blur yok, GPU'yu yormaz. */
.v-hero::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	pointer-events: none;
	opacity: .5;
	background: radial-gradient(760px 380px at 84% -12%, var(--v-glow), transparent 62%);
}
[data-vitrin="berber"] .v-hero::after {
	content: "";
	position: absolute; right: -60px; top: -40px; bottom: -40px; width: 220px; z-index: -1;
	opacity: .16;
	background: repeating-linear-gradient(35deg, var(--v-accent) 0 14px, transparent 14px 34px);
}
[data-vitrin="teknik"] .v-hero::after {
	content: "";
	position: absolute; inset: 0; z-index: -1; opacity: .1;
	background:
		linear-gradient(var(--v-accent) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, var(--v-accent) 1px, transparent 1px) 0 0 / 48px 48px;
	mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
[data-vitrin="oto"] .v-hero::after {
	content: "";
	position: absolute; left: -10%; right: -10%; bottom: 8%; height: 3px; z-index: -1;
	opacity: .35;
	background: linear-gradient(90deg, transparent, var(--v-accent), transparent);
}
[data-vitrin="spor"] .v-hero::after {
	content: "";
	position: absolute; inset: -20% -30%; z-index: -1; opacity: .12;
	background: repeating-linear-gradient(-58deg, var(--v-accent) 0 6px, transparent 6px 46px);
}
[data-vitrin="guzellik"] .v-hero::after {
	content: "";
	position: absolute; left: -140px; bottom: -180px; width: 460px; height: 460px; z-index: -1;
	border-radius: 50%; opacity: .22;
	background: radial-gradient(circle, var(--v-accent), transparent 62%);
}

.v-hero-in { display: grid; gap: 26px; }

.v-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.v-badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 13px;
	border-radius: 999px;
	font-size: 12.5px; font-weight: 700;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .2);
	color: #fff;
}
.v-badge-verified { background: var(--v-accent); border-color: transparent; color: var(--v-on-accent); font-weight: 800; }
.v-badge-open { background: rgba(16, 185, 129, .2); border-color: rgba(16, 185, 129, .5); }
.v-badge-open i { width: 8px; height: 8px; border-radius: 50%; background: #22e59a; }
.v-badge-closed i { width: 8px; height: 8px; border-radius: 50%; background: #ff7a6d; }

.v-idrow { display: flex; align-items: center; gap: 16px; }
.v-logo {
	flex: 0 0 auto;
	width: 88px; height: 88px;
	border-radius: 24px;
	overflow: hidden;
	display: grid; place-items: center;
	background: #fff;
	color: var(--v-ink);
	font-size: 30px; font-weight: 900; letter-spacing: -.04em;
	box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .8);
}
.v-logo img { width: 100%; height: 100%; object-fit: cover; }

.v-hero h1 {
	color: #fff;
	font-size: clamp(32px, 6.6vw, 58px);
	letter-spacing: -.042em;
	line-height: 1.02;
	margin: 0 0 12px;
	text-wrap: balance;
}
.v-hero-lead {
	font-size: clamp(16px, 2.2vw, 20px);
	color: rgba(255, 255, 255, .82);
	margin: 0 0 20px;
	max-width: 56ch;
}

.v-rating {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 8px 15px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .2);
	margin-bottom: 18px;
}
.v-rating b { font-size: 17px; font-weight: 850; color: #fff; }
.v-rating i { color: #ffc24d; font-style: normal; letter-spacing: .06em; }
.v-rating span { font-size: 13.5px; color: rgba(255, 255, 255, .75); }

.v-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Kahraman altındaki hızlı bilgi şeridi */
.v-facts {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin-top: 30px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--v-radius);
	overflow: hidden;
}
.v-fact {
	padding: 15px 17px;
	background: color-mix(in srgb, var(--v-ink) 82%, transparent);
}
.v-fact span {
	display: block;
	font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	margin-bottom: 3px;
}
.v-fact b { font-size: 15.5px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.v-fact a { color: #fff; text-decoration: none; }

@media (min-width: 900px) {
	.v-hero { padding: 60px 0 64px; }
	.v-hero-in { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.v-logo { width: 66px; height: 66px; border-radius: 19px; font-size: 23px; }
	.v-actions .v-btn { flex: 1 1 calc(50% - 5px); }
	.v-actions .v-btn-primary { flex-basis: 100%; }
}

/* --- Sektöre özel kahraman farkları --- */

/* Yeme-içme: koyu zemin üstünde iştah açan sıcak vurgular, menü öne çıkar */
[data-vitrin="yemek"] .v-hero { padding-bottom: 68px; }
[data-vitrin="yemek"] .v-hero h1 { font-size: clamp(34px, 7vw, 62px); }

/* Teknik servis: telefon numarası doğrudan kahraman alanda büyük yazılır */
.v-callout {
	display: inline-flex; align-items: center; gap: 14px;
	margin-top: 18px;
	padding: 15px 22px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .1);
	border: 1px dashed rgba(255, 255, 255, .35);
	text-decoration: none;
}
.v-callout span { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); display: block; }
.v-callout b { font-size: clamp(20px, 4vw, 27px); font-weight: 850; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Sağlık: daha sakin, daha az kontrast */
[data-vitrin="saglik"] .v-hero::before { opacity: .35; }
[data-vitrin="saglik"] .v-hero h1 { font-weight: 750; letter-spacing: -.035em; }

/*
 * ------------------------------------------------------- HERO VARYANTLARI
 *
 * templates/single-business.php artık `hero` bayrağına göre blokları
 * FARKLI SIRADA basıyor (v-hero-<tip> sınıfı gövdeye yazılır). Buradaki
 * kurallar o yeniden sıralamanın görsel karşılığıdır — yalnızca renk değil,
 * yerleşimin kendisi sektöre göre değişir.
 */

/* acil (teknik): telefon en üstte, ilk bakışta görülsün. */
.v-hero-acil .v-callout {
	margin: 0 0 18px;
	padding: 17px 24px;
	background: rgba(255, 255, 255, .14);
	border-style: solid;
}
.v-hero-acil .v-callout span::before {
	content: "";
	display: inline-block;
	width: 8px; height: 8px; margin-right: 6px;
	border-radius: 50%;
	background: #22e59a;
	vertical-align: middle;
}
.v-hero-acil .v-badges { margin-bottom: 14px; }

/* zarif (güzellik): puan/sosyal kanıt önce, isim ikinci sırada — daha
   editoryal, daha az "satış afişi" hissi. */
.v-hero-zarif .v-rating {
	margin: 0 0 16px;
	padding: 10px 18px;
	font-size: 15px;
}
.v-hero-zarif h1 { font-weight: 750; letter-spacing: -.03em; }
.v-hero-zarif .v-hero-lead { font-style: normal; opacity: .92; }

/* lezzet (yemek): menüden üç kalemlik hızlı önizleme. */
.v-menu-teaser {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
	margin-top: 18px;
	padding: 14px 18px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
}
.v-menu-teaser span {
	color: rgba(255, 255, 255, .92);
	font-size: 14px; font-weight: 650;
	display: inline-flex; align-items: baseline; gap: 7px;
}
.v-menu-teaser span b { color: var(--v-accent-2); font-weight: 800; font-size: 13px; }
.v-menu-teaser a { margin-left: auto; color: #fff; font-size: 13.5px; font-weight: 750; text-decoration: none; opacity: .85; }
.v-menu-teaser a:hover { opacity: 1; }

/* guc / enerji (oto, spor): sayı şeridi eylemden önce, daha vurgulu. */
.v-hero-guc .v-facts, .v-hero-enerji .v-facts { margin: 22px 0 20px; }
.v-hero-guc .v-fact b, .v-hero-enerji .v-fact b { font-size: 17px; }

/* sakin (sağlık): daha az öge, daha çok boşluk — telaşsız izlenim. */
[data-vitrin="saglik"] .v-hero { padding-bottom: 40px; }
.v-hero-sakin .v-badges { margin-bottom: 16px; }
.v-hero-sakin .v-actions { margin-top: 4px; }
.v-hero-sakin .v-actions .v-btn-glass:not(:first-child) { display: none; }

/* ============================================================= BÖLÜMLER */

.v-main { background: var(--n-050); padding: 0 0 90px; }

.v-section {
	margin-top: 22px;
	padding: 30px;
	background: #fff;
	border: 1px solid var(--n-200);
	border-radius: var(--v-radius);
	box-shadow: var(--v-shadow);
	/* Ekran dışı bölümlerin çizimi ertelenir: ilk boya hızlanır. */
	content-visibility: auto;
	contain-intrinsic-size: auto 500px;
}
.v-section:first-child { margin-top: -34px; position: relative; z-index: 5; }
@media (max-width: 640px) { .v-section { padding: 22px 18px; margin-top: 16px; border-radius: 17px; } }

.v-head { margin-bottom: 24px; }
.v-head h2 { margin: 0; font-size: clamp(22px, 3.6vw, 31px); }
.v-head p { margin: 8px 0 0; color: var(--n-500); font-size: 15.5px; max-width: 60ch; }

/* --- Hizmet / menü listesi --- */
.v-menu { display: grid; gap: 12px; }
.v-menu-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 4px 16px;
	align-items: baseline;
	padding: 16px 18px;
	border: 1px solid var(--n-200);
	border-radius: var(--v-radius-sm);
	background: #fff;
	transition: border-color .18s, box-shadow .18s, transform .18s;
}
.v-menu-item:hover { border-color: var(--v-accent); box-shadow: var(--v-shadow); transform: translateY(-2px); }
.v-menu-no {
	grid-row: span 2;
	align-self: center;
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border-radius: 12px;
	background: var(--v-soft);
	color: color-mix(in srgb, var(--v-accent) 78%, #000);
	font-size: 13.5px; font-weight: 900;
	font-variant-numeric: tabular-nums;
}
.v-menu-item h3 { margin: 0; font-size: 17.5px; letter-spacing: -.025em; }
.v-menu-item p { margin: 2px 0 0; grid-column: 2; font-size: 14.5px; color: var(--n-500); }
.v-menu-price {
	grid-row: span 2;
	align-self: center;
	text-align: right;
	font-size: 19px; font-weight: 850;
	color: var(--n-900);
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.v-menu-price small { display: block; font-size: 12px; font-weight: 650; color: var(--n-500); letter-spacing: 0; }
.v-menu-dur { font-size: 12.5px; font-weight: 700; color: var(--n-500); }
@media (max-width: 560px) {
	.v-menu-item { grid-template-columns: auto 1fr; }
	.v-menu-price { grid-row: auto; grid-column: 2; text-align: left; margin-top: 6px; }
}

/* Yeme-içme menüsü: kart yerine klasik menü satırı (noktalı dizgi) */
[data-vitrin="yemek"] .v-menu-item {
	border: 0;
	border-bottom: 1px dashed var(--n-300);
	border-radius: 0;
	padding: 14px 4px;
	box-shadow: none;
}
[data-vitrin="yemek"] .v-menu-item:hover { transform: none; background: var(--v-soft); }

/* --- Ürün kartları --- */
.v-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
.v-card {
	display: flex; flex-direction: column;
	border: 1px solid var(--n-200);
	border-radius: var(--v-radius-sm);
	overflow: hidden;
	background: #fff;
	transition: transform .18s, box-shadow .18s, border-color .18s;
}
.v-card:hover { transform: translateY(-3px); box-shadow: var(--v-shadow); border-color: var(--v-accent); }
/*
 * Oran kilidi: yalnızca `aspect-ratio`'ya güvenmiyoruz. Bu özelliği
 * desteklemeyen tarayıcılarda (eski Safari/WebView) kutu yükseklik
 * bulamayıp yüklenen fotoğrafın kendi oranına göre esniyor, kart
 * bozuluyordu. `padding-top` yüzdesi HER tarayıcıda çalışan bir yedek —
 * `position:absolute` içerik bu yüzdenin oluşturduğu kutuyu doldurur.
 */
.v-card-media { position: relative; height: 0; padding-top: 75%; aspect-ratio: 4 / 3; background: var(--n-100); overflow: hidden; }
.v-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-card-body { padding: 15px 16px 17px; display: flex; flex-direction: column; flex: 1; }
.v-card-body h3 { margin: 0 0 5px; font-size: 16.5px; }
.v-card-body p { margin: 0 0 12px; font-size: 14px; color: var(--n-500); }
.v-card-price { margin-top: auto; font-size: 18px; font-weight: 850; color: var(--n-900); letter-spacing: -.03em; }

/* --- Ekip --- */
.v-team { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.v-person { min-width: 0; text-align: center; }
.v-person-photo {
	position: relative;
	height: 0;
	padding-top: 100%;
	aspect-ratio: 1;
	border-radius: 18px;
	overflow: hidden;
	background: var(--n-100);
	margin-bottom: 12px;
	border: 3px solid var(--v-soft);
}
.v-person-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-person-photo > div {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	background: linear-gradient(150deg, var(--v-ink), var(--v-ink-2));
	color: #fff; font-size: 32px; font-weight: 900;
}
.v-person b { display: block; font-size: 16px; font-weight: 750; color: var(--n-900); letter-spacing: -.02em; }
.v-person span { display: block; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--v-accent); margin-bottom: 3px; }
.v-person p { margin: 4px 0 0; font-size: 13.5px; color: var(--n-500); }
/* Berberde ekip yuvarlak: klasik dükkân hissi */
[data-vitrin="berber"] .v-person-photo,
[data-vitrin="guzellik"] .v-person-photo { border-radius: 50%; }

/* --- Galeri --- */
.v-gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-rows: 160px; }
.v-gallery a { display: block; min-width: 0; border-radius: 15px; overflow: hidden; background: var(--n-100); }
.v-gallery a:first-child { grid-column: span 2; grid-row: span 2; }
.v-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.v-gallery a:hover img { transform: scale(1.05); }
@media (max-width: 560px) {
	.v-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
	.v-gallery a:first-child { grid-row: span 1; }
}

/* --- Hikâyeler --- */
.v-stories { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.v-story { flex: 0 0 148px; scroll-snap-align: start; text-align: center; }
.v-story img { width: 148px; height: 196px; object-fit: cover; border-radius: 16px; border: 3px solid var(--v-accent); }
.v-story span { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--n-900); }

/* --- Kampanya --- */
.v-promos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.v-promo {
	padding: 22px;
	border-radius: var(--v-radius-sm);
	background: var(--v-soft);
	border: 1.5px dashed color-mix(in srgb, var(--v-accent) 55%, #fff);
}
.v-promo b {
	display: inline-block;
	font-size: 11px; font-weight: 900; letter-spacing: .14em;
	color: var(--v-on-accent);
	background: var(--v-accent);
	padding: 4px 10px; border-radius: 6px; margin-bottom: 10px;
}
.v-promo h3 { margin: 0 0 6px; font-size: 19px; }
.v-promo p { margin: 0 0 8px; font-size: 14.5px; color: var(--n-600); }
.v-promo small { font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--v-accent) 75%, #000); }

/* --- Saatler --- */
.v-hours { display: grid; gap: 3px; }
.v-hours > div {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 12px 15px;
	border-radius: 11px;
	font-size: 15px;
}
.v-hours > div:nth-child(odd) { background: var(--n-050); }
.v-hours > div.is-today { background: var(--v-soft); font-weight: 750; color: var(--n-900); }
.v-hours em {
	font-style: normal;
	font-size: 10.5px; font-weight: 900; letter-spacing: .09em;
	background: var(--v-accent); color: var(--v-on-accent);
	padding: 2px 7px; border-radius: 5px; margin-left: 8px;
}
.v-hours strong { font-variant-numeric: tabular-nums; color: var(--n-900); }
.v-hours .is-off strong { color: var(--n-400); font-weight: 600; }

/* --- Hakkımızda --- */
.v-about { font-size: 16.5px; line-height: 1.7; color: var(--n-600); max-width: 70ch; }
.v-about p { margin: 0 0 1em; }

/* --- Konum --- */
.v-place { display: grid; gap: 22px; grid-template-columns: 1fr 1.15fr; align-items: start; }
@media (max-width: 860px) { .v-place { grid-template-columns: 1fr; } }
.v-address { font-size: 16px; color: var(--n-600); margin: 0 0 18px; }
.v-links { display: grid; gap: 9px; margin-bottom: 18px; }
.v-links a {
	display: flex; align-items: center; gap: 13px;
	padding: 14px 16px;
	border: 1px solid var(--n-200);
	border-radius: 13px;
	text-decoration: none;
	transition: border-color .16s, background .16s;
}
.v-links a:hover { border-color: var(--v-accent); background: var(--v-soft); }
.v-links i { font-style: normal; font-size: 19px; }
.v-links div { display: grid; }
.v-links small { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--n-500); }
.v-links b { font-size: 15.5px; font-weight: 700; color: var(--n-900); }

.v-map {
	min-height: 320px;
	border-radius: var(--v-radius-sm);
	border: 1px solid var(--n-200);
	overflow: hidden;
	display: grid; place-items: center;
	cursor: pointer;
	background: repeating-linear-gradient(45deg, var(--n-100) 0 14px, var(--n-050) 14px 28px);
	text-align: center;
	padding: 24px;
}
.v-map i { font-style: normal; font-size: 34px; color: var(--v-accent); }
.v-map b { display: block; margin: 8px 0 4px; font-size: 16.5px; color: var(--n-900); }
.v-map small { font-size: 13px; color: var(--n-500); }
.v-map iframe { width: 100%; min-height: 340px; border: 0; }

/* --- Form (randevu / teklif) --- */
.v-form-wrap { display: grid; gap: 26px; grid-template-columns: .8fr 1.2fr; align-items: start; }
@media (max-width: 900px) { .v-form-wrap { grid-template-columns: 1fr; gap: 18px; } }

.el-core-request-form { display: grid; gap: 14px; }
.el-core-field-grid { display: grid; gap: 13px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .el-core-field-grid { grid-template-columns: 1fr; } }
.el-core-field-grid .el-core-wide { grid-column: 1 / -1; }
.el-core-request-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 750; color: var(--n-700); }
.el-core-request-form label > span { color: #d0342c; }
.el-core-request-form input,
.el-core-request-form select,
.el-core-request-form textarea {
	width: 100%;
	font: inherit;
	/* 16 px: iOS Safari odaklanınca sayfayı yakınlaştırmasın. */
	font-size: 16px;
	color: var(--n-900);
	padding: 13px 15px;
	min-height: 52px;
	border: 1.5px solid var(--n-200);
	border-radius: 13px;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.el-core-request-form textarea { min-height: 100px; resize: vertical; }
.el-core-request-form input:focus,
.el-core-request-form select:focus,
.el-core-request-form textarea:focus {
	outline: none;
	border-color: var(--v-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--v-accent) 20%, transparent);
}
.el-core-consent {
	display: flex !important;
	gap: 11px; align-items: flex-start;
	font-size: 13px; font-weight: 500 !important; line-height: 1.5;
	color: var(--n-600);
	background: var(--n-050);
	border: 1px solid var(--n-200);
	border-radius: 13px;
	padding: 14px 15px;
}
.el-core-consent input { width: 20px; height: 20px; min-height: 0; flex: 0 0 auto; margin-top: 1px; accent-color: var(--v-accent); }
.el-core-consent span { color: inherit !important; }
.el-core-request-form .elp-button,
.el-core-request-form button[type=submit] {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 54px; padding: 15px 26px;
	border: 0; border-radius: 14px;
	font: inherit; font-size: 16.5px; font-weight: 750;
	color: var(--v-on-accent);
	background: linear-gradient(135deg, var(--v-accent-2), var(--v-accent));
	box-shadow: 0 14px 32px -15px var(--v-glow);
	cursor: pointer;
}
.el-core-form-note { margin: 0; font-size: 12.5px; color: var(--n-500); }
.el-core-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.el-core-success {
	padding: 24px;
	border-radius: var(--v-radius-sm);
	background: var(--v-soft);
	border: 1.5px solid color-mix(in srgb, var(--v-accent) 45%, #fff);
}
.el-core-success strong { font-size: 19px; color: var(--n-900); }
.el-core-success p { margin: 8px 0 0; font-size: 14.5px; color: var(--n-600); }
.el-core-success code { background: #fff; padding: 3px 10px; border-radius: 7px; font-weight: 800; letter-spacing: .06em; }

/* --- Yorumlar --- */
.v-reviews { display: grid; gap: 12px; }
.el-review, .v-review {
	padding: 18px 20px;
	border: 1px solid var(--n-200);
	border-radius: var(--v-radius-sm);
	background: #fff;
}
.el-review-stars, .v-stars { color: #f5a524; letter-spacing: .1em; font-size: 15px; }
.el-review-author { font-weight: 750; color: var(--n-900); }
.el-review-reply, .v-review-reply {
	margin-top: 12px; padding: 13px 15px;
	background: var(--v-soft);
	border-radius: 12px;
	font-size: 14px;
	color: var(--n-700);
}
.v-score {
	display: flex; align-items: center; gap: 16px;
	padding: 20px 22px;
	border-radius: var(--v-radius-sm);
	background: var(--v-soft);
	margin-bottom: 14px;
}
.v-score b { font-size: 42px; font-weight: 900; color: var(--n-900); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }

/* ============================================================== ALT BİLGİ */

.v-foot {
	background: var(--v-ink);
	color: rgba(255, 255, 255, .7);
	padding: 46px 0 26px;
	font-size: 14.5px;
}
.v-foot-grid { display: grid; gap: 26px; grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 760px) { .v-foot-grid { grid-template-columns: 1fr; } }
.v-foot h3 { color: #fff; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; }
.v-foot strong { display: block; color: #fff; font-size: 19px; letter-spacing: -.02em; margin-bottom: 8px; }
/*
 * Alt bilgi bağlantıları da parmakla tıklanır: 320 px ölçümünde 31 px
 * yüksekliğe düşüyorlardı. 44 px, dokunma hedefi için kabul gören alt sınır.
 */
.v-foot a {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 2px 0;
}
.v-foot a:hover { color: var(--v-accent); }
.v-foot-bottom {
	margin-top: 32px; padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .5);
}
/* EsnafLink künyesi: küçük, dikkat çalmayan tek iz. */
.v-credit { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.v-credit i {
	font-style: normal;
	display: grid; place-items: center;
	width: 20px; height: 20px; border-radius: 6px;
	background: var(--v-accent); color: var(--v-on-accent);
	font-size: 12px; font-weight: 900;
}

/* ======================================================= MOBİL EYLEM ÇUBUĞU */

.v-dock { display: none; }
@media (max-width: 900px) {
	.v-dock {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
		display: flex; gap: 6px;
		padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .97);
		border-top: 1px solid var(--n-200);
		box-shadow: 0 -10px 30px -22px rgba(11, 16, 32, .8);
	}
	.v-dock a {
		flex: 1;
		display: grid; justify-items: center; align-content: center; gap: 3px;
		min-height: 54px;
		border-radius: 13px;
		text-decoration: none;
		color: var(--n-600);
		font-size: 18px; line-height: 1;
		background: var(--n-100);
	}
	.v-dock a span { font-size: 10.5px; font-weight: 800; }
	.v-dock a.is-main {
		flex: 1.5;
		color: var(--v-on-accent);
		background: linear-gradient(135deg, var(--v-accent-2), var(--v-accent));
	}
	.v-main { padding-bottom: 92px; }
	.v-topbar { display: none; }
}

/*
 * "Elimizden Çıkanlar" galeri kısayolu — alt eylem çubuğunda hep altın
 * renkte, hafifçe nabız gibi atar. Amaç: ziyaretçinin gözü oraya gitsin
 * VE düşük paketteki işletme sahibi kendi vitrinine baktığında bu vurgulu
 * görünümü görüp paket yükseltmeyi düşünsün.
 */
.v-dock a.is-gallery {
	position: relative;
	color: #6b4e05;
	background: linear-gradient(135deg, #fff3d1, #f3cf6b);
	animation: el-gold-pulse 2.4s ease-in-out infinite;
}
@keyframes el-gold-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(201, 153, 47, .55); }
	50% { box-shadow: 0 0 0 6px rgba(201, 153, 47, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.v-dock a.is-gallery { animation: none; }
}

/* ============================================================== YAZDIRMA */

@media print {
	.v-topbar, .v-dock, .v-form-wrap, .v-map, .v-foot a { display: none !important; }
	.v-hero { background: #fff; color: #000; padding: 16px 0; }
	.v-hero h1, .v-hero-lead { color: #000; }
	.v-section { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; margin-top: 12px; }
	.v-main { background: #fff; padding-bottom: 0; }
}