.vk {
position: relative;
isolation: isolate;
display: grid;
min-width: 0;
border-radius: 26px;
background: #0f0f11;
color: #f5f5f7;
text-decoration: none;
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .06),
0 24px 60px -24px rgba(15, 17, 23, .45);
transition: box-shadow .35s ease;
}
:root[data-tema="koyu"] .vk {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
a.vk:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 28px 70px -24px rgba(15, 17, 23, .5); }
:root[data-tema="koyu"] a.vk:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.vk:focus-visible { outline: 2px solid var(--tm-yazi); outline-offset: 4px; }
.vk-gorsel {
position: relative;
display: block;
aspect-ratio: 3 / 2;
min-width: 0;
}
.vk-gorsel > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.vk-gorsel > .vk-isik {
position: absolute;
inset: -6% -6% -10%;
width: 112%;
height: 116%;
z-index: 0;
filter: blur(56px) saturate(1.6);
opacity: .72;
pointer-events: none;
will-change: opacity;
transition: opacity .5s ease;
}
.vk-gorsel > .vk-resim {
position: relative;
z-index: 1;
border-radius: 16px;
box-shadow:
0 0 0 1px rgba(255, 255, 255, .10),
0 18px 40px rgba(0, 0, 0, .45);
transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.vk-gorsel > video {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px;
opacity: 0;
pointer-events: none;
transition: opacity .28s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
a.vk:hover .vk-isik,
a.vk:focus-visible .vk-isik { opacity: .95; }
a.vk:hover .vk-resim,
a.vk:hover .vk-gorsel > video,
a.vk:focus-visible .vk-resim,
a.vk:focus-visible .vk-gorsel > video { transform: scale(1.025); }
a.vk:hover .vk-gorsel > video,
a.vk:focus-visible .vk-gorsel > video { opacity: 1; }
.vk-gorsel--adli {
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background:
linear-gradient(135deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 48%),
linear-gradient(160deg, rgba(var(--vk-renk), 1) 0%, rgba(var(--vk-renk), .35) 100%);
box-shadow: 0 0 60px -10px rgba(var(--vk-renk), .6);
}
.vk-gorsel-ad {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(30px, 3.4vw, 48px);
letter-spacing: .02em;
color: rgba(255, 255, 255, .95);
text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
}
.vk-yazi {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.vk-tur {
margin: 0 0 8px;
font-size: 13px;
font-weight: 700;
letter-spacing: .03em;
color: #e4e4ea;
}
.vk-ad {
margin: 0 0 10px;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(24px, 2.2vw, 30px);
line-height: 1.08;
letter-spacing: -.02em;
color: #f5f5f7;
text-wrap: balance;
}
.vk-aciklama {
margin: 0;
max-width: 40ch;
font-size: 15px;
line-height: 1.55;
color: #d4d4dc;
text-wrap: pretty;
}
.vk-git {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 22px;
padding: 10px 18px;
border-radius: 999px;
background: #fff;
color: #0b0b0d;
font-size: 14.5px;
font-weight: 700;
}
.vk-git .ok-ikon { transition: transform .25s ease; }
a.vk:hover .vk-git .ok-ikon,
a.vk:focus-visible .vk-git .ok-ikon { transform: translateX(3px); }
.vk-bento {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.vk--genis {
grid-column: 1 / -1;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(24px, 4vw, 60px);
padding: clamp(26px, 3vw, 40px);
}
.vk--genis .vk-gorsel { aspect-ratio: 16 / 9; }
.vk--genis .vk-ad { font-size: clamp(34px, 4.4vw, 56px); line-height: 1; margin-bottom: 14px; }
.vk--genis .vk-aciklama { font-size: 16.5px; }
.vk--yatay {
grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
align-items: center;
gap: 22px;
padding: 22px;
}
.vk--yatay .vk-git { margin-top: 16px; }
.vk--yatay .vk-ad { font-size: clamp(22px, 1.9vw, 26px); }
.vk-izgara {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.vk--dikey {
grid-template-rows: auto 1fr;
padding: 14px 14px 18px;
}
.vk--dikey .vk-yazi { padding: 22px 8px 0; }
.vk--dikey .vk-ad { font-size: clamp(24px, 2.1vw, 28px); }
.vk--dikey .vk-aciklama { font-size: 14.5px; }
.vk-alt {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
margin-top: auto;
padding-top: 20px;
}
.vk-fiyat {
font-family: var(--font-display);
font-weight: 800;
font-size: 19px;
letter-spacing: -.01em;
color: #f5f5f7;
}
.vk-ok {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 38px;
height: 38px;
border-radius: 999px;
background: rgba(255, 255, 255, .10);
color: #f5f5f7;
font-size: 17px;
transition: background .25s ease, color .25s ease;
}
a.vk:hover .vk-ok,
a.vk:focus-visible .vk-ok { background: #fff; color: #0b0b0d; }
.vk--mavi    { --vk-renk: 96, 165, 250; }
.vk--turuncu { --vk-renk: 251, 146, 60; }
.vk--mor     { --vk-renk: 168, 85, 247; }
.vk--yesil   { --vk-renk: 74, 222, 128; }
.vk--gumus   { --vk-renk: 212, 212, 216; }
.vk--sari    { --vk-renk: 252, 211, 77; }
.vk--yakinda { cursor: pointer; }
.vk-kilit {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px;
border-radius: 16px;
text-align: center;
background: rgba(8, 10, 18, .78);
opacity: 0;
pointer-events: none;
transition: opacity .28s ease;
}
.vk--yakinda:hover .vk-kilit,
.vk--yakinda:focus-visible .vk-kilit { opacity: 1; }
.vk-kilit-ikon { width: 52px; height: 52px; }
.vk-kilit-yazi {
font-size: 17px;
font-weight: 700;
color: #fff;
}
.vk--yakinda .vk-fiyat { color: #d4d4dc; }
@keyframes vkTitre {
0%, 100% { transform: translateX(0); }
18%      { transform: translateX(-4px) rotate(-.25deg); }
36%      { transform: translateX(4px) rotate(.25deg); }
54%      { transform: translateX(-3px) rotate(-.15deg); }
72%      { transform: translateX(3px) rotate(.15deg); }
88%      { transform: translateX(-1px); }
}
.vk.vk--titre { animation: vkTitre .38s ease-in-out; }
@media (min-width: 761px) {
body.store-anasayfa:not(.eklenti-vitrin) .store-shell { padding-top: clamp(100px, 13vh, 128px); }
body.store-anasayfa:not(.eklenti-vitrin) .store-hero { margin-bottom: 26px; }
}
@media (max-width: 760px) {
body.store-anasayfa:not(.eklenti-vitrin) .store-shell { padding-top: 112px; }
body.store-anasayfa:not(.eklenti-vitrin) .store-hero { margin-bottom: 26px; }
}
@media (max-width: 1024px) {
.vk-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.vk-bento { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.vk-bento,
.vk-izgara { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.vk--genis,
.vk--yatay {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
padding: 16px 16px 22px;
}
.vk--genis .vk-gorsel { order: -1; }
.vk--genis .vk-yazi,
.vk--yatay .vk-yazi { padding: 0 6px; }
.vk--genis .vk-ad { font-size: 34px; }
.vk { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
.vk, .vk-isik, .vk-resim, .vk-gorsel > video, .vk-git .ok-ikon, .vk-ok, .vk-kilit { transition-duration: .01ms; }
.vk.vk--titre { animation: none; }
}