.header{
position:fixed;
top:20px;
left:0;
width:100%;
z-index:999;
padding:0 20px;
}

.header-blur{
position:absolute;
overflow:hidden;
isolation:isolate;
top:0;
left:50%;
transform:translateX(-50%);
width:calc(100% - 40px);
max-width:1400px;
height:86px;
border-radius:24px;
background:rgba(15,15,15,0.55);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,0.08);
box-shadow:
0 10px 40px rgba(0,0,0,0.45),
0 0 30px rgba(42,92,27,0.08);
}

.header-blur::before{
border-radius:inherit;
content:"";

position:absolute;
inset:0;

background-image:url("../../assets/menu-arkaplan.webp");

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

opacity:0.42;

z-index:-2;
}

.header-blur::after{
border-radius:inherit;
content:"";

position:absolute;
inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,0.35),
rgba(0,0,0,0.08),
rgba(0,0,0,0.35)
);

z-index:-1;
}

.header-container{
position:relative;
z-index:2;
max-width:1400px;
height:86px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:0 34px;
}

/* LOGO */

.header-logo{
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.header-logo img{
height:46px;
width:auto;
display:block;
object-fit:contain;
transition:0.35s;
}

/* MENU */

.header-menu{
display:flex;
align-items:center;
gap:clamp(16px,1.5vw,34px);
}

.header-menu a{
position:relative;
font-size:15px;
font-weight:500;
color:#d7d7d7;
transition:0.35s;
letter-spacing:0.25px;
white-space:nowrap;
}

.header-menu a::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
width:0%;
height:2px;
border-radius:20px;
background:var(--green);
transition:0.35s;
}

.header-menu a:hover{
color:white;
}

.header-menu a:hover::after{
width:100%;
}

/* RIGHT */

.header-right{
display:flex;
align-items:center;
gap:18px;
}

/* BUTTON */

.header-reservation-btn{
position:relative;
overflow:hidden;
isolation:isolate;
height:48px;
padding:0 28px;
display:flex;
align-items:center;
justify-content:center;
border-radius:60px;
background:linear-gradient(
135deg,
#2a5c1b,
#41752f
);
color:white;
font-weight:700;
font-size:14px;
letter-spacing:0.5px;
transition:0.4s;
box-shadow:
0 10px 25px rgba(42,92,27,0.35);
white-space:nowrap;
}

.header-reservation-btn:hover{
transform:translateY(-3px);
box-shadow:
0 18px 35px rgba(42,92,27,0.5);
}

.header-reservation-btn::before{

content:"";

position:absolute;
top:0;
left:0;

width:70%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.22),
transparent
);

transform:translateX(-180%) skewX(-25deg);

animation:reservationShine 4.5s infinite;

z-index:0;
}

/* MOBILE BUTTON */

.header-mobile-btn{
position:relative;
overflow:hidden;
isolation:isolate;

display:none;

width:52px;
height:52px;

border-radius:18px;

background:
linear-gradient(
180deg,
rgba(8,12,8,0.92),
rgba(12,18,12,0.88)
);

border:1px solid rgba(215,180,106,0.72);

align-items:center;
justify-content:center;
flex-direction:column;

gap:5px;

cursor:pointer;

transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease,
background .35s ease;

backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

box-shadow:

/* iç gold edge */
0 0 0 1px rgba(215,180,106,0.14),

/* halka 1 */
0 0 0 6px rgba(82,158,48,0.10),

/* halka 2 */
0 0 0 12px rgba(82,158,48,0.07),

/* halka 3 */
0 0 0 18px rgba(82,158,48,0.05),

/* aura glow */
0 0 18px rgba(82,158,48,0.16),
0 0 34px rgba(82,158,48,0.10),

/* iç glow */
inset 0 0 24px rgba(82,158,48,0.06);
}

.header-mobile-btn::before{
content:"";

position:absolute;
inset:-12px;

background:
radial-gradient(
circle,
rgba(82,158,48,0.30) 0%,
rgba(82,158,48,0.12) 34%,
transparent 72%
);

opacity:.9;

z-index:-1;
}

.header-mobile-btn:hover{
transform:translateY(-2px) scale(1.03);

border-color:#d7b46a;

box-shadow:

/* gold edge */
0 0 0 1px rgba(215,180,106,0.20),

/* halka 1 */
0 0 0 7px rgba(82,158,48,0.16),

/* halka 2 */
0 0 0 14px rgba(82,158,48,0.10),

/* halka 3 */
0 0 0 21px rgba(82,158,48,0.06),

/* aura */
0 0 26px rgba(82,158,48,0.34),
0 0 54px rgba(82,158,48,0.22),

/* inner */
inset 0 0 28px rgba(82,158,48,0.12);
}

.header-mobile-btn span{
width:22px;
height:2.5px;

border-radius:20px;

background:#f3e7c0;

box-shadow:
0 0 8px rgba(243,231,192,0.24);

transition:.35s ease;
}


.header-mobile-btn.active span:nth-child(1){
transform:translateY(7px) rotate(45deg);
}

.header-mobile-btn.active span:nth-child(2){
opacity:0;
transform:scaleX(0);
}

.header-mobile-btn.active span:nth-child(3){
transform:translateY(-8px) rotate(-45deg);
}


/* MOBILE MENU */

