/* Vice Mall (/market): modern bir Vice City AVM'si, Leonida tonu. Vice Mall 2 (1. aşama): sitenin lacivert, krem ve altın dili; fiş ve hediye kartı kendi kâğıt ve sahne görünümünü korur. Sahne her modda koyu. */ @font-face { font-family: ViceDisplay; src: url('../fonts/vp-display.woff2') format('woff2'); font-weight: 400; font-display: swap; } body.vice-action-market #header.vc-home-hero, body.vice-action-marketislemi #header.vc-home-hero { display: none !important; } #vsm { --m-bg: #10161e; --m-raised: #141a22; --m-raised2: #1a212b; --m-sunk: #0b1016; --m-glass: rgba(255, 255, 255, .04); --m-line: #303b49; --m-strong: #5c6b80; --m-ink: #f2f4f8; --m-muted: #a3b1c2; --m-faint: #8391a3; --m-pink: #f49ac1; --m-orange: #f2b56b; --m-sun: #e7cb89; --m-on-gold: #14171c; --m-ocean: #6fc3d0; --m-blue: #91ceff; --m-lime: #83c9ac; --m-violet: #b9a2ff; --m-sunset: linear-gradient(100deg, #ff4f9a 0%, #ff7f6b 45%, #ffc861 100%); --m-display: ViceDisplay, "Bebas Neue", Impact, sans-serif; --m-cond: "Barlow Condensed", Barlow, "Arial Narrow", sans-serif; --m-sans: Barlow, "Segoe UI", Arial, sans-serif; --m-mono: "JetBrains Mono", Consolas, monospace; --tone: var(--m-ocean); position: relative; isolation: isolate; margin: 0 0 40px; padding: 0 clamp(16px, 2.6vw, 34px) 30px; overflow: clip; border: 1px solid var(--m-line); border-radius: 6px; color: var(--m-ink); font: 400 15px/1.55 var(--m-sans); text-align: left; background: var(--m-bg); color-scheme: dark; } #vsm *, #vsm *::before, #vsm *::after { box-sizing: border-box; } #main_content_section #vsm h1, #main_content_section #vsm h2, #main_content_section #vsm h3 { margin: 0; padding: 0; border: 0; background: none; color: var(--m-ink); letter-spacing: normal; text-transform: none; } #main_content_section #vsm ul { margin: 0; padding: 0; list-style: none; } #main_content_section #vsm a { text-decoration: none; } #vsm [hidden] { display: none !important; } #vsm .vsm-tone--gold { --tone: var(--m-sun); } #vsm .vsm-tone--ocean { --tone: var(--m-ocean); } #vsm .vsm-tone--sunset { --tone: var(--m-orange); } #vsm .vsm-tone--pink { --tone: var(--m-pink); } #vsm .vsm-tone--lime { --tone: var(--m-lime); } #vsm .vsm-tone--violet { --tone: var(--m-violet); } #vsm .vsm-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--m-faint); font: 600 13px var(--m-cond); letter-spacing: .08em; text-transform: uppercase; } #vsm .vsm-crumb a { color: var(--m-muted); } #vsm .vsm-crumb a:hover { color: var(--m-ink); } #vsm .vsm-crumb i { font-size: 9px; } #vsm .vsm-crumb span { color: var(--m-ink); } /* düğmeler (sitenin genel !important düğme kurallarını ezer) */ #vsm .vsm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 0 18px !important; border: 1px solid transparent !important; border-radius: 3px !important; background-image: none !important; box-shadow: none !important; font: 700 14px var(--m-cond) !important; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: transform .15s ease, filter .15s ease; } #vsm .vsm-btn:hover:not(:disabled) { filter: brightness(1.08); } #vsm .vsm-btn:disabled { opacity: .45; cursor: not-allowed; } #vsm .vsm-btn--sun { background: var(--m-sun) !important; border-color: var(--m-sun) !important; color: var(--m-on-gold) !important; } #vsm .vsm-btn--neon { background: transparent !important; border-color: var(--m-pink) !important; color: var(--m-pink) !important; } #vsm .vsm-btn--glass { background: var(--m-glass) !important; border-color: var(--m-strong) !important; color: var(--m-ink) !important; backdrop-filter: blur(8px); } #vsm .vsm-btn--ghost { background: transparent !important; border-color: var(--m-line) !important; color: var(--m-muted) !important; } #vsm .vsm-btn--block { width: 100%; min-height: 50px; font-size: 16px !important; } #vsm .vsm-btn:focus-visible, #vsm a:focus-visible, #vsm input:focus-visible, #vsm select:focus-visible { outline: 2px solid var(--m-ocean); outline-offset: 2px; } /* giriş (atrium) */ #vsm .vsm-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; margin: 20px 0 26px; padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 48px); min-height: 380px; overflow: hidden; border-radius: 6px; isolation: isolate; } #vsm .vsm-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--vsm-art) center 30% / cover no-repeat; } #vsm .vsm-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 13, 22, .92) 0%, rgba(11, 13, 22, .6) 45%, rgba(11, 13, 22, .1) 100%), linear-gradient(0deg, rgba(11, 13, 22, .7), transparent 50%); } #vsm .vsm-eyebrow { margin: 0; color: var(--m-sun); font: 700 13px var(--m-cond); letter-spacing: .2em; text-transform: uppercase; } #main_content_section #vsm .vsm-hero h1 { display: grid; gap: 10px; margin-top: 10px; } #vsm .vsm-neon { font: 400 clamp(64px, 9vw, 132px)/.85 var(--m-display); letter-spacing: .04em; background: var(--m-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(255, 95, 162, .45)); } #vsm .vsm-hero h1 em { max-width: 560px; color: var(--m-ink); font: 600 clamp(20px, 2.2vw, 28px)/1.25 var(--m-sans); font-style: normal; } #vsm .vsm-lead { margin: 12px 0 0; max-width: 560px; color: var(--m-muted); font-size: 16px; } #vsm .vsm-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } #vsm .vsm-hero__sign { display: grid; justify-items: center; padding: 12px 18px; border: 2px solid rgba(63, 211, 224, .8); border-radius: 4px; color: #c9fbff; font: 400 34px/1 var(--m-display); letter-spacing: .14em; text-shadow: 0 0 14px rgba(63, 211, 224, .9); box-shadow: 0 0 22px rgba(63, 211, 224, .35), inset 0 0 18px rgba(63, 211, 224, .25); transform: rotate(-4deg); } #vsm .vsm-hero__sign small { font: 700 12px var(--m-cond); letter-spacing: .3em; } @media (prefers-reduced-motion: no-preference) { #vsm .vsm-hero__sign { animation: vsm-flicker 6s infinite; } } @keyframes vsm-flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .55; } 95% { opacity: 1; } 96% { opacity: .7; } } /* raflar ve kartlar */ #vsm .vsm-shelf, #vsm .vsm-lounge { margin-bottom: 34px; } #vsm .vsm-shelf__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; } #main_content_section #vsm .vsm-shelf__head h2 { font: 400 36px/1 var(--m-display); letter-spacing: .03em; text-transform: uppercase; } #vsm .vsm-shelf__head p { margin: 0; color: var(--m-faint); font-size: 14px; } #vsm .vsm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } #vsm .vsm-card { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 14px; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); color: var(--m-ink); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } #vsm .vsm-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tone) 60%, transparent); box-shadow: 0 14px 34px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--tone) 25%, transparent); } #vsm .vsm-card__tile, #vsm .vsm-product__tile { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--tone) 55%, #fff 0%), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--tone) 40%, #1b1530), #141022); color: #fff; font-size: 38px; text-shadow: 0 6px 20px rgba(0, 0, 0, .4); } #vsm .vsm-card__tile img, #vsm .vsm-product__tile img { width: 60%; height: 70%; object-fit: contain; } #vsm .vsm-card__body { display: grid; gap: 4px; align-content: start; } #vsm .vsm-card__body strong { font: 700 17px/1.25 var(--m-sans); } #vsm .vsm-card__body small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--m-muted); font-size: 13.5px; line-height: 1.45; } #vsm .vsm-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } #vsm .vsm-card__foot b { margin-right: auto; font: 400 26px/1 var(--m-display); letter-spacing: .02em; color: var(--tone); } #vsm .vsm-card__foot b em { color: var(--m-faint); font: 700 13px var(--m-cond); font-style: normal; } #vsm .vsm-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border: 1px solid var(--m-line); border-radius: 3px; color: var(--m-muted); font: 600 12px var(--m-cond); letter-spacing: .04em; } #vsm .vsm-chip--hot { border-color: rgba(255, 95, 162, .6); color: #ffc3dc; } #vsm .vsm-chip--ok { border-color: rgba(155, 229, 138, .5); color: #d5f7cc; } /* ürün sayfası + kasa */ #vsm .vsm-product { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; margin: 22px 0 34px; } #vsm .vsm-product__hero { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: center; } #vsm .vsm-product__tile { aspect-ratio: 1; font-size: 72px; border-radius: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--tone) 40%, transparent); } #main_content_section #vsm .vsm-product h1 { margin: 6px 0 10px; font: 400 clamp(40px, 4.6vw, 64px)/.95 var(--m-display); letter-spacing: .02em; text-transform: uppercase; } #vsm .vsm-product__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } #vsm .vsm-product__lead { margin: 22px 0 0; color: var(--m-ink); font-size: 17px; } #vsm .vsm-product__lines { display: grid; gap: 10px; margin-top: 16px !important; padding: 18px !important; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-glass); } #vsm .vsm-product__lines li { display: flex; gap: 10px; color: var(--m-muted); } #vsm .vsm-product__lines i { margin-top: 5px; color: var(--tone); font-size: 12px; } #vsm .vsm-checkout { position: sticky; top: 90px; } #vsm .vsm-receipt { position: relative; display: grid; gap: 10px; padding: 20px; border-radius: 6px; background: #f7f2e8; color: #1e1a26; box-shadow: 0 22px 48px rgba(0, 0, 0, .45); } #vsm .vsm-receipt::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 9px; background: radial-gradient(circle at 6px 0, transparent 6px, #f7f2e8 6.5px) 0 0 / 12px 9px repeat-x; } #vsm .vsm-receipt__head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 2px dashed rgba(30, 26, 38, .2); } #vsm .vsm-receipt__head span { font: 400 26px var(--m-display); letter-spacing: .08em; background: var(--m-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; } #vsm .vsm-receipt__head small { color: #6c6578; font: 500 12px var(--m-mono); } #vsm .vsm-receipt__row { display: flex; justify-content: space-between; gap: 12px; margin: 0; font: 500 14px var(--m-mono); } #vsm .vsm-receipt__row b { font-weight: 700; } #vsm .vsm-receipt__row--soft { color: #6c6578; } #vsm .vsm-receipt__row--total { padding-top: 8px; border-top: 1px solid rgba(30, 26, 38, .15); font-size: 15px; } #vsm .vsm-receipt__row .is-bad { color: #c2185b; } #vsm .vsm-receipt__tear { height: 1px; margin: 4px -20px; border-top: 2px dashed rgba(30, 26, 38, .2); } #vsm .vsm-note { display: flex; gap: 9px; margin: 0; padding: 10px 12px; border-radius: 4px; font-size: 13.5px; line-height: 1.45; } #vsm .vsm-note i { margin-top: 3px; } #vsm .vsm-note--info { background: rgba(63, 211, 224, .14); color: #0c4f57; } #vsm .vsm-note--warn { background: rgba(255, 158, 94, .2); color: #7a3a10; } #vsm .vsm-note--err { background: rgba(255, 95, 162, .16); color: #8a1846; } #vsm .vsm-buy { display: grid; gap: 12px; } #vsm .vsm-who { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; } #vsm .vsm-who legend { margin-bottom: 6px; padding: 0; color: #6c6578; font: 700 12px var(--m-cond); letter-spacing: .14em; text-transform: uppercase; } #vsm .vsm-who__opt { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1.5px solid rgba(30, 26, 38, .15); border-radius: 4px; color: #1e1a26; font: 700 14px var(--m-cond); letter-spacing: .04em; cursor: pointer; } #vsm .vsm-who__opt input { position: absolute; opacity: 0; } #vsm .vsm-who__opt.is-on { border-color: #ff5fa2; background: rgba(255, 95, 162, .1); } #vsm .vsm-who__opt.is-soon { opacity: .55; cursor: not-allowed; } #vsm .vsm-who__opt em { color: #ff5fa2; font: 700 10px var(--m-cond); font-style: normal; letter-spacing: .1em; text-transform: uppercase; } #vsm .vsm-field { display: grid; gap: 5px; } #vsm .vsm-field > span { color: #6c6578; font: 700 12px var(--m-cond); letter-spacing: .12em; text-transform: uppercase; } #vsm .vsm-field em { color: #9a93a8; font-style: normal; letter-spacing: .04em; text-transform: none; } #vsm .vsm-field select, #vsm .vsm-field input { width: 100%; min-height: 42px; padding: 0 12px; border: 1.5px solid rgba(30, 26, 38, .18) !important; border-radius: 4px !important; background: #fff !important; color: #1e1a26 !important; font: 500 14px var(--m-sans) !important; } #vsm .vsm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #vsm .vsm-confirm { display: flex; gap: 10px; align-items: flex-start; color: #3a3446; font-size: 13.5px; cursor: pointer; } #vsm .vsm-confirm input { width: 18px; height: 18px; margin-top: 2px; accent-color: #ff5fa2; flex: none; } /* sonuç fişi (/marketara) */ #vsm .vsm-result { display: grid; place-items: center; padding: 34px 0 10px; } #vsm .vsm-result .vsm-receipt { width: min(460px, 100%); } #vsm .vsm-result__stamp { justify-self: center; margin: 4px 0; padding: 6px 16px; border: 3px double #2e9e58; border-radius: 4px; color: #2e9e58; font: 400 30px/1 var(--m-display); letter-spacing: .08em; transform: rotate(-6deg); } #vsm .vsm-result__stamp--err { border-color: #c2185b; color: #c2185b; } #vsm .vsm-result p.vsm-result__msg { margin: 0; color: #3a3446; font-size: 14px; } #vsm .vsm-result .vsm-btn { margin-top: 4px; } #vsm .vsm-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; padding-top: 18px; border-top: 1px solid var(--m-line); color: var(--m-faint); font-size: 13px; } #vsm .vsm-foot__brand { font: 400 20px var(--m-display); letter-spacing: .08em; background: var(--m-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; } #vsm .vsm-foot a { color: var(--m-muted); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 1100px) { #vsm .vsm-product { grid-template-columns: minmax(0, 1fr) 340px; } #vsm .vsm-product__hero { grid-template-columns: 150px minmax(0, 1fr); } } @media (max-width: 900px) { #vsm .vsm-product { grid-template-columns: minmax(0, 1fr); } #vsm .vsm-checkout { position: static; } #vsm .vsm-hero { grid-template-columns: minmax(0, 1fr); min-height: 320px; } #vsm .vsm-hero__sign { display: none; } } @media (max-width: 560px) { #vsm { padding-inline: 16px; border-radius: 0; } #vsm .vsm-product__hero { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; } #vsm .vsm-product__tile { font-size: 40px; border-radius: 6px; } #vsm .vsm-grid { grid-template-columns: minmax(0, 1fr); } #vsm .vsm-who, #vsm .vsm-row2 { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { #vsm .vsm-card { transition: none; } } /* fiş: sitenin genel metin/form kuralları bu kâğıtta geçersiz */ #vsm .vsm-receipt, #vsm .vsm-receipt p, #vsm .vsm-receipt span, #vsm .vsm-receipt b, #vsm .vsm-receipt strong, #vsm .vsm-receipt legend, #vsm .vsm-receipt label { color: #1e1a26 !important; } #vsm .vsm-receipt .vsm-receipt__row--soft span, #vsm .vsm-receipt .vsm-receipt__head small, #vsm .vsm-receipt .vsm-who legend, #vsm .vsm-receipt .vsm-field > span { color: #6c6578 !important; } #vsm .vsm-receipt .vsm-receipt__row .is-bad { color: #c2185b !important; } #vsm .vsm-receipt .vsm-receipt__head span { color: transparent !important; } #vsm .vsm-receipt .vsm-note--info, #vsm .vsm-receipt .vsm-note--info span { color: #0c4f57 !important; } #vsm .vsm-receipt .vsm-note--warn, #vsm .vsm-receipt .vsm-note--warn span, #vsm .vsm-receipt .vsm-note--warn b { color: #7a3a10 !important; } #vsm .vsm-receipt .vsm-note--err, #vsm .vsm-receipt .vsm-note--err span { color: #8a1846 !important; } #vsm .vsm-receipt .vsm-who__opt { background: #fff !important; } #vsm .vsm-receipt .vsm-who__opt.is-on { background: #ffe9f2 !important; } #vsm .vsm-receipt .vsm-who__opt em { color: #ff3d8b !important; } #vsm .vsm-receipt .vsm-field select, #vsm .vsm-receipt .vsm-field input { background: #fff !important; background-image: none !important; color: #1e1a26 !important; border: 1.5px solid rgba(30, 26, 38, .2) !important; box-shadow: none !important; } #vsm .vsm-receipt .vsm-confirm span { color: #3a3446 !important; } #main_content_section #vsm h1, #main_content_section #vsm h2, #main_content_section #vsm h3, #vsm .vsm-neon, #vsm .vsm-floor strong, #vsm .vsm-card__foot b, #vsm .vsm-plan__price b, #vsm .vsm-logo__text b, #vsm .vsm-foot__brand, #vsm .vsm-receipt__head span, #vsm .vsm-result__stamp, #vsm .vsm-floor__no { font-family: var(--m-display) !important; font-weight: 400 !important; } #main_content_section #vsm .vsm-hero h1 em { font-family: var(--m-sans) !important; font-weight: 600 !important; } html body #vsm .vsm-receipt .vsm-who legend { background: transparent !important; border: 0 !important; box-shadow: none !important; width: auto; float: none; padding: 0 !important; margin: 0 0 6px !important; font-size: 12px !important; } html body #vsm .vsm-receipt select, html body #vsm .vsm-receipt input[type="url"], html body #vsm .vsm-receipt input:not([type]) { background-color: #fff !important; background-image: none !important; color: #1e1a26 !important; } html body #vsm .vsm-receipt select option { background: #fff; color: #1e1a26; } body #main_content_section #vsm .vsm-receipt select, body #main_content_section #vsm .vsm-receipt input:not([type="checkbox"]):not([type="radio"]) { background-color: #fff !important; background-image: none !important; color: #1e1a26 !important; border: 1.5px solid rgba(30, 26, 38, .2) !important; } body #main_content_section #vsm .vsm-receipt fieldset { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* hediye: kasa içi */ #vsm .vsm-gift { display: grid; gap: 10px; } #vsm .vsm-gift__results { display: grid; gap: 6px; } #vsm .vsm-gift__results:empty { display: none; } #vsm .vsm-gift__results button { display: grid; gap: 1px; width: 100%; padding: 8px 12px !important; border: 1.5px solid rgba(30, 26, 38, .15) !important; border-radius: 4px !important; background: #fff !important; background-image: none !important; box-shadow: none !important; color: #1e1a26 !important; font: 700 14px var(--m-sans) !important; text-align: left !important; cursor: pointer; } #vsm .vsm-gift__results button small { color: #6c6578 !important; font: 500 12px var(--m-sans); } #vsm .vsm-gift__results button:hover { border-color: #ff5fa2 !important; } #vsm .vsm-gift__picked { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 4px; background: #ffe9f2; color: #1e1a26 !important; font-weight: 700; } #vsm .vsm-gift__picked button { margin-left: auto; padding: 0 !important; border: 0 !important; background: none !important; color: #c2185b !important; font: 700 12px var(--m-cond) !important; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } #vsm .vsm-gift__cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } #vsm .vsm-gift__card { position: relative; display: grid; align-content: end; aspect-ratio: 1; padding: 5px; overflow: hidden; border: 2px solid transparent; border-radius: 4px; cursor: pointer; isolation: isolate; } #vsm .vsm-gift__card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--card-art) center / cover; } #vsm .vsm-gift__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(11, 13, 22, .85)); } #vsm .vsm-gift__card input { position: absolute; opacity: 0; } #vsm .vsm-gift__card span { color: #fff !important; font: 700 10px/1.1 var(--m-cond); letter-spacing: .04em; } #vsm .vsm-gift__card:has(input:checked) { border-color: #ff5fa2; box-shadow: 0 0 0 2px rgba(255, 95, 162, .35); } body #main_content_section #vsm .vsm-receipt textarea { width: 100%; padding: 8px 12px; background: #fff !important; background-image: none !important; color: #1e1a26 !important; border: 1.5px solid rgba(30, 26, 38, .2) !important; border-radius: 4px !important; font: 500 14px var(--m-sans) !important; resize: vertical; } /* hediye kartı sayfası */ #vsm .vsm-giftview { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 32px; align-items: center; margin: 28px 0 34px; } #vsm .vsm-giftcard { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; aspect-ratio: 1.6; margin: 0; padding: 22px 24px 18px; overflow: hidden; border-radius: 20px; isolation: isolate; color: #fff; box-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .12); transform: rotate(-1.5deg); } #vsm .vsm-giftcard::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--card-art) center / cover; } #vsm .vsm-giftcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(11, 13, 22, .88) 0%, rgba(11, 13, 22, .55) 55%, rgba(11, 13, 22, .2) 100%), linear-gradient(0deg, color-mix(in srgb, var(--tone) 35%, transparent), transparent 50%); } #vsm .vsm-giftcard > *:not(.vice-sec) { position: relative; z-index: 1; } #vsm .vsm-giftcard__top { display: flex; justify-content: space-between; align-items: center; } #vsm .vsm-giftcard__brand { font: 400 26px/1 var(--m-display) !important; letter-spacing: .08em; background: var(--m-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; } #vsm .vsm-giftcard__kind { padding: 3px 10px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; font: 700 11px var(--m-cond); letter-spacing: .16em; text-transform: uppercase; } #vsm .vsm-giftcard__body { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: center; } #vsm .vsm-giftcard__icon { display: grid; place-items: center; aspect-ratio: 1; border-radius: 18px; background: color-mix(in srgb, var(--tone) 35%, rgba(11, 13, 22, .6)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 60%, transparent); color: #fff; font-size: 36px; } #vsm .vsm-giftcard__to { margin: 0; color: var(--m-sun); font: 700 13px var(--m-cond); letter-spacing: .16em; text-transform: uppercase; } #vsm .vsm-giftcard__product { margin: 2px 0 6px; font: 400 clamp(28px, 3.4vw, 42px)/.95 var(--m-display) !important; letter-spacing: .02em; text-transform: uppercase; } #vsm .vsm-giftcard__msg { margin: 0 0 6px; padding: 0; border: 0; color: #f0e9ff; font: italic 500 15px/1.4 var(--m-sans); } #vsm .vsm-giftcard__from { margin: 0; color: var(--m-muted); font: 600 13px var(--m-cond); letter-spacing: .06em; } #vsm .vsm-giftcard__foot { display: flex; align-items: center; gap: 12px; } #vsm .vsm-giftcard__foot img { width: 52px; height: 52px; padding: 3px; border-radius: 6px; background: #fff; image-rendering: pixelated; } #vsm .vsm-giftcard__foot span { color: rgba(255, 255, 255, .7); font: 500 11px/1.4 var(--m-mono); } #vsm .vsm-giftcard .vice-foil { position: absolute; right: 18px; bottom: 14px; width: 64px; height: 64px; } #vsm .vsm-giftcard .vice-foil img { filter: none; opacity: .35; } #main_content_section #vsm .vsm-giftview__side h1 { margin: 8px 0 10px; font: 400 clamp(36px, 4vw, 56px)/.95 var(--m-display) !important; letter-spacing: .02em; text-transform: uppercase; } @media (max-width: 900px) { #vsm .vsm-giftview { grid-template-columns: minmax(0, 1fr); } #vsm .vsm-giftcard { transform: none; } } @media (max-width: 560px) { #vsm .vsm-giftcard { aspect-ratio: auto; } #vsm .vsm-giftcard__body { grid-template-columns: 60px minmax(0, 1fr); } #vsm .vsm-giftcard__icon { font-size: 26px; border-radius: 4px; } #vsm .vsm-gift__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- vP kasası (/bakiyeyukle, bakiyeyuklepaytr2, /bakiyeyuklepolar) ---------- */ body.vice-action-bakiyeyukle #header.vc-home-hero, body.vice-action-bakiyeyuklepaytr2 #header.vc-home-hero, body.vice-action-bakiyeyuklepolar #header.vc-home-hero { display: none !important; } #vsm .vsm-hero--cashier { min-height: 300px; } #vsm .vsm-hero--cashier .vsm-neon { font-size: clamp(56px, 8vw, 116px); } #vsm .vsm-hero__sign--sun { border-color: rgba(255, 211, 110, .85); color: #fff1c9; text-shadow: 0 0 14px rgba(255, 211, 110, .9); box-shadow: 0 0 22px rgba(255, 211, 110, .35), inset 0 0 18px rgba(255, 211, 110, .22); } #vsm .vsm-alert { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--m-line); border-radius: 4px; background: var(--m-glass); color: var(--m-ink); font-size: 14.5px; } #vsm .vsm-alert i { margin-top: 3px; } #vsm .vsm-alert a { color: var(--m-sun); text-decoration: underline; text-underline-offset: 3px; } #vsm .vsm-alert--err { border-color: rgba(255, 95, 162, .5); background: rgba(255, 95, 162, .12); } #vsm .vsm-alert--warn { border-color: rgba(255, 158, 94, .5); background: rgba(255, 158, 94, .12); } #vsm .vsm-alert--ok { border-color: rgba(155, 229, 138, .5); background: rgba(155, 229, 138, .12); } #vsm.vsm--topup .vsm-payment-warning { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 24px; padding: 20px; border: 2px solid #e6a33b; border-left-width: 6px; border-radius: 6px; background: #fff1d1; color: #653b0c !important; } #vsm.vsm--topup .vsm-payment-warning > i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #653b0c; color: #fff1d1 !important; font-size: 20px; } #vsm.vsm--topup .vsm-payment-warning strong { display: block; color: #653b0c !important; font: 700 20px/1.3 var(--m-sans); } #vsm.vsm--topup .vsm-payment-warning p { margin: 6px 0 0; color: #653b0c !important; font-size: 15px; line-height: 1.5; } #vsm.vsm--topup .vsm-payment-block { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 12px; border: 1px solid #e6a33b; border-radius: 4px; background: #fff1d1; } #vsm.vsm--topup .vsm-payment-block, #vsm.vsm--topup .vsm-payment-block span, #vsm.vsm--topup .vsm-payment-block i { color: #653b0c !important; font-size: 14px; line-height: 1.5; } #vsm.vsm--topup .vsm-payment-block i { margin-top: 3px; flex: none; } #vsm.vsm--topup .vsm-topup-submit:disabled { opacity: 1; background: #e7dfd2 !important; border-color: #c9bca8 !important; } #vsm.vsm--topup .vsm-topup-submit:disabled, #vsm.vsm--topup .vsm-topup-submit:disabled span, #vsm.vsm--topup .vsm-topup-submit:disabled i { color: #514638 !important; } #vsm .vsm-topup { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; margin: 0 0 34px; } #vsm .vsm-topup__main { display: grid; gap: 26px; min-width: 0; } body #main_content_section #vsm fieldset.vsm-step { min-width: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body #main_content_section #vsm .vsm-step legend { display: flex; align-items: baseline; gap: 12px; width: 100%; float: left; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--m-ink) !important; font: 400 32px/1 var(--m-display) !important; letter-spacing: .03em; text-transform: uppercase; } #vsm .vsm-step legend + * { clear: both; } #vsm .vsm-step legend small { color: var(--m-faint); font: 500 13px var(--m-sans); letter-spacing: 0; text-transform: none; } #vsm .vsm-step__no { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--m-sun); color: var(--m-on-gold); font: 400 22px/1 var(--m-display); flex: none; transform: translateY(-3px); } #vsm .vsm-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } #vsm .vsm-method { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 16px; border: 1.5px solid var(--m-line); border-radius: 6px; background: var(--m-raised); cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } #vsm .vsm-method:hover { transform: translateY(-2px); border-color: var(--m-strong); } #vsm .vsm-method.is-on { border-color: var(--tone); box-shadow: 0 0 0 1px var(--tone), 0 12px 34px rgba(0, 0, 0, .35); background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 16%, transparent), var(--m-raised) 60%); } #vsm .vsm-method input { position: absolute; opacity: 0; pointer-events: none; } #vsm .vsm-method:has(input:focus-visible) { outline: 2px solid var(--m-ocean); outline-offset: 2px; } #vsm .vsm-method__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 4px; background: color-mix(in srgb, var(--tone) 22%, transparent); color: var(--tone); font-size: 20px; } #vsm .vsm-method__body { display: grid; gap: 6px; align-content: start; } #vsm .vsm-method__body strong { font: 700 19px/1.1 var(--m-cond); letter-spacing: .02em; } #vsm .vsm-method__body small { color: var(--m-muted); font-size: 13.5px; line-height: 1.45; } #vsm .vsm-method__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } #vsm .vsm-method__by { position: absolute; top: 16px; right: 16px; color: var(--m-faint); font: 700 11px var(--m-cond); letter-spacing: .16em; text-transform: uppercase; } #vsm .vsm-method.is-on .vsm-method__by::before { content: "\2713 "; color: var(--tone); } #vsm .vsm-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } body #main_content_section #vsm .vsm-pack { position: relative; display: grid; gap: 4px; justify-items: start; min-height: 0; margin: 0; padding: 16px 14px 14px !important; border: 1.5px solid var(--m-line) !important; border-radius: 6px !important; background: var(--m-raised) !important; background-image: none !important; box-shadow: none !important; color: var(--m-ink) !important; text-align: left; text-transform: none; letter-spacing: normal; cursor: pointer; transition: border-color .15s ease, transform .15s ease; } body #main_content_section #vsm .vsm-pack:hover { transform: translateY(-2px); border-color: var(--m-strong) !important; } body #main_content_section #vsm .vsm-pack.is-on { border-color: var(--m-sun) !important; background: var(--m-raised2) !important; box-shadow: 0 0 0 1px var(--m-sun) !important; } #vsm .vsm-pack input { position: absolute; opacity: 0; pointer-events: none; } #vsm label.vsm-pack:has(input:focus-visible) { outline: 2px solid var(--m-ocean); outline-offset: 2px; } #vsm .vsm-pack__flag { position: absolute; top: -9px; right: 10px; padding: 2px 8px; border-radius: 3px; background: var(--m-sun); color: var(--m-on-gold); font: 700 10.5px/1.5 var(--m-cond); letter-spacing: .12em; text-transform: uppercase; } #vsm .vsm-pack__vp { font: 400 34px/1 var(--m-display); letter-spacing: .02em; color: var(--m-ink); } #vsm .vsm-pack__vp em { margin-left: 4px; color: var(--m-faint); font: 700 13px var(--m-cond); font-style: normal; letter-spacing: .08em; } #vsm .vsm-pack__bonus { color: var(--m-sun); font: 700 13px var(--m-cond); letter-spacing: .03em; } #vsm .vsm-pack__price { margin-top: 4px; color: var(--m-muted); font: 500 13px var(--m-mono); } #vsm .vsm-pack__price small { color: var(--m-faint); } #vsm .vsm-custom { display: grid; gap: 6px; margin-top: 16px; max-width: 360px; } #vsm .vsm-custom > span:first-child { color: var(--m-muted); font: 700 12px var(--m-cond); letter-spacing: .14em; text-transform: uppercase; } #vsm .vsm-custom > span:first-child em { color: var(--m-faint); font-style: normal; letter-spacing: .04em; text-transform: none; } #vsm .vsm-custom__box { display: flex; align-items: center; border: 1.5px solid var(--m-strong); border-radius: 4px; background: rgba(0, 0, 0, .25); overflow: hidden; } #vsm .vsm-custom__box:focus-within { border-color: var(--m-pink); } body #main_content_section #vsm .vsm-custom__box input { flex: 1; min-width: 0; height: 52px; padding: 0 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--m-ink) !important; font: 400 30px/1 var(--m-display) !important; letter-spacing: .03em; outline: none; } #vsm .vsm-custom__box b { padding: 0 16px; color: var(--m-faint); font: 700 14px var(--m-cond); letter-spacing: .1em; } #vsm .vsm-custom__hint { min-height: 1.4em; margin: 8px 0 0; color: var(--m-sun); font-size: 13.5px; } #vsm .vsm-receipt__row--bonus b { color: #b8730a !important; } #vsm .vsm-receipt__row--pay { font-size: 17px; } #vsm .vsm-receipt__row--pay b { font-size: 20px; } #vsm .vsm-receipt__safe { margin: 0; color: #6c6578 !important; font-size: 12.5px; line-height: 1.45; text-align: center; } #vsm .vsm-receipt__safe a { color: #c2185b !important; text-decoration: underline; } #vsm .vsm-receipt .vsm-btn--dark { border-color: rgba(30, 26, 38, .25) !important; color: #3a3446 !important; } #vsm .vsm-receipt .vsm-btn--dark span, #vsm .vsm-receipt .vsm-btn--dark i { color: #3a3446 !important; } #vsm .vsm-ladder { margin: 6px 0 34px; padding: 22px; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); } #vsm .vsm-ladder__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); align-items: end; gap: 8px; height: 190px; margin: 0; padding: 0; list-style: none; } #vsm .vsm-ladder__steps li { display: grid; grid-template-rows: 1fr auto auto; align-items: end; justify-items: center; height: 100%; gap: 4px; } #vsm .vsm-ladder__bar { display: block; width: 100%; height: var(--h); min-height: 8px; border-radius: 8px 8px 3px 3px; background: var(--m-sun); } #vsm .vsm-ladder__steps b { color: var(--m-sun); font: 700 14px var(--m-cond); } #vsm .vsm-ladder__steps small { color: var(--m-faint); font: 500 12px var(--m-mono); white-space: nowrap; } #vsm .vsm-ladder__admin { margin: 16px 0 0; } #vsm .vsm-paystep { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; margin: 22px 0 34px; } #vsm .vsm-payframe { overflow: hidden; border: 1px solid var(--m-line); border-radius: 6px; background: #fff; } #vsm .vsm-payframe__head { display: flex; gap: 12px; align-items: center; padding: 14px 18px; background: #14111f; color: var(--m-ink); } #vsm .vsm-payframe__head i { color: var(--m-lime); font-size: 18px; } #vsm .vsm-payframe__head div { display: grid; } #vsm .vsm-payframe__head strong { font: 700 17px var(--m-cond); letter-spacing: .03em; } #vsm .vsm-payframe__head small { color: var(--m-muted); font-size: 12.5px; } #vsm .vsm-payframe__body iframe { display: block; width: 100%; min-height: 560px; border: 0; background: #fff; } #vsm .vsm-payframe__body iframe.vsm-payframe__tall { min-height: 720px; } #vsm .vsm-admin { margin: 22px 0 34px; } #vsm .vsm-admin__table { width: 100%; max-width: 720px; border-collapse: collapse; } #vsm .vsm-admin__table th { padding: 8px 10px; border-bottom: 1px solid var(--m-strong); color: var(--m-muted); font: 700 12px var(--m-cond); letter-spacing: .12em; text-align: left; text-transform: uppercase; } #vsm .vsm-admin__table td { padding: 6px 10px; border-bottom: 1px solid var(--m-line); color: var(--m-muted); font: 500 14px var(--m-mono); } body #main_content_section #vsm .vsm-admin__table input { width: 140px; height: 38px; padding: 0 10px !important; border: 1.5px solid var(--m-strong) !important; border-radius: 4px !important; background: rgba(0, 0, 0, .3) !important; background-image: none !important; color: var(--m-ink) !important; font: 500 15px var(--m-mono) !important; } #vsm .vsm-admin__hint { margin: 10px 0 0; color: var(--m-faint); font-size: 13px; } #main_content_section #vsm .vsm-admin__sub { margin: 26px 0 10px; font: 400 26px/1 var(--m-display) !important; text-transform: uppercase; } #vsm .vsm-admin__polar { display: flex; flex-wrap: wrap; gap: 8px; } #vsm .vsm-admin__polar li { display: grid; padding: 10px 14px; border: 1px solid var(--m-line); border-radius: 4px; background: var(--m-raised); } #vsm .vsm-admin__polar b { font: 400 22px var(--m-display) !important; } #vsm .vsm-admin__polar span { color: var(--m-muted); font: 500 12.5px var(--m-mono); } @media (max-width: 1100px) { #vsm .vsm-topup { grid-template-columns: minmax(0, 1fr) 340px; } #vsm .vsm-methods { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { #vsm .vsm-topup, #vsm .vsm-paystep { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { #vsm .vsm-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } #vsm .vsm-pack__vp { font-size: 28px; } #vsm .vsm-ladder__steps { height: 150px; grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); } #vsm .vsm-ladder__steps small { font-size: 10px; } body #main_content_section #vsm .vsm-admin__table input { width: 100%; } }body #main_content_section #vsm .vsm-pack__vp, #vsm .vsm-step__no { font-family: var(--m-display) !important; font-weight: 400 !important; } html body #main_content_section #vsm .vsm-pack { height: auto !important; min-height: 112px !important; max-height: none !important; align-content: start; line-height: 1.3 !important; width: auto !important; } html body #main_content_section #vsm button.vsm-pack { justify-items: start !important; justify-content: stretch !important; text-align: left !important; } /* ---------- Vice Mall yönetimi ---------- */ #vsm .vsm-adminnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 16px; padding: 6px; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); } #vsm .vsm-adminnav a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 4px; color: var(--m-muted); font: 700 14px var(--m-cond); letter-spacing: .06em; text-transform: uppercase; } #vsm .vsm-adminnav a:hover { color: var(--m-ink); background: var(--m-glass); } #vsm .vsm-adminnav a.is-on { background: var(--m-sun); color: var(--m-on-gold); } #vsm .vsm-adminnav a:last-child { margin-left: auto; } #vsm .vsm-adminnav em { padding: 0 7px; border-radius: 3px; background: var(--m-pink); color: #fff; font-style: normal; font-size: 12px; } #vsm .vsm-chipnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; } #vsm .vsm-chipnav a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--m-line); border-radius: 3px; color: var(--m-muted); font: 600 13px var(--m-cond); letter-spacing: .03em; } #vsm .vsm-chipnav a.is-on { border-color: var(--m-sun); color: var(--m-ink); background: var(--m-raised2); } #vsm .vsm-chipnav em { color: var(--m-faint); font-style: normal; } #vsm .vsm-admin__list { display: grid; gap: 6px; } #vsm .vsm-arow { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 110px; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; border: 1px solid var(--m-line); border-radius: 4px; background: var(--m-raised); color: var(--m-ink); transition: border-color .15s ease; } #vsm .vsm-arow:hover { border-color: var(--tone); } #vsm .vsm-arow.is-off { opacity: .55; } #vsm .vsm-arow__tile { display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--tone) 20%, transparent); color: var(--tone); font-size: 20px; } #vsm .vsm-arow__tile img { width: 100%; height: 100%; object-fit: cover; } #vsm .vsm-arow__body { display: grid; min-width: 0; } #vsm .vsm-arow__body strong { overflow: hidden; font: 700 16px var(--m-cond); letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; } #vsm .vsm-arow__body small { color: var(--m-faint); font-size: 12.5px; } #vsm .vsm-arow__chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; } #vsm .vsm-arow__price { font: 400 22px var(--m-display) !important; text-align: right; } #vsm .vsm-arow__price em { color: var(--m-faint); font: 700 12px var(--m-cond); font-style: normal; } #vsm .vsm-aform { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; } #vsm .vsm-aform__main { display: grid; gap: 18px; } body #main_content_section #vsm .vsm-aform fieldset { display: grid; gap: 12px; min-width: 0; margin: 0 !important; padding: 18px !important; border: 1px solid var(--m-line) !important; border-radius: 6px !important; background: var(--m-raised) !important; box-shadow: none !important; } body #main_content_section #vsm .vsm-aform legend { float: left; width: 100%; margin: 0 0 4px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--m-ink) !important; font: 400 24px/1 var(--m-display) !important; letter-spacing: .03em; text-transform: uppercase; } #vsm .vsm-aform legend small { margin-left: 8px; color: var(--m-faint); font: 500 12.5px var(--m-sans); letter-spacing: 0; text-transform: none; } #vsm .vsm-afield { display: grid; gap: 5px; min-width: 0; } #vsm .vsm-afield > span { color: var(--m-muted); font: 700 12px var(--m-cond); letter-spacing: .12em; text-transform: uppercase; } #vsm .vsm-afield em { color: var(--m-faint); font-style: normal; letter-spacing: .02em; text-transform: none; } body #main_content_section #vsm .vsm-afield input:not([type="file"]), body #main_content_section #vsm .vsm-afield select, body #main_content_section #vsm .vsm-afield textarea, body #main_content_section #vsm .vsm-obulk input[name="not"], body #main_content_section #vsm .vsm-orow__note input[name="not"] { width: 100%; min-height: 40px; padding: 8px 12px !important; border: 1.5px solid var(--m-strong) !important; border-radius: 4px !important; background: rgba(0, 0, 0, .3) !important; background-image: none !important; box-shadow: none !important; color: var(--m-ink) !important; font: 500 14px var(--m-sans) !important; } body #main_content_section #vsm .vsm-afield select option { background: #1a1726; color: var(--m-ink); } body #main_content_section #vsm .vsm-afield textarea { resize: vertical; line-height: 1.5; } #vsm .vsm-afield input[type="file"] { color: var(--m-muted); font-size: 13px; } #vsm .vsm-arow2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #vsm .vsm-achecks { display: flex; flex-wrap: wrap; gap: 18px; color: var(--m-ink); font-size: 14px; } #vsm .vsm-achecks label, #vsm label.vsm-achecks { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } #vsm .vsm-achecks input, #vsm .vsm-obulk input[type="checkbox"], #vsm .vsm-orow input[type="checkbox"] { width: 17px; height: 17px; accent-color: #ff5fa2; } #vsm .vsm-aform__side { display: grid; gap: 12px; position: sticky; top: 90px; } #vsm .vsm-apreview { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); } #vsm .vsm-apreview .vsm-card__tile { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--tone) 20%, rgba(0,0,0,.2)); color: var(--tone); font-size: 54px; } #vsm .vsm-apreview .vsm-card__tile img { width: 100%; height: 100%; object-fit: cover; } #vsm .vsm-aform__side .vsm-note--info { background: rgba(63, 211, 224, .14); color: #c9fbff; } #vsm .vsm-aform__side .vsm-note--warn { background: rgba(255, 158, 94, .16); color: #ffd9bd; } #vsm .vsm-ofilter { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; } #vsm .vsm-ofilter .vsm-afield { min-width: 220px; } #vsm .vsm-obulk { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 10px; padding: 10px 12px; border: 1px dashed var(--m-strong); border-radius: 4px; color: var(--m-muted); font-size: 13.5px; } #vsm .vsm-obulk label { display: inline-flex; align-items: center; gap: 7px; } body #main_content_section #vsm .vsm-obulk input[name="not"] { flex: 1; min-width: 200px; width: auto; } #vsm .vsm-otable { display: grid; gap: 6px; } #vsm .vsm-orow { display: grid; grid-template-columns: 26px minmax(0, 1.4fr) 90px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; border: 1px solid var(--m-line); border-radius: 4px; background: var(--m-raised); } #vsm form.vsm-orow:has(input[name="odeme"]) { grid-template-columns: minmax(0, 1.4fr) 140px auto; } #vsm .vsm-orow__main { display: grid; min-width: 0; } #vsm .vsm-orow__main strong { font: 700 15.5px var(--m-cond); letter-spacing: .02em; } #vsm .vsm-orow__main small { color: var(--m-faint); font-size: 12.5px; } #vsm .vsm-orow__main small a { color: var(--m-muted); text-decoration: underline; text-underline-offset: 2px; } #vsm .vsm-orow__main small.is-warn { color: var(--m-orange); } #vsm .vsm-orow__amt { display: grid; text-align: right; } #vsm .vsm-orow__amt b { font: 400 20px var(--m-display) !important; } #vsm .vsm-orow__amt small { color: var(--m-faint); font-size: 12px; } #vsm .vsm-orow__note { display: flex; align-items: center; gap: 8px; color: var(--m-faint); font-size: 12.5px; } #vsm .vsm-orow__note label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } #vsm .vsm-orow__act { display: flex; gap: 6px; } #vsm .vsm-orow__act .vsm-btn { min-height: 36px; padding: 0 12px !important; font-size: 12.5px !important; } #vsm .vsm-opager { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; } #vsm .vsm-empty { display: flex; align-items: center; gap: 10px; padding: 28px; border: 1px dashed var(--m-line); border-radius: 6px; color: var(--m-muted); } @media (max-width: 1100px) { #vsm .vsm-orow { grid-template-columns: 26px minmax(0, 1fr) 90px; } #vsm .vsm-orow__note, #vsm .vsm-orow__act { grid-column: 2 / -1; } } @media (max-width: 900px) { #vsm .vsm-aform { grid-template-columns: minmax(0, 1fr); } #vsm .vsm-aform__side { position: static; } #vsm .vsm-arow { grid-template-columns: 52px minmax(0, 1fr) auto; } #vsm .vsm-arow__chips { display: none; } } @media (max-width: 560px) { #vsm .vsm-arow2 { grid-template-columns: minmax(0, 1fr); } #vsm .vsm-adminnav a:last-child { margin-left: 0; } #vsm form.vsm-orow:has(input[name="odeme"]) { grid-template-columns: minmax(0, 1fr); } } /* oyuncu dosyası */ #vsm .vsm-afield--grow { flex: 1; min-width: 260px; } #vsm .vsm-ofilter .vsm-btn { align-self: end; } #vsm .vsm-pfile { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 6px 0 12px; } #vsm .vsm-pfile > div { display: grid; align-content: start; gap: 6px; padding: 16px; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); } #vsm .vsm-pfile__id strong { font: 400 30px/1 var(--m-display) !important; } #vsm .vsm-pfile__id small, #vsm .vsm-pfile > div > small { color: var(--m-faint); font-size: 12.5px; } #vsm .vsm-pfile__id small a { color: var(--m-muted); text-decoration: underline; } #vsm .vsm-pfile__id .vsm-arow__chips { justify-content: flex-start; } #vsm .vsm-pfile__chars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px !important; } #vsm .vsm-pfile__chars li { padding: 3px 9px; border: 1px solid var(--m-line); border-radius: 4px; font-size: 13px; } #vsm .vsm-pfile__chars li.is-off { opacity: .5; text-decoration: line-through; } #vsm .vsm-pfile__chars small { color: var(--m-faint); } #vsm .vsm-pfile > div > span { color: var(--m-muted); font: 700 12px var(--m-cond); letter-spacing: .12em; text-transform: uppercase; } #vsm .vsm-pfile > div > b { font: 400 44px/1 var(--m-display) !important; } #vsm .vsm-pfile__gap.is-ok b { color: var(--m-lime); } #vsm .vsm-pfile__gap.is-warn { border-color: rgba(255, 158, 94, .5); } #vsm .vsm-pfile__gap.is-warn b { color: var(--m-orange); } #vsm .vsm-pfile__gap.is-bad { border-color: rgba(255, 95, 162, .6); background: rgba(255, 95, 162, .1); } #vsm .vsm-pfile__gap.is-bad b { color: var(--m-pink); } #vsm .vsm-pledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 0 0 8px; } #vsm .vsm-pledger div { padding: 10px 12px; border: 1px solid var(--m-line); border-radius: 4px; } #vsm .vsm-pledger dt { color: var(--m-muted); font-size: 12.5px; } #vsm .vsm-pledger dt small { color: var(--m-faint); } #vsm .vsm-pledger dd { margin: 2px 0 0; font: 400 24px var(--m-display); } #main_content_section #vsm .vsm-admin__sub small { margin-left: 6px; color: var(--m-faint); font: 500 13px var(--m-sans); text-transform: none; } #vsm .vsm-ptable { overflow-x: auto; border: 1px solid var(--m-line); border-radius: 4px; background: var(--m-raised); } body #main_content_section #vsm .vsm-ptable table { width: 100%; margin: 0; border-collapse: collapse; background: transparent !important; } body #main_content_section #vsm .vsm-ptable th { padding: 9px 12px; border: 0 !important; border-bottom: 1px solid var(--m-strong) !important; background: transparent !important; color: var(--m-muted) !important; font: 700 11.5px var(--m-cond); letter-spacing: .12em; text-align: left; text-transform: uppercase; white-space: nowrap; } body #main_content_section #vsm .vsm-ptable td { padding: 8px 12px; border: 0 !important; border-bottom: 1px solid var(--m-line) !important; background: transparent !important; color: var(--m-ink) !important; font-size: 13.5px; vertical-align: top; } #vsm .vsm-ptable td small { display: block; color: var(--m-faint); font-size: 12px; } #vsm .vsm-ptable td a { color: var(--m-ink); text-decoration: underline; text-underline-offset: 2px; } #vsm .vsm-ptable .r { text-align: right !important; font-family: var(--m-mono); white-space: nowrap; } #vsm .vsm-ptable .is-plus { color: var(--m-lime) !important; } #vsm .vsm-ptable .is-minus { color: var(--m-orange) !important; } #vsm .vsm-ptable tr.is-warn td { background: rgba(255, 95, 162, .1) !important; } @media (max-width: 900px) { #vsm .vsm-pfile { grid-template-columns: minmax(0, 1fr); } } /* eski süsler sade */ #vsm .vsm-neon { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--m-sun); filter: none; } #vsm .vsm-hero__sign { display: none; } #vsm .vsm-foot__brand { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--m-sun); } #vsm .vsm-crumb a { color: var(--m-muted); } /* ==================== Vice Mall 2 · 1. aşama (17.10.2026) ==================== Sitenin dili: lacivert zemin, krem ve altın vurgu, Bebas başlık, mono etiket. Kapak görselleri images/market/vsm/art/. */ #vsm .vsm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #vsm .vsm-btn--gold { background: var(--m-sun) !important; border-color: var(--m-sun) !important; color: var(--m-on-gold) !important; } #vsm .vsm-btn--line { background: transparent !important; border-color: var(--m-strong) !important; color: var(--m-ink) !important; } #vsm .vsm-btn--line:hover { border-color: var(--m-sun) !important; } #vsm .vsm-kick { margin: 0; color: var(--m-sun); font: 700 12px/1.3 var(--m-mono); letter-spacing: .1em; text-transform: uppercase; } #vsm .vsm-price { display: inline-flex; align-items: baseline; gap: 4px; color: var(--m-ink); font: 700 22px/1 var(--m-cond); letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; } #vsm .vsm-price em { color: var(--m-muted); font: 500 12px var(--m-mono); font-style: normal; } #vsm .vsm-chip { min-height: 22px; padding: 0 7px; border-radius: 3px; font: 700 10.5px/1 var(--m-mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } #vsm .vsm-chip--ok { border-color: color-mix(in srgb, var(--m-lime) 55%, transparent); color: var(--m-lime); } #vsm .vsm-chip--slow { border-color: color-mix(in srgb, var(--m-blue) 50%, transparent); color: var(--m-blue); } #vsm .vsm-chip--gold { border-color: var(--m-sun); color: var(--m-sun); } #vsm .vsm-emb { position: absolute; left: 10px; bottom: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 4px; background: rgba(11, 16, 22, .82); color: var(--m-sun); font-size: 15px; box-shadow: 0 0 0 1px rgba(231, 203, 137, .35); } /* Mall çubuğu */ #vsm .vsm-mbar { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(200px, 300px) auto; align-items: center; gap: 10px 18px; margin: 0 calc(-1 * clamp(16px, 2.6vw, 34px)); padding: 10px clamp(16px, 2.6vw, 34px); border-bottom: 1px solid var(--m-line); background: var(--m-raised); } #main_content_section #vsm .vsm-mbar__word { color: var(--m-sun) !important; font: 400 30px/1 var(--m-display) !important; letter-spacing: .03em; white-space: nowrap; text-decoration: none; } #vsm .vsm-mbar__nav { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; } #vsm .vsm-mbar__nav::-webkit-scrollbar { display: none; } #vsm .vsm-mbar__nav a { flex: none; padding: 10px 10px; color: var(--m-muted); font: 700 14px/1 var(--m-cond); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } #vsm .vsm-mbar__nav a:hover { color: var(--m-ink); } #vsm .vsm-mbar__nav a.is-on { color: var(--m-ink); box-shadow: inset 0 -2px 0 var(--m-sun); } #vsm .vsm-mbar__find { position: relative; display: flex; min-width: 0; margin: 0; } body #main_content_section #vsm .vsm-mbar__find input { width: 100%; height: 38px; min-height: 0; margin: 0; padding: 0 40px 0 12px !important; border: 1px solid var(--m-line) !important; border-radius: 4px !important; background: var(--m-bg) !important; background-image: none !important; box-shadow: none !important; color: var(--m-ink) !important; font: 500 14px var(--m-sans) !important; } body #main_content_section #vsm .vsm-mbar__find input:focus { border-color: var(--m-sun) !important; } body #main_content_section #vsm .vsm-mbar__find button { position: absolute; right: 2px; top: 2px; width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: var(--m-muted) !important; cursor: pointer; } #vsm .vsm-mbar__acts { display: flex; align-items: center; gap: 8px; } #vsm .vsm-mbar__link { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: 1px solid var(--m-line); border-radius: 4px; color: var(--m-muted); font: 700 13px/1 var(--m-cond); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } #vsm .vsm-mbar__link:hover { color: var(--m-ink); border-color: var(--m-strong); } #vsm .vsm-mbar__wallet { display: inline-flex; align-items: stretch; height: 38px; border: 1px solid var(--m-sun); border-radius: 4px; overflow: hidden; } #vsm .vsm-mbar__wallet > span { display: inline-flex; align-items: baseline; gap: 4px; padding: 10px 12px 0; } #vsm .vsm-mbar__wallet b { color: var(--m-ink); font: 700 17px/1 var(--m-cond); font-variant-numeric: tabular-nums; } #vsm .vsm-mbar__wallet small { color: var(--m-muted); font: 500 11px var(--m-mono); } #vsm .vsm-mbar__wallet a, #vsm a.vsm-mbar__wallet--in { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--m-sun); color: var(--m-on-gold); font: 700 13px/1 var(--m-cond); letter-spacing: .06em; text-transform: uppercase; } #vsm a.vsm-mbar__wallet--in span { color: var(--m-on-gold); } #vsm .vsm-mbar__note { color: var(--m-faint); font-size: 13px; } #vsm .vsm-crumb { margin: 14px 0 0; } /* bölüm başlıkları */ #vsm .vsm-sec { margin-top: 34px; } #vsm .vsm-sec__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 14px; } #main_content_section #vsm .vsm-sec__head h2 { font: 400 32px/1 var(--m-display); letter-spacing: .02em; text-transform: uppercase; } #vsm .vsm-sec__head p { margin: 0; color: var(--m-faint); font-size: 14px; } #vsm .vsm-sec__head > a { margin-left: auto; color: var(--m-sun); font: 700 13px/1 var(--m-cond); letter-spacing: .06em; text-transform: uppercase; } /* öne çıkanlar */ #vsm .vsm-feat { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; margin-top: 20px; } #vsm .vsm-feat__stage { position: relative; min-width: 0; min-height: 400px; border: 1px solid var(--m-line); border-radius: 6px; overflow: hidden; background: var(--m-sunk); } #vsm .vsm-feat__slide { position: absolute; inset: 0; display: none; } #vsm .vsm-feat__slide.is-on { display: block; } #vsm .vsm-feat__art { position: absolute; inset: 0; } #vsm .vsm-feat__art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; } #vsm .vsm-feat__art .vsm-emb { left: auto; right: 16px; bottom: 16px; width: 46px; height: 46px; font-size: 20px; } #vsm .vsm-feat__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 16, 22, .95) 0%, rgba(11, 16, 22, .78) 34%, rgba(11, 16, 22, 0) 68%); } #vsm .vsm-feat__copy { position: absolute; left: 30px; top: 28px; bottom: 26px; z-index: 1; display: flex; flex-direction: column; gap: 12px; width: min(470px, 62%); } #main_content_section #vsm .vsm-feat__copy h2 { font: 400 clamp(44px, 4.6vw, 66px)/.9 var(--m-display); letter-spacing: .01em; text-transform: uppercase; } #main_content_section #vsm .vsm-feat__copy h2 a { color: var(--m-ink); } #vsm .vsm-feat__copy ul { display: grid; gap: 7px; } #vsm .vsm-feat__copy li { position: relative; padding-left: 18px; color: var(--m-ink); font-size: 15.5px; line-height: 1.35; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); } #vsm .vsm-feat__copy li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: var(--m-sun); transform: rotate(45deg); } #vsm .vsm-feat__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: auto 0 0; } #vsm .vsm-feat__row .vsm-price { margin-right: 6px; font-size: 32px; } #vsm .vsm-feat__list { display: flex; flex-direction: column; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); overflow: hidden; } #vsm .vsm-feat__head { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--m-line); color: var(--m-faint); font: 700 11px var(--m-mono); letter-spacing: .1em; text-transform: uppercase; } body #main_content_section #vsm .vsm-feat__pause { display: inline-flex; align-items: center; gap: 6px; min-height: 0; height: 26px; margin: 0; padding: 0 8px !important; border: 1px solid var(--m-line) !important; border-radius: 3px !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: var(--m-muted) !important; font: 700 10.5px var(--m-mono) !important; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } #vsm .vsm-feat__pause[hidden] { display: none !important; } #vsm .vsm-feat__item { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; flex: 1; padding: 9px 12px; border-bottom: 1px solid var(--m-line); color: var(--m-ink); } #vsm .vsm-feat__item:last-child { border-bottom: 0; } #vsm .vsm-feat__item:hover, #vsm .vsm-feat__item.is-on { background: var(--m-raised2); } #vsm .vsm-feat__thumb { display: block; height: 54px; overflow: hidden; border-radius: 3px; background: var(--m-sunk); } #vsm .vsm-feat__thumb img { width: 100%; height: 100%; object-fit: cover; } #vsm .vsm-feat__item b { display: block; font: 700 15.5px/1.15 var(--m-cond); letter-spacing: .02em; text-transform: uppercase; } #vsm .vsm-feat__item small { color: var(--m-muted); font-size: 13px; } #vsm .vsm-feat__bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--m-sun); } #vsm .vsm-feat__item.is-on .vsm-feat__bar { width: 100%; } #vsm .vsm-feat.is-playing .vsm-feat__item.is-on .vsm-feat__bar { width: 0; animation: vsm-bar var(--vsm-dur, 7s) linear forwards; } @keyframes vsm-bar { to { width: 100%; } } /* sekmeli listeler */ #vsm .vsm-lists { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; margin-top: 30px; align-items: start; } #vsm .vsm-ltabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--m-line); scrollbar-width: none; } #vsm .vsm-ltabs a { flex: none; padding: 11px 14px; color: var(--m-muted); font: 700 15px/1 var(--m-cond); letter-spacing: .05em; text-transform: uppercase; } #vsm .vsm-ltabs a.is-on { color: var(--m-ink); box-shadow: inset 0 -2px 0 var(--m-sun); } #vsm .vsm-lrow { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px; border-bottom: 1px solid var(--m-line); color: var(--m-ink); } #vsm .vsm-lrow:hover, #vsm .vsm-lrow.is-on { background: var(--m-raised); } #vsm .vsm-lrow__art { position: relative; display: block; height: 62px; overflow: hidden; border-radius: 3px; background: var(--m-sunk); } #vsm .vsm-lrow__art img { width: 100%; height: 100%; object-fit: cover; } #vsm .vsm-lrow__art .vsm-emb { left: 6px; bottom: 6px; width: 24px; height: 24px; font-size: 11px; } #vsm .vsm-lrow__body { display: grid; gap: 6px; min-width: 0; } #vsm .vsm-lrow__body strong { font: 700 17px/1.15 var(--m-cond); letter-spacing: .02em; text-transform: uppercase; } #vsm .vsm-lmore { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--m-sun); font: 700 13px var(--m-cond); letter-spacing: .06em; text-transform: uppercase; } #vsm .vsm-pre { position: sticky; top: 90px; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); } #vsm .vsm-pre__art { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--m-sunk); } #vsm .vsm-pre__art img { width: 100%; height: 100%; object-fit: cover; } #vsm .vsm-pre b { font: 700 21px/1.1 var(--m-cond); letter-spacing: .02em; text-transform: uppercase; } #vsm .vsm-pre ul { display: grid; gap: 5px; } #vsm .vsm-pre li { position: relative; padding-left: 14px; color: var(--m-muted); font-size: 14px; line-height: 1.4; } #vsm .vsm-pre li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; background: var(--m-sun); transform: rotate(45deg); } #vsm .vsm-pre__proof { margin: 0; color: var(--m-lime); font: 500 12px var(--m-mono); } #vsm .vsm-pre__proof:empty { display: none; } /* mağaza şeridi */ #vsm .vsm-stores { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } #vsm .vsm-store { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); color: var(--m-ink); transition: border-color .2s ease; } #vsm .vsm-store:hover { border-color: var(--tone); } #vsm .vsm-store__art { display: block; height: 72px; overflow: hidden; border-bottom: 3px solid var(--tone); } #vsm .vsm-store__art img { width: 100%; height: 100%; object-fit: cover; } #vsm .vsm-store__body { display: grid; gap: 3px; padding: 9px 11px 11px; } #vsm .vsm-store__body strong { display: flex; align-items: center; gap: 7px; font: 700 15.5px/1.1 var(--m-cond); letter-spacing: .03em; text-transform: uppercase; } #vsm .vsm-store__body strong i { color: var(--tone); font-size: 13px; } #vsm .vsm-store__body small { color: var(--m-muted); font: 500 11.5px var(--m-mono); } /* üyelikler */ #vsm .vsm-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } #vsm .vsm-tier { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); color: var(--m-ink); } #vsm .vsm-tier:hover { border-color: var(--m-strong); } #vsm .vsm-tier.is-rec { border-color: var(--m-sun); } #vsm .vsm-tier.is-mine { border-color: var(--m-lime); } #vsm .vsm-tier__art { position: relative; display: block; height: 120px; overflow: hidden; } #vsm .vsm-tier__art img { width: 100%; height: 100%; object-fit: cover; } #vsm .vsm-tier__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px 16px; } #vsm .vsm-tier__body strong { font: 400 36px/1 var(--m-display); letter-spacing: .02em; text-transform: uppercase; } #vsm .vsm-tier__hl { display: grid; gap: 4px; color: var(--m-muted); font-size: 14px; } #vsm .vsm-tier__hl span::before { content: "✓ "; color: var(--m-lime); } #vsm .vsm-tier__short { color: var(--m-muted); font-size: 14px; line-height: 1.4; } #vsm .vsm-tier__price { display: grid; gap: 3px; margin-top: auto; padding-top: 6px; } #vsm .vsm-tier__price small { color: var(--m-faint); font: 500 11.5px var(--m-mono); } /* hediye duvarı */ #vsm .vsm-gwall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } #vsm .vsm-gwall__card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 140px; padding: 14px; overflow: hidden; border: 1px solid var(--m-line); border-radius: 6px; color: #fff; isolation: isolate; } #vsm .vsm-gwall__card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--card-art) center / cover; } #vsm .vsm-gwall__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 13, 22, .05), rgba(11, 13, 22, .9)); } #vsm .vsm-gwall__ser { position: absolute; top: 10px; right: 12px; font: 700 10.5px var(--m-mono); letter-spacing: .06em; } #vsm .vsm-gwall__card b { font: 700 18px/1.1 var(--m-cond); text-transform: uppercase; } #vsm .vsm-gwall__card small { color: #e9e6f0; font-size: 13px; } /* mağaza ve arama başlığı */ #vsm .vsm-shead { position: relative; display: flex; align-items: flex-end; min-height: 190px; margin-top: 20px; padding: 24px 28px; overflow: hidden; border: 1px solid var(--m-line); border-radius: 6px; isolation: isolate; } #vsm .vsm-shead__art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; } #vsm .vsm-shead::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 16, 22, .94) 0%, rgba(11, 16, 22, .7) 45%, rgba(11, 16, 22, .15) 100%); border-bottom: 3px solid var(--tone); } #vsm .vsm-shead__copy { display: grid; gap: 6px; max-width: 620px; } #main_content_section #vsm .vsm-shead h1, #main_content_section #vsm .vsm-qhead h1 { font: 400 clamp(44px, 5vw, 66px)/.92 var(--m-display); letter-spacing: .02em; text-transform: uppercase; } #vsm .vsm-shead__copy p { margin: 0; color: var(--m-ink); font-size: 15.5px; } #vsm .vsm-shead__copy .vsm-shead__meta { color: var(--m-muted); font: 500 12px var(--m-mono); } #vsm .vsm-shead .vsm-kick i { color: var(--tone); } #vsm .vsm-qhead { display: grid; gap: 6px; margin-top: 22px; } /* süzgeç + ızgara */ #vsm .vsm-browse { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; margin-top: 24px; align-items: start; } #vsm .vsm-filters { position: sticky; top: 90px; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); } #vsm .vsm-filters summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; color: var(--m-ink); font: 700 14px/1 var(--m-cond); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; list-style: none; } #vsm .vsm-filters summary::-webkit-details-marker { display: none; } #vsm .vsm-filters summary em { display: grid; place-items: center; min-width: 20px; height: 20px; margin-left: auto; border-radius: 3px; background: var(--m-sun); color: var(--m-on-gold); font: 700 11px var(--m-mono); font-style: normal; } #vsm .vsm-filters__body { display: grid; gap: 14px; padding: 4px 14px 14px; } #vsm .vsm-fgroup { display: grid; gap: 2px; } #vsm .vsm-fgroup p { margin: 0 0 4px; color: var(--m-faint); font: 700 10.5px var(--m-mono); letter-spacing: .1em; text-transform: uppercase; } #vsm .vsm-fgroup a { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--m-muted); font-size: 14px; } #vsm .vsm-fgroup a i { color: var(--m-faint); } #vsm .vsm-fgroup a:hover, #vsm .vsm-fgroup a.is-on { color: var(--m-ink); } #vsm .vsm-fgroup a.is-on i { color: var(--m-sun); } #vsm .vsm-filters__clear { color: var(--m-sun); font: 700 12.5px var(--m-cond); letter-spacing: .06em; text-transform: uppercase; } #vsm .vsm-results { min-width: 0; } #vsm .vsm-rbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--m-line); } #vsm .vsm-rbar p { margin: 0; color: var(--m-muted); font-size: 14px; } #vsm .vsm-rbar p b { color: var(--m-ink); } #vsm .vsm-rbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } #vsm .vsm-rbar nav span { margin-right: 4px; color: var(--m-faint); font: 500 12px var(--m-mono); } #vsm .vsm-rbar nav a { padding: 6px 9px; border-radius: 3px; color: var(--m-muted); font: 700 13px/1 var(--m-cond); letter-spacing: .04em; text-transform: uppercase; } #vsm .vsm-rbar nav a.is-on { background: var(--m-ink); color: var(--m-bg); } #vsm .vsm-none { display: grid; justify-items: start; gap: 8px; padding: 28px; border: 1px dashed var(--m-strong); border-radius: 6px; } #vsm .vsm-none p { margin: 0; color: var(--m-muted); } /* ürün kartı */ #vsm .vsm-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } #vsm .vsm-pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } #vsm .vsm-pcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); color: var(--m-ink); transition: border-color .2s ease, transform .2s ease; } #vsm .vsm-pcard:hover { border-color: var(--m-strong); transform: translateY(-2px); } #vsm .vsm-pcard__art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--m-sunk); } #vsm .vsm-pcard__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } #vsm .vsm-pcard:hover .vsm-pcard__art img { transform: scale(1.04); } #vsm .vsm-pcard__flags { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; } #vsm .vsm-flag { padding: 4px 6px; border-radius: 3px; background: var(--m-sun); color: var(--m-on-gold); font: 700 10px/1 var(--m-mono); letter-spacing: .06em; text-transform: uppercase; } #vsm .vsm-flag--alt { background: var(--m-pink); color: #1a0d14; } #vsm .vsm-pcard__body { display: grid; gap: 4px; padding: 11px 12px 6px; } #vsm .vsm-pcard__body strong { font: 700 17px/1.15 var(--m-cond); letter-spacing: .02em; text-transform: uppercase; } #vsm .vsm-pcard__body small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--m-muted); font-size: 13.5px; line-height: 1.4; } #vsm .vsm-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 8px 12px 12px; } #vsm .vsm-pcard__chips { display: flex; flex-wrap: wrap; gap: 4px; } /* ürün sayfası (2. aşama) */ #vsm .vsm-pp { margin-top: 16px; } #vsm .vsm-pp__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; } #vsm .vsm-pp__head > div { display: grid; gap: 6px; min-width: 0; } #main_content_section #vsm .vsm-pp__head h1 { font: 400 clamp(44px, 5vw, 72px)/.9 var(--m-display); letter-spacing: .01em; text-transform: uppercase; } #vsm .vsm-pp__lead { margin: 0; max-width: 62ch; color: var(--m-ink); font-size: 16.5px; } body #main_content_section #vsm .vsm-pp__share { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; min-height: 0; margin: 0; padding: 0 12px !important; border: 1px solid var(--m-line) !important; border-radius: 4px !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: var(--m-muted) !important; font: 700 12.5px var(--m-cond) !important; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; } body #main_content_section #vsm .vsm-pp__share.is-done { border-color: var(--m-lime) !important; color: var(--m-lime) !important; } #vsm .vsm-pp__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; } #vsm .vsm-pp__main { display: grid; gap: 24px; min-width: 0; } #vsm .vsm-pp__side { position: sticky; top: 84px; display: grid; gap: 12px; max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: thin; } #vsm .vsm-pp__side .vsm-checkout { position: static; } /* galeri */ #vsm .vsm-gal { display: grid; gap: 8px; } #vsm .vsm-gal__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-sunk); } #vsm .vsm-gal__item { position: absolute; inset: 0; margin: 0; } #vsm .vsm-gal__item img, #vsm .vsm-gal__item video, #vsm .vsm-gal__item iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; } #vsm .vsm-gal__item figcaption { position: absolute; left: 10px; bottom: 10px; padding: 5px 8px; border-radius: 3px; background: rgba(11, 16, 22, .85); color: var(--m-muted); font: 700 10.5px var(--m-mono); letter-spacing: .06em; text-transform: uppercase; } body #main_content_section #vsm .vsm-gal__play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; width: 100%; height: 100%; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: linear-gradient(rgba(11, 16, 22, .45), rgba(11, 16, 22, .45)), var(--poster) center / cover !important; box-shadow: none !important; color: #fff !important; font: 700 15px var(--m-cond) !important; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } #vsm .vsm-gal__play i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--m-sun); color: var(--m-on-gold); font-size: 22px; } #vsm .vsm-gal__play small { color: #dfe5ee; font: 500 11px var(--m-mono); text-transform: none; letter-spacing: 0; } #vsm .vsm-gal__strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } body #main_content_section #vsm .vsm-gal__strip button { position: relative; aspect-ratio: 16 / 9; height: auto; min-height: 0; margin: 0; padding: 0 !important; border: 1px solid var(--m-line) !important; border-radius: 4px !important; background: var(--thumb) center / cover !important; box-shadow: none !important; cursor: pointer; opacity: .7; } body #main_content_section #vsm .vsm-gal__strip button.is-on { border: 2px solid var(--m-sun) !important; opacity: 1; } #vsm .vsm-gal__strip button.is-video::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; } /* seçenekler */ #vsm .vsm-var { display: grid; gap: 10px; } #main_content_section #vsm .vsm-var h2, #main_content_section #vsm .vsm-pp__sec h2 { font: 700 20px/1.1 var(--m-cond) !important; letter-spacing: .04em; text-transform: uppercase; } #vsm .vsm-var h2 small { margin-left: 6px; color: var(--m-faint); font: 500 12px var(--m-mono); letter-spacing: 0; text-transform: none; } #vsm .vsm-var__group { margin: 2px 0 0; color: var(--m-faint); font: 700 10.5px var(--m-mono); letter-spacing: .1em; text-transform: uppercase; } #vsm .vsm-var__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } #vsm .vsm-var__grid--img { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } #vsm .vsm-var__opt { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--m-line); border-radius: 4px; background: var(--m-raised); color: var(--m-ink); } #vsm .vsm-var__opt:hover { border-color: var(--m-strong); } #vsm .vsm-var__opt.is-on { border: 2px solid var(--m-sun); padding: 9px 11px; } #vsm .vsm-var__opt b { font: 700 15px/1.15 var(--m-cond); letter-spacing: .02em; text-transform: uppercase; } #vsm .vsm-var__opt span { color: var(--m-muted); font: 500 12px var(--m-mono); } #vsm .vsm-var__grid--img .vsm-var__opt { padding: 0 0 8px; overflow: hidden; } #vsm .vsm-var__grid--img .vsm-var__opt.is-on { padding: 0 0 7px; } #vsm .vsm-var__grid--img .vsm-var__opt b, #vsm .vsm-var__grid--img .vsm-var__opt > span:last-child { padding: 0 9px; } #vsm .vsm-var__img { display: block; aspect-ratio: 16 / 10; margin-bottom: 6px; overflow: hidden; } #vsm .vsm-var__img img { width: 100%; height: 100%; object-fit: cover; } /* bölümler */ #vsm .vsm-pp__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 20px; border-top: 1px solid var(--m-line); } #vsm .vsm-pp__sec { display: grid; gap: 10px; align-content: start; min-width: 0; } #vsm .vsm-pp__main > .vsm-pp__sec { padding-top: 20px; border-top: 1px solid var(--m-line); } #vsm .vsm-ticks { display: grid; gap: 7px; } #vsm .vsm-ticks li { position: relative; padding-left: 22px; color: var(--m-ink); font-size: 15px; line-height: 1.45; } #vsm .vsm-ticks li::before { content: "\f00c"; position: absolute; left: 0; top: 1px; color: var(--m-lime); font: 900 12px "Font Awesome 6 Free", "Font Awesome 5 Free"; } #vsm .vsm-cmds { display: grid; gap: 0; margin: 0; border: 1px solid var(--m-line); border-radius: 4px; } #vsm .vsm-cmds div { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--m-line); } #vsm .vsm-cmds div:last-child { border-bottom: 0; } #vsm .vsm-cmds dt { color: var(--m-sun); font: 700 13px var(--m-mono); } #vsm .vsm-cmds dd { margin: 0; color: var(--m-muted); font-size: 14px; } #vsm .vsm-pp__how { margin: 0; color: var(--m-muted); font-size: 14px; } #vsm .vsm-pp__how a { color: var(--m-sun); } #vsm .vsm-pp__sec--rules ul { display: grid; gap: 7px; padding: 14px 16px 14px 34px !important; border-left: 3px solid var(--m-orange); border-radius: 0 4px 4px 0; background: var(--m-raised); list-style: disc !important; } #vsm .vsm-pp__sec--rules li { color: var(--m-ink); font-size: 14.5px; } #vsm .vsm-faq { border: 1px solid var(--m-line); border-radius: 4px; background: var(--m-raised); } #vsm .vsm-faq summary { padding: 11px 14px; color: var(--m-ink); font: 600 15px var(--m-sans); cursor: pointer; } #vsm .vsm-faq p { margin: 0; padding: 0 14px 12px; color: var(--m-muted); font-size: 14.5px; } /* satın alma kutusu */ #vsm .vsm-buyhead { display: grid; gap: 8px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); } #vsm .vsm-buyhead__price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; } #vsm .vsm-buyhead__price .vsm-price { font-size: 38px; } #vsm .vsm-buyhead__price span { color: var(--m-muted); font: 700 13px var(--m-mono); text-transform: uppercase; } #vsm .vsm-buyhead p.vsm-pcard__chips { margin: 0; } #vsm .vsm-buyhead__proof { margin: 0; color: var(--m-lime); font: 500 12px var(--m-mono); } #vsm .vsm-buyhead__own { margin: 0; color: var(--m-ink); font-size: 14px; } #vsm .vsm-buyhead__own i { color: var(--m-lime); } #vsm .vsm-chip--gift { border-color: color-mix(in srgb, var(--m-pink) 55%, transparent); color: var(--m-pink); } #vsm .vsm-kv { display: grid; margin: 0; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); } #vsm .vsm-kv div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--m-line); } #vsm .vsm-kv div:last-child { border-bottom: 0; } #vsm .vsm-kv dt { color: var(--m-faint); font: 500 12px var(--m-mono); } #vsm .vsm-kv dd { margin: 0; color: var(--m-ink); font-size: 14px; text-align: right; } #vsm .vsm-kv code { color: var(--m-sun); font: 700 13px var(--m-mono); background: none; border: 0; } #vsm .vsm-sticky { display: none; } /* vP kasası başlığı: süsü küçült */ #vsm .vsm-hero--cashier { min-height: 0; padding: 26px 28px; } #vsm .vsm-hero--cashier .vsm-neon { font-size: clamp(44px, 5vw, 72px); } /* alt bilgi */ #vsm .vsm-foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 22px; margin-top: 38px; padding-top: 18px; } #vsm .vsm-foot ul { display: grid; gap: 4px; } #vsm .vsm-foot li { color: var(--m-faint); font-size: 13px; } #vsm .vsm-foot li b { color: var(--m-muted); } @media (max-width: 1180px) { #vsm .vsm-mbar { grid-template-columns: auto minmax(0, 1fr) auto; } #vsm .vsm-mbar__find { grid-column: 1 / -1; grid-row: 2; } #vsm .vsm-stores { grid-template-columns: repeat(3, minmax(0, 1fr)); } #vsm .vsm-feat { grid-template-columns: minmax(0, 1fr) 290px; } #vsm .vsm-lists { grid-template-columns: minmax(0, 1fr) 320px; } #vsm .vsm-pgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { #vsm .vsm-mbar { grid-template-columns: auto minmax(0, 1fr); } #vsm .vsm-mbar__acts { justify-content: flex-end; } #vsm .vsm-mbar__link span { display: none; } #vsm .vsm-mbar__nav { grid-column: 1 / -1; grid-row: 3; margin: 0 calc(-1 * clamp(16px, 2.6vw, 34px)); padding: 0 clamp(16px, 2.6vw, 34px); } #vsm .vsm-mbar__nav a { padding: 9px 12px; border: 1px solid var(--m-line); border-radius: 3px; } #vsm .vsm-mbar__nav a.is-on { border-color: var(--m-sun); box-shadow: none; } #vsm .vsm-mbar__nav { gap: 6px; } /* öne çıkanlar: yatay kaydırılan kartlar */ #vsm .vsm-feat { grid-template-columns: minmax(0, 1fr); } #vsm .vsm-feat__list { display: none; } #vsm .vsm-feat__stage { display: flex; align-items: flex-start; gap: 10px; min-height: 0; overflow-x: auto; scroll-snap-type: x mandatory; border: 0; border-radius: 0; background: none; scrollbar-width: none; } #vsm .vsm-feat__stage::-webkit-scrollbar { display: none; } #vsm .vsm-feat__slide, #vsm .vsm-feat__slide.is-on { position: relative; display: flex; flex-direction: column; flex: 0 0 86%; scroll-snap-align: start; overflow: hidden; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); } #vsm .vsm-feat__art { position: relative; display: block; aspect-ratio: 16 / 9; } #vsm .vsm-feat__art::after { display: none; } #vsm .vsm-feat__copy { position: static; width: auto; gap: 8px; padding: 12px 14px 14px; } #main_content_section #vsm .vsm-feat__copy h2 { font-size: 36px; } #vsm .vsm-feat__copy li { font-size: 14px; text-shadow: none; } #vsm .vsm-feat__copy li:nth-child(n+3) { display: none; } #vsm .vsm-feat__row { margin-top: 4px; } #vsm .vsm-feat__row .vsm-price { font-size: 24px; } #vsm .vsm-feat__row .vsm-btn--line { display: none; } #vsm .vsm-lists { grid-template-columns: minmax(0, 1fr); } #vsm .vsm-pre { display: none; } #vsm .vsm-tiers { grid-template-columns: minmax(0, 1fr); } #vsm .vsm-tier { grid-template-columns: 140px minmax(0, 1fr); grid-template-rows: none; } #vsm .vsm-tier__art { height: auto; } #vsm .vsm-tier__hl { display: none; } #vsm .vsm-gwall { grid-template-columns: repeat(2, minmax(0, 1fr)); } #vsm .vsm-browse { grid-template-columns: minmax(0, 1fr); gap: 12px; } #vsm .vsm-filters { position: static; } #vsm .vsm-filters__body { grid-template-columns: repeat(2, minmax(0, 1fr)); } #vsm .vsm-pp__grid { grid-template-columns: minmax(0, 1fr); } #vsm .vsm-pp__side { position: static; max-height: none; overflow: visible; } #vsm .vsm-pp__cols { grid-template-columns: minmax(0, 1fr); } #vsm .vsm-pp__head { flex-direction: column; align-items: flex-start; } #vsm .vsm-gal { margin-inline: calc(-1 * clamp(16px, 2.6vw, 34px)); } #vsm .vsm-gal__stage { border-radius: 0; border-inline: 0; } #vsm .vsm-gal__strip { grid-template-columns: repeat(6, 72px); overflow-x: auto; padding-inline: clamp(16px, 2.6vw, 34px); } #vsm .vsm-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--m-sun); background: var(--m-raised2); transition: transform .2s ease; } #vsm .vsm-sticky.is-off { transform: translateY(110%); } #vsm .vsm-sticky > span { display: grid; gap: 2px; } #vsm .vsm-sticky small { color: var(--m-muted); font: 500 11px var(--m-mono); } #vsm .vsm-sticky .vsm-btn { margin-left: auto; min-height: 44px; } #vsm .vsm-pp { padding-bottom: 70px; } #vsm .vsm-foot { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { #vsm .vsm-mbar { margin-inline: -16px; padding-inline: 16px; } #vsm .vsm-mbar__nav { margin-inline: -16px; padding-inline: 16px; } #main_content_section #vsm .vsm-mbar__word { font-size: 26px !important; } #vsm .vsm-mbar__acts .vsm-mbar__link { display: none; } #vsm .vsm-stores { grid-template-columns: repeat(2, minmax(0, 1fr)); } #vsm .vsm-lrow { grid-template-columns: 104px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; } #vsm .vsm-lrow__art { height: 58px; } #vsm .vsm-lrow__body strong { font-size: 15px; } #vsm .vsm-lrow .vsm-price { font-size: 17px; } #vsm .vsm-lrow .vsm-chip:nth-child(n+2) { display: none; } #vsm .vsm-tier { grid-template-columns: 110px minmax(0, 1fr); } #vsm .vsm-tier__body strong { font-size: 28px; } #vsm .vsm-shead { min-height: 150px; padding: 18px; } #vsm .vsm-pgrid, #vsm .vsm-pgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #vsm .vsm-pcard__body small { display: none; } #vsm .vsm-pcard__body strong { font-size: 15px; } #vsm .vsm-pcard__foot { flex-direction: column; align-items: flex-start; } #vsm .vsm-pcard .vsm-chip--ok, #vsm .vsm-pcard .vsm-chip--slow { display: none; } #vsm .vsm-gwall { grid-template-columns: minmax(0, 1fr); } #vsm .vsm-filters__body { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { #vsm .vsm-pcard, #vsm .vsm-pcard__art img { transition: none; } #vsm .vsm-feat.is-playing .vsm-feat__item.is-on .vsm-feat__bar { animation: none; width: 100%; } } /* yönetim: galeri satırları */ #vsm .vsm-amedia { display: grid; gap: 8px; margin-bottom: 10px; } #vsm .vsm-amedia__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 70px auto; gap: 10px; align-items: center; } #vsm .vsm-amedia__thumb { display: grid; place-items: center; aspect-ratio: 16 / 9; border: 1px solid var(--m-line); border-radius: 4px; background: var(--m-sunk) center / cover; color: var(--m-sun); } @media (max-width: 560px) { #vsm .vsm-amedia__row { grid-template-columns: 72px minmax(0, 1fr); } } /* ==================== Vice Mall 2 · 3. aşama: üyelik karşılaştırması, Ürünlerim ==================== */ #vsm .vsm-btn--sm { min-height: 32px; padding: 0 12px !important; font-size: 12.5px !important; } #vsm .vsm-flag--own { background: var(--m-lime); color: #0f2119; } #vsm .vsm-mbar__link.is-on { color: var(--m-ink); border-color: var(--m-sun); } #vsm .vsm-tmeta { margin: 0; max-width: 80ch; color: var(--m-muted); font-size: 14.5px; } #vsm .vsm-yes { color: var(--m-lime); } #vsm .vsm-no { color: var(--m-faint); } #vsm .vsm-cmpwrap { margin-top: 18px; overflow-x: auto; border: 1px solid var(--m-line); border-radius: 6px; } #vsm .vsm-cmp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; } #vsm .vsm-cmp th, #vsm .vsm-cmp td { padding: 9px 12px; border-bottom: 1px solid var(--m-line); text-align: center; vertical-align: middle; } #vsm .vsm-cmp tbody th { text-align: left; font-weight: 600; color: var(--m-ink); } #vsm .vsm-cmp tbody th small { display: block; color: var(--m-faint); font: 500 11.5px var(--m-sans); } #vsm .vsm-cmp thead th { position: sticky; top: 0; z-index: 1; background: var(--m-raised); vertical-align: top; } #vsm .vsm-cmp thead th > * { display: block; margin: 0 auto 5px; } #vsm .vsm-cmp thead th.vsm-cmp__me { text-align: left; width: 28%; } #vsm .vsm-cmp thead th.vsm-cmp__me > * { margin-left: 0; } #vsm .vsm-cmp thead th.vsm-cmp__me b { font: 700 20px/1.1 var(--m-cond); text-transform: uppercase; } #vsm .vsm-cmp thead small { color: var(--m-faint); font: 500 11.5px var(--m-mono); } #vsm .vsm-cmp__name { font: 400 30px/1 var(--m-display); letter-spacing: .02em; } #vsm .vsm-cmp thead .vsm-chip { display: inline-flex; } #vsm .vsm-cmp .is-rec { background: rgba(231, 203, 137, .06); } #vsm .vsm-cmp thead .is-rec { box-shadow: inset 0 3px 0 var(--m-sun); } #vsm .vsm-cmp .is-mine { background: rgba(131, 201, 172, .07); } #vsm .vsm-cmp thead .is-mine { box-shadow: inset 0 3px 0 var(--m-lime); } #vsm .vsm-cmp__grp th { padding-top: 16px; background: var(--m-bg); color: var(--m-sun) !important; font: 700 11px var(--m-mono) !important; letter-spacing: .1em; text-transform: uppercase; text-align: left !important; } #vsm .vsm-tswitch { display: none; gap: 6px; margin-top: 16px; } body #main_content_section #vsm .vsm-tswitch button { flex: 1; min-height: 40px; margin: 0; padding: 0 !important; border: 1px solid var(--m-line) !important; border-radius: 4px !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: var(--m-muted) !important; font: 700 14px var(--m-cond) !important; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; } body #main_content_section #vsm .vsm-tswitch button.is-on { border-color: var(--m-sun) !important; color: var(--m-ink) !important; background: var(--m-raised2) !important; } @media (max-width: 760px) { #vsm .vsm-tswitch:not([hidden]) { display: flex; } #vsm .vsm-cmp[data-lv] { min-width: 0; } #vsm .vsm-cmp[data-lv="1"] .lv2, #vsm .vsm-cmp[data-lv="1"] .lv3, #vsm .vsm-cmp[data-lv="2"] .lv1, #vsm .vsm-cmp[data-lv="2"] .lv3, #vsm .vsm-cmp[data-lv="3"] .lv1, #vsm .vsm-cmp[data-lv="3"] .lv2 { display: none; } #vsm .vsm-cmp[data-lv] thead th.vsm-cmp__me { width: 40%; } #vsm .vsm-cmp__grp th { position: static; } } /* Ürünlerim */ #vsm .vsm-lib { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; margin-top: 20px; align-items: start; } #vsm .vsm-lib__side { display: grid; gap: 12px; } #vsm .vsm-memb { overflow: hidden; border: 1px solid var(--m-sun); border-radius: 6px; background: var(--m-raised); } #vsm .vsm-memb.is-none { border-color: var(--m-line); } #vsm .vsm-memb__art { display: block; height: 120px; overflow: hidden; } #vsm .vsm-memb__art img { width: 100%; height: 100%; object-fit: cover; } #vsm .vsm-memb__body { display: grid; gap: 7px; padding: 14px 16px 16px; } #vsm .vsm-memb__name { font: 400 40px/1 var(--m-display); letter-spacing: .02em; text-transform: uppercase; } #vsm .vsm-memb__body small { color: var(--m-muted); font-size: 13.5px; } #vsm .vsm-memb__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } #vsm .vsm-meter { display: block; height: 6px; overflow: hidden; border: 1px solid var(--m-line); border-radius: 3px; background: var(--m-sunk); } #vsm .vsm-meter i { display: block; height: 100%; background: var(--m-lime); } #vsm .vsm-lib__box { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); } #vsm .vsm-pets, #vsm .vsm-glist { display: grid; gap: 8px; } #vsm .vsm-pets li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; } #vsm .vsm-pets img { width: 64px; height: 40px; border-radius: 3px; object-fit: cover; } #vsm .vsm-pets b, #vsm .vsm-glist b { display: block; font: 700 15px/1.2 var(--m-cond); text-transform: uppercase; } #vsm .vsm-pets small, #vsm .vsm-glist small { color: var(--m-muted); font-size: 12.5px; } #vsm .vsm-glist a { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; color: var(--m-ink); } #vsm .vsm-glist i { margin-top: 3px; color: var(--m-pink); } #vsm .vsm-rights { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } #vsm .vsm-right { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); color: var(--m-ink); } #vsm .vsm-right:hover { border-color: var(--m-strong); } #vsm .vsm-right b { font: 400 40px/1 var(--m-display); color: var(--m-lime); } #vsm .vsm-right.is-zero b { color: var(--m-faint); } #vsm .vsm-right span { font: 700 14.5px/1.2 var(--m-cond); text-transform: uppercase; letter-spacing: .02em; } #vsm .vsm-right small { color: var(--m-sun); font: 500 11.5px var(--m-mono); } #vsm .vsm-ofeats { display: flex; flex-wrap: wrap; gap: 8px; } #vsm .vsm-ofeat { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px dashed var(--m-strong); border-radius: 4px; color: var(--m-muted); font: 600 14.5px var(--m-cond); text-transform: uppercase; letter-spacing: .02em; } #vsm .vsm-ofeat.is-on { border-style: solid; border-color: var(--m-line); background: var(--m-raised); color: var(--m-ink); } #vsm .vsm-ofeat.is-on i { color: var(--m-lime); } #vsm .vsm-ofeat small { color: var(--m-sun); font: 500 11px var(--m-mono); text-transform: none; } #vsm .vsm-tw { overflow-x: auto; border: 1px solid var(--m-line); border-radius: 6px; } #vsm .vsm-otable { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; } #vsm .vsm-otable th, #vsm .vsm-otable td { padding: 9px 12px; border-bottom: 1px solid var(--m-line); text-align: left; vertical-align: top; } #vsm .vsm-otable th { background: var(--m-sunk); color: var(--m-faint); font: 700 11px var(--m-mono); letter-spacing: .08em; text-transform: uppercase; } #vsm .vsm-otable td small { display: block; color: var(--m-muted); font-size: 12.5px; } body #main_content_section #vsm .vsm-ttable { width: 100%; min-width: 1180px; table-layout: fixed; } body #main_content_section #vsm .vsm-ttable th, body #main_content_section #vsm .vsm-ttable td { padding: 4px !important; } body #main_content_section #vsm .vsm-ttable input:not([type="checkbox"]) { box-sizing: border-box; width: 100% !important; min-width: 0 !important; height: 32px; padding: 0 6px !important; font-size: 13px !important; } body #main_content_section #vsm .vsm-ttable th:nth-child(1) { width: 64px; } body #main_content_section #vsm .vsm-ttable th:nth-child(2) { width: 120px; } body #main_content_section #vsm .vsm-ttable th:nth-child(3) { width: 240px; } body #main_content_section #vsm .vsm-ttable th:nth-child(8) { width: 220px; } body #main_content_section #vsm .vsm-ttable th:nth-child(9) { width: 44px; } body #main_content_section #vsm .vsm-ttable tr.is-new input { border-style: dashed !important; } @media (max-width: 900px) { #vsm .vsm-lib { grid-template-columns: minmax(0, 1fr); } } /* sitenin genel tablo kuralları (mavi başlık, büyük harf) bu tablolarda geçersiz */ body #main_content_section #vsm .vsm-cmp th, body #main_content_section #vsm .vsm-cmp td, body #main_content_section #vsm .vsm-otable td { background: transparent !important; background-image: none !important; color: var(--m-ink) !important; text-transform: none !important; letter-spacing: normal !important; border-color: var(--m-line) !important; } body #main_content_section #vsm .vsm-cmp thead th { background: var(--m-raised) !important; } body #main_content_section #vsm .vsm-cmp tbody th { font: 600 14.5px/1.35 var(--m-sans) !important; } body #main_content_section #vsm .vsm-cmp tbody th small { color: var(--m-faint) !important; font: 500 12px/1.3 var(--m-sans) !important; } body #main_content_section #vsm .vsm-cmp .is-rec { background: rgba(231, 203, 137, .06) !important; } body #main_content_section #vsm .vsm-cmp .is-mine { background: rgba(131, 201, 172, .07) !important; } body #main_content_section #vsm .vsm-cmp__grp th { background: var(--m-bg) !important; color: var(--m-sun) !important; font: 700 11px var(--m-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; } body #main_content_section #vsm .vsm-cmp thead small, body #main_content_section #vsm .vsm-cmp thead .vsm-kick { text-transform: uppercase !important; } body #main_content_section #vsm .vsm-otable th { background: var(--m-sunk) !important; color: var(--m-faint) !important; } @media (max-width: 760px) { #vsm .vsm-cmp__name { font-size: 24px; white-space: nowrap; } #vsm .vsm-cmp th, #vsm .vsm-cmp td { padding: 8px 8px; } #vsm .vsm-cmp thead th.lv0 small { display: none; } #vsm .vsm-cmp[data-lv] thead th.vsm-cmp__me { width: 38%; } #vsm .vsm-cmp[data-lv] th.lv0, #vsm .vsm-cmp[data-lv] td.lv0 { width: 22%; } } /* ==================== Vice Mall 2 · 4. aşama: istek listesi, senin için, son baktıkların ==================== */ #vsm .vsm-pcw { position: relative; display: flex; min-width: 0; } #vsm .vsm-pcw > .vsm-pcard { flex: 1; min-width: 0; } body #main_content_section #vsm .vsm-heart { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0 !important; border: 1px solid rgba(255, 255, 255, .25) !important; border-radius: 50% !important; background: rgba(11, 16, 22, .78) !important; background-image: none !important; box-shadow: none !important; color: #fff !important; font-size: 15px; cursor: pointer; transition: transform .15s ease; } body #main_content_section #vsm .vsm-heart:hover { transform: scale(1.08); } body #main_content_section #vsm .vsm-heart.is-on { border-color: var(--m-pink) !important; color: var(--m-pink) !important; } body #main_content_section #vsm .vsm-heart.is-busy { opacity: .5; } body #main_content_section #vsm .vsm-heart--big { position: static; display: inline-flex; gap: 7px; width: auto; height: 34px; padding: 0 12px !important; border-radius: 4px !important; border-color: var(--m-line) !important; background: transparent !important; color: var(--m-muted) !important; font: 700 12.5px var(--m-cond) !important; letter-spacing: .05em; text-transform: uppercase; } #vsm .vsm-pp__acts { display: flex; flex: none; flex-wrap: wrap; gap: 8px; } #vsm .vsm-mbar__link em { min-width: 18px; padding: 1px 5px; border-radius: 3px; background: var(--m-raised2); color: var(--m-pink); font: 700 11px var(--m-mono); font-style: normal; text-align: center; } #vsm .vsm-fy { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } #vsm .vsm-fy__card { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 100px; overflow: hidden; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); color: var(--m-ink); } #vsm .vsm-fy__card:hover { border-color: var(--m-strong); } #vsm .vsm-fy__art { position: relative; display: block; overflow: hidden; } #vsm .vsm-fy__art img { width: 100%; height: 100%; object-fit: cover; } #vsm .vsm-fy__art .vsm-emb { left: 6px; bottom: 6px; width: 24px; height: 24px; font-size: 11px; } #vsm .vsm-fy__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; min-width: 0; } #vsm .vsm-fy__why { color: var(--m-blue); font: 700 10.5px/1.3 var(--m-mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; } #vsm .vsm-fy__why--warn { color: var(--m-orange); } #vsm .vsm-fy__why--pink { color: var(--m-pink); } #vsm .vsm-fy__why--ok { color: var(--m-lime); } #vsm .vsm-fy__why--gold { color: var(--m-sun); } #vsm .vsm-fy__body strong { font: 700 16px/1.15 var(--m-cond); letter-spacing: .02em; text-transform: uppercase; } #vsm .vsm-fy__body .vsm-price { margin-top: auto; font-size: 18px; } #vsm .vsm-recent__row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } #vsm .vsm-recent__item { flex: 0 0 180px; overflow: hidden; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); color: var(--m-ink); } #vsm .vsm-recent__item img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } #vsm .vsm-recent__item span { display: grid; gap: 2px; padding: 8px 10px; } #vsm .vsm-recent__item b { font: 700 14px/1.15 var(--m-cond); text-transform: uppercase; } #vsm .vsm-recent__item small { color: var(--m-muted); font: 500 11.5px var(--m-mono); } body #main_content_section #vsm .vsm-linkbtn { margin: 0 0 0 auto; padding: 0 !important; min-height: 0; border: 0 !important; background: none !important; background-image: none !important; box-shadow: none !important; color: var(--m-sun) !important; font: 700 13px var(--m-cond) !important; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } #vsm .vsm-arow__perf { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--m-faint); font: 500 11px var(--m-mono); } #vsm .vsm-arow__perf b { color: var(--m-ink); } @media (max-width: 560px) { #vsm .vsm-fy { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } #vsm .vsm-fy__card { flex: 0 0 82%; scroll-snap-align: start; grid-template-columns: 92px minmax(0, 1fr); } body #main_content_section #vsm .vsm-heart:not(.vsm-heart--big) { width: 30px; height: 30px; top: 6px; right: 6px; font-size: 13px; } } #vsm .vsm-arow__body .vsm-arow__perf { margin-top: 3px; } #vsm .vsm-pcw .vsm-pcard__flags { right: 48px; flex-wrap: wrap; } body #main_content_section #vsm .vsm-heart--big { white-space: nowrap; } /* ==================== Vice Mall 2 · 5. aşama: kampanyalar ==================== */ #vsm .vsm-price del { margin-right: 6px; color: var(--m-faint); font: 500 .62em var(--m-cond); text-decoration-thickness: 1px; } #vsm .vsm-price.is-sale { color: var(--m-pink); } #vsm .vsm-flag--sale { background: var(--m-pink); color: #1a0d14; } #vsm .vsm-left { font-variant-numeric: tabular-nums; } #vsm .vsm-buyhead__sale { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--m-muted); font-size: 13px; } #vsm .vsm-buyhead__sale a { color: var(--m-pink); font-weight: 600; } #vsm .vsm-buyhead__ref { margin: 0; color: var(--m-faint); font-size: 12px; } #vsm .vsm-feat__left { color: var(--m-pink); font: 700 15px var(--m-cond); letter-spacing: .04em; text-transform: uppercase; } #vsm .vsm-deal { display: grid; grid-template-columns: 300px minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 22px; padding: 12px; border: 1px solid var(--m-pink); border-radius: 6px; background: linear-gradient(90deg, rgba(244, 154, 193, .08), var(--m-raised) 60%); } #vsm .vsm-deal__art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; } #vsm .vsm-deal__art img { width: 100%; height: 100%; object-fit: cover; } #vsm .vsm-deal__body { display: grid; gap: 6px; min-width: 0; } #vsm .vsm-deal__body .vsm-kick { color: var(--m-pink); } #main_content_section #vsm .vsm-deal__body h2 { font: 400 38px/.95 var(--m-display); text-transform: uppercase; } #main_content_section #vsm .vsm-deal__body h2 a { color: var(--m-ink); } #vsm .vsm-deal__body p:last-child { margin: 0; color: var(--m-muted); } #vsm .vsm-deal__buy { display: grid; justify-items: end; gap: 8px; padding-right: 8px; } #vsm .vsm-deal__buy .vsm-price { font-size: 30px; } #vsm .vsm-chead { min-height: 240px; } #vsm .vsm-chead .vsm-kick { color: var(--m-pink); } #vsm .vsm-chead__time { color: var(--m-ink) !important; font: 700 15px var(--m-cond) !important; letter-spacing: .04em; text-transform: uppercase; } #vsm .vsm-cbody { margin-top: 16px; max-width: 80ch; color: var(--m-ink); font-size: 15.5px; } /* yönetim: takvim, kapsam, vitrin */ #vsm .vsm-ctl { position: relative; padding: 26px 10px 10px; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); } #vsm .vsm-ctl__days { position: absolute; left: 10px; right: 10px; top: 6px; height: 16px; } #vsm .vsm-ctl__days span { position: absolute; color: var(--m-faint); font: 500 10.5px var(--m-mono); } #vsm .vsm-ctl__lane { position: relative; height: 32px; margin: 4px 0; } #vsm .vsm-ctl__bar { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; padding: 0 8px; border-radius: 3px; background: var(--m-pink); color: #1a0d14; font: 700 12.5px var(--m-cond); white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; } #vsm .vsm-ctl__bar.is-deal { background: var(--m-sun); color: var(--m-on-gold); } #vsm .vsm-ctl__bar.is-off { background: var(--m-strong); color: var(--m-ink); } #vsm .vsm-ctl__now { position: absolute; top: 20px; bottom: 6px; border-left: 2px solid var(--m-lime); } #vsm .vsm-cprods { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; max-height: 360px; overflow-y: auto; padding: 4px; border: 1px solid var(--m-line); border-radius: 4px; } #vsm .vsm-cprods label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: center; font-size: 13.5px; cursor: pointer; } #vsm .vsm-cprods small { grid-column: 2; color: var(--m-faint); font: 500 11px var(--m-mono); } #vsm .vsm-cprods .is-excl span { color: var(--m-orange); } #vsm .vsm-vrows { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 14px; } #vsm .vsm-vrow { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); } #vsm .vsm-vrow.is-new { border-style: dashed; } #vsm .vsm-vrow .vsm-arow2:last-child { grid-template-columns: minmax(0, 1fr); gap: 8px; } body #main_content_section #vsm .vsm-afield input[type="datetime-local"] { min-width: 0 !important; width: 100% !important; box-sizing: border-box; } @media (max-width: 560px) { #vsm .vsm-ctl__days span:nth-child(even) { display: none; } } @media (max-width: 900px) { #vsm .vsm-deal { grid-template-columns: minmax(0, 1fr); } #vsm .vsm-deal__buy { justify-items: start; grid-auto-flow: column; align-items: center; padding: 0; } } /* ---------- Vice Mall 2 · 6. aşama: setler ---------- */ #vsm .vsm-bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } #vsm .vsm-bcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); color: var(--m-ink); transition: border-color .2s ease, transform .2s ease; } #vsm .vsm-bcard:hover { border-color: var(--m-violet); transform: translateY(-2px); } #vsm .vsm-bcard__art { position: relative; display: block; aspect-ratio: 16 / 8; overflow: hidden; background: var(--m-sunk); } #vsm .vsm-bart { position: absolute; inset: 0; display: grid; gap: 2px; background: var(--m-sunk); } #vsm .vsm-bart > span { position: relative; overflow: hidden; } #vsm .vsm-bart img { width: 100%; height: 100%; object-fit: cover; } #vsm .vsm-bart .vsm-emb { left: 8px; bottom: 8px; width: 28px; height: 28px; font-size: 13px; } #vsm .vsm-bart--2 { grid-template-columns: 1fr 1fr; } #vsm .vsm-bart--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } #vsm .vsm-bart--3 > span:first-child { grid-row: span 2; } #vsm .vsm-bart--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } #vsm .vsm-bcard__body { display: grid; gap: 6px; padding: 14px 16px 10px; } #vsm .vsm-bcard__body strong { font: 700 21px/1.05 var(--m-cond); letter-spacing: .02em; text-transform: uppercase; } #vsm .vsm-bcard__items { display: flex; flex-wrap: wrap; gap: 4px 6px; } #vsm .vsm-bcard__items span { padding: 2px 7px; border: 1px solid var(--m-line); border-radius: 3px; color: var(--m-muted); font-size: 12.5px; } #vsm .vsm-bcard__items span.is-own { border-style: dashed; color: var(--m-lime); text-decoration: line-through; text-decoration-color: rgba(131, 201, 172, .6); } #vsm .vsm-bcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding: 10px 16px 14px; border-top: 1px solid var(--m-line); } #vsm .vsm-bprice { display: grid; justify-items: end; gap: 2px; } #vsm .vsm-bprice small { color: var(--m-faint); font: 500 12px var(--m-mono); } #vsm .vsm-bhead { min-height: 230px; } #vsm .vsm-bhead > .vsm-bart { z-index: -2; } #vsm .vsm-bhead > .vsm-bart--banner img { object-position: center 45%; } #vsm .vsm-bpage { margin-top: 20px; } body #main_content_section #vsm ul.vsm-blist { display: grid; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none !important; } body #main_content_section #vsm .vsm-blist li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 0 !important; padding: 8px !important; border: 1px solid var(--m-line); border-radius: 6px; background: var(--m-raised); list-style: none !important; } #vsm .vsm-blist li.is-own { opacity: .7; border-style: dashed; } #vsm .vsm-blist__art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--m-sunk); } #vsm .vsm-blist__art img { width: 100%; height: 100%; object-fit: cover; } #vsm .vsm-blist__art .vsm-emb { left: 6px; bottom: 6px; width: 24px; height: 24px; font-size: 11px; } #vsm .vsm-blist__body { display: grid; gap: 3px; min-width: 0; } #vsm .vsm-blist__body a { color: var(--m-ink); } #vsm .vsm-blist__body b { font: 700 17px/1.1 var(--m-cond); letter-spacing: .02em; text-transform: uppercase; } #vsm .vsm-blist__body small { color: var(--m-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #vsm .vsm-blist__price { color: var(--m-ink); font: 600 14px var(--m-mono); white-space: nowrap; } #vsm .vsm-cprods--set label { grid-template-columns: auto minmax(0, 1fr) 48px; } #vsm .vsm-cprods--set label small { grid-column: 2 / 4; } body #main_content_section #vsm .vsm-cprods--set input[type="number"] { width: 48px !important; min-width: 0 !important; padding: 2px 4px !important; font-size: 12px !important; } #vsm .vsm-cprods label.is-excl { opacity: .55; cursor: not-allowed; } @media (max-width: 560px) { #vsm .vsm-bgrid { grid-template-columns: minmax(0, 1fr); } body #main_content_section #vsm .vsm-blist li { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; } #vsm .vsm-blist__price { grid-column: 2; } #vsm .vsm-bhead { min-height: 200px; } } /* ---------- Vice Mall 2 · 7. aşama: dokunma alanı, koyu zemin notları, ölçüm ---------- */ /* Fiş dışında (koyu zemin) bilgi notları: açık renk yazı. Fişin içindeki kurallar (.vsm-receipt) önceliklidir. */ #vsm .vsm-pp__main .vsm-note--info, #vsm .vsm-pp__main .vsm-note--info span { color: #c9fbff; } #vsm .vsm-pp__main .vsm-note--warn, #vsm .vsm-pp__main .vsm-note--warn span { color: #ffd9bd; } #vsm .vsm-pp__main .vsm-note--err, #vsm .vsm-pp__main .vsm-note--err span { color: #ffc4dc; } #vsm .vsm-pp__main .vsm-note a { color: var(--m-sun); text-decoration: underline; } #vsm .vsm-admin__sub { margin: 22px 0 10px; font: 700 18px var(--m-cond); letter-spacing: .04em; text-transform: uppercase; } #vsm .vsm-ofilter__days { display: flex; gap: 6px; margin-left: auto; } /* Telefon ve tablet: dokunulan her şey en az 44 px (WCAG 2.5.5). Satır içi metin bağlantıları hariç. */ @media (max-width: 900px), (pointer: coarse) { #vsm .vsm-mbar__nav a, #vsm .vsm-ltabs a { display: inline-flex; align-items: center; min-height: 44px; } body #main_content_section #vsm .vsm-mbar__find input { height: 44px; } body #main_content_section #vsm .vsm-mbar__find button { top: 0; right: 0; width: 44px; height: 44px; } #vsm .vsm-mbar__word { display: inline-flex; align-items: center; min-height: 44px; } #vsm .vsm-btn, #vsm .vsm-btn--sm { min-height: 44px; } #vsm .vsm-sec__head > a, #vsm .vsm-lmore, body #main_content_section #vsm .vsm-linkbtn { display: inline-flex; align-items: center; min-height: 44px; } #vsm .vsm-crumb a { display: inline-flex; align-items: center; min-height: 44px; } #vsm .vsm-fgroup a { display: inline-flex; align-items: center; min-height: 44px; } #vsm .vsm-fgroup summary, #vsm .vsm-faq summary, #vsm details > summary { min-height: 44px; display: flex; align-items: center; } #vsm .vsm-ofeat { min-height: 44px; } /* görünür kalp küçük kalır (kartın görselini kapatmasın); dokunma alanı ::after ile 44 px */ body #main_content_section #vsm .vsm-heart:not(.vsm-heart--big) { width: 32px; height: 32px; } body #main_content_section #vsm .vsm-heart:not(.vsm-heart--big)::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; } body #main_content_section #vsm .vsm-heart--big, body #main_content_section #vsm .vsm-pp__share { min-height: 44px; height: auto; } body #main_content_section #vsm .vsm-tswitch button { min-height: 44px; } #vsm nav[aria-label="Sıralama"] a { display: inline-flex; align-items: center; min-height: 44px; } #vsm .vsm-mbar__wallet, #vsm .vsm-mbar__wallet a, #vsm a.vsm-mbar__wallet--in { min-height: 44px; } #vsm .vsm-blist__body a { display: inline-block; padding: 6px 0; } #vsm .vsm-chip[href] { display: inline-flex; align-items: center; min-height: 44px; } #vsm .vsm-gal__strip button { min-width: 44px; min-height: 44px; } } html:root body.vx-kimlik #vsm#vsm.vsm .vsm-mbar{grid-template-columns:auto minmax(0,1fr) minmax(180px,260px) auto;grid-template-areas:"word nav find acts";gap:12px} html:root body.vx-kimlik #vsm#vsm.vsm.vsm--atrium .vsm-mbar{grid-template-columns:minmax(0,1fr) minmax(180px,260px) auto;grid-template-areas:"nav find acts"} html:root body.vx-kimlik #vsm#vsm.vsm .vsm-mbar__word{grid-area:word} html:root body.vx-kimlik #vsm#vsm.vsm .vsm-mbar__nav{grid-area:nav;min-width:0;margin:0!important;padding:0!important;mask-image:none!important;-webkit-mask-image:none!important} html:root body.vx-kimlik #vsm#vsm.vsm .vsm-mbar__find{grid-area:find;min-width:0} html:root body.vx-kimlik #vsm#vsm.vsm .vsm-mbar__acts{grid-area:acts;min-width:0;gap:8px} html:root body.vx-kimlik #vsm#vsm.vsm .vsm-mbar__acts>*{flex-shrink:0} html:root body.vx-kimlik #vsm#vsm.vsm .vsm-mbar__wallet{order:-1;white-space:nowrap;border-color:var(--m-sun)!important} html:root body.vx-kimlik #vsm#vsm.vsm .vsm-mbar__wallet a{min-width:108px;justify-content:center;padding:0 16px;font-size:15px!important;letter-spacing:.04em!important} @media(max-width:1180px){ html:root body.vx-kimlik #vsm#vsm.vsm .vsm-mbar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"word nav acts" "find find find"} html:root body.vx-kimlik #vsm#vsm.vsm.vsm--atrium .vsm-mbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nav acts" "find find"} } @media(max-width:900px){ html:root body.vx-kimlik #vsm#vsm.vsm .vsm-mbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"word acts" "find find" "nav nav"} html:root body.vx-kimlik #vsm#vsm.vsm.vsm--atrium .vsm-mbar{grid-template-columns:minmax(0,1fr);grid-template-areas:"acts" "find" "nav"} html:root body.vx-kimlik #vsm#vsm.vsm.vsm--atrium .vsm-mbar__acts{justify-content:space-between} } @media(max-width:560px){ html:root body.vx-kimlik #vsm#vsm.vsm .vsm-mbar{grid-template-columns:minmax(0,1fr);grid-template-areas:"acts" "find" "nav"} html:root body.vx-kimlik #vsm#vsm.vsm .vsm-mbar__word{display:none!important} html:root body.vx-kimlik #vsm#vsm.vsm .vsm-mbar__acts{justify-content:flex-start} }