.bozbay-hizmetler-vitrini {
visibility:visible!important;
--bhv-cyan:#00e5ff;
--bhv-text:#fff;
--bhv-ease:cubic-bezier(.22,1,.36,1);
position:relative;
width:min(1480px,calc(100% - 96px));
margin:0 auto;
padding:clamp(90px,9vw,150px) 0 clamp(110px,10vw,170px);
color:var(--bhv-text);
}
.bozbay-hizmetler-vitrini__uyari {
width:min(1180px,calc(100% - 40px));
margin:30px auto;
padding:18px 20px;
color:#fff;
background:#11141a;
border:1px solid rgba(255,255,255,.14);
border-radius:12px;
}
.bozbay-hizmetler-vitrini__ust {
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
align-items:end;
gap:clamp(50px,7vw,130px);
margin-bottom:clamp(45px,5vw,76px);
}
.bozbay-hizmetler-vitrini__etiket {
display:inline-flex;
align-items:center;
gap:11px;
margin:0 0 23px!important;
color:rgba(255,255,255,.48);
font:700 10px/1 inherit;
letter-spacing:.24em;
text-transform:uppercase;
}
.bozbay-hizmetler-vitrini__etiket::before {
content:"";
display:block;
width:30px;
height:1px;
background:var(--bhv-cyan);
box-shadow:0 0 12px rgba(0,229,255,.4);
}
.bozbay-hizmetler-vitrini__baslik h2 {
max-width:900px;
margin:0!important;
color:#fff!important;
font-family:inherit;
font-size:clamp(45px,5.4vw,86px);
font-weight:600;
line-height:.99;
letter-spacing:-.048em;
text-wrap:balance;
}
.bozbay-hizmetler-vitrini__aciklama{padding-bottom:5px}
.bozbay-hizmetler-vitrini__aciklama>p {
max-width:470px;
margin:0 0 28px!important;
color:rgba(255,255,255,.56);
font-family:inherit;
font-size:clamp(14px,1vw,17px);
line-height:1.75;
}
.bozbay-hizmetler-vitrini__tumunu-gor {
display:inline-flex;
align-items:center;
gap:12px;
min-height:44px;
padding:0 20px;
color:#fff!important;
background:transparent;
border:1px solid rgba(255,255,255,.48);
border-radius:999px;
font:600 10px/1 inherit;
letter-spacing:.12em;
text-decoration:none!important;
text-transform:uppercase;
transition:color .3s ease,background-color .3s ease,border-color .3s ease,transform .3s ease;
}
.bozbay-hizmetler-vitrini__tumunu-gor i {
position:relative;
display:block;
width:11px;
height:11px;
}
.bozbay-hizmetler-vitrini__tumunu-gor i::before {
content:"";
position:absolute;
top:50%;
left:0;
width:11px;
height:1px;
background:currentColor;
transform:translateY(-50%) rotate(-45deg);
}
.bozbay-hizmetler-vitrini__tumunu-gor i::after {
content:"";
position:absolute;
top:0;
right:0;
width:7px;
height:7px;
border-top:1px solid currentColor;
border-right:1px solid currentColor;
}
.bozbay-hizmetler-vitrini__tumunu-gor:hover {
color:#071014!important;
background:var(--bhv-cyan);
border-color:var(--bhv-cyan);
transform:translateY(-2px);
}
.bozbay-hizmetler-vitrini__grid {
display:grid;
grid-template-columns:repeat(12,minmax(0,1fr));
grid-template-rows:repeat(2,clamp(250px,19vw,320px)) clamp(245px,18vw,300px);
gap:clamp(18px,1.6vw,26px);
width:100%;
}
.bozbay-hizmetler-vitrini__kart {
position:relative;
isolation:isolate;
overflow:hidden;
display:block;
min-width:0;
min-height:0;
color:#fff!important;
background:#11141a;
border:1px solid rgba(255,255,255,.1);
border-radius:24px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 20px 60px rgba(0,0,0,.18);
text-decoration:none!important;
transform:translate3d(0,0,0);
transition:transform .5s var(--bhv-ease),border-color .35s ease,box-shadow .5s var(--bhv-ease);
}
.bozbay-hizmetler-vitrini__kart--1{grid-column:1/8;grid-row:1/3}
.bozbay-hizmetler-vitrini__kart--2{grid-column:8/13;grid-row:1}
.bozbay-hizmetler-vitrini__kart--3{grid-column:8/13;grid-row:2}
.bozbay-hizmetler-vitrini__kart--4{grid-column:1/5;grid-row:3}
.bozbay-hizmetler-vitrini__kart--5{grid-column:5/9;grid-row:3}
.bozbay-hizmetler-vitrini__kart--6{grid-column:9/13;grid-row:3}
.bozbay-hizmetler-vitrini__medya {
position:absolute;
z-index:0;
inset:0;
width:100%;
height:100%;
margin:0!important;
overflow:hidden;
}
.bozbay-hizmetler-vitrini__img {
display:block;
width:100%!important;
height:100%!important;
margin:0!important;
object-fit:cover;
object-position:center;
transform:translate3d(0,0,0) scale(1.001);
transition:transform .8s var(--bhv-ease),filter .55s ease;
}
.bozbay-hizmetler-vitrini__karartma {
position:absolute;
z-index:1;
inset:0;
background:
linear-gradient(180deg,rgba(7,9,13,.12) 0%,rgba(7,9,13,.08) 32%,rgba(7,9,13,.66) 70%,rgba(7,9,13,.96) 100%),
linear-gradient(90deg,rgba(7,9,13,.25),transparent 55%);
pointer-events:none;
}
.bozbay-hizmetler-vitrini__numara {
position:absolute;
z-index:4;
top:clamp(17px,1.5vw,23px);
left:clamp(18px,1.6vw,25px);
color:rgba(255,255,255,.6);
font:600 9px/1 inherit;
letter-spacing:.18em;
}
.bozbay-hizmetler-vitrini__ok {
position:absolute;
z-index:4;
top:clamp(15px,1.4vw,21px);
right:clamp(15px,1.4vw,21px);
width:42px;
height:42px;
background:rgba(8,10,15,.28);
border:1px solid rgba(255,255,255,.32);
border-radius:50%;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition:background-color .3s ease,border-color .3s ease,transform .4s var(--bhv-ease),box-shadow .3s ease;
}
.bozbay-hizmetler-vitrini__ok::before {
content:"";
position:absolute;
top:50%;
left:50%;
width:11px;
height:1.5px;
background:#fff;
transform:translate(-55%,-50%) rotate(-45deg);
}
.bozbay-hizmetler-vitrini__ok::after {
content:"";
position:absolute;
top:11px;
right:11px;
width:9px;
height:9px;
border-top:1.5px solid #fff;
border-right:1.5px solid #fff;
}
.bozbay-hizmetler-vitrini__icerik {
position:absolute;
z-index:3;
right:clamp(18px,2vw,30px);
bottom:clamp(19px,2vw,30px);
left:clamp(18px,2vw,30px);
transition:transform .45s var(--bhv-ease);
}
.bozbay-hizmetler-vitrini__kucuk-yazi {
display:block;
margin-bottom:8px;
color:var(--bhv-cyan);
font:700 8px/1 inherit;
letter-spacing:.18em;
}
.bozbay-hizmetler-vitrini__icerik h3 {
max-width:92%;
margin:0!important;
color:#fff!important;
font-family:inherit;
font-size:clamp(21px,2vw,32px);
font-weight:500;
line-height:1.08;
letter-spacing:-.035em;
text-wrap:balance;
}
.bozbay-hizmetler-vitrini__kart--1 .bozbay-hizmetler-vitrini__icerik h3 {
max-width:80%;
font-size:clamp(34px,3.7vw,58px);
line-height:1.02;
}
.bozbay-hizmetler-vitrini__kart--4 .bozbay-hizmetler-vitrini__icerik h3,
.bozbay-hizmetler-vitrini__kart--5 .bozbay-hizmetler-vitrini__icerik h3,
.bozbay-hizmetler-vitrini__kart--6 .bozbay-hizmetler-vitrini__icerik h3 {
font-size:clamp(19px,1.55vw,25px);
}
.bozbay-hizmetler-vitrini__icerik p {
max-width:580px;
margin:13px 0 0!important;
color:rgba(255,255,255,.66);
font-family:inherit;
font-size:clamp(12px,.95vw,15px);
line-height:1.6;
}
.bozbay-hizmetler-vitrini__kart:not(.bozbay-hizmetler-vitrini__kart--1) .bozbay-hizmetler-vitrini__icerik p {
display:-webkit-box;
overflow:hidden;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.bozbay-hizmetler-vitrini__kart--4 .bozbay-hizmetler-vitrini__icerik p,
.bozbay-hizmetler-vitrini__kart--5 .bozbay-hizmetler-vitrini__icerik p,
.bozbay-hizmetler-vitrini__kart--6 .bozbay-hizmetler-vitrini__icerik p {display:none}
.bozbay-hizmetler-vitrini__incele {
display:inline-block;
max-height:0;
margin-top:0;
overflow:hidden;
color:rgba(255,255,255,.75);
font:600 9px/1 inherit;
letter-spacing:.13em;
text-transform:uppercase;
opacity:0;
transform:translateY(8px);
transition:max-height .35s ease,margin-top .35s ease,opacity .35s ease,transform .35s ease;
}
.bozbay-hizmetler-vitrini__kart:hover {
z-index:4;
transform:translate3d(0,-5px,0);
border-color:rgba(0,229,255,.25);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 34px 85px rgba(0,0,0,.32),0 0 45px rgba(0,229,255,.055);
}
.bozbay-hizmetler-vitrini__kart:hover .bozbay-hizmetler-vitrini__img {
transform:translate3d(0,0,0) scale(1.055);
filter:brightness(1.04);
}
.bozbay-hizmetler-vitrini__kart:hover .bozbay-hizmetler-vitrini__icerik {transform:translate3d(0,-5px,0)}
.bozbay-hizmetler-vitrini__kart:hover .bozbay-hizmetler-vitrini__ok {
background:var(--bhv-cyan);
border-color:var(--bhv-cyan);
transform:translate(3px,-3px);
box-shadow:0 0 24px rgba(0,229,255,.25);
}
.bozbay-hizmetler-vitrini__kart:hover .bozbay-hizmetler-vitrini__ok::before{background:#071014}
.bozbay-hizmetler-vitrini__kart:hover .bozbay-hizmetler-vitrini__ok::after{border-color:#071014}
.bozbay-hizmetler-vitrini__kart:hover .bozbay-hizmetler-vitrini__incele {
max-height:20px;
margin-top:13px;
opacity:1;
transform:translateY(0);
}
.bozbay-hizmetler-vitrini__kart:focus-visible,
.bozbay-hizmetler-vitrini__tumunu-gor:focus-visible {
outline:2px solid var(--bhv-cyan);
outline-offset:5px;
}
@media (min-width:1025px) and (max-width:1600px) {
.bozbay-hizmetler-vitrini {
width:min(1280px,calc(100% - 72px));
padding-top:90px;
padding-bottom:115px;
}
.bozbay-hizmetler-vitrini__ust{gap:clamp(45px,5vw,90px);margin-bottom:48px}
.bozbay-hizmetler-vitrini__baslik h2{font-size:clamp(42px,4.4vw,66px)}
.bozbay-hizmetler-vitrini__grid{
grid-template-rows:repeat(2,clamp(220px,18vw,280px)) clamp(215px,17vw,260px);
gap:20px;
}
.bozbay-hizmetler-vitrini__kart{border-radius:20px}
.bozbay-hizmetler-vitrini__icerik h3{font-size:clamp(19px,1.8vw,27px)}
.bozbay-hizmetler-vitrini__kart--1 .bozbay-hizmetler-vitrini__icerik h3{font-size:clamp(30px,3.3vw,48px)}
}
@media (max-width:1024px) {
.bozbay-hizmetler-vitrini{
width:calc(100% - 56px);
padding-top:80px;
padding-bottom:90px;
}
.bozbay-hizmetler-vitrini__ust{
grid-template-columns:1fr;
align-items:start;
gap:32px;
margin-bottom:42px;
}
.bozbay-hizmetler-vitrini__baslik h2{font-size:clamp(42px,7vw,64px)}
.bozbay-hizmetler-vitrini__grid{
grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-rows:none;
grid-auto-rows:auto;
gap:18px;
}
.bozbay-hizmetler-vitrini__kart,
.bozbay-hizmetler-vitrini__kart--1,
.bozbay-hizmetler-vitrini__kart--2,
.bozbay-hizmetler-vitrini__kart--3,
.bozbay-hizmetler-vitrini__kart--4,
.bozbay-hizmetler-vitrini__kart--5,
.bozbay-hizmetler-vitrini__kart--6{
grid-column:auto;
grid-row:auto;
aspect-ratio:4/3;
}
.bozbay-hizmetler-vitrini__kart--1{grid-column:1/-1;aspect-ratio:16/9}
}
@media (max-width:767px) {
.bozbay-hizmetler-vitrini{
width:calc(100% - 32px);
padding-top:68px;
padding-bottom:74px;
}
.bozbay-hizmetler-vitrini__ust{gap:27px;margin-bottom:34px}
.bozbay-hizmetler-vitrini__baslik h2{
font-size:clamp(36px,10vw,48px);
line-height:1.02;
letter-spacing:-.04em;
}
.bozbay-hizmetler-vitrini__grid{grid-template-columns:1fr;gap:18px}
.bozbay-hizmetler-vitrini__kart,
.bozbay-hizmetler-vitrini__kart--1,
.bozbay-hizmetler-vitrini__kart--2,
.bozbay-hizmetler-vitrini__kart--3,
.bozbay-hizmetler-vitrini__kart--4,
.bozbay-hizmetler-vitrini__kart--5,
.bozbay-hizmetler-vitrini__kart--6{
grid-column:1;
grid-row:auto;
width:100%;
aspect-ratio:4/3;
border-radius:17px;
}
.bozbay-hizmetler-vitrini__icerik h3,
.bozbay-hizmetler-vitrini__kart--1 .bozbay-hizmetler-vitrini__icerik h3{
max-width:88%;
font-size:clamp(23px,7.3vw,32px);
}
.bozbay-hizmetler-vitrini__icerik p,
.bozbay-hizmetler-vitrini__incele{display:none!important}
}
@media (hover:none) {
.bozbay-hizmetler-vitrini__kart:hover{transform:none}
.bozbay-hizmetler-vitrini__kart:hover .bozbay-hizmetler-vitrini__img{transform:translate3d(0,0,0) scale(1.001)}
.bozbay-hizmetler-vitrini__kart:hover .bozbay-hizmetler-vitrini__icerik{transform:none}
}
@media (prefers-reduced-motion:reduce) {
.bozbay-hizmetler-vitrini__kart,
.bozbay-hizmetler-vitrini__img,
.bozbay-hizmetler-vitrini__icerik,
.bozbay-hizmetler-vitrini__ok,
.bozbay-hizmetler-vitrini__incele{transition:none!important}
}