.hidden { display: none !important; }
body.videofiles-page {
margin: 0;
--tm-zemin: #080c1c;
--tm-yuzey: #131722;
--tm-yuzey-2: #1a1f2d;
--tm-yazi: #f4f6fb;
--tm-soluk: rgba(228, 234, 248, .70);
--tm-cizgi: rgba(255, 255, 255, .12);
--tm-cam: rgba(19, 23, 34, .72);
--tm-cam-cizgi: rgba(255, 255, 255, .10);
--tm-vurgu: #ffffff;
--tm-vurgu-yzm: #0b0b0d;
--tm-odak: rgba(255, 255, 255, .12);
color-scheme: dark;
background: #080c1c;
color: #f4f6fb;
font-family: var(--font-body);
min-height: 100vh;
}
body.vf-bekliyor .vf-top,
body.vf-tanitim-modu .vf-top { display: none; }
.vf-top {
position: fixed;
top: 18px;
left: 50%;
transform: translateX(-50%);
z-index: 20;
display: flex;
align-items: center;
gap: clamp(14px, 2.4vw, 26px);
width: min(880px, 94vw);
box-sizing: border-box;
padding: 8px 10px 8px clamp(16px, 2.4vw, 26px);
border-radius: 999px;
background: rgba(16, 20, 30, .72);
backdrop-filter: blur(22px) saturate(1.5);
-webkit-backdrop-filter: blur(22px) saturate(1.5);
border: 1px solid rgba(255, 255, 255, .09);
box-shadow: 0 10px 32px rgba(0, 0, 0, .42);
}
.vf-logo {
flex: none;
--marka-boy: 22px;
font-family: var(--font-display);
font-weight: 800;
font-size: 17px;
letter-spacing: -.01em;
color: var(--tm-yazi);
text-decoration: none;
}
@media (max-width: 640px) { .vf-logo { --marka-boy: 20px; font-size: 15px; } }
.vf-arama-sarici {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 18px;
border: 0;
border-radius: 999px;
background-image: linear-gradient(180deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, .22));
box-shadow:
inset 0 2px 3px rgba(0, 0, 0, .75),
inset 0 -1px 0 rgba(255, 255, 255, .075),
0 1px 0 rgba(255, 255, 255, .07);
transition: box-shadow .25s ease;
}
.vf-arama-sarici:focus-within {
box-shadow:
inset 0 3px 5px rgba(0, 0, 0, .85),
inset 0 -1px 0 rgba(255, 255, 255, .1),
0 1px 0 rgba(255, 255, 255, .09);
}
.vf-arama-ikon { flex: none; color: var(--tm-soluk); }
.vf-arama {
flex: 1 1 auto;
min-width: 0;
border: 0;
outline: none;
background: transparent;
color: var(--tm-yazi);
font: 500 14px/1.4 var(--font-body);
}
.vf-arama::placeholder { color: var(--tm-soluk); }
.vf-abone {
justify-self: end;
margin: 0;
font-size: 13px;
color: var(--tm-soluk);
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.vf-abone-btn {
border: 0;
border-radius: 999px;
padding: 7px 16px;
background: var(--tm-vurgu);
color: var(--tm-vurgu-yzm);
font: 700 12.5px var(--font-display);
cursor: pointer;
}
.vf-abone-btn:hover { opacity: .85; }
@media (max-width: 900px) {
.vf-top { grid-template-columns: 1fr auto; row-gap: 10px; }
.vf-logo { grid-column: 1; grid-row: 1; }
.vf-abone { grid-column: 2; grid-row: 1; }
.vf-arama-sarici { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; max-width: none; }
}
@media (max-width: 480px) {
.vf-abone span { display: none; }
}
.vf-govde {
position: relative;
z-index: 1;
max-width: 1560px;
margin: 0 auto;
padding: 100px clamp(16px, 4vw, 40px) 60px;
}
.vf-abone-basi {
margin: 6px 0 26px;
}
.vf-abone-baslik {
margin: 0 0 7px;
font: 800 clamp(26px, 3.4vw, 38px)/1.1 var(--font-display);
letter-spacing: -.035em;
color: var(--tm-yazi);
}
.vf-abone-alt {
margin: 0;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
font: 400 14.5px/1.5 var(--font-body);
color: var(--tm-soluk);
}
.vf-sayac {
flex: none;
padding: 3px 11px;
border-radius: 999px;
border: 1px solid var(--tm-cizgi);
background: var(--tm-yuzey-2);
font: 600 12px var(--font-display);
color: var(--tm-yazi);
}
.vf-sayac[hidden] { display: none; }
.vf-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px 24px;
}
@media (max-width: 1180px) { .vf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .vf-grid { grid-template-columns: 1fr; } }
.vf-bos, .vf-arama-sonuc-yok {
padding: 60px 16px;
text-align: center;
color: var(--tm-soluk);
font-size: 14px;
}
.vf-abone-basi,
.vf-grid,
.vf-bos,
.vf-arama-sonuc-yok { position: relative; z-index: 1; }
.vf-kart {
display: flex;
flex-direction: column;
background: none;
border: 0;
cursor: pointer;
}
.vf-kart:hover .vf-kart-kapak img { transform: scale(1.03); }
.vf-kart-kapak {
position: relative;
aspect-ratio: 16 / 9;
background: #0d1018;
overflow: hidden;
border-radius: 14px;
}
.vf-kart-kapak img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.vf-kart-kapak-bos {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
padding: 12px;
text-align: center;
background: var(--tm-yuzey-2);
color: var(--tm-soluk);
font-size: 12px;
}
.vf-kart-oynat {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, .28);
opacity: 0;
transition: opacity .16s ease;
}
.vf-kart-kapak:hover .vf-kart-oynat { opacity: 1; }
.vf-kart-oynat svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.vf-kart-alt {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 2px 0;
}
.vf-kart-kanal-foto {
flex: none;
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
background: var(--tm-yuzey-2);
}
.vf-kart-kanal-harf {
flex: none;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--tm-yuzey-2);
color: var(--tm-yazi);
font: 700 15px var(--font-display);
}
.vf-kart-yazi { min-width: 0; flex: 1 1 auto; }
.vf-kart-baslik {
margin: 0 0 4px;
font: 600 14.5px/1.38 var(--font-body);
color: var(--tm-yazi);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: calc(2 * 1.38em);
}
.vf-kart-kanal {
margin: 0;
font: 400 12.5px/1.5 var(--font-body);
color: var(--tm-soluk);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vf-kart-boyut {
margin: 0;
font: 400 12.5px/1.5 var(--font-body);
color: var(--tm-soluk);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vf-kart-boyut--yok { color: rgba(255, 255, 255, .34); }
.vf-modal {
position: fixed; inset: 0; z-index: 100;
display: flex; align-items: center; justify-content: center;
padding: 4vh 4vw;
background: rgba(0, 0, 0, .90);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.vf-modal.hidden { display: none; }
.vf-modal-kapat {
position: absolute; top: 18px; right: 22px;
z-index: 2;
border: 0; background: transparent; cursor: pointer; padding: 8px;
}
.vf-modal-kutu {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: min(920px, 100%);
max-height: 92vh;
}
.vf-modal-ic {
width: 100%;
max-height: calc(88vh - 130px);
aspect-ratio: 16 / 9;
}
.vf-modal-ic.vf-dikey { width: min(420px, 92vw); aspect-ratio: 9 / 16; }
.vf-modal-ic iframe { width: 100%; height: 100%; border: 0; background: #000; }
.vf-modal-alt {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
width: 100%;
max-width: 620px;
}
.vf-mdl-sutun { min-width: 0; }
.vf-mdl-btn {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
border: 1px solid rgba(255, 255, 255, .20);
border-radius: 999px;
padding: 12px 18px;
background: rgba(255, 255, 255, .08);
color: #fff;
font: 700 13.5px var(--font-display);
cursor: pointer;
transition: background .16s ease, border-color .16s ease;
}
.vf-mdl-btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .34); }
.vf-mdl-btn--ana { background: #0a84ff; border-color: #0a84ff; }
.vf-mdl-btn--ana:hover { background: #2a95ff; border-color: #2a95ff; }
.vf-mdl-btn--yok,
.vf-mdl-btn--yok:hover {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .12);
color: rgba(255, 255, 255, .45);
}
.vf-mdl-ikon { flex: none; display: flex; }
.vf-mdl-ikon svg { display: block; }
.vf-mdl-not {
margin: 7px 0 0;
text-align: center;
font: 400 12px/1.45 var(--font-body);
color: rgba(255, 255, 255, .64);
overflow-wrap: anywhere;
}
@media (max-width: 560px) {
.vf-modal-alt { grid-template-columns: 1fr; }
.vf-modal-ic { max-height: calc(88vh - 210px); }
}
.vf-tanitim { position: relative; }
.vf-dalga {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
background:
radial-gradient(ellipse 70% 55% at 50% -10%, rgba(60, 110, 255, .40), transparent 70%),
radial-gradient(ellipse 60% 50% at -8% 40%, rgba(50, 95, 235, .34), transparent 72%),
radial-gradient(ellipse 60% 50% at 108% 60%, rgba(50, 95, 235, .30), transparent 72%),
radial-gradient(ellipse 80% 45% at 50% 112%, rgba(45, 85, 220, .30), transparent 70%),
linear-gradient(180deg, #0a0f23 0%, #080c1c 55%, #060915 100%);
background-color: #080c1c;
}
.vf-dalga::before {
content: "";
position: absolute;
inset: -24%;
transform: translate3d(0, var(--vf-kaydirma, 0px), 0);
will-change: transform;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%23a8c4ff' stroke-width='2.5' stroke-linecap='round' stroke-dasharray='16 20' opacity='0.42'%3E%3Cpath d='M-60 250 C 220 60, 430 40, 700 -60'/%3E%3Cpath d='M1260 120 C 980 300, 900 520, 1000 860'/%3E%3Cpath d='M-40 700 C 260 640, 420 760, 560 900'/%3E%3Cpath d='M300 -40 C 420 160, 700 220, 1240 300'/%3E%3C/g%3E%3C/svg%3E"),
repeating-linear-gradient(90deg, rgba(150, 180, 255, .07) 0 1px, transparent 1px 96px),
repeating-linear-gradient(0deg,  rgba(150, 180, 255, .07) 0 1px, transparent 1px 96px);
background-size: cover, auto, auto;
background-position: center;
background-repeat: no-repeat, repeat, repeat;
}
.vf-dalga::after {
content: "";
position: absolute;
inset: 0;
opacity: .32;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.vf-dalga--abone {
background:
radial-gradient(ellipse 65% 50% at 88% -6%, rgba(70, 120, 255, .26), transparent 70%),
radial-gradient(ellipse 70% 55% at 6% 96%, rgba(58, 100, 240, .22), transparent 72%),
radial-gradient(ellipse 50% 40% at 50% 40%, rgba(40, 70, 190, .12), transparent 75%),
linear-gradient(170deg, #080b18 0%, #060812 60%, #05070f 100%);
background-color: #060812;
}
.vf-dalga--abone::before {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%2394b4ff' stroke-width='2' stroke-linecap='round' stroke-dasharray='10 26' opacity='0.30'%3E%3Cpath d='M-80 620 C 240 520, 380 300, 560 -60'/%3E%3Cpath d='M1280 460 C 1020 430, 760 560, 420 880'/%3E%3Cpath d='M-40 90 C 340 200, 620 120, 1260 380'/%3E%3C/g%3E%3C/svg%3E"),
repeating-linear-gradient(90deg, rgba(140, 170, 255, .05) 0 1px, transparent 1px 128px),
repeating-linear-gradient(0deg,  rgba(140, 170, 255, .05) 0 1px, transparent 1px 128px);
}
.vf-dalga--abone::after { opacity: .22; }
@media (prefers-reduced-motion: reduce) {
.vf-dalga::before, .vf-dalga::after { animation: none; }
}
.vf-tanitim > * { position: relative; z-index: 1; }
.vf-tanitim > .vf-dalga { position: fixed; z-index: 0; }
.vf-kap {
max-width: 1320px;
margin: 0 auto;
padding-inline: clamp(18px, 5vw, 48px);
}
.vf-bolum { padding-block: clamp(40px, 6vh, 72px); }
.vf-bolum-baslik {
margin: 0 0 14px;
font: 800 clamp(26px, 3.2vw, 40px)/1.12 var(--font-display);
letter-spacing: -.025em;
color: var(--tm-yazi);
}
.vf-bolum-giris {
margin: 0 0 clamp(28px, 4vh, 44px);
max-width: 62ch;
font: 400 clamp(15px, 1.15vw, 16.5px)/1.65 var(--font-body);
color: var(--tm-soluk);
}
.vf-kahraman {
min-height: 100vh;
min-height: 100svh;
display: grid;
grid-template-rows: auto auto 1fr;
gap: clamp(16px, 2.6vh, 30px);
padding: 0 0 clamp(56px, 8vh, 88px);
box-sizing: border-box;
}
.vf-kahraman::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: min(52vh, 460px);
z-index: -1;
pointer-events: none;
background: linear-gradient(180deg,
rgba(2, 5, 14, .55) 0%,
rgba(2, 5, 14, .38) 24%,
rgba(2, 5, 14, .20) 52%,
rgba(2, 5, 14, .07) 78%,
transparent 100%);
}
body.videofiles-page .marka-gozluk .marka-koyu { display: block; }
body.videofiles-page .marka-gozluk .marka-acik { display: none; }
.vf-kahraman-baslik { align-self: start; width: 100%; text-align: center; }
.vf-kahraman-ic { align-self: center; width: 100%; }
.vf-baslik {
margin: 0;
white-space: nowrap;
font: 800 clamp(17px, 3.3vw, 52px)/1.02 var(--font-display);
letter-spacing: -.045em;
color: var(--tm-yazi);
}
.vf-kahraman-alt {
display: grid;
grid-template-columns: auto minmax(0, 500px);
justify-content: center;
align-items: center;
gap: clamp(24px, 8vw, 130px);
position: relative;
}
.vf-proje-kutu {
position: relative;
display: inline-block;
width: fit-content;
line-height: 0;
perspective: 1000px;
filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .55));
animation: vfProjeYuzer 5.6s ease-in-out infinite;
}
.vf-proje-ikon {
display: block;
width: clamp(118px, 18.5vw, 270px);
height: auto;
transform: rotateX(14deg) rotateY(22deg);
transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.vf-kahraman-alt:hover .vf-proje-ikon {
transform: rotateX(10deg) rotateY(14deg) scale(1.04);
}
.vf-proje-kutu::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg,
transparent 0%, transparent 40%, rgba(255, 255, 255, .95) 49%,
transparent 58%, transparent 100%);
background-size: 320% 320%;
background-repeat: no-repeat;
transform: rotateX(14deg) rotateY(22deg);
-webkit-mask-image: url('/assets/icons/premiere-project.png');
mask-image: url('/assets/icons/premiere-project.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
animation:
vfProjeShine 3.2s ease-in-out infinite,
vfProjeShineSon 3.2s linear infinite;
pointer-events: none;
}
@keyframes vfProjeShine {
0%   { background-position: 140% -40%; }
50%  { background-position: -40% 140%; }
100% { background-position: -40% 140%; }
}
@keyframes vfProjeShineSon {
0%   { opacity: 0; }
6%   { opacity: 1; }
44%  { opacity: 1; }
52%  { opacity: 0; }
100% { opacity: 0; }
}
@keyframes vfProjeYuzer {
0%, 100% { translate: 0 0; }
50%      { translate: 0 -14px; }
}
@media (prefers-reduced-motion: reduce) {
.vf-proje-kutu { animation: none; }
.vf-proje-kutu::after { animation: none; opacity: 0; }
.vf-proje-ikon { transition: none; }
}
.vf-teklif { display: flex; flex-direction: column; align-items: flex-start; }
.vf-teklif-metin {
margin: 0 0 8px;
max-width: 46ch;
font: 400 clamp(18px, 1.45vw, 22px)/1.62 var(--font-body);
color: #f4f6fb;
}
.vf-teklif .vf-son-btn {
width: 100%;
max-width: 460px;
}
.vf-teklif-alt {
width: 100%;
max-width: 460px;
margin-top: 14px;
display: flex;
align-items: baseline;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.vf-teklif-alt > p { margin: 0; }
.vf-teklif-fiyat { font: 700 17px var(--font-body); opacity: 1; }
.vf-teklif-iptal {
max-width: 46ch;
margin: 0 0 26px;
text-align: left;
font: 400 13.5px var(--font-body);
color: var(--tm-soluk);
}
.vf-kahraman-giris {
margin: 22px 0 0;
font: 400 14px var(--font-body);
color: var(--tm-soluk);
}
.vf-kahraman-giris a,
.vf-kahraman-giris button {
padding: 0;
border: 0;
background: none;
font: inherit;
color: var(--tm-yazi);
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid var(--tm-cizgi);
cursor: pointer;
}
.vf-kahraman-giris a:hover,
.vf-kahraman-giris button:hover { border-bottom-color: #0a84ff; color: #0a84ff; }
@media (max-width: 860px) {
.vf-kahraman { min-height: auto; grid-template-rows: auto auto auto; padding-bottom: 44px; }
.vf-kahraman::before { height: 44vh; }
.vf-baslik {
white-space: normal;
font-size: clamp(27px, 8.2vw, 34px);
line-height: 1.04;
}
.vf-kahraman-alt { grid-template-columns: 1fr; gap: 34px; }
.vf-proje-kutu { order: 1; justify-self: center; }
.vf-proje-ikon { width: clamp(96px, 27vw, 156px); }
.vf-teklif { order: 2; }
}
@media (max-width: 860px) {
body.videofiles-page .sayfa-ust { padding: 14px 14px 0; }
.vf-kahraman-baslik { margin-bottom: 6px; }
.vf-proje-kutu { margin-top: 20px; }
.vf-teklif { align-items: center; text-align: center; }
.vf-teklif .vf-son-btn { order: 1; margin-top: 0; align-self: center; }
.vf-teklif-iptal { order: 2; margin: 12px 0 0; text-align: center; align-self: center; }
.vf-teklif-metin { order: 3; margin-top: 20px; text-align: center; }
.vf-kahraman-alt { position: static; }
.vf-teklif-alt {
position: absolute;
top: 20px;
right: 14px;
z-index: 3;
margin: 0;
text-align: right;
width: max-content;
max-width: calc(100vw - 120px);
}
.vf-kahraman-giris { justify-content: flex-end; font-size: 12.5px; }
}
.vf-kahraman-kaydir {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 16px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border: 0;
background: none;
color: var(--tm-soluk);
font: 700 12.5px var(--font-display);
letter-spacing: -.01em;
cursor: pointer;
transition: opacity .45s ease, transform .45s ease, color .2s ease;
}
.vf-kahraman-kaydir:hover { color: var(--tm-yazi); }
.vf-kahraman-kaydir svg { animation: vfKaydirOk 1.9s ease-in-out infinite; }
@keyframes vfKaydirOk {
0%, 100% { transform: translateY(-2px); opacity: .75; }
50%      { transform: translateY(3px);  opacity: 1; }
}
body.vf-kaydi .vf-kahraman-kaydir { opacity: 0; transform: translateX(-50%) translateY(14px); pointer-events: none; }
@media (max-width: 860px) { .vf-kahraman-kaydir { display: none; } }
@media (prefers-reduced-motion: reduce) { .vf-kahraman-kaydir svg { animation: none; } }
.vf-ic-duzen {
display: grid;
grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
align-items: center;
gap: clamp(28px, 4vw, 64px);
}
.vf-klasor { perspective: 1100px; }
.vf-klasor-cerceve {
border-radius: 2px;
overflow: hidden;
background: #272727;
border: 1px solid rgba(255, 255, 255, .10);
box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
transform: rotateX(11deg) rotateY(20deg);
transform-origin: 60% 50%;
}
.vf-pencere-ust {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 4px 7px 11px;
background: #1f1f1f;
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.vf-pencere-ikon { flex: none; display: block; width: 16px; height: 16px; }
.vf-pencere-ad {
flex: 1 1 auto;
min-width: 0;
font: 500 11.5px var(--font-body);
color: rgba(255, 255, 255, .78);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vf-pencere-dugmeler { flex: none; display: flex; align-items: stretch; }
.vf-pd {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 22px;
color: rgba(255, 255, 255, .62);
}
.vf-pd svg { display: block; }
.vf-pd--kapat { color: rgba(255, 140, 140, .82); }
.vf-pencere-yol {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: #272727;
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.vf-yol-oklar {
flex: none;
display: flex;
align-items: center;
gap: 5px;
color: rgba(255, 255, 255, .45);
}
.vf-yol-oklar svg { display: block; }
.vf-klasor-yol {
flex: 1 1 auto;
min-width: 0;
padding: 4px 8px;
border-radius: 3px;
background: #1c1c1c;
border: 1px solid rgba(255, 255, 255, .07);
font: 500 10.5px var(--font-mono);
color: rgba(255, 255, 255, .62);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vf-klasor-liste { list-style: none; margin: 0; padding: 8px 0; }
.vf-klasor-liste li {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 14px;
font: 600 14px var(--font-body);
color: #e8eaf2;
}
.vf-dosya-ikon--klasor {
flex: none;
width: 22px;
height: 22px;
object-fit: contain;
display: block;
}
.vf-klasor-proje { gap: 8px; }
.vf-dosya-ikon--pr { flex: none; width: 26px; height: 26px; object-fit: contain; }
.vf-zaman {
--vf-iz-ad-en: 106px;
--vf-iz-boy: 26px;
--vf-iz-boy-ses: 34px;
--vf-tl-giris1: #4815C3;
--vf-tl-giris2: #005576;
--vf-tl-mossy:  #95440F;
--vf-tl-champ:  #8C0235;
--vf-tl-kamera: #6100B7;
--vf-tl-adjust: #891D9C;
--vf-tl-yesil:  #3D4A00;
--vf-tl-sy-zemin: #2A5507;  --vf-tl-sy-dalga: #B9E792;
--vf-tl-st-zemin: #95440F;  --vf-tl-st-dalga: #FFC98F;
--vf-tl-sp-zemin: #8C0235;  --vf-tl-sp-dalga: #FF7BA7;
--vf-tl-sm-zemin: #004B67;  --vf-tl-sm-dalga: #5FC2FE;
position: relative;
border: 1px solid rgba(255, 255, 255, .10);
border-radius: 2px;
background: #16161a;
overflow: hidden;
box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
transform: perspective(2400px) rotateX(6deg) rotateY(-11deg);
transform-origin: 40% 50%;
}
.vf-tl-ust {
display: flex;
align-items: center;
gap: 14px;
padding: 6px 10px;
background: #1b1b20;
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.vf-tl-sekme {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border-radius: 2px;
background: #2a2a31;
font: 600 10.5px var(--font-body);
color: rgba(255, 255, 255, .82);
}
.vf-tl-sekme svg { color: rgba(255, 255, 255, .38); flex: none; }
.vf-tl-sekme-nokta {
width: 8px;
height: 8px;
background: #3f7f3f;
}
.vf-tl-kod {
font: 700 13px var(--font-mono);
letter-spacing: .02em;
color: #4f9fff;
}
.vf-tl-govde { display: flex; align-items: stretch; }
.vf-tl-basliklar {
flex: none;
width: var(--vf-iz-ad-en);
border-right: 1px solid rgba(255, 255, 255, .09);
background: #1c1c21;
}
.vf-tl-kose {
display: flex;
align-items: center;
justify-content: center;
height: 26px;
padding: 0 4px;
box-sizing: border-box;
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, .09);
background: #202027;
}
.vf-tl-alan { position: relative; flex: 1 1 auto; min-width: 0; }
.vf-tl-bas {
display: flex;
align-items: center;
gap: 5px;
height: var(--vf-iz-boy);
padding: 0 5px;
box-sizing: border-box;
border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.vf-tl-bas--ses { height: var(--vf-iz-boy-ses); }
.vf-tl-bas:last-child { border-bottom: 0; }
.vf-tl-bas::after {
content: attr(data-iz);
order: 2;
font: 700 9.5px var(--font-mono);
letter-spacing: .04em;
color: rgba(255, 255, 255, .55);
}
.vf-tl-bas--secili::after {
padding: 2px 4px;
border-radius: 2px;
background: #2b4a7a;
color: #cfe2ff;
}
.vf-tl-bas::before {
content: "";
order: 1;
flex: none;
width: 11px;
height: 11px;
background: rgba(255, 255, 255, .34);
-webkit-mask: var(--vf-ikon-kilit) center / contain no-repeat;
mask: var(--vf-ikon-kilit) center / contain no-repeat;
}
.vf-zaman {
--vf-ikon-kilit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 1a3.2 3.2 0 0 0-3.2 3.2V6H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-.8V4.2A3.2 3.2 0 0 0 8 1zm0 1.6a1.6 1.6 0 0 1 1.6 1.6V6H6.4V4.2A1.6 1.6 0 0 1 8 2.6z'/%3E%3C/svg%3E");
--vf-ikon-goz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 3C4.6 3 1.9 5.6 1 8c.9 2.4 3.6 5 7 5s6.1-2.6 7-5c-.9-2.4-3.6-5-7-5zm0 8.2A3.2 3.2 0 1 1 8 4.8a3.2 3.2 0 0 1 0 6.4zm0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2z'/%3E%3C/svg%3E");
--vf-ikon-mikrofon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 1.4a2.1 2.1 0 0 0-2.1 2.1v4a2.1 2.1 0 0 0 4.2 0v-4A2.1 2.1 0 0 0 8 1.4zM4 7a.8.8 0 0 0-1.6 0 5.6 5.6 0 0 0 4.8 5.5v1.5a.8.8 0 0 0 1.6 0v-1.5A5.6 5.6 0 0 0 13.6 7 .8.8 0 0 0 12 7a4 4 0 0 1-8 0z'/%3E%3C/svg%3E");
--vf-ikon-cikis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M2 3h12v10H2V3zm1.6 1.6v6.8h8.8V4.6H3.6z'/%3E%3Cpath fill='%23fff' d='M5 6h6v1.4H5zM5 8.6h4V10H5z'/%3E%3C/svg%3E");
}
.vf-tl-ikon {
order: 3;
flex: none;
width: 12px;
height: 12px;
background: rgba(255, 255, 255, .32);
-webkit-mask: var(--vf-ikon) center / contain no-repeat;
mask: var(--vf-ikon) center / contain no-repeat;
}
.vf-tl-harf {
order: 3;
flex: none;
font: 700 8.5px/1 var(--font-mono);
color: rgba(255, 255, 255, .42);
}
.vf-tl-ikon--cikis     { --vf-ikon: var(--vf-ikon-cikis); }
.vf-tl-ikon--goz       { --vf-ikon: var(--vf-ikon-goz); }
.vf-tl-ikon--mikrofon  { --vf-ikon: var(--vf-ikon-mikrofon); }
.vf-zaman-cetvel {
display: flex;
align-items: center;
height: 26px;
border-bottom: 1px solid rgba(255, 255, 255, .09);
background: #202027;
background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, .16) 0 1px, transparent 1px 11px);
background-position: 0 bottom;
background-size: auto 7px;
background-repeat: repeat-x;
font: 500 9px var(--font-mono);
color: rgba(255, 255, 255, .55);
overflow: hidden;
}
.vf-zaman-cetvel span { flex: 1 1 0; padding-left: 5px; white-space: nowrap; }
.vf-oynatma {
position: absolute;
top: 0; bottom: 0;
left: 36%;
width: 1px;
background: #4f9fff;
z-index: 3;
pointer-events: none;
}
.vf-oynatma::before {
content: "";
position: absolute;
top: 0; left: -6px;
width: 13px; height: 12px;
clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
background: #4f9fff;
}
.vf-iz {
display: flex;
align-items: stretch;
height: var(--vf-iz-boy);
border-bottom: 1px solid rgba(255, 255, 255, .05);
background: #1a1a1f;
}
.vf-iz--ses { height: var(--vf-iz-boy-ses); background: #17171c; }
.vf-iz:last-child { border-bottom: 0; }
.vf-iz-yol {
position: relative;
flex: 1 1 auto;
min-width: 0;
margin: 1px 0;
}
.vf-klip {
position: absolute;
top: 0; bottom: 0;
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
padding: 0 5px;
border-radius: 1px;
box-sizing: border-box;
background: var(--vf-klip-zemin);
border: 1px solid rgba(255, 255, 255, .22);
font: 600 9px/1 var(--font-body);
color: rgba(255, 255, 255, .95);
white-space: nowrap;
overflow: hidden;
}
.vf-klip::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: rgba(255, 255, 255, .18);
}
.vf-klip i {
margin-left: auto;
padding-left: 4px;
font: 700 7.5px/1 var(--font-mono);
font-style: normal;
color: rgba(255, 255, 255, .62);
}
.vf-klip--giris1 { --vf-klip-zemin: var(--vf-tl-giris1); }
.vf-klip--giris2 { --vf-klip-zemin: var(--vf-tl-giris2); }
.vf-klip--mossy  { --vf-klip-zemin: var(--vf-tl-mossy); }
.vf-klip--champ  { --vf-klip-zemin: var(--vf-tl-champ); }
.vf-klip--kamera { --vf-klip-zemin: var(--vf-tl-kamera); }
.vf-klip--adjust { --vf-klip-zemin: var(--vf-tl-adjust); }
.vf-klip--yesil  { --vf-klip-zemin: var(--vf-tl-yesil); }
.vf-klip--ses { align-items: flex-start; padding-top: 2px; }
.vf-klip--ses-yesil   { --vf-klip-zemin: var(--vf-tl-sy-zemin); --vf-dalga: var(--vf-tl-sy-dalga); }
.vf-klip--ses-turuncu { --vf-klip-zemin: var(--vf-tl-st-zemin); --vf-dalga: var(--vf-tl-st-dalga); }
.vf-klip--ses-pembe   { --vf-klip-zemin: var(--vf-tl-sp-zemin); --vf-dalga: var(--vf-tl-sp-dalga); }
.vf-klip--ses-mavi    { --vf-klip-zemin: var(--vf-tl-sm-zemin); --vf-dalga: var(--vf-tl-sm-dalga); }
.vf-dalgaform {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 74%;
background: var(--vf-dalga);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' preserveAspectRatio='none' viewBox='0 0 80 40'%3E%3Cpath fill='%23fff' d='M0 22 Q2 -10 4 22 Q6 32 8 22 Q10 0 12 22 Q14 28 16 22 Q18 -14 20 22 Q22 34 24 22 Q26 4 28 22 Q30 30 32 22 Q34 -6 36 22 Q38 36 40 22 Q42 -2 44 22 Q46 28 48 22 Q50 -12 52 22 Q54 32 56 22 Q58 2 60 22 Q62 34 64 22 Q66 -4 68 22 Q70 30 72 22 Q74 -8 76 22 Q78 32 80 22 L80 40 L0 40 Z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' preserveAspectRatio='none' viewBox='0 0 80 40'%3E%3Cpath fill='%23fff' d='M0 22 Q2 -10 4 22 Q6 32 8 22 Q10 0 12 22 Q14 28 16 22 Q18 -14 20 22 Q22 34 24 22 Q26 4 28 22 Q30 30 32 22 Q34 -6 36 22 Q38 36 40 22 Q42 -2 44 22 Q46 28 48 22 Q50 -12 52 22 Q54 32 56 22 Q58 2 60 22 Q62 34 64 22 Q66 -4 68 22 Q70 30 72 22 Q74 -8 76 22 Q78 32 80 22 L80 40 L0 40 Z'/%3E%3C/svg%3E");
mask-size: 80px 100%;
-webkit-mask-size: 80px 100%;
mask-repeat: repeat-x;
-webkit-mask-repeat: repeat-x;
}
@media (max-width: 980px) {
.vf-ic-duzen { grid-template-columns: 1fr; }
.vf-klasor { max-width: 330px; margin: 0 auto; }
}
@media (max-width: 860px) {
.vf-zaman { --vf-iz-ad-en: 74px; --vf-iz-boy: 22px; --vf-iz-boy-ses: 28px; }
.vf-zaman { transform: perspective(1400px) rotateX(2.5deg) rotateY(-3.5deg); }
.vf-tl-bas { gap: 3px; padding: 0 3px; }
.vf-tl-bas::before { width: 9px; height: 9px; }
.vf-tl-ikon { width: 9px; height: 9px; }
.vf-tl-harf { font-size: 7px; }
.vf-tl-bas::after { font-size: 8px; }
.vf-tl-kod { font-size: 9.5px; letter-spacing: 0; }
.vf-klip { font-size: 8px; padding: 0 3px; }
.vf-klip i { font-size: 6.5px; }
.vf-zaman-cetvel { font-size: 7.5px; }
.vf-zaman-cetvel span:nth-child(even) { display: none; }
}
@media (max-width: 480px) {
.vf-zaman { --vf-iz-ad-en: 58px; }
.vf-tl-kod { font-size: 8.5px; letter-spacing: 0; }
.vf-tl-ikon, .vf-tl-harf { display: none; }
.vf-zaman-cetvel span:nth-child(3n+2),
.vf-zaman-cetvel span:nth-child(3n) { display: none; }
}
.vf-serit-bolum { padding-bottom: clamp(16px, 2.5vh, 32px); }
.vf-serit {
overflow: hidden;
perspective: 2600px;
perspective-origin: 50% 46%;
padding: 40px 0 44px;
-webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.vf-serit-yol {
display: flex;
gap: 22px;
width: max-content;
transform-style: preserve-3d;
will-change: transform;
pointer-events: none;
}
.vf-serit-kart {
position: relative;
flex: none;
width: 340px;
border-radius: 14px;
overflow: hidden;
background: var(--tm-yuzey);
border: 1px solid var(--tm-cizgi);
transform: rotateX(9deg);
pointer-events: auto;
box-shadow: -14px 16px 34px rgba(0, 0, 0, .26);
transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
background: #131317;
}
@media (prefers-reduced-motion: reduce) { .vf-serit-kart { transition: none; } }
.vf-serit-kapak { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.vf-serit-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-serit-kapak-bos {
width: 100%; height: 100%;
box-sizing: border-box;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
background: var(--tm-yuzey-2); color: var(--tm-soluk);
font: 600 12px/1.4 var(--font-body); text-align: center; padding: 10px;
}
.vf-serit-ad {
padding: 8px 16px 9px;
border-top: 1px solid rgba(255, 255, 255, .08);
background: #000000;
font: 600 13.5px/1.4 var(--font-body);
color: var(--tm-yazi);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 860px) {
.vf-serit { padding: 22px 0 30px; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.vf-serit-yol { gap: 14px; }
.vf-serit-kart { width: 250px; transform: none; box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.vf-serit:hover .vf-serit-kart { opacity: 1; filter: none; }
.vf-serit-ad { padding: 6px 13px 8px; font-size: 12.5px; }
}
.vf-kanal-liste {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: stretch;
gap: 20px;
width: min(1560px, calc(100vw - 64px));
margin-left: 50%;
transform: translateX(-50%);
}
@media (max-width: 1100px) { .vf-kanal-liste { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .vf-kanal-liste { grid-template-columns: 1fr; } }
.vf-kanal-kart {
position: relative;
display: block;
padding: 0;
border-radius: 18px;
background: #131317;
border: 1px solid rgba(255, 255, 255, .10);
text-decoration: none;
transform: perspective(900px)
rotateX(var(--vf-rx, 0deg))
rotateY(var(--vf-ry, 0deg))
scale(var(--vf-ol, 1));
transform-style: preserve-3d;
transition: transform .18s ease-out, border-color .25s ease, box-shadow .25s ease;
will-change: transform;
}
.vf-kanal-kart:hover,
.vf-kanal-kart:focus-visible,
.vf-kanal-kart--odak {
--vf-ol: 1.06;
z-index: 4;
border-color: rgba(255, 0, 51, .55);
box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
}
.vf-kanal-ic {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 26px 24px 74px;
min-height: 100%;
box-sizing: border-box;
}
.vf-kanal-foto {
width: 84px;
height: 84px;
border-radius: 50%;
object-fit: cover;
display: block;
border: 2px solid rgba(255, 255, 255, .14);
}
.vf-kanal-ad {
font: 800 21px var(--font-display);
letter-spacing: -.015em;
color: #f4f6fb;
}
.vf-kanal-not {
margin: 0;
font: 400 14.5px/1.55 var(--font-body);
color: rgba(228, 234, 248, .72);
}
.vf-kanal-abone {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 18px;
border-radius: 12px;
color: #fff;
font: 800 16px var(--font-display);
background: linear-gradient(100deg, #c4001d, #ff0033, #ff4d1a, #ff0033, #c4001d);
background-size: 300% 100%;
animation: vfYtAkis 4s linear infinite;
box-shadow: 0 10px 26px rgba(255, 0, 51, .32);
opacity: 0;
transform: translateY(10px);
transition: opacity .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
pointer-events: none;
}
.vf-kanal-kart:hover .vf-kanal-abone,
.vf-kanal-kart:focus-visible .vf-kanal-abone,
.vf-kanal-kart--odak .vf-kanal-abone {
opacity: 1;
transform: translateY(0);
}
.vf-kanal-yt {
flex: none;
display: block;
width: 26px;
height: 26px;
}
@keyframes vfYtAkis {
from { background-position: 0% 50%; }
to   { background-position: 300% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.vf-kanal-kart { transition: none; }
.vf-kanal-abone { animation: none; }
}
@media (hover: none) {
.vf-kanal-abone { opacity: 1; transform: none; }
body.vf-odak-acik .vf-kanal-abone { opacity: 0; transform: translateY(10px); }
body.vf-odak-acik .vf-kanal-kart:hover {
--vf-ol: 1;
z-index: auto;
border-color: rgba(255, 255, 255, .10);
box-shadow: none;
}
body.vf-odak-acik .vf-kanal-kart:hover .vf-kanal-abone { opacity: 0; transform: translateY(10px); }
body.vf-odak-acik .vf-kanal-kart.vf-kanal-kart--odak {
--vf-ol: 1.06;
z-index: 4;
border-color: rgba(255, 0, 51, .55);
box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
}
body.vf-odak-acik .vf-kanal-kart.vf-kanal-kart--odak .vf-kanal-abone { opacity: 1; transform: none; }
}
.vf-kanal-ad-satir {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.vf-kanal-insta {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: rgba(228, 234, 248, .62);
background: none;
border: 0;
cursor: pointer;
transition: color .18s ease;
}
.vf-kanal-insta svg { width: 17px; height: 17px; display: block; }
.vf-kanal-insta:hover,
.vf-kanal-insta:focus-visible {
color: #fff;
outline: none;
}
.vf-kanal-not,
.vf-kanal-ad {
user-select: text;
-webkit-user-select: text;
-webkit-user-drag: none;
}
.vf-zaman,
.vf-klasor {
user-select: none;
-webkit-user-select: none;
}
.vf-son-panel {
padding: clamp(38px, 6vh, 64px) clamp(20px, 4vw, 56px);
border: 1px solid var(--tm-cizgi);
border-radius: 24px;
background: var(--tm-yuzey);
text-align: center;
}
:root[data-tema="koyu"] .vf-son-panel { background: #131317; }
.vf-son h2 {
margin: 0 0 12px;
font: 800 clamp(26px, 3.4vw, 40px)/1.12 var(--font-display);
letter-spacing: -.025em;
color: var(--tm-yazi);
}
.vf-son p {
margin: 0 auto 30px;
max-width: 54ch;
font: 400 15.5px/1.65 var(--font-body);
color: var(--tm-soluk);
}
.vf-son-dugmeler {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.vf-son-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
min-width: 280px;
padding: 20px 34px;
border: 0;
border-radius: 999px;
font: 800 21px var(--font-display);
cursor: pointer;
transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, filter .2s ease;
}
.vf-son-btn:hover { transform: scale(1.035); }
.vf-son-btn svg, .vf-son-btn img { flex: none; }
.vf-son-btn--biz {
background: #ffffff;
color: #0a0a0c;
box-shadow: 0 16px 42px rgba(0, 0, 0, .5);
}
.vf-son-btn--biz:hover {
background: #ffffff;
box-shadow: 0 22px 54px rgba(0, 0, 0, .58);
}
.vf-son-btn--biz:active { background: #ececed; }
.vf-son-yazi { line-height: 1.05; }
.vf-son-fiyat {
font: 600 21px var(--font-body);
opacity: 1;
display: inline-flex;
align-items: baseline;
gap: 2px;
white-space: nowrap;
color: rgba(10, 10, 12, .62);
}
.vf-son-fiyat .vf-fiyat {
font-weight: 800;
letter-spacing: -.02em;
color: #0a0a0c;
}
@media (max-width: 620px) {
.vf-son-btn { min-width: 100%; }
}
.vf-alt {
border-top: 1px solid var(--tm-cizgi);
padding: 28px 0 40px;
}
.vf-alt-satir {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
font: 400 13px var(--font-body);
color: var(--tm-soluk);
}
.vf-alt-satir a { color: var(--tm-soluk); text-decoration: none; }
.vf-alt-satir a:hover { color: var(--tm-yazi); text-decoration: underline; }
.vf-alt-ayrac { opacity: .5; }
.vf-hosgeldin {
position: fixed;
inset: 0;
z-index: 120;
display: flex;
align-items: center;
justify-content: center;
padding: 6vh 6vw;
background: rgba(3, 5, 12, .80);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
opacity: 0;
transition: opacity .38s ease;
}
.vf-hosgeldin.acik { opacity: 1; }
.vf-hosgeldin-ic {
width: min(520px, 100%);
text-align: center;
transform: translateY(18px);
transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.vf-hosgeldin.acik .vf-hosgeldin-ic { transform: none; }
.vf-hosgeldin-baslik {
margin: 0 0 14px;
font: 800 clamp(34px, 6vw, 52px)/1.05 var(--font-display);
letter-spacing: -.04em;
color: #ffffff;
}
.vf-hosgeldin-yazi {
margin: 0 auto 30px;
max-width: 30em;
font: 400 15.5px/1.65 var(--font-body);
color: rgba(233, 238, 250, .62);
}
.vf-hosgeldin-btn {
border: 0;
border-radius: 999px;
padding: 15px 34px;
background: #ffffff;
color: #0b0c10;
font: 700 15.5px var(--font-display);
letter-spacing: -.01em;
cursor: pointer;
transition: box-shadow .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.vf-hosgeldin-btn:hover { box-shadow: 0 12px 30px rgba(255, 255, 255, .20); transform: translateY(-1px); }
.vf-hosgeldin-btn:active { transform: none; box-shadow: none; }
.vf-hosgeldin-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
.vf-hosgeldin, .vf-hosgeldin-ic, .vf-hosgeldin-btn { transition: none; }
}
.vf-toast {
position: fixed;
left: 50%;
bottom: 26px;
transform: translateX(-50%);
z-index: 200;
padding: 11px 20px;
background: var(--tm-vurgu);
color: var(--tm-vurgu-yzm);
border-radius: 999px;
font: 600 13px var(--font-body);
box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.vf-toast.hidden { display: none; }