.header-mobile-menu{
display:none;
position:absolute;
top:82px;
right:20px;
left:auto;

z-index:999;

width:clamp(300px,40vw,430px);
max-width:calc(100vw - 30px);

padding:10px;

border-radius:26px;

background:
linear-gradient(
180deg,
rgba(8,13,8,0.78),
rgba(8,10,8,0.66)
);

backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);

border:1px solid rgba(215,180,106,0.48);

flex-direction:column;
gap:5px;

box-shadow:
0 0 0 1px rgba(215,180,106,0.08),
0 22px 70px rgba(0,0,0,0.58),
0 0 34px rgba(82,158,48,0.18),
inset 0 0 42px rgba(82,158,48,0.08);

overflow:hidden;
isolation:isolate;
}

.header-mobile-menu::before{
content:"";
position:absolute;
inset:-40px;
background:
radial-gradient(
circle at 0% 50%,
rgba(82,158,48,0.22),
transparent 48%
),
radial-gradient(
circle at 100% 0%,
rgba(215,180,106,0.16),
transparent 38%
);
z-index:-1;
}

.header-mobile-menu::after{
content:"";
position:absolute;
top:0;
right:0;
width:42%;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(215,180,106,0.78)
);
}

.header-mobile-menu.active{
display:flex;
animation:mobileMenuAnimation 0.34s cubic-bezier(.2,.8,.2,1);
}

.header-mobile-menu a{
position:relative;

display:flex;
align-items:center;
justify-content:flex-start;
gap:50px;

min-height:54px;
padding:0 16px;

border-radius:16px;

color:#ffffff;
text-decoration:none;

font-size:15px;
font-weight:700;
line-height:1.2;

background:rgba(255,255,255,0.025);
border:1px solid rgba(215,180,106,0.20);

transition:
transform .25s ease,
background .25s ease,
border-color .25s ease,
box-shadow .25s ease;
}

.header-mobile-menu a img{
width:23px;
height:23px;
flex:0 0 23px;
display:block;
filter:
drop-shadow(0 0 8px rgba(215,180,106,0.20));
}

.header-mobile-menu a span{
display:block;
text-align:left;
white-space:nowrap;
}

.header-mobile-menu a::before{
content:"";
position:absolute;
left:0;
top:12px;
bottom:12px;
width:3px;
border-radius:10px;
background:linear-gradient(180deg,#529e30,#d7b46a);
opacity:.75;
}

.header-mobile-menu a:hover{
transform:translateX(-3px);
background:rgba(82,158,48,0.10);
border-color:rgba(215,180,106,0.42);
box-shadow:
0 0 22px rgba(82,158,48,0.14),
inset 0 0 20px rgba(82,158,48,0.05);
}

.header-mobile-menu a:active{
transform:scale(0.985);
}


/* ANIMATION */

@keyframes mobileMenuAnimation{

from{
opacity:0;
transform:translateY(-10px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* TABLET */

@media(max-width:1100px){

.header{
top:12px;
padding:0 12px;
}

.header-blur{
width:calc(100% - 24px);
height:76px;
border-radius:20px;
}

.header-container{
height:76px;
padding:0 18px;
}

.header-menu{
display:none;
}

.header-mobile-btn{
display:flex;
}

.header-logo img{
height:38px;
}

.header-reservation-btn{
height:42px;
padding:0 18px;
font-size:12px;
}

}

/* MOBILE */

@media(max-width:700px){

.header{
top:10px;
padding:0 10px;
}

.header-blur{
width:calc(100% - 20px);
height:70px;
border-radius:18px;
}

.header-container{
height:70px;
padding:0 14px;
}

.header-logo img{
width:125px;
height:32px;
max-width:125px;
}

.header-reservation-btn{
height:38px;
padding:0 14px;
font-size:11px;
border-radius:40px;
}

.header-mobile-btn{
width:48px;
height:48px;
border-radius:16px;
}

.header-mobile-menu{
padding:10px;
border-radius:16px;
}

}
@keyframes reservationShine{

0%{
transform:translateX(-180%) skewX(-25deg);
}

25%{
transform:translateX(220%) skewX(-25deg);
}

100%{
transform:translateX(220%) skewX(-25deg);
}

}

@media(max-width:700px){

.header-mobile-menu{
top:78px;
right:10px;
width:clamp(250px,40vw,330px);
max-width:calc(100vw - 20px);
padding:12px;
border-radius:22px;
gap:8px;
}

.header-mobile-menu a{
min-height:42px;
padding:0 14px;
font-size:14px;
border-radius:14px;
}

.header-mobile-menu a img{
width:21px;
height:21px;
flex-basis:21px;
}

}

@media(max-width:480px){

.header-reservation-btn{
height:32px;
padding:0 12px;
font-size:9.5px;
border-radius:32px;
letter-spacing:0.25px;
}

.header-mobile-btn{
width:42px;
height:42px;
border-radius:14px;
gap:4px;
}

.header-mobile-btn span{
width:19px;
height:2px;
}

}
body:not([data-page="villalar-ve-fiyatlar"]) .header-reservation-btn{
display:flex !important;
visibility:visible !important;
opacity:1 !important;
}

body[data-page="villalar-ve-fiyatlar"] .header-reservation-btn{
display:none !important;
}