/**
 * Pazaryeri bileşenleri: menü altı dönen şerit, ürün sayfası butonları
 * ve mağaza tanıtım kartları.
 */

:root {
	--vn-tr:   #F27A1A;   /* Trendyol turuncusu */
	--vn-etsy: #F1641E;   /* Etsy turuncusu */
	--vn-wa:   #25D366;   /* WhatsApp yeşili */
}

/* ============================================================
   1. MENÜ ALTI ŞERİT
   ============================================================ */
.vn-mpbar {
	position: relative;
	background: var(--vn-ink, #292929);
	border-bottom: 1px solid rgba(255,255,255,.08);
	overflow: hidden;
}

.vn-mpbar__track { position: relative; height: 42px; }
@media (min-width: 700px) { .vn-mpbar__track { height: 40px; } }

.vn-mpbar__slide {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	gap: 10px;
	padding: 0 16px;
	text-decoration: none !important;
	opacity: 0; visibility: hidden;
	transform: translateY(100%);
	transition: opacity .45s ease, transform .45s cubic-bezier(.3,.7,.3,1), visibility .45s;
}
.vn-mpbar__slide.is-on { opacity: 1; visibility: visible; transform: none; }
.vn-mpbar__slide.is-out { opacity: 0; transform: translateY(-100%); }

.vn-mpbar__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.vn-mpbar__logo .vn-mp__logo-img { height: 15px; width: auto; display: block; }

.vn-mpbar__text {
	font-family: var(--vn-body, sans-serif);
	font-size: 13px;
	color: rgba(255,255,255,.86);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 560px) { .vn-mpbar__text { font-size: 12px; } }

.vn-mpbar__cta {
	display: inline-flex; align-items: center; gap: 5px;
	flex: 0 0 auto;
	font-family: var(--vn-display, sans-serif);
	font-size: 11.5px; font-weight: 500;
	letter-spacing: .08em; text-transform: uppercase;
	color: #fff;
	padding-bottom: 1px;
	border-bottom: 1px solid rgba(255,255,255,.35);
	transition: border-color .18s ease;
}
.vn-mpbar__slide:hover .vn-mpbar__cta { border-bottom-color: #fff; }
.vn-mpbar__cta svg { width: 13px; height: 13px; }

@media (max-width: 560px) {
	.vn-mpbar__cta { font-size: 10.5px; letter-spacing: .06em; }
	.vn-mpbar__slide { gap: 8px; padding: 0 12px; }
}

/* Şerit içindeki yazı logoları */
.vn-mp__logo-text {
	font-family: var(--vn-display, sans-serif);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1;
	white-space: nowrap;
}
.vn-mp__logo-text--trendyol { color: var(--vn-tr); }
.vn-mp__logo-text--etsy { color: var(--vn-etsy); font-style: italic; letter-spacing: .01em; }

.vn-mpbar .vn-mp__logo-text { font-size: 14px; }

/* ============================================================
   2. ÜRÜN SAYFASI BUTONLARI
   ============================================================ */
.vn-mp { margin: 4px 0 20px; padding-top: 18px; border-top: 1px solid var(--vn-line, #EAEAEA); }

.vn-mp__label {
	font-family: var(--vn-display, sans-serif);
	font-size: 11px; font-weight: 500;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--vn-muted, #7A7A7A);
	margin: 0 0 12px;
}

.vn-mp__row { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .vn-mp__row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }

.vn-mp__btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px;
	min-height: 46px; padding: 11px 14px;
	font-family: var(--vn-display, sans-serif);
	font-size: 12.5px; font-weight: 500;
	letter-spacing: .04em;
	text-decoration: none !important;
	color: var(--vn-ink, #292929) !important;
	background: #fff;
	border: 1px solid var(--vn-line, #EAEAEA);
	border-radius: 6px;
	transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.vn-mp__btn:hover { transform: translateY(-1px); }

.vn-mp__btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.vn-mp__btn .vn-mp__logo-img { height: 14px; width: auto; }
.vn-mp__btn .vn-mp__logo-text { font-size: 13px; }

.vn-mp__btn--wa svg { fill: var(--vn-wa); }
.vn-mp__btn--wa:hover { border-color: var(--vn-wa); background: rgba(37,211,102,.06); }
.vn-mp__btn--tr:hover { border-color: var(--vn-tr); background: rgba(242,122,26,.06); }
.vn-mp__btn--etsy:hover { border-color: var(--vn-etsy); background: rgba(241,100,30,.06); }

/* ============================================================
   3. MAĞAZA KARTLARI
   ============================================================ */
.vn-mpc { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .vn-mpc { grid-template-columns: repeat(2, 1fr); } }

.vn-mpc__card {
	position: relative;
	display: flex; flex-direction: column;
	gap: 8px;
	padding: 30px 28px 26px;
	text-decoration: none !important;
	background: #fff;
	border: 1px solid var(--vn-line, #EAEAEA);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color .22s ease, box-shadow .25s ease, transform .25s ease;
}
.vn-mpc__card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(41,41,41,.08); }

/* marka rengi ince bir şerit olarak üstte */
.vn-mpc__card::before {
	content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px;
}
.vn-mpc__card--tr::before   { background: var(--vn-tr); }
.vn-mpc__card--etsy::before { background: var(--vn-etsy); }
.vn-mpc__card--tr:hover   { border-color: rgba(242,122,26,.45); }
.vn-mpc__card--etsy:hover { border-color: rgba(241,100,30,.45); }

.vn-mpc__logo { display: inline-flex; align-items: center; height: 26px; margin-bottom: 6px; }
.vn-mpc__logo .vn-mp__logo-img { height: 22px; width: auto; }
.vn-mpc__logo .vn-mp__logo-text { font-size: 22px; }

.vn-mpc__title {
	font-family: var(--vn-display, sans-serif);
	font-size: 17px; font-weight: 500;
	color: var(--vn-ink, #292929);
}
.vn-mpc__text {
	font-family: var(--vn-body, sans-serif);
	font-size: 14px; line-height: 1.6;
	color: var(--vn-muted, #7A7A7A);
	margin-bottom: 6px;
}

.vn-mpc__cta {
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: auto;
	font-family: var(--vn-display, sans-serif);
	font-size: 12px; font-weight: 500;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--vn-ink, #292929);
}
.vn-mpc__cta svg { width: 14px; height: 14px; transition: transform .2s ease; }
.vn-mpc__card:hover .vn-mpc__cta svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.vn-mpbar__slide, .vn-mpc__card, .vn-mp__btn { transition: none !important; }
}