/* =========================================================================
   Futurecode vitrin — ortak katman (ana sayfa + bağımsız ürün sayfaları).
   Sayfaya özel görünüm: ana.css, koro.css, loggerise.css.
   ========================================================================= */
body.fv {
	--murekkep: #0E1513;
	--gri: #4F5A55;
	--cizgi: #E1E4E1;
	--lime: #B4D457;
	margin: 0;
	background: #fff;
	color: var(--murekkep);
	font: 400 17px/1.6 var(--govde, 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body.fv * { box-sizing: border-box; }
:where(body.fv) img { max-width: 100%; height: auto; display: block; }
:where(body.fv) a { color: inherit; text-decoration: none; }
:where(body.fv) :is(h1, h2, h3, h4) { color: inherit; margin: 0; font-family: var(--display, inherit); text-wrap: balance; }
:where(body.fv) p { margin: 0; }
:where(body.fv) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
body.fv :focus-visible { outline: 3px solid var(--odak, #0E1513); outline-offset: 3px; border-radius: 4px; }

.fv-ic { width: 100%; max-width: 1240px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.fv-sr, .fv-gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fv-atla { position: absolute; left: -999px; top: 8px; z-index: 200; background: #0E1513; color: #fff; padding: 8px 16px; border-radius: 6px; font-weight: 600; }
.fv-atla:focus { left: 12px; }

/* kaydırınca beliren öğeler (yalnız ürün sayfalarında kullanılır) */
.fv-js [data-fv-rev] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--gecikme, 0) * 1ms); }
.fv-js [data-fv-rev].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.fv-js [data-fv-rev] { opacity: 1; transform: none; transition: none; }
	body.fv *, body.fv *::before, body.fv *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* logo */
.fv-logo { width: 150px; height: auto; color: var(--murekkep); display: block; }

/* menü (üst çubuklar sayfaya özel; menü davranışı ortak) */
.fv-menu { display: flex; gap: 4px; }
.fv-menu a { padding: .5em .9em; border-radius: 8px; font-weight: 500; font-size: .95rem; transition: background .2s, color .2s; }
.fv-ust-sag { display: flex; align-items: center; gap: 14px; }
.fv-dil { display: flex; gap: 2px; font-size: .82rem; font-weight: 600; }
.fv-dil a { padding: .35em .6em; border-radius: 6px; opacity: .65; }
.fv-dil a[aria-current] { opacity: 1; background: rgba(14, 21, 19, .08); }
.fv-hamburger { display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--cizgi); background: #fff; position: relative; cursor: pointer; }
.fv-hamburger span:not(.fv-sr) { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--murekkep); transition: transform .3s; }
.fv-hamburger span:nth-child(1) { top: 17px; } .fv-hamburger span:nth-child(2) { top: 25px; }
.is-acik .fv-hamburger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.is-acik .fv-hamburger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 960px) {
	.fv-menu { position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); flex-direction: column; background: #fff; border-radius: 14px; box-shadow: 0 20px 40px -16px rgba(14, 21, 19, .3), 0 0 0 1px var(--cizgi); padding: 8px; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: .25s; }
	.is-acik .fv-menu { opacity: 1; pointer-events: auto; transform: none; }
	.fv-menu a { padding: .9em 1em; font-size: 1.05rem; color: #0E1513; }
	.fv-hamburger { display: block; }
}

/* ortak düğme (köprü bandı) */
.fv-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .9em 1.4em; border-radius: 10px; font-weight: 600; font-size: .96rem; line-height: 1; border: 1.5px solid transparent; cursor: pointer; transition: background .2s, transform .2s; white-space: nowrap; }
.fv-btn-siyah { background: #0E1513; color: #fff; }
.fv-btn-siyah:hover { background: #26302C; }

/* akordeon (SSS) */
.fv-akordeon { display: flex; flex-direction: column; gap: 10px; }
.fv-akordeon details { background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--cizgi); overflow: hidden; }
.fv-akordeon summary { list-style: none; cursor: pointer; padding: 20px 22px; font-weight: 600; font-size: 1.04rem; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.fv-akordeon summary::-webkit-details-marker { display: none; }
.fv-akordeon summary span { width: 28px; height: 28px; flex: none; border-radius: 50%; background: rgba(14, 21, 19, .06); position: relative; transition: background .3s; }
.fv-akordeon summary span::before, .fv-akordeon summary span::after { content: ''; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: currentColor; }
.fv-akordeon summary span::after { transform: rotate(90deg); transition: transform .3s; }
.fv-akordeon details[open] summary span::after { transform: rotate(0); }
.fv-akordeon details > p { padding: 0 22px 22px; opacity: .78; }

/* ---------- ürün sayfaları: Futurecode şeridi + köprü bandı ---------- */
.fv-serit { background: #141614; color: #D7DAD0; font: 500 .8rem/1 'Schibsted Grotesk', system-ui, sans-serif; position: relative; z-index: 70; }
.fv-serit-ic { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.fv-serit-marka { display: flex; align-items: center; gap: 6px; }
.fv-logo-kucuk { width: 82px; color: #fff; }
.fv-serit-tum:hover, .fv-serit-marka:hover { color: #fff; }
.fv-kopru { background: #F2F3F1; color: #0E1513; padding-block: 36px 22px; font-family: 'Schibsted Grotesk', system-ui, sans-serif; font-size: 16px; }
.fv-kopru-ic { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 28px; align-items: center; }
.fv-kopru-ic > * + * { border-left: 1px solid #DADDDA; padding-left: 28px; }
.fv-kopru-logo .fv-logo { width: 150px; color: #0E1513; }
.fv-kopru-sol p { margin-top: 6px; color: #4F5A55; font-size: .92rem; }
.fv-kopru-orta { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-weight: 600; }
.fv-kopru-sag { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .92rem; justify-content: flex-end; }
.fv-kopru-sag span { flex-basis: 100%; text-align: right; color: #4F5A55; font-size: .8rem; }
.fv-kopru-sag a:hover { text-decoration: underline; }
.fv-kopru-alt { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding-top: 16px; border-top: 1px solid #DADDDA; font-size: .8rem; color: #4F5A55; }
.fv-kopru-alt span { display: flex; gap: 16px; }
.fv-kopru-alt button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.fv-kopru-alt button:hover { color: #0E1513; }
@media (max-width: 860px) {
	.fv-kopru-ic { grid-template-columns: 1fr; text-align: center; }
	.fv-kopru-ic > * + * { border-left: 0; padding-left: 0; border-top: 1px solid #DADDDA; padding-top: 20px; }
	.fv-kopru-logo .fv-logo { margin-inline: auto; }
	.fv-kopru-sag { justify-content: center; } .fv-kopru-sag span { text-align: center; }
}

/* ---------- çerez bandı (eski tema stili vitrinde yüklenmez) ---------- */
body.fv .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.fv .cerez-banner { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; width: min(400px, calc(100vw - 32px)); background: #fff; color: #0E1513; border-radius: 16px; padding: 22px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .06); font-family: 'Schibsted Grotesk', system-ui, sans-serif; }
body.fv .cerez-banner[hidden], body.fv .cerez-modal[hidden] { display: none; }
body.fv .cerez-baslik { font-size: 1.02rem; font-weight: 700; margin: 0 0 6px; }
body.fv .cerez-metin { font-size: .9rem; color: #4F5A55; line-height: 1.5; margin: 0 0 14px; }
body.fv .cerez-eylemler { display: flex; flex-direction: column; gap: 8px; }
body.fv .btn-solid, body.fv .btn-pill { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .8em 1.2em; border-radius: 10px; font: 600 .9rem/1 'Schibsted Grotesk', system-ui, sans-serif; cursor: pointer; border: 1.5px solid #0E1513; }
body.fv .btn-solid { background: #0E1513; color: #fff; }
body.fv .btn-pill { background: #fff; color: #0E1513; border-color: #DADDDA; }
body.fv .btn-pill:hover { border-color: #0E1513; }
body.fv .w-full { width: 100%; }
body.fv .cerez-link { background: none; border: 0; color: #4F5A55; font: 500 .82rem 'Schibsted Grotesk', system-ui, sans-serif; text-decoration: underline; cursor: pointer; padding: 6px; }
body.fv .cerez-modal { position: fixed; inset: 0; z-index: 95; background: rgba(14, 21, 19, .55); display: grid; place-items: center; padding: 16px; }
body.fv .cerez-modal-kart { background: #fff; color: #0E1513; border-radius: 18px; padding: 26px; width: min(560px, 100%); max-height: 90vh; overflow: auto; font-family: 'Schibsted Grotesk', system-ui, sans-serif; }
body.fv .cerez-modal-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
body.fv .cerez-kapat { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #DADDDA; background: #fff; cursor: pointer; display: grid; place-items: center; color: #0E1513; }
body.fv .cerez-kategori { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid #ECEEEC; }
body.fv .cerez-kategori-ad { font-weight: 600; font-size: .95rem; }
body.fv .cerez-kategori-metin { font-size: .84rem; color: #4F5A55; margin: 4px 0 0; }
body.fv .cerez-rozet { font-size: .75rem; font-weight: 600; background: #EEF1EE; padding: .4em .8em; border-radius: 99px; white-space: nowrap; }
body.fv .cerez-anahtar { position: relative; cursor: pointer; flex: none; }
body.fv .cerez-anahtar input { position: absolute; opacity: 0; }
body.fv .cerez-anahtar-yuva { display: block; width: 46px; height: 26px; border-radius: 99px; background: #D5D9D6; position: relative; transition: background .2s; }
body.fv .cerez-anahtar-top { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
body.fv .cerez-anahtar input:checked + .cerez-anahtar-yuva { background: #0E1513; }
body.fv .cerez-anahtar input:checked + .cerez-anahtar-yuva .cerez-anahtar-top { transform: translateX(20px); }
body.fv .cerez-anahtar input:focus-visible + .cerez-anahtar-yuva { outline: 3px solid #0E1513; outline-offset: 2px; }
body.fv .cerez-mini { font-size: .8rem; margin-top: 10px; }
body.fv .cerez-politika { text-decoration: underline; }
body.fv .cerez-modal-alt { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.fv-kopru-alt span { flex-wrap: wrap; align-items: center; }
.fv-powered { color: #0E1513; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #B4D457; text-decoration-thickness: 2px; }
.fv-powered:hover { text-decoration-color: currentColor; }

/* Schibsted'in ₺ (U+20BA) çizimi £'ye benziyor: yalnız bu karakter sistem yazı tipinden. */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;src:local('Segoe UI'),local('SegoeUI'),local('Arial'),local('Helvetica Neue'),local('Roboto');unicode-range:U+20BA}

/* Sayfa içi gezinme: yumuşak kaydırma ve ince sekme şeridi (Apple/Zoho ürün sayfaları gibi).
   Ürün logosu sekme şeridinde değil, hero'da başlığın üstünde (.fv-hero-logo). */
@media (prefers-reduced-motion: no-preference) { html:has(body.fv) { scroll-behavior: smooth; } }
body.fv .fv-sekme { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); transition: box-shadow .3s; }
body.fv .fv-sekme-ic { display: flex; align-items: center; min-height: 48px; }
body.fv .fv-sekme-liste { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-inline: -.75em; }
body.fv .fv-sekme-liste::-webkit-scrollbar { display: none; }
body.fv .fv-sekme-liste a { position: relative; flex: none; padding: .7em .75em; font-size: .9rem; font-weight: 500; line-height: 1.2; white-space: nowrap; opacity: .72; transition: opacity .2s; }
body.fv .fv-sekme-liste a:hover, body.fv .fv-sekme-liste a[aria-current] { opacity: 1; }
body.fv .fv-sekme-liste a::after { content: ''; position: absolute; left: .75em; right: .75em; bottom: .25em; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
body.fv .fv-sekme-liste a[aria-current]::after { transform: scaleX(1); }
body.fv-stokwerk .fv-sekme { color: #fff; }
body.fv .fv-sekme.is-kaydi { box-shadow: 0 8px 24px -16px rgba(14, 21, 19, .35); }
body.fv .fv-hero-logo { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; }
body.fv .fv-hero-logo img { width: auto; max-height: 40px; }
@media (max-width: 600px) { body.fv .fv-hero-logo { margin-bottom: 16px; } body.fv .fv-hero-logo img { max-height: 32px; } }
body.fv .mx-bar { top: env(safe-area-inset-top, 0px); }
body.fv .mx-bar.fv-sekme .mx-bar-in { height: 48px; }
body.fv .mx-bar.fv-sekme nav { display: flex; margin-left: -.5em; }
body.fv .mx-hero-logo { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-weight: 800; font-size: 18px; }
body.fv .mx-hero-logo img { width: 40px; height: 40px; border-radius: 11px; }
:where(body.fv) [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
