/* =========================================================
ABOUT PAGE - CINEMATIC LUXURY VERSION
Kartepe Bungalov Villas
========================================================= */


/* =========================================================
GENERAL
========================================================= */

.about-page{

padding:110px 15px 10px;
}

.about-container{

max-width:1280px;
margin:auto;
}


/* =========================================================
HERO
========================================================= */

.about-hero{

position:relative;

min-height:760px;

display:flex;
align-items:center;

overflow:hidden;

border-radius:42px;

padding:70px;

margin-bottom:24px;

background:

linear-gradient(
90deg,
rgba(0,0,0,0.82) 0%,
rgba(0,0,0,0.52) 45%,
rgba(0,0,0,0.18) 100%
),

url("../../assets/hakkimizda-hero.webp");

background-size:cover;
background-position:center;
background-repeat:no-repeat;

box-shadow:
0 40px 100px rgba(0,0,0,0.52);
}

.about-hero-content{

max-width:760px;
}

.about-hero-label{

display:inline-flex;

padding:10px 18px;

border-radius:999px;

background:rgba(255,255,255,0.06);

border:1px solid rgba(255,255,255,0.08);

font-size:12px;
font-weight:700;
letter-spacing:2px;

color:#ffffff;

margin-bottom:26px;
}

.about-hero h1{

font-size:clamp(56px,5vw,84px);

line-height:0.96;

letter-spacing:-2.5px;

color:#ffffff;

margin-bottom:28px;
}

.about-hero p{

font-size:18px;

line-height:1.9;

color:#d8d8d8;

margin-bottom:36px;
}

.about-hero-buttons{

display:flex;
gap:14px;
flex-wrap:wrap;
}

.about-btn{

height:56px;
padding:0 30px;

display:flex;
align-items:center;
justify-content:center;

border-radius:999px;

font-size:14px;
font-weight:700;

transition:0.35s ease;
}

.about-btn.primary{

background:
linear-gradient(
135deg,
#2a5c1b,
#41752f
);

color:#ffffff;

box-shadow:
0 18px 38px rgba(42,92,27,0.28);
}

.about-btn.secondary{

background:rgba(255,255,255,0.05);

border:1px solid rgba(255,255,255,0.08);

color:#ffffff;
}

.about-btn:hover{
transform:translateY(-4px);
}


/* =========================================================
STATS
========================================================= */

.about-stats{

display:grid;
grid-template-columns:repeat(4,1fr);

gap:18px;

margin-bottom:24px;
}

.about-stat{

padding:34px 20px;

border-radius:30px;

text-align:center;

background:
linear-gradient(
180deg,
rgba(18,18,18,0.92),
rgba(10,10,10,0.96)
);

box-shadow:
0 20px 50px rgba(0,0,0,0.28);
}

.about-stat h3{

font-size:46px;

color:#ffffff;

margin-bottom:10px;
}

.about-stat span{

font-size:14px;

color:#bfbfbf;
}


/* =========================================================
CINEMATIC BLOCKS
========================================================= */

.about-cinematic-block{

position:relative;

min-height:620px;

display:flex;
align-items:center;

overflow:hidden;

border-radius:40px;

padding:60px;

margin-bottom:24px;

background-size:cover;
background-position:center;
background-repeat:no-repeat;

box-shadow:
0 40px 100px rgba(0,0,0,0.5);
}

.about-cinematic-block::before{

content:"";

position:absolute;
inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,0.82) 0%,
rgba(0,0,0,0.54) 42%,
rgba(0,0,0,0.18) 100%
);
}

.about-cinematic-content{

position:relative;
z-index:2;

max-width:760px;

}

.about-cinematic-content h2{

font-size:clamp(42px,3vw,66px);

line-height:1.02;

letter-spacing:-1.5px;

margin-bottom:24px;

color:#ffffff;
}

.about-cinematic-content p{

font-size:17px;

line-height:1.9;

color:#d8d8d8;

margin-bottom:18px;
}


/* =========================================================
BACKGROUND HEROES
========================================================= */

.about-nature{
background-image:url("../../assets/hakkimizda-doga.webp");
}

.about-pool{
background-image:url("../../assets/hakkimizda-havuz.webp");
}

.about-tech{
background-image:url("../../assets/hakkimizda-teknik.webp");
}

.about-location{
background-image:url("../../assets/hakkimizda-konum.webp");
}

.about-final{
background-image:url("../../assets/hakkimizda-final.webp");
}


/* =========================================================
FINAL CTA
========================================================= */

.about-final{

min-height:540px;
}

.about-final .about-cinematic-content{

text-align:center;

margin:auto;
}


/* =========================================================
LIST
========================================================= */

.about-list{

display:flex;
flex-direction:column;
gap:14px;

margin-top:24px;
}

.about-list div{

padding:16px 20px;

border-radius:18px;

background:rgba(255,255,255,0.05);

font-size:15px;

color:#ffffff;
}


/* =========================================================
MOBILE
========================================================= */

@media(max-width:991px){

.about-stat{

padding:5px 12px;

border-radius:18px;
}

.about-stat h3{

font-size:24px;

margin-bottom:4px;

line-height:1.1;
}

.about-stat span{

font-size:12px;

line-height:1.4;
}

.about-page{
padding:92px 14px 10px;
}

.about-hero{

min-height:auto;

padding:90px 24px 50px;

border-radius:28px;
}

.about-hero h1{

font-size:42px;

line-height:1.02;
}

.about-hero p{

font-size:15px;

line-height:1.8;
}

.about-hero-buttons{

flex-direction:column;
}

.about-btn{
width:100%;
}

.about-stats{

grid-template-columns:1fr 1fr;

gap:12px;
}

.about-cinematic-block{

min-height:auto;

padding:22px;

border-radius:26px;
}

.about-cinematic-content{

padding:24px;

border-radius:24px;
}

.about-cinematic-content h2{

font-size:34px;
}

.about-cinematic-content p{

font-size:15px;

line-height:1.8;
}

}


@media(max-width:700px){

.about-stats{

grid-template-columns:1fr 1fr;

gap:12px;
}

.about-hero h1{

font-size:34px;
}

.about-cinematic-content h2{

font-size:30px;
}

}